@platformatic/ui-components 0.5.0 → 0.5.1

package/src/components/icons/DeploymentHistoryIcon.jsx

@@ -0,0 +1,118 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const DeploymentHistoryIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+  const filledClassName = styles[`filled-${color}`]
+
+  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='7' y='6' width='7' height='7' rx='1' stroke='none' />
+          <path d='M10 8H12.5' stroke='none' strokeLinecap='round' />
+          <path d='M10 9.5H12.5' stroke='none' strokeLinecap='round' />
+          <path d='M10 11H12.5' stroke='none' strokeLinecap='round' />
+          <path d='M7.2821 5L7.2821 4.98418C7.2821 4.78938 7.2252 4.59882 7.1184 4.43591L5.93956 2.63781C5.74213 2.33666 5.3007 2.33666 5.10327 2.63781L3.92443 4.43591C3.81763 4.59882 3.76073 4.78957 3.76073 4.98437C3.76073 6.36226 3.76073 6.82617 3.76073 7.03551L2 9.13364L4.11282 9.13364L4.46496 9.97289L5.72684 9.97289' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3.76025 11.2322L3.76025 12.9107' stroke='none' strokeLinecap='round' strokeLinejoin='bevel' />
+          <path d='M5.52197 12.0715L5.52197 13.75' stroke='none' strokeLinecap='round' strokeLinejoin='bevel' />
+          <circle cx='8.5' cy='8' r='0.5' fill='none' className={filledClassName} />
+          <circle cx='8.5' cy='9.5' r='0.5' fill='none' className={filledClassName} />
+          <circle cx='8.5' cy='11' r='0.5' 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}
+        >
+          <rect x='10.5' y='9' width='10.5' height='10.5' rx='1' stroke='none' strokeWidth={1.5} />
+          <path d='M15 12H18.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M15 14.25H18.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M15 16.5H18.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M10.9232 7.5L10.9232 7.32699C10.9232 7.13218 10.8663 6.94162 10.7594 6.77871L8.70027 3.63781C8.50284 3.33666 8.06141 3.33666 7.86397 3.63781L5.8048 6.77871C5.69799 6.94162 5.64109 7.13326 5.64109 7.32806C5.64109 9.51036 5.64109 10.2318 5.64109 10.5533L3 13.7005L6.16923 13.7005L6.69744 14.9593L8.59027 14.9593' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.64062 16.8481L5.64062 19.3659' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
+          <path d='M8.2832 18.1072L8.2832 20.6249' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
+          <circle cx='12.75' cy='12' r='0.75' fill='none' className={filledClassName} />
+          <circle cx='12.75' cy='14.25' r='0.75' fill='none' className={filledClassName} />
+          <circle cx='12.75' cy='16.5' r='0.75' 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}
+        >
+          <rect x='17.5' y='15' width='17.5' height='17.5' rx='1' stroke='none' strokeWidth={2} />
+          <path d='M25 20H31.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M25 23.75H31.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M25 27.5H31.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M18.2053 12.5L18.2053 12.0126C18.2053 11.8178 18.1484 11.6272 18.0416 11.4643L14.2217 5.63781C14.0243 5.33666 13.5828 5.33666 13.3854 5.63781L9.56553 11.4643C9.45872 11.6272 9.40182 11.819 9.40182 12.0138C9.40182 15.8069 9.40182 17.0434 9.40182 17.5888L5 22.8341L10.2821 22.8341L11.1624 24.9322L14.3171 24.9322' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.40039 28.0801L9.40039 32.2763' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='bevel' />
+          <path d='M13.8047 30.1787L13.8047 34.375' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='bevel' />
+          <circle cx='21.25' cy='20' r='1.25' fill='none' className={filledClassName} />
+          <circle cx='21.25' cy='23.75' r='1.25' fill='none' className={filledClassName} />
+          <circle cx='21.25' cy='27.5' r='1.25' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+DeploymentHistoryIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default DeploymentHistoryIcon

package/src/components/icons/FailureRateIcon.jsx

