@devtron-labs/devtron-fe-common-lib 0.0.55-beta-1 → 0.0.55

package/package.json

@@ -1,13 +1,17 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.55-beta-1",
+    "version": "0.0.55",
     "description": "Supporting common component library",
-    "type": "module",
     "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "files": [
-        "dist"
-    ],
+    "scripts": {
+        "prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
+        "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
+        "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
+        "test": "exit 0",
+        "build-lib": "rollup -c --bundleConfigAsCjs",
+        "build-watch": "rollup -c --bundleConfigAsCjs -w",
+        "lint-staged": "lint-staged"
+    },
     "repository": {
         "type": "git",
         "url": "https://github.com/devtron-labs/devtron-fe-common-lib.git"
@@ -18,34 +22,18 @@
         "url": "https://github.com/devtron-labs/devtron-fe-common-lib/issues"
     },
     "homepage": "https://github.com/devtron-labs/devtron-fe-common-lib#readme",
-    "sideEffects": [
-        "**/*.css"
-    ],
-    "scripts": {
-        "prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
-        "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
-        "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
-        "test": "exit 0",
-        "dev": "vite",
-        "build-lib": "tsc --p ./tsconfig-build.json && vite build",
-        "preview": "vite preview",
-        "lint-staged": "lint-staged"
-    },
     "devDependencies": {
-        "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-babel": "^6.0.3",
+        "@rollup/plugin-commonjs": "24.0.1",
         "@rollup/plugin-image": "3.0.1",
-        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-node-resolve": "^15.0.1",
         "@rollup/plugin-url": "8.0.1",
         "@sentry/browser": "^7.31.1",
         "@svgr/rollup": "6.5.1",
-        "@testing-library/jest-dom": "^5.16.2",
-        "@testing-library/react": "^12.1.4",
         "@tippyjs/react": "^4.2.0",
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
-        "@vitejs/plugin-react": "^4.0.3",
         "@typescript-eslint/eslint-plugin": "^6.17.0",
         "@typescript-eslint/parser": "^6.17.0",
         "eslint": "^8.56.0",
@@ -58,10 +46,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^7.0.4",
         "lint-staged": "^12.5.0",
-        "glob": "^10.3.3",
         "moment": "^2.29.4",
-        "monaco-editor": "0.39.0",
-        "monaco-yaml": "4.0.4",
         "prettier": "^3.1.1",
         "react-select": "5.2.2",
         "react-toastify": "^8.2.0",
@@ -70,12 +55,7 @@
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-typescript2": "^0.34.1",
-        "typescript": "^4.9.4",
-        "vite": "^4.4.5",
-        "vite-plugin-dts": "^3.5.1",
-        "vite-plugin-lib-inject-css": "^1.2.0",
-        "vite-plugin-svgr": "^2.4.0",
-        "vite-tsconfig-paths": "^4.2.0"
+        "typescript": "^4.9.4"
     },
     "peerDependencies": {
         "@rjsf/core": "^5.13.3",
@@ -88,7 +68,6 @@
         "react-draggable": "^4.4.5"
     },
     "dependencies": {
-        "react-monaco-editor": "^0.54.0",
         "fast-json-patch": "^3.1.1",
         "jsonpath-plus": "^7.2.0",
         "sass": "^1.56.2",

package/rollup.config.js

@@ -0,0 +1,31 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import resolve from '@rollup/plugin-node-resolve'
+import typescript from 'rollup-plugin-typescript2'
+import postcss from 'rollup-plugin-postcss'
+import { babel } from '@rollup/plugin-babel'
+import del from 'rollup-plugin-delete'
+import pkg from './package.json'
+import svgr from '@svgr/rollup'
+import url from '@rollup/plugin-url'
+import commonjs from '@rollup/plugin-commonjs'
+
+export default {
+    input: './src/index.ts',
+    output: [{ file: pkg.main, format: 'cjs' }],
+    plugins: [
+        peerDepsExternal(),
+        resolve(),
+        commonjs(),
+        typescript(),
+        postcss({
+            extensions: ['.css'],
+        }),
+        babel({
+            exclude: 'node_modules/**',
+        }),
+        del({ targets: ['dist/*'] }),
+        url({limit: '100000'}),
+        svgr({ icon: true })
+    ],
+    external: Object.keys(pkg.peerDependencies || {}),
+}

package/src/Assets/Icon/ic-add.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path class="fill-color" fill="#999" fill-rule="nonzero" d="M18 13h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5V6a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/>
+</svg>

package/src/Assets/Icon/ic-appstatus-cancelled.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="24" height="24">
+    <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+        <rect width="20" height="20" fill="#B1B7BC" rx="10"/>
+        <path fill="#FFF" fill-rule="nonzero" d="M6.464 6.464a1 1 0 0 1 1.415 0l2.12 2.12 2.122-2.12a1 1 0 0 1 1.32-.083l.095.083a1 1 0 0 1 0 1.415l-2.122 2.12 2.122 2.122a1 1 0 0 1 .083 1.32l-.083.095a1 1 0 0 1-1.415 0L10 11.414l-2.121 2.122a1 1 0 0 1-1.32.083l-.095-.083a1 1 0 0 1 0-1.415L8.584 10l-2.12-2.121a1 1 0 0 1-.083-1.32z"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-arrow-counter-clockwise.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.74216 4.67419H1.49216V2.42419" fill="#767D84"/>
+    <path d="M3.74216 4.67419H1.49216V2.42419" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M3.08318 8.91682C3.66007 9.49371 4.39507 9.88658 5.19525 10.0457C5.99542 10.2049 6.82482 10.1232 7.57856 9.811C8.33231 9.49879 8.97654 8.97008 9.42981 8.29173C9.88307 7.61338 10.125 6.81585 10.125 6C10.125 5.18415 9.88307 4.38663 9.42981 3.70827C8.97654 3.02992 8.33231 2.50121 7.57856 2.189C6.82482 1.87679 5.99542 1.7951 5.19525 1.95426C4.39507 2.11343 3.66007 2.50629 3.08318 3.08319L1.49219 4.67418" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Icon/ic-check.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path stroke="#06C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.898 12.564l4.95 4.95L19.455 6.906"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-chevron-down.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#999" class="fill-color" fill-rule="nonzero" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-copy.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="#767D84" fill-rule="evenodd" d="M15.833 6.917a2.5 2.5 0 0 1 2.5 2.5v6.416a2.5 2.5 0 0 1-2.5 2.5H9.417a2.5 2.5 0 0 1-2.5-2.5V9.417a2.5 2.5 0 0 1 2.5-2.5zm0 1.666H9.417a.833.833 0 0 0-.834.834v6.416c0 .46.373.834.834.834h6.416c.46 0 .834-.373.834-.834V9.417a.833.833 0 0 0-.834-.834zM10.75 1.667c1.24 0 2.256.968 2.33 2.19l.003.143v.75a.833.833 0 0 1-1.66.097l-.006-.097V4c0-.34-.255-.62-.583-.661l-.084-.006H4c-.34 0-.62.255-.661.583L3.333 4v6.75c0 .34.255.62.583.661l.084.006h.75a.833.833 0 0 1 .097 1.66l-.097.006H4a2.333 2.333 0 0 1-2.33-2.19l-.003-.143V4c0-1.24.968-2.256 2.19-2.33L4 1.668h6.75z"/>
+</svg>

package/src/Assets/Icon/ic-cross.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2803 5.78033C19.5732 5.48744 19.5732 5.01256 19.2803 4.71967C18.9874 4.42678 18.5126 4.42678 18.2197 4.71967L19.2803 5.78033ZM4.71967 18.2197C4.42678 18.5126 4.42678 18.9874 4.71967 19.2803C5.01256 19.5732 5.48744 19.5732 5.78033 19.2803L4.71967 18.2197ZM18.2197 19.2803C18.5126 19.5732 18.9874 19.5732 19.2803 19.2803C19.5732 18.9874 19.5732 18.5126 19.2803 18.2197L18.2197 19.2803ZM5.78033 4.71967C5.48744 4.42678 5.01256 4.42678 4.71967 4.71967C4.42678 5.01256 4.42678 5.48744 4.71967 5.78033L5.78033 4.71967ZM18.2197 4.71967L11.4697 11.4697L12.5303 12.5303L19.2803 5.78033L18.2197 4.71967ZM11.4697 11.4697L4.71967 18.2197L5.78033 19.2803L12.5303 12.5303L11.4697 11.4697ZM19.2803 18.2197L12.5303 11.4697L11.4697 12.5303L18.2197 19.2803L19.2803 18.2197ZM12.5303 11.4697L5.78033 4.71967L4.71967 5.78033L11.4697 12.5303L12.5303 11.4697Z" fill="#596168"/>
+</svg>

package/src/Assets/Icon/ic-drag.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3335 9.33325C10.8858 9.33325 11.3335 8.88554 11.3335 8.33325C11.3335 7.78097 10.8858 7.33325 10.3335 7.33325C9.78121 7.33325 9.3335 7.78097 9.3335 8.33325C9.3335 8.88554 9.78121 9.33325 10.3335 9.33325Z" fill="#596168"/>
+<path d="M5.66675 9.33325C6.21903 9.33325 6.66675 8.88554 6.66675 8.33325C6.66675 7.78097 6.21903 7.33325 5.66675 7.33325C5.11446 7.33325 4.66675 7.78097 4.66675 8.33325C4.66675 8.88554 5.11446 9.33325 5.66675 9.33325Z" fill="#596168"/>
+<path d="M10.3335 5.33325C10.8858 5.33325 11.3335 4.88554 11.3335 4.33325C11.3335 3.78097 10.8858 3.33325 10.3335 3.33325C9.78121 3.33325 9.3335 3.78097 9.3335 4.33325C9.3335 4.88554 9.78121 5.33325 10.3335 5.33325Z" fill="#596168"/>
+<path d="M5.66675 5.33325C6.21903 5.33325 6.66675 4.88554 6.66675 4.33325C6.66675 3.78097 6.21903 3.33325 5.66675 3.33325C5.11446 3.33325 4.66675 3.78097 4.66675 4.33325C4.66675 4.88554 5.11446 5.33325 5.66675 5.33325Z" fill="#596168"/>
+<path d="M10.3335 13.3333C10.8858 13.3333 11.3335 12.8855 11.3335 12.3333C11.3335 11.781 10.8858 11.3333 10.3335 11.3333C9.78121 11.3333 9.3335 11.781 9.3335 12.3333C9.3335 12.8855 9.78121 13.3333 10.3335 13.3333Z" fill="#596168"/>
+<path d="M5.66675 13.3333C6.21903 13.3333 6.66675 12.8855 6.66675 12.3333C6.66675 11.781 6.21903 11.3333 5.66675 11.3333C5.11446 11.3333 4.66675 11.781 4.66675 12.3333C4.66675 12.8855 5.11446 13.3333 5.66675 13.3333Z" fill="#596168"/>
+</svg>

package/src/Assets/Icon/ic-enter.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 4C12.4899 4 12.3203 4.07024 12.1953 4.19526C12.0703 4.32029 12.0001 4.48986 12.0001 4.66667V7.33333C12.0001 7.51014 11.9298 7.67971 11.8048 7.80474C11.6798 7.92976 11.5102 8 11.3334 8H4.94005L5.80672 7.14C5.93226 7.01446 6.00278 6.8442 6.00278 6.66667C6.00278 6.48913 5.93226 6.31887 5.80672 6.19333C5.68118 6.0678 5.51092 5.99727 5.33339 5.99727C5.15585 5.99727 4.98559 6.0678 4.86005 6.19333L2.86005 8.19333C2.79936 8.25674 2.75178 8.3315 2.72005 8.41333C2.65337 8.57564 2.65337 8.75769 2.72005 8.92C2.75178 9.00183 2.79936 9.0766 2.86005 9.14L4.86005 11.14C4.92203 11.2025 4.99576 11.2521 5.077 11.2859C5.15824 11.3198 5.24538 11.3372 5.33339 11.3372C5.42139 11.3372 5.50853 11.3198 5.58977 11.2859C5.67101 11.2521 5.74474 11.2025 5.80672 11.14C5.86921 11.078 5.9188 11.0043 5.95265 10.9231C5.98649 10.8418 6.00392 10.7547 6.00392 10.6667C6.00392 10.5787 5.98649 10.4915 5.95265 10.4103C5.9188 10.329 5.86921 10.2553 5.80672 10.1933L4.94005 9.33333H11.3334C11.8638 9.33333 12.3725 9.12262 12.7476 8.74755C13.1227 8.37247 13.3334 7.86377 13.3334 7.33333V4.66667C13.3334 4.48986 13.2631 4.32029 13.1381 4.19526C13.0131 4.07024 12.8435 4 12.6667 4Z" fill="#3B444C"/>
+</svg>

package/src/Assets/Icon/ic-error-cross.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(2.667 2.667)">
+            <rect width="26.667" height="26.667" class="fill-color" fill="#596168" rx="13.333"/>
+            <path fill="#FFF" fill-rule="nonzero" d="M8.62 8.62c.52-.521 1.364-.521 1.885 0l2.828 2.827 2.829-2.828a1.334 1.334 0 0 1 1.777-.097l.108.097c.521.521.521 1.365 0 1.886l-2.828 2.828 2.828 2.829c.486.486.519 1.254.098 1.777l-.098.108c-.52.521-1.365.521-1.885 0l-2.83-2.828-2.827 2.828a1.334 1.334 0 0 1-1.777.098l-.109-.098a1.333 1.333 0 0 1 0-1.885l2.828-2.83-2.828-2.827a1.334 1.334 0 0 1-.097-1.777z"/>
+        </g>
+    </g>
+</svg>

package/src/Assets/Icon/ic-error-exclamation.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FFF" d="M5 5H15V15H5z"/>
+        <path fill="#F33E3E" d="M10 18.333c-4.6 0-8.333-3.733-8.333-8.333S5.4 1.667 10 1.667 18.333 5.4 18.333 10 14.6 18.333 10 18.333zm0-12.5c-.46 0-.833.373-.833.834V10c0 .46.373.833.833.833.46 0 .833-.373.833-.833V6.667c0-.46-.373-.834-.833-.834zm0 6.667c-.46 0-.833.373-.833.833 0 .46.373.834.833.834.46 0 .833-.373.833-.834 0-.46-.373-.833-.833-.833z"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-error-medium.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FDE7E7" stroke="#F33E3E" stroke-linejoin="round" stroke-width="2" d="M10 1.667C5.4 1.667 1.667 5.4 1.667 10S5.4 18.333 10 18.333 18.333 14.6 18.333 10 14.6 1.667 10 1.667z"/>
+        <path fill="#F33E3E" d="M10 10.833c.46 0 .833-.373.833-.833V6.667c0-.46-.373-.834-.833-.834-.46 0-.833.373-.833.834V10c0 .46.373.833.833.833zm0 3.334c.46 0 .833-.373.833-.834 0-.46-.373-.833-.833-.833-.46 0-.833.373-.833.833 0 .46.373.834.833.834z"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-help-outline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16">
+    <path fill="#767D84" fill-rule="evenodd" d="M9 1.333c3.682 0 6.667 2.985 6.667 6.667S12.682 14.667 9 14.667 2.333 11.682 2.333 8 5.318 1.333 9 1.333zm0 1.334C6.054 2.667 3.667 5.054 3.667 8S6.054 13.333 9 13.333 14.333 10.946 14.333 8 11.946 2.667 9 2.667zm-.137 7.245c.41 0 .747.337.747.747s-.337.747-.747.747-.747-.336-.747-.747c0-.41.338-.747.747-.747zm.046-5.245c1.166 0 2.313.537 2.313 1.82 0 1.185-1.357 1.64-1.648 2.068-.22.319-.146.766-.747.766-.392 0-.583-.319-.583-.61 0-1.085 1.593-1.33 1.593-2.223 0-.492-.327-.783-.873-.783-1.166 0-.711 1.202-1.594 1.202-.319 0-.592-.191-.592-.556 0-.893 1.02-1.684 2.13-1.684z"/>
+</svg>

package/src/Assets/Icon/ic-help.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#767D84" fill-rule="evenodd" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm-.205 12.868c-.615 0-1.12.505-1.12 1.12 0 .617.505 1.121 1.12 1.121.615 0 1.12-.504 1.12-1.12 0-.616-.506-1.12-1.12-1.12zM11.863 7c-1.667 0-3.197 1.187-3.196 2.527 0 .546.41.833.888.833 1.325 0 .642-1.803 2.39-1.803.82 0 1.311.438 1.311 1.175 0 1.34-2.39 1.708-2.39 3.334 0 .438.287.915.874.915.902 0 .792-.67 1.12-1.148.438-.642 2.473-1.325 2.473-3.101 0-1.927-1.721-2.732-3.47-2.732z"/>
+</svg>

package/src/Assets/Icon/ic-info-filled.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h32v32H0z"/>
+        <path fill="#06C" d="M16 2.667C8.64 2.667 2.667 8.64 2.667 16S8.64 29.333 16 29.333 29.333 23.36 29.333 16 23.36 2.667 16 2.667z"/>
+        <path fill="#FFF" d="M16 14.667c.736 0 1.333.597 1.333 1.333v5.333a1.333 1.333 0 1 1-2.666 0V16c0-.736.597-1.333 1.333-1.333zm0-5.334A1.333 1.333 0 1 1 16 12a1.333 1.333 0 0 1 0-2.667z"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-info-outlined.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#06C">
+            <g>
+                <g>
+                    <g>
+                        <path d="M10 1.667c4.6 0 8.333 3.733 8.333 8.333S14.6 18.333 10 18.333 1.667 14.6 1.667 10 5.4 1.667 10 1.667zm0 1.666C6.32 3.333 3.333 6.32 3.333 10c0 3.68 2.987 6.667 6.667 6.667 3.68 0 6.667-2.987 6.667-6.667 0-3.68-2.987-6.667-6.667-6.667zm0 5.834c.46 0 .833.373.833.833v3.333c0 .46-.373.834-.833.834-.46 0-.833-.373-.833-.834V10c0-.46.373-.833.833-.833zm0-3.334c.46 0 .833.373.833.834 0 .46-.373.833-.833.833-.46 0-.833-.373-.833-.833 0-.46.373-.834.833-.834z" transform="translate(-315.000000, -313.000000) translate(303.000000, 256.000000) translate(4.000000, 49.000000) translate(8.000000, 8.000000)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/Assets/Icon/ic-minus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path fill="#959BA1" class="fill-color" fill-rule="evenodd" d="M10.5 7.583h-7c-.322 0-.583-.26-.583-.583 0-.322.26-.583.583-.583h7c.322 0 .583.26.583.583 0 .322-.26.583-.583.583z"/>
+</svg>

package/src/Assets/Icon/ic-pencil.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.625 4.99991L15 9.37491M7.5 16.8749H3.75C3.58424 16.8749 3.42527 16.8091 3.30806 16.6918C3.19085 16.5746 3.125 16.4157 3.125 16.2499V12.7588C3.125 12.6767 3.14117 12.5954 3.17258 12.5196C3.20398 12.4438 3.25002 12.3749 3.30806 12.3168L12.6831 2.94185C12.8003 2.82464 12.9592 2.75879 13.125 2.75879C13.2908 2.75879 13.4497 2.82464 13.5669 2.94185L17.0581 6.43296C17.1753 6.55017 17.2411 6.70915 17.2411 6.87491C17.2411 7.04067 17.1753 7.19964 17.0581 7.31685L7.5 16.8749Z" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Icon/ic-progressing.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
+    <g fill="none" fillRule="evenodd" strokeLinecap="round">
+        <animateTransform attributeName="transform" attributeType="XML" dur="0.5s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate" />
+        <path fill="#06C" fillRule="nonzero" d="M12 2.5A9.5 9.5 0 1 1 2.5 12a1.5 1.5 0 0 1 3 0A6.5 6.5 0 1 0 12 5.5a1.5 1.5 0 0 1 0-3z" />
+    </g>
+</svg>

package/src/Assets/Icon/ic-rotate-devtron.svg

@@ -0,0 +1,103 @@
+
+<svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+  .svg__loader_group-top {
+    animation: top-shape 1.2s infinite;
+    transform-origin: center center;
+  }
+  .svg__loader_group-bottom {
+    animation: bottom-shape 1.2s infinite;
+    transform-origin: center center;
+  }
+
+  .svg__loader_shapepath-top {
+    animation: path-fill 1.2s infinite;
+    }
+  .svg__loader_shapepath-bottom {
+    animation: path-fill 1.2s infinite;
+    }
+
+  .svg__loader_rotating-group {
+    animation: rotate-group 1.2s infinite reverse;
+    transform-origin: center center;
+    }
+
+  @keyframes path-fill {
+    0% {
+      fill: #3989D9;
+    }
+    30% {
+      fill: #3989D9;
+    }
+    45% {
+      fill: #ABCFF3;
+    }
+    100% {
+      fill: #3989D9;
+    }
+  }
+
+  @keyframes top-shape {
+    0% {
+      transform: translateX(0px) translateY(0px) rotate(0deg);
+      transform-origin: center center;
+    }
+    30% {
+      transform: translateX(0px) translateY(0px) rotate(10deg);
+      transform-origin: center center;
+    }
+    45% {
+      transform: translateX(-6px) translateY(-6px) rotate(15deg);
+      transform-origin: center center;
+    }
+      
+    100% {
+      transform: translateX(0px) translateY(0px) rotate(0deg);
+      transform-origin: center center;
+    }
+  }
+
+  @keyframes bottom-shape {
+    0% {
+      transform: translateX(0px) translateY(0px) rotate(0deg);
+      transform-origin: center center;
+    }
+    30% {
+      transform: translateX(0px) translateY(0px) rotate(10deg);
+      transform-origin: center center;
+    }
+    45% {
+      transform: translateX(6px) translateY(6px) rotate(15deg);
+      transform-origin: center center;
+    }
+      
+    100% {
+      transform: translateX(0px) translateY(0px) rotate(0deg);
+      transform-origin: center center;
+    }
+  }
+  
+  @keyframes rotate-group {
+    0% {
+      transform: rotate(0deg);
+    }
+    44% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+      animation-timing-function: ease-in-out;
+    }
+  }
+  </style>
+<rect width="100" height="100" rx="20" fill="#E5F2FF"/>
+<g class="svg__loader_rotating-group">
+
+  <g class="svg__loader_group-top">
+    <path class="svg__loader_shapepath-top" d="M59.8584 21.95L38.6084 21.875C36.8042 21.8667 35.1292 22.8125 34.1792 24.3667L19.4625 48.5167C18.9899 49.293 18.7427 50.1855 18.7486 51.0943C18.7545 52.0031 19.0132 52.8924 19.4958 53.6625L30.9125 71.8792C31.2183 72.533 31.7308 73.0679 32.3709 73.4015C33.011 73.7351 33.7431 73.8488 34.4542 73.725C35.141 73.5973 35.7703 73.2572 36.2533 72.7525C36.7362 72.2478 37.0485 71.6042 37.1459 70.9125C37.2338 70.2725 37.143 69.6207 36.8834 69.0292L36.8334 68.9458C36.7375 68.7458 36.6167 68.5583 36.4875 68.3833L35.1958 66.3083L28.3458 55.3583C27.9912 54.8612 27.7883 54.2719 27.7617 53.6618C27.735 53.0517 27.8858 52.447 28.1958 51.9208C30.175 48.5958 34.5125 41.5042 35.4875 40.3458C35.854 40.0077 36.2862 39.7489 36.7572 39.5854C37.2282 39.4219 37.7279 39.3574 38.225 39.3958L43.6208 39.8125C43.8939 39.8472 44.1535 39.951 44.3752 40.1142C44.5969 40.2773 44.7733 40.4943 44.8876 40.7447C45.0019 40.9951 45.0504 41.2705 45.0286 41.5448C45.0067 41.8192 44.9151 42.0834 44.7625 42.3125L42.5125 45.7917C42.3947 45.9427 42.2915 46.1045 42.2042 46.275V46.2792C41.8913 46.8936 41.8029 47.5981 41.9542 48.2708C42.0838 48.8505 42.391 49.3753 42.833 49.7721C43.275 50.1689 43.8298 50.4179 44.4201 50.4844C45.0103 50.5509 45.6066 50.4316 46.1259 50.1431C46.6451 49.8546 47.0614 49.4113 47.3167 48.875L62.0625 26.225C63.2084 24.4667 62.0709 22.0625 60 21.9542C59.9528 21.9515 59.9056 21.9501 59.8584 21.95Z" fill="#3989D9"/>
+  </g>
+  <g class="svg__loader_group-bottom">
+    <path class="svg__loader_shapepath-bottom" d="M65.4458 26.2375C66.1567 26.1108 66.8896 26.2217 67.5313 26.553C68.1729 26.8844 68.6876 27.4178 68.9958 28.0709L80.4875 46.2334C81.4833 47.7959 81.5041 49.7959 80.55 51.3792L65.9375 75.5917C65.4801 76.3555 64.8332 76.9882 64.0594 77.4284C63.2855 77.8686 62.4111 78.1014 61.5208 78.1042L40.2708 78.125C40.2236 78.1263 40.1764 78.1263 40.1291 78.125C38.0583 78.025 36.9125 75.625 38.0458 73.8625L52.6916 51.1459C52.9442 50.6078 53.3584 50.162 53.8765 49.8707C54.3946 49.5794 54.9907 49.4571 55.5816 49.5209C56.1725 49.5847 56.7288 49.8313 57.1728 50.2265C57.6168 50.6216 57.9264 51.1455 58.0583 51.725C58.2135 52.3963 58.1295 53.1007 57.8208 53.7167C57.7327 53.8889 57.628 54.0564 57.5083 54.2084L55.2791 57.6959C55.1264 57.9255 55.035 58.1904 55.0135 58.4654C54.9921 58.7403 55.0413 59.0162 55.1566 59.2667C55.2718 59.5173 55.4493 59.7342 55.672 59.8968C55.8947 60.0595 56.1554 60.1624 56.4291 60.1959L61.8291 60.5875C62.3261 60.6226 62.8249 60.5548 63.2944 60.3885C63.764 60.2222 64.1942 59.9609 64.5583 59.6209C65.1 58.975 66.6666 56.4959 68.2916 53.8417L69.2666 52.2459C70.2333 50.6542 71.1458 49.1209 71.8041 48.0125C72.1109 47.4853 72.2584 46.8805 72.2288 46.2712C72.1992 45.6619 71.9938 45.0743 71.6375 44.5792L71.6583 44.5667L64.7375 33.6584L63.4416 31.5875C63.3053 31.4122 63.1866 31.2238 63.0875 31.025L63.0375 30.95C62.7742 30.3581 62.6805 29.7046 62.7666 29.0625C62.8608 28.3703 63.1702 27.7251 63.6509 27.2182C64.1317 26.7113 64.7595 26.3682 65.4458 26.2375Z" fill="#3989D9"/>
+  </g>
+</g>
+</svg>

