@platformatic/ui-components 0.1.53 → 0.1.54

package/src/components/icons/SocialNPMIcon.jsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const SocialNPMIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${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='M1.33325 5.33334H14.6666V9.77779H7.99992V10.5185H5.03696V9.77779H1.33325V5.33334ZM2.07399 9.03705H3.55547V6.81483H4.29621V9.03705H5.03696V6.07408H2.07399V9.03705ZM5.7777 6.07408V9.77779H7.25918V9.03705H8.74066V6.07408H5.7777ZM7.25918 6.81483H7.99992V8.29631H7.25918V6.81483ZM9.4814 6.07408V9.03705H10.9629V6.81483H11.7036V9.03705H12.4444V6.81483H13.1851V9.03705H13.9258V6.07408H9.4814Z' fill='none' className={filledClassName} />
+        </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='M2 8H22V14.6667H12V15.7778H7.55556V14.6667H2V8ZM3.11111 13.5556H5.33333V10.2222H6.44444V13.5556H7.55556V9.11111H3.11111V13.5556ZM8.66667 9.11111V14.6667H10.8889V13.5556H13.1111V9.11111H8.66667ZM10.8889 10.2222H12V12.4444H10.8889V10.2222ZM14.2222 9.11111V13.5556H16.4444V10.2222H17.5556V13.5556H18.6667V10.2222H19.7778V13.5556H20.8889V9.11111H14.2222Z' fill='none' className={filledClassName} />
+        </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='M3.33325 13.3333H36.6666V24.4445H19.9999V26.2963H12.5925V24.4445H3.33325V13.3333ZM5.1851 22.5926H8.88881V17.037H10.7407V22.5926H12.5925V15.1852H5.1851V22.5926ZM14.4444 15.1852V24.4445H18.1481V22.5926H21.8518V15.1852H14.4444ZM18.1481 17.037H19.9999V20.7408H18.1481V17.037ZM23.7036 15.1852V22.5926H27.4073V17.037H29.2592V22.5926H31.111V17.037H32.9629V22.5926H34.8147V15.1852H23.7036Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SocialNPMIcon.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'])
+}
+
+SocialNPMIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default SocialNPMIcon

