@syscore/ui-library 1.1.12 → 1.2.0

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 (100) 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/accordion.tsx +6 -9
  19. package/client/components/ui/alert-dialog.tsx +6 -19
  20. package/client/components/ui/alert.tsx +5 -6
  21. package/client/components/ui/avatar.tsx +3 -9
  22. package/client/components/ui/badge.tsx +5 -8
  23. package/client/components/ui/breadcrumb.tsx +24 -11
  24. package/client/components/ui/button.tsx +40 -56
  25. package/client/components/ui/calendar.tsx +24 -28
  26. package/client/components/ui/card.tsx +6 -9
  27. package/client/components/ui/carousel.tsx +14 -14
  28. package/client/components/ui/chart.tsx +25 -28
  29. package/client/components/ui/checkbox.tsx +3 -8
  30. package/client/components/ui/code-badge.tsx +22 -0
  31. package/client/components/ui/command.tsx +12 -48
  32. package/client/components/ui/context-menu.tsx +17 -32
  33. package/client/components/ui/dialog.tsx +9 -18
  34. package/client/components/ui/drawer.tsx +7 -13
  35. package/client/components/ui/dropdown-menu.tsx +17 -29
  36. package/client/components/ui/form.tsx +4 -4
  37. package/client/components/ui/hover-card.tsx +1 -4
  38. package/client/components/ui/input-otp.tsx +7 -10
  39. package/client/components/ui/input.tsx +34 -9
  40. package/client/components/ui/label.tsx +2 -4
  41. package/client/components/ui/menubar.tsx +19 -40
  42. package/client/components/ui/navigation-menu.tsx +10 -27
  43. package/client/components/ui/navigation.tsx +861 -0
  44. package/client/components/ui/pagination.tsx +8 -8
  45. package/client/components/ui/popover.tsx +1 -4
  46. package/client/components/ui/progress.tsx +2 -5
  47. package/client/components/ui/radio-group.tsx +4 -7
  48. package/client/components/ui/resizable.tsx +4 -10
  49. package/client/components/ui/scroll-area.tsx +5 -8
  50. package/client/components/ui/{SearchField.tsx → search.tsx} +7 -10
  51. package/client/components/ui/select.tsx +19 -44
  52. package/client/components/ui/separator.tsx +2 -2
  53. package/client/components/ui/sheet.tsx +12 -23
  54. package/client/components/ui/sidebar.tsx +55 -82
  55. package/client/components/ui/skeleton.tsx +1 -1
  56. package/client/components/ui/slider.tsx +4 -7
  57. package/client/components/ui/sonner.tsx +5 -8
  58. package/client/components/ui/switch.tsx +2 -9
  59. package/client/components/ui/table.tsx +9 -18
  60. package/client/components/ui/tabs.tsx +43 -203
  61. package/client/components/ui/tag.tsx +68 -0
  62. package/client/components/ui/textarea.tsx +1 -4
  63. package/client/components/ui/toast.tsx +9 -19
  64. package/client/components/ui/toaster.tsx +1 -1
  65. package/client/components/ui/toggle-group.tsx +20 -3
  66. package/client/components/ui/toggle.tsx +13 -13
  67. package/client/components/ui/tooltip.tsx +147 -10
  68. package/client/global.css +5421 -1049
  69. package/client/storybook.css +1164 -0
  70. package/client/ui/AspectRatio.stories.tsx +1 -1
  71. package/client/ui/Button.stories.tsx +5 -5
  72. package/client/ui/Card.stories.tsx +223 -2
  73. package/client/ui/CodeBadge.stories.tsx +76 -0
  74. package/client/ui/Dialog.stories.tsx +52 -5
  75. package/client/ui/Icons.stories.tsx +31 -31
  76. package/client/ui/Input.stories.tsx +125 -0
  77. package/client/ui/Label.stories.tsx +8 -11
  78. package/client/ui/Navigation.stories.tsx +1 -1
  79. package/client/ui/RadioGroup/RadioGroup.stories.tsx +1 -1
  80. package/client/ui/SearchField.stories.tsx +1 -1
  81. package/client/ui/{Select/Select.stories.tsx → Select.stories.tsx} +2 -2
  82. package/client/ui/{Switch/Switch.stories.tsx → Switch.stories.tsx} +3 -3
  83. package/client/ui/Tabs.stories.tsx +174 -10
  84. package/client/ui/Tag.stories.tsx +48 -1
  85. package/client/ui/{Textarea/Textarea.stories.tsx → Textarea.stories.tsx} +9 -10
  86. package/client/ui/Toggle.stories.tsx +3 -3
  87. package/client/ui/Tooltip.stories.tsx +28 -4
  88. package/dist/ui/index.cjs.js +1 -1
  89. package/dist/ui/index.d.ts +4 -6
  90. package/dist/ui/index.es.js +1227 -2235
  91. package/dist/ui/ui-library.css +1 -0
  92. package/package.json +3 -3
  93. package/client/components/ui/Navigation.tsx +0 -958
  94. package/client/components/ui/StrategyTable.tsx +0 -303
  95. package/client/components/ui/Tag.tsx +0 -127
  96. package/client/ui/Input/Input.stories.tsx +0 -69
  97. package/client/ui/StrategyTable.stories.tsx +0 -138
  98. package/client/ui/WELLDashboard/WELLDashboard.stories.tsx +0 -115
  99. package/client/ui/WELLDashboard/index.tsx +0 -317
  100. /package/client/hooks/{UseTabs.tsx → use-tabs.tsx} +0 -0
