@platformatic/ui-components 0.1.154 → 0.2.0

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 (20) hide show
  1. package/dist/assets/index-CiSL-R56.css +1 -0
  2. package/dist/assets/{index-BoULZrVI.js → index-c6H43mm9.js} +13 -13
  3. package/dist/index.html +2 -2
  4. package/dist/main.css +35 -0
  5. package/package.json +1 -1
  6. package/src/components/Button.jsx +28 -12
  7. package/src/components/ButtonFullRounded.jsx +4 -4
  8. package/src/components/ButtonOnlyIcon.jsx +4 -4
  9. package/src/components/Common.module.css +9 -0
  10. package/src/components/Modal.jsx +4 -4
  11. package/src/components/ModalStepsForward.jsx +2 -2
  12. package/src/components/Sidebar.jsx +4 -4
  13. package/src/components/SimpleMetric.jsx +2 -2
  14. package/src/components/constants.js +7 -2
  15. package/src/components/forms/InputWithSeparator.jsx +10 -7
  16. package/src/stories/Button.stories.jsx +93 -3
  17. package/src/stories/ButtonOnlyIcon.stories.jsx +2 -2
  18. package/src/stories/forms/InputWithSeparator.stories.jsx +1 -1
  19. package/tailwind.config.cjs +4 -1
  20. package/dist/assets/index-BixsHrYW.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-BoULZrVI.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-BixsHrYW.css">
7
+ <script type="module" crossorigin src="/assets/index-c6H43mm9.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-CiSL-R56.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/main.css CHANGED
@@ -590,6 +590,14 @@ video {
590
590
  position: relative;
591
591
  }
592
592
 