package/src/components/icons/SocialTwitterIcon.jsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const SocialTwitterIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${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='M14.6666 3.92407C14.1674 4.14221 13.6376 4.28522 13.0952 4.34833C13.6657 4.01139 14.0923 3.48149 14.2953 2.85751C13.7588 3.17265 13.1713 3.39479 12.5585 3.51426C12.1458 3.08286 11.6004 2.79736 11.0065 2.70189C10.4126 2.60641 9.80328 2.70627 9.27276 2.98603C8.74223 3.2658 8.32001 3.70989 8.07134 4.24969C7.82267 4.78949 7.76139 5.39494 7.89697 5.97247C6.80927 5.91774 5.7454 5.63833 4.7744 5.15239C3.8034 4.66644 2.94697 3.98481 2.26069 3.15173C1.91173 3.74501 1.80505 4.44686 1.9623 5.1148C2.11956 5.78274 2.52897 6.36669 3.1074 6.74809C2.67233 6.7355 2.24666 6.62042 1.86601 6.41249C1.86601 6.42366 1.86601 6.43548 1.86601 6.44665C1.86649 7.0696 2.0859 7.67318 2.48697 8.15482C2.88804 8.63646 3.44603 8.96646 4.06612 9.08875C3.66325 9.19645 3.24078 9.2124 2.83072 9.13538C3.00541 9.67082 3.34567 10.1391 3.80389 10.4746C4.26211 10.8101 4.81535 10.996 5.38618 11.0065C4.41654 11.7564 3.2188 12.1629 1.98601 12.1604C1.76788 12.1603 1.54993 12.1476 1.33331 12.1223C2.58405 12.9144 4.03994 13.3348 5.52686 13.3333C10.5584 13.3333 13.3099 9.22732 13.3099 5.66577C13.3099 5.54887 13.3099 5.43262 13.3026 5.31704C13.8376 4.93621 14.2996 4.46452 14.6666 3.92407V3.92407Z' fill='none' className={filledClassName} />
+        </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='M22 5.88612C21.2511 6.21333 20.4565 6.42785 19.6429 6.52251C20.4986 6.0171 21.1384 5.22225 21.443 4.28628C20.6382 4.759 19.757 5.0922 18.8378 5.2714C18.2188 4.6243 17.4006 4.19606 16.5098 4.05284C15.6189 3.90963 14.705 4.05942 13.9092 4.47907C13.1134 4.89871 12.48 5.56486 12.107 6.37455C11.734 7.18425 11.6421 8.09242 11.8455 8.95872C10.2139 8.87662 8.61813 8.45751 7.16163 7.72859C5.70513 6.99967 4.42049 5.97723 3.39107 4.72762C2.86763 5.61752 2.7076 6.67031 2.94349 7.67222C3.17937 8.67413 3.79348 9.55006 4.66113 10.1222C4.00853 10.1033 3.37001 9.93065 2.79904 9.61876C2.79904 9.6355 2.79904 9.65324 2.79904 9.66998C2.79976 10.6044 3.12888 11.5098 3.73049 12.2322C4.33209 12.9547 5.16907 13.4497 6.09921 13.6331C5.4949 13.7947 4.86119 13.8186 4.24611 13.7031C4.50814 14.5062 5.01854 15.2086 5.70586 15.7118C6.39319 16.2151 7.22305 16.4941 8.0793 16.5097C6.62485 17.6346 4.82824 18.2443 2.97905 18.2406C2.65184 18.2405 2.32493 18.2214 2 18.1834C3.8761 19.3716 6.05994 20.0023 8.29032 20C15.8377 20 19.9649 13.841 19.9649 8.49867C19.9649 8.32332 19.9649 8.14895 19.9539 7.97557C20.7565 7.40433 21.4494 6.69679 22 5.88612Z' fill='none' className={filledClassName} />
+        </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='M36.6667 9.81019C35.4185 10.3555 34.0942 10.7131 32.7382 10.8708C34.1644 10.0285 35.2308 8.70374 35.7383 7.14379C34.397 7.93165 32.9284 8.487 31.3964 8.78566C30.3647 7.70716 29.001 6.99342 27.5163 6.75473C26.0315 6.51604 24.5083 6.76569 23.182 7.4651C21.8557 8.16451 20.8001 9.27475 20.1784 10.6242C19.5568 11.9737 19.4036 13.4874 19.7425 14.9312C17.0233 14.7944 14.3636 14.0958 11.9361 12.881C9.5086 11.6661 7.36753 9.96204 5.65182 7.87935C4.77942 9.36253 4.51271 11.1172 4.90585 12.787C5.29899 14.4569 6.32251 15.9167 7.7686 16.8702C6.68092 16.8388 5.61673 16.5511 4.66511 16.0313C4.66511 16.0592 4.66511 16.0887 4.66511 16.1166C4.66631 17.674 5.21485 19.183 6.21752 20.3871C7.2202 21.5912 8.61516 22.4162 10.1654 22.7219C9.15821 22.9911 8.10203 23.031 7.07689 22.8385C7.51361 24.1771 8.36427 25.3476 9.50981 26.1864C10.6554 27.0252 12.0385 27.4901 13.4655 27.5162C11.0415 29.391 8.0471 30.4072 4.96512 30.4009C4.41978 30.4008 3.87492 30.369 3.33337 30.3057C6.46021 32.286 10.0999 33.3371 13.8172 33.3333C26.3962 33.3333 33.2749 23.0683 33.2749 14.1644C33.2749 13.8722 33.2749 13.5816 33.2565 13.2926C34.5942 12.3405 35.749 11.1613 36.6667 9.81019V9.81019Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SocialTwitterIcon.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'])
+}
+
+SocialTwitterIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default SocialTwitterIcon

package/src/components/icons/StopIcon.jsx

@@ -1,21 +1,78 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const StopIcon = ({ color = 'green', size = 'normal' }) => {
+
+const StopIcon = ({ 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}
+        >
           <circle cx={8} cy={8} r={6} stroke='none' />
           <path d='M3.5 12L12 3.5' 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={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
+          <path d='M5.25 18L18 5.25' 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={20} cy={20} r={15} stroke='none' strokeWidth={2} />
+          <path d='M8.75 30L30 8.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
     default:
       break
   }
   return icon
 }
 
+StopIcon.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'])
+}
+
+StopIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default StopIcon

package/src/components/icons/TerminalIcon.jsx

@@ -1,22 +1,82 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const TerminalIcon = ({ color = 'green', size = 'normal' }) => {
+
+const TerminalIcon = ({ 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}
+        >
           <rect x={2} y={2} width={12} height={12} rx={1} stroke='none' />
           <path d='M4 9L6 7L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
           <path d='M7 11H11.5' 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={3} y={3} width={18} height={18} rx={1} stroke='none' strokeWidth={1.5} />
+          <path d='M6 13.5L9 10.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.5 16.5H17.25' 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={5} y={5} width={30} height={30} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M10 22.5L15 17.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M17.5 27.5H28.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
     default:
       break
   }
   return icon
 }
 
