@spaced-out/ui-design-system 0.4.15-beta.0 → 0.4.15

package/lib/components/BadgedIcon/BadgedIcon.js.flow

@@ -0,0 +1,73 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+
+import typographyStyle from '../../styles/typography.module.css';
+import css from './BadgedIcon.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  icon?: string,
+  badgeIcon?: string,
+}>;
+
+export type BadgedIconProps = {
+  type?: IconType,
+  name: string,
+  size?: IconSize,
+  ariaLabel?: string,
+  showBadge?: boolean,
+  classNames?: ClassNames,
+};
+
+export const BadgedIcon = ({
+  name,
+  showBadge = true,
+  classNames,
+  size = 'medium',
+  type = 'solid',
+  ariaLabel,
+}: BadgedIconProps): React.Node => (
+  <>
+    {!!name && (
+      <div
+        className={classify(css.iconContainer, css[size], classNames?.wrapper)}
+      >
+        <Icon
+          ariaLabel={ariaLabel}
+          name={name}
+          className={classNames?.icon}
+          name={name}
+          size={size === 'large' ? 'medium' : size}
+          type={type}
+          color={TEXT_COLORS.clickable}
+        />
+        {showBadge && <BadgeIcon className={classNames?.badgeIcon} />}
+      </div>
+    )}
+  </>
+);
+
+const BadgeIcon = ({className}: {className: ?string}): React.Node => (
+  <svg
+    className={classify(
+      css.badgeIcon,
+      typographyStyle[TEXT_COLORS['clickable']],
+      className,
+    )}
+    viewBox="0 0 12 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/lib/components/BadgedIcon/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './BadgedIcon';

package/lib/components/Banner/Banner.js.flow

@@ -0,0 +1,60 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {ALERT_SEMANTIC} from '../../types/common';
+import classify from '../../utils/classify';
+import type {InContextAlertProps} from '../InContextAlert';
+import {InContextAlert} from '../InContextAlert';
+
+import css from './Banner.module.css';
+
+
+export type BannerProps = {
+  ...InContextAlertProps,
+  alignment?: 'top' | 'bottom',
+};
+
+export const Banner: React$AbstractComponent<BannerProps, HTMLDivElement> =
+  React.forwardRef<BannerProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        semantic,
+        leftIconType = 'solid',
+        alignment = 'top',
+        ...props
+      }: BannerProps,
+      ref,
+    ): React.Node => (
+      <>
+        <InContextAlert
+          {...props}
+          leftIconType={leftIconType}
+          semantic={semantic}
+          ref={ref}
+          classNames={{
+            ...classNames,
+            wrapper: classify(
+              css.bannerContainer,
+              {
+                [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
+                [css.success]: semantic === ALERT_SEMANTIC.success,
+                [css.information]: semantic === ALERT_SEMANTIC.information,
+                [css.warning]: semantic === ALERT_SEMANTIC.warning,
+                [css.danger]: semantic === ALERT_SEMANTIC.danger,
+                [css.topAligned]: alignment === 'top',
+                [css.bottomAligned]: alignment === 'bottom',
+              },
+              classNames?.wrapper,
+            ),
+            alertText: classify(classNames?.alertText),
+            actionContainer: classify(
+              css.alertContainer,
+              classNames?.actionContainer,
+            ),
+          }}
+        />
+      </>
+    ),
+  );

package/lib/components/Banner/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Banner';

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.js

