@syscore/ui-library 1.1.11 → 1.1.13

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.
Files changed (62) hide show
  1. package/client/components/icons/AchievementBadges.tsx +33 -0
  2. package/client/components/icons/ConceptIcons.tsx +169 -22
  3. package/client/components/icons/NavLogo.tsx +4 -4
  4. package/client/components/icons/ProviderBadges.tsx +28 -28
  5. package/client/components/icons/ProviderSeals.tsx +35 -35
  6. package/client/components/icons/StandardLogo.tsx +47 -0
  7. package/client/components/icons/UtilityChevronDown.tsx +1 -1
  8. package/client/components/icons/UtilityClearRegular.tsx +43 -0
  9. package/client/components/icons/UtilityCompare.tsx +71 -0
  10. package/client/components/icons/UtilityHome.tsx +26 -0
  11. package/client/components/icons/UtilityReset.tsx +7 -7
  12. package/client/components/icons/UtilitySave.tsx +35 -0
  13. package/client/components/icons/UtilityScopeLarge.tsx +86 -0
  14. package/client/components/icons/UtilityShow.tsx +41 -0
  15. package/client/components/icons/UtilityTarget.tsx +21 -0
  16. package/client/components/icons/UtilityTargetActive.tsx +34 -0
  17. package/client/components/icons/UtilityText.tsx +8 -8
  18. package/client/components/ui/breadcrumb.tsx +26 -4
  19. package/client/components/ui/button.tsx +30 -18
  20. package/client/components/ui/card.tsx +2 -2
  21. package/client/components/ui/code-badge.tsx +25 -0
  22. package/client/components/ui/dialog.tsx +4 -4
  23. package/client/components/ui/input.tsx +53 -9
  24. package/client/components/ui/label.tsx +2 -2
  25. package/client/components/ui/{Navigation.tsx → navigation.tsx} +291 -250
  26. package/client/components/ui/select.tsx +20 -20
  27. package/client/components/ui/tabs.tsx +27 -178
  28. package/client/components/ui/{Tag.tsx → tag.tsx} +11 -10
  29. package/client/components/ui/textarea.tsx +1 -1
  30. package/client/components/ui/toggle-group.tsx +19 -2
  31. package/client/components/ui/toggle.tsx +2 -2
  32. package/client/components/ui/tooltip.tsx +148 -8
  33. package/client/global.css +18 -11
  34. package/client/ui/AspectRatio.stories.tsx +1 -1
  35. package/client/ui/Button.stories.tsx +5 -5
  36. package/client/ui/Card.stories.tsx +223 -2
  37. package/client/ui/CodeBadge.stories.tsx +76 -0
  38. package/client/ui/Dialog.stories.tsx +52 -5
  39. package/client/ui/Icons.stories.tsx +31 -31
  40. package/client/ui/Input.stories.tsx +125 -0
  41. package/client/ui/Label.stories.tsx +8 -11
  42. package/client/ui/Navigation.stories.tsx +1 -1
  43. package/client/ui/RadioGroup/RadioGroup.stories.tsx +1 -1
  44. package/client/ui/SearchField.stories.tsx +1 -1
  45. package/client/ui/{Select/Select.stories.tsx → Select.stories.tsx} +2 -2
  46. package/client/ui/{Switch/Switch.stories.tsx → Switch.stories.tsx} +3 -3
  47. package/client/ui/Tabs.stories.tsx +174 -10
  48. package/client/ui/Tag.stories.tsx +48 -1
  49. package/client/ui/{Textarea/Textarea.stories.tsx → Textarea.stories.tsx} +9 -10
  50. package/client/ui/Toggle.stories.tsx +3 -3
  51. package/client/ui/Tooltip.stories.tsx +28 -4
  52. package/client/ui/WELLDashboard/WELLDashboard.stories.tsx +1 -1
  53. package/client/ui/WELLDashboard/index.tsx +147 -51
  54. package/dist/ui/index.cjs.js +1 -1
  55. package/dist/ui/index.d.ts +8 -1
  56. package/dist/ui/index.es.js +2127 -561
  57. package/package.json +2 -2
  58. package/client/components/ui/StrategyTable.tsx +0 -303
  59. package/client/ui/Input/Input.stories.tsx +0 -69
  60. package/client/ui/StrategyTable.stories.tsx +0 -138
  61. /package/client/components/ui/{SearchField.tsx → search.tsx} +0 -0
  62. /package/client/hooks/{UseTabs.tsx → use-tabs.tsx} +0 -0
package/client/components/ui/{Navigation.tsx → navigation.tsx} RENAMED
@@ -5,23 +5,36 @@ import { UtilityClose } from "../icons/UtilityClose";
5
5
  import { NavLogo } from "../icons/NavLogo";
