@platformatic/ui-components 0.1.50 → 0.1.51

package/src/components/icons/GearIcon.jsx

@@ -1,40 +1,78 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const GearIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = styles[`${color}`]
-  let dimension = 33
+
+const GearIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
   switch (size) {
     case 'small':
-      dimension = 16
+      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 (
-    <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>
-  )
+  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,23 +1,40 @@
 .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;
 }

package/src/components/icons/Users2Icon.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const Users2Icon = ({ 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='M6.00001 10C3.79087 10 2 11.4327 2 13.2H10C10 11.4327 8.20916 10 6.00001 10Z' stroke='none' strokeLinejoin='round' />
+          <circle cx={6.00011} cy={6.00001} r={2.40001} stroke='none' />
+          <path d='M9.19995 8.40002C11.8509 8.40002 14 9.83272 14 11.6H11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.6001 2.61108C8.0247 2.23107 8.5854 2 9.20006 2C10.5255 2 11.6001 3.07452 11.6001 4.40001C11.6001 5.5467 10.7959 6.50556 9.72074 6.74338' stroke='none' strokeLinecap='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='M9.00002 15C5.6863 15 3 17.1491 3 19.8001H15C15 17.1491 12.3137 15 9.00002 15Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <circle cx={8.99991} cy={9.00002} r={3.60001} stroke='none' strokeWidth={1.5} />
+          <path d='M13.8 12.6C17.7765 12.6 21.0001 14.7491 21.0001 17.4001H16.5001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.4001 3.91662C12.037 3.3466 12.8781 3 13.8001 3C15.7883 3 17.4001 4.61178 17.4001 6.60001C17.4001 8.32004 16.1938 9.75833 14.5811 10.1151' 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}
+        >
+          <path d='M15 25.0001C9.47717 25.0001 5 28.5818 5 33.0001H25.0001C25.0001 28.5818 20.5229 25.0001 15 25.0001Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <circle cx='15' cy='15' r='6.00002' stroke='none' strokeWidth={2} />
+          <path d='M22.9998 21.0001C29.6272 21.0001 34.9998 24.5818 34.9998 29.0001H27.4999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19 6.5277C20.0615 5.57767 21.4632 5 22.9999 5C26.3136 5 28.9999 7.6863 28.9999 11C28.9999 13.8667 26.9895 16.2639 24.3016 16.8585' stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+Users2Icon.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'])
+}
+
+Users2Icon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default Users2Icon

package/src/components/icons/WorkspaceDynamicIcon.jsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const WorkspaceDynamicIcon = ({ 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={2} y={2} width={4} height={5.03497} rx={1} stroke='none' />
+          <path d='M8 2L11 4.5L8 7V2Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <rect x={14} y={14} width={4} height={5.03496} rx={1} transform='rotate(-180 14 14)' stroke='none' />
+          <rect x={8} y={14} width={6} height={5.03497} rx={1} transform='rotate(-180 8 14)' stroke='none' />
+          <path d='M11 6V7L14 4.5L11 2V3' 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}
+        >
+          <rect x={3} y={3} width={6} height={7.55245} rx={1} stroke='none' strokeWidth={1.5} />
+          <path d='M12 3L16.5 6.75L12 10.5V3Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x={21} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 12 21)' stroke='none' strokeWidth={1.5} />
+          <path d='M16.5 9V10.5L21 6.75L16.5 3V4.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}
+        >
+          <rect x={5} y={5} width={10} height={12.5874} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M20 5L27.5 11.25L20 17.5V5Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x={35} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
+          <rect x={20} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 20 35)' stroke='none' strokeWidth={2} />
+          <path d='M27.5 15V17.5L35 11.25L27.5 5V7.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+WorkspaceDynamicIcon.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'])
+}
+
+WorkspaceDynamicIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default WorkspaceDynamicIcon

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -0,0 +1,144 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const WorkspaceReadyIcon = ({ 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={2} y={2} width={5} height={5} rx={1} stroke='none' />
+          <rect x={6} y={14} width={4} height={5.03496} rx={1} transform='rotate(-180 6 14)' stroke='none' />
+          <rect x={14} y={14} width={6} height={5.03497} rx={1} transform='rotate(-180 14 14)' stroke='none' />
+          <circle cx={11.5} cy={4.5} r={2.5} stroke='none' />
+          <path d='M10.25 4.5L11.2917 5.33333L12.5 4.00001' 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}
+        >
+          <rect x={3} y={3} width={7.5} height={7.5} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={9} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 9 21)' stroke='none' strokeWidth={1.5} />
+          <rect x={21} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
+          <circle cx={17.25} cy={6.75} r={3.75} stroke='none' strokeWidth={1.5} />
+          <path d='M15.375 6.75L16.9375 8L18.75 6.00002' 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={12.5} height={12.5} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={15} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 15 35)' stroke='none' strokeWidth={2} />
+          <rect x={35} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
+          <circle cx={28.75} cy={11.25} r={6.25} stroke='none' strokeWidth={2} />
+          <path d='M25.625 11.25L28.2292 13.3333L31.25 10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case 'extra-large':
+      icon = (
+        <svg
+          width={120}
+          height={120}
+          viewBox='0 0 120 120'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect
+            x={15}
+            y={15}
+            width={37.5}
+            height={37.5}
+            rx={1}
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <rect
+            x={45}
+            y={105}
+            width={30}
+            height={37.7622}
+            rx={1}
+            transform='rotate(-180 45 105)'
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <rect
+            x={105}
+            y={105}
+            width={45}
+            height={37.7622}
+            rx={1}
+            transform='rotate(-180 105 105)'
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <circle
+            cx={86.25}
+            cy={33.75}
+            r={18.75}
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <path
+            d='M76.875 33.7499L84.6875 39.9999L93.75 30'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+WorkspaceReadyIcon.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'])
+}
+
+WorkspaceReadyIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default WorkspaceReadyIcon

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const WorkspaceStaticIcon = ({ 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={2} y={2} width={4} height={5.03497} rx={1} stroke='none' />
+          <rect x={8} y={2} width={6} height={5.03497} rx={1} stroke='none' />
+          <rect x={14} y={14} width={4} height={5.03496} rx={1} transform='rotate(-180 14 14)' stroke='none' />
+          <rect x={8} y={14} width={6} height={5.03497} rx={1} transform='rotate(-180 8 14)' 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={3} y={3} width={6} height={7.55245} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={3} width={9} height={7.55245} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={21} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 12 21)' 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={5} y={5} width={10} height={12.5874} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={20} y={5} width={15} height={12.5874} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={35} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
+          <rect x={20} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 20 35)' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+WorkspaceStaticIcon.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'])
+}
+
+WorkspaceStaticIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default WorkspaceStaticIcon