+TerminalIcon.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'])
+}
+
+TerminalIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default TerminalIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -1,10 +1,62 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
+const UpgradeIcon = ({ 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='M9.80918 9.49998C9.39943 9.9934 8.7836 10.3072 8.09498 10.3072C7.37145 10.3072 6.72827 9.96077 6.32007 9.42357' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3.1061 6.85057L2.34803 6.85057C2.15566 6.85057 2 7.00735 2 7.2011L2 8.91548C2 9.10922 2.15566 9.26601 2.34803 9.26601L3.1061 9.26601C3.25037 9.26601 3.38072 9.3565 3.43134 9.49289L3.79709 10.4667C3.84645 10.5993 3.81228 10.7497 3.7085 10.8466L3.20987 11.3143C3.06307 11.452 3.06307 11.6865 3.20861 11.8255L4.3957 12.9548C4.52731 13.081 4.73487 13.0823 4.86901 12.9586L5.52457 12.357C5.62835 12.2627 5.77768 12.2385 5.9055 12.2984L6.77874 12.7062C6.90276 12.7636 6.98123 12.8885 6.98123 13.0249L6.98123 13.6495C6.98123 13.8432 7.13689 14 7.32926 14L8.79477 14C8.98713 14 9.1428 13.8432 9.1428 13.6495L9.1428 12.9943C9.1428 12.8426 9.24024 12.7075 9.38325 12.6604L10.3919 12.329C10.5109 12.2907 10.6412 12.3188 10.7336 12.4029L11.3246 12.9421C11.4689 13.0733 11.6929 13.0606 11.8207 12.9127L12.9002 11.67C13.0243 11.5272 13.0129 11.3105 12.8749 11.1818L12.4117 10.7484C12.3092 10.6541 12.2738 10.5075 12.3193 10.3762L12.6332 9.47122C12.6826 9.32974 12.8142 9.23541 12.9622 9.23541L13.652 9.23541C13.8443 9.23541 14 9.07863 14 8.88489L14 7.23296C14 7.03922 13.8443 6.88244 13.652 6.88244L12.9622 6.88244' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.88912 2.04607L5.00001 4.90712L6.50001 4.90713L6.50001 8.02304L9.5 8.02304L9.5 5.03457L11 5.03456L7.88912 2.04607Z' 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='M14.7139 14.25C14.0993 14.9901 13.1755 15.4609 12.1426 15.4609C11.0573 15.4609 10.0925 14.9412 9.48022 14.1354' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.65914 10.2759L3.52204 10.2759C3.23349 10.2759 3 10.511 3 10.8016L3 13.3732C3 13.6638 3.23349 13.899 3.52204 13.899L4.65914 13.899C4.87555 13.899 5.07108 14.0348 5.14702 14.2393L5.69563 15.7001C5.76967 15.8989 5.71841 16.1245 5.56275 16.2698L4.81481 16.9715C4.5946 17.178 4.5946 17.5298 4.81291 17.7382L6.59355 19.4322C6.79097 19.6215 7.1023 19.6234 7.30352 19.4379L8.28686 18.5355C8.44252 18.394 8.66653 18.3577 8.85826 18.4475L10.1681 19.0594C10.3541 19.1454 10.4718 19.3328 10.4718 19.5374L10.4718 20.4742C10.4718 20.7648 10.7053 21 10.9939 21L13.1922 21C13.4807 21 13.7142 20.7648 13.7142 20.4742L13.7142 19.4915C13.7142 19.2639 13.8604 19.0613 14.0749 18.9905L15.5879 18.4934C15.7663 18.4361 15.9618 18.4781 16.1004 18.6043L16.9869 19.4131C17.2033 19.61 17.5393 19.5909 17.7311 19.3691L19.3503 17.5049C19.5364 17.2908 19.5193 16.9658 19.3124 16.7727L18.6176 16.1226C18.4638 15.9811 18.4107 15.7612 18.479 15.5643L18.9498 14.2068C19.0238 13.9946 19.2213 13.8531 19.4434 13.8531L20.478 13.8531C20.7665 13.8531 21 13.618 21 13.3273L21 10.8494C21 10.5588 20.7665 10.3237 20.478 10.3237L19.4434 10.3237' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.8337 3.0691L7.50001 7.36067L9.75001 7.36068L9.75001 12.0346L14.25 12.0345L14.25 7.55184L16.5 7.55183L11.8337 3.0691Z' 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='M24.5231 23.75C23.4987 24.9835 21.9591 25.7681 20.2376 25.7681C18.4288 25.7681 16.8208 24.9019 15.8003 23.5589' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.76524 17.1264L5.87007 17.1264C5.38916 17.1264 5 17.5184 5 18.0027L5 22.2887C5 22.7731 5.38916 23.165 5.87007 23.165L7.76524 23.165C8.12592 23.165 8.4518 23.3913 8.57836 23.7322L9.49272 26.1668C9.61611 26.4982 9.53069 26.8742 9.27125 27.1164L8.02468 28.2859C7.65767 28.63 7.65767 29.2163 8.02151 29.5637L10.9892 32.387C11.3183 32.7025 11.8372 32.7057 12.1725 32.3966L13.8114 30.8925C14.0709 30.6567 14.4442 30.5961 14.7638 30.7459L16.9468 31.7656C17.2569 31.909 17.4531 32.2213 17.4531 32.5623L17.4531 34.1237C17.4531 34.608 17.8422 35 18.3231 35L21.9869 35C22.4678 35 22.857 34.608 22.857 34.1237L22.857 32.4858C22.857 32.1066 23.1006 31.7688 23.4581 31.6509L25.9798 30.8224C26.2772 30.7268 26.603 30.7969 26.834 31.0072L28.3115 32.3551C28.6722 32.6833 29.2322 32.6515 29.5518 32.2818L32.2506 29.1749C32.5606 28.818 32.5322 28.2763 32.1873 27.9545L31.0293 26.871C30.773 26.6352 30.6845 26.2687 30.7984 25.9405L31.583 23.6781C31.7064 23.3243 32.0354 23.0885 32.4056 23.0885L34.1299 23.0885C34.6108 23.0885 35 22.6966 35 22.2122L35 18.0824C35 17.598 34.6108 17.2061 34.1299 17.2061L32.4056 17.2061' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19.7228 5.11517L12.5 12.2678L16.25 12.2678L16.25 20.0576L23.75 20.0576L23.75 12.5864L27.5 12.5864L19.7228 5.11517Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
     case 'extra-large':
       icon = (
         <svg
@@ -39,10 +91,27 @@ const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
         </svg>
       )
       break
+
     default:
       break
   }
   return icon
 }
 