@@ -0,0 +1,33 @@
1
+
2
+
3
+ export const BadgeCertificationBronze = () => {
4
+ return (
5
+ <svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54" fill="none" className="size-[52px]">
6
+ <path d="M26.8122 52.8121C24.5706 52.8121 22.2424 52.5414 20.0875 51.9133C17.9325 51.2853 15.7884 50.4839 13.8176 49.3144C11.8467 48.1449 10.0491 46.8021 8.43565 45.1886C6.82216 43.5751 5.47939 41.7884 4.30987 39.8067C3.14036 37.8359 2.33903 35.7784 1.71096 33.5368C1.08288 31.3819 0.812164 29.0537 0.812164 26.8121C0.812164 24.5706 1.08288 22.2424 1.71096 20.0874C2.33903 17.9325 3.14036 15.7884 4.30987 13.8175C5.47939 11.8467 6.82216 10.0491 8.43565 8.43562C10.0491 6.82213 11.8359 5.47936 13.8176 4.30984C15.7884 3.14033 17.8459 2.339 20.0875 1.71093C22.2424 1.08285 24.5706 0.812134 26.8122 0.812134C29.0537 0.812134 31.3819 1.08285 33.5369 1.71093C35.6918 2.339 37.8359 3.14033 39.8067 4.30984C41.7776 5.47936 43.5752 6.82213 45.1887 8.43562C46.8022 10.0491 48.1449 11.8359 49.3145 13.8175C50.484 15.7884 51.2853 17.8459 51.9134 20.0874C52.5414 22.2424 52.8122 24.5706 52.8122 26.8121C52.8122 29.0537 52.5414 31.3819 51.9134 33.5368C51.2853 35.6918 50.484 37.8359 49.3145 39.8067C48.1449 41.7776 46.8022 43.5751 45.1887 45.1886C43.5752 46.8021 41.7884 48.1449 39.8067 49.3144C37.8359 50.4839 35.7784 51.2853 33.5369 51.9133C31.3819 52.5414 29.0537 52.8121 26.8122 52.8121Z" fill="#BB833A" />
7
+ <path d="M26.8122 52.8121C24.5706 52.8121 22.2424 52.5414 20.0875 51.9133C17.9325 51.2853 15.7884 50.4839 13.8176 49.3144C11.8467 48.1449 10.0491 46.8021 8.43565 45.1886C6.82216 43.5751 5.47939 41.7884 4.30987 39.8067C3.14036 37.8359 2.33903 35.7784 1.71096 33.5368C1.08288 31.3819 0.812164 29.0537 0.812164 26.8121C0.812164 24.5706 1.08288 22.2424 1.71096 20.0874C2.33903 17.9325 3.14036 15.7884 4.30987 13.8175C5.47939 11.8467 6.82216 10.0491 8.43565 8.43562C10.0491 6.82213 11.8359 5.47936 13.8176 4.30984C15.7884 3.14033 17.8459 2.339 20.0875 1.71093C22.2424 1.08285 24.5706 0.812134 26.8122 0.812134C29.0537 0.812134 31.3819 1.08285 33.5369 1.71093C35.6918 2.339 37.8359 3.14033 39.8067 4.30984C41.7776 5.47936 43.5752 6.82213 45.1887 8.43562C46.8022 10.0491 48.1449 11.8359 49.3145 13.8175C50.484 15.7884 51.2853 17.8459 51.9134 20.0874C52.5414 22.2424 52.8122 24.5706 52.8122 26.8121C52.8122 29.0537 52.5414 31.3819 51.9134 33.5368C51.2853 35.6918 50.484 37.8359 49.3145 39.8067C48.1449 41.7776 46.8022 43.5751 45.1887 45.1886C43.5752 46.8021 41.7884 48.1449 39.8067 49.3144C37.8359 50.4839 35.7784 51.2853 33.5369 51.9133C31.3819 52.5414 29.0537 52.8121 26.8122 52.8121Z" fill="url(#paint0_linear_9834_265)" fill-opacity="0.8" />
8
+ <path d="M26.8122 52.8121C24.5706 52.8121 22.2424 52.5414 20.0875 51.9133C17.9325 51.2853 15.7884 50.4839 13.8176 49.3144C11.8467 48.1449 10.0492 46.8021 8.43566 45.1886C6.82216 43.5752 5.47939 41.7884 4.30987 39.8067C3.14036 37.8359 2.33903 35.7784 1.71096 33.5368C1.08288 31.3819 0.812164 29.0537 0.812164 26.8121C0.812164 24.5706 1.08288 22.2424 1.71096 20.0874C2.33903 17.9325 3.14036 15.7884 4.30987 13.8175C5.47939 11.8467 6.82216 10.0491 8.43566 8.43562C10.0492 6.82213 11.8359 5.47936 13.8176 4.30984C15.7884 3.14033 17.8459 2.339 20.0875 1.71093C22.2424 1.08285 24.5706 0.812134 26.8122 0.812134C29.0537 0.812134 31.3819 1.08285 33.5369 1.71093C35.6918 2.339 37.8359 3.14033 39.8068 4.30984C41.7776 5.47936 43.5752 6.82213 45.1887 8.43562C46.8022 10.0491 48.1449 11.8359 49.3145 13.8175C50.484 15.7884 51.2853 17.8459 51.9134 20.0874C52.5414 22.2424 52.8122 24.5706 52.8122 26.8121C52.8122 29.0537 52.5414 31.3819 51.9134 33.5368C51.2853 35.6918 50.484 37.8359 49.3145 39.8067C48.1449 41.7776 46.8022 43.5752 45.1887 45.1886C43.5752 46.8021 41.7884 48.1449 39.8068 49.3144C37.8359 50.4839 35.7784 51.2853 33.5369 51.9133C31.3819 52.5414 29.0537 52.8121 26.8122 52.8121Z" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
9
+ <path d="M32.6923 48.7839C30.8081 49.3362 28.7723 49.5636 26.8123 49.5636C24.8523 49.5636 22.8164 49.3254 20.9322 48.7839C19.048 48.2425 17.1638 47.5278 15.442 46.5099C13.7202 45.4919 12.1501 44.3116 10.7423 42.9039C9.33456 41.4961 8.15422 39.9259 7.13631 38.2041C6.1184 36.4824 5.41453 34.674 4.86226 32.7139C4.30999 30.8297 4.08258 28.7939 4.08258 26.8339C4.08258 24.8739 4.32081 22.8381 4.86226 20.9538C5.4037 19.0696 6.1184 17.1854 7.13631 15.4636C8.15422 13.7418 9.33456 12.1717 10.7423 10.7639" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
10
+ <path d="M49.5526 26.8231C49.5526 28.7831 49.3144 30.819 48.773 32.7032C48.2315 34.5874 47.5168 36.4716 46.4989 38.1934C45.481 39.9152 44.3007 41.4853 42.8929 42.8931" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
11
+ <path d="M20.9323 4.86219C22.8165 4.30992 24.8523 4.08252 26.8124 4.08252C28.7724 4.08252 30.8082 4.32075 32.6924 4.86219C34.5766 5.40364 36.4608 6.11834 38.1826 7.13625C39.9044 8.15416 41.4746 9.3345 42.8823 10.7422C44.2901 12.15 45.4704 13.7202 46.4883 15.442" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
12
+ <path d="M17.0661 43.6944C15.5825 42.8173 14.2397 41.8102 13.0377 40.5974C11.8249 39.3846 10.8178 38.0418 9.9407 36.5691C9.06357 35.0855 8.45716 33.5478 7.99152 31.8694C7.52588 30.2559 7.32013 28.5124 7.32013 26.8231" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
13
+ <path d="M45.6327 21.7767C46.0983 23.3902 46.3041 25.1337 46.3041 26.823C46.3041 28.5123 46.0983 30.2557 45.6327 31.8692C45.167 33.4827 44.5606 35.0962 43.6835 36.5689C42.8064 38.0525 41.7993 39.3952 40.5864 40.5972C39.3736 41.8101 38.0308 42.8171 36.5581 43.6943C35.0746 44.5714 33.5369 45.1778 31.8584 45.6435" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
14
+ <path d="M9.94115 17.0771C10.8183 15.5936 11.8254 14.2508 13.0382 13.0488C14.251 11.836 15.5938 10.8289 17.0665 9.95175C18.5501 9.07462 20.0878 8.4682 21.7662 8.00256C23.3797 7.53692 25.1232 7.33118 26.8125 7.33118C28.5017 7.33118 30.2452 7.53692 31.8587 8.00256C33.4722 8.4682 35.0857 9.07462 36.5584 9.95175C38.0419 10.8289 39.3847 11.836 40.5867 13.0488" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
15
+ <path d="M40.8678 34.9447C40.1423 36.1792 39.2977 37.2946 38.2906 38.3016C37.2835 39.3087 36.1573 40.1534 34.9337 40.8789C33.6992 41.6044 32.4105 42.1134 31.0136 42.5032C29.6708 42.8931 28.209 43.0663 26.812 43.0663C25.4151 43.0663 23.9532 42.8931 22.6105 42.5032C21.2677 42.1134 19.9249 41.6044 18.6904 40.8789C17.4559 40.1534 16.3406 39.3087 15.3335 38.3016C14.3264 37.2946 13.4818 36.1684 12.7562 34.9447" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
16
+ <path d="M31.014 11.1429C32.3568 11.5328 33.6995 12.0417 34.934 12.7673C36.1685 13.4928 37.2839 14.3374 38.291 15.3445C39.298 16.3516 40.1427 17.4778 40.8682 18.7015C41.5938 19.9359 42.1027 21.2246 42.4925 22.6215C42.8824 23.9643 43.0556 25.4262 43.0556 26.8231" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
17
+ <path d="M10.5688 26.8231C10.5688 25.4262 10.742 23.9643 11.1319 22.6216C11.5217 21.2788 12.0307 19.936 12.7562 18.7015C13.4817 17.467 14.3264 16.3517 15.3335 15.3446C16.3405 14.3375 17.4667 13.4929 18.6904 12.7673" stroke="white" stroke-width="1.62432" stroke-linecap="round" />
18
+ <defs>
19
+ <linearGradient id="paint0_linear_9834_265" x1="53.3446" y1="52.8013" x2="0.283412" y2="0.822974" gradientUnits="userSpaceOnUse">
20
+ <stop offset="0.173077" stop-color="#DCBA8E" />
21
+ <stop offset="0.324306" stop-color="#ECDDBA" />
22
+ <stop offset="0.484968" stop-color="#F2E9C9" />
23
+ <stop offset="0.826923" stop-color="#DFC196" />
24
+ </linearGradient>
25
+
26
+
27
+ </defs>
28
+ </svg>
29
+ );
30
+ };
31
+
32
+
33
+
@@ -1,12 +1,93 @@
1
1
  import React from "react";
