@x-green/components 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -37
- package/dist/components/button.d.ts +2 -1
- package/dist/components/index.d.ts +0 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +1 -416
- package/dist/theme.css +216 -0
- package/package.json +11 -4
- package/dist/tokens/index.d.ts +0 -8
- package/dist/tokens/primitives/colors.d.ts +0 -234
- package/dist/tokens/primitives/typography.d.ts +0 -32
- package/dist/tokens/semantic/colors.d.ts +0 -201
- package/dist/tokens/semantic/typography.d.ts +0 -100
package/README.md
CHANGED
|
@@ -1,18 +1,25 @@
|
|
|
1
1
|
# XGreen UI
|
|
2
2
|
|
|
3
|
-
Tipografia, cores e componentes do Design System em TypeScript.
|
|
3
|
+
Tipografia, cores e componentes do Design System em TypeScript. O pacote npm exporta só os componentes (`Button`). React e Vite servem a amostra (`/tipografia`, `/cores`, `/componentes/botao`).
|
|
4
4
|
|
|
5
5
|
No app que instalar o pacote:
|
|
6
6
|
|
|
7
7
|
```tsx
|
|
8
8
|
import { Button } from '@x-green/components'
|
|
9
9
|
|
|
10
|
-
<Button>
|
|
10
|
+
<Button className="w-full">
|
|
11
11
|
Continuar
|
|
12
12
|
</Button>
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
O CSS do `Button` entra junto com o import.
|
|
15
|
+
O CSS do `Button` entra junto com o import. Classes extras no `className` (`w-full`, `bg-primary`, `body-md`) só existem se o app tiver Tailwind. No CSS de entrada do app:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "tailwindcss";
|
|
19
|
+
@import "@x-green/components/theme.css";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
No Vite, o plugin `@tailwindcss/vite` precisa estar ativo. Instale a extensão **Tailwind CSS IntelliSense** e recarregue a janela. Sugestões dentro de `className=""` pedem `"editor.quickSuggestions": { "strings": "on" }` nas settings do editor.
|
|
16
23
|
|
|
17
24
|
## Executar e validar
|
|
18
25
|
|
|
@@ -26,7 +33,7 @@ npm run preview
|
|
|
26
33
|
npm run build:lib
|
|
27
34
|
```
|
|
28
35
|
|
|
29
|
-
`typecheck` executa `tsc -b`. `build` gera a amostra em `site/`. `build:lib` gera o pacote em `dist/` (JS, CSS e tipos). `tailwindcss
|
|
36
|
+
`typecheck` executa `tsc -b`. `build` gera a amostra em `site/`. `build:lib` gera o pacote em `dist/` (JS, CSS compilado, `theme.css` e tipos). `tailwindcss` e `@tailwindcss/vite` são de desenvolvimento neste repo e peer opcional no app consumidor; `tailwind-variants` é dependência da lib; `react` e `react-dom` são peer dependencies.
|
|
30
37
|
|
|
31
38
|
## Publicar no npm
|
|
32
39
|
|
|
@@ -46,7 +53,7 @@ src/
|
|
|
46
53
|
│ ├── primitives/colors.ts
|
|
47
54
|
│ ├── semantic/typography.ts
|
|
48
55
|
│ ├── semantic/colors.ts # Primary e estados do botão
|
|
49
|
-
│ ├── index.ts # Tokens
|
|
56
|
+
│ ├── index.ts # Tokens da amostra (não saem no pacote)
|
|
50
57
|
│ └── tailwind.ts # Adaptador para o Tailwind
|
|
51
58
|
├── components/
|
|
52
59
|
│ └── button.tsx # Button com tailwind-variants
|
|
@@ -56,14 +63,15 @@ src/
|
|
|
56
63
|
│ ├── cores/
|
|
57
64
|
│ └── componentes/
|
|
58
65
|
├── routes/ # Páginas da demonstração (TanStack Router)
|
|
59
|
-
├── index.ts # Reexporta
|
|
66
|
+
├── index.ts # Reexporta só os componentes (entrada do npm)
|
|
60
67
|
├── index.lib.ts # Entrada do build da lib (importa o CSS)
|
|
61
68
|
├── lib.css # Tailwind compilado para o pacote
|
|
69
|
+
├── theme.css # @theme e @utility exportados no npm
|
|
62
70
|
├── index.css # Tailwind e estilos da amostra
|
|
63
71
|
└── main.tsx # RouterProvider
|
|
64
72
|
```
|
|
65
73
|
|
|
66
|
-
Os primitivos são a origem dos valores. Os tokens semânticos de tipografia reutilizam `fontFamily`, `fontWeight`, `fontSize` e `lineHeight`. Tokens semânticos de cor ainda não existem: o Figma definiu só as famílias primitivas. Todos usam `as const`; os tipos são derivados dos valores
|
|
74
|
+
Os primitivos são a origem dos valores. Os tokens semânticos de tipografia reutilizam `fontFamily`, `fontWeight`, `fontSize` e `lineHeight`. Tokens semânticos de cor ainda não existem: o Figma definiu só as famílias primitivas. Todos usam `as const`; os tipos são derivados dos valores. Tokens ficam em `src/tokens/` para a amostra e para o CSS do `Button`; o pacote não os exporta.
|
|
67
75
|
|
|
68
76
|
## Primitivos de tipografia
|
|
69
77
|
|
|
@@ -159,45 +167,25 @@ import { Button } from '@x-green/components'
|
|
|
159
167
|
</Button>
|
|
160
168
|
```
|
|
161
169
|
|
|
162
|
-
As
|
|
170
|
+
As paletas primitivas e os papéis semânticos ficam em `src/tokens/` para a amostra e para o CSS do `Button`. Não são exportados pelo pacote nesta versão.
|
|
163
171
|
|
|
164
172
|
## Consumir em React
|
|
165
173
|
|
|
166
|
-
Exemplo no app que instalou o pacote:
|
|
167
|
-
|
|
168
|
-
```tsx
|
|
169
|
-
import { colors, typography } from '@x-green/components'
|
|
170
|
-
|
|
171
|
-
<h1
|
|
172
|
-
style={{
|
|
173
|
-
...typography['heading-h1'],
|
|
174
|
-
color: colors.neutral[900],
|
|
175
|
-
backgroundColor: colors.neutral[25],
|
|
176
|
-
}}
|
|
177
|
-
>
|
|
178
|
-
Design System
|
|
179
|
-
</h1>
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
Também estão disponíveis `fontFamily`, `fontWeight`, `fontSize`, `lineHeight` e os tipos `FontFamily`, `FontWeight`, `FontSize`, `LineHeight`, `TypographyToken` e `TypographyTokenName`.
|
|
183
|
-
|
|
184
|
-
## Consumir com Tailwind
|
|
185
|
-
|
|
186
|
-
O pacote já entrega o CSS do `Button`. Para usar tokens no layout do seu app (`heading-h1`, `bg-primary`), configure o Tailwind 4 com o plugin do DS. Sem isso, só os componentes importados de `@x-green/components` vêm estilizados.
|
|
187
|
-
|
|
188
174
|
```tsx
|
|
189
175
|
import { Button } from '@x-green/components'
|
|
190
176
|
|
|
191
|
-
<
|
|
192
|
-
|
|
193
|
-
<p className="body-md">Texto usando os tokens de tipografia e a paleta primitiva.</p>
|
|
194
|
-
</section>
|
|
195
|
-
<a className="body-md-link text-green-800 underline" href="#typography">Ver tipografia</a>
|
|
196
|
-
<Button>
|
|
197
|
-
Botão de exemplo
|
|
177
|
+
<Button className="w-full">
|
|
178
|
+
Continuar
|
|
198
179
|
</Button>
|
|
199
180
|
```
|
|
200
181
|
|
|
182
|
+
O pacote exporta `Button` e o tipo `ButtonProps`. Tokens de cor e tipografia ficam no repositório da amostra, não no pacote JS. O IntelliSense e as classes extras no `className` vêm do CSS de tema:
|
|
183
|
+
|
|
184
|
+
```css
|
|
185
|
+
@import "tailwindcss";
|
|
186
|
+
@import "@x-green/components/theme.css";
|
|
187
|
+
```
|
|
188
|
+
|
|
201
189
|
## Fonte padrão
|
|
202
190
|
|
|
203
191
|
Por enquanto, o projeto usa a fonte padrão do Tailwind, sem arquivos de fontes personalizados, imports adicionais ou downloads de fontes. Importar `@x-green/components` injeta o CSS dos componentes. A variável `--default-font-family` segue a fonte padrão do Tailwind.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { ComponentProps } from 'react';
|
|
2
2
|
import type { VariantProps } from 'tailwind-variants';
|
|
3
3
|
import { buttonVariants } from './button-variants';
|
|
4
|
-
export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
|
|
4
|
+
export interface ButtonProps extends Omit<ComponentProps<'button'>, 'className'>, VariantProps<typeof buttonVariants> {
|
|
5
|
+
className?: string;
|
|
5
6
|
}
|
|
6
7
|
export declare function Button({ variant, className, type, children, ...props }: ButtonProps): import("react").JSX.Element;
|
package/dist/index.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--color-neutral-25:#ebf0f6;--color-neutral-25-opacity:5%;--color-neutral-50:#e5eaf1;--color-neutral-50-opacity:10%;--color-neutral-100:#dae0e7;--color-neutral-100-opacity:20%;--color-neutral-200:#c5cad3;--color-neutral-200-opacity:40%;--color-neutral-300:#afb5c0;--color-neutral-300-opacity:60%;--color-neutral-400:#9a9fac;--color-neutral-400-opacity:80%;--color-neutral-500:#848a98;--color-neutral-500-opacity:100%;--color-neutral-600:#6a6e7a;--color-neutral-600-opacity:80%;--color-neutral-700:#4f535b;--color-neutral-700-opacity:60%;--color-neutral-800:#35373d;--color-neutral-800-opacity:40%;--color-neutral-900:#1a1c1e;--color-neutral-900-opacity:20%;--color-neutral-950:#0d0e0f;--color-neutral-950-opacity:10%;--color-green-50:#e6f6ef;--color-green-50-opacity:10%;--color-green-100:#cceccc;--color-green-100-opacity:20%;--color-green-200:#99d999;--color-green-200-opacity:40%;--color-green-300:#66c766;--color-green-300-opacity:60%;--color-green-400:#33b433;--color-green-400-opacity:80%;--color-green-500:#00a000;--color-green-500-opacity:100%;--color-green-600:#008100;--color-green-600-opacity:80%;--color-green-700:#006100;--color-green-700-opacity:60%;--color-green-800:#004000;--color-green-800-opacity:40%;--color-green-900:#002000;--color-green-900-opacity:20%;--color-green-950:#001000;--color-green-950-opacity:10%;--color-blue-50:#e6ecf6;--color-blue-50-opacity:10%;--color-blue-100:#ccd9ec;--color-blue-100-opacity:20%;--color-blue-200:#99b3d9;--color-blue-200-opacity:40%;--color-blue-300:#668cc6;--color-blue-300-opacity:60%;--color-blue-400:#3366b3;--color-blue-400-opacity:80%;--color-blue-500:#0040a0;--color-blue-500-opacity:100%;--color-blue-600:#003380;--color-blue-600-opacity:80%;--color-blue-700:#002660;--color-blue-700-opacity:60%;--color-blue-800:#001a40;--color-blue-800-opacity:40%;--color-blue-900:#000d20;--color-blue-900-opacity:20%;--color-blue-950:#000610;--color-blue-950-opacity:10%;--color-purple-50:#ede6f6;--color-purple-50-opacity:10%;--color-purple-100:#dbccec;--color-purple-100-opacity:20%;--color-purple-200:#b899d9;--color-purple-200-opacity:40%;--color-purple-300:#9466c6;--color-purple-300-opacity:60%;--color-purple-400:#7133b3;--color-purple-400-opacity:80%;--color-purple-500:#4d00a0;--color-purple-500-opacity:100%;--color-purple-600:#3e0080;--color-purple-600-opacity:80%;--color-purple-700:#2e0060;--color-purple-700-opacity:60%;--color-purple-800:#1f0040;--color-purple-800-opacity:40%;--color-purple-900:#0f0020;--color-purple-900-opacity:20%;--color-purple-950:#080010;--color-purple-950-opacity:10%;--color-red-50:#fdecec;--color-red-50-opacity:10%;--color-red-100:#fbd8d8;--color-red-100-opacity:20%;--color-red-200:#f7b1b1;--color-red-200-opacity:40%;--color-red-300:#f28a8a;--color-red-300-opacity:60%;--color-red-400:#ee6363;--color-red-400-opacity:80%;--color-red-500:#ea3c3c;--color-red-500-opacity:100%;--color-red-600:#bb3030;--color-red-600-opacity:80%;--color-red-700:#8c2424;--color-red-700-opacity:60%;--color-red-800:#5e1818;--color-red-800-opacity:40%;--color-red-900:#2f0c0c;--color-red-900-opacity:20%;--color-red-950:#170606;--color-red-950-opacity:10%;--color-orange-50:#fff1e8;--color-orange-50-opacity:10%;--color-orange-100:#ffe4d0;--color-orange-100-opacity:20%;--color-orange-200:#ffc8a1;--color-orange-200-opacity:40%;--color-orange-300:#ffad73;--color-orange-300-opacity:60%;--color-orange-400:#ff9144;--color-orange-400-opacity:80%;--color-orange-500:#ff7615;--color-orange-500-opacity:100%;--color-orange-600:#cc5e11;--color-orange-600-opacity:80%;--color-orange-700:#99470d;--color-orange-700-opacity:60%;--color-orange-800:#662f08;--color-orange-800-opacity:40%;--color-orange-900:#331804;--color-orange-900-opacity:20%;--color-orange-950:#190c02;--color-orange-950-opacity:10%;--color-yellow-50:#fff8e8;--color-yellow-50-opacity:10%;--color-yellow-100:#fff2d0;--color-yellow-100-opacity:20%;--color-yellow-200:#ffe5a1;--color-yellow-200-opacity:40%;--color-yellow-300:#ffd773;--color-yellow-300-opacity:60%;--color-yellow-400:#ffca44;--color-yellow-400-opacity:80%;--color-yellow-500:#ffbd15;--color-yellow-500-opacity:100%;--color-yellow-600:#cc9711;--color-yellow-600-opacity:80%;--color-yellow-700:#99710d;--color-yellow-700-opacity:60%;--color-yellow-800:#664c08;--color-yellow-800-opacity:40%;--color-yellow-900:#332604;--color-yellow-900-opacity:20%;--color-yellow-950:#191302;--color-yellow-950-opacity:10%;--color-cyan-50:#e8fffc;--color-cyan-50-opacity:10%;--color-cyan-100:#d0fffa;--color-cyan-100-opacity:20%;--color-cyan-200:#a1fff4;--color-cyan-200-opacity:40%;--color-cyan-300:#73ffef;--color-cyan-300-opacity:60%;--color-cyan-400:#44ffe9;--color-cyan-400-opacity:80%;--color-cyan-500:#15ffe4;--color-cyan-500-opacity:100%;--color-cyan-600:#11ccb6;--color-cyan-600-opacity:80%;--color-cyan-700:#0d9989;--color-cyan-700-opacity:60%;--color-cyan-800:#08665b;--color-cyan-800-opacity:40%;--color-cyan-900:#04332e;--color-cyan-900-opacity:20%;--color-cyan-950:#021917;--color-cyan-950-opacity:10%;--color-primary:#008149;--color-primary-hover:#006137;--color-outline:#f0f5fb;--color-error:#bb3030;--color-error-hover:#8c2424}}@layer components;@layer utilities{.box-border{box-sizing:border-box}.inline-flex{display:inline-flex}.h-\[44px\]{height:44px}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-solid{--tw-border-style:solid;border-style:solid}.border-error{border-color:#bb3030}.border-neutral-200{border-color:#c5cad3}.border-primary{border-color:#008149}.border-transparent{border-color:#0000}.bg-error{background-color:#bb3030}.bg-outline{background-color:#f0f5fb}.bg-primary{background-color:#008149}.bg-transparent{background-color:#0000}.px-3{padding-inline:calc(var(--spacing) * 3)}.body-lg,.body-lg-link{font-family:var(--default-font-family);font-size:20px;font-weight:400;line-height:24px}.body-lg-semibold{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.body-md,.body-md-link{font-family:var(--default-font-family);font-size:16px;font-weight:400;line-height:20px}.body-md-semibold{font-family:var(--default-font-family);font-size:16px;font-weight:600;line-height:20px}.body-sm,.body-sm-link{font-family:var(--default-font-family);font-size:14px;font-weight:400;line-height:16px}.body-sm-semibold{font-family:var(--default-font-family);font-size:14px;font-weight:600;line-height:16px}.caption{font-family:var(--default-font-family);font-size:12px;font-weight:400;line-height:16px}.heading-h1{font-family:var(--default-font-family);font-size:60px;font-weight:600;line-height:72px}.heading-h2{font-family:var(--default-font-family);font-size:48px;font-weight:600;line-height:56px}.heading-h3{font-family:var(--default-font-family);font-size:40px;font-weight:600;line-height:48px}.heading-h4{font-family:var(--default-font-family);font-size:32px;font-weight:600;line-height:40px}.heading-h5{font-family:var(--default-font-family);font-size:24px;font-weight:600;line-height:28px}.heading-h6{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.text-error{color:#bb3030}.text-neutral-800{color:#35373d}.text-primary{color:#008149}.text-white{color:var(--color-white)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-error{outline-color:#bb3030}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:border-error-hover:hover{border-color:#8c2424}.hover\:border-neutral-300:hover{border-color:#afb5c0}.hover\:border-primary-hover:hover{border-color:#006137}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-error-hover:hover{background-color:#8c2424}.hover\:bg-neutral-50:hover{background-color:#e5eaf1}.hover\:bg-outline:hover{background-color:#f0f5fb}.hover\:bg-primary-hover:hover{background-color:#006137}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-error-hover:hover{color:#8c2424}.hover\:text-neutral-800:hover{color:#35373d}.hover\:text-neutral-900:hover{color:#1a1c1e}.hover\:text-primary-hover:hover{color:#006137}}.focus-visible\:isolate:focus-visible{isolation:isolate}.focus-visible\:border-error:focus-visible{border-color:#bb3030}.focus-visible\:border-neutral-200:focus-visible{border-color:#c5cad3}.focus-visible\:border-primary:focus-visible{border-color:#008149}.focus-visible\:border-transparent:focus-visible{border-color:#0000}.focus-visible\:bg-error:focus-visible{background-color:#bb3030}.focus-visible\:bg-outline:focus-visible{background-color:#f0f5fb}.focus-visible\:bg-primary:focus-visible{background-color:#008149}.focus-visible\:bg-transparent:focus-visible{background-color:#0000}.focus-visible\:text-error:focus-visible{color:#bb3030}.focus-visible\:text-neutral-800:focus-visible{color:#35373d}.focus-visible\:text-primary:focus-visible{color:#008149}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-error:focus-visible{outline-color:#bb3030}.focus-visible\:outline-primary:focus-visible{outline-color:#008149}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-neutral-500:disabled{border-color:#848a98}.disabled\:border-transparent:disabled{border-color:#0000}.disabled\:bg-neutral-50:disabled{background-color:#e5eaf1}.disabled\:bg-transparent:disabled{background-color:#0000}.disabled\:text-neutral-500:disabled{color:#848a98}.data-\[status\=focus\]\:isolate[data-status=focus]{isolation:isolate}.data-\[status\=focus\]\:border-error[data-status=focus]{border-color:#bb3030}.data-\[status\=focus\]\:border-neutral-200[data-status=focus]{border-color:#c5cad3}.data-\[status\=focus\]\:border-primary[data-status=focus]{border-color:#008149}.data-\[status\=focus\]\:border-transparent[data-status=focus]{border-color:#0000}.data-\[status\=focus\]\:bg-error[data-status=focus]{background-color:#bb3030}.data-\[status\=focus\]\:bg-outline[data-status=focus]{background-color:#f0f5fb}.data-\[status\=focus\]\:bg-primary[data-status=focus]{background-color:#008149}.data-\[status\=focus\]\:bg-transparent[data-status=focus]{background-color:#0000}.data-\[status\=focus\]\:text-error[data-status=focus]{color:#bb3030}.data-\[status\=focus\]\:text-neutral-800[data-status=focus]{color:#35373d}.data-\[status\=focus\]\:text-primary[data-status=focus]{color:#008149}.data-\[status\=focus\]\:outline-2[data-status=focus]{outline-style:var(--tw-outline-style);outline-width:2px}.data-\[status\=focus\]\:outline-offset-2[data-status=focus]{outline-offset:2px}.data-\[status\=focus\]\:outline-error[data-status=focus]{outline-color:#bb3030}.data-\[status\=focus\]\:outline-primary[data-status=focus]{outline-color:#008149}.data-\[status\=hover\]\:border-error-hover[data-status=hover]{border-color:#8c2424}.data-\[status\=hover\]\:border-neutral-300[data-status=hover]{border-color:#afb5c0}.data-\[status\=hover\]\:border-primary-hover[data-status=hover]{border-color:#006137}.data-\[status\=hover\]\:border-transparent[data-status=hover]{border-color:#0000}.data-\[status\=hover\]\:bg-error-hover[data-status=hover]{background-color:#8c2424}.data-\[status\=hover\]\:bg-neutral-50[data-status=hover]{background-color:#e5eaf1}.data-\[status\=hover\]\:bg-outline[data-status=hover]{background-color:#f0f5fb}.data-\[status\=hover\]\:bg-primary-hover[data-status=hover]{background-color:#006137}.data-\[status\=hover\]\:bg-transparent[data-status=hover]{background-color:#0000}.data-\[status\=hover\]\:text-error-hover[data-status=hover]{color:#8c2424}.data-\[status\=hover\]\:text-neutral-800[data-status=hover]{color:#35373d}.data-\[status\=hover\]\:text-neutral-900[data-status=hover]{color:#1a1c1e}.data-\[status\=hover\]\:text-primary-hover[data-status=hover]{color:#006137}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-neutral-50:#e5eaf1;--color-neutral-200:#c5cad3;--color-neutral-300:#afb5c0;--color-neutral-500:#848a98;--color-neutral-800:#35373d;--color-neutral-900:#1a1c1e;--color-white:#fff;--spacing:.25rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:#008149;--color-primary-hover:#006137;--color-outline:#f0f5fb;--color-error:#bb3030;--color-error-hover:#8c2424}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--color-neutral-25:#ebf0f6;--color-neutral-25-opacity:5%;--color-neutral-50:#e5eaf1;--color-neutral-50-opacity:10%;--color-neutral-100:#dae0e7;--color-neutral-100-opacity:20%;--color-neutral-200:#c5cad3;--color-neutral-200-opacity:40%;--color-neutral-300:#afb5c0;--color-neutral-300-opacity:60%;--color-neutral-400:#9a9fac;--color-neutral-400-opacity:80%;--color-neutral-500:#848a98;--color-neutral-500-opacity:100%;--color-neutral-600:#6a6e7a;--color-neutral-600-opacity:80%;--color-neutral-700:#4f535b;--color-neutral-700-opacity:60%;--color-neutral-800:#35373d;--color-neutral-800-opacity:40%;--color-neutral-900:#1a1c1e;--color-neutral-900-opacity:20%;--color-neutral-950:#0d0e0f;--color-neutral-950-opacity:10%;--color-green-50:#e6f6ef;--color-green-50-opacity:10%;--color-green-100:#cceccc;--color-green-100-opacity:20%;--color-green-200:#99d999;--color-green-200-opacity:40%;--color-green-300:#66c766;--color-green-300-opacity:60%;--color-green-400:#33b433;--color-green-400-opacity:80%;--color-green-500:#00a000;--color-green-500-opacity:100%;--color-green-600:#008100;--color-green-600-opacity:80%;--color-green-700:#006100;--color-green-700-opacity:60%;--color-green-800:#004000;--color-green-800-opacity:40%;--color-green-900:#002000;--color-green-900-opacity:20%;--color-green-950:#001000;--color-green-950-opacity:10%;--color-blue-50:#e6ecf6;--color-blue-50-opacity:10%;--color-blue-100:#ccd9ec;--color-blue-100-opacity:20%;--color-blue-200:#99b3d9;--color-blue-200-opacity:40%;--color-blue-300:#668cc6;--color-blue-300-opacity:60%;--color-blue-400:#3366b3;--color-blue-400-opacity:80%;--color-blue-500:#0040a0;--color-blue-500-opacity:100%;--color-blue-600:#003380;--color-blue-600-opacity:80%;--color-blue-700:#002660;--color-blue-700-opacity:60%;--color-blue-800:#001a40;--color-blue-800-opacity:40%;--color-blue-900:#000d20;--color-blue-900-opacity:20%;--color-blue-950:#000610;--color-blue-950-opacity:10%;--color-purple-50:#ede6f6;--color-purple-50-opacity:10%;--color-purple-100:#dbccec;--color-purple-100-opacity:20%;--color-purple-200:#b899d9;--color-purple-200-opacity:40%;--color-purple-300:#9466c6;--color-purple-300-opacity:60%;--color-purple-400:#7133b3;--color-purple-400-opacity:80%;--color-purple-500:#4d00a0;--color-purple-500-opacity:100%;--color-purple-600:#3e0080;--color-purple-600-opacity:80%;--color-purple-700:#2e0060;--color-purple-700-opacity:60%;--color-purple-800:#1f0040;--color-purple-800-opacity:40%;--color-purple-900:#0f0020;--color-purple-900-opacity:20%;--color-purple-950:#080010;--color-purple-950-opacity:10%;--color-red-50:#fdecec;--color-red-50-opacity:10%;--color-red-100:#fbd8d8;--color-red-100-opacity:20%;--color-red-200:#f7b1b1;--color-red-200-opacity:40%;--color-red-300:#f28a8a;--color-red-300-opacity:60%;--color-red-400:#ee6363;--color-red-400-opacity:80%;--color-red-500:#ea3c3c;--color-red-500-opacity:100%;--color-red-600:#bb3030;--color-red-600-opacity:80%;--color-red-700:#8c2424;--color-red-700-opacity:60%;--color-red-800:#5e1818;--color-red-800-opacity:40%;--color-red-900:#2f0c0c;--color-red-900-opacity:20%;--color-red-950:#170606;--color-red-950-opacity:10%;--color-orange-50:#fff1e8;--color-orange-50-opacity:10%;--color-orange-100:#ffe4d0;--color-orange-100-opacity:20%;--color-orange-200:#ffc8a1;--color-orange-200-opacity:40%;--color-orange-300:#ffad73;--color-orange-300-opacity:60%;--color-orange-400:#ff9144;--color-orange-400-opacity:80%;--color-orange-500:#ff7615;--color-orange-500-opacity:100%;--color-orange-600:#cc5e11;--color-orange-600-opacity:80%;--color-orange-700:#99470d;--color-orange-700-opacity:60%;--color-orange-800:#662f08;--color-orange-800-opacity:40%;--color-orange-900:#331804;--color-orange-900-opacity:20%;--color-orange-950:#190c02;--color-orange-950-opacity:10%;--color-yellow-50:#fff8e8;--color-yellow-50-opacity:10%;--color-yellow-100:#fff2d0;--color-yellow-100-opacity:20%;--color-yellow-200:#ffe5a1;--color-yellow-200-opacity:40%;--color-yellow-300:#ffd773;--color-yellow-300-opacity:60%;--color-yellow-400:#ffca44;--color-yellow-400-opacity:80%;--color-yellow-500:#ffbd15;--color-yellow-500-opacity:100%;--color-yellow-600:#cc9711;--color-yellow-600-opacity:80%;--color-yellow-700:#99710d;--color-yellow-700-opacity:60%;--color-yellow-800:#664c08;--color-yellow-800-opacity:40%;--color-yellow-900:#332604;--color-yellow-900-opacity:20%;--color-yellow-950:#191302;--color-yellow-950-opacity:10%;--color-cyan-50:#e8fffc;--color-cyan-50-opacity:10%;--color-cyan-100:#d0fffa;--color-cyan-100-opacity:20%;--color-cyan-200:#a1fff4;--color-cyan-200-opacity:40%;--color-cyan-300:#73ffef;--color-cyan-300-opacity:60%;--color-cyan-400:#44ffe9;--color-cyan-400-opacity:80%;--color-cyan-500:#15ffe4;--color-cyan-500-opacity:100%;--color-cyan-600:#11ccb6;--color-cyan-600-opacity:80%;--color-cyan-700:#0d9989;--color-cyan-700-opacity:60%;--color-cyan-800:#08665b;--color-cyan-800-opacity:40%;--color-cyan-900:#04332e;--color-cyan-900-opacity:20%;--color-cyan-950:#021917;--color-cyan-950-opacity:10%;--color-primary:#008149;--color-primary-hover:#006137;--color-outline:#f0f5fb;--color-error:#bb3030;--color-error-hover:#8c2424}}@layer components;@layer utilities{.box-border{box-sizing:border-box}.inline-flex{display:inline-flex}.h-\[44px\]{height:44px}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-solid{--tw-border-style:solid;border-style:solid}.border-error{border-color:var(--color-error)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-primary{border-color:var(--color-primary)}.border-transparent{border-color:#0000}.bg-error{background-color:var(--color-error)}.bg-outline{background-color:var(--color-outline)}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:#0000}.px-3{padding-inline:calc(var(--spacing) * 3)}.body-lg,.body-lg-link{font-family:var(--default-font-family);font-size:20px;font-weight:400;line-height:24px}.body-lg-semibold{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.body-md,.body-md-link{font-family:var(--default-font-family);font-size:16px;font-weight:400;line-height:20px}.body-md-semibold{font-family:var(--default-font-family);font-size:16px;font-weight:600;line-height:20px}.body-sm,.body-sm-link{font-family:var(--default-font-family);font-size:14px;font-weight:400;line-height:16px}.body-sm-semibold{font-family:var(--default-font-family);font-size:14px;font-weight:600;line-height:16px}.caption{font-family:var(--default-font-family);font-size:12px;font-weight:400;line-height:16px}.heading-h1{font-family:var(--default-font-family);font-size:60px;font-weight:600;line-height:72px}.heading-h2{font-family:var(--default-font-family);font-size:48px;font-weight:600;line-height:56px}.heading-h3{font-family:var(--default-font-family);font-size:40px;font-weight:600;line-height:48px}.heading-h4{font-family:var(--default-font-family);font-size:32px;font-weight:600;line-height:40px}.heading-h5{font-family:var(--default-font-family);font-size:24px;font-weight:600;line-height:28px}.heading-h6{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.text-error{color:var(--color-error)}.text-neutral-800{color:var(--color-neutral-800)}.text-primary{color:var(--color-primary)}.text-white{color:var(--color-white)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-error{outline-color:var(--color-error)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:border-error-hover:hover{border-color:var(--color-error-hover)}.hover\:border-neutral-300:hover{border-color:var(--color-neutral-300)}.hover\:border-primary-hover:hover{border-color:var(--color-primary-hover)}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-error-hover:hover{background-color:var(--color-error-hover)}.hover\:bg-neutral-50:hover{background-color:var(--color-neutral-50)}.hover\:bg-outline:hover{background-color:var(--color-outline)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-error-hover:hover{color:var(--color-error-hover)}.hover\:text-neutral-800:hover{color:var(--color-neutral-800)}.hover\:text-neutral-900:hover{color:var(--color-neutral-900)}.hover\:text-primary-hover:hover{color:var(--color-primary-hover)}}.focus-visible\:isolate:focus-visible{isolation:isolate}.focus-visible\:border-error:focus-visible{border-color:var(--color-error)}.focus-visible\:border-neutral-200:focus-visible{border-color:var(--color-neutral-200)}.focus-visible\:border-primary:focus-visible{border-color:var(--color-primary)}.focus-visible\:border-transparent:focus-visible{border-color:#0000}.focus-visible\:bg-error:focus-visible{background-color:var(--color-error)}.focus-visible\:bg-outline:focus-visible{background-color:var(--color-outline)}.focus-visible\:bg-primary:focus-visible{background-color:var(--color-primary)}.focus-visible\:bg-transparent:focus-visible{background-color:#0000}.focus-visible\:text-error:focus-visible{color:var(--color-error)}.focus-visible\:text-neutral-800:focus-visible{color:var(--color-neutral-800)}.focus-visible\:text-primary:focus-visible{color:var(--color-primary)}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-error:focus-visible{outline-color:var(--color-error)}.focus-visible\:outline-primary:focus-visible{outline-color:var(--color-primary)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-neutral-500:disabled{border-color:var(--color-neutral-500)}.disabled\:border-transparent:disabled{border-color:#0000}.disabled\:bg-neutral-50:disabled{background-color:var(--color-neutral-50)}.disabled\:bg-transparent:disabled{background-color:#0000}.disabled\:text-neutral-500:disabled{color:var(--color-neutral-500)}.data-\[status\=focus\]\:isolate[data-status=focus]{isolation:isolate}.data-\[status\=focus\]\:border-error[data-status=focus]{border-color:var(--color-error)}.data-\[status\=focus\]\:border-neutral-200[data-status=focus]{border-color:var(--color-neutral-200)}.data-\[status\=focus\]\:border-primary[data-status=focus]{border-color:var(--color-primary)}.data-\[status\=focus\]\:border-transparent[data-status=focus]{border-color:#0000}.data-\[status\=focus\]\:bg-error[data-status=focus]{background-color:var(--color-error)}.data-\[status\=focus\]\:bg-outline[data-status=focus]{background-color:var(--color-outline)}.data-\[status\=focus\]\:bg-primary[data-status=focus]{background-color:var(--color-primary)}.data-\[status\=focus\]\:bg-transparent[data-status=focus]{background-color:#0000}.data-\[status\=focus\]\:text-error[data-status=focus]{color:var(--color-error)}.data-\[status\=focus\]\:text-neutral-800[data-status=focus]{color:var(--color-neutral-800)}.data-\[status\=focus\]\:text-primary[data-status=focus]{color:var(--color-primary)}.data-\[status\=focus\]\:outline-2[data-status=focus]{outline-style:var(--tw-outline-style);outline-width:2px}.data-\[status\=focus\]\:outline-offset-2[data-status=focus]{outline-offset:2px}.data-\[status\=focus\]\:outline-error[data-status=focus]{outline-color:var(--color-error)}.data-\[status\=focus\]\:outline-primary[data-status=focus]{outline-color:var(--color-primary)}.data-\[status\=hover\]\:border-error-hover[data-status=hover]{border-color:var(--color-error-hover)}.data-\[status\=hover\]\:border-neutral-300[data-status=hover]{border-color:var(--color-neutral-300)}.data-\[status\=hover\]\:border-primary-hover[data-status=hover]{border-color:var(--color-primary-hover)}.data-\[status\=hover\]\:border-transparent[data-status=hover]{border-color:#0000}.data-\[status\=hover\]\:bg-error-hover[data-status=hover]{background-color:var(--color-error-hover)}.data-\[status\=hover\]\:bg-neutral-50[data-status=hover]{background-color:var(--color-neutral-50)}.data-\[status\=hover\]\:bg-outline[data-status=hover]{background-color:var(--color-outline)}.data-\[status\=hover\]\:bg-primary-hover[data-status=hover]{background-color:var(--color-primary-hover)}.data-\[status\=hover\]\:bg-transparent[data-status=hover]{background-color:#0000}.data-\[status\=hover\]\:text-error-hover[data-status=hover]{color:var(--color-error-hover)}.data-\[status\=hover\]\:text-neutral-800[data-status=hover]{color:var(--color-neutral-800)}.data-\[status\=hover\]\:text-neutral-900[data-status=hover]{color:var(--color-neutral-900)}.data-\[status\=hover\]\:text-primary-hover[data-status=hover]{color:var(--color-primary-hover)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
|
|
3
3
|
/*$vite$:1*/
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -105,419 +105,4 @@ function o({ variant: e, className: n, type: r = "button", children: i, ...o })
|
|
|
105
105
|
});
|
|
106
106
|
}
|
|
107
107
|
//#endregion
|
|
108
|
-
|
|
109
|
-
var s = {
|
|
110
|
-
25: "5%",
|
|
111
|
-
50: "10%",
|
|
112
|
-
100: "20%",
|
|
113
|
-
200: "40%",
|
|
114
|
-
300: "60%",
|
|
115
|
-
400: "80%",
|
|
116
|
-
500: "100%",
|
|
117
|
-
600: "80%",
|
|
118
|
-
700: "60%",
|
|
119
|
-
800: "40%",
|
|
120
|
-
900: "20%",
|
|
121
|
-
950: "10%"
|
|
122
|
-
}, c = {
|
|
123
|
-
neutral: {
|
|
124
|
-
25: "#EBF0F6",
|
|
125
|
-
50: "#E5EAF1",
|
|
126
|
-
100: "#DAE0E7",
|
|
127
|
-
200: "#C5CAD3",
|
|
128
|
-
300: "#AFB5C0",
|
|
129
|
-
400: "#9A9FAC",
|
|
130
|
-
500: "#848A98",
|
|
131
|
-
600: "#6A6E7A",
|
|
132
|
-
700: "#4F535B",
|
|
133
|
-
800: "#35373D",
|
|
134
|
-
900: "#1A1C1E",
|
|
135
|
-
950: "#0D0E0F"
|
|
136
|
-
},
|
|
137
|
-
green: {
|
|
138
|
-
50: "#E6F6EF",
|
|
139
|
-
100: "#CCECCC",
|
|
140
|
-
200: "#99D999",
|
|
141
|
-
300: "#66C766",
|
|
142
|
-
400: "#33B433",
|
|
143
|
-
500: "#00A000",
|
|
144
|
-
600: "#008100",
|
|
145
|
-
700: "#006100",
|
|
146
|
-
800: "#004000",
|
|
147
|
-
900: "#002000",
|
|
148
|
-
950: "#001000"
|
|
149
|
-
},
|
|
150
|
-
blue: {
|
|
151
|
-
50: "#E6ECF6",
|
|
152
|
-
100: "#CCD9EC",
|
|
153
|
-
200: "#99B3D9",
|
|
154
|
-
300: "#668CC6",
|
|
155
|
-
400: "#3366B3",
|
|
156
|
-
500: "#0040A0",
|
|
157
|
-
600: "#003380",
|
|
158
|
-
700: "#002660",
|
|
159
|
-
800: "#001A40",
|
|
160
|
-
900: "#000D20",
|
|
161
|
-
950: "#000610"
|
|
162
|
-
},
|
|
163
|
-
purple: {
|
|
164
|
-
50: "#EDE6F6",
|
|
165
|
-
100: "#DBCCEC",
|
|
166
|
-
200: "#B899D9",
|
|
167
|
-
300: "#9466C6",
|
|
168
|
-
400: "#7133B3",
|
|
169
|
-
500: "#4D00A0",
|
|
170
|
-
600: "#3E0080",
|
|
171
|
-
700: "#2E0060",
|
|
172
|
-
800: "#1F0040",
|
|
173
|
-
900: "#0F0020",
|
|
174
|
-
950: "#080010"
|
|
175
|
-
},
|
|
176
|
-
red: {
|
|
177
|
-
50: "#FDECEC",
|
|
178
|
-
100: "#FBD8D8",
|
|
179
|
-
200: "#F7B1B1",
|
|
180
|
-
300: "#F28A8A",
|
|
181
|
-
400: "#EE6363",
|
|
182
|
-
500: "#EA3C3C",
|
|
183
|
-
600: "#BB3030",
|
|
184
|
-
700: "#8C2424",
|
|
185
|
-
800: "#5E1818",
|
|
186
|
-
900: "#2F0C0C",
|
|
187
|
-
950: "#170606"
|
|
188
|
-
},
|
|
189
|
-
orange: {
|
|
190
|
-
50: "#FFF1E8",
|
|
191
|
-
100: "#FFE4D0",
|
|
192
|
-
200: "#FFC8A1",
|
|
193
|
-
300: "#FFAD73",
|
|
194
|
-
400: "#FF9144",
|
|
195
|
-
500: "#FF7615",
|
|
196
|
-
600: "#CC5E11",
|
|
197
|
-
700: "#99470D",
|
|
198
|
-
800: "#662F08",
|
|
199
|
-
900: "#331804",
|
|
200
|
-
950: "#190C02"
|
|
201
|
-
},
|
|
202
|
-
yellow: {
|
|
203
|
-
50: "#FFF8E8",
|
|
204
|
-
100: "#FFF2D0",
|
|
205
|
-
200: "#FFE5A1",
|
|
206
|
-
300: "#FFD773",
|
|
207
|
-
400: "#FFCA44",
|
|
208
|
-
500: "#FFBD15",
|
|
209
|
-
600: "#CC9711",
|
|
210
|
-
700: "#99710D",
|
|
211
|
-
800: "#664C08",
|
|
212
|
-
900: "#332604",
|
|
213
|
-
950: "#191302"
|
|
214
|
-
},
|
|
215
|
-
cyan: {
|
|
216
|
-
50: "#E8FFFC",
|
|
217
|
-
100: "#D0FFFA",
|
|
218
|
-
200: "#A1FFF4",
|
|
219
|
-
300: "#73FFEF",
|
|
220
|
-
400: "#44FFE9",
|
|
221
|
-
500: "#15FFE4",
|
|
222
|
-
600: "#11CCB6",
|
|
223
|
-
700: "#0D9989",
|
|
224
|
-
800: "#08665B",
|
|
225
|
-
900: "#04332E",
|
|
226
|
-
950: "#021917"
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
|
-
function l(e) {
|
|
230
|
-
return s[Number(e)];
|
|
231
|
-
}
|
|
232
|
-
function u(e) {
|
|
233
|
-
let t = c[e];
|
|
234
|
-
return Object.fromEntries(Object.keys(t).map((t) => [t, `var(--color-${e}-${t})`]));
|
|
235
|
-
}
|
|
236
|
-
var d = Object.fromEntries(Object.entries(c).flatMap(([e, t]) => Object.entries(t).flatMap(([t, n]) => [[`--color-${e}-${t}`, n], [`--color-${e}-${t}-opacity`, l(t)]]))), f = {
|
|
237
|
-
neutral: u("neutral"),
|
|
238
|
-
green: u("green"),
|
|
239
|
-
blue: u("blue"),
|
|
240
|
-
purple: u("purple"),
|
|
241
|
-
red: u("red"),
|
|
242
|
-
orange: u("orange"),
|
|
243
|
-
yellow: u("yellow"),
|
|
244
|
-
cyan: u("cyan")
|
|
245
|
-
}, p = { sans: "var(--default-font-family)" }, m = {
|
|
246
|
-
regular: 400,
|
|
247
|
-
semibold: 600
|
|
248
|
-
}, h = {
|
|
249
|
-
xs: "12px",
|
|
250
|
-
sm: "14px",
|
|
251
|
-
md: "16px",
|
|
252
|
-
lg: "20px",
|
|
253
|
-
xl: "24px",
|
|
254
|
-
"2xl": "32px",
|
|
255
|
-
"3xl": "40px",
|
|
256
|
-
"4xl": "48px",
|
|
257
|
-
"5xl": "60px"
|
|
258
|
-
}, g = {
|
|
259
|
-
16: h.md,
|
|
260
|
-
20: h.lg,
|
|
261
|
-
24: h.xl,
|
|
262
|
-
28: "28px",
|
|
263
|
-
40: h["3xl"],
|
|
264
|
-
48: h["4xl"],
|
|
265
|
-
56: "56px",
|
|
266
|
-
72: "72px"
|
|
267
|
-
}, _ = {
|
|
268
|
-
primary: "#008149",
|
|
269
|
-
"primary-hover": "#006137",
|
|
270
|
-
outline: "#F0F5FB",
|
|
271
|
-
error: "#BB3030",
|
|
272
|
-
"error-hover": "#8C2424"
|
|
273
|
-
}, v = {
|
|
274
|
-
"--color-primary": _.primary,
|
|
275
|
-
"--color-primary-hover": _["primary-hover"],
|
|
276
|
-
"--color-outline": _.outline,
|
|
277
|
-
"--color-error": _.error,
|
|
278
|
-
"--color-error-hover": _["error-hover"]
|
|
279
|
-
}, y = {
|
|
280
|
-
background: c.neutral[50],
|
|
281
|
-
border: c.neutral[500],
|
|
282
|
-
text: c.neutral[500]
|
|
283
|
-
}, b = {
|
|
284
|
-
primary: {
|
|
285
|
-
default: {
|
|
286
|
-
background: _.primary,
|
|
287
|
-
border: _.primary
|
|
288
|
-
},
|
|
289
|
-
hover: {
|
|
290
|
-
background: _["primary-hover"],
|
|
291
|
-
border: _["primary-hover"]
|
|
292
|
-
},
|
|
293
|
-
focus: {
|
|
294
|
-
background: _.primary,
|
|
295
|
-
border: _.primary
|
|
296
|
-
},
|
|
297
|
-
disabled: y
|
|
298
|
-
},
|
|
299
|
-
outline: {
|
|
300
|
-
default: {
|
|
301
|
-
background: _.outline,
|
|
302
|
-
border: _.primary
|
|
303
|
-
},
|
|
304
|
-
hover: {
|
|
305
|
-
background: _.outline,
|
|
306
|
-
border: _["primary-hover"]
|
|
307
|
-
},
|
|
308
|
-
focus: {
|
|
309
|
-
background: _.outline,
|
|
310
|
-
border: _.primary
|
|
311
|
-
},
|
|
312
|
-
disabled: y
|
|
313
|
-
},
|
|
314
|
-
transparent: {
|
|
315
|
-
default: {
|
|
316
|
-
background: "transparent",
|
|
317
|
-
border: "transparent",
|
|
318
|
-
text: _.primary
|
|
319
|
-
},
|
|
320
|
-
hover: {
|
|
321
|
-
background: "transparent",
|
|
322
|
-
border: "transparent",
|
|
323
|
-
text: _["primary-hover"]
|
|
324
|
-
},
|
|
325
|
-
focus: {
|
|
326
|
-
background: "transparent",
|
|
327
|
-
border: "transparent",
|
|
328
|
-
text: _.primary
|
|
329
|
-
},
|
|
330
|
-
disabled: {
|
|
331
|
-
background: "transparent",
|
|
332
|
-
border: "transparent",
|
|
333
|
-
text: c.neutral[500]
|
|
334
|
-
}
|
|
335
|
-
},
|
|
336
|
-
error: {
|
|
337
|
-
default: {
|
|
338
|
-
background: _.error,
|
|
339
|
-
border: _.error
|
|
340
|
-
},
|
|
341
|
-
hover: {
|
|
342
|
-
background: _["error-hover"],
|
|
343
|
-
border: _["error-hover"]
|
|
344
|
-
},
|
|
345
|
-
focus: {
|
|
346
|
-
background: _.error,
|
|
347
|
-
border: _.error
|
|
348
|
-
},
|
|
349
|
-
disabled: y
|
|
350
|
-
},
|
|
351
|
-
"outline-error": {
|
|
352
|
-
default: {
|
|
353
|
-
background: _.outline,
|
|
354
|
-
border: _.error,
|
|
355
|
-
text: _.error
|
|
356
|
-
},
|
|
357
|
-
hover: {
|
|
358
|
-
background: _.outline,
|
|
359
|
-
border: _["error-hover"],
|
|
360
|
-
text: _["error-hover"]
|
|
361
|
-
},
|
|
362
|
-
focus: {
|
|
363
|
-
background: _.outline,
|
|
364
|
-
border: _.error,
|
|
365
|
-
text: _.error
|
|
366
|
-
},
|
|
367
|
-
disabled: y
|
|
368
|
-
},
|
|
369
|
-
"transparent-error": {
|
|
370
|
-
default: {
|
|
371
|
-
background: "transparent",
|
|
372
|
-
border: "transparent",
|
|
373
|
-
text: _.error
|
|
374
|
-
},
|
|
375
|
-
hover: {
|
|
376
|
-
background: "transparent",
|
|
377
|
-
border: "transparent",
|
|
378
|
-
text: _["error-hover"]
|
|
379
|
-
},
|
|
380
|
-
focus: {
|
|
381
|
-
background: "transparent",
|
|
382
|
-
border: "transparent",
|
|
383
|
-
text: _.error
|
|
384
|
-
},
|
|
385
|
-
disabled: {
|
|
386
|
-
background: "transparent",
|
|
387
|
-
border: "transparent",
|
|
388
|
-
text: c.neutral[500]
|
|
389
|
-
}
|
|
390
|
-
},
|
|
391
|
-
neutral: {
|
|
392
|
-
default: {
|
|
393
|
-
background: _.outline,
|
|
394
|
-
border: c.neutral[200],
|
|
395
|
-
text: c.neutral[800]
|
|
396
|
-
},
|
|
397
|
-
hover: {
|
|
398
|
-
background: c.neutral[50],
|
|
399
|
-
border: c.neutral[300],
|
|
400
|
-
text: c.neutral[800]
|
|
401
|
-
},
|
|
402
|
-
focus: {
|
|
403
|
-
background: _.outline,
|
|
404
|
-
border: c.neutral[200],
|
|
405
|
-
text: c.neutral[800]
|
|
406
|
-
},
|
|
407
|
-
disabled: y
|
|
408
|
-
},
|
|
409
|
-
"outline-neutral": {
|
|
410
|
-
default: {
|
|
411
|
-
background: _.outline,
|
|
412
|
-
border: c.neutral[200],
|
|
413
|
-
text: c.neutral[800]
|
|
414
|
-
},
|
|
415
|
-
hover: {
|
|
416
|
-
background: _.outline,
|
|
417
|
-
border: c.neutral[300],
|
|
418
|
-
text: c.neutral[800]
|
|
419
|
-
},
|
|
420
|
-
focus: {
|
|
421
|
-
background: _.outline,
|
|
422
|
-
border: c.neutral[200],
|
|
423
|
-
text: c.neutral[800]
|
|
424
|
-
},
|
|
425
|
-
disabled: y
|
|
426
|
-
},
|
|
427
|
-
"transparent-neutral": {
|
|
428
|
-
default: {
|
|
429
|
-
background: "transparent",
|
|
430
|
-
border: "transparent",
|
|
431
|
-
text: c.neutral[800]
|
|
432
|
-
},
|
|
433
|
-
hover: {
|
|
434
|
-
background: "transparent",
|
|
435
|
-
border: "transparent",
|
|
436
|
-
text: c.neutral[900]
|
|
437
|
-
},
|
|
438
|
-
focus: {
|
|
439
|
-
background: "transparent",
|
|
440
|
-
border: "transparent",
|
|
441
|
-
text: c.neutral[800]
|
|
442
|
-
},
|
|
443
|
-
disabled: {
|
|
444
|
-
background: "transparent",
|
|
445
|
-
border: "transparent",
|
|
446
|
-
text: c.neutral[500]
|
|
447
|
-
}
|
|
448
|
-
}
|
|
449
|
-
}, x = {
|
|
450
|
-
fontFamily: p.sans,
|
|
451
|
-
fontWeight: m.regular
|
|
452
|
-
}, S = {
|
|
453
|
-
...x,
|
|
454
|
-
fontWeight: m.semibold
|
|
455
|
-
}, C = {
|
|
456
|
-
...x,
|
|
457
|
-
fontSize: h.sm,
|
|
458
|
-
lineHeight: g[16]
|
|
459
|
-
}, w = {
|
|
460
|
-
...x,
|
|
461
|
-
fontSize: h.md,
|
|
462
|
-
lineHeight: g[20]
|
|
463
|
-
}, T = {
|
|
464
|
-
...x,
|
|
465
|
-
fontSize: h.lg,
|
|
466
|
-
lineHeight: g[24]
|
|
467
|
-
}, E = {
|
|
468
|
-
"heading-h1": {
|
|
469
|
-
...S,
|
|
470
|
-
fontSize: h["5xl"],
|
|
471
|
-
lineHeight: g[72]
|
|
472
|
-
},
|
|
473
|
-
"heading-h2": {
|
|
474
|
-
...S,
|
|
475
|
-
fontSize: h["4xl"],
|
|
476
|
-
lineHeight: g[56]
|
|
477
|
-
},
|
|
478
|
-
"heading-h3": {
|
|
479
|
-
...S,
|
|
480
|
-
fontSize: h["3xl"],
|
|
481
|
-
lineHeight: g[48]
|
|
482
|
-
},
|
|
483
|
-
"heading-h4": {
|
|
484
|
-
...S,
|
|
485
|
-
fontSize: h["2xl"],
|
|
486
|
-
lineHeight: g[40]
|
|
487
|
-
},
|
|
488
|
-
"heading-h5": {
|
|
489
|
-
...S,
|
|
490
|
-
fontSize: h.xl,
|
|
491
|
-
lineHeight: g[28]
|
|
492
|
-
},
|
|
493
|
-
"heading-h6": {
|
|
494
|
-
...S,
|
|
495
|
-
fontSize: h.lg,
|
|
496
|
-
lineHeight: g[24]
|
|
497
|
-
},
|
|
498
|
-
"body-sm": C,
|
|
499
|
-
"body-sm-semibold": {
|
|
500
|
-
...C,
|
|
501
|
-
fontWeight: m.semibold
|
|
502
|
-
},
|
|
503
|
-
"body-sm-link": C,
|
|
504
|
-
"body-md": w,
|
|
505
|
-
"body-md-link": w,
|
|
506
|
-
"body-md-semibold": {
|
|
507
|
-
...w,
|
|
508
|
-
fontWeight: m.semibold
|
|
509
|
-
},
|
|
510
|
-
"body-lg": T,
|
|
511
|
-
"body-lg-link": T,
|
|
512
|
-
"body-lg-semibold": {
|
|
513
|
-
...T,
|
|
514
|
-
fontWeight: m.semibold
|
|
515
|
-
},
|
|
516
|
-
caption: {
|
|
517
|
-
...x,
|
|
518
|
-
fontSize: h.xs,
|
|
519
|
-
lineHeight: g[16]
|
|
520
|
-
}
|
|
521
|
-
};
|
|
522
|
-
//#endregion
|
|
523
|
-
export { o as Button, b as button, a as buttonVariants, d as colorCssVariables, f as colorCssVars, s as colorShadeOpacity, c as colors, p as fontFamily, h as fontSize, m as fontWeight, g as lineHeight, v as semanticColorCssVariables, _ as semanticColors, E as typography };
|
|
108
|
+
export { o as Button };
|