@bitrise/bitkit 9.17.0 → 9.19.0-alpha-chakra.1

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.17.0",
+  "version": "9.19.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "scripts": {
     "build": "yarn build:lib && yarn build:site",
     "build:docs": "ts-node ./scripts/build-docs",
-    "build:icons": "svgr src/Old/Icon/svg && yarn lint:fix-icons",
+    "build:icons": "ts-node ./scripts/build-icons.ts",
     "build:lib": "rm -rf ./lib && yarn build:lib:cjs && yarn build:lib:esn",
     "build:lib:esn": "tsc -p src -m esnext -t esnext --outDir lib/esn",
     "build:lib:cjs": "tsc -p src --outDir lib/cjs",
@@ -53,6 +53,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",
+    "@babel/parser": "^7.18.2",
     "@bitrise/eslint-plugin": "^2.1.0",
     "@chakra-ui/cli": "^1.9.0",
     "@chakra-ui/storybook-addon": "^1.0.3",
@@ -73,6 +74,7 @@
     "@storybook/testing-library": "^0.0.11",
     "@storybook/theming": "^6.5.6",
     "@svgr/cli": "^6.2.1",
+    "@svgr/core": "^6.2.1",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
@@ -125,6 +127,7 @@
     "react-dom": "^17.0.2",
     "react-router": "^5.3.1",
     "react-router-dom": "^5.3.1",
+    "recast": "^0.21.1",
     "semantic-release": "^19.0.2",
     "superstatic": "^8.0.0",
     "ts-jest": "^27.1.5",
@@ -135,6 +138,7 @@
   },
   "files": [
     "src",
+    "icons.ts",
     "tsconfig.json"
   ],
   "publishConfig": {

package/src/Components/Badge/Badge.stories.tsx

@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Badge from './Badge';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+} as ComponentMeta<typeof Badge>;
+
+export const WithProps: ComponentStory<typeof Badge> = (props) => <Badge {...props} />;
+WithProps.args = {
+  children: 'Coming soon',
+  ...Badge.defaultProps,
+};

package/src/Components/Badge/Badge.theme.ts

@@ -0,0 +1,15 @@
+const BadgeTheme = {
+  baseStyle: {
+    display: 'inline-block',
+    paddingX: '8',
+    paddingY: '3',
+    fontSize: '1',
+    lineHeight: '1',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    borderRadius: '4',
+    cursor: 'default',
+  },
+};
+
+export default BadgeTheme;

package/src/Components/Badge/Badge.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
+
+export type BadgeProps = ChakraBadgeProps;
+
+/**
+ * Badges are used to highlight an item's status for quick recognition.
+ */
+const Badge = (props: BadgeProps) => {
+  return <ChakraBadge {...props} />;
+};
+
+Badge.defaultProps = {
+  color: 'neutral.100',
+  backgroundColor: 'purple.40',
+} as BadgeProps;
+
+export default Badge;

package/src/Components/Button/Button.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef } from '@chakra-ui/react';
-import Icon from '../../Old/Icon/Icon';
-import { TypeIconName } from '../../Old/Icon/tsx';
+import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface ButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';

package/src/Components/Icon/Icon.stories.tsx

@@ -0,0 +1,10 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Icon from './Icon';
+
+export default {
+  title: 'Components/Icon',
+  args: { name: 'Bitbot' },
+  component: Icon,
+} as ComponentMeta<typeof Icon>;
+
+export const Default: ComponentStory<typeof Icon> = (args) => <Icon {...args} />;

package/src/Components/Icon/Icon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { forwardRef, IconProps as ChakraIconProps } from '@chakra-ui/react';
+import * as bigIcons from '../Icons/24x24';
+import * as smallIcons from '../Icons/16x16';
+
+export type TypeIconName = keyof typeof bigIcons & keyof typeof smallIcons;
+export interface IconProps extends ChakraIconProps {
+  name: TypeIconName;
+  size?: '16' | '24';
+}
+
+const Icon = forwardRef<IconProps, 'svg'>(({ name, size = '24', ...rest }, ref) => {
+  const props = {
+    ref,
+    width: size,
+    height: size,
+    ...rest,
+  };
+  const ThisIcon = size === '24' ? bigIcons[name] : smallIcons[name];
+  return <ThisIcon {...props} />;
+});
+
+export default Icon;

