@energycap/components 0.37.6 → 0.37.7-ECAP-18600-ech-theme-updates.20230912-2220

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.37.6",
+  "version": "0.37.7-ECAP-18600-ech-theme-updates.20230912-2220",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/assets/images/icon-carbonhub.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" viewBox="0 0 64 64">
+  <path fill="#162F3B" d="M47.05 45.248v2.87H34.8v-2.24l6.282-5.932c.665-.635 1.502-1.408 1.758-1.851.275-.478.35-.911.35-1.359 0-.655-.222-1.152-.66-1.502-.444-.35-1.088-.502-1.945-.526-1.103-.025-1.767.344-2.343.62-.577.27-1.054.68-1.443 1.22l-2.747-1.767c.635-.945 1.511-1.683 2.629-2.22 1.117-.532 2.392-.802 3.84-.802 1.206 0 2.27.197 3.175.59.906.394 1.615.956 2.117 1.674.507.72.758 1.57.758 2.546 0 .886-.187 1.713-.556 2.49-.37.779-1.093 1.66-2.161 2.654l-3.747 3.535h6.942Z"/>
+  <path fill="#162F3B" d="M47.05 45.248v2.87H34.8v-2.24l6.282-5.932c.665-.635 1.502-1.408 1.758-1.851.275-.478.35-.911.35-1.359 0-.655-.222-1.152-.66-1.502-.444-.35-1.088-.502-1.945-.526-1.103-.025-1.767.344-2.343.62-.577.27-1.054.68-1.443 1.22l-2.747-1.767c.635-.945 1.511-1.683 2.629-2.22 1.117-.532 2.392-.802 3.84-.802 1.206 0 2.27.197 3.175.59.906.394 1.615.956 2.117 1.674.507.72.758 1.57.758 2.546 0 .886-.187 1.713-.556 2.49-.37.779-1.093 1.66-2.161 2.654l-3.747 3.535h6.942Z"/>
+  <path fill="#4684E8" d="M32 6.4c-7.823 0-14.813 3.52-19.51 9.049l-5.248-3.722C13.11 4.569 22.02 0 32 0c9.98 0 18.89 4.569 24.758 11.727l-5.248 3.722C46.814 9.92 39.823 6.4 32 6.4Z"/>
+  <path fill="#4684E8" d="M32 6.4c-7.823 0-14.813 3.52-19.51 9.049l-5.248-3.722C13.11 4.569 22.02 0 32 0c9.98 0 18.89 4.569 24.758 11.727l-5.248 3.722C46.814 9.92 39.823 6.4 32 6.4Z"/>
+  <path fill="#162F3B" d="M32 64c9.98 0 18.89-4.569 24.758-11.727l-5.248-3.722C46.813 54.08 39.823 57.6 32 57.6 17.86 57.6 6.4 46.14 6.4 32c0-4.017.95-7.798 2.6-11.18l-5.298-3.757A31.804 31.804 0 0 0 0 32c0 17.674 14.326 32 32 32Z"/>
+  <path fill="#162F3B" d="M32 64c9.98 0 18.89-4.569 24.758-11.727l-5.248-3.722C46.813 54.08 39.823 57.6 32 57.6 17.86 57.6 6.4 46.14 6.4 32c0-4.017.95-7.798 2.6-11.18l-5.298-3.757A31.804 31.804 0 0 0 0 32c0 17.674 14.326 32 32 32Z"/>
+  <path fill="#4684E8" d="M24.27 40.714h-.004a11.452 11.452 0 0 1-3.289-4.648 11.397 11.397 0 0 1 0-8.206 11.515 11.515 0 0 1 3.289-4.653h.005c4.106-3.613 10.722-3.613 14.823 0h.005a11.45 11.45 0 0 1 3.289 4.648c.074.187.118.384.177.57 1.073.129 2.077.38 2.973.779a8.118 8.118 0 0 1 2.748 1.9 15.976 15.976 0 0 0-1.64-6.267l-.015.01a16.201 16.201 0 0 0-3.406-4.574c-6.213-6.04-16.906-6.04-23.12 0a16.277 16.277 0 0 0-3.401 4.579l-.015-.01c-2.225 4.43-2.225 9.816 0 14.247l.015-.01a16.348 16.348 0 0 0 3.402 4.574c2.998 2.914 7.035 4.411 11.111 4.514v-4.77c-2.53-.094-5.026-.975-6.966-2.683"/>
+  <path fill="#4684E8" d="M24.27 40.714h-.004a11.452 11.452 0 0 1-3.289-4.648 11.397 11.397 0 0 1 0-8.206 11.515 11.515 0 0 1 3.289-4.653h.005c4.106-3.613 10.722-3.613 14.823 0h.005a11.45 11.45 0 0 1 3.289 4.648c.074.187.118.384.177.57 1.073.129 2.077.38 2.973.779a8.118 8.118 0 0 1 2.748 1.9 15.976 15.976 0 0 0-1.64-6.267l-.015.01a16.201 16.201 0 0 0-3.406-4.574c-6.213-6.04-16.906-6.04-23.12 0a16.277 16.277 0 0 0-3.401 4.579l-.015-.01c-2.225 4.43-2.225 9.816 0 14.247l.015-.01a16.348 16.348 0 0 0 3.402 4.574c2.998 2.914 7.035 4.411 11.111 4.514v-4.77c-2.53-.094-5.026-.975-6.966-2.683"/>
+</svg>

