@indico-data/design-system 1.0.47 → 1.0.49

package/src/components/Icon/indicons.tsx

@@ -47,6 +47,21 @@ const indicons = {
       <path d="M68.8 83.2L53.3 98.6c-1.8 1.8-4.8 1.8-6.6 0L31.2 83.2c-3-3-.9-8 3.3-8h10V55.5H24.8v10c0 4.2-5 6.3-8 3.3L1.4 53.3c-1.8-1.8-1.8-4.8 0-6.6l15.5-15.5c3-3 8-.9 8 3.3v10h19.7V24.8h-10c-4.2 0-6.3-5-3.3-8L46.7 1.4c1.8-1.8 4.8-1.8 6.6 0l15.5 15.5c3 3 .9 8-3.3 8h-10v19.7h19.7v-10c0-4.2 5-6.3 8-3.3l15.5 15.5c1.8 1.8 1.8 4.8 0 6.6L83.2 68.8c-3 3-8 .9-8-3.3v-10H55.5v19.7h10c4.2 0 6.2 5 3.3 8z" />
     </svg>
   ),
+  bookmark: (
+    <svg viewBox="0 0 24 24">
+      <path d="M20.5 1C20 .5 19.3.2 18.6.2H5.4C4.7.2 4 .5 3.5 1s-.8 1.2-.8 1.8v20.9l9.3-4 9.3 4V2.8c0-.6-.3-1.3-.8-1.8m-1.6 19L12 17l-6.9 3V2.7h13.8z" />
+    </svg>
+  ),
+  bookmarks: (
+    <svg viewBox="0 0 24 24">
+      <path d="M15.4 6.5c.1 0 .1 0 .1.1v14l-4.8-2.2-.9-.4-.9.4-4.8 2.2v-14c0-.1 0-.1.1-.1zm0-2.2H4.2C3 4.3 2 5.4 2 6.6V24l7.9-3.6 7.9 3.6V6.6c-.1-1.2-1.1-2.3-2.4-2.3m4.5-2v18.3H22V2.3C22 1 21 0 19.8 0H5.5v2.2h14.3s.1 0 .1.1" />
+    </svg>
+  ),
+  'bookmark-saved': (
+    <svg viewBox="0 0 24 24">
+      <path d="m16.8 7.9-3.6-3.6 1.5-1.5 2 2 5-4.8 1.5 1.5zm.2 3.5v8.8l-6.9-2.9-6.9 2.9V2.9h6.7V.5H3.5c-.7 0-1.4.3-1.9.8S.8 2.4.8 3.1V24l9.3-4 9.3 4V11.4z" />
+    </svg>
+  ),
   branch: (
     <svg viewBox="0 0 642 514">
       <path
@@ -60,6 +75,11 @@ const indicons = {
       <path d="M100 50c0 27.6-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0s50 22.4 50 50zM78 30.7c-.7-1-1.9-1.5-3.5-1.5-1.2 0-2.3.5-3.3 1.5C65 37 45.3 56.6 42.4 59.4L28.8 48c-1-.9-2.2-1.3-3.5-1.2-1.3.1-2.5.7-3.3 1.8-.9 1-1.3 2.2-1.2 3.5.1 1.3.7 2.5 1.8 3.3l16.8 14.2c.9.7 2 1.1 3.1 1.1 1.3 0 2.5-.5 3.4-1.4 6.8-6.6 28.7-28.7 32-32 1.8-1.7 1.8-4.6.1-6.6z" />
     </svg>
   ),
+  'circle-help': (
+    <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12m0-22C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m.1 17.5H12c-.6 0-1-.4-1-1v-.1c0-.6.4-1 1-1h.1c.6 0 1 .4 1 1v.1c0 .6-.5 1-1 1m.9-3.9v-1.2c0-.2.1-.3.3-.4 2.5-.7 4-3.2 3.4-5.8-.4-1.7-1.8-3.1-3.5-3.5-2.5-.6-5.1.9-5.8 3.4-.1.5.2 1.1.7 1.2.5.2 1.1-.2 1.2-.7.4-1.3 1.7-2.4 3.4-2 1 .2 1.8 1.1 2 2 .4 1.7-.7 3-2 3.4-1 .3-1.7 1.2-1.7 2.3v1.2c0 .6.4 1 1 1s1-.3 1-.9" />
+    </svg>
+  ),
   check: (
     <svg viewBox="0 0 100 100" fill="currentColor">
       <path d="M96.4 18.5c-1.4-1.6-3.4-2.4-6.3-2.4-2.1 0-4.3 1-6 2.7-10.9 11.1-41.6 41.6-46.7 46.7l-22-18c-1.8-1.6-4.1-2.3-6.4-2.1-2.3.2-4.4 1.3-6 3.1-3.2 3.7-2.8 9.2 1 12.4l27.9 23c1.6 1.3 3.6 2 5.6 2 2.3 0 4.6-.8 6.1-2.5 12-11.8 46.8-46.7 52.6-52.6 3.3-3.2 3.4-8.6.2-12.3z" />
@@ -146,6 +166,21 @@ const indicons = {
       <path d="M66.1 1.6c-1.3 2.6-1.3 5.7 0 8.2l3.8 7.5c2.3 4.6 2.3 10.1 0 14.7l-3.8 7.5c-1.3 2.6-1.3 5.7 0 8.2l3.8 7.5c2.3 4.6 2.3 10.1 0 14.7l-3 5.9h-7.7c.2-.5.4-1.1.7-1.6l3.8-7.5c1.3-2.6 1.3-5.7 0-8.2L59.9 51c-2.3-4.6-2.3-10.1 0-14.7l3.8-7.5c1.3-2.6 1.3-5.7 0-8.2l-3.8-7.5C57.8 9 57.6 4.2 59.2 0h7.7l-.8 1.6zM83.9 0h-7.7c-1.6 4.2-1.4 9 .7 13.1l3.8 7.5c1.3 2.6 1.3 5.7 0 8.2l-3.8 7.5c-2.3 4.6-2.3 10.1 0 14.7l3.8 7.5c1.3 2.6 1.3 5.7 0 8.2l-3.8 7.5c-.3.5-.5 1.1-.7 1.6h7.7l3-5.9c2.3-4.6 2.3-10.1 0-14.7l-3.8-7.5c-1.3-2.6-1.3-5.7 0-8.2l3.8-7.5c2.3-4.6 2.3-10.1 0-14.7l-3.8-7.5c-1.3-2.6-1.3-5.7 0-8.2l.8-1.6zm-34 0h-7.7c-1.6 4.2-1.4 9 .7 13.1l3.8 7.5c1.3 2.6 1.3 5.7 0 8.2l-3.8 7.5c-2.3 4.6-2.3 10.1 0 14.7l3.8 7.5c1.3 2.6 1.3 5.7 0 8.2l-3.8 7.5c-.3.5-.5 1.1-.7 1.6h7.7l3-5.9c2.3-4.6 2.3-10.1 0-14.7l-3.8-7.5c-1.3-2.6-1.3-5.7 0-8.2l3.8-7.5c2.3-4.6 2.3-10.1 0-14.7l-3.8-7.5c-1.3-2.6-1.3-5.7 0-8.2l.8-1.6z" />
     </svg>
   ),
+  cog: (
+    <svg viewBox="0 0 24 24">
+      <path d="M15.4 23.4c-.5 0-.9-.1-1.3-.3l-1.6-.8q-.45-.15-.9 0l-1.6.8c-1 .5-2 .4-2.9-.1l-2.2-1.3c-.9-.5-1.4-1.4-1.5-2.4l-.1-1.8c0-.3-.2-.6-.4-.8l-1.5-1C.5 15.2 0 14.3 0 13.3v-2.5c0-1 .5-1.9 1.3-2.5l1.5-1c.3-.2.4-.5.4-.8l.1-1.8c.1-1 .6-1.9 1.5-2.4L7.1 1C8 .5 9 .4 9.9.9l1.6.8q.45.15.9 0L14 .9c1-.5 2-.4 2.9.1l2.2 1.3c.9.5 1.4 1.4 1.5 2.4l.1 1.8c0 .3.2.6.4.8l1.5 1c.8.6 1.3 1.5 1.3 2.5v2.5c0 1-.5 1.9-1.3 2.5l-1.5 1c-.3.2-.4.5-.4.8l-.1 1.8c-.1 1-.6 1.9-1.5 2.4L16.9 23c-.5.3-1 .4-1.5.4M12 20.2c.5 0 .9.1 1.3.3l1.6.8q.45.15.9 0L18 20c.3-.2.5-.5.5-.8l.1-1.8c.1-.9.6-1.8 1.3-2.3l1.5-1c.3-.2.4-.5.4-.8v-2.5c0-.3-.2-.6-.4-.8l-1.5-1c-.8-.5-1.3-1.4-1.3-2.3l-.1-1.8c0-.3-.2-.6-.5-.8l-2.2-1.3q-.45-.3-.9 0l-1.6.8c-.8.4-1.8.4-2.7 0L9 2.7c-.3-.2-.6-.1-.9 0L5.9 4c-.3.1-.5.4-.5.8l-.1 1.8c0 .9-.5 1.8-1.3 2.3l-1.5 1c-.3.2-.5.5-.5.8v2.5c0 .3.2.6.4.8l1.5 1c.8.5 1.3 1.4 1.3 2.3l.1 1.8c0 .3.2.6.5.8L8 21.2q.45.3.9 0l1.6-.8c.6-.1 1-.2 1.5-.2m0-2.8c-2.9 0-5.3-2.4-5.3-5.3S9.1 6.8 12 6.8s5.3 2.4 5.3 5.3-2.4 5.3-5.3 5.3m0-8.7c-1.8 0-3.3 1.5-3.3 3.3s1.5 3.3 3.3 3.3 3.3-1.5 3.3-3.3-1.5-3.3-3.3-3.3" />
+    </svg>
+  ),
+  collection: (
+    <svg viewBox="0 0 24 24">
+      <path d="M21 24H3c-1.7 0-3-1.4-3-3V11c0-1.7 1.4-3 3-3h18c1.7 0 3 1.4 3 3v10c0 1.6-1.4 3-3 3M3 9.9c-.6 0-1 .5-1 1v10c0 .6.5 1 1 1h18c.6 0 1-.5 1-1v-10c0-.6-.5-1-1-1zM21.6 5c0-.6-.5-1-1-1H3.3c-.6 0-1 .5-1 1s.5 1 1 1h17.3c.5 0 1-.5 1-1m-2.5-4c0-.6-.5-1-1-1H5.9c-.6 0-1 .5-1 1s.5 1 1 1h12.2c.5 0 1-.4 1-1" />
+    </svg>
+  ),
+  compare: (
+    <svg viewBox="0 0 24 24">
+      <path d="M24 5.5c0 .6-.4 1-1 1H3.4l2.8 2.8c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3s-.5-.1-.7-.3L.3 6.2c-.4-.4-.4-1 0-1.4L4.8.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4L3.4 4.5H23c.6 0 1 .4 1 1m-23 14h19.6l-2.8 2.8c-.4.4-.4 1 0 1.4s1 .4 1.4 0l4.5-4.5c.4-.4.4-1 0-1.4l-4.5-4.5c-.2-.2-.4-.3-.7-.3s-.5.1-.7.3c-.4.4-.4 1 0 1.4l2.8 2.8H1c-.6 0-1 .4-1 1s.4 1 1 1" />
+    </svg>
+  ),
   'company-name': (
     <svg viewBox="0 0 50 50" fill="currentColor">
       <path d="m8.05 41.15v-26.9h10.7v-5.75l5.25-5 5.25 5v13.95h10.7v18.7zm2.25-2.25h5.95v-5.95h-5.95zm0-8.25h5.95v-5.95h-5.95zm0-8.2h5.95v-5.95h-5.95zm10.7 16.45h6v-5.95h-6zm0-8.25h6v-5.95h-6zm0-8.2h6v-5.95h-6zm0-8.2h6v-5.95h-6zm10.75 24.65h5.95v-5.95h-5.95zm0-8.25h5.95v-5.95h-5.95z" />
@@ -181,6 +216,19 @@ const indicons = {
       <path d="M96.9 75H31.2v-3.1c0-1.7-1.4-3.1-3.1-3.1h-6.2c-1.7 0-3.1 1.4-3.1 3.1V75H3.1C1.4 75 0 76.4 0 78.1v6.2c0 1.7 1.4 3.1 3.1 3.1h15.6v3.1c0 1.7 1.4 3.1 3.1 3.1H28c1.7 0 3.1-1.4 3.1-3.1v-3.1h65.6c1.7 0 3.1-1.4 3.1-3.1v-6.2c.2-1.7-1.2-3.1-2.9-3.1zm0-31.2H81.2v-3.1c0-1.7-1.4-3.1-3.1-3.1h-6.2c-1.7 0-3.1 1.4-3.1 3.1v3.1H3.1c-1.7 0-3.1 1.4-3.1 3.1v6.2c0 1.7 1.4 3.1 3.1 3.1h65.6v3.1c0 1.7 1.4 3.1 3.1 3.1H78c1.7 0 3.1-1.4 3.1-3.1v-3.1h15.6c1.7 0 3.1-1.4 3.1-3.1v-6.2c.2-1.7-1.2-3.1-2.9-3.1zm0-31.3H56.2V9.4c0-1.7-1.4-3.1-3.1-3.1h-6.2c-1.7 0-3.1 1.4-3.1 3.1v3.1H3.1c-1.7 0-3.1 1.4-3.1 3.1v6.2C0 23.6 1.4 25 3.1 25h40.6v3.1c0 1.7 1.4 3.1 3.1 3.1H53c1.7 0 3.1-1.4 3.1-3.1V25h40.6c1.7 0 3.1-1.4 3.1-3.1v-6.2c.2-1.8-1.2-3.2-2.9-3.2z" />
     </svg>
   ),
+  'choose-library': (
+    <svg id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 100 100">
+      <style>{`.layer1 { fill: #efeaf5; } .layer2 { fill: #c1afd5; }`}</style>
+      <path
+        d="M89.9 100H46.5c-5.5 0-9.9-4.4-9.9-9.9s4.4-9.9 9.9-9.9h.7c.9-8.5 8.1-15.1 16.8-15.1 5.3 0 10.3 2.5 13.5 6.7q1.8-.6 3.6-.6c5.3 0 9.8 3.9 10.6 9.1 4.7.8 8.3 4.9 8.3 9.8-.1 5.5-4.6 9.9-10.1 9.9M46.5 84.2c-3.3 0-5.9 2.7-5.9 5.9 0 3.3 2.7 5.9 5.9 5.9H90c3.3 0 5.9-2.7 5.9-5.9 0-3.3-2.6-5.9-5.9-5.9h-.2q-.9 0-1.5-.6c-.6-.6-.6-.9-.6-1.5v-.2c0-3.7-3-6.7-6.7-6.7q-1.8 0-3.3.9c-.9.5-2.2.2-2.7-.7-2.3-3.9-6.5-6.3-11-6.3-7.1 0-12.8 5.8-12.8 12.8v.6c0 .7-.3 1.3-.8 1.7s-1.2.5-1.9.3-1.3-.3-2-.3M57.4 37.3H10.5C4.7 37.3 0 32.6 0 26.8s4.7-10.5 10.5-10.5h.9C12.3 7.2 20 0 29.3 0 35 0 40.4 2.8 43.8 7.3c1.3-.5 2.6-.7 4-.7 5.7 0 10.5 4.2 11.3 9.8 5 .8 8.9 5.2 8.9 10.4 0 5.8-4.8 10.5-10.6 10.5M10.5 20.2c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5h46.9c3.6 0 6.5-2.9 6.5-6.5s-2.9-6.5-6.5-6.5h-.2q-.9 0-1.5-.6c-.6-.6-.6-.9-.6-1.5v-.2c0-4.1-3.3-7.4-7.4-7.4-1.3 0-2.5.3-3.7 1-.9.5-2.2.2-2.7-.7-2.6-4.3-7.1-6.9-12-6.9-7.7 0-14 6.3-14 14v.6c0 .7-.3 1.3-.8 1.7s-1.2.5-1.9.3c-.6-.2-1.4-.3-2.1-.3"
+        className="layer1"
+      />
+      <path
+        d="M25.5 77.7c-1.4 0-2.3-.9-2.3-2.3V24.6c0-1.4.9-2.3 2.3-2.3s2.3.9 2.3 2.3v50.7c0 1.4-1.1 2.4-2.3 2.4m13.9 0c-1.4 0-2.3-.9-2.3-2.3V24.6c0-1.4.9-2.3 2.3-2.3s2.3.9 2.3 2.3v50.7c0 1.4-1.2 2.4-2.3 2.4m38.9-3.5L53.2 23.7c-.5-1.2-1.8-1.6-3-1.2-1.4.7-1.8 2.1-1.2 3.2l25.1 50.5c.5 1.2 1.8 1.6 3 1.2 1.2-.7 1.7-2 1.2-3.2"
+        className="layer2"
+      />
+    </svg>
+  ),
   crowdlabel: (
     <svg viewBox="0 0 100 100" fill="currentColor">
       <path d="M55 .2C78.6 2.6 97.4 21.4 99.8 45H89.7C87.4 26.9 73.1 12.6 55 10.3V.2zM10.3 45C12.6 26.9 26.9 12.6 45 10.3V.2C21.4 2.6 2.6 21.4.2 45h10.1zm79.4 10C87.4 73.1 73.1 87.4 55 89.7v10.1C78.6 97.4 97.4 78.6 99.8 55H89.7zM45 89.7C26.9 87.4 12.6 73.1 10.3 55H.2C2.6 78.6 21.4 97.4 45 99.8V89.7zM71 45H55V29c0-2.8-2.2-5-5-5s-5 2.2-5 5v16H29c-2.8 0-5 2.2-5 5s2.2 5 5 5h16v16c0 2.8 2.2 5 5 5s5-2.2 5-5V55h16c2.8 0 5-2.2 5-5s-2.3-5-5-5z" />
@@ -315,11 +363,28 @@ const indicons = {
       <path d="M5.9 46H40c3.3 0 6-2.7 6-6V5.9c0-2.5-2.3-4.4-4.8-3.9C21.5 5.9 5.9 21.5 1.9 41.2c-.5 2.5 1.4 4.8 4 4.8zM36 13.9V36H13.9C18 26 26 18 36 13.9zM62 56c-3.3 0-6 2.7-6 6v34.2c0 2.5 2.3 4.4 4.8 3.9 19.8-4 35.4-19.6 39.3-39.3.5-2.5-1.4-4.8-3.9-4.8H62zm4 32.1V66h22.1C84 76 76 84 66 88.1zM40 56H5.9c-2.5 0-4.4 2.3-3.9 4.8 4 19.8 19.6 35.4 39.3 39.3 2.5.5 4.8-1.4 4.8-3.9V62c-.1-3.3-2.8-6-6.1-6zM13.9 66H36v22.1C26 84 18 76 13.9 66zM62 46h34.2c2.5 0 4.4-2.3 3.9-4.8-4-19.8-19.6-35.4-39.3-39.3-2.5-.5-4.8 1.4-4.8 4V40c0 3.3 2.7 6 6 6zm26.1-10H66V13.9C76 18 84 26 88.1 36z" />
     </svg>
   ),
+  'find-documents': (
+    <svg viewBox="0 0 100 100">
+      <path
+        fill="#efeaf5"
+        d="M46.4 .8c-.8-.6-1.8-.8-2.6-.8H12.4C10 0 8 2.6 8 5v60c0 2.4 2 5 4.4 5h46.9c2.4 0 4.4-2.6 4.4-5V19.8c0-.8-.2-1.8-.8-2.4zM58.4 64.3H13.5V5.5H43v12c0 2 1.4 3.4 3.4 3.4h12"
+      />
+      <path
+        fill="#c1afd5"
+        d="M91.3 95.6 74.6 78.9C78 74.7 80 69.4 80 63.8 80.2 50.7 69.5 40 56.3 40c-13.1.2-23.8 10.9-23.8 24s10.7 23.8 23.8 23.8c5.7 0 10.7-2 14.9-5.2l16.7 16.7c.4.4 1.2.8 1.8.8.8 0 1.2-.2 1.8-.8.8-1.3.8-2.7-.2-3.7m-35-12.9c-10.4 0-18.9-8.4-18.9-18.6s8.4-18.9 18.9-18.9 18.9 8.4 18.9 18.9-8.5 18.6-18.9 18.6"
+      />
+    </svg>
+  ),
   graphiql: (
     <svg viewBox="0 0 102 102" fill="currentColor">
       <path d="M90,62.8c-0.8-0.4-1.5-0.7-2.3-0.9V38.1c0.8-0.2,1.6-0.5,2.4-0.9c4.3-2.5,5.7-7.9,3.3-12.2c-2.5-4.3-7.9-5.7-12.2-3.3  c-0.8,0.4-1.4,1-2,1.6L58.5,11.5c0.2-0.8,0.4-1.7,0.4-2.5C58.9,4,54.9,0,50,0s-8.9,4-8.9,8.9c0,0.9,0.1,1.7,0.4,2.5L20.9,23.3  c-0.6-0.6-1.2-1.1-2-1.6c-4.3-2.5-9.7-1-12.2,3.3c-2.5,4.3-1,9.7,3.3,12.2c0.8,0.4,1.6,0.7,2.4,0.9v23.8c-0.8,0.2-1.6,0.5-2.3,0.9  C5.7,65.3,4.3,70.7,6.7,75s7.9,5.7,12.2,3.3c0.8-0.4,1.4-1,2-1.6l20.6,11.9c-0.2,0.8-0.4,1.6-0.4,2.5c0,4.9,4,8.9,8.9,8.9  s8.9-4,8.9-8.9c0-1-0.2-1.9-0.5-2.8l20.4-11.8c0.6,0.7,1.4,1.3,2.2,1.8c4.3,2.5,9.7,1,12.2-3.3C95.8,70.7,94.3,65.3,90,62.8z   M23.1,68.4c-0.2-0.8-0.5-1.6-0.9-2.3c-0.4-0.8-1-1.4-1.6-2l26.9-46.6c0.8,0.2,1.6,0.4,2.5,0.4c0.9,0,1.7-0.1,2.5-0.4l26.9,46.6  c-0.6,0.6-1.1,1.2-1.6,2c-0.4,0.8-0.7,1.5-0.9,2.3H23.1z M77,27c-0.6,2.2-0.4,4.7,0.8,6.9c1.3,2.2,3.3,3.6,5.6,4.2v23.8  c-0.1,0-0.2,0.1-0.3,0.1L56.2,15.4c0.1-0.1,0.2-0.2,0.2-0.2L77,27z M43.6,15.1c0.1,0.1,0.2,0.2,0.3,0.3L16.9,62  c-0.1,0-0.2-0.1-0.3-0.1V38.1c2.3-0.6,4.3-2,5.6-4.2c1.3-2.2,1.5-4.7,0.8-6.9L43.6,15.1z M56.6,85.1c-1.6-1.8-4-2.9-6.6-2.9  c-2.5,0-4.8,1-6.4,2.7L23,73c0-0.1,0.1-0.2,0.1-0.3h53.8c0,0.2,0.1,0.4,0.2,0.6L56.6,85.1z" />
     </svg>
   ),
+  'grid-view': (
+    <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M8.9 2.4v6.5H2.4V2.4zM9.4 0H1.9C.9 0 0 .9 0 1.9v7.4c0 1.1.9 1.9 1.9 1.9h7.4c1.1 0 1.9-.9 1.9-1.9V1.9c.1-1-.8-1.9-1.8-1.9m12.2 2.4v6.5h-6.5V2.4zm.5-2.4h-7.4c-1.1 0-1.9.9-1.9 1.9v7.4c0 1.1.9 1.9 1.9 1.9h7.4c1.1 0 1.9-.9 1.9-1.9V1.9c0-1-.9-1.9-1.9-1.9M8.9 15.1v6.5H2.4v-6.5zm.5-2.4H1.9c-1.1 0-1.9.9-1.9 1.9V22c0 1.1.9 2 1.9 2h7.4c1.1 0 1.9-.9 1.9-1.9v-7.4c.1-1.1-.8-2-1.8-2m12.2 2.4v6.5h-6.5v-6.5zm.5-2.4h-7.4c-1.1 0-1.9.9-1.9 1.9V22c0 1.1.9 1.9 1.9 1.9h7.4c1.1 0 1.9-.9 1.9-1.9v-7.4c0-1-.9-1.9-1.9-1.9" />
+    </svg>
+  ),
   happy: (
     <svg viewBox="0 0 100 100" fill="currentColor">
       <path d="M100 50c0 27.6-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0s50 22.4 50 50zm-78.6-7.4c-.1-3.1 2.5-5.7 5.7-5.7 3.1 0 5.7 2.6 5.7 5.7 0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5C37.7 36.7 32.8 32 27 32s-10.6 4.8-10.6 10.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5zM73 32c-5.9 0-10.6 4.8-10.6 10.6 0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5c0-3.1 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5C83.7 36.7 78.9 32 73 32zm4.8 24.6c-1.4-.6-3 0-3.5 1.4-4.2 9.7-13.7 16-24.3 16-10.6 0-20.1-6.3-24.3-16.1-.6-1.4-2.1-2-3.5-1.4-1.4.6-2 2.1-1.4 3.5 5.1 11.7 16.5 19.3 29.3 19.3 12.7 0 24.2-7.5 29.1-19.3.6-1.2-.1-2.8-1.4-3.4z" />
@@ -358,8 +423,8 @@ const indicons = {
     </svg>
   ),
   'indico-o': (
-    <svg viewBox="0 0 100 100" fill="currentColor">
-      <path d="M100 50c0 27.6-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0s50 22.4 50 50zM50 19.4c-16.9 0-30.6 13.7-30.6 30.6S33.1 80.6 50 80.6 80.6 66.9 80.6 50 66.9 19.4 50 19.4zm0 21.7c-4.9 0-8.9 4-8.9 8.9s4 8.9 8.9 8.9 8.9-4 8.9-8.9-4-8.9-8.9-8.9z" />
+    <svg viewBox="0 0 24 24">
+      <path d="M13.8 10.2h-3.6v3.6h3.6zm-8.9 0c.9-3.1 3.7-5.4 7.1-5.4s6.2 2.3 7.1 5.5H24C23.1 4.5 18 0 12 0S.9 4.5.1 10.2zM19 13.8c-.8 3.1-3.6 5.4-7 5.4s-6.2-2.3-7-5.4H.1C1 19.6 6 24 12 24s11-4.4 11.9-10.2z" />
     </svg>
   ),
   info: (
@@ -379,8 +444,8 @@ const indicons = {
     </svg>
   ),
   key: (
-    <svg viewBox="0 0 100 100" fill="currentColor">
-      <path d="M81.3 30c-3.1 3.1-8.1 3.1-11.4 0-3.1-3.1-3.1-8.1 0-11.4 3.1-3.1 8.1-3.1 11.4 0 3.1 3.3 3.1 8.3 0 11.4zm11.4-19.1C81.5-1.8 61.9-2.3 50.1 9.6c-7.9 7.9-10.3 19.1-7.4 29L2.5 78.9C1.4 80 .8 81.4.7 82.9L0 95.7c-.1 1.9 1.5 3.4 3.4 3.3l15.5-1.3c1.3-.2 2.4-.7 3.6-1.7V82.2h13v-13H51c6.5-6.2 11.3-11 11.3-11 10.5 3.1 22.4.2 30.2-8.6 9.9-10.8 10-27.7.2-38.7z" />
+    <svg viewBox="0 0 24 24">
+      <path d="M19.5 7c-.7.7-1.9.7-2.7 0-.8-.8-.8-2 0-2.8.7-.7 1.9-.7 2.7 0 .8.8.8 2 0 2.8m2.8-4.6c-2.7-3-7.4-3.2-10.2-.3-2 1.9-2.5 4.5-1.9 6.9L.6 18.7c-.3.3-.4.6-.4 1l-.2 3c0 .5.4.8.8.8l3.7-.3c.3 0 .6-.2.9-.4v-3.3h3.1v-3.1h3.7c1.6-1.5 2.7-2.6 2.7-2.6 2.5.7 5.4 0 7.2-2.1 2.5-2.6 2.5-6.7.2-9.3" />
     </svg>
   ),
   label: (
@@ -398,11 +463,26 @@ const indicons = {
       <path d="M85 100H15c-2.7 0-5-2.2-5-5V5c0-2.7 2.2-5 5-5h69c2.7 0 6 2.2 6 5v90c0 2.8-2.2 5-5 5zM46 52H21v4h25v-4zm0 20H21v4h25v-4zm0-10H21v4h25v-4zm0-30H21v4h25v-4zm0-10H21v4h25v-4zm0 20H21v4h25v-4zm8-6h25v-4H54v4zm0-10h25v-4H54v4zm0 20h25v-4H54v4zm0 20h25v-4H54v4zm0 10h25v-4H54v4zm0-20h25v-4H54v4z" />
     </svg>
   ),
+  'list-view': (
+    <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M0 2.4V0h24v2.4zm0 7.2V7.2h24v2.4zm0 7.2v-2.4h24v2.4zM0 24v-2.4h24V24z" />
+    </svg>
+  ),
+  libraries: (
+    <svg viewBox="0 0 26 26" fill="currentColor">
+      <path d="M1 24c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v22c0 .6-.5 1-1 1m6 0c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v22c0 .6-.5 1-1 1m16.9-1.5L13 .6c-.2-.5-.8-.7-1.3-.5-.6.3-.8.9-.5 1.4l10.9 21.9c.2.5.8.7 1.3.5.5-.3.7-.9.5-1.4" />
+    </svg>
+  ),
   location: (
     <svg viewBox="0 0 50 50" fill="currentColor">
       <path d="m22.85 43v-8.75h-11l-5.15-5.1 5.15-5.15h11v-4.35h-14.5v-10.3h14.5v-4.35h2.3v4.35h11l5.15 5.15-5.15 5.15h-11v4.35h14.5v10.25h-14.5v8.75zm-12.2-25.65h24.55l2.9-2.85-2.9-2.85h-24.55zm2.15 14.65h24.55v-5.75h-24.55l-2.9 2.9zm-2.15-14.65v-5.7 5.7zm26.7 14.65v-5.75 5.75z" />
     </svg>
   ),
+  logout: (
+    <svg viewBox="0 0 24 24">
+      <path d="M13.8 24h-10C1.7 24 0 22.3 0 20.2V3.8C0 1.8 1.6.1 3.7 0h10.1c2.1 0 3.8 1.7 3.8 3.8v1.5c0 .6-.4 1-1 1s-1-.4-1-1V3.8c0-1-.8-1.8-1.8-1.8h-10c-1 .1-1.8.9-1.8 1.8v16.4c0 1 .8 1.8 1.8 1.8h10c1 0 1.8-.8 1.8-1.8v-1.5c0-.6.4-1 1-1s1 .4 1 1v1.5c0 2.1-1.7 3.8-3.8 3.8m9.9-12.7-3.9-3.9c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l2.2 2.2H8.2c-.6 0-1 .4-1 1s.4 1 1 1h12.4l-2.2 2.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3s.5-.1.7-.3l3.9-4c.4-.4.4-1 0-1.4" />
+    </svg>
+  ),
   lock: (
     <svg viewBox="0 0 100 100" fill="currentColor">
       <path d="M79 46.2V29C79 13 66 0 50 0S21 13 21 29v17.2c-5.7 1-10 5.9-10 11.8v30c0 6.6 5.4 12 12 12h54c6.6 0 12-5.4 12-12V58c0-5.9-4.3-10.9-10-11.8zM49.2 14c8.7-.4 15.8 6.5 15.8 15v17H35V29.4c0-8 6.2-15 14.2-15.4zm.8 71c-4.4 0-8-3.6-8-8v-8c0-4.4 3.6-8 8-8s8 3.6 8 8v8c0 4.4-3.6 8-8 8z" />
@@ -433,6 +513,43 @@ const indicons = {
       <path d="M42 65c2.2 0 4 1.8 4 4v5c0 2.2-1.8 4-4 4H8.6c-2.7-4-4.8-8.3-6.3-13H42zm25-12v-5c0-2.2-1.8-4-4-4H.4c-.3 2-.4 4-.4 6 0 2.4.2 4.7.5 7H63c2.2 0 4-1.8 4-4zM51 23H7.9C5.4 27 3.4 31.4 2 36h49c2.2 0 4-1.8 4-4v-5c0-2.2-1.8-4-4-4zm49 27c0-27.6-22.4-50-50-50-.8 0-1.7 0-2.5.1-.2 0-.5 0-.7.1-.6 0-1.2.1-1.8.1-.3 0-.5.1-.8.1-.6.1-1.1.1-1.6.2-.3 0-.5.1-.8.1-.5.1-1.1.2-1.6.3-.3.1-.6.1-.8.2-.5.1-1 .2-1.5.4-.3.1-.6.2-.9.2-.5.1-1 .3-1.4.4l-.9.3c-.4.1-.9.3-1.3.4-.3.1-.7.2-1 .4-.4.1-.8.3-1.1.4-.5.2-.9.3-1.3.5-.3.1-.6.3-.9.4-.4.2-.9.4-1.3.6l-.6.3c-.5.3-1 .5-1.5.8-.1 0-.2.1-.3.1-3.2 1.8-6.2 4-9 6.5h18.4c4.7-1.9 9.8-3 15.2-3 22.1 0 40 17.9 40 40S72.1 90 50 90c-5.4 0-10.6-1.1-15.2-3H16.4c2.7 2.5 5.7 4.7 9 6.5.1 0 .2.1.3.1.5.3 1 .6 1.5.8l.6.3c.4.2.9.4 1.3.6.3.1.6.3.9.4.4.2.8.3 1.1.5.4.2.8.3 1.1.4.3.1.7.3 1 .4.4.2.9.3 1.3.4l.9.3c.5.1 1 .3 1.4.4.3.1.6.2.9.2.5.1 1 .2 1.5.4.3.1.6.1.8.2.5.1 1.1.2 1.6.3.3 0 .5.1.8.1.5.1 1.1.1 1.6.2.3 0 .5.1.8.1.6.1 1.2.1 1.8.1.2 0 .5 0 .7.1.8 0 1.7.1 2.5.1C77.6 100 100 77.6 100 50z" />
     </svg>
   ),
+  'no-collections': (
+    <svg viewBox="0 0 100 100">
+      <path
+        fill="#efeaf5"
+        d="M89.9 100H46.5c-5.5 0-9.9-4.4-9.9-9.9s4.4-9.9 9.9-9.9h.7c.9-8.5 8.1-15.1 16.8-15.1 5.3 0 10.3 2.5 13.5 6.7q1.8-.6 3.6-.6c5.3 0 9.8 3.9 10.6 9.1 4.7.8 8.3 4.9 8.3 9.8-.1 5.5-4.6 9.9-10.1 9.9M46.5 84.2c-3.3 0-5.9 2.7-5.9 5.9 0 3.3 2.7 5.9 5.9 5.9H90c3.3 0 5.9-2.7 5.9-5.9 0-3.3-2.6-5.9-5.9-5.9h-.2q-.9 0-1.5-.6c-.6-.6-.6-.9-.6-1.5v-.2c0-3.7-3-6.7-6.7-6.7q-1.8 0-3.3.9c-.9.5-2.2.2-2.7-.7-2.3-3.9-6.5-6.3-11-6.3-7.1 0-12.8 5.8-12.8 12.8v.6c0 .7-.3 1.3-.8 1.7s-1.2.5-1.9.3-1.3-.3-2-.3M57.4 37.3H10.5C4.7 37.3 0 32.6 0 26.8s4.7-10.5 10.5-10.5h.9C12.3 7.2 20 0 29.3 0 35 0 40.4 2.8 43.8 7.3c1.3-.5 2.6-.7 4-.7 5.7 0 10.5 4.2 11.3 9.8 5 .8 8.9 5.2 8.9 10.4 0 5.8-4.8 10.5-10.6 10.5M10.5 20.2c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5h46.9c3.6 0 6.5-2.9 6.5-6.5s-2.9-6.5-6.5-6.5h-.2q-.9 0-1.5-.6c-.6-.6-.6-.9-.6-1.5v-.2c0-4.1-3.3-7.4-7.4-7.4-1.3 0-2.5.3-3.7 1-.9.5-2.2.2-2.7-.7-2.6-4.3-7.1-6.9-12-6.9-7.7 0-14 6.3-14 14v.6c0 .7-.3 1.3-.8 1.7s-1.2.5-1.9.3c-.6-.2-1.4-.3-2.1-.3"
+      />
+      <path
+        fill="#c1afd5"
+        d="M70.2 75.1H29.8c-3.8 0-6.8-3.2-6.8-6.8V45.8c0-3.8 3.1-6.8 6.8-6.8h40.5c3.8 0 6.8 3.1 6.8 6.8v22.5c-.1 3.6-3.3 6.8-6.9 6.8M29.8 43.3c-1.4 0-2.2 1.1-2.2 2.2V68c0 1.3 1.1 2.2 2.2 2.2h40.5c1.3 0 2.2-1.1 2.2-2.2V45.6c0-1.3-1.1-2.2-2.2-2.2H29.8zm41.8-11c0-1.4-1.1-2.2-2.2-2.2h-39c-1.4 0-2.2 1.1-2.2 2.2s1.1 2.2 2.2 2.2h38.9c1.2.1 2.3-1.1 2.3-2.2m-5.6-9c0-1.4-1.1-2.2-2.2-2.2H36.3c-1.4 0-2.2 1.1-2.2 2.2s1.1 2.2 2.2 2.2h27.5c1 .1 2.2-.8 2.2-2.2"
+      />
+    </svg>
+  ),
+  'no-libraries': (
+    <svg viewBox="0 0 100 100">
+      <path
+        fill="#dceafd"
+        d="M89.9 100H46.5c-5.5 0-9.9-4.4-9.9-9.9s4.4-9.9 9.9-9.9h.7c.9-8.5 8.1-15.1 16.8-15.1 5.3 0 10.3 2.5 13.5 6.7q1.8-.6 3.6-.6c5.3 0 9.8 3.9 10.6 9.1 4.7.8 8.3 4.9 8.3 9.8-.1 5.5-4.6 9.9-10.1 9.9M46.5 84.2c-3.3 0-5.9 2.7-5.9 5.9 0 3.3 2.7 5.9 5.9 5.9H90c3.3 0 5.9-2.7 5.9-5.9 0-3.3-2.6-5.9-5.9-5.9h-.2q-.9 0-1.5-.6c-.6-.6-.6-.9-.6-1.5v-.2c0-3.7-3-6.7-6.7-6.7q-1.8 0-3.3.9c-.9.5-2.2.2-2.7-.7-2.3-3.9-6.5-6.3-11-6.3-7.1 0-12.8 5.8-12.8 12.8v.6c0 .7-.3 1.3-.8 1.7s-1.2.5-1.9.3-1.3-.3-2-.3M57.4 37.3H10.5C4.7 37.3 0 32.6 0 26.8s4.7-10.5 10.5-10.5h.9C12.3 7.2 20 0 29.3 0 35 0 40.4 2.8 43.8 7.3c1.3-.5 2.6-.7 4-.7 5.7 0 10.5 4.2 11.3 9.8 5 .8 8.9 5.2 8.9 10.4 0 5.8-4.8 10.5-10.6 10.5M10.5 20.2c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5h46.9c3.6 0 6.5-2.9 6.5-6.5s-2.9-6.5-6.5-6.5h-.2q-.9 0-1.5-.6c-.6-.6-.6-.9-.6-1.5v-.2c0-4.1-3.3-7.4-7.4-7.4-1.3 0-2.5.3-3.7 1-.9.5-2.2.2-2.7-.7-2.6-4.3-7.1-6.9-12-6.9-7.7 0-14 6.3-14 14v.6c0 .7-.3 1.3-.8 1.7s-1.2.5-1.9.3c-.6-.2-1.4-.3-2.1-.3"
+      />
+
+      <path
+        fill="#73b0fa"
+        d="M25.5 77.7c-1.4 0-2.3-.9-2.3-2.3V24.6c0-1.4.9-2.3 2.3-2.3s2.3.9 2.3 2.3v50.7c0 1.4-1.1 2.4-2.3 2.4m13.9 0c-1.4 0-2.3-.9-2.3-2.3V24.6c0-1.4.9-2.3 2.3-2.3s2.3.9 2.3 2.3v50.7c0 1.4-1.2 2.4-2.3 2.4m38.9-3.5L53.2 23.7c-.5-1.2-1.8-1.6-3-1.2-1.4.7-1.8 2.1-1.2 3.2l25.1 50.5c.5 1.2 1.8 1.6 3 1.2 1.2-.7 1.7-2 1.2-3.2"
+      />
+    </svg>
+  ),
+  no_results: (
+    <svg viewBox="0 0 100 100">
+      <path
+        fill="#efeaf5"
+        d="M89.9 100H46.5c-5.5 0-9.9-4.4-9.9-9.9s4.4-9.9 9.9-9.9h.7c.9-8.5 8.1-15.1 16.8-15.1 5.3 0 10.3 2.5 13.5 6.7q1.8-.6 3.6-.6c5.3 0 9.8 3.9 10.6 9.1 4.7.8 8.3 4.9 8.3 9.8-.1 5.5-4.6 9.9-10.1 9.9M46.5 84.2c-3.3 0-5.9 2.7-5.9 5.9 0 3.3 2.7 5.9 5.9 5.9H90c3.3 0 5.9-2.7 5.9-5.9 0-3.3-2.6-5.9-5.9-5.9h-.2q-.9 0-1.5-.6c-.6-.6-.6-.9-.6-1.5v-.2c0-3.7-3-6.7-6.7-6.7q-1.8 0-3.3.9c-.9.5-2.2.2-2.7-.7-2.3-3.9-6.5-6.3-11-6.3-7.1 0-12.8 5.8-12.8 12.8v.6c0 .7-.3 1.3-.8 1.7s-1.2.5-1.9.3-1.3-.3-2-.3M57.4 37.3H10.5C4.7 37.3 0 32.6 0 26.8s4.7-10.5 10.5-10.5h.9C12.3 7.2 20 0 29.3 0 35 0 40.4 2.8 43.8 7.3c1.3-.5 2.6-.7 4-.7 5.7 0 10.5 4.2 11.3 9.8 5 .8 8.9 5.2 8.9 10.4 0 5.8-4.8 10.5-10.6 10.5M10.5 20.2c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5h46.9c3.6 0 6.5-2.9 6.5-6.5s-2.9-6.5-6.5-6.5h-.2q-.9 0-1.5-.6c-.6-.6-.6-.9-.6-1.5v-.2c0-4.1-3.3-7.4-7.4-7.4-1.3 0-2.5.3-3.7 1-.9.5-2.2.2-2.7-.7-2.6-4.3-7.1-6.9-12-6.9-7.7 0-14 6.3-14 14v.6c0 .7-.3 1.3-.8 1.7s-1.2.5-1.9.3c-.6-.2-1.4-.3-2.1-.3"
+      />
+      <path
+        fill="#c1afd5"
+        d="M76 71 61 56c3.1-3.8 4.9-8.5 4.9-13.6C66 30.6 56.4 21 44.5 21c-11.8.2-21.4 9.8-21.4 21.6S32.7 64 44.5 64c5.1 0 9.6-1.8 13.4-4.7l15 15c.4.4 1.1.7 1.6.7.7 0 1.1-.2 1.6-.7.8-1.1.8-2.4-.1-3.3M44.5 59.4c-9.4 0-17-7.6-17-16.7s7.6-17 17-17 17 7.6 17 17-7.6 16.7-17 16.7"
+      />
+    </svg>
+  ),
   'no-format': (
     <svg viewBox="0 0 50 50" fill="currentColor">
       <path d="m24 43q-3.95 0-7.425-1.5t-6.05-4.075-4.05-6.05-1.475-7.475q0-3.95 1.475-7.4t4.05-6.025 6.05-4.025 7.425-1.45 7.425 1.45 6.05 4.025 4.05 6.025 1.475 7.4q0 4-1.475 7.475t-4.05 6.05-6.05 4.075-7.425 1.5zm7.35-26h7.95q-1.75-3.8-4.875-6.225t-7.275-3.225q1.45 1.9 2.475 4.25t1.725 5.2zm-12.35 0h10.1q-0.65-2.8-1.975-5.3t-3.125-4.45q-1.7 1.55-2.875 3.85t-2.125 5.9zm-11.05 11.7h8.25q-0.15-1.4-0.2-2.55t-0.05-2.25q0-1.2 0.05-2.275t0.25-2.325h-8.3q-0.35 1.15-0.525 2.225t-0.175 2.375q0 1.35 0.175 2.475t0.525 2.325zm12.9 11.7q-1.45-1.8-2.525-4.225t-1.675-5.225h-7.95q1.9 3.9 4.8 6.125t7.35 3.325zm-12.15-23.4h7.95q0.65-2.75 1.675-5.075t2.475-4.325q-4.15 0.8-7.225 3.175t-4.875 6.225zm15.3 23.85q1.85-2.05 3.05-4.4t2-5.5h-10.05q0.75 3.1 1.95 5.5t3.05 4.4zm-5.45-12.15h10.95q0.2-1.55 0.275-2.6t0.075-2.2q0-1.05-0.075-2.075t-0.275-2.525h-10.95q-0.2 1.5-0.275 2.525t-0.075 2.075q0 1.15 0.075 2.2t0.275 2.6zm8.65 11.7q3.95-0.9 7.125-3.35t4.975-6.1h-7.9q-0.75 2.8-1.8 5.2t-2.4 4.25zm4.55-11.7h8.3q0.35-1.2 0.525-2.325t0.175-2.475q0-1.3-0.175-2.375t-0.525-2.225h-8.25q0.15 1.65 0.225 2.675t0.075 1.925q0 1.15-0.075 2.225t-0.275 2.575z" />
@@ -506,6 +623,11 @@ const indicons = {
       <path d="m25.8 43q-0.45 0-0.875-0.15t-0.825-0.5l-18.4-18.45q-0.4-0.35-0.55-0.775t-0.15-0.925v-14.95q0-0.95 0.65-1.6t1.6-0.65h14.95q0.45 0 0.925 0.15t0.825 0.5l18.35 18.35q0.8 0.75 0.8 1.7t-0.75 1.7l-14.95 14.95q-0.3 0.3-0.725 0.475t-0.875 0.175zm0.05-2.2 14.95-14.95-18.55-18.6h-15v14.95zm-13.4-26.15q0.9 0 1.55-0.675t0.65-1.575-0.65-1.55-1.55-0.65-1.55 0.65-0.65 1.55 0.65 1.575 1.55 0.675z" />
     </svg>
   ),
+  'preview-view': (
+    <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M21.6 2.4v6.5H2.4V2.4zm.5-2.4H1.9C.9 0 0 .9 0 1.9v7.4c0 1.1.9 1.9 1.9 1.9h20.2c1.1 0 1.9-.9 1.9-1.9V1.9c0-1-.9-1.9-1.9-1.9m-.5 15.1v6.5H2.4v-6.5zm.5-2.4H1.9c-1.1 0-1.9.9-1.9 1.9V22c0 1.1.9 2 1.9 2h20.2c1.1 0 1.9-.9 1.9-1.9v-7.4c0-1.1-.9-2-1.9-2" />
+    </svg>
+  ),
   'radio-button': (
     <svg viewBox="0 0 102 102" fill="currentColor">
       <g transform="translate(1 1)">
@@ -538,6 +660,11 @@ const indicons = {
       <path d="M84.6 84.3L62.2 49.6c-.3-.7-.7-1-.7-1.7V37c2.1 0 3.5-1.4 3.5-3.5S63.6 30 61.5 30h-21c-1.7 0-3.5 1.4-3.5 3.5s1.4 3.5 3.5 3.5v10.8c0 .7 0 1-.3 1.4l-22.7 35c-3.8 7 1 15.7 9.1 15.7h49c7.6.1 13.2-8.3 9-15.6zM46.1 53.1c1-1.7 1.4-3.5 1.4-5.2V37h7v10.8c0 1.7.3 3.5 1.4 5.2l7.7 12H38.4l7.7-11.9zM75.5 93h-49c-2.8 0-4.2-3.1-3.1-4.9l10.5-15.7h34.3l10.1 15.7c1.4 2.1-.4 4.9-2.8 4.9zM51 25.8c-4 0-7.3-3.3-7.3-7.3s3.3-7.3 7.3-7.3 7.3 3.3 7.3 7.3-3.3 7.3-7.3 7.3zm0-9.6c-1.2 0-2.3 1-2.3 2.3s1 2.3 2.3 2.3c1.2 0 2.3-1 2.3-2.3s-1-2.3-2.3-2.3zM69.9 18.3c-4.9 0-8.8-4-8.8-8.8s4-8.8 8.8-8.8c4.9 0 8.8 4 8.8 8.8s-3.9 8.8-8.8 8.8zm0-12.6c-2.1 0-3.8 1.7-3.8 3.8s1.7 3.8 3.8 3.8c2.1 0 3.8-1.7 3.8-3.8S72 5.7 69.9 5.7z" />
     </svg>
   ),
+  reset: (
+    <svg viewBox="0 0 24 24">
+      <path d="M23 7.3c-.6-1.4-1.5-2.7-2.6-3.8S18 1.5 16.6.9 13.6 0 12 0c-1.8 0-3.4.4-5 1.1-1.5.7-2.8 1.6-3.9 2.8V.1H.8v8h8V5.7H4.6c.9-1 1.9-1.8 3.1-2.4 1.3-.7 2.7-1 4.2-1 2.7 0 5 .9 6.9 2.8s2.8 4.2 2.8 6.9-.9 5-2.8 6.8c-1.9 1.9-4.2 2.8-6.9 2.8q-3.6 0-6.3-2.4c-2.7-2.4-2.9-3.6-3.2-5.9v-.1H0v.2C.4 16.5 1.7 19 4 21s4.9 3 8 3c1.7 0 3.2-.3 4.7-.9 1.4-.6 2.7-1.5 3.8-2.6s2-2.4 2.6-3.8.9-3 .9-4.7-.3-3.2-1-4.7" />
+    </svg>
+  ),
   retrain: (
     <svg viewBox="0 0 100 100" fill="currentColor">
       <path d="M98.4 20.3l-26 17.2c-1 .7-2.4-.1-2.4-1.3V26H21v25.1c0 .3-.2.7-.5.8-1.9 1.2-8.9 5.6-12 7.6-.7.4-1.5-.1-1.5-.8V16c0-2.2 1.8-4 4-4h59V1.8c0-1.2 1.4-2 2.4-1.3l26 17.2c1 .6 1 2 0 2.6zM79 48.9V74H30V63.8c0-1.2-1.4-2-2.4-1.3l-26 17.2c-1 .6-1 2 0 2.6l26 17.2c1 .7 2.4-.1 2.4-1.3V88h59c2.2 0 4-1.8 4-4V41.3c0-.8-.8-1.2-1.5-.8-3.1 2-10.2 6.4-12 7.6-.3.2-.5.5-.5.8z" />
@@ -553,6 +680,11 @@ const indicons = {
       <path d="M39.4.4C17.9.4.4 17.9.4 39.4s17.5 39 39 39c8.8 0 16.9-2.9 23.4-7.8-.3 1.9.2 3.8 1.7 5.2l22 22c1.2 1.2 2.7 1.8 4.3 1.8s3.1-.6 4.3-1.8l2.8-2.8c2.4-2.4 2.4-6.2 0-8.5l-22-22c-1.2-1.2-2.7-1.8-4.2-1.8-.3 0-.7 0-1 .1 4.9-6.5 7.8-14.6 7.8-23.4C78.4 17.9 61 .4 39.4.4zm0 63c-13.2 0-24-10.8-24-24s10.8-24 24-24 24 10.8 24 24c0 13.3-10.7 24-24 24z" />
     </svg>
   ),
+  'search-thin': (
+    <svg viewBox="0 0 24 24">
+      <path d="M23.7 22.3 17 15.6c1.4-1.7 2.2-3.8 2.2-6.1 0-5.3-4.3-9.6-9.6-9.6C4.3 0 0 4.3 0 9.6s4.3 9.6 9.6 9.6c2.3 0 4.3-.8 6-2.1l6.7 6.7c.2.2.5.3.7.3.3 0 .5-.1.7-.3.4-.5.4-1.1 0-1.5M9.6 17.1C5.4 17.1 2 13.7 2 9.6S5.4 2 9.6 2s7.6 3.4 7.6 7.6-3.4 7.5-7.6 7.5" />
+    </svg>
+  ),
   shrug: (
     <svg viewBox="0 0 250 66" fill="currentColor">
       <path d="M2.1 4.7C.7 4.7 0 3.6 0 2.3 0 .9.7 0 2.1 0h15.8c1.4 0 2 .9 2 2.3s-.6 2.4-2 2.4H2.1zm47.6 57.7c.2.4.3.8.3 1.2 0 1-.7 1.8-1.9 2.2-.4.1-.9.2-1.2.2-1.1 0-1.9-.5-2.4-1.6L21.7 3.7c-.1-.4-.2-.8-.2-1.1 0-1 .7-1.8 1.9-2.3.4-.1.8-.2 1.1-.2 1.1 0 2 .5 2.4 1.7l22.8 60.6zm4.1 3.6c-1.4 0-2.1-1-2.1-2.4s.7-2.3 2.1-2.3h23.8c1.4 0 2 .9 2 2.3s-.6 2.4-2 2.4H53.8zM232.1 4.7c-1.4 0-2-1-2-2.4s.6-2.3 2-2.3h15.8c1.4 0 2.1.9 2.1 2.3s-.7 2.4-2.1 2.4h-15.8zm-9-2.8c.4-1.2 1.2-1.7 2.4-1.7.3 0 .7.1 1.1.2 1.2.4 1.9 1.2 1.9 2.3 0 .3-.1.7-.2 1.1l-22.7 60.6c-.5 1.1-1.3 1.6-2.4 1.6-.3 0-.8-.1-1.2-.2-1.1-.4-1.9-1.2-1.9-2.2 0-.3.1-.8.3-1.2l22.7-60.5zM171.4 66c-1.4 0-2-1-2-2.4s.6-2.3 2-2.3h24.8c1.4 0 2.1.9 2.1 2.3s-.7 2.4-2.1 2.4h-24.8zM90.8 3.5c0 .5-.2 1-.6 1.6-6.1 8.2-9.7 16.3-9.7 28.1 0 11.9 3.6 20.1 9.6 28.2.4.6.6 1.2.6 1.6 0 1-.6 1.7-1.4 2.3-.6.5-1.3.7-2 .7-.8 0-1.6-.4-2.3-1.3-6.9-9.5-10.5-18.6-10.5-31.5 0-12.9 3.6-21.9 10.6-31.3.7-.9 1.6-1.3 2.4-1.3.7 0 1.3.2 1.8.6.8.5 1.5 1.3 1.5 2.3zm10.6 1.4c1 0 1.8.5 2.4 1.4 2.8 5.2 5.5 12.5 7.2 18.1.1.5.2.9.2 1.2 0 1.2-.7 2.1-2 2.5-.4.1-.8.2-1.2.2-1.2 0-2.2-.8-2.6-2-1.5-5.3-4.5-12.7-6.8-17.5-.2-.5-.3-.9-.3-1.3 0-1.1.6-2 1.8-2.4.4-.1.8-.2 1.3-.2zm49.9 1.3v.4c-1.1 11.5-5 22.9-10.7 30.8-6.7 9-17.2 15.9-28.2 18.4-.3.1-.7.1-1 .1-1.3 0-2.2-.6-2.6-2.1-.1-.3-.1-.7-.1-1 0-1.4.9-2.3 2.3-2.7 10-2.9 19.2-8.4 25-16.4 5.2-7.1 8.5-17.3 9.5-28 .1-1.8 1.4-2.5 2.8-2.5.3 0 .5 0 .7.1 1.3.2 2.3 1.3 2.3 2.9zm-32.1-4.7c1.1 0 2.2.5 2.8 1.7 2.3 5.1 4.9 11.7 6.5 17.5.1.3.1.5.1.8 0 1.4-.9 2.5-2.2 2.8-.3.1-.7.1-1.1.1-1.2 0-2.2-.6-2.6-1.9-1.4-5.5-4.1-12.5-6.3-17.1-.2-.5-.3-1-.3-1.4 0-1.1.7-1.9 1.9-2.3.4-.2.8-.2 1.2-.2zm42.8-1c.9 0 1.8.4 2.4 1.3 7 9.5 10.7 18.4 10.7 31.3 0 12.9-3.7 22-10.6 31.5-.6.9-1.4 1.3-2.3 1.3-.6 0-1.3-.3-1.9-.7-.8-.5-1.4-1.4-1.4-2.3 0-.5.2-1.1.6-1.6 5.9-8.1 9.6-16.3 9.6-28.2 0-11.8-3.6-19.9-9.7-28.1-.4-.5-.6-1.1-.6-1.6 0-.9.5-1.7 1.4-2.3.5-.4 1.2-.6 1.8-.6z" />
@@ -567,17 +699,8 @@ const indicons = {
     </svg>
   ),
   'sort-down': (
-    <svg viewBox="0 0 100 100" fill="currentColor">
-      <path
-        d="M58.1,74.2H45.2l0,0c-1.8,0-3.2,1.4-3.2,3.2l0,0v3.2l0,0
-        c0,1.8,1.4,3.2,3.2,3.2h12.9l0,0c1.8,0,3.2-1.4,3.2-3.2v-3.2l0,0C61.3,75.6,59.8,74.2,58.1,74.2L58.1,74.2z M29.8,75.8H21V8.1l0,0
-        c0-1.8-1.4-3.2-3.2-3.2h-3.2l0,0c-1.8,0-3.2,1.4-3.2,3.2l0,0v67.7h-9l0,0c-1.3,0-2.4,1.1-2.4,2.4c0,0.6,0.2,1.2,0.7,1.7l13.7,14.5
-        l0,0c0.9,1,2.4,1,3.4,0.1l0.1-0.1l13.7-14.5l0,0c0.9-1,0.9-2.5-0.1-3.4C31,76,30.5,75.8,29.8,75.8L29.8,75.8z M83.9,35.5H45.2l0,0
-        c-1.8,0-3.2,1.4-3.2,3.2l0,0v3.2l0,0c0,1.8,1.4,3.2,3.2,3.2h38.7l0,0c1.8,0,3.2-1.4,3.2-3.2v-3.2l0,0C87.1,36.9,85.7,35.5,83.9,35.5
-        L83.9,35.5z M96.8,16.1H45.2l0,0c-1.8,0-3.2,1.4-3.2,3.2l0,0v3.2l0,0c0,1.8,1.4,3.2,3.2,3.2h51.6l0,0c1.8,0,3.2-1.4,3.2-3.2v-3.2
-        l0,0C100,17.6,98.6,16.1,96.8,16.1L96.8,16.1z M71,54.8H45.2l0,0c-1.8,0-3.2,1.4-3.2,3.2l0,0v3.2l0,0c0,1.8,1.4,3.2,3.2,3.2H71l0,0
-        c1.8,0,3.2-1.4,3.2-3.2V58l0,0C74.2,56.3,72.7,54.8,71,54.8L71,54.8z"
-      />
+    <svg viewBox="0 0 24 24">
+      <path d="M13.9 17.8h-3.1c-.4 0-.8.3-.8.8v.8c0 .4.3.8.8.8h3.1c.4 0 .8-.3.8-.8v-.8c0-.5-.3-.8-.8-.8m-6.7.4H5V1.9c0-.4-.3-.8-.8-.8h-.7c-.4 0-.8.3-.8.8v16.2H.6c-.3 0-.6.3-.6.6 0 .1 0 .3.2.4l3.3 3.5c.2.2.6.2.8 0l3.3-3.5c.2-.2.2-.6 0-.8-.2-.1-.3-.1-.4-.1m12.9-9.7h-9.3c-.4 0-.8.3-.8.8v.7c0 .4.3.8.8.8h9.3c.4 0 .8-.3.8-.8v-.7c0-.5-.3-.8-.8-.8m3.1-4.7H10.8c-.4 0-.8.3-.8.8v.8c0 .4.3.8.8.8h12.4c.4 0 .8-.3.8-.8v-.8c0-.4-.3-.8-.8-.8M17 13.1h-6.2c-.4 0-.8.3-.8.8v.8c0 .4.3.8.8.8H17c.4 0 .8-.3.8-.8v-.8c0-.4-.4-.8-.8-.8" />
     </svg>
   ),
   split: (

package/src/components/ListTable/ListTable.stories.tsx

@@ -76,7 +76,7 @@ const createdDocProcItems = mockDocProcReport.reports.map((u) => (
   </div>
 ));
 
-function StoryRender(props) {
+function StoryRender(props: any) {
   const [sortValue, setSortValue] = useState<string>(props?.sortBy?.value);
   const [arrowDesc, setArrowDesc] = useState<boolean>(props?.sortBy?.descending);
 

package/src/components/LoadingAwareContainer/LoadingAwareContainer.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LoadingAwareContainer } from './LoadingAwareContainer';
+
+const meta = {
+  component: LoadingAwareContainer,
+  title: 'LoadingAwareContainer',
+  argTypes: {
+    className: { control: { disable: true } },
+    style: { control: { disable: true } },
+  },
+} satisfies Meta<typeof LoadingAwareContainer>;
+
+export default meta;
+type Story = StoryObj<typeof LoadingAwareContainer>;
+
+function StoryRender(props: any) {
+  return (
+    <LoadingAwareContainer
+      isLoading={props.isLoading}
+      style={{ width: '50vw', height: '50vh', border: '1px solid white' }}
+    >
+      <p>Some basic content.</p>
+    </LoadingAwareContainer>
+  );
+}
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const Complete: Story = {
+  args: {
+    isLoading: false,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};

package/src/components/LoadingAwareContainer/LoadingAwareContainer.styles.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const StyledStatusContainer = styled.div`
+  position: absolute;
+  height: 0;
+  width: 0;
+  opacity: 0;
+`;
+
+export const StyledLoadingAwareContainer = styled.div`
+  &.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;

package/src/components/LoadingAwareContainer/LoadingAwareContainer.tsx

@@ -0,0 +1,36 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { LoadingIndicator } from '@/components';
+
+import { StyledLoadingAwareContainer, StyledStatusContainer } from './LoadingAwareContainer.styles';
+
+type Props = {
+  children: React.ReactNode | React.ReactNode[];
+  className?: string;
+  isLoading?: boolean;
+  style?: React.CSSProperties;
+};
+
+/**
+ * A functional container for content that is yet to load or will change; displays a loading indicator and announces
+ * to Assistive Technology as needed.
+ *
+ * todo: this is an extremely simple version of this component; as I get more familiar with LoadingIndicator use cases, this will be refactored. - jm 9/1/2020
+ */
+export function LoadingAwareContainer(props: Props): React.ReactElement {
+  const { children, className, isLoading, style } = props;
+
+  return (
+    <StyledLoadingAwareContainer
+      className={classNames({ loading: isLoading }, className)}
+      style={style}
+    >
+      <StyledStatusContainer role="status">{isLoading && 'Loading'}</StyledStatusContainer>
+
+      {isLoading ? <LoadingIndicator /> : <>{children}</>}
+    </StyledLoadingAwareContainer>
+  );
+}

package/src/components/LoadingAwareContainer/index.ts

@@ -0,0 +1 @@
+export { LoadingAwareContainer } from './LoadingAwareContainer';

package/src/components/Navigation/Drawer/Drawer.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Drawer } from '@/components/Navigation/Drawer';
+import React from 'react';
+import { footerItems, navigationItems } from './__mocks__/mocks';
+import { MemoryRouter } from 'react-router-dom';
+
+const meta: Meta<typeof Drawer> = {
+  component: Drawer,
+  tags: ['autodocs'],
+  title: 'Navigation/Drawer',
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={['/']}>
+        <div style={{ width: '100%', display: 'flex', height: '800px' }}>
+          <div style={{ width: '50px', position: 'relative' }}>
+            <div style={{ position: 'absolute' }}>
+              <Story />
+            </div>
+          </div>
+          <div style={{ width: '100%', height: '60px' }}>
+            This text is to help illustrate the ability to expand the drawer over content without
+            shifting it in any way. Simply add a position relative div and place this in a position
+            absolute div.
+          </div>
+        </div>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+export const Normal: Story = {
+  args: {
+    logoText: 'INDICO INSIGHTS',
+    logoIcon: 'indico-o',
+    $expandedWidth: '245',
+    navigationItems: navigationItems,
+    footerItems: footerItems,
+  },
+};

package/src/components/Navigation/Drawer/Drawer.styles.ts

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+
+type Props = {
+  $collapsedWidth?: string;
+  $expandedWidth?: string;
+};
+const fullViewportHeightMinusOffset = 'calc(100% - 42px)';
+
+export const StyledDrawer = styled.div<Props>`
+  color: #444444;
+  background-color: white;
+  box-sizing: border-box;
+  height: 100vh;
+  padding: 30px 4px 10px 4px;
+  transition: width 0.2s ease-in-out;
+  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  width: 100%;
+  max-width: ${(props: Props) => (props.$expandedWidth ? `${props.$expandedWidth}px` : '300px')};
+  a:active,
+  a:visited,
+  a:link {
+    color: #444444;
+  }
+  a {
+    color: #444444;
+    text-decoration: none;
+  }
+
+  .drawer__wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
+  .drawer__header {
+    margin-bottom: 30px;
+    color: black;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    white-space: nowrap;
+
+    .drawer__header__text {
+      overflow: hidden;
+      transition: opacity 0.2s ease-in-out;
+    }
+
+    span {
+      display: flex;
+      align-items: center;
+    }
+
+    p {
+      font-size: 20px;
+      font-weight: 500;
+      margin: 0 0 0 12px;
+    }
+  }
+
+  .drawer__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: ${fullViewportHeightMinusOffset};
+    padding-bottom: 10px;
+  }
+
+  &.drawer--open {
+    width: ${(props: Props) => (props.$expandedWidth ? `${props.$expandedWidth}px` : '245px')};
+  }
+
+  &.drawer--closed {
+    width: ${(props: Props) => (props.$collapsedWidth ? `${props.$collapsedWidth}px` : '50px')};
+  }
+`;

package/src/components/Navigation/Drawer/Drawer.tsx

@@ -0,0 +1,108 @@
+/* 
+## TODO
+-Documentation
+-Split header block to its own component.
+-Add support for horizontal lines between list items.
+-Use variables for styles
+-Add toggle options other than mouseover
+-Add easy color support
+-Add documentation
+-Icons should ideally have a size enum
+-Combine headerComponent, logoText and logoIcon props into one prop and functionality
+*/
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { IconName, PermafrostComponent } from '@/types';
+
+import { StyledDrawer } from './Drawer.styles';
+import { Icon } from '../../Icon';
+import { DrawerLinkList } from './DrawerLinkList';
+
+import { ListItem } from './types';
+
+type Props = PermafrostComponent & {
+  style?: React.CSSProperties;
+  logoText?: string;
+  logoIcon?: IconName;
+  headerComponent?: React.ReactNode;
+  navigationItems?: ListItem[];
+  footerItems?: ListItem[];
+  $expandedWidth?: string;
+  $collapsedWidth?: string;
+};
+
+export const Drawer = (props: Props) => {
+  const {
+    id,
+    className,
+    style = {},
+    logoText,
+    logoIcon,
+    navigationItems,
+    footerItems,
+    headerComponent,
+    $expandedWidth,
+    $collapsedWidth,
+    ...restOfProps
+  } = props;
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const drawerClasses = classNames('drawer', className, {
+    'drawer--open': isOpen,
+    'drawer--closed': !isOpen,
+  });
+
+  const handleMouseOver = () => {
+    setIsOpen(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <StyledDrawer
+      id={id}
+      data-cy={props['data-cy']}
+      data-testid={props['data-testid']}
+      style={style}
+      {...restOfProps}
+      className={drawerClasses}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      aria-expanded={isOpen}
+      $expandedWidth={$expandedWidth}
+      $collapsedWidth={$collapsedWidth}
+    >
+      <div className="drawer__wrapper">
+        <div className="drawer__header">
+          {headerComponent ? (
+            headerComponent
+          ) : (
+            <span>
+              {logoIcon ? <Icon name={logoIcon} size={[24]} data-testid="logo-icon" /> : null}
+              <p data-testid="logo-text" aria-hidden={!isOpen}>
+                {logoText}
+              </p>
+            </span>
+          )}
+        </div>
+        <div className="drawer__content">
+          {navigationItems?.length ? (
+            <div className="drawer__navigation" data-testid="drawer-navigation">
+              <DrawerLinkList isOpen={isOpen} listItems={navigationItems} />
+            </div>
+          ) : null}
+
+          {footerItems?.length ? (
+            <div className="drawer__footer" data-testid="drawer-footer">
+              <DrawerLinkList isOpen={isOpen} listItems={footerItems} />
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </StyledDrawer>
+  );
+};