@bitrise/bitkit 9.40.2-alpha-react18.1 → 9.41.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.40.2-alpha-react18.1",
+  "version": "9.41.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -33,28 +33,30 @@
     "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.2.1",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
+    "@chakra-ui/react": "^1.8.8",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@juggle/resize-observer": "^3.3.1",
     "@popperjs/core": "^2.11.5",
+    "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
-    "framer-motion": "^6.3.15",
+    "framer-motion": "^6.3.4",
     "luxon": "^2.4.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-popper": "^2.3.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-popper": "^2.3.0",
+    "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/parser": "^7.18.5",
-    "@bitrise/eslint-plugin": "^2.2.0",
-    "@chakra-ui/cli": "^2.1.0",
+    "@babel/core": "^7.18.2",
+    "@babel/parser": "^7.18.2",
+    "@bitrise/eslint-plugin": "2.2.0",
+    "@chakra-ui/cli": "^1.9.0",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
     "@google-cloud/storage": "^5.19.4",
@@ -82,30 +84,31 @@
     "@types/lodash.shuffle": "^4.2.7",
     "@types/luxon": "^2.3.2",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "^17.0.16",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-transition-group": "^4.4.4",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/parser": "^5.26.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "axios": "^0.27.2",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",
-    "concurrently": "^7.2.2",
+    "concurrently": "^7.2.1",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "esbuild": "^0.14.47",
-    "eslint": "^8.18.0",
+    "esbuild": "^0.14.43",
+    "eslint": "^8.16.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.5.3",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-prettier": "^4.1.0",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.5.13",
+    "eslint-plugin-jest": "^26.4.5",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-storybook": "^0.5.12",
     "eslint-plugin-testing-library": "^5.5.1",
     "fscreen": "^1.2.0",
     "glob": "^8.0.3",
@@ -116,21 +119,21 @@
     "lodash.sample": "^4.2.1",
     "lodash.shuffle": "^4.2.0",
     "node-watch": "^0.7.3",
-    "prettier": "^2.7.1",
+    "prettier": "^2.6.2",
     "prismjs": "^1.28.0",
-    "react": "^18.2.0",
-    "react-docgen": "5.4.2",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.2",
+    "react-docgen": "5.4.0",
+    "react-dom": "^17.0.2",
     "react-router": "^5.3.1",
     "react-router-dom": "^5.3.1",
     "recast": "^0.21.1",
-    "semantic-release": "^19.0.3",
+    "semantic-release": "^19.0.2",
     "superstatic": "^8.0.0",
     "ts-jest": "^27.1.5",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.8.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.7.4",
-    "webpack": "^5.73.0"
+    "typescript": "^4.6.4",
+    "webpack": "^5.72.1"
   },
   "files": [
     "src",
@@ -153,7 +156,7 @@
   },
   "resolutions": {
     "**/ast-types": "npm:@gkz/ast-types",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.8.0",
     "@types/react": "17.0.40"
   }
 }

