@waaelg/dga-design-system 0.5.0 → 0.5.3

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/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2026 Wael Alghamdi
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Wael Alghamdi
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -75,48 +75,49 @@ new DGAAlert();
75
75
 
76
76
  ## Usage by project type
77
77
 
78
- ### Vite / React / Vue / Svelte
79
-
80
- Add the CSS import once in your entry file (`main.js`, `main.tsx`, `App.vue`, etc.):
78
+ Every setup comes down to the **same two imports** — the stylesheet, plus the package entry, which registers the `<dga-*>` web components automatically:
81
79
 
82
80
  ```js
83
81
  import '@waaelg/dga-design-system/style.css';
82
+ import '@waaelg/dga-design-system';
84
83
  ```
85
84
 
86
- **React example**
85
+ After that, drop `<dga-*>` elements anywhere in your markup — they handle their own behavior, no initialization needed. The legacy `DGA*` classes stay available for hand-wired markup; see [JavaScript components](#javascript-components).
86
+
87
+ | Environment | Where the two imports go |
88
+ |-------------|--------------------------|
89
+ | Vite · Vue · React · Svelte | Your entry file (`main.js`, `main.ts`, `main.tsx`) |
90
+ | Next.js (App Router) | CSS in `app/layout.tsx`; register components from a `'use client'` file |
91
+ | Plain HTML · PHP · Razor | `<link>` + `<script type="module">` in the page |
92
+ | No build step | Load from a [CDN](#cdn-no-build-step) |
93
+
94
+ ### Bundler apps (Vite, Vue, React, Svelte)
95
+
96
+ Add both imports once in your entry file, then use web components in any template:
87
97
 
88
98
  ```jsx
89
- import { useEffect } from 'react';
99
+ // main.tsx
90
100
  import '@waaelg/dga-design-system/style.css';
91
- import { DGAAccordion, DGAAlert } from '@waaelg/dga-design-system';
101
+ import '@waaelg/dga-design-system';
102
+ ```
92
103
 
104
+ ```jsx
93
105
  export function App() {
94
- useEffect(() => {
95
- const accordionEl = document.getElementById('faq');
96
- if (accordionEl) new DGAAccordion(accordionEl);
97
- new DGAAlert();
98
- }, []);
99
-
100
106
  return (
101
107
  <div className="dga-container">
102
- <div className="dga-acc" id="faq">
103
- <div className="dga-acc-item">
104
- <button className="dga-acc-header" aria-expanded="false">
105
- <span>السؤال الأول</span>
106
- </button>
107
- <div className="dga-acc-content">
108
- <div className="dga-acc-body">الإجابة هنا.</div>
109
- </div>
110
- </div>
111
- </div>
108
+ <dga-alert variant="success-color" title="نجاح" dismissible>
109
+ تمت العملية بنجاح
110
+ </dga-alert>
112
111
  </div>
113
112
  );
114
113
  }
115
114
  ```
116
115
 
116
+ > **Vite tip:** if an import looks stale after upgrading, add `optimizeDeps: { exclude: ['@waaelg/dga-design-system'] }` to `vite.config.js`.
117
+
117
118
  ### Next.js (App Router)
118
119
 
119
- Import styles in `app/layout.tsx`:
120
+ Import the stylesheet in `app/layout.tsx` (a server component):
120
121
 
121
122
  ```tsx
122
123
  import '@waaelg/dga-design-system/style.css';
@@ -130,24 +131,25 @@ export default function RootLayout({ children }: { children: React.ReactNode })
130
131
  }
131
132
  ```
132
133
 
133
- Use a client component for JS initialization:
134
+ Web components need the browser, so register them from a client component:
134
135
 
135
136
  ```tsx
136
137
  'use client';
137
-
138
138
  import { useEffect } from 'react';
139
- import { DGAAlert } from '@waaelg/dga-design-system';
140
139
 
141
- export function DGAInit() {
140
+ export function DGAClient() {
142
141
  useEffect(() => {
143
- new DGAAlert();
142
+ import('@waaelg/dga-design-system'); // registers <dga-*> elements
144
143
  }, []);
145
-
146
144
  return null;
147
145
  }
148
146
  ```
149
147
 
150
- ### Plain HTML
148
+ Render `<DGAClient />` once in your layout, then use `<dga-*>` tags in any page.
149
+
150
+ ### Plain HTML / server-rendered (PHP, Razor, …)
151
+
152
+ Load the CSS and JS once, then use `<dga-*>` tags in markup. The JS is ESM-only, so the script tag **must** be `type="module"`:
151
153
 
152
154
  ```html
153
155
  <!DOCTYPE html>
@@ -155,20 +157,36 @@ export function DGAInit() {
155
157
  <head>
156
158
  <meta charset="UTF-8" />
157
159
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
158
- <link rel="stylesheet" href="./node_modules/@waaelg/dga-design-system/dist/style.css" />
160
+ <link rel="stylesheet" href="/assets/dga/style.css" />
159
161
  </head>
160
162
  <body>
161
- <button class="dga-btn dga-btn-primary">زر</button>
163
+ <dga-alert variant="success-color" title="نجاح" dismissible>
164
+ تمت العملية بنجاح
165
+ </dga-alert>
162
166
 
163
- <script type="module">
164
- import { DGAAlert } from './node_modules/@waaelg/dga-design-system/dist/index.js';
165
- new DGAAlert();
166
- </script>
167
+ <script type="module" src="/assets/dga/index.js"></script>
167
168
  </body>
168
169
  </html>
169
170
  ```
170
171
 
171
- > **Tip:** For production, copy `dist/style.css` to your `public` folder or let your bundler handle the import.
172
+ Copy `dist/style.css` and `dist/index.js` into your served assets folder (`public/`, `wwwroot/`, …), or skip the copy entirely and [load from a CDN](#cdn-no-build-step).
173
+
174
+ ### CDN (no build step)
175
+
176
+ Load the package straight from **jsDelivr** or **unpkg** — no install, no bundler. The CSS works with a plain `<link>`; the JS is ESM-only, so its `<script>` **must** be `type="module"`.
177
+
178
+ ```html
179
+ <link
180
+ rel="stylesheet"
181
+ href="https://cdn.jsdelivr.net/npm/@waaelg/dga-design-system@0.5.3/dist/style.css"
182
+ />
183
+
184
+ <script type="module">
185
+ import 'https://cdn.jsdelivr.net/npm/@waaelg/dga-design-system@0.5.3/dist/index.js';
186
+ </script>
187
+ ```
188
+
189
+ Same files are on unpkg (`https://unpkg.com/@waaelg/dga-design-system@0.5.3/dist/…`). Pin a version for reproducible builds, or use `@latest` to always fetch the newest release. See the [installation docs](./docs/getting-started/installation.md#cdn-no-build-step) for a full example.
172
190
 
173
191
  ---
174
192
 
@@ -199,6 +217,7 @@ Most of the design system works without JavaScript. Apply utility and component
199
217
  | Colors | `dga-bg-primary-500`, `dga-text-gray-700` |
200
218
  | Typography | `dga-text-sm`, `dga-text-xl`, `dga-fw-bold`, `dga-display-md` |
201
219
  | Radius | `dga-rounded-md`, `dga-rounded-lg` |
220
+ | Effects | `dga-shadow-xs`…`dga-shadow-3xl`, `dga-backdrop-blur-md` |
202
221
  | Flex direction | `dga-flex-col` / `dga-flex-column`, `dga-flex-row` |
203
222
 
204
223
  ### Included CSS components
@@ -1,55 +1,55 @@
1
- <svg width="21" height="31" viewBox="0 0 21 31" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g id="DGA logo">
3
- <path id="Vector" d="M11.3686 15.0182C11.213 15.1314 11.114 15.3152 11.114 15.5132V20.5334C11.114 20.8728 11.3827 21.1415 11.7221 21.1415C12.0615 21.1415 12.3302 20.8728 12.3302 20.5334V15.8243L17.6615 12.091C17.8454 12.1899 18.0433 12.2324 18.2696 12.2324C18.9908 12.2324 19.5848 11.6526 19.5848 10.9172C19.5848 10.196 19.005 9.60205 18.2696 9.60205C17.5484 9.60205 16.9544 10.1819 16.9544 10.9172C16.9544 10.9738 16.9544 11.0303 16.9686 11.0728L11.3686 15.0182Z" fill="url(#paint0_linear_51_98)"/>
4
- <path id="Vector_2" d="M7.59282 13.6889V18.695C7.16857 18.9213 6.88574 19.3455 6.88574 19.8546C6.88574 20.5758 7.46554 21.1697 8.2009 21.1697C8.92211 21.1697 9.51605 20.5899 9.51605 19.8546C9.51605 19.3455 9.23322 18.9071 8.80898 18.695V14.0142L16.6999 8.49898C16.8555 8.38585 16.9545 8.20201 16.9545 8.00403V4.27068C16.9545 3.93129 16.6858 3.6626 16.3464 3.6626C16.007 3.6626 15.7383 3.93129 15.7383 4.27068V7.67878L7.84736 13.194C7.67766 13.2929 7.57867 13.4768 7.59282 13.6889Z" fill="url(#paint1_linear_51_98)"/>
5
- <path id="Vector_3" d="M17.0393 15.3576L15.0312 16.7718C14.7484 16.9697 14.6918 17.3374 14.8898 17.6203C15.0029 17.79 15.2009 17.8748 15.3847 17.8748C15.512 17.8748 15.6251 17.8465 15.7383 17.7617L17.7464 16.3475C18.0292 16.1495 18.0858 15.7819 17.8878 15.499C17.7039 15.2303 17.3221 15.1596 17.0393 15.3576Z" fill="url(#paint2_linear_51_98)"/>
6
- <path id="Vector_4" d="M20.8858 18.9071C20.6878 18.6243 20.306 18.5536 20.0231 18.7516L10.5059 25.4122L0.988723 18.7516C0.705894 18.5536 0.324069 18.6243 0.126088 18.9071C-0.0718928 19.19 -0.00118027 19.5718 0.281649 19.7698L9.43119 26.1759L6.75844 28.0567C6.5746 27.9577 6.36248 27.9153 6.15036 27.9153C5.41501 27.9153 4.82106 28.5092 4.82106 29.2446C4.82106 29.9799 5.41501 30.5738 6.15036 30.5738C6.88572 30.5738 7.47966 29.9799 7.47966 29.2446C7.47966 29.188 7.47966 29.1314 7.46552 29.0749L10.5201 26.9395L13.5746 29.0749C13.5746 29.1314 13.5605 29.188 13.5605 29.2446C13.5605 29.9799 14.1544 30.5738 14.8898 30.5738C15.6251 30.5738 16.2191 29.9799 16.2191 29.2446C16.2191 28.5092 15.6251 27.9153 14.8898 27.9153C14.6635 27.9153 14.4655 27.9718 14.2817 28.0567L11.609 26.1759L20.7585 19.7698C21.0131 19.5718 21.0838 19.19 20.8858 18.9071Z" fill="url(#paint3_linear_51_98)"/>
7
- <path id="Vector_5" d="M3.97253 4.46872L5.98062 3.05457C6.26345 2.85659 6.32002 2.48891 6.12204 2.20608C6.00891 2.03639 5.81093 1.95154 5.62709 1.95154C5.49981 1.95154 5.38668 1.97982 5.27355 2.06467L3.26546 3.47882C2.98263 3.6768 2.92606 4.04447 3.12404 4.3273C3.30788 4.59599 3.6897 4.6667 3.97253 4.46872Z" fill="url(#paint4_linear_51_98)"/>
8
- <path id="Vector_6" d="M12.2029 2.47476V5.82629L4.31192 11.3415C4.15636 11.4546 4.05737 11.6384 4.05737 11.8364V15.5698C4.05737 15.9092 4.32606 16.1778 4.66545 16.1778C5.00485 16.1778 5.27354 15.9092 5.27354 15.5698V12.1617L13.1645 6.64649C13.32 6.53336 13.419 6.34952 13.419 6.15154V2.47476C13.8433 2.24849 14.1261 1.82425 14.1261 1.31516C14.1261 0.593945 13.5463 0 12.8109 0C12.0897 0 11.4958 0.579803 11.4958 1.31516C11.5099 1.81011 11.7928 2.24849 12.2029 2.47476Z" fill="url(#paint5_linear_51_98)"/>
9
- <path id="Vector_7" d="M2.72812 10.196C3.44933 10.196 4.04327 9.61623 4.04327 8.88087C4.04327 8.8243 4.04328 8.76774 4.02914 8.72531L9.62916 4.80812C9.78471 4.69499 9.8837 4.51115 9.8837 4.31317V0.622242C9.8837 0.282846 9.61502 0.0141602 9.27562 0.0141602C8.93623 0.0141602 8.66754 0.282846 8.66754 0.622242V4.00206L3.3362 7.72127C3.15236 7.62228 2.95438 7.57985 2.72812 7.57985C2.0069 7.57985 1.41296 8.15965 1.41296 8.89501C1.42711 9.61622 2.0069 10.196 2.72812 10.196Z" fill="url(#paint6_linear_51_98)"/>
10
- </g>
11
- <defs>
12
- <linearGradient id="paint0_linear_51_98" x1="15.3524" y1="3.95793" x2="15.3524" y2="27.7715" gradientUnits="userSpaceOnUse">
13
- <stop stop-color="#00ABAF"/>
14
- <stop offset="0.24" stop-color="#0093B4"/>
15
- <stop offset="0.48" stop-color="#0080BA"/>
16
- <stop offset="1" stop-color="#774896"/>
17
- </linearGradient>
18
- <linearGradient id="paint1_linear_51_98" x1="11.9192" y1="3.9579" x2="11.9192" y2="27.7715" gradientUnits="userSpaceOnUse">
19
- <stop stop-color="#00ABAF"/>
20
- <stop offset="0.24" stop-color="#0093B4"/>
21
- <stop offset="0.48" stop-color="#0080BA"/>
22
- <stop offset="1" stop-color="#774896"/>
23
- </linearGradient>
24
- <linearGradient id="paint2_linear_51_98" x1="16.387" y1="3.95793" x2="16.387" y2="27.7715" gradientUnits="userSpaceOnUse">
25
- <stop stop-color="#00ABAF"/>
26
- <stop offset="0.24" stop-color="#0093B4"/>
27
- <stop offset="0.48" stop-color="#0080BA"/>
28
- <stop offset="1" stop-color="#774896"/>
29
- </linearGradient>
30
- <linearGradient id="paint3_linear_51_98" x1="10.5052" y1="3.95793" x2="10.5052" y2="27.7715" gradientUnits="userSpaceOnUse">
31
- <stop stop-color="#29B2B2"/>
32
- <stop offset="0.27" stop-color="#1091B3"/>
33
- <stop offset="0.48" stop-color="#017EB5"/>
34
- <stop offset="1" stop-color="#704B98"/>
35
- </linearGradient>
36
- <linearGradient id="paint4_linear_51_98" x1="4.62328" y1="3.95796" x2="4.62328" y2="27.7715" gradientUnits="userSpaceOnUse">
37
- <stop stop-color="#00ABAF"/>
38
- <stop offset="0.24" stop-color="#0093B4"/>
39
- <stop offset="0.48" stop-color="#0080BA"/>
40
- <stop offset="1" stop-color="#774896"/>
41
- </linearGradient>
42
- <linearGradient id="paint5_linear_51_98" x1="9.09284" y1="3.95794" x2="9.09284" y2="27.7715" gradientUnits="userSpaceOnUse">
43
- <stop stop-color="#00ABAF"/>
44
- <stop offset="0.24" stop-color="#0093B4"/>
45
- <stop offset="0.48" stop-color="#0080BA"/>
46
- <stop offset="1" stop-color="#774896"/>
47
- </linearGradient>
48
- <linearGradient id="paint6_linear_51_98" x1="5.65795" y1="3.95796" x2="5.65795" y2="27.7715" gradientUnits="userSpaceOnUse">
49
- <stop stop-color="#00ABAF"/>
50
- <stop offset="0.24" stop-color="#0093B4"/>
51
- <stop offset="0.48" stop-color="#0080BA"/>
52
- <stop offset="1" stop-color="#774896"/>
53
- </linearGradient>
54
- </defs>
55
- </svg>
1
+ <svg width="21" height="31" viewBox="0 0 21 31" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="DGA logo">
3
+ <path id="Vector" d="M11.3686 15.0182C11.213 15.1314 11.114 15.3152 11.114 15.5132V20.5334C11.114 20.8728 11.3827 21.1415 11.7221 21.1415C12.0615 21.1415 12.3302 20.8728 12.3302 20.5334V15.8243L17.6615 12.091C17.8454 12.1899 18.0433 12.2324 18.2696 12.2324C18.9908 12.2324 19.5848 11.6526 19.5848 10.9172C19.5848 10.196 19.005 9.60205 18.2696 9.60205C17.5484 9.60205 16.9544 10.1819 16.9544 10.9172C16.9544 10.9738 16.9544 11.0303 16.9686 11.0728L11.3686 15.0182Z" fill="url(#paint0_linear_51_98)"/>
4
+ <path id="Vector_2" d="M7.59282 13.6889V18.695C7.16857 18.9213 6.88574 19.3455 6.88574 19.8546C6.88574 20.5758 7.46554 21.1697 8.2009 21.1697C8.92211 21.1697 9.51605 20.5899 9.51605 19.8546C9.51605 19.3455 9.23322 18.9071 8.80898 18.695V14.0142L16.6999 8.49898C16.8555 8.38585 16.9545 8.20201 16.9545 8.00403V4.27068C16.9545 3.93129 16.6858 3.6626 16.3464 3.6626C16.007 3.6626 15.7383 3.93129 15.7383 4.27068V7.67878L7.84736 13.194C7.67766 13.2929 7.57867 13.4768 7.59282 13.6889Z" fill="url(#paint1_linear_51_98)"/>
5
+ <path id="Vector_3" d="M17.0393 15.3576L15.0312 16.7718C14.7484 16.9697 14.6918 17.3374 14.8898 17.6203C15.0029 17.79 15.2009 17.8748 15.3847 17.8748C15.512 17.8748 15.6251 17.8465 15.7383 17.7617L17.7464 16.3475C18.0292 16.1495 18.0858 15.7819 17.8878 15.499C17.7039 15.2303 17.3221 15.1596 17.0393 15.3576Z" fill="url(#paint2_linear_51_98)"/>
6
+ <path id="Vector_4" d="M20.8858 18.9071C20.6878 18.6243 20.306 18.5536 20.0231 18.7516L10.5059 25.4122L0.988723 18.7516C0.705894 18.5536 0.324069 18.6243 0.126088 18.9071C-0.0718928 19.19 -0.00118027 19.5718 0.281649 19.7698L9.43119 26.1759L6.75844 28.0567C6.5746 27.9577 6.36248 27.9153 6.15036 27.9153C5.41501 27.9153 4.82106 28.5092 4.82106 29.2446C4.82106 29.9799 5.41501 30.5738 6.15036 30.5738C6.88572 30.5738 7.47966 29.9799 7.47966 29.2446C7.47966 29.188 7.47966 29.1314 7.46552 29.0749L10.5201 26.9395L13.5746 29.0749C13.5746 29.1314 13.5605 29.188 13.5605 29.2446C13.5605 29.9799 14.1544 30.5738 14.8898 30.5738C15.6251 30.5738 16.2191 29.9799 16.2191 29.2446C16.2191 28.5092 15.6251 27.9153 14.8898 27.9153C14.6635 27.9153 14.4655 27.9718 14.2817 28.0567L11.609 26.1759L20.7585 19.7698C21.0131 19.5718 21.0838 19.19 20.8858 18.9071Z" fill="url(#paint3_linear_51_98)"/>
7
+ <path id="Vector_5" d="M3.97253 4.46872L5.98062 3.05457C6.26345 2.85659 6.32002 2.48891 6.12204 2.20608C6.00891 2.03639 5.81093 1.95154 5.62709 1.95154C5.49981 1.95154 5.38668 1.97982 5.27355 2.06467L3.26546 3.47882C2.98263 3.6768 2.92606 4.04447 3.12404 4.3273C3.30788 4.59599 3.6897 4.6667 3.97253 4.46872Z" fill="url(#paint4_linear_51_98)"/>
8
+ <path id="Vector_6" d="M12.2029 2.47476V5.82629L4.31192 11.3415C4.15636 11.4546 4.05737 11.6384 4.05737 11.8364V15.5698C4.05737 15.9092 4.32606 16.1778 4.66545 16.1778C5.00485 16.1778 5.27354 15.9092 5.27354 15.5698V12.1617L13.1645 6.64649C13.32 6.53336 13.419 6.34952 13.419 6.15154V2.47476C13.8433 2.24849 14.1261 1.82425 14.1261 1.31516C14.1261 0.593945 13.5463 0 12.8109 0C12.0897 0 11.4958 0.579803 11.4958 1.31516C11.5099 1.81011 11.7928 2.24849 12.2029 2.47476Z" fill="url(#paint5_linear_51_98)"/>
9
+ <path id="Vector_7" d="M2.72812 10.196C3.44933 10.196 4.04327 9.61623 4.04327 8.88087C4.04327 8.8243 4.04328 8.76774 4.02914 8.72531L9.62916 4.80812C9.78471 4.69499 9.8837 4.51115 9.8837 4.31317V0.622242C9.8837 0.282846 9.61502 0.0141602 9.27562 0.0141602C8.93623 0.0141602 8.66754 0.282846 8.66754 0.622242V4.00206L3.3362 7.72127C3.15236 7.62228 2.95438 7.57985 2.72812 7.57985C2.0069 7.57985 1.41296 8.15965 1.41296 8.89501C1.42711 9.61622 2.0069 10.196 2.72812 10.196Z" fill="url(#paint6_linear_51_98)"/>
10
+ </g>
11
+ <defs>
12
+ <linearGradient id="paint0_linear_51_98" x1="15.3524" y1="3.95793" x2="15.3524" y2="27.7715" gradientUnits="userSpaceOnUse">
13
+ <stop stop-color="#00ABAF"/>
14
+ <stop offset="0.24" stop-color="#0093B4"/>
15
+ <stop offset="0.48" stop-color="#0080BA"/>
16
+ <stop offset="1" stop-color="#774896"/>
17
+ </linearGradient>
18
+ <linearGradient id="paint1_linear_51_98" x1="11.9192" y1="3.9579" x2="11.9192" y2="27.7715" gradientUnits="userSpaceOnUse">
19
+ <stop stop-color="#00ABAF"/>
20
+ <stop offset="0.24" stop-color="#0093B4"/>
21
+ <stop offset="0.48" stop-color="#0080BA"/>
22
+ <stop offset="1" stop-color="#774896"/>
23
+ </linearGradient>
24
+ <linearGradient id="paint2_linear_51_98" x1="16.387" y1="3.95793" x2="16.387" y2="27.7715" gradientUnits="userSpaceOnUse">
25
+ <stop stop-color="#00ABAF"/>
26
+ <stop offset="0.24" stop-color="#0093B4"/>
27
+ <stop offset="0.48" stop-color="#0080BA"/>
28
+ <stop offset="1" stop-color="#774896"/>
29
+ </linearGradient>
30
+ <linearGradient id="paint3_linear_51_98" x1="10.5052" y1="3.95793" x2="10.5052" y2="27.7715" gradientUnits="userSpaceOnUse">
31
+ <stop stop-color="#29B2B2"/>
32
+ <stop offset="0.27" stop-color="#1091B3"/>
33
+ <stop offset="0.48" stop-color="#017EB5"/>
34
+ <stop offset="1" stop-color="#704B98"/>
35
+ </linearGradient>
36
+ <linearGradient id="paint4_linear_51_98" x1="4.62328" y1="3.95796" x2="4.62328" y2="27.7715" gradientUnits="userSpaceOnUse">
37
+ <stop stop-color="#00ABAF"/>
38
+ <stop offset="0.24" stop-color="#0093B4"/>
39
+ <stop offset="0.48" stop-color="#0080BA"/>
40
+ <stop offset="1" stop-color="#774896"/>
41
+ </linearGradient>
42
+ <linearGradient id="paint5_linear_51_98" x1="9.09284" y1="3.95794" x2="9.09284" y2="27.7715" gradientUnits="userSpaceOnUse">
43
+ <stop stop-color="#00ABAF"/>
44
+ <stop offset="0.24" stop-color="#0093B4"/>
45
+ <stop offset="0.48" stop-color="#0080BA"/>
46
+ <stop offset="1" stop-color="#774896"/>
47
+ </linearGradient>
48
+ <linearGradient id="paint6_linear_51_98" x1="5.65795" y1="3.95796" x2="5.65795" y2="27.7715" gradientUnits="userSpaceOnUse">
49
+ <stop stop-color="#00ABAF"/>
50
+ <stop offset="0.24" stop-color="#0093B4"/>
51
+ <stop offset="0.48" stop-color="#0080BA"/>
52
+ <stop offset="1" stop-color="#774896"/>
53
+ </linearGradient>
54
+ </defs>
55
+ </svg>
@@ -1,3 +1,3 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M3.25047 11.9995C3.25047 11.6259 3.41613 11.2794 3.57299 11.0191C3.74227 10.7383 3.96991 10.4484 4.21965 10.1657C4.72065 9.59865 5.37434 8.98966 6.00871 8.4388C6.6468 7.88469 7.28269 7.37448 7.75772 7.00371C7.99563 6.81801 8.19411 6.66657 8.33351 6.56126C8.40323 6.50859 8.45823 6.46742 8.49605 6.43923L8.53962 6.40684L8.55118 6.39829L8.55519 6.39533C8.88869 6.14967 9.35863 6.22056 9.60429 6.55406C9.84994 6.88754 9.77875 7.35702 9.44529 7.60269L9.43256 7.61211L9.39251 7.64188C9.35709 7.66828 9.30467 7.70752 9.23767 7.75813C9.10364 7.85938 8.9115 8.00598 8.68066 8.18615C8.21819 8.54712 7.6041 9.04002 6.9922 9.57137C6.37658 10.106 5.78028 10.6648 5.34378 11.1589C5.31618 11.1901 5.28946 11.2208 5.26364 11.251L20.0005 11.251C20.4147 11.251 20.7505 11.5868 20.7505 12.001C20.7505 12.4152 20.4147 12.751 20.0005 12.751L5.26617 12.751C5.29121 12.7802 5.31708 12.8099 5.34378 12.8401C5.78028 13.3342 6.37658 13.893 6.9922 14.4276C7.6041 14.959 8.21819 15.4519 8.68066 15.8128C8.91149 15.993 9.10364 16.1396 9.23767 16.2409C9.30467 16.2915 9.35709 16.3307 9.39251 16.3571L9.43256 16.3869L9.44528 16.3963C9.77875 16.642 9.84994 17.1115 9.60429 17.4449C9.35863 17.7784 8.88869 17.8493 8.55519 17.6037L8.55118 17.6007L8.53962 17.5922L8.49605 17.5598C8.45823 17.5316 8.40323 17.4904 8.33351 17.4377C8.19411 17.3324 7.99563 17.181 7.75772 16.9953C7.28269 16.6245 6.6468 16.1143 6.00871 15.5602C5.37434 15.0093 4.72065 14.4003 4.21965 13.8333C3.96991 13.5506 3.74227 13.2607 3.57299 12.9799C3.41707 12.7212 3.25246 12.3772 3.25049 12.0062" fill="white"/>
3
- </svg>
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M3.25047 11.9995C3.25047 11.6259 3.41613 11.2794 3.57299 11.0191C3.74227 10.7383 3.96991 10.4484 4.21965 10.1657C4.72065 9.59865 5.37434 8.98966 6.00871 8.4388C6.6468 7.88469 7.28269 7.37448 7.75772 7.00371C7.99563 6.81801 8.19411 6.66657 8.33351 6.56126C8.40323 6.50859 8.45823 6.46742 8.49605 6.43923L8.53962 6.40684L8.55118 6.39829L8.55519 6.39533C8.88869 6.14967 9.35863 6.22056 9.60429 6.55406C9.84994 6.88754 9.77875 7.35702 9.44529 7.60269L9.43256 7.61211L9.39251 7.64188C9.35709 7.66828 9.30467 7.70752 9.23767 7.75813C9.10364 7.85938 8.9115 8.00598 8.68066 8.18615C8.21819 8.54712 7.6041 9.04002 6.9922 9.57137C6.37658 10.106 5.78028 10.6648 5.34378 11.1589C5.31618 11.1901 5.28946 11.2208 5.26364 11.251L20.0005 11.251C20.4147 11.251 20.7505 11.5868 20.7505 12.001C20.7505 12.4152 20.4147 12.751 20.0005 12.751L5.26617 12.751C5.29121 12.7802 5.31708 12.8099 5.34378 12.8401C5.78028 13.3342 6.37658 13.893 6.9922 14.4276C7.6041 14.959 8.21819 15.4519 8.68066 15.8128C8.91149 15.993 9.10364 16.1396 9.23767 16.2409C9.30467 16.2915 9.35709 16.3307 9.39251 16.3571L9.43256 16.3869L9.44528 16.3963C9.77875 16.642 9.84994 17.1115 9.60429 17.4449C9.35863 17.7784 8.88869 17.8493 8.55519 17.6037L8.55118 17.6007L8.53962 17.5922L8.49605 17.5598C8.45823 17.5316 8.40323 17.4904 8.33351 17.4377C8.19411 17.3324 7.99563 17.181 7.75772 16.9953C7.28269 16.6245 6.6468 16.1143 6.00871 15.5602C5.37434 15.0093 4.72065 14.4003 4.21965 13.8333C3.96991 13.5506 3.74227 13.2607 3.57299 12.9799C3.41707 12.7212 3.25246 12.3772 3.25049 12.0062" fill="white"/>
3
+ </svg>
@@ -1,3 +1,3 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M3.25047 11.9995C3.25047 11.6259 3.41613 11.2794 3.57299 11.0191C3.74227 10.7383 3.96991 10.4484 4.21965 10.1657C4.72065 9.59865 5.37434 8.98966 6.00871 8.4388C6.6468 7.88469 7.28269 7.37448 7.75772 7.00371C7.99563 6.81801 8.19411 6.66657 8.33351 6.56126C8.40323 6.50859 8.45823 6.46742 8.49605 6.43923L8.53962 6.40684L8.55118 6.39829L8.55519 6.39533C8.88869 6.14967 9.35863 6.22056 9.60429 6.55406C9.84994 6.88754 9.77875 7.35702 9.44529 7.60269L9.43256 7.61211L9.39251 7.64188C9.35709 7.66828 9.30467 7.70752 9.23767 7.75813C9.10364 7.85938 8.9115 8.00598 8.68066 8.18615C8.21819 8.54712 7.6041 9.04002 6.9922 9.57137C6.37658 10.106 5.78028 10.6648 5.34378 11.1589C5.31618 11.1901 5.28946 11.2208 5.26364 11.251L20.0005 11.251C20.4147 11.251 20.7505 11.5868 20.7505 12.001C20.7505 12.4152 20.4147 12.751 20.0005 12.751L5.26617 12.751C5.29121 12.7802 5.31708 12.8099 5.34378 12.8401C5.78028 13.3342 6.37658 13.893 6.9922 14.4276C7.6041 14.959 8.21819 15.4519 8.68066 15.8128C8.91149 15.993 9.10364 16.1396 9.23767 16.2409C9.30467 16.2915 9.35709 16.3307 9.39251 16.3571L9.43256 16.3869L9.44528 16.3963C9.77875 16.642 9.84994 17.1115 9.60429 17.4449C9.35863 17.7784 8.88869 17.8493 8.55519 17.6037L8.55118 17.6007L8.53962 17.5922L8.49605 17.5598C8.45823 17.5316 8.40323 17.4904 8.33351 17.4377C8.19411 17.3324 7.99563 17.181 7.75772 16.9953C7.28269 16.6245 6.6468 16.1143 6.00871 15.5602C5.37434 15.0093 4.72065 14.4003 4.21965 13.8333C3.96991 13.5506 3.74227 13.2607 3.57299 12.9799C3.41707 12.7212 3.25246 12.3772 3.25049 12.0062" fill="#161616"/>
3
- </svg>
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M3.25047 11.9995C3.25047 11.6259 3.41613 11.2794 3.57299 11.0191C3.74227 10.7383 3.96991 10.4484 4.21965 10.1657C4.72065 9.59865 5.37434 8.98966 6.00871 8.4388C6.6468 7.88469 7.28269 7.37448 7.75772 7.00371C7.99563 6.81801 8.19411 6.66657 8.33351 6.56126C8.40323 6.50859 8.45823 6.46742 8.49605 6.43923L8.53962 6.40684L8.55118 6.39829L8.55519 6.39533C8.88869 6.14967 9.35863 6.22056 9.60429 6.55406C9.84994 6.88754 9.77875 7.35702 9.44529 7.60269L9.43256 7.61211L9.39251 7.64188C9.35709 7.66828 9.30467 7.70752 9.23767 7.75813C9.10364 7.85938 8.9115 8.00598 8.68066 8.18615C8.21819 8.54712 7.6041 9.04002 6.9922 9.57137C6.37658 10.106 5.78028 10.6648 5.34378 11.1589C5.31618 11.1901 5.28946 11.2208 5.26364 11.251L20.0005 11.251C20.4147 11.251 20.7505 11.5868 20.7505 12.001C20.7505 12.4152 20.4147 12.751 20.0005 12.751L5.26617 12.751C5.29121 12.7802 5.31708 12.8099 5.34378 12.8401C5.78028 13.3342 6.37658 13.893 6.9922 14.4276C7.6041 14.959 8.21819 15.4519 8.68066 15.8128C8.91149 15.993 9.10364 16.1396 9.23767 16.2409C9.30467 16.2915 9.35709 16.3307 9.39251 16.3571L9.43256 16.3869L9.44528 16.3963C9.77875 16.642 9.84994 17.1115 9.60429 17.4449C9.35863 17.7784 8.88869 17.8493 8.55519 17.6037L8.55118 17.6007L8.53962 17.5922L8.49605 17.5598C8.45823 17.5316 8.40323 17.4904 8.33351 17.4377C8.19411 17.3324 7.99563 17.181 7.75772 16.9953C7.28269 16.6245 6.6468 16.1143 6.00871 15.5602C5.37434 15.0093 4.72065 14.4003 4.21965 13.8333C3.96991 13.5506 3.74227 13.2607 3.57299 12.9799C3.41707 12.7212 3.25246 12.3772 3.25049 12.0062" fill="#161616"/>
3
+ </svg>
@@ -1,3 +1,3 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M20.7495 11.9995C20.7495 11.6259 20.5839 11.2794 20.427 11.0191C20.2577 10.7383 20.0301 10.4484 19.7803 10.1657C19.2794 9.59864 18.6257 8.98966 17.9913 8.4388C17.3532 7.88469 16.7173 7.37448 16.2423 7.00371C16.0044 6.81801 15.8059 6.66657 15.6665 6.56126C15.5968 6.50859 15.5418 6.46742 15.5039 6.43923L15.4604 6.40684L15.4488 6.39829L15.4448 6.39533C15.1113 6.14967 14.6414 6.22056 14.3957 6.55406C14.1501 6.88754 14.2213 7.35702 14.5547 7.60269L14.5674 7.61211L14.6075 7.64188C14.6429 7.66828 14.6953 7.70752 14.7623 7.75813C14.8964 7.85938 15.0885 8.00598 15.3193 8.18615C15.7818 8.54712 16.3959 9.04002 17.0078 9.57137C17.6234 10.106 18.2197 10.6648 18.6562 11.1589C18.6838 11.1901 18.7105 11.2208 18.7364 11.251L3.99951 11.251C3.5853 11.251 3.24951 11.5868 3.24951 12.001C3.24951 12.4152 3.5853 12.751 3.99951 12.751L18.7338 12.751C18.7088 12.7802 18.6829 12.8099 18.6562 12.8401C18.2197 13.3342 17.6234 13.893 17.0078 14.4276C16.3959 14.959 15.7818 15.4519 15.3193 15.8128C15.0885 15.993 14.8964 16.1396 14.7623 16.2409C14.6953 16.2915 14.6429 16.3307 14.6075 16.3571L14.5674 16.3869L14.5547 16.3963C14.2213 16.642 14.1501 17.1115 14.3957 17.4449C14.6414 17.7784 15.1113 17.8493 15.4448 17.6037L15.4488 17.6007L15.4604 17.5922L15.5039 17.5598C15.5418 17.5316 15.5968 17.4904 15.6665 17.4377C15.8059 17.3324 16.0044 17.181 16.2423 16.9953C16.7173 16.6245 17.3532 16.1143 17.9913 15.5602C18.6257 15.0093 19.2794 14.4003 19.7803 13.8333C20.0301 13.5506 20.2577 13.2607 20.427 12.9799C20.5829 12.7212 20.7475 12.3772 20.7495 12.0062" fill="white"/>
3
- </svg>
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M20.7495 11.9995C20.7495 11.6259 20.5839 11.2794 20.427 11.0191C20.2577 10.7383 20.0301 10.4484 19.7803 10.1657C19.2794 9.59864 18.6257 8.98966 17.9913 8.4388C17.3532 7.88469 16.7173 7.37448 16.2423 7.00371C16.0044 6.81801 15.8059 6.66657 15.6665 6.56126C15.5968 6.50859 15.5418 6.46742 15.5039 6.43923L15.4604 6.40684L15.4488 6.39829L15.4448 6.39533C15.1113 6.14967 14.6414 6.22056 14.3957 6.55406C14.1501 6.88754 14.2213 7.35702 14.5547 7.60269L14.5674 7.61211L14.6075 7.64188C14.6429 7.66828 14.6953 7.70752 14.7623 7.75813C14.8964 7.85938 15.0885 8.00598 15.3193 8.18615C15.7818 8.54712 16.3959 9.04002 17.0078 9.57137C17.6234 10.106 18.2197 10.6648 18.6562 11.1589C18.6838 11.1901 18.7105 11.2208 18.7364 11.251L3.99951 11.251C3.5853 11.251 3.24951 11.5868 3.24951 12.001C3.24951 12.4152 3.5853 12.751 3.99951 12.751L18.7338 12.751C18.7088 12.7802 18.6829 12.8099 18.6562 12.8401C18.2197 13.3342 17.6234 13.893 17.0078 14.4276C16.3959 14.959 15.7818 15.4519 15.3193 15.8128C15.0885 15.993 14.8964 16.1396 14.7623 16.2409C14.6953 16.2915 14.6429 16.3307 14.6075 16.3571L14.5674 16.3869L14.5547 16.3963C14.2213 16.642 14.1501 17.1115 14.3957 17.4449C14.6414 17.7784 15.1113 17.8493 15.4448 17.6037L15.4488 17.6007L15.4604 17.5922L15.5039 17.5598C15.5418 17.5316 15.5968 17.4904 15.6665 17.4377C15.8059 17.3324 16.0044 17.181 16.2423 16.9953C16.7173 16.6245 17.3532 16.1143 17.9913 15.5602C18.6257 15.0093 19.2794 14.4003 19.7803 13.8333C20.0301 13.5506 20.2577 13.2607 20.427 12.9799C20.5829 12.7212 20.7475 12.3772 20.7495 12.0062" fill="white"/>
3
+ </svg>
@@ -1,3 +1,3 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M20.7495 11.9995C20.7495 11.6259 20.5839 11.2794 20.427 11.0191C20.2577 10.7383 20.0301 10.4484 19.7803 10.1657C19.2794 9.59864 18.6257 8.98966 17.9913 8.4388C17.3532 7.88469 16.7173 7.37448 16.2423 7.00371C16.0044 6.81801 15.8059 6.66657 15.6665 6.56126C15.5968 6.50859 15.5418 6.46742 15.5039 6.43923L15.4604 6.40684L15.4488 6.39829L15.4448 6.39533C15.1113 6.14967 14.6414 6.22056 14.3957 6.55406C14.1501 6.88754 14.2213 7.35702 14.5547 7.60269L14.5674 7.61211L14.6075 7.64188C14.6429 7.66828 14.6953 7.70752 14.7623 7.75813C14.8964 7.85938 15.0885 8.00598 15.3193 8.18615C15.7818 8.54712 16.3959 9.04002 17.0078 9.57137C17.6234 10.106 18.2197 10.6648 18.6562 11.1589C18.6838 11.1901 18.7105 11.2208 18.7364 11.251L3.99951 11.251C3.5853 11.251 3.24951 11.5868 3.24951 12.001C3.24951 12.4152 3.5853 12.751 3.99951 12.751L18.7338 12.751C18.7088 12.7802 18.6829 12.8099 18.6562 12.8401C18.2197 13.3342 17.6234 13.893 17.0078 14.4276C16.3959 14.959 15.7818 15.4519 15.3193 15.8128C15.0885 15.993 14.8964 16.1396 14.7623 16.2409C14.6953 16.2915 14.6429 16.3307 14.6075 16.3571L14.5674 16.3869L14.5547 16.3963C14.2213 16.642 14.1501 17.1115 14.3957 17.4449C14.6414 17.7784 15.1113 17.8493 15.4448 17.6037L15.4488 17.6007L15.4604 17.5922L15.5039 17.5598C15.5418 17.5316 15.5968 17.4904 15.6665 17.4377C15.8059 17.3324 16.0044 17.181 16.2423 16.9953C16.7173 16.6245 17.3532 16.1143 17.9913 15.5602C18.6257 15.0093 19.2794 14.4003 19.7803 13.8333C20.0301 13.5506 20.2577 13.2607 20.427 12.9799C20.5829 12.7212 20.7475 12.3772 20.7495 12.0062" fill="#161616"/>
3
- </svg>
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M20.7495 11.9995C20.7495 11.6259 20.5839 11.2794 20.427 11.0191C20.2577 10.7383 20.0301 10.4484 19.7803 10.1657C19.2794 9.59864 18.6257 8.98966 17.9913 8.4388C17.3532 7.88469 16.7173 7.37448 16.2423 7.00371C16.0044 6.81801 15.8059 6.66657 15.6665 6.56126C15.5968 6.50859 15.5418 6.46742 15.5039 6.43923L15.4604 6.40684L15.4488 6.39829L15.4448 6.39533C15.1113 6.14967 14.6414 6.22056 14.3957 6.55406C14.1501 6.88754 14.2213 7.35702 14.5547 7.60269L14.5674 7.61211L14.6075 7.64188C14.6429 7.66828 14.6953 7.70752 14.7623 7.75813C14.8964 7.85938 15.0885 8.00598 15.3193 8.18615C15.7818 8.54712 16.3959 9.04002 17.0078 9.57137C17.6234 10.106 18.2197 10.6648 18.6562 11.1589C18.6838 11.1901 18.7105 11.2208 18.7364 11.251L3.99951 11.251C3.5853 11.251 3.24951 11.5868 3.24951 12.001C3.24951 12.4152 3.5853 12.751 3.99951 12.751L18.7338 12.751C18.7088 12.7802 18.6829 12.8099 18.6562 12.8401C18.2197 13.3342 17.6234 13.893 17.0078 14.4276C16.3959 14.959 15.7818 15.4519 15.3193 15.8128C15.0885 15.993 14.8964 16.1396 14.7623 16.2409C14.6953 16.2915 14.6429 16.3307 14.6075 16.3571L14.5674 16.3869L14.5547 16.3963C14.2213 16.642 14.1501 17.1115 14.3957 17.4449C14.6414 17.7784 15.1113 17.8493 15.4448 17.6037L15.4488 17.6007L15.4604 17.5922L15.5039 17.5598C15.5418 17.5316 15.5968 17.4904 15.6665 17.4377C15.8059 17.3324 16.0044 17.181 16.2423 16.9953C16.7173 16.6245 17.3532 16.1143 17.9913 15.5602C18.6257 15.0093 19.2794 14.4003 19.7803 13.8333C20.0301 13.5506 20.2577 13.2607 20.427 12.9799C20.5829 12.7212 20.7475 12.3772 20.7495 12.0062" fill="#161616"/>
3
+ </svg>