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 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
- [![npm version](https://img.shields.io/npm/v/stp-ui-kit.svg)](https://www.npmjs.com/package/stp-ui-kit)
7
- [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./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
+ [![npm version](https://img.shields.io/npm/v/stp-ui-kit.svg)](https://www.npmjs.com/package/stp-ui-kit)
7
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./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,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>
@@ -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>
@@ -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>
@@ -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>