package/src/Assets/Icon/ic-search.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h24v24H0z"/>
+        <path fill="#959BA1" d="M10 2a8 8 0 0 1 6.32 12.905l5.044 5.045a1 1 0 1 1-1.414 1.414l-5.045-5.043A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-warning.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h32v32H0z"/>
+        <path fill="#FFCB5D" d="M18.315 5.052L29.72 25.01A2.667 2.667 0 0 1 27.405 29H4.595a2.667 2.667 0 0 1-2.315-3.99L13.685 5.052a2.667 2.667 0 0 1 4.63 0z"/>
+        <path fill="#FFF" d="M16 22.667a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666zM16 12c.736 0 1.333.597 1.333 1.333v6.334a1.333 1.333 0 1 1-2.666 0v-6.334c0-.736.597-1.333 1.333-1.333z"/>
+    </g>
+</svg>

package/src/Assets/Icon/inject-tag.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 10H3.33333" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="9.99992" cy="9.99967" r="1.66667" fill="#596168"/>
+<path d="M4.41455 6.40325L9.76177 3.39544C9.83454 3.35451 9.91661 3.33301 10.0001 3.33301C10.0836 3.33301 10.1657 3.35451 10.2384 3.39544L15.5856 6.40325C15.6608 6.44554 15.7234 6.50706 15.7669 6.58152C15.8105 6.65598 15.8334 6.74068 15.8334 6.82693V12.8208C15.8334 12.9071 15.8105 12.9918 15.7669 13.0662C15.7234 13.1407 15.6608 13.2022 15.5856 13.2445L10.2384 16.2523C10.1657 16.2933 10.0836 16.3148 10.0001 16.3148C9.91661 16.3148 9.83454 16.2933 9.76177 16.2523L4.41455 13.2445" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Img/delete-medium.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h48v48H0z"/>
+        <g fill="#FFEBEB" stroke="#F33E3E" stroke-linejoin="round" stroke-width="2">
+            <path d="M7 24h24v17a4 4 0 0 1-4 4H11a4 4 0 0 1-4-4V24z"/>
+            <path stroke-linecap="round" d="M19 29.5v10M24 29.5v10M14 29.5v10"/>
+        </g>
+        <path stroke="#F33E3E" stroke-dasharray="17,3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M42 10a3 3 0 0 1 0 6H31M38 23a3 3 0 0 0-3-3h-8"/>
+        <g stroke="#F33E3E" stroke-linejoin="round" stroke-width="2" transform="rotate(-10 36.29 -8.86)">
+            <rect width="30" height="5" y="6" fill="#FFEBEB" rx="1"/>
+            <path d="M11 0h8a2 2 0 0 1 2 2v4H9V2a2 2 0 0 1 2-2z"/>
+        </g>
+    </g>
+</svg>