package/src/assets/images/icon-eum.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" viewBox="0 0 64 64">
+  <path fill="#162F3B" d="M32.012 64c9.987 0 18.902-4.577 24.766-11.727l-5.244-3.719c-4.696 5.53-11.68 9.058-19.522 9.058-14.135-.024-25.6-11.49-25.6-25.624 0-4.004.953-7.794 2.598-11.18l-5.292-3.765A31.907 31.907 0 0 0 0 31.988C0 49.675 14.35 64 32.012 64Z"/>
+  <path fill="#9069B5" d="M32.012 6.388c7.818 0 14.826 3.528 19.522 9.058l5.244-3.719C50.914 4.577 41.999 0 32.012 0 22.025 0 13.134 4.553 7.246 11.704l5.244 3.718c4.72-5.53 11.704-9.034 19.522-9.034Zm8.033 25.052V18.282H16.566v27.412h5.268V23.526h12.943v22.168h5.268v-9.01h7.675v9.01h5.268V31.44H40.045Z"/>
+  <path fill="#9069B5" d="M30.94 37.971h-5.268v7.723h5.267V37.97Z"/>
+</svg>

package/src/assets/images/icon-ucp.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" viewBox="0 0 64 64">
+  <g clip-path="url(#a)">
+    <path fill="#E9A914" d="M35.406-.246h-7.828v34.211h7.828V-.246Z"/>
+    <path fill="#162F3B" d="m52.436 6.667-.407-.305-4.22 5.948.306.254c5.591 4.778 8.794 11.692 8.794 19.012 0 13.725-11.184 24.96-24.96 24.96-3.761 0-7.37-.865-10.827-2.491l-4.27 5.998h.05a32.304 32.304 0 0 0 15.047 3.71c17.742 0 32.23-14.436 32.23-32.228.05-9.607-4.27-18.707-11.743-24.858Z"/>
+    <path fill="#E9A914" d="M7.092 31.576c0-7.32 3.202-14.234 8.794-19.012l.356-.254-4.22-5.948-.406.305C4.143 12.818-.178 21.917-.178 31.576c0 9.658 4.321 18.758 11.794 24.909l4.219-5.999c-5.54-4.727-8.743-11.59-8.743-18.91Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h64v64H0z"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/images/icon-wattics.svg

@@ -1,3 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
-  <path fill="#6EBB45" d="M32 16a16.01 16.01 0 0 0-1.166-6.004h-4.22l-5.9 15.896a1.33 1.33 0 0 1-.292.462c-.111.11-.235.202-.372.274l-.078.039c-.338.143-.703.13-1.016 0a1.366 1.366 0 0 1-.722-.73L13.42 14.216l-2.98 7.104a1.317 1.317 0 0 1-.769.73c-.338.13-.703.104-1.016-.033a1.355 1.355 0 0 1-.696-.749L6.35 16.931H0C.482 25.331 7.45 32 15.987 32 24.524 32 32 24.837 32 16Zm-2.383-8.394C26.797 3.041 21.75 0 15.987 0 7.639 0 .781 6.382.039 14.535H7.1c.28.006.546.098.754.24.222.15.391.372.489.632l.931 2.494 2.937-6.98c.137-.339.404-.58.723-.717.319-.13.684-.143 1.022 0l.052.033a1.283 1.283 0 0 1 .658.697l4.747 11.572 5.203-14.027a1.31 1.31 0 0 1 .489-.639c.228-.15.488-.24.762-.24h3.744l.007.006Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" viewBox="0 0 64 64">
+  <path fill="#162F3B" d="M32.012 64c9.987 0 18.902-4.577 24.766-11.727l-5.244-3.719c-4.696 5.53-11.68 9.058-19.522 9.058-14.135-.024-25.6-11.49-25.6-25.624 0-4.004.953-7.794 2.598-11.18l-5.292-3.765A31.907 31.907 0 0 0 0 31.988C0 49.675 14.35 64 32.012 64Z"/>
+  <path fill="#51B51C" d="M32.012 6.388c7.818 0 14.826 3.528 19.522 9.058l5.244-3.719C50.914 4.577 41.999 0 32.012 0 22.025 0 13.134 4.553 7.246 11.704l5.244 3.718c4.72-5.53 11.704-9.034 19.522-9.034Z"/>
+  <path fill="#51B51C" d="M55.18 26.267H44.718l-3.027 5.936-9.845-19.308-12.466 26.65h-4.791l-2.36 5.267H23.05l9.415-19.593 9.034 18.973 6.364-12.657h4.934l2.384-5.268Z"/>
 </svg>

package/src/assets/images/icon.svg

