@platformatic/ui-components 0.1.58 → 0.1.59

package/src/components/icons/SocialGitLabIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialGitLabIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -107,11 +108,11 @@ SocialGitLabIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialGitLabIcon.defaultProps = {

package/src/components/icons/SocialLinkedInIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialLinkedInIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -70,11 +71,11 @@ SocialLinkedInIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialLinkedInIcon.defaultProps = {

package/src/components/icons/SocialNPMIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialNPMIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -62,11 +63,11 @@ SocialNPMIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialNPMIcon.defaultProps = {

package/src/components/icons/SocialTwitterIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialTwitterIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -62,11 +63,11 @@ SocialTwitterIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialTwitterIcon.defaultProps = {

package/src/components/icons/StopIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const StopIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -63,11 +64,11 @@ StopIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 StopIcon.defaultProps = {

package/src/components/icons/TerminalIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const TerminalIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -67,11 +68,11 @@ TerminalIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 TerminalIcon.defaultProps = {

package/src/components/icons/TwoUsersIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const TwoUsersIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -69,11 +70,11 @@ TwoUsersIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 TwoUsersIcon.defaultProps = {

package/src/components/icons/UpgradeIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const UpgradeIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -102,11 +103,11 @@ UpgradeIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 UpgradeIcon.defaultProps = {

package/src/components/icons/WorkspaceDynamicIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const WorkspaceDynamicIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -72,11 +73,11 @@ WorkspaceDynamicIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 WorkspaceDynamicIcon.defaultProps = {

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const WorkspaceFailIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -97,11 +98,11 @@ WorkspaceFailIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 WorkspaceFailIcon.defaultProps = {

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const WorkspaceReadyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -129,11 +130,11 @@ WorkspaceReadyIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 WorkspaceReadyIcon.defaultProps = {

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const WorkspaceStaticIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -69,11 +70,11 @@ WorkspaceStaticIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 WorkspaceStaticIcon.defaultProps = {

package/src/components/icons/index.js

@@ -25,6 +25,7 @@ import CircleExclamationIcon from './CircleExclamationIcon'
 import CircleCheckMarkIcon from './CircleCheckMarkIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
+import CircleFullIcon from './CircleFullIcon'
 import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
 import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
 import CloseIcon from './CloseIcon'
@@ -88,6 +89,7 @@ export default {
   CircleExclamationIcon,
   CircleCloseIcon,
   CircleCloseHoverIcon,
+  CircleFullIcon,
   CircleTwoArrowsDownIcon,
   CircleTwoArrowsUpIcon,
   CloseIcon,

package/src/stories/BorderedBox.stories.jsx

@@ -1,13 +1,14 @@
 'use strict'
 import BorderedBox from '../components/BorderedBox'
+import { COLORS_BORDERED_BOX } from '../components/constants'
 export default {
   title: 'Platformatic/BorderedBox',
   component: BorderedBox,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     color: {
-      options: ['green', 'red', 'white'],
-      control: { type: ' radio' }
+      options: COLORS_BORDERED_BOX,
+      type: 'radio'
     }
   }
 }
@@ -18,16 +19,15 @@ const Template = (args) => <BorderedBox {...args}>Hello Platformatic</BorderedBo
 export const Green = Template.bind({})
 
 Green.args = {
-  color: 'green'
+  color: 'main-green'
 }
 export const Red = Template.bind({})
 
 Red.args = {
-  color: 'red'
+  color: 'error-red'
 }
 
 export const White = Template.bind({})
-
 White.args = {
   color: 'white'
 }

package/src/stories/Button.stories.jsx

@@ -2,8 +2,7 @@
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import { useState } from 'react'
 import Button from '../components/Button'
-
-const colors = ['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']
+import { COLORS_BUTTON, SIZES } from '../components/constants'
 
 export default {
   title: 'Platformatic/Button',
@@ -20,14 +19,14 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: colors
+        options: COLORS_BUTTON
       }
     },
     color: {
       type: 'string',
       control: {
         type: 'radio',
-        options: colors
+        options: COLORS_BUTTON
       }
     },
     disabled: {
@@ -37,7 +36,7 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['small', 'medium', 'large', 'extra-large']
+        options: SIZES
       }
     },
     hoverEffect: {

package/src/stories/ButtonFullRounded.stories.jsx

@@ -1,6 +1,6 @@
 'use strict'
-import { faStop, faRefresh } from '@fortawesome/free-solid-svg-icons'
 import ButtonFullRounded from '../components/ButtonFullRounded'
+import { COLORS_ICON, SIZES } from '../components/constants'
 
 export default {
   title: 'Platformatic/ButtonFullRounded',
@@ -17,14 +17,14 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['green', 'red', 'white']
+        options: [COLORS_ICON]
       }
     },
     size: {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['small', 'medium', 'large']
+        options: [SIZES]
       }
     }
   }
@@ -34,28 +34,28 @@ const Template = (args) => <ButtonFullRounded {...args} />
 
 export const WhiteLarge = Template.bind({})
 WhiteLarge.args = {
-  icon: faStop,
-  size: 'large'
+  iconName: 'PlayIcon',
+  iconSize: 'large'
 }
 
 export const GreenSmall = Template.bind({})
 GreenSmall.args = {
-  icon: faStop,
-  color: 'green',
-  size: 'small'
+  iconName: 'StopIcon',
+  iconColor: 'main-green',
+  iconSize: 'small'
 }
 
 export const Disabled = Template.bind({})
 
 Disabled.args = {
-  icon: faRefresh,
+  iconName: 'BellIcon',
   disabled: true
 }
 
 export const DisabledRed = Template.bind({})
 
 DisabledRed.args = {
-  icon: faRefresh,
-  color: 'red',
+  iconName: 'StopIcon',
+  iconColor: 'error-red',
   disabled: true
 }

package/src/stories/InfoBox.stories.jsx

@@ -28,7 +28,6 @@ InfoBoxSample.args = {
   buttonProps: {
     label: 'Sample button',
     backgroundColor: 'main-green',
-    color: 'red',
     onClick: () => alert('Clicked InfoBoxSample')
   }
 }
@@ -48,7 +47,7 @@ InfoBoxContained.args = {
 export const InfoBoxErrorContained = ContainedTemplate.bind({})
 InfoBoxErrorContained.args = {
   iconName: 'WorkspaceFailIcon',
-  iconColor: 'red',
+  iconColor: 'error-red',
   helpText: 'Write your own content',
   buttonProps: {
     label: 'Sample button',

package/src/stories/Modal.stories.jsx

@@ -25,7 +25,7 @@ const Template = (args) => {
     <main>
       <BorderedBox>This Is another Content</BorderedBox>
       <ContentThatLoads />
-      <Button color='green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
+      <Button color='main-green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
       {isOpen && <Modal setIsOpen={setIsOpen} {...rest}>{text}</Modal>}
     </main>
   )
@@ -37,7 +37,7 @@ const TemplateInvite = (args) => {
     <main>
       <BorderedBox>This Is another Content</BorderedBox>
       <ContentThatLoads />
-      <Button color='green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
+      <Button color='main-green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
       {isOpen && <Modal setIsOpen={setIsOpen} {...args}><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p><Button buttonClass='primary' onClick={() => setIsOpen(false)} label='Discard invite' /></Modal>}
     </main>
   )

package/src/stories/PlatformaticIcon.stories.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import PlatformaticIcon from '../components/PlatformaticIcon'
 import Icons from '../components/icons'
-
-const colors = ['green', 'white', 'red', 'main-dark-blue']
+import { COLORS_ICON } from '../components/constants'
 
 const divStyle = {
   width: '100%'
@@ -32,7 +31,7 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: colors
+        options: COLORS_ICON
       }
     },
     size: {

package/src/stories/Status.stories.jsx

@@ -19,13 +19,13 @@ White.args = {
 export const Green = Template.bind({})
 
 Green.args = {
-  color: 'green',
+  color: 'main-green',
   status: 'online'
 }
 
 export const Red = Template.bind({})
 
 Red.args = {
-  color: 'red',
+  color: 'error-red',
   status: 'offline'
 }

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

@@ -84,6 +84,6 @@ IconBeforeAndAfter.args = {
   },
   afterIcon: {
     iconName: 'CircleAddIcon',
-    color: 'red'
+    color: 'error-red'
   }
 }

package/src/stories/forms/Preview.stories.jsx

@@ -52,6 +52,6 @@ WithIcon.args = {
   title: 'My title',
   value: 'My value',
   afterValueIcon: 'WorkspaceStaticIcon',
-  afterValueIconColor: 'green',
+  afterValueIconColor: 'main-green',
   onClickAfterValueIcon: () => alert('icon clicked')
 }

package/src/stories/icons/Icons.stories.jsx

@@ -5,6 +5,7 @@ import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
 import WorkspaceStaticIcon from '../../components/icons/WorkspaceStaticIcon'
 import UpgradeIcon from '../../components/icons/UpgradeIcon'
 import WorkspaceDynamicIcon from '../../components/icons/WorkspaceDynamicIcon'
+import { COLORS_ICON } from '../../components/constants'
 
 const divStyle = {
   display: 'flex',
@@ -29,7 +30,7 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['green', 'white', 'red']
+        options: [COLORS_ICON]
       }
     }
   }
@@ -51,9 +52,9 @@ const WorkspaceIconsTemplate = () => (
   [<WorkspaceStaticIcon key='a' />, <WorkspaceDynamicIcon key='b' />].map((component, index) => {
     const listElement = []
     listElement.push(React.cloneElement(component, { key: `0${index}` }))
-    listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'green' }))
-    listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'red' }))
-    listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'red' }))
+    listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'main-green' }))
+    listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'error-red' }))
+    listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'error-red' }))
     listElement.push(React.cloneElement(component, { key: `4${index}`, color: 'main-dark-blue' }))
     listElement.push(React.cloneElement(component, { key: `5${index}`, size: 'small', color: 'main-dark-blue' }))
     return listElement