@@ -0,0 +1,104 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const FailureRateIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+  const filledClassName = styles[`filled-${color}`]
+
+  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.5 7L7 2L2 12H6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7 5.18188V8.3637' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='6.99991' cy='10.1818' r='0.909091' fill='none' className={filledClassName} />
+          <circle cx='11' cy='11' r='3' stroke='none' />
+          <path d='M9.91191 11.9777L11.6543 10.0223H12.0881L10.3457 11.9777H9.91191ZM10.1343 11.0782C10.0103 11.0782 9.90097 11.0568 9.8062 11.014C9.71142 10.9693 9.63609 10.9069 9.58019 10.8268C9.52673 10.7449 9.5 10.649 9.5 10.5391C9.5 10.4292 9.52673 10.3343 9.58019 10.2542C9.63609 10.1741 9.71142 10.1117 9.8062 10.067C9.90097 10.0223 10.0103 10 10.1343 10C10.2582 10 10.3676 10.0223 10.4623 10.067C10.5571 10.1117 10.6312 10.1741 10.6847 10.2542C10.7382 10.3343 10.7649 10.4292 10.7649 10.5391C10.7649 10.649 10.7382 10.7449 10.6847 10.8268C10.6312 10.9069 10.5571 10.9693 10.4623 11.014C10.3676 11.0568 10.2582 11.0782 10.1343 11.0782ZM10.1343 10.8492C10.2145 10.8492 10.2789 10.824 10.3275 10.7737C10.3761 10.7216 10.4004 10.6434 10.4004 10.5391C10.4004 10.4348 10.3761 10.3575 10.3275 10.3073C10.2789 10.2551 10.2145 10.2291 10.1343 10.2291C10.0565 10.2291 9.9921 10.2551 9.94107 10.3073C9.89247 10.3575 9.86817 10.4348 9.86817 10.5391C9.86817 10.6415 9.89247 10.7188 9.94107 10.7709C9.9921 10.8231 10.0565 10.8492 10.1343 10.8492ZM11.8657 12C11.7442 12 11.6349 11.9786 11.5377 11.9358C11.4429 11.8911 11.3688 11.8287 11.3153 11.7486C11.2618 11.6667 11.2351 11.5708 11.2351 11.4609C11.2351 11.351 11.2618 11.2561 11.3153 11.176C11.3688 11.0959 11.4429 11.0335 11.5377 10.9888C11.6349 10.9441 11.7442 10.9218 11.8657 10.9218C11.9921 10.9218 12.1027 10.9441 12.1974 10.9888C12.2922 11.0335 12.3663 11.0959 12.4198 11.176C12.4733 11.2561 12.5 11.351 12.5 11.4609C12.5 11.5708 12.4733 11.6667 12.4198 11.7486C12.3663 11.8287 12.2922 11.8911 12.1974 11.9358C12.1027 11.9786 11.9921 12 11.8657 12ZM11.8657 11.7709C11.9459 11.7709 12.0103 11.7458 12.0589 11.6955C12.1075 11.6434 12.1318 11.5652 12.1318 11.4609C12.1318 11.3585 12.1075 11.2812 12.0589 11.2291C12.0103 11.1769 11.9459 11.1508 11.8657 11.1508C11.788 11.1508 11.7236 11.1769 11.6725 11.2291C11.6239 11.2793 11.5996 11.3566 11.5996 11.4609C11.5996 11.5652 11.6239 11.6434 11.6725 11.6955C11.7236 11.7458 11.788 11.7709 11.8657 11.7709Z' 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='M14.25 10.5L10.5 3L3 18H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.5 7.77271V12.5454' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='10.5001' cy='15.2728' r='1.36364' fill='none' className={filledClassName} />
+          <circle cx='16.5' cy='16.5' r='4.5' stroke='none' strokeWidth={1.5} />
+          <path d='M14.8679 17.9665L17.4815 15.0335H18.1321L15.5185 17.9665H14.8679ZM15.2014 16.6173C15.0155 16.6173 14.8515 16.5852 14.7093 16.5209C14.5671 16.4539 14.4541 16.3603 14.3703 16.2402C14.2901 16.1173 14.25 15.9735 14.25 15.8087C14.25 15.6439 14.2901 15.5014 14.3703 15.3813C14.4541 15.2612 14.5671 15.1676 14.7093 15.1006C14.8515 15.0335 15.0155 15 15.2014 15C15.3873 15 15.5513 15.0335 15.6935 15.1006C15.8357 15.1676 15.9468 15.2612 16.027 15.3813C16.1072 15.5014 16.1473 15.6439 16.1473 15.8087C16.1473 15.9735 16.1072 16.1173 16.027 16.2402C15.9468 16.3603 15.8357 16.4539 15.6935 16.5209C15.5513 16.5852 15.3873 16.6173 15.2014 16.6173ZM15.2014 16.2737C15.3217 16.2737 15.4183 16.236 15.4912 16.1606C15.5641 16.0824 15.6005 15.9651 15.6005 15.8087C15.6005 15.6522 15.5641 15.5363 15.4912 15.4609C15.4183 15.3827 15.3217 15.3436 15.2014 15.3436C15.0848 15.3436 14.9882 15.3827 14.9116 15.4609C14.8387 15.5363 14.8022 15.6522 14.8022 15.8087C14.8022 15.9623 14.8387 16.0782 14.9116 16.1564C14.9882 16.2346 15.0848 16.2737 15.2014 16.2737ZM17.7986 18C17.6163 18 17.4523 17.9679 17.3065 17.9036C17.1643 17.8366 17.0532 17.743 16.973 17.6229C16.8928 17.5 16.8527 17.3561 16.8527 17.1913C16.8527 17.0265 16.8928 16.8841 16.973 16.764C17.0532 16.6439 17.1643 16.5503 17.3065 16.4832C17.4523 16.4162 17.6163 16.3827 17.7986 16.3827C17.9882 16.3827 18.154 16.4162 18.2962 16.4832C18.4383 16.5503 18.5495 16.6439 18.6297 16.764C18.7099 16.8841 18.75 17.0265 18.75 17.1913C18.75 17.3561 18.7099 17.5 18.6297 17.6229C18.5495 17.743 18.4383 17.8366 18.2962 17.9036C18.154 17.9679 17.9882 18 17.7986 18ZM17.7986 17.6564C17.9189 17.6564 18.0155 17.6187 18.0884 17.5433C18.1613 17.4651 18.1978 17.3478 18.1978 17.1913C18.1978 17.0377 18.1613 16.9218 18.0884 16.8436C18.0155 16.7654 17.9189 16.7263 17.7986 16.7263C17.682 16.7263 17.5854 16.7654 17.5088 16.8436C17.4359 16.919 17.3995 17.0349 17.3995 17.1913C17.3995 17.3478 17.4359 17.4651 17.5088 17.5433C17.5854 17.6187 17.682 17.6564 17.7986 17.6564Z' 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='M23.75 17.5L17.5 5L5 30H15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M17.5 12.9546V20.9091' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='17.5' cy='25.4546' r='2.27273' fill='none' className={filledClassName} />
+          <circle cx='27.5' cy='27.5' r='7.5' stroke='none' strokeWidth={2} />
+          <path d='M24.7798 29.9441L29.1358 25.0559H30.2202L25.8642 29.9441H24.7798ZM25.3357 27.6955C25.0258 27.6955 24.7524 27.642 24.5155 27.5349C24.2786 27.4232 24.0902 27.2672 23.9505 27.067C23.8168 26.8622 23.75 26.6224 23.75 26.3478C23.75 26.0731 23.8168 25.8357 23.9505 25.6355C24.0902 25.4353 24.2786 25.2793 24.5155 25.1676C24.7524 25.0559 25.0258 25 25.3357 25C25.6455 25 25.9189 25.0559 26.1558 25.1676C26.3928 25.2793 26.5781 25.4353 26.7117 25.6355C26.8454 25.8357 26.9122 26.0731 26.9122 26.3478C26.9122 26.6224 26.8454 26.8622 26.7117 27.067C26.5781 27.2672 26.3928 27.4232 26.1558 27.5349C25.9189 27.642 25.6455 27.6955 25.3357 27.6955ZM25.3357 27.1229C25.5361 27.1229 25.6971 27.0601 25.8187 26.9344C25.9402 26.804 26.0009 26.6085 26.0009 26.3478C26.0009 26.0871 25.9402 25.8939 25.8187 25.7682C25.6971 25.6378 25.5361 25.5726 25.3357 25.5726C25.1413 25.5726 24.9803 25.6378 24.8527 25.7682C24.7312 25.8939 24.6704 26.0871 24.6704 26.3478C24.6704 26.6038 24.7312 26.797 24.8527 26.9274C24.9803 27.0577 25.1413 27.1229 25.3357 27.1229ZM29.6643 30C29.3606 30 29.0872 29.9465 28.8442 29.8394C28.6072 29.7277 28.4219 29.5717 28.2883 29.3715C28.1546 29.1667 28.0878 28.9269 28.0878 28.6522C28.0878 28.3776 28.1546 28.1401 28.2883 27.9399C28.4219 27.7398 28.6072 27.5838 28.8442 27.4721C29.0872 27.3603 29.3606 27.3045 29.6643 27.3045C29.9803 27.3045 30.2567 27.3603 30.4936 27.4721C30.7306 27.5838 30.9159 27.7398 31.0495 27.9399C31.1832 28.1401 31.25 28.3776 31.25 28.6522C31.25 28.9269 31.1832 29.1667 31.0495 29.3715C30.9159 29.5717 30.7306 29.7277 30.4936 29.8394C30.2567 29.9465 29.9803 30 29.6643 30ZM29.6643 29.4274C29.8648 29.4274 30.0258 29.3645 30.1473 29.2388C30.2688 29.1085 30.3296 28.9129 30.3296 28.6522C30.3296 28.3962 30.2688 28.203 30.1473 28.0726C30.0258 27.9423 29.8648 27.8771 29.6643 27.8771C29.4699 27.8771 29.3089 27.9423 29.1813 28.0726C29.0598 28.1983 28.9991 28.3915 28.9991 28.6522C28.9991 28.9129 29.0598 29.1085 29.1813 29.2388C29.3089 29.3645 29.4699 29.4274 29.6643 29.4274Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+FailureRateIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default FailureRateIcon