@@ -1,9 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
-  <g fill="none" fill-rule="evenodd">
-    <path fill="#A0AD39" fill-rule="nonzero" d="M34.93,32.25 L34.93,37.25 L15.21,37.25 L15.21,32.25 L34.93,32.25 Z M28.45,22.48 L28.45,27.48 L15.21,27.48 L15.21,22.48 L28.45,22.48 Z M34.93,12.71 L34.93,17.71 L15.21,17.71 L15.21,12.71 L34.93,12.71 Z"/>
-    <g fill-rule="nonzero">
-      <path fill="#A0AD39" d="M24.99,5 C31.1,5 36.56,7.75 40.23,12.07 L44.33,9.16 C39.75,3.57 32.78,0 24.99,0 C17.2,0 10.23,3.57 5.65,9.16 L9.75,12.07 C13.42,7.75 18.88,5 24.99,5 Z"/>
-      <path fill="#17303B" d="M40.24,37.93 C36.57,42.25 31.11,45 25,45 C18.89,45 13.43,42.25 9.76,37.93 L9.78,37.92 C6.82,34.43 5,29.94 5,25 C5,21.86 5.74,18.91 7.03,16.26 L2.89,13.33 C1.05,16.81 0,20.78 0,25 C0,31.01 2.13,36.52 5.66,40.83 L5.66,40.83 C10.24,46.42 17.21,49.99 25,49.99 C32.79,49.99 39.76,46.42 44.34,40.83 L40.24,37.93 Z"/>
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32">
+  <g clip-path="url(#a)">
+    <path fill="#1A1A23" d="M22.373 8.351H10v3.138h12.373V8.35Zm0 12.261H10v3.137h12.373v-3.137Zm-4.066-6.13H10v3.137h8.307v-3.137ZM16.136 3.514c3.834 0 7.26 1.725 9.563 4.436l2.572-1.826A15.657 15.657 0 0 0 16.136.376c-4.888 0-9.261 2.24-12.135 5.748L6.574 7.95c2.303-2.71 5.729-4.436 9.562-4.436Z"/>
+    <path fill="#162F3B" d="M25.705 24.176c-2.303 2.71-5.729 4.436-9.563 4.436-3.833 0-7.26-1.726-9.562-4.436l.013-.007c-1.858-2.19-3-5.007-3-8.106 0-1.97.465-3.821 1.274-5.484L2.27 8.74a15.62 15.62 0 0 0-1.813 7.323 15.63 15.63 0 0 0 3.551 9.932 15.657 15.657 0 0 0 12.135 5.748c4.888 0 9.262-2.24 12.135-5.748l-2.572-1.82Z"/>
   </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M.13 0h28.235v32H.13z"/>
+    </clipPath>
+  </defs>
 </svg>

package/src/assets/images/logo.svg