6
6
  import { NavAccount } from "../icons/NavAccount";
7
7
  import { NavBullet } from "../icons/NavBullet";
8
- import { Button } from "./Button";
8
+ import { Button } from "@/components/ui/button";
9
9
 
10
10
  export interface NavItem {
11
11
  label: string;
12
12
  active?: boolean;
13
13
  }
14
14
 
15
+ // Define a Link component type that matches common routing patterns
16
+ export type LinkComponent = React.ComponentType<{
17
+ href: string;
18
+ className?: string;
19
+ "aria-label"?: string;
20
+ children: React.ReactNode;
21
+ onClick?: (e: React.MouseEvent) => void;
22
+ }>;
23
+
15
24
  interface NavigationProps {
16
- navItems: NavItem[];
25
+ navItems?: NavItem[];
17
26
  isStrategy?: boolean;
18
- onLinkClick?: (href: string) => void;
27
+ Link?: LinkComponent; // Optional Link component from routing library
28
+ onLinkClick?: (href: string) => void; // Fallback callback for navigation
29
+ onClose?: () => void;
19
30
  }
20
31
 
21
32
  export const Navigation: React.FC<NavigationProps> = ({
22
33
  navItems,
23
34
  isStrategy = false,
35
+ Link: LinkComponent,
24
36
  onLinkClick,
37
+ onClose,
25
38
  }) => {
26
39
  const [isOpen, setIsOpen] = React.useState(false);
27
40
  const [activeItem, setActiveItem] = React.useState<number | null>(null);
@@ -41,31 +54,46 @@ export const Navigation: React.FC<NavigationProps> = ({
41
54
  setActiveItem(index + 1);
42
55
  };
43
56
 
44
- const handleLink = (href: string) => {
45
- if (onLinkClick) {
46
- onLinkClick(href);
47
- }
48
- };
49
-
50
- // Link component wrapper (can be replaced with Next.js Link or React Router Link)
51
- const Link: React.FC<{
52
- to: string;
57
+ // Internal NavLink component that handles different routing scenarios
58
+ const NavLink: React.FC<{
59
+ href: string;
53
60
  className?: string;
54
61
  "aria-label"?: string;
55
62
  children: React.ReactNode;
56
- }> = ({ to, className, "aria-label": ariaLabel, children }) => (
57
- <a
58
- href={to}
59
- className={className}
60
- aria-label={ariaLabel}
61
- onClick={(e) => {
62
- e.preventDefault();
63
- handleLink(to);
64
- }}
65
- >
66
- {children}
67
- </a>
68
- );
63
+ }> = ({ href, className, "aria-label": ariaLabel, children }) => {
64
+ // If Link component is provided, use it
65
+ if (LinkComponent) {
66
+ return (
67
+ <LinkComponent href={href} className={className} aria-label={ariaLabel}>
68
+ {children}
69
+ </LinkComponent>
70
+ );
71
+ }
72
+
73
+ // If onLinkClick callback is provided, use anchor with click handler
74
+ if (onLinkClick) {
75
+ return (
76
+ <a
77
+ href={href}
78
+ className={className}
79
+ aria-label={ariaLabel}
80
+ onClick={(e) => {
81
+ e.preventDefault();
82
+ onLinkClick(href);
83
+ }}
84
+ >
85
+ {children}
86
+ </a>
87
+ );
88
+ }
89
+
90
+ // Default: plain anchor tag (browser navigation)
91
+ return (
92
+ <a href={href} className={className} aria-label={ariaLabel}>
93
+ {children}
94
+ </a>
95
+ );
96
+ };
69
97
 
70
98
  return (
71
99
  <nav
@@ -92,13 +120,24 @@ export const Navigation: React.FC<NavigationProps> = ({
92
120
  <div className="container-lg flex h-14 items-center justify-between">
93
121
  <div className="flex h-full sm:min-w-[200px] items-center">
94
122
  {isStrategy ? (
95
- <Button className="mr-4" size="icon">
123
+ <Button
124
+ className="mr-4"
125
+ size="icon"
126
+ onClick={(e) => {
127
+ e.preventDefault();
128
+ if (onClose) {
129
+ onClose();
130
+ } else if (onLinkClick) {
131
+ onLinkClick("/");
132
+ }
133
+ }}
134
+ >
96
135
  <UtilityClose className="text-gray-700 group-hover:text-white" />
97
136
  </Button>
98
137
  ) : null}
99
138
 
100
- <Link
101
- to="/"
139
+ <NavLink
140
+ href="/"
102
141
  className={cn(
103
142
  "flex items-center ease-in-out duration-300 will-change-transform",
104
143
  {
@@ -108,7 +147,7 @@ export const Navigation: React.FC<NavigationProps> = ({
108
147
  aria-label="Home"
109
148
  >
110
149
  <NavLogo dark={isStrategy} />
111
- </Link>
150
+ </NavLink>
112
151
  </div>
113
152
 
114
153
  {!isStrategy ? (
@@ -118,66 +157,68 @@ export const Navigation: React.FC<NavigationProps> = ({
118
157
  )}
119
158
  >
120
159
  <ul className="flex h-full gap-x-12">
121
- {navItems.map((item, index) => (
122
- <li
123
- key={index + 1}
124
- className={cn(
125
- "relative flex h-full flex-col items-center justify-center",
126
- )}
127
- onMouseEnter={() => handleNavItemMouseEnter(index)}
128
- >
129
- <span className="body-small cursor-pointer font-semibold text-white">
130
- {item.label}
131
- </span>
132
-
133
- {/* Underline */}
134
- {activeItem === index + 1 && (
135
- <motion.div
136
- id="underline"
137
- className="absolute -bottom-[10px] z-50 h-[10px] w-[10px] rounded-full"
138
- layoutId="underline"
139
- transition={{ duration: 0.2, ease: "easeOut" }}
140
- >
141
- <div
142
- className="half-circle bg-gradient-to-b from-[#3EECD1] to-[#66FCD9]"
143
- style={{
144
- width: "10px",
145
- height: "5px",
146
- borderBottomLeftRadius: "100px",
147
- borderBottomRightRadius: "100px",
148
- borderBottom: "0",
149
- boxSizing: "border-box",
150
- }}
151
- />
152
- </motion.div>
153
- )}
154
- {index === 0 && (
155
- <div
156
- className="absolute -bottom-[5px] z-50 h-[10px] w-[10px] rounded-full"
157
- style={{ transition: "all 0.2s ease-out" }}
160
+ {navItems
161
+ ? navItems.map((item, index) => (
162
+ <li
163
+ key={index + 1}
164
+ className={cn(
165
+ "relative flex h-full flex-col items-center justify-center",
166
+ )}
167
+ onMouseEnter={() => handleNavItemMouseEnter(index)}
158
168
  >
159
- <div
160
- className="half-circle bg-white"
161
- style={{
162
- width: "10px",
163
- height: "5px",
164
- borderTopLeftRadius: "100px",
165
- borderTopRightRadius: "100px",
166
- borderBottom: "0",
167
- boxSizing: "border-box",
168
- }}
169
- />
170
- </div>
171
- )}
172
- </li>
173
- ))}
169
+ <span className="body-small cursor-pointer font-semibold text-white">
170
+ {item.label}
171
+ </span>
172
+
173
+ {/* Underline */}
174
+ {activeItem === index + 1 && (
175
+ <motion.div
176
+ id="underline"
177
+ className="absolute -bottom-[10px] z-50 h-[10px] w-[10px] rounded-full"
178
+ layoutId="underline"
179
+ transition={{ duration: 0.2, ease: "easeOut" }}
180
+ >
181
+ <div
182
+ className="half-circle bg-gradient-to-b from-[#3EECD1] to-[#66FCD9]"
183
+ style={{
184
+ width: "10px",
185
+ height: "5px",
186
+ borderBottomLeftRadius: "100px",
187
+ borderBottomRightRadius: "100px",
188
+ borderBottom: "0",
189
+ boxSizing: "border-box",
190
+ }}
191
+ />
192
+ </motion.div>
193
+ )}
194
+ {index === 0 && (
195
+ <div
196
+ className="absolute -bottom-[5px] z-50 h-[10px] w-[10px] rounded-full"
197
+ style={{ transition: "all 0.2s ease-out" }}
198
+ >
199
+ <div
200
+ className="half-circle bg-white"
201
+ style={{
202
+ width: "10px",
203
+ height: "5px",
204
+ borderTopLeftRadius: "100px",
205
+ borderTopRightRadius: "100px",
206
+ borderBottom: "0",
207
+ boxSizing: "border-box",
208
+ }}
209
+ />
210
+ </div>
211
+ )}
212
+ </li>
213
+ ))
214
+ : null}
174
215
  </ul>
175
216
  </div>
176
217
  ) : null}
177
218
 
178
219
  <div className="flex h-full sm:min-w-[200px] items-center justify-end gap-4">
179
- <Link
180
- to="/"
220
+ <NavLink
221
+ href="/"
181
222
  aria-label="Account link"
182
223
  className={cn(
183
224
  "flex h-8 w-8 items-center justify-center rounded-full transition-colors btn-icon",
@@ -188,7 +229,7 @@ export const Navigation: React.FC<NavigationProps> = ({
188
229
  <NavAccount
189
230
  className={isStrategy ? "text-bronze-500" : "text-bronze-100"}
190
231
  />
191
- </Link>
232
+ </NavLink>
192
233
  </div>
193
234
  </div>
194
235
 
@@ -235,28 +276,28 @@ export const Navigation: React.FC<NavigationProps> = ({
235
276
  </h3>
236
277
  <ul className="space-y-5">
237
278
  <li>
238
- <Link
239
- to="/"
279
+ <NavLink
280
+ href="/"
240
281
  className="body-base block font-medium text-gray-100 hover:text-white"
241
282
  >
242
283
  Explore WELL
243
- </Link>
284
+ </NavLink>
244
285
  </li>
245
286
  <li>
246
- <Link
247
- to="/"
287
+ <NavLink
288
+ href="/"
248
289
  className="body-base block font-medium text-gray-100 hover:text-white"
249
290
  >
250
291
  Enroll in WELL
251
- </Link>
292
+ </NavLink>
252
293
  </li>
253
294
  <li>
254
- <Link
255
- to="/"
295
+ <NavLink
296
+ href="/"
256
297
  className="body-base block font-medium text-gray-100 hover:text-white"
257
298
  >
258
299
  What's new
259
- </Link>
300
+ </NavLink>
260
301
  </li>
261
302
  </ul>
262
303
  </div>
@@ -266,28 +307,28 @@ export const Navigation: React.FC<NavigationProps> = ({
266
307
  </h3>
267
308
  <ul className="space-y-5">
268
309
  <li>
269
- <Link
270
- to="/"
310
+ <NavLink
311
+ href="/"
271
312
  className="body-base block font-medium text-gray-100 hover:text-white"
272
313
  >
273
314
  Performance
274
- </Link>
315
+ </NavLink>
275
316
  </li>
276
317
  <li>
277
- <Link
278
- to="/"
318
+ <NavLink
319
+ href="/"
279
320
  className="body-base block font-medium text-gray-100 hover:text-white"
280
321
  >
281
322
  ROI
282
- </Link>
323
+ </NavLink>
283
324
  </li>
284
325
  <li>
285
- <Link
286
- to="/"
326
+ <NavLink
327
+ href="/"
287
328
  className="body-base block font-medium text-gray-100 hover:text-white"
288
329
  >
289
330
  Impact
290
- </Link>
331
+ </NavLink>
291
332
  </li>
292
333
  </ul>
293
334
  </div>
@@ -297,28 +338,28 @@ export const Navigation: React.FC<NavigationProps> = ({
297
338
  </h3>
298
339
  <ul className="space-y-5">
299
340
  <li>
300
- <Link
301
- to="/"
341
+ <NavLink
342
+ href="/"
302
343
  className="body-base block font-medium text-gray-100 hover:text-white"
303
344
  >
304
345
  Strategies
305
- </Link>
346
+ </NavLink>
306
347
  </li>
307
348
  <li>
308
- <Link
309
- to="/"
349
+ <NavLink
350
+ href="/"
310
351
  className="body-base block font-medium text-gray-100 hover:text-white"
311
352
  >
312
353
  Themes
313
- </Link>
354
+ </NavLink>
314
355
  </li>
315
356
  <li>
316
- <Link
317
- to="/"
357
+ <NavLink
358
+ href="/"
318
359
  className="body-base block font-medium text-gray-100 hover:text-white"
319
360
  >
320
361
  Milestones
321
- </Link>
362
+ </NavLink>
322
363
  </li>
323
364
  </ul>
324
365
  </div>
@@ -328,20 +369,20 @@ export const Navigation: React.FC<NavigationProps> = ({
328
369
  </h3>
329
370
  <ul className="space-y-5">
330
371
  <li>
331
- <Link
332
- to="/"
372
+ <NavLink
373
+ href="/"
333
374
  className="body-base block font-medium text-gray-100 hover:text-white"
334
375
  >
335
376
  Organizations
336
- </Link>
377
+ </NavLink>
337
378
  </li>
338
379
  <li>
339
- <Link
340
- to="/"
380
+ <NavLink
381
+ href="/"
341
382
  className="body-base block font-medium text-gray-100 hover:text-white"
342
383
  >
343
384
  People
344
- </Link>
385
+ </NavLink>
345
386
  </li>
346
387
  </ul>
347
388
  </div>
@@ -351,20 +392,20 @@ export const Navigation: React.FC<NavigationProps> = ({
351
392
  </h3>
352
393
  <ul className="space-y-5">
353
394
  <li>
354
- <Link
355
- to="/"
395
+ <NavLink
396
+ href="/"
356
397
  className="body-base block font-medium text-gray-100 hover:text-white"
357
398
  >
358
399
  Products
359
- </Link>
400
+ </NavLink>
360
401
  </li>
361
402
  <li>
362
- <Link
363
- to="/"
403
+ <NavLink
404
+ href="/"
364
405
  className="body-base block font-medium text-gray-100 hover:text-white"
365
406
  >
366
407
  Services
367
- </Link>
408
+ </NavLink>
368
409
  </li>
369
410
  </ul>
370
411
  </div>
@@ -374,20 +415,20 @@ export const Navigation: React.FC<NavigationProps> = ({
374
415
  </h3>
375
416
  <ul className="space-y-5">
376
417
  <li>
377
- <Link
378
- to="/"
418
+ <NavLink
419
+ href="/"
379
420
  className="body-base block font-medium text-gray-100 hover:text-white"
380
421
  >
381
422
  Locations
382
- </Link>
423
+ </NavLink>
383
424
  </li>
384
425
  <li>
385
- <Link
386
- to="/"
426
+ <NavLink
427
+ href="/"
387
428
  className="body-base block font-medium text-gray-100 hover:text-white"
388
429
  >
389
430
  Portfolios
390
- </Link>
431
+ </NavLink>
391
432
  </li>
392
433
  </ul>
393
434
  </div>
@@ -417,31 +458,31 @@ export const Navigation: React.FC<NavigationProps> = ({
417
458
  </h3>
418
459
  <ul className="space-y-4">
419
460
  <li>
420
- <Link
421
- to="/"
461
+ <NavLink
462
+ href="/"
422
463
  className="body-base block font-medium text-gray-100 hover:text-white"
423
464
  >
424
465
  WELL at scale
425
- </Link>
466
+ </NavLink>
426
467
  </li>
427
468
  <li>
428
469
  <div className="flex items-center gap-3 pl-[6px]">
429
470
  <div className="h-1 w-1 rounded-full bg-gray-500" />
430
- <Link to="/">
471
+ <NavLink href="/">
431
472
  <span className="body-small font-medium text-gray-100">
432
473
  Pricing
433
474
  </span>
434
- </Link>
475
+ </NavLink>
435
476
  </div>
436
477
  </li>
437
478
  <li>
438
479
  <div className="flex items-center gap-3 pl-[6px]">
439
480
  <div className="h-1 w-1 rounded-full bg-gray-500" />
440
- <Link to="/">
481
+ <NavLink href="/">
441
482
  <span className="body-small font-medium text-gray-100">
442
483
  Leaderboard
443
484
  </span>
444
- </Link>
485
+ </NavLink>
445
486
  </div>
446
487
  </li>
447
488
  </ul>
@@ -452,23 +493,23 @@ export const Navigation: React.FC<NavigationProps> = ({
452
493
  </h3>
453
494
  <ul className="space-y-4">
454
495
  <li>
455
- <Link
456
- to="/"
496
+ <NavLink
497
+ href="/"
457
498
  className="body-base block font-medium text-gray-100 hover:text-white"
458
499
  >
459
500
  WELL Certification
460
- </Link>
501
+ </NavLink>
461
502
  </li>
462
503
  <li>
463
- <Link
464
- to="/"
504
+ <NavLink
505
+ href="/"
465
506
  className="text-gray-100 hover:text-white flex items-center justify-start body-base font-medium"
466
507
  >
467
508
  WELL Residence
468
509
  <span className="overline-small text-[#F0AA99] ml-1">
469
510
  PILOT
470
511
  </span>
471
- </Link>
512
+ </NavLink>
472
513
  </li>
473
514
  </ul>
474
515
  </div>
@@ -478,44 +519,44 @@ export const Navigation: React.FC<NavigationProps> = ({
478
519
  </h3>
479
520
  <ul className="space-y-4">
480
521
  <li>
481
- <Link
482
- to="/"
522
+ <NavLink
523
+ href="/"
483
524
  className="body-base block font-medium text-gray-100 hover:text-white"
484
525
  >
485
526
  WELL Ratings
486
- </Link>
527
+ </NavLink>
487
528
  </li>
488
529
  <li>
489
530
  <div className="flex items-center gap-3 pl-[6px]">
490
531
  <NavBullet color="#F3E7D8" />
491
- <Link
492
- to="/"
532
+ <NavLink
533
+ href="/"
493
534
  className="body-small font-medium text-gray-100"
494
535
  >
495
536
  Health-Safety Rating
496
- </Link>
537
+ </NavLink>
497
538
  </div>
498
539
  </li>
499
540
  <li>
500
541
  <div className="flex items-center gap-3 pl-[6px]">
501
542
  <NavBullet color="#0F748A" />
502
- <Link
503
- to="/"
543
+ <NavLink
544
+ href="/"
504
545
  className="body-small font-medium text-gray-100"
505
546
  >
506
547
  Performance Rating
507
- </Link>
548
+ </NavLink>
508
549
  </div>
509
550
  </li>
510
551
  <li>
511
552
  <div className="flex items-center gap-3 pl-[6px]">
512
553
  <NavBullet color="#17AA8D" />
513
- <Link
514
- to="/"
554
+ <NavLink
555
+ href="/"
515
556
  className="body-small font-medium text-gray-100"
516
557
  >
517
558
  Equity Rating
518
- </Link>
559
+ </NavLink>
519
560
  </div>
520
561
  </li>
521
562
  </ul>
@@ -546,52 +587,52 @@ export const Navigation: React.FC<NavigationProps> = ({
546
587
  </h3>
547
588
  <ul className="space-y-4">
548
589
  <li>
549
- <Link
550
- to="/"
590
+ <NavLink
591
+ href="/"
551
592
  className="body-base block font-medium text-gray-100 hover:text-white"
552
593
  >
553
594
  Membership
554
- </Link>
595
+ </NavLink>
555
596
  </li>
556
597
  <li>
557
- <Link
558
- to="/"
598
+ <NavLink
599
+ href="/"
559
600
  className="body-base block font-medium text-gray-100 hover:text-white"
560
601
  >
561
602
  Works with WELL
562
- </Link>
603
+ </NavLink>
563
604
  </li>
564
605
  <li>
565
606
  <div className="flex items-center gap-3 pl-[6px]">
566
607
  <NavBullet color="#2E74AD" />
567
- <Link
568
- to="/"
608
+ <NavLink
609
+ href="/"
569
610
  className="body-small font-medium text-gray-100"
570
611
  >
571
612
  Enterprise Provider
572
- </Link>
613
+ </NavLink>
573
614
  </div>
574
615
  </li>
575
616
  <li>
576
617
  <div className="flex items-center gap-3 pl-[6px]">
577
618
  <NavBullet color="#149EBD" />
578
- <Link
579
- to="/"
619
+ <NavLink
620
+ href="/"
580
621
  className="body-small font-medium text-gray-100"
581
622
  >
582
623
  Product Provider
583
- </Link>
624
+ </NavLink>
584
625
  </div>
585
626
  </li>
586
627
  <li>
587
628
  <div className="flex items-center gap-3 pl-[6px]">
588
629
  <NavBullet color="#ED896F" />
589
- <Link
590
- to="/"
630
+ <NavLink
631
+ href="/"
591
632
  className="body-small font-medium text-gray-100"
592
633
  >
593
634
  Performance Testing Provider
594
- </Link>
635
+ </NavLink>
595
636
  </div>
596
637
  </li>
597
638
  </ul>
@@ -603,20 +644,20 @@ export const Navigation: React.FC<NavigationProps> = ({
603
644
  </h3>
604
645
  <ul className="space-y-4">
605
646
  <li>
606
- <Link
607
- to="/"
647
+ <NavLink
648
+ href="/"
608
649
  className="body-base block font-medium text-gray-100 hover:text-white"
609
650
  >
610
651
  WELL AP
611
- </Link>
652
+ </NavLink>
612
653
  </li>
613
654
  <li>
614
- <Link
615
- to="/"
655
+ <NavLink
656
+ href="/"
616
657
  className="body-base block font-medium text-gray-100 hover:text-white"
617
658
  >
618
659
  WELL Faculty
619
- </Link>
660
+ </NavLink>
620
661
  </li>
621
662
  </ul>
622
663
  </div>
@@ -646,44 +687,44 @@ export const Navigation: React.FC<NavigationProps> = ({
646
687
  </h3>
647
688
  <ul className="space-y-4">
648
689
  <li>
649
- <Link
650
- to="/"
690
+ <NavLink
691
+ href="/"
651
692
  className="body-base block font-medium text-gray-100 hover:text-white"
652
693
  >
653
694
  WELL Forum
654
- </Link>
695
+ </NavLink>
655
696
  </li>
656
697
  <li>
657
698
  <div className="flex items-center gap-3 pl-[6px]">
658
699
  <div className="h-1 w-1 rounded-full bg-gray-500" />
659
- <Link
660
- to="/"
700
+ <NavLink
701
+ href="/"
661
702
  className="body-small font-medium text-gray-100"
662
703
  >
663
704
  Threads
664
- </Link>
705
+ </NavLink>
665
706
  </div>
666
707
  </li>
667
708
  <li>
668
709
  <div className="flex items-center gap-3 pl-[6px]">
669
710
  <div className="h-1 w-1 rounded-full bg-gray-500" />
670
- <Link
671
- to="/"
711
+ <NavLink
712
+ href="/"
672
713
  className="body-small font-medium text-gray-100"
673
714
  >
674
715
  Webcasts
675
- </Link>
716
+ </NavLink>
676
717
  </div>
677
718
  </li>
678
719
  <li>
679
720
  <div className="flex items-center gap-3 pl-[6px]">
680
721
  <div className="h-1 w-1 rounded-full bg-gray-500" />
681
- <Link
682
- to="/"
722
+ <NavLink
723
+ href="/"
683
724
  className="body-small font-medium text-gray-100"
684
725
  >
685
726
  Trainings
686
- </Link>
727
+ </NavLink>
687
728
  </div>
688
729
  </li>
689
730
  </ul>
@@ -694,44 +735,44 @@ export const Navigation: React.FC<NavigationProps> = ({
694
735
  </h3>
695
736
  <ul className="space-y-4">
696
737
  <li>
697
- <Link
698
- to="/"
738
+ <NavLink
739
+ href="/"
699
740
  className="body-base block font-medium text-gray-100 hover:text-white"
700
741
  >
701
742
  WELL 2025
702
- </Link>
743
+ </NavLink>
703
744
  </li>
704
745
  <li>
705
746
  <div className="flex items-center gap-3 pl-[6px]">
706
747
  <div className="h-1 w-1 rounded-full bg-gray-500" />
707
- <Link
708
- to="/"
748
+ <NavLink
749
+ href="/"
709
750
  className="body-small font-medium text-gray-100"
710
751
  >
711
752
  Flagship events
712
- </Link>
753
+ </NavLink>
713
754
  </div>
714
755
  </li>
715
756
  <li>
716
757
  <div className="flex items-center gap-3 pl-[6px]">
717
758
  <div className="h-1 w-1 rounded-full bg-gray-500" />
718
- <Link
719
- to="/"
759
+ <NavLink
760
+ href="/"
720
761
  className="body-small font-medium text-gray-100"
721
762
  >
722
763
  Thematic summits
723
- </Link>
764
+ </NavLink>
724
765
  </div>
725
766
  </li>
726
767
  <li>
727
768
  <div className="flex items-center gap-3 pl-[6px]">
728
769
  <div className="h-1 w-1 rounded-full bg-gray-500" />
729
- <Link
730
- to="/"
770
+ <NavLink
771
+ href="/"
731
772
  className="body-small font-medium text-gray-100"
732
773
  >
733
774
  Regional summits
734
- </Link>
775
+ </NavLink>
735
776
  </div>
736
777
  </li>
737
778
  </ul>
@@ -742,44 +783,44 @@ export const Navigation: React.FC<NavigationProps> = ({
742
783
  </h3>
743
784
  <ul className="space-y-4">
744
785
  <li>
745
- <Link
746
- to="/"
786
+ <NavLink
787
+ href="/"
747
788
  className="body-base block font-medium text-gray-100 hover:text-white"
748
789
  >
749
790
  Knowledge base
750
- </Link>
791
+ </NavLink>
751
792
  </li>
752
793
  <li>
753
794
  <div className="flex items-center gap-3 pl-[6px]">
754
795
  <div className="h-1 w-1 rounded-full bg-gray-500" />
755
- <Link
756
- to="/"
796
+ <NavLink
797
+ href="/"
757
798
  className="body-small font-medium text-gray-100"
758
799
  >
759
800
  Tutorials
760
- </Link>
801
+ </NavLink>
761
802
  </div>
762
803
  </li>
763
804
  <li>
764
805
  <div className="flex items-center gap-3 pl-[6px]">
765
806
  <div className="h-1 w-1 rounded-full bg-gray-500" />
766
- <Link
767
- to="/"
807
+ <NavLink
808
+ href="/"
768
809
  className="body-small font-medium text-gray-100"
769
810
  >
770
811
  Guides
771
- </Link>
812
+ </NavLink>
772
813
  </div>
773
814
  </li>
774
815
  <li>
775
816
  <div className="flex items-center gap-3 pl-[6px]">
776
817
  <div className="h-1 w-1 rounded-full bg-gray-500" />
777
- <Link
778
- to="/"
818
+ <NavLink
819
+ href="/"
779
820
  className="body-small font-medium text-gray-100"
780
821
  >
781
822
  FAQs
782
- </Link>
823
+ </NavLink>
783
824
  </div>
784
825
  </li>
785
826
  </ul>
@@ -790,44 +831,44 @@ export const Navigation: React.FC<NavigationProps> = ({
790
831
  </h3>
791
832
  <ul className="space-y-4">
792
833
  <li>
793
- <Link
794
- to="/"
834
+ <NavLink
835
+ href="/"
795
836
  className="body-base block font-medium text-gray-100 hover:text-white"
796
837
  >
797
838
  Resource library
798
- </Link>
839
+ </NavLink>
799
840
  </li>
800
841
  <li>
801
842
  <div className="flex items-center gap-3 pl-[6px]">
802
843
  <div className="h-1 w-1 rounded-full bg-gray-500" />
803
- <Link
804
- to="/"
844
+ <NavLink
845
+ href="/"
805
846
  className="body-small font-medium text-gray-100"
806
847
  >
807
848
  Technical tools
808
- </Link>
849
+ </NavLink>
809
850
  </div>
810
851
  </li>
811
852
  <li>
812
853
  <div className="flex items-center gap-3 pl-[6px]">
813
854
  <div className="h-1 w-1 rounded-full bg-gray-500" />
814
- <Link
815
- to="/"
855
+ <NavLink
856
+ href="/"
816
857
  className="body-small font-medium text-gray-100"
817
858
  >
818
859
  Sales tools
819
- </Link>
860
+ </NavLink>
820
861
  </div>
821
862
  </li>
822
863
  <li>
823
864
  <div className="flex items-center gap-3 pl-[6px]">
824
865
  <div className="h-1 w-1 rounded-full bg-gray-500" />
825
- <Link
826
- to="/"
866
+ <NavLink
867
+ href="/"
827
868
  className="body-small font-medium text-gray-100"
828
869
  >
829
870
  Media
830
- </Link>
871
+ </NavLink>
831
872
  </div>
832
873
  </li>
833
874
  </ul>
@@ -858,28 +899,28 @@ export const Navigation: React.FC<NavigationProps> = ({
858
899
  </h3>
859
900
  <ul className="space-y-4">
860
901
  <li>
861
- <Link
862
- to="/"
902
+ <NavLink
903
+ href="/"
863
904
  className="body-base block font-medium text-gray-100 hover:text-white"
864
905
  >
865
906
  IWBI
866
- </Link>
907
+ </NavLink>
867
908
  </li>
868
909
  <li>
869
- <Link
870
- to="/"
910
+ <NavLink
911
+ href="/"
871
912
  className="body-base block font-medium text-gray-100 hover:text-white"
872
913
  >
873
914
  Research
874
- </Link>
915
+ </NavLink>
875
916
  </li>
876
917
  <li>
877
- <Link
878
- to="/"
918
+ <NavLink
919
+ href="/"
879
920
  className="body-base block font-medium text-gray-100 hover:text-white"
880
921
  >
881
922
  Advocacy
882
- </Link>
923
+ </NavLink>
883
924
  </li>
884
925
  </ul>
885
926
  </div>
@@ -889,28 +930,28 @@ export const Navigation: React.FC<NavigationProps> = ({
889
930
  </h3>
890
931
  <ul className="space-y-4">
891
932
  <li>
892
- <Link
893
- to="/"
933
+ <NavLink
934
+ href="/"
894
935
  className="body-base block font-medium text-gray-100 hover:text-white"
895
936
  >
896
937
  Team
897
- </Link>
938
+ </NavLink>
898
939
  </li>
899
940
  <li>
900
- <Link
901
- to="/"
941
+ <NavLink
942
+ href="/"
902
943
  className="body-base block font-medium text-gray-100 hover:text-white"
903
944
  >
904
945
  Advisories
905
- </Link>
946
+ </NavLink>
906
947
  </li>
907
948
  <li>
908
- <Link
909
- to="/"
949
+ <NavLink
950
+ href="/"
910
951
  className="body-base block font-medium text-gray-100 hover:text-white"
911
952
  >
912
953
  Governance Council
913
- </Link>
954
+ </NavLink>
914
955
  </li>
915
956
  </ul>
916
957
  </div>
@@ -920,28 +961,28 @@ export const Navigation: React.FC<NavigationProps> = ({
920
961
  </h3>
921
962
  <ul className="space-y-4">
922
963
  <li>
923
- <Link
924
- to="/"
964
+ <NavLink
965
+ href="/"
925
966
  className="body-base block font-medium text-gray-100 hover:text-white"
926
967
  >
927
968
  Newsroom
928
- </Link>
969
+ </NavLink>
929
970
  </li>
930
971
  <li>
931
- <Link
932
- to="/"
972
+ <NavLink
973
+ href="/"
933
974
  className="body-base block font-medium text-gray-100 hover:text-white"
934
975
  >
935
976
  Jobs
936
- </Link>
977
+ </NavLink>
937
978
  </li>
938
979
  <li>
939
- <Link
940
- to="/"
980
+ <NavLink
981
+ href="/"
941
982
  className="body-base block font-medium text-gray-100 hover:text-white"
942
983
  >
943
984
  Blog
944
- </Link>
985
+ </NavLink>
945
986
  </li>
946
987
  </ul>
947
988
  </div>