package/src/components/icons/index.js

@@ -1,12 +1,21 @@
+import AddIcon from './AddIcon'
+import AlertIcon from './AlertIcon'
+import AllInOneIcon from './AllInOneIcon'
+import ApiCloudIcon from './ApiCloudIcon'
 import ApiIcon from './ApiIcon'
 import ApiIconClosed from './ApiIconClosed'
 import ApiEmptyIcon from './ApiEmptyIcon'
 import AppIcon from './AppIcon'
 import AppListIcon from './AppListIcon'
 import AppEmptyIcon from './AppEmptyIcon'
+import ArrowDownFullIcon from './ArrowDownFullIcon'
+import ArrowDownIcon from './ArrowDownIcon'
+import ArrowLeftIcon from './ArrowLeftIcon'
+import ArrowRightIcon from './ArrowRightIcon'
+import ArrowUpIcon from './ArrowUpIcon'
 import CalendarIcon from './CalendarIcon'
-import Calendar1Icon from './Calendar1Icon'
-import Calendar7Icon from './Calendar7Icon'
+import Calendar1DayIcon from './Calendar1DayIcon'
+import Calendar7DaysIcon from './Calendar7DaysIcon'
 import CircleAddIcon from './CircleAddIcon'
 import CircleBackIcon from './CircleBackIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
@@ -14,31 +23,41 @@ import CircleCheckMarkIcon from './CircleCheckMarkIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
 import CloseIcon from './CloseIcon'
-import CopyIcon from './CopyIcon'
-import CreatedWorkspaceIcon from './CreatedWorkspaceIcon'
-import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
+import CopyPasteIcon from './CopyPasteIcon'
+import DatabaseIcon from './DatabaseIcon'
 import EditIcon from './EditIcon'
 import GearIcon from './GearIcon'
 import LiveIcon from './LiveIcon'
 import MetricsIcon from './MetricsIcon'
 import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
-import StaticWorkspaceIcon from './StaticWorkspaceIcon'
 import StopIcon from './StopIcon'
 import TerminalIcon from './TerminalIcon'
-import TriangleExclamationIcon from './TriangleExclamationIcon'
+import Users2Icon from './Users2Icon'
 import UpgradeIcon from './UpgradeIcon'
+import WorkspaceDynamicIcon from './WorkspaceDynamicIcon'
+import WorkspaceReadyIcon from './WorkspaceReadyIcon'
+import WorkspaceStaticIcon from './WorkspaceStaticIcon'
 
 export default {
+  AddIcon,
+  AlertIcon,
+  AllInOneIcon,
+  ApiCloudIcon,
   ApiIcon,
   ApiIconClosed,
   ApiEmptyIcon,
   AppIcon,
   AppListIcon,
   AppEmptyIcon,
+  ArrowDownFullIcon,
+  ArrowDownIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
   CalendarIcon,
-  Calendar1Icon,
-  Calendar7Icon,
+  Calendar1DayIcon,
+  Calendar7DaysIcon,
   CircleAddIcon,
   CircleBackIcon,
   CircleCheckMarkIcon,
@@ -46,18 +65,19 @@ export default {
   CircleCloseIcon,
   CircleCloseHoverIcon,
   CloseIcon,
-  CopyIcon,
-  CreatedWorkspaceIcon,
-  DynamicWorkspaceIcon,
+  CopyPasteIcon,
+  DatabaseIcon,
   GearIcon,
   EditIcon,
   LiveIcon,
   MetricsIcon,
   PlayIcon,
   PullRequestIcon,
-  StaticWorkspaceIcon,
   StopIcon,
   TerminalIcon,
-  TriangleExclamationIcon,
-  UpgradeIcon
+  UpgradeIcon,
+  Users2Icon,
+  WorkspaceDynamicIcon,
+  WorkspaceReadyIcon,
+  WorkspaceStaticIcon
 }

package/src/stories/PlatformaticIcon.stories.jsx

@@ -16,7 +16,7 @@ export default {
 const Template = (args) => <PlatformaticIcon {...args} />
 export const PlatformaticIconDefault = Template.bind({})
 PlatformaticIconDefault.args = {
-  iconName: 'CopyIcon',
+  iconName: 'CopyPasteIcon',
   onClick: () => alert('clicked')
 }
 
@@ -49,3 +49,9 @@ PlatformaticIconLarge.args = {
   color: 'green',
   size: 'large'
 }
+
+export const PlatformaticIconExtraLarge = AllIconsTemplate.bind({})
+PlatformaticIconExtraLarge.args = {
+  color: 'green',
+  size: 'extra-large'
+}