+UpgradeIcon.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'])
+}
+
+UpgradeIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default UpgradeIcon

package/src/components/icons/index.js

@@ -13,6 +13,8 @@ import ArrowDownIcon from './ArrowDownIcon'
 import ArrowLeftIcon from './ArrowLeftIcon'
 import ArrowRightIcon from './ArrowRightIcon'
 import ArrowUpIcon from './ArrowUpIcon'
+import BellIcon from './BellIcon'
+import BillingIcon from './BillingIcon'
 import CalendarIcon from './CalendarIcon'
 import Calendar1DayIcon from './Calendar1DayIcon'
 import Calendar7DaysIcon from './Calendar7DaysIcon'
@@ -26,11 +28,25 @@ import CloseIcon from './CloseIcon'
 import CopyPasteIcon from './CopyPasteIcon'
 import DatabaseIcon from './DatabaseIcon'
 import EditIcon from './EditIcon'
+import EnlargeIcon from './EnlargeIcon'
+import EntryIcon from './EntryIcon'
 import GearIcon from './GearIcon'
+import GraphQLIcon from './GraphQLIcon'
+import KeyIcon from './KeyIcon'
+import LayersIcon from './LayersIcon'
+import LensIcon from './LensIcon'
 import LiveIcon from './LiveIcon'
+import LogOutIcon from './LogOutIcon'
 import MetricsIcon from './MetricsIcon'
 import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
+import SendIcon from './SendIcon'
+import SocialDiscordIcon from './SocialDiscordIcon'
+import SocialGitHubIcon from './SocialGitHubIcon'
+import SocialGitLabIcon from './SocialGitLabIcon'
+import SocialLinkedInIcon from './SocialLinkedInIcon'
+import SocialNPMIcon from './SocialNPMIcon'
+import SocialTwitterIcon from './SocialTwitterIcon'
 import StopIcon from './StopIcon'
 import TerminalIcon from './TerminalIcon'
 import Users2Icon from './Users2Icon'
@@ -55,6 +71,8 @@ export default {
   ArrowLeftIcon,
   ArrowRightIcon,
   ArrowUpIcon,
+  BellIcon,
+  BillingIcon,
   CalendarIcon,
   Calendar1DayIcon,
   Calendar7DaysIcon,
@@ -67,13 +85,27 @@ export default {
   CloseIcon,
   CopyPasteIcon,
   DatabaseIcon,
-  GearIcon,
   EditIcon,
+  EnlargeIcon,
+  EntryIcon,
+  GearIcon,
+  GraphQLIcon,
+  KeyIcon,
+  LayersIcon,
+  LensIcon,
   LiveIcon,
+  LogOutIcon,
   MetricsIcon,
   PlayIcon,
   PullRequestIcon,
+  SendIcon,
   StopIcon,
+  SocialDiscordIcon,
+  SocialGitHubIcon,
+  SocialGitLabIcon,
+  SocialLinkedInIcon,
+  SocialNPMIcon,
+  SocialTwitterIcon,
   TerminalIcon,
   UpgradeIcon,
   Users2Icon,