package/src/components/icons/K8SMetricsIcon.jsx

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const K8SMetricsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+  const filledClassName = styles[`filled-${color}`]
+
+  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='M10.7583 10.5955C10.7473 10.5931 10.7358 10.5923 10.7248 10.5927C10.7051 10.5939 10.6861 10.5988 10.6684 10.6077C10.5974 10.6431 10.5662 10.7293 10.5974 10.8037L10.5962 10.8053L10.9327 11.6427C11.2546 11.4309 11.4988 11.115 11.627 10.7443L10.7599 10.5935L10.7583 10.5955ZM9.4095 10.7142C9.39451 10.6463 9.33652 10.5976 9.26867 10.5967C9.2588 10.5967 9.24934 10.5976 9.23987 10.5996L9.23829 10.598L8.37905 10.7484C8.50806 11.1163 8.75147 11.4297 9.07102 11.6407L9.40398 10.8114L9.40122 10.8081C9.41345 10.7789 9.41621 10.7463 9.4095 10.715V10.7142ZM10.1291 11.0394C10.0908 10.9658 10.0021 10.9382 9.93065 10.9776C9.905 10.9919 9.8841 11.0134 9.87068 11.0398H9.86989L9.44738 11.8272C9.74996 11.9333 10.0754 11.9508 10.3871 11.8772C10.4447 11.8638 10.5015 11.8476 10.5563 11.8285L10.1326 11.0394H10.1295H10.1291ZM11.4669 9.21014L10.8167 9.80974V9.81177C10.756 9.86665 10.7496 9.96258 10.8033 10.0256C10.8222 10.048 10.8471 10.0638 10.8747 10.0719L10.8755 10.0756L11.7178 10.3256C11.7541 9.93575 11.6661 9.54429 11.4669 9.21054V9.21014ZM10.2589 9.27721C10.2624 9.36095 10.3315 9.42518 10.4123 9.42152C10.4411 9.4203 10.4688 9.41014 10.492 9.39266L10.4948 9.39388L11.2065 8.87395C10.9355 8.60078 10.5851 8.42639 10.2088 8.37842L10.2581 9.2768H10.2589V9.27721ZM9.50537 9.39632C9.57086 9.4455 9.66278 9.43046 9.71051 9.36298C9.72748 9.339 9.73734 9.31014 9.73852 9.28046L9.74207 9.27884L9.79139 8.37882C9.73182 8.38614 9.67264 8.39671 9.61386 8.41053C9.3018 8.48289 9.01579 8.64346 8.78776 8.87436L9.50379 9.39754L9.50537 9.39672V9.39632ZM9.12349 10.076C9.2016 10.054 9.24776 9.97071 9.22645 9.89023C9.21896 9.86136 9.20318 9.83535 9.18109 9.81583L9.18187 9.81218L8.52818 9.20973C8.32856 9.54429 8.24295 9.93779 8.28477 10.328L9.12309 10.0788L9.12388 10.076H9.12349ZM9.75864 10.341L9.99969 10.4606L10.2403 10.3415L10.2999 10.074L10.1334 9.85933H9.86555L9.69868 10.0736L9.75864 10.341Z' fill='none' className={filledClassName} />
+          <path d='M13.9873 10.8678L13.3 7.79138C13.2626 7.63041 13.1568 7.49504 13.0125 7.42268L10.23 6.05396C10.084 5.98201 9.91439 5.98201 9.76803 6.05396L6.98676 7.42349C6.84198 7.49585 6.73625 7.63122 6.69877 7.7922L6.01272 10.8687C5.99576 10.9463 5.99576 11.0272 6.01272 11.1048C6.01785 11.1284 6.02416 11.152 6.03205 11.1748C6.04547 11.2138 6.06322 11.2508 6.08492 11.2857C6.09439 11.3008 6.10425 11.315 6.11529 11.3288L8.04049 13.7955C8.04877 13.8061 8.05824 13.8163 8.06731 13.826C8.09769 13.8593 8.13162 13.8882 8.1687 13.9126C8.21565 13.9431 8.26693 13.9663 8.32098 13.9809C8.36516 13.9935 8.41053 14 8.4563 14H8.48628L11.5437 13.9992C11.5622 13.9992 11.5808 13.998 11.5993 13.9959C11.6258 13.9927 11.6522 13.9878 11.6778 13.9805C11.6964 13.9756 11.7145 13.9695 11.7323 13.9626C11.7461 13.9573 11.7603 13.9516 11.7733 13.9451C11.7934 13.9354 11.8128 13.924 11.8317 13.9118C11.8802 13.8805 11.9232 13.8411 11.9595 13.7951L12.0183 13.7199L13.8843 11.328C13.9202 11.2817 13.9482 11.2296 13.9676 11.1739C13.9754 11.1512 13.9821 11.1276 13.9873 11.104C14.0042 11.0264 14.0042 10.9455 13.9873 10.8678ZM11.1015 12.0642C11.1094 12.0878 11.1184 12.111 11.1291 12.1333C11.1121 12.1638 11.1074 12.2004 11.1161 12.2345C11.1567 12.3301 11.206 12.4211 11.2636 12.5069C11.296 12.5508 11.3255 12.5963 11.3528 12.6435C11.3595 12.6565 11.3681 12.676 11.3745 12.6898C11.4218 12.7715 11.3962 12.8772 11.3169 12.9264C11.2376 12.9756 11.135 12.9488 11.0873 12.8671C11.0817 12.8573 11.077 12.8471 11.0735 12.8366C11.0671 12.8232 11.0585 12.8053 11.0529 12.7927C11.034 12.7414 11.0178 12.6886 11.0044 12.6353C10.9756 12.5358 10.9373 12.439 10.89 12.3467C10.8695 12.3183 10.8391 12.2992 10.8052 12.2935C10.8001 12.2841 10.7803 12.2467 10.7697 12.2276C10.2746 12.4207 9.7274 12.4195 9.23308 12.2236L9.19521 12.2939C9.16838 12.2984 9.14313 12.3105 9.12341 12.3301C9.0666 12.426 9.0232 12.5297 8.9944 12.6382C8.98138 12.6914 8.96521 12.7439 8.94627 12.7955C8.94075 12.8081 8.93207 12.8256 8.92576 12.839V12.8398C8.89459 12.9293 8.79912 12.976 8.71194 12.9443C8.62514 12.9122 8.57978 12.8138 8.61055 12.724C8.61449 12.713 8.61923 12.7028 8.62475 12.6927C8.63106 12.6788 8.63935 12.6593 8.64605 12.6467C8.67327 12.5992 8.70286 12.5536 8.73521 12.5097C8.79399 12.4219 8.84449 12.3284 8.88591 12.2305C8.89025 12.1971 8.88512 12.1634 8.87092 12.1333L8.9013 12.0585C8.44564 11.7813 8.104 11.3418 7.94107 10.8231L7.86848 10.8357C7.84047 10.815 7.80733 10.8032 7.77262 10.8012C7.6732 10.8207 7.57615 10.8504 7.48226 10.889C7.43374 10.9113 7.38363 10.9313 7.33274 10.9479C7.32051 10.9512 7.30355 10.9548 7.28974 10.9577C7.28856 10.9577 7.28777 10.9585 7.28658 10.9589C7.2858 10.9589 7.28501 10.9589 7.28422 10.9589C7.19664 10.9886 7.10196 10.9394 7.07316 10.8491C7.04436 10.7589 7.09209 10.6613 7.17967 10.6317C7.18954 10.6284 7.19979 10.626 7.21005 10.6243H7.21242L7.214 10.6231C7.2278 10.6199 7.24595 10.615 7.25857 10.6126C7.31144 10.6048 7.3647 10.6004 7.41835 10.5991C7.51934 10.5922 7.61915 10.5756 7.7166 10.5487C7.7454 10.5296 7.76985 10.5044 7.788 10.4743L7.85783 10.4532C7.78208 9.91174 7.9032 9.36051 8.1975 8.90563L8.14424 8.85644C8.14227 8.82067 8.13083 8.78652 8.11071 8.75725C8.03417 8.68936 7.95093 8.6292 7.86296 8.57798C7.81562 8.55318 7.76946 8.52513 7.72488 8.49465C7.71462 8.48692 7.70121 8.47513 7.69056 8.46619L7.68819 8.46456C7.60929 8.40603 7.59114 8.29302 7.64716 8.21172C7.67951 8.17106 7.72883 8.1483 7.77972 8.15115C7.82193 8.15318 7.86296 8.16903 7.8957 8.19627C7.90714 8.20521 7.92253 8.21781 7.93279 8.22676C7.97145 8.26456 8.00814 8.3044 8.04246 8.34668C8.11031 8.42391 8.18566 8.49383 8.26693 8.55562C8.29731 8.57229 8.33282 8.57554 8.36595 8.56538C8.38568 8.58042 8.4058 8.59505 8.42592 8.60928C8.71864 8.28895 9.09737 8.06578 9.51397 7.96903C9.61299 7.94586 9.71359 7.93 9.81498 7.92147L9.81892 7.84911C9.84496 7.82553 9.8635 7.79464 9.87297 7.76049C9.87652 7.65642 9.87021 7.55236 9.85443 7.44951C9.84378 7.39544 9.83628 7.34097 9.83155 7.2865C9.83115 7.2739 9.83155 7.25682 9.83194 7.2426C9.83194 7.24097 9.83155 7.23935 9.83155 7.23772C9.82208 7.143 9.88914 7.05845 9.98106 7.04869C10.073 7.03894 10.155 7.10804 10.1645 7.20276C10.1657 7.21414 10.1657 7.22593 10.1645 7.23731C10.1645 7.25235 10.1653 7.27227 10.1645 7.28609C10.1598 7.34097 10.1523 7.39544 10.1416 7.4491C10.1255 7.55195 10.1191 7.65602 10.1227 7.76049C10.1294 7.79545 10.1487 7.82594 10.1771 7.84626C10.1775 7.85887 10.1799 7.89992 10.1811 7.92269C10.7074 7.97187 11.1985 8.21659 11.563 8.61091L11.6266 8.56416C11.6605 8.57026 11.6956 8.56619 11.7275 8.55278C11.8088 8.49058 11.8838 8.42066 11.952 8.34342C11.9863 8.30115 12.023 8.26131 12.0621 8.2235C12.0723 8.21456 12.0877 8.20237 12.0992 8.19302C12.1651 8.12635 12.2708 8.12675 12.3359 8.19464C12.4006 8.26253 12.4002 8.37147 12.3343 8.43855C12.326 8.44708 12.3165 8.45481 12.3067 8.46131C12.2956 8.47066 12.2806 8.48367 12.27 8.4918C12.2254 8.52229 12.1793 8.54993 12.1315 8.57513C12.0435 8.62635 11.9607 8.68652 11.8838 8.7544C11.8613 8.78123 11.8502 8.81619 11.8526 8.85156C11.8431 8.8605 11.8108 8.89018 11.7934 8.90603C12.0885 9.3597 12.212 9.90889 12.1402 10.45L12.2073 10.4703C12.2242 10.5016 12.2491 10.5272 12.2791 10.5447C12.3769 10.5715 12.4767 10.5886 12.5777 10.5955C12.631 10.5967 12.6842 10.6012 12.7375 10.6085C12.7513 10.6113 12.7718 10.617 12.786 10.6203C12.8775 10.6325 12.9418 10.7191 12.93 10.8134C12.9182 10.9077 12.8341 10.9739 12.7426 10.9618C12.7324 10.9605 12.7221 10.9581 12.7122 10.9544H12.7099C12.7099 10.9544 12.7079 10.9532 12.7067 10.9528C12.6929 10.9496 12.6755 10.9467 12.6637 10.9435C12.6128 10.9268 12.5631 10.9069 12.5142 10.8841C12.4203 10.8451 12.3232 10.8158 12.2238 10.7963C12.1895 10.7951 12.156 10.8081 12.1307 10.8321C12.1071 10.8276 12.0834 10.8231 12.0597 10.8191C11.8988 11.341 11.5571 11.7837 11.0999 12.063L11.1015 12.0642Z' fill='none' className={filledClassName} />
+          <rect x='3.5' y='4.25' width='1.5' height='5.25' rx='0.5' stroke='none' />
+          <path d='M6.5 6.5V4.5C6.5 4.22386 6.72386 4 7 4H7.5C7.77614 4 8 4.22386 8 4.5V5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.5 5.5V2.5C9.5 2.22386 9.72386 2 10 2H10.5C10.7761 2 11 2.22386 11 2.5V5' stroke='none' strokeLinecap='round' />
+          <path d='M2 2V11H5' 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='M16.1375 15.8933C16.1209 15.8896 16.1038 15.8884 16.0872 15.889C16.0576 15.8908 16.0292 15.8982 16.0026 15.9116C15.896 15.9646 15.8493 16.0939 15.896 16.2055L15.8943 16.2079L16.399 17.464C16.8819 17.1463 17.2482 16.6726 17.4405 16.1165L16.1399 15.8902L16.1375 15.8933ZM14.1143 16.0713C14.0918 15.9695 14.0048 15.8963 13.903 15.8951C13.8882 15.8951 13.874 15.8963 13.8598 15.8994L13.8574 15.8969L12.5686 16.1226C12.7621 16.6744 13.1272 17.1445 13.6065 17.461L14.106 16.2171L14.1018 16.2122C14.1202 16.1683 14.1243 16.1195 14.1143 16.0725V16.0713ZM15.1936 16.5591C15.1362 16.4488 15.0031 16.4073 14.896 16.4665C14.8575 16.4878 14.8261 16.5201 14.806 16.5598H14.8048L14.1711 17.7409C14.6249 17.9 15.1131 17.9262 15.5806 17.8159C15.667 17.7957 15.7522 17.7714 15.8345 17.7427L15.199 16.5591H15.1942H15.1936ZM17.2003 13.8152L16.2251 14.7146V14.7177C16.1339 14.8 16.1245 14.9439 16.2049 15.0384C16.2333 15.0719 16.2706 15.0957 16.3121 15.1079L16.3132 15.1134L17.5766 15.4884C17.6311 14.9036 17.4991 14.3164 17.2003 13.8158V13.8152ZM15.3883 13.9158C15.3936 14.0414 15.4972 14.1378 15.6185 14.1323C15.6617 14.1305 15.7031 14.1152 15.738 14.089L15.7422 14.0908L16.8097 13.3109C16.4032 12.9012 15.8777 12.6396 15.3132 12.5676L15.3871 13.9152H15.3883V13.9158ZM14.2581 14.0945C14.3563 14.1683 14.4942 14.1457 14.5658 14.0445C14.5912 14.0085 14.606 13.9652 14.6078 13.9207L14.6131 13.9183L14.6871 12.5682C14.5977 12.5792 14.509 12.5951 14.4208 12.6158C13.9527 12.7243 13.5237 12.9652 13.1816 13.3115L14.2557 14.0963L14.2581 14.0951V14.0945ZM13.6852 15.114C13.8024 15.0811 13.8716 14.9561 13.8397 14.8353C13.8284 14.792 13.8048 14.753 13.7716 14.7238L13.7728 14.7183L12.7923 13.8146C12.4928 14.3164 12.3644 14.9067 12.4272 15.4921L13.6846 15.1183L13.6858 15.114H13.6852ZM14.638 15.5116L14.9995 15.6908L15.3605 15.5122L15.4499 15.111L15.2001 14.789H14.7983L14.548 15.1103L14.638 15.5116Z' fill='none' className={filledClassName} />
+          <path d='M20.9809 16.3018L19.9501 11.6871C19.8939 11.4456 19.7353 11.2426 19.5187 11.134L15.345 9.08095C15.126 8.97302 14.8716 8.97302 14.652 9.08095L10.4801 11.1352C10.263 11.2438 10.1044 11.4468 10.0482 11.6883L9.01908 16.303C8.99364 16.4195 8.99364 16.5408 9.01908 16.6573C9.02678 16.6926 9.03625 16.728 9.04808 16.7621C9.0682 16.8207 9.09483 16.8762 9.12738 16.9286C9.14158 16.9512 9.15637 16.9725 9.17294 16.9932L12.0607 20.6933C12.0732 20.7091 12.0874 20.7244 12.101 20.739C12.1465 20.789 12.1974 20.8323 12.2531 20.8689C12.3235 20.9146 12.4004 20.9494 12.4815 20.9713C12.5477 20.9902 12.6158 21 12.6844 21H12.7294L17.3156 20.9988C17.3434 20.9988 17.3712 20.997 17.399 20.9939C17.4386 20.989 17.4783 20.9817 17.5168 20.9707C17.5446 20.9634 17.5718 20.9543 17.5984 20.9439C17.6191 20.936 17.6404 20.9274 17.66 20.9177C17.6901 20.903 17.7191 20.886 17.7475 20.8677C17.8203 20.8207 17.8848 20.7616 17.9393 20.6927L18.0274 20.5799L20.8265 16.992C20.8803 16.9225 20.9223 16.8445 20.9513 16.7609C20.9632 16.7268 20.9732 16.6914 20.9809 16.656C21.0064 16.5396 21.0064 16.4182 20.9809 16.3018ZM16.6522 18.0963C16.664 18.1317 16.6776 18.1664 16.6936 18.2C16.6682 18.2457 16.6611 18.3006 16.6741 18.3518C16.735 18.4951 16.809 18.6317 16.8954 18.7603C16.9439 18.8262 16.9883 18.8945 17.0291 18.9652C17.0392 18.9847 17.0522 19.014 17.0617 19.0347C17.1327 19.1573 17.0942 19.3158 16.9753 19.3896C16.8564 19.4634 16.7025 19.4232 16.6309 19.3006C16.6226 19.286 16.6155 19.2707 16.6102 19.2549C16.6007 19.2347 16.5877 19.2079 16.5794 19.189C16.551 19.1122 16.5267 19.0329 16.5066 18.953C16.4634 18.8036 16.406 18.6585 16.335 18.5201C16.3042 18.4774 16.2587 18.4487 16.2078 18.4402C16.2001 18.4262 16.1705 18.3701 16.1545 18.3414C15.4119 18.6311 14.5911 18.6292 13.8496 18.3353L13.7928 18.4408C13.7526 18.4475 13.7147 18.4658 13.6851 18.4951C13.5999 18.639 13.5348 18.7945 13.4916 18.9573C13.4721 19.0372 13.4478 19.1158 13.4194 19.1933C13.4111 19.2122 13.3981 19.2384 13.3886 19.2585V19.2597C13.3419 19.3939 13.1987 19.464 13.0679 19.4164C12.9377 19.3683 12.8697 19.2207 12.9158 19.086C12.9217 19.0695 12.9288 19.0542 12.9371 19.039C12.9466 19.0183 12.959 18.989 12.9691 18.9701C13.0099 18.8988 13.0543 18.8305 13.1028 18.7646C13.191 18.6329 13.2667 18.4927 13.3289 18.3457C13.3354 18.2957 13.3277 18.2451 13.3064 18.2L13.3519 18.0878C12.6685 17.6719 12.156 17.0128 11.9116 16.2347L11.8027 16.2536C11.7607 16.2225 11.711 16.2048 11.6589 16.2018C11.5098 16.231 11.3642 16.2755 11.2234 16.3335C11.1506 16.367 11.0754 16.3969 10.9991 16.4219C10.9808 16.4268 10.9553 16.4323 10.9346 16.4365C10.9328 16.4365 10.9317 16.4377 10.9299 16.4384C10.9287 16.4384 10.9275 16.4384 10.9263 16.4384C10.795 16.4829 10.6529 16.4091 10.6097 16.2737C10.5665 16.1384 10.6381 15.992 10.7695 15.9475C10.7843 15.9426 10.7997 15.939 10.8151 15.9365H10.8186L10.821 15.9347C10.8417 15.9298 10.8689 15.9225 10.8879 15.9188C10.9672 15.9073 11.047 15.9005 11.1275 15.8987C11.279 15.8883 11.4287 15.8633 11.5749 15.8231C11.6181 15.7944 11.6548 15.7566 11.682 15.7115L11.7867 15.6798C11.6731 14.8676 11.8548 14.0408 12.2962 13.3584L12.2164 13.2847C12.2134 13.231 12.1962 13.1798 12.1661 13.1359C12.0513 13.034 11.9264 12.9438 11.7944 12.867C11.7234 12.8298 11.6542 12.7877 11.5873 12.742C11.5719 12.7304 11.5518 12.7127 11.5358 12.6993L11.5323 12.6968C11.4139 12.609 11.3867 12.4395 11.4707 12.3176C11.5193 12.2566 11.5932 12.2224 11.6696 12.2267C11.7329 12.2298 11.7944 12.2535 11.8436 12.2944C11.8607 12.3078 11.8838 12.3267 11.8992 12.3401C11.9572 12.3968 12.0122 12.4566 12.0637 12.52C12.1655 12.6359 12.2785 12.7407 12.4004 12.8334C12.446 12.8584 12.4992 12.8633 12.5489 12.8481C12.5785 12.8706 12.6087 12.8926 12.6389 12.9139C13.078 12.4334 13.6461 12.0987 14.271 11.9535C14.4195 11.9188 14.5704 11.895 14.7225 11.8822L14.7284 11.7737C14.7674 11.7383 14.7953 11.692 14.8095 11.6407C14.8148 11.4846 14.8053 11.3285 14.7816 11.1743C14.7657 11.0932 14.7544 11.0115 14.7473 10.9297C14.7467 10.9108 14.7473 10.8852 14.7479 10.8639C14.7479 10.8615 14.7473 10.859 14.7473 10.8566C14.7331 10.7145 14.8337 10.5877 14.9716 10.573C15.1095 10.5584 15.2326 10.6621 15.2468 10.8041C15.2485 10.8212 15.2485 10.8389 15.2468 10.856C15.2468 10.8785 15.2479 10.9084 15.2468 10.9291C15.2397 11.0115 15.2284 11.0932 15.2124 11.1737C15.1882 11.3279 15.1787 11.484 15.184 11.6407C15.1941 11.6932 15.2231 11.7389 15.2657 11.7694C15.2663 11.7883 15.2698 11.8499 15.2716 11.884C16.061 11.9578 16.7978 12.3249 17.3446 12.9164L17.4398 12.8462C17.4907 12.8554 17.5434 12.8493 17.5913 12.8292C17.7132 12.7359 17.8257 12.631 17.928 12.5151C17.9795 12.4517 18.0345 12.392 18.0931 12.3353C18.1085 12.3218 18.1316 12.3035 18.1488 12.2895C18.2476 12.1895 18.4062 12.1901 18.5038 12.292C18.6009 12.3938 18.6003 12.5572 18.5014 12.6578C18.489 12.6706 18.4748 12.6822 18.46 12.692C18.4434 12.706 18.421 12.7255 18.405 12.7377C18.3381 12.7834 18.2689 12.8249 18.1973 12.8627C18.0653 12.9395 17.941 13.0298 17.8257 13.1316C17.7919 13.1719 17.7754 13.2243 17.7789 13.2773C17.7647 13.2908 17.7162 13.3353 17.6901 13.359C18.1328 14.0395 18.318 14.8633 18.2103 15.6749L18.3109 15.7054C18.3363 15.7524 18.3736 15.7908 18.4186 15.817C18.5654 15.8573 18.7151 15.8829 18.8666 15.8932C18.9464 15.8951 19.0263 15.9018 19.1062 15.9127C19.1269 15.917 19.1577 15.9255 19.179 15.9304C19.3163 15.9487 19.4128 16.0786 19.395 16.2201C19.3772 16.3615 19.2512 16.4609 19.1139 16.4426C19.0985 16.4408 19.0831 16.4371 19.0683 16.4316H19.0648C19.0648 16.4316 19.0618 16.4298 19.0601 16.4292C19.0394 16.4243 19.0133 16.4201 18.9956 16.4152C18.9192 16.3902 18.8447 16.3603 18.7713 16.3262C18.6304 16.2676 18.4849 16.2237 18.3357 16.1945C18.2843 16.1926 18.234 16.2121 18.1961 16.2481C18.1606 16.2414 18.1251 16.2347 18.0896 16.2286C17.8481 17.0115 17.3357 17.6756 16.6498 18.0945L16.6522 18.0963Z' fill='none' className={filledClassName} />
+          <rect x='5.24976' y='6.375' width='2.25' height='7.875' rx='0.5' stroke='none' strokeWidth={1.5} />
+          <path d='M9.75 9.75V6.5C9.75 6.22386 9.97386 6 10.25 6H11.5C11.7761 6 12 6.22386 12 6.5V7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.2502 8.25V3.5C14.2502 3.22386 14.4741 3 14.7502 3H16.0002C16.2764 3 16.5002 3.22386 16.5002 3.5V7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M3 3V16.5H7.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}
+        >
+          <path d='M26.8956 26.4888C26.8679 26.4827 26.8393 26.4807 26.8117 26.4817C26.7624 26.4847 26.7151 26.4969 26.6707 26.5193C26.4932 26.6077 26.4152 26.8232 26.4932 27.0091L26.4902 27.0132L27.3315 29.1067C28.1363 28.5772 28.7468 27.7876 29.0673 26.8608L26.8995 26.4837L26.8956 26.4888ZM23.5235 26.7855C23.486 26.6158 23.3411 26.4939 23.1714 26.4918C23.1468 26.4918 23.1231 26.4939 23.0994 26.499L23.0955 26.4949L20.9474 26.8709C21.2699 27.7906 21.8784 28.5742 22.6773 29.1016L23.5097 27.0284L23.5028 27.0203C23.5334 26.9471 23.5403 26.8658 23.5235 26.7876V26.7855ZM25.3225 27.5986C25.2268 27.4146 25.0049 27.3455 24.8264 27.4441C24.7623 27.4797 24.71 27.5335 24.6765 27.5996H24.6745L23.6182 29.5681C24.3747 29.8334 25.1883 29.8771 25.9675 29.6931C26.1115 29.6596 26.2535 29.6189 26.3906 29.5712L25.3313 27.5986H25.3235H25.3225ZM28.6669 23.0253L27.0415 24.5243V24.5294C26.8896 24.6666 26.8739 24.9065 27.008 25.064C27.0553 25.1199 27.1175 25.1595 27.1865 25.1798L27.1885 25.189L29.2942 25.814C29.3849 24.8394 29.165 23.8607 28.6669 23.0264V23.0253ZM25.6469 23.193C25.6558 23.4024 25.8284 23.5629 26.0306 23.5538C26.1026 23.5508 26.1716 23.5253 26.2298 23.4816L26.2367 23.4847L28.016 22.1849C27.3384 21.5019 26.4626 21.066 25.5217 20.946L25.645 23.192H25.6469V23.193ZM23.7632 23.4908C23.9269 23.6138 24.1567 23.5762 24.276 23.4075C24.3184 23.3475 24.3431 23.2753 24.3461 23.2012L24.3549 23.1971L24.4782 20.9471C24.3293 20.9654 24.1814 20.9918 24.0344 21.0263C23.2543 21.2072 22.5392 21.6087 21.9692 22.1859L23.7592 23.4938L23.7632 23.4918V23.4908ZM22.8085 25.19C23.0038 25.1351 23.1191 24.9268 23.0659 24.7256C23.0472 24.6534 23.0077 24.5884 22.9525 24.5396L22.9544 24.5304L21.3202 23.0243C20.8211 23.8607 20.6071 24.8445 20.7117 25.8201L22.8075 25.1971L22.8095 25.19H22.8085ZM24.3964 25.8526L24.999 26.1514L25.6006 25.8536L25.7495 25.1849L25.3333 24.6483H24.6636L24.2465 25.1839L24.3964 25.8526Z' fill='none' className={filledClassName} />
+          <path d='M34.9682 27.1696L33.2501 19.4785C33.1564 19.076 32.8921 18.7376 32.5311 18.5567L25.575 15.1349C25.2101 14.955 24.786 14.955 24.4201 15.1349L17.4669 18.5587C17.1049 18.7396 16.8406 19.078 16.7469 19.4805L15.0318 27.1716C14.9894 27.3658 14.9894 27.568 15.0318 27.7621C15.0446 27.821 15.0604 27.88 15.0801 27.9369C15.1137 28.0345 15.158 28.1269 15.2123 28.2143C15.236 28.2519 15.2606 28.2875 15.2882 28.3221L20.1012 34.4888C20.1219 34.5152 20.1456 34.5406 20.1683 34.565C20.2442 34.6484 20.329 34.7205 20.4218 34.7815C20.5391 34.8577 20.6673 34.9157 20.8025 34.9522C20.9129 34.9837 21.0263 35 21.1407 35H21.2157L28.8593 34.998C28.9056 34.998 28.952 34.9949 28.9983 34.9898C29.0644 34.9817 29.1305 34.9695 29.1946 34.9512C29.2409 34.939 29.2863 34.9238 29.3307 34.9065C29.3652 34.8933 29.4007 34.8791 29.4333 34.8628C29.4836 34.8384 29.5319 34.81 29.5792 34.7795C29.7005 34.7012 29.808 34.6026 29.8988 34.4878L30.0457 34.2998L34.7108 28.32C34.8005 28.2042 34.8706 28.0741 34.9189 27.9349C34.9386 27.878 34.9554 27.819 34.9682 27.7601C35.0106 27.566 35.0106 27.3637 34.9682 27.1696ZM27.7537 30.1605C27.7734 30.2195 27.7961 30.2774 27.8227 30.3333C27.7803 30.4095 27.7684 30.501 27.7901 30.5863C27.8917 30.8252 28.015 31.0528 28.159 31.2672C28.2399 31.377 28.3139 31.4908 28.3819 31.6087C28.3987 31.6412 28.4204 31.69 28.4362 31.7246C28.5545 31.9288 28.4904 32.1931 28.2922 32.316C28.0939 32.439 27.8375 32.3719 27.7181 32.1676C27.7043 32.1433 27.6925 32.1178 27.6836 32.0914C27.6679 32.0579 27.6462 32.0132 27.6323 31.9817C27.585 31.8536 27.5446 31.7215 27.511 31.5884C27.439 31.3394 27.3434 31.0975 27.225 30.8668C27.1737 30.7957 27.0978 30.7479 27.013 30.7337C27.0001 30.7103 26.9508 30.6168 26.9242 30.569C25.6864 31.0518 24.3185 31.0487 23.0827 30.5589L22.988 30.7347C22.921 30.7459 22.8578 30.7764 22.8085 30.8252C22.6665 31.065 22.558 31.3241 22.486 31.5955C22.4535 31.7286 22.413 31.8597 22.3657 31.9888C22.3519 32.0203 22.3302 32.064 22.3144 32.0975V32.0996C22.2365 32.3231 21.9978 32.44 21.7798 32.3607C21.5629 32.2805 21.4494 32.0345 21.5264 31.8099C21.5362 31.7825 21.5481 31.7571 21.5619 31.7317C21.5777 31.6971 21.5984 31.6483 21.6151 31.6168C21.6832 31.4979 21.7572 31.3841 21.838 31.2743C21.985 31.0548 22.1112 30.8211 22.2148 30.5762C22.2256 30.4928 22.2128 30.4085 22.1773 30.3333L22.2532 30.1463C21.1141 29.4532 20.26 28.3546 19.8527 27.0578L19.6712 27.0893C19.6012 27.0375 19.5183 27.008 19.4315 27.0029C19.183 27.0517 18.9404 27.1259 18.7056 27.2225C18.5843 27.2784 18.4591 27.3282 18.3319 27.3698C18.3013 27.378 18.2589 27.3871 18.2244 27.3942C18.2214 27.3942 18.2194 27.3962 18.2165 27.3973C18.2145 27.3973 18.2125 27.3973 18.2105 27.3973C17.9916 27.4714 17.7549 27.3485 17.6829 27.1229C17.6109 26.8973 17.7302 26.6533 17.9492 26.5792C17.9738 26.571 17.9995 26.5649 18.0251 26.5609H18.031L18.035 26.5578C18.0695 26.5497 18.1149 26.5375 18.1464 26.5314C18.2786 26.5121 18.4117 26.5009 18.5459 26.4979C18.7984 26.4806 19.0479 26.4389 19.2915 26.3718C19.3635 26.3241 19.4246 26.2611 19.47 26.1859L19.6446 26.133C19.4552 24.7793 19.758 23.4013 20.4937 22.2641L20.3606 22.1411C20.3557 22.0517 20.3271 21.9663 20.2768 21.8931C20.0854 21.7234 19.8773 21.573 19.6574 21.4449C19.539 21.383 19.4237 21.3128 19.3122 21.2366C19.2866 21.2173 19.253 21.1878 19.2264 21.1655L19.2205 21.1614C19.0232 21.0151 18.9779 20.7325 19.1179 20.5293C19.1988 20.4277 19.3221 20.3707 19.4493 20.3779C19.5548 20.3829 19.6574 20.4226 19.7393 20.4907C19.7679 20.513 19.8063 20.5445 19.832 20.5669C19.9286 20.6614 20.0203 20.761 20.1061 20.8667C20.2758 21.0598 20.4642 21.2346 20.6673 21.3891C20.7433 21.4307 20.832 21.4389 20.9149 21.4134C20.9642 21.451 21.0145 21.4876 21.0648 21.5232C21.7966 20.7224 22.7434 20.1644 23.7849 19.9226C24.0325 19.8646 24.284 19.825 24.5374 19.8037L24.5473 19.6228C24.6124 19.5638 24.6588 19.4866 24.6824 19.4012C24.6913 19.1411 24.6755 18.8809 24.6361 18.6238C24.6094 18.4886 24.5907 18.3524 24.5789 18.2162C24.5779 18.1847 24.5789 18.1421 24.5799 18.1065C24.5799 18.1024 24.5789 18.0984 24.5789 18.0943C24.5552 17.8575 24.7229 17.6461 24.9527 17.6217C25.1825 17.5973 25.3876 17.7701 25.4113 18.0069C25.4142 18.0354 25.4142 18.0648 25.4113 18.0933C25.4113 18.1309 25.4132 18.1807 25.4113 18.2152C25.3994 18.3524 25.3807 18.4886 25.3541 18.6228C25.3136 18.8799 25.2979 19.14 25.3067 19.4012C25.3235 19.4886 25.3718 19.5648 25.4428 19.6157C25.4438 19.6472 25.4497 19.7498 25.4527 19.8067C26.7684 19.9297 27.9963 20.5415 28.9076 21.5273L29.0664 21.4104C29.1512 21.4256 29.239 21.4155 29.3189 21.3819C29.522 21.2265 29.7094 21.0517 29.88 20.8586C29.9658 20.7529 30.0576 20.6533 30.1552 20.5588C30.1809 20.5364 30.2193 20.5059 30.2479 20.4825C30.4126 20.3159 30.6769 20.3169 30.8397 20.4866C31.0014 20.6563 31.0004 20.9287 30.8357 21.0964C30.815 21.1177 30.7914 21.137 30.7667 21.1533C30.7391 21.1767 30.7016 21.2092 30.675 21.2295C30.5635 21.3057 30.4481 21.3748 30.3288 21.4378C30.1089 21.5659 29.9017 21.7163 29.7094 21.886C29.6532 21.9531 29.6256 22.0405 29.6315 22.1289C29.6078 22.1513 29.527 22.2254 29.4836 22.2651C30.2213 23.3992 30.53 24.7722 30.3505 26.1249L30.5182 26.1757C30.5606 26.254 30.6227 26.318 30.6977 26.3617C30.9423 26.4288 31.1918 26.4714 31.4443 26.4887C31.5774 26.4918 31.7106 26.5029 31.8437 26.5212C31.8782 26.5283 31.9295 26.5426 31.965 26.5507C32.1938 26.5812 32.3546 26.7977 32.325 27.0334C32.2954 27.2692 32.0853 27.4349 31.8565 27.4044C31.8309 27.4013 31.8052 27.3952 31.7806 27.3861H31.7747C31.7747 27.3861 31.7697 27.383 31.7668 27.382C31.7323 27.3739 31.6889 27.3668 31.6593 27.3586C31.532 27.317 31.4078 27.2672 31.2855 27.2103C31.0507 27.1127 30.8081 27.0395 30.5596 26.9908C30.4738 26.9877 30.3899 27.0202 30.3268 27.0802C30.2676 27.069 30.2085 27.0578 30.1493 27.0477C29.7469 28.3526 28.8928 29.4593 27.7497 30.1575L27.7537 30.1605Z' fill='none' className={filledClassName} />
+          <rect x='8.74976' y='10.625' width='3.75' height='13.125' rx='0.5' stroke='none' strokeWidth={2} />
+          <path d='M16.25 16.25V10.5C16.25 10.2239 16.4739 10 16.75 10H19.5C19.7761 10 20 10.2239 20 10.5V12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M23.7502 13.75V5.5C23.7502 5.22386 23.9741 5 24.2502 5H27.0002C27.2764 5 27.5002 5.22386 27.5002 5.5V12.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M5 5V27.5H12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+K8SMetricsIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default K8SMetricsIcon