package/src/Assets/Img/ic-not-authorized.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="200" viewBox="0 0 250 200">
+    <defs>
+        <linearGradient id="ho9etwod5c" x1="55.01%" x2="40.976%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#2A318C"/>
+            <stop offset="100%" stop-color="#1D225F"/>
+        </linearGradient>
+        <linearGradient id="mdhg2gjypd" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#EEE"/>
+            <stop offset="100%" stop-color="#D6D7D8"/>
+        </linearGradient>
+        <linearGradient id="xe2mx0bk0e" x1="0%" x2="100%" y1="18%" y2="82%">
+            <stop offset="0%" stop-color="#E8B73F"/>
+            <stop offset="100%" stop-color="#CF9F36"/>
+        </linearGradient>
+        <path id="88gkjk6cca" d="M0 0H250V200H0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g transform="translate(-590 -308) translate(590 308)">
+                <mask id="pitr2853ub" fill="#fff">
+                    <use xlink:href="#88gkjk6cca"/>
+                </mask>
+                <g mask="url(#pitr2853ub)">
+                    <g>
+                        <path fill="#FFF" fill-rule="nonzero" d="M47.646 0c2.598 0 5.717 1.017 7.994 2.74 2.276 1.722 3.845 3.02 4.55 5.097.465 1.372.252 3.282-.641 5.728l.008-.072c-.013.145-.039.269-.071.387.574-1.048 1.638-1.624 2.576-1.283 1.07.39 1.5 1.803 1.013 3.14-.487 1.337-1.723 2.144-2.794 1.754-.536-.195-.91-.646-1.09-1.216.023.975.09 2.117.203 3.427l-2.317.161c-2.223 2.412-4.574 3.48-7.055 3.207-.6-.067-1.158-.18-1.675-.339-.588 1.007-1.177 2.688-1.766 5.043l-.064.031.005-.043c-.585 5.627-1.014 11.07-1.287 16.327l.001-.108c-.013.958-.003 1.853.028 2.684l.109-1.533c2.141 1.735 4.344 2.776 6.608 3.123 2.263.348 5.76-.128 10.49-1.426 2.808-.962 5.555-2.299 8.243-4.011H63.94l16.84-20.83h2.756c0-1.439 1.165-2.604 2.604-2.604 1.378 0 2.506 1.07 2.597 2.425l.006.178h1.736c0-1.438 1.166-2.603 2.604-2.603 1.378 0 2.506 1.07 2.598 2.425l.006.178h5.284L89.832 35.292c.097-.07.17-.106.212-.106.692 0 .692 5.306-.057 7.152-.289.865-4.73 5.71-9.864 10.844-2.78 2.78-6.605 6.366-11.477 10.759l2.511 11.858c-.568 1.157-2.01 1.928-4.324 2.314-5.208.579-10.415-1.736-16.78-1.736-1.852 0-3.142.343-4.269.744.841 8.545 2.264 16.398 4.269 23.558-1.157 1.157-1.946 1.682-2.808 2.052-1.015.394-2.305.789-3.009.86.776 2.429 1.318 4.584 1.627 6.464.38 2.322 2.518 22.156 6.411 59.5h-.044l2.037 1.697c2.308 1.962 12.796 7.547 14.132 8.307.891.506 2.067 1.794 3.526 3.864-16.575-.025-27.78-.05-33.613-.075l.053.075C12.788 183.385 0 183.346 0 183.308c0-.116 1.154-3.288 2.538-7.095l2.44-6.658H1.761c-.4-1.385-.792-3.254-1.175-5.606-.75-4.788-.18-7.96 3.05-14.536 3.23-6.518 4.866-10.072 4.866-13.764.058-5.768 1.222-11.316 4.28-17.315 2.364-4.73 3.495-5.086 3.725-7.97l.367-5.421c-2.382-.231-5.928-.988-8.045-1.693l-4.21-1.385-.116-4.326C4.214 85.6 5.08 76.89 7.79 65.757 11.482 50.47 22.096 34.84 34.959 25.668c3.055-2.203 4.272-3.049 5.093-2.807.79-.548 1.483-1.096 2.077-1.645-1.685-.52-3.275-1.222-4.77-2.105-2.311-1.366-4.444-3.194-6.398-5.483.397-.834.904-1.524 1.522-2.07.671-.592 1.935-1.108 3.169-1.822l-.065.021-1.204.401c-1.26.424-1.956.713-2.396 1.032-.829.601-1.259 1.275-1.312 2.032l-.005.191-.579.007c-.012-1.039.516-1.943 1.557-2.699.427-.31 1.013-.573 1.983-.916l1.755-.59.612-.213c.593-.213 1.063-.401 1.438-.584 1.296-1.399 2.17-3.971 4.089-5.678C43.642.855 45.048 0 47.646 0zM27.999 144.476l-.189.512c-2.603 7.055-5.679 15.219-9.228 24.493l2.126 1.771c2.307 1.962 12.795 7.547 14.132 8.307l.035.021c.364-1.006.782-2.154 1.223-3.367l2.44-6.658h-4.242c-1.444-2.617-2.166-4.456-2.166-5.517 0-1.59.913-3.77.913-6.068 0-1.393-1.68-5.89-5.044-13.494zM78.827 42.819l-1.242-.001c-2.375 2.17-3.972 3.706-4.791 4.61-.72.793-2.112 2.23-4.176 4.309 3.033-1.194 5.06-2.078 6.083-2.65 1.5-.865 2.077-1.673 3.807-5.307.082-.163.192-.506.319-.961zm7.313-22.857c-1.119 0-2.026.907-2.026 2.025h4.05c0-1.118-.906-2.025-2.024-2.025zm6.943 0c-1.119 0-2.025.907-2.025 2.025h4.05c0-1.118-.907-2.025-2.025-2.025zm-33.27-5.413c-.388 1.066-.065 2.132.666 2.398.73.266 1.664-.343 2.052-1.408.388-1.065.064-2.132-.667-2.398-.73-.266-1.664.343-2.052 1.408z" transform="translate(29 8)"/>
+                        <path fill="#80AEF2" fill-rule="nonzero" d="M36.56 183.308c0-.116 1.153-3.288 2.538-7.095l2.538-6.922 6.46-.173 6.403-.173 2.768 2.307c2.308 1.962 12.796 7.547 14.132 8.307.891.506 2.067 1.794 3.526 3.864-25.577-.038-38.365-.077-38.365-.115z" transform="translate(29 8)"/>
+                        <path fill="#94BBF8" fill-rule="nonzero" d="M3 183.308c0-.116 1.154-3.288 2.538-7.095l2.538-6.922 6.46-.173 6.403-.173 2.769 2.307c2.307 1.962 12.795 7.547 14.132 8.307.89.506 2.066 1.794 3.525 3.864C15.788 183.385 3 183.346 3 183.308z" transform="translate(29 8)"/>
+                        <path fill="#1D225F" fill-rule="nonzero" d="M46.655 101.836c1.09 3.158 1.826 5.898 2.208 8.22.38 2.321 2.518 22.155 6.411 59.5H37.296c-1.444-2.618-2.166-4.457-2.166-5.518 0-1.59.913-3.77.913-6.068 0-1.532-2.034-6.823-6.104-15.871l3.931-39.349 12.785-.914z" transform="translate(29 8)"/>
+                        <path fill="url(#ho9etwod5c)" d="M21.554 169.555H4.76c-.4-1.385-.792-3.254-1.175-5.606-.75-4.788-.18-7.96 3.05-14.536 3.23-6.518 4.866-10.072 4.866-13.764.058-5.768 1.222-11.316 4.28-17.315 2.364-4.73 3.495-5.086 3.725-7.97l.42-6.202h21.078c.512 1.433.696 4.075.55 7.925-.145 3.85-6.812 23.006-20.001 57.468z" transform="translate(29 8)"/>
+                        <g fill-rule="nonzero">
+                            <path fill="#98BDF9" d="M0 24.302L16.84 3.472 37.031 3.472 19.592 24.302z" transform="translate(29 8) translate(66.94 18.516)"/>
+                            <path fill="#2174DB" d="M22.2.868c1.378 0 2.506 1.07 2.597 2.425l.006.179h-.578c0-1.119-.907-2.025-2.025-2.025-1.119 0-2.025.906-2.025 2.025 0 1.062.818 1.934 1.859 2.018l.166.007v.578c-1.438 0-2.604-1.165-2.604-2.603 0-1.438 1.166-2.604 2.604-2.604zM29.143.868c1.378 0 2.506 1.07 2.598 2.425l.006.179h-.579c0-1.119-.906-2.025-2.025-2.025-1.118 0-2.025.906-2.025 2.025 0 1.062.818 1.934 1.859 2.018l.166.007v.578c-1.438 0-2.604-1.165-2.604-2.603 0-1.438 1.166-2.604 2.604-2.604z" transform="translate(29 8) translate(66.94 18.516)"/>
+                        </g>
+                        <path fill="#F3A29D" fill-rule="nonzero" d="M65.472 46.829c2.807-.962 5.554-2.299 8.242-4.011h6.871c-2.375 2.17-3.972 3.706-4.791 4.61-.82.903-2.509 2.638-5.068 5.205-1.091 5.781-2.254 8.21-3.487 7.285-1.85-1.386-7.939-10.897-1.767-13.09z" transform="translate(29 8)"/>
+                        <path fill="#FAB6AF" fill-rule="nonzero" d="M69.254 52.654c4.363-1.668 7.179-2.857 8.447-3.567 1.5-.865 2.077-1.673 3.807-5.307.23-.461.692-2.365 1.096-4.153.923-4.557 2.423-4.326 2.538.346.058 1.27.346 2.423.692 2.538.288.116 1.961-1.5 3.634-3.576 1.673-2.077 3.288-3.75 3.576-3.75.692 0 .692 5.307-.057 7.153-.289.865-4.73 5.71-9.864 10.844-3.422 3.423-8.431 8.068-15.026 13.937l1.157-14.465z" transform="translate(29 8)"/>
+                        <path fill="#F3A29D" fill-rule="nonzero" d="M49.581 27.774c.772-3.086 1.543-5.015 2.315-5.787-1.157-1.157-2.315-2.314-4.63-3.471-.77 1.543-2.314 3.086-4.628 4.629 0 2.314.771 3.857 2.314 4.629 1.543.771 3.086.771 4.63 0z" transform="translate(29 8)"/>
+                        <g>
+                            <path fill="url(#mdhg2gjypd)" fill-rule="nonzero" d="M12.858 82.16c-2.365-.174-6.23-.981-8.48-1.731l-4.21-1.385-.115-4.326c-.289-11.94.577-20.65 3.288-31.782C7.032 27.65 17.646 12.019 30.509 2.847c4.96-3.576 5.076-3.576 6.518-1.153.634 1.153 1.96 2.307 2.884 2.653l2.161.594c-3.046 29.324-1.87 53.63 3.531 72.917-1.157 1.158-1.946 1.682-2.808 2.052-1.039.403-2.365.807-3.057.865-.693.058-3 .519-5.25 1.038-4.21.923-13.382 1.096-21.63.346z" transform="translate(29 8) translate(7.45 22.82)"/>
+                            <path fill="#D6D7D8" d="M58.022 24.008l1.767 11.311-19.972 2.645 1.106-15.653c2.141 1.735 4.344 2.776 6.608 3.123 2.263.348 5.76-.128 10.49-1.426z" transform="translate(29 8) translate(7.45 22.82)"/>
+                            <path fill="#E9E9E9" fill-rule="nonzero" d="M61.804 29.833l4.903 23.145c-.568 1.157-2.01 1.929-4.324 2.314-5.208.579-10.415-1.736-16.78-1.736-6.365 0-6.09 4.05-15.348.58-6.172-2.315-8.68-12.73-7.523-31.246l18.054-1.73c-.078 5.782.655 9.252 2.198 10.409 1.512 1.134 7.569.601 18.17-1.6l.65-.136z" transform="translate(29 8) translate(7.45 22.82)"/>
+                        </g>
+                        <g>
+                            <path fill="#FAB6AF" fill-rule="nonzero" d="M29.082 7.444c1.07 1.52 1.488 3.536 1.253 6.049-.062.656-.376.883-.376 2.052 0 1.12.07 2.506.212 4.157l-2.317.161c-2.222 2.412-4.574 3.48-7.055 3.207-2.48-.275-4.251-1.343-5.31-3.207-2.18-4.023-1.621-7.444 1.675-10.262 3.296-2.818 7.269-3.537 11.918-2.157z" transform="translate(29 8) translate(32.223)"/>
+                            <path fill="#E94A47" d="M18.423 0c2.598 0 5.717 1.017 7.994 2.74 2.277 1.722 3.845 3.02 4.55 5.097.47 1.384.248 3.314-.664 5.791.13-2.345-.048-3.647-.533-3.906-.67 1.653-1.595 1.987-2.703 2.787-.62.448-2.791.518-4.917.897-2.628 1.722-4.303 3.33-4.867 4.86-.448 1.218-.402 2.608.148 4.177l.126.339-.54.21c-.714-1.833-.81-3.478-.277-4.925.522-1.417 1.85-2.838 3.894-4.321-1.09.307-2.051.754-2.634 1.449-1.279 1.526-2.028 3.765-2.246 6.716-2.766-.5-5.305-1.433-7.617-2.8-2.312-1.366-4.445-3.194-6.398-5.483.396-.834.904-1.524 1.521-2.07.671-.592 1.935-1.108 3.169-1.822l-.065.021-1.204.401c-1.26.424-1.956.713-2.395 1.032-.83.601-1.26 1.275-1.313 2.032l-.005.191-.579.007c-.012-1.039.516-1.943 1.557-2.699.427-.31 1.013-.573 1.983-.916l1.756-.59.61-.213c.594-.213 1.064-.401 1.439-.584 1.296-1.399 2.17-3.971 4.09-5.678C14.418.855 15.825 0 18.422 0z" transform="translate(29 8) translate(32.223)"/>
+                            <g fill="#222768" fill-rule="nonzero">
+                                <path d="M1.025 3.16C1.622 1.52 3.194.563 4.56 1.06c1.061.386 1.653 1.524 1.586 2.781.36-.092.688-.137.988-.137l.208.008c.254.02.466.056.636.114.511-1.271 1.708-2.023 2.749-1.644 1.07.39 1.5 1.802 1.013 3.14-.487 1.337-1.723 2.143-2.794 1.754-.953-.347-1.397-1.504-1.14-2.697-.103-.038-.274-.072-.508-.09-.334-.025-.737.029-1.209.165l-.03.01c-.036.159-.083.318-.14.477-.597 1.64-2.17 2.597-3.536 2.1C1.017 6.543.428 4.8 1.025 3.16zm9.504-.434c-.73-.266-1.664.343-2.052 1.408-.388 1.065-.064 2.132.667 2.398.73.266 1.664-.343 2.052-1.408.387-1.066.064-2.132-.667-2.398zM4.362 1.604c-1.036-.378-2.297.39-2.793 1.754-.496 1.363-.024 2.762 1.012 3.14 1.036.376 2.298-.392 2.794-1.755s.023-2.762-1.013-3.14z" transform="translate(29 8) translate(32.223) translate(22.112 10.415)"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+                <g mask="url(#pitr2853ub)">
+                    <g>
+                        <path fill="#FFF" d="M30 0c12.15 0 22 9.85 22 22v11h8v48H0V33h8V22C8 9.973 17.654.198 29.637.004zm0 7.934c-7.755 0-14.067 6.309-14.067 14.067V33h28.133V22c0-7.652-6.14-13.896-13.752-14.063z" transform="translate(134 61)"/>
+                        <path fill="#D6D7D8" d="M55 34.3V22C55 9.85 45.15 0 33 0S11 9.85 11 22v12.3m7.933 0V22c0-7.757 6.312-14.066 14.068-14.066 7.756 0 14.065 6.31 14.065 14.067v12.298" transform="translate(134 61)"/>
+                        <path fill="url(#xe2mx0bk0e)" d="M3 33H63V81H3z" transform="translate(134 61)"/>
+                        <path fill="#3E3D4C" fill-rule="nonzero" d="M39 56c0-3.314-2.686-6-6-6s-6 2.686-6 6c0 2.282 1.275 4.267 3.15 5.281l-.965 7.386h7.63l-.965-7.386C37.726 60.267 39 58.282 39 56z" transform="translate(134 61)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/Common/AddCDButton/AddCDButton.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import Tippy from '@tippyjs/react'
+import { AddCDButtonProps, TooltipContentProps } from './types'
+import { AddCDPositions } from '../Types'
+
+function TooltipContent({ tooltipContent }: TooltipContentProps) {
+    if (tooltipContent) {
+        return (
+            <div className="dc__white-space-pre-wrap">
+                <p className="m-0 cn-0 fs-12 fw-6 lh-18">Click to add</p>
+
+                {tooltipContent}
+            </div>
+        )
+    }
+
+    return <div className="dc__white-space-pre-wrap">Click to add here</div>
+}
+
+export default function AddCDButton({
+    position,
+    addCDButtons,
+    endNode,
+    startNode,
+    handleAddCD,
+    tooltipContent,
+}: Readonly<AddCDButtonProps>) {
+    const referenceNode = position === AddCDPositions.RIGHT ? endNode : startNode
+    const handleAddCDClick = () => {
+        handleAddCD(position)
+    }
+
+    if (addCDButtons?.includes(position)) {
+        return (
+            <Tippy
+                placement="top"
+                content={<TooltipContent tooltipContent={tooltipContent} />}
+                className="default-tt"
+                arrow={false}
+            >
+                <svg
+                    x={referenceNode.x + (position === AddCDPositions.RIGHT ? -20 - 5 : referenceNode.width + 5)}
+                    // Here 10 is the height of the button / 2
+                    y={referenceNode.y + referenceNode.height / 2 - 10}
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    data-testid={`add-cd-to-${position}`}
+                    onClick={handleAddCDClick}
+                    className="dc__outline-none-imp"
+                >
+                    <rect width="20" height="20" rx="10" fill="#664BEE" className="add-cd-edge-btn" />
+                    <path
+                        d="M6.5 10H13.5M10 6.5V13.5"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </svg>
+            </Tippy>
+        )
+    }
+
+    return null
+}

