@platformatic/ui-components 0.1.53 → 0.1.55

package/src/components/icons/LensIcon.jsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const LensIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={7} cy={7} r={5} stroke='none' />
+          <path d='M14 14L11 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={10.5} cy={10.5} r={7.5} stroke='none' strokeWidth={1.5} />
+          <path d='M21 21L16.5 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={17.5} cy={17.5} r={12.5} stroke='none' strokeWidth={2} />
+          <path d='M35 35L27.5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+LensIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+LensIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default LensIcon

package/src/components/icons/LiveIcon.jsx

@@ -1,8 +1,12 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const LiveIcon = ({ color = 'green', size = 'normal' }) => {
+
+const LiveIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
   let icon = <></>
+
   switch (size) {
     case 'small':
       icon = (
@@ -14,30 +18,68 @@ const LiveIcon = ({ color = 'green', size = 'normal' }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <circle cx={8} cy={8.75137} r={1.5} fill='none' />
-          <path
-            d='M6 6.51529C5.38625 7.06461 5 7.8629 5 8.7514C5 9.6399 5.38625 10.4382 6 10.9875M10 6.51529C10.6137 7.06461 11 7.8629 11 8.7514C11 9.6399 10.6137 10.4382 10 10.9875'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M11 5.39722C11.9206 6.2212 12.5 7.41863 12.5 8.75138C12.5 10.0841 11.9206 11.2816 11 12.1055M5 5.39722C4.07938 6.2212 3.5 7.41863 3.5 8.75138C3.5 10.0841 4.07938 11.2816 5 12.1055'
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <path
-            d='M12 4.27916C13.2275 5.3778 14 6.97437 14 8.75137C14 10.6328 13.134 12.312 11.779 13.412M4.33558 4C2.91494 5.09726 2 6.81747 2 8.75137C2 10.5434 2.78563 12.152 4.03126 13.2514'
-            stroke='none'
-            strokeLinecap='round'
-          />
+          <circle cx={8} cy={8.75134} r={1.5} fill='none' className={filledClassName} />
+          <path d='M6 6.51526C5.38625 7.06458 5 7.86287 5 8.75137C5 9.63987 5.38625 10.4382 6 10.9875M10 6.51526C10.6137 7.06458 11 7.86287 11 8.75137C11 9.63986 10.6137 10.4382 10 10.9875' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11 5.39722C11.9206 6.2212 12.5 7.41863 12.5 8.75138C12.5 10.0841 11.9206 11.2816 11 12.1055M5 5.39722C4.07938 6.2212 3.5 7.41863 3.5 8.75138C3.5 10.0841 4.07938 11.2816 5 12.1055' stroke='none' strokeLinecap='round' />
+          <path d='M12 4.27916C13.2275 5.3778 14 6.97437 14 8.75137C14 10.6328 13.134 12.312 11.779 13.412M4.33558 4C2.91494 5.09726 2 6.81747 2 8.75137C2 10.5434 2.78563 12.152 4.03126 13.2514' stroke='none' strokeLinecap='round' />
         </svg>
       )
       break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={12} cy={13.1271} r={2.25} fill='none' className={filledClassName} />
+          <path d='M9 9.77295C8.07938 10.5969 7.5 11.7944 7.5 13.1271C7.5 14.4599 8.07938 15.6573 9 16.4813M15 9.77295C15.9206 10.5969 16.5 11.7944 16.5 13.1271C16.5 14.4599 15.9206 15.6573 15 16.4813' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M16.5 8.09583C17.8809 9.3318 18.75 11.1279 18.75 13.1271C18.75 15.1262 17.8809 16.9223 16.5 18.1583M7.5 8.09583C6.11906 9.3318 5.25 11.1279 5.25 13.1271C5.25 15.1262 6.11906 16.9223 7.5 18.1583' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M18 6.41874C19.8412 8.0667 21 10.4616 21 13.1271C21 15.9492 19.7011 18.4679 17.6684 20.1181M6.50337 6C4.37242 7.64589 3 10.2262 3 13.1271C3 15.8151 4.17845 18.2279 6.0469 19.8771' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={20} cy={21.8784} r={3.75} fill='none' className={filledClassName} />
+          <path d='M15 16.2882C13.4656 17.6615 12.5 19.6572 12.5 21.8785C12.5 24.0997 13.4656 26.0954 15 27.4687M25 16.2882C26.5344 17.6615 27.5 19.6572 27.5 21.8785C27.5 24.0997 26.5344 26.0954 25 27.4687' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M27.5 13.493C29.8016 15.553 31.25 18.5466 31.25 21.8784C31.25 25.2103 29.8016 28.2039 27.5 30.2638M12.5 13.493C10.1984 15.553 8.75 18.5466 8.75 21.8784C8.75 25.2103 10.1984 28.2039 12.5 30.2638' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M30 10.6979C33.0687 13.4445 35 17.4359 35 21.8784C35 26.582 32.8351 30.7799 29.4474 33.5301M10.8389 10C7.28736 12.7431 5 17.0437 5 21.8784C5 26.3585 6.96408 30.3799 10.0782 33.1284' stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
     default:
       break
   }
   return icon
 }
 
+LiveIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+LiveIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default LiveIcon

package/src/components/icons/LogOutIcon.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const LogOutIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M8.38687 5.5V3C8.38687 2.44772 7.93915 2 7.38687 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44771 14 3 14H7.38687C7.93915 14 8.38687 13.5523 8.38687 13V11.5' stroke='none' strokeLinecap='round' />
+          <path d='M10.7742 5.3031L14 8.33356L10.7742 11.364' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.3548 8.3335L6.25796 8.3335' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M12.5803 8.25V4C12.5803 3.44772 12.1326 3 11.5803 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H11.5803C12.1326 21 12.5803 20.5523 12.5803 20V17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M16.1611 7.95459L20.9999 12.5003L16.1611 17.046' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.0321 12.5003L9.38681 12.5003' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M20.9672 13.75V6C20.9672 5.44772 20.5195 5 19.9672 5H6C5.44772 5 5 5.44772 5 6V34C5 34.5523 5.44772 35 6 35H19.9672C20.5195 35 20.9672 34.5523 20.9672 34V28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M26.9353 13.2577L34.9999 20.8338L26.9353 28.41' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M33.387 20.8338L15.6448 20.8338' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+LogOutIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+LogOutIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default LogOutIcon

package/src/components/icons/MetricsIcon.jsx

@@ -1,52 +1,85 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const MetricsIcon = ({ color = 'white' }) => {
-  const className = styles[`${color}`]
-  return (
-    <svg
-      width={40}
-      height={40}
-      viewBox='0 0 40 40'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <rect
-        x={10}
-        y={12.5}
-        width={5}
-        height={17.5}
-        rx={0.5}
-        stroke='none'
-        strokeWidth={2}
-      />
-      <rect
-        x={20}
-        y={20}
-        width={5}
-        height={10}
-        rx={0.5}
-        stroke='none'
-        strokeWidth={2}
-      />
-      <rect
-        x={30}
-        y={5}
-        width={5}
-        height={25}
-        rx={0.5}
-        stroke='none'
-        strokeWidth={2}
-      />
-      <path
-        d='M5 5V35H35'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
+
+const MetricsIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={4} y={5} width={2} height={7} rx={0.5} stroke='none' />
+          <rect x={8} y={8} width={2} height={4} rx={0.5} stroke='none' />
+          <rect x={12} y={2} width={2} height={10} rx={0.5} stroke='none' />
+          <path d='M2 2V14H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={6} y={7.5} width={3} height={10.5} rx={0.5} stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={12} width={3} height={6} rx={0.5} stroke='none' strokeWidth={1.5} />
+          <rect x={18} y={3} width={3} height={15} rx={0.5} stroke='none' strokeWidth={1.5} />
+          <path d='M3 3V21H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={10} y={12.5} width={5} height={17.5} rx={0.5} stroke='none' strokeWidth={2} />
+          <rect x={20} y={20} width={5} height={10} rx={0.5} stroke='none' strokeWidth={2} />
+          <rect x={30} y={5} width={5} height={25} rx={0.5} stroke='none' strokeWidth={2} />
+          <path d='M5 5V35H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+MetricsIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+MetricsIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
 }
 
 export default MetricsIcon

package/src/components/icons/PlayIcon.jsx

@@ -1,20 +1,75 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const PlayIcon = ({ color = 'green', size = 'normal' }) => {
+
+const PlayIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
+
   switch (size) {
     case 'small':
       icon = (
-        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
           <path d='M2 2L14 8L2 14V2Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
         </svg>
       )
       break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M3 3L21 12L3 21V3Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M5 5L35 20L5 35V5Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
     default:
       break
   }
   return icon
 }
 
+PlayIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+PlayIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default PlayIcon

package/src/components/icons/PullRequestIcon.jsx

@@ -1,35 +1,92 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const PullRequestIcon = ({ color = 'white' }) => {
-  const className = styles[`${color}`]
-  return (
-    <svg
-      width={40}
-      height={40}
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <circle cx={9.5} cy={30.5} r={4.5} stroke='none' strokeWidth={2} />
-      <circle cx={9.5} cy={9.5} r={4.5} stroke='none' strokeWidth={2} />
-      <path stroke='none' strokeWidth={2} d='M9 14v12' />
-      <circle cx={30.5} cy={30.5} r={4.5} stroke='none' strokeWidth={2} />
-      <path
-        d='M30.5 26V10.5a1 1 0 0 0-1-1H23'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='m26 5-4.5 4.5L26 14'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
+
+const PullRequestIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={3.8} cy={12.2} r={1.8} stroke='none' />
+          <circle cx={3.8} cy={3.8} r={1.8} stroke='none' />
+          <line x1={3.69995} y1={5.59998} x2={3.69995} y2={10.4} stroke='none' />
+          <circle cx={12.1999} cy={12.2} r={1.8} stroke='none' />
+          <path d='M12.2 10.4V4.80005C12.2 4.24776 11.7522 3.80005 11.2 3.80005H9.19995' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.4001 2L8.6001 3.8L10.4001 5.6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={5.7} cy={18.3} r={2.7} stroke='none' strokeWidth={1.5} />
+          <circle cx={5.7} cy={5.7} r={2.7} stroke='none' strokeWidth={1.5} />
+          <line x1={5.55005} y1={8.40002} x2={5.55005} y2={15.6} stroke='none' strokeWidth={1.5} />
+          <ellipse cx={18.2999} cy={18.3} rx={2.7} ry={2.7} stroke='none' strokeWidth={1.5} />
+          <path d='M18.2998 15.6V6.69995C18.2998 6.14767 17.8521 5.69995 17.2998 5.69995H13.7998' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15.5999 3L12.8999 5.7L15.5999 8.4' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={9.5} cy={30.5} r={4.5} stroke='none' strokeWidth={2} />
+          <circle cx={9.5} cy={9.5} r={4.5} stroke='none' strokeWidth={2} />
+          <line x1={9} y1={14} x2={9} y2={26} stroke='none' strokeWidth={2} />
+          <ellipse cx={30.4998} cy={30.5} rx={4.5} ry={4.5} stroke='none' strokeWidth={2} />
+          <path d='M30.4998 26V10.5C30.4998 9.94772 30.052 9.5 29.4998 9.5H22.9998' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M26 5L21.5 9.5L26 14' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+PullRequestIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+PullRequestIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
 }
 
 export default PullRequestIcon

package/src/components/icons/SendIcon.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const SendIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M3.84615 8L2 13L14 8L2 3L3.84615 8ZM3.84615 8H8.46154' stroke='#21FA90' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M5.76923 12L3 19.5L21 12L3 4.5L5.76923 12ZM5.76923 12H12.6923' stroke='#21FA90' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M9.61538 20L5 32.5L35 20L5 7.5L9.61538 20ZM9.61538 20H21.1538' stroke='#21FA90' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SendIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+SendIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default SendIcon