@platformatic/ui-components 0.1.60 → 0.1.62

package/src/components/logos/FreeLogo.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { MAIN_DARK_BLUE, WHITE } from '../constants'
+
+function FreeLogo ({ backgroundColor, width, height }) {
+  let icon = (
+    <svg width={width} height={height} viewBox='0 0 379 173' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M178 61.2H336.8C355.964 61.2 371.5 76.7357 371.5 95.9C371.5 115.064 355.964 130.6 336.8 130.6H178L204 116.72L212.5 91.9342L198 71.1142L178 61.2Z' fill='#00283D' />
+      <path d='M61.2622 126.636H182.647V126.597C187.247 126.383 191.74 125.141 195.795 122.962C199.851 120.783 203.365 117.724 206.08 114.008C208.795 110.293 210.641 106.016 211.482 101.493C212.323 96.9709 212.138 92.3174 210.94 87.8758C209.742 83.4342 207.562 79.3176 204.56 75.8292C201.559 72.3408 197.812 69.5694 193.596 67.7193C189.38 65.8691 184.802 64.9873 180.2 65.1387C175.598 65.2901 171.088 66.4709 167.003 68.5942C164.482 62.7803 160.666 57.6177 155.846 53.4992C151.027 49.3807 145.33 46.4149 139.19 44.8275M35.223 44.8275C26.2848 47.1298 18.3666 52.3354 12.7143 59.6253C7.062 66.9151 3.99645 75.8754 4 85.0962C4.00356 94.317 7.07603 103.275 12.734 110.56C18.3919 117.846 26.3141 123.046 35.254 125.341' stroke='#00283D' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M83.2411 70.3236L67.0461 76.0084L74.1731 91.1083' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M67.411 76.276C74.7957 80.6139 83.4084 82.3923 91.9095 81.3347C100.411 80.2771 108.324 76.4427 114.418 70.4279C120.512 64.4131 124.445 56.5552 125.606 48.0763C126.767 39.5975 125.09 30.973 120.837 23.5445C116.584 16.1159 109.992 10.2997 102.087 7.00052C94.1829 3.70132 85.4084 3.10409 77.1289 5.30172C68.8494 7.49935 61.529 12.3686 56.3063 19.1522C51.0836 25.9358 48.2515 34.2533 48.2504 42.8111V100.702' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+      <path opacity={0.2} d='M48.2504 161.904V168.667' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+      <path opacity={0.4} d='M48.3125 140.623V151.306' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+      <path opacity={0.7} d='M48.2504 111.703V129.564' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M235.65 93.75H252.45V100.25H235.65V93.75ZM236.25 113H228.15V78H254.6V84.5H236.25V113ZM259.045 113V86.1H266.495V93.7L265.445 91.5C266.245 89.6 267.529 88.1667 269.295 87.2C271.062 86.2 273.212 85.7 275.745 85.7V92.9C275.412 92.8667 275.112 92.85 274.845 92.85C274.579 92.8167 274.295 92.8 273.995 92.8C271.862 92.8 270.129 93.4167 268.795 94.65C267.495 95.85 266.845 97.7333 266.845 100.3V113H259.045ZM293.489 113.4C290.422 113.4 287.722 112.8 285.389 111.6C283.089 110.4 281.306 108.767 280.039 106.7C278.772 104.6 278.139 102.217 278.139 99.55C278.139 96.85 278.756 94.4667 279.989 92.4C281.256 90.3 282.972 88.6667 285.139 87.5C287.306 86.3 289.756 85.7 292.489 85.7C295.122 85.7 297.489 86.2667 299.589 87.4C301.722 88.5 303.406 90.1 304.639 92.2C305.872 94.2667 306.489 96.75 306.489 99.65C306.489 99.95 306.472 100.3 306.439 100.7C306.406 101.067 306.372 101.417 306.339 101.75H284.489V97.2H302.239L299.239 98.55C299.239 97.15 298.956 95.9333 298.389 94.9C297.822 93.8667 297.039 93.0667 296.039 92.5C295.039 91.9 293.872 91.6 292.539 91.6C291.206 91.6 290.022 91.9 288.989 92.5C287.989 93.0667 287.206 93.8833 286.639 94.95C286.072 95.9833 285.789 97.2167 285.789 98.65V99.85C285.789 101.317 286.106 102.617 286.739 103.75C287.406 104.85 288.322 105.7 289.489 106.3C290.689 106.867 292.089 107.15 293.689 107.15C295.122 107.15 296.372 106.933 297.439 106.5C298.539 106.067 299.539 105.417 300.439 104.55L304.589 109.05C303.356 110.45 301.806 111.533 299.939 112.3C298.072 113.033 295.922 113.4 293.489 113.4ZM325.032 113.4C321.965 113.4 319.265 112.8 316.932 111.6C314.632 110.4 312.849 108.767 311.582 106.7C310.315 104.6 309.682 102.217 309.682 99.55C309.682 96.85 310.299 94.4667 311.532 92.4C312.799 90.3 314.515 88.6667 316.682 87.5C318.849 86.3 321.299 85.7 324.032 85.7C326.665 85.7 329.032 86.2667 331.132 87.4C333.265 88.5 334.949 90.1 336.182 92.2C337.415 94.2667 338.032 96.75 338.032 99.65C338.032 99.95 338.015 100.3 337.982 100.7C337.949 101.067 337.915 101.417 337.882 101.75H316.032V97.2H333.782L330.782 98.55C330.782 97.15 330.499 95.9333 329.932 94.9C329.365 93.8667 328.582 93.0667 327.582 92.5C326.582 91.9 325.415 91.6 324.082 91.6C322.749 91.6 321.565 91.9 320.532 92.5C319.532 93.0667 318.749 93.8833 318.182 94.95C317.615 95.9833 317.332 97.2167 317.332 98.65V99.85C317.332 101.317 317.649 102.617 318.282 103.75C318.949 104.85 319.865 105.7 321.032 106.3C322.232 106.867 323.632 107.15 325.232 107.15C326.665 107.15 327.915 106.933 328.982 106.5C330.082 106.067 331.082 105.417 331.982 104.55L336.132 109.05C334.899 110.45 333.349 111.533 331.482 112.3C329.615 113.033 327.465 113.4 325.032 113.4Z' fill='white' />
+    </svg>
+  )
+
+  if (backgroundColor === MAIN_DARK_BLUE) {
+    icon = (
+      <svg width={width} height={height} viewBox='0 0 379 173' fill='none' xmlns='http://www.w3.org/2000/svg'>
+        <path d='M178 61.2H336.8C355.964 61.2 371.5 76.7357 371.5 95.9C371.5 115.064 355.964 130.6 336.8 130.6H178L204 116.72L212.5 91.9342L198 71.1142L178 61.2Z' fill='white' />
+        <path d='M61.2622 126.636H182.647V126.597C187.247 126.383 191.74 125.141 195.795 122.962C199.851 120.783 203.365 117.724 206.08 114.008C208.795 110.293 210.641 106.016 211.482 101.493C212.323 96.9709 212.138 92.3174 210.94 87.8758C209.742 83.4342 207.562 79.3176 204.56 75.8292C201.559 72.3408 197.812 69.5694 193.596 67.7193C189.38 65.8691 184.802 64.9873 180.2 65.1387C175.598 65.2901 171.088 66.4709 167.003 68.5942C164.482 62.7803 160.666 57.6177 155.846 53.4992C151.027 49.3807 145.33 46.4149 139.19 44.8275M35.223 44.8275C26.2848 47.1298 18.3666 52.3354 12.7143 59.6253C7.062 66.9151 3.99645 75.8754 4 85.0962C4.00356 94.317 7.07603 103.275 12.734 110.56C18.3919 117.846 26.3141 123.046 35.254 125.341' stroke='white' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+        <path d='M83.2411 70.3236L67.0461 76.0084L74.1731 91.1083' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+        <path d='M67.411 76.276C74.7957 80.6139 83.4084 82.3923 91.9095 81.3347C100.411 80.2771 108.324 76.4427 114.418 70.4279C120.512 64.4131 124.445 56.5552 125.606 48.0763C126.767 39.5975 125.09 30.973 120.837 23.5445C116.584 16.1159 109.992 10.2997 102.087 7.00052C94.1829 3.70132 85.4084 3.10409 77.1289 5.30172C68.8494 7.49935 61.529 12.3686 56.3063 19.1522C51.0836 25.9358 48.2515 34.2533 48.2504 42.8111V100.702' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+        <path opacity={0.2} d='M48.2504 161.904V168.667' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+        <path opacity={0.4} d='M48.3125 140.623V151.306' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+        <path opacity={0.7} d='M48.2504 111.703V129.564' stroke='#21FA90' strokeWidth={8} strokeLinecap='round' strokeLinejoin='round' />
+        <path d='M235.65 93.75H252.45V100.25H235.65V93.75ZM236.25 113H228.15V78H254.6V84.5H236.25V113ZM259.045 113V86.1H266.495V93.7L265.445 91.5C266.245 89.6 267.529 88.1667 269.295 87.2C271.062 86.2 273.212 85.7 275.745 85.7V92.9C275.412 92.8667 275.112 92.85 274.845 92.85C274.579 92.8167 274.295 92.8 273.995 92.8C271.862 92.8 270.129 93.4167 268.795 94.65C267.495 95.85 266.845 97.7333 266.845 100.3V113H259.045ZM293.489 113.4C290.422 113.4 287.722 112.8 285.389 111.6C283.089 110.4 281.306 108.767 280.039 106.7C278.772 104.6 278.139 102.217 278.139 99.55C278.139 96.85 278.756 94.4667 279.989 92.4C281.256 90.3 282.972 88.6667 285.139 87.5C287.306 86.3 289.756 85.7 292.489 85.7C295.122 85.7 297.489 86.2667 299.589 87.4C301.722 88.5 303.406 90.1 304.639 92.2C305.872 94.2667 306.489 96.75 306.489 99.65C306.489 99.95 306.472 100.3 306.439 100.7C306.406 101.067 306.372 101.417 306.339 101.75H284.489V97.2H302.239L299.239 98.55C299.239 97.15 298.956 95.9333 298.389 94.9C297.822 93.8667 297.039 93.0667 296.039 92.5C295.039 91.9 293.872 91.6 292.539 91.6C291.206 91.6 290.022 91.9 288.989 92.5C287.989 93.0667 287.206 93.8833 286.639 94.95C286.072 95.9833 285.789 97.2167 285.789 98.65V99.85C285.789 101.317 286.106 102.617 286.739 103.75C287.406 104.85 288.322 105.7 289.489 106.3C290.689 106.867 292.089 107.15 293.689 107.15C295.122 107.15 296.372 106.933 297.439 106.5C298.539 106.067 299.539 105.417 300.439 104.55L304.589 109.05C303.356 110.45 301.806 111.533 299.939 112.3C298.072 113.033 295.922 113.4 293.489 113.4ZM325.032 113.4C321.965 113.4 319.265 112.8 316.932 111.6C314.632 110.4 312.849 108.767 311.582 106.7C310.315 104.6 309.682 102.217 309.682 99.55C309.682 96.85 310.299 94.4667 311.532 92.4C312.799 90.3 314.515 88.6667 316.682 87.5C318.849 86.3 321.299 85.7 324.032 85.7C326.665 85.7 329.032 86.2667 331.132 87.4C333.265 88.5 334.949 90.1 336.182 92.2C337.415 94.2667 338.032 96.75 338.032 99.65C338.032 99.95 338.015 100.3 337.982 100.7C337.949 101.067 337.915 101.417 337.882 101.75H316.032V97.2H333.782L330.782 98.55C330.782 97.15 330.499 95.9333 329.932 94.9C329.365 93.8667 328.582 93.0667 327.582 92.5C326.582 91.9 325.415 91.6 324.082 91.6C322.749 91.6 321.565 91.9 320.532 92.5C319.532 93.0667 318.749 93.8833 318.182 94.95C317.615 95.9833 317.332 97.2167 317.332 98.65V99.85C317.332 101.317 317.649 102.617 318.282 103.75C318.949 104.85 319.865 105.7 321.032 106.3C322.232 106.867 323.632 107.15 325.232 107.15C326.665 107.15 327.915 106.933 328.982 106.5C330.082 106.067 331.082 105.417 331.982 104.55L336.132 109.05C334.899 110.45 333.349 111.533 331.482 112.3C329.615 113.033 327.465 113.4 325.032 113.4Z' fill='#00283D' />
+      </svg>
+    )
+  }
+
+  return icon
+}
+
+FreeLogo.propTypes = {
+  /**
+   * background color of the button
+   */
+  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
+  /**
+   * width
+   */
+  width: PropTypes.number,
+  /**
+   * height
+   */
+  height: PropTypes.number
+}
+
+FreeLogo.defaultProps = {
+  backgroundColor: WHITE,
+  width: 379,
+  height: 173
+}
+
+export default FreeLogo