package/src/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,30 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Breadcrumb from './Breadcrumb';
+import BreadcrumbLink from './BreadcrumbLink';
+
+export default {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  subcomponents: { BreadcrumbLink },
+} as ComponentMeta<typeof Breadcrumb>;
+
+const Template: ComponentStory<typeof Breadcrumb> = (props) => (
+  <Breadcrumb {...props}>
+    <BreadcrumbLink
+      avatarSrc="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
+      href="#"
+    >
+      Bitrise #Core
+    </BreadcrumbLink>
+    <BreadcrumbLink avatarName="Bitkit" href="#">
+      bitkit
+    </BreadcrumbLink>
+    <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>
+  </Breadcrumb>
+);
+
+export const WithProps = Template.bind({});
+WithProps.args = {
+  hasSeparatorAfterLast: false,
+  hasSeparatorBeforeFirst: false,
+};

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -0,0 +1,25 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const BreadcrumbTheme: SystemStyleObject = {
+  baseStyle: {
+    container: {
+      '> ol': {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+    link: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8',
+      '[aria-current]': {
+        color: 'red',
+      },
+    },
+    separator: {
+      display: 'flex',
+    },
+  },
+};
+
+export default BreadcrumbTheme;

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,54 @@
+import { Children } from 'react';
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbProps as ChakraBreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  forwardRef,
+} from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../Icon/Icon';
+
+export interface BreadcrumbProps extends ChakraBreadcrumbProps {
+  hasSeparatorAfterLast?: boolean;
+  hasSeparatorBeforeFirst?: boolean;
+  separatorIconName?: TypeIconName;
+}
+
+/**
+ * Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.
+ */
+const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
+  const {
+    children,
+    hasSeparatorAfterLast,
+    hasSeparatorBeforeFirst,
+    separatorIconName = 'ChevronRight',
+    ...rest
+  } = props;
+  const childrenCount = Children.count(children);
+  const items = Children.map(children, (child, index) => {
+    return (
+      <BreadcrumbItem>
+        {hasSeparatorBeforeFirst && index === 0 && <BreadcrumbSeparator />}
+        {child}
+        {hasSeparatorAfterLast && index === childrenCount - 1 && <BreadcrumbSeparator />}
+      </BreadcrumbItem>
+    );
+  });
+
+  const properties = {
+    separator: <Icon name={separatorIconName} textColor="neutral.70" size="16" />,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumb {...properties} ref={ref}>
+      {items}
+    </ChakraBreadcrumb>
+  );
+});
+
+Breadcrumb.defaultProps = {
+  separatorIconName: 'ChevronRight',
+};
+
+export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -0,0 +1,30 @@
+import {
+  BreadcrumbLink as ChakraBreadcrumbLink,
+  BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
+  forwardRef,
+} from '@chakra-ui/react';
+import Avatar from '../Avatar/Avatar';
+
+export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
+  avatarName?: string;
+  avatarSrc?: string;
+}
+
+const Breadcrumb = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
+  const { avatarName, avatarSrc, children, isCurrentPage, ...rest } = props;
+  const properties: ChakraBreadcrumbLinkProps = {
+    color: isCurrentPage ? 'neutral.40' : 'inherit',
+    isCurrentPage,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
+      {(avatarName || avatarSrc) && (
+        <Avatar name={avatarName || children?.toString()} src={avatarSrc} borderRadius="4" />
+      )}
+      {children}
+    </ChakraBreadcrumbLink>
+  );
+});
+
+export default Breadcrumb;

package/src/Components/ButtonGroup/ButtonGroup.stories.tsx

