@platformatic/ui-components 0.1.85 → 0.1.87

package/src/components/icons/CreditCardIcon.jsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const CreditCardIcon = ({ 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={4} width={12} height={8} rx={1} stroke='none' />
+          <path d='M2 6H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <rect x={9} y={8} width={3} height={2} rx='0.5' stroke='none' />
+
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={6} width={18} height={12} rx={1} stroke='none' strokeWidth={1.5} />
+          <path d='M3 9H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x={14} y={12} width={4.5} height={3} rx={0.5} 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={10} width={30} height={20} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M5 15H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x={24} y={20} width={7.5} height={5} rx={0.5} stroke='none' strokeWidth={2} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CreditCardIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+CreditCardIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default CreditCardIcon

package/src/components/icons/GiveOwnershipIcon.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const GiveOwnershipIcon = ({ 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='M4.50276 9.21851L2 10.0705L3.27801 13.798L5.72752 12.8395L4.50276 9.21851Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.6626 9.64452C5.03535 9.18301 6.01515 8.26001 6.95236 8.26001C7.88956 8.26001 8.54987 8.75701 8.76287 9.00551H10.1474C10.3781 9.02326 10.8396 9.20786 10.8396 9.80427M10.8396 9.80427L12.5969 8.63276C12.5969 8.63276 13.2792 8.12695 13.7684 8.68601C14.2576 9.24507 13.8394 9.60902 13.7151 9.80427C12.8631 10.532 10.9568 12.0301 10.1474 12.2005C9.33797 12.3709 6.75711 12.378 5.56785 12.3603M10.8396 9.80427C10.8396 10.3581 10.4846 10.532 10.3071 10.5498H8.12387' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.99401 3.47059C5.99401 4.28277 5.32378 4.94118 4.49701 4.94118C3.67023 4.94118 3 4.28277 3 3.47059C3 2.6584 3.67023 2 4.49701 2C5.32378 2 5.99401 2.6584 5.99401 3.47059ZM5.99401 3.47059H9.10778M13 3.47059H11.9222M11.9222 3.47059V5M11.9222 3.47059H10.485M10.485 3.47059V4.47059M10.485 3.47059H9.10778M9.10778 3.47059V5' 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='M6.75414 13.8276L3 15.1056L4.91701 20.6969L8.59128 19.2592L6.75414 13.8276Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6.9939 14.4669C7.55302 13.7746 9.02273 12.3901 10.4285 12.3901C11.8343 12.3901 12.8248 13.1356 13.1443 13.5084H15.2211C15.5672 13.535 16.2594 13.8119 16.2594 14.7065M16.2594 14.7065L18.8953 12.9493C18.8953 12.9493 19.9188 12.1906 20.6526 13.0291C21.3864 13.8677 20.7591 14.4136 20.5727 14.7065C19.2947 15.7982 16.4352 18.0453 15.2211 18.3009C14.007 18.5565 10.1357 18.5672 8.35178 18.5405M16.2594 14.7065C16.2594 15.5372 15.7269 15.7982 15.4607 15.8248H12.1858' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.99102 5.20588C8.99102 6.42416 7.98567 7.41176 6.74551 7.41176C5.50535 7.41176 4.5 6.42416 4.5 5.20588C4.5 3.98761 5.50535 3 6.74551 3C7.98567 3 8.99102 3.98761 8.99102 5.20588ZM8.99102 5.20588H13.6617M19.5 5.20588H17.8832M17.8832 5.20588V7.5M17.8832 5.20588H15.7275M15.7275 5.20588V6.70588M15.7275 5.20588H13.6617M13.6617 5.20588V7.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='M11.2569 23.0464L5 25.1764L8.19502 34.4952L14.3188 32.0989L11.2569 23.0464Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.6565 24.1112C12.5884 22.9574 15.0379 20.6499 17.3809 20.6499C19.7239 20.6499 21.3747 21.8924 21.9072 22.5137H25.3684C25.9453 22.558 27.0991 23.0195 27.0991 24.5105M27.0991 24.5105L31.4922 21.5818C31.4922 21.5818 33.198 20.3173 34.421 21.7149C35.6439 23.1126 34.5985 24.0224 34.2879 24.5105C32.1579 26.3299 27.392 30.0752 25.3684 30.5012C23.3449 30.9272 16.8928 30.945 13.9196 30.9006M27.0991 24.5105C27.0991 25.8951 26.2116 26.3299 25.7678 26.3743H20.3097' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.985 8.67647C14.985 10.7069 13.3094 12.3529 11.2425 12.3529C9.17558 12.3529 7.5 10.7069 7.5 8.67647C7.5 6.64601 9.17558 5 11.2425 5C13.3094 5 14.985 6.64601 14.985 8.67647ZM14.985 8.67647H22.7695M32.5 8.67647H29.8054M29.8054 8.67647V12.5M29.8054 8.67647H26.2126M26.2126 8.67647V11.1765M26.2126 8.67647H22.7695M22.7695 8.67647V12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+GiveOwnershipIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+GiveOwnershipIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default GiveOwnershipIcon

package/src/components/icons/LogOutIcon.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES } from '../constants'
 
-const LogOutIcon = ({ color, size }) => {
+const LogOutIcon = ({ color, size, tip }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
@@ -16,6 +16,7 @@ const LogOutIcon = ({ color, size }) => {
           viewBox='0 0 16 16'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
+          data-tip={tip}
           className={className}
         >
           <path d='M8.38687 5.5V3C8.38687 2.44772 7.93915 2 7.38687 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44771 14 3 14H7.38687C7.93915 14 8.38687 13.5523 8.38687 13V11.5' stroke='none' strokeLinecap='round' />
@@ -32,6 +33,7 @@ const LogOutIcon = ({ color, size }) => {
           viewBox='0 0 24 24'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
+          data-tip={tip}
           className={className}
         >
           <path d='M12.5803 8.25V4C12.5803 3.44772 12.1326 3 11.5803 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H11.5803C12.1326 21 12.5803 20.5523 12.5803 20V17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
@@ -48,6 +50,7 @@ const LogOutIcon = ({ color, size }) => {
           viewBox='0 0 40 40'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
+          data-tip={tip}
           className={className}
         >
           <path d='M20.9672 13.75V6C20.9672 5.44772 20.5195 5 19.9672 5H6C5.44772 5 5 5.44772 5 6V34C5 34.5523 5.44772 35 6 35H19.9672C20.5195 35 20.9672 34.5523 20.9672 34V28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
@@ -71,12 +74,17 @@ LogOutIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * tip
+   */
+  tip: PropTypes.string
 }
 
 LogOutIcon.defaultProps = {
   color: 'main-dark-blue',
-  size: 'medium'
+  size: 'medium',
+  tip: ''
 }
 
 export default LogOutIcon

package/src/components/icons/OrganizationIcon.jsx

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const OrganizationIcon = ({ 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={11} width={3} height={3} stroke='none' strokeLinejoin='round' />
+          <rect x={6.5} y={11} width={3} height={3} stroke='none' strokeLinejoin='round' />
+          <rect x={11} y={11} width={3} height={3} stroke='none' strokeLinejoin='round' />
+          <rect x={6} y={2} width={4} height={4} stroke='none' strokeLinejoin='round' />
+          <path d='M8 6V8.5M8 8.5H4C3.44772 8.5 3 8.94772 3 9.5V11M8 8.5H12C12.5523 8.5 13 8.94772 13 9.5V11M8 8.5V11' stroke='none' />
+
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={16.5} width={4.5} height={4.5} stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <rect x={9.75} y={16.5} width={4.5} height={4.5} stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <rect x={16.5} y={16.5} width={4.5} height={4.5} stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <rect x={9} y={3} width={6} height={6} stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M12 9V12.75M12 12.75H5.5C4.94772 12.75 4.5 13.1977 4.5 13.75V16.5M12 12.75H18.5C19.0523 12.75 19.5 13.1977 19.5 13.75V16.5M12 12.75V16.5' 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={27.5} width={7.5} height={7.5} stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <rect x={16.25} y={27.5} width={7.5} height={7.5} stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <rect x={27.5} y={27.5} width={7.5} height={7.5} stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <rect x={15} y={5} width={10} height={10} stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M20 15V21.25M20 21.25H8.5C7.94772 21.25 7.5 21.6977 7.5 22.25V27.5M20 21.25H31.5C32.0523 21.25 32.5 21.6977 32.5 22.25V27.5M20 21.25V27.5' stroke='none' strokeWidth={2} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+OrganizationIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+OrganizationIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default OrganizationIcon

package/src/components/icons/RequestOwnershipIcon.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const RequestOwnershipIcon = ({ 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='M11.4972 9.21851L14 10.0705L12.722 13.798L10.2725 12.8395L11.4972 9.21851Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.3374 9.64452C10.9647 9.18301 9.98485 8.26001 9.04764 8.26001C8.11044 8.26001 7.45013 8.75701 7.23713 9.00551H5.85262C5.62187 9.02326 5.16037 9.20786 5.16037 9.80427M5.16037 9.80427L3.40311 8.63276C3.40311 8.63276 2.72078 8.12695 2.23161 8.68601C1.74243 9.24507 2.1606 9.60902 2.28486 9.80427C3.13686 10.532 5.04322 12.0301 5.85262 12.2005C6.66203 12.3709 9.24289 12.378 10.4321 12.3603M5.16037 9.80427C5.16037 10.3581 5.51537 10.532 5.69287 10.5498H7.87613' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.99401 3.47059C5.99401 4.28277 5.32378 4.94118 4.49701 4.94118C3.67023 4.94118 3 4.28277 3 3.47059C3 2.6584 3.67023 2 4.49701 2C5.32378 2 5.99401 2.6584 5.99401 3.47059ZM5.99401 3.47059H9.10778M13 3.47059H11.9222M11.9222 3.47059V5M11.9222 3.47059H10.485M10.485 3.47059V4.47059M10.485 3.47059H9.10778M9.10778 3.47059V5' 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='M17.2459 13.8276L21 15.1056L19.083 20.6969L15.4087 19.2592L17.2459 13.8276Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M17.0061 14.4669C16.447 13.7746 14.9773 12.3901 13.5715 12.3901C12.1657 12.3901 11.1752 13.1356 10.8557 13.5084H8.77894C8.43281 13.535 7.74056 13.8119 7.74056 14.7065M7.74056 14.7065L5.10467 12.9493C5.10467 12.9493 4.08117 12.1906 3.34741 13.0291C2.61364 13.8677 3.24091 14.4136 3.42728 14.7065C4.70529 15.7982 7.56483 18.0453 8.77894 18.3009C9.99304 18.5565 13.8643 18.5672 15.6482 18.5405M7.74056 14.7065C7.74056 15.5372 8.27306 15.7982 8.53931 15.8248H11.8142' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.99102 5.20588C8.99102 6.42416 7.98567 7.41176 6.74551 7.41176C5.50535 7.41176 4.5 6.42416 4.5 5.20588C4.5 3.98761 5.50535 3 6.74551 3C7.98567 3 8.99102 3.98761 8.99102 5.20588ZM8.99102 5.20588H13.6617M19.5 5.20588H17.8832M17.8832 5.20588V7.5M17.8832 5.20588H15.7275M15.7275 5.20588V6.70588M15.7275 5.20588H13.6617M13.6617 5.20588V7.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='M28.7431 23.0464L35 25.1764L31.805 34.4952L25.6812 32.0989L28.7431 23.0464Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M28.3435 24.1112C27.4116 22.9574 24.9621 20.6499 22.6191 20.6499C20.2761 20.6499 18.6253 21.8924 18.0928 22.5137H14.6316C14.0547 22.558 12.9009 23.0195 12.9009 24.5105M12.9009 24.5105L8.50778 21.5818C8.50778 21.5818 6.80195 20.3173 5.57901 21.7149C4.35607 23.1126 5.40151 24.0224 5.71214 24.5105C7.84215 26.3299 12.608 30.0752 14.6316 30.5012C16.6551 30.9272 23.1072 30.945 26.0804 30.9006M12.9009 24.5105C12.9009 25.8951 13.7884 26.3299 14.2322 26.3743H19.6903' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.985 8.67647C14.985 10.7069 13.3094 12.3529 11.2425 12.3529C9.17558 12.3529 7.5 10.7069 7.5 8.67647C7.5 6.64601 9.17558 5 11.2425 5C13.3094 5 14.985 6.64601 14.985 8.67647ZM14.985 8.67647H22.7695M32.5 8.67647H29.8054M29.8054 8.67647V12.5M29.8054 8.67647H26.2126M26.2126 8.67647V11.1765M26.2126 8.67647H22.7695M22.7695 8.67647V12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+RequestOwnershipIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+RequestOwnershipIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default RequestOwnershipIcon

package/src/components/icons/UserIcon.jsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const UserIcon = ({ 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 10C4.68629 10 2 11.7909 2 14H14C14 11.7909 11.3137 10 8 10Z' stroke='none' strokeLinejoin='round' />
+          <circle cx={8} cy={5} r={3} stroke='none' />
+
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M12 15C7.02944 15 3 17.6863 3 21H21C21 17.6863 16.9706 15 12 15Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <circle cx={12} cy={7.5} r={4.5} 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}
+        >
+          <path d='M20 25C11.7157 25 5 29.4772 5 35H35C35 29.4772 28.2843 25 20 25Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <circle cx={20} cy={12.5} r={7.5} stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+UserIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+UserIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default UserIcon

package/src/components/icons/UserRemoveIcon.jsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const UserRemoveIcon = ({ color, size, tip }) => {
+  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'
+          data-tip={tip}
+          className={className}
+        >
+          <path d='M7 10.0553C4.16229 10.3727 2 12.018 2 14H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={8} cy={5} r={3} stroke='none' />
+          <circle cx={11} cy={11} r={3} stroke='none' />
+          <path d='M10 10L12 12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 12L12 10' 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'
+          data-tip={tip}
+          className={className}
+        >
+          <path d='M10.5 15.083C6.24343 15.559 3 18.027 3 21H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={12} cy={7.5} r={4.5} stroke='none' strokeWidth={1.5} />
+          <circle cx={16.5} cy={16.5} r={4.5} stroke='none' strokeWidth={1.5} />
+          <path d='M15 15L18 18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15 18L18 15' 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'
+          data-tip={tip}
+          className={className}
+        >
+          <path d='M17.5 25.1383C10.4057 25.9317 5 30.045 5 35H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={20} cy={12.5} r={7.5} stroke='none' strokeWidth={2} />
+          <circle cx={27.5} cy={27.5} r={7.5} stroke='none' strokeWidth={2} />
+          <path d='M25 25L30 30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M25 30L30 25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+UserRemoveIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * tip
+   */
+  tip: PropTypes.string
+}
+
+UserRemoveIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium',
+  tip: ''
+}
+
+export default UserRemoveIcon