@xen-orchestra/web-core 0.0.2 → 0.0.4

package/env.d.ts

@@ -1 +1,2 @@
 /// <reference types="novnc__novnc" />
+/// <reference types="vite/client" />

package/lib/assets/css/_typography.pcss

@@ -4,3 +4,4 @@
 @import 'typography/_line-height.pcss';
 @import 'typography/_letter-spacing.pcss';
 @import 'typography/_legacy.pcss';
+@import 'typography/_utils.pcss';

package/lib/assets/css/typography/_utils.pcss

@@ -0,0 +1,6 @@
+.text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}

package/lib/assets/no-result.svg

@@ -0,0 +1,81 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="982.48732" height="763.01413"
+     viewBox="0 0 982.48732 763.01413">
+  <circle cx="559.4329" cy="333.06116" r="40.02979" fill="#e6e6e6"/>
+  <path
+    d="M766.295,452.99465l-41.832-41.832a44.307,44.307,0,0,0-14.42627-61.92578,44.45758,44.45758,0,0,0-58.91358,12.23779,44.30652,44.30652,0,0,0,60.03321,62.99512l41.832,41.832A9.40939,9.40939,0,0,0,766.295,452.99465ZM709.59431,409.6011a31.68421,31.68421,0,1,1,9.27978-22.40381A31.58568,31.58568,0,0,1,709.59431,409.6011Z"
+    transform="translate(-108.75634 -68.49293)" fill="#3f3d56"/>
+  <path
+    d="M1069.529,514.69884C1176.50914,633.00725,866.39184,803.50707,615.8095,803.50707S191.86334,671.39983,162.09,514.69884C89.89987,134.75174,777.16735-106.74054,615.8095,225.89055,380.61181,710.73882,985.27984,421.5284,1069.529,514.69884Z"
+    transform="translate(-108.75634 -68.49293)" fill="#e6e6e6"/>
+  <path
+    d="M1021.529,542.69884C1128.50914,661.00725,818.39184,831.50707,567.8095,831.50707S143.86334,699.39983,114.09,542.69884C41.89987,162.75174,729.16735-78.74054,567.8095,253.89055,332.61181,738.73882,937.27984,449.5284,1021.529,542.69884Z"
+    transform="translate(-108.75634 -68.49293)" fill="#3f3d56"/>
+  <path
+    d="M258.35026,265.31823c-75.06741-3.30525-133.27133-19.49788-132.50668-36.86436.45844-10.41178,21.70324-18.7842,58.28677-22.96955a1,1,0,1,1,.22727,1.987c-34.46168,3.943-56.11733,12.01678-56.516,21.07051-.69148,15.70451,59.11433,31.63093,130.59659,34.77832s132.4564-7.461,133.14787-23.16554c.40032-9.09178-20.59681-19.06558-54.79775-26.0284a1.00008,1.00008,0,1,1,.3991-1.95993c36.3011,7.39058,56.85694,17.624,56.39672,28.0763C392.81953,257.60908,333.41767,268.62348,258.35026,265.31823Z"
+    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
+  <path
+    d="M191.67927,268.22672a76.98277,76.98277,0,0,0,133.03578,5.52178A1211.97551,1211.97551,0,0,1,191.67927,268.22672Z"
+    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
+  <path d="M333.019,252.71347a76.997,76.997,0,1,0-147.74945-5.70562A572.23325,572.23325,0,0,0,333.019,252.71347Z"
+        transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
+  <circle cx="168.83353" cy="123.60073" r="9" fill="#fff"/>
+  <circle cx="122.51347" cy="152.59128" r="15" fill="#fff"/>
+  <circle cx="348.90479" cy="142.89813" r="9.99975" fill="#6c63ff"/>
+  <circle cx="122.90479" cy="452.89813" r="6.00007" fill="#e6e6e6"/>
+  <circle cx="542.90479" cy="658.89813" r="6.00007" fill="#e6e6e6"/>
+  <circle cx="151.90479" cy="339.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="399.90479" cy="563.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="850.90479" cy="534.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="709.90479" cy="623.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="562.90479" cy="515.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="372.90479" cy="219.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="396.90479" cy="71.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="382.90479" cy="694.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="234.90479" cy="631.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="703.90479" cy="523.89813" r="3.00007" fill="#e6e6e6"/>
+  <circle cx="148.3737" cy="224.7987" r="9" fill="#fff"/>
+  <path
+    d="M460.6612,431.39114c0,26.88035-41.55939,89.516-53.70465,107.24669a3.99188,3.99188,0,0,1-6.5907,0c-12.14526-17.73066-53.70465-80.36634-53.70465-107.24669a57,57,0,1,1,114,0Z"
+    transform="translate(-108.75634 -68.49293)" fill="#fff"/>
+  <circle cx="294.90486" cy="358.8982" r="29" fill="#6c63ff"/>
+  <ellipse cx="294.40486" cy="496.3982" rx="33.5" ry="6.5" fill="#fff"/>
+  <path
+    d="M925.60957,386.41245a10.52681,10.52681,0,0,0-.64106,1.52851l-47.783,13.27682-8.61085-8.42662L854.1589,404.12429,867.953,420.52338a8,8,0,0,0,9.35283,2.169l51.61632-22.78484a10.49709,10.49709,0,1,0-3.31256-13.49509Z"
+    transform="translate(-108.75634 -68.49293)" fill="#ffb8b8"/>
+  <path
+    d="M875.50191,401.996l-17.9352,13.95958a4.5,4.5,0,0,1-6.68163-1.33719L839.73843,394.891a12.49741,12.49741,0,0,1,19.76923-15.29426l16.33819,15.59379a4.5,4.5,0,0,1-.34394,6.80543Z"
+    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
+  <path
+    d="M930.19158,379.80967l18.18807,8.1829a3.14913,3.14913,0,0,1,1.57976,4.16384l-2.15339,4.78633a1.05293,1.05293,0,0,1,.52659,1.38795l-.86136,1.91453a1.05292,1.05292,0,0,1-1.388.52659l-.86136,1.91453a1.05292,1.05292,0,0,1,.52659,1.388l-.86136,1.91453a1.0529,1.0529,0,0,1-1.38794.52659L931.8709,432.36162a3.14914,3.14914,0,0,1-4.16384,1.57977l-18.18807-8.1829a3.14915,3.14915,0,0,1-1.57977-4.16384l18.08852-40.20522A3.14913,3.14913,0,0,1,930.19158,379.80967Z"
+    transform="translate(-108.75634 -68.49293)" fill="#3f3d56"/>
+  <path
+    d="M912.82137,423.21181l14.59056,6.57106a3.03424,3.03424,0,0,0,3.99937-1.51155l6.73892-14.98951,2.34078-5.196,6.09875-13.562a3.026,3.026,0,0,0-1.51149-3.98886l-4.58726-2.06786L930.47694,383.964a3.02112,3.02112,0,0,0-3.98861,1.522L920.589,398.59669l-6.7179,14.92653-2.56118,5.69979A3.022,3.022,0,0,0,912.82137,423.21181Z"
+    transform="translate(-108.75634 -68.49293)" fill="#f2f2f2"/>
+  <polygon points="773.577 540.443 785.837 540.442 791.67 493.154 773.575 493.155 773.577 540.443" fill="#ffb8b8"/>
+  <path d="M879.2066,604.93325l24.1438-.001h.001a15.38605,15.38605,0,0,1,15.38648,15.38623v.5l-39.53052.00146Z"
+        transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
+  <polygon points="805.577 537.443 817.837 537.442 823.67 490.154 805.575 490.155 805.577 537.443" fill="#ffb8b8"/>
+  <path d="M911.2066,601.93325l24.1438-.001h.001a15.38605,15.38605,0,0,1,15.38648,15.38623v.5l-39.53052.00146Z"
+        transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
+  <path
+    d="M827.34138,497.97109a39.41035,39.41035,0,0,0,36.8999,26.81006l.62012.01c6.32959.18,13.75976-1.86,21.0498-4.79,14.3999-5.79,28.23-15.06,31.8999-17.61l-6.21972,59.79-2.52,24.24a4.51415,4.51415,0,0,0,4.48,4.97h15.52978a4.50547,4.50547,0,0,0,4.35987-3.36l25.64013-97.65a19.032,19.032,0,0,0-19.71-23.83l-53.25976,3.65,3.71972-14.88-47.54-3.16-.13965.1c-1.14013.83-2.25,1.7-3.31005,2.61a40.27149,40.27149,0,0,0-6.99024,7.66A38.48741,38.48741,0,0,0,827.34138,497.97109Z"
+    transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
+  <path
+    d="M827.34138,497.97109a39.41035,39.41035,0,0,0,36.8999,26.81006,196.14623,196.14623,0,0,0,22.56982-13.39l-.8999,8.61-7.83984,75.42a4.51415,4.51415,0,0,0,4.48,4.97h15.52978a4.50547,4.50547,0,0,0,4.35987-3.36l9.15039-34.85,16.48974-62.8a19.032,19.032,0,0,0-19.71-23.83l-53.25976,3.65,3.71972-14.88-26.98-1.79A38.48741,38.48741,0,0,0,827.34138,497.97109Z"
+    transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
+  <path
+    d="M838.7735,458.32082l-.35766-.043-8.29517-40.78515c-.071-.354-6.85229-35.5332,13.93677-53.92432l.36182-2.51709a4.50032,4.50032,0,0,1,5.78711-3.65771l19.58471,6.0747a4.49086,4.49086,0,0,1,3.019,5.4419l-1.90381,7.2417c2.63989,3.1001,33.7146,40.51221,22.89038,69.33545L888.9488,464.439Z"
+    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
+  <path
+    d="M920.09389,426.48986a10.52591,10.52591,0,0,0-1.32908.99037l-47.89739-12.858-3.13136-11.634-18.17538,2.43095,3.54192,21.13437a8,8,0,0,0,6.95146,6.62248l56.032,6.619a10.4971,10.4971,0,1,0,4.00785-13.30516Z"
+    transform="translate(-108.75634 -68.49293)" fill="#ffb8b8"/>
+  <path
+    d="M869.022,414.43646,846.48068,417.34a4.5,4.5,0,0,1-5.07405-4.54822l.42987-22.65461a12.49741,12.49741,0,0,1,24.79917-3.12052l6.14215,21.73423a4.5,4.5,0,0,1-3.75583,5.68559Z"
+    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
+  <circle cx="753.92061" cy="258.80372" r="24.56103" fill="#ffb8b8"/>
+  <path
+    d="M861.3848,329.34791l-3.075-5.59966c-5.82461,23.73215,4.46383,43.37315,4.46383,43.37315l-39.93243-18.601.38033-6.59991-3.95134,4.484-5.67747-3.12872-.74992-4.28064-4.28563,1.06158,15.64354-28.38736c15.18238-27.01314,37.25508-16.69982,37.25508-16.69982,35.11544-1.66934,30.82681,32.97543,30.82681,32.97543Z"
+    transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
+  <ellipse cx="556.1612" cy="472.39114" rx="12.17949" ry="47.5"
+           transform="translate(-275.75171 306.36236) rotate(-32.66242)" fill="#3f3d56"/>
+</svg>