package/src/components/logos/index.js

@@ -0,0 +1,7 @@
+import BasicLogo from './BasicLogo'
+import FreeLogo from './FreeLogo'
+
+export default {
+  BasicLogo,
+  FreeLogo
+}

package/src/stories/{Loader.stories.jsx → LoadingSpinner.stories.jsx}

@@ -1,28 +1,28 @@
 import React, { useState } from 'react'
-import Loader from '../components/Loader'
+import LoadingSpinner from '../components/LoadingSpinner'
 import Button from '../components/Button'
 import BorderedBox from '../components/BorderedBox'
 
 const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est nisl, maximus aliquet urna eu, consequat semper nisi. Nam vel elit feugiat dui congue elementum. Sed turpis urna, egestas at pharetra et, lacinia ac mauris. Pellentesque cursus, ipsum nec malesuada ornare, dui purus ultrices elit, non blandit nisi quam non nisi. Suspendisse sapien leo, ultricies pretium vulputate sed, malesuada sed justo. Suspendisse euismod erat ut lacus feugiat malesuada. In tempor a eros et egestas. Nam pretium dolor sollicitudin, cursus sem vitae, elementum enim. Nam in nisi ipsum.'
 
 export default {
-  title: 'Platformatic/Loader',
-  component: Loader
+  title: 'Platformatic/LoadingSpinner',
+  component: LoadingSpinner
 }
 
 export const Loading = args =>