@@ -1,15 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="379" height="44" viewBox="0 0 379 44">
-  <g fill="none">
-    <path fill="#18303B" d="M370.42 5.04C367.23 2.38 362.82 1.03 357.29 1.03L340.45 1.03 340.45 43.92 347.43 43.92 347.43 31.23 357.29 31.23C362.81 31.23 367.23 29.88 370.42 27.22 373.64 24.54 375.27 20.81 375.27 16.12 375.26 11.45 373.63 7.72 370.42 5.04zM368.28 16.13C368.28 19.03 367.36 21.19 365.47 22.72 363.57 24.25 360.76 25.03 357.1 25.03L347.42 25.03 347.42 7.23 357.1 7.23C360.76 7.23 363.57 8.01 365.47 9.54 367.37 11.07 368.28 13.23 368.28 16.13zM315.59 1.03L309.02 1.03 289.6 43.92 296.86 43.92 301.47 33.45 323.09 33.45 327.7 43.92 335.08 43.92 315.59 1.03zM320.56 27.66L304.01 27.66 312.29 8.86 320.56 27.66z"/>
-    <g transform="translate(248.76)">
-      <path fill="#18303B" d="M22.5,37.48 C13.95,37.48 7,30.52 7,21.96 C7,20.01 7.38,18.15 8.04,16.42 L2.28,12.34 C0.82,15.25 0,18.51 0,21.96 C0,34.07 10.09,43.92 22.5,43.92 C28.56,43.92 34.06,41.57 38.11,37.75 L32.51,33.78 C29.81,36.08 26.32,37.48 22.5,37.48 Z"/>
-      <path fill="#A2AF3A" d="M22.5,6.44 C27.39,6.44 31.75,8.72 34.59,12.27 L40.13,8.34 C36.01,3.26 29.64,0 22.5,0 C15.36,0 8.99,3.27 4.87,8.34 L10.41,12.27 C13.25,8.72 17.61,6.44 22.5,6.44 Z"/>
-    </g>
-    <polygon fill="#18303B" points="242.15 1.03 228.96 22.66 215.83 1.03 208.26 1.03 225.29 28.96 225.29 43.92 232.21 43.92 232.21 29.08 249.23 1.03"/>
-    <path fill="#18303B" d="M186.18 21.31L186.18 27.73 197.32 27.73 197.32 35.15C194.67 36.79 191.55 37.61 188.02 37.61 184.97 37.61 182.19 36.93 179.75 35.58 177.31 34.24 175.38 32.36 174 30 172.62 27.64 171.92 24.96 171.92 22.04 171.92 19.08 172.62 16.38 174 14.02 175.38 11.66 177.31 9.79 179.75 8.47 182.19 7.14 184.99 6.47 188.08 6.47 192.66 6.47 196.63 8.05 199.86 11.17L200.21 11.51 204.59 7.13 204.27 6.78C202.31 4.62 199.91 2.96 197.13 1.85 194.36.74 191.23.17 187.84.17 183.52.17 179.57 1.11 176.11 2.98 172.64 4.85 169.88 7.48 167.92 10.81 165.95 14.14 164.95 17.92 164.95 22.05 164.95 26.18 165.95 29.96 167.92 33.26 169.89 36.57 172.63 39.2 176.08 41.08 179.52 42.96 183.44 43.92 187.73 43.92 190.76 43.92 193.7 43.45 196.49 42.52 199.28 41.59 201.77 40.23 203.88 38.49L204.06 38.34 204.06 21.31 186.18 21.31 186.18 21.31zM150.09 29.6C152.84 28.52 155 26.87 156.54 24.68 158.19 22.33 159.03 19.46 159.03 16.14 159.03 11.46 157.4 7.73 154.18 5.04 150.99 2.38 146.58 1.03 141.05 1.03L124.21 1.03 124.21 43.92 131.19 43.92 131.19 31.17 141.05 31.17C141.65 31.17 142.45 31.14 143.44 31.07L152.46 43.92 160.2 43.92 150.09 29.6zM131.19 7.23L140.87 7.23C144.52 7.23 147.34 8.01 149.24 9.54 151.13 11.07 152.05 13.23 152.05 16.13 152.05 19.03 151.13 21.2 149.24 22.75 147.34 24.3 144.53 25.09 140.88 25.09L131.2 25.09 131.2 7.23 131.19 7.23 131.19 7.23z"/>
-    <path fill="#A2AF3A" d="M116.71,37.44 L116.71,43.92 L83.48,43.92 L83.48,37.44 L116.71,37.44 Z M105.02,19.22 L105.02,25.7 L83.48,25.7 L83.48,19.22 L105.02,19.22 Z M115.87,1.01 L115.87,7.49 L83.48,7.49 L83.48,1.01 L115.87,1.01 Z"/>
-    <polygon fill="#18303B" points="68.97 1.03 68.97 31.36 44.57 1.03 38.92 1.03 38.92 43.92 45.9 43.92 45.9 13.59 70.31 43.92 75.95 43.92 75.95 1.03"/>
-    <polygon fill="#18303B" points="6.97 37.72 6.97 25.53 27.98 25.53 27.98 19.45 6.97 19.45 6.97 7.23 30.56 7.23 30.56 1.03 0 1.03 0 43.92 31.39 43.92 31.39 37.72"/>
-    <path fill="#18303B" d="M376.07,35.51 C376.75,35.9 377.29,36.44 377.68,37.12 C378.07,37.8 378.27,38.56 378.27,39.4 C378.27,40.23 378.07,41 377.67,41.69 C377.27,42.38 376.73,42.93 376.04,43.33 C375.35,43.73 374.59,43.93 373.76,43.93 C372.93,43.93 372.17,43.73 371.48,43.33 C370.8,42.93 370.26,42.39 369.86,41.7 C369.46,41.01 369.27,40.26 369.27,39.43 C369.27,38.61 369.47,37.85 369.86,37.16 C370.26,36.47 370.8,35.93 371.49,35.53 C372.18,35.13 372.94,34.93 373.78,34.93 C374.62,34.93 375.39,35.12 376.07,35.51 Z M375.75,42.83 C376.34,42.48 376.81,42.01 377.16,41.4 C377.5,40.8 377.68,40.13 377.68,39.4 C377.68,38.67 377.51,38.01 377.18,37.41 C376.84,36.82 376.38,36.35 375.79,36.01 C375.2,35.67 374.53,35.5 373.8,35.5 C373.07,35.5 372.4,35.67 371.81,36.02 C371.21,36.37 370.74,36.84 370.4,37.44 C370.06,38.04 369.89,38.7 369.89,39.42 C369.89,40.14 370.06,40.8 370.4,41.4 C370.74,42 371.21,42.47 371.8,42.82 C372.39,43.17 373.05,43.34 373.78,43.34 C374.49,43.35 375.15,43.17 375.75,42.83 Z M375.78,39.59 C375.59,39.86 375.33,40.06 374.99,40.18 L376.15,41.98 L375.27,41.98 L374.21,40.35 L373.99,40.35 L372.82,40.35 L372.82,41.98 L371.95,41.98 L371.95,36.88 L373.99,36.88 C374.63,36.88 375.13,37.04 375.5,37.35 C375.87,37.66 376.05,38.09 376.05,38.61 C376.07,38.99 375.97,39.32 375.78,39.59 Z M374.89,39.36 C375.12,39.18 375.23,38.93 375.23,38.61 C375.23,38.29 375.12,38.04 374.89,37.86 C374.67,37.69 374.35,37.6 373.94,37.6 L372.82,37.6 L372.82,39.63 L373.94,39.63 C374.34,39.63 374.66,39.54 374.89,39.36 Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="465" height="54" fill="none" viewBox="0 0 465 54">
+  <g clip-path="url(#a)">
+    <path fill="#100F0D" d="M8.68 46.268V31.315h25.77v-7.457H8.68V8.868h28.936V1.263H.13v52.61h38.504v-7.605H8.68ZM84.73 1.264v37.203L54.8 1.264h-6.93v52.61h8.563V16.67l29.941 37.204h6.919V1.264H84.73Zm76.322 7.605h11.874c4.477 0 7.936.956 10.266 2.833 2.319 1.877 3.447 4.527 3.447 8.084 0 3.557-1.128 6.219-3.447 8.12-2.33 1.902-5.777 2.87-10.254 2.87h-11.874V8.87h-.012Zm23.183 27.44c3.373-1.325 6.023-3.35 7.912-6.035 2.024-2.883 3.054-6.404 3.054-10.476 0-5.74-1.999-10.316-5.949-13.615-3.913-3.263-9.322-4.92-16.106-4.92H152.49v52.61h8.562V38.235h12.094c.736 0 1.718-.036 2.932-.123l11.064 15.763h9.494L184.235 36.31ZM297.159 1.264l-16.18 26.532-16.105-26.532h-9.286l20.89 34.26v18.35h8.488V35.67l20.877-34.407h-8.684Zm96.181 32.665h-20.3l10.156-23.06 10.144 23.06Zm-6.098-32.665h-8.057l-23.823 52.61h8.906l5.656-12.843h26.517l5.656 12.843h9.054l-23.909-52.61Zm64.631 18.522c0 3.557-1.127 6.207-3.447 8.083-2.33 1.877-5.777 2.834-10.265 2.834h-11.876V8.869h11.876c4.488 0 7.935.956 10.265 2.834 2.332 1.876 3.447 4.526 3.447 8.083ZM454.5 6.183c-3.915-3.263-9.324-4.92-16.107-4.92h-20.657v52.61h8.561V38.309h12.096c6.771 0 12.192-1.656 16.107-4.919 3.949-3.287 5.947-7.863 5.947-13.615-.012-5.729-2.01-10.304-5.947-13.591ZM228.504 26.14v7.875h13.665v9.101c-3.251 2.012-7.078 3.018-11.408 3.018-3.741 0-7.151-.834-10.144-2.49-2.993-1.644-5.361-3.95-7.053-6.845-1.693-2.895-2.551-6.182-2.551-9.764 0-3.63.858-6.942 2.551-9.837 1.692-2.895 4.06-5.189 7.053-6.808 2.993-1.632 6.427-2.453 10.218-2.453 5.618 0 10.488 1.938 14.45 5.765l.429.417 5.372-5.373-.392-.429c-2.404-2.65-5.348-4.686-8.758-6.047C238.538.908 234.699.21 230.541.21c-5.3 0-10.145 1.152-14.389 3.446-4.256 2.294-7.642 5.52-10.046 9.604-2.417 4.085-3.643 8.722-3.643 13.788 0 5.066 1.226 9.702 3.643 13.75 2.416 4.06 5.777 7.286 10.009 9.593 4.22 2.306 9.028 3.483 14.291 3.483 3.716 0 7.322-.577 10.745-1.717 3.422-1.14 6.476-2.81 9.065-4.944l.221-.184V26.14h-21.933ZM102.529 1.239h39.731v7.949h-39.731V1.239Zm0 44.686h40.761v7.95h-40.761v-7.95Zm0-22.349h26.422v7.949h-26.422v-7.949Zm230.337 22.398c-10.488 0-19.013-8.537-19.013-19.037 0-2.392.465-4.673 1.276-6.795l-7.066-5.005a26.225 26.225 0 0 0-2.796 11.8c0 14.855 12.378 26.937 27.599 26.937 7.433 0 14.18-2.883 19.148-7.568l-6.87-4.87c-3.311 2.821-7.592 4.538-12.278 4.538Zm0-38.074c5.999 0 11.346 2.796 14.83 7.151l6.796-4.82C349.437 3.998 341.625 0 332.866 0c-8.757 0-16.572 4.01-21.627 10.23l6.796 4.82c3.485-4.354 8.834-7.151 14.831-7.151Zm127.113 40.376c.276-.219.412-.526.412-.922s-.136-.701-.412-.916c-.275-.213-.666-.32-1.164-.32h-1.379v2.486h1.379c.498 0 .889-.109 1.164-.328Zm1.103.281a1.902 1.902 0 0 1-.969.72l1.421 2.204h-1.078l-1.297-2h-1.707v2h-1.063v-6.254h2.503c.781 0 1.4.193 1.852.579.453.385.682.901.682 1.548 0 .468-.118.87-.344 1.203Zm-.05 3.972a4.664 4.664 0 0 0 1.729-1.751 4.85 4.85 0 0 0 .635-2.455c0-.897-.208-1.71-.62-2.44a4.498 4.498 0 0 0-1.703-1.72c-.725-.416-1.54-.625-2.447-.625-.895 0-1.713.214-2.447.641a4.652 4.652 0 0 0-1.729 1.744 4.862 4.862 0 0 0-.625 2.431c0 .886.21 1.697.625 2.432a4.672 4.672 0 0 0 1.719 1.743c.731.428 1.54.641 2.426.641.895 0 1.71-.213 2.437-.641Zm.4-8.976a5.236 5.236 0 0 1 1.979 1.979c.48.839.719 1.77.719 2.79a5.525 5.525 0 0 1-.734 2.807 5.44 5.44 0 0 1-2.001 2.01 5.479 5.479 0 0 1-2.8.735c-1.022 0-1.952-.245-2.791-.735a5.374 5.374 0 0 1-1.986-2.002 5.479 5.479 0 0 1-.727-2.783 5.48 5.48 0 0 1 .727-2.783 5.374 5.374 0 0 1 1.992-2.002c.846-.49 1.784-.735 2.816-.735 1.031 0 1.967.24 2.806.72Z"/>
   </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M.13 0h464v53.874H.13z"/>
