@platformatic/ui-components 0.1.137 → 0.1.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/assets/index-45c3b9ea.css +1 -0
  2. package/dist/assets/{index-706e83c1.js → index-5faf74a6.js} +19 -19
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Common.module.css +21 -0
  6. package/src/components/FollowUs.jsx +41 -32
  7. package/src/components/forms/Input.jsx +33 -21
  8. package/src/components/forms/Input.module.css +0 -1
  9. package/src/components/forms/InputWithSeparator.jsx +3 -3
  10. package/src/components/forms/InputWithSeparator.module.css +5 -3
  11. package/src/stories/forms/Input.stories.jsx +3 -3
  12. package/dist/assets/index-89e9ad97.css +0 -1
package/dist/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Platformatic UI Components</title>
7
- <script type="module" crossorigin src="/assets/index-706e83c1.js"></script>
8
- <link rel="stylesheet" href="/assets/index-89e9ad97.css">
7
+ <script type="module" crossorigin src="/assets/index-5faf74a6.js"></script>
8
+ <link rel="stylesheet" href="/assets/index-45c3b9ea.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.1.137",
4
+ "version": "0.1.138",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Common.module.css CHANGED
@@ -43,6 +43,27 @@
43
43
  .bordered--white-100 {
44
44
  @apply border-white/100;
45
45
  }
46
+ .bordered--main-green-70 {
47
+ @apply border-main-green/70;
48
+ }
49
+ .bordered--main-dark-blue-70 {
50
+ @apply border-main-dark-blue/70;
51
+ }
52
+ .bordered--tertiary-blue-70 {
53
+ @apply border-tertiary-blue/70;
54
+ }
55
+ .bordered--error-red-70 {
56
+ @apply border-error-red/70;
57
+ }
58
+ .bordered--warning-yellow-70 {
59
+ @apply border-warning-yellow/70;
60
+ }
61
+ .bordered--dark-blue-70 {
62
+ @apply border-dark-blue/70;
63
+ }
64
+ .bordered--white-70 {
65
+ @apply border-white/70;
66
+ }
46
67
  .bordered--main-green-30 {
47
68
  @apply border-main-green/30;
48
69
  }
package/src/components/FollowUs.jsx CHANGED
@@ -23,7 +23,14 @@ function SocialElement ({ href, iconName, iconClassName, iconColor, iconSize })
23
23
  )
24
24
  }
25
25
 
26
- function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize, labelColor }) {
26
+ function FollowUs ({
27
+ label,
28
+ labelClassName,
29
+ useOnFrontpage,
30
+ iconColor,
31
+ iconSize,
32
+ socialElements
33
+ }) {
27
34
  const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
28
35
  const className = styles[`container${suffix}`]
29
36
  const iconClassName = styles[`icon${suffix}`]
@@ -34,34 +41,16 @@ function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize,
34
41
  {label}
35
42
  </div>
36
43
 
37
- <SocialElement
38
- href='https://twitter.com/platformatic'
39
- iconName='SocialXIcon'
40
- iconClassName={iconClassName}
41
- iconColor={iconColor}
42
- iconSize={iconSize}
43
- />
44
- <SocialElement
45
- href='https://www.linkedin.com/company/platformatic/'
46
- iconName='SocialLinkedInIcon'
47
- iconClassName={iconClassName}
48
- iconColor={iconColor}
49
- iconSize={iconSize}
50
- />
51
- <SocialElement
52
- href='https://github.com/platformatic'
53
- iconName='SocialGitHubIcon'
54
- iconClassName={iconClassName}
55
- iconColor={iconColor}
56
- iconSize={iconSize}
57
- />
58
- <SocialElement
59
- href='https://discord.gg/platformatic'
60
- iconName='SocialDiscordIcon'
61
- iconClassName={iconClassName}
62
- iconColor={iconColor}
63
- iconSize={iconSize}
64
- />
44
+ {socialElements.map(socialElement =>
45
+ <SocialElement
46
+ key={socialElement.link}
47
+ href={socialElement.link}
48
+ iconName={socialElement.iconName}
49
+ iconClassName={iconClassName}
50
+ iconColor={iconColor}
51
+ iconSize={iconSize}
52
+ />
53
+ )}
65
54
  </div>
66
55
  )
67
56
  }