package/lib/assets/under-construction.svg

@@ -0,0 +1,195 @@
+<svg width="639" height="400" viewBox="0 0 639 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1388_31418)">
+    <path
+      d="M608.508 400H69.3782C64.5838 400 59.9858 398.1 56.5956 394.717C53.2055 391.334 51.3009 386.747 51.3009 381.963C246.735 359.3 438.497 359.3 626.585 381.963C626.585 386.747 624.681 391.334 621.291 394.717C617.901 398.1 613.302 400 608.508 400Z"
+      fill="#CCCCCC"/>
+    <path
+      d="M626.585 383.024L51.3009 381.963L117.974 270.027L118.293 269.496V22.8011C118.293 19.8067 118.884 16.8416 120.032 14.0752C121.181 11.3087 122.864 8.79505 124.986 6.67772C127.108 4.5604 129.627 2.88089 132.4 1.73512C135.173 0.589352 138.144 -0.000250133 141.145 7.96048e-08H533.551C536.552 -0.000250133 539.524 0.589352 542.296 1.73512C545.069 2.88089 547.588 4.5604 549.71 6.67772C551.832 8.79505 553.515 11.3087 554.664 14.0752C555.812 16.8416 556.403 19.8067 556.403 22.8011V271.194L626.585 383.024Z"
+      fill="#E6E6E6"/>
+    <path
+      d="M140.624 15.9151C138.651 15.9173 136.759 16.7005 135.363 18.0929C133.968 19.4853 133.183 21.3731 133.181 23.3422V248.276C133.183 250.245 133.968 252.133 135.363 253.525C136.759 254.917 138.651 255.701 140.624 255.703H537.262C539.236 255.701 541.128 254.917 542.523 253.525C543.918 252.133 544.703 250.245 544.706 248.276V23.3422C544.703 21.3731 543.918 19.4853 542.523 18.093C541.128 16.7006 539.236 15.9174 537.262 15.9151H140.624Z"
+      fill="white"/>
+    <path
+      d="M143.231 285.411C142.621 285.412 142.024 285.587 141.511 285.915C140.997 286.244 140.588 286.711 140.333 287.264L119.788 331.826C119.565 332.311 119.467 332.844 119.504 333.377C119.541 333.909 119.712 334.424 120 334.874C120.289 335.323 120.686 335.693 121.155 335.949C121.625 336.205 122.151 336.34 122.686 336.34H554.719C555.263 336.34 555.798 336.201 556.273 335.937C556.748 335.672 557.147 335.291 557.433 334.83C557.719 334.368 557.881 333.841 557.906 333.299C557.93 332.757 557.815 332.218 557.572 331.733L535.241 287.171C534.978 286.641 534.571 286.195 534.067 285.884C533.562 285.573 532.981 285.409 532.388 285.411L143.231 285.411Z"
+      fill="#CCCCCC"/>
+    <path
+      d="M337.348 12.2016C339.991 12.2016 342.133 10.064 342.133 7.42706C342.133 4.79016 339.991 2.65253 337.348 2.65253C334.705 2.65253 332.563 4.79016 332.563 7.42706C332.563 10.064 334.705 12.2016 337.348 12.2016Z"
+      fill="white"/>
+    <path
+      d="M294.883 344.828C294.182 344.829 293.5 345.06 292.943 345.485C292.387 345.911 291.986 346.507 291.803 347.183L286.65 366.281C286.522 366.753 286.505 367.247 286.6 367.727C286.695 368.206 286.9 368.657 287.197 369.045C287.495 369.433 287.879 369.747 288.318 369.963C288.757 370.179 289.24 370.292 289.73 370.292H387.734C388.242 370.292 388.744 370.17 389.196 369.938C389.648 369.705 390.037 369.368 390.332 368.955C390.627 368.542 390.819 368.064 390.891 367.561C390.963 367.059 390.914 366.547 390.747 366.067L384.122 346.969C383.905 346.344 383.498 345.802 382.958 345.418C382.417 345.034 381.771 344.828 381.107 344.828H294.883Z"
+      fill="#CCCCCC"/>
+    <path d="M556.403 265.782V270.027H117.974L118.304 269.496V265.782H556.403Z" fill="#CCCCCC"/>
+    <path
+      d="M502.287 275.504C502.117 275.505 501.951 275.561 501.815 275.665C501.679 275.768 501.582 275.913 501.537 276.078L500.282 280.729C500.251 280.844 500.247 280.964 500.27 281.081C500.294 281.197 500.343 281.307 500.416 281.402C500.488 281.496 500.582 281.573 500.689 281.625C500.796 281.678 500.913 281.705 501.032 281.705H524.898C525.022 281.705 525.144 281.676 525.254 281.619C525.364 281.562 525.459 281.48 525.531 281.38C525.602 281.279 525.649 281.163 525.667 281.04C525.684 280.918 525.672 280.793 525.632 280.677L524.018 276.026C523.965 275.874 523.866 275.742 523.735 275.648C523.603 275.555 523.446 275.504 523.284 275.504H502.287Z"
+      fill="#CCCCCC"/>
+    <path
+      d="M467.441 275.504C467.27 275.505 467.104 275.561 466.968 275.665C466.833 275.768 466.735 275.913 466.691 276.078L465.436 280.729C465.405 280.844 465.401 280.964 465.424 281.081C465.447 281.197 465.497 281.307 465.569 281.402C465.642 281.496 465.735 281.573 465.842 281.625C465.949 281.678 466.067 281.705 466.186 281.705H490.051C490.175 281.705 490.297 281.676 490.407 281.619C490.517 281.562 490.612 281.48 490.684 281.38C490.756 281.279 490.803 281.163 490.82 281.04C490.838 280.918 490.826 280.793 490.785 280.677L489.172 276.026C489.119 275.874 489.02 275.742 488.888 275.648C488.757 275.555 488.599 275.504 488.438 275.504H467.441Z"
+      fill="#CCCCCC"/>
+    <path
+      d="M366.483 305.055H368.354L364.613 55.5953H362.742L362.817 60.5721H320.894L320.969 55.5953H319.099L315.358 305.055H317.228L317.471 288.88H366.24L366.483 305.055ZM363.787 125.27H319.924L320.381 94.7872H363.33L363.787 125.27ZM363.815 127.136L364.272 157.619H319.439L319.896 127.136H363.815ZM364.3 159.485L364.757 189.968H318.954L319.411 159.485H364.3ZM364.785 191.834L365.242 222.316H318.469L318.926 191.834H364.785ZM365.27 224.183L365.727 254.665H317.984L318.441 224.183H365.27ZM362.845 62.4384L363.302 92.9209H320.409L320.866 62.4384H362.845ZM317.499 287.014L317.956 256.532H365.755L366.213 287.014H317.499Z"
+      fill="#3F3D56"/>
+    <path
+      d="M332.59 141.517C349.434 141.517 363.089 127.893 363.089 111.086C363.089 94.2784 349.434 80.6536 332.59 80.6536C315.745 80.6536 302.09 94.2784 302.09 111.086C302.09 127.893 315.745 141.517 332.59 141.517Z"
+      fill="#2F2E41"/>
+    <path d="M350.53 132.116L341.412 133.763L344.37 150.063L353.487 148.416L350.53 132.116Z" fill="#2F2E41"/>
+    <path d="M332.295 135.41L323.177 137.057L326.134 153.356L335.252 151.709L332.295 135.41Z" fill="#2F2E41"/>
+    <path
+      d="M330.975 156.787C334.229 154.037 336.029 150.82 334.996 149.603C333.962 148.385 330.486 149.627 327.232 152.377C323.978 155.127 322.177 158.343 323.211 159.561C324.244 160.778 327.72 159.536 330.975 156.787Z"
+      fill="#2F2E41"/>
+    <path
+      d="M348.83 153.561C352.084 150.811 353.884 147.595 352.851 146.378C351.817 145.16 348.341 146.402 345.087 149.152C341.833 151.902 340.033 155.118 341.066 156.336C342.1 157.553 345.576 156.311 348.83 153.561Z"
+      fill="#2F2E41"/>
+    <path
+      d="M330.454 114.042C336.211 114.042 340.878 109.386 340.878 103.642C340.878 97.8975 336.211 93.2409 330.454 93.2409C324.697 93.2409 320.031 97.8975 320.031 103.642C320.031 109.386 324.697 114.042 330.454 114.042Z"
+      fill="white"/>
+    <path
+      d="M326.17 103.381C328.089 103.381 329.645 101.828 329.645 99.9136C329.645 97.9988 328.089 96.4467 326.17 96.4467C324.251 96.4467 322.696 97.9988 322.696 99.9136C322.696 101.828 324.251 103.381 326.17 103.381Z"
+      fill="#3F3D56"/>
+    <path
+      d="M356.65 77.9789C357.108 66.7125 347.377 57.1698 334.914 56.6647C322.45 56.1596 311.975 64.8833 311.517 76.1496C311.058 87.416 319.721 89.9757 332.185 90.4809C344.648 90.9861 356.191 89.2452 356.65 77.9789Z"
+      fill="#8F84FF"/>
+    <path
+      d="M319.292 108.941C319.882 106.369 313.706 102.763 305.497 100.885C297.288 99.0078 290.154 99.5703 289.563 102.142C288.972 104.713 295.148 108.32 303.358 110.197C311.567 112.075 318.701 111.512 319.292 108.941Z"
+      fill="#2F2E41"/>
+    <path
+      d="M379.161 118.875C379.752 116.304 373.576 112.697 365.367 110.819C357.157 108.942 350.023 109.504 349.433 112.076C348.842 114.647 355.018 118.254 363.228 120.131C371.437 122.009 378.571 121.446 379.161 118.875Z"
+      fill="#2F2E41"/>
+    <path
+      d="M340.966 123.078C341.131 123.975 341.116 124.894 340.924 125.785C340.732 126.676 340.366 127.52 339.847 128.269C339.328 129.019 338.665 129.658 337.898 130.152C337.131 130.646 336.274 130.985 335.375 131.148C334.477 131.311 333.555 131.296 332.663 131.103C331.77 130.911 330.924 130.545 330.174 130.026C329.423 129.507 328.782 128.846 328.288 128.08C327.794 127.314 327.455 126.458 327.293 125.562L327.29 125.549C326.607 121.78 329.526 120.447 333.303 119.765C337.08 119.083 340.283 119.31 340.966 123.078Z"
+      fill="white"/>
+    <path
+      d="M229.289 214.444C232.371 206.397 232.817 199.091 230.286 198.125C227.754 197.16 223.203 202.9 220.12 210.947C217.038 218.994 216.591 226.3 219.123 227.265C221.655 228.231 226.206 222.49 229.289 214.444Z"
+      fill="#2F2E41"/>
+    <path
+      d="M226.668 241.25C229.434 224.243 217.858 208.219 200.814 205.46C183.769 202.7 167.71 214.249 164.944 231.256C162.178 248.262 173.753 264.286 190.797 267.046C207.842 269.806 223.902 258.257 226.668 241.25Z"
+      fill="#2F2E41"/>
+    <path d="M191.056 260.736H181.558V277.716H191.056V260.736Z" fill="#2F2E41"/>
+    <path d="M210.053 260.736H200.555V277.716H210.053V260.736Z" fill="#2F2E41"/>
+    <path
+      d="M189.473 280.875C193.845 280.875 197.389 279.549 197.389 277.913C197.389 276.278 193.845 274.952 189.473 274.952C185.102 274.952 181.558 276.278 181.558 277.913C181.558 279.549 185.102 280.875 189.473 280.875Z"
+      fill="#2F2E41"/>
+    <path
+      d="M208.47 280.48C212.842 280.48 216.386 279.154 216.386 277.519C216.386 275.883 212.842 274.557 208.47 274.557C204.099 274.557 200.555 275.883 200.555 277.519C200.555 279.154 204.099 280.48 208.47 280.48Z"
+      fill="#2F2E41"/>
+    <path
+      d="M165.477 207.241C162.952 195.96 171.022 184.561 183.502 181.781C195.981 179.001 208.144 185.892 210.669 197.173C213.193 208.454 204.923 212.614 192.443 215.395C179.964 218.175 168.001 218.522 165.477 207.241Z"
+      fill="#8F84FF"/>
+    <path
+      d="M174.715 228.462C175.876 226.019 170.494 221.045 162.693 217.353C154.892 213.662 147.627 212.65 146.465 215.094C145.304 217.537 150.686 222.51 158.487 226.202C166.288 229.894 173.553 230.905 174.715 228.462Z"
+      fill="#2F2E41"/>
+    <path
+      d="M60.4281 299.036C77.6956 299.036 91.6937 285.069 91.6937 267.84C91.6937 250.611 77.6956 236.644 60.4281 236.644C43.1606 236.644 29.1625 250.611 29.1625 267.84C29.1625 285.069 43.1606 299.036 60.4281 299.036Z"
+      fill="#2F2E41"/>
+    <path d="M55.6788 292.323H46.1804V309.303H55.6788V292.323Z" fill="#2F2E41"/>
+    <path d="M74.6757 292.323H65.1772V309.303H74.6757V292.323Z" fill="#2F2E41"/>
+    <path
+      d="M54.0959 312.462C58.4674 312.462 62.0113 311.136 62.0113 309.501C62.0113 307.865 58.4674 306.539 54.0959 306.539C49.7244 306.539 46.1805 307.865 46.1805 309.501C46.1805 311.136 49.7244 312.462 54.0959 312.462Z"
+      fill="#2F2E41"/>
+    <path
+      d="M73.0926 312.068C77.4641 312.068 81.0079 310.742 81.0079 309.106C81.0079 307.47 77.4641 306.144 73.0926 306.144C68.7211 306.144 65.1772 307.47 65.1772 309.106C65.1772 310.742 68.7211 312.068 73.0926 312.068Z"
+      fill="#2F2E41"/>
+    <path
+      d="M61.2196 270.604C67.1212 270.604 71.9054 265.831 71.9054 259.942C71.9054 254.054 67.1212 249.281 61.2196 249.281C55.3181 249.281 50.5339 254.054 50.5339 259.942C50.5339 265.831 55.3181 270.604 61.2196 270.604Z"
+      fill="white"/>
+    <path
+      d="M61.2198 263.496C63.1869 263.496 64.7817 261.905 64.7817 259.942C64.7817 257.98 63.1869 256.388 61.2198 256.388C59.2526 256.388 57.6578 257.98 57.6578 259.942C57.6578 261.905 59.2526 263.496 61.2198 263.496Z"
+      fill="#3F3D56"/>
+    <path
+      d="M30.0994 238.829C27.5749 227.548 35.6449 216.149 48.1243 213.369C60.6036 210.588 72.7667 217.479 75.2913 228.76C77.8158 240.041 69.5453 244.202 57.0659 246.982C44.5865 249.762 32.624 250.11 30.0994 238.829Z"
+      fill="#E6E6E6"/>
+    <path
+      d="M83.2255 156.392C86.308 148.345 86.7545 141.039 84.2227 140.073C81.691 139.108 77.1397 144.848 74.0572 152.895C70.9747 160.942 70.5282 168.248 73.06 169.213C75.5918 170.179 80.143 164.438 83.2255 156.392Z"
+      fill="#2F2E41"/>
+    <path
+      d="M80.6044 183.198C83.3704 166.191 71.7953 150.167 54.7507 147.408C37.7062 144.648 21.6466 156.197 18.8806 173.204C16.1147 190.21 27.6898 206.234 44.7343 208.994C61.7789 211.754 77.8385 200.205 80.6044 183.198Z"
+      fill="#2F2E41"/>
+    <path d="M44.9932 202.684H35.4948V219.664H44.9932V202.684Z" fill="#2F2E41"/>
+    <path d="M63.99 202.684H54.4916V219.664H63.99V202.684Z" fill="#2F2E41"/>
+    <path
+      d="M43.4101 222.823C47.7816 222.823 51.3255 221.497 51.3255 219.861C51.3255 218.226 47.7816 216.9 43.4101 216.9C39.0386 216.9 35.4948 218.226 35.4948 219.861C35.4948 221.497 39.0386 222.823 43.4101 222.823Z"
+      fill="#2F2E41"/>
+    <path
+      d="M62.4069 222.428C66.7785 222.428 70.3223 221.102 70.3223 219.467C70.3223 217.831 66.7785 216.505 62.4069 216.505C58.0354 216.505 54.4916 217.831 54.4916 219.467C54.4916 221.102 58.0354 222.428 62.4069 222.428Z"
+      fill="#2F2E41"/>
+    <path
+      d="M50.534 180.965C56.4355 180.965 61.2197 176.192 61.2197 170.303C61.2197 164.415 56.4355 159.641 50.534 159.641C44.6324 159.641 39.8483 164.415 39.8483 170.303C39.8483 176.192 44.6324 180.965 50.534 180.965Z"
+      fill="white"/>
+    <path
+      d="M50.5341 173.857C52.5013 173.857 54.096 172.266 54.096 170.303C54.096 168.34 52.5013 166.749 50.5341 166.749C48.5669 166.749 46.9722 168.34 46.9722 170.303C46.9722 172.266 48.5669 173.857 50.5341 173.857Z"
+      fill="#3F3D56"/>
+    <path
+      d="M19.4138 149.189C16.8892 137.908 24.9592 126.509 37.4386 123.729C49.918 120.949 62.0811 127.84 64.6056 139.121C67.1302 150.402 58.8596 154.562 46.3802 157.343C33.9009 160.123 21.9383 160.47 19.4138 149.189Z"
+      fill="#8F84FF"/>
+    <path
+      d="M28.6516 170.41C29.8131 167.966 24.4308 162.993 16.63 159.301C8.82914 155.61 1.56373 154.598 0.402249 157.042C-0.759236 159.485 4.62304 164.458 12.4239 168.15C20.2247 171.842 27.4901 172.853 28.6516 170.41Z"
+      fill="#2F2E41"/>
+    <path
+      d="M34.3849 189.455C34.3849 192.508 42.264 198.537 51.0071 198.537C59.7502 198.537 67.9477 189.942 67.9477 186.888C67.9477 183.835 59.7501 187.481 51.0071 187.481C42.2641 187.481 34.3849 186.402 34.3849 189.455Z"
+      fill="white"/>
+    <path
+      d="M80.4815 59.0848C79.9041 59.0854 79.3505 59.3146 78.9422 59.722C78.5339 60.1294 78.3042 60.6817 78.3036 61.2579V151.078C78.3042 151.654 78.5339 152.206 78.9422 152.614C79.3505 153.021 79.9041 153.25 80.4815 153.251H288.835C289.412 153.25 289.966 153.021 290.374 152.614C290.783 152.206 291.012 151.654 291.013 151.078V61.2579C291.012 60.6817 290.783 60.1294 290.374 59.722C289.966 59.3146 289.412 59.0854 288.835 59.0848H80.4815Z"
+      fill="#8F84FF"/>
+    <path
+      d="M136.74 127.262C148.416 127.262 157.881 117.818 157.881 106.168C157.881 94.518 148.416 85.0739 136.74 85.0739C125.064 85.0739 115.599 94.518 115.599 106.168C115.599 117.818 125.064 127.262 136.74 127.262Z"
+      fill="white"/>
+    <path
+      d="M184.455 103.361C183.806 103.372 183.188 103.637 182.733 104.098C182.278 104.559 182.023 105.181 182.023 105.828C182.023 106.475 182.278 107.096 182.733 107.557C183.188 108.019 183.806 108.283 184.455 108.294H251.205C251.53 108.3 251.852 108.241 252.154 108.122C252.457 108.003 252.732 107.826 252.966 107.601C253.199 107.376 253.386 107.107 253.515 106.809C253.645 106.512 253.714 106.192 253.719 105.868C253.724 105.544 253.666 105.222 253.546 104.921C253.427 104.619 253.249 104.345 253.023 104.112C252.797 103.879 252.527 103.693 252.229 103.564C251.931 103.435 251.611 103.366 251.286 103.361C251.259 103.361 251.232 103.361 251.205 103.361H184.455Z"
+      fill="white"/>
+    <path
+      d="M184.455 89.0718C183.806 89.0825 183.188 89.347 182.733 89.8084C182.278 90.2698 182.023 90.891 182.023 91.5382C182.023 92.1853 182.278 92.8066 182.733 93.268C183.188 93.7293 183.806 93.9938 184.455 94.0045H217.788C218.113 94.0101 218.436 93.9517 218.738 93.8328C219.04 93.7139 219.316 93.5368 219.549 93.3115C219.783 93.0862 219.97 92.8172 220.099 92.5199C220.228 92.2226 220.297 91.9027 220.303 91.5787C220.308 91.2546 220.249 90.9327 220.13 90.6313C220.01 90.3299 219.833 90.055 219.607 89.8222C219.381 89.5893 219.111 89.4033 218.813 89.2745C218.515 89.1458 218.194 89.0769 217.869 89.0718C217.842 89.0714 217.815 89.0714 217.788 89.0718H184.455Z"
+      fill="white"/>
+    <path
+      d="M184.455 118.331C183.806 118.342 183.188 118.607 182.733 119.068C182.278 119.529 182.023 120.151 182.023 120.798C182.023 121.445 182.278 122.066 182.733 122.527C183.188 122.989 183.806 123.253 184.455 123.264H251.205C251.53 123.27 251.852 123.211 252.154 123.092C252.457 122.973 252.732 122.796 252.966 122.571C253.199 122.346 253.386 122.077 253.515 121.779C253.645 121.482 253.714 121.162 253.719 120.838C253.724 120.514 253.666 120.192 253.546 119.891C253.427 119.589 253.249 119.314 253.023 119.082C252.797 118.849 252.527 118.663 252.229 118.534C251.931 118.405 251.611 118.336 251.286 118.331C251.259 118.331 251.232 118.331 251.205 118.331H184.455Z"
+      fill="white"/>
+    <path
+      d="M508.635 284.472C511.167 283.507 510.72 276.201 507.638 268.154C504.555 260.107 500.004 254.367 497.472 255.332C494.94 256.298 495.387 263.604 498.469 271.651C501.552 279.697 506.103 285.438 508.635 284.472Z"
+      fill="#2F2E41"/>
+    <path
+      d="M530.427 330.772C547.471 328.013 559.046 311.989 556.28 294.982C553.515 277.975 537.455 266.426 520.41 269.186C503.366 271.946 491.791 287.969 494.557 304.976C497.323 321.983 513.382 333.532 530.427 330.772Z"
+      fill="#2F2E41"/>
+    <path d="M539.666 324.462H530.168L532.026 344.797L539.683 342.722L539.666 324.462Z" fill="#2F2E41"/>
+    <path d="M518.959 324.515H509.46L511.319 344.85L518.629 342.722L518.959 324.515Z" fill="#2F2E41"/>
+    <path
+      d="M511.049 345.805C515.409 345.487 518.846 343.907 518.727 342.276C518.607 340.644 514.976 339.58 510.616 339.898C506.256 340.216 502.819 341.796 502.938 343.427C503.058 345.059 506.689 346.123 511.049 345.805Z"
+      fill="#2F2E41"/>
+    <path
+      d="M524.627 302.743C530.529 302.743 535.313 297.97 535.313 292.081C535.313 286.193 530.529 281.419 524.627 281.419C518.726 281.419 513.941 286.193 513.941 292.081C513.941 297.97 518.726 302.743 524.627 302.743Z"
+      fill="white"/>
+    <path
+      d="M524.627 295.635C526.594 295.635 528.189 294.044 528.189 292.081C528.189 290.119 526.594 288.527 524.627 288.527C522.66 288.527 521.065 290.119 521.065 292.081C521.065 294.044 522.66 295.635 524.627 295.635Z"
+      fill="#3F3D56"/>
+    <path
+      d="M562.404 281.17C567.533 274.24 569.924 267.321 567.744 265.714C565.564 264.107 559.638 268.422 554.509 275.351C549.379 282.281 546.988 289.2 549.168 290.807C551.349 292.414 557.274 288.099 562.404 281.17Z"
+      fill="#2F2E41"/>
+    <path
+      d="M510.164 316.065C510.164 313.548 516.658 308.579 523.864 308.579C531.069 308.579 537.826 315.664 537.826 318.18C537.826 320.696 531.069 317.692 523.864 317.692C516.658 317.692 510.164 318.581 510.164 316.065Z"
+      fill="white"/>
+    <path
+      d="M613.092 274.199L441.947 250.526C440.613 250.34 439.407 249.633 438.595 248.561C437.782 247.489 437.428 246.139 437.612 244.807L456.851 106.331C457.038 105 457.746 103.797 458.82 102.986C459.895 102.175 461.248 101.822 462.583 102.005L633.727 125.678C635.061 125.864 636.267 126.57 637.08 127.642C637.893 128.715 638.246 130.065 638.063 131.396L618.823 269.873C618.636 271.204 617.928 272.407 616.854 273.218C615.779 274.029 614.426 274.382 613.092 274.199Z"
+      fill="#8F84FF"/>
+    <path
+      d="M551.78 230.982L464.407 218.897C464.297 218.883 464.189 218.859 464.084 218.826L515.33 153.122C515.644 152.712 516.062 152.393 516.54 152.197C517.018 152 517.54 151.934 518.052 152.005C518.564 152.076 519.049 152.281 519.455 152.6C519.862 152.918 520.177 153.339 520.367 153.819L541.441 205.583L542.451 208.06L551.78 230.982Z"
+      fill="white"/>
+    <path opacity="0.2"
+          d="M551.78 230.982L521.948 226.856L539.542 207.658L540.808 206.275L541.442 205.583L542.451 208.06L551.78 230.982Z"
+          fill="black"/>
+    <path
+      d="M600.429 237.712L524.858 227.258L542.451 208.06L543.717 206.677L566.643 181.658C567.039 181.282 567.51 180.993 568.025 180.811C568.54 180.628 569.088 180.556 569.633 180.599C570.178 180.641 570.708 180.797 571.189 181.058C571.669 181.318 572.089 181.676 572.422 182.109C572.506 182.23 572.582 182.357 572.649 182.488L600.429 237.712Z"
+      fill="white"/>
+    <path
+      d="M552.843 175.427C560.06 175.427 565.91 169.59 565.91 162.389C565.91 155.188 560.06 149.35 552.843 149.35C545.626 149.35 539.775 155.188 539.775 162.389C539.775 169.59 545.626 175.427 552.843 175.427Z"
+      fill="white"/>
+    <path d="M481.322 114.838L465.502 112.65L463.309 128.435L479.129 130.623L481.322 114.838Z" fill="#3F3D56"/>
+    <path
+      d="M555.747 270.968C558.272 259.687 550.202 248.288 537.722 245.507C525.243 242.727 513.08 249.618 510.555 260.899C508.031 272.18 516.301 276.341 528.781 279.121C541.26 281.901 553.223 282.249 555.747 270.968Z"
+      fill="#F2F2F2"/>
+    <path
+      d="M531.879 345.755C536.239 345.437 539.676 343.857 539.557 342.226C539.437 340.594 535.806 339.53 531.446 339.848C527.086 340.166 523.649 341.746 523.768 343.377C523.888 345.009 527.519 346.073 531.879 345.755Z"
+      fill="#2F2E41"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1388_31418">
+      <rect width="637.867" height="400" fill="white" transform="translate(0.244629)"/>
+    </clipPath>
+  </defs>
+</svg>