+    </clipPath>
+  </defs>
 </svg>

package/src/styles/_colors.scss

@@ -12,67 +12,85 @@ $gray-6: rgb(73, 89, 99);
 $gray-7: rgb(53, 71, 81);
 $gray-8: rgb(22, 47, 59);
 
-$red-1: rgb(237, 128, 130);
-$red-2: rgb(235, 102, 105);
-$red-3: rgb(230, 76, 77);
-$red-4: rgb(227, 52, 54);
-$red-5: rgb(205, 29, 32);
-$red-6: rgb(179, 21, 24);
-$red-7: rgb(158, 12, 14);
-$red-8: rgb(138, 17, 12);
+$red-1: rgb(255, 225, 231);
+$red-2: rgb(255, 178, 192);
+$red-3: rgb(255, 138, 159);
+$red-4: rgb(254, 88, 117);
+$red-5: rgb(237, 56, 88);
+$red-6: rgb(219, 11, 48);
+$red-7: rgb(197, 1, 36);
+$red-8: rgb(150, 0, 27);
 
-$orange-1: rgb(251, 180, 138);
-$orange-2: rgb(250, 159, 105);
-$orange-3: rgb(250, 141, 76);
-$orange-4: rgb(250, 123, 46);
+$orange-1: rgb(253, 195, 161);
+$orange-2: rgb(255, 181, 137);
+$orange-3: rgb(255, 147, 83);
+$orange-4: rgb(255, 131, 57);
 $orange-5: rgb(249, 106, 21);