@@ -90,15 +79,35 @@ FollowUs.propTypes = {
90
79
  /**
91
80
  * iconSize
92
81
  */
93
- iconSize: PropTypes.oneOf([MEDIUM, SMALL])
82
+ iconSize: PropTypes.oneOf([MEDIUM, SMALL]),
83
+ /**
84
+ * socialElements
85
+ */
86
+ socialElements: PropTypes.arrayOf(PropTypes.shape({
87
+ link: PropTypes.string.isRequired,
88
+ iconName: PropTypes.string.isRequired
89
+ }))
94
90
  }
95
91
 
96
92
  FollowUs.defaultProps = {
97
93
  label: 'Follow us on',
98
94
  labelClassName: '',
99
95
  useOnFrontpage: true,
100
- labelColor: LIGHT_GREEN,
101
96
  iconColor: WHITE,
102
- iconSize: MEDIUM
97
+ iconSize: MEDIUM,
98
+ socialElements: [{
99
+ link: 'https://twitter.com/platformatic',
100
+ iconName: 'SocialXIcon'
101
+ }, {
102
+ link: 'https://www.linkedin.com/company/platformatic/',
103
+ iconName: 'SocialLinkedInIcon'
104
+ }, {
105
+ link: 'https://github.com/platformatic',
106
+ iconName: 'SocialGitHubIcon'
107
+ }, {
108
+ link: 'https://discord.gg/platformatic',
109
+ iconName: 'SocialDiscordIcon'
110
+ }]
111
+
103
112
  }
104
113
  export default FollowUs
package/src/components/forms/Input.jsx CHANGED
@@ -1,11 +1,10 @@
1
1
  'use strict'
2
- import React from 'react'
2
+ import React, { useState } from 'react'
3
3
  import PropTypes from 'prop-types'
4
4
  import styles from './Input.module.css'
5
5
  import commonStyles from '../Common.module.css'
6
6
  import PlatformaticIcon from '../PlatformaticIcon'
7
- import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
8
- import BorderedBox from '../BorderedBox'
7
+ import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
9
8
 