package/src/components/icons/MetricsLogsIcon.jsx

@@ -0,0 +1,124 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const MetricsLogsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+  const filledClassName = styles[`filled-${color}`]
+
+  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='3.90918' y='4.84204' width='1.90909' height='6.63159' rx='0.5' stroke='none' />
+          <path d='M7.72705 5.78938V3.44727C7.72705 3.17112 7.95091 2.94727 8.22705 2.94727H9.13614C9.41229 2.94727 9.63614 3.17112 9.63614 3.44727V5.78938' stroke='none' strokeLinecap='round' />
+          <path d='M11.5909 5.5L11.552 2.5065C11.5484 2.22784 11.7733 2 12.052 2H12.9609C13.2345 2 13.4573 2.21991 13.4608 2.49349L13.5 5.5' stroke='none' strokeLinecap='round' />
+          <path d='M2 2V13.3684H5.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='7' y='7' width='7' height='7' rx='1' stroke='none' />
+          <path d='M7 8.75H14' stroke='none' />
+          <circle cx='7.87492' cy='7.87492' r='0.291667' fill='none' className={filledClassName} />
+          <circle cx='8.74992' cy='7.87492' r='0.291667' fill='none' className={filledClassName} />
+          <circle cx='9.62492' cy='7.87492' r='0.291667' fill='none' className={filledClassName} />
+          <path d='M8.16675 9.91675H11.0834' stroke='none' strokeLinecap='round' />
+          <path d='M8.75 11.0833H12.8333' stroke='none' strokeLinecap='round' />
+          <path d='M8.75 12.25H12.8333' 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}
+        >
+          <rect x='5.86377' y='7.26318' width='2.86364' height='9.94739' rx='0.5' stroke='none' strokeWidth={1.5} />
+          <path d='M11.5906 8.68431V4.92114C11.5906 4.645 11.8144 4.42114 12.0906 4.42114H13.9542C14.2304 4.42114 14.4542 4.645 14.4542 4.92114V8.68431' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M17.3864 8.25L17.3247 3.5065C17.3211 3.22784 17.546 3 17.8247 3H19.6881C19.9617 3 20.1845 3.21991 20.1881 3.49349L20.25 8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M3 3V20.0527H8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='10.5' y='10.5' width='10.5' height='10.5' rx='1' stroke='none' strokeWidth={1.5} />
+          <path d='M10.5 13.125H21' stroke='none' strokeWidth={1.5} />
+          <circle cx='11.8125' cy='11.8125' r='0.4375' fill='none' className={filledClassName} />
+          <circle cx='13.125' cy='11.8125' r='0.4375' fill='none' className={filledClassName} />
+          <circle cx='14.4375' cy='11.8125' r='0.4375' fill='none' className={filledClassName} />
+          <path d='M12.25 14.875H16.625' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M13.125 16.625H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M13.125 18.375H19.25' 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}
+        >
+          <rect x='9.77295' y='12.1052' width='4.77273' height='16.579' rx='0.5' stroke='none' strokeWidth={2} />
+          <path d='M19.3176 14.4737V7.86841C19.3176 7.59227 19.5415 7.36841 19.8176 7.36841H23.5904C23.8665 7.36841 24.0904 7.59227 24.0904 7.86841V14.4737' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M28.9775 13.75L28.8704 5.5065C28.8667 5.22784 29.0916 5 29.3703 5H33.1428C33.4164 5 33.6392 5.21991 33.6427 5.49349L33.7502 13.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M5 5V33.4211H13.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='17.5' y='17.5' width='17.5' height='17.5' rx='1' stroke='none' strokeWidth={2} />
+          <path d='M17.5 21.875H35' stroke='none' strokeWidth={2} />
+          <circle cx='19.6874' cy='19.6874' r='0.729167' fill='none' className={filledClassName} />
+          <circle cx='21.8749' cy='19.6874' r='0.729167' fill='none' className={filledClassName} />
+          <circle cx='24.0624' cy='19.6874' r='0.729167' fill='none' className={filledClassName} />
+          <path d='M20.4167 24.7917H27.7084' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M21.875 27.7083H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M21.875 30.625H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+MetricsLogsIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default MetricsLogsIcon

