stp-ui-kit 0.0.107 → 0.0.108
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 +224 -224
- package/dist/banners/Sat.svg +3 -3
- package/dist/banners/SatFinished.svg +3 -3
- package/dist/icons/ArrowLine.svg +3 -3
- package/dist/icons/ParentLine.svg +3 -3
- package/dist/icons/Plus.svg +2 -2
- package/dist/icons/SideLine.svg +3 -3
- package/dist/icons/X.svg +2 -2
- package/dist/icons/decorativeIcons/Alert.svg +11 -11
- package/dist/icons/decorativeIcons/Error.svg +11 -11
- package/dist/icons/decorativeIcons/Locked.svg +10 -10
- package/dist/icons/decorativeIcons/Success.svg +10 -10
- package/dist/stp-ui-kit.es.js +5625 -9455
- package/dist/stp-ui-kit.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +120 -120
- package/src/styles/_variables.scss +1179 -1179
- package/src/styles/main.scss +11 -11
- package/src/styles/tokens.js +94 -94
package/README.md
CHANGED
|
@@ -1,224 +1,224 @@
|
|
|
1
|
-
# 🎨 stp-ui-kit
|
|
2
|
-
|
|
3
|
-
A comprehensive React UI Kit with 50+ production-ready components for the Smartestprep platform.
|
|
4
|
-
Built with TypeScript, Tailwind CSS, and SCSS for consistent design and rapid development.
|
|
5
|
-
|
|
6
|
-
[](https://www.npmjs.com/package/stp-ui-kit)
|
|
7
|
-
[](./LICENSE)
|
|
8
|
-
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
## ✨ Features
|
|
12
|
-
|
|
13
|
-
- 🎨 **50+ Components** - Display, Form, Feedback, Layout, Navigation, Data
|
|
14
|
-
- 🎯 **Design System** - Comprehensive design tokens (spacing, colors, typography)
|
|
15
|
-
- 📱 **Responsive** - Mobile-first with built-in breakpoints
|
|
16
|
-
- 🔧 **TypeScript** - Full type safety with strict mode
|
|
17
|
-
- 🎭 **Theming** - CSS custom properties for easy theming
|
|
18
|
-
- 🚀 **Tree-shakeable** - ES modules for optimal bundle size
|
|
19
|
-
- 📚 **Storybook** - Interactive component documentation
|
|
20
|
-
- 🔥 **Hot Reload** - Watch mode for seamless development with npm link
|
|
21
|
-
|
|
22
|
-
---
|
|
23
|
-
|
|
24
|
-
## 📦 Installation
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
npm install stp-ui-kit
|
|
28
|
-
# or
|
|
29
|
-
yarn add stp-ui-kit
|
|
30
|
-
# or
|
|
31
|
-
pnpm add stp-ui-kit
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
---
|
|
35
|
-
|
|
36
|
-
## 🚀 Quick Start
|
|
37
|
-
|
|
38
|
-
```tsx
|
|
39
|
-
// Import styles once in your app entry (main.tsx or App.tsx)
|
|
40
|
-
// Import and use components
|
|
41
|
-
import { Button, Input, Modal, Typography } from "stp-ui-kit";
|
|
42
|
-
import "stp-ui-kit/styles";
|
|
43
|
-
|
|
44
|
-
export default function App() {
|
|
45
|
-
return (
|
|
46
|
-
<div>
|
|
47
|
-
<Typography variant='h1'>Welcome</Typography>
|
|
48
|
-
<Input
|
|
49
|
-
label='Email'
|
|
50
|
-
placeholder='Enter your email'
|
|
51
|
-
/>
|
|
52
|
-
<Button variant='primary'>Get Started</Button>
|
|
53
|
-
</div>
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
### Using Design Tokens
|
|
59
|
-
|
|
60
|
-
**In SCSS files:**
|
|
61
|
-
|
|
62
|
-
```scss
|
|
63
|
-
@use "stp-ui-kit/styles/variables" as stp;
|
|
64
|
-
|
|
65
|
-
.my-component {
|
|
66
|
-
padding: stp.$space-400; // 16px
|
|
67
|
-
border-radius: stp.$border-radius-100; // 4px
|
|
68
|
-
color: var(--color-neutral-800);
|
|
69
|
-
}
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
**In JavaScript/TypeScript:**
|
|
73
|
-
|
|
74
|
-
```typescript
|
|
75
|
-
import { breakpoints, spacing, typography } from "stp-ui-kit/tokens";
|
|
76
|
-
|
|
77
|
-
const styles = {
|
|
78
|
-
padding: spacing["space-400"], // '16px'
|
|
79
|
-
};
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
---
|
|
83
|
-
|
|
84
|
-
## 📚 Documentation
|
|
85
|
-
|
|
86
|
-
- **[COMPONENTS.md](./COMPONENTS.md)** - Complete component reference with all 50+ components
|
|
87
|
-
- **[USAGE_GUIDE.md](./USAGE_GUIDE.md)** - Comprehensive usage guide with examples
|
|
88
|
-
- **[CLAUDE.md](./CLAUDE.md)** - Instructions for AI assistants (Claude Code)
|
|
89
|
-
- **Storybook** - Interactive demos (run `npm run storybook`)
|
|
90
|
-
|
|
91
|
-
---
|
|
92
|
-
|
|
93
|
-
## 📂 Project Structure
|
|
94
|
-
|
|
95
|
-
```plaintext
|
|
96
|
-
src/
|
|
97
|
-
├─ assets/ # custom icons and static assets
|
|
98
|
-
├─ components/ # UI components
|
|
99
|
-
│ ├─ data/
|
|
100
|
-
│ ├─ display/
|
|
101
|
-
│ ├─ feedback/
|
|
102
|
-
│ ├─ form/
|
|
103
|
-
│ ├─ layout/
|
|
104
|
-
│ ├─ navigation/
|
|
105
|
-
│ └─ ui/
|
|
106
|
-
├─ lib/ # helpers, utils
|
|
107
|
-
├─ styles/ # global styles, tokens, variables
|
|
108
|
-
│ ├─ _variables.scss
|
|
109
|
-
│ ├─ main.scss
|
|
110
|
-
│ └─ tokens.ts
|
|
111
|
-
├─ App.tsx # playground / dev entry
|
|
112
|
-
└─ index.ts # main export file
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
---
|
|
116
|
-
|
|
117
|
-
## 🛠 Tech Stack
|
|
118
|
-
|
|
119
|
-
- React 18+ / 19+ – core UI framework
|
|
120
|
-
- TypeScript – strongly typed components
|
|
121
|
-
- TailwindCSS 4 + SCSS – styling and design tokens
|
|
122
|
-
- React Hook Form – form handling integration
|
|
123
|
-
- Storybook 8 – interactive component documentation
|
|
124
|
-
- Vite – development & build tooling
|
|
125
|
-
|
|
126
|
-
---
|
|
127
|
-
|
|
128
|
-
## 📖 Documentation
|
|
129
|
-
|
|
130
|
-
Run Storybook to explore and test components interactively:
|
|
131
|
-
|
|
132
|
-
```bash
|
|
133
|
-
npm run storybook
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
Build the static Storybook docs:
|
|
137
|
-
|
|
138
|
-
```bash
|
|
139
|
-
npm run build-storybook
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
## 🧑💻 Development
|
|
145
|
-
|
|
146
|
-
- Start in dev mode
|
|
147
|
-
|
|
148
|
-
```bash
|
|
149
|
-
npm run dev
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
- Build library
|
|
153
|
-
|
|
154
|
-
```bash
|
|
155
|
-
npm run build
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
- Lint & format
|
|
159
|
-
|
|
160
|
-
```bash
|
|
161
|
-
npm run lint
|
|
162
|
-
npm run format
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
- Generate tokens
|
|
166
|
-
```bash
|
|
167
|
-
npm run generate-tokens
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
---
|
|
171
|
-
|
|
172
|
-
# 🔑 Principles
|
|
173
|
-
|
|
174
|
-
- Fully typed components (.ts / .tsx only)
|
|
175
|
-
- Consistent design system powered by tokens according to Figma designs
|
|
176
|
-
- Use named exports only (`export const`)
|
|
177
|
-
- Remove unused/deprecated components over time
|
|
178
|
-
- Do not add new dependencies unless absolutely necessary (to avoid making the project heavy)
|
|
179
|
-
|
|
180
|
-
### 📦 Project Releases
|
|
181
|
-
|
|
182
|
-
- Always upgrade the version in `package.json` before publishing
|
|
183
|
-
- Do **not** run `npm publish` for every minor change
|
|
184
|
-
- Always run `npm run build` before publishing
|
|
185
|
-
- All changes must be commited into repository
|
|
186
|
-
|
|
187
|
-
### 🛠 Local Development with Hot Reload
|
|
188
|
-
|
|
189
|
-
When developing stp-ui-kit and testing in another project:
|
|
190
|
-
|
|
191
|
-
```bash
|
|
192
|
-
# 1. In stp-ui-kit directory
|
|
193
|
-
npm link
|
|
194
|
-
npm run build:watch # Keep this running - auto-rebuilds on changes!
|
|
195
|
-
|
|
196
|
-
# 2. In your project directory
|
|
197
|
-
npm link stp-ui-kit
|
|
198
|
-
npm start
|
|
199
|
-
|
|
200
|
-
# Changes in stp-ui-kit will now auto-reflect in your project! 🔥
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
**No need to unlink/relink** - `build:watch` provides hot reload for linked packages.
|
|
204
|
-
|
|
205
|
-
### 📤 Publishing
|
|
206
|
-
|
|
207
|
-
- Always run `npm run build` before publishing
|
|
208
|
-
- Update version in `package.json` before `npm publish`
|
|
209
|
-
- Commit all changes to repository
|
|
210
|
-
- Run `npm run format` and `npm run lint` before committing
|
|
211
|
-
|
|
212
|
-
## 🤝 Contributing
|
|
213
|
-
|
|
214
|
-
1. Clone the repo
|
|
215
|
-
2. Install dependencies with `npm install`
|
|
216
|
-
3. Run Storybook (`npm run storybook`)
|
|
217
|
-
4. Add or update a component inside `src/components`
|
|
218
|
-
5. Submit a pull request 🎉
|
|
219
|
-
|
|
220
|
-
---
|
|
221
|
-
|
|
222
|
-
## 📜 License
|
|
223
|
-
|
|
224
|
-
MIT © Smartestprep
|
|
1
|
+
# 🎨 stp-ui-kit
|
|
2
|
+
|
|
3
|
+
A comprehensive React UI Kit with 50+ production-ready components for the Smartestprep platform.
|
|
4
|
+
Built with TypeScript, Tailwind CSS, and SCSS for consistent design and rapid development.
|
|
5
|
+
|
|
6
|
+
[](https://www.npmjs.com/package/stp-ui-kit)
|
|
7
|
+
[](./LICENSE)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## ✨ Features
|
|
12
|
+
|
|
13
|
+
- 🎨 **50+ Components** - Display, Form, Feedback, Layout, Navigation, Data
|
|
14
|
+
- 🎯 **Design System** - Comprehensive design tokens (spacing, colors, typography)
|
|
15
|
+
- 📱 **Responsive** - Mobile-first with built-in breakpoints
|
|
16
|
+
- 🔧 **TypeScript** - Full type safety with strict mode
|
|
17
|
+
- 🎭 **Theming** - CSS custom properties for easy theming
|
|
18
|
+
- 🚀 **Tree-shakeable** - ES modules for optimal bundle size
|
|
19
|
+
- 📚 **Storybook** - Interactive component documentation
|
|
20
|
+
- 🔥 **Hot Reload** - Watch mode for seamless development with npm link
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 📦 Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install stp-ui-kit
|
|
28
|
+
# or
|
|
29
|
+
yarn add stp-ui-kit
|
|
30
|
+
# or
|
|
31
|
+
pnpm add stp-ui-kit
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## 🚀 Quick Start
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
// Import styles once in your app entry (main.tsx or App.tsx)
|
|
40
|
+
// Import and use components
|
|
41
|
+
import { Button, Input, Modal, Typography } from "stp-ui-kit";
|
|
42
|
+
import "stp-ui-kit/styles";
|
|
43
|
+
|
|
44
|
+
export default function App() {
|
|
45
|
+
return (
|
|
46
|
+
<div>
|
|
47
|
+
<Typography variant='h1'>Welcome</Typography>
|
|
48
|
+
<Input
|
|
49
|
+
label='Email'
|
|
50
|
+
placeholder='Enter your email'
|
|
51
|
+
/>
|
|
52
|
+
<Button variant='primary'>Get Started</Button>
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Using Design Tokens
|
|
59
|
+
|
|
60
|
+
**In SCSS files:**
|
|
61
|
+
|
|
62
|
+
```scss
|
|
63
|
+
@use "stp-ui-kit/styles/variables" as stp;
|
|
64
|
+
|
|
65
|
+
.my-component {
|
|
66
|
+
padding: stp.$space-400; // 16px
|
|
67
|
+
border-radius: stp.$border-radius-100; // 4px
|
|
68
|
+
color: var(--color-neutral-800);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
**In JavaScript/TypeScript:**
|
|
73
|
+
|
|
74
|
+
```typescript
|
|
75
|
+
import { breakpoints, spacing, typography } from "stp-ui-kit/tokens";
|
|
76
|
+
|
|
77
|
+
const styles = {
|
|
78
|
+
padding: spacing["space-400"], // '16px'
|
|
79
|
+
};
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## 📚 Documentation
|
|
85
|
+
|
|
86
|
+
- **[COMPONENTS.md](./COMPONENTS.md)** - Complete component reference with all 50+ components
|
|
87
|
+
- **[USAGE_GUIDE.md](./USAGE_GUIDE.md)** - Comprehensive usage guide with examples
|
|
88
|
+
- **[CLAUDE.md](./CLAUDE.md)** - Instructions for AI assistants (Claude Code)
|
|
89
|
+
- **Storybook** - Interactive demos (run `npm run storybook`)
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## 📂 Project Structure
|
|
94
|
+
|
|
95
|
+
```plaintext
|
|
96
|
+
src/
|
|
97
|
+
├─ assets/ # custom icons and static assets
|
|
98
|
+
├─ components/ # UI components
|
|
99
|
+
│ ├─ data/
|
|
100
|
+
│ ├─ display/
|
|
101
|
+
│ ├─ feedback/
|
|
102
|
+
│ ├─ form/
|
|
103
|
+
│ ├─ layout/
|
|
104
|
+
│ ├─ navigation/
|
|
105
|
+
│ └─ ui/
|
|
106
|
+
├─ lib/ # helpers, utils
|
|
107
|
+
├─ styles/ # global styles, tokens, variables
|
|
108
|
+
│ ├─ _variables.scss
|
|
109
|
+
│ ├─ main.scss
|
|
110
|
+
│ └─ tokens.ts
|
|
111
|
+
├─ App.tsx # playground / dev entry
|
|
112
|
+
└─ index.ts # main export file
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## 🛠 Tech Stack
|
|
118
|
+
|
|
119
|
+
- React 18+ / 19+ – core UI framework
|
|
120
|
+
- TypeScript – strongly typed components
|
|
121
|
+
- TailwindCSS 4 + SCSS – styling and design tokens
|
|
122
|
+
- React Hook Form – form handling integration
|
|
123
|
+
- Storybook 8 – interactive component documentation
|
|
124
|
+
- Vite – development & build tooling
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## 📖 Documentation
|
|
129
|
+
|
|
130
|
+
Run Storybook to explore and test components interactively:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
npm run storybook
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
Build the static Storybook docs:
|
|
137
|
+
|
|
138
|
+
```bash
|
|
139
|
+
npm run build-storybook
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## 🧑💻 Development
|
|
145
|
+
|
|
146
|
+
- Start in dev mode
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
npm run dev
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
- Build library
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
npm run build
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
- Lint & format
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
npm run lint
|
|
162
|
+
npm run format
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
- Generate tokens
|
|
166
|
+
```bash
|
|
167
|
+
npm run generate-tokens
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
# 🔑 Principles
|
|
173
|
+
|
|
174
|
+
- Fully typed components (.ts / .tsx only)
|
|
175
|
+
- Consistent design system powered by tokens according to Figma designs
|
|
176
|
+
- Use named exports only (`export const`)
|
|
177
|
+
- Remove unused/deprecated components over time
|
|
178
|
+
- Do not add new dependencies unless absolutely necessary (to avoid making the project heavy)
|
|
179
|
+
|
|
180
|
+
### 📦 Project Releases
|
|
181
|
+
|
|
182
|
+
- Always upgrade the version in `package.json` before publishing
|
|
183
|
+
- Do **not** run `npm publish` for every minor change
|
|
184
|
+
- Always run `npm run build` before publishing
|
|
185
|
+
- All changes must be commited into repository
|
|
186
|
+
|
|
187
|
+
### 🛠 Local Development with Hot Reload
|
|
188
|
+
|
|
189
|
+
When developing stp-ui-kit and testing in another project:
|
|
190
|
+
|
|
191
|
+
```bash
|
|
192
|
+
# 1. In stp-ui-kit directory
|
|
193
|
+
npm link
|
|
194
|
+
npm run build:watch # Keep this running - auto-rebuilds on changes!
|
|
195
|
+
|
|
196
|
+
# 2. In your project directory
|
|
197
|
+
npm link stp-ui-kit
|
|
198
|
+
npm start
|
|
199
|
+
|
|
200
|
+
# Changes in stp-ui-kit will now auto-reflect in your project! 🔥
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
**No need to unlink/relink** - `build:watch` provides hot reload for linked packages.
|
|
204
|
+
|
|
205
|
+
### 📤 Publishing
|
|
206
|
+
|
|
207
|
+
- Always run `npm run build` before publishing
|
|
208
|
+
- Update version in `package.json` before `npm publish`
|
|
209
|
+
- Commit all changes to repository
|
|
210
|
+
- Run `npm run format` and `npm run lint` before committing
|
|
211
|
+
|
|
212
|
+
## 🤝 Contributing
|
|
213
|
+
|
|
214
|
+
1. Clone the repo
|
|
215
|
+
2. Install dependencies with `npm install`
|
|
216
|
+
3. Run Storybook (`npm run storybook`)
|
|
217
|
+
4. Add or update a component inside `src/components`
|
|
218
|
+
5. Submit a pull request 🎉
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## 📜 License
|
|
223
|
+
|
|
224
|
+
MIT © Smartestprep
|
package/dist/banners/Sat.svg
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M18.7133 0L0 22.4506H8.63211L5.28671 40L24 17.5494H15.3679L18.7133 0Z" fill="#5EEAD4"/>
|
|
3
|
-
</svg>
|
|
1
|
+
<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M18.7133 0L0 22.4506H8.63211L5.28671 40L24 17.5494H15.3679L18.7133 0Z" fill="#5EEAD4"/>
|
|
3
|
+
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M18.7133 0L0 22.4506H8.63211L5.28671 40L24 17.5494H15.3679L18.7133 0Z" fill="#5B21B6"/>
|
|
3
|
-
</svg>
|
|
1
|
+
<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M18.7133 0L0 22.4506H8.63211L5.28671 40L24 17.5494H15.3679L18.7133 0Z" fill="#5B21B6"/>
|
|
3
|
+
</svg>
|
package/dist/icons/ArrowLine.svg
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="20" height="36" viewBox="0 0 20 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M9 0H10.5V12.95C10.5 13.8025 10.5006 14.3967 10.5384 14.8593C10.5755 15.3132 10.6446 15.574 10.7452 15.7715C10.961 16.1948 11.3052 16.539 11.7285 16.7548C11.926 16.8554 12.1868 16.9245 12.6407 16.9616C13.1033 16.9994 13.6975 17 14.55 17H16.9393L15.2197 15.2803C14.9268 14.9874 14.9268 14.5126 15.2197 14.2197C15.5126 13.9268 15.9874 13.9268 16.2803 14.2197L19.2803 17.2197C19.5732 17.5126 19.5732 17.9874 19.2803 18.2803L16.2803 21.2803C15.9874 21.5732 15.5126 21.5732 15.2197 21.2803C14.9268 20.9874 14.9268 20.5126 15.2197 20.2197L16.9393 18.5H14.5179C13.705 18.5 13.0494 18.5 12.5185 18.4566C11.9719 18.412 11.4918 18.3176 11.0475 18.0913C10.3419 17.7317 9.76825 17.1581 9.40873 16.4525C9.18239 16.0082 9.08803 15.5281 9.04336 14.9815C8.99999 14.4506 8.99999 13.795 9 12.9821V0Z" fill="#868892"/>
|
|
3
|
-
</svg>
|
|
1
|
+
<svg width="20" height="36" viewBox="0 0 20 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M9 0H10.5V12.95C10.5 13.8025 10.5006 14.3967 10.5384 14.8593C10.5755 15.3132 10.6446 15.574 10.7452 15.7715C10.961 16.1948 11.3052 16.539 11.7285 16.7548C11.926 16.8554 12.1868 16.9245 12.6407 16.9616C13.1033 16.9994 13.6975 17 14.55 17H16.9393L15.2197 15.2803C14.9268 14.9874 14.9268 14.5126 15.2197 14.2197C15.5126 13.9268 15.9874 13.9268 16.2803 14.2197L19.2803 17.2197C19.5732 17.5126 19.5732 17.9874 19.2803 18.2803L16.2803 21.2803C15.9874 21.5732 15.5126 21.5732 15.2197 21.2803C14.9268 20.9874 14.9268 20.5126 15.2197 20.2197L16.9393 18.5H14.5179C13.705 18.5 13.0494 18.5 12.5185 18.4566C11.9719 18.412 11.4918 18.3176 11.0475 18.0913C10.3419 17.7317 9.76825 17.1581 9.40873 16.4525C9.18239 16.0082 9.08803 15.5281 9.04336 14.9815C8.99999 14.4506 8.99999 13.795 9 12.9821V0Z" fill="#868892"/>
|
|
3
|
+
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="2" height="6" viewBox="0 0 2 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M0 0.75C0 0.335786 0.335786 0 0.75 0C1.16421 0 1.5 0.335786 1.5 0.75V6H0V0.75Z" fill="#868892"/>
|
|
3
|
-
</svg>
|
|
1
|
+
<svg width="2" height="6" viewBox="0 0 2 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 0.75C0 0.335786 0.335786 0 0.75 0C1.16421 0 1.5 0.335786 1.5 0.75V6H0V0.75Z" fill="#868892"/>
|
|
3
|
+
</svg>
|
package/dist/icons/Plus.svg
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
2
|
-
<path d="M9.99968 3.41663C10.4139 3.41663 10.7497 3.75241 10.7497 4.16663V9.24963H15.8337C16.2476 9.24981 16.5835 9.5857 16.5837 9.99963C16.5837 10.4137 16.2477 10.7495 15.8337 10.7496H10.7497V15.8336C10.7495 16.2477 10.4138 16.5836 9.99968 16.5836C9.58572 16.5834 9.24986 16.2476 9.24968 15.8336V10.7496H4.16667C3.75246 10.7496 3.41667 10.4138 3.41667 9.99963C3.41687 9.58559 3.75258 9.24963 4.16667 9.24963H9.24968V4.16663C9.24968 3.75252 9.58562 3.4168 9.99968 3.41663Z" fill="currentColor"/>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
2
|
+
<path d="M9.99968 3.41663C10.4139 3.41663 10.7497 3.75241 10.7497 4.16663V9.24963H15.8337C16.2476 9.24981 16.5835 9.5857 16.5837 9.99963C16.5837 10.4137 16.2477 10.7495 15.8337 10.7496H10.7497V15.8336C10.7495 16.2477 10.4138 16.5836 9.99968 16.5836C9.58572 16.5834 9.24986 16.2476 9.24968 15.8336V10.7496H4.16667C3.75246 10.7496 3.41667 10.4138 3.41667 9.99963C3.41687 9.58559 3.75258 9.24963 4.16667 9.24963H9.24968V4.16663C9.24968 3.75252 9.58562 3.4168 9.99968 3.41663Z" fill="currentColor"/>
|
|
3
3
|
</svg>
|
package/dist/icons/SideLine.svg
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="20" height="36" viewBox="0 0 20 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect x="9" width="1.5" height="36" fill="#868892"/>
|
|
3
|
-
</svg>
|
|
1
|
+
<svg width="20" height="36" viewBox="0 0 20 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="9" width="1.5" height="36" fill="#868892"/>
|
|
3
|
+
</svg>
|
package/dist/icons/X.svg
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
2
|
-
<path d="M10.2197 0.21967C10.5126 -0.0732232 10.9873 -0.0732232 11.2802 0.21967C11.5731 0.512568 11.5731 0.987342 11.2802 1.28022L6.81049 5.74994L11.2802 10.2197C11.5731 10.5126 11.5731 10.9873 11.2802 11.2802C10.9873 11.5731 10.5126 11.5731 10.2197 11.2802L5.74994 6.81049L1.28022 11.2802C0.987342 11.5731 0.512568 11.5731 0.21967 11.2802C-0.0732232 10.9873 -0.0732232 10.5126 0.21967 10.2197L4.6894 5.74994L0.21967 1.28022C-0.0732233 0.987324 -0.0732233 0.512563 0.21967 0.21967C0.512563 -0.0732233 0.987324 -0.0732233 1.28022 0.21967L5.74994 4.6894L10.2197 0.21967Z" fill="currentColor"/>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
2
|
+
<path d="M10.2197 0.21967C10.5126 -0.0732232 10.9873 -0.0732232 11.2802 0.21967C11.5731 0.512568 11.5731 0.987342 11.2802 1.28022L6.81049 5.74994L11.2802 10.2197C11.5731 10.5126 11.5731 10.9873 11.2802 11.2802C10.9873 11.5731 10.5126 11.5731 10.2197 11.2802L5.74994 6.81049L1.28022 11.2802C0.987342 11.5731 0.512568 11.5731 0.21967 11.2802C-0.0732232 10.9873 -0.0732232 10.5126 0.21967 10.2197L4.6894 5.74994L0.21967 1.28022C-0.0732233 0.987324 -0.0732233 0.512563 0.21967 0.21967C0.512563 -0.0732233 0.987324 -0.0732233 1.28022 0.21967L5.74994 4.6894L10.2197 0.21967Z" fill="currentColor"/>
|
|
3
3
|
</svg>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M40 73.3334C58.4095 73.3334 73.3333 58.4095 73.3333 40C73.3333 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66663 21.5905 6.66663 40C6.66663 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_832)"/>
|
|
3
|
-
<path d="M40 26.6667V40" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
-
<path d="M40 53.3334H40.0333" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
-
<defs>
|
|
6
|
-
<linearGradient id="paint0_linear_970_832" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
|
|
7
|
-
<stop stop-color="#FEF3C7"/>
|
|
8
|
-
<stop offset="1" stop-color="#F59E0B"/>
|
|
9
|
-
</linearGradient>
|
|
10
|
-
</defs>
|
|
11
|
-
</svg>
|
|
1
|
+
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M40 73.3334C58.4095 73.3334 73.3333 58.4095 73.3333 40C73.3333 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66663 21.5905 6.66663 40C6.66663 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_832)"/>
|
|
3
|
+
<path d="M40 26.6667V40" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M40 53.3334H40.0333" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<defs>
|
|
6
|
+
<linearGradient id="paint0_linear_970_832" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
|
|
7
|
+
<stop stop-color="#FEF3C7"/>
|
|
8
|
+
<stop offset="1" stop-color="#F59E0B"/>
|
|
9
|
+
</linearGradient>
|
|
10
|
+
</defs>
|
|
11
|
+
</svg>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M40 73.3334C58.4095 73.3334 73.3333 58.4095 73.3333 40C73.3333 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66663 21.5905 6.66663 40C6.66663 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_956)"/>
|
|
3
|
-
<path d="M50 30L30 50" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
-
<path d="M30 30L50 50" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
-
<defs>
|
|
6
|
-
<linearGradient id="paint0_linear_970_956" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
|
|
7
|
-
<stop stop-color="#FEE2E2"/>
|
|
8
|
-
<stop offset="1" stop-color="#EF4444"/>
|
|
9
|
-
</linearGradient>
|
|
10
|
-
</defs>
|
|
11
|
-
</svg>
|
|
1
|
+
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M40 73.3334C58.4095 73.3334 73.3333 58.4095 73.3333 40C73.3333 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66663 21.5905 6.66663 40C6.66663 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_956)"/>
|
|
3
|
+
<path d="M50 30L30 50" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M30 30L50 50" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<defs>
|
|
6
|
+
<linearGradient id="paint0_linear_970_956" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
|
|
7
|
+
<stop stop-color="#FEE2E2"/>
|
|
8
|
+
<stop offset="1" stop-color="#EF4444"/>
|
|
9
|
+
</linearGradient>
|
|
10
|
+
</defs>
|
|
11
|
+
</svg>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.9827 13.3153C32.6394 10.6586 36.2428 9.16602 40 9.16602C43.7572 9.16602 47.3606 10.6586 50.0173 13.3153C52.6741 15.9721 54.1667 19.5754 54.1667 23.3327V33.3327C54.1667 33.3331 54.1667 33.3335 54.1667 33.334H25.8333C25.8333 33.3335 25.8333 33.3331 25.8333 33.3327V23.3327C25.8333 19.5754 27.3259 15.9721 29.9827 13.3153ZM20.8333 33.334C20.8333 33.3335 20.8333 33.3331 20.8333 33.3327V23.3327C20.8333 18.2494 22.8527 13.3742 26.4471 9.7798C30.0416 6.18535 34.9167 4.16602 40 4.16602C45.0833 4.16602 49.9584 6.18535 53.5529 9.7798C57.1473 13.3742 59.1667 18.2494 59.1667 23.3327V33.3327C59.1667 33.3331 59.1667 33.3335 59.1667 33.334H63.3333C67.0152 33.334 70 36.3188 70 40.0007V66.6673C70 70.3492 67.0152 73.334 63.3333 73.334H16.6667C12.9848 73.334 10 70.3492 10 66.6673V40.0007C10 36.3188 12.9848 33.334 16.6667 33.334H20.8333Z" fill="url(#paint0_linear_995_7796)"/>
|
|
3
|
-
<path d="M40 56.6667C41.8409 56.6667 43.3333 55.1743 43.3333 53.3333C43.3333 51.4924 41.8409 50 40 50C38.159 50 36.6666 51.4924 36.6666 53.3333C36.6666 55.1743 38.159 56.6667 40 56.6667Z" fill="white" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
-
<defs>
|
|
5
|
-
<linearGradient id="paint0_linear_995_7796" x1="40" y1="4.16602" x2="40" y2="73.334" gradientUnits="userSpaceOnUse">
|
|
6
|
-
<stop stop-color="#E4E8ED"/>
|
|
7
|
-
<stop offset="1" stop-color="#868892"/>
|
|
8
|
-
</linearGradient>
|
|
9
|
-
</defs>
|
|
10
|
-
</svg>
|
|
1
|
+
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.9827 13.3153C32.6394 10.6586 36.2428 9.16602 40 9.16602C43.7572 9.16602 47.3606 10.6586 50.0173 13.3153C52.6741 15.9721 54.1667 19.5754 54.1667 23.3327V33.3327C54.1667 33.3331 54.1667 33.3335 54.1667 33.334H25.8333C25.8333 33.3335 25.8333 33.3331 25.8333 33.3327V23.3327C25.8333 19.5754 27.3259 15.9721 29.9827 13.3153ZM20.8333 33.334C20.8333 33.3335 20.8333 33.3331 20.8333 33.3327V23.3327C20.8333 18.2494 22.8527 13.3742 26.4471 9.7798C30.0416 6.18535 34.9167 4.16602 40 4.16602C45.0833 4.16602 49.9584 6.18535 53.5529 9.7798C57.1473 13.3742 59.1667 18.2494 59.1667 23.3327V33.3327C59.1667 33.3331 59.1667 33.3335 59.1667 33.334H63.3333C67.0152 33.334 70 36.3188 70 40.0007V66.6673C70 70.3492 67.0152 73.334 63.3333 73.334H16.6667C12.9848 73.334 10 70.3492 10 66.6673V40.0007C10 36.3188 12.9848 33.334 16.6667 33.334H20.8333Z" fill="url(#paint0_linear_995_7796)"/>
|
|
3
|
+
<path d="M40 56.6667C41.8409 56.6667 43.3333 55.1743 43.3333 53.3333C43.3333 51.4924 41.8409 50 40 50C38.159 50 36.6666 51.4924 36.6666 53.3333C36.6666 55.1743 38.159 56.6667 40 56.6667Z" fill="white" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<defs>
|
|
5
|
+
<linearGradient id="paint0_linear_995_7796" x1="40" y1="4.16602" x2="40" y2="73.334" gradientUnits="userSpaceOnUse">
|
|
6
|
+
<stop stop-color="#E4E8ED"/>
|
|
7
|
+
<stop offset="1" stop-color="#868892"/>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M40 73.3334C58.4095 73.3334 73.3334 58.4095 73.3334 40C73.3334 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66669 21.5905 6.66669 40C6.66669 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_544)"/>
|
|
3
|
-
<path d="M30 40L36.6667 46.6666L50 33.3333" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
-
<defs>
|
|
5
|
-
<linearGradient id="paint0_linear_970_544" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
|
|
6
|
-
<stop stop-color="#DCFCE7"/>
|
|
7
|
-
<stop offset="1" stop-color="#22C55E"/>
|
|
8
|
-
</linearGradient>
|
|
9
|
-
</defs>
|
|
10
|
-
</svg>
|
|
1
|
+
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M40 73.3334C58.4095 73.3334 73.3334 58.4095 73.3334 40C73.3334 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66669 21.5905 6.66669 40C6.66669 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_544)"/>
|
|
3
|
+
<path d="M30 40L36.6667 46.6666L50 33.3333" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<defs>
|
|
5
|
+
<linearGradient id="paint0_linear_970_544" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
|
|
6
|
+
<stop stop-color="#DCFCE7"/>
|
|
7
|
+
<stop offset="1" stop-color="#22C55E"/>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|