10
9
  function Input ({
11
10
  placeholder,
@@ -17,7 +16,6 @@ function Input ({
17
16
  disabled,
18
17
  beforeIcon,
19
18
  afterIcon,
20
- focused,
21
19
  placeholderApart,
22
20
  backgroundColor,
23
21
  inputTextClassName,
@@ -26,16 +24,15 @@ function Input ({
26
24
  dataAttrValue,
27
25
  readOnly
28
26
  }) {
29
- let inputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName}`
30
- inputClassName += verticalPaddingClassName || `${styles.inputDefaultVerticalPadding}`
31
- inputClassName += commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
32
- inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
27
+ let baseInputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName}`
28
+ baseInputClassName += verticalPaddingClassName || `${styles.inputDefaultVerticalPadding}`
29
+ baseInputClassName += ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles[`background-color-${backgroundColor}`]
33
30
 
34
31
  const showError = errorMessage.length > 0
35
- if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
36
- if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
37
- if (beforeIcon) inputClassName += ' ' + styles.beforeIconPadding
38
- if (afterIcon) inputClassName += ' ' + styles.afterIconPadding
32
+ if (disabled) baseInputClassName += ' ' + commonStyles['apply-opacity-30']
33
+ if (beforeIcon) baseInputClassName += ' ' + styles.beforeIconPadding
34
+ if (afterIcon) baseInputClassName += ' ' + styles.afterIconPadding
35
+ const [focus, setFocus] = useState(false)
39
36
  const inputPlaceholder = placeholderApart ? '' : placeholder
40
37
 
41
38
  const dataProps = {}
@@ -43,7 +40,27 @@ function Input ({
43
40
  dataProps[`data-${dataAttrName}`] = dataAttrValue
44
41
  }
45
42
 
46
- const cmp = (
43
+ function focusedClassName () {
44
+ const useEffectColor = showError ? ERROR_RED : borderColor
45
+ return (baseInputClassName + ' ' + commonStyles[`bordered--${useEffectColor}-100`])
46
+ }
47
+
48
+ function normalClassName () {
49
+ const useEffectColor = showError ? ERROR_RED : borderColor
50
+ return baseInputClassName + ' ' + commonStyles[`bordered--${useEffectColor}-70`]
51
+ }
52
+
53
+ function handleFocus () {
54
+ if (!disabled) {
55
+ setFocus(true)
56
+ }
57
+ }
58
+
59
+ function handleBlur () {
60
+ if (!disabled) setFocus(false)
61
+ }
62
+
63
+ return (
47
64
  <div className={styles.container} {...dataProps}>
48
65
  <div className={styles.inputContainer}>
49
66
  {beforeIcon && <div className={styles.beforeInputIcon}><PlatformaticIcon iconName={beforeIcon.iconName} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} /></div>}
@@ -51,12 +68,14 @@ function Input ({
51
68
  type='text'
52
69
  name={name}
53
70
  value={value}
54
- className={inputClassName}
71
+ className={focus ? focusedClassName() : normalClassName()}
55
72
  onChange={onChange}
56
73
  disabled={disabled}
57
74
  placeholder={inputPlaceholder}
58
75
  readOnly={readOnly}
59
76
  aria-readonly={readOnly}
77
+ onFocus={() => handleFocus()}
78
+ onBlur={() => handleBlur()}
60
79
  />
61
80
  {placeholderApart && <p className={styles.placeholderAPart}>{placeholder}</p>}
62
81
  {afterIcon && <div className={styles.afterInputIcon}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} /></div>}
@@ -64,8 +83,6 @@ function Input ({
64
83
  {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
65
84
  </div>
66
85
  )
67
-
68
- return focused ? (<BorderedBox classes={styles.paddingFocused} color={MAIN_GREEN} backgroundColor={MAIN_GREEN} opaque={10}>{cmp}</BorderedBox>) : cmp
69
86
  }
70
87
 
71
88
  Input.propTypes = {
@@ -113,10 +130,6 @@ Input.propTypes = {
113
130
  color: PropTypes.string,
114
131
  onClick: PropTypes.func
115
132
  }),
116
- /**
117
- * addFocus
118
- */
119
- focused: PropTypes.bool,
120
133
  /**
121
134
  * placeholderApart
122
135
  */
@@ -158,7 +171,6 @@ Input.defaultProps = {
158
171
  disabled: false,
159
172
  beforeIcon: null,
160
173
  afterIcon: null,
161
- focused: false,
162
174
  shadowPlaceholder: false,
163
175
  inputTextClassName: '',
164
176
  verticalPaddingClassName: '',
package/src/components/forms/Input.module.css CHANGED
@@ -45,6 +45,5 @@
45
45
  }
46
46
  .input.active,
47
47
  .input:focus {
48
- @apply shadow-white;
49
48
  outline: none;
50
49
  }
package/src/components/forms/InputWithSeparator.jsx CHANGED
@@ -25,7 +25,7 @@ function InputWithSeparator ({
25
25
  const buttonClassName = commonStyles[`background-color-${borderColor}`] + ' ' + commonStyles['background-color-opaque-30']
26
26
  const [chunks, setChunks] = useState([])
27
27
  const [inputClassName, setInputClassName] = useState(normalClassName())
28
- const chunkClasses = `${styles.flexNone} ${styles.smallPadding} ${styles.smallMargin}`
28
+ const chunkClasses = styles.chunkClasses
29
29
  let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}-30`] + ' ' + commonStyles[`text--${borderColor}`]
30
30
  const showError = errorMessage.length > 0
31
31
  if (showError) className += ' ' + commonStyles['bordered--error-red']
@@ -71,9 +71,9 @@ function InputWithSeparator ({
71
71
 
72
72
  function renderChunk (chunk, index) {
73
73
  return (
74
- <BorderedBox color={TRANSPARENT} backgroundColor={borderColor} backgroundColorOpacity={OPACITY_30} classes={chunkClasses} key={index}>
74
+ <BorderedBox color={TRANSPARENT} backgroundColor={borderColor} backgroundColorOpacity={OPACITY_30} classes={chunkClasses} key={index} bor>
75
75
  <div className={styles.chunkContent}>
76
- <span className={`${styles.chunkText} ${inputTextClassName}`}>{chunk}</span>
76
+ <span className={`${inputTextClassName} ${styles.chunkText} `}>{chunk}</span>
77
77
  <ButtonFullRounded
78
78
  iconName='CircleCloseIcon'
79
79
  iconSize={SMALL}
package/src/components/forms/InputWithSeparator.module.css CHANGED
@@ -2,10 +2,10 @@
2
2
  @apply flex gap-x-2 w-full items-center;
3
3
  }
4
4
  .chunkText {
5
- @apply text-sm;
5
+ @apply text-[14px] leading-[17px] !important ;
6
6
  }
7
7
  .inputContainer {
8
- @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative grow px-2;
8
+ @apply flex min-h-[40px] border border-solid box-border rounded-md items-center gap-2 flex-wrap relative grow px-2;
9
9
  }
10
10
  .input {
11
11
  @apply h-full m-0 border-0;
@@ -34,6 +34,8 @@
34
34
 
35
35
  .input.active,
36
36
  .input:focus {
37
- @apply shadow-white;
38
37
  outline: none;
38
+ }
39
+ .chunkClasses {
40
+ @apply flex-none p-2 my-0 border-0;
39
41
  }
package/src/stories/forms/Input.stories.jsx CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict'
2
2
  import React, { useState } from 'react'
3
3
  import Input from '../../components/forms/Input'
4
+ import { ERROR_RED } from '../../components/constants'
4
5
 
5
6
  const divStyle = {
6
7
  width: '100%',
@@ -88,13 +89,12 @@ IconBeforeAndAfter.args = {
88
89
  }
89
90
  }
90
91
 
91
- export const Focused = TemplateBorderMainDarkBlue.bind({})
92
+ export const Focused = TemplateValuedAndAlertChange.bind({})
92
93
 
93
94
  Focused.args = {
94
95
  name: 'test',
95
96
  placeholder: 'Platformatic',
96
- borderColor: 'main-dark-blue',
97
- focused: true
97
+ borderColor: ERROR_RED
98
98
  }
99
99
 
100
100
  export const PlaceholderAPart = TemplateValuedAndAlertChange.bind({})
package/dist/assets/index-89e9ad97.css DELETED
@@ -1 +0,0 @@
1
- ._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_5vifr_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_5vifr_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_5vifr_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_5vifr_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_5vifr_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_5vifr_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_5vifr_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_5vifr_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--main-green-100_5vifr_25{border-color:#21fa90}._bordered--main-dark-blue-100_5vifr_28{border-color:#00283d}._bordered--tertiary-blue-100_5vifr_31{border-color:#2588e4}._bordered--error-red-100_5vifr_34{border-color:#fa2121}._bordered--warning-yellow-100_5vifr_37{border-color:#feb928}._bordered--dark-blue-100_5vifr_40{border-color:#00344f}._bordered--white-100_5vifr_43{border-color:#fff}._bordered--main-green-30_5vifr_46{border-color:#21fa904d}._bordered--main-dark-blue-30_5vifr_49{border-color:#00283d4d}._bordered--error-red-30_5vifr_52{border-color:#fa21214d}._bordered--warning-yellow-30_5vifr_55{border-color:#feb9284d}._bordered--dark-blue-30_5vifr_58{border-color:#00344f4d}._bordered--white-30_5vifr_61{border-color:#ffffff4d}._bordered--tertiary-blue-30_5vifr_64{border-color:#2588e44d}._bordered--main-green-20_5vifr_67{border-color:#21fa9033}._bordered--main-dark-blue-20_5vifr_70{border-color:#00283d33}._bordered--error-red-20_5vifr_73{border-color:#fa212133}._bordered--warning-yellow-20_5vifr_76{border-color:#feb92833}._bordered--dark-blue-20_5vifr_79{border-color:#00344f33}._bordered--white-20_5vifr_82{border-color:#fff3}._bordered--tertiary-blue-20_5vifr_85{border-color:#2588e433}._bordered--main-dark-blue-15_5vifr_88{border-color:#00283d26}._bordered--white-15_5vifr_91{border-color:#ffffff26}._bordered--tertiary-blue-15_5vifr_94{border-color:#2588e426}._bordered--main-dark-blue-10_5vifr_28{border-color:#00283d1a}._bordered--white-10_5vifr_43{border-color:#ffffff1a}._bordered--tertiary-blue-10_5vifr_31{border-color:#2588e41a}._error-message_5vifr_108{position:absolute;bottom:-1.25rem;width:-moz-max-content;width:max-content;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_5vifr_112{padding:.625rem .5rem}._text--error-red_5vifr_116{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_5vifr_119{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--dark-green_5vifr_122{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--main-green_5vifr_125{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--light-green_5vifr_128{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--main-dark-blue_5vifr_131{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--light-blue_5vifr_134{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--base_5vifr_138{font-size:1rem;line-height:1.5rem}._text--xs_5vifr_141{font-size:.75rem;line-height:1rem}._background-color-main-green_5vifr_145{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_5vifr_148{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_5vifr_151{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_5vifr_154{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_5vifr_157{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_5vifr_160{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_5vifr_163{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_5vifr_166{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_5vifr_169{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_5vifr_172{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-rich-black_5vifr_175{--tw-bg-opacity: 1 !important;background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important}._background-color-transparent_5vifr_178{background-color:transparent}._background-color-opaque-100_5vifr_181{--tw-bg-opacity: 1 !important}._background-color-opaque-60_5vifr_184{--tw-bg-opacity: .6 !important}._background-color-opaque-30_5vifr_187{--tw-bg-opacity: .3 !important}._background-color-opaque-20_5vifr_190{--tw-bg-opacity: .2 !important}._background-color-opaque-10_5vifr_181{--tw-bg-opacity: .1 !important}._apply-opacity-30_5vifr_196{opacity:.3}._padding--none_5vifr_199{padding:0}._padding--small_5vifr_202{padding:.25rem}._padding--medium_5vifr_205{padding:.5rem}._padding--large_5vifr_208{padding:1rem}._padding--extra-large_5vifr_211{padding:1.5rem}._hover-background-color-opaque-main-green_5vifr_214:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_5vifr_217:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_5vifr_220:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_5vifr_223:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_5vifr_226:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_5vifr_229:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_5vifr_232:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_5vifr_235:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_5vifr_238:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_5vifr_241{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_5vifr_244{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_5vifr_247{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_5vifr_250{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_5vifr_253{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_5vifr_256{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_5vifr_259{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_5vifr_262{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_5vifr_265{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_5vifr_269{font-weight:600}._fontLight_5vifr_272{font-weight:300}._fullWidth_5vifr_275{width:100%}._error-red_ulad8_1>circle,._error-red_ulad8_1>ellipse,._error-red_ulad8_1>rect,._error-red_ulad8_1>line,._error-red_ulad8_1>path{stroke:#fa2121}._main-dark-blue_ulad8_9>circle,._main-dark-blue_ulad8_9>ellipse,._main-dark-blue_ulad8_9>rect,._main-dark-blue_ulad8_9>line,._main-dark-blue_ulad8_9>path{stroke:#00283d}._main-green_ulad8_17>circle,._main-green_ulad8_17>ellipse,._main-green_ulad8_17>rect,._main-green_ulad8_17>line,._main-green_ulad8_17>path{stroke:#21fa90}._tertiary-blue_ulad8_25>circle,._tertiary-blue_ulad8_25>ellipse,._tertiary-blue_ulad8_25>rect,._tertiary-blue_ulad8_25>line,._tertiary-blue_ulad8_25>path{stroke:#2588e4}._warning-yellow_ulad8_33>circle,._warning-yellow_ulad8_33>ellipse,._warning-yellow_ulad8_33>rect,._warning-yellow_ulad8_33>line,._warning-yellow_ulad8_33>path{stroke:#feb928}._white_ulad8_41>circle,._white_ulad8_41>ellipse,._white_ulad8_41>rect,._white_ulad8_41>line,._white_ulad8_41>path{stroke:#fff}._filled-white_ulad8_49{fill:#fff}._filled-error-red_ulad8_52{fill:#fa2121}._filled-main-dark-blue_ulad8_55{fill:#00283d}._filled-main-green_ulad8_58{fill:#21fa90}._filled-warning-yellow_ulad8_61{fill:#feb928}._filled-tertiary-blue_ulad8_64{fill:#2588e4}._fill-circle-green_ulad8_68>circle{fill:#fff}._fill-circle-main-dark-blue_ulad8_71>circle{fill:#00283d}._svgClassName_ulad8_75{display:block;flex-shrink:0;overflow-clip-margin:unset}._iconDisabled_ulad8_80{opacity:.3}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_1rjlv_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_1rjlv_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_1rjlv_4:hover{cursor:pointer}._tab_1rjlv_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_1rjlv_1:first-child{margin-left:0}._tab_1rjlv_1:last-child{margin-right:0}._tab_1rjlv_1:hover{font-weight:600}._selected-tab_1rjlv_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_1rjlv_13{min-height:100vh}._tab_1rjlv_1:before{display:block;content:attr(title);font-weight:700;height:0;overflow:hidden;visibility:hidden}._borderedBox_ljsv8_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))}._clickable_ljsv8_4{cursor:pointer}*,: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;font-feature-settings:normal;font-variation-settings:normal}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-feature-settings:inherit;font-variation-settings: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}dialog{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}[hidden]{display:none}*,: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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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: 350px){.container{max-width:350px}}@media (min-width: 390px){.container{max-width:390px}}@media (min-width: 744px){.container{max-width:744px}}@media (min-width: 1240px){.container{max-width:1240px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1920px){.container{max-width:1920px}}.relative{position:relative}.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-10{gap:2.5rem}.gap-2{gap:.5rem}.border{border-width:1px}.border-0{border-width:0px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.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-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / 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)}:root{background-color:transparent;font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.body--light-blue{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}.body--main-dark-blue{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}