demio-ui 2.0.11 → 2.1.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/README.md +148 -13
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/index.js +3 -3
- package/dist/cjs/types/src/components/Toast/Toast.d.ts +6 -0
- package/dist/cjs/types/src/components/Toast/index.d.ts +1 -0
- package/dist/cjs/types/src/icons/index.d.ts +5 -1
- package/dist/esm/index.css +1 -1
- package/dist/esm/index.js +3 -3
- package/dist/esm/types/src/components/Toast/Toast.d.ts +6 -0
- package/dist/esm/types/src/components/Toast/index.d.ts +1 -0
- package/dist/esm/types/src/icons/index.d.ts +5 -1
- package/dist/types.d.ts +247 -234
- package/package.json +6 -4
package/README.md
CHANGED
|
@@ -1,35 +1,170 @@
|
|
|
1
|
-
# Demio UI
|
|
1
|
+
# Demio React UI Components Library
|
|
2
2
|
|
|
3
|
-
As a small team, we need to
|
|
3
|
+
As a small team, we need to build and maintain our UI library quickly and with a high level of quality. These are the tools and processes we use to achieve this.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Table of Contents
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
1. [Project Roadmap](#project-roadmap)
|
|
8
|
+
2. [Getting Started](#getting-started)
|
|
9
|
+
3. [Tools](#tools)
|
|
10
|
+
4. [VS Code setup](#vs-code-setup)
|
|
11
|
+
5. [Project Structure](#project-structure)
|
|
12
|
+
6. [Component Development](#component-development)
|
|
13
|
+
7. [Styling](#styling)
|
|
14
|
+
8. [Storybook](#storybook)
|
|
15
|
+
9. [Testing](#testing)
|
|
16
|
+
10. [Publishing](#publishing)
|
|
17
|
+
|
|
18
|
+
## Project Roadmap
|
|
19
|
+
|
|
20
|
+
- add www.chromatic.com integration to include designer in the UI components reviewing process
|
|
21
|
+
- add CSS variables to variables.css from [Figma](<https://www.figma.com/file/cIDRvlVWwtmu3wCrFZ27IY/Demio-Design-Kit-(New)?node-id=5162%3A8032&mode=dev>)
|
|
22
|
+
- add color palette `--demio-ui-color-{color-name}-{color-shade}`
|
|
23
|
+
- add font sizes `--demio-ui-text-{size-name}`
|
|
24
|
+
- add font families `--demio-ui-font-{font-name}`
|
|
25
|
+
- add elevations (shadows) `--demio-ui-shadow-{elevation-name}`
|
|
26
|
+
- create a new components ( one MR for one component implementation)
|
|
27
|
+
|
|
28
|
+
- `<Icon />` - SVG icon component
|
|
29
|
+
- all SVG styles (including color and size) should be managed by CSS
|
|
30
|
+
|
|
31
|
+
- review Rollup configuration for CSS modules to add readable class names for components(possible switch to Webpack)
|
|
32
|
+
- compare NewButton component with the design and replace Button with props updating at UD and Room apps
|
|
33
|
+
- all existing components should be aligned with the current design( + update styles using CSS variables)
|
|
34
|
+
- review and improve test coverage
|
|
35
|
+
|
|
36
|
+
## Getting Started
|
|
37
|
+
|
|
38
|
+
To get started with the `Demio React UI Components Library`, follow these steps:
|
|
39
|
+
|
|
40
|
+
1. Clone the repository: `git clone git@gitlab.com:banzai_io/demio/demio-ui.git`
|
|
41
|
+
2. Install dependencies: `npm install`
|
|
42
|
+
3. Run Storybook: `npm run storybook` and open [http://localhost:6006](http://localhost:6006) in your browser if it doesn't open automatically.
|
|
14
43
|
|
|
15
44
|
## Tools
|
|
16
45
|
|
|
17
46
|
- [TypeScript](https://www.typescriptlang.org/) - strongly typed programming language that builds on JavaScript
|
|
18
|
-
- [Rollup]
|
|
47
|
+
- [Rollup](https://rollupjs.org/) - module bundler like Webpack. While webpack and Rollup can achieve similar outcomes based on their configurations, webpack is commonly utilized for bundling applications, whereas Rollup is especially well-suited for bundling libraries.
|
|
19
48
|
- [Storybook](https://storybook.js.org/) - UI library development environment and component showcase
|
|
20
49
|
- Maybe [chromatic](https://www.chromatic.com/) - visual regression testing for Storybook
|
|
21
50
|
- [Prettier](https://prettier.io/) - Code for matter
|
|
22
51
|
- [ESLint](https://eslint.org/) - Code linter
|
|
23
52
|
- [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - unit testing
|
|
24
|
-
- [Rudix-UI](https://
|
|
53
|
+
- [Rudix-UI](https://www.radix-ui.com/primitives/docs/overview/introduction)
|
|
25
54
|
- we can import only the components we need - this is important for bundle size
|
|
26
55
|
- as it is unstyled, we don't need to overwrite styles like in Ant Design or Material UI
|
|
27
56
|
- it has a high level of accessibility and customizability
|
|
28
|
-
- CSS
|
|
57
|
+
- CSS Modules - CSS modules allow us to write CSS in a modular way. Each component has its own CSS file, and class names are scoped to the component. This prevents CSS collisions and makes it easy to find and update styles.
|
|
58
|
+
|
|
59
|
+
## Project Structure
|
|
60
|
+
|
|
61
|
+
The project follows a modular structure to make organizing and maintaining components easy. Key directories include:
|
|
62
|
+
|
|
63
|
+
- `src/components`: Contains individual UI components.
|
|
64
|
+
- `src/icons`: SVG icons.
|
|
65
|
+
- `src/index.css`: Global styles.
|
|
66
|
+
- `src/variables.css` Global CSS variables.
|
|
67
|
+
- `src/stories`: global Storybook stories.
|
|
68
|
+
- `.storybook`: Storybook configuration files.
|
|
29
69
|
|
|
30
70
|
## VS Code setup
|
|
31
71
|
|
|
32
72
|
- install [Component Creator](https://marketplace.visualstudio.com/items?itemName=dsbasko.create-component-helper) extension to create new component from template `(.vscode/cch-template/React FC (ts, css, story, test)/{{pascalCase}})` with one command
|
|
73
|
+
- install [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension to lint your code
|
|
74
|
+
- install [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension to format your code
|
|
75
|
+
|
|
76
|
+
## Component Development
|
|
77
|
+
|
|
78
|
+
### All changes of Demio-UI should be done through MR!
|
|
79
|
+
|
|
80
|
+
When creating new components, follow these steps:
|
|
81
|
+
|
|
82
|
+
1. Create a new component by [Component Creator](https://marketplace.visualstudio.com/items?itemName=dsbasko.create-component-helper) plugin with the name of your component in `PascalCase`.
|
|
83
|
+
2. Check if this component already exists in the [Radix UI](https://www.radix-ui.com/primitives/docs/overview/introduction) library. If it does, use it instead of creating a new one.
|
|
84
|
+
3. If you decide to add a new npm package, share the results of your research with the dev team.
|
|
85
|
+
4. Add your component to `src/{ComponentName}/{ComponentName}.stories.tsx` file.
|
|
86
|
+
5. Write tests for your component in `src/{ComponentName}/{ComponentName}.test.tsx` file.
|
|
87
|
+
6. After development is finished - export your component from `src/index.ts` file.
|
|
88
|
+
|
|
89
|
+
### Code recommendations:
|
|
90
|
+
|
|
91
|
+
- one component -> one file with all related files (CSS, tests etc.)
|
|
92
|
+
- try to make components as simple as possible(try make it stateless if it possible)
|
|
93
|
+
- group hooks by type (state, ref, effect, etc.)
|
|
94
|
+
- if you write a comment - try to make it short and clear, don't add obvious comments in code like `// render component` or `//hooks`
|
|
95
|
+
- component should accept className as a prop and apply it to the root element
|
|
96
|
+
- use consistent naming across the whole library's components (i.e., className, width, isOpen, etc.).
|
|
97
|
+
- try to keep backward compatibility while it doesn't cause unnecessary complications (all the corner cases have to be discussed)
|
|
98
|
+
- every important node of the component has to have a unique class name formatted as `"demio-ui-${component-name}-${element}"` (for example, `"demio-ui-modal-close-button"`, `"demio-ui-modal-title"`, `"demio-ui-modal-content"`, etc.). This is important for testing and styling purposes.
|
|
99
|
+
- Avoid inline styling. If the component accepts the inline style - it should be applied to a component.
|
|
100
|
+
- Props naming. Use consistent naming across the whole lib's components (i.e., className, width, isOpen, etc.).
|
|
101
|
+
|
|
102
|
+
## Styling
|
|
103
|
+
|
|
104
|
+
1. Every CSS variable should start with the `--demio-ui-` prefix. For example, `--demio-ui-color-primary`.
|
|
105
|
+
2. The CSS variable name should be in the `kebab-case`.
|
|
106
|
+
3. Global CSS variables should be defined in the `src/variables.css` file. These variables include the color palette, font sizes, font families, border radius, and more. Use them in your components.
|
|
107
|
+
4. Component-specific styles should be defined in the `src/components/{ComponentName}/{ComponentName}.module.css` file. Use global css variables in your component styles to set up local variables. For example:
|
|
108
|
+
|
|
109
|
+
```css
|
|
110
|
+
--demio-ui-button-color: var(--demio-ui-color-primary);
|
|
111
|
+
|
|
112
|
+
.button {
|
|
113
|
+
color: var(--demio-ui-button-color);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
5. Use CSS variables to manage component variants without property duplication. For example:
|
|
118
|
+
|
|
119
|
+
```css
|
|
120
|
+
--demio-ui-button-color: var(--demio-ui-button-color-primary);
|
|
121
|
+
|
|
122
|
+
.button {
|
|
123
|
+
color: var(--demio-ui-button-color);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.button--secondary {
|
|
127
|
+
--demio-ui-button-color: var(--demio-ui-button-color-secondary);
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
The same variables can be used to override component styles in your application. For example:
|
|
132
|
+
|
|
133
|
+
```css
|
|
134
|
+
.parent .demio-ui-button {
|
|
135
|
+
--demio-ui-button-color: blue;
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
For an example of component styles, look at the `src/components/NewButton/Button.css` file.
|
|
140
|
+
|
|
141
|
+
## Storybook
|
|
142
|
+
|
|
143
|
+
Storybook is a UI library development environment and component showcase. It allows us to develop components in isolation, document them with examples, and test them in different states and configurations.
|
|
144
|
+
|
|
145
|
+
1. Try to cover the main component variants in Storybook stories.
|
|
146
|
+
2. Add all `argTypes` and `args` to your component stories.
|
|
147
|
+
|
|
148
|
+
We have automated deployment of Storybook to [CDN](https://cdn.dev.demio.com/storybook/storybook-static/index.html?path=/docs/components-button--docs) on every push to the `main` branch.
|
|
149
|
+
|
|
150
|
+
## Testing
|
|
151
|
+
|
|
152
|
+
We use [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for unit testing. We aim to have 100% test coverage for all components. Tests are run automatically on every `commit` or `push`.
|
|
153
|
+
Testing commands:
|
|
154
|
+
|
|
155
|
+
- `npm run test` - run all tests
|
|
156
|
+
- `npm run test:watch` - run all tests in watch mode
|
|
157
|
+
|
|
158
|
+
## Publishing
|
|
159
|
+
|
|
160
|
+
When publishing a new version of the library, follow these steps:
|
|
161
|
+
Try to follow [Semantic Versioning](https://semver.org/) rules and [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).
|
|
162
|
+
|
|
163
|
+
- update the CHANGELOG.md file with the description of the changes
|
|
164
|
+
- `npm version <major|minor|patch>` - bump the version
|
|
165
|
+
- `npm publish` - publish to NPM (only from main branch)
|
|
166
|
+
- push changes to the git
|
|
167
|
+
- share CHANGELOG.md changes with the team in Slack dev channel
|
|
33
168
|
|
|
34
169
|
## Git hooks
|
|
35
170
|
|
package/dist/cjs/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--color-palette-green-10:#034a2c;--color-palette-green-15:#0c7348}*{box-sizing:border-box}body,html{font-family:Lato,sans-serif;font-style:normal;font-weight:400}button{cursor:pointer}.Alert-modules_overlay__4XRHj{animation:Alert-modules_overlay-show__rdwHo .15s cubic-bezier(.16,1,.3,1);background:rgba(0,0,0,.25);inset:0;position:fixed;z-index:9999}.Alert-modules_close__dyL0l{background:transparent;border:0;padding:4px 7px;position:absolute;right:8px;top:8px}.Alert-modules_content__Y7nMS{animation:Alert-modules_content-show__ncLtG .15s cubic-bezier(.16,1,.3,1);background:#fff;border-radius:8px;display:flex;flex-direction:column;left:50%;max-height:85vh;padding:16px;position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw;z-index:99999}.Alert-modules_title__e8UHT{color:#2c3336;font-size:20px;font-style:normal;font-weight:700;letter-spacing:.5px;line-height:24px;margin:0 40px 8px 0}.Alert-modules_description__wyWR-{color:#5d676b;font-size:16px;font-weight:400;letter-spacing:.5px;line-height:24px;margin:0 0 40px}.Alert-modules_buttons__cOEDw{align-items:center;display:flex;gap:8px;justify-content:flex-end}@keyframes Alert-modules_overlay-show__rdwHo{0%{opacity:0}to{opacity:1}}@keyframes Alert-modules_content-show__ncLtG{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.Button-modules_button__tpJr3{align-items:center;background:#02bf6f;border:1px solid #02bf6f;border-radius:4px;color:#fff;cursor:pointer;display:flex;flex-direction:row;font-family:Lato,sans-serif;font-size:14px;font-style:normal;font-weight:500;height:40px;justify-content:center;letter-spacing:1px;line-height:20px;outline:none;padding:10px 16px;text-transform:uppercase}.Button-modules_button__tpJr3:focus,.Button-modules_button__tpJr3:hover{background-color:#02d47b;border-color:#02d47b}.Button-modules_button__tpJr3:active{background-color:#24a148;border-color:#24a148}.Button-modules_button__tpJr3:disabled{background-color:#eff3f6;border-color:#dee4e8;color:#9fa6ad;cursor:not-allowed}.Button-modules_secondary__JGOIF{background:#fff;border-color:#dee4e8;color:#02bf6f}.Button-modules_secondary__JGOIF:hover{background-color:#eefdf6}.Button-modules_secondary__JGOIF:focus{background-color:#edfdf1;border-color:#02bf6f}.Button-modules_secondary__JGOIF:active{background-color:#aae5c9}.Button-modules_outline__R9gjd{background:#eff3f6;border-color:#eff3f6;color:#2c3336}.Button-modules_outline__R9gjd:focus,.Button-modules_outline__R9gjd:hover{background-color:#dee4e8;border-color:#dee4e8}.Button-modules_outline__R9gjd:active{background-color:#b9bfc6;border-color:#b9bfc6}.Button-modules_outline__R9gjd:disabled{background-color:#eee;border-color:#eee;color:#9fa6ad}.Button-modules_danger__eTzli{background:#ee4c3b;border-color:#ee4c3b}.Button-modules_danger__eTzli:hover{background:#f16d5f;border-color:#f16d5f}.Button-modules_small__dNTOw{font-size:12px;height:32px;padding:6px 10px}.Button-modules_large__5tvgy{font-size:16px;height:48px;padding:16px 24px}.Button-modules_prefix__86hpR{margin-right:8px}.Button-modules_suffix__5uHiO{margin-left:8px}.Button-modules_fullWidth__3ET8J{width:100%}:root{--demio-ui-loader-color:#dee4e8;--demio-ui-loader-size:24px;--demio-ui-loader-border-size:2.7px}.Loader-modules_loader__waPdv{animation:Loader-modules_rotate__vBNW3 1s linear infinite;border-radius:50%;display:block;height:var(--demio-ui-loader-size);position:relative;width:var(--demio-ui-loader-size)}.Loader-modules_loader__waPdv:before{animation:Loader-modules_spin__i7TnV 2s linear infinite;border:var(--demio-ui-loader-border-size) solid var(--demio-ui-loader-color);border-radius:50%;box-sizing:border-box;content:"";inset:0;position:absolute}.Loader-modules_small__ACDdJ{--demio-ui-loader-size:16px;--demio-ui-loader-border-size:1.8px}.Loader-modules_loader__waPdv.Loader-modules_inheritColor__4aWvb:before{border-color:currentcolor}@keyframes Loader-modules_rotate__vBNW3{to{transform:rotate(1turn)}}@keyframes Loader-modules_spin__i7TnV{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}:root{--demio-ui-checkbox-color:#dee4e8;--demio-ui-checkbox-color-checked:#02bf6f;--demio-ui-checkbox-bg-color:#f7f7f7}.Checkbox-modules_container__psQsQ{align-items:center;cursor:pointer;display:flex;gap:4px;justify-content:flex-start;min-height:44px}.Checkbox-modules_root__iysyc{align-items:center;background:transparent;border:0;border-radius:4px;display:flex;flex-shrink:0;height:44px;justify-content:center;outline:0;padding:0;width:44px}.Checkbox-modules_root__iysyc svg path{fill:var(--demio-ui-checkbox-color)}.Checkbox-modules_root__iysyc:focus:not(:disabled),.Checkbox-modules_root__iysyc:hover:not(:disabled){background:var(--demio-ui-checkbox-bg-color);outline:none}.Checkbox-modules_root__iysyc:disabled:before{border-color:#838b97}.Checkbox-modules_root__iysyc[data-state=checked] svg path{fill:var(--demio-ui-checkbox-color-checked)}.Checkbox-modules_root__iysyc[data-state=checked] .Checkbox-modules_uncheckIcon__fVOb2{display:none}.Checkbox-modules_indicator__JaSwR{z-index:3}.Checkbox-modules_label__4TV-f{cursor:pointer}.Checkbox-modules_footer__LV2uq{min-height:32px;padding-left:12px}.Checkbox-modules_container__psQsQ.Checkbox-modules_disabled__eKbuP .Checkbox-modules_label__4TV-f,.Checkbox-modules_container__psQsQ.Checkbox-modules_disabled__eKbuP .Checkbox-modules_root__iysyc{cursor:not-allowed;opacity:.38}.Label-modules_label__rXO6J{color:#2c3336;font-size:16px;letter-spacing:.25px;line-height:20px}.Label-modules_semiBold__vTm1B{font-weight:600}.Label-modules_regular__F9gNE{font-weight:400}.FormGroup-modules_formGroup__Zjh7i{align-items:flex-start;display:flex;gap:8px}.FormGroup-modules_horizontal__9g7gn{align-items:center;flex-direction:row}.FormGroup-modules_vertical__yPEor{flex-direction:column}.FormGroup-modules_between__poqnA{justify-content:space-between}.FormGroup-modules_start__ylflU{justify-content:flex-start}.FormGroup-modules_startAlignItems__h-nDr{align-items:flex-start}.FormGroup-modules_stretchAlignItems__jg3e0{align-items:stretch}.Input-modules_root__vdxX5{font-family:Lato,sans-serif;position:relative}.Input-modules_label__2RN8-,.Input-modules_optional__M78yJ{background:#fff;color:#6c737a;padding:0 5px;position:absolute}.Input-modules_label__2RN8-{font-size:14px;font-style:normal;font-weight:400;left:12px;letter-spacing:.25px;line-height:20px;pointer-events:none;top:14px;transition:all .2s cubic-bezier(0,0,.2,1) 0ms}.Input-modules_static__cpwFU{background:transparent;color:#2c3336;font-weight:600;line-height:140%;margin:0;padding:0 0 8px;position:static}.Input-modules_optional__M78yJ{font-size:12px;font-style:italic;font-weight:400;letter-spacing:.4px;line-height:130%;right:11px;top:-8px}.Input-modules_correctedTop__I3y-S{top:20px}.Input-modules_inputWrapper__KPYyg{align-items:center;border:1px solid #dee4e8;border-radius:4px;display:flex;flex-direction:row;gap:8px;justify-content:space-evenly;overflow:hidden;padding:0 16px}.Input-modules_input__y9hSj{background:#fff;border:none;color:#2c3336;font-family:Lato,sans-serif;font-size:14px;font-style:normal;font-weight:400;height:46px;letter-spacing:.25px;line-height:20px;outline:none;padding:14px 0;width:100%}.Input-modules_input__y9hSj::placeholder{color:#9fa6ad;opacity:0}.Input-modules_input__y9hSj:disabled{color:#9fa6ad}.Input-modules_endAdornment__z04mP,.Input-modules_startAdornment__Xs8xw{height:16px;width:16px}.Input-modules_footer__R8J8U{color:#6c737a;display:flex;gap:8px;justify-content:space-between;margin:4px 0 0 8px;min-height:24px}.Input-modules_togglePasswordButton__KGieB{align-items:center;border:none;display:flex;justify-content:center;padding:8px}.Input-modules_togglePasswordButton__KGieB svg{height:20px;width:20px}.Input-modules_footerMessage__akEOh{flex:1}.Input-modules_counter__HFA5P{color:#6c737a}.Input-modules_root__vdxX5:focus-within .Input-modules_footer__R8J8U,.Input-modules_root__vdxX5:focus-within .Input-modules_label__2RN8-{color:#2c3336}.Input-modules_root__vdxX5.Input-modules_isDisabled__bHf8L .Input-modules_counter__HFA5P,.Input-modules_root__vdxX5.Input-modules_isDisabled__bHf8L .Input-modules_hint__e-KNY,.Input-modules_root__vdxX5.Input-modules_isDisabled__bHf8L .Input-modules_label__2RN8-,.Input-modules_root__vdxX5.Input-modules_isDisabled__bHf8L .Input-modules_optional__M78yJ{color:#dee4e8}.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_footer__R8J8U,.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_input__y9hSj::placeholder,.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_optional__M78yJ{color:#ee4c3b}.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_label__2RN8-{color:#6c737a}.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_inputWrapper__KPYyg{border-color:#ee4c3b}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re .Input-modules_label__2RN8-{font-size:13px;font-weight:400;left:11px;top:-7px;transition:all .2s cubic-bezier(0,0,.2,1) 0ms}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re .Input-modules_static__cpwFU{color:#2c3336;font-size:14px;font-weight:600}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re .Input-modules_input__y9hSj::placeholder{opacity:1;transition:opacity .2s cubic-bezier(0,0,.2,1) .1s}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re .Input-modules_inputWrapper__KPYyg{border-color:#2c3336}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re.Input-modules_isError__1B8e9 .Input-modules_inputWrapper__KPYyg{border-color:#ee4c3b}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re.Input-modules_isError__1B8e9 .Input-modules_label__2RN8-{color:#ee4c3b}.InputHint-modules_root__bJTnj{color:#9fa6ad;font-family:Lato,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.4px;line-height:16px}.InputHint-modules_error__HZnQD{color:#ee4c3b}.Modal-modules_overlay__V-vTn{background:rgba(0,0,0,.25);inset:0;position:fixed;z-index:9999}.Modal-modules_header__-dxAm{color:#fff;min-height:56px;padding:8px 16px 16px}.Modal-modules_close__CwIjR{background:transparent;border:0;padding:4px 7px;position:absolute;right:8px;top:8px}.Modal-modules_title__3ehge{color:#2c3336;font-size:20px;font-style:normal;font-weight:600;letter-spacing:.25px;line-height:32px;margin:0;padding-right:40px}.Modal-modules_titleCentered__Qqy8u{padding:0;text-align:center}.Modal-modules_content__sK9HS{background:#fdfdfd;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.16);height:auto;left:50%;overflow-x:hidden;overflow-y:auto;position:absolute;top:50%;transform:translate(-50%,-50%)}.Modal-modules_body__8Khpx{padding:0 16px 16px}.Popover-modules_popoverContent__EQXkn{animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}.Popover-modules_popoverContent__EQXkn[data-side=top]{animation-name:Popover-modules_slide-up__GXaM-}.Popover-modules_popoverContent__EQXkn[data-side=bottom]{animation-name:Popover-modules_slide-down__Vu-b-}.Popover-modules_popoverTrigger__vCIUa{background:none;border:none;cursor:pointer;display:flex;margin:0;padding:0}@keyframes Popover-modules_slide-down__Vu-b-{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-modules_slide-up__GXaM-{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.Progress-modules_root__E0rHH{background:#e7edf0;border-radius:24px;height:10px;position:relative;transform:translateZ(0);width:100%}.Progress-modules_indicator__qpwRi{background:linear-gradient(90deg,#27e193,#00b166);border-radius:8px;height:12px;left:0;position:absolute;top:-1px;transition:width .66s cubic-bezier(.65,0,.35,1);width:0}:root{--demio-radio-group-color:#02bf6f;--demio-radio-group-border-color:#dee4e8;--demio-radio-group-bg-color-hover:#f7f7f7;--demio-radio-group-bg-color-active:#eee;--demio-radio-group-color-disabled:#2c3336}.RadioGroup-modules_root__AbbNa{display:flex;flex-direction:column;gap:8px}.RadioGroup-modules_container__yPAMg{align-items:center;display:flex;min-height:44px}.RadioGroup-modules_indicator__jEw97{background-color:var(--demio-radio-group-color);border-radius:8px;height:8px;width:8px;z-index:3}.RadioGroup-modules_item__wuUmn{align-items:center;background-color:#fff;border:0;border-radius:100%;display:flex;height:44px;justify-content:center;width:44px}.RadioGroup-modules_item__wuUmn:disabled{opacity:.38}.RadioGroup-modules_item__wuUmn:disabled .RadioGroup-modules_indicator__jEw97{background-color:var(--demio-radio-group-color-disabled)}.RadioGroup-modules_item__wuUmn:focus:not(:disabled),.RadioGroup-modules_item__wuUmn:hover:not(:disabled){background:var(--demio-radio-group-bg-color-hover);outline:none}.RadioGroup-modules_item__wuUmn:active:not(:disabled){background:#fff}.RadioGroup-modules_item__wuUmn:after{background-color:#fff;border:2px solid var(--demio-radio-group-border-color);border-radius:16px;content:"";height:16px;margin:0;position:absolute;width:16px;z-index:2}.RadioGroup-modules_item__wuUmn[data-state=checked]:not(:disabled):after{border-color:var(--demio-radio-group-color)}.RadioGroup-modules_item__wuUmn[data-state=checked]:disabled:after{border-color:var(--demio-radio-group-color-disabled)}.RadioGroup-modules_label__ggYdY{cursor:pointer}.RadioGroup-modules_footer__1Zp99{min-height:32px;padding-left:12px}.RadioGroup-modules_container__yPAMg.RadioGroup-modules_disabled__H3T-- .RadioGroup-modules_item__wuUmn,.RadioGroup-modules_container__yPAMg.RadioGroup-modules_disabled__H3T-- .RadioGroup-modules_label__ggYdY{cursor:not-allowed}.Select-modules_trigger__dS9Dx{align-items:center;background-color:#fff;border:1px solid #dee4e8;border-radius:8px;color:#2c3336;display:flex;flex-direction:row;font-size:16px;font-weight:400;gap:8px;height:40px;justify-content:flex-start;letter-spacing:.5px;line-height:24px;padding:8px;position:relative;text-align:center;width:100%}.Select-modules_trigger__dS9Dx:hover{border-color:#02bf6f}.Select-modules_trigger__dS9Dx:disabled{background:#eee;border-color:#dee4e8;color:#9fa6ad;cursor:not-allowed}.Select-modules_trigger__dS9Dx:focus{border-color:#02bf6f;box-shadow:0 0 0 1px #dee4e8}.Select-modules_trigger__dS9Dx[data-placeholder]{color:var(--violet9)}.Select-modules_trigger__dS9Dx[data-state=open]{border-color:#02bf6f}.Select-modules_icon__sgRRc{display:flex;height:24px;position:absolute;right:8px;top:8px;transition:.6s ease;width:24px}.Select-modules_trigger__dS9Dx[data-state=open] .Select-modules_icon__sgRRc{transform:rotate(180deg);transition:.6s ease}.Select-modules_startIcon__kohMV{align-self:center;height:24px}.Select-modules_value__h6Q4Z{overflow:hidden;padding-right:24px;text-overflow:ellipsis;white-space:nowrap}.Select-modules_content__YuAqS{background:#fff;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.16);max-height:var(--radix-select-content-available-height);overflow:hidden;padding:4px;position:relative;width:var(--radix-select-trigger-width);z-index:9}.Select-modules_item__cTAIm{align-items:flex-start;border-radius:8px;color:var(--demio-gray,#2c3336);display:flex;flex-direction:row;font-size:16px;letter-spacing:.5px;line-height:24px;min-height:40px;padding:8px;text-align:left}.Select-modules_item__cTAIm:hover,.Select-modules_item__cTAIm[data-highlighted]{background:#eff3f6}.Select-modules_item__cTAIm:focus-visible{outline:none}.Select-modules_item__cTAIm[data-disabled]{cursor:not-allowed;opacity:.5;pointer-events:none}.Select-modules_item__cTAIm[data-state=checked]{background:#edfdf1}.Switch-modules_root__V5S6a{background:#dee4e8;border:0;border-radius:100px;height:24px;padding:0;position:relative;width:44px}.Switch-modules_root__V5S6a:focus{box-shadow:0 0 0 1px #57cb8c}.Switch-modules_root__V5S6a:disabled{background:#eff3f6}.Switch-modules_root__V5S6a[data-state=checked]{background:#02bf6f}.Switch-modules_root__V5S6a[data-state=checked]:disabled{background:#aae5c9}.Switch-modules_thumb__PZ-lR{background:#fafafa;border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.16);display:block;height:20px;transform:translateX(2px);transition:transform .1s;width:20px;will-change:auto}.Switch-modules_thumb__PZ-lR[data-state=checked]{transform:translateX(22px)}.Switch-modules_thumb__PZ-lR:not([data-state=checked])[data-disabled]{background:#f7f7f7;box-shadow:0 4px 8px rgb(0 0 0/4%)}.Tabs-modules_root__TvYE1{display:flex;flex-direction:column}.Tabs-modules_list__G3KVd{border-bottom:1px solid #eff3f6;display:flex;flex-shrink:0}.Tabs-modules_tab__-FuG6{font-feature-settings:"calt" off;background:transparent;border:0;color:#6c737a;cursor:pointer;font-size:16px;font-style:normal;font-weight:700;line-height:22px;margin-right:16px;padding:8px 0 4px;position:relative;text-align:center}.Tabs-modules_tab__-FuG6:disabled{color:#e9e9ea;cursor:not-allowed}.Tabs-modules_tab__-FuG6:not(:disabled):focus,.Tabs-modules_tab__-FuG6:not(:disabled):hover,.Tabs-modules_tab__-FuG6[data-state=active]{color:#2c3336}.Tabs-modules_tab__-FuG6[data-state=active]:before{background-color:#34785c;bottom:-1px;content:"";display:block;height:2px;left:0;position:absolute;width:100%}.Tabs-modules_content__X0OLh{background-color:#fff;flex-grow:1;outline:none}.Tooltip-modules_content__--tK0{animation:Tooltip-modules_scale-in__Qvvhs .2s ease-out;background:rgba(0,0,0,.8);border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.16);color:#fff;font-size:12px;font-weight:400;letter-spacing:.4px;line-height:16px;padding:8px 12px;transform-origin:var(--radix-tooltip-content-transform-origin);z-index:1}.Tooltip-modules_arrow__4vjj8{fill:rgba(0,0,0,.8);z-index:1}@keyframes Tooltip-modules_scale-in__Qvvhs{0%{opacity:0;transform:scale(0)}30%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
|
|
1
|
+
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--demio-ui-color-palette-green-10:#034a2c;--demio-ui-color-palette-green-15:#0c7348}*{box-sizing:border-box}body,html{font-family:Lato,sans-serif;font-style:normal;font-weight:400}button{cursor:pointer}.Alert-modules_overlay__4XRHj{animation:Alert-modules_overlay-show__rdwHo .15s cubic-bezier(.16,1,.3,1);background:rgba(0,0,0,.25);inset:0;position:fixed;z-index:9999}.Alert-modules_close__dyL0l{background:transparent;border:0;padding:4px 7px;position:absolute;right:8px;top:8px}.Alert-modules_content__Y7nMS{animation:Alert-modules_content-show__ncLtG .15s cubic-bezier(.16,1,.3,1);background:#fff;border-radius:8px;display:flex;flex-direction:column;left:50%;max-height:85vh;padding:16px;position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw;z-index:99999}.Alert-modules_title__e8UHT{color:#2c3336;font-size:20px;font-style:normal;font-weight:700;letter-spacing:.5px;line-height:24px;margin:0 40px 8px 0}.Alert-modules_description__wyWR-{color:#5d676b;font-size:16px;font-weight:400;letter-spacing:.5px;line-height:24px;margin:0 0 40px}.Alert-modules_buttons__cOEDw{align-items:center;display:flex;gap:8px;justify-content:flex-end}@keyframes Alert-modules_overlay-show__rdwHo{0%{opacity:0}to{opacity:1}}@keyframes Alert-modules_content-show__ncLtG{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.Button-modules_button__tpJr3{align-items:center;background:#02bf6f;border:1px solid #02bf6f;border-radius:4px;color:#fff;cursor:pointer;display:flex;flex-direction:row;font-family:Lato,sans-serif;font-size:14px;font-style:normal;font-weight:500;height:40px;justify-content:center;letter-spacing:1px;line-height:20px;outline:none;padding:10px 16px;text-transform:uppercase}.Button-modules_button__tpJr3:focus,.Button-modules_button__tpJr3:hover{background-color:#02d47b;border-color:#02d47b}.Button-modules_button__tpJr3:active{background-color:#24a148;border-color:#24a148}.Button-modules_button__tpJr3:disabled{background-color:#eff3f6;border-color:#dee4e8;color:#9fa6ad;cursor:not-allowed}.Button-modules_secondary__JGOIF{background:#fff;border-color:#dee4e8;color:#02bf6f}.Button-modules_secondary__JGOIF:hover{background-color:#eefdf6}.Button-modules_secondary__JGOIF:focus{background-color:#edfdf1;border-color:#02bf6f}.Button-modules_secondary__JGOIF:active{background-color:#aae5c9}.Button-modules_outline__R9gjd{background:#eff3f6;border-color:#eff3f6;color:#2c3336}.Button-modules_outline__R9gjd:focus,.Button-modules_outline__R9gjd:hover{background-color:#dee4e8;border-color:#dee4e8}.Button-modules_outline__R9gjd:active{background-color:#b9bfc6;border-color:#b9bfc6}.Button-modules_outline__R9gjd:disabled{background-color:#eee;border-color:#eee;color:#9fa6ad}.Button-modules_danger__eTzli{background:#ee4c3b;border-color:#ee4c3b}.Button-modules_danger__eTzli:hover{background:#f16d5f;border-color:#f16d5f}.Button-modules_small__dNTOw{font-size:12px;height:32px;padding:6px 10px}.Button-modules_large__5tvgy{font-size:16px;height:48px;padding:16px 24px}.Button-modules_prefix__86hpR{margin-right:8px}.Button-modules_suffix__5uHiO{margin-left:8px}.Button-modules_fullWidth__3ET8J{width:100%}:root{--demio-ui-loader-color:#dee4e8;--demio-ui-loader-size:24px;--demio-ui-loader-border-size:2.7px}.Loader-modules_loader__waPdv{animation:Loader-modules_rotate__vBNW3 1s linear infinite;border-radius:50%;display:block;height:var(--demio-ui-loader-size);position:relative;width:var(--demio-ui-loader-size)}.Loader-modules_loader__waPdv:before{animation:Loader-modules_spin__i7TnV 2s linear infinite;border:var(--demio-ui-loader-border-size) solid var(--demio-ui-loader-color);border-radius:50%;box-sizing:border-box;content:"";inset:0;position:absolute}.Loader-modules_small__ACDdJ{--demio-ui-loader-size:16px;--demio-ui-loader-border-size:1.8px}.Loader-modules_loader__waPdv.Loader-modules_inheritColor__4aWvb:before{border-color:currentcolor}@keyframes Loader-modules_rotate__vBNW3{to{transform:rotate(1turn)}}@keyframes Loader-modules_spin__i7TnV{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}:root{--demio-ui-checkbox-color:#dee4e8;--demio-ui-checkbox-color-checked:#02bf6f;--demio-ui-checkbox-bg-color:#f7f7f7}.Checkbox-modules_container__psQsQ{align-items:center;cursor:pointer;display:flex;gap:4px;justify-content:flex-start;min-height:44px}.Checkbox-modules_root__iysyc{align-items:center;background:transparent;border:0;border-radius:4px;display:flex;flex-shrink:0;height:44px;justify-content:center;outline:0;padding:0;width:44px}.Checkbox-modules_root__iysyc svg path{fill:var(--demio-ui-checkbox-color)}.Checkbox-modules_root__iysyc:focus:not(:disabled),.Checkbox-modules_root__iysyc:hover:not(:disabled){background:var(--demio-ui-checkbox-bg-color);outline:none}.Checkbox-modules_root__iysyc:disabled:before{border-color:#838b97}.Checkbox-modules_root__iysyc[data-state=checked] svg path{fill:var(--demio-ui-checkbox-color-checked)}.Checkbox-modules_root__iysyc[data-state=checked] .Checkbox-modules_uncheckIcon__fVOb2{display:none}.Checkbox-modules_indicator__JaSwR{z-index:3}.Checkbox-modules_label__4TV-f{cursor:pointer}.Checkbox-modules_footer__LV2uq{min-height:32px;padding-left:12px}.Checkbox-modules_container__psQsQ.Checkbox-modules_disabled__eKbuP .Checkbox-modules_label__4TV-f,.Checkbox-modules_container__psQsQ.Checkbox-modules_disabled__eKbuP .Checkbox-modules_root__iysyc{cursor:not-allowed;opacity:.38}.Label-modules_label__rXO6J{color:#2c3336;font-size:16px;letter-spacing:.25px;line-height:20px}.Label-modules_semiBold__vTm1B{font-weight:600}.Label-modules_regular__F9gNE{font-weight:400}.FormGroup-modules_formGroup__Zjh7i{align-items:flex-start;display:flex;gap:8px}.FormGroup-modules_horizontal__9g7gn{align-items:center;flex-direction:row}.FormGroup-modules_vertical__yPEor{flex-direction:column}.FormGroup-modules_between__poqnA{justify-content:space-between}.FormGroup-modules_start__ylflU{justify-content:flex-start}.FormGroup-modules_startAlignItems__h-nDr{align-items:flex-start}.FormGroup-modules_stretchAlignItems__jg3e0{align-items:stretch}.Input-modules_root__vdxX5{font-family:Lato,sans-serif;position:relative}.Input-modules_label__2RN8-,.Input-modules_optional__M78yJ{background:#fff;color:#6c737a;padding:0 5px;position:absolute}.Input-modules_label__2RN8-{font-size:14px;font-style:normal;font-weight:400;left:12px;letter-spacing:.25px;line-height:20px;pointer-events:none;top:14px;transition:all .2s cubic-bezier(0,0,.2,1) 0ms}.Input-modules_static__cpwFU{background:transparent;color:#2c3336;font-weight:600;line-height:140%;margin:0;padding:0 0 8px;position:static}.Input-modules_optional__M78yJ{font-size:12px;font-style:italic;font-weight:400;letter-spacing:.4px;line-height:130%;right:11px;top:-8px}.Input-modules_correctedTop__I3y-S{top:20px}.Input-modules_inputWrapper__KPYyg{align-items:center;border:1px solid #dee4e8;border-radius:4px;display:flex;flex-direction:row;gap:8px;justify-content:space-evenly;overflow:hidden;padding:0 16px}.Input-modules_input__y9hSj{background:#fff;border:none;color:#2c3336;font-family:Lato,sans-serif;font-size:14px;font-style:normal;font-weight:400;height:46px;letter-spacing:.25px;line-height:20px;outline:none;padding:14px 0;width:100%}.Input-modules_input__y9hSj::placeholder{color:#9fa6ad;opacity:0}.Input-modules_input__y9hSj:disabled{color:#9fa6ad}.Input-modules_endAdornment__z04mP,.Input-modules_startAdornment__Xs8xw{height:16px;width:16px}.Input-modules_footer__R8J8U{color:#6c737a;display:flex;gap:8px;justify-content:space-between;margin:4px 0 0 8px;min-height:24px}.Input-modules_togglePasswordButton__KGieB{align-items:center;border:none;display:flex;justify-content:center;padding:8px}.Input-modules_togglePasswordButton__KGieB svg{height:20px;width:20px}.Input-modules_footerMessage__akEOh{flex:1}.Input-modules_counter__HFA5P{color:#6c737a}.Input-modules_root__vdxX5:focus-within .Input-modules_footer__R8J8U,.Input-modules_root__vdxX5:focus-within .Input-modules_label__2RN8-{color:#2c3336}.Input-modules_root__vdxX5.Input-modules_isDisabled__bHf8L .Input-modules_counter__HFA5P,.Input-modules_root__vdxX5.Input-modules_isDisabled__bHf8L .Input-modules_hint__e-KNY,.Input-modules_root__vdxX5.Input-modules_isDisabled__bHf8L .Input-modules_label__2RN8-,.Input-modules_root__vdxX5.Input-modules_isDisabled__bHf8L .Input-modules_optional__M78yJ{color:#dee4e8}.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_footer__R8J8U,.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_input__y9hSj::placeholder,.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_optional__M78yJ{color:#ee4c3b}.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_label__2RN8-{color:#6c737a}.Input-modules_root__vdxX5.Input-modules_isError__1B8e9 .Input-modules_inputWrapper__KPYyg{border-color:#ee4c3b}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re .Input-modules_label__2RN8-{font-size:13px;font-weight:400;left:11px;top:-7px;transition:all .2s cubic-bezier(0,0,.2,1) 0ms}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re .Input-modules_static__cpwFU{color:#2c3336;font-size:14px;font-weight:600}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re .Input-modules_input__y9hSj::placeholder{opacity:1;transition:opacity .2s cubic-bezier(0,0,.2,1) .1s}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re .Input-modules_inputWrapper__KPYyg{border-color:#2c3336}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re.Input-modules_isError__1B8e9 .Input-modules_inputWrapper__KPYyg{border-color:#ee4c3b}.Input-modules_root__vdxX5.Input-modules_isFocused__Oa1Re.Input-modules_isError__1B8e9 .Input-modules_label__2RN8-{color:#ee4c3b}.InputHint-modules_root__bJTnj{color:#9fa6ad;font-family:Lato,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.4px;line-height:16px}.InputHint-modules_error__HZnQD{color:#ee4c3b}.Modal-modules_overlay__V-vTn{background:rgba(0,0,0,.25);inset:0;position:fixed;z-index:9999}.Modal-modules_header__-dxAm{color:#fff;min-height:56px;padding:8px 16px 16px}.Modal-modules_close__CwIjR{background:transparent;border:0;padding:4px 7px;position:absolute;right:8px;top:8px}.Modal-modules_title__3ehge{color:#2c3336;font-size:20px;font-style:normal;font-weight:600;letter-spacing:.25px;line-height:32px;margin:0;padding-right:40px}.Modal-modules_titleCentered__Qqy8u{padding:0;text-align:center}.Modal-modules_content__sK9HS{background:#fdfdfd;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.16);height:auto;left:50%;overflow-x:hidden;overflow-y:auto;position:absolute;top:50%;transform:translate(-50%,-50%)}.Modal-modules_body__8Khpx{padding:0 16px 16px}.Popover-modules_popoverContent__EQXkn{animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}.Popover-modules_popoverContent__EQXkn[data-side=top]{animation-name:Popover-modules_slide-up__GXaM-}.Popover-modules_popoverContent__EQXkn[data-side=bottom]{animation-name:Popover-modules_slide-down__Vu-b-}.Popover-modules_popoverTrigger__vCIUa{background:none;border:none;cursor:pointer;display:flex;margin:0;padding:0}@keyframes Popover-modules_slide-down__Vu-b-{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-modules_slide-up__GXaM-{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.Progress-modules_root__E0rHH{background:#e7edf0;border-radius:24px;height:10px;position:relative;transform:translateZ(0);width:100%}.Progress-modules_indicator__qpwRi{background:linear-gradient(90deg,#27e193,#00b166);border-radius:8px;height:12px;left:0;position:absolute;top:-1px;transition:width .66s cubic-bezier(.65,0,.35,1);width:0}:root{--demio-radio-group-color:#02bf6f;--demio-radio-group-border-color:#dee4e8;--demio-radio-group-bg-color-hover:#f7f7f7;--demio-radio-group-bg-color-active:#eee;--demio-radio-group-color-disabled:#2c3336}.RadioGroup-modules_root__AbbNa{display:flex;flex-direction:column;gap:8px}.RadioGroup-modules_container__yPAMg{align-items:center;display:flex;min-height:44px}.RadioGroup-modules_indicator__jEw97{background-color:var(--demio-radio-group-color);border-radius:8px;height:8px;width:8px;z-index:3}.RadioGroup-modules_item__wuUmn{align-items:center;background-color:#fff;border:0;border-radius:100%;display:flex;height:44px;justify-content:center;width:44px}.RadioGroup-modules_item__wuUmn:disabled{opacity:.38}.RadioGroup-modules_item__wuUmn:disabled .RadioGroup-modules_indicator__jEw97{background-color:var(--demio-radio-group-color-disabled)}.RadioGroup-modules_item__wuUmn:focus:not(:disabled),.RadioGroup-modules_item__wuUmn:hover:not(:disabled){background:var(--demio-radio-group-bg-color-hover);outline:none}.RadioGroup-modules_item__wuUmn:active:not(:disabled){background:#fff}.RadioGroup-modules_item__wuUmn:after{background-color:#fff;border:2px solid var(--demio-radio-group-border-color);border-radius:16px;content:"";height:16px;margin:0;position:absolute;width:16px;z-index:2}.RadioGroup-modules_item__wuUmn[data-state=checked]:not(:disabled):after{border-color:var(--demio-radio-group-color)}.RadioGroup-modules_item__wuUmn[data-state=checked]:disabled:after{border-color:var(--demio-radio-group-color-disabled)}.RadioGroup-modules_label__ggYdY{cursor:pointer}.RadioGroup-modules_footer__1Zp99{min-height:32px;padding-left:12px}.RadioGroup-modules_container__yPAMg.RadioGroup-modules_disabled__H3T-- .RadioGroup-modules_item__wuUmn,.RadioGroup-modules_container__yPAMg.RadioGroup-modules_disabled__H3T-- .RadioGroup-modules_label__ggYdY{cursor:not-allowed}.Select-modules_trigger__dS9Dx{align-items:center;background-color:#fff;border:1px solid #dee4e8;border-radius:8px;color:#2c3336;display:flex;flex-direction:row;font-size:16px;font-weight:400;gap:8px;height:40px;justify-content:flex-start;letter-spacing:.5px;line-height:24px;padding:8px;position:relative;text-align:center;width:100%}.Select-modules_trigger__dS9Dx:hover{border-color:#02bf6f}.Select-modules_trigger__dS9Dx:disabled{background:#eee;border-color:#dee4e8;color:#9fa6ad;cursor:not-allowed}.Select-modules_trigger__dS9Dx:focus{border-color:#02bf6f;box-shadow:0 0 0 1px #dee4e8}.Select-modules_trigger__dS9Dx[data-placeholder]{color:var(--violet9)}.Select-modules_trigger__dS9Dx[data-state=open]{border-color:#02bf6f}.Select-modules_icon__sgRRc{display:flex;height:24px;position:absolute;right:8px;top:8px;transition:.6s ease;width:24px}.Select-modules_trigger__dS9Dx[data-state=open] .Select-modules_icon__sgRRc{transform:rotate(180deg);transition:.6s ease}.Select-modules_startIcon__kohMV{align-self:center;height:24px}.Select-modules_value__h6Q4Z{overflow:hidden;padding-right:24px;text-overflow:ellipsis;white-space:nowrap}.Select-modules_content__YuAqS{background:#fff;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.16);max-height:var(--radix-select-content-available-height);overflow:hidden;padding:4px;position:relative;width:var(--radix-select-trigger-width);z-index:9}.Select-modules_item__cTAIm{align-items:flex-start;border-radius:8px;color:var(--demio-gray,#2c3336);display:flex;flex-direction:row;font-size:16px;letter-spacing:.5px;line-height:24px;min-height:40px;padding:8px;text-align:left}.Select-modules_item__cTAIm:hover,.Select-modules_item__cTAIm[data-highlighted]{background:#eff3f6}.Select-modules_item__cTAIm:focus-visible{outline:none}.Select-modules_item__cTAIm[data-disabled]{cursor:not-allowed;opacity:.5;pointer-events:none}.Select-modules_item__cTAIm[data-state=checked]{background:#edfdf1}.Switch-modules_root__V5S6a{background:#dee4e8;border:0;border-radius:100px;height:24px;padding:0;position:relative;width:44px}.Switch-modules_root__V5S6a:focus{box-shadow:0 0 0 1px #57cb8c}.Switch-modules_root__V5S6a:disabled{background:#eff3f6}.Switch-modules_root__V5S6a[data-state=checked]{background:#02bf6f}.Switch-modules_root__V5S6a[data-state=checked]:disabled{background:#aae5c9}.Switch-modules_thumb__PZ-lR{background:#fafafa;border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.16);display:block;height:20px;transform:translateX(2px);transition:transform .1s;width:20px;will-change:auto}.Switch-modules_thumb__PZ-lR[data-state=checked]{transform:translateX(22px)}.Switch-modules_thumb__PZ-lR:not([data-state=checked])[data-disabled]{background:#f7f7f7;box-shadow:0 4px 8px rgb(0 0 0/4%)}.Tabs-modules_root__TvYE1{display:flex;flex-direction:column}.Tabs-modules_list__G3KVd{border-bottom:1px solid #eff3f6;display:flex;flex-shrink:0}.Tabs-modules_tab__-FuG6{font-feature-settings:"calt" off;background:transparent;border:0;color:#6c737a;cursor:pointer;font-size:16px;font-style:normal;font-weight:700;line-height:22px;margin-right:16px;padding:8px 0 4px;position:relative;text-align:center}.Tabs-modules_tab__-FuG6:disabled{color:#e9e9ea;cursor:not-allowed}.Tabs-modules_tab__-FuG6:not(:disabled):focus,.Tabs-modules_tab__-FuG6:not(:disabled):hover,.Tabs-modules_tab__-FuG6[data-state=active]{color:#2c3336}.Tabs-modules_tab__-FuG6[data-state=active]:before{background-color:#34785c;bottom:-1px;content:"";display:block;height:2px;left:0;position:absolute;width:100%}.Tabs-modules_content__X0OLh{background-color:#fff;flex-grow:1;outline:none}.Tooltip-modules_content__--tK0{animation:Tooltip-modules_scale-in__Qvvhs .2s ease-out;background:rgba(0,0,0,.8);border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.16);color:#fff;font-size:12px;font-weight:400;letter-spacing:.4px;line-height:16px;padding:8px 12px;transform-origin:var(--radix-tooltip-content-transform-origin);z-index:1}.Tooltip-modules_arrow__4vjj8{fill:rgba(0,0,0,.8);z-index:1}@keyframes Tooltip-modules_scale-in__Qvvhs{0%{opacity:0;transform:scale(0)}30%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
|