package/src/Components/Icons/16x16/Addons.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Addons = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M13.333 11.845c0 .119-.064.23-.166.289l-2.001 1.155a.333.333 0 0 1-.333-.001l-2-1.153a.336.336 0 0 1-.166-.29V9.434c0-.119.064-.229.165-.288h.001l2-1.155V7.99a.336.336 0 0 1 .334 0l1.999 1.154c.103.06.167.17.167.29v2.41Zm-6.166.289-2.001 1.155a.333.333 0 0 1-.333-.001l-2-1.153a.336.336 0 0 1-.166-.29V9.434c0-.12.064-.23.166-.29l2-1.154a.335.335 0 0 1 .334 0l2 1.155c.103.06.166.17.166.289v2.41c0 .12-.064.23-.166.29Zm-1.5-7.98c0-.119.064-.23.166-.289l2-1.154a.335.335 0 0 1 .334 0l1.999 1.154c.103.06.167.17.167.29v2.392a.334.334 0 0 1-.166.288L8.166 7.991a.331.331 0 0 1-.331 0l-.002-.001-1.405-.811-.595-.344a.334.334 0 0 1-.166-.288V4.155Zm8.166 3.836-2-1.154c-.061-.035-.13-.053-.194-.08.009-.07.028-.138.028-.209V4.155c0-.594-.32-1.146-.834-1.444l-2-1.154a1.67 1.67 0 0 0-1.666-.001L5.166 2.71c-.513.298-.833.85-.833 1.444v2.392c0 .07.019.139.028.208-.065.027-.132.045-.194.08L2.166 7.991c-.513.297-.833.85-.833 1.443v2.41c0 .594.32 1.147.834 1.445l1.999 1.153a1.663 1.663 0 0 0 1.667.001l2-1.155c.062-.036.11-.085.167-.128.056.043.105.093.167.129l1.999 1.153a1.663 1.663 0 0 0 1.667.001l2-1.155c.514-.297.834-.85.834-1.443V9.434c0-.593-.32-1.146-.834-1.444Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default Addons;

package/src/Components/Icons/16x16/AddonsTuorqouise.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const AddonsTuorqouise = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="#55CEC3"
+      fillRule="evenodd"
+      d="M8 8.956v3.981l-2.667 1.548c-.412.24-.92.24-1.332 0l-2-1.16a1.343 1.343 0 0 1-.668-1.162V9.73c0-.48.255-.923.668-1.161L4.667 7.02 8 8.956Z"
+      clipRule="evenodd"
+      opacity={0.8}
+    />
+    <path
+      fill="#55CEC3"
+      fillRule="evenodd"
+      d="M14.667 9.73v2.433c0 .48-.255.922-.668 1.161l-2 1.162c-.412.238-.92.238-1.332 0L8 12.937V8.956l3.333-1.935L14 8.57c.413.239.668.682.668 1.161"
+      clipRule="evenodd"
+      opacity={0.5}
+    />
+    <path
+      fill="#55CEC3"
+      fillRule="evenodd"
+      d="M11.333 3.835v3.186L8 8.956 4.667 7.02V3.835c0-.48.254-.923.667-1.161l2-1.162c.412-.238.92-.238 1.332 0l2 1.162c.413.238.667.682.667 1.161"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default AddonsTuorqouise;

