@bitrise/bitkit 9.1.3 → 9.1.6-alpha.1

package/lib/esn/variables.d.ts

@@ -111,8 +111,8 @@ export declare const rgbViolet3: number[];
 export declare const rgbViolet4: number[];
 export declare const rgbViolet5: number[];
 export declare const colorMap: {
-    'white': string;
-    'black': string;
+    white: string;
+    black: string;
     'gray-1': string;
     'gray-2': string;
     'gray-3': string;
@@ -131,7 +131,7 @@ export declare const colorMap: {
     'grape-3': string;
     'grape-4': string;
     'grape-5': string;
-    'eggplant': string;
+    eggplant: string;
     'red-1': string;
     'red-2': string;
     'red-3': string;
@@ -169,8 +169,8 @@ export declare const colorMap: {
     'violet-5': string;
 };
 export declare const rgbMap: {
-    'white': number[];
-    'black': number[];
+    white: number[];
+    black: number[];
     'gray-1': number[];
     'gray-2': number[];
     'gray-3': number[];
@@ -189,7 +189,7 @@ export declare const rgbMap: {
     'grape-3': number[];
     'grape-4': number[];
     'grape-5': number[];
-    'eggplant': number[];
+    eggplant: number[];
     'red-1': number[];
     'red-2': number[];
     'red-3': number[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.1.3",
+  "version": "9.1.6-alpha.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",
@@ -11,7 +11,7 @@
     "build": "yarn build:lib && yarn build:site",
     "build:css": "postcss src/{*.css,**/*.css} --base src",
     "build:docs": "ts-node ./scripts/build-docs",
-    "build:icons": "svgr -d src/Icon/tsx src/Icon/svg --ext tsx",
+    "build:icons": "svgr src/Icon/svg && yarn lint:fix-icons",
     "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 && yarn build:css --dir lib/esn",
     "build:lib:cjs": "tsc -p src --outDir lib/cjs && yarn build:css --dir lib/cjs",
@@ -20,63 +20,74 @@
     "lint": "yarn lint:js && yarn lint:css",
     "lint:css": "stylelint src/**/*.css site/**/*.css",
     "lint:js": "eslint src/**/*.tsx site/**/*.tsx",
+    "lint:fix-icons": "eslint --fix src/Icon/tsx/**",
     "semantic-release": "semantic-release",
     "serve": "superstatic ./dist --port 4001 -c superstatic.json",
-    "start": "rm -rf ./dist && concurrently \"yarn start:docs\" \"yarn start:site\"",
+    "start": "rm -rf ./dist && concurrently \"yarn start:docs\" \"yarn start:site\" \"yarn start:icons\"",
     "start:docs": "ts-node ./scripts/build-docs-watch",
     "start:site": "parcel site/index.html --port 4001 -d dist --no-cache",
+    "start:icons": "chokidar src/Icon/svg/** -c \"yarn svgr {path} && yarn lint:fix-icons\"",
     "test": "jest ./src"
   },
   "alias": {
-    "@bitrise/bitkit": "./src"
+    "@bitrise/bitkit": "./src",
+    "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
-    "clipboard": "^2.0.4",
-    "luxon": "^1.12.1",
+    "@chakra-ui/react": "^1.8.6",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@popperjs/core": "^2.11.2",
+    "classnames": "^2.3.1",
+    "clipboard": "^2.0.10",
+    "framer-motion": "^6",
+    "luxon": "^2.3.1",
     "normalize.css": "^8.0.1",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-popper": "^1.3.3",
-    "react-transition-group": "^2.6.1",
-    "resize-observer-polyfill": "^1.5.1"
+    "react-transition-group": "^4.4.2",
+    "src": "^1.1.2"
   },
   "peerDependencies": {
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
-    "@semantic-release/changelog": "^6.0.0",
-    "@semantic-release/commit-analyzer": "^9.0.1",
-    "@semantic-release/git": "^10.0.0",
-    "@svgr/cli": "^5.5.0",
-    "@types/classnames": "^2.2.7",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@svgr/cli": "^6.2.1",
+    "@types/classnames": "^2.3.0",
     "@types/clipboard": "^2.0.1",
-    "@types/enzyme": "^3.10.3",
-    "@types/jest": "^24.0.11",
+    "@types/enzyme": "^3.10.11",
+    "@types/jest": "^27.4.1",
     "@types/lodash.sample": "^4.2.6",
     "@types/lodash.shuffle": "^4.2.6",
-    "@types/luxon": "^1.12.0",
-    "@types/prismjs": "^1.16.0",
-    "@types/react": "^16.9.5",
-    "@types/react-dom": "^16.9.1",
-    "@types/react-router": "^5.1.1",
-    "@types/react-router-dom": "^5.1.0",
-    "@types/react-transition-group": "^2.0.16",
+    "@types/luxon": "^2.0.9",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.12",
+    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-transition-group": "^4.4.4",
+    "@types/vfile": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^1.4.2",
     "@typescript-eslint/parser": "^1.4.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "autoprefixer": "^9.4.10",
     "babel-eslint": "^10.0.1",
+    "chokidar-cli": "^3.0.0",
     "concurrently": "^4.1.0",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.10.0",
     "enzyme-to-json": "^3.4.0",
     "eslint": "^5.15.1",
-    "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.6.1",
-    "fscreen": "^1.0.2",
+    "eslint-plugin-react": "^7.29.2",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "fscreen": "^1.2.0",
     "husky": "^3.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.4.0",
@@ -87,17 +98,17 @@
     "parcel-bundler": "^1.12.0",
     "postcss-cli": "^6.1.2",
     "postcss-preset-env": "^6.6.0",
-    "prismjs": "^1.16.0",
-    "react-docgen": "5.0.0-beta.1",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "prismjs": "^1.27.0",
+    "react-docgen": "5.4.0",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.2.1",
     "semantic-release": "^18.0.0",
     "stylelint": "^9.2.1",
     "stylelint-order": "^0.8.1",
     "superstatic": "^6.0.4",
     "ts-jest": "^24.0.0",
     "ts-node": "^8.1.0",
-    "typescript": "^3.5.3"
+    "typescript": "^4.6.2"
   },
   "publishConfig": {
     "access": "public"
@@ -117,5 +128,9 @@
     "transform": {
       "\\.tsx?$": "ts-jest"
     }
+  },
+  "resolutions": {
+    "@types/react": "17.0.39",
+    "@types/react-router": "5.1.18"
   }
 }

package/scripts/build-docs.ts

@@ -15,10 +15,10 @@ const exclude = ['Portal'];
 
 const getExportedComponents = (node: ts.Node) => {
   if (node.kind === ts.SyntaxKind.ExportDeclaration) {
-    const decl = node as ts.ExportDeclaration;
+    const decl = node as any;
 
     if (decl.exportClause) {
-      const defaultExport = decl.exportClause.elements.find(({ propertyName }) =>
+      const defaultExport = decl.exportClause.elements.find(({ propertyName }: { propertyName: any}) =>
         !!propertyName && propertyName.getText() === 'default');
 
       if (decl.moduleSpecifier && defaultExport) {

package/site/components/Documentation/Components/SectionButton2.tsx

@@ -0,0 +1,163 @@
+  /* eslint-disable object-shorthand */
+import * as React from 'react';
+import {
+  Base,
+  Button,
+  Buttons,
+  Icon,
+  Tab,
+  Tabs,
+  Text,
+} from '@bitrise/bitkit';
+import CodeBlock from '../../CodeBlock/CodeBlock';
+import Section from '../../Section/Section';
+import SectionSubTitle from '../../Section/SectionSubTitle';
+import Button2 from '../../../../src/Button2/Button2';
+import BitchakraProvider from '../../../../src/chakra/provider';
+
+const SectionButtons = () => {
+  const [selectedTab, setSelectedTab] = React.useState(1);
+
+  return (
+    <BitchakraProvider>
+      <Section>
+        <Tabs gap="x6" margin="x8">
+          <Tab
+              active={ selectedTab === 1 }
+              onClick={ () => setSelectedTab(1) }>
+            Variants & Sizes
+          </Tab>
+
+          <Tab
+              active={ selectedTab === 2 }
+              onClick={ () => setSelectedTab(2) }>
+            With Left & Right Icons
+          </Tab>
+        </Tabs>
+
+        { selectedTab === 1 && (
+        <React.Fragment>
+          <Base margin="x12">
+            <SectionSubTitle>Default Variant Button</SectionSubTitle>
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button2>Primary</Button2>
+              <Button2 disabled size="small" textAlign="right" variant="primary">Disabled</Button2>
+              <Button level="primary" size="medium">Primary</Button>
+              <Button disabled level="primary" size="medium">Disabled</Button>
+              <Button level="primary" size="large">Primary</Button>
+              <Button disabled level="primary" size="large">Disabled</Button>
+            </Buttons>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button level="secondary" size="small">Secondary</Button>
+              <Button disabled level="secondary" size="small">Disabled</Button>
+              <Button level="secondary" size="medium">Secondary</Button>
+              <Button disabled level="secondary" size="medium">Disabled</Button>
+              <Button level="secondary" size="large">Secondary</Button>
+              <Button disabled level="secondary" size="large">Disabled</Button>
+            </Buttons>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button level="tertiary" size="small">Tertiary</Button>
+              <Button disabled level="tertiary" size="small">Disabled</Button>
+              <Button level="tertiary" size="medium">Tertiary</Button>
+              <Button disabled level="tertiary" size="medium">Disabled</Button>
+              <Button level="tertiary" size="large">Tertiary</Button>
+              <Button disabled level="tertiary" size="large">Disabled</Button>
+            </Buttons>
+          </Base>
+
+          <Base margin="x12">
+            <SectionSubTitle>Danger Variant Button</SectionSubTitle>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button level="primary" size="small" variant="danger">Primary</Button>
+              <Button disabled level="primary" size="small" variant="danger">Disabled</Button>
+              <Button level="primary" size="medium" variant="danger">Primary</Button>
+              <Button disabled level="primary" size="medium" variant="danger">Disabled</Button>
+              <Button level="primary" size="large" variant="danger">Primary</Button>
+              <Button disabled level="primary" size="large" variant="danger">Disabled</Button>
+            </Buttons>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button level="secondary" size="small" variant="danger">Secondary</Button>
+              <Button disabled level="secondary" size="small" variant="danger">Disabled</Button>
+              <Button level="secondary" size="medium" variant="danger">Secondary</Button>
+              <Button disabled level="secondary" size="medium" variant="danger">Disabled</Button>
+              <Button level="secondary" size="large" variant="danger">Secondary</Button>
+              <Button disabled level="secondary" size="large" variant="danger">Disabled</Button>
+            </Buttons>
+          </Base>
+
+          <CodeBlock title="Button Usage Example">{
+`const Component = () => (
+  <Buttons>
+    <Button level="secondary">Secondary</Button>
+    <Button level="primary" variant="danger">Danger Action</Button>
+  </Buttons>
+);`
+            }</CodeBlock>
+        </React.Fragment>
+      ) }
+
+        { selectedTab === 2 && (
+        <React.Fragment>
+          <Buttons margin="x4">
+            <Button level="primary" size="large">
+              <Icon name="Group" />
+              <Text>On the left</Text>
+            </Button>
+
+            <Button level="secondary" size="large">
+              <Text>On the right</Text>
+              <Icon name="Group" />
+            </Button>
+          </Buttons>
+
+          <Buttons margin="x4">
+            <Button level="primary">
+              <Icon name="Group" />
+              <Text>On the left</Text>
+            </Button>
+
+            <Button level="secondary">
+              <Text>On the right</Text>
+              <Icon name="Group" />
+            </Button>
+          </Buttons>
+
+          <Buttons margin="x4">
+            <Button level="primary" size="small">
+              <Icon name="Group" />
+              <Text>On the left</Text>
+            </Button>
+
+            <Button level="secondary" size="small">
+              <Text>On the right</Text>
+              <Icon name="Group" />
+            </Button>
+          </Buttons>
+
+          <CodeBlock title="Button with Icon usage example">{
+`const Component = () => (
+  <Buttons>
+    <Button level="primary" size="small">
+      <Icon name="Group" />
+      <Text>On the left</Text>
+    </Button>
+
+    <Button level="secondary" size="small">
+      <Text>On the right</Text>
+      <Icon name="Group" />
+    </Button>
+  </Buttons>
+);`
+            }</CodeBlock>
+        </React.Fragment>
+      ) }
+      </Section>
+    </BitchakraProvider>
+  );
+};
+
+export default SectionButtons;

package/site/components/Documentation/Components/SectionCards.tsx

@@ -19,7 +19,7 @@ const SectionCards = () => {
         <Tab
             active={ selectedTab === 2 }
             onClick={ () => setSelectedTab(2) }>
-         Divided Content
+          Divided Content
         </Tab>
 
         <Tab

package/site/components/Documentation/Documentation.tsx

@@ -59,6 +59,10 @@ const SectionMap = {
       documentation.ButtonWithDropdown,
     ],
   },
+  Button2: {
+    Showcase: require('./Components/SectionButton2').default,
+    components: [],
+  },
   Card: {
     Showcase: require('./Components/SectionCards').default,
     components: [

package/site/components/Documentation/Materials/SectionIcons.tsx

@@ -39,7 +39,7 @@ const SectionIcons = () => {
       <Text>
         All of the Icons below can be achieved with the
         React <Link Component={ RouterLink } color="grape-3" to="/documentation/components/icon">Icon component</Link> and
-         outputs inline SVG for super quality and easy alignment. The SVG
+        outputs inline SVG for super quality and easy alignment. The SVG
         elements uses <code>fill: currentColor;</code> and so inherits the font
         color from it's parent.
       </Text>

package/src/Button2/Button2.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable object-shorthand */
+import * as React from 'react';
+import { Button as ChakraButton, ButtonProps } from '@chakra-ui/react';
+
+interface Props extends ButtonProps {
+    /**
+     * Allows the Button to fill the container space rather than shrinking
+     * down to the content
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary';
+    /**
+     * Sets the size of the Button. Small allows the Button to fit
+     * into smaller spaces, while large will help the button stand
+     * out on a page with lots of space.
+     */
+    size?: 'small' | 'medium';
+}
+
+const Button2 = (props: Props) => {
+  return <ChakraButton { ...props } />;
+};
+
+export default Button2;

package/src/Icon/svg/icons-crown.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3671 2.13171C11.6618 1.66858 12.3379 1.66858 12.6326 2.1317L16.4056 8.06065L20.3342 3.80469C20.8362 3.26078 21.7391 3.69585 21.6265 4.42745L19.9999 15H3.99966L2.37338 4.42732C2.26085 3.69572 3.1637 3.26068 3.66576 3.80458L7.59428 8.06048L11.3671 2.13171ZM6.48359 9.80587L4.9724 8.16874L5.46938 11.3997L6.48359 9.80587ZM6.82159 13L7.88683 11.326L9.43205 13H6.82159ZM8.99752 9.58065L11.9998 4.86265L15.0024 9.58082L12 12.8334L8.99752 9.58065ZM14.568 13L16.1131 11.3262L17.1782 13H14.568ZM17.5163 9.80602L18.5303 11.3995L19.0274 8.16903L17.5163 9.80602Z" fill="#351D48"/>
+<path d="M4.00002 19H20V21H4.00002V19Z" fill="#351D48"/>
+<path d="M20 18C19.4477 18 19 17.5523 19 17C19 16.4477 19.4477 16 20 16V18Z" fill="#351D48"/>
+<path d="M5.00002 17C5.00002 16.4477 4.5523 16 4.00002 16L4.00002 18C4.5523 18 5.00002 17.5523 5.00002 17Z" fill="#351D48"/>
+<path d="M8.00002 18C8.5523 18 9.00002 17.5523 9.00002 17C9.00002 16.4477 8.5523 16 8.00002 16C7.44773 16 7.00002 16.4477 7.00002 17C7.00002 17.5523 7.44773 18 8.00002 18Z" fill="#351D48"/>
+<path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="#351D48"/>
+<path d="M16 18C16.5523 18 17 17.5523 17 17C17 16.4477 16.5523 16 16 16C15.4477 16 15 16.4477 15 17C15 17.5523 15.4477 18 16 18Z" fill="#351D48"/>
+</svg>

package/src/Icon/svg/icons-gauge.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8436 10.4849L15.4294 9.07065L12.5846 11.9154C11.9006 11.707 11.1268 11.8733 10.5858 12.4142C9.80477 13.1953 9.80477 14.4616 10.5858 15.2427C11.3669 16.0237 12.6332 16.0237 13.4142 15.2427C13.9198 14.7371 14.0981 14.0282 13.9492 13.3792L16.8436 10.4849Z" fill="#351D48"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4857 21C22.0564 19.0981 23 16.6593 23 14C23 7.92487 18.0751 3 12 3C5.92487 3 1 7.92487 1 14C1 16.6593 1.94364 19.0981 3.51432 21H20.4857ZM20.9451 15C20.7827 16.4689 20.2668 17.8312 19.4845 19H4.51555C3.73316 17.8312 3.2173 16.4689 3.05493 15H5V13H3.05493C3.24682 11.2642 3.93237 9.67711 4.96807 8.38235L6.41415 9.82843L7.82837 8.41421L6.38228 6.96813C7.67705 5.93239 9.26413 5.24682 11 5.05493V7H13V5.05493C14.6932 5.2421 16.2449 5.899 17.5218 6.89243L16.2718 8.14235L17.6861 9.55656L18.9551 8.28756C20.0337 9.59931 20.7485 11.2216 20.9451 13H19V15H20.9451Z" fill="#351D48"/>
+</svg>

package/src/Icon/svg/icons-pencil.svg

@@ -1,3 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="#492F5C" fill-rule="evenodd" d="M8.8 15.362l.7.69L18 7.665l-.7-.69-8.5 8.388zm-2.8 0l9.9-9.77c.8-.79 2-.79 2.8 0l.7.69c.8.79.8 1.975 0 2.764l-9.9 9.77L6 15.362zM5 20v-2.96L8 20H5z"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20L20 20L20 10H22L22 20C22 21.1046 21.1046 22 20 22L4 22C2.89543 22 2 21.1046 2 20V4C2 2.89543 2.89543 2 4 2H14V4L4 4L4 20Z" fill="#351D48"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9 3.59211L7 13.3618L10.5 16.8158L20.4 7.04605C21.2 6.25658 21.2 5.07237 20.4 4.2829L19.7 3.59211C18.9 2.80263 17.7 2.80263 16.9 3.59211ZM10.5 14.0526L9.8 13.3618L18.3 4.97369L19 5.66447L10.5 14.0526Z" fill="#351D48"/>
+<path d="M6 15.0395V18H9L6 15.0395Z" fill="#351D48"/>
 </svg>

package/src/Icon/tsx/IconsAddOns.tsx

@@ -1,10 +1,13 @@
-import * as React from "react";
-export default (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
+// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
+import * as React from 'react';
+
+const SvgIconsAddOns = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg { ...props } viewBox="0 0 24 24">
     <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M20 17.767a.502.502 0 01-.25.434l-3.001 1.732a.5.5 0 01-.499-.001l-2.999-1.73a.504.504 0 01-.251-.435V14.15c0-.178.096-.343.248-.432l.002-.001 3-1.732.001-.001a.503.503 0 01.499 0l2.999 1.73c.155.09.251.257.251.436v3.616zm-9.25.434l-3.001 1.732a.5.5 0 01-.499-.001l-2.999-1.73A.504.504 0 014 17.767V14.15c0-.18.096-.345.25-.434l3.001-1.732a.503.503 0 01.499 0l3 1.733h.002c.153.09.248.255.248.433v3.616a.502.502 0 01-.25.434zM8.5 6.23c0-.178.096-.344.25-.433l3.001-1.732a.503.503 0 01.499 0l2.999 1.73c.155.09.251.257.251.436V9.82a.501.501 0 01-.25.432l-3.001 1.733h-.001a.496.496 0 01-.496 0l-.002-.001-2.108-1.217-.892-.515a.501.501 0 01-.25-.432V6.23zm12.25 5.754l-2.999-1.731c-.093-.053-.195-.08-.293-.121.014-.104.042-.206.042-.312V6.23a2.51 2.51 0 00-1.25-2.165l-2.999-1.731a2.505 2.505 0 00-2.501-.001L7.749 4.067A2.51 2.51 0 006.5 6.232V9.82c0 .106.028.208.042.312-.098.04-.199.067-.292.12l-3.001 1.733A2.51 2.51 0 002 14.15v3.616c0 .89.479 1.719 1.25 2.166l2.999 1.73a2.49 2.49 0 001.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732c.092-.054.165-.128.249-.192.084.064.157.139.25.193l2.999 1.73a2.49 2.49 0 001.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732A2.51 2.51 0 0022 17.767V14.15c0-.89-.479-1.72-1.25-2.166z"
-    />
+        d="M20 17.767a.502.502 0 0 1-.25.434l-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73a.504.504 0 0 1-.251-.435V14.15c0-.178.096-.343.248-.432l.002-.001 3-1.732.001-.001a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436v3.616zm-9.25.434-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73A.504.504 0 0 1 4 17.767V14.15c0-.18.096-.345.25-.434l3.001-1.732a.503.503 0 0 1 .499 0l3 1.733h.002c.153.09.248.255.248.433v3.616a.502.502 0 0 1-.25.434zM8.5 6.23c0-.178.096-.344.25-.433l3.001-1.732a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436V9.82a.501.501 0 0 1-.25.432l-3.001 1.733h-.001a.496.496 0 0 1-.496 0l-.002-.001-2.108-1.217-.892-.515a.501.501 0 0 1-.25-.432V6.23zm12.25 5.754-2.999-1.731c-.093-.053-.195-.08-.293-.121.014-.104.042-.206.042-.312V6.23a2.51 2.51 0 0 0-1.25-2.165l-2.999-1.731a2.505 2.505 0 0 0-2.501-.001L7.749 4.067A2.51 2.51 0 0 0 6.5 6.232V9.82c0 .106.028.208.042.312-.098.04-.199.067-.292.12l-3.001 1.733A2.51 2.51 0 0 0 2 14.15v3.616c0 .89.479 1.719 1.25 2.166l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732c.092-.054.165-.128.249-.192.084.064.157.139.25.193l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732A2.51 2.51 0 0 0 22 17.767V14.15c0-.89-.479-1.72-1.25-2.166z"
+        fill="currentColor"
+        fillRule="evenodd"/>
   </svg>
 );
+
+export default SvgIconsAddOns;

package/src/Icon/tsx/IconsAddOnsColorTuorqouise.tsx

@@ -1,16 +1,20 @@
-import * as React from "react";
-export default (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
+// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
+import * as React from 'react';
+
+const SvgIconsAddOnsColorTuorqouise = (
+  props: React.SVGProps<SVGSVGElement>
+) => (
+  <svg { ...props } viewBox="0 0 24 24">
     <g fill="#0DD3C5" fillRule="evenodd">
       <path
-        d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 01-1.998 0l-3-1.741A2.015 2.015 0 012 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
-        opacity={0.8}
-      />
+          d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
+          opacity={ 0.8 }/>
       <path
-        d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 01-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0122 14.595"
-        opacity={0.5}
-      />
-      <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 011.001-1.741l3-1.742a1.992 1.992 0 011.998 0l3 1.742A2.012 2.012 0 0117 5.753" />
+          d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
+          opacity={ 0.5 }/>
+      <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
     </g>
   </svg>
 );
+
+export default SvgIconsAddOnsColorTuorqouise;

package/src/Icon/tsx/IconsAddOnsColorViolet.tsx

@@ -1,16 +1,18 @@
-import * as React from "react";
-export default (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
+// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
+import * as React from 'react';
+
+const SvgIconsAddOnsColorViolet = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg { ...props } viewBox="0 0 24 24">
     <g fill="#990FC3" fillRule="evenodd">
       <path
-        d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 01-1.998 0l-3-1.741A2.015 2.015 0 012 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
-        opacity={0.8}
-      />
+          d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
+          opacity={ 0.8 }/>
       <path
-        d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 01-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0122 14.595"
-        opacity={0.5}
-      />
-      <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 011.001-1.741l3-1.742a1.992 1.992 0 011.998 0l3 1.742A2.012 2.012 0 0117 5.753" />
+          d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
+          opacity={ 0.5 }/>
+      <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
     </g>
   </svg>
 );
+
+export default SvgIconsAddOnsColorViolet;

package/src/Icon/tsx/IconsAddOnsWhite.tsx

@@ -1,16 +1,18 @@
-import * as React from "react";
-export default (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
+// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
+import * as React from 'react';
+
+const SvgIconsAddOnsWhite = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg { ...props } viewBox="0 0 24 24">
     <g fill="#FFF" fillRule="evenodd">
       <path
-        d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 01-1.998 0l-3-1.741A2.015 2.015 0 012 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
-        opacity={0.8}
-      />
+          d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
+          opacity={ 0.8 }/>
       <path
-        d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 01-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0122 14.595"
-        opacity={0.5}
-      />
-      <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 011.001-1.741l3-1.742a1.992 1.992 0 011.998 0l3 1.742A2.012 2.012 0 0117 5.753" />
+          d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
+          opacity={ 0.5 }/>
+      <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
     </g>
   </svg>
 );
+
+export default SvgIconsAddOnsWhite;

package/src/Icon/tsx/IconsApp.tsx

@@ -1,12 +1,15 @@
-import * as React from "react";
-export default (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
+// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
+import * as React from 'react';
+
+const SvgIconsApp = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg { ...props } viewBox="0 0 24 24">
     <defs>
       <path
-        id="icons-app_svg__a"
-        d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 10c0 .7-.2 1.4-.6 2l-2-2 2-2c.4.6.6 1.3.6 2zm-8 0c0-.7.2-1.4.6-2l2 2-2 2c-.4-.6-.6-1.3-.6-2zm2-3.4c.6-.4 1.3-.6 2-.6s1.4.2 2 .6l-2 2-2-2zm2 4.8l2 2c-.6.4-1.3.6-2 .6s-1.4-.2-2-.6l2-2zm3.5-6.3C14.5 6.4 13.3 6 12 6c-1.3 0-2.5.4-3.5 1.1L5.4 4h13.2l-3.1 3.1zM7.1 8.5C6.4 9.5 6 10.7 6 12c0 1.3.4 2.5 1.1 3.5L4 18.6V5.4l3.1 3.1zm1.4 8.4c1 .7 2.2 1.1 3.5 1.1 1.3 0 2.5-.4 3.5-1.1l3.1 3.1H5.4l3.1-3.1zm8.4-1.4c.7-1 1.1-2.2 1.1-3.5 0-1.3-.4-2.5-1.1-3.5L20 5.4v13.2l-3.1-3.1z"
-      />
+          d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 10c0 .7-.2 1.4-.6 2l-2-2 2-2c.4.6.6 1.3.6 2zm-8 0c0-.7.2-1.4.6-2l2 2-2 2c-.4-.6-.6-1.3-.6-2zm2-3.4c.6-.4 1.3-.6 2-.6s1.4.2 2 .6l-2 2-2-2zm2 4.8 2 2c-.6.4-1.3.6-2 .6s-1.4-.2-2-.6l2-2zm3.5-6.3C14.5 6.4 13.3 6 12 6c-1.3 0-2.5.4-3.5 1.1L5.4 4h13.2l-3.1 3.1zM7.1 8.5C6.4 9.5 6 10.7 6 12c0 1.3.4 2.5 1.1 3.5L4 18.6V5.4l3.1 3.1zm1.4 8.4c1 .7 2.2 1.1 3.5 1.1 1.3 0 2.5-.4 3.5-1.1l3.1 3.1H5.4l3.1-3.1zm8.4-1.4c.7-1 1.1-2.2 1.1-3.5 0-1.3-.4-2.5-1.1-3.5L20 5.4v13.2l-3.1-3.1z"
+          id="icons-app_svg__a"/>
     </defs>
     <use fill="currentColor" fillRule="evenodd" xlinkHref="#icons-app_svg__a" />
   </svg>
 );
+
+export default SvgIconsApp;

package/src/Icon/tsx/IconsArrowBack.tsx

@@ -1,10 +1,13 @@
-import * as React from "react";
-export default (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
+// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
+import * as React from 'react';
+
+const SvgIconsArrowBack = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg { ...props } viewBox="0 0 24 24">
     <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M5.615 11h8.199v2H5.642l3.23 3.23-1.415 1.414L1.8 11.987 7.457 6.33 8.87 7.744 5.615 11zm16.199 0v2h-2v-2h2zm-3 0v2h-4v-2h4z"
-    />
+        d="M5.615 11h8.199v2H5.642l3.23 3.23-1.415 1.414L1.8 11.987 7.457 6.33 8.87 7.744 5.615 11zm16.199 0v2h-2v-2h2zm-3 0v2h-4v-2h4z"
+        fill="currentColor"
+        fillRule="evenodd"/>
   </svg>
 );
+
+export default SvgIconsArrowBack;