@platformatic/ui-components 0.1.85 → 0.1.86

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,89 @@
+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 }) => {
+  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='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'
+          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'
+          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)
+}
+
+UserRemoveIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default UserRemoveIcon

package/src/components/icons/UserRoleIcon.jsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const UserRoleIcon = ({ 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='M7.5 14H2C2 12.325 3.34521 10.8745 5.30604 10.1695C5.89513 9.95773 6.53978 9.81323 7.22021 9.75015' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11 6.54593C11.272 6.09445 11.4285 5.5655 11.4285 5C11.4285 3.34315 10.0853 2 8.42847 2C6.77161 2 5.42847 3.34315 5.42847 5C5.42847 6.00323 5.92091 6.89144 6.67725 7.4361C6.90253 7.59833 7.15122 7.73008 7.41729 7.82532' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.0004 12.1643C11.6277 12.1643 12.1363 11.6643 12.1363 11.0475C12.1363 10.4306 11.6277 9.93061 11.0004 9.93061C10.3731 9.93061 9.8645 10.4306 9.8645 11.0475C9.8645 11.6643 10.3731 12.1643 11.0004 12.1643Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.6098 8.17401V8.55305C11.6098 8.62518 11.6555 8.69036 11.7243 8.71567L12.216 8.89854C12.283 8.92322 12.3589 8.90614 12.4078 8.85425L12.644 8.60494C12.7135 8.53153 12.8319 8.5309 12.9021 8.6043L13.4723 9.19785C13.536 9.26429 13.5366 9.36743 13.4742 9.43451L13.1704 9.76229C13.1222 9.81417 13.1106 9.88947 13.1408 9.95275L13.3468 10.3894C13.3757 10.4507 13.4388 10.4906 13.5077 10.4906H13.823C13.9208 10.4906 14 10.5684 14 10.6646V11.3974C14 11.4936 13.9208 11.5714 13.823 11.5714H13.4916C13.415 11.5714 13.3468 11.6201 13.323 11.6916L13.1556 12.196C13.1357 12.2554 13.1498 12.3206 13.193 12.3668L13.4652 12.6623C13.5315 12.7344 13.525 12.8464 13.4504 12.9104L12.8229 13.4501C12.7508 13.5121 12.6414 13.5064 12.5764 13.4375L12.3576 13.2059C12.31 13.1552 12.236 13.1369 12.1697 13.1597L11.7128 13.3166C11.6413 13.3413 11.5937 13.4071 11.5937 13.4811V13.826C11.5937 13.9222 11.5145 14 11.4167 14H10.5826C10.4848 14 10.4057 13.9222 10.4057 13.826V13.4811C10.4057 13.4071 10.358 13.3413 10.2866 13.3166L9.82967 13.1597C9.76338 13.1369 9.68937 13.1546 9.64175 13.2059L9.42293 13.4375C9.35793 13.5064 9.24853 13.5121 9.17645 13.4501L8.54896 12.9104C8.47431 12.8464 8.46788 12.7344 8.53416 12.6623L8.80639 12.3668C8.84887 12.3206 8.86303 12.2554 8.84372 12.196L8.67639 11.6916C8.65258 11.6201 8.58436 11.5714 8.50778 11.5714H8.17698C8.07916 11.5714 8 11.4936 8 11.3974V10.6646C8 10.5684 8.07916 10.4906 8.17698 10.4906H8.49233C8.56119 10.4906 8.62426 10.4514 8.65322 10.3894L8.85917 9.95275C8.88941 9.88884 8.87719 9.81417 8.82956 9.76229L8.5258 9.43451C8.46337 9.36743 8.46401 9.26366 8.52773 9.19785L9.09793 8.6043C9.16808 8.53153 9.2865 8.53153 9.356 8.60494L9.59219 8.85425C9.6411 8.90614 9.71704 8.92322 9.78398 8.89854L10.2757 8.71567C10.3445 8.69036 10.3902 8.62518 10.3902 8.55305V8.17401C10.3902 8.07783 10.4694 8 10.5672 8H11.4328C11.5306 8 11.6098 8.07783 11.6098 8.17401Z' 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='M11.25 21H3C3 18.4876 5.01782 16.3117 7.95906 15.2543C8.84269 14.9366 9.80967 14.7198 10.8303 14.6252' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M16.5001 9.8189C16.9081 9.14168 17.1428 8.34825 17.1428 7.5C17.1428 5.01472 15.1281 3 12.6428 3C10.1575 3 8.14282 5.01472 8.14282 7.5C8.14282 9.00484 8.88148 10.3372 10.016 11.1542C10.3539 11.3975 10.727 11.5951 11.1261 11.738' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M16.5007 18.2465C17.4417 18.2465 18.2046 17.4964 18.2046 16.5712C18.2046 15.646 17.4417 14.8959 16.5007 14.8959C15.5597 14.8959 14.7969 15.646 14.7969 16.5712C14.7969 17.4964 15.5597 18.2465 16.5007 18.2465Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M17.4147 12.261V12.8296C17.4147 12.9378 17.4832 13.0355 17.5865 13.0735L18.324 13.3478C18.4244 13.3848 18.5383 13.3592 18.6117 13.2814L18.966 12.9074C19.0703 12.7973 19.2479 12.7964 19.3531 12.9065L20.2084 13.7968C20.304 13.8964 20.3049 14.0511 20.2113 14.1518L19.7557 14.6434C19.6833 14.7213 19.6659 14.8342 19.7113 14.9291L20.0202 15.5841C20.0636 15.6761 20.1582 15.7359 20.2615 15.7359H20.7345C20.8813 15.7359 21 15.8527 21 15.9969V17.0961C21 17.2404 20.8813 17.3571 20.7345 17.3571H20.2374C20.1225 17.3571 20.0202 17.4302 19.9844 17.5374L19.7335 18.2939C19.7035 18.3831 19.7248 18.4809 19.7894 18.5502L20.1978 18.9935C20.2972 19.1017 20.2876 19.2697 20.1756 19.3655L19.2344 20.1752C19.1262 20.2682 18.9621 20.2597 18.8646 20.1562L18.5364 19.8088C18.465 19.7329 18.354 19.7053 18.2545 19.7395L17.5691 19.9749C17.462 20.0119 17.3905 20.1106 17.3905 20.2217V20.739C17.3905 20.8833 17.2718 21 17.1251 21H15.874C15.7272 21 15.6085 20.8833 15.6085 20.739V20.2217C15.6085 20.1106 15.5371 20.0119 15.4299 19.9749L14.7445 19.7395C14.6451 19.7053 14.5341 19.7319 14.4626 19.8088L14.1344 20.1562C14.0369 20.2597 13.8728 20.2682 13.7647 20.1752L12.8234 19.3655C12.7115 19.2697 12.7018 19.1017 12.8012 18.9935L13.2096 18.5502C13.2733 18.4809 13.2945 18.3831 13.2656 18.2939L13.0146 17.5374C12.9789 17.4302 12.8765 17.3571 12.7617 17.3571H12.2655C12.1187 17.3571 12 17.2404 12 17.0961V15.9969C12 15.8527 12.1187 15.7359 12.2655 15.7359H12.7385C12.8418 15.7359 12.9364 15.6771 12.9798 15.5841L13.2887 14.9291C13.3341 14.8333 13.3158 14.7213 13.2443 14.6434L12.7887 14.1518C12.6951 14.0511 12.696 13.8955 12.7916 13.7968L13.6469 12.9065C13.7521 12.7973 13.9297 12.7973 14.034 12.9074L14.3883 13.2814C14.4617 13.3592 14.5756 13.3848 14.676 13.3478L15.4135 13.0735C15.5168 13.0355 15.5853 12.9378 15.5853 12.8296V12.261C15.5853 12.1167 15.7041 12 15.8508 12H17.1492C17.2959 12 17.4147 12.1167 17.4147 12.261Z' 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='M18.75 35H5C5 30.8126 8.36304 27.1862 13.2651 25.4238C14.7378 24.8943 16.3495 24.5331 18.0505 24.3754' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M27.5004 16.3648C28.1804 15.2361 28.5715 13.9137 28.5715 12.5C28.5715 8.35786 25.2137 5 21.0715 5C16.9294 5 13.5715 8.35786 13.5715 12.5C13.5715 15.0081 14.8026 17.2286 16.6935 18.5903C17.2567 18.9958 17.8784 19.3252 18.5436 19.5633' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M27.5011 30.4108C29.0695 30.4108 30.3409 29.1607 30.3409 27.6187C30.3409 26.0766 29.0695 24.8265 27.5011 24.8265C25.9328 24.8265 24.6614 26.0766 24.6614 27.6187C24.6614 29.1607 25.9328 30.4108 27.5011 30.4108Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M29.0245 20.435V21.3826C29.0245 21.563 29.1387 21.7259 29.3108 21.7892L30.5401 22.2464C30.7074 22.3081 30.8972 22.2653 31.0195 22.1356L31.61 21.5123C31.7838 21.3288 32.0798 21.3273 32.2552 21.5108L33.6807 22.9946C33.84 23.1607 33.8416 23.4186 33.6855 23.5863L32.9261 24.4057C32.8054 24.5354 32.7765 24.7237 32.8521 24.8819L33.3669 25.9734C33.4393 26.1269 33.597 26.2265 33.7692 26.2265H34.5575C34.8021 26.2265 35 26.4211 35 26.6616V28.4935C35 28.7339 34.8021 28.9285 34.5575 28.9285H33.7289C33.5375 28.9285 33.3669 29.0503 33.3074 29.2291L32.8891 30.4899C32.8392 30.6386 32.8746 30.8015 32.9824 30.917L33.663 31.6558C33.8287 31.8361 33.8126 32.1161 33.626 32.2759L32.0573 33.6253C31.8771 33.7803 31.6036 33.7661 31.4411 33.5937L30.894 33.0147C30.775 32.8881 30.5899 32.8422 30.4242 32.8992L29.2819 33.2915C29.1033 33.3532 28.9842 33.5177 28.9842 33.7028V34.565C28.9842 34.8054 28.7863 35 28.5418 35H26.4566C26.2121 35 26.0142 34.8054 26.0142 34.565V33.7028C26.0142 33.5177 25.8951 33.3532 25.7165 33.2915L24.5742 32.8992C24.4085 32.8422 24.2234 32.8865 24.1044 33.0147L23.5573 33.5937C23.3948 33.7661 23.1213 33.7803 22.9411 33.6253L21.3724 32.2759C21.1858 32.1161 21.1697 31.8361 21.3354 31.6558L22.016 30.917C22.1222 30.8015 22.1576 30.6386 22.1093 30.4899L21.691 29.2291C21.6314 29.0503 21.4609 28.9285 21.2694 28.9285H20.4425C20.1979 28.9285 20 28.7339 20 28.4935V26.6616C20 26.4211 20.1979 26.2265 20.4425 26.2265H21.2308C21.403 26.2265 21.5607 26.1285 21.6331 25.9734L22.1479 24.8819C22.2235 24.7221 22.193 24.5354 22.0739 24.4057L21.3145 23.5863C21.1584 23.4186 21.16 23.1591 21.3193 22.9946L22.7448 21.5108C22.9202 21.3288 23.2162 21.3288 23.39 21.5123L23.9805 22.1356C24.1028 22.2653 24.2926 22.3081 24.4599 22.2464L25.6892 21.7892C25.8613 21.7259 25.9755 21.563 25.9755 21.3826V20.435C25.9755 20.1946 26.1734 20 26.418 20H28.582C28.8266 20 29.0245 20.1946 29.0245 20.435Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+UserRoleIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+UserRoleIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default UserRoleIcon

package/src/components/icons/index.js

@@ -39,6 +39,7 @@ import EnlargeIcon from './EnlargeIcon'
 import EntryIcon from './EntryIcon'
 import GearIcon from './GearIcon'
 import GenerationLoadingIcon from './GenerationLoadingIcon'
+import GiveOwnershipIcon from './GiveOwnershipIcon'
 import GraphQLIcon from './GraphQLIcon'
 import KeyIcon from './KeyIcon'
 import LabelIcon from './LabelIcon'
@@ -48,9 +49,11 @@ import LiveIcon from './LiveIcon'
 import LoadingAppIcon from './LoadingAppIcon'
 import LogOutIcon from './LogOutIcon'
 import MetricsIcon from './MetricsIcon'
+import OrganizationIcon from './OrganizationIcon'
 import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
 import PullRequestLoadingIcon from './PullRequestLoadingIcon'
+import RequestOwnershipIcon from './RequestOwnershipIcon'
 import RestartIcon from './RestartIcon'
 import RocketIcon from './RocketIcon'
 import SendIcon from './SendIcon'
@@ -64,6 +67,9 @@ import StopIcon from './StopIcon'
 import TerminalIcon from './TerminalIcon'
 import TwoUsersIcon from './TwoUsersIcon'
 import UpgradeIcon from './UpgradeIcon'
+import UserIcon from './UserIcon'
+import UserRemoveIcon from './UserRemoveIcon'
+import UserRoleIcon from './UserRoleIcon'
 import WorkspaceDynamicIcon from './WorkspaceDynamicIcon'
 import WorkspaceEmptyIcon from './WorkspaceEmptyIcon'
 import WorkspaceGitHubIcon from './WorkspaceGitHubIcon'
@@ -114,6 +120,7 @@ export default {
   EntryIcon,
   GearIcon,
   GenerationLoadingIcon,
+  GiveOwnershipIcon,
   GraphQLIcon,
   KeyIcon,
   LabelIcon,
@@ -123,9 +130,11 @@ export default {
   LoadingAppIcon,
   LogOutIcon,
   MetricsIcon,
+  OrganizationIcon,
   PlayIcon,
   PullRequestIcon,
   PullRequestLoadingIcon,
+  RequestOwnershipIcon,
   RestartIcon,
   RocketIcon,
   SendIcon,
@@ -138,6 +147,9 @@ export default {
   SocialTwitterIcon,
   TerminalIcon,
   UpgradeIcon,
+  UserIcon,
+  UserRemoveIcon,
+  UserRoleIcon,
   TwoUsersIcon,
   WorkspaceDynamicIcon,
   WorkspaceEmptyIcon,

package/src/stories/Checkbox.stories.jsx

@@ -1,9 +1,23 @@
 'use strict'
 import Checkbox from '../components/Checkbox'
+import { WHITE } from '../components/constants'
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '50px',
+  backgroundColor: 'white'
+}
 
 export default {
   title: 'Platformatic/Checkbox',
   component: Checkbox,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ],
   argTypes: {
     id: {
       type: 'string',
@@ -25,3 +39,8 @@ export const CheckboxDisabled = Template.bind({})
 CheckboxDisabled.args = {
   disabled: true
 }
+
+export const CheckboxWhite = Template.bind({})
+CheckboxWhite.args = {
+  color: WHITE
+}

package/src/stories/forms/Input.stories.jsx

@@ -87,3 +87,12 @@ IconBeforeAndAfter.args = {
     color: 'error-red'
   }
 }
+
+export const Focused = TemplateBorderMainDarkBlue.bind({})
+
+Focused.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  borderColor: 'main-dark-blue',
+  focused: true
+}

package/tailwind.config.cjs

@@ -54,6 +54,7 @@ module.exports = {
   },
   safelist: [
     'text-error-red',
+    'text-dark-green',
     'text-3xl',
     'text-4xl',
     'text-5xl',

package/dist/assets/index.a6b7ebf4.css

@@ -1 +0,0 @@
-._input_1k1s3_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_1k1s3_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_1k1s3_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_1k1s3_10{fill:#21fa90}._fillWhite_1k1s3_13{fill:#fff}._input_1k1s3_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_1k1s3_19{padding-bottom:1rem;font-size:1.875rem;line-height:2.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._bordered_gvhmf_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_gvhmf_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_gvhmf_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_gvhmf_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_gvhmf_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_gvhmf_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_gvhmf_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._error-message_gvhmf_23{position:absolute;bottom:-1.25rem;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._padded_gvhmf_27{padding:.625rem .5rem}._text--error-red_gvhmf_31{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_gvhmf_34{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--main-green_gvhmf_37{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-dark-blue_gvhmf_40{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._background-color-main-green_gvhmf_44{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_gvhmf_47{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_gvhmf_50{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_gvhmf_53{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_gvhmf_56{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_gvhmf_59{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_gvhmf_62{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_gvhmf_65{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_gvhmf_68{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_gvhmf_71{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-transparent_gvhmf_74{background-color:transparent}._background-color-opaque-100_gvhmf_77{--tw-bg-opacity: 1 !important}._background-color-opaque-60_gvhmf_80{--tw-bg-opacity: .6 !important}._background-color-opaque-30_gvhmf_83{--tw-bg-opacity: .3 !important}._background-color-opaque-20_gvhmf_86{--tw-bg-opacity: .2 !important}._apply-opacity-30_gvhmf_89{opacity:.3}._padding--none_gvhmf_92{padding:0}._padding--small_gvhmf_95{padding:.25rem}._padding--medium_gvhmf_98{padding:.5rem}._padding--large_gvhmf_101{padding:1rem}._padding--extra-large_gvhmf_104{padding:1.5rem}._hover-background-color-opaque-main-green_gvhmf_107:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_gvhmf_110:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_gvhmf_113:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_gvhmf_116:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_gvhmf_119:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_gvhmf_122:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_gvhmf_125:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_gvhmf_128:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_gvhmf_131:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_gvhmf_134{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_gvhmf_137{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_gvhmf_140{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_gvhmf_143{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_gvhmf_146{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_gvhmf_149{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_gvhmf_152{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_gvhmf_155{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_gvhmf_158{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._main-green_s6yir_1>circle,._main-green_s6yir_1>ellipse,._main-green_s6yir_1>rect,._main-green_s6yir_1>line,._main-green_s6yir_1>path{stroke:#21fa90}._error-red_s6yir_10>circle,._error-red_s6yir_10>ellipse,._error-red_s6yir_10>rect,._error-red_s6yir_10>line,._error-red_s6yir_10>path{stroke:#fa2121}._white_s6yir_18>circle,._white_s6yir_18>ellipse,._white_s6yir_18>rect,._white_s6yir_18>line,._white_s6yir_18>path{stroke:#fff}._main-dark-blue_s6yir_25>circle,._main-dark-blue_s6yir_25>ellipse,._main-dark-blue_s6yir_25>rect,._main-dark-blue_s6yir_25>line,._main-dark-blue_s6yir_25>path{stroke:#00283d}._warning-yellow_s6yir_32>circle,._warning-yellow_s6yir_32>ellipse,._warning-yellow_s6yir_32>rect,._warning-yellow_s6yir_32>line,._warning-yellow_s6yir_32>path{stroke:#feb928}._filled-white_s6yir_40{fill:#fff}._filled-error-red_s6yir_43{fill:#fa2121}._filled-main-dark-blue_s6yir_46{fill:#00283d}._filled-main-green_s6yir_49{fill:#21fa90}._filled-warning-yellow_s6yir_52{fill:#feb928}._fill-circle-green_s6yir_56>circle{fill:#fff}._fill-circle-main-dark-blue_s6yir_59>circle{fill:#00283d}._noShrinkForFlex_s6yir_63{flex-shrink:0}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_b09u0_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_b09u0_4{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25em;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_b09u0_4:hover{cursor:pointer}._tab_b09u0_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_b09u0_1:first-child{margin-left:0}._tab_b09u0_1:last-child{margin-right:0}._tab_b09u0_1:hover{font-weight:600}._selected-tab_b09u0_10{font-weight:600;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_b09u0_14{min-height:100vh}._borderedBox_170cy_1{flex:1 1 0%;row-gap:1rem;border-radius:.375rem;padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.my-auto{margin-top:auto;margin-bottom:auto}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-screen{height:100vh}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-10{gap:2.5rem}.border{border-width:1px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Regular.dcfe8df2.ttf) format("truetype");font-weight:400;font-style:normal}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}