-$orange-6: rgb(237, 90, 0);
-$orange-7: rgb(223, 81, 0);
-$orange-8: rgb(199, 73, 0);
+$orange-6: rgb(235, 91, 6);
+$orange-7: rgb(214, 80, 2);
+$orange-8: rgb(194, 72, 0);
 
-$yellow-1: rgb(253, 239, 150);
-$yellow-2: rgb(255, 236, 116);
-$yellow-3: rgb(255, 233, 89);
-$yellow-4: rgb(255, 228, 51);
-$yellow-5: rgb(245, 212, 0);
-$yellow-6: rgb(236, 192, 0);
-$yellow-7: rgb(219, 170, 13);
-$yellow-8: rgb(193, 147, 9);
+$yellow-1: rgb(255, 249, 195);
+$yellow-2: rgb(255, 239, 155);
+$yellow-3: rgb(255, 230, 100);
+$yellow-4: rgb(255, 222, 50);
+$yellow-5: rgb(245, 207, 8);
+$yellow-6: rgb(232, 182, 4);
+$yellow-7: rgb(214, 150, 4);
+$yellow-8: rgb(178, 124, 0);
 
-$green-1: rgb(229, 234, 163);
-$green-2: rgb(219, 226, 128);
-$green-3: rgb(207, 216, 86);
-$green-4: rgb(193, 205, 35);
-$green-5: rgb(163, 175, 40);
-$green-6: rgb(132, 145, 31);
-$green-7: rgb(108, 120, 21);
-$green-8: rgb(94, 105, 0);
+$green-1: rgb(227, 251, 214);
+$green-2: rgb(194, 236, 172);
+$green-3: rgb(153, 216, 120);
+$green-4: rgb(99, 184, 54);
+$green-5: rgb(43, 154, 3);
+$green-6: rgb(39, 134, 4);
+$green-7: rgb(40, 111, 15);
+$green-8: rgb(24, 86, 2);
 
-$blue-1: rgb(130, 192, 211);
-$blue-2: rgb(88, 175, 199);
-$blue-3: rgb(45, 154, 184);
-$blue-4: rgb(0, 132, 169);
-$blue-5: rgb(4, 114, 147);
-$blue-6: rgb(0, 95, 122);
-$blue-7: rgb(0, 78, 102);
-$blue-8: rgb(10, 64, 82);
+$blue-1: rgb(185, 237, 252);
+$blue-2: rgb(172, 228, 243);
+$blue-3: rgb(118, 206, 230);
+$blue-4: rgb(64, 183, 216);
+$blue-5: rgb(42, 163, 196);
+$blue-6: rgb(36, 143, 172);
+$blue-7: rgb(26, 111, 135);
+$blue-8: rgb(10, 74, 92);
 
-$purple-1: rgb(174, 152, 192);
-$purple-2: rgb(158, 130, 180);
-$purple-3: rgb(144, 110, 168);
-$purple-4: rgb(126, 87, 155);
-$purple-5: rgb(113, 69, 144);
-$purple-6: rgb(97, 49, 131);
-$purple-7: rgb(78, 23, 114);
-$purple-8: rgb(58, 0, 100);
+$purple-1: rgb(237, 220, 255);
+$purple-2: rgb(215, 180, 253);
+$purple-3: rgb(188, 140, 239);
+$purple-4: rgb(165, 114, 220);
+$purple-5: rgb(147, 85, 214);
+$purple-6: rgb(118, 48, 193);
+$purple-7: rgb(95, 20, 175);
+$purple-8: rgb(75, 7, 147);
 
-$brown-1: rgb(228, 211, 194);
-$brown-2: rgb(212, 188, 162);
-$brown-3: rgb(198, 166, 134);
-$brown-4: rgb(186, 148, 111);
-$brown-5: rgb(175, 130, 88);
-$brown-6: rgb(165, 115, 67);
-$brown-7: rgb(155, 101, 49);
-$brown-8: rgb(142, 86, 34);
+$cobalt-1: rgb(218, 229, 251);
+$cobalt-2: rgb(153, 185, 251);
+$cobalt-3: rgb(109, 164, 254);
+$cobalt-4: rgb(70, 132, 232);
+$cobalt-5: rgb(66, 117, 216);
+$cobalt-6: rgb(45, 92, 184);
+$cobalt-7: rgb(22, 63, 140);
+$cobalt-8: rgb(6, 47, 125);
+
+$aqua-1: rgb(219, 255, 246);
+$aqua-2: rgb(196, 250, 237);
+$aqua-3: rgb(121, 232, 205);
+$aqua-4: rgb(55, 213, 175);
+$aqua-5: rgb(45, 184, 151);
+$aqua-6: rgb(34, 153, 125);
+$aqua-7: rgb(30, 116, 96);
+$aqua-8: rgb(28, 89, 75);
+
+$pink-1: rgb(255, 223, 244);
+$pink-2: rgb(255, 194, 235);
+$pink-3: rgb(232, 127, 197);
+$pink-4: rgb(228, 85, 180);
+$pink-5: rgb(207, 61, 158);
+$pink-6: rgb(185, 13, 127);
+$pink-7: rgb(182, 10, 124);
+$pink-8: rgb(151, 3, 101);
 
 $ec-color-accrual: rgb(35, 195, 205);

package/src/styles/_global-variables.scss

