@workday/canvas-kit-react 10.0.0-alpha.538-next.0 → 10.0.0-alpha.539-next.0

package/button/lib/TertiaryButton.tsx

@@ -1,256 +1,191 @@
 import * as React from 'react';
-import {
-  focusRing,
-  useTheme,
-  Themeable,
-  EmotionCanvasTheme,
-  createComponent,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors, IconPositions, ButtonSizes} from './types';
-import {BaseButton, BaseButtonProps} from './BaseButton';
 
-export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
-  /**
-   * The variant of the TertiaryButton.
-   */
-  variant?: 'inverse' | undefined;
-  /**
-   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
-   * If no size is provided, it will default to `medium`.
-   */
-  size?: ButtonSizes;
-  /**
-   * Button icon positions can either be `start` or `end`.
-   * If no value is provided, it defaults to `start`.
-   */
-  iconPosition?: IconPositions;
-  /**
-   * The icon of the TertiaryButton.
-   */
-  icon?: CanvasSystemIcon;
-  /**
-   * The capitalization of the text in the button.
-   */
-  /**
-   * If set to `true`, transform the icon's x-axis to mirror the graphic
-   */
-  shouldMirrorIcon?: boolean;
-  /**
-   * If set to `true`, transform text to all letters uppercase
-   */
-  allCaps?: boolean;
-  children?: React.ReactNode;
+import {buttonVars, getIconPosition} from './BaseButton';
+import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
+import {createStyles, cssVar, createModifiers} from '@workday/canvas-kit-styling';
+import {system, brand, base} from '@workday/canvas-tokens-web';
+import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
+import {Button, ButtonProps} from './Button';
+
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
+ * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
+ * Use this type to extend and customize any one off buttons that you want full control over styling.
+ */
+export interface TertiaryButtonProps extends ButtonProps {
   /**
-   * If set to `true`, make icon button available to use theme colors instead of default
+   * Variant has an option for `inverse` which will inverse the styling
    */
+  variant?: 'inverse';
   isThemeable?: boolean;
 }
 
