@platformatic/ui-components 0.2.0 → 0.2.2
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.
- package/dist/assets/index-DGu0wALr.css +1 -0
- package/dist/assets/index-D_Ghoi-l.js +206 -0
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/components/Button.jsx +18 -4
- package/src/components/Button.module.css +6 -0
- package/src/components/Common.module.css +2 -2
- package/src/components/ModalDirectional.jsx +17 -3
- package/src/components/ModalDirectional.module.css +1 -1
- package/src/components/constants.js +5 -4
- package/src/components/icons/Icons.module.css +11 -1
- package/src/stories/Button.stories.jsx +286 -4
- package/tailwind.config.cjs +1 -1
- package/dist/assets/index-CiSL-R56.css +0 -1
- package/dist/assets/index-c6H43mm9.js +0 -206
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-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-D_Ghoi-l.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-DGu0wALr.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -15,9 +15,10 @@ import {
|
|
|
15
15
|
LARGE,
|
|
16
16
|
CHANGE_BACKGROUND_COLOR,
|
|
17
17
|
BUTTON_BACKGROUNDS_COLOR_HOVER,
|
|
18
|
+
ACTIVE_AND_INACTIVE_STATUS,
|
|
18
19
|
TRANSPARENT
|
|
19
20
|
} from './constants'
|
|
20
|
-
|
|
21
|
+
// ${inactive ? styles.inactive : styles.active}
|
|
21
22
|
function Button ({
|
|
22
23
|
textClass,
|
|
23
24
|
paddingClass,
|
|
@@ -55,6 +56,7 @@ function Button ({
|
|
|
55
56
|
}
|
|
56
57
|
if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
|
|
57
58
|
const [hover, setHover] = useState(false)
|
|
59
|
+
const [inactive, setInactive] = useState(false)
|
|
58
60
|
const [backgroundClassName, setBackgroundClassName] = useState(restClassName())
|
|
59
61
|
|
|
60
62
|
useEffect(() => {
|
|
@@ -73,25 +75,37 @@ function Button ({
|
|
|
73
75
|
case CHANGE_BACKGROUND_COLOR:
|
|
74
76
|
setBackgroundClassName(`${commonStyles['background-color-' + hoverEffectProperties.changeBackgroundColor]} `)
|
|
75
77
|
break
|
|
78
|
+
case ACTIVE_AND_INACTIVE_STATUS:
|
|
79
|
+
setInactive(false)
|
|
80
|
+
setBackgroundClassName(`${restClassName()} ${styles.active}`)
|
|
81
|
+
break
|
|
76
82
|
default:
|
|
77
83
|
break
|
|
78
84
|
}
|
|
79
85
|
} else {
|
|
80
|
-
|
|
86
|
+
if (hoverEffect === ACTIVE_AND_INACTIVE_STATUS) {
|
|
87
|
+
setInactive(true)
|
|
88
|
+
setBackgroundClassName(`${restClassName()} ${styles.inactive}`)
|
|
89
|
+
} else {
|
|
90
|
+
setBackgroundClassName(restClassName())
|
|
91
|
+
}
|
|
81
92
|
}
|
|
82
93
|
}
|
|
83
94
|
}, [disabled, hover, hoverEffect])
|
|
84
95
|
|
|
85
96
|
function restClassName () {
|
|
97
|
+
if (hoverEffect === ACTIVE_AND_INACTIVE_STATUS) {
|
|
98
|
+
return `${commonStyles['background-color-' + backgroundColor]} ${commonStyles['background-color-opaque-70']} `
|
|
99
|
+
}
|
|
86
100
|
return `${commonStyles['background-color-' + backgroundColor]} `
|
|
87
101
|
}
|
|
88
102
|
|
|
89
103
|
return (
|
|
90
104
|
<button className={`${buttonClassName} ${restClassName()}`} disabled={disabled} alt={label} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
|
|
91
105
|
<div className={`${contentClassName} ${backgroundClassName}`}>
|
|
92
|
-
{platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null}
|
|
106
|
+
{platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
|
|
93
107
|
<span className={styles.label}>{label}</span>
|
|
94
|
-
{platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null}
|
|
108
|
+
{platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
|
|
95
109
|
</div>
|
|
96
110
|
</button>
|
|
97
111
|
)
|
|
@@ -202,8 +202,8 @@
|
|
|
202
202
|
.background-color-fire-engine-red {
|
|
203
203
|
@apply bg-fire-engine-red ;
|
|
204
204
|
}
|
|
205
|
-
.background-color-alternate-
|
|
206
|
-
@apply bg-alternate-
|
|
205
|
+
.background-color-alternate-rich-black {
|
|
206
|
+
@apply bg-alternate-rich-black ;
|
|
207
207
|
}
|
|
208
208
|
.background-color-transparent{
|
|
209
209
|
@apply bg-transparent;
|
|
@@ -4,10 +4,12 @@ import PropTypes from 'prop-types'
|
|
|
4
4
|
import useEscapeKey from '../hooks/useEscapeKey'
|
|
5
5
|
import styles from './ModalDirectional.module.css'
|
|
6
6
|
import {
|
|
7
|
+
ACTIVE_AND_INACTIVE_STATUS,
|
|
8
|
+
RICH_BLACK,
|
|
7
9
|
SMALL,
|
|
8
10
|
WHITE
|
|
9
11
|
} from './constants'
|
|
10
|
-
import
|
|
12
|
+
import Button from './Button'
|
|
11
13
|
|
|
12
14
|
function ModalDirectional ({
|
|
13
15
|
setIsOpen,
|
|
@@ -41,8 +43,20 @@ function ModalDirectional ({
|
|
|
41
43
|
<div className={variantModalClassName}>
|
|
42
44
|
<div className={classNameLefty}>
|
|
43
45
|
<div className={styles.headerClassName}>
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
+
<Button
|
|
47
|
+
color={WHITE}
|
|
48
|
+
backgroundColor={RICH_BLACK}
|
|
49
|
+
onClick={() => closeModal()}
|
|
50
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
51
|
+
bordered={false}
|
|
52
|
+
platformaticIcon={{
|
|
53
|
+
iconName: 'ArrowLongLeftIcon',
|
|
54
|
+
size: SMALL,
|
|
55
|
+
color: WHITE
|
|
56
|
+
}}
|
|
57
|
+
label={title}
|
|
58
|
+
textClass={titleClassName}
|
|
59
|
+
/>
|
|
46
60
|
</div>
|
|
47
61
|
{children}
|
|
48
62
|
</div>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@apply fixed top-0 left-0 w-full h-full z-10 bg-rich-black/75;
|
|
3
3
|
}
|
|
4
4
|
.container {
|
|
5
|
-
@apply z-20 fixed top-0 -right-[100%] min-h-full h-full bg-rich-black border-solid border-white border-l;
|
|
5
|
+
@apply z-20 fixed top-0 -right-[100%] min-h-full h-full bg-rich-black border-solid border-white/30 border-l;
|
|
6
6
|
}
|
|
7
7
|
.normalLayout {
|
|
8
8
|
@apply max-w-[75%] min-w-[75%];
|
|
@@ -12,7 +12,7 @@ export const WARNING_YELLOW = 'warning-yellow'
|
|
|
12
12
|
export const RICH_BLACK = 'rich-black'
|
|
13
13
|
export const ANTI_FLASH_WHITE = 'anti-flash-white'
|
|
14
14
|
export const FIRE_ENGINE_RED = 'fire-engine-red'
|
|
15
|
-
export const
|
|
15
|
+
export const ALTERNATE_RICH_BLACK = 'alternate-rich-black'
|
|
16
16
|
|
|
17
17
|
export const NONE = 'none'
|
|
18
18
|
export const EXTRA_SMALL = 'extra-small'
|
|
@@ -26,13 +26,14 @@ export const PADDING_SIZES = [NONE, ...SIZES]
|
|
|
26
26
|
export const CHANGE_BACKGROUND_COLOR = 'background-color-change'
|
|
27
27
|
export const BOX_SHADOW = 'box-shadow'
|
|
28
28
|
export const DULLS_BACKGROUND_COLOR = 'background-color-opaque'
|
|
29
|
+
export const ACTIVE_AND_INACTIVE_STATUS = 'active-and-inactive-status'
|
|
29
30
|
export const UNDERLINE = 'underline'
|
|
30
31
|
export const FULL_WIDTH = 'full-width'
|
|
31
|
-
export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERLINE, CHANGE_BACKGROUND_COLOR]
|
|
32
|
+
export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERLINE, CHANGE_BACKGROUND_COLOR, ACTIVE_AND_INACTIVE_STATUS]
|
|
32
33
|
export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
|
|
33
|
-
export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED,
|
|
34
|
+
export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED, ALTERNATE_RICH_BLACK]
|
|
34
35
|
|
|
35
|
-
export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE]
|
|
36
|
+
export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK]
|
|
36
37
|
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]
|
|
37
38
|
export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE]
|
|
38
39
|
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
.rich-black > circle,
|
|
2
|
+
.rich-black > ellipse,
|
|
3
|
+
.rich-black > rect,
|
|
4
|
+
.rich-black > line,
|
|
5
|
+
.rich-black > path {
|
|
6
|
+
@apply stroke-rich-black;
|
|
7
|
+
}
|
|
8
|
+
|
|
1
9
|
.error-red > circle,
|
|
2
10
|
.error-red > ellipse,
|
|
3
11
|
.error-red > rect,
|
|
@@ -46,6 +54,9 @@
|
|
|
46
54
|
@apply stroke-white;
|
|
47
55
|
}
|
|
48
56
|
|
|
57
|
+
.filled-rich-black {
|
|
58
|
+
@apply fill-rich-black
|
|
59
|
+
}
|
|
49
60
|
.filled-white {
|
|
50
61
|
@apply fill-white
|
|
51
62
|
}
|
|
@@ -71,7 +82,6 @@
|
|
|
71
82
|
.fill-circle-main-dark-blue > circle {
|
|
72
83
|
@apply fill-main-dark-blue;
|
|
73
84
|
}
|
|
74
|
-
|
|
75
85
|
.svgClassName {
|
|
76
86
|
@apply block shrink-0;
|
|
77
87
|
overflow-clip-margin: unset;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import Button from '../components/Button'
|
|
4
|
-
import {
|
|
4
|
+
import { ALTERNATE_RICH_BLACK, ANTI_FLASH_WHITE, BOX_SHADOW, CHANGE_BACKGROUND_COLOR, COLORS_BUTTON, ERROR_RED, FIRE_ENGINE_RED, HOVER_EFFECTS_BUTTONS, LARGE, RICH_BLACK, SIZES, WHITE, ACTIVE_AND_INACTIVE_STATUS, MEDIUM } from '../components/constants'
|
|
5
5
|
|
|
6
6
|
const divStyle = {
|
|
7
7
|
width: '100%',
|
|
@@ -125,7 +125,7 @@ AllFilled.args = {
|
|
|
125
125
|
const DesignSystem = (args) => {
|
|
126
126
|
return (
|
|
127
127
|
<div className='grid grid-cols-5 gap-2 items-center'>
|
|
128
|
-
<span className='text-sm text-white col-span-1'>Disabled</span>
|
|
128
|
+
<span className='text-sm text-white col-span-1'>Disabled with Background Color</span>
|
|
129
129
|
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
130
130
|
<Button
|
|
131
131
|
color={RICH_BLACK}
|
|
@@ -133,6 +133,8 @@ const DesignSystem = (args) => {
|
|
|
133
133
|
onClick={() => alert('clicked Disabled WHITE')}
|
|
134
134
|
bordered={false}
|
|
135
135
|
disabled
|
|
136
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
137
|
+
hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
|
|
136
138
|
{...args}
|
|
137
139
|
/>
|
|
138
140
|
<Button
|
|
@@ -141,6 +143,8 @@ const DesignSystem = (args) => {
|
|
|
141
143
|
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
142
144
|
bordered={false}
|
|
143
145
|
disabled
|
|
146
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
147
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
144
148
|
{...args}
|
|
145
149
|
/>
|
|
146
150
|
</div>
|
|
@@ -151,6 +155,8 @@ const DesignSystem = (args) => {
|
|
|
151
155
|
onClick={() => alert('clicked Disabled RICH_BLACK')}
|
|
152
156
|
bordered={false}
|
|
153
157
|
disabled
|
|
158
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
159
|
+
hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
|
|
154
160
|
{...args}
|
|
155
161
|
/>
|
|
156
162
|
<Button
|
|
@@ -159,10 +165,106 @@ const DesignSystem = (args) => {
|
|
|
159
165
|
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
160
166
|
bordered={false}
|
|
161
167
|
disabled
|
|
168
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
169
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
162
170
|
{...args}
|
|
163
171
|
/>
|
|
164
172
|
</div>
|
|
165
|
-
<span className='text-sm text-white col-span-1'>Default</span>
|
|
173
|
+
<span className='text-sm text-white col-span-1'>Default with Background Color</span>
|
|
174
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
175
|
+
<Button
|
|
176
|
+
color={RICH_BLACK}
|
|
177
|
+
backgroundColor={WHITE}
|
|
178
|
+
onClick={() => alert('clicked Default WHITE')}
|
|
179
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
180
|
+
hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
|
|
181
|
+
bordered={false}
|
|
182
|
+
{...args}
|
|
183
|
+
/>
|
|
184
|
+
<Button
|
|
185
|
+
color={WHITE}
|
|
186
|
+
backgroundColor={ERROR_RED}
|
|
187
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
188
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
189
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
190
|
+
bordered={false}
|
|
191
|
+
{...args}
|
|
192
|
+
/>
|
|
193
|
+
</div>
|
|
194
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
195
|
+
<Button
|
|
196
|
+
color={WHITE}
|
|
197
|
+
backgroundColor={RICH_BLACK}
|
|
198
|
+
onClick={() => alert('clicked Default RICH_BLACK')}
|
|
199
|
+
bordered={false}
|
|
200
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
201
|
+
hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
|
|
202
|
+
{...args}
|
|
203
|
+
/>
|
|
204
|
+
<Button
|
|
205
|
+
color={WHITE}
|
|
206
|
+
backgroundColor={ERROR_RED}
|
|
207
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
208
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
209
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
210
|
+
bordered={false}
|
|
211
|
+
{...args}
|
|
212
|
+
/>
|
|
213
|
+
</div>
|
|
214
|
+
<span className='text-sm text-white col-span-1'>Disabled with Background Color 2</span>
|
|
215
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
216
|
+
<Button
|
|
217
|
+
color={RICH_BLACK}
|
|
218
|
+
backgroundColor={WHITE}
|
|
219
|
+
onClick={() => alert('clicked Disabled WHITE')}
|
|
220
|
+
bordered={false}
|
|
221
|
+
disabled
|
|
222
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
223
|
+
hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
|
|
224
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
225
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
226
|
+
{...args}
|
|
227
|
+
/>
|
|
228
|
+
<Button
|
|
229
|
+
color={WHITE}
|
|
230
|
+
backgroundColor={ERROR_RED}
|
|
231
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
232
|
+
bordered={false}
|
|
233
|
+
disabled
|
|
234
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
235
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
236
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
237
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
238
|
+
{...args}
|
|
239
|
+
/>
|
|
240
|
+
</div>
|
|
241
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
242
|
+
<Button
|
|
243
|
+
color={WHITE}
|
|
244
|
+
backgroundColor={RICH_BLACK}
|
|
245
|
+
onClick={() => alert('clicked Disabled RICH_BLACK')}
|
|
246
|
+
bordered={false}
|
|
247
|
+
disabled
|
|
248
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
249
|
+
hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
|
|
250
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
251
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
252
|
+
{...args}
|
|
253
|
+
/>
|
|
254
|
+
<Button
|
|
255
|
+
color={WHITE}
|
|
256
|
+
backgroundColor={ERROR_RED}
|
|
257
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
258
|
+
bordered={false}
|
|
259
|
+
disabled
|
|
260
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
261
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
262
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
263
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
264
|
+
{...args}
|
|
265
|
+
/>
|
|
266
|
+
</div>
|
|
267
|
+
<span className='text-sm text-white col-span-1'>Default with Background Color 2</span>
|
|
166
268
|
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
167
269
|
<Button
|
|
168
270
|
color={RICH_BLACK}
|
|
@@ -171,6 +273,8 @@ const DesignSystem = (args) => {
|
|
|
171
273
|
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
172
274
|
hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
|
|
173
275
|
bordered={false}
|
|
276
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
277
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
174
278
|
{...args}
|
|
175
279
|
/>
|
|
176
280
|
<Button
|
|
@@ -180,6 +284,8 @@ const DesignSystem = (args) => {
|
|
|
180
284
|
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
181
285
|
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
182
286
|
bordered={false}
|
|
287
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
288
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
183
289
|
{...args}
|
|
184
290
|
/>
|
|
185
291
|
</div>
|
|
@@ -190,7 +296,9 @@ const DesignSystem = (args) => {
|
|
|
190
296
|
onClick={() => alert('clicked Default RICH_BLACK')}
|
|
191
297
|
bordered={false}
|
|
192
298
|
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
193
|
-
hoverEffectProperties={{ changeBackgroundColor:
|
|
299
|
+
hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
|
|
300
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
301
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
194
302
|
{...args}
|
|
195
303
|
/>
|
|
196
304
|
<Button
|
|
@@ -200,6 +308,180 @@ const DesignSystem = (args) => {
|
|
|
200
308
|
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
201
309
|
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
202
310
|
bordered={false}
|
|
311
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
312
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
313
|
+
{...args}
|
|
314
|
+
/>
|
|
315
|
+
</div>
|
|
316
|
+
<span className='text-sm text-white col-span-1'>Disabled </span>
|
|
317
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
318
|
+
<Button
|
|
319
|
+
color={WHITE}
|
|
320
|
+
backgroundColor={RICH_BLACK}
|
|
321
|
+
onClick={() => alert('clicked Disabled WHITE')}
|
|
322
|
+
bordered={false}
|
|
323
|
+
disabled
|
|
324
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
325
|
+
{...args}
|
|
326
|
+
/>
|
|
327
|
+
<Button
|
|
328
|
+
color={ERROR_RED}
|
|
329
|
+
backgroundColor={RICH_BLACK}
|
|
330
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
331
|
+
bordered={false}
|
|
332
|
+
disabled
|
|
333
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
334
|
+
{...args}
|
|
335
|
+
/>
|
|
336
|
+
</div>
|
|
337
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
338
|
+
<Button
|
|
339
|
+
color={RICH_BLACK}
|
|
340
|
+
backgroundColor={WHITE}
|
|
341
|
+
onClick={() => alert('clicked Disabled RICH_BLACK')}
|
|
342
|
+
bordered={false}
|
|
343
|
+
disabled
|
|
344
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
345
|
+
{...args}
|
|
346
|
+
/>
|
|
347
|
+
<Button
|
|
348
|
+
color={ERROR_RED}
|
|
349
|
+
backgroundColor={WHITE}
|
|
350
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
351
|
+
bordered={false}
|
|
352
|
+
disabled
|
|
353
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
354
|
+
{...args}
|
|
355
|
+
/>
|
|
356
|
+
</div>
|
|
357
|
+
<span className='text-sm text-white col-span-1'>Default</span>
|
|
358
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
359
|
+
<Button
|
|
360
|
+
color={WHITE}
|
|
361
|
+
backgroundColor={RICH_BLACK}
|
|
362
|
+
onClick={() => alert('clicked Default WHITE')}
|
|
363
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
364
|
+
bordered={false}
|
|
365
|
+
{...args}
|
|
366
|
+
/>
|
|
367
|
+
<Button
|
|
368
|
+
color={ERROR_RED}
|
|
369
|
+
backgroundColor={RICH_BLACK}
|
|
370
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
371
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
372
|
+
bordered={false}
|
|
373
|
+
{...args}
|
|
374
|
+
/>
|
|
375
|
+
</div>
|
|
376
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
377
|
+
<Button
|
|
378
|
+
color={RICH_BLACK}
|
|
379
|
+
backgroundColor={WHITE}
|
|
380
|
+
onClick={() => alert('clicked Default RICH_BLACK')}
|
|
381
|
+
bordered={false}
|
|
382
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
383
|
+
{...args}
|
|
384
|
+
/>
|
|
385
|
+
<Button
|
|
386
|
+
color={ERROR_RED}
|
|
387
|
+
backgroundColor={WHITE}
|
|
388
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
389
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
390
|
+
bordered={false}
|
|
391
|
+
{...args}
|
|
392
|
+
/>
|
|
393
|
+
</div>
|
|
394
|
+
<span className='text-sm text-white col-span-1'>Disabled </span>
|
|
395
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
396
|
+
<Button
|
|
397
|
+
color={WHITE}
|
|
398
|
+
backgroundColor={RICH_BLACK}
|
|
399
|
+
onClick={() => alert('clicked Disabled WHITE')}
|
|
400
|
+
bordered={false}
|
|
401
|
+
disabled
|
|
402
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
403
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
404
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
405
|
+
{...args}
|
|
406
|
+
/>
|
|
407
|
+
<Button
|
|
408
|
+
color={ERROR_RED}
|
|
409
|
+
backgroundColor={RICH_BLACK}
|
|
410
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
411
|
+
bordered={false}
|
|
412
|
+
disabled
|
|
413
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
414
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
415
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
416
|
+
{...args}
|
|
417
|
+
/>
|
|
418
|
+
</div>
|
|
419
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
420
|
+
<Button
|
|
421
|
+
color={RICH_BLACK}
|
|
422
|
+
backgroundColor={WHITE}
|
|
423
|
+
onClick={() => alert('clicked Disabled RICH_BLACK')}
|
|
424
|
+
bordered={false}
|
|
425
|
+
disabled
|
|
426
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
427
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
428
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
429
|
+
{...args}
|
|
430
|
+
/>
|
|
431
|
+
<Button
|
|
432
|
+
color={ERROR_RED}
|
|
433
|
+
backgroundColor={WHITE}
|
|
434
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
435
|
+
bordered={false}
|
|
436
|
+
disabled
|
|
437
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
438
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
439
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
440
|
+
{...args}
|
|
441
|
+
/>
|
|
442
|
+
</div>
|
|
443
|
+
<span className='text-sm text-white col-span-1'>Default</span>
|
|
444
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
445
|
+
<Button
|
|
446
|
+
color={WHITE}
|
|
447
|
+
backgroundColor={RICH_BLACK}
|
|
448
|
+
onClick={() => alert('clicked Default WHITE')}
|
|
449
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
450
|
+
bordered={false}
|
|
451
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
452
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
453
|
+
{...args}
|
|
454
|
+
/>
|
|
455
|
+
<Button
|
|
456
|
+
color={ERROR_RED}
|
|
457
|
+
backgroundColor={RICH_BLACK}
|
|
458
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
459
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
460
|
+
bordered={false}
|
|
461
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
462
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
463
|
+
{...args}
|
|
464
|
+
/>
|
|
465
|
+
</div>
|
|
466
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
467
|
+
<Button
|
|
468
|
+
color={RICH_BLACK}
|
|
469
|
+
backgroundColor={WHITE}
|
|
470
|
+
onClick={() => alert('clicked Default RICH_BLACK')}
|
|
471
|
+
bordered={false}
|
|
472
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
473
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
474
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
475
|
+
{...args}
|
|
476
|
+
/>
|
|
477
|
+
<Button
|
|
478
|
+
color={ERROR_RED}
|
|
479
|
+
backgroundColor={WHITE}
|
|
480
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
481
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
482
|
+
bordered={false}
|
|
483
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
484
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
203
485
|
{...args}
|
|
204
486
|
/>
|
|
205
487
|
</div>
|
package/tailwind.config.cjs
CHANGED
|
@@ -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_gyw1d_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_gyw1d_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_gyw1d_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_gyw1d_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_gyw1d_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_gyw1d_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_gyw1d_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_gyw1d_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--main-green-100_gyw1d_25{border-color:#21fa90}._bordered--main-dark-blue-100_gyw1d_28{border-color:#00283d}._bordered--tertiary-blue-100_gyw1d_31{border-color:#2588e4}._bordered--error-red-100_gyw1d_34{border-color:#fa2121}._bordered--warning-yellow-100_gyw1d_37{border-color:#feb928}._bordered--dark-blue-100_gyw1d_40{border-color:#00344f}._bordered--white-100_gyw1d_43{border-color:#fff}._bordered--main-green-70_gyw1d_46{border-color:#21fa90b3}._bordered--main-dark-blue-70_gyw1d_49{border-color:#00283db3}._bordered--tertiary-blue-70_gyw1d_52{border-color:#2588e4b3}._bordered--error-red-70_gyw1d_55{border-color:#fa2121b3}._bordered--warning-yellow-70_gyw1d_58{border-color:#feb928b3}._bordered--dark-blue-70_gyw1d_61{border-color:#00344fb3}._bordered--white-70_gyw1d_64{border-color:#ffffffb3}._bordered--main-green-30_gyw1d_67{border-color:#21fa904d}._bordered--main-dark-blue-30_gyw1d_70{border-color:#00283d4d}._bordered--error-red-30_gyw1d_73{border-color:#fa21214d}._bordered--warning-yellow-30_gyw1d_76{border-color:#feb9284d}._bordered--dark-blue-30_gyw1d_79{border-color:#00344f4d}._bordered--white-30_gyw1d_82{border-color:#ffffff4d}._bordered--tertiary-blue-30_gyw1d_85{border-color:#2588e44d}._bordered--main-green-20_gyw1d_88{border-color:#21fa9033}._bordered--main-dark-blue-20_gyw1d_91{border-color:#00283d33}._bordered--error-red-20_gyw1d_94{border-color:#fa212133}._bordered--warning-yellow-20_gyw1d_97{border-color:#feb92833}._bordered--dark-blue-20_gyw1d_100{border-color:#00344f33}._bordered--white-20_gyw1d_103{border-color:#fff3}._bordered--tertiary-blue-20_gyw1d_106{border-color:#2588e433}._bordered--main-dark-blue-15_gyw1d_109{border-color:#00283d26}._bordered--white-15_gyw1d_112{border-color:#ffffff26}._bordered--tertiary-blue-15_gyw1d_115{border-color:#2588e426}._bordered--main-dark-blue-10_gyw1d_28{border-color:#00283d1a}._bordered--white-10_gyw1d_43{border-color:#ffffff1a}._bordered--tertiary-blue-10_gyw1d_31{border-color:#2588e41a}._error-message_gyw1d_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_gyw1d_133{padding:.625rem .5rem}._text--error-red_gyw1d_137{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_gyw1d_140{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--dark-green_gyw1d_143{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--main-green_gyw1d_146{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--light-green_gyw1d_149{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--main-dark-blue_gyw1d_152{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--light-blue_gyw1d_155{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--base_gyw1d_159{font-size:1rem;line-height:1.5rem}._text--xs_gyw1d_162{font-size:.75rem;line-height:1rem}._background-color-main-green_gyw1d_166{--tw-bg-opacity: 1;background-color:rgb(33 250 144 / var(--tw-bg-opacity))}._background-color-light-green_gyw1d_169{--tw-bg-opacity: 1;background-color:rgb(33 241 144 / var(--tw-bg-opacity))}._background-color-dark-green_gyw1d_172{--tw-bg-opacity: 1;background-color:rgb(2 120 63 / var(--tw-bg-opacity))}._background-color-main-dark-blue_gyw1d_175{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._background-color-dark-blue_gyw1d_178{--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity))}._background-color-light-blue_gyw1d_181{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}._background-color-white_gyw1d_184{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}._background-color-error-red_gyw1d_187{--tw-bg-opacity: 1;background-color:rgb(250 33 33 / var(--tw-bg-opacity))}._background-color-tertiary-blue_gyw1d_190{--tw-bg-opacity: 1;background-color:rgb(37 136 228 / var(--tw-bg-opacity))}._background-color-warning-yellow_gyw1d_193{--tw-bg-opacity: 1;background-color:rgb(254 185 40 / var(--tw-bg-opacity))}._background-color-rich-black_gyw1d_196{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}._background-color-anti-flash-white_gyw1d_199{--tw-bg-opacity: 1;background-color:rgb(237 237 237 / var(--tw-bg-opacity))}._background-color-fire-engine-red_gyw1d_202{--tw-bg-opacity: 1;background-color:rgb(215 25 25 / var(--tw-bg-opacity))}._background-color-alternate-dark-blue_gyw1d_205{--tw-bg-opacity: 1;background-color:rgb(4 6 7 / var(--tw-bg-opacity))}._background-color-transparent_gyw1d_208{background-color:transparent}._background-color-opaque-100_gyw1d_211{--tw-bg-opacity: 1 !important}._background-color-opaque-60_gyw1d_214{--tw-bg-opacity: .6 !important}._background-color-opaque-30_gyw1d_217{--tw-bg-opacity: .3 !important}._background-color-opaque-20_gyw1d_220{--tw-bg-opacity: .2 !important}._background-color-opaque-10_gyw1d_211{--tw-bg-opacity: .1 !important}._apply-opacity-30_gyw1d_226{opacity:.3}._padding--none_gyw1d_229{padding:0}._padding--small_gyw1d_232{padding:.25rem}._padding--medium_gyw1d_235{padding:.5rem}._padding--large_gyw1d_238{padding:1rem}._padding--extra-large_gyw1d_241{padding:1.5rem}._hover-background-color-opaque-main-green_gyw1d_244:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_gyw1d_247:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_gyw1d_250:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_gyw1d_253:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_gyw1d_256:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_gyw1d_259:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_gyw1d_262:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_gyw1d_265:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_gyw1d_268:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-rich-black_gyw1d_271:hover{background-color:rgb(0 5 11 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_gyw1d_274{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_gyw1d_277{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_gyw1d_280{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_gyw1d_283{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_gyw1d_286{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_gyw1d_289{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-rich-black_gyw1d_292{background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_gyw1d_295{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_gyw1d_298{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_gyw1d_301{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_gyw1d_305{font-weight:600}._fontLight_gyw1d_308{font-weight:300}._fullWidth_gyw1d_311{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}.col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.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-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.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}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.border{border-width:1px}.border-0{border-width:0px}.bg-rich-black{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-2{padding:.5rem}.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}
|