@platformatic/ui-components 0.1.104 → 0.1.106

package/src/components/icons/CreatingAppIcon.jsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, LARGE, MAIN_DARK_BLUE, MEDIUM, SIZES, SMALL } from '../constants'
+
+const CreatingAppIcon = ({ 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='M5.03863 3.67641C5.67194 2.66596 6.75489 2 7.98447 2C9.9368 2 11.5195 3.67896 11.5195 5.75007C11.5195 6.12669 11.4671 6.49035 11.3698 6.8333M4.49834 5.12506C4.46619 5.32831 4.44946 5.53712 4.44946 5.75007C4.44946 7.82117 6.03214 9.50013 7.98447 9.50013C9.04028 9.50013 9.98799 9.00911 10.6357 8.23057' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8 3.5L8.44903 4.88197H9.90211L8.72654 5.73607L9.17557 7.11803L8 6.26393L6.82443 7.11803L7.27346 5.73607L6.09789 4.88197H7.55097L8 3.5Z' stroke='none' strokeLinejoin='round' />
+          <path d='M10.4287 5.65625L11.3522 6.87355L12.4996 5.89393' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.57812 6.01367L4.46802 4.98671L3.49995 6.16435' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4 2.95996H3C2.44772 2.95996 2 3.40768 2 3.95996V9.63996C2 10.1922 2.44772 10.64 3 10.64H13C13.5523 10.64 14 10.1922 14 9.63996V3.95996C14 3.40768 13.5523 2.95996 13 2.95996H12' stroke='none' strokeLinecap='round' />
+          <rect x='6' y='10.6399' width='4' height='1.92' stroke='none' />
+          <path d='M4 13.5601C4 13.0078 4.44772 12.5601 5 12.5601H11C11.5523 12.5601 12 13.0078 12 13.5601V14.0001H4V13.5601Z' 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='M7.55782 5.51461C8.50779 3.99893 10.1322 3 11.9766 3C14.9051 3 17.2791 5.51844 17.2791 8.6251C17.2791 9.19004 17.2006 9.73552 17.0545 10.2499M6.74739 7.68758C6.69917 7.99247 6.67407 8.30568 6.67407 8.6251C6.67407 11.7318 9.04809 14.2502 11.9766 14.2502C13.5603 14.2502 14.9819 13.5137 15.9535 12.3459' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12 5.5L12.6735 7.57295H14.8532L13.0898 8.8541L13.7634 10.9271L12 9.6459L10.2366 10.9271L10.9102 8.8541L9.14683 7.57295H11.3265L12 5.5Z' stroke='none' strokeWidth='1.5' strokeLinejoin='round' />
+          <path d='M15.6431 8.48462L17.0282 10.3106L18.7495 8.84114' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.36719 9.02051L6.70203 7.48006L5.24992 9.24652' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6 4.43994H4C3.44772 4.43994 3 4.88766 3 5.43994V14.9599C3 15.5122 3.44772 15.9599 4 15.9599H20C20.5523 15.9599 21 15.5122 21 14.9599V5.43994C21 4.88766 20.5523 4.43994 20 4.43994H18' stroke='none' strokeWidth='1.5' strokeLinecap='round' />
+          <rect x='9' y='15.96' width='6' height='2.88' stroke='none' strokeWidth='1.5' />
+          <path d='M6 19.8398C6 19.2876 6.44772 18.8398 7 18.8398H17C17.5523 18.8398 18 19.2876 18 19.8398V20.9998H6V19.8398Z' 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='M12.5965 9.19102C14.1797 6.66489 16.8871 5 19.9611 5C24.8419 5 28.7986 9.19741 28.7986 14.3752C28.7986 15.3167 28.6677 16.2259 28.4243 17.0832M11.2457 12.8126C11.1654 13.3208 11.1235 13.8428 11.1235 14.3752C11.1235 19.5529 15.0802 23.7503 19.9611 23.7503C22.6006 23.7503 24.9698 22.5228 26.5892 20.5764' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19.7 9L20.8225 12.4549H24.4552L21.5163 14.5902L22.6389 18.0451L19.7 15.9098L16.761 18.0451L17.8836 14.5902L14.9447 12.4549H18.5774L19.7 9Z' stroke='none' strokeWidth='2' strokeLinejoin='round' />
+          <path d='M26.072 14.1409L28.3806 17.1841L31.2494 14.7351' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.9453 15.0342L11.1701 12.4668L8.74987 15.4109' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 7.3999H6C5.44772 7.3999 5 7.84762 5 8.3999V25.5999C5 26.1522 5.44772 26.5999 6 26.5999H34C34.5523 26.5999 35 26.1522 35 25.5999V8.3999C35 7.84762 34.5523 7.3999 34 7.3999H30' stroke='none' strokeWidth='2' strokeLinecap='round' />
+          <rect x='15' y='26.5999' width='10' height='4.8' stroke='none' strokeWidth='2' />
+          <path d='M10 32.3999C10 31.8476 10.4477 31.3999 11 31.3999H29C29.5523 31.3999 30 31.8476 30 32.3999V34.9999H10V32.3999Z' stroke='none' strokeWidth='2' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CreatingAppIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+CreatingAppIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+
+export default CreatingAppIcon

package/src/components/icons/CreditCardIcon.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 CreditCardIcon = ({ 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 CreditCardIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -42,7 +42,7 @@ const CreditCardIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -78,8 +78,8 @@ CreditCardIcon.propTypes = {
 }
 
 CreditCardIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default CreditCardIcon

package/src/components/icons/DatabaseIcon.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 DatabaseIcon = ({ 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 DatabaseIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -40,7 +40,7 @@ const DatabaseIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -75,8 +75,8 @@ DatabaseIcon.propTypes = {
 }
 
 DatabaseIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default DatabaseIcon

package/src/components/icons/DatabaseMigrationIcon.jsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, LARGE, MAIN_DARK_BLUE, MEDIUM, SIZES, SMALL } from '../constants'
+
+const DatabaseMigrationIcon = ({ 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='M9.68472 7.77764C12.1783 7.52864 14 6.74093 14 5.80772C14 5.20002 13.2275 4.65402 12 4.2783M6.1467 7.75987C3.74 7.49284 2 6.71977 2 5.80772C2 5.20002 2.7725 4.65402 4 4.2783' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14 8.95076C14 9.90681 12.0876 10.7102 9.5 10.938M2 8.95076C2 9.84412 3.66978 10.6042 6 10.8859' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14 5.80772V11.9481C14 13.0813 11.3133 14 8 14C4.68667 14 2 13.0813 2 11.9481V5.80772' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8 12L8 2M8 2L5.5 5M8 2L10.5 5' 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='M14.5271 11.6665C18.2675 11.293 21 10.1114 21 8.71158C21 7.80002 19.8412 6.98102 18 6.41744M9.22005 11.6398C5.61001 11.2393 3 10.0797 3 8.71158C3 7.80002 4.15875 6.98102 6 6.41744' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21 13.4261C21 14.8602 18.1315 16.0653 14.25 16.407M3 13.4261C3 14.7662 5.50467 15.9063 9 16.3288' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21 8.71157V17.9221C21 19.6219 16.97 20.9999 12 20.9999C7.03 20.9999 3 19.6219 3 17.9221V8.71157' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12 18L12 3M12 3L8.25 7.5M12 3L15.75 7.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='M24.2118 19.4441C30.4458 18.8216 35 16.8523 35 14.5193C35 13 33.0687 11.635 30 10.6957M15.3668 19.3997C9.35001 18.7321 5 16.7994 5 14.5193C5 13 6.93125 11.635 10 10.6957' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M35 22.3769C35 24.767 30.2191 26.7755 23.75 27.345M5 22.3769C5 24.6103 9.17444 26.5104 15 27.2147' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M35 14.5193V29.8702C35 32.7031 28.2833 34.9999 20 34.9999C11.7167 34.9999 5 32.7031 5 29.8702V14.5193' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20 30L20 5M20 5L13.75 12.5M20 5L26.25 12.5' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+DatabaseMigrationIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+DatabaseMigrationIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+
+export default DatabaseMigrationIcon

package/src/components/icons/EditIcon.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 EditIcon = ({ 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 EditIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -40,7 +40,7 @@ const EditIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -75,8 +75,8 @@ EditIcon.propTypes = {
 }
 
 EditIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default EditIcon

package/src/components/icons/EnlargeIcon.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 EnlargeIcon = ({ 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 EnlargeIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -43,7 +43,7 @@ const EnlargeIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -79,8 +79,8 @@ EnlargeIcon.propTypes = {
 }
 
 EnlargeIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default EnlargeIcon

package/src/components/icons/EntryIcon.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 EntryIcon = ({ 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 EntryIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -41,7 +41,7 @@ const EntryIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -76,8 +76,8 @@ EntryIcon.propTypes = {
 }
 
 EntryIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default EntryIcon

package/src/components/icons/ExploreDocIcon.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 ExploreDocIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -28,7 +28,7 @@ const ExploreDocIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -49,7 +49,7 @@ const ExploreDocIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -89,8 +89,8 @@ ExploreDocIcon.propTypes = {
 }
 
 ExploreDocIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default ExploreDocIcon

package/src/components/icons/EyeClosedIcon.jsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, MAIN_DARK_BLUE, SIZES, SMALL } from '../constants'
+
+const EyeClosedIcon = ({ 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='M14 8.50024C14 10.1571 11.3137 11.5002 8 11.5002C7.48205 11.5002 6.97943 11.4674 6.5 11.4057C5.14526 11.2314 3.9757 10.8264 3.1687 10.2795C2.43416 9.78172 2 9.16633 2 8.50024C2 6.84339 4.68629 5.50024 8 5.50024C9.30618 5.50024 10.5149 5.70893 11.5 6.06327C13.0141 6.60786 14 7.49648 14 8.50024Z' stroke='none' />
+          <ellipse cx='8' cy='8.38486' rx='3' ry='2.88462' stroke='none' />
+          <line x1='2' y1='13.7931' x2='13.2929' y2='2.50024' stroke='none' strokeLinecap='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+EyeClosedIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+EyeClosedIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: SMALL
+}
+
+export default EyeClosedIcon

package/src/components/icons/EyeOpenedIcon.jsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, MAIN_DARK_BLUE, SIZES, SMALL } from '../constants'
+
+const EyeOpenedIcon = ({ 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}
+        >
+          <ellipse cx='8' cy='8' rx='6' ry='3' stroke='none' />
+          <ellipse cx='8' cy='7.88462' rx='3' ry='2.88462' stroke='none' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+EyeOpenedIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+EyeOpenedIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: SMALL
+}
+
+export default EyeOpenedIcon

package/src/components/icons/GearIcon.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 GearIcon = ({ 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 GearIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -38,7 +38,7 @@ const GearIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -72,8 +72,8 @@ GearIcon.propTypes = {
 }
 
 GearIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default GearIcon

package/src/components/icons/GenerationLoadingIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, EXTRA_LARGE, SIZES } from '../constants'
+import { COLORS_ICON, EXTRA_LARGE, SIZES, MAIN_DARK_BLUE, MEDIUM } from '../constants'
 
 const GenerationLoadingIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -49,8 +49,8 @@ GenerationLoadingIcon.propTypes = {
 }
 
 GenerationLoadingIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default GenerationLoadingIcon