package/src/Components/Icons/16x16/AddonsViolet.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const AddonsViolet = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="#9247C2"
+      fillRule="evenodd"
+      d="M8 8.956v3.981l-2.667 1.548c-.412.24-.92.24-1.332 0l-2-1.16a1.343 1.343 0 0 1-.668-1.162V9.73c0-.48.255-.923.668-1.161L4.667 7.02 8 8.956Z"
+      clipRule="evenodd"
+      opacity={0.8}
+    />
+    <path
+      fill="#9247C2"
+      fillRule="evenodd"
+      d="M14.667 9.73v2.433c0 .48-.255.922-.668 1.161l-2 1.162c-.412.238-.92.238-1.332 0L8 12.937V8.956l3.333-1.935L14 8.57c.413.239.668.682.668 1.161"
+      clipRule="evenodd"
+      opacity={0.5}
+    />
+    <path
+      fill="#9247C2"
+      fillRule="evenodd"
+      d="M11.333 3.835v3.186L8 8.956 4.667 7.02V3.835c0-.48.254-.923.667-1.161l2-1.162c.412-.238.92-.238 1.332 0l2 1.162c.413.238.667.682.667 1.161"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default AddonsViolet;

package/src/Components/Icons/16x16/AddonsWhite.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const AddonsWhite = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M8 8.956v3.981l-2.667 1.548c-.412.24-.92.24-1.332 0l-2-1.16a1.343 1.343 0 0 1-.668-1.162V9.73c0-.48.255-.923.668-1.161L4.667 7.02 8 8.956Z"
+      clipRule="evenodd"
+      opacity={0.8}
+    />
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M14.667 9.73v2.433c0 .48-.255.922-.668 1.161l-2 1.162c-.412.238-.92.238-1.332 0L8 12.937V8.956l3.333-1.935L14 8.57c.413.239.668.682.668 1.161"
+      clipRule="evenodd"
+      opacity={0.5}
+    />
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M11.333 3.835v3.186L8 8.956 4.667 7.02V3.835c0-.48.254-.923.667-1.161l2-1.162c.412-.238.92-.238 1.332 0l2 1.162c.413.238.667.682.667 1.161"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default AddonsWhite;

package/src/Components/Icons/16x16/Anchor.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Anchor = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M8 2.667A.667.667 0 1 1 8 4a.667.667 0 0 1 0-1.334ZM11.333 8v1.333H12a4.003 4.003 0 0 1-3.333 3.94v-5.94H10V6H8.667v-.79A1.996 1.996 0 0 0 10 3.333c0-1.102-.897-2-2-2s-2 .898-2 2c0 .868.56 1.601 1.333 1.877V6H6v1.333h1.333v5.94A4.003 4.003 0 0 1 4 9.333h.667V8H1.333v1.333h1.334A5.34 5.34 0 0 0 8 14.667a5.34 5.34 0 0 0 5.333-5.334h1.334V8h-3.334Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default Anchor;

package/src/Components/Icons/16x16/Android.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Android = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M6.533 3.333c.467-.2.934-.267 1.467-.267.467 0 .867.067 1.267.2L10.333 2.2a.645.645 0 0 1 .934 0 .644.644 0 0 1 0 .933l-.8.8A3.979 3.979 0 0 1 12 7.062H4c0-1.199.533-2.265 1.4-2.998l-.933-.932a.644.644 0 0 1 0-.933.645.645 0 0 1 .933 0l1.133 1.133Zm-1.2 7.729h-.666c-.4 0-.667-.267-.667-.667V7.73h8v2.665c0 .4-.267.667-.667.667h-.666v1.998a.668.668 0 0 1-.667.667c-.4 0-.667-.267-.667-.667v-1.998H6.667v1.998a.668.668 0 0 1-.667.667c-.4 0-.667-.267-.667-.667v-1.998ZM14 7.73v2.732a.668.668 0 0 1-.667.666c-.4 0-.666-.266-.666-.666V7.73c0-.333.266-.666.666-.666S14 7.33 14 7.73ZM2.667 7.064c.4 0 .666.266.666.666v2.665a.668.668 0 0 1-.666.667c-.4 0-.667-.267-.667-.667V7.73c0-.4.267-.666.667-.666ZM10 6.397c.4 0 .667-.266.667-.666A.668.668 0 0 0 10 5.065c-.4 0-.667.333-.667.666 0 .4.267.667.667.667Zm-4 0c.4 0 .667-.266.667-.666A.668.668 0 0 0 6 5.065c-.4 0-.667.333-.667.666 0 .4.267.667.667.667Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default Android;

package/src/Components/Icons/16x16/App.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const App = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M2.667 1.333h10.666c.734 0 1.334.6 1.334 1.334v10.666c0 .734-.6 1.334-1.334 1.334H2.667c-.734 0-1.334-.6-1.334-1.334V2.667c0-.734.6-1.334 1.334-1.334ZM8 4c.867 0 1.667.267 2.333.733L12.4 2.667H3.6l2.067 2.066A4.041 4.041 0 0 1 8 4Zm0 1.333c-.467 0-.933.134-1.333.4L8 7.067l1.333-1.334c-.4-.266-.866-.4-1.333-.4ZM5.733 6.667c-.266.4-.4.866-.4 1.333 0 .467.134.933.4 1.333L7.067 8 5.733 6.667ZM10.667 8c0 .467-.134.933-.4 1.333L8.933 8l1.334-1.333c.266.4.4.866.4 1.333Zm-1.334 2.267L8 8.933l-1.333 1.334c.4.266.866.4 1.333.4.467 0 .933-.134 1.333-.4Zm-4.6-4.6A4.041 4.041 0 0 0 4 8c0 .867.267 1.667.733 2.333L2.667 12.4V3.6l2.066 2.067Zm.934 5.6A4.041 4.041 0 0 0 8 12c.867 0 1.667-.267 2.333-.733l2.067 2.066H3.6l2.067-2.066Zm5.6-.934A4.041 4.041 0 0 0 12 8c0-.867-.267-1.667-.733-2.333L13.333 3.6v8.8l-2.066-2.067Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default App;

package/src/Components/Icons/16x16/Apple.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Apple = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M10 2.533c.8-.933.667-1.866.667-1.866s-1.2 0-2.067 1c-.8.866-.6 1.666-.6 1.666s1.067.134 2-.8Zm1.6 5.4C11.6 6.2 13 5.467 13 5.467S12.267 4.2 10.467 4.2c-1.067 0-1.867.6-2.334.6-.533 0-1.266-.533-2.266-.533-1.534 0-3.134 1.333-3.134 3.933-.066 2.533 1.867 5.8 3.4 5.8.534 0 1.334-.533 2.134-.533.8 0 1.4.533 2.133.533 1.667 0 2.867-3.4 2.867-3.4S11.6 9.867 11.6 7.933Zm-.2 3.667c-.4.667-.8 1.067-.933 1.067-.067 0-.2 0-.467-.134-.067 0-.067 0-.133-.066-.667-.267-1-.334-1.534-.334-.533 0-1 .134-1.666.334-.467.2-.6.2-.534.2-.6 0-2.133-2.534-2.133-4.534 0-1.6.867-2.6 1.8-2.6.2 0 .467.067.8.2-.067 0 .533.2.667.267.333.067.533.133.866.133.267 0 .534-.066.867-.2.133-.066.533-.2.533-.2.4-.133.667-.2.934-.2.2 0 .4 0 .533.067a4.042 4.042 0 0 0-.733 2.333c0 1.267.466 2.267 1.333 3l.133.134c-.2.2-.266.333-.333.533Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default Apple;

package/src/Components/Icons/16x16/AppleFill.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const AppleFill = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="#201B22"
+      d="M10.667.667S10.8 1.6 10 2.533c-.933.934-2 .8-2 .8s-.2-.8.6-1.666c.867-1 2.067-1 2.067-1ZM13 5.467s-1.4.733-1.4 2.466c0 1.934 1.667 2.667 1.667 2.667S12.067 14 10.4 14c-.733 0-1.333-.533-2.133-.533S6.667 14 6.133 14c-1.533 0-3.466-3.267-3.4-5.8 0-2.6 1.6-3.933 3.134-3.933 1 0 1.733.533 2.266.533.467 0 1.267-.6 2.334-.6C12.267 4.2 13 5.467 13 5.467Z"
+    />
+  </Icon>
+));
+
+export default AppleFill;