package/src/components/icons/NodeJSMetricsIcon.jsx

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const NodeJSMetricsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+  const filledClassName = styles[`filled-${color}`]
+
+  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='3.5' y='4.25' width='1.5' height='5.25' rx='0.5' stroke='none' />
+          <path d='M6.5 7.5V5.5C6.5 5.22386 6.72386 5 7 5H7.5C7.77614 5 8 5.22386 8 5.5V6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.5 5.5V2.5C9.5 2.22386 9.72386 2 10 2H10.5C10.7761 2 11 2.22386 11 2.5V5' stroke='none' strokeLinecap='round' />
+          <path d='M2 2V11H6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.1826 6.08565C10.3761 5.97145 10.6227 5.97145 10.8114 6.08565L13.7001 7.77602C13.8803 7.88143 14.0012 8.091 14 8.30684V11.6951C14 11.9197 13.8682 12.1343 13.6783 12.2372L10.8053 13.9188C10.6046 14.033 10.3603 14.0267 10.1669 13.9L9.30471 13.383C9.24546 13.3466 9.18017 13.3177 9.13785 13.2587C9.17412 13.2073 9.23942 13.201 9.29262 13.1784C9.41233 13.1383 9.52237 13.078 9.6324 13.014C9.66021 12.9939 9.69407 13.0015 9.72067 13.019L10.4559 13.4608C10.5079 13.4921 10.5611 13.4507 10.607 13.4244L13.428 11.7717C13.4631 11.7541 13.4825 11.7164 13.4788 11.6763V8.3219C13.4825 8.27673 13.4583 8.23531 13.4184 8.21774L10.5538 6.54244C10.5199 6.51859 10.4752 6.51859 10.4413 6.54244L7.5792 8.22025C7.54051 8.23908 7.51391 8.27924 7.51874 8.32441V11.68C7.51511 11.7202 7.53567 11.7566 7.57074 11.7742L8.33494 12.2222C8.47884 12.3025 8.65538 12.3477 8.81257 12.2887C8.95405 12.2335 9.04837 12.0917 9.04716 11.9348V8.59924C9.04474 8.5503 9.08948 8.50888 9.13543 8.5139H9.50302C9.55139 8.51265 9.58887 8.56536 9.58283 8.61555V11.9724C9.58283 12.2711 9.46433 12.5949 9.1983 12.7417C8.87061 12.9174 8.46554 12.881 8.14268 12.7116L7.32043 12.2397C7.12817 12.1381 7 11.921 7 11.6964V8.3081C7.00121 8.08347 7.12092 7.87766 7.30955 7.771L10.1826 6.08565ZM11.0157 8.43484C11.4329 8.40975 11.8803 8.41853 12.2563 8.63187C12.5478 8.795 12.7086 9.13885 12.7134 9.47517C12.705 9.52034 12.6602 9.54544 12.6179 9.54168C12.497 9.54168 12.3761 9.54293 12.2539 9.54168C12.2019 9.54419 12.1729 9.49399 12.1657 9.44756C12.1306 9.28693 12.0459 9.12756 11.9008 9.05101C11.6771 8.9343 11.4184 8.94057 11.1741 8.94308C10.9964 8.95312 10.8053 8.96944 10.6542 9.07736C10.5381 9.16018 10.503 9.32834 10.5441 9.45885C10.5828 9.55548 10.6904 9.5856 10.7775 9.61446C11.2805 9.75125 11.8138 9.73995 12.3083 9.9169C12.5127 9.98968 12.7122 10.1327 12.7823 10.3549C12.8742 10.6523 12.8343 11.0087 12.63 11.2471C12.4643 11.4441 12.2237 11.5483 11.9831 11.6085C11.6626 11.6826 11.3313 11.6838 11.006 11.6512C10.7001 11.6148 10.3833 11.532 10.1475 11.3161C9.94558 11.1342 9.84764 10.8518 9.85731 10.5782C9.85973 10.5318 9.90447 10.5004 9.94679 10.5042H10.3095C10.3579 10.5004 10.3942 10.5444 10.3966 10.592C10.4196 10.7426 10.474 10.9058 10.6034 10.9936C10.8513 11.1593 11.1632 11.148 11.4462 11.153C11.682 11.1417 11.9456 11.1392 12.1378 10.9773C12.2394 10.8857 12.2696 10.7313 12.2418 10.5983C12.2116 10.4866 12.0967 10.4339 12 10.3975C11.503 10.2344 10.9637 10.2934 10.4716 10.1089C10.2721 10.0361 10.0786 9.89682 10.0024 9.68348C9.8948 9.3823 9.94437 9.00959 10.1705 8.77869C10.3881 8.54904 10.7074 8.45994 11.0097 8.42857L11.0145 8.43484H11.0157Z' fill='none' className={filledClassName} stroke='none' strokeWidth={0.2} />
+
+        </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='5.24976' y='6.375' width='2.25' height='7.875' rx='0.75' stroke='none' strokeWidth={1.5} />
+          <path d='M9.75 11.25V8.25C9.75 7.83579 10.0858 7.5 10.5 7.5H11.25C11.6642 7.5 12 7.83579 12 8.25V9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.2502 8.25V3.75C14.2502 3.33579 14.586 3 15.0002 3H15.7502C16.1645 3 16.5002 3.33579 16.5002 3.75V7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M3 3V16.5H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15.2739 9.12847C15.5641 8.95718 15.9341 8.95718 16.217 9.12847L20.5502 11.664C20.8204 11.8221 21.0018 12.1365 21 12.4603V17.5427C21 17.8796 20.8023 18.2015 20.5175 18.3558L16.208 20.8782C15.9069 21.0495 15.5405 21.0401 15.2503 20.85L13.9571 20.0744C13.8682 20.0199 13.7702 19.9766 13.7068 19.8881C13.7612 19.8109 13.8591 19.8015 13.9389 19.7676C14.1185 19.7074 14.2836 19.617 14.4486 19.521C14.4903 19.4909 14.5411 19.5022 14.581 19.5286L15.6838 20.1912C15.7618 20.2382 15.8416 20.1761 15.9105 20.1366L20.1421 17.6575C20.1947 17.6311 20.2237 17.5747 20.2182 17.5144V12.4829C20.2237 12.4151 20.1874 12.353 20.1276 12.3266L15.8307 9.81365C15.7799 9.77789 15.7128 9.77789 15.662 9.81365L11.3688 12.3304C11.3108 12.3586 11.2709 12.4189 11.2781 12.4866V17.5201C11.2727 17.5803 11.3035 17.6349 11.3561 17.6613L12.5024 18.3333C12.7183 18.4537 12.9831 18.5215 13.2189 18.433C13.4311 18.3502 13.5725 18.1375 13.5707 17.9022V12.8989C13.5671 12.8254 13.6342 12.7633 13.7031 12.7709H14.2545C14.3271 12.769 14.3833 12.848 14.3742 12.9233V17.9587C14.3742 18.4067 14.1965 18.8923 13.7975 19.1126C13.3059 19.3761 12.6983 19.3215 12.214 19.0674L10.9807 18.3596C10.6923 18.2071 10.5 17.8815 10.5 17.5445V12.4621C10.5018 12.1252 10.6814 11.8165 10.9643 11.6565L15.2739 9.12847ZM16.5236 12.6523C17.1493 12.6146 17.8204 12.6278 18.3845 12.9478C18.8216 13.1925 19.0629 13.7083 19.0701 14.2128C19.0574 14.2805 18.9903 14.3182 18.9268 14.3125C18.7455 14.3125 18.5641 14.3144 18.3809 14.3125C18.3029 14.3163 18.2594 14.241 18.2485 14.1713C18.1959 13.9304 18.0689 13.6913 17.8513 13.5765C17.5157 13.4014 17.1276 13.4109 16.7612 13.4146C16.4946 13.4297 16.208 13.4542 15.9813 13.616C15.8071 13.7403 15.7545 13.9925 15.8162 14.1883C15.8742 14.3332 16.0357 14.3784 16.1663 14.4217C16.9208 14.6269 17.7207 14.6099 18.4625 14.8753C18.769 14.9845 19.0683 15.1991 19.1735 15.5323C19.3114 15.9784 19.2515 16.513 18.945 16.8707C18.6965 17.1662 18.3355 17.3224 17.9746 17.4128C17.4939 17.5238 16.997 17.5257 16.5091 17.4768C16.0502 17.4222 15.575 17.298 15.2213 16.9742C14.9184 16.7012 14.7715 16.2777 14.786 15.8674C14.7896 15.7977 14.8567 15.7506 14.9202 15.7563H15.4643C15.5369 15.7506 15.5913 15.8165 15.5949 15.8881C15.6294 16.1139 15.711 16.3587 15.9051 16.4904C16.2769 16.7389 16.7449 16.7219 17.1693 16.7295C17.523 16.7125 17.9184 16.7088 18.2068 16.4659C18.3591 16.3285 18.4045 16.097 18.3627 15.8975C18.3174 15.7299 18.1451 15.6509 18 15.5963C17.2545 15.3516 16.4456 15.4401 15.7074 15.1633C15.4081 15.0542 15.1179 14.8452 15.0036 14.5252C14.8422 14.0735 14.9166 13.5144 15.2557 13.168C15.5822 12.8236 16.0611 12.6899 16.5145 12.6429L16.5218 12.6523H16.5236Z' fill='none' className={filledClassName} stroke='none' strokeWidth={0.3} />
+
+        </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='8.74976' y='10.625' width='3.75' height='13.125' rx='1.25' stroke='none' strokeWidth={2} />
+          <path d='M16.25 18.75V13.75C16.25 13.0596 16.8096 12.5 17.5 12.5H18.75C19.4404 12.5 20 13.0596 20 13.75V15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M23.7502 13.75V6.25C23.7502 5.55964 24.3099 5 25.0002 5H26.2502C26.9406 5 27.5002 5.55964 27.5002 6.25V12.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M5 5V27.5H15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M25.4565 15.2141C25.9401 14.9286 26.5568 14.9286 27.0284 15.2141L34.2503 19.44C34.7007 19.7036 35.003 20.2275 35 20.7671V29.2378C35 29.7993 34.6705 30.3358 34.1959 30.5931L27.0133 34.797C26.5115 35.0825 25.9008 35.0668 25.4172 34.75L23.2618 33.4574C23.1137 33.3664 22.9504 33.2943 22.8446 33.1468C22.9353 33.0182 23.0985 33.0025 23.2316 32.946C23.5308 32.8456 23.8059 32.6951 24.081 32.5351C24.1505 32.4849 24.2352 32.5037 24.3017 32.5476L26.1397 33.6519C26.2696 33.7304 26.4026 33.6268 26.5175 33.5609L33.5701 29.4291C33.6578 29.3852 33.7061 29.2911 33.6971 29.1907V20.8048C33.7061 20.6918 33.6457 20.5883 33.5459 20.5444L26.3845 16.3561C26.2999 16.2965 26.188 16.2965 26.1034 16.3561L18.948 20.5506C18.8513 20.5977 18.7848 20.6981 18.7969 20.811V29.2001C18.7878 29.3005 18.8392 29.3915 18.9268 29.4354L20.8374 30.5554C21.1971 30.7562 21.6384 30.8692 22.0314 30.7217C22.3851 30.5837 22.6209 30.2291 22.6179 29.837V21.4981C22.6118 21.3757 22.7237 21.2722 22.8386 21.2848H23.7575C23.8785 21.2816 23.9722 21.4134 23.9571 21.5389V29.9311C23.9571 30.6778 23.6608 31.4872 22.9958 31.8543C22.1765 32.2935 21.1638 32.2025 20.3567 31.779L18.3011 30.5993C17.8204 30.3452 17.5 29.8025 17.5 29.2409V20.7702C17.503 20.2087 17.8023 19.6942 18.2739 19.4275L25.4565 15.2141ZM27.5393 21.0871C28.5822 21.0244 29.7007 21.0463 30.6409 21.5797C31.3694 21.9875 31.7714 22.8471 31.7835 23.6879C31.7624 23.8009 31.6505 23.8636 31.5447 23.8542C31.2424 23.8542 30.9401 23.8573 30.6348 23.8542C30.5048 23.8605 30.4323 23.735 30.4141 23.6189C30.3265 23.2173 30.1149 22.8189 29.7521 22.6275C29.1929 22.3357 28.5459 22.3514 27.9353 22.3577C27.4909 22.3828 27.0133 22.4236 26.6354 22.6934C26.3452 22.9005 26.2575 23.3209 26.3603 23.6471C26.4571 23.8887 26.7261 23.964 26.9438 24.0362C28.2013 24.3781 29.5344 24.3499 30.7708 24.7922C31.2817 24.9742 31.7805 25.3319 31.9558 25.8872C32.1856 26.6307 32.0858 27.5217 31.575 28.1178C31.1608 28.6103 30.5592 28.8707 29.9577 29.0213C29.1566 29.2064 28.3283 29.2095 27.5151 29.128C26.7503 29.037 25.9583 28.8299 25.3688 28.2903C24.864 27.8354 24.6191 27.1295 24.6433 26.4456C24.6493 26.3295 24.7612 26.2511 24.867 26.2605H25.7739C25.8948 26.2511 25.9855 26.3609 25.9915 26.4801C26.049 26.8566 26.185 27.2644 26.5085 27.484C27.1282 27.8981 27.9081 27.8699 28.6155 27.8825C29.2049 27.8542 29.864 27.848 30.3446 27.4432C30.5985 27.2142 30.6741 26.8283 30.6046 26.4958C30.529 26.2166 30.2418 26.0848 30 25.9938C28.7575 25.586 27.4093 25.7334 26.1789 25.2722C25.6802 25.0903 25.1965 24.742 25.006 24.2087C24.737 23.4558 24.8609 22.524 25.4262 21.9467C25.9704 21.3726 26.7684 21.1499 27.5242 21.0714L27.5363 21.0871H27.5393Z' fill='none' className={filledClassName} stroke='none' strokeWidth={0.5} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+NodeJSMetricsIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default NodeJSMetricsIcon