@platformatic/ui-components 0.2.19 → 0.3.1

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 (22) hide show
  1. package/dist/assets/index-BJ-rQoWR.css +1 -0
  2. package/dist/assets/index-CEKWpFeX.js +40 -0
  3. package/dist/index.html +2 -2
  4. package/index.js +2 -2
  5. package/package.json +1 -1
  6. package/src/components/Common.module.css +27 -1
  7. package/src/components/CopyAndPaste.jsx +36 -11
  8. package/src/components/PlatformaticIcon.jsx +0 -8
  9. package/src/components/Tooltip.jsx +94 -28
  10. package/src/components/Tooltip.module.css +57 -21
  11. package/src/components/TooltipAbsolute.jsx +124 -0
  12. package/src/components/TooltipAbsolute.module.css +88 -0
  13. package/src/components/constants.js +10 -4
  14. package/src/components/forms/Select.jsx +7 -6
  15. package/src/components/forms/Select.module.css +1 -4
  16. package/src/components/forms/SelectWithInput.module.css +1 -1
  17. package/src/stories/CopyAndPaste.stories.jsx +4 -2
  18. package/src/stories/Tooltip.stories.jsx +85 -0
  19. package/dist/assets/index-C-rgNKxt.css +0 -1
  20. package/dist/assets/index-DBEXX1ja.js +0 -40
  21. package/src/components/TooltipV2.jsx +0 -71
  22. package/src/components/TooltipV2.module.css +0 -31