package/src/Components/Icons/16x16/ArrowBack.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowBack = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M3.744 7.333h5.465v1.334H3.761l2.153 2.153-.943.942-3.77-3.77L4.97 4.22l.943.943-2.17 2.17Zm10.799 0v1.334h-1.334V7.333h1.334Zm-2 0v1.334H9.876V7.333h2.667Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default ArrowBack;

package/src/Components/Icons/16x16/ArrowDown.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowDown = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      d="M8.669 1.333v1.334H7.336V1.333h1.333Zm0 2V6H7.336V3.333h1.333Zm3.113 7.572-.943-.943-2.17 2.17V6.667H7.336v5.448L5.183 9.962l-.943.943 3.771 3.77 3.771-3.77Z"
+    />
+  </Icon>
+));
+
+export default ArrowDown;

package/src/Components/Icons/16x16/ArrowForward.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowForward = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m10.905 4.22-.943.943 2.17 2.17H6.667v1.334h5.448L9.962 10.82l.943.942 3.77-3.77-3.77-3.772ZM2.667 7.333H1.333v1.334h1.334V7.333Zm3.333 0H3.333v1.334H6V7.333Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default ArrowForward;

package/src/Components/Icons/16x16/ArrowQuit.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowQuit = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      d="M8.663 10V4.977l2.17 2.17.943-.942-3.771-3.772-3.772 3.772.943.942L7.33 4.994V10h.004a1.333 1.333 0 0 0 1.333 1.333h6V10H8.664Z"
+    />
+  </Icon>
+));
+
+export default ArrowQuit;

package/src/Components/Icons/16x16/ArrowUp.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowUp = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m7.28 3.797-2.17 2.17-.943-.942 3.771-3.772 3.771 3.772-.943.942-2.153-2.153v5.448H7.28V3.797Zm0 10.799v-1.334h1.333v1.334H7.28Zm0-2V9.929h1.333v2.667H7.28Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default ArrowUp;

package/src/Components/Icons/16x16/BackArrow.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const BackArrow = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m6.533 8.6 1.734 1.733-1 .934L4 7.933l3.267-3.266.933.933-1.6 1.667h5.333V8.6h-5.4Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default BackArrow;

package/src/Components/Icons/16x16/Badge3rdParty.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Badge3rdParty = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="#4F9BDE"
+      fillRule="evenodd"
+      d="M9.56 3.435 8 2 6.44 3.435l-2.148-.29-.375 2.034L2 6.146 2.953 8 2 9.854l1.917.967.375 2.033 2.148-.289L8 14l1.56-1.435 2.148.29.375-2.034L14 9.854 13.047 8 14 6.146l-1.917-.967-.375-2.033-2.148.289Z"
+      clipRule="evenodd"
+    />
+    <path fill="#fff" d="m5.346 7.876.892-.849L7.37 8.103 9.632 5.95l.892.849-3.155 3-2.023-1.924Z" />
+  </Icon>
+));
+
+export default Badge3rdParty;

package/src/Components/Icons/16x16/BadgeBitrise.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const BadgeBitrise = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="#11BBA9"
+      fillRule="evenodd"
+      d="M9.56 3.435 8 2 6.44 3.435l-2.148-.29-.375 2.034L2 6.146 2.953 8 2 9.854l1.917.967.375 2.033 2.148-.289L8 14l1.56-1.435 2.148.29.375-2.034L14 9.854 13.047 8 14 6.146l-1.917-.967-.375-2.033-2.148.289Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#fff"
+      d="M8.482 10.4c1.03 0 1.714-.698 1.714-1.476 0-.864-.828-1.188-.828-1.188s.576-.324.576-1.044c0-.684-.648-1.332-1.584-1.332H6.2v5.04h2.282ZM7.28 9.5V8.204h1.152c.396 0 .684.288.684.648 0 .36-.288.648-.684.648H7.28Zm1.008-3.24c.36 0 .576.216.576.54 0 .324-.216.54-.576.54H7.28V6.26h1.008Z"
+    />
+  </Icon>
+));
+
+export default BadgeBitrise;