-  <Loader {...args}>
+  <LoadingSpinner {...args}>
     <BorderedBox>{loremIpsum}</BorderedBox>
-  </Loader>
+  </LoadingSpinner>
 
 Loading.args = {
   loading: true
 }
 
 export const LoadsAndStops = ({ loading, ...args }) => {
-  const [showLoader, setShowLoader] = useState(args.loading)
-  const show = () => setShowLoader(true)
-  const hide = () => setShowLoader(false)
+  const [showLoadingSpoinner, setShowLoadingSpoinner] = useState(args.loading)
+  const show = () => setShowLoadingSpoinner(true)
+  const hide = () => setShowLoadingSpoinner(false)
 
   function load () {
     show()
@@ -33,10 +33,10 @@ export const LoadsAndStops = ({ loading, ...args }) => {
   }
 
   return (
-    <Loader loading={showLoader} {...args}>
+    <LoadingSpinner loading={showLoadingSpoinner} {...args}>
       <Button label='Start Loading' color='error-red' onClick={() => load()} />
       <BorderedBox>{loremIpsum}</BorderedBox>
-    </Loader>
+    </LoadingSpinner>
   )
 }
 LoadsAndStops.args = {

package/src/stories/{BorderedText.stories.jsx → Tag.stories.jsx}

@@ -1,8 +1,8 @@
 'use strict'
-import BorderedText from '../components/BorderedText'
+import Tag from '../components/Tag'
 export default {
-  title: 'Platformatic/BorderedText',
-  component: BorderedText,
+  title: 'Platformatic/Tag',
+  component: Tag,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     text: { control: 'string' }
@@ -10,7 +10,7 @@ export default {
 }
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <BorderedText {...args} />
+const Template = (args) => <Tag {...args} />
 
 export const Sample = Template.bind({})
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
@@ -18,7 +18,9 @@ Sample.args = {
   text: 'Hello Platformatic!'
 }
 export const Version = Template.bind({})
-
 Version.args = {
-  text: 'v1.2.3'
+  text: 'v1.2.3',
+  backgroundColor: 'main-green',
+  bordered: false,
+  opaque: 30
 }

package/src/stories/logos/Logos.stories.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { SIZES, WHITE, MAIN_DARK_BLUE } from '../../components/constants'
+import Logos from '../../components/logos'
+
+const divStyle = {
+  width: '100%'
+}
+
+const row = {
+  display: 'flex',
+  width: '100%',
+  columnGap: '1rem',
+  alignItems: 'center'
+}
+
+const col = {
+  flex: 1
+}
+
+const paragraph = {
+  fontSize: '12px'
+}
+
+export default {
+  title: 'Platformatic/Logos',
+  component: Logos,
+  argTypes: {
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: [WHITE, MAIN_DARK_BLUE]
+      }
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: [SIZES]
+      }
+    }
+  }
+}
+
+const AllLogosTemplate = (args) => {
+  const logos = Object.values(Logos)
+  let divBackgrounColor = { ...divStyle, backgroundColor: WHITE }
+  let paragraphClass = { ...paragraph, color: MAIN_DARK_BLUE }
+  if (args.backgroundColor === 'main-dark-blue') {
+    divBackgrounColor = { ...divStyle, backgroundColor: MAIN_DARK_BLUE }
+    paragraphClass = { ...paragraph, color: WHITE }
+  }
+  return (
+    <div style={divBackgrounColor}>
+      <p style={paragraphClass}> All Logos: {logos.length} </p>
+      {logos.map((LogoComponent, index) => (
+        <div style={row} key={index}>
+          <div style={col}>
+            <p style={paragraphClass}>#{index + 1}: {LogoComponent.name}</p>
+          </div>
+          <div style={col}>
+            <LogoComponent key={LogoComponent.name} {...args} />
+          </div>
+          <div style={col}>
+            <LogoComponent key={LogoComponent.name} width={142} height={63} {...args} />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+export const PlatformaticIconWhite = AllLogosTemplate.bind({})
+PlatformaticIconWhite.args = {}
+
+export const PlatformaticIconMainDarkBlue = AllLogosTemplate.bind({})
+PlatformaticIconMainDarkBlue.args = {
+  backgroundColor: 'main-dark-blue'
+}

package/dist/assets/index.0de95a32.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_mxskk_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_mxskk_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_mxskk_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_mxskk_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_mxskk_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_mxskk_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_mxskk_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._error-message_mxskk_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_mxskk_27{padding:.625rem .5rem}._text--green_mxskk_31{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-dark-blue_mxskk_34{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._background-color-main-green_mxskk_38{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_mxskk_41{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_mxskk_44{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_mxskk_47{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_mxskk_50{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_mxskk_53{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_mxskk_56{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_mxskk_59{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_mxskk_62{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-transparent_mxskk_65{background-color:transparent}._apply-opacity-30_mxskk_68{opacity:.3}._padding--small_mxskk_72{padding:.25rem}._padding--medium_mxskk_75{padding:.5rem}._padding--large_mxskk_78{padding:1rem}._padding--extra-large_mxskk_81{padding:1.5rem}._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_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_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}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-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}.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-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))}.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}