@platformatic/ui-components 0.1.105 → 0.1.106

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

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

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

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

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

package/src/components/icons/ChatGPTIcon.jsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const ChatGPTIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${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='M13.0595 6.91115C13.1941 6.50708 13.2406 6.07921 13.1963 5.65568C13.152 5.23214 13.0176 4.8232 12.8025 4.45588C12.4836 3.90017 11.9962 3.46041 11.4108 3.19959C10.8256 2.93876 10.1726 2.87092 9.54609 3.00525C9.26364 2.68686 8.91633 2.43252 8.52738 2.25899C8.13871 2.08574 7.71734 1.99736 7.29164 2.00006C6.65106 1.99844 6.0267 2.20034 5.50829 2.57658C4.98988 2.95282 4.60446 3.48393 4.40742 4.09342C3.9901 4.17883 3.59602 4.35236 3.25113 4.60237C2.90625 4.85239 2.61921 5.17322 2.40838 5.54351C2.08701 6.09759 1.94971 6.73952 2.01647 7.37686C2.08323 8.01392 2.35081 8.61341 2.7803 9.08885C2.64569 9.49265 2.59921 9.92079 2.64353 10.3443C2.68786 10.7679 2.82219 11.1768 3.03734 11.5441C3.35628 12.0998 3.8436 12.5396 4.42904 12.8004C5.01421 13.0612 5.66722 13.1291 6.29374 12.9947C6.57619 13.3131 6.92378 13.5675 7.31245 13.741C7.70139 13.9143 8.12277 14.0026 8.54847 13.9999C9.18931 14.0016 9.81394 13.7997 10.3326 13.4231C10.8513 13.0466 11.2367 12.5153 11.4338 11.9055C11.8511 11.8201 12.2452 11.6466 12.5898 11.3965C12.9344 11.1465 13.222 10.8257 13.4325 10.4554C13.7536 9.90132 13.8907 9.25967 13.8236 8.6226C13.7566 7.98581 13.489 7.38659 13.0598 6.91142M8.54955 13.2156C8.02357 13.2164 7.51408 13.032 7.11001 12.695C7.12811 12.685 7.16028 12.6674 7.18109 12.6547L9.57042 11.2746C9.63042 11.2406 9.68015 11.1911 9.71475 11.1314C9.74935 11.0717 9.76718 11.0038 9.76691 10.9349V7.5666L10.7767 8.1496C10.7821 8.15231 10.7864 8.15609 10.7899 8.16096C10.7935 8.16582 10.7956 8.1715 10.7964 8.17717V10.9668C10.7956 11.5625 10.5589 12.1339 10.1377 12.5553C9.71664 12.9769 9.14553 13.2142 8.54982 13.2156M3.71765 11.1517C3.45412 10.6965 3.35925 10.163 3.44952 9.64482C3.46736 9.65537 3.49818 9.67456 3.52061 9.68726L5.90994 11.0673C5.9694 11.1022 6.03724 11.1206 6.10616 11.1206C6.17509 11.1206 6.24293 11.1022 6.30239 11.0673L9.21932 9.38319V10.5495C9.21959 10.5554 9.21851 10.5614 9.21607 10.5668C9.21364 10.5722 9.20959 10.5768 9.20499 10.5806L6.78972 11.975C6.2732 12.2725 5.65938 12.3531 5.08367 12.1988C4.50769 12.0444 4.01658 11.6679 3.71792 11.1522M3.0895 5.93623C3.35195 5.48026 3.7663 5.13132 4.26011 4.95023C4.26011 4.97077 4.25903 5.00726 4.25903 5.03267V7.79283C4.25849 7.86175 4.2766 7.92959 4.31093 7.98932C4.34525 8.04906 4.39498 8.09852 4.45499 8.13257L7.37191 9.81673L6.36212 10.3997C6.35726 10.403 6.35131 10.4051 6.34537 10.4054C6.33942 10.4059 6.33347 10.4051 6.3278 10.4027L3.91225 9.00695C3.39655 8.70828 3.02031 8.21744 2.86598 7.64174C2.71164 7.06603 2.79192 6.45275 3.08923 5.93623M11.3865 7.86688L8.46954 6.18273L9.47933 5.59973C9.4842 5.59648 9.49014 5.59432 9.49609 5.59405C9.50203 5.59351 9.50798 5.59459 9.51339 5.59675L11.9289 6.99116C12.299 7.20495 12.6006 7.51957 12.7982 7.89851C12.9957 8.27745 13.0814 8.70477 13.0449 9.13074C13.0085 9.55644 12.8514 9.96322 12.5922 10.303C12.333 10.6427 11.9824 10.9017 11.5813 11.0495V8.20663C11.5819 8.13771 11.564 8.07014 11.53 8.01041C11.4957 7.95067 11.4462 7.90121 11.3865 7.86688ZM12.3917 6.35409C12.3741 6.34328 12.343 6.32463 12.3208 6.31166L9.93152 4.93158C9.87206 4.89671 9.80421 4.8786 9.73529 4.8786C9.66637 4.8786 9.59853 4.89698 9.53906 4.93158L6.62214 6.616V5.44972C6.62187 5.44377 6.62295 5.43783 6.62538 5.43242C6.62782 5.42701 6.6316 5.42242 6.63646 5.41864L9.05174 4.02531C9.42176 3.81206 9.84476 3.70827 10.2715 3.72665C10.6983 3.74503 11.111 3.88449 11.4613 4.12883C11.8116 4.37317 12.0852 4.71211 12.25 5.10618C12.4146 5.50026 12.4638 5.93299 12.3917 6.35409ZM6.07292 8.43286L5.06286 7.84986C5.05745 7.84715 5.05286 7.84337 5.04962 7.8385C5.0461 7.83364 5.04394 7.82796 5.0434 7.82229V5.03213C5.0434 4.6048 5.16557 4.18667 5.39504 3.82611C5.62451 3.46555 5.95183 3.17797 6.33861 2.99687C6.72566 2.81578 7.15595 2.74848 7.57976 2.80308C8.00357 2.85768 8.40305 3.03201 8.73118 3.30527C8.71307 3.31527 8.68118 3.33284 8.66009 3.34554L6.27077 4.72562C6.21076 4.75968 6.16103 4.80914 6.12644 4.86887C6.09184 4.92861 6.074 4.99645 6.07427 5.06537L6.07265 8.43259L6.07292 8.43286ZM6.62133 7.25009L7.92059 6.49978L9.21986 7.24955V8.74991L7.92059 9.49995L6.62133 8.74991V7.25009Z' fill='none' className={filledClassName} />
+        </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='M19.5893 10.3667C19.7912 9.76061 19.8609 9.11882 19.7945 8.48351C19.728 7.84821 19.5265 7.23479 19.2037 6.68382C18.7253 5.85025 17.9943 5.19062 17.1162 4.79938C16.2384 4.40814 15.2589 4.30638 14.3191 4.50788C13.8955 4.03028 13.3745 3.64878 12.7911 3.38849C12.2081 3.12861 11.576 2.99604 10.9375 3.00009C9.97659 2.99766 9.04005 3.30051 8.26244 3.86487C7.48483 4.42923 6.90668 5.22589 6.61113 6.14014C5.98514 6.26825 5.39403 6.52854 4.8767 6.90356C4.35938 7.27858 3.92881 7.75982 3.61258 8.31526C3.13052 9.14639 2.92456 10.1093 3.0247 11.0653C3.12484 12.0209 3.52622 12.9201 4.17045 13.6333C3.96854 14.239 3.89881 14.8812 3.9653 15.5165C4.03179 16.1518 4.23329 16.7652 4.55601 17.3162C5.03441 18.1497 5.7654 18.8094 6.64356 19.2006C7.52131 19.5919 8.50083 19.6936 9.44061 19.4921C9.86429 19.9697 10.3857 20.3512 10.9687 20.6115C11.5521 20.8714 12.1841 21.004 12.8227 20.9999C13.784 21.0023 14.7209 20.6995 15.4989 20.1347C16.277 19.57 16.8551 18.7729 17.1507 17.8582C17.7766 17.7301 18.3677 17.4698 18.8847 17.0948C19.4016 16.7198 19.833 16.2386 20.1488 15.6831C20.6304 14.852 20.836 13.8895 20.7355 12.9339C20.6349 11.9787 20.2335 11.0799 19.5897 10.3671M12.8243 19.8234C12.0354 19.8246 11.2711 19.5481 10.665 19.0425C10.6922 19.0275 10.7404 19.0011 10.7716 18.9821L14.3556 16.912C14.4456 16.8609 14.5202 16.7867 14.5721 16.6971C14.624 16.6075 14.6508 16.5057 14.6504 16.4023V11.3499L16.1651 12.2244C16.1732 12.2285 16.1796 12.2341 16.1849 12.2414C16.1902 12.2487 16.1934 12.2572 16.1947 12.2658V16.4502C16.1934 17.3438 15.8383 18.2008 15.2066 18.8329C14.575 19.4654 13.7183 19.8213 12.8247 19.8234M5.57647 16.7275C5.18118 16.0448 5.03887 15.2444 5.17429 14.4672C5.20105 14.483 5.24726 14.5118 5.28091 14.5309L8.8649 16.601C8.9541 16.6533 9.05586 16.6809 9.15925 16.6809C9.26263 16.6809 9.36439 16.6533 9.45359 16.601L13.829 14.0748V15.8242C13.8294 15.8331 13.8278 15.842 13.8241 15.8502C13.8205 15.8583 13.8144 15.8652 13.8075 15.8708L10.1846 17.9624C9.4098 18.4088 8.48907 18.5296 7.62551 18.2981C6.76154 18.0666 6.02488 17.5019 5.57688 16.7283M4.63426 8.90435C5.02793 8.22039 5.64945 7.69698 6.39017 7.42535C6.39017 7.45616 6.38855 7.51089 6.38855 7.549V11.6892C6.38774 11.7926 6.4149 11.8944 6.46639 11.984C6.51788 12.0736 6.59248 12.1478 6.68248 12.1989L11.0579 14.7251L9.54319 15.5996C9.53589 15.6045 9.52697 15.6077 9.51805 15.6081C9.50913 15.6089 9.50021 15.6077 9.4917 15.6041L5.86838 13.5104C5.09482 13.0624 4.53047 12.3262 4.29897 11.4626C4.06747 10.599 4.18788 9.67912 4.63385 8.90435M17.0797 11.8003L12.7043 9.2741L14.219 8.39959C14.2263 8.39472 14.2352 8.39148 14.2441 8.39108C14.2531 8.39027 14.262 8.39189 14.2701 8.39513L17.8934 10.4867C18.4484 10.8074 18.9009 11.2794 19.1973 11.8478C19.4936 12.4162 19.6221 13.0572 19.5674 13.6961C19.5127 14.3347 19.2771 14.9448 18.8883 15.4545C18.4995 15.9641 17.9737 16.3525 17.372 16.5743V12.31C17.3728 12.2066 17.3461 12.1052 17.295 12.0156C17.2435 11.926 17.1693 11.8518 17.0797 11.8003ZM18.5875 9.53114C18.5611 9.51492 18.5145 9.48695 18.4813 9.46749L14.8973 7.39737C14.8081 7.34507 14.7063 7.31791 14.6029 7.31791C14.4996 7.31791 14.3978 7.34548 14.3086 7.39737L9.93321 9.924V8.17458C9.9328 8.16566 9.93443 8.15674 9.93807 8.14863C9.94172 8.14052 9.9474 8.13363 9.9547 8.12795L13.5776 6.03797C14.1326 5.71808 14.7671 5.5624 15.4073 5.58997C16.0475 5.61754 16.6666 5.82674 17.192 6.19325C17.7174 6.55975 18.1277 7.06816 18.375 7.65928C18.622 8.25039 18.6957 8.89948 18.5875 9.53114ZM9.10938 12.6493L7.59429 11.7748C7.58618 11.7707 7.57929 11.7651 7.57442 11.7578C7.56915 11.7505 7.56591 11.7419 7.5651 11.7334V7.54819C7.5651 6.90721 7.74835 6.28001 8.09256 5.73917C8.43677 5.19832 8.92775 4.76695 9.50791 4.49531C10.0885 4.22367 10.7339 4.12272 11.3696 4.20462C12.0054 4.28652 12.6046 4.54802 13.0968 4.95791C13.0696 4.97291 13.0218 4.99926 12.9901 5.01831L9.40615 7.08843C9.31615 7.13952 9.24155 7.21371 9.18965 7.30331C9.13776 7.39291 9.111 7.49467 9.11141 7.59806L9.10897 12.6489L9.10938 12.6493ZM9.93199 10.8751L11.8809 9.74967L13.8298 10.8743V13.1249L11.8809 14.2499L9.93199 13.1249V10.8751Z' fill='none' className={filledClassName} />
+        </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='M32.6488 17.2779C32.9853 16.2677 33.1016 15.198 32.9908 14.1392C32.8799 13.0803 32.5441 12.058 32.0062 11.1397C31.2089 9.75042 29.9906 8.65104 28.527 7.99897C27.0641 7.34691 25.4315 7.1773 23.8652 7.51313C23.1591 6.71714 22.2908 6.08129 21.3185 5.64748C20.3468 5.21435 19.2933 4.99339 18.2291 5.00015C16.6277 4.9961 15.0668 5.50085 13.7707 6.44145C12.4747 7.38204 11.5111 8.70982 11.0185 10.2336C9.97524 10.4471 8.99005 10.8809 8.12784 11.5059C7.26563 12.131 6.54802 12.933 6.02096 13.8588C5.21753 15.244 4.87427 16.8488 5.04117 18.4421C5.20807 20.0348 5.87703 21.5335 6.95074 22.7221C6.61424 23.7316 6.49801 24.802 6.60883 25.8608C6.71965 26.9197 7.05548 27.942 7.59335 28.8603C8.39069 30.2496 9.609 31.349 11.0726 32.001C12.5355 32.6531 14.168 32.8227 15.7344 32.4869C16.4405 33.2829 17.3094 33.9187 18.2811 34.3525C19.2535 34.7856 20.3069 35.0066 21.3712 34.9998C22.9733 35.0039 24.5349 34.4991 25.8316 33.5579C27.1283 32.6166 28.0918 31.2881 28.5844 29.7637C29.6277 29.5502 30.6129 29.1164 31.4744 28.4914C32.336 27.8663 33.0549 27.0643 33.5813 26.1385C34.3841 24.7533 34.7267 23.1492 34.5591 21.5565C34.3915 19.9645 33.7226 18.4665 32.6495 17.2786M21.3739 33.0389C20.0589 33.041 18.7852 32.5801 17.775 31.7375C17.8203 31.7125 17.9007 31.6686 17.9527 31.6368L23.926 28.1866C24.0761 28.1015 24.2004 27.9778 24.2869 27.8285C24.3734 27.6792 24.418 27.5096 24.4173 27.3372V18.9165L26.9418 20.374C26.9553 20.3808 26.9661 20.3902 26.9749 20.4024C26.9837 20.4146 26.9891 20.4287 26.9911 20.4429V27.417C26.9891 28.9063 26.3971 30.3347 25.3444 31.3882C24.2916 32.4423 22.8638 33.0355 21.3745 33.0389M9.29412 27.8792C8.6353 26.7413 8.39812 25.4074 8.62381 24.1121C8.66841 24.1384 8.74544 24.1864 8.80152 24.2181L14.7748 27.6683C14.9235 27.7555 15.0931 27.8015 15.2654 27.8015C15.4377 27.8015 15.6073 27.7555 15.756 27.6683L23.0483 23.458V26.3737C23.049 26.3885 23.0463 26.4034 23.0402 26.4169C23.0341 26.4304 23.024 26.4419 23.0125 26.4514L16.9743 29.9374C15.683 30.6814 14.1485 30.8827 12.7092 30.4969C11.2692 30.1111 10.0415 29.1698 9.2948 27.8805M7.72376 14.8406C8.37988 13.7007 9.41575 12.8283 10.6503 12.3756C10.6503 12.4269 10.6476 12.5182 10.6476 12.5817V19.4821C10.6462 19.6544 10.6915 19.824 10.7773 19.9733C10.8631 20.1226 10.9875 20.2463 11.1375 20.3314L18.4298 24.5418L15.9053 25.9993C15.8931 26.0074 15.8783 26.0128 15.8634 26.0135C15.8486 26.0149 15.8337 26.0128 15.8195 26.0068L9.78063 22.5174C8.49137 21.7707 7.55078 20.5436 7.16494 19.1043C6.77911 17.6651 6.9798 16.1319 7.72308 14.8406M28.4662 19.6672L21.1739 15.4568L23.6983 13.9993C23.7105 13.9912 23.7254 13.9858 23.7402 13.9851C23.7551 13.9838 23.77 13.9865 23.7835 13.9919L29.8223 17.4779C30.7474 18.0124 31.5015 18.7989 31.9954 19.7463C32.4894 20.6936 32.7036 21.7619 32.6124 22.8269C32.5211 23.8911 32.1285 24.9081 31.4805 25.7574C30.8325 26.6068 29.9561 27.2541 28.9534 27.6237V20.5166C28.9547 20.3443 28.9101 20.1753 28.825 20.026C28.7392 19.8767 28.6155 19.753 28.4662 19.6672ZM30.9792 15.8852C30.9352 15.8582 30.8575 15.8116 30.8021 15.7791L24.8288 12.329C24.6801 12.2418 24.5105 12.1965 24.3382 12.1965C24.1659 12.1965 23.9963 12.2425 23.8477 12.329L16.5553 16.54V13.6243C16.5547 13.6094 16.5574 13.5946 16.5635 13.581C16.5695 13.5675 16.579 13.556 16.5912 13.5466L22.6293 10.0633C23.5544 9.53014 24.6119 9.27067 25.6788 9.31662C26.7458 9.36256 27.7776 9.71123 28.6533 10.3221C29.5291 10.9329 30.2129 11.7803 30.6251 12.7655C31.0366 13.7507 31.1596 14.8325 30.9792 15.8852ZM15.1823 21.0822L12.6572 19.6246C12.6436 19.6179 12.6322 19.6084 12.624 19.5963C12.6153 19.5841 12.6099 19.5699 12.6085 19.5557V12.5803C12.6085 11.512 12.9139 10.4667 13.4876 9.56528C14.0613 8.66387 14.8796 7.94491 15.8465 7.49219C16.8141 7.03946 17.8899 6.8712 18.9494 7.0077C20.0089 7.14419 21.0076 7.58003 21.8279 8.26318C21.7827 8.28818 21.7029 8.3321 21.6502 8.36386L15.6769 11.8141C15.5269 11.8992 15.4026 12.0229 15.3161 12.1722C15.2296 12.3215 15.185 12.4911 15.1857 12.6634L15.1816 21.0815L15.1823 21.0822ZM16.5533 18.1252L19.8015 16.2494L23.0496 18.1239V21.8748L19.8015 23.7499L16.5533 21.8748V18.1252Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ChatGPTIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+ChatGPTIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+
+export default ChatGPTIcon

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

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

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

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

package/src/components/icons/CircleCheckMarkFullIcon.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, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
 const CircleCheckMarkFullIcon = ({ color, size }) => {
   const className = styles.noShrinkForFlex
@@ -9,7 +9,7 @@ const CircleCheckMarkFullIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -43,8 +43,8 @@ CircleCheckMarkFullIcon.propTypes = {
 }
 
 CircleCheckMarkFullIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default CircleCheckMarkFullIcon

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

package/src/components/icons/CircleCloseHoverIcon.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, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
 const CircleCloseHoverIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -62,8 +62,8 @@ CircleCloseHoverIcon.propTypes = {
 }
 
 CircleCloseHoverIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default CircleCloseHoverIcon

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