@@ -7,7 +7,7 @@ export default {
 } as ComponentMeta<typeof ButtonGroup>;
 
 const Template: ComponentStory<typeof ButtonGroup> = (props) => (
-  <ButtonGroup {...props} width="900px" flexDirection="row">
+  <ButtonGroup {...props} width="900px" flexDirection="column">
     <Button>Button 1</Button>
     <Button>Button 2</Button>
     <Button>Button 3</Button>

package/src/Components/EmptyState/EmptyState.theme.ts

@@ -10,7 +10,7 @@ const EmptyStateTheme: ComponentStyleConfig = {
       justifyContent: 'center',
       paddingX: '16',
       paddingY: {
-        base: '32',
+        mobile: '32',
         desktop: '48',
       },
       backgroundColor: 'neutral.95',

package/src/Components/Menu/Menu.tsx

@@ -2,6 +2,6 @@ import { Menu as ChakraMenu, MenuProps as ChakraMenuProps } from '@chakra-ui/rea
 
 export type MenuProps = ChakraMenuProps;
 
-const Menu = (props: MenuProps) => <ChakraMenu {...props} />;
+const Menu = (props: MenuProps) => <ChakraMenu matchWidth {...props} />;
 
 export default Menu;

package/src/Components/Popover/PopoverTrigger.tsx

@@ -1,5 +1,6 @@
+import { FC } from 'react';
 import { PopoverTrigger as ChakraPopoverTrigger } from '@chakra-ui/react';
 
-const PopoverTrigger = (props: { children: React.ReactNode }) => <ChakraPopoverTrigger {...props} />;
+const PopoverTrigger: FC = (props) => <ChakraPopoverTrigger {...props} />;
 
 export default PopoverTrigger;

package/src/Foundations/Breakpoints/Breakpoints.ts

@@ -1,13 +1,7 @@
-export const BREAKPOINTS = {
-  MOBILE: 'base',
-  DESKTOP: 'desktop',
-  WIDE: 'wide',
-};
-
 const breakpoints = {
-  [BREAKPOINTS.MOBILE]: '0rem',
-  [BREAKPOINTS.DESKTOP]: '53rem', // 848px
-  [BREAKPOINTS.WIDE]: '101rem', // 1616px
+  mobile: '0rem',
+  desktop: '53rem', // 848px
+  wide: '101rem', // 1616px
 };
 
 export default breakpoints;

package/src/Old/Appear/Appear.css

@@ -0,0 +1,116 @@
+.Appear {
+  animation-timing-function: var(--transition-timing-function);
+}
+
+.Appear--fast {
+  transition-duration: var(--transition-duration--fast);
+  animation-duration: var(--transition-duration--fast);
+}
+
+.Appear--base {
+  transition-duration: var(--transition-duration--base);
+  animation-duration: var(--transition-duration--base);
+}
+
+.Appear--slow {
+  transition-duration: var(--transition-duration--slow);
+  animation-duration: var(--transition-duration--slow);
+}
+
+.Appear--Fade {
+  opacity: 0;
+  transition-property: opacity;
+}
+
+.Appear--Fade-appear-active,
+.Appear--Fade-appear-done,
+.Appear--Fade-enter-active,
+.Appear--Fade-enter-done,
+.Appear--Fade-exit {
+  opacity: 1;
+}
+
+.Appear--Fade-appear,
+.Appear--Fade-enter,
+.Appear--Fade-exit-active,
+.Appear--Fade-exit-done {
+  opacity: 0;
+}
+
+.Appear--FadeSlideDown,
+.Appear--FadeSlideUp {
+  opacity: 0;
+  transition-property: transform, opacity;
+}
+
+.Appear--FadeSlideUp { transform: translateY(var(--size--x4)); }
+.Appear--FadeSlideDown { transform: translateY(calc(var(--size--x4) * -1)); }
+
+.Appear--FadeSlideDown-appear-active,
+.Appear--FadeSlideDown-appear-done,
+.Appear--FadeSlideDown-enter-active,
+.Appear--FadeSlideDown-enter-done,
+.Appear--FadeSlideDown-exit,
+.Appear--FadeSlideUp-appear-active,
+.Appear--FadeSlideUp-appear-done,
+.Appear--FadeSlideUp-enter-active,
+.Appear--FadeSlideUp-enter-done,
+.Appear--FadeSlideUp-exit {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.Appear--FadeSlideDown-appear,
+.Appear--FadeSlideDown-enter,
+.Appear--FadeSlideDown-exit-active,
+.Appear--FadeSlideDown-exit-done {
+  transform: translateY(calc(var(--size--x4) * -1));
+  opacity: 0;
+}
+
+.Appear--FadeSlideUp-appear,
+.Appear--FadeSlideUp-enter,
+.Appear--FadeSlideUp-exit-active,
+.Appear--FadeSlideUp-exit-done {
+  transform: translateY(var(--size--x4));
+  opacity: 0;
+}
+
+.Appear--FadeSlideRight,
+.Appear--FadeSlideLeft {
+  opacity: 0;
+  transition-property: transform, opacity;
+}
+
+.Appear--FadeSlideRight { transform: translateX(calc(var(--size--x4) * -1)); }
+.Appear--FadeSlideLeft { transform: translateX(var(--size--x4)); }
+
+.Appear--FadeSlideRight-appear-active,
+.Appear--FadeSlideRight-appear-done,
+.Appear--FadeSlideRight-enter-active,
+.Appear--FadeSlideRight-enter-done,
+.Appear--FadeSlideRight-exit,
+.Appear--FadeSlideLeft-appear-active,
+.Appear--FadeSlideLeft-appear-done,
+.Appear--FadeSlideLeft-enter-active,
+.Appear--FadeSlideLeft-enter-done,
+.Appear--FadeSlideLeft-exit {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.Appear--FadeSlideRight-appear,
+.Appear--FadeSlideRight-enter,
+.Appear--FadeSlideRight-exit-active,
+.Appear--FadeSlideRight-exit-done {
+  transform: translateX(calc(var(--size--x4) * -1));
+  opacity: 0;
+}
+
+.Appear--FadeSlideLeft-appear,
+.Appear--FadeSlideLeft-enter,
+.Appear--FadeSlideLeft-exit-active,
+.Appear--FadeSlideLeft-exit-done {
+  transform: translateX(var(--size--x4));
+  opacity: 0;
+}

package/src/Old/Appear/Appear.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import classnames from 'classnames';
+import { transitionDurationFast, transitionDurationBase, transitionDurationSlow } from '../variables';
+import Base, { Props as BaseProps } from '../Base/Base';
+import './Appear.css';
+
+const isClient = typeof window !== 'undefined';
+
+const durations = {
+  fast: transitionDurationFast,
+  base: transitionDurationBase,
+  slow: transitionDurationSlow,
+};
+
+export type TypeAppearAnimationName = 'Fade' | 'FadeSlideUp' | 'FadeSlideRight' | 'FadeSlideDown' | 'FadeSlideLeft';
+
+export interface Props extends BaseProps {
+  /** Type of enter and exit animation */
+  animation: TypeAppearAnimationName;
+  className?: string;
+  /** Entrance delay time */
+  delay?: number;
+  /** Entrance duration */
+  duration?: 'slow' | 'base' | 'fast';
+  style?: React.CSSProperties;
+  /** Flag if the element is visible or not */
+  visible?: boolean;
+}
+
+/** Enter and exit components into view with a bit of bedazzle */
+const Appear: React.FunctionComponent<Props> = (props: Props) => {
+  const { animation, className, delay, duration = 'fast', style, visible, ...rest } = props;
+
+  const classes = classnames(className, 'Appear', `Appear--${animation}`, `Appear--${duration}`, {
+    [`Appear--${animation}-appear`]: !isClient && visible,
+  });
+
+  const transition = {
+    appear: `Appear--${animation}-appear`,
+    appearActive: `Appear--${animation}-appear-active`,
+    enter: `Appear--${animation}-enter`,
+    enterActive: `Appear--${animation}-enter-active`,
+    enterDone: `Appear--${animation}-enter-done`,
+    exit: `Appear--${animation}-exit`,
+    exitActive: `Appear--${animation}-exit-active`,
+    exitDone: `Appear--${animation}-exit-done`,
+  };
+
+  const newStyle = {
+    ...style,
+    animationDelay: `${delay}ms`,
+    transitionDelay: `${delay}ms`,
+  };
+
+  return (
+    <CSSTransition
+      appear={isClient && visible}
+      classNames={transition}
+      in={isClient && visible}
+      timeout={durations[duration]}
+    >
+      <Base {...rest} className={classes} style={newStyle} />
+    </CSSTransition>
+  );
+};
+
+Appear.defaultProps = {
+  delay: 0,
+  duration: 'fast',
+  visible: true,
+};
+
+export default Appear;

package/src/Old/Placement/Placement.css

@@ -2,12 +2,26 @@
 .Placement {
   position: absolute;
   z-index: var(--z-index-Placement--below-modal);
+  pointer-events: none;
+}
+
+.Placement--animate {
+  transition-property: transform;
+  transition-duration: var(--transition-duration--fast);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .Placement--above-modal {
   z-index: var(--z-index-Placement--above-modal);
 }
 
+.Placement__content {
+  opacity: 0;
+  transition-property: transform, opacity;
+  transition-duration: var(--transition-duration--fast);
+  transition-timing-function: var(--transition-timing-function);
+}
+
 .Placement--top .Placement__content { transform: translateY(calc(var(--size--x4) * -1)); }
 .Placement--bottom .Placement__content { transform: translateY(var(--size--x4)); }
 

package/src/Old/Placement/PlacementPopper.tsx

@@ -3,8 +3,10 @@ import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { Placement as TypePlacement, VirtualElement } from '@popperjs/core';
 import { Popper, PopperProps } from 'react-popper';
+import { CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
 import { useEventListener } from '../hooks';
+import { transitionDurationFast } from '../variables';
 import Base, { Props as BaseProps } from '../Base/Base';
 import { PlacementArrowPropsContext } from './PlacementArrowPropsContext';
 import { PlacementManagerContext } from './PlacementManagerContext';
@@ -12,6 +14,18 @@ import './Placement.css';
 
 const { useEffect, useRef, useState } = React;
 
+const transitionClasses = {
+  appear: 'Placement__content-appear',
+  appearActive: 'Placement__content-appear-active',
+  appearDone: 'Placement__content-appear-done',
+  enter: 'Placement__content-enter',
+  enterActive: 'Placement__content-enter-active',
+  enterDone: 'Placement__content-enter-done',
+  exit: 'Placement__content-exit',
+  exitActive: 'Placement__content-exit-active',
+  exitDone: 'Placement__content-exit-done',
+};
+
 export interface Props extends BaseProps {
   animatePosition?: boolean;
   children: (props: { update: () => void; width?: number }) => React.ReactNode;
@@ -40,6 +54,7 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
     referenceElement,
     sameWidth,
     visible,
+    timeout = transitionDurationFast,
     ...rest
   } = props;
 
@@ -142,7 +157,7 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
               ref={ref}
               style={style}
             >
-              {visible && (
+              <CSSTransition appear={visible} classNames={transitionClasses} in={visible} timeout={timeout}>
                 <div className="Placement__content">
                   <Base {...rest} backgroundColor={backgroundColor} className="Placement__shadow">
                     <PlacementManagerContext.Consumer>
@@ -155,7 +170,7 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
                     </PlacementManagerContext.Consumer>
                   </Base>
                 </div>
-              )}
+              </CSSTransition>
             </div>
           </PlacementArrowPropsContext.Provider>
         );

package/src/index.ts

@@ -132,3 +132,9 @@ export { default as RadioGroup } from './Components/Form/Radio/RadioGroup';
 
 export type { ImageProps } from './Components/Image/Image';
 export { default as Image } from './Components/Image/Image';
+
+export type { BreadcrumbProps } from './Components/Breadcrumb/Breadcrumb';
+export { default as Breadcrumb } from './Components/Breadcrumb/Breadcrumb';
+
+export type { BreadcrumbLinkProps } from './Components/Breadcrumb/BreadcrumbLink';
+export { default as BreadcrumbLink } from './Components/Breadcrumb/BreadcrumbLink';

package/src/old.ts

@@ -15,6 +15,10 @@ export { default as AddonBeamLink } from './Old/AddonBeam/AddonBeamLink';
 export type { Props as AddonFooterProps } from './Old/AddonFooter/AddonFooter';
 export { default as AddonFooter } from './Old/AddonFooter/AddonFooter';
 
+export type { Props as AppearProps } from './Old/Appear/Appear';
+export type { TypeAppearAnimationName } from './Old/Appear/Appear';
+export { default as Appear } from './Old/Appear/Appear';
+
 export type { Props as AppLayoutProps } from './Old/AppLayout/AppLayout';
 export { default as AppLayout } from './Old/AppLayout/AppLayout';
 

package/src/theme.ts

@@ -1,5 +1,6 @@
 import Avatar from './Components/Avatar/Avatar.theme';
 import Badge from './Components/Badge/Badge.theme';
+import Breadcrumb from './Components/Breadcrumb/Breadcrumb.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
 import Checkbox from './Components/Form/Checkbox/Checkbox.theme';
@@ -65,6 +66,7 @@ const theme = {
   components: {
     Avatar,
     Badge,
+    Breadcrumb,
     Button,
     Card,
     Checkbox,