@syscore/ui-library 1.1.13 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/client/components/ui/accordion.tsx +6 -9
  2. package/client/components/ui/alert-dialog.tsx +6 -19
  3. package/client/components/ui/alert.tsx +5 -6
  4. package/client/components/ui/avatar.tsx +3 -9
  5. package/client/components/ui/badge.tsx +5 -8
  6. package/client/components/ui/breadcrumb.tsx +7 -16
  7. package/client/components/ui/button.tsx +17 -45
  8. package/client/components/ui/calendar.tsx +24 -28
  9. package/client/components/ui/card.tsx +6 -9
  10. package/client/components/ui/carousel.tsx +14 -14
  11. package/client/components/ui/chart.tsx +25 -28
  12. package/client/components/ui/checkbox.tsx +3 -8
  13. package/client/components/ui/code-badge.tsx +1 -4
  14. package/client/components/ui/command.tsx +12 -48
  15. package/client/components/ui/context-menu.tsx +17 -32
  16. package/client/components/ui/dialog.tsx +9 -18
  17. package/client/components/ui/drawer.tsx +7 -13
  18. package/client/components/ui/dropdown-menu.tsx +17 -29
  19. package/client/components/ui/form.tsx +4 -4
  20. package/client/components/ui/hover-card.tsx +1 -4
  21. package/client/components/ui/input-otp.tsx +7 -10
  22. package/client/components/ui/input.tsx +4 -23
  23. package/client/components/ui/label.tsx +1 -3
  24. package/client/components/ui/menubar.tsx +19 -40
  25. package/client/components/ui/navigation-menu.tsx +10 -27
  26. package/client/components/ui/navigation.tsx +193 -331
  27. package/client/components/ui/pagination.tsx +8 -8
  28. package/client/components/ui/popover.tsx +1 -4
  29. package/client/components/ui/progress.tsx +2 -5
  30. package/client/components/ui/radio-group.tsx +4 -7
  31. package/client/components/ui/resizable.tsx +4 -10
  32. package/client/components/ui/scroll-area.tsx +5 -8
  33. package/client/components/ui/search.tsx +7 -10
  34. package/client/components/ui/select.tsx +11 -36
  35. package/client/components/ui/separator.tsx +2 -2
  36. package/client/components/ui/sheet.tsx +12 -23
  37. package/client/components/ui/sidebar.tsx +55 -82
  38. package/client/components/ui/skeleton.tsx +1 -1
  39. package/client/components/ui/slider.tsx +4 -7
  40. package/client/components/ui/sonner.tsx +5 -8
  41. package/client/components/ui/switch.tsx +2 -9
  42. package/client/components/ui/table.tsx +9 -18
  43. package/client/components/ui/tabs.tsx +19 -28
  44. package/client/components/ui/tag.tsx +6 -66
  45. package/client/components/ui/textarea.tsx +1 -4
  46. package/client/components/ui/toast.tsx +9 -19
  47. package/client/components/ui/toaster.tsx +1 -1
  48. package/client/components/ui/toggle-group.tsx +4 -4
  49. package/client/components/ui/toggle.tsx +13 -13
  50. package/client/components/ui/tooltip.tsx +12 -15
  51. package/client/global.css +5419 -1054
  52. package/client/storybook.css +1164 -0
  53. package/dist/index.cjs.js +1 -0
  54. package/dist/{ui/index.d.ts → index.d.ts} +0 -1
  55. package/dist/index.es.js +4552 -0
  56. package/dist/ui-library.css +1 -0
  57. package/package.json +9 -12
  58. package/client/ui/WELLDashboard/WELLDashboard.stories.tsx +0 -115
  59. package/client/ui/WELLDashboard/index.tsx +0 -317
  60. package/dist/ui/index.cjs.js +0 -1
  61. package/dist/ui/index.es.js +0 -5502
  62. package/tailwind.preset.ts +0 -151
  63. /package/dist/{ui/favicon.ico → favicon.ico} +0 -0
  64. /package/dist/{ui/fonts → fonts}/FT-Made/FTMade-Regular.otf +0 -0
  65. /package/dist/{ui/fonts → fonts}/FT-Made/FTMade-Regular.ttf +0 -0
  66. /package/dist/{ui/fonts → fonts}/FT-Made/FTMade-Regular.woff +0 -0
  67. /package/dist/{ui/fonts → fonts}/FT-Made/FTMade-Regular.woff2 +0 -0
  68. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-black.otf +0 -0
  69. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-blackitalic.otf +0 -0
  70. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-bold.otf +0 -0
  71. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-bolditalic.otf +0 -0
  72. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-extrabold.otf +0 -0
  73. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-extrabolditalic.otf +0 -0
  74. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-extralight.otf +0 -0
  75. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-extralightitalic.otf +0 -0
  76. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-italic.otf +0 -0
  77. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-light.otf +0 -0
  78. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-lightitalic.otf +0 -0
  79. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-medium.otf +0 -0
  80. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-mediumitalic.otf +0 -0
  81. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-regular.otf +0 -0
  82. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-semibold.otf +0 -0
  83. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-semibolditalic.otf +0 -0
  84. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-thin.otf +0 -0
  85. /package/dist/{ui/fonts → fonts}/Mazzard-M/mazzardsoftm-thinitalic.otf +0 -0
  86. /package/dist/{ui/placeholder.svg → placeholder.svg} +0 -0
  87. /package/dist/{ui/robots.txt → robots.txt} +0 -0