2
2
  import { cn } from "../../lib/utils";
3
3
 
4
- // Concept icons matching the WELL Building Standard Figma design
5
- // Each icon represents a different concept with active/inactive states
4
+
5
+ export interface ConceptColor {
6
+ solid: string;
7
+ light: string;
8
+ border: string;
9
+ prefix: string;
10
+ contrast?: string;
11
+ }
12
+
13
+ // Define the concept colors matching Figma design
14
+ export const conceptColors = {
15
+ mind: {
16
+ solid: "#0a5161",
17
+ light: "rgba(10,81,97,0.08)",
18
+ border: "rgba(10,81,97,0.16)",
19
+ prefix: "M",
20
+ },
21
+ community: {
22
+ solid: "#0f748a",
23
+ light: "rgba(15,116,138,0.12)",
24
+ border: "rgba(15,116,138,0.24)",
25
+ prefix: "C",
26
+ },
27
+ movement: {
28
+ solid: "#149ebd",
29
+ light: "rgba(20,158,189,0.12)",
30
+ border: "rgba(20,158,189,0.24)",
31
+ prefix: "V",
32
+ },
33
+ water: {
34
+ solid: "#39c9ea",
35
+ light: "rgba(57,201,234,0.12)",
36
+ border: "rgba(57,201,234,0.24)",
37
+ prefix: "W",
38
+ },
39
+ air: {
40
+ solid: "#87dff2",
41
+ light: "rgba(135,223,242,0.12)",
42
+ border: "rgba(135,223,242,0.24)",
43
+ prefix: "A",
44
+ contrast: "#7CCDDF",
45
+ },
46
+ light: {
47
+ solid: "#8aefdb",
48
+ light: "rgba(138,239,219,0.12)",
49
+ border: "rgba(138,239,219,0.24)",
50
+ prefix: "L",
51
+ contrast: "#7FDCC9",
52
+ },
53
+ thermalComfort: {
54
+ solid: "#3eddbf",
55
+ light: "rgba(62,221,191,0.12)",
56
+ border: "rgba(62,221,191,0.24)",
57
+ prefix: "T",
58
+ contrast: "#39CBB0",
59
+ },
60
+ nourishment: {
61
+ solid: "#17aa8d",
62
+ light: "rgba(23,170,141,0.12)",
63
+ border: "rgba(23,170,141,0.24)",
64
+ prefix: "N",
65
+ },
66
+ sound: {
67
+ solid: "#0c705c",
68
+ light: "rgba(12,112,92,0.12)",
69
+ border: "rgba(12,112,92,0.24)",
70
+ prefix: "S",
71
+ },
72
+ materials: {
73
+ solid: "#0a4f41",
74
+ light: "rgba(10,79,65,0.08)",
75
+ border: "rgba(10,79,65,0.16)",
76
+ prefix: "X",
77
+ },
78
+ innovation: {
79
+ solid: "#52545D",
80
+ light: "rgba(82,84,93,0.08)",
81
+ border: "rgba(82,84,93,0.16)",
82
+ prefix: "I",
83
+ },
84
+ } as const;
85
+
6
86
 