package/src/Components/Icons/16x16/Bell.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Bell = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M11.045 9.067c-.201-.267-.268-.6-.268-.867V8a2.682 2.682 0 0 0-5.362 0v.133c0 .334-.067.6-.268.867l-1.14 1.667h8.178l-1.14-1.6ZM6.755 4.2V4a1.34 1.34 0 0 1 2.681 0v.2c1.542.533 2.681 2 2.681 3.8v.267l1.14 1.6c.402.6.268 1.4-.335 1.866a1.44 1.44 0 0 1-.805.267h-8.11c-.737 0-1.34-.6-1.34-1.333 0-.267.067-.534.268-.8l1.14-1.6V8c0-1.733 1.139-3.2 2.68-3.8Zm-.67 8.467h4.022C9.906 13.4 9.034 14 8.096 14c-.939 0-1.81-.533-2.01-1.333Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default Bell;

package/src/Components/Icons/16x16/Bitbot.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Bitbot = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      d="M8.1 4.066a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333ZM5.583 8a.915.915 0 0 0-.916.913H6.5A.915.915 0 0 0 5.583 8ZM8 10.667c.736 0 1.333-.597 1.333-1.334H6.667c0 .737.596 1.334 1.333 1.334Zm1.333-1.752a.915.915 0 0 1 1.831 0h-1.83Z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M13.861 6.143c.166.646.397 1.618.55 2.58.105.65.19 1.418.251 2.283.035.482-.139.946-.489 1.306-.35.36-.832.572-1.357.594-1.154.05-2.927.11-4.816.11-1.89 0-3.662-.06-4.816-.11a1.998 1.998 0 0 1-1.358-.594 1.685 1.685 0 0 1-.488-1.306c.062-.864.146-1.633.25-2.283.154-.962.384-1.934.55-2.58.198-.77.908-1.321 1.767-1.37A72.422 72.422 0 0 1 8 4.667c1.857 0 3.252.057 4.095.106.858.049 1.568.6 1.766 1.37Zm-1.843-.04A71.047 71.047 0 0 0 8 6c-1.562 0-2.909.04-4.019.104-.294.017-.502.178-.551.37a27.69 27.69 0 0 0-.526 2.46 25.994 25.994 0 0 0-.237 2.168.355.355 0 0 0 .116.281c.11.113.269.183.458.191 1.537.066 3.165.108 4.759.108 1.594 0 3.222-.042 4.758-.108a.667.667 0 0 0 .459-.191.354.354 0 0 0 .115-.282 25.49 25.49 0 0 0-.237-2.168 27.727 27.727 0 0 0-.525-2.458c-.05-.193-.258-.354-.552-.371Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default Bitbot;

package/src/Components/Icons/16x16/BitbotError.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const BitbotError = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      d="M8.766 3.4a.667.667 0 1 1-1.333 0 .667.667 0 0 1 1.333 0ZM5.333 7.724 4.39 6.78l-.942.943.942.943-.942.942.942.943.943-.943.943.943.943-.943-.943-.942.943-.943-.943-.943-.943.943Zm6.277.943.942.942-.943.943-.942-.943-.943.943-.943-.943.943-.942-.943-.943.943-.943.943.943.942-.943.943.943-.943.943Z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M14.412 8.723a29.617 29.617 0 0 0-.55-2.58c-.199-.77-.909-1.321-1.767-1.37A72.427 72.427 0 0 0 8 4.667c-1.858 0-3.252.057-4.095.106-.859.049-1.569.6-1.767 1.37a29.597 29.597 0 0 0-.55 2.58c-.104.65-.188 1.418-.25 2.283-.035.482.139.946.488 1.306a2 2 0 0 0 1.358.594c1.154.05 2.926.11 4.816.11 1.89 0 3.662-.06 4.816-.11a1.998 1.998 0 0 0 1.357-.594c.35-.36.524-.824.489-1.306a26.83 26.83 0 0 0-.25-2.283ZM8 6a70.7 70.7 0 0 1 4.018.104c.294.017.502.178.552.37.214.833.401 1.684.525 2.46.098.61.178 1.34.237 2.167a.354.354 0 0 1-.115.282.667.667 0 0 1-.459.191A112.19 112.19 0 0 1 8 11.682c-1.594 0-3.222-.042-4.759-.108a.667.667 0 0 1-.458-.191.355.355 0 0 1-.116-.281c.06-.83.14-1.56.237-2.168a27.69 27.69 0 0 1 .526-2.46c.05-.192.257-.353.551-.37A71.041 71.041 0 0 1 8 6Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default BitbotError;