package/client/components/ui/navigation.tsx CHANGED
@@ -98,30 +98,23 @@ export const Navigation: React.FC<NavigationProps> = ({
98
98
  return (
99
99
  <nav
100
100
  ref={containerRef}
101
- className={cn(
102
- "absolute top-0 left-0 z-50 h-14 w-full",
103
- isStrategy &&
104
- "bg-gray-50 backdrop-blur-xl backdrop-filter border-b border-gray-100",
105
- )}
101
+ className={cn("navigation", isStrategy && "navigation--strategy")}
102
+ data-strategy={isStrategy}
106
103
  onMouseLeave={handleMouseLeave}
107
104
  >
108
105
  {!isStrategy && (
109
106
  <div
110
107
  ref={overlayRef}
111
- className={cn(
112
- "absolute top-0 left-0 z-[-1] h-[340px] w-full duration-300 ease-in-out will-change-transform",
113
- isOpen
114
- ? "translate-y-0 bg-[rgba(62,64,73,0.90)] backdrop-blur-xl"
115
- : "-translate-y-[calc(100%-56px)] bg-black/16",
116
- )}
108
+ className="navigation-overlay"
109
+ data-open={isOpen}
117
110
  />
118
111
  )}
119
112
 
120
- <div className="container-lg flex h-14 items-center justify-between">
121
- <div className="flex h-full sm:min-w-[200px] items-center">
113
+ <div className="navigation-container">
114
+ <div className="navigation-logo-container">
122
115
  {isStrategy ? (
123
116
  <Button
124
- className="mr-4"
117
+ className="navigation-close-button"
125
118
  size="icon"
126
119
  onClick={(e) => {
127
120
  e.preventDefault();
@@ -132,18 +125,17 @@ export const Navigation: React.FC<NavigationProps> = ({
132
125
  }
133
126
  }}
134
127
  >
135
- <UtilityClose className="text-gray-700 group-hover:text-white" />
128
+ <UtilityClose className="navigation-close-icon" />
136
129
  </Button>
137
130
  ) : null}
138
131
 
139
132
  <NavLink
140
133
  href="/"
141
134
  className={cn(
142
- "flex items-center ease-in-out duration-300 will-change-transform",
143
- {
144
- "translate-x-0": isStrategy,
145
- },
135
+ "navigation-logo-link",
136
+ isStrategy && "navigation-logo-link--strategy",
146
137
  )}
138
+ data-strategy={isStrategy}
147
139
  aria-label="Home"
148
140
  >
149
141
  <NavLogo dark={isStrategy} />
@@ -151,35 +143,27 @@ export const Navigation: React.FC<NavigationProps> = ({
151
143
  </div>
152
144
 
153
145
  {!isStrategy ? (
154
- <div
155
- className={cn(
156
- "relative hidden h-full flex-1 items-center justify-center space-x-12 md:flex",
157
- )}
158
- >
159
- <ul className="flex h-full gap-x-12">
146
+ <div className="navigation-nav-container">
147
+ <ul className="navigation-nav-list">
160
148
  {navItems
161
149
  ? navItems.map((item, index) => (
162
150
  <li
163
151
  key={index + 1}
164
- className={cn(
165
- "relative flex h-full flex-col items-center justify-center",
166
- )}
152
+ className="navigation-nav-item"
167
153
  onMouseEnter={() => handleNavItemMouseEnter(index)}
168
154
  >
169
- <span className="body-small cursor-pointer font-semibold text-white">
170
- {item.label}
171
- </span>
155
+ <span className="navigation-nav-link">{item.label}</span>
172
156
 
173
157
  {/* Underline */}
174
158
  {activeItem === index + 1 && (
175
159
  <motion.div
176
160
  id="underline"
177
- className="absolute -bottom-[10px] z-50 h-[10px] w-[10px] rounded-full"
161
+ className="navigation-underline"
178
162
  layoutId="underline"
179
163
  transition={{ duration: 0.2, ease: "easeOut" }}
180
164
  >
181
165
  <div
182
- className="half-circle bg-gradient-to-b from-[#3EECD1] to-[#66FCD9]"
166
+ className="navigation-underline-circle navigation-underline-circle--gradient"
183
167
  style={{
184
168
  width: "10px",
185
169
  height: "5px",
@@ -193,11 +177,11 @@ export const Navigation: React.FC<NavigationProps> = ({
193
177
  )}
194
178
  {index === 0 && (
195
179
  <div
196
- className="absolute -bottom-[5px] z-50 h-[10px] w-[10px] rounded-full"
180
+ className="navigation-underline navigation-underline--static"
197
181
  style={{ transition: "all 0.2s ease-out" }}
198
182
  >
199
183
  <div
200
- className="half-circle bg-white"
184
+ className="navigation-underline-circle navigation-underline-circle--white"
201
185
  style={{
202
186
  width: "10px",
203
187
  height: "5px",
@@ -216,35 +200,32 @@ export const Navigation: React.FC<NavigationProps> = ({
216
200
  </div>
217
201
  ) : null}
218
202
 
219
- <div className="flex h-full sm:min-w-[200px] items-center justify-end gap-4">
203
+ <div className="navigation-actions">
220
204
  <NavLink
221
205
  href="/"
222
206
  aria-label="Account link"
223
- className={cn(
224
- "flex h-8 w-8 items-center justify-center rounded-full transition-colors btn-icon",
225
- !isOpen ? "bg-black/8" : "bg-white/12",
226
- isStrategy ? "bg-white border border-gray-100" : "",
227
- )}
207
+ className="navigation-account-link"
208
+ data-open={isOpen}
209
+ data-strategy={isStrategy}
228
210
  >
229
211
  <NavAccount
230
- className={isStrategy ? "text-bronze-500" : "text-bronze-100"}
212
+ className={cn(
213
+ "navigation-account-icon",
214
+ isStrategy
215
+ ? "navigation-account-icon--strategy"
216
+ : "navigation-account-icon--default",
217
+ )}
231
218
  />
232
219
  </NavLink>
233
220
  </div>
234
221
  </div>
235
222
 
236
- {isOpen && <div className="h-px w-full bg-[rgba(255,255,255,0.08)]" />}
223
+ {isOpen && <div className="navigation-divider" />}
237
224
 
238
225
  {/* Tray */}
239
- <div
240
- ref={menuRef}
241
- className={cn(
242
- "relative max-h-[292px] pointer-events-none",
243
- isOpen ? "pointer-events-auto" : "",
244
- )}
245
- >
246
- <div className="absolute top-0 left-0 h-full w-full">
247
- <div ref={menuItemsRef} className="relative grid">
226
+ <div ref={menuRef} className="navigation-tray" data-open={isOpen}>
227
+ <div className="navigation-tray-content">
228
+ <div ref={menuItemsRef} className="navigation-tray-grid">
248
229
  <AnimatePresence mode="wait">
249
230
  <motion.div
250
231
  key={activeItem ? activeItem + 1 : "empty"}
@@ -255,9 +236,9 @@ export const Navigation: React.FC<NavigationProps> = ({
255
236
  >
256
237
  {/* WELL Tray */}
257
238
  {activeItem === 1 && (
258
- <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
239
+ <div className="navigation-tray-section">
259
240
  <h2
260
- className="heading-xsmall py-1"
241
+ className="navigation-tray-heading"
261
242
  style={{
262
243
  background:
263
244
  "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
@@ -269,164 +250,117 @@ export const Navigation: React.FC<NavigationProps> = ({
269
250
  WELL sets the standard for people-first places
270
251
  </h2>
271
252
 
272
- <div className="flex gap-x-20">
273
- <div className="space-y-5">
274
- <h3 className="overline-medium font-semibold text-plum-400">
253
+ <div className="navigation-tray-columns">
254
+ <div className="navigation-tray-column">
255
+ <h3 className="navigation-tray-column-title">
275
256
  Everything
276
257
  </h3>
277
- <ul className="space-y-5">
258
+ <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
278
259
  <li>
279
- <NavLink
280
- href="/"
281
- className="body-base block font-medium text-gray-100 hover:text-white"
282
- >
260
+ <NavLink href="/" className="navigation-tray-link">
283
261
  Explore WELL
284
262
  </NavLink>
285
263
  </li>
286
264
  <li>
287
- <NavLink
288
- href="/"
289
- className="body-base block font-medium text-gray-100 hover:text-white"
290
- >
265
+ <NavLink href="/" className="navigation-tray-link">
291
266
  Enroll in WELL
292
267
  </NavLink>
293
268
  </li>
294
269
  <li>
295
- <NavLink
296
- href="/"
297
- className="body-base block font-medium text-gray-100 hover:text-white"
298
- >
270
+ <NavLink href="/" className="navigation-tray-link">
299
271
  What's new
300
272
  </NavLink>
301
273
  </li>
302
274
  </ul>
303
275
  </div>
304
- <div className="space-y-5">
305
- <h3 className="overline-medium font-semibold text-plum-400">
276
+ <div className="navigation-tray-column">
277
+ <h3 className="navigation-tray-column-title">
306
278
  WHY WELL
307
279
  </h3>
308
- <ul className="space-y-5">
280
+ <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
309
281
  <li>
310
- <NavLink
311
- href="/"
312
- className="body-base block font-medium text-gray-100 hover:text-white"
313
- >
282
+ <NavLink href="/" className="navigation-tray-link">
314
283
  Performance
315
284
  </NavLink>
316
285
  </li>
317
286
  <li>
318
- <NavLink
319
- href="/"
320
- className="body-base block font-medium text-gray-100 hover:text-white"
321
- >
287
+ <NavLink href="/" className="navigation-tray-link">
322
288
  ROI
323
289
  </NavLink>
324
290
  </li>
325
291
  <li>
326
- <NavLink
327
- href="/"
328
- className="body-base block font-medium text-gray-100 hover:text-white"
329
- >
292
+ <NavLink href="/" className="navigation-tray-link">
330
293
  Impact
331
294
  </NavLink>
332
295
  </li>
333
296
  </ul>
334
297
  </div>
335
- <div className="space-y-5">
336
- <h3 className="overline-medium font-semibold text-plum-400">
298
+ <div className="navigation-tray-column">
299
+ <h3 className="navigation-tray-column-title">
337
300
  Standard
338
301
  </h3>
339
- <ul className="space-y-5">
302
+ <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
340
303
  <li>
341
- <NavLink
342
- href="/"
343
- className="body-base block font-medium text-gray-100 hover:text-white"
344
- >
304
+ <NavLink href="/" className="navigation-tray-link">
345
305
  Strategies
346
306
  </NavLink>
347
307
  </li>
348
308
  <li>
349
- <NavLink
350
- href="/"
351
- className="body-base block font-medium text-gray-100 hover:text-white"
352
- >
309
+ <NavLink href="/" className="navigation-tray-link">
353
310
  Themes
354
311
  </NavLink>
355
312
  </li>
356
313
  <li>
357
- <NavLink
358
- href="/"
359
- className="body-base block font-medium text-gray-100 hover:text-white"
360
- >
314
+ <NavLink href="/" className="navigation-tray-link">
361
315
  Milestones
362
316
  </NavLink>
363
317
  </li>
364
318
  </ul>
365
319
  </div>
366
- <div className="space-y-5">
367
- <h3 className="overline-medium font-semibold text-plum-400">
320
+ <div className="navigation-tray-column">
321
+ <h3 className="navigation-tray-column-title">
368
322
  Network
369
323
  </h3>
370
- <ul className="space-y-5">
324
+ <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
371
325
  <li>
372
- <NavLink
373
- href="/"
374
- className="body-base block font-medium text-gray-100 hover:text-white"
375
- >
326
+ <NavLink href="/" className="navigation-tray-link">
376
327
  Organizations
377
328
  </NavLink>
378
329
  </li>
379
330
  <li>
380
- <NavLink
381
- href="/"
382
- className="body-base block font-medium text-gray-100 hover:text-white"
383
- >
331
+ <NavLink href="/" className="navigation-tray-link">
384
332
  People
385
333
  </NavLink>
386
334
  </li>
387
335
  </ul>
388
336
  </div>
389
- <div className="space-y-5">
390
- <h3 className="overline-medium font-semibold text-plum-400">
337
+ <div className="navigation-tray-column">
338
+ <h3 className="navigation-tray-column-title">
391
339
  Solutions
392
340
  </h3>
393
- <ul className="space-y-5">
341
+ <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
394
342
  <li>
395
- <NavLink
396
- href="/"
397
- className="body-base block font-medium text-gray-100 hover:text-white"
398
- >
343
+ <NavLink href="/" className="navigation-tray-link">
399
344
  Products
400
345
  </NavLink>
401
346
  </li>
402
347
  <li>
403
- <NavLink
404
- href="/"
405
- className="body-base block font-medium text-gray-100 hover:text-white"
406
- >
348
+ <NavLink href="/" className="navigation-tray-link">
407
349
  Services
408
350
  </NavLink>
409
351
  </li>
410
352
  </ul>
411
353
  </div>
412
- <div className="space-y-5">
413
- <h3 className="overline-medium font-semibold text-plum-400">
414
- Places
415
- </h3>
416
- <ul className="space-y-5">
354
+ <div className="navigation-tray-column">
355
+ <h3 className="navigation-tray-column-title">Places</h3>
356
+ <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
417
357
  <li>
418
- <NavLink
419
- href="/"
420
- className="body-base block font-medium text-gray-100 hover:text-white"
421
- >
358
+ <NavLink href="/" className="navigation-tray-link">
422
359
  Locations
423
360
  </NavLink>
424
361
  </li>
425
362
  <li>
426
- <NavLink
427
- href="/"
428
- className="body-base block font-medium text-gray-100 hover:text-white"
429
- >
363
+ <NavLink href="/" className="navigation-tray-link">
430
364
  Portfolios
431
365
  </NavLink>
432
366
  </li>
@@ -438,9 +372,9 @@ export const Navigation: React.FC<NavigationProps> = ({
438
372
 
439
373
  {/* Pursuits Tray */}
440
374
  {activeItem === 2 && (
441
- <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
375
+ <div className="navigation-tray-section">
442
376
  <h2
443
- className="heading-xsmall py-1"
377
+ className="navigation-tray-heading"
444
378
  style={{
445
379
  background:
446
380
  "linear-gradient(99deg, #41D5F6 3.39%, #3EECD1 57.86%, #66FCD9 112.32%)",
@@ -451,35 +385,32 @@ export const Navigation: React.FC<NavigationProps> = ({
451
385
  >
452
386
  WELL works everywhere, at any scale
453
387
  </h2>
454
- <div className="flex gap-x-20">
455
- <div className="space-y-5">
456
- <h3 className="overline-medium font-semibold text-plum-400">
388
+ <div className="navigation-tray-columns">
389
+ <div className="navigation-tray-column">
390
+ <h3 className="navigation-tray-column-title">
457
391
  SUBSCRIBE
458
392
  </h3>
459
- <ul className="space-y-4">
393
+ <ul className="navigation-tray-column-list">
460
394
  <li>
461
- <NavLink
462
- href="/"
463
- className="body-base block font-medium text-gray-100 hover:text-white"
464
- >
395
+ <NavLink href="/" className="navigation-tray-link">
465
396
  WELL at scale
466
397
  </NavLink>
467
398
  </li>
468
399
  <li>
469
- <div className="flex items-center gap-3 pl-[6px]">
470
- <div className="h-1 w-1 rounded-full bg-gray-500" />
400
+ <div className="navigation-tray-bullet-item">
401
+ <div className="navigation-tray-bullet" />
471
402
  <NavLink href="/">
472
- <span className="body-small font-medium text-gray-100">
403
+ <span className="navigation-tray-link-small">
473
404
  Pricing
474
405
  </span>
475
406
  </NavLink>
476
407
  </div>
477
408
  </li>
478
409
  <li>
479
- <div className="flex items-center gap-3 pl-[6px]">
480
- <div className="h-1 w-1 rounded-full bg-gray-500" />
410
+ <div className="navigation-tray-bullet-item">
411
+ <div className="navigation-tray-bullet" />
481
412
  <NavLink href="/">
482
- <span className="body-small font-medium text-gray-100">
413
+ <span className="navigation-tray-link-small">
483
414
  Leaderboard
484
415
  </span>
485
416
  </NavLink>
@@ -487,73 +418,67 @@ export const Navigation: React.FC<NavigationProps> = ({
487
418
  </li>
488
419
  </ul>
489
420
  </div>
490
- <div className="space-y-5">
491
- <h3 className="overline-medium font-semibold text-plum-400">
421
+ <div className="navigation-tray-column">
422
+ <h3 className="navigation-tray-column-title">
492
423
  Certify
493
424
  </h3>
494
- <ul className="space-y-4">
425
+ <ul className="navigation-tray-column-list">
495
426
  <li>
496
- <NavLink
497
- href="/"
498
- className="body-base block font-medium text-gray-100 hover:text-white"
499
- >
427
+ <NavLink href="/" className="navigation-tray-link">
500
428
  WELL Certification
501
429
  </NavLink>
502
430
  </li>
503
431
  <li>
504
432
  <NavLink
505
433
  href="/"
506
- className="text-gray-100 hover:text-white flex items-center justify-start body-base font-medium"
434
+ className="navigation-tray-link navigation-tray-link--with-badge"
507
435
  >
508
436
  WELL Residence
509
- <span className="overline-small text-[#F0AA99] ml-1">
437
+ <span className="navigation-tray-badge">
510
438
  PILOT
511
439
  </span>
512
440
  </NavLink>
513
441
  </li>
514
442
  </ul>
515
443
  </div>
516
- <div className="space-y-5">
517
- <h3 className="overline-medium font-semibold text-plum-400">
444
+ <div className="navigation-tray-column">
445
+ <h3 className="navigation-tray-column-title">
518
446
  Get rated
519
447
  </h3>
520
- <ul className="space-y-4">
448
+ <ul className="navigation-tray-column-list">
521
449
  <li>
522
- <NavLink
523
- href="/"
524
- className="body-base block font-medium text-gray-100 hover:text-white"
525
- >
450
+ <NavLink href="/" className="navigation-tray-link">
526
451
  WELL Ratings
527
452
  </NavLink>
528
453
  </li>
529
454
  <li>
530
- <div className="flex items-center gap-3 pl-[6px]">
455
+ <div className="navigation-tray-bullet-item">
531
456
  <NavBullet color="#F3E7D8" />
532
457
  <NavLink
533
458
  href="/"
534
- className="body-small font-medium text-gray-100"
459
+ className="navigation-tray-link-small"
535
460
  >
536
461
  Health-Safety Rating
537
462
  </NavLink>
538
463
  </div>
539
464
  </li>
540
465
  <li>
541
- <div className="flex items-center gap-3 pl-[6px]">
466
+ <div className="navigation-tray-bullet-item">
542
467
  <NavBullet color="#0F748A" />
543
468
  <NavLink
544
469
  href="/"
545
- className="body-small font-medium text-gray-100"
470
+ className="navigation-tray-link-small"
546
471
  >
547
472
  Performance Rating
548
473
  </NavLink>
549
474
  </div>
550
475
  </li>
551
476
  <li>
552
- <div className="flex items-center gap-3 pl-[6px]">
477
+ <div className="navigation-tray-bullet-item">
553
478
  <NavBullet color="#17AA8D" />
554
479
  <NavLink
555
480
  href="/"
556
- className="body-small font-medium text-gray-100"
481
+ className="navigation-tray-link-small"
557
482
  >
558
483
  Equity Rating
559
484
  </NavLink>
@@ -567,9 +492,9 @@ export const Navigation: React.FC<NavigationProps> = ({
567
492
 
568
493
  {/* Network Tray */}
569
494
  {activeItem === 3 && (
570
- <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
495
+ <div className="navigation-tray-section">
571
496
  <h2
572
- className="heading-xsmall py-1"
497
+ className="navigation-tray-heading"
573
498
  style={{
574
499
  background:
575
500
  "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
@@ -580,56 +505,48 @@ export const Navigation: React.FC<NavigationProps> = ({
580
505
  Our network drives our movement
581
506
  </h2>
582
507
 
583
- <div className="flex gap-x-20">
584
- <div className="space-y-5">
585
- <h3 className="overline-medium font-semibold text-plum-400">
586
- JOIN
587
- </h3>
588
- <ul className="space-y-4">
508
+ <div className="navigation-tray-columns">
509
+ <div className="navigation-tray-column">
510
+ <h3 className="navigation-tray-column-title">JOIN</h3>
511
+ <ul className="navigation-tray-column-list">
589
512
  <li>
590
- <NavLink
591
- href="/"
592
- className="body-base block font-medium text-gray-100 hover:text-white"
593
- >
513
+ <NavLink href="/" className="navigation-tray-link">
594
514
  Membership
595
515
  </NavLink>
596
516
  </li>
597
517
  <li>
598
- <NavLink
599
- href="/"
600
- className="body-base block font-medium text-gray-100 hover:text-white"
601
- >
518
+ <NavLink href="/" className="navigation-tray-link">
602
519
  Works with WELL
603
520
  </NavLink>
604
521
  </li>
605
522
  <li>
606
- <div className="flex items-center gap-3 pl-[6px]">
523
+ <div className="navigation-tray-bullet-item">
607
524
  <NavBullet color="#2E74AD" />
608
525
  <NavLink
609
526
  href="/"
610
- className="body-small font-medium text-gray-100"
527
+ className="navigation-tray-link-small"
611
528
  >
612
529
  Enterprise Provider
613
530
  </NavLink>
614
531
  </div>
615
532
  </li>
616
533
  <li>
617
- <div className="flex items-center gap-3 pl-[6px]">
534
+ <div className="navigation-tray-bullet-item">
618
535
  <NavBullet color="#149EBD" />
619
536
  <NavLink
620
537
  href="/"
621
- className="body-small font-medium text-gray-100"
538
+ className="navigation-tray-link-small"
622
539
  >
623
540
  Product Provider
624
541
  </NavLink>
625
542
  </div>
626
543
  </li>
627
544
  <li>
628
- <div className="flex items-center gap-3 pl-[6px]">
545
+ <div className="navigation-tray-bullet-item">
629
546
  <NavBullet color="#ED896F" />
630
547
  <NavLink
631
548
  href="/"
632
- className="body-small font-medium text-gray-100"
549
+ className="navigation-tray-link-small"
633
550
  >
634
551
  Performance Testing Provider
635
552
  </NavLink>
@@ -638,24 +555,16 @@ export const Navigation: React.FC<NavigationProps> = ({
638
555
  </ul>
639
556
  </div>
640
557
 
641
- <div className="space-y-5">
642
- <h3 className="overline-medium font-semibold text-plum-400">
643
- EARN
644
- </h3>
645
- <ul className="space-y-4">
558
+ <div className="navigation-tray-column">
559
+ <h3 className="navigation-tray-column-title">EARN</h3>
560
+ <ul className="navigation-tray-column-list">
646
561
  <li>
647
- <NavLink
648
- href="/"
649
- className="body-base block font-medium text-gray-100 hover:text-white"
650
- >
562
+ <NavLink href="/" className="navigation-tray-link">
651
563
  WELL AP
652
564
  </NavLink>
653
565
  </li>
654
566
  <li>
655
- <NavLink
656
- href="/"
657
- className="body-base block font-medium text-gray-100 hover:text-white"
658
- >
567
+ <NavLink href="/" className="navigation-tray-link">
659
568
  WELL Faculty
660
569
  </NavLink>
661
570
  </li>
@@ -667,9 +576,9 @@ export const Navigation: React.FC<NavigationProps> = ({
667
576
 
668
577
  {/* Knowledge Tray */}
669
578
  {activeItem === 4 && (
670
- <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
579
+ <div className="navigation-tray-section">
671
580
  <h2
672
- className="heading-xsmall py-1"
581
+ className="navigation-tray-heading"
673
582
  style={{
674
583
  background:
675
584
  "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
@@ -680,48 +589,43 @@ export const Navigation: React.FC<NavigationProps> = ({
680
589
  Learn from the experts on health
681
590
  </h2>
682
591
 
683
- <div className="flex gap-x-20">
684
- <div className="space-y-5">
685
- <h3 className="overline-medium font-semibold text-plum-400">
686
- LEARN
687
- </h3>
688
- <ul className="space-y-4">
592
+ <div className="navigation-tray-columns">
593
+ <div className="navigation-tray-column">
594
+ <h3 className="navigation-tray-column-title">LEARN</h3>
595
+ <ul className="navigation-tray-column-list">
689
596
  <li>
690
- <NavLink
691
- href="/"
692
- className="body-base block font-medium text-gray-100 hover:text-white"
693
- >
597
+ <NavLink href="/" className="navigation-tray-link">
694
598
  WELL Forum
695
599
  </NavLink>
696
600
  </li>
697
601
  <li>
698
- <div className="flex items-center gap-3 pl-[6px]">
699
- <div className="h-1 w-1 rounded-full bg-gray-500" />
602
+ <div className="navigation-tray-bullet-item">
603
+ <div className="navigation-tray-bullet" />
700
604
  <NavLink
701
605
  href="/"
702
- className="body-small font-medium text-gray-100"
606
+ className="navigation-tray-link-small"
703
607
  >
704
608
  Threads
705
609
  </NavLink>
706
610
  </div>
707
611
  </li>
708
612
  <li>
709
- <div className="flex items-center gap-3 pl-[6px]">
710
- <div className="h-1 w-1 rounded-full bg-gray-500" />
613
+ <div className="navigation-tray-bullet-item">
614
+ <div className="navigation-tray-bullet" />
711
615
  <NavLink
712
616
  href="/"
713
- className="body-small font-medium text-gray-100"
617
+ className="navigation-tray-link-small"
714
618
  >
715
619
  Webcasts
716
620
  </NavLink>
717
621
  </div>
718
622
  </li>
719
623
  <li>
720
- <div className="flex items-center gap-3 pl-[6px]">
721
- <div className="h-1 w-1 rounded-full bg-gray-500" />
624
+ <div className="navigation-tray-bullet-item">
625
+ <div className="navigation-tray-bullet" />
722
626
  <NavLink
723
627
  href="/"
724
- className="body-small font-medium text-gray-100"
628
+ className="navigation-tray-link-small"
725
629
  >
726
630
  Trainings
727
631
  </NavLink>
@@ -729,47 +633,42 @@ export const Navigation: React.FC<NavigationProps> = ({
729
633
  </li>
730
634
  </ul>
731
635
  </div>
732
- <div className="space-y-5">
733
- <h3 className="overline-medium font-semibold text-plum-400">
734
- ATTEND
735
- </h3>
736
- <ul className="space-y-4">
636
+ <div className="navigation-tray-column">
637
+ <h3 className="navigation-tray-column-title">ATTEND</h3>
638
+ <ul className="navigation-tray-column-list">
737
639
  <li>
738
- <NavLink
739
- href="/"
740
- className="body-base block font-medium text-gray-100 hover:text-white"
741
- >
640
+ <NavLink href="/" className="navigation-tray-link">
742
641
  WELL 2025
743
642
  </NavLink>
744
643
  </li>
745
644
  <li>
746
- <div className="flex items-center gap-3 pl-[6px]">
747
- <div className="h-1 w-1 rounded-full bg-gray-500" />
645
+ <div className="navigation-tray-bullet-item">
646
+ <div className="navigation-tray-bullet" />
748
647
  <NavLink
749
648
  href="/"
750
- className="body-small font-medium text-gray-100"
649
+ className="navigation-tray-link-small"
751
650
  >
752
651
  Flagship events
753
652
  </NavLink>
754
653
  </div>
755
654
  </li>
756
655
  <li>
757
- <div className="flex items-center gap-3 pl-[6px]">
758
- <div className="h-1 w-1 rounded-full bg-gray-500" />
656
+ <div className="navigation-tray-bullet-item">
657
+ <div className="navigation-tray-bullet" />
759
658
  <NavLink
760
659
  href="/"
761
- className="body-small font-medium text-gray-100"
660
+ className="navigation-tray-link-small"
762
661
  >
763
662
  Thematic summits
764
663
  </NavLink>
765
664
  </div>
766
665
  </li>
767
666
  <li>
768
- <div className="flex items-center gap-3 pl-[6px]">
769
- <div className="h-1 w-1 rounded-full bg-gray-500" />
667
+ <div className="navigation-tray-bullet-item">
668
+ <div className="navigation-tray-bullet" />
770
669
  <NavLink
771
670
  href="/"
772
- className="body-small font-medium text-gray-100"
671
+ className="navigation-tray-link-small"
773
672
  >
774
673
  Regional summits
775
674
  </NavLink>
@@ -777,47 +676,44 @@ export const Navigation: React.FC<NavigationProps> = ({
777
676
  </li>
778
677
  </ul>
779
678
  </div>
780
- <div className="space-y-5">
781
- <h3 className="overline-medium font-semibold text-plum-400">
679
+ <div className="navigation-tray-column">
680
+ <h3 className="navigation-tray-column-title">
782
681
  GUIDANCE
783
682
  </h3>
784
- <ul className="space-y-4">
683
+ <ul className="navigation-tray-column-list">
785
684
  <li>
786
- <NavLink
787
- href="/"
788
- className="body-base block font-medium text-gray-100 hover:text-white"
789
- >
685
+ <NavLink href="/" className="navigation-tray-link">
790
686
  Knowledge base
791
687
  </NavLink>
792
688
  </li>
793
689
  <li>
794
- <div className="flex items-center gap-3 pl-[6px]">
795
- <div className="h-1 w-1 rounded-full bg-gray-500" />
690
+ <div className="navigation-tray-bullet-item">
691
+ <div className="navigation-tray-bullet" />
796
692
  <NavLink
797
693
  href="/"
798
- className="body-small font-medium text-gray-100"
694
+ className="navigation-tray-link-small"
799
695
  >
800
696
  Tutorials
801
697
  </NavLink>
802
698
  </div>
803
699
  </li>
804
700
  <li>
805
- <div className="flex items-center gap-3 pl-[6px]">
806
- <div className="h-1 w-1 rounded-full bg-gray-500" />
701
+ <div className="navigation-tray-bullet-item">
702
+ <div className="navigation-tray-bullet" />
807
703
  <NavLink
808
704
  href="/"
809
- className="body-small font-medium text-gray-100"
705
+ className="navigation-tray-link-small"
810
706
  >
811
707
  Guides
812
708
  </NavLink>
813
709
  </div>
814
710
  </li>
815
711
  <li>
816
- <div className="flex items-center gap-3 pl-[6px]">
817
- <div className="h-1 w-1 rounded-full bg-gray-500" />
712
+ <div className="navigation-tray-bullet-item">
713
+ <div className="navigation-tray-bullet" />
818
714
  <NavLink
819
715
  href="/"
820
- className="body-small font-medium text-gray-100"
716
+ className="navigation-tray-link-small"
821
717
  >
822
718
  FAQs
823
719
  </NavLink>
@@ -825,47 +721,44 @@ export const Navigation: React.FC<NavigationProps> = ({
825
721
  </li>
826
722
  </ul>
827
723
  </div>
828
- <div className="space-y-5">
829
- <h3 className="overline-medium font-semibold text-plum-400">
724
+ <div className="navigation-tray-column">
725
+ <h3 className="navigation-tray-column-title">
830
726
  Resources
831
727
  </h3>
832
- <ul className="space-y-4">
728
+ <ul className="navigation-tray-column-list">
833
729
  <li>
834
- <NavLink
835
- href="/"
836
- className="body-base block font-medium text-gray-100 hover:text-white"
837
- >
730
+ <NavLink href="/" className="navigation-tray-link">
838
731
  Resource library
839
732
  </NavLink>
840
733
  </li>
841
734
  <li>
842
- <div className="flex items-center gap-3 pl-[6px]">
843
- <div className="h-1 w-1 rounded-full bg-gray-500" />
735
+ <div className="navigation-tray-bullet-item">
736
+ <div className="navigation-tray-bullet" />
844
737
  <NavLink
845
738
  href="/"
846
- className="body-small font-medium text-gray-100"
739
+ className="navigation-tray-link-small"
847
740
  >
848
741
  Technical tools
849
742
  </NavLink>
850
743
  </div>
851
744
  </li>
852
745
  <li>
853
- <div className="flex items-center gap-3 pl-[6px]">
854
- <div className="h-1 w-1 rounded-full bg-gray-500" />
746
+ <div className="navigation-tray-bullet-item">
747
+ <div className="navigation-tray-bullet" />
855
748
  <NavLink
856
749
  href="/"
857
- className="body-small font-medium text-gray-100"
750
+ className="navigation-tray-link-small"
858
751
  >
859
752
  Sales tools
860
753
  </NavLink>
861
754
  </div>
862
755
  </li>
863
756
  <li>
864
- <div className="flex items-center gap-3 pl-[6px]">
865
- <div className="h-1 w-1 rounded-full bg-gray-500" />
757
+ <div className="navigation-tray-bullet-item">
758
+ <div className="navigation-tray-bullet" />
866
759
  <NavLink
867
760
  href="/"
868
- className="body-small font-medium text-gray-100"
761
+ className="navigation-tray-link-small"
869
762
  >
870
763
  Media
871
764
  </NavLink>
@@ -879,9 +772,9 @@ export const Navigation: React.FC<NavigationProps> = ({
879
772
 
880
773
  {/* IWBI Tray */}
881
774
  {activeItem === 5 && (
882
- <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
775
+ <div className="navigation-tray-section">
883
776
  <h2
884
- className="heading-xsmall py-1"
777
+ className="navigation-tray-heading"
885
778
  style={{
886
779
  background:
887
780
  "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
@@ -892,95 +785,64 @@ export const Navigation: React.FC<NavigationProps> = ({
892
785
  The International WELL Building Institute (IWBI)
893
786
  </h2>
894
787
 
895
- <div className="flex gap-x-20">
896
- <div className="space-y-5">
897
- <h3 className="overline-medium font-semibold text-plum-400">
898
- About
899
- </h3>
900
- <ul className="space-y-4">
788
+ <div className="navigation-tray-columns">
789
+ <div className="navigation-tray-column">
790
+ <h3 className="navigation-tray-column-title">About</h3>
791
+ <ul className="navigation-tray-column-list">
901
792
  <li>
902
- <NavLink
903
- href="/"
904
- className="body-base block font-medium text-gray-100 hover:text-white"
905
- >
793
+ <NavLink href="/" className="navigation-tray-link">
906
794
  IWBI
907
795
  </NavLink>
908
796
  </li>
909
797
  <li>
910
- <NavLink
911
- href="/"
912
- className="body-base block font-medium text-gray-100 hover:text-white"
913
- >
798
+ <NavLink href="/" className="navigation-tray-link">
914
799
  Research
915
800
  </NavLink>
916
801
  </li>
917
802
  <li>
918
- <NavLink
919
- href="/"
920
- className="body-base block font-medium text-gray-100 hover:text-white"
921
- >
803
+ <NavLink href="/" className="navigation-tray-link">
922
804
  Advocacy
923
805
  </NavLink>
924
806
  </li>
925
807
  </ul>
926
808
  </div>
927
- <div className="space-y-5">
928
- <h3 className="overline-medium font-semibold text-plum-400">
929
- Meet
930
- </h3>
931
- <ul className="space-y-4">
809
+ <div className="navigation-tray-column">
810
+ <h3 className="navigation-tray-column-title">Meet</h3>
811
+ <ul className="navigation-tray-column-list">
932
812
  <li>
933
- <NavLink
934
- href="/"
935
- className="body-base block font-medium text-gray-100 hover:text-white"
936
- >
813
+ <NavLink href="/" className="navigation-tray-link">
937
814
  Team
938
815
  </NavLink>
939
816
  </li>
940
817
  <li>
941
- <NavLink
942
- href="/"
943
- className="body-base block font-medium text-gray-100 hover:text-white"
944
- >
818
+ <NavLink href="/" className="navigation-tray-link">
945
819
  Advisories
946
820
  </NavLink>
947
821
  </li>
948
822
  <li>
949
- <NavLink
950
- href="/"
951
- className="body-base block font-medium text-gray-100 hover:text-white"
952
- >
823
+ <NavLink href="/" className="navigation-tray-link">
953
824
  Governance Council
954
825
  </NavLink>
955
826
  </li>
956
827
  </ul>
957
828
  </div>
958
- <div className="space-y-5">
959
- <h3 className="overline-medium font-semibold text-plum-400">
829
+ <div className="navigation-tray-column">
830
+ <h3 className="navigation-tray-column-title">
960
831
  Explore
961
832
  </h3>
962
- <ul className="space-y-4">
833
+ <ul className="navigation-tray-column-list">
963
834
  <li>
964
- <NavLink
965
- href="/"
966
- className="body-base block font-medium text-gray-100 hover:text-white"
967
- >
835
+ <NavLink href="/" className="navigation-tray-link">
968
836
  Newsroom
969
837
  </NavLink>
970
838
  </li>
971
839
  <li>
972
- <NavLink
973
- href="/"
974
- className="body-base block font-medium text-gray-100 hover:text-white"
975
- >
840
+ <NavLink href="/" className="navigation-tray-link">
976
841
  Jobs
977
842
  </NavLink>
978
843
  </li>
979
844
  <li>
980
- <NavLink
981
- href="/"
982
- className="body-base block font-medium text-gray-100 hover:text-white"
983
- >
845
+ <NavLink href="/" className="navigation-tray-link">
984
846
  Blog
985
847
  </NavLink>
986
848
  </li>