package/lib/components/CardNumbers.vue

@@ -0,0 +1,94 @@
+<!-- v1.0 -->
+<template>
+  <div class="card-numbers" :class="size">
+    <span class="label typo" :class="labelFontClass">{{ label }}</span>
+    <div class="values" :class="size">
+      <span v-if="size === 'small' && max" class="value typo c2-semi-bold">
+        {{ $n(valueAsPercentage, 'percent') }}
+      </span>
+
+      <div class="value typo" :class="valueFontClass">
+        {{ value }}<span class="unit typo" :class="unitFontClass">{{ unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="TSize extends 'small' | 'medium'">
+import { computed } from 'vue'
+
+interface CardNumbersProps {
+  label: string
+  value: number
+  size: TSize
+  unit?: string
+  max?: TSize extends 'small' ? number : never
+}
+
+const props = defineProps<CardNumbersProps>()
+
+const labelFontClass = computed(() => (props.size === 'medium' ? 'c3-semi-bold' : 'c2-semi-bold'))
+
+const valueFontClass = computed(() => (props.size === 'medium' ? 'h3-semi-bold' : 'c2-semi-bold'))
+
+const unitFontClass = computed(() => (props.size === 'medium' ? 'p2-medium' : 'c2-semi-bold'))
+
+const valueAsPercentage = computed(() => {
+  if (props.max === undefined) {
+    return 0
+  }
+
+  return props.value / props.max
+})
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.card-numbers {
+  &.small {
+    --label-color: var(--color-grey-100);
+  }
+
+  &.medium {
+    --label-color: var(--color-grey-300);
+  }
+}
+
+/* IMPLEMENTATION */
+.card-numbers {
+  display: flex;
+  gap: 0.8rem;
+  width: fit-content;
+
+  &.medium {
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+}
+
+.label {
+  color: var(--label-color);
+}
+
+.values {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  align-items: flex-end;
+
+  &.medium {
+    align-items: flex-start;
+  }
+}
+
+.value {
+  color: var(--color-grey-100);
+  display: flex;
+  gap: 0.2rem;
+  align-items: center;
+}
+
+.unit {
+  color: var(--color-grey-100);
+}
+</style>

package/lib/components/DonutChart.vue

@@ -0,0 +1,92 @@
+<!-- v1.1 -->
+<template>
+  <svg class="donut-chart" viewBox="0 0 100 100">
+    <circle class="segment" cx="50" cy="50" r="40" />
+    <circle
+      v-for="(segment, index) in computedSegments"
+      :key="index"
+      :class="segment.color"
+      :stroke-dasharray="`${segment.percent} ${circumference - segment.percent}`"
+      :stroke-dashoffset="segment.offset"
+      class="segment"
+      cx="50"
+      cy="50"
+      r="40"
+    />
+    <UiIcon :icon height="24" width="24" x="38" y="38" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { computed } from 'vue'
+
+type Segment = {
+  value: number
+  color: 'success' | 'warning' | 'error' | 'unknown'
+}
+
+type ComputedSegment = {
+  color: 'success' | 'warning' | 'error' | 'unknown'
+  percent: number
+  offset: number
+}
+
+const props = defineProps<{
+  segments: Segment[]
+  maxValue?: number
+  icon?: IconDefinition
+}>()
+
+const circumference = Math.PI * 80
+
+const totalValue = computed(() => {
+  const sumOfValues = props.segments.reduce((acc, segment) => acc + segment.value, 0)
+  return Math.max(props.maxValue ?? 0, sumOfValues)
+})
+
+const computedSegments = computed<ComputedSegment[]>(() => {
+  let nextOffset = circumference / 4
+  return props.segments.map(segment => {
+    const percent = (segment.value / totalValue.value) * circumference
+    const currentSegment = {
+      color: segment.color,
+      percent,
+      offset: nextOffset,
+    }
+    nextOffset -= percent
+    return currentSegment
+  })
+})
+</script>
+
+<style scoped lang="postcss">
+.donut-chart {
+  width: 100px;
+  height: 100px;
+}
+
+.segment {
+  stroke: var(--stroke-color);
+  stroke-width: 10;
+  fill: transparent;
+  --stroke-color: var(--color-grey-100);
+
+  &.success {
+    --stroke-color: var(--color-green-base);
+  }
+
+  &.warning {
+    --stroke-color: var(--color-orange-base);
+  }
+
+  &.error {
+    --stroke-color: var(--color-red-base);
+  }
+
+  &.unknown {
+    --stroke-color: var(--color-grey-400);
+  }
+}
+</style>

package/lib/components/LegendTitle.vue

@@ -0,0 +1,31 @@
+<!-- v1.0 -->
+<template>
+  <div class="legend-title typo c3-semi-bold">
+    <slot />
+    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="info" class="tooltip-icon" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+defineProps<{
+  iconTooltip?: string
+  icon?: IconDefinition
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.legend-title {
+  color: var(--color-grey-200);
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.tooltip-icon {
+  font-size: 1.2rem;
+}
+</style>

package/lib/components/StatusPill.vue

@@ -4,10 +4,10 @@
 
 <script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
-import { computed } from 'vue'
+import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
-import type { Color } from '@core/types/color.type'
+import { computed } from 'vue'
 
 type Props = {
   state: 'success' | 'partial' | 'failure'

package/lib/components/UiCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="ui-card" :class="{ horizontal }">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+type Props = {
+  horizontal?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-card {
+  display: flex;
+  gap: 2.4rem;
+  padding: 2.4rem;
+  flex-direction: column;
+  background-color: var(--background-color-primary);
+  border: 0.1rem solid var(--color-grey-500);
+  border-radius: 0.8rem;
+}
+
+.horizontal {
+  flex-direction: row;
+}
+</style>

package/lib/components/UiLegend.vue

@@ -0,0 +1,68 @@
+<!-- v1.0 -->
+<template>
+  <li :class="color" class="ui-legend">
+    <UiIcon :icon="faCircle" class="circle-icon" />
+    <span class="label typo p3-regular"><slot /></span>
+    <UiIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" color="info" />
+
+    <span class="value-and-unit typo c3-semi-bold">{{ value }} {{ unit }}</span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCircleInfo, faCircle } from '@fortawesome/free-solid-svg-icons'
+
+type LegendColor = 'default' | 'success' | 'warning' | 'error' | 'disabled' | 'dark-blue'
+
+defineProps<{
+  color: LegendColor
+  value?: number
+  unit?: string
+  tooltip?: string
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.ui-legend {
+  &.success {
+    --circle-color: var(--color-green-base);
+  }
+  &.warning {
+    --circle-color: var(--color-orange-base);
+  }
+  &.error {
+    --circle-color: var(--color-red-base);
+  }
+  &.default {
+    --circle-color: var(--color-purple-base);
+  }
+  &.disabled {
+    --circle-color: var(--color-grey-300);
+  }
+  &.dark-blue {
+    --circle-color: var(--color-grey-100);
+  }
+}
+/* IMPLEMENTATION */
+.ui-legend {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+.circle-icon {
+  font-size: 0.8rem;
+  color: var(--circle-color);
+}
+.tooltip-icon {
+  font-size: 1.2rem;
+}
+.label {
+  color: var(--color-grey-000);
+}
+.value-and-unit {
+  color: var(--color-grey-300);
+}
+</style>