@platformatic/ui-components 0.1.48 → 0.1.50

package/src/components/icons/CircleBackIcon.jsx

@@ -1,51 +1,51 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CircleBackIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = (
-    <svg
-      width={26}
-      height={26}
-      viewBox='0 0 26 26'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <circle cx={13} cy={13} r={12} fill='none' stroke='none' />
-      <path
-        d='M14.5 7L8.5 13L14.5 19'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg
-          width={18}
-          height={18}
-          viewBox='0 0 18 18'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <circle cx={9} cy={9} r={8} stroke='none' />
-          <path
-            d='M10 5L6 9L10 13'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default CircleBackIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleBackIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = (
+    <svg
+      width={26}
+      height={26}
+      viewBox='0 0 26 26'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx={13} cy={13} r={12} fill='none' stroke='none' />
+      <path
+        d='M14.5 7L8.5 13L14.5 19'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={9} cy={9} r={8} stroke='none' />
+          <path
+            d='M10 5L6 9L10 13'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CircleBackIcon

package/src/components/icons/CircleCheckMarkIcon.jsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleCheckMarkIcon = ({ color = 'green', size = 'small' }) => {
+  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}
+        >
+          <circle
+            cx={8}
+            cy={8}
+            r={6}
+            stroke='none'
+          />
+          <path
+            d='M5 8L7.5 10L11 6'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={41}
+          viewBox='0 0 40 41'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle
+            cx={20}
+            cy={20.3334}
+            r={15}
+            stroke='none'
+            strokeWidth={2.5}
+          />
+          <path
+            d='M12.5 20.3334L18.75 25.3334L27.5 15.3334'
+            stroke='none'
+            strokeWidth={2.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CircleCheckMarkIcon

package/src/components/icons/CircleCloseHoverIcon.jsx

@@ -1,42 +1,42 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CircleCloseHoverIcon = ({ color = 'green' }) => {
-  const className = styles[`${color}`] + ' ' + styles[`fill-circle-${color}`]
-  return (
-    <svg
-      width={24}
-      height={24}
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <circle
-        cx={12}
-        cy={12}
-        r={11.25}
-        fill='none'
-        fillOpacity={0.2}
-        stroke='none'
-        strokeWidth={1.5}
-      />
-      <path
-        d='M6 6L18 18'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M6 18L18 6'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export default CircleCloseHoverIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleCloseHoverIcon = ({ color = 'green' }) => {
+  const className = styles[`${color}`] + ' ' + styles[`fill-circle-${color}`]
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle
+        cx={12}
+        cy={12}
+        r={11.25}
+        fill='none'
+        fillOpacity={0.2}
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <path
+        d='M6 6L18 18'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6 18L18 6'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default CircleCloseHoverIcon

package/src/components/icons/CircleCloseIcon.jsx

@@ -1,32 +1,32 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CircleCloseIcon = ({ color = 'green' }) => {
-  const className = styles[`${color}`]
-  return (
-    <svg
-      width={24}
-      height={24}
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <circle cx={12} cy={12} r={11.5} stroke='none' />
-      <path
-        d='M6 6L18 18'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M6 18L18 6'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export default CircleCloseIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleCloseIcon = ({ color = 'green' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx={12} cy={12} r={11.5} stroke='none' />
+      <path
+        d='M6 6L18 18'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6 18L18 6'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default CircleCloseIcon

package/src/components/icons/CircleExclamationIcon.jsx

@@ -1,29 +1,29 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const CircleExclamationIcon = ({ color = 'white', tip = '' }) => {
-  const className = styles[`${color}`]
-
-  return (
-    <svg
-      width={24}
-      height={24}
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-      data-tip={tip}
-    >
-      <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
-      <path
-        d='M12 8.25V13.5'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <circle cx={12} cy={15.75} r={0.75} fill='none' />
-    </svg>
-  )
-}
-
-export default CircleExclamationIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+const CircleExclamationIcon = ({ color = 'white', tip = '' }) => {
+  const className = styles[`${color}`]
+
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      data-tip={tip}
+    >
+      <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
+      <path
+        d='M12 8.25V13.5'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <circle cx={12} cy={15.75} r={0.75} fill='none' />
+    </svg>
+  )
+}
+
+export default CircleExclamationIcon

package/src/components/icons/CloseIcon.jsx

@@ -1,31 +1,31 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CloseIcon = ({ color = 'main-dark-blue' }) => {
-  const className = styles[`${color}`]
-  return (
-    <svg
-      width={16}
-      height={16}
-      viewBox='0 0 16 16'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <path
-        d='M2 2L14 14'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M2 14L14 2'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export default CloseIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CloseIcon = ({ color = 'main-dark-blue' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <path
+        d='M2 2L14 14'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M2 14L14 2'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default CloseIcon

package/src/components/icons/CopyIcon.jsx

@@ -1,46 +1,75 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CopyIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = <></>
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg
-          width={24}
-          height={25}
-          viewBox='0 0 24 25'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <path
-            d='M9 21.3333V8.00073C9 7.72459 9.22386 7.50073 9.5 7.50073H15.9001C16.023 7.50073 16.1416 7.54597 16.2332 7.6278L20.833 11.7357C20.9393 11.8306 21 11.9662 21 12.1086V21.3333C21 21.6094 20.7761 21.8333 20.5 21.8333H9.5C9.22386 21.8333 9 21.6094 9 21.3333Z'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-          />
-          <path
-            d='M15.75 12.5171V7.50073L21 12.5171H15.75Z'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M14.25 6.78409L10.9818 3.95521C10.8909 3.87655 10.7748 3.83326 10.6546 3.83326H6.92045H3.5C3.22386 3.83326 3 4.05712 3 4.33326L3.00001 17.0335C3.00001 17.3096 3.22387 17.5335 3.50001 17.5335H8.25001'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default CopyIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CopyIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M6 13.5V4.94496C6 4.66882 6.22386 4.44496 6.5 4.44496H10.5365C10.6594 4.44496 10.7779 4.49019 10.8696 4.57203L13.833 7.21858C13.9393 7.31345 14 7.4491 14 7.59152V13.5C14 13.7761 13.7761 14 13.5 14H6.5C6.22386 14 6 13.7761 6 13.5Z'
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <path
+            d='M10.5 7.78923V4.44496L14 7.78923H10.5Z'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M9.5 3.96723L7.36816 2.12196C7.27729 2.0433 7.16112 2.00001 7.04093 2.00001H4.61364H2.5C2.22386 2.00001 2 2.22386 2 2.50001L2.00001 10.6335C2.00001 10.9096 2.22386 11.1335 2.50001 11.1335H5.50001'
+            stroke='none'
+            strokeLinecap='round'
+          />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={25}
+          viewBox='0 0 24 25'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M9 21.3333V8.00073C9 7.72459 9.22386 7.50073 9.5 7.50073H15.9001C16.023 7.50073 16.1416 7.54597 16.2332 7.6278L20.833 11.7357C20.9393 11.8306 21 11.9662 21 12.1086V21.3333C21 21.6094 20.7761 21.8333 20.5 21.8333H9.5C9.22386 21.8333 9 21.6094 9 21.3333Z'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+          />
+          <path
+            d='M15.75 12.5171V7.50073L21 12.5171H15.75Z'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M14.25 6.78409L10.9818 3.95521C10.8909 3.87655 10.7748 3.83326 10.6546 3.83326H6.92045H3.5C3.22386 3.83326 3 4.05712 3 4.33326L3.00001 17.0335C3.00001 17.3096 3.22387 17.5335 3.50001 17.5335H8.25001'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CopyIcon