@@ -30,9 +30,7 @@ const BreadcrumbLink = exports.BreadcrumbLink = /*#__PURE__*/React.forwardRef((_
     as: as || 'subTitleExtraSmall',
     underline: underline,
     disabled: isActive,
-    className: (0, _classify.default)(_BreadcrumbLinkModule.default.breadcrumbLink,
-    // @ts-ignore - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
-    {
+    className: (0, _classify.default)(_BreadcrumbLinkModule.default.breadcrumbLink, {
       [_BreadcrumbLinkModule.default.active]: isActive ?? window.location.href.includes(to ?? href)
     }, className),
     onClick: e => {

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.js.flow

@@ -0,0 +1,58 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../../utils/classify';
+import type {LinkProps} from '../../Link';
+import {Link} from '../../Link';
+
+import css from './BreadcrumbLink.module.css';
+
+
+export type BreadcrumbLinkProps = {
+  ...LinkProps,
+  isActive?: boolean,
+  id: string,
+  onClick?: (SyntheticEvent<HTMLElement>, id: string) => mixed,
+  ...
+};
+
+export const BreadcrumbLink: React$AbstractComponent<
+  BreadcrumbLinkProps,
+  ?HTMLAnchorElement,
+> = React.forwardRef<BreadcrumbLinkProps, ?HTMLAnchorElement>(
+  (
+    {
+      id,
+      className,
+      as,
+      underline = false,
+      isActive,
+      onClick,
+      href,
+      to,
+      ...props
+    }: BreadcrumbLinkProps,
+    ref,
+  ) => (
+    <Link
+      {...props}
+      to={to ?? href}
+      data-testid="BreadcrumbLink"
+      ref={ref}
+      as={as || 'subTitleExtraSmall'}
+      underline={underline}
+      disabled={isActive}
+      className={classify(
+        css.breadcrumbLink,
+        {[css.active]: isActive ?? window.location.href.includes(to ?? href)},
+        className,
+      )}
+      onClick={(e) => {
+        onClick?.(e, id);
+      }}
+    />
+  ),
+);
+
+BreadcrumbLink.displayName = 'BreadcrumbLink';

package/lib/components/Breadcrumbs/BreadcrumbLink/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './BreadcrumbLink';

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -32,11 +32,7 @@ const Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, r
   // eslint-disable-next-line react/no-array-index-key
   React.createElement(React.Fragment, {
     key: `crumb-${idx}`
-  }, /*#__PURE__*/React.isValidElement(child) &&
-  // @ts-ignore - TS2339 - Property 'displayName' does not exist on type 'string | JSXElementConstructor<any>'.
-  child?.type?.displayName === 'BreadcrumbLink'
-  // @ts-ignore - TS2769 - No overload matches this call.
-  ? /*#__PURE__*/React.cloneElement(child, {
+  }, /*#__PURE__*/React.isValidElement(child) && child?.type?.displayName === 'BreadcrumbLink' ? /*#__PURE__*/React.cloneElement(child, {
     linkComponent
   }) : child, idx < total - 1 && /*#__PURE__*/React.createElement(BreadcrumbSeparator, {
     "aria-hidden": true

package/lib/components/Breadcrumbs/Breadcrumbs.js.flow

@@ -0,0 +1,59 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Icon} from '../Icon';
+import type {BaseLinkProps} from '../Link';
+
+import css from './Breadcrumbs.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type BreadcrumbsProps = {
+  classNames?: ClassNames,
+  children: React.Node,
+  linkComponent?: React.AbstractComponent<BaseLinkProps, ?HTMLAnchorElement>,
+};
+
+const BreadcrumbSeparator = (): React.Node => (
+  <Icon
+    className={css.separator}
+    name="chevron-right"
+    size="small"
+    color="secondary"
+  />
+);
+
+export const Breadcrumbs: React$AbstractComponent<
+  BreadcrumbsProps,
+  HTMLDivElement,
+> = React.forwardRef<BreadcrumbsProps, HTMLDivElement>(
+  ({classNames, children, linkComponent}: BreadcrumbsProps, ref) => {
+    const total = React.Children.count(children);
+
+    return (
+      <div
+        ref={ref}
+        data-testid="Breadcrumbs"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {React.Children.map(children, (child, idx) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <React.Fragment key={`crumb-${idx}`}>
+            {/*add linkComponent to BreadcrumbLinks only,
+            otherwise return original element */}
+            {React.isValidElement(child) &&
+            child?.type?.displayName === 'BreadcrumbLink'
+              ? React.cloneElement(child, {linkComponent})
+              : child}
+
+            {/*Add Separator*/}
+            {idx < total - 1 && <BreadcrumbSeparator aria-hidden />}
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  },
+);

package/lib/components/Breadcrumbs/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './BreadcrumbLink';
+export * from './Breadcrumbs';

package/lib/components/Button/Button.js

@@ -72,13 +72,9 @@ const UnstyledButton = exports.UnstyledButton = /*#__PURE__*/React.forwardRef((_
   } : {}, {
     className: className,
     ref: ref,
-    role: role
-    // @ts-ignore - TS2322 - Type 'unknown' is not assignable to type 'boolean | undefined'.
-    ,
+    role: role,
     disabled: disabled,
-    tabIndex: disabled ? -1 : tabIndex
-    // @ts-ignore - TS2322 - Type 'string | undefined' is not assignable to type '"button" | "submit" | "reset" | undefined'.
-    ,
+    tabIndex: disabled ? -1 : tabIndex,
     type: actionType,
     onClick: event => {
       if (disabled || isLoading) {
@@ -134,9 +130,7 @@ const Button = exports.Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     className: _ButtonModule.default.loader
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
     size: size,
-    colorToken: disabled ? 'colorTextDisabled'
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly primary: "colorTextInversePrimary"; readonly secondary: "colorTextClickable"; readonly tertiary: "colorTextPrimary"; readonly ghost: "colorTextPrimary"; readonly danger: "colorTextInversePrimary"; readonly gradient: "colorTextInversePrimary"; }'.
-    : ButtonTypeToLoaderColorMap[type]
+    colorToken: disabled ? 'colorTextDisabled' : ButtonTypeToLoaderColorMap[type]
   })), /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     className: (0, _classify.classify)({
       [_ButtonModule.default.hidden]: isLoading
@@ -147,13 +141,9 @@ const Button = exports.Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     className: _ButtonModule.default.loader
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
     size: size,
-    colorToken: disabled ? 'colorTextDisabled'
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly primary: "colorTextInversePrimary"; readonly secondary: "colorTextClickable"; readonly tertiary: "colorTextPrimary"; readonly ghost: "colorTextPrimary"; readonly danger: "colorTextInversePrimary"; readonly gradient: "colorTextInversePrimary"; }'.
-    : ButtonTypeToLoaderColorMap[type]
+    colorToken: disabled ? 'colorTextDisabled' : ButtonTypeToLoaderColorMap[type]
   })), /*#__PURE__*/React.createElement(_Icon.Icon, {
-    name: iconLeftName || iconRightName
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly primary: "inversePrimary"; readonly secondary: "clickable"; readonly tertiary: "primary"; readonly ghost: "primary"; readonly danger: "inversePrimary"; readonly gradient: "inversePrimary"; }'.
-    ,
+    name: iconLeftName || iconRightName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
     type: iconLeftName ? iconLeftType : iconRightType,
@@ -164,9 +154,7 @@ const Button = exports.Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   // has icon _and_ child
   (iconLeftName || iconRightName) && /*#__PURE__*/React.createElement(React.Fragment, null, iconLeftName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName,
-    color:
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly primary: "inversePrimary"; readonly secondary: "clickable"; readonly tertiary: "primary"; readonly ghost: "primary"; readonly danger: "inversePrimary"; readonly gradient: "inversePrimary"; }'.
-    disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
+    color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
     type: iconLeftType,
     className: (0, _classify.classify)({
@@ -178,18 +166,14 @@ const Button = exports.Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     className: _ButtonModule.default.loader
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
     size: size,
-    colorToken: disabled ? 'colorTextDisabled'
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly primary: "colorTextInversePrimary"; readonly secondary: "colorTextClickable"; readonly tertiary: "colorTextPrimary"; readonly ghost: "colorTextPrimary"; readonly danger: "colorTextInversePrimary"; readonly gradient: "colorTextInversePrimary"; }'.
-    : ButtonTypeToLoaderColorMap[type]
+    colorToken: disabled ? 'colorTextDisabled' : ButtonTypeToLoaderColorMap[type]
   })), /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     className: (0, _classify.classify)({
       [_ButtonModule.default.hidden]: isLoading
     })
   }, children)), iconRightName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconRightName,
-    color:
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly primary: "inversePrimary"; readonly secondary: "clickable"; readonly tertiary: "primary"; readonly ghost: "primary"; readonly danger: "inversePrimary"; readonly gradient: "inversePrimary"; }'.
-    disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
+    color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
     type: iconRightType,
     className: (0, _classify.classify)({
@@ -197,6 +181,4 @@ const Button = exports.Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     }, classNames?.icon)
   }))));
 });