593
+ .col-span-1 {
594
+ grid-column: span 1 / span 1;
595
+ }
596
+
597
+ .col-span-2 {
598
+ grid-column: span 2 / span 2;
599
+ }
600
+
593
601
  .mx-auto {
594
602
  margin-left: auto;
595
603
  margin-right: auto;
@@ -632,6 +640,14 @@ video {
632
640
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
633
641
  }
634
642
 
643
+ .grid-cols-2 {
644
+ grid-template-columns: repeat(2, minmax(0, 1fr));
645
+ }
646
+
647
+ .grid-cols-5 {
648
+ grid-template-columns: repeat(5, minmax(0, 1fr));
649
+ }
650
+
635
651
  .grid-cols-6 {
636
652
  grid-template-columns: repeat(6, minmax(0, 1fr));
637
653
  }
@@ -652,6 +668,11 @@ video {
652
668
  gap: 0.5rem;
653
669
  }
654
670
 
671
+ .gap-x-2 {
672
+ -moz-column-gap: 0.5rem;
673
+ column-gap: 0.5rem;
674
+ }
675
+
655
676
  .border {
656
677
  border-width: 1px;
657
678
  }
@@ -660,6 +681,20 @@ video {
660
681
  border-width: 0px;
661
682
  }
662
683
 
684
+ .bg-rich-black {
685
+ --tw-bg-opacity: 1;
686
+ background-color: rgb(0 5 11 / var(--tw-bg-opacity));
687
+ }
688
+
689
+ .bg-white {
690
+ --tw-bg-opacity: 1;
691
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
692
+ }
693
+
694
+ .p-2 {
695
+ padding: 0.5rem;
696
+ }
697
+
663
698
  .px-5 {
664
699
  padding-left: 1.25rem;
665
700
  padding-right: 1.25rem;
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.154",
4
+ "version": "0.2.0",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Button.jsx CHANGED
@@ -4,7 +4,19 @@ import PropTypes from 'prop-types'
4
4
  import styles from './Button.module.css'
5
5
  import commonStyles from './Common.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
- import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, LARGE } from './constants'
7
+ import {
8
+ SIZES,
9
+ COLORS_BUTTON,
10
+ BOX_SHADOW,
11
+ UNDERLINE,
12
+ HOVER_EFFECTS_BUTTONS,
13
+ DULLS_BACKGROUND_COLOR,
14
+ MAIN_DARK_BLUE,
15
+ LARGE,
16
+ CHANGE_BACKGROUND_COLOR,
17
+ BUTTON_BACKGROUNDS_COLOR_HOVER,
18
+ TRANSPARENT
19
+ } from './constants'
8
20
 
9
21
  function Button ({
10
22
  textClass,
@@ -14,8 +26,8 @@ function Button ({
14
26
  backgroundColor,
15
27
  size,
16
28
  disabled,
17
- bold,
18
29
  hoverEffect,
30
+ hoverEffectProperties,
19
31
  bordered,
20
32
  fullWidth,
21
33
  platformaticIcon,
@@ -38,7 +50,6 @@ function Button ({
38
50
  buttonClassName += bordered ? commonStyles[`bordered--${color}-100`] : ''
39
51
  }
40
52
  if (!bordered) buttonClassName += ` ${styles['no-border']}`
41
- if (bold) buttonClassName += ` ${styles.fontBold}`
42
53
  if (fullWidth) {
43
54
  buttonClassName += ` ${styles.fullWidth}`
44
55
  }
@@ -50,8 +61,8 @@ function Button ({
50
61
  if (!disabled) {
51
62
  if (hover) {
52
63
  switch (hoverEffect) {
53
- case BACKGROUND_COLOR_OPAQUE:
54
- setBackgroundClassName(restClassName() + ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${color}`])
64
+ case DULLS_BACKGROUND_COLOR:
65
+ setBackgroundClassName(restClassName() + ' ' + commonStyles[`hover-${DULLS_BACKGROUND_COLOR}-${color}`])
55
66
  break
56
67
  case BOX_SHADOW:
57
68
  setBackgroundClassName(restClassName() + ' ' + styles[`hover-${BOX_SHADOW}-${backgroundColor}`])
@@ -59,6 +70,9 @@ function Button ({
59
70
  case UNDERLINE:
60
71
  setBackgroundClassName(`${restClassName()} ${styles['underline-effect']}`)
61
72
  break
73
+ case CHANGE_BACKGROUND_COLOR:
74
+ setBackgroundClassName(`${commonStyles['background-color-' + hoverEffectProperties.changeBackgroundColor]} `)
75
+ break
62
76
  default:
63
77
  break
64
78
  }
@@ -112,14 +126,16 @@ Button.propTypes = {
112
126
  * Disabled
113
127
  */
114
128
  disabled: PropTypes.bool,
115
- /**
116
- * Bold
117
- */
118
- bold: PropTypes.bool,
119
129
  /**
120
130
  * Effect on hover
121
131
  */
122
132
  hoverEffect: PropTypes.oneOf(HOVER_EFFECTS_BUTTONS),
133
+ /**
134
+ * Hover effect properties
135
+ */
136
+ hoverEffectProperties: PropTypes.shape({
137
+ changeBackgroundColor: PropTypes.oneOf(BUTTON_BACKGROUNDS_COLOR_HOVER)
138
+ }),
123
139
  /**
124
140
  * Apply border: default true
125
141
  */
@@ -153,11 +169,11 @@ Button.defaultProps = {
153
169
  paddingClass: '',
154
170
  label: '',
155
171
  color: MAIN_DARK_BLUE,
156
- backgroundColor: 'transparent',
172
+ backgroundColor: TRANSPARENT,
157
173
  disabled: false,
158
174
  size: LARGE,
159
- bold: false,
160
- hoverEffect: BACKGROUND_COLOR_OPAQUE,
175
+ hoverEffect: DULLS_BACKGROUND_COLOR,
176
+ hoverEffectProperties: {},
161
177
  bordered: true,
162
178
  fullWidth: false,
163
179
  platformaticIcon: null,
package/src/components/ButtonFullRounded.jsx CHANGED
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
4
4
  import commonStyles from './Common.module.css'
5
5
  import styles from './ButtonFullRounded.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
- import { COLORS_ICON, SIZES, BACKGROUND_COLOR_OPAQUE, PADDING_SIZES, SMALL, WHITE, NONE } from './constants'
7
+ import { COLORS_ICON, SIZES, DULLS_BACKGROUND_COLOR, PADDING_SIZES, SMALL, WHITE, NONE } from './constants'
8
8
  function ButtonFullRounded ({
9
9
  className,
10
10
  iconName,
@@ -32,8 +32,8 @@ function ButtonFullRounded ({
32
32
  innerButtonClassName += ` ${styles.disabled}`
33
33
  } else {
34
34
  switch (hoverEffect) {
35
- case BACKGROUND_COLOR_OPAQUE:
36
- innerButtonClassName += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${iconColor}`]
35
+ case DULLS_BACKGROUND_COLOR:
36
+ innerButtonClassName += ' ' + commonStyles[`hover-${DULLS_BACKGROUND_COLOR}-${iconColor}`]
37
37
  break
38
38
  default:
39
39
  break
@@ -82,7 +82,7 @@ ButtonFullRounded.propTypes = {
82
82
  /**
83
83
  * Effect on hover
84
84
  */
85
- hoverEffect: PropTypes.oneOf(['', BACKGROUND_COLOR_OPAQUE]),
85
+ hoverEffect: PropTypes.oneOf(['', DULLS_BACKGROUND_COLOR]),
86
86
  /**
87
87
  * bordered
88
88
  */
package/src/components/ButtonOnlyIcon.jsx CHANGED
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
4
4
  import styles from './Button.module.css'
5
5
  import commonStyles from './Common.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
- import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, LARGE, MEDIUM } from './constants'
7
+ import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM } from './constants'
8
8
 
9
9
  function ButtonOnlyIcon ({
10
10
  textClass,
@@ -50,8 +50,8 @@ function ButtonOnlyIcon ({
50
50
  if (!disabled) {
51
51
  if (hover) {
52
52
  switch (hoverEffect) {
53
- case BACKGROUND_COLOR_OPAQUE:
54
- setBackgroundClassName(restClassName() + ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${color}`])
53
+ case DULLS_BACKGROUND_COLOR:
54
+ setBackgroundClassName(restClassName() + ' ' + commonStyles[`hover-${DULLS_BACKGROUND_COLOR}-${color}`])
55
55
  break
56
56
  case BOX_SHADOW:
57
57
  setBackgroundClassName(restClassName() + ' ' + styles[`hover-${BOX_SHADOW}-${backgroundColor}`])
@@ -155,7 +155,7 @@ ButtonOnlyIcon.defaultProps = {
155
155
  disabled: false,
156
156
  size: LARGE,
157
157
  bold: false,
158
- hoverEffect: BACKGROUND_COLOR_OPAQUE,
158
+ hoverEffect: DULLS_BACKGROUND_COLOR,
159
159
  bordered: true,
160
160
  fullWidth: false,
161
161
  platformaticIcon: null,
package/src/components/Common.module.css CHANGED
@@ -196,6 +196,15 @@
196
196
  .background-color-rich-black {
197
197
  @apply bg-rich-black ;
198
198
  }
199
+ .background-color-anti-flash-white {
200
+ @apply bg-anti-flash-white ;
201
+ }
202
+ .background-color-fire-engine-red {
203
+ @apply bg-fire-engine-red ;
204
+ }
205
+ .background-color-alternate-dark-blue {
206
+ @apply bg-alternate-dark-blue ;
207
+ }
199
208
  .background-color-transparent{
200
209
  @apply bg-transparent;
201
210
  }
package/src/components/Modal.jsx CHANGED
@@ -15,7 +15,7 @@ import {
15
15
  MODAL_POPUP,
16
16
  MODAL_POPUP_V2,
17
17
  MAIN_DARK_BLUE,
18
- BACKGROUND_COLOR_OPAQUE,
18
+ DULLS_BACKGROUND_COLOR,
19
19
  LARGE,
20
20
  PROFILES,
21
21
  FREE,
@@ -142,7 +142,7 @@ function Modal ({
142
142
  iconName='CircleCloseIcon'
143
143
  iconSize={LARGE}
144
144
  iconColor={MAIN_DARK_BLUE}
145
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
145
+ hoverEffect={DULLS_BACKGROUND_COLOR}
146
146
  onClick={() => { setIsOpen(false) }}
147
147
  bordered={false}
148
148
  alt='Close'
@@ -168,7 +168,7 @@ function Modal ({
168
168
  iconName='CircleCloseIcon'
169
169
  iconSize={LARGE}
170
170
  iconColor={layout === MODAL_FULL_LIGHT ? MAIN_DARK_BLUE : WHITE}
171
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
171
+ hoverEffect={DULLS_BACKGROUND_COLOR}
172
172
  onClick={() => { setIsOpen(false) }}
173
173
  bordered={false}
174
174
  alt='Close'
@@ -190,7 +190,7 @@ function Modal ({
190
190
  iconName='CircleCloseIcon'
191
191
  iconSize={LARGE}
192
192
  iconColor={WHITE}
193
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
193
+ hoverEffect={DULLS_BACKGROUND_COLOR}
194
194
  onClick={() => { setIsOpen(false) }}
195
195
  bordered={false}
196
196
  alt='Close'
package/src/components/ModalStepsForward.jsx CHANGED
@@ -13,7 +13,7 @@ import {
13
13
  MODAL_LAYOUTS,
14
14
  MODAL_POPUP,
15
15
  MAIN_DARK_BLUE,
16
- BACKGROUND_COLOR_OPAQUE,
16
+ DULLS_BACKGROUND_COLOR,
17
17
  LARGE,
18
18
  PROFILES,
19
19
  MARGIN_0,
@@ -44,7 +44,7 @@ function ModalStepsForward ({ setIsOpen, right, stepper, left }) {
44
44
  iconName='CircleCloseIcon'
45
45
  iconSize={LARGE}
46
46
  iconColor={MAIN_DARK_BLUE}
47
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
47
+ hoverEffect={DULLS_BACKGROUND_COLOR}
48
48
  onClick={() => { setIsOpen(false) }}
49
49
  bordered={false}
50
50
  alt='Close'
package/src/components/Sidebar.jsx CHANGED
@@ -8,7 +8,7 @@ import ReactTooltip from 'react-tooltip'
8
8
  import HorizontalSeparator from './HorizontalSeparator'
9
9
  import PlatformaticIcon from './PlatformaticIcon'
10
10
  import PropTypes from 'prop-types'
11
- import { BACKGROUND_COLOR_OPAQUE, MEDIUM, WHITE } from './constants'
11
+ import { DULLS_BACKGROUND_COLOR, MEDIUM, WHITE } from './constants'
12
12
 
13
13
  function Sidebar (props) {
14
14
  const {
@@ -49,7 +49,7 @@ function Sidebar (props) {
49
49
  iconName='CircleArrowRightIcon'
50
50
  iconSize={MEDIUM}
51
51
  iconColor={WHITE}
52
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
52
+ hoverEffect={DULLS_BACKGROUND_COLOR}
53
53
  onClick={() => { setCollapsed(false) }}
54
54
  bordered={false}
55
55
  />
@@ -69,7 +69,7 @@ function Sidebar (props) {
69
69
  iconName='CircleArrowLeftIcon'
70
70
  iconSize={MEDIUM}
71
71
  iconColor={WHITE}
72
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
72
+ hoverEffect={DULLS_BACKGROUND_COLOR}
73
73
  onClick={() => { setCollapsed(true) }}
74
74
  bordered={false}
75
75
  />
@@ -130,7 +130,7 @@ function Sidebar (props) {
130
130
  bold
131
131
  size={MEDIUM}
132
132
  disabled={disableClickSettings}
133
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
133
+ hoverEffect={DULLS_BACKGROUND_COLOR}
134
134
  />
135
135
  )}
136
136
  </div>
package/src/components/SimpleMetric.jsx CHANGED
@@ -5,7 +5,7 @@ import BorderedBox from './BorderedBox'
5
5
  import styles from './SimpleMetric.module.css'
6
6
  import MetricValue from './MetricValue'
7
7
  import ButtonFullRounded from './ButtonFullRounded'
8
- import { BACKGROUND_COLOR_OPAQUE, MEDIUM, WHITE } from './constants'
8
+ import { DULLS_BACKGROUND_COLOR, MEDIUM, WHITE } from './constants'
9
9
 
10
10
  export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
11
11
  const withoutChildrenSingleMetric = !children ? styles.centerMetric : ''
@@ -13,7 +13,7 @@ export default function SimpleMetric ({ title, pre, color, unit, value, tooltip,
13
13
  <BorderedBox>
14
14
  <div className={styles.header}>
15
15
  <span className={styles.title}>{title}</span>
16
- <ButtonFullRounded hoverEffect={BACKGROUND_COLOR_OPAQUE} iconColor={WHITE} iconSize={MEDIUM} iconName='CircleExclamationIcon' tip={tooltip} onClick={() => {}} />
16
+ <ButtonFullRounded hoverEffect={DULLS_BACKGROUND_COLOR} iconColor={WHITE} iconSize={MEDIUM} iconName='CircleExclamationIcon' tip={tooltip} onClick={() => {}} />
17
17
  </div>
18
18
  <div className={withoutChildrenSingleMetric}>
19
19
  <MetricValue pre={pre} color={color} unit={unit} value={value} fontValue='large' />
package/src/components/constants.js CHANGED
@@ -10,6 +10,9 @@ export const TERTIARY_BLUE = 'tertiary-blue'
10
10
  export const ERROR_RED = 'error-red'
11
11
  export const WARNING_YELLOW = 'warning-yellow'
12
12
  export const RICH_BLACK = 'rich-black'
13
+ export const ANTI_FLASH_WHITE = 'anti-flash-white'
14
+ export const FIRE_ENGINE_RED = 'fire-engine-red'
15
+ export const ALTERNATE_DARK_BLUE = 'alternate-dark-blue'
13
16
 
14
17
  export const NONE = 'none'
15
18
  export const EXTRA_SMALL = 'extra-small'
@@ -20,12 +23,14 @@ export const EXTRA_LARGE = 'extra-large'
20
23
 
21
24
  export const SIZES = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE]
22
25
  export const PADDING_SIZES = [NONE, ...SIZES]
26
+ export const CHANGE_BACKGROUND_COLOR = 'background-color-change'
23
27
  export const BOX_SHADOW = 'box-shadow'
24
- export const BACKGROUND_COLOR_OPAQUE = 'background-color-opaque'
28
+ export const DULLS_BACKGROUND_COLOR = 'background-color-opaque'
25
29
  export const UNDERLINE = 'underline'
26
30
  export const FULL_WIDTH = 'full-width'
27
- export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDERLINE]
31
+ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERLINE, CHANGE_BACKGROUND_COLOR]
28
32
  export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
33
+ export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED, ALTERNATE_DARK_BLUE]
29
34
 
30
35
  export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE]
31
36
  export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK]
package/src/components/forms/InputWithSeparator.jsx CHANGED
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
4
4
  import inputStyles from './Input.module.css'
5
5
  import styles from './InputWithSeparator.module.css'
6
6
  import commonStyles from '../Common.module.css'
7
- import { BACKGROUND_COLOR_OPAQUE, ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, OPACITY_30, RICH_BLACK, SMALL, TRANSPARENT, WHITE } from '../constants'
7
+ import { DULLS_BACKGROUND_COLOR, ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, OPACITY_30, RICH_BLACK, SMALL, TRANSPARENT, WHITE } from '../constants'
8
8
  import BorderedBox from '../BorderedBox'
9
9
  import ButtonFullRounded from '../ButtonFullRounded'
10
10
 
@@ -18,6 +18,7 @@ function InputWithSeparator ({
18
18
  disabled,
19
19
  afterIcon,
20
20
  defaultValue,
21
+ defaultValueSeparator,
21
22
  value,
22
23
  separators,
23
24
  inputTextClassName
@@ -33,11 +34,8 @@ function InputWithSeparator ({
33
34
 
34
35
  useEffect(() => {
35
36
  if (defaultValue.length > 0) {
36
- let elements
37
- for (const separator of separators) {
38
- elements = defaultValue.split(separator).filter(e => e !== '')
39
- setChunks(prevChunks => [...prevChunks, ...elements])
40
- }
37
+ const elements = defaultValue.split(defaultValueSeparator).filter(e => e !== '')
38
+ setChunks(prevChunks => [...prevChunks, ...elements])
41
39
  }
42
40
  }, [])
43
41
 
@@ -161,7 +159,7 @@ function InputWithSeparator ({
161
159
  data-testid='after-icon'
162
160
  onClick={afterIcon.handleClick}
163
161
  iconSize={MEDIUM}
164
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
162
+ hoverEffect={DULLS_BACKGROUND_COLOR}
165
163
  disabled={afterIcon.disabled}
166
164
  />
167
165
  )}
@@ -188,6 +186,10 @@ InputWithSeparator.propTypes = {
188
186
  * defaultValue
189
187
  */
190
188
  defaultValue: PropTypes.string,
189
+ /**
190
+ * defaultValueSeparator
191
+ */
192
+ defaultValueSeparator: PropTypes.string,
191
193
  /**
192
194
  * separators
193
195
  */
@@ -227,6 +229,7 @@ InputWithSeparator.defaultProps = {
227
229
  placeholder: '',
228
230
  value: '',
229
231
  defaultValue: '',
232
+ defaultValueSeparator: ',',
230
233
  name: '',
231
234
  borderColor: MAIN_GREEN,
232
235
  backgroundColor: WHITE,
package/src/stories/Button.stories.jsx CHANGED
@@ -1,13 +1,12 @@
1
1
  'use strict'
2
2
  import React from 'react'
3
3
  import Button from '../components/Button'
4
- import { BOX_SHADOW, COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, LARGE, SIZES, WHITE } from '../components/constants'
4
+ import { ALTERNATE_DARK_BLUE, ANTI_FLASH_WHITE, BOX_SHADOW, CHANGE_BACKGROUND_COLOR, COLORS_BUTTON, ERROR_RED, FIRE_ENGINE_RED, HOVER_EFFECTS_BUTTONS, LARGE, RICH_BLACK, SIZES, WHITE } from '../components/constants'
5
5
 
6
6
  const divStyle = {
7
7
  width: '100%',
8
8
  height: 'auto',
9
- padding: '2px',
10
- backgroundColor: 'white'
9
+ padding: '2px'
11
10
  }
12
11
 
13
12
  export default {
@@ -122,3 +121,94 @@ AllFilled.args = {
122
121
  hoverEffect: BOX_SHADOW,
123
122
  bold: true
124
123
  }
124
+
125
+ const DesignSystem = (args) => {
126
+ return (
127
+ <div className='grid grid-cols-5 gap-2 items-center'>
128
+ <span className='text-sm text-white col-span-1'>Disabled</span>
129
+ <div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
130
+ <Button
131
+ color={RICH_BLACK}
132
+ backgroundColor={WHITE}
133
+ onClick={() => alert('clicked Disabled WHITE')}
134
+ bordered={false}
135
+ disabled
136
+ {...args}
137
+ />
138
+ <Button
139
+ color={WHITE}
140
+ backgroundColor={ERROR_RED}
141
+ onClick={() => alert('clicked Disabled ERROR_RED')}
142
+ bordered={false}
143
+ disabled
144
+ {...args}
145
+ />
146
+ </div>
147
+ <div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
148
+ <Button
149
+ color={WHITE}
150
+ backgroundColor={RICH_BLACK}
151
+ onClick={() => alert('clicked Disabled RICH_BLACK')}
152
+ bordered={false}
153
+ disabled
154
+ {...args}
155
+ />
156
+ <Button
157
+ color={WHITE}
158
+ backgroundColor={ERROR_RED}
159
+ onClick={() => alert('clicked Disabled ERROR_RED')}
160
+ bordered={false}
161
+ disabled
162
+ {...args}
163
+ />
164
+ </div>
165
+ <span className='text-sm text-white col-span-1'>Default</span>
166
+ <div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
167
+ <Button
168
+ color={RICH_BLACK}
169
+ backgroundColor={WHITE}
170
+ onClick={() => alert('clicked Default WHITE')}
171
+ hoverEffect={CHANGE_BACKGROUND_COLOR}
172
+ hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
173
+ bordered={false}
174
+ {...args}
175
+ />
176
+ <Button
177
+ color={WHITE}
178
+ backgroundColor={ERROR_RED}
179
+ onClick={() => alert('clicked Default ERROR_RED')}
180
+ hoverEffect={CHANGE_BACKGROUND_COLOR}
181
+ hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
182
+ bordered={false}
183
+ {...args}
184
+ />
185
+ </div>
186
+ <div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
187
+ <Button
188
+ color={WHITE}
189
+ backgroundColor={RICH_BLACK}
190
+ onClick={() => alert('clicked Default RICH_BLACK')}
191
+ bordered={false}
192
+ hoverEffect={CHANGE_BACKGROUND_COLOR}
193
+ hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_DARK_BLUE }}
194
+ {...args}
195
+ />
196
+ <Button
197
+ color={WHITE}
198
+ backgroundColor={ERROR_RED}
199
+ onClick={() => alert('clicked Default ERROR_RED')}
200
+ hoverEffect={CHANGE_BACKGROUND_COLOR}
201
+ hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
202
+ bordered={false}
203
+ {...args}
204
+ />
205
+ </div>
206
+ </div>
207
+ )
208
+ }
209
+
210
+ export const FigmaTemplate = DesignSystem.bind({})
211
+
212
+ FigmaTemplate.args = {
213
+ label: 'Sample label'
214
+ }
package/src/stories/ButtonOnlyIcon.stories.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict'
2
2
  import React from 'react'
3
3
  import ButtonOnlyIcon from '../components/ButtonOnlyIcon'
4
- import { COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, SIZES, WHITE, RICH_BLACK, BACKGROUND_COLOR_OPAQUE, SMALL } from '../components/constants'
4
+ import { COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, SIZES, WHITE, RICH_BLACK, DULLS_BACKGROUND_COLOR, SMALL } from '../components/constants'
5
5
 
6
6
  const divStyle = {
7
7
  width: '100%',
@@ -70,6 +70,6 @@ OnlyIcon.args = {
70
70
  color: WHITE,
71
71
  backgroundColor: RICH_BLACK,
72
72
  onClick: () => { alert('hit!') },
73
- hoverEffect: BACKGROUND_COLOR_OPAQUE,
73
+ hoverEffect: DULLS_BACKGROUND_COLOR,
74
74
  platformaticIcon: { size: SMALL, iconName: 'RunningIcon', color: WHITE }
75
75
  }
package/src/stories/forms/InputWithSeparator.stories.jsx CHANGED
@@ -101,7 +101,7 @@ DifferentsSeparators.args = {
101
101
  placeholder: 'Initial value',
102
102
  borderColor: 'main-dark-blue',
103
103
  separators: [',', ' '],
104
- defaultValue: 'test,test-1,test-2',
104
+ defaultValue: 'this,is,a,test,for,a,spac',
105
105
  afterIcon: {
106
106
  iconName: 'AddIcon',
107
107
  color: ERROR_RED,
package/tailwind.config.cjs CHANGED
@@ -44,7 +44,10 @@ module.exports = {
44
44
  transparent: 'transparent',
45
45
  'warning-yellow': '#FEB928',
46
46
  'rich-black': '#00050B',
47
- 'electric-purple': '#C61BE2'
47
+ 'electric-purple': '#C61BE2',
48
+ 'anti-flash-white': '#EDEDED',
49
+ 'fire-engine-red': '#D71919',
50
+ 'alternate-dark-blue': '#040607'
48
51
  },
49
52
  fontFamily: {
50
53
  sans: ['Montserrat'],
package/dist/assets/index-BixsHrYW.css DELETED
@@ -1 +0,0 @@
1
- ._input_9kufh_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.25rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_9kufh_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_9kufh_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_9kufh_10{fill:#21fa90}._fillWhite_9kufh_13{fill:#fff}._input_9kufh_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_9kufh_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_cdu2n_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_cdu2n_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_cdu2n_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_cdu2n_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_cdu2n_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_cdu2n_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_cdu2n_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_cdu2n_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--main-green-100_cdu2n_25{border-color:#21fa90}._bordered--main-dark-blue-100_cdu2n_28{border-color:#00283d}._bordered--tertiary-blue-100_cdu2n_31{border-color:#2588e4}._bordered--error-red-100_cdu2n_34{border-color:#fa2121}._bordered--warning-yellow-100_cdu2n_37{border-color:#feb928}._bordered--dark-blue-100_cdu2n_40{border-color:#00344f}._bordered--white-100_cdu2n_43{border-color:#fff}._bordered--main-green-70_cdu2n_46{border-color:#21fa90b3}._bordered--main-dark-blue-70_cdu2n_49{border-color:#00283db3}._bordered--tertiary-blue-70_cdu2n_52{border-color:#2588e4b3}._bordered--error-red-70_cdu2n_55{border-color:#fa2121b3}._bordered--warning-yellow-70_cdu2n_58{border-color:#feb928b3}._bordered--dark-blue-70_cdu2n_61{border-color:#00344fb3}._bordered--white-70_cdu2n_64{border-color:#ffffffb3}._bordered--main-green-30_cdu2n_67{border-color:#21fa904d}._bordered--main-dark-blue-30_cdu2n_70{border-color:#00283d4d}._bordered--error-red-30_cdu2n_73{border-color:#fa21214d}._bordered--warning-yellow-30_cdu2n_76{border-color:#feb9284d}._bordered--dark-blue-30_cdu2n_79{border-color:#00344f4d}._bordered--white-30_cdu2n_82{border-color:#ffffff4d}._bordered--tertiary-blue-30_cdu2n_85{border-color:#2588e44d}._bordered--main-green-20_cdu2n_88{border-color:#21fa9033}._bordered--main-dark-blue-20_cdu2n_91{border-color:#00283d33}._bordered--error-red-20_cdu2n_94{border-color:#fa212133}._bordered--warning-yellow-20_cdu2n_97{border-color:#feb92833}._bordered--dark-blue-20_cdu2n_100{border-color:#00344f33}._bordered--white-20_cdu2n_103{border-color:#fff3}._bordered--tertiary-blue-20_cdu2n_106{border-color:#2588e433}._bordered--main-dark-blue-15_cdu2n_109{border-color:#00283d26}._bordered--white-15_cdu2n_112{border-color:#ffffff26}._bordered--tertiary-blue-15_cdu2n_115{border-color:#2588e426}._bordered--main-dark-blue-10_cdu2n_28{border-color:#00283d1a}._bordered--white-10_cdu2n_43{border-color:#ffffff1a}._bordered--tertiary-blue-10_cdu2n_31{border-color:#2588e41a}._error-message_cdu2n_129{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_cdu2n_133{padding:.625rem .5rem}._text--error-red_cdu2n_137{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_cdu2n_140{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--dark-green_cdu2n_143{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--main-green_cdu2n_146{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--light-green_cdu2n_149{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--main-dark-blue_cdu2n_152{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--light-blue_cdu2n_155{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--base_cdu2n_159{font-size:1rem;line-height:1.5rem}._text--xs_cdu2n_162{font-size:.75rem;line-height:1rem}._background-color-main-green_cdu2n_166{--tw-bg-opacity: 1;background-color:rgb(33 250 144 / var(--tw-bg-opacity))}._background-color-light-green_cdu2n_169{--tw-bg-opacity: 1;background-color:rgb(33 241 144 / var(--tw-bg-opacity))}._background-color-dark-green_cdu2n_172{--tw-bg-opacity: 1;background-color:rgb(2 120 63 / var(--tw-bg-opacity))}._background-color-main-dark-blue_cdu2n_175{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._background-color-dark-blue_cdu2n_178{--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity))}._background-color-light-blue_cdu2n_181{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}._background-color-white_cdu2n_184{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}._background-color-error-red_cdu2n_187{--tw-bg-opacity: 1;background-color:rgb(250 33 33 / var(--tw-bg-opacity))}._background-color-tertiary-blue_cdu2n_190{--tw-bg-opacity: 1;background-color:rgb(37 136 228 / var(--tw-bg-opacity))}._background-color-warning-yellow_cdu2n_193{--tw-bg-opacity: 1;background-color:rgb(254 185 40 / var(--tw-bg-opacity))}._background-color-rich-black_cdu2n_196{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}._background-color-transparent_cdu2n_199{background-color:transparent}._background-color-opaque-100_cdu2n_202{--tw-bg-opacity: 1 !important}._background-color-opaque-60_cdu2n_205{--tw-bg-opacity: .6 !important}._background-color-opaque-30_cdu2n_208{--tw-bg-opacity: .3 !important}._background-color-opaque-20_cdu2n_211{--tw-bg-opacity: .2 !important}._background-color-opaque-10_cdu2n_202{--tw-bg-opacity: .1 !important}._apply-opacity-30_cdu2n_217{opacity:.3}._padding--none_cdu2n_220{padding:0}._padding--small_cdu2n_223{padding:.25rem}._padding--medium_cdu2n_226{padding:.5rem}._padding--large_cdu2n_229{padding:1rem}._padding--extra-large_cdu2n_232{padding:1.5rem}._hover-background-color-opaque-main-green_cdu2n_235:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_cdu2n_238:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_cdu2n_241:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_cdu2n_244:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_cdu2n_247:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_cdu2n_250:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_cdu2n_253:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_cdu2n_256:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_cdu2n_259:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-rich-black_cdu2n_262:hover{background-color:rgb(0 5 11 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_cdu2n_265{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_cdu2n_268{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_cdu2n_271{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_cdu2n_274{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_cdu2n_277{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_cdu2n_280{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-rich-black_cdu2n_283{background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_cdu2n_286{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_cdu2n_289{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_cdu2n_292{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_cdu2n_296{font-weight:600}._fontLight_cdu2n_299{font-weight:300}._fullWidth_cdu2n_302{width:100%}._error-red_1h5j9_1>circle,._error-red_1h5j9_1>ellipse,._error-red_1h5j9_1>rect,._error-red_1h5j9_1>line,._error-red_1h5j9_1>path{stroke:#fa2121}._main-dark-blue_1h5j9_9>circle,._main-dark-blue_1h5j9_9>ellipse,._main-dark-blue_1h5j9_9>rect,._main-dark-blue_1h5j9_9>line,._main-dark-blue_1h5j9_9>path{stroke:#00283d}._main-green_1h5j9_17>circle,._main-green_1h5j9_17>ellipse,._main-green_1h5j9_17>rect,._main-green_1h5j9_17>line,._main-green_1h5j9_17>path{stroke:#21fa90}._tertiary-blue_1h5j9_25>circle,._tertiary-blue_1h5j9_25>ellipse,._tertiary-blue_1h5j9_25>rect,._tertiary-blue_1h5j9_25>line,._tertiary-blue_1h5j9_25>path{stroke:#2588e4}._warning-yellow_1h5j9_33>circle,._warning-yellow_1h5j9_33>ellipse,._warning-yellow_1h5j9_33>rect,._warning-yellow_1h5j9_33>line,._warning-yellow_1h5j9_33>path{stroke:#feb928}._white_1h5j9_41>circle,._white_1h5j9_41>ellipse,._white_1h5j9_41>rect,._white_1h5j9_41>line,._white_1h5j9_41>path{stroke:#fff}._filled-white_1h5j9_49{fill:#fff}._filled-error-red_1h5j9_52{fill:#fa2121}._filled-main-dark-blue_1h5j9_55{fill:#00283d}._filled-main-green_1h5j9_58{fill:#21fa90}._filled-warning-yellow_1h5j9_61{fill:#feb928}._filled-tertiary-blue_1h5j9_64{fill:#2588e4}._fill-circle-green_1h5j9_68>circle{fill:#fff}._fill-circle-main-dark-blue_1h5j9_71>circle{fill:#00283d}._svgClassName_1h5j9_75{display:block;flex-shrink:0;overflow-clip-margin:unset}._iconDisabled_1h5j9_80{opacity:.3}._iconInactive_1h5j9_84{opacity:.7}._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,:host{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;-webkit-tap-highlight-color:transparent}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-feature-settings:normal;font-variation-settings:normal;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}