-const getTertiaryButtonColors = (
-  variant: 'inverse' | undefined,
-  theme: EmotionCanvasTheme,
-  hasThemeStyles: boolean
-): ButtonColors => {
-  const {
-    canvas: {
-      palette: {primary: themePrimary},
-    },
-  } = theme;
-
-  if (variant === 'inverse') {
-    return {
-      default: {
-        background: 'transparent',
-        icon: colors.frenchVanilla100,
-        label: colors.frenchVanilla100,
-      },
-      hover: {
-        background: colors.frenchVanilla100,
-        icon: colors.blackPepper400,
-        label: colors.blackPepper400,
-      },
-      active: {
-        background: colors.soap200,
-        icon: colors.blackPepper400,
-        label: colors.blackPepper400,
-      },
-      focus: {
-        background: colors.frenchVanilla100,
-        icon: colors.blackPepper400,
-        label: colors.blackPepper400,
-        focusRing: focusRing(
-          {
-            separation: 2,
-            inset: 'inner',
-            innerColor: 'currentColor',
-            outerColor: colors.frenchVanilla100,
-          },
-          theme
-        ),
-      },
-      disabled: {
-        background: 'transparent',
-        icon: colors.frenchVanilla100,
-        label: colors.frenchVanilla100,
-      },
-    };
-  } else {
-    return {
-      default: {
-        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
-        label: themePrimary.main,
-      },
-      hover: {
-        background: colors.soap200,
-        icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
-        label: themePrimary.dark,
-      },
-      active: {
-        background: colors.soap300,
-        icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
-        label: themePrimary.dark,
-      },
-      focus: {
-        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper500,
-        label: themePrimary.main,
-        focusRing: focusRing({innerColor: colors.blueberry400}, theme),
-      },
-      disabled: {
-        background: 'transparent',
-        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
-        label: themePrimary.main,
-      },
-    };
-  }
-};
-
-const StyledButtonLabel = styled(BaseButton.Label)({
+const tertiaryStyles = createStyles({
+  paddingInline: cssVar(system.space.x2, space.xxs),
+  minWidth: 'auto',
   textDecoration: 'underline',
-});
+  border: 0,
+  // Default Styles
+  [buttonVars.default.background]: 'transparent',
+  [buttonVars.default.border]: 'transparent',
+  [buttonVars.default.borderRadius]: cssVar(system.shape.medium),
+  [buttonVars.default.label]: cssVar(brand.primary.base),
+  [buttonVars.default.icon]: cssVar(base.blackPepper400),
+  // Hover Styles
+  [buttonVars.hover.background]: cssVar(base.soap200),
+  [buttonVars.hover.border]: 'transparent',
+  [buttonVars.hover.label]: cssVar(brand.primary.dark),
+  [buttonVars.hover.icon]: cssVar(base.blackPepper500),
+  // Focus Styles
+  [buttonVars.focus.background]: 'transparent',
+  [buttonVars.focus.border]: 'transparent',
+  [buttonVars.focus.label]: cssVar(brand.primary.base),
+  [buttonVars.focus.icon]: cssVar(base.blackPepper500),
+  [buttonVars.focus.boxShadowInner]: cssVar(brand.common.focusOutline),
+  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
+  // Active Styles
+  [buttonVars.active.background]: cssVar(base.soap300),
+  [buttonVars.active.border]: 'transparent',
+  [buttonVars.active.label]: cssVar(brand.primary.dark),
+  [buttonVars.active.icon]: cssVar(base.blackPepper500),
+  // Disabled Styles
+  [buttonVars.disabled.background]: 'transparent',
+  [buttonVars.disabled.border]: cssVar(base.frenchVanilla100),
+  [buttonVars.disabled.label]: cssVar(brand.primary.base),
+  [buttonVars.disabled.icon]: cssVar(base.blackPepper400),
+  [buttonVars.disabled.opacity]: '0.4',
 
-const StyledTertiaryButtonContainer = styled(BaseButton)<
-  StyledType & Pick<TertiaryButtonProps, 'allCaps'>
->(
-  {
-    border: '0',
+  '&:focus-visible, &.focus': {
+    ...focusRing({
+      width: 2,
+      separation: 0,
+      innerColor: cssVar(base.frenchVanilla100, cssVar(buttonVars.focus.boxShadowInner)),
+      outerColor: cssVar(brand.common.focusOutline, cssVar(buttonVars.focus.boxShadowOuter)),
+    }),
   },
-  ({allCaps}) => ({
-    textTransform: allCaps ? 'uppercase' : undefined,
-  })
-);
+});
 
-const getPaddingStyles = (
-  icon: CanvasSystemIcon | undefined,
-  iconPosition: 'start' | 'end',
-  children: React.ReactNode,
-  size: ButtonSizes
-): string => {
-  if (children) {
-    // if there is an icon on the left, add 4px extra padding to the right for visual balance
-    if (icon && iconPosition === 'start') {
-      if (size === 'extraSmall') {
-        return `0 ${space.xxs} 0 ${space.xxxs}`;
-      }
-      return `0 ${space.xs} 0 ${space.xxs}`;
-    }
-    // if there is an icon on the right, add 4px extra padding to the left for visual balance
-    if (icon && iconPosition === 'end') {
-      if (size === 'extraSmall') {
-        return `0 ${space.xxxs} 0 ${space.xxs}`;
-      }
-      return `0 ${space.xxs} 0 ${space.xs}`;
-    }
-    // if there is no icon, return the default padding
-    return `0 ${space.xxs}`;
-  } else {
-    return '0';
-  }
-};
+export const tertiaryButtonModifiers = createModifiers({
+  isThemeable: {
+    true: createStyles({
+      [buttonVars.default.icon]: cssVar(brand.primary.base),
+      [buttonVars.hover.icon]: cssVar(brand.primary.dark),
+      [buttonVars.focus.icon]: cssVar(brand.primary.base),
+      [buttonVars.active.icon]: cssVar(brand.primary.dark),
+      [buttonVars.disabled.icon]: cssVar(brand.primary.base),
+    }),
+  },
+  variant: {
+    inverse: createStyles({
+      // Default Styles
+      [buttonVars.default.background]: 'transparent',
+      [buttonVars.default.border]: 'transparent',
+      [buttonVars.default.label]: cssVar(base.frenchVanilla100),
+      [buttonVars.default.icon]: cssVar(base.frenchVanilla100),
+      // Hover Styles
+      [buttonVars.hover.background]: cssVar(base.frenchVanilla100),
+      [buttonVars.hover.border]: 'transparent',
+      [buttonVars.hover.label]: cssVar(base.blackPepper400),
+      [buttonVars.hover.icon]: cssVar(base.blackPepper400),
+      // Focus Styles
+      [buttonVars.focus.background]: cssVar(base.frenchVanilla100),
+      [buttonVars.focus.border]: 'transparent',
+      [buttonVars.focus.label]: cssVar(base.blackPepper400),
+      [buttonVars.focus.icon]: cssVar(base.blackPepper400),
+      // Active Styles
+      [buttonVars.active.background]: cssVar(base.soap200),
+      [buttonVars.active.border]: 'transparent',
+      [buttonVars.active.label]: cssVar(base.blackPepper400),
+      [buttonVars.active.icon]: cssVar(base.blackPepper400),
+      // Disabled Styles
+      [buttonVars.disabled.background]: 'transparent',
+      [buttonVars.disabled.border]: cssVar(base.frenchVanilla100),
+      [buttonVars.disabled.label]: cssVar(base.frenchVanilla100),
+      [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100),
 
-const getMinWidthStyles = (children: React.ReactNode, size: ButtonSizes): string => {
-  let minWidthNum;
-  switch (size) {
-    case 'large':
-      minWidthNum = '48px';
-      break;
-    case 'medium':
-      minWidthNum = space.xl;
-      break;
-    case 'small':
-      minWidthNum = space.l;
-      break;
-    case 'extraSmall':
-      minWidthNum = space.m;
-      break;
-    default:
-      minWidthNum = space.xl;
-      break;
-  }
-  return children ? 'auto' : minWidthNum;
-};
+      '&:focus-visible, &.focus': {
+        ...focusRing({
+          inset: 'inner',
+          width: 2,
+          separation: 2,
+          innerColor: cssVar(base.blackPepper400, cssVar(buttonVars.focus.boxShadowInner)),
+          outerColor: cssVar(base.frenchVanilla100, cssVar(buttonVars.focus.boxShadowOuter)),
+        }),
+      },
+    }),
+  },
+  iconPosition: {
+    largeOnly: createStyles({
+      borderRadius: borderRadius.circle,
+      padding: '0',
+      minWidth: cssVar(system.space.x12),
+    }),
+    largeStart: createStyles({
+      paddingInlineStart: space.xxs,
+      paddingInlineEnd: space.xs,
+    }),
+    largeEnd: createStyles({paddingInlineStart: space.xs, paddingInlineEnd: space.xxs}),
+    mediumOnly: createStyles({padding: '0', minWidth: space.xl, borderRadius: borderRadius.circle}),
+    mediumStart: createStyles({paddingInlineStart: space.xxs, paddingInlineEnd: space.xs}),
+    mediumEnd: createStyles({paddingInlineStart: space.xs, paddingInlineEnd: space.xxs}),
+    smallOnly: createStyles({padding: '0', minWidth: space.l, borderRadius: borderRadius.circle}),
+    smallStart: createStyles({paddingInlineStart: space.xxs, paddingInlineEnd: space.xs}),
+    smallEnd: createStyles({paddingInlineStart: space.xs, paddingInlineEnd: space.xxs}),
+    extraSmallOnly: createStyles({
+      padding: '0',
+      minWidth: space.m,
+      borderRadius: borderRadius.circle,
+    }),
+    extraSmallStart: createStyles({paddingInlineStart: space.xxxs, paddingInlineEnd: space.xxs}),
+    extraSmallEnd: createStyles({paddingInlineStart: space.xxs, paddingInlineEnd: space.xxxs}),
+  },
+});
 
-/**
- * Tertiary Buttons have the lowest emphasis. Use for less important actions that the user may not
- * often be looking to do. Tertiary Buttons have lower prominence as its container is not visible
- * until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View More”,
- * “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
- *
- * Tertiary Buttons have four sizes: `extraSmall`, `small`, `medium` and `large`. Icons are
- * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
- * prop.
- */
 export const TertiaryButton = createComponent('button')({
   displayName: 'TertiaryButton',
   Component: (
     {
-      size = 'medium',
-      iconPosition = 'start',
-      isThemeable = false,
-      variant,
       children,
       icon,
-      shouldMirrorIcon = false,
+      colors,
+      size = 'medium',
+      isThemeable,
+      variant,
+      iconPosition,
+      cs,
       ...elemProps
     }: TertiaryButtonProps,
     ref,
     Element
   ) => {
-    const theme = useTheme();
-    const hasThemeStyles = !!children || isThemeable;
+    const baseIconPosition = iconPosition
+      ? iconPosition
+      : icon
+      ? children
+        ? 'start'
+        : 'only'
+      : undefined;
 
     return (
-      <StyledTertiaryButtonContainer
-        ref={ref}
+      <Button
         as={Element}
-        colors={getTertiaryButtonColors(variant, theme, hasThemeStyles)}
+        ref={ref}
+        icon={icon}
+        iconPosition={iconPosition}
         size={size}
-        padding={getPaddingStyles(icon, iconPosition, children, size)}
-        minWidth={getMinWidthStyles(children, size)}
-        borderRadius={children ? borderRadius.m : borderRadius.circle}
+        cs={[
+          tertiaryStyles,
+          tertiaryButtonModifiers({
+            isThemeable: (isThemeable || baseIconPosition !== 'only') as any,
+            variant: variant,
+            iconPosition: getIconPosition(size, baseIconPosition),
+          }),
+          cs,
+        ]}
         {...elemProps}
       >
-        {icon && iconPosition === 'start' && (
-          <BaseButton.Icon
-            size={size}
-            iconPosition={iconPosition}
-            icon={icon}
-            shouldMirrorIcon={shouldMirrorIcon}
-          />
-        )}
-        {children && <StyledButtonLabel>{children}</StyledButtonLabel>}
-        {icon && iconPosition === 'end' && (
-          <BaseButton.Icon
-            size={size}
-            iconPosition={iconPosition}
-            icon={icon}
-            shouldMirrorIcon={shouldMirrorIcon}
-          />
-        )}
-      </StyledTertiaryButtonContainer>
+        {children}
+      </Button>
     );
   },
 });

package/button/lib/ToolbarDropdownButton.tsx

@@ -9,10 +9,12 @@ import {
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
+import {cssVar} from '@workday/canvas-kit-styling';
 import {ButtonColors} from './types';
 import {BaseButton} from './BaseButton';
 import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {ToolbarIconButtonProps} from './ToolbarIconButton';
+import {brand} from '@workday/canvas-tokens-web';
 
 export interface ToolbarDropdownButtonProps
   extends Omit<ToolbarIconButtonProps, 'toggled' | 'onToggleChange'>,
@@ -24,9 +26,9 @@ const StyledToolbarDropdownButton = styled(BaseButton)<StyledType & ToolbarDropd
   width: 'auto',
   height: space.l,
   borderRadius: borderRadius.m,
+  gap: space.zero,
   '& .wd-icon': {
     display: 'inline-block',
-    verticalAlign: 'middle',
     width: 20,
     height: 20,
   },
@@ -38,6 +40,14 @@ const StyledToolbarDropdownButton = styled(BaseButton)<StyledType & ToolbarDropd
     marginRight: 0,
     width: 18, // decrease the space between a custom icon and the chevron per design
   },
+  '&:focus-visible, &.focus': {
+    ...focusRing({
+      width: 2,
+      separation: 0,
+      innerColor: 'transparent',
+      outerColor: cssVar(brand.common.focusOutline),
+    }),
+  },
 });
 
 export const ToolbarDropdownButton = createComponent('button')({
@@ -96,7 +106,6 @@ const getToolbarDropdownButtonColors = (theme: EmotionCanvasTheme): ButtonColors
     },
     focus: {
       icon: colors.licorice200,
-      focusRing: focusRing({width: 2, separation: 0}, theme),
       background: 'transparent',
     },
     disabled: {

package/button/lib/ToolbarIconButton.tsx

@@ -9,9 +9,11 @@ import {
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
+import {cssVar} from '@workday/canvas-kit-styling';
 import {ButtonColors} from './types';
 import {BaseButton} from './BaseButton';
 import {TertiaryButtonProps} from './TertiaryButton';
+import {brand} from '@workday/canvas-tokens-web';
 
 export interface ToolbarIconButtonProps
   extends Omit<TertiaryButtonProps, 'size' | 'variant'>,
@@ -24,10 +26,17 @@ export interface ToolbarIconButtonProps
 const StyledToolbarIconButton = styled(BaseButton)<StyledType & ToolbarIconButtonProps>({
   ['& .wd-icon']: {
     display: 'inline-block',
-    verticalAlign: 'middle',
     width: 20,
     height: 20,
   },
+  '&:focus-visible, &.focus': {
+    ...focusRing({
+      width: 2,
+      separation: 0,
+      innerColor: 'transparent',
+      outerColor: cssVar(brand.common.focusOutline),
+    }),
+  },
 });
 
 export const ToolbarIconButton = createComponent('button')({
@@ -102,7 +111,6 @@ const getToolbarIconButtonColors = (theme: EmotionCanvasTheme, toggled?: boolean
     },
     focus: {
       icon: toggled ? themePrimary.main : colors.licorice200,
-      focusRing: focusRing({width: 2, separation: 0}, theme),
       background: toggled ? themePrimary.lightest : 'transparent',
     },
     disabled: {

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {ButtonSizes, IconPositions} from '../types';
+import {ButtonSizes} from '../types';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 
@@ -10,12 +10,6 @@ export interface ButtonLabelIconProps extends Partial<SystemIconProps> {
    * @default 'medium'
    */
   size?: ButtonSizes;
-  /**
-   * Button icon positions can either be `left` or `right`.
-   * If no value is provided, it defaults to `left`.
-   * @default 'start'
-   */
-  iconPosition?: IconPositions;
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
    * @default false

package/button/lib/types.ts

@@ -12,13 +12,13 @@ export interface ButtonStateColors {
   opacity?: string;
 }
 export interface ButtonColors {
-  default: ButtonStateColors;
-  hover: ButtonStateColors;
-  active: ButtonStateColors;
-  focus: ButtonStateColors & {
+  default?: ButtonStateColors;
+  hover?: ButtonStateColors;
+  active?: ButtonStateColors;
+  focus?: ButtonStateColors & {
     focusRing?: CSSObject;
   };
-  disabled: ButtonStateColors;
+  disabled?: ButtonStateColors;
 }
 
 /**
@@ -28,6 +28,4 @@ export interface ButtonColors {
  * @default 'medium'
  */
 export type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
-// TODO: Remove TertiaryButtonSizes in favor of button sizes when we add Tertiary large
-export type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
-export type IconPositions = 'start' | 'end';
+export type IconPositions = 'start' | 'end' | 'only';

package/common/lib/CanvasProvider.tsx

@@ -1,34 +1,60 @@
 import * as React from 'react';
 import {Theme, ThemeProvider} from '@emotion/react';
 import {InputProvider} from './InputProvider';
-import {defaultCanvasTheme, PartialEmotionCanvasTheme} from './theming';
+import {defaultCanvasTheme, PartialEmotionCanvasTheme, useTheme} from './theming';
+import {brand} from '@workday/canvas-tokens-web';
 
 export interface CanvasProviderProps {
   theme: PartialEmotionCanvasTheme;
 }
 
-export class CanvasProvider extends React.Component<
-  CanvasProviderProps & React.HTMLAttributes<HTMLElement>
-> {
-  static defaultProps = {
-    theme: {
-      canvas: defaultCanvasTheme,
-    },
-  };
+const mappedKeys = {
+  lightest: 'lightest',
+  light: 'light',
+  main: 'base',
+  dark: 'dark',
+  darkest: 'darkest',
+  contrast: 'accent',
+};
 
-  render() {
-    const {children, theme, ...elemProps} = this.props;
+const useCanvasThemeToCssVars = (
+  theme: PartialEmotionCanvasTheme,
+  elemProps: React.HTMLAttributes<HTMLElement>
+) => {
+  const filledTheme = useTheme(theme);
+  const {palette} = filledTheme.canvas;
+  const style = (['common', 'primary', 'error', 'alert', 'success', 'neutral'] as const).reduce(
+    (result, color) => {
+      if (color === 'common') {
+        // @ts-ignore
+        result[brand.common.focusOutline] = palette.common.focusOutline;
+      }
+      (['lightest', 'light', 'main', 'dark', 'darkest', 'contrast'] as const).forEach(key => {
+        // @ts-ignore
+        result[brand[color][mappedKeys[key]]] = palette[color][key];
+      });
+      return result;
+    },
+    elemProps.style || {}
+  );
+  return {...elemProps, style};
+};
 
-    return (
-      <ThemeProvider theme={theme as Theme}>
-        <InputProvider />
-        <div
-          dir={(theme.canvas && theme.canvas.direction) || defaultCanvasTheme.direction}
-          {...(elemProps as React.HTMLAttributes<HTMLDivElement>)}
-        >
-          {children}
-        </div>
-      </ThemeProvider>
-    );
-  }
-}
+export const CanvasProvider = ({
+  children,
+  theme,
+  ...props
+}: CanvasProviderProps & React.HTMLAttributes<HTMLElement>) => {
+  const elemProps = useCanvasThemeToCssVars(theme, props);
+  return (
+    <ThemeProvider theme={theme as Theme}>
+      <InputProvider />
+      <div
+        dir={(theme.canvas && theme.canvas.direction) || defaultCanvasTheme.direction}
+        {...(elemProps as React.HTMLAttributes<HTMLDivElement>)}
+      >
+        {children}
+      </div>
+    </ThemeProvider>
+  );
+};

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

@@ -1,12 +1,15 @@
-export { PrimaryButton, PrimaryButtonProps } from './lib/PrimaryButton';
-export { SecondaryButton, SecondaryButtonProps } from './lib/SecondaryButton';
-export { TertiaryButton, TertiaryButtonProps } from './lib/TertiaryButton';
-export { DeleteButton, DeleteButtonProps } from './lib/DeleteButton';
 export { DeprecatedButton as deprecated_Button, DeprecatedButtonProps, } from './lib/deprecated_Button';
 export { ToolbarIconButton, ToolbarIconButtonProps } from './lib/ToolbarIconButton';
 export { ToolbarDropdownButton, ToolbarDropdownButtonProps } from './lib/ToolbarDropdownButton';
 export { Hyperlink, HyperlinkProps } from './lib/Hyperlink';
-export { BaseButton, ButtonContainerProps, BaseButtonProps, getMinWidthStyles, getPaddingStyles, } from './lib/BaseButton';
 export { ExternalHyperlink, ExternalHyperlinkProps } from './lib/ExternalHyperlink';
 export * from './lib/types';
+export * from './lib/PrimaryButton';
+export * from './lib/SecondaryButton';
+export * from './lib/TertiaryButton';
+export * from './lib/DeleteButton';
+export * from './lib/BaseButton';
+export * from './lib/ToolbarDropdownButton';
+export * from './lib/ToolbarIconButton';
+export * from './lib/types';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAC,eAAe,EAAE,oBAAoB,EAAC,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACnE,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EACL,UAAU,EACV,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC"}