package/src/Common/AddCDButton/index.ts

@@ -0,0 +1,2 @@
+export { default as AddCDButton } from './AddCDButton'
+export { handleAddCD } from './utils'

package/src/Common/AddCDButton/types.ts

@@ -0,0 +1,38 @@
+import { AddCDPositions, AddPipelineType, EdgeEndNodeType, EdgeNodeType, Point } from '../Types'
+
+export interface AddCDButtonProps {
+    position: AddCDPositions
+    addCDButtons: AddCDPositions[]
+    endNode: Point & EdgeEndNodeType
+    startNode: Point & EdgeNodeType
+    handleAddCD: (position: AddCDPositions) => void
+    tooltipContent?: string
+}
+
+export interface HandleAddCD {
+    position: AddCDPositions
+    handleCDSelect: (
+        workflowId: number | string,
+        ciPipelineId: number | string,
+        parentPipelineType: string,
+        parentPipelineId: number | string,
+        isWebhookCD?: boolean,
+        childPipelineId?: number | string,
+        addType?: AddPipelineType,
+    ) => void
+    startNode: EdgeNodeType
+    endNode: EdgeEndNodeType
+    workflowId: number | string
+    ciPipelineId: number | string
+    isWebhookCD: boolean
+    isParallelEdge: boolean
+}
+
+export interface GetPipelineType {
+    isWebhookCD: boolean
+    startNode: EdgeNodeType
+}
+
+export interface TooltipContentProps {
+    tooltipContent?: string
+}