@workday/canvas-kit-react 6.3.5 → 7.0.0-alpha.0-next.3

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,11 +1,9 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
-import {type, typeColors} from '@workday/canvas-kit-react/tokens';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {type, typeColors, space} from '@workday/canvas-kit-react/tokens';
+import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
-import {Flex, FlexProps} from './common/Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
 export interface AdditionalDetailsProps extends FlexProps {
@@ -15,30 +13,38 @@ export interface AdditionalDetailsProps extends FlexProps {
   shouldHideDetails?: boolean;
 }
 
-// Ideally, these styles would be applied directly to a Text component
-const textStyles = css({
-  ...type.levels.subtext.medium,
-  color: typeColors.hint,
+const StyledAdditionalDetails = styled(Flex)<
+  StyledType & Pick<AdditionalDetailsProps, 'shouldHideDetails'>
+>(({shouldHideDetails}) => {
+  const styles = {
+    ...type.levels.subtext.medium,
+    color: typeColors.hint,
+  };
+  if (shouldHideDetails) {
+    return {
+      ...styles,
+      ...accessibleHide,
+      marginTop: space.zero,
+    };
+  } else {
+    return {
+      ...styles,
+      marginTop: space.xs,
+    };
+  }
 });
 
 export const AdditionalDetails = ({
   model,
   children,
   shouldAnnounceToScreenReader,
-  shouldHideDetails = false,
   ...elemProps
 }: AdditionalDetailsProps) => {
   const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
-  const detailStyles = css([textStyles, shouldHideDetails ? accessibleHide : null]);
 
   return (
-    <Flex
-      mt={shouldHideDetails ? 'zero' : 'xs'}
-      css={detailStyles}
-      {...liveRegionProps}
-      {...elemProps}
-    >
+    <StyledAdditionalDetails {...liveRegionProps} {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </Flex>
+    </StyledAdditionalDetails>
   );
 };

package/pagination/lib/Pagination/Controls.tsx

@@ -8,7 +8,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 
 import {PaginationModel} from './types';
-import {HStack} from './common/Stack';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
 import {useRTL} from './common/utils/useRTL';
 
 export type ControlButtonProps = IconButtonProps &

package/pagination/lib/Pagination/GoTo/Form.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import {HStack, HStackProps} from '../common/Stack';
-import {Spacing} from '../common/utils/space';
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
 import {useRTL} from '../common/utils/useRTL';
 
 export type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> &
   Omit<HStackProps, 'spacing'> & {
-    spacing?: Spacing;
+    spacing?: StackSpacing;
   };
 
 export const GoToForm = ({children, onSubmit, spacing = 'xxs', ...elemProps}: GoToFormProps) => {
@@ -15,8 +14,8 @@ export const GoToForm = ({children, onSubmit, spacing = 'xxs', ...elemProps}: Go
       as="form"
       alignItems="center"
       spacing={spacing}
-      pl={shouldUseRTL ? 'xxs' : undefined}
-      pr={shouldUseRTL ? 'xxs' : undefined}
+      paddingLeft={shouldUseRTL ? 'xxs' : undefined}
+      paddingRight={shouldUseRTL ? 'xxs' : undefined}
       onSubmit={onSubmit}
       {...elemProps}
     >

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -1,9 +1,8 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css, Interpolation} from '@emotion/core';
 import {type, typeColors} from '@workday/canvas-kit-react/tokens';
 
 import {PaginationModel} from '../types';
+import {StyledType, styled} from '@workday/canvas-kit-react/common';
 
 export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   model: PaginationModel;
@@ -13,16 +12,16 @@ export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelEleme
   children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
 
-const labelStyles = css({
+const StyledLabel = styled('label')<StyledType>({
   ...type.levels.subtext.medium,
   color: typeColors.hint,
   whiteSpace: 'nowrap',
 });
 
-export const GoToLabel = ({css: cssProp, model, children, ...elemProps}: GoToLabelProps) => {
+export const GoToLabel = ({model, children, ...elemProps}: GoToLabelProps) => {
   return (
-    <label css={[labelStyles, cssProp as Interpolation<undefined>]} {...elemProps}>
+    <StyledLabel {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </label>
+    </StyledLabel>
   );
 };

package/pagination/lib/Pagination/Nav.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Flex, FlexProps} from './common/Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
 
 export interface PaginationNavProps extends Omit<FlexProps, 'as'> {
   'aria-label': string;
@@ -11,7 +11,7 @@ export const PaginationNav = ({'aria-label': ariaLabel, ...elemProps}: Paginatio
       as="nav"
       aria-label={ariaLabel}
       display="inline-flex"
-      direction="column"
+      flexDirection="column"
       alignItems="center"
       {...elemProps}
     />

package/pagination/lib/Pagination/PageList.tsx

@@ -1,25 +1,27 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
 
 import {PaginationModel} from './types';
-import {List, ListItem, ListItemProps, ListProps} from './common/List';
-import {useStack} from './common/Stack';
-import {useRTL} from './common/utils/useRTL';
+import {ListItem, ListItemProps} from './common/List';
+import {HStack, HStackProps} from '@workday/canvas-kit-labs-react/layout';
 
-export interface PageListProps extends Omit<ListProps, 'as'> {
+export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
   model: PaginationModel;
   children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }
 
 export const PageList = ({model, children, ...elemProps}: PageListProps) => {
-  const {shouldUseRTL} = useRTL();
-  const stackStyles = useStack({direction: 'row', spacing: 'xxxs', shouldUseRTL});
-
   return (
-    <List as="ol" role="list" css={css(stackStyles)} {...elemProps}>
+    <HStack
+      margin="zero"
+      as="ol"
+      role="list"
+      paddingLeft="zero"
+      paddingRight="zero"
+      spacing="xxxs"
+      {...elemProps}
+    >
       {typeof children === 'function' ? children(model) : children}
-    </List>
+    </HStack>
   );
 };
 

package/pagination/lib/Pagination/common/List.tsx

@@ -1,39 +1,41 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
 
-import {Flex, FlexProps} from './Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
+import {StyledType, styled, createComponent} from '@workday/canvas-kit-react/common';
 
-export interface ListProps extends FlexProps, React.OlHTMLAttributes<HTMLElement> {
-  as: 'ol' | 'ul';
-}
+export interface ListProps extends FlexProps {}
 
-const listStyles = css({
+const StyledList = styled(Flex.as('ul'))<StyledType & FlexProps>({
   listStyle: 'none',
 });
 
-export const List = React.forwardRef<HTMLOListElement | HTMLUListElement, ListProps>(
-  ({as, children, ...elemProps}, ref) => {
+export const List = createComponent('ul')({
+  displayName: 'List',
+  Component: ({children, ...elemProps}: ListProps, ref, Element) => {
     return (
-      <Flex as={as} m="zero" p="zero" css={listStyles} ref={ref} {...elemProps}>
+      <StyledList
+        as={Element}
+        marginY="zero"
+        marginX="zero"
+        padding="zero"
+        ref={ref}
+        {...elemProps}
+      >
         {children}
-      </Flex>
+      </StyledList>
     );
-  }
-);
-
-List.displayName = 'List';
+  },
+});
 
-export type ListItemProps = Omit<FlexProps, 'as'>;
+export interface ListItemProps extends FlexProps {}
 
-export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
-  ({children, ...elemProps}, ref) => {
+export const ListItem = createComponent('li')({
+  displayName: 'ListItem',
+  Component: ({children, ...elemProps}: ListItemProps, ref, Element) => {
     return (
-      <Flex as="li" ref={ref} {...elemProps}>
+      <Flex as={Element} ref={ref} {...elemProps}>
         {children}
       </Flex>
     );
-  }
-);
-
-ListItem.displayName = 'ListItem';
+  },
+});

package/status-indicator/lib/StatusIndicator.tsx

@@ -35,7 +35,6 @@ export const statusIndicatorStyles: StatusIndicatorGenericStyle = {
     display: 'inline-flex',
     alignItems: 'center',
     verticalAlign: 'middle',
-    maxWidth: 150,
     height: space.s,
     padding: `1px ${space.xxxs}`,
     borderRadius: borderRadius.s,
@@ -116,6 +115,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
    * @default StatusIndicatorEmphasis.High
    */
   emphasis?: StatusIndicatorEmphasis;
+  /**
+   * The maxWidth of the container before it truncates
+   * @default 200
+   */
+  maxWidth?: number;
   /**
    * The text of the StatusIndicator.
    */
@@ -126,12 +130,12 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
   icon?: CanvasSystemIcon;
 }
 
-const Container = styled('span')<PickRequired<StatusIndicatorProps, 'emphasis', 'type'>>(
-  statusIndicatorStyles.styles,
-  ({type, emphasis}) => ({
-    ...statusIndicatorStyles.variants[type][emphasis],
-  })
-);
+const Container = styled('span')<
+  PickRequired<StatusIndicatorProps, 'emphasis' | 'maxWidth', 'type'>
+>(statusIndicatorStyles.styles, ({type, emphasis, maxWidth}) => ({
+  ...statusIndicatorStyles.variants[type][emphasis],
+  maxWidth: maxWidth,
+}));
 
 const StatusLabel = styled('span')({
   fontWeight: 'bold',
@@ -147,11 +151,18 @@ export default class StatusIndicator extends React.Component<StatusIndicatorProp
   public static Emphasis = StatusIndicatorEmphasis;
 
   public render() {
-    const {emphasis = StatusIndicatorEmphasis.High, type, icon, label, ...elemProps} = this.props;
+    const {
+      emphasis = StatusIndicatorEmphasis.High,
+      maxWidth = 200,
+      type,
+      icon,
+      label,
+      ...elemProps
+    } = this.props;
     const variant = statusIndicatorStyles.variants[type][emphasis]!;
 
     return (
-      <Container type={type} emphasis={emphasis} {...elemProps}>
+      <Container type={type} emphasis={emphasis} maxWidth={maxWidth} {...elemProps}>
         {icon && (
           <SystemIcon
             colorHover={variant.color}

package/toast/lib/Toast.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
 import * as React from 'react';
 
 import {Popup} from '@workday/canvas-kit-react/popup';
@@ -7,8 +5,8 @@ import {space, colors, type, CanvasColor} from '@workday/canvas-kit-react/tokens
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {checkIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, ExtractProps, styled} from '@workday/canvas-kit-react/common';
-import {Hyperlink, HyperlinkProps} from '@workday/canvas-kit-react/button';
+import {createComponent, ExtractProps, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {Hyperlink} from '@workday/canvas-kit-react/button';
 
 export interface ToastProps extends ExtractProps<typeof Popup.Card, never> {
   /**
@@ -58,21 +56,13 @@ const ToastSystemIcon = styled(SystemIcon)({
 
 const {color, ...subTextLargeStyles} = type.levels.subtext.large;
 
-const actionButtonStyles = {
+const StyledActionButton = styled(Hyperlink)<StyledType>({
   ...subTextLargeStyles,
   display: 'block',
   backgroundColor: 'transparent', // To prevent Safari from rendering grey 'buttonface' as bgcolor
   border: 'none',
   marginTop: space.xxxs,
-};
-
-interface ActionButtonProps extends HyperlinkProps {
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-const ActionButton = (props: ActionButtonProps) => {
-  return <Hyperlink as="button" css={actionButtonStyles} {...props} />;
-};
+});
 
 const Message = styled('div')({
   wordBreak: 'break-word',
@@ -113,7 +103,11 @@ export const Toast = createComponent('div')({
             {icon && <ToastSystemIcon color={iconColor} colorHover={iconColor} icon={icon} />}
             <Message>
               {children}
-              {onActionClick && <ActionButton onClick={onActionClick}>{actionText}</ActionButton>}
+              {onActionClick && (
+                <StyledActionButton as="button" onClick={onActionClick}>
+                  {actionText}
+                </StyledActionButton>
+              )}
             </Message>
           </ToastContentContainer>
         </Popup.Body>

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

@@ -1,5 +1,2 @@
-import ActionBar from './lib/ActionBar';
-export default ActionBar;
-export { ActionBar };
 export * from './lib/ActionBar';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,12 +1,7 @@
-import * as React from 'react';
-export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * If true, fix the ActionBar to the bottom of the screen.
-     * @default false
-     */
-    fixed?: boolean;
-}
-export default class ActionBar extends React.Component<ActionBarProps> {
-    render(): JSX.Element;
+import { HStackProps, StackSpacing } from '@workday/canvas-kit-labs-react';
+interface ActionBarProps extends Omit<HStackProps, 'spacing'> {
+    spacing?: StackSpacing;
 }
+export declare const ActionBar: import("../../common").ElementComponent<"div", ActionBarProps>;
+export {};
 //# sourceMappingURL=ActionBar.d.ts.map

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

@@ -1,5 +1,3 @@
-import Banner from './lib/Banner';
-export default Banner;
-export { Banner };
 export * from './lib/Banner';
+export * from './lib/hooks/';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,38 +1,22 @@
 import * as React from 'react';
-import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
-export declare enum BannerVariant {
-    Full = 0,
-    Sticky = 1
-}
-export interface BannerProps extends Themeable, React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * The function called when the Banner is clicked.
-     */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * The label of the Banner.
-     */
-    label?: React.ReactNode;
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { BannerModel, BannerModelConfig } from './hooks';
+export declare const BannerModelContext: React.Context<import("../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>>;
+export interface BannerProps extends BannerModelConfig, ExtractProps<typeof Flex, never> {
+    model?: BannerModel;
     /**
-     * The variant of the Banner. Accepts `Full` or `Sticky`.
-     * @default BannerVariant.Full
+     * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
      */
-    variant?: BannerVariant;
-    /**
-     * The type of error associated with the Banner (if applicable).
-     * @default ErrorType.Alert
-     */
-    error?: ErrorType;
-    /**
-     * The text of the Banner action. This prop is also used as the aria-label for the action in the banner
-     * @default 'View All'
-     */
-    actionText?: string;
-}
-declare class Banner extends React.Component<BannerProps> {
-    static Variant: typeof BannerVariant;
-    static ErrorType: typeof ErrorType;
-    render(): JSX.Element;
+    children?: React.ReactNode;
 }
-export default Banner;
+export declare const Banner: import("../../common").ElementComponent<"button", BannerProps> & {
+    Icon: import("../../common").ElementComponent<"span", import("./BannerIcon").BannerIconProps>;
+    Label: import("../../common").ElementComponent<"div", import("./BannerLabel").BannerLabelProps>;
+    ActionText: import("../../common").ElementComponent<"span", import("./BannerActionText").BannerActionTextProps>;
+};
 //# sourceMappingURL=Banner.d.ts.map

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { BannerModel } from './hooks';
+export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
+    model?: BannerModel;
+    /**
+     * The text of the Banner action.
+     * @default 'View All'
+     */
+    children?: React.ReactNode;
+}
+export declare const BannerActionText: import("../../common").ElementComponent<"span", BannerActionTextProps>;
+//# sourceMappingURL=BannerActionText.d.ts.map

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

@@ -0,0 +1,14 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { BannerModel } from './hooks';
+export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+    model?: BannerModel;
+    /**
+     * Icon to show next to label
+     * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
+     */
+    icon?: CanvasSystemIcon;
+}
+export declare const BannerIcon: import("../../common").ElementComponent<"span", BannerIconProps>;
+//# sourceMappingURL=BannerIcon.d.ts.map

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { BannerModel } from './hooks';
+export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
+    model?: BannerModel;
+    /**
+     * The text of the Banner.
+     */
+    children: React.ReactNode;
+}
+export declare const BannerLabel: import("../../common").ElementComponent<"div", BannerLabelProps>;
+//# sourceMappingURL=BannerLabel.d.ts.map

package/ts3.5/dist/commonjs/banner/lib/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useBannerModel';
+export * from './useThemedPalette';
+export * from './useBannerIcon';
+export * from './useBannerLabel';
+export * from './useBannerActionText';
+export * from './useBanner';
+//# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/banner/lib/hooks/useBanner.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Banner` component.
+ * Used by the Banner component
+ */
+export declare const useBanner: <P extends {}, R>(model: import("../../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    'aria-describedby': string;
+    'aria-labelledby': string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=useBanner.d.ts.map

package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `ActionText` component.
+ * Used by the Banner.ActionText subcomponent
+ */
+export declare const useBannerActionText: <P extends {}, R>(model: import("../../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    id: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=useBannerActionText.d.ts.map

package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Icon` component.
+ * Used by the Banner.Icon subcomponent
+ */
+export declare const useBannerIcon: <P extends {}, R>(model: import("../../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    icon: import("@workday/design-assets-types").CanvasSystemIcon;
+    color: string | undefined;
+    colorHover: string | undefined;
+    size: number;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=useBannerIcon.d.ts.map

package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the Banner.Label subcomponent
+ */
+export declare const useBannerLabel: <P extends {}, R>(model: import("../../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    id: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=useBannerLabel.d.ts.map

package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts

@@ -0,0 +1,37 @@
+import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
+declare type BannerState = {
+    /**
+     * Optional flag to denote the banner has an error to display. When true the default `Banner.Icon`
+     * will be `exclamationCircleIcon`, and a themed error color will be applied.
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Optional flag to denote the banner is stuck to the side of the screen. When true the default `Banner.ActionText`
+     * will be hidden, and some basic styles will be applied.
+     * You will still need to manually set the css `position` value.
+     * @default false
+     */
+    isSticky?: boolean;
+    /**
+     * Optional `id` provided to `Banner`'s subcomponents as HTML attributes:
+     * - `Banner` will set `aria-describedby` to `label-${id}`
+     * - `Banner` will set `aria-label` to `action-${id}`
+     * - `Banner.Label` will set `id` to `label-${id}`
+     * - `Banner.ActionText` will set `id` to `action-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default `useUniqueId()`
+     */
+    id?: string;
+};
+declare type BannerEvents = {};
+export declare type BannerModel = Model<BannerState, BannerEvents>;
+declare const BannerEventMap: {
+    guards: {};
+    callbacks: {};
+};
+export declare type BannerModelConfig = BannerState & Partial<ToModelConfig<BannerState, BannerEvents, typeof BannerEventMap>>;
+export declare const useBannerModel: (config?: BannerModelConfig) => Model<BannerState, BannerEvents>;
+export {};
+//# sourceMappingURL=useBannerModel.d.ts.map

package/ts3.5/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts

@@ -0,0 +1,11 @@
+import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
+declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+interface BackgroundColors {
+    normal?: string;
+    hover?: string;
+    contrast?: string;
+}
+export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): BackgroundColors;
+export declare const useThemedPalette: (type: "alert" | "error" | "primary" | "success" | "neutral") => BackgroundColors;
+export {};
+//# sourceMappingURL=useThemedPalette.d.ts.map

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

@@ -3,9 +3,12 @@ import { Themeable } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 export interface IconButtonProps extends Themeable {
     /**
-     * The accessibility label to indicate the action triggered by clicking the IconButton.
+     * The accessibility label to indicate the action triggered by clicking the IconButton. This is optional because there are
+     * instances where an Icon Button might already have an `aria-labelledby`. In a case where an `aria-labelledby` is provided
+     * it will take precedence over the `aria-label` as explained here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
+     * We highly encourage consumers to either provide an `aria-label` OR an `aria-labelledby`
      */
-    'aria-label': string;
+    'aria-label'?: string;
     /**
      * The type of the IconButton.
      * @default 'circle'