-
-// @ts-ignore - TS2540 - Cannot assign to 'name' because it is a read-only property.
 Button.name = Button.displayName = 'Button';

package/lib/components/Button/Button.js.flow

@@ -0,0 +1,286 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import {CircularLoader} from '../CircularLoader';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {Truncate} from '../Truncate';
+
+import css from './Button.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, icon?: string, text?: string}>;
+
+/**
+ * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.
+ * This only supports pre-defined gradient that moves from left to right.
+ * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.
+ *
+ * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged
+ * as it would add an additional overhead on the component to figure out exact color values from string tokens
+ * and since this is rarely used type anyway, it should be avoided.
+ */
+export const BUTTON_TYPES = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  ghost: 'ghost',
+  danger: 'danger',
+  gradient: 'gradient',
+});
+
+export const BUTTON_ACTION_TYPE = Object.freeze({
+  button: 'button',
+  submit: 'submit',
+  reset: 'reset',
+});
+
+export const BUTTON_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+
+export type ButtonType = $Values<typeof BUTTON_TYPES>;
+export type ButtonActionType = $Values<typeof BUTTON_ACTION_TYPE>;
+export type ButtonSize = $Keys<typeof BUTTON_SIZE>;
+
+export type BaseButtonProps = {
+  children?: React.Node,
+  disabled?: mixed,
+  actionType?: ButtonActionType,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  ariaLabel?: string,
+  tabIndex?: number,
+  isLoading?: boolean,
+  role?: string,
+  ...
+};
+
+export type UnstyledButtonProps = {
+  ...BaseButtonProps,
+  className?: string,
+  ...
+};
+
+export type ButtonProps = {
+  ...BaseButtonProps,
+  classNames?: ClassNames,
+  iconLeftName?: string,
+  iconLeftType?: IconType,
+  iconRightName?: string,
+  iconRightType?: IconType,
+  type?: ButtonType,
+  isFluid?: boolean,
+  size?: ButtonSize,
+  ...
+};
+
+const ButtonTypeToIconColorMap = {
+  primary: 'inversePrimary',
+  secondary: 'clickable',
+  tertiary: 'primary',
+  ghost: 'primary',
+  danger: 'inversePrimary',
+  gradient: 'inversePrimary',
+};
+
+const ButtonTypeToLoaderColorMap = {
+  primary: 'colorTextInversePrimary',
+  secondary: 'colorTextClickable',
+  tertiary: 'colorTextPrimary',
+  ghost: 'colorTextPrimary',
+  danger: 'colorTextInversePrimary',
+  gradient: 'colorTextInversePrimary',
+};
+
+export const UnstyledButton: React$AbstractComponent<
+  UnstyledButtonProps,
+  HTMLButtonElement,
+> = React.forwardRef<UnstyledButtonProps, HTMLButtonElement>(
+  (
+    {
+      disabled,
+      onClick,
+      className,
+      ariaLabel,
+      actionType,
+      tabIndex = 0,
+      isLoading,
+      role = 'button',
+      ...props
+    }: UnstyledButtonProps,
+    ref,
+  ) => (
+    <button
+      {...props}
+      {...(ariaLabel ? {'aria-label': ariaLabel} : {})}
+      className={className}
+      ref={ref}
+      role={role}
+      disabled={disabled}
+      tabIndex={disabled ? -1 : tabIndex}
+      type={actionType}
+      onClick={(event) => {
+        if (disabled || isLoading) {
+          event.preventDefault();
+        } else if (onClick) {
+          onClick(event);
+        }
+      }}
+    />
+  ),
+);
+
+export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
+  React.forwardRef<ButtonProps, HTMLButtonElement>(
+    (
+      {
+        classNames,
+        children,
+        iconLeftName = '',
+        iconLeftType = 'regular',
+        iconRightName = '',
+        iconRightType = 'regular',
+        type = 'primary',
+        isFluid = false,
+        disabled = false,
+        actionType = 'button',
+        size = 'medium',
+        isLoading,
+        ...props
+      }: ButtonProps,
+      ref,
+    ) => (
+      <UnstyledButton
+        {...props}
+        actionType={actionType}
+        disabled={disabled}
+        isLoading={isLoading}
+        className={classify(
+          css.button,
+          {
+            [css.primary]: type === 'primary',
+            [css.secondary]: type === 'secondary',
+            [css.tertiary]: type === 'tertiary',
+            [css.ghost]: type === 'ghost',
+            [css.danger]: type === 'danger',
+            [css.gradient]: type === 'gradient',
+            [css.disabled]: disabled,
+            [css.small]: size === 'small',
+            [css.medium]: size === 'medium',
+            [css.isFluid]: isFluid === true,
+            [css.withIconLeft]: !!iconLeftName,
+            [css.withIconRight]: !!iconRightName,
+            [css.withBothIcon]: !!(iconLeftName && iconRightName),
+            [css.onlyIcon]: (iconLeftName || iconRightName) && !children,
+          },
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        <div className={css.buttonRow}>
+          {/* Has no icon, only child */}
+          {!(iconLeftName || iconRightName) ? (
+            <div className={classify(css.textContainer, classNames?.text)}>
+              {isLoading && (
+                <div className={css.loader}>
+                  <CircularLoader
+                    size={size}
+                    colorToken={
+                      disabled
+                        ? 'colorTextDisabled'
+                        : ButtonTypeToLoaderColorMap[type]
+                    }
+                  />
+                </div>
+              )}
+              <Truncate className={classify({[css.hidden]: isLoading})}>
+                {children}
+              </Truncate>
+            </div>
+          ) : // has icon, but no child
+            children == null ? (
+              <>
+                {isLoading && (
+                  <div className={css.loader}>
+                    <CircularLoader
+                      size={size}
+                      colorToken={
+                        disabled
+                          ? 'colorTextDisabled'
+                          : ButtonTypeToLoaderColorMap[type]
+                      }
+                    />
+                  </div>
+                )}
+                <Icon
+                  name={iconLeftName || iconRightName}
+                  color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
+                  size={size === 'medium' ? 'medium' : 'small'}
+                  type={iconLeftName ? iconLeftType : iconRightType}
+                  className={classify(
+                    {[css.hidden]: isLoading},
+                    classNames?.icon,
+                  )}
+                />
+              </>
+            ) : (
+            // has icon _and_ child
+              (iconLeftName || iconRightName) && (
+                <>
+                  {iconLeftName && (
+                    <Icon
+                      name={iconLeftName}
+                      color={
+                        disabled ? 'disabled' : ButtonTypeToIconColorMap[type]
+                      }
+                      size={size === 'medium' ? 'medium' : 'small'}
+                      type={iconLeftType}
+                      className={classify(
+                        {[css.hidden]: isLoading},
+                        classNames?.icon,
+                      )}
+                    />
+                  )}
+                  <div className={classify(css.textContainer, classNames?.text)}>
+                    {isLoading && (
+                      <div className={css.loader}>
+                        <CircularLoader
+                          size={size}
+                          colorToken={
+                            disabled
+                              ? 'colorTextDisabled'
+                              : ButtonTypeToLoaderColorMap[type]
+                          }
+                        />
+                      </div>
+                    )}
+                    <Truncate className={classify({[css.hidden]: isLoading})}>
+                      {children}
+                    </Truncate>
+                  </div>
+                  {iconRightName && (
+                    <Icon
+                      name={iconRightName}
+                      color={
+                        disabled ? 'disabled' : ButtonTypeToIconColorMap[type]
+                      }
+                      size={size === 'medium' ? 'medium' : 'small'}
+                      type={iconRightType}
+                      className={classify(
+                        {[css.hidden]: isLoading},
+                        classNames?.icon,
+                      )}
+                    />
+                  )}
+                </>
+              )
+            )}
+        </div>
+      </UnstyledButton>
+    ),
+  );
+
+Button.name = Button.displayName = 'Button';

package/lib/components/Button/index.js.flow

@@ -0,0 +1,16 @@
+// @flow strict
+
+export type {
+  ButtonActionType,
+  ButtonProps,
+  ButtonSize,
+  ButtonType,
+  UnstyledButtonProps,
+} from './Button';
+export {
+  Button,
+  BUTTON_ACTION_TYPE,
+  BUTTON_SIZE,
+  BUTTON_TYPES,
+  UnstyledButton,
+} from './Button';