@beaubrain/web-design-system 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -66
- package/dist/assets/web-design-system.css +1 -0
- package/dist/components/Base/index.d.ts +11 -0
- package/dist/components/Button/button.defs.d.ts +121 -0
- package/dist/components/Button/button.helpers.d.ts +5 -0
- package/dist/components/Button/index.d.ts +117 -0
- package/dist/components/Flex/flex.defs.d.ts +285 -0
- package/dist/components/Flex/index.d.ts +15 -0
- package/dist/components/Outlet/Outlet.test.d.ts +1 -0
- package/dist/components/Outlet/index.d.ts +15 -0
- package/dist/components/Spinner/index.d.ts +67 -0
- package/dist/components/Spinner/spinner.defs.d.ts +61 -0
- package/dist/components/Text/index.d.ts +21 -0
- package/dist/components/Text/text.defs.d.ts +93 -0
- package/dist/components/VisuallyHidden/index.d.ts +17 -0
- package/dist/components/index.d.ts +7 -0
- package/dist/core/defs/as-child.defs.d.ts +6 -0
- package/dist/core/defs/color.defs.d.ts +20 -0
- package/dist/core/defs/gap.defs.d.ts +22 -0
- package/dist/core/defs/height.defs.d.ts +21 -0
- package/dist/core/defs/index.d.ts +15 -0
- package/dist/core/defs/layout.defs.d.ts +194 -0
- package/dist/core/defs/leading-trim.defs.d.ts +9 -0
- package/dist/core/defs/margin.defs.d.ts +48 -0
- package/dist/core/defs/padding.defs.d.ts +49 -0
- package/dist/core/defs/prop-defs.d.ts +55 -0
- package/dist/core/defs/radius.defs.d.ts +14 -0
- package/dist/core/defs/text-align.defs.d.ts +8 -0
- package/dist/core/defs/text-wrap.defs.d.ts +8 -0
- package/dist/core/defs/truncate.defs.d.ts +7 -0
- package/dist/core/defs/weight.defs.d.ts +8 -0
- package/dist/core/defs/width.defs.d.ts +21 -0
- package/dist/core/react/component-props.d.ts +4 -0
- package/dist/core/react/extract-props.d.ts +11 -0
- package/dist/core/react/get-styles.d.ts +18 -0
- package/dist/core/react/index.d.ts +4 -0
- package/dist/core/react/merge-styles.d.ts +5 -0
- package/dist/core/react/props.d.ts +6 -0
- package/dist/core/react/ref.d.ts +5 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +697 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,69 +1,124 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
##
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
1
|
+
# Beaubrain Design System
|
|
2
|
+
|
|
3
|
+
Beaubrain 웹 제품을 위한 리액트 기반 디자인 시스템 라이브러리입니다.
|
|
4
|
+
일관된 사용자 경험을 제공하고 생산성을 높이기 위해 재사용 가능한 UI 컴포넌트와 스타일 토큰을 제공합니다.
|
|
5
|
+
|
|
6
|
+
## 피그마
|
|
7
|
+
|
|
8
|
+
[피그마 디자인 시스템 바로가기](https://www.figma.com/file/xxxxx/Beaubrain-Design-System)
|
|
9
|
+
|
|
10
|
+
## ✨ 특징
|
|
11
|
+
|
|
12
|
+
- **React & TypeScript**: 타입 안정성을 보장하는 리액트 컴포넌트
|
|
13
|
+
- **Vite**: 빠르고 가벼운 빌드 시스템
|
|
14
|
+
- **Storybook**: 컴포넌트 문서화 및 독립적인 개발 환경 제공
|
|
15
|
+
- **Token System**: 색상, 여백, 타이포그래피 등을 CSS Variable로 관리
|
|
16
|
+
- **A11y**: 웹 접근성 준수 (VisuallyHidden 등 제공)
|
|
17
|
+
|
|
18
|
+
## 📦 설치
|
|
19
|
+
|
|
20
|
+
패키지 매니저를 사용하여 설치할 수 있습니다.
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
# pnpm (권장)
|
|
24
|
+
pnpm add @beaubrain/web-design-system
|
|
25
|
+
|
|
26
|
+
# npm
|
|
27
|
+
npm install @beaubrain/web-design-system
|
|
28
|
+
|
|
29
|
+
# yarn
|
|
30
|
+
yarn add @beaubrain/web-design-system
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 🚀 사용 방법
|
|
34
|
+
|
|
35
|
+
### 1. 스타일 시트 불러오기
|
|
36
|
+
|
|
37
|
+
프로젝트의 진입점(예: `App.tsx` 또는 `main.tsx`)에서 스타일 파일을 import 해야 합니다.
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import '@beaubrain/web-design-system/dist/index.css';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 2. 컴포넌트 사용하기
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import { Button, Text, Flex } from '@beaubrain/web-design-system';
|
|
47
|
+
|
|
48
|
+
function App() {
|
|
49
|
+
return (
|
|
50
|
+
<Flex direction="column" gap="4">
|
|
51
|
+
<Text size="5" weight="bold">
|
|
52
|
+
Hello, Beaubrain!
|
|
53
|
+
</Text>
|
|
54
|
+
<Button variant="fill-primary" onClick={() => alert('Clicked!')}>
|
|
55
|
+
Click Me
|
|
56
|
+
</Button>
|
|
57
|
+
</Flex>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## 🧩 제공되는 컴포넌트
|
|
63
|
+
|
|
64
|
+
현재 제공되는 주요 컴포넌트는 다음과 같습니다.
|
|
65
|
+
|
|
66
|
+
- **Layout**: `Flex`, `Outlet`, `Base`
|
|
67
|
+
- **Form & Action**: `Button`
|
|
68
|
+
- **Typography**: `Text`
|
|
69
|
+
- **Feedback**: `Spinner`
|
|
70
|
+
- **Utils**: `VisuallyHidden`
|
|
71
|
+
|
|
72
|
+
> 자세한 사용법과 속성은 Storybook 문서를 참고하세요.
|
|
73
|
+
|
|
74
|
+
## 🛠 개발 환경 설정
|
|
75
|
+
|
|
76
|
+
이 저장소를 클론하여 개발에 기여하려면 다음 명령어를 사용하세요.
|
|
77
|
+
|
|
78
|
+
### 의존성 설치
|
|
79
|
+
|
|
80
|
+
```bash
|
|
81
|
+
pnpm install
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Storybook 실행 (개발 서버)
|
|
85
|
+
|
|
86
|
+
컴포넌트를 개발하고 테스트하기 위해 Storybook을 실행합니다.
|
|
87
|
+
|
|
88
|
+
```bash
|
|
89
|
+
pnpm dev
|
|
90
|
+
# 또는
|
|
91
|
+
pnpm storybook
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### 새로운 컴포넌트 생성 (Plop)
|
|
95
|
+
|
|
96
|
+
터미널 명령어로 컴포넌트 스캐폴딩을 생성할 수 있습니다.
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
pnpm template
|
|
40
100
|
```
|
|
41
101
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
import reactX from 'eslint-plugin-react-x'
|
|
47
|
-
import reactDom from 'eslint-plugin-react-dom'
|
|
48
|
-
|
|
49
|
-
export default tseslint.config([
|
|
50
|
-
globalIgnores(['dist']),
|
|
51
|
-
{
|
|
52
|
-
files: ['**/*.{ts,tsx}'],
|
|
53
|
-
extends: [
|
|
54
|
-
// Other configs...
|
|
55
|
-
// Enable lint rules for React
|
|
56
|
-
reactX.configs['recommended-typescript'],
|
|
57
|
-
// Enable lint rules for React DOM
|
|
58
|
-
reactDom.configs.recommended,
|
|
59
|
-
],
|
|
60
|
-
languageOptions: {
|
|
61
|
-
parserOptions: {
|
|
62
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
63
|
-
tsconfigRootDir: import.meta.dirname,
|
|
64
|
-
},
|
|
65
|
-
// other options...
|
|
66
|
-
},
|
|
67
|
-
},
|
|
68
|
-
])
|
|
102
|
+
### 빌드
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
pnpm build
|
|
69
106
|
```
|
|
107
|
+
|
|
108
|
+
### 테스트
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
pnpm test
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## 🤝 기여하기
|
|
115
|
+
|
|
116
|
+
1. 이 저장소를 포크(Fork)합니다.
|
|
117
|
+
2. 새로운 브랜치를 생성합니다 (`git checkout -b feature/NewComponent`).
|
|
118
|
+
3. 변경 사항을 커밋합니다 (`git commit -m 'feat: Add NewComponent'`).
|
|
119
|
+
4. 브랜치에 푸시합니다 (`git push origin feature/NewComponent`).
|
|
120
|
+
5. Pull Request를 생성합니다.
|
|
121
|
+
|
|
122
|
+
## 📄 라이선스
|
|
123
|
+
|
|
124
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css";.bd-theme{--color-white: #ffffff;--color-black: #000000;--color-gray-50: #fafafa;--color-gray-100: #f4f4f4;--color-gray-200: #f5f5f5;--color-gray-300: #ebebeb;--color-gray-400: #eaeaea;--color-gray-500: #dcdcdc;--color-gray-600: #cccccc;--color-gray-700: #c2c2c2;--color-gray-800: #9e9e9e;--color-gray-900: #999999;--color-gray-1000: #818181;--color-gray-1100: #707070;--color-gray-1200: #606060;--color-gray-1300: #424242;--color-gray-1400: #222222;--color-gray-1500: #111111;--color-blue-50: #e2f2ff;--color-blue-100: #c0e3ff;--color-blue-200: #99d2ff;--color-blue-300: #7ec7fe;--color-blue-400: #65bcfe;--color-blue-500: #49b0fe;--color-blue-600: #109eff;--color-blue-700: #138deb;--color-blue-800: #1c69ff;--color-blue-900: #1681d9;--color-blue-1000: #1476c4;--color-blue-1100: #1d66c5;--color-blue-1200: #1164a7;--color-blue-1300: #14509d;--color-blue-1400: #0a2d5c;--color-green-50: #e6f4ea;--color-green-100: #cdead5;--color-green-200: #b4e0c0;--color-green-300: #9cd5ac;--color-green-400: #83cb97;--color-green-500: #6ac182;--color-green-600: #52b76e;--color-green-700: #3aad59;--color-green-800: #0ab03c;--color-green-900: #219246;--color-green-1000: #238741;--color-green-1100: #19803a;--color-green-1200: #0f7a33;--color-red-50: #ffe5e5;--color-red-100: #ffcccc;--color-red-200: #ffb2b2;--color-red-300: #ff9999;--color-red-400: #ff8080;--color-red-500: #ff6666;--color-red-600: #ff4c4c;--color-red-700: #ff3232;--color-red-800: #ff0000;--color-red-900: #e61919;--color-red-1000: #e30000;--color-red-1100: #cc0000}.bd-theme{--font-size-1: 10px;--font-size-2: 12px;--font-size-3: 14px;--font-size-4: 16px;--font-size-5: 18px;--font-size-6: 20px;--font-size-7: 24px;--font-size-8: 28px;--font-size-9: 32px;--font-size-10: 40px;--font-size-11: 56px;--font-size-12: 84px;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-1: 16px;--line-height-2: 18px;--line-height-3: 20px;--line-height-4: 24px;--line-height-5: 28px;--line-height-6: 32px;--line-height-7: 40px;--line-height-8: 48px;--line-height-9: 60px;--line-height-10: 72px;--line-height-11: 120px;--letter-spacing-1: .02em;--letter-spacing-2: .04em;--letter-spacing-3: .05em;--default-line-height: 1.5;--default-leading-trim-start: .42em;--default-leading-trim-end: .36em;--default-font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif}.bd-theme{font-family:var(--default-font-family)}.bd-theme{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-9: 36px;--space-10: 40px;--space-11: 44px;--space-12: 48px;--space-13: 52px;--space-14: 56px;--space-15: 60px;--space-16: 64px;--space-17: 68px;--space-18: 72px;--space-19: 76px;--space-20: 80px}.bd-theme{--radius-none: 0;--radius-s: 4px;--radius-m: 8px;--radius-l: 28px;--radius-full: 9999px}.bd-Text{line-height:var(--line-height, var(--default-line-height));letter-spacing:var(--letter-spacing, inherit)}.bd-Text:where(.bd-size-1){font-size:var(--font-size-1);--line-height: var(--line-height-1);--letter-spacing: var(--letter-spacing-1)}.bd-Text:where(.bd-size-2){font-size:var(--font-size-2);--line-height: var(--line-height-2);--letter-spacing: var(--letter-spacing-1)}.bd-Text:where(.bd-size-3){font-size:var(--font-size-3);--line-height: var(--line-height-3);--letter-spacing: var(--letter-spacing-1)}.bd-Text:where(.bd-size-4){font-size:var(--font-size-4);--line-height: var(--line-height-4);--letter-spacing: var(--letter-spacing-1)}.bd-Text:where(.bd-size-5){font-size:var(--font-size-5);--line-height: var(--line-height-5);--letter-spacing: var(--letter-spacing-1)}.bd-Text:where(.bd-size-6){font-size:var(--font-size-6);--line-height: var(--line-height-6);--letter-spacing: var(--letter-spacing-2)}.bd-Text:where(.bd-size-7){font-size:var(--font-size-7);--line-height: var(--line-height-7);--letter-spacing: var(--letter-spacing-2)}.bd-Text:where(.bd-size-8){font-size:var(--font-size-9);--line-height: var(--line-height-8);--letter-spacing: var(--letter-spacing-2)}.bd-Text:where(.bd-size-9){font-size:var(--font-size-10);--line-height: var(--line-height-9);--letter-spacing: var(--letter-spacing-2)}.bd-Text:where(.bd-size-10){font-size:var(--font-size-11);--line-height: var(--line-height-10);--letter-spacing: var(--letter-spacing-2)}.bd-Text:where(.bd-size-11){font-size:var(--font-size-12);--line-height: var(--line-height-11);--letter-spacing: var(--letter-spacing-3)}.bd-Flex{box-sizing:border-box;display:flex;justify-content:flex-start}.bd-Button{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;flex-shrink:0;-webkit-user-select:none;user-select:none;vertical-align:top;background-color:transparent;font-family:var(--default-font-family);font-style:normal;text-align:center;--color-blue-800-tp-10: color-mix(in srgb, var(--color-blue-800), transparent 10%);--color-blue-800-tp-90: color-mix(in srgb, var(--color-blue-800), transparent 90%);--color-blue-800-tp-95: color-mix(in srgb, var(--color-blue-800), transparent 95%);--color-blue-800-tp-95_5: color-mix(in srgb, var(--color-blue-800), transparent 95.5%);--color-blue-1100-tp-80: color-mix(in srgb, var(--color-blue-1100), transparent 80%);--color-blue-1100-tp-90: color-mix(in srgb, var(--color-blue-1100), transparent 90%)}.bd-Button:where(:focus-visible){outline:none;outline-offset:0}.bd-Button:where([data-disabled]){--spinner-opacity: 1}.bd-Button:where(.bd-loading){position:relative}.bd-Button:where(.bd-size-1){height:var(--space-6);padding-left:var(--space-2);padding-right:var(--space-2);font-size:var(--font-size-2);line-height:var(--line-height-1);letter-spacing:var(--letter-spacing-1)}.bd-Button:where(.bd-size-2){height:var(--space-8);padding-left:var(--space-3);padding-right:var(--space-3);font-size:var(--font-size-3);line-height:var(--line-height-2);letter-spacing:var(--letter-spacing-1)}.bd-Button:where(.bd-size-3){height:var(--space-10);padding-left:var(--space-4);padding-right:var(--space-4);font-size:var(--font-size-4);line-height:var(--line-height-3);letter-spacing:var(--letter-spacing-1)}.bd-Button:where(.bd-size-4){height:var(--space-12);padding-left:var(--space-5);padding-right:var(--space-5);font-size:var(--font-size-4);line-height:var(--line-height-3);letter-spacing:var(--letter-spacing-1)}.bd-Button:where(.bd-size-5){height:var(--space-14);padding-left:var(--space-6);padding-right:var(--space-6);font-size:var(--font-size-4);line-height:var(--line-height-3);letter-spacing:var(--letter-spacing-1)}.bd-Button:where(.bd-variant-fill-primary){background-color:var(--color-blue-1100);color:var(--color-white)}@media (hover: hover){.bd-Button:where(.bd-variant-fill-primary):where(:hover:not([data-disabled])){background-color:var(--color-blue-800-tp-10)}}.bd-Button:where(.bd-variant-fill-primary):where(:focus-visible:not([data-disabled])){background-color:var(--color-blue-800-tp-10)}.bd-Button:where(.bd-variant-fill-primary):where(:active:not([data-disabled])){background-color:var(--color-blue-1300)}.bd-Button:where(.bd-variant-fill-primary):where([data-disabled]:not([data-loading])){background-color:var(--color-gray-100);color:var(--color-gray-900)}.bd-Button:where(.bd-variant-fill-primary):where([data-loading]){background-color:var(--color-blue-800)}.bd-Button:where(.bd-variant-fill-secondary){background-color:var(--color-gray-100);color:var(--color-gray-1500)}@media (hover: hover){.bd-Button:where(.bd-variant-fill-secondary):where(:hover:not([data-disabled])){background-color:var(--color-blue-800-tp-95);color:var(--color-blue-800)}}.bd-Button:where(.bd-variant-fill-secondary):where(:focus-visible:not([data-disabled])){background-color:var(--color-gray-100);color:var(--color-blue-800)}.bd-Button:where(.bd-variant-fill-secondary):where(:active:not([data-disabled])){background-color:var(--color-gray-400);color:var(--color-blue-1100)}.bd-Button:where(.bd-variant-fill-secondary):where([data-disabled]:not([data-loading])){background-color:var(--color-gray-100);color:var(--color-gray-900)}.bd-Button:where(.bd-variant-fill-secondary):where([data-loading]){background-color:var(--color-gray-100)}.bd-Button:where(.bd-variant-outline-primary){background-color:var(--color-white);color:var(--color-blue-1100);border:1px solid var(--color-blue-1100)}@media (hover: hover){.bd-Button:where(.bd-variant-outline-primary):where(:hover:not([data-disabled])){background-color:var(--color-blue-800-tp-95_5);color:var(--color-blue-800);border-color:var(--color-blue-800)}}.bd-Button:where(.bd-variant-outline-primary):where(:focus-visible:not([data-disabled])){color:var(--color-blue-800);border-color:var(--color-blue-800)}.bd-Button:where(.bd-variant-outline-primary):where(:active:not([data-disabled])){background-color:var(--color-blue-1100-tp-90);color:var(--color-blue-1100);border-color:var(--color-blue-1100)}.bd-Button:where(.bd-variant-outline-primary):where([data-disabled]:not([data-loading])){background-color:var(--color-gray-100);color:var(--color-gray-900);border-color:transparent}.bd-Button:where(.bd-variant-outline-secondary){background-color:var(--color-white);color:var(--color-gray-1500);border:1px solid var(--color-gray-900)}@media (hover: hover){.bd-Button:where(.bd-variant-outline-secondary):where(:hover:not([data-disabled])){color:var(--color-blue-800);border-color:var(--color-blue-800)}.bd-Button:where(.bd-variant-outline-secondary):where(:focus-visible:not([data-disabled])){color:var(--color-blue-800);border-color:var(--color-blue-800)}.bd-Button:where(.bd-variant-outline-secondary):where(:active:not([data-disabled])){color:var(--color-blue-1100);border-color:var(--color-blue-1100)}.bd-Button:where(.bd-variant-outline-secondary):where([data-disabled]:not([data-loading])){background-color:var(--color-gray-100);color:var(--color-gray-900);border-color:transparent}}.bd-Button:where(.bd-variant-ghost){background-color:transparent;border:1px solid transparent;color:var(--color-gray-1500)}@media (hover: hover){.bd-Button:where(.bd-variant-ghost):where(:hover:not([data-disabled])){background-color:var(--color-blue-800-tp-95_5);color:var(--color-blue-800)}}.bd-Button:where(.bd-variant-ghost):where(:focus-visible:not([data-disabled])){background-color:var(--color-blue-800-tp-90);color:var(--color-blue-800)}.bd-Button:where(.bd-variant-ghost):where(:active:not([data-disabled])){background-color:var(--color-blue-1100-tp-80);color:var(--color-blue-1100)}.bd-Button:where(.bd-variant-ghost):where([data-disabled]:not([data-loading])){color:var(--color-gray-900)}.bd-Button:where(.bd-variant-ghost):where([data-loading]){background-color:var(--color-gray-50);border-color:var(--color-gray-400)}.bd-Spinner{display:inline-block;box-sizing:border-box;position:relative;border:2px solid var(--color-white);border-bottom-color:transparent;border-radius:50%;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bd-Spinner:where(.bd-size-1){--spinner-size: var(--space-3);width:var(--spinner-size);height:var(--spinner-size);border-width:calc(var(--spinner-size) * .1)}.bd-Spinner:where(.bd-size-2){--spinner-size: var(--space-4);width:var(--spinner-size);height:var(--spinner-size);border-width:calc(var(--spinner-size) * .1)}.bd-Spinner:where(.bd-size-3){--spinner-size: var(--space-5);width:var(--spinner-size);height:var(--spinner-size);border-width:calc(var(--spinner-size) * .1)}.bd-Spinner:where(.bd-color-gray50){border-top-color:var(--color-gray-50);border-right-color:var(--color-gray-50);border-left-color:var(--color-gray-50)}.bd-Spinner:where(.bd-color-gray100){border-top-color:var(--color-gray-100);border-right-color:var(--color-gray-100);border-left-color:var(--color-gray-100)}.bd-Spinner:where(.bd-color-gray200){border-top-color:var(--color-gray-200);border-right-color:var(--color-gray-200);border-left-color:var(--color-gray-200)}.bd-Spinner:where(.bd-color-gray300){border-top-color:var(--color-gray-300);border-right-color:var(--color-gray-300);border-left-color:var(--color-gray-300)}.bd-Spinner:where(.bd-color-gray400){border-top-color:var(--color-gray-400);border-right-color:var(--color-gray-400);border-left-color:var(--color-gray-400)}.bd-Spinner:where(.bd-color-gray500){border-top-color:var(--color-gray-500);border-right-color:var(--color-gray-500);border-left-color:var(--color-gray-500)}.bd-Spinner:where(.bd-color-gray600){border-top-color:var(--color-gray-600);border-right-color:var(--color-gray-600);border-left-color:var(--color-gray-600)}.bd-Spinner:where(.bd-color-gray700){border-top-color:var(--color-gray-700);border-right-color:var(--color-gray-700);border-left-color:var(--color-gray-700)}.bd-Spinner:where(.bd-color-gray800){border-top-color:var(--color-gray-800);border-right-color:var(--color-gray-800);border-left-color:var(--color-gray-800)}.bd-Spinner:where(.bd-color-gray900){border-top-color:var(--color-gray-900);border-right-color:var(--color-gray-900);border-left-color:var(--color-gray-900)}.bd-Spinner:where(.bd-color-gray1000){border-top-color:var(--color-gray-1000);border-right-color:var(--color-gray-1000);border-left-color:var(--color-gray-1000)}.bd-Spinner:where(.bd-color-gray1100){border-top-color:var(--color-gray-1100);border-right-color:var(--color-gray-1100);border-left-color:var(--color-gray-1100)}.bd-Spinner:where(.bd-color-gray1200){border-top-color:var(--color-gray-1200);border-right-color:var(--color-gray-1200);border-left-color:var(--color-gray-1200)}.bd-Spinner:where(.bd-color-gray1300){border-top-color:var(--color-gray-1300);border-right-color:var(--color-gray-1300);border-left-color:var(--color-gray-1300)}.bd-Spinner:where(.bd-color-gray1400){border-top-color:var(--color-gray-1400);border-right-color:var(--color-gray-1400);border-left-color:var(--color-gray-1400)}.bd-Spinner:where(.bd-color-gray1500){border-top-color:var(--color-gray-1500);border-right-color:var(--color-gray-1500);border-left-color:var(--color-gray-1500)}.bd-Spinner:where(.bd-color-blue50){border-top-color:var(--color-blue-50);border-right-color:var(--color-blue-50);border-left-color:var(--color-blue-50)}.bd-Spinner:where(.bd-color-blue100){border-top-color:var(--color-blue-100);border-right-color:var(--color-blue-100);border-left-color:var(--color-blue-100)}.bd-Spinner:where(.bd-color-blue200){border-top-color:var(--color-blue-200);border-right-color:var(--color-blue-200);border-left-color:var(--color-blue-200)}.bd-Spinner:where(.bd-color-blue300){border-top-color:var(--color-blue-300);border-right-color:var(--color-blue-300);border-left-color:var(--color-blue-300)}.bd-Spinner:where(.bd-color-blue400){border-top-color:var(--color-blue-400);border-right-color:var(--color-blue-400);border-left-color:var(--color-blue-400)}.bd-Spinner:where(.bd-color-blue500){border-top-color:var(--color-blue-500);border-right-color:var(--color-blue-500);border-left-color:var(--color-blue-500)}.bd-Spinner:where(.bd-color-blue600){border-top-color:var(--color-blue-600);border-right-color:var(--color-blue-600);border-left-color:var(--color-blue-600)}.bd-Spinner:where(.bd-color-blue700){border-top-color:var(--color-blue-700);border-right-color:var(--color-blue-700);border-left-color:var(--color-blue-700)}.bd-Spinner:where(.bd-color-blue800){border-top-color:var(--color-blue-800);border-right-color:var(--color-blue-800);border-left-color:var(--color-blue-800)}.bd-Spinner:where(.bd-color-blue900){border-top-color:var(--color-blue-900);border-right-color:var(--color-blue-900);border-left-color:var(--color-blue-900)}.bd-Spinner:where(.bd-color-blue1000){border-top-color:var(--color-blue-1000);border-right-color:var(--color-blue-1000);border-left-color:var(--color-blue-1000)}.bd-Spinner:where(.bd-color-blue1100){border-top-color:var(--color-blue-1100);border-right-color:var(--color-blue-1100);border-left-color:var(--color-blue-1100)}.bd-Spinner:where(.bd-color-green50){border-top-color:var(--color-green-50);border-right-color:var(--color-green-50);border-left-color:var(--color-green-50)}.bd-Spinner:where(.bd-color-green100){border-top-color:var(--color-green-100);border-right-color:var(--color-green-100);border-left-color:var(--color-green-100)}.bd-Spinner:where(.bd-color-green200){border-top-color:var(--color-green-200);border-right-color:var(--color-green-200);border-left-color:var(--color-green-200)}.bd-Spinner:where(.bd-color-green300){border-top-color:var(--color-green-300);border-right-color:var(--color-green-300);border-left-color:var(--color-green-300)}.bd-Spinner:where(.bd-color-green400){border-top-color:var(--color-green-400);border-right-color:var(--color-green-400);border-left-color:var(--color-green-400)}.bd-Spinner:where(.bd-color-green500){border-top-color:var(--color-green-500);border-right-color:var(--color-green-500);border-left-color:var(--color-green-500)}.bd-Spinner:where(.bd-color-green600){border-top-color:var(--color-green-600);border-right-color:var(--color-green-600);border-left-color:var(--color-green-600)}.bd-Spinner:where(.bd-color-green700){border-top-color:var(--color-green-700);border-right-color:var(--color-green-700);border-left-color:var(--color-green-700)}.bd-Spinner:where(.bd-color-green800){border-top-color:var(--color-green-800);border-right-color:var(--color-green-800);border-left-color:var(--color-green-800)}.bd-Spinner:where(.bd-color-green900){border-top-color:var(--color-green-900);border-right-color:var(--color-green-900);border-left-color:var(--color-green-900)}.bd-Spinner:where(.bd-color-green1000){border-top-color:var(--color-green-1000);border-right-color:var(--color-green-1000);border-left-color:var(--color-green-1000)}.bd-Spinner:where(.bd-color-green1100){border-top-color:var(--color-green-1100);border-right-color:var(--color-green-1100);border-left-color:var(--color-green-1100)}.bd-Spinner:where(.bd-color-green1200){border-top-color:var(--color-green-1200);border-right-color:var(--color-green-1200);border-left-color:var(--color-green-1200)}.bd-Spinner:where(.bd-color-red50){border-top-color:var(--color-red-50);border-right-color:var(--color-red-50);border-left-color:var(--color-red-50)}.bd-Spinner:where(.bd-color-red100){border-top-color:var(--color-red-100);border-right-color:var(--color-red-100);border-left-color:var(--color-red-100)}.bd-Spinner:where(.bd-color-red200){border-top-color:var(--color-red-200);border-right-color:var(--color-red-200);border-left-color:var(--color-red-200)}.bd-Spinner:where(.bd-color-red300){border-top-color:var(--color-red-300);border-right-color:var(--color-red-300);border-left-color:var(--color-red-300)}.bd-Spinner:where(.bd-color-red400){border-top-color:var(--color-red-400);border-right-color:var(--color-red-400);border-left-color:var(--color-red-400)}.bd-Spinner:where(.bd-color-red500){border-top-color:var(--color-red-500);border-right-color:var(--color-red-500);border-left-color:var(--color-red-500)}.bd-Spinner:where(.bd-color-red600){border-top-color:var(--color-red-600);border-right-color:var(--color-red-600);border-left-color:var(--color-red-600)}.bd-Spinner:where(.bd-color-red700){border-top-color:var(--color-red-700);border-right-color:var(--color-red-700);border-left-color:var(--color-red-700)}.bd-Spinner:where(.bd-color-red800){border-top-color:var(--color-red-800);border-right-color:var(--color-red-800);border-left-color:var(--color-red-800)}.bd-Spinner:where(.bd-color-red900){border-top-color:var(--color-red-900);border-right-color:var(--color-red-900);border-left-color:var(--color-red-900)}.bd-Spinner:where(.bd-color-red1000){border-top-color:var(--color-red-1000);border-right-color:var(--color-red-1000);border-left-color:var(--color-red-1000)}.bd-Spinner:where(.bd-color-red1100){border-top-color:var(--color-red-1100);border-right-color:var(--color-red-1100);border-left-color:var(--color-red-1100)}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}.bd-color-gray50{color:var(--color-gray-50)}.bd-color-gray100{color:var(--color-gray-100)}.bd-color-gray200{color:var(--color-gray-200)}.bd-color-gray300{color:var(--color-gray-300)}.bd-color-gray400{color:var(--color-gray-400)}.bd-color-gray500{color:var(--color-gray-500)}.bd-color-gray600{color:var(--color-gray-600)}.bd-color-gray700{color:var(--color-gray-700)}.bd-color-gray800{color:var(--color-gray-800)}.bd-color-gray900{color:var(--color-gray-900)}.bd-color-gray1000{color:var(--color-gray-1000)}.bd-color-gray1100{color:var(--color-gray-1100)}.bd-color-gray1200{color:var(--color-gray-1200)}.bd-color-gray1300{color:var(--color-gray-1300)}.bd-color-gray1400{color:var(--color-gray-1400)}.bd-color-gray1500{color:var(--color-gray-1500)}.bd-color-blue50{color:var(--color-blue-50)}.bd-color-blue100{color:var(--color-blue-100)}.bd-color-blue200{color:var(--color-blue-200)}.bd-color-blue300{color:var(--color-blue-300)}.bd-color-blue400{color:var(--color-blue-400)}.bd-color-blue500{color:var(--color-blue-500)}.bd-color-blue600{color:var(--color-blue-600)}.bd-color-blue700{color:var(--color-blue-700)}.bd-color-blue800{color:var(--color-blue-800)}.bd-color-blue900{color:var(--color-blue-900)}.bd-color-blue1000{color:var(--color-blue-1000)}.bd-color-blue1100{color:var(--color-blue-1100)}.bd-color-blue1200{color:var(--color-blue-1200)}.bd-color-blue1300{color:var(--color-blue-1300)}.bd-color-blue1400{color:var(--color-blue-1400)}.bd-color-green50{color:var(--color-green-50)}.bd-color-green100{color:var(--color-green-100)}.bd-color-green200{color:var(--color-green-200)}.bd-color-green300{color:var(--color-green-300)}.bd-color-green400{color:var(--color-green-400)}.bd-color-green500{color:var(--color-green-500)}.bd-color-green600{color:var(--color-green-600)}.bd-color-green700{color:var(--color-green-700)}.bd-color-green800{color:var(--color-green-800)}.bd-color-green900{color:var(--color-green-900)}.bd-color-green1000{color:var(--color-green-1000)}.bd-color-green1100{color:var(--color-green-1100)}.bd-color-green1200{color:var(--color-green-1200)}.bd-color-red50{color:var(--color-red-50)}.bd-color-red100{color:var(--color-red-100)}.bd-color-red200{color:var(--color-red-200)}.bd-color-red300{color:var(--color-red-300)}.bd-color-red400{color:var(--color-red-400)}.bd-color-red500{color:var(--color-red-500)}.bd-color-red600{color:var(--color-red-600)}.bd-color-red700{color:var(--color-red-700)}.bd-color-red800{color:var(--color-red-800)}.bd-color-red900{color:var(--color-red-900)}.bd-color-red1000{color:var(--color-red-1000)}.bd-color-red1100{color:var(--color-red-1100)}.bd-color{color:var(--color)}.bd-display-none{display:none}.bd-display-block{display:block}.bd-display-inline{display:inline}.bd-display-inline-block{display:inline-block}.bd-display-flex{display:flex}.bd-display-inline-flex{display:inline-flex}.bd-display-grid{display:grid}.bd-display-inline-grid{display:inline-grid}.bd-display-contents{display:contents}.bd-position-static{position:static}.bd-position-relative{position:relative}.bd-position-absolute{position:absolute}.bd-position-fixed{position:fixed}.bd-position-sticky{position:sticky}.bd-w{width:var(--width)}.bd-min-w{min-width:var(--min-width)}.bd-max-w{max-width:var(--max-width)}.bd-h{height:var(--height)}.bd-min-h{min-height:var(--min-height)}.bd-max-h{max-height:var(--max-height)}.bd-inset-0{inset:0}.bd-inset-1{inset:var(--space-1)}.bd-inset-2{inset:var(--space-2)}.bd-inset-3{inset:var(--space-3)}.bd-inset-4{inset:var(--space-4)}.bd-inset-5{inset:var(--space-5)}.bd-inset-6{inset:var(--space-6)}.bd-inset-7{inset:var(--space-7)}.bd-inset-8{inset:var(--space-8)}.bd-inset-9{inset:var(--space-9)}.bd-inset-10{inset:var(--space-10)}.bd-inset-11{inset:var(--space-11)}.bd-inset-12{inset:var(--space-12)}.bd-inset{inset:var(--inset)}.bd-top-0{top:0}.bd-top-1{top:var(--space-1)}.bd-top-2{top:var(--space-2)}.bd-top-3{top:var(--space-3)}.bd-top-4{top:var(--space-4)}.bd-top-5{top:var(--space-5)}.bd-top-6{top:var(--space-6)}.bd-top-7{top:var(--space-7)}.bd-top-8{top:var(--space-8)}.bd-top-9{top:var(--space-9)}.bd-top-10{top:var(--space-10)}.bd-top-11{top:var(--space-11)}.bd-top-12{top:var(--space-12)}.bd-top{top:var(--top)}.bd-right-0{right:0}.bd-right-1{right:var(--space-1)}.bd-right-2{right:var(--space-2)}.bd-right-3{right:var(--space-3)}.bd-right-4{right:var(--space-4)}.bd-right-5{right:var(--space-5)}.bd-right-6{right:var(--space-6)}.bd-right-7{right:var(--space-7)}.bd-right-8{right:var(--space-8)}.bd-right-9{right:var(--space-9)}.bd-right-10{right:var(--space-10)}.bd-right-11{right:var(--space-11)}.bd-right-12{right:var(--space-12)}.bd-right{right:var(--right)}.bd-bottom-0{bottom:0}.bd-bottom-1{bottom:var(--space-1)}.bd-bottom-2{bottom:var(--space-2)}.bd-bottom-3{bottom:var(--space-3)}.bd-bottom-4{bottom:var(--space-4)}.bd-bottom-5{bottom:var(--space-5)}.bd-bottom-6{bottom:var(--space-6)}.bd-bottom-7{bottom:var(--space-7)}.bd-bottom-8{bottom:var(--space-8)}.bd-bottom-9{bottom:var(--space-9)}.bd-bottom-10{bottom:var(--space-10)}.bd-bottom-11{bottom:var(--space-11)}.bd-bottom-12{bottom:var(--space-12)}.bd-bottom{bottom:var(--bottom)}.bd-left-0{left:0}.bd-left-1{left:var(--space-1)}.bd-left-2{left:var(--space-2)}.bd-left-3{left:var(--space-3)}.bd-left-4{left:var(--space-4)}.bd-left-5{left:var(--space-5)}.bd-left-6{left:var(--space-6)}.bd-left-7{left:var(--space-7)}.bd-left-8{left:var(--space-8)}.bd-left-9{left:var(--space-9)}.bd-left-10{left:var(--space-10)}.bd-left-11{left:var(--space-11)}.bd-left-12{left:var(--space-12)}.bd-left{left:var(--left)}.bd-m,.bd-m-0,.bd-m-1,.bd-m-2,.bd-m-3,.bd-m-4,.bd-m-5,.bd-m-6,.bd-m-7,.bd-m-8,.bd-m-9,.bd-m-10,.bd-m-11,.bd-m-12,.-bd-m-1,.-bd-m-2,.-bd-m-3,.-bd-m-4,.-bd-m-5,.-bd-m-6,.-bd-m-7,.-bd-m-8,.-bd-m-9,.-bd-m-10,.-bd-m-11,.-bd-m-12{margin-top:var(--margin-top-override, var(--margin-top));margin-right:var(--margin-right-override, var(--margin-right));margin-bottom:var(--margin-bottom-override, var(--margin-bottom));margin-left:var(--margin-left-override, var(--margin-left))}.bd-m-0{--margin-top: 0px;--margin-right: 0px;--margin-bottom: 0px;--margin-left: 0px}.bd-m-1{--margin-top: var(--space-1);--margin-right: var(--space-1);--margin-bottom: var(--space-1);--margin-left: var(--space-1)}.bd-m-2{--margin-top: var(--space-2);--margin-right: var(--space-2);--margin-bottom: var(--space-2);--margin-left: var(--space-2)}.bd-m-3{--margin-top: var(--space-3);--margin-right: var(--space-3);--margin-bottom: var(--space-3);--margin-left: var(--space-3)}.bd-m-4{--margin-top: var(--space-4);--margin-right: var(--space-4);--margin-bottom: var(--space-4);--margin-left: var(--space-4)}.bd-m-5{--margin-top: var(--space-5);--margin-right: var(--space-5);--margin-bottom: var(--space-5);--margin-left: var(--space-5)}.bd-m-6{--margin-top: var(--space-6);--margin-right: var(--space-6);--margin-bottom: var(--space-6);--margin-left: var(--space-6)}.bd-m-7{--margin-top: var(--space-7);--margin-right: var(--space-7);--margin-bottom: var(--space-7);--margin-left: var(--space-7)}.bd-m-8{--margin-top: var(--space-8);--margin-right: var(--space-8);--margin-bottom: var(--space-8);--margin-left: var(--space-8)}.bd-m-9{--margin-top: var(--space-9);--margin-right: var(--space-9);--margin-bottom: var(--space-9);--margin-left: var(--space-9)}.bd-m-10{--margin-top: var(--space-10);--margin-right: var(--space-10);--margin-bottom: var(--space-10);--margin-left: var(--space-10)}.bd-m-11{--margin-top: var(--space-11);--margin-right: var(--space-11);--margin-bottom: var(--space-11);--margin-left: var(--space-11)}.bd-m-12{--margin-top: var(--space-12);--margin-right: var(--space-12);--margin-bottom: var(--space-12);--margin-left: var(--space-12)}.-bd-m-1{--margin-top: calc(-1 * var(--space-1));--margin-right: calc(-1 * var(--space-1));--margin-bottom: calc(-1 * var(--space-1));--margin-left: calc(-1 * var(--space-1))}.-bd-m-2{--margin-top: calc(-1 * var(--space-2));--margin-right: calc(-1 * var(--space-2));--margin-bottom: calc(-1 * var(--space-2));--margin-left: calc(-1 * var(--space-2))}.-bd-m-3{--margin-top: calc(-1 * var(--space-3));--margin-right: calc(-1 * var(--space-3));--margin-bottom: calc(-1 * var(--space-3));--margin-left: calc(-1 * var(--space-3))}.-bd-m-4{--margin-top: calc(-1 * var(--space-4));--margin-right: calc(-1 * var(--space-4));--margin-bottom: calc(-1 * var(--space-4));--margin-left: calc(-1 * var(--space-4))}.-bd-m-5{--margin-top: calc(-1 * var(--space-5));--margin-right: calc(-1 * var(--space-5));--margin-bottom: calc(-1 * var(--space-5));--margin-left: calc(-1 * var(--space-5))}.-bd-m-6{--margin-top: calc(-1 * var(--space-6));--margin-right: calc(-1 * var(--space-6));--margin-bottom: calc(-1 * var(--space-6));--margin-left: calc(-1 * var(--space-6))}.-bd-m-7{--margin-top: calc(-1 * var(--space-7));--margin-right: calc(-1 * var(--space-7));--margin-bottom: calc(-1 * var(--space-7));--margin-left: calc(-1 * var(--space-7))}.-bd-m-8{--margin-top: calc(-1 * var(--space-8));--margin-right: calc(-1 * var(--space-8));--margin-bottom: calc(-1 * var(--space-8));--margin-left: calc(-1 * var(--space-8))}.-bd-m-9{--margin-top: calc(-1 * var(--space-9));--margin-right: calc(-1 * var(--space-9));--margin-bottom: calc(-1 * var(--space-9));--margin-left: calc(-1 * var(--space-9))}.-bd-m-10{--margin-top: calc(-1 * var(--space-10));--margin-right: calc(-1 * var(--space-10));--margin-bottom: calc(-1 * var(--space-10));--margin-left: calc(-1 * var(--space-10))}.-bd-m-11{--margin-top: calc(-1 * var(--space-11));--margin-right: calc(-1 * var(--space-11));--margin-bottom: calc(-1 * var(--space-11));--margin-left: calc(-1 * var(--space-11))}.-bd-m-12{--margin-top: calc(-1 * var(--space-12));--margin-right: calc(-1 * var(--space-12));--margin-bottom: calc(-1 * var(--space-12));--margin-left: calc(-1 * var(--space-12))}.bd-m{--margin-top: var(--m);--margin-right: var(--m);--margin-bottom: var(--m);--margin-left: var(--m)}.bd-mx,.bd-mx-0,.bd-mx-1,.bd-mx-2,.bd-mx-3,.bd-mx-4,.bd-mx-5,.bd-mx-6,.bd-mx-7,.bd-mx-8,.bd-mx-9,.bd-mx-10,.bd-mx-11,.bd-mx-12,.-bd-mx-1,.-bd-mx-2,.-bd-mx-3,.-bd-mx-4,.-bd-mx-5,.-bd-mx-6,.-bd-mx-7,.-bd-mx-8,.-bd-mx-9,.-bd-mx-10,.-bd-mx-11,.-bd-mx-12{margin-left:var(--margin-left-override, var(--margin-left));margin-right:var(--margin-right-override, var(--margin-right))}.bd-mx-0{--margin-left: 0px;--margin-right: 0px}.bd-mx-1{--margin-left: var(--space-1);--margin-right: var(--space-1)}.bd-mx-2{--margin-left: var(--space-2);--margin-right: var(--space-2)}.bd-mx-3{--margin-left: var(--space-3);--margin-right: var(--space-3)}.bd-mx-4{--margin-left: var(--space-4);--margin-right: var(--space-4)}.bd-mx-5{--margin-left: var(--space-5);--margin-right: var(--space-5)}.bd-mx-6{--margin-left: var(--space-6);--margin-right: var(--space-6)}.bd-mx-7{--margin-left: var(--space-7);--margin-right: var(--space-7)}.bd-mx-8{--margin-left: var(--space-8);--margin-right: var(--space-8)}.bd-mx-9{--margin-left: var(--space-9);--margin-right: var(--space-9)}.bd-mx-10{--margin-left: var(--space-10);--margin-right: var(--space-10)}.bd-mx-11{--margin-left: var(--space-11);--margin-right: var(--space-11)}.bd-mx-12{--margin-left: var(--space-12);--margin-right: var(--space-12)}.-bd-mx-1{--margin-left: calc(-1 * var(--space-1));--margin-right: calc(-1 * var(--space-1))}.-bd-mx-2{--margin-left: calc(-1 * var(--space-2));--margin-right: calc(-1 * var(--space-2))}.-bd-mx-3{--margin-left: calc(-1 * var(--space-3));--margin-right: calc(-1 * var(--space-3))}.-bd-mx-4{--margin-left: calc(-1 * var(--space-4));--margin-right: calc(-1 * var(--space-4))}.-bd-mx-5{--margin-left: calc(-1 * var(--space-5));--margin-right: calc(-1 * var(--space-5))}.-bd-mx-6{--margin-left: calc(-1 * var(--space-6));--margin-right: calc(-1 * var(--space-6))}.-bd-mx-12{--margin-left: calc(-1 * var(--space-12));--margin-right: calc(-1 * var(--space-12))}.bd-mx{--margin-left: var(--ml);--margin-right: var(--mr)}.bd-my,.bd-my-0,.bd-my-1,.bd-my-2,.bd-my-3,.bd-my-4,.bd-my-5,.bd-my-6,.bd-my-7,.bd-my-8,.bd-my-9,.bd-my-10,.bd-my-11,.bd-my-12,.-bd-my-1,.-bd-my-2,.-bd-my-3,.-bd-my-4,.-bd-my-5,.-bd-my-6,.-bd-my-7,.-bd-my-8,.-bd-my-9,.-bd-my-10,.-bd-my-11,.-bd-my-12{margin-top:var(--margin-top-override, var(--margin-top));margin-bottom:var(--margin-bottom-override, var(--margin-bottom))}.bd-my-0{--margin-top: 0px;--margin-bottom: 0px}.bd-my-1{--margin-top: var(--space-1);--margin-bottom: var(--space-1)}.bd-my-2{--margin-top: var(--space-2);--margin-bottom: var(--space-2)}.bd-my-3{--margin-top: var(--space-3);--margin-bottom: var(--space-3)}.bd-my-4{--margin-top: var(--space-4);--margin-bottom: var(--space-4)}.bd-my-5{--margin-top: var(--space-5);--margin-bottom: var(--space-5)}.bd-my-6{--margin-top: var(--space-6);--margin-bottom: var(--space-6)}.bd-my-7{--margin-top: var(--space-7);--margin-bottom: var(--space-7)}.bd-my-8{--margin-top: var(--space-8);--margin-bottom: var(--space-8)}.bd-my-9{--margin-top: var(--space-9);--margin-bottom: var(--space-9)}.bd-my-10{--margin-top: var(--space-10);--margin-bottom: var(--space-10)}.bd-my-11{--margin-top: var(--space-11);--margin-bottom: var(--space-11)}.bd-my-12{--margin-top: var(--space-12);--margin-bottom: var(--space-12)}.-bd-my-1{--margin-top: calc(-1 * var(--space-1));--margin-bottom: calc(-1 * var(--space-1))}.-bd-my-2{--margin-top: calc(-1 * var(--space-2));--margin-bottom: calc(-1 * var(--space-2))}.-bd-my-3{--margin-top: calc(-1 * var(--space-3));--margin-bottom: calc(-1 * var(--space-3))}.-bd-my-4{--margin-top: calc(-1 * var(--space-4));--margin-bottom: calc(-1 * var(--space-4))}.-bd-my-5{--margin-top: calc(-1 * var(--space-5));--margin-bottom: calc(-1 * var(--space-5))}.-bd-my-6{--margin-top: calc(-1 * var(--space-6));--margin-bottom: calc(-1 * var(--space-6))}.-bd-my-7{--margin-top: calc(-1 * var(--space-7));--margin-bottom: calc(-1 * var(--space-7))}.-bd-my-8{--margin-top: calc(-1 * var(--space-8));--margin-bottom: calc(-1 * var(--space-8))}.-bd-my-9{--margin-top: calc(-1 * var(--space-9));--margin-bottom: calc(-1 * var(--space-9))}.-bd-my-10{--margin-top: calc(-1 * var(--space-10));--margin-bottom: calc(-1 * var(--space-10))}.-bd-my-11{--margin-top: calc(-1 * var(--space-11));--margin-bottom: calc(-1 * var(--space-11))}.-bd-my-12{--margin-top: calc(-1 * var(--space-12));--margin-bottom: calc(-1 * var(--space-12))}.bd-my{--margin-top: var(--mt);--margin-bottom: var(--mb)}.bd-mt,.bd-mt-0,.bd-mt-1,.bd-mt-2,.bd-mt-3,.bd-mt-4,.bd-mt-5,.bd-mt-6,.bd-mt-7,.bd-mt-8,.bd-mt-9,.bd-mt-10,.bd-mt-11,.bd-mt-12,.-bd-mt-1,.-bd-mt-2,.-bd-mt-3,.-bd-mt-4,.-bd-mt-5,.-bd-mt-6,.-bd-mt-7,.-bd-mt-8,.-bd-mt-9,.-bd-mt-10,.-bd-mt-11,.-bd-mt-12{margin-top:var(--margin-top-override, var(--margin-top))}.bd-mt-0{--margin-top: 0px}.bd-mt-1{--margin-top: var(--space-1)}.bd-mt-2{--margin-top: var(--space-2)}.bd-mt-3{--margin-top: var(--space-3)}.bd-mt-4{--margin-top: var(--space-4)}.bd-mt-5{--margin-top: var(--space-5)}.bd-mt-6{--margin-top: var(--space-6)}.bd-mt-7{--margin-top: var(--space-7)}.bd-mt-8{--margin-top: var(--space-8)}.bd-mt-9{--margin-top: var(--space-9)}.bd-mt-10{--margin-top: var(--space-10)}.bd-mt-11{--margin-top: var(--space-11)}.bd-mt-12{--margin-top: var(--space-12)}.-bd-mt-1{--margin-top: calc(-1 * var(--space-1))}.-bd-mt-2{--margin-top: calc(-1 * var(--space-2))}.-bd-mt-3{--margin-top: calc(-1 * var(--space-3))}.-bd-mt-4{--margin-top: calc(-1 * var(--space-4))}.-bd-mt-5{--margin-top: calc(-1 * var(--space-5))}.-bd-mt-6{--margin-top: calc(-1 * var(--space-6))}.-bd-mt-7{--margin-top: calc(-1 * var(--space-7))}.-bd-mt-8{--margin-top: calc(-1 * var(--space-8))}.-bd-mt-9{--margin-top: calc(-1 * var(--space-9))}.-bd-mt-10{--margin-top: calc(-1 * var(--space-10))}.-bd-mt-11{--margin-top: calc(-1 * var(--space-11))}.-bd-mt-12{--margin-top: calc(-1 * var(--space-12))}.bd-mt{--margin-top: var(--mt)}.bd-mr,.bd-mr-0,.bd-mr-1,.bd-mr-2,.bd-mr-3,.bd-mr-4,.bd-mr-5,.bd-mr-6,.bd-mr-7,.bd-mr-8,.bd-mr-9,.bd-mr-10,.bd-mr-11,.bd-mr-12,.-bd-mr-1,.-bd-mr-2,.-bd-mr-3,.-bd-mr-4,.-bd-mr-5,.-bd-mr-6,.-bd-mr-7,.-bd-mr-8,.-bd-mr-9,.-bd-mr-10,.-bd-mr-11,.-bd-mr-12{margin-right:var(--margin-right-override, var(--margin-right))}.bd-mr-0{--margin-right: 0px}.bd-mr-1{--margin-right: var(--space-1)}.bd-mr-2{--margin-right: var(--space-2)}.bd-mr-3{--margin-right: var(--space-3)}.bd-mr-4{--margin-right: var(--space-4)}.bd-mr-5{--margin-right: var(--space-5)}.bd-mr-6{--margin-right: var(--space-6)}.bd-mr-7{--margin-right: var(--space-7)}.bd-mr-8{--margin-right: var(--space-8)}.bd-mr-9{--margin-right: var(--space-9)}.bd-mr-10{--margin-right: var(--space-10)}.bd-mr-11{--margin-right: var(--space-11)}.bd-mr-12{--margin-right: var(--space-12)}.-bd-mr-1{--margin-right: calc(-1 * var(--space-1))}.-bd-mr-2{--margin-right: calc(-1 * var(--space-2))}.-bd-mr-3{--margin-right: calc(-1 * var(--space-3))}.-bd-mr-4{--margin-right: calc(-1 * var(--space-4))}.-bd-mr-5{--margin-right: calc(-1 * var(--space-5))}.-bd-mr-6{--margin-right: calc(-1 * var(--space-6))}.-bd-mr-7{--margin-right: calc(-1 * var(--space-7))}.-bd-mr-8{--margin-right: calc(-1 * var(--space-8))}.-bd-mr-9{--margin-right: calc(-1 * var(--space-9))}.-bd-mr-10{--margin-right: calc(-1 * var(--space-10))}.-bd-mr-11{--margin-right: calc(-1 * var(--space-11))}.-bd-mr-12{--margin-right: calc(-1 * var(--space-12))}.bd-mr{--margin-right: var(--mr)}.bd-mb,.bd-mb-0,.bd-mb-1,.bd-mb-2,.bd-mb-3,.bd-mb-4,.bd-mb-5,.bd-mb-6,.bd-mb-7,.bd-mb-8,.bd-mb-9,.bd-mb-10,.bd-mb-11,.bd-mb-12,.-bd-mb-1,.-bd-mb-2,.-bd-mb-3,.-bd-mb-4,.-bd-mb-5,.-bd-mb-6,.-bd-mb-7,.-bd-mb-8,.-bd-mb-9,.-bd-mb-10,.-bd-mb-11,.-bd-mb-12{margin-bottom:var(--margin-bottom-override, var(--margin-bottom))}.bd-mb-0{--margin-bottom: 0px}.bd-mb-1{--margin-bottom: var(--space-1)}.bd-mb-2{--margin-bottom: var(--space-2)}.bd-mb-3{--margin-bottom: var(--space-3)}.bd-mb-4{--margin-bottom: var(--space-4)}.bd-mb-5{--margin-bottom: var(--space-5)}.bd-mb-6{--margin-bottom: var(--space-6)}.bd-mb-7{--margin-bottom: var(--space-7)}.bd-mb-8{--margin-bottom: var(--space-8)}.bd-mb-9{--margin-bottom: var(--space-9)}.bd-mb-10{--margin-bottom: var(--space-10)}.bd-mb-11{--margin-bottom: var(--space-11)}.bd-mb-12{--margin-bottom: var(--space-12)}.-bd-mb-1{--margin-bottom: calc(-1 * var(--space-1))}.-bd-mb-2{--margin-bottom: calc(-1 * var(--space-2))}.-bd-mb-3{--margin-bottom: calc(-1 * var(--space-3))}.-bd-mb-4{--margin-bottom: calc(-1 * var(--space-4))}.-bd-mb-5{--margin-bottom: calc(-1 * var(--space-5))}.-bd-mb-6{--margin-bottom: calc(-1 * var(--space-6))}.-bd-mb-7{--margin-bottom: calc(-1 * var(--space-7))}.-bd-mb-8{--margin-bottom: calc(-1 * var(--space-8))}.-bd-mb-9{--margin-bottom: calc(-1 * var(--space-9))}.-bd-mb-10{--margin-bottom: calc(-1 * var(--space-10))}.-bd-mb-11{--margin-bottom: calc(-1 * var(--space-11))}.-bd-mb-12{--margin-bottom: calc(-1 * var(--space-12))}.bd-mb{--margin-bottom: var(--mb)}.bd-ml,.bd-ml-0,.bd-ml-1,.bd-ml-2,.bd-ml-3,.bd-ml-4,.bd-ml-5,.bd-ml-6,.bd-ml-7,.bd-ml-8,.bd-ml-9,.bd-ml-10,.bd-ml-11,.bd-ml-12,.-bd-ml-1,.-bd-ml-2,.-bd-ml-3,.-bd-ml-4,.-bd-ml-5,.-bd-ml-6,.-bd-ml-7,.-bd-ml-8,.-bd-ml-9,.-bd-ml-10,.-bd-ml-11,.-bd-ml-12{margin-left:var(--margin-left-override, var(--margin-left))}.bd-ml-0{--margin-left: 0px}.bd-ml-1{--margin-left: var(--space-1)}.bd-ml-2{--margin-left: var(--space-2)}.bd-ml-3{--margin-left: var(--space-3)}.bd-ml-4{--margin-left: var(--space-4)}.bd-ml-5{--margin-left: var(--space-5)}.bd-ml-6{--margin-left: var(--space-6)}.bd-ml-7{--margin-left: var(--space-7)}.bd-ml-8{--margin-left: var(--space-8)}.bd-ml-9{--margin-left: var(--space-9)}.bd-ml-10{--margin-left: var(--space-10)}.bd-ml-11{--margin-left: var(--space-11)}.bd-ml-12{--margin-left: calc(-1 * var(--space-12))}.-bd-ml-1{--margin-left: calc(-1 * var(--space-1))}.-bd-ml-2{--margin-left: calc(-1 * var(--space-2))}.-bd-ml-3{--margin-left: calc(-1 * var(--space-3))}.-bd-ml-4{--margin-left: calc(-1 * var(--space-4))}.-bd-ml-5{--margin-left: calc(-1 * var(--space-5))}.-bd-ml-6{--margin-left: calc(-1 * var(--space-6))}.-bd-ml-7{--margin-left: calc(-1 * var(--space-7))}.-bd-ml-8{--margin-left: calc(-1 * var(--space-8))}.-bd-ml-9{--margin-left: calc(-1 * var(--space-9))}.-bd-ml-10{--margin-left: calc(-1 * var(--space-10))}.-bd-ml-11{--margin-left: calc(-1 * var(--space-11))}.-bd-ml-12{--margin-left: calc(-1 * var(--space-12))}.bd-ml{--margin-left: var(--ml)}.bd-ta-left{text-align:left}.bd-ta-center{text-align:center}.bd-ta-right{text-align:right}.bd-radius-none{border-radius:var(--radius-none)}.bd-radius-s{border-radius:var(--radius-s)}.bd-radius-m{border-radius:var(--radius-m)}.bd-radius-l{border-radius:var(--radius-l)}.bd-radius-full{border-radius:var(--radius-full)}.bd-radius{border-radius:var(--radius)}.bd-tw-wrap{white-space:normal}.bd-tw-nowrap{white-space:nowrap}.bd-tw-pretty{white-space:normal;text-wrap:pretty}.bd-tw-balance{white-space:normal;text-wrap:balance}.bd-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bd-weight-light{font-weight:var(--font-weight-light)}.bd-weight-regular{font-weight:var(--font-weight-regular)}.bd-weight-medium{font-weight:var(--font-weight-medium)}.bd-weight-semibold{font-weight:var(--font-weight-semibold)}.bd-weight-bold{font-weight:var(--font-weight-bold)}.bd-lt-normal:before,.bd-lt-end:before,.bd-lt-normal:after,.bd-lt-start:after{content:none}.bd-lt-start:before,.bd-lt-both:before,.bd-lt-end:after,.bd-lt-both:after{content:"";display:table}.bd-lt-start:before,.bd-lt-both:before{margin-bottom:calc(var(--leading-trim-start, var(--default-leading-trim-start)) - var(--line-height, calc(1em * var(--default-line-height))) / 2)}.bd-lt-end:after,.bd-lt-both:after{margin-top:calc(var(--leading-trim-end, var(--default-leading-trim-end)) - var(--line-height, calc(1em * var(--default-line-height))) / 2)}.bd-fd-row{flex-direction:row}.bd-fd-column{flex-direction:column}.bd-fd-row-reverse{flex-direction:row-reverse}.bd-fd-column-reverse{flex-direction:column-reverse}.bd-fw-nowrap{flex-wrap:nowrap}.bd-fw-wrap{flex-wrap:wrap}.bd-fw-wrap-reverse{flex-wrap:wrap-reverse}.bd-gap-0{gap:0}.bd-gap-1{gap:var(--space-1)}.bd-gap-2{gap:var(--space-2)}.bd-gap-3{gap:var(--space-3)}.bd-gap-4{gap:var(--space-4)}.bd-gap-5{gap:var(--space-5)}.bd-gap-6{gap:var(--space-6)}.bd-gap-7{gap:var(--space-7)}.bd-gap-8{gap:var(--space-8)}.bd-gap-9{gap:var(--space-9)}.bd-gap-10{gap:var(--space-10)}.bd-gap-11{gap:var(--space-11)}.bd-gap-12{gap:var(--space-12)}.bd-gap{gap:var(--gap)}.bd-cg-0{column-gap:0}.bd-cg-1{column-gap:var(--space-1)}.bd-cg-2{column-gap:var(--space-2)}.bd-cg-3{column-gap:var(--space-3)}.bd-cg-4{column-gap:var(--space-4)}.bd-cg-5{column-gap:var(--space-5)}.bd-cg-6{column-gap:var(--space-6)}.bd-cg-7{column-gap:var(--space-7)}.bd-cg-8{column-gap:var(--space-8)}.bd-cg-9{column-gap:var(--space-9)}.bd-cg-10{column-gap:var(--space-10)}.bd-cg-11{column-gap:var(--space-11)}.bd-cg-12{column-gap:var(--space-12)}.bd-cg{column-gap:var(--col-gap)}.bd-rg-0{row-gap:0}.bd-rg-1{row-gap:var(--space-1)}.bd-rg-2{row-gap:var(--space-2)}.bd-rg-3{row-gap:var(--space-3)}.bd-rg-4{row-gap:var(--space-4)}.bd-rg-5{row-gap:var(--space-5)}.bd-rg-6{row-gap:var(--space-6)}.bd-rg-7{row-gap:var(--space-7)}.bd-rg-8{row-gap:var(--space-8)}.bd-rg-9{row-gap:var(--space-9)}.bd-rg-10{row-gap:var(--space-10)}.bd-rg-11{row-gap:var(--space-11)}.bd-rg-12{row-gap:var(--space-12)}.bd-rg{row-gap:var(--row-gap)}.bd-ai-start{align-items:start}.bd-ai-center{align-items:center}.bd-ai-end{align-items:flex-end}.bd-ai-baseline{align-items:baseline}.bd-ai-stretch{align-items:stretch}.bd-jc-start{justify-content:start}.bd-jc-center{justify-content:center}.bd-jc-end{justify-content:flex-end}.bd-jc-between{justify-content:space-between}.bd-as-start{align-self:start}.bd-as-center{align-self:center}.bd-as-end{align-self:flex-end}.bd-as-baseline{align-self:baseline}.bd-as-stretch{align-self:stretch}.bd-fb{flex-basis:var(--flex-basis)}.bd-fg-0{flex-grow:0}.bd-fg-1{flex-grow:1}.bd-fg{flex-grow:var(--flex-grow)}.bd-fs-0{flex-shrink:0}.bd-fs-1{flex-shrink:1}.bd-fs{flex-shrink:var(--flex-shrink)}.bd-ga{grid-area:var(--grid-area)}.bd-gc-1{grid-column:1}.bd-gc-2{grid-column:2}.bd-gc-3{grid-column:3}.bd-gc-4{grid-column:4}.bd-gc-5{grid-column:5}.bd-gc-6{grid-column:6}.bd-gc-7{grid-column:7}.bd-gc-8{grid-column:8}.bd-gc-9{grid-column:9}.bd-gc-10{grid-column:10}.bd-gc{grid-column:var(--grid-column)}.bd-gce-1{grid-column-end:1}.bd-gce-2{grid-column-end:2}.bd-gce-3{grid-column-end:3}.bd-gce-4{grid-column-end:4}.bd-gce-5{grid-column-end:5}.bd-gce-6{grid-column-end:6}.bd-gce-7{grid-column-end:7}.bd-gce-8{grid-column-end:8}.bd-gce-9{grid-column-end:9}.bd-gce-10{grid-column-end:10}.bd-gce{grid-column-end:var(--grid-column-end)}.bd-gcs-1{grid-column-start:1}.bd-gcs-2{grid-column-start:2}.bd-gcs-3{grid-column-start:3}.bd-gcs-4{grid-column-start:4}.bd-gcs-5{grid-column-start:5}.bd-gcs-6{grid-column-start:6}.bd-gcs-7{grid-column-start:7}.bd-gcs-8{grid-column-start:8}.bd-gcs-9{grid-column-start:9}.bd-gcs-10{grid-column-start:10}.bd-gcs{grid-column-start:var(--grid-column-start)}.bd-gr-1{grid-row:1}.bd-gr-2{grid-row:2}.bd-gr-3{grid-row:3}.bd-gr-4{grid-row:4}.bd-gr-5{grid-row:5}.bd-gr-6{grid-row:6}.bd-gr-7{grid-row:7}.bd-gr-8{grid-row:8}.bd-gr-9{grid-row:9}.bd-gr-10{grid-row:10}.bd-gr{grid-row:var(--grid-row)}.bd-gre-1{grid-row-end:1}.bd-gre-2{grid-row-end:2}.bd-gre-3{grid-row-end:3}.bd-gre-4{grid-row-end:4}.bd-gre-5{grid-row-end:5}.bd-gre-6{grid-row-end:6}.bd-gre-7{grid-row-end:7}.bd-gre-8{grid-row-end:8}.bd-gre-9{grid-row-end:9}.bd-gre-10{grid-row-end:10}.bd-gre{grid-row-end:var(--grid-row-end)}.bd-grs-1{grid-row-start:1}.bd-grs-2{grid-row-start:2}.bd-grs-3{grid-row-start:3}.bd-grs-4{grid-row-start:4}.bd-grs-5{grid-row-start:5}.bd-grs-6{grid-row-start:6}.bd-grs-7{grid-row-start:7}.bd-grs-8{grid-row-start:8}.bd-grs-9{grid-row-start:9}.bd-grs-10{grid-row-start:10}.bd-grs{grid-row-start:var(--grid-row-start)}.bd-overflow-visible{overflow:visible}.bd-overflow-hidden{overflow:hidden}.bd-overflow-clip{overflow:clip}.bd-overflow-scroll{overflow:scroll}.bd-overflow-auto{overflow:auto}.bd-overflow-x-visible{overflow-x:visible}.bd-overflow-x-hidden{overflow-x:hidden}.bd-overflow-x-clip{overflow-x:clip}.bd-overflow-x-scroll{overflow-x:scroll}.bd-overflow-x-auto{overflow-x:auto}.bd-overflow-y-visible{overflow-y:visible}.bd-overflow-y-hidden{overflow-y:hidden}.bd-overflow-y-clip{overflow-y:clip}.bd-overflow-y-scroll{overflow-y:scroll}.bd-overflow-y-auto{overflow-y:auto}.bd-p-0{padding:0}.bd-p-1{padding:var(--space-1)}.bd-p-2{padding:var(--space-2)}.bd-p-3{padding:var(--space-3)}.bd-p-4{padding:var(--space-4)}.bd-p-5{padding:var(--space-5)}.bd-p-6{padding:var(--space-6)}.bd-p-7{padding:var(--space-7)}.bd-p-8{padding:var(--space-8)}.bd-p-9{padding:var(--space-9)}.bd-p-10{padding:var(--space-10)}.bd-p-11{padding:var(--space-11)}.bd-p-12{padding:var(--space-12)}.bd-p{padding:var(--p)}.bd-px-0{padding-left:0;padding-right:0}.bd-px-1{padding-left:var(--space-1);padding-right:var(--space-1)}.bd-px-2{padding-left:var(--space-2);padding-right:var(--space-2)}.bd-px-3{padding-left:var(--space-3);padding-right:var(--space-3)}.bd-px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.bd-px-5{padding-left:var(--space-5);padding-right:var(--space-5)}.bd-px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.bd-px-7{padding-left:var(--space-7);padding-right:var(--space-7)}.bd-px-8{padding-left:var(--space-8);padding-right:var(--space-8)}.bd-px-9{padding-left:var(--space-9);padding-right:var(--space-9)}.bd-px-10{padding-left:var(--space-10);padding-right:var(--space-10)}.bd-px-11{padding-left:var(--space-11);padding-right:var(--space-11)}.bd-px-12{padding-left:var(--space-12);padding-right:var(--space-12)}.bd-px{padding-left:var(--padding-left);padding-right:var(--padding-right)}.bd-py-0{padding-top:0;padding-bottom:0}.bd-py-1{padding-top:var(--space-1);padding-bottom:var(--space-1)}.bd-py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.bd-py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)}.bd-py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.bd-py-5{padding-top:var(--space-5);padding-bottom:var(--space-5)}.bd-py-6{padding-top:var(--space-6);padding-bottom:var(--space-6)}.bd-py-7{padding-top:var(--space-7);padding-bottom:var(--space-7)}.bd-py-8{padding-top:var(--space-8);padding-bottom:var(--space-8)}.bd-py-9{padding-top:var(--space-9);padding-bottom:var(--space-9)}.bd-py-10{padding-top:var(--space-10);padding-bottom:var(--space-10)}.bd-py-11{padding-top:var(--space-11);padding-bottom:var(--space-11)}.bd-py-12{padding-top:var(--space-12);padding-bottom:var(--space-12)}.bd-py{padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.bd-pt-0{padding-top:0}.bd-pt-1{padding-top:var(--space-1)}.bd-pt-2{padding-top:var(--space-2)}.bd-pt-3{padding-top:var(--space-3)}.bd-pt-4{padding-top:var(--space-4)}.bd-pt-5{padding-top:var(--space-5)}.bd-pt-6{padding-top:var(--space-6)}.bd-pt-7{padding-top:var(--space-7)}.bd-pt-8{padding-top:var(--space-8)}.bd-pt-9{padding-top:var(--space-9)}.bd-pt-10{padding-top:var(--space-10)}.bd-pt-11{padding-top:var(--space-11)}.bd-pt-12{padding-top:var(--space-12)}.bd-pt{padding-top:var(--padding-top)}.bd-pr-0{padding-right:0}.bd-pr-1{padding-right:var(--space-1)}.bd-pr-2{padding-right:var(--space-2)}.bd-pr-3{padding-right:var(--space-3)}.bd-pr-4{padding-right:var(--space-4)}.bd-pr-5{padding-right:var(--space-5)}.bd-pr-6{padding-right:var(--space-6)}.bd-pr-7{padding-right:var(--space-7)}.bd-pr-8{padding-right:var(--space-8)}.bd-pr-9{padding-right:var(--space-9)}.bd-pr-10{padding-right:var(--space-10)}.bd-pr-11{padding-right:var(--space-11)}.bd-pr-12{padding-right:var(--space-12)}.bd-pr{padding-right:var(--padding-right)}.bd-pb-0{padding-bottom:0}.bd-pb-1{padding-bottom:var(--space-1)}.bd-pb-2{padding-bottom:var(--space-2)}.bd-pb-3{padding-bottom:var(--space-3)}.bd-pb-4{padding-bottom:var(--space-4)}.bd-pb-5{padding-bottom:var(--space-5)}.bd-pb-6{padding-bottom:var(--space-6)}.bd-pb-7{padding-bottom:var(--space-7)}.bd-pb-8{padding-bottom:var(--space-8)}.bd-pb-9{padding-bottom:var(--space-9)}.bd-pb-10{padding-bottom:var(--space-10)}.bd-pb-11{padding-bottom:var(--space-11)}.bd-pb-12{padding-bottom:var(--space-12)}.bd-pb{padding-bottom:var(--padding-bottom)}.bd-pl-0{padding-left:0}.bd-pl-1{padding-left:var(--space-1)}.bd-pl-2{padding-left:var(--space-2)}.bd-pl-3{padding-left:var(--space-3)}.bd-pl-4{padding-left:var(--space-4)}.bd-pl-5{padding-left:var(--space-5)}.bd-pl-6{padding-left:var(--space-6)}.bd-pl-7{padding-left:var(--space-7)}.bd-pl-8{padding-left:var(--space-8)}.bd-pl-9{padding-left:var(--space-9)}.bd-pl-10{padding-left:var(--space-10)}.bd-pl-11{padding-left:var(--space-11)}.bd-pl-12{padding-left:var(--space-12)}.bd-pl{padding-left:var(--padding-left)}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
declare const NODES: readonly ["a", "button", "div", "input", "label", "span"];
|
|
3
|
+
type Bases = {
|
|
4
|
+
[E in (typeof NODES)[number]]: BaseForwardRefComponent<E>;
|
|
5
|
+
};
|
|
6
|
+
type BasePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
|
|
7
|
+
asChild?: boolean;
|
|
8
|
+
};
|
|
9
|
+
type BaseForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<BasePropsWithRef<E>>;
|
|
10
|
+
declare const Base: Bases;
|
|
11
|
+
export { Base };
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
declare const sizes: readonly ["1", "2", "3", "4", "5"];
|
|
2
|
+
declare const variants: readonly ["fill-primary", "fill-secondary", "outline-primary", "outline-secondary", "ghost"];
|
|
3
|
+
declare const ButtonPropDefs: {
|
|
4
|
+
loading: {
|
|
5
|
+
type: "boolean";
|
|
6
|
+
className: string;
|
|
7
|
+
default: false;
|
|
8
|
+
};
|
|
9
|
+
weight: {
|
|
10
|
+
type: "enum";
|
|
11
|
+
values: readonly ["light", "regular", "medium", "semibold", "bold"];
|
|
12
|
+
className: string;
|
|
13
|
+
};
|
|
14
|
+
radius: {
|
|
15
|
+
type: "enum | string";
|
|
16
|
+
values: readonly ["none", "s", "m", "l", "full"];
|
|
17
|
+
default: undefined;
|
|
18
|
+
className: string;
|
|
19
|
+
customProperties: "--radius"[];
|
|
20
|
+
};
|
|
21
|
+
gap: {
|
|
22
|
+
type: "enum | string";
|
|
23
|
+
className: string;
|
|
24
|
+
customProperties: "--gap"[];
|
|
25
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
|
|
26
|
+
};
|
|
27
|
+
gapX: {
|
|
28
|
+
type: "enum | string";
|
|
29
|
+
className: string;
|
|
30
|
+
customProperties: "--col-gap"[];
|
|
31
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
|
|
32
|
+
};
|
|
33
|
+
gapY: {
|
|
34
|
+
type: "enum | string";
|
|
35
|
+
className: string;
|
|
36
|
+
customProperties: "--row-gap"[];
|
|
37
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
|
|
38
|
+
};
|
|
39
|
+
m: {
|
|
40
|
+
type: "enum | string";
|
|
41
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
42
|
+
className: string;
|
|
43
|
+
customProperties: "--m"[];
|
|
44
|
+
};
|
|
45
|
+
mx: {
|
|
46
|
+
type: "enum | string";
|
|
47
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
48
|
+
className: string;
|
|
49
|
+
customProperties: ("--ml" | "--mr")[];
|
|
50
|
+
};
|
|
51
|
+
my: {
|
|
52
|
+
type: "enum | string";
|
|
53
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
54
|
+
className: string;
|
|
55
|
+
customProperties: ("--mt" | "--mb")[];
|
|
56
|
+
};
|
|
57
|
+
mt: {
|
|
58
|
+
type: "enum | string";
|
|
59
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
60
|
+
className: string;
|
|
61
|
+
customProperties: "--mt"[];
|
|
62
|
+
};
|
|
63
|
+
mr: {
|
|
64
|
+
type: "enum | string";
|
|
65
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
66
|
+
className: string;
|
|
67
|
+
customProperties: "--mr"[];
|
|
68
|
+
};
|
|
69
|
+
mb: {
|
|
70
|
+
type: "enum | string";
|
|
71
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
72
|
+
className: string;
|
|
73
|
+
customProperties: "--mb"[];
|
|
74
|
+
};
|
|
75
|
+
ml: {
|
|
76
|
+
type: "enum | string";
|
|
77
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
78
|
+
className: string;
|
|
79
|
+
customProperties: "--ml"[];
|
|
80
|
+
};
|
|
81
|
+
width: {
|
|
82
|
+
type: "string";
|
|
83
|
+
className: string;
|
|
84
|
+
customProperties: "--width"[];
|
|
85
|
+
};
|
|
86
|
+
minWidth: {
|
|
87
|
+
type: "string";
|
|
88
|
+
className: string;
|
|
89
|
+
customProperties: "--min-width"[];
|
|
90
|
+
};
|
|
91
|
+
maxWidth: {
|
|
92
|
+
type: "string";
|
|
93
|
+
className: string;
|
|
94
|
+
customProperties: "--max-width"[];
|
|
95
|
+
};
|
|
96
|
+
/**
|
|
97
|
+
* @description 버튼의 높이 기준
|
|
98
|
+
*
|
|
99
|
+
* 1="24px"
|
|
100
|
+
* 2="32px"
|
|
101
|
+
* 3="40px"
|
|
102
|
+
* 4="48px"
|
|
103
|
+
* 5="56px"
|
|
104
|
+
*/
|
|
105
|
+
size: {
|
|
106
|
+
type: "enum";
|
|
107
|
+
className: string;
|
|
108
|
+
values: readonly ["1", "2", "3", "4", "5"];
|
|
109
|
+
default: "5";
|
|
110
|
+
};
|
|
111
|
+
variant: {
|
|
112
|
+
type: "enum";
|
|
113
|
+
className: string;
|
|
114
|
+
values: readonly ["fill-primary", "fill-secondary", "outline-primary", "outline-secondary", "ghost"];
|
|
115
|
+
default: "fill-primary";
|
|
116
|
+
};
|
|
117
|
+
asChild: {
|
|
118
|
+
type: "boolean";
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
export { ButtonPropDefs, sizes as buttonSizes, variants as buttonVariants };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { baseColorValues } from '../../core/defs';
|
|
2
|
+
import { ButtonPropDefs } from './button.defs';
|
|
3
|
+
declare const mapButtonSizeToSpinnerSize: (size: (typeof ButtonPropDefs.size.values)[number]) => "1" | "2" | "3";
|
|
4
|
+
declare const mapButtonVariantToSpinnerColor: (color: (typeof ButtonPropDefs.variant.values)[number]) => (typeof baseColorValues)[number] | undefined;
|
|
5
|
+
export { mapButtonSizeToSpinnerSize, mapButtonVariantToSpinnerColor };
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { GetPropDefTypes } from '../../core/defs';
|
|
2
|
+
import { ComponentPropsWithout, DefaultRemovedProps } from '../../core/react';
|
|
3
|
+
import { ButtonPropDefs } from './button.defs';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
type ButtonPropDefs = GetPropDefTypes<typeof ButtonPropDefs>;
|
|
6
|
+
type ButtonProps = ComponentPropsWithout<'button', DefaultRemovedProps> & ButtonPropDefs;
|
|
7
|
+
declare const Button: React.ForwardRefExoticComponent<ComponentPropsWithout<"button", DefaultRemovedProps> & GetPropDefTypes<{
|
|
8
|
+
loading: {
|
|
9
|
+
type: "boolean";
|
|
10
|
+
className: string;
|
|
11
|
+
default: false;
|
|
12
|
+
};
|
|
13
|
+
weight: {
|
|
14
|
+
type: "enum";
|
|
15
|
+
values: readonly ["light", "regular", "medium", "semibold", "bold"];
|
|
16
|
+
className: string;
|
|
17
|
+
};
|
|
18
|
+
radius: {
|
|
19
|
+
type: "enum | string";
|
|
20
|
+
values: readonly ["none", "s", "m", "l", "full"];
|
|
21
|
+
default: undefined;
|
|
22
|
+
className: string;
|
|
23
|
+
customProperties: "--radius"[];
|
|
24
|
+
};
|
|
25
|
+
gap: {
|
|
26
|
+
type: "enum | string";
|
|
27
|
+
className: string;
|
|
28
|
+
customProperties: "--gap"[];
|
|
29
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
|
|
30
|
+
};
|
|
31
|
+
gapX: {
|
|
32
|
+
type: "enum | string";
|
|
33
|
+
className: string;
|
|
34
|
+
customProperties: "--col-gap"[];
|
|
35
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
|
|
36
|
+
};
|
|
37
|
+
gapY: {
|
|
38
|
+
type: "enum | string";
|
|
39
|
+
className: string;
|
|
40
|
+
customProperties: "--row-gap"[];
|
|
41
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
|
|
42
|
+
};
|
|
43
|
+
m: {
|
|
44
|
+
type: "enum | string";
|
|
45
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
46
|
+
className: string;
|
|
47
|
+
customProperties: "--m"[];
|
|
48
|
+
};
|
|
49
|
+
mx: {
|
|
50
|
+
type: "enum | string";
|
|
51
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
52
|
+
className: string;
|
|
53
|
+
customProperties: ("--ml" | "--mr")[];
|
|
54
|
+
};
|
|
55
|
+
my: {
|
|
56
|
+
type: "enum | string";
|
|
57
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
58
|
+
className: string;
|
|
59
|
+
customProperties: ("--mt" | "--mb")[];
|
|
60
|
+
};
|
|
61
|
+
mt: {
|
|
62
|
+
type: "enum | string";
|
|
63
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
64
|
+
className: string;
|
|
65
|
+
customProperties: "--mt"[];
|
|
66
|
+
};
|
|
67
|
+
mr: {
|
|
68
|
+
type: "enum | string";
|
|
69
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
70
|
+
className: string;
|
|
71
|
+
customProperties: "--mr"[];
|
|
72
|
+
};
|
|
73
|
+
mb: {
|
|
74
|
+
type: "enum | string";
|
|
75
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
76
|
+
className: string;
|
|
77
|
+
customProperties: "--mb"[];
|
|
78
|
+
};
|
|
79
|
+
ml: {
|
|
80
|
+
type: "enum | string";
|
|
81
|
+
values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"];
|
|
82
|
+
className: string;
|
|
83
|
+
customProperties: "--ml"[];
|
|
84
|
+
};
|
|
85
|
+
width: {
|
|
86
|
+
type: "string";
|
|
87
|
+
className: string;
|
|
88
|
+
customProperties: "--width"[];
|
|
89
|
+
};
|
|
90
|
+
minWidth: {
|
|
91
|
+
type: "string";
|
|
92
|
+
className: string;
|
|
93
|
+
customProperties: "--min-width"[];
|
|
94
|
+
};
|
|
95
|
+
maxWidth: {
|
|
96
|
+
type: "string";
|
|
97
|
+
className: string;
|
|
98
|
+
customProperties: "--max-width"[];
|
|
99
|
+
};
|
|
100
|
+
size: {
|
|
101
|
+
type: "enum";
|
|
102
|
+
className: string;
|
|
103
|
+
values: readonly ["1", "2", "3", "4", "5"];
|
|
104
|
+
default: "5";
|
|
105
|
+
};
|
|
106
|
+
variant: {
|
|
107
|
+
type: "enum";
|
|
108
|
+
className: string;
|
|
109
|
+
values: readonly ["fill-primary", "fill-secondary", "outline-primary", "outline-secondary", "ghost"];
|
|
110
|
+
default: "fill-primary";
|
|
111
|
+
};
|
|
112
|
+
asChild: {
|
|
113
|
+
type: "boolean";
|
|
114
|
+
};
|
|
115
|
+
}> & React.RefAttributes<HTMLButtonElement>>;
|
|
116
|
+
export default Button;
|
|
117
|
+
export type { ButtonProps };
|