@@ -7,29 +7,6 @@
 // and default border color should be --ec-border-color
 
 :root {
-  // Colors
-  --ec-color-primary-dark: rgb(26, 26, 35);
-  --ec-color-primary-light: rgb(255, 255, 255);
-  --ec-color-secondary-dark: rgba(26, 26, 35, .66);
-  --ec-color-secondary-light: rgba(255, 255, 255, .6);
-  --ec-color-hint-dark: rgba(26, 26, 35, .38);
-  --ec-color-hint-light: rgba(255, 255, 255, .38);
-  --ec-color-disabled-dark: var(--ec-color-hint-dark);
-  --ec-color-shadow: rgba(26, 26, 35, .1);
-  --ec-color-shadow-overlay: rgba(26, 26, 35, .2);
-  --ec-color-interactive: rgb(0, 132, 169);
-  --ec-color-interactive-light: rgb(130, 192, 211);
-  --ec-color-info: rgba(0, 132, 169, .5);
-  // Deprecated - use ec-color-success
-  --ec-color-good: rgb(97, 153, 16);
-  --ec-color-success: rgb(60, 118, 61);
-  --ec-color-caution: rgb(255, 228, 51);
-  // Deprecated - use ec-color-danger
-  --ec-color-bad: rgb(250, 123, 46);
-  --ec-color-danger: rgb(227, 52, 54);
-  --ec-color-accent: rgb(111, 28, 138);
-  --ec-color-control-invalid: var(--ec-color-caution);
-
   // Variables for the EnergyCAP brand color pallette
   // Colors go from lighter (1) to darker (8).
   --ec-color-black: #{$black}; 
@@ -98,15 +75,67 @@
   --ec-color-purple-7: #{$purple-7};
   --ec-color-purple-8: #{$purple-8};
 
-  --ec-color-brown-1: #{$brown-1};
-  --ec-color-brown-2: #{$brown-2};
-  --ec-color-brown-3: #{$brown-3};
-  --ec-color-brown-4: #{$brown-4};
-  --ec-color-brown-5: #{$brown-5};
-  --ec-color-brown-6: #{$brown-6};
-  --ec-color-brown-7: #{$brown-7};
-  --ec-color-brown-8: #{$brown-8};
+  --ec-color-cobalt-1: #{$cobalt-1};
+  --ec-color-cobalt-2: #{$cobalt-2};
+  --ec-color-cobalt-3: #{$cobalt-3};
+  --ec-color-cobalt-4: #{$cobalt-4};
+  --ec-color-cobalt-5: #{$cobalt-5};
+  --ec-color-cobalt-6: #{$cobalt-6};
+  --ec-color-cobalt-7: #{$cobalt-7};
+  --ec-color-cobalt-8: #{$cobalt-8};
+
+  --ec-color-aqua-1: #{$aqua-1};
+  --ec-color-aqua-2: #{$aqua-2};
+  --ec-color-aqua-3: #{$aqua-3};
+  --ec-color-aqua-4: #{$aqua-4};
+  --ec-color-aqua-5: #{$aqua-5};
+  --ec-color-aqua-6: #{$aqua-6};
+  --ec-color-aqua-7: #{$aqua-7};
+  --ec-color-aqua-8: #{$aqua-8};
+
+  --ec-color-pink-1: #{$pink-1};
+  --ec-color-pink-2: #{$pink-2};
+  --ec-color-pink-3: #{$pink-3};
+  --ec-color-pink-4: #{$pink-4};
+  --ec-color-pink-5: #{$pink-5};
+  --ec-color-pink-6: #{$pink-6};
+  --ec-color-pink-7: #{$pink-7};
+  --ec-color-pink-8: #{$pink-8};
+
+  --ec-color-brand-green: rgb(216, 234, 83);
+  --ec-color-brand-black: rgb(22, 47, 59);
 
+  // Colors
+  --ec-color-primary-dark: var(--ec-color-black);
+  --ec-color-primary-light: var(--ec-color-white);
+  --ec-color-secondary-dark: rgba(26, 26, 35, .66);
+  --ec-color-secondary-light: rgba(255, 255, 255, .6);
+  --ec-color-hint-dark: rgba(26, 26, 35, .38);
+  --ec-color-hint-light: rgba(255, 255, 255, .38);
+  --ec-color-disabled-dark: var(--ec-color-hint-dark);
+  
+  // TODO: where is this used and what would the new value be
+  --ec-color-shadow: rgba(26, 26, 35, .1);
+  // TODO: where is this used and what would the new value be
+  --ec-color-shadow-overlay: rgba(26, 26, 35, .2);
+
+  --ec-color-interactive: var(--ec-color-cobalt-6);
+  --ec-color-interactive-light: var(--ec-color-blue-1);
+
+  --ec-color-info: var(--ec-color-cobalt-6);
+  --ec-color-success: var(--ec-color-green-6);
+  // Deprecated - use ec-color-success
+  --ec-color-good: var(--ec-color-success);
+  --ec-color-caution: var(--ec-color-yellow-8);
+  --ec-color-danger: var(--ec-color-red-7);
+  // Deprecated - use ec-color-danger
+  --ec-color-bad: var(--ec-color-danger);
+  --ec-color-accent: var(--ec-color-purple-6);
+
+  // TODO: where is this used and what would the new value be
+  --ec-color-control-invalid: var(--ec-color-caution);
+
+  // TODO: where is this used and what would the new value be
   --ec-color-accrual: #{$ec-color-accrual};
   
   --ec-background-color: rgb(255, 255, 255);
@@ -116,29 +145,45 @@
   --ec-background-color-dark: rgb(26, 26, 35);
   --ec-background-color-dialog: rgba(26, 26, 35, .5);
   --ec-background-color-dialog-stacked: rgba(26, 26, 35, .25);
-  --ec-background-color-splash: radial-gradient(circle, rgb(73, 89, 99) 0%, rgb(22, 47, 59) 100%);
+
+  // TODO: verify
+  --ec-background-splash: radial-gradient(104.77% 95.14% at 90.16% 85.25%, rgba(113,235,111,0.60) 0%, rgba(255, 255, 255, 0) 100%),
+  radial-gradient(156.88% 63.71% at 8.4% 78.12%, rgba(219, 141, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), 
+  radial-gradient(265.09% 182.17% at 24.49% 5.63%, rgba(0, 87, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), #FFF;
+
   --ec-background-color-detail: rgba(26, 26, 35, .03);
   --ec-background-color-disabled: rgba(26,26,35, .1);
-  --ec-background-color-hover: rgb(191, 224, 233);
-  --ec-background-color-selected: rgb(217, 237, 242);
-  --ec-background-color-info: rgb(218, 228, 233);
-  --ec-background-color-success: rgb(222, 239, 215);
-  --ec-background-color-caution: rgb(255, 248, 204);
-  --ec-background-color-danger: rgb(236, 196, 197);
+  --ec-background-color-hover: rgb(195, 212, 247);
+  --ec-background-color-selected: rgb(225, 233, 249);
+
+  --ec-background-color-info: rgb(218, 229, 251);
+  --ec-background-color-success: rgb(227, 251, 214);
+  --ec-background-color-caution: rgb(255, 249, 195);
+  --ec-background-color-danger: rgb(255, 225, 231);
+  --ec-background-color-accent: rgb(237, 220, 255);
+  --ec-background-color-promo: linear-gradient(78deg, #4B0793 0%, #A572DC 100%);
+  --ec-background-color-control: var(--ec-background-color);
+
+  // TODO: verify
   --ec-background-color-control-invalid: var(--ec-background-color-caution);
   
   // Shadows
+  // TODO: verify
   --ec-box-shadow: 0px .125rem .5rem var(--ec-color-shadow);
+  // TODO: verify
   --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);
 
   // Borders
   --ec-border-color: #D6D6D7;
   --ec-border-color-dark: #383840;
   --ec-border-color-hint: #EDEDED;
-  --ec-border-color-control: var(--ec-border-color);
-  --ec-border-color-control-disabled: var(--ec-border-color);
+  --ec-border-color-control: var(--ec-color-gray-4);
+  --ec-border-color-control-disabled: var(--ec-border-color-control);
   --ec-border-color-control-readonly: transparent;
+
+  // TODO: update
   --ec-border-color-control-invalid: var(--ec-color-caution);
+
   --ec-border-radius: .25rem;
   --ec-border-radius-card: .375rem;
   --ec-border-radius-dialog: .5rem;
@@ -168,4 +213,26 @@
   --ec-z-index-popup: 50;
   --ec-z-index-dialog: 60;
   --ec-z-index-toast: 70;
+
+  // Form Controls
+  --ec-form-control-background-color: var(--ec-background-color);
+  --ec-form-control-color: var(--ec-color-primary-dark);
+  --ec-form-control-color-placeholder: var(--ec-color-hint-dark);
+  --ec-form-control-background-color-selection: var(--ec-color-interactive);
+  --ec-form-control-color-selection: var(--ec-color-primary-light);
+  --ec-form-control-border-color: var(--ec-color-gray-4);
+  --ec-form-control-border-radius: var(--ec-border-radius);
+  --ec-form-control-font-size: var(--ec-font-size-body);
+  --ec-form-control-border-color-focus: var(--ec-background-color);
+  --ec-form-control-box-shadow-focus: 0 0 0 2px var(--ec-color-interactive);
+  --ec-form-control-background-color-invalid: var(--ec-background-color-caution);
+  --ec-form-control-color-invalid: var(--ec-color-primary-dark);
+  --ec-form-control-border-color-invalid: var(--ec-color-caution);
+  --ec-form-control-background-color-disabled: var(--ec-background-color-disabled);
+  --ec-form-control-color-disabled: var(--ec-color-primary-dark);
+  --ec-form-control-border-color-disabled: var(--ec-color-gray-4);
+  --ec-form-control-opacity-disabled: .6;
+  --ec-form-control-background-color-readonly: var(--ec-background-color-disabled);
+  --ec-form-control-color-readonly: var(--ec-color-primary-dark);
+  --ec-form-control-border-color-readonly: var(--ec-color-gray-4);
 }

package/src/styles/components/_splash.scss

@@ -1,5 +1,28 @@
 @import "../mixins/animations";
 
+@keyframes splash {
+  0% {
+    background-position: left bottom;
+  }
+
+  20% {
+    background-position: left top;
+  }
+
+  40% {
+    background-position: right top;
+  }
+
+  60% {
+    background-position: right bottom;
+  }
+
+  100% {
+    background-position: left bottom;
+  }
+}
+
+
 .app-splash {
   position: fixed;
   z-index: 100;
@@ -7,7 +30,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-image: var(--ec-background-color-splash);
+  background: var(--ec-background-splash);
+  background-size: 110% 110%;
   transition-property: opacity;
   transition-duration: .3s;
   transition-timing-function: ease-out;
@@ -17,18 +41,13 @@
   right: 0;
   bottom: 0;
 
-  > svg {
-    width: 10rem;
-    height: 10rem;
-
-    > g > g path {
-      @include fade-in-out;
-    }
+  animation-name: splash;
+  animation-duration: 6s;
+  animation-iteration-count: infinite;
 
-    > g > path {
-      transform-origin: 50% 50%;
-      @include spin;
-    }
+  img {
+    width: 200px;
+    mix-blend-mode: screen;
   }
 
   &.app-loaded {