package/tailwind.config.cjs

@@ -12,14 +12,14 @@ module.exports = {
       },
       boxShadow: {
         wrap: '0px 0px 20px rgba(0, 0, 0, 0.6)',
-        'main-green': '0px 0px 10px rgba(33, 250, 144, 0.5)',
-        'dark-green': '0px 0px 10px rgba(2, 120, 63, 1)',
-        'light-green': '0px 0px 10px rgba(33, 241, 144, 0.5)',
-        'main-dark-blue': '0px 0px 10px rgba(33, 250, 144, 0.5)',
-        'dark-blue': '0px 0px 10px rgba(0, 52, 79, 0.5)',
-        'light-blue': '0px 0px 10px rgba(233, 247, 255, 0.5)',
-        'error-red': '0px 0px 10px rgba(250, 33, 33, 0.5)',
-        'tertiary-blue': '0px 0px 10px rgba(37, 136, 228, 0.5)'
+        'main-green': '0px 0px 6px rgba(33, 250, 144, 0.5)',
+        'dark-green': '0px 0px 6px rgba(2, 120, 63, 1)',
+        'light-green': '0px 0px 6px rgba(33, 241, 144, 0.5)',
+        'main-dark-blue': '0px 0px 6px rgba(33, 250, 144, 0.5)',
+        'dark-blue': '0px 0px 6px rgba(0, 52, 79, 0.5)',
+        'light-blue': '0px 0px 6px rgba(233, 247, 255, 0.5)',
+        'error-red': '0px 0px 6px rgba(250, 33, 33, 0.5)',
+        'tertiary-blue': '0px 0px 6px rgba(37, 136, 228, 0.5)'
       }
     },
     colors: {
@@ -32,7 +32,8 @@ module.exports = {
       white: '#FFFFFF',
       'error-red': '#FA2121',
       'tertiary-blue': '#2588E4',
-      transparent: 'transparent'
+      transparent: 'transparent',
+      'warning-yellow': '#FEB928'
     },
     fontFamily: {
       sans: ['Montserrat']
@@ -49,8 +50,7 @@ module.exports = {
     }
   },
   safelist: [
-    'border-error-red',
-    'border-main-green',
+    'text-error-red',
     'text-3xl',
     'text-4xl',
     'text-5xl',

package/dist/assets/index.691ca940.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_x0n9t_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_x0n9t_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_x0n9t_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_x0n9t_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._error-message_x0n9t_14{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_x0n9t_18{padding:.625rem .5rem}._text--green_x0n9t_22{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-dark-blue_x0n9t_25{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._tabbed-container_16gar_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_16gar_5{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_16gar_5:hover{cursor:pointer}._tab_16gar_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_16gar_1:first-child{margin-left:0}._tab_16gar_1:last-child{margin-right:0}._selected-tab_16gar_11{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_16gar_15{height:100vh}._borderedBox_zj4p6_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))}._background-color-dark-blue_zj4p6_4{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-transparent_zj4p6_7{background-color:transparent}*,: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}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mr-3{margin-right:.75rem}.mr-2{margin-right:.5rem}.ml-4{margin-left:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.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))}.flex-col{flex-direction:column}.gap-10{gap:2.5rem}.gap-y-6{row-gap:1.5rem}.border{border-width:1px}.border-error-red{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}.border-main-green{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}.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-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.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-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.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)}@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}