@platformatic/ui-components 0.1.49 → 0.1.51

package/src/components/icons/EditIcon.jsx

@@ -1,38 +1,81 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const EditIcon = ({ color = 'green', size = 'normal' }) => {
-  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={10.0554}
-            y={4.50607}
-            width={2.11765}
-            height={7.76471}
-            transform='rotate(45 10.0554 4.50607)'
-            stroke='none'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M6.06234 11.4939L4.56494 9.99654L3.81624 12.2426L6.06234 11.4939Z'
-            stroke='none'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M10.8456 3.71577C11.2362 3.32525 11.8693 3.32525 12.2598 3.71577L12.343 3.79896C12.7336 4.18949 12.7336 4.82265 12.343 5.21318L11.5527 6.00347L10.0553 4.50607L10.8456 3.71577Z'
-            stroke='none'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default EditIcon
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const EditIcon = ({ 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={10.0554} y={4.50604} width={2.11765} height={7.76471} transform='rotate(45 10.0554 4.50604)' stroke='none' strokeLinejoin='round' />
+          <path d='M6.06234 11.4939L4.56494 9.99652L3.81624 12.2426L6.06234 11.4939Z' stroke='none' strokeLinejoin='round' />
+          <path d='M10.8456 3.71577C11.2362 3.32525 11.8693 3.32525 12.2598 3.71577L12.343 3.79896C12.7336 4.18949 12.7336 4.82265 12.343 5.21318L11.5527 6.00347L10.0553 4.50607L10.8456 3.71577Z' stroke='none' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={15.083} y={6.75909} width={3.17647} height={11.6471} transform='rotate(45 15.083 6.75909)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M9.09327 17.2409L6.84717 14.9948L5.72412 18.364L9.09327 17.2409Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M16.622 5.22011C17.0125 4.82958 17.6457 4.82958 18.0362 5.22011L18.8681 6.052C19.2586 6.44252 19.2586 7.07569 18.8681 7.46621L17.3291 9.00521L15.083 6.7591L16.622 5.22011Z' stroke='none' strokeWidth={1.5} />
+        </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={25.1384} y={11.2652} width={5.29412} height={19.4118} transform='rotate(45 25.1384 11.2652)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M15.1556 28.7348L11.4121 24.9913L9.54036 30.6066L15.1556 28.7348Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M28.1747 8.22877C28.5653 7.83825 29.1984 7.83825 29.5889 8.22877L31.9182 10.5581C32.3088 10.9486 32.3088 11.5818 31.9182 11.9723L28.8818 15.0087L25.1383 11.2652L28.1747 8.22877Z' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+EditIcon.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'])
+}
+
+EditIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default EditIcon

package/src/components/icons/GearIcon.jsx

@@ -1,40 +1,78 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const GearIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = styles[`${color}`]
-  let dimension = 33
-  switch (size) {
-    case 'small':
-      dimension = 16
-      break
-    default:
-      break
-  }
-  return (
-    <svg
-      width={dimension}
-      height={dimension}
-      viewBox='0 0 33 32'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <path
-        d='M16.5016 20.6575C19.011 20.6575 21.0452 18.6574 21.0452 16.1901C21.0452 13.7228 19.011 11.7227 16.5016 11.7227C13.9922 11.7227 11.958 13.7228 11.958 16.1901C11.958 18.6574 13.9922 20.6575 16.5016 20.6575Z'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M18.9391 4.69606V6.21219C18.9391 6.50074 19.1219 6.76144 19.3974 6.86269L21.3641 7.59418C21.6318 7.69289 21.9356 7.62455 22.1312 7.417L23.076 6.41974C23.354 6.12613 23.8277 6.1236 24.1083 6.41721L26.3891 8.79139C26.6439 9.05716 26.6465 9.46973 26.3968 9.73803L25.1818 11.0491C24.9887 11.2567 24.9423 11.5579 25.0633 11.811L25.8871 13.5575C26.003 13.803 26.2552 13.9625 26.5307 13.9625H27.7921C28.1834 13.9625 28.5 14.2738 28.5 14.6585V17.5895C28.5 17.9743 28.1834 18.2856 27.7921 18.2856H26.4663C26.16 18.2856 25.8871 18.4805 25.7919 18.7665L25.1225 20.7838C25.0427 21.0217 25.0994 21.2824 25.2719 21.4672L26.3608 22.6492C26.6259 22.9378 26.6002 23.3858 26.3016 23.6414L23.7916 25.8005C23.5033 26.0485 23.0657 26.0257 22.8057 25.7498L21.9304 24.8235C21.7399 24.621 21.4439 24.5476 21.1788 24.6387L19.351 25.2664C19.0653 25.3651 18.8748 25.6283 18.8748 25.9245V27.3039C18.8748 27.6887 18.5581 28 18.1668 28H14.8306C14.4393 28 14.1227 27.6887 14.1227 27.3039V25.9245C14.1227 25.6283 13.9322 25.3651 13.6464 25.2664L11.8187 24.6387C11.5535 24.5476 11.2575 24.6184 11.067 24.8235L10.1917 25.7498C9.93173 26.0257 9.4941 26.0485 9.20578 25.8005L6.69586 23.6414C6.39724 23.3858 6.3715 22.9378 6.63665 22.6492L7.72557 21.4672C7.89547 21.2824 7.95211 21.0217 7.87488 20.7838L7.20557 18.7665C7.11032 18.4805 6.83745 18.2856 6.53111 18.2856H5.20793C4.81664 18.2856 4.5 17.9743 4.5 17.5895V14.6585C4.5 14.2738 4.81664 13.9625 5.20793 13.9625H6.46932C6.74477 13.9625 6.99705 13.8055 7.11289 13.5575L7.93666 11.811C8.05765 11.5554 8.00874 11.2567 7.81825 11.0491L6.60319 9.73803C6.35348 9.46973 6.35605 9.05463 6.61091 8.79139L8.89172 6.41721C9.17232 6.12613 9.64598 6.12613 9.92401 6.41974L10.8688 7.417C11.0644 7.62455 11.3682 7.69289 11.6359 7.59418L13.6026 6.86269C13.8781 6.76144 14.0609 6.50074 14.0609 6.21219V4.69606C14.0609 4.31133 14.3775 4 14.7688 4H18.2312C18.6225 4 18.9391 4.31133 18.9391 4.69606Z'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export default GearIcon
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const GearIcon = ({ 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.0008 10.3286C9.25549 10.3286 10.2726 9.32855 10.2726 8.09491C10.2726 6.86127 9.25549 5.86121 8.0008 5.86121C6.74612 5.86121 5.729 6.86127 5.729 8.09491C5.729 9.32855 6.74612 10.3286 8.0008 10.3286Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.21956 2.34803V3.1061C9.21956 3.25037 9.31095 3.38072 9.44868 3.43134L10.4321 3.79709C10.5659 3.84645 10.7178 3.81228 10.8156 3.7085L11.288 3.20987C11.427 3.06307 11.6638 3.0618 11.8041 3.20861L12.9445 4.3957C13.072 4.52858 13.0733 4.73487 12.9484 4.86901L12.3409 5.52457C12.2443 5.62835 12.2212 5.77895 12.2817 5.9055L12.6936 6.77874C12.7515 6.9015 12.8776 6.98123 13.0153 6.98123H13.646C13.8417 6.98123 14 7.13689 14 7.32925V8.79477C14 8.98713 13.8417 9.1428 13.646 9.1428H12.9832C12.83 9.1428 12.6936 9.24024 12.6459 9.38325L12.3113 10.3919C12.2714 10.5109 12.2997 10.6412 12.3859 10.7336L12.9304 11.3246C13.063 11.4689 13.0501 11.6929 12.9008 11.8207L11.6458 12.9002C11.5017 13.0243 11.2828 13.0129 11.1528 12.8749L10.7152 12.4117C10.62 12.3105 10.472 12.2738 10.3394 12.3193L9.42551 12.6332C9.28263 12.6826 9.18739 12.8142 9.18739 12.9622V13.652C9.18739 13.8443 9.02907 14 8.83342 14H7.16529C6.96964 14 6.81133 13.8443 6.81133 13.652V12.9622C6.81133 12.8142 6.71608 12.6826 6.57321 12.6332L5.65934 12.3193C5.52676 12.2738 5.37874 12.3092 5.28349 12.4117L4.84587 12.8749C4.71586 13.0129 4.49705 13.0243 4.35289 12.9002L3.09793 11.8207C2.94862 11.6929 2.93575 11.4689 3.06833 11.3246L3.61279 10.7336C3.69774 10.6412 3.72605 10.5109 3.68744 10.3919L3.35278 9.38325C3.30516 9.24024 3.16872 9.1428 3.01555 9.1428H2.35396C2.15832 9.1428 2 8.98713 2 8.79477V7.32925C2 7.13689 2.15832 6.98123 2.35396 6.98123H2.98466C3.12239 6.98123 3.24853 6.90276 3.30645 6.77874L3.71833 5.9055C3.77883 5.77768 3.75437 5.62835 3.65912 5.52457L3.05159 4.86901C2.92674 4.73487 2.92803 4.52731 3.05545 4.3957L4.19586 3.20861C4.33616 3.06307 4.57299 3.06307 4.712 3.20987L5.18438 3.7085C5.28221 3.81228 5.43409 3.84645 5.56795 3.79709L6.55132 3.43134C6.68905 3.38072 6.78044 3.25037 6.78044 3.1061V2.34803C6.78044 2.15566 6.93875 2 7.1344 2H8.8656C9.06125 2 9.21956 2.15566 9.21956 2.34803Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      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.0012 15.4929C13.8832 15.4929 15.4089 13.9928 15.4089 12.1424C15.4089 10.2919 13.8832 8.79182 12.0012 8.79182C10.1192 8.79182 8.59351 10.2919 8.59351 12.1424C8.59351 13.9928 10.1192 15.4929 12.0012 15.4929Z' stroke='#00283D' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.8293 3.52204V4.65914C13.8293 4.87555 13.9664 5.07108 14.173 5.14702L15.6481 5.69563C15.8489 5.76967 16.0767 5.71841 16.2234 5.56275L16.932 4.81481C17.1405 4.5946 17.4958 4.5927 17.7062 4.81291L19.4168 6.59355C19.608 6.79287 19.6099 7.1023 19.4226 7.30352L18.5113 8.28686C18.3665 8.44252 18.3318 8.66842 18.4225 8.85826L19.0403 10.1681C19.1272 10.3522 19.3164 10.4718 19.523 10.4718H20.4691C20.7625 10.4718 21 10.7053 21 10.9939V13.1922C21 13.4807 20.7625 13.7142 20.4691 13.7142H19.4747C19.245 13.7142 19.0403 13.8604 18.9689 14.0749L18.4669 15.5879C18.4071 15.7663 18.4495 15.9618 18.5789 16.1004L19.3956 16.9869C19.5944 17.2033 19.5751 17.5393 19.3512 17.7311L17.4687 19.3503C17.2525 19.5364 16.9243 19.5193 16.7293 19.3124L16.0728 18.6176C15.93 18.4657 15.7079 18.4107 15.5091 18.479L14.1383 18.9498C13.924 19.0238 13.7811 19.2213 13.7811 19.4434V20.478C13.7811 20.7665 13.5436 21 13.2501 21H10.7479C10.4545 21 10.217 20.7665 10.217 20.478V19.4434C10.217 19.2213 10.0741 19.0238 9.85981 18.9498L8.48901 18.479C8.29014 18.4107 8.06811 18.4638 7.92524 18.6176L7.2688 19.3124C7.0738 19.5193 6.74558 19.5364 6.52934 19.3503L4.64689 17.7311C4.42293 17.5393 4.40363 17.2033 4.60249 16.9869L5.41918 16.1004C5.54661 15.9618 5.58908 15.7663 5.53116 15.5879L5.02918 14.0749C4.95774 13.8604 4.75308 13.7142 4.52333 13.7142H3.53094C3.23748 13.7142 3 13.4807 3 13.1922V10.9939C3 10.7053 3.23748 10.4718 3.53094 10.4718H4.47699C4.68358 10.4718 4.87279 10.3541 4.95967 10.1681L5.5775 8.85826C5.66824 8.66653 5.63156 8.44252 5.48868 8.28686L4.57739 7.30352C4.39011 7.1023 4.39204 6.79097 4.58318 6.59355L6.29379 4.81291C6.50424 4.5946 6.85949 4.5946 7.068 4.81481L7.77657 5.56275C7.92331 5.71841 8.15113 5.76967 8.35192 5.69563L9.82699 5.14702C10.0336 5.07108 10.1707 4.87555 10.1707 4.65914V3.52204C10.1707 3.2335 10.4081 3 10.7016 3H13.2984C13.5919 3 13.8293 3.2335 13.8293 3.52204Z' stroke='#00283D' 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.002 25.8216C23.1387 25.8216 25.6815 23.3214 25.6815 20.2373C25.6815 17.1532 23.1387 14.653 20.002 14.653C16.8653 14.653 14.3225 17.1532 14.3225 20.2373C14.3225 23.3214 16.8653 25.8216 20.002 25.8216Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M23.0489 5.87007V7.76524C23.0489 8.12592 23.2774 8.4518 23.6217 8.57836L26.0801 9.49272C26.4148 9.61611 26.7945 9.53069 27.039 9.27125L28.22 8.02468C28.5675 7.65767 29.1596 7.6545 29.5104 8.02151L32.3614 10.9892C32.6799 11.3215 32.6832 11.8372 32.371 12.1725L30.8522 13.8114C30.6109 14.0709 30.5529 14.4474 30.7042 14.7638L31.7339 16.9468C31.8787 17.2537 32.194 17.4531 32.5383 17.4531H34.1151C34.6042 17.4531 35 17.8422 35 18.3231V21.9869C35 22.4678 34.6042 22.857 34.1151 22.857H32.4579C32.075 22.857 31.7339 23.1006 31.6148 23.4581L30.7782 25.9798C30.6784 26.2772 30.7492 26.603 30.9648 26.834L32.326 28.3115C32.6574 28.6722 32.6252 29.2322 32.252 29.5518L29.1146 32.2506C28.7542 32.5606 28.2071 32.5322 27.8821 32.1873L26.7881 31.0293C26.5499 30.7762 26.1799 30.6845 25.8484 30.7984L23.5638 31.583C23.2066 31.7064 22.9685 32.0354 22.9685 32.4056V34.1299C22.9685 34.6108 22.5727 35 22.0836 35H17.9132C17.4241 35 17.0283 34.6108 17.0283 34.1299V32.4056C17.0283 32.0354 16.7902 31.7064 16.433 31.583L14.1483 30.7984C13.8169 30.6845 13.4469 30.773 13.2087 31.0293L12.1147 32.1873C11.7897 32.5322 11.2426 32.5606 10.8822 32.2506L7.74482 29.5518C7.37155 29.2322 7.33938 28.6722 7.67081 28.3115L9.03196 26.834C9.24434 26.603 9.31513 26.2772 9.2186 25.9798L8.38196 23.4581C8.2629 23.1006 7.92181 22.857 7.53888 22.857H5.88491C5.3958 22.857 5 22.4678 5 21.9869V18.3231C5 17.8422 5.3958 17.4531 5.88491 17.4531H7.46165C7.80596 17.4531 8.12131 17.2569 8.26612 16.9468L9.29583 14.7638C9.44707 14.4442 9.38593 14.0709 9.14781 13.8114L7.62898 12.1725C7.31685 11.8372 7.32007 11.3183 7.63864 10.9892L10.4896 8.02151C10.8404 7.65767 11.4325 7.65767 11.78 8.02468L12.961 9.27125C13.2055 9.53069 13.5852 9.61611 13.9199 9.49272L16.3783 8.57836C16.7226 8.4518 16.9511 8.12592 16.9511 7.76524V5.87007C16.9511 5.38916 17.3469 5 17.836 5H22.164C22.6531 5 23.0489 5.38916 23.0489 5.87007Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+GearIcon.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'])
+}
+
+GearIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default GearIcon

package/src/components/icons/Icons.module.css

@@ -1,30 +1,47 @@
-.green > circle,
-.green > rect, 
-.green > path {
-  @apply stroke-main-green;
-}
-.red > circle,
-.red > rect,
-.red > path {
-  @apply stroke-error-red;
-}
-.white > circle,
-.white > rect,
-.white > path {
-  @apply stroke-white;
-}
-.main-dark-blue > circle,
-.main-dark-blue > rect,
-.main-dark-blue > path {
-  @apply stroke-main-dark-blue;
-}
-.fill-circle-green > circle {
-  @apply fill-white;
-}
-.fill-circle-main-dark-blue > circle {
-  @apply fill-main-dark-blue;
-}
-
-.noShrinkForFlex {
-  @apply shrink-0
+.green > circle,
+.green > rect, 
+.green > line, 
+.green > path {
+  @apply stroke-main-green;
+}
+.red > circle,
+.red > rect,
+.red > line, 
+.red > path {
+  @apply stroke-error-red;
+}
+.white > circle,
+.white > rect,
+.white > line,
+.white > path {
+  @apply stroke-white;
+}
+.main-dark-blue > circle,
+.main-dark-blue > rect,
+.main-dark-blue > line,
+.main-dark-blue > path {
+  @apply stroke-main-dark-blue;
+}
+.filled-white {
+  @apply fill-white
+}
+.filled-red{
+  @apply fill-error-red;
+}
+.filled-main-dark-blue {
+  @apply fill-main-dark-blue ;
+}
+.filled-green {
+  @apply fill-main-green ;
+}
+
+.fill-circle-green > circle {
+  @apply fill-white;
+}
+.fill-circle-main-dark-blue > circle {
+  @apply fill-main-dark-blue;
+}
+
+.noShrinkForFlex {
+  @apply shrink-0
 }

package/src/components/icons/LiveIcon.jsx

@@ -1,43 +1,43 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const LiveIcon = ({ color = 'green', size = 'normal' }) => {
-  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={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'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default LiveIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+const LiveIcon = ({ color = 'green', size = 'normal' }) => {
+  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={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'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default LiveIcon

package/src/components/icons/MetricsIcon.jsx

@@ -1,52 +1,52 @@
-import * as React from 'react'
-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>
-  )
-}
-
-export default MetricsIcon
+import * as React from 'react'
+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>
+  )
+}
+
+export default MetricsIcon

package/src/components/icons/PlayIcon.jsx

@@ -1,20 +1,20 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const PlayIcon = ({ color = 'green', size = 'normal' }) => {
-  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='M2 2L14 8L2 14V2Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default PlayIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+const PlayIcon = ({ color = 'green', size = 'normal' }) => {
+  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='M2 2L14 8L2 14V2Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default PlayIcon

package/src/components/icons/PullRequestIcon.jsx

@@ -1,35 +1,35 @@
-import * as React from 'react'
-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>
-  )
-}
-
-export default PullRequestIcon
+import * as React from 'react'
+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>
+  )
+}
+
+export default PullRequestIcon