7
87
  interface ConceptIconProps {
8
88
  className?: string;
9
89
  active?: boolean;
90
+ outlined?: boolean;
10
91
  }
11
92
 
12
93
  const CIRCLE_BG_PATH =
@@ -15,9 +96,11 @@ const CIRCLE_BG_PATH =
15
96
  export const IconConceptMind: React.FC<ConceptIconProps> = ({
16
97
  className,
17
98
  active = true,
99
+ outlined = false,
18
100
  }) => {
19
- const bgFill = active ? "#0A5161" : "#EFF5FB";
20
- const strokeColor = active ? "white" : "#2E74AD";
101
+ const conceptColor = conceptColors.mind.solid;
102
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
103
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
21
104
 
22
105
  return (
23
106
  <svg
@@ -110,9 +193,11 @@ export const IconConceptMind: React.FC<ConceptIconProps> = ({
110
193
  export const IconConceptCommunity: React.FC<ConceptIconProps> = ({
111
194
  className,
112
195
  active = true,
196
+ outlined = false,
113
197
  }) => {
114
- const bgFill = active ? "#0F748A" : "#EFF5FB";
115
- const strokeColor = active ? "white" : "#2E74AD";
198
+ const conceptColor = conceptColors.community.solid;
199
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
200
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
116
201
 
117
202
  return (
118
203
  <svg
@@ -165,9 +250,11 @@ export const IconConceptCommunity: React.FC<ConceptIconProps> = ({
165
250
  export const IconConceptMovement: React.FC<ConceptIconProps> = ({
166
251
  className,
167
252
  active = true,
253
+ outlined = false,
168
254
  }) => {
169
- const bgFill = active ? "#149EBD" : "#EFF5FB";
170
- const strokeColor = active ? "white" : "#2E74AD";
255
+ const conceptColor = conceptColors.movement.solid;
256
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
257
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
171
258
 
172
259
  return (
173
260
  <svg
@@ -196,9 +283,11 @@ export const IconConceptMovement: React.FC<ConceptIconProps> = ({
196
283
  export const IconConceptWater: React.FC<ConceptIconProps> = ({
197
284
  className,
198
285
  active = true,
286
+ outlined = false,
199
287
  }) => {
200
- const bgFill = active ? "#39C9EA" : "#EFF5FB";
201
- const strokeColor = active ? "white" : "#2E74AD";
288
+ const conceptColor = conceptColors.water.solid;
289
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
290
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
202
291
 
203
292
  return (
204
293
  <svg
@@ -235,9 +324,11 @@ export const IconConceptWater: React.FC<ConceptIconProps> = ({
235
324
  export const IconConceptAir: React.FC<ConceptIconProps> = ({
236
325
  className,
237
326
  active = true,
327
+ outlined = false,
238
328
  }) => {
239
- const bgFill = active ? "#87DFF2" : "#EFF5FB";
240
- const strokeColor = active ? "white" : "#2E74AD";
329
+ const conceptColor = conceptColors.air.contrast || conceptColors.air.solid;
330
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
331
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
241
332
 
242
333
  return (
243
334
  <svg
@@ -282,9 +373,11 @@ export const IconConceptAir: React.FC<ConceptIconProps> = ({
282
373
  export const IconConceptLight: React.FC<ConceptIconProps> = ({
283
374
  className,
284
375
  active = true,
376
+ outlined = false,
285
377
  }) => {
286
- const bgFill = active ? "#8AEFDB" : "#EFF5FB";
287
- const strokeColor = active ? "white" : "#2E74AD";
378
+ const conceptColor = conceptColors.light.contrast || conceptColors.light.solid;
379
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
380
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
288
381
 
289
382
  return (
290
383
  <svg
@@ -377,9 +470,11 @@ export const IconConceptLight: React.FC<ConceptIconProps> = ({
377
470
  export const IconConceptThermalComfort: React.FC<ConceptIconProps> = ({
378
471
  className,
379
472
  active = true,
473
+ outlined = false,
380
474
  }) => {
381
- const bgFill = active ? "#3EDDBF" : "#EFF5FB";
382
- const strokeColor = active ? "white" : "#2E74AD";
475
+ const conceptColor = conceptColors.thermalComfort.contrast || conceptColors.thermalComfort.solid;
476
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
477
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
383
478
 
384
479
  return (
385
480
  <svg
@@ -488,9 +583,11 @@ export const IconConceptThermalComfort: React.FC<ConceptIconProps> = ({
488
583
  export const IconConceptNourishment: React.FC<ConceptIconProps> = ({
489
584
  className,
490
585
  active = true,
586
+ outlined = false,
491
587
  }) => {
492
- const bgFill = active ? "#17AA8D" : "#EFF5FB";
493
- const strokeColor = active ? "white" : "#2E74AD";
588
+ const conceptColor = conceptColors.nourishment.solid;
589
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
590
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
494
591
 
495
592
  return (
496
593
  <svg
@@ -543,9 +640,11 @@ export const IconConceptNourishment: React.FC<ConceptIconProps> = ({
543
640
  export const IconConceptSound: React.FC<ConceptIconProps> = ({
544
641
  className,
545
642
  active = true,
643
+ outlined = false,
546
644
  }) => {
547
- const bgFill = active ? "#0C705C" : "#EFF5FB";
548
- const strokeColor = active ? "white" : "#2E74AD";
645
+ const conceptColor = conceptColors.sound.solid;
646
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
647
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
549
648
 
550
649
  return (
551
650
  <svg
@@ -614,9 +713,11 @@ export const IconConceptSound: React.FC<ConceptIconProps> = ({
614
713
  export const IconConceptMaterials: React.FC<ConceptIconProps> = ({
615
714
  className,
616
715
  active = true,
716
+ outlined = false,
617
717
  }) => {
618
- const bgFill = active ? "#0A4F41" : "#EFF5FB";
619
- const strokeColor = active ? "white" : "#2E74AD";
718
+ const conceptColor = conceptColors.materials.solid;
719
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
720
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
620
721
 
621
722
  return (
622
723
  <svg
@@ -665,3 +766,49 @@ export const IconConceptMaterials: React.FC<ConceptIconProps> = ({
665
766
  </svg>
666
767
  );
667
768
  };
769
+
770
+ export const IconConceptInnovation: React.FC<ConceptIconProps> = ({
771
+ className,
772
+ active = true,
773
+ outlined = false,
774
+ }) => {
775
+ const conceptColor = conceptColors.innovation.solid;
776
+ const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
777
+ const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
778
+
779
+ return (
780
+ <svg
781
+ width="48"
782
+ height="48"
783
+ viewBox="0 0 48 48"
784
+ fill="none"
785
+ xmlns="http://www.w3.org/2000/svg"
786
+ className={cn("size-12", className)}
787
+ >
788
+ <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
789
+ <g id="icon_2">
790
+ <path
791
+ d="M27.8 26.4C28.04 25.2 28.64 24.36 29.6 23.4C30.8 22.32 31.4 20.76 31.4 19.2C31.4 17.2904 30.6414 15.4591 29.2912 14.1088C27.9409 12.7586 26.1096 12 24.2 12C22.2904 12 20.4591 12.7586 19.1088 14.1088C17.7586 15.4591 17 17.2904 17 19.2C17 20.4 17.24 21.84 18.8 23.4C19.64 24.24 20.36 25.2 20.6 26.4"
792
+ stroke={strokeColor}
793
+ strokeWidth="1.5"
794
+ strokeLinecap="round"
795
+ strokeLinejoin="round"
796
+ />
797
+ <path
798
+ d="M20.6006 31.2002H27.8006"
799
+ stroke={strokeColor}
800
+ strokeWidth="1.5"
801
+ strokeLinecap="round"
802
+ strokeLinejoin="round"
803
+ />
804
+ <path
805
+ d="M21.7998 36H26.5998"
806
+ stroke={strokeColor}
807
+ strokeWidth="1.5"
808
+ strokeLinecap="round"
809
+ strokeLinejoin="round"
810
+ />
811
+ </g>
812
+ </svg>
813
+ );
814
+ };
@@ -17,19 +17,19 @@ export const NavLogo: React.FC<NavLogoProps> = ({ dark = false }) => {
17
17
  >
18
18
  <path
19
19
  d="M53.5868 0H55.0485C55.6026 0 56.0325 0.404706 56.0325 0.969412V12.8941H63.016C63.5701 12.8941 64 13.2988 64 13.8447V15.0306C64 15.5765 63.5701 16 63.016 16H53.5868C53.0327 16 52.6028 15.5765 52.6028 15.0306V0.969412C52.6028 0.404706 53.0423 0 53.5868 0Z"
20
- fill={dark ? "currentColor" : "white"}
20
+ fill="currentColor"
21
21
  />
22
22
  <path
23
23
  d="M39.9826 0H41.4442C41.9983 0 42.4282 0.404706 42.4282 0.969412V12.8941H49.4118C49.9659 12.8941 50.3958 13.2988 50.3958 13.8447V15.0306C50.3958 15.5765 49.9659 16 49.4118 16H39.9826C39.4285 16 38.9986 15.5765 38.9986 15.0306V0.969412C38.9986 0.404706 39.4285 0 39.9826 0Z"
24
- fill={dark ? "currentColor" : "white"}
24
+ fill="currentColor"
25
25
  />
26
26
  <path
27
27
  d="M25.4615 0H35.5212C36.0944 0 36.5052 0.404706 36.5052 0.969412V2.15529C36.5052 2.70118 36.0944 3.12471 35.5212 3.12471H27.9072V6.37176H34.222C34.7761 6.37176 35.206 6.77647 35.206 7.32235V8.50824C35.206 9.07294 34.7761 9.47765 34.222 9.47765H27.9072V12.8941H35.6359C36.2091 12.8941 36.6199 13.2988 36.6199 13.8447V15.0306C36.6199 15.5765 36.2091 16 35.6359 16H25.4615C24.9074 16 24.4775 15.5765 24.4775 15.0306V0.969412C24.4775 0.404706 24.9074 0 25.4615 0Z"
28
- fill={dark ? "currentColor" : "white"}
28
+ fill="currentColor"
29
29
  />
30
30
  <path
31
31
  d="M2.26579 0C2.81989 0 3.37399 0.376471 3.53639 0.922353L6.56483 10.4941L9.51684 0.856471C9.66014 0.357647 10.1665 0 10.6728 0H11.6855C12.2109 0 12.7172 0.357647 12.8605 0.856471L15.8412 10.5035L18.8314 0.922353C18.9747 0.376471 19.5288 0 20.102 0H21.6401C22.1942 0 22.4808 0.404706 22.2898 0.922353L17.4653 15.1435C17.2933 15.6141 16.7965 16 16.2616 16H15.2489C14.7426 16 14.2362 15.6424 14.0929 15.1435L11.1887 5.92L8.25578 15.1435C8.11248 15.6424 7.60615 16 7.08071 16H6.08716C5.58083 16 5.0745 15.6235 4.91209 15.1435L0.0589489 0.922353C-0.13212 0.404706 0.154483 0 0.727688 0H2.26579Z"
32
- fill={dark ? "currentColor" : "white"}
32
+ fill="currentColor"
33
33
  />
34
34
  </svg>
35
35
  );
@@ -15,25 +15,25 @@ export const BadgeProductProvider = () => {
15
15
  d="M27.5 0.75C42.2736 0.75 54.25 12.7264 54.25 27.5C54.25 42.2736 42.2736 54.25 27.5 54.25C12.7264 54.25 0.75 42.2736 0.75 27.5C0.75 12.7264 12.7264 0.75 27.5 0.75Z"
16
16
  fill="#16ADCF"
17
17
  stroke="#95E2F4"
18
- stroke-width="1.5"
18
+ strokeWidth="1.5"
19
19
  />
20
20
  <path
21
21
  d="M43.3538 27.4994C43.3538 28.9184 43.1671 30.2945 42.8176 31.6037C42.4554 32.9587 41.9185 34.2417 41.2322 35.4276C40.5361 36.6304 39.687 37.7338 38.7104 38.7097C37.7339 39.6855 36.6311 40.5353 35.4284 41.2314C34.2425 41.9177 32.9594 42.4546 31.6045 42.8168C30.2495 43.179 28.9199 43.353 27.5001 43.353C26.0804 43.353 24.705 43.1663 23.3958 42.8168C22.0408 42.4546 20.7578 41.9177 19.5719 41.2314C18.3691 40.5353 17.2657 39.6862 16.2898 38.7097C15.314 37.7338 14.4642 36.6304 13.7681 35.4276C13.0818 34.2417 12.5449 32.9587 12.1827 31.6037C11.8325 30.2945 11.6465 28.9191 11.6465 27.4994C11.6465 26.0796 11.8332 24.7042 12.1827 23.395C12.5449 22.0401 13.0818 20.757 13.7681 19.5711C14.4642 18.3684 15.3133 17.2649 16.2898 16.2891"
22
22
  stroke="#95E2F4"
23
- stroke-width="1.5"
24
- stroke-miterlimit="10"
23
+ strokeWidth="1.5"
24
+ strokeMiterlimit="10"
25
25
  />
26
26
  <path
27
27
  d="M6.94081 33.0085C6.47154 31.2512 6.2207 29.4051 6.2207 27.4998C6.2207 25.5946 6.47084 23.7478 6.94081 21.9912C7.42699 20.1726 8.1478 18.4506 9.06872 16.8589C10.003 15.2446 11.1431 13.7642 12.4537 12.4537C13.7642 11.1431 15.2446 10.003 16.8589 9.06872C18.4506 8.1478 20.1733 7.42699 21.9912 6.94081C23.7485 6.47154 25.5946 6.2207 27.4998 6.2207"
28
28
  stroke="#95E2F4"
29
- stroke-width="1.5"
30
- stroke-miterlimit="10"
29
+ strokeWidth="1.5"
30
+ strokeMiterlimit="10"
31
31
  />
32
32
  <path
33
33
  d="M45.9304 38.1416C44.9961 39.7559 43.856 41.2362 42.5455 42.5468C41.2349 43.8574 39.7545 44.9974 38.1403 45.9317C36.5486 46.8527 34.8258 47.5735 33.0079 48.0596C31.2506 48.5289 29.4046 48.7798 27.4993 48.7798C25.594 48.7798 23.7473 48.5296 21.9907 48.0596C20.1721 47.5735 18.45 46.8527 16.8583 45.9317C15.2441 44.9974 13.7637 43.8574 12.4531 42.5468"
34
34
  stroke="#95E2F4"
35
- stroke-width="1.5"
36
- stroke-miterlimit="10"
35
+ strokeWidth="1.5"
36
+ strokeMiterlimit="10"
37
37
  />
38
38
  <path
39
39
  d="M16.2893 18.2622C17.3789 18.2622 18.2622 17.3789 18.2622 16.2893C18.2622 15.1997 17.3789 14.3164 16.2893 14.3164C15.1997 14.3164 14.3164 15.1997 14.3164 16.2893C14.3164 17.3789 15.1997 18.2622 16.2893 18.2622Z"
@@ -88,25 +88,25 @@ export const BadgeEnterpriseProvider = () => {
88
88
  d="M27.5 0.75C42.2736 0.75 54.25 12.7264 54.25 27.5C54.25 42.2736 42.2736 54.25 27.5 54.25C12.7264 54.25 0.75 42.2736 0.75 27.5C0.75 12.7264 12.7264 0.75 27.5 0.75Z"
89
89
  fill="#3481C1"
90
90
  stroke="#CBE0F1"
91
- stroke-width="1.5"
91
+ strokeWidth="1.5"
92
92
  />
93
93
  <path
94
94
  d="M43.3538 27.4994C43.3538 28.9184 43.1671 30.2945 42.8176 31.6037C42.4554 32.9587 41.9185 34.2417 41.2322 35.4276C40.5361 36.6304 39.687 37.7338 38.7104 38.7097C37.7339 39.6855 36.6311 40.5353 35.4284 41.2314C34.2425 41.9177 32.9594 42.4546 31.6045 42.8168C30.2495 43.179 28.9199 43.353 27.5001 43.353C26.0804 43.353 24.705 43.1663 23.3958 42.8168C22.0408 42.4546 20.7578 41.9177 19.5719 41.2314C18.3691 40.5353 17.2657 39.6862 16.2898 38.7097C15.314 37.7338 14.4642 36.6304 13.7681 35.4276C13.0818 34.2417 12.5449 32.9587 12.1827 31.6037C11.8325 30.2945 11.6465 28.9191 11.6465 27.4994C11.6465 26.0796 11.8332 24.7042 12.1827 23.395C12.5449 22.0401 13.0818 20.757 13.7681 19.5711C14.4642 18.3684 15.3133 17.2649 16.2898 16.2891"
95
95
  stroke="#CBE0F1"
96
- stroke-width="1.5"
97
- stroke-miterlimit="10"
96
+ strokeWidth="1.5"
97
+ strokeMiterlimit="10"
98
98
  />
99
99
  <path
100
100
  d="M6.94081 33.0085C6.47154 31.2512 6.2207 29.4051 6.2207 27.4998C6.2207 25.5946 6.47084 23.7478 6.94081 21.9912C7.42699 20.1726 8.1478 18.4506 9.06872 16.8589C10.003 15.2446 11.1431 13.7642 12.4537 12.4537C13.7642 11.1431 15.2446 10.003 16.8589 9.06872C18.4506 8.1478 20.1733 7.42699 21.9912 6.94081C23.7485 6.47154 25.5946 6.2207 27.4998 6.2207"
101
101
  stroke="#CBE0F1"
102
- stroke-width="1.5"
103
- stroke-miterlimit="10"
102
+ strokeWidth="1.5"
103
+ strokeMiterlimit="10"
104
104
  />
105
105
  <path
106
106
  d="M45.9304 38.1416C44.9961 39.7559 43.856 41.2362 42.5455 42.5468C41.2349 43.8574 39.7545 44.9974 38.1403 45.9317C36.5486 46.8527 34.8258 47.5735 33.0079 48.0596C31.2506 48.5289 29.4046 48.7798 27.4993 48.7798C25.594 48.7798 23.7473 48.5296 21.9907 48.0596C20.1721 47.5735 18.45 46.8527 16.8583 45.9317C15.2441 44.9974 13.7637 43.8574 12.4531 42.5468"
107
107
  stroke="#CBE0F1"
108
- stroke-width="1.5"
109
- stroke-miterlimit="10"
108
+ strokeWidth="1.5"
109
+ strokeMiterlimit="10"
110
110
  />
111
111
  <path
112
112
  d="M16.2893 18.2622C17.3789 18.2622 18.2622 17.3789 18.2622 16.2893C18.2622 15.1997 17.3789 14.3164 16.2893 14.3164C15.1997 14.3164 14.3164 15.1997 14.3164 16.2893C14.3164 17.3789 15.1997 18.2622 16.2893 18.2622Z"
@@ -161,25 +161,25 @@ export const BadgePerformanceTestingProvider = () => {
161
161
  d="M27.5 0.75C42.2736 0.75 54.25 12.7264 54.25 27.5C54.25 42.2736 42.2736 54.25 27.5 54.25C12.7264 54.25 0.75 42.2736 0.75 27.5C0.75 12.7264 12.7264 0.75 27.5 0.75Z"
162
162
  fill="#ED896F"
163
163
  stroke="#F8DFD8"
164
- stroke-width="1.5"
164
+ strokeWidth="1.5"
165
165
  />
166
166
  <path
167
167
  d="M43.3538 27.4994C43.3538 28.9184 43.1671 30.2945 42.8176 31.6037C42.4554 32.9587 41.9185 34.2417 41.2322 35.4276C40.5361 36.6304 39.687 37.7338 38.7104 38.7097C37.7339 39.6855 36.6311 40.5353 35.4284 41.2314C34.2425 41.9177 32.9594 42.4546 31.6045 42.8168C30.2495 43.179 28.9199 43.353 27.5001 43.353C26.0804 43.353 24.705 43.1663 23.3958 42.8168C22.0408 42.4546 20.7578 41.9177 19.5719 41.2314C18.3691 40.5353 17.2657 39.6862 16.2898 38.7097C15.314 37.7338 14.4642 36.6304 13.7681 35.4276C13.0818 34.2417 12.5449 32.9587 12.1827 31.6037C11.8325 30.2945 11.6465 28.9191 11.6465 27.4994C11.6465 26.0796 11.8332 24.7042 12.1827 23.395C12.5449 22.0401 13.0818 20.757 13.7681 19.5711C14.4642 18.3684 15.3133 17.2649 16.2898 16.2891"
168
168
  stroke="#F8DFD8"
169
- stroke-width="1.5"
170
- stroke-miterlimit="10"
169
+ strokeWidth="1.5"
170
+ strokeMiterlimit="10"
171
171
  />
172
172
  <path
173
173
  d="M6.94081 33.0085C6.47154 31.2512 6.2207 29.4051 6.2207 27.4998C6.2207 25.5946 6.47084 23.7478 6.94081 21.9912C7.42699 20.1726 8.1478 18.4506 9.06872 16.8589C10.003 15.2446 11.1431 13.7642 12.4537 12.4537C13.7642 11.1431 15.2446 10.003 16.8589 9.06872C18.4506 8.1478 20.1733 7.42699 21.9912 6.94081C23.7485 6.47154 25.5946 6.2207 27.4998 6.2207"
174
174
  stroke="#F8DFD8"
175
- stroke-width="1.5"
176
- stroke-miterlimit="10"
175
+ strokeWidth="1.5"
176
+ strokeMiterlimit="10"
177
177
  />
178
178
  <path
179
179
  d="M45.9304 38.1416C44.9961 39.7559 43.856 41.2362 42.5455 42.5468C41.2349 43.8574 39.7545 44.9974 38.1403 45.9317C36.5486 46.8527 34.8258 47.5735 33.0079 48.0596C31.2506 48.5289 29.4046 48.7798 27.4993 48.7798C25.594 48.7798 23.7473 48.5296 21.9907 48.0596C20.1721 47.5735 18.45 46.8527 16.8583 45.9317C15.2441 44.9974 13.7637 43.8574 12.4531 42.5468"
180
180
  stroke="#F8DFD8"
181
- stroke-width="1.5"
182
- stroke-miterlimit="10"
181
+ strokeWidth="1.5"
182
+ strokeMiterlimit="10"
183
183
  />
184
184
  <path
185
185
  d="M16.2893 18.2622C17.3789 18.2622 18.2622 17.3789 18.2622 16.2893C18.2622 15.1997 17.3789 14.3164 16.2893 14.3164C15.1997 14.3164 14.3164 15.1997 14.3164 16.2893C14.3164 17.3789 15.1997 18.2622 16.2893 18.2622Z"
@@ -238,25 +238,25 @@ export const BadgeSurveyProvider = () => {
238
238
  d="M27.5 0.75C42.2736 0.75 54.25 12.7264 54.25 27.5C54.25 42.2736 42.2736 54.25 27.5 54.25C12.7264 54.25 0.75 42.2736 0.75 27.5C0.75 12.7264 12.7264 0.75 27.5 0.75Z"
239
239
  fill="#52545D"
240
240
  stroke="#9FA2AB"
241
- stroke-width="1.5"
241
+ strokeWidth="1.5"
242
242
  />
243
243
  <path
244
244
  d="M43.3538 27.4994C43.3538 28.9184 43.1671 30.2945 42.8176 31.6037C42.4554 32.9587 41.9185 34.2417 41.2322 35.4276C40.5361 36.6304 39.687 37.7338 38.7104 38.7097C37.7339 39.6855 36.6311 40.5353 35.4284 41.2314C34.2425 41.9177 32.9594 42.4546 31.6045 42.8168C30.2495 43.179 28.9199 43.353 27.5001 43.353C26.0804 43.353 24.705 43.1663 23.3958 42.8168C22.0408 42.4546 20.7578 41.9177 19.5719 41.2314C18.3691 40.5353 17.2657 39.6862 16.2898 38.7097C15.314 37.7338 14.4642 36.6304 13.7681 35.4276C13.0818 34.2417 12.5449 32.9587 12.1827 31.6037C11.8325 30.2945 11.6465 28.9191 11.6465 27.4994C11.6465 26.0796 11.8332 24.7042 12.1827 23.395C12.5449 22.0401 13.0818 20.757 13.7681 19.5711C14.4642 18.3684 15.3133 17.2649 16.2898 16.2891"
245
245
  stroke="#9FA2AB"
246
- stroke-width="1.5"
247
- stroke-miterlimit="10"
246
+ strokeWidth="1.5"
247
+ strokeMiterlimit="10"
248
248
  />
249
249
  <path
250
250
  d="M6.94081 33.0085C6.47154 31.2512 6.2207 29.4051 6.2207 27.4998C6.2207 25.5946 6.47084 23.7478 6.94081 21.9912C7.42699 20.1726 8.1478 18.4506 9.06872 16.8589C10.003 15.2446 11.1431 13.7642 12.4537 12.4537C13.7642 11.1431 15.2446 10.003 16.8589 9.06872C18.4506 8.1478 20.1733 7.42699 21.9912 6.94081C23.7485 6.47154 25.5946 6.2207 27.4998 6.2207"
251
251
  stroke="#9FA2AB"
252
- stroke-width="1.5"
253
- stroke-miterlimit="10"
252
+ strokeWidth="1.5"
253
+ strokeMiterlimit="10"
254
254
  />
255
255
  <path
256
256
  d="M45.9304 38.1416C44.9961 39.7559 43.856 41.2362 42.5455 42.5468C41.2349 43.8574 39.7545 44.9974 38.1403 45.9317C36.5486 46.8527 34.8258 47.5735 33.0079 48.0596C31.2506 48.5289 29.4046 48.7798 27.4993 48.7798C25.594 48.7798 23.7473 48.5296 21.9907 48.0596C20.1721 47.5735 18.45 46.8527 16.8583 45.9317C15.2441 44.9974 13.7637 43.8574 12.4531 42.5468"
257
257
  stroke="#9FA2AB"
258
- stroke-width="1.5"
259
- stroke-miterlimit="10"
258
+ strokeWidth="1.5"
259
+ strokeMiterlimit="10"
260
260
  />
261
261
  <path
262
262
  d="M16.2893 18.2622C17.3789 18.2622 18.2622 17.3789 18.2622 16.2893C18.2622 15.1997 17.3789 14.3164 16.2893 14.3164C15.1997 14.3164 14.3164 15.1997 14.3164 16.2893C14.3164 17.3789 15.1997 18.2622 16.2893 18.2622Z"