package/src/components/forms/Select.jsx CHANGED
@@ -39,7 +39,6 @@ function Select ({
39
39
  let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
40
40
  inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
41
41
  optionsClassName += commonStyles[`background-color-${backgroundColor}`]
42
- const optionSelectedClassName = styles.optionSelected
43
42
 
44
43
  if (borderListColor) {
45
44
  optionsClassName += ' ' + styles['bordered-options']
@@ -50,7 +49,9 @@ function Select ({
50
49
  singleOptionClassName += ` ${styles['bordered-bottom']}`
51
50
  }
52
51
 
53
- const optionSpanClassName = commonStyles[`text--${mainColor}`]
52
+ const optionSpanClassName = commonStyles[`text--${mainColor}-70`]
53
+ const optionSpanClassNameSelected = commonStyles[`text--${mainColor}`]
54
+ const descriptionClassName = commonStyles[`text--${mainColor}`]
54
55
 
55
56
  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
56
57
 
@@ -110,7 +111,7 @@ function Select ({
110
111
  function renderLi (option, index, isOptionSelected) {
111
112
  return (
112
113
  <li
113
- key={index} className={`${isOptionSelected ? optionSelectedClassName : singleOptionClassName}`} onClick={() => {
114
+ key={index} className={singleOptionClassName} onClick={() => {
114
115
  if (option.notSelectable) {
115
116
  return handleNotSelectable(option.onClick && option.onClick())
116
117
  }
@@ -118,10 +119,10 @@ function Select ({
118
119
  }}
119
120
  >
120
121
  <div className={styles.liContent}>
121
- {option.iconName && <PlatformaticIcon iconName={option.iconName} color={option.iconColor || mainColor} size={option.iconSize ?? SMALL} onClick={null} />}
122
- <span className={optionSpanClassName}>{option.label}</span>
122
+ {option.iconName && <PlatformaticIcon iconName={option.iconName} color={option.iconColor || mainColor} size={option.iconSize ?? SMALL} onClick={null} inactive={!isOptionSelected} />}
123
+ <span className={isOptionSelected ? optionSpanClassNameSelected : optionSpanClassName}>{option.label}</span>
123
124
  </div>
124
- {option.descriptionValue && <span className={`${optionSpanClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
125
+ {option.descriptionValue && <span className={`${descriptionClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
125
126
  </li>
126
127
  )
127
128
  }
package/src/components/forms/Select.module.css CHANGED
@@ -23,10 +23,7 @@
23
23
  @apply border border-solid rounded
24
24
  }
25
25
  .option {
26
- @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
27
- }
28
- .optionSelected {
29
- @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4 bg-white/15;
26
+ @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4 rounded;
30
27
  }
31
28
  .bordered-bottom {
32
29
  @apply border-b
package/src/components/forms/SelectWithInput.module.css CHANGED
@@ -23,7 +23,7 @@
23
23
  @apply border border-solid rounded
24
24
  }
25
25
  .option {
26
- @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
26
+ @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4 rounded;
27
27
  }
28
28
  .bordered-bottom {
29
29
  @apply border-b
package/src/stories/CopyAndPaste.stories.jsx CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react'
2
2
  import CopyAndPaste from '../components/CopyAndPaste'
3
+ import { WHITE } from '../components/constants'
3
4
 
4
5
  const divStyle = {
5
6
  width: '100%',
6
7
  height: 'auto',
7
8
  padding: '50px',
8
- backgroundColor: 'white'
9
+ backgroundColor: 'transparent'
9
10
  }
10
11
 
11
12
  export default {
@@ -24,5 +25,6 @@ const Template = (args) => <CopyAndPaste {...args} />
24
25
  export const CopyAndPasteDefault = Template.bind({})
25
26
  CopyAndPasteDefault.args = {
26
27
  value: 'copy this value',
27
- tooltipLabel: 'Tooltip show'
28
+ tooltipLabel: 'Tooltip show',
29
+ color: WHITE
28
30
  }
package/src/stories/Tooltip.stories.jsx ADDED
@@ -0,0 +1,85 @@
1
+ 'use strict'
2
+ import React from 'react'
3
+ import Tooltip from '../components/Tooltip'
4
+ import { ANTI_FLASH_WHITE, CHANGE_BACKGROUND_COLOR, COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, RICH_BLACK, SIZES, WHITE } from '../components/constants'
5
+ import Button from '../components/Button'
6
+
7
+ const divStyle = {
8
+ width: '100%',
9
+ height: 'auto',
10
+ padding: '40px'
11
+ }
12
+
13
+ export default {
14
+ title: 'Platformatic/Tooltip',
15
+ component: Tooltip,
16
+ decorators: [
17
+ (Story) => (
18
+ <div style={divStyle}>
19
+ <Story />
20
+ </div>
21
+ )
22
+ ],
23
+ argTypes: {
24
+ label: {
25
+ type: 'string',
26
+ control: 'text'
27
+ },
28
+ bold: {
29
+ type: 'boolean'
30
+ },
31
+ backgroundColor: {
32
+ type: 'radio',
33
+ options: COLORS_BUTTON
34
+ },
35
+ color: {
36
+ type: 'radio',
37
+ options: COLORS_BUTTON
38
+ },
39
+ disabled: {
40
+ type: 'boolean'
41
+ },
42
+ size: {
43
+ type: 'string',
44
+ control: {
45
+ type: 'radio',
46
+ options: SIZES
47
+ }
48
+ },
49
+ hoverEffect: {
50
+ type: 'radio',
51
+ options: HOVER_EFFECTS_BUTTONS
52
+ },
53
+ bordered: {
54
+ type: 'boolean'
55
+ },
56
+ fullWidth: {
57
+ type: 'boolean'
58
+ },
59
+ selected: {
60
+ type: 'boolean'
61
+ }
62
+ }
63
+ }
64
+
65
+ const TemplateWithButton = (args) => (
66
+ <Tooltip {...args}>
67
+ <Button
68
+ color={RICH_BLACK}
69
+ backgroundColor={WHITE}
70
+ onClick={() => alert('clicked Disabled WHITE')}
71
+ bordered={false}
72
+ hoverEffect={CHANGE_BACKGROUND_COLOR}
73
+ hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
74
+ label='Test button'
75
+ />
76
+ </Tooltip>
77
+ )
78
+
79
+ export const TooltipBase = TemplateWithButton.bind({})
80
+ // More on args: https://storybook.js.org/docs/react/writing-stories/args
81
+ TooltipBase.args = {
82
+ content: (<span>I'm a tooltip over a button</span>),
83
+ delay: 100,
84
+ offset: 44
85
+ }
package/dist/assets/index-C-rgNKxt.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_1mnk2_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_1mnk2_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_1mnk2_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_1mnk2_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_1mnk2_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_1mnk2_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_1mnk2_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_1mnk2_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--main-green-100_1mnk2_25{border-color:#21fa90}._bordered--main-dark-blue-100_1mnk2_28{border-color:#00283d}._bordered--tertiary-blue-100_1mnk2_31{border-color:#2588e4}._bordered--error-red-100_1mnk2_34{border-color:#fa2121}._bordered--warning-yellow-100_1mnk2_37{border-color:#feb928}._bordered--dark-blue-100_1mnk2_40{border-color:#00344f}._bordered--white-100_1mnk2_43{border-color:#fff}._bordered--main-green-70_1mnk2_46{border-color:#21fa90b3}._bordered--main-dark-blue-70_1mnk2_49{border-color:#00283db3}._bordered--tertiary-blue-70_1mnk2_52{border-color:#2588e4b3}._bordered--error-red-70_1mnk2_55{border-color:#fa2121b3}._bordered--warning-yellow-70_1mnk2_58{border-color:#feb928b3}._bordered--dark-blue-70_1mnk2_61{border-color:#00344fb3}._bordered--white-70_1mnk2_64{border-color:#ffffffb3}._bordered--main-green-30_1mnk2_67{border-color:#21fa904d}._bordered--main-dark-blue-30_1mnk2_70{border-color:#00283d4d}._bordered--error-red-30_1mnk2_73{border-color:#fa21214d}._bordered--warning-yellow-30_1mnk2_76{border-color:#feb9284d}._bordered--dark-blue-30_1mnk2_79{border-color:#00344f4d}._bordered--white-30_1mnk2_82{border-color:#ffffff4d}._bordered--tertiary-blue-30_1mnk2_85{border-color:#2588e44d}._bordered--main-green-20_1mnk2_88{border-color:#21fa9033}._bordered--main-dark-blue-20_1mnk2_91{border-color:#00283d33}._bordered--error-red-20_1mnk2_94{border-color:#fa212133}._bordered--warning-yellow-20_1mnk2_97{border-color:#feb92833}._bordered--dark-blue-20_1mnk2_100{border-color:#00344f33}._bordered--white-20_1mnk2_103{border-color:#fff3}._bordered--tertiary-blue-20_1mnk2_106{border-color:#2588e433}._bordered--main-dark-blue-15_1mnk2_109{border-color:#00283d26}._bordered--white-15_1mnk2_112{border-color:#ffffff26}._bordered--tertiary-blue-15_1mnk2_115{border-color:#2588e426}._bordered--main-dark-blue-10_1mnk2_28{border-color:#00283d1a}._bordered--white-10_1mnk2_43{border-color:#ffffff1a}._bordered--tertiary-blue-10_1mnk2_31{border-color:#2588e41a}._error-message_1mnk2_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_1mnk2_133{padding:.625rem .5rem}._text--error-red_1mnk2_137{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_1mnk2_140{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--dark-green_1mnk2_143{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--main-green_1mnk2_146{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--light-green_1mnk2_149{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--main-dark-blue_1mnk2_152{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--light-blue_1mnk2_155{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--base_1mnk2_159{font-size:1rem;line-height:1.5rem}._text--xs_1mnk2_162{font-size:.75rem;line-height:1rem}._background-color-main-green_1mnk2_166{--tw-bg-opacity: 1;background-color:rgb(33 250 144 / var(--tw-bg-opacity))}._background-color-light-green_1mnk2_169{--tw-bg-opacity: 1;background-color:rgb(33 241 144 / var(--tw-bg-opacity))}._background-color-dark-green_1mnk2_172{--tw-bg-opacity: 1;background-color:rgb(2 120 63 / var(--tw-bg-opacity))}._background-color-main-dark-blue_1mnk2_175{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._background-color-dark-blue_1mnk2_178{--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity))}._background-color-light-blue_1mnk2_181{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}._background-color-white_1mnk2_184{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}._background-color-error-red_1mnk2_187{--tw-bg-opacity: 1;background-color:rgb(250 33 33 / var(--tw-bg-opacity))}._background-color-tertiary-blue_1mnk2_190{--tw-bg-opacity: 1;background-color:rgb(37 136 228 / var(--tw-bg-opacity))}._background-color-warning-yellow_1mnk2_193{--tw-bg-opacity: 1;background-color:rgb(254 185 40 / var(--tw-bg-opacity))}._background-color-rich-black_1mnk2_196{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}._background-color-anti-flash-white_1mnk2_199{--tw-bg-opacity: 1;background-color:rgb(237 237 237 / var(--tw-bg-opacity))}._background-color-fire-engine-red_1mnk2_202{--tw-bg-opacity: 1;background-color:rgb(215 25 25 / var(--tw-bg-opacity))}._background-color-alternate-rich-black_1mnk2_205{--tw-bg-opacity: 1;background-color:rgb(18 23 29 / var(--tw-bg-opacity))}._background-color-transparent_1mnk2_208{background-color:transparent}._background-color-opaque-100_1mnk2_211{--tw-bg-opacity: 1 !important}._background-color-opaque-60_1mnk2_214{--tw-bg-opacity: .6 !important}._background-color-opaque-30_1mnk2_217{--tw-bg-opacity: .3 !important}._background-color-opaque-20_1mnk2_220{--tw-bg-opacity: .2 !important}._background-color-opaque-10_1mnk2_211{--tw-bg-opacity: .1 !important}._apply-opacity-30_1mnk2_226{opacity:.3}._padding--none_1mnk2_229{padding:0}._padding--small_1mnk2_232{padding:.25rem}._padding--medium_1mnk2_235{padding:.5rem}._padding--large_1mnk2_238{padding:1rem}._padding--extra-large_1mnk2_241{padding:1.5rem}._hover-background-color-opaque-main-green_1mnk2_244:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_1mnk2_247:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_1mnk2_250:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_1mnk2_253:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_1mnk2_256:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_1mnk2_259:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_1mnk2_262:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_1mnk2_265:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_1mnk2_268:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-rich-black_1mnk2_271:hover{background-color:rgb(0 5 11 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_1mnk2_274{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_1mnk2_277{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_1mnk2_280{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_1mnk2_283{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_1mnk2_286{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_1mnk2_289{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-rich-black_1mnk2_292{background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_1mnk2_295{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_1mnk2_298{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_1mnk2_301{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_1mnk2_305{font-weight:600}._fontLight_1mnk2_308{font-weight:300}._fullWidth_1mnk2_311{width:100%}._rich-black_16d10_1>circle,._rich-black_16d10_1>ellipse,._rich-black_16d10_1>rect,._rich-black_16d10_1>line,._rich-black_16d10_1>path{stroke:#00050b}._error-red_16d10_9>circle,._error-red_16d10_9>ellipse,._error-red_16d10_9>rect,._error-red_16d10_9>line,._error-red_16d10_9>path{stroke:#fa2121}._main-dark-blue_16d10_17>circle,._main-dark-blue_16d10_17>ellipse,._main-dark-blue_16d10_17>rect,._main-dark-blue_16d10_17>line,._main-dark-blue_16d10_17>path{stroke:#00283d}._main-green_16d10_25>circle,._main-green_16d10_25>ellipse,._main-green_16d10_25>rect,._main-green_16d10_25>line,._main-green_16d10_25>path{stroke:#21fa90}._tertiary-blue_16d10_33>circle,._tertiary-blue_16d10_33>ellipse,._tertiary-blue_16d10_33>rect,._tertiary-blue_16d10_33>line,._tertiary-blue_16d10_33>path{stroke:#2588e4}._warning-yellow_16d10_41>circle,._warning-yellow_16d10_41>ellipse,._warning-yellow_16d10_41>rect,._warning-yellow_16d10_41>line,._warning-yellow_16d10_41>path{stroke:#feb928}._white_16d10_49>circle,._white_16d10_49>ellipse,._white_16d10_49>rect,._white_16d10_49>line,._white_16d10_49>path{stroke:#fff}._filled-rich-black_16d10_57{fill:#00050b}._filled-white_16d10_60{fill:#fff}._filled-error-red_16d10_63{fill:#fa2121}._filled-main-dark-blue_16d10_66{fill:#00283d}._filled-main-green_16d10_69{fill:#21fa90}._filled-warning-yellow_16d10_72{fill:#feb928}._filled-tertiary-blue_16d10_75{fill:#2588e4}._fill-circle-green_16d10_79>circle{fill:#fff}._fill-circle-main-dark-blue_16d10_82>circle{fill:#00283d}._svgClassName_16d10_85{display:block;flex-shrink:0;overflow-clip-margin:unset}._iconDisabled_16d10_90{opacity:.3}._iconInactive_16d10_94{opacity:.7}._cursorPointer_xwn7e_1{cursor:pointer}._pltTooltip_xwn7e_4{position:relative}._pltTooltipText_twtzs_2{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));text-align:center;--tw-text-opacity: 1;color:rgb(0 5 11 / var(--tw-text-opacity));margin-top:-65px;z-index:20;position:fixed;visibility:hidden;border-radius:6px;padding:.25rem;opacity:0;transition:opacity .3s}._pltTooltipText_twtzs_2:after{content:"";position:absolute;top:100%;border-width:5px;border-style:solid;border-color:white transparent transparent transparent}._leftPltTooltip_twtzs_23:after{left:5%;margin-left:-5px}._pltTooltipTextVisible_twtzs_28{visibility:visible;opacity:1}._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}}.visible{visibility:visible}.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}