package/src/Components/Icons/16x16/BitbucketBlue.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+import { useIconId } from '../utils';
+
+const BitbucketBlue = forwardRef<IconProps, 'svg'>((props, ref) => {
+  const iconPrefix = useIconId();
+  return (
+    <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+      <path
+        fill="#2684FF"
+        d="M1.766 2a.427.427 0 0 0-.427.496l1.813 11.009a.58.58 0 0 0 .568.484h8.7a.427.427 0 0 0 .428-.358L14.66 2.498a.428.428 0 0 0-.427-.496L1.766 2Zm7.636 7.957H6.625l-.751-3.928h4.201l-.673 3.928Z"
+      />
+      <path
+        fill={`url(#${iconPrefix}__a)`}
+        d="M14.084 6.029h-4.01l-.672 3.928H6.625l-3.279 3.892c.104.09.237.14.374.14h8.702a.427.427 0 0 0 .428-.358l1.234-7.602Z"
+      />
+      <defs>
+        <linearGradient
+          id={`${iconPrefix}__a`}
+          x1={15.011}
+          x2={8.385}
+          y1={7.129}
+          y2={12.3}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0.18} stopColor="#0052CC" />
+          <stop offset={1} stopColor="#2684FF" />
+        </linearGradient>
+      </defs>
+    </Icon>
+  );
+});
+
+export default BitbucketBlue;

package/src/Components/Icons/16x16/BitbucketPlain.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const BitbucketPlain = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M9.402 9.956H6.625l-.752-3.928h4.201l-.672 3.928ZM1.766 2a.427.427 0 0 0-.427.496l1.813 11.008a.58.58 0 0 0 .568.485h8.7a.427.427 0 0 0 .427-.36l1.813-11.13a.427.427 0 0 0-.427-.496L1.766 2Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default BitbucketPlain;

package/src/Components/Icons/16x16/BitbucketShadedWhite.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+import { useIconId } from '../utils';
+
+const BitbucketShadedWhite = forwardRef<IconProps, 'svg'>((props, ref) => {
+  const iconPrefix = useIconId();
+  return (
+    <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M9.402 9.956H6.625l-.752-3.928h4.201l-.672 3.928ZM1.766 2a.427.427 0 0 0-.427.496l1.813 11.008a.58.58 0 0 0 .568.485h8.7a.427.427 0 0 0 .427-.36l1.813-11.13a.427.427 0 0 0-.427-.496L1.766 2Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill={`url(#${iconPrefix}__a)`}
+        fillRule="evenodd"
+        d="m10.061 6-.673 3.928H6.612l-3.279 3.891c.104.09.237.14.374.141h8.712a.428.428 0 0 0 .417-.358L14.094 6H10.06Z"
+        clipRule="evenodd"
+      />
+      <defs>
+        <linearGradient
+          id={`${iconPrefix}__a`}
+          x1={11.127}
+          x2={16.101}
+          y1={15.296}
+          y2={7.24}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" stopOpacity={0.1} />
+          <stop offset={1} stopColor="#184AB8" />
+        </linearGradient>
+      </defs>
+    </Icon>
+  );
+});
+
+export default BitbucketShadedWhite;

package/src/Components/Icons/16x16/Book.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Book = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M10.667 1.333H5.333C4.6 1.333 4 1.963 4 2.733v8.4c0 .77.6 1.4 1.333 1.4h2v2.73l1.267-1.47 1.4 1.54v-2.8h.667c.733 0 1.333-.63 1.333-1.4v-8.4c0-.77-.6-1.4-1.333-1.4Zm0 10h-4V2.667h4v8.666ZM10 4.667H7.333V6H10V4.667Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default Book;