@platformatic/ui-components 0.1.104 → 0.1.106

package/src/components/icons/SocialGitLabIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const SocialGitLabIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -9,7 +9,7 @@ const SocialGitLabIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -19,7 +19,7 @@ const SocialGitLabIcon = ({ color, size }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <g clip-path='url(#clip0_852_2118)'>
+          <g clipPath='url(#clip0_852_2118)'>
             <path d='M8.21846 13.8988L8.21422 13.9059C8.25805 13.9031 8.30046 13.8932 8.34146 13.8763C10.4339 12.5321 12.3863 10.9935 14.4122 9.55918C14.6483 9.39151 14.7233 9.16467 14.62 8.88005C14.3755 8.19951 14.1394 7.51616 13.899 6.83421C13.9047 6.78631 13.8905 6.74404 13.858 6.7074C13.4183 5.30265 12.9843 3.89648 12.5319 2.49596C12.4725 2.31138 12.4753 2.01831 12.211 1.99999C11.8929 1.97745 11.8872 2.28602 11.8179 2.49736C11.3542 3.89648 10.8962 5.29701 10.4353 6.69613L10.4409 6.68909C8.81084 6.68909 7.17934 6.68909 5.54925 6.68768L5.55349 6.69472C5.08412 5.27306 4.61192 3.8514 4.14537 2.42973C4.08741 2.25079 4.06479 2.03381 3.84282 2.0014C3.58976 1.96618 3.5629 2.19021 3.50634 2.36774C3.04687 3.81476 2.58598 5.26179 2.12508 6.7074C2.09115 6.74263 2.07702 6.78349 2.08267 6.83139C1.85223 7.49221 1.63168 8.15724 1.38709 8.81242C1.25985 9.1534 1.34609 9.39856 1.63168 9.60427C3.635 11.0372 5.63691 12.4715 7.64023 13.9045C7.73071 13.9651 7.82119 14.0242 7.91167 14.0848C7.9654 14.1849 8.01912 14.1849 8.07567 14.0876C8.12233 14.0242 8.16898 13.9594 8.21564 13.896L8.21846 13.8988Z' fill='none' className={filledClassName} />
             <path d='M5.55212 6.69049C7.18221 6.69049 8.81371 6.69049 10.4438 6.6919C9.90514 8.31082 9.33963 9.9227 8.83916 11.5529C8.60164 12.3264 8.20861 13.0661 8.21427 13.9059L8.21851 13.8988C8.17185 13.9622 8.1252 14.0271 8.07854 14.0905C8.02199 14.1877 7.96686 14.1877 7.91455 14.0876C7.84951 13.8411 7.7972 13.5903 7.71803 13.3479C6.99842 11.1274 6.27456 8.90964 5.55354 6.69049H5.55212Z' fill='none' className={filledClassName} />
             <path d='M5.55205 6.6905C6.27449 8.90965 6.99834 11.1288 7.71654 13.3479C7.79571 13.5903 7.84802 13.8411 7.91306 14.0877C7.82258 14.0271 7.73209 13.9679 7.64303 13.9073C7.64303 13.7594 7.57658 13.6438 7.48468 13.5283C6.45545 12.2278 5.45309 10.9062 4.39841 9.62682C3.62931 8.69407 2.9917 7.65284 2.08405 6.83281C2.0784 6.7849 2.09112 6.74263 2.12647 6.70882C3.27021 6.70459 4.41255 6.69895 5.55629 6.69473L5.55205 6.68768V6.6905Z' fill='none' className={filledClassName} />
@@ -39,7 +39,7 @@ const SocialGitLabIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -49,7 +49,7 @@ const SocialGitLabIcon = ({ color, size }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <g clip-path='url(#clip0_315_245)'>
+          <g clipPath='url(#clip0_315_245)'>
             <path d='M12.3277 20.8483L12.3213 20.8589C12.3871 20.8546 12.4507 20.8398 12.5122 20.8145C15.6508 18.7982 18.5794 16.4903 21.6183 14.3388C21.9725 14.0873 22.0849 13.747 21.9301 13.3201C21.5632 12.2993 21.209 11.2743 20.8485 10.2513C20.857 10.1795 20.8358 10.1161 20.787 10.0611C20.1275 7.95399 19.4765 5.84474 18.7978 3.74395C18.7088 3.46708 18.713 3.02748 18.3165 3.00001C17.8393 2.96619 17.8308 3.42904 17.7269 3.74606C17.0313 5.84474 16.3442 7.94553 15.6529 10.0442L15.6614 10.0336C13.2163 10.0336 10.769 10.0336 8.32388 10.0315L8.33024 10.0421C7.62618 7.9096 6.91788 5.77711 6.21806 3.64462C6.13111 3.3762 6.09718 3.05073 5.76424 3.00212C5.38464 2.94928 5.34434 3.28532 5.25952 3.55162C4.5703 5.72216 3.87896 7.8927 3.18763 10.0611C3.13673 10.114 3.11552 10.1752 3.12401 10.2471C2.77834 11.2383 2.44751 12.2359 2.08064 13.2186C1.88978 13.7301 2.01914 14.0979 2.44751 14.4064C5.4525 16.5558 8.45536 18.7073 11.4603 20.8567C11.5961 20.9476 11.7318 21.0364 11.8675 21.1273C11.9481 21.2773 12.0287 21.2773 12.1135 21.1315C12.1835 21.0364 12.2535 20.9392 12.3235 20.8441L12.3277 20.8483Z' fill='none' className={filledClassName} />
             <path d='M8.32812 10.0358C10.7733 10.0358 13.2205 10.0358 15.6656 10.0379C14.8577 12.4663 14.0094 14.8841 13.2587 17.3294C12.9024 18.4897 12.3129 19.5992 12.3213 20.8589L12.3277 20.8483C12.2577 20.9434 12.1877 21.0406 12.1178 21.1357C12.0329 21.2816 11.9502 21.2816 11.8718 21.1315C11.7742 20.7616 11.6957 20.3854 11.577 20.0219C10.4976 16.6911 9.41179 13.3645 8.33025 10.0358H8.32812Z' fill='none' className={filledClassName} />
             <path d='M8.32807 10.0358C9.41173 13.3645 10.4975 16.6932 11.5748 20.0219C11.6936 20.3854 11.772 20.7616 11.8696 21.1315C11.7339 21.0406 11.5981 20.9518 11.4645 20.861C11.4645 20.639 11.3649 20.4657 11.227 20.2924C9.68318 18.3417 8.17963 16.3593 6.59761 14.4402C5.44397 13.0411 4.48755 11.4793 3.12608 10.2492C3.1176 10.1774 3.13668 10.1139 3.1897 10.0632C4.90532 10.0569 6.61882 10.0484 8.33444 10.0421L8.32807 10.0315V10.0358Z' fill='none' className={filledClassName} />
@@ -68,7 +68,7 @@ const SocialGitLabIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -78,7 +78,7 @@ const SocialGitLabIcon = ({ color, size }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <g clip-path='url(#clip0_852_2190)'>
+          <g clipPath='url(#clip0_852_2190)'>
             <path d='M20.5462 34.7471L20.5356 34.7647C20.6451 34.7577 20.7512 34.733 20.8537 34.6908C26.0846 31.3304 30.9657 27.4838 36.0306 23.898C36.6208 23.4788 36.8081 22.9117 36.5501 22.2001C35.9387 20.4988 35.3484 18.7904 34.7476 17.0855C34.7617 16.9658 34.7263 16.8601 34.6451 16.7685C33.5458 13.2566 32.4608 9.74122 31.3297 6.2399C31.1813 5.77846 31.1884 5.04579 30.5274 5C29.7322 4.94364 29.718 5.71506 29.5449 6.24343C28.3856 9.74122 27.2404 13.2425 26.0882 16.7403L26.1023 16.7227C22.0271 16.7227 17.9483 16.7227 13.8731 16.7192L13.8837 16.7368C12.7103 13.1827 11.5298 9.62851 10.3634 6.07435C10.2185 5.627 10.162 5.08454 9.60706 5.00352C8.97439 4.91546 8.90724 5.47553 8.76586 5.91936C7.61717 9.53692 6.46494 13.1545 5.31271 16.7685C5.22788 16.8566 5.19254 16.9587 5.20668 17.0785C4.63056 18.7305 4.07919 20.3931 3.46773 22.0311C3.14963 22.8835 3.36523 23.4964 4.07919 24.0107C9.0875 27.593 14.0923 31.1789 19.1006 34.7612C19.3268 34.9127 19.553 35.0606 19.7792 35.2121C19.9135 35.4622 20.0478 35.4622 20.1892 35.2191C20.3058 35.0606 20.4225 34.8986 20.5391 34.7401L20.5462 34.7471Z' fill='none' className={filledClassName} />
             <path d='M13.8801 16.7263C17.9553 16.7263 22.0341 16.7263 26.1093 16.7298C24.7627 20.7771 23.3489 24.8068 22.0977 28.8823C21.5039 30.8161 20.5213 32.6654 20.5355 34.7647L20.5461 34.7471C20.4295 34.9056 20.3128 35.0677 20.1962 35.2262C20.0548 35.4692 19.917 35.4692 19.7862 35.2191C19.6236 34.6027 19.4928 33.9757 19.2949 33.3699C17.4959 27.8185 15.6862 22.2741 13.8837 16.7263H13.8801Z' fill='none' className={filledClassName} />
             <path d='M13.8801 16.7263C15.6862 22.2741 17.4959 27.822 19.2914 33.3699C19.4893 33.9757 19.6201 34.6027 19.7826 35.2191C19.5564 35.0677 19.3302 34.9197 19.1076 34.7683C19.1076 34.3984 18.9414 34.1096 18.7117 33.8207C16.1386 30.5695 13.6327 27.2654 10.996 24.067C9.07328 21.7352 7.47925 19.1321 5.21013 17.082C5.196 16.9623 5.22781 16.8566 5.31617 16.772C8.17553 16.7615 11.0314 16.7474 13.8907 16.7368L13.8801 16.7192V16.7263Z' fill='none' className={filledClassName} />
@@ -116,8 +116,8 @@ SocialGitLabIcon.propTypes = {
 }
 
 SocialGitLabIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default SocialGitLabIcon

package/src/components/icons/SocialLinkedInIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const SocialLinkedInIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -9,7 +9,7 @@ const SocialLinkedInIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -26,7 +26,7 @@ const SocialLinkedInIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -43,7 +43,7 @@ const SocialLinkedInIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -79,8 +79,8 @@ SocialLinkedInIcon.propTypes = {
 }
 
 SocialLinkedInIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default SocialLinkedInIcon

package/src/components/icons/SocialNPMIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const SocialNPMIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -9,7 +9,7 @@ const SocialNPMIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -23,7 +23,7 @@ const SocialNPMIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -37,7 +37,7 @@ const SocialNPMIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -71,8 +71,8 @@ SocialNPMIcon.propTypes = {
 }
 
 SocialNPMIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default SocialNPMIcon

package/src/components/icons/SocialTwitterIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const SocialTwitterIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -9,7 +9,7 @@ const SocialTwitterIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -23,7 +23,7 @@ const SocialTwitterIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -37,7 +37,7 @@ const SocialTwitterIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -71,8 +71,8 @@ SocialTwitterIcon.propTypes = {
 }
 
 SocialTwitterIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default SocialTwitterIcon

package/src/components/icons/StopIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const StopIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -23,7 +23,7 @@ const StopIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -38,7 +38,7 @@ const StopIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -72,8 +72,8 @@ StopIcon.propTypes = {
 }
 
 StopIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default StopIcon

package/src/components/icons/SwitchIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const SwitchIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -23,7 +23,7 @@ const SwitchIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -39,7 +39,7 @@ const SwitchIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -74,8 +74,8 @@ SwitchIcon.propTypes = {
 }
 
 SwitchIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default SwitchIcon

package/src/components/icons/TeamsIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const TeamsIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -27,7 +27,7 @@ const TeamsIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -46,7 +46,7 @@ const TeamsIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -84,8 +84,8 @@ TeamsIcon.propTypes = {
 }
 
 TeamsIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default TeamsIcon

package/src/components/icons/TerminalIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const TerminalIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -24,7 +24,7 @@ const TerminalIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -41,7 +41,7 @@ const TerminalIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -76,8 +76,8 @@ TerminalIcon.propTypes = {
 }
 
 TerminalIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default TerminalIcon

package/src/components/icons/TwoUsersIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const TwoUsersIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -25,7 +25,7 @@ const TwoUsersIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -42,7 +42,7 @@ const TwoUsersIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -78,8 +78,8 @@ TwoUsersIcon.propTypes = {
 }
 
 TwoUsersIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default TwoUsersIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UpgradeIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -25,7 +25,7 @@ const UpgradeIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -41,7 +41,7 @@ const UpgradeIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -58,7 +58,7 @@ const UpgradeIcon = ({ color, size }) => {
       )
       break
 
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={120}
@@ -111,8 +111,8 @@ UpgradeIcon.propTypes = {
 }
 
 UpgradeIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default UpgradeIcon

package/src/components/icons/UserIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -24,7 +24,7 @@ const UserIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -39,7 +39,7 @@ const UserIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -73,8 +73,8 @@ UserIcon.propTypes = {
 }
 
 UserIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default UserIcon

package/src/components/icons/UserRemoveIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserRemoveIcon = ({ color, size, tip }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -28,7 +28,7 @@ const UserRemoveIcon = ({ color, size, tip }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -47,7 +47,7 @@ const UserRemoveIcon = ({ color, size, tip }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -89,8 +89,8 @@ UserRemoveIcon.propTypes = {
 }
 
 UserRemoveIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium',
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM,
   tip: ''
 }
 

package/src/components/icons/UserRoleIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserRoleIcon = ({ color, size, tip }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -27,7 +27,7 @@ const UserRoleIcon = ({ color, size, tip }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -46,7 +46,7 @@ const UserRoleIcon = ({ color, size, tip }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -88,8 +88,8 @@ UserRoleIcon.propTypes = {
 }
 
 UserRoleIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium',
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM,
   tip: ''
 }
 

package/src/components/icons/WorkspaceDynamicIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceDynamicIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -26,7 +26,7 @@ const WorkspaceDynamicIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -44,7 +44,7 @@ const WorkspaceDynamicIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -81,8 +81,8 @@ WorkspaceDynamicIcon.propTypes = {
 }
 
 WorkspaceDynamicIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceDynamicIcon