From 818e426393a5ce8b8c05de9ed7ada562f318b358 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Feb 2023 18:06:06 +0700
Subject: [PATCH 001/167] Utility classes - - update alignment of code

---
 packages/ui/src/_9-utilities.scss | 690 ++++++++----------------------
 1 file changed, 181 insertions(+), 509 deletions(-)

diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 0e4cd33da2..51387974f9 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -1,142 +1,63 @@
 @use "abstract" as *;
 
 /* hide */
-.u-hide {
-  display: none !important;
-}
-.u-opacity-0 {
-  opacity: 0 !important;
-}
-.u-opacity-20 {
-  opacity: 0.2 !important;
-}
-.u-opacity-50 {
-  opacity: 0.5 !important;
-}
-.u-overflow-hidden {
-  overflow: hidden !important;
-}
-.u-overflow-visible {
-  overflow: visible !important;
-}
-.u-overflow-x-auto {
-  overflow-x: auto !important;
-}
-.u-overflow-y-auto {
-  overflow-y: auto !important;
-}
+.u-hide       { display:none!important; }
+.u-opacity-0  { opacity:0!important;    }
+.u-opacity-20 { opacity:0.2!important;  }
+.u-opacity-50 { opacity:0.5!important;  }
+
+.u-overflow-hidden  { overflow:hidden!important;  }
+.u-overflow-visible { overflow:visible!important; }
+.u-overflow-x-auto  { overflow-x:auto!important;  }
+.u-overflow-y-auto  { overflow-y:auto!important;  }
 
 /* text */
-.u-direction-ltr {
-  direction: ltr;
-}
-.u-direction-rtl {
-  direction: rtl;
-}
-.u-x-small {
-  font-size: pxToRem(12);
-}
-.u-small {
-  font-size: pxToRem(14);
-}
-.u-font-size-32 {
-  font-size: pxToRem(32);
-}
-.u-bold {
-  font-weight: 600;
-}
-.u-normal {
-  font-weight: normal;
-}
-.u-text-center {
-  text-align: center;
-}
-.u-line-height-1 {
-  line-height: 1;
-}
-.u-line-height-1-25 {
-  line-height: 1.25;
-}
-.u-line-height-1-5 {
-  line-height: 1.5;
-}
-.u-line-height-2 {
-  line-height: 2;
-}
-.u-break-word {
-  @include break-word;
-  white-space: initial;
-}
-.u-break-all {
-  @include break-all;
-  white-space: initial;
-}
-.u-trim {
-  @include trim;
-}
-.u-trim-1 {
-  @include trim(1);
-}
-.u-trim-2 {
-  @include trim(2);
-}
-.u-trim-3 {
-  @include trim(3);
-}
-.u-trim-start {
-  @include trim;
-  direction: rtl;
-  text-align: right;
-}
-.u-un-break-text {
-  white-space: nowrap !important;
-}
-.u-capitalize {
-  text-transform: capitalize;
-}
-.u-icon-small {
-  font-size: var(--icon-size-small);
-}
+.u-direction-ltr    { direction:ltr; }
+.u-direction-rtl    { direction:rtl; }
+.u-x-small          { font-size:pxToRem(12); }
+.u-small            { font-size:pxToRem(14); }
+.u-font-size-32     { font-size:pxToRem(32); }
+.u-bold             { font-weight:600; }
+.u-normal           { font-weight:normal; }
+.u-text-center      { text-align:center; }
+.u-line-height-1    { line-height:1; }
+.u-line-height-1-25 { line-height:1.25; }
+.u-line-height-1-5  { line-height:1.5; }
+.u-line-height-2    { line-height:2; }
+.u-break-word       { @include break-word; white-space:initial; }
+.u-break-all        { @include break-all; white-space:initial; }
+.u-trim             { @include trim; }
+.u-trim-1           { @include trim(1); }
+.u-trim-2           { @include trim(2); }
+.u-trim-3           { @include trim(3); }
+.u-trim-start       { @include trim; direction:rtl; text-align:right; }
+.u-un-break-text    { white-space:nowrap!important; }
+.u-capitalize       { text-transform:capitalize; }
+.u-icon-small       { font-size:var(--icon-size-small); }
 
 /* Mouse Cursor */
 .u-cursor-pointer       { cursor:pointer;       }
 
 /* color text */
-.u-color-text-disabled {
-  color: hsl(var(--color-text-disabled));
-}
-.u-color-text-offline {
-  color: hsl(var(--color-text-offline));
-}
-.u-color-text-info {
-  color: hsl(var(--color-text-info));
-}
-.u-color-text-danger {
-  color: hsl(var(--color-text-danger));
-}
-.u-color-text-warning {
-  color: hsl(var(--color-text-warning));
-}
-.u-color-text-success {
-  color: hsl(var(--color-text-success));
-}
+.u-color-text-disabled  { color:hsl(var(--color-text-disabled)); }
+.u-color-text-offline   { color:hsl(var(--color-text-offline));  }
+.u-color-text-info      { color:hsl(var(--color-text-info));     }
+.u-color-text-danger    { color:hsl(var(--color-text-danger));   }
+.u-color-text-warning   { color:hsl(var(--color-text-warning));  }
+.u-color-text-success   { color:hsl(var(--color-text-success));  }
 
-.u-color-text-gray {
-  color: hsl(var(--color-text-gray));
-}
-.u-color-text-pink {
-  color: hsl(var(--color-pink-text));
-}
+.u-color-text-gray      { color:hsl(var(--color-text-gray));     }
+.u-color-text-pink      { color:hsl(var(--color-pink-text));     }
 
 /* position */
 
-.u-position-sticky {
-  --inset-block-start: auto;
-  --inset-block-end: auto;
+.u-position-sticky      {
+  --inset-block-start:  auto;
+  --inset-block-end:    auto;
   --inset-inline-start: auto;
-  --inset-inline-end: auto;
+  --inset-inline-end:   auto;
 
-  position: sticky;
+  position:sticky;
   inset-block: var(--inset-block-start) var(--inset-block-end);
   inset-inline: var(--inset-inline-start) var(--inset-inline-end);
 }
@@ -148,175 +69,66 @@
 .u-inset-block-start-8  { inset-block-start:pxToRem(8);   }
 .u-inset-block-end-8    { inset-block-end:pxToRem(8);     }
 
-.u-z-index-0 {
-  z-index: 0;
-}
-.u-z-index-1 {
-  z-index: 1;
-}
-.u-z-index-5 {
-  z-index: 5;
-}
-.u-z-index-10 {
-  z-index: 10;
-}
-.u-z-index-15 {
-  z-index: 15;
-}
-.u-z-index-20 {
-  z-index: 20;
-}
+.u-z-index-0   { z-index:0;  }
+.u-z-index-1   { z-index:1;  }
+.u-z-index-5   { z-index:5;  }
+.u-z-index-10  { z-index:10; }
+.u-z-index-15  { z-index:15; }
+.u-z-index-20  { z-index:20; }
 
 /* display */
-.u-block {
-  display: block;
-}
-.u-inline {
-  display: inline;
-}
-.u-grid {
-  display: grid;
-}
-.u-flex {
-  display: flex;
-}
-.u-inline-flex {
-  display: inline-flex;
-}
-
-.u-box-sizing-content {
-  box-sizing: content-box;
-}
-.u-sep-inline-start {
-  border-inline-start: solid pxToRem(1) hsl(var(--color-border));
-}
-.u-sep-block-start {
-  border-block-start: solid pxToRem(1) hsl(var(--color-border));
-}
-.u-sep-block-end {
-  border-block-end: solid pxToRem(1) hsl(var(--color-border));
-}
-
-.u-gap-2 {
-  gap: pxToRem(2);
-}
-.u-gap-4 {
-  gap: pxToRem(4);
-}
-.u-gap-8 {
-  gap: pxToRem(8);
-}
-.u-gap-12 {
-  gap: pxToRem(12);
-}
-.u-gap-16 {
-  gap: pxToRem(16);
-}
-.u-gap-24 {
-  gap: pxToRem(24);
-}
-.u-gap-32 {
-  gap: pxToRem(32);
-}
-
-.u-column-gap-2 {
-  column-gap: pxToRem(2);
-}
-.u-column-gap-4 {
-  column-gap: pxToRem(4);
-}
-.u-column-gap-8 {
-  column-gap: pxToRem(8);
-}
-.u-column-gap-12 {
-  column-gap: pxToRem(12);
-}
-.u-column-gap-16 {
-  column-gap: pxToRem(16);
-}
-.u-column-gap-24 {
-  column-gap: pxToRem(24);
-}
-.u-column-gap-32 {
-  column-gap: pxToRem(32);
-}
-
-.u-row-gap-2 {
-  row-gap: pxToRem(2);
-}
-.u-row-gap-4 {
-  row-gap: pxToRem(4);
-}
-.u-row-gap-8 {
-  row-gap: pxToRem(8);
-}
-.u-row-gap-12 {
-  row-gap: pxToRem(12);
-}
-.u-row-gap-16 {
-  row-gap: pxToRem(16);
-}
-.u-row-gap-24 {
-  row-gap: pxToRem(24);
-}
-.u-row-gap-32 {
-  row-gap: pxToRem(32);
-}
-
-.u-flex-vertical {
-  flex-direction: column;
-}
-.u-flex-vertical-mobile {
-  @media #{$break1} {
-    flex-direction: column;
-  }
-}
-.u-flex-wrap {
-  flex-wrap: wrap;
-}
-.u-stretch {
-  flex: 1;
-}
-.u-flex-basis-50-percent {
-  flex-basis: 50%;
-}
-.u-flex-basis-100-percent {
-  flex-basis: 100%;
-}
-.u-flex-shrink-0 {
-  flex-shrink: 0;
-}
-.u-flex-basis-auto {
-  flex-basis: auto;
-}
-
-.u-grid-columns-auto-1fr {
-  grid-template-columns: auto 1fr;
-}
-
-.u-width-fit-content {
-  inline-size: fit-content;
-}
-.u-width-full-line {
-  inline-size: 100%;
-}
-.u-width-250 {
-  inline-size: pxToRem(250);
-}
-.u-width-280-desktop {
-  @media #{$break3open} {
-    inline-size: pxToRem(280);
-  }
-}
-.u-min-width-0 {
-  min-inline-size: 0;
-} /*use to solve flexbox un-shrink problem;*/
-.u-min-width-200 {
-  min-inline-size: pxToRem(200);
-}
-.u-min-width-100-percent {
-  min-inline-size: 100%;
-}
+.u-block          { display:block;        }
+.u-inline         { display:inline;       }
+.u-grid           { display:grid;         }
+.u-flex           { display:flex;         }
+.u-inline-flex    { display:inline-flex;  }
+
+.u-box-sizing-content { box-sizing:content-box; }
+.u-sep-inline-start   { border-inline-start:solid pxToRem(1) hsl(var(--color-border)); }
+.u-sep-block-start    { border-block-start:solid pxToRem(1) hsl(var(--color-border)); }
+.u-sep-block-end      { border-block-end:solid pxToRem(1) hsl(var(--color-border)); }
+
+.u-gap-2          { gap:pxToRem(2);   }
+.u-gap-4          { gap:pxToRem(4);   }
+.u-gap-8          { gap:pxToRem(8);   }
+.u-gap-12         { gap:pxToRem(12);  }
+.u-gap-16         { gap:pxToRem(16);  }
+.u-gap-24         { gap:pxToRem(24);  }
+.u-gap-32         { gap:pxToRem(32);  }
+
+.u-column-gap-2   { column-gap:pxToRem(2);  }
+.u-column-gap-4   { column-gap:pxToRem(4);  }
+.u-column-gap-8   { column-gap:pxToRem(8);  }
+.u-column-gap-12  { column-gap:pxToRem(12); }
+.u-column-gap-16  { column-gap:pxToRem(16); }
+.u-column-gap-24  { column-gap:pxToRem(24); }
+
+.u-row-gap-2      { row-gap:pxToRem(2);  }
+.u-row-gap-4      { row-gap:pxToRem(4);  }
+.u-row-gap-8      { row-gap:pxToRem(8);  }
+.u-row-gap-12     { row-gap:pxToRem(12); }
+.u-row-gap-16     { row-gap:pxToRem(16); }
+.u-row-gap-24     { row-gap:pxToRem(24); }
+.u-row-gap-32     { row-gap:pxToRem(32); }
+
+.u-flex-vertical            { flex-direction:column;  }
+.u-flex-vertical-mobile     { @media #{$break1} { flex-direction:column; }  }
+.u-flex-wrap                { flex-wrap:wrap;         }
+.u-stretch                  { flex:1;                 }
+.u-flex-basis-50-percent    { flex-basis:50%;         }
+.u-flex-basis-100-percent   { flex-basis:100%;        }
+.u-flex-shrink-0            { flex-shrink:0;          }
+.u-flex-basis-auto          { flex-basis:auto;        }
+
+.u-grid-columns-auto-1fr    { grid-template-columns:auto 1fr; }
+
+.u-width-fit-content      { inline-size:fit-content;     }
+.u-width-full-line        { inline-size:100%;            }
+.u-width-250              { inline-size:pxToRem(250);    }
+.u-width-280-desktop      { @media #{$break3open} { inline-size:pxToRem(280); } }
+.u-min-width-0            { min-inline-size:0;            } /*use to solve flexbox un-shrink problem;*/
+.u-min-width-200          { min-inline-size:pxToRem(200); }
+.u-min-width-100-percent  { min-inline-size:100%;         }
 
 .u-max-width-250    { max-inline-size:pxToRem(250); }
 .u-max-width-300    { max-inline-size:pxToRem(300); }
@@ -328,203 +140,83 @@
 .u-max-width-700    { max-inline-size:pxToRem(700); }
 .u-max-width-100-percent { max-inline-size:100%; }
 
-.u-height-100-percent {
-  block-size: 100%;
-}
+.u-height-100-percent { block-size:100%; }
 
-.u-min-height-100 {
-  min-block-size: pxToRem(100);
-}
-.u-min-height-184 {
-  min-block-size: pxToRem(184);
-}
-.u-min-height-100-percent {
-  min-block-size: 100%;
-}
+.u-min-height-100   { min-block-size:pxToRem(100); }
+.u-min-height-184   { min-block-size:pxToRem(184); }
+.u-min-height-100-percent { min-block-size:100%;   }
 
-.u-max-height-200 {
-  max-block-size: pxToRem(200);
-}
+.u-max-height-200   { max-block-size:pxToRem(200); }
 
-.u-full-screen-height {
-  block-size: 100vh;
-  block-size: 100lvh;
-}
+.u-full-screen-height { block-size:100vh; block-size:100lvh; }
 
 /* alignments */
-.u-main-center {
-  justify-content: center;
-}
-.u-main-space-between {
-  justify-content: space-between;
-}
-.u-main-end {
-  justify-content: end;
-}
+.u-main-center        { justify-content:center;         }
+.u-main-space-between { justify-content:space-between;  }
+.u-main-end           { justify-content:end;            }
 
-.u-cross-start {
-  align-items: start;
-}
-.u-cross-baseline {
-  align-items: baseline;
-}
-.u-cross-center {
-  align-items: center;
-}
-.u-cross-end {
-  align-items: end;
-}
+.u-cross-start        { align-items:start;    }
+.u-cross-baseline     { align-items:baseline; }
+.u-cross-center       { align-items:center;   }
+.u-cross-end          { align-items:end;      }
 
-.u-cross-child-start {
-  align-self: start;
-}
-.u-cross-child-center {
-  align-self: center;
-}
-.u-cross-child-end {
-  align-self: end;
-}
+.u-cross-child-start  { align-self:start;   }
+.u-cross-child-center { align-self:center;  }
+.u-cross-child-end    { align-self:end;     }
 
 /* box model */
-.u-padding-24 {
-  padding: pxToRem(24) !important;
-}
-.u-padding-32 {
-  padding: pxToRem(32) !important;
-}
-.u-padding-64 {
-  padding: pxToRem(64) !important;
-}
-.u-padding-inline-0 {
-  padding-inline: 0 !important;
-}
-.u-padding-inline-8 {
-  padding-inline: pxToRem(8) !important;
-}
-.u-padding-inline-12 {
-  padding-inline: pxToRem(12) !important;
-}
-.u-padding-inline-32 {
-  padding-inline: pxToRem(32) !important;
-}
-.u-padding-inline-end-0 {
-  padding-inline-end: 0 !important;
-}
-.u-padding-inline-end-56 {
-  padding-inline-end: pxToRem(56) !important;
-}
-
-.u-padding-block-12 {
-  padding-block: pxToRem(12) !important;
-}
-.u-padding-block-start-16 {
-  padding-block-start: pxToRem(16) !important;
-}
-.u-padding-block-end-56 {
-  padding-block-end: pxToRem(56) !important;
-}
-
-.u-margin-auto {
-  margin: auto !important;
-}
-.u-margin-0 {
-  margin: 0 !important;
-}
-.u-margin-32 {
-  margin: pxToRem(32) !important;
-}
-
-.u-margin-inline-auto {
-  margin-inline: auto;
-}
-.u-margin-inline-start-auto {
-  margin-inline-start: auto;
-}
-.u-margin-block-start-auto {
-  margin-block-start: auto;
-}
-
-.u-margin-block-start-negative-56 {
-  margin-block-start: pxToRem(-56);
-}
-
-.u-margin-block-start-2 {
-  margin-block-start: pxToRem(2);
-}
-.u-margin-block-start-4 {
-  margin-block-start: pxToRem(4);
-}
-.u-margin-block-start-8 {
-  margin-block-start: pxToRem(8);
-}
-.u-margin-block-start-12 {
-  margin-block-start: pxToRem(12);
-}
-.u-margin-block-start-16 {
-  margin-block-start: pxToRem(16);
-}
-.u-margin-block-start-20 {
-  margin-block-start: pxToRem(20);
-}
-.u-margin-block-start-24 {
-  margin-block-start: pxToRem(24);
-}
-.u-margin-block-start-32 {
-  margin-block-start: pxToRem(32);
-}
-.u-margin-block-start-40 {
-  margin-block-start: pxToRem(40);
-}
-.u-margin-block-start-48 {
-  margin-block-start: pxToRem(48);
-}
-.u-margin-block-start-52 {
-  margin-block-start: pxToRem(52);
-}
-.u-margin-block-start-100 {
-  margin-block-start: pxToRem(100);
-}
-.u-margin-block-start-200 {
-  margin-block-start: pxToRem(200);
-}
-.u-margin-block-start-300 {
-  margin-block-start: pxToRem(300);
-}
-
-.u-margin-inline-start-4 {
-  margin-inline-start: pxToRem(4);
-}
-.u-margin-inline-start-8 {
-  margin-inline-start: pxToRem(8);
-}
-.u-margin-inline-start-12 {
-  margin-inline-start: pxToRem(12);
-}
-.u-margin-inline-start-16 {
-  margin-inline-start: pxToRem(16);
-}
-.u-margin-inline-start-24 {
-  margin-inline-start: pxToRem(24);
-}
-.u-margin-inline-start-32 {
-  margin-inline-start: pxToRem(32);
-}
-
-.u-margin-inline-end-16 {
-  margin-inline-end: pxToRem(16);
-}
-.u-margin-inline-end-24 {
-  margin-inline-end: pxToRem(24);
-}
-
-.u-border-width-0 {
-  border-width: 0 !important;
-}
-.u-mobile-border-width-0 {
-  @media #{$break1} {
-    border-width: 0 !important;
-  }
-}
+.u-padding-24             { padding:pxToRem(24)!important; }
+.u-padding-32             { padding:pxToRem(32)!important; }
+.u-padding-64             { padding:pxToRem(64)!important; }
+.u-padding-inline-0       { padding-inline:0!important; }
+.u-padding-inline-8       { padding-inline:pxToRem(8)!important; }
+.u-padding-inline-12      { padding-inline:pxToRem(12)!important; }
+.u-padding-inline-32      { padding-inline:pxToRem(32)!important; }
+.u-padding-inline-end-0   { padding-inline-end:0!important; }
+.u-padding-inline-end-56  { padding-inline-end:pxToRem(56)!important; }
+
+.u-padding-block-12       { padding-block:pxToRem(12)!important; }
+.u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; }
+.u-padding-block-end-56   { padding-block-end:pxToRem(56)!important; }
+
+
+.u-margin-auto            { margin:auto!important; }
+.u-margin-0               { margin:0!important; }
+.u-margin-32              { margin:pxToRem(32)!important; }
+
+.u-margin-inline-auto     { margin-inline:auto; }
+.u-margin-inline-start-auto { margin-inline-start:auto; }
+.u-margin-block-start-auto  { margin-block-start:auto; }
+
+.u-margin-block-start-negative-56 { margin-block-start:pxToRem(-56); }
+
+.u-margin-block-start-2   { margin-block-start:pxToRem(2); }
+.u-margin-block-start-4   { margin-block-start:pxToRem(4); }
+.u-margin-block-start-8   { margin-block-start:pxToRem(8); }
+.u-margin-block-start-12  { margin-block-start:pxToRem(12); }
+.u-margin-block-start-16  { margin-block-start:pxToRem(16); }
+.u-margin-block-start-20  { margin-block-start:pxToRem(20); }
+.u-margin-block-start-24  { margin-block-start:pxToRem(24); }
+.u-margin-block-start-32  { margin-block-start:pxToRem(32); }
+.u-margin-block-start-40  { margin-block-start:pxToRem(40); }
+.u-margin-block-start-48  { margin-block-start:pxToRem(48); }
+.u-margin-block-start-52  { margin-block-start:pxToRem(52); }
+.u-margin-block-start-100 { margin-block-start:pxToRem(100); }
+.u-margin-block-start-200 { margin-block-start:pxToRem(200); }
+.u-margin-block-start-300 { margin-block-start:pxToRem(300); }
+
+.u-margin-inline-start-4  { margin-inline-start:pxToRem(4); }
+.u-margin-inline-start-8  { margin-inline-start:pxToRem(8); }
+.u-margin-inline-start-12 { margin-inline-start:pxToRem(12); }
+.u-margin-inline-start-16 { margin-inline-start:pxToRem(16); }
+.u-margin-inline-start-24 { margin-inline-start:pxToRem(24); }
+.u-margin-inline-start-32 { margin-inline-start:pxToRem(32); }
+
+.u-margin-inline-end-16   { margin-inline-end:pxToRem(16); }
+.u-margin-inline-end-24   { margin-inline-end:pxToRem(24); }
+
+.u-border-width-0         { border-width:0!important; }
+.u-mobile-border-width-0  { @media #{$break1} { border-width:0!important; } }
 
 //.u-border-radius-4        { border-radius:var(--border-radius-xsmall);   }
 //.u-border-radius-8        { border-radius:var(--border-radius-small);    }
@@ -533,14 +225,10 @@
 //.u-border-radius-circle   { border-radius:var(--border-radius-circular); }
 
 /* container queries */
-.u-container-inline-size {
-  container-type: inline-size;
-}
+.u-container-inline-size { container-type: inline-size; }
 
 /* Shadows */
-.u-drop-shadow-large {
-  filter: drop-shadow(var(--shadow-large));
-}
+.u-drop-shadow-large { filter:drop-shadow(var(--shadow-large));}
 
 /* reset inputs */
 /** remove number button inputs **/
@@ -558,48 +246,32 @@
 
 /* only light / only dark */
 .u-only-light,
-.u-only-dark {
-  display: none;
-}
+.u-only-dark   { display:none; }
 
 #{$theme-dark} {
-  .u-only-dark {
-    display: block;
-  }
+  .u-only-dark   { display:block; }
 }
 body:not(#{$theme-dark}) {
-  .u-only-light {
-    display: block;
-  }
+  .u-only-light { display:block; }
 }
 
 /* responsive global state classes */
 .is-only-mobile {
-  @media #{$break2open} {
-    display: none !important;
-  }
+  @media #{$break2open} { display:none!important; }
 }
 
 .is-only-tablet {
-  @media #{$break1}, #{$break3open} {
-    display: none !important;
-  }
+  @media #{$break1}, #{$break3open} { display:none!important; }
 }
 
 .is-only-desktop {
-  @media #{$break1}, #{$break2} {
-    display: none !important;
-  }
+  @media #{$break1}, #{$break2} { display:none!important; }
 }
 
 .is-not-mobile {
-  @media #{$break1} {
-    display: none !important;
-  }
+  @media #{$break1} { display:none!important; }
 }
 
 .is-not-desktop {
-  @media #{$break3open} {
-    display: none !important;
-  }
-}
+  @media #{$break3open} { display:none!important; }
+}
\ No newline at end of file

From 559c6fc68febdfc1f0d8f05951149e688e00e9d6 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Feb 2023 18:09:28 +0700
Subject: [PATCH 002/167] Wizard - - update alignment of code

---
 packages/ui/src/8-grids/_wizard.scss | 191 +++++++--------------------
 1 file changed, 48 insertions(+), 143 deletions(-)

diff --git a/packages/ui/src/8-grids/_wizard.scss b/packages/ui/src/8-grids/_wizard.scss
index 481808506e..64e1ad1725 100644
--- a/packages/ui/src/8-grids/_wizard.scss
+++ b/packages/ui/src/8-grids/_wizard.scss
@@ -1,181 +1,86 @@
-@use "../abstract/index" as *;
+@use '../abstract/index' as *;
 
 .wizard {
   --p-header-color: var(--color-neutral-0);
-  --p-start-color: var(--color-neutral-5);
-  --p-end-color: var(--color-neutral-0);
+  --p-start-color:  var(--color-neutral-5);
+  --p-end-color:    var(--color-neutral-0);
 
   $header-height: pxToRem(64);
   --p-header-height: #{$header-height};
 
+
   /* bg layout */
-  &-header-strip {
-    background-color: hsl(var(--p-header-color));
-    border-block-end: solid pxToRem(1) hsl(var(--color-border));
-  }
-  &-start-bg {
-  }
-  &-end-bg {
-    background-color: hsl(var(--p-end-color));
-  }
+  &-header-strip  { background-color:hsl(var(--p-header-color)); border-block-end:solid pxToRem(1) hsl(var(--color-border)); }
+  &-start-bg      {  }
+  &-end-bg        { background-color:hsl(var(--p-end-color)); }
 
   /* content layout */
-  &-header {
-    padding-inline: pxToRem(32);
-  }
-  &-side {
-    padding-inline: pxToRem(32);
-  }
-  &-main {
-    padding-inline: pxToRem(32);
-  }
-  &-media {
-  }
+  &-header        { padding-inline:pxToRem(32); }
+  &-side          { padding-inline:pxToRem(32); }
+  &-main          { padding-inline:pxToRem(32); }
+  &-media         { }
+
 
   /* content layout */
-  &-header-strip {
-    position: sticky;
-    z-index: 2;
-    inset-block-start: 0;
-  }
-  &-header {
-    position: sticky;
-    z-index: 2;
-    inset-block-start: 0;
-    display: flex;
-    align-items: center;
-    gap: pxToRem(12);
-  }
-  &-side {
-    align-self: start;
-    padding-block-start: pxToRem(40);
-  }
-  &-media {
-    display: grid;
-    justify-content: center;
-    align-items: end;
-    position: relative;
-    > * {
-      position: sticky;
-      inset-inline: pxToRem(32);
-      inset-block-end: pxToRem(32);
-      margin-inline: auto;
-      max-inline-size: calc(100% - 64px);
-      max-block-size: 320px;
-    }
-    @media (max-height: 860px) {
-      display: none;
-    }
-  }
-  &-main {
-    display: flex;
-    flex-direction: column;
-    padding-block-start: pxToRem(40);
-    padding-inline: pxToRem(40);
-  }
-  .form {
-    block-size: 100%;
-    max-block-size: 100%;
+  &-header-strip  { position:sticky; z-index:2; inset-block-start:0; }
+  &-header        {
+    position:sticky; z-index:2; inset-block-start:0;
+    display:flex; align-items:center; gap:pxToRem(12);
+  }
+  &-side          { align-self:start; }
+  &-media         {
+    display:grid; justify-content:center; align-items:end; position:relative;
+    > * { position:sticky; inset-inline:pxToRem(32); inset-block-end:pxToRem(32); margin-inline:auto; max-inline-size:calc(100% - 64px); max-block-size:320px; }
+    @media (max-height:860px) { display:none; }
+  }
+  &-main          { display:flex; flex-direction:column; padding-block-start:pxToRem(40); padding-inline:pxToRem(40); }
+  .form           {
+    block-size:100%; max-block-size:100%;
     &-footer {
-      position: sticky;
-      inset-block-end: 0;
+      position:sticky; inset-block-end:0;
       background-color: hsl(var(--p-end-color));
     }
   }
-  .steps {
-    padding-block-start: pxToRem(8);
-  }
   @media #{$break1} {
     display: grid;
     grid-template-rows: var(--p-header-height);
     &-header-strip,
-    &-header {
-      padding-inline: pxToRem(16);
-      grid-row: 1;
-      grid-column: 1;
-    }
-    .form-footer {
-      padding-inline: pxToRem(40);
-      margin-inline: pxToRem(-16);
-    }
+    &-header { padding-inline:pxToRem(16); grid-row:1; grid-column:1; }
+    .form-footer { padding-inline:pxToRem(40);  margin-inline:pxToRem(-16); }
 
-    &-side {
-      display: none;
-      padding: pxToRem(16);
-      &.is-shown-mobile {
-        display: block;
-      }
-    }
-    &-main {
-      padding: pxToRem(16);
-      padding-block-end: 0;
-      background-color: hsl(var(--p-end-color));
-    }
-    &-media {
-      display: none;
+    &-side  {
+      display:none; padding:pxToRem(16);
+      &.is-shown-mobile { display:block; }
     }
+    &-main  { padding:pxToRem(16); padding-block-end:0; background-color:hsl(var(--p-end-color)); }
+    &-media { display:none; }
   }
   @media #{$break2open} {
     display: grid;
-    grid-template-columns:
-      1fr minmax(pxToRem(240), pxToRem(330)) minmax(pxToRem(0), pxToRem(100))
-      minmax(pxToRem(480), pxToRem(750)) 1fr;
-    grid-auto-rows: var(--p-header-height) auto 1fr;
+    grid-template-columns: 1fr minmax(pxToRem(240),pxToRem(330)) minmax(pxToRem(0), pxToRem(100)) minmax(pxToRem(480),pxToRem(750)) 1fr;
+    grid-auto-rows: var(--p-header-height)  auto 1fr;
     min-block-size: 100vh;
 
-    &.is-no-gap-middle {
-      grid-template-columns:
-        1fr minmax(pxToRem(240), pxToRem(330)) 0 minmax(
-          pxToRem(480),
-          pxToRem(750)
-        )
-        1fr;
-    }
+    &.is-no-gap-middle { grid-template-columns: 1fr minmax(pxToRem(240),pxToRem(330)) 0 minmax(pxToRem(480),pxToRem(750)) 1fr; }
 
-    &-side {
-      position: sticky;
-      z-index: 2;
-      inset-block-start: var(--p-header-height);
-    }
+    &-side { position:sticky; z-index:2; inset-block-start:var(--p-header-height); padding-block-start:pxToRem(54); }
 
     /* bg layout */
-    &-header-strip {
-      grid-row: 1;
-      grid-column: 1 / -1;
-    }
-    &-start-bg {
-      grid-row: 2 / 4;
-      grid-column: 1 / 3;
-      background-color: hsl(var(--p-start-color));
-      border-inline-end: solid pxToRem(1) hsl(var(--color-border));
-    }
-    &-end-bg {
-      grid-row: 2 / 4;
-      grid-column: 3 / 6;
-    }
+    &-header-strip  { grid-row:1;     grid-column:1 / -1; }
+    &-start-bg      { grid-row:2 / 4; grid-column:1 / 3; background-color:hsl(var(--p-start-color)); border-inline-end:solid pxToRem(1) hsl(var(--color-border));}
+    &-end-bg        { grid-row:2 / 4; grid-column:3 / 6; }
 
     /* content layout */
-    &-header {
-      grid-row: 1;
-      grid-column: 2 / 5;
-    }
-    &-side {
-      grid-row: 2;
-      grid-column: 2;
-    }
-    &-main {
-      grid-row: 2 / 4;
-      grid-column: 4;
-    }
-    &-media {
-      grid-row: 3;
-      grid-column: 1 / 3;
-    }
+    &-header        { grid-row:1;     grid-column:2 / 5; }
+    &-side          { grid-row:2;     grid-column:2;     }
+    &-main          { grid-row:2 / 4; grid-column:4;     }
+    &-media         { grid-row:3;     grid-column:1 / 3; }
   }
 
+
   #{$theme-dark} & {
     --p-header-color: var(--color-neutral-500);
-    --p-start-color: var(--color-neutral-400);
-    --p-end-color: var(--color-neutral-300);
+    --p-start-color:  var(--color-neutral-400);
+    --p-end-color:    var(--color-neutral-300);
   }
 }

From 4702cb7d359ac5d6026c55da0c1b3aa662341de8 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Feb 2023 18:18:59 +0700
Subject: [PATCH 003/167] Wizard - - update alignment of code

---
 packages/ui/src/8-grids/_wizard.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/8-grids/_wizard.scss b/packages/ui/src/8-grids/_wizard.scss
index 64e1ad1725..f6d372452f 100644
--- a/packages/ui/src/8-grids/_wizard.scss
+++ b/packages/ui/src/8-grids/_wizard.scss
@@ -5,8 +5,8 @@
   --p-start-color:  var(--color-neutral-5);
   --p-end-color:    var(--color-neutral-0);
 
-  $header-height: pxToRem(64);
-  --p-header-height: #{$header-height};
+  $header-height:     pxToRem(64);
+  --p-header-height:  #{$header-height};
 
 
   /* bg layout */

From b00284104c65f3166e9cc9e4384b9b3720bbbcb0 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 28 Feb 2023 10:32:32 +0700
Subject: [PATCH 004/167] Upload Box - - Remove wrong margin utility class

---
 apps/pink/src/pages/components/upload-box.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/pink/src/pages/components/upload-box.mdx b/apps/pink/src/pages/components/upload-box.mdx
index 6dd50c48c7..3c8863b0cf 100644
--- a/apps/pink/src/pages/components/upload-box.mdx
+++ b/apps/pink/src/pages/components/upload-box.mdx
@@ -37,7 +37,7 @@ Upload Boxes consist of six components:
   <div class="upload-box-content">
     <ul class="upload-box-list">
       <li class="upload-box-item">
-        <div class="upload-image u-margin-inline-end-16">
+        <div class="upload-image">
           <div
             class="progress"
             style="--progress-value:20"
@@ -54,7 +54,7 @@ Upload Boxes consist of six components:
         </button>
       </li>
       <li class="upload-box-item">
-        <div class="upload-image u-margin-inline-end-16">
+        <div class="upload-image">
           <div
             class="progress"
             style="--progress-value:70"
@@ -71,7 +71,7 @@ Upload Boxes consist of six components:
         </button>
       </li>
       <li class="upload-box-item">
-        <div class="upload-image is-finished u-margin-inline-end-16">
+        <div class="upload-image is-finished">
           <div
             class="progress"
             style="--progress-value:100"
@@ -107,7 +107,7 @@ Upload Boxes consist of six components:
   <div class="upload-box-content is-open">
     <ul class="upload-box-list">
       <li class="upload-box-item">
-        <div class="upload-image u-margin-inline-end-16">
+        <div class="upload-image">
           <div
             class="progress"
             style="--progress-value:20"
@@ -127,7 +127,7 @@ Upload Boxes consist of six components:
         </button>
       </li>
       <li class="upload-box-item">
-        <div class="upload-image u-margin-inline-end-16">
+        <div class="upload-image">
           <div
             class="progress"
             style="--progress-value:70"

From bf3f0c8388c71819edfae007c49621af972fa4d0 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 28 Feb 2023 11:50:14 +0700
Subject: [PATCH 005/167] Icons Toggle - - New partial - demo: icons-toggle.mdx
 - Styles file - _icons-toggle.scss

---
 .../src/pages/components/icons-toggle.mdx     | 77 +++++++++++++++++++
 .../ui/src/7-components/_icons-toggle.scss    | 38 +++++++++
 packages/ui/src/7-components/_index.scss      |  1 +
 3 files changed, 116 insertions(+)
 create mode 100644 apps/pink/src/pages/components/icons-toggle.mdx
 create mode 100644 packages/ui/src/7-components/_icons-toggle.scss

diff --git a/apps/pink/src/pages/components/icons-toggle.mdx b/apps/pink/src/pages/components/icons-toggle.mdx
new file mode 100644
index 0000000000..1c1096d3e3
--- /dev/null
+++ b/apps/pink/src/pages/components/icons-toggle.mdx
@@ -0,0 +1,77 @@
+---
+title: Icons Toggle
+description: Toggle view buttons
+---
+
+| Class            | Type          |                                             |
+| ---------------- | ------------- | ------------------------------------------- |
+| `icons-toggle`   | `Icons Toggle | A class representing a Icons Toogle partial |
+
+## Components
+
+Icons Toggle inner parts are:
+
+| Class                | Type    |     |
+| -------------------- | ------- | --- |
+| `icons-toggle-list`  | List    |     |
+| `icons-toggle-item`  | Item    |     |
+| `icons-toggle-button`| Button  |     |
+
+##  Partial base HTML
+
+<Preview center>
+    <div class="icons-toggle">
+        <ul class="icons-toggle-list">
+            <li class="icons-toggle-item">
+                <button class="icons-toggle-button" aria-label="List View">
+                    <span class="icon-view-list" aria-hidden="true"></span>
+                </button>
+            </li>
+            <li class="icons-toggle-item">
+                <button class="icons-toggle-button is-selected" aria-label="Grid View">
+                    <span class="icon-view-grid" aria-hidden="true"></span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</Preview>
+
+##  Disabled View
+
+<Preview center>
+    <div class="icons-toggle">
+        <ul class="icons-toggle-list">
+            <li class="icons-toggle-item">
+                <button class="icons-toggle-button" disabled aria-label="List View">
+                    <span class="icon-view-list" aria-hidden="true"></span>
+                </button>
+            </li>
+            <li class="icons-toggle-item">
+                <button class="icons-toggle-button is-selected" disabled aria-label="Grid View">
+                    <span class="icon-view-grid" aria-hidden="true"></span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</Preview>
+
+
+##  Icon Toggle with Tooltip partial (Using tooltip for accessible instead of aria-label)
+<Preview center>
+    <div class="icons-toggle">
+        <ul class="icons-toggle-list">
+            <li class="icons-toggle-item">
+                <button class="icons-toggle-button tooltip">
+                    <span class="icon-view-list" aria-hidden="true"></span>
+                    <span class="tooltip-popup is-bottom" role="tooltip">List View</span>
+                </button>
+            </li>
+            <li class="icons-toggle-item">
+                <button class="icons-toggle-button is-selected tooltip">
+                    <span class="icon-view-grid" aria-hidden="true"></span>
+                    <span class="tooltip-popup is-bottom" role="tooltip">Grid View</span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</Preview>
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_icons-toggle.scss b/packages/ui/src/7-components/_icons-toggle.scss
new file mode 100644
index 0000000000..481f23a5e1
--- /dev/null
+++ b/packages/ui/src/7-components/_icons-toggle.scss
@@ -0,0 +1,38 @@
+@use '../abstract' as *;
+.icons-toggle {
+  --p-icon-toggle-bg-color: var(--color-neutral-0);
+
+  --p-icon-text-color: var(--p-icon-text-color-default);
+  --p-icon-text-color-default: var(--color-neutral-100);
+  --p-icon-text-color-didabled: var(--color-neutral-50);
+
+  --p-button-color: var(--p-button-color-default);
+  --p-button-color-default: var(--transparent);
+  --p-button-color-selected: var(--color-neutral-10);
+
+  background-color: hsl(var(--p-icon-toggle-bg-color));
+  &-list {
+    display:flex; gap:pxToRem(8); padding:pxToRem(2);
+    border:solid pxToRem(1) hsl(var(--color-border)); border-radius:var(--border-radius-xsmall);
+  }
+  &-item {}
+  &-button {
+    display:grid; place-content:center;
+    inline-size:pxToRem(36); block-size:pxToRem(36);
+    background-color:hsl(var(--p-button-color)); color:hsl(var(--p-icon-text-color)); border-radius:var(--border-radius-xsmall);
+    &.is-selected { --p-button-color: var(--p-button-color-selected); }
+    &#{$disabled} {
+      --p-icon-text-color: var(--p-icon-text-color-didabled);
+      cursor: initial;
+    }
+  }
+
+  #{$theme-dark} & {
+    --p-icon-toggle-bg-color: var(--color-neutral-300);
+
+    --p-icon-text-color-default: var(--color-neutral-50);
+    --p-icon-text-color-didabled: var(--color-neutral-120);
+
+    --p-button-color-selected: var(--color-neutral-150);
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_index.scss b/packages/ui/src/7-components/_index.scss
index 94c25458bc..1f421a522f 100644
--- a/packages/ui/src/7-components/_index.scss
+++ b/packages/ui/src/7-components/_index.scss
@@ -16,6 +16,7 @@
 @forward "pagination";
 @forward "steps";
 @forward "buttons-list";
+@forward "icons-toggle";
 
 @forward "top-cover";
 @forward "code-panel";

From bf54fe50a1d83d122bb3290a0756aa67a3be01ec Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 28 Feb 2023 16:20:26 +0700
Subject: [PATCH 006/167] Icons Toggle - - small documentation fix

---
 apps/pink/src/pages/components/icons-toggle.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/pink/src/pages/components/icons-toggle.mdx b/apps/pink/src/pages/components/icons-toggle.mdx
index 1c1096d3e3..4022bf218c 100644
--- a/apps/pink/src/pages/components/icons-toggle.mdx
+++ b/apps/pink/src/pages/components/icons-toggle.mdx
@@ -5,7 +5,7 @@ description: Toggle view buttons
 
 | Class            | Type          |                                             |
 | ---------------- | ------------- | ------------------------------------------- |
-| `icons-toggle`   | `Icons Toggle | A class representing a Icons Toogle partial |
+| `icons-toggle`   | Icons Toggle | A class representing a Icons Toogle partial |
 
 ## Components
 

From f2021878187471c0ecfe860c949e6e41252d6251 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 28 Feb 2023 16:35:14 +0700
Subject: [PATCH 007/167] Tag - - fix incorrect name variables

---
 packages/ui/src/6-elements/_tag.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/6-elements/_tag.scss b/packages/ui/src/6-elements/_tag.scss
index 026e29f5f4..5cd2e8443b 100644
--- a/packages/ui/src/6-elements/_tag.scss
+++ b/packages/ui/src/6-elements/_tag.scss
@@ -10,9 +10,9 @@
   --p-tag-padding-inline: #{$padding-inline};
 
   /* Light Theme */
-  --p-tag-text-color: var(--pill-text-color, var(--p-tag-text-color-default));
-  --p-tag-bg-color: var(--pill-bg-color, var(--p-tag-bg-color-default));
-  --p-tag-border-color: var(--pill-border-color , var(--p-tag-border-color-default));
+  --p-tag-text-color: var(--tag-text-color, var(--p-tag-text-color-default));
+  --p-tag-bg-color: var(--tag-bg-color, var(--p-tag-bg-color-default));
+  --p-tag-border-color: var(--tag-border-color , var(--p-tag-border-color-default));
 
   --p-tag-text-color-default:  var(--color-neutral-120);
   --p-tag-bg-color-default:    var(--color-neutral-10);

From 8a80f534ab41824ab16ed0e78e25bfbda62f783c Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 28 Feb 2023 18:38:11 +0700
Subject: [PATCH 008/167] Inline Tag - - fix incorrect name variables

---
 apps/pink/src/pages/elements/inline-tag.mdx | 45 +++++++++++++++++++++
 packages/ui/src/6-elements/_index.scss      |  1 +
 packages/ui/src/6-elements/_inline-tag.scss | 28 +++++++++++++
 3 files changed, 74 insertions(+)
 create mode 100644 apps/pink/src/pages/elements/inline-tag.mdx
 create mode 100644 packages/ui/src/6-elements/_inline-tag.scss

diff --git a/apps/pink/src/pages/elements/inline-tag.mdx b/apps/pink/src/pages/elements/inline-tag.mdx
new file mode 100644
index 0000000000..d649c9c4ac
--- /dev/null
+++ b/apps/pink/src/pages/elements/inline-tag.mdx
@@ -0,0 +1,45 @@
+---
+title: Inline Tag
+description: Small tag tag can sit inside partial like buttons
+---
+
+## Basic Usage
+
+<Preview center>
+    <span class="inline-tag">
+        <span class="text">4</span>
+    </span>
+</Preview>
+
+## Inside Button Partial
+In case Inline Tag sit inside a button partial in will get the text color according to the state of the button.
+
+<Preview center>
+    <button class="button is-secondary">
+        <span class="text">button</span>
+        <span class="inline-tag">
+            <span class="text">4</span>
+        </span>
+    </button>
+
+    <button class="button is-secondary" disabled>
+        <span class="text">button</span>
+        <span class="inline-tag">
+            <span class="text">4</span>
+        </span>
+    </button>
+
+    <button class="button is-text">
+        <span class="text">button</span>
+        <span class="inline-tag">
+            <span class="text">4</span>
+        </span>
+    </button>
+
+    <button class="button is-text" disabled>
+        <span class="text">button</span>
+        <span class="inline-tag">
+            <span class="text">4</span>
+        </span>
+    </button>
+</Preview>
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_index.scss b/packages/ui/src/6-elements/_index.scss
index ab0e1c9b0b..01eddce250 100644
--- a/packages/ui/src/6-elements/_index.scss
+++ b/packages/ui/src/6-elements/_index.scss
@@ -5,6 +5,7 @@
 @forward "form";
 @forward "tooltip";
 @forward "tag";
+@forward "inline-tag";
 @forward "logo";
 @forward "avatar";
 @forward "card";
diff --git a/packages/ui/src/6-elements/_inline-tag.scss b/packages/ui/src/6-elements/_inline-tag.scss
new file mode 100644
index 0000000000..886787c774
--- /dev/null
+++ b/packages/ui/src/6-elements/_inline-tag.scss
@@ -0,0 +1,28 @@
+@use '../abstract' as *;
+.inline-tag {
+  $tag-height: pxToRem(22);
+  --p-inline-tag-height: #{$tag-height};
+
+  $padding-inline: pxToRem(6);
+  --p-inline-tag-padding-inline: #{$padding-inline};
+
+  --p-inline-tag-text-color:          var(--inline-tag-text-color, var(--p-inline-tag-text-color-default));
+  --p-inline-tag-bg-color:            var(--inline-tag-bg-color, var(--p-inline-tag-bg-color-default));
+
+  --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-120));
+  --p-inline-tag-bg-color-default:    var(--color-neutral-10);
+
+  display:inline-grid; place-content:center; padding-inline:var(--p-inline-tag-padding-inline);
+
+  background-color: hsl(var(--p-inline-tag-bg-color));
+  color:            hsl(var(--p-inline-tag-text-color));
+  border-radius:    var(--border-radius-xsmall);
+
+  flex-shrink:0; font-weight:600;
+
+  /* Theme Dark */
+  #{$theme-dark} & {
+    --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-0));
+    --p-inline-tag-bg-color-default:    var(--color-neutral-150);
+  }
+}
\ No newline at end of file

From 20a05c6ee3f665593e8615360834538e687a1468 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 28 Feb 2023 19:08:01 +0700
Subject: [PATCH 009/167] Icons Toggle - - Update demo page

---
 .../src/pages/components/icons-toggle.mdx     | 45 ++++++++++---------
 apps/pink/src/pages/elements/tooltip.mdx      |  9 ++--
 packages/ui/src/6-elements/_tooltip.scss      |  1 +
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/apps/pink/src/pages/components/icons-toggle.mdx b/apps/pink/src/pages/components/icons-toggle.mdx
index 4022bf218c..b3857beab3 100644
--- a/apps/pink/src/pages/components/icons-toggle.mdx
+++ b/apps/pink/src/pages/components/icons-toggle.mdx
@@ -1,23 +1,11 @@
 ---
 title: Icons Toggle
-description: Toggle view buttons
+description: Icons Toggle is used to switch between two possible states displayed with icons.
 ---
 
 | Class            | Type          |                                             |
 | ---------------- | ------------- | ------------------------------------------- |
-| `icons-toggle`   | Icons Toggle | A class representing a Icons Toogle partial |
-
-## Components
-
-Icons Toggle inner parts are:
-
-| Class                | Type    |     |
-| -------------------- | ------- | --- |
-| `icons-toggle-list`  | List    |     |
-| `icons-toggle-item`  | Item    |     |
-| `icons-toggle-button`| Button  |     |
-
-##  Partial base HTML
+| `icons-toggle`   | Icons Toggle | A class representing a Icons Toogle          |
 
 <Preview center>
     <div class="icons-toggle">
@@ -36,7 +24,24 @@ Icons Toggle inner parts are:
     </div>
 </Preview>
 
-##  Disabled View
+
+## Components
+
+Icons Toggle inner parts are:
+
+| Class                | Type                                  |     |
+| -------------------- | ------------------------------------- | --- |
+| `icons-toggle-list`  | A class that wraps both toggle items  |     |
+| `icons-toggle-item`  | A class that wraps one toggle item    |     |
+| `icons-toggle-button`| An icon button                        |     |
+
+##  States
+To disable the toggle, add the following attribute:
+
+| Attribute               | Type      |                                                  |
+| ----------------------- | --------- | ------------------------------------------------ |
+| `disabled`              | Disabled  | Use whenever clicking on a toggle isn’t allowed. |
+
 
 <Preview center>
     <div class="icons-toggle">
@@ -55,23 +60,23 @@ Icons Toggle inner parts are:
     </div>
 </Preview>
 
-
-##  Icon Toggle with Tooltip partial (Using tooltip for accessible instead of aria-label)
-<Preview center>
+##  Icon Toggle Combined with tooltip
+<Preview center vertical>
     <div class="icons-toggle">
         <ul class="icons-toggle-list">
             <li class="icons-toggle-item">
                 <button class="icons-toggle-button tooltip">
                     <span class="icon-view-list" aria-hidden="true"></span>
-                    <span class="tooltip-popup is-bottom" role="tooltip">List View</span>
+                    <span class="tooltip-popup is-bottom is-center" role="tooltip">List View</span>
                 </button>
             </li>
             <li class="icons-toggle-item">
                 <button class="icons-toggle-button is-selected tooltip">
                     <span class="icon-view-grid" aria-hidden="true"></span>
-                    <span class="tooltip-popup is-bottom" role="tooltip">Grid View</span>
+                    <span class="tooltip-popup is-bottom  is-center" role="tooltip">Grid View</span>
                 </button>
             </li>
         </ul>
     </div>
+    <br />
 </Preview>
\ No newline at end of file
diff --git a/apps/pink/src/pages/elements/tooltip.mdx b/apps/pink/src/pages/elements/tooltip.mdx
index 305fb1fb14..b6b4e0ce85 100644
--- a/apps/pink/src/pages/elements/tooltip.mdx
+++ b/apps/pink/src/pages/elements/tooltip.mdx
@@ -11,10 +11,11 @@ description: Tooltips float over the layout and provide additional information a
 
 Tooltips consist of two components:
 
-| Class           | Type         |                                            |
-| --------------- | ------------ | ------------------------------------------ |
-| `tooltip-popup` | Text         |                                            |
-| `is-bottom`     | Align Bottom | The tooltip will appear below the element. |
+| Class           | Type         |                                                 |
+| --------------- | ------------ | ----------------------------------------------- |
+| `tooltip-popup` | Text         |                                                 |
+| `is-bottom`     | Align Bottom | The tooltip will appear below the element.      |
+| `is-center`     | Align Center | The tooltip will be align center to the partial |
 
 <Preview center overflow>
   <only-preview>
diff --git a/packages/ui/src/6-elements/_tooltip.scss b/packages/ui/src/6-elements/_tooltip.scss
index c7519ad1d0..3a9dd2667c 100644
--- a/packages/ui/src/6-elements/_tooltip.scss
+++ b/packages/ui/src/6-elements/_tooltip.scss
@@ -17,6 +17,7 @@
     border-radius: var(--border-radius-small);
 
     &.is-bottom { inset-block-start:calc(100% + 10px); inset-block-end:auto; }
+    &.is-center { inset-inline-start:50%; transform:translateX(-50%); }
 
     //&::before {
     //  position:absolute; inset-block-start:100%; inset-inline-start:pxToRem(25);

From bc7c4bed64b56b400ba662bcc69fde22887f2bf2 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 28 Feb 2023 19:24:40 +0700
Subject: [PATCH 010/167] Drop List - - Add new type of drop with checkboxes -
 demo: drop-list.mdx

---
 apps/pink/src/pages/components/drop-list.mdx | 32 ++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/apps/pink/src/pages/components/drop-list.mdx b/apps/pink/src/pages/components/drop-list.mdx
index fdaf1e9ef7..b3a60a9dba 100644
--- a/apps/pink/src/pages/components/drop-list.mdx
+++ b/apps/pink/src/pages/components/drop-list.mdx
@@ -206,6 +206,38 @@ Use the classes below to control the arrow placement of the drop list:
     </div>
   </div>
 </Preview>
+
+## Drop List with Checkboxes
+In the Appwrite console, drop list can contain checkboxes:
+
+<Preview center>
+    <div class="drop-wrapper" style="margin-block-start: 8rem;">
+        <div class="u-flex" style="min-inline-size:12rem">
+            <button class="button is-full-width is-text">
+                <span class="text">Text button</span>
+            </button>
+            <div class="drop is-no-arrow">
+                <section class="drop-section">
+                    <ul class="drop-list">
+                        <li class="drop-list-item">
+                            <label class="drop-button">
+                                <input type="checkbox" />
+                                <span class="text">Item 1</span>
+                            </label>
+                        </li>
+                        <li class="drop-list-item">
+                            <label class="drop-button">
+                                <input type="checkbox" />
+                                <span class="text">Item 2</span>
+                            </label>
+                        </li>
+                    </ul>
+                </section>
+            </div>
+        </div>
+    </div>
+</Preview>
+
 ## Best Practice
 
 We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action.

From 1d9bf8f794d9e22c424ad443788e18c8522d1ed0 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 1 Mar 2023 10:00:40 +0700
Subject: [PATCH 011/167] Interactive Text Output - - New state
 "is-buttons-on-top" - Refactor partial HTML - New demo - output.mdx

---
 apps/pink/src/pages/elements/output.mdx       | 22 ++++++++++++++++---
 .../form/_interactive-text-output.scss        | 14 +++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/apps/pink/src/pages/elements/output.mdx b/apps/pink/src/pages/elements/output.mdx
index 5e08221a9d..a8a5293ac2 100644
--- a/apps/pink/src/pages/elements/output.mdx
+++ b/apps/pink/src/pages/elements/output.mdx
@@ -18,7 +18,7 @@ Interactive text output contains buttons:
 <Preview center>
   <div class="interactive-text-output">
     <span class="text u-break-word">visible text</span>
-    <div class="u-flex u-cross-child-start u-gap-8">
+    <div class="interactive-text-output-buttons">
       <button
         class="interactive-text-output-button is-hidden"
         aria-label="copy text"
@@ -29,7 +29,7 @@ Interactive text output contains buttons:
   </div>
   <div class="interactive-text-output">
     <span class="text">••••••</span>
-    <div class="u-flex u-cross-child-start u-gap-8">
+    <div class="interactive-text-output-buttons">
       <button
         class="interactive-text-output-button"
         aria-label="show hidden text"
@@ -43,6 +43,22 @@ Interactive text output contains buttons:
   </div>
 </Preview>
 
+## Buttons On Top
+
+<Preview center>
+    <div class="interactive-text-output is-buttons-on-top">
+        <span class="text u-break-word">This is the visible text</span>
+        <div class="interactive-text-output-buttons">
+            <button
+                class="interactive-text-output-button is-hidden"
+                aria-label="copy text"
+            >
+                <span class="icon-duplicate" aria-hidden="true"></span>
+            </button>
+        </div>
+    </div>
+</Preview>
+
 <p class="u-margin-block-start-52">
   The following style can be applied to textareas using the `is-textarea` class:
 </p>
@@ -54,7 +70,7 @@ Interactive text output contains buttons:
       c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi
       13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi
     </span>
-    <div class="u-flex u-cross-child-start u-gap-8">
+    <div class="interactive-text-output-buttons">
       <button class="interactive-text-output-button" aria-label="copy text">
         <span class="icon-duplicate" aria-hidden="true"></span>
       </button>
diff --git a/packages/ui/src/6-elements/form/_interactive-text-output.scss b/packages/ui/src/6-elements/form/_interactive-text-output.scss
index 750033d0eb..4637a9a73d 100644
--- a/packages/ui/src/6-elements/form/_interactive-text-output.scss
+++ b/packages/ui/src/6-elements/form/_interactive-text-output.scss
@@ -4,7 +4,8 @@
   --p-text-color: var(--color-neutral-100);
   --p-background-color: var(--color-neutral-10);
 
-  display:flex; max-inline-size:100%; gap:pxToRem(12);
+  position:relative;
+  display:flex; gap:pxToRem(12); max-inline-size:100%;  min-block-size:pxToRem(28);
   padding-inline:pxToRem(8); padding-block:pxToRem(4);
   inline-size: fit-content; min-inline-size:pxToRem(146);
   border-radius: var(--border-radius-xsmall);
@@ -16,11 +17,22 @@
     background-color: hsl(var(--p-background-color));
     .interactive-text-output-button { opacity:1; }
   }
+  /* wrapper for button/s */
+  &-buttons { display:flex; gap:pxToRem(8); align-self:start; }
+
   &-button {
     border-radius: var(--border-radius-circular);
     &.is-hidden { opacity:0; }
   }
 
+  &.is-buttons-on-top {
+    padding-inline-end:pxToRem(12);
+    .interactive-text-output-buttons {
+      position:absolute; inset-inline-end:pxToRem(8); inset-block-start:pxToRem(4);
+      filter:drop-shadow(0px 0px 4px hsl(var(--p-background-color))) drop-shadow(0px 0px 6px hsl(var(--p-background-color))) drop-shadow(0px 0px 8px hsl(var(--p-background-color)));
+    }
+  }
+
   #{$theme-dark} & {
     --p-text-color: var(--color-neutral-50);
     --p-background-color: var(--color-neutral-150);

From 7053bcef315730e33e43ae1142f4b97bbbd6c620 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 1 Mar 2023 10:03:53 +0700
Subject: [PATCH 012/167] Interactive Text Output - - update documentation

---
 apps/pink/src/pages/elements/output.mdx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/pink/src/pages/elements/output.mdx b/apps/pink/src/pages/elements/output.mdx
index a8a5293ac2..9587e2a36c 100644
--- a/apps/pink/src/pages/elements/output.mdx
+++ b/apps/pink/src/pages/elements/output.mdx
@@ -11,9 +11,10 @@ description: Interactive text outputs allow users to interact with the displayed
 
 Interactive text output contains buttons:
 
-| Class                            | Type   |                                                                                            |
-| -------------------------------- | ------ | ------------------------------------------------------------------------------------------ |
-| `interactive-text-output-button` | Button | Buttons can be hidden (will appear on hover) or displayed next to the content.             |
+| Class                            | Type             |                                                                                            |
+| -------------------------------- | ---------------- | ------------------------------------------------------------------------------------------ |
+| `interactive-text-output-buttons`| Button/s Wrapper |                                                                                            |
+| `interactive-text-output-button` | Button           | Buttons can be hidden (will appear on hover) or displayed next to the content.             |
 
 <Preview center>
   <div class="interactive-text-output">

From 72ad900d5b3d20b2d74b5399475e006ad9529434 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 1 Mar 2023 10:06:41 +0700
Subject: [PATCH 013/167] Interactive Text Output - - update style

---
 packages/ui/src/6-elements/form/_interactive-text-output.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/6-elements/form/_interactive-text-output.scss b/packages/ui/src/6-elements/form/_interactive-text-output.scss
index 4637a9a73d..811f9dc546 100644
--- a/packages/ui/src/6-elements/form/_interactive-text-output.scss
+++ b/packages/ui/src/6-elements/form/_interactive-text-output.scss
@@ -29,7 +29,9 @@
     padding-inline-end:pxToRem(12);
     .interactive-text-output-buttons {
       position:absolute; inset-inline-end:pxToRem(8); inset-block-start:pxToRem(4);
-      filter:drop-shadow(0px 0px 4px hsl(var(--p-background-color))) drop-shadow(0px 0px 6px hsl(var(--p-background-color))) drop-shadow(0px 0px 8px hsl(var(--p-background-color)));
+      filter: drop-shadow(0px 0px pxToRem(4) hsl(var(--p-background-color)))
+              drop-shadow(0px 0px pxToRem(6) hsl(var(--p-background-color)))
+              drop-shadow(0px 0px pxToRem(8) hsl(var(--p-background-color)));
     }
   }
 

From 1a925447a9f036f29db70b228be0ab34bddf14ac Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 1 Mar 2023 12:32:53 +0700
Subject: [PATCH 014/167] Input Field - - Dropdown with search, add two new
 demos - input-field.mdx - Upgrade Drop partial - New style for
 "custom-select"

---
 apps/pink/src/pages/elements/input-field.mdx  | 80 +++++++++++++++++++
 .../ui/src/6-elements/form/_text-inputs.scss  | 12 +++
 packages/ui/src/7-components/_drop.scss       | 12 +--
 3 files changed, 99 insertions(+), 5 deletions(-)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index 85026f1622..f8bcc7f1fa 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -170,6 +170,86 @@ There are a few different types of input field that the user can interact with:
   </form>
 </Preview>
 
+## Custom select
+The options are made with ```drop-list``` partial. To hide them you can use the ```u-hide``` class name.
+
+<Preview center>
+    <form class="form u-width-full-line u-max-width-500">
+        <ul class="form-list">
+            <li class="form-item">
+                <label class="label">Label</label>
+
+                <div class="custom-select">
+                    <button class="select u-width-full-line" type="button">
+                        <span class="input-text"><span class="text">Placeholder</span></span>
+                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                    </button>
+
+                    <div class="drop is-block-end is-no-arrow">
+                        <section class="drop-section">
+                            <ul class="drop-list">
+                                <li class="drop-list-item">
+                                    <button class="drop-button">
+                                        <span class="text">Item 1</span>
+                                    </button>
+                                </li>
+                                <li class="drop-list-item">
+                                    <button class="drop-button">
+                                        <span class="text">Item 2</span>
+                                    </button>
+                                </li>
+                            </ul>
+                        </section>
+                    </div>
+                </div>
+
+            </li>
+        </ul>
+        <br /><br /><br /><br /><br /><br /><br /><br />
+    </form>
+</Preview>
+
+## Custom select with input-text
+The options are made with ```drop-list``` partial. To hide them you can use the ```u-hide``` class name.
+
+<Preview center>
+    <form class="form u-width-full-line u-max-width-500">
+        <ul class="form-list">
+            <li class="form-item">
+                <label class="label">Label</label>
+
+                <div class="custom-select">
+                    <div class="select u-width-full-line">
+                        <input type="text" class="input-text" placeholder="Placeholder"></input>
+                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                    </div>
+
+                    <div class="drop is-block-end is-no-arrow">
+                        <section class="drop-section">
+                            <ul class="drop-list">
+                                <li class="drop-list-item">
+                                    <button class="drop-button">
+                                        <span class="text">Item 1</span>
+                                    </button>
+                                </li>
+                                <li class="drop-list-item">
+                                    <button class="drop-button">
+                                        <span class="text">Item 2</span>
+                                    </button>
+                                </li>
+                            </ul>
+                        </section>
+                    </div>
+                </div>
+
+            </li>
+        </ul>
+        <br /><br /><br /><br /><br /><br /><br /><br />
+    </form>
+</Preview>
+
+
+
 | Input Type | Type     |                                                                                                       |
 | ---------- | -------- | ----------------------------------------------------------------------------------------------------- |
 | `textarea` | Textarea | For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). |
diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index 12ca677e91..22b0daace5 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -261,6 +261,18 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
   }
 }
 
+.custom-select {
+  position:relative;
+  .drop {
+    --drop-border-color: var(--color-neutral-30);
+    --drop-border-radius: var(--border-radius-xsmall);
+    inset-inline:0; max-inline-size:none;
+    #{$theme-dark} & {
+      --drop-border-color: var(--color-neutral-150);
+    }
+  }
+}
+
 [type="file"] {
   cursor:pointer;
   &::-webkit-file-upload-button{ line-height:1; }
diff --git a/packages/ui/src/7-components/_drop.scss b/packages/ui/src/7-components/_drop.scss
index ef4384067c..fe46e65b7f 100644
--- a/packages/ui/src/7-components/_drop.scss
+++ b/packages/ui/src/7-components/_drop.scss
@@ -1,14 +1,16 @@
 @use '../abstract' as *;
 .drop {
   --p-drop-bg-color:            var(--color-neutral-0);
-  --p-drop-border-color:        var(--color-neutral-10);
+  --p-drop-border-color:        var(--drop-border-color, var(--color-neutral-10));
 
   --p-drop-width-size-desltop:  var(--drop-width-size-desktop);
 
+  --p-drop-border-radius:       var(--drop-border-radius, var(--border-radius-small));
+
   position:absolute; inset-inline-start:pxToRem(-10); inset-block-end:calc(100% + #{pxToRem(10)});
   background-color:hsl(var(--p-drop-bg-color));
   color:hsl(var(--p-drop-text-color));
-  border:solid pxToRem(1) hsl(var(--p-drop-border-color)); border-radius:var(--border-radius-small); box-shadow:var(--shadow-small);
+  border:solid pxToRem(1) hsl(var(--p-drop-border-color)); border-radius:var(--p-drop-border-radius); box-shadow:var(--shadow-small);
   min-inline-size: pxToRem(208);
   max-inline-size: pxToRem(280);
 
@@ -66,8 +68,8 @@
   }
   /**   states   **/
   /* align states */
-  &.is-inline-end { inset-inline-end:pxToRem(-10); inset-inline-start:auto; }
-  &.is-block-end {
+  &:where(.is-inline-end) { inset-inline-end:pxToRem(-10); inset-inline-start:auto; }
+  &:where(.is-block-end) {
     inset-block-start:calc(100% + #{pxToRem(10)}); inset-block-end:auto;
     &::before, &::after { inset-block-start:pxToRem(-8); inset-block-end:auto; clip-path:polygon(50% 0%, 100% 100%, 0% 100%); }
     &::after { transform:translateY(pxToRem(-2)); }
@@ -132,7 +134,7 @@
 
   #{$theme-dark} &{
     --p-drop-bg-color:      var(--color-neutral-500);
-    --p-drop-border-color:  var(--color-neutral-200);
+    --p-drop-border-color:  var(--drop-border-color, var(--color-neutral-200));
     &-button {
       --p-drop-text-color:              var(--color-neutral-30);
       --p-drop-item-bg-color-hover:     var(--color-neutral-200);

From 962425da21f7dfec23eacf4bc8ce54c6670240e9 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 1 Mar 2023 22:09:34 +0700
Subject: [PATCH 015/167] Icons Toggle - - Update content - input-field.mdx

---
 apps/pink/src/pages/components/icons-toggle.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/pink/src/pages/components/icons-toggle.mdx b/apps/pink/src/pages/components/icons-toggle.mdx
index b3857beab3..3ac84d2634 100644
--- a/apps/pink/src/pages/components/icons-toggle.mdx
+++ b/apps/pink/src/pages/components/icons-toggle.mdx
@@ -60,7 +60,9 @@ To disable the toggle, add the following attribute:
     </div>
 </Preview>
 
-##  Icon Toggle Combined with tooltip
+##  Icon Toggle with Tooltip
+In the Appwrite console, we display a tooltip on hover, as shown below:
+
 <Preview center vertical>
     <div class="icons-toggle">
         <ul class="icons-toggle-list">

From c3d399821ac1374c23b89b7897c20d35ec65f090 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 1 Mar 2023 22:31:42 +0700
Subject: [PATCH 016/167] Inline Tag - - Update content - inline-tag.mdx

---
 apps/pink/src/pages/elements/inline-tag.mdx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/pink/src/pages/elements/inline-tag.mdx b/apps/pink/src/pages/elements/inline-tag.mdx
index d649c9c4ac..bc4703bead 100644
--- a/apps/pink/src/pages/elements/inline-tag.mdx
+++ b/apps/pink/src/pages/elements/inline-tag.mdx
@@ -1,9 +1,11 @@
 ---
 title: Inline Tag
-description: Small tag tag can sit inside partial like buttons
+description: An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items.
 ---
 
-## Basic Usage
+| Class        | Type       |                                    |
+| ------------ | ---------- | ---------------------------------- |
+| `inline-tag` | Inline Tag | A class representing an Inline Tag |
 
 <Preview center>
     <span class="inline-tag">
@@ -11,8 +13,8 @@ description: Small tag tag can sit inside partial like buttons
     </span>
 </Preview>
 
-## Inside Button Partial
-In case Inline Tag sit inside a button partial in will get the text color according to the state of the button.
+## Usage with Buttons
+Incorporate the inline tag into secondary buttons or text buttons by doing the following:
 
 <Preview center>
     <button class="button is-secondary">

From 73e812e74ae1c78a4015a875c7a656de2cb10221 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 2 Mar 2023 15:40:45 +0700
Subject: [PATCH 017/167] Update utility class name (old name)

---
 apps/kitchensink/partials/topNav.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/kitchensink/partials/topNav.hbs b/apps/kitchensink/partials/topNav.hbs
index b288b18bf8..832f77a36c 100644
--- a/apps/kitchensink/partials/topNav.hbs
+++ b/apps/kitchensink/partials/topNav.hbs
@@ -1,5 +1,5 @@
 <header class="main-header u-padding-inline-end-0">
-    <button id="menuButton" class="icon-button is-no-desktop" aria-label="Open Menu">
+    <button id="menuButton" class="icon-button is-not-desktop" aria-label="Open Menu">
         <span class="icon-menu" aria-hidden="true"></span>
     </button>
     <a class="logo">

From c8478f5135bb867efd4ff54326a2212dce691c55 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 2 Mar 2023 17:35:03 +0700
Subject: [PATCH 018/167] Top Cover - fix arrow location on mobile

---
 packages/ui/src/7-components/_top-cover.scss | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/7-components/_top-cover.scss b/packages/ui/src/7-components/_top-cover.scss
index 82ccb8d1ed..6371c95366 100644
--- a/packages/ui/src/7-components/_top-cover.scss
+++ b/packages/ui/src/7-components/_top-cover.scss
@@ -13,16 +13,19 @@
     flex:1; display:flex; flex-direction:column;
     .tabs{ margin-block-start:auto; margin-block-end:calc(var(--p-container-padding-block) * -1); }
   }
-  [class*="heading-level-"] {
-    position:relative;
-    .button {
-      position:absolute; inset-inline-start:0;
-      transform: translateX( calc(-100% * var(--transform-direction)) )
-                 scaleX(var(--transform-direction));
+  @media #{$break3open} {
+    [class*="heading-level-"] {
+      position:relative;
+      .button {
+        position:absolute; inset-inline-start:0;
+        transform: translateX( calc(-100% * var(--transform-direction)) )
+        scaleX(var(--transform-direction));
+      }
     }
   }
 
 
+
   #{$theme-dark} & {
     --p-cover-bg-color: var(--color-neutral-400);
   }

From d8989ce09c59a0862edd280e95ba18aff488a944 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 2 Mar 2023 18:36:33 +0700
Subject: [PATCH 019/167] Icon Toggle - change name from icons-toggle ->
 icon-toggle

---
 .../{icons-toggle.mdx => icon-toggle.mdx}     | 48 +++++++++----------
 .../{_icons-toggle.scss => _icon-toggle.scss} |  2 +-
 packages/ui/src/7-components/_index.scss      |  2 +-
 3 files changed, 26 insertions(+), 26 deletions(-)
 rename apps/pink/src/pages/components/{icons-toggle.mdx => icon-toggle.mdx} (58%)
 rename packages/ui/src/7-components/{_icons-toggle.scss => _icon-toggle.scss} (98%)

diff --git a/apps/pink/src/pages/components/icons-toggle.mdx b/apps/pink/src/pages/components/icon-toggle.mdx
similarity index 58%
rename from apps/pink/src/pages/components/icons-toggle.mdx
rename to apps/pink/src/pages/components/icon-toggle.mdx
index 3ac84d2634..d6f5217160 100644
--- a/apps/pink/src/pages/components/icons-toggle.mdx
+++ b/apps/pink/src/pages/components/icon-toggle.mdx
@@ -1,22 +1,22 @@
 ---
-title: Icons Toggle
-description: Icons Toggle is used to switch between two possible states displayed with icons.
+title: Icon Toggle
+description: Icon toggle is used to switch between two possible states displayed with icons.
 ---
 
 | Class            | Type          |                                             |
 | ---------------- | ------------- | ------------------------------------------- |
-| `icons-toggle`   | Icons Toggle | A class representing a Icons Toogle          |
+| `icon-toggle`   | Icon Toggle    | A class representing an icon toggle.        |
 
 <Preview center>
-    <div class="icons-toggle">
-        <ul class="icons-toggle-list">
-            <li class="icons-toggle-item">
-                <button class="icons-toggle-button" aria-label="List View">
+    <div class="icon-toggle">
+        <ul class="icon-toggle-list">
+            <li class="icon-toggle-item">
+                <button class="icon-toggle-button" aria-label="List View">
                     <span class="icon-view-list" aria-hidden="true"></span>
                 </button>
             </li>
-            <li class="icons-toggle-item">
-                <button class="icons-toggle-button is-selected" aria-label="Grid View">
+            <li class="icon-toggle-item">
+                <button class="icon-toggle-button is-selected" aria-label="Grid View">
                     <span class="icon-view-grid" aria-hidden="true"></span>
                 </button>
             </li>
@@ -31,9 +31,9 @@ Icons Toggle inner parts are:
 
 | Class                | Type                                  |     |
 | -------------------- | ------------------------------------- | --- |
-| `icons-toggle-list`  | A class that wraps both toggle items  |     |
-| `icons-toggle-item`  | A class that wraps one toggle item    |     |
-| `icons-toggle-button`| An icon button                        |     |
+| `icon-toggle-list`  | A class that wraps both toggle items  |     |
+| `icon-toggle-item`  | A class that wraps one toggle item    |     |
+| `icon-toggle-button`| An icon button                        |     |
 
 ##  States
 To disable the toggle, add the following attribute:
@@ -44,15 +44,15 @@ To disable the toggle, add the following attribute:
 
 
 <Preview center>
-    <div class="icons-toggle">
-        <ul class="icons-toggle-list">
-            <li class="icons-toggle-item">
-                <button class="icons-toggle-button" disabled aria-label="List View">
+    <div class="icon-toggle">
+        <ul class="icon-toggle-list">
+            <li class="icon-toggle-item">
+                <button class="icon-toggle-button" disabled aria-label="List View">
                     <span class="icon-view-list" aria-hidden="true"></span>
                 </button>
             </li>
-            <li class="icons-toggle-item">
-                <button class="icons-toggle-button is-selected" disabled aria-label="Grid View">
+            <li class="icon-toggle-item">
+                <button class="icon-toggle-button is-selected" disabled aria-label="Grid View">
                     <span class="icon-view-grid" aria-hidden="true"></span>
                 </button>
             </li>
@@ -64,16 +64,16 @@ To disable the toggle, add the following attribute:
 In the Appwrite console, we display a tooltip on hover, as shown below:
 
 <Preview center vertical>
-    <div class="icons-toggle">
-        <ul class="icons-toggle-list">
-            <li class="icons-toggle-item">
-                <button class="icons-toggle-button tooltip">
+    <div class="icon-toggle">
+        <ul class="icon-toggle-list">
+            <li class="icon-toggle-item">
+                <button class="icon-toggle-button tooltip">
                     <span class="icon-view-list" aria-hidden="true"></span>
                     <span class="tooltip-popup is-bottom is-center" role="tooltip">List View</span>
                 </button>
             </li>
-            <li class="icons-toggle-item">
-                <button class="icons-toggle-button is-selected tooltip">
+            <li class="icon-toggle-item">
+                <button class="icon-toggle-button is-selected tooltip">
                     <span class="icon-view-grid" aria-hidden="true"></span>
                     <span class="tooltip-popup is-bottom  is-center" role="tooltip">Grid View</span>
                 </button>
diff --git a/packages/ui/src/7-components/_icons-toggle.scss b/packages/ui/src/7-components/_icon-toggle.scss
similarity index 98%
rename from packages/ui/src/7-components/_icons-toggle.scss
rename to packages/ui/src/7-components/_icon-toggle.scss
index 481f23a5e1..12a6575a43 100644
--- a/packages/ui/src/7-components/_icons-toggle.scss
+++ b/packages/ui/src/7-components/_icon-toggle.scss
@@ -1,5 +1,5 @@
 @use '../abstract' as *;
-.icons-toggle {
+.icon-toggle {
   --p-icon-toggle-bg-color: var(--color-neutral-0);
 
   --p-icon-text-color: var(--p-icon-text-color-default);
diff --git a/packages/ui/src/7-components/_index.scss b/packages/ui/src/7-components/_index.scss
index 1f421a522f..2134ae0108 100644
--- a/packages/ui/src/7-components/_index.scss
+++ b/packages/ui/src/7-components/_index.scss
@@ -16,7 +16,7 @@
 @forward "pagination";
 @forward "steps";
 @forward "buttons-list";
-@forward "icons-toggle";
+@forward "icon-toggle";
 
 @forward "top-cover";
 @forward "code-panel";

From 960a6f7dc39869ed77462589c1e4c14523400183 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 2 Mar 2023 18:59:40 +0700
Subject: [PATCH 020/167] Interactive Output - Update QA with Chen - Update
 Utility Class + demo page

---
 apps/pink/src/pages/elements/output.mdx               |  4 ++--
 apps/pink/src/pages/utilities/display.mdx             |  4 +++-
 .../src/6-elements/form/_interactive-text-output.scss |  2 +-
 packages/ui/src/_9-utilities.scss                     | 11 +++++++----
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/pink/src/pages/elements/output.mdx b/apps/pink/src/pages/elements/output.mdx
index 9587e2a36c..970076fb60 100644
--- a/apps/pink/src/pages/elements/output.mdx
+++ b/apps/pink/src/pages/elements/output.mdx
@@ -47,8 +47,8 @@ Interactive text output contains buttons:
 ## Buttons On Top
 
 <Preview center>
-    <div class="interactive-text-output is-buttons-on-top">
-        <span class="text u-break-word">This is the visible text</span>
+    <div class="interactive-text-output is-buttons-on-top u-width-200">
+        <span class="text u-trim-start">This is the visible text which is very long</span>
         <div class="interactive-text-output-buttons">
             <button
                 class="interactive-text-output-button is-hidden"
diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx
index e75ed26dd9..923ebbb3fa 100644
--- a/apps/pink/src/pages/utilities/display.mdx
+++ b/apps/pink/src/pages/utilities/display.mdx
@@ -46,7 +46,7 @@ description: Display controls how an element is displayed, including its alignme
 | `u-row-gap-16`             | `row-gap: pxToRem(16);`                                           | `row-gap: 1rem;`                                                 |
 | `u-row-gap-24`             | `row-gap: pxToRem(24);`                                           | `row-gap: 1.5rem;`                                               |
 |                            |                                                                   |                                                                  |
-| `u-flex-vertical`          | `flex-direction: column;`                                         | Stays the same                                                   |
+| `u-flex-vertical`          | `display:flex; flex-direction: column;`                           | Stays the same                                                   |
 | `u-flex-vertical-mobile`   | `@media #{$break1} { flex-direction:column; }`                    | `@media (max-width:767.99px) { flex-direction:column; }`         |
 | `u-flex-wrap`              | `flex-wrap: wrap;`                                                | Stays the same                                                   |
 | `u-stretch`                | `flex: 1;`                                                        | Stays the same                                                   |
@@ -58,6 +58,8 @@ description: Display controls how an element is displayed, including its alignme
 | `u-grid-columns-auto-1fr`  | `grid-template-columns: auto 1fr;`                                | Stays the same                                                   |
 |                            |                                                                   |                                                                  |
 | `u-width-full-line`        | `inline-size: 100%;`                                              | Stays the same                                                   |
+| `u-width-150`              | `inline-size: pxToRem(150);`                                      | `inline-size: 9.375rem;`                                         |
+| `u-width-200`              | `inline-size: pxToRem(200);`                                      | `inline-size: 12.5rem;`                                          |
 | `u-width-250`              | `inline-size: pxToRem(250);`                                      | `inline-size: 15.625rem;`                                        |
 | `u-width-280-desktop`      | `@media #{$break3open} { inline-size: pxToRem(280); }`            | `@media (min-width:1199px) { inline-size: 17.25rem; }`           |
 |                            |                                                                   |                                                                  |
diff --git a/packages/ui/src/6-elements/form/_interactive-text-output.scss b/packages/ui/src/6-elements/form/_interactive-text-output.scss
index 811f9dc546..b7f8614bd5 100644
--- a/packages/ui/src/6-elements/form/_interactive-text-output.scss
+++ b/packages/ui/src/6-elements/form/_interactive-text-output.scss
@@ -26,7 +26,7 @@
   }
 
   &.is-buttons-on-top {
-    padding-inline-end:pxToRem(12);
+    padding-inline-end:pxToRem(12); background-color:hsl(var(--p-background-color));
     .interactive-text-output-buttons {
       position:absolute; inset-inline-end:pxToRem(8); inset-block-start:pxToRem(4);
       filter: drop-shadow(0px 0px pxToRem(4) hsl(var(--p-background-color)))
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 51387974f9..dbedd00ab3 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -111,7 +111,7 @@
 .u-row-gap-24     { row-gap:pxToRem(24); }
 .u-row-gap-32     { row-gap:pxToRem(32); }
 
-.u-flex-vertical            { flex-direction:column;  }
+.u-flex-vertical            { display:flex; flex-direction:column;  }
 .u-flex-vertical-mobile     { @media #{$break1} { flex-direction:column; }  }
 .u-flex-wrap                { flex-wrap:wrap;         }
 .u-stretch                  { flex:1;                 }
@@ -124,6 +124,8 @@
 
 .u-width-fit-content      { inline-size:fit-content;     }
 .u-width-full-line        { inline-size:100%;            }
+.u-width-150              { inline-size:pxToRem(150);    }
+.u-width-200              { inline-size:pxToRem(200);    }
 .u-width-250              { inline-size:pxToRem(250);    }
 .u-width-280-desktop      { @media #{$break3open} { inline-size:pxToRem(280); } }
 .u-min-width-0            { min-inline-size:0;            } /*use to solve flexbox un-shrink problem;*/
@@ -151,9 +153,10 @@
 .u-full-screen-height { block-size:100vh; block-size:100lvh; }
 
 /* alignments */
-.u-main-center        { justify-content:center;         }
-.u-main-space-between { justify-content:space-between;  }
-.u-main-end           { justify-content:end;            }
+.u-main-start         { justify-content:start!important;  }
+.u-main-center        { justify-content:center;           }
+.u-main-space-between { justify-content:space-between;    }
+.u-main-end           { justify-content:end;              }
 
 .u-cross-start        { align-items:start;    }
 .u-cross-baseline     { align-items:baseline; }

From 78d9a6418b92a51a61bae82c34f5e468f172cd75 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 2 Mar 2023 19:18:58 +0700
Subject: [PATCH 021/167] Dual-tier sidebar - Side Nav - Refactor to 2 levels -
 Update grid-with-side - _grid-with-side.scss

- Drop update gap
---
 apps/kitchensink/partials/sideNav.hbs        | 256 ++++++++++++-------
 packages/ui/src/7-components/_drop.scss      |   2 +-
 packages/ui/src/7-components/_side-nav.scss  |  44 +++-
 packages/ui/src/8-grids/_grid-with-side.scss |   2 +-
 4 files changed, 204 insertions(+), 100 deletions(-)

diff --git a/apps/kitchensink/partials/sideNav.hbs b/apps/kitchensink/partials/sideNav.hbs
index 2e8896a174..c86c14f5a6 100644
--- a/apps/kitchensink/partials/sideNav.hbs
+++ b/apps/kitchensink/partials/sideNav.hbs
@@ -1,130 +1,196 @@
 <nav id="nav" class="main-side">
     <div class="side-nav">
-        <div class="side-nav-main">
-            <section class="drop-section">
+
+        <div class="side-nav-level-1 is-narrow">
+            <div class="side-nav-main">
+                <section class="drop-section">
+                    <button class="open-nav is-not-desktop">OPEN NAV</button>
+                    <ul class="drop-list">
+                        <li class="drop-list-item">
+                            <a class="drop-button is-selected" href="/">
+                                <span class="icon-chart-bar" aria-hidden="true"></span>
+                                <span class="text">Home</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="">
+                                <span class="icon-database" aria-hidden="true"></span>
+                                <span class="text">Database</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/settings.html">
+                                <span class="icon-folder" aria-hidden="true"></span>
+                                <span class="text">Storage</span>
+                            </a>
+                        </li>
+
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/users.html">
+                                <span class="icon-user-group" aria-hidden="true"></span>
+                                <span class="text">Users</span>
+                            </a>
+                        </li>
+
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="">
+                                <span class="icon-lightning-bolt" aria-hidden="true"></span>
+                                <span class="text">Functions</span>
+                            </a>
+                        </li>
+                    </ul>
+                    <p style="margin-top: 1rem;">DEMOS</p>
+                    <ul class="drop-list">
+
+
+
+
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/users.html">
+                                <span class="icon-user-group" aria-hidden="true"></span>
+                                <span class="text">Users</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/user.html">
+                                <span class="icon-user" aria-hidden="true"></span>
+                                <span class="text">User</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/userSecurity.html">
+                                <span class="icon-user" aria-hidden="true"></span>
+                                <span class="text">Security</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/auth.html">
+                                <span class="icon-academic-cap" aria-hidden="true"></span>
+                                <span class="text">Auth</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/auth2.html">
+                                <span class="icon-archive" aria-hidden="true"></span>
+                                <span class="text">Auth2</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/teamActivity.html">
+                                <span class="icon-beaker" aria-hidden="true"></span>
+                                <span class="text">Team Activity</span>
+                            </a>
+                        </li>
+
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/buckets.html">
+                                <span class="icon-folder" aria-hidden="true"></span>
+                                <span class="text">Buckets</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/bucket.html">
+                                <span class="icon-folder" aria-hidden="true"></span>
+                                <span class="text">Bucket</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/bucketSettings.html">
+                                <span class="icon-folder" aria-hidden="true"></span>
+                                <span class="text">Bucket Settings</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/collection.html">
+                                <span class="icon-annotation" aria-hidden="true"></span>
+                                <span class="text">Collection</span>
+                            </a>
+                        </li>
+
+                    </ul>
+
+                </section>
+                <section class="drop-section u-flex u-flex-vertical is-not-desktop">
+                    <button class="button is-text u-main-center u-width-full-line"><span
+                            class="text">Feedback</span></button>
+                    <button class="button is-text u-main-center u-width-full-line"><span
+                            class="text">Support</span></button>
+                    <button class="button is-secondary u-main-center u-width-full-line"><span
+                            class="text">Upgrade</span></button>
+                </section>
+            </div>
+            <div class="side-nav-bottom">
+                <section class="drop-section">
+                    <a class="drop-button" href="">
+                        <span class="icon-cog" aria-hidden="true"></span>
+                        <span class="text">Settings</span>
+                    </a>
+                </section>
+
+            </div>
+            <button class="side-nav-button button is-small is-secondary is-not-mobile" aria-label="resize menu">
+                <span class="icon-cheveron-right" aria-hidden="true"></span>
+            </button>
+        </div>
+
+        <div class="side-nav-level-2 is-open">
+            <section class="drop-section u-flex-vertical u-gap-8">
+                <button class="u-flex u-cross-center u-sep-block-end u-padding-block-12 is-not-desktop" id="aaa">
+                    <span class="icon-cheveron-left" aria-hidden="true"></span>
+                    <span class="eyebrow-heading-3 u-margin-inline-auto">Databases</span>
+                </button>
+                <h5 class="eyebrow-heading-3 u-padding-block-12">Header</h5>
+                <button class="button is-text is-full-width u-main-start u-padding-inline-0">
+                    <span class="icon-plus" aria-hidden="true"></span>
+                    <span class="text">Button</span>
+                </button>
                 <ul class="drop-list">
                     <li class="drop-list-item">
                         <a class="drop-button is-selected" href="/">
-                            <span class="icon-chart-bar" aria-hidden="true"></span>
                             <span class="text">Home</span>
                         </a>
                     </li>
                     <li class="drop-list-item">
                         <a class="drop-button" href="">
-                            <span class="icon-database" aria-hidden="true"></span>
                             <span class="text">Database</span>
                         </a>
                     </li>
                     <li class="drop-list-item">
                         <a class="drop-button" href="/settings.html">
-                            <span class="icon-folder" aria-hidden="true"></span>
                             <span class="text">Storage</span>
                         </a>
                     </li>
 
                     <li class="drop-list-item">
                         <a class="drop-button" href="/users.html">
-                            <span class="icon-user-group" aria-hidden="true"></span>
                             <span class="text">Users</span>
                         </a>
                     </li>
 
                     <li class="drop-list-item">
                         <a class="drop-button" href="">
-                            <span class="icon-lightning-bolt" aria-hidden="true"></span>
                             <span class="text">Functions</span>
                         </a>
                     </li>
                 </ul>
-                <p style="margin-top: 1rem;">DEMOS</p>
-                <ul class="drop-list">
-
-
-
-
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/users.html">
-                            <span class="icon-user-group" aria-hidden="true"></span>
-                            <span class="text">Users</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/user.html">
-                            <span class="icon-user" aria-hidden="true"></span>
-                            <span class="text">User</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/userSecurity.html">
-                            <span class="icon-user" aria-hidden="true"></span>
-                            <span class="text">Security</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/auth.html">
-                            <span class="icon-academic-cap" aria-hidden="true"></span>
-                            <span class="text">Auth</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/auth2.html">
-                            <span class="icon-archive" aria-hidden="true"></span>
-                            <span class="text">Auth2</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/teamActivity.html">
-                            <span class="icon-beaker" aria-hidden="true"></span>
-                            <span class="text">Team Activity</span>
-                        </a>
-                    </li>
-
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/buckets.html">
-                            <span class="icon-folder" aria-hidden="true"></span>
-                            <span class="text">Buckets</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/bucket.html">
-                            <span class="icon-folder" aria-hidden="true"></span>
-                            <span class="text">Bucket</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/bucketSettings.html">
-                            <span class="icon-folder" aria-hidden="true"></span>
-                            <span class="text">Bucket Settings</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/collection.html">
-                            <span class="icon-annotation" aria-hidden="true"></span>
-                            <span class="text">Collection</span>
-                        </a>
-                    </li>
-
-                </ul>
-
-            </section>
-            <section class="drop-section u-flex u-flex-vertical is-no-desktop">
-                <button class="button is-text u-main-center u-width-full-line"><span
-                        class="text">Feedback</span></button>
-                <button class="button is-text u-main-center u-width-full-line"><span
-                        class="text">Support</span></button>
-                <button class="button is-secondary u-main-center u-width-full-line"><span
-                        class="text">Upgrade</span></button>
             </section>
         </div>
 
-        <div class="side-nav-bottom">
-            <section class="drop-section">
-                <a class="drop-button" href="">
-                    <span class="icon-cog" aria-hidden="true"></span>
-                    <span class="text">Settings</span>
-                </a>
-            </section>
-
-        </div>
     </div>
-</nav>
\ No newline at end of file
+</nav>
+
+
+<!-- TEMP JS (by Elad) -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>
+    $(document).ready(function() {
+        $(".side-nav-button").on( "click", function() {
+            $(".side-nav-level-1").toggleClass("is-narrow");
+            $(".side-nav-button").toggleClass("is-open");
+        });
+
+        $(".open-nav, #aaa").on( "click", function() {
+            $(".side-nav").toggleClass("is-open-level-2");
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_drop.scss b/packages/ui/src/7-components/_drop.scss
index fe46e65b7f..7eabd538d5 100644
--- a/packages/ui/src/7-components/_drop.scss
+++ b/packages/ui/src/7-components/_drop.scss
@@ -99,7 +99,7 @@
   }
 
   &-list {
-    display:flex; flex-direction:column; gap:pxToRem(10);
+    display:flex; flex-direction:column; gap:pxToRem(8);
     font-size: var(--font-size-0);
     &-item { flex-shrink:0}
   }
diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss
index 588e4ddb22..ce23868df5 100644
--- a/packages/ui/src/7-components/_side-nav.scss
+++ b/packages/ui/src/7-components/_side-nav.scss
@@ -4,11 +4,25 @@
   --p-side-nav-bg-color:      var(--color-neutral-0);
   --p-side-nav-border-color:  var(--color-border);
 
-  display:flex; flex-direction:column; block-size:100%;
-
   background-color: hsl(var(--p-side-nav-bg-color));
   border-inline-end: solid pxToRem(1) hsl(var(--p-side-nav-border-color));
 
+  &-level-1,
+  &-level-2 { display:flex; flex-direction:column; }
+
+  &-level-1 {
+    position:relative; transition:var(--transition);
+    &.is-narrow {
+      @media #{$break3open} {
+        inline-size: pxToRem(72);
+      }
+    }
+  }
+  &-level-2 {
+    display:none; border-inline-start:solid pxToRem(1) hsl(var(--color-border));
+    &.is-open { display:block; }
+  }
+
   &-top     { }
   &-main    {
     flex:1; overflow:auto;
@@ -38,7 +52,7 @@
     }
     &-list { }
     &-button {
-      $padding-horizontal:          pxToRem(16);
+      $padding-horizontal:          pxToRem(12);
       $padding-vertical:            pxToRem(8);
       --button-padding-horizontal:  #{$padding-horizontal};
       --button-padding-vertical:    #{$padding-vertical};
@@ -47,6 +61,15 @@
       .text { @include trim(1); }
     }
   }
+  &-button {
+    position:absolute; inset-inline-end:pxToRem(-16); inset-block-end:pxToRem(32);
+    display:grid; place-content:center; padding-inline:0; inline-size:pxToRem(32);
+    border-radius:var(--border-radius-small);
+    .icon-cheveron-right { display:block; transition:var(--transition);}
+    &.is-open {
+      .icon-cheveron-right { transform:rotateZ(180deg); }
+    }
+  }
 
   #{$theme-dark} & {
     --p-side-nav-bg-color: var(--color-neutral-500);
@@ -65,5 +88,20 @@
         }
       }
     }
+
+    .side-nav-level-1 { display:block; }
+    .side-nav-level-2 { display:none; }
+    &.is-open-level-2 {
+      .side-nav-level-1 { display:none; }
+      .side-nav-level-2 { display:block; }
+    }
+  }
+  @media #{$break3open} {
+    display:flex; block-size:100%;
+
+    &-level-1,
+    &-level-2 { inline-size:pxToRem(200); }
+
+    .drop-section { margin-inline:0; }
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 123d4abf75..daf3b0e60b 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -17,7 +17,7 @@
   }
   @media #{$break3open} {
     display: grid;
-    grid-template-columns: pxToRem(200) 1fr;
+    grid-template-columns: minmax(pxToRem(200), auto) 1fr;
     grid-template-rows: auto 1fr;
     grid-template-areas:  "header header"
                           "side   main"

From 5101f9158b1ab32fba5f79848a1013a914f657ee Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 2 Mar 2023 19:29:56 +0700
Subject: [PATCH 022/167] Dual-tier sidebar - Fix bug scroll of level-2

---
 apps/kitchensink/partials/sideNav.hbs       | 82 +++++++++++----------
 packages/ui/src/7-components/_side-nav.scss |  2 +-
 2 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/apps/kitchensink/partials/sideNav.hbs b/apps/kitchensink/partials/sideNav.hbs
index c86c14f5a6..0986b446fe 100644
--- a/apps/kitchensink/partials/sideNav.hbs
+++ b/apps/kitchensink/partials/sideNav.hbs
@@ -134,46 +134,48 @@
         </div>
 
         <div class="side-nav-level-2 is-open">
-            <section class="drop-section u-flex-vertical u-gap-8">
-                <button class="u-flex u-cross-center u-sep-block-end u-padding-block-12 is-not-desktop" id="aaa">
-                    <span class="icon-cheveron-left" aria-hidden="true"></span>
-                    <span class="eyebrow-heading-3 u-margin-inline-auto">Databases</span>
-                </button>
-                <h5 class="eyebrow-heading-3 u-padding-block-12">Header</h5>
-                <button class="button is-text is-full-width u-main-start u-padding-inline-0">
-                    <span class="icon-plus" aria-hidden="true"></span>
-                    <span class="text">Button</span>
-                </button>
-                <ul class="drop-list">
-                    <li class="drop-list-item">
-                        <a class="drop-button is-selected" href="/">
-                            <span class="text">Home</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="">
-                            <span class="text">Database</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/settings.html">
-                            <span class="text">Storage</span>
-                        </a>
-                    </li>
-
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="/users.html">
-                            <span class="text">Users</span>
-                        </a>
-                    </li>
-
-                    <li class="drop-list-item">
-                        <a class="drop-button" href="">
-                            <span class="text">Functions</span>
-                        </a>
-                    </li>
-                </ul>
-            </section>
+            <div class="side-nav-main">
+                <section class="drop-section u-flex-vertical u-gap-8">
+                    <button class="u-flex u-cross-center u-sep-block-end u-padding-block-12 is-not-desktop" id="aaa">
+                        <span class="icon-cheveron-left" aria-hidden="true"></span>
+                        <span class="eyebrow-heading-3 u-margin-inline-auto">Databases</span>
+                    </button>
+                    <h5 class="eyebrow-heading-3 u-padding-block-12">Header</h5>
+                    <button class="button is-text is-full-width u-main-start u-padding-inline-0">
+                        <span class="icon-plus" aria-hidden="true"></span>
+                        <span class="text">Button</span>
+                    </button>
+                    <ul class="drop-list">
+                        <li class="drop-list-item">
+                            <a class="drop-button is-selected" href="/">
+                                <span class="text">Home</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="">
+                                <span class="text">Database</span>
+                            </a>
+                        </li>
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/settings.html">
+                                <span class="text">Storage</span>
+                            </a>
+                        </li>
+
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="/users.html">
+                                <span class="text">Users</span>
+                            </a>
+                        </li>
+
+                        <li class="drop-list-item">
+                            <a class="drop-button" href="">
+                                <span class="text">Functions</span>
+                            </a>
+                        </li>
+                    </ul>
+                </section>
+            </div>
         </div>
 
     </div>
diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss
index ce23868df5..399f0f1a64 100644
--- a/packages/ui/src/7-components/_side-nav.scss
+++ b/packages/ui/src/7-components/_side-nav.scss
@@ -20,7 +20,7 @@
   }
   &-level-2 {
     display:none; border-inline-start:solid pxToRem(1) hsl(var(--color-border));
-    &.is-open { display:block; }
+    &.is-open { display:flex; }
   }
 
   &-top     { }

From 69bfad5a53201389a86922c300756bb186e4298f Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 2 Mar 2023 19:55:45 +0700
Subject: [PATCH 023/167] Dual-tier sidebar - small alignment fix of resize
 arrow (Chen QA)

---
 packages/ui/src/7-components/_side-nav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss
index 399f0f1a64..9e616fb250 100644
--- a/packages/ui/src/7-components/_side-nav.scss
+++ b/packages/ui/src/7-components/_side-nav.scss
@@ -62,7 +62,7 @@
     }
   }
   &-button {
-    position:absolute; inset-inline-end:pxToRem(-16); inset-block-end:pxToRem(32);
+    position:absolute; inset-inline-end:pxToRem(-16); inset-block-end:pxToRem(28);
     display:grid; place-content:center; padding-inline:0; inline-size:pxToRem(32);
     border-radius:var(--border-radius-small);
     .icon-cheveron-right { display:block; transition:var(--transition);}

From 5d78c21da5262118021e3853d6aa68c70630ccfb Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 3 Mar 2023 10:10:43 +0700
Subject: [PATCH 024/167] Dual-tier sidebar - small fix foe scroll only in Y
 axis

---
 packages/ui/src/7-components/_side-nav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss
index 9e616fb250..64d118bea8 100644
--- a/packages/ui/src/7-components/_side-nav.scss
+++ b/packages/ui/src/7-components/_side-nav.scss
@@ -25,7 +25,7 @@
 
   &-top     { }
   &-main    {
-    flex:1; overflow:auto;
+    flex:1; overflow-y:auto;
     @include scroll();
     scrollbar-gutter: stable;
     overflow: overlay; // fallback macOS

From 6ed45ffa4de6c7c994c2d8676c319dcfa3186473 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 3 Mar 2023 11:36:38 +0700
Subject: [PATCH 025/167] Alert Action - Add new state to Alert(Inline) - being
 use with the 'is-action' state class - Update demo page - alert.mdx - style
 in - _alert.scss

---
 apps/pink/src/pages/components/alert.mdx | 371 ++++++++++++++---------
 packages/ui/src/7-components/_alert.scss |  14 +-
 2 files changed, 249 insertions(+), 136 deletions(-)

diff --git a/apps/pink/src/pages/components/alert.mdx b/apps/pink/src/pages/components/alert.mdx
index c3fa1894eb..7ec7cc5381 100644
--- a/apps/pink/src/pages/components/alert.mdx
+++ b/apps/pink/src/pages/components/alert.mdx
@@ -7,10 +7,11 @@ description: Alerts display both task-generated and system-generated messages. T
 
 In the Appwrite console, we use two types of alerts:
 
-| Class          | Type   |                                                                                                                      |
-| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------- |
-| `alert`        | Inline | Inline alerts present additional information to the user related to content within a form or a body of text.         |
-| `alert-sticky` | Sticky | Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. |
+| Class            | Type   |                                                                                                                      |
+| ---------------- | ------ | -------------------------------------------------------------------------------------------------------------------- |
+| `alert`          | Inline | Inline alerts present additional information to the user related to content within a form or a body of text.         |
+| `alert is-action`| Action | Alert action is based Alert type Inline                                                                              |
+| `alert-sticky`   | Sticky | Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. |
 
 ## States
 
@@ -20,6 +21,53 @@ In the Appwrite console, we use five states of alerts:
 | ----- | ------- | ---------------------------------------------------------- |
 | -     | Default | Use this alert to provide general information to the user. |
 
+<Preview>
+    <section class="alert">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+</Preview>
+
+<Preview noFlex>
+    <section class="alert is-action">
+        <div class="alert-grid">
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+            </div>
+            <div class="alert-buttons u-flex u-gap-16">
+                <button class="button is-text is-full-width-mobile">
+                    <span class="text">Secondary call to action</span>
+                </button>
+                <button class="button is-secondary is-full-width-mobile">
+                    <span class="text">Call to action</span>
+                </button>
+            </div>
+        </div>
+    </section>
+</Preview>
+
 <Preview>
   <section class="alert-sticky">
     <button
@@ -47,36 +95,56 @@ In the Appwrite console, we use five states of alerts:
   </section>
 </Preview>
 
+| Class     | Type |                                                                       |
+| --------- | ---- | --------------------------------------------------------------------- |
+| `is-info` | Info | Use this alert to provide additional information or tips to the user. |
+
 <Preview>
-  <section class="alert">
-    <div class="alert-grid">
-      <button
-        class="button is-text is-only-icon"
-        style="--button-size:1.5rem;"
-        aria-label="close alert box"
-      >
-        <span class="icon-x" aria-hidden="true"></span>
-      </button>
-      <span class="icon-info" aria-hidden="true"></span>
-      <div class="alert-content">
-        <h6 class="alert-title">This is a default alert</h6>
-            <p class="alert-message">Some description about the alert sent to the user.</p>
-        <div class="alert-buttons u-flex">
-          <button class="button is-text">
-            <span class="text">Action 1</span>
-          </button>
-          <button class="button is-text">
-            <span class="text">Action 2</span>
-          </button>
+    <section class="alert is-info">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </section>
+    </section>
 </Preview>
 
-| Class     | Type |                                                                       |
-| --------- | ---- | --------------------------------------------------------------------- |
-| `is-info` | Info | Use this alert to provide additional information or tips to the user. |
+<Preview noFlex>
+    <section class="alert is-action is-info">
+        <div class="alert-grid">
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+            </div>
+            <div class="alert-buttons u-flex u-gap-16">
+                <button class="button is-text is-full-width-mobile">
+                    <span class="text">Secondary call to action</span>
+                </button>
+                <button class="button is-secondary is-full-width-mobile">
+                    <span class="text">Call to action</span>
+                </button>
+            </div>
+        </div>
+    </section>
+</Preview>
 
 <Preview>
   <section class="alert-sticky is-info">
@@ -105,36 +173,56 @@ In the Appwrite console, we use five states of alerts:
   </section>
 </Preview>
 
+| Class        | Type    |                                                                                   |
+| ------------ | ------- | --------------------------------------------------------------------------------- |
+| `is-success` | Success | Use this alert to inform the user of a task that has been completed successfully. |
+
 <Preview>
-  <section class="alert is-info">
-    <div class="alert-grid">
-      <button
-        class="button is-text is-only-icon"
-        style="--button-size:1.5rem;"
-        aria-label="close alert box"
-      >
-        <span class="icon-x" aria-hidden="true"></span>
-      </button>
-      <span class="icon-info" aria-hidden="true"></span>
-      <div class="alert-content">
-        <h6 class="alert-title">This is a default alert</h6>
-        <p class="alert-message">Some description about the alert sent to the user.</p>
-        <div class="alert-buttons u-flex">
-          <button class="button is-text">
-            <span class="text">Action 1</span>
-          </button>
-          <button class="button is-text">
-            <span class="text">Action 2</span>
-          </button>
+    <section class="alert is-success">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </section>
+    </section>
 </Preview>
 
-| Class        | Type    |                                                                                   |
-| ------------ | ------- | --------------------------------------------------------------------------------- |
-| `is-success` | Success | Use this alert to inform the user of a task that has been completed successfully. |
+<Preview noFlex>
+    <section class="alert is-action is-success">
+        <div class="alert-grid">
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+            </div>
+            <div class="alert-buttons u-flex u-gap-16">
+                <button class="button is-text is-full-width-mobile">
+                    <span class="text">Secondary call to action</span>
+                </button>
+                <button class="button is-secondary is-full-width-mobile">
+                    <span class="text">Call to action</span>
+                </button>
+            </div>
+        </div>
+    </section>
+</Preview>
 
 <Preview>
   <section class="alert-sticky is-success">
@@ -163,36 +251,56 @@ In the Appwrite console, we use five states of alerts:
   </section>
 </Preview>
 
+| Class        | Type    |                                                                                       |
+| ------------ | ------- | ------------------------------------------------------------------------------------- |
+| `is-warning` | Warning | Use this alert to warn the user that action may be required depending on the context. |
+
 <Preview>
-  <section class="alert is-success">
-    <div class="alert-grid">
-      <button
-        class="button is-text is-only-icon"
-        style="--button-size:1.5rem;"
-        aria-label="close alert box"
-      >
-        <span class="icon-x" aria-hidden="true"></span>
-      </button>
-      <span class="icon-info" aria-hidden="true"></span>
-      <div class="alert-content">
-        <h6 class="alert-title">This is a default alert</h6>
-        <p class="alert-message">Some description about the alert sent to the user.</p>
-        <div class="alert-buttons u-flex">
-          <button class="button is-text">
-            <span class="text">Action 1</span>
-          </button>
-          <button class="button is-text">
-            <span class="text">Action 2</span>
-          </button>
+    <section class="alert is-warning">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </section>
+    </section>
 </Preview>
 
-| Class        | Type    |                                                                                       |
-| ------------ | ------- | ------------------------------------------------------------------------------------- |
-| `is-warning` | Warning | Use this alert to warn the user that action may be required depending on the context. |
+<Preview noFlex>
+    <section class="alert is-action is-warning">
+        <div class="alert-grid">
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+            </div>
+            <div class="alert-buttons u-flex u-gap-16">
+                <button class="button is-text is-full-width-mobile">
+                    <span class="text">Secondary call to action</span>
+                </button>
+                <button class="button is-secondary is-full-width-mobile">
+                    <span class="text">Call to action</span>
+                </button>
+            </div>
+        </div>
+    </section>
+</Preview>
 
 <Preview>
   <section class="alert-sticky is-warning">
@@ -221,36 +329,56 @@ In the Appwrite console, we use five states of alerts:
   </section>
 </Preview>
 
+| Class       | Type         |                                                                                 |
+| ----------- | ------------ | ------------------------------------------------------------------------------- |
+| `is-danger` | Danger/Error | Use this alert to warn the user about errors, and how they can fix the problem. |
+
 <Preview>
-  <section class="alert is-warning">
-    <div class="alert-grid">
-      <button
-        class="button is-text is-only-icon"
-        style="--button-size:1.5rem;"
-        aria-label="close alert box"
-      >
-        <span class="icon-x" aria-hidden="true"></span>
-      </button>
-      <span class="icon-info" aria-hidden="true"></span>
-      <div class="alert-content">
-        <h6 class="alert-title">This is a default alert</h6>
-            <p class="alert-message">Some description about the alert sent to the user.</p>
-        <div class="alert-buttons u-flex">
-          <button class="button is-text">
-            <span class="text">Action 1</span>
-          </button>
-          <button class="button is-text">
-            <span class="text">Action 2</span>
-          </button>
+    <section class="alert is-danger">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </section>
+    </section>
 </Preview>
 
-| Class       | Type         |                                                                                 |
-| ----------- | ------------ | ------------------------------------------------------------------------------- |
-| `is-danger` | Danger/Error | Use this alert to warn the user about errors, and how they can fix the problem. |
+<Preview noFlex>
+    <section class="alert is-action is-danger">
+        <div class="alert-grid">
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a default alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+            </div>
+            <div class="alert-buttons u-flex u-gap-16">
+                <button class="button is-text is-full-width-mobile">
+                    <span class="text">Secondary call to action</span>
+                </button>
+                <button class="button is-secondary is-full-width-mobile">
+                    <span class="text">Call to action</span>
+                </button>
+            </div>
+        </div>
+    </section>
+</Preview>
 
 <Preview>
   <section class="alert-sticky is-danger">
@@ -279,33 +407,6 @@ In the Appwrite console, we use five states of alerts:
   </section>
 </Preview>
 
-<Preview>
-  <section class="alert is-danger">
-    <div class="alert-grid">
-      <button
-        class="button is-text is-only-icon"
-        style="--button-size:1.5rem;"
-        aria-label="close alert box"
-      >
-        <span class="icon-x" aria-hidden="true"></span>
-      </button>
-      <span class="icon-info" aria-hidden="true"></span>
-      <div class="alert-content">
-        <h6 class="alert-title">This is a default alert</h6>
-            <p class="alert-message">Some description about the alert sent to the user.</p>
-        <div class="alert-buttons u-flex">
-          <button class="button is-text">
-            <span class="text">Action 1</span>
-          </button>
-          <button class="button is-text">
-            <span class="text">Action 2</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </section>
-</Preview>
-
 ## Best Practice
 
 Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application.
diff --git a/packages/ui/src/7-components/_alert.scss b/packages/ui/src/7-components/_alert.scss
index 80be8cd88b..fdabb36cb8 100644
--- a/packages/ui/src/7-components/_alert.scss
+++ b/packages/ui/src/7-components/_alert.scss
@@ -33,7 +33,7 @@
       content:""; display:block; inline-size:pxToRem(2);
       background-color:hsl(var(--p-alert-color)); border-radius:pxToRem(1);
     }
-    > [class*="icon-"]:where(:not(.icon-x)) { color:hsl(var(--p-alert-color)); font-size:var(--icon-size-large); line-height:1.1; }
+    > [class*="icon-"]:where(:not(.icon-x)) { color:hsl(var(--p-alert-color)); font-size:var(--icon-size-large); line-height:0.9; }
     >  .button { order: 1; }
   }
 
@@ -44,6 +44,18 @@
 
   .button   { --button-size:1.25rem; font-size:var(--font-size-0); }
 
+  &.is-action {
+    .alert-buttons { display:flex; flex-wrap:wrap; margin-block-start:0; margin-inline-start:0; }
+    .button { --button-size:2.5rem; }
+    .alert-grid {
+      flex-wrap: wrap;
+      &::before { block-size:pxToRem(2); inline-size:100%; }
+    }
+    @media #{$break1} {
+      .alert-buttons { flex-direction:column; inline-size:100%; }
+    }
+  }
+
   /* alert types */
   &.is-info     { --p-alert-color:var(--p-alert-color-info); }
   &.is-success  { --p-alert-color:var(--p-alert-color-success); }

From 4967251eca5a88dfc2303e0f697fb478d52be723 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 3 Mar 2023 11:45:52 +0700
Subject: [PATCH 026/167] Tag - Added new tag with eyebrow heading - tag.mdx

---
 apps/pink/src/pages/elements/tag.mdx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/pink/src/pages/elements/tag.mdx b/apps/pink/src/pages/elements/tag.mdx
index 385bb1fdb6..72ead24936 100644
--- a/apps/pink/src/pages/elements/tag.mdx
+++ b/apps/pink/src/pages/elements/tag.mdx
@@ -41,6 +41,10 @@ Informative tags are used to visually label information for easy understanding a
   <span class="text">error</span>
 </div>
 
+<div class="tag eyebrow-heading-3">
+    <span class="text">Beta</span>
+</div>
+
 </Preview>
 
 ## Best Practice

From 89967771f5d96bbc2e0d4243f0434e581220664d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 3 Mar 2023 11:27:01 +0100
Subject: [PATCH 027/167] chore: update version to 0.0.6-rc.1

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8ec207abbc..239ff273a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.5",
+      "version": "0.0.6-rc.1",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.5",
+      "version": "0.0.6-rc.1",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 156a9342ea..a1f4c3ce21 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.5",
+  "version": "0.0.6-rc.1",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ef77cb943f..eb02fe3937 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.5",
+  "version": "0.0.6-rc.1",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From 548b4126064681f81a91192fd7768be31b0e5766 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 6 Mar 2023 14:39:04 +0700
Subject: [PATCH 028/167] Card - Add card partial hover stare when it is link
 tag (a) - Add functions page demo in kytchensync

---
 apps/kitchensink/functions.html       | 179 ++++++++++++++++++++++++++
 apps/kitchensink/vite.config.js       |   1 +
 packages/ui/src/6-elements/_card.scss |   5 +-
 3 files changed, 184 insertions(+), 1 deletion(-)
 create mode 100644 apps/kitchensink/functions.html

diff --git a/apps/kitchensink/functions.html b/apps/kitchensink/functions.html
new file mode 100644
index 0000000000..8017197e0d
--- /dev/null
+++ b/apps/kitchensink/functions.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>@appwrite/kitchensink - user demo</title>
+</head>
+
+<body>
+<main class="grid-with-side" id="main">
+  {{> topNav}} {{> sideNav}}
+  <section class="main-content">
+    <div class="top-cover">
+      <div class="container">
+        <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
+          <h1 class="heading-level-4 u-flex u-min-width-0">
+            <a class="button is-text is-only-icon" href="" aria-label="back to [PAGE NAME]">
+              <span class="icon-cheveron-left" aria-hidden="true"></span>
+            </a>
+            <span class="text u-trim-1">Users</span>
+          </h1>
+          <button class="tag">
+            <span class="icon-duplicate" aria-hidden="true"></span><span class="text">User ID</span>
+          </button>
+        </div>
+        <div class="top-cover-options">
+
+        </div>
+        <div class="tabs">
+          <button
+                  class="tabs-button-scroll is-start"
+                  aria-label="Show items in start side"
+          >
+            <span class="icon-cheveron-left" aria-hidden="true"></span>
+          </button>
+          <button
+                  class="tabs-button-scroll is-end"
+                  aria-label="Show items in end side"
+          >
+            <span class="icon-cheveron-right" aria-hidden="true"></span>
+          </button>
+          <ul class="tabs-list">
+            <li class="tabs-item">
+              <a class="tabs-button is-selected" href="">
+                <span class="text">Overview</span>
+              </a>
+            </li>
+            <li class="tabs-item">
+              <a class="tabs-button" href="">
+                <span class="text">Sessions</span>
+              </a>
+            </li>
+            <li class="tabs-item">
+              <a class="tabs-button" href="">
+                <span class="text">Activity</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="container u-margin-block-start-24">
+
+      <div class="container u-margin-block-start-24" style="">
+        <div class="u-flex u-gap-12 common-section u-main-space-between">
+          <h2 class="heading-level-5 u-trim-1">Functions</h2>
+          <button class="button" type="button">
+            <span class="icon-plus" aria-hidden="true"></span>
+            <span class="text">Create function</span>
+          </button>
+        </div>
+        <ul class="grid-box common-section u-margin-block-start-32" style="--grid-gap:1.5rem; --grid-item-size:25rem;">
+          <li>
+            <a class="card" href="/console/project-637344a66f13e0009566/functions/function-637bb6a90c45d57da98a">
+              <div class="grid-item-1 svelte-865yko">
+                <div class="grid-item-1-start-start">
+                  <div class="eyebrow-heading-3"></div>
+                  <h2 class="heading-level-6 u-trim-1">
+                    <div class="u-flex u-gap-16 u-cross-center">
+                      <div class="avatar is-medium">
+                        <img src="/icons/dark/color/php.svg" alt="technology">
+                      </div>
+                      <span class="text">Func</span>
+                    </div>
+                  </h2>
+                </div>
+                <div class="grid-item-1-start-end"></div>
+                <div class="grid-item-1-end-start">
+                  <div class="u-flex u-gap-16 u-flex-wrap">
+                    <button type="button" class="tag"><i class="icon-duplicate"></i>Function ID</button>
+                  </div>
+                </div>
+                <div class="grid-item-1-end-end">
+                  <ul class="icons u-flex u-gap-8"> </ul>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a class="card" href="/console/project-637344a66f13e0009566/functions/function-6373496308d06d1f91e4">
+              <div class="grid-item-1 svelte-865yko">
+                <div class="grid-item-1-start-start">
+                  <div class="eyebrow-heading-3"></div>
+                  <h2 class="heading-level-6 u-trim-1">
+                    <div class="u-flex u-gap-16 u-cross-center">
+                      <div class="avatar is-medium">
+                        <img src="/icons/dark/color/node.svg" alt="technology">
+                      </div>
+                      <span class="text">MyFunc</span>
+                    </div>
+                  </h2>
+                </div>
+                <div class="grid-item-1-start-end"></div>
+                <div class="grid-item-1-end-start">
+                  <div class="u-flex u-gap-16 u-flex-wrap">
+                    <button type="button" class="tag"><i class="icon-duplicate"></i>Function ID</button>
+                  </div>
+                </div>
+                <div class="grid-item-1-end-end">
+                  <ul class="icons u-flex u-gap-8"> </ul>
+                </div>
+              </div>
+            </a>
+          </li>
+        </ul>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+          <p class="text">Total results: 2</p>
+          <nav class="pagination">
+            <button type="button" class="button is-text is-disabled" aria-label="prev page">
+              <span class="icon-cheveron-left" aria-hidden="true"></span>
+              <span class="text">Prev</span>
+            </button>
+            <ol class="pagination-list is-only-desktop">
+              <li class="pagination-item">
+                <button type="button" class="button is-disabled" aria-label="page">
+                  <span class="text">1</span>
+                </button>
+              </li>
+            </ol>
+            <button type="button" class="button is-text is-disabled" aria-label="next page">
+              <span class="text">Next</span> <span class="icon-cheveron-right" aria-hidden="true"></span>
+            </button>
+          </nav>
+        </div>
+      </div>
+
+    </div>
+  </section>
+  <footer class="main-footer">
+    <div class="main-footer-start">
+      <ul class="inline-links is-no-padding-first-and-last u-x-small">
+        <li class="inline-links-item">
+          <a href=""><span class="text">version 1.1.1</span></a>
+        </li>
+        <li class="inline-links-item">
+          <a href=""><span class="text">Terms</span></a>
+        </li>
+        <li class="inline-links-item">
+          <a href=""><span class="text">Privacy</span></a>
+        </li>
+      </ul>
+    </div>
+    <div class="main-footer-end">
+      <ul class="inline-links is-no-padding-first-and-last u-x-small">
+        <li class="inline-links-item">
+          <span class="text">ⓒ 2022 Appwrite. All rights reserved.</span>
+        </li>
+        <li class="inline-links-item u-flex u-gap-8">
+          <a href=""><span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github"></span></a>
+          <a href=""><span class="icon-discord" aria-hidden="true" aria-label="Appwrite on Discord"></span></a>
+        </li>
+      </ul>
+    </div>
+  </footer>
+
+</main>
+<script type="module" src="/main.js"></script>
+</body>
+</html>
diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js
index a3eb9bbd10..feada73833 100644
--- a/apps/kitchensink/vite.config.js
+++ b/apps/kitchensink/vite.config.js
@@ -23,6 +23,7 @@ const config = {
         coverFrame: new URL("./cover-frame.html", import.meta.url).pathname,
         users: new URL("./users.html", import.meta.url).pathname,
         user: new URL("./user.html", import.meta.url).pathname,
+        functions: new URL("./functions.html", import.meta.url).pathname,
         userSecurity: new URL("./userSecurity.html", import.meta.url).pathname,
         auth: new URL("./auth.html", import.meta.url).pathname,
         auth2: new URL("./auth2.html", import.meta.url).pathname,
diff --git a/packages/ui/src/6-elements/_card.scss b/packages/ui/src/6-elements/_card.scss
index c3b9b53c1c..3f439151a6 100644
--- a/packages/ui/src/6-elements/_card.scss
+++ b/packages/ui/src/6-elements/_card.scss
@@ -43,12 +43,15 @@
   }
 
   /* upload state */
+  &:where(a) {
+    &:hover { --p-card-bg-color:var(--p-card-bg-color-hover); }
+  }
   &.is-border-dashed    { border:dashed pxToRem(1) hsl(var(--p-card-border-color)); }
   //&.is-hover-with-file  { --p-card-bg-color: var(--p-card-bg-color-hover-file); }
 
   &.is-no-shadow { box-shadow:none; }
 
-  &.is-allow-focus {
+  &.is-allow-focus{
     &:hover { --p-card-bg-color:var(--p-card-bg-color-hover); }
     &:has(:focus-visible) { box-shadow:var(--focus-box-shadow); }
   }

From 002c9af2545f6387a5ec422363e032c01213e228 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 6 Mar 2023 15:32:41 +0700
Subject: [PATCH 029/167] Alert (in action) - Update QA of Carla

---
 packages/ui/src/7-components/_alert.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/7-components/_alert.scss b/packages/ui/src/7-components/_alert.scss
index fdabb36cb8..cfea9e0ce4 100644
--- a/packages/ui/src/7-components/_alert.scss
+++ b/packages/ui/src/7-components/_alert.scss
@@ -45,11 +45,16 @@
   .button   { --button-size:1.25rem; font-size:var(--font-size-0); }
 
   &.is-action {
+    position:relative; padding:pxToRem(16); padding-block-start:pxToRem(18);
+    border-width:0; border-radius:0;
     .alert-buttons { display:flex; flex-wrap:wrap; margin-block-start:0; margin-inline-start:0; }
     .button { --button-size:2.5rem; }
     .alert-grid {
-      flex-wrap: wrap;
-      &::before { block-size:pxToRem(2); inline-size:100%; }
+      flex-wrap:wrap;
+      &::before {
+        position:absolute; inset-inline:0; inset-block-start:0; border-radius:0;
+        block-size:pxToRem(4); inline-size:100%;
+      }
     }
     @media #{$break1} {
       .alert-buttons { flex-direction:column; inline-size:100%; }

From 5fe91b8ecbb565b5e116253d9c395b891b88a146 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 6 Mar 2023 18:07:59 +0700
Subject: [PATCH 030/167] Utility class - Add new utility class

---
 packages/ui/src/_9-utilities.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index dbedd00ab3..a0fb47e665 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -63,6 +63,7 @@
 }
 .u-position-relative    { position:relative; }
 .u-position-absolute    { position:absolute; }
+.u-position-static      { position:static; }
 
 .u-inset-inline-start-8 { inset-inline-start:pxToRem(8);  }
 .u-inset-inline-end-8   { inset-inline-end:pxToRem(8);    }

From 497012f0978c1ab36ad14b2d7929a2513ba631e0 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 6 Mar 2023 18:08:20 +0700
Subject: [PATCH 031/167] Utility class - Add new utility class

---
 packages/ui/src/_9-utilities.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index a0fb47e665..d0d6642b05 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -63,7 +63,7 @@
 }
 .u-position-relative    { position:relative; }
 .u-position-absolute    { position:absolute; }
-.u-position-static      { position:static; }
+.u-position-static      { position:static!important; }
 
 .u-inset-inline-start-8 { inset-inline-start:pxToRem(8);  }
 .u-inset-inline-end-8   { inset-inline-end:pxToRem(8);    }

From add4fd224e64681f305cd8fe34ecce5150b65cf3 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 6 Mar 2023 18:09:51 +0700
Subject: [PATCH 032/167] Utility class - Add demo new utility class

---
 apps/pink/src/pages/utilities/position.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/pink/src/pages/utilities/position.mdx b/apps/pink/src/pages/utilities/position.mdx
index 808df43d0b..6a7353c0d6 100644
--- a/apps/pink/src/pages/utilities/position.mdx
+++ b/apps/pink/src/pages/utilities/position.mdx
@@ -7,6 +7,7 @@ description: An element's position can be quickly configured by using Position c
 | ----------------------- | -------------------------------- | ---------------------------- |
 | `u-position-relative`   | `position: relative;`            | Stays the same               |
 | `u-position-absolute`   | `position: absolute;`            | Stays the same               |
+| `u-position-static`     | `position: static !important;`   | Stays the same               |
 | `u-inset-inline-start-8`| `inset-inline-start: pxToRem(8);`| `inset-inline-start: 0.5rem;`|
 | `u-inset-inline-end-8`  | `inset-inline-end: pxToRem(8);`  | `inset-inline-end: 0.5rem;`  |
 | `u-inset-block-start-8` | `inset-block-start: pxToRem(8);` | `inset-block-start: 0.5rem;` |

From 1c362d6fd4db165504e083ced13c6c4677adef38 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 6 Mar 2023 21:28:20 +0700
Subject: [PATCH 033/167] Side Nav - AFix scroll bug in Firefox on Windows 10

---
 packages/ui/src/7-components/_side-nav.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss
index 64d118bea8..987888627e 100644
--- a/packages/ui/src/7-components/_side-nav.scss
+++ b/packages/ui/src/7-components/_side-nav.scss
@@ -26,8 +26,7 @@
   &-top     { }
   &-main    {
     flex:1; overflow-y:auto;
-    @include scroll();
-    scrollbar-gutter: stable;
+    @include scroll(); scrollbar-gutter:initial;
     overflow: overlay; // fallback macOS
 
     &:not(:hover) {

From 6a779dd115ebf62eb386d4e27dd190f7f4205b2d Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 6 Mar 2023 22:37:32 +0700
Subject: [PATCH 034/167] Side Nav - fix for scroll bug in Firefox on Windows
 10

---
 packages/ui/src/7-components/_side-nav.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss
index 987888627e..b6c562eb90 100644
--- a/packages/ui/src/7-components/_side-nav.scss
+++ b/packages/ui/src/7-components/_side-nav.scss
@@ -28,6 +28,7 @@
     flex:1; overflow-y:auto;
     @include scroll(); scrollbar-gutter:initial;
     overflow: overlay; // fallback macOS
+    overflow-x: hidden;
 
     &:not(:hover) {
       &::-webkit-scrollbar-thumb {

From 94ded25e0bb7472ae9305d797a141ab1f4efba66 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 6 Mar 2023 22:55:56 +0700
Subject: [PATCH 035/167] Side Nav - update header text color - QA Chen

---
 packages/ui/src/7-components/_side-nav.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss
index b6c562eb90..1b613048fb 100644
--- a/packages/ui/src/7-components/_side-nav.scss
+++ b/packages/ui/src/7-components/_side-nav.scss
@@ -4,6 +4,8 @@
   --p-side-nav-bg-color:      var(--color-neutral-0);
   --p-side-nav-border-color:  var(--color-border);
 
+  --p-side-nav-header-text-color: var(--color-neutral-70);
+
   background-color: hsl(var(--p-side-nav-bg-color));
   border-inline-end: solid pxToRem(1) hsl(var(--p-side-nav-border-color));
 
@@ -71,8 +73,12 @@
     }
   }
 
+  .eyebrow-heading-3 { color: var(--p-side-nav-header-text-color); }
+
   #{$theme-dark} & {
     --p-side-nav-bg-color: var(--color-neutral-500);
+
+    --p-side-nav-header-text-color: var(--color-neutral-50);
   }
   @media #{$break1}, #{$break2} {
     &.is-mobile-center {

From f8eefe4760809f0a48fdbb95f36b05afdf51ff72 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 7 Mar 2023 17:58:42 +0700
Subject: [PATCH 036/167] Toggle Button - icon toggle -> toggle-button

---
 .../{icon-toggle.mdx => toggle-button.mdx}    | 46 +++++++++----------
 packages/ui/src/7-components/_index.scss      |  2 +-
 ...{_icon-toggle.scss => _toggle-button.scss} |  4 +-
 3 files changed, 26 insertions(+), 26 deletions(-)
 rename apps/pink/src/pages/components/{icon-toggle.mdx => toggle-button.mdx} (61%)
 rename packages/ui/src/7-components/{_icon-toggle.scss => _toggle-button.scss} (97%)

diff --git a/apps/pink/src/pages/components/icon-toggle.mdx b/apps/pink/src/pages/components/toggle-button.mdx
similarity index 61%
rename from apps/pink/src/pages/components/icon-toggle.mdx
rename to apps/pink/src/pages/components/toggle-button.mdx
index d6f5217160..7877834ec1 100644
--- a/apps/pink/src/pages/components/icon-toggle.mdx
+++ b/apps/pink/src/pages/components/toggle-button.mdx
@@ -1,22 +1,22 @@
 ---
-title: Icon Toggle
+title: Toggle Button
 description: Icon toggle is used to switch between two possible states displayed with icons.
 ---
 
 | Class            | Type          |                                             |
 | ---------------- | ------------- | ------------------------------------------- |
-| `icon-toggle`   | Icon Toggle    | A class representing an icon toggle.        |
+| `toggle-button`  | Icon Toggle   | A class representing an icon toggle.        |
 
 <Preview center>
-    <div class="icon-toggle">
-        <ul class="icon-toggle-list">
-            <li class="icon-toggle-item">
-                <button class="icon-toggle-button" aria-label="List View">
+    <div class="toggle-button">
+        <ul class="toggle-button-list">
+            <li class="toggle-button-item">
+                <button class="toggle-button-element" aria-label="List View">
                     <span class="icon-view-list" aria-hidden="true"></span>
                 </button>
             </li>
-            <li class="icon-toggle-item">
-                <button class="icon-toggle-button is-selected" aria-label="Grid View">
+            <li class="toggle-button-item">
+                <button class="toggle-button-element is-selected" aria-label="Grid View">
                     <span class="icon-view-grid" aria-hidden="true"></span>
                 </button>
             </li>
@@ -31,9 +31,9 @@ Icons Toggle inner parts are:
 
 | Class                | Type                                  |     |
 | -------------------- | ------------------------------------- | --- |
-| `icon-toggle-list`  | A class that wraps both toggle items  |     |
-| `icon-toggle-item`  | A class that wraps one toggle item    |     |
-| `icon-toggle-button`| An icon button                        |     |
+| `toggle-button-list`  | A class that wraps both toggle items  |     |
+| `toggle-button-item`  | A class that wraps one toggle item    |     |
+| `toggle-button-element`| An icon button                        |     |
 
 ##  States
 To disable the toggle, add the following attribute:
@@ -44,15 +44,15 @@ To disable the toggle, add the following attribute:
 
 
 <Preview center>
-    <div class="icon-toggle">
-        <ul class="icon-toggle-list">
-            <li class="icon-toggle-item">
-                <button class="icon-toggle-button" disabled aria-label="List View">
+    <div class="toggle-button">
+        <ul class="toggle-button-list">
+            <li class="toggle-button-item">
+                <button class="toggle-button-element" disabled aria-label="List View">
                     <span class="icon-view-list" aria-hidden="true"></span>
                 </button>
             </li>
-            <li class="icon-toggle-item">
-                <button class="icon-toggle-button is-selected" disabled aria-label="Grid View">
+            <li class="toggle-button-item">
+                <button class="toggle-button-element is-selected" disabled aria-label="Grid View">
                     <span class="icon-view-grid" aria-hidden="true"></span>
                 </button>
             </li>
@@ -64,16 +64,16 @@ To disable the toggle, add the following attribute:
 In the Appwrite console, we display a tooltip on hover, as shown below:
 
 <Preview center vertical>
-    <div class="icon-toggle">
-        <ul class="icon-toggle-list">
-            <li class="icon-toggle-item">
-                <button class="icon-toggle-button tooltip">
+    <div class="toggle-button">
+        <ul class="toggle-button-list">
+            <li class="toggle-button-item">
+                <button class="toggle-button-element tooltip">
                     <span class="icon-view-list" aria-hidden="true"></span>
                     <span class="tooltip-popup is-bottom is-center" role="tooltip">List View</span>
                 </button>
             </li>
-            <li class="icon-toggle-item">
-                <button class="icon-toggle-button is-selected tooltip">
+            <li class="toggle-button-item">
+                <button class="toggle-button-element is-selected tooltip">
                     <span class="icon-view-grid" aria-hidden="true"></span>
                     <span class="tooltip-popup is-bottom  is-center" role="tooltip">Grid View</span>
                 </button>
diff --git a/packages/ui/src/7-components/_index.scss b/packages/ui/src/7-components/_index.scss
index 2134ae0108..28f44d108e 100644
--- a/packages/ui/src/7-components/_index.scss
+++ b/packages/ui/src/7-components/_index.scss
@@ -16,7 +16,7 @@
 @forward "pagination";
 @forward "steps";
 @forward "buttons-list";
-@forward "icon-toggle";
+@forward "toggle-button";
 
 @forward "top-cover";
 @forward "code-panel";
diff --git a/packages/ui/src/7-components/_icon-toggle.scss b/packages/ui/src/7-components/_toggle-button.scss
similarity index 97%
rename from packages/ui/src/7-components/_icon-toggle.scss
rename to packages/ui/src/7-components/_toggle-button.scss
index 12a6575a43..3ab98d5e26 100644
--- a/packages/ui/src/7-components/_icon-toggle.scss
+++ b/packages/ui/src/7-components/_toggle-button.scss
@@ -1,5 +1,5 @@
 @use '../abstract' as *;
-.icon-toggle {
+.toggle-button {
   --p-icon-toggle-bg-color: var(--color-neutral-0);
 
   --p-icon-text-color: var(--p-icon-text-color-default);
@@ -16,7 +16,7 @@
     border:solid pxToRem(1) hsl(var(--color-border)); border-radius:var(--border-radius-xsmall);
   }
   &-item {}
-  &-button {
+  &-element {
     display:grid; place-content:center;
     inline-size:pxToRem(36); block-size:pxToRem(36);
     background-color:hsl(var(--p-button-color)); color:hsl(var(--p-icon-text-color)); border-radius:var(--border-radius-xsmall);

From 2f1eb0424881b5bc5b6469c178eec9240726647d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 7 Mar 2023 12:01:35 +0100
Subject: [PATCH 037/167] chore: bump to 0.0.6-rc.2

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 239ff273a0..6b4ff75637 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.1",
+      "version": "0.0.6-rc.2",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.1",
+      "version": "0.0.6-rc.2",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index a1f4c3ce21..0143f520d2 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.1",
+  "version": "0.0.6-rc.2",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index eb02fe3937..f2ab18d38f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.1",
+  "version": "0.0.6-rc.2",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From 9be6b14c0652b1cea16187959a19d345329a5f60 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 8 Mar 2023 17:19:03 +0700
Subject: [PATCH 038/167] QA with Cen - Utilities class - updated - Tag demo
 updated - Side Nav - added tooltip for demo

---
 apps/kitchensink/partials/sideNav.hbs  | 10 +++++-----
 apps/pink/src/pages/elements/tag.mdx   |  2 +-
 apps/pink/src/pages/utilities/text.mdx |  6 +++---
 packages/ui/src/_9-utilities.scss      |  6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/kitchensink/partials/sideNav.hbs b/apps/kitchensink/partials/sideNav.hbs
index 0986b446fe..579326e8a6 100644
--- a/apps/kitchensink/partials/sideNav.hbs
+++ b/apps/kitchensink/partials/sideNav.hbs
@@ -7,33 +7,33 @@
                     <button class="open-nav is-not-desktop">OPEN NAV</button>
                     <ul class="drop-list">
                         <li class="drop-list-item">
-                            <a class="drop-button is-selected" href="/">
+                            <a class="drop-button is-selected" href="/" title="Home">
                                 <span class="icon-chart-bar" aria-hidden="true"></span>
                                 <span class="text">Home</span>
                             </a>
                         </li>
                         <li class="drop-list-item">
-                            <a class="drop-button" href="">
+                            <a class="drop-button" href="" title="Database">
                                 <span class="icon-database" aria-hidden="true"></span>
                                 <span class="text">Database</span>
                             </a>
                         </li>
                         <li class="drop-list-item">
-                            <a class="drop-button" href="/settings.html">
+                            <a class="drop-button" href="/settings.html" title="Storage">
                                 <span class="icon-folder" aria-hidden="true"></span>
                                 <span class="text">Storage</span>
                             </a>
                         </li>
 
                         <li class="drop-list-item">
-                            <a class="drop-button" href="/users.html">
+                            <a class="drop-button" href="/users.html" title="Users">
                                 <span class="icon-user-group" aria-hidden="true"></span>
                                 <span class="text">Users</span>
                             </a>
                         </li>
 
                         <li class="drop-list-item">
-                            <a class="drop-button" href="">
+                            <a class="drop-button" href="" title="Functions">
                                 <span class="icon-lightning-bolt" aria-hidden="true"></span>
                                 <span class="text">Functions</span>
                             </a>
diff --git a/apps/pink/src/pages/elements/tag.mdx b/apps/pink/src/pages/elements/tag.mdx
index 72ead24936..7fd504d834 100644
--- a/apps/pink/src/pages/elements/tag.mdx
+++ b/apps/pink/src/pages/elements/tag.mdx
@@ -42,7 +42,7 @@ Informative tags are used to visually label information for easy understanding a
 </div>
 
 <div class="tag eyebrow-heading-3">
-    <span class="text">Beta</span>
+    <span class="text u-x-small">Beta</span>
 </div>
 
 </Preview>
diff --git a/apps/pink/src/pages/utilities/text.mdx b/apps/pink/src/pages/utilities/text.mdx
index f656a3e192..65eb6e3241 100644
--- a/apps/pink/src/pages/utilities/text.mdx
+++ b/apps/pink/src/pages/utilities/text.mdx
@@ -5,9 +5,9 @@ description: Text ensures consistent text size, weight, line height and breaks a
 
 | Class                | Scss Define                                       | Compiled CSS                    |
 | -------------------- | ------------------------------------------------- | ------------------------------- |
-| `u-x-small`          | `font-size: pxToRem(12);`                         | `font-size: 0.75rem;`           |
-| `u-small`            | `font-size: pxToRem(14);`                         | `font-size: 0.875rem;`          |
-| `u-font-size-32`     | `font-size: pxToRem(32);`                         | `font-size: 2rem;`              |
+| `u-x-small`          | `font-size: pxToRem(12)!important;`               | `font-size: 0.75rem!important;` |
+| `u-small`            | `font-size: pxToRem(14)!important;`               | `font-size: 0.875rem!important;`|
+| `u-font-size-32`     | `font-size: pxToRem(32)!important;`               | `font-size: 2rem!important;`    |
 | `u-bold`             | `font-weight: 600;`                               | Stays the same                  |
 | `u-normal`           | `font-weight: normal;`                            | Stays the same                  |
 | `u-text-center`      | `text-align: center;`                             | Stays the same                  |
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index d0d6642b05..8fb58336b4 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -14,9 +14,9 @@
 /* text */
 .u-direction-ltr    { direction:ltr; }
 .u-direction-rtl    { direction:rtl; }
-.u-x-small          { font-size:pxToRem(12); }
-.u-small            { font-size:pxToRem(14); }
-.u-font-size-32     { font-size:pxToRem(32); }
+.u-x-small          { font-size:pxToRem(12)!important; }
+.u-small            { font-size:pxToRem(14)!important; }
+.u-font-size-32     { font-size:pxToRem(32)!important; }
 .u-bold             { font-weight:600; }
 .u-normal           { font-weight:normal; }
 .u-text-center      { text-align:center; }

From c831ac4842229d2c7bad5a65073ad035a7eff55c Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 8 Mar 2023 19:41:04 +0700
Subject: [PATCH 039/167] Alert (Action) - style fix in demos (via HTML Utility
 class)

---
 apps/pink/src/pages/components/alert.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/pink/src/pages/components/alert.mdx b/apps/pink/src/pages/components/alert.mdx
index 7ec7cc5381..16e1333c41 100644
--- a/apps/pink/src/pages/components/alert.mdx
+++ b/apps/pink/src/pages/components/alert.mdx
@@ -56,7 +56,7 @@ In the Appwrite console, we use five states of alerts:
                 <h6 class="alert-title">This is a default alert</h6>
                 <p class="alert-message">Some description about the alert sent to the user.</p>
             </div>
-            <div class="alert-buttons u-flex u-gap-16">
+            <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
                 <button class="button is-text is-full-width-mobile">
                     <span class="text">Secondary call to action</span>
                 </button>
@@ -134,7 +134,7 @@ In the Appwrite console, we use five states of alerts:
                 <h6 class="alert-title">This is a default alert</h6>
                 <p class="alert-message">Some description about the alert sent to the user.</p>
             </div>
-            <div class="alert-buttons u-flex u-gap-16">
+            <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
                 <button class="button is-text is-full-width-mobile">
                     <span class="text">Secondary call to action</span>
                 </button>
@@ -212,7 +212,7 @@ In the Appwrite console, we use five states of alerts:
                 <h6 class="alert-title">This is a default alert</h6>
                 <p class="alert-message">Some description about the alert sent to the user.</p>
             </div>
-            <div class="alert-buttons u-flex u-gap-16">
+            <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
                 <button class="button is-text is-full-width-mobile">
                     <span class="text">Secondary call to action</span>
                 </button>
@@ -290,7 +290,7 @@ In the Appwrite console, we use five states of alerts:
                 <h6 class="alert-title">This is a default alert</h6>
                 <p class="alert-message">Some description about the alert sent to the user.</p>
             </div>
-            <div class="alert-buttons u-flex u-gap-16">
+            <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
                 <button class="button is-text is-full-width-mobile">
                     <span class="text">Secondary call to action</span>
                 </button>
@@ -368,7 +368,7 @@ In the Appwrite console, we use five states of alerts:
                 <h6 class="alert-title">This is a default alert</h6>
                 <p class="alert-message">Some description about the alert sent to the user.</p>
             </div>
-            <div class="alert-buttons u-flex u-gap-16">
+            <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
                 <button class="button is-text is-full-width-mobile">
                     <span class="text">Secondary call to action</span>
                 </button>

From e6dbacee32b19ce7de5abee265ebd1294ba43c5f Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 08:22:06 +0700
Subject: [PATCH 040/167] Modal - New state for separated header -
 "is-separate-header" - Add new demo in modal.mdx page

---
 apps/pink/src/pages/components/modal.mdx | 57 ++++++++++++++++++++++++
 packages/ui/src/7-components/_modal.scss |  8 ++++
 2 files changed, 65 insertions(+)

diff --git a/apps/pink/src/pages/components/modal.mdx b/apps/pink/src/pages/components/modal.mdx
index 3e9d08272f..b4e3a7c619 100644
--- a/apps/pink/src/pages/components/modal.mdx
+++ b/apps/pink/src/pages/components/modal.mdx
@@ -151,6 +151,63 @@ In the Appwrite console, we use three sizes of modals:
     </dialog>
 </Preview>
 
+## Separate Header
+
+State class which allow to seperate the header with border.
+
+| class                | Type                                  |     |
+| -------------------- | ------------------------------------- | --- |
+| `is-separate-header` | Add Border bottom to header of Modal  |     |
+
+
+<Preview center>
+    <dialog id="dialog6" class="modal is-big is-separate-header" open>
+        <form class="modal-form" method="dialog">
+            <header class="modal-header">
+                <h4 class="modal-title heading-level-5">Modal title</h4>
+                <button class="button is-text is-small is-only-icon" aria-label="Close modal">
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </header>
+            <div class="modal-content">
+                <ul class="form-list">
+                    <li class="form-item">
+                        <label class="label">Label</label>
+                        <div class="input-text-wrapper" style="--amount-of-buttons: 1;">
+                            <input type="password" class="input-text" placeholder="Placeholder" />
+                            <button class="show-password-button" aria-label="show password" type="button">
+                                <span class="icon-eye" aria-hidden="true"></span>
+                            </button>
+                        </div>
+                    </li>
+                    <li class="form-item">
+                        <label class="label">Label</label>
+                        <div class="input-text-wrapper" style="--amount-of-buttons:2">
+                            <input type="text" placeholder="Placeholder" />
+                            <div class="options-list">
+                                <button class="options-list-button" aria-label="show password / hide password" type="button">
+                                    <span class="icon-eye" aria-hidden="true"></span>
+                                </button>
+                                <button class="options-list-button" aria-label="copy text" type="button">
+                                    <span class="icon-duplicate" aria-hidden="true"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="modal-footer">
+                <div class="u-flex u-main-end u-gap-16">
+                    <button class="button is-text">
+                        <span class="text">Button</span>
+                    </button>
+                    <button class="button is-secondary"><span class="text">Button</span></button>
+                </div>
+            </div>
+        </form>
+    </dialog>
+</Preview>
+
 ## Best Practice
 
 Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text.
diff --git a/packages/ui/src/7-components/_modal.scss b/packages/ui/src/7-components/_modal.scss
index 37b9a1d268..bdf9c99f72 100644
--- a/packages/ui/src/7-components/_modal.scss
+++ b/packages/ui/src/7-components/_modal.scss
@@ -64,6 +64,14 @@
       --p-modal-border-color: var(--color-neutral-150);
     }
   }
+  &.is-separate-header {
+    .modal-header {
+      padding: var(--p-modal-padding);
+      padding-block-start: 0;
+      border-block-end: solid pxToRem(1) hsl(var(--color-border));
+      margin-inline: calc(var(--p-modal-padding) * -1);
+    }
+  }
 
   &-header {
     display:flex; align-items:center; column-gap:pxToRem(16); row-gap:pxToRem(8); flex-shrink:0;

From e0d6aabb4e166479c797cf5541b1a1f86a16a91d Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 08:45:16 +0700
Subject: [PATCH 041/167] Modal - Update HTML structure, demo updated:
 modal.mdx

---
 apps/pink/src/pages/components/modal.mdx | 63 ++++++++++++++----------
 packages/ui/src/7-components/_modal.scss |  8 ++-
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/apps/pink/src/pages/components/modal.mdx b/apps/pink/src/pages/components/modal.mdx
index b4e3a7c619..082ac231b3 100644
--- a/apps/pink/src/pages/components/modal.mdx
+++ b/apps/pink/src/pages/components/modal.mdx
@@ -43,13 +43,15 @@ Modals consist of five components:
         method="dialog"
       >
         <header class="modal-header">
-          <div class="avatar is-color-orange is-medium">
-            <span class="icon-exclamation" aria-hidden="true"></span>
-          </div>
-          <h4 class="modal-title heading-level-5">Modal title</h4>
-          <button class="button" class="button is-text is-small is-only-icon" aria-label="Close modal" onclick="document.getElementById('dialog').close();">
-            <span class="icon-x" aria-hidden="true"></span>
-          </button>
+            <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                <div class="avatar is-color-orange is-medium">
+                    <span class="icon-exclamation" aria-hidden="true"></span>
+                </div>
+                <h4 class="modal-title heading-level-5">Modal title</h4>
+                <button class="button" class="button is-text is-small is-only-icon" aria-label="Close modal" onclick="document.getElementById('dialog').close();">
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </div>
         </header>
         <div class="modal-content u-small">Modal label text.</div>
         <div class="modal-footer">
@@ -69,13 +71,15 @@ Modals consist of five components:
     <dialog class="modal" id="dialog">
       <form class="modal-form" method="dialog">
         <header class="modal-header">
-          <div class="avatar is-color-orange is-medium">
-            <span class="icon-exclamation" aria-hidden="true"></span>
-          </div>
-          <h4 class="modal-title heading-level-5">Modal title</h4>
-          <button class="button is-text is-small is-only-icon" aria-label="Close modal">
-            <span class="icon-x" aria-hidden="true"></span>
-          </button>
+            <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                <div class="avatar is-color-orange is-medium">
+                    <span class="icon-exclamation" aria-hidden="true"></span>
+                </div>
+                <h4 class="modal-title heading-level-5">Modal title</h4>
+                <button class="button is-text is-small is-only-icon" aria-label="Close modal">
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </div>
         </header>
         <div class="modal-content u-small">Modal label text.</div>
         <div class="modal-footer">
@@ -111,10 +115,12 @@ In the Appwrite console, we use three sizes of modals:
   <dialog id="dialog4" class="modal is-small" open>
     <form class="modal-form" method="dialog">
       <header class="modal-header">
-        <h4 class="modal-title heading-level-5">Modal title</h4>
-        <button class="button is-text is-small is-only-icon" aria-label="Close modal">
-          <span class="icon-x" aria-hidden="true"></span>
-        </button>
+          <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+              <h4 class="modal-title heading-level-5">Modal title</h4>
+              <button class="button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto" aria-label="Close modal">
+                  <span class="icon-x" aria-hidden="true"></span>
+              </button>
+          </div>
       </header>
       <div class="modal-content u-small">Modal label text.</div>
       <div class="modal-footer">
@@ -133,10 +139,12 @@ In the Appwrite console, we use three sizes of modals:
    <dialog id="dialog5" class="modal is-big" open>
         <form class="modal-form" method="dialog">
             <header class="modal-header">
-                <h4 class="modal-title heading-level-5">Modal title</h4>
-                <button class="button is-text is-small is-only-icon" aria-label="Close modal">
-                    <span class="icon-x" aria-hidden="true"></span>
-                </button>
+                <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                    <h4 class="modal-title heading-level-5">Modal title</h4>
+                    <button class="button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto" aria-label="Close modal">
+                        <span class="icon-x" aria-hidden="true"></span>
+                    </button>
+                </div>
             </header>
             <div class="modal-content u-small">Modal label text.</div>
             <div class="modal-footer">
@@ -164,10 +172,13 @@ State class which allow to seperate the header with border.
     <dialog id="dialog6" class="modal is-big is-separate-header" open>
         <form class="modal-form" method="dialog">
             <header class="modal-header">
-                <h4 class="modal-title heading-level-5">Modal title</h4>
-                <button class="button is-text is-small is-only-icon" aria-label="Close modal">
-                    <span class="icon-x" aria-hidden="true"></span>
-                </button>
+                <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                    <h4 class="modal-title heading-level-5">Modal title</h4>
+                    <button class="button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto" aria-label="Close modal">
+                        <span class="icon-x" aria-hidden="true"></span>
+                    </button>
+                </div>
+                <p>Provide contextual feedback messages for complex modals.</p>
             </header>
             <div class="modal-content">
                 <ul class="form-list">
diff --git a/packages/ui/src/7-components/_modal.scss b/packages/ui/src/7-components/_modal.scss
index bdf9c99f72..20e1d93d12 100644
--- a/packages/ui/src/7-components/_modal.scss
+++ b/packages/ui/src/7-components/_modal.scss
@@ -74,11 +74,9 @@
   }
 
   &-header {
-    display:flex; align-items:center; column-gap:pxToRem(16); row-gap:pxToRem(8); flex-shrink:0;
-    margin-block-end:var(--padding-header-bottom);
-    :where(.button) {
-      margin-inline-start:auto; align-self:center;
-    }
+    display:flex; flex-direction:column; gap:pxToRem(4);
+    flex-shrink:0; margin-block-end:var(--padding-header-bottom);
+    p { font-size:var(--font-size-1); }
   }
   &-title { color:hsl(var(--p-modal-title-color)); line-height:1; }
   &-content {

From 7f8b9cd1c709a23dfdf204971b8d60d50f3fc4fc Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 10:13:45 +0700
Subject: [PATCH 042/167] Dropdown with search -- Add two demos include: - two
 text selection - No result Demos are in input-field.mdx page

-- Added new Utility classes
---
 apps/pink/src/pages/elements/input-field.mdx | 83 ++++++++++++++++++++
 apps/pink/src/pages/utilities/display.mdx    |  1 +
 apps/pink/src/pages/utilities/text.mdx       |  2 +
 packages/ui/src/_9-utilities.scss            |  7 +-
 4 files changed, 91 insertions(+), 2 deletions(-)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index f8bcc7f1fa..ab1a8740ec 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -248,7 +248,90 @@ The options are made with ```drop-list``` partial. To hide them you can use the
     </form>
 </Preview>
 
+<Preview center>
+    <form class="form u-width-full-line u-max-width-500">
+        <ul class="form-list">
+            <li class="form-item">
+                <label class="label">Label</label>
+
+                <div class="custom-select">
+                    <div class="select u-width-full-line">
+                        <input type="text" class="input-text" placeholder="Placeholder"></input>
+                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                    </div>
+
+                    <div class="drop is-block-end is-no-arrow">
+                        <section class="drop-section">
+                            <ul class="drop-list">
+                                <li class="drop-list-item">
+                                    <button class="drop-button">
+                                        <div class="u-flex u-cross-baseline u-gap-12">
+                                            <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                                            <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                                        </div>
+                                    </button>
+                                </li>
+                                <li class="drop-list-item">
+                                    <button class="drop-button">
+                                        <div class="u-flex u-cross-baseline u-gap-12">
+                                            <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg6673515e4bc06</span>
+                                            <span class="u-flex-1 u-trim-1">Baseball, Football, ball@gmail.com, playingball.com</span>
+                                        </div>
+                                    </button>
+                                </li>
+                            </ul>
+                        </section>
+                    </div>
+                </div>
+
+            </li>
+        </ul>
+        <br /><br /><br /><br /><br /><br /><br /><br />
+    </form>
+</Preview>
 
+<Preview center>
+    <form class="form u-width-full-line u-max-width-500">
+        <ul class="form-list">
+            <li class="form-item">
+                <label class="label">Label</label>
+
+                <div class="custom-select">
+                    <div class="select u-width-full-line">
+                        <input type="text" class="input-text" placeholder="Placeholder"></input>
+                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                    </div>
+
+                    <div class="drop is-block-end is-no-arrow">
+                        <section class="drop-section">
+
+                            <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
+                                <button type="button" aria-label="create {target}">
+                                    <img class="u-only-light" src="/empty-light.svg" alt="create" aria-hidden="true" height="124" width="215" />
+                                    <img class="u-only-dark" src="/empty-dark.svg" alt="create" aria-hidden="true" height="124" width="215" />
+                                </button>
+                                <div class="u-text-center">
+                                    <h2 class="heading-level-7 u-trim-1 u-margin-block-start-8">
+                                        <span class="text">Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’</span>
+                                    </h2>
+                                    <p class="text u-margin-block-start-8">Need a hand? Check out our documentation.</p>
+                                    </div>
+                                <div class="u-flex u-gap-16 u-main-center">
+                                    <button class="button is-secondary" type="button">
+                                        <span class="text">Clear Search</span>
+                                    </button>
+                                </div>
+                            </div>
+
+                        </section>
+                    </div>
+                </div>
+
+            </li>
+        </ul>
+        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+    </form>
+</Preview>
 
 | Input Type | Type     |                                                                                                       |
 | ---------- | -------- | ----------------------------------------------------------------------------------------------------- |
diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx
index 923ebbb3fa..1ef1e280df 100644
--- a/apps/pink/src/pages/utilities/display.mdx
+++ b/apps/pink/src/pages/utilities/display.mdx
@@ -50,6 +50,7 @@ description: Display controls how an element is displayed, including its alignme
 | `u-flex-vertical-mobile`   | `@media #{$break1} { flex-direction:column; }`                    | `@media (max-width:767.99px) { flex-direction:column; }`         |
 | `u-flex-wrap`              | `flex-wrap: wrap;`                                                | Stays the same                                                   |
 | `u-stretch`                | `flex: 1;`                                                        | Stays the same                                                   |
+| `u-flex-basis-140`         | `flex-basis: pxToRem(140);`                                       | `flex-basis: 8.75rem`                                            |
 | `u-flex-basis-50-percent`  | `flex-basis: 50%;`                                                | Stays the same                                                   |
 | `u-flex-basis-100-percent` | `flex-basis: 100%;`                                               | Stays the same                                                   |
 | `u-flex-shrink-0`          | `flex-shrink: 0;`                                                 | Stays the same                                                   |
diff --git a/apps/pink/src/pages/utilities/text.mdx b/apps/pink/src/pages/utilities/text.mdx
index 65eb6e3241..9aa6f21031 100644
--- a/apps/pink/src/pages/utilities/text.mdx
+++ b/apps/pink/src/pages/utilities/text.mdx
@@ -10,7 +10,9 @@ description: Text ensures consistent text size, weight, line height and breaks a
 | `u-font-size-32`     | `font-size: pxToRem(32)!important;`               | `font-size: 2rem!important;`    |
 | `u-bold`             | `font-weight: 600;`                               | Stays the same                  |
 | `u-normal`           | `font-weight: normal;`                            | Stays the same                  |
+| `u-text-start`       | `text-align: start;`                              | Stays the same                  |
 | `u-text-center`      | `text-align: center;`                             | Stays the same                  |
+| `u-text-end`         | `text-align: end;`                                | Stays the same                  |
 | `u-line-height-1`    | `line-height: 1;`                                 | Stays the same                  |
 | `u-line-height-1-25` | `line-height: 1.25;`                              | Stays the same                  |
 | `u-line-height-1-5`  | `line-height: 1.5;`                               | Stays the same                  |
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 8fb58336b4..f8cd026ea5 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -19,7 +19,9 @@
 .u-font-size-32     { font-size:pxToRem(32)!important; }
 .u-bold             { font-weight:600; }
 .u-normal           { font-weight:normal; }
-.u-text-center      { text-align:center; }
+.u-text-start       { text-align:start;   }
+.u-text-center      { text-align:center;  }
+.u-text-end         { text-align:end;     }
 .u-line-height-1    { line-height:1; }
 .u-line-height-1-25 { line-height:1.25; }
 .u-line-height-1-5  { line-height:1.5; }
@@ -30,7 +32,7 @@
 .u-trim-1           { @include trim(1); }
 .u-trim-2           { @include trim(2); }
 .u-trim-3           { @include trim(3); }
-.u-trim-start       { @include trim; direction:rtl; text-align:right; }
+.u-trim-start       { @include trim(1); direction:rtl; text-align:left; }
 .u-un-break-text    { white-space:nowrap!important; }
 .u-capitalize       { text-transform:capitalize; }
 .u-icon-small       { font-size:var(--icon-size-small); }
@@ -116,6 +118,7 @@
 .u-flex-vertical-mobile     { @media #{$break1} { flex-direction:column; }  }
 .u-flex-wrap                { flex-wrap:wrap;         }
 .u-stretch                  { flex:1;                 }
+.u-flex-basis-140           { flex-basis:pxToRem(140);}
 .u-flex-basis-50-percent    { flex-basis:50%;         }
 .u-flex-basis-100-percent   { flex-basis:100%;        }
 .u-flex-shrink-0            { flex-shrink:0;          }

From f4c5b4e5ea8089ecef719ecaa722208a3e3451db Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 11:45:06 +0700
Subject: [PATCH 043/167] Reviews - Create New partial - demo page: reviews.mdx
 - Add new utility class - update demo page of display.mdx utility page

---
 apps/pink/src/pages/components/reviews.mdx | 93 ++++++++++++++++++++++
 apps/pink/src/pages/utilities/display.mdx  |  8 +-
 packages/ui/src/_9-utilities.scss          |  1 +
 3 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 apps/pink/src/pages/components/reviews.mdx

diff --git a/apps/pink/src/pages/components/reviews.mdx b/apps/pink/src/pages/components/reviews.mdx
new file mode 100644
index 0000000000..0c07ab281a
--- /dev/null
+++ b/apps/pink/src/pages/components/reviews.mdx
@@ -0,0 +1,93 @@
+# Reviews
+Reviews box partial, built from other partials
+
+<Preview center>
+    <div class="u-width-full-line u-max-width-600">
+        <div class="u-flex u-cross-baseline u-gap-16">
+           <div>
+               <label class="label">Label</label>
+               <span class="optional">Relation</span>
+           </div>
+            <button class="button is-text u-padding-inline-0 u-margin-inline-start-auto">
+                <span class="icon-plus" aria-hidden='true'></span>
+                <span class="text">Add item</span>
+            </button>
+        </div>
+
+        <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
+            <li class="u-flex u-gap-16">
+                <output class="input-text">
+                    <div class="u-flex u-cross-baseline u-gap-12">
+                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                    </div>
+                </output>
+                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </li>
+            <li class="u-flex u-gap-16">
+                <output class="input-text">
+                    <div class="u-flex u-cross-baseline u-gap-12">
+                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                    </div>
+                </output>
+                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </li>
+            <li class="u-flex u-gap-16">
+                <output class="input-text">
+                    <div class="u-flex u-cross-baseline u-gap-12">
+                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                    </div>
+                </output>
+                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </li>
+            <li class="u-flex u-gap-16">
+                <output class="input-text">
+                    <div class="u-flex u-cross-baseline u-gap-12">
+                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                    </div>
+                </output>
+                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </li>
+            <li class="u-flex u-gap-16">
+                <output class="input-text">
+                    <div class="u-flex u-cross-baseline u-gap-12">
+                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                    </div>
+                </output>
+                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </li>
+        </ul>
+
+        <div class="u-flex u-cross-baseline u-gap-16 u-margin-block-start-8">
+
+            <p class="u-small">Total results: 26</p>
+
+            <nav class="pagination u-margin-inline-start-auto" style="--button-size: 2.5rem;">
+                <span href="" class="button is-text is-disabled" aria-label="prev page">
+                    <span class="icon-cheveron-left" aria-hidden="true"></span>
+                    <span class="text">Prev</span>
+                </span>
+
+                <a href="" class="button is-text" aria-label="next page">
+                    <span class="text">Next</span>
+                    <span class="icon-cheveron-right" aria-hidden="true"></span>
+                </a>
+            </nav>
+
+        </div>
+    </div>
+</Preview>
\ No newline at end of file
diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx
index 1ef1e280df..348bc39c31 100644
--- a/apps/pink/src/pages/utilities/display.mdx
+++ b/apps/pink/src/pages/utilities/display.mdx
@@ -69,10 +69,14 @@ description: Display controls how an element is displayed, including its alignme
 | `u-min-width-100-percent`  | `min-inline-size: 100%;`                                          | Stays the same                                                   |
 |                            |                                                                   |                                                                  |
 | `u-max-width-250`          | `max-inline-size: pxToRem(250);`                                  | `max-inline-size: 15.625rem;`                                    |
-| `u-max-width-300`          | `max-inline-size: pxToRem(300);`                                  | `max-inline-size: 18.75rem;`                                        |
-| `u-max-width-350`          | `max-inline-size: pxToRem(350);`                                  | `max-inline-size: 21.875rem;`                                        |
+| `u-max-width-300`          | `max-inline-size: pxToRem(300);`                                  | `max-inline-size: 18.75rem;`                                     |
+| `u-max-width-350`          | `max-inline-size: pxToRem(350);`                                  | `max-inline-size: 21.875rem;`                                    |
 | `u-max-width-400`          | `max-inline-size: pxToRem(400);`                                  | `max-inline-size: 25rem;`                                        |
+| `u-max-width-450`          | `max-inline-size: pxToRem(450);`                                  | `max-inline-size: 28.125rem;`                                        |
 | `u-max-width-500`          | `max-inline-size: pxToRem(500);`                                  | `max-inline-size: 31.25rem;`                                     |
+| `u-max-width-600`          | `max-inline-size: pxToRem(600);`                                  | `max-inline-size: 37.5rem;`                                      |
+| `u-max-width-650`          | `max-inline-size: pxToRem(650);`                                  | `max-inline-size: 40.625rem;`                                    |
+| `u-max-width-700`          | `max-inline-size: pxToRem(700);`                                  | `max-inline-size: 43.75rem;`                                     |
 | `u-max-width-100-percent`  | `max-inline-size:100%;`                                           | Stays the same                                                   |
 |                            |                                                                   |                                                                  |
 | `u-height-100-percent`     | `block-size: 100%;`                                               | Stays the same                                                   |
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index f8cd026ea5..39ad6449dd 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -142,6 +142,7 @@
 .u-max-width-400    { max-inline-size:pxToRem(400); }
 .u-max-width-450    { max-inline-size:pxToRem(440); }
 .u-max-width-500    { max-inline-size:pxToRem(500); }
+.u-max-width-600    { max-inline-size:pxToRem(600); }
 .u-max-width-650    { max-inline-size:pxToRem(650); }
 .u-max-width-700    { max-inline-size:pxToRem(700); }
 .u-max-width-100-percent { max-inline-size:100%; }

From 81144f26cbeab491670cc717e28ce7b55a464f12 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 11:50:44 +0700
Subject: [PATCH 044/167] Reviews - Add input is-read-only state class

---
 apps/pink/src/pages/components/reviews.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/pink/src/pages/components/reviews.mdx b/apps/pink/src/pages/components/reviews.mdx
index 0c07ab281a..43f8ae74ce 100644
--- a/apps/pink/src/pages/components/reviews.mdx
+++ b/apps/pink/src/pages/components/reviews.mdx
@@ -16,7 +16,7 @@ Reviews box partial, built from other partials
 
         <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
             <li class="u-flex u-gap-16">
-                <output class="input-text">
+                <output class="input-text is-read-only">
                     <div class="u-flex u-cross-baseline u-gap-12">
                         <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
                         <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
@@ -27,7 +27,7 @@ Reviews box partial, built from other partials
                 </button>
             </li>
             <li class="u-flex u-gap-16">
-                <output class="input-text">
+                <output class="input-text is-read-only">
                     <div class="u-flex u-cross-baseline u-gap-12">
                         <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
                         <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
@@ -38,7 +38,7 @@ Reviews box partial, built from other partials
                 </button>
             </li>
             <li class="u-flex u-gap-16">
-                <output class="input-text">
+                <output class="input-text is-read-only">
                     <div class="u-flex u-cross-baseline u-gap-12">
                         <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
                         <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
@@ -49,7 +49,7 @@ Reviews box partial, built from other partials
                 </button>
             </li>
             <li class="u-flex u-gap-16">
-                <output class="input-text">
+                <output class="input-text is-read-only">
                     <div class="u-flex u-cross-baseline u-gap-12">
                         <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
                         <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
@@ -60,7 +60,7 @@ Reviews box partial, built from other partials
                 </button>
             </li>
             <li class="u-flex u-gap-16">
-                <output class="input-text">
+                <output class="input-text is-read-only">
                     <div class="u-flex u-cross-baseline u-gap-12">
                         <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
                         <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>

From e81f47904d3880c3fda7a6335ecff2da6b04dc12 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 11:55:06 +0700
Subject: [PATCH 045/167] Reviews - Update demo

---
 apps/pink/src/pages/components/reviews.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/pink/src/pages/components/reviews.mdx b/apps/pink/src/pages/components/reviews.mdx
index 43f8ae74ce..07bd25cc18 100644
--- a/apps/pink/src/pages/components/reviews.mdx
+++ b/apps/pink/src/pages/components/reviews.mdx
@@ -4,7 +4,7 @@ Reviews box partial, built from other partials
 <Preview center>
     <div class="u-width-full-line u-max-width-600">
         <div class="u-flex u-cross-baseline u-gap-16">
-           <div>
+           <div class="u-flex u-cross-baseline u-gap-8">
                <label class="label">Label</label>
                <span class="optional">Relation</span>
            </div>

From eeb4c0a9fdd4634216091a4bebc795391c2825f2 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 11:56:00 +0700
Subject: [PATCH 046/167] Reviews - Update demo

---
 apps/pink/src/pages/components/reviews.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/pink/src/pages/components/reviews.mdx b/apps/pink/src/pages/components/reviews.mdx
index 07bd25cc18..a488354fec 100644
--- a/apps/pink/src/pages/components/reviews.mdx
+++ b/apps/pink/src/pages/components/reviews.mdx
@@ -6,7 +6,7 @@ Reviews box partial, built from other partials
         <div class="u-flex u-cross-baseline u-gap-16">
            <div class="u-flex u-cross-baseline u-gap-8">
                <label class="label">Label</label>
-               <span class="optional">Relation</span>
+               <span class="optional u-x-small">Relation</span>
            </div>
             <button class="button is-text u-padding-inline-0 u-margin-inline-start-auto">
                 <span class="icon-plus" aria-hidden='true'></span>

From de0ce79f1529e422220d1f030af0a96034b1e382 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 20:08:52 +0700
Subject: [PATCH 047/167] User Profile - Update corporation text color in
 light-mode - Chen QA

---
 packages/ui/src/7-components/_user-profile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_user-profile.scss b/packages/ui/src/7-components/_user-profile.scss
index 37e9660e92..f92c08fd8f 100644
--- a/packages/ui/src/7-components/_user-profile.scss
+++ b/packages/ui/src/7-components/_user-profile.scss
@@ -10,7 +10,7 @@
   &-button {
     /* variables */
     --p-name-color-text: var(--color-neutral-100);
-    --p-title-color-text: var(--color-neutral-50);
+    --p-title-color-text: var(--color-neutral-70);
     --p-icon-color: var(--color-neutral-50);
 
     position:relative; z-index:2;

From f06b49197ef1a370aad150d2b12f9535fff14cc6 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 20:17:25 +0700
Subject: [PATCH 048/167] Review - Update button styles - Chen QA

---
 apps/pink/src/pages/components/reviews.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/pink/src/pages/components/reviews.mdx b/apps/pink/src/pages/components/reviews.mdx
index a488354fec..30ba6e79c6 100644
--- a/apps/pink/src/pages/components/reviews.mdx
+++ b/apps/pink/src/pages/components/reviews.mdx
@@ -77,12 +77,12 @@ Reviews box partial, built from other partials
             <p class="u-small">Total results: 26</p>
 
             <nav class="pagination u-margin-inline-start-auto" style="--button-size: 2.5rem;">
-                <span href="" class="button is-text is-disabled" aria-label="prev page">
+                <span href="" class="button is-text is-disabled u-padding-inline-0" aria-label="prev page">
                     <span class="icon-cheveron-left" aria-hidden="true"></span>
                     <span class="text">Prev</span>
                 </span>
 
-                <a href="" class="button is-text" aria-label="next page">
+                <a href="" class="button is-text u-padding-inline-0" aria-label="next page">
                     <span class="text">Next</span>
                     <span class="icon-cheveron-right" aria-hidden="true"></span>
                 </a>

From c97e1ba08fdeb4b8093b4e77c86408ae8545e50d Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 20:35:07 +0700
Subject: [PATCH 049/167] Input search - Fix HTML + Images - Chen QA

---
 apps/pink/public/empty-state-dark.svg        | 149 ++++++++++++++++++
 apps/pink/public/empty-state-light.svg       | 157 +++++++++++++++++++
 apps/pink/src/pages/elements/input-field.mdx |  14 +-
 3 files changed, 313 insertions(+), 7 deletions(-)
 create mode 100644 apps/pink/public/empty-state-dark.svg
 create mode 100644 apps/pink/public/empty-state-light.svg

diff --git a/apps/pink/public/empty-state-dark.svg b/apps/pink/public/empty-state-dark.svg
new file mode 100644
index 0000000000..40a1126617
--- /dev/null
+++ b/apps/pink/public/empty-state-dark.svg
@@ -0,0 +1,149 @@
+<svg width="154" height="120" viewBox="0 0 154 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M153.716 46.0989L112.718 85.2453L48.5747 55.0282L60.9762 25.49L153.716 46.0989Z" fill="url(#paint0_linear_3088_28356)"/>
+<path d="M113.09 84.8538L117.124 35.9613C117.36 33.103 115.54 30.4775 112.781 29.6953L43.9362 10.1814C43.7968 10.1419 43.6526 10.1219 43.5077 10.1219C42.6867 10.1219 42.004 10.7541 41.9412 11.5728L40.9834 24.059L38.4642 24.5629L37.4565 37.6629L40.2276 42.0716L39.2199 59.4544L13.73 82.7484C12.6535 83.7322 12.9579 85.5003 14.3015 86.0674L84.9288 115.877C86.589 116.577 88.5129 116.081 89.6274 114.665L113.09 84.8538Z" fill="url(#paint1_linear_3088_28356)"/>
+<path d="M86.904 114.051L111.396 83.8912L39.2827 59.115L13.6091 82.197C13.0622 82.6887 13.2153 83.5827 13.8947 83.8644L19.2917 86.1022L27.1574 89.1146L55.7755 101.499L86.904 114.051Z" fill="url(#paint2_linear_3088_28356)"/>
+<path d="M88.5385 107.213L102.989 89.0604L37.6993 64.8475L23.0845 78.6863C22.032 79.683 22.3562 81.4335 23.696 81.987L86.21 107.816C87.0338 108.157 87.9834 107.911 88.5385 107.213Z" fill="#373B4D"/>
+<path d="M111.338 83.9262L114.929 36.2372C115.143 33.3897 113.321 30.7857 110.572 30.0115L44.9633 11.5306C43.723 11.1813 42.4809 12.0787 42.423 13.3659L40.3674 59.1151L111.338 83.9262Z" fill="url(#paint3_linear_3088_28356)"/>
+<path d="M109.664 83.5914L112.493 36.3876C112.605 34.5328 111.424 32.8457 109.643 32.3149L45.4892 13.1923C44.2562 12.8247 43.002 13.7002 42.9218 14.9843L42.5367 21.1511L39.7089 24.4366L36.9521 26.8299L36.9521 38.1665L40.605 44.2126L39.2827 59.1148L109.664 83.5914Z" fill="url(#paint4_linear_3088_28356)"/>
+<path d="M101.063 95.3053L34.8803 69.1366" stroke="url(#paint5_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M98.0842 99.0145L31.8924 71.8416" stroke="url(#paint6_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M96.1165 103.384L28.2512 76.2269" stroke="url(#paint7_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M92.7939 106.093L25.598 78.9293" stroke="url(#paint8_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M90.9227 84.6873L76.3531 101.893" stroke="url(#paint9_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M87.2163 82.0437L72.6467 99.2491" stroke="url(#paint10_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M81.8365 79.4153L67.2669 96.6206" stroke="url(#paint11_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M76.7945 77.1187L62.2249 94.324" stroke="url(#paint12_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M71.0897 75.4976L56.5201 92.7029" stroke="url(#paint13_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M66.7139 72.8601L52.1443 90.0655" stroke="url(#paint14_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M61.3429 71.2361L46.7733 88.4414" stroke="url(#paint15_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M53.2978 69.9712L46.013 78.5739L38.7282 87.1765" stroke="url(#paint16_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M46.5695 66.3508L39.2847 74.9535L31.9999 83.5562" stroke="url(#paint17_radial_3088_28356)" stroke-opacity="0.2"/>
+<path d="M102.93 90.9449L102.93 89.0555L89.9095 104.479C88.227 106.472 85.4497 107.15 83.0383 106.156L21.8005 80.9141L21.7263 82.3823L84.01 107.998C86.02 108.825 88.3338 108.259 89.7346 106.597L102.93 90.9449Z" fill="url(#paint18_linear_3088_28356)"/>
+<g filter="url(#filter0_d_3088_28356)">
+<mask id="path-21-inside-1_3088_28356" fill="white">
+<ellipse cx="16.0887" cy="22.9301" rx="16.0887" ry="22.9301" transform="matrix(0.828969 -0.630255 0.551759 0.781761 24.6622 31.2556)"/>
+</mask>
+<path d="M47.4087 41.5066C48.9104 43.6343 49.1298 45.3999 49.1179 45.8852C49.1132 46.0788 49.085 45.6274 49.4898 44.729C49.9306 43.7508 50.8117 42.4392 52.2678 41.3321L74.3382 72.6026C84.8984 64.5737 88.7038 52.8077 88.9381 43.2087C89.1742 33.5361 86.0532 24.0689 80.5675 16.2964L47.4087 41.5066ZM52.2678 41.3321C53.7239 40.2251 55.1945 39.7487 56.226 39.6075C57.1735 39.4778 57.5796 39.6419 57.4003 39.5882C56.951 39.4535 55.3952 38.704 53.8935 36.5764L20.7347 61.7866C26.2205 69.559 33.9762 75.5025 42.933 78.1859C51.8216 80.8488 63.7779 80.6314 74.3382 72.6026L52.2678 41.3321ZM53.8935 36.5764C52.3918 34.4487 52.1724 32.6831 52.1843 32.1978C52.189 32.0042 52.2172 32.4556 51.8124 33.354C51.3716 34.3322 50.4905 35.6438 49.0344 36.7509L26.964 5.48042C16.4038 13.5093 12.5984 25.2753 12.3641 34.8743C12.128 44.5469 15.249 54.0141 20.7347 61.7866L53.8935 36.5764ZM49.0344 36.7509C47.5783 37.8579 46.1077 38.3343 45.0762 38.4755C44.1287 38.6052 43.7226 38.4411 43.9019 38.4948C44.3512 38.6294 45.907 39.3789 47.4087 41.5066L80.5675 16.2964C75.0817 8.52395 67.326 2.58044 58.3692 -0.102875C49.4806 -2.76579 37.5243 -2.54843 26.964 5.48042L49.0344 36.7509Z" fill="url(#paint19_linear_3088_28356)" mask="url(#path-21-inside-1_3088_28356)"/>
+<ellipse cx="11.318" cy="17.6053" rx="11.318" ry="17.6053" transform="matrix(0.838869 -0.615929 0.536587 0.793098 30.5404 33.0662)" fill="#1E1F2B"/>
+<rect width="8.08596" height="5.30641" transform="matrix(0.904282 0.33568 -0.417015 0.94641 68.1178 47.3865)" fill="url(#paint20_linear_3088_28356)"/>
+<rect width="23.2673" height="6.83415" transform="matrix(0.904282 0.33568 -0.417015 0.94641 74.1856 48.6836)" fill="url(#paint21_linear_3088_28356)"/>
+<ellipse cx="1.13709" cy="2.5998" rx="1.13709" ry="2.5998" transform="matrix(0.916879 0.305924 -0.388537 0.956443 66.9074 47.0178)" fill="url(#paint22_linear_3088_28356)"/>
+<ellipse cx="1.46446" cy="3.34829" rx="1.46446" ry="3.34829" transform="matrix(0.916879 0.305924 -0.388537 0.956443 72.6267 48.2087)" fill="url(#paint23_linear_3088_28356)"/>
+<ellipse cx="1.92304" cy="3.33279" rx="1.92304" ry="3.33279" transform="matrix(0.916879 0.305924 -0.388537 0.956443 93.2364 55.938)" fill="url(#paint24_linear_3088_28356)"/>
+<g style="mix-blend-mode:lighten" opacity="0.79">
+<path d="M42.7751 41.5648C40.8983 41.965 39.0463 38.7612 40.8388 38.0307C42.3248 37.4252 43.1028 38.7389 44.016 39.707C44.8371 40.5774 44.587 41.1785 42.7751 41.5648Z" fill="#868EA3"/>
+<path d="M46.5167 48.6618C44.3989 47.1422 41.6831 43.3788 43.0021 43.3255C45.929 43.2072 47.468 42.5166 49.0262 46.2045C49.4948 47.3137 51.9187 49.8477 51.6137 50.6135C51.3087 51.3793 48.1653 49.8448 46.5167 48.6618Z" fill="#868EA3"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_3088_28356" x="0.267769" y="2.44287" width="127.625" height="108.519" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3088_28356"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3088_28356" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_3088_28356" x1="88.6448" y1="95.0314" x2="125.808" y2="53.1184" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2D3041" stop-opacity="0.29"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3088_28356" x1="118.464" y1="58.5727" x2="-120.529" y2="121.054" gradientUnits="userSpaceOnUse">
+<stop stop-color="#333749"/>
+<stop offset="1" stop-color="#3C4158"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3088_28356" x1="16.374" y1="35.493" x2="185.893" y2="292.803" gradientUnits="userSpaceOnUse">
+<stop stop-color="#282A3B"/>
+<stop offset="1" stop-color="#14141F"/>
+</linearGradient>
+<linearGradient id="paint3_linear_3088_28356" x1="106.144" y1="60.5218" x2="-20.8606" y2="60.4941" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B1B28" stop-opacity="0.6"/>
+<stop offset="1" stop-color="#4F5769"/>
+</linearGradient>
+<linearGradient id="paint4_linear_3088_28356" x1="-22.7528" y1="-47.9893" x2="82.6516" y2="58.0647" gradientUnits="userSpaceOnUse">
+<stop stop-color="#373B4D"/>
+<stop offset="1" stop-color="#171723" stop-opacity="0.82"/>
+</linearGradient>
+<radialGradient id="paint5_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(67.9716 82.2209) rotate(89.4723) scale(13.3886 32.9694)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64.9883 85.4281) rotate(89.4723) scale(13.8907 32.9694)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(62.1838 89.8057) rotate(89.4723) scale(13.8907 33.8062)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint8_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(59.196 92.5111) rotate(89.4723) scale(13.8907 33.4715)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint9_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(83.6379 93.2899) rotate(89.4723) scale(8.53522 7.36372)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint10_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(79.9315 90.6464) rotate(89.4723) scale(8.53522 7.36372)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint11_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(74.5517 88.018) rotate(89.4723) scale(8.53522 7.36372)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint12_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(69.5097 85.7213) rotate(89.4723) scale(8.53522 7.36372)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint13_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(63.8049 84.1002) rotate(89.4723) scale(8.53522 7.36372)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint14_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(59.4291 81.4628) rotate(89.4723) scale(8.53522 7.36372)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint15_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(54.0581 79.8388) rotate(89.4723) scale(8.53522 7.36372)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint16_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(46.013 78.5739) rotate(89.4723) scale(8.53522 7.36372)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint17_radial_3088_28356" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(39.2847 74.9535) rotate(89.4723) scale(8.53522 7.36372)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint18_linear_3088_28356" x1="86.8372" y1="113.38" x2="-3.46713" y2="56.7005" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F5469"/>
+<stop offset="0.732668" stop-color="#4F5469" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint19_linear_3088_28356" x1="84.3152" y1="44.087" x2="37.4589" y2="55.2934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#14141F"/>
+<stop offset="1" stop-color="#4F5769"/>
+</linearGradient>
+<linearGradient id="paint20_linear_3088_28356" x1="4.04298" y1="0" x2="4.04298" y2="5.30641" gradientUnits="userSpaceOnUse">
+<stop stop-color="#757D91"/>
+<stop offset="1" stop-color="#2D3142"/>
+</linearGradient>
+<linearGradient id="paint21_linear_3088_28356" x1="11.6336" y1="0" x2="11.6336" y2="6.83415" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F5769"/>
+<stop offset="1" stop-color="#14141F"/>
+</linearGradient>
+<linearGradient id="paint22_linear_3088_28356" x1="1.13709" y1="0" x2="1.13709" y2="5.1996" gradientUnits="userSpaceOnUse">
+<stop stop-color="#757D91"/>
+<stop offset="1" stop-color="#2D3142"/>
+</linearGradient>
+<linearGradient id="paint23_linear_3088_28356" x1="1.46446" y1="0" x2="1.46446" y2="6.69659" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F5769"/>
+<stop offset="1" stop-color="#171723"/>
+</linearGradient>
+<linearGradient id="paint24_linear_3088_28356" x1="1.92304" y1="0" x2="1.92304" y2="6.66557" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F5769"/>
+<stop offset="1" stop-color="#171723" stop-opacity="0.92"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/pink/public/empty-state-light.svg b/apps/pink/public/empty-state-light.svg
new file mode 100644
index 0000000000..332790627b
--- /dev/null
+++ b/apps/pink/public/empty-state-light.svg
@@ -0,0 +1,157 @@
+<svg width="137" height="104" viewBox="0 0 137 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M136.513 40.7345L101.284 74.4414L46.1477 48.4025L56.8002 22.9648L136.513 40.7345Z" fill="url(#paint0_linear_3068_176802)"/>
+<path d="M101.616 74.1208L105.014 32.6887C105.248 29.8314 103.428 27.2058 100.67 26.4215L42.1456 9.78102C42.0256 9.74689 41.9014 9.72956 41.7766 9.72951C41.071 9.72926 40.4846 10.2725 40.431 10.9761L39.6111 21.7334L37.4456 22.1666L36.5833 33.45L38.9669 37.2483L38.1059 52.2206L16.5175 71.9867C15.4434 72.9702 15.7485 74.7364 17.0907 75.3044L77.0185 100.665C78.6806 101.368 80.6068 100.872 81.7208 99.4539L101.616 74.1208Z" fill="url(#paint1_linear_3068_176802)"/>
+<path d="M79.1044 99.2621L100.147 73.2988L38.1565 51.9419L16.2592 71.6636C15.7135 72.1552 15.867 73.0483 16.5457 73.3304L20.982 75.1746L27.7437 77.771L52.3452 88.4441L79.1044 99.2621Z" fill="url(#paint2_linear_3068_176802)"/>
+<path d="M80.6388 93.2084L92.9221 77.7477L36.7975 56.8785L24.5493 68.4971C23.499 69.4935 23.824 71.2422 25.1624 71.7966L78.3087 93.8111C79.1333 94.1527 80.084 93.9068 80.6388 93.2084Z" fill="white"/>
+<path d="M100.11 73.3121L103.132 32.9141C103.345 30.0677 101.523 27.4635 98.7752 26.6871L43.3718 11.0321C42.1313 10.6816 40.889 11.5785 40.8317 12.8661L39.0941 51.92L100.11 73.3121Z" fill="url(#paint3_linear_3068_176802)"/>
+<path d="M98.6717 73.0241L101.063 32.8057C101.174 30.9516 99.993 29.2643 98.2131 28.7322L43.8235 12.4705C42.5902 12.1018 41.3357 12.9768 41.2561 14.2613L40.9486 19.2232L38.5188 22.0522L36.1497 24.1127L36.1531 33.877L39.2951 39.0857L38.1629 51.9207L98.6717 73.0241Z" fill="url(#paint4_linear_3068_176802)"/>
+<path d="M91.2604 83.1336L34.3847 60.5532" stroke="url(#paint5_radial_3068_176802)"/>
+<path d="M88.7006 86.3296L31.817 62.884" stroke="url(#paint6_radial_3068_176802)"/>
+<path d="M87.0095 90.0951L28.6878 66.662" stroke="url(#paint7_radial_3068_176802)"/>
+<path d="M84.1542 92.4284L26.4077 68.9903" stroke="url(#paint8_radial_3068_176802)"/>
+<path d="M82.542 73.9685L70.0296 88.793" stroke="url(#paint9_radial_3068_176802)"/>
+<path d="M79.3567 71.6907L66.8444 86.5151" stroke="url(#paint10_radial_3068_176802)"/>
+<path d="M74.7334 69.426L62.2211 84.2505" stroke="url(#paint11_radial_3068_176802)"/>
+<path d="M70.4005 67.4473L57.8882 82.2717" stroke="url(#paint12_radial_3068_176802)"/>
+<path d="M65.4979 66.0503L52.9856 80.8748" stroke="url(#paint13_radial_3068_176802)"/>
+<path d="M61.7375 63.7778L49.2251 78.6023" stroke="url(#paint14_radial_3068_176802)"/>
+<path d="M57.1218 62.3787L44.6095 77.2031" stroke="url(#paint15_radial_3068_176802)"/>
+<path d="M50.208 61.2888L43.9518 68.701L37.6956 76.1133" stroke="url(#paint16_radial_3068_176802)"/>
+<path d="M44.4259 58.1694L38.1698 65.5817L31.9136 72.9939" stroke="url(#paint17_radial_3068_176802)"/>
+<path d="M92.8665 79.3714L92.8661 77.7446L82.0766 90.5497C80.3945 92.5461 77.6137 93.2242 75.1997 92.2268L23.139 70.7172L23.0755 71.9814L76.1308 93.8536C78.143 94.6831 80.4597 94.1163 81.8602 92.4519L92.8665 79.3714Z" fill="url(#paint18_linear_3068_176802)"/>
+<path d="M49.8824 14.6843C50.2192 15.0552 50.1904 15.6291 49.818 15.9639L49.1322 16.5805C48.7536 16.9209 48.1662 16.8714 47.8494 16.4724V16.4724C47.5682 16.1181 47.5997 15.6089 47.9225 15.2923L48.5808 14.6465C48.9466 14.2876 49.5376 14.3048 49.8824 14.6843V14.6843Z" fill="url(#paint19_linear_3068_176802)" fill-opacity="0.4"/>
+<g filter="url(#filter0_d_3068_176802)">
+<mask id="path-22-inside-1_3068_176802" fill="white">
+<ellipse cx="13.8389" cy="19.739" rx="13.8389" ry="19.739" transform="matrix(0.828191 -0.631673 0.550835 0.782226 25.6035 27.9402)"/>
+</mask>
+<path d="M42.8352 38.5307C43.8508 39.973 43.8381 40.9602 43.8435 40.7391C43.8473 40.5794 43.89 39.7912 44.4281 38.5937C45.0022 37.3161 46.0792 35.7426 47.794 34.4347L69.8273 65.7238C79.869 58.0648 83.4008 46.9106 83.6173 38.0121C83.8356 29.0388 80.9521 20.349 75.9628 13.2638L42.8352 38.5307ZM47.794 34.4347C49.5087 33.1269 51.2748 32.5319 52.6183 32.3469C53.8775 32.1736 54.6126 32.3686 54.7601 32.4128C54.9643 32.4741 54.0559 32.1894 53.0403 30.7471L19.9126 56.014C24.902 63.0992 31.9957 68.5778 40.2834 71.0635C48.5019 73.5285 59.7856 73.3827 69.8273 65.7238L47.794 34.4347ZM53.0403 30.7471C52.0246 29.3048 52.0373 28.3176 52.032 28.5387C52.0281 28.6984 51.9854 29.4866 51.4473 30.6841C50.8733 31.9617 49.7962 33.5352 48.0815 34.843L26.0481 3.554C16.0064 11.2129 12.4746 22.3672 12.2581 31.2657C12.0398 40.239 14.9233 48.9288 19.9126 56.014L53.0403 30.7471ZM48.0815 34.843C46.3667 36.1509 44.6006 36.7459 43.2572 36.9309C41.9979 37.1042 41.2629 36.9092 41.1154 36.865C40.9111 36.8037 41.8195 37.0884 42.8352 38.5307L75.9628 13.2638C70.9735 6.17857 63.8797 0.699959 55.5921 -1.78576C47.3736 -4.25074 36.0898 -4.10495 26.0481 3.554L48.0815 34.843Z" fill="url(#paint20_linear_3068_176802)" mask="url(#path-22-inside-1_3068_176802)"/>
+<ellipse cx="9.7349" cy="15.1561" rx="9.7349" ry="15.1561" transform="matrix(0.838117 -0.617359 0.535661 0.793546 30.6551 29.4973)" fill="#F6F6FD"/>
+<rect width="6.95184" height="4.57159" transform="matrix(0.903906 0.336117 -0.415961 0.946968 62.9481 41.8289)" fill="url(#paint21_linear_3068_176802)"/>
+<rect width="20.0045" height="5.88911" transform="matrix(0.903871 0.336195 -0.415864 0.947004 68.1625 42.9465)" fill="url(#paint22_linear_3068_176802)"/>
+<ellipse cx="0.977524" cy="2.23937" rx="0.977524" ry="2.23937" transform="matrix(0.916585 0.306221 -0.38763 0.956901 61.9079 41.5112)" fill="url(#paint23_linear_3068_176802)"/>
+<ellipse cx="1.25896" cy="2.88409" rx="1.25896" ry="2.88409" transform="matrix(0.916585 0.306221 -0.38763 0.956901 66.8229 42.5374)" fill="url(#paint24_linear_3068_176802)"/>
+<ellipse cx="1.65319" cy="2.87086" rx="1.65319" ry="2.87086" transform="matrix(0.916579 0.306235 -0.387612 0.956907 84.5344 49.197)" fill="url(#paint25_linear_3068_176802)"/>
+<g style="mix-blend-mode:lighten" opacity="0.79">
+<path d="M41.1692 36.8147C39.5564 37.1601 37.9648 34.401 39.5053 33.771C40.7823 33.2488 41.4509 34.3802 42.2357 35.2137C42.9413 35.9632 42.7263 36.4811 41.1692 36.8147Z" fill="white"/>
+<path d="M44.3847 42.9268C42.5648 41.6186 40.2308 38.3777 41.3644 38.3312C43.8796 38.2282 45.2023 37.6327 46.5413 40.8089C46.944 41.7643 49.0271 43.9462 48.765 44.606C48.5028 45.2658 45.8015 43.9451 44.3847 42.9268Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_3068_176802" x="0.139542" y="0.892578" width="118.677" height="102.356" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3068_176802"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3068_176802" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_3068_176802" x1="74.3988" y1="84.2301" x2="112.017" y2="54.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="#798196"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3068_176802" x1="118.394" y1="98.5029" x2="-99.1997" y2="105.357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C4C6D7"/>
+<stop offset="0.34172" stop-color="#E8E8F1"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3068_176802" x1="18.4563" y1="31.6503" x2="164.377" y2="253.001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFF"/>
+<stop offset="1" stop-color="#FAFAFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_3068_176802" x1="95.5929" y1="53.1885" x2="-14.2896" y2="53.2497" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E8F1"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_3068_176802" x1="-15.1944" y1="-40.3971" x2="75.6636" y2="50.8006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E8F1"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<radialGradient id="paint5_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(62.8225 71.8434) rotate(89.4576) scale(11.5441 28.3297)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60.2588 74.6068) rotate(89.4576) scale(11.9767 28.3295)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(57.8487 78.3785) rotate(89.4576) scale(11.9769 29.0487)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint8_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(55.281 80.7094) rotate(89.4576) scale(11.9768 28.761)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint9_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(76.2858 81.3807) rotate(89.4575) scale(7.35599 6.32608)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint10_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(73.1006 79.1029) rotate(89.4575) scale(7.35599 6.32608)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint11_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(68.4773 76.8383) rotate(89.4575) scale(7.35599 6.32608)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint12_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64.1444 74.8595) rotate(89.4575) scale(7.35599 6.32608)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint13_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(59.2418 73.4625) rotate(89.4575) scale(7.35599 6.32608)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint14_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(55.4813 71.1901) rotate(89.4575) scale(7.35599 6.32608)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint15_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(50.8656 69.7909) rotate(89.4575) scale(7.35599 6.32608)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint16_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(43.9518 68.701) rotate(89.4575) scale(7.35599 6.32608)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint17_radial_3068_176802" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(38.1698 65.5817) rotate(89.4575) scale(7.35599 6.32608)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint18_linear_3068_176802" x1="79.0403" y1="98.6852" x2="1.32591" y2="50.0102" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C4C6D7"/>
+<stop offset="0.441811" stop-color="#E8E8F1"/>
+<stop offset="1" stop-color="#EBEBEB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint19_linear_3068_176802" x1="47.6445" y1="13.2974" x2="49.7872" y2="17.0737" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6ECEF"/>
+<stop offset="1" stop-color="#E6ECEF" stop-opacity="0"/>
+<stop offset="1" stop-color="#EAF4FA" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint20_linear_3068_176802" x1="76.8677" y1="38.9736" x2="36.5861" y2="48.5842" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B6B9D0"/>
+<stop offset="1" stop-color="#E9E9F1"/>
+</linearGradient>
+<linearGradient id="paint21_linear_3068_176802" x1="3.47592" y1="0" x2="3.47592" y2="4.57159" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEFEFE"/>
+<stop offset="1" stop-color="#E5E6EF"/>
+</linearGradient>
+<linearGradient id="paint22_linear_3068_176802" x1="10.0022" y1="0" x2="10.0022" y2="5.88911" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDEDF6"/>
+<stop offset="1" stop-color="#C9CBDD"/>
+</linearGradient>
+<linearGradient id="paint23_linear_3068_176802" x1="0.977524" y1="0" x2="0.977524" y2="4.47874" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEFEFE"/>
+<stop offset="1" stop-color="#E5E6EF"/>
+</linearGradient>
+<linearGradient id="paint24_linear_3068_176802" x1="1.25896" y1="0" x2="1.25896" y2="5.76819" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDEDF6"/>
+<stop offset="1" stop-color="#D9D9E6"/>
+</linearGradient>
+<linearGradient id="paint25_linear_3068_176802" x1="1.65319" y1="0" x2="1.65319" y2="5.74172" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C9CBDB"/>
+<stop offset="1" stop-color="#DCDCE8"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index ab1a8740ec..823ea427a6 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -305,16 +305,16 @@ The options are made with ```drop-list``` partial. To hide them you can use the
                     <div class="drop is-block-end is-no-arrow">
                         <section class="drop-section">
 
-                            <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
-                                <button type="button" aria-label="create {target}">
-                                    <img class="u-only-light" src="/empty-light.svg" alt="create" aria-hidden="true" height="124" width="215" />
-                                    <img class="u-only-dark" src="/empty-dark.svg" alt="create" aria-hidden="true" height="124" width="215" />
-                                </button>
+                            <div class="u-flex u-flex-vertical u-cross-center u-gap-16">
+                                <div>
+                                    <img class="u-only-light" src="/empty-state-light.svg" alt="" aria-hidden="true" height="120" width="128" />
+                                    <img class="u-only-dark" src="/empty-state-dark.svg" alt="" aria-hidden="true" height="120" width="128" />
+                                </div>
                                 <div class="u-text-center">
-                                    <h2 class="heading-level-7 u-trim-1 u-margin-block-start-8">
+                                    <h2 class="body-text-2 u-trim-1 u-margin-block-start-8">
                                         <span class="text">Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’</span>
                                     </h2>
-                                    <p class="text u-margin-block-start-8">Need a hand? Check out our documentation.</p>
+                                    <p class="text">There are no documents that match your search.</p>
                                     </div>
                                 <div class="u-flex u-gap-16 u-main-center">
                                     <button class="button is-secondary" type="button">

From 3114a1425d138c742e56fa2938c59abbce072095 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 9 Mar 2023 20:46:46 +0700
Subject: [PATCH 050/167] Reviews - Move demo to kitchensync

---
 apps/kitchensink/user.html                 | 105 +++++++++++++++++++++
 apps/pink/src/pages/components/reviews.mdx |  93 ------------------
 2 files changed, 105 insertions(+), 93 deletions(-)
 delete mode 100644 apps/pink/src/pages/components/reviews.mdx

diff --git a/apps/kitchensink/user.html b/apps/kitchensink/user.html
index 15c97603c5..dfb6c87a7e 100644
--- a/apps/kitchensink/user.html
+++ b/apps/kitchensink/user.html
@@ -338,6 +338,111 @@ <h6 class="u-bold">Eldad Test</h6>
                 </div>
               </article>
             </section>
+
+            <section class="common-section">
+              <article class="card">
+                <div class="common-section grid-1-2">
+                  <div class="grid-1-2-col-1 u-grid u-gap-16">
+                    <h6 class="heading-level-7">Reviews</h6>
+                  </div>
+                  <div class="grid-1-2-col-2">
+                    <div class="u-width-full-line u-max-width-600">
+                      <div class="u-flex u-cross-baseline u-gap-16">
+                        <div class="u-flex u-cross-baseline u-gap-8">
+                          <label class="label">Label</label>
+                          <span class="optional u-x-small">Relation</span>
+                        </div>
+                        <button class="button is-text u-padding-inline-0 u-margin-inline-start-auto">
+                          <span class="icon-plus" aria-hidden='true'></span>
+                          <span class="text">Add item</span>
+                        </button>
+                      </div>
+
+                      <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
+                        <li class="u-flex u-gap-16">
+                          <output class="input-text is-read-only">
+                            <div class="u-flex u-cross-baseline u-gap-12">
+                              <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                              <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                            </div>
+                          </output>
+                          <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                            <span class="icon-x" aria-hidden="true"></span>
+                          </button>
+                        </li>
+                        <li class="u-flex u-gap-16">
+                          <output class="input-text is-read-only">
+                            <div class="u-flex u-cross-baseline u-gap-12">
+                              <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                              <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                            </div>
+                          </output>
+                          <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                            <span class="icon-x" aria-hidden="true"></span>
+                          </button>
+                        </li>
+                        <li class="u-flex u-gap-16">
+                          <output class="input-text is-read-only">
+                            <div class="u-flex u-cross-baseline u-gap-12">
+                              <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                              <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                            </div>
+                          </output>
+                          <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                            <span class="icon-x" aria-hidden="true"></span>
+                          </button>
+                        </li>
+                        <li class="u-flex u-gap-16">
+                          <output class="input-text is-read-only">
+                            <div class="u-flex u-cross-baseline u-gap-12">
+                              <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                              <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                            </div>
+                          </output>
+                          <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                            <span class="icon-x" aria-hidden="true"></span>
+                          </button>
+                        </li>
+                        <li class="u-flex u-gap-16">
+                          <output class="input-text is-read-only">
+                            <div class="u-flex u-cross-baseline u-gap-12">
+                              <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                              <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
+                            </div>
+                          </output>
+                          <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                            <span class="icon-x" aria-hidden="true"></span>
+                          </button>
+                        </li>
+                      </ul>
+
+                      <div class="u-flex u-cross-baseline u-gap-16 u-margin-block-start-8">
+
+                        <p class="u-small">Total results: 26</p>
+
+                        <nav class="pagination u-margin-inline-start-auto" style="--button-size: 2.5rem;">
+                <span href="" class="button is-text is-disabled u-padding-inline-0" aria-label="prev page">
+                    <span class="icon-cheveron-left" aria-hidden="true"></span>
+                    <span class="text">Prev</span>
+                </span>
+
+                          <a href="" class="button is-text u-padding-inline-0" aria-label="next page">
+                            <span class="text">Next</span>
+                            <span class="icon-cheveron-right" aria-hidden="true"></span>
+                          </a>
+                        </nav>
+
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="common-section card-separator u-flex u-main-end">
+                  <button class="button is-secondary" type="button">
+                    <span class="text">Delete</span>
+                  </button>
+                </div>
+              </article>
+            </section>
           </div>
           <form class="form"><ul class="form-list"></ul></form>
         </div>
diff --git a/apps/pink/src/pages/components/reviews.mdx b/apps/pink/src/pages/components/reviews.mdx
deleted file mode 100644
index 30ba6e79c6..0000000000
--- a/apps/pink/src/pages/components/reviews.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
-# Reviews
-Reviews box partial, built from other partials
-
-<Preview center>
-    <div class="u-width-full-line u-max-width-600">
-        <div class="u-flex u-cross-baseline u-gap-16">
-           <div class="u-flex u-cross-baseline u-gap-8">
-               <label class="label">Label</label>
-               <span class="optional u-x-small">Relation</span>
-           </div>
-            <button class="button is-text u-padding-inline-0 u-margin-inline-start-auto">
-                <span class="icon-plus" aria-hidden='true'></span>
-                <span class="text">Add item</span>
-            </button>
-        </div>
-
-        <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
-            <li class="u-flex u-gap-16">
-                <output class="input-text is-read-only">
-                    <div class="u-flex u-cross-baseline u-gap-12">
-                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
-                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
-                    </div>
-                </output>
-                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
-                    <span class="icon-x" aria-hidden="true"></span>
-                </button>
-            </li>
-            <li class="u-flex u-gap-16">
-                <output class="input-text is-read-only">
-                    <div class="u-flex u-cross-baseline u-gap-12">
-                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
-                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
-                    </div>
-                </output>
-                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
-                    <span class="icon-x" aria-hidden="true"></span>
-                </button>
-            </li>
-            <li class="u-flex u-gap-16">
-                <output class="input-text is-read-only">
-                    <div class="u-flex u-cross-baseline u-gap-12">
-                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
-                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
-                    </div>
-                </output>
-                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
-                    <span class="icon-x" aria-hidden="true"></span>
-                </button>
-            </li>
-            <li class="u-flex u-gap-16">
-                <output class="input-text is-read-only">
-                    <div class="u-flex u-cross-baseline u-gap-12">
-                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
-                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
-                    </div>
-                </output>
-                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
-                    <span class="icon-x" aria-hidden="true"></span>
-                </button>
-            </li>
-            <li class="u-flex u-gap-16">
-                <output class="input-text is-read-only">
-                    <div class="u-flex u-cross-baseline u-gap-12">
-                        <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
-                        <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
-                    </div>
-                </output>
-                <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
-                    <span class="icon-x" aria-hidden="true"></span>
-                </button>
-            </li>
-        </ul>
-
-        <div class="u-flex u-cross-baseline u-gap-16 u-margin-block-start-8">
-
-            <p class="u-small">Total results: 26</p>
-
-            <nav class="pagination u-margin-inline-start-auto" style="--button-size: 2.5rem;">
-                <span href="" class="button is-text is-disabled u-padding-inline-0" aria-label="prev page">
-                    <span class="icon-cheveron-left" aria-hidden="true"></span>
-                    <span class="text">Prev</span>
-                </span>
-
-                <a href="" class="button is-text u-padding-inline-0" aria-label="next page">
-                    <span class="text">Next</span>
-                    <span class="icon-cheveron-right" aria-hidden="true"></span>
-                </a>
-            </nav>
-
-        </div>
-    </div>
-</Preview>
\ No newline at end of file

From 26591de4f8ca990103131c25fe503cde47287dea Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 10 Mar 2023 11:23:40 +0700
Subject: [PATCH 051/167] Dropdown with search - Refactor all custom select -
 Chen QA - Added clear button option

---
 apps/pink/src/pages/elements/input-field.mdx  | 72 +++++++++++++------
 .../ui/src/6-elements/form/_text-inputs.scss  | 11 +++
 2 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index 823ea427a6..838c8b7469 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -170,8 +170,8 @@ There are a few different types of input field that the user can interact with:
   </form>
 </Preview>
 
-## Custom select
-The options are made with ```drop-list``` partial. To hide them you can use the ```u-hide``` class name.
+## Custom Select
+Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
 
 <Preview center>
     <form class="form u-width-full-line u-max-width-500">
@@ -179,10 +179,15 @@ The options are made with ```drop-list``` partial. To hide them you can use the
             <li class="form-item">
                 <label class="label">Label</label>
 
-                <div class="custom-select">
-                    <button class="select u-width-full-line" type="button">
+                <div class="custom-select is-open">
+                    <button class="input-text-wrapper u-width-full-line" type="button" style="--amount-of-buttons:1">
                         <span class="input-text"><span class="text">Placeholder</span></span>
-                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+
+                        <div class="options-list is-no-separator">
+                            <div class="options-list-button">
+                                <span class="icon-cheveron-down" aria-hidden="true"></span>
+                            </div>
+                        </div>
                     </button>
 
                     <div class="drop is-block-end is-no-arrow">
@@ -209,8 +214,10 @@ The options are made with ```drop-list``` partial. To hide them you can use the
     </form>
 </Preview>
 
-## Custom select with input-text
-The options are made with ```drop-list``` partial. To hide them you can use the ```u-hide``` class name.
+## Custom Select with Search
+- Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
+- To adjust arrow upl add the ```is-open``` class, where the element with ```custom-select``` class.
+- To show/hide the button clear field, toggle the ```u-hide``` class.
 
 <Preview center>
     <form class="form u-width-full-line u-max-width-500">
@@ -218,10 +225,19 @@ The options are made with ```drop-list``` partial. To hide them you can use the
             <li class="form-item">
                 <label class="label">Label</label>
 
-                <div class="custom-select">
-                    <div class="select u-width-full-line">
+                <div class="custom-select is-open">
+                    <div class="input-text-wrapper" style="--amount-of-buttons:1">
                         <input type="text" class="input-text" placeholder="Placeholder"></input>
-                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+
+                        <div class="options-list">
+                            <button class="options-list-button u-hide" aria-label="clear field">
+                                <span class="icon-x" aria-hidden="true"></span>
+                            </button>
+                            <button class="options-list-button">
+                                <span class="icon-cheveron-down" aria-hidden="true"></span>
+                            </button>
+                        </div>
+
                     </div>
 
                     <div class="drop is-block-end is-no-arrow">
@@ -254,10 +270,19 @@ The options are made with ```drop-list``` partial. To hide them you can use the
             <li class="form-item">
                 <label class="label">Label</label>
 
-                <div class="custom-select">
-                    <div class="select u-width-full-line">
-                        <input type="text" class="input-text" placeholder="Placeholder"></input>
-                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                <div class="custom-select is-open">
+                    <div class="input-text-wrapper" style="--amount-of-buttons:2">
+                        <input type="text" class="input-text" placeholder="Placeholder" value="bessie"></input>
+
+                        <div class="options-list">
+                            <button class="options-list-button" aria-label="clear field">
+                                <span class="icon-x" aria-hidden="true"></span>
+                            </button>
+                            <button class="options-list-button">
+                                <span class="icon-cheveron-down" aria-hidden="true"></span>
+                            </button>
+                        </div>
+
                     </div>
 
                     <div class="drop is-block-end is-no-arrow">
@@ -297,26 +322,33 @@ The options are made with ```drop-list``` partial. To hide them you can use the
                 <label class="label">Label</label>
 
                 <div class="custom-select">
-                    <div class="select u-width-full-line">
+                    <div class="input-text-wrapper">
                         <input type="text" class="input-text" placeholder="Placeholder"></input>
-                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                        <div class="options-list">
+                            <button class="options-list-button u-hide" aria-label="clear field">
+                                <span class="icon-x" aria-hidden="true"></span>
+                            </button>
+                            <button class="options-list-button">
+                                <span class="icon-cheveron-down" aria-hidden="true"></span>
+                            </button>
+                        </div>
                     </div>
 
                     <div class="drop is-block-end is-no-arrow">
                         <section class="drop-section">
 
-                            <div class="u-flex u-flex-vertical u-cross-center u-gap-16">
+                            <div class="u-flex u-flex-vertical u-cross-center">
                                 <div>
                                     <img class="u-only-light" src="/empty-state-light.svg" alt="" aria-hidden="true" height="120" width="128" />
                                     <img class="u-only-dark" src="/empty-state-dark.svg" alt="" aria-hidden="true" height="120" width="128" />
                                 </div>
-                                <div class="u-text-center">
-                                    <h2 class="body-text-2 u-trim-1 u-margin-block-start-8">
+                                <div class="u-text-center u-margin-block-start-4">
+                                    <h2 class="body-text-2 u-trim-1">
                                         <span class="text">Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’</span>
                                     </h2>
                                     <p class="text">There are no documents that match your search.</p>
                                     </div>
-                                <div class="u-flex u-gap-16 u-main-center">
+                                <div class="u-flex u-gap-16 u-main-center u-margin-block-start-16">
                                     <button class="button is-secondary" type="button">
                                         <span class="text">Clear Search</span>
                                     </button>
diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index 22b0daace5..880464d334 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -87,6 +87,9 @@ $input-text-wrapper: ".input-text-wrapper";
     }
     &:where(:not(:last-child)) { margin-inline-end:pxToRem(8); }
   }
+  &.is-no-separator {
+    &::before { display:none; }
+  }
   #{$theme-dark} & {
     --p-sep-color: var(--color-neutral-150);
     --p-button-text-color: var(--p-button-text-color-default);
@@ -271,6 +274,14 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
       --drop-border-color: var(--color-neutral-150);
     }
   }
+  .input-text-wrapper {
+    .icon-cheveron-down { display:block; transition:var(--transition); }
+  }
+  &.is-open {
+    .input-text-wrapper {
+      .icon-cheveron-down { transform:rotateZ(-180deg); }
+    }
+  }
 }
 
 [type="file"] {

From 70c2abfee522ef3781374d6073cf4f31fe588009 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 13 Mar 2023 14:13:33 +0100
Subject: [PATCH 052/167] chore: update icons, bump to 0.0.6-rc.3

---
 package-lock.json                             | 4 ++--
 packages/icons/package.json                   | 2 +-
 packages/icons/svg/academic-cap.svg           | 2 +-
 packages/icons/svg/adjustments.svg            | 2 +-
 packages/icons/svg/amazon.svg                 | 2 +-
 packages/icons/svg/android.svg                | 2 +-
 packages/icons/svg/angular.svg                | 2 +-
 packages/icons/svg/annotation.svg             | 2 +-
 packages/icons/svg/anonymous.svg              | 2 +-
 packages/icons/svg/apple.svg                  | 2 +-
 packages/icons/svg/archive.svg                | 2 +-
 packages/icons/svg/arrow-circle-down.svg      | 2 +-
 packages/icons/svg/arrow-circle-left.svg      | 2 +-
 packages/icons/svg/arrow-circle-right.svg     | 2 +-
 packages/icons/svg/arrow-circle-up.svg        | 2 +-
 packages/icons/svg/arrow-down.svg             | 2 +-
 packages/icons/svg/arrow-expand.svg           | 2 +-
 packages/icons/svg/arrow-left.svg             | 2 +-
 packages/icons/svg/arrow-narrow-down.svg      | 2 +-
 packages/icons/svg/arrow-narrow-left.svg      | 2 +-
 packages/icons/svg/arrow-narrow-right.svg     | 2 +-
 packages/icons/svg/arrow-narrow-up.svg        | 2 +-
 packages/icons/svg/arrow-right.svg            | 2 +-
 packages/icons/svg/arrow-sm-down.svg          | 2 +-
 packages/icons/svg/arrow-sm-left.svg          | 2 +-
 packages/icons/svg/arrow-sm-right.svg         | 2 +-
 packages/icons/svg/arrow-sm-up.svg            | 2 +-
 packages/icons/svg/arrow-up.svg               | 2 +-
 packages/icons/svg/at-symbol.svg              | 2 +-
 packages/icons/svg/auth0.svg                  | 2 +-
 packages/icons/svg/authentik.svg              | 1 +
 packages/icons/svg/autodesk.svg               | 1 +
 packages/icons/svg/backspace.svg              | 2 +-
 packages/icons/svg/badge-check.svg            | 2 +-
 packages/icons/svg/ban.svg                    | 2 +-
 packages/icons/svg/beaker.svg                 | 2 +-
 packages/icons/svg/behance.svg                | 2 +-
 packages/icons/svg/bell.svg                   | 2 +-
 packages/icons/svg/bitBucket.svg              | 2 +-
 packages/icons/svg/bitly.svg                  | 2 +-
 packages/icons/svg/book-open.svg              | 2 +-
 packages/icons/svg/bookmark-alt.svg           | 2 +-
 packages/icons/svg/bookmark.svg               | 2 +-
 packages/icons/svg/box.svg                    | 2 +-
 packages/icons/svg/briefcase.svg              | 2 +-
 packages/icons/svg/cake.svg                   | 2 +-
 packages/icons/svg/calculator.svg             | 2 +-
 packages/icons/svg/calendar.svg               | 2 +-
 packages/icons/svg/camera.svg                 | 2 +-
 packages/icons/svg/cash.svg                   | 2 +-
 packages/icons/svg/chart-bar.svg              | 2 +-
 packages/icons/svg/chart-pie.svg              | 2 +-
 packages/icons/svg/chart-square-bar.svg       | 2 +-
 packages/icons/svg/chat-alt-2.svg             | 2 +-
 packages/icons/svg/chat-alt.svg               | 2 +-
 packages/icons/svg/chat.svg                   | 2 +-
 packages/icons/svg/check-circle.svg           | 2 +-
 packages/icons/svg/check.svg                  | 2 +-
 packages/icons/svg/cheveron-down.svg          | 2 +-
 packages/icons/svg/cheveron-left.svg          | 2 +-
 packages/icons/svg/cheveron-right.svg         | 2 +-
 packages/icons/svg/cheveron-up.svg            | 2 +-
 packages/icons/svg/chevron-double-down.svg    | 2 +-
 packages/icons/svg/chevron-double-left.svg    | 2 +-
 packages/icons/svg/chevron-double-right.svg   | 2 +-
 packages/icons/svg/chevron-double-up.svg      | 2 +-
 packages/icons/svg/chip.svg                   | 2 +-
 packages/icons/svg/clipboard-arrow.svg        | 2 +-
 packages/icons/svg/clipboard-check.svg        | 2 +-
 packages/icons/svg/clipboard-copy.svg         | 2 +-
 packages/icons/svg/clipboard-list.svg         | 2 +-
 packages/icons/svg/clock.svg                  | 2 +-
 packages/icons/svg/cloud-download.svg         | 2 +-
 packages/icons/svg/cloud-upload.svg           | 2 +-
 packages/icons/svg/cloud.svg                  | 2 +-
 packages/icons/svg/code.svg                   | 2 +-
 packages/icons/svg/cog.svg                    | 2 +-
 packages/icons/svg/collection.svg             | 2 +-
 packages/icons/svg/color-swatch.svg           | 2 +-
 packages/icons/svg/cpp.svg                    | 1 +
 packages/icons/svg/credit-card.svg            | 2 +-
 packages/icons/svg/css3.svg                   | 2 +-
 packages/icons/svg/cube-transparent.svg       | 2 +-
 packages/icons/svg/cube.svg                   | 2 +-
 packages/icons/svg/currency-bangladesh.svg    | 2 +-
 packages/icons/svg/currency-dollar.svg        | 2 +-
 packages/icons/svg/currency-euro.svg          | 2 +-
 packages/icons/svg/currency-pound.svg         | 2 +-
 packages/icons/svg/currency-rupee.svg         | 2 +-
 packages/icons/svg/currency-yen.svg           | 2 +-
 packages/icons/svg/cursor-click.svg           | 2 +-
 packages/icons/svg/dailymotion.svg            | 1 +
 packages/icons/svg/dart.svg                   | 2 +-
 packages/icons/svg/database.svg               | 2 +-
 packages/icons/svg/deno.svg                   | 2 +-
 packages/icons/svg/desktop-computer.svg       | 2 +-
 packages/icons/svg/device-ipad.svg            | 2 +-
 packages/icons/svg/device-mobile.svg          | 2 +-
 packages/icons/svg/discord.svg                | 2 +-
 packages/icons/svg/disqus.svg                 | 1 +
 packages/icons/svg/docker.svg                 | 2 +-
 packages/icons/svg/document-add.svg           | 2 +-
 packages/icons/svg/document-download.svg      | 2 +-
 packages/icons/svg/document-duplicate.svg     | 2 +-
 packages/icons/svg/document-remove.svg        | 2 +-
 packages/icons/svg/document-report.svg        | 2 +-
 packages/icons/svg/document-search.svg        | 2 +-
 packages/icons/svg/document-text.svg          | 2 +-
 packages/icons/svg/document.svg               | 2 +-
 packages/icons/svg/dotnet.svg                 | 1 +
 packages/icons/svg/dots-circle-horizontal.svg | 2 +-
 packages/icons/svg/dots-horizontal.svg        | 2 +-
 packages/icons/svg/dots-vertical.svg          | 2 +-
 packages/icons/svg/download.svg               | 2 +-
 packages/icons/svg/dribbble.svg               | 2 +-
 packages/icons/svg/dropbox.svg                | 2 +-
 packages/icons/svg/duplicate.svg              | 2 +-
 packages/icons/svg/emoji-happy.svg            | 2 +-
 packages/icons/svg/emoji-sad.svg              | 2 +-
 packages/icons/svg/etsy.svg                   | 1 +
 packages/icons/svg/exclamation-circle.svg     | 2 +-
 packages/icons/svg/exclamation.svg            | 2 +-
 packages/icons/svg/external-link.svg          | 2 +-
 packages/icons/svg/eye-off.svg                | 2 +-
 packages/icons/svg/eye.svg                    | 2 +-
 packages/icons/svg/facebook.svg               | 2 +-
 packages/icons/svg/fast-forward.svg           | 2 +-
 packages/icons/svg/figma.svg                  | 2 +-
 packages/icons/svg/film.svg                   | 2 +-
 packages/icons/svg/filter-line.svg            | 1 +
 packages/icons/svg/filter.svg                 | 2 +-
 packages/icons/svg/finger-print.svg           | 2 +-
 packages/icons/svg/fire.svg                   | 2 +-
 packages/icons/svg/firefox.svg                | 2 +-
 packages/icons/svg/flag.svg                   | 2 +-
 packages/icons/svg/flutter.svg                | 2 +-
 packages/icons/svg/folder-add.svg             | 2 +-
 packages/icons/svg/folder-download.svg        | 2 +-
 packages/icons/svg/folder-open.svg            | 2 +-
 packages/icons/svg/folder-remove.svg          | 2 +-
 packages/icons/svg/folder.svg                 | 2 +-
 packages/icons/svg/gift.svg                   | 2 +-
 packages/icons/svg/git.svg                    | 2 +-
 packages/icons/svg/github.svg                 | 2 +-
 packages/icons/svg/gitlab.svg                 | 2 +-
 packages/icons/svg/globe-alt.svg              | 2 +-
 packages/icons/svg/globe.svg                  | 2 +-
 packages/icons/svg/google.svg                 | 2 +-
 packages/icons/svg/hand.svg                   | 2 +-
 packages/icons/svg/hashtag.svg                | 2 +-
 packages/icons/svg/heart.svg                  | 2 +-
 packages/icons/svg/home.svg                   | 2 +-
 packages/icons/svg/html5.svg                  | 2 +-
 packages/icons/svg/identification.svg         | 2 +-
 packages/icons/svg/inbox-in.svg               | 2 +-
 packages/icons/svg/inbox.svg                  | 2 +-
 packages/icons/svg/info.svg                   | 2 +-
 packages/icons/svg/instagram.svg              | 2 +-
 packages/icons/svg/ios.svg                    | 2 +-
 packages/icons/svg/java.svg                   | 2 +-
 packages/icons/svg/js.svg                     | 2 +-
 packages/icons/svg/key.svg                    | 2 +-
 packages/icons/svg/kotlin.svg                 | 2 +-
 packages/icons/svg/light-bulb.svg             | 2 +-
 packages/icons/svg/lightning-bolt.svg         | 2 +-
 packages/icons/svg/link.svg                   | 2 +-
 packages/icons/svg/linkedin.svg               | 2 +-
 packages/icons/svg/linux.svg                  | 2 +-
 packages/icons/svg/list.svg                   | 1 +
 packages/icons/svg/location-marker.svg        | 2 +-
 packages/icons/svg/lock-closed.svg            | 2 +-
 packages/icons/svg/lock-open.svg              | 2 +-
 packages/icons/svg/logout-left.svg            | 2 +-
 packages/icons/svg/logout-right.svg           | 2 +-
 packages/icons/svg/mail-open.svg              | 2 +-
 packages/icons/svg/mail.svg                   | 2 +-
 packages/icons/svg/map.svg                    | 2 +-
 packages/icons/svg/md-library.svg             | 2 +-
 packages/icons/svg/medium.svg                 | 2 +-
 packages/icons/svg/menu-alt-1.svg             | 2 +-
 packages/icons/svg/menu-alt-2.svg             | 2 +-
 packages/icons/svg/menu-alt-3.svg             | 2 +-
 packages/icons/svg/menu-alt-4.svg             | 2 +-
 packages/icons/svg/menu.svg                   | 2 +-
 packages/icons/svg/microphone.svg             | 2 +-
 packages/icons/svg/microsoft.svg              | 2 +-
 packages/icons/svg/microsoft_edge.svg         | 2 +-
 packages/icons/svg/minus-circle.svg           | 2 +-
 packages/icons/svg/minus-sm.svg               | 2 +-
 packages/icons/svg/minus.svg                  | 2 +-
 packages/icons/svg/moon.svg                   | 2 +-
 packages/icons/svg/ms_yammer.svg              | 2 +-
 packages/icons/svg/msg91.svg                  | 1 +
 packages/icons/svg/music-note.svg             | 2 +-
 packages/icons/svg/newspaper.svg              | 2 +-
 packages/icons/svg/node_js.svg                | 2 +-
 packages/icons/svg/notion.svg                 | 2 +-
 packages/icons/svg/null.svg                   | 1 +
 packages/icons/svg/office-building.svg        | 2 +-
 packages/icons/svg/okta.svg                   | 2 +-
 packages/icons/svg/opera.svg                  | 2 +-
 packages/icons/svg/paper-airplane.svg         | 2 +-
 packages/icons/svg/paper-clip.svg             | 2 +-
 packages/icons/svg/pause.svg                  | 2 +-
 packages/icons/svg/paypal.svg                 | 2 +-
 packages/icons/svg/pencil-alt.svg             | 2 +-
 packages/icons/svg/pencil.svg                 | 2 +-
 packages/icons/svg/phone-incoming.svg         | 2 +-
 packages/icons/svg/phone-missed-call.svg      | 2 +-
 packages/icons/svg/phone-outgoing.svg         | 2 +-
 packages/icons/svg/phone.svg                  | 2 +-
 packages/icons/svg/photograph.svg             | 2 +-
 packages/icons/svg/php.svg                    | 2 +-
 packages/icons/svg/pinterest.svg              | 2 +-
 packages/icons/svg/play.svg                   | 2 +-
 packages/icons/svg/plus-circle.svg            | 2 +-
 packages/icons/svg/plus-sm.svg                | 2 +-
 packages/icons/svg/plus.svg                   | 2 +-
 packages/icons/svg/podio.svg                  | 1 +
 packages/icons/svg/presentation-chart-1.svg   | 2 +-
 packages/icons/svg/presentation-chart-2.svg   | 2 +-
 packages/icons/svg/printer.svg                | 2 +-
 packages/icons/svg/product_hunt.svg           | 1 +
 packages/icons/svg/puzzle.svg                 | 2 +-
 packages/icons/svg/python.svg                 | 2 +-
 packages/icons/svg/qrcode.svg                 | 2 +-
 packages/icons/svg/question-mark-circle.svg   | 2 +-
 packages/icons/svg/react.svg                  | 2 +-
 packages/icons/svg/receipt-refund.svg         | 2 +-
 packages/icons/svg/receipt-tax.svg            | 2 +-
 packages/icons/svg/reddit.svg                 | 2 +-
 packages/icons/svg/refresh.svg                | 2 +-
 packages/icons/svg/relation.svg               | 1 +
 packages/icons/svg/relationship.svg           | 1 +
 packages/icons/svg/replay.svg                 | 2 +-
 packages/icons/svg/rewind.svg                 | 2 +-
 packages/icons/svg/rss.svg                    | 2 +-
 packages/icons/svg/ruby.svg                   | 2 +-
 packages/icons/svg/safari.svg                 | 2 +-
 packages/icons/svg/salesforce.svg             | 2 +-
 packages/icons/svg/save-as.svg                | 2 +-
 packages/icons/svg/save.svg                   | 2 +-
 packages/icons/svg/scale.svg                  | 2 +-
 packages/icons/svg/scissors.svg               | 2 +-
 packages/icons/svg/search-circle.svg          | 2 +-
 packages/icons/svg/search.svg                 | 2 +-
 packages/icons/svg/selector.svg               | 2 +-
 packages/icons/svg/server.svg                 | 2 +-
 packages/icons/svg/share.svg                  | 2 +-
 packages/icons/svg/shield-check.svg           | 2 +-
 packages/icons/svg/shield-exclamation.svg     | 2 +-
 packages/icons/svg/shopping-bag.svg           | 2 +-
 packages/icons/svg/shopping-cart.svg          | 2 +-
 packages/icons/svg/skype.svg                  | 2 +-
 packages/icons/svg/slack.svg                  | 2 +-
 packages/icons/svg/sort-ascending.svg         | 2 +-
 packages/icons/svg/sort-descending.svg        | 2 +-
 packages/icons/svg/sparkles.svg               | 2 +-
 packages/icons/svg/speakerphone.svg           | 2 +-
 packages/icons/svg/spotify.svg                | 2 +-
 packages/icons/svg/star.svg                   | 2 +-
 packages/icons/svg/status-offline.svg         | 2 +-
 packages/icons/svg/status-online.svg          | 2 +-
 packages/icons/svg/stop.svg                   | 2 +-
 packages/icons/svg/stripe.svg                 | 2 +-
 packages/icons/svg/sun.svg                    | 2 +-
 packages/icons/svg/support.svg                | 2 +-
 packages/icons/svg/swift.svg                  | 2 +-
 packages/icons/svg/switch-horizontal.svg      | 2 +-
 packages/icons/svg/switch-vertical.svg        | 2 +-
 packages/icons/svg/table.svg                  | 2 +-
 packages/icons/svg/tag.svg                    | 2 +-
 packages/icons/svg/telegram.svg               | 2 +-
 packages/icons/svg/telesign.svg               | 1 +
 packages/icons/svg/template.svg               | 2 +-
 packages/icons/svg/terminal.svg               | 2 +-
 packages/icons/svg/text.svg                   | 1 +
 packages/icons/svg/textmagic.svg              | 1 +
 packages/icons/svg/thumb-dowm.svg             | 2 +-
 packages/icons/svg/thumb-up.svg               | 2 +-
 packages/icons/svg/ticket.svg                 | 2 +-
 packages/icons/svg/tiktok.svg                 | 2 +-
 packages/icons/svg/toggle.svg                 | 1 +
 packages/icons/svg/tradeshift.svg             | 2 +-
 packages/icons/svg/translate.svg              | 2 +-
 packages/icons/svg/trash.svg                  | 2 +-
 packages/icons/svg/trending-down.svg          | 2 +-
 packages/icons/svg/trending-up.svg            | 2 +-
 packages/icons/svg/truck.svg                  | 2 +-
 packages/icons/svg/tumbir.svg                 | 2 +-
 packages/icons/svg/twilio.svg                 | 1 +
 packages/icons/svg/twitch.svg                 | 2 +-
 packages/icons/svg/twitter.svg                | 2 +-
 packages/icons/svg/unity.svg                  | 2 +-
 packages/icons/svg/upload.svg                 | 2 +-
 packages/icons/svg/user-add.svg               | 2 +-
 packages/icons/svg/user-circle.svg            | 2 +-
 packages/icons/svg/user-group.svg             | 2 +-
 packages/icons/svg/user-remove.svg            | 2 +-
 packages/icons/svg/user.svg                   | 2 +-
 packages/icons/svg/users.svg                  | 2 +-
 packages/icons/svg/variable.svg               | 2 +-
 packages/icons/svg/video-camera.svg           | 2 +-
 packages/icons/svg/view-boards.svg            | 2 +-
 packages/icons/svg/view-grid-add.svg          | 2 +-
 packages/icons/svg/view-grid.svg              | 2 +-
 packages/icons/svg/view-list.svg              | 2 +-
 packages/icons/svg/vimeo.svg                  | 2 +-
 packages/icons/svg/vk.svg                     | 2 +-
 packages/icons/svg/volume-off.svg             | 2 +-
 packages/icons/svg/volume-up.svg              | 2 +-
 packages/icons/svg/vonage.svg                 | 1 +
 packages/icons/svg/vs_code.svg                | 2 +-
 packages/icons/svg/vue.svg                    | 2 +-
 packages/icons/svg/whatsapp.svg               | 2 +-
 packages/icons/svg/wifi.svg                   | 2 +-
 packages/icons/svg/wordpress.svg              | 2 +-
 packages/icons/svg/x-circle.svg               | 2 +-
 packages/icons/svg/x.svg                      | 2 +-
 packages/icons/svg/yahoo.svg                  | 2 +-
 packages/icons/svg/yandex.svg                 | 2 +-
 packages/icons/svg/ycombinator.svg            | 2 +-
 packages/icons/svg/youtube.svg                | 2 +-
 packages/icons/svg/zoom-in.svg                | 2 +-
 packages/icons/svg/zoom-out.svg               | 2 +-
 packages/icons/svg/zoom.svg                   | 2 +-
 packages/ui/package.json                      | 2 +-
 327 files changed, 328 insertions(+), 307 deletions(-)
 create mode 100644 packages/icons/svg/authentik.svg
 create mode 100644 packages/icons/svg/autodesk.svg
 create mode 100644 packages/icons/svg/cpp.svg
 create mode 100644 packages/icons/svg/dailymotion.svg
 create mode 100644 packages/icons/svg/disqus.svg
 create mode 100644 packages/icons/svg/dotnet.svg
 create mode 100644 packages/icons/svg/etsy.svg
 create mode 100644 packages/icons/svg/filter-line.svg
 create mode 100644 packages/icons/svg/list.svg
 create mode 100644 packages/icons/svg/msg91.svg
 create mode 100644 packages/icons/svg/null.svg
 create mode 100644 packages/icons/svg/podio.svg
 create mode 100644 packages/icons/svg/product_hunt.svg
 create mode 100644 packages/icons/svg/relation.svg
 create mode 100644 packages/icons/svg/relationship.svg
 create mode 100644 packages/icons/svg/telesign.svg
 create mode 100644 packages/icons/svg/text.svg
 create mode 100644 packages/icons/svg/textmagic.svg
 create mode 100644 packages/icons/svg/toggle.svg
 create mode 100644 packages/icons/svg/twilio.svg
 create mode 100644 packages/icons/svg/vonage.svg

diff --git a/package-lock.json b/package-lock.json
index 6b4ff75637..01b6ac5e81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.2",
+      "version": "0.0.6-rc.3",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.2",
+      "version": "0.0.6-rc.3",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 0143f520d2..ce9c05ce65 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.2",
+  "version": "0.0.6-rc.3",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/icons/svg/academic-cap.svg b/packages/icons/svg/academic-cap.svg
index bd6b03572b..5310586474 100644
--- a/packages/icons/svg/academic-cap.svg
+++ b/packages/icons/svg/academic-cap.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.620 2.516 C 11.203 2.626,4.938 5.321,3.615 5.959 C 2.626 6.435,2.458 6.634,2.486 7.293 C 2.505 7.749,2.608 7.902,3.082 8.176 C 3.495 8.414,4.528 8.903,5.517 9.327 L 6.254 9.643 7.077 9.265 C 7.976 8.852,9.209 8.303,10.699 7.652 L 11.658 7.233 11.979 7.280 C 12.360 7.335,12.611 7.437,12.793 7.612 C 13.024 7.833,13.057 7.933,13.058 8.420 C 13.061 9.084,13.003 9.151,11.960 9.677 C 11.663 9.827,10.985 10.151,10.453 10.398 C 9.921 10.645,9.453 10.871,9.413 10.901 C 9.347 10.949,9.371 10.969,9.660 11.102 C 10.148 11.326,11.304 11.781,11.636 11.880 C 12.026 11.995,12.146 11.975,12.940 11.662 C 14.834 10.915,19.655 8.837,20.575 8.370 C 21.376 7.964,21.520 7.782,21.519 7.180 C 21.518 6.708,21.361 6.481,20.832 6.186 C 19.949 5.692,13.010 2.716,12.400 2.569 C 12.137 2.505,11.758 2.479,11.620 2.516 M3.959 11.424 C 3.900 11.579,3.732 12.521,3.678 13.000 C 3.652 13.231,3.631 13.870,3.631 14.420 C 3.631 15.310,3.641 15.455,3.716 15.737 C 3.874 16.332,4.126 16.616,4.638 16.777 C 4.958 16.877,5.609 17.000,5.821 17.000 L 5.948 17.000 5.974 16.514 C 6.008 15.886,6.008 13.002,5.974 12.528 L 5.948 12.164 5.444 11.936 C 4.871 11.678,4.042 11.320,4.015 11.320 C 4.006 11.320,3.980 11.367,3.959 11.424 M19.551 11.522 C 19.424 11.565,18.740 11.846,18.031 12.145 C 15.338 13.281,13.683 13.974,13.209 14.164 C 12.660 14.383,12.570 14.393,11.680 14.321 C 11.164 14.280,10.990 14.227,9.580 13.689 C 9.118 13.513,8.682 13.356,8.610 13.341 C 8.495 13.317,8.476 13.326,8.440 13.419 C 8.415 13.486,8.400 14.346,8.400 15.720 L 8.400 17.914 8.650 18.064 C 9.118 18.345,9.853 18.849,10.577 19.386 C 11.453 20.034,11.684 20.160,12.002 20.160 C 12.280 20.160,12.492 20.058,13.043 19.658 C 14.495 18.605,15.141 18.195,15.964 17.805 C 16.602 17.503,16.885 17.409,18.100 17.095 C 19.439 16.749,19.599 16.700,19.799 16.565 C 19.993 16.435,20.182 16.176,20.238 15.964 C 20.350 15.541,20.387 14.324,20.319 13.300 C 20.247 12.218,20.151 11.704,19.990 11.530 C 19.889 11.421,19.845 11.420,19.551 11.522 M6.048 17.168 C 6.012 17.204,6.000 17.662,6.000 18.983 L 6.000 20.750 6.159 20.949 C 6.406 21.259,6.742 21.483,7.046 21.540 C 7.334 21.594,7.806 21.390,8.086 21.091 C 8.229 20.938,8.281 20.845,8.317 20.677 C 8.343 20.555,8.374 19.904,8.388 19.196 L 8.413 17.931 7.876 17.720 C 7.377 17.523,6.202 17.120,6.129 17.120 C 6.111 17.120,6.074 17.142,6.048 17.168 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.100 2.715 C 9.690 3.285,5.861 4.936,4.280 5.656 C 2.760 6.349,2.528 6.532,2.490 7.076 C 2.461 7.471,2.535 7.735,2.723 7.918 C 2.962 8.150,3.967 8.657,5.500 9.319 L 6.251 9.643 7.451 9.097 C 8.112 8.797,9.329 8.255,10.156 7.892 L 11.660 7.233 11.960 7.279 C 12.303 7.333,12.648 7.475,12.815 7.632 C 12.998 7.804,13.040 7.952,13.040 8.423 C 13.040 8.957,12.984 9.075,12.613 9.319 C 12.365 9.481,11.379 9.971,10.030 10.600 C 9.684 10.762,9.400 10.916,9.400 10.941 C 9.400 10.992,9.841 11.195,10.640 11.512 C 11.854 11.993,11.986 12.013,12.564 11.806 C 13.279 11.549,16.294 10.281,18.636 9.252 C 20.795 8.304,21.217 8.075,21.403 7.749 C 21.486 7.605,21.500 7.528,21.500 7.220 C 21.500 6.480,21.393 6.400,18.900 5.291 C 16.324 4.145,12.851 2.694,12.406 2.578 C 12.283 2.546,12.047 2.520,11.882 2.520 C 11.614 2.521,11.526 2.543,11.100 2.715 M3.959 11.424 C 3.902 11.574,3.734 12.512,3.680 12.980 C 3.652 13.226,3.640 13.811,3.650 14.500 C 3.664 15.536,3.672 15.639,3.755 15.881 C 3.878 16.233,4.074 16.492,4.329 16.638 C 4.564 16.772,5.262 16.953,5.678 16.988 L 5.947 17.011 5.973 16.615 C 6.007 16.106,6.008 12.866,5.974 12.469 L 5.949 12.166 5.664 12.037 C 5.142 11.801,4.038 11.320,4.018 11.320 C 4.007 11.320,3.980 11.367,3.959 11.424 M19.580 11.516 C 19.245 11.639,18.602 11.905,16.100 12.958 C 14.780 13.514,13.493 14.052,13.240 14.154 L 12.780 14.340 12.160 14.335 C 11.371 14.329,11.156 14.278,9.833 13.786 C 8.532 13.302,8.524 13.300,8.466 13.358 C 8.433 13.391,8.417 14.017,8.408 15.656 L 8.396 17.909 8.853 18.194 C 9.104 18.351,9.641 18.716,10.045 19.007 C 11.580 20.108,11.707 20.181,12.054 20.152 C 12.333 20.129,12.512 20.033,13.240 19.514 C 14.630 18.524,15.311 18.104,16.116 17.739 C 16.675 17.486,16.949 17.398,18.165 17.080 C 19.572 16.713,19.699 16.666,19.943 16.422 C 20.081 16.284,20.169 16.153,20.213 16.019 C 20.321 15.691,20.373 14.899,20.346 13.980 C 20.300 12.404,20.165 11.611,19.922 11.481 C 19.824 11.428,19.818 11.429,19.580 11.516 M6.040 17.219 C 6.016 17.284,6.000 17.987,6.000 19.037 L 6.000 20.750 6.162 20.953 C 6.348 21.187,6.734 21.459,6.970 21.523 C 7.165 21.575,7.351 21.545,7.621 21.417 C 7.891 21.290,8.144 21.067,8.245 20.870 C 8.343 20.677,8.396 19.929,8.398 18.693 L 8.400 17.926 7.970 17.758 C 7.421 17.543,6.379 17.178,6.210 17.142 C 6.095 17.117,6.076 17.125,6.040 17.219 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/adjustments.svg b/packages/icons/svg/adjustments.svg
index 523fcde387..4770d39958 100644
--- a/packages/icons/svg/adjustments.svg
+++ b/packages/icons/svg/adjustments.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.880 3.734 C 18.622 3.804,18.339 4.013,18.214 4.227 C 18.120 4.388,18.102 4.473,18.073 4.915 C 18.055 5.193,18.029 7.229,18.015 9.440 L 17.989 13.460 17.749 13.717 C 17.010 14.509,16.772 15.083,16.876 15.823 C 16.965 16.458,17.164 16.845,17.709 17.440 L 17.947 17.700 17.975 18.310 C 18.006 19.021,18.078 19.481,18.192 19.705 C 18.290 19.897,18.594 20.185,18.781 20.263 C 18.990 20.350,19.460 20.337,19.663 20.238 C 19.862 20.142,20.181 19.814,20.260 19.625 C 20.334 19.448,20.396 18.945,20.427 18.260 L 20.452 17.700 20.653 17.480 C 21.172 16.911,21.450 16.411,21.523 15.916 C 21.629 15.198,21.363 14.501,20.708 13.779 L 20.489 13.537 20.444 10.219 C 20.420 8.393,20.400 6.362,20.400 5.705 L 20.400 4.511 20.257 4.316 C 19.862 3.778,19.416 3.589,18.880 3.734 M4.214 3.839 C 3.952 3.989,3.719 4.270,3.675 4.491 C 3.656 4.584,3.629 6.640,3.615 9.060 L 3.589 13.460 3.343 13.720 C 2.810 14.283,2.616 14.611,2.496 15.154 C 2.412 15.531,2.442 15.902,2.594 16.341 C 2.729 16.733,2.903 17.002,3.292 17.421 L 3.588 17.740 3.612 18.500 C 3.644 19.509,3.683 19.660,3.985 19.965 C 4.261 20.243,4.479 20.341,4.820 20.337 C 5.222 20.332,5.600 20.112,5.769 19.785 C 5.917 19.497,5.965 19.207,5.987 18.460 L 6.008 17.740 6.199 17.540 C 6.726 16.987,6.988 16.542,7.125 15.969 C 7.199 15.662,7.203 15.589,7.162 15.363 C 7.052 14.757,6.798 14.297,6.263 13.729 L 6.000 13.450 6.000 8.929 L 6.000 4.409 5.663 4.090 C 5.290 3.736,5.249 3.720,4.745 3.720 C 4.458 3.721,4.396 3.735,4.214 3.839 M11.500 3.786 C 11.338 3.871,11.088 4.113,11.010 4.260 C 10.883 4.498,10.834 4.823,10.812 5.560 L 10.791 6.300 10.504 6.600 C 9.813 7.322,9.646 7.718,9.691 8.532 C 9.704 8.756,9.743 9.032,9.777 9.145 C 9.857 9.404,10.158 9.864,10.470 10.201 L 10.711 10.462 10.756 14.661 C 10.802 18.980,10.813 19.401,10.883 19.590 C 10.939 19.739,11.389 20.195,11.549 20.264 C 11.743 20.348,12.262 20.335,12.468 20.242 C 12.696 20.139,12.970 19.856,13.032 19.660 C 13.060 19.572,13.099 19.293,13.120 19.040 C 13.173 18.389,13.240 14.704,13.240 12.433 L 13.240 10.513 13.481 10.246 C 13.918 9.763,14.236 9.231,14.316 8.848 C 14.474 8.090,14.172 7.283,13.438 6.500 L 13.250 6.300 13.222 5.691 C 13.192 5.037,13.157 4.723,13.081 4.444 C 13.018 4.211,12.650 3.838,12.415 3.768 C 12.178 3.699,11.647 3.709,11.500 3.786 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.949 3.724 C 18.574 3.812,18.234 4.103,18.135 4.420 C 18.060 4.661,18.006 7.378,18.002 11.114 L 18.000 13.447 17.717 13.754 C 16.996 14.534,16.748 15.185,16.894 15.920 C 17.013 16.524,17.183 16.845,17.679 17.400 L 17.947 17.700 17.975 18.300 C 18.026 19.382,18.132 19.744,18.494 20.061 C 18.740 20.277,18.928 20.335,19.291 20.310 C 19.622 20.286,19.859 20.154,20.101 19.856 C 20.226 19.703,20.278 19.594,20.313 19.416 C 20.375 19.096,20.440 18.367,20.440 17.997 C 20.440 17.722,20.450 17.685,20.545 17.597 C 20.692 17.460,21.128 16.894,21.251 16.680 C 21.616 16.043,21.633 15.348,21.302 14.651 C 21.147 14.324,21.046 14.177,20.716 13.798 L 20.488 13.536 20.437 9.009 L 20.385 4.481 20.212 4.260 C 19.997 3.986,19.768 3.817,19.506 3.740 C 19.284 3.674,19.174 3.671,18.949 3.724 M4.282 3.808 C 4.075 3.911,3.835 4.138,3.734 4.328 C 3.671 4.446,3.661 4.655,3.635 6.300 C 3.620 7.312,3.606 9.334,3.604 10.794 L 3.600 13.447 3.297 13.774 C 2.758 14.353,2.556 14.733,2.469 15.326 C 2.432 15.582,2.435 15.684,2.489 15.927 C 2.625 16.553,2.818 16.905,3.317 17.446 L 3.600 17.753 3.601 18.226 C 3.603 18.913,3.664 19.461,3.762 19.663 C 3.939 20.030,4.377 20.322,4.756 20.328 C 5.263 20.335,5.667 20.072,5.834 19.627 C 5.929 19.373,6.000 18.740,6.000 18.145 L 6.000 17.750 6.240 17.494 C 6.746 16.953,7.045 16.407,7.161 15.813 C 7.202 15.604,7.199 15.520,7.143 15.267 C 7.021 14.720,6.631 14.070,6.144 13.602 L 6.000 13.464 6.000 8.936 L 6.000 4.407 5.673 4.104 C 5.306 3.762,5.207 3.721,4.760 3.720 C 4.531 3.720,4.418 3.741,4.282 3.808 M11.611 3.756 C 11.347 3.824,11.052 4.124,10.942 4.434 C 10.864 4.654,10.800 5.296,10.800 5.850 L 10.800 6.291 10.519 6.586 C 10.144 6.982,9.904 7.314,9.794 7.591 C 9.716 7.789,9.704 7.893,9.704 8.360 C 9.704 8.749,9.722 8.961,9.770 9.120 C 9.849 9.382,10.133 9.819,10.466 10.191 L 10.706 10.460 10.756 14.720 C 10.783 17.063,10.820 19.120,10.837 19.292 C 10.867 19.575,10.884 19.620,11.027 19.789 C 11.114 19.891,11.269 20.046,11.371 20.133 C 11.539 20.276,11.583 20.292,11.834 20.310 C 12.250 20.340,12.481 20.270,12.737 20.036 C 12.855 19.928,12.980 19.769,13.014 19.683 C 13.049 19.597,13.096 19.295,13.118 19.013 C 13.178 18.281,13.239 15.015,13.240 12.588 L 13.240 10.517 13.503 10.215 C 13.834 9.836,14.130 9.383,14.242 9.088 C 14.531 8.321,14.245 7.377,13.466 6.533 L 13.252 6.300 13.223 5.681 C 13.192 4.990,13.122 4.517,13.022 4.324 C 12.937 4.159,12.681 3.903,12.515 3.817 C 12.367 3.741,11.815 3.704,11.611 3.756 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/amazon.svg b/packages/icons/svg/amazon.svg
index 41200a93c0..ea6e117dac 100644
--- a/packages/icons/svg/amazon.svg
+++ b/packages/icons/svg/amazon.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.920 3.024 C 9.871 3.147,9.314 3.299,8.622 3.647 C 8.194 3.862,8.000 4.001,7.626 4.358 C 7.018 4.938,6.630 5.642,6.440 6.510 C 6.361 6.873,6.370 6.974,6.493 7.111 C 6.609 7.239,6.730 7.264,7.915 7.402 C 9.082 7.539,9.149 7.534,9.265 7.310 C 9.299 7.244,9.353 7.091,9.385 6.969 C 9.575 6.238,10.122 5.753,10.893 5.633 C 11.620 5.520,12.259 5.796,12.548 6.347 C 12.731 6.695,12.773 6.942,12.777 7.679 L 12.780 8.339 12.320 8.388 C 9.698 8.670,8.713 8.932,7.731 9.609 C 7.421 9.823,6.974 10.269,6.764 10.574 C 6.471 10.999,6.223 11.606,6.096 12.208 C 6.007 12.623,5.996 13.645,6.075 14.080 C 6.296 15.305,6.886 16.164,7.820 16.624 C 8.471 16.944,9.210 17.056,10.088 16.966 C 11.194 16.852,11.910 16.506,12.800 15.652 C 13.043 15.420,13.248 15.236,13.255 15.245 C 13.262 15.253,13.391 15.449,13.542 15.680 C 13.879 16.196,14.469 16.822,14.677 16.884 C 14.789 16.917,14.852 16.915,14.948 16.874 C 15.130 16.796,16.954 15.097,16.984 14.978 C 17.025 14.814,16.968 14.680,16.642 14.180 C 16.471 13.916,16.291 13.610,16.243 13.500 C 16.025 13.003,16.029 13.064,15.999 9.580 C 15.969 6.110,15.972 6.148,15.757 5.480 C 15.361 4.248,14.302 3.434,12.682 3.117 C 12.276 3.038,11.258 2.984,10.920 3.024 M12.799 10.850 C 12.799 11.556,12.740 12.294,12.656 12.639 C 12.622 12.782,12.504 13.086,12.394 13.314 C 12.155 13.810,11.810 14.187,11.420 14.377 C 11.111 14.528,10.580 14.569,10.302 14.463 C 9.913 14.314,9.635 14.015,9.471 13.569 C 9.401 13.379,9.386 13.244,9.383 12.780 C 9.380 12.149,9.417 11.965,9.631 11.549 C 10.039 10.758,11.057 10.318,12.550 10.285 L 12.800 10.280 12.799 10.850 M18.240 17.040 C 17.859 17.093,17.349 17.270,17.084 17.441 C 16.843 17.596,16.785 17.671,16.840 17.759 C 16.866 17.802,16.954 17.802,17.326 17.760 C 17.929 17.693,18.738 17.690,18.930 17.755 C 19.012 17.783,19.107 17.845,19.140 17.892 C 19.278 18.089,19.167 18.701,18.817 19.665 C 18.717 19.942,18.644 20.194,18.656 20.224 C 18.741 20.447,19.240 19.921,19.571 19.259 C 19.942 18.518,20.124 17.379,19.898 17.213 C 19.677 17.052,18.812 16.962,18.240 17.040 M3.019 17.402 C 2.959 17.499,3.056 17.641,3.369 17.916 C 4.229 18.671,5.095 19.249,6.100 19.741 C 7.740 20.544,9.276 20.927,11.100 20.987 C 13.056 21.052,15.040 20.619,16.820 19.739 C 17.583 19.362,18.390 18.837,18.474 18.663 C 18.523 18.563,18.520 18.539,18.450 18.445 C 18.407 18.387,18.333 18.334,18.285 18.327 C 18.238 18.320,17.952 18.413,17.649 18.533 C 16.230 19.096,14.890 19.438,13.360 19.626 C 12.552 19.726,10.736 19.725,9.920 19.626 C 7.587 19.340,5.434 18.645,3.594 17.583 C 3.214 17.364,3.070 17.319,3.019 17.402 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.760 3.045 C 8.486 3.306,6.995 4.440,6.501 6.284 C 6.312 6.989,6.375 7.160,6.860 7.258 C 7.272 7.341,8.508 7.480,8.836 7.480 C 9.195 7.480,9.236 7.441,9.385 6.975 C 9.578 6.371,9.854 6.040,10.366 5.801 C 11.236 5.396,12.225 5.674,12.580 6.423 C 12.727 6.734,12.760 6.969,12.760 7.699 L 12.760 8.346 12.130 8.415 C 11.258 8.509,10.469 8.625,9.886 8.744 C 7.751 9.181,6.507 10.318,6.097 12.206 C 5.998 12.659,6.006 13.792,6.112 14.262 C 6.339 15.276,6.866 16.065,7.617 16.516 C 8.267 16.906,9.224 17.073,10.161 16.959 C 11.243 16.827,11.863 16.515,12.855 15.601 L 13.249 15.238 13.541 15.669 C 13.898 16.195,14.371 16.712,14.614 16.841 C 14.787 16.933,14.801 16.934,14.927 16.873 C 15.218 16.732,17.000 15.046,17.000 14.912 C 17.000 14.789,16.897 14.580,16.617 14.134 C 16.256 13.558,16.130 13.274,16.080 12.921 C 16.056 12.754,16.021 11.249,16.000 9.521 C 15.978 7.757,15.943 6.296,15.919 6.132 C 15.832 5.546,15.546 4.877,15.209 4.474 C 14.499 3.624,13.385 3.142,11.900 3.042 C 11.228 2.996,11.181 2.996,10.760 3.045 M12.800 10.772 C 12.800 11.403,12.732 12.267,12.656 12.598 C 12.527 13.165,12.070 13.930,11.705 14.192 C 11.357 14.442,11.182 14.498,10.740 14.499 C 10.398 14.500,10.315 14.487,10.168 14.408 C 9.920 14.276,9.686 14.018,9.544 13.720 C 9.424 13.467,9.420 13.441,9.407 12.814 C 9.396 12.215,9.402 12.147,9.491 11.890 C 9.617 11.527,9.844 11.191,10.097 10.990 C 10.637 10.561,11.521 10.307,12.550 10.285 L 12.800 10.280 12.800 10.772 M18.300 17.042 C 17.799 17.098,17.156 17.345,16.905 17.579 C 16.802 17.675,16.796 17.693,16.849 17.747 C 16.901 17.799,16.970 17.801,17.342 17.763 C 17.806 17.717,18.676 17.705,18.866 17.743 C 19.299 17.830,19.297 18.233,18.854 19.555 C 18.619 20.258,18.616 20.360,18.831 20.233 C 18.993 20.137,19.332 19.703,19.513 19.361 C 19.873 18.677,20.100 17.622,19.954 17.303 C 19.895 17.172,19.653 17.093,19.160 17.041 C 18.740 16.997,18.702 16.997,18.300 17.042 M3.020 17.400 C 2.970 17.481,3.048 17.598,3.332 17.867 C 4.139 18.633,5.334 19.407,6.541 19.944 C 9.559 21.288,12.875 21.347,15.980 20.112 C 17.004 19.704,18.207 19.004,18.453 18.672 C 18.527 18.571,18.528 18.558,18.467 18.465 C 18.364 18.308,18.278 18.307,17.855 18.462 C 17.638 18.541,17.265 18.677,17.027 18.764 C 15.625 19.273,14.018 19.604,12.562 19.684 C 10.912 19.774,9.431 19.635,7.808 19.239 C 6.344 18.882,5.058 18.386,3.758 17.677 C 3.184 17.364,3.069 17.321,3.020 17.400 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/android.svg b/packages/icons/svg/android.svg
index 0903731c7e..4dae59b0b4 100644
--- a/packages/icons/svg/android.svg
+++ b/packages/icons/svg/android.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.640 2.080 C 8.596 2.124,8.560 2.190,8.560 2.226 C 8.560 2.262,8.713 2.578,8.900 2.927 C 9.087 3.276,9.240 3.568,9.240 3.575 C 9.240 3.583,9.119 3.679,8.970 3.790 C 8.593 4.071,8.060 4.637,7.789 5.045 C 7.290 5.795,6.998 6.655,6.934 7.561 L 6.908 7.920 12.000 7.920 L 17.092 7.920 17.066 7.561 C 17.002 6.655,16.710 5.795,16.211 5.045 C 15.940 4.637,15.407 4.071,15.030 3.790 C 14.882 3.679,14.760 3.583,14.760 3.576 C 14.760 3.568,14.915 3.274,15.104 2.921 C 15.475 2.231,15.498 2.123,15.299 2.032 C 15.117 1.949,15.040 2.032,14.686 2.695 C 14.503 3.039,14.341 3.320,14.328 3.320 C 14.314 3.320,14.159 3.258,13.982 3.182 C 12.688 2.629,11.312 2.629,10.018 3.182 C 9.841 3.258,9.685 3.320,9.672 3.320 C 9.658 3.320,9.506 3.055,9.333 2.730 C 9.161 2.406,8.989 2.109,8.950 2.070 C 8.858 1.978,8.739 1.981,8.640 2.080 M9.997 5.263 C 10.351 5.405,10.413 5.847,10.114 6.099 C 9.782 6.378,9.256 6.055,9.337 5.622 C 9.366 5.465,9.556 5.254,9.690 5.228 C 9.740 5.219,9.793 5.208,9.809 5.205 C 9.825 5.202,9.910 5.229,9.997 5.263 M14.466 5.308 C 14.566 5.373,14.680 5.592,14.680 5.718 C 14.680 5.765,14.653 5.855,14.621 5.918 C 14.412 6.322,13.860 6.285,13.720 5.859 C 13.575 5.422,14.076 5.052,14.466 5.308 M4.692 8.319 C 4.415 8.459,4.229 8.648,4.104 8.918 C 4.021 9.098,4.020 9.138,4.020 11.880 L 4.020 14.660 4.110 14.841 C 4.330 15.283,4.665 15.518,5.121 15.551 C 5.514 15.579,5.761 15.486,6.043 15.204 C 6.418 14.827,6.400 14.999,6.400 11.874 C 6.400 9.266,6.397 9.155,6.320 8.950 C 6.234 8.718,5.958 8.419,5.720 8.297 C 5.633 8.253,5.459 8.220,5.260 8.210 C 4.964 8.195,4.921 8.203,4.692 8.319 M18.440 8.237 C 18.252 8.295,18.100 8.393,17.934 8.567 C 17.596 8.920,17.621 8.673,17.609 11.796 C 17.596 15.003,17.578 14.824,17.957 15.203 C 18.240 15.486,18.486 15.579,18.879 15.551 C 19.335 15.518,19.638 15.309,19.872 14.864 L 19.980 14.660 19.980 11.880 C 19.980 9.138,19.979 9.098,19.896 8.918 C 19.771 8.649,19.585 8.459,19.311 8.322 C 19.109 8.221,19.022 8.201,18.804 8.203 C 18.659 8.205,18.495 8.221,18.440 8.237 M6.929 12.330 L 6.940 16.220 7.047 16.448 C 7.308 17.004,7.862 17.320,8.580 17.320 L 8.836 17.320 8.848 18.690 C 8.860 20.035,8.862 20.064,8.955 20.271 C 9.146 20.692,9.612 21.000,10.060 21.000 C 10.508 21.000,10.974 20.692,11.165 20.271 C 11.258 20.064,11.260 20.035,11.272 18.690 L 11.284 17.320 12.000 17.320 L 12.716 17.320 12.728 18.690 C 12.740 20.035,12.742 20.064,12.835 20.271 C 13.026 20.692,13.492 21.000,13.940 21.000 C 14.388 21.000,14.854 20.692,15.045 20.271 C 15.138 20.064,15.140 20.035,15.152 18.690 L 15.164 17.320 15.420 17.320 C 16.138 17.320,16.692 17.004,16.953 16.448 L 17.060 16.220 17.071 12.330 L 17.082 8.440 12.000 8.440 L 6.918 8.440 6.929 12.330 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.642 2.098 C 8.552 2.194,8.551 2.200,8.615 2.360 C 8.651 2.450,8.807 2.761,8.962 3.052 L 9.243 3.580 9.152 3.652 C 8.526 4.147,8.091 4.594,7.781 5.061 C 7.307 5.775,7.003 6.673,6.936 7.553 L 6.909 7.920 11.994 7.920 L 17.080 7.920 17.080 7.755 C 17.080 7.435,16.952 6.735,16.818 6.320 C 16.469 5.244,15.919 4.498,14.848 3.652 L 14.757 3.580 15.043 3.043 C 15.200 2.748,15.353 2.436,15.384 2.350 C 15.446 2.173,15.411 2.062,15.282 2.020 C 15.112 1.967,15.014 2.086,14.580 2.880 C 14.454 3.111,14.347 3.305,14.341 3.311 C 14.336 3.317,14.126 3.242,13.876 3.144 C 13.208 2.882,12.709 2.788,12.000 2.788 C 11.291 2.788,10.792 2.882,10.124 3.144 C 9.874 3.242,9.664 3.317,9.659 3.311 C 9.654 3.305,9.510 3.048,9.341 2.740 C 8.915 1.967,8.835 1.893,8.642 2.098 M9.975 5.255 C 10.357 5.415,10.395 5.957,10.036 6.142 C 9.676 6.328,9.241 5.982,9.355 5.600 C 9.418 5.392,9.597 5.236,9.811 5.205 C 9.828 5.202,9.902 5.225,9.975 5.255 M14.415 5.285 C 14.470 5.310,14.556 5.408,14.606 5.504 C 14.694 5.668,14.695 5.686,14.639 5.847 C 14.536 6.143,14.227 6.278,13.964 6.142 C 13.801 6.058,13.720 5.910,13.720 5.697 C 13.720 5.540,13.740 5.492,13.856 5.376 C 13.966 5.266,14.023 5.240,14.154 5.240 C 14.243 5.240,14.361 5.260,14.415 5.285 M4.723 8.304 C 4.450 8.443,4.217 8.674,4.107 8.914 C 4.024 9.097,4.022 9.150,4.007 11.851 L 3.992 14.603 4.105 14.825 C 4.248 15.109,4.477 15.345,4.714 15.453 C 4.967 15.569,5.472 15.574,5.696 15.463 C 5.944 15.340,6.265 15.000,6.327 14.797 C 6.369 14.657,6.380 14.042,6.380 11.840 L 6.380 9.060 6.288 8.888 C 6.053 8.447,5.761 8.257,5.260 8.218 C 4.964 8.195,4.924 8.202,4.723 8.304 M18.386 8.263 C 18.120 8.348,17.747 8.712,17.674 8.960 C 17.596 9.223,17.595 14.537,17.673 14.800 C 17.734 15.004,18.052 15.337,18.308 15.464 C 18.527 15.573,19.035 15.568,19.283 15.454 C 19.521 15.346,19.739 15.118,19.888 14.823 L 20.008 14.586 19.993 11.843 C 19.977 9.153,19.975 9.096,19.893 8.914 C 19.644 8.368,18.972 8.077,18.386 8.263 M6.920 12.314 L 6.920 16.187 7.042 16.432 C 7.324 16.995,7.888 17.320,8.584 17.320 L 8.832 17.320 8.846 18.690 L 8.860 20.060 8.971 20.286 C 9.187 20.726,9.584 20.978,10.060 20.978 C 10.536 20.978,10.933 20.726,11.149 20.286 L 11.260 20.060 11.274 18.690 L 11.288 17.320 12.000 17.320 L 12.712 17.320 12.726 18.690 L 12.740 20.060 12.851 20.286 C 13.067 20.726,13.464 20.978,13.940 20.978 C 14.416 20.978,14.813 20.726,15.029 20.286 L 15.140 20.060 15.154 18.690 L 15.168 17.320 15.416 17.320 C 15.690 17.320,16.056 17.237,16.300 17.120 C 16.532 17.008,16.822 16.704,16.960 16.428 L 17.080 16.187 17.080 12.314 L 17.080 8.440 12.000 8.440 L 6.920 8.440 6.920 12.314 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/angular.svg b/packages/icons/svg/angular.svg
index 7448bb16c8..010fcbd3fc 100644
--- a/packages/icons/svg/angular.svg
+++ b/packages/icons/svg/angular.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.285 4.616 C 4.989 5.502,3.085 6.243,3.054 6.263 C 3.008 6.294,3.105 7.202,3.650 11.840 L 4.302 17.380 7.761 19.268 C 9.664 20.307,11.283 21.191,11.360 21.234 L 11.500 21.312 15.099 19.346 L 18.698 17.380 19.349 11.842 C 19.707 8.796,19.986 6.291,19.970 6.274 C 19.938 6.243,11.621 3.037,11.520 3.017 C 11.487 3.011,9.581 3.730,7.285 4.616 M14.139 10.978 C 15.562 14.190,16.743 16.849,16.764 16.888 C 16.801 16.956,16.751 16.960,15.807 16.960 L 14.811 16.960 14.291 15.650 L 13.770 14.340 11.495 14.330 L 9.220 14.320 8.698 15.630 L 8.176 16.940 7.185 16.951 C 6.616 16.957,6.199 16.946,6.206 16.926 C 6.214 16.906,7.407 14.223,8.858 10.964 C 10.375 7.555,11.507 5.060,11.524 5.089 C 11.539 5.117,12.716 7.767,14.139 10.978 M10.742 10.727 C 10.329 11.724,9.982 12.563,9.971 12.590 C 9.956 12.629,10.277 12.640,11.500 12.640 C 12.723 12.640,13.044 12.629,13.029 12.590 C 12.942 12.369,11.545 9.008,11.522 8.967 C 11.505 8.936,11.188 9.652,10.742 10.727 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.469 3.400 C 7.835 4.391,3.119 6.225,3.066 6.278 C 3.006 6.338,3.115 7.340,3.953 14.440 L 4.300 17.380 7.720 19.248 C 9.601 20.276,11.221 21.161,11.320 21.215 L 11.500 21.314 15.100 19.347 L 18.700 17.380 19.106 13.940 C 19.672 9.135,19.977 6.383,19.951 6.314 C 19.925 6.247,19.576 6.108,14.971 4.336 C 13.117 3.623,11.560 3.040,11.511 3.041 C 11.461 3.041,10.992 3.203,10.469 3.400 M14.149 11.005 C 15.584 14.242,16.749 16.906,16.737 16.925 C 16.725 16.944,16.288 16.960,15.765 16.960 L 14.815 16.960 14.298 15.666 L 13.782 14.372 12.921 14.346 C 12.447 14.332,11.420 14.320,10.639 14.320 L 9.217 14.320 8.698 15.630 L 8.179 16.940 7.240 16.951 C 6.724 16.957,6.280 16.953,6.253 16.943 C 6.187 16.917,11.439 5.120,11.517 5.120 C 11.530 5.120,12.714 7.768,14.149 11.005 M11.305 9.410 C 10.833 10.447,9.973 12.581,10.015 12.609 C 10.074 12.648,12.926 12.648,12.985 12.609 C 13.015 12.590,12.786 11.995,12.286 10.790 C 11.877 9.806,11.531 9.000,11.517 9.000 C 11.503 9.000,11.407 9.184,11.305 9.410 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/annotation.svg b/packages/icons/svg/annotation.svg
index 89db13e746..b591c7db96 100644
--- a/packages/icons/svg/annotation.svg
+++ b/packages/icons/svg/annotation.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.420 3.759 C 3.646 3.783,3.893 3.751,3.408 4.149 C 3.082 4.416,2.788 4.781,2.569 5.193 L 2.400 5.509 2.400 10.806 L 2.400 16.103 2.605 16.462 C 2.968 17.098,3.348 17.485,3.940 17.819 L 4.260 18.000 6.340 18.000 L 8.420 18.000 10.220 19.800 L 12.020 21.600 13.820 19.803 L 15.620 18.007 17.580 17.988 C 19.707 17.968,19.811 17.958,20.194 17.734 C 20.631 17.478,21.208 16.849,21.437 16.381 L 21.600 16.048 21.600 10.783 L 21.600 5.517 21.494 5.309 C 21.210 4.747,20.815 4.295,20.313 3.960 L 19.955 3.720 14.407 3.729 C 11.356 3.733,7.762 3.747,6.420 3.759 M17.460 7.489 C 17.609 7.626,17.755 7.793,17.783 7.861 C 17.861 8.048,17.897 8.630,17.843 8.830 C 17.812 8.943,17.728 9.070,17.588 9.214 C 17.209 9.601,17.793 9.563,11.967 9.588 L 6.820 9.610 6.565 9.351 C 6.168 8.949,6.120 8.848,6.121 8.420 C 6.122 8.026,6.180 7.844,6.379 7.609 C 6.550 7.406,6.662 7.368,7.183 7.338 C 7.665 7.310,12.284 7.259,15.464 7.247 L 17.188 7.240 17.460 7.489 M11.396 12.224 C 11.747 12.513,11.807 12.622,11.853 13.050 C 11.875 13.254,11.881 13.483,11.866 13.560 C 11.834 13.728,11.588 14.064,11.408 14.186 C 11.172 14.345,10.942 14.363,8.853 14.388 L 6.846 14.413 6.583 14.160 C 6.427 14.010,6.276 13.819,6.214 13.692 C 6.118 13.494,6.111 13.447,6.129 13.103 C 6.144 12.811,6.168 12.697,6.236 12.587 C 6.380 12.353,6.573 12.211,6.815 12.161 C 7.042 12.114,8.755 12.058,10.296 12.046 L 11.172 12.040 11.396 12.224 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.820 3.763 C 5.593 3.778,4.044 3.805,3.960 3.828 C 3.727 3.893,3.590 3.981,3.295 4.254 C 3.004 4.524,2.689 4.945,2.505 5.309 L 2.400 5.517 2.400 10.819 L 2.400 16.120 2.623 16.493 C 2.995 17.115,3.422 17.536,4.006 17.857 L 4.267 18.000 6.343 18.000 L 8.420 18.000 10.220 19.800 L 12.020 21.600 13.820 19.804 L 15.620 18.008 17.560 17.985 C 18.639 17.972,19.589 17.944,19.700 17.920 C 20.031 17.852,20.304 17.690,20.664 17.349 C 21.038 16.996,21.282 16.677,21.475 16.291 L 21.600 16.042 21.600 10.780 L 21.600 5.517 21.494 5.309 C 21.223 4.773,20.830 4.328,20.294 3.950 L 19.968 3.720 15.754 3.728 C 13.436 3.733,9.866 3.748,7.820 3.763 M17.430 7.460 C 17.769 7.767,17.843 7.937,17.851 8.427 C 17.859 8.867,17.846 8.906,17.573 9.229 C 17.456 9.367,17.346 9.452,17.248 9.482 C 17.003 9.556,14.843 9.594,10.717 9.597 L 6.813 9.600 6.546 9.323 C 6.215 8.980,6.122 8.787,6.121 8.437 C 6.120 8.075,6.211 7.794,6.392 7.605 C 6.584 7.403,6.730 7.365,7.440 7.335 C 8.056 7.310,12.797 7.258,15.543 7.247 L 17.186 7.240 17.430 7.460 M11.476 12.310 C 11.799 12.623,11.846 12.745,11.855 13.283 C 11.860 13.616,11.856 13.632,11.710 13.852 C 11.520 14.139,11.330 14.264,11.000 14.320 C 10.854 14.344,9.881 14.374,8.780 14.388 L 6.820 14.412 6.564 14.138 C 6.424 13.988,6.264 13.767,6.209 13.647 C 6.119 13.450,6.112 13.397,6.135 13.097 C 6.164 12.710,6.192 12.623,6.345 12.442 C 6.496 12.262,6.718 12.171,7.080 12.139 C 7.452 12.106,9.262 12.055,10.369 12.046 L 11.197 12.040 11.476 12.310 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/anonymous.svg b/packages/icons/svg/anonymous.svg
index 5415ee5683..4e7df84b4a 100644
--- a/packages/icons/svg/anonymous.svg
+++ b/packages/icons/svg/anonymous.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.127 3.181 C 6.907 3.276,6.766 3.396,6.660 3.576 C 6.593 3.690,6.260 4.858,5.660 7.083 C 5.166 8.919,4.731 10.488,4.694 10.571 C 4.597 10.790,4.431 10.934,3.562 11.549 C 2.607 12.225,2.540 12.304,2.540 12.756 C 2.540 13.028,2.554 13.086,2.652 13.234 C 2.774 13.419,2.943 13.541,3.160 13.598 C 3.421 13.668,5.863 13.820,8.440 13.928 C 10.010 13.993,13.990 13.993,15.560 13.928 C 18.137 13.820,20.579 13.668,20.840 13.598 C 21.057 13.541,21.226 13.419,21.348 13.234 C 21.446 13.086,21.460 13.028,21.460 12.756 C 21.460 12.304,21.393 12.225,20.438 11.549 C 19.569 10.934,19.403 10.790,19.306 10.571 C 19.269 10.488,18.834 8.917,18.339 7.080 C 17.663 4.572,17.411 3.695,17.328 3.561 C 17.171 3.306,16.899 3.147,16.586 3.128 C 16.435 3.119,15.501 3.217,14.170 3.381 L 12.000 3.650 9.850 3.384 C 8.668 3.239,7.601 3.120,7.480 3.121 C 7.359 3.122,7.200 3.149,7.127 3.181 M7.010 15.044 C 6.055 15.203,5.216 15.847,4.798 16.740 C 4.072 18.292,4.814 20.159,6.406 20.782 C 6.705 20.899,7.210 21.000,7.500 21.000 C 7.948 21.000,8.622 20.817,8.991 20.596 C 9.289 20.417,9.674 20.079,9.861 19.833 C 10.214 19.367,10.480 18.657,10.480 18.182 L 10.480 18.000 12.000 18.000 L 13.520 18.000 13.520 18.182 C 13.520 18.467,13.634 18.910,13.798 19.260 C 14.217 20.155,14.991 20.754,15.971 20.940 C 16.372 21.016,16.628 21.016,17.029 20.940 C 18.009 20.754,18.783 20.155,19.202 19.260 C 19.947 17.668,19.147 15.760,17.492 15.181 C 16.933 14.986,16.475 14.957,15.886 15.078 C 14.967 15.268,14.177 15.896,13.795 16.740 L 13.669 17.020 12.000 17.020 L 10.331 17.020 10.205 16.740 C 9.666 15.545,8.313 14.827,7.010 15.044 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.209 3.159 C 7.049 3.197,6.785 3.375,6.703 3.501 C 6.615 3.635,6.425 4.281,5.815 6.520 C 4.862 10.015,4.713 10.538,4.634 10.668 C 4.535 10.831,4.325 11.004,3.580 11.538 C 2.804 12.094,2.619 12.272,2.558 12.527 C 2.437 13.033,2.691 13.468,3.180 13.594 C 3.371 13.643,4.022 13.698,5.380 13.778 C 8.056 13.938,9.105 13.967,12.000 13.967 C 14.895 13.967,15.944 13.938,18.620 13.778 C 19.978 13.698,20.629 13.643,20.820 13.594 C 21.311 13.468,21.563 13.033,21.441 12.524 C 21.379 12.267,21.188 12.085,20.340 11.480 C 19.541 10.909,19.347 10.721,19.261 10.435 C 19.226 10.317,18.846 8.933,18.417 7.360 C 17.447 3.806,17.391 3.620,17.226 3.446 C 17.087 3.300,16.885 3.184,16.700 3.144 C 16.547 3.111,15.801 3.186,13.690 3.445 L 12.000 3.653 10.310 3.446 C 7.557 3.108,7.461 3.100,7.209 3.159 M7.060 15.037 C 6.736 15.090,6.518 15.160,6.232 15.301 C 5.861 15.484,5.661 15.630,5.376 15.927 C 4.944 16.374,4.739 16.749,4.593 17.356 C 4.497 17.757,4.509 18.369,4.621 18.780 C 4.897 19.798,5.688 20.589,6.720 20.879 C 7.355 21.057,7.963 21.020,8.628 20.762 C 9.591 20.388,10.392 19.313,10.470 18.290 L 10.492 18.000 12.006 18.000 L 13.520 18.000 13.520 18.192 C 13.520 18.298,13.556 18.523,13.601 18.693 C 13.911 19.877,14.770 20.691,15.968 20.937 C 16.506 21.047,17.037 20.993,17.600 20.771 C 19.203 20.139,19.927 18.264,19.176 16.692 C 18.897 16.106,18.428 15.638,17.820 15.338 C 17.317 15.090,17.033 15.023,16.500 15.028 C 15.966 15.033,15.571 15.128,15.127 15.359 C 14.549 15.660,14.122 16.096,13.816 16.698 L 13.653 17.020 12.002 17.020 L 10.350 17.020 10.165 16.670 C 9.838 16.050,9.392 15.614,8.787 15.321 C 8.607 15.234,8.343 15.136,8.200 15.102 C 7.877 15.025,7.325 14.994,7.060 15.037 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/apple.svg b/packages/icons/svg/apple.svg
index 0a96de69f6..9819d9165c 100644
--- a/packages/icons/svg/apple.svg
+++ b/packages/icons/svg/apple.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.265 2.062 C 14.668 2.181,13.910 2.509,13.412 2.864 C 12.296 3.661,11.529 5.030,11.507 6.267 C 11.503 6.490,11.512 6.686,11.528 6.701 C 11.582 6.755,12.194 6.718,12.488 6.643 C 13.117 6.482,13.667 6.159,14.242 5.612 C 14.841 5.042,15.279 4.386,15.519 3.700 C 15.702 3.177,15.810 2.371,15.735 2.090 C 15.707 1.986,15.662 1.983,15.265 2.062 M14.380 6.858 C 14.138 6.908,13.472 7.109,12.900 7.303 C 12.033 7.598,11.820 7.657,11.620 7.655 C 11.370 7.653,11.053 7.562,9.920 7.167 C 8.895 6.811,8.293 6.735,7.468 6.860 C 6.433 7.016,5.473 7.516,4.678 8.316 C 3.497 9.502,2.944 11.094,3.013 13.100 C 3.052 14.210,3.216 15.090,3.600 16.240 C 4.117 17.789,4.749 18.947,5.772 20.220 C 6.487 21.111,7.073 21.614,7.680 21.856 C 7.945 21.963,8.029 21.977,8.400 21.978 C 8.898 21.980,9.167 21.919,10.012 21.613 C 10.939 21.276,11.196 21.223,11.900 21.223 C 12.600 21.223,12.870 21.278,13.725 21.594 C 14.368 21.833,14.652 21.909,15.044 21.950 C 15.992 22.049,16.824 21.647,17.653 20.687 C 18.319 19.916,18.947 18.990,19.368 18.160 C 19.580 17.742,20.020 16.684,19.992 16.660 C 19.985 16.655,19.894 16.613,19.789 16.567 C 19.143 16.285,18.203 15.445,17.828 14.814 C 17.246 13.836,17.067 12.676,17.320 11.513 C 17.551 10.448,18.241 9.529,19.360 8.796 L 19.458 8.731 19.224 8.445 C 18.857 7.996,18.342 7.593,17.766 7.303 C 16.790 6.812,15.442 6.635,14.380 6.858 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.280 2.062 C 13.523 2.439,12.151 3.681,11.657 5.340 C 11.573 5.620,11.545 5.814,11.530 6.210 L 11.511 6.720 11.797 6.720 C 12.672 6.720,13.529 6.313,14.322 5.521 C 15.103 4.742,15.542 3.924,15.699 2.957 C 15.802 2.322,15.771 1.996,15.609 2.003 C 15.571 2.005,15.423 2.031,15.280 2.062 M14.754 6.799 C 14.369 6.848,13.939 6.966,12.900 7.308 C 11.593 7.739,11.647 7.739,10.399 7.326 C 9.860 7.148,9.270 6.967,9.087 6.923 C 7.225 6.482,5.175 7.389,3.977 9.185 C 2.977 10.683,2.733 12.945,3.321 15.280 C 3.826 17.288,4.727 19.021,6.070 20.570 C 6.615 21.199,7.036 21.547,7.538 21.786 C 8.180 22.090,8.695 22.059,9.922 21.640 C 10.985 21.278,11.163 21.242,11.892 21.241 C 12.606 21.240,12.898 21.294,13.639 21.565 C 14.389 21.839,14.721 21.923,15.149 21.949 C 16.172 22.010,16.972 21.549,17.929 20.349 C 18.752 19.317,19.279 18.435,19.752 17.300 C 20.037 16.614,20.032 16.663,19.828 16.585 C 19.409 16.425,18.684 15.857,18.213 15.320 C 17.860 14.918,17.492 14.215,17.362 13.695 C 17.046 12.430,17.249 11.149,17.922 10.157 C 18.230 9.703,18.809 9.155,19.360 8.796 L 19.459 8.731 19.300 8.536 C 18.408 7.437,17.106 6.833,15.520 6.781 C 15.245 6.772,14.900 6.780,14.754 6.799 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/archive.svg b/packages/icons/svg/archive.svg
index 5a47732c40..a25cec7661 100644
--- a/packages/icons/svg/archive.svg
+++ b/packages/icons/svg/archive.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.756 3.901 C 3.157 4.278,2.771 4.715,2.558 5.260 C 2.480 5.460,2.464 5.574,2.463 5.940 C 2.463 6.317,2.479 6.425,2.572 6.693 C 2.813 7.384,3.292 7.883,4.109 8.295 L 4.317 8.400 12.000 8.400 L 19.683 8.400 19.891 8.295 C 20.932 7.773,21.560 6.918,21.560 6.024 C 21.560 5.761,21.439 5.278,21.296 4.972 C 21.159 4.681,20.561 4.071,20.225 3.881 L 19.991 3.749 14.565 3.717 C 11.581 3.699,8.006 3.685,6.620 3.685 L 4.100 3.685 3.756 3.901 M3.600 14.041 L 3.600 18.483 3.705 18.691 C 4.078 19.428,4.574 19.925,5.309 20.295 L 5.517 20.400 12.009 20.399 L 18.500 20.399 18.794 20.238 C 19.471 19.870,19.947 19.379,20.294 18.691 L 20.400 18.483 20.400 14.041 L 20.400 9.600 12.000 9.600 L 3.600 9.600 3.600 14.041 M13.934 12.324 C 14.247 12.670,14.298 12.792,14.297 13.200 C 14.297 13.603,14.219 13.787,13.931 14.066 C 13.592 14.396,13.690 14.380,11.973 14.377 L 10.445 14.374 10.283 14.262 C 10.105 14.138,9.888 13.889,9.785 13.691 C 9.749 13.620,9.708 13.429,9.694 13.267 C 9.672 13.005,9.681 12.946,9.768 12.755 C 9.823 12.637,9.947 12.453,10.044 12.346 L 10.220 12.152 11.040 12.122 C 11.491 12.106,12.277 12.090,12.787 12.086 L 13.713 12.080 13.934 12.324 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.720 3.934 C 2.982 4.428,2.554 5.020,2.475 5.658 C 2.340 6.748,2.929 7.698,4.109 8.295 L 4.317 8.400 12.000 8.400 L 19.683 8.400 19.891 8.295 C 20.887 7.793,21.561 6.891,21.560 6.062 C 21.559 5.816,21.432 5.267,21.320 5.030 C 21.151 4.669,20.600 4.104,20.176 3.855 L 20.009 3.758 14.074 3.720 C 10.810 3.699,7.231 3.682,6.120 3.681 L 4.099 3.680 3.720 3.934 M3.600 14.041 L 3.600 18.483 3.706 18.691 C 4.062 19.396,4.607 19.941,5.309 20.295 L 5.517 20.400 12.010 20.400 L 18.502 20.400 18.816 20.221 C 19.500 19.831,19.958 19.357,20.295 18.691 L 20.400 18.483 20.400 14.041 L 20.400 9.600 12.000 9.600 L 3.600 9.600 3.600 14.041 M13.920 12.310 C 14.232 12.658,14.280 12.775,14.279 13.188 C 14.278 13.631,14.212 13.783,13.892 14.087 C 13.724 14.246,13.605 14.324,13.496 14.347 C 13.410 14.365,12.690 14.380,11.897 14.380 L 10.453 14.380 10.285 14.264 C 10.068 14.113,9.771 13.717,9.734 13.528 C 9.637 13.042,9.727 12.712,10.056 12.338 L 10.220 12.152 11.180 12.122 C 11.708 12.106,12.494 12.090,12.927 12.086 L 13.714 12.080 13.920 12.310 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-circle-down.svg b/packages/icons/svg/arrow-circle-down.svg
index c39ff26991..29f55f85dd 100644
--- a/packages/icons/svg/arrow-circle-down.svg
+++ b/packages/icons/svg/arrow-circle-down.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.670 7.489 C 12.961 7.698,13.032 7.878,13.078 8.521 C 13.099 8.819,13.136 9.809,13.161 10.721 C 13.186 11.634,13.219 12.432,13.234 12.495 C 13.262 12.609,13.264 12.608,13.781 12.119 C 14.877 11.082,15.127 10.910,15.537 10.910 C 16.025 10.910,16.405 11.103,16.578 11.437 C 16.647 11.569,16.719 11.983,16.720 12.244 L 16.720 12.428 15.865 13.324 C 14.815 14.424,13.171 16.051,12.743 16.414 C 12.213 16.862,11.882 16.893,11.407 16.540 C 10.878 16.147,7.756 13.027,7.452 12.588 C 7.360 12.456,7.342 12.382,7.327 12.081 C 7.307 11.648,7.351 11.503,7.584 11.244 C 7.809 10.994,8.039 10.900,8.420 10.901 C 8.859 10.903,9.039 11.025,10.145 12.067 C 10.457 12.360,10.731 12.600,10.755 12.600 C 10.786 12.600,10.800 12.432,10.801 12.070 C 10.802 10.923,10.883 8.641,10.935 8.299 C 10.997 7.885,11.103 7.647,11.291 7.504 C 11.510 7.337,11.595 7.318,12.051 7.337 C 12.465 7.354,12.491 7.360,12.670 7.489 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.319 7.360 C 12.512 7.360,12.796 7.548,12.911 7.752 C 12.959 7.838,13.016 8.033,13.037 8.184 C 13.073 8.442,13.126 9.658,13.180 11.480 C 13.204 12.300,13.228 12.560,13.277 12.560 C 13.293 12.560,13.548 12.334,13.843 12.058 C 14.878 11.091,15.132 10.920,15.539 10.920 C 15.887 10.920,16.156 11.011,16.373 11.203 C 16.591 11.394,16.667 11.601,16.706 12.099 L 16.730 12.420 16.119 13.060 C 14.345 14.918,12.737 16.473,12.402 16.655 C 11.941 16.906,11.661 16.795,10.843 16.036 C 10.025 15.276,7.637 12.847,7.492 12.627 C 7.351 12.412,7.295 12.120,7.333 11.798 C 7.374 11.449,7.581 11.162,7.898 11.015 C 8.167 10.890,8.618 10.883,8.860 11.000 C 9.058 11.096,9.482 11.447,10.199 12.110 C 10.490 12.379,10.742 12.591,10.758 12.581 C 10.774 12.571,10.800 11.991,10.815 11.292 C 10.852 9.554,10.913 8.390,10.983 8.083 C 11.112 7.522,11.397 7.300,11.936 7.342 C 12.066 7.352,12.238 7.360,12.319 7.360 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-circle-left.svg b/packages/icons/svg/arrow-circle-left.svg
index 6c2d6f6de8..a1373d5952 100644
--- a/packages/icons/svg/arrow-circle-left.svg
+++ b/packages/icons/svg/arrow-circle-left.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.598 7.454 C 12.682 7.509,12.820 7.640,12.905 7.744 L 13.060 7.932 13.073 8.376 L 13.086 8.820 12.889 9.080 C 12.708 9.320,11.684 10.440,11.486 10.616 C 11.329 10.755,11.375 10.800,11.670 10.800 C 12.295 10.799,15.175 10.885,15.583 10.917 C 16.177 10.963,16.364 11.066,16.573 11.460 C 16.689 11.680,16.698 12.350,16.587 12.554 C 16.467 12.774,16.183 13.031,16.008 13.078 C 15.731 13.153,14.549 13.199,12.907 13.199 L 11.314 13.200 11.916 13.830 C 12.553 14.498,12.919 14.934,13.019 15.144 C 13.112 15.340,13.102 15.921,13.002 16.116 C 12.822 16.469,12.350 16.762,11.963 16.759 C 11.589 16.757,11.187 16.425,9.375 14.620 C 7.471 12.723,7.314 12.524,7.305 12.006 C 7.299 11.702,7.365 11.546,7.669 11.143 C 7.889 10.853,10.648 8.085,11.091 7.711 C 11.544 7.329,11.586 7.313,12.053 7.334 C 12.387 7.350,12.468 7.368,12.598 7.454 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.588 7.464 C 12.680 7.517,12.823 7.643,12.905 7.744 L 13.055 7.927 13.072 8.376 L 13.090 8.825 12.898 9.063 C 12.642 9.380,12.179 9.897,11.743 10.351 C 11.534 10.568,11.401 10.736,11.423 10.756 C 11.443 10.775,12.243 10.812,13.200 10.838 C 15.881 10.910,16.107 10.935,16.367 11.180 C 16.580 11.381,16.638 11.566,16.639 12.040 C 16.640 12.503,16.612 12.581,16.356 12.835 C 16.116 13.074,15.975 13.111,15.159 13.158 C 14.752 13.181,13.718 13.200,12.861 13.200 L 11.302 13.200 11.643 13.550 C 12.560 14.489,12.973 14.991,13.045 15.256 C 13.112 15.504,13.066 16.008,12.961 16.178 C 12.835 16.383,12.577 16.588,12.332 16.680 C 11.777 16.887,11.608 16.784,10.023 15.261 C 8.862 14.145,7.662 12.878,7.480 12.576 C 7.349 12.358,7.340 12.321,7.340 12.000 C 7.340 11.679,7.349 11.641,7.480 11.421 C 7.648 11.139,9.156 9.559,10.327 8.438 C 11.503 7.312,11.516 7.304,12.080 7.343 C 12.337 7.361,12.461 7.391,12.588 7.464 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-circle-right.svg b/packages/icons/svg/arrow-circle-right.svg
index ee5ab28ff5..745ab5ec87 100644
--- a/packages/icons/svg/arrow-circle-right.svg
+++ b/packages/icons/svg/arrow-circle-right.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.500 7.429 C 12.780 7.575,13.268 8.021,14.542 9.297 C 15.965 10.721,16.478 11.287,16.629 11.594 C 16.730 11.801,16.733 11.824,16.692 12.107 C 16.637 12.487,16.520 12.665,15.867 13.367 C 15.217 14.065,13.364 15.893,12.880 16.313 C 12.418 16.714,12.218 16.793,11.833 16.725 C 11.420 16.652,11.132 16.430,10.981 16.069 C 10.942 15.975,10.920 15.796,10.920 15.569 C 10.920 15.249,10.931 15.199,11.034 15.036 C 11.192 14.787,11.532 14.397,12.158 13.750 L 12.689 13.200 11.194 13.197 C 9.153 13.194,8.149 13.152,7.931 13.062 C 7.733 12.980,7.560 12.797,7.420 12.520 C 7.336 12.354,7.320 12.267,7.320 11.969 C 7.320 11.648,7.330 11.599,7.435 11.438 C 7.602 11.178,7.809 10.998,7.985 10.959 C 8.191 10.913,9.668 10.849,11.310 10.816 C 12.042 10.801,12.640 10.781,12.640 10.771 C 12.640 10.761,12.390 10.489,12.084 10.167 C 11.408 9.453,11.186 9.195,11.047 8.960 C 10.951 8.799,10.940 8.740,10.940 8.400 C 10.940 7.976,10.977 7.875,11.232 7.592 C 11.446 7.355,11.557 7.316,11.980 7.332 C 12.248 7.342,12.381 7.367,12.500 7.429 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.500 7.440 C 12.755 7.564,13.337 8.094,14.561 9.320 C 15.892 10.653,16.430 11.246,16.605 11.576 C 16.729 11.809,16.731 11.819,16.689 12.089 C 16.631 12.469,16.485 12.691,15.837 13.393 C 15.221 14.058,13.433 15.824,12.921 16.271 C 12.390 16.735,12.183 16.811,11.755 16.702 C 11.433 16.620,11.237 16.484,11.076 16.233 C 10.962 16.057,10.947 15.995,10.929 15.664 C 10.914 15.373,10.924 15.264,10.976 15.155 C 11.080 14.934,11.436 14.509,12.079 13.835 L 12.676 13.211 10.608 13.188 C 9.471 13.175,8.405 13.146,8.240 13.123 C 7.868 13.070,7.687 12.951,7.488 12.627 C 7.358 12.416,7.343 12.361,7.328 12.043 C 7.309 11.645,7.349 11.521,7.587 11.243 C 7.801 10.993,7.895 10.960,8.532 10.919 C 9.130 10.880,11.600 10.801,12.230 10.800 C 12.470 10.800,12.600 10.785,12.600 10.756 C 12.600 10.732,12.352 10.449,12.050 10.126 C 10.992 9.000,10.960 8.950,10.960 8.418 C 10.960 8.102,10.976 7.992,11.043 7.853 C 11.142 7.649,11.442 7.372,11.593 7.346 C 11.811 7.308,12.339 7.362,12.500 7.440 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-circle-up.svg b/packages/icons/svg/arrow-circle-up.svg
index 92e6bc457c..fc18337fb6 100644
--- a/packages/icons/svg/arrow-circle-up.svg
+++ b/packages/icons/svg/arrow-circle-up.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.437 7.366 C 12.594 7.426,12.915 7.714,13.875 8.659 C 15.203 9.966,16.506 11.335,16.605 11.529 C 16.797 11.904,16.682 12.512,16.357 12.837 C 16.219 12.975,15.922 13.127,15.693 13.177 C 15.395 13.242,15.018 13.018,14.243 12.315 C 13.511 11.650,13.311 11.481,13.279 11.501 C 13.221 11.537,13.200 11.881,13.159 13.520 C 13.107 15.609,13.076 15.991,12.940 16.224 C 12.777 16.501,12.456 16.708,12.128 16.746 C 11.800 16.785,11.245 16.527,11.043 16.244 C 10.929 16.085,10.895 15.603,10.838 13.420 C 10.813 12.452,10.781 11.601,10.766 11.528 L 10.740 11.396 10.020 12.063 C 9.624 12.430,9.203 12.814,9.084 12.915 L 8.868 13.100 8.507 13.114 C 8.084 13.131,7.892 13.083,7.698 12.913 C 7.442 12.688,7.346 12.471,7.327 12.075 C 7.307 11.645,7.361 11.513,7.748 11.054 C 8.363 10.326,10.887 7.853,11.440 7.439 L 11.660 7.274 11.999 7.301 C 12.185 7.316,12.382 7.346,12.437 7.366 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.115 7.319 C 12.419 7.354,12.470 7.373,12.675 7.528 C 12.953 7.739,15.593 10.371,16.158 11.000 C 16.385 11.253,16.597 11.523,16.630 11.600 C 16.720 11.813,16.680 12.287,16.550 12.540 C 16.424 12.785,16.281 12.924,16.020 13.054 C 15.698 13.214,15.560 13.224,15.302 13.106 C 15.018 12.976,14.771 12.785,13.986 12.085 C 13.638 11.774,13.329 11.520,13.301 11.520 C 13.224 11.520,13.206 11.761,13.159 13.420 C 13.102 15.494,13.067 15.923,12.938 16.188 C 12.816 16.437,12.588 16.618,12.287 16.706 C 12.038 16.778,11.876 16.758,11.562 16.616 C 11.264 16.481,11.082 16.335,11.016 16.177 C 10.939 15.993,10.890 15.206,10.837 13.320 C 10.812 12.429,10.780 11.632,10.766 11.550 L 10.740 11.400 10.020 12.065 C 9.624 12.430,9.196 12.817,9.068 12.925 L 8.836 13.120 8.493 13.120 C 8.073 13.120,7.887 13.068,7.683 12.893 C 7.435 12.681,7.344 12.448,7.342 12.021 C 7.340 11.603,7.369 11.531,7.715 11.100 C 8.195 10.501,10.703 8.034,11.393 7.482 C 11.671 7.259,11.645 7.265,12.115 7.319 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-down.svg b/packages/icons/svg/arrow-down.svg
index 6eecdd5a3c..54f822d7f2 100644
--- a/packages/icons/svg/arrow-down.svg
+++ b/packages/icons/svg/arrow-down.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.415 2.638 C 11.178 2.774,10.901 3.072,10.863 3.230 C 10.849 3.291,10.826 6.521,10.813 10.409 L 10.789 17.478 8.864 15.572 C 6.004 12.739,5.436 12.226,5.048 12.122 C 4.743 12.040,4.261 12.171,3.973 12.415 C 3.638 12.698,3.540 13.244,3.756 13.620 C 3.937 13.935,4.860 14.900,7.740 17.784 C 11.393 21.442,11.573 21.599,12.059 21.549 C 12.177 21.536,12.337 21.497,12.413 21.461 C 12.489 21.425,12.971 20.996,13.485 20.508 C 14.703 19.353,19.413 14.645,19.816 14.180 C 20.232 13.702,20.337 13.496,20.337 13.160 C 20.337 12.842,20.246 12.650,19.981 12.405 C 19.736 12.180,19.603 12.129,19.169 12.096 L 18.806 12.069 18.389 12.432 C 17.868 12.885,16.616 14.099,14.690 16.016 L 13.200 17.500 13.200 10.354 L 13.200 3.209 12.863 2.890 C 12.490 2.536,12.449 2.520,11.945 2.520 C 11.659 2.521,11.595 2.535,11.415 2.638 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.500 2.599 C 11.263 2.717,11.053 2.904,10.938 3.099 L 10.837 3.272 10.812 10.356 C 10.798 14.252,10.776 17.440,10.763 17.440 C 10.750 17.440,10.406 17.105,10.000 16.697 C 8.851 15.542,6.424 13.179,5.980 12.783 C 5.760 12.587,5.474 12.358,5.344 12.273 C 5.130 12.134,5.082 12.120,4.841 12.120 C 4.021 12.120,3.465 12.774,3.696 13.468 C 3.790 13.750,4.114 14.106,6.397 16.432 C 8.614 18.690,10.802 20.833,11.272 21.207 C 11.667 21.521,11.797 21.576,12.073 21.544 C 12.366 21.509,12.434 21.467,12.960 20.994 C 14.083 19.982,19.744 14.314,20.050 13.894 C 20.258 13.610,20.328 13.422,20.328 13.153 C 20.328 12.865,20.216 12.620,19.993 12.418 C 19.764 12.211,19.553 12.131,19.151 12.099 L 18.801 12.071 18.350 12.469 C 17.791 12.963,16.500 14.215,14.630 16.076 L 13.200 17.500 13.200 10.353 L 13.200 3.207 12.873 2.904 C 12.506 2.562,12.407 2.521,11.960 2.520 C 11.741 2.520,11.617 2.542,11.500 2.599 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-expand.svg b/packages/icons/svg/arrow-expand.svg
index 1304926b15..0d02259a27 100644
--- a/packages/icons/svg/arrow-expand.svg
+++ b/packages/icons/svg/arrow-expand.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.356 3.681 C 5.529 3.697,4.733 3.722,4.586 3.738 C 4.264 3.772,4.012 3.927,3.801 4.221 L 3.663 4.414 3.634 5.117 C 3.619 5.504,3.605 6.747,3.603 7.880 L 3.601 9.940 3.730 10.103 C 3.926 10.349,4.126 10.509,4.384 10.627 C 4.869 10.849,5.170 10.784,5.601 10.362 C 5.902 10.067,5.947 9.915,5.979 9.092 C 6.016 8.092,6.039 7.874,6.102 7.888 C 6.132 7.894,6.657 8.379,7.268 8.965 C 8.830 10.461,9.064 10.658,9.352 10.723 C 9.514 10.759,9.851 10.721,10.053 10.643 C 10.516 10.465,10.825 9.887,10.722 9.390 C 10.647 9.031,10.277 8.600,8.503 6.810 L 7.701 6.000 8.500 5.999 C 9.290 5.998,9.728 5.962,9.999 5.873 C 10.173 5.816,10.541 5.471,10.653 5.260 C 10.772 5.035,10.771 4.603,10.651 4.375 C 10.534 4.155,10.383 3.980,10.148 3.794 L 9.953 3.640 8.906 3.647 C 8.331 3.650,7.183 3.666,6.356 3.681 M14.577 3.758 C 13.919 3.779,13.888 3.784,13.730 3.888 C 13.437 4.083,13.240 4.441,13.240 4.779 C 13.240 5.178,13.529 5.641,13.888 5.815 C 14.151 5.942,14.693 6.000,15.635 6.000 L 16.289 6.000 15.277 7.030 C 14.044 8.285,13.465 8.924,13.354 9.153 C 13.284 9.296,13.273 9.378,13.288 9.633 C 13.309 9.993,13.392 10.192,13.613 10.413 C 13.833 10.633,14.083 10.736,14.401 10.738 C 14.631 10.740,14.691 10.723,14.893 10.600 C 15.174 10.431,15.728 9.932,16.936 8.765 C 17.440 8.278,17.877 7.880,17.906 7.880 C 17.936 7.880,17.960 7.912,17.960 7.950 C 17.960 7.989,17.979 8.407,18.001 8.880 C 18.053 9.947,18.086 10.078,18.372 10.349 C 18.689 10.649,18.882 10.737,19.220 10.739 C 19.576 10.740,19.764 10.637,20.135 10.236 L 20.400 9.950 20.400 8.045 C 20.400 6.997,20.388 5.744,20.373 5.260 L 20.347 4.380 20.022 4.050 L 19.698 3.720 17.479 3.728 C 16.259 3.732,14.953 3.746,14.577 3.758 M13.793 13.452 C 13.257 13.817,13.088 14.447,13.397 14.927 C 13.544 15.155,14.101 15.764,15.257 16.959 C 16.029 17.758,16.189 17.942,16.130 17.964 C 16.090 17.979,15.707 18.012,15.278 18.038 C 14.289 18.097,13.933 18.146,13.769 18.247 C 13.491 18.418,13.240 18.881,13.240 19.222 C 13.240 19.543,13.504 19.975,13.868 20.249 L 14.085 20.413 16.712 20.386 C 18.158 20.371,19.409 20.343,19.493 20.323 C 19.711 20.272,19.943 20.098,20.187 19.802 L 20.400 19.544 20.399 17.642 C 20.398 16.596,20.381 15.363,20.360 14.902 C 20.316 13.910,20.285 13.817,19.903 13.521 L 19.671 13.340 19.225 13.340 C 18.884 13.340,18.751 13.356,18.658 13.407 C 18.472 13.509,18.200 13.790,18.134 13.949 C 18.072 14.096,18.018 14.665,17.976 15.610 C 17.963 15.912,17.938 16.160,17.920 16.160 C 17.903 16.160,17.495 15.780,17.014 15.315 C 15.947 14.284,15.260 13.653,15.040 13.500 C 14.867 13.380,14.498 13.282,14.213 13.281 C 14.080 13.280,13.992 13.316,13.793 13.452 M4.140 13.490 C 3.815 13.732,3.733 13.829,3.677 14.040 C 3.644 14.167,3.624 15.001,3.612 16.880 L 3.594 19.540 3.810 19.800 C 4.058 20.099,4.289 20.272,4.507 20.323 C 4.591 20.343,5.852 20.371,7.308 20.386 L 9.956 20.413 10.258 20.111 C 10.618 19.751,10.730 19.532,10.731 19.183 C 10.734 18.629,10.370 18.207,9.814 18.120 C 9.685 18.100,9.202 18.063,8.740 18.039 C 8.278 18.014,7.884 17.978,7.864 17.959 C 7.828 17.924,7.965 17.773,9.377 16.293 C 10.538 15.076,10.839 14.657,10.786 14.330 C 10.737 14.029,10.443 13.589,10.172 13.411 C 10.120 13.377,9.932 13.345,9.704 13.331 C 9.102 13.295,9.062 13.323,7.400 14.917 C 6.322 15.952,6.079 16.172,6.048 16.141 C 6.033 16.127,6.011 15.671,5.997 15.128 C 5.969 14.012,5.955 13.952,5.673 13.677 C 5.417 13.427,5.210 13.347,4.760 13.328 L 4.380 13.312 4.140 13.490 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.381 3.685 C 5.458 3.703,4.609 3.737,4.495 3.761 C 4.214 3.819,3.959 3.997,3.777 4.262 L 3.625 4.482 3.607 7.214 L 3.590 9.946 3.840 10.213 C 4.108 10.500,4.442 10.694,4.753 10.743 C 5.196 10.814,5.813 10.308,5.917 9.787 C 5.940 9.673,5.977 9.212,5.999 8.762 C 6.022 8.312,6.055 7.929,6.072 7.912 C 6.107 7.877,6.440 8.176,7.702 9.377 C 8.630 10.259,8.981 10.563,9.190 10.662 C 9.467 10.794,10.025 10.713,10.302 10.501 C 10.479 10.366,10.666 10.041,10.722 9.770 C 10.833 9.237,10.602 8.929,8.489 6.795 L 7.711 6.011 8.686 5.989 C 9.798 5.965,9.980 5.932,10.262 5.700 C 10.521 5.489,10.668 5.271,10.719 5.025 C 10.807 4.601,10.629 4.200,10.192 3.836 L 9.956 3.640 9.008 3.646 C 8.487 3.650,7.304 3.667,6.381 3.685 M15.077 3.758 L 13.893 3.780 13.720 3.900 C 13.524 4.035,13.339 4.301,13.275 4.539 C 13.176 4.904,13.336 5.343,13.679 5.651 C 13.973 5.916,14.219 5.965,15.370 5.990 L 16.279 6.010 15.312 6.995 C 14.255 8.072,13.620 8.761,13.427 9.040 C 13.175 9.405,13.249 10.001,13.592 10.370 C 13.833 10.629,14.050 10.726,14.397 10.732 C 14.619 10.735,14.697 10.718,14.843 10.632 C 15.088 10.487,15.501 10.128,16.356 9.315 C 17.375 8.346,17.882 7.880,17.919 7.880 C 17.937 7.880,17.963 8.172,17.978 8.530 C 18.014 9.375,18.066 9.842,18.145 10.041 C 18.222 10.233,18.552 10.542,18.797 10.651 C 19.021 10.751,19.401 10.757,19.617 10.665 C 19.703 10.629,19.917 10.453,20.092 10.275 L 20.410 9.952 20.393 7.175 L 20.376 4.398 20.039 4.059 L 19.702 3.720 17.981 3.728 C 17.034 3.732,15.727 3.745,15.077 3.758 M13.960 13.350 C 13.883 13.387,13.718 13.518,13.594 13.642 C 13.420 13.814,13.352 13.917,13.304 14.081 C 13.128 14.670,13.222 14.826,14.646 16.317 C 15.722 17.442,16.120 17.875,16.120 17.919 C 16.120 17.977,16.006 17.994,15.300 18.040 C 13.972 18.126,13.739 18.184,13.521 18.485 C 13.370 18.693,13.240 19.041,13.241 19.232 C 13.243 19.529,13.520 19.978,13.870 20.247 L 14.084 20.413 16.654 20.387 C 18.073 20.373,19.319 20.343,19.435 20.321 C 19.696 20.271,19.940 20.101,20.205 19.782 L 20.406 19.540 20.386 17.060 C 20.375 15.657,20.348 14.453,20.324 14.288 C 20.267 13.894,20.191 13.751,19.925 13.540 L 19.700 13.361 19.228 13.360 C 18.675 13.360,18.618 13.381,18.330 13.696 C 18.084 13.965,18.062 14.068,17.998 15.200 C 17.973 15.629,17.941 16.020,17.927 16.069 C 17.903 16.149,17.818 16.080,17.100 15.393 C 15.861 14.208,15.196 13.604,15.006 13.491 C 14.816 13.378,14.461 13.281,14.240 13.282 C 14.163 13.282,14.037 13.312,13.960 13.350 M4.102 13.525 C 3.668 13.861,3.665 13.869,3.634 14.880 C 3.619 15.353,3.605 16.598,3.603 17.646 L 3.600 19.552 3.801 19.790 C 4.070 20.108,4.306 20.272,4.566 20.321 C 4.684 20.344,5.929 20.373,7.380 20.387 L 9.981 20.413 10.269 20.101 C 10.611 19.730,10.690 19.579,10.712 19.259 C 10.745 18.773,10.564 18.445,10.152 18.244 C 9.909 18.125,9.867 18.118,8.980 18.060 C 7.996 17.994,7.880 17.980,7.880 17.921 C 7.880 17.878,8.043 17.700,9.234 16.442 C 10.540 15.064,10.841 14.653,10.781 14.330 C 10.740 14.108,10.539 13.755,10.344 13.564 C 10.194 13.417,10.140 13.391,9.916 13.359 C 9.158 13.249,9.129 13.267,7.300 15.014 C 6.280 15.988,6.097 16.150,6.058 16.112 C 6.048 16.101,6.022 15.668,6.002 15.149 C 5.982 14.630,5.943 14.131,5.915 14.041 C 5.851 13.826,5.482 13.477,5.243 13.405 C 5.148 13.377,4.916 13.344,4.726 13.332 L 4.380 13.310 4.102 13.525 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-left.svg b/packages/icons/svg/arrow-left.svg
index 95d13e0b18..c20a7fa81a 100644
--- a/packages/icons/svg/arrow-left.svg
+++ b/packages/icons/svg/arrow-left.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.228 3.843 C 9.943 4.032,8.181 5.745,5.620 8.324 C 3.320 10.640,2.657 11.338,2.529 11.576 C 2.435 11.752,2.437 12.215,2.533 12.408 C 2.671 12.685,3.412 13.459,6.296 16.342 C 9.269 19.312,10.098 20.103,10.381 20.240 C 10.564 20.329,10.923 20.346,11.167 20.279 C 11.353 20.227,11.689 19.927,11.831 19.685 C 11.924 19.527,11.940 19.455,11.940 19.195 C 11.940 18.716,12.020 18.809,8.702 15.406 C 7.601 14.277,6.695 13.339,6.689 13.322 C 6.671 13.274,9.160 13.243,15.167 13.214 L 20.754 13.188 20.977 13.007 C 21.244 12.791,21.459 12.488,21.526 12.234 C 21.589 11.992,21.525 11.691,21.348 11.399 C 21.198 11.150,21.073 11.048,20.857 10.999 C 20.601 10.940,17.842 10.885,12.860 10.838 C 8.336 10.796,6.790 10.763,6.735 10.708 C 6.698 10.671,6.831 10.529,8.745 8.555 C 11.788 5.416,11.894 5.297,11.943 4.974 C 12.001 4.586,11.798 4.115,11.481 3.906 C 11.284 3.775,11.060 3.722,10.697 3.721 C 10.447 3.720,10.392 3.734,10.228 3.843 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.328 3.784 C 10.080 3.912,9.138 4.817,6.318 7.637 C 3.554 10.403,2.655 11.338,2.530 11.580 C 2.442 11.747,2.446 12.217,2.536 12.406 C 2.656 12.658,3.535 13.577,6.279 16.320 C 9.186 19.226,10.072 20.069,10.377 20.221 C 10.797 20.430,11.304 20.313,11.644 19.927 C 11.888 19.649,11.935 19.537,11.937 19.220 C 11.942 18.750,11.867 18.658,9.477 16.200 C 8.631 15.331,7.661 14.333,7.320 13.982 L 6.700 13.344 6.860 13.313 C 6.948 13.296,10.115 13.260,13.898 13.233 L 20.775 13.184 21.040 12.934 C 21.309 12.681,21.489 12.404,21.539 12.171 C 21.610 11.832,21.317 11.203,21.021 11.063 C 20.809 10.962,19.972 10.934,15.760 10.882 C 9.900 10.809,6.987 10.759,6.842 10.727 L 6.703 10.697 6.939 10.439 C 7.068 10.296,7.905 9.424,8.798 8.500 C 11.554 5.648,11.757 5.427,11.890 5.126 C 12.083 4.691,11.779 4.018,11.300 3.817 C 11.062 3.717,10.496 3.698,10.328 3.784 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-narrow-down.svg b/packages/icons/svg/arrow-narrow-down.svg
index f1b34709a4..51aa3f69f9 100644
--- a/packages/icons/svg/arrow-narrow-down.svg
+++ b/packages/icons/svg/arrow-narrow-down.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.415 2.638 C 11.150 2.790,10.897 3.079,10.861 3.269 C 10.846 3.350,10.820 6.553,10.805 10.387 C 10.789 14.221,10.765 17.369,10.751 17.382 C 10.737 17.396,10.225 16.921,9.613 16.327 C 8.334 15.086,7.924 14.724,7.630 14.575 C 7.425 14.471,7.411 14.469,7.086 14.513 C 6.547 14.585,6.223 14.834,6.094 15.276 C 5.955 15.752,6.077 16.031,6.759 16.792 C 7.667 17.805,10.994 21.038,11.444 21.346 C 11.759 21.561,11.937 21.595,12.254 21.504 C 12.413 21.457,12.560 21.371,12.752 21.209 C 13.216 20.820,14.817 19.250,16.302 17.725 C 17.506 16.490,17.739 16.232,17.845 16.015 C 17.956 15.790,17.969 15.732,17.950 15.523 C 17.913 15.120,17.658 14.753,17.296 14.581 C 17.208 14.539,17.042 14.520,16.768 14.520 L 16.368 14.520 16.041 14.784 C 15.679 15.076,15.034 15.685,13.930 16.777 L 13.200 17.499 13.200 10.354 L 13.200 3.209 12.863 2.890 C 12.490 2.536,12.449 2.520,11.945 2.520 C 11.659 2.521,11.595 2.535,11.415 2.638 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.495 2.601 C 11.250 2.723,11.017 2.939,10.925 3.130 C 10.843 3.299,10.842 3.359,10.802 10.040 C 10.779 13.747,10.761 16.910,10.760 17.070 C 10.760 17.230,10.746 17.360,10.729 17.360 C 10.712 17.360,10.168 16.853,9.519 16.234 C 7.844 14.635,7.590 14.444,7.205 14.498 C 6.487 14.599,6.111 14.925,6.051 15.501 C 6.025 15.756,6.129 16.007,6.423 16.400 C 6.789 16.889,10.288 20.361,11.240 21.180 C 11.361 21.284,11.556 21.415,11.674 21.470 C 12.088 21.663,12.388 21.540,13.120 20.874 C 13.740 20.310,16.414 17.634,17.186 16.805 C 17.862 16.080,17.983 15.877,17.948 15.537 C 17.920 15.269,17.794 14.997,17.614 14.816 C 17.386 14.589,17.264 14.545,16.797 14.528 L 16.373 14.512 15.997 14.825 C 15.585 15.167,15.004 15.716,13.910 16.798 L 13.200 17.499 13.200 10.353 L 13.200 3.207 12.873 2.904 C 12.506 2.562,12.407 2.521,11.960 2.520 C 11.738 2.520,11.617 2.541,11.495 2.601 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-narrow-left.svg b/packages/icons/svg/arrow-narrow-left.svg
index 10f0fadcc8..75d8d63714 100644
--- a/packages/icons/svg/arrow-narrow-left.svg
+++ b/packages/icons/svg/arrow-narrow-left.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.700 6.319 C 6.686 7.201,3.317 10.573,2.797 11.227 C 2.364 11.771,2.328 12.116,2.653 12.573 C 3.050 13.129,7.393 17.476,7.822 17.746 C 8.091 17.916,8.294 17.974,8.509 17.945 C 8.890 17.893,9.234 17.661,9.431 17.325 C 9.525 17.165,9.540 17.096,9.540 16.820 C 9.540 16.546,9.525 16.474,9.434 16.320 C 9.285 16.068,8.701 15.429,7.523 14.230 L 6.511 13.200 13.648 13.200 L 20.786 13.200 21.065 12.929 C 21.356 12.646,21.514 12.385,21.548 12.125 C 21.589 11.826,21.341 11.254,21.103 11.098 C 21.047 11.062,20.931 11.016,20.845 10.997 C 20.577 10.937,17.711 10.884,12.080 10.837 C 9.099 10.813,6.647 10.780,6.631 10.765 C 6.615 10.750,6.991 10.333,7.466 9.839 C 9.060 8.181,9.415 7.772,9.514 7.484 C 9.653 7.075,9.440 6.537,9.037 6.278 C 8.857 6.163,8.810 6.152,8.391 6.132 L 7.940 6.111 7.700 6.319 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.540 6.461 C 7.011 6.927,3.246 10.692,2.908 11.094 C 2.445 11.644,2.345 11.985,2.534 12.372 C 2.667 12.643,3.469 13.502,5.283 15.316 C 7.894 17.926,8.104 18.086,8.687 17.902 C 9.439 17.666,9.788 16.858,9.394 16.264 C 9.228 16.013,8.558 15.287,7.463 14.170 L 6.511 13.200 13.649 13.200 L 20.786 13.200 21.067 12.910 C 21.529 12.434,21.621 12.174,21.485 11.729 C 21.382 11.389,21.202 11.133,21.009 11.053 C 20.749 10.944,18.614 10.900,9.700 10.817 C 8.182 10.803,6.871 10.780,6.788 10.765 L 6.635 10.740 6.988 10.354 C 7.181 10.141,7.669 9.622,8.072 9.200 C 9.271 7.943,9.498 7.652,9.545 7.311 C 9.580 7.053,9.469 6.724,9.269 6.497 C 9.032 6.227,8.880 6.166,8.373 6.136 L 7.940 6.109 7.540 6.461 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-narrow-right.svg b/packages/icons/svg/arrow-narrow-right.svg
index aca31dc3f4..8bc0321f4d 100644
--- a/packages/icons/svg/arrow-narrow-right.svg
+++ b/packages/icons/svg/arrow-narrow-right.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.958 6.272 C 14.665 6.484,14.527 6.689,14.479 6.984 C 14.400 7.467,14.416 7.542,14.665 7.849 C 14.926 8.172,15.575 8.857,16.676 9.969 C 17.105 10.402,17.448 10.764,17.438 10.773 C 17.428 10.782,14.909 10.811,11.840 10.837 C 5.309 10.892,3.220 10.934,3.029 11.014 C 2.866 11.082,2.681 11.289,2.560 11.541 C 2.485 11.695,2.467 11.796,2.470 12.043 C 2.471 12.213,2.495 12.394,2.523 12.446 C 2.611 12.613,2.847 12.879,3.051 13.041 L 3.250 13.200 10.370 13.200 L 17.489 13.200 16.477 14.230 C 15.306 15.423,14.713 16.070,14.572 16.310 C 14.490 16.450,14.471 16.537,14.466 16.810 C 14.461 17.105,14.472 17.160,14.572 17.331 C 14.802 17.723,15.316 17.999,15.715 17.944 C 15.815 17.930,15.995 17.861,16.114 17.790 C 16.521 17.545,20.788 13.299,21.272 12.657 C 21.386 12.505,21.510 12.288,21.546 12.176 C 21.690 11.723,21.502 11.471,19.517 9.464 C 17.961 7.890,16.520 6.508,16.212 6.293 C 16.027 6.164,15.991 6.155,15.598 6.134 L 15.180 6.111 14.958 6.272 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.962 6.275 C 14.603 6.545,14.440 6.872,14.440 7.324 C 14.440 7.648,14.562 7.796,16.264 9.548 C 16.889 10.191,17.400 10.733,17.400 10.753 C 17.400 10.774,16.152 10.800,14.390 10.816 C 5.085 10.899,3.194 10.939,2.963 11.058 C 2.827 11.129,2.626 11.381,2.537 11.595 C 2.471 11.751,2.461 12.265,2.520 12.421 C 2.579 12.575,2.821 12.858,3.051 13.041 L 3.250 13.200 10.370 13.200 L 17.489 13.200 16.537 14.170 C 15.479 15.248,14.795 15.988,14.617 16.244 C 14.511 16.397,14.499 16.448,14.487 16.797 C 14.473 17.178,14.474 17.183,14.609 17.378 C 14.775 17.619,15.056 17.819,15.348 17.904 C 15.802 18.036,16.008 17.926,16.924 17.064 C 17.910 16.136,20.886 13.131,21.166 12.780 C 21.408 12.477,21.534 12.254,21.578 12.050 C 21.620 11.858,21.468 11.564,21.097 11.119 C 20.725 10.673,17.621 7.555,16.843 6.845 C 16.139 6.203,16.083 6.172,15.580 6.138 L 15.180 6.110 14.962 6.275 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-narrow-up.svg b/packages/icons/svg/arrow-narrow-up.svg
index 2d062d49fa..9c5f39cc21 100644
--- a/packages/icons/svg/arrow-narrow-up.svg
+++ b/packages/icons/svg/arrow-narrow-up.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.432 2.636 C 11.331 2.700,10.972 3.013,10.634 3.331 C 9.740 4.173,6.530 7.420,6.325 7.690 C 5.897 8.253,5.947 8.761,6.482 9.255 C 6.678 9.436,6.757 9.482,6.945 9.521 C 7.370 9.609,7.667 9.496,8.160 9.058 C 8.325 8.912,8.986 8.279,9.630 7.653 L 10.800 6.514 10.801 12.067 C 10.802 15.121,10.819 18.310,10.839 19.153 C 10.881 20.923,10.871 20.875,11.282 21.255 C 11.477 21.436,11.557 21.482,11.743 21.521 C 12.228 21.621,12.670 21.435,12.952 21.011 C 13.080 20.817,13.104 20.744,13.129 20.464 C 13.145 20.286,13.170 17.073,13.184 13.325 L 13.210 6.511 14.015 7.307 C 15.828 9.103,16.227 9.447,16.579 9.520 C 17.167 9.642,17.743 9.268,17.899 8.662 C 17.992 8.300,17.979 8.120,17.846 7.922 C 17.651 7.632,16.484 6.414,14.887 4.834 C 12.604 2.576,12.534 2.521,11.938 2.520 C 11.650 2.520,11.596 2.533,11.432 2.636 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.528 2.584 C 11.455 2.622,11.239 2.788,11.048 2.954 C 10.576 3.365,8.626 5.296,7.330 6.636 C 6.428 7.569,6.252 7.771,6.150 7.989 C 5.958 8.399,6.025 8.749,6.368 9.140 C 6.616 9.422,6.841 9.535,7.157 9.538 C 7.660 9.542,7.764 9.462,9.670 7.610 L 10.800 6.512 10.802 12.106 C 10.804 17.826,10.838 20.338,10.920 20.709 C 11.005 21.093,11.452 21.488,11.865 21.542 C 12.213 21.588,12.486 21.481,12.783 21.185 C 12.942 21.026,13.050 20.878,13.081 20.778 C 13.142 20.582,13.190 16.296,13.196 10.500 L 13.200 6.501 13.990 7.283 C 15.756 9.031,16.176 9.396,16.549 9.504 C 16.902 9.607,17.237 9.515,17.546 9.230 C 17.753 9.040,17.848 8.871,17.919 8.567 C 17.992 8.259,17.954 8.072,17.770 7.828 C 17.383 7.317,13.968 3.868,13.067 3.079 C 12.570 2.644,12.381 2.548,11.980 2.531 C 11.737 2.520,11.628 2.533,11.528 2.584 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-right.svg b/packages/icons/svg/arrow-right.svg
index c1f06cf54d..4767312dd6 100644
--- a/packages/icons/svg/arrow-right.svg
+++ b/packages/icons/svg/arrow-right.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.618 3.831 C 12.377 4.007,12.171 4.266,12.080 4.508 C 11.860 5.097,11.834 5.065,15.612 8.918 C 16.593 9.918,17.388 10.747,17.379 10.762 C 17.370 10.776,15.935 10.800,14.191 10.815 C 8.292 10.865,4.022 10.923,3.527 10.959 C 2.890 11.006,2.821 11.045,2.600 11.496 C 2.463 11.775,2.416 12.082,2.477 12.307 C 2.531 12.508,2.776 12.823,3.047 13.038 L 3.250 13.200 10.375 13.200 L 17.500 13.200 15.898 14.810 C 11.926 18.804,11.902 18.834,12.104 19.523 C 12.187 19.808,12.564 20.193,12.858 20.293 C 13.222 20.417,13.432 20.373,13.837 20.087 C 14.304 19.758,20.710 13.387,21.246 12.720 C 21.483 12.424,21.533 12.293,21.536 11.956 C 21.539 11.685,21.527 11.635,21.427 11.489 C 21.249 11.233,18.841 8.766,16.677 6.623 C 14.675 4.640,13.918 3.924,13.700 3.808 C 13.621 3.766,13.444 3.739,13.180 3.728 C 12.789 3.713,12.776 3.715,12.618 3.831 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.570 3.876 C 12.333 4.063,12.110 4.378,12.038 4.626 C 11.902 5.096,11.986 5.199,15.203 8.500 C 16.274 9.600,17.199 10.557,17.256 10.627 L 17.361 10.753 17.071 10.776 C 16.911 10.788,15.646 10.808,14.260 10.820 C 9.027 10.865,4.593 10.924,3.854 10.959 C 2.990 10.998,2.912 11.021,2.719 11.288 C 2.587 11.470,2.440 11.898,2.441 12.094 C 2.443 12.364,2.680 12.738,3.032 13.024 L 3.247 13.200 10.373 13.200 L 17.500 13.200 15.936 14.770 C 12.332 18.389,11.994 18.782,12.053 19.286 C 12.098 19.662,12.414 20.081,12.791 20.264 C 12.882 20.308,13.034 20.337,13.181 20.338 C 13.388 20.340,13.456 20.320,13.656 20.200 C 13.975 20.008,15.337 18.702,18.140 15.900 C 20.703 13.337,21.332 12.674,21.449 12.408 C 21.552 12.175,21.560 11.687,21.463 11.539 C 21.313 11.309,20.018 9.976,17.541 7.498 C 14.888 4.845,13.937 3.935,13.696 3.821 C 13.617 3.783,13.399 3.747,13.170 3.733 L 12.780 3.709 12.570 3.876 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-sm-down.svg b/packages/icons/svg/arrow-sm-down.svg
index 8f4896bb44..4db4810219 100644
--- a/packages/icons/svg/arrow-sm-down.svg
+++ b/packages/icons/svg/arrow-sm-down.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.493 4.984 C 11.309 5.075,11.059 5.299,10.955 5.467 C 10.870 5.606,10.864 5.668,10.835 6.737 C 10.819 7.355,10.802 9.417,10.798 11.320 C 10.794 13.223,10.779 14.833,10.765 14.899 C 10.740 15.015,10.721 14.999,9.640 13.954 C 8.225 12.586,7.955 12.347,7.647 12.193 C 7.397 12.067,7.393 12.067,7.097 12.113 C 6.548 12.198,6.219 12.448,6.094 12.877 C 6.007 13.173,6.044 13.436,6.208 13.708 C 6.417 14.053,7.037 14.710,8.784 16.440 C 10.571 18.210,11.374 18.959,11.596 19.065 C 11.778 19.152,12.225 19.150,12.412 19.061 C 12.612 18.966,12.952 18.655,14.660 16.998 C 16.218 15.486,17.327 14.342,17.663 13.896 C 18.109 13.305,18.029 12.693,17.450 12.276 C 17.265 12.144,17.248 12.140,16.818 12.127 L 16.376 12.114 16.045 12.381 C 15.680 12.676,15.037 13.282,13.930 14.377 L 13.200 15.099 13.200 10.354 L 13.200 5.609 12.863 5.290 C 12.640 5.078,12.484 4.963,12.398 4.946 C 12.153 4.897,11.626 4.919,11.493 4.984 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.606 4.960 C 11.268 5.040,10.938 5.394,10.877 5.742 C 10.851 5.889,10.822 7.702,10.801 10.460 C 10.782 12.924,10.765 14.945,10.763 14.951 C 10.750 14.999,10.469 14.748,9.515 13.835 C 8.186 12.563,7.948 12.356,7.634 12.197 C 7.420 12.089,7.365 12.077,7.185 12.101 C 6.697 12.167,6.357 12.361,6.188 12.672 C 5.946 13.118,6.009 13.473,6.425 14.000 C 6.719 14.372,9.934 17.603,10.800 18.397 C 11.526 19.063,11.619 19.120,11.978 19.119 C 12.165 19.119,12.314 19.094,12.420 19.045 C 12.640 18.944,13.389 18.247,15.196 16.460 C 17.662 14.021,17.942 13.682,17.938 13.141 C 17.936 12.857,17.837 12.639,17.610 12.418 C 17.376 12.190,17.268 12.152,16.800 12.130 L 16.376 12.109 16.012 12.412 C 15.601 12.754,14.946 13.373,13.910 14.397 L 13.200 15.099 13.200 10.354 L 13.200 5.608 12.890 5.318 C 12.720 5.159,12.522 5.004,12.451 4.974 C 12.313 4.916,11.827 4.908,11.606 4.960 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-sm-left.svg b/packages/icons/svg/arrow-sm-left.svg
index 941d935f3a..10d4c79fe4 100644
--- a/packages/icons/svg/arrow-sm-left.svg
+++ b/packages/icons/svg/arrow-sm-left.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.100 6.319 C 9.086 7.201,5.717 10.573,5.197 11.227 C 4.764 11.771,4.728 12.116,5.053 12.573 C 5.450 13.129,9.793 17.476,10.222 17.746 C 10.491 17.916,10.694 17.974,10.909 17.945 C 11.290 17.893,11.634 17.661,11.831 17.325 C 11.925 17.165,11.940 17.096,11.940 16.820 C 11.940 16.546,11.925 16.474,11.834 16.320 C 11.685 16.068,11.101 15.429,9.923 14.230 L 8.911 13.200 13.640 13.200 L 18.370 13.200 18.701 12.869 C 19.087 12.484,19.139 12.356,19.111 11.873 C 19.095 11.591,19.081 11.550,18.938 11.363 C 18.853 11.251,18.713 11.111,18.628 11.052 C 18.484 10.952,18.433 10.942,17.907 10.916 C 17.595 10.901,15.477 10.866,13.200 10.838 C 10.923 10.811,9.045 10.775,9.026 10.758 C 9.007 10.741,9.468 10.235,10.051 9.634 C 11.572 8.062,11.810 7.787,11.914 7.484 C 12.053 7.075,11.840 6.537,11.437 6.278 C 11.257 6.163,11.210 6.152,10.791 6.132 L 10.340 6.111 10.100 6.319 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.940 6.461 C 9.411 6.927,5.646 10.692,5.308 11.094 C 4.845 11.644,4.745 11.985,4.934 12.372 C 5.067 12.643,5.869 13.502,7.683 15.316 C 10.294 17.926,10.504 18.086,11.087 17.902 C 11.839 17.666,12.188 16.858,11.794 16.264 C 11.628 16.013,10.958 15.287,9.863 14.170 L 8.911 13.200 13.650 13.200 L 18.390 13.200 18.679 12.896 C 18.838 12.729,19.001 12.517,19.043 12.426 C 19.128 12.238,19.144 11.867,19.076 11.625 C 19.028 11.451,18.729 11.107,18.541 11.010 C 18.378 10.926,17.398 10.895,13.160 10.842 C 11.301 10.819,9.614 10.789,9.411 10.775 C 9.086 10.754,9.046 10.743,9.078 10.685 C 9.097 10.649,9.595 10.116,10.183 9.500 C 11.752 7.857,11.894 7.680,11.946 7.304 C 11.980 7.053,11.866 6.721,11.669 6.497 C 11.432 6.227,11.280 6.166,10.773 6.136 L 10.340 6.109 9.940 6.461 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-sm-right.svg b/packages/icons/svg/arrow-sm-right.svg
index 1106e24c3e..2f6018f16d 100644
--- a/packages/icons/svg/arrow-sm-right.svg
+++ b/packages/icons/svg/arrow-sm-right.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.558 6.272 C 12.265 6.484,12.127 6.689,12.079 6.984 C 12.000 7.467,12.016 7.542,12.265 7.849 C 12.528 8.175,13.178 8.860,14.297 9.990 L 15.099 10.800 14.440 10.799 C 14.077 10.799,11.935 10.819,9.680 10.844 L 5.580 10.889 5.376 11.041 C 4.977 11.339,4.783 11.800,4.877 12.224 C 4.940 12.503,5.120 12.764,5.415 13.003 L 5.659 13.200 10.374 13.200 L 15.089 13.200 14.077 14.230 C 12.906 15.423,12.313 16.070,12.172 16.310 C 12.090 16.450,12.071 16.537,12.066 16.810 C 12.061 17.105,12.072 17.160,12.172 17.331 C 12.402 17.723,12.916 17.999,13.315 17.944 C 13.415 17.930,13.595 17.861,13.714 17.790 C 14.121 17.545,18.388 13.299,18.872 12.657 C 18.986 12.505,19.110 12.288,19.146 12.176 C 19.206 11.988,19.206 11.958,19.145 11.774 C 19.032 11.434,18.613 10.970,16.601 8.957 C 14.643 6.997,13.944 6.338,13.696 6.221 C 13.616 6.183,13.401 6.147,13.170 6.134 L 12.780 6.111 12.558 6.272 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.562 6.275 C 12.442 6.365,12.295 6.512,12.235 6.601 C 12.040 6.891,11.984 7.374,12.116 7.632 C 12.216 7.828,12.843 8.512,14.078 9.770 L 15.088 10.800 14.754 10.799 C 14.570 10.799,12.431 10.819,10.000 10.844 L 5.580 10.890 5.460 10.980 C 5.066 11.273,4.859 11.635,4.866 12.020 C 4.873 12.402,5.029 12.677,5.430 13.010 L 5.659 13.200 10.374 13.200 L 15.089 13.200 14.137 14.170 C 13.079 15.248,12.395 15.988,12.217 16.244 C 12.111 16.397,12.099 16.448,12.087 16.797 C 12.073 17.178,12.074 17.183,12.209 17.378 C 12.375 17.619,12.656 17.819,12.948 17.904 C 13.402 18.036,13.608 17.926,14.524 17.064 C 15.503 16.142,18.483 13.134,18.770 12.778 C 19.004 12.486,19.199 12.123,19.200 11.976 C 19.200 11.804,18.949 11.406,18.571 10.980 C 18.086 10.433,14.943 7.288,14.320 6.725 C 14.067 6.496,13.788 6.277,13.700 6.237 C 13.606 6.195,13.383 6.154,13.160 6.138 L 12.780 6.111 12.562 6.275 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-sm-up.svg b/packages/icons/svg/arrow-sm-up.svg
index 0e59a4171b..42c6a00a18 100644
--- a/packages/icons/svg/arrow-sm-up.svg
+++ b/packages/icons/svg/arrow-sm-up.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.433 5.036 C 11.333 5.099,10.992 5.394,10.676 5.691 C 9.835 6.478,6.530 9.821,6.325 10.090 C 5.897 10.654,5.947 11.161,6.482 11.655 C 6.678 11.836,6.757 11.882,6.945 11.921 C 7.370 12.009,7.667 11.896,8.160 11.458 C 8.325 11.312,8.984 10.681,9.625 10.057 L 10.791 8.923 10.813 13.291 C 10.835 17.616,10.855 18.279,10.975 18.510 C 11.040 18.637,11.413 19.000,11.561 19.082 C 11.717 19.168,12.271 19.147,12.464 19.047 C 12.705 18.923,13.039 18.559,13.082 18.376 C 13.156 18.062,13.199 15.897,13.199 12.440 L 13.200 8.901 14.010 9.703 C 15.829 11.503,16.227 11.847,16.579 11.920 C 17.167 12.042,17.743 11.668,17.899 11.062 C 17.992 10.700,17.979 10.520,17.846 10.322 C 17.651 10.032,16.484 8.814,14.887 7.234 C 12.604 4.976,12.534 4.921,11.938 4.920 C 11.651 4.920,11.596 4.933,11.433 5.036 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.528 4.984 C 11.455 5.022,11.239 5.188,11.048 5.355 C 10.573 5.767,8.705 7.617,7.370 8.996 C 6.430 9.967,6.253 10.169,6.150 10.388 C 5.958 10.799,6.024 11.149,6.368 11.540 C 6.616 11.822,6.841 11.935,7.157 11.938 C 7.659 11.942,7.763 11.862,9.646 10.034 C 10.254 9.443,10.762 8.960,10.776 8.960 C 10.789 8.960,10.801 10.252,10.802 11.830 C 10.805 15.278,10.854 18.017,10.920 18.309 C 10.971 18.540,11.189 18.819,11.473 19.015 C 11.615 19.113,11.666 19.125,11.959 19.124 C 12.211 19.124,12.328 19.104,12.462 19.039 C 12.690 18.929,13.026 18.560,13.079 18.362 C 13.153 18.088,13.199 15.809,13.199 12.320 L 13.200 8.901 13.990 9.683 C 15.099 10.781,15.778 11.420,16.077 11.647 C 16.609 12.050,17.097 12.044,17.546 11.630 C 17.753 11.440,17.848 11.271,17.919 10.967 C 17.992 10.659,17.954 10.472,17.770 10.228 C 17.383 9.717,13.968 6.268,13.067 5.479 C 12.570 5.044,12.381 4.948,11.980 4.931 C 11.737 4.920,11.628 4.933,11.528 4.984 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/arrow-up.svg b/packages/icons/svg/arrow-up.svg
index 1eea941670..931ebf7e2f 100644
--- a/packages/icons/svg/arrow-up.svg
+++ b/packages/icons/svg/arrow-up.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.571 2.549 C 11.501 2.588,11.276 2.763,11.071 2.937 C 10.586 3.351,4.247 9.696,3.955 10.060 C 3.683 10.399,3.622 10.567,3.659 10.873 C 3.743 11.566,4.227 11.960,4.992 11.960 C 5.173 11.960,5.197 11.945,5.600 11.587 C 6.120 11.126,7.494 9.791,9.370 7.924 L 10.800 6.500 10.801 12.060 C 10.802 15.118,10.819 18.310,10.839 19.153 C 10.881 20.923,10.871 20.875,11.282 21.255 C 11.477 21.436,11.557 21.482,11.743 21.521 C 12.228 21.621,12.670 21.435,12.952 21.011 C 13.080 20.817,13.104 20.744,13.129 20.464 C 13.145 20.286,13.170 17.076,13.184 13.331 L 13.210 6.522 15.095 8.387 C 17.221 10.492,18.465 11.682,18.696 11.836 C 18.832 11.925,18.894 11.939,19.159 11.937 C 19.391 11.935,19.510 11.912,19.652 11.844 C 19.994 11.678,20.400 11.122,20.399 10.820 C 20.398 10.638,20.279 10.413,19.996 10.060 C 19.706 9.698,17.013 6.963,14.479 4.456 C 12.970 2.964,12.748 2.760,12.519 2.650 C 12.181 2.488,11.762 2.444,11.571 2.549 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.660 2.522 C 11.594 2.542,11.413 2.662,11.257 2.789 C 10.557 3.360,4.069 9.867,3.812 10.255 C 3.741 10.361,3.672 10.525,3.658 10.619 C 3.626 10.832,3.727 11.245,3.860 11.447 C 4.056 11.743,4.514 11.960,4.944 11.960 C 5.126 11.960,5.178 11.940,5.346 11.807 C 5.659 11.559,7.050 10.222,8.990 8.302 L 10.800 6.512 10.802 12.106 C 10.804 17.826,10.838 20.338,10.920 20.709 C 11.005 21.093,11.452 21.488,11.865 21.542 C 12.213 21.588,12.486 21.481,12.783 21.185 C 12.942 21.026,13.050 20.878,13.081 20.778 C 13.142 20.583,13.190 16.300,13.196 10.530 C 13.198 8.347,13.211 6.560,13.224 6.560 C 13.237 6.560,14.043 7.346,15.014 8.307 C 16.990 10.261,18.455 11.664,18.690 11.827 C 18.827 11.922,18.882 11.934,19.154 11.933 C 19.532 11.930,19.736 11.840,20.009 11.553 C 20.269 11.278,20.417 10.967,20.388 10.753 C 20.335 10.357,20.100 10.100,16.363 6.346 C 13.522 3.494,12.803 2.803,12.524 2.662 C 12.369 2.583,11.898 2.468,11.800 2.484 C 11.789 2.486,11.726 2.503,11.660 2.522 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/at-symbol.svg b/packages/icons/svg/at-symbol.svg
index 9b6e476d59..32d0ec7840 100644
--- a/packages/icons/svg/at-symbol.svg
+++ b/packages/icons/svg/at-symbol.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.200 2.503 C 11.123 2.512,10.889 2.539,10.680 2.563 C 10.156 2.624,9.189 2.876,8.617 3.102 C 6.657 3.876,5.139 5.077,4.023 6.740 C 3.347 7.746,2.727 9.323,2.520 10.560 C 2.496 10.703,2.466 11.243,2.454 11.760 C 2.427 12.852,2.477 13.351,2.697 14.211 C 3.032 15.518,3.589 16.713,4.309 17.671 C 4.594 18.049,5.365 18.853,5.900 19.329 C 6.903 20.222,8.157 20.867,9.680 21.274 C 10.499 21.493,10.825 21.528,12.080 21.531 C 13.107 21.533,13.260 21.525,13.620 21.446 C 15.311 21.078,16.589 20.531,17.307 19.865 C 17.637 19.560,17.737 19.352,17.711 19.026 C 17.662 18.426,17.299 18.068,16.627 17.961 C 16.300 17.909,16.258 17.920,15.605 18.219 C 14.954 18.517,14.222 18.808,13.800 18.935 C 12.233 19.407,10.479 19.213,8.775 18.378 C 7.700 17.851,6.828 17.073,6.111 16.001 C 5.686 15.366,5.202 14.320,5.041 13.693 C 4.970 13.414,4.916 11.724,4.958 11.080 C 5.002 10.398,5.092 10.049,5.417 9.297 C 6.015 7.917,6.795 6.915,7.794 6.247 C 8.635 5.685,9.688 5.181,10.277 5.058 C 10.692 4.971,12.169 4.915,12.862 4.959 C 13.575 5.005,14.034 5.112,14.660 5.380 C 16.408 6.128,17.598 7.253,18.426 8.940 C 18.720 9.538,18.884 10.019,18.978 10.560 C 19.052 10.978,19.107 12.143,19.064 12.370 C 19.031 12.550,18.740 12.881,18.485 13.031 C 18.327 13.124,18.256 13.140,18.000 13.139 C 17.641 13.138,17.460 13.057,17.211 12.787 C 17.024 12.585,16.966 12.420,16.744 11.460 C 16.438 10.135,16.211 9.631,15.609 8.933 C 15.393 8.683,14.928 8.286,14.568 8.044 C 14.280 7.850,13.626 7.517,13.358 7.427 C 13.073 7.332,12.416 7.308,11.480 7.358 L 10.620 7.404 10.160 7.647 C 8.863 8.331,8.147 9.014,7.679 10.013 C 7.386 10.637,7.241 11.278,7.241 11.940 C 7.241 13.054,7.521 13.899,8.182 14.780 C 8.619 15.363,9.366 16.003,9.951 16.296 C 10.496 16.570,11.318 16.760,11.961 16.760 C 13.323 16.760,14.330 16.318,15.548 15.185 L 15.835 14.917 16.121 15.061 C 16.566 15.284,17.180 15.474,17.634 15.527 C 18.622 15.643,19.481 15.365,20.293 14.666 C 20.851 14.186,21.339 13.427,21.462 12.849 C 21.538 12.486,21.538 11.125,21.460 10.543 C 21.255 8.997,20.417 7.176,19.302 5.852 C 18.027 4.338,15.976 3.087,14.171 2.723 C 13.401 2.568,11.716 2.443,11.200 2.503 M12.527 9.754 C 12.816 9.780,12.855 9.796,13.175 10.013 C 13.609 10.308,13.894 10.619,14.115 11.038 L 14.291 11.370 14.272 12.037 L 14.252 12.705 14.098 12.998 C 13.922 13.334,13.498 13.792,13.160 14.012 C 12.797 14.248,12.486 14.334,12.000 14.335 C 11.649 14.335,11.533 14.319,11.291 14.232 C 10.791 14.053,10.334 13.671,9.998 13.152 C 9.754 12.775,9.709 12.567,9.726 11.920 L 9.741 11.371 9.917 11.016 C 10.056 10.733,10.155 10.598,10.398 10.360 C 10.755 10.009,11.099 9.793,11.357 9.756 C 11.607 9.721,12.157 9.720,12.527 9.754 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.759 2.559 C 10.153 2.640,9.304 2.851,8.725 3.065 C 7.874 3.379,6.732 4.017,6.022 4.575 C 4.316 5.915,3.112 7.884,2.596 10.180 C 2.453 10.816,2.396 12.278,2.483 13.072 C 2.663 14.714,3.526 16.772,4.515 17.920 C 6.061 19.712,7.465 20.635,9.568 21.239 C 10.451 21.493,10.801 21.528,12.249 21.511 L 13.500 21.495 14.077 21.344 C 15.574 20.952,16.652 20.458,17.307 19.866 C 17.543 19.652,17.720 19.332,17.720 19.119 C 17.720 18.904,17.616 18.595,17.483 18.410 C 17.307 18.168,16.926 17.992,16.525 17.969 L 16.216 17.951 15.558 18.240 C 14.310 18.789,13.743 18.986,13.080 19.099 C 12.031 19.277,11.028 19.189,9.879 18.818 C 8.240 18.290,7.054 17.399,6.101 15.980 C 5.856 15.614,5.317 14.517,5.159 14.060 C 4.992 13.579,4.948 13.000,4.971 11.640 C 4.987 10.740,5.002 10.532,5.072 10.260 C 5.241 9.607,5.727 8.572,6.193 7.877 C 6.867 6.870,7.708 6.187,9.100 5.517 C 10.145 5.014,10.305 4.984,12.000 4.982 C 12.912 4.980,13.337 4.995,13.540 5.035 C 14.544 5.232,15.847 5.895,16.711 6.650 C 17.809 7.608,18.782 9.310,18.978 10.614 C 19.065 11.194,19.102 12.232,19.042 12.415 C 18.985 12.587,18.643 12.954,18.439 13.062 C 18.264 13.154,17.804 13.159,17.594 13.070 C 17.374 12.976,17.139 12.742,17.044 12.521 C 16.997 12.411,16.853 11.903,16.724 11.391 C 16.595 10.879,16.425 10.302,16.347 10.108 C 15.913 9.036,14.867 8.064,13.553 7.511 C 13.166 7.349,12.662 7.313,11.520 7.365 L 10.620 7.406 10.096 7.688 C 8.544 8.523,7.738 9.468,7.373 10.880 C 7.193 11.575,7.206 12.522,7.405 13.252 C 7.518 13.666,7.874 14.366,8.174 14.761 C 8.649 15.388,9.422 16.042,10.020 16.322 C 11.056 16.808,12.380 16.890,13.436 16.536 C 14.100 16.313,14.832 15.847,15.526 15.204 L 15.831 14.921 16.166 15.077 C 16.869 15.406,17.410 15.537,18.060 15.537 C 18.910 15.537,19.573 15.275,20.308 14.650 C 20.762 14.265,21.241 13.556,21.411 13.020 C 21.494 12.760,21.500 12.665,21.499 11.700 C 21.497 10.558,21.451 10.195,21.202 9.387 C 20.381 6.720,18.667 4.695,16.175 3.448 C 14.987 2.853,14.076 2.633,12.340 2.520 C 11.561 2.470,11.407 2.473,10.759 2.559 M12.900 9.856 C 13.179 9.984,13.633 10.351,13.828 10.606 C 13.918 10.724,14.060 10.944,14.142 11.094 L 14.292 11.369 14.267 12.050 C 14.241 12.731,14.241 12.731,14.104 12.975 C 13.885 13.367,13.452 13.829,13.093 14.053 C 12.751 14.267,12.471 14.329,11.917 14.314 C 11.416 14.300,11.412 14.299,11.067 14.128 C 10.677 13.935,10.286 13.582,10.028 13.191 C 9.768 12.797,9.744 12.695,9.742 11.980 L 9.740 11.340 9.912 11.023 C 10.113 10.652,10.238 10.499,10.574 10.207 C 10.879 9.943,11.159 9.793,11.420 9.755 C 11.530 9.739,11.863 9.735,12.160 9.745 C 12.612 9.761,12.732 9.779,12.900 9.856 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/auth0.svg b/packages/icons/svg/auth0.svg
index 19c65b818d..41f438a08a 100644
--- a/packages/icons/svg/auth0.svg
+++ b/packages/icons/svg/auth0.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.164 3.090 C 6.145 3.139,5.747 4.368,5.279 5.820 C 4.811 7.272,4.420 8.483,4.410 8.510 C 4.395 8.550,4.979 8.558,7.301 8.550 L 10.212 8.540 11.077 5.860 C 11.553 4.386,11.957 3.144,11.974 3.100 C 11.998 3.042,12.247 3.765,12.897 5.780 L 13.788 8.540 16.694 8.550 C 18.292 8.556,19.599 8.547,19.598 8.530 C 19.596 8.514,19.196 7.267,18.707 5.760 L 17.819 3.020 12.009 3.010 L 6.198 3.000 6.164 3.090 M4.286 8.930 C 3.773 10.905,3.959 12.826,4.839 14.620 C 5.245 15.450,5.672 16.046,6.351 16.733 C 6.853 17.241,6.810 17.208,9.610 19.255 L 11.999 21.002 14.390 19.254 C 15.704 18.293,16.906 17.404,17.060 17.278 C 17.400 17.001,18.075 16.308,18.326 15.980 C 19.572 14.348,20.177 12.209,19.957 10.208 C 19.886 9.559,19.669 8.600,19.593 8.600 C 19.567 8.600,15.101 11.838,14.923 11.986 C 14.914 11.994,15.305 13.237,15.792 14.748 C 16.279 16.259,16.672 17.502,16.663 17.510 C 16.655 17.518,15.603 16.760,14.325 15.825 L 12.001 14.126 9.676 15.825 C 8.398 16.760,7.344 17.517,7.334 17.508 C 7.325 17.498,7.717 16.255,8.206 14.746 C 8.694 13.236,9.087 11.995,9.077 11.987 C 8.902 11.841,4.435 8.600,4.409 8.600 C 4.389 8.600,4.333 8.748,4.286 8.930 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.172 3.068 C 6.157 3.105,5.756 4.342,5.279 5.818 L 4.413 8.500 4.523 8.530 C 4.584 8.547,5.889 8.556,7.423 8.550 L 10.212 8.540 10.761 6.840 C 11.063 5.905,11.457 4.685,11.637 4.129 C 11.817 3.573,11.981 3.128,12.001 3.140 C 12.034 3.161,12.754 5.324,13.491 7.620 L 13.787 8.540 16.604 8.551 C 18.153 8.557,19.459 8.553,19.507 8.541 L 19.594 8.520 19.504 8.230 C 19.454 8.071,19.057 6.840,18.622 5.496 L 17.830 3.053 15.645 3.027 C 14.443 3.012,11.826 3.000,9.829 3.000 C 6.456 3.000,6.196 3.005,6.172 3.068 M4.361 8.696 C 4.201 9.117,4.041 10.086,4.013 10.800 C 3.965 12.000,4.181 13.107,4.697 14.301 C 5.109 15.256,5.573 15.932,6.359 16.725 C 6.913 17.282,6.998 17.348,9.990 19.535 L 12.000 21.004 13.270 20.075 C 17.203 17.197,17.365 17.070,18.028 16.325 C 19.589 14.572,20.306 11.946,19.864 9.600 C 19.757 9.029,19.658 8.656,19.607 8.624 C 19.579 8.607,17.778 9.892,15.690 11.420 C 14.986 11.935,14.926 11.988,14.949 12.080 C 14.973 12.177,15.209 12.922,16.177 15.957 C 16.433 16.758,16.637 17.429,16.630 17.449 C 16.617 17.490,16.052 17.090,13.734 15.394 C 12.806 14.715,12.026 14.160,12.001 14.160 C 11.975 14.160,11.288 14.647,10.474 15.243 C 8.104 16.976,7.383 17.489,7.369 17.448 C 7.356 17.407,7.574 16.703,8.220 14.700 C 8.795 12.918,9.085 11.992,9.072 11.980 C 9.000 11.917,4.930 8.966,4.530 8.686 L 4.400 8.595 4.361 8.696 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/authentik.svg b/packages/icons/svg/authentik.svg
new file mode 100644
index 0000000000..bafe76ed7c
--- /dev/null
+++ b/packages/icons/svg/authentik.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="" stroke="none" fill="black" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/autodesk.svg b/packages/icons/svg/autodesk.svg
new file mode 100644
index 0000000000..5c7261fcb0
--- /dev/null
+++ b/packages/icons/svg/autodesk.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.120 8.876 L 2.020 12.751 2.010 15.876 C 2.001 18.541,2.008 19.000,2.056 19.000 C 2.087 19.000,4.869 17.245,8.238 15.099 L 14.363 11.199 17.625 11.209 L 20.887 11.220 20.983 11.332 C 21.109 11.478,21.111 11.681,20.990 11.815 C 20.941 11.870,19.541 12.746,17.880 13.761 C 16.219 14.777,14.794 15.672,14.712 15.750 C 14.631 15.828,14.523 15.983,14.472 16.096 C 14.383 16.294,14.380 16.338,14.368 17.650 L 14.355 19.000 18.178 19.000 L 22.000 19.000 22.000 12.196 C 22.000 6.083,21.994 5.379,21.937 5.259 C 21.808 4.987,22.009 5.000,17.914 5.000 L 14.220 5.000 8.120 8.876 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/backspace.svg b/packages/icons/svg/backspace.svg
index fd3cf50ad2..1ec1ebfc57 100644
--- a/packages/icons/svg/backspace.svg
+++ b/packages/icons/svg/backspace.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.400 4.882 C 9.833 4.924,9.591 4.943,9.051 5.214 C 8.547 5.468,8.092 5.875,6.006 7.937 C 4.777 9.153,2.815 11.173,2.602 11.442 C 2.440 11.647,2.440 11.648,2.440 12.000 C 2.440 12.349,2.442 12.355,2.594 12.547 C 2.841 12.861,5.154 15.229,6.643 16.695 C 8.315 18.340,8.632 18.604,9.345 18.947 L 9.870 19.200 14.285 19.200 L 18.700 19.199 19.131 19.003 C 19.680 18.752,20.151 18.439,20.495 18.095 C 20.970 17.619,21.444 16.810,21.526 16.333 C 21.550 16.193,21.575 14.440,21.587 11.954 L 21.608 7.808 21.442 7.394 C 20.978 6.238,20.454 5.680,19.300 5.116 L 18.736 4.840 17.278 4.847 C 16.476 4.850,14.731 4.866,13.400 4.882 M12.379 8.565 C 12.624 8.633,12.808 8.778,13.636 9.561 L 14.402 10.286 15.071 9.651 C 15.439 9.302,15.856 8.914,15.997 8.788 L 16.254 8.560 16.751 8.560 C 17.335 8.560,17.448 8.598,17.636 8.861 C 17.832 9.133,17.880 9.285,17.880 9.633 C 17.880 9.930,17.872 9.960,17.726 10.184 C 17.547 10.458,17.152 10.914,16.543 11.549 L 16.113 11.999 16.715 12.629 C 17.363 13.308,17.719 13.734,17.824 13.955 C 17.908 14.131,17.884 14.715,17.785 14.924 C 17.633 15.245,17.272 15.506,16.924 15.547 C 16.462 15.602,16.182 15.421,15.070 14.356 L 14.400 13.714 13.750 14.333 C 12.560 15.466,12.470 15.528,11.988 15.530 C 11.590 15.532,11.487 15.486,11.212 15.186 C 10.984 14.936,10.901 14.711,10.903 14.340 C 10.903 14.171,10.930 14.050,10.992 13.931 C 11.112 13.703,11.564 13.168,12.177 12.530 L 12.687 12.001 12.085 11.370 C 11.365 10.616,11.101 10.293,10.968 10.005 C 10.883 9.819,10.872 9.752,10.892 9.518 C 10.920 9.180,10.990 9.044,11.282 8.751 L 11.514 8.520 11.867 8.520 C 12.061 8.520,12.292 8.540,12.379 8.565 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.660 4.882 C 9.972 4.926,9.591 4.953,9.061 5.216 C 8.907 5.293,8.632 5.474,8.452 5.619 C 7.945 6.026,6.294 7.629,4.636 9.323 C 2.889 11.107,2.528 11.493,2.477 11.627 C 2.430 11.751,2.429 12.245,2.475 12.368 C 2.527 12.503,2.977 12.982,4.775 14.817 C 6.624 16.703,8.061 18.089,8.555 18.464 C 8.745 18.607,9.115 18.832,9.378 18.962 L 9.857 19.200 14.283 19.200 L 18.710 19.200 19.105 19.017 C 19.678 18.752,20.217 18.378,20.564 18.007 C 21.034 17.503,21.421 16.825,21.520 16.332 C 21.542 16.222,21.570 14.361,21.584 11.960 L 21.610 7.780 21.421 7.340 C 21.156 6.726,20.947 6.389,20.608 6.033 C 20.257 5.665,19.867 5.398,19.212 5.078 L 18.724 4.840 17.392 4.847 C 16.659 4.850,14.980 4.866,13.660 4.882 M12.313 8.557 C 12.567 8.606,12.834 8.810,13.660 9.586 L 14.403 10.286 15.032 9.692 C 15.377 9.365,15.793 8.977,15.955 8.829 L 16.250 8.560 16.675 8.561 C 17.207 8.562,17.376 8.601,17.539 8.759 C 17.776 8.989,17.860 9.214,17.860 9.620 C 17.860 9.977,17.859 9.982,17.694 10.220 C 17.474 10.537,17.258 10.788,16.630 11.453 L 16.108 12.006 16.447 12.353 C 17.361 13.290,17.773 13.791,17.845 14.056 C 17.899 14.257,17.863 14.700,17.775 14.920 C 17.626 15.292,17.092 15.600,16.690 15.545 C 16.331 15.496,16.067 15.300,15.031 14.314 L 14.402 13.715 13.620 14.453 C 13.191 14.859,12.739 15.260,12.616 15.345 C 12.415 15.483,12.362 15.500,12.096 15.514 C 11.681 15.535,11.556 15.502,11.344 15.315 C 11.049 15.056,10.948 14.847,10.928 14.456 C 10.913 14.177,10.924 14.098,10.995 13.949 C 11.107 13.718,11.481 13.270,12.145 12.570 L 12.686 12.000 12.128 11.410 C 11.001 10.221,10.848 9.982,10.900 9.500 C 10.934 9.189,10.998 9.060,11.266 8.764 L 11.487 8.520 11.813 8.522 C 11.993 8.523,12.218 8.538,12.313 8.557 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/badge-check.svg b/packages/icons/svg/badge-check.svg
index 0bace6968f..2aab1feb91 100644
--- a/packages/icons/svg/badge-check.svg
+++ b/packages/icons/svg/badge-check.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.140 2.560 C 10.870 2.600,10.524 2.763,9.779 3.201 C 8.949 3.688,8.711 3.794,7.838 4.060 C 6.011 4.618,5.825 4.702,5.299 5.220 C 4.691 5.818,4.590 6.012,4.181 7.379 C 3.836 8.531,3.758 8.717,3.205 9.713 C 2.564 10.868,2.511 11.029,2.489 11.888 C 2.462 12.899,2.515 13.081,3.179 14.235 C 3.709 15.159,3.850 15.491,4.135 16.481 C 4.447 17.569,4.518 17.762,4.719 18.073 C 4.917 18.381,5.585 19.050,5.908 19.265 C 6.207 19.465,6.629 19.622,7.568 19.883 C 8.564 20.160,8.793 20.258,9.772 20.828 C 10.821 21.438,11.080 21.519,12.000 21.519 C 12.923 21.519,13.180 21.438,14.237 20.822 C 15.023 20.363,15.522 20.137,16.100 19.978 C 17.002 19.730,17.531 19.558,17.820 19.420 C 18.376 19.154,19.162 18.359,19.442 17.780 C 19.533 17.590,19.703 17.078,19.860 16.520 C 20.147 15.498,20.329 15.064,20.812 14.250 C 21.444 13.187,21.495 13.018,21.495 12.020 C 21.495 11.007,21.446 10.844,20.812 9.740 C 20.233 8.733,20.144 8.522,19.859 7.497 C 19.479 6.135,19.401 5.974,18.820 5.365 C 18.220 4.737,17.930 4.583,16.635 4.204 C 15.319 3.820,15.223 3.780,14.231 3.212 C 13.428 2.752,13.077 2.605,12.670 2.559 C 12.292 2.515,11.436 2.516,11.140 2.560 M16.213 8.667 C 16.581 8.927,16.673 9.145,16.678 9.767 L 16.680 10.074 16.295 10.501 C 15.774 11.077,12.120 14.729,11.731 15.062 C 11.318 15.414,11.129 15.521,10.867 15.548 C 10.471 15.589,10.183 15.402,9.237 14.491 C 8.600 13.878,7.580 12.790,7.451 12.586 C 7.366 12.451,7.348 12.364,7.330 12.017 C 7.311 11.647,7.317 11.594,7.395 11.469 C 7.502 11.294,7.808 11.010,7.943 10.959 C 8.107 10.897,8.709 10.911,8.856 10.981 C 9.067 11.081,9.502 11.447,10.173 12.088 L 10.807 12.693 11.913 11.594 C 13.430 10.089,14.353 9.197,14.780 8.824 L 15.140 8.510 15.597 8.532 C 16.015 8.552,16.066 8.564,16.213 8.667 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.213 2.556 C 10.920 2.593,10.516 2.779,9.670 3.265 C 8.925 3.692,8.744 3.768,7.640 4.118 C 6.538 4.467,6.270 4.563,5.972 4.715 C 5.513 4.948,4.870 5.599,4.643 6.060 C 4.573 6.202,4.446 6.538,4.361 6.809 C 4.275 7.079,4.120 7.570,4.016 7.900 C 3.881 8.326,3.734 8.680,3.507 9.120 C 2.444 11.186,2.500 11.021,2.501 12.100 C 2.501 12.780,2.507 12.836,2.609 13.116 C 2.668 13.278,2.922 13.782,3.175 14.236 C 3.735 15.241,3.840 15.494,4.180 16.640 C 4.564 17.937,4.609 18.019,5.295 18.701 C 6.025 19.425,6.063 19.444,7.818 19.960 C 8.578 20.184,8.815 20.289,9.720 20.800 C 10.851 21.440,11.101 21.519,12.000 21.519 C 12.898 21.519,13.143 21.441,14.303 20.790 C 15.188 20.293,15.523 20.149,16.362 19.905 C 17.518 19.568,17.787 19.466,18.129 19.235 C 18.462 19.010,19.015 18.448,19.247 18.099 C 19.466 17.771,19.562 17.527,19.816 16.660 C 20.164 15.472,20.320 15.097,20.820 14.240 C 21.195 13.597,21.376 13.212,21.435 12.928 C 21.504 12.600,21.493 11.306,21.419 11.022 C 21.341 10.723,21.143 10.314,20.665 9.466 C 20.243 8.718,20.138 8.455,19.815 7.343 C 19.693 6.923,19.539 6.448,19.471 6.286 C 19.269 5.800,18.692 5.147,18.162 4.805 C 17.841 4.597,17.502 4.467,16.419 4.140 C 15.413 3.836,15.094 3.707,14.468 3.347 C 13.805 2.967,13.228 2.686,12.969 2.618 C 12.703 2.548,11.590 2.509,11.213 2.556 M16.179 8.657 C 16.533 8.866,16.641 9.085,16.670 9.662 L 16.691 10.064 16.270 10.522 C 15.509 11.349,11.708 15.102,11.440 15.290 C 10.810 15.732,10.494 15.648,9.560 14.793 C 8.805 14.102,7.551 12.774,7.426 12.532 C 7.356 12.396,7.299 11.824,7.336 11.626 C 7.370 11.445,7.668 11.112,7.894 11.003 C 8.080 10.913,8.454 10.893,8.733 10.957 C 8.992 11.017,9.279 11.245,10.213 12.131 L 10.807 12.693 11.873 11.634 C 13.362 10.157,14.358 9.194,14.780 8.825 L 15.140 8.510 15.579 8.536 C 15.938 8.558,16.046 8.580,16.179 8.657 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/ban.svg b/packages/icons/svg/ban.svg
index f5a7337e42..bf66a3aa96 100644
--- a/packages/icons/svg/ban.svg
+++ b/packages/icons/svg/ban.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.969 4.939 C 13.738 5.055,14.409 5.262,15.114 5.602 C 15.947 6.003,16.338 6.284,17.042 6.994 C 17.718 7.674,17.932 7.964,18.318 8.720 C 18.623 9.317,18.765 9.680,18.905 10.220 L 19.020 10.660 19.019 12.060 C 19.017 13.594,19.009 13.660,18.737 14.347 C 18.591 14.715,18.073 15.826,17.967 15.999 L 17.882 16.138 12.881 11.140 C 10.130 8.391,7.880 6.129,7.880 6.112 C 7.880 6.072,8.932 5.561,9.460 5.346 C 9.947 5.147,10.398 5.022,10.917 4.941 C 11.389 4.868,12.488 4.867,12.969 4.939 M11.374 13.096 L 16.169 17.856 16.054 17.949 C 15.904 18.071,15.165 18.433,14.652 18.636 C 13.897 18.935,13.320 19.080,12.700 19.125 C 11.850 19.188,11.004 19.139,10.447 18.995 C 8.234 18.421,6.548 17.072,5.582 15.105 C 5.343 14.619,5.117 13.982,5.021 13.526 C 4.936 13.121,4.934 10.868,5.019 10.469 C 5.122 9.981,5.360 9.353,5.723 8.604 L 6.081 7.869 6.330 8.102 C 6.468 8.231,8.738 10.478,11.374 13.096 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M13.370 5.017 C 14.237 5.193,15.251 5.607,15.962 6.075 C 16.547 6.461,17.492 7.389,17.880 7.960 C 18.273 8.539,18.715 9.514,18.902 10.215 L 19.006 10.606 18.990 12.153 C 18.972 13.843,18.987 13.728,18.702 14.421 C 18.516 14.873,17.915 16.120,17.882 16.120 C 17.869 16.120,15.609 13.868,12.859 11.115 L 7.860 6.110 8.562 5.765 C 10.039 5.040,10.752 4.869,12.168 4.901 C 12.716 4.914,12.988 4.940,13.370 5.017 M11.594 13.321 L 16.167 17.857 16.074 17.933 C 15.763 18.185,14.380 18.774,13.669 18.958 C 12.798 19.182,11.551 19.217,10.688 19.042 C 10.208 18.944,9.484 18.699,8.986 18.466 C 7.097 17.581,5.686 15.892,5.090 13.800 L 4.981 13.420 4.982 12.000 C 4.982 10.662,4.987 10.561,5.070 10.260 C 5.193 9.809,5.421 9.242,5.776 8.502 L 6.082 7.863 6.551 8.324 C 6.809 8.577,9.078 10.826,11.594 13.321 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/beaker.svg b/packages/icons/svg/beaker.svg
index a217f926e0..ae0acc02de 100644
--- a/packages/icons/svg/beaker.svg
+++ b/packages/icons/svg/beaker.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.260 2.518 C 7.893 2.552,7.744 2.617,7.566 2.819 C 7.341 3.076,7.267 3.268,7.265 3.600 C 7.263 4.008,7.383 4.211,8.066 4.951 L 8.408 5.323 8.361 7.451 C 8.306 9.972,8.287 10.231,8.139 10.425 C 8.004 10.602,7.557 11.073,5.601 13.100 C 2.973 15.823,2.827 15.982,2.589 16.400 C 2.272 16.954,2.143 18.088,2.318 18.773 C 2.496 19.469,2.815 20.007,3.383 20.572 C 3.751 20.938,4.053 21.133,4.697 21.419 L 5.134 21.613 10.997 21.585 C 17.386 21.555,18.878 21.525,19.257 21.420 C 20.082 21.191,20.993 20.372,21.440 19.460 C 21.671 18.989,21.719 18.731,21.719 17.958 C 21.720 17.188,21.680 16.985,21.430 16.506 C 21.140 15.948,21.065 15.864,17.995 12.677 C 16.969 11.611,16.022 10.616,15.891 10.465 L 15.653 10.190 15.628 7.749 L 15.602 5.307 15.879 5.016 C 16.625 4.230,16.811 3.880,16.726 3.423 C 16.642 2.972,16.329 2.628,15.932 2.551 C 15.698 2.506,8.710 2.475,8.260 2.518 M13.200 7.593 L 13.200 10.386 13.300 10.680 C 13.537 11.378,13.828 11.815,14.738 12.839 C 15.385 13.567,15.424 13.489,14.380 13.559 C 13.536 13.617,13.233 13.668,12.200 13.927 L 11.380 14.133 10.720 14.085 C 9.973 14.030,9.444 13.937,8.871 13.759 L 8.477 13.637 9.013 13.068 C 10.152 11.862,10.375 11.547,10.682 10.714 L 10.800 10.395 10.800 7.597 L 10.800 4.800 12.000 4.800 L 13.200 4.800 13.200 7.593 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.976 2.564 C 7.753 2.616,7.507 2.836,7.378 3.100 C 7.283 3.294,7.273 3.355,7.286 3.652 C 7.299 3.959,7.312 4.005,7.446 4.207 C 7.527 4.328,7.776 4.629,8.000 4.876 L 8.407 5.324 8.364 7.212 C 8.295 10.229,8.292 10.252,8.011 10.572 C 7.911 10.687,6.835 11.815,5.620 13.080 C 3.159 15.643,2.898 15.924,2.697 16.227 C 2.294 16.834,2.128 17.951,2.321 18.756 C 2.476 19.401,2.781 19.933,3.318 20.494 C 3.674 20.868,3.982 21.079,4.587 21.367 L 5.100 21.612 10.900 21.585 C 16.755 21.558,18.758 21.522,19.160 21.436 C 20.115 21.233,21.216 20.171,21.585 19.097 C 21.681 18.817,21.696 18.705,21.711 18.133 C 21.733 17.351,21.688 17.054,21.483 16.620 C 21.205 16.031,21.179 16.001,18.381 13.080 C 17.233 11.881,16.150 10.742,15.973 10.549 L 15.652 10.198 15.629 7.749 L 15.605 5.300 15.837 5.060 C 16.495 4.378,16.737 3.985,16.736 3.600 C 16.735 3.209,16.496 2.819,16.140 2.626 L 15.980 2.540 12.060 2.533 C 9.699 2.529,8.075 2.542,7.976 2.564 M13.200 7.593 L 13.200 10.386 13.294 10.663 C 13.501 11.271,13.842 11.811,14.475 12.534 C 14.992 13.124,15.200 13.375,15.200 13.408 C 15.200 13.481,15.008 13.519,14.436 13.560 C 13.601 13.620,13.206 13.685,12.220 13.927 L 11.380 14.134 10.760 14.087 C 9.916 14.023,9.545 13.956,8.809 13.736 L 8.479 13.637 9.105 12.969 C 10.109 11.897,10.362 11.538,10.665 10.753 L 10.800 10.403 10.800 7.602 L 10.800 4.800 12.000 4.800 L 13.200 4.800 13.200 7.593 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/behance.svg b/packages/icons/svg/behance.svg
index 83bc497c87..b83c366481 100644
--- a/packages/icons/svg/behance.svg
+++ b/packages/icons/svg/behance.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.000 11.863 L 2.000 17.725 5.130 17.708 C 7.775 17.693,8.308 17.681,8.569 17.628 C 10.149 17.305,10.995 16.765,11.465 15.780 C 11.695 15.299,11.771 14.935,11.771 14.320 C 11.771 13.668,11.692 13.320,11.419 12.776 C 11.109 12.157,10.645 11.736,9.974 11.466 L 9.656 11.337 9.884 11.204 C 10.380 10.915,10.831 10.443,11.024 10.013 C 11.341 9.304,11.297 8.145,10.923 7.407 C 10.541 6.651,9.654 6.195,8.272 6.043 C 8.032 6.016,6.759 6.000,4.942 6.000 L 2.000 6.000 2.000 11.863 M14.400 7.380 L 14.400 7.960 16.760 7.960 L 19.120 7.960 19.120 7.380 L 19.120 6.800 16.760 6.800 L 14.400 6.800 14.400 7.380 M7.969 8.116 C 8.249 8.231,8.497 8.438,8.601 8.642 C 8.780 8.992,8.780 9.728,8.601 10.078 C 8.440 10.394,8.029 10.639,7.520 10.723 C 7.399 10.743,6.684 10.760,5.930 10.760 L 4.560 10.760 4.560 9.378 L 4.560 7.995 6.150 8.009 C 7.712 8.022,7.744 8.024,7.969 8.116 M16.400 9.046 C 15.410 9.149,14.563 9.549,13.878 10.237 C 13.264 10.853,12.863 11.651,12.702 12.575 C 12.586 13.239,12.637 14.408,12.805 14.960 C 12.929 15.368,13.107 15.809,13.241 16.040 C 13.426 16.359,13.898 16.894,14.220 17.149 C 15.209 17.934,16.903 18.212,18.275 17.815 C 19.347 17.504,20.065 16.904,20.574 15.893 C 20.714 15.615,20.880 15.211,20.880 15.150 C 20.880 15.133,20.423 15.120,19.864 15.120 L 18.848 15.120 18.747 15.290 C 18.605 15.529,18.257 15.857,18.017 15.976 C 17.679 16.145,17.379 16.207,16.920 16.205 C 16.018 16.202,15.474 15.904,15.145 15.236 C 14.996 14.934,14.882 14.499,14.881 14.230 L 14.880 14.080 17.930 14.070 L 20.980 14.060 20.992 13.600 C 21.009 12.985,20.936 12.298,20.814 11.924 C 20.759 11.757,20.626 11.440,20.518 11.220 C 19.882 9.923,18.812 9.174,17.408 9.041 C 16.932 8.995,16.883 8.996,16.400 9.046 M17.288 10.845 C 17.795 10.951,18.188 11.247,18.427 11.700 C 18.551 11.936,18.680 12.351,18.680 12.516 L 18.680 12.600 16.794 12.600 L 14.909 12.600 14.934 12.390 C 14.994 11.876,15.161 11.554,15.523 11.257 C 15.908 10.940,16.273 10.809,16.788 10.803 C 16.946 10.802,17.171 10.820,17.288 10.845 M8.072 12.570 C 8.701 12.758,9.045 13.119,9.162 13.713 C 9.222 14.019,9.192 14.547,9.099 14.810 C 9.005 15.078,8.725 15.373,8.424 15.521 C 8.004 15.728,7.713 15.757,6.050 15.759 L 4.560 15.760 4.560 14.117 L 4.560 12.474 6.210 12.491 C 7.562 12.504,7.898 12.519,8.072 12.570 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.000 11.856 L 2.000 17.720 4.290 17.717 C 5.550 17.716,7.021 17.700,7.560 17.682 C 8.474 17.652,8.572 17.642,9.013 17.525 C 10.301 17.184,11.038 16.660,11.460 15.783 C 11.686 15.312,11.760 14.953,11.760 14.320 C 11.760 13.671,11.685 13.320,11.442 12.835 C 11.104 12.158,10.698 11.787,9.926 11.450 L 9.672 11.338 9.990 11.131 C 10.367 10.886,10.817 10.419,10.969 10.116 C 11.161 9.734,11.219 9.435,11.218 8.840 C 11.214 7.435,10.654 6.658,9.360 6.264 C 8.608 6.035,8.600 6.034,5.170 6.012 L 2.000 5.991 2.000 11.856 M14.400 7.380 L 14.400 7.960 16.760 7.960 L 19.120 7.960 19.120 7.380 L 19.120 6.800 16.760 6.800 L 14.400 6.800 14.400 7.380 M8.031 8.159 C 8.541 8.398,8.720 8.711,8.720 9.360 C 8.720 9.806,8.640 10.075,8.446 10.278 C 8.259 10.475,7.863 10.663,7.520 10.718 C 7.377 10.741,6.652 10.760,5.910 10.760 L 4.560 10.760 4.560 9.374 L 4.560 7.987 6.164 8.012 L 7.768 8.036 8.031 8.159 M16.440 9.045 C 14.583 9.257,13.255 10.419,12.768 12.260 C 12.671 12.628,12.662 12.725,12.661 13.460 C 12.660 14.366,12.700 14.658,12.908 15.257 C 13.164 15.994,13.397 16.356,13.967 16.903 C 14.340 17.261,14.643 17.460,15.082 17.635 C 16.027 18.013,17.107 18.095,18.060 17.863 C 19.393 17.537,20.208 16.819,20.758 15.484 C 20.826 15.321,20.870 15.177,20.857 15.164 C 20.844 15.151,20.387 15.135,19.842 15.128 L 18.851 15.116 18.721 15.318 C 18.345 15.905,17.745 16.201,16.934 16.199 C 16.037 16.198,15.473 15.890,15.148 15.226 C 15.016 14.957,14.880 14.452,14.880 14.234 L 14.880 14.080 17.930 14.070 L 20.980 14.060 20.977 13.380 C 20.973 12.392,20.879 11.959,20.510 11.220 C 20.169 10.539,19.727 10.020,19.183 9.664 C 18.615 9.293,18.115 9.123,17.352 9.042 C 16.920 8.995,16.869 8.996,16.440 9.045 M17.213 10.839 C 17.683 10.916,18.148 11.227,18.377 11.619 C 18.497 11.823,18.680 12.354,18.680 12.497 L 18.680 12.600 16.800 12.600 C 15.010 12.600,14.920 12.597,14.920 12.527 C 14.920 12.345,15.017 11.961,15.112 11.767 C 15.312 11.358,15.913 10.921,16.384 10.842 C 16.662 10.796,16.943 10.794,17.213 10.839 M8.064 12.583 C 8.702 12.749,9.056 13.139,9.165 13.796 C 9.222 14.145,9.163 14.680,9.039 14.923 C 8.927 15.141,8.647 15.410,8.413 15.523 C 8.016 15.715,7.876 15.730,6.170 15.749 L 4.560 15.768 4.560 14.117 L 4.560 12.467 6.197 12.495 C 7.448 12.516,7.889 12.537,8.064 12.583 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/bell.svg b/packages/icons/svg/bell.svg
index d912967511..d301623d01 100644
--- a/packages/icons/svg/bell.svg
+++ b/packages/icons/svg/bell.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.580 C 9.159 2.924,7.885 3.620,6.840 4.678 C 5.979 5.550,5.375 6.629,5.040 7.898 C 4.874 8.526,4.840 9.080,4.813 11.660 L 4.789 13.900 4.524 14.180 C 4.135 14.591,3.813 15.002,3.722 15.203 C 3.618 15.432,3.615 15.802,3.715 16.020 C 3.813 16.232,4.076 16.523,4.307 16.676 L 4.494 16.800 12.002 16.800 L 19.511 16.800 19.747 16.626 C 19.974 16.459,20.177 16.238,20.275 16.052 C 20.347 15.913,20.374 15.518,20.323 15.331 C 20.270 15.133,19.934 14.676,19.504 14.214 L 19.200 13.887 19.199 12.594 C 19.198 10.993,19.137 8.927,19.079 8.500 C 18.959 7.618,18.487 6.444,17.888 5.540 C 17.004 4.205,15.193 2.986,13.579 2.640 C 13.045 2.525,11.099 2.485,10.680 2.580 M8.400 18.152 C 8.400 18.345,8.530 18.845,8.683 19.242 C 9.087 20.289,10.047 21.150,11.140 21.446 C 11.634 21.579,12.416 21.570,12.892 21.426 C 13.945 21.106,14.896 20.300,15.244 19.433 C 15.374 19.111,15.558 18.453,15.586 18.213 L 15.611 18.000 12.006 18.000 L 8.400 18.000 8.400 18.152 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.900 2.560 C 10.172 2.633,8.956 3.103,8.151 3.623 C 6.714 4.549,5.730 5.808,5.197 7.400 C 4.878 8.352,4.848 8.689,4.814 11.660 L 4.788 13.900 4.487 14.220 C 4.091 14.641,3.733 15.126,3.682 15.311 C 3.630 15.499,3.629 15.739,3.680 15.920 C 3.736 16.120,4.044 16.493,4.289 16.659 L 4.499 16.800 12.006 16.800 L 19.512 16.800 19.754 16.618 C 20.164 16.310,20.312 16.083,20.347 15.705 C 20.367 15.488,20.356 15.419,20.272 15.235 C 20.165 15.003,19.833 14.567,19.450 14.156 L 19.212 13.900 19.186 11.740 C 19.150 8.728,19.120 8.381,18.816 7.452 C 18.653 6.951,18.211 6.034,17.925 5.600 C 17.029 4.243,15.265 3.034,13.638 2.662 C 13.155 2.551,11.572 2.492,10.900 2.560 M8.400 18.150 C 8.400 18.344,8.570 18.975,8.713 19.316 C 9.137 20.326,10.102 21.168,11.155 21.447 C 11.550 21.551,12.333 21.560,12.736 21.464 C 13.727 21.229,14.724 20.466,15.153 19.614 C 15.303 19.316,15.550 18.520,15.585 18.218 L 15.611 18.000 12.006 18.000 L 8.400 18.000 8.400 18.150 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/bitBucket.svg b/packages/icons/svg/bitBucket.svg
index 7c1ec993d2..4fd2982619 100644
--- a/packages/icons/svg/bitBucket.svg
+++ b/packages/icons/svg/bitBucket.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.320 3.074 C 3.165 3.158,3.000 3.430,3.000 3.604 C 3.000 3.665,3.557 7.462,4.238 12.041 C 5.624 21.357,5.483 20.601,5.871 20.829 L 6.060 20.940 12.080 20.940 C 18.063 20.940,18.101 20.939,18.239 20.859 C 18.315 20.814,18.412 20.718,18.454 20.646 C 18.514 20.543,18.792 18.733,19.764 12.128 C 20.443 7.514,20.998 3.687,20.999 3.623 C 21.001 3.412,20.853 3.173,20.665 3.082 L 20.495 3.000 11.977 3.000 C 3.757 3.000,3.454 3.003,3.320 3.074 M14.777 9.110 C 14.768 9.149,14.571 10.413,14.340 11.920 C 14.109 13.427,13.909 14.710,13.897 14.770 L 13.874 14.880 12.007 14.880 L 10.140 14.880 9.767 12.710 C 9.561 11.516,9.335 10.203,9.264 9.790 L 9.134 9.040 11.963 9.040 C 14.637 9.040,14.792 9.044,14.777 9.110 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.765 3.037 L 3.311 3.060 3.176 3.216 C 2.941 3.488,2.844 2.651,4.063 10.880 C 5.397 19.887,5.479 20.390,5.658 20.662 C 5.693 20.716,5.814 20.806,5.927 20.864 L 6.133 20.968 12.096 20.953 C 17.763 20.939,18.067 20.935,18.208 20.866 C 18.289 20.826,18.383 20.751,18.417 20.699 C 18.512 20.554,18.659 19.630,19.558 13.540 C 20.725 5.630,20.969 3.928,20.974 3.680 C 20.981 3.372,20.889 3.207,20.638 3.079 C 20.485 3.001,20.381 3.000,12.352 3.007 C 7.879 3.011,4.015 3.025,3.765 3.037 M14.742 9.089 C 14.765 9.111,14.088 13.643,13.912 14.650 L 13.871 14.880 12.006 14.880 L 10.140 14.880 9.638 11.959 L 9.137 9.037 11.925 9.049 C 13.459 9.055,14.726 9.073,14.742 9.089 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/bitly.svg b/packages/icons/svg/bitly.svg
index 67f2b1d250..d0105c65f5 100644
--- a/packages/icons/svg/bitly.svg
+++ b/packages/icons/svg/bitly.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.300 3.024 C 9.981 3.160,9.045 3.416,8.020 3.921 C 5.355 5.233,3.566 7.730,3.093 10.800 C 2.995 11.440,2.993 12.819,3.091 13.387 C 3.451 15.487,4.563 17.441,6.180 18.816 C 6.566 19.144,6.745 19.241,7.015 19.266 C 7.177 19.282,7.257 19.266,7.398 19.193 C 7.643 19.064,7.736 18.925,7.732 18.690 C 7.728 18.374,7.633 18.223,7.101 17.685 C 6.516 17.092,6.284 16.810,5.911 16.240 C 3.941 13.229,4.307 9.693,6.846 7.216 C 8.401 5.699,10.443 4.945,12.551 5.111 C 13.484 5.185,14.155 5.343,14.915 5.668 C 16.488 6.339,17.707 7.521,18.476 9.120 C 19.308 10.851,19.412 12.612,18.796 14.498 C 18.463 15.517,17.808 16.655,17.090 17.461 C 16.791 17.797,16.520 18.047,16.520 17.987 C 16.520 17.979,16.556 17.868,16.600 17.741 C 16.770 17.247,16.818 16.862,16.817 16.020 C 16.815 15.280,16.807 15.190,16.708 14.820 C 16.385 13.621,15.659 12.822,14.580 12.479 C 14.186 12.354,13.289 12.323,12.780 12.418 C 12.326 12.503,11.858 12.692,11.477 12.944 C 11.313 13.052,11.166 13.146,11.149 13.154 C 11.132 13.161,11.120 12.441,11.121 11.554 C 11.123 10.072,11.117 9.915,11.044 9.633 C 10.946 9.254,10.840 9.042,10.639 8.823 C 10.331 8.490,9.866 8.320,9.262 8.320 C 8.847 8.321,8.576 8.383,8.281 8.543 C 7.868 8.768,7.418 9.395,7.371 9.810 C 7.333 10.144,7.564 10.441,7.860 10.439 C 8.032 10.438,8.278 10.313,8.438 10.145 C 8.596 9.978,8.770 9.950,8.839 10.079 C 8.924 10.237,8.969 11.848,8.978 15.060 C 8.987 17.999,8.995 18.366,9.056 18.593 C 9.355 19.707,10.237 20.524,11.480 20.839 C 12.919 21.203,14.275 20.978,15.860 20.113 C 16.902 19.545,17.683 18.966,18.440 18.201 C 20.206 16.418,21.076 14.218,20.987 11.760 C 20.959 11.002,20.891 10.503,20.719 9.813 C 19.847 6.307,16.909 3.658,13.278 3.102 C 12.872 3.040,11.624 2.991,11.300 3.024 M13.968 14.570 C 14.205 14.679,14.411 14.870,14.519 15.080 C 14.860 15.742,14.822 17.051,14.438 17.875 C 14.080 18.644,13.558 18.968,12.680 18.964 C 11.998 18.960,11.512 18.784,11.252 18.445 C 11.090 18.235,11.046 18.077,11.016 17.600 C 10.984 17.109,11.052 16.522,11.184 16.153 C 11.480 15.320,12.155 14.665,12.891 14.498 C 13.247 14.417,13.702 14.447,13.968 14.570 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.380 3.026 C 11.314 3.034,11.089 3.059,10.880 3.083 C 8.722 3.329,6.663 4.417,5.249 6.060 C 3.705 7.854,2.910 10.180,3.020 12.580 C 3.117 14.671,4.143 16.849,5.785 18.444 C 6.665 19.300,7.110 19.461,7.557 19.088 C 7.679 18.986,7.696 18.948,7.711 18.734 C 7.736 18.397,7.663 18.277,7.041 17.623 C 6.253 16.794,5.872 16.261,5.419 15.359 C 3.941 12.411,4.674 9.021,7.260 6.848 C 8.935 5.441,10.945 4.874,13.160 5.186 C 15.342 5.493,17.158 6.756,18.272 8.740 C 19.227 10.442,19.434 12.378,18.861 14.273 C 18.540 15.337,17.923 16.461,17.163 17.368 C 16.876 17.710,16.564 18.017,16.534 17.987 C 16.528 17.981,16.567 17.839,16.621 17.670 C 16.772 17.193,16.808 16.883,16.810 16.020 C 16.812 15.330,16.801 15.176,16.728 14.900 C 16.482 13.965,16.027 13.291,15.336 12.840 C 14.947 12.586,14.575 12.456,14.076 12.398 C 13.083 12.282,12.211 12.471,11.449 12.967 C 11.311 13.057,11.185 13.118,11.169 13.102 C 11.153 13.086,11.130 12.323,11.118 11.407 L 11.097 9.740 10.989 9.442 C 10.796 8.904,10.482 8.589,9.980 8.429 C 9.586 8.304,8.844 8.306,8.520 8.434 C 8.209 8.557,7.948 8.762,7.734 9.051 C 7.393 9.512,7.302 9.837,7.432 10.132 C 7.608 10.528,7.968 10.541,8.419 10.166 C 8.738 9.901,8.837 9.943,8.884 10.366 C 8.902 10.528,8.935 12.388,8.957 14.500 C 9.003 18.787,8.985 18.544,9.298 19.182 C 9.731 20.065,10.561 20.644,11.768 20.906 C 12.187 20.997,13.282 21.007,13.700 20.924 C 14.622 20.742,15.660 20.287,16.698 19.610 C 17.973 18.780,19.073 17.663,19.798 16.463 C 21.640 13.414,21.333 9.309,19.048 6.434 C 17.573 4.578,15.234 3.284,12.988 3.081 C 12.519 3.039,11.557 3.006,11.380 3.026 M13.884 14.545 C 13.986 14.577,14.143 14.667,14.235 14.745 C 14.600 15.057,14.735 15.485,14.731 16.320 C 14.726 17.323,14.470 18.059,13.959 18.537 C 13.610 18.864,13.180 18.986,12.508 18.949 C 11.702 18.904,11.229 18.617,11.077 18.079 C 11.003 17.817,11.015 16.852,11.097 16.480 C 11.320 15.466,12.159 14.594,13.020 14.482 C 13.313 14.444,13.638 14.468,13.884 14.545 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/book-open.svg b/packages/icons/svg/book-open.svg
index c6042e759e..9989a013a1 100644
--- a/packages/icons/svg/book-open.svg
+++ b/packages/icons/svg/book-open.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.180 4.960 C 4.314 5.116,3.164 5.439,2.550 5.698 L 2.400 5.761 2.400 11.758 L 2.400 17.754 2.730 17.631 C 3.233 17.443,4.134 17.170,4.538 17.083 C 5.172 16.945,5.740 16.908,6.796 16.932 C 8.639 16.975,9.432 17.170,11.092 17.988 L 12.004 18.438 12.632 18.124 C 13.862 17.509,14.536 17.242,15.220 17.101 C 16.135 16.912,17.916 16.851,18.819 16.978 C 19.388 17.058,20.298 17.287,21.024 17.533 L 21.547 17.710 21.574 16.365 C 21.588 15.625,21.600 12.954,21.600 10.429 L 21.600 5.839 21.470 5.759 C 21.250 5.624,20.535 5.364,19.862 5.174 L 19.220 4.992 17.460 4.986 C 15.780 4.980,15.684 4.984,15.340 5.067 C 14.860 5.183,14.155 5.400,13.640 5.592 L 13.220 5.748 13.212 6.944 C 13.193 9.629,13.116 13.930,13.079 14.374 C 13.027 15.009,12.903 15.219,12.440 15.461 C 12.249 15.561,11.758 15.562,11.550 15.463 C 11.343 15.364,10.978 14.961,10.944 14.794 C 10.886 14.511,10.843 12.643,10.816 9.264 L 10.787 5.752 10.604 5.673 C 9.462 5.182,8.131 4.930,6.520 4.898 C 5.745 4.883,5.559 4.892,5.180 4.960 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.600 4.907 C 4.930 4.965,3.229 5.406,2.550 5.697 L 2.400 5.761 2.400 11.755 L 2.400 17.750 2.970 17.552 C 4.605 16.984,5.510 16.858,7.260 16.955 C 8.875 17.045,9.494 17.216,11.190 18.040 L 12.000 18.434 12.850 18.021 C 14.243 17.344,14.815 17.147,15.760 17.020 C 16.396 16.934,18.023 16.897,18.580 16.957 C 19.157 17.018,20.088 17.235,20.899 17.497 L 21.551 17.707 21.578 16.264 C 21.593 15.470,21.599 12.796,21.592 10.322 L 21.580 5.824 21.455 5.751 C 21.252 5.633,20.541 5.377,19.865 5.180 L 19.236 4.996 17.328 5.009 L 15.420 5.023 14.800 5.209 C 14.459 5.311,13.964 5.474,13.700 5.571 L 13.220 5.747 13.193 8.303 C 13.157 11.677,13.091 14.367,13.036 14.661 C 12.928 15.247,12.581 15.529,11.970 15.527 C 11.728 15.526,11.645 15.507,11.502 15.423 C 11.302 15.306,11.056 15.040,10.976 14.852 C 10.901 14.678,10.851 12.812,10.816 8.866 L 10.788 5.752 10.610 5.676 C 9.768 5.315,8.666 5.056,7.580 4.965 C 7.022 4.918,5.861 4.884,5.600 4.907 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/bookmark-alt.svg b/packages/icons/svg/bookmark-alt.svg
index 6c34676a60..114de7614a 100644
--- a/packages/icons/svg/bookmark-alt.svg
+++ b/packages/icons/svg/bookmark-alt.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.994 3.881 C 4.543 4.133,3.994 4.737,3.718 5.284 L 3.600 5.518 3.600 12.000 L 3.600 18.482 3.725 18.731 C 4.069 19.418,4.588 19.930,5.309 20.295 L 5.517 20.400 11.089 20.399 C 16.852 20.398,18.345 20.371,18.703 20.263 C 19.106 20.141,19.745 19.597,20.050 19.117 C 20.126 18.998,20.236 18.780,20.294 18.633 L 20.400 18.366 20.400 11.987 L 20.400 5.608 20.275 5.314 C 20.206 5.152,20.088 4.925,20.011 4.810 C 19.850 4.566,19.297 4.038,19.052 3.894 L 18.884 3.795 12.052 3.775 L 5.220 3.755 4.994 3.881 M16.800 12.000 L 16.800 16.800 14.400 15.600 L 12.000 14.400 9.600 15.600 L 7.200 16.800 7.200 12.000 L 7.200 7.200 12.000 7.200 L 16.800 7.200 16.800 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.914 3.935 C 4.448 4.247,3.968 4.789,3.716 5.289 L 3.600 5.518 3.601 12.009 L 3.601 18.500 3.764 18.800 C 4.127 19.468,4.625 19.949,5.316 20.298 L 5.531 20.407 11.756 20.388 C 15.921 20.375,18.097 20.354,18.334 20.324 C 18.752 20.272,18.982 20.168,19.369 19.855 C 19.741 19.555,20.024 19.203,20.217 18.800 L 20.380 18.460 20.390 12.022 L 20.401 5.583 20.199 5.171 C 20.030 4.825,19.945 4.704,19.669 4.426 C 19.488 4.243,19.241 4.029,19.120 3.950 L 18.900 3.807 12.040 3.782 L 5.180 3.758 4.914 3.935 M16.800 12.000 L 16.800 16.800 14.400 15.600 L 12.000 14.400 9.600 15.600 L 7.200 16.800 7.200 12.000 L 7.200 7.200 12.000 7.200 L 16.800 7.200 16.800 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/bookmark.svg b/packages/icons/svg/bookmark.svg
index 4981afae64..3e63677f95 100644
--- a/packages/icons/svg/bookmark.svg
+++ b/packages/icons/svg/bookmark.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.378 2.518 L 7.617 2.540 7.381 2.680 C 6.900 2.966,6.401 3.517,6.125 4.069 L 6.000 4.318 6.000 12.959 L 6.000 21.600 9.000 20.100 L 12.000 18.600 15.000 20.100 L 18.000 21.600 18.000 12.937 L 18.000 4.274 17.839 3.998 C 17.507 3.430,17.027 2.920,16.576 2.656 L 16.403 2.554 14.332 2.519 C 13.192 2.499,12.008 2.486,11.700 2.489 C 11.392 2.493,10.347 2.506,9.378 2.518 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.418 2.518 L 7.617 2.540 7.382 2.680 C 6.924 2.953,6.385 3.557,6.106 4.109 L 6.000 4.317 6.000 12.959 L 6.000 21.600 9.000 20.100 L 12.000 18.600 15.000 20.100 L 18.000 21.600 18.000 12.931 L 18.000 4.262 17.853 4.021 C 17.523 3.481,16.977 2.895,16.596 2.671 L 16.411 2.563 14.116 2.522 C 12.853 2.499,11.685 2.484,11.520 2.488 C 11.355 2.492,10.409 2.505,9.418 2.518 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/box.svg b/packages/icons/svg/box.svg
index 8cb4fe300b..adf7750f36 100644
--- a/packages/icons/svg/box.svg
+++ b/packages/icons/svg/box.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.490 3.044 C 4.373 3.232,3.464 4.042,3.114 5.160 L 3.020 5.460 3.020 12.000 L 3.020 18.540 3.110 18.825 C 3.379 19.674,3.920 20.321,4.660 20.680 C 5.333 21.006,4.700 20.980,12.000 20.980 C 19.302 20.980,18.672 21.006,19.340 20.678 C 20.098 20.307,20.673 19.602,20.908 18.760 C 20.976 18.514,20.980 18.148,20.980 12.000 C 20.980 4.700,21.006 5.333,20.680 4.660 C 20.320 3.918,19.628 3.348,18.780 3.094 C 18.554 3.026,18.172 3.022,12.120 3.015 C 8.533 3.012,5.607 3.024,5.490 3.044 M6.146 8.585 C 6.405 8.708,6.419 8.775,6.432 9.967 L 6.445 11.034 6.732 10.880 C 7.163 10.649,7.450 10.588,8.000 10.610 C 8.515 10.630,8.818 10.721,9.212 10.973 C 9.467 11.136,9.838 11.506,9.944 11.701 C 9.985 11.778,10.030 11.840,10.045 11.840 C 10.060 11.840,10.130 11.750,10.201 11.639 C 10.485 11.196,11.139 10.753,11.672 10.644 C 11.977 10.581,12.544 10.590,12.820 10.662 C 14.370 11.065,15.104 12.776,14.346 14.220 C 14.276 14.354,14.095 14.586,13.938 14.744 C 13.440 15.245,12.737 15.514,12.054 15.464 C 11.694 15.438,11.263 15.308,10.971 15.137 C 10.726 14.994,10.347 14.634,10.178 14.385 L 10.047 14.191 9.937 14.365 C 9.625 14.863,8.984 15.293,8.360 15.425 C 7.796 15.543,7.130 15.425,6.613 15.113 C 6.288 14.917,5.876 14.465,5.704 14.115 C 5.449 13.596,5.441 13.512,5.441 11.080 C 5.440 8.964,5.443 8.896,5.521 8.768 C 5.600 8.637,5.790 8.525,5.934 8.522 C 5.975 8.521,6.070 8.549,6.146 8.585 M15.200 10.716 C 15.255 10.755,15.555 11.097,15.866 11.477 C 16.178 11.856,16.445 12.167,16.461 12.167 C 16.477 12.167,16.744 11.857,17.055 11.477 C 17.366 11.097,17.667 10.752,17.724 10.710 C 17.860 10.610,18.148 10.604,18.308 10.699 C 18.529 10.830,18.620 11.092,18.513 11.293 C 18.477 11.360,17.440 12.654,17.177 12.960 C 17.133 13.011,17.230 13.148,17.822 13.874 C 18.302 14.464,18.526 14.769,18.543 14.860 C 18.623 15.287,18.059 15.595,17.706 15.317 C 17.650 15.273,17.366 14.945,17.076 14.589 C 16.785 14.232,16.527 13.917,16.502 13.890 C 16.467 13.851,16.333 13.992,15.906 14.518 C 15.294 15.272,15.179 15.385,14.983 15.422 C 14.658 15.483,14.319 15.171,14.377 14.864 C 14.393 14.778,14.630 14.453,15.097 13.878 C 15.688 13.151,15.786 13.011,15.743 12.960 C 15.333 12.481,14.426 11.329,14.395 11.248 C 14.233 10.821,14.808 10.441,15.200 10.716 M7.550 11.601 C 7.137 11.705,6.758 12.014,6.568 12.400 C 6.471 12.597,6.460 12.664,6.460 13.040 C 6.461 13.422,6.471 13.479,6.573 13.674 C 6.723 13.959,6.994 14.223,7.272 14.353 C 7.472 14.447,7.550 14.460,7.900 14.460 C 8.262 14.459,8.322 14.448,8.531 14.343 C 8.789 14.213,9.069 13.936,9.196 13.688 C 9.242 13.598,9.301 13.400,9.327 13.248 C 9.439 12.597,9.083 11.959,8.447 11.672 C 8.247 11.581,7.775 11.544,7.550 11.601 M11.870 11.601 C 11.463 11.704,11.042 12.052,10.867 12.431 C 10.797 12.585,10.780 12.694,10.780 13.020 C 10.780 13.381,10.791 13.443,10.897 13.658 C 11.045 13.961,11.302 14.217,11.592 14.353 C 11.792 14.447,11.870 14.460,12.220 14.460 C 12.575 14.459,12.645 14.447,12.845 14.349 C 13.123 14.213,13.411 13.911,13.552 13.609 C 13.643 13.414,13.659 13.326,13.659 13.020 C 13.659 12.714,13.643 12.626,13.552 12.431 C 13.416 12.140,13.102 11.824,12.819 11.694 C 12.572 11.582,12.122 11.537,11.870 11.601 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.620 3.041 C 5.152 3.063,5.253 3.055,4.780 3.260 C 4.282 3.476,3.703 4.000,3.410 4.500 C 3.320 4.654,3.191 4.939,3.123 5.134 L 2.999 5.488 3.010 12.054 L 3.020 18.620 3.175 19.000 C 3.471 19.724,3.875 20.213,4.479 20.577 C 5.027 20.908,5.105 20.924,6.360 20.963 C 7.812 21.007,16.237 21.006,17.640 20.961 C 18.893 20.921,18.962 20.907,19.480 20.599 C 20.079 20.242,20.561 19.681,20.814 19.046 L 20.935 18.740 20.964 17.560 C 21.004 15.904,21.003 7.686,20.963 6.360 C 20.924 5.107,20.911 5.043,20.579 4.485 C 20.288 3.997,19.849 3.594,19.314 3.324 C 19.019 3.176,18.825 3.106,18.640 3.080 C 18.330 3.038,10.905 3.011,7.620 3.041 M6.157 8.599 C 6.261 8.651,6.327 8.720,6.358 8.809 C 6.386 8.888,6.414 9.350,6.428 9.984 L 6.452 11.028 6.796 10.854 C 7.247 10.626,7.617 10.568,8.208 10.634 C 8.772 10.697,9.179 10.893,9.582 11.297 C 9.737 11.453,9.908 11.639,9.962 11.712 L 10.060 11.844 10.242 11.591 C 10.597 11.099,11.269 10.700,11.865 10.626 C 13.102 10.473,14.134 11.125,14.544 12.320 C 14.604 12.492,14.619 12.648,14.617 13.040 C 14.614 13.471,14.600 13.580,14.511 13.831 C 14.379 14.201,14.222 14.445,13.925 14.739 C 13.616 15.044,13.334 15.218,12.940 15.348 C 12.316 15.554,11.478 15.460,10.960 15.127 C 10.689 14.953,10.405 14.687,10.217 14.431 L 10.048 14.202 9.860 14.459 C 9.556 14.872,9.101 15.186,8.520 15.385 C 8.180 15.501,7.558 15.483,7.134 15.345 C 6.458 15.125,5.905 14.598,5.607 13.891 C 5.469 13.564,5.433 12.854,5.447 10.740 C 5.461 8.652,5.452 8.723,5.732 8.585 C 5.900 8.502,5.972 8.504,6.157 8.599 M15.168 10.710 C 15.227 10.749,15.398 10.925,15.548 11.102 C 15.698 11.279,15.961 11.590,16.133 11.794 C 16.390 12.099,16.456 12.156,16.503 12.117 C 16.535 12.091,16.813 11.768,17.122 11.399 C 17.468 10.985,17.729 10.709,17.802 10.679 C 18.000 10.597,18.278 10.651,18.408 10.796 C 18.533 10.935,18.580 11.078,18.545 11.210 C 18.532 11.259,18.214 11.683,17.837 12.151 C 17.182 12.966,17.155 13.007,17.211 13.092 C 17.243 13.141,17.532 13.512,17.853 13.917 C 18.174 14.322,18.466 14.713,18.501 14.788 C 18.663 15.130,18.276 15.507,17.873 15.398 C 17.742 15.363,17.635 15.254,17.114 14.629 C 16.780 14.228,16.488 13.900,16.464 13.900 C 16.441 13.900,16.160 14.214,15.839 14.597 C 15.209 15.350,15.063 15.468,14.820 15.423 C 14.639 15.389,14.457 15.231,14.400 15.060 C 14.335 14.864,14.389 14.771,15.067 13.917 C 15.388 13.512,15.677 13.140,15.710 13.090 C 15.768 13.003,15.756 12.982,15.452 12.609 C 14.849 11.873,14.400 11.273,14.375 11.172 C 14.339 11.032,14.451 10.816,14.609 10.720 C 14.771 10.621,15.024 10.617,15.168 10.710 M7.587 11.603 C 7.202 11.666,6.751 12.028,6.552 12.434 C 6.475 12.592,6.461 12.682,6.462 13.040 C 6.463 13.401,6.476 13.485,6.556 13.637 C 6.694 13.901,7.022 14.225,7.276 14.350 C 7.476 14.448,7.543 14.459,7.900 14.458 C 8.342 14.456,8.497 14.402,8.826 14.136 C 9.178 13.851,9.397 13.307,9.341 12.856 C 9.239 12.034,8.440 11.463,7.587 11.603 M11.918 11.596 C 11.523 11.676,11.036 12.063,10.870 12.429 C 10.746 12.703,10.746 13.337,10.869 13.610 C 10.989 13.874,11.326 14.218,11.596 14.350 C 11.795 14.448,11.864 14.460,12.220 14.459 C 12.560 14.459,12.649 14.444,12.815 14.363 C 13.078 14.235,13.405 13.899,13.544 13.615 C 13.644 13.411,13.658 13.337,13.658 13.020 C 13.658 12.706,13.644 12.628,13.548 12.432 C 13.391 12.111,12.986 11.740,12.710 11.664 C 12.439 11.589,12.098 11.560,11.918 11.596 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/briefcase.svg b/packages/icons/svg/briefcase.svg
index 3d8b9eab34..d0a36a5b63 100644
--- a/packages/icons/svg/briefcase.svg
+++ b/packages/icons/svg/briefcase.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.280 2.561 C 10.005 2.576,9.704 2.616,9.611 2.649 C 9.128 2.822,8.388 3.372,8.013 3.836 C 7.436 4.550,7.265 5.102,7.204 6.451 C 7.186 6.842,7.165 7.168,7.156 7.176 C 7.147 7.183,6.609 7.211,5.960 7.236 C 3.939 7.316,4.087 7.295,3.685 7.561 C 3.130 7.928,2.728 8.380,2.562 8.824 C 2.487 9.026,2.479 9.183,2.444 11.210 C 2.423 12.403,2.416 13.502,2.429 13.650 L 2.451 13.920 3.075 14.118 C 5.473 14.876,7.687 15.344,9.560 15.486 C 10.423 15.552,13.838 15.552,14.520 15.487 C 16.304 15.315,18.495 14.866,20.315 14.300 C 21.659 13.881,21.548 13.928,21.574 13.767 C 21.602 13.599,21.533 9.573,21.497 9.200 C 21.453 8.750,21.291 8.450,20.861 8.019 C 20.210 7.369,20.044 7.324,17.956 7.235 L 16.812 7.186 16.787 6.483 C 16.738 5.139,16.578 4.579,16.049 3.915 C 15.639 3.400,15.194 3.048,14.577 2.752 C 14.240 2.590,14.234 2.589,13.609 2.556 C 12.873 2.518,10.998 2.521,10.280 2.561 M13.823 5.046 C 14.025 5.198,14.202 5.463,14.256 5.693 C 14.292 5.843,14.399 6.860,14.400 7.050 L 14.400 7.200 11.995 7.200 L 9.590 7.200 9.617 6.770 C 9.686 5.665,9.792 5.339,10.186 5.027 L 10.409 4.850 12.014 4.871 L 13.619 4.892 13.823 5.046 M12.651 11.074 C 12.757 11.146,12.892 11.280,12.951 11.370 C 13.054 11.525,13.060 11.560,13.059 11.997 C 13.059 12.520,13.025 12.619,12.774 12.840 C 12.488 13.091,12.078 13.204,11.757 13.121 C 11.507 13.056,11.174 12.818,11.059 12.622 C 10.945 12.427,10.871 11.972,10.916 11.740 C 10.957 11.527,11.085 11.286,11.232 11.147 C 11.422 10.966,11.609 10.918,12.060 10.930 C 12.439 10.941,12.470 10.949,12.651 11.074 M2.434 16.630 C 2.381 16.766,2.418 19.202,2.480 19.617 C 2.544 20.043,2.722 20.363,3.119 20.764 C 3.453 21.101,3.718 21.296,4.117 21.499 L 4.317 21.600 12.020 21.600 L 19.723 21.600 19.931 21.495 C 20.272 21.324,20.610 21.064,20.915 20.737 C 21.261 20.367,21.455 19.991,21.524 19.560 C 21.591 19.142,21.598 16.662,21.532 16.596 C 21.479 16.543,21.600 16.518,19.522 17.020 C 17.334 17.550,16.175 17.756,14.660 17.888 C 13.875 17.956,9.999 17.954,9.260 17.885 C 7.751 17.744,5.212 17.248,3.200 16.700 C 2.837 16.601,2.526 16.520,2.509 16.520 C 2.492 16.520,2.458 16.570,2.434 16.630 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.520 2.560 C 9.739 2.592,9.543 2.641,9.098 2.916 C 8.426 3.330,7.863 3.918,7.580 4.501 C 7.345 4.983,7.261 5.466,7.177 6.805 L 7.153 7.190 6.467 7.217 C 4.852 7.281,4.189 7.324,4.038 7.376 C 3.789 7.462,3.449 7.710,3.100 8.059 C 2.745 8.415,2.580 8.684,2.519 9.006 C 2.471 9.257,2.392 13.285,2.428 13.663 L 2.452 13.921 3.016 14.098 C 5.426 14.856,7.605 15.324,9.460 15.481 C 10.292 15.552,14.097 15.538,14.771 15.463 C 16.523 15.266,18.529 14.843,20.360 14.286 C 21.439 13.957,21.529 13.919,21.567 13.780 C 21.610 13.625,21.528 9.333,21.478 9.068 C 21.396 8.638,21.107 8.212,20.614 7.795 C 20.107 7.367,19.822 7.314,17.450 7.216 L 16.800 7.189 16.800 6.817 C 16.800 5.832,16.643 4.902,16.400 4.446 C 16.216 4.100,15.801 3.596,15.492 3.340 C 15.179 3.083,14.694 2.788,14.390 2.672 C 14.047 2.541,12.249 2.489,10.520 2.560 M12.326 4.880 L 13.639 4.880 13.894 5.130 C 14.083 5.317,14.164 5.431,14.212 5.580 C 14.270 5.763,14.400 6.798,14.400 7.080 L 14.400 7.200 12.000 7.200 L 9.600 7.200 9.600 7.090 C 9.601 6.815,9.685 6.033,9.742 5.773 C 9.814 5.438,9.941 5.233,10.220 5.000 L 10.420 4.833 10.716 4.857 C 10.879 4.869,11.603 4.880,12.326 4.880 M12.551 11.019 C 12.688 11.094,12.790 11.184,12.930 11.353 C 13.036 11.482,13.040 11.502,13.040 11.964 C 13.040 12.285,13.021 12.487,12.984 12.577 C 12.854 12.889,12.237 13.202,11.869 13.143 C 11.544 13.091,11.177 12.829,11.032 12.544 C 10.974 12.431,10.943 12.276,10.929 12.032 C 10.911 11.712,10.918 11.665,11.017 11.462 C 11.144 11.203,11.353 11.017,11.578 10.962 C 11.799 10.909,12.416 10.945,12.551 11.019 M2.434 16.630 C 2.381 16.766,2.418 19.210,2.480 19.600 C 2.591 20.294,3.249 21.059,4.109 21.494 L 4.317 21.600 12.020 21.600 L 19.723 21.600 19.892 21.514 C 20.704 21.101,21.360 20.340,21.498 19.650 C 21.564 19.320,21.606 17.765,21.568 17.080 L 21.540 16.580 21.403 16.591 C 21.327 16.597,20.634 16.753,19.863 16.938 C 17.619 17.475,16.624 17.672,15.380 17.822 C 14.209 17.964,10.258 17.985,9.006 17.855 C 7.593 17.710,5.338 17.265,3.349 16.739 C 2.893 16.619,2.510 16.520,2.498 16.520 C 2.487 16.520,2.458 16.570,2.434 16.630 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cake.svg b/packages/icons/svg/cake.svg
index 9064f193c1..170e2c7a1d 100644
--- a/packages/icons/svg/cake.svg
+++ b/packages/icons/svg/cake.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.397 2.637 C 10.782 3.083,10.691 3.814,11.183 4.358 C 11.382 4.578,11.602 4.686,11.902 4.710 C 12.595 4.766,13.120 4.299,13.120 3.627 C 13.120 3.474,13.099 3.281,13.074 3.197 C 12.970 2.850,12.609 2.590,12.136 2.521 C 11.689 2.457,11.633 2.465,11.397 2.637 M14.997 2.637 C 14.382 3.083,14.291 3.814,14.783 4.358 C 14.982 4.578,15.202 4.686,15.502 4.710 C 16.195 4.766,16.720 4.299,16.720 3.627 C 16.720 3.474,16.699 3.281,16.674 3.197 C 16.570 2.850,16.209 2.590,15.736 2.521 C 15.289 2.457,15.233 2.465,14.997 2.637 M7.776 2.643 C 7.438 2.909,7.241 3.242,7.240 3.546 C 7.240 3.770,7.391 4.175,7.540 4.349 C 7.842 4.702,8.423 4.837,8.842 4.652 C 9.071 4.551,9.391 4.231,9.492 4.003 C 9.657 3.630,9.487 3.022,9.138 2.736 C 8.925 2.562,8.771 2.522,8.296 2.521 C 7.949 2.520,7.924 2.526,7.776 2.643 M7.983 6.149 C 7.906 6.161,7.781 6.252,7.621 6.413 C 7.313 6.723,7.253 6.908,7.196 7.739 C 7.174 8.069,7.146 8.347,7.136 8.358 C 7.125 8.368,6.927 8.444,6.696 8.525 C 6.136 8.722,5.883 8.878,5.499 9.260 C 4.974 9.783,4.856 10.139,4.812 11.323 L 4.788 11.985 4.504 12.056 C 4.010 12.180,3.592 12.408,3.230 12.753 C 2.850 13.114,2.637 13.424,2.547 13.747 C 2.483 13.977,2.393 15.026,2.427 15.156 C 2.448 15.233,3.456 15.701,4.047 15.907 C 4.797 16.169,5.102 16.132,6.260 15.638 C 6.634 15.478,7.030 15.323,7.140 15.294 C 7.250 15.264,7.716 15.219,8.175 15.194 C 9.275 15.133,9.371 15.149,10.353 15.557 C 11.627 16.087,11.911 16.151,12.407 16.022 C 12.530 15.990,12.988 15.821,13.425 15.646 C 14.591 15.181,14.494 15.200,15.657 15.200 L 16.660 15.200 17.747 15.640 C 18.919 16.115,18.954 16.123,19.503 16.043 C 19.903 15.985,21.485 15.299,21.566 15.149 C 21.594 15.097,21.599 14.934,21.581 14.685 C 21.511 13.727,21.372 13.346,20.926 12.889 C 20.493 12.445,20.085 12.213,19.471 12.058 L 19.212 11.993 19.187 11.327 C 19.145 10.212,19.061 9.903,18.682 9.452 C 18.262 8.953,17.778 8.649,17.124 8.474 L 16.812 8.390 16.787 7.785 C 16.753 6.967,16.683 6.720,16.405 6.427 C 16.196 6.206,16.076 6.157,15.678 6.131 C 15.398 6.113,15.284 6.123,15.144 6.176 C 14.933 6.257,14.665 6.533,14.554 6.785 C 14.463 6.989,14.402 7.491,14.401 8.030 L 14.400 8.400 13.806 8.400 L 13.212 8.400 13.187 7.790 C 13.152 6.950,13.071 6.677,12.773 6.395 C 12.553 6.186,12.477 6.157,12.079 6.131 C 11.798 6.113,11.684 6.123,11.544 6.176 C 11.333 6.257,11.065 6.533,10.954 6.785 C 10.863 6.989,10.802 7.491,10.801 8.030 L 10.800 8.400 10.206 8.400 L 9.613 8.400 9.586 7.650 C 9.560 6.925,9.555 6.894,9.449 6.722 C 9.312 6.499,8.971 6.218,8.771 6.162 C 8.624 6.121,8.217 6.115,7.983 6.149 M8.051 17.562 C 7.959 17.580,7.500 17.747,7.031 17.933 C 6.563 18.119,6.009 18.330,5.800 18.401 C 5.422 18.530,5.416 18.531,4.840 18.508 C 3.980 18.475,3.307 18.316,2.671 17.995 C 2.545 17.932,2.433 17.880,2.421 17.880 C 2.392 17.880,2.401 19.625,2.434 20.266 L 2.461 20.792 2.642 21.021 C 2.741 21.147,2.898 21.305,2.991 21.372 L 3.159 21.493 5.829 21.523 C 7.298 21.540,11.236 21.567,14.580 21.583 L 20.660 21.612 20.917 21.416 C 21.296 21.127,21.475 20.896,21.522 20.636 C 21.568 20.386,21.624 17.880,21.584 17.880 C 21.569 17.880,21.464 17.927,21.350 17.985 C 20.805 18.261,20.206 18.421,19.497 18.479 C 18.599 18.552,18.218 18.467,16.817 17.881 L 16.144 17.600 15.581 17.600 L 15.017 17.600 14.232 17.937 C 13.800 18.123,13.326 18.312,13.177 18.358 C 12.789 18.478,12.019 18.536,11.505 18.484 C 11.028 18.436,10.997 18.427,9.826 17.973 C 8.722 17.545,8.453 17.483,8.051 17.562 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.520 2.562 C 10.796 3.007,10.663 3.811,11.218 4.380 C 11.471 4.638,11.758 4.744,12.112 4.707 C 12.767 4.640,13.159 4.157,13.110 3.476 C 13.069 2.894,12.678 2.569,11.939 2.501 C 11.696 2.479,11.642 2.487,11.520 2.562 M15.120 2.562 C 14.396 3.007,14.263 3.811,14.818 4.380 C 15.071 4.638,15.358 4.744,15.712 4.707 C 16.367 4.640,16.759 4.157,16.710 3.476 C 16.669 2.894,16.278 2.569,15.539 2.501 C 15.296 2.479,15.242 2.487,15.120 2.562 M7.860 2.591 C 7.658 2.721,7.377 3.052,7.301 3.251 C 7.215 3.478,7.235 3.746,7.359 4.028 C 7.490 4.324,7.620 4.464,7.886 4.597 C 8.199 4.753,8.593 4.769,8.866 4.637 C 9.227 4.462,9.560 3.990,9.560 3.653 C 9.560 3.296,9.304 2.824,9.021 2.659 C 8.859 2.564,8.783 2.548,8.408 2.532 C 8.035 2.517,7.965 2.524,7.860 2.591 M8.013 6.156 C 7.846 6.199,7.602 6.395,7.461 6.599 C 7.308 6.820,7.248 7.075,7.195 7.739 C 7.170 8.047,7.134 8.320,7.114 8.345 C 7.095 8.370,6.939 8.440,6.769 8.500 C 6.126 8.728,5.721 8.996,5.318 9.463 C 5.127 9.683,5.029 9.867,4.945 10.161 C 4.866 10.438,4.800 11.093,4.800 11.595 L 4.800 11.982 4.515 12.056 C 4.358 12.096,4.068 12.210,3.870 12.309 C 3.217 12.636,2.619 13.336,2.520 13.887 C 2.462 14.215,2.397 15.067,2.426 15.140 C 2.483 15.289,3.952 15.914,4.525 16.033 C 4.807 16.091,4.854 16.091,5.140 16.029 C 5.311 15.992,5.830 15.809,6.295 15.624 C 7.108 15.298,7.158 15.284,7.620 15.239 C 7.884 15.213,8.370 15.189,8.700 15.186 C 9.397 15.179,9.421 15.185,10.458 15.600 C 11.361 15.961,11.612 16.043,11.906 16.069 C 12.205 16.095,12.437 16.030,13.460 15.631 C 14.562 15.201,14.410 15.231,15.591 15.211 L 16.642 15.192 17.451 15.522 C 18.883 16.105,19.058 16.145,19.593 16.019 C 20.055 15.910,21.196 15.420,21.475 15.210 L 21.611 15.108 21.583 14.704 C 21.516 13.730,21.350 13.313,20.831 12.816 C 20.449 12.449,20.039 12.216,19.536 12.079 L 19.212 11.991 19.187 11.324 C 19.146 10.249,19.051 9.905,18.659 9.429 C 18.302 8.996,17.690 8.622,17.070 8.459 L 16.800 8.388 16.800 8.044 C 16.799 7.599,16.739 7.076,16.660 6.839 C 16.583 6.609,16.362 6.343,16.162 6.241 C 15.956 6.136,15.455 6.094,15.215 6.161 C 14.962 6.232,14.633 6.559,14.545 6.826 C 14.453 7.106,14.402 7.521,14.401 7.990 L 14.400 8.400 13.806 8.400 L 13.212 8.400 13.187 7.810 C 13.150 6.929,13.038 6.603,12.672 6.308 C 12.549 6.209,12.466 6.182,12.181 6.147 C 11.772 6.096,11.545 6.142,11.321 6.319 C 10.960 6.605,10.845 6.941,10.811 7.810 L 10.788 8.400 10.200 8.400 L 9.613 8.400 9.588 7.682 C 9.571 7.190,9.544 6.920,9.504 6.823 C 9.431 6.648,9.122 6.343,8.907 6.234 C 8.729 6.143,8.231 6.100,8.013 6.156 M8.120 17.561 C 7.935 17.592,7.494 17.751,6.280 18.226 L 5.580 18.500 4.940 18.495 C 4.043 18.487,3.344 18.333,2.671 17.995 C 2.545 17.932,2.433 17.880,2.421 17.880 C 2.391 17.880,2.395 19.547,2.427 20.237 L 2.453 20.814 2.777 21.144 L 3.100 21.474 3.360 21.497 C 3.683 21.525,14.521 21.601,18.080 21.600 L 20.700 21.599 20.990 21.358 C 21.339 21.069,21.465 20.889,21.520 20.602 C 21.567 20.352,21.627 17.880,21.585 17.880 C 21.570 17.880,21.449 17.935,21.315 18.002 C 20.449 18.440,19.095 18.617,18.260 18.403 C 17.908 18.313,17.156 18.033,16.486 17.744 C 16.155 17.601,16.149 17.600,15.584 17.600 L 15.016 17.600 14.498 17.824 C 13.101 18.427,12.871 18.488,11.980 18.491 C 11.240 18.493,11.105 18.463,10.008 18.044 C 8.789 17.579,8.481 17.500,8.120 17.561 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/calculator.svg b/packages/icons/svg/calculator.svg
index d3f3e9c720..fae3d1d3ae 100644
--- a/packages/icons/svg/calculator.svg
+++ b/packages/icons/svg/calculator.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.000 2.558 C 6.293 2.583,6.246 2.599,5.784 2.970 C 5.482 3.212,5.169 3.608,4.950 4.026 L 4.800 4.312 4.800 11.997 L 4.800 19.682 4.925 19.931 C 5.264 20.608,5.788 21.132,6.469 21.475 L 6.718 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.222 21.127,18.761 20.572,19.081 19.858 L 19.200 19.593 19.200 11.955 L 19.200 4.317 19.115 4.148 C 18.806 3.532,18.225 2.880,17.819 2.695 C 17.600 2.594,17.557 2.590,16.486 2.557 C 15.297 2.521,8.024 2.522,7.000 2.558 M16.243 5.063 C 16.594 5.349,16.660 5.506,16.660 6.047 L 16.660 6.434 16.496 6.666 C 16.406 6.793,16.251 6.953,16.152 7.022 L 15.970 7.147 14.579 7.173 C 13.813 7.188,12.033 7.200,10.623 7.200 L 8.059 7.200 7.871 7.045 C 7.469 6.713,7.322 6.443,7.321 6.035 C 7.320 5.740,7.382 5.525,7.538 5.291 C 7.677 5.080,7.898 4.963,8.208 4.935 C 8.494 4.909,12.233 4.856,14.476 4.847 L 15.971 4.840 16.243 5.063 M12.550 9.808 C 12.763 9.907,12.988 10.166,13.045 10.378 C 13.070 10.469,13.081 10.692,13.070 10.888 C 13.054 11.169,13.030 11.270,12.944 11.416 C 12.746 11.755,12.426 11.926,11.995 11.925 C 11.635 11.924,11.443 11.834,11.144 11.528 L 10.909 11.286 10.928 10.807 C 10.945 10.409,10.963 10.305,11.035 10.189 C 11.149 10.004,11.498 9.768,11.721 9.723 C 11.969 9.674,12.347 9.713,12.550 9.808 M16.150 9.808 C 16.363 9.907,16.588 10.166,16.645 10.378 C 16.670 10.469,16.681 10.692,16.670 10.888 C 16.654 11.169,16.630 11.270,16.544 11.416 C 16.346 11.755,16.026 11.926,15.595 11.925 C 15.235 11.924,15.043 11.834,14.744 11.528 L 14.509 11.286 14.528 10.807 C 14.545 10.409,14.563 10.305,14.635 10.189 C 14.749 10.004,15.098 9.768,15.321 9.723 C 15.569 9.674,15.947 9.713,16.150 9.808 M9.023 9.862 C 9.130 9.928,9.272 10.059,9.338 10.153 C 9.449 10.312,9.459 10.355,9.474 10.740 C 9.487 11.106,9.478 11.178,9.401 11.338 C 9.170 11.814,8.586 12.030,8.000 11.856 C 7.837 11.808,7.736 11.741,7.573 11.575 L 7.360 11.356 7.360 10.814 L 7.360 10.272 7.485 10.114 C 7.554 10.027,7.702 9.902,7.815 9.836 C 8.012 9.721,8.036 9.717,8.424 9.729 C 8.793 9.740,8.846 9.752,9.023 9.862 M12.550 13.408 C 12.763 13.507,12.988 13.766,13.045 13.978 C 13.070 14.069,13.081 14.292,13.070 14.488 C 13.054 14.769,13.030 14.870,12.944 15.016 C 12.746 15.355,12.426 15.526,11.995 15.525 C 11.635 15.524,11.443 15.434,11.144 15.128 L 10.909 14.886 10.928 14.407 C 10.945 14.009,10.963 13.905,11.035 13.789 C 11.149 13.604,11.498 13.368,11.721 13.323 C 11.969 13.274,12.347 13.313,12.550 13.408 M9.023 13.462 C 9.130 13.528,9.272 13.659,9.338 13.753 C 9.449 13.912,9.459 13.955,9.474 14.340 C 9.487 14.706,9.478 14.778,9.401 14.938 C 9.170 15.414,8.586 15.630,8.000 15.456 C 7.837 15.408,7.736 15.341,7.573 15.175 L 7.360 14.956 7.360 14.414 L 7.360 13.872 7.485 13.714 C 7.554 13.627,7.702 13.502,7.815 13.436 C 8.012 13.321,8.036 13.317,8.424 13.329 C 8.793 13.340,8.846 13.352,9.023 13.462 M16.145 13.414 C 16.454 13.578,16.587 13.796,16.641 14.230 C 16.676 14.520,16.758 17.133,16.760 18.019 L 16.760 18.417 16.470 18.701 C 15.823 19.334,15.377 19.334,14.730 18.701 L 14.440 18.417 14.441 16.219 L 14.442 14.020 14.631 13.793 C 14.861 13.517,14.982 13.419,15.162 13.364 C 15.354 13.305,16.003 13.338,16.145 13.414 M12.550 17.008 C 12.763 17.107,12.988 17.366,13.045 17.578 C 13.070 17.669,13.081 17.892,13.070 18.088 C 13.054 18.369,13.030 18.470,12.944 18.616 C 12.746 18.955,12.426 19.126,11.995 19.125 C 11.635 19.124,11.443 19.034,11.144 18.728 L 10.909 18.486 10.928 18.007 C 10.945 17.609,10.963 17.505,11.035 17.389 C 11.149 17.204,11.498 16.968,11.721 16.923 C 11.969 16.874,12.347 16.913,12.550 17.008 M9.023 17.062 C 9.130 17.128,9.272 17.259,9.338 17.353 C 9.449 17.512,9.459 17.555,9.474 17.940 C 9.487 18.306,9.478 18.378,9.401 18.538 C 9.170 19.014,8.586 19.230,8.000 19.056 C 7.837 19.008,7.736 18.941,7.573 18.775 L 7.360 18.556 7.360 18.014 L 7.360 17.472 7.485 17.314 C 7.554 17.227,7.702 17.102,7.815 17.036 C 8.012 16.921,8.036 16.917,8.424 16.929 C 8.793 16.940,8.846 16.952,9.023 17.062 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.840 2.558 L 6.420 2.580 6.200 2.688 C 5.764 2.903,5.203 3.518,4.905 4.109 L 4.800 4.317 4.801 12.009 L 4.801 19.700 4.962 19.994 C 5.330 20.671,5.821 21.147,6.509 21.494 L 6.717 21.600 12.003 21.600 L 17.288 21.600 17.556 21.459 C 18.174 21.134,18.736 20.557,19.040 19.935 L 19.200 19.608 19.200 11.953 L 19.200 4.298 19.022 3.986 C 18.670 3.369,18.108 2.795,17.722 2.657 C 17.570 2.604,17.218 2.587,15.580 2.559 C 13.487 2.522,10.161 2.522,7.840 2.558 M16.295 5.130 C 16.629 5.460,16.640 5.492,16.640 6.081 L 16.640 6.473 16.483 6.671 C 16.397 6.780,16.243 6.938,16.141 7.021 L 15.955 7.174 11.998 7.192 L 8.042 7.211 7.744 6.913 C 7.491 6.660,7.437 6.581,7.378 6.380 C 7.260 5.973,7.357 5.489,7.615 5.206 C 7.766 5.040,7.984 4.957,8.333 4.934 C 8.701 4.909,12.496 4.857,14.611 4.847 L 16.002 4.840 16.295 5.130 M8.982 9.841 C 9.056 9.887,9.188 10.005,9.273 10.102 C 9.439 10.290,9.479 10.448,9.480 10.922 C 9.481 11.525,8.929 11.974,8.273 11.906 C 7.948 11.872,7.806 11.802,7.567 11.560 L 7.360 11.349 7.360 10.798 L 7.360 10.247 7.530 10.073 C 7.623 9.977,7.781 9.857,7.880 9.806 C 8.043 9.723,8.098 9.716,8.453 9.736 C 8.756 9.752,8.877 9.776,8.982 9.841 M12.615 9.855 C 12.844 9.989,13.025 10.255,13.064 10.514 C 13.079 10.615,13.073 10.837,13.051 11.007 C 12.976 11.576,12.637 11.884,12.057 11.914 C 11.689 11.932,11.484 11.846,11.159 11.536 L 10.920 11.308 10.921 11.024 C 10.921 10.868,10.938 10.625,10.959 10.484 C 10.990 10.267,11.018 10.204,11.147 10.073 C 11.230 9.988,11.388 9.872,11.499 9.816 C 11.679 9.725,11.737 9.716,12.062 9.729 C 12.371 9.741,12.452 9.759,12.615 9.855 M16.215 9.855 C 16.444 9.989,16.625 10.255,16.664 10.514 C 16.679 10.615,16.673 10.837,16.651 11.007 C 16.576 11.576,16.237 11.884,15.657 11.914 C 15.289 11.932,15.084 11.846,14.759 11.536 L 14.520 11.308 14.521 11.024 C 14.521 10.868,14.538 10.625,14.559 10.484 C 14.590 10.267,14.618 10.204,14.747 10.073 C 14.830 9.988,14.988 9.872,15.099 9.816 C 15.279 9.725,15.337 9.716,15.662 9.729 C 15.971 9.741,16.052 9.759,16.215 9.855 M8.982 13.441 C 9.056 13.487,9.188 13.605,9.273 13.702 C 9.439 13.890,9.479 14.048,9.480 14.522 C 9.481 15.125,8.929 15.574,8.273 15.506 C 7.948 15.472,7.806 15.402,7.567 15.160 L 7.360 14.949 7.360 14.398 L 7.360 13.847 7.530 13.673 C 7.623 13.577,7.781 13.457,7.880 13.406 C 8.043 13.323,8.098 13.316,8.453 13.336 C 8.756 13.352,8.877 13.376,8.982 13.441 M12.615 13.455 C 12.844 13.589,13.025 13.855,13.064 14.114 C 13.079 14.215,13.073 14.437,13.051 14.607 C 12.976 15.176,12.637 15.484,12.057 15.514 C 11.689 15.532,11.484 15.446,11.159 15.136 L 10.920 14.908 10.921 14.624 C 10.921 14.468,10.938 14.225,10.959 14.084 C 10.990 13.867,11.018 13.804,11.147 13.673 C 11.230 13.588,11.388 13.472,11.499 13.416 C 11.679 13.325,11.737 13.316,12.062 13.329 C 12.371 13.341,12.452 13.359,12.615 13.455 M16.021 13.382 C 16.181 13.406,16.423 13.610,16.522 13.804 C 16.636 14.027,16.668 14.467,16.725 16.576 L 16.775 18.413 16.509 18.665 C 15.817 19.320,15.407 19.328,14.729 18.700 L 14.440 18.433 14.440 16.222 L 14.440 14.012 14.684 13.745 C 14.819 13.598,14.967 13.457,15.014 13.431 C 15.192 13.334,15.578 13.315,16.021 13.382 M8.982 17.041 C 9.056 17.087,9.188 17.205,9.273 17.302 C 9.439 17.490,9.479 17.648,9.480 18.122 C 9.481 18.725,8.929 19.174,8.273 19.106 C 7.948 19.072,7.806 19.002,7.567 18.760 L 7.360 18.549 7.360 17.998 L 7.360 17.447 7.530 17.273 C 7.623 17.177,7.781 17.057,7.880 17.006 C 8.043 16.923,8.098 16.916,8.453 16.936 C 8.756 16.952,8.877 16.976,8.982 17.041 M12.615 17.055 C 12.844 17.189,13.025 17.455,13.064 17.714 C 13.079 17.815,13.073 18.037,13.051 18.207 C 12.976 18.776,12.637 19.084,12.057 19.114 C 11.689 19.132,11.484 19.046,11.159 18.736 L 10.920 18.508 10.921 18.224 C 10.921 18.068,10.938 17.825,10.959 17.684 C 10.990 17.467,11.018 17.404,11.147 17.273 C 11.230 17.188,11.388 17.072,11.499 17.016 C 11.679 16.925,11.737 16.916,12.062 16.929 C 12.371 16.941,12.452 16.959,12.615 17.055 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/calendar.svg b/packages/icons/svg/calendar.svg
index 4e10102e3a..46a04d571d 100644
--- a/packages/icons/svg/calendar.svg
+++ b/packages/icons/svg/calendar.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.535 2.675 C 6.428 2.761,6.281 2.913,6.209 3.013 C 6.093 3.175,6.074 3.240,6.040 3.588 C 6.019 3.803,6.002 4.165,6.001 4.390 C 6.000 4.791,5.998 4.800,5.908 4.800 C 5.857 4.800,5.574 4.819,5.278 4.841 C 3.997 4.940,3.661 5.063,3.116 5.629 C 2.860 5.894,2.732 6.069,2.589 6.346 L 2.400 6.713 2.400 13.197 L 2.400 19.682 2.525 19.931 C 2.864 20.608,3.388 21.132,4.069 21.475 L 4.318 21.600 12.000 21.600 L 19.683 21.600 19.891 21.494 C 20.596 21.138,21.141 20.593,21.495 19.891 L 21.600 19.683 21.600 13.200 L 21.600 6.717 21.495 6.509 C 21.102 5.733,20.638 5.260,20.056 5.042 C 19.831 4.958,19.169 4.867,18.416 4.817 L 18.012 4.791 17.987 4.085 C 17.973 3.697,17.942 3.313,17.919 3.231 C 17.867 3.049,17.537 2.700,17.337 2.616 C 17.257 2.583,17.044 2.545,16.864 2.532 C 16.582 2.513,16.508 2.522,16.340 2.596 C 15.876 2.801,15.702 3.062,15.641 3.645 C 15.619 3.851,15.601 4.196,15.601 4.410 L 15.600 4.800 12.000 4.800 L 8.400 4.800 8.400 4.350 C 8.399 3.338,8.297 3.002,7.907 2.735 C 7.656 2.562,7.494 2.520,7.075 2.520 C 6.735 2.520,6.728 2.522,6.535 2.675 M17.443 8.663 C 17.794 8.949,17.860 9.106,17.860 9.647 L 17.860 10.034 17.696 10.266 C 17.606 10.393,17.451 10.553,17.352 10.622 L 17.170 10.747 15.275 10.773 C 14.233 10.788,11.910 10.800,10.112 10.800 L 6.845 10.800 6.654 10.635 C 6.220 10.259,6.120 10.067,6.121 9.612 C 6.122 9.227,6.181 9.043,6.379 8.809 C 6.550 8.606,6.662 8.568,7.183 8.538 C 7.664 8.510,12.278 8.459,15.456 8.447 L 17.171 8.440 17.443 8.663 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.651 2.599 C 6.489 2.698,6.211 2.982,6.138 3.124 C 6.065 3.266,6.001 3.835,6.000 4.348 C 6.000 4.572,5.986 4.764,5.968 4.775 C 5.951 4.786,5.676 4.814,5.358 4.838 C 4.522 4.902,4.106 4.980,3.779 5.135 C 3.304 5.359,2.826 5.867,2.525 6.469 L 2.400 6.718 2.401 13.209 L 2.401 19.700 2.562 19.994 C 2.930 20.671,3.421 21.147,4.109 21.494 L 4.317 21.600 12.003 21.600 L 19.688 21.600 19.958 21.458 C 20.549 21.148,21.148 20.548,21.459 19.956 L 21.600 19.688 21.600 13.203 L 21.600 6.717 21.495 6.509 C 21.185 5.890,20.682 5.340,20.233 5.127 C 20.064 5.047,19.840 4.986,19.560 4.943 C 19.160 4.882,18.338 4.801,18.116 4.800 L 18.013 4.800 17.987 4.110 C 17.973 3.730,17.941 3.350,17.917 3.264 C 17.857 3.052,17.521 2.702,17.294 2.615 C 17.016 2.509,16.507 2.517,16.276 2.631 C 15.786 2.872,15.647 3.194,15.611 4.170 L 15.588 4.800 11.994 4.800 L 8.400 4.800 8.400 4.310 C 8.399 3.389,8.276 2.996,7.909 2.746 C 7.666 2.580,7.449 2.522,7.060 2.521 C 6.851 2.521,6.747 2.540,6.651 2.599 M17.495 8.730 C 17.829 9.060,17.840 9.092,17.840 9.681 L 17.840 10.073 17.683 10.271 C 17.597 10.380,17.443 10.537,17.342 10.621 L 17.156 10.773 12.001 10.792 L 6.845 10.811 6.578 10.556 C 6.243 10.234,6.153 10.062,6.129 9.697 C 6.104 9.316,6.193 9.012,6.391 8.805 C 6.584 8.603,6.730 8.565,7.440 8.535 C 8.057 8.510,12.802 8.458,15.551 8.447 L 17.202 8.440 17.495 8.730 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/camera.svg b/packages/icons/svg/camera.svg
index 26499fd23a..89cd06fe21 100644
--- a/packages/icons/svg/camera.svg
+++ b/packages/icons/svg/camera.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 3.719 C 9.577 3.770,9.673 3.717,7.977 5.195 C 7.351 5.740,7.157 5.865,6.860 5.917 C 6.728 5.940,6.152 5.996,5.580 6.040 C 3.820 6.175,3.757 6.195,3.176 6.777 C 2.879 7.075,2.780 7.208,2.636 7.498 L 2.460 7.854 2.434 8.757 C 2.419 9.254,2.406 11.645,2.404 14.071 L 2.400 18.483 2.505 18.691 C 2.888 19.451,3.349 19.912,4.109 20.295 L 4.317 20.400 11.109 20.398 C 17.759 20.396,19.408 20.374,19.828 20.281 C 20.413 20.150,21.205 19.367,21.495 18.633 L 21.600 18.366 21.600 13.142 L 21.600 7.917 21.495 7.709 C 21.077 6.876,20.413 6.281,19.765 6.160 C 19.646 6.138,19.034 6.084,18.405 6.039 C 17.775 5.995,17.179 5.940,17.080 5.917 C 16.820 5.857,16.593 5.692,15.740 4.941 C 14.626 3.961,14.407 3.824,13.853 3.763 C 13.349 3.707,11.504 3.682,10.680 3.719 M12.447 9.760 C 12.932 9.791,13.080 9.816,13.300 9.905 C 14.192 10.262,15.030 11.144,15.366 12.080 C 15.453 12.324,15.459 12.394,15.454 13.200 C 15.450 13.939,15.438 14.095,15.370 14.307 C 15.116 15.096,14.246 16.078,13.488 16.429 C 12.626 16.828,11.529 16.862,10.694 16.515 C 9.955 16.207,9.133 15.413,8.774 14.659 C 8.592 14.277,8.520 13.866,8.520 13.206 C 8.521 12.278,8.611 11.957,9.063 11.275 C 9.369 10.813,9.786 10.411,10.224 10.156 C 10.956 9.731,11.235 9.681,12.447 9.760 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.092 3.760 C 9.626 3.825,9.336 4.008,8.400 4.825 C 7.356 5.738,7.186 5.857,6.836 5.919 C 6.717 5.940,6.170 5.994,5.620 6.039 C 3.838 6.185,3.728 6.218,3.166 6.793 C 2.901 7.063,2.773 7.234,2.621 7.523 L 2.421 7.900 2.406 13.183 L 2.392 18.466 2.501 18.683 C 2.876 19.424,3.381 19.930,4.116 20.299 L 4.331 20.407 11.756 20.388 C 16.787 20.375,19.293 20.354,19.532 20.325 C 19.742 20.298,19.967 20.241,20.092 20.182 C 20.574 19.954,21.160 19.335,21.436 18.760 L 21.580 18.460 21.590 13.187 L 21.601 7.913 21.460 7.647 C 21.031 6.833,20.362 6.265,19.714 6.163 C 19.574 6.141,19.082 6.095,18.620 6.061 C 17.352 5.966,17.053 5.928,16.878 5.839 C 16.694 5.745,16.250 5.392,15.601 4.823 C 15.348 4.601,15.032 4.337,14.900 4.237 C 14.250 3.744,14.290 3.752,12.120 3.737 C 11.141 3.731,10.228 3.741,10.092 3.760 M12.374 9.762 C 13.224 9.819,13.561 9.947,14.184 10.448 C 14.579 10.766,14.960 11.250,15.212 11.756 L 15.420 12.171 15.420 13.196 L 15.420 14.220 15.260 14.559 C 14.974 15.166,14.431 15.807,13.871 16.201 C 13.345 16.570,12.512 16.788,11.780 16.747 C 10.886 16.697,10.193 16.364,9.494 15.649 C 8.732 14.869,8.480 14.159,8.533 12.940 C 8.566 12.174,8.665 11.876,9.091 11.244 C 9.612 10.471,10.485 9.873,11.256 9.760 C 11.553 9.716,11.713 9.717,12.374 9.762 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cash.svg b/packages/icons/svg/cash.svg
index a224c5acd2..945823b389 100644
--- a/packages/icons/svg/cash.svg
+++ b/packages/icons/svg/cash.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.380 4.918 L 4.060 4.940 3.800 5.080 C 3.325 5.336,2.808 5.906,2.505 6.509 L 2.400 6.717 2.401 9.609 L 2.401 12.500 2.579 12.831 C 2.886 13.402,3.226 13.789,3.636 14.031 C 3.852 14.158,4.540 14.399,4.690 14.400 L 4.800 14.400 4.800 10.800 L 4.800 7.200 10.800 7.200 C 16.514 7.200,16.800 7.197,16.800 7.129 C 16.800 7.011,16.647 6.499,16.539 6.254 C 16.340 5.803,15.929 5.384,15.389 5.081 L 15.158 4.951 12.629 4.918 C 11.238 4.899,9.785 4.887,9.400 4.890 C 9.015 4.893,7.656 4.906,6.380 4.918 M12.319 9.718 L 8.857 9.742 8.622 9.861 C 8.178 10.086,7.629 10.678,7.325 11.260 L 7.200 11.500 7.200 14.391 L 7.200 17.283 7.305 17.491 C 7.688 18.251,8.149 18.712,8.909 19.095 L 9.117 19.200 14.430 19.200 L 19.742 19.200 20.055 19.022 C 20.696 18.656,21.044 18.300,21.478 17.563 L 21.600 17.356 21.599 14.428 L 21.599 11.500 21.436 11.202 C 21.123 10.627,20.797 10.284,20.185 9.885 L 19.870 9.680 17.825 9.687 C 16.700 9.692,14.222 9.705,12.319 9.718 M15.242 12.217 C 15.631 12.348,16.223 12.893,16.513 13.387 L 16.673 13.660 16.701 14.300 C 16.719 14.719,16.713 14.996,16.685 15.101 C 16.626 15.320,16.333 15.715,15.939 16.107 C 15.441 16.601,15.132 16.724,14.380 16.726 C 14.012 16.727,13.897 16.712,13.675 16.631 C 13.293 16.491,13.053 16.339,12.778 16.063 C 12.382 15.667,12.201 15.282,12.119 14.671 C 11.999 13.767,12.364 12.979,13.148 12.449 C 13.470 12.231,13.556 12.189,13.740 12.156 C 13.968 12.115,15.073 12.161,15.242 12.217 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.440 4.918 L 4.060 4.940 3.850 5.056 C 3.354 5.331,2.801 5.924,2.518 6.484 L 2.400 6.718 2.400 9.600 L 2.400 12.483 2.505 12.691 C 2.836 13.347,3.296 13.868,3.727 14.074 C 4.032 14.219,4.574 14.400,4.705 14.400 L 4.800 14.400 4.800 10.800 L 4.800 7.200 10.614 7.200 C 13.812 7.200,16.512 7.189,16.614 7.175 C 16.733 7.158,16.800 7.129,16.800 7.094 C 16.800 6.947,16.506 6.157,16.386 5.980 C 16.191 5.694,15.786 5.321,15.457 5.127 L 15.174 4.959 12.357 4.921 C 10.808 4.899,9.378 4.885,9.180 4.889 C 8.982 4.893,7.749 4.906,6.440 4.918 M12.520 9.719 L 8.860 9.742 8.601 9.881 C 8.165 10.115,7.680 10.639,7.337 11.246 L 7.200 11.488 7.200 14.385 L 7.200 17.283 7.305 17.491 C 7.674 18.221,8.185 18.732,8.909 19.095 L 9.117 19.200 14.437 19.200 L 19.756 19.200 19.963 19.078 C 20.609 18.697,20.972 18.353,21.358 17.757 L 21.600 17.382 21.600 14.450 C 21.600 11.536,21.599 11.516,21.515 11.348 C 21.212 10.751,20.817 10.310,20.235 9.921 L 19.875 9.680 18.027 9.688 C 17.011 9.692,14.533 9.706,12.520 9.719 M15.097 12.199 C 15.525 12.269,16.118 12.764,16.491 13.363 L 16.678 13.664 16.689 14.382 C 16.699 15.054,16.694 15.110,16.613 15.263 C 16.412 15.638,15.794 16.302,15.468 16.493 C 15.195 16.653,14.878 16.720,14.390 16.720 C 13.730 16.720,13.269 16.537,12.821 16.095 C 12.347 15.630,12.159 15.194,12.129 14.497 C 12.108 13.985,12.151 13.735,12.323 13.374 C 12.519 12.962,13.099 12.407,13.525 12.222 C 13.685 12.152,14.718 12.137,15.097 12.199 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chart-bar.svg b/packages/icons/svg/chart-bar.svg
index 6f283e359e..2329a39886 100644
--- a/packages/icons/svg/chart-bar.svg
+++ b/packages/icons/svg/chart-bar.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.688 3.761 C 17.419 3.800,17.208 3.940,16.980 4.230 L 16.800 4.460 16.800 12.005 L 16.800 19.550 16.963 19.754 C 17.053 19.867,17.245 20.058,17.392 20.179 L 17.657 20.400 19.188 20.400 L 20.718 20.400 21.027 20.150 C 21.242 19.976,21.367 19.840,21.438 19.701 L 21.540 19.502 21.566 16.101 C 21.580 14.230,21.594 10.841,21.596 8.569 L 21.600 4.439 21.250 4.079 L 20.900 3.720 19.400 3.725 C 18.575 3.728,17.805 3.744,17.688 3.761 M10.492 7.360 C 10.183 7.406,9.931 7.589,9.686 7.946 L 9.600 8.072 9.600 13.819 L 9.600 19.565 9.790 19.786 C 9.894 19.908,10.088 20.089,10.220 20.189 L 10.460 20.371 12.005 20.349 C 13.265 20.331,13.572 20.316,13.665 20.267 C 13.813 20.190,14.132 19.875,14.282 19.656 L 14.400 19.486 14.400 13.762 L 14.400 8.039 14.050 7.679 L 13.700 7.320 12.200 7.325 C 11.375 7.328,10.607 7.344,10.492 7.360 M3.460 12.157 C 3.059 12.183,2.941 12.231,2.706 12.466 C 2.404 12.768,2.425 12.505,2.423 16.000 C 2.421 19.223,2.430 19.459,2.580 19.774 C 2.663 19.948,3.053 20.267,3.260 20.329 C 3.510 20.403,6.198 20.378,6.386 20.300 C 6.587 20.216,6.814 20.026,7.027 19.765 L 7.210 19.540 7.187 16.500 C 7.174 14.828,7.146 13.313,7.125 13.134 C 7.079 12.748,7.030 12.643,6.757 12.345 L 6.552 12.120 5.186 12.127 C 4.435 12.131,3.658 12.144,3.460 12.157 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.980 3.757 C 17.596 3.777,17.516 3.794,17.354 3.890 C 17.251 3.950,17.085 4.103,16.984 4.230 L 16.801 4.460 16.800 12.003 L 16.800 19.547 16.946 19.734 C 17.027 19.838,17.219 20.030,17.374 20.161 L 17.656 20.400 19.201 20.400 L 20.747 20.400 21.070 20.100 C 21.255 19.928,21.429 19.725,21.477 19.626 L 21.561 19.452 21.587 11.944 L 21.613 4.435 21.257 4.077 L 20.902 3.720 19.661 3.727 C 18.978 3.731,18.222 3.744,17.980 3.757 M10.780 7.358 C 10.217 7.389,9.993 7.503,9.719 7.902 L 9.600 8.074 9.600 13.828 L 9.600 19.581 9.830 19.821 C 9.957 19.953,10.146 20.131,10.251 20.216 L 10.443 20.372 11.971 20.350 C 12.927 20.336,13.542 20.311,13.612 20.284 C 13.754 20.229,14.133 19.873,14.285 19.653 L 14.400 19.486 14.400 13.752 L 14.400 8.018 14.049 7.669 L 13.698 7.320 12.459 7.327 C 11.778 7.331,11.022 7.345,10.780 7.358 M3.720 12.157 C 3.178 12.178,3.082 12.192,2.960 12.268 C 2.731 12.410,2.517 12.657,2.477 12.825 C 2.420 13.058,2.387 16.972,2.430 18.320 C 2.473 19.670,2.487 19.731,2.817 20.034 C 3.186 20.372,3.163 20.368,4.857 20.353 L 6.347 20.340 6.571 20.191 C 6.694 20.109,6.889 19.929,7.004 19.791 L 7.213 19.540 7.186 16.480 C 7.171 14.797,7.141 13.288,7.120 13.128 C 7.072 12.765,7.011 12.633,6.755 12.346 L 6.554 12.120 5.447 12.127 C 4.838 12.131,4.061 12.144,3.720 12.157 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chart-pie.svg b/packages/icons/svg/chart-pie.svg
index 1ba8a1b800..2eecb80230 100644
--- a/packages/icons/svg/chart-pie.svg
+++ b/packages/icons/svg/chart-pie.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.600 2.425 C 11.545 2.433,11.338 2.459,11.140 2.483 C 9.206 2.713,7.344 3.468,6.047 4.549 C 5.669 4.863,4.884 5.642,4.564 6.020 C 3.921 6.778,3.368 7.780,2.952 8.940 C 2.104 11.302,2.289 13.937,3.468 16.295 C 4.490 18.339,6.270 19.977,8.420 20.854 C 9.644 21.354,10.719 21.557,12.152 21.559 C 13.097 21.561,13.896 21.430,14.880 21.111 C 16.494 20.589,17.611 19.881,18.881 18.575 C 19.376 18.065,19.931 17.366,20.211 16.898 C 20.952 15.660,21.510 13.858,21.587 12.450 L 21.612 12.000 16.806 12.000 L 12.000 12.000 12.000 7.200 L 12.000 2.400 11.850 2.405 C 11.768 2.408,11.655 2.417,11.600 2.425 M14.456 2.827 C 14.437 2.867,14.416 4.407,14.408 6.250 L 14.395 9.600 17.151 9.600 C 18.667 9.600,20.209 9.588,20.577 9.574 L 21.246 9.547 21.220 9.404 C 21.144 8.983,20.366 7.342,19.928 6.680 C 18.876 5.085,17.204 3.796,15.120 2.972 C 14.557 2.749,14.499 2.736,14.456 2.827 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.160 2.483 C 10.092 2.629,9.288 2.835,8.400 3.187 C 7.596 3.507,6.993 3.841,6.314 4.346 C 5.810 4.719,4.636 5.889,4.300 6.351 C 3.444 7.529,2.838 8.952,2.552 10.460 C 2.471 10.884,2.461 11.062,2.462 11.980 C 2.462 12.899,2.473 13.078,2.556 13.520 C 2.932 15.524,3.746 17.161,5.061 18.551 C 6.511 20.085,8.538 21.149,10.600 21.459 C 11.192 21.548,12.439 21.581,12.980 21.523 C 14.748 21.332,16.534 20.597,17.876 19.508 C 18.626 18.900,19.603 17.825,20.108 17.051 C 20.863 15.896,21.503 13.907,21.586 12.458 L 21.612 12.000 16.806 12.000 L 12.000 12.000 12.000 7.200 L 12.000 2.400 11.850 2.404 C 11.768 2.407,11.457 2.442,11.160 2.483 M14.479 2.801 C 14.435 2.828,14.422 3.450,14.407 6.217 L 14.389 9.600 17.268 9.600 C 18.852 9.600,20.395 9.588,20.697 9.574 L 21.247 9.547 21.220 9.404 C 21.155 9.055,20.439 7.510,20.041 6.860 C 19.048 5.240,17.299 3.852,15.168 2.994 C 14.723 2.814,14.540 2.763,14.479 2.801 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chart-square-bar.svg b/packages/icons/svg/chart-square-bar.svg
index d71b4e10c8..61069eda76 100644
--- a/packages/icons/svg/chart-square-bar.svg
+++ b/packages/icons/svg/chart-square-bar.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.994 3.881 C 4.543 4.133,3.994 4.737,3.718 5.284 L 3.600 5.518 3.600 12.000 L 3.600 18.482 3.725 18.731 C 4.069 19.418,4.588 19.930,5.309 20.295 L 5.517 20.400 11.089 20.399 C 16.852 20.398,18.345 20.371,18.703 20.263 C 19.106 20.141,19.745 19.597,20.050 19.117 C 20.126 18.998,20.236 18.780,20.294 18.633 L 20.400 18.366 20.400 11.987 L 20.400 5.608 20.275 5.314 C 20.206 5.152,20.088 4.925,20.011 4.810 C 19.850 4.566,19.297 4.038,19.052 3.894 L 18.884 3.795 12.052 3.775 L 5.220 3.755 4.994 3.881 M16.000 7.369 C 16.205 7.431,16.470 7.626,16.544 7.768 C 16.590 7.857,16.618 8.082,16.643 8.576 C 16.677 9.241,16.759 14.034,16.760 15.359 L 16.760 16.017 16.470 16.301 C 15.824 16.932,15.376 16.932,14.730 16.301 L 14.440 16.017 14.440 12.015 L 14.440 8.014 14.663 7.768 C 14.944 7.457,15.074 7.364,15.289 7.324 C 15.483 7.288,15.794 7.307,16.000 7.369 M12.546 9.855 C 12.701 9.937,12.883 10.061,12.950 10.132 L 13.073 10.260 13.122 13.139 L 13.171 16.019 12.860 16.308 C 12.488 16.655,12.257 16.777,11.980 16.776 C 11.707 16.774,11.487 16.652,11.132 16.304 L 10.840 16.017 10.840 13.214 L 10.840 10.410 11.100 10.129 C 11.448 9.754,11.615 9.670,11.982 9.691 C 12.210 9.704,12.316 9.735,12.546 9.855 M8.811 13.368 C 9.023 13.432,9.381 13.762,9.444 13.952 C 9.477 14.051,9.495 14.410,9.497 15.040 C 9.500 16.109,9.502 16.102,9.161 16.443 C 8.943 16.661,8.782 16.720,8.400 16.720 C 8.024 16.720,7.869 16.663,7.646 16.446 C 7.313 16.121,7.308 16.104,7.288 15.080 C 7.277 14.481,7.286 14.124,7.316 14.013 C 7.369 13.819,7.632 13.528,7.865 13.405 C 8.047 13.309,8.549 13.290,8.811 13.368 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.914 3.935 C 4.448 4.247,3.968 4.789,3.716 5.289 L 3.600 5.518 3.601 12.009 L 3.601 18.500 3.764 18.800 C 4.127 19.468,4.625 19.949,5.316 20.298 L 5.531 20.407 11.756 20.388 C 15.921 20.375,18.097 20.354,18.334 20.324 C 18.752 20.272,18.982 20.168,19.369 19.855 C 19.741 19.555,20.024 19.203,20.217 18.800 L 20.380 18.460 20.390 12.022 L 20.401 5.583 20.199 5.171 C 20.030 4.825,19.945 4.704,19.669 4.426 C 19.488 4.243,19.241 4.029,19.120 3.950 L 18.900 3.807 12.040 3.782 L 5.180 3.758 4.914 3.935 M16.140 7.430 C 16.342 7.537,16.514 7.699,16.563 7.828 C 16.626 7.995,16.673 9.426,16.725 12.798 L 16.774 16.015 16.487 16.284 C 15.816 16.912,15.393 16.915,14.722 16.294 L 14.440 16.033 14.440 12.022 L 14.440 8.012 14.679 7.750 C 15.021 7.378,15.169 7.311,15.620 7.330 C 15.888 7.341,16.021 7.367,16.140 7.430 M12.505 9.841 C 12.639 9.907,12.823 10.027,12.912 10.110 L 13.074 10.260 13.121 13.140 L 13.168 16.020 12.877 16.290 C 12.518 16.622,12.257 16.760,11.985 16.760 C 11.713 16.760,11.515 16.655,11.148 16.317 L 10.840 16.033 10.840 13.223 L 10.840 10.414 11.061 10.170 C 11.286 9.920,11.476 9.780,11.671 9.718 C 11.860 9.657,12.241 9.714,12.505 9.841 M8.884 13.400 C 9.086 13.506,9.316 13.726,9.396 13.892 C 9.474 14.053,9.480 14.133,9.480 15.010 C 9.480 15.578,9.463 15.999,9.438 16.066 C 9.363 16.262,9.127 16.509,8.913 16.616 C 8.650 16.747,8.194 16.761,7.939 16.645 C 7.704 16.539,7.411 16.229,7.355 16.028 C 7.326 15.923,7.306 15.512,7.304 14.940 C 7.301 14.153,7.310 14.003,7.367 13.899 C 7.463 13.723,7.814 13.407,7.947 13.378 C 8.009 13.364,8.078 13.346,8.100 13.337 C 8.184 13.303,8.792 13.353,8.884 13.400 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chat-alt-2.svg b/packages/icons/svg/chat-alt-2.svg
index 4189a738cb..abb5cbef02 100644
--- a/packages/icons/svg/chat-alt-2.svg
+++ b/packages/icons/svg/chat-alt-2.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.360 3.718 L 4.060 3.742 3.801 3.881 C 3.333 4.132,2.805 4.713,2.505 5.309 L 2.400 5.517 2.400 8.422 L 2.400 11.326 2.561 11.602 C 2.833 12.067,3.198 12.518,3.457 12.710 C 3.997 13.110,4.257 13.161,5.910 13.188 L 7.200 13.210 7.200 15.015 L 7.200 16.820 9.010 15.010 L 10.820 13.200 11.520 13.199 C 12.684 13.197,13.622 13.136,13.920 13.042 C 14.425 12.884,15.086 12.255,15.434 11.603 L 15.600 11.291 15.600 8.404 L 15.600 5.517 15.495 5.309 C 15.194 4.709,14.759 4.224,14.252 3.924 L 13.965 3.754 11.692 3.718 C 9.267 3.681,7.455 3.681,5.360 3.718 M17.983 9.310 C 17.916 11.574,17.854 12.426,17.723 12.900 C 17.577 13.427,17.110 14.072,16.460 14.645 C 15.611 15.395,15.036 15.553,13.040 15.587 L 11.820 15.608 11.527 15.894 C 11.366 16.051,10.893 16.534,10.476 16.966 L 9.718 17.752 10.061 17.876 L 10.404 18.000 11.812 18.000 L 13.220 18.000 15.010 19.790 L 16.800 21.580 16.800 19.796 L 16.800 18.013 18.090 17.987 C 18.800 17.972,19.488 17.943,19.620 17.921 C 20.291 17.811,21.094 17.130,21.495 16.331 L 21.600 16.123 21.600 13.220 L 21.600 10.317 21.495 10.109 C 21.048 9.222,20.389 8.672,19.616 8.542 C 19.259 8.482,18.426 8.401,18.155 8.400 L 18.011 8.400 17.983 9.310 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.620 3.718 L 4.060 3.741 3.850 3.857 C 3.355 4.130,2.801 4.724,2.518 5.284 L 2.400 5.518 2.400 8.431 L 2.400 11.344 2.578 11.632 C 2.969 12.267,3.424 12.748,3.814 12.939 C 4.173 13.115,4.544 13.158,5.930 13.186 L 7.200 13.212 7.200 15.016 L 7.200 16.820 9.010 15.010 L 10.820 13.200 11.620 13.200 C 12.488 13.199,13.404 13.146,13.771 13.074 C 14.329 12.965,15.067 12.302,15.459 11.557 L 15.600 11.288 15.600 8.400 L 15.600 5.512 15.460 5.246 C 15.158 4.674,14.726 4.212,14.192 3.890 L 13.977 3.761 11.359 3.721 C 8.653 3.680,8.248 3.680,5.620 3.718 M18.000 8.590 C 18.000 9.019,17.917 11.103,17.877 11.680 C 17.853 12.021,17.810 12.439,17.780 12.610 C 17.676 13.210,17.317 13.802,16.676 14.429 C 15.699 15.386,15.205 15.540,12.960 15.586 L 11.820 15.609 11.567 15.855 C 11.428 15.990,10.955 16.472,10.516 16.926 L 9.718 17.752 10.061 17.876 L 10.404 18.000 11.812 18.000 L 13.220 18.000 15.010 19.790 L 16.800 21.580 16.800 19.790 L 16.800 18.000 17.530 17.999 C 17.931 17.998,18.575 17.982,18.960 17.962 C 19.738 17.923,19.956 17.867,20.360 17.607 C 20.713 17.379,21.194 16.862,21.410 16.478 L 21.600 16.140 21.600 13.226 L 21.600 10.312 21.460 10.046 C 21.051 9.271,20.450 8.750,19.769 8.581 C 19.534 8.522,18.445 8.400,18.160 8.400 L 18.000 8.400 18.000 8.590 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chat-alt.svg b/packages/icons/svg/chat-alt.svg
index 935b1df020..e44f5a522c 100644
--- a/packages/icons/svg/chat-alt.svg
+++ b/packages/icons/svg/chat-alt.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.420 3.759 C 3.646 3.783,3.893 3.751,3.408 4.149 C 3.082 4.416,2.788 4.781,2.569 5.193 L 2.400 5.509 2.400 10.818 L 2.400 16.126 2.561 16.402 C 2.833 16.867,3.198 17.318,3.457 17.510 C 3.997 17.910,4.257 17.961,5.910 17.988 L 7.200 18.010 7.200 20.405 L 7.200 22.801 10.200 20.400 L 13.199 18.000 16.490 18.000 L 19.780 18.000 20.160 17.751 C 20.752 17.364,21.199 16.875,21.494 16.291 L 21.600 16.083 21.600 10.800 L 21.600 5.517 21.494 5.309 C 21.210 4.747,20.815 4.295,20.313 3.960 L 19.955 3.720 14.407 3.729 C 11.356 3.733,7.762 3.747,6.420 3.759 M8.400 10.800 L 8.400 12.000 7.200 12.000 L 6.000 12.000 6.000 10.800 L 6.000 9.600 7.200 9.600 L 8.400 9.600 8.400 10.800 M13.200 10.800 L 13.200 12.000 12.000 12.000 L 10.800 12.000 10.800 10.800 L 10.800 9.600 12.000 9.600 L 13.200 9.600 13.200 10.800 M18.000 10.800 L 18.000 12.000 16.800 12.000 L 15.600 12.000 15.600 10.800 L 15.600 9.600 16.800 9.600 L 18.000 9.600 18.000 10.800 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.820 3.763 C 5.593 3.778,4.044 3.805,3.960 3.828 C 3.727 3.893,3.590 3.981,3.295 4.254 C 3.004 4.524,2.689 4.945,2.505 5.309 L 2.400 5.517 2.400 10.831 L 2.400 16.144 2.578 16.432 C 2.969 17.067,3.424 17.548,3.814 17.739 C 4.173 17.915,4.544 17.958,5.930 17.986 L 7.200 18.012 7.200 20.407 L 7.200 22.801 10.200 20.400 L 13.199 18.000 16.492 18.000 L 19.785 18.000 20.143 17.757 C 20.736 17.354,21.230 16.819,21.495 16.291 L 21.600 16.083 21.600 10.800 L 21.600 5.517 21.494 5.309 C 21.223 4.773,20.830 4.328,20.294 3.950 L 19.968 3.720 15.754 3.728 C 13.436 3.733,9.866 3.748,7.820 3.763 M8.400 10.800 L 8.400 12.000 7.200 12.000 L 6.000 12.000 6.000 10.800 L 6.000 9.600 7.200 9.600 L 8.400 9.600 8.400 10.800 M13.200 10.800 L 13.200 12.000 12.000 12.000 L 10.800 12.000 10.800 10.800 L 10.800 9.600 12.000 9.600 L 13.200 9.600 13.200 10.800 M18.000 10.800 L 18.000 12.000 16.800 12.000 L 15.600 12.000 15.600 10.800 L 15.600 9.600 16.800 9.600 L 18.000 9.600 18.000 10.800 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chat.svg b/packages/icons/svg/chat.svg
index 38c6fceb0b..966305422f 100644
--- a/packages/icons/svg/chat.svg
+++ b/packages/icons/svg/chat.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.061 3.821 C 9.167 3.966,8.399 4.236,7.304 4.792 C 5.032 5.944,3.650 7.419,2.864 9.531 C 2.545 10.386,2.412 11.297,2.459 12.300 C 2.523 13.651,2.663 14.131,3.504 15.884 C 3.711 16.315,3.880 16.689,3.880 16.716 C 3.880 16.743,3.612 17.443,3.285 18.272 C 2.586 20.042,2.501 20.274,2.532 20.306 C 2.545 20.319,2.948 20.238,3.428 20.126 C 3.908 20.015,4.920 19.779,5.677 19.602 L 7.055 19.281 8.057 19.623 C 9.135 19.991,9.757 20.166,10.335 20.262 C 11.139 20.396,12.955 20.374,13.867 20.219 C 14.965 20.032,16.502 19.451,17.437 18.868 C 18.249 18.363,19.269 17.473,19.826 16.785 C 20.852 15.519,21.479 13.905,21.585 12.260 C 21.666 11.005,21.111 9.097,20.308 7.869 C 19.972 7.353,18.979 6.301,18.293 5.733 C 17.580 5.142,15.898 4.310,14.840 4.025 C 14.024 3.805,13.896 3.793,12.100 3.778 C 10.772 3.767,10.345 3.776,10.061 3.821 M8.400 12.000 L 8.400 13.200 7.200 13.200 L 6.000 13.200 6.000 12.000 L 6.000 10.800 7.200 10.800 L 8.400 10.800 8.400 12.000 M13.200 12.000 L 13.200 13.200 12.000 13.200 L 10.800 13.200 10.800 12.000 L 10.800 10.800 12.000 10.800 L 13.200 10.800 13.200 12.000 M18.000 12.000 L 18.000 13.200 16.800 13.200 L 15.600 13.200 15.600 12.000 L 15.600 10.800 16.800 10.800 L 18.000 10.800 18.000 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.440 3.800 C 9.449 3.856,8.296 4.244,6.992 4.960 C 5.201 5.944,4.038 7.091,3.257 8.643 C 2.671 9.808,2.462 10.686,2.464 11.980 C 2.466 13.439,2.614 14.004,3.469 15.820 C 3.666 16.238,3.838 16.612,3.852 16.650 C 3.882 16.732,3.833 16.868,3.105 18.728 C 2.807 19.492,2.551 20.162,2.537 20.218 C 2.513 20.315,2.518 20.319,2.646 20.295 C 2.803 20.267,4.969 19.771,6.194 19.483 L 7.048 19.282 8.114 19.639 C 9.985 20.266,10.365 20.337,11.860 20.337 C 13.365 20.337,14.010 20.253,15.058 19.918 C 16.754 19.375,17.914 18.690,19.159 17.495 C 20.409 16.295,21.175 14.828,21.505 13.000 C 21.609 12.428,21.600 11.504,21.487 10.931 C 21.262 9.795,20.816 8.641,20.307 7.873 C 20.062 7.504,19.445 6.810,18.874 6.263 C 18.276 5.689,17.751 5.317,16.960 4.905 C 15.638 4.216,14.540 3.862,13.593 3.821 C 12.744 3.784,10.941 3.772,10.440 3.800 M8.400 12.000 L 8.400 13.200 7.200 13.200 L 6.000 13.200 6.000 12.000 L 6.000 10.800 7.200 10.800 L 8.400 10.800 8.400 12.000 M13.200 12.000 L 13.200 13.200 12.000 13.200 L 10.800 13.200 10.800 12.000 L 10.800 10.800 12.000 10.800 L 13.200 10.800 13.200 12.000 M18.000 12.000 L 18.000 13.200 16.800 13.200 L 15.600 13.200 15.600 12.000 L 15.600 10.800 16.800 10.800 L 18.000 10.800 18.000 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/check-circle.svg b/packages/icons/svg/check-circle.svg
index a39d5043e6..a0c04b0dc9 100644
--- a/packages/icons/svg/check-circle.svg
+++ b/packages/icons/svg/check-circle.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M16.213 8.667 C 16.581 8.927,16.673 9.145,16.678 9.767 L 16.680 10.074 16.295 10.501 C 15.774 11.077,12.120 14.729,11.731 15.062 C 11.318 15.414,11.129 15.521,10.867 15.548 C 10.471 15.589,10.183 15.402,9.237 14.491 C 8.600 13.878,7.580 12.790,7.451 12.586 C 7.366 12.451,7.348 12.364,7.330 12.017 C 7.311 11.647,7.317 11.594,7.395 11.469 C 7.502 11.294,7.808 11.010,7.943 10.959 C 8.107 10.897,8.709 10.911,8.856 10.981 C 9.067 11.081,9.502 11.447,10.173 12.088 L 10.807 12.693 11.913 11.594 C 13.430 10.089,14.353 9.197,14.780 8.824 L 15.140 8.510 15.597 8.532 C 16.015 8.552,16.066 8.564,16.213 8.667 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M16.179 8.657 C 16.533 8.866,16.641 9.085,16.670 9.662 L 16.691 10.064 16.270 10.522 C 15.509 11.349,11.708 15.102,11.440 15.290 C 10.810 15.732,10.494 15.648,9.560 14.793 C 8.805 14.102,7.551 12.774,7.426 12.532 C 7.356 12.396,7.299 11.824,7.336 11.626 C 7.370 11.445,7.668 11.112,7.894 11.003 C 8.080 10.913,8.454 10.893,8.733 10.957 C 8.992 11.017,9.279 11.245,10.213 12.131 L 10.807 12.693 11.873 11.634 C 13.362 10.157,14.358 9.194,14.780 8.825 L 15.140 8.510 15.579 8.536 C 15.938 8.558,16.046 8.580,16.179 8.657 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/check.svg b/packages/icons/svg/check.svg
index 230780aa0c..3816f54ec2 100644
--- a/packages/icons/svg/check.svg
+++ b/packages/icons/svg/check.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.723 6.147 C 18.537 6.242,17.837 6.923,13.410 11.311 L 9.599 15.087 8.270 13.778 C 6.847 12.376,5.781 11.359,5.463 11.100 L 5.267 10.940 4.844 10.941 C 4.341 10.942,4.186 11.004,3.924 11.309 C 3.579 11.708,3.554 12.157,3.851 12.593 C 4.164 13.054,8.574 17.448,9.055 17.779 C 9.258 17.918,9.320 17.940,9.553 17.952 C 10.020 17.978,9.985 18.008,13.460 14.597 C 15.764 12.336,19.448 8.608,19.917 8.064 C 20.151 7.792,20.317 7.476,20.348 7.246 C 20.362 7.147,20.342 6.999,20.296 6.854 C 20.193 6.526,19.971 6.311,19.623 6.204 C 19.229 6.082,18.892 6.061,18.723 6.147 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.873 6.122 C 18.793 6.135,18.683 6.175,18.630 6.210 C 18.481 6.308,17.192 7.568,13.228 11.496 L 9.595 15.094 8.628 14.135 C 7.332 12.850,6.288 11.842,5.750 11.358 L 5.308 10.960 4.866 10.960 C 4.502 10.960,4.395 10.974,4.254 11.043 C 3.951 11.190,3.695 11.561,3.654 11.913 C 3.615 12.247,3.741 12.484,4.252 13.046 C 4.819 13.670,7.543 16.394,8.360 17.156 C 9.172 17.911,9.217 17.940,9.582 17.940 C 9.850 17.940,9.885 17.929,10.091 17.788 C 10.213 17.704,10.642 17.327,11.046 16.950 C 12.014 16.046,19.283 8.777,19.746 8.250 C 20.181 7.756,20.335 7.472,20.337 7.159 C 20.340 6.711,20.032 6.317,19.582 6.195 C 19.326 6.125,19.033 6.095,18.873 6.122 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cheveron-down.svg b/packages/icons/svg/cheveron-down.svg
index 9052e0f87c..c949fb8420 100644
--- a/packages/icons/svg/cheveron-down.svg
+++ b/packages/icons/svg/cheveron-down.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.790 8.534 C 6.562 8.620,6.452 8.705,6.302 8.911 C 6.119 9.163,6.023 9.475,6.055 9.711 C 6.112 10.122,6.336 10.377,8.809 12.848 C 10.882 14.920,11.285 15.296,11.594 15.449 C 11.862 15.580,12.201 15.574,12.440 15.433 C 12.942 15.137,16.191 11.964,17.479 10.512 C 17.970 9.959,18.053 9.691,17.877 9.222 C 17.784 8.974,17.529 8.692,17.299 8.582 C 17.183 8.527,17.071 8.516,16.763 8.526 C 16.377 8.540,16.372 8.541,16.157 8.704 C 15.841 8.944,14.803 9.926,13.307 11.400 L 11.995 12.694 10.947 11.654 C 8.693 9.417,7.978 8.754,7.659 8.604 C 7.428 8.495,6.989 8.460,6.790 8.534 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.890 8.522 C 6.532 8.571,6.179 8.964,6.075 9.427 C 6.007 9.731,6.091 9.979,6.384 10.341 C 6.717 10.752,11.058 15.079,11.351 15.292 C 11.820 15.634,12.210 15.628,12.651 15.274 C 13.123 14.895,14.239 13.828,15.662 12.394 C 17.980 10.058,18.093 9.900,17.892 9.279 C 17.804 9.005,17.501 8.670,17.258 8.577 C 17.042 8.495,16.484 8.515,16.297 8.611 C 16.058 8.736,14.904 9.819,12.990 11.718 L 12.000 12.699 10.950 11.657 C 8.857 9.581,8.090 8.864,7.735 8.655 C 7.550 8.547,7.158 8.485,6.890 8.522 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cheveron-left.svg b/packages/icons/svg/cheveron-left.svg
index 5807d726a3..2034dd28fc 100644
--- a/packages/icons/svg/cheveron-left.svg
+++ b/packages/icons/svg/cheveron-left.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.082 6.108 C 13.916 6.142,13.690 6.323,12.920 7.043 C 11.898 7.998,9.326 10.581,8.951 11.031 C 8.608 11.441,8.545 11.544,8.478 11.810 C 8.398 12.128,8.477 12.369,8.790 12.763 C 9.090 13.141,12.659 16.731,13.339 17.338 C 13.976 17.908,14.030 17.939,14.380 17.933 C 14.572 17.930,14.727 17.903,14.844 17.850 C 15.050 17.759,15.378 17.421,15.466 17.211 C 15.552 17.007,15.552 16.574,15.467 16.411 C 15.303 16.098,14.490 15.220,12.525 13.231 L 11.310 12.002 12.622 10.671 C 14.101 9.170,15.055 8.163,15.283 7.860 C 15.544 7.515,15.614 7.211,15.512 6.865 C 15.442 6.627,15.078 6.272,14.820 6.189 C 14.597 6.117,14.232 6.077,14.082 6.108 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.900 6.192 C 13.379 6.526,9.301 10.553,8.760 11.268 C 8.571 11.518,8.440 11.826,8.440 12.022 C 8.440 12.180,8.558 12.451,8.722 12.667 C 9.127 13.204,13.204 17.275,13.785 17.724 C 13.993 17.884,14.033 17.899,14.287 17.914 C 14.699 17.937,14.889 17.868,15.167 17.597 C 15.295 17.471,15.428 17.303,15.461 17.225 C 15.535 17.046,15.538 16.600,15.465 16.425 C 15.350 16.150,14.340 15.059,12.284 12.990 L 11.301 12.000 12.264 11.030 C 14.335 8.945,15.263 7.945,15.427 7.625 C 15.482 7.517,15.537 7.333,15.549 7.216 C 15.588 6.839,15.323 6.444,14.880 6.219 C 14.788 6.172,14.618 6.142,14.380 6.131 C 14.075 6.117,14.002 6.126,13.900 6.192 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cheveron-right.svg b/packages/icons/svg/cheveron-right.svg
index 01a73f5839..8cd9a0550d 100644
--- a/packages/icons/svg/cheveron-right.svg
+++ b/packages/icons/svg/cheveron-right.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.015 6.234 C 8.773 6.409,8.525 6.714,8.476 6.895 C 8.404 7.161,8.448 7.443,8.600 7.694 C 8.794 8.014,9.463 8.734,11.177 10.470 L 12.689 12.000 11.257 13.450 C 9.639 15.088,8.835 15.945,8.613 16.268 C 8.468 16.478,8.461 16.504,8.464 16.794 C 8.467 17.164,8.548 17.345,8.820 17.595 C 9.050 17.808,9.281 17.913,9.589 17.945 C 9.882 17.976,9.952 17.942,10.449 17.535 C 10.857 17.201,14.558 13.507,15.056 12.938 C 15.471 12.463,15.537 12.332,15.539 11.980 C 15.540 11.618,15.467 11.491,14.889 10.860 C 14.334 10.253,11.149 7.092,10.629 6.631 C 10.156 6.213,9.949 6.120,9.485 6.120 C 9.204 6.120,9.156 6.132,9.015 6.234 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.140 6.155 C 8.975 6.227,8.643 6.569,8.543 6.769 C 8.372 7.112,8.429 7.479,8.711 7.852 C 8.966 8.189,9.813 9.087,11.297 10.590 L 12.689 12.000 11.338 13.369 C 9.890 14.836,8.949 15.831,8.680 16.181 C 8.478 16.442,8.432 16.618,8.479 16.951 C 8.548 17.440,8.909 17.796,9.469 17.925 C 9.754 17.991,9.914 17.946,10.219 17.715 C 10.808 17.269,14.902 13.176,15.300 12.635 C 15.635 12.180,15.627 11.783,15.272 11.300 C 15.050 10.997,11.146 7.075,10.620 6.625 C 10.167 6.239,9.981 6.152,9.560 6.134 C 9.373 6.126,9.184 6.136,9.140 6.155 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cheveron-up.svg b/packages/icons/svg/cheveron-up.svg
index a3f7f8d033..3641ae1410 100644
--- a/packages/icons/svg/cheveron-up.svg
+++ b/packages/icons/svg/cheveron-up.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.423 8.646 C 11.009 8.920,6.876 13.032,6.363 13.680 C 6.041 14.086,5.983 14.315,6.101 14.712 C 6.189 15.006,6.530 15.368,6.824 15.478 C 7.323 15.665,7.607 15.549,8.380 14.842 C 8.556 14.681,9.444 13.820,10.353 12.928 L 12.007 11.307 13.033 12.327 C 15.224 14.504,16.080 15.295,16.432 15.467 C 16.607 15.553,16.680 15.567,16.856 15.549 C 17.532 15.479,18.085 14.769,17.921 14.182 C 17.891 14.077,17.787 13.881,17.689 13.746 C 17.498 13.483,13.674 9.620,13.040 9.050 C 12.552 8.611,12.365 8.521,11.937 8.520 C 11.641 8.520,11.598 8.531,11.423 8.646 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.527 8.587 C 11.320 8.689,10.404 9.556,8.660 11.300 C 6.896 13.063,6.289 13.715,6.151 13.995 C 6.017 14.268,6.027 14.595,6.179 14.872 C 6.461 15.387,7.029 15.667,7.460 15.502 C 7.858 15.350,8.027 15.199,10.413 12.865 L 12.005 11.306 13.053 12.347 C 15.182 14.463,16.099 15.305,16.469 15.484 C 16.916 15.701,17.600 15.365,17.852 14.805 C 17.978 14.527,17.966 14.233,17.819 13.962 C 17.678 13.703,16.280 12.242,14.275 10.259 C 12.960 8.958,12.596 8.647,12.287 8.561 C 12.064 8.499,11.679 8.513,11.527 8.587 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chevron-double-down.svg b/packages/icons/svg/chevron-double-down.svg
index 9c50f5bc65..b201556e11 100644
--- a/packages/icons/svg/chevron-double-down.svg
+++ b/packages/icons/svg/chevron-double-down.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.613 4.922 C 5.429 4.978,5.052 5.339,4.931 5.576 C 4.698 6.030,4.814 6.336,5.508 7.100 C 6.158 7.816,10.700 12.353,11.124 12.709 C 11.836 13.308,12.148 13.306,12.860 12.696 C 13.697 11.979,18.286 7.392,18.869 6.690 C 19.105 6.405,19.179 6.196,19.148 5.895 C 19.120 5.622,19.009 5.417,18.769 5.192 C 18.545 4.982,18.412 4.935,17.933 4.896 L 17.606 4.869 17.177 5.242 C 16.655 5.697,15.468 6.847,13.490 8.816 L 12.000 10.300 10.610 8.918 C 7.771 6.096,6.801 5.184,6.460 5.021 C 6.233 4.912,5.809 4.863,5.613 4.922 M5.611 12.123 C 5.397 12.187,5.027 12.564,4.901 12.845 C 4.797 13.076,4.793 13.106,4.837 13.301 C 4.899 13.578,5.030 13.776,5.494 14.289 C 6.056 14.910,10.635 19.495,11.060 19.861 C 11.514 20.253,11.766 20.376,12.064 20.351 C 12.341 20.328,12.554 20.184,13.237 19.557 C 13.961 18.891,18.192 14.662,18.630 14.166 C 19.086 13.648,19.140 13.543,19.138 13.180 C 19.137 12.837,19.052 12.657,18.769 12.392 C 18.545 12.182,18.412 12.135,17.933 12.096 L 17.606 12.069 17.177 12.442 C 16.655 12.897,15.468 14.047,13.490 16.016 L 12.000 17.500 10.610 16.118 C 7.771 13.296,6.801 12.384,6.460 12.221 C 6.233 12.112,5.809 12.063,5.611 12.123 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.100 5.311 C 16.516 5.834,15.414 6.904,13.473 8.834 L 12.007 10.293 9.973 8.292 C 7.776 6.130,7.250 5.628,6.843 5.301 C 6.459 4.993,6.352 4.948,5.954 4.928 C 5.618 4.911,5.603 4.914,5.423 5.038 C 5.177 5.207,4.935 5.519,4.864 5.759 C 4.771 6.072,4.853 6.301,5.231 6.780 C 5.352 6.934,6.749 8.356,8.336 9.941 C 11.328 12.930,11.485 13.072,11.870 13.145 C 12.080 13.184,12.350 13.084,12.657 12.853 C 13.203 12.443,17.236 8.456,18.695 6.885 C 19.129 6.417,19.228 6.125,19.101 5.696 C 18.977 5.278,18.604 4.984,18.116 4.921 C 17.591 4.853,17.630 4.838,17.100 5.311 M17.100 12.511 C 16.516 13.034,15.414 14.104,13.473 16.034 L 12.007 17.493 9.973 15.492 C 7.776 13.330,7.250 12.828,6.843 12.501 C 6.454 12.189,6.354 12.147,5.939 12.128 L 5.578 12.111 5.366 12.279 C 5.141 12.457,4.863 12.845,4.820 13.041 C 4.778 13.231,4.900 13.555,5.126 13.855 C 5.549 14.415,10.780 19.662,11.322 20.071 C 11.857 20.473,12.179 20.451,12.777 19.970 C 13.132 19.685,18.350 14.494,18.718 14.060 C 19.077 13.637,19.132 13.522,19.131 13.201 C 19.131 12.900,19.064 12.715,18.880 12.506 C 18.681 12.279,18.453 12.165,18.116 12.121 C 17.591 12.053,17.630 12.038,17.100 12.511 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chevron-double-left.svg b/packages/icons/svg/chevron-double-left.svg
index 982328eb75..861aa1c8d9 100644
--- a/packages/icons/svg/chevron-double-left.svg
+++ b/packages/icons/svg/chevron-double-left.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.974 5.230 C 9.428 5.714,4.521 10.618,4.140 11.060 C 3.791 11.463,3.641 11.741,3.640 11.984 C 3.640 12.224,3.828 12.565,4.191 12.980 C 4.751 13.620,7.278 16.189,8.465 17.325 C 10.364 19.142,10.363 19.141,10.777 19.139 C 11.111 19.137,11.372 19.022,11.603 18.773 C 11.808 18.553,11.877 18.427,11.922 18.190 C 11.983 17.870,11.936 17.669,11.739 17.407 C 11.479 17.061,10.325 15.853,8.320 13.827 L 6.506 11.995 7.926 10.567 C 10.613 7.868,11.690 6.731,11.846 6.427 C 11.950 6.224,11.982 5.929,11.920 5.736 C 11.849 5.515,11.577 5.173,11.379 5.058 C 11.274 4.996,11.101 4.945,10.916 4.921 C 10.383 4.852,10.410 4.843,9.974 5.230 M17.174 5.230 C 16.628 5.714,11.721 10.618,11.340 11.060 C 10.991 11.463,10.841 11.741,10.840 11.984 C 10.840 12.224,11.028 12.565,11.391 12.980 C 11.951 13.620,14.478 16.189,15.665 17.325 C 17.564 19.142,17.563 19.141,17.977 19.139 C 18.311 19.137,18.572 19.022,18.803 18.773 C 19.008 18.553,19.077 18.427,19.122 18.190 C 19.183 17.870,19.136 17.669,18.939 17.407 C 18.679 17.061,17.525 15.853,15.520 13.827 L 13.706 11.995 15.126 10.567 C 17.813 7.868,18.890 6.731,19.046 6.427 C 19.150 6.224,19.182 5.929,19.120 5.736 C 19.049 5.515,18.777 5.173,18.579 5.058 C 18.474 4.996,18.301 4.945,18.116 4.921 C 17.583 4.852,17.610 4.843,17.174 5.230 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.325 4.948 C 10.009 5.104,4.186 10.930,3.871 11.405 C 3.447 12.046,3.565 12.326,4.809 13.640 C 6.455 15.378,9.636 18.500,10.173 18.903 C 10.469 19.126,10.650 19.177,10.947 19.122 C 11.464 19.026,11.853 18.623,11.939 18.095 C 11.977 17.860,11.905 17.642,11.703 17.373 C 11.454 17.042,10.167 15.696,8.200 13.707 L 6.506 11.995 7.905 10.587 C 10.693 7.783,11.693 6.723,11.843 6.415 C 12.036 6.015,11.971 5.664,11.635 5.300 C 11.418 5.064,11.253 4.980,10.892 4.924 C 10.522 4.867,10.487 4.869,10.325 4.948 M17.525 4.948 C 17.209 5.104,11.386 10.930,11.071 11.405 C 10.647 12.046,10.765 12.326,12.009 13.640 C 13.655 15.378,16.836 18.500,17.373 18.903 C 17.669 19.126,17.850 19.177,18.147 19.122 C 18.664 19.026,19.053 18.623,19.139 18.095 C 19.177 17.860,19.105 17.642,18.903 17.373 C 18.654 17.042,17.367 15.696,15.400 13.707 L 13.706 11.995 15.105 10.587 C 17.893 7.783,18.893 6.723,19.043 6.415 C 19.236 6.015,19.171 5.664,18.835 5.300 C 18.618 5.064,18.453 4.980,18.092 4.924 C 17.722 4.867,17.687 4.869,17.525 4.948 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chevron-double-right.svg b/packages/icons/svg/chevron-double-right.svg
index 20a3ba26ce..2fca80f23e 100644
--- a/packages/icons/svg/chevron-double-right.svg
+++ b/packages/icons/svg/chevron-double-right.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.500 4.986 C 5.342 5.069,5.058 5.344,4.948 5.520 C 4.875 5.636,4.861 5.715,4.864 5.981 C 4.867 6.186,4.891 6.345,4.931 6.421 C 5.072 6.690,6.294 7.975,8.873 10.567 L 10.294 11.994 8.620 13.687 C 6.595 15.734,5.196 17.199,5.040 17.434 C 4.876 17.680,4.816 17.974,4.878 18.234 C 4.983 18.670,5.306 18.986,5.773 19.109 C 6.356 19.262,6.451 19.184,9.776 15.858 C 12.980 12.652,13.137 12.471,13.137 12.000 C 13.137 11.531,12.927 11.291,9.655 8.038 C 7.271 5.667,6.684 5.116,6.420 4.995 C 6.212 4.900,5.674 4.895,5.500 4.986 M12.700 4.980 C 12.544 5.064,12.258 5.343,12.148 5.520 C 12.075 5.636,12.060 5.719,12.060 6.003 C 12.060 6.312,12.071 6.363,12.169 6.505 C 12.341 6.752,13.705 8.178,15.680 10.173 L 17.494 12.005 16.034 13.473 C 14.218 15.296,12.973 16.579,12.511 17.099 C 12.227 17.419,12.145 17.541,12.094 17.716 C 11.925 18.297,12.265 18.893,12.873 19.081 C 13.332 19.223,13.506 19.173,14.003 18.755 C 14.793 18.091,19.698 13.168,20.063 12.672 C 20.518 12.054,20.472 11.766,19.798 11.007 C 19.295 10.440,14.572 5.710,14.180 5.381 C 13.725 4.999,13.612 4.948,13.180 4.930 C 12.904 4.919,12.792 4.931,12.700 4.980 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.574 4.961 C 5.420 5.009,5.076 5.313,4.955 5.508 C 4.882 5.626,4.867 5.707,4.870 5.962 C 4.872 6.159,4.897 6.323,4.937 6.409 C 5.067 6.682,6.182 7.859,8.898 10.590 L 10.300 12.000 9.036 13.270 C 6.708 15.611,5.224 17.164,5.018 17.475 C 4.862 17.711,4.817 18.021,4.898 18.301 C 4.952 18.485,5.012 18.579,5.195 18.761 C 5.384 18.950,5.473 19.006,5.705 19.081 C 6.336 19.284,6.384 19.246,9.983 15.633 C 12.471 13.135,12.891 12.688,13.043 12.373 C 13.144 12.165,13.155 11.882,13.071 11.680 C 12.944 11.375,12.408 10.803,10.023 8.418 C 7.526 5.922,6.700 5.137,6.447 5.017 C 6.285 4.940,5.752 4.906,5.574 4.961 M12.732 4.976 C 12.572 5.049,12.265 5.330,12.164 5.495 C 12.065 5.659,12.025 5.916,12.059 6.185 C 12.082 6.366,12.118 6.442,12.276 6.632 C 12.587 7.005,13.993 8.466,15.800 10.293 L 17.494 12.005 16.074 13.433 C 13.377 16.143,12.308 17.269,12.161 17.558 C 11.984 17.906,12.035 18.349,12.292 18.687 C 12.486 18.942,12.892 19.140,13.219 19.140 C 13.438 19.140,13.493 19.123,13.692 18.990 C 14.028 18.767,14.892 17.944,16.936 15.900 C 19.968 12.866,20.360 12.420,20.360 12.000 C 20.360 11.758,20.150 11.406,19.727 10.936 C 19.201 10.353,14.563 5.713,14.176 5.383 C 14.008 5.240,13.796 5.087,13.705 5.042 C 13.480 4.933,12.911 4.894,12.732 4.976 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chevron-double-up.svg b/packages/icons/svg/chevron-double-up.svg
index 8ac528008c..a5f3199d9e 100644
--- a/packages/icons/svg/chevron-double-up.svg
+++ b/packages/icons/svg/chevron-double-up.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.179 4.023 C 10.644 4.496,6.871 8.247,5.873 9.300 C 4.972 10.250,4.860 10.418,4.860 10.820 C 4.860 11.110,4.965 11.345,5.206 11.596 C 5.426 11.826,5.637 11.913,6.044 11.944 L 6.380 11.969 6.820 11.572 C 7.375 11.071,8.819 9.666,10.607 7.886 L 11.995 6.506 13.947 8.440 C 16.783 11.249,17.420 11.828,17.776 11.924 C 18.225 12.045,18.812 11.731,19.048 11.244 C 19.112 11.111,19.136 10.989,19.136 10.800 C 19.135 10.498,19.076 10.362,18.805 10.040 C 18.208 9.328,13.447 4.576,12.787 4.033 C 12.490 3.788,12.361 3.741,11.879 3.698 L 11.578 3.671 11.179 4.023 M11.179 11.223 C 10.644 11.696,6.872 15.447,5.873 16.500 C 4.972 17.450,4.860 17.618,4.860 18.020 C 4.860 18.310,4.965 18.545,5.206 18.796 C 5.426 19.026,5.637 19.113,6.044 19.144 L 6.380 19.169 6.820 18.772 C 7.375 18.271,8.819 16.866,10.607 15.086 L 11.994 13.706 13.947 15.640 C 16.120 17.791,17.144 18.764,17.471 18.989 C 17.671 19.127,17.713 19.140,17.955 19.139 C 18.404 19.137,18.808 18.903,19.014 18.525 C 19.255 18.081,19.192 17.727,18.779 17.211 C 18.449 16.799,13.242 11.583,12.828 11.251 C 12.489 10.979,12.376 10.936,11.899 10.897 L 11.579 10.870 11.179 11.223 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.179 4.025 C 10.619 4.521,5.894 9.247,5.425 9.780 C 4.959 10.310,4.865 10.486,4.866 10.818 C 4.868 11.136,4.987 11.384,5.259 11.632 C 5.496 11.849,5.677 11.917,6.099 11.949 L 6.385 11.970 6.902 11.495 C 7.530 10.918,8.844 9.637,10.647 7.845 L 11.995 6.506 13.867 8.360 C 16.728 11.193,17.416 11.818,17.785 11.922 C 18.210 12.041,18.790 11.735,19.027 11.266 C 19.114 11.094,19.126 11.026,19.114 10.758 C 19.101 10.477,19.086 10.430,18.947 10.227 C 18.620 9.753,13.623 4.732,12.800 4.051 C 12.514 3.815,12.315 3.740,11.859 3.697 L 11.577 3.671 11.179 4.025 M11.178 11.225 C 10.616 11.724,5.892 16.449,5.425 16.980 C 4.959 17.510,4.865 17.686,4.866 18.018 C 4.868 18.336,4.987 18.584,5.259 18.832 C 5.496 19.049,5.677 19.117,6.099 19.149 L 6.385 19.170 6.902 18.695 C 7.530 18.118,8.844 16.837,10.647 15.045 L 11.995 13.706 13.827 15.520 C 15.791 17.464,17.034 18.653,17.382 18.921 C 17.640 19.120,17.828 19.171,18.130 19.122 C 18.573 19.050,18.933 18.763,19.084 18.362 C 19.262 17.888,19.125 17.586,18.362 16.770 C 17.444 15.789,12.874 11.265,12.662 11.127 C 12.431 10.977,12.288 10.935,11.878 10.899 L 11.576 10.872 11.178 11.225 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/chip.svg b/packages/icons/svg/chip.svg
index 6d4131aa7d..9a1a1e09ab 100644
--- a/packages/icons/svg/chip.svg
+++ b/packages/icons/svg/chip.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.087 1.385 C 8.858 1.502,8.617 1.770,8.544 1.986 C 8.461 2.239,8.401 2.753,8.400 3.224 L 8.400 3.589 7.730 3.615 C 6.707 3.656,5.728 3.720,5.446 3.764 C 5.002 3.832,4.550 4.134,4.112 4.656 C 3.697 5.150,3.648 5.390,3.613 7.126 L 3.587 8.391 3.204 8.419 C 2.559 8.464,1.994 8.556,1.813 8.643 C 1.390 8.848,1.156 9.410,1.294 9.886 C 1.417 10.307,1.702 10.574,2.169 10.707 C 2.290 10.741,2.641 10.776,2.990 10.788 L 3.600 10.811 3.600 12.001 L 3.600 13.191 3.190 13.219 C 1.907 13.304,1.568 13.450,1.313 14.028 C 1.106 14.493,1.394 15.177,1.896 15.416 C 2.129 15.526,2.608 15.597,3.130 15.599 L 3.600 15.600 3.601 16.410 C 3.603 17.552,3.659 18.407,3.751 18.703 C 3.947 19.329,4.785 20.139,5.413 20.309 C 5.563 20.350,6.005 20.372,7.010 20.389 L 8.400 20.412 8.401 20.876 C 8.405 21.932,8.642 22.457,9.213 22.667 C 9.392 22.733,9.750 22.730,9.983 22.661 C 10.564 22.488,10.799 21.962,10.800 20.830 L 10.800 20.400 11.995 20.400 L 13.189 20.400 13.211 21.010 C 13.236 21.713,13.302 22.010,13.494 22.277 C 13.847 22.769,14.681 22.861,15.149 22.460 C 15.474 22.182,15.599 21.721,15.600 20.796 L 15.600 20.411 16.850 20.387 C 18.715 20.352,18.969 20.282,19.626 19.626 C 20.282 18.969,20.352 18.715,20.387 16.850 L 20.411 15.600 20.843 15.600 C 21.794 15.600,22.207 15.471,22.481 15.090 C 22.636 14.873,22.760 14.557,22.760 14.380 C 22.760 14.052,22.468 13.597,22.154 13.437 C 21.981 13.349,21.434 13.260,20.810 13.219 L 20.400 13.191 20.400 11.996 L 20.400 10.800 20.837 10.800 C 21.794 10.800,22.207 10.672,22.481 10.290 C 22.636 10.073,22.760 9.757,22.760 9.580 C 22.760 9.252,22.468 8.797,22.154 8.637 C 21.982 8.549,21.434 8.460,20.815 8.419 L 20.411 8.392 20.388 7.146 C 20.376 6.461,20.346 5.774,20.323 5.620 C 20.254 5.173,20.050 4.805,19.644 4.399 C 19.246 4.002,18.941 3.823,18.558 3.764 C 18.275 3.720,17.310 3.658,16.276 3.616 L 15.612 3.590 15.587 2.985 C 15.553 2.167,15.483 1.920,15.205 1.627 C 14.996 1.406,14.876 1.357,14.478 1.331 C 14.198 1.313,14.084 1.323,13.944 1.376 C 13.733 1.457,13.465 1.733,13.354 1.985 C 13.263 2.189,13.202 2.691,13.201 3.230 L 13.200 3.600 12.006 3.600 L 10.813 3.600 10.786 2.857 C 10.767 2.343,10.742 2.081,10.703 2.007 C 10.603 1.817,10.358 1.562,10.168 1.451 C 10.008 1.357,9.931 1.340,9.601 1.330 C 9.303 1.320,9.191 1.332,9.087 1.385 M18.000 12.000 L 18.000 18.000 12.000 18.000 L 6.000 18.000 6.000 12.000 L 6.000 6.000 12.000 6.000 L 18.000 6.000 18.000 12.000 M8.400 12.000 L 8.400 15.600 12.000 15.600 L 15.600 15.600 15.600 12.000 L 15.600 8.400 12.000 8.400 L 8.400 8.400 8.400 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.099 1.392 C 9.011 1.434,8.855 1.561,8.752 1.675 C 8.515 1.939,8.439 2.236,8.410 3.025 L 8.389 3.590 7.765 3.616 C 6.839 3.655,5.856 3.718,5.549 3.759 C 5.026 3.827,4.516 4.154,4.080 4.703 C 3.694 5.189,3.651 5.419,3.613 7.165 L 3.587 8.390 3.044 8.438 C 1.982 8.533,1.678 8.634,1.453 8.971 C 1.178 9.381,1.202 9.936,1.511 10.301 C 1.793 10.633,2.157 10.753,2.987 10.787 L 3.600 10.813 3.600 12.006 L 3.600 13.200 3.510 13.200 C 3.254 13.202,2.428 13.291,2.209 13.342 C 1.722 13.454,1.429 13.691,1.300 14.080 C 1.141 14.558,1.405 15.158,1.882 15.401 C 2.101 15.513,2.663 15.600,3.165 15.600 L 3.600 15.600 3.600 16.470 C 3.600 17.436,3.656 18.330,3.735 18.635 C 3.764 18.744,3.848 18.939,3.923 19.066 C 4.101 19.368,4.634 19.904,4.943 20.090 C 5.357 20.341,5.499 20.361,7.030 20.388 L 8.400 20.412 8.401 20.856 C 8.404 21.637,8.536 22.123,8.826 22.413 C 9.094 22.680,9.457 22.772,9.892 22.682 C 10.513 22.553,10.795 21.982,10.799 20.850 L 10.800 20.400 11.994 20.400 L 13.188 20.400 13.211 20.970 C 13.247 21.862,13.333 22.144,13.659 22.431 C 14.144 22.858,14.967 22.776,15.309 22.265 C 15.516 21.957,15.599 21.552,15.600 20.850 L 15.600 20.400 16.350 20.399 C 17.312 20.398,18.241 20.340,18.583 20.261 C 18.980 20.169,19.219 20.021,19.620 19.620 C 20.021 19.219,20.169 18.980,20.261 18.583 C 20.340 18.241,20.398 17.312,20.399 16.350 L 20.400 15.600 20.870 15.600 C 21.912 15.599,22.318 15.427,22.612 14.860 C 22.830 14.440,22.772 14.045,22.438 13.664 C 22.371 13.588,22.241 13.489,22.148 13.445 C 21.970 13.360,21.385 13.264,20.770 13.219 L 20.400 13.192 20.400 11.996 L 20.400 10.800 20.870 10.800 C 21.912 10.799,22.318 10.627,22.612 10.060 C 22.830 9.640,22.772 9.245,22.438 8.864 C 22.371 8.788,22.241 8.689,22.148 8.645 C 21.970 8.560,21.385 8.464,20.770 8.419 L 20.400 8.392 20.399 7.646 C 20.397 6.452,20.339 5.581,20.241 5.300 C 20.037 4.714,19.378 4.033,18.827 3.839 C 18.575 3.750,16.676 3.601,15.790 3.600 L 15.600 3.600 15.600 3.250 C 15.599 2.800,15.539 2.277,15.460 2.039 C 15.383 1.809,15.162 1.543,14.962 1.441 C 14.756 1.336,14.255 1.294,14.015 1.361 C 13.762 1.432,13.433 1.759,13.345 2.026 C 13.253 2.306,13.202 2.721,13.201 3.190 L 13.200 3.600 12.006 3.600 L 10.813 3.600 10.787 2.910 C 10.773 2.530,10.742 2.152,10.719 2.070 C 10.667 1.889,10.325 1.527,10.108 1.426 C 10.015 1.382,9.821 1.347,9.608 1.335 C 9.322 1.319,9.231 1.329,9.099 1.392 M18.000 12.000 L 18.000 18.000 12.000 18.000 L 6.000 18.000 6.000 12.000 L 6.000 6.000 12.000 6.000 L 18.000 6.000 18.000 12.000 M8.400 12.000 L 8.400 15.600 12.000 15.600 L 15.600 15.600 15.600 12.000 L 15.600 8.400 12.000 8.400 L 8.400 8.400 8.400 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/clipboard-arrow.svg b/packages/icons/svg/clipboard-arrow.svg
index fa07b213c0..63a9635455 100644
--- a/packages/icons/svg/clipboard-arrow.svg
+++ b/packages/icons/svg/clipboard-arrow.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.140 2.521 C 8.390 3.095,8.246 3.731,8.732 4.328 C 9.009 4.668,9.158 4.722,9.948 4.768 C 10.749 4.815,12.209 4.787,12.380 4.722 C 12.548 4.657,12.954 4.252,13.044 4.060 C 13.092 3.956,13.118 3.809,13.119 3.640 C 13.120 3.210,13.070 3.095,12.736 2.770 L 12.438 2.480 11.626 2.480 C 11.179 2.480,10.463 2.469,10.036 2.455 C 9.270 2.430,9.258 2.431,9.140 2.521 M5.531 3.680 C 5.034 3.857,4.407 4.264,4.158 4.572 C 4.044 4.713,3.816 5.088,3.685 5.348 L 3.600 5.517 3.600 12.602 L 3.600 19.688 3.759 19.994 C 3.964 20.388,4.372 20.903,4.628 21.091 C 4.737 21.172,4.979 21.319,5.164 21.418 L 5.500 21.599 10.811 21.599 L 16.123 21.600 16.317 21.502 C 16.640 21.338,17.153 20.925,17.415 20.618 C 17.694 20.291,17.858 19.995,17.923 19.700 C 17.950 19.578,17.975 18.743,17.988 17.550 L 18.009 15.600 18.734 15.598 C 19.861 15.595,20.719 15.543,20.861 15.470 C 21.026 15.384,21.391 14.991,21.462 14.822 C 21.494 14.745,21.520 14.567,21.520 14.426 C 21.520 13.763,21.174 13.404,20.457 13.322 C 20.282 13.302,19.658 13.263,19.070 13.236 L 18.000 13.186 18.000 9.352 L 18.000 5.517 17.894 5.309 C 17.465 4.461,16.902 3.965,16.092 3.720 C 15.721 3.608,15.660 3.629,15.586 3.892 C 15.555 4.006,15.482 4.266,15.425 4.470 C 15.229 5.167,14.901 5.703,14.350 6.222 C 13.991 6.562,13.620 6.794,13.039 7.045 L 12.679 7.200 10.769 7.200 L 8.860 7.199 8.413 6.983 C 7.870 6.721,7.560 6.514,7.201 6.176 C 6.666 5.671,6.442 5.291,6.133 4.366 C 5.938 3.782,5.893 3.677,5.824 3.631 C 5.769 3.594,5.779 3.592,5.531 3.680 M13.718 9.799 C 13.802 9.842,13.943 9.960,14.033 10.061 C 14.225 10.280,14.300 10.561,14.269 10.948 C 14.238 11.342,14.115 11.514,13.093 12.590 L 12.514 13.200 15.257 13.200 L 18.000 13.200 18.000 14.400 L 18.000 15.600 15.256 15.600 L 12.513 15.600 13.111 16.230 C 13.809 16.964,14.101 17.293,14.205 17.460 C 14.299 17.611,14.312 18.288,14.225 18.491 C 14.085 18.817,13.583 19.159,13.245 19.160 C 12.943 19.160,12.773 19.080,12.368 18.745 C 11.847 18.313,9.117 15.577,8.831 15.199 C 8.367 14.587,8.363 14.251,8.813 13.656 C 9.232 13.102,12.150 10.176,12.575 9.883 C 12.669 9.819,12.807 9.747,12.883 9.724 C 13.077 9.665,13.536 9.706,13.718 9.799 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.067 2.580 C 8.960 2.662,8.795 2.835,8.699 2.965 C 8.364 3.421,8.369 3.837,8.715 4.291 C 9.055 4.737,9.231 4.775,10.980 4.778 C 12.466 4.780,12.415 4.791,12.794 4.377 C 13.053 4.094,13.120 3.928,13.119 3.575 C 13.118 3.256,13.015 3.048,12.704 2.737 L 12.447 2.480 11.450 2.480 C 10.902 2.480,10.184 2.469,9.856 2.455 L 9.260 2.430 9.067 2.580 M5.450 3.717 C 5.077 3.864,4.597 4.163,4.330 4.414 C 4.117 4.614,3.899 4.927,3.706 5.309 L 3.600 5.517 3.600 12.600 L 3.600 19.683 3.706 19.891 C 3.940 20.354,4.351 20.877,4.672 21.117 C 4.779 21.198,5.013 21.340,5.190 21.432 L 5.512 21.600 10.818 21.600 L 16.123 21.600 16.292 21.516 C 16.698 21.312,17.345 20.750,17.599 20.382 C 17.898 19.947,17.929 19.824,17.964 18.943 C 17.981 18.501,17.996 17.569,17.998 16.870 L 18.000 15.600 18.810 15.600 C 19.849 15.599,20.686 15.540,20.866 15.454 C 21.048 15.368,21.431 14.935,21.480 14.760 C 21.537 14.558,21.529 14.245,21.461 14.016 C 21.339 13.606,20.980 13.385,20.337 13.322 C 19.940 13.283,18.456 13.200,18.158 13.200 L 18.000 13.200 18.000 9.359 L 18.000 5.517 17.894 5.309 C 17.629 4.783,17.235 4.323,16.826 4.062 C 16.487 3.845,16.029 3.673,15.828 3.688 C 15.638 3.702,15.673 3.633,15.385 4.560 C 15.171 5.250,14.794 5.834,14.268 6.294 C 13.936 6.583,13.624 6.777,13.120 7.008 L 12.700 7.199 10.767 7.200 L 8.834 7.200 8.352 6.954 C 7.799 6.672,7.349 6.348,7.026 6.000 C 6.600 5.539,6.426 5.215,6.102 4.281 C 5.935 3.798,5.835 3.597,5.764 3.601 C 5.751 3.602,5.610 3.654,5.450 3.717 M13.795 9.852 C 14.139 10.080,14.317 10.497,14.264 10.951 C 14.218 11.343,14.070 11.551,13.132 12.545 L 12.514 13.200 15.257 13.200 L 18.000 13.200 18.000 14.400 L 18.000 15.600 15.258 15.600 L 12.515 15.600 13.204 16.330 C 14.253 17.442,14.280 17.484,14.280 18.000 C 14.280 18.369,14.219 18.543,14.016 18.760 C 13.767 19.026,13.422 19.178,13.132 19.148 C 12.854 19.119,12.661 19.004,12.196 18.588 C 11.763 18.201,9.221 15.652,8.931 15.313 C 8.672 15.012,8.522 14.727,8.493 14.486 C 8.463 14.231,8.593 13.938,8.909 13.543 C 9.181 13.205,11.565 10.788,12.154 10.253 C 12.722 9.738,12.769 9.716,13.245 9.731 C 13.586 9.741,13.648 9.755,13.795 9.852 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/clipboard-check.svg b/packages/icons/svg/clipboard-check.svg
index 73edce671d..16f6594a44 100644
--- a/packages/icons/svg/clipboard-check.svg
+++ b/packages/icons/svg/clipboard-check.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.340 2.521 C 9.590 3.095,9.446 3.731,9.932 4.328 C 10.209 4.668,10.358 4.722,11.148 4.768 C 11.949 4.815,13.409 4.787,13.580 4.722 C 13.748 4.657,14.154 4.252,14.244 4.060 C 14.292 3.956,14.318 3.809,14.319 3.640 C 14.320 3.210,14.270 3.095,13.936 2.770 L 13.638 2.480 12.826 2.480 C 12.379 2.480,11.663 2.469,11.236 2.455 C 10.470 2.430,10.458 2.431,10.340 2.521 M6.754 3.677 C 6.281 3.828,5.592 4.268,5.358 4.569 C 5.241 4.719,5.009 5.101,4.885 5.348 L 4.800 5.517 4.800 12.602 L 4.800 19.688 4.959 19.994 C 5.164 20.388,5.572 20.903,5.828 21.091 C 5.937 21.172,6.179 21.319,6.364 21.418 L 6.700 21.599 12.028 21.599 L 17.356 21.600 17.563 21.478 C 18.300 21.044,18.656 20.696,19.022 20.055 L 19.200 19.742 19.200 12.656 L 19.200 5.570 19.096 5.335 C 18.937 4.975,18.667 4.594,18.379 4.325 C 17.974 3.946,17.127 3.569,16.925 3.678 C 16.857 3.714,16.784 3.906,16.618 4.495 C 16.403 5.255,16.055 5.779,15.360 6.388 C 14.609 7.046,13.744 7.234,11.682 7.188 C 10.080 7.152,9.743 7.089,9.080 6.700 C 8.451 6.331,7.977 5.848,7.700 5.294 C 7.621 5.136,7.459 4.716,7.340 4.360 C 7.138 3.756,7.068 3.597,7.005 3.602 C 6.991 3.603,6.878 3.637,6.754 3.677 M16.111 10.996 C 16.267 11.077,16.499 11.304,16.613 11.489 C 16.664 11.571,16.680 11.692,16.680 11.993 C 16.680 12.372,16.675 12.395,16.554 12.564 C 16.485 12.661,16.273 12.911,16.084 13.120 C 15.549 13.709,13.244 16.031,12.181 17.051 L 11.222 17.970 10.881 17.950 C 10.461 17.926,10.306 17.862,9.946 17.569 C 9.328 17.067,7.733 15.410,7.436 14.961 C 7.274 14.717,7.259 14.632,7.313 14.265 C 7.371 13.866,7.497 13.645,7.771 13.460 C 7.974 13.324,7.989 13.320,8.371 13.320 C 8.935 13.320,8.941 13.324,10.093 14.416 L 10.807 15.093 11.873 14.033 C 14.166 11.754,15.044 10.947,15.276 10.906 C 15.489 10.868,15.961 10.919,16.111 10.996 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.267 2.580 C 10.160 2.662,9.995 2.835,9.899 2.965 C 9.564 3.421,9.569 3.837,9.915 4.291 C 10.255 4.737,10.431 4.775,12.180 4.778 C 13.666 4.780,13.615 4.791,13.994 4.377 C 14.253 4.094,14.320 3.928,14.319 3.575 C 14.318 3.256,14.215 3.048,13.904 2.737 L 13.647 2.480 12.650 2.480 C 12.102 2.480,11.384 2.469,11.056 2.455 L 10.460 2.430 10.267 2.580 M6.660 3.714 C 6.309 3.852,6.055 3.997,5.706 4.256 C 5.426 4.465,5.137 4.844,4.904 5.309 L 4.800 5.517 4.800 12.600 L 4.800 19.683 4.906 19.891 C 5.140 20.354,5.551 20.877,5.872 21.117 C 5.979 21.198,6.213 21.340,6.390 21.432 L 6.712 21.600 12.047 21.600 L 17.382 21.600 17.757 21.358 C 18.353 20.972,18.697 20.609,19.078 19.963 L 19.200 19.756 19.200 12.663 L 19.200 5.570 19.115 5.375 C 18.972 5.051,18.683 4.634,18.424 4.380 C 18.065 4.029,17.394 3.686,17.056 3.682 C 16.861 3.680,16.876 3.654,16.641 4.400 C 16.351 5.322,16.079 5.751,15.421 6.326 C 14.688 6.966,14.088 7.145,12.540 7.187 C 11.492 7.215,10.337 7.152,9.900 7.041 C 9.487 6.937,9.103 6.742,8.670 6.418 C 8.030 5.937,7.717 5.454,7.338 4.360 C 7.125 3.745,7.058 3.599,6.989 3.601 C 6.962 3.602,6.814 3.653,6.660 3.714 M16.004 10.964 C 16.195 11.011,16.492 11.277,16.597 11.493 C 16.660 11.624,16.680 11.743,16.680 11.990 C 16.680 12.169,16.663 12.359,16.642 12.414 C 16.539 12.685,14.540 14.768,12.364 16.872 L 11.227 17.970 10.900 17.950 C 10.536 17.927,10.291 17.838,10.027 17.631 C 9.485 17.206,7.990 15.679,7.559 15.110 C 7.429 14.939,7.313 14.741,7.299 14.670 C 7.267 14.495,7.346 14.025,7.438 13.845 C 7.527 13.673,7.730 13.474,7.908 13.384 C 8.060 13.308,8.597 13.296,8.804 13.365 C 9.017 13.437,9.294 13.662,10.075 14.401 L 10.801 15.088 12.171 13.737 C 14.355 11.582,15.018 10.983,15.290 10.919 C 15.433 10.886,15.779 10.908,16.004 10.964 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/clipboard-copy.svg b/packages/icons/svg/clipboard-copy.svg
index 15e42c6e65..75d2560180 100644
--- a/packages/icons/svg/clipboard-copy.svg
+++ b/packages/icons/svg/clipboard-copy.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.340 2.521 C 9.590 3.095,9.446 3.731,9.932 4.328 C 10.209 4.668,10.358 4.722,11.148 4.768 C 11.949 4.815,13.409 4.787,13.580 4.722 C 13.748 4.657,14.154 4.252,14.244 4.060 C 14.292 3.956,14.318 3.809,14.319 3.640 C 14.320 3.210,14.270 3.095,13.936 2.770 L 13.638 2.480 12.826 2.480 C 12.379 2.480,11.663 2.469,11.236 2.455 C 10.470 2.430,10.458 2.431,10.340 2.521 M6.754 3.677 C 6.281 3.828,5.592 4.268,5.358 4.569 C 5.241 4.719,5.009 5.101,4.885 5.348 L 4.800 5.517 4.800 12.602 L 4.800 19.688 4.959 19.994 C 5.164 20.388,5.572 20.903,5.828 21.091 C 5.937 21.172,6.179 21.319,6.364 21.418 L 6.700 21.599 12.028 21.599 L 17.356 21.600 17.563 21.478 C 18.300 21.044,18.656 20.696,19.022 20.055 L 19.200 19.742 19.200 12.656 L 19.200 5.570 19.096 5.335 C 18.937 4.975,18.667 4.594,18.379 4.325 C 17.974 3.946,17.127 3.569,16.925 3.678 C 16.857 3.714,16.784 3.906,16.618 4.495 C 16.403 5.255,16.055 5.779,15.360 6.388 C 14.609 7.046,13.744 7.234,11.682 7.188 C 10.080 7.152,9.743 7.089,9.080 6.700 C 8.451 6.331,7.977 5.848,7.700 5.294 C 7.621 5.136,7.459 4.716,7.340 4.360 C 7.138 3.756,7.068 3.597,7.005 3.602 C 6.991 3.603,6.878 3.637,6.754 3.677 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.267 2.580 C 10.160 2.662,9.995 2.835,9.899 2.965 C 9.564 3.421,9.569 3.837,9.915 4.291 C 10.255 4.737,10.431 4.775,12.180 4.778 C 13.666 4.780,13.615 4.791,13.994 4.377 C 14.253 4.094,14.320 3.928,14.319 3.575 C 14.318 3.256,14.215 3.048,13.904 2.737 L 13.647 2.480 12.650 2.480 C 12.102 2.480,11.384 2.469,11.056 2.455 L 10.460 2.430 10.267 2.580 M6.660 3.714 C 6.309 3.852,6.055 3.997,5.706 4.256 C 5.426 4.465,5.137 4.844,4.904 5.309 L 4.800 5.517 4.800 12.600 L 4.800 19.683 4.906 19.891 C 5.140 20.354,5.551 20.877,5.872 21.117 C 5.979 21.198,6.213 21.340,6.390 21.432 L 6.712 21.600 12.047 21.600 L 17.382 21.600 17.757 21.358 C 18.353 20.972,18.697 20.609,19.078 19.963 L 19.200 19.756 19.200 12.663 L 19.200 5.570 19.115 5.375 C 18.972 5.051,18.683 4.634,18.424 4.380 C 18.065 4.029,17.394 3.686,17.056 3.682 C 16.861 3.680,16.876 3.654,16.641 4.400 C 16.351 5.322,16.079 5.751,15.421 6.326 C 14.688 6.966,14.088 7.145,12.540 7.187 C 11.492 7.215,10.337 7.152,9.900 7.041 C 9.487 6.937,9.103 6.742,8.670 6.418 C 8.030 5.937,7.717 5.454,7.338 4.360 C 7.125 3.745,7.058 3.599,6.989 3.601 C 6.962 3.602,6.814 3.653,6.660 3.714 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/clipboard-list.svg b/packages/icons/svg/clipboard-list.svg
index cb699a700c..444dfe1e51 100644
--- a/packages/icons/svg/clipboard-list.svg
+++ b/packages/icons/svg/clipboard-list.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.340 2.521 C 9.590 3.095,9.446 3.731,9.932 4.328 C 10.209 4.668,10.358 4.722,11.148 4.768 C 11.949 4.815,13.409 4.787,13.580 4.722 C 13.748 4.657,14.154 4.252,14.244 4.060 C 14.292 3.956,14.318 3.809,14.319 3.640 C 14.320 3.210,14.270 3.095,13.936 2.770 L 13.638 2.480 12.826 2.480 C 12.379 2.480,11.663 2.469,11.236 2.455 C 10.470 2.430,10.458 2.431,10.340 2.521 M6.754 3.677 C 6.281 3.828,5.592 4.268,5.358 4.569 C 5.241 4.719,5.009 5.101,4.885 5.348 L 4.800 5.517 4.800 12.602 L 4.800 19.688 4.959 19.994 C 5.164 20.388,5.572 20.903,5.828 21.091 C 5.937 21.172,6.179 21.319,6.364 21.418 L 6.700 21.599 12.028 21.599 L 17.356 21.600 17.563 21.478 C 18.300 21.044,18.656 20.696,19.022 20.055 L 19.200 19.742 19.200 12.656 L 19.200 5.570 19.096 5.335 C 18.937 4.975,18.667 4.594,18.379 4.325 C 17.974 3.946,17.127 3.569,16.925 3.678 C 16.857 3.714,16.784 3.906,16.618 4.495 C 16.403 5.255,16.055 5.779,15.360 6.388 C 14.609 7.046,13.744 7.234,11.682 7.188 C 10.080 7.152,9.743 7.089,9.080 6.700 C 8.451 6.331,7.977 5.848,7.700 5.294 C 7.621 5.136,7.459 4.716,7.340 4.360 C 7.138 3.756,7.068 3.597,7.005 3.602 C 6.991 3.603,6.878 3.637,6.754 3.677 M8.947 11.004 C 9.164 11.108,9.388 11.366,9.445 11.578 C 9.470 11.667,9.492 11.884,9.495 12.060 C 9.499 12.344,9.487 12.402,9.388 12.571 C 9.228 12.842,8.933 13.063,8.653 13.121 C 8.405 13.173,8.088 13.147,7.923 13.062 C 7.783 12.989,7.409 12.590,7.360 12.460 C 7.290 12.275,7.312 11.641,7.395 11.458 C 7.468 11.297,7.745 11.023,7.900 10.959 C 7.944 10.940,8.159 10.924,8.377 10.923 C 8.702 10.920,8.806 10.935,8.947 11.004 M16.246 11.065 C 16.342 11.134,16.474 11.266,16.540 11.358 C 16.652 11.515,16.661 11.556,16.673 11.938 C 16.685 12.298,16.676 12.371,16.600 12.520 C 16.470 12.774,16.165 13.063,15.991 13.095 C 15.467 13.194,12.835 13.236,12.078 13.158 C 11.599 13.109,11.435 13.049,11.232 12.852 C 11.046 12.670,10.931 12.405,10.897 12.077 C 10.865 11.758,10.921 11.537,11.092 11.314 C 11.249 11.107,11.416 11.005,11.669 10.959 C 11.774 10.941,12.808 10.928,13.966 10.933 L 16.072 10.940 16.246 11.065 M8.947 15.804 C 9.164 15.908,9.388 16.166,9.445 16.378 C 9.470 16.467,9.492 16.684,9.495 16.860 C 9.499 17.144,9.487 17.202,9.388 17.371 C 9.228 17.642,8.933 17.863,8.653 17.921 C 8.405 17.973,8.088 17.947,7.923 17.862 C 7.783 17.789,7.409 17.390,7.360 17.260 C 7.290 17.075,7.312 16.441,7.395 16.258 C 7.468 16.097,7.745 15.823,7.900 15.759 C 7.944 15.740,8.159 15.724,8.377 15.723 C 8.702 15.720,8.806 15.735,8.947 15.804 M16.246 15.865 C 16.342 15.934,16.474 16.066,16.540 16.158 C 16.652 16.315,16.661 16.356,16.673 16.738 C 16.685 17.098,16.676 17.171,16.600 17.320 C 16.470 17.574,16.165 17.863,15.991 17.895 C 15.467 17.994,12.835 18.036,12.078 17.958 C 11.599 17.909,11.435 17.849,11.232 17.652 C 11.046 17.470,10.931 17.205,10.897 16.877 C 10.865 16.558,10.921 16.337,11.092 16.114 C 11.249 15.907,11.416 15.805,11.669 15.759 C 11.774 15.741,12.808 15.728,13.966 15.733 L 16.072 15.740 16.246 15.865 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.267 2.580 C 10.160 2.662,9.995 2.835,9.899 2.965 C 9.564 3.421,9.569 3.837,9.915 4.291 C 10.255 4.737,10.431 4.775,12.180 4.778 C 13.666 4.780,13.615 4.791,13.994 4.377 C 14.253 4.094,14.320 3.928,14.319 3.575 C 14.318 3.256,14.215 3.048,13.904 2.737 L 13.647 2.480 12.650 2.480 C 12.102 2.480,11.384 2.469,11.056 2.455 L 10.460 2.430 10.267 2.580 M6.660 3.714 C 6.309 3.852,6.055 3.997,5.706 4.256 C 5.426 4.465,5.137 4.844,4.904 5.309 L 4.800 5.517 4.800 12.600 L 4.800 19.683 4.906 19.891 C 5.140 20.354,5.551 20.877,5.872 21.117 C 5.979 21.198,6.213 21.340,6.390 21.432 L 6.712 21.600 12.047 21.600 L 17.382 21.600 17.757 21.358 C 18.353 20.972,18.697 20.609,19.078 19.963 L 19.200 19.756 19.200 12.663 L 19.200 5.570 19.115 5.375 C 18.972 5.051,18.683 4.634,18.424 4.380 C 18.065 4.029,17.394 3.686,17.056 3.682 C 16.861 3.680,16.876 3.654,16.641 4.400 C 16.351 5.322,16.079 5.751,15.421 6.326 C 14.688 6.966,14.088 7.145,12.540 7.187 C 11.492 7.215,10.337 7.152,9.900 7.041 C 9.487 6.937,9.103 6.742,8.670 6.418 C 8.030 5.937,7.717 5.454,7.338 4.360 C 7.125 3.745,7.058 3.599,6.989 3.601 C 6.962 3.602,6.814 3.653,6.660 3.714 M9.024 11.062 C 9.143 11.136,9.264 11.257,9.339 11.377 C 9.449 11.557,9.460 11.607,9.473 11.996 C 9.486 12.415,9.485 12.422,9.360 12.609 C 9.204 12.843,8.961 13.025,8.703 13.101 C 8.270 13.230,7.938 13.139,7.637 12.810 C 7.376 12.524,7.320 12.391,7.320 12.063 C 7.320 11.616,7.382 11.423,7.599 11.201 C 7.835 10.959,7.957 10.920,8.445 10.933 C 8.794 10.942,8.848 10.954,9.024 11.062 M14.983 10.945 L 16.140 10.970 16.386 11.219 C 16.626 11.462,16.633 11.475,16.661 11.736 C 16.710 12.194,16.673 12.411,16.505 12.656 C 16.302 12.950,16.104 13.080,15.792 13.123 C 15.350 13.185,12.626 13.216,12.162 13.165 C 11.587 13.101,11.452 13.054,11.236 12.839 C 10.843 12.448,10.779 11.751,11.097 11.317 C 11.304 11.034,11.443 10.984,12.100 10.958 C 13.011 10.922,13.757 10.918,14.983 10.945 M9.024 15.862 C 9.143 15.936,9.264 16.057,9.339 16.177 C 9.449 16.357,9.460 16.407,9.473 16.796 C 9.486 17.215,9.485 17.222,9.360 17.409 C 9.204 17.643,8.961 17.825,8.703 17.901 C 8.270 18.030,7.938 17.939,7.637 17.610 C 7.376 17.324,7.320 17.191,7.320 16.863 C 7.320 16.416,7.382 16.223,7.599 16.001 C 7.835 15.759,7.957 15.720,8.445 15.733 C 8.794 15.742,8.848 15.754,9.024 15.862 M14.983 15.745 L 16.140 15.770 16.386 16.019 C 16.626 16.262,16.633 16.275,16.661 16.536 C 16.710 16.994,16.673 17.211,16.505 17.456 C 16.302 17.750,16.104 17.880,15.792 17.923 C 15.350 17.985,12.626 18.016,12.162 17.965 C 11.587 17.901,11.452 17.854,11.236 17.639 C 10.843 17.248,10.779 16.551,11.097 16.117 C 11.304 15.834,11.443 15.784,12.100 15.758 C 13.011 15.722,13.757 15.718,14.983 15.745 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/clock.svg b/packages/icons/svg/clock.svg
index 6cef25a3f4..873c272989 100644
--- a/packages/icons/svg/clock.svg
+++ b/packages/icons/svg/clock.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.365 6.362 C 12.495 6.396,12.801 6.660,12.883 6.808 C 12.899 6.836,12.934 7.922,12.961 9.220 L 13.010 11.580 14.064 12.651 C 15.299 13.906,15.954 14.615,16.155 14.917 C 16.283 15.107,16.300 15.163,16.299 15.377 C 16.297 15.808,16.002 16.213,15.610 16.323 C 15.374 16.389,15.139 16.330,14.840 16.129 C 14.602 15.970,11.836 13.231,11.367 12.690 L 11.080 12.359 11.083 10.310 C 11.086 7.965,11.121 6.866,11.197 6.724 C 11.226 6.672,11.323 6.548,11.414 6.449 L 11.579 6.270 11.900 6.297 C 12.076 6.311,12.285 6.340,12.365 6.362 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.326 6.363 C 12.407 6.384,12.562 6.481,12.671 6.580 L 12.870 6.758 12.894 7.109 C 12.908 7.302,12.939 8.387,12.963 9.520 L 13.007 11.580 13.815 12.400 C 15.395 14.003,16.064 14.733,16.204 15.008 C 16.289 15.174,16.306 15.526,16.238 15.707 C 16.033 16.253,15.502 16.480,15.017 16.230 C 14.765 16.101,13.021 14.430,11.875 13.221 L 11.080 12.383 11.082 10.601 C 11.083 8.624,11.133 6.913,11.192 6.760 C 11.214 6.705,11.308 6.573,11.403 6.466 L 11.574 6.272 11.877 6.299 C 12.044 6.314,12.246 6.343,12.326 6.363 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cloud-download.svg b/packages/icons/svg/cloud-download.svg
index 343ac3478e..6e6f8cf57a 100644
--- a/packages/icons/svg/cloud-download.svg
+++ b/packages/icons/svg/cloud-download.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.952 1.325 C 9.213 1.420,8.112 2.017,7.418 2.700 C 6.884 3.225,6.563 3.728,6.324 4.412 C 6.096 5.063,6.040 5.456,6.040 6.388 L 6.040 7.223 5.630 7.356 C 3.950 7.903,2.930 8.956,2.529 10.560 C 2.327 11.368,2.413 12.178,2.794 13.041 C 3.102 13.739,3.649 14.415,4.221 14.805 C 4.539 15.022,5.053 15.277,5.528 15.455 L 5.917 15.600 8.358 15.600 L 10.800 15.600 10.800 17.143 L 10.800 18.686 10.170 18.084 C 9.493 17.438,9.066 17.080,8.846 16.976 C 8.667 16.891,8.086 16.913,7.878 17.013 C 7.689 17.104,7.454 17.337,7.349 17.537 C 7.226 17.770,7.227 18.194,7.350 18.444 C 7.474 18.694,8.213 19.488,9.544 20.800 C 11.233 22.466,11.613 22.773,11.985 22.773 C 12.405 22.773,12.930 22.352,14.621 20.661 C 15.646 19.636,16.380 18.838,16.603 18.505 C 16.736 18.307,16.760 18.239,16.760 18.063 C 16.760 17.757,16.659 17.507,16.436 17.263 C 16.163 16.965,16.050 16.920,15.570 16.920 C 15.173 16.920,15.171 16.921,14.976 17.067 C 14.696 17.277,14.258 17.668,13.692 18.215 L 13.200 18.690 13.200 17.151 L 13.200 15.613 14.970 15.586 C 15.944 15.571,16.865 15.541,17.018 15.519 C 17.597 15.434,18.593 15.031,19.200 14.635 C 19.573 14.392,20.302 13.649,20.589 13.218 C 21.419 11.976,21.705 10.767,21.498 9.375 C 21.256 7.745,20.116 6.220,18.527 5.398 C 18.109 5.182,17.750 5.064,17.260 4.982 C 16.936 4.928,15.934 4.841,15.616 4.840 C 15.501 4.840,15.484 4.821,15.379 4.570 C 14.877 3.366,14.108 2.457,13.088 1.861 C 12.484 1.508,12.031 1.385,11.098 1.322 C 10.423 1.276,10.328 1.276,9.952 1.325 M12.404 8.562 C 12.573 8.606,12.896 8.877,12.984 9.047 C 13.026 9.129,13.056 9.378,13.081 9.872 C 13.119 10.598,13.200 14.121,13.200 15.070 L 13.200 15.600 12.000 15.600 L 10.800 15.600 10.800 14.950 C 10.800 13.817,10.879 10.404,10.920 9.766 C 10.947 9.348,10.981 9.108,11.026 9.013 C 11.096 8.865,11.420 8.600,11.620 8.526 C 11.748 8.479,12.163 8.498,12.404 8.562 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.964 1.324 C 9.448 1.403,8.831 1.667,8.220 2.071 C 7.123 2.797,6.504 3.657,6.170 4.920 C 6.081 5.260,6.068 5.401,6.050 6.263 L 6.030 7.227 5.685 7.338 C 3.961 7.897,2.904 8.992,2.517 10.625 C 2.427 11.002,2.410 11.653,2.479 12.037 C 2.677 13.127,3.391 14.243,4.262 14.822 C 4.616 15.058,5.164 15.327,5.632 15.495 L 5.925 15.600 8.362 15.600 L 10.800 15.600 10.800 17.149 L 10.800 18.698 10.450 18.357 C 9.511 17.440,9.009 17.027,8.744 16.955 C 8.521 16.895,8.038 16.939,7.844 17.038 C 7.612 17.156,7.369 17.455,7.294 17.715 C 7.214 17.989,7.262 18.319,7.414 18.542 C 7.690 18.949,9.923 21.227,10.907 22.108 C 11.814 22.918,12.068 22.947,12.846 22.328 C 13.513 21.798,15.815 19.492,16.383 18.783 C 16.725 18.358,16.775 18.244,16.749 17.956 C 16.723 17.667,16.563 17.365,16.326 17.156 C 16.111 16.967,15.956 16.921,15.538 16.920 C 15.252 16.920,15.196 16.933,15.038 17.034 C 14.812 17.178,14.305 17.624,13.685 18.222 L 13.200 18.689 13.200 17.151 L 13.200 15.613 14.950 15.586 C 15.912 15.571,16.824 15.540,16.976 15.518 C 17.514 15.441,18.355 15.127,18.962 14.776 C 19.519 14.455,20.239 13.745,20.661 13.100 C 21.304 12.117,21.588 11.133,21.548 10.020 C 21.511 8.982,21.252 8.183,20.671 7.311 C 19.931 6.202,18.667 5.290,17.520 5.037 C 17.333 4.996,16.811 4.932,16.360 4.896 C 15.905 4.859,15.520 4.809,15.494 4.785 C 15.469 4.760,15.390 4.605,15.319 4.440 C 15.141 4.025,14.813 3.477,14.531 3.120 C 13.911 2.338,12.973 1.683,12.184 1.481 C 11.639 1.342,10.418 1.255,9.964 1.324 M12.581 8.661 C 12.903 8.861,12.996 9.012,13.039 9.403 C 13.081 9.780,13.144 11.805,13.185 14.090 L 13.212 15.600 12.006 15.600 L 10.800 15.600 10.800 14.960 C 10.800 13.953,10.877 10.774,10.921 9.979 C 10.942 9.583,10.978 9.197,10.999 9.122 C 11.046 8.958,11.197 8.790,11.440 8.632 C 11.613 8.518,11.635 8.514,12.005 8.528 C 12.349 8.541,12.411 8.555,12.581 8.661 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cloud-upload.svg b/packages/icons/svg/cloud-upload.svg
index c7f0bd674e..3a5f29baf5 100644
--- a/packages/icons/svg/cloud-upload.svg
+++ b/packages/icons/svg/cloud-upload.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.952 1.325 C 9.213 1.420,8.112 2.017,7.418 2.700 C 6.884 3.225,6.563 3.728,6.324 4.412 C 6.096 5.063,6.040 5.456,6.040 6.388 L 6.040 7.223 5.630 7.356 C 3.950 7.903,2.930 8.956,2.529 10.560 C 2.327 11.368,2.413 12.178,2.794 13.041 C 3.102 13.739,3.649 14.415,4.221 14.805 C 4.539 15.022,5.053 15.277,5.528 15.455 L 5.917 15.600 8.358 15.600 L 10.800 15.600 10.800 18.793 L 10.800 21.986 11.070 22.264 C 11.379 22.583,11.633 22.720,11.968 22.750 C 12.263 22.777,12.536 22.651,12.833 22.351 C 13.240 21.940,13.199 22.332,13.200 18.757 L 13.200 15.613 14.970 15.586 C 15.944 15.571,16.865 15.541,17.018 15.519 C 17.597 15.434,18.593 15.031,19.200 14.635 C 19.573 14.392,20.302 13.649,20.589 13.218 C 21.419 11.976,21.705 10.767,21.498 9.375 C 21.256 7.745,20.116 6.220,18.527 5.398 C 18.109 5.182,17.750 5.064,17.260 4.982 C 16.936 4.928,15.934 4.841,15.616 4.840 C 15.501 4.840,15.484 4.821,15.379 4.570 C 14.877 3.366,14.108 2.457,13.088 1.861 C 12.484 1.508,12.031 1.385,11.098 1.322 C 10.423 1.276,10.328 1.276,9.952 1.325 M12.481 7.399 C 12.897 7.617,16.123 10.815,16.500 11.383 C 16.709 11.697,16.748 11.892,16.668 12.216 C 16.495 12.918,15.877 13.311,15.277 13.099 C 15.027 13.011,14.772 12.805,13.941 12.017 L 13.200 11.316 13.200 13.458 L 13.200 15.600 12.000 15.600 L 10.800 15.600 10.800 13.457 L 10.800 11.314 10.130 11.953 C 9.342 12.704,9.022 12.986,8.865 13.067 C 8.779 13.112,8.647 13.124,8.339 13.114 C 7.947 13.101,7.920 13.094,7.774 12.976 C 7.689 12.908,7.557 12.764,7.480 12.657 C 7.351 12.478,7.339 12.436,7.326 12.125 C 7.318 11.939,7.332 11.718,7.357 11.634 C 7.436 11.369,7.854 10.900,9.277 9.479 C 10.673 8.085,11.444 7.378,11.610 7.342 C 11.873 7.285,12.318 7.314,12.481 7.399 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.964 1.324 C 9.448 1.403,8.831 1.667,8.220 2.071 C 7.123 2.797,6.504 3.657,6.170 4.920 C 6.081 5.260,6.068 5.401,6.050 6.263 L 6.030 7.227 5.685 7.338 C 3.961 7.897,2.904 8.992,2.517 10.625 C 2.427 11.002,2.410 11.653,2.479 12.037 C 2.677 13.127,3.391 14.243,4.262 14.822 C 4.616 15.058,5.164 15.327,5.632 15.495 L 5.925 15.600 8.362 15.600 L 10.800 15.600 10.800 18.793 L 10.800 21.986 11.096 22.274 C 11.539 22.703,11.913 22.835,12.312 22.703 C 12.551 22.623,13.018 22.216,13.116 22.001 C 13.173 21.876,13.181 21.504,13.192 18.736 L 13.203 15.613 14.952 15.586 C 15.913 15.571,16.824 15.540,16.976 15.518 C 17.514 15.441,18.355 15.127,18.962 14.776 C 19.519 14.455,20.239 13.745,20.661 13.100 C 21.304 12.117,21.588 11.133,21.548 10.020 C 21.511 8.982,21.252 8.183,20.671 7.311 C 19.931 6.202,18.667 5.290,17.520 5.037 C 17.333 4.996,16.811 4.932,16.360 4.896 C 15.905 4.859,15.520 4.809,15.494 4.785 C 15.469 4.760,15.390 4.605,15.319 4.440 C 15.141 4.025,14.813 3.477,14.531 3.120 C 13.911 2.338,12.973 1.683,12.184 1.481 C 11.639 1.342,10.418 1.255,9.964 1.324 M12.545 7.446 C 12.930 7.702,15.191 9.900,16.052 10.856 C 16.565 11.425,16.679 11.623,16.680 11.945 C 16.681 12.696,16.072 13.267,15.417 13.130 C 15.110 13.065,14.845 12.865,13.950 12.023 L 13.200 11.317 13.200 13.458 L 13.200 15.600 12.000 15.600 L 10.800 15.600 10.800 13.457 L 10.800 11.315 10.090 11.988 C 8.864 13.151,8.874 13.144,8.264 13.112 C 7.885 13.092,7.769 13.032,7.539 12.731 C 7.356 12.491,7.306 12.291,7.332 11.905 C 7.351 11.626,7.369 11.567,7.500 11.378 C 7.803 10.938,10.196 8.517,11.164 7.671 C 11.553 7.331,11.599 7.313,12.025 7.329 C 12.337 7.341,12.413 7.358,12.545 7.446 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cloud.svg b/packages/icons/svg/cloud.svg
index 7bbb0c63fa..3d2d47adce 100644
--- a/packages/icons/svg/cloud.svg
+++ b/packages/icons/svg/cloud.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.032 4.923 C 9.153 5.043,8.163 5.558,7.460 6.260 C 7.030 6.690,6.743 7.096,6.480 7.650 C 6.110 8.425,6.003 9.017,6.001 10.285 L 6.000 10.830 5.630 10.958 C 5.151 11.124,4.512 11.428,4.215 11.632 C 2.753 12.634,2.096 14.532,2.628 16.219 C 3.038 17.521,3.942 18.416,5.494 19.058 L 5.835 19.200 7.188 19.200 C 9.795 19.200,16.584 19.117,17.009 19.080 C 17.276 19.057,17.556 19.003,17.749 18.938 C 18.218 18.781,18.923 18.422,19.270 18.165 C 19.653 17.881,20.296 17.242,20.582 16.862 C 20.830 16.532,21.131 15.921,21.340 15.320 C 21.468 14.954,21.491 14.827,21.523 14.333 C 21.590 13.292,21.492 12.603,21.157 11.765 C 20.778 10.820,20.107 10.024,19.137 9.370 C 18.791 9.137,18.181 8.820,17.899 8.726 C 17.593 8.624,16.954 8.530,16.141 8.468 C 15.522 8.421,15.501 8.416,15.454 8.320 C 15.427 8.265,15.315 8.031,15.205 7.800 C 14.926 7.214,14.645 6.809,14.180 6.326 C 13.576 5.697,12.846 5.246,12.134 5.060 C 11.663 4.937,10.488 4.860,10.032 4.923 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.740 4.976 C 8.969 5.155,8.172 5.599,7.544 6.199 C 7.089 6.635,6.765 7.070,6.519 7.577 C 6.136 8.368,6.045 8.802,6.013 9.965 L 5.989 10.830 5.585 10.979 C 5.054 11.174,4.358 11.521,4.082 11.730 C 2.773 12.718,2.174 14.422,2.576 16.009 C 2.923 17.376,3.854 18.364,5.420 19.027 L 5.860 19.213 9.800 19.184 C 15.067 19.147,17.010 19.105,17.404 19.023 C 17.884 18.922,18.681 18.565,19.177 18.228 C 19.485 18.019,20.312 17.216,20.563 16.881 C 20.812 16.550,21.150 15.864,21.338 15.313 C 21.461 14.949,21.489 14.800,21.523 14.317 C 21.690 11.958,20.624 10.094,18.484 9.004 C 17.804 8.658,17.598 8.609,16.270 8.483 C 15.857 8.444,15.513 8.405,15.505 8.396 C 15.497 8.387,15.353 8.110,15.186 7.780 C 14.831 7.081,14.599 6.756,14.101 6.260 C 13.469 5.631,12.703 5.187,11.988 5.034 C 11.497 4.929,10.100 4.893,9.740 4.976 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/code.svg b/packages/icons/svg/code.svg
index 5f6fe34642..941ba98b9d 100644
--- a/packages/icons/svg/code.svg
+++ b/packages/icons/svg/code.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.026 3.719 C 13.687 3.827,13.483 4.093,13.226 4.760 C 12.716 6.087,8.759 17.969,8.518 18.900 C 8.379 19.435,8.486 19.772,8.892 20.076 C 9.550 20.571,10.288 20.374,10.625 19.614 C 10.978 18.815,13.367 11.755,14.879 7.041 C 15.398 5.422,15.534 4.934,15.537 4.679 C 15.540 4.483,15.522 4.434,15.383 4.244 C 15.202 3.997,14.969 3.816,14.764 3.762 C 14.535 3.702,14.150 3.680,14.026 3.719 M5.573 7.363 C 5.481 7.408,5.265 7.564,5.093 7.709 C 4.615 8.110,1.763 10.983,1.527 11.300 C 1.150 11.806,1.130 12.086,1.438 12.547 C 1.626 12.829,2.914 14.190,4.065 15.322 C 4.983 16.226,5.337 16.535,5.580 16.645 C 5.801 16.746,6.244 16.744,6.469 16.641 C 6.668 16.551,6.961 16.263,7.054 16.066 C 7.151 15.862,7.143 15.354,7.040 15.141 C 6.939 14.931,6.309 14.239,5.083 12.990 L 4.111 12.000 5.043 11.050 C 6.298 9.770,6.902 9.101,7.022 8.858 C 7.146 8.607,7.186 8.300,7.122 8.105 C 7.053 7.898,6.791 7.582,6.591 7.464 C 6.439 7.376,6.042 7.281,5.820 7.280 C 5.776 7.280,5.665 7.317,5.573 7.363 M17.579 7.355 C 17.513 7.372,17.409 7.418,17.349 7.458 C 17.218 7.544,16.982 7.856,16.900 8.054 C 16.823 8.238,16.823 8.563,16.901 8.748 C 17.022 9.038,17.572 9.649,19.134 11.227 L 19.894 11.995 18.880 13.027 C 16.853 15.093,16.702 15.318,16.909 15.965 C 17.055 16.423,17.523 16.734,18.069 16.735 C 18.291 16.735,18.341 16.719,18.535 16.585 C 19.007 16.260,21.447 13.866,22.279 12.912 C 22.698 12.430,22.774 12.275,22.753 11.940 C 22.739 11.726,22.713 11.650,22.590 11.472 C 22.346 11.119,21.670 10.398,20.496 9.238 C 19.296 8.054,18.710 7.523,18.483 7.414 C 18.325 7.339,17.780 7.303,17.579 7.355 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.858 3.795 C 13.534 3.992,13.358 4.349,12.820 5.900 C 11.977 8.332,9.306 16.371,8.700 18.300 C 8.386 19.299,8.392 19.589,8.735 19.932 C 8.936 20.133,9.189 20.272,9.448 20.324 C 9.790 20.393,10.071 20.297,10.342 20.019 C 10.515 19.843,10.581 19.731,10.713 19.392 C 11.308 17.864,14.191 9.271,15.179 6.080 C 15.515 4.994,15.578 4.692,15.507 4.487 C 15.396 4.165,15.067 3.856,14.739 3.765 C 14.477 3.692,14.000 3.708,13.858 3.795 M5.580 7.364 C 5.492 7.411,5.339 7.515,5.240 7.594 C 4.878 7.883,3.683 9.048,2.603 10.166 C 1.333 11.480,1.219 11.638,1.248 12.041 C 1.269 12.337,1.398 12.536,1.984 13.183 C 2.604 13.867,4.848 16.104,5.184 16.372 C 5.506 16.630,5.721 16.720,6.010 16.720 C 6.326 16.720,6.512 16.643,6.764 16.410 C 7.062 16.134,7.137 15.947,7.112 15.545 C 7.097 15.322,7.067 15.205,6.990 15.074 C 6.854 14.844,6.186 14.116,5.043 12.950 L 4.111 12.000 5.002 11.090 C 6.005 10.066,6.651 9.368,6.879 9.065 C 7.036 8.855,7.160 8.520,7.160 8.305 C 7.160 7.994,6.795 7.544,6.432 7.408 C 6.082 7.277,5.773 7.261,5.580 7.364 M17.660 7.345 C 17.420 7.402,17.265 7.508,17.099 7.730 C 16.788 8.144,16.758 8.555,17.013 8.935 C 17.205 9.222,17.788 9.857,18.918 11.010 L 19.889 12.001 18.954 12.953 C 17.493 14.442,17.116 14.873,16.934 15.260 C 16.818 15.508,16.816 15.692,16.925 15.985 C 17.098 16.446,17.528 16.720,18.077 16.720 C 18.335 16.720,18.365 16.710,18.561 16.563 C 19.106 16.153,21.485 13.819,22.233 12.960 C 22.670 12.458,22.778 12.238,22.749 11.914 C 22.731 11.722,22.697 11.627,22.585 11.465 C 22.370 11.154,21.439 10.164,20.411 9.155 C 19.303 8.068,18.722 7.547,18.503 7.443 C 18.342 7.367,17.821 7.306,17.660 7.345 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cog.svg b/packages/icons/svg/cog.svg
index ef6dde81ac..8e71483578 100644
--- a/packages/icons/svg/cog.svg
+++ b/packages/icons/svg/cog.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.560 2.517 C 11.260 2.577,10.807 2.869,10.615 3.125 C 10.559 3.199,10.362 3.514,10.178 3.825 C 9.636 4.736,9.484 4.890,8.937 5.083 C 8.597 5.202,8.230 5.172,7.640 4.977 C 7.206 4.834,7.146 4.824,6.575 4.809 C 5.889 4.791,5.839 4.805,5.454 5.127 C 5.042 5.473,4.808 5.833,4.720 6.258 C 4.657 6.562,4.677 6.693,4.898 7.417 C 5.070 7.979,5.080 8.040,5.080 8.480 C 5.080 8.921,5.073 8.961,4.958 9.191 C 4.811 9.486,4.490 9.794,4.052 10.063 C 2.930 10.752,2.715 10.937,2.562 11.342 C 2.400 11.773,2.378 11.957,2.452 12.258 C 2.626 12.964,2.904 13.284,3.804 13.817 C 4.644 14.315,4.759 14.414,4.968 14.820 L 5.091 15.060 5.065 15.586 C 5.048 15.911,5.008 16.224,4.958 16.406 C 4.727 17.250,4.712 17.330,4.726 17.635 C 4.745 18.046,4.883 18.324,5.257 18.702 C 5.566 19.016,5.909 19.217,6.241 19.280 C 6.498 19.329,6.755 19.281,7.460 19.051 L 8.020 18.869 8.532 18.912 C 9.376 18.983,9.545 19.112,10.177 20.175 C 10.396 20.542,10.654 20.922,10.750 21.020 C 10.953 21.225,11.454 21.491,11.776 21.563 C 12.226 21.663,12.866 21.419,13.255 20.998 C 13.378 20.866,13.644 20.478,13.847 20.136 C 14.294 19.386,14.421 19.231,14.715 19.083 C 15.231 18.823,15.545 18.830,16.720 19.127 C 17.620 19.354,17.720 19.355,18.162 19.134 C 18.513 18.958,18.972 18.508,19.140 18.176 C 19.251 17.958,19.260 17.910,19.255 17.540 C 19.251 17.208,19.225 17.055,19.105 16.641 C 18.798 15.587,18.830 15.019,19.226 14.490 C 19.339 14.340,19.596 14.160,20.240 13.779 C 20.804 13.446,21.084 13.232,21.238 13.016 C 21.634 12.465,21.660 11.637,21.299 11.091 C 21.122 10.824,20.900 10.650,20.176 10.214 C 19.521 9.819,19.165 9.508,19.029 9.214 C 18.950 9.042,18.940 8.957,18.942 8.460 C 18.943 7.926,18.951 7.870,19.118 7.260 C 19.342 6.436,19.349 6.238,19.163 5.859 C 18.986 5.498,18.594 5.098,18.240 4.920 C 17.787 4.691,17.367 4.710,16.321 5.006 C 15.662 5.193,15.437 5.211,15.108 5.103 C 14.548 4.921,14.297 4.666,13.777 3.752 C 13.437 3.155,13.161 2.844,12.826 2.682 C 12.468 2.508,11.945 2.440,11.560 2.517 M12.940 8.606 C 13.247 8.669,13.910 9.009,14.200 9.250 C 14.862 9.801,15.345 10.574,15.442 11.238 C 15.497 11.616,15.471 12.708,15.400 12.997 C 15.293 13.433,14.894 14.068,14.442 14.522 C 13.954 15.014,13.420 15.330,12.849 15.465 C 12.468 15.556,11.470 15.556,11.120 15.466 C 10.154 15.218,9.090 14.262,8.697 13.289 C 8.646 13.161,8.582 12.922,8.557 12.758 C 8.496 12.368,8.532 11.256,8.614 10.965 C 8.929 9.857,10.194 8.688,11.220 8.558 C 11.526 8.519,12.677 8.551,12.940 8.606 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.517 2.535 C 11.018 2.669,10.698 2.968,10.232 3.732 C 9.641 4.699,9.477 4.881,9.047 5.041 C 8.602 5.208,8.325 5.191,7.566 4.953 C 7.210 4.842,7.131 4.832,6.540 4.826 C 5.789 4.819,5.788 4.819,5.348 5.238 C 5.007 5.563,4.827 5.845,4.737 6.197 C 4.656 6.518,4.674 6.663,4.884 7.360 C 5.020 7.811,5.050 7.976,5.069 8.364 C 5.094 8.893,5.064 9.026,4.847 9.356 C 4.678 9.612,4.324 9.895,3.594 10.359 C 2.936 10.776,2.685 11.016,2.563 11.341 C 2.404 11.767,2.381 11.963,2.457 12.266 C 2.645 13.013,2.854 13.230,4.186 14.055 C 4.770 14.417,5.080 14.826,5.080 15.234 C 5.080 15.646,4.992 16.264,4.858 16.784 C 4.782 17.081,4.720 17.418,4.720 17.534 C 4.720 17.792,4.813 18.119,4.946 18.330 C 5.110 18.590,5.552 18.991,5.816 19.120 C 6.302 19.358,6.543 19.346,7.499 19.038 C 7.989 18.881,8.036 18.873,8.339 18.897 C 8.802 18.935,9.115 18.996,9.279 19.079 C 9.511 19.198,9.758 19.499,10.179 20.180 C 10.643 20.928,10.862 21.164,11.280 21.370 C 11.688 21.570,11.934 21.619,12.229 21.559 C 12.804 21.442,13.208 21.131,13.621 20.488 C 14.338 19.370,14.396 19.290,14.582 19.167 C 15.055 18.854,15.576 18.842,16.680 19.118 C 17.521 19.328,17.734 19.334,18.100 19.160 C 18.456 18.990,18.941 18.531,19.121 18.192 C 19.246 17.958,19.253 17.923,19.249 17.555 C 19.245 17.238,19.216 17.062,19.093 16.613 C 18.955 16.108,18.942 16.015,18.941 15.540 C 18.940 15.060,18.948 15.003,19.046 14.794 C 19.199 14.467,19.387 14.302,20.117 13.857 C 20.914 13.371,21.224 13.100,21.378 12.758 C 21.606 12.250,21.609 11.749,21.387 11.263 C 21.244 10.951,21.010 10.743,20.273 10.275 C 19.567 9.827,19.170 9.488,19.042 9.225 C 18.971 9.077,18.960 8.979,18.960 8.474 C 18.960 7.928,18.970 7.854,19.120 7.260 C 19.359 6.315,19.335 6.054,18.960 5.556 C 18.739 5.261,18.436 5.008,18.138 4.872 C 17.971 4.795,17.877 4.782,17.540 4.785 C 17.200 4.789,17.031 4.818,16.420 4.979 C 15.804 5.140,15.659 5.165,15.420 5.150 C 14.806 5.113,14.385 4.776,13.877 3.918 C 13.538 3.344,13.289 3.007,13.100 2.863 C 12.690 2.550,11.995 2.406,11.517 2.535 M12.834 8.598 C 13.306 8.667,14.014 9.058,14.456 9.495 C 14.905 9.939,15.250 10.500,15.390 11.011 C 15.475 11.323,15.482 12.614,15.401 12.960 C 15.244 13.624,14.529 14.562,13.821 15.032 C 13.668 15.134,13.380 15.281,13.181 15.359 L 12.820 15.500 11.980 15.500 L 11.140 15.500 10.821 15.367 C 9.790 14.940,8.826 13.897,8.594 12.960 C 8.515 12.640,8.528 11.342,8.614 11.011 C 8.748 10.491,9.082 9.964,9.586 9.475 C 10.037 9.038,10.584 8.700,10.999 8.601 C 11.193 8.556,12.522 8.553,12.834 8.598 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/collection.svg b/packages/icons/svg/collection.svg
index 4baaebb8bb..97864160a5 100644
--- a/packages/icons/svg/collection.svg
+++ b/packages/icons/svg/collection.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.800 3.683 C 9.381 3.699,8.135 3.730,8.031 3.751 C 7.927 3.772,7.799 3.818,7.745 3.853 C 7.606 3.944,7.379 4.238,7.326 4.396 C 7.261 4.588,7.268 5.095,7.338 5.262 C 7.430 5.481,7.786 5.833,7.965 5.881 C 8.238 5.955,10.110 5.998,13.056 5.999 L 15.933 6.000 16.144 5.837 C 16.378 5.656,16.506 5.504,16.635 5.250 C 16.880 4.770,16.730 4.284,16.202 3.845 L 15.956 3.640 14.668 3.647 C 13.960 3.651,12.219 3.667,10.800 3.683 M10.420 7.283 C 8.220 7.299,6.247 7.321,6.035 7.332 C 5.312 7.369,4.988 7.619,4.876 8.223 C 4.799 8.639,4.979 9.013,5.440 9.397 L 5.684 9.600 12.038 9.600 L 18.392 9.600 18.666 9.306 C 19.023 8.924,19.140 8.695,19.140 8.380 C 19.140 8.066,19.053 7.896,18.706 7.531 L 18.430 7.240 16.425 7.247 C 15.322 7.250,12.620 7.267,10.420 7.283 M9.100 10.918 L 4.060 10.941 3.800 11.080 C 3.432 11.277,2.911 11.805,2.627 12.270 L 2.400 12.639 2.400 15.561 L 2.400 18.482 2.525 18.731 C 2.859 19.398,3.408 19.957,4.049 20.283 L 4.278 20.400 11.984 20.400 L 19.691 20.400 20.007 20.231 C 20.677 19.874,21.074 19.477,21.431 18.807 L 21.600 18.491 21.599 15.595 L 21.599 12.700 21.436 12.402 C 21.123 11.827,20.797 11.484,20.185 11.085 L 19.870 10.880 17.005 10.888 C 15.429 10.892,11.872 10.906,9.100 10.918 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.180 3.682 C 8.559 3.713,8.017 3.735,7.820 3.817 C 7.673 3.879,7.429 4.161,7.341 4.372 C 7.272 4.537,7.260 4.988,7.319 5.200 C 7.373 5.391,7.682 5.735,7.893 5.837 C 8.049 5.912,8.178 5.924,9.203 5.959 C 9.828 5.981,11.600 5.999,13.140 5.999 L 15.940 5.999 16.167 5.819 C 16.591 5.482,16.812 5.007,16.724 4.622 C 16.665 4.361,16.451 4.052,16.172 3.822 L 15.951 3.640 14.785 3.647 C 14.144 3.650,12.522 3.666,11.180 3.682 M10.700 7.283 C 6.281 7.315,5.827 7.327,5.548 7.414 C 5.171 7.531,4.977 7.759,4.885 8.191 C 4.797 8.605,4.966 8.980,5.419 9.377 L 5.672 9.600 12.033 9.600 L 18.394 9.600 18.659 9.310 C 18.999 8.938,19.140 8.656,19.136 8.360 C 19.131 8.074,19.036 7.892,18.700 7.529 L 18.433 7.240 16.566 7.247 C 15.540 7.250,12.900 7.267,10.700 7.283 M9.440 10.918 L 4.060 10.941 3.852 11.056 C 3.419 11.295,2.915 11.804,2.579 12.343 L 2.400 12.631 2.400 15.557 L 2.400 18.483 2.505 18.691 C 2.820 19.316,3.358 19.891,3.931 20.214 L 4.260 20.400 11.978 20.400 L 19.695 20.400 20.078 20.190 C 20.611 19.898,21.098 19.411,21.390 18.878 L 21.600 18.495 21.600 15.606 C 21.600 12.737,21.599 12.716,21.515 12.548 C 21.212 11.951,20.817 11.510,20.235 11.121 L 19.875 10.880 17.347 10.888 C 15.957 10.892,12.399 10.906,9.440 10.918 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/color-swatch.svg b/packages/icons/svg/color-swatch.svg
index 7312165bc4..413e076911 100644
--- a/packages/icons/svg/color-swatch.svg
+++ b/packages/icons/svg/color-swatch.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.660 2.557 L 3.980 2.580 3.760 2.715 C 3.456 2.901,3.029 3.254,2.894 3.432 C 2.831 3.513,2.695 3.747,2.590 3.951 L 2.400 4.323 2.400 11.535 L 2.400 18.748 2.619 19.195 C 2.931 19.829,3.082 20.050,3.495 20.473 C 3.914 20.902,4.234 21.128,4.788 21.387 L 5.180 21.570 5.960 21.550 C 6.678 21.532,6.767 21.521,7.073 21.419 C 8.090 21.078,8.992 20.135,9.496 18.883 L 9.600 18.626 9.600 11.449 L 9.600 4.271 9.479 4.043 C 9.186 3.494,8.658 2.949,8.136 2.657 L 7.892 2.520 6.616 2.527 C 5.914 2.531,5.034 2.545,4.660 2.557 M13.900 5.544 C 13.514 5.643,12.832 6.105,12.230 6.674 L 12.000 6.892 12.000 11.995 L 12.000 17.099 12.503 16.599 C 13.134 15.974,17.080 11.933,17.639 11.340 C 18.370 10.566,18.496 10.293,18.499 9.480 C 18.500 9.028,18.490 8.956,18.394 8.729 C 18.336 8.591,18.221 8.380,18.138 8.260 C 17.788 7.752,16.245 6.210,15.750 5.873 C 15.344 5.597,15.224 5.564,14.569 5.543 C 14.245 5.532,13.944 5.533,13.900 5.544 M14.500 17.998 L 10.900 21.600 15.300 21.599 L 19.700 21.599 19.994 21.438 C 20.671 21.070,21.147 20.579,21.494 19.891 L 21.600 19.683 21.600 18.000 L 21.600 16.317 21.495 16.109 C 21.121 15.370,20.522 14.779,19.986 14.620 C 19.753 14.550,19.046 14.457,18.480 14.420 L 18.100 14.396 14.500 17.998 M6.554 17.023 C 6.735 17.138,6.884 17.293,6.972 17.460 C 7.084 17.672,7.095 18.348,6.990 18.545 C 6.779 18.940,6.470 19.119,5.998 19.120 C 5.494 19.120,5.203 18.928,4.995 18.458 C 4.876 18.189,4.868 17.726,4.979 17.501 C 5.075 17.307,5.323 17.053,5.493 16.975 C 5.670 16.895,6.403 16.928,6.554 17.023 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.874 2.558 L 3.968 2.580 3.623 2.814 C 3.107 3.165,2.856 3.436,2.610 3.907 L 2.400 4.309 2.400 11.539 L 2.400 18.769 2.661 19.274 C 2.971 19.876,3.210 20.205,3.621 20.596 C 3.978 20.935,4.352 21.186,4.833 21.409 L 5.180 21.570 5.960 21.550 C 6.621 21.532,6.780 21.516,7.000 21.442 C 8.082 21.078,8.977 20.160,9.496 18.882 L 9.600 18.626 9.600 11.452 L 9.600 4.277 9.515 4.108 C 9.267 3.617,8.664 2.976,8.174 2.685 L 7.895 2.520 6.838 2.528 C 6.256 2.532,5.372 2.545,4.874 2.558 M13.723 5.604 C 13.416 5.727,12.731 6.214,12.270 6.639 L 12.000 6.887 12.000 11.992 L 12.000 17.098 12.284 16.819 C 12.671 16.437,16.955 12.054,17.516 11.464 C 18.367 10.569,18.493 10.311,18.494 9.460 C 18.494 9.060,18.479 8.943,18.406 8.755 C 18.245 8.344,17.936 7.967,16.964 6.998 C 15.967 6.004,15.597 5.709,15.224 5.612 C 14.988 5.551,13.871 5.545,13.723 5.604 M14.500 18.000 L 10.900 21.600 15.301 21.600 L 19.702 21.600 20.016 21.421 C 20.700 21.031,21.158 20.557,21.495 19.891 L 21.600 19.683 21.600 18.000 L 21.600 16.317 21.495 16.109 C 21.170 15.465,20.622 14.889,20.134 14.678 C 19.904 14.579,18.658 14.403,18.160 14.400 C 18.127 14.400,16.480 16.020,14.500 18.000 M6.509 17.003 C 6.665 17.063,6.951 17.381,6.997 17.546 C 7.059 17.770,7.051 18.376,6.984 18.538 C 6.892 18.758,6.631 18.988,6.395 19.058 C 5.799 19.235,5.280 19.032,5.031 18.524 C 4.900 18.258,4.880 17.714,4.993 17.496 C 5.115 17.260,5.408 16.994,5.588 16.957 C 5.762 16.921,6.373 16.952,6.509 17.003 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cpp.svg b/packages/icons/svg/cpp.svg
new file mode 100644
index 0000000000..594911a467
--- /dev/null
+++ b/packages/icons/svg/cpp.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.458 2.053 C 11.325 2.087,9.974 2.845,7.518 4.262 C 5.463 5.449,3.709 6.475,3.620 6.542 C 3.398 6.711,3.173 7.048,3.079 7.352 C 3.002 7.601,3.000 7.738,3.000 12.001 C 3.000 16.199,3.003 16.404,3.076 16.636 C 3.162 16.914,3.335 17.202,3.528 17.388 C 3.600 17.458,5.373 18.503,7.466 19.711 C 11.634 22.116,11.472 22.036,12.045 21.988 C 12.237 21.972,12.406 21.926,12.574 21.847 C 12.709 21.782,14.440 20.793,16.420 19.650 C 18.808 18.270,20.090 17.507,20.229 17.382 C 20.374 17.252,20.485 17.100,20.589 16.889 L 20.740 16.584 20.740 12.000 L 20.740 7.416 20.591 7.114 C 20.497 6.924,20.372 6.748,20.251 6.635 C 20.123 6.517,18.825 5.745,16.338 4.310 C 14.290 3.129,12.547 2.134,12.464 2.099 C 12.258 2.013,11.711 1.988,11.458 2.053 M13.043 6.198 C 14.593 6.525,15.929 7.408,16.766 8.656 C 16.960 8.946,16.995 9.021,16.952 9.061 C 16.915 9.096,14.834 10.309,14.476 10.504 C 14.463 10.512,14.395 10.430,14.327 10.324 C 14.160 10.067,13.703 9.640,13.413 9.472 C 12.884 9.164,12.511 9.064,11.880 9.062 C 11.467 9.061,11.328 9.077,11.080 9.154 C 10.068 9.468,9.346 10.191,9.036 11.200 C 8.960 11.445,8.943 11.591,8.943 12.000 C 8.943 12.567,9.021 12.895,9.266 13.365 C 10.082 14.927,12.093 15.436,13.547 14.449 C 13.809 14.271,14.283 13.787,14.381 13.598 L 14.445 13.475 14.572 13.550 C 14.643 13.592,15.195 13.911,15.800 14.259 C 16.405 14.607,16.924 14.914,16.952 14.940 C 16.995 14.979,16.959 15.056,16.766 15.344 C 15.949 16.566,14.586 17.473,13.074 17.802 C 12.591 17.908,11.664 17.947,11.180 17.883 C 8.579 17.539,6.523 15.597,6.055 13.040 C 5.960 12.521,5.960 11.479,6.055 10.960 C 6.519 8.429,8.574 6.469,11.127 6.124 C 11.576 6.064,12.592 6.103,13.043 6.198 M17.160 11.340 L 17.160 11.680 17.480 11.680 L 17.800 11.680 17.800 12.000 L 17.800 12.320 17.480 12.320 L 17.160 12.320 17.160 12.660 L 17.160 13.000 16.820 13.000 L 16.480 13.000 16.480 12.660 L 16.480 12.320 16.160 12.320 L 15.840 12.320 15.840 12.000 L 15.840 11.680 16.160 11.680 L 16.480 11.680 16.480 11.340 L 16.480 11.000 16.820 11.000 L 17.160 11.000 17.160 11.340 M19.608 11.330 L 19.620 11.660 19.950 11.672 L 20.280 11.683 20.280 12.000 L 20.280 12.317 19.950 12.328 L 19.620 12.340 19.608 12.670 L 19.597 13.000 19.278 13.000 L 18.960 13.000 18.960 12.660 L 18.960 12.320 18.640 12.320 L 18.320 12.320 18.320 12.000 L 18.320 11.680 18.640 11.680 L 18.960 11.680 18.960 11.340 L 18.960 11.000 19.278 11.000 L 19.597 11.000 19.608 11.330 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/credit-card.svg b/packages/icons/svg/credit-card.svg
index c296708909..8741d9f167 100644
--- a/packages/icons/svg/credit-card.svg
+++ b/packages/icons/svg/credit-card.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.620 4.961 C 4.268 4.976,3.928 5.010,3.864 5.036 C 3.554 5.161,2.768 5.922,2.633 6.227 C 2.500 6.527,2.441 6.914,2.414 7.670 L 2.387 8.400 12.000 8.400 L 21.613 8.400 21.586 7.766 C 21.555 7.015,21.475 6.508,21.341 6.225 C 21.163 5.850,20.684 5.364,20.242 5.110 C 20.037 4.993,19.992 4.984,19.462 4.955 C 18.764 4.918,5.498 4.923,4.620 4.961 M2.400 14.061 L 2.400 17.322 2.517 17.551 C 2.843 18.192,3.402 18.741,4.069 19.075 L 4.318 19.200 12.020 19.200 L 19.722 19.200 19.951 19.084 C 20.567 18.773,21.151 18.171,21.494 17.491 L 21.600 17.283 21.600 14.041 L 21.600 10.800 12.000 10.800 L 2.400 10.800 2.400 14.061 M7.928 14.720 C 8.250 15.085,8.280 15.160,8.280 15.591 C 8.280 16.040,8.237 16.155,7.967 16.433 C 7.675 16.733,7.561 16.771,6.914 16.792 C 5.973 16.821,5.459 16.704,5.181 16.396 C 4.963 16.154,4.907 15.989,4.903 15.577 C 4.900 15.250,4.910 15.199,5.005 15.057 C 5.140 14.854,5.308 14.689,5.459 14.609 C 5.605 14.533,6.094 14.495,7.028 14.486 L 7.715 14.480 7.928 14.720 M12.728 14.720 C 13.050 15.085,13.080 15.160,13.080 15.591 C 13.080 16.040,13.037 16.155,12.767 16.433 C 12.475 16.733,12.361 16.771,11.714 16.792 C 10.773 16.821,10.259 16.704,9.981 16.396 C 9.763 16.154,9.707 15.989,9.703 15.577 C 9.700 15.250,9.710 15.199,9.805 15.057 C 9.940 14.854,10.108 14.689,10.259 14.609 C 10.405 14.533,10.894 14.495,11.828 14.486 L 12.515 14.480 12.728 14.720 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.200 4.959 C 5.001 4.975,3.975 5.002,3.920 5.020 C 3.624 5.116,2.805 5.880,2.647 6.206 C 2.512 6.484,2.440 6.948,2.412 7.710 L 2.387 8.400 11.994 8.400 L 21.600 8.400 21.600 8.070 C 21.600 7.583,21.525 6.873,21.439 6.535 C 21.347 6.178,21.173 5.902,20.830 5.572 C 20.507 5.263,20.171 5.048,19.930 4.998 C 19.692 4.949,9.250 4.919,6.200 4.959 M2.400 14.070 L 2.400 17.340 2.586 17.669 C 2.909 18.242,3.484 18.780,4.109 19.095 L 4.317 19.200 12.025 19.200 L 19.733 19.200 19.997 19.056 C 20.566 18.744,21.067 18.237,21.422 17.614 L 21.600 17.302 21.600 14.051 L 21.600 10.800 12.000 10.800 L 2.400 10.800 2.400 14.070 M7.882 14.670 C 8.207 15.037,8.253 15.134,8.272 15.493 C 8.296 15.962,8.241 16.124,7.955 16.422 C 7.638 16.752,7.536 16.780,6.660 16.780 C 6.070 16.780,5.943 16.768,5.700 16.691 C 5.357 16.583,5.160 16.426,5.024 16.152 C 4.934 15.971,4.920 15.894,4.920 15.556 L 4.920 15.167 5.077 14.968 C 5.247 14.754,5.402 14.629,5.560 14.579 C 5.696 14.536,6.415 14.494,7.127 14.486 L 7.713 14.480 7.882 14.670 M12.682 14.670 C 13.007 15.037,13.053 15.134,13.072 15.493 C 13.096 15.962,13.041 16.124,12.755 16.422 C 12.438 16.752,12.336 16.780,11.460 16.780 C 10.870 16.780,10.743 16.768,10.500 16.691 C 10.157 16.583,9.960 16.426,9.824 16.152 C 9.734 15.971,9.720 15.894,9.720 15.556 L 9.720 15.167 9.877 14.968 C 10.047 14.754,10.202 14.629,10.360 14.579 C 10.496 14.536,11.215 14.494,11.927 14.486 L 12.513 14.480 12.682 14.670 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/css3.svg b/packages/icons/svg/css3.svg
index 07e16e8335..495096453c 100644
--- a/packages/icons/svg/css3.svg
+++ b/packages/icons/svg/css3.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.016 3.250 C 4.029 3.388,4.311 6.902,4.643 11.059 C 4.974 15.216,5.248 18.621,5.252 18.625 C 5.257 18.628,6.664 19.052,8.380 19.567 L 11.500 20.502 14.620 19.567 C 16.336 19.052,17.743 18.629,17.747 18.626 C 17.750 18.623,18.025 15.218,18.356 11.060 C 18.688 6.902,18.971 3.388,18.984 3.250 L 19.009 3.000 11.500 3.000 L 3.991 3.000 4.016 3.250 M16.481 6.470 C 16.482 6.486,16.415 6.978,16.333 7.563 L 16.184 8.627 14.163 9.403 L 12.142 10.180 14.007 10.190 L 15.872 10.201 15.854 10.350 C 15.844 10.433,15.704 11.757,15.542 13.293 C 15.381 14.830,15.234 16.101,15.215 16.118 C 15.196 16.136,14.352 16.425,13.340 16.762 L 11.501 17.373 9.660 16.762 C 8.648 16.425,7.804 16.136,7.785 16.118 C 7.759 16.094,7.456 13.365,7.441 13.030 C 7.441 13.013,7.861 13.000,8.375 13.000 L 9.310 13.000 9.463 13.779 L 9.617 14.559 10.559 14.873 L 11.500 15.187 12.441 14.873 L 13.383 14.559 13.517 13.470 C 13.590 12.870,13.660 12.313,13.671 12.230 L 13.691 12.080 10.565 12.080 C 8.846 12.080,7.439 12.067,7.439 12.050 C 7.438 12.034,7.368 11.543,7.283 10.960 C 7.198 10.377,7.140 9.890,7.154 9.877 C 7.168 9.864,8.274 9.513,9.611 9.097 L 12.042 8.340 9.581 8.330 C 8.227 8.324,7.120 8.306,7.119 8.290 C 7.119 8.273,7.050 7.850,6.966 7.350 L 6.813 6.440 11.646 6.440 C 14.305 6.440,16.481 6.454,16.481 6.470 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.013 3.270 C 4.027 3.419,4.300 6.816,4.620 10.820 C 4.940 14.824,5.213 18.219,5.226 18.364 L 5.250 18.627 8.375 19.565 L 11.500 20.502 14.620 19.567 C 16.336 19.052,17.743 18.628,17.747 18.625 C 17.754 18.620,19.001 3.098,19.000 3.030 C 19.000 3.014,15.622 3.000,11.494 3.000 L 3.989 3.000 4.013 3.270 M16.454 6.481 C 16.466 6.492,16.410 6.980,16.330 7.564 L 16.185 8.626 14.222 9.379 C 13.143 9.792,12.243 10.147,12.222 10.166 C 12.201 10.185,12.996 10.200,14.031 10.200 L 15.878 10.200 15.859 10.310 C 15.848 10.370,15.758 11.194,15.659 12.140 C 15.370 14.901,15.235 16.057,15.195 16.106 C 15.174 16.131,14.335 16.426,13.329 16.763 L 11.500 17.374 9.672 16.764 C 8.667 16.428,7.827 16.132,7.805 16.106 C 7.784 16.081,7.702 15.475,7.624 14.760 C 7.545 14.045,7.471 13.368,7.458 13.255 C 7.437 13.066,7.443 13.049,7.528 13.026 C 7.578 13.012,8.001 13.001,8.466 13.001 L 9.312 13.000 9.461 13.778 L 9.611 14.557 10.555 14.872 L 11.500 15.187 12.444 14.872 L 13.388 14.557 13.534 13.349 C 13.615 12.684,13.681 12.127,13.680 12.110 C 13.680 12.093,12.298 12.080,10.610 12.079 C 8.921 12.079,7.518 12.065,7.491 12.047 C 7.447 12.020,7.255 10.851,7.177 10.131 C 7.151 9.893,7.154 9.879,7.245 9.845 C 7.297 9.825,8.370 9.487,9.628 9.094 L 11.916 8.380 11.308 8.355 C 10.974 8.342,9.905 8.328,8.932 8.325 C 7.803 8.322,7.156 8.306,7.140 8.280 C 7.126 8.258,7.047 7.834,6.964 7.338 L 6.813 6.435 11.623 6.448 C 14.269 6.454,16.443 6.469,16.454 6.481 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cube-transparent.svg b/packages/icons/svg/cube-transparent.svg
index edd96d8da2..cec0d95160 100644
--- a/packages/icons/svg/cube-transparent.svg
+++ b/packages/icons/svg/cube-transparent.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.660 1.336 C 11.057 1.529,9.336 2.567,9.013 2.934 C 8.650 3.347,8.671 3.924,9.063 4.359 C 9.426 4.760,9.882 4.842,10.454 4.608 C 10.626 4.537,11.044 4.327,11.381 4.140 L 11.995 3.801 12.615 4.141 C 13.644 4.705,14.023 4.825,14.385 4.705 C 14.817 4.561,15.151 4.175,15.244 3.715 C 15.301 3.432,15.247 3.230,15.058 3.009 C 14.755 2.654,13.773 2.012,12.874 1.582 C 12.247 1.281,11.994 1.230,11.660 1.336 M4.540 5.300 C 3.117 6.138,2.603 6.527,2.524 6.822 C 2.419 7.219,2.368 8.795,2.437 9.564 C 2.476 9.999,2.532 10.134,2.772 10.368 C 3.118 10.706,3.550 10.813,3.981 10.667 C 4.324 10.552,4.464 10.401,4.704 9.889 L 4.920 9.431 5.050 9.454 C 5.121 9.467,5.334 9.490,5.523 9.504 C 5.955 9.538,6.215 9.462,6.470 9.226 C 6.738 8.980,6.818 8.798,6.818 8.440 C 6.818 8.070,6.722 7.868,6.357 7.467 L 6.109 7.195 6.269 7.027 C 6.528 6.756,6.750 6.452,6.802 6.295 C 6.876 6.069,6.830 5.678,6.702 5.460 C 6.500 5.116,6.160 4.949,5.560 4.900 L 5.260 4.876 4.540 5.300 M17.700 5.030 C 17.304 5.319,17.135 5.662,17.170 6.105 C 17.195 6.410,17.319 6.624,17.677 6.978 L 17.918 7.216 17.625 7.518 C 17.463 7.684,17.292 7.898,17.243 7.993 C 17.028 8.417,17.210 8.992,17.662 9.317 C 17.986 9.550,18.086 9.573,18.517 9.519 C 19.081 9.449,19.122 9.459,19.216 9.700 C 19.420 10.225,19.472 10.314,19.662 10.451 C 20.214 10.852,20.757 10.828,21.217 10.381 C 21.553 10.054,21.560 10.021,21.557 8.892 C 21.555 8.346,21.542 7.646,21.526 7.336 C 21.500 6.797,21.494 6.765,21.384 6.622 C 21.322 6.540,21.151 6.384,21.005 6.277 C 20.661 6.024,19.655 5.426,19.120 5.156 C 18.705 4.947,18.695 4.944,18.280 4.929 C 17.868 4.913,17.857 4.915,17.700 5.030 M9.562 9.687 C 9.363 9.744,8.870 10.252,8.808 10.465 C 8.747 10.673,8.747 10.927,8.807 11.128 C 8.905 11.455,9.427 11.900,10.310 12.409 L 10.800 12.691 10.801 13.336 C 10.801 14.069,10.854 14.661,10.935 14.851 C 11.015 15.038,11.388 15.389,11.589 15.465 C 11.818 15.553,12.291 15.521,12.539 15.400 C 12.748 15.299,12.942 15.091,13.046 14.856 C 13.135 14.655,13.198 13.973,13.199 13.214 L 13.200 12.688 13.590 12.468 C 14.882 11.736,15.277 11.319,15.230 10.736 C 15.187 10.200,14.783 9.766,14.264 9.694 C 14.004 9.659,13.660 9.779,12.770 10.217 L 12.000 10.596 11.190 10.197 C 10.404 9.810,9.962 9.636,9.786 9.644 C 9.739 9.646,9.638 9.665,9.562 9.687 M2.968 13.470 C 2.724 13.654,2.588 13.825,2.498 14.060 C 2.443 14.203,2.436 14.423,2.448 15.643 C 2.463 17.269,2.464 17.270,2.811 17.583 C 3.457 18.163,5.141 19.084,5.673 19.147 C 6.089 19.196,6.653 18.782,6.784 18.331 C 6.873 18.025,6.841 17.686,6.704 17.479 C 6.568 17.273,5.993 16.833,5.341 16.436 L 4.813 16.115 4.786 15.115 C 4.767 14.374,4.745 14.088,4.703 14.008 C 4.603 13.817,4.358 13.562,4.167 13.450 C 4.005 13.355,3.929 13.339,3.580 13.326 L 3.179 13.312 2.968 13.470 M19.889 13.383 C 19.676 13.493,19.449 13.750,19.363 13.980 C 19.251 14.279,19.200 14.753,19.200 15.483 L 19.200 16.108 18.750 16.381 C 17.352 17.229,17.039 17.572,17.157 18.126 C 17.250 18.560,17.464 18.845,17.848 19.047 C 18.247 19.256,18.713 19.134,19.725 18.554 C 20.656 18.020,21.186 17.624,21.447 17.264 L 21.560 17.108 21.560 15.612 C 21.560 14.305,21.552 14.100,21.495 13.988 C 21.268 13.545,20.962 13.364,20.393 13.335 C 20.095 13.320,19.994 13.329,19.889 13.383 M11.460 18.184 C 11.180 18.337,11.020 18.567,10.847 19.068 L 10.739 19.380 10.419 19.360 C 9.493 19.302,9.372 19.334,8.990 19.733 L 8.760 19.975 8.760 20.277 C 8.761 20.673,8.814 20.851,8.989 21.045 C 9.423 21.525,10.888 22.403,11.720 22.681 C 11.952 22.759,12.003 22.763,12.194 22.720 C 12.499 22.652,13.529 22.120,14.140 21.715 C 15.034 21.123,15.237 20.886,15.239 20.437 C 15.240 20.107,15.139 19.855,14.913 19.629 C 14.648 19.364,14.494 19.305,14.100 19.319 C 13.924 19.325,13.664 19.333,13.522 19.335 L 13.263 19.340 13.159 19.060 C 12.976 18.570,12.830 18.377,12.520 18.217 C 12.320 18.113,11.629 18.092,11.460 18.184 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.760 1.308 C 11.396 1.372,9.771 2.303,9.168 2.793 C 8.786 3.104,8.658 3.590,8.849 4.007 C 9.116 4.590,9.639 4.842,10.243 4.679 C 10.431 4.628,11.099 4.303,11.643 3.996 L 11.987 3.802 12.571 4.117 C 13.774 4.763,14.116 4.853,14.544 4.630 C 15.015 4.386,15.354 3.774,15.245 3.366 C 15.219 3.268,15.143 3.119,15.076 3.035 C 14.631 2.473,12.473 1.259,11.966 1.285 C 11.908 1.288,11.815 1.299,11.760 1.308 M4.374 5.405 C 3.053 6.197,2.601 6.546,2.521 6.833 C 2.445 7.111,2.389 8.181,2.412 8.960 C 2.440 9.950,2.473 10.070,2.798 10.371 C 3.162 10.709,3.577 10.805,4.018 10.654 C 4.291 10.561,4.480 10.345,4.719 9.854 C 4.915 9.450,4.930 9.432,5.033 9.453 C 5.377 9.521,5.834 9.527,6.046 9.466 C 6.510 9.331,6.812 8.925,6.812 8.438 C 6.812 8.090,6.696 7.843,6.358 7.470 L 6.113 7.199 6.323 6.970 C 6.795 6.453,6.906 6.163,6.801 5.724 C 6.729 5.422,6.568 5.228,6.272 5.085 C 6.050 4.978,5.596 4.880,5.321 4.880 C 5.281 4.880,4.855 5.116,4.374 5.405 M17.650 5.076 C 17.293 5.358,17.126 5.725,17.172 6.119 C 17.205 6.395,17.322 6.600,17.637 6.932 L 17.911 7.220 17.620 7.528 C 17.237 7.934,17.143 8.127,17.169 8.455 C 17.194 8.766,17.298 8.971,17.549 9.206 C 17.903 9.537,18.037 9.576,18.608 9.514 C 18.944 9.477,19.049 9.478,19.096 9.516 C 19.128 9.543,19.212 9.704,19.282 9.873 C 19.458 10.299,19.554 10.412,19.885 10.577 C 20.384 10.826,20.811 10.759,21.213 10.368 C 21.544 10.046,21.538 10.070,21.552 8.940 C 21.559 8.390,21.548 7.677,21.528 7.354 C 21.486 6.676,21.470 6.640,21.070 6.332 C 20.744 6.082,19.688 5.449,19.140 5.175 C 18.711 4.962,18.689 4.955,18.280 4.933 L 17.860 4.909 17.650 5.076 M9.572 9.684 C 9.425 9.727,8.961 10.167,8.854 10.366 C 8.803 10.461,8.781 10.588,8.781 10.800 C 8.780 11.057,8.796 11.127,8.892 11.290 C 9.067 11.588,9.634 12.027,10.430 12.479 L 10.800 12.689 10.800 13.326 C 10.800 14.064,10.859 14.683,10.948 14.871 C 11.040 15.066,11.464 15.433,11.657 15.485 C 11.749 15.510,11.933 15.519,12.078 15.505 C 12.552 15.462,12.919 15.201,13.057 14.808 C 13.136 14.584,13.200 13.882,13.200 13.239 L 13.200 12.691 13.699 12.404 C 14.879 11.725,15.292 11.268,15.227 10.716 C 15.158 10.137,14.697 9.700,14.160 9.706 C 13.888 9.710,13.532 9.844,12.651 10.277 L 12.002 10.595 11.231 10.222 C 10.431 9.835,9.938 9.637,9.788 9.644 C 9.739 9.646,9.642 9.664,9.572 9.684 M3.060 13.402 C 2.823 13.583,2.632 13.783,2.547 13.940 C 2.462 14.096,2.460 14.138,2.461 15.540 C 2.463 17.238,2.464 17.242,2.791 17.554 C 3.280 18.020,4.770 18.879,5.444 19.084 C 5.700 19.162,5.758 19.167,5.918 19.125 C 6.254 19.036,6.561 18.781,6.742 18.440 C 6.858 18.220,6.848 17.749,6.722 17.530 C 6.579 17.280,6.027 16.855,5.156 16.326 L 4.813 16.117 4.787 15.168 C 4.774 14.647,4.745 14.160,4.723 14.086 C 4.668 13.899,4.440 13.634,4.205 13.483 C 4.024 13.367,3.970 13.354,3.593 13.333 C 3.206 13.312,3.172 13.316,3.060 13.402 M19.898 13.395 C 19.674 13.497,19.412 13.807,19.339 14.057 C 19.244 14.383,19.203 14.816,19.201 15.485 L 19.200 16.109 18.850 16.322 C 17.614 17.074,17.227 17.414,17.142 17.826 C 17.085 18.096,17.310 18.644,17.565 18.858 C 17.924 19.160,18.286 19.210,18.780 19.023 C 19.333 18.814,20.627 18.044,21.075 17.657 C 21.171 17.574,21.319 17.417,21.405 17.309 L 21.560 17.113 21.558 15.646 C 21.557 14.558,21.543 14.143,21.505 14.036 C 21.374 13.669,21.044 13.429,20.576 13.361 C 20.191 13.306,20.083 13.311,19.898 13.395 M11.575 18.156 C 11.264 18.236,11.085 18.452,10.881 18.992 L 10.739 19.368 10.131 19.362 C 9.417 19.355,9.385 19.366,9.010 19.733 L 8.760 19.978 8.760 20.251 C 8.760 20.698,8.822 20.868,9.077 21.121 C 9.702 21.740,11.513 22.732,12.020 22.732 C 12.357 22.732,13.278 22.281,14.240 21.644 C 14.824 21.258,15.127 20.961,15.198 20.706 C 15.342 20.194,15.061 19.609,14.568 19.391 C 14.411 19.321,14.320 19.313,13.827 19.326 L 13.265 19.340 13.132 18.996 C 12.893 18.382,12.630 18.176,12.039 18.142 C 11.853 18.132,11.644 18.138,11.575 18.156 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cube.svg b/packages/icons/svg/cube.svg
index daac876df7..00e05d8f01 100644
--- a/packages/icons/svg/cube.svg
+++ b/packages/icons/svg/cube.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.680 2.527 C 11.568 2.546,10.636 2.989,9.220 3.697 C 6.177 5.218,5.755 5.445,5.477 5.720 C 5.000 6.190,5.002 6.737,5.482 7.200 C 5.607 7.321,5.851 7.504,6.025 7.606 C 6.813 8.072,10.790 10.057,11.499 10.339 C 11.740 10.435,11.816 10.447,12.046 10.428 C 12.193 10.415,12.436 10.357,12.587 10.297 C 13.319 10.007,17.081 8.130,18.055 7.569 C 18.631 7.237,18.818 6.959,18.818 6.440 C 18.818 5.947,18.649 5.725,17.974 5.335 C 17.480 5.050,12.994 2.819,12.639 2.682 C 12.266 2.538,11.933 2.485,11.680 2.527 M4.333 10.060 C 4.212 10.121,4.016 10.280,3.863 10.443 L 3.600 10.721 3.605 13.371 C 3.607 14.828,3.621 16.564,3.635 17.229 L 3.660 18.437 3.860 18.640 C 4.141 18.925,4.456 19.124,5.440 19.641 C 6.547 20.222,8.661 21.271,9.066 21.441 C 9.624 21.674,9.978 21.583,10.507 21.070 L 10.807 20.780 10.789 17.040 C 10.775 14.177,10.759 13.260,10.720 13.129 C 10.653 12.902,10.363 12.644,9.838 12.345 C 9.296 12.035,7.021 10.880,6.176 10.485 C 5.390 10.117,5.116 10.019,4.780 9.982 C 4.571 9.959,4.514 9.969,4.333 10.060 M17.040 10.842 C 14.487 12.140,13.719 12.570,13.449 12.850 C 13.355 12.948,13.305 13.048,13.275 13.203 C 13.248 13.340,13.225 14.742,13.213 17.024 L 13.192 20.628 13.279 20.799 C 13.397 21.030,13.697 21.313,13.943 21.426 C 14.238 21.562,14.468 21.583,14.725 21.500 C 15.243 21.331,19.133 19.384,19.686 19.016 C 20.085 18.751,20.303 18.525,20.337 18.340 C 20.384 18.090,20.369 11.052,20.321 10.802 C 20.269 10.531,20.207 10.435,19.969 10.260 C 19.737 10.089,19.500 10.013,19.093 9.981 L 18.780 9.957 17.040 10.842 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.119 2.775 C 9.448 3.564,6.253 5.181,5.827 5.454 C 5.221 5.841,4.997 6.320,5.201 6.794 C 5.326 7.085,5.728 7.446,6.247 7.735 C 6.896 8.096,10.811 10.044,11.305 10.252 C 12.056 10.568,12.081 10.562,14.137 9.571 C 15.423 8.951,17.559 7.860,18.038 7.578 C 18.609 7.243,18.804 6.961,18.809 6.463 C 18.814 5.944,18.651 5.731,17.940 5.323 C 17.544 5.096,13.271 2.964,12.815 2.765 C 12.448 2.606,12.114 2.520,11.861 2.520 C 11.695 2.520,11.560 2.566,11.119 2.775 M4.460 10.009 C 4.297 10.066,4.020 10.273,3.784 10.515 L 3.588 10.715 3.610 14.562 L 3.632 18.408 3.806 18.588 C 4.055 18.845,4.381 19.067,5.020 19.418 C 5.895 19.899,8.901 21.387,9.190 21.483 C 9.682 21.647,10.001 21.544,10.523 21.052 L 10.800 20.790 10.796 18.025 C 10.794 16.504,10.781 14.780,10.766 14.193 L 10.740 13.127 10.618 12.954 C 10.546 12.851,10.358 12.688,10.158 12.553 C 9.495 12.108,5.925 10.319,5.270 10.104 C 4.914 9.987,4.619 9.953,4.460 10.009 M17.340 10.684 C 14.647 12.065,13.829 12.517,13.518 12.794 C 13.231 13.049,13.240 12.920,13.212 17.000 C 13.184 21.148,13.149 20.749,13.574 21.151 C 13.962 21.518,14.336 21.623,14.751 21.483 C 15.312 21.294,18.996 19.450,19.645 19.034 C 20.020 18.794,20.306 18.498,20.340 18.315 C 20.353 18.241,20.359 16.515,20.352 14.480 L 20.340 10.780 20.240 10.582 C 20.061 10.227,19.653 10.025,19.040 9.985 L 18.740 9.966 17.340 10.684 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/currency-bangladesh.svg b/packages/icons/svg/currency-bangladesh.svg
index 84c326e1b4..c4721471ac 100644
--- a/packages/icons/svg/currency-bangladesh.svg
+++ b/packages/icons/svg/currency-bangladesh.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M8.806 4.921 C 9.664 5.007,10.166 5.256,10.892 5.956 C 11.645 6.681,11.796 7.074,11.939 8.680 C 11.973 9.065,12.010 9.419,12.021 9.467 C 12.046 9.583,12.111 9.592,13.080 9.620 C 14.466 9.660,15.770 9.724,15.976 9.763 C 16.232 9.812,16.415 9.955,16.549 10.212 C 16.645 10.397,16.658 10.465,16.659 10.820 C 16.660 11.183,16.650 11.237,16.554 11.400 C 16.417 11.631,16.260 11.779,16.065 11.861 C 15.853 11.949,14.866 11.998,13.265 11.999 L 11.989 12.000 12.014 13.790 C 12.027 14.775,12.055 15.685,12.076 15.813 C 12.120 16.082,12.281 16.318,12.583 16.553 C 12.764 16.694,12.786 16.701,13.136 16.713 C 13.473 16.725,13.516 16.718,13.720 16.611 C 13.978 16.476,14.213 16.191,14.277 15.935 C 14.301 15.840,14.366 15.389,14.422 14.931 C 14.513 14.186,14.536 14.073,14.651 13.842 C 14.754 13.635,14.819 13.559,14.977 13.462 C 15.162 13.347,15.197 13.340,15.577 13.341 C 15.914 13.342,16.007 13.356,16.145 13.429 C 16.334 13.529,16.712 13.934,16.747 14.073 C 16.783 14.218,16.685 15.961,16.619 16.339 C 16.484 17.114,16.116 17.718,15.400 18.344 C 14.988 18.704,14.562 18.933,14.115 19.036 C 13.152 19.258,12.188 19.140,11.463 18.712 C 10.649 18.231,9.869 17.132,9.761 16.313 C 9.717 15.979,9.655 14.589,9.616 13.056 L 9.589 12.011 8.944 11.988 C 8.080 11.957,7.927 11.913,7.636 11.612 C 7.379 11.346,7.320 11.196,7.320 10.800 C 7.320 10.336,7.436 10.085,7.747 9.869 C 7.925 9.746,8.375 9.665,9.150 9.618 L 9.600 9.591 9.599 9.186 C 9.598 8.963,9.580 8.645,9.559 8.480 C 9.463 7.744,9.301 7.564,8.420 7.219 C 7.785 6.971,7.579 6.844,7.436 6.614 C 7.350 6.476,7.340 6.415,7.340 6.020 C 7.341 5.611,7.348 5.567,7.453 5.389 C 7.581 5.170,7.801 5.009,8.072 4.936 C 8.310 4.872,8.311 4.872,8.806 4.921 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M9.180 4.980 C 9.578 5.055,9.881 5.178,10.212 5.400 C 10.625 5.676,11.165 6.197,11.394 6.539 C 11.714 7.018,11.820 7.442,11.940 8.740 C 11.975 9.114,12.011 9.443,12.021 9.471 C 12.055 9.572,12.249 9.594,13.503 9.638 C 14.205 9.663,15.059 9.701,15.400 9.722 C 16.164 9.770,16.310 9.828,16.510 10.160 C 16.636 10.369,16.640 10.391,16.640 10.819 C 16.640 11.259,16.639 11.262,16.499 11.471 C 16.310 11.751,16.124 11.867,15.780 11.922 C 15.626 11.946,14.713 11.976,13.750 11.988 L 12.000 12.011 12.003 13.095 C 12.004 13.692,12.019 14.560,12.036 15.024 C 12.072 16.014,12.099 16.101,12.479 16.452 C 12.732 16.687,12.824 16.720,13.226 16.720 C 13.541 16.720,13.701 16.656,13.941 16.435 C 14.234 16.165,14.272 16.054,14.402 15.095 C 14.465 14.624,14.536 14.171,14.559 14.089 C 14.625 13.849,14.768 13.633,14.953 13.492 C 15.125 13.361,15.129 13.360,15.576 13.360 C 16.015 13.360,16.031 13.363,16.217 13.487 C 16.426 13.625,16.707 13.952,16.744 14.101 C 16.770 14.207,16.698 15.594,16.637 16.136 C 16.564 16.792,16.303 17.380,15.869 17.867 C 15.032 18.805,14.321 19.137,13.160 19.132 C 12.542 19.129,12.176 19.052,11.689 18.821 C 11.035 18.511,10.420 17.875,10.035 17.110 C 9.817 16.677,9.768 16.450,9.721 15.665 C 9.678 14.947,9.601 12.783,9.600 12.296 L 9.600 12.013 8.950 11.988 C 8.557 11.973,8.220 11.939,8.098 11.902 C 7.853 11.829,7.597 11.617,7.450 11.367 C 7.351 11.198,7.340 11.143,7.340 10.800 C 7.341 9.968,7.640 9.746,8.900 9.641 C 9.164 9.619,9.432 9.601,9.496 9.600 L 9.611 9.600 9.588 8.990 C 9.545 7.879,9.415 7.649,8.642 7.318 C 7.840 6.975,7.603 6.843,7.478 6.671 C 7.363 6.512,7.360 6.497,7.360 6.020 C 7.360 5.544,7.363 5.528,7.477 5.370 C 7.812 4.908,8.255 4.806,9.180 4.980 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/currency-dollar.svg b/packages/icons/svg/currency-dollar.svg
index 0c092efc86..e6e7d8da55 100644
--- a/packages/icons/svg/currency-dollar.svg
+++ b/packages/icons/svg/currency-dollar.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.840 2.560 C 9.939 2.622,8.886 2.934,7.820 3.457 C 5.541 4.576,3.983 6.288,3.068 8.680 C 2.598 9.907,2.459 10.677,2.463 12.020 C 2.466 13.214,2.574 13.889,2.945 15.020 C 3.821 17.694,5.951 19.900,8.660 20.940 C 9.932 21.428,10.740 21.549,12.460 21.508 C 13.202 21.490,13.415 21.470,13.820 21.383 C 15.776 20.962,17.218 20.195,18.632 18.822 C 19.531 17.950,20.066 17.231,20.537 16.264 C 21.024 15.266,21.353 14.262,21.460 13.448 C 21.531 12.915,21.542 11.198,21.479 10.679 C 21.372 9.809,21.014 8.705,20.516 7.708 C 19.770 6.216,18.610 4.926,17.190 4.008 C 16.734 3.713,15.748 3.227,15.187 3.021 C 14.608 2.808,13.919 2.645,13.420 2.603 C 12.803 2.550,11.341 2.526,10.840 2.560 M12.460 4.979 C 12.747 5.096,12.972 5.385,13.142 5.856 L 13.231 6.100 13.725 6.281 C 14.667 6.625,15.331 7.004,15.782 7.455 C 16.144 7.816,16.178 7.898,16.179 8.404 C 16.180 8.824,16.178 8.831,16.040 9.036 C 15.781 9.421,15.327 9.622,14.938 9.524 C 14.700 9.464,14.511 9.367,13.841 8.964 C 13.545 8.785,13.284 8.645,13.261 8.653 C 13.214 8.669,13.181 10.332,13.220 10.667 L 13.245 10.874 13.632 11.023 C 14.623 11.404,15.388 11.866,15.865 12.373 C 16.215 12.745,16.399 13.028,16.554 13.430 C 16.652 13.686,16.657 13.740,16.659 14.460 L 16.660 15.220 16.529 15.496 C 16.186 16.222,15.527 16.887,14.737 17.307 C 14.548 17.408,14.132 17.584,13.811 17.700 L 13.228 17.910 13.138 18.149 C 12.960 18.621,12.753 18.901,12.476 19.042 C 12.118 19.225,11.595 19.166,11.309 18.911 C 11.128 18.751,10.916 18.399,10.826 18.113 L 10.759 17.899 10.300 17.744 C 9.724 17.550,9.054 17.226,8.732 16.987 C 8.346 16.701,7.969 16.310,7.870 16.094 C 7.753 15.840,7.746 15.332,7.857 15.120 C 8.051 14.747,8.336 14.542,8.727 14.496 C 9.058 14.457,9.297 14.548,10.058 14.998 C 10.431 15.219,10.750 15.400,10.768 15.400 C 10.786 15.400,10.800 14.882,10.800 14.250 L 10.800 13.099 10.365 12.965 C 10.126 12.892,9.792 12.771,9.622 12.697 C 8.717 12.304,7.694 11.316,7.440 10.591 C 7.241 10.022,7.252 9.054,7.463 8.552 C 7.749 7.874,8.308 7.259,9.026 6.834 C 9.375 6.627,10.027 6.340,10.469 6.198 C 10.736 6.112,10.763 6.093,10.805 5.962 C 10.968 5.459,11.233 5.095,11.537 4.955 C 11.672 4.893,11.755 4.884,12.020 4.905 C 12.196 4.919,12.394 4.952,12.460 4.979 M10.440 8.775 C 10.297 8.871,10.059 9.062,9.910 9.199 C 9.675 9.415,9.640 9.465,9.640 9.588 C 9.640 9.712,9.680 9.769,9.950 10.037 C 10.255 10.340,10.557 10.534,10.662 10.494 C 10.753 10.459,10.800 10.099,10.799 9.428 C 10.799 8.806,10.780 8.600,10.725 8.600 C 10.711 8.600,10.582 8.679,10.440 8.775 M13.200 14.403 L 13.200 15.405 13.290 15.379 C 13.559 15.298,14.142 14.829,14.262 14.596 C 14.374 14.380,14.339 14.254,14.105 14.020 C 13.907 13.821,13.315 13.400,13.235 13.400 C 13.216 13.400,13.200 13.851,13.200 14.403 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.357 2.619 C 9.421 2.772,8.459 3.116,7.425 3.669 C 5.234 4.841,3.706 6.704,2.888 9.200 C 2.595 10.093,2.536 10.403,2.480 11.340 C 2.385 12.941,2.612 14.291,3.223 15.749 C 3.911 17.392,5.214 18.934,6.796 19.977 C 7.536 20.465,8.205 20.787,9.133 21.102 C 10.149 21.447,10.920 21.543,12.380 21.507 C 13.133 21.488,13.426 21.465,13.740 21.399 C 15.375 21.055,16.676 20.456,17.880 19.492 C 18.303 19.153,19.186 18.279,19.507 17.880 C 20.313 16.879,20.949 15.579,21.303 14.209 C 21.489 13.488,21.533 12.931,21.509 11.640 C 21.486 10.471,21.454 10.250,21.176 9.360 C 20.668 7.734,19.875 6.401,18.736 5.265 C 17.981 4.512,17.298 4.025,16.300 3.528 C 15.287 3.024,14.692 2.815,13.820 2.657 C 13.312 2.565,10.853 2.538,10.357 2.619 M12.554 5.037 C 12.766 5.145,12.967 5.418,13.116 5.800 L 13.233 6.100 13.684 6.268 C 14.630 6.620,15.313 7.008,15.778 7.456 C 16.118 7.785,16.160 7.892,16.160 8.420 C 16.160 8.797,16.150 8.858,16.063 8.995 C 15.915 9.229,15.650 9.435,15.401 9.507 C 15.015 9.620,14.893 9.575,13.661 8.864 C 13.486 8.763,13.322 8.680,13.297 8.680 C 13.233 8.680,13.201 9.097,13.201 9.900 C 13.201 10.920,13.168 10.840,13.675 11.043 C 15.215 11.658,16.149 12.423,16.526 13.379 C 16.634 13.653,16.637 13.681,16.639 14.467 L 16.640 15.274 16.501 15.540 C 16.292 15.941,16.044 16.267,15.695 16.601 C 15.151 17.119,14.737 17.357,13.742 17.723 C 13.242 17.906,13.222 17.918,13.174 18.057 C 13.074 18.344,12.827 18.762,12.677 18.898 C 12.287 19.250,11.593 19.218,11.238 18.832 C 11.080 18.661,10.907 18.353,10.824 18.098 L 10.759 17.895 10.469 17.802 C 10.042 17.665,9.339 17.359,9.020 17.171 C 8.511 16.872,7.919 16.285,7.840 16.002 C 7.818 15.924,7.800 15.726,7.800 15.563 C 7.800 15.205,7.887 14.995,8.127 14.779 C 8.348 14.579,8.533 14.508,8.840 14.504 C 9.145 14.499,9.368 14.595,10.218 15.092 C 10.503 15.259,10.750 15.386,10.768 15.375 C 10.786 15.364,10.800 14.846,10.800 14.224 L 10.800 13.092 10.490 13.003 C 9.329 12.666,8.493 12.116,7.827 11.249 C 7.439 10.744,7.321 10.360,7.321 9.600 C 7.321 9.041,7.382 8.712,7.545 8.389 C 8.028 7.435,8.850 6.797,10.282 6.266 C 10.529 6.174,10.746 6.073,10.763 6.040 C 10.780 6.007,10.850 5.854,10.919 5.701 C 11.127 5.236,11.386 4.969,11.673 4.922 C 11.908 4.884,12.372 4.944,12.554 5.037 M10.413 8.796 C 9.995 9.090,9.640 9.441,9.640 9.562 C 9.640 9.709,9.810 9.933,10.106 10.178 C 10.451 10.462,10.600 10.536,10.676 10.461 C 10.761 10.376,10.795 10.081,10.797 9.400 C 10.799 8.795,10.781 8.600,10.722 8.600 C 10.706 8.600,10.567 8.688,10.413 8.796 M13.224 13.464 C 13.211 13.498,13.200 13.949,13.200 14.466 L 13.200 15.405 13.290 15.379 C 13.430 15.338,13.794 15.089,14.011 14.886 C 14.469 14.457,14.428 14.249,13.788 13.767 C 13.325 13.418,13.256 13.381,13.224 13.464 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/currency-euro.svg b/packages/icons/svg/currency-euro.svg
index 848973f767..ecf0001d41 100644
--- a/packages/icons/svg/currency-euro.svg
+++ b/packages/icons/svg/currency-euro.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M13.361 5.164 C 14.204 5.574,15.124 6.425,15.491 7.135 C 15.606 7.359,15.617 7.413,15.618 7.760 C 15.620 8.050,15.603 8.171,15.549 8.269 C 15.372 8.595,14.963 8.860,14.566 8.907 C 14.276 8.941,14.105 8.840,13.518 8.290 C 12.994 7.800,12.695 7.544,12.511 7.428 C 12.348 7.325,11.682 7.334,11.445 7.441 C 11.136 7.581,10.524 8.285,10.258 8.805 L 10.164 8.989 10.752 9.016 C 11.909 9.069,12.323 9.117,12.546 9.223 C 12.784 9.337,12.947 9.530,13.025 9.790 C 13.091 10.009,13.096 10.400,13.036 10.616 C 12.988 10.790,12.654 11.170,12.463 11.269 C 12.313 11.346,11.540 11.395,10.430 11.398 L 9.600 11.400 9.600 11.993 L 9.600 12.586 10.730 12.636 C 12.398 12.709,12.526 12.732,12.793 13.005 C 12.998 13.215,13.080 13.426,13.080 13.743 C 13.080 14.096,13.035 14.248,12.854 14.512 C 12.623 14.847,12.460 14.920,11.850 14.962 C 11.570 14.981,11.073 14.998,10.746 14.999 L 10.153 15.000 10.301 15.270 C 10.652 15.908,11.256 16.533,11.651 16.664 C 11.913 16.751,12.208 16.743,12.413 16.643 C 12.505 16.598,12.930 16.246,13.359 15.861 L 14.138 15.160 14.499 15.160 C 15.031 15.161,15.331 15.316,15.524 15.690 C 15.626 15.887,15.660 16.249,15.603 16.524 C 15.522 16.915,15.314 17.206,14.600 17.925 C 13.997 18.532,13.911 18.604,13.600 18.755 C 12.962 19.067,12.202 19.202,11.546 19.121 C 10.937 19.045,10.262 18.746,9.805 18.350 C 9.395 17.994,8.786 17.317,8.613 17.025 C 8.386 16.642,7.727 15.332,7.676 15.163 L 7.631 15.011 7.365 14.987 C 6.794 14.937,6.426 14.738,6.242 14.381 C 6.108 14.121,6.077 13.605,6.179 13.338 C 6.265 13.112,6.515 12.891,6.900 12.701 L 7.200 12.553 7.200 12.019 L 7.200 11.484 6.910 11.333 C 6.522 11.131,6.229 10.839,6.167 10.592 C 6.059 10.162,6.146 9.665,6.371 9.428 C 6.517 9.274,6.816 9.150,7.287 9.048 L 7.602 8.980 7.794 8.560 C 8.038 8.029,8.560 7.056,8.771 6.741 C 8.859 6.608,9.123 6.310,9.356 6.077 C 9.787 5.647,10.195 5.366,10.811 5.077 L 11.060 4.960 12.021 4.970 L 12.981 4.980 13.361 5.164 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M13.339 5.155 C 13.997 5.481,14.740 6.090,15.158 6.644 C 15.553 7.168,15.600 7.286,15.600 7.761 C 15.600 8.235,15.569 8.312,15.278 8.574 C 15.076 8.756,14.686 8.921,14.466 8.919 C 14.301 8.917,14.057 8.769,13.707 8.456 C 13.513 8.282,13.198 8.001,13.007 7.830 C 12.566 7.436,12.414 7.360,12.069 7.360 C 11.571 7.360,11.427 7.415,11.093 7.731 C 10.758 8.050,10.460 8.429,10.278 8.770 L 10.155 9.000 10.328 9.000 C 10.660 9.001,11.823 9.081,12.120 9.125 C 12.569 9.190,12.802 9.336,12.971 9.660 C 13.087 9.881,13.096 10.514,12.987 10.715 C 12.876 10.918,12.596 11.205,12.449 11.267 C 12.261 11.346,11.478 11.398,10.470 11.399 L 9.600 11.400 9.600 11.995 L 9.600 12.590 10.250 12.617 C 11.312 12.662,12.127 12.718,12.345 12.762 C 12.589 12.811,12.840 13.009,12.971 13.254 C 13.043 13.390,13.059 13.486,13.060 13.780 C 13.060 14.103,13.048 14.161,12.943 14.351 C 12.779 14.647,12.590 14.829,12.389 14.883 C 12.130 14.953,11.529 14.997,10.809 14.999 L 10.158 15.000 10.244 15.170 C 10.506 15.686,11.155 16.414,11.517 16.599 C 11.734 16.709,12.096 16.747,12.297 16.681 C 12.474 16.623,12.825 16.343,13.580 15.660 L 14.140 15.154 14.520 15.172 C 14.969 15.193,15.188 15.270,15.364 15.471 C 15.558 15.691,15.613 15.860,15.612 16.220 C 15.609 16.744,15.487 16.973,14.824 17.696 C 14.240 18.332,13.853 18.650,13.465 18.812 C 12.258 19.318,11.108 19.234,10.100 18.566 C 9.766 18.345,9.132 17.714,8.798 17.271 C 8.573 16.973,7.640 15.195,7.640 15.064 C 7.640 15.028,7.552 15.003,7.360 14.985 C 6.873 14.940,6.490 14.752,6.305 14.466 C 6.099 14.148,6.066 13.502,6.241 13.219 C 6.340 13.057,6.608 12.856,6.950 12.684 L 7.200 12.559 7.200 12.022 L 7.200 11.484 6.928 11.341 C 6.640 11.190,6.315 10.900,6.208 10.700 C 6.115 10.526,6.118 9.958,6.213 9.712 C 6.343 9.373,6.588 9.218,7.230 9.067 L 7.600 8.980 7.791 8.580 C 8.105 7.922,8.556 7.078,8.749 6.787 C 8.999 6.410,9.637 5.780,10.042 5.511 C 10.228 5.388,10.533 5.211,10.720 5.120 L 11.060 4.953 12.035 4.972 L 13.011 4.992 13.339 5.155 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/currency-pound.svg b/packages/icons/svg/currency-pound.svg
index 9f7d3c9e13..cca511c77e 100644
--- a/packages/icons/svg/currency-pound.svg
+++ b/packages/icons/svg/currency-pound.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M13.600 4.958 C 14.263 4.995,14.534 5.076,15.020 5.379 C 15.797 5.864,16.497 6.798,16.596 7.480 C 16.668 7.976,16.690 8.656,16.640 8.843 C 16.511 9.323,15.768 9.679,15.259 9.506 C 14.867 9.372,14.697 9.139,14.366 8.286 C 14.167 7.773,14.050 7.592,13.831 7.464 C 13.600 7.329,13.130 7.256,12.903 7.319 C 12.668 7.385,12.229 7.717,12.146 7.892 C 12.054 8.086,12.002 8.810,12.001 9.906 L 12.000 10.792 12.470 10.821 C 13.824 10.903,14.150 11.076,14.247 11.766 C 14.328 12.348,14.224 12.659,13.857 12.940 C 13.615 13.124,13.445 13.160,12.696 13.187 C 12.058 13.211,12.000 13.219,12.000 13.286 C 12.000 13.326,11.972 13.745,11.938 14.218 C 11.904 14.691,11.881 15.171,11.888 15.286 C 11.899 15.478,11.909 15.497,12.016 15.526 C 12.080 15.543,12.836 15.584,13.696 15.617 C 16.273 15.718,16.198 15.704,16.495 16.129 C 16.647 16.347,16.656 16.377,16.672 16.709 C 16.695 17.189,16.644 17.352,16.387 17.615 C 16.212 17.794,16.141 17.838,15.958 17.878 C 15.660 17.943,13.248 17.996,10.448 17.998 C 7.871 18.000,8.056 18.021,7.707 17.686 C 7.396 17.387,7.340 17.249,7.340 16.780 C 7.340 16.130,7.457 15.985,8.230 15.678 C 9.069 15.344,9.319 15.184,9.446 14.896 C 9.532 14.701,9.598 14.140,9.599 13.596 L 9.600 13.212 8.950 13.188 C 8.079 13.157,7.927 13.113,7.635 12.811 C 7.359 12.525,7.302 12.357,7.330 11.898 C 7.355 11.497,7.450 11.298,7.709 11.108 C 7.935 10.943,8.109 10.905,8.974 10.835 C 9.327 10.807,9.573 10.770,9.581 10.744 C 9.588 10.720,9.623 10.070,9.659 9.299 C 9.738 7.574,9.757 7.433,9.959 7.010 C 10.355 6.180,10.977 5.546,11.773 5.161 C 12.292 4.910,12.450 4.892,13.600 4.958 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M13.510 4.960 C 14.172 5.005,14.370 5.047,14.700 5.211 C 15.440 5.580,16.065 6.217,16.418 6.964 C 16.585 7.316,16.641 7.654,16.649 8.366 C 16.655 8.856,16.652 8.878,16.546 9.038 C 16.414 9.237,16.140 9.420,15.844 9.506 C 15.357 9.648,14.898 9.425,14.641 8.922 C 14.598 8.837,14.481 8.567,14.381 8.323 C 14.147 7.746,14.044 7.597,13.788 7.457 C 13.616 7.364,13.519 7.341,13.232 7.327 C 12.909 7.312,12.870 7.318,12.697 7.420 C 12.436 7.572,12.198 7.797,12.134 7.948 C 12.052 8.144,12.001 8.887,12.000 9.886 L 12.000 10.792 12.430 10.821 C 13.806 10.911,14.128 11.082,14.240 11.780 C 14.323 12.291,14.205 12.660,13.877 12.919 C 13.631 13.113,13.449 13.155,12.672 13.193 C 12.326 13.210,12.034 13.233,12.023 13.244 C 11.998 13.269,11.881 14.883,11.880 15.205 C 11.880 15.450,11.912 15.497,12.100 15.535 C 12.166 15.548,12.895 15.586,13.720 15.620 C 15.527 15.694,16.007 15.735,16.196 15.833 C 16.275 15.874,16.405 16.005,16.490 16.131 C 16.629 16.334,16.646 16.386,16.667 16.687 C 16.695 17.093,16.647 17.287,16.461 17.525 C 16.223 17.831,16.094 17.878,15.370 17.927 C 14.395 17.992,8.218 17.993,8.034 17.928 C 7.862 17.867,7.501 17.500,7.418 17.302 C 7.381 17.212,7.360 17.023,7.360 16.770 C 7.360 16.102,7.468 15.984,8.432 15.596 C 8.898 15.408,9.269 15.183,9.371 15.028 C 9.499 14.833,9.564 14.474,9.588 13.836 L 9.611 13.213 8.956 13.188 C 8.199 13.159,7.970 13.105,7.728 12.898 C 7.384 12.603,7.273 12.261,7.354 11.744 C 7.401 11.437,7.498 11.268,7.714 11.115 C 7.935 10.959,8.077 10.925,8.776 10.859 C 9.519 10.788,9.600 10.764,9.600 10.617 C 9.600 10.299,9.726 8.047,9.761 7.749 C 9.807 7.354,9.892 7.110,10.121 6.719 C 10.533 6.012,11.077 5.510,11.808 5.159 C 12.311 4.918,12.524 4.893,13.510 4.960 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/currency-rupee.svg b/packages/icons/svg/currency-rupee.svg
index 80d89a2567..09330b7f93 100644
--- a/packages/icons/svg/currency-rupee.svg
+++ b/packages/icons/svg/currency-rupee.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M16.196 6.224 C 16.498 6.473,16.594 6.620,16.641 6.902 C 16.721 7.391,16.676 7.654,16.467 7.929 C 16.195 8.285,16.053 8.327,14.780 8.421 C 14.318 8.455,13.924 8.500,13.904 8.520 C 13.882 8.542,13.941 8.758,14.053 9.064 C 14.155 9.343,14.243 9.576,14.249 9.581 C 14.255 9.586,14.557 9.611,14.920 9.637 C 16.039 9.716,16.261 9.782,16.482 10.103 C 16.726 10.458,16.746 11.162,16.520 11.474 C 16.229 11.875,15.981 11.957,14.975 11.989 L 14.250 12.011 14.160 12.236 C 14.001 12.632,13.637 13.291,13.409 13.597 C 12.923 14.248,12.313 14.749,11.428 15.221 L 11.114 15.389 11.624 15.924 C 12.966 17.333,13.165 17.623,13.101 18.077 C 13.034 18.561,12.834 18.857,12.448 19.047 C 12.195 19.172,11.810 19.173,11.575 19.050 C 11.305 18.909,10.634 18.280,8.925 16.567 L 7.310 14.948 7.329 14.464 C 7.351 13.892,7.421 13.712,7.690 13.528 C 7.969 13.337,8.034 13.323,9.240 13.198 C 10.174 13.100,10.494 13.033,10.726 12.883 C 10.991 12.712,11.520 12.245,11.520 12.181 C 11.520 12.104,11.390 12.091,9.880 12.018 C 7.920 11.924,7.836 11.906,7.534 11.532 C 7.398 11.364,7.361 11.282,7.338 11.097 C 7.265 10.512,7.412 10.087,7.762 9.871 C 7.990 9.730,8.289 9.699,10.020 9.641 C 11.359 9.597,11.640 9.576,11.640 9.523 C 11.640 9.454,11.027 8.929,10.754 8.766 C 10.522 8.627,10.071 8.533,9.196 8.441 C 8.049 8.321,7.862 8.274,7.651 8.056 C 7.373 7.768,7.342 7.679,7.341 7.180 C 7.340 6.785,7.350 6.724,7.436 6.586 C 7.566 6.377,7.804 6.213,8.053 6.162 C 8.259 6.119,11.594 6.059,14.516 6.046 L 15.972 6.040 16.196 6.224 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M16.251 6.281 C 16.580 6.582,16.654 6.757,16.658 7.236 C 16.660 7.639,16.596 7.806,16.336 8.066 C 16.124 8.278,15.898 8.331,14.820 8.422 C 14.380 8.459,13.990 8.501,13.952 8.515 C 13.889 8.538,13.898 8.586,14.043 9.020 C 14.131 9.284,14.225 9.521,14.252 9.546 C 14.279 9.572,14.632 9.620,15.062 9.656 C 15.918 9.727,16.183 9.790,16.352 9.958 C 16.702 10.308,16.777 11.068,16.503 11.483 C 16.255 11.857,15.963 11.953,14.956 11.988 L 14.253 12.012 14.140 12.276 C 13.832 12.994,13.453 13.584,12.990 14.065 C 12.573 14.497,12.158 14.810,11.557 15.146 L 11.116 15.392 11.735 16.046 C 12.867 17.241,13.097 17.565,13.094 17.960 C 13.090 18.615,12.621 19.129,12.020 19.136 C 11.847 19.138,11.728 19.113,11.595 19.048 C 11.319 18.913,10.681 18.319,8.906 16.546 L 7.308 14.950 7.333 14.505 C 7.364 13.960,7.407 13.799,7.566 13.640 C 7.831 13.376,7.916 13.355,9.521 13.163 C 10.334 13.065,10.601 12.986,10.906 12.750 C 11.256 12.480,11.532 12.211,11.504 12.167 C 11.471 12.112,11.193 12.088,9.840 12.019 C 8.050 11.927,7.813 11.881,7.574 11.576 C 7.364 11.308,7.343 11.242,7.341 10.860 C 7.340 10.446,7.395 10.254,7.574 10.050 C 7.835 9.753,8.085 9.713,10.120 9.640 C 11.418 9.594,11.651 9.573,11.629 9.505 C 11.601 9.418,10.946 8.884,10.724 8.766 C 10.454 8.623,10.091 8.548,9.140 8.438 C 7.976 8.303,7.796 8.248,7.566 7.962 C 7.382 7.733,7.360 7.644,7.360 7.143 C 7.360 6.708,7.364 6.686,7.477 6.530 C 7.550 6.430,7.674 6.330,7.807 6.266 C 7.993 6.176,8.091 6.159,8.580 6.137 C 9.246 6.106,12.562 6.056,14.564 6.047 L 15.988 6.040 16.251 6.281 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/currency-yen.svg b/packages/icons/svg/currency-yen.svg
index 8b983329d0..0017a10009 100644
--- a/packages/icons/svg/currency-yen.svg
+++ b/packages/icons/svg/currency-yen.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M8.820 6.164 C 9.126 6.248,9.300 6.485,10.660 8.660 C 11.073 9.320,11.536 10.045,11.690 10.271 C 11.932 10.627,11.978 10.675,12.032 10.631 C 12.111 10.567,12.808 9.501,13.700 8.081 C 14.418 6.939,14.828 6.358,15.010 6.224 C 15.098 6.161,15.201 6.140,15.502 6.127 C 15.866 6.111,15.894 6.116,16.143 6.238 C 16.511 6.419,16.676 6.706,16.679 7.168 C 16.682 7.560,16.619 7.693,15.433 9.820 C 15.200 10.238,14.998 10.617,14.984 10.662 C 14.961 10.738,14.993 10.751,15.448 10.838 C 16.406 11.023,16.680 11.285,16.679 12.020 C 16.679 12.329,16.582 12.594,16.381 12.831 C 16.164 13.089,15.988 13.130,14.720 13.218 C 13.377 13.312,13.366 13.314,13.291 13.429 C 13.244 13.499,13.221 13.653,13.208 13.959 L 13.190 14.389 13.885 14.416 C 14.945 14.457,15.843 14.520,16.014 14.565 C 16.206 14.615,16.490 14.874,16.598 15.096 C 16.718 15.344,16.712 15.829,16.586 16.101 C 16.466 16.357,16.135 16.661,15.933 16.699 C 15.627 16.756,14.833 16.798,14.038 16.799 L 13.216 16.800 13.167 17.442 C 13.140 17.794,13.099 18.173,13.076 18.282 C 12.943 18.903,12.295 19.284,11.692 19.096 C 11.399 19.005,11.029 18.659,10.965 18.416 C 10.915 18.229,10.855 17.725,10.818 17.194 L 10.791 16.809 9.526 16.789 C 8.068 16.767,7.910 16.741,7.643 16.474 C 7.399 16.229,7.360 16.111,7.360 15.602 C 7.360 15.102,7.386 15.023,7.627 14.795 C 7.842 14.591,7.904 14.566,8.326 14.521 C 8.704 14.480,10.204 14.400,10.590 14.400 L 10.800 14.400 10.800 14.102 C 10.800 13.722,10.734 13.410,10.643 13.362 C 10.605 13.341,10.215 13.296,9.777 13.262 C 7.923 13.117,7.854 13.103,7.604 12.819 C 7.384 12.568,7.303 12.345,7.307 11.999 C 7.312 11.509,7.502 11.167,7.851 11.021 C 7.934 10.987,8.205 10.914,8.454 10.860 C 8.914 10.761,9.040 10.725,9.040 10.694 C 9.040 10.657,8.847 10.301,8.349 9.420 C 8.063 8.914,7.714 8.283,7.574 8.017 C 7.337 7.566,7.320 7.516,7.322 7.277 C 7.325 6.751,7.425 6.535,7.797 6.250 C 7.958 6.126,7.983 6.120,8.313 6.120 C 8.504 6.120,8.732 6.140,8.820 6.164 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M8.960 6.225 C 9.130 6.324,9.479 6.795,10.044 7.687 C 10.299 8.090,10.785 8.858,11.124 9.394 C 11.777 10.426,11.957 10.671,12.030 10.626 C 12.088 10.590,12.708 9.649,13.658 8.156 C 14.446 6.917,14.867 6.317,15.018 6.218 C 15.072 6.182,15.260 6.149,15.487 6.134 C 15.845 6.110,15.878 6.115,16.083 6.217 C 16.523 6.438,16.655 6.655,16.658 7.160 C 16.660 7.486,16.652 7.518,16.471 7.891 C 16.368 8.106,16.126 8.564,15.935 8.911 C 15.151 10.326,15.000 10.612,15.000 10.679 C 15.000 10.735,15.069 10.763,15.350 10.818 C 15.946 10.936,16.197 11.036,16.405 11.239 C 16.554 11.384,16.600 11.462,16.635 11.632 C 16.733 12.095,16.657 12.471,16.399 12.796 C 16.163 13.095,16.055 13.120,14.494 13.239 C 13.919 13.283,13.419 13.331,13.383 13.344 C 13.268 13.388,13.230 13.524,13.209 13.962 L 13.189 14.389 13.845 14.417 C 14.660 14.451,15.644 14.513,15.873 14.545 C 16.109 14.579,16.393 14.780,16.539 15.017 C 16.650 15.198,16.660 15.243,16.660 15.577 C 16.660 15.981,16.613 16.117,16.377 16.392 C 16.159 16.647,15.980 16.711,15.360 16.759 C 15.063 16.781,14.458 16.800,14.015 16.800 L 13.210 16.800 13.182 17.190 C 13.114 18.174,13.059 18.444,12.874 18.699 C 12.416 19.329,11.460 19.266,11.058 18.580 C 10.953 18.400,10.878 17.958,10.819 17.170 L 10.792 16.800 9.926 16.799 C 8.852 16.797,8.146 16.749,7.938 16.662 C 7.756 16.586,7.543 16.394,7.447 16.220 C 7.395 16.126,7.380 15.990,7.380 15.597 C 7.380 15.108,7.383 15.090,7.491 14.948 C 7.662 14.723,7.847 14.603,8.084 14.561 C 8.337 14.517,9.229 14.454,10.150 14.416 L 10.800 14.389 10.800 14.082 C 10.800 13.913,10.773 13.683,10.740 13.572 C 10.667 13.327,10.759 13.350,9.460 13.241 C 7.935 13.113,7.820 13.084,7.565 12.761 C 7.362 12.505,7.306 12.305,7.329 11.917 C 7.364 11.293,7.578 11.068,8.292 10.901 C 8.932 10.752,9.040 10.721,9.040 10.686 C 9.040 10.669,8.849 10.314,8.616 9.898 C 8.383 9.481,8.001 8.789,7.766 8.360 L 7.340 7.580 7.341 7.220 C 7.341 6.925,7.358 6.826,7.434 6.670 C 7.524 6.486,7.776 6.230,7.940 6.156 C 8.082 6.091,8.816 6.141,8.960 6.225 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/cursor-click.svg b/packages/icons/svg/cursor-click.svg
index 98183d803a..84b5612463 100644
--- a/packages/icons/svg/cursor-click.svg
+++ b/packages/icons/svg/cursor-click.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.535 1.487 C 6.339 1.552,6.033 1.803,5.891 2.015 C 5.629 2.403,5.623 2.715,5.861 3.500 C 6.052 4.134,6.203 4.442,6.406 4.616 C 6.711 4.877,7.225 4.985,7.524 4.850 C 7.935 4.664,8.231 4.340,8.279 4.023 C 8.335 3.659,8.181 2.845,7.953 2.291 C 7.750 1.801,7.383 1.530,6.832 1.465 C 6.737 1.454,6.604 1.464,6.535 1.487 M12.040 3.202 C 11.738 3.419,10.808 4.371,10.741 4.530 C 10.653 4.742,10.660 5.293,10.755 5.500 C 10.898 5.815,11.327 6.110,11.695 6.148 C 11.993 6.178,12.205 6.105,12.490 5.872 C 12.890 5.545,13.615 4.794,13.699 4.620 C 13.806 4.397,13.804 3.962,13.694 3.720 C 13.493 3.275,13.220 3.115,12.622 3.089 C 12.221 3.072,12.220 3.072,12.040 3.202 M2.200 5.788 C 1.866 5.909,1.683 6.102,1.554 6.468 C 1.271 7.273,1.729 7.843,2.903 8.143 C 3.389 8.267,3.876 8.307,4.114 8.242 C 4.512 8.134,4.904 7.561,4.896 7.100 C 4.891 6.813,4.769 6.529,4.585 6.373 C 4.400 6.217,3.944 6.012,3.580 5.922 C 3.102 5.804,2.356 5.732,2.200 5.788 M7.976 7.339 C 7.738 7.458,7.473 7.711,7.375 7.913 C 7.336 7.994,7.297 8.168,7.289 8.300 C 7.262 8.712,7.430 9.169,9.722 14.900 C 11.945 20.459,12.116 20.863,12.382 21.156 C 12.595 21.392,12.802 21.489,13.145 21.511 C 13.789 21.553,14.001 21.343,14.770 19.900 C 14.957 19.548,15.294 18.893,15.519 18.444 L 15.927 17.627 16.973 18.666 C 18.996 20.672,19.620 21.246,19.969 21.424 C 20.194 21.539,20.484 21.550,20.799 21.457 C 21.393 21.280,21.714 20.477,21.404 19.940 C 21.183 19.558,20.562 18.886,18.608 16.915 L 17.631 15.930 18.930 15.271 C 21.344 14.047,21.563 13.865,21.510 13.120 C 21.467 12.510,21.252 12.339,19.700 11.681 C 18.034 10.974,11.009 8.166,9.640 7.660 C 9.094 7.458,8.358 7.240,8.223 7.240 C 8.197 7.240,8.086 7.285,7.976 7.339 M4.340 10.888 C 4.067 11.090,3.455 11.684,3.219 11.976 L 3.060 12.173 3.060 12.596 C 3.060 13.077,3.097 13.180,3.362 13.438 C 3.592 13.660,3.772 13.735,4.125 13.753 C 4.354 13.764,4.467 13.751,4.573 13.701 C 4.922 13.535,5.894 12.551,6.049 12.206 C 6.151 11.979,6.151 11.581,6.048 11.349 C 5.855 10.916,5.600 10.767,4.993 10.733 L 4.580 10.710 4.340 10.888 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.395 1.560 C 6.186 1.670,5.903 1.967,5.797 2.187 C 5.656 2.478,5.656 2.710,5.797 3.253 C 5.939 3.800,6.117 4.249,6.280 4.474 C 6.358 4.581,6.482 4.675,6.659 4.763 C 7.139 4.999,7.573 4.931,7.956 4.559 C 8.199 4.323,8.280 4.134,8.280 3.800 C 8.280 3.326,8.060 2.447,7.851 2.090 C 7.563 1.596,6.831 1.330,6.395 1.560 M12.040 3.202 C 11.833 3.352,10.993 4.187,10.823 4.412 C 10.727 4.538,10.705 4.613,10.689 4.858 C 10.661 5.296,10.732 5.535,10.956 5.759 C 11.182 5.986,11.448 6.118,11.733 6.148 C 11.911 6.166,11.989 6.152,12.165 6.071 C 12.517 5.908,13.524 4.941,13.704 4.593 C 13.813 4.382,13.792 3.926,13.661 3.659 C 13.475 3.278,13.206 3.133,12.612 3.096 L 12.220 3.071 12.040 3.202 M2.100 5.833 C 1.868 5.943,1.730 6.090,1.610 6.350 C 1.341 6.938,1.499 7.463,2.046 7.800 C 2.564 8.118,3.681 8.357,4.102 8.239 C 4.502 8.127,4.845 7.645,4.873 7.153 C 4.895 6.771,4.767 6.499,4.473 6.303 C 4.056 6.027,3.383 5.839,2.600 5.782 C 2.315 5.762,2.234 5.770,2.100 5.833 M8.011 7.324 C 7.777 7.440,7.492 7.700,7.399 7.882 C 7.282 8.111,7.260 8.415,7.339 8.720 C 7.454 9.171,8.120 10.894,9.803 15.100 C 12.070 20.766,12.189 21.035,12.536 21.300 C 12.801 21.502,13.232 21.573,13.575 21.471 C 13.959 21.357,14.280 20.873,15.290 18.889 L 15.927 17.639 17.253 18.945 C 19.233 20.894,19.791 21.389,20.113 21.479 C 20.821 21.675,21.525 21.139,21.518 20.408 C 21.514 19.915,21.373 19.742,19.075 17.393 L 17.639 15.925 18.789 15.342 C 20.648 14.401,21.173 14.080,21.391 13.751 C 21.490 13.601,21.500 13.552,21.499 13.223 C 21.498 12.475,21.335 12.357,18.900 11.352 C 15.492 9.946,9.886 7.734,9.045 7.464 C 8.317 7.230,8.225 7.218,8.011 7.324 M4.333 10.896 C 3.999 11.148,3.088 12.093,3.056 12.222 C 3.015 12.384,3.071 13.027,3.136 13.151 C 3.213 13.297,3.508 13.575,3.675 13.659 C 3.749 13.696,3.939 13.737,4.097 13.749 C 4.331 13.766,4.418 13.756,4.562 13.691 C 4.901 13.538,5.860 12.590,6.027 12.241 C 6.117 12.054,6.142 11.681,6.079 11.457 C 5.965 11.048,5.694 10.831,5.212 10.761 C 4.690 10.685,4.594 10.700,4.333 10.896 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/dailymotion.svg b/packages/icons/svg/dailymotion.svg
new file mode 100644
index 0000000000..ea6be47bce
--- /dev/null
+++ b/packages/icons/svg/dailymotion.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.933 3.074 C 3.490 3.227,3.187 3.535,3.062 3.958 C 3.002 4.161,2.998 4.853,3.008 12.080 L 3.020 19.980 3.124 20.202 C 3.273 20.518,3.448 20.699,3.753 20.849 L 4.018 20.980 12.000 20.980 L 19.982 20.980 20.247 20.849 C 20.552 20.699,20.727 20.518,20.876 20.202 L 20.980 19.980 20.980 11.999 L 20.980 4.018 20.849 3.753 C 20.699 3.448,20.518 3.273,20.202 3.124 L 19.980 3.020 12.060 3.011 C 4.529 3.003,4.130 3.006,3.933 3.074 M17.600 11.960 L 17.600 19.120 16.080 19.120 L 14.560 19.120 14.560 18.580 L 14.560 18.040 14.203 18.311 C 13.396 18.924,12.538 19.200,11.440 19.200 C 10.424 19.200,9.567 18.940,8.700 18.368 C 8.327 18.122,7.622 17.415,7.364 17.028 C 6.932 16.382,6.641 15.673,6.499 14.920 C 6.402 14.410,6.400 13.473,6.495 12.985 C 6.916 10.826,8.520 9.133,10.560 8.696 C 11.012 8.599,11.888 8.599,12.352 8.697 C 13.146 8.863,13.876 9.220,14.390 9.693 L 14.560 9.850 14.560 7.625 C 14.560 6.401,14.565 5.399,14.570 5.398 C 14.575 5.397,15.228 5.264,16.020 5.102 C 16.812 4.940,17.492 4.806,17.530 4.804 C 17.596 4.800,17.600 5.166,17.600 11.960 M11.560 11.379 C 10.967 11.513,10.313 11.962,9.980 12.462 C 9.207 13.627,9.542 15.241,10.714 16.007 C 11.157 16.296,11.556 16.413,12.100 16.415 C 12.845 16.418,13.370 16.199,13.904 15.665 C 14.300 15.269,14.517 14.859,14.625 14.304 C 14.860 13.101,14.116 11.863,12.913 11.455 C 12.538 11.327,11.939 11.294,11.560 11.379 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/dart.svg b/packages/icons/svg/dart.svg
index 84322a6cae..9709d40f85 100644
--- a/packages/icons/svg/dart.svg
+++ b/packages/icons/svg/dart.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.756 3.043 C 11.633 3.061,11.444 3.110,11.336 3.152 C 11.087 3.249,6.833 5.279,6.782 5.326 C 6.738 5.365,14.589 5.373,15.053 5.334 L 15.358 5.308 14.431 4.351 C 13.620 3.513,13.469 3.375,13.232 3.256 C 12.766 3.021,12.330 2.958,11.756 3.043 M6.247 6.437 C 6.408 6.611,9.132 9.428,12.300 12.697 L 18.060 18.640 19.530 18.640 L 21.000 18.640 21.000 14.788 L 21.000 10.936 18.629 8.594 C 17.326 7.306,16.202 6.222,16.131 6.186 C 16.015 6.126,15.567 6.120,10.979 6.120 L 5.953 6.120 6.247 6.437 M5.360 11.990 L 5.360 17.267 7.526 19.634 L 9.692 22.000 13.586 22.000 L 17.480 22.000 17.480 20.579 L 17.480 19.157 11.454 12.949 C 8.140 9.534,5.413 6.734,5.394 6.727 C 5.375 6.719,5.360 9.088,5.360 11.990 M3.368 9.982 C 2.084 12.640,1.974 12.911,2.011 13.326 C 2.061 13.872,2.317 14.224,3.577 15.480 L 4.600 16.499 4.600 11.990 C 4.600 9.509,4.595 7.480,4.589 7.480 C 4.582 7.480,4.033 8.606,3.368 9.982 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.920 3.023 C 11.512 3.092,11.272 3.180,10.460 3.561 C 9.709 3.914,7.511 4.965,6.968 5.232 C 6.855 5.288,6.846 5.301,6.908 5.326 C 6.998 5.361,14.863 5.362,15.148 5.326 L 15.356 5.300 14.428 4.355 C 13.479 3.388,13.332 3.270,12.900 3.126 C 12.664 3.048,12.117 2.990,11.920 3.023 M6.221 6.408 C 6.671 6.879,11.025 11.381,14.677 15.150 L 18.059 18.640 19.530 18.640 L 21.000 18.640 21.000 14.783 L 21.000 10.925 18.710 8.677 C 17.451 7.441,16.341 6.364,16.244 6.285 L 16.067 6.140 11.005 6.128 L 5.943 6.116 6.221 6.408 M5.386 6.878 C 5.372 6.950,5.360 9.318,5.360 12.139 L 5.360 17.268 7.526 19.634 L 9.692 22.000 13.586 22.000 L 17.480 22.000 17.480 20.575 L 17.480 19.150 16.189 17.825 C 15.479 17.096,13.108 14.655,10.919 12.400 C 8.731 10.145,6.596 7.951,6.176 7.523 L 5.413 6.745 5.386 6.878 M4.223 8.210 C 4.040 8.590,3.616 9.467,3.281 10.160 C 1.933 12.948,1.860 13.179,2.135 13.781 C 2.299 14.138,2.560 14.444,3.607 15.500 L 4.598 16.500 4.599 12.010 C 4.600 9.540,4.590 7.520,4.578 7.520 C 4.566 7.520,4.407 7.830,4.223 8.210 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/database.svg b/packages/icons/svg/database.svg
index 0316741cbe..e066a61581 100644
--- a/packages/icons/svg/database.svg
+++ b/packages/icons/svg/database.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.560 2.518 C 9.289 2.585,7.431 2.971,6.380 3.386 C 4.593 4.092,3.462 5.297,3.678 6.266 C 3.962 7.546,5.767 8.663,8.480 9.240 C 9.855 9.533,11.493 9.626,13.360 9.518 C 14.201 9.470,14.691 9.402,15.540 9.216 C 17.916 8.694,19.376 7.935,20.081 6.854 C 20.192 6.685,20.292 6.506,20.304 6.456 C 20.317 6.407,20.321 6.170,20.314 5.931 C 20.301 5.518,20.293 5.485,20.160 5.259 C 20.083 5.128,19.876 4.876,19.700 4.699 C 18.558 3.548,16.279 2.731,13.740 2.563 C 12.874 2.506,11.234 2.483,10.560 2.518 M3.602 9.860 C 3.604 11.215,3.655 12.197,3.736 12.462 C 3.770 12.573,3.856 12.752,3.928 12.859 C 4.103 13.124,4.823 13.835,5.108 14.024 C 5.845 14.513,7.962 15.191,9.400 15.399 C 10.828 15.605,13.080 15.613,14.440 15.417 C 15.942 15.200,17.631 14.711,18.520 14.235 C 18.919 14.021,19.313 13.715,19.684 13.333 C 20.250 12.749,20.304 12.604,20.360 11.520 C 20.404 10.655,20.412 9.040,20.373 9.040 C 20.357 9.040,20.092 9.300,19.783 9.617 C 19.184 10.231,18.861 10.472,18.248 10.765 C 16.195 11.747,13.009 12.193,10.166 11.897 C 8.477 11.722,6.845 11.300,5.697 10.742 C 4.837 10.323,4.344 9.897,3.834 9.131 L 3.600 8.780 3.602 9.860 M3.616 15.109 C 3.578 15.310,3.632 17.968,3.680 18.262 C 3.731 18.571,3.868 18.841,4.140 19.169 C 4.550 19.661,5.246 20.155,5.960 20.461 C 6.771 20.808,8.469 21.291,9.323 21.417 C 10.199 21.546,12.512 21.601,13.620 21.518 C 14.347 21.464,14.837 21.390,15.600 21.219 C 17.762 20.736,19.164 20.048,19.918 19.099 C 20.283 18.640,20.321 18.501,20.365 17.460 C 20.414 16.327,20.397 14.980,20.335 14.980 C 20.310 14.980,20.163 15.143,20.009 15.343 C 19.506 15.994,18.866 16.495,18.120 16.824 C 17.163 17.245,15.698 17.643,14.280 17.867 C 13.885 17.930,13.581 17.939,12.120 17.936 C 11.078 17.934,10.250 17.914,9.980 17.884 C 8.591 17.730,6.670 17.224,5.735 16.765 C 5.079 16.443,4.443 15.915,3.899 15.242 C 3.773 15.087,3.665 14.960,3.657 14.960 C 3.650 14.960,3.631 15.027,3.616 15.109 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.840 2.584 C 8.244 2.775,6.552 3.237,5.640 3.731 C 4.869 4.148,4.171 4.752,3.888 5.246 C 3.696 5.581,3.617 5.942,3.674 6.223 C 3.754 6.625,3.945 6.946,4.339 7.345 C 5.039 8.054,6.070 8.585,7.580 9.015 C 8.895 9.390,10.259 9.560,11.940 9.559 C 13.801 9.558,15.021 9.398,16.580 8.951 C 18.399 8.430,19.585 7.693,20.159 6.727 L 20.328 6.441 20.314 5.971 C 20.298 5.437,20.265 5.352,19.901 4.929 C 18.777 3.621,16.427 2.738,13.600 2.561 C 12.655 2.503,10.405 2.516,9.840 2.584 M3.614 10.320 C 3.639 12.020,3.669 12.355,3.828 12.680 C 3.954 12.940,4.691 13.716,5.065 13.985 C 5.866 14.558,8.206 15.270,9.940 15.468 C 10.700 15.555,13.219 15.567,13.900 15.488 C 14.983 15.361,16.158 15.106,17.167 14.777 C 18.357 14.389,18.945 14.055,19.630 13.377 C 20.318 12.695,20.350 12.570,20.388 10.430 C 20.408 9.312,20.403 9.080,20.358 9.080 C 20.329 9.080,20.096 9.290,19.842 9.547 C 19.064 10.334,18.762 10.549,17.952 10.894 C 16.449 11.536,14.565 11.908,12.440 11.983 C 9.889 12.072,6.891 11.461,5.285 10.523 C 4.686 10.173,4.299 9.797,3.800 9.080 L 3.592 8.780 3.614 10.320 M3.617 15.100 C 3.577 15.316,3.630 17.916,3.682 18.234 C 3.705 18.374,3.770 18.581,3.827 18.694 C 4.148 19.333,4.990 20.031,5.948 20.452 C 6.597 20.738,8.252 21.226,9.080 21.376 C 9.656 21.480,10.287 21.522,11.640 21.547 C 13.425 21.580,14.250 21.513,15.520 21.235 C 16.606 20.997,17.666 20.647,18.362 20.298 C 19.320 19.818,20.154 19.004,20.279 18.428 C 20.412 17.818,20.444 15.000,20.318 15.000 C 20.301 15.000,20.134 15.184,19.947 15.410 C 19.217 16.289,18.541 16.720,17.200 17.163 C 16.423 17.419,15.625 17.624,14.780 17.783 C 14.002 17.929,12.947 17.970,11.200 17.922 C 10.012 17.889,9.739 17.869,9.240 17.781 C 7.999 17.563,6.484 17.126,5.780 16.783 C 5.118 16.460,4.424 15.881,3.812 15.140 L 3.647 14.940 3.617 15.100 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/deno.svg b/packages/icons/svg/deno.svg
index cc049dfecc..cb5a93fade 100644
--- a/packages/icons/svg/deno.svg
+++ b/packages/icons/svg/deno.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.820 3.056 C 8.827 3.344,7.073 4.204,5.687 5.573 C 4.347 6.897,3.554 8.362,3.149 10.260 C 3.022 10.855,3.021 10.869,3.021 12.000 C 3.021 13.129,3.022 13.146,3.149 13.740 C 3.459 15.203,3.989 16.369,4.875 17.540 C 5.143 17.894,5.970 18.728,6.360 19.038 C 7.532 19.967,8.733 20.526,10.260 20.851 C 10.852 20.977,10.874 20.978,11.980 20.979 C 12.990 20.980,13.145 20.971,13.560 20.888 C 15.165 20.568,16.460 19.980,17.640 19.038 C 18.033 18.725,18.812 17.938,19.106 17.560 C 19.983 16.428,20.537 15.215,20.850 13.740 C 20.976 13.148,20.978 13.124,20.979 12.020 C 20.980 11.009,20.971 10.855,20.888 10.440 C 20.488 8.438,19.680 6.915,18.293 5.556 C 16.967 4.254,15.371 3.443,13.460 3.099 C 12.972 3.011,11.319 2.984,10.820 3.056 M11.413 4.570 C 11.462 6.002,11.557 8.338,11.580 8.650 L 11.602 8.960 11.502 8.960 C 11.430 8.960,11.396 8.934,11.381 8.870 C 11.370 8.820,11.325 7.925,11.281 6.880 C 11.237 5.835,11.189 4.715,11.175 4.390 L 11.149 3.800 11.268 3.800 L 11.387 3.800 11.413 4.570 M13.498 3.930 C 13.506 3.958,13.524 4.705,13.537 5.590 C 13.559 7.106,13.556 7.200,13.490 7.199 C 13.330 7.198,13.328 7.187,13.298 5.510 L 13.269 3.880 13.376 3.880 C 13.434 3.880,13.489 3.903,13.498 3.930 M8.417 4.830 C 8.454 5.121,8.720 8.399,8.720 8.571 C 8.720 8.671,8.699 8.731,8.658 8.746 C 8.624 8.759,8.590 8.763,8.581 8.754 C 8.549 8.722,8.227 4.771,8.252 4.707 C 8.304 4.570,8.392 4.635,8.417 4.830 M14.573 5.320 C 14.610 5.562,14.588 6.466,14.544 6.510 C 14.529 6.525,14.486 6.518,14.448 6.494 C 14.389 6.457,14.379 6.360,14.369 5.763 L 14.358 5.074 14.449 5.087 C 14.525 5.098,14.544 5.134,14.573 5.320 M10.414 5.530 C 10.428 5.755,10.451 6.242,10.466 6.610 L 10.492 7.280 10.386 7.280 C 10.297 7.280,10.280 7.262,10.279 7.170 C 10.279 7.110,10.252 6.682,10.220 6.220 C 10.139 5.061,10.136 5.120,10.274 5.120 L 10.388 5.120 10.414 5.530 M16.592 5.528 C 16.626 5.562,16.640 5.796,16.640 6.328 C 16.640 6.742,16.630 7.080,16.617 7.080 C 16.605 7.080,16.560 7.061,16.517 7.039 C 16.445 7.000,16.440 6.948,16.440 6.239 C 16.440 5.463,16.455 5.391,16.592 5.528 M12.464 5.791 C 12.493 5.810,12.518 6.156,12.537 6.794 L 12.566 7.767 12.473 7.739 C 12.422 7.724,12.368 7.700,12.353 7.686 C 12.338 7.671,12.313 7.232,12.298 6.710 C 12.270 5.795,12.272 5.760,12.344 5.761 C 12.386 5.761,12.440 5.774,12.464 5.791 M17.614 6.188 C 17.628 6.338,17.640 7.770,17.640 9.370 C 17.640 11.833,17.631 12.280,17.584 12.280 C 17.503 12.280,17.480 11.521,17.469 8.454 C 17.461 6.075,17.466 5.851,17.524 5.882 C 17.569 5.906,17.596 5.999,17.614 6.188 M15.577 6.384 C 15.633 6.406,15.640 6.611,15.640 8.287 C 15.640 10.055,15.636 10.165,15.570 10.152 C 15.505 10.140,15.499 10.012,15.490 8.249 C 15.484 7.210,15.487 6.360,15.496 6.360 C 15.506 6.360,15.542 6.371,15.577 6.384 M9.526 6.800 C 9.540 6.987,9.554 7.288,9.556 7.470 C 9.560 7.774,9.554 7.800,9.481 7.800 C 9.381 7.800,9.372 7.756,9.326 7.060 C 9.287 6.484,9.298 6.426,9.440 6.450 C 9.485 6.458,9.506 6.544,9.526 6.800 M5.898 7.662 C 6.019 8.850,6.021 8.903,5.934 8.937 C 5.898 8.951,5.859 8.953,5.848 8.941 C 5.832 8.925,5.609 7.110,5.602 6.940 C 5.600 6.888,5.759 6.626,5.780 6.647 C 5.789 6.656,5.842 7.112,5.898 7.662 M14.533 7.330 C 14.594 7.375,14.601 7.454,14.591 8.020 C 14.580 8.649,14.579 8.660,14.490 8.673 C 14.403 8.685,14.400 8.674,14.400 8.373 C 14.400 8.201,14.388 7.885,14.374 7.670 C 14.346 7.256,14.368 7.209,14.533 7.330 M6.739 7.450 C 6.750 7.500,6.821 8.224,6.897 9.060 C 7.032 10.548,7.033 10.582,6.960 10.656 C 6.886 10.732,6.884 10.731,6.865 10.636 C 6.854 10.583,6.778 9.852,6.696 9.012 C 6.575 7.761,6.557 7.472,6.599 7.422 C 6.670 7.336,6.715 7.345,6.739 7.450 M5.079 7.710 C 5.078 7.726,5.235 9.148,5.427 10.869 C 5.619 12.589,5.764 14.010,5.748 14.025 C 5.733 14.041,5.709 14.043,5.697 14.030 C 5.667 14.000,4.921 8.233,4.920 8.032 C 4.920 7.875,4.990 7.680,5.046 7.680 C 5.065 7.680,5.080 7.694,5.079 7.710 M4.601 10.353 C 4.725 11.324,4.759 11.697,4.727 11.729 C 4.664 11.792,4.665 11.800,4.471 10.440 C 4.338 9.509,4.305 9.189,4.334 9.088 C 4.355 9.016,4.386 8.971,4.402 8.988 C 4.418 9.006,4.507 9.620,4.601 10.353 M16.647 9.260 C 16.663 9.348,16.676 9.875,16.678 10.430 C 16.680 11.395,16.677 11.440,16.604 11.440 C 16.563 11.440,16.518 11.412,16.504 11.377 C 16.491 11.342,16.480 10.810,16.480 10.194 C 16.480 9.153,16.485 9.075,16.549 9.087 C 16.595 9.096,16.628 9.155,16.647 9.260 M11.924 9.540 C 12.340 9.613,12.715 9.737,13.141 9.944 C 13.415 10.076,13.531 10.169,13.960 10.600 C 15.139 11.781,15.427 12.744,15.717 16.460 C 15.847 18.125,15.895 19.194,15.841 19.259 C 15.779 19.333,15.039 19.641,14.551 19.796 C 13.878 20.009,13.247 20.119,12.408 20.168 C 11.905 20.197,11.623 20.199,11.598 20.174 C 11.572 20.148,11.572 19.858,11.599 19.337 C 11.698 17.368,11.609 15.169,11.401 14.443 C 11.359 14.297,11.347 14.306,11.825 14.117 C 12.320 13.921,12.448 13.827,12.432 13.670 C 12.424 13.593,12.380 13.518,12.310 13.466 C 12.183 13.372,12.180 13.372,11.500 13.620 C 10.980 13.809,10.233 13.990,9.780 14.036 C 9.395 14.075,8.596 14.033,8.308 13.958 C 7.859 13.842,7.317 13.590,7.050 13.373 C 6.957 13.297,6.831 13.151,6.770 13.048 C 6.669 12.876,6.660 12.826,6.661 12.458 C 6.662 12.069,6.667 12.046,6.832 11.702 C 6.971 11.413,7.063 11.286,7.331 11.019 C 8.006 10.345,9.089 9.791,10.175 9.562 C 10.633 9.466,11.441 9.456,11.924 9.540 M18.657 9.613 C 18.725 9.662,18.727 9.730,18.699 10.713 C 18.672 11.674,18.664 11.760,18.600 11.760 C 18.561 11.760,18.519 11.720,18.505 11.670 C 18.492 11.620,18.481 11.166,18.481 10.660 C 18.481 9.779,18.496 9.560,18.557 9.560 C 18.572 9.560,18.617 9.584,18.657 9.613 M7.807 10.653 C 7.696 10.771,7.696 10.934,7.808 11.038 C 7.997 11.215,8.280 11.086,8.280 10.822 C 8.280 10.576,7.980 10.468,7.807 10.653 M9.323 10.865 C 9.211 11.008,9.217 11.180,9.338 11.302 C 9.457 11.421,9.595 11.427,9.730 11.321 C 9.863 11.216,9.897 11.069,9.822 10.925 C 9.719 10.725,9.458 10.694,9.323 10.865 M19.602 10.810 C 19.652 10.853,19.657 11.166,19.639 12.980 C 19.619 15.044,19.616 15.105,19.533 15.280 L 19.447 15.460 19.443 14.136 C 19.439 12.611,19.481 10.760,19.519 10.760 C 19.533 10.760,19.571 10.783,19.602 10.810 M6.279 11.408 C 6.280 11.565,6.210 11.760,6.154 11.760 C 6.135 11.760,6.120 11.693,6.119 11.610 C 6.119 11.527,6.109 11.422,6.096 11.376 C 6.067 11.268,6.193 11.125,6.245 11.207 C 6.264 11.236,6.279 11.327,6.279 11.408 M4.898 12.690 C 4.923 12.835,5.229 15.248,5.255 15.500 C 5.267 15.615,5.262 15.638,5.237 15.580 C 5.204 15.504,4.800 12.777,4.800 12.630 C 4.800 12.508,4.875 12.554,4.898 12.690 M6.459 13.639 C 6.531 13.777,6.565 14.476,6.500 14.480 C 6.478 14.482,6.448 14.415,6.434 14.332 C 6.390 14.079,6.349 13.520,6.374 13.520 C 6.387 13.520,6.426 13.573,6.459 13.639 M8.295 14.552 C 8.306 14.569,8.327 14.742,8.343 14.936 C 8.370 15.268,8.367 15.287,8.296 15.274 C 8.214 15.258,8.169 15.067,8.163 14.710 C 8.161 14.570,8.175 14.520,8.218 14.520 C 8.249 14.520,8.284 14.534,8.295 14.552 M10.098 15.481 C 10.170 16.536,10.172 16.589,10.125 16.538 C 10.105 16.517,10.060 16.131,10.024 15.680 C 9.949 14.730,9.943 14.487,9.999 14.543 C 10.020 14.564,10.065 14.986,10.098 15.481 M6.017 16.180 C 6.074 16.708,6.131 17.202,6.144 17.278 C 6.163 17.394,6.158 17.408,6.109 17.367 C 6.071 17.336,6.042 17.194,6.024 16.950 C 6.008 16.746,5.952 16.231,5.899 15.804 C 5.846 15.377,5.815 15.008,5.830 14.984 C 5.870 14.919,5.903 15.128,6.017 16.180 M18.571 16.916 C 18.502 17.017,18.500 16.994,18.489 16.084 C 18.480 15.236,18.485 15.141,18.549 15.070 C 18.617 14.995,18.620 15.028,18.631 15.902 C 18.640 16.717,18.634 16.823,18.571 16.916 M16.597 17.468 C 16.599 18.313,16.585 18.804,16.560 18.820 C 16.534 18.836,16.521 18.358,16.523 17.412 C 16.524 16.576,16.540 16.013,16.560 16.060 C 16.579 16.104,16.596 16.737,16.597 17.468 M9.376 16.590 C 9.445 17.140,9.479 17.777,9.441 17.815 C 9.419 17.837,9.392 17.845,9.380 17.833 C 9.359 17.813,9.240 16.670,9.240 16.490 C 9.240 16.439,9.265 16.400,9.296 16.400 C 9.333 16.400,9.361 16.465,9.376 16.590 M7.721 18.143 C 7.763 18.601,7.788 18.985,7.778 18.996 C 7.715 19.058,7.673 18.848,7.604 18.120 C 7.561 17.670,7.536 17.287,7.548 17.268 C 7.609 17.168,7.653 17.388,7.721 18.143 M8.701 19.062 C 8.730 19.442,8.720 19.510,8.646 19.464 C 8.606 19.439,8.584 19.323,8.539 18.910 C 8.516 18.699,8.521 18.680,8.593 18.680 C 8.665 18.680,8.675 18.718,8.701 19.062 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.160 3.043 C 9.998 3.107,8.546 3.573,7.420 4.244 C 6.777 4.627,6.191 5.085,5.638 5.638 C 4.381 6.896,3.657 8.194,3.217 9.980 C 2.919 11.186,2.919 12.814,3.217 14.020 C 3.683 15.913,4.554 17.397,5.946 18.671 C 7.094 19.722,8.356 20.382,9.980 20.783 C 11.138 21.069,12.789 21.077,13.940 20.802 C 15.943 20.323,17.461 19.419,18.810 17.900 C 19.277 17.374,19.740 16.680,20.060 16.028 C 20.840 14.435,21.111 12.941,20.962 11.040 C 20.894 10.164,20.530 8.918,20.076 8.003 C 18.851 5.534,16.548 3.753,13.839 3.181 C 13.215 3.050,12.091 2.991,11.160 3.043 M11.415 4.710 C 11.452 5.964,11.553 8.362,11.581 8.690 C 11.603 8.942,11.600 8.960,11.524 8.960 C 11.479 8.960,11.427 8.928,11.407 8.890 C 11.387 8.851,11.359 8.550,11.344 8.220 C 11.228 5.586,11.161 4.003,11.160 3.910 C 11.160 3.816,11.176 3.800,11.274 3.800 L 11.388 3.800 11.415 4.710 M13.496 4.050 C 13.525 4.292,13.556 6.914,13.531 7.070 C 13.509 7.211,13.427 7.243,13.379 7.130 C 13.347 7.054,13.288 5.422,13.283 4.470 L 13.280 3.880 13.378 3.880 C 13.462 3.880,13.478 3.902,13.496 4.050 M8.380 4.681 C 8.433 4.765,8.736 8.566,8.700 8.681 C 8.666 8.788,8.560 8.782,8.560 8.674 C 8.560 8.626,8.515 8.073,8.460 7.444 C 8.319 5.822,8.241 4.712,8.264 4.673 C 8.292 4.628,8.350 4.632,8.380 4.681 M14.511 5.130 C 14.623 5.269,14.614 6.520,14.500 6.520 C 14.413 6.520,14.394 6.404,14.371 5.730 C 14.351 5.164,14.356 5.080,14.409 5.080 C 14.443 5.080,14.488 5.103,14.511 5.130 M10.414 5.610 C 10.500 7.264,10.500 7.280,10.405 7.280 C 10.357 7.280,10.310 7.258,10.301 7.230 C 10.268 7.130,10.155 5.200,10.180 5.161 C 10.193 5.138,10.246 5.120,10.297 5.120 C 10.386 5.120,10.389 5.133,10.414 5.610 M16.605 5.603 C 16.644 5.741,16.646 7.031,16.608 7.055 C 16.591 7.066,16.550 7.059,16.518 7.039 C 16.472 7.011,16.457 6.871,16.447 6.373 C 16.440 6.027,16.445 5.683,16.459 5.609 C 16.488 5.458,16.563 5.455,16.605 5.603 M12.484 5.960 C 12.498 6.059,12.522 6.506,12.538 6.954 L 12.567 7.768 12.474 7.739 C 12.422 7.723,12.372 7.702,12.361 7.693 C 12.331 7.665,12.267 5.891,12.295 5.820 C 12.345 5.688,12.458 5.772,12.484 5.960 M17.631 8.840 C 17.648 11.660,17.630 12.394,17.548 12.200 C 17.500 12.085,17.454 6.044,17.500 5.930 C 17.524 5.869,17.534 5.873,17.572 5.960 C 17.601 6.028,17.621 6.951,17.631 8.840 M15.605 6.503 C 15.640 6.663,15.639 9.955,15.604 10.080 C 15.535 10.328,15.513 9.962,15.491 8.214 C 15.471 6.620,15.475 6.352,15.524 6.368 C 15.555 6.378,15.591 6.439,15.605 6.503 M9.480 6.539 C 9.539 6.694,9.550 7.769,9.493 7.788 C 9.467 7.797,9.427 7.771,9.405 7.730 C 9.359 7.643,9.297 6.597,9.333 6.504 C 9.369 6.410,9.437 6.426,9.480 6.539 M5.834 7.090 C 5.992 8.524,6.012 8.845,5.946 8.911 C 5.911 8.947,5.873 8.966,5.862 8.955 C 5.851 8.944,5.786 8.486,5.718 7.937 C 5.599 6.978,5.597 6.935,5.664 6.810 C 5.702 6.739,5.745 6.680,5.761 6.680 C 5.776 6.680,5.809 6.865,5.834 7.090 M14.520 7.319 C 14.566 7.348,14.583 7.456,14.592 7.768 C 14.607 8.298,14.561 8.660,14.480 8.660 C 14.430 8.660,14.415 8.549,14.391 8.020 C 14.357 7.259,14.364 7.220,14.520 7.319 M6.736 7.470 C 6.771 7.642,7.000 10.211,7.000 10.432 C 7.000 10.553,6.978 10.648,6.944 10.677 C 6.872 10.736,6.868 10.708,6.738 9.420 C 6.625 8.296,6.576 7.520,6.613 7.424 C 6.651 7.325,6.711 7.348,6.736 7.470 M5.080 7.734 C 5.080 7.763,5.179 8.677,5.301 9.764 C 5.582 12.286,5.759 14.015,5.737 14.036 C 5.728 14.046,5.713 14.046,5.704 14.037 C 5.685 14.017,5.267 10.879,5.056 9.164 C 4.934 8.180,4.918 7.964,4.957 7.834 C 5.001 7.686,5.080 7.622,5.080 7.734 M4.558 10.040 C 4.692 11.050,4.752 11.822,4.687 11.720 C 4.654 11.668,4.413 10.064,4.337 9.394 C 4.310 9.148,4.346 8.945,4.401 9.043 C 4.418 9.075,4.489 9.523,4.558 10.040 M16.670 10.270 C 16.684 11.349,16.666 11.522,16.552 11.408 C 16.513 11.369,16.497 11.098,16.488 10.309 C 16.481 9.732,16.487 9.217,16.500 9.164 C 16.523 9.075,16.529 9.072,16.590 9.133 C 16.647 9.190,16.658 9.342,16.670 10.270 M12.180 9.600 C 13.027 9.817,13.353 10.004,13.949 10.613 C 14.440 11.115,14.661 11.405,14.870 11.820 C 15.247 12.573,15.455 13.588,15.637 15.580 C 15.766 16.982,15.845 18.301,15.832 18.819 L 15.820 19.298 15.362 19.491 C 14.770 19.741,14.109 19.940,13.547 20.038 C 13.075 20.121,12.237 20.200,11.836 20.200 L 11.597 20.200 11.624 18.550 C 11.657 16.507,11.615 15.684,11.414 14.437 L 11.391 14.294 11.819 14.119 C 12.274 13.932,12.440 13.815,12.440 13.680 C 12.440 13.589,12.261 13.400,12.176 13.400 C 12.147 13.400,11.947 13.463,11.732 13.540 C 11.214 13.726,10.584 13.901,10.140 13.983 C 9.863 14.034,9.627 14.045,9.120 14.031 C 8.512 14.014,8.431 14.003,8.091 13.887 C 7.413 13.657,7.016 13.413,6.807 13.098 C 6.684 12.912,6.680 12.894,6.680 12.466 C 6.680 12.034,6.683 12.020,6.841 11.693 C 7.318 10.709,8.989 9.708,10.474 9.519 C 10.911 9.463,11.814 9.506,12.180 9.600 M18.661 9.627 C 18.721 9.687,18.725 9.783,18.702 10.577 C 18.688 11.063,18.666 11.528,18.654 11.612 C 18.630 11.779,18.558 11.792,18.515 11.637 C 18.481 11.513,18.473 9.909,18.506 9.710 C 18.533 9.544,18.562 9.528,18.661 9.627 M7.818 10.658 C 7.764 10.712,7.720 10.794,7.720 10.840 C 7.720 10.954,7.895 11.120,8.015 11.120 C 8.133 11.120,8.280 10.951,8.280 10.815 C 8.280 10.690,8.146 10.560,8.018 10.560 C 7.962 10.560,7.872 10.604,7.818 10.658 M9.372 10.820 C 9.263 10.896,9.220 11.087,9.284 11.208 C 9.396 11.417,9.572 11.455,9.744 11.306 C 10.034 11.057,9.685 10.601,9.372 10.820 M19.628 12.960 C 19.606 15.014,19.587 15.314,19.472 15.385 C 19.439 15.406,19.434 14.848,19.453 13.236 C 19.468 12.039,19.491 10.992,19.505 10.910 C 19.527 10.781,19.539 10.766,19.591 10.809 C 19.644 10.853,19.648 11.119,19.628 12.960 M6.274 11.342 C 6.290 11.485,6.206 11.783,6.162 11.735 C 6.106 11.673,6.082 11.294,6.131 11.245 C 6.201 11.175,6.259 11.214,6.274 11.342 M5.064 13.987 C 5.247 15.419,5.279 15.785,5.156 15.060 C 5.062 14.506,4.800 12.707,4.800 12.614 C 4.800 12.562,4.812 12.556,4.845 12.589 C 4.870 12.614,4.968 13.243,5.064 13.987 M6.478 13.711 C 6.531 13.899,6.534 14.511,6.483 14.458 C 6.451 14.426,6.360 13.773,6.360 13.579 C 6.360 13.471,6.435 13.555,6.478 13.711 M8.293 14.550 C 8.302 14.567,8.323 14.738,8.339 14.930 C 8.367 15.282,8.334 15.375,8.241 15.202 C 8.189 15.104,8.141 14.667,8.173 14.583 C 8.199 14.517,8.263 14.499,8.293 14.550 M10.074 15.261 C 10.156 16.336,10.169 16.580,10.141 16.554 C 10.106 16.519,10.014 15.633,9.983 15.020 C 9.951 14.365,10.019 14.549,10.074 15.261 M6.018 16.212 C 6.089 16.832,6.142 17.347,6.134 17.357 C 6.091 17.408,6.061 17.231,5.957 16.313 C 5.850 15.369,5.818 14.909,5.867 15.032 C 5.879 15.060,5.946 15.591,6.018 16.212 M18.635 16.100 C 18.638 16.429,18.620 16.726,18.592 16.820 L 18.545 16.980 18.511 16.680 C 18.467 16.294,18.488 15.158,18.540 15.080 C 18.594 14.999,18.629 15.376,18.635 16.100 M16.597 17.520 C 16.598 18.115,16.583 18.565,16.560 18.600 C 16.535 18.639,16.522 18.263,16.523 17.500 C 16.525 16.816,16.540 16.373,16.560 16.420 C 16.579 16.464,16.595 16.959,16.597 17.520 M9.398 16.820 C 9.448 17.258,9.453 17.840,9.406 17.840 C 9.361 17.840,9.222 16.501,9.260 16.440 C 9.316 16.350,9.357 16.464,9.398 16.820 M7.696 17.950 C 7.767 18.625,7.778 19.077,7.721 18.935 C 7.678 18.829,7.560 17.713,7.561 17.430 C 7.563 17.055,7.630 17.311,7.696 17.950 M8.693 19.038 C 8.726 19.375,8.707 19.524,8.641 19.457 C 8.596 19.412,8.512 18.765,8.544 18.713 C 8.607 18.612,8.663 18.735,8.693 19.038 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/desktop-computer.svg b/packages/icons/svg/desktop-computer.svg
index d3897773e7..918b8f0620 100644
--- a/packages/icons/svg/desktop-computer.svg
+++ b/packages/icons/svg/desktop-computer.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.994 3.881 C 4.543 4.133,3.994 4.737,3.718 5.284 L 3.600 5.518 3.601 10.809 L 3.601 16.100 3.764 16.400 C 4.234 17.266,4.803 17.745,5.545 17.900 C 5.851 17.963,7.105 18.039,7.865 18.040 C 8.441 18.040,8.600 18.065,8.600 18.155 C 8.600 18.243,8.335 18.631,7.845 19.260 C 7.334 19.915,7.263 20.056,7.266 20.407 C 7.270 20.873,7.588 21.364,7.956 21.474 C 8.268 21.568,9.257 21.598,12.000 21.598 C 14.743 21.598,15.732 21.568,16.044 21.474 C 16.399 21.368,16.724 20.884,16.732 20.448 C 16.738 20.140,16.617 19.888,16.198 19.339 C 15.725 18.719,15.400 18.237,15.400 18.155 C 15.400 18.062,15.523 18.049,16.660 18.021 C 18.445 17.978,18.901 17.873,19.512 17.363 C 19.739 17.174,20.005 16.832,20.157 16.532 C 20.418 16.018,20.400 16.453,20.400 10.779 L 20.400 5.608 20.275 5.314 C 20.206 5.152,20.088 4.925,20.011 4.810 C 19.850 4.566,19.297 4.038,19.052 3.894 L 18.884 3.795 12.052 3.775 L 5.220 3.755 4.994 3.881 M18.000 10.200 L 18.000 14.400 12.000 14.400 L 6.000 14.400 6.000 10.200 L 6.000 6.000 12.000 6.000 L 18.000 6.000 18.000 10.200 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.914 3.935 C 4.448 4.247,3.968 4.789,3.716 5.289 L 3.600 5.518 3.600 10.805 L 3.600 16.093 3.766 16.397 C 4.105 17.015,4.551 17.486,5.010 17.709 C 5.464 17.931,5.924 17.989,7.569 18.035 C 8.181 18.052,8.533 18.077,8.562 18.106 C 8.630 18.174,8.532 18.337,7.952 19.113 C 7.667 19.494,7.400 19.881,7.358 19.973 C 7.262 20.183,7.257 20.558,7.346 20.820 C 7.433 21.076,7.761 21.416,7.980 21.477 C 8.278 21.562,9.491 21.598,12.000 21.598 C 14.509 21.598,15.722 21.562,16.020 21.477 C 16.239 21.416,16.567 21.076,16.654 20.820 C 16.779 20.454,16.722 20.091,16.488 19.747 C 16.425 19.655,16.203 19.346,15.994 19.060 C 15.518 18.410,15.375 18.169,15.431 18.113 C 15.454 18.090,15.658 18.064,15.886 18.055 C 18.149 17.966,18.569 17.918,19.002 17.699 C 19.491 17.452,19.921 17.001,20.199 16.444 C 20.299 16.245,20.335 16.106,20.363 15.824 C 20.382 15.624,20.398 13.237,20.399 10.520 L 20.400 5.579 20.198 5.168 C 20.030 4.825,19.942 4.702,19.668 4.425 C 19.488 4.243,19.241 4.029,19.120 3.950 L 18.900 3.807 12.040 3.782 L 5.180 3.758 4.914 3.935 M18.000 10.200 L 18.000 14.400 12.000 14.400 L 6.000 14.400 6.000 10.200 L 6.000 6.000 12.000 6.000 L 18.000 6.000 18.000 10.200 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/device-ipad.svg b/packages/icons/svg/device-ipad.svg
index f655665ea6..5eef741389 100644
--- a/packages/icons/svg/device-ipad.svg
+++ b/packages/icons/svg/device-ipad.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.000 2.558 C 6.293 2.583,6.246 2.599,5.784 2.970 C 5.482 3.212,5.169 3.608,4.950 4.026 L 4.800 4.312 4.800 11.997 L 4.800 19.682 4.925 19.931 C 5.264 20.608,5.788 21.132,6.469 21.475 L 6.718 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.222 21.127,18.761 20.572,19.081 19.858 L 19.200 19.593 19.200 11.955 L 19.200 4.317 19.115 4.148 C 18.806 3.532,18.225 2.880,17.819 2.695 C 17.600 2.594,17.557 2.590,16.486 2.557 C 15.297 2.521,8.024 2.522,7.000 2.558 M12.554 17.023 C 12.735 17.138,12.884 17.293,12.972 17.460 C 13.084 17.672,13.095 18.348,12.990 18.545 C 12.779 18.940,12.470 19.119,11.998 19.120 C 11.494 19.120,11.203 18.928,10.995 18.458 C 10.876 18.189,10.868 17.726,10.979 17.501 C 11.075 17.307,11.323 17.053,11.493 16.975 C 11.670 16.895,12.403 16.928,12.554 17.023 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.840 2.558 L 6.420 2.580 6.200 2.688 C 5.764 2.903,5.203 3.518,4.905 4.109 L 4.800 4.317 4.801 12.009 L 4.801 19.700 4.962 19.994 C 5.330 20.671,5.821 21.147,6.509 21.494 L 6.717 21.600 12.003 21.600 L 17.288 21.600 17.556 21.459 C 18.174 21.134,18.736 20.557,19.040 19.935 L 19.200 19.608 19.200 11.953 L 19.200 4.298 19.022 3.986 C 18.670 3.369,18.108 2.795,17.722 2.657 C 17.570 2.604,17.218 2.587,15.580 2.559 C 13.487 2.522,10.161 2.522,7.840 2.558 M12.509 17.003 C 12.665 17.063,12.951 17.381,12.997 17.546 C 13.059 17.770,13.051 18.376,12.984 18.538 C 12.892 18.758,12.631 18.988,12.395 19.058 C 11.799 19.235,11.280 19.032,11.031 18.524 C 10.900 18.258,10.880 17.714,10.993 17.496 C 11.115 17.260,11.408 16.994,11.588 16.957 C 11.762 16.921,12.373 16.952,12.509 17.003 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/device-mobile.svg b/packages/icons/svg/device-mobile.svg
index be46f314c0..2dbc48b9f4 100644
--- a/packages/icons/svg/device-mobile.svg
+++ b/packages/icons/svg/device-mobile.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.364 2.705 C 6.813 3.073,6.384 3.558,6.085 4.148 L 6.000 4.317 6.000 12.000 L 6.000 19.682 6.125 19.931 C 6.464 20.608,6.988 21.132,7.669 21.475 L 7.918 21.600 12.004 21.600 L 16.091 21.600 16.410 21.430 C 17.017 21.106,17.506 20.617,17.830 20.010 L 18.000 19.691 17.999 11.995 L 17.999 4.300 17.838 4.006 C 17.522 3.426,17.151 3.028,16.626 2.705 L 16.340 2.529 12.018 2.506 L 7.696 2.482 7.364 2.705 M12.554 17.023 C 12.735 17.138,12.884 17.293,12.972 17.460 C 13.084 17.672,13.095 18.348,12.990 18.545 C 12.779 18.940,12.470 19.119,11.998 19.120 C 11.494 19.120,11.203 18.928,10.995 18.458 C 10.876 18.189,10.868 17.726,10.979 17.501 C 11.075 17.307,11.323 17.053,11.493 16.975 C 11.670 16.895,12.403 16.928,12.554 17.023 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.339 2.730 C 6.879 3.057,6.427 3.542,6.190 3.963 L 6.000 4.300 6.001 12.000 L 6.001 19.700 6.162 19.994 C 6.530 20.671,7.021 21.147,7.709 21.494 L 7.917 21.600 12.010 21.600 L 16.103 21.600 16.432 21.410 C 17.083 21.034,17.458 20.660,17.814 20.030 L 18.000 19.700 18.000 11.999 L 18.000 4.298 17.821 3.984 C 17.478 3.382,17.186 3.072,16.620 2.710 L 16.340 2.531 12.012 2.508 L 7.683 2.485 7.339 2.730 M12.509 17.003 C 12.665 17.063,12.951 17.381,12.997 17.546 C 13.059 17.770,13.051 18.376,12.984 18.538 C 12.892 18.758,12.631 18.988,12.395 19.058 C 11.799 19.235,11.280 19.032,11.031 18.524 C 10.900 18.258,10.880 17.714,10.993 17.496 C 11.115 17.260,11.408 16.994,11.588 16.957 C 11.762 16.921,12.373 16.952,12.509 17.003 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/discord.svg b/packages/icons/svg/discord.svg
index f83e52981f..bffe0db107 100644
--- a/packages/icons/svg/discord.svg
+++ b/packages/icons/svg/discord.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.020 5.121 C 7.973 5.351,7.127 5.619,6.173 6.023 L 5.805 6.178 5.468 6.719 C 3.799 9.400,2.998 12.111,3.001 15.076 C 3.002 16.024,3.057 16.633,3.148 16.704 C 3.615 17.067,4.596 17.661,5.347 18.035 C 6.176 18.450,7.671 19.035,7.759 18.981 C 7.861 18.918,8.720 17.520,8.720 17.417 C 8.720 17.392,8.635 17.339,8.530 17.301 C 8.253 17.199,7.293 16.724,7.243 16.664 C 7.211 16.625,7.245 16.581,7.381 16.484 L 7.560 16.355 8.110 16.574 C 9.510 17.133,10.742 17.371,12.240 17.372 C 13.840 17.373,15.104 17.106,16.746 16.420 L 16.913 16.351 17.096 16.491 L 17.280 16.631 17.188 16.691 C 17.037 16.790,16.238 17.179,15.980 17.280 C 15.848 17.331,15.733 17.379,15.725 17.385 C 15.683 17.418,16.566 18.849,16.694 18.955 C 16.786 19.032,17.932 18.609,18.920 18.134 C 19.707 17.755,20.034 17.568,20.787 17.069 L 21.394 16.666 21.427 16.323 C 21.477 15.800,21.463 14.036,21.405 13.540 C 21.100 10.932,20.301 8.705,18.900 6.556 L 18.649 6.172 18.175 5.971 C 17.310 5.606,16.175 5.260,15.249 5.079 L 14.860 5.003 14.791 5.092 C 14.754 5.140,14.637 5.365,14.533 5.591 C 14.355 5.975,14.336 6.001,14.241 5.982 C 13.434 5.820,10.884 5.822,10.218 5.985 C 10.146 6.002,10.102 5.938,9.889 5.502 C 9.754 5.226,9.620 5.002,9.591 5.003 C 9.563 5.005,9.306 5.058,9.020 5.121 M9.685 10.942 C 10.437 11.207,10.924 12.087,10.800 12.958 C 10.607 14.319,9.275 14.979,8.247 14.222 C 7.528 13.693,7.305 12.616,7.737 11.765 C 8.105 11.040,8.951 10.683,9.685 10.942 M15.583 10.883 C 16.545 11.060,17.147 12.100,16.898 13.156 C 16.683 14.071,15.866 14.677,15.062 14.520 C 14.142 14.341,13.523 13.397,13.674 12.406 C 13.792 11.627,14.353 10.995,15.026 10.882 C 15.304 10.835,15.320 10.835,15.583 10.883 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.940 5.142 C 7.922 5.373,7.313 5.570,6.010 6.088 C 5.800 6.171,5.799 6.172,5.365 6.896 C 4.083 9.032,3.368 11.046,3.100 13.280 C 2.959 14.455,2.982 16.425,3.141 16.667 C 3.254 16.840,4.483 17.601,5.353 18.037 C 6.142 18.432,7.677 19.031,7.763 18.978 C 7.850 18.924,8.720 17.517,8.720 17.431 C 8.720 17.417,8.385 17.242,7.976 17.044 C 7.522 16.823,7.239 16.663,7.249 16.633 C 7.258 16.607,7.330 16.532,7.409 16.468 L 7.554 16.351 8.067 16.551 C 9.051 16.934,9.754 17.130,10.640 17.268 C 11.300 17.371,13.225 17.371,13.868 17.268 C 14.711 17.133,15.484 16.915,16.409 16.554 L 16.918 16.355 17.099 16.493 L 17.280 16.631 17.189 16.691 C 17.045 16.785,16.451 17.078,16.100 17.228 C 15.924 17.303,15.766 17.378,15.750 17.395 C 15.717 17.427,16.127 18.138,16.473 18.650 C 16.622 18.871,16.706 18.960,16.766 18.960 C 17.022 18.960,18.457 18.381,19.383 17.904 C 19.853 17.662,21.008 16.956,21.322 16.718 C 21.400 16.660,21.410 16.599,21.442 15.997 C 21.593 13.146,21.027 10.500,19.726 7.982 C 19.399 7.348,18.801 6.358,18.660 6.217 C 18.569 6.125,17.564 5.718,16.960 5.527 C 16.047 5.239,14.889 4.975,14.823 5.041 C 14.803 5.061,14.684 5.281,14.560 5.529 C 14.361 5.926,14.322 5.979,14.237 5.974 C 14.184 5.970,13.942 5.948,13.700 5.924 C 13.136 5.868,11.260 5.867,10.717 5.922 C 10.488 5.946,10.264 5.968,10.220 5.972 C 10.157 5.978,10.098 5.900,9.940 5.596 C 9.715 5.164,9.612 4.999,9.569 5.003 C 9.553 5.004,9.270 5.067,8.940 5.142 M15.642 10.903 C 16.635 11.129,17.192 12.265,16.834 13.335 C 16.566 14.139,15.808 14.654,15.090 14.522 C 14.174 14.353,13.531 13.396,13.679 12.423 C 13.796 11.660,14.331 11.041,15.000 10.895 C 15.296 10.830,15.322 10.830,15.642 10.903 M9.869 11.037 C 10.195 11.211,10.451 11.490,10.628 11.863 C 10.751 12.123,10.774 12.217,10.791 12.533 C 10.814 12.971,10.759 13.270,10.595 13.597 C 10.264 14.259,9.591 14.634,8.942 14.517 C 7.960 14.340,7.330 13.272,7.581 12.208 C 7.720 11.616,8.062 11.213,8.627 10.976 C 8.830 10.890,8.909 10.879,9.240 10.890 C 9.581 10.902,9.645 10.917,9.869 11.037 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/disqus.svg b/packages/icons/svg/disqus.svg
new file mode 100644
index 0000000000..29f43f57ec
--- /dev/null
+++ b/packages/icons/svg/disqus.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.160 3.025 C 9.251 3.205,7.672 3.808,6.193 4.922 C 5.743 5.262,4.841 6.174,4.495 6.640 C 3.569 7.888,3.017 9.210,2.776 10.760 C 2.689 11.321,2.678 12.567,2.755 13.100 C 2.874 13.920,3.133 14.865,3.403 15.467 L 3.520 15.726 2.761 17.551 C 2.344 18.555,2.007 19.379,2.012 19.383 C 2.016 19.386,2.866 19.275,3.900 19.136 C 4.934 18.996,5.816 18.882,5.860 18.882 C 5.904 18.881,6.116 19.013,6.331 19.174 C 8.406 20.731,11.084 21.330,13.672 20.816 C 14.756 20.602,16.026 20.081,16.920 19.486 C 18.552 18.399,19.775 16.873,20.434 15.100 C 22.036 10.791,20.106 6.007,15.940 3.961 C 15.066 3.531,14.149 3.244,13.200 3.102 C 12.787 3.040,11.512 2.992,11.160 3.025 M13.165 7.633 C 15.225 8.096,16.504 9.354,16.781 11.190 C 17.130 13.508,15.965 15.448,13.785 16.180 C 12.946 16.461,12.288 16.520,9.974 16.520 L 8.240 16.520 8.240 12.017 L 8.240 7.515 10.510 7.531 C 12.659 7.546,12.800 7.551,13.165 7.633 M10.760 11.995 L 10.760 14.280 11.462 14.280 C 12.578 14.280,13.117 14.120,13.617 13.640 C 14.024 13.249,14.223 12.795,14.264 12.160 C 14.340 11.011,13.711 10.115,12.620 9.816 C 12.449 9.769,12.146 9.744,11.570 9.730 L 10.760 9.711 10.760 11.995 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/docker.svg b/packages/icons/svg/docker.svg
index 3ca1966bec..ea52eddcf5 100644
--- a/packages/icons/svg/docker.svg
+++ b/packages/icons/svg/docker.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.026 3.160,9.091 3.415,8.060 3.918 C 5.287 5.272,3.420 7.913,3.059 10.992 C 2.666 14.352,4.239 17.669,7.120 19.560 C 7.929 20.090,9.126 20.589,10.092 20.797 C 14.142 21.669,18.255 19.669,20.083 15.940 C 21.302 13.453,21.302 10.547,20.083 8.060 C 19.190 6.237,17.762 4.810,15.944 3.923 C 15.066 3.494,14.269 3.244,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 M13.640 6.640 L 13.640 7.280 13.000 7.280 L 12.360 7.280 12.360 6.640 L 12.360 6.000 13.000 6.000 L 13.640 6.000 13.640 6.640 M9.800 8.600 L 9.800 9.240 9.180 9.240 L 8.560 9.240 8.560 8.600 L 8.560 7.960 9.180 7.960 L 9.800 7.960 9.800 8.600 M11.720 8.600 L 11.720 9.240 11.080 9.240 L 10.440 9.240 10.440 8.600 L 10.440 7.960 11.080 7.960 L 11.720 7.960 11.720 8.600 M13.640 8.600 L 13.640 9.240 13.000 9.240 L 12.360 9.240 12.360 8.600 L 12.360 7.960 13.000 7.960 L 13.640 7.960 13.640 8.600 M17.097 8.812 C 17.425 9.140,17.760 9.938,17.760 10.391 C 17.760 10.507,17.771 10.524,17.830 10.498 C 18.388 10.255,19.553 10.235,19.908 10.463 C 19.993 10.517,19.994 10.525,19.934 10.668 C 19.764 11.074,19.396 11.501,18.983 11.768 C 18.739 11.925,18.282 12.091,17.954 12.140 L 17.769 12.168 17.682 12.434 C 17.233 13.812,16.049 15.265,14.732 16.055 C 14.116 16.424,13.243 16.742,12.447 16.888 C 11.811 17.004,10.451 17.014,9.880 16.907 C 9.425 16.821,8.781 16.612,8.433 16.437 C 7.056 15.743,6.164 14.323,6.020 12.598 C 5.992 12.260,6.052 12.090,6.253 11.943 C 6.365 11.860,6.392 11.860,10.953 11.840 L 15.540 11.819 15.802 11.731 C 16.060 11.643,16.360 11.429,16.444 11.273 C 16.478 11.209,16.458 11.136,16.338 10.893 C 16.211 10.636,16.187 10.543,16.170 10.244 C 16.146 9.838,16.210 9.568,16.424 9.159 C 16.571 8.878,16.781 8.600,16.846 8.600 C 16.867 8.600,16.981 8.695,17.097 8.812 M7.911 10.530 L 7.900 11.180 7.270 11.191 L 6.640 11.202 6.640 10.541 L 6.640 9.880 7.281 9.880 L 7.922 9.880 7.911 10.530 M9.800 10.540 L 9.800 11.200 9.180 11.200 L 8.560 11.200 8.560 10.540 L 8.560 9.880 9.180 9.880 L 9.800 9.880 9.800 10.540 M11.720 10.541 L 11.720 11.202 11.090 11.191 L 10.460 11.180 10.449 10.530 L 10.438 9.880 11.079 9.880 L 11.720 9.880 11.720 10.541 M13.640 10.540 L 13.640 11.200 13.000 11.200 L 12.360 11.200 12.360 10.540 L 12.360 9.880 13.000 9.880 L 13.640 9.880 13.640 10.540 M15.551 10.530 L 15.540 11.180 14.910 11.191 L 14.280 11.202 14.280 10.541 L 14.280 9.880 14.921 9.880 L 15.562 9.880 15.551 10.530 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.078 3.060 C 9.848 3.209,8.988 3.464,7.940 3.990 C 7.026 4.450,6.304 4.981,5.557 5.746 C 3.305 8.050,2.464 11.369,3.348 14.460 C 4.062 16.957,5.924 19.127,8.246 20.166 C 9.610 20.777,10.903 21.039,12.300 20.988 C 16.060 20.851,19.315 18.422,20.516 14.858 C 21.158 12.953,21.159 11.050,20.521 9.160 C 20.065 7.807,19.417 6.743,18.443 5.746 C 17.703 4.988,17.012 4.478,16.080 4.002 C 14.842 3.370,13.865 3.114,12.395 3.040 C 11.507 2.995,11.624 2.994,11.078 3.060 M13.640 6.640 L 13.640 7.280 13.000 7.280 L 12.360 7.280 12.360 6.640 L 12.360 6.000 13.000 6.000 L 13.640 6.000 13.640 6.640 M9.800 8.600 L 9.800 9.240 9.180 9.240 L 8.560 9.240 8.560 8.600 L 8.560 7.960 9.180 7.960 L 9.800 7.960 9.800 8.600 M11.720 8.600 L 11.720 9.240 11.080 9.240 L 10.440 9.240 10.440 8.600 L 10.440 7.960 11.080 7.960 L 11.720 7.960 11.720 8.600 M13.640 8.600 L 13.640 9.240 13.000 9.240 L 12.360 9.240 12.360 8.600 L 12.360 7.960 13.000 7.960 L 13.640 7.960 13.640 8.600 M17.078 8.802 C 17.409 9.132,17.757 9.948,17.759 10.394 C 17.760 10.507,17.771 10.524,17.830 10.499 C 18.120 10.375,18.333 10.346,18.980 10.343 C 19.567 10.340,19.680 10.350,19.810 10.415 C 19.893 10.456,19.960 10.516,19.960 10.549 C 19.960 10.829,19.254 11.646,18.840 11.846 C 18.565 11.979,18.178 12.106,17.945 12.141 L 17.767 12.168 17.641 12.534 C 17.319 13.463,16.548 14.584,15.733 15.306 C 14.897 16.048,14.059 16.484,12.900 16.781 C 11.928 17.030,10.409 17.058,9.590 16.841 C 9.087 16.708,8.532 16.496,8.222 16.318 C 7.148 15.704,6.358 14.523,6.100 13.147 C 6.006 12.644,6.007 12.283,6.105 12.116 C 6.260 11.850,5.965 11.866,10.940 11.850 C 15.302 11.835,15.469 11.832,15.704 11.756 C 15.990 11.664,16.271 11.495,16.390 11.343 C 16.483 11.225,16.475 11.179,16.287 10.760 C 16.178 10.518,16.139 10.077,16.199 9.778 C 16.226 9.647,16.307 9.414,16.380 9.260 C 16.518 8.971,16.776 8.600,16.840 8.600 C 16.860 8.600,16.967 8.691,17.078 8.802 M7.920 10.294 C 7.920 10.522,7.908 10.819,7.894 10.954 L 7.869 11.200 7.254 11.200 L 6.640 11.200 6.640 10.540 L 6.640 9.880 7.280 9.880 L 7.920 9.880 7.920 10.294 M9.800 10.540 L 9.800 11.200 9.180 11.200 L 8.560 11.200 8.560 10.540 L 8.560 9.880 9.180 9.880 L 9.800 9.880 9.800 10.540 M11.720 10.540 L 11.720 11.200 11.106 11.200 L 10.491 11.200 10.466 10.990 C 10.452 10.875,10.441 10.578,10.440 10.330 L 10.440 9.880 11.080 9.880 L 11.720 9.880 11.720 10.540 M13.640 10.540 L 13.640 11.200 13.000 11.200 L 12.360 11.200 12.360 10.540 L 12.360 9.880 13.000 9.880 L 13.640 9.880 13.640 10.540 M15.560 10.294 C 15.560 10.522,15.548 10.819,15.534 10.954 L 15.509 11.200 14.894 11.200 L 14.280 11.200 14.280 10.540 L 14.280 9.880 14.920 9.880 L 15.560 9.880 15.560 10.294 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/document-add.svg b/packages/icons/svg/document-add.svg
index 84c2a8daae..a42a35f83f 100644
--- a/packages/icons/svg/document-add.svg
+++ b/packages/icons/svg/document-add.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 2.520 L 6.460 2.545 6.212 2.672 C 5.747 2.910,5.282 3.404,4.969 3.993 L 4.800 4.309 4.800 11.996 L 4.800 19.682 4.925 19.931 C 5.264 20.608,5.788 21.132,6.469 21.475 L 6.718 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.168 21.152,18.749 20.619,18.985 20.124 C 19.078 19.928,19.091 19.841,19.122 19.164 C 19.141 18.755,19.169 16.170,19.184 13.420 L 19.213 8.420 19.121 8.240 C 18.953 7.909,18.672 7.503,18.405 7.202 C 17.811 6.535,16.161 4.851,15.376 4.113 C 14.385 3.180,14.075 2.917,13.673 2.667 L 13.373 2.480 11.857 2.487 C 11.022 2.491,9.467 2.506,8.400 2.520 M12.368 8.565 C 12.659 8.627,12.925 8.888,13.016 9.200 C 13.085 9.439,13.141 10.127,13.184 11.265 L 13.211 11.990 13.916 12.017 C 14.957 12.057,15.839 12.119,16.014 12.165 C 16.206 12.215,16.490 12.474,16.598 12.696 C 16.718 12.944,16.712 13.429,16.586 13.701 C 16.466 13.957,16.135 14.261,15.933 14.299 C 15.627 14.356,14.833 14.398,14.035 14.399 L 13.210 14.400 13.183 15.170 C 13.153 16.015,13.098 16.854,13.056 17.118 C 13.021 17.336,12.828 17.618,12.606 17.776 C 12.439 17.895,12.416 17.900,12.026 17.900 C 11.656 17.900,11.604 17.890,11.434 17.791 C 11.221 17.666,11.012 17.421,10.959 17.236 C 10.912 17.072,10.850 16.189,10.816 15.190 L 10.789 14.400 9.965 14.398 C 8.859 14.395,8.087 14.346,7.937 14.269 C 7.872 14.235,7.726 14.110,7.613 13.989 C 7.354 13.716,7.302 13.546,7.333 13.063 C 7.353 12.752,7.371 12.685,7.473 12.543 C 7.624 12.332,7.796 12.216,8.036 12.165 C 8.258 12.117,9.111 12.057,10.105 12.018 L 10.790 11.991 10.817 11.306 C 10.876 9.779,10.918 9.314,11.015 9.100 C 11.114 8.883,11.283 8.701,11.489 8.590 C 11.641 8.508,12.045 8.496,12.368 8.565 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.578 2.520 L 6.457 2.546 6.206 2.680 C 5.733 2.932,5.195 3.530,4.885 4.148 L 4.800 4.317 4.801 12.008 L 4.801 19.700 4.962 19.994 C 5.330 20.671,5.821 21.147,6.509 21.494 L 6.717 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.108 21.184,18.757 20.587,18.968 20.135 C 19.083 19.891,19.089 19.846,19.122 19.110 C 19.140 18.686,19.168 16.099,19.182 13.360 L 19.208 8.380 19.031 8.075 C 18.933 7.907,18.751 7.637,18.625 7.475 C 18.288 7.040,16.395 5.082,15.446 4.187 C 14.372 3.174,14.172 3.002,13.740 2.717 L 13.380 2.480 12.040 2.487 C 11.303 2.491,9.745 2.506,8.578 2.520 M12.316 8.563 C 12.600 8.624,12.827 8.802,12.942 9.053 C 13.061 9.314,13.106 9.697,13.165 10.980 C 13.190 11.530,13.213 11.982,13.215 11.985 C 13.218 11.988,13.679 12.011,14.240 12.037 C 15.674 12.103,15.975 12.138,16.189 12.263 C 16.395 12.384,16.583 12.628,16.645 12.856 C 16.702 13.069,16.670 13.504,16.583 13.687 C 16.478 13.909,16.258 14.144,16.070 14.235 C 15.851 14.341,15.117 14.400,14.010 14.400 L 13.200 14.400 13.200 14.590 C 13.200 14.927,13.120 16.449,13.082 16.826 C 13.036 17.296,12.934 17.500,12.612 17.766 C 12.361 17.973,11.707 17.968,11.388 17.757 C 11.188 17.624,11.014 17.396,10.960 17.195 C 10.918 17.039,10.856 16.129,10.817 15.110 L 10.789 14.400 9.925 14.399 C 8.999 14.398,8.158 14.348,7.989 14.283 C 7.833 14.224,7.570 13.971,7.448 13.763 C 7.349 13.595,7.340 13.546,7.343 13.172 C 7.346 12.792,7.354 12.750,7.464 12.572 C 7.552 12.430,7.639 12.353,7.801 12.271 C 8.062 12.140,8.363 12.105,9.800 12.037 C 10.339 12.012,10.782 11.988,10.785 11.985 C 10.788 11.982,10.811 11.512,10.836 10.940 C 10.893 9.669,10.938 9.274,11.052 9.045 C 11.153 8.842,11.403 8.614,11.578 8.563 C 11.751 8.513,12.082 8.513,12.316 8.563 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/document-download.svg b/packages/icons/svg/document-download.svg
index 28b27f8aba..e49a9cbff3 100644
--- a/packages/icons/svg/document-download.svg
+++ b/packages/icons/svg/document-download.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 2.520 L 6.460 2.545 6.212 2.672 C 5.747 2.910,5.282 3.404,4.969 3.993 L 4.800 4.309 4.800 11.996 L 4.800 19.682 4.925 19.931 C 5.264 20.608,5.788 21.132,6.469 21.475 L 6.718 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.168 21.152,18.749 20.619,18.985 20.124 C 19.078 19.928,19.091 19.841,19.122 19.164 C 19.141 18.755,19.169 16.170,19.184 13.420 L 19.213 8.420 19.121 8.240 C 18.953 7.909,18.672 7.503,18.405 7.202 C 17.811 6.535,16.161 4.851,15.376 4.113 C 14.385 3.180,14.075 2.917,13.673 2.667 L 13.373 2.480 11.857 2.487 C 11.022 2.491,9.467 2.506,8.400 2.520 M12.670 8.689 C 12.961 8.898,13.032 9.078,13.078 9.721 C 13.099 10.019,13.136 11.009,13.161 11.921 C 13.186 12.834,13.219 13.632,13.234 13.695 C 13.262 13.809,13.264 13.808,13.781 13.319 C 14.877 12.282,15.127 12.110,15.537 12.110 C 16.025 12.110,16.405 12.303,16.578 12.637 C 16.647 12.769,16.719 13.183,16.720 13.444 L 16.720 13.628 15.865 14.524 C 14.815 15.624,13.171 17.251,12.743 17.614 C 12.213 18.062,11.882 18.093,11.407 17.740 C 10.878 17.347,7.756 14.227,7.452 13.788 C 7.360 13.656,7.342 13.582,7.327 13.281 C 7.307 12.848,7.351 12.703,7.584 12.444 C 7.809 12.194,8.039 12.100,8.420 12.101 C 8.859 12.103,9.039 12.225,10.145 13.267 C 10.457 13.560,10.731 13.800,10.755 13.800 C 10.786 13.800,10.800 13.632,10.801 13.270 C 10.802 12.123,10.883 9.841,10.935 9.499 C 10.997 9.085,11.103 8.847,11.291 8.704 C 11.510 8.537,11.595 8.518,12.051 8.537 C 12.465 8.554,12.491 8.560,12.670 8.689 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.578 2.520 L 6.457 2.546 6.206 2.680 C 5.733 2.932,5.195 3.530,4.885 4.148 L 4.800 4.317 4.801 12.008 L 4.801 19.700 4.962 19.994 C 5.330 20.671,5.821 21.147,6.509 21.494 L 6.717 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.108 21.184,18.757 20.587,18.968 20.135 C 19.083 19.891,19.089 19.846,19.122 19.110 C 19.140 18.686,19.168 16.099,19.182 13.360 L 19.208 8.380 19.031 8.075 C 18.933 7.907,18.751 7.637,18.625 7.475 C 18.288 7.040,16.395 5.082,15.446 4.187 C 14.372 3.174,14.172 3.002,13.740 2.717 L 13.380 2.480 12.040 2.487 C 11.303 2.491,9.745 2.506,8.578 2.520 M12.319 8.560 C 12.512 8.560,12.796 8.748,12.911 8.952 C 12.959 9.038,13.016 9.233,13.037 9.384 C 13.073 9.642,13.126 10.858,13.180 12.680 C 13.204 13.500,13.228 13.760,13.277 13.760 C 13.293 13.760,13.548 13.534,13.843 13.258 C 14.878 12.291,15.132 12.120,15.539 12.120 C 15.887 12.120,16.156 12.211,16.373 12.403 C 16.591 12.594,16.667 12.801,16.706 13.299 L 16.730 13.620 16.119 14.260 C 14.345 16.118,12.737 17.673,12.402 17.855 C 11.941 18.106,11.661 17.995,10.843 17.236 C 10.025 16.476,7.637 14.047,7.492 13.827 C 7.351 13.612,7.295 13.320,7.333 12.998 C 7.374 12.649,7.581 12.362,7.898 12.215 C 8.167 12.090,8.618 12.083,8.860 12.200 C 9.058 12.296,9.482 12.647,10.199 13.310 C 10.490 13.579,10.742 13.791,10.758 13.781 C 10.774 13.771,10.800 13.191,10.815 12.492 C 10.852 10.754,10.913 9.590,10.983 9.283 C 11.112 8.722,11.397 8.500,11.936 8.542 C 12.066 8.552,12.238 8.560,12.319 8.560 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/document-duplicate.svg b/packages/icons/svg/document-duplicate.svg
index 918844a82b..3a8a42b780 100644
--- a/packages/icons/svg/document-duplicate.svg
+++ b/packages/icons/svg/document-duplicate.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.618 2.520 C 10.080 2.545,10.046 2.552,9.799 2.683 C 9.345 2.924,8.768 3.549,8.485 4.108 L 8.400 4.277 8.400 9.580 L 8.400 14.883 8.505 15.091 C 8.868 15.815,9.379 16.326,10.109 16.695 L 10.317 16.800 14.400 16.800 L 18.482 16.800 18.731 16.675 C 19.105 16.488,19.428 16.244,19.749 15.906 C 20.078 15.560,20.215 15.318,20.276 14.977 C 20.341 14.617,20.399 12.012,20.400 9.446 L 20.400 7.151 20.278 6.921 C 20.100 6.589,19.813 6.243,18.948 5.324 C 17.748 4.048,16.520 2.925,16.037 2.662 L 15.838 2.554 13.869 2.519 C 11.714 2.480,11.449 2.480,10.618 2.520 M5.620 7.259 C 4.829 7.474,4.124 8.081,3.706 8.909 L 3.600 9.117 3.600 14.403 L 3.600 19.688 3.759 19.994 C 3.964 20.388,4.372 20.903,4.628 21.091 C 4.737 21.172,4.979 21.319,5.164 21.418 L 5.500 21.599 9.611 21.599 L 13.723 21.600 13.931 21.495 C 14.444 21.238,15.061 20.674,15.260 20.279 C 15.383 20.038,15.600 19.401,15.600 19.284 L 15.600 19.200 10.800 19.200 L 6.000 19.200 6.000 13.200 L 6.000 7.200 5.910 7.203 C 5.861 7.204,5.730 7.230,5.620 7.259 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.671 2.521 C 10.151 2.546,10.057 2.562,9.871 2.654 C 9.414 2.878,8.812 3.497,8.523 4.040 L 8.400 4.271 8.400 9.577 L 8.400 14.883 8.505 15.091 C 8.856 15.788,9.409 16.341,10.109 16.694 L 10.317 16.800 14.409 16.799 L 18.500 16.799 18.798 16.636 C 19.322 16.351,19.864 15.861,20.104 15.454 C 20.158 15.363,20.228 15.165,20.260 15.014 C 20.340 14.627,20.400 12.279,20.400 9.468 C 20.400 7.191,20.399 7.154,20.315 6.988 C 20.135 6.631,19.911 6.360,18.925 5.305 C 17.839 4.142,16.546 2.958,16.058 2.679 L 15.856 2.563 13.738 2.522 C 12.573 2.499,11.539 2.483,11.440 2.487 C 11.341 2.490,10.995 2.505,10.671 2.521 M5.580 7.275 C 4.843 7.487,4.088 8.145,3.705 8.909 L 3.600 9.117 3.600 14.400 L 3.600 19.683 3.706 19.891 C 3.940 20.354,4.351 20.877,4.672 21.117 C 4.779 21.198,5.013 21.340,5.190 21.432 L 5.512 21.600 9.618 21.600 L 13.723 21.600 13.892 21.514 C 14.381 21.265,15.002 20.720,15.218 20.349 C 15.338 20.143,15.600 19.409,15.600 19.279 C 15.600 19.201,15.562 19.200,10.800 19.200 L 6.000 19.200 6.000 13.200 L 6.000 7.200 5.910 7.203 C 5.861 7.204,5.712 7.237,5.580 7.275 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/document-remove.svg b/packages/icons/svg/document-remove.svg
index 859eef896c..cba9f604da 100644
--- a/packages/icons/svg/document-remove.svg
+++ b/packages/icons/svg/document-remove.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 2.520 L 6.460 2.545 6.212 2.672 C 5.747 2.910,5.282 3.404,4.969 3.993 L 4.800 4.309 4.800 11.996 L 4.800 19.682 4.925 19.931 C 5.264 20.608,5.788 21.132,6.469 21.475 L 6.718 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.168 21.152,18.749 20.619,18.985 20.124 C 19.078 19.928,19.091 19.841,19.122 19.164 C 19.141 18.755,19.169 16.170,19.184 13.420 L 19.213 8.420 19.121 8.240 C 18.953 7.909,18.672 7.503,18.405 7.202 C 17.811 6.535,16.161 4.851,15.376 4.113 C 14.385 3.180,14.075 2.917,13.673 2.667 L 13.373 2.480 11.857 2.487 C 11.022 2.491,9.467 2.506,8.400 2.520 M16.243 12.263 C 16.594 12.549,16.660 12.706,16.660 13.247 L 16.660 13.634 16.496 13.866 C 16.406 13.993,16.251 14.153,16.152 14.222 L 15.970 14.347 14.579 14.373 C 13.813 14.388,12.033 14.400,10.623 14.400 L 8.059 14.400 7.871 14.245 C 7.469 13.913,7.322 13.643,7.321 13.235 C 7.320 12.940,7.382 12.725,7.538 12.491 C 7.677 12.280,7.898 12.163,8.208 12.135 C 8.494 12.109,12.233 12.056,14.476 12.047 L 15.971 12.040 16.243 12.263 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.578 2.520 L 6.457 2.546 6.206 2.680 C 5.733 2.932,5.195 3.530,4.885 4.148 L 4.800 4.317 4.801 12.008 L 4.801 19.700 4.962 19.994 C 5.330 20.671,5.821 21.147,6.509 21.494 L 6.717 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.108 21.184,18.757 20.587,18.968 20.135 C 19.083 19.891,19.089 19.846,19.122 19.110 C 19.140 18.686,19.168 16.099,19.182 13.360 L 19.208 8.380 19.031 8.075 C 18.933 7.907,18.751 7.637,18.625 7.475 C 18.288 7.040,16.395 5.082,15.446 4.187 C 14.372 3.174,14.172 3.002,13.740 2.717 L 13.380 2.480 12.040 2.487 C 11.303 2.491,9.745 2.506,8.578 2.520 M16.295 12.330 C 16.629 12.660,16.640 12.692,16.640 13.281 L 16.640 13.673 16.483 13.871 C 16.397 13.980,16.243 14.138,16.141 14.221 L 15.955 14.374 11.998 14.392 L 8.042 14.411 7.744 14.113 C 7.491 13.860,7.437 13.781,7.378 13.580 C 7.260 13.173,7.357 12.689,7.615 12.406 C 7.766 12.240,7.984 12.157,8.333 12.134 C 8.701 12.109,12.496 12.057,14.611 12.047 L 16.002 12.040 16.295 12.330 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/document-report.svg b/packages/icons/svg/document-report.svg
index 74360002df..7c8c804cf7 100644
--- a/packages/icons/svg/document-report.svg
+++ b/packages/icons/svg/document-report.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 2.520 L 6.460 2.545 6.212 2.672 C 5.747 2.910,5.282 3.404,4.969 3.993 L 4.800 4.309 4.800 11.996 L 4.800 19.682 4.925 19.931 C 5.264 20.608,5.788 21.132,6.469 21.475 L 6.718 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.168 21.152,18.749 20.619,18.985 20.124 C 19.078 19.928,19.091 19.841,19.122 19.164 C 19.141 18.755,19.169 16.170,19.184 13.420 L 19.213 8.420 19.121 8.240 C 18.953 7.909,18.672 7.503,18.405 7.202 C 17.811 6.535,16.161 4.851,15.376 4.113 C 14.385 3.180,14.075 2.917,13.673 2.667 L 13.373 2.480 11.857 2.487 C 11.022 2.491,9.467 2.506,8.400 2.520 M16.000 8.569 C 16.207 8.632,16.471 8.826,16.546 8.971 C 16.593 9.063,16.620 9.277,16.645 9.759 C 16.678 10.425,16.759 15.855,16.760 17.513 L 16.760 18.407 16.517 18.660 C 16.383 18.800,16.202 18.963,16.115 19.023 C 15.972 19.123,15.927 19.132,15.621 19.128 C 15.239 19.122,15.092 19.072,14.855 18.866 C 14.553 18.603,14.555 18.615,14.519 16.904 C 14.501 16.066,14.474 13.994,14.459 12.300 L 14.432 9.220 14.600 9.014 C 14.818 8.746,15.076 8.564,15.289 8.526 C 15.490 8.490,15.803 8.509,16.000 8.569 M12.350 10.956 C 12.562 10.997,12.802 11.160,12.936 11.354 L 13.038 11.501 13.077 13.121 C 13.099 14.011,13.129 15.569,13.143 16.582 L 13.170 18.424 12.857 18.712 C 12.482 19.058,12.256 19.177,11.980 19.176 C 11.707 19.174,11.487 19.052,11.132 18.704 L 10.840 18.417 10.840 15.014 L 10.840 11.610 11.098 11.331 C 11.241 11.177,11.416 11.022,11.488 10.987 C 11.633 10.916,12.062 10.901,12.350 10.956 M8.748 13.362 C 8.854 13.385,9.022 13.464,9.123 13.537 C 9.455 13.779,9.440 13.655,9.440 16.228 L 9.440 18.504 9.339 18.642 C 9.149 18.901,8.794 19.110,8.482 19.147 C 8.122 19.190,7.669 18.960,7.427 18.611 L 7.317 18.451 7.279 16.976 C 7.259 16.164,7.241 15.165,7.241 14.756 L 7.240 14.012 7.485 13.744 C 7.620 13.597,7.795 13.442,7.875 13.400 C 8.041 13.312,8.440 13.295,8.748 13.362 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.578 2.520 L 6.457 2.546 6.206 2.680 C 5.733 2.932,5.195 3.530,4.885 4.148 L 4.800 4.317 4.801 12.008 L 4.801 19.700 4.962 19.994 C 5.330 20.671,5.821 21.147,6.509 21.494 L 6.717 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.108 21.184,18.757 20.587,18.968 20.135 C 19.083 19.891,19.089 19.846,19.122 19.110 C 19.140 18.686,19.168 16.099,19.182 13.360 L 19.208 8.380 19.031 8.075 C 18.933 7.907,18.751 7.637,18.625 7.475 C 18.288 7.040,16.395 5.082,15.446 4.187 C 14.372 3.174,14.172 3.002,13.740 2.717 L 13.380 2.480 12.040 2.487 C 11.303 2.491,9.745 2.506,8.578 2.520 M16.140 8.630 C 16.343 8.737,16.514 8.899,16.564 9.030 C 16.633 9.211,16.674 10.646,16.725 14.576 L 16.775 18.412 16.448 18.727 C 16.268 18.900,16.074 19.059,16.018 19.081 C 15.961 19.102,15.776 19.120,15.607 19.119 C 15.270 19.118,15.074 19.051,14.849 18.861 C 14.634 18.681,14.595 18.559,14.558 17.972 C 14.516 17.299,14.421 9.361,14.453 9.234 C 14.486 9.105,14.894 8.702,15.095 8.599 C 15.320 8.485,15.898 8.502,16.140 8.630 M12.550 11.035 C 12.734 11.129,12.996 11.387,13.021 11.500 C 13.039 11.585,13.100 14.228,13.144 16.842 L 13.171 18.424 12.876 18.693 C 12.511 19.026,12.255 19.160,11.985 19.160 C 11.713 19.160,11.515 19.055,11.148 18.717 L 10.840 18.433 10.840 15.025 L 10.840 11.616 11.042 11.389 C 11.279 11.123,11.441 11.000,11.615 10.955 C 11.828 10.900,12.377 10.947,12.550 11.035 M8.992 13.467 C 9.282 13.616,9.358 13.727,9.402 14.064 C 9.421 14.216,9.438 15.281,9.439 16.432 L 9.440 18.523 9.255 18.721 C 9.053 18.937,8.754 19.103,8.495 19.143 C 8.154 19.196,7.663 18.953,7.432 18.617 L 7.324 18.460 7.282 16.845 C 7.259 15.957,7.240 14.958,7.240 14.623 L 7.240 14.016 7.442 13.789 C 7.809 13.378,7.952 13.314,8.456 13.338 C 8.704 13.350,8.818 13.377,8.992 13.467 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/document-search.svg b/packages/icons/svg/document-search.svg
index eab87e55cf..d9d63ecf7e 100644
--- a/packages/icons/svg/document-search.svg
+++ b/packages/icons/svg/document-search.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.695 2.558 L 6.330 2.580 6.095 2.740 C 5.626 3.060,5.170 3.586,4.900 4.120 L 4.788 4.340 4.811 7.720 C 4.823 9.579,4.846 11.132,4.861 11.170 C 4.876 11.208,4.903 11.240,4.921 11.240 C 4.939 11.240,5.212 11.093,5.527 10.913 C 6.243 10.504,7.121 10.081,7.540 9.942 C 8.033 9.779,8.346 9.755,9.840 9.768 L 11.220 9.780 11.620 9.933 C 12.210 10.160,13.287 10.690,13.657 10.937 C 14.877 11.750,15.872 13.116,16.429 14.743 L 16.620 15.300 16.619 16.760 C 16.618 18.216,16.618 18.221,16.512 18.610 C 16.362 19.155,16.117 19.712,15.670 20.523 C 15.148 21.469,15.128 21.515,15.201 21.565 C 15.294 21.628,16.879 21.580,17.240 21.502 C 17.956 21.349,18.405 21.006,18.917 20.219 L 19.200 19.784 19.199 15.822 C 19.197 11.592,19.151 8.690,19.078 8.301 C 18.989 7.832,18.892 7.711,17.192 5.964 C 15.487 4.211,14.344 3.128,13.851 2.798 L 13.436 2.520 11.248 2.528 C 10.045 2.533,8.446 2.546,7.695 2.558 M8.635 12.163 C 7.634 12.310,6.347 13.169,5.687 14.131 C 5.419 14.521,5.109 15.169,5.002 15.562 C 4.900 15.935,4.842 16.505,4.841 17.149 C 4.840 17.638,4.840 17.640,5.044 18.207 C 5.156 18.520,5.291 18.874,5.344 18.993 L 5.440 19.210 4.950 19.735 C 4.253 20.480,4.010 20.750,3.834 20.972 C 3.683 21.164,3.680 21.173,3.680 21.509 C 3.680 21.928,3.732 22.113,3.910 22.321 C 4.185 22.643,4.627 22.802,5.020 22.720 C 5.255 22.671,5.450 22.532,6.198 21.882 C 6.488 21.630,6.840 21.335,6.982 21.227 L 7.239 21.029 8.010 21.295 L 8.780 21.561 9.300 21.560 C 10.508 21.559,11.289 21.355,12.080 20.833 C 12.504 20.554,13.190 19.911,13.476 19.525 C 13.713 19.205,13.992 18.655,14.138 18.220 C 14.371 17.528,14.362 16.074,14.120 15.353 C 13.883 14.645,13.524 14.081,12.947 13.507 C 12.159 12.723,11.301 12.269,10.401 12.161 C 10.008 12.113,8.963 12.115,8.635 12.163 M9.920 14.521 C 10.463 14.577,10.792 14.743,11.225 15.180 C 11.473 15.429,11.588 15.583,11.705 15.824 L 11.860 16.140 11.860 16.820 L 11.860 17.500 11.729 17.777 C 11.539 18.177,10.968 18.743,10.556 18.939 C 9.620 19.383,8.524 19.126,7.829 18.300 C 7.469 17.872,7.367 17.629,7.315 17.074 C 7.260 16.500,7.302 16.215,7.498 15.820 C 7.741 15.329,8.162 14.900,8.637 14.661 C 8.982 14.487,9.279 14.454,9.920 14.521 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.175 2.558 L 6.330 2.580 6.115 2.728 C 5.669 3.035,5.216 3.546,4.938 4.055 L 4.788 4.329 4.811 7.715 C 4.824 9.577,4.846 11.132,4.861 11.170 C 4.876 11.208,4.900 11.240,4.914 11.240 C 4.928 11.240,5.201 11.095,5.520 10.919 C 6.594 10.326,7.348 9.983,7.865 9.851 C 8.104 9.791,8.346 9.782,9.700 9.782 L 11.260 9.783 11.720 9.974 C 12.393 10.255,13.394 10.764,13.750 11.007 C 13.920 11.124,14.255 11.409,14.494 11.640 C 15.361 12.478,16.002 13.514,16.439 14.780 L 16.604 15.260 16.591 16.860 L 16.578 18.460 16.442 18.860 C 16.325 19.207,16.122 19.627,15.305 21.213 C 15.170 21.475,15.153 21.532,15.202 21.566 C 15.291 21.627,16.846 21.576,17.216 21.499 C 17.938 21.350,18.384 21.012,18.929 20.200 L 19.211 19.780 19.186 14.600 C 19.161 9.343,19.138 8.436,19.023 8.090 C 18.928 7.803,18.641 7.467,17.329 6.110 C 15.552 4.270,14.385 3.168,13.748 2.728 L 13.447 2.520 11.733 2.528 C 10.791 2.532,9.190 2.546,8.175 2.558 M8.716 12.163 C 7.954 12.244,7.028 12.741,6.266 13.479 C 5.803 13.927,5.504 14.356,5.239 14.954 C 4.940 15.628,4.841 16.164,4.840 17.116 C 4.840 17.580,4.849 17.641,4.980 18.022 C 5.057 18.248,5.191 18.608,5.277 18.823 L 5.434 19.213 4.782 19.917 C 3.982 20.780,3.763 21.033,3.716 21.153 C 3.662 21.290,3.676 21.838,3.737 22.010 C 3.860 22.354,4.149 22.598,4.555 22.702 C 5.022 22.822,5.198 22.734,6.200 21.882 C 6.541 21.592,6.915 21.281,7.030 21.192 L 7.241 21.030 8.010 21.295 L 8.780 21.561 9.301 21.561 C 10.724 21.559,11.582 21.272,12.531 20.479 C 13.854 19.375,14.397 18.160,14.303 16.515 C 14.233 15.305,13.878 14.491,13.041 13.625 C 12.163 12.716,11.322 12.270,10.280 12.161 C 9.843 12.115,9.157 12.116,8.716 12.163 M10.248 14.586 C 10.798 14.709,11.405 15.238,11.717 15.868 L 11.840 16.116 11.840 16.832 L 11.840 17.549 11.710 17.804 C 11.525 18.168,10.942 18.747,10.593 18.914 C 9.683 19.348,8.700 19.174,7.984 18.451 C 7.704 18.170,7.511 17.884,7.422 17.621 C 7.335 17.363,7.282 16.728,7.322 16.404 C 7.419 15.602,8.291 14.658,9.064 14.520 C 9.313 14.475,9.901 14.508,10.248 14.586 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/document-text.svg b/packages/icons/svg/document-text.svg
index 12d10e16a5..f09bb0a1ad 100644
--- a/packages/icons/svg/document-text.svg
+++ b/packages/icons/svg/document-text.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 2.520 L 6.460 2.545 6.212 2.672 C 5.747 2.910,5.282 3.404,4.969 3.993 L 4.800 4.309 4.800 11.996 L 4.800 19.682 4.925 19.931 C 5.264 20.608,5.788 21.132,6.469 21.475 L 6.718 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.168 21.152,18.749 20.619,18.985 20.124 C 19.078 19.928,19.091 19.841,19.122 19.164 C 19.141 18.755,19.169 16.170,19.184 13.420 L 19.213 8.420 19.121 8.240 C 18.953 7.909,18.672 7.503,18.405 7.202 C 17.811 6.535,16.161 4.851,15.376 4.113 C 14.385 3.180,14.075 2.917,13.673 2.667 L 13.373 2.480 11.857 2.487 C 11.022 2.491,9.467 2.506,8.400 2.520 M16.243 11.063 C 16.594 11.349,16.660 11.506,16.660 12.047 L 16.660 12.434 16.496 12.666 C 16.406 12.793,16.251 12.953,16.152 13.022 L 15.970 13.147 14.579 13.173 C 13.813 13.188,12.033 13.200,10.623 13.200 L 8.059 13.200 7.871 13.045 C 7.469 12.713,7.322 12.443,7.321 12.035 C 7.320 11.740,7.382 11.525,7.538 11.291 C 7.677 11.080,7.898 10.963,8.208 10.935 C 8.494 10.909,12.233 10.856,14.476 10.847 L 15.971 10.840 16.243 11.063 M16.243 15.863 C 16.594 16.149,16.660 16.306,16.660 16.847 L 16.660 17.234 16.496 17.466 C 16.406 17.593,16.251 17.753,16.152 17.822 L 15.970 17.947 14.579 17.973 C 13.813 17.988,12.033 18.000,10.623 18.000 L 8.059 18.000 7.871 17.845 C 7.469 17.513,7.322 17.243,7.321 16.835 C 7.320 16.540,7.382 16.325,7.538 16.091 C 7.677 15.880,7.898 15.763,8.208 15.735 C 8.494 15.709,12.233 15.656,14.476 15.647 L 15.971 15.640 16.243 15.863 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.578 2.520 L 6.457 2.546 6.206 2.680 C 5.733 2.932,5.195 3.530,4.885 4.148 L 4.800 4.317 4.801 12.008 L 4.801 19.700 4.962 19.994 C 5.330 20.671,5.821 21.147,6.509 21.494 L 6.717 21.600 12.000 21.600 L 17.283 21.600 17.491 21.495 C 18.108 21.184,18.757 20.587,18.968 20.135 C 19.083 19.891,19.089 19.846,19.122 19.110 C 19.140 18.686,19.168 16.099,19.182 13.360 L 19.208 8.380 19.031 8.075 C 18.933 7.907,18.751 7.637,18.625 7.475 C 18.288 7.040,16.395 5.082,15.446 4.187 C 14.372 3.174,14.172 3.002,13.740 2.717 L 13.380 2.480 12.040 2.487 C 11.303 2.491,9.745 2.506,8.578 2.520 M16.295 11.130 C 16.629 11.460,16.640 11.492,16.640 12.081 L 16.640 12.473 16.483 12.671 C 16.397 12.780,16.243 12.938,16.141 13.021 L 15.955 13.174 11.998 13.192 L 8.042 13.211 7.744 12.913 C 7.491 12.660,7.437 12.581,7.378 12.380 C 7.260 11.973,7.357 11.489,7.615 11.206 C 7.766 11.040,7.984 10.957,8.333 10.934 C 8.701 10.909,12.496 10.857,14.611 10.847 L 16.002 10.840 16.295 11.130 M16.295 15.930 C 16.629 16.260,16.640 16.292,16.640 16.881 L 16.640 17.273 16.483 17.471 C 16.397 17.580,16.243 17.738,16.141 17.821 L 15.955 17.974 11.998 17.992 L 8.042 18.011 7.744 17.713 C 7.491 17.460,7.437 17.381,7.378 17.180 C 7.260 16.773,7.357 16.289,7.615 16.006 C 7.766 15.840,7.984 15.757,8.333 15.734 C 8.701 15.709,12.496 15.657,14.611 15.647 L 16.002 15.640 16.295 15.930 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/document.svg b/packages/icons/svg/document.svg
index 965209888d..4f3af04127 100644
--- a/packages/icons/svg/document.svg
+++ b/packages/icons/svg/document.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.327 2.043 C 7.260 2.081,6.749 2.122,6.416 2.277 C 5.981 2.479,5.412 3.101,5.105 3.709 L 5.000 3.917 5.000 11.578 L 5.000 19.238 5.100 19.463 C 5.401 20.144,5.970 20.721,6.709 21.095 L 6.917 21.200 12.200 21.200 L 17.483 21.200 17.652 21.115 C 18.381 20.745,18.971 20.177,19.295 19.531 L 19.400 19.323 19.400 14.603 L 19.400 9.884 16.890 9.872 L 14.380 9.860 14.100 9.744 C 13.397 9.454,12.937 8.976,12.821 8.416 C 12.754 8.098,12.697 6.493,12.655 3.770 L 12.627 2.000 11.804 2.007 C 11.351 2.010,10.236 2.027,9.327 2.043 M14.642 5.316 L 14.640 7.893 16.730 7.865 C 18.652 7.839,19.199 7.814,19.262 7.751 C 19.376 7.637,18.332 6.478,15.868 3.980 L 14.644 2.740 14.642 5.316 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.460 2.044 C 7.099 2.088,6.624 2.136,6.260 2.368 C 5.862 2.622,5.365 3.194,5.118 3.684 L 5.000 3.918 5.000 11.587 L 5.000 19.257 5.160 19.579 C 5.453 20.170,6.013 20.728,6.646 21.060 L 6.912 21.200 12.207 21.200 L 17.502 21.200 17.814 21.022 C 18.437 20.667,18.944 20.166,19.256 19.597 L 19.400 19.333 19.400 14.608 L 19.400 9.882 16.870 9.871 L 14.340 9.860 13.949 9.669 C 13.235 9.319,12.874 8.857,12.801 8.198 C 12.754 7.775,12.691 5.804,12.656 3.650 L 12.629 2.000 11.864 2.006 C 11.444 2.010,10.362 2.027,9.460 2.044 M14.642 5.317 L 14.640 7.893 16.670 7.865 C 18.568 7.838,19.203 7.811,19.262 7.752 C 19.373 7.641,18.269 6.417,15.788 3.900 L 14.644 2.740 14.642 5.317 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/dotnet.svg b/packages/icons/svg/dotnet.svg
new file mode 100644
index 0000000000..34b440e9d5
--- /dev/null
+++ b/packages/icons/svg/dotnet.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.200 11.460 L 4.200 15.200 4.900 15.200 L 5.600 15.200 5.600 12.658 C 5.600 11.249,5.615 10.125,5.634 10.137 C 5.653 10.148,6.402 11.292,7.298 12.679 L 8.927 15.200 9.644 15.200 L 10.360 15.200 10.360 11.460 L 10.360 7.720 9.680 7.720 L 9.000 7.720 9.000 10.242 C 9.000 11.630,8.986 12.756,8.969 12.745 C 8.952 12.735,8.218 11.600,7.339 10.224 L 5.740 7.723 4.970 7.721 L 4.200 7.720 4.200 11.460 M11.600 11.460 L 11.600 15.200 13.715 15.200 L 15.831 15.200 15.860 14.563 C 15.876 14.213,15.877 13.907,15.862 13.883 C 15.844 13.854,15.392 13.840,14.418 13.840 L 13.000 13.840 13.000 12.940 L 13.000 12.040 14.261 12.040 L 15.522 12.040 15.511 11.390 L 15.500 10.740 14.250 10.729 L 13.000 10.719 13.000 9.879 L 13.000 9.040 14.340 9.040 L 15.680 9.040 15.680 8.380 L 15.680 7.720 13.640 7.720 L 11.600 7.720 11.600 11.460 M15.889 8.370 L 15.900 9.020 16.890 9.031 L 17.880 9.041 17.880 12.121 L 17.880 15.200 18.580 15.200 L 19.280 15.200 19.280 12.120 L 19.280 9.040 20.280 9.040 L 21.280 9.040 21.280 8.380 L 21.280 7.720 18.579 7.720 L 15.878 7.720 15.889 8.370 M2.180 13.716 C 1.885 13.852,1.719 14.124,1.721 14.469 C 1.723 14.950,2.069 15.280,2.571 15.280 C 2.973 15.280,3.298 14.976,3.356 14.546 C 3.378 14.385,3.368 14.295,3.318 14.175 C 3.236 13.982,3.028 13.768,2.852 13.694 C 2.671 13.619,2.370 13.628,2.180 13.716 M2.520 14.460 C 2.520 15.096,2.503 15.114,2.194 14.806 C 2.030 14.642,2.000 14.588,2.000 14.460 C 2.000 14.332,2.030 14.278,2.194 14.114 C 2.503 13.806,2.520 13.824,2.520 14.460 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/dots-circle-horizontal.svg b/packages/icons/svg/dots-circle-horizontal.svg
index 230d78bf0b..97ec7f9211 100644
--- a/packages/icons/svg/dots-circle-horizontal.svg
+++ b/packages/icons/svg/dots-circle-horizontal.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M8.400 12.000 L 8.400 13.200 7.200 13.200 L 6.000 13.200 6.000 12.000 L 6.000 10.800 7.200 10.800 L 8.400 10.800 8.400 12.000 M13.200 12.000 L 13.200 13.200 12.000 13.200 L 10.800 13.200 10.800 12.000 L 10.800 10.800 12.000 10.800 L 13.200 10.800 13.200 12.000 M18.000 12.000 L 18.000 13.200 16.800 13.200 L 15.600 13.200 15.600 12.000 L 15.600 10.800 16.800 10.800 L 18.000 10.800 18.000 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M8.400 12.000 L 8.400 13.200 7.200 13.200 L 6.000 13.200 6.000 12.000 L 6.000 10.800 7.200 10.800 L 8.400 10.800 8.400 12.000 M13.200 12.000 L 13.200 13.200 12.000 13.200 L 10.800 13.200 10.800 12.000 L 10.800 10.800 12.000 10.800 L 13.200 10.800 13.200 12.000 M18.000 12.000 L 18.000 13.200 16.800 13.200 L 15.600 13.200 15.600 12.000 L 15.600 10.800 16.800 10.800 L 18.000 10.800 18.000 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/dots-horizontal.svg b/packages/icons/svg/dots-horizontal.svg
index 25cd8b3a7b..250a1b9905 100644
--- a/packages/icons/svg/dots-horizontal.svg
+++ b/packages/icons/svg/dots-horizontal.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.409 9.740 C 11.142 9.815,11.010 9.882,10.647 10.133 C 10.281 10.384,10.047 10.649,9.854 11.029 C 9.711 11.311,9.703 11.346,9.688 11.792 C 9.657 12.673,9.817 13.094,10.389 13.643 C 10.582 13.828,10.834 14.030,10.949 14.092 C 11.511 14.393,12.562 14.394,13.074 14.094 C 13.309 13.956,13.799 13.486,13.975 13.229 C 14.182 12.927,14.282 12.604,14.307 12.160 C 14.347 11.440,14.153 10.882,13.712 10.450 C 13.395 10.141,13.312 10.077,13.045 9.942 C 12.637 9.736,11.794 9.632,11.409 9.740 M18.604 9.741 C 18.339 9.815,18.100 9.943,17.757 10.196 C 17.433 10.434,17.244 10.661,17.038 11.058 C 16.889 11.347,16.880 11.384,16.881 11.712 C 16.882 12.310,16.945 12.748,17.065 12.993 C 17.192 13.254,17.680 13.779,17.979 13.977 C 18.656 14.427,19.617 14.458,20.316 14.052 C 20.562 13.909,21.038 13.428,21.232 13.128 C 21.518 12.684,21.600 12.004,21.441 11.383 C 21.336 10.971,21.198 10.731,20.904 10.443 C 20.596 10.141,20.510 10.076,20.245 9.942 C 19.834 9.735,18.994 9.632,18.604 9.741 M3.899 9.854 C 3.568 10.014,3.178 10.301,2.976 10.533 C 2.633 10.926,2.413 11.618,2.457 12.165 C 2.501 12.724,2.679 13.112,3.085 13.540 C 3.627 14.111,4.096 14.328,4.800 14.335 C 5.143 14.338,5.267 14.322,5.480 14.247 C 6.161 14.006,6.873 13.280,7.062 12.633 C 7.170 12.263,7.162 11.621,7.045 11.300 C 6.927 10.975,6.723 10.678,6.401 10.363 C 5.885 9.858,5.517 9.722,4.659 9.721 C 4.194 9.720,4.168 9.725,3.899 9.854 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.040 9.794 C 3.818 9.881,3.445 10.117,3.183 10.335 C 2.645 10.784,2.343 11.709,2.496 12.440 C 2.593 12.903,2.768 13.208,3.160 13.600 C 3.701 14.141,4.133 14.326,4.853 14.325 C 5.311 14.324,5.549 14.259,5.899 14.036 C 6.799 13.466,7.238 12.628,7.121 11.705 C 7.052 11.163,6.862 10.824,6.356 10.341 C 5.847 9.854,5.466 9.720,4.600 9.723 C 4.334 9.723,4.166 9.745,4.040 9.794 M11.233 9.797 C 10.762 9.981,10.174 10.475,9.923 10.896 C 9.741 11.202,9.680 11.461,9.681 11.919 C 9.682 12.810,9.926 13.294,10.671 13.886 C 11.082 14.213,11.371 14.300,12.040 14.300 C 12.704 14.300,12.952 14.219,13.367 13.865 C 13.860 13.444,14.118 13.085,14.244 12.640 C 14.272 12.541,14.296 12.253,14.298 12.000 C 14.300 11.620,14.284 11.491,14.207 11.262 C 14.086 10.900,13.894 10.616,13.569 10.319 C 13.101 9.890,12.610 9.720,11.840 9.723 C 11.530 9.723,11.371 9.743,11.233 9.797 M18.431 9.801 C 17.801 10.057,17.250 10.578,16.975 11.180 C 16.873 11.403,16.870 11.428,16.891 11.955 C 16.927 12.838,17.027 13.076,17.597 13.640 C 18.085 14.123,18.551 14.321,19.204 14.323 C 19.957 14.326,20.396 14.105,20.994 13.424 C 21.111 13.290,21.251 13.095,21.304 12.991 C 21.516 12.575,21.574 11.996,21.455 11.468 C 21.351 11.001,21.224 10.776,20.862 10.417 C 20.341 9.899,19.872 9.720,19.040 9.723 C 18.721 9.724,18.575 9.743,18.431 9.801 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/dots-vertical.svg b/packages/icons/svg/dots-vertical.svg
index 350c25ee10..293a43b2eb 100644
--- a/packages/icons/svg/dots-vertical.svg
+++ b/packages/icons/svg/dots-vertical.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.099 2.654 C 10.768 2.814,10.378 3.101,10.176 3.333 C 9.833 3.726,9.613 4.418,9.657 4.965 C 9.701 5.524,9.879 5.912,10.285 6.340 C 10.827 6.911,11.296 7.128,12.000 7.135 C 12.343 7.138,12.467 7.122,12.680 7.047 C 13.361 6.806,14.073 6.080,14.262 5.433 C 14.370 5.063,14.362 4.421,14.245 4.100 C 14.127 3.775,13.923 3.478,13.601 3.163 C 13.085 2.658,12.717 2.522,11.859 2.521 C 11.394 2.520,11.368 2.525,11.099 2.654 M11.538 9.720 C 11.136 9.778,10.649 10.072,10.235 10.507 C 9.838 10.925,9.665 11.383,9.666 12.020 C 9.667 12.359,9.684 12.466,9.779 12.720 C 9.922 13.105,10.112 13.401,10.391 13.673 C 10.930 14.198,11.482 14.392,12.219 14.313 C 13.122 14.216,13.829 13.676,14.198 12.800 C 14.310 12.532,14.357 11.820,14.284 11.479 C 14.119 10.711,13.313 9.910,12.560 9.768 C 12.247 9.708,11.774 9.686,11.538 9.720 M11.499 16.919 C 11.128 16.974,10.621 17.296,10.202 17.744 C 9.800 18.174,9.680 18.517,9.680 19.237 C 9.680 19.675,9.754 20.014,9.908 20.280 C 10.043 20.512,10.653 21.140,10.860 21.260 C 11.380 21.561,12.115 21.615,12.763 21.400 C 13.376 21.197,13.915 20.670,14.198 20.000 C 14.310 19.732,14.357 19.020,14.284 18.679 C 14.119 17.911,13.313 17.111,12.560 16.968 C 12.247 16.908,11.734 16.885,11.499 16.919 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.240 2.594 C 11.018 2.681,10.645 2.917,10.383 3.135 C 9.845 3.584,9.543 4.509,9.696 5.240 C 9.793 5.703,9.968 6.008,10.360 6.400 C 10.901 6.941,11.333 7.126,12.053 7.125 C 12.511 7.124,12.749 7.059,13.099 6.836 C 13.999 6.266,14.438 5.428,14.321 4.505 C 14.252 3.963,14.062 3.624,13.556 3.141 C 13.047 2.654,12.666 2.520,11.800 2.523 C 11.534 2.523,11.366 2.545,11.240 2.594 M11.318 9.775 C 10.733 10.001,10.168 10.474,9.905 10.958 C 9.658 11.411,9.599 12.212,9.775 12.698 C 10.040 13.429,10.655 14.041,11.332 14.246 C 11.684 14.353,12.319 14.335,12.723 14.205 C 13.224 14.045,13.713 13.651,13.998 13.179 C 14.209 12.829,14.287 12.554,14.310 12.075 C 14.333 11.598,14.260 11.268,14.051 10.911 C 13.776 10.443,13.199 9.958,12.748 9.817 C 12.462 9.727,11.514 9.700,11.318 9.775 M11.236 16.993 C 10.937 17.114,10.600 17.356,10.280 17.678 C 9.824 18.137,9.680 18.502,9.680 19.200 C 9.680 19.944,9.810 20.245,10.379 20.823 C 10.806 21.258,10.943 21.345,11.381 21.459 C 11.683 21.537,12.236 21.537,12.542 21.458 C 12.998 21.341,13.268 21.183,13.617 20.829 C 14.130 20.311,14.318 19.857,14.319 19.134 C 14.321 18.404,13.941 17.740,13.259 17.284 C 12.843 17.006,12.652 16.954,11.980 16.935 C 11.501 16.921,11.393 16.930,11.236 16.993 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/download.svg b/packages/icons/svg/download.svg
index 86674dd184..fa5f1aa692 100644
--- a/packages/icons/svg/download.svg
+++ b/packages/icons/svg/download.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.493 2.584 C 11.309 2.675,11.059 2.899,10.955 3.067 C 10.870 3.206,10.864 3.268,10.835 4.337 C 10.819 4.955,10.802 7.017,10.798 8.920 C 10.794 10.823,10.779 12.434,10.765 12.500 L 10.739 12.619 10.140 12.052 C 9.075 11.045,8.857 10.900,8.420 10.905 C 7.956 10.910,7.582 11.116,7.387 11.474 C 7.165 11.881,7.202 12.259,7.503 12.663 C 7.777 13.030,9.243 14.554,10.177 15.441 C 11.063 16.281,11.550 16.679,11.785 16.751 C 11.974 16.809,12.314 16.721,12.583 16.542 C 13.229 16.116,16.153 13.178,16.607 12.500 C 16.760 12.271,16.767 12.248,16.753 12.000 C 16.735 11.686,16.624 11.440,16.397 11.211 C 16.151 10.962,16.030 10.920,15.570 10.920 C 15.173 10.920,15.171 10.921,14.976 11.067 C 14.696 11.277,14.258 11.668,13.692 12.215 L 13.200 12.690 13.200 7.949 L 13.200 3.209 12.863 2.890 C 12.640 2.678,12.484 2.563,12.398 2.546 C 12.153 2.497,11.626 2.519,11.493 2.584 M9.797 19.278 L 4.373 19.300 4.199 19.420 C 3.983 19.570,3.691 19.959,3.656 20.146 C 3.587 20.516,3.731 20.935,4.031 21.235 C 4.192 21.396,4.268 21.440,4.444 21.477 C 4.792 21.548,8.851 21.598,14.416 21.599 L 19.533 21.600 19.744 21.437 C 19.978 21.256,20.106 21.104,20.235 20.850 C 20.480 20.370,20.330 19.884,19.802 19.445 L 19.556 19.240 17.388 19.248 C 16.196 19.253,12.779 19.266,9.797 19.278 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.606 2.560 C 11.268 2.640,10.938 2.994,10.877 3.342 C 10.851 3.489,10.823 5.292,10.804 8.070 C 10.787 10.540,10.761 12.572,10.748 12.585 C 10.735 12.599,10.466 12.366,10.152 12.069 C 9.074 11.049,8.881 10.920,8.431 10.920 C 7.892 10.920,7.455 11.212,7.301 11.676 C 7.159 12.106,7.292 12.453,7.824 13.040 C 8.343 13.613,10.076 15.355,10.620 15.852 C 11.489 16.645,11.702 16.781,12.022 16.748 C 12.434 16.706,12.734 16.484,13.917 15.350 C 15.043 14.271,16.358 12.869,16.641 12.448 C 16.760 12.272,16.766 12.243,16.746 11.994 C 16.720 11.663,16.590 11.395,16.348 11.171 C 16.132 10.973,15.964 10.921,15.538 10.920 C 15.252 10.920,15.196 10.933,15.038 11.034 C 14.812 11.178,14.305 11.624,13.685 12.222 L 13.200 12.689 13.200 7.949 L 13.200 3.208 12.890 2.918 C 12.720 2.759,12.522 2.604,12.451 2.574 C 12.313 2.516,11.827 2.508,11.606 2.560 M9.998 19.278 C 4.737 19.299,4.370 19.304,4.270 19.370 C 4.095 19.485,3.856 19.754,3.739 19.968 C 3.644 20.144,3.632 20.201,3.650 20.416 C 3.681 20.808,3.932 21.222,4.246 21.399 C 4.392 21.481,4.488 21.494,5.175 21.525 C 5.596 21.545,9.000 21.571,12.740 21.583 L 19.540 21.606 19.767 21.423 C 20.193 21.077,20.412 20.606,20.324 20.222 C 20.265 19.961,20.051 19.652,19.772 19.422 L 19.551 19.240 17.585 19.248 C 16.504 19.253,13.090 19.266,9.998 19.278 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/dribbble.svg b/packages/icons/svg/dribbble.svg
index ee500953bd..0f2137c6c0 100644
--- a/packages/icons/svg/dribbble.svg
+++ b/packages/icons/svg/dribbble.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.320 3.025 C 10.097 3.137,9.094 3.416,8.015 3.943 C 6.240 4.810,4.801 6.256,3.917 8.060 C 2.386 11.183,2.802 14.904,4.987 17.631 C 6.754 19.836,9.494 21.094,12.300 20.987 C 13.659 20.935,14.750 20.661,15.980 20.062 C 18.737 18.719,20.658 15.939,20.958 12.863 C 21.317 9.165,19.316 5.578,15.980 3.941 C 15.090 3.505,14.266 3.244,13.320 3.101 C 12.909 3.039,11.677 2.992,11.320 3.025 M12.600 4.360 C 14.180 4.497,15.613 5.063,16.810 6.026 C 16.959 6.146,17.080 6.259,17.080 6.278 C 17.080 6.342,16.275 7.157,15.965 7.408 C 15.283 7.959,14.206 8.583,13.362 8.916 L 13.064 9.034 12.860 8.667 C 12.233 7.533,11.206 5.921,10.460 4.900 C 10.348 4.746,10.243 4.599,10.228 4.574 C 10.178 4.492,11.181 4.346,11.940 4.326 C 12.050 4.323,12.347 4.339,12.600 4.360 M9.113 5.590 C 9.996 6.849,11.617 9.441,11.555 9.496 C 11.522 9.526,10.305 9.802,9.700 9.917 C 8.912 10.067,7.859 10.218,7.047 10.299 C 6.326 10.370,4.531 10.464,4.498 10.432 C 4.464 10.397,4.630 9.785,4.788 9.360 C 5.321 7.932,6.208 6.753,7.440 5.834 C 7.839 5.537,8.605 5.081,8.707 5.080 C 8.734 5.080,8.916 5.310,9.113 5.590 M18.382 7.745 C 18.984 8.640,19.407 9.721,19.577 10.800 C 19.642 11.209,19.703 11.920,19.674 11.920 C 19.664 11.920,19.369 11.876,19.018 11.822 C 18.667 11.768,18.164 11.701,17.900 11.673 C 17.367 11.616,15.273 11.602,14.696 11.651 L 14.333 11.682 14.219 11.411 C 14.157 11.262,14.008 10.925,13.888 10.662 C 13.769 10.398,13.688 10.177,13.709 10.170 C 13.947 10.091,15.371 9.334,15.740 9.091 C 16.543 8.562,17.471 7.761,17.834 7.285 L 17.937 7.150 18.050 7.285 C 18.112 7.359,18.262 7.566,18.382 7.745 M12.503 11.297 C 12.666 11.636,12.800 11.931,12.800 11.952 C 12.800 11.973,12.580 12.065,12.310 12.157 C 11.309 12.497,10.092 13.178,9.160 13.920 C 8.664 14.315,7.837 15.114,7.401 15.620 C 7.074 16.000,6.418 16.878,6.348 17.030 C 6.326 17.079,6.293 17.120,6.276 17.120 C 6.258 17.120,6.129 16.972,5.987 16.790 C 4.912 15.410,4.322 13.766,4.320 12.150 L 4.320 11.800 4.450 11.799 C 4.875 11.798,6.479 11.710,7.040 11.658 C 8.660 11.508,10.691 11.136,11.920 10.765 C 12.063 10.721,12.186 10.685,12.193 10.683 C 12.200 10.681,12.339 10.958,12.503 11.297 M17.700 12.860 C 18.296 12.929,18.484 12.962,19.114 13.108 L 19.567 13.213 19.541 13.396 C 19.462 13.942,19.235 14.641,18.917 15.311 C 18.412 16.377,17.682 17.293,16.747 18.033 C 16.256 18.422,16.308 18.442,16.181 17.809 C 15.936 16.581,15.523 15.056,15.062 13.683 C 14.918 13.255,14.805 12.901,14.811 12.896 C 14.816 12.890,14.973 12.869,15.160 12.848 C 15.716 12.787,17.122 12.793,17.700 12.860 M13.475 13.530 C 13.730 14.228,14.106 15.383,14.301 16.061 C 14.651 17.283,15.036 19.021,14.971 19.084 C 14.900 19.152,13.946 19.451,13.481 19.550 C 13.015 19.650,12.911 19.657,12.000 19.657 C 11.089 19.657,10.985 19.650,10.520 19.550 C 9.492 19.330,8.558 18.944,7.750 18.403 C 7.515 18.246,7.314 18.102,7.302 18.084 C 7.274 18.038,7.659 17.428,8.012 16.960 C 8.371 16.482,9.261 15.587,9.760 15.201 C 10.345 14.749,11.019 14.320,11.677 13.984 C 12.272 13.680,13.203 13.281,13.322 13.280 C 13.362 13.280,13.417 13.369,13.475 13.530 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.213 3.046 C 10.111 3.137,9.135 3.413,8.060 3.938 C 7.104 4.405,6.490 4.835,5.746 5.558 C 4.052 7.205,3.105 9.326,3.013 11.680 C 2.892 14.789,4.418 17.749,7.036 19.486 C 9.895 21.382,13.546 21.495,16.506 19.777 C 17.684 19.094,18.762 18.068,19.531 16.900 C 20.005 16.180,20.501 15.052,20.725 14.185 C 21.432 11.440,20.729 8.411,18.874 6.215 C 18.515 5.789,17.858 5.159,17.466 4.865 C 16.147 3.875,14.508 3.215,13.031 3.081 C 12.432 3.027,11.633 3.012,11.213 3.046 M13.080 4.425 C 14.441 4.620,15.663 5.140,16.750 5.987 C 16.931 6.129,17.080 6.258,17.080 6.274 C 17.080 6.336,16.384 7.047,16.046 7.330 C 15.409 7.865,14.494 8.420,13.607 8.809 C 13.312 8.938,13.067 9.038,13.062 9.032 C 13.057 9.025,12.975 8.876,12.879 8.700 C 12.407 7.829,11.298 6.073,10.608 5.102 C 10.405 4.818,10.254 4.570,10.273 4.551 C 10.291 4.533,10.448 4.492,10.623 4.459 C 11.393 4.316,12.238 4.304,13.080 4.425 M8.901 5.310 C 9.434 5.984,11.622 9.435,11.555 9.497 C 11.547 9.505,11.261 9.576,10.920 9.655 C 8.931 10.115,7.272 10.335,5.128 10.425 L 4.475 10.452 4.501 10.336 C 4.929 8.433,6.080 6.753,7.715 5.643 C 7.978 5.465,8.643 5.080,8.688 5.080 C 8.705 5.080,8.801 5.184,8.901 5.310 M18.360 7.727 C 19.079 8.814,19.483 9.942,19.628 11.265 C 19.664 11.603,19.685 11.888,19.674 11.899 C 19.663 11.910,19.278 11.861,18.817 11.790 L 17.980 11.661 16.154 11.660 L 14.327 11.660 14.024 10.967 C 13.857 10.585,13.720 10.252,13.721 10.227 C 13.721 10.201,14.021 10.027,14.387 9.840 C 15.787 9.125,16.493 8.630,17.380 7.741 C 17.803 7.317,17.953 7.189,17.994 7.218 C 18.024 7.240,18.189 7.468,18.360 7.727 M12.480 11.254 C 12.630 11.569,12.760 11.861,12.767 11.902 C 12.778 11.964,12.695 12.009,12.280 12.166 C 11.201 12.577,9.947 13.289,9.080 13.986 C 8.238 14.663,7.036 15.978,6.490 16.821 C 6.385 16.983,6.289 17.116,6.275 17.117 C 6.261 17.119,6.142 16.980,6.010 16.810 C 4.954 15.443,4.407 13.992,4.333 12.358 L 4.308 11.816 5.364 11.766 C 5.945 11.739,6.699 11.690,7.040 11.658 C 8.594 11.513,10.561 11.159,11.700 10.821 C 11.942 10.749,12.155 10.688,12.173 10.685 C 12.191 10.682,12.329 10.938,12.480 11.254 M18.000 12.900 C 18.231 12.932,18.677 13.015,18.990 13.085 C 19.434 13.184,19.560 13.226,19.560 13.276 C 19.559 13.436,19.354 14.218,19.219 14.580 C 18.749 15.839,17.963 16.992,17.037 17.783 C 16.481 18.258,16.364 18.340,16.313 18.289 C 16.290 18.266,16.228 18.037,16.176 17.782 C 15.936 16.601,15.568 15.243,15.086 13.760 C 14.932 13.287,14.811 12.895,14.817 12.889 C 14.823 12.883,15.025 12.862,15.264 12.842 C 15.850 12.793,17.480 12.827,18.000 12.900 M13.416 13.392 C 13.499 13.552,14.084 15.315,14.275 15.981 C 14.593 17.087,14.960 18.687,14.960 18.968 L 14.960 19.107 14.590 19.233 C 13.813 19.499,13.336 19.601,12.650 19.647 C 11.118 19.751,9.874 19.516,8.580 18.879 C 8.124 18.655,7.320 18.140,7.320 18.072 C 7.320 17.897,7.994 16.943,8.499 16.403 C 9.547 15.283,10.489 14.581,11.860 13.901 C 12.449 13.609,13.213 13.282,13.309 13.281 C 13.336 13.280,13.384 13.331,13.416 13.392 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/dropbox.svg b/packages/icons/svg/dropbox.svg
index 5d0c967595..45fc470572 100644
--- a/packages/icons/svg/dropbox.svg
+++ b/packages/icons/svg/dropbox.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.379 5.333 C 4.212 6.063,3.200 6.697,3.130 6.741 L 3.003 6.822 5.244 8.217 C 7.039 9.333,7.475 9.621,7.433 9.660 C 7.404 9.686,6.403 10.318,5.210 11.063 C 4.016 11.808,3.044 12.432,3.050 12.449 C 3.064 12.491,7.448 15.251,7.502 15.252 C 7.537 15.253,11.878 12.560,11.972 12.480 C 11.990 12.464,10.996 11.824,9.764 11.056 C 8.531 10.288,7.523 9.651,7.523 9.640 C 7.523 9.629,8.531 8.992,9.764 8.224 C 10.996 7.456,11.990 6.816,11.972 6.800 C 11.937 6.770,7.818 4.191,7.620 4.076 L 7.500 4.006 5.379 5.333 M14.284 5.391 C 13.069 6.155,12.074 6.797,12.073 6.818 C 12.069 6.861,16.431 9.594,16.508 9.598 C 16.543 9.599,20.909 6.896,20.988 6.825 C 20.994 6.819,16.812 4.193,16.540 4.031 C 16.512 4.015,15.589 4.571,14.284 5.391 M14.251 11.034 C 13.036 11.796,12.042 12.429,12.041 12.440 C 12.040 12.471,16.450 15.254,16.498 15.252 C 16.529 15.251,20.934 12.516,20.989 12.464 C 21.001 12.453,16.501 9.639,16.479 9.644 C 16.468 9.647,15.466 10.272,14.251 11.034 M9.780 14.747 C 8.570 15.505,7.558 16.138,7.531 16.154 C 7.502 16.170,8.386 16.748,9.735 17.593 L 11.988 19.004 14.236 17.596 C 15.473 16.822,16.470 16.176,16.452 16.161 C 16.423 16.136,12.113 13.442,12.020 13.391 C 11.998 13.379,10.990 13.989,9.780 14.747 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.299 5.386 C 4.090 6.144,3.078 6.777,3.051 6.793 C 3.020 6.811,3.544 7.160,4.411 7.699 C 6.329 8.892,7.112 9.389,7.292 9.531 L 7.444 9.650 7.312 9.740 C 7.239 9.789,6.476 10.271,5.615 10.810 C 3.512 12.130,3.078 12.413,3.093 12.459 C 3.115 12.524,7.340 15.193,7.474 15.226 C 7.511 15.235,8.040 14.933,8.671 14.544 C 10.692 13.296,11.959 12.500,11.959 12.480 C 11.958 12.448,11.237 11.983,9.352 10.800 C 8.379 10.190,7.577 9.672,7.570 9.651 C 7.563 9.629,7.967 9.354,8.469 9.039 C 11.945 6.856,11.974 6.837,11.910 6.774 C 11.866 6.731,7.725 4.128,7.561 4.041 C 7.515 4.016,6.916 4.372,5.299 5.386 M15.776 4.472 C 14.565 5.202,12.080 6.781,12.080 6.820 C 12.080 6.861,16.047 9.355,16.429 9.555 C 16.509 9.597,16.611 9.545,17.409 9.055 C 19.017 8.069,20.916 6.879,20.938 6.843 C 20.950 6.824,20.748 6.674,20.490 6.510 C 19.097 5.625,16.551 4.040,16.524 4.040 C 16.507 4.040,16.170 4.234,15.776 4.472 M15.060 10.525 C 12.516 12.125,12.077 12.410,12.090 12.450 C 12.110 12.511,16.263 15.150,16.455 15.224 C 16.524 15.250,16.642 15.179,19.288 13.532 C 20.184 12.975,20.926 12.502,20.939 12.482 C 20.951 12.462,20.650 12.249,20.270 12.008 C 19.284 11.383,16.485 9.640,16.471 9.642 C 16.465 9.643,15.830 10.041,15.060 10.525 M11.117 13.923 C 9.653 14.817,7.560 16.139,7.560 16.168 C 7.560 16.184,7.799 16.354,8.090 16.545 C 8.548 16.846,11.508 18.714,11.866 18.928 L 11.992 19.003 13.706 17.928 C 15.848 16.584,16.442 16.196,16.417 16.155 C 16.391 16.112,12.048 13.400,12.006 13.400 C 11.988 13.400,11.588 13.636,11.117 13.923 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/duplicate.svg b/packages/icons/svg/duplicate.svg
index d12255c7b5..73e1551fac 100644
--- a/packages/icons/svg/duplicate.svg
+++ b/packages/icons/svg/duplicate.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.960 3.723 C 6.534 3.740,5.404 3.770,5.272 3.794 C 5.012 3.842,4.794 3.968,4.507 4.235 C 4.259 4.465,3.871 4.982,3.716 5.287 L 3.600 5.518 3.600 9.582 L 3.600 13.646 3.744 13.933 C 4.034 14.512,4.514 15.075,4.870 15.255 C 5.065 15.353,5.798 15.600,5.895 15.600 C 5.927 15.600,5.960 15.537,5.974 15.450 C 5.988 15.367,5.999 13.207,6.000 10.650 L 6.000 6.000 10.800 6.000 L 15.600 6.000 15.600 5.890 C 15.599 5.700,15.334 5.001,15.176 4.771 C 14.998 4.514,14.638 4.185,14.210 3.890 L 13.905 3.680 12.163 3.687 C 11.204 3.690,9.313 3.707,7.960 3.723 M9.960 8.562 C 9.343 8.954,8.909 9.398,8.587 9.970 L 8.400 10.300 8.400 14.391 L 8.400 18.483 8.505 18.691 C 8.889 19.454,9.348 19.912,10.116 20.299 L 10.333 20.408 14.356 20.392 L 18.380 20.375 18.635 20.285 C 19.323 20.043,20.007 19.362,20.295 18.633 L 20.400 18.366 20.400 14.390 L 20.400 10.414 20.297 10.160 C 20.073 9.610,19.636 9.106,19.042 8.716 L 18.744 8.520 17.118 8.520 C 16.225 8.520,14.280 8.509,12.797 8.496 L 10.100 8.473 9.960 8.562 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.380 3.722 C 5.659 3.755,5.253 3.773,5.020 3.877 C 4.634 4.048,4.089 4.628,3.758 5.220 L 3.601 5.500 3.601 9.580 L 3.601 13.660 3.779 13.991 C 4.108 14.604,4.587 15.128,4.974 15.299 C 5.376 15.477,5.880 15.616,5.933 15.564 C 5.969 15.528,5.983 14.365,5.991 10.758 L 6.001 6.000 10.801 6.000 L 15.600 6.000 15.600 5.897 C 15.600 5.762,15.421 5.242,15.272 4.945 C 15.127 4.657,14.743 4.271,14.262 3.930 L 13.910 3.680 12.365 3.687 C 11.515 3.690,9.722 3.706,8.380 3.722 M9.833 8.651 C 9.325 8.991,8.829 9.527,8.543 10.046 L 8.400 10.307 8.400 14.395 L 8.400 18.483 8.505 18.691 C 8.868 19.415,9.379 19.926,10.109 20.295 L 10.317 20.400 14.317 20.400 L 18.316 20.400 18.578 20.305 C 18.979 20.159,19.265 19.970,19.618 19.618 C 19.952 19.283,20.140 19.008,20.303 18.612 L 20.398 18.380 20.399 14.386 L 20.400 10.392 20.245 10.066 C 20.159 9.887,20.042 9.677,19.984 9.600 C 19.777 9.324,19.375 8.951,19.060 8.741 L 18.740 8.528 14.413 8.505 L 10.086 8.482 9.833 8.651 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/emoji-happy.svg b/packages/icons/svg/emoji-happy.svg
index 05eb54c38f..94e5eb9663 100644
--- a/packages/icons/svg/emoji-happy.svg
+++ b/packages/icons/svg/emoji-happy.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M8.954 8.623 C 9.135 8.738,9.284 8.893,9.372 9.060 C 9.484 9.272,9.495 9.948,9.390 10.145 C 9.179 10.540,8.870 10.719,8.398 10.720 C 7.894 10.720,7.603 10.528,7.395 10.058 C 7.276 9.789,7.268 9.326,7.379 9.101 C 7.475 8.907,7.723 8.653,7.893 8.575 C 8.070 8.495,8.803 8.528,8.954 8.623 M16.154 8.623 C 16.335 8.738,16.484 8.893,16.572 9.060 C 16.684 9.272,16.695 9.948,16.590 10.145 C 16.379 10.540,16.070 10.719,15.598 10.720 C 15.094 10.720,14.803 10.528,14.595 10.058 C 14.476 9.789,14.468 9.326,14.579 9.101 C 14.675 8.907,14.923 8.653,15.093 8.575 C 15.270 8.495,16.003 8.528,16.154 8.623 M8.752 14.320 C 9.025 14.356,9.091 14.386,9.732 14.774 C 10.966 15.520,11.012 15.535,11.980 15.536 C 12.996 15.536,13.159 15.479,14.345 14.700 L 14.924 14.320 15.339 14.320 C 15.829 14.320,15.923 14.349,16.153 14.572 C 16.422 14.833,16.458 14.925,16.459 15.360 C 16.460 15.844,16.379 16.014,15.962 16.414 C 15.205 17.136,13.997 17.723,12.901 17.901 C 12.479 17.970,11.721 17.978,11.239 17.918 C 10.239 17.796,8.990 17.253,8.312 16.646 C 7.704 16.102,7.522 15.821,7.521 15.417 C 7.520 15.071,7.615 14.831,7.855 14.573 C 8.121 14.288,8.241 14.254,8.752 14.320 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M8.909 8.603 C 9.065 8.663,9.351 8.981,9.397 9.146 C 9.459 9.370,9.451 9.976,9.384 10.138 C 9.292 10.358,9.031 10.588,8.795 10.658 C 8.199 10.835,7.680 10.632,7.431 10.124 C 7.300 9.858,7.280 9.314,7.393 9.096 C 7.515 8.860,7.808 8.594,7.988 8.557 C 8.162 8.521,8.773 8.552,8.909 8.603 M16.109 8.603 C 16.265 8.663,16.551 8.981,16.597 9.146 C 16.659 9.370,16.651 9.976,16.584 10.138 C 16.492 10.358,16.231 10.588,15.995 10.658 C 15.399 10.835,14.880 10.632,14.631 10.124 C 14.500 9.858,14.480 9.314,14.593 9.096 C 14.715 8.860,15.008 8.594,15.188 8.557 C 15.362 8.521,15.973 8.552,16.109 8.603 M9.009 14.384 C 9.091 14.412,9.442 14.605,9.789 14.812 C 10.952 15.506,11.023 15.530,11.960 15.531 C 12.351 15.531,12.714 15.511,12.842 15.482 C 13.173 15.406,13.636 15.167,14.313 14.722 L 14.925 14.320 15.293 14.320 C 15.762 14.321,15.927 14.368,16.140 14.565 C 16.392 14.796,16.440 14.926,16.440 15.368 C 16.440 15.856,16.349 16.052,15.948 16.423 C 15.374 16.954,14.550 17.424,13.716 17.694 C 13.058 17.908,12.826 17.940,11.960 17.937 C 11.286 17.935,11.128 17.922,10.800 17.842 C 10.048 17.659,9.245 17.316,8.700 16.946 C 8.351 16.709,7.792 16.155,7.657 15.911 C 7.555 15.726,7.540 15.660,7.541 15.380 C 7.542 15.105,7.558 15.031,7.656 14.854 C 7.799 14.592,7.987 14.409,8.185 14.339 C 8.360 14.276,8.764 14.298,9.009 14.384 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/emoji-sad.svg b/packages/icons/svg/emoji-sad.svg
index 02c141e3d3..8319731fa7 100644
--- a/packages/icons/svg/emoji-sad.svg
+++ b/packages/icons/svg/emoji-sad.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M8.954 8.623 C 9.135 8.738,9.284 8.893,9.372 9.060 C 9.484 9.272,9.495 9.948,9.390 10.145 C 9.179 10.540,8.870 10.719,8.398 10.720 C 7.894 10.720,7.603 10.528,7.395 10.058 C 7.276 9.789,7.268 9.326,7.379 9.101 C 7.475 8.907,7.723 8.653,7.893 8.575 C 8.070 8.495,8.803 8.528,8.954 8.623 M16.154 8.623 C 16.335 8.738,16.484 8.893,16.572 9.060 C 16.684 9.272,16.695 9.948,16.590 10.145 C 16.379 10.540,16.070 10.719,15.598 10.720 C 15.094 10.720,14.803 10.528,14.595 10.058 C 14.476 9.789,14.468 9.326,14.579 9.101 C 14.675 8.907,14.923 8.653,15.093 8.575 C 15.270 8.495,16.003 8.528,16.154 8.623 M13.179 13.404 C 13.615 13.452,14.000 13.580,14.580 13.871 C 15.384 14.273,15.898 14.644,16.244 15.072 L 16.480 15.365 16.480 15.818 L 16.480 16.271 16.321 16.463 C 16.027 16.820,15.673 16.989,15.313 16.947 C 15.082 16.919,14.865 16.810,13.882 16.224 L 13.103 15.760 12.000 15.760 L 10.897 15.760 10.118 16.224 C 9.135 16.810,8.918 16.919,8.687 16.947 C 8.327 16.989,7.973 16.820,7.679 16.463 L 7.520 16.271 7.520 15.906 C 7.520 15.705,7.539 15.474,7.561 15.392 C 7.676 14.979,8.435 14.366,9.460 13.856 C 10.111 13.532,10.520 13.399,10.980 13.359 C 11.411 13.323,12.678 13.348,13.179 13.404 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M8.909 8.603 C 9.065 8.663,9.351 8.981,9.397 9.146 C 9.459 9.370,9.451 9.976,9.384 10.138 C 9.292 10.358,9.031 10.588,8.795 10.658 C 8.199 10.835,7.680 10.632,7.431 10.124 C 7.300 9.858,7.280 9.314,7.393 9.096 C 7.515 8.860,7.808 8.594,7.988 8.557 C 8.162 8.521,8.773 8.552,8.909 8.603 M16.109 8.603 C 16.265 8.663,16.551 8.981,16.597 9.146 C 16.659 9.370,16.651 9.976,16.584 10.138 C 16.492 10.358,16.231 10.588,15.995 10.658 C 15.399 10.835,14.880 10.632,14.631 10.124 C 14.500 9.858,14.480 9.314,14.593 9.096 C 14.715 8.860,15.008 8.594,15.188 8.557 C 15.362 8.521,15.973 8.552,16.109 8.603 M13.080 13.402 C 13.604 13.456,13.995 13.581,14.608 13.892 C 15.422 14.304,15.878 14.640,16.286 15.132 L 16.480 15.364 16.480 15.831 L 16.480 16.297 16.206 16.565 C 15.991 16.776,15.886 16.847,15.719 16.897 C 15.287 17.025,15.168 16.982,13.954 16.268 L 13.091 15.760 12.000 15.760 L 10.909 15.760 10.046 16.268 C 8.832 16.982,8.713 17.025,8.281 16.897 C 8.114 16.847,8.009 16.776,7.794 16.565 L 7.520 16.297 7.520 15.970 C 7.520 15.791,7.540 15.549,7.565 15.432 C 7.605 15.244,7.647 15.184,7.935 14.897 C 8.318 14.518,8.758 14.217,9.420 13.886 C 10.368 13.411,10.563 13.367,11.766 13.363 C 12.264 13.361,12.855 13.379,13.080 13.402 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/etsy.svg b/packages/icons/svg/etsy.svg
new file mode 100644
index 0000000000..b5eac958c4
--- /dev/null
+++ b/packages/icons/svg/etsy.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.979 3.061 C 16.416 3.223,14.491 3.288,11.280 3.287 C 8.783 3.287,6.785 3.253,4.710 3.175 L 4.000 3.149 4.000 3.665 L 4.000 4.182 4.650 4.296 C 5.825 4.502,6.177 4.647,6.327 4.986 C 6.485 5.344,6.500 5.938,6.495 11.900 C 6.490 17.976,6.469 18.872,6.327 19.148 C 6.149 19.493,5.826 19.631,4.682 19.847 L 4.000 19.975 4.000 20.494 L 4.000 21.012 4.650 20.986 C 7.653 20.868,14.764 20.853,17.574 20.960 C 18.231 20.984,18.778 20.996,18.789 20.985 C 18.800 20.973,18.842 20.653,18.882 20.272 C 18.968 19.462,19.205 17.446,19.335 16.429 L 19.426 15.718 18.970 15.729 L 18.514 15.740 18.124 16.660 C 17.631 17.826,17.453 18.194,17.201 18.571 C 16.716 19.296,16.172 19.587,15.120 19.683 C 14.841 19.709,13.836 19.720,12.560 19.711 C 10.488 19.697,10.456 19.696,10.181 19.604 C 9.706 19.446,9.459 19.223,9.292 18.800 C 9.226 18.634,9.220 18.385,9.209 15.604 L 9.197 12.588 10.868 12.614 C 12.750 12.643,13.128 12.672,13.396 12.810 C 13.763 12.999,13.924 13.324,14.144 14.320 C 14.219 14.661,14.290 14.980,14.301 15.030 C 14.321 15.118,14.335 15.120,14.839 15.120 L 15.356 15.120 15.332 13.290 C 15.310 11.632,15.344 10.075,15.425 9.029 L 15.449 8.718 14.917 8.729 L 14.385 8.740 14.200 9.540 C 13.996 10.426,13.953 10.573,13.814 10.850 C 13.698 11.081,13.499 11.218,13.200 11.275 C 12.905 11.330,11.709 11.392,10.330 11.425 L 9.200 11.451 9.200 8.050 C 9.200 4.761,9.203 4.646,9.276 4.554 L 9.353 4.460 12.407 4.460 L 15.462 4.460 15.728 4.591 C 16.353 4.899,16.704 5.572,17.145 7.310 L 17.340 8.080 17.806 8.080 L 18.271 8.080 18.296 7.650 C 18.310 7.413,18.348 6.734,18.381 6.140 C 18.458 4.750,18.556 3.251,18.580 3.110 C 18.594 3.024,18.583 3.001,18.529 3.005 C 18.491 3.008,18.243 3.033,17.979 3.061 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/exclamation-circle.svg b/packages/icons/svg/exclamation-circle.svg
index 17a804fc72..0e876f0f8c 100644
--- a/packages/icons/svg/exclamation-circle.svg
+++ b/packages/icons/svg/exclamation-circle.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.546 6.255 C 12.701 6.337,12.883 6.461,12.950 6.532 L 13.073 6.660 13.122 9.539 L 13.171 12.419 12.860 12.708 C 12.488 13.055,12.257 13.177,11.980 13.176 C 11.707 13.174,11.487 13.052,11.132 12.704 L 10.840 12.417 10.840 9.614 L 10.840 6.810 11.100 6.529 C 11.448 6.154,11.615 6.070,11.982 6.091 C 12.210 6.104,12.316 6.135,12.546 6.255 M12.554 15.823 C 12.735 15.938,12.884 16.093,12.972 16.260 C 13.084 16.472,13.095 17.148,12.990 17.345 C 12.779 17.740,12.470 17.919,11.998 17.920 C 11.494 17.920,11.203 17.728,10.995 17.258 C 10.876 16.989,10.868 16.526,10.979 16.301 C 11.075 16.107,11.323 15.853,11.493 15.775 C 11.670 15.695,12.403 15.728,12.554 15.823 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.505 6.241 C 12.639 6.307,12.823 6.427,12.912 6.510 L 13.074 6.660 13.121 9.540 L 13.168 12.420 12.877 12.690 C 12.518 13.022,12.257 13.160,11.985 13.160 C 11.713 13.160,11.515 13.055,11.148 12.717 L 10.840 12.433 10.840 9.623 L 10.840 6.814 11.061 6.570 C 11.286 6.320,11.476 6.180,11.671 6.118 C 11.860 6.057,12.241 6.114,12.505 6.241 M12.509 15.803 C 12.665 15.863,12.951 16.181,12.997 16.346 C 13.059 16.570,13.051 17.176,12.984 17.338 C 12.892 17.558,12.631 17.788,12.395 17.858 C 11.799 18.035,11.280 17.832,11.031 17.324 C 10.900 17.058,10.880 16.514,10.993 16.296 C 11.115 16.060,11.408 15.794,11.588 15.757 C 11.762 15.721,12.373 15.752,12.509 15.803 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/exclamation.svg b/packages/icons/svg/exclamation.svg
index 4e8516dd2a..5263367311 100644
--- a/packages/icons/svg/exclamation.svg
+++ b/packages/icons/svg/exclamation.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.320 2.664 C 11.014 2.746,10.722 2.933,10.422 3.239 C 10.108 3.558,10.030 3.655,9.764 4.052 C 9.304 4.739,5.051 12.278,3.690 14.820 C 2.922 16.255,2.794 16.796,3.059 17.503 C 3.263 18.047,3.659 18.505,4.311 18.952 L 4.674 19.200 11.908 19.200 L 19.142 19.200 19.439 19.058 C 20.295 18.647,20.852 17.981,21.024 17.160 C 21.132 16.645,21.041 16.241,20.631 15.423 C 19.929 14.022,14.790 4.897,14.214 4.029 C 13.887 3.537,13.281 2.911,13.019 2.796 C 12.606 2.613,11.758 2.547,11.320 2.664 M12.670 6.303 C 13.063 6.572,13.040 6.403,13.040 9.027 L 13.040 11.314 12.910 11.482 C 12.838 11.575,12.702 11.707,12.606 11.775 C 12.453 11.885,12.394 11.901,12.115 11.914 C 11.941 11.922,11.736 11.917,11.661 11.903 C 11.462 11.865,11.127 11.585,11.036 11.380 C 10.938 11.158,10.893 10.404,10.858 8.360 L 10.832 6.820 11.006 6.617 C 11.102 6.506,11.261 6.347,11.360 6.265 L 11.540 6.114 11.990 6.130 C 12.438 6.145,12.441 6.146,12.670 6.303 M12.597 14.643 C 12.989 14.863,13.190 15.543,13.015 16.056 C 12.933 16.296,12.618 16.620,12.410 16.678 C 12.168 16.745,11.722 16.728,11.539 16.645 C 10.981 16.392,10.721 15.590,11.020 15.045 C 11.136 14.833,11.266 14.708,11.500 14.580 C 11.686 14.479,12.375 14.518,12.597 14.643 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.445 2.642 C 11.105 2.703,10.777 2.902,10.396 3.280 C 9.997 3.675,9.825 3.922,9.173 5.040 C 8.059 6.949,4.613 13.091,3.731 14.740 C 3.021 16.067,2.844 16.647,2.977 17.215 C 3.121 17.832,3.569 18.418,4.290 18.934 L 4.660 19.198 11.914 19.199 L 19.168 19.200 19.492 19.031 C 20.231 18.647,20.714 18.117,20.943 17.439 C 21.208 16.657,21.092 16.241,20.119 14.456 C 18.875 12.176,16.068 7.186,14.889 5.160 C 14.207 3.987,13.993 3.683,13.515 3.207 C 13.173 2.867,12.993 2.758,12.649 2.685 C 12.345 2.621,11.696 2.598,11.445 2.642 M12.670 6.301 C 13.036 6.545,13.018 6.406,13.033 9.021 L 13.045 11.302 12.920 11.461 C 12.615 11.848,12.387 11.944,11.850 11.914 C 11.617 11.901,11.551 11.879,11.385 11.760 C 11.116 11.566,11.013 11.372,10.963 10.960 C 10.923 10.640,10.841 8.116,10.840 7.205 L 10.840 6.790 11.181 6.449 L 11.522 6.108 11.988 6.133 C 12.437 6.157,12.461 6.163,12.670 6.301 M12.312 14.565 C 12.799 14.650,13.056 15.021,13.057 15.640 C 13.057 16.031,12.989 16.201,12.733 16.448 C 12.533 16.642,12.336 16.720,12.049 16.720 C 11.666 16.720,11.434 16.629,11.227 16.399 C 11.006 16.154,10.920 15.912,10.921 15.543 C 10.922 15.213,11.001 15.005,11.203 14.803 C 11.473 14.534,11.768 14.470,12.312 14.565 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/external-link.svg b/packages/icons/svg/external-link.svg
index eade46f1e0..420e87ee52 100644
--- a/packages/icons/svg/external-link.svg
+++ b/packages/icons/svg/external-link.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.080 3.759 C 12.595 3.786,12.539 3.795,12.346 4.048 C 12.086 4.390,11.996 4.788,12.100 5.144 C 12.155 5.335,12.211 5.420,12.416 5.620 C 12.552 5.754,12.717 5.885,12.782 5.910 C 12.860 5.941,13.459 5.969,14.530 5.992 C 15.426 6.011,16.173 6.039,16.188 6.055 C 16.204 6.070,15.262 7.041,14.095 8.212 C 12.928 9.382,11.382 10.943,10.659 11.680 C 8.568 13.812,8.408 14.014,8.451 14.479 C 8.506 15.087,9.007 15.520,9.668 15.530 C 10.093 15.536,9.994 15.624,14.300 11.383 C 17.690 8.044,17.917 7.823,17.939 7.846 C 17.950 7.857,17.978 8.549,18.000 9.383 C 18.023 10.217,18.052 10.963,18.066 11.040 C 18.105 11.260,18.180 11.376,18.427 11.596 C 19.008 12.114,19.548 12.062,20.142 11.432 L 20.400 11.159 20.400 8.866 C 20.400 7.605,20.388 6.080,20.373 5.476 L 20.347 4.380 20.022 4.050 L 19.698 3.720 17.559 3.728 C 16.383 3.732,14.817 3.746,14.080 3.759 M5.880 6.156 C 5.164 6.190,5.036 6.232,4.591 6.570 C 4.266 6.817,4.021 7.118,3.780 7.568 L 3.601 7.900 3.601 13.168 L 3.600 18.436 3.810 18.848 C 4.122 19.460,4.650 19.985,5.269 20.295 L 5.477 20.400 10.750 20.400 L 16.022 20.400 16.319 20.258 C 16.710 20.071,17.044 19.828,17.343 19.515 C 17.637 19.206,17.775 18.978,17.859 18.660 C 17.940 18.357,17.997 16.955,17.999 15.255 L 18.000 14.010 17.721 13.746 C 17.326 13.374,17.255 13.343,16.800 13.341 C 16.452 13.340,16.402 13.350,16.205 13.459 C 15.941 13.606,15.738 13.846,15.681 14.082 C 15.655 14.188,15.628 15.018,15.613 16.130 L 15.588 18.000 10.794 18.000 L 6.000 18.000 6.000 13.200 L 6.000 8.400 7.270 8.399 C 8.631 8.398,9.890 8.345,10.059 8.280 C 10.202 8.226,10.527 7.892,10.612 7.712 C 10.854 7.200,10.718 6.631,10.274 6.289 L 10.105 6.160 9.583 6.160 C 9.295 6.160,8.484 6.152,7.780 6.143 C 7.076 6.134,6.221 6.140,5.880 6.156 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.540 3.761 C 13.413 3.778,12.762 3.803,12.653 3.834 C 12.279 3.940,11.987 4.554,12.079 5.039 C 12.130 5.306,12.262 5.502,12.544 5.734 C 12.811 5.954,12.762 5.948,14.658 6.002 C 15.471 6.024,16.145 6.051,16.155 6.061 C 16.182 6.088,15.940 6.337,12.756 9.560 C 9.584 12.771,9.005 13.374,8.726 13.749 C 8.433 14.144,8.390 14.334,8.504 14.723 C 8.591 15.022,8.939 15.367,9.243 15.457 C 9.584 15.558,9.872 15.541,10.082 15.406 C 10.381 15.214,11.111 14.520,13.840 11.836 C 17.680 8.058,17.864 7.880,17.914 7.880 C 17.943 7.880,17.960 7.961,17.960 8.102 C 17.960 8.837,18.049 10.932,18.087 11.100 C 18.124 11.262,18.176 11.343,18.361 11.524 C 18.655 11.812,18.910 11.938,19.200 11.938 C 19.499 11.938,19.729 11.818,20.105 11.468 L 20.410 11.183 20.393 7.790 L 20.375 4.397 20.039 4.059 L 19.702 3.720 17.981 3.727 C 17.034 3.731,15.486 3.746,14.540 3.761 M5.380 6.201 C 5.115 6.241,5.001 6.289,4.728 6.475 C 4.328 6.748,3.978 7.169,3.705 7.709 L 3.600 7.917 3.600 13.180 L 3.600 18.442 3.725 18.691 C 4.089 19.412,4.619 19.967,5.249 20.284 L 5.478 20.400 10.760 20.400 L 16.042 20.400 16.291 20.275 C 16.695 20.071,17.001 19.847,17.320 19.522 C 17.645 19.190,17.805 18.914,17.875 18.560 C 17.944 18.212,18.000 16.777,18.000 15.334 L 18.000 14.007 17.710 13.738 C 17.550 13.590,17.362 13.444,17.291 13.414 C 17.212 13.381,17.010 13.360,16.766 13.360 C 16.370 13.360,16.369 13.360,16.135 13.518 C 15.865 13.699,15.742 13.864,15.683 14.120 C 15.659 14.221,15.629 15.115,15.614 16.150 L 15.587 18.000 10.793 18.000 L 6.000 18.000 6.000 13.206 L 6.000 8.411 7.770 8.385 C 8.744 8.371,9.663 8.343,9.814 8.324 C 10.073 8.291,10.100 8.278,10.307 8.075 C 10.598 7.790,10.688 7.607,10.711 7.258 C 10.735 6.887,10.633 6.641,10.338 6.362 L 10.125 6.160 7.852 6.165 C 6.603 6.168,5.490 6.184,5.380 6.201 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/eye-off.svg b/packages/icons/svg/eye-off.svg
index 63e174a237..cb9bd1633a 100644
--- a/packages/icons/svg/eye-off.svg
+++ b/packages/icons/svg/eye-off.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.196 2.535 C 2.923 2.633,2.616 2.927,2.518 3.186 C 2.494 3.248,2.475 3.413,2.475 3.554 C 2.475 3.928,2.590 4.124,3.205 4.800 C 3.808 5.462,16.297 17.956,18.425 20.026 C 19.198 20.778,19.891 21.426,19.965 21.466 C 20.179 21.582,20.643 21.564,20.904 21.430 C 21.299 21.226,21.537 20.841,21.538 20.400 C 21.539 19.971,21.381 19.749,20.110 18.401 L 19.526 17.782 20.174 17.121 C 21.565 15.701,22.182 14.853,22.862 13.421 C 23.393 12.303,23.442 12.004,23.203 11.340 C 23.036 10.877,22.566 9.935,22.237 9.406 C 21.620 8.415,20.539 7.179,19.600 6.390 C 19.016 5.900,18.223 5.395,17.362 4.966 C 16.201 4.387,15.580 4.161,14.420 3.891 L 13.940 3.780 12.080 3.780 C 10.296 3.780,10.201 3.784,9.760 3.872 C 8.804 4.065,8.022 4.302,7.034 4.699 L 6.588 4.878 5.983 4.289 C 5.137 3.466,4.462 2.856,4.223 2.697 C 3.923 2.497,3.491 2.429,3.196 2.535 M12.752 7.364 C 13.683 7.454,14.508 7.877,15.321 8.680 C 15.856 9.208,16.317 9.949,16.556 10.667 C 16.666 10.994,16.718 12.321,16.642 12.840 C 16.569 13.344,16.224 14.360,16.127 14.360 C 16.112 14.360,15.698 13.968,15.206 13.490 L 14.313 12.620 14.355 12.363 C 14.433 11.896,14.261 11.166,13.971 10.729 C 13.797 10.468,13.372 10.107,13.002 9.906 C 12.691 9.739,12.384 9.682,11.780 9.681 L 11.379 9.680 10.465 8.765 L 9.550 7.849 10.072 7.646 C 10.359 7.534,10.672 7.423,10.768 7.399 C 11.225 7.284,11.821 7.273,12.752 7.364 M2.604 8.180 C 2.067 8.763,1.089 10.540,0.716 11.611 L 0.580 12.000 0.715 12.388 C 1.215 13.822,2.196 15.397,3.330 16.589 C 4.107 17.404,4.640 17.857,5.440 18.382 C 6.722 19.223,8.028 19.760,9.780 20.170 L 10.300 20.291 11.905 20.309 C 13.508 20.327,13.510 20.327,14.025 20.223 C 14.667 20.094,14.840 20.046,14.840 20.000 C 14.840 19.980,14.133 19.256,13.270 18.391 L 11.700 16.819 11.363 16.746 C 10.429 16.543,9.714 16.231,9.167 15.788 C 8.802 15.492,8.271 14.946,8.094 14.683 C 7.770 14.201,7.405 13.299,7.258 12.614 L 7.188 12.288 5.984 11.090 C 4.516 9.630,2.836 8.000,2.798 8.000 C 2.783 8.000,2.695 8.081,2.604 8.180 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.240 2.525 C 3.044 2.584,2.753 2.808,2.617 3.004 C 2.524 3.139,2.499 3.223,2.486 3.447 C 2.466 3.809,2.540 3.999,2.853 4.393 C 3.165 4.786,9.416 11.083,14.732 16.360 C 18.778 20.376,19.806 21.375,20.002 21.482 C 20.153 21.565,20.625 21.548,20.842 21.452 C 21.215 21.287,21.437 21.000,21.517 20.576 C 21.612 20.076,21.442 19.815,20.073 18.361 L 19.527 17.781 20.094 17.200 C 21.389 15.877,22.002 15.082,22.593 13.960 C 23.117 12.968,23.394 12.181,23.338 11.847 C 23.250 11.322,22.625 9.986,22.097 9.195 C 21.482 8.275,20.437 7.098,19.641 6.431 C 18.512 5.486,16.670 4.515,15.220 4.102 C 14.113 3.787,14.247 3.800,12.101 3.800 C 9.977 3.800,9.997 3.798,8.940 4.067 C 8.387 4.207,7.462 4.518,6.882 4.759 L 6.583 4.882 6.102 4.409 C 4.944 3.273,4.349 2.751,4.060 2.617 C 3.825 2.509,3.438 2.466,3.240 2.525 M12.688 7.364 C 13.738 7.478,14.543 7.897,15.382 8.767 C 15.890 9.293,16.306 9.955,16.519 10.576 C 16.711 11.137,16.724 12.589,16.542 13.289 C 16.420 13.758,16.192 14.340,16.131 14.340 C 16.106 14.340,15.691 13.959,15.209 13.492 L 14.332 12.645 14.351 12.242 C 14.396 11.305,14.025 10.582,13.227 10.052 C 12.837 9.792,12.568 9.718,11.914 9.691 L 11.368 9.668 10.459 8.759 L 9.551 7.850 9.945 7.699 C 10.162 7.616,10.403 7.522,10.480 7.491 C 10.876 7.328,11.842 7.273,12.688 7.364 M2.611 8.173 C 2.252 8.562,1.643 9.568,1.177 10.540 C 0.874 11.173,0.600 11.867,0.600 12.002 C 0.600 12.139,0.958 13.034,1.230 13.579 C 2.221 15.561,3.816 17.353,5.589 18.476 C 6.760 19.218,7.898 19.691,9.520 20.110 L 10.220 20.290 11.844 20.310 L 13.468 20.329 14.004 20.225 C 14.650 20.099,14.849 20.045,14.832 20.003 C 14.826 19.985,14.124 19.265,13.274 18.404 L 11.728 16.837 11.194 16.702 C 10.306 16.478,9.792 16.251,9.253 15.845 C 8.828 15.525,8.205 14.869,8.004 14.532 C 7.699 14.018,7.377 13.169,7.235 12.506 L 7.186 12.272 5.303 10.424 C 3.277 8.436,2.826 8.000,2.792 8.000 C 2.780 8.000,2.699 8.078,2.611 8.173 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/eye.svg b/packages/icons/svg/eye.svg
index eb69302afa..ede6c242ea 100644
--- a/packages/icons/svg/eye.svg
+++ b/packages/icons/svg/eye.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.340 3.798 C 8.956 3.879,7.038 4.599,5.460 5.630 C 4.743 6.098,4.272 6.487,3.558 7.199 C 2.513 8.243,1.852 9.148,1.264 10.340 C 0.610 11.668,0.552 11.965,0.817 12.660 C 1.928 15.580,4.327 18.079,7.245 19.356 C 8.178 19.764,9.123 20.047,10.160 20.228 C 10.735 20.328,10.862 20.336,11.900 20.336 C 12.549 20.336,13.180 20.316,13.400 20.287 C 15.194 20.056,17.364 19.251,18.680 18.328 C 19.883 17.484,21.294 16.016,22.129 14.741 C 22.655 13.937,23.292 12.548,23.347 12.085 C 23.378 11.817,23.180 11.250,22.755 10.400 C 22.163 9.215,21.709 8.549,20.893 7.669 C 20.383 7.119,19.760 6.531,19.280 6.147 C 17.922 5.061,15.814 4.124,14.127 3.856 C 13.680 3.785,11.209 3.747,10.340 3.798 M13.136 7.398 C 13.443 7.438,14.100 7.734,14.604 8.060 C 14.960 8.290,15.548 8.853,15.837 9.241 C 16.089 9.579,16.365 10.085,16.484 10.431 C 16.676 10.983,16.746 12.321,16.620 12.990 C 16.354 14.390,15.381 15.627,14.020 16.297 C 13.778 16.416,13.436 16.564,13.260 16.626 C 12.952 16.735,12.908 16.740,12.054 16.752 L 11.168 16.765 10.797 16.641 C 10.340 16.488,9.535 16.091,9.263 15.885 C 8.560 15.352,7.897 14.487,7.529 13.622 C 7.406 13.333,7.388 13.244,7.358 12.760 C 7.339 12.463,7.323 11.926,7.322 11.567 C 7.320 10.952,7.326 10.898,7.426 10.647 C 7.843 9.594,8.446 8.766,9.209 8.197 C 9.739 7.802,10.406 7.472,10.809 7.404 C 11.090 7.358,12.787 7.353,13.136 7.398 M11.099 9.854 C 10.768 10.014,10.378 10.301,10.176 10.533 C 9.833 10.926,9.613 11.618,9.657 12.165 C 9.701 12.724,9.879 13.112,10.285 13.540 C 10.827 14.111,11.296 14.328,12.000 14.335 C 12.343 14.338,12.467 14.322,12.680 14.247 C 13.361 14.006,14.073 13.280,14.262 12.633 C 14.370 12.263,14.362 11.621,14.245 11.300 C 14.127 10.975,13.923 10.678,13.601 10.363 C 13.085 9.858,12.717 9.722,11.859 9.721 C 11.394 9.720,11.368 9.725,11.099 9.854 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.620 3.802 C 9.843 3.834,9.488 3.890,8.757 4.101 C 7.479 4.469,5.913 5.256,4.827 6.076 C 3.813 6.842,2.607 8.131,1.918 9.188 C 1.566 9.727,0.916 11.016,0.781 11.444 C 0.599 12.022,0.648 12.318,1.089 13.301 C 1.937 15.185,3.459 16.996,5.219 18.212 C 6.723 19.251,8.332 19.904,10.220 20.241 C 10.643 20.317,10.847 20.327,11.940 20.327 C 13.311 20.326,13.582 20.298,14.584 20.060 C 15.909 19.744,17.344 19.168,18.329 18.557 C 19.551 17.799,21.152 16.198,22.084 14.803 C 22.418 14.302,22.894 13.374,23.148 12.730 C 23.431 12.009,23.412 11.835,22.938 10.786 C 22.475 9.762,21.891 8.821,21.269 8.100 C 20.814 7.572,19.909 6.672,19.440 6.281 C 18.154 5.209,16.166 4.269,14.453 3.922 C 13.902 3.810,11.946 3.749,10.620 3.802 M13.380 7.461 C 13.723 7.576,14.225 7.825,14.580 8.057 C 14.973 8.313,15.617 8.936,15.895 9.329 C 16.167 9.714,16.464 10.316,16.535 10.631 C 16.704 11.372,16.717 12.601,16.564 13.220 C 16.302 14.281,15.632 15.231,14.667 15.915 C 14.398 16.105,13.602 16.507,13.220 16.644 C 13.008 16.721,12.873 16.733,12.060 16.750 L 11.140 16.769 10.740 16.620 C 10.520 16.538,10.106 16.352,9.820 16.207 C 9.321 15.952,9.280 15.921,8.798 15.441 C 8.245 14.888,7.959 14.491,7.636 13.827 C 7.381 13.302,7.355 13.127,7.347 11.840 L 7.340 10.820 7.523 10.418 C 8.082 9.187,8.778 8.396,9.820 7.810 C 10.537 7.406,10.808 7.358,12.260 7.380 C 12.989 7.390,13.222 7.407,13.380 7.461 M11.240 9.794 C 11.018 9.881,10.645 10.117,10.383 10.335 C 9.845 10.784,9.543 11.709,9.696 12.440 C 9.793 12.903,9.968 13.208,10.360 13.600 C 10.901 14.141,11.333 14.326,12.053 14.325 C 12.511 14.324,12.749 14.259,13.099 14.036 C 13.999 13.466,14.438 12.628,14.321 11.705 C 14.252 11.163,14.062 10.824,13.556 10.341 C 13.047 9.854,12.666 9.720,11.800 9.723 C 11.534 9.723,11.366 9.745,11.240 9.794 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/facebook.svg b/packages/icons/svg/facebook.svg
index 8182d072ac..21c2a3d68c 100644
--- a/packages/icons/svg/facebook.svg
+++ b/packages/icons/svg/facebook.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.140 3.042 C 7.852 3.380,5.031 5.454,3.729 8.490 C 2.958 10.286,2.796 12.371,3.279 14.280 C 3.451 14.960,3.611 15.391,3.940 16.060 C 4.877 17.964,6.379 19.428,8.300 20.308 C 8.916 20.590,9.807 20.868,10.450 20.978 L 10.600 21.004 10.600 17.842 L 10.600 14.680 9.460 14.680 L 8.320 14.680 8.320 13.381 L 8.320 12.081 9.450 12.071 L 10.580 12.060 10.604 10.680 C 10.627 9.363,10.632 9.282,10.731 8.913 C 11.010 7.864,11.610 7.169,12.562 6.789 C 12.971 6.626,13.416 6.560,14.106 6.560 C 14.650 6.560,15.736 6.646,15.930 6.704 C 15.994 6.724,16.000 6.813,16.000 7.839 L 16.000 8.953 15.170 8.969 C 14.428 8.982,14.320 8.993,14.153 9.069 C 13.877 9.195,13.666 9.407,13.536 9.690 L 13.420 9.940 13.420 11.000 L 13.420 12.060 14.650 12.071 C 15.327 12.076,15.881 12.094,15.881 12.111 C 15.882 12.127,15.797 12.712,15.692 13.410 L 15.501 14.680 14.451 14.680 L 13.400 14.680 13.400 17.842 L 13.400 21.004 13.550 20.978 C 15.383 20.664,17.211 19.679,18.501 18.310 C 20.818 15.851,21.585 12.404,20.531 9.187 C 19.906 7.276,18.606 5.588,16.900 4.470 C 15.819 3.762,14.600 3.297,13.300 3.099 C 12.806 3.023,11.624 2.992,11.140 3.042 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.600 3.116 C 7.636 3.634,5.230 5.419,3.938 8.060 C 3.502 8.950,3.216 9.889,3.073 10.900 C 2.996 11.440,3.008 12.799,3.094 13.359 C 3.247 14.346,3.524 15.221,3.955 16.080 C 5.207 18.572,7.281 20.214,10.019 20.883 C 10.282 20.947,10.521 21.000,10.549 21.000 C 10.590 21.000,10.600 20.374,10.600 17.840 L 10.600 14.680 9.460 14.680 L 8.320 14.680 8.320 13.381 L 8.320 12.081 9.450 12.071 L 10.580 12.060 10.606 10.761 C 10.635 9.296,10.644 9.199,10.786 8.746 C 11.064 7.860,11.547 7.286,12.340 6.901 C 12.896 6.631,13.190 6.580,14.160 6.583 C 14.992 6.585,15.867 6.655,15.940 6.725 C 15.964 6.749,15.985 7.196,15.992 7.856 L 16.004 8.947 15.156 8.973 C 14.396 8.995,14.291 9.007,14.128 9.086 C 13.874 9.209,13.652 9.445,13.515 9.737 L 13.399 9.987 13.409 11.023 L 13.420 12.060 14.627 12.080 C 15.290 12.091,15.843 12.110,15.855 12.121 C 15.867 12.133,15.792 12.714,15.688 13.411 L 15.501 14.680 14.450 14.680 L 13.400 14.680 13.400 17.844 L 13.400 21.007 13.570 20.979 C 13.893 20.926,14.641 20.721,15.030 20.578 C 18.035 19.473,20.234 16.888,20.835 13.752 C 21.280 11.436,20.786 8.998,19.475 7.040 C 18.136 5.039,16.156 3.699,13.786 3.193 C 13.249 3.078,13.164 3.071,12.120 3.057 C 11.187 3.045,10.956 3.054,10.600 3.116 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/fast-forward.svg b/packages/icons/svg/fast-forward.svg
index 08ae212533..e31a0b8bc5 100644
--- a/packages/icons/svg/fast-forward.svg
+++ b/packages/icons/svg/fast-forward.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.443 6.124 C 4.143 6.216,3.847 6.499,3.715 6.820 C 3.656 6.965,3.610 10.114,3.604 14.366 L 3.600 17.192 3.850 17.451 C 4.353 17.971,4.769 18.064,5.320 17.783 C 5.810 17.532,6.819 16.886,9.481 15.117 L 12.000 13.443 12.000 15.316 L 12.000 17.189 12.334 17.509 C 12.708 17.869,13.023 18.027,13.271 17.981 C 13.576 17.923,14.234 17.522,16.680 15.902 C 19.878 13.785,20.826 13.122,21.230 12.723 C 21.572 12.385,21.649 12.148,21.539 11.770 C 21.406 11.312,21.001 10.998,17.800 8.861 C 16.755 8.164,15.370 7.251,14.723 6.833 L 13.546 6.072 13.203 6.099 C 12.830 6.130,12.613 6.206,12.408 6.379 C 12.102 6.638,12.068 6.829,11.978 8.840 C 11.943 9.643,11.897 10.317,11.878 10.337 C 11.856 10.359,11.803 10.356,11.743 10.329 C 11.619 10.272,10.456 9.525,8.360 8.154 C 6.481 6.925,5.680 6.421,5.328 6.243 C 5.047 6.102,4.678 6.052,4.443 6.124 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.500 6.117 C 4.210 6.188,3.856 6.497,3.736 6.783 C 3.658 6.970,3.602 9.988,3.601 14.105 L 3.600 17.190 3.864 17.454 C 4.199 17.788,4.478 17.931,4.791 17.929 C 5.207 17.925,5.622 17.676,9.570 15.056 L 12.000 13.443 12.000 15.313 L 12.000 17.183 12.230 17.407 C 12.760 17.923,13.049 18.057,13.390 17.943 C 13.754 17.823,15.184 16.914,18.300 14.823 C 20.270 13.502,20.824 13.100,21.202 12.722 C 21.564 12.361,21.630 12.200,21.560 11.860 C 21.483 11.487,21.219 11.219,20.240 10.520 C 19.680 10.120,15.733 7.486,14.460 6.663 L 13.540 6.069 13.176 6.111 C 12.788 6.156,12.494 6.273,12.332 6.447 C 12.113 6.682,12.067 6.975,11.981 8.700 C 11.910 10.139,11.889 10.360,11.823 10.360 C 11.760 10.360,11.105 9.945,8.920 8.521 C 6.114 6.692,5.465 6.287,5.180 6.188 C 4.969 6.114,4.649 6.081,4.500 6.117 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/figma.svg b/packages/icons/svg/figma.svg
index 2d4fdb21bf..4558408b8d 100644
--- a/packages/icons/svg/figma.svg
+++ b/packages/icons/svg/figma.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.933 1.579 C 6.474 1.844,5.219 2.900,4.743 4.265 C 4.562 4.782,4.508 5.161,4.531 5.756 C 4.556 6.419,4.644 6.782,4.917 7.341 C 5.151 7.820,5.335 8.075,5.749 8.490 L 6.057 8.800 5.749 9.110 C 5.335 9.525,5.151 9.780,4.917 10.259 C 4.602 10.904,4.545 11.173,4.545 12.000 C 4.545 12.827,4.602 13.096,4.917 13.741 C 5.151 14.220,5.335 14.475,5.749 14.890 L 6.057 15.200 5.749 15.510 C 5.335 15.925,5.151 16.180,4.917 16.659 C 4.644 17.218,4.556 17.581,4.531 18.244 C 4.508 18.839,4.562 19.218,4.743 19.735 C 5.083 20.709,5.840 21.558,6.800 22.041 C 8.112 22.700,9.774 22.614,11.000 21.822 C 11.701 21.369,12.295 20.671,12.584 19.960 C 12.874 19.248,12.920 18.822,12.920 16.876 C 12.920 16.064,12.927 15.400,12.936 15.400 C 12.945 15.400,13.058 15.459,13.186 15.532 C 13.802 15.878,14.370 16.039,15.086 16.069 C 16.313 16.120,17.346 15.746,18.195 14.940 C 18.807 14.360,19.153 13.774,19.387 12.920 C 19.442 12.717,19.457 12.511,19.456 11.980 C 19.455 11.175,19.395 10.898,19.083 10.259 C 18.850 9.781,18.665 9.525,18.253 9.112 L 17.947 8.804 18.332 8.402 C 18.908 7.802,19.251 7.165,19.409 6.400 C 19.474 6.086,19.484 5.922,19.467 5.460 C 19.439 4.732,19.320 4.284,18.999 3.688 C 18.407 2.592,17.295 1.798,16.045 1.579 C 15.581 1.497,8.381 1.498,7.933 1.579 M11.080 5.604 L 11.080 7.928 9.670 7.910 C 8.108 7.890,8.074 7.885,7.543 7.608 C 7.219 7.438,6.799 7.038,6.611 6.718 C 6.448 6.443,6.320 5.949,6.320 5.600 C 6.320 5.251,6.448 4.757,6.611 4.482 C 6.800 4.161,7.219 3.762,7.543 3.593 C 8.093 3.308,8.207 3.293,9.850 3.285 L 11.080 3.280 11.080 5.604 M15.960 3.378 C 16.540 3.562,17.103 3.997,17.389 4.482 C 17.552 4.757,17.680 5.251,17.680 5.600 C 17.680 5.949,17.552 6.443,17.389 6.718 C 17.201 7.038,16.781 7.438,16.457 7.608 C 15.926 7.885,15.892 7.890,14.330 7.910 L 12.920 7.928 12.920 5.600 L 12.920 3.272 14.330 3.290 C 15.525 3.305,15.774 3.319,15.960 3.378 M11.080 12.004 L 11.080 14.328 9.670 14.310 C 8.108 14.290,8.074 14.285,7.543 14.008 C 7.219 13.838,6.799 13.438,6.611 13.118 C 6.448 12.843,6.320 12.349,6.320 12.000 C 6.320 11.651,6.448 11.157,6.611 10.882 C 6.800 10.561,7.219 10.162,7.543 9.993 C 8.093 9.708,8.207 9.693,9.850 9.685 L 11.080 9.680 11.080 12.004 M15.960 9.787 C 16.508 9.937,17.100 10.391,17.389 10.882 C 17.552 11.157,17.680 11.651,17.680 12.000 C 17.680 12.349,17.552 12.843,17.389 13.118 C 17.097 13.614,16.518 14.055,15.941 14.222 C 15.567 14.330,14.942 14.315,14.549 14.188 C 13.795 13.945,13.170 13.304,12.981 12.578 C 12.903 12.277,12.903 11.723,12.981 11.422 C 13.161 10.733,13.747 10.101,14.439 9.848 C 14.909 9.677,15.478 9.654,15.960 9.787 M11.080 17.412 C 11.080 18.478,11.068 18.790,11.019 18.978 C 10.830 19.704,10.205 20.345,9.451 20.588 C 9.058 20.715,8.433 20.730,8.059 20.622 C 7.482 20.455,6.903 20.014,6.611 19.518 C 6.448 19.243,6.320 18.749,6.320 18.400 C 6.320 18.051,6.449 17.557,6.611 17.284 C 6.879 16.833,7.365 16.427,7.860 16.242 C 8.207 16.112,8.477 16.091,9.850 16.085 L 11.080 16.080 11.080 17.412 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.520 1.559 C 7.720 1.593,7.452 1.655,6.861 1.939 C 5.519 2.584,4.609 3.907,4.532 5.324 C 4.465 6.547,4.841 7.544,5.706 8.442 L 6.051 8.800 5.706 9.158 C 5.169 9.716,4.803 10.342,4.638 10.988 C 4.526 11.426,4.526 12.574,4.638 13.012 C 4.803 13.658,5.169 14.284,5.706 14.842 L 6.051 15.200 5.706 15.558 C 4.841 16.456,4.465 17.453,4.532 18.676 C 4.625 20.383,5.890 21.881,7.635 22.351 C 7.978 22.443,8.094 22.454,8.700 22.454 C 9.311 22.454,9.420 22.443,9.779 22.347 C 11.238 21.956,12.373 20.846,12.758 19.435 C 12.881 18.987,12.919 18.357,12.920 16.810 L 12.920 15.399 13.290 15.585 C 13.780 15.832,14.139 15.951,14.600 16.022 C 15.747 16.197,16.898 15.933,17.756 15.299 C 18.757 14.560,19.357 13.546,19.440 12.450 C 19.480 11.926,19.433 11.195,19.340 10.887 C 19.153 10.271,18.793 9.676,18.295 9.159 L 17.951 8.802 18.289 8.443 C 19.229 7.444,19.591 6.401,19.442 5.119 C 19.275 3.684,18.349 2.457,16.989 1.871 C 16.222 1.540,16.406 1.554,12.600 1.541 C 10.741 1.534,8.905 1.543,8.520 1.559 M11.080 5.606 L 11.080 7.931 9.690 7.909 C 8.162 7.885,8.035 7.868,7.583 7.629 C 7.212 7.432,6.748 6.968,6.579 6.624 C 6.336 6.131,6.272 5.653,6.380 5.144 C 6.538 4.395,7.090 3.762,7.851 3.452 C 8.163 3.326,8.581 3.294,10.010 3.286 L 11.080 3.280 11.080 5.606 M15.200 3.316 C 15.983 3.351,16.109 3.386,16.600 3.701 C 17.143 4.050,17.493 4.545,17.620 5.144 C 17.728 5.653,17.664 6.131,17.421 6.624 C 17.252 6.968,16.788 7.432,16.417 7.629 C 15.965 7.868,15.838 7.885,14.310 7.909 L 12.920 7.931 12.920 5.606 L 12.920 3.280 13.710 3.283 C 14.145 3.284,14.815 3.299,15.200 3.316 M11.080 12.006 L 11.080 14.331 9.690 14.309 C 8.162 14.285,8.035 14.268,7.583 14.029 C 7.212 13.832,6.748 13.368,6.579 13.024 C 6.336 12.531,6.272 12.053,6.380 11.544 C 6.538 10.795,7.090 10.162,7.851 9.852 C 8.163 9.726,8.581 9.694,10.010 9.686 L 11.080 9.680 11.080 12.006 M16.100 9.840 C 16.660 10.054,17.224 10.547,17.442 11.012 C 17.576 11.297,17.679 11.728,17.679 12.000 C 17.679 12.292,17.571 12.720,17.421 13.024 C 17.178 13.518,16.598 14.000,16.011 14.197 C 15.707 14.298,15.071 14.310,14.690 14.220 C 13.967 14.049,13.292 13.447,13.032 12.740 C 12.959 12.540,12.944 12.416,12.944 12.000 C 12.944 11.584,12.959 11.460,13.032 11.260 C 13.288 10.564,13.957 9.960,14.671 9.780 C 15.026 9.690,15.793 9.722,16.100 9.840 M11.072 17.490 C 11.057 18.822,11.051 18.913,10.968 19.140 C 10.708 19.847,10.033 20.449,9.310 20.620 C 8.929 20.710,8.293 20.698,7.989 20.597 C 7.402 20.400,6.822 19.918,6.579 19.424 C 6.429 19.120,6.321 18.692,6.321 18.400 C 6.321 17.489,6.938 16.618,7.840 16.256 C 8.167 16.125,8.570 16.094,10.014 16.086 L 11.088 16.080 11.072 17.490 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/film.svg b/packages/icons/svg/film.svg
index 8a0d4dd7c4..a680566ee2 100644
--- a/packages/icons/svg/film.svg
+++ b/packages/icons/svg/film.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.420 3.759 C 3.646 3.783,3.893 3.751,3.408 4.149 C 3.082 4.416,2.788 4.781,2.569 5.193 L 2.400 5.509 2.400 11.996 L 2.400 18.483 2.505 18.691 C 2.888 19.451,3.349 19.912,4.109 20.295 L 4.317 20.400 10.669 20.396 C 14.162 20.394,17.633 20.381,18.383 20.366 L 19.746 20.340 20.083 20.172 C 20.632 19.897,21.092 19.429,21.438 18.794 L 21.599 18.500 21.599 12.009 L 21.600 5.517 21.494 5.309 C 21.210 4.747,20.815 4.295,20.313 3.960 L 19.955 3.720 14.407 3.729 C 11.356 3.733,7.762 3.747,6.420 3.759 M6.000 7.200 L 6.000 8.400 5.400 8.400 L 4.800 8.400 4.800 7.200 L 4.800 6.000 5.400 6.000 L 6.000 6.000 6.000 7.200 M15.600 8.400 L 15.600 10.800 12.000 10.800 L 8.400 10.800 8.400 8.400 L 8.400 6.000 12.000 6.000 L 15.600 6.000 15.600 8.400 M19.200 7.200 L 19.200 8.400 18.600 8.400 L 18.000 8.400 18.000 7.200 L 18.000 6.000 18.600 6.000 L 19.200 6.000 19.200 7.200 M6.000 12.000 L 6.000 13.200 5.400 13.200 L 4.800 13.200 4.800 12.000 L 4.800 10.800 5.400 10.800 L 6.000 10.800 6.000 12.000 M19.200 12.000 L 19.200 13.200 18.600 13.200 L 18.000 13.200 18.000 12.000 L 18.000 10.800 18.600 10.800 L 19.200 10.800 19.200 12.000 M15.600 15.600 L 15.600 18.000 12.000 18.000 L 8.400 18.000 8.400 15.600 L 8.400 13.200 12.000 13.200 L 15.600 13.200 15.600 15.600 M6.000 16.800 L 6.000 18.000 5.400 18.000 L 4.800 18.000 4.800 16.800 L 4.800 15.600 5.400 15.600 L 6.000 15.600 6.000 16.800 M19.200 16.800 L 19.200 18.000 18.600 18.000 L 18.000 18.000 18.000 16.800 L 18.000 15.600 18.600 15.600 L 19.200 15.600 19.200 16.800 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.820 3.763 C 5.593 3.778,4.044 3.805,3.960 3.828 C 3.727 3.893,3.590 3.981,3.295 4.254 C 3.004 4.524,2.689 4.945,2.505 5.309 L 2.400 5.517 2.400 12.000 L 2.400 18.483 2.505 18.691 C 2.876 19.424,3.384 19.932,4.117 20.300 L 4.335 20.409 12.017 20.394 L 19.700 20.378 20.034 20.199 C 20.649 19.870,21.029 19.492,21.410 18.832 L 21.600 18.503 21.600 12.010 L 21.600 5.517 21.494 5.309 C 21.223 4.773,20.830 4.328,20.294 3.950 L 19.968 3.720 15.754 3.728 C 13.436 3.733,9.866 3.748,7.820 3.763 M6.000 7.200 L 6.000 8.400 5.400 8.400 L 4.800 8.400 4.800 7.200 L 4.800 6.000 5.400 6.000 L 6.000 6.000 6.000 7.200 M15.600 8.400 L 15.600 10.800 12.000 10.800 L 8.400 10.800 8.400 8.400 L 8.400 6.000 12.000 6.000 L 15.600 6.000 15.600 8.400 M19.200 7.200 L 19.200 8.400 18.600 8.400 L 18.000 8.400 18.000 7.200 L 18.000 6.000 18.600 6.000 L 19.200 6.000 19.200 7.200 M6.000 12.000 L 6.000 13.200 5.400 13.200 L 4.800 13.200 4.800 12.000 L 4.800 10.800 5.400 10.800 L 6.000 10.800 6.000 12.000 M19.200 12.000 L 19.200 13.200 18.600 13.200 L 18.000 13.200 18.000 12.000 L 18.000 10.800 18.600 10.800 L 19.200 10.800 19.200 12.000 M15.600 15.600 L 15.600 18.000 12.000 18.000 L 8.400 18.000 8.400 15.600 L 8.400 13.200 12.000 13.200 L 15.600 13.200 15.600 15.600 M6.000 16.800 L 6.000 18.000 5.400 18.000 L 4.800 18.000 4.800 16.800 L 4.800 15.600 5.400 15.600 L 6.000 15.600 6.000 16.800 M19.200 16.800 L 19.200 18.000 18.600 18.000 L 18.000 18.000 18.000 16.800 L 18.000 15.600 18.600 15.600 L 19.200 15.600 19.200 16.800 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/filter-line.svg b/packages/icons/svg/filter-line.svg
new file mode 100644
index 0000000000..44557e0655
--- /dev/null
+++ b/packages/icons/svg/filter-line.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.918 4.054 C 4.370 4.203,4.026 4.660,4.023 5.240 C 4.022 5.635,4.133 5.891,4.424 6.157 C 4.810 6.509,4.122 6.480,12.000 6.480 C 19.878 6.480,19.190 6.509,19.576 6.157 C 19.866 5.892,19.978 5.636,19.978 5.239 C 19.978 4.991,19.958 4.897,19.868 4.712 C 19.741 4.453,19.510 4.228,19.245 4.105 L 19.060 4.020 12.080 4.012 C 6.649 4.007,5.060 4.016,4.918 4.054 M6.809 10.587 C 6.567 10.673,6.230 10.994,6.116 11.249 C 5.990 11.531,5.987 11.976,6.108 12.245 C 6.226 12.508,6.451 12.740,6.714 12.869 L 6.940 12.980 12.000 12.980 L 17.060 12.980 17.286 12.869 C 17.732 12.650,17.975 12.261,17.977 11.760 C 17.978 11.365,17.867 11.109,17.576 10.843 C 17.194 10.494,17.634 10.520,11.983 10.523 C 7.629 10.526,6.958 10.534,6.809 10.587 M8.918 17.054 C 8.370 17.204,8.026 17.660,8.023 18.240 C 8.022 18.635,8.133 18.891,8.424 19.157 C 8.796 19.496,8.615 19.480,12.000 19.480 C 15.385 19.480,15.204 19.496,15.576 19.157 C 15.866 18.892,15.978 18.636,15.978 18.239 C 15.978 17.991,15.958 17.897,15.868 17.712 C 15.741 17.453,15.510 17.228,15.245 17.105 C 15.062 17.021,15.031 17.020,12.080 17.012 C 9.809 17.006,9.057 17.016,8.918 17.054 " stroke="none" fill="black" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/filter.svg b/packages/icons/svg/filter.svg
index 54b87f1005..e6ab27d9c1 100644
--- a/packages/icons/svg/filter.svg
+++ b/packages/icons/svg/filter.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.800 2.485 C 7.041 2.503,4.798 2.534,4.612 2.557 C 4.223 2.604,4.015 2.700,3.859 2.905 C 3.649 3.180,3.638 3.292,3.612 5.482 L 3.588 7.504 3.844 7.801 C 4.265 8.291,5.550 9.621,7.634 11.726 L 9.600 13.712 9.601 16.526 C 9.603 19.354,9.634 20.462,9.722 20.812 C 9.779 21.037,9.977 21.251,10.282 21.417 C 10.451 21.509,10.544 21.532,10.759 21.534 C 11.132 21.538,11.357 21.416,11.920 20.908 C 12.334 20.535,13.651 19.187,14.191 18.587 L 14.400 18.354 14.400 16.030 L 14.400 13.707 16.010 12.083 C 18.812 9.258,20.182 7.824,20.305 7.589 C 20.354 7.495,20.362 7.156,20.352 5.389 C 20.341 3.429,20.335 3.291,20.264 3.160 C 20.148 2.944,20.061 2.846,19.798 2.635 L 19.555 2.440 17.107 2.447 C 15.761 2.450,12.473 2.468,9.800 2.485 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.360 2.485 C 5.138 2.520,4.424 2.543,4.146 2.677 C 3.950 2.772,3.801 2.943,3.724 3.160 C 3.653 3.362,3.603 4.573,3.602 6.160 L 3.601 7.540 4.133 8.120 C 4.785 8.830,6.263 10.348,8.167 12.260 L 9.600 13.700 9.601 16.440 C 9.602 19.187,9.638 20.496,9.721 20.803 C 9.745 20.895,9.836 21.044,9.926 21.142 C 10.287 21.534,10.800 21.634,11.264 21.402 C 11.649 21.209,12.587 20.309,14.131 18.652 L 14.400 18.363 14.400 16.038 L 14.400 13.713 16.593 11.487 C 20.006 8.022,20.300 7.704,20.342 7.419 C 20.356 7.324,20.361 6.359,20.353 5.273 C 20.338 3.350,20.335 3.296,20.252 3.140 C 20.170 2.986,19.965 2.771,19.687 2.547 L 19.554 2.440 17.307 2.447 C 16.071 2.450,12.945 2.468,10.360 2.485 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/finger-print.svg b/packages/icons/svg/finger-print.svg
index e6dc689e8b..294a00b4ea 100644
--- a/packages/icons/svg/finger-print.svg
+++ b/packages/icons/svg/finger-print.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.860 2.507 C 10.497 2.554,9.557 2.739,9.140 2.846 C 7.833 3.183,7.273 3.612,7.271 4.279 C 7.269 4.692,7.500 5.115,7.836 5.312 C 7.997 5.406,8.058 5.419,8.320 5.412 C 8.485 5.408,8.872 5.350,9.180 5.285 C 9.488 5.219,9.956 5.119,10.220 5.063 C 10.915 4.915,11.630 4.869,12.456 4.920 C 13.920 5.011,14.639 5.196,15.754 5.769 C 16.651 6.229,17.310 6.713,17.983 7.406 C 18.621 8.063,19.026 8.650,19.511 9.620 C 19.931 10.462,20.032 10.823,20.339 12.600 C 20.518 13.633,20.562 13.765,20.798 14.002 C 21.043 14.247,21.304 14.337,21.695 14.311 C 22.177 14.280,22.499 14.038,22.689 13.563 C 22.973 12.853,22.580 10.580,21.893 8.963 C 21.391 7.781,20.656 6.696,19.721 5.757 C 18.760 4.792,18.003 4.235,16.856 3.650 C 15.442 2.929,14.431 2.649,12.784 2.520 C 12.295 2.482,11.119 2.474,10.860 2.507 M4.280 5.827 C 3.937 6.001,3.282 6.794,2.782 7.640 C 1.819 9.268,1.240 11.300,1.240 13.052 C 1.240 13.538,1.300 13.690,1.622 14.017 C 1.842 14.240,2.101 14.360,2.363 14.360 C 2.557 14.360,2.976 14.206,3.131 14.077 C 3.411 13.846,3.476 13.636,3.741 12.111 C 4.039 10.399,4.218 9.951,5.313 8.180 C 5.885 7.254,5.977 7.053,5.949 6.781 C 5.911 6.414,5.689 6.083,5.361 5.905 C 5.089 5.756,4.502 5.714,4.280 5.827 M10.887 7.363 C 10.348 7.447,9.431 7.816,8.865 8.179 C 8.517 8.401,8.087 8.764,7.696 9.166 C 7.136 9.742,6.782 10.261,6.496 10.928 C 6.220 11.574,6.140 11.987,5.939 13.799 C 5.745 15.551,5.719 15.687,5.276 17.296 C 4.929 18.559,4.934 18.783,5.315 19.166 C 5.565 19.417,5.815 19.520,6.173 19.520 C 6.741 19.520,7.062 19.199,7.435 18.256 C 7.915 17.047,8.135 16.040,8.379 13.940 C 8.596 12.068,8.631 11.915,8.949 11.403 C 9.465 10.575,10.424 9.871,11.189 9.761 C 11.625 9.698,12.665 9.710,12.940 9.782 C 13.278 9.870,13.906 10.210,14.276 10.506 C 14.904 11.009,15.154 11.466,15.537 12.808 C 15.820 13.800,15.899 13.991,16.076 14.117 C 16.399 14.347,16.959 14.393,17.309 14.218 C 17.573 14.086,17.822 13.816,17.883 13.594 C 17.943 13.372,17.907 12.469,17.819 12.005 C 17.551 10.594,16.763 9.399,15.452 8.414 C 14.779 7.908,13.985 7.543,13.280 7.416 C 12.868 7.342,11.257 7.306,10.887 7.363 M11.531 12.151 C 11.386 12.198,11.085 12.474,11.002 12.636 C 10.887 12.861,10.812 13.309,10.699 14.440 C 10.523 16.206,10.359 17.013,9.821 18.760 C 9.319 20.393,9.311 20.457,9.564 20.836 C 10.016 21.513,10.825 21.640,11.303 21.109 C 11.693 20.675,12.225 19.337,12.594 17.860 C 12.917 16.572,13.063 15.571,13.122 14.240 C 13.159 13.411,13.155 13.228,13.095 12.845 C 13.070 12.684,12.726 12.297,12.537 12.217 C 12.395 12.157,11.663 12.109,11.531 12.151 M16.173 15.718 C 16.102 15.735,15.958 15.810,15.853 15.885 C 15.572 16.083,15.441 16.375,15.202 17.340 C 14.883 18.626,14.786 19.137,14.783 19.560 C 14.780 20.000,14.814 20.088,15.108 20.381 C 15.355 20.629,15.509 20.690,15.883 20.688 C 16.666 20.685,16.952 20.285,17.358 18.628 C 17.542 17.875,17.640 17.253,17.640 16.833 C 17.640 16.188,17.234 15.773,16.540 15.710 C 16.408 15.697,16.243 15.701,16.173 15.718 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.778 2.522 C 10.290 2.586,9.103 2.847,8.694 2.981 C 8.148 3.160,7.827 3.332,7.579 3.580 C 7.282 3.875,7.199 4.269,7.344 4.694 C 7.419 4.914,7.742 5.286,7.921 5.361 C 8.120 5.443,8.736 5.385,9.564 5.206 C 10.805 4.937,11.089 4.907,12.140 4.932 C 13.721 4.971,14.474 5.139,15.617 5.710 C 17.327 6.563,18.499 7.702,19.374 9.360 C 19.874 10.309,19.986 10.669,20.280 12.291 C 20.391 12.902,20.519 13.502,20.565 13.625 C 20.658 13.872,20.871 14.107,21.110 14.226 C 21.337 14.338,21.876 14.326,22.131 14.203 C 22.489 14.029,22.720 13.649,22.776 13.139 C 22.827 12.671,22.701 11.677,22.476 10.760 C 21.982 8.754,21.121 7.189,19.734 5.779 C 18.734 4.762,17.902 4.164,16.620 3.540 C 15.591 3.039,14.804 2.788,13.800 2.641 C 12.838 2.500,11.385 2.442,10.778 2.522 M4.380 5.786 C 4.222 5.829,3.889 6.125,3.597 6.481 C 2.251 8.121,1.346 10.516,1.253 12.682 C 1.220 13.466,1.255 13.607,1.565 13.939 C 1.984 14.387,2.354 14.461,2.900 14.206 C 3.359 13.991,3.437 13.805,3.721 12.240 C 4.057 10.388,4.196 10.028,5.245 8.296 C 5.784 7.406,5.957 7.062,5.959 6.877 C 5.960 6.821,5.931 6.677,5.896 6.557 C 5.815 6.278,5.471 5.925,5.203 5.845 C 5.009 5.788,4.506 5.751,4.380 5.786 M11.120 7.363 C 10.254 7.411,9.106 7.924,8.255 8.645 C 7.552 9.240,6.979 9.942,6.643 10.620 C 6.277 11.358,6.163 11.838,5.981 13.420 C 5.737 15.539,5.718 15.645,5.339 17.060 C 4.974 18.419,4.953 18.644,5.157 18.976 C 5.412 19.388,5.993 19.612,6.472 19.482 C 6.932 19.358,7.303 18.754,7.717 17.459 C 8.012 16.536,8.155 15.767,8.401 13.780 C 8.491 13.054,8.592 12.334,8.626 12.180 C 8.832 11.254,9.816 10.221,10.848 9.848 C 11.130 9.746,11.170 9.742,12.000 9.743 C 12.838 9.744,12.867 9.746,13.133 9.851 C 13.474 9.985,14.075 10.340,14.346 10.567 C 14.880 11.014,15.154 11.531,15.539 12.820 C 15.871 13.927,15.918 14.024,16.202 14.179 C 16.397 14.285,16.458 14.298,16.780 14.299 C 17.209 14.300,17.367 14.237,17.644 13.955 C 17.899 13.694,17.939 13.530,17.907 12.865 C 17.834 11.340,17.324 10.201,16.221 9.100 C 15.660 8.540,15.155 8.169,14.540 7.864 C 13.748 7.472,13.281 7.373,12.100 7.351 C 11.792 7.345,11.351 7.350,11.120 7.363 M11.310 12.299 C 10.912 12.602,10.884 12.712,10.639 14.933 C 10.483 16.346,10.330 17.059,9.820 18.754 C 9.370 20.250,9.342 20.404,9.468 20.674 C 9.506 20.754,9.647 20.931,9.781 21.067 C 9.982 21.269,10.069 21.326,10.260 21.382 C 10.699 21.509,11.101 21.378,11.377 21.016 C 11.675 20.625,12.102 19.597,12.414 18.517 C 12.889 16.872,13.122 15.319,13.134 13.700 C 13.140 12.981,13.135 12.930,13.048 12.753 C 12.931 12.516,12.653 12.259,12.454 12.203 C 12.369 12.180,12.118 12.160,11.896 12.160 C 11.496 12.160,11.490 12.162,11.310 12.299 M16.060 15.763 C 15.602 16.027,15.482 16.249,15.201 17.360 C 14.903 18.537,14.793 19.125,14.789 19.560 C 14.785 20.002,14.819 20.088,15.107 20.368 C 15.352 20.607,15.529 20.680,15.864 20.680 C 16.407 20.680,16.667 20.509,16.918 19.986 C 17.241 19.312,17.640 17.602,17.640 16.888 C 17.640 16.170,17.230 15.760,16.483 15.731 C 16.273 15.723,16.109 15.735,16.060 15.763 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/fire.svg b/packages/icons/svg/fire.svg
index 04cf42a352..5d1dcb7897 100644
--- a/packages/icons/svg/fire.svg
+++ b/packages/icons/svg/fire.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.438 2.518 C 13.104 2.619,12.591 3.102,12.205 3.679 C 11.314 5.012,10.654 7.087,10.001 10.620 C 9.783 11.797,9.649 12.444,9.618 12.475 C 9.603 12.489,9.474 12.374,9.330 12.220 C 8.524 11.357,8.422 11.067,8.159 8.880 C 8.068 8.126,7.983 7.684,7.895 7.512 C 7.812 7.349,7.504 7.134,7.275 7.079 C 6.962 7.004,6.526 7.046,6.310 7.172 C 5.947 7.385,5.120 8.371,4.752 9.029 C 4.211 9.998,3.829 11.092,3.713 12.002 C 3.643 12.558,3.642 14.218,3.712 14.540 C 3.897 15.390,4.282 16.465,4.666 17.204 C 5.254 18.336,6.594 19.720,7.783 20.423 C 8.427 20.804,9.588 21.233,10.500 21.427 C 10.988 21.531,11.080 21.538,12.000 21.537 C 12.851 21.537,13.039 21.525,13.427 21.448 C 14.541 21.226,15.753 20.747,16.548 20.213 C 17.113 19.834,18.223 18.772,18.759 18.098 C 19.205 17.537,19.661 16.629,19.981 15.664 C 20.215 14.959,20.269 14.664,20.327 13.790 C 20.404 12.609,20.304 11.782,19.940 10.619 C 19.522 9.279,19.262 8.864,17.689 7.031 C 16.339 5.459,16.233 5.318,15.434 4.049 C 14.590 2.709,14.473 2.588,13.958 2.521 C 13.613 2.476,13.575 2.476,13.438 2.518 M13.123 11.250 C 13.419 11.685,13.693 12.050,14.311 12.834 C 14.814 13.473,15.098 13.880,15.250 14.180 C 15.502 14.677,15.543 16.255,15.320 16.850 C 15.197 17.181,14.785 17.775,14.444 18.116 C 13.782 18.778,13.110 19.092,12.237 19.147 C 11.314 19.205,10.584 18.977,9.875 18.407 C 9.267 17.918,8.871 17.336,8.603 16.534 C 8.466 16.126,8.407 15.745,8.474 15.704 C 8.498 15.689,8.702 15.731,8.929 15.797 C 9.622 15.998,10.536 16.166,10.980 16.174 L 11.379 16.180 11.432 15.820 C 11.788 13.376,12.092 12.131,12.511 11.401 C 12.633 11.188,12.838 10.880,12.858 10.880 C 12.865 10.880,12.985 11.047,13.123 11.250 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.420 2.529 C 13.108 2.640,12.529 3.194,12.190 3.705 C 11.304 5.039,10.706 6.937,9.979 10.726 C 9.631 12.538,9.644 12.485,9.554 12.437 C 9.513 12.415,9.335 12.231,9.158 12.029 C 8.583 11.371,8.425 10.918,8.222 9.340 C 7.987 7.510,7.952 7.409,7.440 7.136 C 7.225 7.021,6.602 7.032,6.366 7.155 C 6.128 7.279,5.887 7.508,5.501 7.980 C 4.793 8.844,4.374 9.623,4.003 10.766 C 3.803 11.380,3.722 11.822,3.677 12.540 C 3.615 13.530,3.659 14.347,3.804 14.909 C 4.047 15.848,4.497 16.961,4.875 17.561 C 5.630 18.757,6.922 19.978,8.054 20.564 C 8.724 20.910,9.722 21.259,10.588 21.447 C 10.930 21.522,11.108 21.533,11.980 21.533 C 13.169 21.533,13.520 21.479,14.542 21.142 C 15.772 20.736,16.533 20.302,17.400 19.510 C 18.831 18.205,19.440 17.288,19.997 15.604 C 20.201 14.989,20.266 14.639,20.324 13.853 C 20.416 12.601,20.293 11.685,19.855 10.367 C 19.471 9.211,19.199 8.797,17.542 6.860 C 16.394 5.517,16.313 5.408,15.182 3.660 C 14.574 2.721,14.435 2.594,13.938 2.522 C 13.605 2.474,13.574 2.474,13.420 2.529 M13.201 11.360 C 13.362 11.591,13.758 12.122,14.082 12.540 C 15.175 13.953,15.288 14.139,15.384 14.685 C 15.454 15.086,15.463 16.106,15.400 16.500 C 15.326 16.964,15.007 17.504,14.484 18.052 C 13.982 18.578,13.489 18.882,12.873 19.047 C 12.390 19.176,11.553 19.177,11.102 19.047 C 10.235 18.798,9.399 18.125,8.943 17.307 C 8.706 16.884,8.442 16.097,8.441 15.810 C 8.440 15.685,8.532 15.692,9.170 15.859 C 9.844 16.036,10.516 16.149,10.998 16.166 L 11.377 16.180 11.488 15.460 C 11.803 13.416,12.072 12.295,12.410 11.610 C 12.600 11.227,12.840 10.863,12.877 10.905 C 12.894 10.924,13.040 11.129,13.201 11.360 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/firefox.svg b/packages/icons/svg/firefox.svg
index 3dec33f436..6c04fb5862 100644
--- a/packages/icons/svg/firefox.svg
+++ b/packages/icons/svg/firefox.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.400 3.269 C 13.977 3.551,13.171 4.348,12.870 4.781 C 12.421 5.427,12.029 6.289,11.839 7.045 L 11.753 7.387 11.375 7.437 C 10.917 7.496,10.520 7.603,10.181 7.757 C 9.901 7.883,9.811 7.992,9.880 8.119 C 9.963 8.276,10.060 8.290,10.316 8.182 C 10.648 8.042,11.076 7.931,11.500 7.876 C 12.341 7.767,13.788 8.006,14.139 8.313 C 14.206 8.372,14.381 8.490,14.528 8.575 C 14.925 8.806,15.421 9.254,15.728 9.659 C 15.878 9.856,16.000 10.032,16.000 10.050 C 16.000 10.068,15.923 10.039,15.830 9.984 C 15.737 9.929,15.489 9.827,15.280 9.757 C 14.960 9.649,14.823 9.626,14.410 9.609 C 14.140 9.598,13.920 9.599,13.920 9.611 C 13.920 9.623,14.017 9.687,14.135 9.754 C 14.969 10.224,15.598 11.162,15.762 12.177 C 15.837 12.640,15.792 13.379,15.664 13.812 C 15.273 15.128,14.315 16.005,12.940 16.305 C 12.496 16.402,11.763 16.420,11.332 16.345 C 10.842 16.259,10.165 16.027,9.840 15.832 C 8.901 15.269,8.244 14.395,8.052 13.453 C 7.982 13.110,8.002 13.031,8.237 12.719 C 8.696 12.109,9.511 11.755,10.623 11.683 C 11.158 11.648,11.180 11.640,11.536 11.345 C 11.757 11.161,12.040 10.821,12.040 10.738 C 12.040 10.706,11.734 10.528,11.328 10.323 C 10.462 9.886,10.129 9.670,9.660 9.241 C 9.462 9.060,9.234 8.867,9.154 8.813 C 8.989 8.702,8.954 8.602,8.878 8.022 C 8.827 7.636,8.849 7.164,8.936 6.790 C 8.978 6.610,8.979 6.560,8.940 6.560 C 8.836 6.560,8.034 6.999,7.715 7.230 C 7.531 7.364,7.242 7.601,7.074 7.756 C 6.905 7.912,6.758 8.040,6.746 8.040 C 6.735 8.040,6.691 7.946,6.648 7.830 C 6.540 7.540,6.480 7.042,6.480 6.434 C 6.480 6.142,6.464 5.920,6.443 5.920 C 6.422 5.920,6.242 6.029,6.042 6.163 C 4.624 7.112,3.441 9.022,3.157 10.822 C 3.112 11.107,3.059 11.430,3.040 11.540 C 3.021 11.650,3.005 11.950,3.003 12.206 C 2.995 13.526,3.294 14.828,3.882 16.029 C 5.187 18.698,7.704 20.485,10.780 20.928 C 11.328 21.007,12.792 20.994,13.360 20.905 C 15.222 20.613,16.907 19.802,18.277 18.537 C 18.652 18.191,19.249 17.481,19.562 17.008 C 21.000 14.835,21.386 12.109,20.597 9.705 C 20.327 8.885,19.964 8.236,19.403 7.572 C 19.177 7.305,18.611 6.816,18.572 6.855 C 18.563 6.864,18.617 6.995,18.692 7.146 C 18.976 7.713,19.256 8.502,19.382 9.093 C 19.414 9.243,19.440 9.374,19.440 9.386 C 19.440 9.397,19.330 9.185,19.194 8.915 C 18.750 8.027,18.269 7.382,17.020 6.000 C 16.225 5.121,15.772 4.564,15.408 4.020 C 15.261 3.800,15.084 3.544,15.014 3.452 C 14.944 3.359,14.875 3.228,14.860 3.162 C 14.846 3.095,14.813 3.040,14.787 3.041 C 14.761 3.042,14.587 3.144,14.400 3.269 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.610 3.138 C 14.182 3.383,13.322 4.181,12.944 4.683 C 12.515 5.254,12.068 6.202,11.858 6.985 L 11.750 7.390 11.385 7.440 C 10.728 7.529,9.969 7.794,9.877 7.966 C 9.820 8.072,9.927 8.240,10.051 8.240 C 10.100 8.240,10.296 8.187,10.486 8.122 C 11.077 7.922,11.406 7.867,12.020 7.868 C 12.829 7.870,13.814 8.064,14.085 8.275 C 14.137 8.315,14.370 8.476,14.602 8.632 C 14.876 8.816,15.148 9.045,15.382 9.288 C 15.744 9.666,16.036 10.040,15.968 10.040 C 15.948 10.040,15.798 9.979,15.636 9.904 C 15.473 9.829,15.227 9.738,15.088 9.702 C 14.842 9.638,13.920 9.566,13.920 9.610 C 13.920 9.622,14.005 9.682,14.110 9.742 C 14.683 10.073,15.151 10.594,15.454 11.240 C 15.720 11.809,15.778 12.077,15.776 12.740 C 15.774 13.379,15.724 13.693,15.555 14.120 C 15.118 15.220,14.275 15.954,13.085 16.269 C 12.751 16.358,12.613 16.372,12.040 16.375 C 11.441 16.378,11.344 16.368,10.994 16.271 C 10.450 16.120,10.007 15.943,9.734 15.766 C 9.090 15.348,8.622 14.824,8.318 14.180 C 7.997 13.499,7.956 13.140,8.164 12.827 C 8.457 12.384,9.045 11.998,9.673 11.836 C 9.842 11.792,10.230 11.730,10.536 11.698 C 10.846 11.665,11.152 11.610,11.229 11.573 C 11.381 11.501,11.866 11.045,11.981 10.866 C 12.054 10.752,12.054 10.751,11.957 10.677 C 11.904 10.637,11.573 10.454,11.223 10.272 C 10.358 9.821,10.032 9.589,9.130 8.780 C 8.979 8.645,8.944 8.531,8.880 7.957 C 8.840 7.594,8.857 7.258,8.943 6.725 C 8.971 6.555,8.969 6.552,8.876 6.580 C 8.694 6.635,7.955 7.061,7.661 7.280 C 7.499 7.401,7.226 7.624,7.055 7.775 L 6.744 8.050 6.674 7.887 C 6.562 7.624,6.517 7.303,6.492 6.609 C 6.479 6.250,6.455 5.950,6.440 5.940 C 6.425 5.931,6.279 6.010,6.116 6.118 C 4.846 6.953,3.778 8.476,3.321 10.103 C 3.259 10.325,3.159 10.802,3.099 11.163 C 3.002 11.754,2.993 11.887,3.013 12.480 C 3.148 16.482,5.912 19.812,9.882 20.754 C 10.694 20.946,10.941 20.972,11.960 20.971 C 13.043 20.969,13.454 20.924,14.240 20.720 C 15.245 20.459,16.305 19.990,17.107 19.453 C 18.919 18.239,20.215 16.413,20.738 14.336 C 21.273 12.209,20.951 9.859,19.901 8.240 C 19.572 7.732,18.918 7.030,18.629 6.874 C 18.562 6.838,18.561 6.844,18.615 6.968 C 18.915 7.648,19.089 8.079,19.190 8.400 C 19.314 8.789,19.444 9.320,19.416 9.320 C 19.408 9.320,19.329 9.177,19.241 9.003 C 18.754 8.033,18.390 7.542,17.007 5.985 C 16.618 5.547,16.169 5.025,16.008 4.825 C 15.660 4.390,15.005 3.449,14.884 3.210 C 14.837 3.116,14.794 3.040,14.789 3.040 C 14.784 3.041,14.703 3.085,14.610 3.138 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/flag.svg b/packages/icons/svg/flag.svg
index 8d4abbb602..8d00924bf5 100644
--- a/packages/icons/svg/flag.svg
+++ b/packages/icons/svg/flag.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.780 3.682 C 7.934 3.712,6.547 3.742,6.220 3.804 C 6.110 3.824,5.894 3.902,5.740 3.976 C 4.888 4.384,4.275 5.042,3.800 6.056 L 3.600 6.483 3.600 13.627 L 3.600 20.770 3.930 21.099 C 4.310 21.478,4.542 21.587,4.883 21.547 C 5.323 21.495,5.792 21.154,5.875 20.824 C 5.934 20.590,5.987 19.799,6.059 18.073 C 6.092 17.289,6.140 16.551,6.165 16.434 C 6.204 16.250,6.250 16.179,6.492 15.930 L 6.774 15.640 10.937 15.636 C 13.227 15.634,16.092 15.621,17.304 15.606 L 19.507 15.580 19.678 15.461 C 19.917 15.296,20.218 14.947,20.275 14.769 C 20.302 14.687,20.333 14.494,20.344 14.340 L 20.364 14.060 19.995 13.540 C 19.567 12.937,17.466 10.019,17.283 9.775 L 17.160 9.610 18.368 7.935 C 20.318 5.229,20.312 5.239,20.351 4.896 C 20.393 4.522,20.221 4.194,19.800 3.843 L 19.556 3.640 17.488 3.647 C 16.351 3.651,13.782 3.666,11.780 3.682 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.880 3.685 C 7.290 3.722,6.327 3.754,5.986 3.881 C 5.046 4.233,4.299 4.984,3.777 6.100 L 3.600 6.479 3.600 13.636 L 3.600 20.793 3.924 21.094 C 4.325 21.467,4.466 21.540,4.782 21.539 C 5.235 21.538,5.780 21.176,5.876 20.812 C 5.927 20.619,5.986 19.807,6.040 18.580 C 6.063 18.052,6.101 17.341,6.124 17.000 C 6.172 16.288,6.204 16.205,6.567 15.855 L 6.780 15.649 13.104 15.628 C 20.288 15.605,19.517 15.649,19.930 15.236 C 20.213 14.954,20.306 14.754,20.342 14.360 L 20.369 14.060 19.292 12.560 C 18.162 10.984,17.411 9.944,17.254 9.737 L 17.160 9.613 18.384 7.917 C 19.725 6.056,20.246 5.292,20.315 5.084 C 20.452 4.670,20.270 4.239,19.789 3.837 L 19.553 3.640 17.667 3.647 C 16.629 3.650,14.025 3.667,11.880 3.685 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/flutter.svg b/packages/icons/svg/flutter.svg
index dd650f5bfe..727a995829 100644
--- a/packages/icons/svg/flutter.svg
+++ b/packages/icons/svg/flutter.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.160 6.943 C 6.949 9.110,4.888 11.135,4.580 11.444 L 4.020 12.007 5.460 13.423 L 6.899 14.839 7.240 14.506 C 7.427 14.322,10.140 11.667,13.270 8.604 C 16.399 5.542,18.960 3.028,18.960 3.018 C 18.960 3.008,17.660 3.001,16.070 3.002 L 13.180 3.004 9.160 6.943 M10.785 13.877 C 9.467 15.171,8.390 16.245,8.391 16.265 C 8.391 16.284,9.469 17.357,10.786 18.648 L 13.180 20.996 16.080 20.998 L 18.980 21.000 18.040 20.067 C 17.523 19.555,16.439 18.488,15.630 17.697 L 14.160 16.260 16.550 13.923 C 17.865 12.638,18.946 11.572,18.953 11.553 C 18.961 11.535,17.665 11.521,16.073 11.523 L 13.180 11.525 10.785 13.877 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.580 6.530 C 7.600 8.471,5.539 10.496,5.000 11.031 L 4.020 12.003 5.460 13.419 L 6.900 14.836 7.400 14.345 C 7.675 14.074,9.601 12.190,11.680 10.156 C 17.601 4.365,18.920 3.068,18.920 3.033 C 18.920 3.015,17.628 3.000,16.050 3.001 L 13.180 3.001 9.580 6.530 M10.778 13.899 L 8.380 16.278 9.540 17.420 C 10.178 18.048,11.260 19.111,11.945 19.782 L 13.190 21.001 16.083 20.990 L 18.975 20.980 16.567 18.620 L 14.160 16.260 14.630 15.799 C 14.888 15.546,15.962 14.493,17.016 13.459 L 18.932 11.580 18.676 11.555 C 18.535 11.541,17.240 11.527,15.798 11.525 L 13.176 11.520 10.778 13.899 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/folder-add.svg b/packages/icons/svg/folder-add.svg
index 828108a830..773bfa2797 100644
--- a/packages/icons/svg/folder-add.svg
+++ b/packages/icons/svg/folder-add.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.040 4.844 C 5.082 4.876,4.258 4.923,3.935 5.020 C 3.520 5.144,2.937 5.738,2.540 6.440 L 2.400 6.688 2.400 11.985 L 2.400 17.283 2.505 17.491 C 2.868 18.215,3.379 18.726,4.109 19.095 L 4.317 19.200 11.980 19.200 L 19.643 19.200 19.812 19.115 C 20.674 18.682,21.110 18.261,21.496 17.491 L 21.600 17.283 21.600 13.200 L 21.600 9.117 21.495 8.909 C 21.115 8.158,20.530 7.581,19.983 7.419 C 19.700 7.334,18.623 7.289,15.700 7.239 L 13.220 7.197 12.020 5.999 L 10.820 4.800 9.860 4.806 C 9.332 4.810,8.063 4.827,7.040 4.844 M12.229 9.734 C 12.552 9.802,12.854 10.004,12.962 10.225 C 13.044 10.393,13.130 10.944,13.181 11.625 L 13.208 11.990 13.673 12.018 C 14.343 12.059,14.809 12.137,14.986 12.237 C 15.071 12.285,15.207 12.415,15.290 12.527 L 15.440 12.730 15.440 13.198 L 15.440 13.666 15.290 13.879 C 15.009 14.278,14.620 14.399,13.615 14.400 L 13.210 14.400 13.182 14.830 C 13.116 15.880,13.049 16.149,12.784 16.413 C 12.380 16.817,11.797 16.861,11.328 16.521 C 11.014 16.294,10.889 15.875,10.819 14.810 L 10.791 14.400 10.406 14.399 C 9.904 14.398,9.262 14.334,9.149 14.275 C 8.957 14.174,8.754 13.984,8.650 13.806 C 8.549 13.635,8.540 13.586,8.540 13.200 C 8.541 12.879,8.557 12.750,8.609 12.654 C 8.697 12.493,8.895 12.295,9.047 12.217 C 9.173 12.151,9.776 12.063,10.403 12.019 L 10.787 11.991 10.853 11.226 C 10.912 10.539,10.930 10.437,11.030 10.240 C 11.110 10.084,11.198 9.982,11.335 9.890 C 11.651 9.678,11.821 9.648,12.229 9.734 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.360 4.842 C 4.835 4.885,4.084 4.935,3.802 5.079 C 3.405 5.282,2.957 5.753,2.597 6.346 L 2.400 6.671 2.400 11.977 L 2.400 17.283 2.505 17.491 C 2.856 18.188,3.409 18.741,4.109 19.094 L 4.317 19.200 11.980 19.200 L 19.643 19.200 19.851 19.095 C 20.628 18.703,21.130 18.220,21.475 17.531 L 21.600 17.282 21.600 13.200 L 21.600 9.117 21.494 8.909 C 21.195 8.317,20.673 7.746,20.233 7.529 C 19.842 7.337,19.411 7.310,15.440 7.238 L 13.220 7.197 12.020 5.998 L 10.820 4.800 9.920 4.807 C 9.425 4.810,8.273 4.826,7.360 4.842 M12.326 9.763 C 12.572 9.827,12.850 10.040,12.948 10.240 C 13.036 10.419,13.126 10.972,13.182 11.664 L 13.207 11.988 13.814 12.035 C 14.804 12.111,15.025 12.188,15.301 12.549 L 15.440 12.732 15.440 13.191 C 15.440 13.716,15.407 13.802,15.098 14.073 C 14.842 14.299,14.585 14.363,13.830 14.389 L 13.200 14.411 13.200 14.515 C 13.199 14.741,13.116 15.592,13.074 15.800 C 13.014 16.106,12.914 16.283,12.695 16.476 C 12.262 16.858,11.634 16.832,11.217 16.415 C 11.001 16.198,10.887 15.728,10.818 14.776 L 10.792 14.412 10.166 14.389 C 9.822 14.376,9.446 14.345,9.332 14.320 C 9.089 14.267,8.876 14.110,8.691 13.850 C 8.561 13.668,8.560 13.661,8.560 13.211 C 8.560 12.896,8.577 12.723,8.617 12.648 C 8.694 12.501,8.956 12.254,9.088 12.204 C 9.216 12.156,9.953 12.055,10.450 12.017 C 10.765 11.993,10.800 11.983,10.800 11.910 C 10.800 11.866,10.828 11.531,10.863 11.165 C 10.930 10.453,10.993 10.235,11.192 10.027 C 11.498 9.707,11.821 9.632,12.326 9.763 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/folder-download.svg b/packages/icons/svg/folder-download.svg
index 135c809282..9810f7f2b5 100644
--- a/packages/icons/svg/folder-download.svg
+++ b/packages/icons/svg/folder-download.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.040 4.844 C 5.082 4.876,4.258 4.923,3.935 5.020 C 3.520 5.144,2.937 5.738,2.540 6.440 L 2.400 6.688 2.400 11.985 L 2.400 17.283 2.505 17.491 C 2.868 18.215,3.379 18.726,4.109 19.095 L 4.317 19.200 11.980 19.200 L 19.643 19.200 19.812 19.115 C 20.674 18.682,21.110 18.261,21.496 17.491 L 21.600 17.283 21.600 13.200 L 21.600 9.117 21.495 8.909 C 21.115 8.158,20.530 7.581,19.983 7.419 C 19.700 7.334,18.623 7.289,15.700 7.239 L 13.220 7.197 12.020 5.999 L 10.820 4.800 9.860 4.806 C 9.332 4.810,8.063 4.827,7.040 4.844 M12.415 9.767 C 12.514 9.792,12.638 9.875,12.762 9.999 C 13.046 10.282,13.073 10.401,13.179 11.794 C 13.210 12.198,13.243 12.536,13.252 12.546 C 13.262 12.555,13.435 12.453,13.637 12.318 L 14.004 12.072 14.332 12.099 C 14.793 12.137,14.942 12.184,15.121 12.346 C 15.384 12.584,15.439 12.707,15.465 13.126 C 15.479 13.344,15.471 13.543,15.448 13.603 C 15.372 13.797,14.901 14.339,14.100 15.156 C 13.230 16.044,12.680 16.529,12.408 16.649 C 12.312 16.692,12.139 16.736,12.024 16.748 C 11.727 16.779,11.545 16.685,11.020 16.230 C 10.397 15.690,8.795 14.058,8.660 13.825 C 8.569 13.669,8.543 13.567,8.528 13.319 C 8.495 12.742,8.646 12.424,9.048 12.224 C 9.228 12.134,9.307 12.120,9.640 12.120 C 10.002 12.120,10.036 12.127,10.222 12.245 C 10.331 12.314,10.494 12.432,10.586 12.507 C 10.678 12.582,10.761 12.629,10.772 12.612 C 10.782 12.594,10.803 12.310,10.817 11.980 C 10.850 11.253,10.910 10.590,10.961 10.398 C 11.002 10.243,11.216 9.971,11.401 9.839 C 11.607 9.692,12.005 9.664,12.415 9.767 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.360 4.842 C 4.835 4.885,4.084 4.935,3.802 5.079 C 3.405 5.282,2.957 5.753,2.597 6.346 L 2.400 6.671 2.400 11.977 L 2.400 17.283 2.505 17.491 C 2.856 18.188,3.409 18.741,4.109 19.094 L 4.317 19.200 11.980 19.200 L 19.643 19.200 19.851 19.095 C 20.628 18.703,21.130 18.220,21.475 17.531 L 21.600 17.282 21.600 13.200 L 21.600 9.117 21.494 8.909 C 21.195 8.317,20.673 7.746,20.233 7.529 C 19.842 7.337,19.411 7.310,15.440 7.238 L 13.220 7.197 12.020 5.998 L 10.820 4.800 9.920 4.807 C 9.425 4.810,8.273 4.826,7.360 4.842 M12.404 9.775 C 12.624 9.853,12.816 10.020,12.930 10.230 C 13.043 10.437,13.089 10.712,13.159 11.600 C 13.219 12.356,13.242 12.520,13.288 12.520 C 13.310 12.520,13.482 12.419,13.671 12.296 L 14.015 12.072 14.403 12.113 C 15.141 12.190,15.400 12.443,15.461 13.147 C 15.486 13.434,15.479 13.496,15.406 13.647 C 15.188 14.099,13.197 16.139,12.580 16.543 C 12.463 16.620,12.278 16.696,12.134 16.725 C 11.918 16.768,11.867 16.766,11.701 16.703 C 11.598 16.663,11.381 16.524,11.219 16.394 C 10.527 15.837,8.723 13.992,8.612 13.727 C 8.530 13.531,8.503 13.127,8.557 12.878 C 8.625 12.556,8.753 12.389,9.044 12.244 C 9.264 12.134,9.332 12.120,9.637 12.120 C 10.019 12.120,10.124 12.159,10.500 12.443 C 10.614 12.530,10.725 12.600,10.747 12.600 C 10.770 12.600,10.806 12.260,10.835 11.770 C 10.891 10.808,10.936 10.442,11.021 10.278 C 11.123 10.082,11.331 9.871,11.500 9.795 C 11.691 9.708,12.185 9.697,12.404 9.775 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/folder-open.svg b/packages/icons/svg/folder-open.svg
index 7bccac08c1..80eacf5c3c 100644
--- a/packages/icons/svg/folder-open.svg
+++ b/packages/icons/svg/folder-open.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.280 4.828 C 5.943 4.845,4.351 4.918,4.114 4.974 C 3.809 5.046,3.553 5.203,3.226 5.517 C 2.947 5.786,2.691 6.137,2.505 6.509 L 2.400 6.717 2.402 10.349 C 2.405 14.629,2.443 16.484,2.536 16.780 C 2.648 17.135,3.130 17.622,3.583 17.839 C 3.846 17.964,4.298 17.993,4.600 17.904 C 5.031 17.777,5.511 17.427,5.704 17.097 C 5.859 16.832,5.913 16.571,5.981 15.760 C 6.161 13.600,6.196 13.342,6.358 12.975 C 6.576 12.482,7.125 11.817,7.560 11.521 C 7.681 11.438,8.002 11.259,8.273 11.124 L 8.766 10.877 13.673 10.839 C 16.372 10.819,18.722 10.802,18.896 10.801 L 19.213 10.800 19.186 10.110 C 19.140 8.924,19.019 8.584,18.436 7.995 C 18.023 7.580,17.746 7.425,17.300 7.363 C 16.936 7.312,15.317 7.250,13.474 7.216 L 12.009 7.189 10.815 5.995 L 9.621 4.800 8.840 4.809 C 8.411 4.814,7.709 4.823,7.280 4.828 M11.700 12.158 L 8.780 12.180 8.561 12.300 C 8.280 12.454,7.603 13.124,7.490 13.360 C 7.301 13.751,7.235 14.236,7.160 15.780 C 7.109 16.817,7.055 17.376,6.979 17.629 C 6.863 18.021,6.472 18.478,5.927 18.860 C 5.770 18.970,5.641 19.071,5.641 19.085 C 5.640 19.098,5.707 19.121,5.790 19.135 C 5.873 19.149,9.027 19.172,12.800 19.186 L 19.660 19.212 19.880 19.101 C 20.596 18.739,21.136 18.200,21.494 17.491 L 21.600 17.283 21.600 15.600 L 21.600 13.917 21.494 13.709 C 21.219 13.164,20.806 12.693,20.284 12.327 L 19.987 12.120 17.304 12.128 C 15.828 12.132,13.306 12.146,11.700 12.158 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.900 4.842 C 5.169 4.877,4.174 4.940,3.945 5.029 C 3.436 5.226,2.847 5.833,2.501 6.518 L 2.390 6.736 2.414 11.338 C 2.426 13.869,2.454 16.124,2.476 16.350 C 2.524 16.858,2.624 17.059,3.004 17.418 C 3.519 17.904,4.057 18.060,4.626 17.887 C 5.041 17.761,5.517 17.412,5.702 17.099 C 5.859 16.833,5.912 16.523,6.042 15.100 C 6.110 14.352,6.190 13.614,6.219 13.460 C 6.311 12.974,6.544 12.553,7.018 12.018 C 7.328 11.666,7.561 11.499,8.200 11.167 L 8.740 10.887 11.640 10.863 C 13.235 10.850,15.591 10.828,16.876 10.815 L 19.212 10.790 19.188 10.142 C 19.161 9.426,19.083 8.966,18.936 8.656 C 18.785 8.336,18.270 7.788,17.918 7.572 C 17.554 7.348,17.079 7.308,14.009 7.237 L 12.020 7.191 10.820 5.995 L 9.620 4.800 8.980 4.807 C 8.628 4.810,7.692 4.826,6.900 4.842 M12.140 12.159 L 8.780 12.181 8.600 12.276 C 8.354 12.405,7.547 13.216,7.462 13.420 C 7.300 13.807,7.232 14.328,7.159 15.740 C 7.092 17.026,7.028 17.517,6.887 17.817 C 6.749 18.112,6.339 18.565,5.976 18.824 C 5.632 19.070,5.609 19.104,5.766 19.135 C 5.837 19.149,8.992 19.173,12.779 19.187 L 19.663 19.213 19.944 19.066 C 20.549 18.748,21.145 18.154,21.458 17.558 L 21.600 17.288 21.600 15.603 L 21.600 13.917 21.495 13.709 C 21.249 13.218,20.750 12.657,20.242 12.301 L 19.984 12.120 17.742 12.128 C 16.509 12.132,13.988 12.146,12.140 12.159 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/folder-remove.svg b/packages/icons/svg/folder-remove.svg
index 1331683210..bc2e6da7cf 100644
--- a/packages/icons/svg/folder-remove.svg
+++ b/packages/icons/svg/folder-remove.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.040 4.844 C 5.082 4.876,4.258 4.923,3.935 5.020 C 3.520 5.144,2.937 5.738,2.540 6.440 L 2.400 6.688 2.400 11.985 L 2.400 17.283 2.505 17.491 C 2.868 18.215,3.379 18.726,4.109 19.095 L 4.317 19.200 11.980 19.200 L 19.643 19.200 19.812 19.115 C 20.674 18.682,21.110 18.261,21.496 17.491 L 21.600 17.283 21.600 13.200 L 21.600 9.117 21.495 8.909 C 21.115 8.158,20.530 7.581,19.983 7.419 C 19.700 7.334,18.623 7.289,15.700 7.239 L 13.220 7.197 12.020 5.999 L 10.820 4.800 9.860 4.806 C 9.332 4.810,8.063 4.827,7.040 4.844 M14.916 12.198 C 15.000 12.241,15.152 12.369,15.255 12.482 L 15.440 12.689 15.440 13.223 L 15.440 13.758 15.208 13.995 C 15.056 14.150,14.922 14.248,14.818 14.279 C 14.610 14.341,12.827 14.394,10.834 14.397 L 9.249 14.400 9.068 14.250 C 8.834 14.056,8.741 13.935,8.615 13.660 C 8.524 13.462,8.514 13.394,8.526 13.084 C 8.538 12.772,8.553 12.714,8.659 12.562 C 8.818 12.332,9.013 12.190,9.214 12.157 C 9.305 12.142,10.591 12.128,12.072 12.125 C 14.667 12.120,14.769 12.123,14.916 12.198 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.360 4.842 C 4.835 4.885,4.084 4.935,3.802 5.079 C 3.405 5.282,2.957 5.753,2.597 6.346 L 2.400 6.671 2.400 11.977 L 2.400 17.283 2.505 17.491 C 2.856 18.188,3.409 18.741,4.109 19.094 L 4.317 19.200 11.980 19.200 L 19.643 19.200 19.851 19.095 C 20.628 18.703,21.130 18.220,21.475 17.531 L 21.600 17.282 21.600 13.200 L 21.600 9.117 21.494 8.909 C 21.195 8.317,20.673 7.746,20.233 7.529 C 19.842 7.337,19.411 7.310,15.440 7.238 L 13.220 7.197 12.020 5.998 L 10.820 4.800 9.920 4.807 C 9.425 4.810,8.273 4.826,7.360 4.842 M14.997 12.258 C 15.091 12.323,15.229 12.448,15.304 12.535 L 15.440 12.694 15.440 13.227 L 15.440 13.760 15.194 14.000 C 15.038 14.151,14.893 14.255,14.801 14.280 C 14.576 14.340,12.640 14.399,10.842 14.399 L 9.223 14.400 8.958 14.129 C 8.605 13.769,8.503 13.514,8.532 13.070 C 8.557 12.696,8.679 12.455,8.929 12.289 C 9.084 12.186,9.128 12.179,9.677 12.157 C 9.998 12.144,11.288 12.135,12.543 12.137 L 14.827 12.140 14.997 12.258 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/folder.svg b/packages/icons/svg/folder.svg
index 5922d22ebb..6086ad9718 100644
--- a/packages/icons/svg/folder.svg
+++ b/packages/icons/svg/folder.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.040 4.844 C 5.082 4.876,4.258 4.923,3.935 5.020 C 3.520 5.144,2.937 5.738,2.540 6.440 L 2.400 6.688 2.400 11.985 L 2.400 17.283 2.505 17.491 C 2.868 18.215,3.379 18.726,4.109 19.095 L 4.317 19.200 11.980 19.200 L 19.643 19.200 19.812 19.115 C 20.674 18.682,21.110 18.261,21.496 17.491 L 21.600 17.283 21.600 13.200 L 21.600 9.117 21.495 8.909 C 21.115 8.158,20.530 7.581,19.983 7.419 C 19.700 7.334,18.623 7.289,15.700 7.239 L 13.220 7.197 12.020 5.999 L 10.820 4.800 9.860 4.806 C 9.332 4.810,8.063 4.827,7.040 4.844 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.360 4.842 C 4.835 4.885,4.084 4.935,3.802 5.079 C 3.405 5.282,2.957 5.753,2.597 6.346 L 2.400 6.671 2.400 11.977 L 2.400 17.283 2.505 17.491 C 2.856 18.188,3.409 18.741,4.109 19.094 L 4.317 19.200 11.980 19.200 L 19.643 19.200 19.851 19.095 C 20.628 18.703,21.130 18.220,21.475 17.531 L 21.600 17.282 21.600 13.200 L 21.600 9.117 21.494 8.909 C 21.195 8.317,20.673 7.746,20.233 7.529 C 19.842 7.337,19.411 7.310,15.440 7.238 L 13.220 7.197 12.020 5.998 L 10.820 4.800 9.920 4.807 C 9.425 4.810,8.273 4.826,7.360 4.842 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/gift.svg b/packages/icons/svg/gift.svg
index db5362c611..a2ace7eec7 100644
--- a/packages/icons/svg/gift.svg
+++ b/packages/icons/svg/gift.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.173 2.778 C 7.566 3.084,7.186 3.364,6.866 3.743 C 6.621 4.034,6.344 4.557,6.202 5.000 C 6.077 5.386,6.019 6.084,6.063 6.670 C 6.092 7.059,6.090 7.160,6.049 7.160 C 5.916 7.160,4.434 7.323,4.240 7.359 C 3.507 7.495,2.795 8.163,2.540 8.954 C 2.485 9.125,2.474 9.274,2.486 9.698 C 2.502 10.214,2.506 10.236,2.650 10.527 C 2.904 11.042,3.428 11.543,4.028 11.844 L 4.338 12.000 7.569 12.000 L 10.800 12.000 10.801 11.870 C 10.802 11.614,10.881 10.776,10.925 10.549 C 10.986 10.239,11.149 9.993,11.387 9.854 C 11.566 9.748,11.611 9.740,12.000 9.740 C 12.386 9.740,12.435 9.749,12.607 9.850 C 13.004 10.083,13.095 10.362,13.182 11.610 L 13.210 12.000 16.449 12.000 L 19.688 12.000 19.997 11.839 C 20.988 11.324,21.613 10.388,21.547 9.520 C 21.521 9.173,21.423 8.766,21.313 8.548 C 21.201 8.325,20.708 7.825,20.423 7.645 C 19.999 7.377,19.758 7.322,18.640 7.239 C 18.185 7.205,18.049 7.182,18.010 7.130 C 17.974 7.084,17.960 6.865,17.960 6.376 C 17.960 5.412,17.854 4.938,17.493 4.280 C 17.133 3.623,16.694 3.223,15.826 2.759 L 15.434 2.549 14.527 2.545 C 13.873 2.541,13.570 2.555,13.440 2.594 C 13.141 2.683,12.720 2.879,12.349 3.103 L 11.997 3.314 11.669 3.109 C 11.488 2.997,11.178 2.834,10.980 2.747 C 10.631 2.595,10.601 2.589,10.000 2.557 C 9.659 2.539,9.224 2.523,9.033 2.522 L 8.685 2.520 8.173 2.778 M10.110 5.008 C 10.272 5.083,10.494 5.313,10.596 5.509 C 10.656 5.626,10.746 6.236,10.783 6.778 L 10.812 7.213 10.116 7.187 C 9.733 7.174,9.348 7.142,9.260 7.117 C 9.040 7.055,8.624 6.638,8.564 6.420 C 8.491 6.154,8.508 5.660,8.596 5.488 C 8.666 5.353,8.824 5.184,9.012 5.041 C 9.233 4.874,9.789 4.857,10.110 5.008 M14.920 5.018 C 15.094 5.106,15.309 5.305,15.383 5.448 C 15.423 5.523,15.440 5.698,15.440 6.028 L 15.440 6.500 15.290 6.696 C 15.068 6.986,14.818 7.110,14.358 7.159 C 14.150 7.181,13.802 7.199,13.585 7.199 L 13.190 7.200 13.218 6.770 C 13.254 6.218,13.306 5.832,13.380 5.576 C 13.453 5.322,13.684 5.056,13.900 4.977 C 14.119 4.897,14.728 4.922,14.920 5.018 M3.600 16.441 L 3.600 19.682 3.725 19.931 C 4.083 20.640,4.560 21.117,5.269 21.475 L 5.518 21.600 8.159 21.600 L 10.800 21.600 10.800 17.400 L 10.800 13.200 7.200 13.200 L 3.600 13.200 3.600 16.441 M13.200 17.400 L 13.200 21.600 15.841 21.600 L 18.483 21.600 18.691 21.494 C 19.379 21.147,19.870 20.671,20.238 19.994 L 20.399 19.700 20.399 16.450 L 20.400 13.200 16.800 13.200 L 13.200 13.200 13.200 17.400 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.200 2.763 C 7.324 3.235,6.926 3.577,6.595 4.144 C 6.164 4.882,6.063 5.305,6.065 6.370 C 6.066 6.911,6.053 7.160,6.023 7.160 C 5.798 7.160,4.155 7.376,4.009 7.425 C 3.578 7.569,3.042 8.011,2.781 8.440 C 2.530 8.852,2.470 9.110,2.487 9.703 C 2.501 10.195,2.509 10.240,2.630 10.483 C 2.894 11.014,3.342 11.458,3.971 11.811 L 4.307 12.000 7.548 12.000 L 10.789 12.000 10.816 11.610 C 10.900 10.405,10.978 10.165,11.376 9.874 C 11.526 9.764,11.549 9.760,11.992 9.760 C 12.439 9.760,12.459 9.764,12.645 9.883 C 12.978 10.097,13.105 10.504,13.181 11.610 L 13.207 12.000 16.454 11.999 L 19.700 11.999 19.994 11.838 C 20.542 11.540,20.902 11.216,21.200 10.755 C 21.509 10.277,21.612 9.764,21.508 9.220 C 21.398 8.643,21.312 8.475,20.925 8.088 C 20.521 7.683,20.178 7.469,19.792 7.381 C 19.641 7.346,19.210 7.291,18.834 7.258 C 18.459 7.225,18.119 7.181,18.078 7.159 C 17.986 7.110,17.968 6.969,17.945 6.120 C 17.925 5.377,17.858 5.047,17.627 4.547 C 17.259 3.750,16.776 3.275,15.797 2.746 L 15.453 2.560 14.505 2.560 C 13.654 2.560,13.532 2.568,13.313 2.642 C 13.028 2.738,12.626 2.936,12.258 3.161 L 11.998 3.320 11.749 3.163 C 11.303 2.882,10.753 2.639,10.477 2.601 C 10.336 2.581,9.869 2.554,9.440 2.540 L 8.660 2.515 8.200 2.763 M10.108 5.013 C 10.281 5.104,10.518 5.351,10.586 5.512 C 10.650 5.660,10.741 6.275,10.783 6.837 L 10.811 7.213 10.136 7.186 C 9.764 7.171,9.391 7.143,9.306 7.123 C 9.111 7.077,8.815 6.828,8.660 6.579 C 8.547 6.398,8.540 6.361,8.540 5.983 C 8.540 5.630,8.552 5.561,8.633 5.430 C 8.744 5.252,9.030 5.009,9.188 4.958 C 9.368 4.901,9.961 4.936,10.108 5.013 M14.950 5.045 C 15.155 5.144,15.382 5.398,15.415 5.567 C 15.429 5.635,15.440 5.871,15.440 6.091 C 15.440 6.459,15.432 6.503,15.338 6.626 C 15.009 7.057,14.746 7.156,13.830 7.189 L 13.200 7.212 13.200 7.096 C 13.200 6.892,13.278 6.109,13.324 5.840 C 13.407 5.367,13.667 5.025,13.997 4.955 C 14.235 4.904,14.761 4.954,14.950 5.045 M3.600 16.441 L 3.600 19.682 3.725 19.931 C 4.064 20.608,4.588 21.132,5.269 21.475 L 5.518 21.600 8.159 21.600 L 10.800 21.600 10.800 17.400 L 10.800 13.200 7.200 13.200 L 3.600 13.200 3.600 16.441 M13.200 17.400 L 13.200 21.600 15.841 21.600 L 18.483 21.600 18.691 21.495 C 19.357 21.158,19.831 20.700,20.221 20.016 L 20.400 19.702 20.400 16.451 L 20.400 13.200 16.800 13.200 L 13.200 13.200 13.200 17.400 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/git.svg b/packages/icons/svg/git.svg
index 80e7fe0c1f..86c291e04f 100644
--- a/packages/icons/svg/git.svg
+++ b/packages/icons/svg/git.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.698 3.035 C 11.339 3.128,11.197 3.262,7.192 7.273 C 3.996 10.474,3.192 11.299,3.116 11.460 C 2.979 11.746,2.979 12.254,3.115 12.540 C 3.256 12.835,11.165 20.744,11.460 20.885 C 11.744 21.020,12.253 21.019,12.540 20.883 C 12.835 20.743,20.743 12.835,20.883 12.540 C 21.019 12.254,21.019 11.746,20.883 11.460 C 20.807 11.299,20.013 10.484,16.806 7.271 C 12.424 2.882,12.610 3.050,12.090 3.019 C 11.942 3.010,11.765 3.017,11.698 3.035 M11.368 6.518 L 12.037 7.176 12.409 7.165 C 12.922 7.150,13.171 7.244,13.504 7.576 C 13.840 7.913,13.933 8.163,13.912 8.668 L 13.896 9.037 14.968 10.108 L 16.039 11.178 16.489 11.180 C 17.028 11.182,17.205 11.247,17.537 11.560 C 17.849 11.856,17.978 12.159,17.978 12.600 C 17.978 13.042,17.849 13.344,17.535 13.641 C 17.210 13.949,17.023 14.020,16.540 14.020 C 16.057 14.020,15.870 13.949,15.545 13.641 C 15.156 13.274,15.005 12.751,15.138 12.239 L 15.206 11.980 14.193 10.993 L 13.180 10.005 13.169 12.633 C 13.159 15.081,13.163 15.263,13.227 15.300 C 13.408 15.405,13.677 15.700,13.783 15.909 C 13.890 16.121,13.900 16.175,13.900 16.560 C 13.900 16.926,13.888 17.003,13.804 17.160 C 13.655 17.440,13.533 17.582,13.308 17.734 C 12.514 18.271,11.454 17.939,11.118 17.046 C 11.000 16.735,11.020 16.229,11.160 15.939 C 11.286 15.680,11.523 15.425,11.766 15.289 L 11.960 15.180 11.959 12.560 L 11.958 9.940 11.799 9.867 C 11.576 9.764,11.306 9.480,11.173 9.210 C 11.033 8.926,10.995 8.429,11.092 8.146 L 11.151 7.971 10.076 6.896 L 9.000 5.821 9.410 5.410 L 9.819 5.000 10.259 5.430 C 10.502 5.666,11.001 6.156,11.368 6.518 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.456 3.145 C 11.135 3.361,10.715 3.763,8.205 6.259 C 4.995 9.452,3.171 11.326,3.088 11.516 C 2.999 11.723,3.003 12.295,3.095 12.487 C 3.280 12.871,11.130 20.721,11.512 20.904 C 11.730 21.008,12.243 21.003,12.480 20.894 C 12.686 20.800,14.766 18.788,17.444 16.094 C 20.004 13.518,20.800 12.684,20.894 12.480 C 21.008 12.229,21.008 11.770,20.892 11.514 C 20.787 11.281,19.194 9.640,15.715 6.179 C 12.430 2.911,12.582 3.040,11.996 3.040 C 11.647 3.040,11.597 3.050,11.456 3.145 M11.400 6.546 L 12.020 7.152 12.462 7.169 C 12.993 7.189,13.182 7.264,13.499 7.581 C 13.828 7.909,13.900 8.094,13.901 8.611 L 13.902 9.042 14.977 10.117 L 16.052 11.192 16.559 11.206 L 17.067 11.220 17.288 11.367 C 17.518 11.519,17.736 11.758,17.865 12.000 C 17.926 12.114,17.940 12.227,17.940 12.600 C 17.940 13.143,17.887 13.278,17.536 13.629 C 17.225 13.940,17.033 14.015,16.540 14.015 C 16.048 14.015,15.855 13.940,15.547 13.632 C 15.126 13.209,15.013 12.733,15.179 12.077 C 15.203 11.984,15.112 11.885,14.207 11.007 C 13.659 10.475,13.198 10.040,13.184 10.040 C 13.170 10.040,13.163 11.207,13.169 12.634 L 13.180 15.227 13.428 15.472 C 13.565 15.606,13.723 15.807,13.778 15.917 C 13.869 16.097,13.880 16.164,13.880 16.569 C 13.879 16.996,13.873 17.031,13.760 17.227 C 13.541 17.610,13.281 17.808,12.822 17.941 C 12.196 18.123,11.494 17.791,11.173 17.160 C 11.074 16.965,11.061 16.898,11.062 16.560 C 11.062 16.252,11.079 16.143,11.152 15.983 C 11.280 15.701,11.490 15.462,11.742 15.312 L 11.960 15.181 11.960 12.557 L 11.960 9.932 11.800 9.860 C 11.586 9.764,11.298 9.449,11.173 9.177 C 11.045 8.896,11.007 8.425,11.092 8.154 L 11.149 7.969 10.075 6.895 L 9.000 5.821 9.410 5.410 L 9.819 5.000 10.299 5.470 C 10.564 5.728,11.059 6.213,11.400 6.546 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/github.svg b/packages/icons/svg/github.svg
index 691b10b924..f41b56ea6b 100644
--- a/packages/icons/svg/github.svg
+++ b/packages/icons/svg/github.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.179 3.039 C 10.629 3.098,10.079 3.203,9.587 3.344 C 6.161 4.327,3.658 7.233,3.093 10.880 C 2.994 11.521,2.994 12.960,3.093 13.588 C 3.428 15.705,4.327 17.460,5.826 18.923 C 6.595 19.674,7.418 20.240,8.357 20.663 C 9.209 21.046,9.453 21.079,9.658 20.836 L 9.760 20.714 9.760 19.844 L 9.760 18.975 9.470 19.026 C 8.547 19.188,7.728 18.978,7.199 18.444 C 6.937 18.179,6.895 18.111,6.607 17.480 C 6.406 17.039,6.142 16.689,5.852 16.475 C 5.501 16.217,5.400 16.114,5.400 16.014 C 5.400 15.878,5.534 15.827,5.837 15.849 C 6.358 15.886,6.759 16.173,7.195 16.820 C 7.610 17.436,7.992 17.696,8.600 17.778 C 8.821 17.807,9.367 17.716,9.607 17.610 C 9.776 17.535,9.787 17.519,9.836 17.296 C 9.903 16.991,10.006 16.757,10.181 16.514 C 10.274 16.384,10.304 16.313,10.271 16.304 C 10.243 16.296,10.049 16.261,9.840 16.226 C 9.077 16.100,8.363 15.835,7.855 15.490 C 7.553 15.285,7.097 14.805,6.907 14.491 C 6.485 13.797,6.281 12.936,6.280 11.854 C 6.280 10.853,6.492 10.165,7.007 9.492 L 7.166 9.284 7.093 8.972 C 6.950 8.362,7.044 7.224,7.266 6.886 C 7.325 6.795,7.344 6.791,7.594 6.817 C 8.110 6.870,8.872 7.188,9.495 7.611 L 9.731 7.770 10.115 7.684 C 11.322 7.412,12.677 7.412,13.882 7.683 L 14.264 7.769 14.582 7.561 C 14.932 7.332,15.508 7.043,15.820 6.940 C 15.930 6.904,16.160 6.854,16.330 6.829 C 16.592 6.791,16.650 6.793,16.697 6.842 C 16.787 6.935,16.919 7.426,16.969 7.848 C 17.017 8.261,16.975 8.791,16.868 9.108 C 16.818 9.257,16.820 9.264,16.999 9.500 C 17.253 9.836,17.457 10.242,17.583 10.661 C 17.675 10.967,17.694 11.115,17.710 11.664 C 17.778 13.957,16.917 15.383,15.095 15.993 C 14.720 16.119,13.968 16.280,13.758 16.280 L 13.641 16.280 13.782 16.465 C 13.962 16.701,14.010 16.796,14.123 17.140 C 14.212 17.409,14.217 17.485,14.238 19.087 L 14.260 20.754 14.356 20.856 C 14.562 21.074,14.812 21.037,15.643 20.663 C 16.572 20.244,17.404 19.675,18.154 18.943 C 18.992 18.126,19.524 17.396,20.023 16.380 C 20.471 15.467,20.731 14.641,20.906 13.580 C 21.007 12.967,21.007 11.529,20.907 10.880 C 20.277 6.811,17.246 3.711,13.300 3.101 C 12.820 3.026,11.626 2.992,11.179 3.039 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.706 3.100 C 7.942 3.549,5.633 5.146,4.242 7.572 C 3.508 8.851,3.085 10.315,3.020 11.800 C 2.922 14.016,3.587 16.161,4.903 17.880 C 5.874 19.148,7.139 20.144,8.537 20.739 C 9.266 21.049,9.483 21.062,9.681 20.809 C 9.754 20.717,9.760 20.644,9.760 19.849 L 9.760 18.989 9.590 19.016 C 8.550 19.178,7.771 18.991,7.212 18.445 C 7.010 18.248,6.919 18.111,6.694 17.662 C 6.361 16.997,6.152 16.717,5.752 16.400 C 5.583 16.266,5.434 16.124,5.421 16.084 C 5.361 15.894,5.532 15.813,5.892 15.860 C 6.359 15.921,6.773 16.223,7.180 16.800 C 7.429 17.154,7.759 17.477,7.992 17.596 C 8.293 17.749,8.654 17.810,8.976 17.761 C 9.372 17.701,9.655 17.614,9.728 17.531 C 9.763 17.492,9.821 17.353,9.859 17.222 C 9.931 16.970,10.077 16.655,10.210 16.467 C 10.254 16.405,10.274 16.340,10.255 16.323 C 10.236 16.306,10.010 16.253,9.754 16.206 C 9.225 16.108,8.586 15.899,8.195 15.694 C 7.374 15.265,6.709 14.383,6.462 13.397 C 6.260 12.589,6.233 11.469,6.400 10.771 C 6.502 10.344,6.665 9.989,6.940 9.596 L 7.163 9.278 7.101 8.981 C 6.980 8.392,7.050 7.315,7.232 6.968 C 7.310 6.820,7.310 6.820,7.550 6.829 C 8.003 6.846,8.796 7.162,9.457 7.589 L 9.734 7.767 10.137 7.685 C 10.890 7.532,11.177 7.504,12.000 7.504 C 12.823 7.504,13.110 7.532,13.863 7.685 L 14.266 7.767 14.550 7.584 C 14.933 7.336,15.687 6.975,15.971 6.902 C 16.099 6.870,16.310 6.832,16.441 6.817 L 16.680 6.790 16.757 6.965 C 16.968 7.445,17.036 8.396,16.901 8.970 L 16.830 9.272 17.011 9.526 C 17.228 9.830,17.441 10.247,17.559 10.595 C 17.729 11.104,17.755 12.116,17.619 12.982 C 17.399 14.384,16.626 15.385,15.380 15.883 C 14.994 16.037,14.255 16.228,13.904 16.264 L 13.648 16.290 13.823 16.529 C 13.936 16.681,14.036 16.885,14.103 17.094 C 14.206 17.418,14.207 17.431,14.230 19.092 L 14.252 20.763 14.369 20.862 C 14.600 21.056,14.759 21.038,15.469 20.736 C 17.227 19.988,18.759 18.617,19.735 16.920 C 20.673 15.288,21.090 13.477,20.965 11.574 C 20.821 9.367,19.862 7.230,18.322 5.680 C 17.029 4.379,15.528 3.565,13.700 3.175 C 13.267 3.082,13.114 3.071,12.140 3.058 C 11.333 3.047,10.971 3.057,10.706 3.100 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/gitlab.svg b/packages/icons/svg/gitlab.svg
index a5f2f05322..9b8baf1f13 100644
--- a/packages/icons/svg/gitlab.svg
+++ b/packages/icons/svg/gitlab.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.272 3.062 C 6.151 3.128,6.314 2.647,4.102 9.452 C 3.496 11.318,3.000 12.893,3.001 12.952 C 3.002 13.088,3.125 13.359,3.224 13.445 C 3.356 13.559,12.136 19.929,12.189 19.949 C 12.218 19.960,12.290 19.936,12.350 19.897 C 12.623 19.719,21.113 13.540,21.215 13.446 C 21.356 13.316,21.440 13.128,21.440 12.941 C 21.440 12.863,21.153 11.913,20.802 10.830 C 20.450 9.746,19.749 7.582,19.243 6.020 C 18.255 2.971,18.267 3.000,18.000 3.000 C 17.741 3.000,17.757 2.962,16.654 6.370 L 15.621 9.560 12.211 9.560 C 9.719 9.560,8.800 9.548,8.800 9.515 C 8.800 9.491,8.341 8.055,7.779 6.325 C 6.703 3.009,6.698 2.997,6.468 3.002 C 6.419 3.002,6.331 3.030,6.272 3.062 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.291 3.049 C 6.182 3.101,6.173 3.125,5.587 4.900 C 4.366 8.596,3.049 12.707,3.017 12.920 C 3.002 13.019,3.022 13.112,3.088 13.240 C 3.171 13.402,3.449 13.615,5.915 15.409 C 7.418 16.503,9.451 17.978,10.431 18.686 C 12.192 19.959,12.215 19.973,12.318 19.914 C 12.430 19.849,15.994 17.267,19.220 14.912 C 20.386 14.061,21.257 13.397,21.309 13.321 C 21.470 13.085,21.465 12.974,21.263 12.298 C 21.025 11.506,18.697 4.324,18.487 3.734 C 18.258 3.093,18.197 3.000,18.003 3.000 C 17.866 3.000,17.791 3.081,17.665 3.364 C 17.565 3.590,16.842 5.771,16.058 8.210 L 15.624 9.560 12.362 9.560 C 10.568 9.559,9.033 9.548,8.952 9.535 L 8.803 9.510 8.559 8.745 C 7.213 4.539,6.767 3.225,6.636 3.085 C 6.550 2.993,6.432 2.980,6.291 3.049 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/globe-alt.svg b/packages/icons/svg/globe-alt.svg
index 0f6b791d1a..ccd3b06fed 100644
--- a/packages/icons/svg/globe-alt.svg
+++ b/packages/icons/svg/globe-alt.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.242 4.950 C 12.569 5.179,12.877 5.577,13.170 6.149 C 13.493 6.779,13.691 7.303,13.861 7.980 C 13.993 8.501,14.254 9.987,14.303 10.486 L 14.328 10.751 13.734 10.781 C 13.094 10.813,9.731 10.784,9.693 10.746 C 9.661 10.714,9.785 9.738,9.904 9.080 C 10.025 8.415,10.208 7.645,10.346 7.220 C 10.558 6.570,11.026 5.688,11.364 5.302 C 11.520 5.123,11.919 4.800,11.983 4.800 C 12.007 4.800,12.123 4.868,12.242 4.950 M16.240 6.235 C 16.700 6.589,17.364 7.266,17.736 7.760 C 18.266 8.463,19.000 10.107,19.000 10.589 L 19.000 10.748 18.634 10.774 C 18.432 10.788,17.941 10.800,17.541 10.800 L 16.815 10.800 16.685 9.870 C 16.613 9.359,16.510 8.715,16.456 8.440 C 16.343 7.869,16.004 6.535,15.882 6.184 C 15.837 6.054,15.800 5.940,15.800 5.931 C 15.800 5.904,15.890 5.966,16.240 6.235 M7.873 7.010 C 7.578 8.238,7.471 8.766,7.342 9.640 C 7.285 10.025,7.221 10.432,7.198 10.544 L 7.157 10.749 6.888 10.774 C 6.542 10.807,5.306 10.807,5.107 10.774 L 4.955 10.749 4.980 10.584 C 5.026 10.293,5.360 9.353,5.580 8.897 C 5.970 8.088,6.581 7.283,7.300 6.629 C 7.669 6.294,7.995 6.040,8.057 6.040 C 8.092 6.040,8.036 6.333,7.873 7.010 M6.490 13.275 C 6.837 13.291,7.139 13.323,7.161 13.345 C 7.183 13.367,7.255 13.754,7.320 14.203 C 7.462 15.181,7.498 15.363,7.800 16.680 C 8.078 17.885,8.100 18.000,8.054 18.000 C 7.953 17.998,7.119 17.242,6.692 16.764 C 6.508 16.558,6.249 16.225,6.117 16.024 C 5.657 15.327,5.087 14.047,4.979 13.470 C 4.954 13.337,4.962 13.316,5.046 13.283 C 5.158 13.238,5.627 13.236,6.490 13.275 M14.298 13.284 C 14.331 13.318,14.253 13.991,14.136 14.680 C 14.019 15.365,13.765 16.438,13.618 16.862 C 13.286 17.825,12.636 18.855,12.227 19.067 C 12.055 19.156,11.796 19.117,11.632 18.979 C 11.288 18.691,10.832 17.976,10.546 17.280 C 10.250 16.558,9.948 15.342,9.782 14.195 C 9.728 13.827,9.699 13.335,9.730 13.313 C 9.795 13.264,14.250 13.237,14.298 13.284 M19.011 13.413 C 18.996 13.665,18.695 14.505,18.421 15.060 C 17.960 15.992,17.482 16.649,16.791 17.300 C 16.428 17.641,15.982 18.000,15.920 18.000 C 15.885 18.000,15.947 17.703,16.214 16.600 C 16.448 15.635,16.534 15.192,16.677 14.211 C 16.742 13.767,16.815 13.366,16.840 13.321 C 16.882 13.241,16.910 13.239,17.952 13.249 L 19.020 13.260 19.011 13.413 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.226 4.946 C 12.930 5.413,13.640 6.869,13.976 8.532 C 14.090 9.101,14.265 10.153,14.303 10.506 L 14.329 10.751 13.816 10.781 C 13.261 10.813,9.735 10.788,9.698 10.752 C 9.670 10.723,9.778 9.838,9.885 9.220 C 10.006 8.520,10.217 7.622,10.360 7.194 C 10.522 6.709,10.906 5.942,11.183 5.550 C 11.378 5.275,11.876 4.800,11.971 4.800 C 11.990 4.800,12.105 4.866,12.226 4.946 M16.340 6.323 C 16.685 6.604,17.440 7.377,17.684 7.700 C 17.946 8.047,18.127 8.361,18.438 9.008 C 18.765 9.687,18.954 10.209,18.986 10.521 L 19.010 10.747 18.699 10.774 C 18.528 10.788,18.034 10.800,17.602 10.800 L 16.815 10.800 16.744 10.270 C 16.615 9.314,16.444 8.351,16.284 7.680 C 16.139 7.076,15.890 6.172,15.816 5.982 C 15.788 5.911,15.798 5.913,15.923 6.000 C 15.998 6.053,16.186 6.198,16.340 6.323 M8.055 6.170 C 8.042 6.242,7.944 6.678,7.837 7.140 C 7.558 8.344,7.495 8.663,7.322 9.753 C 7.237 10.288,7.156 10.738,7.142 10.752 C 7.105 10.789,5.358 10.815,5.138 10.782 L 4.952 10.754 4.979 10.607 C 5.048 10.222,5.368 9.343,5.630 8.820 C 5.978 8.123,6.434 7.498,7.025 6.903 C 7.362 6.564,7.983 6.040,8.048 6.040 C 8.064 6.040,8.068 6.099,8.055 6.170 M6.889 13.306 C 7.087 13.324,7.163 13.347,7.178 13.395 C 7.190 13.431,7.262 13.865,7.340 14.360 C 7.418 14.855,7.572 15.665,7.684 16.160 C 8.008 17.602,8.084 17.970,8.061 17.992 C 8.007 18.047,7.057 17.184,6.659 16.720 C 6.258 16.251,5.992 15.851,5.696 15.269 C 5.276 14.442,4.918 13.486,4.975 13.338 C 4.986 13.309,5.046 13.277,5.108 13.266 C 5.240 13.243,6.502 13.271,6.889 13.306 M18.670 13.266 L 19.000 13.292 19.000 13.410 C 19.000 13.672,18.707 14.469,18.343 15.194 C 17.828 16.221,17.121 17.083,16.200 17.806 C 15.907 18.036,15.904 18.036,15.935 17.842 C 15.950 17.748,16.071 17.209,16.204 16.645 C 16.338 16.081,16.526 15.143,16.622 14.560 C 16.840 13.249,16.831 13.289,16.913 13.267 C 17.020 13.239,18.308 13.238,18.670 13.266 M14.287 13.500 C 14.232 14.384,13.834 16.282,13.541 17.062 C 13.382 17.483,13.005 18.187,12.762 18.514 C 12.369 19.042,12.136 19.184,11.827 19.082 C 11.470 18.965,10.810 17.987,10.461 17.058 C 10.139 16.203,9.720 14.191,9.720 13.500 C 9.720 13.333,9.726 13.324,9.850 13.309 C 9.921 13.300,10.952 13.294,12.140 13.296 L 14.300 13.300 14.287 13.500 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/globe.svg b/packages/icons/svg/globe.svg
index 3b9e12c448..758dc74650 100644
--- a/packages/icons/svg/globe.svg
+++ b/packages/icons/svg/globe.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M7.767 6.687 C 7.979 6.853,8.335 7.005,9.020 7.220 C 9.893 7.496,10.095 7.612,10.381 8.001 C 10.565 8.253,10.656 8.515,10.739 9.040 C 10.969 10.492,11.072 10.754,11.618 11.273 C 12.380 11.997,13.361 12.144,14.293 11.673 C 14.563 11.537,15.057 11.067,15.213 10.798 C 15.271 10.698,15.436 10.203,15.579 9.698 C 15.986 8.270,16.148 8.007,16.907 7.551 C 17.356 7.282,17.338 7.283,17.525 7.485 C 18.021 8.020,18.697 9.338,18.920 10.202 C 19.020 10.591,19.166 12.833,19.103 13.029 C 19.071 13.133,19.064 13.134,18.129 13.259 C 17.070 13.400,16.876 13.486,16.271 14.082 C 15.736 14.608,15.686 14.806,15.579 16.800 C 15.543 17.471,15.500 18.083,15.485 18.160 C 15.460 18.282,15.425 18.316,15.212 18.423 C 14.565 18.746,12.816 19.200,12.215 19.200 L 12.000 19.200 11.999 18.410 C 11.998 17.976,11.982 17.313,11.962 16.938 C 11.912 15.990,11.828 15.793,11.214 15.183 C 10.814 14.785,10.558 14.664,9.576 14.404 C 9.156 14.293,8.726 14.165,8.620 14.120 C 8.334 13.998,8.068 13.787,7.847 13.508 C 7.512 13.085,7.485 13.016,7.099 11.600 C 6.942 11.026,6.859 10.828,6.675 10.594 C 6.536 10.417,6.082 10.070,5.694 9.843 C 5.258 9.588,5.254 9.580,5.382 9.274 C 5.514 8.960,5.877 8.299,6.091 7.984 C 6.284 7.700,6.572 7.354,7.053 6.829 L 7.411 6.438 7.515 6.505 C 7.573 6.542,7.686 6.624,7.767 6.687 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M7.743 6.665 C 8.042 6.877,8.221 6.955,8.976 7.206 C 9.745 7.461,9.977 7.573,10.202 7.799 C 10.502 8.098,10.620 8.395,10.760 9.200 C 10.971 10.408,11.078 10.701,11.463 11.117 C 12.122 11.829,13.007 12.099,13.840 11.844 C 14.004 11.793,14.202 11.719,14.280 11.679 C 14.478 11.576,14.864 11.239,15.066 10.992 C 15.246 10.774,15.237 10.797,15.721 9.241 C 15.928 8.574,16.110 8.206,16.353 7.964 C 16.575 7.742,17.191 7.360,17.327 7.360 C 17.511 7.360,17.974 8.023,18.401 8.900 C 18.923 9.970,18.993 10.297,19.087 12.091 C 19.136 13.008,19.136 13.011,19.051 13.079 C 18.992 13.127,18.766 13.175,18.313 13.236 C 17.164 13.392,16.965 13.463,16.465 13.899 C 15.765 14.510,15.700 14.716,15.581 16.720 C 15.490 18.248,15.493 18.226,15.345 18.335 C 14.934 18.637,12.898 19.200,12.218 19.200 L 12.000 19.200 11.999 18.330 C 11.999 17.269,11.944 16.414,11.857 16.120 C 11.765 15.804,11.603 15.573,11.215 15.200 C 10.789 14.791,10.543 14.672,9.573 14.403 C 8.476 14.099,8.374 14.050,7.981 13.645 C 7.588 13.240,7.482 12.996,7.102 11.620 C 6.851 10.712,6.700 10.504,5.926 10.001 C 5.315 9.603,5.320 9.607,5.320 9.497 C 5.320 9.277,5.972 8.111,6.371 7.618 C 6.834 7.045,7.405 6.438,7.453 6.467 C 7.479 6.482,7.609 6.571,7.743 6.665 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/google.svg b/packages/icons/svg/google.svg
index 76b9a8314f..1e2d75850d 100644
--- a/packages/icons/svg/google.svg
+++ b/packages/icons/svg/google.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.347 3.042 C 8.914 3.258,6.617 4.457,5.054 6.327 C 3.765 7.870,3.000 9.983,3.000 12.000 C 3.000 14.024,3.763 16.131,5.048 17.660 C 5.663 18.391,6.325 18.981,7.100 19.490 C 8.193 20.207,9.468 20.690,10.841 20.907 C 11.464 21.006,12.975 21.006,13.642 20.908 C 17.636 20.318,20.293 17.660,20.907 13.640 C 21.026 12.857,20.995 10.961,20.855 10.470 C 20.836 10.404,20.594 10.400,16.497 10.400 L 12.160 10.400 12.160 12.120 L 12.160 13.840 14.640 13.840 L 17.120 13.840 17.120 13.924 C 17.120 14.042,16.903 14.677,16.776 14.929 C 16.358 15.762,15.552 16.537,14.702 16.922 C 13.747 17.355,12.475 17.535,11.440 17.383 C 9.237 17.060,7.463 15.452,6.895 13.260 C 6.788 12.848,6.781 12.769,6.781 12.020 C 6.780 11.389,6.795 11.157,6.851 10.920 C 7.113 9.821,7.607 8.913,8.342 8.181 C 9.137 7.389,10.083 6.881,11.180 6.658 C 11.627 6.567,12.675 6.554,13.120 6.635 C 13.905 6.776,14.789 7.170,15.374 7.639 L 15.705 7.906 17.017 6.623 L 18.329 5.340 18.009 5.070 C 16.219 3.560,13.802 2.825,11.347 3.042 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.373 3.041 C 8.904 3.281,6.657 4.445,5.081 6.300 C 3.852 7.748,3.084 9.759,3.012 11.720 C 2.941 13.664,3.600 15.748,4.780 17.314 C 5.900 18.801,7.479 19.931,9.247 20.512 C 10.096 20.790,10.718 20.913,11.550 20.965 C 15.195 21.194,18.282 19.645,19.859 16.798 C 20.482 15.673,20.879 14.291,20.964 12.950 C 21.006 12.291,20.962 10.946,20.887 10.600 C 20.858 10.463,20.852 10.459,20.619 10.434 C 20.487 10.420,18.531 10.407,16.270 10.404 L 12.160 10.400 12.160 12.120 L 12.160 13.840 14.640 13.840 C 17.043 13.840,17.120 13.842,17.120 13.915 C 17.120 14.044,16.921 14.604,16.757 14.940 C 16.355 15.760,15.455 16.610,14.621 16.957 C 13.837 17.283,13.129 17.418,12.200 17.416 C 11.587 17.415,11.444 17.402,11.051 17.310 C 9.004 16.831,7.428 15.294,6.902 13.266 C 6.808 12.901,6.800 12.805,6.800 12.004 C 6.800 11.208,6.808 11.105,6.900 10.752 C 7.317 9.147,8.358 7.859,9.832 7.123 C 10.660 6.709,11.285 6.585,12.400 6.610 C 13.104 6.626,13.215 6.638,13.540 6.736 C 14.271 6.957,14.977 7.315,15.460 7.712 L 15.700 7.909 17.014 6.625 L 18.328 5.342 18.174 5.209 C 16.826 4.046,15.155 3.307,13.360 3.081 C 12.879 3.020,11.807 2.999,11.373 3.041 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/hand.svg b/packages/icons/svg/hand.svg
index ac386de33e..6f9b17332e 100644
--- a/packages/icons/svg/hand.svg
+++ b/packages/icons/svg/hand.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.487 2.587 C 11.315 2.672,11.026 2.954,10.940 3.120 C 10.825 3.343,10.803 3.882,10.775 7.212 L 10.747 10.443 10.606 10.567 C 10.529 10.634,10.404 10.716,10.330 10.747 C 10.205 10.799,10.178 10.797,10.015 10.717 C 9.916 10.670,9.809 10.590,9.776 10.540 C 9.699 10.423,9.654 9.562,9.619 7.600 C 9.580 5.345,9.539 4.473,9.467 4.333 C 9.383 4.170,9.124 3.943,8.883 3.821 C 8.726 3.742,8.623 3.720,8.407 3.720 C 8.087 3.720,7.936 3.764,7.656 3.942 C 7.375 4.120,7.328 4.255,7.280 5.013 C 7.226 5.862,7.160 9.763,7.160 12.083 L 7.160 14.025 7.050 14.126 C 6.870 14.292,6.749 14.360,6.632 14.360 C 6.491 14.360,6.267 14.253,6.207 14.156 C 6.134 14.040,6.088 13.621,6.041 12.660 C 5.931 10.407,5.910 10.268,5.635 10.020 C 5.378 9.788,5.193 9.722,4.800 9.721 C 4.377 9.721,4.134 9.821,3.891 10.097 C 3.633 10.390,3.627 10.454,3.651 12.620 L 3.671 14.500 3.793 14.920 C 4.152 16.160,4.620 17.240,5.085 17.900 C 5.378 18.317,6.742 19.703,7.180 20.030 C 7.915 20.578,9.368 21.210,10.361 21.415 C 11.128 21.573,12.643 21.593,13.437 21.457 C 13.925 21.373,15.138 20.955,15.685 20.682 C 17.669 19.695,19.244 17.886,19.954 15.780 C 20.329 14.670,20.365 14.168,20.374 10.020 C 20.381 6.470,20.415 6.808,20.012 6.440 C 19.723 6.176,19.592 6.120,19.259 6.120 C 18.896 6.120,18.687 6.181,18.459 6.353 C 18.086 6.635,18.071 6.706,17.980 8.680 C 17.912 10.162,17.897 10.322,17.812 10.507 C 17.692 10.768,17.259 10.838,17.051 10.629 C 16.905 10.483,16.886 10.227,16.842 7.860 C 16.778 4.439,16.781 4.504,16.682 4.343 C 16.573 4.167,16.246 3.871,16.066 3.785 C 15.909 3.711,15.422 3.696,15.203 3.759 C 14.904 3.845,14.605 4.144,14.519 4.443 C 14.466 4.629,14.404 6.290,14.366 8.525 C 14.331 10.624,14.350 10.509,14.017 10.704 C 13.852 10.800,13.819 10.806,13.684 10.766 C 13.481 10.705,13.408 10.614,13.361 10.365 C 13.320 10.150,13.271 8.594,13.200 5.250 C 13.166 3.679,13.149 3.334,13.096 3.201 C 13.004 2.971,12.615 2.623,12.386 2.566 C 12.117 2.498,11.645 2.509,11.487 2.587 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.540 2.577 C 11.448 2.612,11.284 2.736,11.155 2.869 C 10.970 3.061,10.922 3.139,10.882 3.320 C 10.820 3.601,10.765 6.022,10.762 8.526 L 10.760 10.432 10.613 10.561 C 10.532 10.632,10.404 10.716,10.330 10.747 C 10.205 10.799,10.178 10.797,10.020 10.720 C 9.925 10.674,9.826 10.612,9.802 10.582 C 9.717 10.480,9.681 9.845,9.621 7.439 C 9.559 4.961,9.541 4.593,9.474 4.373 C 9.430 4.225,9.215 4.019,8.935 3.855 C 8.759 3.751,8.705 3.740,8.380 3.741 C 8.060 3.741,7.997 3.754,7.813 3.855 C 7.562 3.994,7.426 4.134,7.365 4.318 C 7.339 4.394,7.301 4.718,7.280 5.038 C 7.222 5.895,7.160 9.472,7.160 11.907 L 7.160 14.034 6.991 14.178 C 6.781 14.358,6.669 14.388,6.466 14.316 C 6.138 14.200,6.120 14.114,6.020 12.200 C 5.924 10.385,5.891 10.226,5.556 9.961 C 5.318 9.773,5.045 9.701,4.680 9.732 C 4.349 9.760,4.177 9.829,3.967 10.019 C 3.657 10.298,3.660 10.277,3.663 12.540 L 3.666 14.540 3.854 15.132 C 4.219 16.283,4.618 17.197,5.013 17.789 C 5.390 18.353,6.855 19.818,7.413 20.189 C 8.275 20.762,9.795 21.349,10.760 21.483 C 11.239 21.550,12.877 21.553,13.263 21.489 C 13.868 21.388,14.920 21.036,15.631 20.698 C 16.438 20.314,17.184 19.778,17.881 19.081 C 18.927 18.035,19.637 16.841,20.076 15.389 C 20.314 14.600,20.355 13.865,20.369 10.080 C 20.378 7.687,20.369 7.059,20.326 6.890 C 20.282 6.718,20.232 6.644,20.046 6.474 C 19.754 6.207,19.564 6.122,19.257 6.121 C 18.946 6.120,18.664 6.204,18.448 6.363 C 18.108 6.613,18.068 6.806,17.979 8.640 C 17.889 10.492,17.868 10.593,17.544 10.716 C 17.359 10.787,17.110 10.723,17.017 10.581 C 16.917 10.429,16.888 9.900,16.840 7.400 C 16.788 4.669,16.774 4.458,16.621 4.258 C 16.469 4.058,16.143 3.810,15.968 3.762 C 15.773 3.707,15.439 3.709,15.215 3.765 C 14.950 3.832,14.619 4.147,14.542 4.405 C 14.470 4.648,14.413 5.928,14.362 8.440 C 14.335 9.744,14.310 10.305,14.272 10.418 C 14.233 10.539,14.174 10.605,14.027 10.696 C 13.839 10.812,13.829 10.814,13.667 10.758 C 13.394 10.663,13.365 10.561,13.320 9.535 C 13.298 9.054,13.253 7.490,13.219 6.060 C 13.185 4.630,13.142 3.394,13.124 3.313 C 13.105 3.232,13.051 3.111,13.003 3.044 C 12.910 2.913,12.639 2.681,12.487 2.603 C 12.337 2.524,11.726 2.508,11.540 2.577 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/hashtag.svg b/packages/icons/svg/hashtag.svg
index 46f66883b5..aa2431b6bb 100644
--- a/packages/icons/svg/hashtag.svg
+++ b/packages/icons/svg/hashtag.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.324 3.748 C 10.068 3.876,9.829 4.162,9.710 4.483 C 9.579 4.837,9.389 5.499,9.159 6.400 C 9.067 6.763,8.975 7.089,8.957 7.125 C 8.927 7.181,8.803 7.195,8.111 7.217 C 6.808 7.260,5.836 7.317,5.606 7.364 C 5.354 7.415,5.140 7.604,4.982 7.915 C 4.850 8.176,4.820 8.389,4.880 8.639 C 4.938 8.884,5.224 9.289,5.402 9.381 C 5.621 9.494,6.033 9.555,7.020 9.618 C 8.146 9.691,8.240 9.703,8.240 9.782 C 8.240 9.912,7.738 12.058,7.298 13.810 L 7.150 14.400 6.916 14.400 C 6.344 14.400,4.017 14.486,3.603 14.522 C 3.041 14.572,2.900 14.641,2.678 14.973 C 2.409 15.376,2.381 15.677,2.575 16.100 C 2.841 16.681,3.101 16.754,5.200 16.841 C 5.783 16.865,6.300 16.893,6.349 16.903 C 6.421 16.918,6.434 16.942,6.419 17.030 C 6.408 17.091,6.329 17.527,6.243 18.000 C 5.975 19.468,5.978 19.522,6.348 19.922 C 6.643 20.240,6.816 20.327,7.159 20.329 C 7.722 20.333,8.051 20.107,8.253 19.578 C 8.393 19.212,8.624 18.433,8.862 17.530 L 9.054 16.800 9.437 16.800 C 10.048 16.800,12.086 16.884,12.240 16.916 L 12.380 16.945 12.370 17.164 C 12.365 17.284,12.306 17.661,12.238 18.001 C 12.170 18.342,12.105 18.813,12.092 19.048 C 12.070 19.456,12.074 19.487,12.177 19.698 C 12.569 20.499,13.703 20.570,14.142 19.821 C 14.278 19.589,14.555 18.726,14.778 17.840 C 14.881 17.433,14.982 17.034,15.003 16.953 L 15.041 16.806 16.651 16.793 L 18.260 16.780 18.472 16.662 C 18.822 16.468,19.160 15.934,19.160 15.574 C 19.160 15.242,18.858 14.773,18.548 14.624 C 18.322 14.515,17.914 14.475,16.410 14.416 C 15.997 14.400,15.720 14.373,15.720 14.349 C 15.720 14.275,16.664 10.265,16.802 9.754 L 16.843 9.600 17.992 9.598 C 18.623 9.596,19.504 9.581,19.949 9.564 C 20.750 9.532,20.760 9.531,20.923 9.418 C 21.130 9.275,21.394 8.979,21.465 8.811 C 21.495 8.740,21.520 8.567,21.520 8.426 C 21.520 7.997,21.368 7.687,21.049 7.466 C 20.849 7.328,20.593 7.300,18.960 7.241 C 18.311 7.217,17.730 7.188,17.670 7.176 C 17.519 7.145,17.523 7.070,17.739 6.018 C 17.947 5.002,17.990 4.632,17.923 4.428 C 17.858 4.231,17.426 3.832,17.206 3.766 C 16.978 3.698,16.481 3.702,16.311 3.773 C 16.096 3.863,15.875 4.082,15.779 4.300 C 15.647 4.599,15.434 5.348,14.996 7.050 L 14.957 7.200 13.508 7.197 C 12.130 7.193,11.637 7.171,11.574 7.108 C 11.559 7.092,11.650 6.550,11.777 5.903 C 11.931 5.117,11.999 4.686,11.981 4.603 C 11.945 4.443,11.655 4.051,11.463 3.905 C 11.297 3.778,11.160 3.740,10.740 3.704 C 10.521 3.685,10.430 3.695,10.324 3.748 M13.512 9.667 L 14.245 9.692 14.219 9.856 C 14.172 10.147,13.355 13.661,13.197 14.252 L 13.156 14.403 11.500 14.392 C 10.312 14.383,9.831 14.367,9.798 14.334 C 9.763 14.299,9.768 14.206,9.818 13.954 C 9.947 13.315,10.642 10.348,10.804 9.744 L 10.846 9.588 11.813 9.615 C 12.345 9.629,13.110 9.653,13.512 9.667 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.260 3.791 C 10.113 3.884,9.865 4.155,9.787 4.308 C 9.692 4.493,9.460 5.248,9.219 6.160 C 9.093 6.633,8.982 7.050,8.971 7.088 C 8.944 7.184,8.867 7.193,7.660 7.240 C 6.268 7.295,5.631 7.345,5.470 7.415 C 5.066 7.588,4.764 8.209,4.878 8.632 C 4.938 8.854,5.233 9.280,5.391 9.372 C 5.575 9.479,6.042 9.550,7.030 9.619 C 7.991 9.687,8.189 9.710,8.221 9.761 C 8.254 9.816,7.993 10.978,7.435 13.250 L 7.153 14.400 6.882 14.400 C 6.424 14.400,4.372 14.479,3.788 14.520 C 3.164 14.563,2.972 14.625,2.776 14.847 C 2.430 15.242,2.370 15.667,2.595 16.133 C 2.856 16.673,3.143 16.752,5.160 16.840 C 6.390 16.894,6.400 16.895,6.400 17.022 C 6.400 17.077,6.330 17.512,6.244 17.991 C 5.979 19.463,5.982 19.514,6.347 19.917 C 6.651 20.253,6.838 20.334,7.256 20.312 C 7.840 20.282,8.079 20.065,8.332 19.337 C 8.474 18.930,8.806 17.779,8.962 17.150 L 9.050 16.800 9.435 16.801 C 9.887 16.801,11.507 16.866,12.010 16.903 L 12.360 16.928 12.360 17.114 C 12.360 17.216,12.306 17.606,12.239 17.980 C 12.173 18.354,12.108 18.842,12.094 19.065 C 12.070 19.438,12.076 19.487,12.162 19.665 C 12.448 20.255,13.145 20.504,13.708 20.216 C 13.845 20.146,13.987 20.032,14.064 19.933 C 14.216 19.733,14.549 18.746,14.798 17.760 C 14.890 17.397,14.983 17.032,15.004 16.950 L 15.043 16.800 16.632 16.800 L 18.220 16.799 18.422 16.683 C 18.795 16.470,19.101 16.029,19.147 15.641 C 19.187 15.308,18.896 14.811,18.561 14.641 C 18.361 14.538,17.944 14.489,16.860 14.440 C 16.000 14.401,15.720 14.376,15.720 14.338 C 15.720 14.286,16.700 10.135,16.801 9.756 L 16.840 9.612 18.650 9.586 C 19.645 9.572,20.548 9.543,20.656 9.520 C 20.887 9.473,21.127 9.290,21.342 8.997 C 21.470 8.823,21.494 8.757,21.510 8.527 C 21.520 8.380,21.509 8.188,21.485 8.099 C 21.417 7.848,21.224 7.578,21.033 7.466 C 20.818 7.339,20.443 7.300,18.840 7.237 C 18.213 7.212,17.666 7.174,17.625 7.152 C 17.534 7.103,17.544 7.003,17.740 6.020 C 17.918 5.128,17.977 4.684,17.942 4.499 C 17.922 4.389,17.852 4.286,17.686 4.119 C 17.347 3.781,17.255 3.742,16.780 3.741 C 16.416 3.740,16.363 3.750,16.196 3.848 C 15.825 4.066,15.732 4.281,15.284 5.960 C 15.134 6.521,14.999 7.031,14.984 7.094 L 14.956 7.208 13.328 7.191 C 12.433 7.182,11.669 7.160,11.632 7.143 C 11.584 7.122,11.569 7.080,11.581 7.006 C 11.591 6.948,11.682 6.450,11.783 5.900 C 12.029 4.569,12.029 4.601,11.779 4.258 C 11.656 4.090,11.503 3.936,11.387 3.864 C 11.216 3.759,11.156 3.745,10.789 3.731 C 10.438 3.717,10.363 3.726,10.260 3.791 M12.700 9.645 C 13.536 9.670,14.227 9.697,14.236 9.704 C 14.260 9.725,13.390 13.537,13.203 14.230 L 13.157 14.400 11.868 14.400 C 11.160 14.400,10.405 14.388,10.190 14.374 L 9.800 14.348 9.800 14.189 C 9.800 14.101,9.873 13.703,9.962 13.305 C 10.148 12.469,10.797 9.733,10.828 9.654 C 10.853 9.588,10.815 9.588,12.700 9.645 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/heart.svg b/packages/icons/svg/heart.svg
index b33fa2e09d..c9683eb836 100644
--- a/packages/icons/svg/heart.svg
+++ b/packages/icons/svg/heart.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.740 4.977 C 14.777 5.169,14.075 5.625,12.649 6.986 L 11.999 7.607 11.469 7.097 C 10.430 6.094,9.785 5.591,9.133 5.278 C 8.570 5.007,8.468 4.991,7.227 4.970 L 6.114 4.952 5.807 5.061 C 4.782 5.424,3.842 6.125,3.226 6.985 C 2.716 7.698,2.398 8.874,2.454 9.846 C 2.525 11.110,2.862 11.840,3.883 12.940 C 4.297 13.387,10.048 19.236,11.237 20.420 L 12.000 21.179 12.643 20.540 C 13.687 19.501,19.715 13.373,20.099 12.960 C 20.778 12.230,20.976 11.942,21.220 11.336 C 21.480 10.692,21.530 10.422,21.529 9.660 C 21.529 8.909,21.481 8.597,21.274 8.007 C 20.766 6.554,19.429 5.362,17.920 5.016 C 17.542 4.930,16.108 4.904,15.740 4.977 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.020 4.961 C 14.979 5.035,14.231 5.490,12.590 7.047 L 12.000 7.606 11.390 7.025 C 10.375 6.059,9.869 5.665,9.195 5.319 C 8.649 5.039,8.458 5.006,7.180 4.975 L 6.100 4.949 5.676 5.115 C 4.759 5.475,3.861 6.146,3.290 6.900 C 2.755 7.605,2.404 8.832,2.454 9.820 C 2.522 11.158,2.880 11.885,4.095 13.154 C 4.781 13.872,10.667 19.854,11.419 20.600 L 12.005 21.180 13.672 19.499 C 16.892 16.254,20.172 12.896,20.488 12.520 C 20.869 12.066,21.012 11.831,21.230 11.300 C 21.486 10.675,21.533 10.368,21.510 9.465 C 21.493 8.783,21.479 8.661,21.383 8.340 C 21.243 7.873,20.979 7.319,20.715 6.937 C 19.970 5.859,18.650 5.046,17.540 4.980 C 16.850 4.940,16.403 4.934,16.020 4.961 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/home.svg b/packages/icons/svg/home.svg
index 3ecd4ba6d4..0ff89db8e8 100644
--- a/packages/icons/svg/home.svg
+++ b/packages/icons/svg/home.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.420 2.673 C 11.056 2.916,9.563 4.366,6.358 7.585 C 3.302 10.655,2.635 11.356,2.515 11.619 C 2.284 12.126,2.638 12.873,3.196 13.059 C 3.474 13.151,3.875 13.130,4.120 13.010 C 4.219 12.961,4.413 12.831,4.550 12.719 L 4.800 12.516 4.801 15.828 C 4.803 19.135,4.835 20.485,4.921 20.805 C 5.016 21.157,5.344 21.442,5.742 21.519 C 6.358 21.637,8.528 21.601,8.850 21.467 C 9.166 21.335,9.444 20.982,9.517 20.619 C 9.539 20.510,9.595 19.862,9.640 19.180 C 9.758 17.395,9.779 17.310,10.153 17.050 L 10.380 16.891 11.964 16.864 L 13.548 16.836 13.744 16.993 C 14.238 17.388,14.275 17.507,14.359 19.020 C 14.425 20.203,14.482 20.769,14.548 20.910 C 14.582 20.981,14.713 21.136,14.840 21.253 C 15.032 21.431,15.110 21.475,15.305 21.517 C 15.634 21.586,17.065 21.616,17.775 21.567 L 18.370 21.527 18.590 21.375 C 18.711 21.292,18.897 21.115,19.005 20.982 L 19.200 20.741 19.200 16.629 L 19.200 12.516 19.450 12.719 C 19.808 13.009,20.005 13.095,20.352 13.114 C 20.747 13.134,20.939 13.057,21.196 12.777 C 21.406 12.546,21.560 12.213,21.560 11.985 C 21.560 11.759,21.341 11.395,20.927 10.936 C 20.350 10.295,13.270 3.222,12.919 2.936 C 12.497 2.592,12.399 2.548,12.000 2.529 L 11.660 2.512 11.420 2.673 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.452 2.656 C 11.052 2.931,10.194 3.761,6.919 7.037 C 3.694 10.263,2.787 11.200,2.568 11.531 C 2.476 11.671,2.460 11.735,2.462 11.977 C 2.464 12.309,2.572 12.572,2.800 12.800 C 3.035 13.035,3.210 13.100,3.600 13.098 C 3.992 13.096,4.136 13.038,4.550 12.714 L 4.800 12.519 4.801 15.709 C 4.803 19.269,4.838 20.532,4.943 20.850 C 5.044 21.152,5.293 21.377,5.654 21.490 C 5.923 21.574,6.008 21.579,7.100 21.578 C 8.756 21.576,8.985 21.524,9.306 21.076 C 9.500 20.807,9.547 20.548,9.640 19.240 C 9.770 17.403,9.785 17.339,10.160 17.056 L 10.380 16.889 11.967 16.864 L 13.554 16.839 13.802 17.045 C 14.230 17.401,14.266 17.543,14.380 19.360 C 14.472 20.835,14.500 20.948,14.845 21.260 C 15.083 21.474,15.232 21.522,15.816 21.568 C 16.429 21.616,18.107 21.581,18.340 21.516 C 18.457 21.483,18.593 21.378,18.850 21.121 L 19.200 20.771 19.200 16.643 L 19.200 12.516 19.428 12.701 C 19.749 12.963,19.999 13.079,20.300 13.107 C 20.639 13.139,20.875 13.069,21.098 12.873 C 21.308 12.688,21.560 12.218,21.560 12.010 C 21.560 11.838,21.418 11.551,21.174 11.227 C 20.966 10.952,13.893 3.841,13.147 3.158 C 12.580 2.638,12.443 2.564,11.994 2.535 C 11.662 2.514,11.659 2.514,11.452 2.656 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/html5.svg b/packages/icons/svg/html5.svg
index f5126b5596..41552177c4 100644
--- a/packages/icons/svg/html5.svg
+++ b/packages/icons/svg/html5.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.016 3.250 C 4.029 3.388,4.311 6.902,4.643 11.059 C 4.974 15.216,5.248 18.621,5.252 18.625 C 5.257 18.628,6.664 19.052,8.380 19.567 L 11.500 20.502 14.620 19.567 C 16.336 19.052,17.743 18.629,17.747 18.626 C 17.750 18.623,18.025 15.218,18.356 11.060 C 18.688 6.902,18.971 3.388,18.984 3.250 L 19.009 3.000 11.500 3.000 L 3.991 3.000 4.016 3.250 M16.481 6.170 C 16.481 6.197,16.415 6.620,16.334 7.110 L 16.187 8.000 12.431 8.000 L 8.674 8.000 8.696 8.110 C 8.708 8.171,8.773 8.616,8.840 9.100 C 8.907 9.584,8.972 10.030,8.984 10.090 L 9.006 10.200 12.439 10.200 L 15.872 10.200 15.854 10.350 C 15.844 10.433,15.704 11.757,15.542 13.293 C 15.381 14.830,15.234 16.101,15.215 16.118 C 15.196 16.136,14.352 16.425,13.340 16.762 L 11.501 17.373 9.660 16.762 C 8.648 16.425,7.804 16.136,7.785 16.118 C 7.759 16.094,7.456 13.365,7.441 13.030 C 7.441 13.013,7.861 13.000,8.375 13.000 L 9.310 13.000 9.463 13.779 L 9.617 14.559 10.559 14.873 L 11.500 15.187 12.441 14.873 L 13.383 14.559 13.517 13.470 C 13.590 12.870,13.660 12.313,13.671 12.230 L 13.691 12.080 10.569 12.080 L 7.448 12.080 7.423 11.890 C 7.363 11.416,6.840 6.354,6.840 6.244 L 6.840 6.120 11.660 6.120 C 15.489 6.120,16.480 6.130,16.481 6.170 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.013 3.270 C 4.027 3.419,4.300 6.816,4.620 10.820 C 4.940 14.824,5.213 18.219,5.226 18.364 L 5.250 18.627 8.375 19.565 L 11.500 20.502 14.620 19.567 C 16.336 19.052,17.743 18.628,17.747 18.625 C 17.754 18.620,19.001 3.098,19.000 3.030 C 19.000 3.014,15.622 3.000,11.494 3.000 L 3.989 3.000 4.013 3.270 M16.457 6.163 C 16.470 6.176,16.414 6.595,16.334 7.093 L 16.187 8.000 12.429 8.000 L 8.671 8.000 8.696 8.131 C 8.709 8.203,8.774 8.649,8.840 9.121 C 8.905 9.594,8.970 10.030,8.983 10.090 L 9.006 10.200 12.442 10.200 L 15.878 10.200 15.859 10.310 C 15.848 10.370,15.758 11.194,15.659 12.140 C 15.370 14.901,15.235 16.057,15.195 16.106 C 15.174 16.131,14.335 16.426,13.329 16.763 L 11.500 17.374 9.672 16.764 C 8.667 16.428,7.827 16.132,7.805 16.106 C 7.784 16.081,7.702 15.475,7.624 14.760 C 7.545 14.045,7.471 13.368,7.458 13.255 C 7.437 13.066,7.443 13.049,7.528 13.026 C 7.578 13.012,8.001 13.001,8.466 13.001 L 9.312 13.000 9.461 13.778 L 9.611 14.557 10.555 14.872 L 11.500 15.187 12.444 14.872 L 13.388 14.557 13.534 13.349 C 13.615 12.684,13.681 12.127,13.680 12.110 C 13.680 12.093,12.276 12.080,10.560 12.080 C 8.844 12.080,7.440 12.069,7.440 12.055 C 7.440 12.041,7.377 11.443,7.301 10.725 C 7.113 8.967,6.840 6.282,6.840 6.190 C 6.840 6.118,6.987 6.116,11.637 6.128 C 14.275 6.135,16.444 6.151,16.457 6.163 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/identification.svg b/packages/icons/svg/identification.svg
index 7cf3c14832..8b652cebd2 100644
--- a/packages/icons/svg/identification.svg
+++ b/packages/icons/svg/identification.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.720 2.517 C 11.448 2.572,11.228 2.729,10.980 3.044 L 10.800 3.273 10.801 3.727 C 10.803 4.449,10.864 5.133,10.940 5.280 C 11.046 5.485,11.346 5.758,11.587 5.868 C 11.999 6.057,12.458 5.946,12.837 5.566 C 13.054 5.348,13.106 5.201,13.160 4.653 C 13.270 3.522,13.154 3.032,12.705 2.731 C 12.432 2.547,12.016 2.457,11.720 2.517 M6.140 4.843 C 4.891 4.878,4.226 4.937,3.933 5.040 C 3.387 5.231,2.901 5.723,2.525 6.469 L 2.400 6.718 2.401 12.609 L 2.401 18.500 2.572 18.813 C 2.926 19.463,3.363 19.910,3.960 20.236 L 4.260 20.399 11.975 20.399 L 19.691 20.400 20.007 20.231 C 20.677 19.874,21.074 19.477,21.431 18.807 L 21.600 18.491 21.600 12.604 L 21.600 6.717 21.494 6.509 C 21.208 5.943,20.754 5.435,20.229 5.094 L 19.918 4.893 18.869 4.867 C 18.292 4.852,17.323 4.829,16.716 4.814 L 15.612 4.788 15.540 5.164 C 15.307 6.386,14.678 7.327,13.700 7.917 C 12.569 8.599,10.914 8.470,9.846 7.617 C 9.121 7.038,8.650 6.209,8.453 5.167 L 8.383 4.800 7.802 4.806 C 7.482 4.810,6.734 4.826,6.140 4.843 M8.490 9.832 C 8.785 9.977,9.180 10.344,9.346 10.627 C 9.458 10.816,9.460 10.832,9.457 11.400 C 9.453 12.071,9.426 12.158,9.111 12.502 C 8.853 12.784,8.486 13.022,8.147 13.126 C 7.904 13.200,7.848 13.204,7.627 13.162 C 7.078 13.056,6.614 12.741,6.294 12.258 L 6.140 12.026 6.143 11.403 C 6.145 10.883,6.157 10.757,6.218 10.642 C 6.323 10.442,6.668 10.089,6.913 9.931 C 7.257 9.709,7.373 9.679,7.828 9.694 C 8.189 9.705,8.264 9.721,8.490 9.832 M18.761 11.150 C 19.038 11.457,19.080 11.567,19.080 11.991 C 19.080 12.414,18.980 12.657,18.703 12.913 C 18.435 13.160,18.374 13.165,16.049 13.152 L 14.007 13.140 13.833 13.019 C 13.335 12.670,13.147 11.949,13.421 11.444 C 13.591 11.134,13.755 10.998,14.006 10.961 C 14.124 10.944,15.195 10.928,16.387 10.925 L 18.554 10.920 18.761 11.150 M17.534 14.724 C 17.847 15.070,17.898 15.192,17.897 15.600 C 17.897 16.003,17.819 16.187,17.531 16.466 C 17.192 16.796,17.290 16.780,15.573 16.777 L 14.045 16.774 13.883 16.662 C 13.705 16.538,13.488 16.289,13.385 16.091 C 13.349 16.020,13.308 15.829,13.294 15.667 C 13.272 15.405,13.281 15.346,13.368 15.155 C 13.423 15.037,13.547 14.853,13.644 14.746 L 13.820 14.552 14.640 14.522 C 15.091 14.506,15.877 14.490,16.387 14.486 L 17.313 14.480 17.534 14.724 M8.500 14.559 C 9.016 14.643,9.718 15.102,10.099 15.605 C 10.517 16.158,10.672 16.645,10.744 17.630 L 10.771 18.000 7.800 18.000 L 4.828 18.000 4.856 17.577 C 4.871 17.344,4.910 16.998,4.943 16.807 C 5.106 15.863,5.905 14.939,6.853 14.598 C 7.019 14.537,7.177 14.523,7.660 14.522 C 7.990 14.521,8.368 14.538,8.500 14.559 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.526 2.579 C 11.348 2.660,11.186 2.800,10.975 3.056 L 10.800 3.268 10.801 3.804 C 10.801 4.386,10.856 5.025,10.923 5.228 C 10.946 5.298,11.079 5.462,11.218 5.592 C 11.700 6.043,12.179 6.078,12.676 5.699 C 13.050 5.414,13.143 5.149,13.185 4.260 C 13.230 3.304,13.079 2.925,12.545 2.651 C 12.288 2.519,11.744 2.481,11.526 2.579 M6.800 4.827 C 5.863 4.846,4.541 4.923,4.233 4.978 C 3.542 5.100,2.959 5.609,2.525 6.469 L 2.400 6.718 2.400 12.600 L 2.400 18.483 2.485 18.652 C 2.811 19.302,3.351 19.887,3.923 20.210 L 4.260 20.400 11.978 20.400 L 19.695 20.400 20.078 20.190 C 20.611 19.898,21.098 19.411,21.390 18.878 L 21.600 18.495 21.600 12.606 L 21.600 6.718 21.484 6.489 C 21.224 5.974,20.751 5.454,20.220 5.101 L 19.900 4.887 18.680 4.863 C 18.009 4.850,17.045 4.828,16.538 4.814 L 15.616 4.788 15.533 5.184 C 15.350 6.052,14.993 6.756,14.460 7.301 C 13.975 7.797,13.581 8.042,12.973 8.225 C 12.661 8.319,12.552 8.332,12.040 8.333 C 11.570 8.333,11.401 8.317,11.147 8.247 C 10.359 8.032,9.761 7.636,9.229 6.980 C 8.907 6.582,8.592 5.844,8.457 5.170 L 8.383 4.800 7.841 4.809 C 7.544 4.813,7.075 4.822,6.800 4.827 M8.473 9.832 C 8.735 9.960,9.149 10.333,9.315 10.593 L 9.440 10.787 9.439 11.384 C 9.438 11.892,9.427 12.006,9.359 12.155 C 9.237 12.423,8.823 12.804,8.448 12.991 C 8.039 13.196,7.875 13.224,7.553 13.142 C 7.035 13.011,6.665 12.757,6.333 12.306 L 6.160 12.071 6.160 11.434 C 6.160 10.958,6.175 10.761,6.220 10.653 C 6.301 10.460,6.770 10.008,7.041 9.862 C 7.330 9.707,7.469 9.682,7.900 9.707 C 8.175 9.724,8.310 9.753,8.473 9.832 M18.739 11.127 C 19.035 11.456,19.060 11.524,19.058 11.980 C 19.057 12.254,19.036 12.425,18.993 12.523 C 18.898 12.738,18.682 12.963,18.480 13.057 C 18.306 13.137,18.231 13.140,16.168 13.152 L 14.037 13.164 13.845 13.023 C 13.491 12.764,13.315 12.407,13.314 11.945 C 13.313 11.718,13.333 11.632,13.430 11.447 C 13.494 11.324,13.615 11.168,13.697 11.101 C 13.845 10.982,13.857 10.980,14.414 10.957 C 14.725 10.945,15.784 10.931,16.766 10.927 L 18.553 10.920 18.739 11.127 M17.520 14.710 C 17.832 15.058,17.880 15.175,17.879 15.588 C 17.878 16.031,17.812 16.183,17.492 16.487 C 17.324 16.646,17.205 16.724,17.096 16.747 C 17.010 16.765,16.291 16.780,15.498 16.780 C 13.873 16.780,13.994 16.802,13.656 16.449 C 13.397 16.179,13.314 15.980,13.307 15.610 C 13.299 15.251,13.378 15.053,13.656 14.738 L 13.820 14.552 14.780 14.522 C 15.308 14.506,16.094 14.490,16.527 14.486 L 17.314 14.480 17.520 14.710 M8.413 14.558 C 8.938 14.625,9.692 15.087,10.063 15.568 C 10.500 16.134,10.665 16.636,10.740 17.630 L 10.768 18.000 7.804 18.000 L 4.840 18.000 4.840 17.850 C 4.840 17.564,4.959 16.687,5.023 16.494 C 5.128 16.180,5.350 15.788,5.578 15.512 C 5.934 15.080,6.590 14.645,7.009 14.563 C 7.239 14.517,8.075 14.514,8.413 14.558 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/inbox-in.svg b/packages/icons/svg/inbox-in.svg
index 36e8bbdd83..a614cf9a17 100644
--- a/packages/icons/svg/inbox-in.svg
+++ b/packages/icons/svg/inbox-in.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.450 2.622 C 11.338 2.679,11.183 2.794,11.106 2.878 C 10.877 3.132,10.882 3.076,10.778 6.757 C 10.745 7.933,10.709 8.905,10.697 8.917 C 10.685 8.929,10.617 8.904,10.547 8.863 C 10.033 8.556,9.996 8.543,9.592 8.527 C 9.244 8.512,9.189 8.520,9.052 8.602 C 8.639 8.849,8.481 9.130,8.480 9.622 C 8.480 10.037,8.521 10.102,9.306 10.940 C 10.528 12.242,11.369 12.992,11.728 13.099 C 11.984 13.175,12.016 13.175,12.273 13.098 C 12.561 13.013,13.016 12.624,14.121 11.520 C 15.076 10.567,15.399 10.181,15.504 9.867 C 15.624 9.509,15.493 9.095,15.161 8.785 C 14.920 8.560,14.726 8.503,14.321 8.539 C 13.969 8.571,13.707 8.679,13.410 8.915 L 13.200 9.082 13.200 6.162 L 13.200 3.243 12.958 2.984 C 12.623 2.626,12.400 2.520,11.980 2.520 C 11.712 2.520,11.620 2.538,11.450 2.622 M5.552 3.722 C 4.862 3.802,4.172 4.380,3.758 5.223 L 3.600 5.546 3.600 12.014 L 3.600 18.483 3.705 18.691 C 4.088 19.451,4.549 19.912,5.309 20.295 L 5.517 20.400 11.089 20.399 C 16.852 20.398,18.345 20.371,18.703 20.263 C 19.106 20.141,19.745 19.597,20.050 19.117 C 20.126 18.998,20.236 18.780,20.294 18.633 L 20.400 18.366 20.400 11.919 L 20.400 5.471 20.210 5.151 C 19.741 4.363,19.197 3.891,18.596 3.752 C 18.455 3.719,18.037 3.702,17.400 3.701 C 16.275 3.700,16.302 3.693,15.967 4.060 C 15.760 4.286,15.640 4.560,15.640 4.806 C 15.640 4.992,15.760 5.289,15.923 5.506 C 16.195 5.871,16.625 6.000,17.563 6.000 L 18.000 6.000 18.000 10.200 L 18.000 14.400 16.800 14.400 L 15.600 14.400 15.000 15.600 L 14.400 16.800 12.000 16.800 L 9.600 16.800 9.000 15.600 L 8.400 14.400 7.200 14.400 L 6.000 14.400 6.000 10.206 L 6.000 6.012 6.615 5.990 C 7.466 5.959,7.666 5.899,7.983 5.583 C 8.195 5.371,8.236 5.305,8.299 5.072 C 8.399 4.700,8.368 4.489,8.174 4.206 C 8.002 3.956,7.700 3.747,7.451 3.706 C 7.245 3.672,5.883 3.683,5.552 3.722 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.580 2.567 C 11.413 2.629,11.142 2.820,11.046 2.941 C 10.951 3.063,10.891 3.414,10.860 4.040 C 10.835 4.527,10.720 8.280,10.719 8.620 C 10.718 8.942,10.690 8.953,10.373 8.765 C 10.081 8.592,9.812 8.520,9.451 8.520 C 9.182 8.520,8.993 8.605,8.773 8.825 C 8.474 9.124,8.388 9.680,8.580 10.066 C 8.754 10.415,10.442 12.163,11.142 12.719 C 11.562 13.053,11.732 13.135,12.000 13.137 C 12.409 13.138,12.658 12.952,13.957 11.667 C 15.455 10.187,15.659 9.881,15.505 9.351 C 15.384 8.934,15.035 8.598,14.665 8.543 C 14.272 8.484,13.783 8.635,13.386 8.937 L 13.200 9.079 13.200 6.157 L 13.200 3.234 12.980 3.003 C 12.657 2.665,12.418 2.547,12.020 2.533 C 11.844 2.527,11.646 2.542,11.580 2.567 M5.695 3.717 C 5.397 3.741,5.276 3.772,5.031 3.888 C 4.522 4.130,3.989 4.705,3.701 5.324 L 3.601 5.540 3.600 12.011 L 3.600 18.483 3.705 18.691 C 4.076 19.424,4.584 19.932,5.316 20.299 L 5.531 20.407 11.756 20.388 C 15.921 20.375,18.097 20.354,18.334 20.324 C 18.752 20.272,18.982 20.168,19.369 19.855 C 19.741 19.555,20.024 19.203,20.217 18.800 L 20.380 18.460 20.390 11.963 L 20.401 5.466 20.230 5.183 C 19.755 4.396,19.236 3.932,18.662 3.782 C 18.338 3.698,16.505 3.692,16.309 3.774 C 16.151 3.841,15.875 4.135,15.761 4.359 C 15.564 4.744,15.644 5.178,15.981 5.553 C 16.280 5.886,16.674 5.999,17.530 6.000 L 18.000 6.000 18.000 10.200 L 18.000 14.400 16.800 14.400 L 15.600 14.400 15.000 15.600 L 14.400 16.800 12.000 16.800 L 9.600 16.800 9.000 15.600 L 8.400 14.400 7.200 14.400 L 6.000 14.400 6.000 10.200 L 6.000 6.000 6.391 6.000 C 6.900 6.000,7.419 5.934,7.620 5.842 C 8.012 5.665,8.294 5.274,8.344 4.838 C 8.378 4.541,8.262 4.269,7.995 4.019 C 7.682 3.727,7.605 3.706,6.780 3.696 C 6.384 3.692,5.896 3.701,5.695 3.717 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/inbox.svg b/packages/icons/svg/inbox.svg
index bc61897d74..67d71ff672 100644
--- a/packages/icons/svg/inbox.svg
+++ b/packages/icons/svg/inbox.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.994 3.881 C 4.543 4.133,3.994 4.737,3.718 5.284 L 3.600 5.518 3.600 12.000 L 3.600 18.482 3.725 18.731 C 4.069 19.418,4.588 19.930,5.309 20.295 L 5.517 20.400 11.089 20.399 C 16.852 20.398,18.345 20.371,18.703 20.263 C 19.106 20.141,19.745 19.597,20.050 19.117 C 20.126 18.998,20.236 18.780,20.294 18.633 L 20.400 18.366 20.400 11.987 L 20.400 5.608 20.275 5.314 C 20.206 5.152,20.088 4.925,20.011 4.810 C 19.850 4.566,19.297 4.038,19.052 3.894 L 18.884 3.795 12.052 3.775 L 5.220 3.755 4.994 3.881 M18.000 10.200 L 18.000 14.400 16.800 14.400 L 15.600 14.400 15.000 15.600 L 14.400 16.800 12.000 16.800 L 9.600 16.800 9.000 15.600 L 8.400 14.400 7.200 14.400 L 6.000 14.400 6.000 10.200 L 6.000 6.000 12.000 6.000 L 18.000 6.000 18.000 10.200 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.914 3.935 C 4.448 4.247,3.968 4.789,3.716 5.289 L 3.600 5.518 3.601 12.009 L 3.601 18.500 3.764 18.800 C 4.127 19.468,4.625 19.949,5.316 20.298 L 5.531 20.407 11.756 20.388 C 15.921 20.375,18.097 20.354,18.334 20.324 C 18.752 20.272,18.982 20.168,19.369 19.855 C 19.741 19.555,20.024 19.203,20.217 18.800 L 20.380 18.460 20.390 12.022 L 20.401 5.583 20.199 5.171 C 20.030 4.825,19.945 4.704,19.669 4.426 C 19.488 4.243,19.241 4.029,19.120 3.950 L 18.900 3.807 12.040 3.782 L 5.180 3.758 4.914 3.935 M18.000 10.200 L 18.000 14.400 16.800 14.400 L 15.600 14.400 15.000 15.600 L 14.400 16.800 12.000 16.800 L 9.600 16.800 9.000 15.600 L 8.400 14.400 7.200 14.400 L 6.000 14.400 6.000 10.200 L 6.000 6.000 12.000 6.000 L 18.000 6.000 18.000 10.200 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/info.svg b/packages/icons/svg/info.svg
index 54a1762b82..a0b5e3e620 100644
--- a/packages/icons/svg/info.svg
+++ b/packages/icons/svg/info.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.674 6.311 C 12.982 6.519,13.033 6.637,13.066 7.214 L 13.093 7.685 12.818 7.962 C 12.508 8.274,12.376 8.335,12.010 8.332 C 11.570 8.329,11.229 8.128,11.053 7.770 C 10.953 7.566,10.940 7.497,10.941 7.160 C 10.942 6.849,10.958 6.750,11.029 6.616 C 11.134 6.418,11.362 6.210,11.511 6.177 C 11.571 6.164,11.638 6.146,11.660 6.137 C 11.682 6.128,11.868 6.129,12.074 6.140 C 12.427 6.157,12.461 6.167,12.674 6.311 M12.640 11.038 C 12.845 11.198,12.994 11.432,13.038 11.660 C 13.059 11.770,13.096 12.346,13.120 12.940 C 13.238 15.832,13.197 15.537,13.497 15.687 C 13.829 15.854,14.068 16.068,14.182 16.301 C 14.282 16.505,14.289 16.551,14.267 16.837 C 14.234 17.264,14.155 17.439,13.879 17.695 C 13.563 17.987,13.419 18.020,12.582 17.986 C 12.229 17.972,11.851 17.942,11.742 17.920 C 11.474 17.865,11.263 17.711,11.039 17.406 L 10.852 17.152 10.825 15.446 C 10.796 13.535,10.779 13.335,10.638 13.242 C 9.933 12.780,9.762 12.581,9.731 12.195 C 9.690 11.668,9.871 11.184,10.167 11.031 C 10.376 10.923,10.861 10.885,11.740 10.909 C 12.494 10.928,12.501 10.929,12.640 11.038 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.581 6.260 C 12.956 6.475,13.019 6.609,13.064 7.273 L 13.092 7.685 12.896 7.888 C 12.788 7.999,12.620 8.142,12.522 8.205 C 12.366 8.306,12.308 8.320,12.042 8.319 C 11.562 8.318,11.255 8.141,11.056 7.751 C 10.973 7.588,10.960 7.507,10.960 7.149 C 10.960 6.762,10.967 6.724,11.075 6.554 C 11.296 6.206,11.512 6.114,12.040 6.146 C 12.336 6.163,12.456 6.189,12.581 6.260 M12.652 11.051 C 12.864 11.213,13.000 11.470,13.042 11.789 C 13.062 11.938,13.105 12.726,13.139 13.540 C 13.200 15.031,13.223 15.349,13.282 15.505 C 13.300 15.552,13.428 15.654,13.567 15.732 C 13.880 15.908,14.090 16.120,14.203 16.376 C 14.276 16.544,14.285 16.614,14.262 16.856 C 14.216 17.328,14.019 17.651,13.645 17.872 C 13.462 17.979,13.454 17.980,12.740 17.977 C 11.645 17.971,11.429 17.898,11.042 17.400 L 10.841 17.140 10.839 16.160 C 10.836 14.858,10.779 13.485,10.722 13.360 C 10.697 13.305,10.573 13.193,10.448 13.112 C 10.167 12.930,9.904 12.680,9.811 12.509 C 9.705 12.312,9.719 11.726,9.837 11.455 C 10.048 10.968,10.204 10.920,11.523 10.931 L 12.506 10.940 12.652 11.051 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/instagram.svg b/packages/icons/svg/instagram.svg
index 00352f65c3..4a914ae812 100644
--- a/packages/icons/svg/instagram.svg
+++ b/packages/icons/svg/instagram.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.940 3.028 C 8.334 3.044,7.515 3.115,7.148 3.183 C 5.290 3.528,3.954 4.657,3.382 6.366 C 3.057 7.338,3.001 8.158,3.001 12.000 C 3.001 14.940,3.038 16.024,3.161 16.744 C 3.544 18.987,5.009 20.455,7.246 20.838 C 7.964 20.960,9.123 21.000,12.000 21.000 C 15.800 21.000,16.634 20.944,17.619 20.621 C 19.310 20.067,20.426 18.770,20.798 16.924 C 20.963 16.108,20.980 15.663,20.980 12.020 C 20.980 9.488,20.966 8.393,20.928 8.000 C 20.773 6.370,20.295 5.260,19.385 4.413 C 18.795 3.864,18.103 3.495,17.260 3.280 C 16.690 3.135,16.276 3.087,15.189 3.040 C 14.410 3.006,10.042 2.998,8.940 3.028 M16.300 4.732 C 16.829 4.818,17.141 4.908,17.500 5.077 C 18.536 5.565,19.095 6.431,19.283 7.840 C 19.349 8.332,19.381 14.382,19.323 15.440 C 19.238 17.008,18.981 17.716,18.245 18.408 C 17.889 18.743,17.612 18.904,17.098 19.076 C 16.328 19.333,16.189 19.340,12.020 19.340 C 7.998 19.340,7.889 19.335,7.120 19.136 C 6.555 18.990,6.136 18.766,5.759 18.411 C 5.012 17.709,4.764 17.013,4.677 15.376 C 4.619 14.275,4.649 8.425,4.716 7.880 C 4.839 6.882,5.112 6.231,5.632 5.695 C 6.245 5.063,7.037 4.762,8.299 4.682 C 8.585 4.663,10.422 4.654,12.380 4.660 C 15.283 4.670,16.006 4.684,16.300 4.732 M16.423 6.198 C 15.842 6.432,15.571 7.122,15.849 7.660 C 16.044 8.037,16.380 8.252,16.780 8.255 C 17.097 8.257,17.295 8.184,17.510 7.987 C 17.740 7.775,17.846 7.560,17.870 7.258 C 17.903 6.850,17.690 6.465,17.320 6.264 C 17.041 6.112,16.699 6.087,16.423 6.198 M11.158 7.462 C 10.277 7.621,9.395 8.089,8.742 8.742 C 7.863 9.621,7.400 10.744,7.400 12.000 C 7.400 13.268,7.870 14.402,8.759 15.280 C 9.917 16.423,11.583 16.868,13.180 16.462 C 13.662 16.339,14.349 16.011,14.740 15.717 C 15.573 15.091,16.200 14.169,16.470 13.171 C 16.568 12.811,16.576 12.719,16.576 12.000 C 16.576 11.281,16.568 11.189,16.470 10.829 C 15.998 9.089,14.561 7.767,12.805 7.459 C 12.392 7.386,11.566 7.388,11.158 7.462 M12.780 9.101 C 13.772 9.371,14.576 10.157,14.887 11.160 C 14.966 11.416,14.979 11.543,14.978 12.020 C 14.976 12.511,14.963 12.618,14.873 12.887 C 14.546 13.866,13.816 14.584,12.840 14.887 C 12.408 15.021,11.595 15.021,11.160 14.886 C 10.345 14.635,9.658 14.050,9.302 13.304 C 9.119 12.921,9.041 12.614,9.013 12.159 C 8.922 10.697,9.924 9.388,11.380 9.064 C 11.725 8.987,12.431 9.005,12.780 9.101 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.940 3.039 C 7.630 3.085,6.977 3.177,6.320 3.409 C 4.856 3.926,3.857 4.945,3.366 6.425 C 3.047 7.386,3.020 7.822,3.020 12.020 C 3.020 15.727,3.037 16.172,3.206 16.955 C 3.649 19.009,4.943 20.325,6.960 20.774 C 7.803 20.962,8.227 20.979,12.000 20.980 C 15.665 20.980,16.105 20.964,16.924 20.798 C 19.278 20.323,20.673 18.682,20.919 16.100 C 20.983 15.425,21.013 11.021,20.965 9.300 C 20.920 7.681,20.877 7.287,20.665 6.560 C 20.270 5.203,19.431 4.207,18.189 3.620 C 17.529 3.307,16.855 3.151,15.860 3.080 C 15.121 3.028,10.111 2.998,8.940 3.039 M16.621 4.787 C 17.443 4.975,18.075 5.332,18.512 5.854 C 18.742 6.128,19.054 6.779,19.158 7.200 C 19.204 7.387,19.261 7.756,19.284 8.020 C 19.350 8.751,19.354 15.335,19.289 15.920 C 19.154 17.146,18.931 17.707,18.341 18.305 C 17.987 18.663,17.663 18.873,17.213 19.035 C 16.621 19.247,16.386 19.280,15.180 19.320 C 13.780 19.366,10.200 19.367,8.820 19.321 C 7.531 19.279,7.061 19.189,6.398 18.858 C 5.706 18.512,5.125 17.802,4.904 17.031 C 4.657 16.170,4.587 13.805,4.680 9.460 C 4.711 7.989,4.726 7.730,4.801 7.380 C 4.956 6.649,5.204 6.158,5.654 5.688 C 6.171 5.151,6.883 4.839,7.864 4.721 C 8.016 4.703,9.967 4.692,12.200 4.697 C 16.140 4.705,16.271 4.708,16.621 4.787 M16.513 6.175 C 16.003 6.315,15.654 6.887,15.764 7.401 C 15.822 7.674,16.019 7.953,16.257 8.099 C 16.423 8.201,16.503 8.222,16.766 8.234 C 17.024 8.246,17.109 8.233,17.258 8.161 C 17.782 7.907,18.021 7.232,17.765 6.730 C 17.672 6.547,17.403 6.294,17.226 6.221 C 17.025 6.138,16.718 6.118,16.513 6.175 M11.500 7.423 C 10.824 7.515,10.487 7.616,9.940 7.890 C 9.487 8.117,9.193 8.327,8.810 8.694 C 8.245 9.237,7.875 9.810,7.644 10.501 C 7.170 11.920,7.413 13.564,8.266 14.706 C 9.173 15.921,10.520 16.600,12.021 16.600 C 13.556 16.600,14.962 15.845,15.822 14.558 C 16.455 13.612,16.657 12.773,16.562 11.490 C 16.489 10.499,16.074 9.609,15.321 8.825 C 14.685 8.163,13.933 7.727,13.072 7.520 C 12.751 7.443,11.787 7.383,11.500 7.423 M12.754 9.101 C 13.512 9.280,14.272 9.892,14.653 10.631 C 14.923 11.156,14.960 11.322,14.960 12.000 C 14.960 12.679,14.923 12.844,14.651 13.372 C 14.201 14.246,13.346 14.847,12.384 14.966 C 11.090 15.125,9.883 14.470,9.320 13.303 C 9.083 12.812,9.025 12.551,9.027 11.980 C 9.028 11.439,9.097 11.148,9.347 10.640 C 9.505 10.318,9.589 10.204,9.897 9.899 C 10.291 9.507,10.625 9.301,11.140 9.134 C 11.373 9.059,11.510 9.043,11.960 9.042 C 12.304 9.042,12.592 9.063,12.754 9.101 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/ios.svg b/packages/icons/svg/ios.svg
index 0728847d51..e8202441cd 100644
--- a/packages/icons/svg/ios.svg
+++ b/packages/icons/svg/ios.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.432 3.118,9.865 3.233,9.160 3.466 C 5.847 4.561,3.468 7.496,3.059 10.992 C 2.666 14.352,4.239 17.669,7.120 19.560 C 7.929 20.090,9.126 20.589,10.092 20.797 C 14.142 21.669,18.255 19.669,20.083 15.940 C 21.302 13.454,21.301 10.515,20.080 8.048 C 19.172 6.214,17.763 4.810,15.940 3.921 C 15.062 3.493,14.267 3.244,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 M6.758 9.059 C 7.025 9.197,7.129 9.475,7.019 9.751 C 6.851 10.170,6.259 10.194,6.067 9.789 C 5.980 9.605,5.982 9.471,6.078 9.285 C 6.206 9.034,6.513 8.932,6.758 9.059 M11.115 9.105 C 11.525 9.196,11.957 9.444,12.259 9.764 C 12.732 10.266,12.984 10.919,13.027 11.760 C 13.116 13.484,12.349 14.665,10.961 14.943 C 10.317 15.072,9.527 14.955,9.015 14.655 C 8.389 14.288,7.944 13.575,7.796 12.704 C 7.726 12.287,7.771 11.295,7.877 10.927 C 8.196 9.825,8.973 9.151,10.051 9.042 C 10.401 9.007,10.773 9.029,11.115 9.105 M16.529 9.102 C 17.257 9.279,17.783 9.816,17.874 10.478 L 17.907 10.720 17.435 10.720 L 16.963 10.720 16.922 10.566 C 16.860 10.337,16.722 10.157,16.504 10.022 C 16.330 9.915,16.270 9.901,15.913 9.886 C 15.603 9.874,15.476 9.886,15.334 9.940 C 14.836 10.130,14.620 10.635,14.880 11.000 C 15.026 11.204,15.274 11.312,16.083 11.521 C 16.985 11.754,17.280 11.880,17.576 12.160 C 17.834 12.404,17.949 12.649,17.984 13.026 C 18.053 13.786,17.696 14.428,17.030 14.740 C 16.312 15.076,15.328 15.084,14.612 14.759 C 14.106 14.530,13.704 14.005,13.652 13.507 L 13.629 13.280 14.114 13.280 C 14.525 13.280,14.600 13.290,14.600 13.342 C 14.600 13.569,14.957 13.950,15.275 14.060 C 16.157 14.368,17.086 13.910,16.982 13.217 C 16.923 12.828,16.663 12.674,15.600 12.400 C 14.503 12.117,14.162 11.917,13.914 11.413 C 13.612 10.799,13.767 10.008,14.282 9.543 C 14.444 9.396,14.792 9.206,15.051 9.122 C 15.421 9.002,16.078 8.993,16.529 9.102 M9.876 9.977 C 9.327 10.187,8.970 10.659,8.823 11.370 C 8.645 12.236,8.844 13.152,9.319 13.655 C 9.907 14.277,10.930 14.265,11.502 13.629 C 11.855 13.237,12.014 12.736,12.014 12.020 C 12.013 11.050,11.712 10.400,11.113 10.078 C 10.877 9.952,10.831 9.942,10.440 9.932 C 10.156 9.925,9.973 9.939,9.876 9.977 M7.000 12.781 L 7.000 14.923 6.530 14.911 L 6.060 14.900 6.050 12.770 L 6.039 10.640 6.520 10.640 L 7.000 10.640 7.000 12.781 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.160 3.046 C 8.229 3.347,5.684 4.977,4.229 7.484 C 2.512 10.442,2.605 14.053,4.470 16.900 C 5.411 18.336,6.756 19.499,8.246 20.166 C 9.610 20.777,10.903 21.039,12.300 20.988 C 16.060 20.851,19.315 18.422,20.516 14.858 C 21.256 12.659,21.135 10.358,20.168 8.247 C 18.946 5.580,16.414 3.631,13.535 3.141 C 13.233 3.090,11.767 2.989,11.560 3.006 C 11.527 3.008,11.347 3.026,11.160 3.046 M6.735 9.055 C 6.943 9.142,7.040 9.296,7.040 9.540 C 7.040 10.114,6.326 10.288,6.078 9.775 C 5.939 9.489,6.050 9.182,6.337 9.057 C 6.495 8.988,6.572 8.987,6.735 9.055 M11.053 9.099 C 12.002 9.300,12.706 10.054,12.945 11.127 C 12.989 11.321,13.012 11.617,13.013 12.000 C 13.016 12.710,12.945 13.066,12.696 13.596 C 12.548 13.912,12.469 14.022,12.209 14.276 C 11.693 14.783,11.183 14.978,10.380 14.976 C 9.437 14.974,8.794 14.667,8.322 13.996 C 7.906 13.403,7.739 12.749,7.777 11.860 C 7.807 11.152,7.876 10.833,8.088 10.403 C 8.408 9.757,8.966 9.300,9.655 9.119 C 10.007 9.027,10.667 9.017,11.053 9.099 M16.423 9.083 C 17.168 9.219,17.769 9.802,17.873 10.490 L 17.908 10.720 17.437 10.720 L 16.966 10.720 16.901 10.523 C 16.836 10.327,16.609 10.073,16.396 9.957 C 16.334 9.923,16.138 9.904,15.840 9.902 C 15.406 9.900,15.369 9.906,15.189 10.012 C 14.658 10.324,14.634 10.936,15.143 11.209 C 15.254 11.268,15.677 11.408,16.083 11.520 C 17.237 11.837,17.605 12.050,17.837 12.534 C 18.142 13.173,17.978 13.955,17.435 14.458 C 16.799 15.047,15.494 15.169,14.560 14.729 C 14.110 14.517,13.720 13.981,13.657 13.490 L 13.630 13.280 14.090 13.280 L 14.551 13.280 14.657 13.498 C 14.775 13.738,14.969 13.914,15.267 14.050 C 15.547 14.178,16.134 14.176,16.425 14.046 C 16.805 13.876,17.030 13.541,16.981 13.216 C 16.928 12.857,16.651 12.689,15.678 12.422 C 14.481 12.094,14.203 11.938,13.953 11.452 C 13.629 10.822,13.740 10.097,14.237 9.599 C 14.443 9.394,14.921 9.139,15.208 9.083 C 15.460 9.033,16.149 9.033,16.423 9.083 M10.000 9.954 C 9.777 10.002,9.444 10.203,9.280 10.389 C 8.973 10.739,8.802 11.233,8.773 11.860 C 8.727 12.840,9.100 13.650,9.740 13.960 C 10.491 14.324,11.370 14.012,11.757 13.245 C 11.936 12.891,11.999 12.573,11.999 12.016 C 12.001 11.019,11.688 10.363,11.069 10.064 C 10.909 9.986,10.776 9.958,10.500 9.943 C 10.302 9.933,10.077 9.938,10.000 9.954 M7.000 12.780 L 7.000 14.920 6.546 14.920 L 6.093 14.920 6.066 14.110 C 6.052 13.665,6.040 12.702,6.040 11.970 L 6.040 10.640 6.520 10.640 L 7.000 10.640 7.000 12.780 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/java.svg b/packages/icons/svg/java.svg
index 969dd4491d..4cf11c4a10 100644
--- a/packages/icons/svg/java.svg
+++ b/packages/icons/svg/java.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.490 1.510 C 14.481 2.099,14.361 2.600,14.108 3.103 C 13.725 3.866,13.211 4.427,11.881 5.534 C 10.524 6.664,10.057 7.167,9.721 7.860 C 9.491 8.333,9.428 8.622,9.450 9.100 C 9.483 9.817,9.815 10.496,10.562 11.372 C 10.918 11.789,12.030 12.887,12.185 12.973 C 12.295 13.035,11.998 12.528,11.545 11.880 C 11.017 11.125,10.914 10.961,10.744 10.600 C 10.559 10.209,10.480 9.889,10.480 9.540 C 10.480 8.623,11.022 7.812,12.340 6.761 C 12.985 6.245,13.859 5.376,14.210 4.901 C 15.049 3.762,15.288 2.632,14.895 1.660 C 14.803 1.433,14.565 1.040,14.519 1.040 C 14.507 1.040,14.494 1.251,14.490 1.510 M16.496 5.739 C 15.017 6.237,13.885 6.868,13.160 7.598 C 12.570 8.192,12.360 8.617,12.329 9.280 C 12.297 9.992,12.574 10.667,13.199 11.400 C 13.598 11.867,13.752 12.257,13.701 12.667 C 13.667 12.934,13.454 13.368,13.230 13.622 L 13.060 13.815 13.300 13.662 C 14.222 13.075,14.749 12.398,14.791 11.747 C 14.819 11.314,14.740 11.095,14.345 10.513 C 13.565 9.363,13.448 8.807,13.824 8.044 C 13.936 7.818,14.056 7.662,14.335 7.384 C 14.863 6.857,15.473 6.445,16.780 5.736 C 16.956 5.641,17.082 5.562,17.060 5.562 C 17.038 5.563,16.784 5.642,16.496 5.739 M18.180 12.947 C 17.859 13.019,17.440 13.213,17.492 13.265 C 17.501 13.274,17.632 13.252,17.784 13.217 C 18.486 13.052,19.148 13.340,19.443 13.939 C 19.558 14.173,19.567 14.223,19.554 14.510 C 19.542 14.775,19.517 14.871,19.392 15.122 C 19.138 15.635,18.705 16.074,17.973 16.561 C 17.748 16.710,17.438 16.900,17.283 16.984 C 17.127 17.068,17.000 17.151,17.000 17.169 C 17.000 17.213,17.133 17.178,17.731 16.974 C 19.377 16.413,20.403 15.511,20.470 14.565 C 20.520 13.865,20.046 13.233,19.295 13.001 C 19.044 12.924,18.420 12.894,18.180 12.947 M8.675 13.181 C 7.860 13.309,6.955 13.582,6.290 13.903 C 5.741 14.168,5.668 14.352,6.037 14.538 C 6.672 14.860,8.092 15.019,10.320 15.018 C 12.183 15.017,13.323 14.935,14.760 14.696 C 15.686 14.543,15.957 14.468,16.280 14.280 C 16.438 14.188,16.660 14.069,16.774 14.016 C 16.887 13.962,16.944 13.928,16.900 13.938 C 16.714 13.984,14.810 14.241,14.240 14.297 C 12.641 14.455,10.614 14.529,9.320 14.478 C 7.872 14.420,7.301 14.270,7.432 13.982 C 7.510 13.809,8.247 13.503,9.300 13.206 L 9.580 13.126 9.300 13.127 C 9.146 13.127,8.865 13.152,8.675 13.181 M8.355 15.774 C 7.792 16.020,7.600 16.184,7.600 16.420 C 7.600 17.037,9.616 17.457,12.100 17.355 C 13.480 17.299,15.225 17.028,16.074 16.738 C 16.104 16.727,16.005 16.657,15.853 16.581 C 15.701 16.505,15.506 16.382,15.420 16.308 L 15.264 16.172 14.982 16.227 C 14.517 16.316,13.374 16.473,12.840 16.522 C 11.751 16.620,9.404 16.536,8.859 16.381 C 8.611 16.309,8.480 16.193,8.480 16.044 C 8.480 15.941,8.595 15.744,8.699 15.671 C 8.794 15.603,8.643 15.648,8.355 15.774 M8.912 18.156 C 8.382 18.383,8.207 18.557,8.260 18.802 C 8.319 19.068,8.846 19.379,9.541 19.556 C 11.343 20.018,13.657 19.868,15.488 19.171 L 15.757 19.069 15.388 18.903 C 15.186 18.812,14.915 18.680,14.786 18.610 L 14.553 18.484 13.986 18.579 C 12.982 18.747,12.642 18.777,11.720 18.776 C 10.783 18.775,9.780 18.690,9.423 18.583 C 9.087 18.482,8.994 18.317,9.167 18.133 C 9.279 18.013,9.239 18.017,8.912 18.156 M6.581 19.644 C 5.435 19.800,4.121 20.404,4.015 20.824 C 3.962 21.036,4.242 21.251,4.738 21.378 C 5.033 21.454,6.453 21.655,7.280 21.737 C 8.340 21.843,8.900 21.879,10.110 21.920 C 13.178 22.023,16.306 21.704,18.150 21.099 C 18.988 20.823,19.432 20.551,19.502 20.270 C 19.525 20.176,19.504 20.134,19.363 19.994 C 19.195 19.826,19.118 19.807,19.197 19.954 C 19.275 20.100,19.244 20.208,19.082 20.362 C 18.751 20.677,17.757 20.925,16.052 21.118 C 13.611 21.394,10.149 21.437,8.000 21.218 C 6.593 21.074,5.494 20.794,5.420 20.560 C 5.337 20.298,6.237 19.887,7.185 19.755 C 7.442 19.719,7.509 19.698,7.445 19.674 C 7.296 19.619,6.872 19.604,6.581 19.644 M20.280 21.148 C 19.027 22.120,14.533 22.794,10.343 22.640 C 9.067 22.593,7.904 22.498,7.140 22.379 C 6.914 22.344,7.322 22.505,7.685 22.595 C 9.550 23.057,13.540 23.130,16.438 22.756 C 18.677 22.468,20.093 21.915,20.409 21.207 C 20.452 21.111,20.481 21.028,20.473 21.021 C 20.466 21.014,20.379 21.072,20.280 21.148 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.504 1.170 C 14.493 1.242,14.475 1.489,14.464 1.720 C 14.418 2.653,14.028 3.469,13.225 4.310 C 13.024 4.520,12.428 5.062,11.900 5.514 C 10.758 6.491,10.285 6.960,9.988 7.408 C 9.573 8.035,9.410 8.559,9.452 9.133 C 9.512 9.940,9.895 10.640,10.846 11.680 C 11.321 12.200,12.150 12.983,12.186 12.947 C 12.221 12.913,12.054 12.641,11.422 11.700 C 10.789 10.758,10.583 10.338,10.511 9.843 C 10.428 9.274,10.584 8.687,10.967 8.130 C 11.165 7.841,11.727 7.274,12.240 6.846 C 13.215 6.033,14.007 5.213,14.404 4.606 C 15.180 3.421,15.284 2.242,14.699 1.278 C 14.619 1.147,14.547 1.040,14.539 1.040 C 14.531 1.040,14.515 1.099,14.504 1.170 M16.460 5.757 C 14.813 6.330,13.733 6.966,12.961 7.819 C 12.492 8.337,12.341 8.718,12.344 9.380 C 12.348 10.095,12.536 10.554,13.145 11.329 C 13.614 11.926,13.759 12.302,13.680 12.719 C 13.635 12.956,13.459 13.316,13.263 13.573 C 13.185 13.676,13.131 13.760,13.144 13.760 C 13.156 13.760,13.298 13.669,13.458 13.559 C 14.588 12.777,15.035 11.863,14.671 11.074 C 14.617 10.956,14.450 10.673,14.302 10.444 C 14.153 10.215,13.948 9.857,13.847 9.648 C 13.678 9.298,13.662 9.239,13.648 8.904 C 13.626 8.389,13.762 8.032,14.153 7.580 C 14.569 7.100,15.383 6.512,16.450 5.920 C 16.774 5.740,17.040 5.585,17.040 5.576 C 17.040 5.554,17.082 5.541,16.460 5.757 M18.115 12.962 C 17.913 13.010,17.537 13.181,17.499 13.241 C 17.476 13.280,17.496 13.285,17.584 13.262 C 18.421 13.048,19.112 13.302,19.440 13.945 C 19.525 14.110,19.540 14.193,19.537 14.481 C 19.534 14.801,19.524 14.840,19.362 15.152 C 19.023 15.803,18.456 16.297,17.180 17.052 C 17.076 17.113,17.000 17.174,17.012 17.186 C 17.048 17.221,18.110 16.848,18.510 16.659 C 19.602 16.145,20.291 15.458,20.441 14.733 C 20.611 13.915,19.967 13.093,19.053 12.961 C 18.728 12.914,18.316 12.915,18.115 12.962 M9.000 13.146 C 8.945 13.154,8.765 13.179,8.600 13.203 C 7.675 13.333,6.244 13.839,5.910 14.152 C 5.777 14.277,5.773 14.321,5.890 14.430 C 6.227 14.746,7.309 14.932,9.212 15.000 C 11.488 15.082,13.694 14.932,15.400 14.579 C 15.780 14.501,15.945 14.441,16.349 14.235 C 16.619 14.098,16.834 13.980,16.827 13.974 C 16.821 13.968,16.367 14.024,15.818 14.100 C 13.816 14.375,12.955 14.439,10.879 14.468 C 9.165 14.491,8.410 14.458,7.880 14.336 C 7.738 14.304,7.580 14.250,7.530 14.217 C 7.422 14.146,7.413 13.997,7.512 13.907 C 7.643 13.788,8.254 13.529,8.800 13.361 C 9.514 13.140,9.547 13.125,9.300 13.128 C 9.190 13.130,9.055 13.138,9.000 13.146 M8.354 15.776 C 7.641 16.089,7.453 16.349,7.719 16.653 C 7.866 16.821,8.205 16.975,8.698 17.101 C 9.361 17.269,9.880 17.324,11.005 17.348 C 12.131 17.372,12.797 17.336,13.860 17.196 C 14.827 17.069,16.104 16.791,16.058 16.717 C 16.048 16.700,15.927 16.623,15.790 16.546 C 15.652 16.468,15.479 16.354,15.405 16.291 L 15.270 16.177 14.765 16.265 C 14.487 16.313,13.963 16.392,13.600 16.441 C 12.170 16.634,9.302 16.572,8.737 16.336 C 8.462 16.221,8.419 16.006,8.624 15.763 C 8.681 15.695,8.712 15.640,8.694 15.641 C 8.675 15.642,8.522 15.703,8.354 15.776 M8.881 18.173 C 8.699 18.250,8.513 18.365,8.406 18.468 C 8.248 18.619,8.232 18.650,8.255 18.767 C 8.294 18.962,8.460 19.108,8.860 19.299 C 10.106 19.895,12.378 19.988,14.340 19.522 C 14.688 19.439,15.348 19.235,15.587 19.135 L 15.736 19.072 15.126 18.778 C 14.791 18.616,14.495 18.491,14.468 18.500 C 14.442 18.510,14.114 18.564,13.740 18.622 C 12.886 18.755,11.997 18.799,11.020 18.757 C 9.480 18.691,8.916 18.516,9.140 18.175 C 9.176 18.119,9.200 18.067,9.193 18.060 C 9.186 18.053,9.045 18.104,8.881 18.173 M6.100 19.739 C 5.335 19.918,4.569 20.252,4.236 20.552 C 4.007 20.757,3.975 20.837,4.059 20.998 C 4.187 21.246,4.594 21.381,5.680 21.537 C 9.837 22.135,14.262 22.060,17.260 21.341 C 18.504 21.042,19.288 20.692,19.461 20.359 C 19.539 20.208,19.512 20.114,19.355 19.982 C 19.201 19.853,19.149 19.852,19.208 19.981 C 19.280 20.141,19.167 20.331,18.911 20.479 C 17.949 21.035,14.394 21.408,10.640 21.347 C 8.745 21.316,7.722 21.232,6.658 21.019 C 5.481 20.784,5.191 20.566,5.650 20.261 C 5.937 20.071,6.425 19.899,6.977 19.795 C 7.230 19.748,7.428 19.693,7.417 19.674 C 7.371 19.601,6.511 19.643,6.100 19.739 M20.260 21.164 C 19.008 22.118,14.408 22.805,10.360 22.642 C 9.261 22.597,8.155 22.517,7.527 22.435 C 7.345 22.411,7.185 22.401,7.174 22.413 C 7.142 22.445,7.636 22.590,8.075 22.678 C 10.044 23.073,14.010 23.101,16.580 22.738 C 18.412 22.479,19.593 22.083,20.140 21.543 C 20.353 21.334,20.534 21.038,20.448 21.041 C 20.433 21.042,20.348 21.097,20.260 21.164 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/js.svg b/packages/icons/svg/js.svg
index a2b9505aee..3851e74533 100644
--- a/packages/icons/svg/js.svg
+++ b/packages/icons/svg/js.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.000 12.000 L 3.000 21.000 12.000 21.000 L 21.000 21.000 21.000 12.000 L 21.000 3.000 12.000 3.000 L 3.000 3.000 3.000 12.000 M17.920 11.099 C 18.491 11.252,19.058 11.659,19.367 12.136 C 19.451 12.266,19.520 12.385,19.520 12.401 C 19.520 12.417,19.242 12.639,18.902 12.894 L 18.284 13.358 18.132 13.131 C 17.842 12.698,17.437 12.503,17.020 12.596 C 16.461 12.722,16.231 13.351,16.562 13.850 C 16.729 14.103,17.071 14.326,17.740 14.618 C 18.551 14.972,18.887 15.173,19.218 15.500 C 19.694 15.970,19.934 16.553,19.984 17.358 C 20.015 17.848,19.937 18.230,19.720 18.662 C 19.424 19.250,18.972 19.644,18.338 19.867 C 18.038 19.973,17.984 19.979,17.380 19.975 C 16.712 19.971,16.460 19.928,15.917 19.723 C 15.355 19.512,14.801 19.044,14.495 18.521 C 14.399 18.356,14.320 18.209,14.320 18.193 C 14.320 18.177,14.611 17.958,14.967 17.705 L 15.613 17.246 15.694 17.413 C 15.825 17.682,16.272 18.102,16.580 18.246 C 17.194 18.533,17.957 18.386,18.264 17.921 C 18.356 17.781,18.367 17.731,18.353 17.511 C 18.314 16.942,18.021 16.646,17.153 16.299 C 16.045 15.856,15.458 15.386,15.101 14.654 C 14.908 14.257,14.841 13.941,14.841 13.412 C 14.840 12.866,14.886 12.628,15.066 12.249 C 15.358 11.633,16.000 11.183,16.791 11.039 C 17.042 10.993,17.646 11.025,17.920 11.099 M13.040 14.502 C 13.040 18.212,13.044 18.150,12.751 18.760 C 12.630 19.014,12.521 19.167,12.324 19.363 C 11.849 19.837,11.295 20.026,10.500 19.986 C 9.963 19.959,9.644 19.882,9.205 19.673 C 8.759 19.460,8.301 19.019,8.117 18.625 C 8.047 18.477,7.997 18.351,8.005 18.345 C 8.047 18.313,9.267 17.490,9.306 17.467 C 9.335 17.450,9.386 17.508,9.440 17.619 C 9.640 18.034,10.106 18.399,10.435 18.400 C 10.788 18.401,11.099 18.185,11.286 17.809 L 11.380 17.620 11.391 14.410 L 11.402 11.200 12.221 11.200 L 13.040 11.200 13.040 14.502 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.000 12.000 L 3.000 21.000 12.000 21.000 L 21.000 21.000 21.000 12.000 L 21.000 3.000 12.000 3.000 L 3.000 3.000 3.000 12.000 M17.897 11.101 C 18.461 11.248,19.034 11.652,19.347 12.122 C 19.509 12.365,19.525 12.408,19.472 12.451 C 19.439 12.478,19.158 12.693,18.848 12.929 L 18.284 13.359 18.121 13.126 C 17.855 12.746,17.592 12.590,17.220 12.590 C 16.950 12.590,16.799 12.651,16.632 12.826 C 16.326 13.148,16.332 13.580,16.646 13.938 C 16.852 14.171,17.089 14.317,17.789 14.639 C 18.569 14.998,18.849 15.165,19.151 15.454 C 19.478 15.767,19.670 16.062,19.805 16.458 C 19.933 16.834,20.014 17.443,19.979 17.758 C 19.890 18.553,19.432 19.288,18.800 19.651 C 18.297 19.940,17.894 20.012,17.056 19.961 C 16.614 19.934,16.467 19.907,16.128 19.790 C 15.600 19.610,15.331 19.446,14.958 19.080 C 14.644 18.771,14.278 18.224,14.344 18.162 C 14.432 18.079,15.562 17.280,15.590 17.282 C 15.606 17.283,15.683 17.384,15.760 17.507 C 15.939 17.793,16.390 18.175,16.672 18.281 C 17.265 18.503,17.933 18.362,18.243 17.949 C 18.325 17.840,18.340 17.776,18.338 17.540 C 18.335 16.933,18.067 16.686,16.835 16.160 C 15.327 15.516,14.642 14.352,14.882 12.840 C 15.006 12.053,15.621 11.390,16.480 11.115 C 16.769 11.022,17.564 11.014,17.897 11.101 M13.028 14.590 C 13.016 16.911,12.995 18.043,12.964 18.180 C 12.906 18.437,12.678 18.918,12.497 19.164 C 12.335 19.385,11.943 19.695,11.680 19.809 C 11.024 20.094,9.952 20.036,9.229 19.677 C 8.720 19.425,8.315 19.030,8.102 18.580 C 8.042 18.455,8.000 18.348,8.007 18.343 C 8.293 18.138,9.288 17.480,9.313 17.480 C 9.333 17.480,9.425 17.597,9.517 17.740 C 9.757 18.111,10.159 18.400,10.435 18.400 C 10.772 18.399,11.104 18.163,11.293 17.791 L 11.400 17.579 11.400 14.389 L 11.400 11.200 12.223 11.200 L 13.047 11.200 13.028 14.590 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/key.svg b/packages/icons/svg/key.svg
index c886b4e07f..0004625905 100644
--- a/packages/icons/svg/key.svg
+++ b/packages/icons/svg/key.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.700 2.466 C 12.800 2.607,11.932 2.873,11.247 3.217 C 9.429 4.130,8.223 5.526,7.575 7.464 C 7.309 8.260,7.283 8.455,7.281 9.667 C 7.280 10.556,7.292 10.775,7.360 11.120 C 7.404 11.343,7.440 11.578,7.440 11.642 C 7.440 11.742,7.090 12.110,4.920 14.294 L 2.400 16.830 2.400 19.215 L 2.400 21.600 4.800 21.600 L 7.200 21.600 7.200 20.400 L 7.200 19.200 8.410 19.200 L 9.620 19.200 10.960 17.864 L 12.300 16.527 12.860 16.621 C 13.685 16.760,14.323 16.814,14.759 16.782 C 15.999 16.692,17.547 16.145,18.499 15.461 C 19.103 15.026,19.990 14.119,20.382 13.537 C 20.973 12.655,21.433 11.299,21.563 10.053 C 21.641 9.296,21.507 8.318,21.197 7.380 C 20.236 4.481,17.560 2.533,14.440 2.461 C 14.099 2.453,13.766 2.455,13.700 2.466 M15.200 4.945 C 16.675 5.199,17.960 6.177,18.661 7.580 C 18.977 8.213,19.080 8.702,19.080 9.571 C 19.080 10.063,19.055 10.134,18.793 10.388 C 18.306 10.861,17.544 10.854,17.178 10.374 C 17.095 10.266,16.972 9.966,16.802 9.457 C 16.513 8.592,16.348 8.245,16.108 8.001 C 15.771 7.656,15.496 7.521,14.443 7.179 C 13.780 6.964,13.626 6.875,13.460 6.611 C 13.350 6.437,13.339 6.385,13.326 6.008 C 13.313 5.618,13.318 5.587,13.416 5.446 C 13.596 5.186,13.825 4.993,14.047 4.914 C 14.284 4.830,14.575 4.838,15.200 4.945 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.180 2.560 C 12.581 2.690,11.695 2.998,11.212 3.242 C 9.490 4.116,8.313 5.443,7.649 7.260 C 7.313 8.182,7.300 8.268,7.300 9.640 C 7.300 10.665,7.312 10.922,7.375 11.250 C 7.446 11.624,7.446 11.644,7.378 11.748 C 7.276 11.905,5.596 13.631,3.883 15.340 L 2.400 16.820 2.400 19.210 L 2.400 21.600 4.800 21.600 L 7.200 21.600 7.200 20.400 L 7.200 19.200 8.410 19.200 L 9.620 19.200 10.960 17.864 L 12.300 16.527 12.860 16.620 C 13.664 16.754,14.364 16.814,14.759 16.783 C 15.250 16.744,16.012 16.583,16.573 16.398 C 17.167 16.203,18.161 15.716,18.540 15.434 C 18.874 15.187,19.949 14.119,20.207 13.780 C 20.787 13.016,21.280 11.777,21.504 10.520 C 21.778 8.983,21.277 6.971,20.259 5.520 C 19.207 4.022,17.578 2.977,15.700 2.597 C 15.058 2.467,13.698 2.447,13.180 2.560 M15.145 4.942 C 15.655 5.030,15.971 5.132,16.422 5.355 C 17.393 5.833,18.108 6.539,18.616 7.520 C 18.954 8.174,19.079 8.719,19.079 9.540 C 19.080 9.958,19.027 10.132,18.840 10.336 C 18.456 10.751,17.856 10.848,17.400 10.568 C 17.178 10.431,17.052 10.191,16.760 9.343 C 16.475 8.517,16.346 8.266,16.059 7.975 C 15.757 7.669,15.520 7.548,14.614 7.239 C 14.221 7.105,13.834 6.952,13.753 6.899 C 13.440 6.694,13.323 6.423,13.321 5.898 C 13.320 5.655,13.336 5.591,13.434 5.438 C 13.574 5.221,13.685 5.118,13.920 4.983 C 14.075 4.895,14.149 4.881,14.445 4.880 C 14.634 4.880,14.949 4.908,15.145 4.942 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/kotlin.svg b/packages/icons/svg/kotlin.svg
index 790f4cd833..4101b2db65 100644
--- a/packages/icons/svg/kotlin.svg
+++ b/packages/icons/svg/kotlin.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.000 12.000 L 3.000 21.000 11.980 21.000 C 16.919 21.000,20.960 20.986,20.960 20.970 C 20.960 20.953,20.176 20.157,19.217 19.200 C 18.259 18.243,16.249 16.221,14.750 14.707 L 12.025 11.955 16.503 7.477 L 20.980 3.000 11.990 3.000 L 3.000 3.000 3.000 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.000 12.000 L 3.000 21.000 11.890 20.997 C 16.780 20.996,20.816 20.979,20.860 20.961 C 20.929 20.933,20.546 20.533,18.000 17.974 C 16.383 16.349,14.376 14.331,13.540 13.490 L 12.020 11.960 16.500 7.480 L 20.980 3.000 11.990 3.000 L 3.000 3.000 3.000 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/light-bulb.svg b/packages/icons/svg/light-bulb.svg
index 69f6eb3b24..04ddd8f2fb 100644
--- a/packages/icons/svg/light-bulb.svg
+++ b/packages/icons/svg/light-bulb.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.720 2.517 C 11.448 2.572,11.228 2.729,10.980 3.044 L 10.800 3.273 10.801 3.727 C 10.803 4.449,10.864 5.133,10.940 5.280 C 11.046 5.485,11.346 5.758,11.587 5.868 C 11.999 6.057,12.458 5.946,12.837 5.566 C 13.054 5.348,13.106 5.201,13.160 4.653 C 13.270 3.522,13.154 3.032,12.705 2.731 C 12.432 2.547,12.016 2.457,11.720 2.517 M5.625 5.018 C 5.386 5.135,5.141 5.366,5.030 5.580 C 4.909 5.812,4.910 6.274,5.031 6.522 C 5.133 6.733,5.851 7.507,6.166 7.747 C 6.435 7.952,6.612 8.009,6.979 8.009 C 7.337 8.009,7.501 7.937,7.733 7.679 C 8.100 7.271,8.136 6.730,7.827 6.281 C 7.653 6.028,6.877 5.265,6.670 5.144 C 6.505 5.047,6.066 4.920,5.900 4.922 C 5.856 4.922,5.732 4.965,5.625 5.018 M17.306 5.119 C 17.056 5.279,16.411 5.934,16.170 6.272 C 15.998 6.513,15.980 6.559,15.967 6.805 C 15.939 7.294,16.142 7.669,16.557 7.894 C 16.953 8.110,17.408 8.057,17.833 7.745 C 18.093 7.554,18.894 6.727,18.981 6.559 C 19.068 6.393,19.082 5.896,19.007 5.676 C 18.939 5.478,18.797 5.296,18.594 5.147 C 18.428 5.024,18.407 5.020,17.961 5.007 C 17.504 4.994,17.498 4.995,17.306 5.119 M10.940 7.379 C 10.424 7.493,9.908 7.727,9.323 8.113 C 8.865 8.414,8.223 9.057,7.999 9.440 C 7.776 9.821,7.471 10.509,7.387 10.820 C 7.180 11.592,7.216 12.577,7.487 13.500 C 7.643 14.032,7.887 14.425,8.639 15.360 C 9.222 16.085,9.500 16.477,9.562 16.665 L 9.606 16.800 11.999 16.800 L 14.391 16.800 14.416 16.702 C 14.454 16.552,14.811 16.040,15.341 15.380 C 16.136 14.389,16.279 14.154,16.511 13.460 C 16.693 12.916,16.734 12.574,16.709 11.829 C 16.677 10.884,16.494 10.237,16.056 9.529 C 15.824 9.153,15.017 8.331,14.640 8.087 C 14.260 7.840,13.616 7.530,13.340 7.462 C 12.766 7.319,11.424 7.273,10.940 7.379 M3.373 10.956 C 3.156 10.978,3.048 11.012,2.926 11.096 C 2.636 11.297,2.459 11.651,2.464 12.020 C 2.469 12.512,2.790 12.932,3.273 13.081 C 3.771 13.236,4.641 13.226,5.192 13.060 C 5.569 12.946,5.832 12.625,5.917 12.178 C 5.968 11.907,5.907 11.655,5.722 11.368 C 5.473 10.983,5.437 10.971,4.480 10.947 C 4.029 10.936,3.531 10.940,3.373 10.956 M18.973 10.956 C 18.756 10.978,18.648 11.012,18.526 11.096 C 18.236 11.297,18.059 11.651,18.064 12.020 C 18.069 12.512,18.390 12.932,18.873 13.081 C 19.371 13.236,20.241 13.226,20.792 13.060 C 21.169 12.946,21.432 12.625,21.517 12.178 C 21.568 11.907,21.507 11.655,21.322 11.368 C 21.073 10.983,21.037 10.971,20.080 10.947 C 19.629 10.936,19.131 10.940,18.973 10.956 M9.614 18.670 C 9.663 19.937,9.725 20.119,10.313 20.728 C 10.780 21.211,10.926 21.312,11.338 21.438 C 12.209 21.703,12.929 21.509,13.625 20.821 C 14.222 20.232,14.341 19.895,14.387 18.672 L 14.413 18.000 12.000 18.000 L 9.587 18.000 9.614 18.670 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.526 2.579 C 11.348 2.660,11.186 2.800,10.975 3.056 L 10.800 3.268 10.801 3.804 C 10.801 4.386,10.856 5.025,10.923 5.228 C 10.946 5.298,11.079 5.462,11.218 5.592 C 11.700 6.043,12.179 6.078,12.676 5.699 C 13.050 5.414,13.143 5.149,13.185 4.260 C 13.230 3.304,13.079 2.925,12.545 2.651 C 12.288 2.519,11.744 2.481,11.526 2.579 M5.654 5.017 C 5.381 5.144,5.145 5.363,5.034 5.593 C 4.912 5.843,4.910 6.267,5.030 6.501 C 5.206 6.846,5.989 7.653,6.357 7.871 C 6.606 8.018,7.141 8.048,7.410 7.929 C 7.778 7.766,8.080 7.213,8.024 6.804 C 7.978 6.464,7.834 6.250,7.292 5.715 C 6.760 5.190,6.599 5.080,6.213 4.980 C 5.915 4.902,5.897 4.903,5.654 5.017 M17.400 5.061 C 17.323 5.095,17.016 5.370,16.718 5.672 C 16.050 6.347,15.939 6.537,15.969 6.955 C 16.005 7.458,16.316 7.847,16.792 7.985 C 17.056 8.062,17.318 8.022,17.648 7.857 C 17.903 7.729,18.895 6.750,18.983 6.540 C 19.057 6.361,19.058 5.800,18.984 5.623 C 18.912 5.451,18.661 5.173,18.505 5.092 C 18.324 4.999,17.584 4.978,17.400 5.061 M11.072 7.363 C 9.982 7.523,8.557 8.510,7.958 9.520 C 7.764 9.847,7.464 10.545,7.381 10.860 C 7.203 11.539,7.218 12.398,7.421 13.238 C 7.595 13.953,7.772 14.259,8.685 15.420 C 9.270 16.165,9.502 16.496,9.566 16.680 L 9.608 16.800 12.004 16.800 C 14.023 16.800,14.400 16.791,14.400 16.744 C 14.400 16.651,14.842 16.013,15.358 15.360 C 16.144 14.367,16.297 14.113,16.515 13.431 C 16.694 12.869,16.734 12.550,16.707 11.880 C 16.662 10.719,16.395 9.914,15.829 9.229 C 15.538 8.876,14.983 8.341,14.695 8.135 C 14.371 7.904,13.516 7.497,13.240 7.443 C 12.678 7.334,11.556 7.292,11.072 7.363 M3.080 11.022 C 2.616 11.229,2.355 11.859,2.526 12.364 C 2.632 12.678,2.956 12.988,3.275 13.081 C 3.992 13.291,5.156 13.186,5.528 12.879 C 5.731 12.712,5.886 12.396,5.910 12.101 C 5.933 11.808,5.882 11.625,5.696 11.332 C 5.476 10.987,5.459 10.982,4.260 10.970 C 3.388 10.961,3.197 10.970,3.080 11.022 M18.680 11.022 C 18.216 11.229,17.955 11.859,18.126 12.364 C 18.232 12.678,18.556 12.988,18.875 13.081 C 19.592 13.291,20.756 13.186,21.128 12.879 C 21.331 12.712,21.486 12.396,21.510 12.101 C 21.533 11.808,21.482 11.625,21.296 11.332 C 21.076 10.987,21.059 10.982,19.860 10.970 C 18.988 10.961,18.797 10.970,18.680 11.022 M9.614 18.670 C 9.662 19.918,9.742 20.138,10.375 20.783 C 10.830 21.246,11.082 21.394,11.604 21.505 C 12.350 21.663,12.992 21.434,13.662 20.772 C 14.212 20.227,14.342 19.846,14.388 18.650 L 14.413 18.000 12.000 18.000 L 9.587 18.000 9.614 18.670 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/lightning-bolt.svg b/packages/icons/svg/lightning-bolt.svg
index cb80da9c89..84608149e6 100644
--- a/packages/icons/svg/lightning-bolt.svg
+++ b/packages/icons/svg/lightning-bolt.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.745 1.370 C 12.342 1.588,12.011 2.022,9.231 5.965 C 6.193 10.274,4.008 13.476,3.766 13.972 C 3.616 14.279,3.596 14.498,3.697 14.740 C 3.792 14.965,4.032 15.264,4.264 15.443 L 4.467 15.600 7.034 15.600 L 9.600 15.600 9.600 18.772 L 9.600 21.944 9.817 22.208 C 10.110 22.563,10.414 22.720,10.808 22.720 C 11.314 22.720,11.472 22.596,12.200 21.620 C 13.222 20.250,17.413 14.272,19.977 10.526 L 20.370 9.953 20.352 9.626 C 20.333 9.272,20.277 9.127,20.055 8.854 C 19.826 8.571,19.658 8.516,18.888 8.478 C 18.521 8.459,17.860 8.443,17.420 8.442 C 16.980 8.441,16.122 8.428,15.514 8.414 L 14.408 8.387 14.389 5.284 C 14.377 3.289,14.355 2.123,14.327 2.020 C 14.253 1.738,13.825 1.428,13.332 1.300 C 13.029 1.221,13.017 1.222,12.745 1.370 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.848 1.320 C 12.464 1.494,12.096 1.935,10.693 3.900 C 7.587 8.251,4.022 13.437,3.763 13.980 C 3.529 14.469,3.632 14.832,4.141 15.316 L 4.440 15.600 7.020 15.600 L 9.600 15.600 9.600 18.770 L 9.600 21.941 9.770 22.147 C 10.124 22.577,10.451 22.741,10.899 22.713 C 11.378 22.682,11.573 22.491,12.646 21.007 C 14.105 18.989,17.844 13.644,19.978 10.527 L 20.370 9.954 20.352 9.644 C 20.321 9.108,20.020 8.665,19.618 8.563 C 19.353 8.497,18.233 8.443,17.080 8.441 C 16.563 8.440,15.748 8.428,15.270 8.414 L 14.400 8.387 14.396 6.164 C 14.391 3.145,14.358 2.059,14.269 1.892 C 14.166 1.701,13.791 1.453,13.431 1.339 C 13.055 1.221,13.065 1.221,12.848 1.320 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/link.svg b/packages/icons/svg/link.svg
index 75168e8602..ca56b7cb57 100644
--- a/packages/icons/svg/link.svg
+++ b/packages/icons/svg/link.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.940 2.539 C 15.417 2.637,14.652 2.962,14.131 3.308 C 13.861 3.487,12.313 4.962,11.730 5.595 L 11.320 6.040 11.320 6.381 C 11.320 6.797,11.378 6.953,11.632 7.213 C 11.870 7.458,12.074 7.563,12.361 7.589 C 12.812 7.630,13.009 7.505,14.200 6.417 C 15.226 5.479,15.547 5.222,15.900 5.054 C 16.245 4.891,16.609 4.849,17.082 4.918 C 17.514 4.981,17.777 5.082,18.140 5.325 C 18.487 5.557,18.717 5.828,18.912 6.234 C 19.044 6.510,19.054 6.557,19.072 7.029 C 19.108 7.974,19.025 8.176,18.253 9.020 C 17.651 9.677,14.927 12.359,14.573 12.642 C 14.091 13.027,13.742 13.157,13.187 13.159 C 12.692 13.161,12.392 13.045,11.451 12.489 L 11.082 12.271 10.651 12.288 C 10.310 12.301,10.186 12.322,10.056 12.390 C 9.874 12.485,9.657 12.712,9.593 12.874 C 9.521 13.057,9.536 13.679,9.617 13.849 C 9.766 14.162,10.562 14.804,11.180 15.110 C 12.305 15.667,13.697 15.700,14.990 15.202 C 15.407 15.041,15.797 14.785,16.337 14.319 C 17.255 13.526,20.275 10.479,20.658 9.958 C 20.864 9.678,21.236 8.961,21.353 8.614 C 21.465 8.287,21.516 7.958,21.545 7.380 C 21.590 6.506,21.460 5.917,21.034 5.062 C 20.783 4.558,20.520 4.204,20.116 3.823 C 19.541 3.282,18.624 2.759,18.020 2.626 C 17.371 2.483,16.448 2.445,15.940 2.539 M9.859 8.559 C 9.395 8.625,8.671 8.932,8.162 9.279 C 7.668 9.615,6.105 11.093,4.723 12.530 C 3.223 14.090,2.825 14.661,2.605 15.560 C 2.356 16.579,2.417 17.517,2.800 18.569 C 3.165 19.572,4.284 20.721,5.320 21.159 C 5.969 21.433,6.885 21.593,7.516 21.543 C 8.450 21.469,9.394 21.099,10.121 20.524 C 10.433 20.276,12.214 18.491,12.513 18.126 C 12.659 17.949,12.660 17.944,12.659 17.582 C 12.658 17.259,12.645 17.196,12.549 17.032 C 12.375 16.734,12.045 16.509,11.682 16.440 C 11.268 16.362,11.030 16.507,9.898 17.526 C 8.462 18.819,8.340 18.911,7.862 19.066 C 7.311 19.244,6.738 19.191,6.180 18.911 C 5.744 18.693,5.356 18.278,5.071 17.727 L 4.912 17.421 4.927 16.760 L 4.941 16.100 5.091 15.820 C 5.332 15.369,5.847 14.792,7.399 13.237 C 9.395 11.237,9.707 11.003,10.491 10.911 C 11.090 10.841,11.383 10.899,11.980 11.209 C 12.951 11.713,13.090 11.774,13.307 11.792 C 13.479 11.806,13.561 11.789,13.736 11.704 C 14.005 11.572,14.266 11.317,14.375 11.080 C 14.487 10.837,14.489 10.403,14.380 10.180 C 14.213 9.840,13.550 9.298,12.875 8.951 C 12.475 8.745,12.207 8.656,11.820 8.600 C 11.432 8.544,10.151 8.517,9.859 8.559 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.090 2.521 C 15.488 2.597,14.432 3.057,13.959 3.450 C 13.545 3.794,12.222 5.064,11.750 5.571 L 11.320 6.033 11.320 6.342 C 11.320 6.794,11.376 6.939,11.661 7.227 C 11.949 7.517,12.228 7.627,12.571 7.586 C 12.911 7.546,13.116 7.396,14.363 6.272 C 15.545 5.206,15.835 5.011,16.374 4.918 C 16.695 4.862,17.212 4.914,17.569 5.036 C 18.305 5.289,18.943 6.003,19.041 6.682 C 19.122 7.240,19.070 7.867,18.918 8.164 C 18.781 8.432,18.359 8.922,17.585 9.711 C 16.379 10.941,14.630 12.613,14.363 12.792 C 14.015 13.024,13.720 13.125,13.320 13.149 C 12.770 13.182,12.449 13.070,11.486 12.509 L 11.073 12.268 10.661 12.292 C 10.206 12.317,10.044 12.369,9.832 12.555 C 9.613 12.748,9.560 12.896,9.560 13.323 C 9.560 13.618,9.577 13.730,9.643 13.867 C 9.751 14.089,10.155 14.458,10.661 14.797 C 11.115 15.101,11.521 15.282,12.077 15.430 C 12.412 15.519,12.543 15.532,13.120 15.533 C 13.667 15.534,13.848 15.519,14.180 15.443 C 15.398 15.164,15.842 14.853,17.900 12.830 C 19.214 11.539,20.465 10.222,20.704 9.878 C 20.916 9.575,21.170 9.088,21.305 8.732 C 21.448 8.352,21.517 7.952,21.545 7.343 C 21.583 6.527,21.468 5.987,21.082 5.175 C 20.826 4.635,20.610 4.325,20.222 3.939 C 19.513 3.233,18.563 2.710,17.756 2.583 C 17.267 2.505,16.457 2.475,16.090 2.521 M9.500 8.642 C 9.094 8.758,8.303 9.162,7.986 9.416 C 6.916 10.271,4.194 12.994,3.410 13.993 C 2.753 14.830,2.471 15.650,2.465 16.740 C 2.462 17.280,2.516 17.639,2.687 18.215 C 2.908 18.961,3.221 19.461,3.880 20.120 C 4.727 20.967,5.445 21.326,6.649 21.503 C 7.723 21.662,8.858 21.378,9.889 20.693 C 10.178 20.501,12.152 18.574,12.501 18.144 L 12.660 17.947 12.658 17.584 C 12.655 17.172,12.609 17.049,12.365 16.805 C 12.147 16.587,11.871 16.465,11.560 16.448 C 11.160 16.427,11.049 16.502,9.622 17.775 C 9.181 18.169,8.693 18.586,8.538 18.704 C 7.849 19.226,7.026 19.301,6.202 18.917 C 5.842 18.749,5.367 18.260,5.105 17.787 L 4.909 17.434 4.928 16.764 C 4.948 16.102,4.949 16.091,5.077 15.852 C 5.276 15.479,5.631 15.061,6.653 13.997 C 7.642 12.967,8.690 11.950,9.197 11.527 C 9.724 11.088,10.024 10.958,10.643 10.900 C 11.142 10.854,11.363 10.917,12.290 11.368 C 13.267 11.844,13.382 11.870,13.735 11.697 C 13.991 11.572,14.293 11.272,14.388 11.049 C 14.463 10.874,14.472 10.395,14.404 10.225 C 14.278 9.908,13.489 9.265,12.805 8.922 C 12.216 8.627,12.009 8.591,10.820 8.575 C 9.874 8.563,9.755 8.569,9.500 8.642 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/linkedin.svg b/packages/icons/svg/linkedin.svg
index 5a795e73bc..23384821c0 100644
--- a/packages/icons/svg/linkedin.svg
+++ b/packages/icons/svg/linkedin.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.780 3.025 C 4.300 3.100,3.906 3.290,3.576 3.607 C 2.647 4.499,2.878 6.105,4.021 6.706 C 4.402 6.907,4.762 6.975,5.291 6.948 C 5.981 6.913,6.425 6.730,6.814 6.323 C 7.318 5.795,7.470 5.090,7.240 4.350 C 7.056 3.759,6.569 3.298,5.920 3.103 C 5.701 3.037,5.009 2.990,4.780 3.025 M16.159 8.285 C 15.453 8.331,14.808 8.556,14.222 8.961 C 13.903 9.182,13.399 9.683,13.213 9.964 L 13.100 10.134 13.089 9.327 L 13.078 8.519 11.161 8.530 L 9.244 8.540 9.232 14.270 L 9.220 20.000 11.150 20.000 L 13.080 20.000 13.080 16.650 C 13.080 14.519,13.096 13.205,13.122 13.040 C 13.219 12.436,13.741 11.736,14.284 11.482 C 14.726 11.275,15.226 11.226,15.717 11.342 C 16.380 11.498,16.791 11.936,17.027 12.740 C 17.092 12.960,17.099 13.277,17.110 16.490 L 17.123 20.000 19.061 20.000 L 21.000 20.000 21.000 16.464 C 21.000 12.757,20.987 12.417,20.821 11.671 C 20.579 10.589,20.094 9.771,19.331 9.158 C 18.492 8.484,17.461 8.200,16.159 8.285 M3.240 14.260 L 3.240 20.000 5.160 20.000 L 7.080 20.000 7.080 14.260 L 7.080 8.520 5.160 8.520 L 3.240 8.520 3.240 14.260 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.701 3.042 C 3.911 3.177,3.264 3.747,3.073 4.477 C 2.808 5.494,3.348 6.494,4.352 6.845 C 4.868 7.026,5.761 6.969,6.260 6.723 C 7.234 6.243,7.611 5.094,7.125 4.081 C 6.908 3.630,6.291 3.167,5.792 3.082 C 5.455 3.025,4.917 3.005,4.701 3.042 M15.820 8.322 C 15.296 8.403,14.734 8.627,14.252 8.947 C 13.989 9.121,13.428 9.661,13.251 9.909 L 13.131 10.077 13.106 9.869 C 13.092 9.754,13.081 9.401,13.080 9.084 L 13.080 8.508 11.177 8.530 C 10.131 8.542,9.269 8.558,9.262 8.566 C 9.256 8.574,9.241 11.149,9.231 14.290 L 9.211 20.000 11.146 20.000 L 13.080 20.000 13.083 16.990 C 13.084 15.335,13.099 13.727,13.115 13.418 C 13.143 12.908,13.157 12.831,13.267 12.598 C 13.633 11.823,14.239 11.365,14.992 11.295 C 15.495 11.249,16.097 11.416,16.427 11.694 C 16.602 11.843,16.823 12.187,16.948 12.509 C 17.053 12.777,17.054 12.795,17.083 14.180 C 17.099 14.950,17.114 16.575,17.116 17.790 L 17.120 20.000 19.063 20.000 L 21.006 20.000 20.990 16.230 C 20.972 12.132,20.976 12.200,20.739 11.379 C 20.537 10.677,20.277 10.168,19.885 9.707 C 19.317 9.037,18.539 8.570,17.680 8.381 C 17.325 8.303,16.176 8.266,15.820 8.322 M3.240 14.260 L 3.240 20.000 5.160 20.000 L 7.080 20.000 7.080 14.260 L 7.080 8.520 5.160 8.520 L 3.240 8.520 3.240 14.260 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/linux.svg b/packages/icons/svg/linux.svg
index 463cc70be9..447f339a79 100644
--- a/packages/icons/svg/linux.svg
+++ b/packages/icons/svg/linux.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.784 2.046 C 10.002 2.146,9.595 2.353,9.218 2.843 C 8.972 3.162,8.816 3.490,8.711 3.909 C 8.632 4.222,8.623 4.355,8.627 5.140 C 8.629 5.637,8.660 6.299,8.698 6.660 C 8.734 7.012,8.774 7.518,8.787 7.784 C 8.832 8.692,8.710 8.947,7.585 10.300 C 7.023 10.976,6.820 11.346,6.640 12.018 C 6.430 12.802,6.294 13.142,5.875 13.926 C 5.656 14.336,5.439 14.777,5.393 14.906 C 5.296 15.179,5.252 15.633,5.311 15.744 C 5.341 15.800,5.338 15.841,5.300 15.894 C 5.270 15.934,5.205 16.085,5.154 16.230 C 5.021 16.604,4.951 16.640,4.345 16.640 C 3.823 16.640,3.703 16.680,3.537 16.907 C 3.340 17.177,3.310 17.450,3.404 18.119 C 3.523 18.965,3.519 18.998,3.240 19.543 C 2.992 20.027,2.960 20.167,3.056 20.352 C 3.166 20.565,3.628 20.741,4.434 20.879 C 5.025 20.980,5.725 21.170,6.720 21.501 C 7.888 21.889,8.243 21.946,8.680 21.816 C 8.941 21.739,9.048 21.675,9.280 21.457 C 9.483 21.266,9.834 21.124,10.320 21.035 C 10.759 20.954,12.248 20.964,13.140 21.053 C 13.833 21.122,13.863 21.128,13.940 21.230 C 14.301 21.706,14.627 21.899,15.192 21.969 C 15.857 22.051,16.118 21.931,17.090 21.096 C 17.977 20.334,18.297 20.113,19.020 19.762 C 19.719 19.423,19.932 19.251,19.982 18.982 C 20.052 18.612,19.901 18.408,19.336 18.108 C 19.137 18.003,18.892 17.841,18.792 17.748 C 18.595 17.568,18.568 17.500,18.467 16.936 C 18.391 16.515,18.275 16.251,18.142 16.201 C 18.086 16.179,18.040 16.151,18.040 16.137 C 18.040 16.124,18.078 15.930,18.124 15.706 C 18.242 15.135,18.215 14.142,18.065 13.507 C 17.829 12.506,17.237 11.320,16.594 10.556 C 16.141 10.019,15.470 9.018,15.188 8.460 C 14.900 7.888,14.833 7.542,14.679 5.840 C 14.574 4.667,14.374 3.812,14.097 3.353 C 13.796 2.854,13.225 2.394,12.669 2.203 C 12.142 2.022,11.432 1.962,10.784 2.046 M12.653 5.088 C 12.987 5.271,13.119 5.843,13.002 6.593 C 12.921 7.106,12.930 7.087,12.798 7.019 C 12.735 6.987,12.648 6.960,12.604 6.960 C 12.471 6.960,12.470 6.887,12.602 6.819 C 12.930 6.650,12.924 5.958,12.593 5.659 C 12.470 5.547,12.407 5.520,12.272 5.520 C 11.900 5.520,11.698 5.815,11.727 6.318 C 11.735 6.473,11.732 6.600,11.719 6.600 C 11.577 6.600,11.442 6.263,11.414 5.840 C 11.396 5.580,11.406 5.516,11.487 5.361 C 11.682 4.985,12.230 4.857,12.653 5.088 M9.955 5.177 C 10.016 5.209,10.118 5.312,10.182 5.407 C 10.285 5.559,10.301 5.623,10.313 5.931 C 10.329 6.301,10.305 6.480,10.239 6.480 C 10.218 6.480,10.200 6.411,10.200 6.327 C 10.200 5.942,9.973 5.558,9.747 5.561 C 9.505 5.565,9.311 5.804,9.287 6.125 C 9.263 6.463,9.305 6.622,9.458 6.776 L 9.593 6.910 9.493 6.964 C 9.402 7.012,9.386 7.008,9.314 6.919 C 9.270 6.864,9.196 6.739,9.149 6.640 C 8.964 6.253,9.086 5.457,9.365 5.222 C 9.506 5.103,9.773 5.083,9.955 5.177 M9.838 5.759 C 9.970 5.830,10.061 6.240,9.945 6.240 C 9.914 6.240,9.868 6.161,9.840 6.060 C 9.798 5.911,9.773 5.880,9.695 5.880 C 9.642 5.880,9.600 5.856,9.600 5.827 C 9.600 5.718,9.705 5.688,9.838 5.759 M12.552 5.802 C 12.601 5.846,12.640 5.923,12.641 5.972 C 12.641 6.020,12.652 6.100,12.665 6.150 C 12.700 6.281,12.607 6.263,12.557 6.130 C 12.535 6.070,12.461 5.973,12.392 5.916 C 12.265 5.810,12.266 5.720,12.395 5.720 C 12.433 5.720,12.504 5.757,12.552 5.802 M11.520 6.659 C 12.962 7.164,13.240 7.313,13.240 7.582 C 13.240 7.773,13.074 7.945,12.544 8.306 C 11.638 8.923,11.194 9.125,10.742 9.127 C 10.374 9.128,10.100 9.006,9.756 8.688 C 9.343 8.306,9.062 7.902,9.370 8.133 C 9.592 8.300,9.918 8.444,10.212 8.505 C 10.658 8.598,11.121 8.501,11.760 8.181 C 12.164 7.978,12.632 7.672,12.570 7.650 C 12.543 7.641,12.520 7.608,12.520 7.577 C 12.520 7.545,12.512 7.520,12.502 7.520 C 12.491 7.520,12.337 7.619,12.158 7.741 C 11.192 8.399,10.474 8.553,9.822 8.241 C 9.514 8.094,9.160 7.772,9.160 7.640 C 9.160 7.320,9.843 6.774,10.520 6.554 C 10.801 6.462,11.023 6.486,11.520 6.659 M10.400 6.676 C 10.324 6.697,10.297 6.734,10.287 6.832 C 10.272 6.995,10.346 7.000,10.493 6.848 C 10.665 6.668,10.634 6.611,10.400 6.676 M10.880 6.713 C 10.880 6.813,11.061 6.976,11.138 6.946 C 11.226 6.913,11.215 6.851,11.102 6.738 C 10.986 6.622,10.880 6.610,10.880 6.713 M13.182 8.690 C 13.287 8.938,13.496 9.376,13.646 9.663 C 13.844 10.041,13.920 10.229,13.920 10.338 C 13.920 10.711,14.113 11.159,14.556 11.814 C 14.673 11.987,14.812 12.228,14.866 12.350 C 15.015 12.686,15.156 13.323,15.205 13.880 C 15.247 14.355,15.229 15.544,15.174 15.887 C 15.151 16.031,15.146 16.035,15.066 15.979 C 14.941 15.891,14.616 15.903,14.479 16.001 C 14.416 16.045,14.314 16.185,14.252 16.311 C 14.141 16.538,14.140 16.547,14.140 17.307 L 14.140 18.075 13.988 18.275 C 13.766 18.565,13.313 18.980,12.976 19.200 C 12.330 19.622,11.658 19.810,10.780 19.815 C 9.751 19.821,9.227 19.609,8.958 19.076 L 8.841 18.844 8.979 18.805 C 9.256 18.729,9.600 18.372,9.600 18.160 C 9.600 17.859,8.827 17.043,8.053 16.527 C 7.462 16.133,6.898 15.670,6.752 15.457 C 6.692 15.371,6.615 15.219,6.580 15.120 C 6.490 14.867,6.498 14.335,6.597 13.949 C 6.738 13.402,7.376 11.986,7.555 11.824 C 7.627 11.759,7.760 11.773,7.760 11.845 C 7.760 11.865,7.688 11.986,7.600 12.115 C 7.401 12.407,7.078 13.081,6.943 13.486 C 6.713 14.176,6.656 14.795,6.795 15.100 C 6.871 15.266,7.065 15.520,7.117 15.520 C 7.133 15.520,7.139 15.377,7.128 15.203 C 7.105 14.799,7.205 14.193,7.385 13.641 C 7.461 13.410,7.738 12.780,8.002 12.241 C 8.265 11.701,8.480 11.218,8.480 11.166 C 8.480 10.981,8.724 10.349,9.019 9.769 C 9.184 9.445,9.343 9.074,9.372 8.945 L 9.424 8.710 9.732 8.972 C 9.902 9.116,10.108 9.258,10.190 9.287 C 10.416 9.366,11.016 9.354,11.280 9.265 C 11.742 9.109,12.239 8.819,12.720 8.426 C 12.841 8.326,12.952 8.244,12.966 8.243 C 12.981 8.241,13.078 8.443,13.182 8.690 M15.492 11.466 C 15.852 11.651,16.170 12.059,16.347 12.561 C 16.536 13.099,16.523 14.107,16.317 14.875 C 16.273 15.038,16.246 15.179,16.257 15.190 C 16.267 15.201,16.435 15.226,16.628 15.245 C 17.351 15.318,17.799 15.579,17.925 16.001 C 18.009 16.281,17.914 16.271,17.728 15.978 C 17.580 15.746,17.530 15.701,17.309 15.601 C 16.891 15.412,16.366 15.349,16.025 15.448 C 15.907 15.482,15.777 15.579,15.566 15.791 C 15.405 15.953,15.262 16.075,15.249 16.062 C 15.169 15.982,15.622 15.410,15.837 15.321 C 15.966 15.268,16.030 15.128,16.160 14.620 C 16.405 13.665,16.293 12.646,15.881 12.071 C 15.743 11.878,15.361 11.567,15.194 11.511 C 15.122 11.487,15.193 11.400,15.284 11.400 C 15.328 11.400,15.422 11.430,15.492 11.466 M6.300 15.854 C 6.708 16.044,6.953 16.337,7.517 17.311 C 7.609 17.472,7.876 17.859,8.110 18.171 C 8.644 18.886,8.842 19.193,9.041 19.609 C 9.243 20.034,9.320 20.342,9.320 20.722 C 9.320 20.996,9.308 21.045,9.205 21.187 C 8.989 21.485,8.520 21.720,8.141 21.720 C 7.937 21.720,7.482 21.589,6.687 21.302 C 5.875 21.010,5.189 20.823,4.472 20.701 C 3.797 20.585,3.470 20.476,3.306 20.312 C 3.158 20.164,3.174 20.074,3.438 19.540 C 3.709 18.995,3.739 18.797,3.639 18.229 C 3.537 17.641,3.538 17.391,3.645 17.171 C 3.774 16.904,3.847 16.874,4.451 16.840 C 4.742 16.824,5.029 16.791,5.088 16.767 C 5.222 16.713,5.303 16.588,5.339 16.380 C 5.391 16.078,5.562 15.894,5.880 15.797 C 6.040 15.749,6.088 15.755,6.300 15.854 M15.041 16.187 C 15.132 16.241,15.176 16.321,15.257 16.580 C 15.442 17.174,15.703 17.396,16.256 17.430 C 16.675 17.456,16.928 17.350,17.272 17.003 C 17.656 16.617,17.954 16.360,18.018 16.360 C 18.090 16.360,18.185 16.620,18.260 17.020 C 18.375 17.636,18.626 17.991,19.129 18.244 C 19.428 18.395,19.554 18.489,19.649 18.633 C 19.792 18.850,19.698 19.241,19.472 19.366 C 19.421 19.394,19.243 19.473,19.075 19.543 C 18.708 19.695,18.097 20.035,17.821 20.241 C 17.710 20.323,17.377 20.601,17.080 20.858 C 16.153 21.661,15.827 21.828,15.256 21.791 C 14.874 21.766,14.590 21.628,14.322 21.335 C 14.211 21.213,14.120 21.084,14.120 21.047 C 14.120 21.010,14.147 20.839,14.180 20.666 C 14.213 20.494,14.240 20.268,14.240 20.163 C 14.240 20.059,14.276 19.777,14.319 19.537 C 14.387 19.164,14.399 18.921,14.400 17.880 C 14.401 16.561,14.418 16.416,14.601 16.233 C 14.731 16.103,14.874 16.088,15.041 16.187 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.867 2.041 C 10.167 2.121,9.746 2.294,9.401 2.644 C 9.126 2.923,8.910 3.284,8.770 3.700 C 8.667 4.006,8.662 4.063,8.648 4.980 C 8.638 5.679,8.653 6.152,8.704 6.720 C 8.743 7.149,8.775 7.725,8.776 8.000 C 8.776 8.443,8.765 8.527,8.676 8.740 C 8.534 9.083,8.351 9.353,7.790 10.048 C 6.955 11.082,6.866 11.240,6.604 12.147 C 6.402 12.845,6.280 13.140,5.853 13.959 C 5.375 14.877,5.310 15.058,5.301 15.500 C 5.292 15.957,5.105 16.506,4.931 16.582 C 4.892 16.599,4.634 16.624,4.358 16.638 C 3.749 16.669,3.637 16.720,3.471 17.036 C 3.337 17.293,3.327 17.555,3.424 18.293 C 3.459 18.561,3.478 18.852,3.466 18.940 C 3.454 19.028,3.351 19.297,3.237 19.539 C 3.123 19.780,3.021 20.046,3.010 20.130 C 2.991 20.267,3.005 20.297,3.150 20.435 C 3.338 20.613,3.724 20.749,4.420 20.879 C 5.029 20.994,5.758 21.190,6.700 21.493 C 7.714 21.819,8.057 21.896,8.380 21.870 C 8.680 21.846,9.008 21.705,9.229 21.505 C 9.439 21.315,9.828 21.139,10.208 21.062 C 10.812 20.940,13.568 21.014,13.841 21.160 C 13.881 21.182,13.980 21.280,14.061 21.378 C 14.350 21.731,14.756 21.927,15.313 21.982 C 15.856 22.036,16.161 21.878,17.180 21.020 C 17.934 20.386,18.314 20.127,19.022 19.765 C 19.649 19.445,19.864 19.289,19.945 19.094 C 20.109 18.702,19.922 18.419,19.268 18.071 C 18.991 17.923,18.700 17.674,18.618 17.516 C 18.585 17.453,18.522 17.219,18.477 16.996 C 18.401 16.614,18.265 16.240,18.203 16.240 C 18.188 16.240,18.144 16.217,18.107 16.190 C 18.042 16.142,18.042 16.122,18.109 15.820 C 18.206 15.380,18.206 14.206,18.109 13.717 C 17.978 13.066,17.663 12.241,17.295 11.590 C 17.051 11.158,16.926 10.974,16.582 10.540 C 15.974 9.772,15.384 8.875,15.137 8.340 C 14.910 7.849,14.856 7.568,14.702 6.072 C 14.493 4.049,14.300 3.453,13.653 2.840 C 13.254 2.463,12.761 2.198,12.280 2.103 C 11.882 2.025,11.253 1.997,10.867 2.041 M12.543 5.044 C 12.818 5.128,12.994 5.440,13.029 5.904 C 13.051 6.188,12.980 6.903,12.921 6.998 C 12.898 7.036,12.853 7.035,12.716 6.996 C 12.619 6.968,12.533 6.940,12.524 6.933 C 12.515 6.926,12.572 6.857,12.652 6.780 C 13.070 6.374,12.749 5.472,12.208 5.532 C 11.889 5.567,11.722 5.833,11.721 6.310 C 11.720 6.472,11.703 6.600,11.681 6.600 C 11.552 6.600,11.361 5.840,11.416 5.545 C 11.431 5.470,11.509 5.332,11.591 5.240 C 11.816 4.987,12.138 4.921,12.543 5.044 M10.045 5.264 C 10.112 5.328,10.194 5.432,10.227 5.495 C 10.338 5.707,10.347 6.526,10.238 6.459 C 10.217 6.446,10.200 6.377,10.200 6.305 C 10.200 5.986,9.949 5.560,9.762 5.560 C 9.303 5.560,9.095 6.438,9.474 6.776 C 9.584 6.874,9.583 6.947,9.473 6.982 C 9.370 7.015,9.315 6.955,9.171 6.646 C 9.081 6.455,9.073 6.395,9.088 6.066 C 9.109 5.625,9.227 5.313,9.417 5.193 C 9.598 5.079,9.885 5.112,10.045 5.264 M9.878 5.807 C 9.976 5.912,10.028 6.148,9.966 6.210 C 9.935 6.241,9.901 6.201,9.843 6.067 C 9.799 5.964,9.736 5.880,9.704 5.880 C 9.632 5.880,9.586 5.815,9.620 5.760 C 9.662 5.692,9.793 5.716,9.878 5.807 M12.518 5.790 C 12.604 5.860,12.706 6.189,12.656 6.235 C 12.641 6.249,12.620 6.235,12.609 6.204 C 12.598 6.174,12.529 6.082,12.455 5.999 C 12.252 5.774,12.300 5.614,12.518 5.790 M11.408 6.624 C 11.867 6.769,12.699 7.098,12.939 7.230 C 13.294 7.426,13.327 7.652,13.039 7.926 C 12.837 8.118,11.986 8.686,11.646 8.856 C 11.208 9.075,10.986 9.132,10.665 9.111 C 10.326 9.089,10.083 8.977,9.765 8.695 C 9.549 8.504,9.224 8.123,9.253 8.094 C 9.261 8.086,9.374 8.143,9.504 8.221 C 10.038 8.543,10.611 8.612,11.174 8.423 C 11.606 8.278,12.173 7.983,12.531 7.717 C 12.548 7.704,12.548 7.656,12.531 7.610 C 12.502 7.532,12.479 7.540,12.120 7.769 C 10.978 8.494,10.236 8.579,9.545 8.062 C 9.240 7.834,9.148 7.708,9.179 7.564 C 9.237 7.300,9.759 6.872,10.313 6.636 C 10.664 6.486,10.958 6.483,11.408 6.624 M10.400 6.692 C 10.290 6.747,10.249 6.865,10.316 6.932 C 10.347 6.963,10.393 6.943,10.480 6.860 C 10.671 6.677,10.625 6.578,10.400 6.692 M10.880 6.717 C 10.880 6.800,11.067 6.971,11.134 6.949 C 11.218 6.921,11.203 6.839,11.097 6.741 C 10.967 6.621,10.880 6.611,10.880 6.717 M13.135 8.585 C 13.191 8.720,13.381 9.121,13.557 9.476 C 13.733 9.831,13.887 10.189,13.899 10.271 C 13.985 10.832,14.095 11.106,14.461 11.666 C 14.970 12.448,15.122 12.936,15.201 14.040 C 15.237 14.551,15.204 15.929,15.154 15.979 C 15.146 15.987,15.067 15.975,14.978 15.951 C 14.638 15.860,14.395 15.993,14.227 16.360 C 14.155 16.517,14.142 16.640,14.128 17.328 L 14.111 18.115 13.924 18.347 C 13.671 18.661,13.141 19.111,12.781 19.317 C 12.180 19.661,11.593 19.800,10.752 19.799 C 9.691 19.798,9.226 19.605,8.944 19.048 L 8.848 18.859 9.081 18.750 C 9.372 18.612,9.578 18.370,9.578 18.163 C 9.578 17.848,8.914 17.141,8.037 16.520 C 7.187 15.918,6.837 15.608,6.677 15.313 C 6.542 15.064,6.540 15.052,6.542 14.580 C 6.544 14.136,6.555 14.068,6.687 13.680 C 6.848 13.209,7.287 12.230,7.453 11.970 C 7.533 11.845,7.587 11.800,7.661 11.800 C 7.715 11.800,7.760 11.814,7.760 11.831 C 7.760 11.848,7.676 11.997,7.573 12.161 C 7.083 12.946,6.720 13.997,6.720 14.631 C 6.720 14.931,6.806 15.178,6.979 15.380 L 7.117 15.540 7.120 15.240 C 7.128 14.340,7.308 13.704,7.920 12.420 C 8.307 11.607,8.466 11.233,8.497 11.063 C 8.536 10.851,8.706 10.432,9.040 9.723 C 9.194 9.397,9.343 9.037,9.372 8.923 L 9.425 8.717 9.720 8.958 C 9.883 9.090,10.080 9.229,10.158 9.266 C 10.355 9.361,10.983 9.358,11.281 9.261 C 11.641 9.145,12.169 8.848,12.566 8.539 C 12.848 8.320,12.951 8.260,12.987 8.294 C 13.012 8.319,13.079 8.450,13.135 8.585 M15.506 11.483 C 15.848 11.648,16.222 12.162,16.377 12.680 C 16.523 13.167,16.498 14.103,16.320 14.850 C 16.277 15.029,16.247 15.180,16.252 15.186 C 16.258 15.191,16.443 15.223,16.664 15.256 C 17.470 15.376,17.820 15.605,17.941 16.090 C 17.986 16.270,17.899 16.219,17.717 15.960 C 17.586 15.774,17.500 15.697,17.331 15.617 C 16.880 15.404,16.221 15.344,15.938 15.491 C 15.873 15.524,15.698 15.664,15.548 15.801 C 15.399 15.938,15.265 16.038,15.251 16.024 C 15.205 15.978,15.542 15.544,15.741 15.392 C 15.976 15.213,16.011 15.151,16.151 14.651 C 16.250 14.296,16.260 14.199,16.259 13.600 C 16.258 12.986,16.250 12.918,16.149 12.629 C 16.089 12.458,15.997 12.250,15.944 12.167 C 15.832 11.989,15.478 11.661,15.303 11.572 C 15.147 11.493,15.147 11.493,15.178 11.443 C 15.218 11.379,15.316 11.391,15.506 11.483 M6.435 15.931 C 6.712 16.096,6.980 16.421,7.378 17.075 C 7.553 17.362,7.818 17.765,7.968 17.969 C 9.042 19.434,9.364 20.120,9.313 20.833 C 9.287 21.194,9.014 21.477,8.535 21.642 C 8.140 21.778,7.986 21.749,6.662 21.296 C 5.773 20.992,5.223 20.842,4.476 20.702 C 3.661 20.549,3.340 20.423,3.247 20.220 C 3.194 20.102,3.193 20.104,3.452 19.520 C 3.698 18.967,3.720 18.779,3.620 18.079 C 3.582 17.810,3.562 17.522,3.576 17.433 C 3.613 17.206,3.736 16.984,3.856 16.929 C 3.913 16.903,4.196 16.863,4.484 16.840 C 5.058 16.793,5.207 16.742,5.270 16.572 C 5.293 16.510,5.341 16.378,5.376 16.277 C 5.454 16.058,5.614 15.895,5.825 15.817 C 6.024 15.744,6.168 15.771,6.435 15.931 M15.086 16.225 C 15.125 16.261,15.187 16.382,15.224 16.495 C 15.434 17.137,15.691 17.377,16.222 17.427 C 16.652 17.468,16.847 17.381,17.326 16.937 C 17.925 16.382,17.991 16.334,18.061 16.404 C 18.093 16.435,18.173 16.676,18.240 16.939 C 18.307 17.203,18.399 17.494,18.444 17.588 C 18.555 17.817,18.833 18.084,19.121 18.237 C 19.581 18.483,19.748 18.692,19.703 18.969 C 19.660 19.242,19.586 19.304,18.940 19.615 C 18.156 19.993,17.920 20.150,17.123 20.819 C 16.377 21.446,16.073 21.655,15.786 21.741 C 15.216 21.910,14.562 21.690,14.230 21.219 L 14.118 21.058 14.178 20.639 C 14.211 20.409,14.268 20.004,14.305 19.740 C 14.352 19.409,14.381 18.837,14.399 17.900 C 14.422 16.699,14.433 16.522,14.498 16.389 C 14.621 16.133,14.898 16.056,15.086 16.225 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/list.svg b/packages/icons/svg/list.svg
new file mode 100644
index 0000000000..578cf530d3
--- /dev/null
+++ b/packages/icons/svg/list.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.918 5.052 C 3.366 5.208,3.026 5.660,3.023 6.240 C 3.022 6.636,3.133 6.891,3.425 7.157 C 3.702 7.411,3.950 7.496,4.335 7.471 C 4.978 7.429,5.430 6.978,5.471 6.338 C 5.496 5.949,5.412 5.703,5.157 5.425 C 4.839 5.076,4.352 4.929,3.918 5.052 M8.918 5.054 C 8.370 5.203,8.026 5.660,8.023 6.240 C 8.022 6.635,8.133 6.891,8.424 7.157 C 8.807 7.507,8.308 7.480,14.500 7.480 C 20.692 7.480,20.193 7.507,20.576 7.157 C 20.867 6.891,20.978 6.635,20.977 6.240 C 20.975 5.739,20.732 5.350,20.286 5.131 L 20.060 5.020 14.580 5.012 C 10.334 5.006,9.059 5.016,8.918 5.054 M3.918 11.052 C 3.366 11.208,3.026 11.660,3.023 12.240 C 3.022 12.636,3.133 12.891,3.425 13.157 C 3.702 13.411,3.950 13.496,4.335 13.471 C 4.978 13.429,5.430 12.978,5.471 12.338 C 5.496 11.949,5.412 11.703,5.157 11.425 C 4.839 11.076,4.352 10.929,3.918 11.052 M8.918 11.054 C 8.370 11.203,8.026 11.660,8.023 12.240 C 8.022 12.635,8.133 12.891,8.424 13.157 C 8.807 13.507,8.308 13.480,14.500 13.480 C 20.692 13.480,20.193 13.507,20.576 13.157 C 20.867 12.891,20.978 12.635,20.977 12.240 C 20.975 11.739,20.732 11.350,20.286 11.131 L 20.060 11.020 14.580 11.012 C 10.334 11.006,9.059 11.016,8.918 11.054 M3.918 17.052 C 3.366 17.208,3.026 17.660,3.023 18.240 C 3.022 18.636,3.133 18.891,3.425 19.157 C 3.702 19.411,3.950 19.496,4.335 19.471 C 4.978 19.429,5.430 18.978,5.471 18.338 C 5.496 17.949,5.412 17.703,5.157 17.425 C 4.839 17.076,4.352 16.929,3.918 17.052 M8.918 17.054 C 8.370 17.203,8.026 17.660,8.023 18.240 C 8.022 18.635,8.133 18.891,8.424 19.157 C 8.807 19.507,8.308 19.480,14.500 19.480 C 20.692 19.480,20.193 19.507,20.576 19.157 C 20.867 18.891,20.978 18.635,20.977 18.240 C 20.975 17.739,20.732 17.350,20.286 17.131 L 20.060 17.020 14.580 17.012 C 10.334 17.006,9.059 17.016,8.918 17.054 " stroke="none" fill="black" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/location-marker.svg b/packages/icons/svg/location-marker.svg
index a34527b136..98f47bf79e 100644
--- a/packages/icons/svg/location-marker.svg
+++ b/packages/icons/svg/location-marker.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.548 C 10.347 2.603,9.544 2.819,9.211 2.944 C 8.657 3.150,7.854 3.566,7.342 3.911 C 5.524 5.138,4.371 6.823,3.777 9.120 C 3.624 9.712,3.636 11.905,3.795 12.540 C 4.131 13.882,4.671 14.983,5.461 15.940 C 5.797 16.348,8.052 18.679,10.587 21.239 L 11.994 22.660 12.321 22.340 C 12.501 22.164,13.649 21.003,14.872 19.760 C 18.563 16.008,18.918 15.610,19.395 14.681 C 20.437 12.652,20.635 10.337,19.946 8.236 C 19.465 6.767,18.705 5.622,17.502 4.551 C 16.960 4.068,16.345 3.665,15.600 3.304 C 14.287 2.669,13.516 2.515,11.700 2.525 C 11.194 2.528,10.735 2.538,10.680 2.548 M12.943 8.693 C 13.505 8.990,13.984 9.493,14.169 9.980 C 14.249 10.192,14.260 10.292,14.260 10.840 C 14.260 11.453,14.259 11.463,14.134 11.727 C 14.048 11.907,13.907 12.098,13.697 12.318 C 12.816 13.240,11.978 13.408,10.940 12.868 C 10.564 12.673,10.090 12.173,9.881 11.752 L 9.711 11.409 9.710 10.915 C 9.710 10.643,9.730 10.331,9.757 10.221 C 9.917 9.550,10.491 8.909,11.199 8.610 C 11.404 8.524,11.464 8.518,12.040 8.530 L 12.660 8.544 12.943 8.693 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.700 2.563 C 9.959 2.646,8.909 3.017,8.024 3.507 C 7.217 3.953,6.656 4.374,6.039 4.996 C 4.984 6.059,4.287 7.307,3.812 8.980 C 3.717 9.317,3.709 9.412,3.691 10.464 C 3.679 11.166,3.688 11.743,3.716 12.004 C 3.822 12.975,4.309 14.257,4.940 15.225 C 5.275 15.739,5.525 16.031,6.525 17.080 C 7.404 18.000,11.391 22.067,11.800 22.460 L 12.008 22.660 13.668 20.980 C 17.069 17.540,18.362 16.184,18.839 15.560 C 19.824 14.270,20.438 12.162,20.342 10.401 C 20.174 7.324,18.428 4.702,15.632 3.328 C 14.616 2.829,13.925 2.636,12.880 2.562 C 12.221 2.515,11.116 2.515,10.700 2.563 M12.997 8.730 C 13.391 8.952,13.896 9.449,14.082 9.800 L 14.220 10.060 14.220 10.821 L 14.220 11.583 14.080 11.820 C 13.898 12.127,13.409 12.626,13.083 12.836 C 12.459 13.237,11.725 13.264,11.020 12.911 C 10.595 12.698,10.150 12.238,9.864 11.717 C 9.720 11.454,9.720 11.453,9.720 10.949 C 9.720 10.341,9.765 10.104,9.946 9.756 C 10.205 9.259,10.732 8.788,11.240 8.599 C 11.438 8.525,11.522 8.519,12.077 8.538 L 12.694 8.559 12.997 8.730 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/lock-closed.svg b/packages/icons/svg/lock-closed.svg
index febcaafdd8..25e735b075 100644
--- a/packages/icons/svg/lock-closed.svg
+++ b/packages/icons/svg/lock-closed.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.960 2.557 C 10.363 2.613,9.435 2.997,8.660 3.509 C 8.152 3.846,7.352 4.637,7.032 5.120 C 6.594 5.783,6.275 6.545,6.138 7.260 C 6.065 7.644,6.002 8.880,6.001 9.980 L 5.999 10.780 5.676 10.870 C 5.310 10.972,4.782 11.224,4.535 11.415 C 4.297 11.598,3.991 11.970,3.792 12.318 L 3.620 12.619 3.609 16.149 L 3.598 19.679 3.704 19.889 C 4.074 20.621,4.584 21.132,5.309 21.495 L 5.517 21.600 12.000 21.600 L 18.483 21.600 18.691 21.494 C 19.396 21.138,19.941 20.593,20.295 19.891 L 20.400 19.683 20.400 16.200 L 20.400 12.717 20.295 12.509 C 19.826 11.581,19.144 11.030,18.236 10.843 L 18.011 10.797 17.988 9.408 C 17.955 7.487,17.916 7.198,17.563 6.293 C 17.371 5.800,17.197 5.451,16.999 5.160 C 16.664 4.667,15.825 3.829,15.320 3.482 C 14.808 3.130,13.910 2.747,13.303 2.622 C 12.947 2.548,11.488 2.508,10.960 2.557 M13.229 5.088 C 13.881 5.355,14.418 5.761,14.790 6.270 C 15.243 6.889,15.413 7.333,15.477 8.060 C 15.522 8.576,15.599 10.140,15.600 10.550 L 15.600 10.800 12.000 10.800 L 8.400 10.800 8.400 10.530 C 8.400 10.099,8.477 8.582,8.524 8.084 C 8.614 7.125,8.804 6.691,9.411 6.057 C 9.789 5.662,10.188 5.350,10.560 5.158 C 10.888 4.988,11.113 4.961,12.080 4.974 C 12.938 4.986,12.992 4.991,13.229 5.088 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.612 2.620 C 10.113 2.729,9.245 3.126,8.672 3.508 C 8.199 3.824,7.543 4.451,7.134 4.980 C 6.924 5.251,6.606 5.839,6.442 6.260 C 6.104 7.126,6.048 7.545,6.013 9.440 L 5.988 10.781 5.684 10.873 C 4.896 11.112,4.366 11.476,3.971 12.049 C 3.559 12.647,3.600 12.188,3.600 16.180 L 3.600 19.683 3.705 19.891 C 4.059 20.593,4.604 21.138,5.309 21.494 L 5.517 21.600 12.003 21.600 L 18.488 21.600 18.758 21.458 C 19.349 21.148,19.948 20.548,20.259 19.956 L 20.400 19.688 20.400 16.200 L 20.400 12.712 20.260 12.446 C 19.824 11.616,19.112 11.039,18.301 10.859 L 18.000 10.792 17.999 9.946 C 17.999 8.827,17.936 7.635,17.859 7.259 C 17.707 6.524,17.278 5.534,16.885 5.014 C 16.584 4.614,15.657 3.710,15.317 3.486 C 14.687 3.069,13.671 2.668,13.070 2.598 C 12.569 2.541,10.909 2.556,10.612 2.620 M13.197 5.084 C 14.180 5.424,15.084 6.395,15.356 7.402 C 15.462 7.791,15.600 9.590,15.600 10.566 L 15.600 10.800 11.994 10.800 L 8.388 10.800 8.415 10.090 C 8.505 7.757,8.598 7.166,8.968 6.600 C 9.188 6.263,9.827 5.628,10.189 5.388 C 10.774 4.998,10.989 4.955,12.200 4.988 C 12.819 5.004,13.025 5.024,13.197 5.084 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/lock-open.svg b/packages/icons/svg/lock-open.svg
index 332b9f1665..b62a3380fc 100644
--- a/packages/icons/svg/lock-open.svg
+++ b/packages/icons/svg/lock-open.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.586 2.625 C 10.007 2.749,9.079 3.197,8.496 3.632 C 8.037 3.975,7.363 4.652,7.069 5.066 C 6.634 5.679,6.225 6.653,6.122 7.320 C 6.057 7.743,6.003 8.910,6.001 9.920 L 5.999 10.780 5.676 10.870 C 5.310 10.972,4.782 11.224,4.535 11.415 C 4.297 11.598,3.991 11.970,3.792 12.318 L 3.620 12.619 3.609 16.149 L 3.598 19.679 3.704 19.889 C 4.074 20.621,4.584 21.132,5.309 21.495 L 5.517 21.600 12.000 21.600 L 18.482 21.600 18.731 21.475 C 19.412 21.132,19.936 20.608,20.275 19.931 L 20.400 19.682 20.400 16.207 L 20.400 12.731 20.262 12.455 C 20.090 12.113,19.679 11.596,19.395 11.366 C 19.024 11.065,18.852 11.000,18.326 10.959 C 17.716 10.911,14.630 10.849,11.170 10.814 L 8.400 10.787 8.400 10.564 C 8.401 10.191,8.478 8.615,8.523 8.040 C 8.549 7.715,8.598 7.405,8.647 7.260 C 8.974 6.279,9.981 5.308,10.980 5.012 C 11.292 4.919,12.463 4.896,12.840 4.975 C 13.431 5.099,14.362 5.672,14.706 6.123 C 14.797 6.242,14.983 6.538,15.120 6.780 C 15.671 7.752,15.745 7.868,15.943 8.067 C 16.184 8.310,16.386 8.382,16.717 8.343 C 17.151 8.292,17.483 8.065,17.664 7.696 C 17.763 7.494,17.769 7.449,17.751 7.109 C 17.720 6.543,17.462 5.873,17.009 5.180 C 16.775 4.822,15.666 3.710,15.320 3.486 C 14.601 3.021,13.761 2.677,13.161 2.602 C 12.646 2.538,10.921 2.554,10.586 2.625 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.880 2.602 C 10.291 2.649,9.465 2.986,8.717 3.486 C 8.287 3.774,7.472 4.545,7.138 4.981 C 6.709 5.540,6.231 6.645,6.123 7.324 C 6.057 7.734,6.001 8.907,6.000 9.880 L 5.999 10.780 5.690 10.873 C 4.901 11.108,4.367 11.474,3.971 12.049 C 3.559 12.647,3.600 12.188,3.600 16.180 L 3.600 19.683 3.705 19.891 C 4.059 20.593,4.604 21.138,5.309 21.494 L 5.517 21.600 12.000 21.600 L 18.483 21.600 18.691 21.494 C 19.379 21.147,19.870 20.671,20.238 19.994 L 20.399 19.700 20.399 16.203 L 20.400 12.707 20.257 12.446 C 19.832 11.674,19.196 11.096,18.668 11.004 C 18.279 10.937,16.411 10.887,12.240 10.835 C 10.139 10.809,8.413 10.782,8.404 10.774 C 8.383 10.757,8.472 8.774,8.523 8.120 C 8.545 7.845,8.588 7.517,8.620 7.391 C 8.848 6.488,9.837 5.437,10.798 5.077 C 11.246 4.909,12.513 4.879,13.004 5.025 C 13.474 5.165,14.182 5.591,14.540 5.951 C 14.727 6.138,14.897 6.401,15.457 7.367 C 15.776 7.917,15.956 8.131,16.205 8.255 C 16.448 8.376,16.618 8.386,16.922 8.296 C 17.220 8.207,17.445 8.041,17.605 7.792 C 17.736 7.586,17.740 7.570,17.736 7.180 C 17.732 6.862,17.709 6.711,17.621 6.440 C 17.485 6.017,17.167 5.391,16.928 5.073 C 16.640 4.690,15.627 3.704,15.289 3.478 C 14.590 3.010,13.721 2.671,13.046 2.602 C 12.587 2.555,11.467 2.555,10.880 2.602 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/logout-left.svg b/packages/icons/svg/logout-left.svg
index 8665f92a4b..de04f5d850 100644
--- a/packages/icons/svg/logout-left.svg
+++ b/packages/icons/svg/logout-left.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.017 3.837 C 2.788 3.968,2.599 4.167,2.480 4.400 C 2.401 4.555,2.400 4.628,2.400 12.073 L 2.400 19.589 2.696 19.889 C 2.914 20.111,3.041 20.207,3.183 20.255 C 3.441 20.343,3.856 20.338,4.061 20.245 C 4.260 20.155,4.593 19.827,4.668 19.647 C 4.759 19.428,4.798 16.679,4.799 10.234 L 4.800 4.407 4.459 4.088 C 4.082 3.736,4.043 3.720,3.545 3.720 C 3.260 3.721,3.195 3.735,3.017 3.837 M11.559 7.356 C 11.074 7.621,7.834 10.840,7.404 11.484 C 6.977 12.122,7.119 12.357,9.197 14.455 C 11.418 16.698,11.674 16.884,12.291 16.704 C 12.744 16.573,13.091 16.164,13.145 15.698 C 13.194 15.272,12.941 14.888,11.901 13.810 L 11.312 13.200 16.041 13.200 L 20.770 13.200 21.101 12.869 C 21.487 12.484,21.539 12.356,21.511 11.873 C 21.495 11.591,21.481 11.550,21.338 11.363 C 21.253 11.251,21.113 11.111,21.028 11.052 C 20.884 10.952,20.832 10.942,20.307 10.916 C 19.995 10.900,17.859 10.865,15.560 10.838 C 13.261 10.810,11.373 10.783,11.365 10.776 C 11.357 10.769,11.621 10.479,11.952 10.132 C 12.634 9.415,13.029 8.955,13.083 8.812 C 13.103 8.759,13.120 8.569,13.120 8.390 C 13.120 7.982,13.028 7.771,12.765 7.577 C 12.424 7.325,11.818 7.214,11.559 7.356 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.080 3.807 C 2.871 3.913,2.599 4.172,2.493 4.366 C 2.423 4.494,2.420 4.819,2.409 12.044 L 2.398 19.587 2.731 19.907 C 3.090 20.251,3.238 20.320,3.623 20.320 C 3.955 20.320,4.119 20.245,4.404 19.962 C 4.626 19.741,4.672 19.672,4.696 19.520 C 4.760 19.121,4.797 15.717,4.799 10.216 L 4.800 4.413 4.550 4.175 C 4.121 3.766,4.076 3.744,3.641 3.729 C 3.307 3.717,3.238 3.727,3.080 3.807 M11.690 7.321 C 11.619 7.337,11.464 7.424,11.346 7.515 C 10.792 7.943,8.632 10.070,7.809 10.999 C 7.331 11.537,7.224 11.718,7.223 11.984 C 7.222 12.397,7.555 12.801,9.497 14.743 C 11.291 16.538,11.549 16.742,12.020 16.738 C 12.596 16.733,13.131 16.196,13.135 15.620 C 13.138 15.200,12.926 14.889,11.915 13.830 L 11.314 13.200 16.052 13.200 L 20.790 13.200 21.079 12.896 C 21.425 12.531,21.518 12.346,21.519 12.020 C 21.520 11.668,21.457 11.495,21.248 11.271 C 20.952 10.954,20.943 10.952,19.880 10.916 C 19.013 10.886,13.016 10.799,11.890 10.800 C 11.619 10.800,11.400 10.784,11.400 10.763 C 11.400 10.743,11.682 10.424,12.026 10.053 C 12.370 9.683,12.753 9.255,12.876 9.103 L 13.100 8.826 13.100 8.423 C 13.100 7.946,13.038 7.785,12.787 7.600 C 12.487 7.379,11.991 7.253,11.690 7.321 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/logout-right.svg b/packages/icons/svg/logout-right.svg
index c4b5fc7d7a..5212b5eae3 100644
--- a/packages/icons/svg/logout-right.svg
+++ b/packages/icons/svg/logout-right.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.017 3.837 C 2.788 3.968,2.599 4.167,2.480 4.400 C 2.401 4.555,2.400 4.628,2.400 12.073 L 2.400 19.589 2.696 19.889 C 2.914 20.111,3.041 20.207,3.183 20.255 C 3.441 20.343,3.856 20.338,4.061 20.245 C 4.260 20.155,4.593 19.827,4.668 19.647 C 4.759 19.428,4.798 16.679,4.799 10.234 L 4.800 4.407 4.459 4.088 C 4.082 3.736,4.043 3.720,3.545 3.720 C 3.260 3.721,3.195 3.735,3.017 3.837 M16.343 7.359 C 16.163 7.417,15.898 7.705,15.775 7.975 C 15.641 8.271,15.625 8.588,15.731 8.803 C 15.836 9.014,16.245 9.505,16.858 10.157 C 17.157 10.475,17.388 10.747,17.371 10.762 C 17.354 10.778,15.765 10.812,13.840 10.837 C 9.884 10.890,8.129 10.939,7.909 11.002 C 7.707 11.059,7.521 11.229,7.378 11.487 C 7.280 11.666,7.261 11.745,7.260 11.980 C 7.260 12.349,7.356 12.540,7.728 12.911 L 8.017 13.200 12.753 13.200 L 17.490 13.200 16.995 13.712 C 15.718 15.032,15.561 15.286,15.692 15.816 C 15.808 16.286,16.076 16.570,16.528 16.699 C 16.942 16.818,17.226 16.707,17.792 16.207 C 18.285 15.771,20.547 13.508,21.017 12.980 C 21.576 12.352,21.657 12.055,21.408 11.550 C 21.299 11.329,21.101 11.104,20.161 10.134 C 18.839 8.768,17.625 7.602,17.374 7.454 C 17.221 7.365,17.136 7.346,16.827 7.335 C 16.625 7.328,16.407 7.339,16.343 7.359 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.080 3.807 C 2.871 3.913,2.599 4.172,2.493 4.366 C 2.423 4.494,2.420 4.819,2.409 12.044 L 2.398 19.587 2.731 19.907 C 3.090 20.251,3.238 20.320,3.623 20.320 C 3.955 20.320,4.119 20.245,4.404 19.962 C 4.626 19.741,4.672 19.672,4.696 19.520 C 4.760 19.121,4.797 15.717,4.799 10.216 L 4.800 4.413 4.550 4.175 C 4.121 3.766,4.076 3.744,3.641 3.729 C 3.307 3.717,3.238 3.727,3.080 3.807 M16.425 7.348 C 16.306 7.361,16.227 7.409,16.079 7.557 C 15.858 7.778,15.748 7.977,15.687 8.261 C 15.599 8.677,15.741 8.932,16.565 9.835 C 16.793 10.085,17.068 10.391,17.175 10.515 L 17.371 10.739 17.215 10.765 C 17.130 10.779,16.295 10.802,15.360 10.817 C 11.530 10.875,9.066 10.926,8.489 10.959 C 7.816 10.998,7.703 11.036,7.510 11.291 C 7.313 11.550,7.264 11.687,7.266 11.980 C 7.268 12.341,7.361 12.526,7.733 12.910 L 8.014 13.200 12.750 13.200 L 17.486 13.200 16.865 13.850 C 15.855 14.908,15.663 15.180,15.666 15.560 C 15.669 16.018,15.935 16.438,16.340 16.622 C 16.802 16.832,17.092 16.769,17.621 16.345 C 18.018 16.027,20.803 13.246,21.125 12.846 C 21.445 12.450,21.535 12.267,21.533 12.020 C 21.529 11.562,21.263 11.233,19.315 9.279 C 18.158 8.118,17.486 7.498,17.300 7.420 C 17.166 7.363,16.662 7.322,16.425 7.348 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/mail-open.svg b/packages/icons/svg/mail-open.svg
index 4dc09e07a8..3a00881d1f 100644
--- a/packages/icons/svg/mail-open.svg
+++ b/packages/icons/svg/mail-open.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.080 3.088 C 10.404 3.443,7.818 5.021,5.600 6.432 C 3.226 7.942,2.951 8.166,2.580 8.885 L 2.400 9.233 2.400 14.457 L 2.400 19.682 2.525 19.931 C 2.864 20.608,3.388 21.132,4.069 21.475 L 4.318 21.600 12.000 21.600 L 19.682 21.600 19.931 21.475 C 20.613 21.131,21.136 20.608,21.477 19.927 L 21.604 19.675 21.591 14.487 L 21.578 9.300 21.490 9.066 C 21.441 8.937,21.362 8.766,21.313 8.686 C 21.195 8.491,20.713 7.992,20.440 7.781 C 19.775 7.268,16.397 5.135,14.040 3.741 C 12.773 2.991,12.717 2.970,11.920 2.933 L 11.420 2.910 11.080 3.088 M6.633 10.706 C 7.097 10.946,7.754 11.363,10.170 12.953 L 12.001 14.157 13.933 12.884 C 16.317 11.313,16.987 10.885,17.403 10.669 C 17.702 10.513,17.752 10.500,18.034 10.500 C 18.295 10.500,18.367 10.516,18.525 10.608 C 18.738 10.734,18.946 10.957,19.025 11.146 C 19.101 11.327,19.097 11.892,19.019 12.056 C 18.849 12.416,18.300 12.825,15.480 14.699 C 13.288 16.156,12.759 16.492,12.385 16.663 C 11.852 16.907,11.620 16.788,8.320 14.579 C 5.844 12.922,5.213 12.459,5.008 12.148 C 4.911 12.002,4.900 11.950,4.902 11.639 C 4.904 11.344,4.921 11.258,5.015 11.067 C 5.209 10.670,5.557 10.470,6.013 10.493 C 6.201 10.503,6.322 10.545,6.633 10.706 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.760 3.270 C 9.250 4.138,5.891 6.221,4.320 7.263 C 3.181 8.019,2.888 8.295,2.568 8.910 L 2.400 9.232 2.401 14.466 L 2.401 19.700 2.562 19.994 C 2.930 20.671,3.421 21.147,4.109 21.494 L 4.317 21.600 12.000 21.600 L 19.683 21.600 19.891 21.494 C 20.596 21.138,21.141 20.593,21.495 19.891 L 21.600 19.683 21.600 14.522 L 21.600 9.362 21.498 9.091 C 21.442 8.942,21.352 8.753,21.298 8.670 C 21.137 8.426,20.690 7.975,20.373 7.736 C 19.516 7.091,14.466 3.941,13.235 3.284 C 12.761 3.031,12.530 2.972,11.892 2.940 L 11.380 2.914 10.760 3.270 M6.700 10.757 C 7.185 11.009,7.901 11.464,10.358 13.078 L 12.001 14.157 13.824 12.957 C 16.201 11.393,16.902 10.945,17.340 10.713 C 17.688 10.528,17.711 10.522,18.043 10.521 C 18.361 10.520,18.400 10.529,18.575 10.645 C 18.920 10.874,19.075 11.162,19.078 11.580 C 19.081 12.075,18.960 12.257,18.286 12.773 C 17.594 13.302,13.818 15.828,12.845 16.414 C 12.405 16.678,12.111 16.782,11.912 16.745 C 11.529 16.673,10.775 16.222,8.540 14.727 C 5.970 13.007,5.238 12.474,5.028 12.171 C 4.929 12.029,4.920 11.983,4.920 11.638 C 4.921 11.285,4.930 11.244,5.054 11.020 C 5.265 10.640,5.627 10.459,6.080 10.509 C 6.192 10.521,6.426 10.615,6.700 10.757 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/mail.svg b/packages/icons/svg/mail.svg
index d0901b332f..2e07080410 100644
--- a/packages/icons/svg/mail.svg
+++ b/packages/icons/svg/mail.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.320 4.958 L 3.980 4.980 3.765 5.099 C 3.252 5.383,2.714 6.030,2.498 6.621 L 2.384 6.934 2.493 7.017 C 2.687 7.165,4.702 8.201,8.390 10.050 L 12.000 11.860 15.530 10.089 C 19.751 7.972,21.548 7.049,21.572 6.987 C 21.598 6.918,21.491 6.531,21.383 6.300 C 21.208 5.926,20.583 5.294,20.135 5.037 L 19.930 4.920 15.295 4.928 C 12.746 4.933,9.157 4.946,7.320 4.958 M2.452 9.930 C 2.435 9.957,2.415 11.631,2.409 13.649 L 2.398 17.318 2.516 17.549 C 2.843 18.192,3.402 18.741,4.069 19.075 L 4.318 19.200 12.020 19.200 L 19.722 19.200 19.951 19.084 C 20.567 18.773,21.151 18.171,21.494 17.491 L 21.600 17.283 21.600 14.531 C 21.600 13.018,21.588 11.360,21.573 10.846 L 21.547 9.913 21.434 9.935 C 21.287 9.965,20.006 10.584,15.622 12.746 C 13.426 13.828,11.997 14.512,11.955 14.498 C 11.917 14.486,10.116 13.603,7.953 12.535 C 4.132 10.648,2.557 9.880,2.508 9.880 C 2.495 9.880,2.470 9.902,2.452 9.930 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.280 4.958 L 3.980 4.980 3.760 5.108 C 3.279 5.388,2.866 5.854,2.596 6.420 C 2.363 6.909,2.361 6.935,2.560 7.060 C 2.886 7.266,4.973 8.336,8.466 10.087 L 12.001 11.860 15.588 10.060 C 19.468 8.113,21.426 7.109,21.518 7.018 C 21.594 6.943,21.532 6.625,21.379 6.301 C 21.239 6.005,20.645 5.382,20.251 5.119 L 19.953 4.920 16.267 4.928 C 14.239 4.933,10.645 4.946,8.280 4.958 M2.454 9.930 C 2.437 9.957,2.416 11.636,2.409 13.660 L 2.394 17.340 2.583 17.669 C 2.914 18.246,3.486 18.781,4.109 19.095 L 4.317 19.200 12.025 19.200 L 19.733 19.200 19.997 19.056 C 20.566 18.744,21.067 18.237,21.422 17.614 L 21.600 17.302 21.600 14.397 C 21.600 11.030,21.574 9.920,21.495 9.920 C 21.391 9.920,20.405 10.394,15.920 12.599 C 13.271 13.902,12.060 14.480,11.981 14.480 C 11.898 14.480,11.480 14.278,8.000 12.561 C 4.714 10.938,2.544 9.880,2.506 9.880 C 2.494 9.880,2.471 9.902,2.454 9.930 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/map.svg b/packages/icons/svg/map.svg
index d820f24da2..962a034d59 100644
--- a/packages/icons/svg/map.svg
+++ b/packages/icons/svg/map.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.802 9.600 L 16.800 17.301 17.610 18.105 C 18.787 19.273,19.460 19.898,19.772 20.111 C 20.029 20.287,20.066 20.300,20.346 20.314 C 20.556 20.325,20.695 20.310,20.815 20.264 C 21.001 20.193,21.368 19.858,21.465 19.671 C 21.562 19.484,21.597 17.438,21.598 11.864 L 21.600 6.909 21.386 6.644 C 21.091 6.281,19.836 4.969,18.187 3.300 L 16.804 1.900 16.802 9.600 M13.275 3.066 C 12.739 3.587,11.693 4.617,10.950 5.356 L 9.600 6.700 9.600 14.400 L 9.600 22.100 12.004 19.700 L 14.409 17.300 14.384 9.880 C 14.370 5.799,14.347 2.384,14.334 2.290 C 14.320 2.196,14.296 2.120,14.280 2.120 C 14.263 2.120,13.811 2.546,13.275 3.066 M3.040 3.830 C 2.941 3.894,2.756 4.060,2.630 4.200 L 2.400 4.454 2.400 10.761 L 2.400 17.068 2.511 17.233 C 2.667 17.466,3.892 18.754,5.675 20.560 L 7.196 22.100 7.198 14.394 L 7.200 6.689 6.270 5.777 C 5.112 4.643,4.394 3.985,4.161 3.848 C 4.009 3.758,3.927 3.740,3.601 3.728 C 3.237 3.715,3.212 3.719,3.040 3.830 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.802 9.605 L 16.800 17.311 17.810 18.303 C 18.934 19.407,19.517 19.940,19.829 20.150 C 20.004 20.267,20.084 20.294,20.309 20.310 C 20.704 20.338,20.865 20.280,21.173 19.997 C 21.370 19.817,21.450 19.713,21.482 19.594 C 21.560 19.302,21.597 16.847,21.599 11.840 L 21.600 6.900 21.327 6.580 C 20.973 6.164,19.650 4.784,18.067 3.180 L 16.804 1.900 16.802 9.605 M13.217 3.125 C 12.647 3.679,11.600 4.710,10.890 5.416 L 9.600 6.700 9.600 14.400 L 9.600 22.100 12.000 19.700 L 14.400 17.300 14.395 12.860 C 14.387 6.371,14.349 2.213,14.297 2.161 C 14.266 2.130,13.960 2.402,13.217 3.125 M3.124 3.782 C 3.049 3.815,2.855 3.976,2.694 4.140 L 2.400 4.438 2.400 10.765 L 2.400 17.091 2.615 17.356 C 2.888 17.693,4.271 19.137,5.913 20.800 L 7.196 22.100 7.198 14.394 L 7.200 6.688 6.310 5.817 C 5.291 4.821,4.496 4.086,4.252 3.916 C 3.981 3.727,3.407 3.659,3.124 3.782 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/md-library.svg b/packages/icons/svg/md-library.svg
index b71b2fd0a5..6d7c308b68 100644
--- a/packages/icons/svg/md-library.svg
+++ b/packages/icons/svg/md-library.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.580 2.553 C 10.778 2.932,4.170 6.705,3.256 7.306 C 2.570 7.758,2.409 7.983,2.450 8.437 C 2.490 8.875,2.734 9.197,3.266 9.513 L 3.511 9.659 3.535 10.300 C 3.575 11.378,3.612 17.198,3.581 17.590 L 3.552 17.960 3.286 18.087 C 2.917 18.263,2.588 18.597,2.504 18.881 C 2.425 19.146,2.424 19.252,2.500 19.507 C 2.572 19.749,2.773 20.023,2.989 20.172 C 3.130 20.270,3.206 20.288,3.644 20.325 C 4.341 20.384,14.406 20.414,17.880 20.368 C 20.212 20.337,20.724 20.320,20.840 20.271 C 21.019 20.196,21.389 19.794,21.491 19.563 C 21.551 19.429,21.565 19.331,21.549 19.160 C 21.510 18.721,21.219 18.354,20.722 18.115 C 20.470 17.994,20.437 17.965,20.414 17.843 C 20.386 17.693,20.425 12.219,20.466 10.637 L 20.491 9.655 20.715 9.538 C 21.025 9.376,21.451 8.947,21.512 8.735 C 21.581 8.499,21.570 8.205,21.485 8.020 C 21.287 7.587,20.733 7.229,16.740 4.952 C 12.225 2.378,12.087 2.314,11.580 2.553 M7.870 11.103 C 8.263 11.372,8.240 11.203,8.240 13.827 L 8.240 16.114 8.110 16.282 C 8.039 16.375,7.902 16.507,7.806 16.575 C 7.653 16.685,7.594 16.701,7.315 16.714 C 7.141 16.722,6.936 16.717,6.861 16.703 C 6.662 16.665,6.327 16.385,6.236 16.180 C 6.138 15.958,6.093 15.204,6.058 13.160 L 6.032 11.620 6.206 11.417 C 6.302 11.306,6.461 11.147,6.560 11.065 L 6.740 10.914 7.190 10.930 C 7.638 10.945,7.641 10.946,7.870 11.103 M12.545 11.014 C 12.854 11.178,12.987 11.396,13.041 11.830 C 13.076 12.120,13.158 14.733,13.160 15.619 L 13.160 16.017 12.870 16.301 C 12.223 16.934,11.777 16.934,11.130 16.301 L 10.840 16.017 10.841 13.819 L 10.842 11.620 11.031 11.393 C 11.261 11.117,11.382 11.019,11.562 10.964 C 11.754 10.905,12.403 10.938,12.545 11.014 M17.345 11.014 C 17.654 11.178,17.787 11.396,17.841 11.830 C 17.876 12.120,17.958 14.733,17.960 15.619 L 17.960 16.017 17.670 16.301 C 17.023 16.934,16.577 16.934,15.930 16.301 L 15.640 16.017 15.641 13.819 L 15.642 11.620 15.831 11.393 C 16.061 11.117,16.182 11.019,16.362 10.964 C 16.554 10.905,17.203 10.938,17.345 11.014 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.291 2.706 C 9.934 3.417,4.202 6.699,3.320 7.270 C 2.593 7.741,2.412 7.975,2.450 8.398 C 2.491 8.850,2.746 9.199,3.261 9.508 L 3.511 9.658 3.535 10.619 C 3.580 12.374,3.610 17.054,3.581 17.511 L 3.551 17.960 3.273 18.107 C 2.442 18.543,2.224 19.231,2.708 19.891 C 2.930 20.193,3.109 20.275,3.666 20.328 C 4.290 20.387,19.197 20.393,20.170 20.334 L 20.840 20.293 21.026 20.135 C 21.296 19.906,21.515 19.578,21.545 19.356 C 21.605 18.901,21.298 18.426,20.761 18.143 C 20.607 18.062,20.460 17.957,20.434 17.909 C 20.388 17.822,20.405 13.919,20.466 10.917 L 20.492 9.654 20.699 9.546 C 20.960 9.409,21.388 8.992,21.485 8.780 C 21.567 8.602,21.580 8.335,21.519 8.115 C 21.394 7.666,20.770 7.253,16.700 4.932 C 12.886 2.756,12.347 2.480,11.919 2.480 C 11.756 2.480,11.645 2.520,11.291 2.706 M7.870 11.101 C 8.236 11.345,8.218 11.206,8.233 13.821 L 8.245 16.102 8.120 16.261 C 7.815 16.648,7.587 16.744,7.050 16.714 C 6.817 16.701,6.751 16.679,6.585 16.560 C 6.316 16.366,6.213 16.172,6.163 15.760 C 6.123 15.440,6.041 12.916,6.040 12.005 L 6.040 11.590 6.381 11.249 L 6.722 10.908 7.188 10.933 C 7.637 10.957,7.661 10.963,7.870 11.101 M12.421 10.982 C 12.581 11.006,12.823 11.210,12.922 11.404 C 13.036 11.627,13.068 12.067,13.125 14.177 L 13.175 16.015 12.881 16.290 C 12.208 16.920,11.801 16.923,11.129 16.300 L 10.840 16.033 10.840 13.822 L 10.840 11.612 11.084 11.345 C 11.219 11.198,11.367 11.057,11.414 11.031 C 11.592 10.934,11.978 10.915,12.421 10.982 M17.221 10.982 C 17.381 11.006,17.623 11.210,17.722 11.404 C 17.836 11.627,17.868 12.067,17.925 14.177 L 17.975 16.015 17.681 16.290 C 17.008 16.920,16.601 16.923,15.929 16.300 L 15.640 16.033 15.640 13.822 L 15.640 11.612 15.884 11.345 C 16.019 11.198,16.167 11.057,16.214 11.031 C 16.392 10.934,16.778 10.915,17.221 10.982 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/medium.svg b/packages/icons/svg/medium.svg
index 5344ea4dfc..fd626d76bd 100644
--- a/packages/icons/svg/medium.svg
+++ b/packages/icons/svg/medium.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.240 5.173 C 3.240 5.341,3.266 5.377,4.135 6.391 C 4.628 6.965,5.050 7.491,5.073 7.558 C 5.121 7.695,5.149 15.961,5.102 16.037 C 5.087 16.061,4.608 16.614,4.037 17.266 C 3.021 18.427,3.000 18.455,3.000 18.626 L 3.000 18.800 5.640 18.800 L 8.280 18.800 8.280 18.624 C 8.280 18.450,8.262 18.426,7.307 17.331 C 6.716 16.652,6.304 16.145,6.257 16.037 C 6.183 15.867,6.180 15.720,6.172 12.360 C 6.167 10.332,6.179 8.894,6.199 8.940 C 6.218 8.984,7.278 11.216,8.553 13.900 L 10.872 18.780 11.099 18.780 L 11.326 18.780 13.303 13.920 C 14.390 11.247,15.296 9.024,15.317 8.980 C 15.341 8.929,15.356 10.412,15.358 13.020 L 15.362 17.140 14.581 17.909 C 13.823 18.655,13.800 18.682,13.800 18.839 L 13.800 19.000 17.340 19.000 L 20.880 19.000 20.880 18.830 C 20.880 18.662,20.871 18.651,20.159 17.960 L 19.438 17.260 19.439 12.256 C 19.439 9.504,19.429 7.144,19.415 7.013 L 19.390 6.775 20.185 6.060 C 20.966 5.358,20.980 5.343,20.992 5.173 L 21.004 5.000 18.527 5.000 L 16.050 5.000 14.258 9.301 C 13.272 11.667,12.452 13.588,12.435 13.571 C 12.418 13.554,11.506 11.623,10.407 9.280 L 8.411 5.020 5.825 5.010 L 3.240 4.999 3.240 5.173 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.240 5.122 C 3.240 5.314,3.317 5.425,4.031 6.269 C 4.400 6.706,4.791 7.178,4.899 7.319 L 5.096 7.575 5.111 11.798 L 5.127 16.020 4.182 17.100 C 3.122 18.312,3.000 18.474,3.000 18.667 L 3.000 18.800 5.640 18.800 L 8.280 18.800 8.280 18.642 C 8.280 18.459,8.272 18.449,7.268 17.282 C 6.490 16.378,6.284 16.113,6.239 15.958 C 6.192 15.793,6.149 10.458,6.188 9.646 L 6.220 8.992 8.545 13.886 L 10.869 18.780 11.098 18.780 L 11.326 18.780 11.758 17.720 C 11.995 17.137,12.889 14.941,13.745 12.840 L 15.300 9.020 15.325 9.540 C 15.339 9.826,15.353 11.652,15.355 13.599 L 15.360 17.137 14.580 17.921 C 13.849 18.655,13.800 18.714,13.800 18.852 L 13.800 19.000 17.340 19.000 L 20.880 19.000 20.880 18.832 C 20.880 18.668,20.867 18.652,20.160 17.962 L 19.440 17.260 19.438 12.000 L 19.435 6.740 20.192 6.053 C 20.914 5.397,20.998 5.298,20.999 5.090 L 21.000 5.000 18.525 5.000 L 16.051 5.000 14.880 7.810 C 13.352 11.475,12.478 13.520,12.441 13.520 C 12.405 13.520,11.858 12.374,9.901 8.196 L 8.428 5.052 7.444 5.026 C 6.903 5.012,5.736 5.000,4.850 5.000 L 3.240 5.000 3.240 5.122 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/menu-alt-1.svg b/packages/icons/svg/menu-alt-1.svg
index 9a9acd9e4b..f44ff87538 100644
--- a/packages/icons/svg/menu-alt-1.svg
+++ b/packages/icons/svg/menu-alt-1.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.797 4.878 L 4.373 4.900 4.199 5.020 C 3.983 5.170,3.691 5.559,3.656 5.746 C 3.587 6.116,3.731 6.535,4.031 6.835 C 4.192 6.996,4.268 7.040,4.444 7.077 C 4.792 7.148,8.851 7.198,14.416 7.199 L 19.533 7.200 19.744 7.037 C 19.978 6.856,20.106 6.704,20.235 6.450 C 20.480 5.970,20.330 5.484,19.802 5.045 L 19.556 4.840 17.388 4.848 C 16.196 4.852,12.779 4.866,9.797 4.878 M6.940 10.922 C 5.686 10.937,4.565 10.951,4.449 10.954 C 4.261 10.959,4.219 10.978,4.060 11.124 C 3.666 11.487,3.547 12.054,3.776 12.469 C 3.840 12.584,4.013 12.796,4.162 12.939 L 4.432 13.200 7.006 13.197 C 8.422 13.195,10.212 13.181,10.985 13.166 L 12.390 13.138 12.559 13.021 C 12.808 12.848,12.998 12.594,13.084 12.318 C 13.230 11.847,13.154 11.591,12.742 11.170 L 12.457 10.880 10.839 10.888 C 9.948 10.892,8.194 10.908,6.940 10.922 M9.940 16.883 C 4.494 16.917,4.439 16.918,4.214 17.033 C 3.880 17.203,3.667 17.593,3.662 18.040 C 3.660 18.333,3.746 18.496,4.110 18.883 L 4.408 19.200 11.999 19.200 L 19.590 19.200 19.873 18.902 C 20.029 18.737,20.191 18.535,20.234 18.452 C 20.479 17.968,20.305 17.442,19.757 17.005 L 19.550 16.840 17.125 16.847 C 15.791 16.850,12.558 16.867,9.940 16.883 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.938 4.878 C 4.735 4.899,4.370 4.904,4.270 4.970 C 4.095 5.085,3.856 5.354,3.739 5.568 C 3.644 5.744,3.632 5.801,3.650 6.016 C 3.681 6.408,3.932 6.822,4.246 6.999 C 4.392 7.081,4.488 7.094,5.175 7.125 C 5.596 7.145,9.000 7.171,12.740 7.183 L 19.540 7.206 19.767 7.023 C 20.193 6.677,20.412 6.206,20.324 5.822 C 20.265 5.561,20.051 5.252,19.772 5.022 L 19.551 4.840 17.525 4.848 C 16.411 4.852,12.997 4.866,9.938 4.878 M7.044 10.924 C 5.128 10.946,4.315 10.969,4.234 11.003 C 3.952 11.119,3.672 11.615,3.672 11.998 C 3.672 12.320,3.773 12.522,4.123 12.896 L 4.419 13.212 8.364 13.190 C 12.793 13.165,12.408 13.195,12.747 12.855 C 12.989 12.613,13.132 12.293,13.137 11.982 C 13.141 11.673,13.066 11.521,12.732 11.160 L 12.473 10.880 11.106 10.887 C 10.355 10.890,8.527 10.907,7.044 10.924 M10.074 16.885 C 7.354 16.903,4.936 16.933,4.701 16.953 C 4.325 16.984,4.255 17.002,4.107 17.106 C 3.861 17.278,3.675 17.660,3.671 18.002 C 3.666 18.333,3.746 18.491,4.121 18.893 L 4.408 19.200 12.001 19.200 L 19.593 19.200 19.877 18.892 C 20.216 18.525,20.330 18.307,20.334 18.025 C 20.339 17.671,20.148 17.332,19.767 17.018 L 19.551 16.840 17.285 16.847 C 16.039 16.850,12.794 16.868,10.074 16.885 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/menu-alt-2.svg b/packages/icons/svg/menu-alt-2.svg
index 8835eb3b41..d0e75fa76b 100644
--- a/packages/icons/svg/menu-alt-2.svg
+++ b/packages/icons/svg/menu-alt-2.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.797 4.878 L 4.373 4.900 4.199 5.020 C 3.983 5.170,3.691 5.559,3.656 5.746 C 3.587 6.116,3.731 6.535,4.031 6.835 C 4.192 6.996,4.268 7.040,4.444 7.077 C 4.792 7.148,8.851 7.198,14.416 7.199 L 19.533 7.200 19.744 7.037 C 19.978 6.856,20.106 6.704,20.235 6.450 C 20.480 5.970,20.330 5.484,19.802 5.045 L 19.556 4.840 17.388 4.848 C 16.196 4.852,12.779 4.866,9.797 4.878 M9.980 10.883 C 4.479 10.917,4.439 10.918,4.215 11.032 C 3.880 11.203,3.667 11.592,3.662 12.040 C 3.660 12.333,3.746 12.496,4.110 12.883 L 4.408 13.200 11.999 13.200 L 19.590 13.200 19.873 12.902 C 20.029 12.737,20.191 12.535,20.234 12.452 C 20.479 11.968,20.305 11.442,19.757 11.005 L 19.550 10.840 17.145 10.847 C 15.822 10.850,12.598 10.867,9.980 10.883 M6.940 16.922 C 5.686 16.937,4.565 16.951,4.449 16.954 C 4.261 16.959,4.219 16.978,4.060 17.124 C 3.666 17.487,3.547 18.054,3.776 18.469 C 3.840 18.584,4.013 18.796,4.162 18.939 L 4.432 19.200 7.006 19.197 C 8.422 19.195,10.212 19.181,10.985 19.166 L 12.390 19.138 12.559 19.021 C 12.808 18.848,12.998 18.594,13.084 18.318 C 13.230 17.847,13.154 17.591,12.742 17.170 L 12.457 16.880 10.839 16.888 C 9.948 16.892,8.194 16.908,6.940 16.922 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.938 4.878 C 4.735 4.899,4.370 4.904,4.270 4.970 C 4.095 5.085,3.856 5.354,3.739 5.568 C 3.644 5.744,3.632 5.801,3.650 6.016 C 3.681 6.408,3.932 6.822,4.246 6.999 C 4.392 7.081,4.488 7.094,5.175 7.125 C 5.596 7.145,9.000 7.171,12.740 7.183 L 19.540 7.206 19.767 7.023 C 20.193 6.677,20.412 6.206,20.324 5.822 C 20.265 5.561,20.051 5.252,19.772 5.022 L 19.551 4.840 17.525 4.848 C 16.411 4.852,12.997 4.866,9.938 4.878 M10.065 10.885 C 7.317 10.903,4.890 10.933,4.672 10.953 C 4.329 10.984,4.251 11.005,4.107 11.106 C 3.861 11.278,3.675 11.661,3.671 12.002 C 3.666 12.333,3.746 12.491,4.121 12.893 L 4.408 13.200 12.001 13.200 L 19.593 13.200 19.877 12.892 C 20.216 12.525,20.330 12.307,20.334 12.025 C 20.339 11.671,20.148 11.332,19.767 11.018 L 19.551 10.840 17.305 10.847 C 16.070 10.850,12.812 10.868,10.065 10.885 M7.044 16.924 C 5.128 16.946,4.315 16.969,4.234 17.003 C 3.952 17.119,3.672 17.615,3.672 17.998 C 3.672 18.320,3.773 18.522,4.123 18.896 L 4.419 19.212 8.364 19.190 C 12.793 19.165,12.408 19.195,12.747 18.855 C 12.989 18.613,13.132 18.293,13.137 17.982 C 13.141 17.673,13.066 17.521,12.732 17.160 L 12.473 16.880 11.106 16.887 C 10.355 16.890,8.527 16.907,7.044 16.924 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/menu-alt-3.svg b/packages/icons/svg/menu-alt-3.svg
index be1aef8ebb..cd02d1d6a4 100644
--- a/packages/icons/svg/menu-alt-3.svg
+++ b/packages/icons/svg/menu-alt-3.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.797 4.878 L 4.373 4.900 4.199 5.020 C 3.983 5.170,3.691 5.559,3.656 5.746 C 3.587 6.116,3.731 6.535,4.031 6.835 C 4.192 6.996,4.268 7.040,4.444 7.077 C 4.792 7.148,8.851 7.198,14.416 7.199 L 19.533 7.200 19.744 7.037 C 19.978 6.856,20.106 6.704,20.235 6.450 C 20.480 5.970,20.330 5.484,19.802 5.045 L 19.556 4.840 17.388 4.848 C 16.196 4.852,12.779 4.866,9.797 4.878 M9.980 10.883 C 4.479 10.917,4.439 10.918,4.215 11.032 C 3.880 11.203,3.667 11.592,3.662 12.040 C 3.660 12.333,3.746 12.496,4.110 12.883 L 4.408 13.200 11.999 13.200 L 19.590 13.200 19.873 12.902 C 20.029 12.737,20.191 12.535,20.234 12.452 C 20.479 11.968,20.305 11.442,19.757 11.005 L 19.550 10.840 17.145 10.847 C 15.822 10.850,12.598 10.867,9.980 10.883 M14.140 16.922 C 12.886 16.937,11.765 16.951,11.649 16.954 C 11.461 16.959,11.419 16.978,11.260 17.124 C 10.866 17.487,10.747 18.054,10.976 18.469 C 11.040 18.584,11.213 18.796,11.362 18.939 L 11.632 19.200 14.206 19.197 C 15.622 19.195,17.412 19.181,18.185 19.166 L 19.590 19.138 19.759 19.021 C 20.008 18.848,20.198 18.594,20.284 18.318 C 20.430 17.847,20.354 17.591,19.942 17.170 L 19.657 16.880 18.039 16.888 C 17.148 16.892,15.394 16.908,14.140 16.922 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.938 4.878 C 4.735 4.899,4.370 4.904,4.270 4.970 C 4.095 5.085,3.856 5.354,3.739 5.568 C 3.644 5.744,3.632 5.801,3.650 6.016 C 3.681 6.408,3.932 6.822,4.246 6.999 C 4.392 7.081,4.488 7.094,5.175 7.125 C 5.596 7.145,9.000 7.171,12.740 7.183 L 19.540 7.206 19.767 7.023 C 20.193 6.677,20.412 6.206,20.324 5.822 C 20.265 5.561,20.051 5.252,19.772 5.022 L 19.551 4.840 17.525 4.848 C 16.411 4.852,12.997 4.866,9.938 4.878 M10.065 10.885 C 7.317 10.903,4.890 10.933,4.672 10.953 C 4.329 10.984,4.251 11.005,4.107 11.106 C 3.861 11.278,3.675 11.661,3.671 12.002 C 3.666 12.333,3.746 12.491,4.121 12.893 L 4.408 13.200 12.001 13.200 L 19.593 13.200 19.877 12.892 C 20.216 12.525,20.330 12.307,20.334 12.025 C 20.339 11.671,20.148 11.332,19.767 11.018 L 19.551 10.840 17.305 10.847 C 16.070 10.850,12.812 10.868,10.065 10.885 M14.244 16.924 C 12.328 16.946,11.515 16.969,11.434 17.003 C 11.152 17.119,10.872 17.615,10.872 17.998 C 10.872 18.320,10.973 18.522,11.323 18.896 L 11.619 19.212 15.564 19.190 C 19.993 19.165,19.608 19.195,19.947 18.855 C 20.189 18.613,20.332 18.293,20.337 17.982 C 20.341 17.673,20.266 17.521,19.932 17.160 L 19.673 16.880 18.306 16.887 C 17.555 16.890,15.727 16.907,14.244 16.924 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/menu-alt-4.svg b/packages/icons/svg/menu-alt-4.svg
index 78c58532de..3e291ec913 100644
--- a/packages/icons/svg/menu-alt-4.svg
+++ b/packages/icons/svg/menu-alt-4.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.797 7.278 L 4.373 7.300 4.199 7.420 C 3.983 7.570,3.691 7.959,3.656 8.146 C 3.587 8.516,3.731 8.935,4.031 9.235 C 4.192 9.396,4.268 9.440,4.444 9.477 C 4.792 9.548,8.851 9.598,14.416 9.599 L 19.533 9.600 19.744 9.437 C 19.978 9.256,20.106 9.104,20.235 8.850 C 20.480 8.370,20.330 7.884,19.802 7.445 L 19.556 7.240 17.388 7.248 C 16.196 7.252,12.779 7.266,9.797 7.278 M9.980 14.483 C 4.479 14.517,4.439 14.518,4.215 14.632 C 3.880 14.803,3.667 15.192,3.662 15.640 C 3.660 15.933,3.746 16.096,4.110 16.483 L 4.408 16.800 11.999 16.800 L 19.590 16.800 19.873 16.502 C 20.029 16.337,20.191 16.135,20.234 16.052 C 20.479 15.568,20.305 15.042,19.757 14.605 L 19.550 14.440 17.145 14.447 C 15.822 14.450,12.598 14.467,9.980 14.483 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.938 7.278 C 4.735 7.299,4.370 7.304,4.270 7.370 C 4.095 7.485,3.856 7.754,3.739 7.968 C 3.644 8.144,3.632 8.201,3.650 8.416 C 3.681 8.808,3.932 9.222,4.246 9.399 C 4.392 9.481,4.488 9.494,5.175 9.525 C 5.596 9.545,9.000 9.571,12.740 9.583 L 19.540 9.606 19.767 9.423 C 20.193 9.077,20.412 8.606,20.324 8.222 C 20.265 7.961,20.051 7.652,19.772 7.422 L 19.551 7.240 17.525 7.248 C 16.411 7.252,12.997 7.266,9.938 7.278 M10.065 14.485 C 7.317 14.503,4.890 14.533,4.672 14.553 C 4.329 14.584,4.251 14.605,4.107 14.706 C 3.861 14.878,3.675 15.261,3.671 15.602 C 3.666 15.933,3.746 16.091,4.121 16.493 L 4.408 16.800 12.001 16.800 L 19.593 16.800 19.877 16.492 C 20.216 16.125,20.330 15.907,20.334 15.625 C 20.339 15.271,20.148 14.932,19.767 14.618 L 19.551 14.440 17.305 14.447 C 16.070 14.450,12.812 14.468,10.065 14.485 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/menu.svg b/packages/icons/svg/menu.svg
index 31ad38b3a8..e9f93c99a4 100644
--- a/packages/icons/svg/menu.svg
+++ b/packages/icons/svg/menu.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.797 4.878 L 4.373 4.900 4.199 5.020 C 3.983 5.170,3.691 5.559,3.656 5.746 C 3.587 6.116,3.731 6.535,4.031 6.835 C 4.192 6.996,4.268 7.040,4.444 7.077 C 4.792 7.148,8.851 7.198,14.416 7.199 L 19.533 7.200 19.744 7.037 C 19.978 6.856,20.106 6.704,20.235 6.450 C 20.480 5.970,20.330 5.484,19.802 5.045 L 19.556 4.840 17.388 4.848 C 16.196 4.852,12.779 4.866,9.797 4.878 M9.980 10.883 C 4.479 10.917,4.439 10.918,4.215 11.032 C 3.880 11.203,3.667 11.592,3.662 12.040 C 3.660 12.333,3.746 12.496,4.110 12.883 L 4.408 13.200 11.999 13.200 L 19.590 13.200 19.873 12.902 C 20.029 12.737,20.191 12.535,20.234 12.452 C 20.479 11.968,20.305 11.442,19.757 11.005 L 19.550 10.840 17.145 10.847 C 15.822 10.850,12.598 10.867,9.980 10.883 M9.940 16.883 C 4.494 16.917,4.439 16.918,4.214 17.033 C 3.880 17.203,3.667 17.593,3.662 18.040 C 3.660 18.333,3.746 18.496,4.110 18.883 L 4.408 19.200 11.999 19.200 L 19.590 19.200 19.873 18.902 C 20.029 18.737,20.191 18.535,20.234 18.452 C 20.479 17.968,20.305 17.442,19.757 17.005 L 19.550 16.840 17.125 16.847 C 15.791 16.850,12.558 16.867,9.940 16.883 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.938 4.878 C 4.735 4.899,4.370 4.904,4.270 4.970 C 4.095 5.085,3.856 5.354,3.739 5.568 C 3.644 5.744,3.632 5.801,3.650 6.016 C 3.681 6.408,3.932 6.822,4.246 6.999 C 4.392 7.081,4.488 7.094,5.175 7.125 C 5.596 7.145,9.000 7.171,12.740 7.183 L 19.540 7.206 19.767 7.023 C 20.193 6.677,20.412 6.206,20.324 5.822 C 20.265 5.561,20.051 5.252,19.772 5.022 L 19.551 4.840 17.525 4.848 C 16.411 4.852,12.997 4.866,9.938 4.878 M10.065 10.885 C 7.317 10.903,4.890 10.933,4.672 10.953 C 4.329 10.984,4.251 11.005,4.107 11.106 C 3.861 11.278,3.675 11.661,3.671 12.002 C 3.666 12.333,3.746 12.491,4.121 12.893 L 4.408 13.200 12.001 13.200 L 19.593 13.200 19.877 12.892 C 20.216 12.525,20.330 12.307,20.334 12.025 C 20.339 11.671,20.148 11.332,19.767 11.018 L 19.551 10.840 17.305 10.847 C 16.070 10.850,12.812 10.868,10.065 10.885 M10.074 16.885 C 7.354 16.903,4.936 16.933,4.701 16.953 C 4.325 16.984,4.255 17.002,4.107 17.106 C 3.861 17.278,3.675 17.660,3.671 18.002 C 3.666 18.333,3.746 18.491,4.121 18.893 L 4.408 19.200 12.001 19.200 L 19.593 19.200 19.877 18.892 C 20.216 18.525,20.330 18.307,20.334 18.025 C 20.339 17.671,20.148 17.332,19.767 17.018 L 19.551 16.840 17.285 16.847 C 16.039 16.850,12.794 16.868,10.074 16.885 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/microphone.svg b/packages/icons/svg/microphone.svg
index 2343682c8b..b4988aa7f4 100644
--- a/packages/icons/svg/microphone.svg
+++ b/packages/icons/svg/microphone.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.171 1.362 C 10.858 1.403,10.336 1.654,9.924 1.961 C 9.298 2.426,8.911 2.936,8.555 3.761 L 8.400 4.121 8.400 7.235 L 8.400 10.348 8.619 10.795 C 8.931 11.429,9.082 11.650,9.495 12.073 C 9.912 12.500,10.234 12.728,10.778 12.982 L 11.159 13.160 11.789 13.159 C 12.658 13.157,12.897 13.120,13.301 12.926 C 13.750 12.711,14.071 12.488,14.443 12.132 C 14.837 11.756,15.117 11.350,15.386 10.764 L 15.600 10.300 15.600 7.177 L 15.600 4.054 15.296 3.440 C 15.002 2.847,14.980 2.814,14.597 2.437 C 14.141 1.987,13.745 1.708,13.296 1.520 C 13.018 1.404,12.917 1.384,12.460 1.356 C 11.834 1.318,11.502 1.319,11.171 1.362 M4.414 8.521 C 4.244 8.574,3.902 8.888,3.769 9.115 C 3.663 9.295,3.660 9.316,3.663 9.900 C 3.666 10.584,3.752 11.128,3.977 11.906 C 4.398 13.354,5.098 14.504,6.226 15.602 C 6.720 16.082,6.972 16.289,7.486 16.634 C 8.053 17.014,8.358 17.147,10.055 17.757 C 10.360 17.866,10.616 17.963,10.625 17.972 C 10.685 18.032,10.799 19.469,10.800 20.183 L 10.800 20.385 9.230 20.435 C 7.345 20.495,6.899 20.530,6.659 20.636 C 6.303 20.794,6.063 21.182,6.064 21.600 C 6.064 21.923,6.165 22.145,6.453 22.459 C 6.635 22.657,6.686 22.689,6.880 22.726 C 7.022 22.753,8.890 22.775,12.141 22.788 L 17.183 22.807 17.476 22.499 C 17.853 22.102,17.936 21.920,17.911 21.543 C 17.900 21.367,17.861 21.199,17.810 21.099 C 17.725 20.932,17.408 20.610,17.238 20.518 C 17.150 20.470,15.829 20.430,13.464 20.403 L 13.188 20.400 13.213 19.830 C 13.227 19.517,13.251 18.960,13.265 18.594 L 13.292 17.929 13.556 17.858 C 13.976 17.747,15.055 17.370,15.441 17.200 C 16.336 16.806,17.067 16.295,17.842 15.521 C 19.195 14.171,19.825 12.992,20.225 11.060 C 20.351 10.447,20.383 9.501,20.285 9.225 C 20.148 8.836,19.730 8.558,19.238 8.529 C 18.962 8.512,18.916 8.521,18.695 8.633 C 18.404 8.779,18.231 8.966,18.145 9.226 C 18.109 9.333,18.000 9.818,17.902 10.303 C 17.690 11.350,17.585 11.698,17.338 12.178 C 16.441 13.918,15.017 15.039,13.160 15.466 C 12.750 15.561,11.419 15.562,10.898 15.468 C 9.376 15.194,7.978 14.246,7.040 12.852 C 6.537 12.105,6.382 11.688,6.102 10.331 C 5.853 9.124,5.830 9.057,5.602 8.836 C 5.488 8.725,5.335 8.625,5.216 8.584 C 4.973 8.500,4.581 8.469,4.414 8.521 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.210 1.360 C 10.882 1.406,10.313 1.678,9.900 1.987 C 9.321 2.419,8.946 2.904,8.593 3.678 L 8.401 4.100 8.400 7.234 L 8.400 10.369 8.661 10.874 C 8.971 11.476,9.210 11.805,9.621 12.196 C 9.979 12.536,10.353 12.786,10.833 13.009 L 11.180 13.169 11.960 13.150 C 12.611 13.134,12.783 13.117,13.000 13.047 C 13.530 12.874,14.229 12.394,14.656 11.910 C 14.946 11.581,15.133 11.286,15.383 10.769 L 15.600 10.319 15.600 7.175 L 15.600 4.032 15.295 3.435 C 15.016 2.890,14.960 2.809,14.645 2.495 C 14.013 1.865,13.395 1.484,12.878 1.404 C 12.500 1.346,11.499 1.320,11.210 1.360 M4.197 8.654 C 4.019 8.787,3.813 9.019,3.730 9.180 C 3.608 9.417,3.646 10.499,3.802 11.221 C 3.928 11.808,4.246 12.741,4.494 13.252 C 5.248 14.804,6.773 16.358,8.212 17.040 C 8.436 17.147,9.073 17.400,9.627 17.602 L 10.635 17.971 10.657 18.116 C 10.701 18.391,10.756 19.103,10.784 19.750 L 10.812 20.400 10.563 20.400 C 10.074 20.400,7.930 20.482,7.426 20.521 C 6.804 20.568,6.649 20.610,6.434 20.794 C 6.204 20.992,6.081 21.272,6.081 21.600 C 6.082 21.909,6.167 22.122,6.405 22.406 C 6.693 22.750,6.599 22.734,8.520 22.765 C 9.455 22.780,11.789 22.794,13.706 22.796 L 17.192 22.800 17.471 22.502 C 17.791 22.159,17.887 21.983,17.912 21.696 C 17.942 21.340,17.833 21.065,17.547 20.780 C 17.396 20.629,17.253 20.523,17.180 20.508 C 17.114 20.495,16.196 20.463,15.140 20.438 C 14.084 20.412,13.214 20.386,13.207 20.380 C 13.201 20.374,13.217 19.821,13.245 19.151 L 13.295 17.935 13.777 17.791 C 14.888 17.461,15.848 17.049,16.495 16.626 C 17.400 16.035,18.438 14.994,19.057 14.060 C 19.733 13.041,20.215 11.599,20.324 10.277 C 20.398 9.382,20.296 9.021,19.894 8.751 C 19.708 8.627,19.341 8.520,19.102 8.520 C 18.886 8.521,18.564 8.676,18.366 8.874 C 18.173 9.067,18.146 9.149,17.898 10.311 C 17.666 11.397,17.567 11.714,17.295 12.240 C 16.321 14.120,14.503 15.391,12.602 15.521 C 11.926 15.567,11.014 15.512,10.589 15.400 C 9.100 15.008,7.914 14.142,7.001 12.783 C 6.552 12.115,6.383 11.644,6.080 10.220 C 5.865 9.211,5.812 9.052,5.632 8.872 C 5.380 8.620,5.192 8.547,4.760 8.531 C 4.381 8.517,4.380 8.517,4.197 8.654 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/microsoft.svg b/packages/icons/svg/microsoft.svg
index b11e24b6e2..ea4fb4e27c 100644
--- a/packages/icons/svg/microsoft.svg
+++ b/packages/icons/svg/microsoft.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.000 7.080 L 3.000 11.160 7.080 11.160 L 11.160 11.160 11.160 7.080 L 11.160 3.000 7.080 3.000 L 3.000 3.000 3.000 7.080 M12.840 7.080 L 12.840 11.160 16.920 11.160 L 21.000 11.160 21.000 7.080 L 21.000 3.000 16.920 3.000 L 12.840 3.000 12.840 7.080 M3.000 16.920 L 3.000 21.000 7.080 21.000 L 11.160 21.000 11.160 16.920 L 11.160 12.840 7.080 12.840 L 3.000 12.840 3.000 16.920 M12.840 16.920 L 12.840 21.000 16.920 21.000 L 21.000 21.000 21.000 16.920 L 21.000 12.840 16.920 12.840 L 12.840 12.840 12.840 16.920 " stroke="none" fill="black" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.000 7.080 L 3.000 11.160 7.080 11.160 L 11.160 11.160 11.160 7.080 L 11.160 3.000 7.080 3.000 L 3.000 3.000 3.000 7.080 M12.840 7.080 L 12.840 11.160 16.920 11.160 L 21.000 11.160 21.000 7.080 L 21.000 3.000 16.920 3.000 L 12.840 3.000 12.840 7.080 M3.000 16.920 L 3.000 21.000 7.080 21.000 L 11.160 21.000 11.160 16.920 L 11.160 12.840 7.080 12.840 L 3.000 12.840 3.000 16.920 M12.840 16.920 L 12.840 21.000 16.920 21.000 L 21.000 21.000 21.000 16.920 L 21.000 12.840 16.920 12.840 L 12.840 12.840 12.840 16.920 " stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/microsoft_edge.svg b/packages/icons/svg/microsoft_edge.svg
index e8164d4d12..bc9f158611 100644
--- a/packages/icons/svg/microsoft_edge.svg
+++ b/packages/icons/svg/microsoft_edge.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.000 3.044 C 8.255 3.323,5.802 4.924,4.333 7.393 C 4.097 7.790,3.735 8.549,3.767 8.580 C 3.775 8.588,3.907 8.514,4.061 8.414 C 4.760 7.961,5.778 7.561,6.649 7.396 C 7.228 7.286,8.429 7.248,9.037 7.320 C 10.546 7.498,11.892 8.114,12.909 9.094 C 13.777 9.930,14.243 10.911,14.251 11.920 C 14.256 12.513,14.100 13.003,13.781 13.402 C 13.314 13.987,13.548 14.454,14.460 14.755 C 15.080 14.959,15.516 15.015,16.500 15.018 C 17.299 15.020,17.413 15.011,17.740 14.926 C 18.601 14.701,19.102 14.418,19.700 13.820 C 20.171 13.349,20.358 13.074,20.610 12.480 C 21.085 11.362,21.124 9.988,20.715 8.745 C 20.588 8.358,20.205 7.565,19.921 7.100 C 18.632 4.991,16.299 3.529,13.572 3.120 C 12.928 3.023,11.591 2.984,11.000 3.044 M7.280 8.444 C 5.292 8.669,3.775 9.677,3.242 11.128 C 3.055 11.639,3.023 11.840,3.022 12.500 C 3.021 13.207,3.050 13.380,3.319 14.320 C 3.536 15.078,3.722 15.568,4.013 16.140 C 4.895 17.879,6.322 19.300,8.063 20.171 C 8.765 20.523,9.598 20.807,10.260 20.921 C 10.392 20.944,10.554 20.973,10.620 20.986 C 10.716 21.004,10.672 20.958,10.400 20.755 C 8.746 19.521,7.715 17.341,7.811 15.280 C 7.896 13.481,8.879 11.518,10.199 10.514 C 10.498 10.287,11.273 9.894,11.480 9.864 C 11.899 9.803,11.920 9.797,11.920 9.722 C 11.920 9.578,10.958 9.012,10.330 8.786 C 9.406 8.454,8.294 8.330,7.280 8.444 M9.611 12.970 C 8.812 14.380,8.710 15.936,9.316 17.484 C 9.914 19.013,11.149 20.207,12.500 20.564 C 12.960 20.685,13.710 20.710,14.246 20.622 C 15.360 20.439,16.637 19.831,17.787 18.935 C 18.359 18.490,19.435 17.292,19.586 16.931 C 19.662 16.749,19.653 16.584,19.561 16.501 C 19.464 16.413,19.404 16.426,18.931 16.636 C 18.162 16.975,17.231 17.185,16.300 17.227 C 14.811 17.294,13.213 16.842,12.037 16.020 C 11.609 15.721,10.832 14.946,10.588 14.575 C 10.226 14.025,9.928 13.325,9.859 12.864 C 9.843 12.763,9.819 12.680,9.803 12.680 C 9.788 12.680,9.702 12.810,9.611 12.970 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.570 3.103 C 8.589 3.421,6.821 4.388,5.421 5.920 C 4.990 6.392,4.506 7.071,4.181 7.658 C 4.009 7.969,3.757 8.531,3.780 8.553 C 3.788 8.561,3.984 8.460,4.214 8.327 C 5.327 7.687,6.284 7.395,7.536 7.312 C 9.282 7.197,10.742 7.549,12.024 8.396 C 13.443 9.334,14.242 10.616,14.239 11.954 C 14.238 12.536,14.106 12.941,13.750 13.445 C 13.396 13.948,13.541 14.354,14.179 14.642 C 14.786 14.916,15.379 15.010,16.540 15.013 C 17.266 15.015,17.466 15.003,17.680 14.944 C 18.665 14.674,19.108 14.413,19.800 13.694 C 20.133 13.348,20.259 13.183,20.408 12.897 C 20.826 12.097,21.028 11.185,20.988 10.280 C 20.950 9.420,20.771 8.766,20.327 7.860 C 19.096 5.347,16.803 3.703,13.760 3.153 C 13.143 3.041,11.148 3.010,10.570 3.103 M7.197 8.460 C 6.400 8.557,5.592 8.815,4.981 9.170 C 3.594 9.975,2.911 11.254,3.022 12.840 C 3.055 13.320,3.119 13.628,3.339 14.384 C 3.835 16.079,4.568 17.331,5.758 18.511 C 6.992 19.735,8.628 20.611,10.260 20.920 C 10.392 20.945,10.532 20.974,10.570 20.985 C 10.707 21.024,10.636 20.936,10.365 20.730 C 9.930 20.398,9.281 19.698,8.965 19.220 C 7.939 17.666,7.586 15.916,7.960 14.240 C 8.275 12.831,9.044 11.500,10.029 10.659 C 10.405 10.338,11.171 9.938,11.569 9.856 C 11.903 9.786,11.956 9.752,11.876 9.655 C 11.785 9.543,11.270 9.222,10.871 9.027 C 9.805 8.506,8.490 8.303,7.197 8.460 M9.678 12.850 C 9.414 13.274,9.136 13.990,9.013 14.561 C 8.917 15.011,8.916 15.959,9.012 16.443 C 9.345 18.126,10.443 19.636,11.817 20.300 C 12.417 20.591,12.741 20.657,13.540 20.655 C 14.172 20.654,14.253 20.645,14.682 20.530 C 15.655 20.268,16.503 19.853,17.500 19.148 C 18.135 18.700,19.272 17.505,19.550 16.993 C 19.662 16.787,19.665 16.625,19.558 16.518 C 19.462 16.422,19.476 16.419,18.820 16.678 C 18.281 16.892,17.732 17.044,17.140 17.146 C 16.588 17.241,15.403 17.241,14.880 17.146 C 14.046 16.995,13.100 16.664,12.500 16.313 C 11.588 15.779,10.675 14.833,10.248 13.978 C 10.110 13.702,9.897 13.092,9.861 12.870 C 9.831 12.686,9.783 12.681,9.678 12.850 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/minus-circle.svg b/packages/icons/svg/minus-circle.svg
index 3cc1476aee..9b75b067f5 100644
--- a/packages/icons/svg/minus-circle.svg
+++ b/packages/icons/svg/minus-circle.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M16.243 11.063 C 16.594 11.349,16.660 11.506,16.660 12.047 L 16.660 12.434 16.496 12.666 C 16.406 12.793,16.251 12.953,16.152 13.022 L 15.970 13.147 14.579 13.173 C 13.813 13.188,12.033 13.200,10.623 13.200 L 8.059 13.200 7.871 13.045 C 7.469 12.713,7.322 12.443,7.321 12.035 C 7.320 11.740,7.382 11.525,7.538 11.291 C 7.677 11.080,7.898 10.963,8.208 10.935 C 8.494 10.909,12.233 10.856,14.476 10.847 L 15.971 10.840 16.243 11.063 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M16.295 11.130 C 16.629 11.460,16.640 11.492,16.640 12.081 L 16.640 12.473 16.483 12.671 C 16.397 12.780,16.243 12.938,16.141 13.021 L 15.955 13.174 11.998 13.192 L 8.042 13.211 7.744 12.913 C 7.491 12.660,7.437 12.581,7.378 12.380 C 7.260 11.973,7.357 11.489,7.615 11.206 C 7.766 11.040,7.984 10.957,8.333 10.934 C 8.701 10.909,12.496 10.857,14.611 10.847 L 16.002 10.840 16.295 11.130 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/minus-sm.svg b/packages/icons/svg/minus-sm.svg
index 81f4c26cd2..3fa7c24ea7 100644
--- a/packages/icons/svg/minus-sm.svg
+++ b/packages/icons/svg/minus-sm.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.480 10.883 C 8.191 10.902,6.946 10.927,6.801 10.956 C 6.553 11.007,6.346 11.178,6.169 11.476 C 6.082 11.624,6.065 11.700,6.066 11.956 C 6.066 12.358,6.131 12.534,6.372 12.789 C 6.694 13.130,6.666 13.125,8.920 13.162 C 9.987 13.179,12.271 13.195,13.996 13.196 L 17.133 13.200 17.344 13.037 C 17.688 12.771,17.906 12.426,17.947 12.083 C 17.988 11.735,17.799 11.376,17.402 11.045 L 17.156 10.840 15.548 10.847 C 14.664 10.851,12.383 10.867,10.480 10.883 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.880 10.882 C 9.065 10.898,7.393 10.923,7.165 10.937 C 6.693 10.967,6.526 11.032,6.321 11.265 C 6.135 11.477,6.080 11.636,6.080 11.964 C 6.080 12.375,6.141 12.534,6.398 12.802 C 6.588 12.999,6.651 13.039,6.840 13.079 C 7.159 13.147,10.043 13.196,13.856 13.198 L 17.133 13.200 17.343 13.038 C 17.689 12.771,17.964 12.291,17.958 11.964 C 17.953 11.678,17.739 11.330,17.389 11.037 L 17.153 10.840 15.667 10.847 C 14.849 10.850,12.695 10.866,10.880 10.882 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/minus.svg b/packages/icons/svg/minus.svg
index 5553c12abe..a83de58655 100644
--- a/packages/icons/svg/minus.svg
+++ b/packages/icons/svg/minus.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.797 10.878 L 4.373 10.900 4.199 11.020 C 3.983 11.170,3.691 11.559,3.656 11.746 C 3.587 12.116,3.731 12.535,4.031 12.835 C 4.192 12.996,4.268 13.040,4.444 13.077 C 4.792 13.148,8.851 13.198,14.416 13.199 L 19.533 13.200 19.744 13.037 C 19.978 12.856,20.106 12.704,20.235 12.450 C 20.480 11.970,20.330 11.484,19.802 11.045 L 19.556 10.840 17.388 10.848 C 16.196 10.852,12.779 10.866,9.797 10.878 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.938 10.878 C 4.735 10.899,4.370 10.904,4.270 10.970 C 4.095 11.085,3.856 11.354,3.739 11.568 C 3.644 11.744,3.632 11.801,3.650 12.016 C 3.681 12.408,3.932 12.822,4.246 12.999 C 4.392 13.081,4.488 13.094,5.175 13.125 C 5.596 13.145,9.000 13.171,12.740 13.183 L 19.540 13.206 19.767 13.023 C 20.193 12.677,20.412 12.206,20.324 11.822 C 20.265 11.561,20.051 11.252,19.772 11.022 L 19.551 10.840 17.525 10.848 C 16.411 10.852,12.997 10.866,9.938 10.878 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/moon.svg b/packages/icons/svg/moon.svg
index 42a30e0fa5..cfeb269f19 100644
--- a/packages/icons/svg/moon.svg
+++ b/packages/icons/svg/moon.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.400 3.625 C 5.846 4.569,4.866 5.460,4.063 6.660 C 3.277 7.834,2.652 9.502,2.482 10.879 C 2.431 11.293,2.429 12.324,2.479 13.000 C 2.547 13.925,2.959 15.289,3.483 16.320 C 3.984 17.309,4.426 17.900,5.352 18.824 C 6.163 19.633,6.820 20.102,7.820 20.585 C 8.659 20.990,9.912 21.383,10.660 21.475 C 11.554 21.586,13.109 21.558,13.780 21.420 C 14.627 21.246,16.218 20.620,16.984 20.161 C 17.893 19.615,18.736 18.849,19.581 17.800 C 20.055 17.212,20.736 16.123,20.671 16.058 C 20.656 16.043,20.398 16.106,20.097 16.199 C 18.803 16.600,18.144 16.717,17.012 16.748 C 16.013 16.776,15.516 16.726,14.660 16.512 C 12.808 16.050,11.374 15.254,10.098 13.981 C 9.335 13.219,8.806 12.483,8.260 11.419 C 7.538 10.012,7.344 9.101,7.345 7.120 C 7.345 5.690,7.383 5.399,7.721 4.197 C 7.852 3.729,7.960 3.341,7.960 3.333 C 7.960 3.294,7.855 3.349,7.400 3.625 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.460 3.592 C 6.796 4.001,6.323 4.328,5.890 4.676 C 5.457 5.026,4.716 5.771,4.434 6.140 C 3.553 7.296,2.876 8.825,2.557 10.380 C 2.452 10.892,2.410 12.236,2.476 12.960 C 2.605 14.360,3.221 16.061,4.039 17.278 C 4.725 18.299,6.028 19.557,7.020 20.157 C 8.031 20.769,9.635 21.344,10.727 21.486 C 11.205 21.549,12.866 21.548,13.360 21.486 C 14.301 21.366,15.991 20.744,16.992 20.149 C 17.787 19.676,18.672 18.891,19.415 18.000 C 19.783 17.559,20.342 16.747,20.558 16.340 C 20.682 16.106,20.683 16.100,20.601 16.087 C 20.554 16.080,20.243 16.156,19.908 16.255 C 18.699 16.616,18.151 16.708,17.000 16.746 C 15.838 16.784,15.086 16.674,13.922 16.297 C 12.252 15.755,10.961 14.928,9.779 13.640 C 9.146 12.951,8.673 12.237,8.161 11.196 C 7.483 9.817,7.334 8.978,7.371 6.749 C 7.394 5.389,7.401 5.341,7.759 4.062 C 7.870 3.667,7.960 3.339,7.960 3.332 C 7.960 3.295,7.857 3.348,7.460 3.592 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/ms_yammer.svg b/packages/icons/svg/ms_yammer.svg
index 99699fdbca..8cbaa89e5e 100644
--- a/packages/icons/svg/ms_yammer.svg
+++ b/packages/icons/svg/ms_yammer.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.004 4.403 L 10.954 6.480 7.907 6.481 C 5.446 6.481,4.809 6.492,4.595 6.538 C 3.828 6.700,3.238 7.285,3.058 8.062 C 3.006 8.287,2.999 8.809,3.009 11.832 L 3.020 15.340 3.110 15.577 C 3.357 16.227,3.865 16.693,4.508 16.860 C 4.700 16.910,5.169 16.920,7.402 16.920 L 10.067 16.920 12.554 19.280 C 13.922 20.578,15.055 21.640,15.071 21.640 C 15.124 21.640,16.094 20.747,16.462 20.360 C 17.466 19.303,18.372 17.921,18.843 16.730 C 18.911 16.559,18.979 16.406,18.996 16.389 C 19.019 16.365,20.951 16.858,21.180 16.945 C 21.208 16.956,21.289 16.761,21.394 16.425 C 22.290 13.562,22.297 10.499,21.412 7.640 C 21.314 7.321,21.227 7.054,21.220 7.047 C 21.213 7.040,20.707 7.189,20.096 7.378 C 19.484 7.568,18.965 7.715,18.941 7.706 C 18.918 7.697,18.837 7.539,18.763 7.355 C 18.276 6.155,17.453 4.825,16.573 3.819 C 16.268 3.470,15.361 2.565,15.157 2.405 L 15.054 2.325 13.004 4.403 M15.506 4.110 C 16.357 5.039,16.988 5.940,17.498 6.956 C 17.726 7.411,17.972 8.002,17.944 8.029 C 17.932 8.041,16.954 8.351,15.771 8.718 C 14.588 9.086,13.580 9.399,13.530 9.416 L 13.440 9.445 13.440 8.832 C 13.440 8.145,13.380 7.838,13.179 7.495 C 13.009 7.204,12.708 6.906,12.438 6.762 L 12.199 6.635 13.627 5.177 C 14.412 4.376,15.076 3.720,15.102 3.720 C 15.128 3.720,15.310 3.896,15.506 4.110 M20.713 8.830 C 20.990 10.032,21.059 10.665,21.059 12.000 C 21.059 13.067,21.023 13.548,20.882 14.360 C 20.796 14.853,20.602 15.689,20.565 15.725 C 20.541 15.749,19.769 15.539,18.940 15.284 C 18.720 15.216,18.477 15.153,18.400 15.143 C 18.323 15.133,17.175 14.832,15.850 14.473 L 13.439 13.821 13.450 12.144 L 13.460 10.467 16.960 9.378 C 18.885 8.779,20.488 8.287,20.523 8.285 C 20.572 8.281,20.614 8.402,20.713 8.830 M7.420 9.970 C 8.072 11.073,8.105 11.120,8.221 11.120 C 8.337 11.120,8.370 11.073,9.022 9.970 L 9.701 8.820 10.411 8.809 C 10.801 8.803,11.120 8.805,11.120 8.814 C 11.120 8.822,10.616 9.673,10.000 10.704 L 8.880 12.579 8.880 13.590 L 8.880 14.600 8.220 14.600 L 7.560 14.600 7.560 13.586 L 7.560 12.572 6.477 10.756 C 5.881 9.757,5.376 8.908,5.355 8.869 C 5.318 8.802,5.357 8.799,6.028 8.809 L 6.739 8.820 7.420 9.970 M15.860 15.501 C 17.048 15.823,18.024 16.091,18.030 16.096 C 18.049 16.116,17.722 16.848,17.550 17.172 C 17.290 17.661,16.921 18.234,16.544 18.735 C 16.210 19.179,15.512 19.957,15.233 20.196 L 15.087 20.322 13.303 18.631 C 11.699 17.110,11.531 16.939,11.630 16.928 C 12.049 16.883,12.551 16.640,12.856 16.336 C 13.197 15.995,13.440 15.445,13.440 15.015 L 13.440 14.846 13.570 14.881 C 13.642 14.900,14.672 15.179,15.860 15.501 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.006 4.398 L 10.960 6.473 7.810 6.490 C 4.934 6.505,4.641 6.512,4.440 6.577 C 3.805 6.781,3.356 7.216,3.111 7.863 L 3.021 8.100 3.008 11.660 C 2.999 14.290,3.007 15.262,3.042 15.380 C 3.114 15.626,3.309 15.998,3.469 16.194 C 3.669 16.438,4.030 16.694,4.329 16.805 L 4.580 16.898 7.325 16.911 L 10.070 16.924 11.407 18.192 C 12.492 19.221,14.019 20.662,14.928 21.514 L 15.077 21.653 15.348 21.416 C 15.851 20.977,16.569 20.262,16.889 19.880 C 17.742 18.863,18.446 17.726,18.863 16.690 C 18.941 16.497,19.002 16.400,19.045 16.400 C 19.115 16.400,20.692 16.796,21.011 16.894 L 21.202 16.953 21.258 16.820 C 21.452 16.355,21.765 15.084,21.897 14.228 C 22.194 12.295,22.105 10.325,21.638 8.472 C 21.531 8.049,21.248 7.074,21.224 7.051 C 21.219 7.046,20.705 7.195,20.082 7.382 C 19.458 7.569,18.943 7.716,18.937 7.710 C 18.930 7.704,18.798 7.421,18.643 7.081 C 18.161 6.027,17.588 5.083,16.911 4.230 C 16.591 3.826,15.477 2.661,15.196 2.438 L 15.053 2.323 13.006 4.398 M15.490 4.093 C 16.217 4.892,16.824 5.731,17.317 6.620 C 17.567 7.070,17.920 7.862,17.920 7.972 C 17.920 8.045,17.727 8.111,15.340 8.853 C 14.394 9.147,13.580 9.401,13.530 9.417 L 13.440 9.445 13.440 8.913 C 13.439 8.241,13.390 7.926,13.235 7.607 C 13.085 7.298,12.741 6.938,12.428 6.761 L 12.196 6.630 13.102 5.705 C 14.447 4.332,15.080 3.723,15.140 3.745 C 15.168 3.756,15.326 3.913,15.490 4.093 M20.615 8.470 C 20.699 8.732,20.862 9.495,20.943 10.000 C 21.032 10.561,21.069 12.801,21.001 13.471 C 20.911 14.351,20.637 15.668,20.535 15.707 C 20.504 15.719,20.087 15.617,19.609 15.480 C 19.131 15.343,18.497 15.170,18.200 15.095 C 17.903 15.020,16.710 14.704,15.550 14.392 L 13.440 13.824 13.440 12.762 C 13.440 12.178,13.452 11.420,13.466 11.078 L 13.492 10.457 14.956 10.001 C 17.656 9.161,20.500 8.283,20.527 8.281 C 20.542 8.281,20.581 8.365,20.615 8.470 M6.511 8.825 L 6.753 8.851 7.380 9.901 C 7.724 10.479,8.048 10.991,8.100 11.040 C 8.284 11.213,8.316 11.174,9.175 9.713 L 9.685 8.847 10.013 8.821 C 10.193 8.806,10.515 8.800,10.730 8.807 L 11.120 8.820 10.000 10.699 L 8.880 12.578 8.880 13.589 L 8.880 14.600 8.220 14.600 L 7.560 14.600 7.560 13.585 L 7.560 12.570 6.460 10.724 C 5.855 9.708,5.360 8.860,5.360 8.839 C 5.360 8.795,6.132 8.786,6.511 8.825 M16.167 15.586 L 18.034 16.093 17.955 16.297 C 17.776 16.759,17.358 17.533,16.995 18.079 C 16.501 18.820,16.180 19.218,15.577 19.836 L 15.094 20.333 13.517 18.833 C 12.650 18.008,11.860 17.246,11.762 17.139 L 11.585 16.945 11.817 16.893 C 12.714 16.689,13.437 15.852,13.440 15.013 L 13.440 14.846 13.870 14.963 C 14.107 15.026,15.140 15.307,16.167 15.586 " stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/msg91.svg b/packages/icons/svg/msg91.svg
new file mode 100644
index 0000000000..b662fbf3a2
--- /dev/null
+++ b/packages/icons/svg/msg91.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.880 3.464 C 19.781 3.500,15.863 4.840,11.174 6.441 C 6.485 8.043,2.594 9.382,2.528 9.416 C 2.362 9.501,2.186 9.686,2.096 9.867 C 2.023 10.014,2.020 10.187,2.009 14.198 C 2.000 17.989,2.005 18.394,2.065 18.574 C 2.151 18.835,2.405 19.089,2.664 19.174 C 2.826 19.227,4.381 19.302,11.600 19.603 C 19.782 19.944,20.353 19.963,20.540 19.905 C 20.806 19.821,21.010 19.646,21.136 19.392 L 21.240 19.184 21.240 11.682 L 21.239 4.180 21.145 3.978 C 21.049 3.772,20.886 3.607,20.667 3.493 C 20.487 3.400,20.097 3.386,19.880 3.464 M17.961 7.541 C 18.194 7.661,18.279 8.048,18.118 8.253 C 18.073 8.310,16.443 9.691,14.495 11.323 C 11.358 13.949,10.940 14.286,10.846 14.267 C 10.788 14.255,9.156 13.766,7.220 13.182 C 3.829 12.157,3.695 12.113,3.570 11.980 C 3.467 11.870,3.440 11.807,3.440 11.677 C 3.440 11.586,3.471 11.460,3.508 11.397 C 3.580 11.275,3.777 11.160,3.913 11.160 C 3.957 11.160,5.480 11.609,7.296 12.158 C 9.113 12.707,10.626 13.162,10.657 13.168 C 10.689 13.175,12.221 11.920,14.061 10.380 C 15.901 8.840,17.445 7.558,17.493 7.531 C 17.613 7.464,17.821 7.468,17.961 7.541 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/music-note.svg b/packages/icons/svg/music-note.svg
index caa17619a7..6a854661e1 100644
--- a/packages/icons/svg/music-note.svg
+++ b/packages/icons/svg/music-note.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.720 2.561 C 19.421 2.594,11.899 4.095,9.703 4.560 C 7.963 4.928,7.665 5.042,7.344 5.463 L 7.200 5.652 7.200 11.286 L 7.200 16.920 6.570 16.922 C 6.224 16.924,5.679 16.940,5.360 16.958 C 4.843 16.987,4.738 17.006,4.386 17.133 C 3.481 17.460,2.763 18.070,2.516 18.721 C 2.348 19.162,2.458 19.714,2.810 20.208 C 3.199 20.753,3.913 21.181,4.839 21.425 C 5.606 21.627,6.748 21.588,7.509 21.334 C 8.485 21.008,9.266 20.366,9.445 19.743 C 9.508 19.522,9.559 18.072,9.619 14.800 C 9.682 11.322,9.708 10.253,9.744 9.735 L 9.766 9.410 10.533 9.243 C 12.040 8.915,17.833 7.773,18.968 7.581 C 19.068 7.564,19.077 7.574,19.097 7.731 C 19.118 7.900,19.201 12.879,19.200 13.945 L 19.200 14.509 18.210 14.537 C 16.963 14.572,16.624 14.611,16.256 14.764 C 15.590 15.041,14.831 15.680,14.586 16.168 C 14.290 16.761,14.484 17.526,15.080 18.120 C 15.786 18.823,17.313 19.299,18.426 19.164 C 19.232 19.066,20.024 18.778,20.579 18.383 C 20.908 18.147,21.315 17.704,21.473 17.407 L 21.600 17.169 21.600 10.191 L 21.600 3.214 21.290 2.912 C 21.092 2.720,20.937 2.602,20.860 2.587 C 20.628 2.542,20.017 2.528,19.720 2.561 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.320 2.629 C 19.155 2.662,17.409 3.010,15.440 3.401 C 7.844 4.913,7.779 4.929,7.372 5.431 L 7.200 5.643 7.200 11.281 L 7.200 16.920 6.690 16.921 C 6.410 16.921,5.869 16.939,5.490 16.960 C 4.927 16.991,4.744 17.017,4.498 17.099 C 3.525 17.426,2.754 18.066,2.516 18.742 C 2.318 19.306,2.542 19.984,3.101 20.516 C 4.347 21.699,6.746 21.906,8.312 20.965 C 8.886 20.620,9.249 20.247,9.401 19.846 C 9.498 19.591,9.543 18.698,9.600 15.880 C 9.684 11.724,9.721 10.171,9.745 9.795 L 9.771 9.410 10.355 9.282 C 12.117 8.898,18.753 7.600,18.955 7.600 C 19.068 7.600,19.070 7.605,19.094 7.870 C 19.123 8.192,19.220 14.475,19.196 14.495 C 19.187 14.502,18.658 14.529,18.020 14.554 C 16.832 14.600,16.561 14.637,16.180 14.800 C 15.632 15.035,14.801 15.738,14.608 16.129 C 14.388 16.576,14.399 17.017,14.643 17.513 C 14.779 17.787,15.157 18.219,15.423 18.402 C 16.261 18.979,17.580 19.293,18.540 19.146 C 19.905 18.936,20.900 18.346,21.461 17.416 L 21.600 17.185 21.600 10.197 L 21.600 3.210 21.315 2.941 C 21.158 2.793,20.969 2.646,20.896 2.616 C 20.715 2.540,19.722 2.548,19.320 2.629 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/newspaper.svg b/packages/icons/svg/newspaper.svg
index aa4f204194..3825f5654b 100644
--- a/packages/icons/svg/newspaper.svg
+++ b/packages/icons/svg/newspaper.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.200 3.759 C 3.912 3.801,3.865 3.821,3.580 4.021 C 3.146 4.327,2.780 4.767,2.505 5.309 L 2.400 5.517 2.400 12.010 L 2.400 18.503 2.605 18.862 C 2.963 19.490,3.298 19.835,3.913 20.207 L 4.245 20.409 11.273 20.393 C 16.076 20.383,18.323 20.365,18.372 20.336 C 18.436 20.299,18.412 20.273,18.187 20.128 C 17.850 19.910,17.296 19.350,17.116 19.045 L 16.973 18.803 16.946 17.992 C 16.932 17.545,16.893 15.101,16.860 12.560 C 16.797 7.742,16.747 5.757,16.679 5.422 C 16.657 5.312,16.601 5.150,16.555 5.062 C 16.337 4.643,15.800 4.106,15.350 3.856 L 15.140 3.740 9.780 3.733 C 6.832 3.730,4.321 3.741,4.200 3.759 M13.200 9.600 L 13.200 12.000 9.600 12.000 L 6.000 12.000 6.000 9.600 L 6.000 7.200 9.600 7.200 L 13.200 7.200 13.200 9.600 M18.006 13.085 L 18.020 17.780 18.159 18.040 C 18.341 18.381,18.788 18.833,19.100 18.990 C 19.443 19.162,19.751 19.219,20.013 19.158 C 20.576 19.027,21.157 18.559,21.422 18.023 L 21.569 17.727 21.590 14.034 L 21.612 10.340 21.500 10.120 C 21.118 9.364,20.587 8.835,20.013 8.637 C 19.756 8.549,19.119 8.460,18.446 8.419 L 17.993 8.391 18.006 13.085 M13.200 15.600 L 13.200 16.800 9.600 16.800 L 6.000 16.800 6.000 15.600 L 6.000 14.400 9.600 14.400 L 13.200 14.400 13.200 15.600 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.378 3.756 L 3.977 3.780 3.744 3.920 C 3.266 4.208,2.793 4.738,2.505 5.309 L 2.400 5.517 2.400 12.019 L 2.400 18.520 2.630 18.906 C 2.944 19.432,3.282 19.785,3.796 20.126 L 4.220 20.408 11.269 20.393 C 16.385 20.382,18.330 20.366,18.363 20.333 C 18.396 20.300,18.330 20.231,18.114 20.071 C 17.759 19.808,17.267 19.290,17.092 18.996 L 16.964 18.780 16.922 16.280 C 16.899 14.905,16.862 12.493,16.840 10.920 C 16.792 7.597,16.735 5.715,16.674 5.425 C 16.650 5.312,16.589 5.139,16.538 5.040 C 16.350 4.671,15.801 4.122,15.380 3.881 L 15.180 3.767 10.980 3.749 C 8.670 3.739,6.149 3.742,5.378 3.756 M13.200 9.600 L 13.200 12.000 9.600 12.000 L 6.000 12.000 6.000 9.600 L 6.000 7.200 9.600 7.200 L 13.200 7.200 13.200 9.600 M18.000 13.061 L 18.000 17.722 18.117 17.951 C 18.432 18.566,19.029 19.052,19.600 19.160 C 20.185 19.271,20.986 18.780,21.399 18.057 L 21.579 17.743 21.594 14.040 L 21.609 10.336 21.499 10.118 C 21.034 9.196,20.388 8.670,19.560 8.542 C 19.192 8.485,18.335 8.401,18.110 8.400 L 18.000 8.400 18.000 13.061 M13.200 15.600 L 13.200 16.800 9.600 16.800 L 6.000 16.800 6.000 15.600 L 6.000 14.400 9.600 14.400 L 13.200 14.400 13.200 15.600 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/node_js.svg b/packages/icons/svg/node_js.svg
index 1ef5c3d9b9..bb5c67fd96 100644
--- a/packages/icons/svg/node_js.svg
+++ b/packages/icons/svg/node_js.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.120 3.047 C 11.011 3.071,9.514 3.858,7.305 5.053 C 3.379 7.178,3.345 7.199,3.132 7.632 L 3.020 7.860 3.020 12.000 L 3.020 16.140 3.107 16.329 C 3.282 16.706,3.500 16.881,4.415 17.377 C 6.080 18.278,6.420 18.406,7.160 18.411 C 8.073 18.417,8.714 18.086,9.040 17.440 C 9.283 16.959,9.279 17.040,9.279 12.712 L 9.280 8.765 9.191 8.702 C 9.122 8.654,8.991 8.640,8.611 8.640 C 8.173 8.640,8.111 8.649,8.040 8.720 C 7.961 8.799,7.960 8.853,7.960 12.682 C 7.960 16.465,7.958 16.567,7.881 16.718 C 7.707 17.059,7.362 17.220,6.946 17.154 C 6.463 17.079,5.461 16.637,4.620 16.129 L 4.300 15.935 4.290 12.013 C 4.282 8.905,4.290 8.082,4.330 8.049 C 4.476 7.931,11.424 4.200,11.499 4.200 C 11.574 4.200,18.527 7.932,18.670 8.049 C 18.709 8.081,18.720 8.920,18.720 12.000 C 18.720 15.080,18.709 15.919,18.670 15.950 C 18.643 15.972,17.756 16.454,16.700 17.021 C 14.108 18.411,13.477 18.753,12.464 19.318 C 11.988 19.583,11.557 19.800,11.506 19.800 C 11.455 19.800,10.985 19.563,10.462 19.273 C 9.596 18.793,9.502 18.750,9.406 18.789 C 9.348 18.813,9.129 18.907,8.920 18.997 C 8.204 19.305,8.184 19.325,8.410 19.493 C 8.670 19.686,10.826 20.856,11.054 20.927 C 11.368 21.025,11.683 21.018,12.000 20.906 C 12.143 20.856,13.853 19.949,15.800 18.893 C 19.613 16.823,19.659 16.794,19.868 16.368 L 19.980 16.140 19.980 12.000 L 19.980 7.860 19.868 7.632 C 19.802 7.497,19.671 7.328,19.548 7.217 C 19.244 6.944,12.169 3.109,11.851 3.045 C 11.590 2.993,11.372 2.993,11.120 3.047 M12.834 8.482 C 11.194 8.600,10.201 9.391,10.201 10.580 C 10.201 11.672,10.906 12.250,12.540 12.495 C 12.760 12.528,13.147 12.575,13.400 12.600 C 14.752 12.732,15.485 12.926,15.683 13.204 C 15.791 13.356,15.799 13.725,15.699 13.936 C 15.565 14.219,15.220 14.420,14.655 14.544 C 14.179 14.648,13.149 14.639,12.613 14.526 C 11.746 14.342,11.449 14.105,11.303 13.480 C 11.270 13.337,11.212 13.198,11.174 13.170 C 11.127 13.136,10.947 13.120,10.621 13.120 C 10.035 13.120,9.960 13.153,9.960 13.417 C 9.960 14.553,10.906 15.398,12.480 15.668 C 13.021 15.761,14.283 15.759,14.820 15.664 C 15.829 15.485,16.562 15.072,16.910 14.485 C 17.211 13.977,17.241 13.160,16.979 12.639 C 16.851 12.385,16.529 12.099,16.187 11.937 C 15.625 11.670,14.524 11.454,13.242 11.359 C 12.023 11.268,11.596 11.058,11.592 10.546 C 11.588 10.139,11.805 9.884,12.293 9.723 C 12.684 9.595,13.094 9.548,13.600 9.573 C 14.387 9.613,14.974 9.803,15.239 10.105 C 15.375 10.260,15.559 10.613,15.560 10.721 C 15.560 10.755,15.588 10.822,15.622 10.871 C 15.681 10.955,15.713 10.960,16.205 10.960 C 16.491 10.960,16.760 10.941,16.803 10.919 C 16.898 10.867,16.903 10.685,16.820 10.330 C 16.732 9.958,16.512 9.555,16.250 9.287 C 15.821 8.849,15.036 8.561,14.053 8.481 C 13.506 8.437,13.468 8.437,12.834 8.482 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.200 3.035 C 10.983 3.083,9.903 3.648,6.540 5.471 C 3.483 7.128,3.335 7.221,3.123 7.647 L 3.000 7.893 3.000 11.996 L 3.001 16.100 3.095 16.303 C 3.291 16.723,3.544 16.914,4.789 17.579 C 6.070 18.263,6.467 18.400,7.163 18.399 C 8.114 18.398,8.722 18.072,9.064 17.380 C 9.180 17.144,9.208 17.034,9.240 16.680 C 9.260 16.449,9.278 14.575,9.279 12.515 C 9.280 9.080,9.275 8.765,9.214 8.715 C 9.168 8.677,8.998 8.656,8.663 8.646 C 8.225 8.634,8.169 8.640,8.079 8.713 L 7.980 8.793 7.960 12.713 L 7.940 16.633 7.819 16.807 C 7.592 17.133,7.226 17.231,6.721 17.100 C 6.258 16.980,5.457 16.615,4.736 16.195 L 4.333 15.960 4.307 14.490 C 4.273 12.602,4.272 9.018,4.306 8.466 L 4.332 8.040 5.276 7.524 C 7.250 6.445,11.451 4.200,11.497 4.200 C 11.545 4.200,15.895 6.522,17.764 7.546 L 18.668 8.041 18.694 8.466 C 18.727 9.012,18.721 15.192,18.686 15.634 L 18.660 15.967 16.840 16.946 C 15.839 17.484,14.264 18.335,13.340 18.838 C 12.416 19.340,11.621 19.763,11.573 19.777 C 11.483 19.804,11.086 19.617,10.060 19.061 C 9.796 18.918,9.532 18.801,9.473 18.801 C 9.353 18.800,8.418 19.205,8.326 19.297 C 8.278 19.345,8.276 19.368,8.317 19.416 C 8.381 19.494,8.980 19.842,9.940 20.362 C 10.909 20.886,11.077 20.959,11.378 20.987 C 11.840 21.030,11.862 21.020,15.440 19.088 C 19.509 16.892,19.691 16.778,19.917 16.279 C 19.997 16.103,19.998 16.033,19.999 11.998 L 20.000 7.896 19.894 7.683 C 19.748 7.389,19.558 7.206,19.152 6.968 C 18.014 6.300,13.856 4.042,12.558 3.387 C 11.932 3.071,11.833 3.033,11.600 3.020 C 11.457 3.011,11.277 3.018,11.200 3.035 M12.865 8.481 C 11.101 8.637,10.122 9.461,10.211 10.716 C 10.255 11.347,10.540 11.777,11.110 12.072 C 11.635 12.344,12.137 12.460,13.380 12.601 C 14.904 12.772,15.551 12.952,15.703 13.246 C 15.787 13.408,15.775 13.744,15.678 13.944 C 15.568 14.171,15.373 14.311,14.976 14.448 C 14.252 14.698,12.802 14.661,12.075 14.374 C 11.648 14.206,11.463 14.000,11.321 13.535 C 11.193 13.114,11.240 13.140,10.618 13.140 C 9.956 13.140,9.941 13.150,9.973 13.563 C 10.070 14.785,11.258 15.610,13.074 15.717 C 14.749 15.816,15.929 15.519,16.624 14.824 C 16.843 14.605,16.928 14.486,16.996 14.301 C 17.172 13.830,17.201 13.457,17.098 13.002 C 16.955 12.376,16.517 12.002,15.615 11.739 C 15.135 11.599,14.286 11.459,13.440 11.380 C 11.992 11.246,11.600 11.070,11.600 10.557 C 11.600 10.209,11.743 9.993,12.090 9.816 C 12.420 9.647,12.766 9.586,13.380 9.588 C 14.074 9.591,14.477 9.666,14.880 9.869 C 15.129 9.994,15.206 10.058,15.330 10.240 C 15.412 10.361,15.508 10.555,15.543 10.670 C 15.580 10.793,15.639 10.898,15.686 10.923 C 15.814 10.992,16.793 10.955,16.844 10.880 C 16.900 10.796,16.858 10.426,16.758 10.131 C 16.459 9.252,15.696 8.718,14.480 8.540 C 13.953 8.462,13.333 8.440,12.865 8.481 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/notion.svg b/packages/icons/svg/notion.svg
index 9930f994aa..d016ff66fe 100644
--- a/packages/icons/svg/notion.svg
+++ b/packages/icons/svg/notion.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.440 3.422 C 5.378 3.728,3.924 3.850,3.760 3.901 C 3.595 3.951,3.489 4.020,3.338 4.175 C 2.973 4.548,3.000 4.017,3.000 10.864 C 3.000 17.500,2.983 17.065,3.261 17.621 C 3.416 17.931,5.911 21.242,6.249 21.588 C 6.524 21.868,6.764 21.967,7.220 21.988 C 7.642 22.007,19.815 21.261,20.072 21.200 C 20.495 21.099,20.731 20.916,20.896 20.560 L 20.980 20.380 20.991 13.567 C 21.003 5.751,21.045 6.559,20.608 6.220 C 19.919 5.685,16.581 3.340,16.340 3.222 C 16.019 3.064,15.678 2.999,15.220 3.005 C 15.044 3.008,12.443 3.195,9.440 3.422 M15.781 4.142 C 15.912 4.176,16.094 4.245,16.184 4.296 C 16.459 4.450,18.391 5.879,18.418 5.949 C 18.431 5.984,18.429 6.027,18.411 6.044 C 18.394 6.060,15.841 6.229,12.737 6.417 C 6.742 6.782,6.867 6.778,6.501 6.600 C 6.303 6.504,4.661 5.193,4.627 5.104 C 4.592 5.013,4.629 4.939,4.738 4.881 C 4.840 4.827,14.418 4.094,15.142 4.085 C 15.391 4.082,15.634 4.104,15.781 4.142 M19.459 7.377 C 19.537 7.409,19.626 7.491,19.667 7.567 C 19.737 7.694,19.740 7.972,19.740 13.540 C 19.740 19.351,19.740 19.381,19.658 19.540 C 19.601 19.651,19.521 19.728,19.396 19.790 C 19.223 19.877,19.002 19.893,13.418 20.223 C 10.229 20.411,7.527 20.556,7.413 20.546 C 7.132 20.520,6.939 20.420,6.831 20.246 L 6.740 20.100 6.740 14.253 L 6.740 8.406 6.823 8.293 C 7.015 8.033,6.645 8.069,13.120 7.683 C 16.387 7.489,19.119 7.327,19.191 7.325 C 19.263 7.322,19.384 7.346,19.459 7.377 M16.550 9.440 C 15.939 9.479,15.377 9.523,15.301 9.537 C 15.119 9.571,14.900 9.782,14.847 9.973 C 14.772 10.243,14.783 10.250,15.376 10.318 C 15.572 10.340,15.738 10.365,15.746 10.373 C 15.754 10.381,15.756 11.513,15.750 12.890 L 15.740 15.392 14.341 13.226 C 13.572 12.035,12.743 10.753,12.498 10.379 L 12.054 9.697 10.657 9.791 C 9.413 9.874,9.240 9.894,9.080 9.972 C 8.872 10.074,8.720 10.323,8.720 10.564 C 8.720 10.728,8.772 10.758,9.060 10.760 C 9.148 10.760,9.314 10.772,9.430 10.786 L 9.640 10.811 9.640 14.444 L 9.640 18.077 9.350 18.160 C 8.910 18.287,8.841 18.322,8.778 18.444 C 8.746 18.505,8.720 18.620,8.720 18.698 L 8.720 18.840 8.930 18.839 C 9.446 18.835,11.555 18.680,11.692 18.635 C 11.944 18.553,12.260 18.126,12.129 18.046 C 12.106 18.032,11.852 17.968,11.564 17.904 L 11.040 17.787 11.040 15.047 C 11.040 13.540,11.047 12.314,11.055 12.323 C 11.064 12.333,11.874 13.617,12.856 15.179 C 13.925 16.879,14.732 18.120,14.868 18.274 C 15.159 18.604,15.354 18.696,15.760 18.696 C 16.089 18.697,16.465 18.597,16.840 18.410 L 17.060 18.300 17.070 14.236 L 17.080 10.172 17.417 10.102 C 17.853 10.010,17.938 9.930,17.939 9.608 L 17.940 9.380 17.800 9.374 C 17.723 9.371,17.160 9.401,16.550 9.440 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.580 3.043 C 14.338 3.063,13.267 3.143,12.200 3.221 C 9.029 3.453,5.642 3.715,4.680 3.804 C 3.679 3.896,3.605 3.917,3.315 4.199 C 3.160 4.349,3.119 4.421,3.074 4.620 C 3.030 4.816,3.020 5.964,3.020 10.900 C 3.020 16.577,3.024 16.956,3.091 17.200 C 3.131 17.343,3.219 17.552,3.287 17.665 C 3.563 18.122,5.792 21.076,6.216 21.547 C 6.584 21.956,6.871 22.022,8.011 21.961 C 10.760 21.813,17.248 21.414,19.077 21.281 C 20.101 21.206,20.142 21.200,20.382 21.082 C 20.648 20.951,20.794 20.794,20.924 20.500 C 21.002 20.324,21.003 20.221,20.989 13.551 C 20.978 8.293,20.963 6.738,20.925 6.592 C 20.875 6.408,20.858 6.392,20.047 5.806 C 18.955 5.017,16.761 3.482,16.487 3.316 C 16.368 3.243,16.174 3.152,16.055 3.112 C 15.789 3.022,15.174 2.993,14.580 3.043 M15.933 4.194 C 16.185 4.283,16.602 4.563,17.641 5.343 C 18.339 5.868,18.471 5.982,18.429 6.024 C 18.393 6.061,17.751 6.107,14.360 6.318 C 7.729 6.731,7.066 6.763,6.734 6.683 C 6.513 6.630,5.942 6.224,5.100 5.521 C 4.391 4.930,4.407 4.908,5.605 4.799 C 6.629 4.706,11.700 4.316,13.360 4.202 C 14.009 4.157,14.621 4.114,14.720 4.105 C 15.107 4.070,15.705 4.114,15.933 4.194 M19.434 7.382 C 19.519 7.416,19.614 7.491,19.644 7.548 C 19.691 7.636,19.700 8.590,19.700 13.558 C 19.700 19.183,19.697 19.469,19.628 19.574 C 19.532 19.720,19.349 19.827,19.146 19.856 C 18.856 19.897,17.358 19.994,13.860 20.199 C 8.941 20.488,7.466 20.563,7.314 20.534 C 7.120 20.497,6.984 20.420,6.865 20.278 L 6.760 20.154 6.760 14.262 C 6.760 8.416,6.761 8.370,6.841 8.268 C 6.885 8.212,6.979 8.147,7.051 8.123 C 7.260 8.054,8.292 7.977,11.900 7.761 C 13.770 7.649,16.137 7.506,17.160 7.443 C 18.183 7.381,19.078 7.328,19.149 7.325 C 19.220 7.322,19.348 7.348,19.434 7.382 M17.500 9.387 C 16.614 9.432,15.360 9.530,15.257 9.563 C 15.021 9.637,14.760 10.009,14.825 10.179 C 14.851 10.245,14.922 10.263,15.390 10.323 L 15.760 10.370 15.755 12.155 C 15.752 13.137,15.739 14.252,15.725 14.634 L 15.700 15.327 13.884 12.518 L 12.067 9.709 11.564 9.737 C 10.857 9.775,9.533 9.875,9.329 9.904 C 8.990 9.954,8.747 10.205,8.743 10.508 C 8.739 10.734,8.762 10.746,9.290 10.783 L 9.640 10.807 9.640 14.442 L 9.640 18.077 9.350 18.162 C 8.816 18.320,8.720 18.405,8.720 18.726 C 8.720 18.840,8.721 18.840,8.979 18.840 C 9.286 18.840,10.878 18.733,11.353 18.680 C 11.733 18.638,11.910 18.549,12.061 18.327 C 12.235 18.071,12.223 18.061,11.600 17.916 L 11.040 17.786 11.040 15.064 C 11.040 12.782,11.049 12.352,11.094 12.401 C 11.123 12.434,11.685 13.315,12.341 14.360 C 13.892 16.829,14.719 18.102,14.919 18.330 C 15.151 18.592,15.354 18.680,15.734 18.680 C 16.104 18.680,16.447 18.598,16.800 18.427 L 17.060 18.300 17.070 14.237 L 17.080 10.174 17.391 10.107 C 17.767 10.026,17.864 9.964,17.918 9.769 C 17.986 9.524,17.972 9.413,17.870 9.385 C 17.820 9.372,17.771 9.364,17.760 9.368 C 17.749 9.372,17.632 9.381,17.500 9.387 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/null.svg b/packages/icons/svg/null.svg
new file mode 100644
index 0000000000..b3d5ed9f96
--- /dev/null
+++ b/packages/icons/svg/null.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.920 2.026 C 10.037 2.111,9.352 2.244,8.680 2.461 C 6.429 3.190,4.581 4.655,3.359 6.680 C 2.735 7.715,2.291 8.964,2.093 10.240 C 1.994 10.882,1.994 12.318,2.093 12.960 C 2.333 14.508,2.877 15.873,3.751 17.120 L 3.990 17.460 3.461 18.000 C 2.868 18.606,2.760 18.796,2.760 19.234 C 2.760 19.599,2.858 19.824,3.137 20.102 C 3.503 20.465,3.917 20.567,4.405 20.412 C 4.592 20.353,4.694 20.272,5.187 19.788 L 5.754 19.232 6.230 19.550 C 7.485 20.389,8.734 20.874,10.240 21.107 C 10.882 21.206,12.318 21.206,12.960 21.107 C 14.773 20.826,16.439 20.073,17.820 18.908 C 19.337 17.629,20.452 15.814,20.933 13.840 C 21.126 13.050,21.178 12.572,21.178 11.600 C 21.178 10.630,21.126 10.150,20.935 9.368 C 20.646 8.183,20.208 7.199,19.509 6.168 L 19.230 5.756 19.787 5.188 C 20.272 4.694,20.353 4.592,20.412 4.405 C 20.567 3.916,20.465 3.502,20.102 3.138 C 19.829 2.865,19.583 2.760,19.217 2.760 C 18.797 2.760,18.599 2.874,18.003 3.461 L 17.466 3.989 17.043 3.699 C 15.633 2.734,14.109 2.189,12.400 2.041 C 11.968 2.003,11.235 1.996,10.920 2.026 M12.326 4.442 C 13.165 4.528,13.923 4.741,14.680 5.104 C 15.147 5.328,15.720 5.663,15.720 5.713 C 15.720 5.748,5.748 15.720,5.713 15.720 C 5.663 15.720,5.328 15.147,5.104 14.680 C 4.376 13.162,4.211 11.442,4.636 9.796 C 4.902 8.763,5.403 7.794,6.102 6.960 C 7.614 5.156,9.972 4.202,12.326 4.442 M17.695 7.770 C 18.510 9.080,18.897 10.660,18.767 12.153 C 18.681 13.145,18.487 13.867,18.083 14.705 C 17.162 16.617,15.531 17.980,13.493 18.541 C 11.572 19.069,9.504 18.770,7.805 17.717 L 7.470 17.510 12.485 12.495 C 15.243 9.737,17.503 7.480,17.507 7.480 C 17.511 7.480,17.596 7.611,17.695 7.770 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/office-building.svg b/packages/icons/svg/office-building.svg
index 8cc90c5f25..b8e4e1fad0 100644
--- a/packages/icons/svg/office-building.svg
+++ b/packages/icons/svg/office-building.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.640 2.559 C 6.193 2.584,6.263 2.572,5.860 2.888 C 5.510 3.163,5.152 3.620,4.905 4.109 L 4.800 4.317 4.800 11.759 C 4.800 17.685,4.790 19.200,4.750 19.200 C 4.649 19.200,4.215 19.435,4.050 19.579 C 3.698 19.885,3.574 20.271,3.694 20.686 C 3.774 20.961,3.943 21.197,4.175 21.357 C 4.464 21.555,4.724 21.576,6.968 21.578 L 8.957 21.580 9.142 21.400 C 9.500 21.052,9.530 20.921,9.619 19.359 C 9.721 17.561,9.737 17.476,10.008 17.215 C 10.103 17.124,10.221 17.028,10.271 17.003 C 10.413 16.930,11.078 16.884,12.380 16.857 L 13.580 16.833 13.811 17.024 C 14.224 17.366,14.282 17.586,14.360 19.100 C 14.418 20.250,14.472 20.823,14.535 20.973 C 14.614 21.163,14.790 21.353,14.970 21.445 C 15.182 21.553,15.797 21.597,17.100 21.598 C 18.354 21.599,19.477 21.539,19.660 21.463 C 19.837 21.389,20.149 21.075,20.223 20.898 C 20.300 20.714,20.337 20.335,20.302 20.097 C 20.277 19.932,20.240 19.872,20.043 19.680 C 19.903 19.543,19.705 19.403,19.533 19.321 L 19.253 19.186 19.227 14.566 C 19.212 12.026,19.200 8.685,19.200 7.143 L 19.199 4.340 19.099 4.124 C 18.925 3.750,18.646 3.373,18.330 3.081 C 17.880 2.666,17.801 2.637,17.028 2.598 C 16.205 2.557,9.360 2.529,7.640 2.559 M10.800 7.200 L 10.800 8.400 9.600 8.400 L 8.400 8.400 8.400 7.200 L 8.400 6.000 9.600 6.000 L 10.800 6.000 10.800 7.200 M15.600 7.200 L 15.600 8.400 14.400 8.400 L 13.200 8.400 13.200 7.200 L 13.200 6.000 14.400 6.000 L 15.600 6.000 15.600 7.200 M10.800 12.000 L 10.800 13.200 9.600 13.200 L 8.400 13.200 8.400 12.000 L 8.400 10.800 9.600 10.800 L 10.800 10.800 10.800 12.000 M15.600 12.000 L 15.600 13.200 14.400 13.200 L 13.200 13.200 13.200 12.000 L 13.200 10.800 14.400 10.800 L 15.600 10.800 15.600 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.560 2.596 C 6.395 2.612,6.201 2.656,6.128 2.695 C 5.780 2.878,5.169 3.585,4.905 4.109 L 4.800 4.317 4.800 11.069 C 4.800 14.782,4.788 18.126,4.774 18.500 L 4.748 19.180 4.470 19.317 C 4.154 19.471,3.854 19.744,3.740 19.980 C 3.645 20.176,3.640 20.594,3.731 20.800 C 3.915 21.216,4.208 21.447,4.640 21.518 C 4.784 21.542,5.804 21.572,6.920 21.586 L 8.940 21.611 9.152 21.386 C 9.500 21.016,9.526 20.903,9.620 19.360 C 9.697 18.085,9.744 17.667,9.835 17.462 C 9.912 17.288,10.146 17.059,10.309 16.996 C 10.462 16.938,11.261 16.887,12.481 16.857 L 13.583 16.830 13.814 17.041 C 14.252 17.441,14.252 17.443,14.401 19.820 C 14.459 20.748,14.500 20.968,14.655 21.171 C 14.849 21.425,15.061 21.512,15.600 21.559 C 16.539 21.641,19.193 21.588,19.604 21.479 C 19.761 21.437,20.171 21.041,20.237 20.867 C 20.298 20.708,20.332 20.301,20.302 20.102 C 20.279 19.948,20.238 19.882,20.051 19.700 C 19.928 19.580,19.698 19.415,19.540 19.333 L 19.253 19.186 19.227 14.003 C 19.212 11.152,19.200 7.806,19.200 6.566 L 19.200 4.312 19.060 4.046 C 18.862 3.671,18.558 3.280,18.268 3.027 C 17.955 2.754,17.831 2.691,17.492 2.636 C 17.181 2.585,7.067 2.548,6.560 2.596 M10.800 7.200 L 10.800 8.400 9.600 8.400 L 8.400 8.400 8.400 7.200 L 8.400 6.000 9.600 6.000 L 10.800 6.000 10.800 7.200 M15.600 7.200 L 15.600 8.400 14.400 8.400 L 13.200 8.400 13.200 7.200 L 13.200 6.000 14.400 6.000 L 15.600 6.000 15.600 7.200 M10.800 12.000 L 10.800 13.200 9.600 13.200 L 8.400 13.200 8.400 12.000 L 8.400 10.800 9.600 10.800 L 10.800 10.800 10.800 12.000 M15.600 12.000 L 15.600 13.200 14.400 13.200 L 13.200 13.200 13.200 12.000 L 13.200 10.800 14.400 10.800 L 15.600 10.800 15.600 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/okta.svg b/packages/icons/svg/okta.svg
index 7ce3a6c4fb..a7c989703a 100644
--- a/packages/icons/svg/okta.svg
+++ b/packages/icons/svg/okta.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.023 3.160,9.086 3.416,8.060 3.919 C 5.271 5.287,3.420 7.905,3.059 10.992 C 2.713 13.952,3.917 16.980,6.197 18.886 C 9.569 21.703,14.431 21.703,17.803 18.886 C 20.944 16.261,21.898 11.722,20.080 8.048 C 19.172 6.214,17.763 4.810,15.940 3.921 C 15.062 3.493,14.267 3.244,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 M13.088 7.633 C 14.745 8.076,15.905 9.235,16.370 10.912 C 16.443 11.178,16.455 11.327,16.455 12.000 C 16.455 12.856,16.420 13.057,16.160 13.706 C 15.486 15.389,13.840 16.491,12.000 16.491 C 9.917 16.491,8.175 15.133,7.634 13.088 C 7.529 12.689,7.490 11.783,7.558 11.315 C 7.830 9.448,9.295 7.934,11.173 7.577 C 11.605 7.495,12.688 7.527,13.088 7.633 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.040 3.064 C 9.920 3.197,9.077 3.442,8.100 3.919 C 7.107 4.403,6.444 4.867,5.684 5.612 C 4.289 6.979,3.433 8.660,3.094 10.700 C 2.992 11.313,2.992 12.680,3.093 13.300 C 3.588 16.332,5.398 18.803,8.060 20.082 C 9.408 20.729,10.499 20.977,12.000 20.977 C 13.501 20.977,14.592 20.729,15.940 20.082 C 18.305 18.946,20.044 16.821,20.698 14.269 C 20.920 13.403,20.978 12.932,20.978 11.980 C 20.977 10.974,20.899 10.398,20.637 9.494 C 19.952 7.123,18.307 5.137,16.092 4.008 C 14.837 3.368,13.869 3.115,12.395 3.040 C 11.504 2.995,11.630 2.993,11.040 3.064 M12.467 7.560 C 12.861 7.590,13.086 7.630,13.353 7.718 C 14.768 8.180,15.765 9.173,16.285 10.640 L 16.420 11.020 16.420 12.000 L 16.420 12.980 16.291 13.348 C 15.845 14.627,15.065 15.513,13.901 16.065 C 13.693 16.163,13.346 16.291,13.131 16.349 C 12.783 16.442,12.662 16.454,12.040 16.457 C 11.236 16.460,10.958 16.412,10.294 16.155 C 8.964 15.638,7.872 14.313,7.596 12.880 C 7.568 12.733,7.546 12.324,7.547 11.940 C 7.548 11.337,7.560 11.216,7.652 10.869 C 7.849 10.128,8.218 9.471,8.752 8.913 C 9.483 8.148,10.435 7.658,11.380 7.561 C 11.804 7.517,11.897 7.517,12.467 7.560 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/opera.svg b/packages/icons/svg/opera.svg
index 95910b5bb6..98c23049de 100644
--- a/packages/icons/svg/opera.svg
+++ b/packages/icons/svg/opera.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.027 C 9.124 3.215,7.161 4.119,5.621 5.661 C 3.874 7.410,2.922 9.833,3.012 12.300 C 3.062 13.641,3.350 14.788,3.938 15.980 C 6.126 20.421,11.534 22.266,15.952 20.080 C 16.716 19.702,17.883 18.910,17.849 18.792 C 17.843 18.771,17.855 18.764,17.875 18.777 C 17.925 18.808,18.670 18.064,18.997 17.659 C 20.063 16.335,20.741 14.714,20.941 13.008 C 21.216 10.655,20.503 8.211,18.997 6.341 C 18.670 5.936,17.925 5.192,17.875 5.223 C 17.855 5.236,17.843 5.229,17.849 5.209 C 17.878 5.110,16.776 4.339,16.135 4.010 C 14.672 3.259,12.896 2.895,11.340 3.027 M15.633 4.318 C 16.236 4.443,16.639 4.578,17.180 4.839 C 17.723 5.101,17.961 5.257,17.600 5.114 C 16.398 4.642,14.877 4.607,13.711 5.026 C 13.366 5.149,12.880 5.388,12.880 5.433 C 12.880 5.451,12.970 5.488,13.079 5.516 C 13.359 5.588,13.876 5.845,14.224 6.086 C 14.612 6.354,15.206 6.977,15.518 7.443 C 17.445 10.324,17.160 14.950,14.911 17.303 C 14.341 17.899,13.749 18.286,13.130 18.467 C 12.993 18.507,12.886 18.557,12.893 18.578 C 12.934 18.703,13.831 19.047,14.481 19.187 C 14.958 19.289,16.122 19.289,16.593 19.186 C 16.907 19.118,17.566 18.915,17.740 18.833 L 17.820 18.796 17.740 18.863 C 17.622 18.962,16.740 19.377,16.440 19.475 C 15.520 19.775,14.395 19.877,13.489 19.744 C 11.671 19.475,10.093 18.482,8.847 16.820 C 7.896 15.552,7.360 13.815,7.360 12.000 C 7.360 10.080,7.904 8.397,8.966 7.027 C 10.191 5.448,11.666 4.543,13.480 4.257 C 13.988 4.177,15.107 4.209,15.633 4.318 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.400 3.023 C 10.407 3.137,9.824 3.255,9.160 3.477 C 7.740 3.952,6.567 4.698,5.498 5.804 C 2.737 8.664,2.213 13.070,4.225 16.513 C 4.622 17.193,5.027 17.712,5.638 18.323 C 6.489 19.177,7.276 19.730,8.282 20.183 C 10.463 21.164,12.886 21.260,15.080 20.452 C 16.205 20.037,17.310 19.347,18.171 18.520 C 18.800 17.916,19.085 17.581,19.506 16.951 C 20.271 15.807,20.815 14.268,20.958 12.846 C 21.180 10.651,20.477 8.237,19.107 6.480 C 18.903 6.219,17.966 5.240,17.919 5.240 C 17.906 5.240,17.811 5.160,17.708 5.062 C 17.436 4.801,16.506 4.198,15.989 3.948 C 15.124 3.528,14.181 3.238,13.240 3.102 C 12.796 3.038,11.687 2.990,11.400 3.023 M14.846 4.240 C 15.449 4.279,15.946 4.368,16.400 4.519 C 16.663 4.606,17.771 5.123,17.747 5.147 C 17.739 5.154,17.600 5.114,17.437 5.058 C 16.791 4.836,16.278 4.756,15.494 4.756 C 14.865 4.755,14.322 4.831,13.842 4.986 C 13.447 5.115,12.871 5.393,12.901 5.442 C 12.914 5.463,12.943 5.480,12.966 5.480 C 12.988 5.480,13.145 5.535,13.313 5.602 C 15.070 6.302,16.339 8.212,16.706 10.708 C 16.790 11.281,16.801 12.606,16.726 13.140 C 16.489 14.833,15.907 16.189,14.967 17.238 C 14.491 17.770,13.768 18.263,13.180 18.456 C 12.857 18.562,12.848 18.578,13.045 18.693 C 13.266 18.821,14.061 19.095,14.469 19.184 C 14.851 19.267,16.126 19.280,16.512 19.205 C 16.650 19.178,16.982 19.086,17.250 19.000 C 17.518 18.914,17.744 18.850,17.751 18.858 C 17.775 18.882,16.800 19.343,16.499 19.451 C 15.255 19.897,13.671 19.907,12.386 19.478 C 10.625 18.890,9.030 17.458,8.179 15.700 C 7.626 14.559,7.380 13.402,7.383 11.960 C 7.387 9.915,7.925 8.328,9.111 6.856 C 10.424 5.225,12.213 4.283,14.140 4.206 C 14.206 4.204,14.524 4.219,14.846 4.240 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/paper-airplane.svg b/packages/icons/svg/paper-airplane.svg
index 2db03ddbbc..53d1e8d82b 100644
--- a/packages/icons/svg/paper-airplane.svg
+++ b/packages/icons/svg/paper-airplane.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.397 2.634 C 11.138 2.852,10.838 3.351,10.073 4.835 C 8.986 6.946,2.891 19.139,2.667 19.654 C 2.563 19.892,2.467 20.166,2.453 20.263 C 2.400 20.649,2.683 21.188,3.048 21.398 C 3.420 21.611,3.788 21.568,5.420 21.120 C 6.632 20.788,8.430 20.259,9.337 19.969 L 10.174 19.701 10.468 19.421 L 10.763 19.140 10.801 17.380 C 10.822 16.412,10.839 15.002,10.839 14.246 L 10.840 12.873 11.004 12.639 C 11.294 12.226,11.616 12.089,12.195 12.132 C 12.546 12.159,12.751 12.280,12.930 12.566 C 13.027 12.721,13.044 12.800,13.078 13.260 C 13.100 13.546,13.137 14.581,13.160 15.560 C 13.205 17.411,13.262 18.770,13.305 19.044 C 13.337 19.245,13.596 19.542,13.866 19.688 C 14.069 19.798,15.358 20.199,17.380 20.781 C 19.907 21.508,20.518 21.625,20.864 21.448 C 21.085 21.335,21.302 21.103,21.432 20.840 C 21.605 20.487,21.584 20.211,21.340 19.664 C 20.905 18.685,13.668 4.264,13.169 3.380 C 12.917 2.933,12.798 2.793,12.555 2.661 C 12.371 2.561,12.291 2.544,11.942 2.530 C 11.543 2.514,11.539 2.514,11.397 2.634 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.408 2.621 C 11.233 2.764,10.955 3.182,10.584 3.862 C 9.828 5.246,2.871 19.148,2.590 19.837 C 2.356 20.408,2.452 20.868,2.886 21.258 C 3.134 21.481,3.322 21.537,3.720 21.506 C 4.295 21.462,7.239 20.641,10.036 19.746 C 10.111 19.722,10.306 19.576,10.469 19.421 L 10.765 19.140 10.801 17.600 C 10.821 16.753,10.838 15.343,10.839 14.467 L 10.840 12.874 10.956 12.707 C 11.120 12.472,11.315 12.295,11.490 12.221 C 11.844 12.074,12.397 12.109,12.681 12.296 C 12.758 12.347,12.870 12.479,12.930 12.589 C 13.030 12.773,13.042 12.845,13.079 13.465 C 13.101 13.836,13.137 14.842,13.160 15.700 C 13.226 18.239,13.271 18.989,13.366 19.190 C 13.462 19.391,13.712 19.619,13.953 19.724 C 14.392 19.916,17.837 20.936,19.211 21.281 C 20.213 21.533,20.591 21.570,20.855 21.442 C 20.956 21.393,21.110 21.273,21.196 21.175 C 21.571 20.749,21.626 20.374,21.397 19.800 C 21.162 19.211,14.027 4.964,13.246 3.524 C 12.827 2.752,12.588 2.571,11.934 2.536 C 11.551 2.515,11.536 2.517,11.408 2.621 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/paper-clip.svg b/packages/icons/svg/paper-clip.svg
index aa3593e02f..71c397a26f 100644
--- a/packages/icons/svg/paper-clip.svg
+++ b/packages/icons/svg/paper-clip.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.713 2.559 C 8.244 2.597,8.006 2.651,7.557 2.822 C 6.709 3.144,6.106 3.541,5.403 4.241 C 4.552 5.087,4.050 5.957,3.798 7.020 C 3.673 7.546,3.641 8.307,3.616 11.340 L 3.592 14.220 3.816 14.993 C 4.356 16.855,4.863 17.794,5.920 18.893 C 7.046 20.065,7.961 20.659,9.344 21.117 C 10.330 21.443,11.039 21.560,12.040 21.560 C 12.798 21.560,13.188 21.516,13.840 21.355 C 14.691 21.146,15.545 20.802,16.262 20.380 C 17.331 19.751,18.637 18.435,19.233 17.386 C 19.640 16.672,20.083 15.509,20.216 14.809 C 20.327 14.224,20.371 13.038,20.376 10.560 C 20.380 8.151,20.380 8.139,20.293 7.978 C 20.187 7.779,19.906 7.515,19.674 7.397 C 19.137 7.121,18.262 7.473,18.124 8.019 C 18.063 8.261,18.013 9.240,17.939 11.600 C 17.862 14.047,17.826 14.463,17.635 15.080 C 17.310 16.126,16.381 17.378,15.422 18.059 C 14.875 18.448,14.019 18.828,13.245 19.025 C 12.904 19.111,12.787 19.120,11.959 19.120 C 11.103 19.120,11.028 19.114,10.699 19.019 C 9.861 18.776,9.018 18.404,8.621 18.102 C 8.039 17.660,7.415 17.014,7.077 16.505 C 6.844 16.154,6.425 15.277,6.300 14.880 L 6.193 14.540 6.158 12.500 C 6.140 11.378,6.123 9.780,6.122 8.949 L 6.120 7.438 6.257 7.167 C 6.592 6.501,7.190 5.762,7.646 5.449 C 7.960 5.234,8.368 5.049,8.640 4.999 C 8.783 4.973,9.269 4.949,9.720 4.945 L 10.540 4.940 10.843 5.071 C 11.437 5.327,12.050 5.810,12.429 6.320 C 12.519 6.441,12.702 6.738,12.836 6.980 L 13.079 7.420 13.080 10.477 C 13.080 13.494,13.079 13.537,12.997 13.707 C 12.902 13.903,12.606 14.182,12.403 14.269 C 12.216 14.348,11.690 14.348,11.536 14.268 C 11.407 14.201,11.079 13.868,11.003 13.726 C 10.941 13.609,10.893 12.799,10.842 11.000 C 10.755 7.896,10.762 7.957,10.483 7.680 C 10.382 7.580,10.228 7.463,10.140 7.422 C 9.946 7.330,9.410 7.292,9.179 7.355 C 8.944 7.418,8.574 7.761,8.518 7.966 C 8.443 8.245,8.403 9.583,8.402 11.820 L 8.402 13.980 8.632 14.420 C 8.951 15.030,9.129 15.287,9.498 15.673 C 9.841 16.031,10.264 16.333,10.789 16.596 L 11.118 16.760 11.769 16.759 C 12.715 16.757,12.903 16.725,13.382 16.483 C 14.027 16.157,14.650 15.613,15.010 15.060 C 15.096 14.928,15.264 14.617,15.383 14.369 L 15.600 13.919 15.600 10.700 L 15.600 7.481 15.395 6.911 C 15.092 6.065,14.878 5.605,14.579 5.155 C 14.247 4.657,13.567 3.965,13.040 3.590 C 12.595 3.273,11.644 2.788,11.300 2.703 C 10.790 2.576,9.436 2.501,8.713 2.559 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.260 2.619 C 7.701 2.724,6.957 3.046,6.353 3.446 C 5.861 3.772,4.955 4.678,4.605 5.192 C 4.139 5.879,3.816 6.716,3.721 7.482 C 3.662 7.964,3.603 10.460,3.601 12.593 L 3.600 14.246 3.758 14.793 C 4.381 16.946,4.875 17.841,6.138 19.101 C 7.254 20.215,8.227 20.796,9.683 21.219 C 10.646 21.499,11.268 21.578,12.295 21.550 C 13.131 21.527,13.592 21.449,14.389 21.194 C 14.992 21.002,15.748 20.681,16.140 20.452 C 16.846 20.038,17.660 19.358,18.260 18.680 C 18.962 17.887,19.265 17.421,19.623 16.584 C 20.005 15.693,20.206 15.012,20.280 14.360 C 20.339 13.834,20.412 9.920,20.380 8.920 C 20.351 7.991,20.326 7.908,19.993 7.624 C 19.700 7.372,19.518 7.307,19.167 7.328 C 18.665 7.359,18.222 7.656,18.124 8.028 C 18.068 8.245,18.010 9.302,17.940 11.420 C 17.855 13.996,17.813 14.490,17.634 15.071 C 17.363 15.947,16.573 17.096,15.768 17.784 C 15.217 18.256,14.405 18.673,13.460 18.971 L 13.060 19.097 11.980 19.099 L 10.900 19.100 10.340 18.907 C 9.637 18.665,8.898 18.311,8.560 18.056 C 8.213 17.794,7.508 17.086,7.248 16.740 C 6.998 16.406,6.545 15.531,6.345 14.993 L 6.201 14.606 6.161 12.233 C 6.139 10.928,6.121 9.315,6.121 8.649 L 6.120 7.438 6.236 7.209 C 6.530 6.631,7.028 5.980,7.473 5.591 C 7.778 5.326,8.348 5.052,8.700 5.002 C 8.854 4.980,9.346 4.961,9.793 4.961 L 10.606 4.960 10.968 5.140 C 11.822 5.564,12.362 6.115,12.913 7.125 L 13.080 7.430 13.077 10.345 C 13.075 11.948,13.061 13.355,13.044 13.471 C 13.007 13.731,12.850 13.964,12.581 14.157 C 12.396 14.290,12.360 14.301,12.035 14.314 C 11.768 14.324,11.655 14.312,11.543 14.259 C 11.389 14.186,11.052 13.838,10.999 13.696 C 10.948 13.564,10.886 12.405,10.840 10.740 C 10.788 8.871,10.740 8.132,10.656 7.922 C 10.587 7.749,10.326 7.512,10.102 7.418 C 9.903 7.335,9.416 7.301,9.212 7.356 C 8.981 7.419,8.668 7.677,8.565 7.890 C 8.445 8.137,8.402 9.185,8.401 11.853 L 8.400 13.967 8.605 14.366 C 9.170 15.465,9.796 16.097,10.837 16.619 L 11.134 16.768 11.937 16.750 C 12.880 16.730,13.058 16.687,13.614 16.350 C 14.417 15.863,14.899 15.334,15.332 14.463 L 15.600 13.924 15.600 10.701 L 15.600 7.478 15.396 6.909 C 15.120 6.140,14.738 5.362,14.448 4.977 C 14.125 4.549,13.331 3.785,12.939 3.526 C 12.505 3.239,11.554 2.772,11.260 2.702 C 10.667 2.560,8.847 2.510,8.260 2.619 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/pause.svg b/packages/icons/svg/pause.svg
index 3837ee6356..a0af89d7fa 100644
--- a/packages/icons/svg/pause.svg
+++ b/packages/icons/svg/pause.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M10.105 8.638 C 10.278 8.724,10.477 8.855,10.547 8.928 L 10.673 9.060 10.714 11.740 C 10.736 13.214,10.744 14.517,10.732 14.636 C 10.710 14.837,10.690 14.871,10.444 15.120 C 10.299 15.268,10.118 15.421,10.042 15.460 C 9.862 15.552,9.360 15.558,9.154 15.470 C 8.974 15.393,8.695 15.145,8.616 14.991 C 8.537 14.840,8.491 13.732,8.455 11.177 L 8.427 9.215 8.695 8.931 C 9.026 8.580,9.215 8.480,9.545 8.480 C 9.751 8.480,9.842 8.505,10.105 8.638 M14.946 8.655 C 15.101 8.737,15.283 8.861,15.350 8.932 L 15.473 9.060 15.522 11.939 L 15.571 14.819 15.260 15.108 C 14.888 15.455,14.657 15.577,14.380 15.576 C 14.107 15.574,13.887 15.452,13.532 15.104 L 13.240 14.817 13.240 12.014 L 13.240 9.210 13.500 8.929 C 13.848 8.554,14.015 8.470,14.382 8.491 C 14.610 8.504,14.716 8.535,14.946 8.655 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M10.100 8.640 C 10.247 8.715,10.438 8.840,10.524 8.918 L 10.681 9.060 10.707 11.908 L 10.733 14.757 10.621 14.918 C 10.489 15.109,10.132 15.422,9.982 15.479 C 9.823 15.540,9.299 15.529,9.139 15.462 C 9.063 15.430,8.913 15.317,8.807 15.210 C 8.658 15.062,8.607 14.977,8.586 14.847 C 8.539 14.556,8.485 12.973,8.457 11.053 L 8.429 9.207 8.644 8.979 C 8.763 8.854,8.912 8.714,8.975 8.669 C 9.300 8.438,9.682 8.428,10.100 8.640 M14.905 8.641 C 15.039 8.707,15.223 8.827,15.312 8.910 L 15.474 9.060 15.521 11.940 L 15.568 14.820 15.277 15.090 C 14.918 15.422,14.657 15.560,14.385 15.560 C 14.113 15.560,13.915 15.455,13.548 15.117 L 13.240 14.833 13.240 12.023 L 13.240 9.214 13.461 8.970 C 13.686 8.720,13.876 8.580,14.071 8.518 C 14.260 8.457,14.641 8.514,14.905 8.641 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/paypal.svg b/packages/icons/svg/paypal.svg
index df6492cc35..0727e6faa1 100644
--- a/packages/icons/svg/paypal.svg
+++ b/packages/icons/svg/paypal.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.905 3.057 C 6.730 3.121,6.541 3.287,6.455 3.450 C 6.382 3.590,3.988 18.508,4.019 18.630 C 4.032 18.680,4.094 18.779,4.158 18.850 L 4.273 18.980 6.116 18.991 L 7.958 19.002 7.979 18.911 C 7.990 18.861,8.179 17.668,8.399 16.260 C 8.618 14.852,8.817 13.631,8.842 13.546 C 8.867 13.459,8.960 13.318,9.057 13.221 C 9.300 12.978,9.422 12.960,10.844 12.960 C 12.467 12.960,13.120 12.881,14.059 12.570 C 15.724 12.018,16.897 10.841,17.500 9.117 C 17.695 8.558,17.911 7.645,17.966 7.147 C 18.099 5.923,17.747 4.912,16.919 4.145 C 16.358 3.626,15.562 3.296,14.420 3.110 C 13.924 3.030,13.739 3.025,10.480 3.013 C 7.613 3.003,7.035 3.010,6.905 3.057 M19.000 7.967 C 19.000 8.107,18.780 9.141,18.653 9.600 C 18.314 10.824,17.778 11.783,17.001 12.562 C 16.218 13.347,15.308 13.817,14.104 14.059 C 13.420 14.197,12.822 14.239,11.566 14.240 C 10.341 14.240,10.313 14.245,10.063 14.522 C 9.987 14.606,9.904 14.751,9.879 14.842 C 9.815 15.083,8.998 20.924,9.023 20.966 C 9.053 21.013,11.960 21.010,11.960 20.963 C 11.960 20.864,12.605 16.437,12.642 16.283 C 12.695 16.061,12.809 15.899,12.973 15.810 C 13.082 15.752,13.283 15.738,14.380 15.715 C 15.467 15.693,15.719 15.676,16.048 15.604 C 17.578 15.270,18.600 14.505,19.259 13.200 C 19.494 12.734,19.644 12.294,19.823 11.540 C 19.966 10.938,19.975 10.860,19.977 10.240 C 19.980 9.656,19.969 9.545,19.887 9.280 C 19.727 8.769,19.426 8.262,19.104 7.963 L 19.000 7.866 19.000 7.967 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.196 3.037 C 6.902 3.058,6.831 3.078,6.705 3.173 C 6.624 3.235,6.531 3.327,6.497 3.379 C 6.412 3.508,5.074 11.636,4.281 16.840 C 4.149 17.709,4.032 18.469,4.022 18.529 C 4.008 18.608,4.037 18.683,4.133 18.809 L 4.264 18.980 6.111 18.990 L 7.958 19.001 7.980 18.910 C 7.991 18.861,8.136 17.956,8.302 16.900 C 8.861 13.331,8.833 13.468,9.056 13.228 C 9.269 12.999,9.328 12.990,10.960 12.957 C 12.549 12.924,12.940 12.886,13.625 12.700 C 14.691 12.409,15.480 11.966,16.182 11.263 C 16.953 10.490,17.404 9.617,17.753 8.220 C 18.028 7.117,18.062 6.449,17.880 5.740 C 17.523 4.350,16.446 3.502,14.570 3.135 C 14.073 3.038,8.271 2.961,7.196 3.037 M18.945 8.286 C 18.684 9.730,18.298 10.808,17.743 11.637 C 16.906 12.887,15.855 13.624,14.380 13.995 C 13.713 14.162,13.227 14.208,11.800 14.237 C 10.271 14.268,10.276 14.267,10.049 14.541 C 9.984 14.620,9.911 14.751,9.887 14.832 C 9.841 14.987,9.370 18.232,9.161 19.840 C 9.094 20.357,9.033 20.820,9.026 20.868 C 9.018 20.918,9.037 20.966,9.069 20.978 C 9.160 21.013,11.854 21.002,11.910 20.967 C 11.942 20.947,12.063 20.221,12.242 18.978 C 12.606 16.457,12.652 16.195,12.756 16.026 C 12.912 15.775,12.980 15.762,14.369 15.720 C 15.717 15.679,16.026 15.641,16.650 15.437 C 18.089 14.966,19.064 13.962,19.578 12.420 C 20.008 11.131,20.105 9.926,19.840 9.161 C 19.705 8.769,19.463 8.354,19.210 8.079 L 19.020 7.872 18.945 8.286 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/pencil-alt.svg b/packages/icons/svg/pencil-alt.svg
index 2e8f6475c2..0637820fb4 100644
--- a/packages/icons/svg/pencil-alt.svg
+++ b/packages/icons/svg/pencil-alt.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.738 2.520 C 18.593 2.536,18.416 2.590,18.297 2.655 C 17.770 2.942,16.644 4.010,11.850 8.778 L 8.400 12.208 8.400 13.904 L 8.400 15.600 10.096 15.600 L 11.792 15.600 15.102 12.270 C 18.749 8.602,20.528 6.773,20.999 6.210 C 21.340 5.803,21.454 5.564,21.524 5.110 C 21.627 4.445,21.425 3.793,20.965 3.306 C 20.666 2.989,20.090 2.615,19.823 2.565 C 19.533 2.510,19.021 2.489,18.738 2.520 M4.036 4.995 C 3.573 5.092,2.920 5.720,2.550 6.426 L 2.400 6.712 2.400 13.200 L 2.400 19.688 2.559 19.994 C 2.903 20.653,3.347 21.097,4.006 21.441 L 4.312 21.600 10.834 21.600 L 17.356 21.600 17.563 21.478 C 18.300 21.044,18.656 20.696,19.022 20.055 L 19.200 19.742 19.200 16.892 L 19.200 14.043 18.956 13.782 C 18.587 13.388,18.505 13.349,18.003 13.328 L 17.579 13.311 17.375 13.472 C 17.263 13.561,17.101 13.718,17.016 13.822 L 16.862 14.010 16.834 14.755 C 16.819 15.165,16.805 16.332,16.803 17.350 L 16.800 19.200 10.800 19.200 L 4.800 19.200 4.800 13.205 L 4.800 7.210 7.353 7.193 C 10.291 7.172,9.988 7.217,10.433 6.741 C 10.629 6.532,10.682 6.445,10.721 6.271 C 10.783 5.994,10.697 5.630,10.499 5.331 C 10.250 4.955,10.505 4.982,7.140 4.973 C 5.512 4.969,4.115 4.979,4.036 4.995 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.480 2.579 C 17.961 2.749,16.806 3.837,10.950 9.677 L 8.400 12.220 8.400 13.910 L 8.400 15.600 10.090 15.600 L 11.780 15.600 14.183 13.190 C 18.713 8.647,20.708 6.594,21.124 6.046 C 21.485 5.571,21.623 4.978,21.509 4.398 C 21.385 3.770,21.048 3.289,20.447 2.883 C 19.990 2.576,19.891 2.547,19.240 2.533 C 18.811 2.524,18.613 2.536,18.480 2.579 M4.560 4.998 C 3.922 5.019,3.893 5.024,3.700 5.137 C 3.305 5.367,2.775 5.977,2.506 6.509 L 2.400 6.717 2.400 13.200 L 2.400 19.683 2.505 19.891 C 2.874 20.621,3.385 21.132,4.109 21.495 L 4.317 21.600 10.850 21.600 L 17.382 21.600 17.757 21.358 C 18.353 20.972,18.697 20.609,19.078 19.963 L 19.200 19.756 19.200 16.895 L 19.200 14.033 18.950 13.772 C 18.609 13.417,18.485 13.360,17.984 13.332 L 17.574 13.309 17.322 13.524 C 17.183 13.643,17.015 13.816,16.949 13.909 L 16.828 14.077 16.808 16.639 L 16.789 19.200 10.794 19.200 L 4.800 19.200 4.800 13.204 L 4.800 7.208 7.290 7.190 C 9.103 7.176,9.824 7.158,9.940 7.122 C 10.111 7.070,10.467 6.753,10.607 6.528 C 10.797 6.223,10.774 5.835,10.543 5.416 C 10.317 5.009,10.379 5.026,8.968 4.994 C 7.570 4.963,5.534 4.965,4.560 4.998 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/pencil.svg b/packages/icons/svg/pencil.svg
index d55139bd6b..6e75a905d1 100644
--- a/packages/icons/svg/pencil.svg
+++ b/packages/icons/svg/pencil.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.398 3.735 C 17.010 3.839,16.401 4.269,15.687 4.940 L 15.354 5.254 17.045 6.945 C 17.974 7.875,18.750 8.626,18.769 8.614 C 18.788 8.603,19.011 8.365,19.264 8.087 C 20.055 7.218,20.307 6.768,20.350 6.152 C 20.392 5.549,20.220 5.061,19.793 4.568 C 19.494 4.224,19.140 3.950,18.853 3.842 C 18.661 3.769,17.993 3.677,17.706 3.683 C 17.637 3.684,17.498 3.708,17.398 3.735 M8.630 11.990 L 3.600 17.020 3.600 18.710 L 3.600 20.400 5.290 20.400 L 6.980 20.400 12.010 15.370 L 17.040 10.340 15.350 8.650 L 13.660 6.960 8.630 11.990 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.340 3.763 C 17.209 3.809,16.955 3.942,16.777 4.058 C 16.462 4.264,15.753 4.853,15.489 5.129 L 15.359 5.265 17.036 6.933 C 17.959 7.850,18.732 8.600,18.755 8.600 C 18.809 8.600,19.563 7.767,19.822 7.420 C 20.418 6.623,20.518 5.866,20.133 5.081 C 20.021 4.852,19.900 4.695,19.623 4.415 C 19.099 3.888,18.785 3.754,17.942 3.701 C 17.636 3.681,17.543 3.691,17.340 3.763 M8.630 11.990 L 3.600 17.020 3.600 18.710 L 3.600 20.400 5.290 20.400 L 6.980 20.400 12.010 15.370 L 17.040 10.340 15.350 8.650 L 13.660 6.960 8.630 11.990 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/phone-incoming.svg b/packages/icons/svg/phone-incoming.svg
index bd01559a37..ed938c6db3 100644
--- a/packages/icons/svg/phone-incoming.svg
+++ b/packages/icons/svg/phone-incoming.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.930 2.545 C 19.758 2.631,19.275 3.086,17.309 5.012 C 16.411 5.891,15.671 6.604,15.664 6.595 C 15.656 6.587,15.629 6.157,15.602 5.640 C 15.576 5.123,15.540 4.624,15.522 4.530 C 15.477 4.289,15.325 4.081,15.060 3.898 C 14.837 3.744,14.820 3.740,14.441 3.726 C 13.972 3.710,13.854 3.758,13.520 4.098 L 13.300 4.323 13.274 5.131 C 13.260 5.576,13.246 6.855,13.244 7.972 L 13.240 10.005 13.370 10.168 C 13.442 10.258,13.625 10.437,13.777 10.566 L 14.055 10.800 16.807 10.800 L 19.559 10.800 19.838 10.536 C 20.203 10.192,20.341 9.923,20.338 9.560 C 20.334 9.089,20.004 8.651,19.586 8.560 C 19.473 8.536,18.960 8.482,18.446 8.441 C 17.932 8.399,17.504 8.357,17.494 8.347 C 17.464 8.317,17.767 7.988,19.137 6.560 C 21.176 4.436,21.343 4.249,21.485 3.940 C 21.661 3.556,21.497 3.019,21.119 2.739 C 20.847 2.538,20.165 2.427,19.930 2.545 M3.535 2.554 C 3.018 2.584,2.948 2.620,2.606 3.020 L 2.401 3.260 2.401 4.400 C 2.401 5.627,2.452 7.032,2.523 7.740 C 2.761 10.126,3.845 12.956,5.300 14.987 C 6.414 16.542,8.126 18.174,9.642 19.126 C 11.812 20.488,14.372 21.353,16.740 21.524 C 17.670 21.591,20.446 21.596,20.662 21.530 C 21.051 21.413,21.436 21.029,21.518 20.677 C 21.581 20.404,21.615 18.647,21.567 18.117 C 21.505 17.440,21.460 17.296,21.241 17.077 C 20.921 16.757,20.767 16.717,18.177 16.284 C 16.083 15.934,15.409 15.840,14.992 15.840 C 14.702 15.840,14.647 15.852,14.510 15.947 C 14.237 16.136,14.005 16.477,13.207 17.863 C 13.051 18.135,13.039 18.146,12.912 18.130 C 12.739 18.109,11.935 17.715,11.380 17.380 C 10.300 16.728,9.724 16.282,8.825 15.402 C 8.088 14.679,7.677 14.201,7.242 13.560 C 6.677 12.727,5.880 11.262,5.880 11.058 C 5.880 10.959,6.005 10.872,6.919 10.330 C 7.838 9.785,8.106 9.548,8.201 9.195 C 8.249 9.017,8.198 8.540,7.977 7.100 C 7.696 5.277,7.339 3.451,7.201 3.135 C 7.096 2.894,6.857 2.648,6.686 2.602 C 6.507 2.555,4.148 2.519,3.535 2.554 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.860 2.592 C 19.704 2.692,18.992 3.368,17.180 5.133 C 16.372 5.921,15.696 6.551,15.680 6.533 C 15.663 6.515,15.629 6.104,15.603 5.620 C 15.544 4.497,15.521 4.378,15.311 4.139 C 15.048 3.841,14.887 3.759,14.507 3.733 C 14.032 3.700,13.891 3.751,13.551 4.075 L 13.268 4.345 13.248 7.168 L 13.229 9.991 13.342 10.138 C 13.404 10.220,13.589 10.402,13.754 10.543 L 14.054 10.800 16.822 10.800 L 19.590 10.800 19.868 10.507 C 20.226 10.130,20.325 9.929,20.325 9.575 C 20.325 9.070,20.007 8.655,19.551 8.564 C 19.435 8.541,18.927 8.485,18.423 8.440 C 17.919 8.396,17.500 8.353,17.492 8.346 C 17.468 8.322,17.894 7.862,19.422 6.260 C 21.438 4.147,21.496 4.077,21.548 3.685 C 21.601 3.292,21.310 2.813,20.912 2.638 C 20.612 2.507,20.032 2.482,19.860 2.592 M3.180 2.595 C 2.982 2.646,2.900 2.705,2.644 2.985 L 2.400 3.252 2.400 4.416 C 2.401 5.648,2.453 7.076,2.522 7.740 C 2.763 10.074,3.852 12.944,5.235 14.890 C 6.452 16.603,8.204 18.255,9.883 19.273 C 11.724 20.390,13.985 21.188,16.080 21.460 C 16.693 21.539,18.780 21.603,19.840 21.574 C 20.560 21.554,20.636 21.545,20.828 21.454 C 20.950 21.397,21.118 21.266,21.237 21.135 C 21.555 20.788,21.572 20.692,21.576 19.240 C 21.581 17.590,21.519 17.272,21.137 16.981 C 20.842 16.756,20.496 16.674,18.260 16.302 C 16.307 15.977,15.636 15.880,15.158 15.853 C 14.743 15.829,14.721 15.832,14.547 15.934 C 14.318 16.068,14.064 16.407,13.596 17.200 C 13.050 18.126,13.054 18.120,12.934 18.120 C 12.577 18.120,10.786 17.079,9.860 16.332 C 8.973 15.617,7.948 14.548,7.373 13.738 C 6.849 13.000,5.880 11.278,5.880 11.084 C 5.880 10.976,6.007 10.880,6.740 10.439 C 7.820 9.790,8.121 9.531,8.199 9.185 C 8.239 9.006,8.192 8.531,8.017 7.365 C 7.752 5.605,7.378 3.643,7.224 3.209 C 7.144 2.986,6.987 2.783,6.806 2.671 C 6.661 2.581,6.650 2.580,4.980 2.572 C 4.056 2.568,3.246 2.579,3.180 2.595 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/phone-missed-call.svg b/packages/icons/svg/phone-missed-call.svg
index c4ecee330d..bf44e7f21b 100644
--- a/packages/icons/svg/phone-missed-call.svg
+++ b/packages/icons/svg/phone-missed-call.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.413 2.557 C 3.135 2.577,3.061 2.598,2.914 2.701 C 2.689 2.860,2.530 3.092,2.479 3.340 C 2.410 3.666,2.385 5.612,2.437 6.600 C 2.530 8.388,2.728 9.448,3.261 11.000 C 4.001 13.156,4.999 14.820,6.582 16.538 C 8.454 18.570,10.628 19.962,13.280 20.828 C 15.109 21.425,16.486 21.598,19.422 21.599 L 20.743 21.600 20.966 21.410 C 21.194 21.215,21.359 21.035,21.513 20.814 C 21.597 20.692,21.600 20.651,21.599 19.694 C 21.599 18.638,21.547 17.649,21.479 17.397 C 21.342 16.888,20.812 16.698,18.420 16.300 C 16.801 16.032,15.745 15.888,15.151 15.856 L 14.700 15.832 14.511 15.955 C 14.266 16.113,14.082 16.368,13.499 17.356 L 13.020 18.167 12.880 18.144 C 12.687 18.113,11.875 17.701,11.317 17.351 C 10.296 16.709,9.641 16.191,8.813 15.368 C 7.610 14.173,7.055 13.408,6.227 11.803 L 5.827 11.027 5.938 10.938 C 5.999 10.890,6.386 10.649,6.797 10.403 C 7.653 9.891,7.953 9.669,8.110 9.432 C 8.212 9.278,8.219 9.237,8.213 8.903 C 8.205 8.505,8.101 7.765,7.795 5.940 C 7.368 3.388,7.238 2.962,6.790 2.637 L 6.628 2.520 5.184 2.527 C 4.390 2.530,3.593 2.544,3.413 2.557 M14.020 3.755 C 13.665 3.849,13.438 4.086,13.314 4.491 C 13.138 5.068,13.299 5.347,14.557 6.649 L 15.088 7.199 14.508 7.809 C 13.368 9.011,13.257 9.165,13.265 9.546 C 13.276 10.021,13.468 10.376,13.832 10.589 C 13.999 10.687,14.057 10.698,14.402 10.699 C 14.750 10.700,14.800 10.690,14.943 10.595 C 15.141 10.464,15.462 10.178,16.210 9.471 L 16.800 8.913 17.430 9.513 C 18.271 10.314,18.494 10.499,18.790 10.647 C 19.011 10.756,19.068 10.769,19.277 10.750 C 19.821 10.700,20.192 10.336,20.323 9.722 C 20.418 9.282,20.250 9.019,19.134 7.850 L 18.514 7.200 19.113 6.570 C 19.825 5.822,20.191 5.392,20.265 5.213 C 20.349 5.013,20.336 4.508,20.243 4.328 C 20.142 4.132,19.856 3.859,19.671 3.782 C 19.473 3.699,18.917 3.699,18.744 3.781 C 18.534 3.881,18.098 4.247,17.430 4.885 L 16.800 5.486 16.170 4.887 C 15.038 3.811,14.958 3.757,14.462 3.737 C 14.285 3.729,14.086 3.737,14.020 3.755 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.674 2.557 C 3.098 2.580,3.085 2.582,2.914 2.704 C 2.684 2.869,2.493 3.187,2.453 3.474 C 2.402 3.833,2.417 6.674,2.473 7.280 C 2.627 8.951,2.921 10.175,3.548 11.759 C 4.120 13.206,4.791 14.364,5.759 15.576 C 8.007 18.392,10.849 20.236,14.300 21.120 C 15.652 21.466,16.563 21.558,18.945 21.588 L 20.750 21.611 21.094 21.282 C 21.605 20.791,21.600 20.806,21.600 19.657 C 21.599 18.616,21.544 17.621,21.473 17.400 C 21.449 17.323,21.396 17.213,21.356 17.157 C 21.243 16.995,20.839 16.804,20.346 16.680 C 19.250 16.403,16.244 15.930,15.113 15.857 L 14.685 15.829 14.483 15.978 C 14.253 16.147,13.948 16.581,13.381 17.550 C 13.121 17.994,13.003 18.160,12.949 18.160 C 12.735 18.160,11.762 17.647,10.931 17.096 C 10.066 16.522,9.617 16.146,8.718 15.245 C 7.536 14.058,7.042 13.370,6.177 11.704 C 5.831 11.037,5.828 11.027,5.908 10.962 C 5.952 10.926,6.293 10.711,6.664 10.486 C 7.558 9.942,7.937 9.671,8.081 9.472 C 8.193 9.317,8.200 9.286,8.200 8.924 C 8.200 8.229,7.652 4.819,7.359 3.687 C 7.215 3.132,7.079 2.873,6.826 2.673 L 6.633 2.520 5.446 2.527 C 4.794 2.531,3.996 2.544,3.674 2.557 M14.062 3.762 C 13.768 3.812,13.565 3.975,13.404 4.290 C 13.297 4.499,13.267 4.608,13.265 4.789 C 13.260 5.200,13.472 5.510,14.484 6.570 L 15.086 7.200 14.452 7.870 C 13.705 8.660,13.408 9.010,13.334 9.188 C 13.271 9.339,13.263 9.719,13.320 9.921 C 13.384 10.152,13.576 10.417,13.775 10.549 C 13.987 10.689,14.310 10.745,14.641 10.700 C 14.904 10.664,15.059 10.546,16.027 9.639 L 16.802 8.915 17.451 9.529 C 18.582 10.599,18.865 10.789,19.265 10.748 C 19.800 10.693,20.170 10.339,20.316 9.744 C 20.425 9.299,20.260 9.038,19.093 7.810 L 18.513 7.200 19.071 6.610 C 20.192 5.426,20.286 5.297,20.311 4.903 C 20.334 4.546,20.278 4.339,20.104 4.136 C 19.855 3.845,19.684 3.755,19.333 3.732 C 19.156 3.720,18.949 3.730,18.856 3.755 C 18.591 3.827,18.089 4.239,17.153 5.153 L 16.807 5.492 16.131 4.853 C 15.390 4.152,15.083 3.894,14.900 3.819 C 14.735 3.752,14.301 3.723,14.062 3.762 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/phone-outgoing.svg b/packages/icons/svg/phone-outgoing.svg
index 096bdb1e32..3cb1833d03 100644
--- a/packages/icons/svg/phone-outgoing.svg
+++ b/packages/icons/svg/phone-outgoing.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.535 2.554 C 3.018 2.584,2.948 2.620,2.606 3.020 L 2.401 3.260 2.401 4.400 C 2.401 5.627,2.452 7.032,2.523 7.740 C 2.761 10.126,3.845 12.956,5.300 14.987 C 6.414 16.542,8.126 18.174,9.642 19.126 C 11.812 20.488,14.372 21.353,16.740 21.524 C 17.670 21.591,20.446 21.596,20.662 21.530 C 21.051 21.413,21.436 21.029,21.518 20.677 C 21.581 20.404,21.615 18.647,21.567 18.117 C 21.505 17.440,21.460 17.296,21.241 17.077 C 20.921 16.757,20.767 16.717,18.177 16.284 C 16.083 15.934,15.409 15.840,14.992 15.840 C 14.702 15.840,14.647 15.852,14.510 15.947 C 14.237 16.136,14.005 16.477,13.207 17.863 C 13.051 18.135,13.039 18.146,12.912 18.130 C 12.739 18.109,11.935 17.715,11.380 17.380 C 10.300 16.728,9.724 16.282,8.825 15.402 C 8.088 14.679,7.677 14.201,7.242 13.560 C 6.677 12.727,5.880 11.262,5.880 11.058 C 5.880 10.959,6.005 10.872,6.919 10.330 C 7.838 9.785,8.106 9.548,8.201 9.195 C 8.249 9.017,8.198 8.540,7.977 7.100 C 7.696 5.277,7.339 3.451,7.201 3.135 C 7.096 2.894,6.857 2.648,6.686 2.602 C 6.507 2.555,4.148 2.519,3.535 2.554 M15.800 2.558 C 15.011 2.583,14.947 2.602,14.703 2.887 C 14.540 3.078,14.440 3.364,14.440 3.639 C 14.440 3.900,14.598 4.193,14.880 4.454 C 15.091 4.649,15.141 4.675,15.383 4.718 C 15.530 4.743,16.028 4.780,16.490 4.799 C 16.951 4.819,17.338 4.844,17.349 4.856 C 17.371 4.877,17.091 5.172,15.043 7.288 C 13.622 8.755,13.373 9.044,13.294 9.314 C 13.107 9.958,13.648 10.685,14.364 10.750 C 14.793 10.789,14.860 10.735,17.280 8.415 C 19.223 6.552,19.105 6.657,19.134 6.769 C 19.148 6.819,19.170 7.277,19.185 7.787 L 19.212 8.714 19.402 8.967 C 19.506 9.107,19.679 9.283,19.786 9.360 C 19.969 9.492,20.002 9.501,20.346 9.514 C 20.814 9.531,20.910 9.487,21.300 9.072 L 21.600 8.753 21.600 6.847 C 21.600 5.798,21.588 4.544,21.573 4.060 L 21.547 3.180 21.222 2.850 L 20.898 2.520 18.699 2.528 C 17.490 2.532,16.185 2.546,15.800 2.558 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.300 2.560 C 15.002 2.587,14.946 2.598,14.726 2.865 C 14.448 3.203,14.372 3.664,14.538 4.012 C 14.645 4.234,14.937 4.542,15.132 4.636 C 15.309 4.722,15.718 4.767,16.810 4.822 C 17.092 4.837,17.320 4.865,17.320 4.887 C 17.320 4.908,17.143 5.108,16.927 5.333 C 16.711 5.557,15.970 6.325,15.280 7.040 C 13.349 9.042,13.267 9.146,13.266 9.584 C 13.264 10.169,13.755 10.684,14.375 10.748 C 14.790 10.791,14.815 10.770,17.400 8.298 C 19.047 6.723,19.087 6.688,19.122 6.785 C 19.138 6.827,19.164 7.275,19.180 7.781 L 19.209 8.700 19.342 8.880 C 19.537 9.145,19.800 9.388,19.969 9.458 C 20.056 9.495,20.236 9.520,20.406 9.520 C 20.793 9.520,20.966 9.431,21.324 9.048 L 21.610 8.741 21.593 5.969 L 21.576 3.198 21.239 2.859 L 20.902 2.520 19.181 2.527 C 18.234 2.531,16.938 2.546,16.300 2.560 M3.180 2.595 C 2.982 2.646,2.900 2.705,2.644 2.985 L 2.400 3.252 2.400 4.416 C 2.401 5.648,2.453 7.076,2.522 7.740 C 2.763 10.074,3.852 12.944,5.235 14.890 C 6.452 16.603,8.204 18.255,9.883 19.273 C 11.724 20.390,13.985 21.188,16.080 21.460 C 16.693 21.539,18.780 21.603,19.840 21.574 C 20.560 21.554,20.636 21.545,20.828 21.454 C 20.950 21.397,21.118 21.266,21.237 21.135 C 21.555 20.788,21.572 20.692,21.576 19.240 C 21.581 17.590,21.519 17.272,21.137 16.981 C 20.842 16.756,20.496 16.674,18.260 16.302 C 16.307 15.977,15.636 15.880,15.158 15.853 C 14.743 15.829,14.721 15.832,14.547 15.934 C 14.318 16.068,14.064 16.407,13.596 17.200 C 13.050 18.126,13.054 18.120,12.934 18.120 C 12.577 18.120,10.786 17.079,9.860 16.332 C 8.973 15.617,7.948 14.548,7.373 13.738 C 6.849 13.000,5.880 11.278,5.880 11.084 C 5.880 10.976,6.007 10.880,6.740 10.439 C 7.820 9.790,8.121 9.531,8.199 9.185 C 8.239 9.006,8.192 8.531,8.017 7.365 C 7.752 5.605,7.378 3.643,7.224 3.209 C 7.144 2.986,6.987 2.783,6.806 2.671 C 6.661 2.581,6.650 2.580,4.980 2.572 C 4.056 2.568,3.246 2.579,3.180 2.595 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/phone.svg b/packages/icons/svg/phone.svg
index 1428ee8220..d9be349a67 100644
--- a/packages/icons/svg/phone.svg
+++ b/packages/icons/svg/phone.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.956 2.670 C 2.440 3.080,2.462 3.001,2.447 4.492 C 2.431 6.191,2.492 7.794,2.599 8.440 C 2.823 9.788,3.474 11.751,4.138 13.080 C 4.871 14.546,5.614 15.541,7.037 16.962 C 8.967 18.889,10.679 19.969,13.039 20.749 C 14.172 21.123,15.269 21.377,16.197 21.480 C 16.716 21.538,18.490 21.598,19.725 21.599 L 20.751 21.600 20.967 21.422 C 21.205 21.226,21.386 21.016,21.504 20.800 C 21.575 20.669,21.580 20.559,21.580 19.120 C 21.580 17.950,21.567 17.544,21.527 17.432 C 21.454 17.224,21.093 16.906,20.810 16.799 C 20.443 16.661,19.839 16.536,18.300 16.281 C 16.740 16.022,15.852 15.900,15.211 15.856 C 14.443 15.804,14.368 15.873,13.407 17.502 C 13.251 17.766,13.078 18.026,13.023 18.077 L 12.923 18.172 12.671 18.063 C 12.247 17.880,11.324 17.368,10.841 17.048 C 9.478 16.146,7.993 14.681,7.114 13.372 C 6.482 12.429,5.960 11.364,5.960 11.017 C 5.960 10.899,5.983 10.873,6.190 10.756 C 6.967 10.316,7.692 9.862,7.868 9.704 C 8.323 9.294,8.321 9.086,7.836 6.180 C 7.603 4.783,7.429 3.862,7.316 3.440 C 7.220 3.078,7.020 2.768,6.802 2.646 C 6.607 2.536,6.096 2.496,4.401 2.455 L 3.260 2.428 2.956 2.670 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.950 2.674 C 2.781 2.809,2.615 2.961,2.581 3.012 C 2.455 3.206,2.428 3.721,2.452 5.520 C 2.477 7.370,2.513 7.955,2.643 8.660 C 2.870 9.892,3.454 11.643,4.062 12.910 C 4.780 14.407,5.534 15.442,6.927 16.844 C 9.153 19.082,11.048 20.212,13.933 21.018 C 15.554 21.471,16.220 21.546,18.980 21.586 L 20.740 21.612 20.992 21.398 C 21.131 21.280,21.313 21.080,21.398 20.954 L 21.552 20.723 21.582 20.172 C 21.598 19.868,21.600 19.146,21.586 18.567 C 21.558 17.384,21.549 17.341,21.265 17.094 C 20.897 16.773,20.486 16.656,18.640 16.343 C 16.535 15.985,15.072 15.803,14.766 15.860 C 14.418 15.924,14.187 16.190,13.546 17.260 C 13.336 17.612,13.111 17.962,13.048 18.037 L 12.933 18.175 12.657 18.057 C 12.304 17.907,11.312 17.357,10.864 17.061 C 9.410 16.104,7.791 14.466,6.927 13.080 C 6.432 12.284,6.019 11.427,5.974 11.100 C 5.946 10.898,5.925 10.916,6.788 10.405 C 8.030 9.668,8.163 9.533,8.192 8.986 C 8.213 8.578,8.142 8.017,7.836 6.181 C 7.557 4.512,7.364 3.553,7.243 3.234 C 7.131 2.939,6.880 2.654,6.687 2.602 C 6.466 2.542,5.588 2.488,4.359 2.457 L 3.258 2.430 2.950 2.674 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/photograph.svg b/packages/icons/svg/photograph.svg
index 4993f89142..01710c092b 100644
--- a/packages/icons/svg/photograph.svg
+++ b/packages/icons/svg/photograph.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.420 3.759 C 3.646 3.783,3.893 3.751,3.408 4.149 C 3.082 4.416,2.788 4.781,2.569 5.193 L 2.400 5.509 2.400 11.996 L 2.400 18.483 2.505 18.691 C 2.888 19.451,3.349 19.912,4.109 20.295 L 4.317 20.400 10.669 20.396 C 14.162 20.394,17.633 20.381,18.383 20.366 L 19.746 20.340 20.083 20.172 C 20.632 19.897,21.092 19.429,21.438 18.794 L 21.599 18.500 21.599 12.009 L 21.600 5.517 21.494 5.309 C 21.210 4.747,20.815 4.295,20.313 3.960 L 19.955 3.720 14.407 3.729 C 11.356 3.733,7.762 3.747,6.420 3.759 M9.830 9.010 C 9.942 9.213,10.469 10.226,11.001 11.260 C 12.950 15.045,13.121 15.360,13.213 15.360 C 13.277 15.360,13.435 15.078,14.301 13.420 C 15.154 11.788,15.506 11.142,15.573 11.086 C 15.615 11.051,15.664 11.111,15.808 11.371 C 16.035 11.780,17.056 13.764,18.276 16.170 L 19.205 18.000 12.000 18.000 L 4.794 18.000 6.123 15.370 C 7.757 12.134,9.289 9.131,9.447 8.850 C 9.513 8.735,9.580 8.640,9.597 8.640 C 9.614 8.640,9.719 8.806,9.830 9.010 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.820 3.763 C 5.593 3.778,4.044 3.805,3.960 3.828 C 3.727 3.893,3.590 3.981,3.295 4.254 C 3.004 4.524,2.689 4.945,2.505 5.309 L 2.400 5.517 2.400 12.000 L 2.400 18.483 2.505 18.691 C 2.876 19.424,3.384 19.932,4.117 20.300 L 4.335 20.409 12.017 20.394 L 19.700 20.378 20.034 20.199 C 20.649 19.870,21.029 19.492,21.410 18.832 L 21.600 18.503 21.600 12.010 L 21.600 5.517 21.494 5.309 C 21.223 4.773,20.830 4.328,20.294 3.950 L 19.968 3.720 15.754 3.728 C 13.436 3.733,9.866 3.748,7.820 3.763 M9.912 9.171 C 10.021 9.374,10.547 10.386,11.080 11.420 C 12.897 14.943,13.132 15.376,13.215 15.349 C 13.288 15.325,13.506 14.941,14.282 13.460 C 15.256 11.603,15.537 11.100,15.599 11.100 C 15.628 11.100,15.732 11.244,15.829 11.420 C 16.026 11.776,17.213 14.083,18.417 16.450 L 19.206 18.000 12.000 18.000 L 4.794 18.000 6.003 15.610 C 7.916 11.828,9.233 9.245,9.413 8.927 C 9.575 8.638,9.579 8.635,9.646 8.717 C 9.683 8.763,9.803 8.967,9.912 9.171 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/php.svg b/packages/icons/svg/php.svg
index 359f7d7b4a..79b02b8eaa 100644
--- a/packages/icons/svg/php.svg
+++ b/packages/icons/svg/php.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.788 10.710 C 9.354 13.301,8.998 15.433,8.999 15.450 C 9.000 15.467,9.340 15.480,9.756 15.480 C 10.506 15.480,10.511 15.479,10.532 15.390 C 10.544 15.341,10.748 14.126,10.986 12.690 L 11.419 10.080 12.160 10.080 C 12.567 10.080,12.972 10.100,13.060 10.124 C 13.373 10.209,13.520 10.445,13.519 10.860 C 13.518 10.970,13.350 12.055,13.145 13.270 L 12.772 15.480 13.545 15.480 C 14.314 15.480,14.319 15.480,14.339 15.390 C 14.350 15.341,14.532 14.274,14.743 13.020 C 15.112 10.822,15.125 10.722,15.110 10.240 C 15.098 9.838,15.076 9.694,15.002 9.504 C 14.886 9.206,14.654 8.971,14.317 8.807 C 13.860 8.584,13.669 8.553,12.628 8.531 L 11.676 8.510 11.698 8.405 C 11.710 8.347,11.802 7.814,11.902 7.220 C 12.002 6.626,12.093 6.109,12.105 6.070 C 12.124 6.005,12.070 6.000,11.352 6.000 L 10.579 6.000 9.788 10.710 M3.582 8.567 C 3.573 8.596,3.221 10.699,2.800 13.240 C 2.379 15.781,2.025 17.892,2.014 17.931 C 1.995 17.997,2.043 18.001,2.766 17.991 L 3.537 17.980 3.746 16.740 C 3.861 16.058,3.956 15.497,3.958 15.494 C 3.959 15.491,4.415 15.480,4.970 15.469 C 6.118 15.446,6.406 15.401,6.880 15.172 C 7.107 15.063,7.259 14.948,7.503 14.704 C 8.159 14.046,8.556 13.258,8.766 12.191 C 8.884 11.595,8.892 10.678,8.784 10.260 C 8.556 9.378,8.063 8.847,7.253 8.613 C 7.055 8.556,6.763 8.543,5.310 8.530 C 3.915 8.517,3.597 8.524,3.582 8.567 M16.702 8.567 C 16.693 8.596,16.341 10.699,15.920 13.240 C 15.499 15.781,15.145 17.892,15.134 17.931 C 15.115 17.997,15.163 18.001,15.886 17.991 L 16.657 17.980 16.866 16.740 C 16.981 16.058,17.076 15.497,17.078 15.494 C 17.079 15.491,17.535 15.480,18.090 15.469 C 19.238 15.446,19.525 15.401,20.000 15.172 C 20.232 15.061,20.378 14.949,20.642 14.684 C 20.830 14.495,21.049 14.241,21.127 14.120 C 21.493 13.560,21.777 12.826,21.907 12.109 C 22.000 11.598,21.999 10.636,21.906 10.261 C 21.691 9.395,21.181 8.847,20.373 8.613 C 20.175 8.556,19.883 8.543,18.430 8.530 C 17.035 8.517,16.717 8.524,16.702 8.567 M6.240 10.082 C 6.804 10.171,7.057 10.309,7.191 10.600 C 7.238 10.704,7.255 10.868,7.255 11.240 C 7.257 12.340,6.903 13.370,6.416 13.678 C 6.121 13.866,5.608 13.968,4.846 13.991 C 4.219 14.010,4.192 14.007,4.213 13.935 C 4.225 13.894,4.372 13.023,4.540 12.000 C 4.708 10.977,4.852 10.117,4.861 10.090 C 4.882 10.027,5.856 10.021,6.240 10.082 M19.360 10.082 C 20.231 10.221,20.443 10.493,20.387 11.400 C 20.319 12.498,19.984 13.394,19.536 13.678 C 19.241 13.866,18.728 13.968,17.968 13.991 L 17.316 14.011 17.337 13.915 C 17.349 13.863,17.494 13.010,17.659 12.020 C 17.824 11.030,17.969 10.180,17.980 10.130 C 18.001 10.042,18.014 10.040,18.551 10.040 C 18.853 10.040,19.217 10.059,19.360 10.082 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.787 10.702 C 9.353 13.288,9.008 15.421,9.021 15.442 C 9.035 15.464,9.353 15.480,9.761 15.480 C 10.402 15.480,10.481 15.473,10.514 15.410 C 10.534 15.372,10.746 14.154,10.985 12.705 L 11.420 10.071 12.240 10.088 C 13.150 10.107,13.256 10.133,13.401 10.371 C 13.573 10.654,13.568 10.703,13.076 13.660 C 12.922 14.584,12.787 15.371,12.776 15.410 C 12.756 15.475,12.809 15.480,13.512 15.480 C 14.071 15.480,14.281 15.467,14.310 15.430 C 14.332 15.402,14.518 14.381,14.724 13.160 C 15.075 11.075,15.098 10.905,15.099 10.360 C 15.100 9.662,15.046 9.464,14.771 9.159 C 14.553 8.916,14.149 8.699,13.765 8.618 C 13.616 8.587,13.099 8.550,12.587 8.535 C 11.688 8.508,11.675 8.506,11.695 8.424 C 11.706 8.378,11.797 7.854,11.898 7.260 C 11.999 6.666,12.090 6.154,12.102 6.123 C 12.113 6.092,12.100 6.052,12.071 6.034 C 12.043 6.016,11.695 6.001,11.298 6.001 L 10.575 6.000 9.787 10.702 M3.657 8.544 C 3.580 8.562,3.524 8.868,2.805 13.192 C 2.382 15.737,2.032 17.856,2.028 17.900 C 2.020 17.977,2.044 17.980,2.780 17.980 L 3.540 17.980 3.748 16.760 C 3.862 16.089,3.957 15.527,3.958 15.510 C 3.959 15.493,4.253 15.480,4.610 15.479 C 6.317 15.477,6.867 15.330,7.486 14.712 C 8.284 13.914,8.734 12.864,8.840 11.554 C 8.953 10.169,8.546 9.213,7.651 8.764 C 7.281 8.578,7.122 8.563,5.385 8.543 C 4.480 8.533,3.703 8.533,3.657 8.544 M16.777 8.544 C 16.700 8.562,16.644 8.868,15.925 13.192 C 15.502 15.737,15.152 17.856,15.148 17.900 C 15.140 17.977,15.164 17.980,15.900 17.980 L 16.660 17.980 16.868 16.760 C 16.982 16.089,17.077 15.529,17.078 15.516 C 17.079 15.503,17.526 15.481,18.070 15.468 C 19.151 15.442,19.389 15.411,19.840 15.237 C 20.408 15.018,21.015 14.397,21.380 13.660 C 21.808 12.797,21.966 12.128,21.968 11.165 C 21.969 10.496,21.918 10.184,21.740 9.784 C 21.484 9.211,20.912 8.737,20.313 8.603 C 20.126 8.561,16.930 8.508,16.777 8.544 M6.185 10.083 C 6.763 10.164,7.024 10.294,7.166 10.572 C 7.245 10.727,7.249 10.780,7.228 11.399 C 7.212 11.876,7.182 12.155,7.121 12.400 C 7.037 12.739,6.785 13.307,6.651 13.461 C 6.416 13.730,6.010 13.889,5.380 13.959 C 5.005 14.001,4.268 14.015,4.234 13.980 C 4.223 13.969,4.359 13.094,4.537 12.034 C 4.827 10.306,4.868 10.104,4.940 10.076 C 5.061 10.030,5.833 10.034,6.185 10.083 M19.603 10.131 C 19.946 10.216,20.164 10.354,20.279 10.561 C 20.372 10.726,20.380 10.777,20.376 11.220 C 20.367 12.118,20.115 13.047,19.768 13.461 C 19.469 13.818,18.784 13.999,17.729 14.000 C 17.324 14.000,17.319 13.999,17.340 13.910 C 17.351 13.861,17.496 13.010,17.661 12.020 C 17.826 11.030,17.980 10.177,18.002 10.124 L 18.044 10.028 18.712 10.052 C 19.079 10.066,19.480 10.101,19.603 10.131 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/pinterest.svg b/packages/icons/svg/pinterest.svg
index 61c69ddcac..2e38a5d349 100644
--- a/packages/icons/svg/pinterest.svg
+++ b/packages/icons/svg/pinterest.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.026 3.160,9.091 3.415,8.060 3.918 C 5.286 5.272,3.420 7.912,3.059 10.992 C 2.668 14.338,4.231 17.656,7.080 19.530 C 7.486 19.798,8.569 20.360,8.677 20.360 C 8.716 20.360,8.724 20.321,8.706 20.210 C 8.651 19.884,8.632 18.689,8.675 18.320 C 8.699 18.111,8.963 16.908,9.260 15.647 L 9.802 13.354 9.695 13.027 C 9.556 12.598,9.516 11.734,9.615 11.310 C 9.760 10.694,10.132 10.178,10.594 9.950 C 10.821 9.839,10.897 9.821,11.158 9.823 C 11.875 9.826,12.280 10.274,12.280 11.063 C 12.280 11.501,12.212 11.819,11.895 12.877 C 11.489 14.227,11.462 14.391,11.579 14.783 C 11.744 15.338,12.266 15.688,12.928 15.687 C 13.886 15.686,14.724 15.056,15.240 13.947 C 15.568 13.242,15.697 12.590,15.697 11.640 C 15.696 10.807,15.631 10.496,15.321 9.860 C 14.880 8.953,14.098 8.330,13.048 8.051 C 12.710 7.961,12.575 7.947,12.000 7.944 C 11.021 7.938,10.434 8.088,9.724 8.525 C 7.933 9.627,7.357 12.027,8.474 13.736 L 8.654 14.011 8.523 14.576 C 8.370 15.238,8.320 15.339,8.167 15.301 C 7.962 15.250,7.501 14.897,7.249 14.598 C 6.920 14.207,6.555 13.480,6.420 12.946 C 6.234 12.207,6.219 11.370,6.380 10.599 C 6.789 8.632,8.259 7.120,10.288 6.580 C 11.162 6.348,12.418 6.288,13.286 6.439 C 15.564 6.833,17.288 8.489,17.663 10.642 C 17.752 11.152,17.722 12.366,17.606 12.920 C 17.428 13.778,17.076 14.604,16.616 15.242 C 16.349 15.613,15.760 16.195,15.436 16.408 C 14.966 16.719,14.436 16.937,13.859 17.059 C 13.482 17.139,12.774 17.137,12.443 17.055 C 11.892 16.918,11.365 16.605,11.139 16.278 C 11.078 16.190,11.021 16.126,11.013 16.134 C 11.004 16.143,10.863 16.664,10.699 17.292 C 10.535 17.921,10.362 18.540,10.315 18.667 C 10.197 18.991,9.807 19.790,9.560 20.215 C 9.447 20.411,9.369 20.584,9.387 20.600 C 9.442 20.649,10.033 20.794,10.540 20.881 C 11.163 20.989,12.192 21.026,12.820 20.963 C 15.990 20.645,18.694 18.775,20.083 15.940 C 21.614 12.817,21.198 9.096,19.013 6.369 C 17.607 4.614,15.561 3.439,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.078 3.059 C 9.841 3.211,8.987 3.464,7.940 3.990 C 7.014 4.455,6.296 4.987,5.540 5.766 C 4.680 6.652,4.106 7.527,3.665 8.626 C 2.432 11.701,2.939 15.078,5.022 17.660 C 5.588 18.363,6.473 19.151,7.202 19.603 C 7.612 19.858,8.583 20.360,8.666 20.360 C 8.715 20.360,8.721 20.320,8.697 20.130 C 8.681 20.003,8.668 19.531,8.668 19.080 L 8.668 18.260 8.854 17.429 C 8.956 16.972,9.211 15.869,9.420 14.977 L 9.802 13.356 9.721 13.095 C 9.607 12.726,9.547 12.163,9.573 11.718 C 9.620 10.919,10.020 10.238,10.610 9.950 C 10.792 9.861,10.890 9.840,11.123 9.840 C 11.497 9.840,11.686 9.900,11.897 10.086 C 12.128 10.289,12.245 10.570,12.269 10.979 C 12.293 11.379,12.206 11.816,11.898 12.860 C 11.619 13.805,11.521 14.214,11.520 14.423 C 11.520 14.679,11.628 14.977,11.799 15.194 C 12.229 15.739,13.158 15.839,13.940 15.427 C 14.422 15.172,14.965 14.553,15.242 13.943 C 15.563 13.234,15.685 12.609,15.687 11.660 C 15.689 10.896,15.644 10.621,15.439 10.128 C 15.015 9.112,14.305 8.467,13.200 8.095 C 12.866 7.983,12.843 7.981,11.980 7.981 C 11.008 7.982,10.794 8.015,10.266 8.245 C 8.066 9.205,7.240 11.807,8.507 13.788 L 8.651 14.013 8.540 14.496 C 8.412 15.059,8.338 15.265,8.252 15.297 C 8.078 15.364,7.382 14.805,7.072 14.348 C 6.853 14.025,6.542 13.362,6.446 13.012 C 6.261 12.343,6.233 11.320,6.379 10.620 C 6.589 9.614,7.067 8.733,7.800 8.000 C 8.589 7.211,9.616 6.688,10.800 6.473 C 11.445 6.355,12.760 6.346,13.340 6.455 C 14.490 6.671,15.469 7.181,16.260 7.978 C 16.965 8.687,17.397 9.472,17.617 10.440 C 17.757 11.055,17.728 12.406,17.561 13.103 C 17.387 13.832,17.031 14.639,16.637 15.200 C 16.376 15.570,15.779 16.170,15.442 16.399 C 15.104 16.628,14.622 16.849,14.160 16.987 C 13.810 17.091,13.730 17.100,13.140 17.098 C 12.525 17.096,12.487 17.091,12.176 16.973 C 11.706 16.795,11.361 16.561,11.129 16.264 C 11.080 16.200,11.028 16.159,11.015 16.172 C 11.002 16.185,10.867 16.660,10.714 17.228 C 10.305 18.752,10.309 18.740,9.830 19.687 C 9.543 20.255,9.401 20.577,9.426 20.602 C 9.485 20.661,10.179 20.828,10.663 20.900 C 11.273 20.990,12.290 21.020,12.820 20.963 C 14.613 20.771,16.314 20.077,17.660 18.988 C 18.110 18.624,18.855 17.849,19.187 17.400 C 21.199 14.680,21.555 11.221,20.137 8.169 C 19.466 6.725,18.303 5.391,16.920 4.480 C 16.082 3.927,14.823 3.404,13.848 3.203 C 13.068 3.042,11.767 2.975,11.078 3.059 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/play.svg b/packages/icons/svg/play.svg
index 397d86ff19..f4f5f851dd 100644
--- a/packages/icons/svg/play.svg
+++ b/packages/icons/svg/play.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M11.320 8.638 C 12.088 9.024,14.037 10.312,14.961 11.043 C 15.400 11.391,15.501 11.570,15.498 12.000 C 15.495 12.390,15.414 12.544,15.024 12.909 C 14.491 13.406,12.271 14.893,11.414 15.327 C 11.055 15.508,10.978 15.533,10.769 15.531 C 10.622 15.529,10.463 15.498,10.355 15.450 C 10.141 15.354,9.890 15.113,9.814 14.932 C 9.707 14.675,9.672 13.948,9.674 12.000 C 9.677 9.884,9.711 9.252,9.835 9.012 C 10.101 8.493,10.721 8.337,11.320 8.638 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M11.234 8.602 C 11.714 8.814,13.527 9.977,14.513 10.704 C 15.361 11.331,15.480 11.487,15.480 11.980 C 15.480 12.371,15.419 12.509,15.111 12.814 C 14.678 13.242,13.220 14.267,12.040 14.971 C 11.119 15.521,10.860 15.601,10.431 15.472 C 10.219 15.409,9.905 15.121,9.823 14.915 C 9.720 14.657,9.682 13.898,9.682 12.040 C 9.681 10.023,9.722 9.264,9.844 9.013 C 10.071 8.542,10.687 8.360,11.234 8.602 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/plus-circle.svg b/packages/icons/svg/plus-circle.svg
index 75c796050f..f3db37599e 100644
--- a/packages/icons/svg/plus-circle.svg
+++ b/packages/icons/svg/plus-circle.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.368 7.365 C 12.659 7.427,12.925 7.688,13.016 8.000 C 13.085 8.239,13.141 8.927,13.184 10.065 L 13.211 10.790 13.916 10.817 C 14.957 10.857,15.839 10.919,16.014 10.965 C 16.206 11.015,16.490 11.274,16.598 11.496 C 16.718 11.744,16.712 12.229,16.586 12.501 C 16.466 12.757,16.135 13.061,15.933 13.099 C 15.627 13.156,14.833 13.198,14.035 13.199 L 13.210 13.200 13.183 13.970 C 13.153 14.815,13.098 15.654,13.056 15.918 C 13.021 16.136,12.828 16.418,12.606 16.576 C 12.439 16.695,12.416 16.700,12.026 16.700 C 11.656 16.700,11.604 16.690,11.434 16.591 C 11.221 16.466,11.012 16.221,10.959 16.036 C 10.912 15.872,10.850 14.989,10.816 13.990 L 10.789 13.200 9.965 13.198 C 8.859 13.195,8.087 13.146,7.937 13.069 C 7.872 13.035,7.726 12.910,7.613 12.789 C 7.354 12.516,7.302 12.346,7.333 11.863 C 7.353 11.552,7.371 11.485,7.473 11.343 C 7.624 11.132,7.796 11.016,8.036 10.965 C 8.258 10.917,9.111 10.857,10.105 10.818 L 10.790 10.791 10.817 10.106 C 10.876 8.579,10.918 8.114,11.015 7.900 C 11.114 7.683,11.283 7.501,11.489 7.390 C 11.641 7.308,12.045 7.296,12.368 7.365 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.316 7.363 C 12.600 7.424,12.827 7.602,12.942 7.853 C 13.061 8.114,13.106 8.497,13.165 9.780 C 13.190 10.330,13.213 10.782,13.215 10.785 C 13.218 10.788,13.679 10.811,14.240 10.837 C 15.674 10.903,15.975 10.938,16.189 11.063 C 16.395 11.184,16.583 11.428,16.645 11.656 C 16.702 11.869,16.670 12.304,16.583 12.487 C 16.478 12.709,16.258 12.944,16.070 13.035 C 15.851 13.141,15.117 13.200,14.010 13.200 L 13.200 13.200 13.200 13.390 C 13.200 13.727,13.120 15.249,13.082 15.626 C 13.036 16.096,12.934 16.300,12.612 16.566 C 12.361 16.773,11.707 16.768,11.388 16.557 C 11.188 16.424,11.014 16.196,10.960 15.995 C 10.918 15.839,10.856 14.929,10.817 13.910 L 10.789 13.200 9.925 13.199 C 8.999 13.198,8.158 13.148,7.989 13.083 C 7.833 13.024,7.570 12.771,7.448 12.563 C 7.349 12.395,7.340 12.346,7.343 11.972 C 7.346 11.592,7.354 11.550,7.464 11.372 C 7.552 11.230,7.639 11.153,7.801 11.071 C 8.062 10.940,8.363 10.905,9.800 10.837 C 10.339 10.812,10.782 10.788,10.785 10.785 C 10.788 10.782,10.811 10.312,10.836 9.740 C 10.893 8.469,10.938 8.074,11.052 7.845 C 11.153 7.642,11.403 7.414,11.578 7.363 C 11.751 7.313,12.082 7.313,12.316 7.363 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/plus-sm.svg b/packages/icons/svg/plus-sm.svg
index ccec3a61d5..ab24d8f5ff 100644
--- a/packages/icons/svg/plus-sm.svg
+++ b/packages/icons/svg/plus-sm.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.383 6.248 C 11.082 6.455,10.873 6.724,10.836 6.950 C 10.819 7.054,10.804 7.961,10.802 8.965 L 10.800 10.790 9.610 10.817 C 8.203 10.848,7.001 10.909,6.785 10.958 C 6.598 11.001,6.396 11.159,6.226 11.394 C 6.103 11.563,6.100 11.580,6.100 11.997 L 6.100 12.427 6.269 12.646 C 6.362 12.767,6.515 12.927,6.609 13.002 C 6.776 13.137,6.786 13.139,7.279 13.166 C 7.555 13.181,8.457 13.195,9.284 13.197 L 10.787 13.200 10.812 15.090 C 10.826 16.172,10.854 17.040,10.878 17.120 C 10.934 17.313,11.248 17.660,11.495 17.802 C 11.669 17.901,11.743 17.919,11.980 17.919 C 12.170 17.918,12.314 17.894,12.429 17.841 C 12.629 17.751,12.981 17.433,13.070 17.261 C 13.150 17.108,13.193 16.157,13.197 14.432 L 13.200 13.204 15.130 13.192 C 17.057 13.180,17.060 13.180,17.249 13.087 C 17.461 12.982,17.720 12.696,17.839 12.435 C 18.076 11.912,17.748 11.097,17.247 10.962 C 17.060 10.912,15.936 10.855,14.335 10.816 L 13.210 10.789 13.191 8.864 C 13.178 7.592,13.156 6.903,13.127 6.830 C 13.062 6.670,12.772 6.370,12.563 6.248 C 12.406 6.156,12.327 6.139,11.981 6.127 C 11.580 6.112,11.580 6.112,11.383 6.248 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.321 6.305 C 11.173 6.417,11.011 6.584,10.941 6.697 L 10.820 6.894 10.807 8.842 L 10.795 10.790 9.727 10.817 C 8.526 10.847,7.196 10.907,6.909 10.944 C 6.673 10.973,6.393 11.156,6.228 11.388 C 6.118 11.542,6.106 11.592,6.089 11.958 C 6.070 12.336,6.075 12.369,6.169 12.510 C 6.326 12.748,6.628 13.039,6.791 13.109 C 6.919 13.164,7.213 13.176,8.870 13.192 L 10.800 13.210 10.803 14.415 C 10.808 16.237,10.848 17.069,10.938 17.239 C 11.049 17.450,11.413 17.783,11.616 17.860 C 11.839 17.946,12.233 17.928,12.452 17.822 C 12.661 17.721,12.977 17.429,13.055 17.264 C 13.147 17.071,13.199 16.074,13.199 14.494 L 13.200 13.207 15.130 13.193 C 17.313 13.177,17.196 13.194,17.538 12.847 C 17.806 12.575,17.900 12.361,17.900 12.019 C 17.900 11.782,17.879 11.696,17.768 11.469 C 17.617 11.163,17.458 11.022,17.199 10.965 C 16.994 10.920,15.683 10.854,14.210 10.815 L 13.200 10.789 13.197 9.384 C 13.195 8.612,13.181 7.717,13.166 7.396 L 13.139 6.812 12.984 6.623 C 12.899 6.519,12.736 6.371,12.620 6.295 C 12.425 6.165,12.385 6.155,11.995 6.133 L 11.579 6.109 11.321 6.305 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/plus.svg b/packages/icons/svg/plus.svg
index 544cf5e31d..3683c2ff2b 100644
--- a/packages/icons/svg/plus.svg
+++ b/packages/icons/svg/plus.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.334 3.894 C 11.006 4.139,10.927 4.236,10.876 4.462 C 10.846 4.595,10.825 5.676,10.812 7.730 L 10.793 10.800 10.306 10.800 C 9.495 10.800,5.539 10.876,4.931 10.903 C 4.392 10.927,4.352 10.934,4.188 11.043 C 3.855 11.264,3.598 11.782,3.659 12.113 C 3.724 12.466,3.900 12.737,4.254 13.030 L 4.459 13.200 7.630 13.200 L 10.800 13.200 10.800 16.370 L 10.800 19.540 10.951 19.739 C 11.138 19.985,11.434 20.213,11.654 20.280 C 11.745 20.308,11.941 20.330,12.089 20.329 C 12.421 20.327,12.538 20.262,12.893 19.879 C 13.109 19.645,13.153 19.574,13.174 19.416 C 13.188 19.313,13.200 17.872,13.200 16.214 L 13.200 13.200 16.370 13.200 L 19.541 13.200 19.759 13.021 C 20.043 12.787,20.262 12.460,20.320 12.180 C 20.401 11.790,20.215 11.357,19.827 11.033 L 19.658 10.891 16.879 10.845 C 15.351 10.820,13.898 10.799,13.650 10.800 L 13.200 10.800 13.200 7.604 L 13.200 4.409 12.863 4.090 C 12.487 3.734,12.452 3.720,11.919 3.720 L 11.569 3.720 11.334 3.894 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.296 3.930 C 10.859 4.268,10.865 4.246,10.834 5.460 C 10.819 6.032,10.805 7.465,10.803 8.644 L 10.800 10.789 9.130 10.817 C 6.687 10.857,4.556 10.915,4.407 10.945 C 4.219 10.982,3.903 11.284,3.773 11.551 C 3.539 12.028,3.662 12.465,4.162 12.936 L 4.441 13.200 7.621 13.200 L 10.800 13.200 10.800 16.373 L 10.800 19.547 10.940 19.727 C 11.114 19.949,11.347 20.140,11.570 20.241 C 11.806 20.348,12.267 20.349,12.476 20.242 C 12.685 20.135,13.109 19.665,13.159 19.485 C 13.185 19.394,13.200 18.203,13.200 16.270 L 13.200 13.200 16.379 13.200 L 19.557 13.200 19.818 12.956 C 20.468 12.348,20.495 11.693,19.895 11.107 L 19.675 10.893 17.868 10.866 C 16.873 10.852,15.417 10.828,14.630 10.814 L 13.200 10.787 13.200 7.597 L 13.200 4.407 12.873 4.104 C 12.500 3.756,12.410 3.721,11.914 3.720 L 11.568 3.720 11.296 3.930 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/podio.svg b/packages/icons/svg/podio.svg
new file mode 100644
index 0000000000..dc38bb7da9
--- /dev/null
+++ b/packages/icons/svg/podio.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.460 3.026 C 11.394 3.034,11.171 3.060,10.964 3.084 C 8.746 3.341,6.591 4.705,5.310 6.660 C 4.420 8.020,3.951 9.717,4.013 11.360 C 4.082 13.195,4.716 14.879,5.860 16.260 C 6.269 16.754,11.316 21.794,11.500 21.893 C 11.718 22.009,12.190 22.013,12.420 21.900 C 12.948 21.641,13.191 20.984,12.949 20.469 C 12.880 20.322,12.263 19.675,10.248 17.641 C 8.812 16.190,7.558 14.907,7.463 14.790 C 6.883 14.078,6.466 13.167,6.274 12.189 C 6.159 11.606,6.152 10.656,6.257 10.060 C 6.673 7.726,8.419 5.877,10.726 5.330 C 11.143 5.231,11.249 5.222,12.020 5.221 C 12.683 5.220,12.932 5.235,13.200 5.293 C 15.301 5.741,16.949 7.212,17.534 9.160 C 17.746 9.867,17.780 10.122,17.780 11.020 C 17.780 11.747,17.767 11.919,17.687 12.295 C 17.559 12.892,17.355 13.461,17.090 13.960 C 16.655 14.779,16.670 14.742,16.670 15.013 C 16.670 15.952,17.748 16.458,18.444 15.846 C 18.783 15.547,19.392 14.314,19.659 13.384 C 20.234 11.381,20.073 9.285,19.204 7.460 C 18.030 4.992,15.577 3.307,12.774 3.041 C 12.365 3.002,11.726 2.995,11.460 3.026 M11.349 7.421 C 10.542 7.574,9.786 8.013,9.249 8.640 C 8.836 9.123,8.569 9.653,8.413 10.300 C 8.304 10.751,8.323 11.519,8.454 12.018 C 8.572 12.465,8.805 12.964,9.044 13.285 C 9.132 13.403,10.364 14.673,11.781 16.106 C 13.741 18.088,14.405 18.735,14.550 18.806 C 14.810 18.934,15.266 18.937,15.502 18.812 C 16.038 18.529,16.260 17.873,15.997 17.353 C 15.938 17.237,15.071 16.337,13.358 14.616 C 10.386 11.629,10.541 11.821,10.540 11.100 C 10.540 10.707,10.551 10.636,10.646 10.433 C 11.091 9.484,12.323 9.248,13.098 9.962 C 13.453 10.289,13.643 10.852,13.559 11.322 C 13.473 11.801,13.468 11.984,13.536 12.189 C 13.794 12.964,14.818 13.178,15.365 12.572 C 15.633 12.275,15.786 11.597,15.748 10.880 C 15.689 9.794,15.144 8.765,14.281 8.111 C 13.940 7.853,13.380 7.580,12.980 7.477 C 12.555 7.367,11.775 7.340,11.349 7.421 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/presentation-chart-1.svg b/packages/icons/svg/presentation-chart-1.svg
index ed00459e09..b074b83290 100644
--- a/packages/icons/svg/presentation-chart-1.svg
+++ b/packages/icons/svg/presentation-chart-1.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 3.721 C 5.727 3.736,3.430 3.762,3.295 3.778 C 3.160 3.794,2.994 3.841,2.926 3.882 C 2.639 4.056,2.408 4.562,2.455 4.910 C 2.513 5.335,2.744 5.626,3.222 5.881 L 3.500 6.029 3.525 6.504 C 3.539 6.766,3.564 9.054,3.581 11.590 L 3.611 16.200 3.848 16.566 C 4.281 17.235,4.806 17.692,5.362 17.882 C 5.608 17.966,5.700 17.971,7.330 17.991 C 8.271 18.002,9.040 18.019,9.040 18.029 C 9.040 18.039,8.778 18.320,8.457 18.654 C 7.432 19.720,7.260 19.970,7.260 20.400 C 7.261 20.900,7.604 21.355,8.090 21.499 C 8.697 21.680,8.887 21.552,10.811 19.674 L 12.002 18.512 13.026 19.519 C 14.177 20.650,14.783 21.208,15.057 21.390 C 15.296 21.548,15.545 21.582,15.860 21.500 C 16.573 21.314,16.949 20.574,16.647 19.956 C 16.539 19.736,16.310 19.467,15.556 18.673 C 15.228 18.329,14.960 18.036,14.960 18.023 C 14.960 18.011,15.505 18.000,16.170 17.999 C 17.738 17.997,18.469 17.954,18.760 17.843 C 19.228 17.666,19.826 17.099,20.219 16.460 L 20.391 16.180 20.416 11.940 C 20.430 9.608,20.452 7.325,20.466 6.868 L 20.491 6.036 20.736 5.913 C 21.298 5.631,21.523 5.313,21.529 4.793 C 21.533 4.389,21.412 4.165,21.011 3.830 L 20.831 3.680 17.046 3.687 C 14.964 3.691,11.073 3.706,8.400 3.721 M17.413 7.467 C 17.781 7.727,17.873 7.945,17.878 8.566 L 17.880 8.872 17.367 9.426 C 17.084 9.731,16.260 10.583,15.536 11.320 C 12.573 14.335,12.325 14.525,11.672 14.281 C 11.394 14.177,11.042 13.893,10.250 13.136 L 9.600 12.514 8.910 13.175 C 8.028 14.021,7.776 14.221,7.494 14.303 C 6.988 14.450,6.480 14.227,6.243 13.754 C 6.138 13.543,6.120 13.464,6.121 13.204 C 6.122 12.705,6.163 12.643,7.234 11.523 C 7.977 10.745,8.660 10.113,9.014 9.877 C 9.240 9.726,9.262 9.720,9.575 9.721 C 9.803 9.721,9.948 9.744,10.062 9.795 C 10.272 9.891,10.807 10.340,11.473 10.981 L 12.006 11.493 13.113 10.395 C 14.630 8.889,15.553 7.997,15.980 7.624 L 16.340 7.310 16.797 7.332 C 17.215 7.352,17.266 7.364,17.413 7.467 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.834 3.724 C 5.438 3.743,3.366 3.770,3.225 3.796 C 2.951 3.846,2.829 3.923,2.682 4.137 C 2.567 4.304,2.440 4.663,2.440 4.820 C 2.440 5.194,2.734 5.601,3.192 5.860 C 3.350 5.949,3.485 6.055,3.499 6.100 C 3.512 6.144,3.542 8.430,3.566 11.180 L 3.609 16.180 3.734 16.394 C 3.933 16.732,4.358 17.240,4.620 17.451 C 4.752 17.558,4.991 17.709,5.152 17.786 C 5.418 17.915,5.489 17.931,5.952 17.962 C 6.231 17.981,6.964 17.999,7.580 18.001 C 8.196 18.003,8.772 18.017,8.859 18.033 L 9.019 18.061 8.432 18.681 C 7.437 19.730,7.266 19.985,7.269 20.407 C 7.275 20.983,7.748 21.487,8.340 21.549 C 8.796 21.596,9.174 21.294,11.328 19.165 L 11.995 18.506 12.952 19.446 C 14.032 20.506,14.760 21.181,15.013 21.355 C 15.256 21.522,15.473 21.573,15.739 21.523 C 16.338 21.413,16.737 20.963,16.737 20.400 C 16.737 19.973,16.640 19.830,15.586 18.706 C 15.259 18.358,15.007 18.058,15.026 18.041 C 15.044 18.023,15.762 17.999,16.620 17.988 C 18.281 17.966,18.566 17.939,18.894 17.773 C 19.337 17.551,19.879 17.010,20.231 16.440 L 20.392 16.180 20.416 12.400 C 20.429 10.321,20.452 8.039,20.466 7.329 L 20.491 6.039 20.759 5.898 C 21.064 5.737,21.321 5.502,21.425 5.287 C 21.466 5.203,21.504 5.015,21.513 4.848 C 21.535 4.440,21.464 4.275,21.123 3.945 L 20.848 3.680 17.534 3.687 C 15.711 3.690,11.796 3.707,8.834 3.724 M17.379 7.457 C 17.733 7.666,17.841 7.885,17.870 8.462 L 17.891 8.863 17.275 9.520 C 16.355 10.503,13.606 13.271,13.152 13.670 C 12.708 14.062,12.338 14.306,12.125 14.345 C 11.712 14.423,11.290 14.140,10.077 12.970 L 9.602 12.512 8.951 13.132 C 8.142 13.902,7.909 14.102,7.679 14.220 C 7.134 14.498,6.524 14.292,6.238 13.733 C 6.155 13.570,6.140 13.484,6.140 13.176 C 6.140 12.826,6.145 12.805,6.284 12.596 C 6.627 12.082,8.352 10.358,8.953 9.929 L 9.218 9.740 9.579 9.740 C 9.846 9.741,9.978 9.760,10.086 9.813 C 10.291 9.915,10.763 10.312,11.433 10.948 L 12.007 11.493 13.073 10.434 C 14.562 8.957,15.558 7.994,15.980 7.625 L 16.340 7.310 16.779 7.336 C 17.138 7.358,17.246 7.380,17.379 7.457 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/presentation-chart-2.svg b/packages/icons/svg/presentation-chart-2.svg
index 582732a694..cb8f3cc7df 100644
--- a/packages/icons/svg/presentation-chart-2.svg
+++ b/packages/icons/svg/presentation-chart-2.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 3.721 C 5.727 3.736,3.430 3.762,3.295 3.778 C 3.160 3.794,2.994 3.841,2.926 3.882 C 2.639 4.056,2.408 4.562,2.455 4.910 C 2.513 5.335,2.744 5.626,3.222 5.881 L 3.500 6.029 3.525 6.504 C 3.539 6.766,3.564 9.054,3.581 11.590 L 3.611 16.200 3.848 16.566 C 4.281 17.235,4.806 17.692,5.362 17.882 C 5.608 17.966,5.700 17.971,7.330 17.991 C 8.271 18.002,9.040 18.019,9.040 18.029 C 9.040 18.039,8.778 18.320,8.457 18.654 C 7.432 19.720,7.260 19.970,7.260 20.400 C 7.261 20.900,7.604 21.355,8.090 21.499 C 8.697 21.680,8.887 21.552,10.811 19.674 L 12.002 18.512 13.026 19.519 C 14.177 20.650,14.783 21.208,15.057 21.390 C 15.296 21.548,15.545 21.582,15.860 21.500 C 16.573 21.314,16.949 20.574,16.647 19.956 C 16.539 19.736,16.310 19.467,15.556 18.673 C 15.228 18.329,14.960 18.036,14.960 18.023 C 14.960 18.011,15.505 18.000,16.170 17.999 C 17.738 17.997,18.469 17.954,18.760 17.843 C 19.228 17.666,19.826 17.099,20.219 16.460 L 20.391 16.180 20.416 11.940 C 20.430 9.608,20.452 7.325,20.466 6.868 L 20.491 6.036 20.736 5.913 C 21.298 5.631,21.523 5.313,21.529 4.793 C 21.533 4.389,21.412 4.165,21.011 3.830 L 20.831 3.680 17.046 3.687 C 14.964 3.691,11.073 3.706,8.400 3.721 M16.105 7.438 C 16.278 7.524,16.477 7.655,16.547 7.728 L 16.673 7.860 16.714 10.540 C 16.736 12.014,16.744 13.317,16.732 13.436 C 16.710 13.637,16.690 13.671,16.444 13.920 C 16.299 14.068,16.118 14.221,16.042 14.260 C 15.862 14.352,15.360 14.358,15.154 14.270 C 14.974 14.193,14.695 13.945,14.616 13.791 C 14.537 13.640,14.491 12.532,14.455 9.977 L 14.427 8.015 14.695 7.731 C 15.026 7.380,15.215 7.280,15.545 7.280 C 15.751 7.280,15.842 7.305,16.105 7.438 M12.545 8.614 C 12.854 8.778,12.987 8.996,13.041 9.430 C 13.076 9.720,13.158 12.333,13.160 13.219 L 13.160 13.617 12.870 13.901 C 12.223 14.534,11.777 14.534,11.130 13.901 L 10.840 13.617 10.841 11.419 L 10.842 9.220 11.031 8.993 C 11.261 8.717,11.382 8.619,11.562 8.564 C 11.754 8.505,12.403 8.538,12.545 8.614 M8.532 9.721 C 8.878 9.771,9.055 9.863,9.288 10.111 C 9.434 10.267,9.478 10.347,9.495 10.485 C 9.507 10.581,9.528 11.328,9.541 12.144 L 9.565 13.628 9.255 13.914 C 8.882 14.258,8.655 14.377,8.380 14.376 C 8.107 14.374,7.887 14.252,7.532 13.904 L 7.240 13.617 7.240 12.007 L 7.240 10.397 7.550 10.083 C 7.852 9.777,7.911 9.742,8.240 9.685 C 8.251 9.683,8.382 9.699,8.532 9.721 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.834 3.724 C 5.438 3.743,3.366 3.770,3.225 3.796 C 2.951 3.846,2.829 3.923,2.682 4.137 C 2.567 4.304,2.440 4.663,2.440 4.820 C 2.440 5.194,2.734 5.601,3.192 5.860 C 3.350 5.949,3.485 6.055,3.499 6.100 C 3.512 6.144,3.542 8.430,3.566 11.180 L 3.609 16.180 3.734 16.394 C 3.933 16.732,4.358 17.240,4.620 17.451 C 4.752 17.558,4.991 17.709,5.152 17.786 C 5.418 17.915,5.489 17.931,5.952 17.962 C 6.231 17.981,6.964 17.999,7.580 18.001 C 8.196 18.003,8.772 18.017,8.859 18.033 L 9.019 18.061 8.432 18.681 C 7.437 19.730,7.266 19.985,7.269 20.407 C 7.275 20.983,7.748 21.487,8.340 21.549 C 8.796 21.596,9.174 21.294,11.328 19.165 L 11.995 18.506 12.952 19.446 C 14.032 20.506,14.760 21.181,15.013 21.355 C 15.256 21.522,15.473 21.573,15.739 21.523 C 16.338 21.413,16.737 20.963,16.737 20.400 C 16.737 19.973,16.640 19.830,15.586 18.706 C 15.259 18.358,15.007 18.058,15.026 18.041 C 15.044 18.023,15.762 17.999,16.620 17.988 C 18.281 17.966,18.566 17.939,18.894 17.773 C 19.337 17.551,19.879 17.010,20.231 16.440 L 20.392 16.180 20.416 12.400 C 20.429 10.321,20.452 8.039,20.466 7.329 L 20.491 6.039 20.759 5.898 C 21.064 5.737,21.321 5.502,21.425 5.287 C 21.466 5.203,21.504 5.015,21.513 4.848 C 21.535 4.440,21.464 4.275,21.123 3.945 L 20.848 3.680 17.534 3.687 C 15.711 3.690,11.796 3.707,8.834 3.724 M16.100 7.440 C 16.247 7.515,16.438 7.640,16.524 7.718 L 16.681 7.860 16.707 10.708 L 16.733 13.557 16.621 13.718 C 16.489 13.909,16.132 14.222,15.982 14.279 C 15.823 14.340,15.299 14.329,15.139 14.262 C 15.063 14.230,14.913 14.117,14.807 14.010 C 14.658 13.862,14.607 13.777,14.586 13.647 C 14.539 13.356,14.485 11.773,14.457 9.853 L 14.429 8.007 14.644 7.779 C 14.763 7.654,14.912 7.514,14.975 7.469 C 15.300 7.238,15.682 7.228,16.100 7.440 M12.421 8.582 C 12.581 8.606,12.823 8.810,12.922 9.004 C 13.036 9.227,13.068 9.667,13.125 11.777 L 13.175 13.615 12.881 13.890 C 12.208 14.520,11.801 14.523,11.129 13.900 L 10.840 13.633 10.840 11.422 L 10.840 9.212 11.084 8.945 C 11.219 8.798,11.367 8.657,11.414 8.631 C 11.592 8.534,11.978 8.515,12.421 8.582 M8.783 9.782 C 9.011 9.845,9.323 10.093,9.428 10.295 C 9.484 10.401,9.500 10.663,9.532 12.020 L 9.569 13.620 9.277 13.890 C 8.918 14.223,8.657 14.360,8.385 14.360 C 8.113 14.360,7.915 14.255,7.548 13.917 L 7.240 13.633 7.240 12.003 L 7.240 10.373 7.510 10.113 C 7.972 9.668,8.179 9.614,8.783 9.782 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/printer.svg b/packages/icons/svg/printer.svg
index fcb1a85c79..380ee67d29 100644
--- a/packages/icons/svg/printer.svg
+++ b/packages/icons/svg/printer.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 2.555 C 7.586 2.580,7.578 2.581,7.365 2.699 C 7.119 2.835,6.560 3.370,6.362 3.657 C 6.111 4.022,6.074 4.181,6.037 5.040 C 6.019 5.469,6.003 6.399,6.002 7.106 L 6.000 8.392 5.530 8.420 C 4.848 8.459,4.247 8.543,3.990 8.633 C 3.668 8.746,3.362 8.963,3.042 9.306 C 2.697 9.676,2.533 9.995,2.481 10.400 C 2.460 10.565,2.430 11.636,2.415 12.780 L 2.388 14.860 2.500 15.080 C 2.908 15.883,3.531 16.493,4.107 16.652 C 4.448 16.747,4.952 16.800,5.503 16.800 L 5.987 16.800 6.013 18.070 C 6.042 19.505,6.074 19.797,6.237 20.147 C 6.448 20.598,7.087 21.183,7.709 21.495 L 7.917 21.600 12.000 21.600 L 16.083 21.600 16.291 21.495 C 16.893 21.193,17.465 20.676,17.712 20.211 C 17.927 19.804,17.959 19.565,17.987 18.116 L 18.012 16.812 18.736 16.787 C 19.917 16.746,20.172 16.653,20.787 16.042 C 21.404 15.429,21.503 15.208,21.561 14.320 C 21.610 13.561,21.609 12.276,21.559 11.186 C 21.503 9.971,21.408 9.722,20.774 9.119 C 20.251 8.623,19.901 8.520,18.390 8.417 L 18.000 8.390 17.999 7.325 C 17.998 6.001,17.939 4.491,17.877 4.200 C 17.806 3.868,17.667 3.629,17.353 3.298 C 17.040 2.969,16.628 2.674,16.380 2.602 C 16.200 2.549,9.838 2.512,8.400 2.555 M15.600 6.600 L 15.600 8.400 12.000 8.400 L 8.400 8.400 8.400 6.600 L 8.400 4.800 12.000 4.800 L 15.600 4.800 15.600 6.600 M15.600 16.800 L 15.600 19.200 12.000 19.200 L 8.400 19.200 8.400 16.800 L 8.400 14.400 12.000 14.400 L 15.600 14.400 15.600 16.800 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.673 2.596 C 7.421 2.633,7.130 2.839,6.691 3.293 C 6.285 3.713,6.142 3.966,6.078 4.380 C 6.055 4.534,6.025 5.502,6.012 6.530 L 5.989 8.400 5.900 8.400 C 5.851 8.400,5.580 8.418,5.296 8.441 C 4.058 8.539,3.686 8.673,3.139 9.219 C 2.714 9.644,2.536 9.985,2.479 10.480 C 2.458 10.667,2.429 11.729,2.414 12.840 L 2.388 14.860 2.499 15.080 C 2.804 15.682,3.331 16.269,3.785 16.509 C 4.135 16.695,4.514 16.765,5.310 16.790 L 6.000 16.811 6.001 17.555 C 6.002 18.706,6.063 19.615,6.159 19.927 C 6.328 20.475,6.964 21.118,7.709 21.494 L 7.917 21.600 12.000 21.600 L 16.082 21.600 16.316 21.482 C 16.445 21.417,16.695 21.254,16.873 21.120 C 17.400 20.723,17.718 20.310,17.858 19.840 C 17.939 19.568,17.997 18.637,17.999 17.596 L 18.000 16.813 18.710 16.786 C 19.920 16.742,20.156 16.654,20.805 16.005 C 21.287 15.523,21.419 15.303,21.506 14.842 C 21.587 14.411,21.622 12.309,21.564 11.273 C 21.493 9.982,21.387 9.692,20.788 9.137 C 20.418 8.794,20.056 8.619,19.560 8.542 C 19.233 8.491,18.286 8.400,18.080 8.400 C 18.018 8.400,18.010 8.264,17.987 6.690 C 17.959 4.794,17.924 4.281,17.802 3.956 C 17.653 3.556,17.092 2.975,16.585 2.694 L 16.380 2.580 12.120 2.574 C 9.777 2.571,7.776 2.580,7.673 2.596 M15.600 6.600 L 15.600 8.400 12.000 8.400 L 8.400 8.400 8.400 6.600 L 8.400 4.800 12.000 4.800 L 15.600 4.800 15.600 6.600 M15.600 16.800 L 15.600 19.200 12.000 19.200 L 8.400 19.200 8.400 16.800 L 8.400 14.400 12.000 14.400 L 15.600 14.400 15.600 16.800 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/product_hunt.svg b/packages/icons/svg/product_hunt.svg
new file mode 100644
index 0000000000..7df80d53f2
--- /dev/null
+++ b/packages/icons/svg/product_hunt.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.006 3.162,9.038 3.428,8.007 3.942 C 6.997 4.445,6.222 5.011,5.488 5.780 C 2.955 8.433,2.297 12.244,3.794 15.598 C 5.028 18.363,7.641 20.310,10.760 20.786 C 11.390 20.882,12.610 20.882,13.240 20.786 C 15.279 20.475,17.011 19.604,18.421 18.182 C 21.801 14.775,21.860 9.316,18.556 5.825 C 17.174 4.364,15.338 3.410,13.320 3.102 C 12.913 3.040,11.664 2.991,11.340 3.024 M14.100 7.595 C 15.357 8.018,16.165 8.984,16.324 10.256 C 16.415 10.982,16.187 11.831,15.734 12.448 C 15.537 12.717,15.094 13.115,14.795 13.291 C 14.655 13.374,14.369 13.500,14.160 13.570 L 13.780 13.698 12.210 13.712 L 10.640 13.725 10.640 15.063 L 10.640 16.400 9.740 16.400 L 8.840 16.400 8.840 11.938 L 8.840 7.477 11.330 7.489 L 13.820 7.501 14.100 7.595 M10.640 10.577 L 10.640 11.920 12.053 11.920 C 13.631 11.920,13.666 11.915,14.020 11.648 C 14.405 11.357,14.612 10.845,14.527 10.389 C 14.440 9.918,14.171 9.575,13.727 9.366 L 13.500 9.260 12.070 9.247 L 10.640 9.233 10.640 10.577 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/puzzle.svg b/packages/icons/svg/puzzle.svg
index 23280bdedd..67a3e0c865 100644
--- a/packages/icons/svg/puzzle.svg
+++ b/packages/icons/svg/puzzle.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.337 2.516 C 12.971 2.648,12.450 3.039,12.302 3.294 C 12.191 3.486,12.081 3.899,11.961 4.580 C 11.915 4.844,11.856 5.130,11.830 5.216 C 11.769 5.423,11.442 5.774,11.233 5.858 C 11.038 5.936,10.493 5.976,8.760 6.040 C 7.265 6.095,6.808 6.133,6.643 6.219 C 6.482 6.302,6.223 6.559,6.141 6.718 C 6.054 6.887,6.012 7.515,5.955 9.500 L 5.907 11.180 5.798 11.341 C 5.666 11.536,5.354 11.829,5.228 11.877 C 5.177 11.896,4.894 11.951,4.598 11.998 C 3.584 12.160,3.379 12.232,3.049 12.533 C 2.792 12.769,2.590 13.099,2.483 13.459 C 2.401 13.734,2.396 13.795,2.436 13.994 C 2.528 14.452,2.857 14.975,3.214 15.231 C 3.424 15.382,3.644 15.456,4.187 15.560 C 5.184 15.749,5.339 15.795,5.516 15.946 C 5.861 16.241,5.892 16.402,5.960 18.280 C 6.011 19.699,6.069 20.557,6.129 20.800 C 6.186 21.029,6.561 21.414,6.789 21.477 C 7.195 21.589,10.737 21.635,11.180 21.534 C 11.250 21.518,11.401 21.406,11.544 21.264 C 11.838 20.969,11.873 20.875,12.040 19.927 C 12.202 19.003,12.333 18.758,12.885 18.343 L 13.128 18.160 13.800 18.160 L 14.471 18.160 14.706 18.333 C 14.927 18.496,15.138 18.725,15.290 18.967 C 15.365 19.086,15.476 19.519,15.600 20.180 C 15.706 20.742,15.776 20.955,15.921 21.156 C 16.181 21.514,16.420 21.563,18.040 21.589 C 19.428 21.610,20.634 21.557,20.852 21.465 C 21.001 21.402,21.395 21.000,21.504 20.799 C 21.573 20.673,21.581 20.546,21.593 19.441 C 21.607 18.115,21.552 16.724,21.475 16.416 C 21.440 16.276,21.375 16.171,21.243 16.039 C 21.022 15.818,20.778 15.735,19.920 15.585 C 19.104 15.443,18.947 15.385,18.697 15.135 C 18.583 15.021,18.404 14.808,18.299 14.661 L 18.108 14.393 18.135 13.793 C 18.165 13.122,18.193 13.035,18.477 12.713 C 18.711 12.447,18.985 12.258,19.240 12.186 C 19.361 12.152,19.721 12.079,20.040 12.024 C 20.918 11.873,21.008 11.830,21.390 11.395 L 21.600 11.155 21.597 10.027 C 21.594 8.477,21.538 6.974,21.476 6.789 C 21.402 6.565,21.191 6.343,20.957 6.243 C 20.689 6.127,20.360 6.098,18.480 6.020 C 17.633 5.985,16.818 5.939,16.669 5.918 C 15.980 5.821,15.862 5.652,15.600 4.380 C 15.510 3.940,15.397 3.499,15.349 3.400 C 15.147 2.976,14.605 2.618,13.985 2.500 C 13.599 2.426,13.586 2.426,13.337 2.516 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.305 2.538 C 13.002 2.663,12.708 2.862,12.469 3.104 C 12.237 3.338,12.151 3.586,11.959 4.571 C 11.854 5.115,11.807 5.277,11.711 5.421 C 11.570 5.634,11.331 5.831,11.152 5.882 C 10.966 5.936,10.155 5.992,8.860 6.041 C 7.555 6.090,6.852 6.142,6.693 6.202 C 6.536 6.261,6.169 6.631,6.121 6.778 C 6.051 6.993,6.004 7.765,5.955 9.493 L 5.908 11.180 5.756 11.386 C 5.672 11.499,5.523 11.658,5.424 11.739 C 5.253 11.879,5.211 11.892,4.572 12.004 C 3.666 12.162,3.408 12.243,3.150 12.452 C 2.753 12.774,2.427 13.381,2.427 13.800 C 2.428 14.360,2.916 15.114,3.430 15.350 C 3.546 15.403,3.987 15.517,4.410 15.605 C 5.248 15.777,5.469 15.863,5.650 16.087 C 5.820 16.297,5.872 16.579,5.919 17.550 C 5.941 18.018,5.979 18.792,6.001 19.270 C 6.047 20.237,6.102 20.770,6.168 20.896 C 6.264 21.079,6.456 21.286,6.621 21.383 C 6.884 21.537,7.353 21.570,9.340 21.575 C 11.334 21.581,11.204 21.600,11.560 21.243 C 11.801 21.003,11.878 20.794,12.038 19.959 C 12.220 19.009,12.356 18.748,12.873 18.356 L 13.132 18.160 13.801 18.160 L 14.469 18.160 14.727 18.359 C 15.040 18.600,15.299 18.939,15.380 19.213 C 15.413 19.325,15.504 19.717,15.581 20.085 C 15.658 20.453,15.750 20.823,15.785 20.907 C 15.938 21.277,16.161 21.444,16.605 21.520 C 17.228 21.627,20.229 21.607,20.776 21.493 C 20.912 21.464,21.392 21.008,21.504 20.800 C 21.575 20.669,21.580 20.554,21.577 18.920 C 21.575 17.145,21.536 16.505,21.419 16.279 C 21.320 16.088,21.082 15.887,20.853 15.801 C 20.733 15.756,20.338 15.665,19.974 15.598 C 19.072 15.432,18.946 15.380,18.628 15.043 C 18.199 14.588,18.120 14.449,18.121 14.153 C 18.123 13.712,18.196 13.125,18.265 12.990 C 18.364 12.797,18.800 12.387,19.017 12.281 C 19.126 12.229,19.539 12.124,19.981 12.037 C 20.406 11.953,20.823 11.849,20.907 11.806 C 20.991 11.763,21.184 11.599,21.336 11.441 L 21.612 11.155 21.586 9.327 C 21.554 7.210,21.530 6.871,21.387 6.629 C 21.125 6.183,20.878 6.126,18.820 6.040 C 16.718 5.952,16.326 5.908,16.117 5.731 C 15.891 5.541,15.807 5.315,15.578 4.280 C 15.498 3.917,15.397 3.535,15.352 3.432 C 15.179 3.028,14.588 2.630,13.967 2.501 C 13.593 2.423,13.585 2.424,13.305 2.538 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/python.svg b/packages/icons/svg/python.svg
index d467e8e673..4c5eee28ce 100644
--- a/packages/icons/svg/python.svg
+++ b/packages/icons/svg/python.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.605 3.044 C 8.730 3.194,7.915 3.902,7.631 4.759 C 7.553 4.994,7.543 5.127,7.529 6.110 L 7.513 7.200 9.737 7.200 L 11.960 7.200 11.960 7.440 L 11.960 7.680 8.586 7.680 C 5.352 7.680,5.200 7.683,4.902 7.759 C 4.069 7.972,3.377 8.610,3.118 9.402 L 3.020 9.700 3.020 12.000 L 3.020 14.300 3.118 14.598 C 3.375 15.385,4.042 16.005,4.880 16.237 C 5.142 16.310,5.291 16.320,6.109 16.320 L 7.040 16.320 7.041 15.150 C 7.041 13.798,7.068 13.609,7.326 13.113 C 7.684 12.426,8.379 11.930,9.161 11.803 C 9.323 11.776,10.390 11.760,12.002 11.760 C 14.181 11.760,14.620 11.751,14.822 11.699 C 15.623 11.495,16.237 10.884,16.420 10.110 C 16.507 9.743,16.507 5.393,16.420 4.980 C 16.240 4.124,15.584 3.419,14.680 3.111 C 14.424 3.023,14.381 3.022,12.120 3.015 C 10.855 3.011,9.723 3.024,9.605 3.044 M9.920 4.456 C 10.185 4.587,10.332 4.818,10.352 5.134 C 10.371 5.432,10.288 5.635,10.066 5.830 C 9.885 5.989,9.680 6.053,9.426 6.032 C 9.026 5.998,8.737 5.761,8.636 5.384 C 8.546 5.051,8.741 4.616,9.054 4.452 C 9.334 4.305,9.618 4.306,9.920 4.456 M16.951 8.966 C 16.935 10.461,16.917 10.559,16.557 11.097 C 16.237 11.575,15.812 11.901,15.233 12.113 L 14.940 12.220 12.100 12.240 L 9.260 12.260 8.976 12.364 C 8.224 12.639,7.688 13.259,7.560 14.000 C 7.530 14.178,7.520 15.000,7.528 16.600 L 7.541 18.940 7.650 19.260 C 7.940 20.117,8.679 20.759,9.581 20.939 C 9.859 20.995,10.211 21.002,12.141 20.992 L 14.380 20.979 14.700 20.871 C 15.507 20.598,16.094 20.024,16.348 19.260 C 16.450 18.952,16.455 18.898,16.471 17.870 L 16.488 16.800 14.264 16.800 L 12.040 16.800 12.040 16.561 L 12.040 16.323 15.510 16.311 L 18.980 16.300 19.273 16.193 C 19.930 15.953,20.441 15.514,20.718 14.951 C 20.992 14.396,20.999 14.324,20.999 12.000 C 20.999 9.676,20.992 9.604,20.718 9.049 C 20.440 8.485,19.927 8.044,19.273 7.808 C 18.991 7.706,18.943 7.702,17.973 7.688 L 16.965 7.673 16.951 8.966 M14.907 18.044 C 15.473 18.317,15.563 19.038,15.082 19.449 C 14.449 19.991,13.467 19.438,13.644 18.640 C 13.766 18.092,14.394 17.795,14.907 18.044 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.300 3.040 C 9.513 3.060,9.396 3.072,9.194 3.153 C 8.685 3.356,8.229 3.726,7.920 4.188 C 7.584 4.690,7.553 4.844,7.530 6.110 L 7.510 7.200 9.735 7.200 L 11.960 7.200 11.960 7.438 L 11.960 7.675 8.510 7.688 L 5.060 7.700 4.756 7.808 C 4.345 7.953,4.018 8.152,3.743 8.422 C 3.455 8.705,3.287 8.970,3.125 9.391 L 2.998 9.722 3.009 12.051 L 3.020 14.380 3.136 14.660 C 3.450 15.418,4.001 15.942,4.760 16.204 C 4.996 16.286,5.112 16.295,6.025 16.310 L 7.031 16.327 7.050 15.073 C 7.072 13.654,7.091 13.538,7.371 13.046 C 7.593 12.657,8.015 12.256,8.405 12.063 C 8.972 11.784,8.844 11.794,11.960 11.764 L 14.780 11.736 15.020 11.643 C 15.531 11.444,16.028 11.019,16.237 10.603 C 16.466 10.147,16.460 10.232,16.460 7.520 L 16.460 5.020 16.367 4.760 C 16.220 4.350,16.048 4.082,15.741 3.780 C 15.413 3.458,15.122 3.273,14.733 3.142 C 14.469 3.052,14.408 3.048,12.820 3.033 C 11.918 3.025,10.784 3.028,10.300 3.040 M9.913 4.464 C 10.204 4.609,10.335 4.835,10.338 5.200 C 10.340 5.425,10.323 5.491,10.230 5.633 C 9.907 6.120,9.243 6.172,8.846 5.741 C 8.667 5.548,8.620 5.386,8.650 5.075 C 8.705 4.497,9.351 4.184,9.913 4.464 M16.958 8.430 C 16.957 9.332,16.900 10.365,16.841 10.566 C 16.780 10.775,16.429 11.297,16.198 11.522 C 15.943 11.770,15.601 11.976,15.199 12.123 L 14.878 12.240 12.489 12.243 C 11.175 12.245,9.873 12.259,9.595 12.274 C 9.107 12.301,9.080 12.307,8.748 12.471 C 8.206 12.740,7.843 13.143,7.629 13.712 C 7.545 13.935,7.542 13.999,7.529 16.393 C 7.516 18.824,7.516 18.848,7.603 19.113 C 7.886 19.981,8.439 20.557,9.275 20.857 L 9.620 20.980 11.960 20.992 L 14.301 21.005 14.650 20.881 C 14.842 20.814,15.112 20.693,15.249 20.612 C 15.593 20.413,15.987 20.003,16.166 19.660 C 16.430 19.154,16.447 19.055,16.470 17.870 L 16.490 16.800 14.265 16.800 L 12.040 16.800 12.040 16.561 L 12.040 16.321 15.530 16.311 L 19.020 16.300 19.300 16.184 C 20.136 15.836,20.749 15.165,20.928 14.400 C 21.002 14.084,21.002 9.916,20.928 9.600 C 20.767 8.912,20.237 8.275,19.548 7.940 C 19.184 7.764,19.125 7.748,18.728 7.717 C 18.493 7.699,17.998 7.683,17.630 7.682 L 16.960 7.680 16.958 8.430 M14.987 18.104 C 15.516 18.431,15.510 19.180,14.976 19.519 C 14.747 19.664,14.514 19.699,14.268 19.624 C 13.872 19.505,13.640 19.216,13.640 18.840 C 13.640 18.468,13.799 18.218,14.140 18.053 C 14.416 17.920,14.718 17.938,14.987 18.104 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/qrcode.svg b/packages/icons/svg/qrcode.svg
index d93e77524d..167bb27585 100644
--- a/packages/icons/svg/qrcode.svg
+++ b/packages/icons/svg/qrcode.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.297 3.910 C 11.164 4.037,11.004 4.227,10.942 4.333 L 10.830 4.524 10.849 5.412 C 10.872 6.452,10.895 6.541,11.215 6.822 C 11.471 7.048,11.742 7.135,12.123 7.113 C 12.363 7.099,12.423 7.079,12.625 6.939 C 12.751 6.851,12.912 6.695,12.983 6.591 C 13.102 6.418,13.115 6.368,13.141 5.973 C 13.174 5.496,13.138 4.622,13.076 4.389 C 12.985 4.045,12.606 3.794,12.067 3.722 C 11.567 3.655,11.565 3.655,11.297 3.910 M4.960 3.758 C 4.378 3.779,4.329 3.787,4.155 3.889 C 4.053 3.949,3.886 4.090,3.785 4.203 L 3.600 4.409 3.604 5.814 C 3.605 6.587,3.619 7.573,3.634 8.004 L 3.661 8.788 3.833 9.015 C 3.927 9.140,4.107 9.323,4.232 9.422 L 4.460 9.603 6.620 9.591 L 8.780 9.580 8.956 9.440 C 9.052 9.363,9.238 9.174,9.370 9.020 L 9.608 8.740 9.587 6.820 C 9.575 5.746,9.546 4.777,9.521 4.620 C 9.469 4.287,9.360 4.105,9.077 3.881 L 8.873 3.720 7.226 3.728 C 6.321 3.732,5.301 3.745,4.960 3.758 M15.516 3.755 C 15.054 3.780,15.052 3.781,14.869 3.930 C 14.760 4.020,14.643 4.168,14.580 4.296 C 14.484 4.492,14.471 4.576,14.439 5.226 C 14.369 6.597,14.413 8.426,14.523 8.795 C 14.585 9.000,14.932 9.376,15.140 9.463 C 15.356 9.553,16.149 9.598,17.540 9.598 C 19.518 9.599,19.708 9.557,20.161 9.028 L 20.408 8.740 20.386 6.840 C 20.374 5.795,20.346 4.809,20.323 4.649 C 20.263 4.223,20.001 3.868,19.698 3.799 C 19.508 3.757,16.137 3.721,15.516 3.755 M7.200 6.600 L 7.200 7.200 6.600 7.200 L 6.000 7.200 6.000 6.600 L 6.000 6.000 6.600 6.000 L 7.200 6.000 7.200 6.600 M18.000 6.600 L 18.000 7.200 17.400 7.200 L 16.800 7.200 16.800 6.600 L 16.800 6.000 17.400 6.000 L 18.000 6.000 18.000 6.600 M11.420 8.629 C 11.206 8.786,11.014 9.010,10.937 9.191 C 10.764 9.602,10.756 11.843,10.926 12.400 C 10.982 12.584,11.335 12.949,11.550 13.047 C 11.774 13.148,12.738 13.197,14.563 13.199 L 15.906 13.200 16.099 13.073 C 16.345 12.909,16.623 12.532,16.705 12.248 C 16.784 11.976,16.737 11.704,16.564 11.435 C 16.281 10.996,16.120 10.939,15.021 10.878 C 13.608 10.800,13.327 10.775,13.263 10.722 C 13.214 10.682,13.200 10.585,13.199 10.285 C 13.198 9.518,13.099 9.097,12.868 8.866 C 12.622 8.621,12.471 8.563,11.994 8.535 C 11.582 8.511,11.579 8.512,11.420 8.629 M18.867 10.922 C 18.550 11.001,18.244 11.295,18.127 11.636 C 18.048 11.866,18.069 12.235,18.174 12.460 C 18.271 12.668,18.543 12.948,18.751 13.055 C 19.050 13.210,19.466 13.157,19.845 12.916 C 20.410 12.556,20.489 11.707,20.001 11.235 C 19.725 10.967,19.233 10.831,18.867 10.922 M4.836 10.957 C 4.323 10.979,4.284 10.986,4.130 11.093 C 3.714 11.382,3.540 11.992,3.746 12.440 C 3.837 12.636,4.147 12.970,4.323 13.061 C 4.489 13.147,5.601 13.199,7.299 13.199 L 8.778 13.200 9.082 12.890 C 9.420 12.547,9.529 12.317,9.534 11.941 C 9.538 11.653,9.371 11.322,9.121 11.124 L 8.929 10.973 7.755 10.947 C 6.496 10.918,5.704 10.921,4.836 10.957 M12.080 14.519 C 11.587 14.548,11.443 14.594,11.192 14.801 C 10.952 14.999,10.887 15.188,10.841 15.821 C 10.789 16.547,10.789 18.261,10.842 19.000 C 10.890 19.671,10.948 19.814,11.278 20.074 C 11.519 20.266,11.765 20.337,12.092 20.311 C 12.402 20.286,12.603 20.185,12.856 19.925 C 13.134 19.641,13.159 19.500,13.188 18.015 L 13.211 16.809 13.376 16.761 C 13.773 16.645,14.139 16.307,14.283 15.923 C 14.442 15.501,14.322 15.128,13.896 14.719 L 13.647 14.480 13.093 14.486 C 12.789 14.490,12.333 14.505,12.080 14.519 M16.660 14.517 C 16.352 14.555,16.158 14.649,15.978 14.847 C 15.676 15.182,15.572 15.683,15.736 16.014 C 15.845 16.233,16.195 16.602,16.360 16.671 C 16.527 16.741,17.512 16.794,18.715 16.798 L 19.529 16.800 19.723 16.658 C 19.932 16.504,20.165 16.213,20.260 15.986 C 20.339 15.797,20.338 15.311,20.259 15.144 C 20.171 14.958,19.970 14.727,19.835 14.657 C 19.768 14.623,19.524 14.581,19.268 14.561 C 18.635 14.511,16.946 14.482,16.660 14.517 M4.716 14.555 C 4.254 14.580,4.252 14.581,4.069 14.730 C 3.960 14.820,3.843 14.968,3.780 15.097 C 3.685 15.290,3.670 15.385,3.633 16.006 C 3.580 16.898,3.620 19.173,3.694 19.486 C 3.787 19.876,4.154 20.239,4.542 20.322 C 4.830 20.383,7.767 20.419,8.275 20.367 C 8.832 20.310,9.035 20.210,9.361 19.828 L 9.608 19.540 9.586 17.640 C 9.574 16.595,9.546 15.609,9.523 15.449 C 9.463 15.023,9.201 14.668,8.898 14.599 C 8.708 14.557,5.337 14.521,4.716 14.555 M7.200 17.400 L 7.200 18.000 6.600 18.000 L 6.000 18.000 6.000 17.400 L 6.000 16.800 6.600 16.800 L 7.200 16.800 7.200 17.400 M15.636 18.157 C 15.123 18.179,15.084 18.186,14.930 18.293 C 14.514 18.582,14.340 19.192,14.546 19.640 C 14.637 19.836,14.947 20.170,15.123 20.261 C 15.289 20.347,16.401 20.399,18.099 20.399 L 19.578 20.400 19.882 20.090 C 20.220 19.747,20.329 19.517,20.334 19.141 C 20.338 18.853,20.171 18.522,19.921 18.324 L 19.729 18.173 18.555 18.147 C 17.296 18.118,16.504 18.121,15.636 18.157 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.540 3.716 C 11.425 3.766,10.985 4.236,10.901 4.399 C 10.836 4.523,10.831 4.622,10.852 5.398 C 10.864 5.872,10.895 6.332,10.921 6.420 C 10.979 6.617,11.262 6.899,11.513 7.010 C 11.739 7.110,12.125 7.144,12.349 7.083 C 12.552 7.028,12.955 6.672,13.066 6.450 C 13.131 6.318,13.140 6.201,13.138 5.460 C 13.136 4.355,13.080 4.160,12.698 3.937 C 12.401 3.763,11.728 3.634,11.540 3.716 M5.299 3.757 L 4.338 3.780 4.128 3.915 C 4.013 3.989,3.847 4.131,3.759 4.230 L 3.600 4.411 3.600 5.776 C 3.600 6.526,3.612 7.507,3.627 7.955 L 3.653 8.769 3.826 8.999 C 3.921 9.126,4.100 9.312,4.224 9.414 L 4.449 9.600 6.592 9.600 L 8.736 9.600 8.891 9.493 C 8.976 9.433,9.173 9.241,9.329 9.064 L 9.613 8.743 9.587 6.821 C 9.572 5.765,9.541 4.783,9.518 4.640 C 9.464 4.310,9.336 4.091,9.075 3.884 L 8.870 3.720 7.565 3.727 C 6.847 3.731,5.828 3.745,5.299 3.757 M15.088 3.803 C 14.927 3.852,14.682 4.091,14.586 4.292 C 14.468 4.541,14.439 4.848,14.414 6.100 C 14.385 7.522,14.440 8.600,14.555 8.856 C 14.595 8.946,14.735 9.121,14.866 9.245 C 15.209 9.570,15.276 9.578,17.440 9.579 C 18.981 9.580,19.209 9.572,19.435 9.509 C 19.740 9.425,19.943 9.284,20.206 8.973 L 20.400 8.743 20.398 7.602 C 20.396 6.974,20.380 6.037,20.361 5.520 C 20.324 4.491,20.293 4.331,20.075 4.067 C 19.828 3.767,19.960 3.781,17.460 3.772 C 16.068 3.767,15.170 3.779,15.088 3.803 M7.200 6.600 L 7.200 7.200 6.600 7.200 L 6.000 7.200 6.000 6.600 L 6.000 6.000 6.600 6.000 L 7.200 6.000 7.200 6.600 M18.000 6.600 L 18.000 7.200 17.400 7.200 L 16.800 7.200 16.800 6.600 L 16.800 6.000 17.400 6.000 L 18.000 6.000 18.000 6.600 M11.358 8.687 C 11.099 8.899,10.936 9.148,10.880 9.420 C 10.764 9.977,10.794 11.909,10.924 12.379 C 10.991 12.616,11.408 13.012,11.658 13.075 C 11.970 13.154,12.971 13.198,14.472 13.199 C 15.607 13.200,15.905 13.189,15.993 13.144 C 16.162 13.056,16.500 12.676,16.622 12.437 C 16.818 12.052,16.751 11.620,16.440 11.266 C 16.188 10.979,16.029 10.943,14.640 10.860 C 13.421 10.788,13.288 10.771,13.244 10.685 C 13.225 10.649,13.200 10.377,13.187 10.080 C 13.155 9.312,13.055 9.011,12.751 8.764 C 12.580 8.625,12.385 8.570,11.956 8.538 L 11.575 8.510 11.358 8.687 M18.940 10.920 C 18.484 10.992,18.083 11.469,18.081 11.943 C 18.079 12.386,18.317 12.798,18.709 13.028 C 18.961 13.175,19.296 13.174,19.625 13.023 C 20.066 12.821,20.279 12.526,20.311 12.070 C 20.329 11.826,20.318 11.774,20.204 11.542 C 20.119 11.369,20.024 11.245,19.912 11.164 C 19.647 10.969,19.254 10.870,18.940 10.920 M4.917 10.957 C 4.243 10.987,4.206 10.999,3.952 11.266 C 3.689 11.544,3.587 12.072,3.732 12.411 C 3.832 12.644,4.223 13.032,4.408 13.082 C 4.674 13.154,5.760 13.197,7.305 13.199 L 8.790 13.200 9.059 12.915 C 9.401 12.553,9.519 12.308,9.520 11.963 C 9.520 11.662,9.423 11.426,9.213 11.216 C 8.954 10.956,9.051 10.970,7.220 10.948 C 6.296 10.938,5.260 10.941,4.917 10.957 M12.169 14.521 C 11.691 14.546,11.614 14.560,11.413 14.664 C 10.891 14.933,10.842 15.120,10.812 16.980 C 10.790 18.350,10.831 19.287,10.926 19.604 C 11.079 20.116,11.752 20.433,12.330 20.265 C 12.605 20.185,12.960 19.879,13.056 19.638 C 13.139 19.430,13.199 18.576,13.199 17.576 L 13.200 16.813 13.370 16.764 C 13.774 16.647,14.166 16.262,14.301 15.849 C 14.424 15.471,14.321 15.175,13.915 14.741 L 13.671 14.480 13.185 14.486 C 12.918 14.490,12.461 14.505,12.169 14.521 M16.385 14.576 C 15.991 14.723,15.669 15.195,15.665 15.629 C 15.663 15.930,15.753 16.112,16.059 16.422 C 16.241 16.608,16.338 16.675,16.454 16.697 C 16.751 16.752,17.748 16.798,18.640 16.799 L 19.540 16.799 19.708 16.665 C 19.904 16.510,20.137 16.240,20.229 16.063 C 20.264 15.995,20.301 15.809,20.312 15.650 C 20.335 15.284,20.254 15.052,20.020 14.818 C 19.780 14.578,19.618 14.556,17.940 14.535 C 16.784 14.521,16.513 14.528,16.385 14.576 M4.288 14.603 C 4.128 14.652,3.882 14.891,3.788 15.089 C 3.666 15.346,3.640 15.595,3.615 16.760 C 3.587 18.100,3.642 19.392,3.738 19.621 C 3.842 19.871,4.063 20.106,4.303 20.223 C 4.513 20.326,4.572 20.334,5.353 20.369 C 6.588 20.424,8.357 20.389,8.659 20.304 C 8.934 20.226,9.152 20.070,9.415 19.761 L 9.600 19.545 9.598 18.402 C 9.596 17.774,9.580 16.837,9.561 16.320 C 9.524 15.291,9.493 15.131,9.275 14.867 C 9.028 14.567,9.160 14.581,6.660 14.572 C 5.268 14.567,4.370 14.579,4.288 14.603 M7.200 17.400 L 7.200 18.000 6.600 18.000 L 6.000 18.000 6.000 17.400 L 6.000 16.800 6.600 16.800 L 7.200 16.800 7.200 17.400 M15.717 18.157 C 15.043 18.187,15.006 18.199,14.752 18.466 C 14.489 18.744,14.387 19.272,14.532 19.611 C 14.632 19.844,15.023 20.232,15.208 20.282 C 15.474 20.354,16.560 20.397,18.105 20.399 L 19.590 20.400 19.859 20.115 C 20.201 19.753,20.319 19.508,20.320 19.163 C 20.320 18.862,20.223 18.626,20.013 18.416 C 19.754 18.156,19.851 18.170,18.020 18.148 C 17.096 18.138,16.060 18.141,15.717 18.157 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/question-mark-circle.svg b/packages/icons/svg/question-mark-circle.svg
index 24573a0a39..3b55ca2966 100644
--- a/packages/icons/svg/question-mark-circle.svg
+++ b/packages/icons/svg/question-mark-circle.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.240 6.121 C 12.912 6.179,13.096 6.224,13.540 6.441 C 14.245 6.786,14.858 7.407,15.230 8.151 L 15.414 8.521 15.455 9.165 C 15.484 9.632,15.483 9.925,15.449 10.234 C 15.407 10.617,15.382 10.701,15.204 11.060 C 14.851 11.774,14.435 12.232,13.639 12.782 C 13.398 12.949,13.200 13.103,13.200 13.124 C 13.200 13.145,13.145 13.304,13.079 13.477 C 12.938 13.842,12.702 14.136,12.462 14.245 C 12.235 14.348,11.673 14.349,11.479 14.247 C 11.307 14.156,10.979 13.733,10.922 13.530 C 10.869 13.339,10.868 12.368,10.921 11.907 C 10.994 11.273,11.105 11.159,12.004 10.798 C 12.800 10.479,12.979 10.324,13.102 9.846 C 13.200 9.463,13.081 9.091,12.759 8.768 C 12.547 8.556,12.364 8.505,11.910 8.530 C 11.503 8.553,11.464 8.574,10.900 9.058 C 10.459 9.437,10.370 9.485,10.056 9.510 C 9.523 9.553,9.169 9.370,8.959 8.944 C 8.837 8.697,8.831 8.662,8.847 8.331 C 8.868 7.898,8.972 7.683,9.371 7.256 C 9.943 6.644,10.677 6.217,11.319 6.122 C 11.633 6.076,11.724 6.076,12.240 6.121 M12.554 15.823 C 12.735 15.938,12.884 16.093,12.972 16.260 C 13.084 16.472,13.095 17.148,12.990 17.345 C 12.779 17.740,12.470 17.919,11.998 17.920 C 11.494 17.920,11.203 17.728,10.995 17.258 C 10.876 16.989,10.868 16.526,10.979 16.301 C 11.075 16.107,11.323 15.853,11.493 15.775 C 11.670 15.695,12.403 15.728,12.554 15.823 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.213 6.123 C 12.857 6.180,13.136 6.247,13.510 6.435 C 14.248 6.807,14.788 7.345,15.224 8.145 L 15.405 8.478 15.448 9.140 C 15.518 10.219,15.438 10.666,15.055 11.325 C 14.726 11.893,14.370 12.256,13.591 12.820 C 13.336 13.005,13.196 13.134,13.179 13.199 C 13.116 13.447,12.874 13.888,12.714 14.048 C 12.510 14.252,12.317 14.320,11.944 14.320 C 11.609 14.320,11.463 14.259,11.253 14.030 C 10.964 13.715,10.910 13.566,10.889 13.019 C 10.869 12.515,10.932 11.680,11.003 11.491 C 11.100 11.237,11.299 11.099,12.000 10.801 C 12.546 10.569,12.643 10.517,12.814 10.363 C 12.996 10.198,13.091 9.972,13.112 9.651 C 13.128 9.397,13.117 9.336,13.024 9.145 C 12.890 8.871,12.620 8.620,12.394 8.558 C 12.153 8.492,11.644 8.535,11.451 8.637 C 11.368 8.681,11.129 8.861,10.920 9.038 C 10.413 9.465,10.339 9.500,9.920 9.499 C 9.417 9.499,9.167 9.342,8.937 8.883 C 8.837 8.683,8.831 8.642,8.853 8.327 C 8.882 7.916,8.985 7.687,9.303 7.331 C 9.836 6.733,10.621 6.254,11.260 6.138 C 11.621 6.072,11.638 6.072,12.213 6.123 M12.509 15.803 C 12.665 15.863,12.951 16.181,12.997 16.346 C 13.059 16.570,13.051 17.176,12.984 17.338 C 12.892 17.558,12.631 17.788,12.395 17.858 C 11.799 18.035,11.280 17.832,11.031 17.324 C 10.900 17.058,10.880 16.514,10.993 16.296 C 11.115 16.060,11.408 15.794,11.588 15.757 C 11.762 15.721,12.373 15.752,12.509 15.803 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/react.svg b/packages/icons/svg/react.svg
index 7cffcdb8d8..98b73cad63 100644
--- a/packages/icons/svg/react.svg
+++ b/packages/icons/svg/react.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.080 4.062 C 14.243 4.242,13.455 4.728,12.191 5.844 L 12.003 6.011 11.691 5.733 C 10.980 5.098,10.372 4.674,9.744 4.377 C 8.673 3.869,7.746 3.934,7.116 4.559 C 6.849 4.824,6.642 5.231,6.534 5.700 C 6.383 6.356,6.456 7.567,6.714 8.675 C 6.769 8.911,6.778 9.010,6.746 9.020 C 5.648 9.360,4.820 9.709,4.275 10.060 C 3.854 10.331,3.362 10.841,3.206 11.166 C 2.507 12.632,3.685 14.039,6.320 14.883 C 6.551 14.957,6.747 15.022,6.755 15.027 C 6.764 15.033,6.715 15.312,6.648 15.649 C 6.350 17.129,6.386 18.179,6.760 18.944 C 7.269 19.985,8.441 20.264,9.755 19.657 C 10.339 19.387,11.097 18.861,11.706 18.302 C 11.864 18.158,12.008 18.040,12.026 18.041 C 12.045 18.041,12.204 18.169,12.380 18.325 C 13.838 19.621,15.020 20.155,15.964 19.945 C 16.710 19.778,17.211 19.247,17.446 18.374 C 17.577 17.886,17.594 16.945,17.485 16.198 C 17.438 15.880,17.366 15.479,17.325 15.307 L 17.250 14.994 17.340 14.960 C 17.389 14.941,17.508 14.905,17.602 14.879 C 17.894 14.801,18.641 14.500,19.040 14.301 C 19.610 14.017,20.030 13.721,20.368 13.368 C 21.309 12.382,21.180 11.211,20.028 10.297 C 19.587 9.947,18.717 9.516,17.900 9.242 C 17.548 9.124,17.253 9.022,17.245 9.015 C 17.236 9.008,17.276 8.764,17.332 8.471 C 17.473 7.741,17.476 7.719,17.518 7.161 C 17.560 6.610,17.521 5.991,17.419 5.593 C 17.121 4.427,16.196 3.823,15.080 4.062 M9.055 4.878 C 9.529 5.041,10.069 5.363,10.637 5.819 C 11.037 6.140,11.440 6.519,11.440 6.573 C 11.440 6.597,11.361 6.699,11.265 6.799 C 11.039 7.033,10.388 7.830,10.143 8.173 C 10.031 8.331,9.917 8.447,9.866 8.456 C 9.819 8.465,9.482 8.509,9.119 8.555 C 8.755 8.601,8.256 8.678,8.010 8.727 C 7.764 8.776,7.550 8.803,7.534 8.787 C 7.472 8.725,7.239 7.513,7.193 7.013 C 7.078 5.760,7.418 4.994,8.180 4.795 C 8.360 4.748,8.796 4.789,9.055 4.878 M15.928 4.822 C 16.614 5.056,16.924 6.003,16.759 7.361 C 16.711 7.753,16.523 8.730,16.483 8.795 C 16.464 8.826,16.415 8.827,16.318 8.800 C 16.105 8.738,14.818 8.530,14.460 8.499 C 14.284 8.483,14.119 8.459,14.093 8.445 C 14.067 8.431,13.896 8.220,13.713 7.975 C 13.530 7.731,13.200 7.320,12.980 7.062 C 12.760 6.804,12.575 6.578,12.568 6.560 C 12.553 6.519,13.236 5.908,13.641 5.600 C 14.585 4.880,15.343 4.623,15.928 4.822 M12.269 7.390 C 12.574 7.739,13.040 8.321,13.040 8.354 C 13.040 8.368,12.572 8.380,12.000 8.380 C 11.428 8.380,10.960 8.371,10.960 8.359 C 10.960 8.303,11.958 7.121,12.006 7.121 C 12.020 7.120,12.138 7.242,12.269 7.390 M13.189 9.146 L 13.639 9.172 13.955 9.656 C 14.298 10.182,14.746 10.949,15.079 11.580 L 15.291 11.980 15.065 12.429 C 14.803 12.952,14.258 13.895,13.900 14.444 L 13.650 14.827 13.255 14.853 C 12.749 14.887,11.119 14.887,10.691 14.854 L 10.361 14.828 10.046 14.344 C 9.648 13.735,9.214 12.986,8.935 12.430 L 8.719 12.000 8.918 11.603 C 9.198 11.046,9.673 10.226,10.048 9.652 L 10.367 9.163 10.673 9.150 C 11.279 9.123,12.749 9.121,13.189 9.146 M9.277 9.430 C 8.955 9.961,8.534 10.692,8.446 10.870 C 8.390 10.986,8.332 11.080,8.317 11.080 C 8.289 11.080,7.981 10.296,7.840 9.866 C 7.786 9.699,7.765 9.579,7.788 9.556 C 7.824 9.520,9.083 9.289,9.274 9.283 L 9.368 9.280 9.277 9.430 M15.600 9.425 C 15.897 9.479,16.170 9.532,16.207 9.543 C 16.266 9.561,16.259 9.605,16.142 9.952 C 15.935 10.562,15.715 11.082,15.675 11.057 C 15.655 11.045,15.593 10.945,15.538 10.836 C 15.451 10.664,15.016 9.913,14.720 9.425 L 14.627 9.271 14.843 9.299 C 14.962 9.315,15.303 9.371,15.600 9.425 M7.199 10.325 C 7.304 10.625,7.499 11.125,7.633 11.437 L 7.877 12.004 7.775 12.232 C 7.626 12.562,7.185 13.694,7.082 14.010 C 7.027 14.177,6.972 14.280,6.936 14.280 C 6.728 14.280,5.418 13.766,5.000 13.521 C 4.403 13.170,4.114 12.904,3.898 12.511 C 3.746 12.233,3.734 11.804,3.868 11.510 C 4.054 11.104,4.570 10.681,5.296 10.337 C 5.721 10.135,6.819 9.756,6.935 9.771 C 6.992 9.778,7.053 9.905,7.199 10.325 M17.780 9.987 C 18.441 10.210,19.270 10.617,19.579 10.868 C 20.058 11.257,20.275 11.675,20.224 12.109 C 20.133 12.880,19.299 13.518,17.664 14.067 C 17.104 14.254,17.046 14.266,17.020 14.190 C 16.837 13.651,16.592 13.020,16.390 12.563 L 16.136 11.991 16.403 11.365 C 16.550 11.021,16.747 10.519,16.841 10.248 L 17.012 9.756 17.136 9.783 C 17.204 9.798,17.494 9.890,17.780 9.987 M11.531 10.456 C 11.107 10.594,10.739 10.916,10.545 11.320 C 10.431 11.558,10.420 11.614,10.420 11.980 C 10.420 12.332,10.433 12.408,10.529 12.613 C 10.768 13.122,11.140 13.426,11.670 13.544 C 11.927 13.601,12.015 13.604,12.237 13.564 C 12.792 13.464,13.218 13.144,13.452 12.650 C 13.569 12.402,13.580 12.347,13.580 11.979 C 13.580 11.609,13.570 11.558,13.452 11.319 C 13.290 10.989,13.012 10.711,12.684 10.549 C 12.463 10.440,12.379 10.422,12.064 10.412 C 11.834 10.405,11.638 10.421,11.531 10.456 M15.922 13.383 C 16.196 14.072,16.315 14.444,16.267 14.461 C 16.065 14.531,14.694 14.749,14.663 14.716 C 14.655 14.707,14.809 14.430,15.005 14.100 C 15.201 13.770,15.435 13.358,15.526 13.183 C 15.716 12.818,15.692 12.806,15.922 13.383 M8.489 13.210 C 8.630 13.484,9.174 14.410,9.336 14.651 L 9.411 14.763 9.235 14.738 C 8.854 14.685,7.832 14.514,7.781 14.495 C 7.739 14.479,7.756 14.390,7.859 14.087 C 8.047 13.531,8.286 12.920,8.315 12.920 C 8.329 12.920,8.407 13.051,8.489 13.210 M8.804 15.435 C 9.121 15.478,9.510 15.526,9.670 15.541 L 9.959 15.568 10.166 15.854 C 10.418 16.202,10.984 16.897,11.270 17.210 C 11.385 17.336,11.480 17.453,11.480 17.471 C 11.480 17.488,11.368 17.601,11.232 17.721 C 10.122 18.701,9.142 19.237,8.457 19.239 C 8.190 19.240,7.907 19.134,7.704 18.955 C 7.283 18.585,7.117 17.928,7.201 16.971 C 7.238 16.551,7.377 15.752,7.482 15.355 L 7.520 15.210 7.874 15.283 C 8.068 15.323,8.487 15.391,8.804 15.435 M16.562 15.369 C 16.655 15.713,16.756 16.315,16.802 16.798 C 16.950 18.350,16.474 19.240,15.495 19.240 C 14.799 19.240,13.817 18.670,12.753 17.648 L 12.566 17.469 12.958 17.004 C 13.313 16.584,13.954 15.755,14.032 15.615 C 14.053 15.578,14.231 15.540,14.582 15.499 C 15.123 15.436,15.960 15.304,16.200 15.243 C 16.478 15.173,16.513 15.185,16.562 15.369 M12.955 15.810 C 12.684 16.161,12.168 16.783,12.091 16.851 C 12.015 16.919,12.004 16.911,11.695 16.551 C 11.414 16.223,11.173 15.930,11.004 15.710 C 10.953 15.644,11.007 15.640,12.018 15.640 L 13.087 15.640 12.955 15.810 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.221 4.045 C 14.467 4.154,13.652 4.610,12.549 5.538 L 11.998 6.002 11.569 5.631 C 10.413 4.631,9.464 4.126,8.608 4.056 C 7.399 3.958,6.580 4.790,6.461 6.240 C 6.425 6.679,6.498 7.554,6.629 8.240 C 6.793 9.104,6.798 9.021,6.580 9.076 C 6.249 9.159,5.312 9.523,4.880 9.736 C 4.330 10.006,4.046 10.198,3.722 10.518 C 3.206 11.028,3.026 11.406,3.025 11.980 C 3.025 12.252,3.046 12.399,3.112 12.578 C 3.455 13.511,4.585 14.319,6.360 14.899 C 6.547 14.960,6.712 15.021,6.727 15.035 C 6.742 15.049,6.703 15.339,6.641 15.680 C 6.362 17.203,6.388 18.113,6.730 18.880 C 6.952 19.378,7.394 19.765,7.896 19.900 C 8.318 20.015,8.912 19.970,9.418 19.786 C 10.056 19.554,10.700 19.152,11.454 18.514 C 12.101 17.966,11.976 17.988,12.402 18.349 C 13.452 19.237,14.057 19.619,14.800 19.862 C 15.402 20.059,16.058 20.007,16.519 19.727 C 16.934 19.474,17.287 18.960,17.448 18.372 C 17.521 18.102,17.533 17.950,17.534 17.240 C 17.536 16.414,17.475 15.881,17.301 15.208 C 17.239 14.968,17.229 14.980,17.605 14.879 C 17.853 14.813,18.699 14.472,19.047 14.297 C 20.151 13.744,20.837 13.007,20.970 12.231 C 21.081 11.579,20.750 10.887,20.065 10.338 C 19.573 9.944,18.570 9.457,17.600 9.140 C 17.413 9.079,17.254 9.024,17.247 9.018 C 17.240 9.012,17.293 8.704,17.365 8.334 C 17.490 7.696,17.497 7.612,17.498 6.760 C 17.499 6.009,17.488 5.818,17.427 5.603 C 17.179 4.727,16.604 4.160,15.840 4.041 C 15.550 3.996,15.555 3.996,15.221 4.045 M16.073 4.900 C 16.423 5.091,16.644 5.473,16.749 6.072 C 16.848 6.638,16.788 7.346,16.537 8.600 C 16.491 8.828,16.478 8.832,16.091 8.754 C 15.898 8.715,15.398 8.636,14.980 8.578 C 14.562 8.521,14.181 8.459,14.134 8.440 C 14.087 8.421,13.890 8.202,13.696 7.953 C 13.503 7.704,13.165 7.285,12.946 7.022 L 12.548 6.544 12.764 6.345 C 14.240 4.985,15.344 4.503,16.073 4.900 M9.250 4.957 C 9.621 5.113,10.130 5.427,10.574 5.775 C 10.954 6.072,11.440 6.513,11.440 6.559 C 11.440 6.577,11.264 6.796,11.048 7.047 C 10.832 7.297,10.506 7.696,10.323 7.933 C 10.140 8.170,9.952 8.388,9.905 8.417 C 9.858 8.447,9.586 8.500,9.300 8.536 C 9.014 8.572,8.504 8.648,8.167 8.705 C 7.830 8.761,7.547 8.800,7.538 8.792 C 7.504 8.757,7.397 8.272,7.297 7.700 C 7.178 7.020,7.154 6.291,7.238 5.900 C 7.339 5.427,7.598 5.055,7.940 4.891 C 8.119 4.805,8.181 4.797,8.540 4.812 C 8.879 4.825,8.987 4.847,9.250 4.957 M12.706 7.920 L 13.045 8.340 12.792 8.365 C 12.464 8.398,11.485 8.398,11.188 8.366 L 10.955 8.340 11.301 7.920 C 11.491 7.689,11.730 7.412,11.832 7.304 L 12.017 7.108 12.192 7.304 C 12.288 7.412,12.519 7.689,12.706 7.920 M13.687 9.249 C 13.855 9.472,14.491 10.524,14.875 11.216 L 15.295 11.972 15.089 12.376 C 14.828 12.889,14.298 13.812,13.937 14.380 L 13.658 14.820 13.399 14.845 C 13.051 14.879,10.968 14.886,10.630 14.854 L 10.360 14.828 10.087 14.404 C 9.688 13.786,9.306 13.133,8.991 12.530 L 8.713 12.000 8.991 11.470 C 9.307 10.866,9.688 10.214,10.090 9.591 L 10.366 9.163 10.793 9.147 C 11.028 9.138,11.759 9.137,12.419 9.144 C 13.613 9.157,13.618 9.158,13.687 9.249 M9.311 9.370 C 9.187 9.560,8.551 10.660,8.457 10.845 C 8.403 10.952,8.344 11.040,8.326 11.040 C 8.251 11.040,7.830 9.916,7.824 9.703 C 7.820 9.561,7.831 9.543,7.940 9.515 C 8.115 9.469,9.164 9.287,9.275 9.283 C 9.363 9.280,9.366 9.285,9.311 9.370 M15.471 9.407 C 15.960 9.492,16.215 9.553,16.229 9.589 C 16.269 9.692,15.754 11.040,15.675 11.040 C 15.657 11.040,15.597 10.952,15.543 10.845 C 15.449 10.660,14.813 9.560,14.689 9.370 C 14.614 9.255,14.578 9.253,15.471 9.407 M7.014 9.870 C 7.045 9.931,7.165 10.231,7.279 10.537 C 7.394 10.843,7.574 11.298,7.680 11.548 L 7.873 12.003 7.722 12.351 C 7.639 12.543,7.450 13.024,7.301 13.420 C 6.986 14.259,6.976 14.280,6.898 14.280 C 6.788 14.280,5.823 13.913,5.376 13.702 C 4.605 13.336,4.131 12.952,3.908 12.512 C 3.818 12.334,3.800 12.247,3.800 11.982 C 3.800 11.572,3.888 11.383,4.241 11.040 C 4.577 10.712,5.036 10.440,5.700 10.174 C 6.134 10.000,6.819 9.770,6.929 9.762 C 6.945 9.761,6.983 9.809,7.014 9.870 M17.720 9.967 C 18.310 10.169,19.316 10.663,19.604 10.893 C 19.886 11.118,20.141 11.494,20.198 11.771 C 20.244 11.990,20.206 12.316,20.116 12.491 C 19.865 12.976,19.302 13.401,18.400 13.788 C 17.885 14.008,17.084 14.262,17.046 14.216 C 17.028 14.196,16.937 13.964,16.843 13.700 C 16.748 13.436,16.556 12.952,16.415 12.624 C 16.275 12.296,16.160 12.010,16.160 11.987 C 16.160 11.965,16.269 11.684,16.403 11.363 C 16.536 11.043,16.729 10.550,16.830 10.269 L 17.014 9.757 17.137 9.784 C 17.205 9.798,17.467 9.881,17.720 9.967 M11.627 10.440 C 11.220 10.513,10.730 10.922,10.525 11.360 C 10.437 11.549,10.422 11.636,10.421 11.981 C 10.420 12.353,10.429 12.400,10.549 12.645 C 10.699 12.948,10.996 13.264,11.252 13.392 C 11.350 13.441,11.551 13.511,11.698 13.547 C 11.922 13.602,12.007 13.605,12.213 13.567 C 12.756 13.466,13.248 13.092,13.471 12.610 C 13.564 12.410,13.578 12.328,13.579 11.980 C 13.580 11.618,13.569 11.557,13.462 11.340 C 13.316 11.041,12.971 10.693,12.680 10.553 C 12.430 10.433,11.953 10.381,11.627 10.440 M15.952 13.471 C 16.230 14.187,16.295 14.401,16.252 14.444 C 16.185 14.511,14.741 14.754,14.694 14.707 C 14.681 14.695,14.875 14.328,15.123 13.892 C 15.703 12.873,15.678 12.914,15.719 12.940 C 15.739 12.952,15.844 13.191,15.952 13.471 M8.444 13.130 C 8.570 13.379,9.112 14.308,9.266 14.538 C 9.338 14.647,9.391 14.742,9.383 14.750 C 9.346 14.787,7.791 14.504,7.773 14.457 C 7.736 14.359,8.249 12.960,8.323 12.960 C 8.342 12.960,8.397 13.037,8.444 13.130 M9.213 15.488 L 9.966 15.579 10.109 15.779 C 10.311 16.062,10.805 16.674,11.169 17.095 C 11.367 17.323,11.467 17.470,11.449 17.503 C 11.403 17.585,10.936 17.983,10.520 18.296 C 9.696 18.914,9.046 19.210,8.498 19.216 C 8.214 19.220,8.147 19.206,7.939 19.099 C 7.650 18.952,7.438 18.689,7.310 18.320 C 7.229 18.086,7.220 17.989,7.223 17.340 C 7.226 16.732,7.244 16.533,7.335 16.060 C 7.395 15.752,7.460 15.435,7.481 15.356 L 7.520 15.213 7.990 15.305 C 8.248 15.355,8.799 15.437,9.213 15.488 M16.519 15.278 C 16.647 15.518,16.811 16.679,16.809 17.340 C 16.807 18.373,16.490 18.995,15.871 19.179 C 15.450 19.304,15.136 19.249,14.500 18.938 C 14.014 18.700,13.474 18.313,12.924 17.808 L 12.562 17.477 12.985 16.968 C 13.217 16.689,13.553 16.266,13.731 16.030 C 14.106 15.532,14.016 15.573,15.000 15.441 C 15.363 15.393,15.813 15.320,16.000 15.281 C 16.444 15.186,16.470 15.186,16.519 15.278 M12.954 15.810 C 12.554 16.324,12.071 16.880,12.024 16.880 C 11.952 16.880,10.991 15.727,11.021 15.678 C 11.035 15.656,11.466 15.640,12.066 15.640 L 13.087 15.640 12.954 15.810 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/receipt-refund.svg b/packages/icons/svg/receipt-refund.svg
index 564ab333eb..067acdadf6 100644
--- a/packages/icons/svg/receipt-refund.svg
+++ b/packages/icons/svg/receipt-refund.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.200 2.524 C 6.693 2.541,5.384 2.566,5.292 2.580 C 4.784 2.654,4.176 3.218,3.808 3.956 L 3.620 4.332 3.607 10.596 C 3.600 14.041,3.607 17.908,3.622 19.189 L 3.650 21.517 3.775 21.465 C 3.898 21.413,4.096 21.304,6.555 19.925 L 7.770 19.244 7.995 19.357 C 8.203 19.462,8.741 19.761,11.093 21.077 C 11.883 21.519,11.977 21.562,12.079 21.526 C 12.141 21.505,12.882 21.095,13.726 20.617 C 14.570 20.138,15.466 19.633,15.719 19.494 L 16.177 19.242 16.628 19.481 C 16.877 19.613,17.596 20.010,18.227 20.365 C 19.552 21.109,20.176 21.440,20.255 21.440 C 20.352 21.440,20.371 19.997,20.375 11.959 L 20.380 4.299 20.247 4.028 C 19.987 3.499,19.492 2.973,18.981 2.681 L 18.762 2.556 15.371 2.519 C 13.506 2.499,11.746 2.485,11.460 2.488 C 11.174 2.491,9.707 2.507,8.200 2.524 M11.447 5.084 C 11.742 5.274,11.852 5.491,11.873 5.923 C 11.887 6.230,11.878 6.295,11.795 6.462 C 11.683 6.686,11.409 7.018,10.710 7.778 C 10.359 8.159,10.214 8.344,10.249 8.364 C 10.277 8.379,10.714 8.412,11.220 8.438 C 13.217 8.537,13.726 8.636,14.652 9.104 C 15.223 9.392,15.700 9.740,16.183 10.220 C 16.686 10.720,17.044 11.226,17.356 11.881 C 17.804 12.819,17.882 13.269,17.894 14.960 C 17.900 15.894,17.896 15.948,17.814 16.101 C 17.724 16.269,17.406 16.590,17.238 16.683 C 17.114 16.751,16.590 16.753,16.395 16.686 C 16.191 16.617,15.819 16.217,15.762 16.009 C 15.738 15.918,15.674 15.425,15.619 14.912 C 15.467 13.472,15.369 13.060,15.066 12.586 C 14.771 12.125,14.042 11.464,13.558 11.219 C 13.294 11.085,12.855 10.973,12.400 10.922 C 12.033 10.881,10.642 10.801,10.287 10.800 L 10.114 10.800 10.716 11.430 C 11.353 12.098,11.719 12.534,11.819 12.744 C 11.914 12.944,11.902 13.521,11.798 13.723 C 11.619 14.074,11.175 14.360,10.808 14.360 C 10.590 14.360,10.221 14.166,9.880 13.871 C 9.427 13.481,7.413 11.492,6.859 10.890 C 6.592 10.598,6.320 10.265,6.256 10.150 C 6.153 9.964,6.140 9.901,6.140 9.600 C 6.140 9.301,6.154 9.235,6.255 9.053 C 6.432 8.733,6.883 8.244,8.224 6.919 C 9.628 5.531,10.243 4.973,10.395 4.946 C 10.453 4.935,10.669 4.934,10.875 4.943 C 11.214 4.957,11.270 4.971,11.447 5.084 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 2.523 C 5.163 2.563,5.229 2.559,4.919 2.724 C 4.478 2.959,4.059 3.445,3.725 4.109 L 3.600 4.358 3.606 11.769 C 3.609 15.845,3.622 19.709,3.636 20.354 L 3.660 21.529 4.000 21.349 C 4.187 21.250,5.113 20.735,6.059 20.206 L 7.778 19.243 8.159 19.447 C 8.368 19.560,9.210 20.027,10.028 20.485 C 11.747 21.446,11.888 21.520,12.000 21.520 C 12.115 21.520,12.296 21.425,14.040 20.441 C 14.887 19.963,15.715 19.498,15.879 19.408 L 16.178 19.243 16.599 19.469 C 16.831 19.593,17.614 20.025,18.340 20.430 C 19.805 21.246,20.228 21.465,20.266 21.427 C 20.333 21.360,20.354 19.707,20.380 12.325 L 20.409 4.350 20.262 4.061 C 19.986 3.518,19.506 3.000,18.993 2.692 L 18.780 2.564 15.100 2.522 C 13.076 2.499,11.285 2.483,11.120 2.487 C 10.955 2.490,9.731 2.506,8.400 2.523 M11.354 5.037 C 11.565 5.144,11.789 5.405,11.828 5.588 C 11.845 5.671,11.860 5.876,11.860 6.042 C 11.860 6.314,11.847 6.365,11.723 6.569 C 11.648 6.694,11.372 7.035,11.110 7.328 C 10.318 8.214,10.226 8.329,10.286 8.362 C 10.316 8.378,10.709 8.411,11.160 8.436 C 13.218 8.550,13.792 8.661,14.667 9.119 C 15.853 9.739,16.777 10.686,17.341 11.860 C 17.786 12.786,17.841 13.076,17.869 14.647 C 17.880 15.322,17.879 15.918,17.865 15.973 C 17.830 16.113,17.547 16.460,17.352 16.601 C 17.200 16.712,17.163 16.720,16.837 16.720 C 16.424 16.720,16.339 16.693,16.120 16.495 C 15.796 16.203,15.767 16.114,15.637 15.011 C 15.465 13.564,15.362 13.076,15.150 12.720 C 14.889 12.281,14.326 11.718,13.804 11.371 C 13.262 11.011,12.660 10.904,10.700 10.818 L 10.100 10.792 10.443 11.146 C 11.391 12.126,11.773 12.592,11.845 12.856 C 11.897 13.048,11.869 13.590,11.801 13.718 C 11.617 14.061,11.195 14.333,10.840 14.337 C 10.384 14.343,10.114 14.134,8.440 12.490 C 7.188 11.260,6.573 10.603,6.310 10.214 C 6.162 9.995,6.160 9.986,6.160 9.604 C 6.160 9.238,6.167 9.204,6.285 9.018 C 6.353 8.909,6.492 8.721,6.594 8.600 C 7.046 8.060,9.470 5.670,10.072 5.169 L 10.324 4.960 10.764 4.960 C 11.119 4.960,11.232 4.975,11.354 5.037 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/receipt-tax.svg b/packages/icons/svg/receipt-tax.svg
index d2d113664d..31bfe572f6 100644
--- a/packages/icons/svg/receipt-tax.svg
+++ b/packages/icons/svg/receipt-tax.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.200 2.524 C 6.693 2.541,5.384 2.566,5.292 2.580 C 4.784 2.654,4.176 3.218,3.808 3.956 L 3.620 4.332 3.607 10.596 C 3.600 14.041,3.607 17.908,3.622 19.189 L 3.650 21.517 3.775 21.465 C 3.898 21.413,4.096 21.304,6.555 19.925 L 7.770 19.244 7.995 19.357 C 8.203 19.462,8.741 19.761,11.093 21.077 C 11.883 21.519,11.977 21.562,12.079 21.526 C 12.141 21.505,12.882 21.095,13.726 20.617 C 14.570 20.138,15.466 19.633,15.719 19.494 L 16.177 19.242 16.628 19.481 C 16.877 19.613,17.596 20.010,18.227 20.365 C 19.552 21.109,20.176 21.440,20.255 21.440 C 20.352 21.440,20.371 19.997,20.375 11.959 L 20.380 4.299 20.247 4.028 C 19.987 3.499,19.492 2.973,18.981 2.681 L 18.762 2.556 15.371 2.519 C 13.506 2.499,11.746 2.485,11.460 2.488 C 11.174 2.491,9.707 2.507,8.200 2.524 M9.232 6.121 C 9.436 6.142,9.652 6.186,9.712 6.217 C 9.905 6.320,10.274 6.654,10.459 6.895 L 10.640 7.130 10.640 7.801 L 10.640 8.472 10.418 8.755 C 10.068 9.203,9.582 9.510,9.111 9.580 C 8.577 9.661,7.749 9.140,7.436 8.527 C 7.348 8.356,7.340 8.294,7.342 7.780 C 7.343 7.238,7.347 7.214,7.457 7.027 C 7.719 6.584,8.194 6.196,8.564 6.123 C 8.804 6.076,8.810 6.076,9.232 6.121 M16.140 6.229 C 16.501 6.418,16.678 6.737,16.679 7.200 C 16.679 7.591,16.597 7.734,15.978 8.420 C 15.293 9.178,9.596 14.858,9.220 15.157 C 8.822 15.474,8.688 15.533,8.360 15.534 C 8.080 15.535,7.935 15.479,7.668 15.270 C 7.418 15.073,7.343 14.883,7.341 14.440 C 7.340 13.969,7.379 13.887,7.866 13.337 C 8.836 12.243,14.580 6.567,15.006 6.282 L 15.260 6.112 15.620 6.129 C 15.883 6.141,16.023 6.168,16.140 6.229 M15.232 12.121 C 15.436 12.142,15.652 12.186,15.712 12.217 C 15.905 12.320,16.274 12.654,16.459 12.895 L 16.640 13.130 16.640 13.801 L 16.640 14.472 16.418 14.755 C 16.068 15.203,15.582 15.510,15.111 15.580 C 14.577 15.661,13.749 15.140,13.436 14.527 C 13.348 14.356,13.340 14.294,13.342 13.780 C 13.343 13.238,13.347 13.214,13.457 13.027 C 13.719 12.584,14.194 12.196,14.564 12.123 C 14.804 12.076,14.810 12.076,15.232 12.121 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.400 2.523 C 5.163 2.563,5.229 2.559,4.919 2.724 C 4.478 2.959,4.059 3.445,3.725 4.109 L 3.600 4.358 3.606 11.769 C 3.609 15.845,3.622 19.709,3.636 20.354 L 3.660 21.529 4.000 21.349 C 4.187 21.250,5.113 20.735,6.059 20.206 L 7.778 19.243 8.159 19.447 C 8.368 19.560,9.210 20.027,10.028 20.485 C 11.747 21.446,11.888 21.520,12.000 21.520 C 12.115 21.520,12.296 21.425,14.040 20.441 C 14.887 19.963,15.715 19.498,15.879 19.408 L 16.178 19.243 16.599 19.469 C 16.831 19.593,17.614 20.025,18.340 20.430 C 19.805 21.246,20.228 21.465,20.266 21.427 C 20.333 21.360,20.354 19.707,20.380 12.325 L 20.409 4.350 20.262 4.061 C 19.986 3.518,19.506 3.000,18.993 2.692 L 18.780 2.564 15.100 2.522 C 13.076 2.499,11.285 2.483,11.120 2.487 C 10.955 2.490,9.731 2.506,8.400 2.523 M9.220 6.124 C 9.418 6.148,9.641 6.196,9.715 6.231 C 9.881 6.308,10.278 6.671,10.487 6.934 L 10.640 7.127 10.640 7.802 L 10.640 8.476 10.446 8.708 C 10.042 9.192,9.746 9.401,9.263 9.541 C 9.070 9.597,8.991 9.601,8.812 9.565 C 8.394 9.481,7.875 9.149,7.625 8.805 C 7.360 8.440,7.353 8.414,7.367 7.746 L 7.380 7.138 7.572 6.868 C 7.837 6.498,8.234 6.207,8.589 6.124 C 8.797 6.075,8.813 6.075,9.220 6.124 M16.090 6.214 C 16.434 6.357,16.630 6.663,16.667 7.112 C 16.712 7.644,16.606 7.785,14.633 9.803 C 13.922 10.531,12.402 12.047,11.256 13.173 C 8.908 15.480,8.859 15.520,8.390 15.520 C 8.076 15.520,7.897 15.456,7.656 15.259 C 7.412 15.059,7.349 14.866,7.366 14.369 C 7.380 13.980,7.384 13.964,7.536 13.743 C 7.773 13.400,9.059 12.067,11.205 9.940 C 13.449 7.717,14.776 6.447,15.060 6.251 C 15.260 6.114,15.261 6.114,15.610 6.136 C 15.803 6.149,16.019 6.184,16.090 6.214 M15.220 12.124 C 15.418 12.148,15.641 12.196,15.715 12.231 C 15.881 12.308,16.278 12.671,16.487 12.934 L 16.640 13.127 16.640 13.802 L 16.640 14.476 16.446 14.708 C 16.042 15.192,15.746 15.401,15.263 15.541 C 15.070 15.597,14.991 15.601,14.812 15.565 C 14.394 15.481,13.875 15.149,13.625 14.805 C 13.360 14.440,13.353 14.414,13.367 13.746 L 13.380 13.138 13.572 12.868 C 13.837 12.498,14.234 12.207,14.589 12.124 C 14.797 12.075,14.813 12.075,15.220 12.124 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/reddit.svg b/packages/icons/svg/reddit.svg
index a78b60df6f..711064dbb8 100644
--- a/packages/icons/svg/reddit.svg
+++ b/packages/icons/svg/reddit.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.026 3.160,9.091 3.415,8.060 3.918 C 5.287 5.272,3.420 7.913,3.059 10.992 C 2.666 14.352,4.239 17.669,7.120 19.560 C 7.929 20.090,9.126 20.589,10.092 20.797 C 14.142 21.669,18.255 19.669,20.083 15.940 C 21.302 13.453,21.302 10.547,20.083 8.060 C 19.190 6.237,17.762 4.810,15.944 3.923 C 15.066 3.494,14.269 3.244,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 M16.142 6.655 C 16.628 6.881,16.814 7.410,16.583 7.908 C 16.419 8.259,16.024 8.476,15.645 8.424 C 15.274 8.373,14.950 8.087,14.860 7.731 L 14.812 7.540 13.856 7.336 C 13.008 7.155,12.897 7.139,12.870 7.196 C 12.843 7.254,12.280 9.853,12.280 9.919 C 12.280 9.935,12.450 9.959,12.658 9.973 C 13.637 10.037,14.756 10.397,15.548 10.904 L 15.756 11.037 15.983 10.900 C 16.392 10.654,16.806 10.625,17.222 10.816 C 17.507 10.946,17.723 11.152,17.862 11.428 C 17.966 11.631,17.980 11.702,17.979 12.000 C 17.978 12.292,17.962 12.371,17.866 12.560 C 17.744 12.801,17.565 13.009,17.382 13.123 L 17.264 13.197 17.257 13.628 C 17.247 14.266,17.082 14.733,16.672 15.290 C 16.017 16.178,14.848 16.833,13.393 17.128 C 12.999 17.208,12.821 17.220,12.020 17.220 C 11.219 17.220,11.041 17.208,10.647 17.128 C 8.919 16.778,7.618 15.927,7.058 14.781 C 6.863 14.381,6.793 14.081,6.784 13.609 C 6.777 13.199,6.776 13.197,6.658 13.123 C 6.483 13.014,6.259 12.764,6.153 12.560 C 6.075 12.408,6.060 12.320,6.060 12.000 C 6.060 11.556,6.138 11.352,6.414 11.074 C 6.664 10.823,6.954 10.704,7.320 10.702 C 7.643 10.700,7.798 10.746,8.072 10.926 L 8.243 11.039 8.600 10.825 C 9.013 10.575,9.518 10.356,10.000 10.216 C 10.427 10.091,11.223 9.960,11.547 9.960 L 11.795 9.960 11.858 9.670 C 11.892 9.511,12.046 8.789,12.199 8.066 C 12.352 7.343,12.498 6.727,12.523 6.696 C 12.598 6.606,12.771 6.627,13.884 6.865 C 14.614 7.020,14.942 7.075,14.952 7.043 C 15.027 6.818,15.457 6.561,15.760 6.561 C 15.865 6.561,16.024 6.600,16.142 6.655 M9.635 12.053 C 9.408 12.138,9.249 12.270,9.130 12.473 C 9.038 12.630,9.020 12.705,9.021 12.940 C 9.022 13.258,9.082 13.400,9.304 13.616 C 9.455 13.762,9.734 13.880,9.932 13.880 C 10.409 13.880,10.880 13.409,10.880 12.932 C 10.880 12.621,10.644 12.247,10.352 12.096 C 10.182 12.008,9.814 11.986,9.635 12.053 M13.754 12.053 C 13.392 12.188,13.120 12.565,13.120 12.930 C 13.120 13.409,13.590 13.880,14.068 13.880 C 14.266 13.880,14.545 13.762,14.696 13.616 C 14.919 13.399,14.978 13.258,14.979 12.937 C 14.980 12.690,14.964 12.628,14.859 12.458 C 14.632 12.091,14.137 11.910,13.754 12.053 M9.786 15.073 C 9.511 15.377,10.186 15.835,11.188 16.023 C 11.681 16.115,12.689 16.085,13.136 15.965 C 13.708 15.811,14.186 15.538,14.283 15.310 C 14.321 15.220,14.318 15.182,14.264 15.100 C 14.175 14.964,14.028 14.971,13.839 15.121 C 13.030 15.762,11.010 15.762,10.201 15.121 C 10.027 14.983,9.883 14.967,9.786 15.073 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.078 3.060 C 9.848 3.209,8.988 3.464,7.940 3.990 C 7.026 4.450,6.304 4.981,5.557 5.746 C 3.305 8.050,2.464 11.369,3.348 14.460 C 4.062 16.957,5.924 19.127,8.246 20.166 C 9.610 20.777,10.903 21.039,12.300 20.988 C 16.060 20.851,19.315 18.422,20.516 14.858 C 21.158 12.953,21.159 11.050,20.521 9.160 C 20.065 7.807,19.417 6.743,18.443 5.746 C 17.703 4.988,17.012 4.478,16.080 4.002 C 14.842 3.370,13.865 3.114,12.395 3.040 C 11.507 2.995,11.624 2.994,11.078 3.060 M16.015 6.617 C 16.119 6.648,16.268 6.722,16.346 6.782 C 16.519 6.914,16.679 7.241,16.680 7.463 C 16.681 7.862,16.411 8.254,16.051 8.377 C 15.818 8.456,15.702 8.456,15.469 8.377 C 15.156 8.270,14.929 7.991,14.820 7.579 C 14.815 7.557,14.443 7.463,13.995 7.371 C 12.772 7.118,12.893 7.125,12.844 7.306 C 12.759 7.622,12.322 9.668,12.311 9.801 L 12.300 9.939 12.758 9.987 C 13.775 10.094,14.724 10.402,15.489 10.873 L 15.759 11.039 15.949 10.927 C 16.054 10.865,16.176 10.801,16.220 10.785 C 16.838 10.550,17.554 10.835,17.859 11.437 C 17.945 11.608,17.960 11.691,17.960 12.000 C 17.960 12.307,17.945 12.393,17.860 12.560 C 17.739 12.800,17.559 13.009,17.382 13.119 L 17.250 13.201 17.230 13.690 C 17.206 14.289,17.125 14.567,16.833 15.040 C 16.357 15.814,15.491 16.460,14.426 16.836 C 13.504 17.161,12.756 17.265,11.640 17.223 C 10.884 17.194,10.459 17.117,9.753 16.881 C 8.501 16.462,7.571 15.746,7.104 14.840 C 6.875 14.397,6.842 14.273,6.803 13.704 L 6.770 13.228 6.543 13.029 C 6.418 12.919,6.263 12.737,6.198 12.625 C 6.091 12.438,6.081 12.386,6.080 12.045 C 6.080 11.524,6.128 11.388,6.418 11.097 C 6.711 10.803,6.918 10.720,7.357 10.721 C 7.670 10.722,7.877 10.787,8.122 10.961 L 8.238 11.044 8.609 10.827 C 9.011 10.592,9.391 10.417,9.800 10.279 C 10.165 10.157,10.988 10.001,11.425 9.973 C 11.765 9.950,11.796 9.941,11.817 9.858 C 11.829 9.808,11.930 9.339,12.042 8.814 C 12.328 7.463,12.483 6.792,12.528 6.706 C 12.579 6.610,12.736 6.628,13.872 6.864 C 14.340 6.961,14.773 7.040,14.834 7.040 C 14.912 7.040,14.972 7.003,15.036 6.917 C 15.137 6.780,15.561 6.560,15.724 6.560 C 15.781 6.560,15.912 6.585,16.015 6.617 M9.667 12.057 C 9.467 12.111,9.200 12.330,9.102 12.520 C 8.945 12.826,9.003 13.274,9.234 13.530 C 9.410 13.726,9.721 13.879,9.942 13.880 C 10.146 13.880,10.482 13.716,10.625 13.547 C 10.778 13.366,10.878 13.126,10.879 12.940 C 10.880 12.582,10.518 12.109,10.203 12.058 C 10.125 12.045,10.015 12.028,9.960 12.020 C 9.905 12.011,9.773 12.028,9.667 12.057 M13.760 12.050 C 13.683 12.076,13.529 12.187,13.419 12.298 C 13.039 12.678,13.024 13.131,13.375 13.547 C 13.518 13.716,13.854 13.880,14.058 13.880 C 14.279 13.879,14.590 13.726,14.766 13.530 C 14.997 13.274,15.055 12.827,14.898 12.520 C 14.830 12.387,14.612 12.185,14.445 12.101 C 14.274 12.015,13.941 11.990,13.760 12.050 M9.797 15.083 C 9.699 15.181,9.718 15.329,9.848 15.467 C 9.983 15.613,10.447 15.833,10.865 15.950 C 11.238 16.054,11.304 16.060,12.040 16.056 C 12.926 16.051,13.199 16.000,13.738 15.737 C 14.037 15.592,14.320 15.340,14.320 15.220 C 14.320 15.139,14.176 15.000,14.093 15.000 C 14.056 15.000,13.916 15.072,13.781 15.159 C 12.878 15.748,11.162 15.748,10.259 15.159 C 9.980 14.978,9.913 14.967,9.797 15.083 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/refresh.svg b/packages/icons/svg/refresh.svg
index efd874047d..2ff05e5061 100644
--- a/packages/icons/svg/refresh.svg
+++ b/packages/icons/svg/refresh.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.323 2.580 C 4.098 2.682,3.845 2.914,3.719 3.134 L 3.601 3.340 3.605 5.120 C 3.607 6.099,3.621 7.585,3.635 8.423 L 3.660 9.946 3.781 10.142 C 3.848 10.250,4.026 10.442,4.177 10.569 L 4.452 10.800 7.796 10.800 L 11.141 10.800 11.359 10.621 C 11.645 10.386,11.862 10.060,11.921 9.776 C 12.015 9.322,11.822 8.932,11.341 8.601 L 11.180 8.490 10.180 8.463 C 8.856 8.427,7.541 8.365,7.463 8.336 C 7.375 8.302,7.384 8.248,7.503 8.092 C 7.641 7.911,8.394 7.268,8.697 7.072 C 9.026 6.859,9.891 6.441,10.380 6.259 L 10.780 6.110 11.857 6.137 C 13.471 6.178,13.678 6.218,14.560 6.662 C 15.099 6.933,15.434 7.152,15.837 7.497 C 16.435 8.009,16.765 8.427,17.400 9.477 C 17.844 10.212,18.136 10.577,18.348 10.666 C 18.422 10.697,18.621 10.720,18.811 10.720 C 19.108 10.720,19.163 10.708,19.322 10.607 C 19.526 10.477,19.763 10.226,19.865 10.032 C 19.973 9.829,19.953 9.410,19.819 9.040 C 19.271 7.531,17.971 5.931,16.560 5.031 C 15.882 4.599,15.030 4.199,14.410 4.021 C 13.237 3.686,11.504 3.609,10.305 3.841 C 9.116 4.070,7.949 4.635,6.535 5.665 C 6.312 5.827,6.120 5.960,6.107 5.960 C 6.067 5.960,6.043 5.634,6.000 4.510 C 5.977 3.899,5.947 3.344,5.933 3.276 C 5.903 3.125,5.532 2.714,5.346 2.626 C 5.145 2.530,4.496 2.501,4.323 2.580 M4.614 13.433 C 4.330 13.641,4.098 14.015,4.054 14.336 C 4.021 14.581,4.146 14.979,4.460 15.620 C 4.897 16.515,5.433 17.237,6.233 18.006 C 7.316 19.047,8.627 19.769,10.101 20.135 C 10.792 20.307,11.091 20.338,12.020 20.336 C 13.007 20.333,13.459 20.279,14.153 20.078 C 15.303 19.746,16.341 19.207,17.428 18.378 C 17.918 18.004,17.911 18.006,17.937 18.210 C 17.950 18.303,17.979 18.866,18.002 19.460 C 18.025 20.054,18.059 20.608,18.078 20.691 C 18.126 20.904,18.205 21.010,18.501 21.253 C 18.874 21.561,19.110 21.618,19.516 21.497 C 19.684 21.448,19.786 21.377,20.017 21.147 C 20.279 20.888,20.311 20.841,20.334 20.664 C 20.348 20.557,20.360 19.012,20.360 17.231 L 20.360 13.993 20.024 13.651 L 19.688 13.310 16.294 13.333 C 14.367 13.346,12.822 13.372,12.720 13.394 C 12.511 13.439,12.281 13.665,12.146 13.960 C 12.036 14.198,12.030 14.639,12.132 14.845 C 12.218 15.018,12.598 15.417,12.751 15.495 C 12.883 15.562,13.277 15.589,15.113 15.658 C 16.045 15.692,16.542 15.726,16.572 15.756 C 16.605 15.789,16.546 15.873,16.338 16.084 C 15.564 16.871,14.761 17.357,13.600 17.743 L 13.140 17.896 12.351 17.912 C 11.280 17.933,10.768 17.882,10.260 17.705 C 9.467 17.429,8.917 17.132,8.339 16.667 C 7.710 16.161,7.296 15.659,6.678 14.655 C 5.926 13.430,5.857 13.369,5.193 13.333 C 4.781 13.311,4.780 13.311,4.614 13.433 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.478 2.559 C 4.182 2.596,3.850 2.872,3.660 3.240 C 3.591 3.373,3.589 3.540,3.614 6.631 C 3.639 9.755,3.643 9.889,3.718 10.031 C 3.814 10.214,3.999 10.423,4.252 10.637 L 4.445 10.800 7.801 10.800 L 11.157 10.800 11.411 10.563 C 12.132 9.888,12.115 9.174,11.364 8.623 L 11.169 8.480 10.715 8.479 C 9.749 8.477,7.520 8.370,7.441 8.321 C 7.316 8.243,7.750 7.788,8.480 7.231 C 8.777 7.004,9.897 6.434,10.424 6.242 L 10.780 6.112 11.760 6.139 C 13.378 6.182,13.665 6.232,14.420 6.599 C 14.989 6.875,15.424 7.153,15.855 7.515 C 16.401 7.974,16.722 8.390,17.563 9.734 C 17.918 10.300,18.241 10.655,18.435 10.693 C 18.663 10.738,19.076 10.723,19.211 10.665 C 19.394 10.586,19.651 10.352,19.796 10.133 C 19.907 9.966,19.920 9.914,19.920 9.650 C 19.920 9.283,19.803 8.916,19.494 8.313 C 18.783 6.922,17.617 5.665,16.315 4.886 C 14.933 4.059,13.648 3.720,11.891 3.720 C 9.950 3.720,8.607 4.197,6.666 5.575 C 6.368 5.787,6.116 5.960,6.107 5.960 C 6.076 5.960,6.042 5.480,5.996 4.400 C 5.968 3.733,5.933 3.295,5.901 3.220 C 5.822 3.031,5.536 2.734,5.350 2.647 C 5.167 2.562,4.772 2.522,4.478 2.559 M4.595 13.454 C 4.376 13.622,4.189 13.891,4.096 14.173 C 4.009 14.433,4.056 14.694,4.286 15.240 C 5.018 16.970,6.567 18.602,8.302 19.470 C 8.995 19.817,9.942 20.131,10.687 20.262 C 11.137 20.341,12.673 20.352,13.200 20.281 C 13.930 20.182,14.776 19.912,15.580 19.520 C 16.226 19.206,16.663 18.938,17.346 18.437 C 17.614 18.240,17.851 18.080,17.874 18.080 C 17.929 18.080,17.953 18.338,18.001 19.480 C 18.056 20.788,18.067 20.838,18.368 21.127 C 18.698 21.446,18.977 21.578,19.259 21.549 C 19.556 21.518,19.722 21.430,20.017 21.144 C 20.195 20.972,20.284 20.851,20.315 20.739 C 20.346 20.629,20.360 19.569,20.360 17.279 L 20.360 13.978 20.029 13.649 L 19.698 13.320 18.139 13.323 C 17.282 13.324,15.705 13.339,14.636 13.356 C 12.732 13.385,12.689 13.388,12.550 13.474 C 12.183 13.700,11.985 14.202,12.080 14.661 C 12.119 14.847,12.165 14.920,12.406 15.178 C 12.609 15.395,12.727 15.489,12.833 15.517 C 13.043 15.571,13.400 15.595,15.000 15.662 C 15.781 15.695,16.451 15.731,16.490 15.743 C 16.529 15.756,16.560 15.787,16.560 15.813 C 16.561 15.893,15.834 16.567,15.458 16.834 C 15.003 17.157,14.290 17.506,13.600 17.742 L 13.060 17.927 12.000 17.907 C 10.789 17.885,10.600 17.853,9.828 17.537 C 9.063 17.224,8.462 16.825,7.876 16.242 C 7.459 15.827,7.205 15.486,6.610 14.543 C 6.143 13.802,5.919 13.527,5.702 13.424 C 5.634 13.391,5.399 13.353,5.179 13.338 L 4.780 13.311 4.595 13.454 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/relation.svg b/packages/icons/svg/relation.svg
new file mode 100644
index 0000000000..61a189a7a4
--- /dev/null
+++ b/packages/icons/svg/relation.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.526 6.922 C 8.624 7.103,8.290 8.260,8.948 8.928 C 9.301 9.286,9.252 9.280,11.631 9.280 L 13.699 9.280 10.374 12.610 C 6.685 16.305,6.897 16.061,6.903 16.605 C 6.910 17.266,7.437 17.769,8.118 17.765 C 8.626 17.763,8.444 17.923,12.068 14.306 L 15.357 11.025 15.368 13.083 L 15.380 15.140 15.475 15.351 C 15.603 15.634,15.938 15.938,16.210 16.019 C 16.671 16.156,17.065 16.058,17.404 15.721 C 17.806 15.322,17.780 15.611,17.780 11.480 C 17.780 8.133,17.775 7.887,17.708 7.693 C 17.611 7.417,17.369 7.150,17.089 7.012 L 16.860 6.900 13.280 6.894 C 11.311 6.890,9.622 6.903,9.526 6.922 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/relationship.svg b/packages/icons/svg/relationship.svg
new file mode 100644
index 0000000000..dfea5a7bd6
--- /dev/null
+++ b/packages/icons/svg/relationship.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.926 4.922 C 10.545 4.999,10.179 5.323,10.056 5.693 C 9.865 6.266,10.114 6.883,10.651 7.170 C 10.819 7.260,10.827 7.260,12.930 7.271 C 14.091 7.278,15.040 7.296,15.040 7.311 C 15.040 7.327,12.800 9.581,10.061 12.319 C 4.559 17.821,4.902 17.444,4.903 17.982 C 4.903 18.453,5.136 18.823,5.571 19.046 C 5.807 19.166,6.207 19.190,6.485 19.101 C 6.691 19.034,6.914 18.817,11.728 14.008 L 16.757 8.984 16.768 11.082 L 16.780 13.180 16.878 13.378 C 17.004 13.632,17.237 13.865,17.474 13.973 C 17.759 14.104,18.232 14.094,18.505 13.951 C 18.618 13.892,18.783 13.761,18.873 13.659 C 19.178 13.312,19.163 13.537,19.151 9.417 L 19.140 5.740 19.021 5.526 C 18.890 5.288,18.711 5.123,18.440 4.989 L 18.260 4.900 14.680 4.894 C 12.711 4.890,11.022 4.903,10.926 4.922 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/replay.svg b/packages/icons/svg/replay.svg
index 33fa5ff1c8..975e0e513b 100644
--- a/packages/icons/svg/replay.svg
+++ b/packages/icons/svg/replay.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.700 3.919 C 6.686 4.801,3.317 8.173,2.797 8.827 C 2.364 9.371,2.328 9.716,2.653 10.173 C 3.050 10.729,7.393 15.076,7.822 15.346 C 8.091 15.516,8.294 15.574,8.509 15.545 C 8.890 15.493,9.234 15.261,9.431 14.925 C 9.525 14.765,9.540 14.696,9.540 14.420 C 9.540 14.145,9.525 14.075,9.433 13.920 C 9.277 13.656,8.747 13.075,7.563 11.870 L 6.511 10.800 7.038 10.800 C 7.884 10.800,11.635 10.877,12.920 10.921 C 14.181 10.964,14.728 11.024,15.096 11.162 C 15.454 11.296,16.199 11.686,16.572 11.934 C 17.505 12.554,18.296 13.567,18.755 14.729 C 18.989 15.321,19.046 15.748,19.141 17.620 C 19.237 19.516,19.271 19.704,19.579 20.007 C 19.757 20.184,19.924 20.268,20.197 20.319 C 20.635 20.402,21.035 20.222,21.416 19.772 L 21.611 19.540 21.587 17.920 C 21.553 15.687,21.509 15.323,21.146 14.260 C 20.663 12.844,20.213 12.088,19.250 11.076 C 18.355 10.136,17.412 9.510,16.133 9.007 C 15.493 8.755,15.115 8.650,14.680 8.601 C 14.187 8.546,12.332 8.487,9.500 8.438 C 8.136 8.414,6.921 8.382,6.800 8.366 L 6.580 8.339 7.320 7.578 C 8.871 5.985,9.386 5.406,9.501 5.131 C 9.670 4.728,9.454 4.146,9.037 3.878 C 8.857 3.763,8.810 3.752,8.391 3.732 L 7.940 3.711 7.700 3.919 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.540 4.061 C 7.011 4.527,3.246 8.292,2.908 8.694 C 2.445 9.244,2.345 9.585,2.534 9.972 C 2.667 10.243,3.469 11.102,5.283 12.916 C 7.894 15.526,8.104 15.686,8.687 15.502 C 9.437 15.266,9.788 14.458,9.397 13.867 C 9.223 13.605,8.598 12.926,7.503 11.810 L 6.511 10.800 7.006 10.800 C 7.753 10.800,11.218 10.874,12.612 10.920 C 13.888 10.963,14.465 11.006,14.837 11.088 C 15.134 11.154,16.096 11.630,16.580 11.951 C 17.353 12.465,18.055 13.288,18.515 14.220 C 18.970 15.141,19.017 15.397,19.141 17.680 C 19.237 19.446,19.272 19.649,19.532 19.944 C 19.717 20.155,19.905 20.259,20.193 20.311 C 20.620 20.389,20.940 20.255,21.350 19.827 L 21.600 19.567 21.599 18.593 C 21.598 17.330,21.537 15.934,21.462 15.468 C 21.310 14.522,20.771 13.119,20.258 12.331 C 19.621 11.355,18.596 10.353,17.598 9.732 C 16.874 9.282,15.737 8.807,15.040 8.665 C 14.628 8.581,13.585 8.531,11.160 8.480 C 8.141 8.417,6.638 8.371,6.609 8.343 C 6.595 8.329,6.872 8.025,7.224 7.669 C 9.137 5.729,9.560 5.216,9.560 4.837 C 9.560 4.598,9.438 4.289,9.268 4.096 C 9.032 3.828,8.880 3.766,8.373 3.736 L 7.940 3.709 7.540 4.061 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/rewind.svg b/packages/icons/svg/rewind.svg
index e371256c11..c03304e368 100644
--- a/packages/icons/svg/rewind.svg
+++ b/packages/icons/svg/rewind.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.503 6.101 C 10.257 6.186,8.537 7.291,5.740 9.162 C 3.260 10.820,2.676 11.265,2.515 11.620 C 2.418 11.832,2.420 12.172,2.519 12.391 C 2.678 12.740,3.209 13.162,5.153 14.480 C 7.348 15.969,9.703 17.491,10.261 17.782 C 10.478 17.895,10.570 17.920,10.768 17.920 C 11.166 17.920,11.303 17.857,11.670 17.505 L 12.000 17.189 12.000 15.314 L 12.000 13.440 13.970 14.753 C 17.607 17.178,18.569 17.788,18.943 17.906 C 19.145 17.970,19.172 17.970,19.404 17.905 C 19.694 17.825,19.930 17.671,20.150 17.422 C 20.288 17.265,20.312 17.209,20.334 16.991 C 20.347 16.853,20.370 14.517,20.384 11.800 L 20.409 6.860 20.213 6.620 C 19.954 6.303,19.620 6.127,19.213 6.093 C 18.928 6.069,18.926 6.069,18.600 6.258 C 18.188 6.495,16.992 7.265,14.740 8.741 C 13.003 9.880,12.181 10.400,12.117 10.400 C 12.064 10.400,12.045 10.117,12.021 9.000 C 11.994 7.697,11.941 6.928,11.867 6.751 C 11.693 6.335,10.910 5.962,10.503 6.101 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.260 6.231 C 9.812 6.480,8.211 7.517,6.140 8.900 C 2.828 11.113,2.506 11.373,2.454 11.882 C 2.403 12.377,2.601 12.647,3.521 13.335 C 4.810 14.300,9.461 17.367,10.257 17.778 C 10.464 17.885,10.534 17.900,10.817 17.899 C 11.210 17.898,11.281 17.864,11.693 17.478 L 12.000 17.192 12.000 15.317 L 12.000 13.443 14.510 15.111 C 18.297 17.629,18.815 17.942,19.180 17.937 C 19.538 17.932,20.004 17.654,20.233 17.308 L 20.340 17.146 20.366 14.923 C 20.380 13.700,20.393 11.383,20.396 9.774 L 20.400 6.848 20.257 6.676 C 19.937 6.294,19.570 6.108,19.126 6.103 C 18.872 6.100,18.843 6.110,18.500 6.318 C 18.063 6.583,16.650 7.494,14.640 8.806 C 12.477 10.220,12.137 10.430,12.092 10.385 C 12.080 10.374,12.055 9.837,12.036 9.192 C 12.002 8.065,11.942 7.060,11.894 6.830 C 11.826 6.508,11.255 6.126,10.792 6.094 C 10.558 6.077,10.520 6.087,10.260 6.231 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/rss.svg b/packages/icons/svg/rss.svg
index 629ffd5db9..93e67b1da1 100644
--- a/packages/icons/svg/rss.svg
+++ b/packages/icons/svg/rss.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.789 3.684 C 5.177 3.828,4.770 4.394,4.858 4.979 C 4.891 5.203,5.158 5.612,5.355 5.740 C 5.567 5.878,5.849 5.938,7.139 6.121 C 9.273 6.424,9.819 6.582,11.275 7.319 C 13.056 8.221,14.403 9.327,15.516 10.800 C 15.965 11.395,16.258 11.870,16.665 12.660 C 17.377 14.044,17.591 14.798,17.898 17.004 C 18.061 18.167,18.121 18.439,18.266 18.649 C 18.488 18.970,18.787 19.120,19.206 19.120 C 19.574 19.120,19.757 19.035,20.051 18.726 C 20.321 18.443,20.360 18.320,20.359 17.740 C 20.359 15.942,19.921 13.966,19.119 12.131 C 18.686 11.144,18.022 10.048,17.316 9.160 C 16.861 8.588,15.313 7.045,14.840 6.693 C 13.876 5.975,12.876 5.376,11.852 4.903 C 10.319 4.195,9.036 3.890,6.800 3.700 C 6.018 3.634,6.000 3.634,5.789 3.684 M5.686 9.720 C 5.394 9.782,5.153 9.997,4.975 10.351 C 4.881 10.539,4.872 10.596,4.888 10.875 C 4.902 11.121,4.929 11.229,5.012 11.370 C 5.237 11.754,5.414 11.828,6.740 12.097 C 7.802 12.313,8.065 12.392,8.562 12.641 C 9.212 12.967,9.657 13.292,10.203 13.837 C 11.230 14.865,11.614 15.670,11.940 17.480 C 12.072 18.216,12.134 18.427,12.282 18.650 C 12.501 18.981,12.786 19.120,13.242 19.120 C 13.565 19.120,13.854 18.990,14.058 18.752 C 14.337 18.425,14.405 17.970,14.304 17.098 C 14.097 15.311,13.283 13.553,12.086 12.310 C 10.547 10.709,8.504 9.769,6.422 9.701 C 6.113 9.691,5.781 9.700,5.686 9.720 M5.163 15.819 C 4.400 16.184,3.849 16.843,3.693 17.576 C 3.503 18.467,3.963 19.473,4.805 20.012 C 5.166 20.243,5.351 20.287,5.964 20.288 C 6.822 20.289,7.119 20.166,7.683 19.574 C 8.204 19.027,8.345 18.631,8.309 17.824 C 8.288 17.366,8.281 17.335,8.122 17.014 C 7.857 16.480,7.330 16.013,6.771 15.817 C 6.637 15.770,6.400 15.745,5.980 15.733 C 5.399 15.716,5.373 15.719,5.163 15.819 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.758 3.694 C 5.238 3.835,4.840 4.332,4.840 4.841 C 4.840 5.033,5.042 5.432,5.238 5.628 C 5.475 5.865,5.616 5.899,7.760 6.219 C 9.090 6.418,9.719 6.593,10.655 7.022 C 12.234 7.746,13.354 8.508,14.441 9.598 C 15.338 10.496,15.900 11.248,16.503 12.360 C 17.297 13.821,17.541 14.624,17.880 16.898 C 17.968 17.493,18.065 18.082,18.094 18.206 C 18.236 18.805,18.631 19.121,19.236 19.119 C 19.513 19.118,19.735 19.021,19.981 18.795 C 20.321 18.482,20.340 18.412,20.338 17.540 C 20.331 15.175,19.519 12.495,18.158 10.352 C 17.531 9.363,16.881 8.607,15.613 7.393 C 14.678 6.497,13.681 5.821,12.220 5.090 C 10.557 4.258,9.193 3.911,6.760 3.701 C 5.948 3.631,5.993 3.631,5.758 3.694 M5.480 9.796 C 5.142 9.983,4.880 10.407,4.880 10.769 C 4.880 11.107,4.980 11.382,5.173 11.575 C 5.379 11.781,5.614 11.861,6.667 12.082 C 7.695 12.297,8.072 12.409,8.540 12.639 C 9.232 12.977,9.907 13.488,10.418 14.060 C 11.267 15.010,11.587 15.718,11.919 17.383 C 12.007 17.825,12.106 18.264,12.140 18.360 C 12.312 18.848,12.699 19.120,13.222 19.120 C 13.991 19.120,14.422 18.491,14.343 17.482 C 14.196 15.586,13.402 13.734,12.156 12.382 C 11.253 11.403,9.884 10.525,8.608 10.107 C 7.758 9.828,7.315 9.753,6.400 9.734 C 5.685 9.719,5.608 9.725,5.480 9.796 M5.277 15.775 C 4.849 15.928,4.334 16.349,4.043 16.783 C 3.701 17.295,3.580 17.854,3.695 18.396 C 3.857 19.159,4.364 19.814,5.040 20.136 C 5.283 20.252,5.334 20.261,5.836 20.274 C 6.762 20.298,7.060 20.192,7.605 19.642 C 8.196 19.046,8.350 18.646,8.309 17.813 C 8.288 17.392,8.276 17.337,8.135 17.050 C 7.925 16.619,7.460 16.152,7.034 15.942 C 6.769 15.812,6.674 15.788,6.314 15.758 C 5.739 15.710,5.444 15.715,5.277 15.775 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/ruby.svg b/packages/icons/svg/ruby.svg
index 37bc9126cf..a97fc1619a 100644
--- a/packages/icons/svg/ruby.svg
+++ b/packages/icons/svg/ruby.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.546 4.282 C 14.427 4.432,13.503 4.564,13.492 4.575 C 13.460 4.607,14.114 4.800,14.253 4.800 C 14.324 4.800,14.598 4.747,14.861 4.683 C 15.124 4.619,15.853 4.456,16.480 4.321 C 17.107 4.186,17.637 4.058,17.658 4.038 C 17.708 3.988,17.857 3.970,15.546 4.282 M17.840 4.590 C 16.685 4.844,15.733 5.058,15.723 5.066 C 15.714 5.074,15.716 5.090,15.728 5.101 C 15.760 5.134,20.883 6.526,20.919 6.512 C 20.937 6.505,20.762 5.965,20.530 5.310 C 20.154 4.250,20.099 4.120,20.024 4.124 C 19.978 4.127,18.995 4.336,17.840 4.590 M11.440 5.445 C 9.506 6.505,9.291 6.645,8.520 7.359 C 8.245 7.614,7.624 8.182,7.140 8.621 C 5.791 9.846,5.949 9.664,4.948 11.144 L 4.323 12.068 4.736 12.474 C 5.015 12.748,5.178 12.880,5.239 12.880 C 5.289 12.880,6.109 12.493,7.062 12.021 L 8.793 11.162 9.248 10.731 C 9.499 10.494,10.398 9.673,11.246 8.906 L 12.788 7.511 13.338 6.433 C 13.641 5.840,13.882 5.348,13.873 5.340 C 13.826 5.292,12.643 4.881,12.560 4.883 C 12.505 4.885,12.001 5.137,11.440 5.445 M14.520 5.397 C 14.453 5.438,13.412 7.505,13.443 7.536 C 13.470 7.563,19.440 6.669,19.440 6.638 C 19.440 6.620,15.104 5.478,14.640 5.374 C 14.607 5.366,14.553 5.377,14.520 5.397 M20.706 7.271 C 20.577 7.463,19.513 9.042,18.342 10.780 C 17.171 12.518,16.202 13.970,16.189 14.006 C 16.165 14.075,19.803 20.083,20.134 20.520 L 20.300 20.740 20.311 20.560 C 20.328 20.301,21.000 7.040,21.000 6.975 C 21.000 6.865,20.935 6.930,20.706 7.271 M16.860 7.502 C 15.100 7.795,13.639 8.036,13.614 8.037 C 13.576 8.040,15.765 13.370,15.836 13.446 C 15.854 13.465,19.721 7.787,20.174 7.076 L 20.248 6.960 20.154 6.964 C 20.102 6.967,18.620 7.209,16.860 7.502 M11.180 9.703 C 10.147 10.635,9.296 11.412,9.290 11.430 C 9.284 11.448,10.337 11.800,11.630 12.212 C 12.922 12.625,14.280 13.059,14.647 13.176 L 15.315 13.390 15.241 13.205 C 15.072 12.782,13.120 8.113,13.091 8.062 C 13.069 8.023,12.541 8.476,11.180 9.703 M7.029 12.675 C 6.175 13.110,5.462 13.483,5.444 13.503 C 5.409 13.543,7.091 17.850,7.149 17.870 C 7.168 17.876,7.268 17.535,7.371 17.111 C 7.474 16.687,7.802 15.346,8.099 14.132 C 8.397 12.917,8.640 11.914,8.640 11.902 C 8.640 11.890,8.627 11.881,8.610 11.881 C 8.594 11.882,7.882 12.239,7.029 12.675 M9.139 11.971 C 9.098 12.087,7.483 18.857,7.494 18.867 C 7.501 18.874,9.197 17.806,11.263 16.494 C 13.329 15.183,15.089 14.065,15.174 14.012 C 15.258 13.958,15.320 13.907,15.311 13.898 C 15.302 13.888,13.937 13.448,12.277 12.920 C 10.618 12.391,9.237 11.950,9.208 11.940 C 9.180 11.930,9.149 11.944,9.139 11.971 M3.542 15.109 C 3.259 16.490,3.019 17.652,3.009 17.690 C 2.999 17.729,3.008 17.760,3.030 17.760 C 3.084 17.760,4.880 13.643,4.880 13.519 C 4.880 13.445,4.773 13.311,4.469 13.009 L 4.058 12.599 3.542 15.109 M4.091 16.670 C 3.515 18.026,3.051 19.144,3.061 19.154 C 3.077 19.170,7.048 19.077,7.071 19.060 C 7.086 19.048,5.201 14.265,5.167 14.231 C 5.151 14.215,4.667 15.313,4.091 16.670 M11.869 16.766 C 9.717 18.133,7.963 19.256,7.969 19.262 C 7.975 19.269,10.608 19.626,13.820 20.057 C 17.032 20.488,19.693 20.848,19.733 20.857 C 19.784 20.869,19.800 20.857,19.785 20.817 C 19.748 20.723,15.822 14.283,15.800 14.282 C 15.789 14.282,14.020 15.400,11.869 16.766 M5.520 19.649 C 4.215 19.683,3.840 19.706,3.840 19.753 C 3.840 19.768,6.788 20.048,10.390 20.374 C 13.992 20.700,17.017 20.977,17.110 20.989 C 17.203 21.001,17.280 20.995,17.280 20.975 C 17.280 20.956,16.762 20.871,16.130 20.787 C 15.497 20.703,13.864 20.482,12.500 20.296 C 9.296 19.859,7.634 19.652,7.160 19.632 C 6.951 19.623,6.213 19.630,5.520 19.649 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.320 4.046 C 17.177 4.065,16.403 4.170,15.600 4.279 C 13.617 4.548,13.509 4.565,13.549 4.605 C 13.568 4.624,13.736 4.679,13.923 4.727 L 14.262 4.815 15.301 4.585 C 17.009 4.206,17.577 4.074,17.640 4.037 C 17.714 3.994,17.690 3.995,17.320 4.046 M19.520 4.226 C 17.706 4.615,15.775 5.052,15.748 5.078 C 15.730 5.095,15.784 5.127,15.868 5.150 C 15.951 5.172,16.911 5.434,18.000 5.732 C 20.486 6.411,20.894 6.519,20.913 6.500 C 20.942 6.471,20.282 4.564,20.137 4.259 C 20.101 4.183,20.050 4.122,20.025 4.123 C 20.000 4.125,19.773 4.171,19.520 4.226 M12.300 4.994 C 11.981 5.146,10.450 5.987,9.921 6.301 C 9.689 6.439,9.363 6.657,9.196 6.786 C 8.840 7.060,6.372 9.311,6.018 9.685 C 5.756 9.960,5.464 10.363,4.768 11.407 L 4.323 12.074 4.745 12.477 C 4.977 12.699,5.192 12.880,5.224 12.880 C 5.294 12.880,6.581 12.270,7.848 11.636 C 8.778 11.171,8.804 11.154,9.189 10.791 C 9.560 10.440,11.174 8.968,12.289 7.962 L 12.797 7.505 13.343 6.426 C 13.777 5.568,13.877 5.341,13.831 5.316 C 13.768 5.280,12.604 4.880,12.565 4.880 C 12.551 4.880,12.432 4.931,12.300 4.994 M14.510 5.416 C 14.452 5.474,13.618 7.098,13.504 7.376 L 13.439 7.531 13.710 7.504 C 14.336 7.440,19.326 6.683,19.369 6.645 C 19.398 6.618,18.811 6.457,16.280 5.799 C 14.413 5.314,14.577 5.349,14.510 5.416 M20.857 7.061 C 20.746 7.203,17.574 11.911,16.576 13.414 L 16.182 14.008 16.317 14.254 C 16.518 14.620,18.244 17.493,19.060 18.820 C 19.809 20.039,20.211 20.657,20.279 20.699 C 20.304 20.715,20.320 20.665,20.320 20.570 C 20.320 20.484,20.347 19.912,20.380 19.297 C 20.562 15.882,21.001 7.048,20.991 6.981 C 20.982 6.915,20.960 6.928,20.857 7.061 M16.860 7.502 C 15.100 7.796,13.648 8.038,13.633 8.038 C 13.618 8.039,13.678 8.225,13.765 8.450 C 13.986 9.018,15.301 12.220,15.590 12.891 C 15.809 13.401,15.831 13.436,15.888 13.371 C 16.038 13.199,19.982 7.401,20.215 7.010 C 20.235 6.976,20.216 6.961,20.152 6.964 C 20.102 6.966,18.620 7.208,16.860 7.502 M12.620 8.425 C 12.233 8.758,10.337 10.459,9.635 11.103 L 9.291 11.420 9.395 11.469 C 9.681 11.602,15.238 13.375,15.270 13.344 C 15.290 13.324,14.755 12.022,13.292 8.530 C 13.189 8.283,13.085 8.080,13.062 8.081 C 13.039 8.081,12.840 8.236,12.620 8.425 M7.021 12.682 C 6.164 13.123,5.457 13.489,5.450 13.496 C 5.406 13.541,7.083 17.840,7.145 17.840 C 7.154 17.840,7.181 17.791,7.204 17.730 C 7.241 17.634,8.640 11.954,8.640 11.900 C 8.640 11.889,8.627 11.880,8.610 11.880 C 8.594 11.881,7.879 12.242,7.021 12.682 M8.964 12.670 C 8.197 15.848,7.519 18.742,7.528 18.789 C 7.542 18.853,7.742 18.729,11.840 16.128 C 13.347 15.171,14.738 14.291,14.930 14.170 C 15.123 14.050,15.280 13.936,15.280 13.917 C 15.280 13.899,14.862 13.748,14.350 13.584 C 11.573 12.689,9.261 11.960,9.202 11.960 C 9.148 11.960,9.101 12.102,8.964 12.670 M3.545 15.089 C 3.264 16.459,3.024 17.625,3.012 17.680 C 2.936 18.023,3.339 17.167,4.217 15.120 C 4.917 13.488,4.900 13.533,4.842 13.423 C 4.814 13.372,4.627 13.166,4.424 12.964 L 4.056 12.598 3.545 15.089 M5.089 14.382 C 4.857 14.841,3.080 19.036,3.080 19.127 C 3.080 19.160,3.386 19.165,4.210 19.145 C 6.727 19.087,7.040 19.072,7.040 19.012 C 7.040 18.957,6.173 16.726,5.506 15.062 L 5.170 14.224 5.089 14.382 M15.300 14.593 C 14.167 15.310,8.669 18.807,8.346 19.016 C 8.151 19.142,7.999 19.253,8.008 19.261 C 8.016 19.270,9.157 19.430,10.542 19.617 C 13.218 19.979,19.566 20.834,19.700 20.850 C 19.746 20.856,19.776 20.839,19.770 20.811 C 19.760 20.758,18.745 19.077,17.169 16.502 C 16.630 15.621,16.109 14.770,16.012 14.611 C 15.914 14.452,15.823 14.314,15.807 14.305 C 15.792 14.297,15.564 14.426,15.300 14.593 M4.587 19.680 C 4.195 19.698,3.866 19.721,3.856 19.731 C 3.845 19.742,3.914 19.762,4.008 19.775 C 4.511 19.848,17.243 21.010,17.268 20.986 C 17.298 20.956,16.789 20.881,13.662 20.456 C 7.590 19.632,7.913 19.668,6.520 19.658 C 5.849 19.653,4.979 19.663,4.587 19.680 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/safari.svg b/packages/icons/svg/safari.svg
index cbb205b546..2bcdba42ab 100644
--- a/packages/icons/svg/safari.svg
+++ b/packages/icons/svg/safari.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.432 3.118,9.865 3.233,9.160 3.466 C 5.847 4.561,3.468 7.496,3.059 10.992 C 2.744 13.685,3.704 16.422,5.641 18.359 C 7.803 20.522,10.920 21.441,13.908 20.797 C 14.897 20.584,16.082 20.086,16.920 19.531 C 19.182 18.034,20.627 15.691,20.941 13.008 C 21.254 10.329,20.295 7.579,18.379 5.661 C 17.000 4.281,15.242 3.391,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 M11.840 4.960 L 11.840 5.800 12.000 5.800 L 12.160 5.800 12.160 4.960 L 12.160 4.120 12.275 4.120 C 12.338 4.120,12.447 4.131,12.517 4.145 C 12.628 4.168,12.641 4.184,12.624 4.275 C 12.613 4.333,12.592 4.519,12.577 4.690 L 12.551 5.000 12.692 5.000 C 12.848 5.000,12.825 5.067,12.906 4.385 L 12.929 4.190 13.152 4.216 C 13.275 4.231,13.380 4.246,13.384 4.251 C 13.389 4.256,13.320 4.625,13.230 5.071 C 13.141 5.517,13.075 5.888,13.084 5.896 C 13.093 5.904,13.156 5.923,13.224 5.937 L 13.349 5.964 13.504 5.179 C 13.589 4.748,13.670 4.376,13.685 4.352 C 13.728 4.283,14.120 4.392,14.119 4.474 C 14.119 4.510,14.074 4.684,14.019 4.860 C 13.965 5.036,13.920 5.192,13.920 5.206 C 13.920 5.220,13.975 5.251,14.042 5.275 C 14.181 5.323,14.169 5.343,14.321 4.827 C 14.423 4.481,14.419 4.483,14.748 4.621 C 14.863 4.669,14.875 4.687,14.843 4.768 C 14.823 4.819,14.686 5.148,14.540 5.500 C 14.393 5.852,14.264 6.160,14.254 6.184 C 14.236 6.227,14.465 6.348,14.499 6.314 C 14.509 6.305,14.654 5.965,14.822 5.559 C 14.990 5.152,15.134 4.812,15.144 4.803 C 15.169 4.778,15.560 4.969,15.560 5.007 C 15.560 5.026,15.477 5.194,15.375 5.382 C 15.274 5.570,15.197 5.730,15.205 5.737 C 15.243 5.769,15.398 5.840,15.431 5.840 C 15.451 5.840,15.489 5.791,15.517 5.730 C 15.544 5.670,15.629 5.507,15.705 5.369 L 15.845 5.118 15.955 5.183 C 16.016 5.219,16.107 5.280,16.157 5.318 L 16.249 5.387 15.785 6.082 L 15.322 6.777 15.443 6.853 C 15.509 6.896,15.569 6.923,15.576 6.915 C 15.583 6.907,15.790 6.599,16.035 6.230 C 16.280 5.861,16.495 5.560,16.513 5.560 C 16.550 5.560,16.880 5.799,16.880 5.826 C 16.880 5.836,16.764 5.983,16.622 6.152 L 16.363 6.458 16.449 6.549 C 16.496 6.599,16.547 6.640,16.562 6.640 C 16.577 6.640,16.707 6.496,16.850 6.320 L 17.110 6.001 17.298 6.166 L 17.485 6.332 17.313 6.510 C 17.212 6.614,15.833 7.561,14.006 8.781 L 10.871 10.873 8.851 13.906 C 7.421 16.055,6.760 17.013,6.587 17.190 C 6.452 17.328,6.330 17.440,6.316 17.440 C 6.301 17.440,6.226 17.362,6.148 17.267 L 6.006 17.094 6.323 16.840 C 6.497 16.700,6.640 16.574,6.640 16.560 C 6.640 16.546,6.599 16.496,6.550 16.449 L 6.460 16.365 6.145 16.622 C 5.971 16.764,5.826 16.880,5.821 16.880 C 5.807 16.880,5.560 16.527,5.560 16.506 C 5.560 16.495,5.866 16.276,6.240 16.021 L 6.920 15.557 6.859 15.437 C 6.820 15.363,6.778 15.328,6.748 15.346 C 6.722 15.362,6.408 15.569,6.051 15.807 C 5.694 16.045,5.393 16.240,5.383 16.240 C 5.356 16.240,5.160 15.902,5.160 15.856 C 5.160 15.836,5.322 15.733,5.519 15.627 L 5.879 15.435 5.811 15.327 C 5.774 15.268,5.740 15.214,5.735 15.206 C 5.730 15.199,5.574 15.275,5.389 15.376 C 5.204 15.477,5.035 15.560,5.014 15.560 C 4.978 15.560,4.800 15.233,4.800 15.166 C 4.800 15.149,5.142 14.994,5.560 14.822 C 5.978 14.650,6.319 14.489,6.319 14.465 C 6.318 14.440,6.295 14.381,6.269 14.333 C 6.220 14.247,6.218 14.248,5.640 14.487 C 5.321 14.619,4.975 14.761,4.870 14.803 L 4.681 14.879 4.619 14.732 C 4.487 14.415,4.483 14.423,4.818 14.326 C 5.332 14.177,5.323 14.182,5.275 14.042 C 5.251 13.975,5.220 13.920,5.206 13.920 C 5.192 13.921,5.012 13.973,4.807 14.037 C 4.547 14.118,4.430 14.139,4.419 14.107 C 4.347 13.887,4.319 13.706,4.354 13.683 C 4.377 13.670,4.748 13.589,5.179 13.504 L 5.964 13.349 5.937 13.224 C 5.923 13.156,5.905 13.094,5.899 13.087 C 5.892 13.080,5.522 13.147,5.077 13.237 C 4.631 13.326,4.261 13.394,4.254 13.388 C 4.248 13.381,4.231 13.275,4.216 13.152 C 4.186 12.894,4.164 12.907,4.710 12.858 L 5.000 12.832 5.000 12.696 C 5.000 12.540,4.995 12.539,4.480 12.598 C 4.315 12.617,4.177 12.630,4.174 12.627 C 4.170 12.623,4.155 12.517,4.139 12.390 L 4.111 12.160 4.955 12.160 L 5.800 12.160 5.800 12.020 L 5.800 11.880 4.982 11.880 C 4.471 11.880,4.155 11.865,4.140 11.839 C 4.126 11.817,4.127 11.699,4.142 11.577 C 4.169 11.365,4.174 11.357,4.275 11.376 C 4.333 11.386,4.517 11.407,4.685 11.421 L 4.991 11.446 5.007 11.306 L 5.023 11.165 4.722 11.140 C 4.165 11.094,4.186 11.106,4.216 10.848 C 4.231 10.725,4.246 10.620,4.251 10.616 C 4.256 10.611,4.625 10.680,5.071 10.770 C 5.517 10.859,5.888 10.925,5.896 10.916 C 5.904 10.907,5.922 10.846,5.937 10.779 L 5.962 10.658 5.171 10.504 C 4.736 10.419,4.366 10.337,4.349 10.322 C 4.332 10.307,4.340 10.201,4.366 10.087 C 4.422 9.844,4.421 9.844,4.860 9.981 C 5.036 10.035,5.192 10.080,5.206 10.080 C 5.220 10.080,5.251 10.025,5.275 9.958 C 5.323 9.819,5.343 9.831,4.827 9.679 C 4.481 9.577,4.483 9.581,4.621 9.252 C 4.669 9.137,4.687 9.125,4.768 9.157 C 4.841 9.185,5.997 9.666,6.184 9.745 C 6.226 9.763,6.349 9.535,6.315 9.503 C 6.307 9.495,5.967 9.349,5.560 9.180 C 5.153 9.011,4.812 8.865,4.803 8.856 C 4.777 8.831,4.969 8.440,5.007 8.440 C 5.026 8.440,5.194 8.523,5.382 8.625 C 5.570 8.726,5.730 8.803,5.737 8.795 C 5.790 8.733,5.839 8.591,5.819 8.558 C 5.805 8.536,5.665 8.453,5.507 8.374 C 5.095 8.168,5.106 8.185,5.246 7.957 C 5.312 7.849,5.380 7.760,5.397 7.760 C 5.413 7.760,5.730 7.967,6.102 8.219 L 6.777 8.679 6.853 8.558 C 6.896 8.491,6.923 8.430,6.915 8.423 C 6.907 8.415,6.603 8.215,6.240 7.978 C 5.877 7.741,5.572 7.541,5.563 7.533 C 5.540 7.515,5.626 7.364,5.736 7.228 L 5.827 7.116 6.141 7.377 L 6.456 7.639 6.548 7.552 C 6.599 7.505,6.640 7.454,6.640 7.440 C 6.640 7.426,6.497 7.300,6.323 7.160 L 6.005 6.905 6.129 6.749 C 6.197 6.663,6.278 6.583,6.310 6.571 C 6.347 6.556,6.578 6.758,6.956 7.136 L 7.544 7.723 7.640 7.620 L 7.736 7.517 7.143 6.923 C 6.817 6.596,6.561 6.310,6.575 6.287 C 6.590 6.265,6.669 6.192,6.753 6.125 L 6.905 6.005 7.160 6.323 C 7.300 6.497,7.426 6.640,7.440 6.640 C 7.454 6.640,7.504 6.600,7.551 6.550 L 7.635 6.460 7.376 6.143 C 7.234 5.969,7.132 5.815,7.149 5.800 C 7.166 5.786,7.254 5.718,7.344 5.648 L 7.509 5.522 7.976 6.223 L 8.442 6.923 8.559 6.854 C 8.623 6.816,8.664 6.766,8.650 6.743 C 8.637 6.719,8.431 6.408,8.193 6.051 C 7.955 5.694,7.760 5.394,7.760 5.384 C 7.760 5.375,7.849 5.312,7.959 5.245 L 8.157 5.122 8.345 5.471 C 8.449 5.663,8.539 5.827,8.545 5.835 C 8.561 5.856,8.800 5.756,8.800 5.729 C 8.800 5.718,8.719 5.560,8.620 5.378 C 8.521 5.196,8.440 5.031,8.440 5.011 C 8.440 4.970,8.830 4.776,8.856 4.803 C 8.866 4.812,9.010 5.152,9.178 5.559 C 9.346 5.965,9.491 6.305,9.501 6.314 C 9.517 6.330,9.760 6.241,9.760 6.219 C 9.760 6.213,9.708 6.085,9.643 5.934 C 9.579 5.783,9.436 5.438,9.325 5.167 L 9.122 4.675 9.253 4.620 C 9.579 4.484,9.577 4.483,9.674 4.818 C 9.823 5.332,9.818 5.323,9.958 5.275 C 10.025 5.251,10.080 5.220,10.080 5.206 C 10.080 5.192,10.035 5.036,9.981 4.860 C 9.844 4.419,9.844 4.417,10.083 4.359 C 10.197 4.332,10.299 4.326,10.316 4.345 C 10.332 4.364,10.414 4.736,10.498 5.172 L 10.651 5.964 10.776 5.937 C 10.844 5.923,10.907 5.904,10.916 5.896 C 10.925 5.888,10.859 5.517,10.770 5.071 C 10.680 4.625,10.611 4.256,10.616 4.251 C 10.620 4.246,10.725 4.231,10.848 4.216 C 11.106 4.186,11.093 4.164,11.142 4.710 L 11.168 5.000 11.309 5.000 L 11.449 5.000 11.422 4.650 C 11.407 4.458,11.386 4.270,11.376 4.233 C 11.355 4.160,11.428 4.135,11.690 4.125 L 11.840 4.120 11.840 4.960 M17.852 6.733 L 17.994 6.906 17.677 7.160 C 17.503 7.300,17.360 7.426,17.360 7.440 C 17.360 7.454,17.401 7.504,17.450 7.551 L 17.540 7.635 17.857 7.376 C 18.031 7.234,18.185 7.132,18.200 7.149 C 18.214 7.166,18.282 7.254,18.352 7.344 L 18.478 7.509 17.777 7.976 L 17.077 8.442 17.146 8.559 C 17.184 8.623,17.234 8.664,17.257 8.650 C 17.281 8.637,17.592 8.431,17.949 8.193 C 18.306 7.955,18.606 7.760,18.616 7.760 C 18.625 7.760,18.688 7.849,18.754 7.957 L 18.875 8.154 18.788 8.211 C 18.739 8.243,18.589 8.325,18.453 8.394 C 18.317 8.462,18.195 8.536,18.181 8.558 C 18.161 8.591,18.210 8.733,18.263 8.795 C 18.270 8.803,18.430 8.726,18.618 8.625 C 18.806 8.523,18.974 8.440,18.993 8.440 C 19.033 8.440,19.222 8.832,19.195 8.859 C 19.184 8.869,18.844 9.015,18.438 9.183 C 18.032 9.352,17.693 9.496,17.685 9.503 C 17.669 9.517,17.760 9.760,17.781 9.760 C 17.787 9.760,17.915 9.708,18.066 9.643 C 18.217 9.579,18.562 9.436,18.833 9.325 L 19.325 9.122 19.380 9.253 C 19.517 9.581,19.519 9.577,19.173 9.679 C 18.657 9.831,18.677 9.819,18.725 9.958 C 18.749 10.025,18.780 10.080,18.794 10.080 C 18.808 10.080,18.964 10.035,19.140 9.981 C 19.584 9.843,19.585 9.843,19.638 10.087 C 19.662 10.201,19.668 10.306,19.651 10.322 C 19.634 10.337,19.264 10.419,18.829 10.504 L 18.038 10.658 18.063 10.779 C 18.078 10.846,18.095 10.907,18.103 10.915 C 18.110 10.923,18.481 10.857,18.928 10.769 C 19.375 10.681,19.745 10.613,19.752 10.619 C 19.758 10.625,19.767 10.736,19.772 10.865 L 19.780 11.100 19.390 11.135 L 19.000 11.170 19.000 11.305 C 19.000 11.435,19.006 11.440,19.150 11.438 C 19.233 11.437,19.420 11.423,19.566 11.406 L 19.833 11.377 19.859 11.588 C 19.874 11.704,19.874 11.817,19.860 11.839 C 19.845 11.865,19.529 11.880,19.018 11.880 L 18.200 11.880 18.200 12.020 L 18.200 12.160 19.040 12.160 L 19.880 12.160 19.880 12.250 C 19.879 12.300,19.868 12.409,19.854 12.493 L 19.829 12.646 19.644 12.624 C 19.543 12.612,19.357 12.590,19.230 12.576 L 19.000 12.551 19.000 12.692 C 19.000 12.830,19.004 12.833,19.190 12.855 C 19.294 12.867,19.477 12.889,19.595 12.903 L 19.810 12.929 19.784 13.152 C 19.769 13.275,19.752 13.381,19.746 13.388 C 19.739 13.394,19.369 13.326,18.923 13.237 C 18.478 13.147,18.108 13.080,18.101 13.087 C 18.095 13.094,18.077 13.156,18.063 13.224 L 18.036 13.348 18.788 13.496 C 19.773 13.691,19.688 13.657,19.656 13.833 C 19.641 13.914,19.614 14.019,19.597 14.066 L 19.565 14.152 19.194 14.036 C 18.991 13.972,18.811 13.920,18.796 13.920 C 18.780 13.920,18.749 13.975,18.725 14.042 C 18.677 14.182,18.668 14.177,19.182 14.326 C 19.517 14.423,19.516 14.420,19.379 14.748 C 19.331 14.863,19.313 14.875,19.232 14.843 C 19.159 14.815,18.003 14.334,17.816 14.255 C 17.773 14.237,17.652 14.465,17.686 14.499 C 17.695 14.509,18.035 14.654,18.441 14.822 C 18.848 14.990,19.188 15.134,19.197 15.144 C 19.225 15.171,19.029 15.560,18.987 15.560 C 18.966 15.560,18.796 15.477,18.611 15.376 C 18.426 15.275,18.270 15.199,18.265 15.206 C 18.260 15.214,18.226 15.268,18.189 15.327 L 18.122 15.434 18.500 15.638 L 18.878 15.842 18.754 16.043 C 18.679 16.166,18.609 16.237,18.577 16.225 C 18.548 16.213,18.230 16.007,17.869 15.766 L 17.213 15.327 17.143 15.446 C 17.104 15.512,17.078 15.571,17.086 15.577 C 17.094 15.584,17.402 15.790,17.770 16.035 C 18.139 16.280,18.440 16.491,18.440 16.504 C 18.440 16.517,18.383 16.606,18.314 16.702 C 18.169 16.904,18.185 16.908,17.800 16.584 L 17.540 16.365 17.450 16.449 C 17.401 16.496,17.360 16.546,17.360 16.561 C 17.360 16.576,17.503 16.703,17.678 16.843 C 18.032 17.127,18.024 17.080,17.763 17.371 L 17.663 17.482 17.060 16.880 L 16.456 16.277 16.360 16.380 L 16.264 16.483 16.857 17.077 C 17.183 17.404,17.439 17.690,17.425 17.713 C 17.410 17.735,17.331 17.808,17.247 17.875 L 17.095 17.995 16.840 17.677 C 16.700 17.503,16.574 17.360,16.560 17.360 C 16.546 17.360,16.496 17.401,16.449 17.450 L 16.365 17.540 16.622 17.855 C 16.763 18.028,16.872 18.181,16.863 18.196 C 16.854 18.210,16.767 18.279,16.669 18.349 L 16.491 18.477 16.024 17.777 L 15.558 17.077 15.441 17.146 C 15.377 17.184,15.336 17.234,15.350 17.257 C 15.363 17.281,15.570 17.593,15.809 17.951 C 16.048 18.310,16.233 18.619,16.221 18.638 C 16.209 18.658,16.119 18.719,16.020 18.774 L 15.841 18.874 15.703 18.627 C 15.628 18.491,15.544 18.331,15.517 18.270 C 15.489 18.210,15.451 18.160,15.431 18.160 C 15.398 18.160,15.243 18.231,15.205 18.263 C 15.197 18.270,15.274 18.430,15.375 18.618 C 15.477 18.806,15.560 18.974,15.560 18.993 C 15.560 19.031,15.169 19.223,15.144 19.197 C 15.135 19.188,14.990 18.848,14.823 18.443 C 14.656 18.037,14.511 17.697,14.501 17.687 C 14.466 17.652,14.236 17.772,14.254 17.816 C 14.264 17.840,14.393 18.148,14.540 18.500 C 14.686 18.852,14.822 19.180,14.842 19.230 C 14.874 19.309,14.860 19.327,14.731 19.381 C 14.415 19.513,14.423 19.517,14.326 19.182 C 14.177 18.668,14.182 18.677,14.042 18.725 C 13.975 18.749,13.920 18.780,13.920 18.796 C 13.920 18.811,13.972 18.991,14.036 19.194 L 14.152 19.565 14.060 19.600 C 14.010 19.619,13.905 19.647,13.828 19.661 C 13.660 19.693,13.691 19.773,13.497 18.792 L 13.349 18.044 13.225 18.068 C 13.156 18.081,13.094 18.096,13.087 18.102 C 13.080 18.108,13.147 18.478,13.237 18.923 C 13.326 19.369,13.395 19.739,13.388 19.745 C 13.382 19.751,13.275 19.772,13.151 19.792 L 12.925 19.827 12.904 19.684 C 12.892 19.605,12.871 19.418,12.857 19.270 L 12.831 19.000 12.695 19.000 C 12.565 19.000,12.560 19.006,12.562 19.150 C 12.563 19.233,12.578 19.421,12.594 19.569 C 12.628 19.874,12.623 19.880,12.337 19.880 L 12.160 19.880 12.160 19.040 L 12.160 18.200 12.000 18.200 L 11.840 18.200 11.840 19.040 L 11.840 19.880 11.650 19.879 C 11.370 19.878,11.363 19.868,11.402 19.500 C 11.456 18.984,11.460 19.000,11.304 19.000 C 11.153 19.000,11.169 18.953,11.097 19.603 L 11.072 19.827 10.848 19.791 C 10.724 19.772,10.620 19.753,10.616 19.748 C 10.612 19.744,10.681 19.375,10.769 18.928 C 10.857 18.481,10.923 18.110,10.915 18.103 C 10.907 18.095,10.844 18.077,10.776 18.063 L 10.651 18.036 10.496 18.821 C 10.411 19.252,10.330 19.624,10.315 19.648 C 10.272 19.717,9.880 19.608,9.881 19.526 C 9.881 19.490,9.926 19.316,9.981 19.140 C 10.035 18.964,10.080 18.808,10.080 18.794 C 10.080 18.780,10.025 18.749,9.958 18.725 C 9.818 18.677,9.823 18.668,9.674 19.182 C 9.577 19.517,9.579 19.516,9.253 19.380 L 9.122 19.325 9.325 18.833 C 9.436 18.562,9.580 18.216,9.644 18.064 C 9.709 17.912,9.757 17.784,9.751 17.779 C 9.714 17.750,9.559 17.680,9.530 17.680 C 9.511 17.680,9.353 18.022,9.180 18.440 C 9.007 18.858,8.853 19.200,8.837 19.200 C 8.770 19.200,8.440 19.032,8.440 18.998 C 8.440 18.977,8.521 18.809,8.620 18.626 C 8.719 18.443,8.800 18.284,8.800 18.272 C 8.800 18.244,8.562 18.144,8.545 18.165 C 8.539 18.173,8.457 18.324,8.364 18.500 C 8.270 18.676,8.182 18.833,8.167 18.848 C 8.125 18.892,7.750 18.642,7.773 18.585 C 7.783 18.557,7.992 18.240,8.237 17.880 L 8.681 17.225 8.559 17.147 C 8.492 17.105,8.431 17.077,8.424 17.085 C 8.417 17.093,8.206 17.408,7.955 17.784 L 7.500 18.467 7.340 18.351 C 7.252 18.287,7.166 18.221,7.149 18.204 C 7.132 18.187,7.234 18.031,7.376 17.857 L 7.635 17.540 7.551 17.450 C 7.504 17.401,7.454 17.360,7.439 17.360 C 7.424 17.360,7.298 17.503,7.158 17.677 L 6.903 17.993 6.748 17.870 C 6.663 17.803,6.583 17.722,6.571 17.691 C 6.559 17.659,6.616 17.565,6.705 17.473 C 6.790 17.384,8.270 16.370,9.994 15.219 L 13.129 13.127 15.149 10.094 C 16.579 7.945,17.240 6.987,17.413 6.810 C 17.548 6.673,17.670 6.560,17.684 6.560 C 17.699 6.560,17.774 6.638,17.852 6.733 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.160 3.046 C 8.229 3.347,5.684 4.977,4.229 7.484 C 3.376 8.954,2.949 10.650,3.013 12.320 C 3.097 14.530,3.973 16.603,5.492 18.184 C 6.543 19.278,7.708 20.031,9.067 20.495 C 11.252 21.240,13.423 21.159,15.560 20.251 C 17.572 19.397,19.283 17.721,20.183 15.723 C 21.135 13.609,21.252 11.329,20.520 9.154 C 20.067 7.811,19.437 6.773,18.463 5.768 C 17.137 4.399,15.439 3.484,13.621 3.159 C 13.264 3.095,11.803 2.987,11.560 3.006 C 11.527 3.008,11.347 3.026,11.160 3.046 M11.840 4.960 L 11.840 5.800 12.000 5.800 L 12.160 5.800 12.160 4.960 L 12.160 4.120 12.297 4.120 C 12.490 4.120,12.653 4.188,12.626 4.258 C 12.614 4.289,12.592 4.469,12.577 4.657 L 12.549 5.000 12.672 5.000 C 12.740 5.000,12.806 4.982,12.820 4.960 C 12.833 4.939,12.864 4.759,12.888 4.560 C 12.937 4.168,12.927 4.179,13.210 4.226 C 13.319 4.244,13.360 4.270,13.360 4.322 C 13.360 4.362,13.295 4.730,13.216 5.140 C 13.137 5.550,13.079 5.891,13.086 5.898 C 13.094 5.905,13.156 5.923,13.223 5.937 L 13.347 5.963 13.501 5.199 C 13.586 4.778,13.676 4.407,13.700 4.373 C 13.737 4.323,13.772 4.320,13.910 4.357 C 14.002 4.382,14.088 4.420,14.101 4.442 C 14.114 4.463,14.078 4.646,14.020 4.847 C 13.909 5.234,13.920 5.293,14.100 5.270 C 14.162 5.262,14.204 5.186,14.289 4.923 C 14.349 4.738,14.419 4.573,14.444 4.557 C 14.519 4.511,14.840 4.638,14.840 4.714 C 14.840 4.750,14.707 5.095,14.544 5.480 C 14.250 6.175,14.249 6.181,14.328 6.250 C 14.373 6.288,14.430 6.320,14.456 6.320 C 14.482 6.320,14.645 5.982,14.818 5.570 C 14.991 5.157,15.137 4.814,15.142 4.808 C 15.156 4.790,15.445 4.914,15.505 4.965 C 15.546 4.999,15.520 5.081,15.376 5.368 C 15.276 5.566,15.201 5.733,15.208 5.739 C 15.267 5.789,15.409 5.839,15.438 5.821 C 15.458 5.809,15.558 5.646,15.660 5.459 L 15.845 5.118 15.955 5.184 C 16.016 5.219,16.107 5.280,16.157 5.318 L 16.249 5.387 15.785 6.082 L 15.322 6.777 15.443 6.853 C 15.509 6.896,15.569 6.923,15.575 6.915 C 15.582 6.907,15.770 6.630,15.994 6.300 C 16.569 5.452,16.482 5.530,16.697 5.678 C 16.909 5.824,16.913 5.809,16.584 6.200 L 16.365 6.460 16.450 6.551 C 16.497 6.601,16.549 6.637,16.567 6.631 C 16.584 6.625,16.714 6.481,16.855 6.311 L 17.111 6.002 17.298 6.167 L 17.485 6.331 17.374 6.446 C 17.209 6.618,16.264 7.269,13.427 9.167 L 10.873 10.874 9.045 13.607 C 8.040 15.110,7.101 16.502,6.960 16.700 C 6.701 17.063,6.374 17.440,6.319 17.440 C 6.303 17.440,6.225 17.362,6.147 17.266 L 6.004 17.091 6.322 16.836 C 6.497 16.696,6.640 16.570,6.640 16.557 C 6.640 16.545,6.599 16.496,6.550 16.449 L 6.460 16.365 6.142 16.625 L 5.824 16.885 5.751 16.792 C 5.710 16.742,5.652 16.653,5.620 16.595 L 5.563 16.490 6.240 16.023 C 6.895 15.571,6.915 15.553,6.872 15.458 C 6.847 15.404,6.803 15.360,6.773 15.360 C 6.743 15.360,6.422 15.558,6.060 15.800 C 5.698 16.042,5.394 16.240,5.385 16.240 C 5.345 16.240,5.158 15.876,5.180 15.841 C 5.193 15.820,5.355 15.719,5.541 15.618 C 5.825 15.464,5.873 15.423,5.841 15.367 C 5.735 15.182,5.745 15.182,5.386 15.378 C 5.196 15.481,5.023 15.554,5.000 15.540 C 4.938 15.502,4.794 15.202,4.818 15.163 C 4.830 15.144,5.143 15.000,5.515 14.842 C 6.322 14.500,6.347 14.485,6.284 14.367 C 6.258 14.319,6.219 14.280,6.196 14.280 C 6.173 14.280,5.863 14.399,5.507 14.544 C 5.151 14.690,4.820 14.824,4.770 14.843 C 4.692 14.874,4.673 14.860,4.620 14.734 C 4.501 14.450,4.521 14.420,4.910 14.294 C 5.184 14.205,5.262 14.163,5.270 14.100 C 5.293 13.919,5.234 13.909,4.845 14.025 C 4.427 14.150,4.402 14.142,4.371 13.869 C 4.357 13.742,4.366 13.686,4.405 13.672 C 4.435 13.660,4.798 13.582,5.212 13.499 L 5.963 13.346 5.937 13.223 C 5.923 13.155,5.907 13.096,5.902 13.090 C 5.898 13.085,5.526 13.151,5.078 13.238 C 4.629 13.324,4.259 13.391,4.255 13.387 C 4.252 13.383,4.236 13.286,4.221 13.171 C 4.195 12.976,4.199 12.959,4.286 12.923 C 4.338 12.902,4.519 12.873,4.690 12.859 L 5.000 12.833 5.000 12.715 C 5.000 12.650,4.974 12.588,4.942 12.575 C 4.911 12.563,4.728 12.573,4.535 12.596 C 4.343 12.620,4.182 12.635,4.178 12.629 C 4.174 12.624,4.157 12.517,4.142 12.390 L 4.114 12.160 4.957 12.160 L 5.800 12.160 5.800 12.020 L 5.800 11.880 5.010 11.879 C 4.575 11.879,4.196 11.863,4.166 11.845 C 4.124 11.818,4.120 11.762,4.147 11.595 C 4.177 11.416,4.196 11.381,4.261 11.387 C 4.305 11.391,4.486 11.407,4.665 11.422 L 4.990 11.449 5.007 11.308 L 5.023 11.167 4.674 11.139 C 4.228 11.104,4.184 11.074,4.221 10.828 C 4.243 10.683,4.266 10.640,4.322 10.640 C 4.362 10.640,4.730 10.705,5.140 10.784 C 5.550 10.863,5.891 10.921,5.898 10.914 C 5.905 10.906,5.922 10.846,5.936 10.779 L 5.962 10.659 5.171 10.499 L 4.380 10.340 4.383 10.149 C 4.386 9.866,4.415 9.856,4.842 9.978 C 5.234 10.091,5.293 10.081,5.270 9.900 C 5.262 9.838,5.186 9.796,4.923 9.711 C 4.738 9.651,4.573 9.581,4.557 9.556 C 4.511 9.481,4.638 9.160,4.714 9.160 C 4.750 9.160,5.095 9.293,5.480 9.456 C 6.175 9.750,6.181 9.751,6.250 9.672 C 6.289 9.627,6.320 9.571,6.320 9.546 C 6.320 9.521,5.978 9.357,5.560 9.181 C 5.142 9.006,4.800 8.848,4.800 8.829 C 4.800 8.789,4.915 8.559,4.969 8.491 C 4.998 8.455,5.095 8.487,5.363 8.621 C 5.558 8.720,5.726 8.800,5.735 8.800 C 5.745 8.800,5.771 8.747,5.793 8.683 C 5.840 8.548,5.828 8.536,5.410 8.325 C 5.272 8.256,5.160 8.178,5.160 8.153 C 5.160 8.092,5.356 7.760,5.392 7.760 C 5.407 7.760,5.725 7.967,6.098 8.219 L 6.777 8.678 6.853 8.558 C 6.896 8.491,6.923 8.430,6.915 8.423 C 6.907 8.415,6.603 8.216,6.240 7.980 C 5.877 7.744,5.574 7.546,5.567 7.539 C 5.549 7.523,5.662 7.320,5.751 7.207 L 5.825 7.114 6.140 7.377 L 6.456 7.639 6.548 7.552 C 6.599 7.505,6.640 7.455,6.640 7.443 C 6.640 7.430,6.496 7.304,6.320 7.163 C 5.965 6.878,5.975 6.928,6.214 6.652 C 6.321 6.528,6.362 6.556,7.003 7.186 L 7.546 7.720 7.639 7.621 L 7.732 7.522 7.166 6.941 C 6.855 6.621,6.600 6.334,6.600 6.303 C 6.600 6.272,6.670 6.192,6.755 6.124 L 6.909 6.002 7.105 6.246 C 7.212 6.380,7.330 6.528,7.367 6.574 L 7.435 6.659 7.535 6.565 L 7.636 6.470 7.398 6.163 C 7.267 5.995,7.161 5.839,7.162 5.818 C 7.162 5.797,7.241 5.723,7.337 5.652 L 7.510 5.525 7.976 6.223 C 8.403 6.865,8.448 6.918,8.523 6.878 C 8.568 6.854,8.614 6.811,8.625 6.781 C 8.637 6.751,8.467 6.460,8.249 6.133 C 7.696 5.305,7.723 5.389,7.958 5.245 L 8.155 5.124 8.344 5.472 C 8.447 5.663,8.538 5.827,8.545 5.835 C 8.562 5.856,8.800 5.756,8.800 5.728 C 8.800 5.716,8.718 5.555,8.618 5.370 C 8.485 5.124,8.447 5.019,8.478 4.983 C 8.525 4.926,8.834 4.779,8.854 4.804 C 8.861 4.813,9.007 5.153,9.178 5.560 C 9.349 5.967,9.493 6.305,9.498 6.310 C 9.509 6.322,9.760 6.237,9.760 6.221 C 9.760 6.215,9.731 6.140,9.695 6.055 C 9.659 5.970,9.515 5.624,9.376 5.287 L 9.123 4.675 9.260 4.617 C 9.545 4.498,9.580 4.522,9.706 4.910 C 9.795 5.184,9.837 5.262,9.900 5.270 C 10.081 5.293,10.091 5.234,9.978 4.842 C 9.859 4.428,9.865 4.407,10.118 4.360 C 10.250 4.336,10.290 4.343,10.317 4.395 C 10.336 4.431,10.420 4.798,10.502 5.212 L 10.652 5.964 10.776 5.937 C 10.844 5.923,10.906 5.905,10.914 5.898 C 10.921 5.891,10.863 5.550,10.784 5.140 C 10.705 4.730,10.640 4.362,10.640 4.322 C 10.640 4.266,10.683 4.243,10.825 4.221 C 10.934 4.205,11.026 4.210,11.050 4.234 C 11.072 4.256,11.108 4.437,11.130 4.637 L 11.171 5.000 11.305 5.000 C 11.438 5.000,11.440 4.997,11.437 4.830 C 11.435 4.736,11.420 4.555,11.404 4.426 C 11.377 4.213,11.382 4.189,11.457 4.158 C 11.503 4.140,11.607 4.124,11.690 4.123 L 11.840 4.120 11.840 4.960 M17.854 6.735 L 17.997 6.910 17.754 7.105 C 17.620 7.212,17.472 7.330,17.426 7.367 L 17.341 7.435 17.435 7.535 L 17.530 7.636 17.837 7.398 C 18.005 7.267,18.161 7.161,18.182 7.162 C 18.203 7.162,18.277 7.241,18.348 7.337 L 18.475 7.510 17.777 7.976 C 17.135 8.403,17.082 8.448,17.122 8.523 C 17.146 8.568,17.189 8.614,17.219 8.625 C 17.249 8.637,17.540 8.467,17.867 8.249 C 18.695 7.696,18.611 7.723,18.756 7.959 L 18.878 8.158 18.689 8.265 C 18.585 8.324,18.424 8.414,18.332 8.466 C 18.172 8.557,18.166 8.566,18.206 8.680 C 18.229 8.746,18.255 8.800,18.265 8.800 C 18.274 8.800,18.442 8.720,18.637 8.621 C 18.920 8.480,19.001 8.454,19.035 8.495 C 19.086 8.556,19.210 8.844,19.192 8.860 C 19.186 8.866,18.847 9.011,18.440 9.182 C 18.033 9.353,17.693 9.498,17.685 9.505 C 17.650 9.533,17.775 9.763,17.816 9.747 C 17.840 9.737,18.166 9.602,18.540 9.448 C 18.914 9.293,19.246 9.161,19.277 9.153 C 19.345 9.137,19.488 9.482,19.444 9.554 C 19.427 9.581,19.262 9.651,19.077 9.711 C 18.814 9.796,18.738 9.838,18.730 9.900 C 18.707 10.081,18.765 10.091,19.161 9.978 C 19.523 9.873,19.536 9.872,19.589 9.945 C 19.620 9.987,19.638 10.090,19.632 10.180 L 19.620 10.340 18.829 10.499 L 18.038 10.659 18.064 10.779 C 18.078 10.846,18.095 10.906,18.102 10.914 C 18.109 10.921,18.450 10.863,18.860 10.784 C 19.270 10.705,19.640 10.640,19.683 10.640 C 19.750 10.640,19.760 10.669,19.760 10.875 L 19.760 11.110 19.378 11.139 L 18.996 11.168 19.008 11.294 L 19.020 11.420 19.425 11.409 L 19.829 11.398 19.857 11.605 C 19.877 11.757,19.870 11.821,19.832 11.846 C 19.803 11.864,19.425 11.879,18.990 11.879 L 18.200 11.880 18.200 12.020 L 18.200 12.160 19.040 12.160 L 19.880 12.160 19.880 12.250 C 19.879 12.300,19.868 12.409,19.854 12.494 L 19.828 12.649 19.644 12.626 C 19.543 12.614,19.355 12.592,19.227 12.577 L 18.994 12.550 19.007 12.683 C 19.022 12.834,19.069 12.854,19.534 12.900 L 19.808 12.927 19.780 13.154 C 19.765 13.278,19.749 13.383,19.745 13.387 C 19.742 13.391,19.371 13.324,18.922 13.238 C 18.474 13.151,18.102 13.085,18.098 13.090 C 18.093 13.096,18.077 13.156,18.063 13.224 L 18.036 13.348 18.788 13.498 C 19.202 13.580,19.571 13.665,19.609 13.685 C 19.679 13.722,19.675 13.853,19.597 14.066 L 19.565 14.152 19.178 14.031 C 18.767 13.903,18.706 13.913,18.730 14.100 C 18.738 14.163,18.816 14.205,19.090 14.294 C 19.393 14.392,19.440 14.420,19.440 14.498 C 19.440 14.659,19.356 14.840,19.282 14.840 C 19.243 14.840,18.894 14.707,18.505 14.544 C 17.801 14.248,17.799 14.248,17.740 14.333 C 17.707 14.380,17.680 14.437,17.680 14.460 C 17.680 14.484,18.018 14.645,18.430 14.818 C 18.843 14.991,19.187 15.138,19.196 15.146 C 19.222 15.167,19.074 15.475,19.015 15.524 C 18.975 15.558,18.878 15.523,18.615 15.381 C 18.255 15.186,18.263 15.186,18.159 15.367 C 18.126 15.424,18.179 15.466,18.498 15.639 L 18.876 15.843 18.797 15.976 C 18.617 16.281,18.651 16.288,17.889 15.779 L 17.202 15.321 17.138 15.444 C 17.103 15.512,17.080 15.572,17.087 15.577 C 17.094 15.583,17.401 15.790,17.769 16.037 C 18.394 16.458,18.436 16.494,18.394 16.574 C 18.334 16.690,18.195 16.840,18.147 16.840 C 18.125 16.840,17.977 16.733,17.819 16.602 L 17.531 16.363 17.438 16.463 C 17.332 16.575,17.305 16.535,17.710 16.877 C 17.848 16.993,17.960 17.101,17.960 17.117 C 17.960 17.133,17.894 17.222,17.814 17.316 L 17.668 17.487 17.062 16.882 L 16.456 16.277 16.362 16.378 L 16.268 16.478 16.834 17.059 C 17.145 17.379,17.400 17.666,17.400 17.697 C 17.400 17.728,17.330 17.808,17.245 17.876 L 17.091 17.998 16.895 17.754 C 16.788 17.620,16.670 17.472,16.633 17.426 L 16.565 17.341 16.465 17.435 L 16.364 17.530 16.602 17.837 C 16.733 18.005,16.840 18.162,16.840 18.185 C 16.840 18.208,16.761 18.283,16.665 18.352 L 16.491 18.477 16.025 17.778 C 15.597 17.135,15.552 17.082,15.477 17.122 C 15.432 17.146,15.386 17.189,15.376 17.217 C 15.365 17.246,15.536 17.543,15.756 17.878 C 15.977 18.213,16.168 18.523,16.182 18.568 C 16.211 18.658,16.200 18.672,15.993 18.795 L 15.846 18.883 15.660 18.542 C 15.558 18.355,15.458 18.191,15.438 18.179 C 15.409 18.161,15.267 18.211,15.208 18.261 C 15.201 18.267,15.277 18.435,15.377 18.635 L 15.560 18.998 15.470 19.056 C 15.343 19.138,15.162 19.216,15.146 19.196 C 15.138 19.187,14.991 18.843,14.819 18.430 C 14.647 18.018,14.485 17.680,14.458 17.680 C 14.431 17.680,14.373 17.711,14.328 17.750 C 14.249 17.819,14.250 17.825,14.544 18.520 C 14.707 18.905,14.840 19.243,14.840 19.272 C 14.840 19.334,14.529 19.481,14.457 19.453 C 14.428 19.442,14.355 19.277,14.293 19.087 C 14.205 18.816,14.163 18.738,14.100 18.730 C 13.913 18.706,13.903 18.767,14.031 19.178 L 14.152 19.565 14.066 19.597 C 13.842 19.682,13.726 19.686,13.687 19.613 C 13.665 19.573,13.581 19.203,13.499 18.792 L 13.349 18.044 13.225 18.068 C 13.156 18.081,13.095 18.095,13.089 18.100 C 13.080 18.107,13.326 19.432,13.380 19.666 C 13.398 19.743,13.376 19.756,13.170 19.792 C 13.043 19.814,12.936 19.828,12.931 19.823 C 12.926 19.819,12.900 19.630,12.875 19.405 L 12.828 18.996 12.704 19.008 L 12.580 19.020 12.580 19.440 L 12.580 19.860 12.370 19.872 L 12.160 19.884 12.160 19.042 L 12.160 18.200 12.000 18.200 L 11.840 18.200 11.840 19.042 L 11.840 19.884 11.630 19.872 L 11.420 19.860 11.420 19.440 L 11.420 19.020 11.300 19.020 C 11.169 19.020,11.163 19.035,11.091 19.580 C 11.067 19.756,11.043 19.818,10.999 19.813 C 10.724 19.783,10.640 19.752,10.640 19.681 C 10.640 19.639,10.705 19.270,10.784 18.860 C 10.863 18.450,10.921 18.109,10.914 18.102 C 10.906 18.095,10.844 18.077,10.777 18.063 L 10.653 18.037 10.499 18.801 C 10.414 19.222,10.324 19.593,10.300 19.627 C 10.263 19.677,10.228 19.680,10.090 19.643 C 9.998 19.618,9.912 19.580,9.899 19.558 C 9.886 19.537,9.922 19.354,9.980 19.153 C 10.091 18.766,10.080 18.707,9.900 18.730 C 9.838 18.738,9.796 18.815,9.709 19.078 C 9.649 19.264,9.578 19.429,9.552 19.445 C 9.481 19.489,9.138 19.344,9.153 19.277 C 9.161 19.246,9.293 18.914,9.448 18.540 C 9.602 18.166,9.737 17.841,9.746 17.817 C 9.765 17.770,9.572 17.668,9.522 17.699 C 9.505 17.709,9.351 18.043,9.180 18.440 C 9.009 18.837,8.855 19.171,8.836 19.182 C 8.803 19.203,8.588 19.109,8.491 19.031 C 8.455 19.002,8.487 18.904,8.624 18.632 C 8.724 18.434,8.799 18.267,8.792 18.261 C 8.757 18.232,8.601 18.160,8.573 18.160 C 8.555 18.160,8.459 18.313,8.360 18.500 C 8.255 18.698,8.155 18.840,8.119 18.840 C 8.086 18.840,7.992 18.785,7.910 18.718 L 7.762 18.596 8.220 17.909 L 8.678 17.223 8.557 17.147 C 8.491 17.104,8.431 17.077,8.424 17.085 C 8.417 17.093,8.210 17.402,7.965 17.770 C 7.720 18.139,7.507 18.440,7.492 18.440 C 7.437 18.440,7.160 18.228,7.160 18.186 C 7.160 18.163,7.267 18.005,7.398 17.837 L 7.636 17.530 7.545 17.445 C 7.496 17.398,7.445 17.360,7.434 17.360 C 7.422 17.360,7.297 17.503,7.157 17.678 L 6.902 17.995 6.743 17.864 C 6.656 17.792,6.578 17.715,6.571 17.693 C 6.527 17.560,6.970 17.244,10.678 14.763 L 13.128 13.125 14.955 10.392 C 15.960 8.890,16.898 7.498,17.040 7.300 C 17.299 6.937,17.626 6.560,17.681 6.560 C 17.697 6.560,17.775 6.639,17.854 6.735 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/salesforce.svg b/packages/icons/svg/salesforce.svg
index 71cfee7dae..a46ca5ec4d 100644
--- a/packages/icons/svg/salesforce.svg
+++ b/packages/icons/svg/salesforce.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.180 6.045 C 6.865 6.090,6.492 6.213,6.164 6.378 C 4.636 7.147,3.855 9.026,4.380 10.669 C 4.434 10.840,4.479 10.998,4.479 11.020 C 4.480 11.042,4.400 11.110,4.303 11.172 C 4.064 11.322,3.638 11.781,3.470 12.069 C 2.985 12.896,2.873 13.841,3.156 14.720 C 3.472 15.703,4.163 16.408,5.140 16.745 C 5.432 16.846,5.512 16.856,6.049 16.857 L 6.637 16.859 6.715 17.045 C 7.072 17.904,7.940 18.650,8.880 18.905 C 9.240 19.003,10.080 19.003,10.440 18.905 C 11.313 18.668,12.113 18.016,12.519 17.210 L 12.645 16.960 12.759 17.019 C 12.821 17.052,13.014 17.117,13.186 17.165 C 14.227 17.451,15.438 17.028,16.090 16.151 C 16.184 16.026,16.287 15.887,16.320 15.844 C 16.375 15.772,16.401 15.768,16.620 15.806 C 16.924 15.859,17.667 15.822,17.980 15.739 C 18.691 15.551,19.222 15.256,19.730 14.766 C 20.314 14.203,20.673 13.584,20.885 12.777 C 21.020 12.261,21.020 11.339,20.885 10.823 C 20.674 10.017,20.314 9.397,19.732 8.836 C 18.986 8.116,18.154 7.781,17.120 7.783 C 16.588 7.783,16.318 7.827,15.847 7.987 C 15.686 8.042,15.549 8.081,15.543 8.074 C 15.538 8.066,15.473 7.970,15.399 7.860 C 15.206 7.573,14.778 7.137,14.505 6.951 C 13.961 6.579,13.453 6.427,12.760 6.427 C 12.004 6.427,11.357 6.664,10.770 7.157 L 10.496 7.387 10.196 7.081 C 9.380 6.250,8.307 5.881,7.180 6.045 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.240 6.041 C 6.423 6.151,5.565 6.640,5.048 7.290 C 4.305 8.225,4.052 9.367,4.337 10.496 C 4.398 10.737,4.456 10.955,4.466 10.981 C 4.476 11.008,4.367 11.122,4.223 11.235 C 3.694 11.651,3.272 12.302,3.095 12.980 C 2.996 13.360,2.996 14.155,3.096 14.520 C 3.380 15.556,4.043 16.308,5.016 16.697 C 5.310 16.814,5.762 16.878,6.311 16.879 L 6.641 16.880 6.740 17.105 C 7.026 17.750,7.728 18.432,8.422 18.739 C 8.831 18.920,9.101 18.970,9.660 18.970 C 10.268 18.970,10.546 18.910,11.010 18.679 C 11.666 18.352,12.210 17.814,12.534 17.172 L 12.639 16.964 12.813 17.041 C 13.353 17.280,14.148 17.303,14.756 17.099 C 15.308 16.913,15.753 16.575,16.217 15.988 L 16.368 15.796 16.794 15.821 C 17.617 15.870,18.387 15.690,19.047 15.295 C 19.424 15.069,20.024 14.501,20.268 14.140 C 21.111 12.888,21.227 11.289,20.570 9.980 C 20.063 8.970,19.164 8.205,18.140 7.912 C 17.857 7.831,17.734 7.821,17.080 7.822 C 16.358 7.824,16.330 7.827,15.944 7.952 C 15.726 8.023,15.544 8.076,15.540 8.070 C 15.536 8.065,15.472 7.970,15.398 7.860 C 15.187 7.547,14.648 7.031,14.340 6.850 C 14.186 6.759,13.916 6.634,13.740 6.573 C 13.441 6.469,13.378 6.462,12.780 6.463 C 12.194 6.464,12.113 6.473,11.820 6.571 C 11.444 6.697,11.090 6.899,10.741 7.186 L 10.491 7.393 10.235 7.134 C 9.542 6.429,8.795 6.079,7.880 6.027 C 7.671 6.016,7.383 6.022,7.240 6.041 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/save-as.svg b/packages/icons/svg/save-as.svg
index da155789ea..3b290aa52c 100644
--- a/packages/icons/svg/save-as.svg
+++ b/packages/icons/svg/save-as.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.838 2.631 C 13.603 2.782,13.369 3.057,13.320 3.241 C 13.242 3.528,13.201 4.157,13.201 5.064 L 13.200 5.989 12.050 6.016 C 10.651 6.049,9.382 6.110,9.065 6.160 C 8.771 6.206,8.398 6.380,8.151 6.585 C 7.889 6.804,7.548 7.242,7.359 7.606 L 7.200 7.912 7.200 11.397 L 7.200 14.882 7.325 15.131 C 7.664 15.808,8.188 16.332,8.869 16.675 L 9.118 16.800 14.400 16.800 L 19.683 16.800 19.891 16.694 C 20.596 16.338,21.141 15.793,21.495 15.091 L 21.600 14.883 21.600 11.400 L 21.600 7.917 21.495 7.709 C 21.213 7.151,20.844 6.715,20.426 6.445 C 19.961 6.145,19.654 6.105,17.280 6.039 C 16.411 6.015,15.680 5.989,15.657 5.981 C 15.627 5.972,15.604 5.539,15.586 4.641 C 15.556 3.156,15.567 3.216,15.248 2.888 C 14.965 2.598,14.846 2.547,14.400 2.529 C 14.036 2.515,14.012 2.519,13.838 2.631 M15.600 8.144 L 15.600 10.287 16.190 9.718 C 16.837 9.094,17.280 8.722,17.533 8.594 C 17.868 8.422,18.502 8.518,18.773 8.781 C 18.970 8.972,19.032 9.104,19.079 9.428 C 19.167 10.033,19.223 9.926,18.306 10.887 C 17.115 12.134,15.216 13.995,14.946 14.179 C 14.742 14.318,14.681 14.339,14.447 14.351 C 14.211 14.362,14.157 14.350,13.980 14.246 C 13.678 14.069,13.003 13.441,11.578 12.014 C 10.236 10.670,9.842 10.228,9.758 9.975 C 9.678 9.732,9.733 9.184,9.857 8.997 C 10.090 8.645,10.345 8.520,10.829 8.520 C 11.290 8.520,11.435 8.617,12.528 9.650 L 13.200 10.285 13.200 8.143 L 13.200 6.000 14.400 6.000 L 15.600 6.000 15.600 8.144 M4.420 10.862 C 4.146 10.937,3.613 11.206,3.354 11.400 C 3.092 11.597,2.730 12.044,2.541 12.404 L 2.400 12.672 2.400 16.177 L 2.400 19.683 2.505 19.891 C 2.868 20.615,3.379 21.126,4.109 21.495 L 4.317 21.600 9.620 21.600 L 14.923 21.600 15.131 21.495 C 15.644 21.238,16.261 20.674,16.460 20.279 C 16.583 20.038,16.800 19.401,16.800 19.284 L 16.800 19.200 10.800 19.200 L 4.800 19.200 4.800 15.000 L 4.800 10.800 4.710 10.804 C 4.660 10.806,4.530 10.832,4.420 10.862 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.940 2.574 C 13.730 2.673,13.488 2.915,13.383 3.131 C 13.250 3.406,13.200 3.944,13.200 5.104 L 13.200 5.989 12.190 6.015 C 10.836 6.051,9.438 6.117,9.126 6.160 C 8.447 6.254,7.817 6.770,7.362 7.606 L 7.201 7.900 7.201 11.400 L 7.201 14.900 7.362 15.194 C 7.730 15.871,8.221 16.347,8.909 16.694 L 9.117 16.800 14.403 16.800 L 19.688 16.800 19.958 16.658 C 20.549 16.348,21.148 15.748,21.459 15.156 L 21.600 14.888 21.600 11.400 L 21.600 7.912 21.459 7.646 C 21.161 7.082,20.691 6.570,20.278 6.359 C 19.883 6.158,19.363 6.104,17.160 6.038 C 16.357 6.014,15.685 5.979,15.666 5.961 C 15.647 5.943,15.616 5.382,15.596 4.714 C 15.577 4.046,15.541 3.417,15.518 3.316 C 15.484 3.172,15.422 3.081,15.228 2.889 C 15.091 2.754,14.928 2.625,14.865 2.601 C 14.668 2.527,14.076 2.510,13.940 2.574 M15.600 8.143 L 15.600 10.286 16.210 9.704 C 16.886 9.059,17.297 8.718,17.543 8.599 C 17.744 8.501,18.100 8.495,18.403 8.584 C 18.684 8.667,18.967 8.945,19.031 9.203 C 19.120 9.557,19.134 9.896,19.066 10.029 C 18.930 10.292,15.913 13.351,15.124 14.026 C 14.823 14.284,14.657 14.359,14.389 14.360 C 14.007 14.360,13.754 14.154,12.005 12.422 C 10.629 11.059,10.040 10.438,9.844 10.143 C 9.752 10.004,9.740 9.946,9.740 9.643 C 9.741 9.248,9.799 9.050,9.970 8.854 C 10.147 8.653,10.365 8.557,10.699 8.531 C 11.221 8.492,11.416 8.610,12.490 9.617 L 13.200 10.283 13.200 8.141 L 13.200 6.000 14.400 6.000 L 15.600 6.000 15.600 8.143 M4.400 10.877 C 3.531 11.166,2.972 11.625,2.543 12.406 L 2.400 12.667 2.400 16.175 L 2.400 19.683 2.505 19.891 C 2.856 20.588,3.409 21.141,4.109 21.494 L 4.317 21.600 9.620 21.600 L 14.923 21.600 15.092 21.514 C 15.581 21.265,16.202 20.720,16.418 20.349 C 16.538 20.143,16.800 19.409,16.800 19.279 C 16.800 19.201,16.759 19.200,10.800 19.200 L 4.800 19.200 4.800 15.000 L 4.800 10.800 4.710 10.802 C 4.660 10.803,4.521 10.837,4.400 10.877 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/save.svg b/packages/icons/svg/save.svg
index 82fe7ebaa3..5657437d39 100644
--- a/packages/icons/svg/save.svg
+++ b/packages/icons/svg/save.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.438 3.831 C 11.203 3.982,10.969 4.257,10.920 4.441 C 10.843 4.728,10.801 5.357,10.801 6.264 L 10.800 7.188 9.030 7.215 C 6.747 7.250,4.609 7.315,4.283 7.360 C 3.623 7.452,2.928 8.065,2.485 8.948 L 2.400 9.117 2.400 13.800 L 2.400 18.483 2.505 18.691 C 2.890 19.454,3.348 19.911,4.117 20.299 L 4.335 20.409 11.937 20.390 C 20.368 20.368,19.767 20.389,20.233 20.108 C 20.350 20.038,20.630 19.791,20.855 19.560 C 21.168 19.238,21.302 19.064,21.431 18.814 L 21.600 18.488 21.600 13.803 L 21.600 9.117 21.495 8.909 C 21.211 8.343,20.751 7.816,20.341 7.587 C 20.016 7.405,19.785 7.361,18.960 7.320 C 18.159 7.280,14.672 7.200,13.736 7.200 L 13.213 7.200 13.186 5.857 C 13.156 4.355,13.168 4.417,12.848 4.088 C 12.565 3.798,12.446 3.747,12.000 3.729 C 11.636 3.715,11.612 3.719,11.438 3.831 M13.200 10.544 L 13.200 13.887 13.790 13.318 C 14.437 12.694,14.880 12.322,15.133 12.194 C 15.468 12.022,16.102 12.118,16.373 12.381 C 16.570 12.572,16.632 12.704,16.679 13.028 C 16.766 13.631,16.825 13.521,15.885 14.506 C 14.953 15.482,13.100 17.321,12.757 17.610 C 12.171 18.104,11.781 18.077,11.100 17.498 C 10.685 17.145,8.554 15.011,7.948 14.342 C 7.690 14.057,7.443 13.748,7.398 13.656 C 7.134 13.110,7.378 12.437,7.924 12.202 C 8.100 12.126,8.188 12.115,8.499 12.126 C 8.863 12.140,8.869 12.142,9.090 12.312 C 9.213 12.407,9.648 12.799,10.057 13.184 L 10.800 13.883 10.800 10.542 L 10.800 7.200 12.000 7.200 L 13.200 7.200 13.200 10.544 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.540 3.774 C 11.330 3.873,11.088 4.115,10.983 4.331 C 10.850 4.606,10.800 5.144,10.800 6.310 L 10.800 7.200 10.270 7.200 C 9.390 7.200,6.038 7.278,5.119 7.320 C 4.581 7.344,4.182 7.382,4.056 7.419 C 3.502 7.584,2.868 8.193,2.506 8.909 L 2.400 9.117 2.400 13.800 L 2.400 18.483 2.505 18.691 C 2.867 19.413,3.383 19.928,4.118 20.299 L 4.336 20.410 11.778 20.387 C 16.633 20.373,19.343 20.350,19.574 20.323 C 20.020 20.269,20.201 20.174,20.652 19.756 C 21.034 19.402,21.312 19.053,21.484 18.711 L 21.600 18.482 21.600 13.800 L 21.600 9.117 21.494 8.909 C 21.087 8.103,20.434 7.515,19.821 7.403 C 19.689 7.379,19.194 7.342,18.721 7.320 C 17.788 7.278,14.558 7.200,13.726 7.200 L 13.213 7.200 13.187 5.930 C 13.173 5.205,13.143 4.591,13.118 4.500 C 13.065 4.312,12.689 3.901,12.490 3.815 C 12.294 3.731,11.688 3.704,11.540 3.774 M13.200 10.543 L 13.200 13.886 13.810 13.304 C 14.846 12.316,15.133 12.120,15.545 12.120 C 15.928 12.120,16.190 12.217,16.404 12.437 C 16.605 12.645,16.661 12.799,16.704 13.265 L 16.729 13.540 16.565 13.760 C 16.354 14.041,14.058 16.387,13.257 17.140 C 12.581 17.775,12.383 17.912,12.089 17.946 C 11.925 17.966,11.847 17.951,11.657 17.864 C 11.530 17.806,11.343 17.691,11.243 17.610 C 10.681 17.156,8.132 14.590,7.668 14.011 C 7.363 13.632,7.309 13.509,7.306 13.198 C 7.300 12.569,7.757 12.118,8.397 12.121 C 8.899 12.123,8.970 12.168,10.070 13.200 L 10.800 13.884 10.800 10.542 L 10.800 7.200 12.000 7.200 L 13.200 7.200 13.200 10.543 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/scale.svg b/packages/icons/svg/scale.svg
index d4e7542826..91aa7bab7c 100644
--- a/packages/icons/svg/scale.svg
+++ b/packages/icons/svg/scale.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.618 2.507 C 11.491 2.532,11.155 2.804,11.029 2.983 C 10.864 3.218,10.841 3.363,10.813 4.328 L 10.788 5.197 8.428 6.141 L 6.068 7.085 5.212 6.680 C 3.998 6.105,3.884 6.066,3.540 6.097 C 2.989 6.146,2.642 6.425,2.499 6.936 C 2.339 7.503,2.580 7.912,3.354 8.387 C 4.289 8.961,4.400 9.043,4.400 9.161 C 4.400 9.314,4.231 9.892,3.439 12.442 C 2.588 15.185,2.480 15.578,2.481 15.917 C 2.482 16.282,2.568 16.445,2.948 16.800 C 3.461 17.281,4.181 17.659,4.932 17.842 C 5.365 17.947,6.200 17.987,6.638 17.923 C 7.350 17.819,8.058 17.546,8.614 17.162 C 9.013 16.886,9.408 16.470,9.499 16.229 C 9.624 15.901,9.584 15.744,8.561 12.460 C 7.811 10.057,7.600 9.343,7.600 9.212 C 7.600 9.131,7.649 9.093,7.910 8.974 C 8.652 8.634,10.620 7.887,10.662 7.929 C 10.693 7.960,10.752 11.751,10.782 15.710 L 10.810 19.200 10.555 19.200 C 10.065 19.201,8.537 19.281,8.242 19.321 C 7.564 19.413,7.243 19.824,7.289 20.542 C 7.307 20.822,7.319 20.856,7.486 21.071 C 7.584 21.197,7.753 21.367,7.862 21.450 L 8.060 21.600 12.009 21.600 L 15.959 21.600 16.238 21.336 C 16.601 20.994,16.727 20.746,16.729 20.370 C 16.731 20.069,16.677 19.928,16.455 19.654 C 16.187 19.323,15.968 19.283,14.004 19.216 L 13.188 19.188 13.217 15.644 C 13.253 11.251,13.303 7.964,13.334 7.932 C 13.363 7.904,14.409 8.280,15.606 8.750 L 16.473 9.089 16.413 9.295 C 16.380 9.408,16.032 10.535,15.639 11.800 C 14.783 14.553,14.543 15.372,14.478 15.764 C 14.431 16.042,14.434 16.072,14.519 16.269 C 14.744 16.790,15.761 17.508,16.668 17.788 C 17.008 17.892,17.053 17.896,17.980 17.898 C 18.858 17.900,18.966 17.892,19.248 17.811 C 19.957 17.605,20.713 17.166,21.151 16.704 C 21.469 16.369,21.586 16.110,21.547 15.824 C 21.515 15.596,21.276 14.777,20.525 12.336 C 19.531 9.106,19.546 9.163,19.677 9.023 C 19.725 8.972,20.007 8.780,20.304 8.596 C 21.252 8.009,21.502 7.750,21.548 7.307 C 21.575 7.046,21.492 6.766,21.316 6.528 C 21.152 6.305,20.798 6.134,20.379 6.075 L 20.059 6.030 19.001 6.560 L 17.943 7.089 15.578 6.143 L 13.212 5.197 13.187 4.289 C 13.173 3.789,13.144 3.316,13.121 3.237 C 13.064 3.039,12.827 2.775,12.603 2.662 C 12.500 2.609,12.276 2.547,12.105 2.523 C 11.789 2.479,11.763 2.478,11.618 2.507 M6.074 12.750 C 6.243 13.085,6.795 14.892,6.829 15.225 L 6.850 15.432 6.635 15.480 C 6.503 15.510,6.207 15.523,5.874 15.514 C 5.090 15.494,5.090 15.493,5.286 14.700 C 5.471 13.953,5.920 12.600,5.983 12.600 C 5.991 12.600,6.033 12.668,6.074 12.750 M18.232 13.220 C 18.703 14.538,18.900 15.298,18.807 15.434 C 18.711 15.575,17.430 15.581,17.261 15.441 C 17.136 15.337,17.194 14.978,17.505 13.928 C 17.672 13.366,17.893 12.716,17.947 12.629 C 17.987 12.564,18.030 12.654,18.232 13.220 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.540 2.553 C 11.332 2.650,11.011 2.963,10.936 3.144 C 10.859 3.328,10.803 3.953,10.801 4.646 L 10.800 5.192 8.433 6.139 L 6.065 7.086 5.294 6.721 C 4.041 6.129,3.984 6.108,3.639 6.109 C 3.420 6.110,3.283 6.134,3.135 6.197 C 2.634 6.413,2.351 6.992,2.498 7.500 C 2.590 7.816,2.884 8.095,3.580 8.528 C 3.888 8.720,4.202 8.929,4.279 8.993 L 4.417 9.109 4.343 9.424 C 4.303 9.598,3.928 10.847,3.512 12.200 C 2.673 14.921,2.480 15.622,2.481 15.932 C 2.483 16.322,2.689 16.620,3.252 17.044 C 4.895 18.282,7.282 18.251,8.859 16.972 C 9.166 16.723,9.470 16.345,9.524 16.145 C 9.602 15.854,9.517 15.533,8.462 12.140 C 8.140 11.106,7.811 10.021,7.731 9.729 C 7.586 9.203,7.585 9.197,7.662 9.122 C 7.798 8.990,10.266 7.996,10.563 7.954 L 10.660 7.940 10.687 8.860 C 10.714 9.803,10.800 17.053,10.800 18.422 L 10.800 19.185 9.720 19.233 C 8.392 19.293,8.048 19.334,7.797 19.461 C 7.459 19.633,7.280 19.974,7.280 20.448 C 7.280 20.825,7.452 21.123,7.855 21.444 L 8.050 21.600 12.020 21.600 L 15.990 21.600 16.266 21.309 C 16.611 20.947,16.692 20.783,16.713 20.412 C 16.731 20.076,16.648 19.855,16.404 19.600 C 16.158 19.341,15.764 19.278,13.984 19.217 L 13.189 19.190 13.216 16.065 C 13.246 12.660,13.314 7.952,13.335 7.932 C 13.364 7.903,15.739 8.780,16.346 9.045 L 16.473 9.100 16.301 9.660 C 16.206 9.968,15.819 11.219,15.441 12.440 C 14.762 14.636,14.440 15.778,14.440 15.993 C 14.440 16.544,15.591 17.456,16.729 17.807 C 16.996 17.889,17.098 17.897,17.980 17.896 C 19.051 17.896,19.166 17.877,19.796 17.606 C 20.751 17.194,21.558 16.430,21.560 15.936 C 21.560 15.764,21.351 15.037,20.520 12.320 C 19.827 10.056,19.674 9.530,19.624 9.246 C 19.593 9.072,19.682 8.988,20.308 8.595 C 21.261 7.998,21.560 7.670,21.560 7.222 C 21.560 6.630,21.093 6.187,20.354 6.077 L 20.055 6.032 18.999 6.561 L 17.943 7.089 15.578 6.143 L 13.213 5.197 13.187 4.309 C 13.173 3.820,13.141 3.349,13.116 3.262 C 12.994 2.829,12.597 2.575,11.932 2.504 C 11.752 2.484,11.664 2.495,11.540 2.553 M6.154 12.951 C 6.409 13.613,6.840 15.117,6.840 15.347 C 6.840 15.418,6.805 15.441,6.638 15.477 C 6.371 15.534,5.537 15.528,5.360 15.468 C 5.232 15.424,5.219 15.405,5.208 15.248 C 5.193 15.051,5.333 14.461,5.568 13.723 C 5.788 13.033,5.959 12.595,6.000 12.620 C 6.019 12.632,6.088 12.781,6.154 12.951 M18.441 13.840 C 18.764 14.809,18.879 15.338,18.787 15.430 C 18.624 15.593,17.372 15.580,17.250 15.413 C 17.171 15.305,17.190 15.124,17.338 14.544 C 17.477 14.002,17.853 12.810,17.932 12.660 C 17.970 12.588,17.984 12.603,18.071 12.800 C 18.124 12.921,18.290 13.389,18.441 13.840 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/scissors.svg b/packages/icons/svg/scissors.svg
index 968e365a41..039aaaa1ce 100644
--- a/packages/icons/svg/scissors.svg
+++ b/packages/icons/svg/scissors.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.933 2.521 C 5.208 2.612,4.342 3.057,3.726 3.656 C 3.193 4.172,2.961 4.507,2.707 5.121 C 2.499 5.623,2.440 5.975,2.440 6.701 C 2.440 7.431,2.490 7.632,2.860 8.380 C 3.406 9.486,4.413 10.327,5.553 10.628 C 5.887 10.717,6.028 10.731,6.580 10.735 C 7.272 10.738,7.492 10.700,8.270 10.437 L 8.619 10.319 9.459 11.159 L 10.300 12.000 9.460 12.838 L 8.620 13.677 8.157 13.542 C 7.531 13.358,7.010 13.303,6.233 13.336 C 5.540 13.365,5.399 13.399,4.823 13.681 C 3.673 14.243,2.881 15.183,2.571 16.355 C 2.483 16.688,2.469 16.824,2.468 17.360 C 2.468 17.800,2.488 18.072,2.537 18.296 C 2.860 19.777,4.016 20.967,5.566 21.415 C 7.485 21.970,9.618 20.891,10.482 18.930 C 10.673 18.496,10.719 18.215,10.720 17.493 C 10.720 16.758,10.668 16.403,10.479 15.844 L 10.325 15.387 13.928 11.764 C 18.843 6.821,20.089 5.524,20.269 5.163 C 20.435 4.829,20.320 4.323,20.008 4.011 C 19.687 3.689,19.168 3.609,18.747 3.815 C 18.386 3.991,17.278 5.043,13.730 8.577 L 12.000 10.300 11.160 9.460 L 10.320 8.620 10.464 8.220 C 10.659 7.680,10.715 7.343,10.746 6.538 C 10.775 5.765,10.763 5.704,10.458 5.060 C 9.828 3.734,8.696 2.789,7.481 2.578 C 7.070 2.507,6.281 2.478,5.933 2.521 M6.832 4.921 C 7.036 4.942,7.252 4.986,7.312 5.017 C 7.505 5.120,7.874 5.454,8.059 5.695 L 8.240 5.930 8.240 6.601 L 8.240 7.272 8.018 7.555 C 7.668 8.003,7.182 8.310,6.711 8.380 C 6.177 8.461,5.349 7.940,5.036 7.327 C 4.948 7.156,4.940 7.094,4.942 6.580 C 4.943 6.038,4.947 6.014,5.057 5.827 C 5.319 5.384,5.794 4.996,6.164 4.923 C 6.404 4.876,6.410 4.876,6.832 4.921 M14.180 13.472 C 13.861 13.585,13.552 13.904,13.460 14.213 C 13.334 14.638,13.406 14.897,13.787 15.377 C 14.084 15.752,17.835 19.493,18.318 19.895 C 18.758 20.263,18.899 20.332,19.205 20.330 C 19.607 20.327,19.999 20.098,20.200 19.747 C 20.305 19.564,20.319 19.502,20.319 19.220 C 20.318 18.997,20.296 18.852,20.245 18.739 C 20.144 18.516,19.245 17.571,17.355 15.700 C 15.786 14.147,15.232 13.643,14.977 13.536 C 14.830 13.475,14.293 13.431,14.180 13.472 M6.832 15.721 C 7.036 15.742,7.252 15.786,7.312 15.817 C 7.505 15.920,7.874 16.254,8.059 16.495 L 8.240 16.730 8.240 17.401 L 8.240 18.072 8.018 18.355 C 7.668 18.803,7.182 19.110,6.711 19.180 C 6.177 19.261,5.349 18.740,5.036 18.127 C 4.948 17.956,4.940 17.894,4.942 17.380 C 4.943 16.838,4.947 16.814,5.057 16.627 C 5.319 16.184,5.794 15.796,6.164 15.723 C 6.404 15.676,6.410 15.676,6.832 15.721 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.560 2.600 C 4.893 2.779,4.216 3.187,3.634 3.760 C 3.111 4.275,2.804 4.774,2.586 5.460 C 2.419 5.986,2.385 7.011,2.517 7.527 C 2.608 7.883,2.889 8.488,3.132 8.851 C 3.764 9.793,4.710 10.448,5.776 10.680 C 5.883 10.704,6.256 10.723,6.603 10.723 C 7.293 10.724,7.568 10.677,8.259 10.441 L 8.619 10.319 9.459 11.159 L 10.300 12.000 9.460 12.839 L 8.620 13.678 8.280 13.578 C 7.623 13.386,7.307 13.344,6.540 13.346 C 5.678 13.348,5.468 13.386,4.936 13.638 C 3.753 14.198,3.015 15.013,2.615 16.200 C 2.503 16.533,2.501 16.558,2.502 17.400 C 2.502 18.235,2.506 18.270,2.615 18.600 C 3.088 20.024,4.215 21.064,5.696 21.444 C 7.486 21.904,9.525 20.893,10.389 19.116 C 10.648 18.583,10.686 18.416,10.709 17.699 C 10.735 16.903,10.683 16.489,10.479 15.864 L 10.324 15.388 13.748 11.944 C 18.676 6.987,20.101 5.504,20.268 5.160 C 20.418 4.852,20.308 4.340,20.028 4.045 C 19.732 3.733,19.191 3.626,18.803 3.802 C 18.412 3.979,17.562 4.774,14.247 8.060 L 11.994 10.294 11.157 9.457 L 10.320 8.620 10.460 8.228 C 10.643 7.715,10.717 7.278,10.747 6.520 C 10.776 5.789,10.746 5.646,10.432 5.020 C 10.028 4.216,9.484 3.577,8.838 3.150 C 8.119 2.674,7.710 2.559,6.640 2.536 C 5.950 2.521,5.825 2.529,5.560 2.600 M6.820 4.924 C 7.018 4.948,7.241 4.996,7.315 5.031 C 7.481 5.108,7.878 5.471,8.087 5.734 L 8.240 5.927 8.240 6.602 L 8.240 7.276 8.046 7.508 C 7.642 7.992,7.346 8.201,6.863 8.341 C 6.670 8.397,6.591 8.401,6.412 8.365 C 5.994 8.281,5.475 7.949,5.225 7.605 C 4.960 7.240,4.953 7.214,4.967 6.546 L 4.980 5.938 5.172 5.668 C 5.437 5.298,5.834 5.007,6.189 4.924 C 6.397 4.875,6.413 4.875,6.820 4.924 M13.955 13.593 C 13.520 13.873,13.310 14.390,13.455 14.825 C 13.491 14.932,13.614 15.144,13.728 15.296 C 13.960 15.604,17.506 19.167,18.160 19.748 C 18.391 19.954,18.669 20.166,18.778 20.221 C 19.282 20.474,19.974 20.209,20.239 19.662 C 20.332 19.471,20.348 19.083,20.274 18.836 C 20.211 18.624,19.780 18.141,18.461 16.804 C 17.039 15.363,15.536 13.924,15.202 13.686 L 14.944 13.501 14.542 13.488 C 14.153 13.474,14.134 13.478,13.955 13.593 M6.820 15.724 C 7.018 15.748,7.241 15.796,7.315 15.831 C 7.481 15.908,7.878 16.271,8.087 16.534 L 8.240 16.727 8.240 17.402 L 8.240 18.076 8.046 18.308 C 7.642 18.792,7.346 19.001,6.863 19.141 C 6.670 19.197,6.591 19.201,6.412 19.165 C 5.994 19.081,5.475 18.749,5.225 18.405 C 4.960 18.040,4.953 18.014,4.967 17.346 L 4.980 16.738 5.172 16.468 C 5.437 16.098,5.834 15.807,6.189 15.724 C 6.397 15.675,6.413 15.675,6.820 15.724 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/search-circle.svg b/packages/icons/svg/search-circle.svg
index ed72c3a194..ce1e70ad54 100644
--- a/packages/icons/svg/search-circle.svg
+++ b/packages/icons/svg/search-circle.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.148 2.480 C 10.437 2.548,9.203 2.863,8.380 3.187 C 7.214 3.645,5.946 4.508,5.068 5.441 C 3.942 6.637,3.257 7.892,2.699 9.784 L 2.480 10.527 2.480 12.064 L 2.480 13.601 2.755 14.432 C 3.215 15.818,3.537 16.537,4.030 17.274 C 4.873 18.535,6.162 19.708,7.480 20.414 C 8.126 20.760,9.203 21.153,10.000 21.334 C 10.738 21.502,11.130 21.540,12.080 21.538 C 13.128 21.536,13.440 21.497,14.359 21.257 C 15.969 20.835,17.403 20.018,18.635 18.821 C 20.104 17.393,21.015 15.714,21.402 13.720 C 21.580 12.804,21.580 11.125,21.403 10.256 C 21.111 8.824,20.460 7.386,19.552 6.166 C 19.176 5.661,18.367 4.857,17.840 4.464 C 16.690 3.608,15.224 2.928,14.000 2.684 C 13.118 2.508,11.823 2.415,11.148 2.480 M14.080 6.165 C 15.452 6.349,16.865 7.464,17.544 8.897 C 17.825 9.491,17.840 9.589,17.840 10.831 C 17.840 11.900,17.838 11.933,17.737 12.232 C 17.235 13.727,15.846 15.061,14.438 15.398 C 13.724 15.570,12.694 15.602,12.220 15.467 C 12.110 15.435,11.752 15.326,11.425 15.224 C 11.098 15.121,10.798 15.048,10.758 15.061 C 10.669 15.089,10.203 15.511,9.192 16.481 C 7.871 17.748,7.586 17.959,7.195 17.960 C 6.820 17.960,6.448 17.745,6.255 17.415 C 6.170 17.270,6.143 17.152,6.108 16.781 L 6.066 16.325 6.539 15.832 C 6.800 15.562,7.470 14.868,8.030 14.292 L 9.046 13.244 8.882 12.796 C 8.538 11.858,8.436 11.168,8.517 10.336 C 8.628 9.194,8.994 8.384,9.756 7.589 C 10.272 7.051,10.553 6.845,11.243 6.503 C 11.822 6.216,12.015 6.158,12.580 6.104 C 12.815 6.081,13.734 6.119,14.080 6.165 M12.299 8.654 C 11.968 8.814,11.578 9.101,11.376 9.333 C 11.033 9.726,10.813 10.418,10.857 10.965 C 10.901 11.524,11.079 11.912,11.485 12.340 C 12.027 12.911,12.496 13.128,13.200 13.135 C 13.543 13.138,13.667 13.122,13.880 13.047 C 14.561 12.806,15.273 12.080,15.462 11.433 C 15.570 11.063,15.562 10.421,15.445 10.100 C 15.327 9.775,15.123 9.478,14.801 9.163 C 14.285 8.658,13.917 8.522,13.059 8.521 C 12.594 8.520,12.568 8.525,12.299 8.654 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.700 2.544 C 10.244 2.626,9.654 2.772,9.109 2.938 C 6.805 3.638,4.735 5.340,3.621 7.451 C 3.245 8.163,2.978 8.850,2.638 9.987 L 2.480 10.515 2.480 12.074 L 2.480 13.634 2.745 14.407 C 3.059 15.324,3.232 15.773,3.458 16.260 C 4.291 18.047,6.086 19.798,7.940 20.632 C 8.581 20.920,9.586 21.252,10.200 21.378 C 11.267 21.598,12.882 21.598,13.870 21.377 C 15.012 21.123,16.283 20.593,17.160 20.007 C 18.768 18.933,20.076 17.395,20.771 15.760 C 21.121 14.937,21.387 13.977,21.478 13.207 C 21.534 12.732,21.536 11.234,21.481 10.772 C 21.352 9.693,20.880 8.337,20.255 7.253 C 19.786 6.436,19.488 6.048,18.800 5.354 C 17.940 4.487,17.356 4.060,16.280 3.513 C 15.141 2.933,14.178 2.658,12.806 2.521 C 12.221 2.463,11.086 2.475,10.700 2.544 M14.436 6.238 C 15.687 6.550,16.935 7.629,17.556 8.933 C 17.815 9.476,17.818 9.498,17.819 10.800 C 17.820 12.139,17.823 12.122,17.479 12.820 C 17.024 13.743,16.126 14.653,15.220 15.110 C 14.623 15.411,13.976 15.538,13.060 15.535 L 12.420 15.533 11.680 15.307 C 11.273 15.182,10.888 15.081,10.824 15.080 C 10.680 15.080,10.584 15.162,9.300 16.379 C 7.764 17.835,7.551 17.988,7.116 17.949 C 6.651 17.907,6.248 17.567,6.163 17.147 C 6.140 17.033,6.116 16.794,6.110 16.615 L 6.100 16.290 7.560 14.778 C 8.363 13.946,9.018 13.237,9.014 13.203 C 9.011 13.168,8.935 12.927,8.845 12.668 C 8.438 11.499,8.394 10.440,8.707 9.360 C 8.911 8.656,9.265 8.090,9.898 7.458 C 10.350 7.006,10.621 6.816,11.263 6.499 C 11.978 6.145,12.136 6.116,13.200 6.136 C 13.940 6.151,14.160 6.169,14.436 6.238 M12.440 8.594 C 12.218 8.681,11.845 8.917,11.583 9.135 C 11.045 9.584,10.743 10.509,10.896 11.240 C 10.993 11.703,11.168 12.008,11.560 12.400 C 12.101 12.941,12.533 13.126,13.253 13.125 C 13.711 13.124,13.949 13.059,14.299 12.836 C 15.199 12.266,15.638 11.428,15.521 10.505 C 15.452 9.963,15.262 9.624,14.756 9.141 C 14.247 8.654,13.866 8.520,13.000 8.523 C 12.734 8.523,12.566 8.545,12.440 8.594 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/search.svg b/packages/icons/svg/search.svg
index 7c61e1d0c6..5359d3b773 100644
--- a/packages/icons/svg/search.svg
+++ b/packages/icons/svg/search.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.420 2.559 C 7.678 2.642,6.424 3.151,5.596 3.707 C 4.048 4.744,3.043 6.217,2.582 8.121 C 2.457 8.638,2.412 9.550,2.475 10.300 C 2.588 11.641,3.258 13.193,4.186 14.259 C 4.560 14.690,5.221 15.276,5.658 15.565 C 6.834 16.342,8.617 16.862,9.846 16.787 C 10.922 16.722,12.834 16.113,13.582 15.599 L 13.769 15.470 15.395 17.088 C 17.481 19.166,18.838 20.487,19.429 21.020 C 19.956 21.493,20.158 21.590,20.525 21.547 C 20.771 21.518,20.900 21.449,21.170 21.202 C 21.482 20.917,21.531 20.795,21.514 20.342 C 21.500 19.985,21.495 19.966,21.355 19.796 C 21.083 19.465,19.533 17.860,17.526 15.834 C 16.423 14.720,15.520 13.790,15.520 13.768 C 15.520 13.745,15.594 13.599,15.684 13.442 C 16.052 12.804,16.578 11.427,16.681 10.830 C 16.751 10.431,16.711 8.420,16.627 8.100 C 16.135 6.207,15.096 4.692,13.620 3.712 C 12.896 3.231,11.697 2.714,11.057 2.606 C 10.748 2.554,8.781 2.519,8.420 2.559 M10.877 5.044 C 11.040 5.086,11.359 5.209,11.586 5.317 C 12.737 5.867,13.482 6.674,14.082 8.020 L 14.260 8.420 14.247 9.680 L 14.234 10.940 13.972 11.440 C 13.607 12.138,13.338 12.531,12.973 12.898 C 11.540 14.343,9.570 14.740,7.702 13.959 C 7.010 13.669,6.159 12.960,5.746 12.327 C 5.451 11.876,5.052 11.070,5.001 10.823 C 4.970 10.675,4.959 10.228,4.968 9.490 C 4.981 8.536,4.993 8.352,5.056 8.180 C 5.376 7.308,6.063 6.340,6.708 5.854 C 7.244 5.450,8.128 5.041,8.640 4.960 C 9.019 4.899,10.534 4.957,10.877 5.044 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.939 2.657 C 7.740 2.709,7.386 2.826,7.151 2.918 C 4.971 3.770,3.482 5.312,2.785 7.438 C 2.503 8.297,2.464 8.560,2.465 9.580 C 2.465 10.337,2.478 10.518,2.555 10.880 C 2.816 12.107,3.381 13.290,4.140 14.205 C 4.453 14.582,5.159 15.216,5.606 15.522 C 6.325 16.014,7.400 16.451,8.427 16.666 C 9.121 16.812,9.971 16.820,10.600 16.686 C 11.763 16.440,13.032 15.976,13.595 15.590 L 13.769 15.470 15.335 17.028 C 18.613 20.291,19.657 21.280,20.018 21.461 C 20.389 21.647,20.754 21.569,21.147 21.219 C 21.469 20.932,21.537 20.764,21.512 20.304 C 21.496 19.988,21.486 19.955,21.352 19.793 C 21.122 19.514,20.197 18.553,18.083 16.400 C 16.992 15.289,15.969 14.243,15.809 14.076 L 15.518 13.772 15.770 13.276 C 16.172 12.484,16.596 11.340,16.680 10.821 C 16.729 10.521,16.730 9.261,16.682 8.620 C 16.579 7.247,15.634 5.437,14.471 4.383 C 13.721 3.704,12.717 3.131,11.655 2.775 C 11.106 2.592,10.783 2.561,9.420 2.563 C 8.379 2.564,8.275 2.570,7.939 2.657 M10.480 5.000 C 10.895 5.041,11.173 5.124,11.623 5.340 C 12.358 5.694,13.073 6.314,13.515 6.980 C 13.631 7.156,13.842 7.537,13.983 7.826 L 14.240 8.352 14.240 9.644 L 14.240 10.936 13.935 11.498 C 13.449 12.395,13.100 12.835,12.488 13.325 C 11.945 13.760,11.390 14.032,10.643 14.229 C 10.317 14.316,10.168 14.331,9.640 14.334 C 8.957 14.338,8.770 14.309,8.090 14.094 C 7.190 13.810,6.284 13.120,5.744 12.307 C 5.405 11.797,5.044 11.027,4.999 10.720 C 4.954 10.406,4.952 9.406,4.996 8.717 C 5.027 8.222,5.031 8.206,5.229 7.792 C 5.568 7.082,6.064 6.407,6.560 5.982 C 6.955 5.643,7.820 5.180,8.330 5.035 C 8.676 4.936,9.673 4.920,10.480 5.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/selector.svg b/packages/icons/svg/selector.svg
index b1d19487af..baf1f74624 100644
--- a/packages/icons/svg/selector.svg
+++ b/packages/icons/svg/selector.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.198 3.982 C 10.041 5.049,7.596 7.556,7.420 7.857 C 7.192 8.245,7.205 8.664,7.455 9.027 C 7.694 9.375,8.181 9.610,8.527 9.545 C 8.899 9.475,9.423 9.040,11.030 7.463 L 12.000 6.511 12.942 7.435 C 14.029 8.502,14.874 9.287,15.091 9.432 C 15.219 9.517,15.286 9.531,15.536 9.529 C 15.930 9.525,16.133 9.464,16.323 9.293 C 16.517 9.117,16.719 8.706,16.748 8.426 C 16.789 8.028,16.579 7.752,15.044 6.189 C 14.093 5.220,13.067 4.238,12.721 3.964 C 12.483 3.777,12.350 3.734,11.878 3.697 L 11.537 3.670 11.198 3.982 M7.851 14.604 C 7.515 14.770,7.229 15.236,7.229 15.616 C 7.229 15.878,7.319 16.054,7.664 16.460 C 8.274 17.178,10.869 19.736,11.382 20.124 C 11.642 20.321,11.928 20.389,12.223 20.323 C 12.530 20.254,12.934 19.897,14.697 18.136 C 16.268 16.566,16.647 16.144,16.718 15.890 C 16.852 15.409,16.618 14.857,16.186 14.631 C 16.055 14.562,15.931 14.541,15.599 14.528 L 15.178 14.512 14.848 14.778 C 14.476 15.079,13.844 15.674,12.753 16.755 L 12.005 17.494 11.110 16.617 C 9.584 15.122,9.027 14.634,8.771 14.562 C 8.505 14.489,8.041 14.509,7.851 14.604 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.915 4.250 C 10.188 4.934,8.482 6.661,7.864 7.340 C 7.367 7.885,7.265 8.069,7.268 8.420 C 7.270 8.714,7.352 8.909,7.570 9.146 C 7.898 9.502,8.351 9.639,8.697 9.486 C 9.081 9.315,9.786 8.695,11.287 7.207 L 11.995 6.506 12.927 7.420 C 14.065 8.534,14.957 9.356,15.130 9.450 C 15.284 9.534,15.766 9.545,16.013 9.471 C 16.102 9.445,16.243 9.358,16.326 9.279 C 16.504 9.109,16.708 8.696,16.745 8.430 C 16.796 8.057,16.560 7.742,15.137 6.283 C 14.182 5.304,12.899 4.087,12.647 3.920 C 12.427 3.774,12.281 3.733,11.855 3.698 L 11.531 3.671 10.915 4.250 M8.014 14.558 C 7.481 14.685,7.087 15.436,7.294 15.931 C 7.324 16.002,7.455 16.195,7.587 16.360 C 8.092 16.994,10.829 19.702,11.368 20.102 C 11.820 20.436,12.190 20.427,12.669 20.070 C 13.032 19.799,16.383 16.440,16.575 16.155 C 16.773 15.861,16.808 15.567,16.685 15.240 C 16.496 14.741,16.229 14.568,15.591 14.532 L 15.176 14.509 14.798 14.824 C 14.376 15.175,13.813 15.707,12.733 16.775 L 12.005 17.494 11.113 16.620 C 10.128 15.657,9.306 14.896,9.074 14.736 C 8.992 14.679,8.856 14.608,8.772 14.578 C 8.609 14.519,8.219 14.509,8.014 14.558 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/server.svg b/packages/icons/svg/server.svg
index e05a43e159..725a8ccfed 100644
--- a/packages/icons/svg/server.svg
+++ b/packages/icons/svg/server.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.958 3.716 L 4.017 3.740 3.779 3.880 C 3.649 3.957,3.376 4.182,3.173 4.381 C 2.876 4.672,2.777 4.800,2.661 5.043 C 2.583 5.209,2.501 5.452,2.479 5.582 C 2.427 5.902,2.430 8.649,2.483 8.880 C 2.641 9.568,3.277 10.278,4.109 10.695 L 4.317 10.800 12.003 10.800 L 19.688 10.800 19.997 10.639 C 20.565 10.344,21.159 9.764,21.386 9.284 C 21.546 8.944,21.569 8.628,21.549 7.020 C 21.534 5.798,21.519 5.498,21.464 5.300 C 21.334 4.834,20.950 4.389,20.307 3.957 L 19.955 3.720 16.784 3.720 C 15.040 3.720,12.778 3.714,11.757 3.706 C 10.735 3.698,8.576 3.703,6.958 3.716 M18.674 6.311 C 18.982 6.519,19.033 6.637,19.066 7.214 L 19.093 7.685 18.818 7.962 C 18.508 8.274,18.376 8.335,18.010 8.332 C 17.570 8.329,17.229 8.128,17.053 7.770 C 16.953 7.566,16.940 7.497,16.941 7.160 C 16.942 6.849,16.958 6.750,17.029 6.616 C 17.134 6.418,17.362 6.210,17.511 6.177 C 17.571 6.164,17.638 6.146,17.660 6.137 C 17.682 6.128,17.868 6.129,18.074 6.140 C 18.427 6.157,18.461 6.167,18.674 6.311 M8.280 13.358 L 3.980 13.380 3.780 13.496 C 3.127 13.877,2.648 14.437,2.520 14.968 C 2.448 15.269,2.400 16.786,2.436 17.646 C 2.464 18.311,2.486 18.503,2.555 18.697 C 2.789 19.358,3.308 19.891,4.109 20.295 L 4.317 20.400 8.749 20.397 C 11.186 20.395,14.629 20.379,16.400 20.361 C 19.964 20.325,19.898 20.330,20.303 20.062 C 20.764 19.758,21.247 19.222,21.484 18.751 L 21.600 18.522 21.600 16.820 L 21.600 15.117 21.494 14.909 C 21.219 14.364,20.806 13.893,20.284 13.527 L 19.987 13.320 16.284 13.328 C 14.247 13.333,10.645 13.346,8.280 13.358 M18.419 15.760 C 18.626 15.838,18.921 16.086,19.010 16.254 C 19.130 16.482,19.132 17.017,19.014 17.280 C 18.819 17.712,18.495 17.920,18.020 17.918 C 17.530 17.915,17.257 17.761,17.048 17.368 C 16.931 17.149,16.920 17.097,16.920 16.764 C 16.920 16.447,16.933 16.379,17.016 16.249 C 17.146 16.046,17.391 15.817,17.560 15.741 C 17.716 15.670,18.213 15.681,18.419 15.760 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.275 3.757 C 3.955 3.778,3.912 3.792,3.700 3.938 C 3.388 4.153,2.878 4.659,2.747 4.883 C 2.689 4.984,2.601 5.173,2.552 5.303 C 2.469 5.528,2.464 5.614,2.449 7.031 C 2.440 7.911,2.450 8.627,2.474 8.779 C 2.582 9.470,3.209 10.220,4.046 10.660 L 4.312 10.800 11.997 10.800 L 19.683 10.800 19.891 10.695 C 20.533 10.370,21.144 9.786,21.381 9.270 C 21.434 9.153,21.496 8.932,21.518 8.779 C 21.567 8.441,21.570 6.583,21.522 5.851 C 21.493 5.389,21.473 5.289,21.370 5.068 C 21.214 4.734,20.841 4.341,20.354 3.996 L 19.965 3.720 12.293 3.727 C 8.073 3.731,4.465 3.744,4.275 3.757 M18.581 6.260 C 18.956 6.475,19.019 6.609,19.064 7.273 L 19.092 7.685 18.896 7.888 C 18.788 7.999,18.620 8.142,18.522 8.205 C 18.366 8.306,18.308 8.320,18.042 8.319 C 17.562 8.318,17.255 8.141,17.056 7.751 C 16.973 7.588,16.960 7.507,16.960 7.149 C 16.960 6.762,16.967 6.724,17.075 6.554 C 17.296 6.206,17.512 6.114,18.040 6.146 C 18.336 6.163,18.456 6.189,18.581 6.260 M8.940 13.358 L 3.980 13.380 3.792 13.490 C 3.360 13.744,2.911 14.174,2.704 14.532 C 2.521 14.847,2.479 15.096,2.442 16.067 C 2.395 17.333,2.444 18.345,2.572 18.711 C 2.792 19.344,3.338 19.903,4.129 20.305 L 4.340 20.412 11.300 20.386 C 18.432 20.359,19.678 20.336,19.999 20.221 C 20.468 20.054,21.197 19.318,21.515 18.692 C 21.598 18.527,21.600 18.480,21.600 16.820 L 21.600 15.117 21.495 14.909 C 21.249 14.418,20.750 13.857,20.242 13.501 L 19.984 13.320 16.942 13.328 C 15.269 13.333,11.668 13.346,8.940 13.358 M18.522 15.822 C 18.765 15.944,19.028 16.234,19.062 16.419 C 19.077 16.499,19.082 16.717,19.072 16.903 C 19.056 17.217,19.043 17.256,18.897 17.468 C 18.707 17.744,18.474 17.877,18.129 17.909 C 17.640 17.953,17.291 17.778,17.050 17.367 C 16.966 17.223,16.942 17.121,16.928 16.859 C 16.907 16.469,16.951 16.311,17.143 16.087 C 17.428 15.754,17.635 15.673,18.100 15.712 C 18.233 15.723,18.421 15.772,18.522 15.822 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/share.svg b/packages/icons/svg/share.svg
index 5b3ffedc05..eb5d5f0316 100644
--- a/packages/icons/svg/share.svg
+++ b/packages/icons/svg/share.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.311 2.519 C 16.558 2.655,15.900 3.061,15.224 3.804 C 14.793 4.279,14.459 5.208,14.411 6.063 L 14.389 6.466 11.454 7.933 L 8.518 9.401 8.289 9.254 C 7.922 9.019,7.045 8.607,6.804 8.557 C 6.662 8.527,6.322 8.517,5.861 8.529 C 5.179 8.547,5.122 8.555,4.815 8.669 C 4.636 8.736,4.358 8.868,4.197 8.962 C 3.651 9.281,3.010 10.014,2.625 10.760 L 2.429 11.140 2.452 11.940 C 2.471 12.643,2.486 12.778,2.573 13.051 C 2.842 13.896,3.611 14.738,4.627 15.300 L 5.060 15.540 5.856 15.532 C 6.540 15.525,6.693 15.512,6.934 15.438 C 7.254 15.341,7.848 15.048,8.258 14.786 L 8.536 14.608 11.468 16.074 L 14.400 17.540 14.400 17.760 C 14.401 18.091,14.502 18.700,14.617 19.060 C 14.963 20.141,15.833 21.018,16.945 21.406 L 17.294 21.528 18.077 21.510 C 18.944 21.490,19.076 21.461,19.597 21.175 C 20.365 20.753,21.104 19.903,21.367 19.138 C 21.594 18.481,21.607 17.463,21.398 16.854 C 21.163 16.170,20.479 15.387,19.720 14.931 C 19.145 14.586,18.823 14.520,17.721 14.520 L 17.060 14.520 16.346 14.901 C 15.953 15.110,15.595 15.307,15.550 15.338 C 15.476 15.390,15.230 15.275,12.535 13.928 L 9.600 12.460 9.600 12.000 L 9.600 11.540 12.534 10.073 L 15.468 8.606 15.584 8.685 C 15.909 8.906,16.458 9.208,16.762 9.334 C 17.152 9.495,17.617 9.560,18.379 9.560 L 18.829 9.560 19.253 9.344 C 20.203 8.862,20.897 8.202,21.256 7.440 C 21.497 6.929,21.531 6.726,21.512 5.883 C 21.495 5.162,21.491 5.131,21.368 4.820 C 21.162 4.298,20.970 4.011,20.540 3.579 C 20.083 3.120,19.613 2.792,19.249 2.680 C 18.814 2.545,17.684 2.451,17.311 2.519 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.041 2.584 C 16.208 2.808,15.236 3.606,14.860 4.375 C 14.582 4.943,14.400 5.685,14.400 6.253 L 14.400 6.460 11.463 7.928 L 8.526 9.397 8.113 9.158 C 7.886 9.027,7.502 8.834,7.260 8.730 L 6.820 8.540 6.020 8.543 C 5.104 8.548,4.954 8.577,4.399 8.863 C 3.832 9.155,3.363 9.605,2.901 10.300 C 2.784 10.476,2.630 10.737,2.559 10.880 L 2.429 11.140 2.452 11.920 C 2.478 12.775,2.519 13.002,2.725 13.410 C 3.117 14.187,3.774 14.829,4.697 15.337 L 5.093 15.556 5.857 15.534 C 6.311 15.522,6.717 15.490,6.858 15.455 C 7.141 15.387,7.868 15.039,8.257 14.787 L 8.535 14.607 11.462 16.071 L 14.389 17.534 14.414 17.937 C 14.444 18.412,14.592 19.055,14.754 19.412 C 15.092 20.158,15.736 20.828,16.468 21.195 C 17.036 21.480,17.201 21.520,17.795 21.520 C 18.504 21.519,18.942 21.467,19.241 21.346 C 20.248 20.939,21.172 19.896,21.445 18.860 C 21.556 18.435,21.568 17.516,21.466 17.104 C 21.292 16.395,20.733 15.646,19.980 15.111 C 19.315 14.640,19.044 14.564,17.915 14.532 L 17.090 14.509 16.575 14.781 C 16.292 14.930,15.939 15.121,15.790 15.204 C 15.550 15.339,15.506 15.351,15.390 15.315 C 15.319 15.293,13.987 14.642,12.430 13.869 L 9.600 12.462 9.600 12.001 L 9.600 11.540 12.535 10.073 L 15.469 8.605 15.679 8.747 C 16.070 9.010,16.784 9.359,17.104 9.443 C 17.341 9.506,17.596 9.532,18.125 9.549 L 18.831 9.571 19.245 9.349 C 20.267 8.800,20.930 8.159,21.285 7.375 C 21.467 6.973,21.519 6.683,21.519 6.060 C 21.518 5.356,21.480 5.090,21.324 4.716 C 21.151 4.299,20.949 4.010,20.558 3.615 C 20.001 3.052,19.537 2.744,19.100 2.647 C 18.485 2.510,17.436 2.478,17.041 2.584 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/shield-check.svg b/packages/icons/svg/shield-check.svg
index f0b331becf..9e19ad3af2 100644
--- a/packages/icons/svg/shield-check.svg
+++ b/packages/icons/svg/shield-check.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.420 2.805 C 9.718 4.029,8.737 4.582,7.429 5.056 C 6.308 5.462,5.382 5.686,3.860 5.918 C 2.673 6.100,2.650 6.106,2.579 6.242 C 2.499 6.397,2.441 7.277,2.441 8.364 C 2.440 9.751,2.523 10.532,2.783 11.593 C 3.307 13.728,4.144 15.484,5.453 17.200 C 5.841 17.707,7.524 19.405,7.981 19.748 C 9.078 20.573,10.742 21.521,11.618 21.819 C 11.931 21.926,11.939 21.927,12.190 21.865 C 12.955 21.676,14.655 20.759,15.741 19.949 C 16.754 19.193,18.149 17.762,18.904 16.703 C 19.755 15.510,20.359 14.326,20.821 12.940 C 21.475 10.981,21.657 9.479,21.521 7.156 C 21.480 6.450,21.425 6.176,21.313 6.116 C 21.271 6.094,20.864 6.022,20.409 5.956 C 18.472 5.675,17.146 5.330,15.820 4.762 C 14.912 4.373,13.856 3.737,12.510 2.767 C 12.229 2.565,11.995 2.401,11.990 2.401 C 11.984 2.402,11.728 2.584,11.420 2.805 M16.213 8.667 C 16.581 8.927,16.673 9.145,16.678 9.767 L 16.680 10.074 16.295 10.501 C 15.774 11.077,12.120 14.729,11.731 15.062 C 11.318 15.414,11.129 15.521,10.867 15.548 C 10.471 15.589,10.183 15.402,9.237 14.491 C 8.600 13.878,7.580 12.790,7.451 12.586 C 7.366 12.451,7.348 12.364,7.330 12.017 C 7.311 11.647,7.317 11.594,7.395 11.469 C 7.502 11.294,7.808 11.010,7.943 10.959 C 8.107 10.897,8.709 10.911,8.856 10.981 C 9.067 11.081,9.502 11.447,10.173 12.088 L 10.807 12.693 11.913 11.594 C 13.430 10.089,14.353 9.197,14.780 8.824 L 15.140 8.510 15.597 8.532 C 16.015 8.552,16.066 8.564,16.213 8.667 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.280 2.905 C 9.423 4.228,8.140 4.885,6.454 5.374 C 5.745 5.580,5.143 5.707,3.866 5.919 C 2.551 6.137,2.577 6.126,2.517 6.504 C 2.451 6.919,2.425 9.004,2.477 9.680 C 2.613 11.453,3.275 13.614,4.185 15.262 C 4.548 15.919,5.207 16.902,5.600 17.370 C 6.025 17.879,7.511 19.368,7.907 19.683 C 8.918 20.486,10.720 21.514,11.683 21.838 C 11.937 21.923,11.954 21.924,12.196 21.861 C 12.992 21.655,14.668 20.747,15.736 19.943 C 16.789 19.151,18.079 17.831,18.886 16.720 C 20.223 14.878,21.128 12.604,21.467 10.236 C 21.524 9.839,21.538 9.468,21.538 8.380 C 21.538 7.047,21.498 6.451,21.393 6.220 C 21.341 6.107,21.296 6.096,20.160 5.919 C 16.947 5.420,15.260 4.734,12.640 2.861 C 12.387 2.680,12.135 2.504,12.080 2.469 C 11.982 2.407,11.968 2.414,11.280 2.905 M16.179 8.657 C 16.533 8.866,16.641 9.085,16.670 9.662 L 16.691 10.064 16.270 10.522 C 15.509 11.349,11.708 15.102,11.440 15.290 C 10.810 15.732,10.494 15.648,9.560 14.793 C 8.805 14.102,7.551 12.774,7.426 12.532 C 7.356 12.396,7.299 11.824,7.336 11.626 C 7.370 11.445,7.668 11.112,7.894 11.003 C 8.080 10.913,8.454 10.893,8.733 10.957 C 8.992 11.017,9.279 11.245,10.213 12.131 L 10.807 12.693 11.873 11.634 C 13.362 10.157,14.358 9.194,14.780 8.825 L 15.140 8.510 15.579 8.536 C 15.938 8.558,16.046 8.580,16.179 8.657 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/shield-exclamation.svg b/packages/icons/svg/shield-exclamation.svg
index c4f2538176..73866fff3d 100644
--- a/packages/icons/svg/shield-exclamation.svg
+++ b/packages/icons/svg/shield-exclamation.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.420 2.805 C 9.718 4.029,8.737 4.582,7.429 5.056 C 6.308 5.462,5.382 5.686,3.860 5.918 C 2.673 6.100,2.650 6.106,2.579 6.242 C 2.499 6.397,2.441 7.277,2.441 8.364 C 2.440 9.751,2.523 10.532,2.783 11.593 C 3.307 13.728,4.144 15.484,5.453 17.200 C 5.841 17.707,7.524 19.405,7.981 19.748 C 9.078 20.573,10.742 21.521,11.618 21.819 C 11.931 21.926,11.939 21.927,12.190 21.865 C 12.955 21.676,14.655 20.759,15.741 19.949 C 16.754 19.193,18.149 17.762,18.904 16.703 C 19.755 15.510,20.359 14.326,20.821 12.940 C 21.475 10.981,21.657 9.479,21.521 7.156 C 21.480 6.450,21.425 6.176,21.313 6.116 C 21.271 6.094,20.864 6.022,20.409 5.956 C 18.472 5.675,17.146 5.330,15.820 4.762 C 14.912 4.373,13.856 3.737,12.510 2.767 C 12.229 2.565,11.995 2.401,11.990 2.401 C 11.984 2.402,11.728 2.584,11.420 2.805 M12.545 7.414 C 12.854 7.578,12.987 7.796,13.041 8.230 C 13.076 8.520,13.158 11.133,13.160 12.019 L 13.160 12.417 12.870 12.701 C 12.223 13.334,11.777 13.334,11.130 12.701 L 10.840 12.417 10.841 10.219 L 10.842 8.020 11.031 7.793 C 11.261 7.517,11.382 7.419,11.562 7.364 C 11.754 7.305,12.403 7.338,12.545 7.414 M12.554 15.823 C 12.735 15.938,12.884 16.093,12.972 16.260 C 13.084 16.472,13.095 17.148,12.990 17.345 C 12.779 17.740,12.470 17.919,11.998 17.920 C 11.494 17.920,11.203 17.728,10.995 17.258 C 10.876 16.989,10.868 16.526,10.979 16.301 C 11.075 16.107,11.323 15.853,11.493 15.775 C 11.670 15.695,12.403 15.728,12.554 15.823 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.280 2.905 C 9.423 4.228,8.140 4.885,6.454 5.374 C 5.745 5.580,5.143 5.707,3.866 5.919 C 2.551 6.137,2.577 6.126,2.517 6.504 C 2.451 6.919,2.425 9.004,2.477 9.680 C 2.613 11.453,3.275 13.614,4.185 15.262 C 4.548 15.919,5.207 16.902,5.600 17.370 C 6.025 17.879,7.511 19.368,7.907 19.683 C 8.918 20.486,10.720 21.514,11.683 21.838 C 11.937 21.923,11.954 21.924,12.196 21.861 C 12.992 21.655,14.668 20.747,15.736 19.943 C 16.789 19.151,18.079 17.831,18.886 16.720 C 20.223 14.878,21.128 12.604,21.467 10.236 C 21.524 9.839,21.538 9.468,21.538 8.380 C 21.538 7.047,21.498 6.451,21.393 6.220 C 21.341 6.107,21.296 6.096,20.160 5.919 C 16.947 5.420,15.260 4.734,12.640 2.861 C 12.387 2.680,12.135 2.504,12.080 2.469 C 11.982 2.407,11.968 2.414,11.280 2.905 M12.421 7.382 C 12.581 7.406,12.823 7.610,12.922 7.804 C 13.036 8.027,13.068 8.467,13.125 10.577 L 13.175 12.415 12.881 12.690 C 12.208 13.320,11.801 13.323,11.129 12.700 L 10.840 12.433 10.840 10.222 L 10.840 8.012 11.084 7.745 C 11.219 7.598,11.367 7.457,11.414 7.431 C 11.592 7.334,11.978 7.315,12.421 7.382 M12.509 15.803 C 12.665 15.863,12.951 16.181,12.997 16.346 C 13.059 16.570,13.051 17.176,12.984 17.338 C 12.892 17.558,12.631 17.788,12.395 17.858 C 11.799 18.035,11.280 17.832,11.031 17.324 C 10.900 17.058,10.880 16.514,10.993 16.296 C 11.115 16.060,11.408 15.794,11.588 15.757 C 11.762 15.721,12.373 15.752,12.509 15.803 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/shopping-bag.svg b/packages/icons/svg/shopping-bag.svg
index 660158300d..da545ca965 100644
--- a/packages/icons/svg/shopping-bag.svg
+++ b/packages/icons/svg/shopping-bag.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.220 2.521 C 10.682 2.577,9.744 2.985,9.191 3.402 C 8.645 3.814,8.064 4.465,7.765 5.002 C 7.419 5.623,7.200 6.731,7.200 7.863 L 7.200 8.386 6.550 8.432 C 5.770 8.487,5.554 8.539,5.287 8.735 C 4.895 9.022,4.849 9.212,4.541 11.820 C 4.298 13.882,3.787 18.489,3.676 19.623 L 3.586 20.545 3.672 20.723 C 3.811 21.008,4.111 21.360,4.271 21.427 C 4.351 21.461,4.624 21.504,4.878 21.523 C 5.132 21.542,7.671 21.569,10.520 21.583 C 16.171 21.611,19.403 21.570,19.645 21.468 C 19.805 21.401,20.075 21.146,20.223 20.923 C 20.445 20.588,20.430 20.392,19.717 14.040 C 19.220 9.615,19.138 9.139,18.814 8.813 C 18.571 8.568,18.255 8.491,17.190 8.418 L 16.800 8.390 16.800 7.985 C 16.800 6.959,16.677 6.100,16.443 5.495 C 15.868 4.002,14.302 2.742,12.800 2.565 C 12.320 2.508,11.550 2.487,11.220 2.521 M12.347 4.921 C 13.291 5.046,14.101 5.842,14.260 6.802 C 14.314 7.126,14.400 8.035,14.400 8.282 L 14.400 8.400 12.000 8.400 L 9.600 8.400 9.600 8.227 C 9.600 7.915,9.723 6.785,9.783 6.544 C 9.872 6.186,10.028 5.933,10.382 5.572 C 10.953 4.990,11.498 4.809,12.347 4.921 M8.954 11.023 C 9.135 11.138,9.284 11.293,9.372 11.460 C 9.484 11.672,9.495 12.348,9.390 12.545 C 9.179 12.940,8.870 13.119,8.398 13.120 C 7.894 13.120,7.603 12.928,7.395 12.458 C 7.276 12.189,7.268 11.726,7.379 11.501 C 7.475 11.307,7.723 11.053,7.893 10.975 C 8.070 10.895,8.803 10.928,8.954 11.023 M16.154 11.023 C 16.335 11.138,16.484 11.293,16.572 11.460 C 16.684 11.672,16.695 12.348,16.590 12.545 C 16.379 12.940,16.070 13.119,15.598 13.120 C 15.094 13.120,14.803 12.928,14.595 12.458 C 14.476 12.189,14.468 11.726,14.579 11.501 C 14.675 11.307,14.923 11.053,15.093 10.975 C 15.270 10.895,16.003 10.928,16.154 11.023 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.860 2.595 C 10.296 2.750,9.595 3.100,9.120 3.463 C 8.668 3.809,8.027 4.537,7.768 5.000 C 7.423 5.617,7.200 6.743,7.200 7.873 L 7.200 8.390 6.790 8.417 C 5.742 8.486,5.438 8.569,5.149 8.862 C 4.962 9.052,4.873 9.324,4.764 10.046 C 4.581 11.262,3.600 20.039,3.600 20.468 C 3.600 20.643,3.803 20.988,4.057 21.246 C 4.214 21.406,4.274 21.438,4.490 21.479 C 5.230 21.620,18.643 21.635,19.520 21.496 C 19.673 21.472,19.742 21.425,19.985 21.183 C 20.239 20.930,20.276 20.874,20.322 20.667 C 20.405 20.297,20.310 19.261,19.717 14.020 C 19.222 9.646,19.134 9.140,18.817 8.826 C 18.663 8.674,18.532 8.611,18.232 8.542 C 18.020 8.494,17.127 8.400,16.884 8.400 C 16.818 8.400,16.810 8.337,16.789 7.650 C 16.747 6.277,16.545 5.501,16.025 4.702 C 15.497 3.892,14.628 3.175,13.742 2.817 C 13.217 2.606,12.913 2.558,11.980 2.537 C 11.240 2.521,11.107 2.528,10.860 2.595 M12.277 4.922 C 13.217 5.040,13.982 5.712,14.215 6.623 C 14.272 6.848,14.400 7.984,14.400 8.267 L 14.400 8.400 12.000 8.400 L 9.600 8.400 9.600 8.239 C 9.600 8.025,9.711 6.963,9.765 6.660 C 9.821 6.342,9.953 6.074,10.204 5.770 C 10.579 5.314,11.093 4.990,11.546 4.924 C 11.878 4.875,11.905 4.875,12.277 4.922 M8.909 11.003 C 9.065 11.063,9.351 11.381,9.397 11.546 C 9.459 11.770,9.451 12.376,9.384 12.538 C 9.292 12.758,9.031 12.988,8.795 13.058 C 8.199 13.235,7.680 13.032,7.431 12.524 C 7.300 12.258,7.280 11.714,7.393 11.496 C 7.515 11.260,7.808 10.994,7.988 10.957 C 8.162 10.921,8.773 10.952,8.909 11.003 M16.109 11.003 C 16.265 11.063,16.551 11.381,16.597 11.546 C 16.659 11.770,16.651 12.376,16.584 12.538 C 16.492 12.758,16.231 12.988,15.995 13.058 C 15.399 13.235,14.880 13.032,14.631 12.524 C 14.500 12.258,14.480 11.714,14.593 11.496 C 14.715 11.260,15.008 10.994,15.188 10.957 C 15.362 10.921,15.973 10.952,16.109 11.003 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/shopping-cart.svg b/packages/icons/svg/shopping-cart.svg
index 3929542905..d7f557ca8e 100644
--- a/packages/icons/svg/shopping-cart.svg
+++ b/packages/icons/svg/shopping-cart.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.619 1.315 C 2.980 1.361,2.653 1.580,2.500 2.065 C 2.415 2.336,2.434 2.552,2.568 2.846 C 2.811 3.375,3.031 3.486,4.077 3.603 C 4.464 3.646,4.828 3.691,4.887 3.703 C 5.022 3.731,5.064 3.835,5.297 4.708 C 5.561 5.702,6.776 10.544,6.899 11.097 L 7.005 11.573 6.914 11.697 C 6.865 11.764,6.615 12.063,6.361 12.360 C 5.469 13.401,5.352 13.631,5.348 14.360 C 5.344 15.095,5.529 15.504,6.135 16.100 C 6.379 16.340,6.551 16.467,6.825 16.610 L 7.190 16.800 12.768 16.800 L 18.347 16.800 18.527 16.660 C 18.926 16.349,19.136 15.970,19.139 15.560 C 19.140 15.349,19.120 15.266,19.033 15.120 C 18.854 14.816,18.659 14.618,18.493 14.570 C 18.269 14.505,17.218 14.482,12.480 14.439 C 10.137 14.418,8.114 14.389,7.985 14.376 L 7.750 14.351 8.318 13.782 L 8.887 13.212 12.978 13.190 C 16.946 13.169,17.074 13.166,17.248 13.089 C 17.620 12.925,17.975 12.318,19.573 9.120 C 20.741 6.782,21.328 5.541,21.507 5.028 C 21.587 4.799,21.595 4.731,21.560 4.602 C 21.510 4.414,21.240 4.041,20.987 3.810 L 20.802 3.640 16.027 3.640 C 13.402 3.640,10.415 3.628,9.391 3.614 L 7.530 3.587 7.481 3.364 C 7.410 3.039,7.057 1.990,6.941 1.763 C 6.823 1.529,6.663 1.422,6.340 1.362 C 6.047 1.308,4.172 1.275,3.619 1.315 M7.440 18.092 C 6.764 18.284,6.165 18.925,6.041 19.590 C 5.956 20.048,6.155 20.544,6.606 20.997 C 6.988 21.382,7.553 21.628,7.944 21.580 C 8.643 21.496,9.415 20.735,9.566 19.985 C 9.601 19.809,9.597 19.729,9.541 19.537 C 9.387 19.009,9.141 18.659,8.730 18.387 C 8.291 18.097,7.811 17.987,7.440 18.092 M17.040 18.092 C 16.364 18.284,15.765 18.925,15.641 19.590 C 15.556 20.048,15.755 20.544,16.206 20.997 C 16.588 21.382,17.153 21.628,17.544 21.580 C 18.243 21.496,19.015 20.735,19.166 19.985 C 19.201 19.809,19.197 19.729,19.141 19.537 C 18.987 19.009,18.741 18.659,18.330 18.387 C 17.891 18.097,17.411 17.987,17.040 18.092 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.282 1.362 C 3.048 1.410,2.765 1.588,2.650 1.759 C 2.514 1.961,2.427 2.296,2.458 2.502 C 2.495 2.749,2.701 3.139,2.867 3.275 C 3.058 3.433,3.358 3.510,4.209 3.619 C 4.654 3.676,4.948 3.732,4.981 3.766 C 5.052 3.840,5.128 4.080,5.364 4.974 C 5.614 5.925,6.941 11.248,6.975 11.441 C 7.003 11.596,6.964 11.652,6.205 12.545 C 5.780 13.045,5.497 13.474,5.420 13.732 C 5.351 13.966,5.340 14.686,5.402 14.955 C 5.540 15.554,6.168 16.267,6.886 16.641 L 7.192 16.800 12.771 16.800 L 18.350 16.800 18.545 16.645 C 18.976 16.301,19.216 15.765,19.123 15.352 C 19.075 15.138,18.822 14.775,18.634 14.651 C 18.491 14.557,18.446 14.551,17.592 14.518 C 17.101 14.499,14.774 14.464,12.420 14.441 C 10.066 14.417,8.053 14.386,7.946 14.373 L 7.752 14.349 8.320 13.780 L 8.888 13.211 12.934 13.188 C 15.382 13.174,17.041 13.149,17.136 13.125 C 17.480 13.038,17.780 12.613,18.581 11.080 C 19.449 9.418,20.941 6.379,21.295 5.549 C 21.553 4.945,21.606 4.749,21.552 4.590 C 21.489 4.407,21.301 4.139,21.046 3.870 L 20.828 3.640 15.644 3.640 C 12.793 3.640,9.800 3.628,8.993 3.614 L 7.526 3.587 7.500 3.444 C 7.465 3.249,7.091 2.109,6.981 1.859 C 6.880 1.629,6.705 1.464,6.489 1.396 C 6.304 1.337,3.544 1.308,3.282 1.362 M7.535 18.078 C 7.135 18.141,6.619 18.506,6.323 18.935 C 6.046 19.338,5.958 19.869,6.105 20.245 C 6.351 20.875,7.008 21.438,7.645 21.564 C 7.831 21.601,7.909 21.597,8.105 21.541 C 8.741 21.359,9.326 20.769,9.527 20.107 C 9.601 19.862,9.605 19.806,9.562 19.615 C 9.494 19.310,9.273 18.891,9.072 18.684 C 8.637 18.238,8.033 18.000,7.535 18.078 M17.135 18.078 C 16.735 18.141,16.219 18.506,15.923 18.935 C 15.646 19.338,15.558 19.869,15.705 20.245 C 15.951 20.875,16.608 21.438,17.245 21.564 C 17.431 21.601,17.509 21.597,17.705 21.541 C 18.341 21.359,18.926 20.769,19.127 20.107 C 19.201 19.862,19.205 19.806,19.162 19.615 C 19.094 19.310,18.873 18.891,18.672 18.684 C 18.237 18.238,17.633 18.000,17.135 18.078 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/skype.svg b/packages/icons/svg/skype.svg
index 40bc9e9ae2..c255411623 100644
--- a/packages/icons/svg/skype.svg
+++ b/packages/icons/svg/skype.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.424 3.043 C 6.283 3.201,5.265 3.718,4.440 4.557 C 3.469 5.545,2.956 6.867,3.013 8.240 C 3.043 8.978,3.193 9.578,3.517 10.260 L 3.669 10.580 3.617 10.960 C 3.554 11.421,3.546 12.448,3.601 12.940 C 3.968 16.223,6.177 18.957,9.300 19.993 C 10.488 20.387,11.917 20.537,13.060 20.387 L 13.420 20.339 13.820 20.527 C 15.414 21.277,17.201 21.124,18.720 20.108 C 19.111 19.847,19.812 19.144,20.078 18.745 C 20.785 17.689,21.138 16.143,20.943 14.958 C 20.864 14.483,20.700 13.957,20.517 13.595 C 20.394 13.351,20.393 13.342,20.436 13.052 C 20.500 12.623,20.491 11.365,20.420 10.823 C 20.161 8.849,19.091 6.880,17.536 5.515 C 16.263 4.397,14.676 3.714,12.912 3.522 C 12.423 3.469,11.329 3.468,10.874 3.520 C 10.539 3.559,10.520 3.556,10.254 3.444 C 9.635 3.182,8.971 3.044,8.220 3.021 C 7.934 3.012,7.576 3.022,7.424 3.043 M13.051 6.560 C 14.096 6.762,15.032 7.218,15.548 7.776 C 16.118 8.391,16.153 9.112,15.631 9.465 C 15.309 9.683,14.783 9.731,14.460 9.571 C 14.394 9.539,14.124 9.293,13.860 9.025 C 13.455 8.614,13.333 8.515,13.080 8.393 C 12.647 8.184,12.421 8.140,11.780 8.140 C 11.134 8.140,10.890 8.199,10.550 8.437 C 10.252 8.644,10.106 8.899,10.087 9.244 C 10.073 9.482,10.085 9.541,10.174 9.693 C 10.360 10.011,10.801 10.261,11.418 10.399 C 11.617 10.443,12.275 10.589,12.880 10.723 C 14.371 11.052,14.690 11.164,15.226 11.544 C 15.958 12.063,16.320 12.812,16.320 13.808 C 16.320 14.817,16.035 15.546,15.401 16.160 C 14.604 16.932,13.114 17.334,11.530 17.202 C 10.072 17.081,9.041 16.664,8.334 15.908 C 7.696 15.227,7.528 14.395,7.943 13.980 C 8.182 13.740,8.367 13.670,8.716 13.686 C 9.137 13.705,9.325 13.821,9.672 14.274 C 10.017 14.723,10.413 15.113,10.662 15.247 C 10.967 15.412,11.413 15.521,11.880 15.546 C 12.589 15.583,13.115 15.421,13.538 15.035 C 13.840 14.759,13.975 14.470,13.975 14.100 C 13.975 13.664,13.775 13.363,13.340 13.146 C 13.229 13.090,12.437 12.869,11.560 12.648 C 9.455 12.119,9.103 11.976,8.538 11.420 C 8.012 10.903,7.816 10.336,7.849 9.425 C 7.876 8.678,8.045 8.210,8.475 7.684 C 8.773 7.321,9.416 6.923,10.026 6.726 C 10.908 6.442,12.102 6.376,13.051 6.560 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.105 3.100 C 5.220 3.491,3.673 4.935,3.181 6.760 C 2.877 7.890,2.976 9.043,3.474 10.157 C 3.667 10.590,3.668 10.597,3.627 10.827 C 3.603 10.955,3.584 11.492,3.583 12.020 C 3.582 12.774,3.597 13.062,3.653 13.360 C 3.944 14.919,4.507 16.174,5.432 17.323 C 5.740 17.706,6.495 18.436,6.888 18.731 C 8.592 20.008,10.916 20.638,13.028 20.393 L 13.435 20.346 13.788 20.509 C 15.178 21.151,16.610 21.155,17.985 20.520 C 18.632 20.221,19.149 19.822,19.722 19.179 C 20.235 18.604,20.574 17.940,20.801 17.066 C 21.123 15.824,21.054 14.854,20.559 13.693 L 20.402 13.326 20.446 12.973 C 20.503 12.512,20.466 11.005,20.387 10.580 C 20.053 8.789,19.205 7.169,17.938 5.899 C 16.161 4.120,13.631 3.259,10.947 3.520 L 10.553 3.559 10.187 3.416 C 9.502 3.150,9.082 3.074,8.180 3.058 C 7.592 3.047,7.307 3.058,7.105 3.100 M13.290 6.613 C 14.168 6.823,14.973 7.223,15.444 7.685 C 15.884 8.117,16.086 8.638,15.960 9.019 C 15.807 9.483,15.159 9.779,14.632 9.625 C 14.448 9.572,14.346 9.494,13.868 9.039 C 13.039 8.252,12.768 8.143,11.687 8.167 C 11.082 8.180,11.051 8.184,10.800 8.304 C 10.458 8.467,10.218 8.709,10.140 8.972 C 10.017 9.388,10.078 9.639,10.370 9.907 C 10.709 10.218,10.885 10.279,12.508 10.642 C 14.426 11.071,14.734 11.177,15.288 11.597 C 15.928 12.081,16.251 12.716,16.307 13.600 C 16.400 15.088,15.704 16.243,14.371 16.811 C 13.173 17.321,11.418 17.362,10.000 16.913 C 9.270 16.681,8.629 16.272,8.226 15.779 C 7.807 15.267,7.626 14.657,7.776 14.264 C 7.864 14.035,8.141 13.779,8.366 13.718 C 8.569 13.663,8.940 13.692,9.130 13.777 C 9.301 13.854,9.364 13.914,9.724 14.340 C 10.492 15.249,10.896 15.477,11.863 15.545 C 12.550 15.594,13.170 15.390,13.581 14.980 C 13.847 14.716,13.933 14.528,13.953 14.168 C 13.974 13.787,13.895 13.575,13.653 13.362 C 13.429 13.165,13.231 13.090,12.264 12.836 C 9.746 12.175,9.425 12.073,9.014 11.805 C 8.556 11.506,8.120 10.984,7.983 10.567 C 7.766 9.911,7.824 8.828,8.104 8.270 C 8.396 7.688,8.769 7.328,9.432 6.987 C 10.193 6.595,10.815 6.477,12.020 6.497 C 12.753 6.509,12.915 6.524,13.290 6.613 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/slack.svg b/packages/icons/svg/slack.svg
index 6558ba2060..6b13cb8d1c 100644
--- a/packages/icons/svg/slack.svg
+++ b/packages/icons/svg/slack.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.191 3.062 C 8.550 3.218,8.054 3.679,7.839 4.320 C 7.725 4.661,7.742 5.222,7.877 5.571 C 8.057 6.035,8.477 6.456,8.950 6.647 C 9.169 6.735,9.236 6.740,10.350 6.752 L 11.520 6.764 11.520 5.768 C 11.520 5.219,11.502 4.674,11.479 4.555 C 11.372 3.985,10.972 3.459,10.460 3.215 C 10.010 3.000,9.633 2.955,9.191 3.062 M14.080 3.027 C 13.911 3.054,13.508 3.207,13.360 3.300 C 13.180 3.414,12.894 3.700,12.780 3.880 C 12.731 3.957,12.648 4.137,12.596 4.280 L 12.500 4.540 12.500 7.260 L 12.500 9.980 12.596 10.240 C 12.781 10.744,13.088 11.089,13.548 11.309 C 14.627 11.826,15.830 11.286,16.186 10.124 C 16.265 9.865,16.265 4.655,16.186 4.396 C 16.033 3.897,15.664 3.435,15.250 3.225 C 14.896 3.046,14.444 2.969,14.080 3.027 M4.380 7.817 C 4.045 7.924,3.812 8.064,3.570 8.304 C 2.985 8.885,2.850 9.697,3.211 10.452 C 3.459 10.972,3.982 11.371,4.555 11.479 C 4.687 11.504,5.744 11.520,7.260 11.520 C 8.776 11.520,9.833 11.504,9.965 11.479 C 10.746 11.332,11.367 10.683,11.490 9.884 C 11.631 8.976,11.052 8.098,10.124 7.814 C 9.873 7.737,4.620 7.740,4.380 7.817 M18.580 7.816 C 17.887 8.036,17.369 8.610,17.243 9.297 C 17.220 9.428,17.200 9.981,17.200 10.527 L 17.200 11.520 18.230 11.519 C 19.348 11.519,19.589 11.488,19.964 11.298 C 20.393 11.080,20.774 10.612,20.900 10.145 C 21.010 9.738,20.973 9.218,20.810 8.868 C 20.477 8.157,19.845 7.756,19.066 7.763 C 18.887 7.764,18.668 7.788,18.580 7.816 M4.471 12.542 C 3.813 12.702,3.272 13.220,3.100 13.855 C 2.990 14.262,3.027 14.782,3.190 15.132 C 3.435 15.655,3.832 16.002,4.370 16.166 C 4.598 16.235,4.717 16.247,5.022 16.231 C 5.345 16.214,5.435 16.192,5.700 16.067 C 6.253 15.804,6.649 15.293,6.757 14.703 C 6.780 14.572,6.800 14.019,6.800 13.473 L 6.800 12.480 5.750 12.483 C 5.001 12.486,4.634 12.503,4.471 12.542 M9.191 12.540 C 8.548 12.703,8.053 13.162,7.843 13.789 C 7.762 14.031,7.760 14.111,7.760 16.711 C 7.760 19.613,7.756 19.558,7.985 20.010 C 8.134 20.304,8.484 20.627,8.834 20.793 C 9.100 20.919,9.183 20.939,9.512 20.953 C 9.787 20.965,9.957 20.951,10.145 20.900 C 10.612 20.774,11.080 20.393,11.298 19.964 C 11.514 19.538,11.519 19.469,11.519 16.755 C 11.520 15.226,11.504 14.167,11.479 14.035 C 11.389 13.558,11.036 13.029,10.641 12.781 C 10.241 12.530,9.630 12.428,9.191 12.540 M13.880 12.553 C 12.529 12.906,12.027 14.592,12.967 15.620 C 13.215 15.891,13.457 16.051,13.794 16.168 L 14.060 16.260 16.760 16.260 L 19.460 16.260 19.697 16.170 C 21.269 15.572,21.459 13.542,20.020 12.717 C 19.618 12.486,19.533 12.480,16.712 12.482 C 14.425 12.484,14.111 12.492,13.880 12.553 M12.481 18.230 C 12.481 19.348,12.512 19.589,12.702 19.964 C 12.920 20.393,13.388 20.774,13.855 20.900 C 14.262 21.010,14.782 20.973,15.132 20.810 C 15.655 20.565,16.002 20.168,16.166 19.630 C 16.235 19.402,16.247 19.283,16.231 18.978 C 16.214 18.655,16.192 18.565,16.067 18.300 C 15.804 17.747,15.293 17.351,14.703 17.243 C 14.572 17.220,14.019 17.200,13.473 17.200 L 12.480 17.200 12.481 18.230 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.320 3.038 C 8.085 3.267,7.404 4.597,7.948 5.720 C 8.087 6.007,8.515 6.434,8.805 6.575 C 9.121 6.729,9.399 6.758,10.530 6.759 L 11.520 6.760 11.520 5.787 C 11.520 4.716,11.489 4.458,11.318 4.097 C 10.967 3.359,10.093 2.895,9.320 3.038 M13.980 3.054 C 13.285 3.231,12.799 3.685,12.558 4.385 C 12.484 4.602,12.480 4.734,12.480 7.260 C 12.480 9.786,12.484 9.918,12.558 10.135 C 12.765 10.737,13.143 11.152,13.667 11.351 C 14.058 11.500,14.359 11.538,14.686 11.479 C 15.287 11.371,15.788 10.985,16.067 10.413 L 16.220 10.100 16.220 7.260 L 16.220 4.420 16.109 4.182 C 15.864 3.659,15.445 3.267,14.978 3.122 C 14.644 3.019,14.228 2.990,13.980 3.054 M4.780 7.795 C 4.331 7.818,4.283 7.829,4.040 7.960 C 3.370 8.322,2.940 9.081,3.018 9.767 C 3.118 10.658,3.773 11.355,4.624 11.479 C 4.987 11.531,9.530 11.531,9.900 11.479 C 10.648 11.373,11.258 10.802,11.459 10.022 C 11.531 9.739,11.536 9.558,11.476 9.272 C 11.356 8.698,10.957 8.197,10.407 7.932 L 10.100 7.783 7.680 7.776 C 6.349 7.773,5.044 7.781,4.780 7.795 M18.654 7.802 C 18.109 7.909,17.552 8.418,17.318 9.020 C 17.231 9.246,17.225 9.325,17.209 10.390 L 17.192 11.520 18.146 11.519 C 18.671 11.519,19.226 11.501,19.380 11.479 C 19.982 11.394,20.514 10.993,20.786 10.421 C 20.907 10.165,20.933 10.062,20.950 9.769 C 20.985 9.152,20.805 8.687,20.371 8.275 C 19.926 7.851,19.290 7.676,18.654 7.802 M4.676 12.520 C 3.940 12.591,3.250 13.199,3.082 13.925 C 3.023 14.182,3.031 14.590,3.102 14.859 C 3.267 15.496,3.839 16.049,4.484 16.198 C 4.898 16.293,5.427 16.219,5.806 16.013 C 6.273 15.759,6.675 15.180,6.759 14.640 C 6.781 14.497,6.800 13.953,6.800 13.430 L 6.800 12.480 5.890 12.486 C 5.390 12.489,4.843 12.504,4.676 12.520 M9.360 12.525 C 9.090 12.556,8.846 12.650,8.570 12.831 C 8.286 13.016,8.098 13.240,7.925 13.600 L 7.780 13.900 7.768 16.480 C 7.762 17.940,7.773 19.196,7.795 19.373 C 7.847 19.809,8.009 20.125,8.339 20.433 C 8.484 20.569,8.716 20.733,8.869 20.807 C 9.130 20.935,9.158 20.940,9.620 20.940 C 10.092 20.940,10.105 20.937,10.412 20.791 C 11.026 20.498,11.405 19.975,11.480 19.320 C 11.532 18.871,11.530 14.463,11.478 14.103 C 11.383 13.440,10.898 12.840,10.279 12.619 C 10.045 12.535,9.635 12.493,9.360 12.525 M14.194 12.518 C 13.375 12.588,12.750 13.125,12.541 13.938 C 12.299 14.881,12.858 15.853,13.830 16.177 L 14.140 16.280 16.769 16.280 L 19.398 16.280 19.660 16.181 C 20.189 15.982,20.577 15.641,20.797 15.180 C 21.215 14.307,20.949 13.346,20.140 12.805 C 19.977 12.696,19.758 12.586,19.652 12.559 C 19.430 12.503,14.774 12.468,14.194 12.518 M12.481 18.150 C 12.481 18.672,12.500 19.226,12.522 19.380 C 12.610 19.993,13.000 20.511,13.579 20.786 C 13.961 20.967,14.422 21.010,14.839 20.903 C 15.654 20.694,16.236 19.945,16.239 19.098 C 16.242 18.389,15.834 17.739,15.183 17.418 C 14.824 17.240,14.495 17.202,13.330 17.201 L 12.480 17.200 12.481 18.150 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/sort-ascending.svg b/packages/icons/svg/sort-ascending.svg
index e8c45a28c0..3ecc2be420 100644
--- a/packages/icons/svg/sort-ascending.svg
+++ b/packages/icons/svg/sort-ascending.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.117 3.678 L 3.173 3.700 3.001 3.820 C 2.815 3.948,2.552 4.269,2.483 4.453 C 2.322 4.875,2.591 5.531,3.029 5.787 C 3.202 5.889,3.263 5.900,3.818 5.928 C 4.149 5.945,7.277 5.971,10.769 5.985 L 17.118 6.011 17.337 5.843 C 17.578 5.656,17.705 5.505,17.835 5.250 C 18.080 4.770,17.930 4.284,17.402 3.845 L 17.156 3.640 15.108 3.648 C 13.982 3.652,10.835 3.666,8.117 3.678 M4.040 8.556 C 3.482 8.571,3.058 8.600,2.998 8.627 C 2.856 8.690,2.648 8.936,2.551 9.156 C 2.331 9.656,2.569 10.360,3.039 10.600 C 3.299 10.732,3.760 10.762,5.860 10.785 C 8.276 10.811,9.813 10.766,10.070 10.661 C 10.295 10.569,10.576 10.252,10.662 9.993 C 10.815 9.535,10.652 8.975,10.285 8.695 L 10.108 8.560 9.364 8.560 C 8.955 8.560,7.801 8.553,6.800 8.545 C 5.799 8.537,4.557 8.542,4.040 8.556 M16.326 8.585 C 16.091 8.706,15.456 9.296,14.057 10.696 C 12.286 12.467,12.068 12.742,12.067 13.200 C 12.067 13.729,12.550 14.271,13.090 14.345 C 13.529 14.405,13.801 14.227,14.970 13.114 L 15.600 12.513 15.600 16.053 L 15.600 19.592 15.891 19.890 C 16.240 20.246,16.364 20.298,16.863 20.299 L 17.226 20.300 17.443 20.136 C 17.780 19.882,17.872 19.721,17.922 19.298 C 17.947 19.089,17.974 17.607,17.987 15.730 L 18.010 12.521 18.535 13.027 C 19.182 13.652,19.753 14.130,19.996 14.249 C 20.273 14.386,20.638 14.376,20.894 14.226 C 21.174 14.061,21.384 13.827,21.462 13.593 C 21.551 13.326,21.556 12.935,21.472 12.780 C 21.322 12.501,19.269 10.360,18.157 9.324 C 17.434 8.649,17.273 8.555,16.805 8.533 C 16.533 8.520,16.431 8.531,16.326 8.585 M3.175 13.389 C 2.822 13.421,2.469 13.925,2.465 14.399 C 2.463 14.803,2.733 15.243,3.092 15.417 C 3.266 15.501,3.394 15.524,3.880 15.558 C 4.579 15.608,6.567 15.610,7.785 15.562 C 8.774 15.524,8.889 15.496,9.193 15.222 C 9.429 15.008,9.520 14.794,9.520 14.452 C 9.520 13.997,9.366 13.680,9.039 13.464 L 8.882 13.360 6.111 13.367 C 4.587 13.371,3.266 13.381,3.175 13.389 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.259 3.678 L 3.178 3.700 3.012 3.822 C 2.797 3.980,2.532 4.302,2.475 4.474 C 2.367 4.802,2.536 5.341,2.841 5.636 C 3.148 5.934,3.035 5.924,6.540 5.961 C 8.256 5.980,11.343 5.996,13.400 5.997 L 17.140 5.999 17.367 5.819 C 17.791 5.482,18.012 5.007,17.924 4.622 C 17.865 4.361,17.651 4.052,17.372 3.822 L 17.151 3.640 15.245 3.648 C 14.197 3.652,11.053 3.666,8.259 3.678 M16.340 8.592 C 16.095 8.708,15.503 9.254,14.060 10.699 C 12.740 12.019,12.292 12.519,12.155 12.820 C 11.915 13.347,12.262 14.049,12.878 14.283 C 13.424 14.490,13.631 14.372,15.010 13.071 L 15.600 12.514 15.600 16.048 L 15.600 19.582 15.890 19.867 C 16.050 20.024,16.239 20.181,16.310 20.217 C 16.386 20.255,16.594 20.292,16.811 20.306 L 17.181 20.331 17.440 20.132 C 17.760 19.886,17.869 19.689,17.920 19.259 C 17.941 19.083,17.970 17.505,17.986 15.750 C 18.001 13.995,18.021 12.560,18.031 12.560 C 18.040 12.560,18.266 12.769,18.532 13.024 C 19.046 13.516,19.630 14.019,19.875 14.181 C 20.262 14.437,20.747 14.388,21.117 14.055 C 21.409 13.793,21.491 13.615,21.511 13.200 C 21.531 12.795,21.538 12.807,20.860 12.065 C 19.554 10.634,17.751 8.891,17.365 8.686 C 17.059 8.524,16.579 8.480,16.340 8.592 M3.278 8.596 C 2.973 8.624,2.849 8.694,2.688 8.929 C 2.519 9.177,2.467 9.371,2.489 9.676 C 2.519 10.097,2.767 10.490,3.080 10.615 C 3.366 10.730,3.909 10.761,6.020 10.786 C 8.112 10.811,9.688 10.768,10.014 10.677 C 10.198 10.626,10.478 10.358,10.602 10.117 C 10.726 9.872,10.747 9.543,10.657 9.255 C 10.601 9.076,10.530 8.965,10.360 8.790 L 10.136 8.560 6.838 8.566 C 5.024 8.570,3.422 8.583,3.278 8.596 M3.660 13.398 C 2.948 13.422,2.893 13.441,2.706 13.712 C 2.454 14.076,2.406 14.499,2.574 14.861 C 2.689 15.107,3.013 15.407,3.236 15.474 C 3.511 15.556,4.355 15.598,5.760 15.598 C 7.426 15.597,8.538 15.547,8.801 15.460 C 9.066 15.372,9.329 15.130,9.440 14.872 C 9.516 14.693,9.527 14.615,9.509 14.353 C 9.482 13.965,9.346 13.696,9.077 13.498 L 8.889 13.360 6.595 13.368 C 5.333 13.372,4.012 13.386,3.660 13.398 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/sort-descending.svg b/packages/icons/svg/sort-descending.svg
index 7155dfed36..bffc004f07 100644
--- a/packages/icons/svg/sort-descending.svg
+++ b/packages/icons/svg/sort-descending.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.117 3.678 L 3.173 3.700 3.001 3.820 C 2.815 3.948,2.552 4.269,2.483 4.453 C 2.322 4.875,2.591 5.531,3.029 5.787 C 3.202 5.889,3.263 5.900,3.818 5.928 C 4.149 5.945,7.277 5.971,10.769 5.985 L 17.118 6.011 17.337 5.843 C 17.578 5.656,17.705 5.505,17.835 5.250 C 18.080 4.770,17.930 4.284,17.402 3.845 L 17.156 3.640 15.108 3.648 C 13.982 3.652,10.835 3.666,8.117 3.678 M6.460 8.484 C 4.854 8.501,3.446 8.527,3.330 8.541 C 3.074 8.571,2.800 8.747,2.624 8.994 C 2.505 9.161,2.500 9.184,2.500 9.574 C 2.500 9.924,2.512 10.000,2.589 10.123 C 2.700 10.301,3.083 10.668,3.208 10.715 C 3.354 10.770,7.349 10.803,9.960 10.770 C 12.331 10.740,12.341 10.740,12.484 10.650 C 12.685 10.526,12.982 10.199,13.063 10.014 C 13.102 9.926,13.132 9.749,13.134 9.600 C 13.138 9.261,13.018 9.026,12.668 8.690 L 12.407 8.440 10.893 8.447 C 10.061 8.450,8.066 8.467,6.460 8.484 M16.368 8.562 C 16.166 8.643,15.916 8.852,15.816 9.024 C 15.659 9.291,15.644 9.598,15.615 13.148 L 15.588 16.275 14.984 15.702 C 14.298 15.051,14.078 14.858,13.809 14.671 C 13.639 14.553,13.587 14.539,13.283 14.526 C 12.858 14.507,12.697 14.556,12.449 14.779 C 12.188 15.014,12.079 15.267,12.075 15.644 C 12.073 15.909,12.083 15.944,12.220 16.143 C 12.437 16.457,13.376 17.453,14.423 18.477 C 16.022 20.041,16.415 20.360,16.741 20.360 C 16.986 20.360,17.258 20.244,17.540 20.019 C 17.961 19.684,19.259 18.420,20.289 17.344 C 21.551 16.026,21.497 16.098,21.514 15.711 C 21.540 15.147,21.400 14.878,20.959 14.643 C 20.721 14.516,20.697 14.511,20.345 14.527 C 20.007 14.542,19.964 14.553,19.781 14.679 C 19.520 14.859,19.051 15.273,18.470 15.836 L 18.000 16.291 18.000 12.775 L 18.000 9.259 17.822 9.043 C 17.622 8.798,17.379 8.620,17.165 8.561 C 16.986 8.511,16.493 8.512,16.368 8.562 M3.175 13.389 C 2.822 13.421,2.469 13.925,2.465 14.399 C 2.463 14.803,2.733 15.243,3.092 15.417 C 3.266 15.501,3.394 15.524,3.880 15.558 C 4.579 15.608,6.567 15.610,7.785 15.562 C 8.774 15.524,8.889 15.496,9.193 15.222 C 9.429 15.008,9.520 14.794,9.520 14.452 C 9.520 13.997,9.366 13.680,9.039 13.464 L 8.882 13.360 6.111 13.367 C 4.587 13.371,3.266 13.381,3.175 13.389 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.259 3.678 L 3.178 3.700 3.012 3.822 C 2.797 3.980,2.532 4.302,2.475 4.474 C 2.367 4.802,2.536 5.341,2.841 5.636 C 3.148 5.934,3.035 5.924,6.540 5.961 C 8.256 5.980,11.343 5.996,13.400 5.997 L 17.140 5.999 17.367 5.819 C 17.791 5.482,18.012 5.007,17.924 4.622 C 17.865 4.361,17.651 4.052,17.372 3.822 L 17.151 3.640 15.245 3.648 C 14.197 3.652,11.053 3.666,8.259 3.678 M6.780 8.483 C 5.218 8.499,3.776 8.522,3.575 8.533 C 3.096 8.559,2.835 8.690,2.610 9.014 C 2.507 9.163,2.500 9.201,2.500 9.581 C 2.501 9.966,2.507 9.997,2.619 10.158 C 2.684 10.252,2.833 10.414,2.950 10.519 C 3.144 10.691,3.188 10.712,3.412 10.733 C 4.381 10.828,12.158 10.788,12.408 10.687 C 12.556 10.627,12.822 10.381,12.970 10.166 C 13.072 10.017,13.096 9.938,13.112 9.693 C 13.138 9.287,13.061 9.105,12.709 8.734 L 12.430 8.440 11.025 8.447 C 10.252 8.450,8.342 8.467,6.780 8.483 M16.366 8.563 C 16.293 8.586,16.128 8.707,16.001 8.832 C 15.803 9.026,15.762 9.093,15.721 9.280 C 15.660 9.562,15.604 11.941,15.602 14.370 C 15.601 15.399,15.589 16.240,15.575 16.240 C 15.561 16.240,15.287 15.991,14.965 15.687 C 14.286 15.046,13.897 14.713,13.712 14.613 C 13.613 14.560,13.485 14.542,13.200 14.541 C 12.856 14.540,12.802 14.551,12.633 14.650 C 12.246 14.877,12.060 15.242,12.087 15.718 C 12.101 15.967,12.117 16.008,12.277 16.216 C 12.579 16.608,13.628 17.704,14.623 18.667 C 16.065 20.064,16.437 20.360,16.752 20.360 C 16.942 20.360,17.258 20.226,17.501 20.043 C 18.067 19.615,21.072 16.605,21.388 16.148 C 21.492 15.998,21.500 15.958,21.500 15.600 C 21.500 15.240,21.492 15.201,21.380 15.022 C 21.300 14.895,21.181 14.783,21.023 14.686 C 20.792 14.544,20.776 14.540,20.403 14.543 C 20.125 14.545,19.984 14.564,19.891 14.613 C 19.701 14.713,19.256 15.094,18.590 15.726 L 18.000 16.286 18.000 12.765 L 18.000 9.245 17.774 9.000 C 17.439 8.639,17.279 8.559,16.852 8.538 C 16.659 8.529,16.440 8.540,16.366 8.563 M3.660 13.398 C 2.948 13.422,2.893 13.441,2.706 13.712 C 2.454 14.076,2.406 14.499,2.574 14.861 C 2.689 15.107,3.013 15.407,3.236 15.474 C 3.511 15.556,4.355 15.598,5.760 15.598 C 7.426 15.597,8.538 15.547,8.801 15.460 C 9.066 15.372,9.329 15.130,9.440 14.872 C 9.516 14.693,9.527 14.615,9.509 14.353 C 9.482 13.965,9.346 13.696,9.077 13.498 L 8.889 13.360 6.595 13.368 C 5.333 13.372,4.012 13.386,3.660 13.398 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/sparkles.svg b/packages/icons/svg/sparkles.svg
index 8e49846149..43e7fe2655 100644
--- a/packages/icons/svg/sparkles.svg
+++ b/packages/icons/svg/sparkles.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.995 2.533 C 13.678 2.652,13.466 2.885,13.314 3.285 C 13.218 3.539,12.634 5.577,12.141 7.384 L 11.790 8.667 11.225 8.998 C 9.677 9.903,8.030 10.905,7.783 11.091 C 7.436 11.353,7.377 11.435,7.295 11.767 C 7.198 12.164,7.240 12.360,7.472 12.609 C 7.796 12.955,8.271 13.272,10.340 14.519 C 10.934 14.877,11.479 15.214,11.551 15.267 C 11.801 15.455,11.850 15.593,12.561 18.140 C 13.104 20.086,13.368 20.904,13.522 21.116 C 13.585 21.203,13.714 21.320,13.808 21.375 C 14.022 21.500,14.456 21.575,14.680 21.525 C 14.912 21.472,15.240 21.210,15.369 20.973 C 15.478 20.774,15.935 19.228,16.581 16.880 C 16.772 16.187,16.951 15.564,16.980 15.495 C 17.024 15.388,17.269 15.227,18.586 14.438 C 20.797 13.113,21.306 12.770,21.442 12.516 C 21.517 12.376,21.557 11.912,21.513 11.703 C 21.459 11.444,21.299 11.286,20.668 10.869 C 20.218 10.571,18.581 9.581,17.515 8.962 L 17.011 8.669 16.660 7.385 C 15.915 4.658,15.513 3.305,15.354 2.990 C 15.181 2.647,14.395 2.383,13.995 2.533 M5.335 2.675 C 5.228 2.761,5.081 2.913,5.009 3.013 C 4.893 3.175,4.874 3.240,4.840 3.588 C 4.819 3.803,4.802 4.162,4.801 4.385 L 4.800 4.790 4.370 4.818 C 3.259 4.888,3.038 4.952,2.740 5.293 C 2.429 5.648,2.363 6.054,2.553 6.444 C 2.831 7.019,3.264 7.200,4.357 7.200 L 4.789 7.200 4.811 7.830 C 4.840 8.665,4.916 8.925,5.222 9.223 C 5.477 9.473,5.641 9.536,6.040 9.537 C 6.297 9.539,6.368 9.523,6.527 9.430 C 7.012 9.146,7.197 8.645,7.199 7.616 L 7.200 7.212 7.790 7.189 C 8.660 7.156,8.991 7.064,9.221 6.792 C 9.384 6.600,9.522 6.272,9.548 6.020 C 9.568 5.828,9.555 5.768,9.444 5.542 C 9.187 5.021,8.900 4.908,7.590 4.817 L 7.200 4.790 7.200 4.345 C 7.199 3.338,7.096 3.002,6.707 2.735 C 6.456 2.562,6.294 2.520,5.875 2.520 C 5.535 2.520,5.528 2.522,5.335 2.675 M5.335 14.675 C 5.228 14.761,5.081 14.913,5.009 15.013 C 4.893 15.175,4.874 15.240,4.840 15.588 C 4.819 15.803,4.802 16.162,4.801 16.385 L 4.800 16.790 4.370 16.818 C 3.259 16.888,3.038 16.952,2.740 17.293 C 2.429 17.648,2.363 18.054,2.553 18.444 C 2.831 19.019,3.264 19.200,4.357 19.200 L 4.787 19.200 4.812 19.918 C 4.841 20.739,4.863 20.820,5.146 21.123 C 5.411 21.406,5.616 21.517,5.928 21.546 C 6.138 21.566,6.220 21.555,6.375 21.486 C 6.578 21.396,6.959 21.035,7.063 20.834 C 7.138 20.690,7.197 20.144,7.199 19.596 L 7.200 19.211 7.830 19.189 C 8.826 19.155,9.151 19.011,9.406 18.493 C 9.585 18.130,9.589 17.798,9.419 17.486 C 9.163 17.015,8.864 16.906,7.590 16.817 L 7.200 16.790 7.200 16.345 C 7.199 15.338,7.096 15.002,6.707 14.735 C 6.456 14.562,6.294 14.520,5.875 14.520 C 5.535 14.520,5.528 14.522,5.335 14.675 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.046 2.525 C 13.719 2.621,13.443 2.915,13.299 3.322 C 13.213 3.565,12.435 6.298,12.080 7.604 L 11.791 8.669 11.525 8.823 C 10.890 9.191,8.763 10.466,8.351 10.725 C 7.485 11.269,7.376 11.386,7.276 11.869 C 7.144 12.505,7.446 12.772,10.140 14.401 C 11.549 15.252,11.664 15.331,11.754 15.511 C 11.872 15.747,12.042 16.296,12.576 18.180 C 13.318 20.795,13.439 21.117,13.751 21.334 C 13.932 21.459,14.432 21.577,14.616 21.537 C 14.817 21.494,15.009 21.378,15.189 21.192 C 15.322 21.056,15.386 20.939,15.481 20.659 C 15.677 20.079,15.966 19.091,16.458 17.320 C 16.712 16.407,16.946 15.603,16.978 15.533 C 17.051 15.373,17.177 15.289,18.880 14.260 C 20.998 12.981,21.399 12.695,21.479 12.405 C 21.501 12.325,21.520 12.125,21.520 11.960 C 21.520 11.488,21.427 11.375,20.580 10.820 C 20.191 10.565,17.990 9.234,17.275 8.822 L 17.009 8.669 16.720 7.604 C 16.252 5.887,15.813 4.347,15.593 3.660 C 15.406 3.074,15.375 3.006,15.218 2.854 C 14.946 2.590,14.373 2.429,14.046 2.525 M5.451 2.599 C 5.289 2.698,5.011 2.982,4.938 3.124 C 4.863 3.268,4.801 3.837,4.800 4.370 L 4.800 4.800 4.690 4.801 C 4.449 4.802,3.607 4.882,3.400 4.923 C 3.015 5.000,2.735 5.218,2.545 5.589 C 2.381 5.910,2.439 6.326,2.696 6.680 C 2.956 7.038,3.451 7.196,4.324 7.199 L 4.788 7.200 4.812 7.810 C 4.846 8.689,4.948 8.993,5.306 9.295 C 5.507 9.463,5.705 9.527,6.042 9.531 C 6.306 9.533,6.375 9.519,6.530 9.428 C 6.999 9.153,7.196 8.631,7.199 7.650 L 7.200 7.200 7.542 7.200 C 8.033 7.200,8.619 7.127,8.865 7.035 C 9.120 6.939,9.325 6.719,9.437 6.420 C 9.609 5.958,9.596 5.770,9.363 5.410 C 9.240 5.220,9.164 5.148,8.994 5.065 C 8.764 4.953,8.267 4.866,7.590 4.819 L 7.200 4.793 7.200 4.306 C 7.199 3.390,7.075 2.996,6.709 2.746 C 6.466 2.580,6.249 2.522,5.860 2.521 C 5.651 2.521,5.547 2.540,5.451 2.599 M5.451 14.599 C 5.289 14.698,5.011 14.982,4.938 15.124 C 4.863 15.268,4.801 15.837,4.800 16.370 L 4.800 16.800 4.690 16.801 C 4.449 16.802,3.607 16.882,3.400 16.923 C 3.015 17.000,2.735 17.218,2.545 17.589 C 2.381 17.910,2.439 18.326,2.696 18.680 C 2.956 19.038,3.451 19.196,4.324 19.199 L 4.788 19.200 4.810 19.850 C 4.840 20.725,4.872 20.839,5.177 21.142 C 5.463 21.426,5.627 21.511,5.953 21.546 C 6.272 21.579,6.465 21.484,6.809 21.129 C 7.126 20.800,7.157 20.693,7.189 19.816 L 7.211 19.212 7.816 19.187 C 8.742 19.150,9.069 19.031,9.318 18.643 C 9.384 18.540,9.468 18.340,9.505 18.198 C 9.567 17.959,9.568 17.924,9.508 17.720 C 9.417 17.411,9.238 17.184,8.988 17.062 C 8.765 16.953,8.260 16.865,7.590 16.819 L 7.200 16.793 7.200 16.306 C 7.199 15.390,7.075 14.996,6.709 14.746 C 6.466 14.580,6.249 14.522,5.860 14.521 C 5.651 14.521,5.547 14.540,5.451 14.599 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/speakerphone.svg b/packages/icons/svg/speakerphone.svg
index 709f747d64..3ff6759319 100644
--- a/packages/icons/svg/speakerphone.svg
+++ b/packages/icons/svg/speakerphone.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.780 2.624 C 19.560 2.725,17.398 3.794,14.975 4.998 L 10.571 7.188 8.475 7.236 C 6.311 7.285,5.420 7.328,5.040 7.404 C 4.357 7.539,3.454 8.226,2.937 9.005 C 2.551 9.585,2.478 9.870,2.451 10.887 L 2.430 11.674 2.640 12.067 C 2.933 12.617,3.211 13.007,3.560 13.361 C 4.145 13.954,4.789 14.218,6.150 14.424 C 6.240 14.438,6.297 14.477,6.334 14.552 C 6.389 14.661,6.736 15.647,7.660 18.317 C 8.291 20.140,8.508 20.739,8.607 20.934 C 8.732 21.178,8.983 21.423,9.211 21.521 C 9.411 21.607,9.453 21.610,10.180 21.588 C 10.676 21.573,11.007 21.544,11.132 21.506 C 11.365 21.434,11.610 21.239,11.827 20.954 L 11.990 20.740 12.035 18.043 C 12.060 16.560,12.088 15.339,12.098 15.328 C 12.139 15.288,13.114 15.750,16.640 17.480 C 19.903 19.082,20.106 19.176,20.320 19.173 C 20.574 19.170,20.922 19.025,21.180 18.815 C 21.533 18.527,21.532 18.532,21.565 17.340 C 21.641 14.548,21.573 3.715,21.476 3.244 C 21.411 2.928,21.151 2.676,20.775 2.565 C 20.274 2.416,20.226 2.419,19.780 2.624 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.560 2.735 C 19.263 2.875,17.118 3.934,14.794 5.089 L 10.569 7.189 8.634 7.236 C 6.584 7.286,5.397 7.341,5.063 7.402 C 4.761 7.457,4.183 7.760,3.815 8.057 C 3.136 8.602,2.650 9.315,2.517 9.959 C 2.496 10.059,2.468 10.484,2.454 10.905 L 2.428 11.670 2.614 12.020 C 3.406 13.507,4.164 14.068,5.779 14.361 C 6.060 14.412,6.243 14.466,6.286 14.510 C 6.360 14.586,6.487 14.935,7.460 17.740 C 8.609 21.051,8.582 20.984,8.864 21.266 C 9.146 21.548,9.297 21.598,9.860 21.598 C 10.501 21.598,11.091 21.537,11.250 21.455 C 11.470 21.342,11.639 21.195,11.819 20.962 L 11.991 20.738 12.039 18.059 C 12.066 16.586,12.099 15.368,12.114 15.353 C 12.162 15.302,12.987 15.691,16.840 17.580 C 20.111 19.184,20.007 19.138,20.340 19.139 C 20.655 19.140,20.913 19.034,21.235 18.770 C 21.506 18.547,21.523 18.476,21.568 17.322 C 21.613 16.190,21.579 5.838,21.525 4.216 C 21.496 3.329,21.486 3.238,21.401 3.063 C 21.287 2.828,21.070 2.665,20.729 2.560 C 20.301 2.427,20.172 2.447,19.560 2.735 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/spotify.svg b/packages/icons/svg/spotify.svg
index 66b716b1d7..b753b83adf 100644
--- a/packages/icons/svg/spotify.svg
+++ b/packages/icons/svg/spotify.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.026 3.160,9.091 3.415,8.060 3.918 C 5.287 5.272,3.420 7.913,3.059 10.992 C 2.666 14.352,4.239 17.669,7.120 19.560 C 7.929 20.090,9.126 20.589,10.092 20.797 C 14.142 21.669,18.255 19.669,20.083 15.940 C 21.302 13.453,21.302 10.547,20.083 8.060 C 19.190 6.237,17.762 4.810,15.944 3.923 C 15.066 3.494,14.269 3.244,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 M11.660 8.041 C 13.807 8.176,15.624 8.634,17.173 9.430 C 17.726 9.714,17.890 9.860,17.964 10.137 C 18.095 10.619,17.724 11.130,17.239 11.137 C 17.085 11.140,16.948 11.087,16.437 10.832 C 15.310 10.270,14.297 9.964,12.900 9.763 C 11.965 9.628,11.254 9.589,10.200 9.613 C 8.981 9.642,8.229 9.737,7.286 9.983 C 7.081 10.036,6.847 10.080,6.766 10.079 C 6.276 10.076,5.895 9.550,6.037 9.074 C 6.063 8.986,6.149 8.844,6.227 8.757 C 6.344 8.629,6.430 8.581,6.700 8.499 C 7.985 8.107,9.902 7.930,11.660 8.041 M12.301 11.072 C 13.011 11.183,13.672 11.335,14.259 11.523 C 15.398 11.887,16.563 12.470,16.735 12.761 C 16.879 13.006,16.815 13.381,16.594 13.587 C 16.373 13.793,16.102 13.811,15.796 13.640 C 15.677 13.574,15.439 13.447,15.266 13.358 C 13.157 12.266,10.245 11.962,7.780 12.578 C 7.211 12.720,7.069 12.721,6.857 12.582 C 6.492 12.342,6.524 11.680,6.911 11.486 C 7.213 11.334,8.331 11.090,9.120 11.003 C 9.307 10.983,9.982 10.972,10.620 10.979 C 11.540 10.989,11.888 11.008,12.301 11.072 M11.800 13.765 C 13.012 13.896,14.352 14.328,15.304 14.895 C 15.670 15.113,15.760 15.232,15.760 15.497 C 15.760 15.649,15.737 15.706,15.629 15.825 C 15.437 16.033,15.218 16.051,14.920 15.882 C 14.199 15.473,13.493 15.191,12.704 14.998 C 11.354 14.667,9.623 14.683,7.846 15.043 C 7.388 15.136,7.303 15.128,7.124 14.977 C 6.870 14.763,6.881 14.356,7.147 14.178 C 7.368 14.029,8.705 13.791,9.718 13.721 C 10.278 13.682,11.222 13.702,11.800 13.765 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.078 3.060 C 9.848 3.209,8.988 3.464,7.940 3.990 C 7.026 4.450,6.304 4.981,5.557 5.746 C 3.305 8.050,2.464 11.369,3.348 14.460 C 4.062 16.957,5.924 19.127,8.246 20.166 C 9.610 20.777,10.903 21.039,12.300 20.988 C 16.060 20.851,19.315 18.422,20.516 14.858 C 21.158 12.953,21.159 11.050,20.521 9.160 C 20.065 7.807,19.417 6.743,18.443 5.746 C 17.703 4.988,17.012 4.478,16.080 4.002 C 14.842 3.370,13.865 3.114,12.395 3.040 C 11.507 2.995,11.624 2.994,11.078 3.060 M12.340 8.104 C 14.089 8.277,15.519 8.651,16.892 9.293 C 17.480 9.568,17.810 9.801,17.903 10.007 C 18.109 10.465,17.849 11.006,17.371 11.113 C 17.170 11.158,16.902 11.074,16.340 10.791 C 14.597 9.913,12.245 9.501,9.740 9.637 C 8.747 9.690,8.270 9.755,7.460 9.945 C 7.076 10.036,6.800 10.080,6.693 10.068 C 6.314 10.028,6.021 9.685,6.021 9.281 C 6.021 9.102,6.044 9.026,6.142 8.881 C 6.304 8.639,6.489 8.545,7.080 8.402 C 7.908 8.203,8.815 8.082,9.920 8.024 C 10.389 7.999,11.728 8.043,12.340 8.104 M12.660 11.135 C 12.968 11.195,13.398 11.289,13.616 11.344 C 14.775 11.638,16.151 12.234,16.613 12.643 C 16.761 12.774,16.775 12.804,16.789 13.023 C 16.801 13.215,16.786 13.289,16.712 13.416 C 16.589 13.625,16.446 13.725,16.232 13.749 C 16.073 13.767,16.003 13.742,15.554 13.508 C 14.391 12.903,13.404 12.584,12.040 12.373 C 11.680 12.317,11.331 12.301,10.440 12.301 C 9.197 12.300,8.863 12.334,7.862 12.562 C 7.251 12.701,7.067 12.708,6.888 12.599 C 6.658 12.459,6.541 12.082,6.643 11.813 C 6.750 11.529,7.014 11.399,7.847 11.220 C 8.804 11.013,8.935 11.003,10.560 11.015 C 12.048 11.026,12.119 11.030,12.660 11.135 M11.852 13.780 C 13.045 13.919,14.403 14.356,15.260 14.875 C 15.615 15.090,15.760 15.263,15.760 15.468 C 15.760 15.737,15.523 15.999,15.280 16.000 C 15.225 16.000,14.883 15.857,14.520 15.681 C 13.106 14.998,12.194 14.790,10.580 14.785 C 9.580 14.782,9.145 14.820,8.090 15.002 C 7.305 15.138,7.194 15.124,7.041 14.872 C 6.882 14.611,6.956 14.284,7.204 14.158 C 7.430 14.043,8.499 13.843,9.400 13.748 C 9.807 13.705,11.385 13.725,11.852 13.780 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/star.svg b/packages/icons/svg/star.svg
index d50cccb583..15b1d47523 100644
--- a/packages/icons/svg/star.svg
+++ b/packages/icons/svg/star.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.660 3.996 C 11.157 4.124,11.037 4.334,10.354 6.300 C 9.730 8.092,9.352 9.013,9.150 9.230 C 8.976 9.416,8.605 9.453,6.040 9.540 C 5.039 9.574,4.130 9.613,4.020 9.626 C 3.768 9.657,3.657 9.714,3.474 9.907 C 3.267 10.124,3.153 10.377,3.129 10.665 C 3.089 11.166,3.250 11.335,5.193 12.847 C 6.919 14.188,7.117 14.364,7.294 14.708 C 7.433 14.979,7.389 15.183,6.680 17.543 C 6.271 18.903,6.080 19.622,6.080 19.803 C 6.080 19.859,6.108 20.001,6.143 20.118 C 6.307 20.669,7.009 21.043,7.546 20.865 C 7.654 20.829,8.108 20.550,8.561 20.242 C 10.566 18.879,11.352 18.358,11.520 18.285 C 11.627 18.238,11.846 18.195,12.060 18.179 L 12.420 18.151 13.600 18.984 C 16.009 20.683,16.398 20.920,16.783 20.920 C 17.228 20.920,17.735 20.534,17.862 20.101 C 17.969 19.730,17.955 19.666,17.259 17.352 C 16.725 15.580,16.607 15.066,16.676 14.812 C 16.775 14.449,17.089 14.159,18.866 12.791 C 19.457 12.336,20.105 11.820,20.306 11.644 C 20.917 11.111,21.015 10.754,20.712 10.164 C 20.563 9.874,20.362 9.691,20.135 9.637 C 19.901 9.582,18.606 9.528,16.789 9.498 L 15.159 9.470 14.994 9.340 C 14.675 9.088,14.529 8.785,13.996 7.280 C 13.820 6.785,13.556 6.039,13.408 5.623 C 13.073 4.675,12.905 4.330,12.723 4.209 C 12.477 4.046,11.910 3.933,11.660 3.996 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.432 4.082 C 11.102 4.256,10.990 4.494,10.238 6.620 C 9.695 8.156,9.383 8.911,9.177 9.185 C 9.008 9.411,8.708 9.446,6.160 9.538 C 3.672 9.628,3.729 9.619,3.454 9.935 C 3.269 10.148,3.169 10.371,3.136 10.647 C 3.084 11.095,3.287 11.336,4.596 12.373 C 5.045 12.729,5.720 13.264,6.096 13.562 C 7.209 14.444,7.395 14.674,7.341 15.108 C 7.306 15.384,7.146 15.975,6.680 17.540 C 6.274 18.906,6.080 19.636,6.080 19.795 C 6.080 20.371,6.627 20.890,7.240 20.897 C 7.576 20.901,7.553 20.914,9.659 19.503 C 10.584 18.883,11.405 18.346,11.485 18.309 C 11.629 18.241,12.068 18.162,12.304 18.161 C 12.402 18.160,12.668 18.329,13.544 18.947 C 15.050 20.009,15.953 20.612,16.273 20.769 C 16.493 20.877,16.584 20.900,16.799 20.898 C 17.192 20.896,17.550 20.675,17.761 20.305 C 18.001 19.885,17.989 19.806,17.373 17.740 C 16.790 15.784,16.668 15.290,16.687 14.962 C 16.712 14.508,16.870 14.348,18.705 12.916 C 19.280 12.467,19.920 11.960,20.127 11.790 C 20.657 11.353,20.880 11.035,20.880 10.713 C 20.880 10.541,20.743 10.186,20.601 9.987 C 20.403 9.712,20.240 9.642,19.691 9.598 C 19.226 9.562,16.425 9.481,15.588 9.480 L 15.157 9.480 14.960 9.296 C 14.613 8.972,14.537 8.801,13.742 6.560 C 13.122 4.813,12.909 4.329,12.711 4.208 C 12.367 3.997,11.714 3.933,11.432 4.082 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/status-offline.svg b/packages/icons/svg/status-offline.svg
index 355149ee77..320543eae2 100644
--- a/packages/icons/svg/status-offline.svg
+++ b/packages/icons/svg/status-offline.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.049 2.602 C 2.673 2.794,2.406 3.264,2.457 3.646 C 2.519 4.114,2.470 4.058,5.436 7.090 C 7.341 9.038,17.899 19.539,19.250 20.829 C 19.601 21.165,19.914 21.429,20.025 21.482 C 20.197 21.566,20.233 21.569,20.493 21.529 C 21.074 21.439,21.419 21.145,21.523 20.650 C 21.621 20.184,21.490 19.893,20.851 19.151 L 20.481 18.721 20.736 18.331 C 21.764 16.756,22.440 15.054,22.686 13.419 C 22.753 12.979,22.753 11.207,22.687 10.680 C 22.543 9.524,22.077 8.040,21.533 7.000 C 20.947 5.878,19.856 4.522,19.302 4.227 C 19.167 4.155,19.073 4.141,18.740 4.140 C 18.348 4.140,18.336 4.143,18.149 4.278 C 17.910 4.450,17.738 4.705,17.677 4.979 C 17.597 5.335,17.649 5.510,17.975 5.992 C 18.135 6.228,18.475 6.729,18.731 7.107 C 19.265 7.897,19.730 8.796,19.942 9.451 C 20.171 10.159,20.246 10.688,20.270 11.746 C 20.309 13.532,20.143 14.325,19.437 15.720 C 19.143 16.302,18.762 16.960,18.720 16.960 C 18.706 16.960,18.320 16.596,17.863 16.150 L 17.032 15.340 17.236 14.907 C 17.679 13.963,17.847 13.383,17.923 12.540 C 18.002 11.663,17.932 10.952,17.698 10.246 C 17.554 9.812,17.156 9.004,16.893 8.608 C 16.614 8.188,16.160 7.725,15.909 7.604 C 15.642 7.475,15.133 7.468,14.897 7.590 C 14.603 7.742,14.284 8.182,14.221 8.522 C 14.185 8.720,14.269 8.922,14.660 9.581 C 15.134 10.379,15.389 10.923,15.439 11.240 C 15.531 11.830,15.465 12.908,15.314 13.273 L 15.260 13.407 15.100 13.281 C 15.012 13.211,13.482 11.720,11.700 9.967 C 4.716 3.096,4.353 2.744,4.100 2.609 C 4.022 2.567,3.848 2.539,3.600 2.530 C 3.271 2.517,3.197 2.527,3.049 2.602 M2.327 8.438 C 1.886 8.547,1.479 9.357,1.341 10.400 C 1.251 11.084,1.216 12.506,1.277 13.040 C 1.552 15.467,2.712 17.965,4.227 19.399 C 4.660 19.810,4.840 19.900,5.220 19.895 C 5.547 19.891,5.734 19.819,5.964 19.612 C 6.224 19.377,6.298 19.197,6.299 18.800 C 6.300 18.378,6.286 18.348,5.602 17.383 C 4.980 16.506,4.693 16.039,4.419 15.460 C 4.078 14.740,3.877 14.071,3.778 13.321 C 3.713 12.838,3.704 11.174,3.762 10.640 C 3.783 10.453,3.810 10.048,3.824 9.740 C 3.847 9.200,3.844 9.173,3.751 9.000 C 3.642 8.798,3.310 8.541,3.082 8.483 C 2.856 8.425,2.472 8.402,2.327 8.438 M7.329 13.386 C 6.763 13.666,6.556 14.426,6.881 15.035 C 7.183 15.603,7.972 16.392,8.367 16.522 C 8.688 16.628,9.234 16.401,9.516 16.044 C 9.794 15.694,9.827 15.357,9.626 14.939 C 9.354 14.376,8.484 13.403,8.202 13.346 C 7.953 13.297,7.466 13.319,7.329 13.386 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.040 2.627 C 2.533 2.888,2.314 3.516,2.561 4.000 C 2.600 4.077,2.748 4.275,2.889 4.440 C 3.419 5.058,6.316 7.988,11.743 13.396 C 17.675 19.306,19.476 21.074,19.858 21.362 C 20.081 21.530,20.108 21.540,20.337 21.535 C 20.910 21.523,21.367 21.198,21.499 20.709 C 21.638 20.194,21.498 19.887,20.713 18.995 L 20.480 18.729 20.820 18.195 C 21.657 16.881,22.282 15.390,22.582 13.989 C 22.768 13.125,22.788 11.102,22.621 10.240 C 22.378 8.993,21.906 7.643,21.413 6.781 C 20.824 5.754,19.947 4.665,19.431 4.321 L 19.191 4.160 18.773 4.160 C 18.286 4.160,18.209 4.190,17.953 4.475 C 17.659 4.801,17.568 5.217,17.718 5.548 C 17.760 5.640,18.099 6.174,18.472 6.733 C 19.466 8.224,19.930 9.187,20.123 10.160 C 20.244 10.766,20.303 12.074,20.246 12.872 C 20.169 13.966,20.000 14.574,19.486 15.605 C 19.180 16.221,18.762 16.960,18.721 16.960 C 18.710 16.960,18.325 16.595,17.867 16.150 L 17.035 15.340 17.275 14.814 C 17.406 14.525,17.568 14.128,17.634 13.931 C 18.042 12.712,18.059 11.320,17.679 10.200 C 17.560 9.850,17.124 8.961,16.912 8.640 C 16.657 8.252,16.149 7.740,15.896 7.616 C 15.705 7.523,15.646 7.513,15.325 7.526 C 15.003 7.539,14.949 7.552,14.793 7.661 C 14.593 7.800,14.301 8.212,14.239 8.442 C 14.182 8.655,14.230 8.813,14.492 9.280 C 14.609 9.489,14.800 9.831,14.918 10.040 C 15.220 10.578,15.393 11.003,15.446 11.334 C 15.526 11.845,15.427 13.095,15.287 13.346 C 15.237 13.435,15.364 13.556,10.600 8.883 C 4.379 2.779,4.298 2.701,4.096 2.616 C 4.027 2.587,3.811 2.552,3.616 2.538 C 3.279 2.515,3.249 2.519,3.040 2.627 M2.178 8.512 C 1.780 8.763,1.447 9.553,1.323 10.540 C 1.298 10.738,1.267 11.305,1.254 11.800 C 1.227 12.821,1.274 13.309,1.486 14.240 C 1.953 16.291,3.043 18.320,4.287 19.456 C 4.666 19.801,4.838 19.880,5.210 19.879 C 5.961 19.877,6.434 19.281,6.279 18.533 C 6.242 18.359,6.155 18.196,5.889 17.805 C 5.054 16.578,4.805 16.197,4.646 15.902 C 4.245 15.159,3.946 14.319,3.822 13.590 C 3.716 12.971,3.700 11.738,3.780 10.474 C 3.820 9.850,3.840 9.273,3.825 9.193 C 3.789 9.000,3.507 8.688,3.255 8.561 C 2.983 8.425,2.362 8.396,2.178 8.512 M7.460 13.357 C 7.273 13.402,7.181 13.464,7.010 13.658 C 6.711 13.998,6.644 14.507,6.840 14.949 C 6.963 15.228,7.280 15.630,7.680 16.016 C 8.112 16.432,8.390 16.583,8.653 16.543 C 9.048 16.484,9.489 16.168,9.661 15.820 C 9.776 15.587,9.765 15.241,9.634 14.960 C 9.407 14.472,8.572 13.508,8.266 13.380 C 8.117 13.318,7.676 13.305,7.460 13.357 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/status-online.svg b/packages/icons/svg/status-online.svg
index d878303cfd..9c3bef192c 100644
--- a/packages/icons/svg/status-online.svg
+++ b/packages/icons/svg/status-online.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.768 4.160 C 4.537 4.265,3.743 5.065,3.350 5.591 C 1.904 7.519,1.100 10.199,1.239 12.627 C 1.338 14.349,2.048 16.495,2.972 17.867 C 3.524 18.686,4.402 19.657,4.740 19.822 C 4.960 19.929,5.518 19.931,5.720 19.825 C 6.058 19.647,6.246 19.375,6.323 18.956 C 6.388 18.599,6.335 18.442,5.980 17.928 C 5.167 16.750,4.720 16.066,4.552 15.739 C 3.951 14.575,3.720 13.539,3.720 12.017 C 3.720 10.449,3.915 9.529,4.497 8.360 C 4.740 7.870,4.987 7.481,5.635 6.566 C 6.228 5.727,6.268 5.659,6.322 5.407 C 6.409 5.002,6.200 4.496,5.865 4.302 C 5.728 4.222,5.153 4.078,4.986 4.081 C 4.961 4.081,4.862 4.117,4.768 4.160 M18.420 4.129 C 18.096 4.243,17.746 4.609,17.677 4.907 C 17.568 5.377,17.651 5.587,18.300 6.493 C 19.331 7.934,19.732 8.704,20.140 10.035 L 20.280 10.490 20.280 12.003 L 20.280 13.515 20.042 14.241 C 19.658 15.413,19.284 16.122,18.393 17.371 C 18.114 17.762,17.845 18.167,17.794 18.271 C 17.685 18.495,17.646 18.969,17.718 19.208 C 17.776 19.403,17.996 19.651,18.237 19.792 C 18.397 19.886,18.463 19.900,18.760 19.900 C 19.217 19.900,19.323 19.842,19.864 19.303 C 20.878 18.293,21.677 16.939,22.255 15.251 C 22.636 14.137,22.720 13.516,22.720 11.797 C 22.720 10.478,22.690 10.231,22.413 9.302 C 21.815 7.293,20.868 5.606,19.777 4.606 C 19.444 4.300,19.214 4.177,18.874 4.122 C 18.577 4.074,18.576 4.074,18.420 4.129 M15.030 7.520 C 14.787 7.593,14.480 7.882,14.330 8.180 C 14.131 8.575,14.165 8.711,14.685 9.624 C 15.174 10.484,15.350 10.838,15.420 11.108 C 15.506 11.437,15.533 11.999,15.486 12.478 C 15.447 12.870,15.429 12.928,15.209 13.378 C 15.079 13.643,14.844 14.084,14.686 14.358 C 14.316 15.002,14.225 15.240,14.255 15.495 C 14.302 15.901,14.615 16.323,14.973 16.459 C 15.204 16.548,15.670 16.528,15.880 16.422 C 16.069 16.326,16.752 15.624,16.958 15.312 C 17.339 14.738,17.717 13.829,17.861 13.140 C 17.944 12.747,17.958 11.284,17.882 10.884 C 17.664 9.721,16.756 8.171,16.014 7.695 C 15.740 7.519,15.295 7.440,15.030 7.520 M8.127 7.589 C 7.644 7.856,7.014 8.616,6.645 9.376 C 6.483 9.711,6.208 10.520,6.114 10.940 C 6.077 11.105,6.061 11.450,6.064 12.040 C 6.068 12.870,6.073 12.916,6.194 13.372 C 6.551 14.714,7.405 16.053,8.149 16.436 C 8.340 16.534,8.625 16.559,8.861 16.498 C 9.277 16.390,9.581 16.100,9.703 15.698 C 9.823 15.297,9.780 15.167,9.175 14.112 C 8.985 13.780,8.769 13.377,8.695 13.217 L 8.560 12.925 8.560 11.962 L 8.560 10.999 8.794 10.549 C 8.923 10.302,9.130 9.932,9.255 9.727 C 9.745 8.921,9.822 8.673,9.706 8.277 C 9.570 7.810,9.193 7.554,8.603 7.529 C 8.325 7.518,8.235 7.529,8.127 7.589 M11.575 10.957 C 11.255 11.119,10.934 11.439,10.876 11.656 C 10.818 11.870,10.857 12.231,10.965 12.483 C 11.138 12.884,11.596 13.162,12.083 13.159 C 12.437 13.157,12.840 12.872,13.028 12.489 C 13.172 12.194,13.182 11.791,13.050 11.537 C 12.878 11.206,12.405 10.890,12.025 10.853 C 11.852 10.836,11.782 10.853,11.575 10.957 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.770 4.163 C 4.581 4.258,3.860 4.959,3.515 5.383 C 2.820 6.237,2.155 7.509,1.767 8.722 C 1.353 10.020,1.176 11.344,1.245 12.640 C 1.324 14.123,1.925 16.100,2.700 17.425 C 3.145 18.184,4.061 19.311,4.527 19.670 C 5.015 20.046,5.750 19.973,6.089 19.514 C 6.294 19.237,6.399 18.784,6.318 18.529 C 6.292 18.447,5.911 17.840,5.471 17.180 C 4.420 15.604,4.101 14.937,3.884 13.860 C 3.671 12.805,3.671 11.154,3.884 10.100 C 4.114 8.961,4.498 8.202,5.777 6.360 C 6.014 6.019,6.234 5.677,6.267 5.600 C 6.360 5.384,6.349 5.017,6.242 4.770 C 6.119 4.489,5.905 4.303,5.593 4.207 C 5.164 4.076,4.965 4.065,4.770 4.163 M18.340 4.173 C 18.090 4.292,17.796 4.604,17.702 4.850 C 17.606 5.101,17.633 5.406,17.775 5.685 C 17.835 5.803,18.099 6.206,18.360 6.580 C 19.294 7.916,19.655 8.598,20.045 9.760 L 20.279 10.460 20.280 11.990 L 20.280 13.519 20.057 14.186 C 19.679 15.319,19.285 16.095,18.579 17.100 C 17.772 18.248,17.680 18.429,17.680 18.857 C 17.681 19.181,17.748 19.352,17.957 19.561 C 18.246 19.849,18.361 19.898,18.760 19.896 C 19.205 19.894,19.334 19.826,19.818 19.339 C 20.912 18.238,21.685 16.927,22.276 15.171 C 22.633 14.110,22.719 13.461,22.720 11.819 C 22.720 10.685,22.686 10.327,22.520 9.699 C 22.007 7.758,21.122 6.024,20.071 4.899 C 19.595 4.389,19.220 4.165,18.740 4.104 C 18.577 4.083,18.503 4.096,18.340 4.173 M15.028 7.527 C 14.727 7.610,14.297 8.111,14.222 8.465 C 14.182 8.654,14.301 8.940,14.761 9.763 C 15.245 10.631,15.378 10.915,15.433 11.205 C 15.554 11.840,15.514 12.660,15.340 13.088 C 15.284 13.227,15.042 13.700,14.803 14.140 C 14.312 15.043,14.223 15.265,14.258 15.500 C 14.318 15.903,14.697 16.385,15.025 16.476 C 15.242 16.537,15.510 16.530,15.749 16.460 C 15.920 16.409,16.017 16.334,16.359 15.991 C 16.992 15.356,17.353 14.750,17.679 13.772 C 17.901 13.106,17.930 12.863,17.912 11.766 L 17.897 10.820 17.732 10.336 C 17.278 9.006,16.428 7.816,15.765 7.582 C 15.543 7.503,15.205 7.478,15.028 7.527 M8.137 7.593 C 7.909 7.700,7.482 8.111,7.177 8.517 C 6.743 9.094,6.433 9.771,6.177 10.704 C 6.074 11.080,6.068 11.144,6.070 11.980 C 6.071 12.651,6.086 12.927,6.136 13.140 C 6.460 14.525,7.383 16.045,8.123 16.414 C 8.709 16.706,9.485 16.363,9.692 15.721 C 9.824 15.314,9.785 15.194,9.168 14.091 C 8.518 12.929,8.560 13.078,8.560 11.951 L 8.560 10.992 8.787 10.566 C 8.912 10.332,9.130 9.944,9.272 9.705 C 9.660 9.048,9.735 8.864,9.737 8.560 C 9.739 8.345,9.718 8.263,9.621 8.086 C 9.427 7.734,9.136 7.578,8.606 7.539 C 8.355 7.520,8.270 7.530,8.137 7.593 M11.718 10.893 C 11.520 10.966,11.242 11.164,11.070 11.354 C 10.868 11.578,10.814 11.780,10.869 12.104 C 10.957 12.618,11.205 12.923,11.666 13.086 C 12.079 13.231,12.462 13.140,12.781 12.821 C 13.089 12.513,13.213 12.082,13.102 11.701 C 12.949 11.173,12.178 10.723,11.718 10.893 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/stop.svg b/packages/icons/svg/stop.svg
index becf91d3d4..10f5fcc018 100644
--- a/packages/icons/svg/stop.svg
+++ b/packages/icons/svg/stop.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M14.970 8.615 C 15.052 8.656,15.210 8.793,15.320 8.920 L 15.520 9.151 15.520 11.991 L 15.520 14.831 15.360 15.026 C 15.168 15.258,14.962 15.419,14.765 15.489 C 14.653 15.528,14.031 15.540,12.000 15.540 C 10.559 15.540,9.310 15.525,9.225 15.507 C 9.120 15.485,9.010 15.414,8.880 15.283 C 8.531 14.935,8.551 15.061,8.506 12.924 C 8.464 10.877,8.503 9.225,8.598 9.040 C 8.712 8.820,8.938 8.639,9.200 8.556 C 9.255 8.539,10.542 8.528,12.060 8.533 C 14.664 8.540,14.828 8.544,14.970 8.615 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M14.951 8.622 C 15.023 8.652,15.181 8.780,15.301 8.906 L 15.520 9.136 15.520 11.992 L 15.520 14.847 15.275 15.103 C 14.875 15.519,14.907 15.511,13.420 15.543 C 12.716 15.558,11.477 15.557,10.668 15.541 L 9.195 15.511 9.008 15.382 C 8.904 15.311,8.770 15.182,8.709 15.095 C 8.609 14.954,8.593 14.884,8.555 14.439 C 8.498 13.753,8.495 9.659,8.551 9.307 C 8.601 8.998,8.712 8.821,8.949 8.674 C 9.083 8.591,9.166 8.577,9.680 8.555 C 9.999 8.541,11.286 8.538,12.540 8.549 C 14.348 8.563,14.847 8.578,14.951 8.622 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/stripe.svg b/packages/icons/svg/stripe.svg
index b12f17199a..0b53ee7664 100644
--- a/packages/icons/svg/stripe.svg
+++ b/packages/icons/svg/stripe.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.122 2.761 C 8.379 2.976,6.337 4.256,5.529 6.268 C 5.001 7.584,4.982 9.177,5.480 10.375 C 5.676 10.844,5.967 11.259,6.415 11.702 C 7.203 12.485,8.053 12.938,10.179 13.709 C 11.500 14.188,12.027 14.444,12.403 14.790 C 12.705 15.069,12.800 15.274,12.799 15.650 C 12.797 16.266,12.487 16.610,11.770 16.789 C 11.398 16.882,10.380 16.879,9.760 16.784 C 8.562 16.600,7.085 16.120,5.870 15.520 L 5.320 15.248 5.320 17.675 L 5.320 20.103 5.790 20.288 C 9.360 21.692,13.305 21.588,15.660 20.026 C 16.852 19.236,17.574 18.160,17.888 16.704 C 18.016 16.113,18.015 14.922,17.886 14.323 C 17.605 13.023,16.943 12.075,15.780 11.309 C 15.083 10.850,14.238 10.475,12.740 9.961 C 11.104 9.400,10.643 9.152,10.371 8.688 C 10.280 8.534,10.262 8.455,10.262 8.221 C 10.263 7.882,10.372 7.651,10.623 7.460 C 10.932 7.224,11.162 7.180,12.060 7.182 C 12.918 7.184,13.395 7.236,14.230 7.422 C 14.877 7.566,15.798 7.879,16.420 8.165 C 16.706 8.297,16.963 8.415,16.990 8.427 C 17.030 8.444,17.039 7.966,17.030 6.056 L 17.020 3.662 16.671 3.532 C 15.806 3.209,14.632 2.934,13.640 2.823 C 12.950 2.746,11.712 2.715,11.122 2.761 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.560 2.825 C 8.433 3.113,6.719 4.135,5.841 5.638 C 5.093 6.919,4.912 8.708,5.387 10.120 C 5.580 10.693,5.895 11.176,6.419 11.702 C 7.146 12.430,7.942 12.870,9.787 13.562 C 11.503 14.205,11.876 14.375,12.292 14.702 C 12.716 15.035,12.869 15.428,12.767 15.917 C 12.614 16.649,11.875 16.932,10.368 16.838 C 9.124 16.759,7.463 16.279,6.005 15.577 C 5.666 15.413,5.374 15.280,5.355 15.280 C 5.335 15.280,5.320 16.356,5.320 17.695 L 5.320 20.110 5.830 20.302 C 7.074 20.770,8.193 21.045,9.520 21.207 C 10.072 21.275,11.624 21.275,12.160 21.207 C 14.581 20.903,16.353 19.908,17.271 18.340 C 17.787 17.457,18.046 16.306,17.982 15.180 C 17.858 13.022,16.778 11.619,14.473 10.622 C 14.202 10.505,13.647 10.289,13.240 10.143 C 11.830 9.637,11.498 9.509,11.180 9.350 C 10.773 9.146,10.590 9.001,10.417 8.745 C 10.291 8.557,10.280 8.517,10.280 8.237 C 10.280 7.996,10.299 7.896,10.373 7.756 C 10.489 7.536,10.815 7.301,11.085 7.243 C 11.338 7.188,12.706 7.188,13.180 7.242 C 14.139 7.351,15.444 7.728,16.467 8.191 C 16.972 8.419,16.994 8.426,17.016 8.345 C 17.029 8.298,17.039 7.230,17.039 5.971 C 17.040 3.832,17.035 3.680,16.970 3.646 C 16.931 3.626,16.678 3.535,16.407 3.443 C 15.474 3.129,14.346 2.892,13.360 2.802 C 12.706 2.743,11.070 2.756,10.560 2.825 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/sun.svg b/packages/icons/svg/sun.svg
index b5fee718cd..f94ec11954 100644
--- a/packages/icons/svg/sun.svg
+++ b/packages/icons/svg/sun.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.720 2.517 C 11.448 2.572,11.228 2.729,10.980 3.044 L 10.800 3.273 10.801 3.727 C 10.803 4.449,10.864 5.133,10.940 5.280 C 11.046 5.485,11.346 5.758,11.587 5.868 C 11.999 6.057,12.458 5.946,12.837 5.566 C 13.054 5.348,13.106 5.201,13.160 4.653 C 13.270 3.522,13.154 3.032,12.705 2.731 C 12.432 2.547,12.016 2.457,11.720 2.517 M5.625 5.018 C 5.386 5.135,5.141 5.366,5.030 5.580 C 4.909 5.812,4.910 6.274,5.031 6.522 C 5.133 6.733,5.851 7.507,6.166 7.747 C 6.435 7.952,6.612 8.009,6.979 8.009 C 7.337 8.009,7.501 7.937,7.733 7.679 C 8.100 7.271,8.136 6.730,7.827 6.281 C 7.653 6.028,6.877 5.265,6.670 5.144 C 6.505 5.047,6.066 4.920,5.900 4.922 C 5.856 4.922,5.732 4.965,5.625 5.018 M17.306 5.119 C 17.056 5.279,16.411 5.934,16.170 6.272 C 15.998 6.513,15.980 6.559,15.967 6.805 C 15.939 7.294,16.142 7.669,16.557 7.894 C 16.953 8.110,17.408 8.057,17.833 7.745 C 18.093 7.554,18.894 6.727,18.981 6.559 C 19.068 6.393,19.082 5.896,19.007 5.676 C 18.939 5.478,18.797 5.296,18.594 5.147 C 18.428 5.024,18.407 5.020,17.961 5.007 C 17.504 4.994,17.498 4.995,17.306 5.119 M11.080 7.359 C 10.166 7.454,8.873 8.267,8.199 9.170 C 7.782 9.729,7.393 10.642,7.276 11.338 C 7.218 11.684,7.250 12.510,7.337 12.920 C 7.548 13.905,7.913 14.564,8.656 15.301 C 9.588 16.226,10.538 16.674,11.720 16.747 C 13.289 16.844,14.811 16.108,15.822 14.764 C 16.743 13.540,16.992 12.012,16.513 10.520 C 16.087 9.194,14.827 7.948,13.461 7.502 C 13.000 7.351,11.826 7.281,11.080 7.359 M3.373 10.956 C 3.156 10.978,3.048 11.012,2.926 11.096 C 2.636 11.297,2.459 11.651,2.464 12.020 C 2.469 12.512,2.790 12.932,3.273 13.081 C 3.771 13.236,4.641 13.226,5.192 13.060 C 5.569 12.946,5.832 12.625,5.917 12.178 C 5.968 11.907,5.907 11.655,5.722 11.368 C 5.473 10.983,5.437 10.971,4.480 10.947 C 4.029 10.936,3.531 10.940,3.373 10.956 M18.973 10.956 C 18.756 10.978,18.648 11.012,18.526 11.096 C 18.236 11.297,18.059 11.651,18.064 12.020 C 18.069 12.512,18.390 12.932,18.873 13.081 C 19.371 13.236,20.241 13.226,20.792 13.060 C 21.169 12.946,21.432 12.625,21.517 12.178 C 21.568 11.907,21.507 11.655,21.322 11.368 C 21.073 10.983,21.037 10.971,20.080 10.947 C 19.629 10.936,19.131 10.940,18.973 10.956 M6.640 15.997 C 6.563 16.013,6.437 16.058,6.360 16.098 C 6.161 16.202,5.196 17.181,5.056 17.420 C 4.953 17.597,4.940 17.657,4.942 17.940 C 4.944 18.185,4.964 18.298,5.028 18.421 C 5.152 18.657,5.478 18.946,5.684 19.001 C 5.920 19.065,6.383 19.034,6.580 18.942 C 6.815 18.832,7.802 17.830,7.921 17.581 C 8.122 17.160,8.059 16.709,7.754 16.378 C 7.497 16.099,6.989 15.926,6.640 15.997 M16.760 15.995 C 16.426 16.104,16.085 16.437,16.000 16.739 C 15.925 17.009,15.967 17.396,16.096 17.617 C 16.234 17.852,17.190 18.807,17.425 18.945 C 17.581 19.037,17.654 19.052,17.936 19.054 C 18.222 19.056,18.289 19.042,18.446 18.950 C 18.919 18.673,19.181 18.132,19.062 17.675 C 18.948 17.233,17.899 16.201,17.424 16.063 C 17.140 15.980,16.886 15.954,16.760 15.995 M11.500 18.173 C 11.297 18.268,10.933 18.685,10.879 18.884 C 10.847 19.003,10.837 19.323,10.848 19.880 C 10.865 20.767,10.884 20.848,11.135 21.147 C 11.395 21.455,12.027 21.612,12.414 21.464 C 12.648 21.375,13.056 20.952,13.116 20.738 C 13.141 20.646,13.160 20.219,13.160 19.719 C 13.160 18.986,13.150 18.843,13.094 18.759 C 12.982 18.590,12.666 18.277,12.543 18.212 C 12.377 18.125,11.661 18.098,11.500 18.173 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.526 2.579 C 11.348 2.660,11.186 2.800,10.975 3.056 L 10.800 3.268 10.801 3.804 C 10.801 4.386,10.856 5.025,10.923 5.228 C 10.946 5.298,11.079 5.462,11.218 5.592 C 11.700 6.043,12.179 6.078,12.676 5.699 C 13.050 5.414,13.143 5.149,13.185 4.260 C 13.230 3.304,13.079 2.925,12.545 2.651 C 12.288 2.519,11.744 2.481,11.526 2.579 M5.654 5.017 C 5.381 5.144,5.145 5.363,5.034 5.593 C 4.912 5.843,4.910 6.267,5.030 6.501 C 5.206 6.846,5.989 7.653,6.357 7.871 C 6.606 8.018,7.141 8.048,7.410 7.929 C 7.778 7.766,8.080 7.213,8.024 6.804 C 7.978 6.464,7.834 6.250,7.292 5.715 C 6.760 5.190,6.599 5.080,6.213 4.980 C 5.915 4.902,5.897 4.903,5.654 5.017 M17.400 5.061 C 17.323 5.095,17.016 5.370,16.718 5.672 C 16.050 6.347,15.939 6.537,15.969 6.955 C 16.005 7.458,16.316 7.847,16.792 7.985 C 17.056 8.062,17.318 8.022,17.648 7.857 C 17.903 7.729,18.895 6.750,18.983 6.540 C 19.057 6.361,19.058 5.800,18.984 5.623 C 18.912 5.451,18.661 5.173,18.505 5.092 C 18.324 4.999,17.584 4.978,17.400 5.061 M11.116 7.363 C 10.211 7.459,8.987 8.194,8.296 9.057 C 7.858 9.604,7.446 10.506,7.296 11.249 C 7.178 11.829,7.260 12.793,7.485 13.479 C 7.911 14.778,9.186 16.051,10.517 16.507 C 11.672 16.902,12.852 16.826,13.980 16.283 C 15.563 15.521,16.635 13.965,16.744 12.270 C 16.788 11.578,16.629 10.717,16.341 10.093 C 15.786 8.893,14.505 7.778,13.338 7.479 C 12.818 7.346,11.783 7.292,11.116 7.363 M3.080 11.022 C 2.616 11.229,2.355 11.859,2.526 12.364 C 2.632 12.678,2.956 12.988,3.275 13.081 C 3.992 13.291,5.156 13.186,5.528 12.879 C 5.731 12.712,5.886 12.396,5.910 12.101 C 5.933 11.808,5.882 11.625,5.696 11.332 C 5.476 10.987,5.459 10.982,4.260 10.970 C 3.388 10.961,3.197 10.970,3.080 11.022 M18.680 11.022 C 18.216 11.229,17.955 11.859,18.126 12.364 C 18.232 12.678,18.556 12.988,18.875 13.081 C 19.592 13.291,20.756 13.186,21.128 12.879 C 21.331 12.712,21.486 12.396,21.510 12.101 C 21.533 11.808,21.482 11.625,21.296 11.332 C 21.076 10.987,21.059 10.982,19.860 10.970 C 18.988 10.961,18.797 10.970,18.680 11.022 M6.411 16.076 C 6.230 16.161,5.302 17.067,5.106 17.350 C 4.809 17.781,4.896 18.400,5.306 18.760 C 5.608 19.025,5.935 19.096,6.398 18.997 C 6.567 18.960,6.660 18.899,6.970 18.622 C 7.465 18.179,7.883 17.688,7.968 17.450 C 8.159 16.920,7.919 16.380,7.380 16.123 C 7.098 15.989,6.644 15.967,6.411 16.076 M16.617 16.062 C 16.089 16.323,15.854 16.856,16.019 17.422 C 16.083 17.643,16.128 17.698,16.714 18.287 C 17.101 18.676,17.397 18.940,17.489 18.978 C 17.713 19.072,18.212 19.061,18.425 18.958 C 18.643 18.852,18.862 18.609,18.989 18.331 C 19.071 18.153,19.086 18.068,19.073 17.861 C 19.052 17.535,18.890 17.280,18.383 16.776 C 17.797 16.193,17.442 15.999,16.964 16.001 C 16.841 16.001,16.685 16.029,16.617 16.062 M11.610 18.147 C 11.428 18.173,11.070 18.511,10.937 18.783 L 10.830 19.001 10.847 19.833 C 10.863 20.645,10.866 20.671,10.974 20.892 C 11.114 21.177,11.310 21.341,11.634 21.441 C 11.914 21.528,12.145 21.540,12.360 21.481 C 12.545 21.429,12.893 21.121,13.030 20.887 C 13.139 20.702,13.140 20.692,13.154 19.865 C 13.161 19.406,13.156 18.972,13.143 18.901 C 13.113 18.744,12.738 18.317,12.551 18.228 C 12.416 18.164,11.840 18.114,11.610 18.147 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/support.svg b/packages/icons/svg/support.svg
index 5d481840c4..4f850359c9 100644
--- a/packages/icons/svg/support.svg
+++ b/packages/icons/svg/support.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M13.280 5.001 C 13.802 5.047,14.748 5.328,15.037 5.521 C 15.127 5.581,15.118 5.592,14.243 6.451 L 13.357 7.320 12.669 7.320 C 12.290 7.320,11.648 7.339,11.242 7.362 L 10.505 7.404 9.613 6.513 C 9.123 6.023,8.735 5.609,8.751 5.593 C 8.805 5.540,9.534 5.276,10.120 5.098 L 10.700 4.921 11.800 4.944 C 12.405 4.956,13.071 4.982,13.280 5.001 M18.649 9.402 C 19.026 10.155,19.206 11.927,19.024 13.100 C 18.907 13.858,18.585 15.001,18.427 15.217 C 18.385 15.274,18.266 15.169,17.484 14.382 C 16.618 13.511,16.590 13.478,16.613 13.351 C 16.627 13.279,16.666 13.067,16.701 12.880 C 16.778 12.475,16.790 11.508,16.724 11.100 L 16.678 10.820 17.309 10.204 C 18.003 9.527,18.434 9.152,18.498 9.171 C 18.521 9.178,18.589 9.281,18.649 9.402 M6.368 10.057 C 7.050 10.702,7.200 10.863,7.216 10.970 C 7.227 11.042,7.246 11.622,7.259 12.260 L 7.283 13.420 6.437 14.291 C 5.780 14.967,5.579 15.153,5.539 15.119 C 5.457 15.051,5.096 13.906,5.016 13.460 C 4.958 13.141,4.943 12.842,4.942 11.980 C 4.941 10.832,4.984 10.458,5.207 9.700 C 5.325 9.298,5.386 9.190,5.471 9.236 C 5.509 9.256,5.913 9.625,6.368 10.057 M12.527 9.754 C 12.816 9.780,12.855 9.796,13.175 10.013 C 13.609 10.308,13.894 10.619,14.115 11.038 L 14.291 11.370 14.272 12.037 L 14.252 12.705 14.098 12.998 C 13.922 13.334,13.498 13.792,13.160 14.012 C 12.797 14.248,12.486 14.334,12.000 14.335 C 11.649 14.335,11.533 14.319,11.291 14.232 C 10.791 14.053,10.334 13.671,9.998 13.152 C 9.754 12.775,9.709 12.567,9.726 11.920 L 9.741 11.371 9.917 11.016 C 10.056 10.733,10.155 10.598,10.398 10.360 C 10.755 10.009,11.099 9.793,11.357 9.756 C 11.607 9.721,12.157 9.720,12.527 9.754 M11.260 16.740 C 11.792 16.811,12.234 16.815,12.684 16.754 L 13.020 16.709 13.692 17.404 C 14.447 18.186,14.693 18.483,14.673 18.588 C 14.664 18.641,14.541 18.700,14.220 18.808 C 13.312 19.112,12.304 19.246,11.522 19.165 C 10.678 19.078,9.450 18.778,9.240 18.608 C 9.130 18.519,9.154 18.461,9.427 18.149 C 9.606 17.945,10.801 16.680,10.814 16.680 C 10.817 16.681,11.018 16.707,11.260 16.740 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.140 4.960 C 13.411 5.001,13.723 5.043,14.400 5.263 C 14.922 5.432,15.098 5.532,15.045 5.630 C 15.025 5.669,14.638 6.065,14.186 6.510 L 13.365 7.320 12.794 7.320 C 12.481 7.320,11.836 7.340,11.362 7.364 L 10.500 7.407 9.630 6.525 C 9.152 6.040,8.760 5.627,8.760 5.606 C 8.760 5.522,10.555 4.928,10.820 4.924 C 10.908 4.923,11.502 4.939,12.140 4.960 M18.635 9.390 C 18.775 9.668,18.894 10.084,18.987 10.620 C 19.075 11.127,19.089 12.844,19.008 13.220 C 18.762 14.366,18.495 15.240,18.392 15.240 C 18.336 15.240,16.825 13.741,16.704 13.565 L 16.604 13.420 16.681 12.980 C 16.766 12.489,16.787 11.470,16.720 11.061 C 16.682 10.825,16.683 10.821,16.811 10.687 C 17.260 10.215,18.431 9.160,18.505 9.160 C 18.513 9.160,18.571 9.264,18.635 9.390 M6.242 9.940 C 6.642 10.314,7.020 10.684,7.082 10.763 C 7.223 10.941,7.231 11.011,7.261 12.360 L 7.284 13.420 6.452 14.271 C 5.994 14.739,5.599 15.121,5.574 15.121 C 5.498 15.119,5.315 14.610,5.073 13.720 C 4.984 13.395,4.980 13.318,4.980 12.000 C 4.980 10.548,4.983 10.519,5.186 9.780 C 5.295 9.385,5.376 9.228,5.460 9.248 C 5.490 9.254,5.842 9.566,6.242 9.940 M12.900 9.856 C 13.179 9.984,13.633 10.351,13.828 10.606 C 13.918 10.724,14.060 10.944,14.142 11.094 L 14.292 11.369 14.267 12.050 C 14.241 12.731,14.241 12.731,14.104 12.975 C 13.885 13.367,13.452 13.829,13.093 14.053 C 12.751 14.267,12.471 14.329,11.917 14.314 C 11.416 14.300,11.412 14.299,11.067 14.128 C 10.677 13.935,10.286 13.582,10.028 13.191 C 9.768 12.797,9.744 12.695,9.742 11.980 L 9.740 11.340 9.912 11.023 C 10.113 10.652,10.238 10.499,10.574 10.207 C 10.879 9.943,11.159 9.793,11.420 9.755 C 11.530 9.739,11.863 9.735,12.160 9.745 C 12.612 9.761,12.732 9.779,12.900 9.856 M11.260 16.740 C 11.789 16.810,12.233 16.815,12.678 16.756 L 13.008 16.711 13.189 16.886 C 13.538 17.223,14.492 18.261,14.592 18.411 C 14.682 18.547,14.686 18.571,14.634 18.624 C 14.512 18.745,13.561 19.021,12.900 19.125 C 12.387 19.207,11.501 19.189,10.940 19.085 C 10.345 18.976,9.614 18.788,9.378 18.683 C 9.058 18.542,9.075 18.513,10.213 17.310 C 10.541 16.963,10.812 16.680,10.815 16.680 C 10.818 16.681,11.018 16.707,11.260 16.740 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/swift.svg b/packages/icons/svg/swift.svg
index 85e1ce9444..db43d2f3d6 100644
--- a/packages/icons/svg/swift.svg
+++ b/packages/icons/svg/swift.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.141 4.082 C 14.161 4.114,14.314 4.350,14.482 4.607 C 14.849 5.169,15.284 6.011,15.534 6.640 C 16.302 8.581,16.398 10.677,15.795 12.329 L 15.711 12.558 15.525 12.452 C 15.423 12.394,14.983 12.106,14.547 11.813 C 12.292 10.296,9.681 8.166,7.642 6.180 C 6.877 5.435,6.861 5.431,7.333 6.100 C 8.396 7.606,10.115 9.754,11.299 11.057 C 11.498 11.276,11.741 11.545,11.840 11.656 L 12.020 11.857 11.860 11.761 C 11.519 11.555,10.348 10.764,9.680 10.287 C 8.237 9.257,6.514 7.912,5.364 6.920 C 5.025 6.628,4.763 6.414,4.780 6.444 C 4.903 6.656,5.367 7.301,5.541 7.501 C 5.657 7.634,6.034 8.093,6.379 8.521 C 7.655 10.105,8.585 11.152,9.854 12.434 C 10.993 13.584,12.057 14.544,13.010 15.281 C 13.136 15.379,13.240 15.471,13.240 15.487 C 13.240 15.539,12.258 15.996,11.880 16.119 C 9.880 16.770,7.549 16.566,5.206 15.534 C 4.440 15.196,3.932 14.902,3.111 14.321 C 2.857 14.141,3.760 15.339,4.376 16.000 C 6.299 18.062,8.890 19.439,11.480 19.776 C 12.217 19.872,12.700 19.889,13.320 19.842 C 14.410 19.759,15.316 19.519,16.263 19.061 C 17.133 18.640,17.756 18.471,18.440 18.468 C 19.197 18.465,19.659 18.653,20.180 19.179 C 20.356 19.357,20.563 19.614,20.640 19.750 C 20.717 19.887,20.798 19.993,20.820 19.987 C 20.842 19.980,20.887 19.921,20.920 19.857 C 21.021 19.660,21.002 18.642,20.887 18.126 C 20.689 17.239,20.335 16.427,19.811 15.662 L 19.511 15.225 19.595 14.882 C 19.765 14.190,19.808 13.752,19.788 12.920 C 19.765 11.905,19.639 11.221,19.299 10.242 C 18.527 8.024,16.870 5.903,14.789 4.468 C 14.303 4.133,14.097 4.010,14.141 4.082 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.160 4.098 C 14.160 4.108,14.274 4.293,14.413 4.508 C 15.112 5.588,15.621 6.710,15.898 7.780 C 16.285 9.274,16.263 10.907,15.836 12.189 L 15.714 12.559 15.596 12.498 C 15.382 12.388,13.911 11.385,13.233 10.888 C 11.344 9.504,9.413 7.881,7.726 6.262 C 7.367 5.917,7.063 5.644,7.051 5.655 C 7.007 5.700,8.301 7.444,9.341 8.740 C 9.987 9.545,10.938 10.664,11.570 11.360 C 11.780 11.591,11.945 11.787,11.937 11.795 C 11.919 11.815,10.797 11.073,10.020 10.528 C 8.654 9.570,6.615 7.991,5.373 6.930 C 5.084 6.682,4.835 6.480,4.821 6.480 C 4.771 6.480,5.301 7.211,5.718 7.717 C 5.950 7.998,6.449 8.604,6.827 9.064 C 7.672 10.092,8.065 10.542,8.894 11.435 C 10.052 12.681,11.633 14.178,12.660 15.000 C 12.836 15.141,13.038 15.310,13.109 15.375 C 13.236 15.492,13.237 15.495,13.156 15.551 C 13.003 15.659,12.129 16.033,11.746 16.156 C 11.125 16.355,10.546 16.445,9.734 16.469 C 8.667 16.500,7.775 16.386,6.727 16.084 C 5.679 15.782,4.474 15.233,3.621 14.668 C 3.336 14.479,3.096 14.331,3.087 14.339 C 3.063 14.364,3.305 14.704,3.712 15.220 C 4.200 15.839,5.248 16.878,5.860 17.352 C 7.723 18.795,9.848 19.645,12.080 19.841 C 12.935 19.916,13.901 19.829,14.800 19.597 C 15.234 19.485,15.816 19.263,16.677 18.881 C 16.885 18.789,17.227 18.667,17.437 18.608 C 17.771 18.516,17.897 18.502,18.420 18.501 C 19.100 18.500,19.317 18.547,19.674 18.772 C 19.965 18.956,20.408 19.403,20.624 19.730 C 20.722 19.878,20.810 20.000,20.820 20.000 C 20.830 20.000,20.870 19.942,20.908 19.870 C 21.005 19.691,21.003 18.734,20.904 18.223 C 20.745 17.399,20.348 16.469,19.823 15.683 L 19.517 15.227 19.619 14.775 C 19.770 14.099,19.814 13.591,19.786 12.840 C 19.757 12.089,19.690 11.615,19.519 10.972 C 18.837 8.403,17.055 6.000,14.611 4.355 C 14.220 4.092,14.160 4.058,14.160 4.098 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/switch-horizontal.svg b/packages/icons/svg/switch-horizontal.svg
index 98ebfcb01f..f294270caf 100644
--- a/packages/icons/svg/switch-horizontal.svg
+++ b/packages/icons/svg/switch-horizontal.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.078 2.599 C 14.921 2.682,14.641 2.940,14.538 3.097 C 14.495 3.163,14.464 3.319,14.450 3.536 C 14.431 3.840,14.438 3.888,14.522 4.024 C 14.644 4.221,14.933 4.571,15.357 5.036 C 15.981 5.720,16.122 5.894,16.084 5.932 C 16.047 5.969,14.668 6.009,11.093 6.074 L 9.206 6.109 9.029 6.212 C 8.703 6.404,8.468 6.807,8.465 7.180 C 8.462 7.572,8.637 7.885,9.054 8.230 L 9.259 8.400 12.773 8.400 L 16.288 8.400 15.699 9.010 C 15.058 9.675,14.682 10.121,14.558 10.364 C 14.224 11.019,14.744 11.879,15.516 11.949 C 15.998 11.993,16.278 11.773,18.240 9.805 C 19.803 8.237,20.142 7.861,20.284 7.540 C 20.383 7.316,20.376 7.027,20.265 6.794 C 20.150 6.556,19.540 5.893,18.203 4.558 C 16.913 3.269,16.309 2.726,16.022 2.595 C 15.796 2.493,15.275 2.495,15.078 2.599 M7.896 12.185 C 7.342 12.558,4.822 15.038,4.000 16.020 C 3.782 16.279,3.641 16.579,3.641 16.780 C 3.641 17.159,3.903 17.520,5.026 18.687 C 6.485 20.203,7.635 21.272,7.994 21.448 C 8.271 21.583,8.597 21.573,8.875 21.420 C 9.129 21.281,9.426 20.957,9.481 20.760 C 9.537 20.557,9.529 20.139,9.465 19.987 C 9.391 19.808,9.025 19.378,8.313 18.630 L 7.713 18.000 11.253 18.000 L 14.792 18.000 15.102 17.670 C 15.273 17.489,15.437 17.282,15.466 17.211 C 15.540 17.036,15.535 16.553,15.458 16.369 C 15.387 16.198,15.136 15.925,14.893 15.756 L 14.726 15.640 12.613 15.639 C 10.540 15.637,7.932 15.586,7.892 15.545 C 7.862 15.516,7.978 15.374,8.513 14.784 C 9.343 13.868,9.506 13.631,9.547 13.287 C 9.577 13.030,9.506 12.800,9.326 12.572 C 9.137 12.334,8.857 12.177,8.519 12.123 C 8.141 12.061,8.068 12.069,7.896 12.185 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.300 2.540 C 15.278 2.547,15.211 2.564,15.151 2.577 C 15.091 2.590,14.925 2.710,14.783 2.843 C 14.552 3.059,14.520 3.109,14.478 3.310 C 14.369 3.833,14.435 3.987,15.080 4.720 C 15.284 4.951,15.592 5.301,15.765 5.498 C 15.938 5.696,16.080 5.878,16.080 5.903 C 16.080 5.963,15.464 5.990,12.980 6.039 C 8.798 6.121,9.121 6.095,8.825 6.383 C 8.598 6.603,8.481 6.882,8.480 7.202 C 8.480 7.558,8.604 7.798,8.963 8.137 L 9.241 8.400 12.765 8.400 L 16.288 8.400 15.758 8.950 C 14.549 10.204,14.348 10.542,14.500 11.067 C 14.698 11.746,15.405 12.130,15.967 11.863 C 16.263 11.723,16.830 11.210,18.142 9.898 C 20.151 7.888,20.342 7.652,20.338 7.180 C 20.335 6.776,20.267 6.685,18.954 5.320 C 17.999 4.327,16.672 3.058,16.302 2.782 C 16.172 2.685,15.988 2.586,15.895 2.563 C 15.736 2.523,15.391 2.509,15.300 2.540 M7.976 12.143 C 7.703 12.278,6.364 13.535,5.039 14.900 C 3.929 16.044,3.693 16.356,3.650 16.740 C 3.602 17.162,3.951 17.600,5.836 19.483 C 7.167 20.812,7.731 21.320,8.037 21.465 C 8.236 21.560,8.578 21.555,8.803 21.454 C 9.046 21.343,9.375 21.009,9.461 20.783 C 9.513 20.647,9.526 20.526,9.512 20.307 C 9.486 19.902,9.398 19.780,8.271 18.590 L 7.713 18.000 11.252 18.000 L 14.791 18.000 15.030 17.744 C 15.458 17.287,15.490 17.231,15.511 16.908 C 15.521 16.750,15.509 16.546,15.484 16.456 C 15.433 16.265,15.199 15.985,14.929 15.788 L 14.740 15.651 11.600 15.625 C 9.873 15.611,8.330 15.588,8.171 15.575 C 7.918 15.552,7.887 15.541,7.919 15.482 C 7.939 15.445,8.201 15.137,8.503 14.798 C 9.205 14.007,9.420 13.722,9.503 13.472 C 9.703 12.868,9.254 12.263,8.501 12.124 C 8.194 12.067,8.125 12.069,7.976 12.143 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/switch-vertical.svg b/packages/icons/svg/switch-vertical.svg
index 6d44783633..110d324216 100644
--- a/packages/icons/svg/switch-vertical.svg
+++ b/packages/icons/svg/switch-vertical.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.220 4.150 C 5.558 4.762,3.172 7.168,2.848 7.550 C 2.511 7.947,2.480 8.018,2.480 8.390 C 2.480 8.894,2.691 9.225,3.150 9.441 C 3.571 9.638,3.937 9.573,4.380 9.220 C 4.534 9.097,4.962 8.708,5.330 8.355 L 6.000 7.714 6.000 11.213 L 6.000 14.712 6.179 14.950 C 6.468 15.334,6.811 15.528,7.203 15.528 C 7.595 15.528,7.959 15.304,8.285 14.864 L 8.400 14.708 8.400 11.211 L 8.400 7.714 9.030 8.314 C 9.754 9.004,10.227 9.406,10.428 9.501 C 10.776 9.666,11.312 9.498,11.655 9.118 C 11.977 8.759,12.042 8.314,11.825 7.946 C 11.646 7.640,11.194 7.148,10.003 5.959 C 8.679 4.636,7.898 3.918,7.660 3.801 C 7.555 3.750,7.370 3.714,7.120 3.696 L 6.740 3.670 6.220 4.150 M16.368 8.562 C 16.166 8.643,15.916 8.852,15.816 9.024 C 15.659 9.291,15.644 9.598,15.615 13.148 L 15.588 16.275 14.984 15.702 C 14.298 15.051,14.078 14.858,13.809 14.671 C 13.639 14.553,13.587 14.539,13.283 14.526 C 12.858 14.507,12.697 14.556,12.449 14.779 C 12.188 15.014,12.079 15.267,12.075 15.644 C 12.073 15.909,12.083 15.944,12.220 16.143 C 12.437 16.457,13.376 17.453,14.423 18.477 C 16.022 20.041,16.415 20.360,16.741 20.360 C 16.986 20.360,17.258 20.244,17.540 20.019 C 17.961 19.684,19.259 18.420,20.289 17.344 C 21.551 16.026,21.497 16.098,21.514 15.711 C 21.540 15.147,21.400 14.878,20.959 14.643 C 20.721 14.516,20.697 14.511,20.345 14.527 C 20.007 14.542,19.964 14.553,19.781 14.679 C 19.520 14.859,19.051 15.273,18.470 15.836 L 18.000 16.291 18.000 12.775 L 18.000 9.259 17.822 9.043 C 17.622 8.798,17.379 8.620,17.165 8.561 C 16.986 8.511,16.493 8.512,16.368 8.562 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.093 4.276 C 5.382 4.946,3.760 6.574,3.086 7.295 C 2.572 7.846,2.480 8.005,2.480 8.345 C 2.480 8.870,2.671 9.192,3.111 9.408 C 3.462 9.581,3.724 9.587,4.044 9.430 C 4.304 9.302,4.514 9.126,5.370 8.312 L 6.000 7.713 6.000 11.235 L 6.000 14.756 6.310 15.072 C 6.548 15.315,6.666 15.404,6.817 15.454 C 7.339 15.628,7.796 15.458,8.228 14.929 L 8.400 14.717 8.400 11.209 L 8.400 7.702 8.750 8.043 C 9.563 8.837,10.177 9.367,10.436 9.499 C 10.615 9.590,10.958 9.567,11.204 9.448 C 11.819 9.150,12.104 8.513,11.851 8.000 C 11.717 7.727,11.213 7.172,10.013 5.974 C 8.803 4.765,7.982 4.002,7.738 3.858 C 7.581 3.765,7.179 3.682,6.873 3.681 C 6.738 3.680,6.674 3.729,6.093 4.276 M16.366 8.563 C 16.293 8.586,16.128 8.707,16.001 8.832 C 15.803 9.026,15.762 9.093,15.721 9.280 C 15.660 9.562,15.604 11.941,15.602 14.370 C 15.601 15.399,15.589 16.240,15.575 16.240 C 15.561 16.240,15.287 15.991,14.965 15.687 C 14.286 15.046,13.897 14.713,13.712 14.613 C 13.613 14.560,13.485 14.542,13.200 14.541 C 12.856 14.540,12.802 14.551,12.633 14.650 C 12.246 14.877,12.060 15.242,12.087 15.718 C 12.101 15.967,12.117 16.008,12.277 16.216 C 12.579 16.608,13.628 17.704,14.623 18.667 C 16.065 20.064,16.437 20.360,16.752 20.360 C 16.942 20.360,17.258 20.226,17.501 20.043 C 18.067 19.615,21.072 16.605,21.388 16.148 C 21.492 15.998,21.500 15.958,21.500 15.600 C 21.500 15.240,21.492 15.201,21.380 15.022 C 21.300 14.895,21.181 14.783,21.023 14.686 C 20.792 14.544,20.776 14.540,20.403 14.543 C 20.125 14.545,19.984 14.564,19.891 14.613 C 19.701 14.713,19.256 15.094,18.590 15.726 L 18.000 16.286 18.000 12.765 L 18.000 9.245 17.774 9.000 C 17.439 8.639,17.279 8.559,16.852 8.538 C 16.659 8.529,16.440 8.540,16.366 8.563 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/table.svg b/packages/icons/svg/table.svg
index ec67629f32..38c3a06231 100644
--- a/packages/icons/svg/table.svg
+++ b/packages/icons/svg/table.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.880 4.959 L 4.900 4.981 4.640 5.116 C 4.149 5.370,3.819 5.610,3.460 5.975 C 3.059 6.383,2.803 6.778,2.558 7.366 L 2.402 7.740 2.401 12.026 L 2.400 16.312 2.600 16.739 C 3.152 17.923,3.719 18.480,4.919 19.020 L 5.322 19.201 12.051 19.190 L 18.780 19.180 19.205 18.971 C 20.352 18.408,20.969 17.763,21.422 16.654 L 21.599 16.220 21.600 11.946 L 21.600 7.672 21.379 7.220 C 20.839 6.114,20.297 5.557,19.292 5.077 L 18.965 4.920 15.912 4.928 C 14.234 4.933,11.069 4.946,8.880 4.959 M10.800 10.800 L 10.800 12.000 7.800 12.000 L 4.800 12.000 4.800 10.800 L 4.800 9.600 7.800 9.600 L 10.800 9.600 10.800 10.800 M19.200 10.800 L 19.200 12.000 16.200 12.000 L 13.200 12.000 13.200 10.800 L 13.200 9.600 16.200 9.600 L 19.200 9.600 19.200 10.800 M10.800 15.600 L 10.800 16.800 9.010 16.798 C 8.025 16.797,6.874 16.781,6.451 16.762 C 5.539 16.721,5.437 16.688,5.149 16.333 C 5.002 16.150,4.958 16.058,4.924 15.863 C 4.877 15.593,4.801 14.783,4.800 14.550 L 4.800 14.400 7.800 14.400 L 10.800 14.400 10.800 15.600 M19.182 14.830 C 19.145 15.416,19.055 16.016,18.983 16.155 C 18.885 16.343,18.723 16.515,18.542 16.621 C 18.385 16.713,18.313 16.724,17.596 16.760 C 17.169 16.781,16.006 16.799,15.010 16.799 L 13.200 16.800 13.200 15.600 L 13.200 14.400 16.205 14.400 L 19.210 14.400 19.182 14.830 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.400 4.959 L 4.900 4.983 4.680 5.096 C 4.001 5.445,3.346 6.009,2.979 6.561 C 2.875 6.717,2.703 7.044,2.595 7.287 L 2.400 7.728 2.400 12.021 L 2.400 16.314 2.573 16.687 C 3.139 17.906,3.727 18.481,4.988 19.051 L 5.317 19.200 12.039 19.200 L 18.761 19.200 19.210 18.968 C 19.788 18.671,20.113 18.450,20.454 18.123 C 20.888 17.708,21.194 17.225,21.496 16.481 L 21.600 16.226 21.600 11.950 L 21.600 7.674 21.397 7.258 C 20.864 6.163,20.325 5.602,19.331 5.105 L 18.962 4.920 16.431 4.928 C 15.039 4.932,11.875 4.946,9.400 4.959 M10.800 10.800 L 10.800 12.000 7.800 12.000 L 4.800 12.000 4.800 10.800 L 4.800 9.600 7.800 9.600 L 10.800 9.600 10.800 10.800 M19.200 10.800 L 19.200 12.000 16.200 12.000 L 13.200 12.000 13.200 10.800 L 13.200 9.600 16.200 9.600 L 19.200 9.600 19.200 10.800 M10.800 15.600 L 10.800 16.800 8.970 16.799 C 7.027 16.798,5.830 16.754,5.600 16.675 C 5.265 16.560,4.988 16.206,4.924 15.811 C 4.875 15.511,4.800 14.733,4.800 14.530 L 4.800 14.400 7.800 14.400 L 10.800 14.400 10.800 15.600 M19.182 14.790 C 19.148 15.270,19.050 15.969,18.996 16.112 C 18.926 16.294,18.688 16.549,18.505 16.638 C 18.261 16.756,17.363 16.797,15.030 16.799 L 13.200 16.800 13.200 15.600 L 13.200 14.400 16.205 14.400 L 19.210 14.400 19.182 14.790 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/tag.svg b/packages/icons/svg/tag.svg
index 764bdb06dd..5fd50da077 100644
--- a/packages/icons/svg/tag.svg
+++ b/packages/icons/svg/tag.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.980 2.598 C 4.596 2.664,3.892 3.114,3.450 3.575 C 3.092 3.948,2.829 4.350,2.577 4.909 L 2.400 5.300 2.400 8.787 L 2.400 12.274 2.546 12.467 C 2.802 12.805,3.567 13.603,5.700 15.754 C 8.060 18.135,10.894 20.912,11.313 21.255 C 11.558 21.455,11.628 21.490,11.847 21.527 C 12.211 21.587,12.365 21.533,12.735 21.218 C 13.668 20.422,21.057 13.008,21.324 12.600 C 21.704 12.019,21.646 11.739,20.993 10.997 C 20.559 10.505,14.394 4.336,13.317 3.316 L 12.575 2.613 12.021 2.587 C 11.300 2.552,5.188 2.562,4.980 2.598 M6.674 5.111 C 6.982 5.319,7.033 5.437,7.066 6.014 L 7.093 6.485 6.818 6.762 C 6.508 7.074,6.376 7.135,6.010 7.132 C 5.570 7.129,5.229 6.928,5.053 6.570 C 4.953 6.366,4.940 6.297,4.941 5.960 C 4.942 5.649,4.958 5.550,5.029 5.416 C 5.134 5.218,5.362 5.010,5.511 4.977 C 5.571 4.964,5.638 4.946,5.660 4.937 C 5.682 4.928,5.868 4.929,6.074 4.940 C 6.427 4.957,6.461 4.967,6.674 5.111 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.500 2.595 L 4.820 2.620 4.487 2.800 C 4.108 3.003,3.607 3.389,3.357 3.670 C 3.105 3.953,2.779 4.469,2.578 4.902 L 2.400 5.286 2.400 8.793 L 2.400 12.300 2.675 12.623 C 3.365 13.433,8.601 18.697,10.596 20.586 C 11.047 21.013,11.485 21.394,11.576 21.437 C 11.666 21.481,11.834 21.528,11.949 21.543 C 12.290 21.587,12.472 21.470,13.355 20.637 C 14.331 19.717,19.052 14.996,20.338 13.655 C 21.613 12.326,21.708 12.149,21.442 11.616 C 21.377 11.486,21.181 11.218,21.008 11.020 C 20.648 10.610,14.541 4.492,13.343 3.342 L 12.553 2.584 9.367 2.577 C 7.614 2.573,5.874 2.581,5.500 2.595 M6.581 5.060 C 6.956 5.275,7.019 5.409,7.064 6.073 L 7.092 6.485 6.896 6.688 C 6.788 6.799,6.620 6.942,6.522 7.005 C 6.366 7.106,6.308 7.120,6.042 7.119 C 5.562 7.118,5.255 6.941,5.056 6.551 C 4.973 6.388,4.960 6.307,4.960 5.949 C 4.960 5.562,4.967 5.524,5.075 5.354 C 5.296 5.006,5.512 4.914,6.040 4.946 C 6.336 4.963,6.456 4.989,6.581 5.060 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/telegram.svg b/packages/icons/svg/telegram.svg
index a0b07cb58d..40d39e6d99 100644
--- a/packages/icons/svg/telegram.svg
+++ b/packages/icons/svg/telegram.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.026 3.160,9.091 3.415,8.060 3.918 C 5.287 5.272,3.420 7.913,3.059 10.992 C 2.666 14.352,4.239 17.669,7.120 19.560 C 7.929 20.090,9.126 20.589,10.092 20.797 C 14.142 21.669,18.255 19.669,20.083 15.940 C 21.302 13.453,21.302 10.547,20.083 8.060 C 19.190 6.237,17.762 4.810,15.944 3.923 C 15.066 3.494,14.269 3.244,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 M16.049 8.562 L 16.171 8.685 16.149 9.132 C 16.117 9.802,15.806 11.883,15.356 14.440 C 15.125 15.752,15.097 15.882,14.990 16.100 C 14.809 16.468,14.603 16.569,14.213 16.482 C 14.035 16.442,13.761 16.276,12.708 15.571 C 11.032 14.448,10.813 14.290,10.719 14.138 C 10.530 13.832,10.643 13.668,11.763 12.620 C 13.015 11.450,13.678 10.798,13.742 10.675 C 13.817 10.532,13.739 10.417,13.591 10.454 C 13.473 10.483,12.623 11.033,10.760 12.283 C 9.356 13.225,9.174 13.320,8.776 13.320 C 8.524 13.320,7.932 13.176,7.210 12.939 C 6.444 12.688,6.275 12.530,6.484 12.264 C 6.530 12.205,6.670 12.106,6.794 12.043 C 7.305 11.785,12.197 9.686,13.700 9.079 C 14.947 8.576,15.358 8.443,15.673 8.441 C 15.903 8.440,15.937 8.451,16.049 8.562 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.078 3.060 C 9.848 3.209,8.988 3.464,7.940 3.990 C 7.026 4.450,6.304 4.981,5.557 5.746 C 3.305 8.050,2.464 11.369,3.348 14.460 C 4.062 16.957,5.924 19.127,8.246 20.166 C 9.610 20.777,10.903 21.039,12.300 20.988 C 16.060 20.851,19.315 18.422,20.516 14.858 C 21.158 12.953,21.159 11.050,20.521 9.160 C 20.065 7.807,19.417 6.743,18.443 5.746 C 17.703 4.988,17.012 4.478,16.080 4.002 C 14.842 3.370,13.865 3.114,12.395 3.040 C 11.507 2.995,11.624 2.994,11.078 3.060 M16.026 8.542 C 16.181 8.660,16.189 8.738,16.119 9.446 C 16.021 10.422,15.475 13.885,15.183 15.378 C 14.992 16.352,14.742 16.626,14.193 16.465 C 13.958 16.395,13.404 16.050,11.998 15.094 C 10.648 14.175,10.542 14.063,10.716 13.733 C 10.830 13.516,11.107 13.233,12.410 12.002 C 13.042 11.405,13.606 10.855,13.663 10.780 C 13.777 10.630,13.781 10.469,13.670 10.448 C 13.574 10.429,13.197 10.664,11.249 11.955 C 10.319 12.571,9.455 13.125,9.329 13.187 C 8.910 13.391,8.427 13.336,7.260 12.952 C 6.686 12.763,6.451 12.636,6.415 12.495 C 6.375 12.336,6.507 12.199,6.883 12.011 C 7.472 11.717,11.917 9.806,13.644 9.105 C 15.326 8.422,15.740 8.324,16.026 8.542 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/telesign.svg b/packages/icons/svg/telesign.svg
new file mode 100644
index 0000000000..fcbadbac59
--- /dev/null
+++ b/packages/icons/svg/telesign.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.120 5.023 C 6.868 5.168,5.885 5.517,4.938 6.153 C 2.972 7.474,1.820 9.867,2.033 12.186 C 2.184 13.842,2.820 15.220,3.960 16.361 C 5.036 17.439,6.413 18.106,7.921 18.282 C 8.462 18.345,9.411 18.308,9.934 18.202 C 12.468 17.692,14.434 15.848,15.097 13.360 L 15.188 13.020 15.442 12.988 C 15.772 12.947,15.990 12.848,16.221 12.635 C 16.494 12.383,16.610 12.130,16.631 11.740 C 16.653 11.312,16.553 11.039,16.266 10.745 C 16.017 10.489,15.710 10.359,15.342 10.353 C 14.980 10.346,14.719 10.448,14.443 10.703 C 14.111 11.011,14.036 11.206,13.997 11.860 C 13.962 12.451,13.885 12.866,13.719 13.368 C 13.096 15.241,11.423 16.648,9.474 16.937 C 8.360 17.102,7.302 16.937,6.300 16.440 C 4.802 15.698,3.740 14.303,3.413 12.650 C 3.310 12.123,3.319 11.145,3.434 10.611 C 3.836 8.731,5.161 7.220,6.940 6.613 C 7.463 6.435,7.942 6.357,8.678 6.332 L 9.376 6.308 9.714 5.972 C 9.900 5.787,10.160 5.551,10.290 5.449 L 10.528 5.262 10.334 5.213 C 9.754 5.064,8.611 4.966,8.120 5.023 M14.780 5.023 C 14.714 5.033,14.516 5.059,14.340 5.082 C 14.164 5.105,13.853 5.168,13.648 5.222 C 11.322 5.831,9.489 7.669,8.881 10.000 L 8.793 10.340 8.567 10.351 C 8.111 10.374,7.684 10.665,7.479 11.093 C 7.326 11.411,7.298 11.653,7.378 11.966 C 7.485 12.383,7.738 12.693,8.120 12.875 C 8.304 12.963,8.395 12.980,8.680 12.979 C 8.969 12.979,9.054 12.962,9.246 12.869 C 9.370 12.808,9.547 12.676,9.639 12.576 C 9.892 12.302,9.965 12.100,10.004 11.563 C 10.052 10.898,10.074 10.745,10.184 10.322 C 10.707 8.310,12.362 6.778,14.400 6.418 C 14.910 6.328,15.787 6.327,16.260 6.416 C 17.699 6.687,18.977 7.512,19.739 8.660 C 20.374 9.618,20.649 10.513,20.653 11.640 C 20.656 12.310,20.599 12.705,20.413 13.295 C 19.991 14.639,18.904 15.884,17.635 16.477 C 16.873 16.833,16.319 16.958,15.367 16.988 L 14.634 17.011 14.261 17.378 C 14.057 17.579,13.797 17.815,13.684 17.900 C 13.541 18.010,13.496 18.065,13.532 18.086 C 13.561 18.102,13.773 18.156,14.002 18.206 C 14.365 18.285,14.538 18.297,15.320 18.298 C 16.300 18.300,16.520 18.271,17.293 18.036 C 20.164 17.161,22.112 14.418,21.988 11.424 C 21.915 9.682,21.261 8.182,20.040 6.959 C 19.056 5.974,17.844 5.342,16.480 5.102 C 16.115 5.038,15.029 4.988,14.780 5.023 M7.940 7.740 C 7.373 7.845,6.743 8.118,6.297 8.454 C 6.012 8.667,5.550 9.144,5.363 9.416 C 5.165 9.703,4.890 10.310,4.798 10.664 C 4.671 11.149,4.650 11.954,4.751 12.441 C 5.170 14.461,6.999 15.829,9.025 15.638 C 9.978 15.547,10.809 15.157,11.483 14.483 C 11.837 14.129,12.071 13.796,12.282 13.345 C 12.503 12.874,12.595 12.495,12.643 11.860 C 12.698 11.138,12.762 10.857,12.966 10.441 C 13.095 10.179,13.201 10.035,13.437 9.801 C 13.782 9.461,14.060 9.282,14.487 9.129 C 14.748 9.034,14.838 9.023,15.320 9.022 C 15.811 9.021,15.889 9.031,16.180 9.134 C 16.610 9.285,17.109 9.622,17.362 9.933 C 18.474 11.296,18.074 13.263,16.526 14.051 L 16.272 14.180 16.144 14.520 C 16.074 14.708,15.931 15.030,15.828 15.237 C 15.725 15.444,15.648 15.622,15.659 15.632 C 15.701 15.674,16.322 15.543,16.669 15.420 C 17.953 14.961,18.866 13.947,19.224 12.580 C 19.335 12.159,19.327 11.135,19.209 10.710 C 19.009 9.986,18.718 9.456,18.244 8.953 C 17.841 8.524,17.534 8.298,17.034 8.062 C 16.106 7.624,15.038 7.561,14.060 7.885 C 12.591 8.373,11.554 9.661,11.361 11.239 C 11.339 11.425,11.320 11.687,11.320 11.821 C 11.320 12.148,11.232 12.472,11.033 12.880 C 10.716 13.532,10.006 14.098,9.300 14.261 C 8.959 14.341,8.332 14.340,8.020 14.261 C 7.575 14.148,7.130 13.892,6.800 13.560 C 6.276 13.033,6.048 12.524,6.011 11.799 C 5.993 11.454,6.005 11.319,6.073 11.047 C 6.275 10.251,6.724 9.683,7.471 9.280 L 7.730 9.140 7.860 8.800 C 7.931 8.612,8.073 8.293,8.175 8.090 C 8.277 7.888,8.360 7.712,8.360 7.701 C 8.360 7.672,8.263 7.681,7.940 7.740 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/template.svg b/packages/icons/svg/template.svg
index 75cf492edd..55701ee8d1 100644
--- a/packages/icons/svg/template.svg
+++ b/packages/icons/svg/template.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.320 3.682 C 5.693 3.712,4.526 3.735,4.268 3.804 C 4.079 3.854,3.818 4.108,3.713 4.345 C 3.640 4.511,3.635 4.618,3.636 5.980 C 3.637 7.123,3.649 7.465,3.693 7.568 C 3.766 7.744,4.118 8.125,4.348 8.277 L 4.534 8.400 11.968 8.400 L 19.403 8.400 19.572 8.314 C 19.789 8.203,20.264 7.728,20.341 7.545 C 20.388 7.431,20.400 7.197,20.399 6.391 C 20.398 5.215,20.351 4.496,20.266 4.334 C 20.205 4.218,19.873 3.883,19.665 3.726 L 19.549 3.640 17.165 3.647 C 15.853 3.650,12.773 3.666,10.320 3.682 M6.980 10.922 C 5.726 10.937,4.597 10.951,4.471 10.954 C 4.276 10.959,4.222 10.979,4.099 11.086 C 4.020 11.156,3.901 11.291,3.835 11.387 C 3.725 11.547,3.712 11.602,3.677 12.071 C 3.656 12.351,3.628 14.146,3.615 16.060 L 3.590 19.540 3.856 19.849 C 4.002 20.019,4.176 20.187,4.242 20.221 C 4.309 20.256,4.511 20.301,4.692 20.322 C 5.064 20.365,12.169 20.427,12.323 20.388 C 12.433 20.360,12.903 19.904,13.060 19.672 L 13.160 19.524 13.160 15.592 C 13.159 11.920,13.155 11.653,13.090 11.556 C 12.985 11.401,12.839 11.240,12.629 11.050 L 12.442 10.880 10.851 10.888 C 9.976 10.892,8.234 10.908,6.980 10.922 M16.513 10.957 C 16.221 10.998,15.939 11.193,15.811 11.443 C 15.756 11.548,15.702 11.755,15.679 11.941 C 15.658 12.117,15.629 13.493,15.615 15.000 C 15.589 17.955,15.626 19.354,15.740 19.627 C 15.901 20.011,16.205 20.244,16.653 20.327 C 17.064 20.403,19.179 20.401,19.477 20.324 C 19.664 20.276,19.745 20.220,20.053 19.924 L 20.411 19.580 20.388 15.672 C 20.366 11.907,20.363 11.758,20.287 11.587 C 20.244 11.490,20.142 11.336,20.060 11.245 C 19.812 10.970,19.712 10.955,18.120 10.939 C 17.361 10.931,16.638 10.939,16.513 10.957 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.438 3.685 C 5.450 3.719,4.378 3.747,4.174 3.853 C 3.993 3.946,3.727 4.266,3.678 4.448 C 3.651 4.549,3.640 5.130,3.648 6.078 L 3.660 7.551 3.842 7.785 C 3.942 7.914,4.136 8.105,4.274 8.210 L 4.525 8.400 11.964 8.400 C 19.360 8.400,19.404 8.400,19.562 8.319 C 19.765 8.215,20.311 7.666,20.350 7.526 C 20.400 7.349,20.380 4.849,20.327 4.581 C 20.272 4.306,20.166 4.157,19.806 3.850 L 19.559 3.640 17.310 3.647 C 16.072 3.650,12.980 3.667,10.438 3.685 M7.082 10.924 C 5.598 10.941,4.342 10.966,4.292 10.978 C 4.161 11.011,3.933 11.224,3.816 11.423 C 3.664 11.683,3.645 12.108,3.614 16.040 L 3.587 19.541 3.854 19.846 C 4.002 20.014,4.186 20.182,4.264 20.219 C 4.513 20.337,5.058 20.357,8.740 20.385 L 12.340 20.411 12.608 20.164 C 12.755 20.029,12.939 19.830,13.018 19.723 L 13.160 19.529 13.160 15.730 C 13.160 13.641,13.148 11.844,13.134 11.738 C 13.110 11.565,13.073 11.509,12.788 11.212 L 12.469 10.880 11.124 10.887 C 10.385 10.890,8.566 10.907,7.082 10.924 M16.260 11.035 C 16.036 11.136,15.817 11.394,15.739 11.648 C 15.569 12.198,15.552 18.935,15.719 19.555 C 15.789 19.817,15.991 20.043,16.290 20.196 C 16.554 20.331,16.564 20.333,17.332 20.373 C 18.306 20.423,19.431 20.370,19.633 20.264 C 19.707 20.226,19.909 20.058,20.083 19.892 L 20.400 19.589 20.396 16.805 C 20.394 15.273,20.381 13.489,20.366 12.839 L 20.340 11.658 20.204 11.447 C 20.021 11.161,19.859 11.045,19.574 10.999 C 19.445 10.978,18.683 10.961,17.880 10.961 C 16.554 10.962,16.405 10.968,16.260 11.035 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/terminal.svg b/packages/icons/svg/terminal.svg
index 1ed13e329f..4127526d94 100644
--- a/packages/icons/svg/terminal.svg
+++ b/packages/icons/svg/terminal.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.420 3.759 C 3.646 3.783,3.893 3.751,3.408 4.149 C 3.082 4.416,2.788 4.781,2.569 5.193 L 2.400 5.509 2.400 11.996 L 2.400 18.483 2.505 18.691 C 2.888 19.451,3.349 19.912,4.109 20.295 L 4.317 20.400 10.669 20.396 C 14.162 20.394,17.633 20.381,18.383 20.366 L 19.746 20.340 20.083 20.172 C 20.632 19.897,21.092 19.429,21.438 18.794 L 21.599 18.500 21.599 12.009 L 21.600 5.517 21.494 5.309 C 21.210 4.747,20.815 4.295,20.313 3.960 L 19.955 3.720 14.407 3.729 C 11.356 3.733,7.762 3.747,6.420 3.759 M7.660 7.396 C 7.890 7.502,8.301 7.868,9.365 8.912 C 10.393 9.921,11.482 11.073,11.723 11.406 C 11.873 11.614,11.877 11.629,11.879 11.962 C 11.880 12.252,11.864 12.336,11.776 12.513 C 11.646 12.774,10.363 14.121,8.931 15.499 C 8.043 16.353,7.874 16.498,7.617 16.625 C 7.352 16.757,7.299 16.769,7.099 16.748 C 6.806 16.718,6.497 16.543,6.331 16.313 C 6.195 16.124,6.079 15.758,6.081 15.522 C 6.083 15.128,6.467 14.661,8.335 12.773 L 9.094 12.006 8.140 11.033 C 7.108 9.979,6.455 9.273,6.282 9.020 C 6.121 8.787,6.067 8.584,6.091 8.315 C 6.127 7.921,6.350 7.572,6.678 7.399 C 6.877 7.294,7.435 7.292,7.660 7.396 M17.396 14.624 C 17.747 14.913,17.807 15.022,17.853 15.450 C 17.875 15.654,17.881 15.883,17.866 15.960 C 17.834 16.128,17.588 16.464,17.408 16.586 C 17.172 16.745,16.942 16.763,14.853 16.788 L 12.846 16.813 12.583 16.560 C 12.427 16.410,12.276 16.219,12.214 16.092 C 12.118 15.894,12.111 15.847,12.129 15.503 C 12.144 15.211,12.168 15.097,12.236 14.987 C 12.380 14.753,12.573 14.611,12.815 14.561 C 13.042 14.514,14.755 14.458,16.296 14.446 L 17.172 14.440 17.396 14.624 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.820 3.763 C 5.593 3.778,4.044 3.805,3.960 3.828 C 3.727 3.893,3.590 3.981,3.295 4.254 C 3.004 4.524,2.689 4.945,2.505 5.309 L 2.400 5.517 2.400 12.000 L 2.400 18.483 2.505 18.691 C 2.876 19.424,3.384 19.932,4.117 20.300 L 4.335 20.409 12.017 20.394 L 19.700 20.378 20.034 20.199 C 20.649 19.870,21.029 19.492,21.410 18.832 L 21.600 18.503 21.600 12.010 L 21.600 5.517 21.494 5.309 C 21.223 4.773,20.830 4.328,20.294 3.950 L 19.968 3.720 15.754 3.728 C 13.436 3.733,9.866 3.748,7.820 3.763 M7.683 7.414 C 7.924 7.529,8.527 8.082,9.760 9.317 C 11.019 10.579,11.644 11.260,11.790 11.527 C 11.918 11.762,11.915 12.183,11.785 12.460 C 11.658 12.730,11.075 13.369,9.791 14.650 C 8.067 16.367,7.589 16.760,7.221 16.760 C 6.806 16.760,6.348 16.447,6.206 16.067 C 6.092 15.761,6.063 15.513,6.122 15.333 C 6.239 14.976,6.691 14.446,8.177 12.930 L 9.089 12.000 8.197 11.090 C 7.152 10.022,6.442 9.251,6.277 9.002 C 6.102 8.740,6.061 8.550,6.112 8.245 C 6.182 7.827,6.485 7.439,6.807 7.357 C 7.015 7.305,7.522 7.337,7.683 7.414 M17.476 14.710 C 17.799 15.023,17.846 15.145,17.855 15.683 C 17.860 16.016,17.856 16.032,17.710 16.252 C 17.520 16.539,17.330 16.664,17.000 16.720 C 16.854 16.744,15.881 16.774,14.780 16.788 L 12.820 16.812 12.564 16.538 C 12.424 16.388,12.264 16.167,12.209 16.047 C 12.119 15.850,12.112 15.797,12.135 15.497 C 12.164 15.110,12.192 15.023,12.345 14.842 C 12.496 14.662,12.718 14.571,13.080 14.539 C 13.452 14.506,15.262 14.455,16.369 14.446 L 17.197 14.440 17.476 14.710 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/text.svg b/packages/icons/svg/text.svg
new file mode 100644
index 0000000000..c7dfd07350
--- /dev/null
+++ b/packages/icons/svg/text.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.009 5.930 L 4.020 7.860 4.133 8.104 C 4.276 8.413,4.585 8.721,4.900 8.868 C 5.107 8.965,5.190 8.980,5.500 8.980 C 5.810 8.980,5.893 8.965,6.100 8.868 C 6.417 8.720,6.725 8.413,6.866 8.104 C 6.960 7.897,6.979 7.794,6.993 7.430 L 7.009 7.000 8.504 7.000 L 10.000 7.000 10.000 11.997 L 10.000 16.994 9.070 17.007 L 8.140 17.020 7.880 17.145 C 7.548 17.304,7.302 17.551,7.144 17.880 C 7.034 18.111,7.020 18.180,7.020 18.500 C 7.020 18.810,7.035 18.893,7.132 19.100 C 7.279 19.415,7.587 19.724,7.896 19.867 L 8.140 19.980 12.000 19.980 L 15.860 19.980 16.104 19.867 C 16.413 19.724,16.721 19.415,16.868 19.100 C 16.965 18.893,16.980 18.810,16.980 18.500 C 16.980 18.189,16.965 18.106,16.867 17.896 C 16.724 17.587,16.415 17.279,16.100 17.132 C 15.862 17.021,15.852 17.020,14.930 17.007 L 14.000 16.994 14.000 11.997 L 14.000 7.000 15.496 7.000 L 16.991 7.000 17.007 7.430 C 17.021 7.794,17.040 7.897,17.134 8.104 C 17.275 8.413,17.583 8.720,17.900 8.868 C 18.107 8.965,18.190 8.980,18.500 8.980 C 18.810 8.980,18.893 8.965,19.100 8.868 C 19.415 8.721,19.724 8.413,19.867 8.104 L 19.980 7.860 19.991 5.930 L 20.003 4.000 12.000 4.000 L 3.997 4.000 4.009 5.930 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/textmagic.svg b/packages/icons/svg/textmagic.svg
new file mode 100644
index 0000000000..9eca4b11f1
--- /dev/null
+++ b/packages/icons/svg/textmagic.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.580 3.047 C 3.859 3.185,3.199 3.848,3.044 4.592 C 2.982 4.892,2.982 19.108,3.044 19.408 C 3.201 20.158,3.842 20.799,4.592 20.956 C 4.892 21.018,19.108 21.018,19.408 20.956 C 20.158 20.799,20.799 20.158,20.956 19.408 C 21.018 19.108,21.018 4.892,20.956 4.592 C 20.797 3.830,20.138 3.181,19.383 3.043 C 19.076 2.987,4.875 2.991,4.580 3.047 M16.810 8.657 C 17.623 8.944,18.102 9.499,18.204 10.271 C 18.228 10.453,18.237 10.647,18.223 10.702 C 18.197 10.807,17.936 11.120,17.875 11.120 C 17.856 11.120,17.840 11.008,17.839 10.870 C 17.837 9.806,17.092 9.000,16.112 9.000 C 15.994 9.000,15.920 8.982,15.920 8.954 C 15.920 8.929,15.984 8.830,16.063 8.734 C 16.190 8.579,16.223 8.560,16.373 8.561 C 16.465 8.561,16.661 8.605,16.810 8.657 M16.630 9.488 C 17.101 9.662,17.405 10.041,17.461 10.523 C 17.485 10.725,17.478 10.757,17.380 10.873 C 17.321 10.943,17.256 11.000,17.236 11.000 C 17.216 11.000,17.200 10.911,17.200 10.802 C 17.200 10.536,17.064 10.187,16.895 10.018 C 16.705 9.828,16.496 9.730,16.162 9.675 L 15.876 9.628 16.006 9.494 C 16.153 9.342,16.233 9.342,16.630 9.488 M10.302 10.273 C 10.290 10.313,10.200 10.542,10.103 10.783 L 9.928 11.220 9.264 11.231 L 8.600 11.242 8.600 13.141 L 8.600 15.040 8.020 15.040 L 7.440 15.040 7.440 13.140 L 7.440 11.240 6.580 11.240 L 5.720 11.240 5.720 10.720 L 5.720 10.200 8.023 10.200 C 10.231 10.200,10.324 10.203,10.302 10.273 M12.936 11.484 L 13.732 12.767 13.851 12.573 C 13.917 12.467,14.275 11.889,14.648 11.290 L 15.326 10.200 15.883 10.200 L 16.441 10.200 16.430 12.590 L 16.420 14.980 15.840 14.980 L 15.260 14.980 15.240 13.687 L 15.220 12.394 14.579 13.407 L 13.939 14.420 13.726 14.432 C 13.609 14.439,13.492 14.426,13.465 14.404 C 13.439 14.382,13.139 13.923,12.799 13.383 C 12.458 12.843,12.167 12.401,12.150 12.401 C 12.133 12.400,12.120 12.985,12.120 13.700 L 12.120 15.000 11.540 15.000 L 10.960 15.000 10.960 12.600 L 10.960 10.200 11.550 10.200 L 12.140 10.201 12.936 11.484 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/thumb-dowm.svg b/packages/icons/svg/thumb-dowm.svg
index 9988a93e3a..89bfe6c980 100644
--- a/packages/icons/svg/thumb-dowm.svg
+++ b/packages/icons/svg/thumb-dowm.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.800 2.517 C 5.962 2.549,5.904 2.565,5.485 2.877 C 4.971 3.260,4.728 3.581,4.564 4.096 C 4.349 4.772,4.078 5.968,3.583 8.435 C 2.926 11.704,2.868 12.259,3.118 12.824 C 3.346 13.341,3.999 13.976,4.629 14.294 L 4.837 14.400 7.219 14.400 L 9.600 14.400 9.600 17.046 L 9.600 19.692 9.780 20.023 C 10.158 20.715,10.674 21.226,11.175 21.402 C 11.289 21.442,11.537 21.495,11.726 21.520 C 12.143 21.576,12.328 21.538,12.632 21.331 C 13.018 21.070,13.100 20.836,13.259 19.549 C 13.474 17.808,13.521 17.701,14.955 15.668 C 15.976 14.222,16.302 13.667,16.627 12.820 L 16.780 12.420 16.791 8.530 L 16.801 4.640 16.655 4.350 C 16.308 3.659,15.924 3.270,15.270 2.948 C 14.634 2.633,14.512 2.606,13.520 2.561 C 12.407 2.510,7.758 2.479,6.800 2.517 M19.270 2.538 C 18.903 2.679,18.358 3.136,18.226 3.412 C 18.189 3.490,18.142 3.646,18.120 3.759 C 18.022 4.275,17.962 9.649,18.038 11.120 C 18.076 11.869,18.134 12.074,18.404 12.425 C 18.717 12.831,19.338 13.160,19.793 13.160 C 20.433 13.160,21.086 12.694,21.479 11.955 L 21.600 11.729 21.598 9.234 C 21.595 5.923,21.548 4.019,21.461 3.700 C 21.340 3.253,21.046 2.927,20.531 2.671 C 20.225 2.519,20.175 2.507,19.811 2.494 C 19.537 2.485,19.375 2.498,19.270 2.538 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.372 2.521 C 19.049 2.587,18.395 3.096,18.241 3.400 C 18.202 3.477,18.150 3.634,18.125 3.750 C 18.004 4.321,17.963 10.956,18.076 11.653 C 18.140 12.043,18.291 12.324,18.589 12.603 C 18.869 12.864,19.101 12.997,19.459 13.101 C 20.173 13.309,21.014 12.829,21.484 11.946 L 21.611 11.708 21.588 8.224 C 21.563 4.390,21.538 3.838,21.373 3.471 C 21.237 3.169,20.909 2.863,20.516 2.672 C 20.269 2.551,20.164 2.524,19.880 2.507 C 19.693 2.495,19.464 2.502,19.372 2.521 M6.193 2.557 C 5.919 2.595,5.703 2.703,5.371 2.968 C 5.037 3.233,4.862 3.444,4.698 3.780 C 4.470 4.246,4.115 5.744,3.505 8.820 C 2.909 11.824,2.869 12.303,3.162 12.907 C 3.375 13.345,4.000 13.945,4.566 14.257 L 4.827 14.400 7.213 14.400 L 9.600 14.400 9.600 17.042 C 9.600 19.651,9.601 19.685,9.685 19.852 C 10.001 20.482,10.577 21.119,11.016 21.323 C 11.306 21.459,11.913 21.574,12.140 21.536 C 12.515 21.475,12.905 21.167,13.020 20.840 C 13.118 20.564,13.146 20.411,13.277 19.440 C 13.498 17.801,13.550 17.680,14.829 15.853 C 15.971 14.221,16.366 13.545,16.679 12.687 L 16.800 12.355 16.800 8.493 L 16.800 4.632 16.634 4.313 C 16.297 3.665,15.922 3.292,15.280 2.964 C 14.791 2.714,14.581 2.648,14.118 2.597 C 13.663 2.547,6.524 2.511,6.193 2.557 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/thumb-up.svg b/packages/icons/svg/thumb-up.svg
index c95b5ba7b3..c00d63f37b 100644
--- a/packages/icons/svg/thumb-up.svg
+++ b/packages/icons/svg/thumb-up.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.438 2.633 C 11.340 2.696,11.194 2.820,11.114 2.909 C 10.934 3.110,10.882 3.324,10.739 4.473 C 10.619 5.439,10.555 5.757,10.414 6.114 C 10.221 6.599,9.926 7.079,9.114 8.230 C 7.963 9.861,7.618 10.447,7.343 11.238 L 7.200 11.648 7.200 15.529 L 7.200 19.411 7.366 19.722 C 7.748 20.440,8.078 20.757,8.811 21.114 C 9.322 21.363,9.534 21.433,9.917 21.483 C 10.341 21.538,13.321 21.598,15.691 21.599 L 17.682 21.600 17.931 21.475 C 18.483 21.196,18.827 20.933,19.096 20.583 C 19.292 20.327,19.365 20.164,19.516 19.640 C 19.885 18.357,20.961 12.939,21.025 12.040 C 21.047 11.740,21.037 11.663,20.944 11.387 C 20.886 11.215,20.778 10.981,20.705 10.867 C 20.525 10.589,20.004 10.092,19.660 9.871 L 19.380 9.691 17.280 9.645 C 16.125 9.620,15.005 9.599,14.790 9.600 L 14.400 9.600 14.400 6.959 L 14.400 4.317 14.296 4.109 C 14.079 3.676,13.762 3.249,13.509 3.048 C 13.014 2.655,12.618 2.520,11.960 2.520 C 11.650 2.520,11.598 2.531,11.438 2.633 M3.652 10.936 C 3.429 11.038,3.052 11.312,2.844 11.523 C 2.595 11.776,2.526 11.973,2.477 12.569 C 2.421 13.259,2.388 17.840,2.431 19.080 C 2.466 20.069,2.478 20.202,2.558 20.400 C 2.746 20.868,3.169 21.262,3.699 21.461 C 4.497 21.762,5.366 21.318,5.886 20.343 L 6.013 20.105 5.986 16.443 C 5.972 14.428,5.943 12.638,5.921 12.464 C 5.856 11.935,5.784 11.776,5.464 11.459 C 5.274 11.270,5.091 11.134,4.909 11.046 C 4.668 10.929,4.592 10.912,4.209 10.896 C 3.885 10.882,3.749 10.892,3.652 10.936 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.533 2.581 C 11.347 2.677,11.087 2.911,11.019 3.042 C 10.925 3.223,10.853 3.592,10.722 4.560 C 10.655 5.055,10.572 5.577,10.539 5.720 C 10.441 6.137,10.085 6.804,9.525 7.620 C 7.898 9.990,7.602 10.484,7.322 11.293 L 7.200 11.646 7.200 15.525 L 7.200 19.403 7.305 19.611 C 7.605 20.207,8.002 20.658,8.463 20.927 C 8.805 21.127,9.300 21.345,9.581 21.420 C 9.968 21.522,11.027 21.558,14.440 21.586 L 17.660 21.612 17.920 21.481 C 18.568 21.156,19.096 20.688,19.298 20.260 C 19.353 20.145,19.452 19.855,19.520 19.615 C 19.901 18.262,20.945 13.007,21.024 12.040 C 21.053 11.694,21.014 11.513,20.818 11.089 C 20.712 10.859,20.610 10.724,20.332 10.446 C 20.138 10.253,19.845 10.004,19.680 9.894 L 19.380 9.693 17.100 9.646 C 15.846 9.620,14.726 9.599,14.610 9.599 L 14.400 9.600 14.400 6.959 L 14.400 4.317 14.295 4.109 C 13.909 3.341,13.345 2.809,12.720 2.622 C 12.388 2.522,11.693 2.499,11.533 2.581 M3.729 10.918 C 3.439 10.990,2.781 11.523,2.639 11.802 C 2.599 11.880,2.547 12.042,2.523 12.162 C 2.404 12.758,2.367 19.328,2.479 20.056 C 2.565 20.615,2.963 21.112,3.548 21.390 C 3.827 21.523,3.894 21.539,4.180 21.539 C 4.399 21.540,4.563 21.516,4.700 21.464 C 5.159 21.290,5.607 20.867,5.885 20.345 L 6.013 20.104 5.986 16.502 C 5.971 14.521,5.941 12.722,5.920 12.505 C 5.893 12.233,5.850 12.041,5.781 11.892 C 5.647 11.597,5.261 11.234,4.900 11.060 C 4.660 10.944,4.566 10.922,4.240 10.905 C 4.031 10.894,3.801 10.900,3.729 10.918 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/ticket.svg b/packages/icons/svg/ticket.svg
index fdc1440f41..51f42ee176 100644
--- a/packages/icons/svg/ticket.svg
+++ b/packages/icons/svg/ticket.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.960 4.920 C 3.623 4.943,3.987 4.901,3.467 5.320 C 2.820 5.840,2.558 6.238,2.481 6.820 C 2.457 6.996,2.427 7.690,2.413 8.362 L 2.388 9.585 2.740 9.678 C 3.538 9.889,4.167 10.360,4.495 10.993 L 4.647 11.286 4.634 12.053 C 4.618 12.929,4.623 12.914,4.178 13.472 C 3.821 13.921,3.397 14.176,2.715 14.354 L 2.420 14.431 2.426 15.645 C 2.433 17.018,2.471 17.390,2.637 17.747 C 2.848 18.198,3.487 18.783,4.109 19.095 L 4.317 19.200 12.004 19.200 L 19.691 19.200 20.002 19.034 C 20.800 18.609,21.299 18.070,21.457 17.465 C 21.533 17.171,21.608 15.848,21.593 15.065 L 21.580 14.431 21.300 14.360 C 20.908 14.260,20.537 14.104,20.288 13.933 C 20.024 13.752,19.687 13.351,19.500 12.994 C 19.368 12.744,19.355 12.689,19.334 12.272 C 19.294 11.519,19.408 11.053,19.742 10.598 C 20.027 10.209,20.616 9.852,21.264 9.675 L 21.612 9.580 21.586 8.340 C 21.552 6.668,21.501 6.358,21.197 5.950 C 21.003 5.689,20.588 5.328,20.220 5.102 L 19.940 4.929 14.920 4.914 C 12.159 4.907,8.577 4.909,6.960 4.920 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.480 4.959 C 4.136 4.977,3.935 5.007,3.837 5.054 C 3.661 5.138,3.020 5.693,2.869 5.891 C 2.509 6.364,2.451 6.675,2.415 8.321 L 2.387 9.581 2.718 9.677 C 3.585 9.928,4.194 10.398,4.544 11.089 C 4.631 11.260,4.640 11.326,4.638 11.809 C 4.636 12.635,4.596 12.883,4.425 13.141 C 4.345 13.260,4.160 13.486,4.013 13.642 C 3.795 13.873,3.678 13.958,3.383 14.101 C 3.183 14.197,2.902 14.305,2.758 14.341 C 2.613 14.377,2.472 14.420,2.444 14.438 C 2.402 14.463,2.400 14.737,2.432 15.865 C 2.467 17.106,2.481 17.289,2.556 17.526 C 2.731 18.078,3.366 18.719,4.109 19.094 L 4.317 19.200 12.009 19.200 L 19.700 19.200 20.049 19.004 C 20.887 18.534,21.360 17.976,21.480 17.316 C 21.542 16.970,21.599 15.960,21.599 15.173 C 21.600 14.514,21.593 14.443,21.530 14.425 C 20.657 14.174,20.421 14.063,20.085 13.743 C 19.814 13.484,19.559 13.139,19.439 12.867 C 19.390 12.756,19.357 12.552,19.340 12.260 C 19.287 11.363,19.515 10.738,20.062 10.280 C 20.305 10.077,20.966 9.752,21.330 9.658 L 21.600 9.588 21.599 8.884 C 21.597 7.413,21.508 6.485,21.338 6.156 C 21.221 5.929,20.706 5.435,20.318 5.177 L 19.932 4.920 12.456 4.926 C 8.344 4.930,4.755 4.945,4.480 4.959 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/tiktok.svg b/packages/icons/svg/tiktok.svg
index 1b3086be6e..92d7a2b0a5 100644
--- a/packages/icons/svg/tiktok.svg
+++ b/packages/icons/svg/tiktok.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.080 9.110 C 12.079 12.921,12.064 15.351,12.039 15.569 C 11.919 16.620,11.251 17.455,10.251 17.804 C 9.927 17.918,9.377 17.944,9.005 17.865 C 7.906 17.631,7.056 16.621,6.975 15.452 C 6.881 14.102,7.793 12.894,9.092 12.649 L 9.440 12.583 9.440 11.047 L 9.440 9.511 9.130 9.538 C 8.960 9.553,8.645 9.601,8.431 9.643 C 6.802 9.969,5.324 11.141,4.582 12.696 C 3.966 13.987,3.834 15.525,4.224 16.871 C 4.527 17.916,4.966 18.655,5.738 19.420 C 7.742 21.406,10.820 21.532,13.014 19.718 C 13.995 18.907,14.647 17.810,14.969 16.431 C 15.053 16.068,15.056 15.982,15.069 12.530 C 15.077 10.588,15.089 9.000,15.096 9.000 C 15.102 9.000,15.258 9.101,15.442 9.224 C 16.333 9.820,17.569 10.243,18.610 10.308 L 19.000 10.332 19.000 8.792 L 19.000 7.252 18.709 7.227 C 18.549 7.214,18.256 7.157,18.059 7.101 C 16.519 6.663,15.381 5.372,15.101 3.745 C 15.067 3.549,15.040 3.302,15.040 3.195 L 15.040 3.000 13.560 3.000 L 12.080 3.000 12.080 9.110 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.077 8.430 C 12.075 11.417,12.060 14.301,12.044 14.840 C 12.016 15.749,12.006 15.842,11.909 16.124 C 11.764 16.547,11.561 16.875,11.263 17.169 C 10.810 17.616,10.288 17.857,9.672 17.905 C 8.119 18.024,6.784 16.544,6.998 14.939 C 7.158 13.737,7.991 12.853,9.170 12.636 L 9.440 12.586 9.440 11.048 L 9.440 9.511 9.170 9.537 C 7.794 9.673,6.670 10.188,5.720 11.120 C 4.782 12.041,4.209 13.227,4.041 14.599 C 3.861 16.070,4.310 17.702,5.202 18.818 C 6.821 20.843,9.296 21.525,11.591 20.577 C 13.074 19.965,14.212 18.732,14.755 17.151 C 15.064 16.252,15.049 16.467,15.076 12.534 L 15.100 9.008 15.540 9.284 C 16.480 9.873,17.883 10.320,18.795 10.320 L 19.000 10.320 19.000 8.780 L 19.000 7.240 18.850 7.239 C 18.768 7.239,18.538 7.205,18.340 7.164 C 16.926 6.871,15.779 5.847,15.288 4.440 C 15.161 4.077,15.040 3.457,15.040 3.173 L 15.040 3.000 13.560 3.000 L 12.080 3.000 12.077 8.430 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/toggle.svg b/packages/icons/svg/toggle.svg
new file mode 100644
index 0000000000..a8518f3433
--- /dev/null
+++ b/packages/icons/svg/toggle.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.200 6.060 C 6.493 6.158,5.936 6.330,5.320 6.640 C 3.658 7.475,2.527 8.951,2.111 10.830 C 1.986 11.395,1.986 12.605,2.111 13.170 C 2.653 15.617,4.403 17.361,6.848 17.891 L 7.260 17.980 12.000 17.980 L 16.740 17.980 17.152 17.891 C 19.595 17.361,21.349 15.614,21.887 13.174 C 22.013 12.603,22.013 11.397,21.887 10.826 C 21.342 8.356,19.554 6.602,17.060 6.091 C 16.776 6.033,16.219 6.025,12.160 6.016 C 8.535 6.009,7.501 6.018,7.200 6.060 M16.958 8.120 C 17.621 8.282,18.329 8.683,18.823 9.177 C 19.321 9.675,19.716 10.376,19.887 11.062 C 20.013 11.571,20.013 12.429,19.887 12.938 C 19.531 14.369,18.434 15.486,17.005 15.871 C 16.669 15.962,16.542 15.975,16.000 15.975 C 15.458 15.975,15.331 15.962,14.995 15.871 C 13.806 15.550,12.914 14.799,12.376 13.663 C 12.110 13.100,12.024 12.697,12.024 12.000 C 12.024 11.535,12.042 11.349,12.113 11.062 C 12.215 10.654,12.470 10.088,12.722 9.715 C 13.304 8.853,14.337 8.215,15.433 8.040 C 15.783 7.984,16.572 8.026,16.958 8.120 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/tradeshift.svg b/packages/icons/svg/tradeshift.svg
index 4f267e6f2a..45fe462a6f 100644
--- a/packages/icons/svg/tradeshift.svg
+++ b/packages/icons/svg/tradeshift.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.140 6.047 C 3.096 6.073,3.047 6.113,3.031 6.137 C 3.014 6.160,3.001 6.667,3.001 7.262 C 3.000 8.135,3.011 8.360,3.057 8.422 C 3.112 8.498,3.191 8.500,5.597 8.511 L 8.080 8.522 8.080 13.255 C 8.080 17.789,8.083 17.990,8.153 18.054 C 8.219 18.113,8.390 18.120,9.771 18.120 L 11.315 18.120 11.378 18.031 C 11.433 17.952,11.440 17.319,11.440 12.059 C 11.440 7.041,11.432 6.164,11.383 6.098 C 11.328 6.022,11.234 6.020,7.273 6.011 C 4.294 6.004,3.199 6.014,3.140 6.047 M12.640 6.080 C 12.561 6.159,12.560 6.213,12.560 12.060 C 12.560 17.907,12.561 17.961,12.640 18.040 C 12.717 18.117,12.773 18.120,14.240 18.120 C 15.707 18.120,15.763 18.117,15.840 18.040 C 15.919 17.961,15.920 17.907,15.920 13.240 L 15.920 8.520 18.380 8.520 C 20.787 8.520,20.842 8.518,20.920 8.440 C 20.996 8.364,21.000 8.307,21.000 7.260 C 21.000 6.213,20.996 6.156,20.920 6.080 C 20.841 6.001,20.787 6.000,16.780 6.000 C 12.773 6.000,12.719 6.001,12.640 6.080 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.550 6.027 C 2.955 6.049,2.992 5.961,3.008 7.313 C 3.014 7.907,3.035 8.408,3.052 8.426 C 3.120 8.494,3.768 8.514,5.889 8.517 L 8.078 8.520 8.089 13.258 C 8.098 17.079,8.110 18.006,8.152 18.048 C 8.192 18.088,8.548 18.103,9.756 18.111 C 11.172 18.122,11.313 18.117,11.364 18.055 C 11.411 17.998,11.422 17.118,11.433 12.404 C 11.440 9.333,11.433 6.655,11.419 6.454 C 11.396 6.123,11.385 6.085,11.307 6.064 C 11.206 6.036,4.188 6.003,3.550 6.027 M12.873 6.028 C 12.767 6.037,12.663 6.072,12.633 6.108 C 12.589 6.161,12.580 7.221,12.580 12.065 C 12.580 17.668,12.584 17.961,12.651 18.029 C 12.717 18.095,12.837 18.100,14.240 18.100 C 15.643 18.100,15.763 18.095,15.829 18.029 C 15.896 17.961,15.901 17.707,15.911 13.239 L 15.922 8.522 18.384 8.511 L 20.847 8.500 20.924 8.406 C 20.994 8.318,21.000 8.235,21.000 7.260 C 21.000 6.285,20.994 6.202,20.924 6.114 L 20.847 6.020 16.954 6.016 C 14.812 6.014,12.976 6.020,12.873 6.028 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/translate.svg b/packages/icons/svg/translate.svg
index a28b356eaf..a583eff019 100644
--- a/packages/icons/svg/translate.svg
+++ b/packages/icons/svg/translate.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.730 2.676 C 7.493 2.863,7.295 3.150,7.263 3.352 C 7.242 3.479,7.161 4.523,7.160 4.671 C 7.160 4.699,7.117 4.738,7.064 4.758 C 7.012 4.778,6.116 4.816,5.074 4.842 L 3.180 4.890 2.976 5.042 C 2.577 5.339,2.382 5.800,2.477 6.224 C 2.540 6.503,2.720 6.764,3.015 7.003 L 3.259 7.200 6.147 7.200 L 9.035 7.200 8.955 7.490 C 8.791 8.083,8.169 9.848,7.930 10.400 L 7.851 10.580 7.343 9.806 C 6.804 8.983,6.540 8.662,6.331 8.574 C 6.124 8.487,5.511 8.502,5.319 8.600 C 4.945 8.791,4.740 9.153,4.693 9.702 L 4.669 9.996 4.982 10.548 C 5.390 11.268,6.135 12.506,6.370 12.857 L 6.556 13.134 6.291 13.517 C 5.574 14.549,4.995 15.261,3.683 16.720 C 2.444 18.099,2.348 18.264,2.494 18.767 C 2.613 19.176,2.914 19.474,3.352 19.618 C 3.820 19.772,4.198 19.554,5.204 18.552 C 5.892 17.866,6.417 17.284,7.319 16.209 C 8.216 15.138,8.050 15.202,8.680 15.682 C 8.889 15.841,9.132 16.005,9.220 16.045 C 9.451 16.151,9.919 16.147,10.147 16.036 C 10.464 15.883,10.770 15.429,10.824 15.033 C 10.867 14.723,10.652 14.372,9.830 13.409 L 9.445 12.958 9.600 12.619 C 10.151 11.421,11.049 8.930,11.383 7.673 L 11.496 7.247 11.918 7.223 C 13.657 7.126,13.681 7.121,13.997 6.776 C 14.524 6.199,14.460 5.551,13.827 5.055 L 13.552 4.840 12.122 4.840 C 11.336 4.840,10.447 4.828,10.146 4.814 L 9.600 4.788 9.600 4.344 C 9.599 3.339,9.496 3.002,9.107 2.735 C 8.856 2.562,8.694 2.520,8.274 2.520 C 7.931 2.520,7.925 2.522,7.730 2.676 M15.269 9.723 C 15.054 9.758,14.854 9.936,14.594 10.324 C 14.105 11.052,10.092 19.077,9.760 19.990 C 9.576 20.496,9.712 21.002,10.114 21.308 C 10.322 21.468,10.673 21.576,10.897 21.550 C 11.414 21.492,11.787 21.068,12.427 19.814 L 12.740 19.201 15.600 19.201 L 18.460 19.200 18.708 19.690 C 18.992 20.254,19.344 20.849,19.568 21.146 C 19.770 21.413,20.032 21.536,20.400 21.537 C 20.820 21.537,21.238 21.277,21.423 20.898 C 21.519 20.700,21.528 20.646,21.512 20.349 C 21.494 20.041,21.474 19.980,21.203 19.400 C 20.738 18.409,17.234 11.393,16.912 10.810 C 16.576 10.201,16.383 9.954,16.152 9.836 C 15.971 9.744,15.506 9.684,15.269 9.723 M15.928 14.250 C 16.273 14.895,17.023 16.458,17.061 16.609 C 17.080 16.684,17.067 16.716,17.013 16.737 C 16.899 16.781,14.945 16.809,14.520 16.773 C 14.153 16.741,14.140 16.736,14.128 16.639 C 14.112 16.497,15.512 13.680,15.599 13.680 C 15.613 13.680,15.761 13.937,15.928 14.250 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.788 2.643 C 7.557 2.796,7.337 3.090,7.280 3.323 C 7.256 3.420,7.214 3.779,7.188 4.119 L 7.140 4.739 6.980 4.766 C 6.892 4.781,6.001 4.816,5.000 4.843 L 3.180 4.892 3.000 5.036 C 2.751 5.235,2.691 5.307,2.569 5.560 C 2.487 5.729,2.463 5.836,2.466 6.020 C 2.473 6.402,2.629 6.677,3.030 7.010 L 3.259 7.200 6.146 7.200 L 9.034 7.200 8.952 7.490 C 8.767 8.144,7.936 10.477,7.861 10.552 C 7.853 10.560,7.639 10.255,7.386 9.874 C 6.797 8.985,6.585 8.723,6.360 8.607 C 6.199 8.524,6.139 8.516,5.795 8.531 C 5.486 8.544,5.381 8.565,5.266 8.637 C 4.926 8.847,4.744 9.193,4.694 9.724 L 4.669 9.997 4.982 10.548 C 5.364 11.222,6.150 12.527,6.385 12.877 L 6.557 13.134 6.332 13.457 C 5.631 14.463,4.981 15.265,3.702 16.700 C 2.559 17.982,2.410 18.204,2.453 18.562 C 2.533 19.240,3.248 19.794,3.821 19.622 C 4.129 19.529,4.423 19.302,5.115 18.623 C 5.840 17.911,6.447 17.245,7.357 16.162 C 7.690 15.766,7.997 15.423,8.039 15.401 C 8.177 15.327,8.256 15.360,8.660 15.661 C 9.215 16.075,9.274 16.100,9.680 16.100 C 9.978 16.100,10.043 16.087,10.206 15.991 C 10.434 15.857,10.656 15.564,10.761 15.257 C 10.863 14.962,10.860 14.905,10.737 14.640 C 10.616 14.380,10.346 14.014,9.825 13.404 L 9.446 12.960 9.648 12.510 C 10.223 11.230,11.155 8.600,11.441 7.455 L 11.493 7.250 12.016 7.223 C 12.866 7.179,13.407 7.122,13.609 7.056 C 13.741 7.013,13.851 6.935,13.976 6.796 C 14.540 6.169,14.463 5.560,13.749 4.995 L 13.553 4.840 12.026 4.840 C 11.187 4.840,10.297 4.828,10.050 4.814 L 9.600 4.788 9.600 4.304 C 9.599 3.390,9.475 2.996,9.109 2.746 C 8.865 2.579,8.649 2.522,8.257 2.521 C 8.007 2.520,7.952 2.534,7.788 2.643 M15.060 9.814 C 14.870 9.932,14.670 10.186,14.407 10.645 C 13.733 11.816,10.677 17.924,9.916 19.620 C 9.713 20.071,9.700 20.119,9.700 20.420 C 9.700 20.701,9.715 20.767,9.820 20.957 C 9.967 21.222,10.216 21.411,10.537 21.502 C 11.227 21.695,11.681 21.280,12.467 19.737 L 12.740 19.201 15.601 19.200 L 18.462 19.200 18.614 19.510 C 18.983 20.263,19.484 21.079,19.706 21.288 C 20.087 21.648,20.798 21.597,21.209 21.179 C 21.425 20.960,21.520 20.740,21.520 20.457 C 21.519 20.144,21.474 19.993,21.211 19.420 C 20.852 18.640,16.989 10.929,16.782 10.580 C 16.376 9.895,16.195 9.766,15.591 9.734 C 15.247 9.716,15.208 9.722,15.060 9.814 M16.214 14.832 C 16.938 16.269,17.099 16.638,17.030 16.708 C 16.986 16.751,16.747 16.769,15.957 16.787 C 14.886 16.813,14.290 16.785,14.180 16.705 C 14.120 16.661,14.121 16.640,14.201 16.439 C 14.329 16.112,15.006 14.729,15.311 14.168 C 15.574 13.685,15.581 13.677,15.648 13.759 C 15.685 13.806,15.940 14.288,16.214 14.832 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/trash.svg b/packages/icons/svg/trash.svg
index 0490097bcf..5b22784f40 100644
--- a/packages/icons/svg/trash.svg
+++ b/packages/icons/svg/trash.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.200 2.479 C 10.563 2.503,10.479 2.515,10.274 2.608 C 9.945 2.759,9.689 3.133,9.098 4.324 L 8.868 4.788 8.244 4.814 C 7.901 4.828,6.907 4.840,6.035 4.840 L 4.451 4.840 4.190 5.041 C 4.046 5.152,3.882 5.313,3.826 5.399 C 3.430 5.996,3.719 6.744,4.492 7.125 L 4.747 7.251 4.773 10.012 C 4.788 11.531,4.800 14.328,4.800 16.228 L 4.800 19.683 4.905 19.891 C 5.215 20.509,5.624 20.957,6.243 21.358 L 6.618 21.600 11.930 21.600 L 17.243 21.600 17.556 21.447 C 18.151 21.155,18.605 20.728,18.984 20.104 L 19.188 19.768 19.214 14.614 C 19.229 11.779,19.252 8.959,19.266 8.348 L 19.291 7.235 19.531 7.115 C 19.839 6.959,20.150 6.669,20.253 6.440 C 20.354 6.218,20.360 5.809,20.266 5.586 C 20.170 5.359,19.971 5.127,19.796 5.038 C 19.686 4.982,19.500 4.948,19.151 4.921 C 18.680 4.883,16.126 4.800,15.459 4.800 L 15.138 4.800 14.905 4.330 C 14.630 3.776,14.276 3.161,14.109 2.948 C 14.044 2.865,13.892 2.717,13.772 2.618 L 13.553 2.440 12.726 2.447 C 12.272 2.450,11.585 2.465,11.200 2.479 M10.000 8.569 C 10.205 8.631,10.470 8.826,10.544 8.968 C 10.590 9.057,10.618 9.282,10.643 9.776 C 10.677 10.441,10.759 15.234,10.760 16.559 L 10.760 17.217 10.470 17.501 C 9.826 18.130,9.390 18.132,8.733 17.508 L 8.440 17.230 8.440 13.222 L 8.440 9.214 8.663 8.968 C 8.944 8.657,9.074 8.564,9.289 8.524 C 9.483 8.488,9.794 8.507,10.000 8.569 M14.800 8.569 C 15.005 8.631,15.270 8.826,15.344 8.968 C 15.390 9.057,15.418 9.282,15.443 9.776 C 15.477 10.441,15.559 15.234,15.560 16.559 L 15.560 17.217 15.270 17.501 C 14.624 18.132,14.176 18.132,13.530 17.501 L 13.240 17.217 13.240 13.215 L 13.240 9.214 13.463 8.968 C 13.744 8.657,13.874 8.564,14.089 8.524 C 14.283 8.488,14.594 8.507,14.800 8.569 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.360 2.481 C 10.900 2.497,10.506 2.531,10.400 2.563 C 10.023 2.676,9.686 3.132,9.097 4.324 L 8.867 4.788 8.364 4.814 C 8.087 4.828,7.093 4.840,6.155 4.840 C 4.223 4.840,4.441 4.804,4.027 5.197 C 3.751 5.458,3.663 5.643,3.663 5.960 C 3.663 6.435,3.952 6.844,4.483 7.118 L 4.747 7.254 4.773 10.517 C 4.788 12.312,4.800 15.109,4.800 16.734 L 4.800 19.688 4.940 19.954 C 5.251 20.543,5.683 20.998,6.320 21.407 L 6.620 21.600 11.931 21.600 L 17.242 21.600 17.531 21.455 C 18.135 21.151,18.535 20.785,18.936 20.170 L 19.190 19.780 19.215 15.060 C 19.229 12.464,19.252 9.642,19.266 8.789 L 19.292 7.238 19.536 7.110 C 19.858 6.940,20.219 6.583,20.276 6.377 C 20.345 6.129,20.329 5.723,20.243 5.534 C 20.140 5.307,19.878 5.054,19.693 5.002 C 19.609 4.979,19.279 4.942,18.960 4.921 C 18.358 4.880,16.060 4.800,15.475 4.799 L 15.140 4.799 14.822 4.177 C 14.382 3.313,14.109 2.905,13.804 2.650 L 13.553 2.440 12.847 2.447 C 12.458 2.450,11.789 2.466,11.360 2.481 M10.140 8.630 C 10.342 8.737,10.514 8.899,10.563 9.028 C 10.626 9.195,10.673 10.626,10.725 13.997 L 10.774 17.214 10.508 17.465 C 9.820 18.117,9.403 18.124,8.722 17.494 L 8.440 17.233 8.440 13.222 L 8.440 9.212 8.679 8.950 C 9.021 8.578,9.169 8.511,9.620 8.530 C 9.888 8.541,10.021 8.567,10.140 8.630 M14.940 8.630 C 15.142 8.737,15.314 8.899,15.363 9.028 C 15.426 9.195,15.473 10.626,15.525 13.998 L 15.574 17.215 15.287 17.484 C 14.616 18.112,14.193 18.115,13.522 17.494 L 13.240 17.233 13.240 13.222 L 13.240 9.212 13.479 8.950 C 13.821 8.578,13.969 8.511,14.420 8.530 C 14.688 8.541,14.821 8.567,14.940 8.630 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/trending-down.svg b/packages/icons/svg/trending-down.svg
index a37acfb254..2ba49de75c 100644
--- a/packages/icons/svg/trending-down.svg
+++ b/packages/icons/svg/trending-down.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.228 6.128 C 3.020 6.184,2.650 6.531,2.534 6.780 C 2.408 7.051,2.410 7.324,2.540 7.585 C 2.661 7.829,3.217 8.438,4.906 10.180 C 6.451 11.773,8.384 13.653,8.970 14.134 C 9.292 14.397,9.793 14.421,10.143 14.190 C 10.417 14.008,11.023 13.450,12.178 12.315 L 13.205 11.306 14.006 12.103 C 15.042 13.133,17.006 15.160,17.145 15.342 C 17.209 15.426,17.238 15.498,17.216 15.520 C 17.196 15.540,16.604 15.583,15.900 15.617 C 13.920 15.712,13.885 15.718,13.600 16.008 C 13.341 16.270,13.266 16.472,13.287 16.848 C 13.308 17.227,13.389 17.386,13.733 17.725 L 14.013 18.000 17.373 18.000 L 20.733 18.000 20.944 17.837 C 21.061 17.747,21.256 17.559,21.378 17.420 L 21.600 17.168 21.599 14.434 C 21.598 11.619,21.565 10.584,21.468 10.352 C 21.396 10.182,21.106 9.900,20.897 9.799 C 20.774 9.739,20.652 9.720,20.397 9.720 C 20.098 9.721,20.037 9.734,19.855 9.838 C 19.598 9.986,19.415 10.167,19.335 10.354 C 19.269 10.511,19.224 11.219,19.177 12.850 C 19.163 13.351,19.137 13.760,19.120 13.760 C 19.103 13.760,18.317 13.002,17.374 12.076 C 15.362 10.099,14.238 9.020,13.888 8.729 L 13.636 8.520 13.201 8.520 L 12.765 8.520 12.471 8.754 C 12.127 9.027,11.489 9.629,10.393 10.714 L 9.605 11.494 7.833 9.740 C 5.799 7.728,4.642 6.624,4.306 6.374 C 3.950 6.110,3.600 6.030,3.228 6.128 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.289 6.117 C 2.974 6.197,2.575 6.601,2.481 6.936 C 2.421 7.149,2.442 7.367,2.540 7.575 C 2.686 7.881,3.941 9.222,6.159 11.441 C 7.890 13.172,8.910 14.126,9.159 14.248 C 9.435 14.382,9.798 14.373,10.068 14.224 C 10.328 14.081,10.981 13.488,12.235 12.257 L 13.211 11.300 14.675 12.783 C 16.421 14.550,17.200 15.375,17.200 15.455 C 17.200 15.488,17.168 15.524,17.130 15.536 C 17.091 15.548,16.538 15.585,15.900 15.618 C 13.891 15.723,13.871 15.727,13.570 16.056 C 13.329 16.320,13.259 16.535,13.293 16.900 C 13.324 17.233,13.392 17.358,13.733 17.710 L 14.014 18.000 17.377 18.000 L 20.740 18.000 20.980 17.803 C 21.112 17.695,21.306 17.507,21.410 17.386 L 21.600 17.165 21.598 14.513 C 21.597 12.045,21.565 10.765,21.498 10.450 C 21.462 10.282,21.202 9.988,20.970 9.852 C 20.823 9.766,20.723 9.742,20.454 9.728 C 20.149 9.711,20.102 9.720,19.896 9.824 C 19.630 9.958,19.339 10.266,19.305 10.449 C 19.267 10.649,19.207 11.683,19.177 12.651 C 19.162 13.131,19.138 13.576,19.125 13.641 C 19.101 13.755,19.057 13.716,17.500 12.195 C 15.458 10.200,14.169 8.964,13.871 8.716 L 13.636 8.520 13.200 8.520 L 12.765 8.520 12.463 8.763 C 12.112 9.045,11.410 9.707,10.350 10.757 L 9.600 11.499 8.270 10.177 C 5.363 7.288,4.438 6.422,4.064 6.241 C 3.801 6.113,3.498 6.065,3.289 6.117 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/trending-up.svg b/packages/icons/svg/trending-up.svg
index 80e60e8fbb..866f299045 100644
--- a/packages/icons/svg/trending-up.svg
+++ b/packages/icons/svg/trending-up.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.280 6.159 C 13.795 6.186,13.739 6.195,13.546 6.448 C 13.083 7.056,13.173 7.720,13.779 8.155 C 14.026 8.332,14.060 8.336,16.620 8.463 C 16.906 8.478,17.164 8.502,17.193 8.518 C 17.265 8.557,16.532 9.344,14.695 11.199 L 13.210 12.699 12.215 11.722 C 11.117 10.645,10.490 10.066,10.206 9.869 C 10.025 9.743,10.009 9.740,9.597 9.740 L 9.174 9.740 8.957 9.904 C 8.436 10.297,4.336 14.361,3.095 15.714 C 2.507 16.355,2.420 16.507,2.451 16.846 C 2.503 17.419,2.913 17.843,3.509 17.939 C 3.994 18.018,4.312 17.750,7.653 14.440 L 9.605 12.506 10.373 13.266 C 12.010 14.887,12.566 15.375,12.917 15.499 C 13.146 15.580,13.384 15.575,13.580 15.485 C 13.862 15.357,14.730 14.537,17.757 11.542 C 19.118 10.195,19.134 10.181,19.163 10.300 C 19.179 10.366,19.201 11.104,19.213 11.940 C 19.226 12.901,19.249 13.502,19.277 13.574 C 19.333 13.720,19.776 14.165,19.960 14.261 C 20.154 14.362,20.646 14.362,20.840 14.261 C 20.917 14.221,21.099 14.069,21.244 13.924 C 21.477 13.690,21.510 13.637,21.534 13.464 C 21.548 13.357,21.560 11.812,21.560 10.031 L 21.560 6.793 21.229 6.456 L 20.898 6.120 18.759 6.128 C 17.583 6.132,16.017 6.146,15.280 6.159 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.740 6.161 C 14.613 6.178,13.962 6.203,13.853 6.234 C 13.657 6.290,13.510 6.447,13.365 6.760 C 13.167 7.186,13.253 7.653,13.594 7.994 C 13.913 8.313,14.005 8.331,15.760 8.421 C 16.453 8.456,17.063 8.499,17.115 8.514 C 17.209 8.543,17.207 8.547,17.008 8.787 C 16.769 9.074,14.857 11.052,13.886 12.017 L 13.205 12.694 12.273 11.780 C 11.147 10.677,10.441 10.027,10.202 9.874 C 10.034 9.766,10.000 9.760,9.580 9.760 L 9.136 9.760 8.878 9.973 C 8.480 10.302,6.323 12.402,4.883 13.864 C 2.812 15.965,2.440 16.402,2.440 16.735 C 2.440 17.317,2.928 17.857,3.530 17.942 C 4.004 18.009,4.480 17.598,8.127 13.967 L 9.594 12.506 10.567 13.460 C 12.504 15.358,12.873 15.629,13.401 15.540 C 13.716 15.487,14.019 15.212,16.966 12.317 C 18.081 11.222,19.029 10.308,19.072 10.284 C 19.149 10.243,19.153 10.257,19.175 10.691 C 19.187 10.938,19.208 11.659,19.220 12.294 C 19.237 13.173,19.256 13.482,19.301 13.588 C 19.375 13.766,19.807 14.190,19.993 14.268 C 20.173 14.343,20.624 14.344,20.803 14.270 C 21.023 14.177,21.463 13.726,21.515 13.539 C 21.546 13.429,21.560 12.369,21.560 10.079 L 21.560 6.778 21.229 6.449 L 20.898 6.120 19.179 6.127 C 18.234 6.131,16.686 6.146,15.740 6.161 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/truck.svg b/packages/icons/svg/truck.svg
index 0c2f7206b5..aa017ebe90 100644
--- a/packages/icons/svg/truck.svg
+++ b/packages/icons/svg/truck.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.748 4.885 C 5.190 4.902,3.727 4.933,3.498 4.955 C 3.014 5.000,2.894 5.057,2.636 5.365 L 2.468 5.566 2.436 7.513 C 2.371 11.535,2.409 17.554,2.504 18.287 C 2.530 18.485,2.552 18.520,2.822 18.787 C 3.015 18.978,3.164 19.089,3.266 19.120 C 3.351 19.145,3.735 19.175,4.120 19.187 L 4.820 19.209 5.016 18.819 C 5.377 18.101,5.826 17.594,6.508 17.136 L 6.845 16.909 7.812 16.938 L 8.780 16.966 9.046 17.122 C 9.453 17.362,9.865 17.709,10.074 17.988 C 10.178 18.127,10.380 18.459,10.522 18.725 L 10.780 19.210 11.500 19.184 C 12.164 19.161,12.236 19.151,12.432 19.055 C 12.721 18.915,13.015 18.614,13.078 18.394 C 13.141 18.174,13.192 14.242,13.197 9.174 L 13.200 5.568 12.810 5.205 L 12.420 4.842 11.000 4.848 C 10.219 4.851,8.305 4.867,6.748 4.885 M16.763 8.486 C 16.289 8.542,16.021 8.697,15.742 9.077 L 15.600 9.271 15.600 13.050 L 15.600 16.828 16.135 16.877 C 17.208 16.973,17.597 17.123,18.148 17.653 C 18.519 18.008,18.745 18.324,19.005 18.850 L 19.178 19.200 19.539 19.199 C 20.065 19.198,20.625 19.131,20.815 19.045 C 21.030 18.948,21.241 18.776,21.440 18.535 L 21.600 18.341 21.600 15.001 L 21.599 11.660 21.165 11.180 C 20.526 10.473,18.808 8.791,18.600 8.670 C 18.304 8.497,17.419 8.408,16.763 8.486 M15.840 18.092 C 15.164 18.284,14.565 18.925,14.441 19.590 C 14.356 20.048,14.555 20.544,15.006 20.997 C 15.388 21.382,15.953 21.628,16.344 21.580 C 17.043 21.496,17.815 20.735,17.966 19.985 C 18.001 19.809,17.997 19.729,17.941 19.537 C 17.787 19.009,17.541 18.659,17.130 18.387 C 16.691 18.097,16.211 17.987,15.840 18.092 M7.180 18.160 C 7.025 18.211,6.570 18.600,6.344 18.875 C 6.087 19.189,5.957 19.691,6.041 20.049 C 6.207 20.757,6.874 21.409,7.580 21.552 C 8.323 21.703,9.259 21.028,9.526 20.149 C 9.602 19.898,9.607 19.840,9.565 19.616 C 9.487 19.192,9.387 19.016,9.004 18.633 C 8.810 18.439,8.586 18.253,8.506 18.220 C 8.330 18.146,7.358 18.103,7.180 18.160 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.060 4.884 C 5.520 4.901,4.004 4.934,3.692 4.956 C 3.023 5.004,2.897 5.053,2.636 5.365 L 2.461 5.573 2.428 7.457 C 2.390 9.575,2.424 17.261,2.474 17.945 C 2.501 18.302,2.525 18.419,2.599 18.538 C 2.713 18.723,3.168 19.104,3.313 19.135 C 3.372 19.148,3.735 19.169,4.120 19.183 L 4.820 19.208 5.015 18.834 C 5.402 18.092,5.823 17.612,6.483 17.160 L 6.844 16.913 7.822 16.942 L 8.799 16.971 9.164 17.207 C 9.817 17.629,10.097 17.947,10.541 18.770 L 10.773 19.200 11.197 19.197 C 11.852 19.194,12.248 19.145,12.446 19.043 C 12.651 18.937,12.940 18.669,13.031 18.500 C 13.133 18.308,13.154 17.337,13.184 11.221 L 13.212 5.582 12.816 5.212 L 12.420 4.842 11.140 4.847 C 10.436 4.850,8.600 4.867,7.060 4.884 M16.517 8.532 C 16.226 8.615,15.971 8.787,15.779 9.032 L 15.600 9.260 15.600 13.045 L 15.600 16.831 15.910 16.858 C 16.459 16.906,17.029 17.000,17.267 17.082 C 17.920 17.306,18.580 17.987,19.025 18.895 L 19.180 19.210 19.780 19.187 C 20.699 19.152,20.960 19.053,21.394 18.579 L 21.600 18.354 21.600 15.005 L 21.600 11.656 21.047 11.058 C 20.444 10.406,19.055 9.039,18.747 8.794 C 18.449 8.558,18.249 8.513,17.420 8.496 C 16.912 8.485,16.646 8.496,16.517 8.532 M15.935 18.078 C 15.535 18.141,15.019 18.506,14.723 18.935 C 14.446 19.338,14.358 19.869,14.505 20.245 C 14.751 20.875,15.408 21.438,16.045 21.564 C 16.231 21.601,16.309 21.597,16.505 21.541 C 17.141 21.359,17.726 20.769,17.927 20.107 C 18.001 19.862,18.005 19.806,17.962 19.615 C 17.894 19.310,17.673 18.891,17.472 18.684 C 17.037 18.238,16.433 18.000,15.935 18.078 M7.272 18.157 C 7.072 18.197,6.865 18.347,6.525 18.697 C 6.220 19.012,6.099 19.236,6.033 19.605 C 5.885 20.436,6.823 21.507,7.737 21.553 C 8.093 21.571,8.384 21.476,8.734 21.226 C 9.260 20.851,9.648 20.142,9.580 19.684 C 9.509 19.216,9.257 18.821,8.771 18.420 C 8.534 18.224,8.490 18.204,8.265 18.184 C 7.733 18.137,7.413 18.128,7.272 18.157 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/tumbir.svg b/packages/icons/svg/tumbir.svg
index 5ed1ba8b47..afce00942f 100644
--- a/packages/icons/svg/tumbir.svg
+++ b/packages/icons/svg/tumbir.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.862 3.290 C 10.711 4.867,9.906 6.362,8.740 7.231 C 8.384 7.496,7.795 7.798,7.348 7.943 L 7.000 8.056 7.000 9.508 L 7.000 10.960 8.197 10.960 L 9.394 10.960 9.412 14.010 C 9.427 16.516,9.441 17.117,9.491 17.380 C 9.704 18.504,10.009 19.129,10.660 19.780 C 11.206 20.326,11.725 20.615,12.527 20.818 C 13.149 20.975,13.528 21.000,15.310 21.000 L 17.000 21.000 17.000 19.240 L 17.000 17.480 16.170 17.479 C 15.713 17.479,15.220 17.461,15.073 17.440 C 14.334 17.333,13.937 16.998,13.729 16.307 C 13.676 16.132,13.664 15.706,13.650 13.530 L 13.634 10.961 15.247 10.950 L 16.860 10.940 16.870 9.270 L 16.881 7.600 15.260 7.600 L 13.640 7.600 13.640 5.300 L 13.640 3.000 12.265 3.000 L 10.890 3.000 10.862 3.290 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.830 3.490 C 10.741 4.142,10.567 4.717,10.282 5.300 C 9.697 6.499,8.824 7.342,7.680 7.812 C 7.493 7.889,7.264 7.975,7.170 8.002 L 7.000 8.053 7.000 9.506 L 7.000 10.960 8.200 10.960 L 9.400 10.960 9.403 13.170 C 9.404 14.386,9.420 15.830,9.438 16.380 C 9.469 17.316,9.479 17.411,9.596 17.856 C 9.821 18.711,10.126 19.242,10.726 19.825 C 11.268 20.351,11.740 20.611,12.527 20.815 C 13.097 20.964,13.661 21.000,15.410 21.000 L 17.000 21.000 17.000 19.240 L 17.000 17.480 16.150 17.479 C 15.220 17.477,14.824 17.428,14.500 17.276 C 14.223 17.146,13.975 16.884,13.829 16.567 L 13.706 16.300 13.676 15.120 C 13.660 14.471,13.645 13.270,13.643 12.450 L 13.640 10.961 15.250 10.950 L 16.860 10.940 16.870 9.270 L 16.881 7.600 15.260 7.600 L 13.640 7.600 13.640 5.300 L 13.640 3.000 12.268 3.000 L 10.897 3.000 10.830 3.490 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/twilio.svg b/packages/icons/svg/twilio.svg
new file mode 100644
index 0000000000..6c3ccc36fd
--- /dev/null
+++ b/packages/icons/svg/twilio.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.080 2.042 C 8.669 2.274,6.451 3.347,4.772 5.095 C 3.336 6.589,2.421 8.471,2.092 10.600 C 1.993 11.245,1.993 12.755,2.092 13.400 C 2.359 15.132,3.006 16.677,4.045 18.068 C 4.422 18.572,5.428 19.578,5.932 19.955 C 7.319 20.992,8.873 21.641,10.600 21.907 C 11.244 22.006,12.756 22.006,13.400 21.907 C 15.128 21.641,16.685 20.990,18.068 19.954 C 18.572 19.577,19.577 18.572,19.954 18.068 C 20.990 16.685,21.641 15.128,21.907 13.400 C 21.959 13.058,21.978 12.699,21.978 12.000 C 21.978 10.963,21.928 10.517,21.717 9.650 C 21.007 6.744,19.099 4.362,16.420 3.039 C 15.457 2.563,14.512 2.270,13.400 2.102 C 12.892 2.025,11.603 1.991,11.080 2.042 M12.979 4.740 C 16.270 5.178,18.829 7.740,19.260 11.028 C 19.741 14.696,17.488 18.092,13.920 19.079 C 13.015 19.329,11.790 19.394,10.860 19.241 C 8.468 18.847,6.516 17.421,5.441 15.281 C 4.659 13.727,4.469 11.848,4.918 10.109 C 5.647 7.281,8.069 5.139,10.987 4.742 C 11.517 4.670,12.443 4.669,12.979 4.740 M9.004 7.543 C 7.734 7.885,7.109 9.313,7.710 10.500 C 7.848 10.772,8.326 11.240,8.600 11.372 C 9.432 11.772,10.345 11.623,10.984 10.984 C 11.623 10.345,11.772 9.432,11.372 8.600 C 11.243 8.331,10.781 7.862,10.497 7.711 C 10.075 7.486,9.469 7.418,9.004 7.543 M13.924 7.543 C 13.586 7.634,13.324 7.795,13.017 8.099 C 12.714 8.400,12.564 8.658,12.461 9.058 C 12.187 10.128,12.878 11.249,13.989 11.537 C 14.819 11.752,15.716 11.383,16.208 10.623 C 16.952 9.473,16.322 7.891,14.978 7.541 C 14.687 7.465,14.210 7.466,13.924 7.543 M9.134 12.442 C 8.717 12.524,8.322 12.756,8.004 13.103 C 7.645 13.496,7.480 13.923,7.480 14.460 C 7.480 15.018,7.690 15.529,8.081 15.919 C 8.759 16.598,9.832 16.720,10.623 16.208 C 11.379 15.718,11.739 14.855,11.540 14.010 C 11.286 12.935,10.204 12.230,9.134 12.442 M13.985 12.463 C 12.897 12.727,12.188 13.879,12.461 14.942 C 12.563 15.339,12.714 15.600,13.017 15.904 C 13.448 16.337,13.876 16.520,14.460 16.520 C 15.394 16.520,16.188 15.917,16.456 15.003 C 16.492 14.882,16.520 14.640,16.520 14.457 C 16.520 13.144,15.261 12.155,13.985 12.463 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/twitch.svg b/packages/icons/svg/twitch.svg
index 4fb3d9d237..6716ccb42f 100644
--- a/packages/icons/svg/twitch.svg
+++ b/packages/icons/svg/twitch.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.666 3.696 L 4.000 5.392 4.000 11.496 L 4.000 17.600 6.000 17.600 L 8.000 17.600 8.002 19.290 L 8.004 20.980 9.672 19.290 L 11.340 17.601 12.684 17.590 L 14.027 17.580 17.013 14.540 L 19.999 11.500 20.000 6.750 L 20.000 2.000 13.666 2.000 L 7.332 2.000 5.666 3.696 M18.680 7.083 L 18.680 10.806 17.330 12.183 L 15.980 13.560 14.644 13.560 L 13.307 13.560 12.156 14.730 L 11.004 15.900 11.002 14.730 L 11.000 13.560 9.500 13.560 L 8.000 13.560 8.000 8.460 L 8.000 3.360 13.340 3.360 L 18.680 3.360 18.680 7.083 M11.680 7.760 L 11.680 9.800 12.340 9.800 L 13.000 9.800 13.000 7.760 L 13.000 5.720 12.340 5.720 L 11.680 5.720 11.680 7.760 M15.348 5.746 C 15.332 5.761,15.320 6.679,15.320 7.787 L 15.320 9.800 16.000 9.800 L 16.681 9.800 16.670 7.770 L 16.660 5.740 16.018 5.729 C 15.664 5.723,15.363 5.731,15.348 5.746 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.666 3.696 L 4.000 5.391 4.000 11.496 L 4.000 17.600 6.000 17.600 L 8.000 17.600 8.002 19.290 L 8.004 20.980 9.672 19.289 L 11.340 17.598 12.670 17.599 L 14.000 17.600 15.253 16.330 C 15.942 15.632,17.291 14.259,18.252 13.280 L 19.999 11.500 20.000 6.750 L 20.000 2.000 13.666 2.000 L 7.331 2.000 5.666 3.696 M18.680 7.083 L 18.680 10.807 17.331 12.183 L 15.983 13.560 14.641 13.560 L 13.300 13.560 12.152 14.730 L 11.004 15.900 11.002 14.730 L 11.000 13.560 9.500 13.560 L 8.000 13.560 8.000 8.460 L 8.000 3.360 13.340 3.360 L 18.680 3.360 18.680 7.083 M11.680 7.760 L 11.680 9.800 12.340 9.800 L 13.000 9.800 13.000 7.760 L 13.000 5.720 12.340 5.720 L 11.680 5.720 11.680 7.760 M15.370 5.746 C 15.331 5.762,15.320 6.207,15.320 7.783 L 15.320 9.800 16.000 9.800 L 16.680 9.800 16.680 7.786 L 16.680 5.771 16.470 5.746 C 16.225 5.717,15.443 5.717,15.370 5.746 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/twitter.svg b/packages/icons/svg/twitter.svg
index de2f4c93e4..79ab818a4b 100644
--- a/packages/icons/svg/twitter.svg
+++ b/packages/icons/svg/twitter.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.290 4.040 C 13.514 4.291,12.106 5.645,11.799 7.395 C 11.746 7.700,11.746 8.476,11.800 8.700 C 11.865 8.973,11.871 8.967,11.550 8.940 C 9.277 8.747,7.154 7.952,5.405 6.640 C 4.808 6.192,4.123 5.572,3.737 5.129 C 3.569 4.937,3.420 4.775,3.405 4.770 C 3.366 4.755,3.168 5.167,3.054 5.500 C 2.847 6.102,2.792 6.762,2.896 7.400 C 3.064 8.432,3.578 9.282,4.460 9.989 L 4.620 10.117 4.494 10.119 C 4.167 10.122,3.379 9.913,3.011 9.726 C 2.919 9.678,2.831 9.640,2.816 9.640 C 2.775 9.640,2.834 10.248,2.904 10.551 C 3.243 12.013,4.402 13.205,5.843 13.574 C 5.958 13.603,6.036 13.638,6.016 13.650 C 5.859 13.747,4.909 13.806,4.470 13.746 L 4.240 13.714 4.373 14.029 C 4.935 15.362,6.164 16.271,7.700 16.490 L 8.060 16.542 7.620 16.837 C 7.046 17.222,6.273 17.598,5.600 17.818 C 4.599 18.146,3.790 18.262,2.727 18.230 L 2.035 18.209 2.267 18.350 C 2.605 18.555,3.449 18.974,3.820 19.122 C 5.447 19.770,6.969 20.040,8.700 19.987 C 9.981 19.947,11.010 19.768,12.180 19.381 C 13.931 18.802,15.348 17.907,16.665 16.548 C 18.381 14.778,19.491 12.505,19.862 10.000 C 19.896 9.769,19.935 9.218,19.948 8.775 L 19.971 7.971 20.256 7.756 C 20.646 7.461,21.410 6.690,21.713 6.285 C 21.851 6.101,21.956 5.943,21.947 5.934 C 21.939 5.925,21.843 5.956,21.736 6.002 C 21.297 6.190,20.018 6.520,19.729 6.520 C 19.691 6.520,19.756 6.456,19.872 6.378 C 20.363 6.047,20.872 5.483,21.159 4.952 C 21.310 4.671,21.455 4.320,21.420 4.320 C 21.410 4.320,21.290 4.382,21.151 4.458 C 20.652 4.732,19.921 5.009,19.251 5.179 L 18.868 5.276 18.624 5.063 C 18.105 4.609,17.486 4.286,16.822 4.123 C 16.420 4.024,15.685 3.984,15.290 4.040 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.356 4.045 C 13.927 4.179,12.532 5.260,12.016 6.633 C 11.804 7.199,11.748 7.562,11.774 8.194 C 11.786 8.494,11.802 8.785,11.808 8.840 C 11.820 8.938,11.816 8.940,11.560 8.931 C 11.001 8.912,9.995 8.733,9.220 8.514 C 7.705 8.087,6.204 7.304,4.974 6.298 C 4.735 6.103,4.286 5.686,3.976 5.372 C 3.666 5.057,3.401 4.800,3.387 4.800 C 3.348 4.800,3.183 5.145,3.069 5.462 C 2.520 6.991,3.013 8.755,4.292 9.843 L 4.594 10.100 4.458 10.112 C 4.273 10.129,3.534 9.946,3.186 9.797 C 3.029 9.730,2.875 9.664,2.844 9.651 C 2.762 9.616,2.814 10.168,2.937 10.648 C 3.282 11.995,4.357 13.125,5.670 13.521 C 5.830 13.569,5.969 13.622,5.980 13.640 C 6.022 13.708,5.420 13.768,4.842 13.754 L 4.252 13.740 4.367 14.009 C 4.934 15.343,6.088 16.214,7.630 16.475 L 8.060 16.548 7.683 16.795 C 6.144 17.807,4.535 18.274,2.725 18.234 C 2.103 18.220,2.084 18.222,2.170 18.291 C 2.357 18.438,3.801 19.125,4.286 19.298 C 6.863 20.214,9.650 20.232,12.260 19.347 C 13.936 18.779,15.223 17.976,16.501 16.700 C 18.722 14.481,19.959 11.520,19.960 8.420 L 19.960 7.979 20.230 7.773 C 20.732 7.390,21.983 6.049,21.908 5.975 C 21.898 5.964,21.694 6.021,21.456 6.101 C 20.822 6.313,19.720 6.573,19.720 6.510 C 19.720 6.500,19.844 6.399,19.996 6.286 C 20.331 6.036,20.738 5.604,20.982 5.237 C 21.165 4.962,21.400 4.485,21.400 4.390 C 21.400 4.357,21.247 4.413,20.983 4.543 C 20.483 4.789,19.897 5.005,19.304 5.162 L 18.867 5.277 18.644 5.085 C 17.944 4.485,17.102 4.110,16.342 4.059 C 16.165 4.047,15.948 4.032,15.860 4.025 C 15.772 4.019,15.545 4.027,15.356 4.045 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/unity.svg b/packages/icons/svg/unity.svg
index 5eaa174198..d14f6a6571 100644
--- a/packages/icons/svg/unity.svg
+++ b/packages/icons/svg/unity.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.324 3.956 L 11.667 4.906 11.121 5.837 L 10.575 6.767 9.470 6.762 L 8.365 6.757 5.702 9.361 C 4.238 10.793,3.040 11.981,3.040 12.001 C 3.040 12.021,4.242 13.209,5.710 14.642 L 8.380 17.246 9.478 17.233 L 10.576 17.220 11.106 18.120 C 11.398 18.615,11.642 19.033,11.648 19.049 C 11.659 19.076,19.005 21.009,19.023 20.989 C 19.028 20.984,19.475 19.364,20.017 17.388 L 21.002 13.796 20.461 12.918 C 20.163 12.435,19.920 12.023,19.920 12.001 C 19.920 11.980,20.163 11.566,20.460 11.082 L 21.000 10.201 20.013 6.601 C 19.470 4.620,19.015 3.001,19.003 3.003 C 18.990 3.005,17.335 3.434,15.324 3.956 M16.232 5.913 C 16.160 6.040,15.434 7.264,14.620 8.632 L 13.140 11.119 9.910 11.120 C 8.133 11.120,6.680 11.114,6.680 11.108 C 6.680 11.101,7.599 10.190,8.722 9.082 L 10.764 7.069 13.512 6.378 C 15.023 5.998,16.284 5.686,16.312 5.684 C 16.345 5.681,16.315 5.766,16.232 5.913 M18.758 9.330 L 19.524 11.999 18.756 14.670 C 18.334 16.138,17.978 17.352,17.965 17.366 C 17.941 17.391,14.855 12.248,14.784 12.063 C 14.753 11.984,14.973 11.593,16.343 9.286 C 17.221 7.810,17.950 6.615,17.965 6.631 C 17.980 6.647,18.337 7.861,18.758 9.330 M14.760 15.564 C 15.643 17.040,16.359 18.255,16.349 18.264 C 16.340 18.273,15.079 17.969,13.547 17.589 L 10.761 16.897 8.751 14.921 C 7.645 13.834,6.734 12.930,6.727 12.912 C 6.719 12.895,8.162 12.880,9.934 12.880 L 13.154 12.880 14.760 15.564 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.303 3.958 L 11.665 4.907 11.123 5.833 L 10.580 6.759 9.467 6.759 L 8.354 6.760 6.487 8.590 C 5.461 9.597,4.261 10.776,3.821 11.211 L 3.020 12.001 3.781 12.751 C 4.200 13.163,5.405 14.342,6.458 15.370 L 8.373 17.240 9.481 17.240 L 10.588 17.240 11.084 18.088 C 11.357 18.554,11.607 18.967,11.640 19.005 C 11.700 19.076,13.446 19.553,17.260 20.540 C 18.162 20.774,18.929 20.973,18.965 20.984 C 19.015 20.998,19.043 20.950,19.089 20.771 C 19.122 20.644,19.566 19.023,20.076 17.168 L 21.003 13.796 20.508 12.988 C 20.235 12.544,19.991 12.139,19.965 12.090 C 19.907 11.981,19.872 12.050,20.507 11.010 L 21.001 10.201 20.378 7.930 C 19.884 6.128,19.347 4.195,19.043 3.123 C 19.028 3.069,18.999 3.022,18.978 3.017 C 18.957 3.013,17.303 3.437,15.303 3.958 M16.320 5.712 C 16.320 5.760,15.883 6.509,14.440 8.934 L 13.140 11.119 9.910 11.120 C 8.133 11.120,6.680 11.114,6.680 11.107 C 6.680 11.099,7.599 10.188,8.722 9.081 L 10.763 7.069 13.512 6.378 C 16.569 5.610,16.320 5.669,16.320 5.712 M18.050 6.890 C 18.084 7.005,18.429 8.202,18.817 9.549 L 19.523 11.998 18.903 14.149 C 18.020 17.212,17.988 17.320,17.955 17.320 C 17.921 17.320,16.898 15.648,15.742 13.701 C 14.818 12.145,14.800 12.113,14.800 12.008 C 14.800 11.850,17.863 6.680,17.957 6.680 C 17.974 6.680,18.016 6.775,18.050 6.890 M14.530 15.190 C 16.272 18.106,16.329 18.205,16.302 18.232 C 16.276 18.258,15.644 18.109,12.810 17.407 L 10.761 16.900 8.753 14.920 L 6.745 12.940 6.983 12.917 C 7.113 12.904,8.554 12.890,10.185 12.887 L 13.151 12.880 14.530 15.190 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/upload.svg b/packages/icons/svg/upload.svg
index 1c3aa347f3..bfe651a90a 100644
--- a/packages/icons/svg/upload.svg
+++ b/packages/icons/svg/upload.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.939 3.028 C 10.257 3.665,8.152 5.793,7.726 6.276 C 7.346 6.707,7.263 6.872,7.262 7.200 C 7.261 7.515,7.366 7.756,7.613 8.004 C 7.846 8.238,8.079 8.337,8.400 8.337 C 8.810 8.337,9.056 8.171,10.140 7.166 L 10.700 6.647 10.726 6.953 C 10.740 7.122,10.773 9.069,10.798 11.280 C 10.823 13.491,10.861 15.453,10.881 15.639 C 10.905 15.852,10.953 16.044,11.010 16.156 C 11.127 16.383,11.527 16.698,11.744 16.733 C 11.961 16.768,12.313 16.722,12.480 16.638 C 12.705 16.523,13.040 16.155,13.082 15.976 C 13.155 15.666,13.198 13.473,13.199 10.027 L 13.200 6.514 13.830 7.114 C 14.554 7.804,15.027 8.206,15.228 8.301 C 15.576 8.466,16.112 8.298,16.455 7.918 C 16.777 7.559,16.842 7.114,16.625 6.746 C 16.446 6.440,15.994 5.948,14.803 4.759 C 13.472 3.430,12.698 2.718,12.456 2.599 C 12.345 2.545,12.170 2.511,11.915 2.494 L 11.538 2.469 10.939 3.028 M9.797 19.278 L 4.373 19.300 4.199 19.420 C 3.983 19.570,3.691 19.959,3.656 20.146 C 3.587 20.516,3.731 20.935,4.031 21.235 C 4.192 21.396,4.268 21.440,4.444 21.477 C 4.792 21.548,8.851 21.598,14.416 21.599 L 19.533 21.600 19.744 21.437 C 19.978 21.256,20.106 21.104,20.235 20.850 C 20.480 20.370,20.330 19.884,19.802 19.445 L 19.556 19.240 17.388 19.248 C 16.196 19.253,12.779 19.266,9.797 19.278 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.835 3.128 C 10.029 3.892,8.068 5.881,7.689 6.320 C 7.546 6.485,7.393 6.701,7.348 6.800 C 7.237 7.045,7.241 7.399,7.358 7.648 C 7.461 7.866,7.779 8.178,7.987 8.265 C 8.173 8.343,8.581 8.346,8.761 8.270 C 8.976 8.180,9.416 7.831,10.060 7.240 C 10.383 6.943,10.662 6.695,10.679 6.688 C 10.722 6.672,10.754 8.024,10.801 11.720 C 10.844 15.178,10.860 15.646,10.945 15.954 C 11.020 16.224,11.285 16.517,11.586 16.665 C 11.776 16.758,11.831 16.767,12.051 16.743 C 12.188 16.728,12.376 16.679,12.469 16.635 C 12.691 16.528,13.027 16.158,13.080 15.960 C 13.153 15.690,13.198 13.372,13.199 9.881 L 13.200 6.502 13.550 6.843 C 14.363 7.637,14.977 8.167,15.236 8.299 C 15.415 8.390,15.758 8.367,16.004 8.248 C 16.619 7.950,16.904 7.313,16.651 6.800 C 16.517 6.527,16.013 5.972,14.812 4.773 C 13.468 3.431,12.722 2.748,12.460 2.620 C 12.315 2.549,12.160 2.515,11.895 2.496 L 11.531 2.469 10.835 3.128 M9.998 19.278 C 4.737 19.299,4.370 19.304,4.270 19.370 C 4.095 19.485,3.856 19.754,3.739 19.968 C 3.644 20.144,3.632 20.201,3.650 20.416 C 3.681 20.808,3.932 21.222,4.246 21.399 C 4.392 21.481,4.488 21.494,5.175 21.525 C 5.596 21.545,9.000 21.571,12.740 21.583 L 19.540 21.606 19.767 21.423 C 20.193 21.077,20.412 20.606,20.324 20.222 C 20.265 19.961,20.051 19.652,19.772 19.422 L 19.551 19.240 17.585 19.248 C 16.504 19.253,13.090 19.266,9.998 19.278 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/user-add.svg b/packages/icons/svg/user-add.svg
index 4ef14ee8db..6749b3bc2e 100644
--- a/packages/icons/svg/user-add.svg
+++ b/packages/icons/svg/user-add.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.833 3.758 C 8.449 3.790,8.073 3.969,7.515 4.388 C 6.959 4.806,6.581 5.243,6.305 5.790 C 6.142 6.111,6.087 6.433,6.057 7.242 L 6.029 7.983 6.173 8.314 C 6.560 9.208,7.453 10.162,8.218 10.501 C 8.539 10.643,8.991 10.721,9.645 10.748 C 10.189 10.770,10.257 10.765,10.508 10.682 C 11.200 10.452,11.820 10.019,12.373 9.379 C 12.666 9.041,12.848 8.717,13.004 8.260 C 13.092 8.002,13.100 7.918,13.100 7.200 C 13.100 6.482,13.092 6.398,13.004 6.140 C 12.754 5.405,12.351 4.870,11.660 4.349 C 11.251 4.042,10.867 3.857,10.528 3.806 C 10.181 3.753,9.226 3.726,8.833 3.758 M17.487 7.385 C 17.258 7.502,17.017 7.770,16.944 7.986 C 16.861 8.239,16.801 8.753,16.800 9.226 L 16.800 9.591 16.390 9.619 C 15.682 9.667,15.164 9.752,14.985 9.850 C 14.681 10.017,14.463 10.448,14.463 10.882 C 14.462 11.153,14.582 11.378,14.872 11.648 C 15.145 11.904,15.348 11.958,16.145 11.988 L 16.790 12.012 16.811 12.616 C 16.845 13.575,16.996 13.943,17.450 14.175 C 17.718 14.312,18.140 14.359,18.382 14.279 C 18.583 14.213,18.903 13.910,19.024 13.672 C 19.132 13.458,19.198 12.972,19.199 12.376 L 19.200 12.013 19.850 11.988 C 20.704 11.955,20.846 11.912,21.180 11.584 C 21.322 11.445,21.456 11.283,21.479 11.223 C 21.540 11.063,21.530 10.501,21.463 10.340 C 21.431 10.265,21.325 10.123,21.226 10.024 C 20.972 9.770,20.683 9.699,19.576 9.619 L 19.212 9.592 19.186 8.853 C 19.167 8.342,19.142 8.081,19.103 8.007 C 19.003 7.817,18.758 7.562,18.568 7.451 C 18.408 7.357,18.331 7.340,18.001 7.330 C 17.703 7.320,17.591 7.332,17.487 7.385 M8.480 13.363 C 7.725 13.433,6.475 13.922,5.627 14.479 C 5.032 14.870,4.010 15.894,3.610 16.500 C 3.356 16.884,2.956 17.732,2.784 18.250 C 2.608 18.777,2.448 19.549,2.414 20.036 L 2.388 20.400 9.600 20.400 L 16.812 20.400 16.789 20.030 C 16.747 19.316,16.377 17.975,16.025 17.258 C 15.249 15.674,13.864 14.431,12.083 13.721 C 11.381 13.442,11.173 13.404,10.082 13.360 C 9.003 13.317,8.970 13.317,8.480 13.363 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.540 3.816 C 7.873 4.028,6.953 4.761,6.519 5.425 C 6.155 5.982,6.075 6.331,6.066 7.380 L 6.060 8.100 6.231 8.435 C 6.599 9.155,7.213 9.870,7.797 10.258 C 8.307 10.597,8.710 10.704,9.642 10.746 C 10.181 10.770,10.245 10.765,10.502 10.680 C 11.086 10.488,11.628 10.138,12.134 9.628 C 12.524 9.234,12.792 8.828,12.963 8.371 L 13.095 8.020 13.096 7.200 L 13.096 6.380 12.969 6.045 C 12.720 5.387,12.306 4.847,11.705 4.393 C 11.260 4.057,10.818 3.850,10.440 3.801 C 10.000 3.744,8.735 3.754,8.540 3.816 M17.499 7.392 C 17.411 7.434,17.255 7.561,17.152 7.675 C 16.914 7.940,16.839 8.236,16.810 9.030 C 16.790 9.577,16.786 9.600,16.704 9.600 C 16.477 9.601,15.664 9.689,15.380 9.744 C 15.204 9.778,15.004 9.841,14.936 9.883 C 14.549 10.121,14.354 10.834,14.559 11.257 C 14.607 11.356,14.742 11.525,14.859 11.632 C 15.147 11.896,15.387 11.960,16.180 11.989 L 16.788 12.012 16.812 12.596 C 16.858 13.714,17.068 14.096,17.728 14.265 C 18.229 14.394,18.559 14.280,18.886 13.868 C 19.106 13.589,19.198 13.166,19.199 12.416 L 19.200 12.012 19.830 11.988 C 20.722 11.954,20.957 11.866,21.326 11.428 L 21.500 11.222 21.500 10.798 C 21.500 10.375,21.500 10.373,21.360 10.191 C 21.056 9.794,20.815 9.718,19.536 9.618 L 19.212 9.593 19.187 8.906 C 19.173 8.529,19.142 8.152,19.119 8.070 C 19.067 7.889,18.725 7.527,18.508 7.426 C 18.415 7.382,18.221 7.347,18.008 7.335 C 17.722 7.319,17.631 7.329,17.499 7.392 M8.509 13.364 C 7.687 13.450,6.414 13.950,5.592 14.508 C 4.984 14.921,4.030 15.885,3.616 16.505 C 2.998 17.431,2.496 18.909,2.413 20.050 L 2.388 20.400 9.600 20.400 L 16.812 20.400 16.788 20.050 C 16.743 19.389,16.441 18.215,16.130 17.494 C 15.506 16.047,14.282 14.797,12.735 14.026 C 11.702 13.511,11.335 13.422,9.980 13.361 C 9.005 13.316,8.953 13.317,8.509 13.364 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/user-circle.svg b/packages/icons/svg/user-circle.svg
index 221ac10445..31ac060f37 100644
--- a/packages/icons/svg/user-circle.svg
+++ b/packages/icons/svg/user-circle.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M12.736 6.194 C 13.270 6.385,13.817 6.866,14.090 7.387 L 14.240 7.672 14.240 8.400 L 14.240 9.129 14.116 9.362 C 13.664 10.210,12.626 10.868,11.884 10.777 C 11.567 10.738,11.101 10.578,10.840 10.420 C 10.426 10.169,9.943 9.576,9.777 9.114 C 9.696 8.890,9.684 8.142,9.758 7.840 C 9.937 7.099,10.616 6.385,11.378 6.134 C 11.629 6.051,12.436 6.087,12.736 6.194 M13.320 13.419 C 14.025 13.576,14.670 13.853,15.298 14.268 C 15.845 14.630,16.572 15.359,16.938 15.912 C 17.282 16.431,17.342 16.591,17.263 16.779 C 17.105 17.157,16.059 17.971,15.139 18.431 C 14.328 18.837,13.268 19.113,12.380 19.149 C 10.743 19.215,9.326 18.820,7.996 17.926 C 7.340 17.484,6.639 16.836,6.641 16.673 C 6.641 16.644,6.713 16.488,6.801 16.326 C 7.565 14.925,9.141 13.747,10.720 13.396 C 11.016 13.331,11.188 13.323,12.040 13.337 C 12.758 13.349,13.100 13.371,13.320 13.419 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M12.300 6.122 C 13.038 6.206,13.642 6.635,14.080 7.385 L 14.240 7.659 14.240 8.396 L 14.240 9.132 14.096 9.389 C 13.805 9.911,13.183 10.450,12.634 10.656 C 12.245 10.803,11.996 10.819,11.620 10.722 C 10.920 10.543,10.414 10.178,10.033 9.580 C 9.752 9.139,9.740 9.093,9.741 8.420 C 9.742 7.857,9.749 7.804,9.852 7.560 C 10.070 7.042,10.519 6.561,11.052 6.277 C 11.405 6.089,11.695 6.053,12.300 6.122 M13.180 13.404 C 13.754 13.485,14.672 13.859,15.264 14.253 C 15.983 14.733,16.757 15.555,17.135 16.243 C 17.312 16.565,17.316 16.692,17.158 16.931 C 16.928 17.278,15.906 18.046,15.205 18.397 C 12.922 19.542,10.180 19.377,8.060 17.967 C 7.386 17.519,6.640 16.834,6.640 16.663 C 6.640 16.596,6.991 15.999,7.200 15.711 C 7.456 15.357,8.040 14.781,8.456 14.471 C 9.246 13.883,10.215 13.456,10.980 13.359 C 11.283 13.320,12.808 13.352,13.180 13.404 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/user-group.svg b/packages/icons/svg/user-group.svg
index d4b2d899b0..6af964fc46 100644
--- a/packages/icons/svg/user-group.svg
+++ b/packages/icons/svg/user-group.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.117 3.758 C 10.889 3.800,10.400 4.023,10.092 4.226 C 9.550 4.585,8.975 5.251,8.717 5.821 C 8.510 6.277,8.471 6.535,8.489 7.340 C 8.503 7.970,8.517 8.095,8.601 8.340 C 8.779 8.856,9.269 9.499,9.854 9.981 C 10.541 10.548,11.058 10.725,12.040 10.731 C 12.524 10.734,12.712 10.719,12.898 10.664 C 13.647 10.441,14.488 9.821,14.951 9.148 C 15.406 8.487,15.486 8.222,15.510 7.298 C 15.531 6.459,15.496 6.258,15.238 5.730 C 14.799 4.835,13.760 3.949,12.980 3.805 C 12.697 3.752,11.336 3.718,11.117 3.758 M4.204 7.341 C 3.939 7.415,3.700 7.543,3.357 7.796 C 3.033 8.034,2.844 8.261,2.638 8.658 C 2.489 8.947,2.480 8.984,2.481 9.312 C 2.482 9.910,2.545 10.348,2.665 10.593 C 2.790 10.850,3.270 11.369,3.572 11.575 C 4.235 12.026,5.216 12.058,5.916 11.652 C 6.162 11.509,6.638 11.028,6.832 10.728 C 7.118 10.284,7.200 9.604,7.041 8.983 C 6.936 8.571,6.798 8.331,6.504 8.043 C 6.196 7.741,6.110 7.676,5.845 7.542 C 5.434 7.335,4.594 7.232,4.204 7.341 M18.604 7.341 C 18.339 7.415,18.100 7.543,17.757 7.796 C 17.433 8.034,17.244 8.261,17.038 8.658 C 16.889 8.947,16.880 8.984,16.881 9.312 C 16.882 9.910,16.945 10.348,17.065 10.593 C 17.192 10.854,17.680 11.379,17.979 11.577 C 18.656 12.027,19.617 12.058,20.316 11.652 C 20.562 11.509,21.038 11.028,21.232 10.728 C 21.518 10.284,21.600 9.604,21.441 8.983 C 21.336 8.571,21.198 8.331,20.904 8.043 C 20.596 7.741,20.510 7.676,20.245 7.542 C 19.834 7.335,18.994 7.232,18.604 7.341 M10.976 13.359 C 10.542 13.425,9.722 13.816,9.185 14.213 C 8.400 14.793,7.742 15.704,7.443 16.624 C 7.276 17.135,7.240 17.632,7.212 19.770 L 7.188 21.600 12.000 21.600 L 16.811 21.600 16.788 19.810 C 16.763 17.824,16.725 17.269,16.578 16.745 C 16.351 15.938,16.057 15.428,15.456 14.802 C 14.712 14.026,13.796 13.504,13.009 13.405 C 12.586 13.351,11.226 13.321,10.976 13.359 M4.236 14.528 C 3.089 14.637,1.859 15.662,1.426 16.871 C 1.273 17.295,1.239 17.763,1.212 19.790 L 1.189 21.600 2.994 21.600 L 4.800 21.600 4.800 20.950 C 4.800 20.089,4.870 18.077,4.923 17.400 C 4.975 16.731,5.062 16.292,5.319 15.399 C 5.430 15.016,5.520 14.670,5.520 14.632 C 5.520 14.592,5.481 14.553,5.430 14.541 C 5.276 14.507,4.546 14.499,4.236 14.528 M18.497 14.574 C 18.483 14.610,18.574 14.997,18.698 15.434 C 18.982 16.429,19.026 16.683,19.078 17.623 C 19.124 18.461,19.200 20.703,19.200 21.250 L 19.200 21.600 21.006 21.600 L 22.811 21.600 22.788 19.830 C 22.763 17.833,22.722 17.283,22.572 16.865 C 22.200 15.827,21.113 14.813,20.166 14.620 C 20.020 14.590,19.590 14.553,19.211 14.537 C 18.596 14.512,18.519 14.516,18.497 14.574 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.736 3.892 C 10.271 4.088,9.872 4.360,9.502 4.735 C 8.979 5.266,8.652 5.817,8.537 6.360 C 8.472 6.665,8.463 7.573,8.522 7.980 C 8.600 8.528,8.962 9.121,9.589 9.725 C 10.405 10.512,10.935 10.720,12.125 10.720 C 12.803 10.720,12.992 10.676,13.520 10.394 C 14.434 9.905,15.206 9.019,15.423 8.210 C 15.520 7.845,15.546 6.691,15.463 6.340 C 15.231 5.351,14.213 4.233,13.216 3.873 C 13.006 3.797,12.876 3.786,12.020 3.772 L 11.060 3.756 10.736 3.892 M4.031 7.401 C 3.401 7.657,2.850 8.178,2.575 8.780 C 2.473 9.003,2.470 9.028,2.491 9.555 C 2.527 10.440,2.626 10.674,3.203 11.247 C 3.684 11.725,4.148 11.921,4.804 11.923 C 5.557 11.926,5.996 11.705,6.594 11.024 C 6.711 10.890,6.851 10.695,6.904 10.591 C 7.116 10.175,7.174 9.596,7.055 9.068 C 6.951 8.601,6.824 8.376,6.462 8.017 C 5.941 7.499,5.472 7.320,4.640 7.323 C 4.321 7.324,4.175 7.343,4.031 7.401 M18.431 7.401 C 17.801 7.657,17.250 8.178,16.975 8.780 C 16.873 9.003,16.870 9.028,16.891 9.555 C 16.927 10.438,17.027 10.676,17.597 11.240 C 18.085 11.723,18.551 11.921,19.204 11.923 C 19.957 11.926,20.396 11.705,20.994 11.024 C 21.111 10.890,21.251 10.695,21.304 10.591 C 21.516 10.175,21.574 9.596,21.455 9.068 C 21.351 8.601,21.224 8.376,20.862 8.017 C 20.341 7.499,19.872 7.320,19.040 7.323 C 18.721 7.324,18.575 7.343,18.431 7.401 M10.672 13.435 C 10.547 13.476,10.277 13.592,10.072 13.691 C 9.002 14.213,8.212 14.988,7.699 16.020 C 7.293 16.837,7.248 17.180,7.212 19.770 L 7.187 21.600 12.000 21.600 L 16.813 21.600 16.786 19.790 C 16.772 18.794,16.742 17.791,16.719 17.560 C 16.648 16.831,16.405 16.090,16.069 15.569 C 15.427 14.578,14.334 13.742,13.328 13.474 C 13.064 13.403,12.867 13.389,11.960 13.375 C 11.001 13.361,10.878 13.366,10.672 13.435 M3.932 14.580 C 3.577 14.657,3.071 14.908,2.692 15.195 C 2.007 15.713,1.486 16.487,1.335 17.209 C 1.261 17.564,1.202 18.999,1.201 20.470 L 1.200 21.600 2.994 21.600 L 4.787 21.600 4.815 20.310 C 4.846 18.818,4.903 17.575,4.962 17.060 C 5.018 16.578,5.080 16.288,5.324 15.386 C 5.519 14.664,5.525 14.623,5.457 14.573 C 5.359 14.501,4.270 14.507,3.932 14.580 M18.504 14.554 C 18.480 14.593,18.573 14.994,18.779 15.740 C 18.971 16.435,19.028 16.829,19.078 17.780 C 19.127 18.706,19.200 20.788,19.200 21.270 L 19.200 21.600 21.000 21.600 L 22.800 21.600 22.799 20.490 C 22.798 19.049,22.739 17.620,22.664 17.233 C 22.457 16.156,21.369 14.965,20.318 14.664 C 19.976 14.567,18.550 14.480,18.504 14.554 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/user-remove.svg b/packages/icons/svg/user-remove.svg
index 34642f2153..dc51fe5401 100644
--- a/packages/icons/svg/user-remove.svg
+++ b/packages/icons/svg/user-remove.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.833 3.758 C 8.449 3.790,8.073 3.969,7.515 4.388 C 6.959 4.806,6.581 5.243,6.305 5.790 C 6.142 6.111,6.087 6.433,6.057 7.242 L 6.029 7.983 6.173 8.314 C 6.560 9.208,7.453 10.162,8.218 10.501 C 8.539 10.643,8.991 10.721,9.645 10.748 C 10.189 10.770,10.257 10.765,10.508 10.682 C 11.200 10.452,11.820 10.019,12.373 9.379 C 12.666 9.041,12.848 8.717,13.004 8.260 C 13.092 8.002,13.100 7.918,13.100 7.200 C 13.100 6.482,13.092 6.398,13.004 6.140 C 12.754 5.405,12.351 4.870,11.660 4.349 C 11.251 4.042,10.867 3.857,10.528 3.806 C 10.181 3.753,9.226 3.726,8.833 3.758 M15.175 9.789 C 14.822 9.821,14.469 10.325,14.465 10.799 C 14.463 11.203,14.733 11.643,15.092 11.817 C 15.266 11.901,15.394 11.924,15.880 11.958 C 16.579 12.008,18.567 12.010,19.785 11.962 C 20.774 11.924,20.889 11.896,21.193 11.622 C 21.429 11.408,21.520 11.194,21.520 10.852 C 21.520 10.397,21.366 10.080,21.039 9.864 L 20.882 9.760 18.111 9.767 C 16.587 9.771,15.266 9.781,15.175 9.789 M8.480 13.363 C 7.725 13.433,6.475 13.922,5.627 14.479 C 5.032 14.870,4.010 15.894,3.610 16.500 C 3.356 16.884,2.956 17.732,2.784 18.250 C 2.608 18.777,2.448 19.549,2.414 20.036 L 2.388 20.400 9.600 20.400 L 16.812 20.400 16.789 20.030 C 16.747 19.316,16.377 17.975,16.025 17.258 C 15.249 15.674,13.864 14.431,12.083 13.721 C 11.381 13.442,11.173 13.404,10.082 13.360 C 9.003 13.317,8.970 13.317,8.480 13.363 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.540 3.816 C 7.873 4.028,6.953 4.761,6.519 5.425 C 6.155 5.982,6.075 6.331,6.066 7.380 L 6.060 8.100 6.231 8.435 C 6.599 9.155,7.213 9.870,7.797 10.258 C 8.307 10.597,8.710 10.704,9.642 10.746 C 10.181 10.770,10.245 10.765,10.502 10.680 C 11.086 10.488,11.628 10.138,12.134 9.628 C 12.524 9.234,12.792 8.828,12.963 8.371 L 13.095 8.020 13.096 7.200 L 13.096 6.380 12.969 6.045 C 12.720 5.387,12.306 4.847,11.705 4.393 C 11.260 4.057,10.818 3.850,10.440 3.801 C 10.000 3.744,8.735 3.754,8.540 3.816 M15.660 9.798 C 14.948 9.822,14.893 9.841,14.706 10.112 C 14.454 10.476,14.406 10.899,14.574 11.261 C 14.689 11.507,15.013 11.807,15.236 11.874 C 15.511 11.956,16.355 11.998,17.760 11.998 C 19.426 11.997,20.538 11.947,20.801 11.860 C 21.066 11.772,21.329 11.530,21.440 11.272 C 21.516 11.093,21.527 11.015,21.509 10.753 C 21.482 10.365,21.346 10.096,21.077 9.898 L 20.889 9.760 18.595 9.768 C 17.333 9.772,16.012 9.786,15.660 9.798 M8.509 13.364 C 7.687 13.450,6.414 13.950,5.592 14.508 C 4.984 14.921,4.030 15.885,3.616 16.505 C 2.998 17.431,2.496 18.909,2.413 20.050 L 2.388 20.400 9.600 20.400 L 16.812 20.400 16.788 20.050 C 16.743 19.389,16.441 18.215,16.130 17.494 C 15.506 16.047,14.282 14.797,12.735 14.026 C 11.702 13.511,11.335 13.422,9.980 13.361 C 9.005 13.316,8.953 13.317,8.509 13.364 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/user.svg b/packages/icons/svg/user.svg
index 927d992304..eecdbc2acd 100644
--- a/packages/icons/svg/user.svg
+++ b/packages/icons/svg/user.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.300 3.758 C 10.268 3.844,9.030 4.915,8.609 6.088 C 8.508 6.367,8.503 6.416,8.503 7.200 C 8.502 7.985,8.507 8.034,8.610 8.340 C 8.928 9.288,10.020 10.342,11.000 10.647 C 11.267 10.730,11.378 10.740,12.020 10.740 C 12.805 10.740,12.924 10.717,13.420 10.469 C 14.138 10.110,14.822 9.442,15.215 8.713 C 15.479 8.223,15.500 8.111,15.500 7.180 L 15.500 6.340 15.374 6.029 C 15.304 5.857,15.175 5.596,15.087 5.447 C 14.637 4.690,13.608 3.902,12.937 3.803 C 12.598 3.752,11.675 3.727,11.300 3.758 M10.780 13.361 C 10.229 13.406,9.647 13.569,8.848 13.904 C 7.659 14.402,6.800 14.989,5.919 15.904 C 4.879 16.985,4.314 18.048,3.859 19.780 C 3.693 20.410,3.600 20.968,3.600 21.330 L 3.600 21.600 12.000 21.600 L 20.400 21.600 20.400 21.401 C 20.400 20.856,20.142 19.616,19.860 18.800 C 19.365 17.374,18.280 15.893,17.069 14.994 C 16.129 14.297,14.917 13.718,13.895 13.479 C 13.281 13.335,11.794 13.279,10.780 13.361 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.960 3.824 C 10.438 3.965,9.750 4.422,9.331 4.907 C 9.025 5.261,8.706 5.790,8.597 6.126 C 8.508 6.397,8.501 6.483,8.502 7.220 C 8.502 8.080,8.524 8.207,8.751 8.660 C 9.192 9.542,10.176 10.399,11.040 10.656 C 11.536 10.804,12.675 10.775,13.123 10.604 C 13.857 10.325,14.669 9.615,15.133 8.847 C 15.451 8.321,15.484 8.181,15.508 7.241 L 15.530 6.420 15.402 6.100 C 15.332 5.924,15.214 5.672,15.141 5.540 C 14.688 4.727,13.610 3.905,12.860 3.801 C 12.421 3.739,11.220 3.754,10.960 3.824 M10.834 13.360 C 10.187 13.419,9.562 13.598,8.680 13.978 C 7.084 14.667,5.666 15.906,4.802 17.367 C 4.229 18.335,3.668 20.136,3.611 21.190 L 3.589 21.600 11.994 21.600 L 20.400 21.600 20.400 21.365 C 20.400 20.840,20.093 19.433,19.819 18.698 C 19.443 17.692,18.821 16.703,18.043 15.872 C 17.422 15.210,16.692 14.676,15.759 14.201 C 14.837 13.732,14.211 13.517,13.480 13.418 C 12.964 13.348,11.359 13.312,10.834 13.360 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/users.svg b/packages/icons/svg/users.svg
index bb1d47af9f..b181f6722d 100644
--- a/packages/icons/svg/users.svg
+++ b/packages/icons/svg/users.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.236 3.775 C 5.426 4.011,4.410 4.837,4.040 5.561 C 3.673 6.282,3.545 7.338,3.739 8.058 C 4.053 9.224,4.928 10.170,6.088 10.593 C 6.368 10.696,6.413 10.700,7.180 10.700 C 8.067 10.700,8.219 10.672,8.722 10.419 C 9.495 10.030,10.339 9.072,10.580 8.311 C 10.835 7.508,10.794 6.513,10.480 5.815 C 10.075 4.917,9.103 4.061,8.210 3.816 C 7.891 3.728,6.496 3.700,6.236 3.775 M15.980 3.765 C 15.532 3.830,14.807 4.239,14.325 4.697 C 13.260 5.712,12.952 7.286,13.558 8.622 C 14.001 9.599,14.980 10.426,15.970 10.660 C 16.485 10.781,17.535 10.715,17.999 10.532 C 18.975 10.148,19.736 9.378,20.168 8.338 L 20.300 8.020 20.298 7.240 C 20.297 6.610,20.283 6.414,20.225 6.222 C 20.065 5.690,19.732 5.164,19.264 4.700 C 18.887 4.327,18.582 4.115,18.154 3.930 C 17.873 3.809,17.796 3.794,17.234 3.760 C 16.521 3.716,16.309 3.717,15.980 3.765 M5.853 13.416 C 4.884 13.673,3.969 14.147,3.350 14.713 C 2.487 15.502,2.082 16.042,1.738 16.863 C 1.360 17.765,1.249 18.337,1.212 19.570 L 1.188 20.400 7.200 20.400 L 13.211 20.400 13.188 19.590 C 13.154 18.389,13.029 17.726,12.682 16.896 C 12.384 16.182,12.048 15.693,11.446 15.094 C 10.595 14.249,9.705 13.720,8.681 13.451 C 8.332 13.359,8.213 13.349,7.260 13.335 C 6.259 13.319,6.206 13.323,5.853 13.416 M15.800 13.348 C 15.350 13.427,14.458 13.702,14.032 13.892 L 13.805 13.993 14.066 14.427 C 14.417 15.008,14.916 16.009,15.098 16.497 C 15.377 17.243,15.461 17.857,15.507 19.483 L 15.533 20.400 19.166 20.400 L 22.800 20.400 22.800 19.970 C 22.798 18.485,22.508 17.138,22.009 16.300 C 21.624 15.654,20.762 14.749,20.095 14.292 C 19.269 13.726,18.523 13.451,17.572 13.361 C 17.152 13.321,16.002 13.313,15.800 13.348 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.415 3.761 C 5.715 3.835,4.593 4.652,4.116 5.437 C 3.855 5.868,3.638 6.725,3.642 7.320 C 3.645 7.891,3.872 8.595,4.225 9.128 C 4.755 9.928,5.721 10.585,6.519 10.689 C 6.922 10.741,7.967 10.697,8.244 10.616 C 9.053 10.378,9.993 9.535,10.436 8.649 C 10.805 7.914,10.843 6.760,10.527 5.946 C 10.207 5.120,9.366 4.283,8.494 3.920 C 8.238 3.813,8.128 3.793,7.611 3.760 C 6.954 3.717,6.827 3.717,6.415 3.761 M16.030 3.763 C 15.716 3.809,15.321 3.982,14.897 4.259 C 14.304 4.645,13.825 5.189,13.558 5.778 C 13.167 6.640,13.160 7.724,13.539 8.581 C 13.861 9.310,14.561 10.036,15.303 10.412 C 15.791 10.658,16.003 10.700,16.740 10.696 C 17.294 10.692,17.477 10.676,17.726 10.608 C 18.802 10.316,19.693 9.477,20.185 8.291 L 20.331 7.940 20.306 7.176 C 20.286 6.578,20.263 6.355,20.201 6.156 C 19.978 5.438,19.258 4.557,18.558 4.143 C 18.096 3.870,17.874 3.809,17.180 3.763 C 16.467 3.715,16.360 3.715,16.030 3.763 M6.096 13.364 C 5.512 13.461,4.559 13.862,3.930 14.275 C 3.493 14.563,2.696 15.320,2.353 15.775 C 1.925 16.344,1.482 17.373,1.342 18.126 C 1.260 18.568,1.201 19.305,1.201 19.910 L 1.200 20.400 7.200 20.400 L 13.200 20.400 13.199 19.930 C 13.198 18.905,13.083 18.050,12.856 17.371 C 12.555 16.472,12.203 15.887,11.562 15.225 C 10.725 14.361,9.929 13.851,8.900 13.520 C 8.537 13.403,8.432 13.388,7.760 13.357 C 6.862 13.316,6.367 13.318,6.096 13.364 M15.748 13.359 C 15.446 13.414,14.704 13.633,14.315 13.782 C 13.738 14.002,13.763 13.929,14.085 14.470 C 14.239 14.729,14.498 15.210,14.660 15.540 C 15.329 16.902,15.405 17.239,15.488 19.230 L 15.537 20.400 19.174 20.400 L 22.812 20.400 22.788 19.650 C 22.751 18.521,22.590 17.642,22.277 16.864 C 22.086 16.387,21.804 15.953,21.353 15.442 C 20.353 14.308,19.226 13.629,18.000 13.423 C 17.559 13.348,16.039 13.305,15.748 13.359 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/variable.svg b/packages/icons/svg/variable.svg
index bff73e1b69..7f94d0d132 100644
--- a/packages/icons/svg/variable.svg
+++ b/packages/icons/svg/variable.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.515 3.834 C 4.158 4.061,3.878 4.571,3.501 5.681 C 3.117 6.811,2.720 8.388,2.581 9.334 C 2.421 10.424,2.433 13.720,2.600 14.749 C 2.889 16.532,3.634 19.023,4.090 19.735 C 4.341 20.127,4.845 20.401,5.208 20.343 C 5.589 20.282,5.994 19.964,6.185 19.574 L 6.292 19.356 6.206 19.008 C 6.159 18.817,5.968 18.155,5.783 17.538 C 4.999 14.926,4.894 14.204,4.932 11.705 C 4.967 9.387,5.064 8.791,5.794 6.420 C 6.298 4.781,6.307 4.725,6.146 4.380 C 5.943 3.946,5.544 3.720,4.981 3.720 C 4.736 3.720,4.670 3.736,4.515 3.834 M18.207 3.917 C 17.687 4.350,17.663 4.567,18.012 5.740 C 18.708 8.084,18.820 8.515,18.937 9.321 C 19.071 10.236,19.118 12.208,19.039 13.540 C 18.960 14.846,18.796 15.666,18.266 17.383 C 17.977 18.320,17.819 18.894,17.780 19.149 C 17.700 19.660,18.157 20.227,18.707 20.299 C 19.217 20.366,19.603 20.209,19.842 19.837 C 20.378 19.001,21.195 16.211,21.416 14.460 C 21.625 12.803,21.593 10.624,21.337 9.000 C 21.078 7.365,20.273 4.776,19.818 4.117 C 19.680 3.918,19.458 3.805,19.113 3.761 C 18.536 3.686,18.472 3.697,18.207 3.917 M9.187 8.556 C 8.987 8.598,8.673 8.907,8.556 9.176 C 8.335 9.689,8.575 10.338,9.082 10.600 C 9.265 10.695,9.671 10.800,9.851 10.800 L 9.991 10.800 10.314 11.605 L 10.637 12.410 10.113 13.026 C 9.392 13.874,9.081 14.178,8.849 14.263 C 7.827 14.636,7.578 14.769,7.397 15.038 C 7.091 15.493,7.294 16.255,7.806 16.571 C 8.150 16.784,8.817 16.786,9.485 16.577 C 10.127 16.376,10.507 16.123,11.263 15.392 L 11.626 15.041 11.856 15.379 C 12.110 15.752,12.537 16.205,12.819 16.399 C 13.336 16.755,14.421 16.873,14.908 16.626 C 15.279 16.438,15.530 16.018,15.530 15.585 C 15.530 14.989,15.150 14.629,14.343 14.460 L 14.004 14.388 13.684 13.589 L 13.363 12.790 13.837 12.225 C 14.391 11.564,14.739 11.201,14.949 11.065 C 15.032 11.011,15.316 10.891,15.580 10.799 C 16.124 10.610,16.239 10.548,16.448 10.333 C 16.642 10.133,16.724 9.927,16.725 9.637 C 16.727 9.221,16.553 8.874,16.233 8.657 L 16.060 8.540 15.438 8.546 C 14.711 8.552,14.456 8.605,14.005 8.840 C 13.628 9.038,13.291 9.290,12.807 9.736 C 12.601 9.925,12.421 10.080,12.407 10.079 C 12.352 10.078,12.291 10.014,12.160 9.820 C 11.822 9.320,11.451 8.976,10.951 8.702 L 10.682 8.554 10.011 8.539 C 9.642 8.530,9.271 8.538,9.187 8.556 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.600 3.788 C 4.118 4.035,3.708 4.881,3.181 6.719 C 2.963 7.482,2.682 8.674,2.603 9.180 C 2.513 9.750,2.481 10.458,2.481 11.920 C 2.480 13.473,2.519 14.281,2.624 14.900 C 2.914 16.612,3.673 19.096,4.100 19.735 C 4.316 20.060,4.675 20.299,5.010 20.344 C 5.396 20.396,5.951 20.028,6.198 19.556 L 6.294 19.372 6.225 19.090 C 6.187 18.935,6.004 18.288,5.817 17.654 C 5.016 14.935,4.940 14.458,4.946 12.160 C 4.953 9.464,5.024 8.988,5.822 6.332 C 6.252 4.901,6.289 4.702,6.171 4.435 C 5.976 3.994,5.612 3.762,5.071 3.734 C 4.807 3.720,4.712 3.731,4.600 3.788 M18.367 3.802 C 18.107 3.960,17.857 4.250,17.806 4.452 C 17.737 4.726,17.786 4.962,18.201 6.382 C 18.785 8.379,18.916 8.963,18.998 9.940 C 19.070 10.804,19.092 12.382,19.044 13.280 C 18.964 14.771,18.819 15.536,18.260 17.398 C 17.702 19.259,17.690 19.344,17.920 19.748 C 18.273 20.365,19.147 20.509,19.661 20.035 C 20.252 19.490,21.224 16.267,21.459 14.074 C 21.642 12.366,21.548 9.953,21.240 8.460 C 21.032 7.449,20.650 6.108,20.312 5.200 C 19.885 4.054,19.722 3.862,19.092 3.764 C 18.681 3.701,18.518 3.709,18.367 3.802 M8.970 8.677 C 8.378 9.106,8.310 9.864,8.816 10.383 C 8.992 10.563,9.065 10.606,9.352 10.696 C 9.535 10.753,9.753 10.800,9.838 10.800 L 9.991 10.800 10.314 11.605 L 10.637 12.409 10.210 12.915 C 9.976 13.193,9.603 13.600,9.382 13.821 C 8.993 14.208,8.968 14.225,8.604 14.357 C 7.690 14.689,7.369 14.925,7.277 15.338 C 7.159 15.864,7.506 16.493,8.002 16.653 C 8.313 16.753,8.827 16.741,9.297 16.622 C 10.006 16.442,10.428 16.182,11.203 15.447 L 11.626 15.046 11.872 15.395 C 12.222 15.891,12.726 16.372,13.046 16.515 C 13.434 16.690,13.693 16.740,14.200 16.738 C 14.582 16.738,14.692 16.723,14.846 16.653 C 15.487 16.361,15.734 15.455,15.313 14.944 C 15.161 14.760,14.723 14.545,14.325 14.459 L 14.004 14.389 13.683 13.589 L 13.362 12.789 13.751 12.325 C 14.285 11.688,14.787 11.171,14.981 11.057 C 15.071 11.005,15.333 10.892,15.563 10.806 C 16.140 10.592,16.286 10.511,16.468 10.304 C 16.882 9.834,16.785 9.080,16.260 8.683 L 16.100 8.562 15.497 8.561 C 14.806 8.560,14.521 8.602,14.181 8.757 C 13.743 8.957,13.419 9.195,12.586 9.929 L 12.393 10.099 12.286 9.975 C 12.228 9.906,12.082 9.723,11.963 9.566 C 11.718 9.246,11.382 8.958,10.977 8.721 L 10.701 8.560 9.917 8.560 L 9.132 8.560 8.970 8.677 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/video-camera.svg b/packages/icons/svg/video-camera.svg
index 722e36909c..5be069604d 100644
--- a/packages/icons/svg/video-camera.svg
+++ b/packages/icons/svg/video-camera.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.764 5.105 C 3.213 5.473,2.784 5.958,2.485 6.548 L 2.400 6.717 2.400 12.000 L 2.400 17.282 2.525 17.531 C 2.864 18.208,3.388 18.732,4.069 19.075 L 4.318 19.200 8.380 19.200 L 12.442 19.200 12.691 19.075 C 13.457 18.689,13.927 18.224,14.295 17.491 L 14.400 17.283 14.399 11.991 L 14.399 6.700 14.238 6.406 C 13.922 5.826,13.551 5.428,13.026 5.105 L 12.740 4.929 8.418 4.906 L 4.096 4.882 3.764 5.105 M19.960 7.315 C 19.636 7.423,17.955 8.324,17.377 8.699 C 16.818 9.062,16.819 9.055,16.822 12.100 C 16.824 14.524,16.840 14.785,16.997 14.985 C 17.119 15.141,17.439 15.381,17.846 15.622 C 18.374 15.936,19.735 16.610,20.014 16.697 C 20.515 16.853,21.050 16.649,21.442 16.153 L 21.600 15.953 21.598 12.906 C 21.597 9.798,21.559 8.266,21.478 7.980 C 21.414 7.755,21.093 7.459,20.826 7.378 C 20.580 7.303,20.100 7.268,19.960 7.315 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.739 5.130 C 3.279 5.457,2.827 5.942,2.590 6.363 L 2.400 6.700 2.401 12.000 L 2.401 17.300 2.562 17.594 C 2.930 18.271,3.421 18.747,4.109 19.094 L 4.317 19.200 8.380 19.200 L 12.442 19.200 12.691 19.075 C 13.425 18.705,13.939 18.196,14.295 17.491 L 14.400 17.283 14.400 11.990 L 14.400 6.698 14.221 6.384 C 13.878 5.782,13.586 5.472,13.020 5.110 L 12.740 4.931 8.412 4.908 L 4.083 4.885 3.739 5.130 M19.975 7.318 C 19.816 7.356,18.594 7.988,17.862 8.410 C 17.235 8.772,16.992 8.981,16.923 9.220 C 16.762 9.774,16.769 14.551,16.931 14.861 C 17.097 15.178,17.661 15.557,18.878 16.170 C 19.862 16.666,20.189 16.783,20.471 16.741 C 20.850 16.684,21.152 16.502,21.425 16.167 L 21.600 15.953 21.599 13.006 C 21.598 10.008,21.557 8.287,21.482 8.006 C 21.432 7.823,21.190 7.557,20.971 7.445 C 20.760 7.338,20.192 7.265,19.975 7.318 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/view-boards.svg b/packages/icons/svg/view-boards.svg
index 9095fcef02..2c13b76983 100644
--- a/packages/icons/svg/view-boards.svg
+++ b/packages/icons/svg/view-boards.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.300 3.680 C 3.412 3.711,3.205 3.736,3.000 3.841 C 2.821 3.933,2.578 4.185,2.519 4.340 C 2.434 4.559,2.404 6.472,2.404 11.560 C 2.403 16.958,2.441 19.492,2.524 19.647 C 2.616 19.820,2.800 20.023,3.008 20.182 L 3.215 20.340 4.778 20.340 C 6.165 20.340,6.353 20.333,6.460 20.273 C 6.526 20.236,6.722 20.062,6.895 19.887 L 7.210 19.569 7.193 12.034 C 7.179 5.820,7.167 4.482,7.122 4.400 C 7.040 4.248,6.852 4.041,6.606 3.830 L 6.383 3.640 5.742 3.647 C 5.389 3.650,4.740 3.666,4.300 3.680 M10.488 3.761 C 10.219 3.800,10.008 3.940,9.780 4.230 L 9.600 4.460 9.600 12.005 L 9.600 19.550 9.763 19.754 C 9.853 19.867,10.045 20.058,10.192 20.179 L 10.457 20.400 11.988 20.400 L 13.518 20.400 13.827 20.150 C 14.042 19.976,14.167 19.840,14.238 19.701 L 14.340 19.502 14.366 16.101 C 14.380 14.230,14.394 10.841,14.396 8.569 L 14.400 4.439 14.050 4.079 L 13.700 3.720 12.200 3.725 C 11.375 3.728,10.605 3.744,10.488 3.761 M17.688 3.761 C 17.419 3.800,17.208 3.940,16.980 4.230 L 16.800 4.460 16.800 12.005 L 16.800 19.550 16.963 19.754 C 17.053 19.867,17.245 20.058,17.392 20.179 L 17.657 20.400 19.188 20.400 L 20.718 20.400 21.027 20.150 C 21.242 19.976,21.367 19.840,21.438 19.701 L 21.540 19.502 21.566 16.101 C 21.580 14.230,21.594 10.841,21.596 8.569 L 21.600 4.439 21.250 4.079 L 20.900 3.720 19.400 3.725 C 18.575 3.728,17.805 3.744,17.688 3.761 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.372 3.683 C 3.360 3.718,3.111 3.757,2.887 3.919 C 2.614 4.117,2.512 4.287,2.473 4.612 C 2.453 4.770,2.427 7.393,2.415 10.440 C 2.393 15.995,2.431 19.385,2.518 19.614 C 2.570 19.752,2.965 20.172,3.150 20.286 C 3.283 20.368,3.317 20.370,4.815 20.353 C 6.584 20.334,6.413 20.373,6.915 19.867 L 7.209 19.569 7.193 12.054 C 7.177 4.888,7.173 4.533,7.103 4.390 C 7.063 4.307,6.887 4.105,6.712 3.940 L 6.393 3.640 5.827 3.646 C 5.515 3.650,4.860 3.666,4.372 3.683 M10.780 3.757 C 10.396 3.777,10.316 3.794,10.154 3.890 C 10.051 3.950,9.885 4.103,9.784 4.230 L 9.601 4.460 9.600 12.003 L 9.600 19.547 9.746 19.734 C 9.827 19.838,10.019 20.030,10.174 20.161 L 10.456 20.400 12.001 20.400 L 13.547 20.400 13.870 20.100 C 14.055 19.928,14.229 19.725,14.277 19.626 L 14.361 19.452 14.387 11.944 L 14.413 4.435 14.057 4.077 L 13.702 3.720 12.461 3.727 C 11.778 3.731,11.022 3.744,10.780 3.757 M17.980 3.757 C 17.596 3.777,17.516 3.794,17.354 3.890 C 17.251 3.950,17.085 4.103,16.984 4.230 L 16.801 4.460 16.800 12.003 L 16.800 19.547 16.946 19.734 C 17.027 19.838,17.219 20.030,17.374 20.161 L 17.656 20.400 19.201 20.400 L 20.747 20.400 21.070 20.100 C 21.255 19.928,21.429 19.725,21.477 19.626 L 21.561 19.452 21.587 11.944 L 21.613 4.435 21.257 4.077 L 20.902 3.720 19.661 3.727 C 18.978 3.731,18.222 3.744,17.980 3.757 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/view-grid-add.svg b/packages/icons/svg/view-grid-add.svg
index 774fcba0c2..4f5881c254 100644
--- a/packages/icons/svg/view-grid-add.svg
+++ b/packages/icons/svg/view-grid-add.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.120 3.722 C 5.321 3.755,5.142 3.792,4.854 3.981 C 4.583 4.158,4.158 4.558,3.975 4.806 C 3.689 5.197,3.668 5.328,3.650 6.880 C 3.630 8.578,3.660 8.980,3.835 9.337 C 4.060 9.793,4.731 10.428,5.215 10.642 C 5.350 10.702,5.554 10.735,5.989 10.766 C 6.647 10.814,8.423 10.786,8.850 10.721 C 9.294 10.654,9.448 10.557,10.026 9.982 C 10.501 9.509,10.558 9.437,10.615 9.239 C 10.738 8.808,10.776 8.275,10.778 6.920 C 10.780 5.620,10.777 5.573,10.689 5.340 C 10.482 4.795,9.905 4.155,9.391 3.902 C 9.103 3.760,9.092 3.758,8.380 3.720 C 7.584 3.678,7.160 3.678,6.120 3.722 M14.657 3.859 C 14.184 4.095,13.649 4.649,13.361 5.202 L 13.196 5.520 13.208 7.214 L 13.220 8.908 13.371 9.205 C 13.704 9.861,14.132 10.289,14.806 10.640 L 15.112 10.800 16.806 10.799 L 18.500 10.799 18.794 10.638 C 19.471 10.270,19.947 9.779,20.294 9.091 L 20.400 8.883 20.400 7.191 L 20.400 5.499 20.190 5.125 C 19.930 4.662,19.531 4.224,19.127 3.959 L 18.824 3.760 16.840 3.760 L 14.856 3.760 14.657 3.859 M16.278 13.396 C 16.106 13.490,15.814 13.799,15.755 13.950 C 15.668 14.172,15.603 14.672,15.601 15.126 L 15.600 15.592 15.170 15.620 C 14.533 15.661,13.910 15.775,13.738 15.881 C 13.319 16.140,13.124 16.813,13.342 17.248 C 13.456 17.474,13.798 17.793,13.998 17.859 C 14.269 17.948,14.688 17.998,15.164 17.999 L 15.588 18.000 15.612 18.610 C 15.641 19.351,15.688 19.585,15.856 19.828 C 16.049 20.109,16.304 20.268,16.616 20.301 C 17.031 20.346,17.235 20.299,17.484 20.104 C 17.883 19.790,17.997 19.412,17.999 18.396 L 18.000 18.012 18.650 17.988 C 19.480 17.957,19.658 17.907,19.942 17.624 C 20.189 17.376,20.316 17.145,20.346 16.887 C 20.389 16.517,20.106 16.017,19.752 15.836 C 19.582 15.749,19.032 15.660,18.416 15.619 L 18.012 15.592 17.988 14.946 C 17.973 14.549,17.940 14.222,17.903 14.098 C 17.829 13.853,17.617 13.597,17.368 13.451 C 17.207 13.357,17.132 13.341,16.801 13.330 C 16.485 13.321,16.396 13.332,16.278 13.396 M5.057 13.459 C 4.584 13.695,4.049 14.249,3.761 14.802 L 3.596 15.120 3.608 16.814 L 3.620 18.508 3.771 18.805 C 4.104 19.461,4.532 19.889,5.206 20.240 L 5.512 20.400 7.206 20.399 L 8.900 20.399 9.194 20.238 C 9.871 19.870,10.347 19.379,10.694 18.691 L 10.800 18.483 10.800 16.791 L 10.800 15.099 10.590 14.725 C 10.330 14.262,9.931 13.824,9.527 13.559 L 9.224 13.360 7.240 13.360 L 5.256 13.360 5.057 13.459 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.213 3.720 C 5.488 3.754,5.198 3.798,4.988 3.905 C 4.647 4.080,4.053 4.644,3.863 4.974 C 3.682 5.289,3.662 5.505,3.661 7.220 C 3.660 9.184,3.663 9.198,4.172 9.810 C 4.431 10.122,4.967 10.542,5.233 10.641 C 5.567 10.766,6.316 10.813,7.540 10.785 C 8.134 10.772,8.727 10.743,8.858 10.721 C 9.271 10.652,9.486 10.514,10.044 9.959 C 10.616 9.390,10.640 9.345,10.717 8.680 C 10.776 8.168,10.811 6.275,10.770 5.820 C 10.727 5.359,10.637 5.139,10.311 4.703 C 9.909 4.166,9.372 3.815,8.871 3.759 C 8.394 3.706,6.949 3.685,6.213 3.720 M14.663 3.863 C 14.142 4.131,13.619 4.687,13.305 5.309 L 13.200 5.517 13.200 7.206 L 13.200 8.895 13.410 9.274 C 13.752 9.891,14.253 10.366,14.909 10.695 L 15.117 10.800 16.810 10.800 L 18.502 10.800 18.816 10.621 C 19.500 10.231,19.958 9.757,20.295 9.091 L 20.400 8.883 20.400 7.182 L 20.400 5.482 20.218 5.174 C 19.873 4.591,19.557 4.251,19.041 3.906 L 18.821 3.760 16.841 3.761 L 14.860 3.762 14.663 3.863 M16.289 13.402 C 16.076 13.511,15.785 13.838,15.727 14.034 C 15.650 14.290,15.602 14.725,15.601 15.170 C 15.600 15.589,15.598 15.600,15.510 15.600 C 14.997 15.600,13.989 15.764,13.749 15.886 C 13.547 15.989,13.384 16.225,13.299 16.538 C 13.191 16.938,13.257 17.202,13.546 17.522 C 13.855 17.864,14.137 17.955,14.984 17.988 L 15.588 18.011 15.613 18.616 C 15.653 19.613,15.791 19.933,16.300 20.210 C 16.430 20.281,16.528 20.297,16.824 20.298 C 17.176 20.300,17.196 20.295,17.396 20.160 C 17.828 19.869,17.957 19.536,17.989 18.630 L 18.011 18.000 18.396 18.000 C 19.396 17.999,19.756 17.881,20.087 17.449 C 20.333 17.126,20.397 16.866,20.306 16.557 C 20.221 16.271,19.986 15.968,19.760 15.854 C 19.571 15.759,19.030 15.667,18.370 15.619 L 18.000 15.592 17.999 15.226 C 17.998 14.590,17.933 14.135,17.811 13.911 C 17.604 13.530,17.325 13.370,16.814 13.337 C 16.502 13.317,16.440 13.325,16.289 13.402 M5.063 13.463 C 4.542 13.731,4.019 14.287,3.705 14.909 L 3.600 15.117 3.600 16.806 L 3.600 18.495 3.810 18.874 C 4.152 19.491,4.653 19.966,5.309 20.295 L 5.517 20.400 7.210 20.400 L 8.902 20.400 9.216 20.221 C 9.900 19.831,10.358 19.357,10.695 18.691 L 10.800 18.483 10.800 16.782 L 10.800 15.082 10.618 14.774 C 10.273 14.191,9.957 13.851,9.441 13.506 L 9.221 13.360 7.241 13.361 L 5.260 13.362 5.063 13.463 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/view-grid.svg b/packages/icons/svg/view-grid.svg
index fe5002ee07..40cda17b7b 100644
--- a/packages/icons/svg/view-grid.svg
+++ b/packages/icons/svg/view-grid.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.120 3.722 C 5.321 3.755,5.142 3.792,4.854 3.981 C 4.583 4.158,4.158 4.558,3.975 4.806 C 3.689 5.197,3.668 5.328,3.650 6.880 C 3.630 8.578,3.660 8.980,3.835 9.337 C 4.060 9.793,4.731 10.428,5.215 10.642 C 5.350 10.702,5.554 10.735,5.989 10.766 C 6.647 10.814,8.423 10.786,8.850 10.721 C 9.294 10.654,9.448 10.557,10.026 9.982 C 10.501 9.509,10.558 9.437,10.615 9.239 C 10.738 8.808,10.776 8.275,10.778 6.920 C 10.780 5.620,10.777 5.573,10.689 5.340 C 10.482 4.795,9.905 4.155,9.391 3.902 C 9.103 3.760,9.092 3.758,8.380 3.720 C 7.584 3.678,7.160 3.678,6.120 3.722 M14.657 3.859 C 14.184 4.095,13.649 4.649,13.361 5.202 L 13.196 5.520 13.208 7.214 L 13.220 8.908 13.371 9.205 C 13.704 9.861,14.132 10.289,14.806 10.640 L 15.112 10.800 16.806 10.799 L 18.500 10.799 18.794 10.638 C 19.471 10.270,19.947 9.779,20.294 9.091 L 20.400 8.883 20.400 7.191 L 20.400 5.499 20.190 5.125 C 19.930 4.662,19.531 4.224,19.127 3.959 L 18.824 3.760 16.840 3.760 L 14.856 3.760 14.657 3.859 M5.057 13.459 C 4.584 13.695,4.049 14.249,3.761 14.802 L 3.596 15.120 3.608 16.814 L 3.620 18.508 3.771 18.805 C 4.104 19.461,4.532 19.889,5.206 20.240 L 5.512 20.400 7.206 20.399 L 8.900 20.399 9.194 20.238 C 9.871 19.870,10.347 19.379,10.694 18.691 L 10.800 18.483 10.800 16.791 L 10.800 15.099 10.590 14.725 C 10.330 14.262,9.931 13.824,9.527 13.559 L 9.224 13.360 7.240 13.360 L 5.256 13.360 5.057 13.459 M14.657 13.459 C 14.184 13.695,13.649 14.249,13.361 14.802 L 13.196 15.120 13.208 16.814 L 13.220 18.508 13.371 18.805 C 13.704 19.461,14.132 19.889,14.806 20.240 L 15.112 20.400 16.806 20.399 L 18.500 20.399 18.794 20.238 C 19.471 19.870,19.947 19.379,20.294 18.691 L 20.400 18.483 20.400 16.791 L 20.400 15.099 20.190 14.725 C 19.930 14.262,19.531 13.824,19.127 13.559 L 18.824 13.360 16.840 13.360 L 14.856 13.360 14.657 13.459 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.213 3.720 C 5.488 3.754,5.198 3.798,4.988 3.905 C 4.647 4.080,4.053 4.644,3.863 4.974 C 3.682 5.289,3.662 5.505,3.661 7.220 C 3.660 9.184,3.663 9.198,4.172 9.810 C 4.431 10.122,4.967 10.542,5.233 10.641 C 5.567 10.766,6.316 10.813,7.540 10.785 C 8.134 10.772,8.727 10.743,8.858 10.721 C 9.271 10.652,9.486 10.514,10.044 9.959 C 10.616 9.390,10.640 9.345,10.717 8.680 C 10.776 8.168,10.811 6.275,10.770 5.820 C 10.727 5.359,10.637 5.139,10.311 4.703 C 9.909 4.166,9.372 3.815,8.871 3.759 C 8.394 3.706,6.949 3.685,6.213 3.720 M14.663 3.863 C 14.142 4.131,13.619 4.687,13.305 5.309 L 13.200 5.517 13.200 7.206 L 13.200 8.895 13.410 9.274 C 13.752 9.891,14.253 10.366,14.909 10.695 L 15.117 10.800 16.810 10.800 L 18.502 10.800 18.816 10.621 C 19.500 10.231,19.958 9.757,20.295 9.091 L 20.400 8.883 20.400 7.182 L 20.400 5.482 20.218 5.174 C 19.873 4.591,19.557 4.251,19.041 3.906 L 18.821 3.760 16.841 3.761 L 14.860 3.762 14.663 3.863 M5.063 13.463 C 4.542 13.731,4.019 14.287,3.705 14.909 L 3.600 15.117 3.600 16.806 L 3.600 18.495 3.810 18.874 C 4.152 19.491,4.653 19.966,5.309 20.295 L 5.517 20.400 7.210 20.400 L 8.902 20.400 9.216 20.221 C 9.900 19.831,10.358 19.357,10.695 18.691 L 10.800 18.483 10.800 16.782 L 10.800 15.082 10.618 14.774 C 10.273 14.191,9.957 13.851,9.441 13.506 L 9.221 13.360 7.241 13.361 L 5.260 13.362 5.063 13.463 M14.663 13.463 C 14.142 13.731,13.619 14.287,13.305 14.909 L 13.200 15.117 13.200 16.806 L 13.200 18.495 13.410 18.874 C 13.752 19.491,14.253 19.966,14.909 20.295 L 15.117 20.400 16.810 20.400 L 18.502 20.400 18.816 20.221 C 19.500 19.831,19.958 19.357,20.295 18.691 L 20.400 18.483 20.400 16.782 L 20.400 15.082 20.218 14.774 C 19.873 14.191,19.557 13.851,19.041 13.506 L 18.821 13.360 16.841 13.361 L 14.860 13.362 14.663 13.463 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/view-list.svg b/packages/icons/svg/view-list.svg
index f0110f15ec..1ef9b76e3e 100644
--- a/packages/icons/svg/view-list.svg
+++ b/packages/icons/svg/view-list.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.797 3.678 L 4.373 3.700 4.199 3.820 C 3.983 3.970,3.691 4.359,3.656 4.546 C 3.587 4.916,3.731 5.335,4.031 5.635 C 4.192 5.796,4.268 5.840,4.444 5.877 C 4.792 5.948,8.851 5.998,14.416 5.999 L 19.533 6.000 19.744 5.837 C 19.978 5.656,20.106 5.504,20.235 5.250 C 20.480 4.770,20.330 4.284,19.802 3.845 L 19.556 3.640 17.388 3.648 C 16.196 3.652,12.779 3.666,9.797 3.678 M9.797 8.478 L 4.373 8.500 4.199 8.620 C 3.983 8.770,3.691 9.159,3.656 9.346 C 3.587 9.716,3.731 10.135,4.031 10.435 C 4.192 10.596,4.268 10.640,4.444 10.677 C 4.792 10.748,8.851 10.798,14.416 10.799 L 19.533 10.800 19.744 10.637 C 19.978 10.456,20.106 10.304,20.235 10.050 C 20.480 9.570,20.330 9.084,19.802 8.645 L 19.556 8.440 17.388 8.448 C 16.196 8.452,12.779 8.466,9.797 8.478 M9.797 13.278 L 4.373 13.300 4.199 13.420 C 3.983 13.570,3.691 13.959,3.656 14.146 C 3.587 14.516,3.731 14.935,4.031 15.235 C 4.192 15.396,4.268 15.440,4.444 15.477 C 4.792 15.548,8.851 15.598,14.416 15.599 L 19.533 15.600 19.744 15.437 C 19.978 15.256,20.106 15.104,20.235 14.850 C 20.480 14.370,20.330 13.884,19.802 13.445 L 19.556 13.240 17.388 13.248 C 16.196 13.252,12.779 13.266,9.797 13.278 M9.797 18.078 L 4.373 18.100 4.199 18.220 C 3.983 18.370,3.691 18.759,3.656 18.946 C 3.587 19.316,3.731 19.735,4.031 20.035 C 4.192 20.196,4.268 20.240,4.444 20.277 C 4.792 20.348,8.851 20.398,14.416 20.399 L 19.533 20.400 19.744 20.237 C 19.978 20.056,20.106 19.904,20.235 19.650 C 20.480 19.170,20.330 18.684,19.802 18.245 L 19.556 18.040 17.388 18.048 C 16.196 18.052,12.779 18.066,9.797 18.078 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.938 3.678 C 4.735 3.699,4.370 3.704,4.270 3.770 C 4.095 3.885,3.856 4.154,3.739 4.368 C 3.644 4.544,3.632 4.601,3.650 4.816 C 3.681 5.208,3.932 5.622,4.246 5.799 C 4.392 5.881,4.488 5.894,5.175 5.925 C 5.596 5.945,9.000 5.971,12.740 5.983 L 19.540 6.006 19.767 5.823 C 20.193 5.477,20.412 5.006,20.324 4.622 C 20.265 4.361,20.051 4.052,19.772 3.822 L 19.551 3.640 17.525 3.648 C 16.411 3.652,12.997 3.666,9.938 3.678 M9.938 8.478 C 4.735 8.499,4.370 8.504,4.270 8.570 C 4.095 8.685,3.856 8.954,3.739 9.168 C 3.644 9.344,3.632 9.401,3.650 9.616 C 3.681 10.008,3.932 10.422,4.246 10.599 C 4.392 10.681,4.488 10.694,5.175 10.725 C 5.596 10.745,9.000 10.771,12.740 10.783 L 19.540 10.806 19.767 10.623 C 20.193 10.277,20.412 9.806,20.324 9.422 C 20.265 9.161,20.051 8.852,19.772 8.622 L 19.551 8.440 17.525 8.448 C 16.411 8.452,12.997 8.466,9.938 8.478 M9.938 13.278 C 4.735 13.299,4.370 13.304,4.270 13.370 C 4.095 13.485,3.856 13.754,3.739 13.968 C 3.644 14.144,3.632 14.201,3.650 14.416 C 3.681 14.808,3.932 15.222,4.246 15.399 C 4.392 15.481,4.488 15.494,5.175 15.525 C 5.596 15.545,9.000 15.571,12.740 15.583 L 19.540 15.606 19.767 15.423 C 20.193 15.077,20.412 14.606,20.324 14.222 C 20.265 13.961,20.051 13.652,19.772 13.422 L 19.551 13.240 17.525 13.248 C 16.411 13.252,12.997 13.266,9.938 13.278 M9.938 18.078 C 4.735 18.099,4.370 18.104,4.270 18.170 C 4.095 18.285,3.856 18.554,3.739 18.768 C 3.644 18.944,3.632 19.001,3.650 19.216 C 3.681 19.608,3.932 20.022,4.246 20.199 C 4.392 20.281,4.488 20.294,5.175 20.325 C 5.596 20.345,9.000 20.371,12.740 20.383 L 19.540 20.406 19.767 20.223 C 20.193 19.877,20.412 19.406,20.324 19.022 C 20.265 18.761,20.051 18.452,19.772 18.222 L 19.551 18.040 17.525 18.048 C 16.411 18.052,12.997 18.066,9.938 18.078 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/vimeo.svg b/packages/icons/svg/vimeo.svg
index ab5c3db3d8..f3764d0b94 100644
--- a/packages/icons/svg/vimeo.svg
+++ b/packages/icons/svg/vimeo.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.660 4.042 C 17.004 4.144,16.189 4.472,15.576 4.880 C 15.135 5.174,14.396 5.933,14.126 6.371 C 13.805 6.891,13.535 7.577,13.427 8.150 L 13.402 8.279 13.613 8.160 C 14.160 7.852,14.706 7.785,15.101 7.979 C 15.359 8.105,15.530 8.299,15.648 8.600 C 15.771 8.914,15.770 9.538,15.647 9.975 C 15.485 10.545,14.579 12.202,13.958 13.063 C 13.632 13.515,13.199 13.972,13.015 14.060 C 12.823 14.151,12.704 14.112,12.555 13.909 C 12.284 13.542,12.011 12.799,11.646 11.436 C 11.393 10.489,11.313 10.100,11.118 8.863 C 10.896 7.459,10.813 7.009,10.678 6.472 C 10.133 4.312,9.293 3.725,7.689 4.384 C 6.496 4.875,4.942 6.117,3.453 7.769 L 2.994 8.278 3.385 8.791 L 3.777 9.304 4.072 9.093 C 4.555 8.746,4.923 8.583,5.257 8.568 C 5.641 8.551,5.764 8.629,5.928 8.991 C 6.123 9.421,6.658 11.072,7.480 13.780 C 8.499 17.135,8.755 17.906,8.975 18.280 C 9.340 18.899,9.935 19.486,10.459 19.741 C 11.145 20.077,11.722 20.082,12.361 19.760 C 13.130 19.371,15.182 17.545,16.467 16.105 C 18.842 13.445,20.339 10.707,20.863 8.067 C 21.158 6.578,20.950 5.467,20.241 4.759 C 19.947 4.464,19.496 4.212,19.060 4.098 C 18.769 4.022,17.989 3.990,17.660 4.042 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.420 4.083 C 16.580 4.287,15.724 4.716,15.159 5.216 C 14.506 5.794,14.046 6.414,13.748 7.120 C 13.629 7.400,13.400 8.142,13.400 8.248 C 13.400 8.263,13.537 8.206,13.704 8.120 C 14.048 7.945,14.298 7.880,14.636 7.880 C 15.126 7.880,15.560 8.232,15.683 8.731 C 15.755 9.024,15.710 9.803,15.604 10.100 C 15.388 10.701,14.514 12.274,13.986 13.011 C 13.453 13.755,13.012 14.155,12.785 14.098 C 12.501 14.026,12.162 13.271,11.745 11.780 C 11.436 10.675,11.360 10.316,11.080 8.620 C 10.817 7.032,10.710 6.517,10.515 5.920 C 10.149 4.797,9.715 4.285,9.022 4.157 C 8.181 4.002,6.803 4.674,5.260 5.994 C 4.806 6.382,3.768 7.409,3.305 7.928 L 2.994 8.276 3.356 8.755 C 3.555 9.018,3.736 9.245,3.758 9.259 C 3.780 9.272,3.929 9.195,4.089 9.087 C 4.546 8.779,4.723 8.688,4.999 8.617 C 5.280 8.545,5.555 8.561,5.704 8.659 C 5.925 8.804,6.217 9.652,7.621 14.240 C 8.679 17.700,8.794 18.024,9.135 18.518 C 9.745 19.405,10.671 20.000,11.440 20.000 C 12.166 20.000,12.908 19.524,14.623 17.959 C 18.123 14.764,20.478 10.899,20.939 7.595 C 21.182 5.849,20.610 4.678,19.260 4.159 C 19.047 4.077,18.939 4.065,18.300 4.055 C 17.904 4.049,17.508 4.061,17.420 4.083 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/vk.svg b/packages/icons/svg/vk.svg
index 589b4a0b81..da95ebfb29 100644
--- a/packages/icons/svg/vk.svg
+++ b/packages/icons/svg/vk.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.400 3.024 C 8.757 3.048,7.979 3.125,7.591 3.203 C 5.945 3.533,4.437 4.722,3.639 6.320 C 3.328 6.941,3.167 7.546,3.073 8.440 C 2.998 9.150,2.998 14.850,3.073 15.560 C 3.173 16.513,3.336 17.093,3.701 17.795 C 4.250 18.851,5.149 19.750,6.205 20.299 C 6.907 20.664,7.487 20.827,8.440 20.927 C 9.150 21.002,14.850 21.002,15.560 20.927 C 16.513 20.827,17.093 20.664,17.795 20.299 C 18.851 19.750,19.750 18.851,20.299 17.795 C 20.664 17.093,20.827 16.513,20.927 15.560 C 21.002 14.850,21.002 9.150,20.927 8.440 C 20.805 7.275,20.541 6.504,19.978 5.660 C 19.175 4.458,17.902 3.552,16.573 3.236 C 15.840 3.062,15.331 3.036,12.460 3.023 C 10.964 3.017,9.587 3.017,9.400 3.024 M12.316 9.041 C 12.678 9.088,12.836 9.174,12.940 9.381 C 13.016 9.531,13.020 9.620,13.020 11.000 L 13.020 12.460 13.120 12.660 C 13.303 13.027,13.455 12.948,13.927 12.240 C 14.179 11.862,14.685 10.825,14.961 10.120 C 15.077 9.823,15.209 9.540,15.253 9.490 C 15.334 9.400,15.337 9.400,16.628 9.400 L 17.922 9.400 17.969 9.503 C 18.094 9.778,17.734 10.569,16.816 12.037 C 16.494 12.553,16.187 13.055,16.135 13.153 C 16.027 13.356,16.013 13.581,16.096 13.771 C 16.127 13.842,16.416 14.206,16.739 14.580 C 17.805 15.816,18.134 16.449,17.879 16.772 C 17.835 16.828,17.741 16.892,17.669 16.914 C 17.598 16.936,17.122 16.966,16.611 16.981 C 15.540 17.011,15.446 16.995,15.078 16.706 C 14.955 16.609,14.695 16.320,14.494 16.056 C 13.993 15.399,13.711 15.131,13.513 15.123 C 13.422 15.119,13.203 15.309,13.151 15.436 C 13.128 15.493,13.087 15.788,13.058 16.092 C 12.979 16.946,12.935 16.985,12.062 16.969 C 11.636 16.961,11.363 16.935,11.128 16.879 C 10.332 16.691,9.592 16.181,8.877 15.329 C 7.950 14.224,7.091 12.626,6.268 10.480 C 6.007 9.800,5.983 9.713,6.016 9.581 C 6.066 9.383,6.191 9.360,7.228 9.360 C 8.108 9.360,8.190 9.366,8.311 9.440 C 8.458 9.530,8.456 9.527,8.822 10.460 C 9.308 11.701,9.723 12.489,10.040 12.775 C 10.128 12.855,10.237 12.920,10.282 12.920 C 10.426 12.920,10.551 12.733,10.628 12.406 C 10.724 11.991,10.723 10.825,10.625 10.280 C 10.546 9.844,10.464 9.725,10.163 9.614 C 10.062 9.576,9.973 9.541,9.965 9.534 C 9.923 9.503,10.099 9.312,10.234 9.243 C 10.614 9.049,11.624 8.951,12.316 9.041 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.680 3.066 C 6.926 3.219,5.872 3.681,4.777 4.777 C 3.869 5.686,3.370 6.628,3.154 7.840 C 2.951 8.985,2.951 15.015,3.154 16.160 C 3.370 17.372,3.869 18.315,4.777 19.223 C 5.678 20.123,6.617 20.624,7.820 20.845 C 8.887 21.041,15.113 21.041,16.180 20.845 C 17.383 20.624,18.322 20.123,19.223 19.223 C 20.124 18.321,20.627 17.377,20.844 16.180 C 20.960 15.537,21.013 13.476,20.982 10.821 C 20.964 9.254,20.941 8.536,20.897 8.201 C 20.718 6.832,20.244 5.830,19.323 4.868 C 18.382 3.887,17.269 3.311,15.940 3.116 C 15.635 3.072,9.132 3.027,8.680 3.066 M12.234 9.039 C 12.610 9.082,12.777 9.161,12.910 9.358 C 12.999 9.491,13.000 9.504,13.001 10.956 C 13.002 12.291,13.008 12.434,13.075 12.580 C 13.184 12.817,13.296 12.904,13.419 12.848 C 13.669 12.734,14.348 11.579,14.799 10.500 C 14.891 10.280,15.035 9.954,15.119 9.776 C 15.254 9.487,15.285 9.449,15.400 9.426 C 15.472 9.412,16.068 9.400,16.726 9.400 L 17.922 9.400 17.964 9.510 C 18.074 9.794,17.713 10.577,16.749 12.140 C 16.410 12.690,16.110 13.209,16.082 13.294 C 16.052 13.385,16.042 13.515,16.057 13.610 C 16.085 13.786,16.144 13.869,16.724 14.560 C 17.773 15.808,18.081 16.370,17.904 16.712 C 17.868 16.781,17.802 16.857,17.757 16.881 C 17.646 16.941,16.477 17.012,15.960 16.990 C 15.700 16.979,15.483 16.948,15.390 16.908 C 15.178 16.818,14.850 16.497,14.413 15.953 C 14.014 15.455,13.724 15.173,13.575 15.135 C 13.462 15.107,13.263 15.240,13.180 15.400 C 13.148 15.463,13.093 15.763,13.058 16.067 C 13.017 16.417,12.969 16.664,12.925 16.740 C 12.803 16.950,12.731 16.966,11.960 16.946 C 11.176 16.926,10.947 16.875,10.400 16.600 C 8.943 15.867,7.517 13.744,6.240 10.404 C 5.926 9.583,5.934 9.458,6.303 9.397 C 6.594 9.349,8.035 9.354,8.212 9.403 C 8.409 9.457,8.452 9.532,8.807 10.420 C 9.335 11.744,9.674 12.398,10.005 12.729 C 10.218 12.942,10.306 12.963,10.432 12.829 C 10.652 12.595,10.752 11.804,10.682 10.859 C 10.618 9.986,10.521 9.751,10.172 9.620 C 9.934 9.531,9.945 9.542,9.996 9.447 C 10.165 9.131,11.276 8.929,12.234 9.039 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/volume-off.svg b/packages/icons/svg/volume-off.svg
index 928a9f83cb..12421a80e6 100644
--- a/packages/icons/svg/volume-off.svg
+++ b/packages/icons/svg/volume-off.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.050 3.976 C 9.600 4.353,8.575 5.339,6.860 7.044 L 5.500 8.396 4.200 8.439 C 2.712 8.488,2.049 8.539,1.864 8.616 C 1.664 8.699,1.457 8.902,1.359 9.110 C 1.276 9.287,1.267 9.380,1.237 10.460 C 1.219 11.098,1.203 12.322,1.202 13.180 L 1.200 14.740 1.379 14.968 C 1.477 15.093,1.658 15.271,1.780 15.363 C 2.000 15.529,2.005 15.531,2.451 15.563 C 2.698 15.581,3.485 15.596,4.200 15.598 L 5.501 15.600 6.160 16.264 C 7.163 17.273,9.532 19.572,9.918 19.911 C 10.353 20.293,10.531 20.376,10.859 20.350 C 11.239 20.320,11.575 20.108,11.861 19.719 L 12.009 19.518 11.990 12.049 C 11.976 6.676,11.958 4.541,11.926 4.442 C 11.872 4.275,11.556 3.943,11.352 3.837 C 11.207 3.762,10.789 3.682,10.531 3.681 C 10.429 3.680,10.330 3.741,10.050 3.976 M15.220 8.555 C 14.865 8.649,14.638 8.886,14.514 9.291 C 14.338 9.868,14.499 10.147,15.757 11.450 L 16.288 12.000 15.738 12.570 C 14.678 13.667,14.468 13.968,14.471 14.381 C 14.476 14.865,14.683 15.197,15.109 15.408 C 15.426 15.563,15.766 15.587,16.000 15.470 C 16.203 15.368,16.735 14.917,17.411 14.275 L 18.001 13.713 18.571 14.263 C 19.197 14.868,19.773 15.363,19.966 15.463 C 20.137 15.552,20.628 15.548,20.820 15.457 C 21.035 15.355,21.343 15.060,21.437 14.866 C 21.540 14.652,21.553 14.140,21.460 13.959 C 21.367 13.779,20.972 13.322,20.312 12.629 L 19.711 11.998 20.166 11.529 C 20.744 10.933,21.212 10.399,21.392 10.129 C 21.513 9.947,21.533 9.884,21.536 9.669 C 21.538 9.532,21.526 9.353,21.508 9.272 C 21.468 9.083,21.119 8.694,20.900 8.595 C 20.693 8.500,20.131 8.492,19.944 8.581 C 19.734 8.681,19.298 9.047,18.630 9.685 L 18.000 10.286 17.370 9.687 C 16.238 8.611,16.158 8.557,15.662 8.537 C 15.485 8.529,15.286 8.537,15.220 8.555 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.340 3.754 C 10.025 3.949,9.038 4.883,6.840 7.066 L 5.500 8.397 4.300 8.440 C 2.894 8.490,2.115 8.545,1.920 8.607 C 1.700 8.677,1.493 8.865,1.378 9.100 C 1.276 9.309,1.272 9.349,1.238 10.328 C 1.219 10.885,1.203 12.103,1.202 13.036 L 1.200 14.733 1.363 14.944 C 1.570 15.212,1.841 15.435,2.054 15.512 C 2.188 15.561,2.538 15.576,3.860 15.591 L 5.499 15.610 6.926 17.018 C 8.653 18.724,9.886 19.902,10.170 20.116 C 10.286 20.204,10.466 20.298,10.570 20.326 C 10.973 20.434,11.467 20.214,11.823 19.770 L 12.007 19.540 11.986 12.080 C 11.972 6.932,11.952 4.575,11.922 4.475 C 11.872 4.305,11.615 4.001,11.422 3.881 C 11.290 3.800,10.781 3.680,10.566 3.680 C 10.508 3.680,10.406 3.714,10.340 3.754 M15.262 8.562 C 14.968 8.612,14.765 8.775,14.604 9.090 C 14.497 9.299,14.467 9.408,14.465 9.589 C 14.460 10.000,14.672 10.310,15.685 11.370 L 16.286 12.001 15.700 12.610 C 14.686 13.664,14.480 13.964,14.480 14.381 C 14.480 14.741,14.550 14.913,14.799 15.164 C 14.961 15.327,15.080 15.407,15.240 15.461 C 15.515 15.554,15.817 15.556,16.000 15.467 C 16.186 15.377,16.732 14.913,17.430 14.253 L 18.001 13.713 18.550 14.242 C 19.213 14.879,19.813 15.390,19.989 15.465 C 20.160 15.538,20.607 15.535,20.788 15.459 C 21.004 15.369,21.265 15.139,21.386 14.933 C 21.511 14.720,21.560 14.263,21.483 14.029 C 21.427 13.860,21.037 13.397,20.273 12.590 L 19.713 12.001 20.275 11.410 C 20.923 10.729,21.371 10.199,21.465 10.003 C 21.553 9.820,21.547 9.329,21.456 9.152 C 21.337 8.922,20.988 8.617,20.786 8.566 C 20.549 8.506,20.177 8.510,19.996 8.575 C 19.746 8.664,19.230 9.097,18.353 9.953 L 18.007 10.292 17.331 9.653 C 16.590 8.952,16.283 8.694,16.100 8.619 C 15.935 8.552,15.501 8.523,15.262 8.562 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/volume-up.svg b/packages/icons/svg/volume-up.svg
index 3bebbe1f62..e9fe48a244 100644
--- a/packages/icons/svg/volume-up.svg
+++ b/packages/icons/svg/volume-up.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.076 3.294 C 17.863 3.372,17.578 3.590,17.451 3.772 C 17.356 3.910,17.338 3.980,17.326 4.264 C 17.308 4.695,17.370 4.831,17.947 5.620 C 19.392 7.599,19.927 8.716,20.188 10.300 C 20.246 10.657,20.260 10.973,20.260 11.980 C 20.260 13.363,20.232 13.651,20.018 14.471 C 19.701 15.686,19.128 16.784,18.063 18.220 C 17.362 19.164,17.302 19.285,17.327 19.714 C 17.347 20.067,17.473 20.321,17.728 20.522 C 17.969 20.713,18.176 20.773,18.524 20.753 C 18.752 20.740,18.823 20.716,19.020 20.585 C 19.791 20.073,20.977 18.446,21.652 16.974 C 22.197 15.785,22.500 14.765,22.666 13.560 C 22.762 12.865,22.762 11.149,22.666 10.420 C 22.361 8.105,21.192 5.601,19.682 4.027 C 19.276 3.605,19.052 3.429,18.810 3.344 C 18.566 3.258,18.237 3.236,18.076 3.294 M10.050 3.976 C 9.600 4.353,8.575 5.339,6.860 7.044 L 5.500 8.396 4.200 8.439 C 2.712 8.488,2.049 8.539,1.864 8.616 C 1.664 8.699,1.457 8.902,1.359 9.110 C 1.276 9.287,1.267 9.380,1.237 10.460 C 1.219 11.098,1.203 12.322,1.202 13.180 L 1.200 14.740 1.379 14.968 C 1.477 15.093,1.658 15.271,1.780 15.363 C 2.000 15.529,2.005 15.531,2.451 15.563 C 2.698 15.581,3.485 15.596,4.200 15.598 L 5.501 15.600 6.160 16.264 C 7.163 17.273,9.532 19.572,9.918 19.911 C 10.353 20.293,10.531 20.376,10.859 20.350 C 11.239 20.320,11.575 20.108,11.861 19.719 L 12.009 19.518 11.990 12.049 C 11.976 6.676,11.958 4.541,11.926 4.442 C 11.872 4.275,11.556 3.943,11.352 3.837 C 11.207 3.762,10.789 3.682,10.531 3.681 C 10.429 3.680,10.330 3.741,10.050 3.976 M14.689 6.679 C 14.205 6.794,13.879 7.314,13.932 7.890 C 13.955 8.145,13.983 8.198,14.696 9.320 C 15.035 9.854,15.303 10.393,15.380 10.700 C 15.466 11.040,15.496 11.957,15.445 12.668 C 15.382 13.530,15.348 13.613,14.497 14.982 C 13.957 15.849,13.913 15.947,13.914 16.267 C 13.914 16.586,14.018 16.822,14.268 17.071 C 14.507 17.310,14.724 17.381,15.118 17.348 C 15.485 17.318,15.638 17.231,16.032 16.833 C 16.844 16.012,17.430 14.908,17.781 13.540 C 17.911 13.032,17.918 12.964,17.944 12.054 L 17.971 11.100 17.842 10.624 C 17.548 9.537,17.197 8.722,16.702 7.980 C 16.207 7.238,15.770 6.824,15.380 6.727 C 15.132 6.666,14.833 6.645,14.689 6.679 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.965 3.346 C 17.891 3.384,17.734 3.503,17.616 3.611 C 17.365 3.840,17.304 4.005,17.327 4.399 C 17.347 4.735,17.434 4.912,17.898 5.553 C 19.389 7.614,19.926 8.728,20.178 10.281 C 20.252 10.735,20.266 13.083,20.198 13.587 C 20.011 14.971,19.389 16.366,18.262 17.932 C 17.330 19.228,17.293 19.301,17.334 19.752 C 17.392 20.379,17.902 20.805,18.531 20.752 C 18.863 20.724,19.026 20.619,19.541 20.102 C 21.013 18.625,22.211 16.226,22.603 13.972 C 22.781 12.946,22.780 10.996,22.600 10.000 C 22.185 7.698,21.034 5.393,19.562 3.915 C 19.076 3.428,18.864 3.312,18.420 3.292 C 18.174 3.280,18.069 3.293,17.965 3.346 M10.340 3.754 C 10.025 3.949,9.038 4.883,6.840 7.066 L 5.500 8.397 4.300 8.440 C 2.894 8.490,2.115 8.545,1.920 8.607 C 1.700 8.677,1.493 8.865,1.378 9.100 C 1.276 9.309,1.272 9.349,1.238 10.328 C 1.219 10.885,1.203 12.103,1.202 13.036 L 1.200 14.733 1.363 14.944 C 1.570 15.212,1.841 15.435,2.054 15.512 C 2.188 15.561,2.538 15.576,3.860 15.591 L 5.499 15.610 6.926 17.018 C 8.653 18.724,9.886 19.902,10.170 20.116 C 10.286 20.204,10.466 20.298,10.570 20.326 C 10.973 20.434,11.467 20.214,11.823 19.770 L 12.007 19.540 11.986 12.080 C 11.972 6.932,11.952 4.575,11.922 4.475 C 11.872 4.305,11.615 4.001,11.422 3.881 C 11.290 3.800,10.781 3.680,10.566 3.680 C 10.508 3.680,10.406 3.714,10.340 3.754 M14.430 6.798 C 14.122 6.993,13.920 7.389,13.920 7.796 C 13.920 8.031,14.051 8.309,14.480 8.980 C 14.858 9.573,15.242 10.287,15.338 10.577 C 15.496 11.052,15.501 12.802,15.345 13.380 C 15.269 13.664,15.056 14.069,14.570 14.856 C 13.977 15.817,13.907 15.975,13.927 16.311 C 13.947 16.626,14.030 16.819,14.242 17.038 C 14.483 17.286,14.613 17.339,14.980 17.339 C 15.457 17.339,15.560 17.288,16.022 16.824 C 16.710 16.134,17.218 15.274,17.581 14.187 C 17.876 13.305,17.915 13.067,17.943 12.000 L 17.968 11.060 17.803 10.487 C 17.511 9.470,17.166 8.685,16.710 8.000 C 16.224 7.271,15.794 6.861,15.389 6.740 C 15.277 6.707,15.057 6.680,14.901 6.680 C 14.654 6.680,14.591 6.696,14.430 6.798 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/vonage.svg b/packages/icons/svg/vonage.svg
new file mode 100644
index 0000000000..3614b620b1
--- /dev/null
+++ b/packages/icons/svg/vonage.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.120 5.310 C 14.992 10.173,12.707 15.253,11.941 16.825 C 10.964 18.830,10.241 19.634,9.160 19.919 L 8.860 19.998 10.760 19.988 C 12.625 19.978,12.665 19.976,12.940 19.885 C 13.942 19.555,14.770 18.717,15.419 17.380 C 15.989 16.205,20.157 6.821,21.233 4.290 L 21.356 4.000 19.525 4.000 L 17.693 4.000 17.120 5.310 M3.100 4.250 C 3.153 4.365,4.313 6.998,5.680 10.100 C 7.046 13.202,8.190 15.766,8.222 15.799 C 8.273 15.850,8.287 15.850,8.341 15.796 C 8.407 15.730,10.032 11.925,10.065 11.760 C 10.079 11.687,9.620 10.632,8.367 7.860 L 6.651 4.060 4.827 4.050 L 3.004 4.039 3.100 4.250 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/vs_code.svg b/packages/icons/svg/vs_code.svg
index f65ac2a8a5..7102b28932 100644
--- a/packages/icons/svg/vs_code.svg
+++ b/packages/icons/svg/vs_code.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.920 3.051 C 15.843 3.080,15.749 3.122,15.711 3.143 C 15.673 3.164,14.003 4.684,11.999 6.521 C 9.996 8.357,8.340 9.866,8.320 9.873 C 8.299 9.880,7.527 9.313,6.602 8.613 C 5.678 7.913,4.867 7.324,4.801 7.304 C 4.557 7.232,4.459 7.303,3.750 8.061 C 3.027 8.836,2.953 8.955,3.035 9.206 C 3.070 9.310,3.429 9.661,4.543 10.681 L 6.007 12.020 5.869 12.140 C 5.794 12.206,5.136 12.807,4.408 13.475 C 3.014 14.753,2.962 14.814,3.021 15.086 C 3.059 15.258,4.321 16.628,4.516 16.709 C 4.626 16.755,4.687 16.758,4.798 16.724 C 4.877 16.700,5.674 16.124,6.600 15.421 C 7.513 14.728,8.283 14.166,8.311 14.171 C 8.339 14.176,10.001 15.683,12.004 17.520 C 14.008 19.357,15.713 20.891,15.794 20.929 C 15.977 21.015,16.204 21.018,16.475 20.938 C 16.590 20.904,17.543 20.470,18.592 19.975 C 20.599 19.027,20.708 18.963,20.893 18.620 L 20.980 18.460 20.990 12.102 C 21.002 4.917,21.028 5.501,20.684 5.165 C 20.530 5.014,20.178 4.828,18.500 4.009 C 16.347 2.958,16.257 2.924,15.920 3.051 M16.470 14.032 L 16.460 16.071 13.809 14.065 C 12.351 12.962,11.157 12.042,11.155 12.020 C 11.152 11.998,12.345 11.076,13.805 9.971 L 16.460 7.963 16.470 9.978 C 16.476 11.087,16.476 12.911,16.470 14.032 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.857 3.076 C 15.703 3.146,14.662 4.077,11.760 6.740 C 11.111 7.335,10.071 8.286,9.449 8.854 L 8.317 9.885 8.109 9.733 C 7.994 9.650,7.405 9.212,6.800 8.760 C 4.599 7.114,4.707 7.174,4.400 7.415 C 4.301 7.492,4.039 7.750,3.818 7.988 C 3.039 8.824,2.934 8.996,3.057 9.234 C 3.121 9.358,3.766 9.975,5.172 11.257 L 6.003 12.015 5.912 12.102 C 5.861 12.150,5.280 12.683,4.620 13.287 C 2.990 14.778,2.912 14.871,3.055 15.136 C 3.224 15.450,4.411 16.694,4.583 16.737 C 4.652 16.754,4.745 16.736,4.854 16.682 C 4.945 16.638,5.686 16.104,6.500 15.496 C 7.314 14.888,8.055 14.339,8.146 14.276 L 8.312 14.162 8.986 14.770 C 9.357 15.104,10.488 16.135,11.500 17.061 C 13.508 18.897,15.404 20.612,15.666 20.826 C 15.880 21.002,16.143 21.041,16.446 20.942 C 17.019 20.754,20.406 19.125,20.651 18.919 C 20.735 18.849,20.847 18.704,20.901 18.597 L 21.000 18.403 20.999 12.391 C 20.999 6.588,20.982 5.619,20.877 5.388 C 20.781 5.179,20.441 4.980,18.740 4.139 C 16.384 2.974,16.217 2.912,15.857 3.076 M16.470 12.000 C 16.470 13.573,16.458 15.126,16.445 15.452 L 16.420 16.043 14.720 14.756 C 12.583 13.138,11.205 12.080,11.178 12.037 C 11.154 11.998,11.875 11.435,14.480 9.462 L 16.420 7.992 16.445 8.566 C 16.459 8.882,16.470 10.427,16.470 12.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/vue.svg b/packages/icons/svg/vue.svg
index d9233f4e1b..10a6aa1ec6 100644
--- a/packages/icons/svg/vue.svg
+++ b/packages/icons/svg/vue.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.642 11.947 C 10.192 16.318,12.294 19.910,12.313 19.929 C 12.333 19.949,14.362 16.512,16.994 11.999 C 19.549 7.618,21.640 4.026,21.640 4.017 C 21.640 4.007,20.070 4.004,18.151 4.010 L 14.663 4.020 13.536 5.993 C 12.916 7.077,12.397 7.968,12.381 7.973 C 12.366 7.977,11.826 7.089,11.180 6.000 L 10.005 4.020 6.506 4.010 L 3.006 4.000 7.642 11.947 M9.196 10.281 C 10.899 13.186,12.305 15.571,12.322 15.581 C 12.339 15.592,13.748 13.219,15.453 10.310 L 18.555 5.020 19.242 5.009 L 19.929 4.998 19.853 5.129 C 19.810 5.201,18.105 8.128,16.062 11.633 C 13.105 16.706,12.338 17.994,12.300 17.953 C 12.245 17.892,4.760 5.057,4.760 5.023 C 4.760 5.010,5.062 5.000,5.430 5.000 L 6.100 5.000 9.196 10.281 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.195 4.330 C 3.302 4.511,5.117 7.621,7.229 11.240 C 12.182 19.727,12.293 19.916,12.329 19.894 C 12.407 19.846,15.441 14.679,20.957 5.200 L 21.643 4.020 19.912 4.007 C 18.959 4.000,17.385 4.007,16.413 4.022 L 14.647 4.049 13.796 5.535 C 12.389 7.992,12.395 7.982,12.330 7.895 C 12.284 7.834,10.584 4.998,10.148 4.256 L 10.029 4.053 8.708 4.026 C 7.981 4.012,6.400 4.000,5.194 4.000 L 3.001 4.000 3.195 4.330 M7.558 7.491 C 8.728 9.487,11.501 14.205,12.165 15.329 C 12.239 15.455,12.311 15.559,12.324 15.559 C 12.364 15.560,13.892 12.980,17.482 6.853 L 18.540 5.046 18.860 5.020 C 19.036 5.006,19.345 5.000,19.548 5.007 L 19.915 5.020 16.848 10.280 C 13.767 15.562,12.878 17.073,12.508 17.653 L 12.309 17.966 11.969 17.393 C 11.555 16.693,5.632 6.539,5.147 5.697 C 4.956 5.365,4.800 5.073,4.800 5.047 C 4.800 5.013,4.980 5.000,5.450 5.001 L 6.100 5.001 7.558 7.491 " stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/whatsapp.svg b/packages/icons/svg/whatsapp.svg
index ce2cd10da9..c083ae43f2 100644
--- a/packages/icons/svg/whatsapp.svg
+++ b/packages/icons/svg/whatsapp.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.140 3.042 C 7.861 3.379,4.988 5.489,3.719 8.493 C 2.690 10.931,2.775 13.592,3.958 15.970 L 4.232 16.520 3.618 18.749 C 3.281 19.975,3.008 20.982,3.013 20.987 C 3.018 20.991,4.081 20.718,5.375 20.379 L 7.728 19.763 7.916 19.858 C 8.538 20.173,9.711 20.578,10.400 20.714 C 11.158 20.865,11.499 20.892,12.300 20.867 C 13.648 20.824,14.732 20.554,15.940 19.962 C 16.908 19.487,17.654 18.943,18.443 18.134 C 20.622 15.903,21.489 12.724,20.722 9.778 C 20.479 8.842,20.057 7.898,19.525 7.097 C 18.061 4.892,15.881 3.488,13.320 3.101 C 12.807 3.024,11.629 2.992,11.140 3.042 M12.620 4.722 C 13.919 4.835,15.115 5.255,16.206 5.984 C 17.095 6.578,17.663 7.140,18.223 7.981 C 18.734 8.748,19.062 9.542,19.269 10.514 C 19.369 10.986,19.377 11.088,19.378 12.040 C 19.380 12.952,19.370 13.106,19.289 13.491 C 18.781 15.895,17.168 17.863,14.912 18.831 C 13.837 19.292,12.642 19.491,11.485 19.403 C 10.365 19.317,9.499 19.083,8.560 18.611 C 8.241 18.451,7.958 18.320,7.930 18.320 C 7.903 18.320,7.274 18.490,6.532 18.698 C 5.790 18.907,5.176 19.070,5.167 19.061 C 5.158 19.052,5.325 18.448,5.537 17.719 L 5.924 16.394 5.717 16.071 C 4.891 14.785,4.517 13.285,4.607 11.632 C 4.785 8.373,7.303 5.498,10.556 4.840 C 11.286 4.693,11.882 4.659,12.620 4.722 M8.580 8.154 C 8.384 8.273,8.066 8.650,7.911 8.945 C 7.548 9.637,7.518 10.449,7.823 11.267 C 8.145 12.129,8.914 13.226,9.880 14.203 C 10.930 15.265,11.740 15.768,13.167 16.246 C 13.429 16.333,13.764 16.431,13.912 16.462 C 14.271 16.538,14.961 16.536,15.262 16.458 C 15.745 16.333,16.329 15.892,16.481 15.538 C 16.648 15.149,16.735 14.599,16.647 14.498 C 16.628 14.477,16.592 14.384,16.566 14.291 C 16.539 14.199,16.469 14.075,16.409 14.018 C 16.270 13.884,15.055 13.309,14.589 13.156 C 14.197 13.028,14.124 13.038,14.025 13.231 C 13.977 13.323,13.591 13.827,13.321 14.150 C 13.200 14.295,12.942 14.273,12.536 14.083 C 11.455 13.576,10.410 12.603,9.926 11.652 C 9.779 11.364,9.804 11.269,10.112 10.946 C 10.261 10.789,10.433 10.585,10.494 10.494 C 10.598 10.339,10.602 10.317,10.559 10.154 C 10.420 9.632,9.879 8.355,9.727 8.190 C 9.627 8.082,9.616 8.080,9.163 8.080 C 8.785 8.080,8.678 8.094,8.580 8.154 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.600 3.116 C 9.083 3.381,7.777 3.947,6.546 4.875 C 5.124 5.945,4.060 7.429,3.485 9.140 C 2.722 11.408,2.867 13.648,3.922 15.886 C 4.082 16.224,4.210 16.527,4.208 16.560 C 4.207 16.593,3.952 17.538,3.643 18.660 C 3.334 19.782,3.070 20.761,3.055 20.836 L 3.028 20.971 3.170 20.945 C 3.248 20.930,4.304 20.659,5.517 20.342 L 7.723 19.766 8.063 19.926 C 9.211 20.464,10.570 20.823,11.627 20.869 C 14.318 20.984,16.922 19.868,18.724 17.825 C 21.124 15.107,21.668 11.395,20.135 8.200 C 19.823 7.550,19.612 7.202,19.178 6.620 C 17.960 4.988,16.168 3.776,14.270 3.302 C 13.440 3.094,13.234 3.071,12.100 3.057 C 11.189 3.045,10.954 3.054,10.600 3.116 M12.458 4.721 C 13.486 4.795,14.350 5.020,15.234 5.443 C 16.789 6.187,17.913 7.267,18.638 8.715 C 18.904 9.245,19.054 9.655,19.213 10.280 L 19.340 10.780 19.340 12.060 C 19.340 13.339,19.340 13.340,19.227 13.760 C 18.717 15.652,17.665 17.140,16.099 18.183 C 14.322 19.367,12.131 19.717,10.009 19.157 C 9.480 19.018,9.126 18.882,8.436 18.553 L 7.932 18.313 6.603 18.679 C 5.873 18.880,5.250 19.039,5.220 19.032 C 5.178 19.023,5.255 18.708,5.543 17.707 L 5.921 16.394 5.693 16.027 C 4.398 13.938,4.238 11.268,5.274 9.028 C 6.258 6.901,8.328 5.273,10.603 4.838 C 10.854 4.789,11.231 4.737,11.440 4.721 C 11.649 4.705,11.838 4.689,11.860 4.686 C 11.882 4.683,12.151 4.699,12.458 4.721 M8.695 8.108 C 8.454 8.155,7.983 8.736,7.798 9.212 C 7.410 10.213,7.650 11.293,8.550 12.600 C 9.281 13.661,10.339 14.746,11.216 15.333 C 11.788 15.716,12.615 16.084,13.520 16.358 C 14.020 16.509,14.658 16.560,15.097 16.483 C 15.494 16.414,15.888 16.201,16.202 15.885 C 16.431 15.654,16.476 15.582,16.555 15.330 C 16.697 14.875,16.708 14.646,16.599 14.372 C 16.549 14.244,16.471 14.100,16.428 14.051 C 16.291 13.899,15.232 13.385,14.623 13.175 C 14.184 13.024,14.161 13.031,13.907 13.390 C 13.787 13.560,13.585 13.824,13.459 13.975 L 13.230 14.250 13.008 14.227 C 12.852 14.211,12.664 14.143,12.378 13.999 C 11.568 13.592,10.673 12.801,10.170 12.048 C 9.909 11.658,9.820 11.447,9.855 11.305 C 9.868 11.254,10.013 11.062,10.178 10.877 C 10.603 10.399,10.620 10.355,10.515 10.014 C 10.316 9.367,9.861 8.337,9.705 8.181 C 9.609 8.085,9.583 8.080,9.192 8.085 C 8.965 8.088,8.742 8.098,8.695 8.108 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/wifi.svg b/packages/icons/svg/wifi.svg
index ceb521d0a3..e94f7cf34e 100644
--- a/packages/icons/svg/wifi.svg
+++ b/packages/icons/svg/wifi.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.060 3.801 C 9.370 3.837,8.279 4.071,7.240 4.408 C 5.441 4.990,3.717 5.916,2.200 7.115 C 1.707 7.505,0.840 8.375,0.741 8.580 C 0.522 9.032,0.809 9.794,1.294 10.050 C 1.532 10.175,1.989 10.175,2.244 10.049 C 2.346 9.999,2.778 9.694,3.204 9.371 C 4.689 8.247,5.136 7.953,6.065 7.487 C 7.423 6.808,8.635 6.421,10.040 6.217 C 10.746 6.114,13.324 6.112,13.960 6.213 C 16.037 6.543,17.453 7.087,19.180 8.217 C 19.422 8.376,20.034 8.818,20.540 9.199 C 21.046 9.581,21.573 9.946,21.710 10.010 C 22.054 10.172,22.375 10.198,22.610 10.085 C 23.050 9.872,23.286 9.531,23.313 9.068 C 23.338 8.646,23.203 8.410,22.609 7.836 C 20.641 5.933,17.580 4.388,14.849 3.918 C 14.591 3.873,14.056 3.820,13.660 3.800 C 12.861 3.758,10.865 3.759,10.060 3.801 M10.560 8.563 C 9.173 8.646,6.923 9.572,5.480 10.654 C 4.982 11.028,4.282 11.728,4.165 11.970 C 3.978 12.357,4.078 12.881,4.400 13.203 C 4.666 13.470,4.810 13.537,5.120 13.539 C 5.472 13.540,5.790 13.383,6.640 12.787 C 7.877 11.919,8.738 11.458,9.602 11.201 C 10.256 11.007,10.625 10.956,11.560 10.931 C 14.025 10.867,15.065 11.204,17.401 12.826 C 18.303 13.452,18.388 13.495,18.747 13.514 C 19.147 13.534,19.382 13.450,19.613 13.203 C 19.895 12.902,20.010 12.334,19.863 11.980 C 19.781 11.785,19.177 11.172,18.724 10.825 C 17.344 9.767,15.722 8.993,14.271 8.701 C 13.526 8.551,11.822 8.487,10.560 8.563 M11.078 13.324 C 10.517 13.397,9.597 13.730,9.011 14.073 C 8.581 14.325,8.116 14.688,7.844 14.985 C 7.319 15.558,7.313 16.126,7.825 16.603 C 8.090 16.850,8.319 16.934,8.671 16.914 C 8.990 16.896,9.104 16.844,9.892 16.354 C 10.861 15.752,11.083 15.694,12.256 15.730 L 12.932 15.751 13.336 15.954 C 13.558 16.065,13.974 16.294,14.260 16.464 C 14.950 16.872,15.162 16.967,15.385 16.967 C 15.794 16.967,16.418 16.500,16.521 16.117 C 16.578 15.906,16.544 15.607,16.437 15.363 C 16.268 14.982,15.428 14.295,14.660 13.910 C 13.888 13.523,13.349 13.388,12.301 13.321 C 11.586 13.275,11.453 13.275,11.078 13.324 M11.376 18.243 C 11.038 18.509,10.841 18.842,10.840 19.146 C 10.840 19.370,10.991 19.775,11.140 19.949 C 11.442 20.302,12.023 20.437,12.442 20.252 C 12.671 20.151,12.991 19.831,13.092 19.603 C 13.257 19.230,13.087 18.622,12.738 18.336 C 12.525 18.162,12.371 18.122,11.896 18.121 C 11.549 18.120,11.524 18.126,11.376 18.243 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.320 3.798 C 9.588 3.834,9.171 3.897,8.340 4.101 C 6.206 4.622,4.058 5.670,2.280 7.058 C 1.925 7.335,1.093 8.134,0.846 8.434 C 0.722 8.586,0.701 8.643,0.687 8.864 C 0.668 9.166,0.748 9.451,0.926 9.709 C 1.245 10.173,1.843 10.280,2.361 9.965 C 2.492 9.885,2.973 9.541,3.430 9.200 C 4.637 8.299,5.282 7.884,6.099 7.481 C 7.284 6.897,8.174 6.583,9.278 6.358 C 10.169 6.177,10.628 6.149,12.376 6.171 C 13.925 6.191,13.946 6.192,14.520 6.312 C 16.029 6.626,16.904 6.932,18.040 7.543 C 18.830 7.967,19.246 8.243,20.520 9.186 C 21.581 9.971,21.926 10.160,22.300 10.160 C 22.503 10.160,22.915 9.928,23.068 9.727 C 23.339 9.372,23.389 8.853,23.185 8.505 C 22.909 8.035,21.786 7.045,20.720 6.333 C 18.766 5.029,16.277 4.065,14.329 3.859 C 13.671 3.790,11.261 3.753,10.320 3.798 M10.740 8.560 C 10.092 8.598,9.590 8.699,8.860 8.939 C 7.651 9.336,6.388 9.979,5.489 10.657 C 4.955 11.060,4.194 11.847,4.129 12.065 C 4.028 12.402,4.080 12.749,4.275 13.039 C 4.442 13.287,4.690 13.468,4.933 13.518 C 5.327 13.600,5.689 13.446,6.620 12.803 C 8.113 11.771,9.114 11.278,10.160 11.059 C 10.880 10.909,12.659 10.888,13.522 11.019 C 14.709 11.200,15.473 11.549,17.214 12.708 C 17.802 13.099,18.335 13.425,18.450 13.463 C 18.710 13.550,19.117 13.524,19.345 13.408 C 19.744 13.204,19.981 12.669,19.904 12.150 C 19.870 11.924,19.585 11.570,19.091 11.138 C 17.787 9.996,15.803 8.999,14.249 8.704 C 13.559 8.573,11.773 8.500,10.740 8.560 M11.220 13.307 C 9.834 13.480,8.023 14.501,7.577 15.361 C 7.417 15.669,7.414 16.022,7.569 16.286 C 7.820 16.712,8.243 16.947,8.696 16.910 C 8.975 16.888,9.128 16.818,9.826 16.396 C 10.879 15.758,11.137 15.689,12.299 15.736 L 12.979 15.764 13.399 15.988 C 13.631 16.111,14.054 16.348,14.340 16.513 C 14.986 16.888,15.201 16.973,15.444 16.950 C 15.980 16.900,16.560 16.337,16.560 15.869 C 16.560 15.673,16.409 15.284,16.264 15.107 C 15.814 14.558,14.647 13.818,13.840 13.569 C 13.233 13.382,11.781 13.237,11.220 13.307 M11.460 18.191 C 11.258 18.321,10.977 18.652,10.901 18.851 C 10.815 19.078,10.835 19.346,10.959 19.628 C 11.090 19.924,11.220 20.064,11.486 20.197 C 11.799 20.353,12.193 20.369,12.466 20.237 C 12.827 20.062,13.160 19.590,13.160 19.253 C 13.160 18.896,12.904 18.424,12.621 18.259 C 12.459 18.164,12.383 18.148,12.008 18.132 C 11.635 18.117,11.565 18.124,11.460 18.191 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/wordpress.svg b/packages/icons/svg/wordpress.svg
index 6f9a74f644..22b571d0a9 100644
--- a/packages/icons/svg/wordpress.svg
+++ b/packages/icons/svg/wordpress.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.026 3.160,9.091 3.415,8.060 3.918 C 5.287 5.272,3.420 7.913,3.059 10.992 C 2.666 14.352,4.239 17.669,7.120 19.560 C 7.929 20.090,9.126 20.589,10.092 20.797 C 14.142 21.669,18.255 19.669,20.083 15.940 C 21.302 13.453,21.302 10.547,20.083 8.060 C 19.190 6.237,17.762 4.810,15.944 3.923 C 15.066 3.494,14.269 3.244,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 M13.120 5.095 C 15.602 5.511,17.633 7.165,18.537 9.508 C 18.846 10.308,18.976 11.045,18.976 12.000 C 18.976 12.950,18.846 13.693,18.542 14.481 C 17.253 17.818,13.728 19.654,10.282 18.783 C 7.551 18.092,5.528 15.853,5.075 13.020 C 5.009 12.607,5.009 11.393,5.075 10.980 C 5.482 8.431,7.134 6.379,9.519 5.458 C 10.069 5.246,10.623 5.120,11.440 5.024 C 11.704 4.992,12.780 5.038,13.120 5.095 M11.400 5.958 C 10.061 6.101,8.799 6.681,7.828 7.601 C 7.473 7.937,6.960 8.552,6.960 8.642 C 6.960 8.693,7.486 8.690,8.348 8.635 L 9.055 8.590 9.128 8.679 C 9.167 8.729,9.200 8.809,9.200 8.858 C 9.200 9.017,9.077 9.080,8.675 9.125 C 8.469 9.148,8.296 9.171,8.291 9.175 C 8.287 9.180,8.738 10.533,9.295 12.182 C 9.852 13.831,10.349 15.306,10.400 15.460 L 10.493 15.740 11.147 13.780 C 11.506 12.702,11.800 11.791,11.800 11.755 C 11.800 11.704,11.056 9.617,10.901 9.233 C 10.881 9.183,10.803 9.159,10.607 9.140 C 10.195 9.101,10.122 9.080,10.057 8.981 C 9.983 8.868,10.017 8.695,10.126 8.637 C 10.178 8.609,10.465 8.611,11.040 8.645 C 11.703 8.683,12.059 8.683,12.748 8.643 L 13.618 8.593 13.689 8.681 C 13.728 8.729,13.760 8.809,13.760 8.858 C 13.760 9.019,13.636 9.081,13.238 9.122 C 13.033 9.144,12.861 9.166,12.855 9.172 C 12.849 9.178,13.333 10.635,13.931 12.411 C 14.528 14.186,15.028 15.626,15.042 15.609 C 15.081 15.563,15.990 12.485,16.041 12.225 C 16.181 11.518,16.038 10.788,15.616 10.060 C 15.230 9.392,15.121 9.171,15.057 8.922 C 14.887 8.258,15.236 7.666,15.871 7.539 L 16.091 7.496 15.835 7.294 C 14.742 6.433,13.550 5.989,12.208 5.943 C 11.929 5.933,11.565 5.940,11.400 5.958 M17.336 9.710 C 17.332 10.373,17.257 10.869,17.081 11.398 C 17.019 11.586,16.543 12.962,16.024 14.456 C 15.505 15.949,15.080 17.188,15.080 17.208 C 15.080 17.228,15.247 17.131,15.450 16.993 C 15.934 16.663,16.671 15.927,16.992 15.452 C 18.086 13.837,18.363 11.887,17.757 10.077 C 17.645 9.744,17.381 9.120,17.352 9.120 C 17.346 9.120,17.338 9.386,17.336 9.710 M6.397 9.664 C 5.606 11.673,5.820 13.698,7.012 15.458 C 7.474 16.141,8.422 16.989,9.116 17.338 C 9.306 17.434,9.329 17.438,9.311 17.374 C 9.281 17.260,6.475 9.582,6.458 9.564 C 6.449 9.556,6.422 9.601,6.397 9.664 M11.193 15.190 C 10.355 17.628,10.295 17.822,10.366 17.849 C 10.408 17.865,10.624 17.915,10.846 17.959 C 11.715 18.133,12.621 18.105,13.518 17.875 C 13.770 17.810,13.983 17.751,13.991 17.743 C 14.005 17.728,12.185 12.718,12.128 12.616 C 12.109 12.581,11.757 13.551,11.193 15.190 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.078 3.060 C 9.848 3.209,8.988 3.464,7.940 3.990 C 7.026 4.450,6.304 4.981,5.557 5.746 C 3.305 8.050,2.464 11.369,3.348 14.460 C 4.062 16.957,5.924 19.127,8.246 20.166 C 9.610 20.777,10.903 21.039,12.300 20.988 C 16.060 20.851,19.315 18.422,20.516 14.858 C 21.158 12.953,21.159 11.050,20.521 9.160 C 20.065 7.807,19.417 6.743,18.443 5.746 C 17.703 4.988,17.012 4.478,16.080 4.002 C 14.842 3.370,13.865 3.114,12.395 3.040 C 11.507 2.995,11.624 2.994,11.078 3.060 M12.928 5.083 C 13.402 5.135,14.099 5.316,14.617 5.523 C 16.924 6.442,18.641 8.657,18.922 11.079 C 18.993 11.688,18.950 12.945,18.842 13.450 C 18.288 16.036,16.293 18.116,13.740 18.771 C 13.042 18.950,12.783 18.980,11.960 18.977 C 11.277 18.974,11.117 18.960,10.674 18.867 C 10.022 18.731,9.531 18.567,8.969 18.299 C 7.042 17.380,5.671 15.638,5.154 13.449 C 5.036 12.950,5.002 11.432,5.098 10.880 C 5.455 8.804,6.655 7.054,8.458 5.978 C 9.786 5.186,11.228 4.897,12.928 5.083 M10.961 6.021 C 10.005 6.203,9.122 6.590,8.335 7.173 C 7.831 7.547,6.918 8.539,6.982 8.644 C 7.013 8.693,7.601 8.689,8.397 8.635 C 9.055 8.591,9.056 8.591,9.128 8.680 C 9.229 8.804,9.219 8.946,9.105 9.021 C 9.052 9.055,8.847 9.103,8.648 9.128 L 8.286 9.172 9.381 12.431 C 9.984 14.223,10.483 15.696,10.491 15.704 C 10.498 15.712,10.799 14.828,11.158 13.740 L 11.812 11.762 11.661 11.331 C 11.254 10.170,10.912 9.256,10.868 9.216 C 10.842 9.191,10.669 9.151,10.484 9.126 C 10.300 9.101,10.124 9.060,10.094 9.035 C 10.033 8.985,10.022 8.770,10.076 8.684 C 10.106 8.638,10.280 8.633,11.126 8.658 C 11.785 8.676,12.398 8.670,12.877 8.639 L 13.614 8.592 13.686 8.686 C 13.785 8.814,13.778 8.946,13.670 9.017 C 13.620 9.049,13.422 9.097,13.230 9.124 C 13.016 9.153,12.880 9.190,12.880 9.219 C 12.880 9.275,14.356 13.688,14.743 14.790 C 14.892 15.213,15.026 15.560,15.041 15.560 C 15.064 15.560,15.376 14.543,15.948 12.600 C 16.047 12.265,16.060 12.156,16.059 11.680 C 16.058 11.175,16.050 11.115,15.927 10.760 C 15.855 10.551,15.700 10.209,15.582 10.000 C 15.465 9.791,15.304 9.489,15.224 9.330 C 14.805 8.492,15.091 7.721,15.887 7.542 L 16.095 7.495 15.778 7.255 C 14.966 6.641,14.236 6.294,13.300 6.077 C 12.825 5.966,11.423 5.933,10.961 6.021 M17.348 9.214 C 17.333 9.254,17.320 9.500,17.320 9.760 C 17.320 10.325,17.268 10.735,17.140 11.177 C 17.088 11.356,16.718 12.447,16.318 13.602 C 15.329 16.456,15.081 17.200,15.117 17.200 C 15.219 17.200,15.818 16.710,16.285 16.244 C 16.888 15.643,17.124 15.317,17.460 14.620 C 17.699 14.125,17.838 13.712,17.966 13.111 C 18.092 12.518,18.093 11.520,17.967 10.891 C 17.827 10.187,17.409 9.055,17.348 9.214 M6.380 9.706 C 6.269 9.970,6.085 10.629,6.014 11.013 C 5.920 11.521,5.920 12.532,6.013 13.040 C 6.259 14.377,6.953 15.615,7.950 16.494 C 8.491 16.971,9.170 17.432,9.277 17.393 C 9.298 17.386,9.125 16.858,8.894 16.220 C 8.170 14.218,6.472 9.581,6.458 9.566 C 6.451 9.558,6.416 9.621,6.380 9.706 M12.068 12.710 C 12.057 12.748,11.886 13.230,11.688 13.780 C 11.064 15.520,10.356 17.654,10.368 17.759 C 10.379 17.854,10.407 17.865,10.820 17.949 C 11.724 18.131,12.518 18.110,13.488 17.876 L 13.996 17.754 13.833 17.287 C 13.702 16.914,12.616 13.923,12.229 12.870 C 12.140 12.630,12.103 12.593,12.068 12.710 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/x-circle.svg b/packages/icons/svg/x-circle.svg
index 729893d523..312393a963 100644
--- a/packages/icons/svg/x-circle.svg
+++ b/packages/icons/svg/x-circle.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.380 2.584 C 9.146 2.805,7.814 3.332,6.818 3.994 C 5.607 4.798,4.441 6.012,3.731 7.210 C 3.095 8.282,2.595 9.799,2.477 11.017 C 2.416 11.644,2.450 13.022,2.538 13.500 C 2.834 15.098,3.464 16.562,4.384 17.783 C 4.692 18.193,5.413 18.941,5.860 19.314 C 6.955 20.230,8.796 21.132,10.113 21.398 C 10.966 21.570,12.647 21.601,13.520 21.460 C 14.869 21.242,16.569 20.504,17.751 19.625 C 18.512 19.058,19.458 18.066,19.930 17.340 C 20.536 16.406,21.175 14.903,21.408 13.860 C 21.477 13.553,21.492 13.309,21.509 12.193 C 21.531 10.702,21.515 10.522,21.278 9.660 C 20.383 6.398,18.040 3.934,14.858 2.907 C 14.259 2.714,13.727 2.612,13.060 2.562 C 12.253 2.502,10.772 2.514,10.380 2.584 M9.979 8.565 C 10.224 8.633,10.408 8.778,11.236 9.561 L 12.002 10.286 12.671 9.651 C 13.039 9.302,13.456 8.914,13.597 8.788 L 13.854 8.560 14.351 8.560 C 14.935 8.560,15.048 8.598,15.236 8.861 C 15.432 9.133,15.480 9.285,15.480 9.633 C 15.480 9.930,15.472 9.960,15.326 10.184 C 15.147 10.458,14.752 10.914,14.143 11.549 L 13.713 11.999 14.315 12.629 C 14.963 13.308,15.319 13.734,15.424 13.955 C 15.508 14.131,15.484 14.715,15.385 14.924 C 15.233 15.245,14.872 15.506,14.524 15.547 C 14.062 15.602,13.782 15.421,12.670 14.356 L 12.000 13.714 11.350 14.333 C 10.160 15.466,10.070 15.528,9.588 15.530 C 9.190 15.532,9.087 15.486,8.812 15.186 C 8.584 14.936,8.501 14.711,8.503 14.340 C 8.503 14.171,8.530 14.050,8.592 13.931 C 8.712 13.703,9.164 13.168,9.777 12.530 L 10.287 12.001 9.707 11.390 C 8.534 10.154,8.428 9.982,8.498 9.423 C 8.530 9.167,8.683 8.914,8.949 8.680 L 9.131 8.520 9.476 8.520 C 9.665 8.520,9.892 8.540,9.979 8.565 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.680 2.562 C 9.847 2.629,8.634 3.012,7.629 3.528 C 6.202 4.260,4.700 5.649,3.844 7.030 C 3.150 8.149,2.629 9.657,2.483 10.968 C 2.393 11.782,2.448 13.117,2.601 13.808 C 2.934 15.313,3.521 16.620,4.374 17.760 C 4.745 18.256,5.679 19.189,6.160 19.545 C 7.337 20.416,8.933 21.157,10.160 21.403 C 10.776 21.526,11.996 21.584,12.790 21.528 C 13.767 21.459,14.413 21.305,15.429 20.897 C 17.178 20.195,18.614 19.108,19.703 17.660 C 20.334 16.821,21.026 15.314,21.362 14.047 C 21.467 13.651,21.517 12.929,21.518 11.780 C 21.520 10.756,21.475 10.352,21.285 9.680 C 20.787 7.921,19.954 6.474,18.748 5.274 C 17.986 4.515,17.233 3.978,16.240 3.485 C 15.354 3.044,14.574 2.780,13.756 2.644 C 13.093 2.533,11.552 2.492,10.680 2.562 M9.913 8.557 C 10.167 8.606,10.434 8.810,11.260 9.586 L 12.003 10.286 12.632 9.692 C 12.977 9.365,13.393 8.977,13.555 8.829 L 13.850 8.560 14.275 8.561 C 14.807 8.562,14.976 8.601,15.139 8.759 C 15.376 8.989,15.460 9.214,15.460 9.620 C 15.460 9.977,15.459 9.982,15.294 10.220 C 15.074 10.537,14.858 10.788,14.230 11.453 L 13.708 12.006 14.047 12.353 C 14.961 13.290,15.373 13.791,15.445 14.056 C 15.499 14.257,15.463 14.700,15.375 14.920 C 15.226 15.292,14.692 15.600,14.290 15.545 C 13.931 15.496,13.667 15.300,12.631 14.314 L 12.002 13.715 11.220 14.453 C 10.791 14.859,10.339 15.260,10.216 15.345 C 10.015 15.483,9.962 15.500,9.696 15.514 C 9.281 15.535,9.156 15.502,8.944 15.315 C 8.649 15.056,8.548 14.847,8.528 14.456 C 8.513 14.177,8.524 14.098,8.595 13.949 C 8.707 13.718,9.081 13.270,9.745 12.570 L 10.287 11.999 9.727 11.410 C 8.623 10.246,8.451 9.984,8.493 9.533 C 8.524 9.210,8.669 8.934,8.933 8.696 L 9.129 8.520 9.434 8.522 C 9.602 8.523,9.818 8.538,9.913 8.557 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/x.svg b/packages/icons/svg/x.svg
index 5677f09c81..cb8c0abfb2 100644
--- a/packages/icons/svg/x.svg
+++ b/packages/icons/svg/x.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.488 5.000 C 5.159 5.192,4.974 5.401,4.897 5.664 C 4.797 6.007,4.833 6.271,5.014 6.534 C 5.234 6.854,6.210 7.880,8.358 10.050 L 10.288 12.001 8.457 13.850 C 6.312 16.017,5.241 17.142,5.058 17.420 C 4.800 17.810,4.787 18.114,5.008 18.529 C 5.222 18.930,5.525 19.105,6.080 19.146 L 6.380 19.169 6.820 18.772 C 7.375 18.271,8.819 16.866,10.607 15.086 L 11.995 13.706 13.827 15.520 C 16.010 17.681,17.137 18.750,17.451 18.961 C 17.589 19.053,17.754 19.126,17.860 19.142 C 18.401 19.223,19.002 18.786,19.118 18.227 C 19.182 17.921,19.115 17.657,18.903 17.370 C 18.647 17.024,17.619 15.947,15.563 13.870 L 13.711 12.000 15.483 10.210 C 17.894 7.773,18.939 6.667,19.061 6.422 C 19.242 6.060,19.159 5.604,18.853 5.277 C 18.627 5.035,18.414 4.931,18.073 4.897 C 17.848 4.874,17.780 4.883,17.632 4.954 C 17.253 5.138,16.475 5.858,13.838 8.469 L 11.995 10.294 10.547 8.855 C 7.762 6.086,6.844 5.222,6.465 5.016 C 6.316 4.935,6.194 4.903,5.983 4.891 C 5.724 4.877,5.682 4.886,5.488 5.000 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.572 4.955 C 5.351 5.059,5.053 5.338,4.952 5.535 C 4.908 5.623,4.862 5.797,4.850 5.922 C 4.810 6.367,4.983 6.597,6.642 8.303 C 7.132 8.808,8.156 9.845,8.917 10.610 L 10.300 12.000 8.916 13.390 C 6.136 16.183,5.152 17.228,4.969 17.580 C 4.823 17.859,4.824 18.146,4.972 18.447 C 5.163 18.839,5.425 19.036,5.859 19.116 C 6.352 19.208,6.339 19.213,6.908 18.690 C 7.530 18.118,8.849 16.832,10.650 15.042 L 12.000 13.700 13.370 15.064 C 14.124 15.813,15.127 16.802,15.600 17.261 C 17.335 18.943,17.667 19.196,18.077 19.148 C 18.542 19.093,18.978 18.717,19.100 18.266 C 19.164 18.029,19.164 17.995,19.105 17.790 C 19.069 17.669,18.962 17.464,18.866 17.335 C 18.615 16.997,17.510 15.839,15.483 13.790 L 13.712 12.000 15.442 10.250 C 18.366 7.292,19.034 6.567,19.120 6.259 C 19.293 5.642,18.786 4.982,18.075 4.898 C 17.556 4.838,17.243 5.101,13.790 8.517 L 12.000 10.288 10.210 8.519 C 7.546 5.885,6.779 5.173,6.422 5.001 C 6.171 4.880,5.778 4.859,5.572 4.955 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/yahoo.svg b/packages/icons/svg/yahoo.svg
index 1ee30ab250..f101b5351a 100644
--- a/packages/icons/svg/yahoo.svg
+++ b/packages/icons/svg/yahoo.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.262 4.037 C 17.229 4.090,13.995 11.847,13.971 11.930 C 13.952 11.997,14.052 12.000,15.822 11.990 L 17.693 11.980 19.285 8.140 C 20.162 6.028,20.906 4.232,20.939 4.150 L 20.999 4.000 19.142 4.000 C 18.051 4.000,17.275 4.015,17.262 4.037 M3.034 7.990 C 3.119 8.152,6.760 16.753,6.760 16.791 C 6.760 16.814,6.480 17.487,6.137 18.287 C 5.794 19.086,5.489 19.799,5.459 19.870 L 5.404 20.001 7.090 19.990 L 8.776 19.980 11.279 13.960 L 13.782 7.940 12.125 7.930 C 11.213 7.924,10.460 7.927,10.450 7.936 C 10.441 7.946,9.992 9.067,9.454 10.427 C 8.915 11.787,8.461 12.914,8.445 12.931 C 8.428 12.948,7.973 11.832,7.433 10.451 L 6.451 7.940 4.724 7.930 C 3.086 7.920,2.999 7.923,3.034 7.990 M14.388 12.820 C 13.592 13.039,12.991 13.725,12.872 14.551 C 12.781 15.189,13.013 15.849,13.490 16.307 C 13.908 16.709,14.377 16.896,14.960 16.893 C 16.291 16.887,17.271 15.604,16.937 14.306 C 16.753 13.594,16.168 13.006,15.458 12.821 C 15.176 12.748,14.653 12.747,14.388 12.820 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.415 4.029 C 17.268 4.042,17.244 4.060,17.190 4.192 C 17.157 4.273,16.429 6.023,15.572 8.080 C 14.714 10.137,14.001 11.851,13.988 11.890 C 13.970 11.940,13.988 11.965,14.051 11.981 C 14.100 11.993,14.939 11.997,15.917 11.991 L 17.693 11.980 19.284 8.145 C 20.159 6.035,20.903 4.240,20.937 4.155 L 20.999 4.000 19.290 4.007 C 18.349 4.011,17.506 4.021,17.415 4.029 M3.110 7.948 C 3.071 7.958,3.040 7.974,3.040 7.985 C 3.040 7.995,3.326 8.674,3.676 9.492 C 4.386 11.154,6.140 15.300,6.518 16.212 L 6.764 16.804 6.303 17.892 C 6.049 18.490,5.745 19.205,5.626 19.480 L 5.411 19.980 7.073 19.990 C 7.987 19.996,8.748 19.987,8.765 19.970 C 8.815 19.919,13.764 7.990,13.743 7.970 C 13.733 7.959,12.988 7.941,12.089 7.930 L 10.455 7.908 9.464 10.394 C 8.920 11.761,8.459 12.880,8.442 12.880 C 8.402 12.880,8.010 11.924,7.139 9.696 L 6.465 7.972 5.806 7.946 C 5.082 7.917,3.221 7.919,3.110 7.948 M14.502 12.803 C 14.175 12.857,13.737 13.100,13.462 13.380 C 13.168 13.678,12.980 14.037,12.891 14.470 C 12.741 15.204,13.063 15.999,13.707 16.486 C 14.065 16.756,14.336 16.849,14.825 16.871 C 15.443 16.898,15.929 16.724,16.336 16.330 C 17.020 15.666,17.185 14.739,16.772 13.880 C 16.625 13.574,16.171 13.132,15.840 12.971 C 15.450 12.782,14.980 12.723,14.502 12.803 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/yandex.svg b/packages/icons/svg/yandex.svg
index 51a3a7704e..f9a819360f 100644
--- a/packages/icons/svg/yandex.svg
+++ b/packages/icons/svg/yandex.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.089 6.490 C 7.016 6.513,6.874 6.605,6.773 6.695 C 6.400 7.023,6.295 7.511,6.510 7.920 C 6.603 8.098,6.948 8.419,8.800 10.056 L 10.980 11.983 10.990 14.992 L 11.001 18.000 12.000 18.000 L 12.999 18.000 13.010 14.992 L 13.020 11.984 15.200 10.056 C 17.615 7.921,17.601 7.935,17.599 7.485 C 17.596 6.734,16.803 6.219,16.140 6.537 C 16.008 6.600,15.272 7.222,13.984 8.356 C 12.908 9.304,12.015 10.080,12.000 10.080 C 11.984 10.080,11.091 9.304,10.016 8.356 C 8.729 7.222,7.992 6.600,7.860 6.537 C 7.643 6.432,7.328 6.413,7.089 6.490 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.110 6.497 C 6.807 6.605,6.570 6.847,6.459 7.162 C 6.375 7.402,6.386 7.629,6.495 7.863 C 6.608 8.104,6.838 8.321,9.265 10.468 L 10.947 11.956 10.974 13.104 C 10.988 13.736,11.000 15.096,11.000 16.127 L 11.000 18.000 12.000 18.000 L 13.000 18.000 13.000 16.090 C 13.000 15.040,13.012 13.680,13.027 13.069 L 13.053 11.957 14.914 10.309 C 17.002 8.460,17.454 8.032,17.540 7.825 C 17.745 7.336,17.406 6.660,16.878 6.503 C 16.626 6.428,16.534 6.425,16.298 6.485 C 16.083 6.539,15.696 6.856,13.545 8.740 C 12.716 9.466,12.021 10.060,12.000 10.060 C 11.979 10.060,11.284 9.466,10.455 8.740 C 8.304 6.856,7.917 6.539,7.702 6.485 C 7.472 6.427,7.296 6.431,7.110 6.497 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/ycombinator.svg b/packages/icons/svg/ycombinator.svg
index 18cf8ad480..0280c6e731 100644
--- a/packages/icons/svg/ycombinator.svg
+++ b/packages/icons/svg/ycombinator.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.000 12.000 L 3.000 21.000 12.000 21.000 L 21.000 21.000 21.000 12.000 L 21.000 3.000 12.000 3.000 L 3.000 3.000 3.000 12.000 M9.813 7.550 C 9.928 7.832,11.602 11.179,11.718 11.360 C 11.782 11.459,11.835 11.567,11.837 11.600 C 11.839 11.633,11.886 11.758,11.942 11.877 C 12.043 12.093,12.043 12.094,12.107 12.003 C 12.142 11.952,12.228 11.774,12.299 11.606 C 12.369 11.438,12.479 11.216,12.543 11.114 C 12.607 11.012,13.047 10.135,13.520 9.165 L 14.380 7.402 15.051 7.401 L 15.722 7.400 15.666 7.490 C 15.636 7.540,14.933 8.859,14.105 10.422 L 12.600 13.265 12.600 15.132 L 12.600 17.000 12.000 17.000 L 11.400 17.000 11.400 15.102 L 11.400 13.204 9.844 10.302 L 8.288 7.400 9.020 7.400 L 9.751 7.400 9.813 7.550 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.000 12.000 L 3.000 21.000 12.000 21.000 L 21.000 21.000 21.000 12.000 L 21.000 3.000 12.000 3.000 L 3.000 3.000 3.000 12.000 M10.794 9.533 C 11.374 10.703,11.886 11.746,11.930 11.851 C 11.975 11.957,12.030 12.037,12.053 12.029 C 12.104 12.012,12.842 10.563,13.724 8.750 L 14.380 7.401 15.045 7.400 L 15.710 7.400 15.023 8.690 C 14.645 9.400,13.945 10.719,13.468 11.622 L 12.600 13.263 12.600 15.132 L 12.600 17.000 12.000 17.000 L 11.400 17.000 11.400 15.099 L 11.400 13.198 9.882 10.369 C 9.048 8.813,8.353 7.509,8.338 7.470 C 8.313 7.405,8.361 7.400,9.026 7.403 L 9.740 7.406 10.794 9.533 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/youtube.svg b/packages/icons/svg/youtube.svg
index 381154802c..a03d9a8286 100644
--- a/packages/icons/svg/youtube.svg
+++ b/packages/icons/svg/youtube.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.860 5.043 C 6.360 5.101,4.733 5.199,4.248 5.323 C 3.558 5.499,2.911 6.010,2.628 6.600 C 2.185 7.526,2.043 8.671,2.011 11.557 C 1.975 14.776,2.139 16.407,2.597 17.383 C 2.794 17.803,2.973 18.030,3.297 18.271 C 4.084 18.855,4.854 18.943,10.000 19.042 C 12.900 19.098,16.598 19.028,18.737 18.878 C 19.683 18.812,20.071 18.705,20.567 18.375 C 20.940 18.127,21.182 17.844,21.385 17.419 C 21.861 16.419,22.026 14.813,21.989 11.535 C 21.968 9.689,21.909 8.669,21.778 7.920 C 21.693 7.434,21.460 6.733,21.288 6.441 C 20.984 5.927,20.371 5.481,19.752 5.323 C 18.810 5.083,13.294 4.941,8.860 5.043 M12.674 10.440 C 14.127 11.199,15.303 11.832,15.288 11.846 C 15.238 11.892,9.997 14.600,9.958 14.600 C 9.934 14.600,9.920 13.555,9.920 11.817 C 9.920 9.448,9.928 9.036,9.976 9.047 C 10.007 9.054,11.221 9.681,12.674 10.440 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.940 5.027 C 8.053 5.050,5.641 5.152,4.780 5.245 C 4.037 5.325,3.513 5.564,3.039 6.039 C 2.538 6.542,2.254 7.370,2.122 8.720 C 2.008 9.883,1.966 12.717,2.041 14.220 C 2.150 16.404,2.488 17.600,3.152 18.152 C 3.990 18.849,4.692 18.941,9.920 19.042 C 13.710 19.116,18.557 18.982,19.600 18.775 C 20.217 18.653,20.823 18.272,21.157 17.797 C 21.766 16.929,21.999 15.397,21.999 12.260 C 21.999 10.980,21.944 9.337,21.880 8.683 C 21.798 7.857,21.618 7.132,21.351 6.568 C 21.119 6.076,20.525 5.589,19.904 5.380 C 19.374 5.202,17.807 5.104,14.520 5.040 C 12.651 5.004,11.999 5.003,9.940 5.027 M11.960 10.070 C 13.582 10.914,15.156 11.753,15.231 11.812 C 15.269 11.841,15.191 11.901,14.931 12.040 C 14.423 12.312,11.026 14.067,10.456 14.352 L 9.971 14.595 9.946 14.291 C 9.913 13.901,9.913 9.527,9.946 9.252 L 9.971 9.044 10.255 9.188 C 10.412 9.266,11.179 9.663,11.960 10.070 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/zoom-in.svg b/packages/icons/svg/zoom-in.svg
index c0ec6a8c50..550e2f2f9a 100644
--- a/packages/icons/svg/zoom-in.svg
+++ b/packages/icons/svg/zoom-in.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.660 2.522 C 7.821 2.604,6.487 3.111,5.640 3.670 C 5.027 4.074,3.989 5.109,3.609 5.694 C 3.355 6.085,2.910 7.028,2.747 7.520 C 2.486 8.311,2.393 9.237,2.477 10.220 C 2.563 11.221,2.712 11.752,3.162 12.664 C 3.654 13.659,4.058 14.181,4.978 15.009 C 5.487 15.467,5.816 15.693,6.403 15.987 C 7.817 16.694,9.494 16.924,10.992 16.617 C 11.693 16.473,12.828 16.036,13.460 15.669 L 13.780 15.482 15.480 17.173 C 19.310 20.983,19.871 21.494,20.279 21.549 C 20.700 21.605,21.196 21.305,21.402 20.868 C 21.573 20.507,21.590 20.282,21.466 20.028 C 21.292 19.675,20.254 18.577,16.995 15.300 L 15.484 13.780 15.702 13.400 C 16.254 12.438,16.652 11.182,16.766 10.038 C 16.804 9.651,16.801 9.490,16.747 9.038 C 16.532 7.263,15.840 5.760,14.724 4.644 C 13.968 3.889,13.290 3.422,12.396 3.043 C 11.490 2.659,11.183 2.593,9.960 2.520 C 9.233 2.476,9.128 2.477,8.660 2.522 M10.440 4.966 C 10.918 5.017,11.180 5.105,11.766 5.407 C 12.732 5.905,13.280 6.485,13.974 7.742 L 14.240 8.224 14.240 9.599 L 14.240 10.973 13.995 11.437 C 13.621 12.147,13.423 12.420,12.922 12.922 C 12.391 13.453,12.065 13.697,11.594 13.918 C 11.077 14.160,10.616 14.278,10.020 14.321 C 8.509 14.430,7.356 14.022,6.352 13.023 C 5.845 12.519,5.451 11.941,5.141 11.245 C 4.922 10.755,4.900 10.538,4.950 9.351 C 4.990 8.389,4.998 8.318,5.101 8.057 C 5.484 7.088,6.146 6.238,6.941 5.695 C 8.019 4.959,8.825 4.791,10.440 4.966 M8.935 6.275 C 8.828 6.361,8.681 6.513,8.609 6.613 C 8.493 6.775,8.474 6.840,8.440 7.188 C 8.419 7.403,8.402 7.762,8.401 7.985 L 8.400 8.390 7.970 8.418 C 6.859 8.488,6.638 8.552,6.340 8.893 C 6.029 9.248,5.963 9.654,6.153 10.044 C 6.431 10.619,6.864 10.800,7.957 10.800 L 8.388 10.800 8.413 11.430 C 8.426 11.777,8.463 12.168,8.495 12.300 C 8.547 12.512,8.584 12.568,8.811 12.784 C 9.343 13.289,9.857 13.289,10.389 12.784 C 10.616 12.568,10.653 12.512,10.705 12.300 C 10.737 12.168,10.774 11.779,10.787 11.435 L 10.812 10.811 11.436 10.789 C 12.426 10.755,12.752 10.610,13.006 10.093 C 13.185 9.730,13.189 9.398,13.019 9.086 C 12.763 8.615,12.464 8.506,11.190 8.417 L 10.800 8.390 10.800 7.945 C 10.799 6.938,10.696 6.602,10.307 6.335 C 10.056 6.162,9.894 6.120,9.475 6.120 C 9.135 6.120,9.128 6.122,8.935 6.275 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.676 2.523 C 7.828 2.613,6.446 3.136,5.654 3.668 C 5.061 4.066,4.217 4.881,3.727 5.531 C 3.458 5.887,2.964 6.898,2.765 7.500 C 2.529 8.215,2.464 8.646,2.464 9.520 C 2.463 10.323,2.516 10.816,2.663 11.386 C 2.844 12.085,3.377 13.181,3.848 13.820 C 4.125 14.196,5.021 15.080,5.463 15.413 C 5.891 15.736,6.772 16.184,7.360 16.377 C 8.282 16.680,9.300 16.807,10.170 16.727 C 10.461 16.700,10.835 16.650,11.000 16.616 C 11.664 16.477,12.861 16.016,13.462 15.668 L 13.775 15.486 15.897 17.589 C 17.065 18.746,18.323 19.978,18.694 20.328 C 19.997 21.555,20.209 21.675,20.737 21.478 C 21.253 21.285,21.651 20.613,21.516 20.162 C 21.412 19.816,20.630 18.968,17.471 15.778 L 15.488 13.776 15.702 13.398 C 16.258 12.419,16.691 11.006,16.782 9.878 C 16.848 9.044,16.525 7.569,16.055 6.563 C 15.680 5.760,15.246 5.166,14.533 4.480 C 13.917 3.887,13.482 3.581,12.740 3.217 C 11.712 2.714,11.275 2.606,9.934 2.523 C 9.181 2.476,9.119 2.476,8.676 2.523 M10.352 4.962 C 10.856 5.016,11.093 5.085,11.580 5.319 C 12.652 5.834,13.253 6.447,13.994 7.784 L 14.240 8.227 14.240 9.604 L 14.240 10.981 13.958 11.498 C 13.586 12.180,13.395 12.441,12.919 12.917 C 12.299 13.537,11.936 13.790,11.312 14.036 C 10.377 14.405,9.021 14.434,8.057 14.106 C 6.923 13.719,5.899 12.762,5.268 11.497 C 4.932 10.825,4.896 10.565,4.958 9.269 C 5.006 8.262,5.021 8.194,5.309 7.620 C 5.988 6.266,7.282 5.212,8.546 4.984 C 8.925 4.915,9.819 4.904,10.352 4.962 M9.051 6.199 C 8.889 6.298,8.611 6.582,8.538 6.724 C 8.463 6.868,8.401 7.437,8.400 7.970 L 8.400 8.400 8.290 8.401 C 8.049 8.402,7.207 8.482,7.000 8.523 C 6.615 8.600,6.335 8.818,6.145 9.189 C 5.981 9.510,6.039 9.926,6.296 10.280 C 6.557 10.639,7.051 10.796,7.930 10.799 L 8.400 10.800 8.400 11.136 C 8.400 11.611,8.473 12.260,8.546 12.444 C 8.678 12.774,9.246 13.159,9.600 13.159 C 9.954 13.159,10.522 12.774,10.654 12.444 C 10.727 12.261,10.800 11.611,10.800 11.142 L 10.800 10.812 11.410 10.788 C 12.342 10.750,12.668 10.632,12.918 10.243 C 12.984 10.140,13.068 9.940,13.105 9.798 C 13.167 9.559,13.168 9.524,13.108 9.320 C 13.017 9.011,12.838 8.784,12.588 8.662 C 12.365 8.553,11.860 8.465,11.190 8.419 L 10.800 8.393 10.800 7.906 C 10.799 6.990,10.675 6.596,10.309 6.346 C 10.066 6.180,9.849 6.122,9.460 6.121 C 9.251 6.121,9.147 6.140,9.051 6.199 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/zoom-out.svg b/packages/icons/svg/zoom-out.svg
index 9f327557c5..09842a2ce4 100644
--- a/packages/icons/svg/zoom-out.svg
+++ b/packages/icons/svg/zoom-out.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.420 2.559 C 7.678 2.642,6.424 3.151,5.596 3.707 C 4.048 4.744,3.043 6.217,2.582 8.121 C 2.457 8.638,2.412 9.550,2.475 10.300 C 2.588 11.641,3.258 13.193,4.186 14.259 C 4.560 14.690,5.221 15.276,5.658 15.565 C 6.834 16.342,8.617 16.862,9.846 16.787 C 10.922 16.722,12.834 16.113,13.582 15.599 L 13.769 15.470 15.395 17.088 C 17.481 19.166,18.838 20.487,19.429 21.020 C 19.956 21.493,20.158 21.590,20.525 21.547 C 20.771 21.518,20.900 21.449,21.170 21.202 C 21.482 20.917,21.531 20.795,21.514 20.342 C 21.500 19.985,21.495 19.966,21.355 19.796 C 21.083 19.465,19.533 17.860,17.526 15.834 C 16.423 14.720,15.520 13.790,15.520 13.768 C 15.520 13.745,15.594 13.599,15.684 13.442 C 16.052 12.804,16.578 11.427,16.681 10.830 C 16.751 10.431,16.711 8.420,16.627 8.100 C 16.135 6.207,15.096 4.692,13.620 3.712 C 12.896 3.231,11.697 2.714,11.057 2.606 C 10.748 2.554,8.781 2.519,8.420 2.559 M10.877 5.044 C 11.040 5.086,11.359 5.209,11.586 5.317 C 12.737 5.867,13.482 6.674,14.082 8.020 L 14.260 8.420 14.247 9.680 L 14.234 10.940 13.972 11.440 C 13.607 12.138,13.338 12.531,12.973 12.898 C 11.540 14.343,9.570 14.740,7.702 13.959 C 7.010 13.669,6.159 12.960,5.746 12.327 C 5.451 11.876,5.052 11.070,5.001 10.823 C 4.970 10.675,4.959 10.228,4.968 9.490 C 4.981 8.536,4.993 8.352,5.056 8.180 C 5.376 7.308,6.063 6.340,6.708 5.854 C 7.244 5.450,8.128 5.041,8.640 4.960 C 9.019 4.899,10.534 4.957,10.877 5.044 M6.775 8.589 C 6.422 8.621,6.069 9.125,6.065 9.599 C 6.063 10.003,6.333 10.443,6.692 10.617 C 6.866 10.701,6.994 10.724,7.480 10.758 C 8.179 10.808,10.167 10.810,11.385 10.762 C 12.374 10.724,12.489 10.696,12.793 10.422 C 13.029 10.208,13.120 9.994,13.120 9.652 C 13.120 9.197,12.966 8.880,12.639 8.664 L 12.482 8.560 9.711 8.567 C 8.187 8.571,6.866 8.581,6.775 8.589 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.939 2.657 C 7.740 2.709,7.386 2.826,7.151 2.918 C 4.971 3.770,3.482 5.312,2.785 7.438 C 2.503 8.297,2.464 8.560,2.465 9.580 C 2.465 10.337,2.478 10.518,2.555 10.880 C 2.816 12.107,3.381 13.290,4.140 14.205 C 4.453 14.582,5.159 15.216,5.606 15.522 C 6.325 16.014,7.400 16.451,8.427 16.666 C 9.121 16.812,9.971 16.820,10.600 16.686 C 11.763 16.440,13.032 15.976,13.595 15.590 L 13.769 15.470 15.335 17.028 C 18.613 20.291,19.657 21.280,20.018 21.461 C 20.389 21.647,20.754 21.569,21.147 21.219 C 21.469 20.932,21.537 20.764,21.512 20.304 C 21.496 19.988,21.486 19.955,21.352 19.793 C 21.122 19.514,20.197 18.553,18.083 16.400 C 16.992 15.289,15.969 14.243,15.809 14.076 L 15.518 13.772 15.770 13.276 C 16.172 12.484,16.596 11.340,16.680 10.821 C 16.729 10.521,16.730 9.261,16.682 8.620 C 16.579 7.247,15.634 5.437,14.471 4.383 C 13.721 3.704,12.717 3.131,11.655 2.775 C 11.106 2.592,10.783 2.561,9.420 2.563 C 8.379 2.564,8.275 2.570,7.939 2.657 M10.480 5.000 C 10.895 5.041,11.173 5.124,11.623 5.340 C 12.358 5.694,13.073 6.314,13.515 6.980 C 13.631 7.156,13.842 7.537,13.983 7.826 L 14.240 8.352 14.240 9.644 L 14.240 10.936 13.935 11.498 C 13.449 12.395,13.100 12.835,12.488 13.325 C 11.945 13.760,11.390 14.032,10.643 14.229 C 10.317 14.316,10.168 14.331,9.640 14.334 C 8.957 14.338,8.770 14.309,8.090 14.094 C 7.190 13.810,6.284 13.120,5.744 12.307 C 5.405 11.797,5.044 11.027,4.999 10.720 C 4.954 10.406,4.952 9.406,4.996 8.717 C 5.027 8.222,5.031 8.206,5.229 7.792 C 5.568 7.082,6.064 6.407,6.560 5.982 C 6.955 5.643,7.820 5.180,8.330 5.035 C 8.676 4.936,9.673 4.920,10.480 5.000 M7.260 8.598 C 6.548 8.622,6.493 8.641,6.306 8.912 C 6.054 9.276,6.006 9.699,6.174 10.061 C 6.289 10.307,6.613 10.607,6.836 10.674 C 7.111 10.756,7.955 10.798,9.360 10.798 C 11.026 10.797,12.138 10.747,12.401 10.660 C 12.666 10.572,12.929 10.330,13.040 10.072 C 13.116 9.893,13.127 9.815,13.109 9.553 C 13.082 9.165,12.946 8.896,12.677 8.698 L 12.489 8.560 10.195 8.568 C 8.933 8.572,7.612 8.586,7.260 8.598 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/zoom.svg b/packages/icons/svg/zoom.svg
index 5f0534d006..82e8447fc4 100644
--- a/packages/icons/svg/zoom.svg
+++ b/packages/icons/svg/zoom.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.340 3.024 C 10.026 3.160,9.091 3.415,8.060 3.918 C 5.286 5.272,3.420 7.912,3.059 10.992 C 2.666 14.352,4.239 17.669,7.120 19.560 C 7.929 20.090,9.126 20.589,10.092 20.797 C 14.142 21.669,18.255 19.669,20.083 15.940 C 21.302 13.453,21.302 10.547,20.083 8.060 C 19.190 6.237,17.762 4.810,15.944 3.923 C 15.066 3.494,14.269 3.244,13.320 3.101 C 12.911 3.039,11.662 2.991,11.340 3.024 M13.541 9.134 C 13.804 9.257,14.086 9.572,14.173 9.841 C 14.233 10.026,14.240 10.300,14.240 12.305 L 14.240 14.560 11.147 14.560 C 7.688 14.560,7.841 14.572,7.504 14.276 C 7.404 14.187,7.275 14.016,7.212 13.889 L 7.100 13.660 7.089 11.350 L 7.078 9.040 10.209 9.040 L 13.340 9.041 13.541 9.134 M17.391 13.180 L 17.380 14.560 16.210 13.780 L 15.040 13.000 15.040 11.800 L 15.040 10.600 16.210 9.820 L 17.380 9.040 17.391 10.420 C 17.396 11.179,17.396 12.421,17.391 13.180 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.078 3.060 C 9.848 3.209,8.988 3.464,7.940 3.990 C 6.536 4.696,5.282 5.821,4.430 7.140 C 3.356 8.803,2.844 10.925,3.042 12.886 C 3.360 16.032,5.407 18.895,8.246 20.166 C 9.610 20.777,10.903 21.039,12.300 20.988 C 16.060 20.851,19.315 18.422,20.516 14.858 C 21.158 12.953,21.159 11.050,20.521 9.160 C 20.065 7.807,19.417 6.743,18.443 5.746 C 17.703 4.988,17.012 4.478,16.080 4.002 C 14.842 3.370,13.865 3.114,12.395 3.040 C 11.507 2.995,11.624 2.994,11.078 3.060 M13.508 9.118 C 13.730 9.219,14.025 9.518,14.133 9.752 C 14.219 9.937,14.220 9.977,14.233 12.252 L 14.245 14.564 11.113 14.550 C 8.714 14.539,7.944 14.524,7.826 14.485 C 7.628 14.419,7.354 14.145,7.217 13.875 L 7.110 13.662 7.089 11.351 L 7.068 9.040 10.204 9.041 C 13.205 9.042,13.347 9.045,13.508 9.118 M17.380 9.690 C 17.414 10.412,17.392 14.462,17.354 14.500 C 17.339 14.514,16.813 14.182,16.184 13.763 L 15.040 12.999 15.040 11.800 L 15.040 10.601 16.170 9.843 C 16.792 9.426,17.312 9.084,17.326 9.083 C 17.340 9.081,17.364 9.355,17.380 9.690 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f2ab18d38f..7378cecc64 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.2",
+  "version": "0.0.6-rc.3",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From 4e30cf4afd085b8c57719704d35be496905ce77b Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 20 Mar 2023 15:57:27 +0900
Subject: [PATCH 053/167] List - Fix numeric list issue

---
 packages/ui/src/7-components/_list.scss | 75 +++++++------------------
 1 file changed, 20 insertions(+), 55 deletions(-)

diff --git a/packages/ui/src/7-components/_list.scss b/packages/ui/src/7-components/_list.scss
index 050deea4e2..28ced024bc 100644
--- a/packages/ui/src/7-components/_list.scss
+++ b/packages/ui/src/7-components/_list.scss
@@ -1,39 +1,22 @@
 @use "../abstract" as *;
 .list {
   --p-list-text-color: var(--color-neutral-100);
-
   color: hsl(var(--p-list-text-color));
-  display: flex;
-  flex-direction: column;
-  gap: pxToRem(24);
-  font-size: pxToRem(16);
+
+  display:flex; flex-direction:column; gap:pxToRem(24); font-size:pxToRem(16);
 
   &-item {
-    display: flex;
-    align-items: baseline;
-    gap: pxToRem(20);
-    > * {
-      vertical-align: middle;
-    }
-    [class*="icon"] {
-      line-height: 1;
-    }
-    .text {
-      align-self: center;
-      line-height: 1.5;
-    }
+    display:flex; align-items:baseline; gap:pxToRem(20);
+    > * { vertical-align:middle; }
+    [class*="icon"] { line-height:1; }
+    .text { align-self:center; line-height:1.5; }
   }
 
   .icon-check {
-    flex-shrink: 0;
-    display: inline-grid;
-    place-content: center;
-    inline-size: pxToRem(24);
-    block-size: pxToRem(24);
-    border-radius: 50%;
-    color: hsl(var(--color-neutral-0));
-    font-size: pxToRem(14);
-    background-color: hsl(var(--color-primary-100));
+    flex-shrink:0; display:inline-grid; place-content:center;
+    inline-size:pxToRem(24); block-size:pxToRem(24);
+    color:hsl(var(--color-neutral-0)); font-size:pxToRem(14);
+    background-color:hsl(var(--color-primary-100)); border-radius:50%;
   }
 
   #{$theme-dark} & {
@@ -43,47 +26,29 @@
 
 .numeric-list {
   counter-reset: number;
-  display: grid;
-  row-gap: pxToRem(24);
+  display:grid; row-gap:pxToRem(24);
   &-item {
     counter-increment: number;
-    display: flex;
-    align-items: baseline;
-    column-gap: pxToRem(24);
+    display:flex; align-items:baseline; column-gap:pxToRem(24);
     &::before {
-      content: counter(number);
-      display: grid;
-      place-content: center;
-      inline-size: pxToRem(32);
-      block-size: pxToRem(32);
-      background-color: hsl(var(--color-neutral-5));
-      color: hsl(var(--color-neutral-100));
-      border-radius: var(--border-radius-circular);
+      content: counter(number); flex-shrink:0;
+      display:grid; place-content:center; inline-size:pxToRem(32); block-size:pxToRem(32);
+      background-color:hsl(var(--color-neutral-5)); color:hsl(var(--color-neutral-100)); border-radius:var(--border-radius-circular);
     }
   }
 }
 
 .order-list {
-  display: flex;
-  flex-direction: column;
-  gap: pxToRem(32);
   counter-reset: number;
+  display:flex; flex-direction:column; gap:pxToRem(32);
 
   &-item {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: pxToRem(16);
     counter-increment: number;
+    display:flex; flex-direction:column; flex-wrap:wrap; gap:pxToRem(16);
   }
   &-content {
-    display: flex;
-    gap: pxToRem(16);
-    &::before {
-      content: counter(number);
-    }
-    &.is-hide-number::before {
-      opacity: 0;
-    }
+    display:flex; gap:pxToRem(16);
+    &::before { content:counter(number); }
+    &.is-hide-number::before { opacity:0; }
   }
 }

From 6158437b1dd0eda101f57bb1a4393c0814a6b05e Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 20 Mar 2023 16:06:00 +0900
Subject: [PATCH 054/167] Pagination - Align more options dots to center
 instead of bottom. Done using via different dot character.

---
 apps/pink/src/pages/layout/pagination.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/pink/src/pages/layout/pagination.mdx b/apps/pink/src/pages/layout/pagination.mdx
index 5577d1adca..ca22937dae 100644
--- a/apps/pink/src/pages/layout/pagination.mdx
+++ b/apps/pink/src/pages/layout/pagination.mdx
@@ -24,7 +24,7 @@ description: Pagination allows you to break up content that doesn't fit on a sin
           class="button is-text /*u-hide*/"
           aria-label="show prev 5 pages"
         >
-          <span class="icon">...</span>
+          <span class="icon">···</span>
         </button>
       </li>
       <li class="pagination-item">
@@ -49,7 +49,7 @@ description: Pagination allows you to break up content that doesn't fit on a sin
       </li>
       <li class="pagination-item">
         <button class="button is-text" aria-label="show next 5 pages">
-          <span class="icon">...</span>
+          <span class="icon">···</span>
         </button>
       </li>
       <li class="pagination-item">

From 1be2df43d454f36e55fcf62f120e69173d522a76 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 20 Mar 2023 22:25:46 +0900
Subject: [PATCH 055/167] List - Update style colors of numeric-list

---
 packages/ui/src/7-components/_list.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_list.scss b/packages/ui/src/7-components/_list.scss
index 28ced024bc..7d464ada42 100644
--- a/packages/ui/src/7-components/_list.scss
+++ b/packages/ui/src/7-components/_list.scss
@@ -25,6 +25,9 @@
 }
 
 .numeric-list {
+  --p-numeric-border-color: var(--color-neutral-10);
+  --p-numeric-bg-color:     var(--color-neutral-5);
+  --p-numeric-text-color:   var(--color-neutral-100);
   counter-reset: number;
   display:grid; row-gap:pxToRem(24);
   &-item {
@@ -33,9 +36,16 @@
     &::before {
       content: counter(number); flex-shrink:0;
       display:grid; place-content:center; inline-size:pxToRem(32); block-size:pxToRem(32);
-      background-color:hsl(var(--color-neutral-5)); color:hsl(var(--color-neutral-100)); border-radius:var(--border-radius-circular);
+      background-color:hsl(var(--p-numeric-bg-color)); color:hsl(var(--p-numeric-text-color));
+      border:solid pxToRem(1) hsl(var(--p-numeric-border-color));
+      border-radius:var(--border-radius-circular);
     }
   }
+  #{$theme-dark} & {
+    --p-numeric-border-color: var(--color-neutral-150);
+    --p-numeric-bg-color:     var(--color-neutral-200);
+    --p-numeric-text-color:   var(--color-neutral-50);
+  }
 }
 
 .order-list {

From 025c434e9f0aed6aef660515795b8a5f4a6531b1 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 20 Mar 2023 22:47:32 +0900
Subject: [PATCH 056/167] -- Card - Update style of hover state

---
 packages/ui/src/6-elements/_card.scss | 63 +++++++++++++++------------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/ui/src/6-elements/_card.scss b/packages/ui/src/6-elements/_card.scss
index 3f439151a6..0cab8edd38 100644
--- a/packages/ui/src/6-elements/_card.scss
+++ b/packages/ui/src/6-elements/_card.scss
@@ -1,34 +1,33 @@
 @use '../abstract' as *;
 .card {
-  --p-card-bg-color: var(--p-card-bg-color-default);
-  --p-card-bg-color-default: var(--card-bg-color , var(--color-neutral-0));
-  --p-card-bg-color-hover: var(--color-neutral-10);
-  --p-card-border-color: var(--color-border);
-  --p-card-border-radius: var(--card-border-radius, var(--border-radius-medium));
+  --p-card-bg-color:          var(--p-card-bg-color-default);
+  --p-card-bg-color-default:  var(--card-bg-color , var(--color-neutral-0));
+  --p-card-bg-color-hover:    var(--color-neutral-5);
+
+  --p-card-border-color:          var(--p-card-border-color-default);
+  --p-card-border-color-default:  var(--color-border);
+  --p-card-border-color-hover:    var(--color-neutral-30);
+
+  --p-card-border-radius:     var(--card-border-radius, var(--border-radius-medium));
 
   $padding: pxToRem(32);
-  --p-card-padding: var(--card-padding, #{$padding});
+  --p-card-padding:           var(--card-padding, #{$padding});
 
-  position: relative;
-  display: block;
-  transition: var(--transition) background-color;
-  background: hsl(var(--p-card-bg-color));
-  border-radius: var(--p-card-border-radius);
-  box-shadow: var(--shadow-small);
-  padding: var(--p-card-padding);
-  border: solid pxToRem(1) hsl(var(--p-card-border-color));
+  position:relative; display:block;
+  transition:     var(--transition) background-color;
+  background:     hsl(var(--p-card-bg-color));
+  border-radius:  var(--p-card-border-radius);
+  box-shadow:     var(--shadow-small);
+  padding:        var(--p-card-padding);
+  border:         solid pxToRem(1) hsl(var(--p-card-border-color));
 
   &-header {
-    min-block-size: pxToRem(210);
-    padding: var(--p-card-padding);
-    margin: calc(var(--p-card-padding) * -1);
-    border-start-start-radius:inherit;
-    border-start-end-radius:inherit;
-    overflow:hidden;
-    background: linear-gradient(271.77deg, #FCFCFF 0%, #FDFDFF 82.19%, #FFFFFF 99.87%);
-    #{$theme-dark} & { background: linear-gradient(96.46deg, #1B1B28 8.56%, #282A3B 115.77%); }
+    min-block-size:pxToRem(210); padding:var(--p-card-padding); margin:calc(var(--p-card-padding) * -1);
+    border-start-start-radius:inherit; border-start-end-radius:inherit; overflow:hidden;
+    background:linear-gradient(271.77deg, #FCFCFF 0%, #FDFDFF 82.19%, #FFFFFF 99.87%);
+    #{$theme-dark} & { background:linear-gradient(96.46deg, #1B1B28 8.56%, #282A3B 115.77%); }
 
-    &-image { margin: calc(var(--p-card-padding) * -1); max-block-size:pxToRem(178); margin-inline-end:0; }
+    &-image { margin:calc(var(--p-card-padding) * -1); max-block-size:pxToRem(178); margin-inline-end:0; }
   }
   &:focus-visible {
     /* focus styles */
@@ -44,15 +43,22 @@
 
   /* upload state */
   &:where(a) {
-    &:hover { --p-card-bg-color:var(--p-card-bg-color-hover); }
+    &:hover {
+      --p-card-bg-color:      var(--p-card-bg-color-hover);
+      --p-card-border-color:  var(--p-card-border-color-hover);
+    }
   }
   &.is-border-dashed    { border:dashed pxToRem(1) hsl(var(--p-card-border-color)); }
   //&.is-hover-with-file  { --p-card-bg-color: var(--p-card-bg-color-hover-file); }
 
   &.is-no-shadow { box-shadow:none; }
 
-  &.is-allow-focus{
-    &:hover { --p-card-bg-color:var(--p-card-bg-color-hover); }
+  &.is-allow-focus {
+    cursor: pointer;
+    &:hover {
+      --p-card-bg-color:      var(--p-card-bg-color-hover);
+      --p-card-border-color:  var(--p-card-border-color-hover);
+    }
     &:has(:focus-visible) { box-shadow:var(--focus-box-shadow); }
   }
 
@@ -67,8 +73,9 @@
   }
 
   #{$theme-dark} & {
-    --p-card-bg-color-default: var(--color-neutral-300);
-    --p-card-bg-color-hover: var(--color-neutral-150);
+    --p-card-bg-color-default:    var(--color-neutral-300);
+    --p-card-bg-color-hover:      var(--color-neutral-200);
+    --p-card-border-color-hover:  var(--color-neutral-150);
   }
 }
 

From 8438332529fb99e242fbeb88358a7474eeaeb0f1 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 21 Mar 2023 19:07:03 +0900
Subject: [PATCH 057/167] -- Input text - Add new numeric demo

- Add new utilities class + update utility class pages of pink design
---
 apps/pink/src/pages/elements/input-field.mdx  | 56 +++++++++++++++++++
 apps/pink/src/pages/utilities/box-model.mdx   | 14 +++++
 apps/pink/src/pages/utilities/display.mdx     |  3 +-
 apps/pink/src/pages/utilities/position.mdx    | 26 ++++++---
 apps/pink/src/pages/utilities/text.mdx        |  1 +
 .../ui/src/6-elements/form/_text-inputs.scss  | 36 +-----------
 packages/ui/src/_9-utilities.scss             | 17 ++++++
 7 files changed, 108 insertions(+), 45 deletions(-)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index 838c8b7469..beb06b7c0a 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -92,6 +92,62 @@ There are a few different types of input field that the user can interact with:
   </form>
 </Preview>
 
+| Input Type | Type                   |                                                                                                                           |
+| ---------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `numeric`  | Numeric                | Used for numeric input                                                                                                    |
+| -          | Input with two buttons | Display with two buttons                                                                                                  |
+
+<Preview center>
+    <form class="form u-width-full-line u-max-width-500">
+        <ul class="form-list">
+            <li class="form-item">
+                <label class="label">Label</label>
+                <div class="input-text-wrapper u-width-full-line u-max-width-500" style="--amount-of-buttons: 1;">
+                    <input type="number" class="input-text u-remove-input-number-buttons" placeholder="Placeholder" />
+                    <button
+                        class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8"
+                        aria-label="Up value of numeric field"
+                        type="button"
+                    >
+                        <span class="icon-cheveron-up u-line-height-0-7" aria-hidden="true"></span>
+                    </button>
+                    <button
+                        class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8"
+                        aria-label="Down value of numeric field"
+                        type="button"
+                    >
+                        <span class="icon-cheveron-down u-line-height-0-7" aria-hidden="true"></span>
+                    </button>
+                </div>
+            </li>
+            <li class="form-item">
+                <label class="label">Disabled</label>
+                <div class="input-text-wrapper u-width-full-line u-max-width-500" style="--amount-of-buttons: 1;">
+                    <input type="number" class="input-text u-remove-input-number-buttons" placeholder="Placeholder" disabled />
+                    <button
+                        class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8"
+                        aria-label="Up value of numeric field"
+                        type="button"
+                        disabled
+                    >
+                        <span class="icon-cheveron-up u-line-height-0-7" aria-hidden="true"></span>
+                    </button>
+                    <button
+                        class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8"
+                        aria-label="Down value of numeric field"
+                        type="button"
+                        disabled
+                    >
+                        <span class="icon-cheveron-down u-line-height-0-7" aria-hidden="true"></span>
+                    </button>
+                </div>
+            </li>
+        </ul>
+    </form>
+</Preview>
+
+
+
 | Input Type | Type        |                                          |
 | ---------- | ----------- | ---------------------------------------- |
 | `file`     | Upload file | Used in case upload a file is necessary. |
diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx
index 18e94e760d..85147c80d0 100644
--- a/apps/pink/src/pages/utilities/box-model.mdx
+++ b/apps/pink/src/pages/utilities/box-model.mdx
@@ -5,11 +5,19 @@ description: Box Model ensures consistent margins, paddings and borders across o
 
 | Class                              | Scss Define                                   | Compiled CSS                             |
 | ---------------------------------- | --------------------------------------------- | ---------------------------------------- |
+| `u-padding-0`                      | `padding: 0 !important;`                      | Stays the same                           |
+| `u-padding-8`                      | `padding: pxToRem(8) !important;`             | `padding: 0.5rem !important;`            |
+| `u-padding-12`                     | `padding: pxToRem(12) !important;`            | `padding: 0.75rem !important;`           |
+| `u-padding-16`                     | `padding: pxToRem(16) !important;`            | `padding: 1rem !important;`              |
 | `u-padding-24`                     | `padding: pxToRem(24) !important;`            | `padding: 1.5rem !important;`            |
 | `u-padding-32`                     | `padding: pxToRem(32) !important;`            | `padding: 2rem !important;`              |
+| `u-padding-64`                     | `padding: pxToRem(64) !important;`            | `padding: 4rem !important;`              |
 |                                    |                                               |                                          |
 | `u-padding-inline-0`               | `padding-inline: 0 !important;`               | Stays the same                           |
+| `u-padding-inline-8`               | `padding-inline: pxToRem(8) !important;`      | `padding-inline: 0.5rem !important;`     |
 | `u-padding-inline-12`              | `padding-inline: pxToRem(12) !important;`     | `padding-inline: 0.75rem !important;`    |
+| `u-padding-inline-16`              | `padding-inline: pxToRem(16) !important;`     | `padding-inline: 1rem !important;`       |
+| `u-padding-inline-24`              | `padding-inline: pxToRem(24) !important;`     | `padding-inline: 1.5rem !important;`     |
 | `u-padding-inline-32`              | `padding-inline: pxToRem(32) !important;`     | `padding-inline: 2rem !important;`       |
 |                                    |                                               |                                          |
 | `u-padding-inline-end-0`           | `padding-inline-end: 0 !important;`           | Stays the same                           |
@@ -42,9 +50,15 @@ description: Box Model ensures consistent margins, paddings and borders across o
 | `u-margin-block-start-48`          | `margin-block-start: pxToRem(48);`            | `margin-block-start: 3rem;`              |
 | `u-margin-block-start-52`          | `margin-block-start: pxToRem(52);`            | `margin-block-start: 3.25rem;`           |
 | `u-margin-block-start-100`         | `margin-block-start: pxToRem(100);`           | `margin-block-start: 6.25rem;`           |
+| `u-margin-block-start-200`         | `margin-block-start: pxToRem(200);`           | `margin-block-start: 12.5rem;`           |
+| `u-margin-block-start-300`         | `margin-block-start: pxToRem(300);`           | `margin-block-start: 18.75rem;`          |
 |                                    |                                               |                                          |
 | `u-margin-inline-start-4`          | `margin-inline-start: pxToRem(4);`            | `margin-inline-start: 0.25rem;`          |
+| `u-margin-inline-start-8`          | `margin-inline-start: pxToRem(8);`            | `margin-inline-start: 0.5rem;`           |
+| `u-margin-inline-start-12`         | `margin-inline-start: pxToRem(12);`           | `margin-inline-start: 0.75rem;`          |
 | `u-margin-inline-start-16`         | `margin-inline-start: pxToRem(16);`           | `margin-inline-start: 1rem;`             |
+| `u-margin-inline-start-24`         | `margin-inline-start: pxToRem(24);`           | `margin-inline-start: 1.5rem;`           |
+| `u-margin-inline-start-32`         | `margin-inline-start: pxToRem(32);`           | `margin-inline-start: 2rem;`             |
 |                                    |                                               |                                          |
 | `u-margin-inline-end-16`           | `margin-inline-end: pxToRem(16);`             | `margin-inline-end: 1rem;`               |
 | `u-margin-inline-end-24`           | `margin-inline-end: pxToRem(24);`             | `margin-inline-end: 1.5rem;`             |
diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx
index 348bc39c31..f7da193464 100644
--- a/apps/pink/src/pages/utilities/display.mdx
+++ b/apps/pink/src/pages/utilities/display.mdx
@@ -72,7 +72,7 @@ description: Display controls how an element is displayed, including its alignme
 | `u-max-width-300`          | `max-inline-size: pxToRem(300);`                                  | `max-inline-size: 18.75rem;`                                     |
 | `u-max-width-350`          | `max-inline-size: pxToRem(350);`                                  | `max-inline-size: 21.875rem;`                                    |
 | `u-max-width-400`          | `max-inline-size: pxToRem(400);`                                  | `max-inline-size: 25rem;`                                        |
-| `u-max-width-450`          | `max-inline-size: pxToRem(450);`                                  | `max-inline-size: 28.125rem;`                                        |
+| `u-max-width-450`          | `max-inline-size: pxToRem(450);`                                  | `max-inline-size: 28.125rem;`                                    |
 | `u-max-width-500`          | `max-inline-size: pxToRem(500);`                                  | `max-inline-size: 31.25rem;`                                     |
 | `u-max-width-600`          | `max-inline-size: pxToRem(600);`                                  | `max-inline-size: 37.5rem;`                                      |
 | `u-max-width-650`          | `max-inline-size: pxToRem(650);`                                  | `max-inline-size: 40.625rem;`                                    |
@@ -80,6 +80,7 @@ description: Display controls how an element is displayed, including its alignme
 | `u-max-width-100-percent`  | `max-inline-size:100%;`                                           | Stays the same                                                   |
 |                            |                                                                   |                                                                  |
 | `u-height-100-percent`     | `block-size: 100%;`                                               | Stays the same                                                   |
+| `u-height-auto`            | `block-size: auto !important;`                                    | Stays the same                                                   |
 | `u-full-screen-height`     | `block-size: 100vh; block-size: 100lvh;`                          | Stays the same                                                   |
 |                            |                                                                   |                                                                  |
 | `u-min-height-100`         | `min-block-size: pxToRem(100);`                                   | `min-block-size: 6.25rem;`                                       |
diff --git a/apps/pink/src/pages/utilities/position.mdx b/apps/pink/src/pages/utilities/position.mdx
index 6a7353c0d6..78cd964103 100644
--- a/apps/pink/src/pages/utilities/position.mdx
+++ b/apps/pink/src/pages/utilities/position.mdx
@@ -3,15 +3,23 @@ title: Position
 description: An element's position can be quickly configured by using Position classes.
 ---
 
-| Class                   | Scss Define                      | Translated CSS               |
-| ----------------------- | -------------------------------- | ---------------------------- |
-| `u-position-relative`   | `position: relative;`            | Stays the same               |
-| `u-position-absolute`   | `position: absolute;`            | Stays the same               |
-| `u-position-static`     | `position: static !important;`   | Stays the same               |
-| `u-inset-inline-start-8`| `inset-inline-start: pxToRem(8);`| `inset-inline-start: 0.5rem;`|
-| `u-inset-inline-end-8`  | `inset-inline-end: pxToRem(8);`  | `inset-inline-end: 0.5rem;`  |
-| `u-inset-block-start-8` | `inset-block-start: pxToRem(8);` | `inset-block-start: 0.5rem;` |
-| `u-inset-block-end-8`   | `inset-block-end: pxToRem(8);`   | `inset-block-end: 0.5rem;`   |
+| Class                   | Scss Define                      | Translated CSS                |
+| ----------------------- | -------------------------------- | ----------------------------- |
+| `u-position-relative`   | `position: relative;`            | Stays the same                |
+| `u-position-absolute`   | `position: absolute;`            | Stays the same                |
+| `u-position-static`     | `position: static !important;`   | Stays the same                |
+|                         |                                  |                               |
+| `u-inset-inline-start-4`| `inset-inline-start: pxToRem(4);`| `inset-inline-start: 0.25rem;`|
+| `u-inset-inline-start-8`| `inset-inline-start: pxToRem(8);`| `inset-inline-start: 0.5rem;` |
+|                         |                                  |                               |
+| `u-inset-inline-end-4`  | `inset-inline-end: pxToRem(4);`  | `inset-inline-end: 0.25rem;`  |
+| `u-inset-inline-end-8`  | `inset-inline-end: pxToRem(8);`  | `inset-inline-end: 0.5rem;`   |
+|                         |                                  |                               |
+| `u-inset-block-start-4` | `inset-block-start: pxToRem(4);` | `inset-block-start: 0.25rem;` |
+| `u-inset-block-start-8` | `inset-block-start: pxToRem(8);` | `inset-block-start: 0.5rem;`  |
+|                         |                                  |                               |
+| `u-inset-block-end-4`   | `inset-block-end: pxToRem(4);`   | `inset-block-end: 0.25rem;`   |
+| `u-inset-block-end-8`   | `inset-block-end: pxToRem(8);`   | `inset-block-end: 0.5rem;`    |
 
 ## Z-index Classes
 
diff --git a/apps/pink/src/pages/utilities/text.mdx b/apps/pink/src/pages/utilities/text.mdx
index 9aa6f21031..cf6691713d 100644
--- a/apps/pink/src/pages/utilities/text.mdx
+++ b/apps/pink/src/pages/utilities/text.mdx
@@ -13,6 +13,7 @@ description: Text ensures consistent text size, weight, line height and breaks a
 | `u-text-start`       | `text-align: start;`                              | Stays the same                  |
 | `u-text-center`      | `text-align: center;`                             | Stays the same                  |
 | `u-text-end`         | `text-align: end;`                                | Stays the same                  |
+| `u-line-height-0-7`  | `line-height: 0.7;`                               | Stays the same                  |
 | `u-line-height-1`    | `line-height: 1;`                                 | Stays the same                  |
 | `u-line-height-1-25` | `line-height: 1.25;`                              | Stays the same                  |
 | `u-line-height-1-5`  | `line-height: 1.5;`                               | Stays the same                  |
diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index 880464d334..4a073df92e 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -18,41 +18,7 @@ $input-text-wrapper: ".input-text-wrapper";
   input:where(:not([type="datetime-local"])) { padding-inline-end: calc(var(--button-size) * var(--amount-of-buttons)); }
   [type="text"] { min-block-size:pxToRem(22); } /* use for DIV textbox */
   &:where(.is-with-end-button) {
-    .input-button {
-      --p-text-color: var(--p-text-color-default);
-      --p-bg-color: var(--p-bg-color-default);
-      --p-border-color: var(--p-border-color-default);
-
-      --p-text-color-default: var(--color-neutral-100);
-      --p-bg-color-default: var(--color-neutral-5);
-      --p-border-color-default: var(--color-neutral-30);
-
-      --p-text-color-disabled: var(--color-neutral-50);
-
-      color: hsl(var(--p-text-color));
-      background-color: hsl(var(--p-bg-color));
-      border-inline-start: solid pxToRem(1) hsl(var(--p-border-color));
-
-      position:absolute; inset-block:pxToRem(1); inset-inline-end:pxToRem(1);
-      display:grid; place-content:center; inline-size:pxToRem(46);
-      border-start-end-radius:var(--border-radius-xsmall); border-end-end-radius:var(--border-radius-xsmall);
-
-      [class^=icon-],
-      [class*=" icon-"] { font-size:var(--font-size-1); }
-
-      &:disabled { --p-text-color: var(--p-text-color-disabled); }
-      &:focus-visible { outline:revert; }
-      #{$theme-dark} & {
-        --p-text-color-default: var(--color-neutral-50);
-        --p-bg-color-default: var(--color-neutral-150);
-        --p-border-color-default: var(--color-neutral-150);
-
-        --p-text-color-disabled: var(--color-neutral-100);
-      }
-    }
-  }
-  :where(.button) {
-    position:absolute; inset-block-start:pxToRem(8); inset-inline-end:pxToRem(8);
+    .button { position:absolute; inset-block:pxToRem(8); inset-inline-end:pxToRem(8); }
   }
   .icon-search {
     position:absolute; inset-inline-start:pxToRem(16); inset-block-start:pxToRem(8);
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 39ad6449dd..99dcf0016d 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -22,6 +22,7 @@
 .u-text-start       { text-align:start;   }
 .u-text-center      { text-align:center;  }
 .u-text-end         { text-align:end;     }
+.u-line-height-0-7  { line-height:0.7!important; }
 .u-line-height-1    { line-height:1; }
 .u-line-height-1-25 { line-height:1.25; }
 .u-line-height-1-5  { line-height:1.5; }
@@ -67,9 +68,16 @@
 .u-position-absolute    { position:absolute; }
 .u-position-static      { position:static!important; }
 
+.u-inset-inline-start-4 { inset-inline-start:pxToRem(4);  }
 .u-inset-inline-start-8 { inset-inline-start:pxToRem(8);  }
+
+.u-inset-inline-end-4   { inset-inline-end:pxToRem(4);    }
 .u-inset-inline-end-8   { inset-inline-end:pxToRem(8);    }
+
+.u-inset-block-start-4  { inset-block-start:pxToRem(4);   }
 .u-inset-block-start-8  { inset-block-start:pxToRem(8);   }
+
+.u-inset-block-end-4    { inset-block-end:pxToRem(4);     }
 .u-inset-block-end-8    { inset-block-end:pxToRem(8);     }
 
 .u-z-index-0   { z-index:0;  }
@@ -148,6 +156,7 @@
 .u-max-width-100-percent { max-inline-size:100%; }
 
 .u-height-100-percent { block-size:100%; }
+.u-height-auto        { block-size:auto!important; }
 
 .u-min-height-100   { min-block-size:pxToRem(100); }
 .u-min-height-184   { min-block-size:pxToRem(184); }
@@ -173,13 +182,21 @@
 .u-cross-child-end    { align-self:end;     }
 
 /* box model */
+.u-padding-0              { padding:0!important; }
+.u-padding-8              { padding:pxToRem(8)!important; }
+.u-padding-12             { padding:pxToRem(12)!important; }
+.u-padding-16             { padding:pxToRem(16)!important; }
 .u-padding-24             { padding:pxToRem(24)!important; }
 .u-padding-32             { padding:pxToRem(32)!important; }
 .u-padding-64             { padding:pxToRem(64)!important; }
+
 .u-padding-inline-0       { padding-inline:0!important; }
 .u-padding-inline-8       { padding-inline:pxToRem(8)!important; }
 .u-padding-inline-12      { padding-inline:pxToRem(12)!important; }
+.u-padding-inline-16      { padding-inline:pxToRem(16)!important; }
+.u-padding-inline-24      { padding-inline:pxToRem(24)!important; }
 .u-padding-inline-32      { padding-inline:pxToRem(32)!important; }
+
 .u-padding-inline-end-0   { padding-inline-end:0!important; }
 .u-padding-inline-end-56  { padding-inline-end:pxToRem(56)!important; }
 

From ed5523af6dec09b9514870c1eac441e3f45e20d4 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 21 Mar 2023 23:28:17 +0900
Subject: [PATCH 058/167] -- Input text - New feature - Input field inline
 checkbox - Update demo - input-field.mdx - Add new utility classes - update
 demo of utility class pages - box-model.mdx, position.mdx

---
 apps/pink/src/pages/elements/input-field.mdx  | 131 ++++++++++++++----
 apps/pink/src/pages/utilities/box-model.mdx   |   2 +
 apps/pink/src/pages/utilities/position.mdx    |   8 ++
 .../ui/src/6-elements/form/_text-inputs.scss  |   9 +-
 packages/ui/src/_9-utilities.scss             |  11 ++
 5 files changed, 132 insertions(+), 29 deletions(-)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index beb06b7c0a..0f45e94bf5 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -509,31 +509,106 @@ Helper text provides information and feedback about what to enter in an input. U
 ## Input with All Parameters Applied
 
 <Preview center overflow>
-  <div class="u-width-full-line u-max-width-500">
-    <label class="label is-required">Label</label>
-    <span class="optional">(optional)</span>
-    <button class="tooltip" aria-label="variables info">
-      <span class="icon-info" aria-hidden="true"></span>
-      <span class="tooltip-popup" role="tooltip">
-        Set variables or secret keys that will be passed as env vars to your
-        function at runtime.
-      </span>
-    </button>
-    <div class="input-text-wrapper">
-      <input
-        type="text"
-        class="input-text is-warning u-padding-inline-end-56"
-        placeholder="placeholder text"
-      />
-      <span class="text-counter">
-        <span class="text-counter-count">4</span>
-        <span class="text-counter-separator"></span>
-        <span class="text-counter-max">20</span>
-      </span>
-    </div>
-    <p class="helper u-color-text-warning u-margin-block-start-8">
-      <span class="icon-exclamation" aria-hidden="true"></span>
-      <span class="text">This is a warning</span>
-    </p>
-  </div>
-</Preview>
+    <form class="form u-width-full-line u-max-width-500">
+        <ul class="form-list">
+            <li class="form-item">
+                <label class="label is-required">Label</label>
+                <span class="optional">(optional)</span>
+                <button class="tooltip" aria-label="variables info">
+                  <span class="icon-info" aria-hidden="true"></span>
+                  <span class="tooltip-popup" role="tooltip">
+                    Set variables or secret keys that will be passed as env vars to your
+                    function at runtime.
+                  </span>
+                </button>
+                <div class="input-text-wrapper">
+                  <input
+                    type="text"
+                    class="input-text is-warning u-padding-inline-end-56"
+                    placeholder="placeholder text"
+                  />
+                  <span class="text-counter">
+                    <span class="text-counter-count">4</span>
+                    <span class="text-counter-separator"></span>
+                    <span class="text-counter-max">20</span>
+                  </span>
+                </div>
+                <p class="helper u-color-text-warning u-margin-block-start-8">
+                  <span class="icon-exclamation" aria-hidden="true"></span>
+                  <span class="text">This is a warning</span>
+                </p>
+            </li>
+            <li class="form-item">
+                <label class="label is-required">Label</label>
+                <span class="optional">(optional)</span>
+                <button class="tooltip" aria-label="variables info">
+                    <span class="icon-info" aria-hidden="true"></span>
+                    <span class="tooltip-popup" role="tooltip">
+                        Set variables or secret keys that will be passed as env vars to your
+                        function at runtime.
+                    </span>
+                </button>
+                <div class="input-text-wrapper">
+                    <input
+                        type="text"
+                        class="input-text is-warning u-padding-inline-end-112"
+                        placeholder="placeholder text"
+                    />
+                    <ul class="buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-8">
+                        <li class="buttons-list-item">
+                            <span class="text-counter">
+                                <span class="text-counter-count">4</span>
+                                <span class="text-counter-separator"></span>
+                                <span class="text-counter-max">20</span>
+                            </span>
+                        </li>
+                        <li class="buttons-list-item u-margin-inline-start-8">
+                            <label class="u-flex u-cross-center u-gap-8 u-margin-inline-start-8">
+                                <input type="checkbox" class="is-small" />
+                                <span class="u-x-small u-color-text-gray">NULL</span>
+                            </label>
+                        </li>
+                    </ul>
+                </div>
+                <p class="helper u-color-text-warning u-margin-block-start-8">
+                    <span class="icon-exclamation" aria-hidden="true"></span>
+                    <span class="text">This is a warning</span>
+                </p>
+            </li>
+
+            <li class="form-item">
+                <label class="label is-required">Label</label>
+                <span class="optional">(optional)</span>
+                <button class="tooltip" aria-label="variables info">
+                    <span class="icon-info" aria-hidden="true"></span>
+                    <span class="tooltip-popup" role="tooltip">
+                        Set variables or secret keys that will be passed as env vars to your
+                        function at runtime.
+                    </span>
+                </button>
+                <div class="input-text-wrapper">
+                    <textarea class="input-text is-warning u-padding-block-end-32" placeholder="Type here..."></textarea>
+                    <ul class="buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-8" style="border-end-end-radius:0.0625rem;">
+                        <li class="buttons-list-item">
+                            <span class="text-counter">
+                                <span class="text-counter-count">4</span>
+                                <span class="text-counter-separator"></span>
+                                <span class="text-counter-max">20</span>
+                            </span>
+                        </li>
+                        <li class="buttons-list-item u-margin-inline-start-8">
+                            <label class="u-flex u-cross-center u-gap-8 u-margin-inline-start-8">
+                                <input type="checkbox" class="is-small" />
+                                <span class="u-x-small u-color-text-gray">NULL</span>
+                            </label>
+                        </li>
+                    </ul>
+                </div>
+                <p class="helper u-color-text-warning u-margin-block-start-8">
+                    <span class="icon-exclamation" aria-hidden="true"></span>
+                    <span class="text">This is a warning</span>
+                </p>
+            </li>
+        </ul>
+    </form>
+</Preview>
\ No newline at end of file
diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx
index 85147c80d0..b551c72be5 100644
--- a/apps/pink/src/pages/utilities/box-model.mdx
+++ b/apps/pink/src/pages/utilities/box-model.mdx
@@ -22,11 +22,13 @@ description: Box Model ensures consistent margins, paddings and borders across o
 |                                    |                                               |                                          |
 | `u-padding-inline-end-0`           | `padding-inline-end: 0 !important;`           | Stays the same                           |
 | `u-padding-inline-end-56`          | `padding-inline-end: pxToRem(56) !important;` | `padding-inline-end: 3.5rem !important;` |
+| `u-padding-inline-end-112`         | `padding-inline-end: pxToRem(112) !important;`| `padding-inline-end: 7rem !important;`   |
 |                                    |                                               |                                          |
 | `u-padding-block-12`               | `padding-block: pxToRem(12) !important;`      | `padding-block: 0.75rem !important;`     |
 |                                    |                                               |                                          |
 | `u-padding-block-start-16`         | `padding-block-start: pxToRem(16)!important;` | `padding-block-start: 1rem !important;`  |
 |                                    |                                               |                                          |
+| `u-padding-block-end-32`           | `padding-block-end: pxToRem(32)!important;`   | `padding-block-end: 2rem !important;`    |
 | `u-padding-block-end-56`           | `padding-block-end: pxToRem(56)!important;`   | `padding-block-end: 3.5rem !important;`  |
 |                                    |                                               |                                          |
 |                                    |                                               |                                          |
diff --git a/apps/pink/src/pages/utilities/position.mdx b/apps/pink/src/pages/utilities/position.mdx
index 78cd964103..c41009ae4f 100644
--- a/apps/pink/src/pages/utilities/position.mdx
+++ b/apps/pink/src/pages/utilities/position.mdx
@@ -9,15 +9,23 @@ description: An element's position can be quickly configured by using Position c
 | `u-position-absolute`   | `position: absolute;`            | Stays the same                |
 | `u-position-static`     | `position: static !important;`   | Stays the same                |
 |                         |                                  |                               |
+| `u-inset-inline-start-0`| `inset-inline-start: 0;`         | Stays the same                |
+| `u-inset-inline-start-1`| `inset-inline-start: pxToRem(1);`| `inset-inline-start: 0.0625rem;`|
 | `u-inset-inline-start-4`| `inset-inline-start: pxToRem(4);`| `inset-inline-start: 0.25rem;`|
 | `u-inset-inline-start-8`| `inset-inline-start: pxToRem(8);`| `inset-inline-start: 0.5rem;` |
 |                         |                                  |                               |
+| `u-inset-inline-end-0`  | `inset-inline-end: 0;`           | Stays the same                |
+| `u-inset-inline-end-1`  | `inset-inline-end: pxToRem(1);`  | `inset-inline-end: 0.0625rem;`|
 | `u-inset-inline-end-4`  | `inset-inline-end: pxToRem(4);`  | `inset-inline-end: 0.25rem;`  |
 | `u-inset-inline-end-8`  | `inset-inline-end: pxToRem(8);`  | `inset-inline-end: 0.5rem;`   |
 |                         |                                  |                               |
+| `u-inset-block-start-0` | `inset-block-start: 0;`          | Stays the same                |
+| `u-inset-block-start-1` | `inset-block-start: pxToRem(1);` | `inset-block-start: 0.0625rem;`|
 | `u-inset-block-start-4` | `inset-block-start: pxToRem(4);` | `inset-block-start: 0.25rem;` |
 | `u-inset-block-start-8` | `inset-block-start: pxToRem(8);` | `inset-block-start: 0.5rem;`  |
 |                         |                                  |                               |
+| `u-inset-block-end-0`   | `inset-block-end: 0;`            | Stays the same                |
+| `u-inset-block-end-1`   | `inset-block-end: pxToRem(1);`   | `inset-block-end: 0.0625rem;` |
 | `u-inset-block-end-4`   | `inset-block-end: pxToRem(4);`   | `inset-block-end: 0.25rem;`   |
 | `u-inset-block-end-8`   | `inset-block-end: pxToRem(8);`   | `inset-block-end: 0.5rem;`    |
 
diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index 4a073df92e..a5bd65c9f0 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -27,6 +27,13 @@ $input-text-wrapper: ".input-text-wrapper";
   :where(.options-list) {
     position:absolute; inset-block-start:pxToRem(8); inset-inline-end:pxToRem(16);
   }
+  .buttons-list {
+    --p-bg-input-color: var(--color-neutral-0);
+    background-color: hsl(var(--p-bg-input-color));
+    #{$theme-dark} & {
+      --p-bg-input-color: var(--color-neutral-400);
+    }
+  }
 }
 
 .options-list {
@@ -266,7 +273,7 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
     --p-text-counter-color: var(--color-neutral-50);
     #{$theme-dark} & { --p-text-counter-color: var(--color-neutral-70); }
   }
-  #{$input-text-wrapper} & { position:absolute; inset-block-start:pxToRem(12); inset-inline-end:pxToRem(16); }
+  #{$input-text-wrapper} > & { position:absolute; inset-block-start:pxToRem(12); inset-inline-end:pxToRem(16); }
 }
 
 .wysiwyg {
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 99dcf0016d..1dd9cefdd9 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -68,15 +68,23 @@
 .u-position-absolute    { position:absolute; }
 .u-position-static      { position:static!important; }
 
+.u-inset-inline-start-0 { inset-inline-start:0;  }
+.u-inset-inline-start-1 { inset-inline-start:pxToRem(1);  }
 .u-inset-inline-start-4 { inset-inline-start:pxToRem(4);  }
 .u-inset-inline-start-8 { inset-inline-start:pxToRem(8);  }
 
+.u-inset-inline-end-0   { inset-inline-end:0;    }
+.u-inset-inline-end-1   { inset-inline-end:pxToRem(1);    }
 .u-inset-inline-end-4   { inset-inline-end:pxToRem(4);    }
 .u-inset-inline-end-8   { inset-inline-end:pxToRem(8);    }
 
+.u-inset-block-start-0  { inset-block-start:0;   }
+.u-inset-block-start-1  { inset-block-start:pxToRem(1);   }
 .u-inset-block-start-4  { inset-block-start:pxToRem(4);   }
 .u-inset-block-start-8  { inset-block-start:pxToRem(8);   }
 
+.u-inset-block-end-0    { inset-block-end:0;     }
+.u-inset-block-end-1    { inset-block-end:pxToRem(1);     }
 .u-inset-block-end-4    { inset-block-end:pxToRem(4);     }
 .u-inset-block-end-8    { inset-block-end:pxToRem(8);     }
 
@@ -199,9 +207,12 @@
 
 .u-padding-inline-end-0   { padding-inline-end:0!important; }
 .u-padding-inline-end-56  { padding-inline-end:pxToRem(56)!important; }
+.u-padding-inline-end-112 { padding-inline-end:pxToRem(112)!important; }
 
 .u-padding-block-12       { padding-block:pxToRem(12)!important; }
 .u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; }
+
+.u-padding-block-end-32   { padding-block-end:pxToRem(32)!important; }
 .u-padding-block-end-56   { padding-block-end:pxToRem(56)!important; }
 
 

From 9152195e5fcd1eeba7a42737d5ce629807b25692 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 22 Mar 2023 11:00:04 +0100
Subject: [PATCH 059/167] chore: bump to 0.0.6-rc.4

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 01b6ac5e81..b3c9bb0ca3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.3",
+      "version": "0.0.6-rc.4",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.3",
+      "version": "0.0.6-rc.4",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index ce9c05ce65..35b75f01ce 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.3",
+  "version": "0.0.6-rc.4",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7378cecc64..8a1eea4947 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.3",
+  "version": "0.0.6-rc.4",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From 5c1c9152ab7bd8250496da418706a48d0c2cbcf9 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:00:46 +0900
Subject: [PATCH 060/167] -- Test new feature - update layout scroll on
 main-content - _grid-with-side.scss

---
 apps/kitchensink/users.html                  | 54 ++++++++++----------
 packages/ui/src/8-grids/_grid-with-side.scss | 16 +++---
 2 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index d64d85c003..16fee31c1c 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -8,6 +8,7 @@
 
   <body>
     <main class="grid-with-side" id="main">
+      <div class="alert" style="background-color:red; block-size:100px;"></div>
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
         <div class="top-cover">
@@ -198,34 +199,33 @@ <h1 class="heading-level-4 u-flex u-min-width-0">
             </div>
           </div>
         </div>
+        <footer class="main-footer">
+          <div class="main-footer-start">
+            <ul class="inline-links is-no-padding-first-and-last u-x-small">
+              <li class="inline-links-item">
+                <a href=""><span class="text">version 1.1.1</span></a>
+              </li>
+              <li class="inline-links-item">
+                <a href=""><span class="text">Terms</span></a>
+              </li>
+              <li class="inline-links-item">
+                <a href=""><span class="text">Privacy</span></a>
+              </li>
+            </ul>
+          </div>
+          <div class="main-footer-end">
+            <ul class="inline-links is-no-padding-first-and-last u-x-small">
+              <li class="inline-links-item">
+                <span class="text">ⓒ 2022 Appwrite. All rights reserved.</span>
+              </li>
+              <li class="inline-links-item u-flex u-gap-8">
+                <a href=""><span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github"></span></a>
+                <a href=""><span class="icon-discord" aria-hidden="true" aria-label="Appwrite on Discord"></span></a>
+              </li>
+            </ul>
+          </div>
+        </footer>
       </section>
-      <footer class="main-footer">
-        <div class="main-footer-start">
-          <ul class="inline-links is-no-padding-first-and-last u-x-small">
-            <li class="inline-links-item">
-              <a href=""><span class="text">version 1.1.1</span></a>
-            </li>
-            <li class="inline-links-item">
-              <a href=""><span class="text">Terms</span></a>
-            </li>
-            <li class="inline-links-item">
-              <a href=""><span class="text">Privacy</span></a>
-            </li>
-          </ul>
-        </div>
-        <div class="main-footer-end">
-          <ul class="inline-links is-no-padding-first-and-last u-x-small">
-            <li class="inline-links-item">
-              <span class="text">ⓒ 2022 Appwrite. All rights reserved.</span>
-            </li>
-            <li class="inline-links-item u-flex u-gap-8">
-              <a href=""><span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github"></span></a>
-              <a href=""><span class="icon-discord" aria-hidden="true" aria-label="Appwrite on Discord"></span></a>
-            </li>
-          </ul>
-        </div>
-      </footer>
-
     </main>
     <script type="module" src="/main.js"></script>
   </body>
diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index daf3b0e60b..e787405a84 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -1,7 +1,7 @@
 @use "../abstract" as *;
 .grid-with-side {
   position: relative;
-
+  :where(.alert)        { grid-area:alert;  }
   :where(.main-header)  { grid-area:header; }
   :where(.main-side)    { grid-area:side;   }
   :where(.main-content) { grid-area:main;   }
@@ -18,21 +18,25 @@
   @media #{$break3open} {
     display: grid;
     grid-template-columns: minmax(pxToRem(200), auto) 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas:  "header header"
+    grid-template-rows: auto auto 1fr;
+    grid-template-areas:  "alert alert"
+                          "header header"
                           "side   main"
                           "side   footer";
 
+    block-size:100vh; min-block-size:unset; /* fixed layout size */
+
     &.is-empty-side {
       grid-template-areas:  "header header"
                             "main    main"
                             "footer  footer";
       .main-content > * { padding-inline-start:pxToRem(200); }
     }
-    .main-side { block-size:calc(100vh - var(--main-header-height)); }
+    .main-content { overflow:auto; }
+    .main-side { /* block-size:calc(100vh - var(--main-header-height));*/ }
   }
 }
 
 .main-content { position:relative; /* z-index:1; */ } /* remove z-index, mage nug in modals */
-.main-header { position:sticky; z-index:5; inset-block-start:0; }
-.main-side { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh;}
+.main-header  { position:sticky; z-index:5; inset-block-start:0; }
+.main-side    { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh;}

From daabb7c6d85bf140cf3942d475f43504aa342867 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:15:14 +0900
Subject: [PATCH 061/167] -- Test new feature - update layout scroll on
 main-content - _grid-with-side.scss

---
 packages/ui/src/8-grids/_grid-with-side.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index e787405a84..a9108e7b50 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -24,7 +24,7 @@
                           "side   main"
                           "side   footer";
 
-    block-size:100vh; min-block-size:unset; /* fixed layout size */
+    //block-size:100vh; min-block-size:unset; /* fixed layout size */
 
     &.is-empty-side {
       grid-template-areas:  "header header"
@@ -33,7 +33,7 @@
       .main-content > * { padding-inline-start:pxToRem(200); }
     }
     .main-content { overflow:auto; }
-    .main-side { /* block-size:calc(100vh - var(--main-header-height));*/ }
+    .main-side { block-size:calc(100vh - var(--main-header-height)); }
   }
 }
 

From b21051ee851cb6eed3afc04c9ed0d23aaa476771 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:19:41 +0900
Subject: [PATCH 062/167] -- Test new feature - update layout scroll on
 main-content - _grid-with-side.scss

---
 apps/kitchensink/users.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index 16fee31c1c..54b2b9d4b1 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -2,13 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
     <title>@appwrite/kitchensink - user demo</title>
   </head>
 
   <body>
     <main class="grid-with-side" id="main">
-      <div class="alert" style="background-color:red; block-size:100px;"></div>
+      <div class="alert" style="background-color:green; block-size:100px;"></div>
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
         <div class="top-cover">

From cb538d6d5629ad207f6e7f37434bba0166f7313e Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:22:44 +0900
Subject: [PATCH 063/167] -- Test new feature - update layout scroll on
 main-content - _grid-with-side.scss

---
 apps/kitchensink/users.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index 54b2b9d4b1..ca0783f82e 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>@appwrite/kitchensink - user demo</title>
   </head>
 

From 019cf26b9254360e5265ae83f7a769457d95ae9e Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:23:10 +0900
Subject: [PATCH 064/167] -- Test new feature - update layout scroll on
 main-content - _grid-with-side.scss

---
 apps/kitchensink/users.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index ca0783f82e..d4412cac6a 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -9,7 +9,7 @@
 
   <body>
     <main class="grid-with-side" id="main">
-      <div class="alert" style="background-color:green; block-size:100px;"></div>
+      <div class="alert" style="background-color:blue; block-size:100px;"></div>
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
         <div class="top-cover">

From 581a5312b128abe3fe79f385be007c961b5b3496 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:26:06 +0900
Subject: [PATCH 065/167] -- test

---
 packages/ui/src/8-grids/_grid-with-side.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index a9108e7b50..43ae72da51 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -40,3 +40,7 @@
 .main-content { position:relative; /* z-index:1; */ } /* remove z-index, mage nug in modals */
 .main-header  { position:sticky; z-index:5; inset-block-start:0; }
 .main-side    { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh;}
+
+body {
+  touch-action: none!important;
+}
\ No newline at end of file

From 49ac49d91b65cef36091d2be6283f84fbf10e61b Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:26:18 +0900
Subject: [PATCH 066/167] -- test

---
 apps/kitchensink/users.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index d4412cac6a..e206a05ff1 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -9,7 +9,7 @@
 
   <body>
     <main class="grid-with-side" id="main">
-      <div class="alert" style="background-color:blue; block-size:100px;"></div>
+      <div class="alert" style="background-color:brown; block-size:100px;"></div>
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
         <div class="top-cover">

From c8dd6b08fd57ff9d9209a3e710d9e31cb4c3b963 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:29:20 +0900
Subject: [PATCH 067/167] -- test

---
 packages/ui/src/8-grids/_grid-with-side.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 43ae72da51..a1da89460e 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -24,7 +24,7 @@
                           "side   main"
                           "side   footer";
 
-    //block-size:100vh; min-block-size:unset; /* fixed layout size */
+    block-size:100vh; min-block-size:unset; /* fixed layout size */
 
     &.is-empty-side {
       grid-template-areas:  "header header"
@@ -33,7 +33,7 @@
       .main-content > * { padding-inline-start:pxToRem(200); }
     }
     .main-content { overflow:auto; }
-    .main-side { block-size:calc(100vh - var(--main-header-height)); }
+    //.main-side { block-size:calc(100vh - var(--main-header-height)); }
   }
 }
 

From 54c57202fae82af8997efc3b79ad417abd2411e1 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:29:59 +0900
Subject: [PATCH 068/167] -- test

---
 apps/kitchensink/users.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index e206a05ff1..e9ae2f3acd 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -9,7 +9,7 @@
 
   <body>
     <main class="grid-with-side" id="main">
-      <div class="alert" style="background-color:brown; block-size:100px;"></div>
+      <div class="alert" style="background-color:red; block-size:100px;"></div>
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
         <div class="top-cover">

From 686451d079ea51c69cdf67b456a93148ce69f1b1 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:35:34 +0900
Subject: [PATCH 069/167] -- test

---
 packages/ui/src/8-grids/_grid-with-side.scss | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index a1da89460e..cf97cdca07 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -5,14 +5,13 @@
   :where(.main-header)  { grid-area:header; }
   :where(.main-side)    { grid-area:side;   }
   :where(.main-content) { grid-area:main;   }
-  :where(.main-footer)  { grid-area:footer; }
 
   @media #{$break1}, #{$break2} {
     .main-side { display:none; }
 
     &:where(.is-open) {
       .main-side { display:block; position:static; }
-      .main-content, .main-footer { display:none; }
+      .main-content { display:none; }
     }
   }
   @media #{$break3open} {
@@ -21,15 +20,13 @@
     grid-template-rows: auto auto 1fr;
     grid-template-areas:  "alert alert"
                           "header header"
-                          "side   main"
-                          "side   footer";
+                          "side   main";
 
     block-size:100vh; min-block-size:unset; /* fixed layout size */
 
     &.is-empty-side {
       grid-template-areas:  "header header"
-                            "main    main"
-                            "footer  footer";
+                            "main    main";
       .main-content > * { padding-inline-start:pxToRem(200); }
     }
     .main-content { overflow:auto; }

From 14860e34407590bc690c7d72acd932784293a482 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:35:39 +0900
Subject: [PATCH 070/167] -- test

---
 apps/kitchensink/users.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index e9ae2f3acd..ca0783f82e 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -9,7 +9,7 @@
 
   <body>
     <main class="grid-with-side" id="main">
-      <div class="alert" style="background-color:red; block-size:100px;"></div>
+      <div class="alert" style="background-color:green; block-size:100px;"></div>
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
         <div class="top-cover">

From 26ea30bbce43997a4c44fd4f5e4c339d6ae40a5d Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:39:34 +0900
Subject: [PATCH 071/167] -- test

---
 apps/kitchensink/users.html                  | 2 +-
 packages/ui/src/8-grids/_grid-with-side.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index ca0783f82e..d4412cac6a 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -9,7 +9,7 @@
 
   <body>
     <main class="grid-with-side" id="main">
-      <div class="alert" style="background-color:green; block-size:100px;"></div>
+      <div class="alert" style="background-color:blue; block-size:100px;"></div>
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
         <div class="top-cover">
diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index cf97cdca07..92e9866ee2 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -22,7 +22,7 @@
                           "header header"
                           "side   main";
 
-    block-size:100vh; min-block-size:unset; /* fixed layout size */
+    block-size:100vh; block-size:100lvh; min-block-size:unset; /* fixed layout size */
 
     &.is-empty-side {
       grid-template-areas:  "header header"

From 56c7194b48dc8a7dc7b2ab47dbab0126ed6dbc03 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:53:37 +0900
Subject: [PATCH 072/167] -- test

---
 packages/ui/src/8-grids/_grid-with-side.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 92e9866ee2..45ede9f569 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -22,7 +22,7 @@
                           "header header"
                           "side   main";
 
-    block-size:100vh; block-size:100lvh; min-block-size:unset; /* fixed layout size */
+    block-size:100vh; block-size:100lvh; min-block-size:unset!important; /* fixed layout size */
 
     &.is-empty-side {
       grid-template-areas:  "header header"
@@ -36,7 +36,7 @@
 
 .main-content { position:relative; /* z-index:1; */ } /* remove z-index, mage nug in modals */
 .main-header  { position:sticky; z-index:5; inset-block-start:0; }
-.main-side    { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh;}
+.main-side    { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh; overflow:hidden;}
 
 body {
   touch-action: none!important;

From cad825dea53665f01cdb7b0076f6dd9d0c9f0789 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 19:53:53 +0900
Subject: [PATCH 073/167] -- test

---
 apps/kitchensink/users.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index d4412cac6a..e9ae2f3acd 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -9,7 +9,7 @@
 
   <body>
     <main class="grid-with-side" id="main">
-      <div class="alert" style="background-color:blue; block-size:100px;"></div>
+      <div class="alert" style="background-color:red; block-size:100px;"></div>
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
         <div class="top-cover">

From c45fcc3c6eb27771f538491161d18debaeac3a34 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 22 Mar 2023 20:01:11 +0900
Subject: [PATCH 074/167] -- test

---
 packages/ui/src/8-grids/_grid-with-side.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 45ede9f569..88f815b34f 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -22,7 +22,9 @@
                           "header header"
                           "side   main";
 
-    block-size:100vh; block-size:100lvh; min-block-size:unset!important; /* fixed layout size */
+    /* fixed layout size */
+    block-size:100vh; block-size:100lvh;
+    max-block-size:100vh; max-block-size:100lvh;
 
     &.is-empty-side {
       grid-template-areas:  "header header"

From 3c2f5dce9a74fd72a1b9325ca5ecce4bd372b707 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 23 Mar 2023 15:12:59 +0900
Subject: [PATCH 075/167] -- Tag - update color tag in dark-mode

- update location of footer
---
 apps/pink/src/layouts/Layout.astro   | 46 ++++++++++++++--------------
 packages/ui/src/6-elements/_tag.scss |  2 +-
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/apps/pink/src/layouts/Layout.astro b/apps/pink/src/layouts/Layout.astro
index 73da828e8f..098a8d42bd 100644
--- a/apps/pink/src/layouts/Layout.astro
+++ b/apps/pink/src/layouts/Layout.astro
@@ -153,31 +153,31 @@ const titleFallback = "Pink Design - Appwrite's Design System";
             </>
           )
         }
+  <footer class="main-footer u-margin-block-start-48">
+    <div class="main-footer-start">
+      <ul class="inline-links is-no-padding-first-and-last u-x-small">
+        <li class="inline-links-item">
+          <a href="https://appwrite.io/policy/terms" target="_blank"
+          ><span class="text">Terms</span>
+          </a>
+        </li>
+        <li class="inline-links-item">
+          <a href="https://appwrite.io/policy/privacy" target="_blank"
+          ><span class="text">Privacy</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="main-footer-end">
+      <ul class="inline-links is-no-padding-first-and-last u-x-small">
+        <li class="inline-links-item">
+          <span class="text">ⓒ 2023 Appwrite. All rights reserved.</span>
+        </li>
+      </ul>
+    </div>
+  </footer>
       </main>
 
-      <footer class="main-footer u-margin-block-start-48">
-        <div class="main-footer-start">
-          <ul class="inline-links is-no-padding-first-and-last u-x-small">
-            <li class="inline-links-item">
-              <a href="https://appwrite.io/policy/terms" target="_blank"
-                ><span class="text">Terms</span>
-              </a>
-            </li>
-            <li class="inline-links-item">
-              <a href="https://appwrite.io/policy/privacy" target="_blank"
-                ><span class="text">Privacy</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div class="main-footer-end">
-          <ul class="inline-links is-no-padding-first-and-last u-x-small">
-            <li class="inline-links-item">
-              <span class="text">ⓒ 2023 Appwrite. All rights reserved.</span>
-            </li>
-          </ul>
-        </div>
-      </footer>
     </div>
 
     <script is:inline>
diff --git a/packages/ui/src/6-elements/_tag.scss b/packages/ui/src/6-elements/_tag.scss
index 5cd2e8443b..b24623dc33 100644
--- a/packages/ui/src/6-elements/_tag.scss
+++ b/packages/ui/src/6-elements/_tag.scss
@@ -94,7 +94,7 @@
   /* Theme Dark */
   #{$theme-dark} & {
     --p-tag-text-color-default:  var(--color-neutral-50);
-    --p-tag-bg-color-default:    var(--color-neutral-200);
+    --p-tag-bg-color-default:    var(--color-neutral-150);
 
     --p-tag-text-color-success:  var(--color-success-100);
     --p-tag-bg-color-success:    var(--color-success-200);

From 2e883dfd2f686f9b11948184a8fb7135e2872266 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 09:41:11 +0900
Subject: [PATCH 076/167] -- Label Card - update size of radio to small via
 state class "is-small"

---
 apps/pink/src/pages/components/label-card.mdx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/pink/src/pages/components/label-card.mdx b/apps/pink/src/pages/components/label-card.mdx
index 6f9cead73b..6d33675669 100644
--- a/apps/pink/src/pages/components/label-card.mdx
+++ b/apps/pink/src/pages/components/label-card.mdx
@@ -10,7 +10,7 @@ description: A representation of content uploaded as an attachment.
         <li>
             <label class="card is-allow-focus u-cursor-pointer" style="--card-padding:1rem">
                 <div class="u-flex u-gap-16">
-                    <input type="radio" name="plan" />
+                    <input class="is-small" type="radio" name="plan" />
                     <div class="u-flex u-flex-vertical u-gap-4">
                         <h4 class="body-text-2">Pro plan</h4>
                         <p class="u-color-text-gray">For projects you want to scale easily. <b>$25/month + Add-ons</b></p>
@@ -22,7 +22,7 @@ description: A representation of content uploaded as an attachment.
         <li>
             <label class="card is-allow-focus u-cursor-pointer" style="--card-padding:1rem">
                 <div class="u-flex u-gap-16">
-                    <input type="radio" name="plan" />
+                    <input class="is-small" type="radio" name="plan" />
                     <div class="u-flex u-flex-vertical u-gap-4">
                         <h4 class="body-text-2">Free plan</h4>
                         <p class="u-color-text-gray">For personal, passion projects. <b>Totally free</b></p>
@@ -34,7 +34,7 @@ description: A representation of content uploaded as an attachment.
         <li>
             <label class="card" style="--card-padding:1rem">
                 <div class="u-flex u-gap-16">
-                    <input type="radio" name="plan" disabled />
+                    <input class="is-small" type="radio" name="plan" disabled />
                     <div class="u-flex u-flex-vertical u-gap-4 u-opacity-50">
                         <h4 class="body-text-2">Disabled plan</h4>
                         <p class="u-color-text-gray"><b>Unlimited</b></p>
@@ -53,7 +53,7 @@ description: A representation of content uploaded as an attachment.
     <ul class="grid-box" style="--p-grid-item-size:10em; --p-grid-item-size-small-screens:10rem;">
         <li>
             <label class="card u-height-100-percent u-flex u-flex-vertical u-gap-16" style="--card-padding:0.5rem;">
-                <input type="radio" name="country" disabled />
+                <input class="is-small" type="radio" name="country" disabled />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/netherlands.svg" width="40" height="30" class="u-margin-inline-auto u-opacity-20" alt="" />
                     <p class="u-opacity-20" >Netherlands</p>
@@ -66,7 +66,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input type="radio" name="country" />
+                <input class="is-small" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/united-kingdom.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -75,7 +75,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input type="radio" name="country" />
+                <input class="is-small" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/canada.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -84,7 +84,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input type="radio" name="country" />
+                <input class="is-small" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/usa.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -93,7 +93,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input type="radio" name="country" />
+                <input class="is-small" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/germany.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -102,7 +102,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input type="radio" name="country" />
+                <input class="is-small" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/india.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -111,7 +111,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input type="radio" name="country" />
+                <input class="is-small" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/netherlands.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Singapore</p>

From ef2336cacf4ee08854f2af5a54af04ba657e6e1c Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 09:47:59 +0900
Subject: [PATCH 077/167] -- Label Card - update align via margin-top

---
 apps/pink/src/pages/components/label-card.mdx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/pink/src/pages/components/label-card.mdx b/apps/pink/src/pages/components/label-card.mdx
index 6d33675669..6162ea0507 100644
--- a/apps/pink/src/pages/components/label-card.mdx
+++ b/apps/pink/src/pages/components/label-card.mdx
@@ -10,7 +10,7 @@ description: A representation of content uploaded as an attachment.
         <li>
             <label class="card is-allow-focus u-cursor-pointer" style="--card-padding:1rem">
                 <div class="u-flex u-gap-16">
-                    <input class="is-small" type="radio" name="plan" />
+                    <input class="is-small u-margin-block-start-2" type="radio" name="plan" />
                     <div class="u-flex u-flex-vertical u-gap-4">
                         <h4 class="body-text-2">Pro plan</h4>
                         <p class="u-color-text-gray">For projects you want to scale easily. <b>$25/month + Add-ons</b></p>
@@ -22,7 +22,7 @@ description: A representation of content uploaded as an attachment.
         <li>
             <label class="card is-allow-focus u-cursor-pointer" style="--card-padding:1rem">
                 <div class="u-flex u-gap-16">
-                    <input class="is-small" type="radio" name="plan" />
+                    <input class="is-small u-margin-block-start-2" type="radio" name="plan" />
                     <div class="u-flex u-flex-vertical u-gap-4">
                         <h4 class="body-text-2">Free plan</h4>
                         <p class="u-color-text-gray">For personal, passion projects. <b>Totally free</b></p>
@@ -34,7 +34,7 @@ description: A representation of content uploaded as an attachment.
         <li>
             <label class="card" style="--card-padding:1rem">
                 <div class="u-flex u-gap-16">
-                    <input class="is-small" type="radio" name="plan" disabled />
+                    <input class="is-small u-margin-block-start-2" type="radio" name="plan" disabled />
                     <div class="u-flex u-flex-vertical u-gap-4 u-opacity-50">
                         <h4 class="body-text-2">Disabled plan</h4>
                         <p class="u-color-text-gray"><b>Unlimited</b></p>
@@ -53,7 +53,7 @@ description: A representation of content uploaded as an attachment.
     <ul class="grid-box" style="--p-grid-item-size:10em; --p-grid-item-size-small-screens:10rem;">
         <li>
             <label class="card u-height-100-percent u-flex u-flex-vertical u-gap-16" style="--card-padding:0.5rem;">
-                <input class="is-small" type="radio" name="country" disabled />
+                <input class="is-small u-margin-block-start-2" type="radio" name="country" disabled />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/netherlands.svg" width="40" height="30" class="u-margin-inline-auto u-opacity-20" alt="" />
                     <p class="u-opacity-20" >Netherlands</p>
@@ -66,7 +66,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input class="is-small" type="radio" name="country" />
+                <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/united-kingdom.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -75,7 +75,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input class="is-small" type="radio" name="country" />
+                <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/canada.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -84,7 +84,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input class="is-small" type="radio" name="country" />
+                <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/usa.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -93,7 +93,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input class="is-small" type="radio" name="country" />
+                <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/germany.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -102,7 +102,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input class="is-small" type="radio" name="country" />
+                <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/india.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Netherlands</p>
@@ -111,7 +111,7 @@ description: A representation of content uploaded as an attachment.
         </li>
         <li>
             <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
-                <input class="is-small" type="radio" name="country" />
+                <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/netherlands.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
                     <p>Singapore</p>

From cc5445ba13d66b95d4a6b47685baae0966047e7f Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 10:05:55 +0900
Subject: [PATCH 078/167] -- Input field inline checkbox - Chen QA

---
 apps/pink/src/pages/elements/input-field.mdx      | 4 ++--
 packages/ui/src/6-elements/form/_text-inputs.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index 0f45e94bf5..baf2a93b6d 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -565,7 +565,7 @@ Helper text provides information and feedback about what to enter in an input. U
                         <li class="buttons-list-item u-margin-inline-start-8">
                             <label class="u-flex u-cross-center u-gap-8 u-margin-inline-start-8">
                                 <input type="checkbox" class="is-small" />
-                                <span class="u-x-small u-color-text-gray">NULL</span>
+                                <span class="eyebrow-heading-3 u-x-small u-color-text-gray">NULL</span>
                             </label>
                         </li>
                     </ul>
@@ -599,7 +599,7 @@ Helper text provides information and feedback about what to enter in an input. U
                         <li class="buttons-list-item u-margin-inline-start-8">
                             <label class="u-flex u-cross-center u-gap-8 u-margin-inline-start-8">
                                 <input type="checkbox" class="is-small" />
-                                <span class="u-x-small u-color-text-gray">NULL</span>
+                                <span class="eyebrow-heading-3 u-x-small u-color-text-gray">NULL</span>
                             </label>
                         </li>
                     </ul>
diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index a5bd65c9f0..0bc35e3ffd 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -113,7 +113,7 @@ textarea {
 
 
   display:block; inline-size:100%; outline:none;
-  padding-block:pxToRem(9.5); padding-inline:pxToRem(16);
+  padding-block:pxToRem(9.5); padding-inline:pxToRem(12);
   color:hsl(var(--p-text-color)); line-height:1.3572; font-weight:400;
   background-color:hsl(var(--p-bg-color));
   border:solid pxToRem(1) hsl(var(--p-border-color)); border-radius:var(--border-radius-xsmall);

From db274bfc7ff2385b20fb092958e0727a47f52eb1 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 12:42:58 +0900
Subject: [PATCH 079/167] -- Toggle Button - update border color - Carla QA

---
 packages/ui/src/7-components/_toggle-button.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_toggle-button.scss b/packages/ui/src/7-components/_toggle-button.scss
index 3ab98d5e26..7f0bb271a5 100644
--- a/packages/ui/src/7-components/_toggle-button.scss
+++ b/packages/ui/src/7-components/_toggle-button.scss
@@ -1,6 +1,7 @@
 @use '../abstract' as *;
 .toggle-button {
   --p-icon-toggle-bg-color: var(--color-neutral-0);
+  --p-icon-toggle-border-color: var(--color-neutral-30);
 
   --p-icon-text-color: var(--p-icon-text-color-default);
   --p-icon-text-color-default: var(--color-neutral-100);
@@ -13,7 +14,7 @@
   background-color: hsl(var(--p-icon-toggle-bg-color));
   &-list {
     display:flex; gap:pxToRem(8); padding:pxToRem(2);
-    border:solid pxToRem(1) hsl(var(--color-border)); border-radius:var(--border-radius-xsmall);
+    border:solid pxToRem(1) hsl(var(--p-icon-toggle-border-color)); border-radius:var(--border-radius-xsmall);
   }
   &-item {}
   &-element {
@@ -29,6 +30,7 @@
 
   #{$theme-dark} & {
     --p-icon-toggle-bg-color: var(--color-neutral-300);
+    --p-icon-toggle-border-color: var(--color-neutral-150);
 
     --p-icon-text-color-default: var(--color-neutral-50);
     --p-icon-text-color-didabled: var(--color-neutral-120);

From 3b9744d53707c2ffb36a5de2952c496e01ebd99e Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 12:50:51 +0900
Subject: [PATCH 080/167] -- Pagination - fix HTML characters - Sara QA

---
 apps/pink/src/pages/layout/pagination.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/pink/src/pages/layout/pagination.mdx b/apps/pink/src/pages/layout/pagination.mdx
index ca22937dae..5577d1adca 100644
--- a/apps/pink/src/pages/layout/pagination.mdx
+++ b/apps/pink/src/pages/layout/pagination.mdx
@@ -24,7 +24,7 @@ description: Pagination allows you to break up content that doesn't fit on a sin
           class="button is-text /*u-hide*/"
           aria-label="show prev 5 pages"
         >
-          <span class="icon">···</span>
+          <span class="icon">...</span>
         </button>
       </li>
       <li class="pagination-item">
@@ -49,7 +49,7 @@ description: Pagination allows you to break up content that doesn't fit on a sin
       </li>
       <li class="pagination-item">
         <button class="button is-text" aria-label="show next 5 pages">
-          <span class="icon">···</span>
+          <span class="icon">...</span>
         </button>
       </li>
       <li class="pagination-item">

From 9fef8929a80d0a06d47fdf97a18e0769b6be55f5 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 17:48:36 +0900
Subject: [PATCH 081/167] -- Label card - update border-radius (Carla QA)

---
 apps/pink/src/pages/components/label-card.mdx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/pink/src/pages/components/label-card.mdx b/apps/pink/src/pages/components/label-card.mdx
index 6162ea0507..ddfb9685ca 100644
--- a/apps/pink/src/pages/components/label-card.mdx
+++ b/apps/pink/src/pages/components/label-card.mdx
@@ -8,7 +8,7 @@ description: A representation of content uploaded as an attachment.
 <Preview center>
     <ul class="u-flex u-flex-vertical u-gap-24 u-max-width-350">
         <li>
-            <label class="card is-allow-focus u-cursor-pointer" style="--card-padding:1rem">
+            <label class="card is-allow-focus u-cursor-pointer" style="--card-padding:1rem; --card-border-radius:var(--border-radius-small);">
                 <div class="u-flex u-gap-16">
                     <input class="is-small u-margin-block-start-2" type="radio" name="plan" />
                     <div class="u-flex u-flex-vertical u-gap-4">
@@ -20,7 +20,7 @@ description: A representation of content uploaded as an attachment.
             </label>
         </li>
         <li>
-            <label class="card is-allow-focus u-cursor-pointer" style="--card-padding:1rem">
+            <label class="card is-allow-focus u-cursor-pointer" style="--card-padding:1rem; --card-border-radius:var(--border-radius-small);">
                 <div class="u-flex u-gap-16">
                     <input class="is-small u-margin-block-start-2" type="radio" name="plan" />
                     <div class="u-flex u-flex-vertical u-gap-4">
@@ -32,7 +32,7 @@ description: A representation of content uploaded as an attachment.
             </label>
         </li>
         <li>
-            <label class="card" style="--card-padding:1rem">
+            <label class="card" style="--card-padding:1rem; --card-border-radius:var(--border-radius-small);">
                 <div class="u-flex u-gap-16">
                     <input class="is-small u-margin-block-start-2" type="radio" name="plan" disabled />
                     <div class="u-flex u-flex-vertical u-gap-4 u-opacity-50">
@@ -52,7 +52,7 @@ description: A representation of content uploaded as an attachment.
 <Preview noFlex>
     <ul class="grid-box" style="--p-grid-item-size:10em; --p-grid-item-size-small-screens:10rem;">
         <li>
-            <label class="card u-height-100-percent u-flex u-flex-vertical u-gap-16" style="--card-padding:0.5rem;">
+            <label class="card u-height-100-percent u-flex u-flex-vertical u-gap-16" style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);">
                 <input class="is-small u-margin-block-start-2" type="radio" name="country" disabled />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/netherlands.svg" width="40" height="30" class="u-margin-inline-auto u-opacity-20" alt="" />
@@ -65,7 +65,7 @@ description: A representation of content uploaded as an attachment.
             </label>
         </li>
         <li>
-            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
+            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);">
                 <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/united-kingdom.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
@@ -74,7 +74,7 @@ description: A representation of content uploaded as an attachment.
             </label>
         </li>
         <li>
-            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
+            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);">
                 <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/canada.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
@@ -83,7 +83,7 @@ description: A representation of content uploaded as an attachment.
             </label>
         </li>
         <li>
-            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
+            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);">
                 <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/usa.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
@@ -92,7 +92,7 @@ description: A representation of content uploaded as an attachment.
             </label>
         </li>
         <li>
-            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
+            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);">
                 <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/germany.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
@@ -101,7 +101,7 @@ description: A representation of content uploaded as an attachment.
             </label>
         </li>
         <li>
-            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
+            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);">
                 <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/india.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />
@@ -110,7 +110,7 @@ description: A representation of content uploaded as an attachment.
             </label>
         </li>
         <li>
-            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem;">
+            <label class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer" style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);">
                 <input class="is-small u-margin-block-start-2" type="radio" name="country" />
                 <div class="u-flex u-flex-vertical u-gap-12 u-text-center">
                     <img src="/flags/netherlands.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />

From f37681c8d138f2f78fc838a81e57b2844212266e Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 18:50:35 +0900
Subject: [PATCH 082/167] -- Form - add variable for form-list gap

---
 packages/ui/src/6-elements/form/_form.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/6-elements/form/_form.scss b/packages/ui/src/6-elements/form/_form.scss
index 00a24795bb..f4a4ed267c 100644
--- a/packages/ui/src/6-elements/form/_form.scss
+++ b/packages/ui/src/6-elements/form/_form.scss
@@ -17,7 +17,10 @@
     border-block-start:solid pxToRem(1) hsl(var(--color-border));
   }
   &-list {
-    display:grid; gap:pxToRem(24);
+    $gap: pxToRem(24);
+    --p-form-list-gap:var(--form-list-gap, #{$gap});
+    display:grid; gap:var(--p-form-list-gap);
+    
     &.is-multiple { grid-template-columns: repeat(auto-fit, minmax(pxToRem(180), 1fr)); }
   }
   &-item {

From b3d734862683d648581b11b3006dcf0e05711746 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 18:57:29 +0900
Subject: [PATCH 083/167] -- Text inputs - fixed end side icon location to 12px

---
 packages/ui/src/6-elements/form/_text-inputs.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index 0bc35e3ffd..3db40aad1f 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -25,7 +25,7 @@ $input-text-wrapper: ".input-text-wrapper";
     font-size:pxToRem(19); pointer-events:none;
   }
   :where(.options-list) {
-    position:absolute; inset-block-start:pxToRem(8); inset-inline-end:pxToRem(16);
+    position:absolute; inset-block-start:pxToRem(8); inset-inline-end:pxToRem(12);
   }
   .buttons-list {
     --p-bg-input-color: var(--color-neutral-0);
@@ -232,7 +232,7 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
     &:focus { outline:unset; }
   }
   :where([class*="icon"]) {
-    position:absolute; inset-block-start:pxToRem(10); inset-inline-end:pxToRem(16);
+    position:absolute; inset-block-start:pxToRem(10); inset-inline-end:pxToRem(12);
     pointer-events:none; color:hsl(var(--p-text-color)); line-height:1;
   }
 }

From ef06cab60024540a50548626a727e3866e42f7f2 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 18:57:35 +0900
Subject: [PATCH 084/167] -- Text inputs - fixed end side icon location to 12px

---
 packages/ui/src/6-elements/form/_form.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/6-elements/form/_form.scss b/packages/ui/src/6-elements/form/_form.scss
index f4a4ed267c..abd92b7560 100644
--- a/packages/ui/src/6-elements/form/_form.scss
+++ b/packages/ui/src/6-elements/form/_form.scss
@@ -20,7 +20,7 @@
     $gap: pxToRem(24);
     --p-form-list-gap:var(--form-list-gap, #{$gap});
     display:grid; gap:var(--p-form-list-gap);
-    
+
     &.is-multiple { grid-template-columns: repeat(auto-fit, minmax(pxToRem(180), 1fr)); }
   }
   &-item {

From d65ab451287973e1fa867d78d16c846bed7410e2 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 27 Mar 2023 19:17:05 +0900
Subject: [PATCH 085/167] -- Modal - Fix inner-modal issue effected from
 wrapper modal

---
 packages/ui/src/7-components/_modal.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_modal.scss b/packages/ui/src/7-components/_modal.scss
index 20e1d93d12..de9c3a1159 100644
--- a/packages/ui/src/7-components/_modal.scss
+++ b/packages/ui/src/7-components/_modal.scss
@@ -65,7 +65,7 @@
     }
   }
   &.is-separate-header {
-    .modal-header {
+    > .modal-form > .modal-header {
       padding: var(--p-modal-padding);
       padding-block-start: 0;
       border-block-end: solid pxToRem(1) hsl(var(--color-border));

From 4232519750552190639f3c6162b3727ff5dac839 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 27 Mar 2023 13:18:04 +0200
Subject: [PATCH 086/167] chore: bump to rc.5

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b3c9bb0ca3..51ea37a118 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.4",
+      "version": "0.0.6-rc.5",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.4",
+      "version": "0.0.6-rc.5",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 35b75f01ce..4b630c98e1 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.4",
+  "version": "0.0.6-rc.5",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8a1eea4947..f33390f108 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.4",
+  "version": "0.0.6-rc.5",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From cb21a92ec8e2bc9440f9ced7cd6225fecc8b9d24 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 29 Mar 2023 16:17:18 +0900
Subject: [PATCH 087/167] -- Footer - fix footer location

---
 packages/ui/src/8-grids/_grid-with-side.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 88f815b34f..e9bcdc7516 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -36,7 +36,7 @@
   }
 }
 
-.main-content { position:relative; /* z-index:1; */ } /* remove z-index, mage nug in modals */
+.main-content { position:relative; display:flex; flex-direction:column; /* z-index:1; */ } /* remove z-index, mage nug in modals */
 .main-header  { position:sticky; z-index:5; inset-block-start:0; }
 .main-side    { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh; overflow:hidden;}
 

From 1c7c05e3bfd14beae2009878e1a40fd7323f5c01 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 29 Mar 2023 16:19:01 +0900
Subject: [PATCH 088/167] -- Footer - fix footer location

---
 packages/ui/src/8-grids/_grid-with-side.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index e9bcdc7516..8c79251e85 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -36,7 +36,10 @@
   }
 }
 
-.main-content { position:relative; display:flex; flex-direction:column; /* z-index:1; */ } /* remove z-index, mage nug in modals */
+.main-content {
+  position:relative; display:flex; flex-direction:column; /* z-index:1; */
+  > * { flex-shrink:0; }
+} /* remove z-index, mage nug in modals */
 .main-header  { position:sticky; z-index:5; inset-block-start:0; }
 .main-side    { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh; overflow:hidden;}
 

From 1fc17ae2d969f396c69876cbd4022c92fc44e9fb Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 29 Mar 2023 18:47:37 +0900
Subject: [PATCH 089/167] -- Style fixes - Chen QA

---
 apps/pink/src/pages/elements/input-field.mdx  |  6 +--
 apps/pink/src/pages/utilities/box-model.mdx   |  3 +-
 apps/pink/src/pages/utilities/position.mdx    | 54 ++++++++++---------
 .../6-elements/form/_radio-and-checkbox.scss  |  2 +-
 .../ui/src/7-components/_buttons-list.scss    |  7 ++-
 packages/ui/src/7-components/_modal.scss      |  3 +-
 packages/ui/src/_9-utilities.scss             |  8 ++-
 7 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index baf2a93b6d..d4a3b5d6b3 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -551,10 +551,10 @@ Helper text provides information and feedback about what to enter in an input. U
                 <div class="input-text-wrapper">
                     <input
                         type="text"
-                        class="input-text is-warning u-padding-inline-end-112"
+                        class="input-text is-warning u-padding-inline-end-120"
                         placeholder="placeholder text"
                     />
-                    <ul class="buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-8">
+                    <ul class="buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
                         <li class="buttons-list-item">
                             <span class="text-counter">
                                 <span class="text-counter-count">4</span>
@@ -588,7 +588,7 @@ Helper text provides information and feedback about what to enter in an input. U
                 </button>
                 <div class="input-text-wrapper">
                     <textarea class="input-text is-warning u-padding-block-end-32" placeholder="Type here..."></textarea>
-                    <ul class="buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-8" style="border-end-end-radius:0.0625rem;">
+                    <ul class="buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12" style="border-end-end-radius:0.0625rem;">
                         <li class="buttons-list-item">
                             <span class="text-counter">
                                 <span class="text-counter-count">4</span>
diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx
index b551c72be5..bdbbe8b6b1 100644
--- a/apps/pink/src/pages/utilities/box-model.mdx
+++ b/apps/pink/src/pages/utilities/box-model.mdx
@@ -22,8 +22,9 @@ description: Box Model ensures consistent margins, paddings and borders across o
 |                                    |                                               |                                          |
 | `u-padding-inline-end-0`           | `padding-inline-end: 0 !important;`           | Stays the same                           |
 | `u-padding-inline-end-56`          | `padding-inline-end: pxToRem(56) !important;` | `padding-inline-end: 3.5rem !important;` |
-| `u-padding-inline-end-112`         | `padding-inline-end: pxToRem(112) !important;`| `padding-inline-end: 7rem !important;`   |
+| `u-padding-inline-end-120`         | `padding-inline-end: pxToRem(120) !important;`| `padding-inline-end: 7.5rem !important;` |
 |                                    |                                               |                                          |
+| `u-padding-block-8`                | `padding-block: pxToRem(8) !important;`       | `padding-block: 0.5rem !important;`      |
 | `u-padding-block-12`               | `padding-block: pxToRem(12) !important;`      | `padding-block: 0.75rem !important;`     |
 |                                    |                                               |                                          |
 | `u-padding-block-start-16`         | `padding-block-start: pxToRem(16)!important;` | `padding-block-start: 1rem !important;`  |
diff --git a/apps/pink/src/pages/utilities/position.mdx b/apps/pink/src/pages/utilities/position.mdx
index c41009ae4f..183ac82703 100644
--- a/apps/pink/src/pages/utilities/position.mdx
+++ b/apps/pink/src/pages/utilities/position.mdx
@@ -3,31 +3,35 @@ title: Position
 description: An element's position can be quickly configured by using Position classes.
 ---
 
-| Class                   | Scss Define                      | Translated CSS                |
-| ----------------------- | -------------------------------- | ----------------------------- |
-| `u-position-relative`   | `position: relative;`            | Stays the same                |
-| `u-position-absolute`   | `position: absolute;`            | Stays the same                |
-| `u-position-static`     | `position: static !important;`   | Stays the same                |
-|                         |                                  |                               |
-| `u-inset-inline-start-0`| `inset-inline-start: 0;`         | Stays the same                |
-| `u-inset-inline-start-1`| `inset-inline-start: pxToRem(1);`| `inset-inline-start: 0.0625rem;`|
-| `u-inset-inline-start-4`| `inset-inline-start: pxToRem(4);`| `inset-inline-start: 0.25rem;`|
-| `u-inset-inline-start-8`| `inset-inline-start: pxToRem(8);`| `inset-inline-start: 0.5rem;` |
-|                         |                                  |                               |
-| `u-inset-inline-end-0`  | `inset-inline-end: 0;`           | Stays the same                |
-| `u-inset-inline-end-1`  | `inset-inline-end: pxToRem(1);`  | `inset-inline-end: 0.0625rem;`|
-| `u-inset-inline-end-4`  | `inset-inline-end: pxToRem(4);`  | `inset-inline-end: 0.25rem;`  |
-| `u-inset-inline-end-8`  | `inset-inline-end: pxToRem(8);`  | `inset-inline-end: 0.5rem;`   |
-|                         |                                  |                               |
-| `u-inset-block-start-0` | `inset-block-start: 0;`          | Stays the same                |
-| `u-inset-block-start-1` | `inset-block-start: pxToRem(1);` | `inset-block-start: 0.0625rem;`|
-| `u-inset-block-start-4` | `inset-block-start: pxToRem(4);` | `inset-block-start: 0.25rem;` |
-| `u-inset-block-start-8` | `inset-block-start: pxToRem(8);` | `inset-block-start: 0.5rem;`  |
-|                         |                                  |                               |
-| `u-inset-block-end-0`   | `inset-block-end: 0;`            | Stays the same                |
-| `u-inset-block-end-1`   | `inset-block-end: pxToRem(1);`   | `inset-block-end: 0.0625rem;` |
-| `u-inset-block-end-4`   | `inset-block-end: pxToRem(4);`   | `inset-block-end: 0.25rem;`   |
-| `u-inset-block-end-8`   | `inset-block-end: pxToRem(8);`   | `inset-block-end: 0.5rem;`    |
+| Class                    | Scss Define                       | Translated CSS                   |
+| ------------------------ | --------------------------------- | -------------------------------- |
+| `u-position-relative`    | `position: relative;`             | Stays the same                   |
+| `u-position-absolute`    | `position: absolute;`             | Stays the same                   |
+| `u-position-static`      | `position: static !important;`    | Stays the same                   |
+|                          |                                   |                                  |
+| `u-inset-inline-start-0` | `inset-inline-start: 0;`          | Stays the same                   |
+| `u-inset-inline-start-1` | `inset-inline-start: pxToRem(1);` | `inset-inline-start: 0.0625rem;` |
+| `u-inset-inline-start-4` | `inset-inline-start: pxToRem(4);` | `inset-inline-start: 0.25rem;`   |
+| `u-inset-inline-start-8` | `inset-inline-start: pxToRem(8);` | `inset-inline-start: 0.5rem;`    |
+| `u-inset-inline-start-12`| `inset-inline-start: pxToRem(12);`| `inset-inline-start: 0.75rem;`   |
+|                          |                                   |                                  |
+| `u-inset-inline-end-0`   | `inset-inline-end: 0;`            | Stays the same                   |
+| `u-inset-inline-end-1`   | `inset-inline-end: pxToRem(1);`   | `inset-inline-end: 0.0625rem;`   |
+| `u-inset-inline-end-4`   | `inset-inline-end: pxToRem(4);`   | `inset-inline-end: 0.25rem;`     |
+| `u-inset-inline-end-8`   | `inset-inline-end: pxToRem(8);`   | `inset-inline-end: 0.5rem;`      |
+| `u-inset-inline-end-12`  | `inset-inline-end: pxToRem(12);`  | `inset-inline-end: 0.75rem;`     |
+|                          |                                   |                                  |
+| `u-inset-block-start-0`  | `inset-block-start: 0;`           | Stays the same                   |
+| `u-inset-block-start-1`  | `inset-block-start: pxToRem(1);`  | `inset-block-start: 0.0625rem;`  |
+| `u-inset-block-start-4`  | `inset-block-start: pxToRem(4);`  | `inset-block-start: 0.25rem;`    |
+| `u-inset-block-start-8`  | `inset-block-start: pxToRem(8);`  | `inset-block-start: 0.5rem;`     |
+| `u-inset-block-start-12` | `inset-block-start: pxToRem(12);` | `inset-block-start: 0.75rem;`    |
+|                          |                                   |                                  |
+| `u-inset-block-end-0`    | `inset-block-end: 0;`             | Stays the same                   |
+| `u-inset-block-end-1`    | `inset-block-end: pxToRem(1);`    | `inset-block-end: 0.0625rem;`    |
+| `u-inset-block-end-4`    | `inset-block-end: pxToRem(4);`    | `inset-block-end: 0.25rem;`      |
+| `u-inset-block-end-8`    | `inset-block-end: pxToRem(8);`    | `inset-block-end: 0.5rem;`       |
+| `u-inset-block-end-12`   | `inset-block-end: pxToRem(12);`   | `inset-block-end: 0.75rem;`      |
 
 ## Z-index Classes
 
diff --git a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
index b2db9c3e3a..a44bd34e55 100644
--- a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
+++ b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
@@ -204,7 +204,7 @@
   --p-choice-item-title-color: var(--color-neutral-120);
   --p-choice-item-text-color: var(--color-neutral-100);
   display:flex; gap:pxToRem(8);
-  &-content { display:flex; flex-direction:column; gap:pxToRem(8); line-height:1.5; }
+  &-content { display:flex; flex-direction:column; gap:pxToRem(4); line-height:1.5; }
   &-title { color:hsl(var(--p-choice-item-title-color)); font-weight:600;}
   &-paragraph { color:hsl(var(--p-choice-item-text-color)); }
 
diff --git a/packages/ui/src/7-components/_buttons-list.scss b/packages/ui/src/7-components/_buttons-list.scss
index 289c6ed27a..0e1bf99747 100644
--- a/packages/ui/src/7-components/_buttons-list.scss
+++ b/packages/ui/src/7-components/_buttons-list.scss
@@ -2,6 +2,7 @@
 
 .buttons-list {
   display: flex;
+  --p-button-list-border-color: var(--color-neutral-30);
   &-item {
     position: relative;
     &:nth-child(n + 2) {
@@ -9,7 +10,7 @@
       &::before {
         content:""; display:block;
         position:absolute; inset-inline-start:0; inset-block:0; margin-block:auto;
-        inline-size:pxToRem(1); block-size:75%; background-color:hsl(var(--color-border));
+        inline-size:pxToRem(1); block-size:75%; background-color:hsl(var(--p-button-list-border-color));
       }
     }
   }
@@ -20,6 +21,10 @@
       &:last-child  { padding-inline-end:0;   }
     }
   }
+
+  #{$theme-dark} & {
+    --p-button-list-border-color: var(--color-neutral-150);
+  }
 }
 
 
diff --git a/packages/ui/src/7-components/_modal.scss b/packages/ui/src/7-components/_modal.scss
index de9c3a1159..5bb97f1006 100644
--- a/packages/ui/src/7-components/_modal.scss
+++ b/packages/ui/src/7-components/_modal.scss
@@ -81,8 +81,7 @@
   &-title { color:hsl(var(--p-modal-title-color)); line-height:1; }
   &-content {
     @include scroll;
-    display:grid; gap:pxToRem(24);
-    overflow:auto; font-size:var(--font-size-1);
+    display:grid; gap:pxToRem(24); overflow:auto;
     padding-block:pxToRem(4); margin-block:pxToRem(-4); /* used to show focus outline */
     margin-inline: calc(var(--p-modal-padding) * -1);
     padding-inline: calc(var(--p-modal-padding));
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 1dd9cefdd9..b1fcaf5ae3 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -72,21 +72,25 @@
 .u-inset-inline-start-1 { inset-inline-start:pxToRem(1);  }
 .u-inset-inline-start-4 { inset-inline-start:pxToRem(4);  }
 .u-inset-inline-start-8 { inset-inline-start:pxToRem(8);  }
+.u-inset-inline-start-12 { inset-inline-start:pxToRem(12); }
 
 .u-inset-inline-end-0   { inset-inline-end:0;    }
 .u-inset-inline-end-1   { inset-inline-end:pxToRem(1);    }
 .u-inset-inline-end-4   { inset-inline-end:pxToRem(4);    }
 .u-inset-inline-end-8   { inset-inline-end:pxToRem(8);    }
+.u-inset-inline-end-12   { inset-inline-end:pxToRem(12);  }
 
 .u-inset-block-start-0  { inset-block-start:0;   }
 .u-inset-block-start-1  { inset-block-start:pxToRem(1);   }
 .u-inset-block-start-4  { inset-block-start:pxToRem(4);   }
 .u-inset-block-start-8  { inset-block-start:pxToRem(8);   }
+.u-inset-block-start-12  { inset-block-start:pxToRem(12); }
 
 .u-inset-block-end-0    { inset-block-end:0;     }
 .u-inset-block-end-1    { inset-block-end:pxToRem(1);     }
 .u-inset-block-end-4    { inset-block-end:pxToRem(4);     }
 .u-inset-block-end-8    { inset-block-end:pxToRem(8);     }
+.u-inset-block-end-12   { inset-block-end:pxToRem(12);    }
 
 .u-z-index-0   { z-index:0;  }
 .u-z-index-1   { z-index:1;  }
@@ -207,9 +211,11 @@
 
 .u-padding-inline-end-0   { padding-inline-end:0!important; }
 .u-padding-inline-end-56  { padding-inline-end:pxToRem(56)!important; }
-.u-padding-inline-end-112 { padding-inline-end:pxToRem(112)!important; }
+.u-padding-inline-end-120 { padding-inline-end:pxToRem(120)!important; }
 
+.u-padding-block-8        { padding-block:pxToRem(8)!important; }
 .u-padding-block-12       { padding-block:pxToRem(12)!important; }
+
 .u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; }
 
 .u-padding-block-end-32   { padding-block-end:pxToRem(32)!important; }

From 9ecd8ecc21b83c97c43fca1ff4f803a10eca6a52 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 29 Mar 2023 11:56:45 +0200
Subject: [PATCH 090/167] chore: bump to rc.6

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 51ea37a118..d13134cf0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.5",
+      "version": "0.0.6-rc.6",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.5",
+      "version": "0.0.6-rc.6",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 4b630c98e1..a735f5b22c 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.5",
+  "version": "0.0.6-rc.6",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f33390f108..151b946b08 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.5",
+  "version": "0.0.6-rc.6",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From a145ed88befd925626d2e56e8146c41797f84133 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 30 Mar 2023 16:40:53 +0900
Subject: [PATCH 091/167] -- Style fixes - Fix textarea with inut-wrapper

---
 apps/pink/src/pages/elements/input-field.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index d4a3b5d6b3..afe3f06f89 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -587,7 +587,7 @@ Helper text provides information and feedback about what to enter in an input. U
                     </span>
                 </button>
                 <div class="input-text-wrapper">
-                    <textarea class="input-text is-warning u-padding-block-end-32" placeholder="Type here..."></textarea>
+                    <textarea class="input-text is-warning u-padding-block-end-32" placeholder="Type here..." style="--amount-of-buttons: 0.25;"></textarea>
                     <ul class="buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12" style="border-end-end-radius:0.0625rem;">
                         <li class="buttons-list-item">
                             <span class="text-counter">

From 6d5365b83f625d3d74ca92a6fdebc21b584b8044 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 30 Mar 2023 17:52:40 +0900
Subject: [PATCH 092/167] -- Grid Header - Add new component partial - Add new
 utility class - Ppdate pink pages

---
 apps/pink/src/pages/layout/grid-header.mdx | 50 ++++++++++++++++++++++
 apps/pink/src/pages/utilities/display.mdx  |  3 +-
 packages/ui/src/8-grids/_grid-header.scss  | 19 ++++++++
 packages/ui/src/8-grids/_index.scss        |  1 +
 packages/ui/src/_9-utilities.scss          |  1 +
 5 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 apps/pink/src/pages/layout/grid-header.mdx
 create mode 100644 packages/ui/src/8-grids/_grid-header.scss

diff --git a/apps/pink/src/pages/layout/grid-header.mdx b/apps/pink/src/pages/layout/grid-header.mdx
new file mode 100644
index 0000000000..aeeee58160
--- /dev/null
+++ b/apps/pink/src/pages/layout/grid-header.mdx
@@ -0,0 +1,50 @@
+---
+title: Grid Header
+description: Grid header; Behave as flex container in big screens, and grid container in small screens.
+---
+
+| Class              | Type                  |                                    |
+| ------------------ | --------------------- | ---------------------------------- |
+| `grid-header`      | Grid Header Container |  Define Grid in small screen       |
+| `grid-header-col-1`| Grid Header column 1  |  Define Column 1 in small screen   |
+| `grid-header-col-2`| Grid Header column 2  |  Define Column 2 in small screen   |
+| `grid-header-col-3`| Grid Header column 3  |  Define Column 3 in small screen   |
+| `grid-header-col-4`| Grid Header column 4  |  Define Column 2 in small screen   |
+
+
+<Preview noFlex>
+    <header class="grid-header">
+
+        <h2 class="grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center">Databases</h2>
+
+        <div class="u-flex u-gap-16 u-contents-mobile">
+            <div class="grid-header-col-4 drop-wrapper">
+                <button class="button is-secondary" type="button">
+                    <span class="icon-view-boards u-opacity-50" aria-hidden="true" aria-label="columns"></span>
+                    <span class="text is-only-desktop">Columns</span>
+                    <span class="inline-tag">4</span>
+                </button>
+            </div>
+            <div class="grid-header-col-3 toggle-button">
+                <ul class="toggle-button-list">
+                    <li class="toggle-button-item">
+                        <button class="toggle-button-element is-selected" aria-label="List View" type="button">
+                            <span class="icon-view-list" aria-hidden="true"></span>
+                        </button>
+                    </li>
+                    <li class="toggle-button-item">
+                        <button class="toggle-button-element" aria-label="Grid View" type="button">
+                            <span class="icon-view-grid" aria-hidden="true"></span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+            <button class="grid-header-col-2 button" type="button">
+                <span class="icon-plus" aria-hidden="true"></span>
+                <span class="text">Create database</span>
+            </button>
+        </div>
+
+    </header>
+
+</Preview>
\ No newline at end of file
diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx
index f7da193464..708e1f9e4c 100644
--- a/apps/pink/src/pages/utilities/display.mdx
+++ b/apps/pink/src/pages/utilities/display.mdx
@@ -10,7 +10,8 @@ description: Display controls how an element is displayed, including its alignme
 | `u-grid`                   | `display: grid;`                                                  | Stays the same                                                   |
 | `u-flex`                   | `display: flex;`                                                  | Stays the same                                                   |
 | `u-inline-flex`            | `display: inline-flex;`                                           | Stays the same                                                   |
-|                            |                                                                   |                                                                  |
+| `u-contents-mobile`        | `@media #{$break1} { {display: contents;} }`                      | Stays the same                                                   |
+|                            |                                                                   | `@media (max-width:767.99px) { display: contents; }`             |
 | `u-box-sizing-content`     | `box-sizing: content-box;`                                        | Stays the same                                                   |
 |                            |                                                                   |                                                                  |
 | `u-sep-inline-start`       | `border-inline-start: solid pxToRem(1) hsl(var(--color-border));` | `border-inline-start: solid 0.0625rem hsl(var(--color-border));` |
diff --git a/packages/ui/src/8-grids/_grid-header.scss b/packages/ui/src/8-grids/_grid-header.scss
new file mode 100644
index 0000000000..b130bf23d6
--- /dev/null
+++ b/packages/ui/src/8-grids/_grid-header.scss
@@ -0,0 +1,19 @@
+@use '../abstract' as *;
+.grid-header {
+  gap: pxToRem(24);
+
+  /* mobile */
+  @media #{$break1} {
+    display:grid; grid-template-columns:auto auto;
+    &-col {
+      &-1 { order:1; }
+      &-2 { order:2; justify-self:end;    }
+      &-3 { order:3; justify-self:start;  }
+      &-4 { order:4; justify-self:end;    }
+    }
+  }
+  /* tablet & desktop */
+  @media #{$break2}, #{$break3open} {
+    display:flex; justify-content:space-between;
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/8-grids/_index.scss b/packages/ui/src/8-grids/_index.scss
index 99d80b08b6..d807da4d40 100644
--- a/packages/ui/src/8-grids/_index.scss
+++ b/packages/ui/src/8-grids/_index.scss
@@ -1,5 +1,6 @@
 @forward "grid-with-side";
 @forward "grid-box";
+@forward "grid-header";
 @forward "grid-code";
 @forward "grid-1-1";
 @forward "grid-1-2";
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index b1fcaf5ae3..56f56045e5 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -105,6 +105,7 @@
 .u-grid           { display:grid;         }
 .u-flex           { display:flex;         }
 .u-inline-flex    { display:inline-flex;  }
+.u-contents-mobile{ @media #{$break1} {display:contents;} }
 
 .u-box-sizing-content { box-sizing:content-box; }
 .u-sep-inline-start   { border-inline-start:solid pxToRem(1) hsl(var(--color-border)); }

From 850fed416e6b81f157d603289c74b344fccd4c96 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 30 Mar 2023 19:42:34 +0900
Subject: [PATCH 093/167] -- Clickable List - New component partial - Style -
 _clickable-list.scss - Demo - clickable-list.mdx

---
 .../src/pages/components/clickable-list.mdx   | 44 +++++++++++++++++++
 .../ui/src/7-components/_clickable-list.scss  | 34 ++++++++++++++
 packages/ui/src/7-components/_index.scss      |  1 +
 3 files changed, 79 insertions(+)
 create mode 100644 apps/pink/src/pages/components/clickable-list.mdx
 create mode 100644 packages/ui/src/7-components/_clickable-list.scss

diff --git a/apps/pink/src/pages/components/clickable-list.mdx b/apps/pink/src/pages/components/clickable-list.mdx
new file mode 100644
index 0000000000..0d9c970de0
--- /dev/null
+++ b/apps/pink/src/pages/components/clickable-list.mdx
@@ -0,0 +1,44 @@
+---
+title: Clickable List
+description:
+---
+
+| Class                     | Type                  |                                    |
+| ------------------------- | --------------------- | ---------------------------------- |
+| `clickable-list`          | List Container        |  Define clickable list             |
+| `clickable-list-item`     | Item Container        |  Define item                       |
+| `clickable-list-button`   | Button                |  Clickable zone                    |
+| `clickable-list-title`    | Title                 |                                    |
+| `clickable-list-title-sep`| Title seperator       |                                    |
+| `clickable-list-desc`     | Description           |                                    |
+
+<Preview noFlex>
+    <ul class="clickable-list">
+        <li class="clickable-list-item">
+            <a href="/" class="clickable-list-button">
+                <h5 class="clickable-list-title u-trim-1">
+                    <span class="">Cameron Williamson</span>
+                    <span class="clickable-list-title-sep">|</span>
+                    <span class="">One of the most visually innovative films of all times</span>
+                </h5>
+                <div class="clickable-list-desc">
+                    63f1ec68ac3515e4bc06
+                </div>
+            </a>
+        </li>
+
+        <li class="clickable-list-item">
+            <a href="/" class="clickable-list-button">
+                <h5 class="clickable-list-title u-trim-1">
+                    <span class="">Cameron Williamson</span>
+                    <span class="clickable-list-title-sep">|</span>
+                    <span class="">One of the most visually innovative films of all times</span>
+                </h5>
+                <div class="clickable-list-desc">
+                    63f1ec68ac3515e4bc06
+                </div>
+            </a>
+        </li>
+
+    </ul>
+</Preview>
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_clickable-list.scss b/packages/ui/src/7-components/_clickable-list.scss
new file mode 100644
index 0000000000..7cb9e94a9c
--- /dev/null
+++ b/packages/ui/src/7-components/_clickable-list.scss
@@ -0,0 +1,34 @@
+@use '../abstract' as *;
+.clickable-list {
+  --p-clickable-button-bg-color-hover:  var(--color-neutral-10);
+  --p-clickable-title-text-color:       var(--color-neutral-100);
+  --p-clickable-desc-text-color:        var(--color-neutral-70);
+  --p-clickable-sep-color:           var(--color-neutral-50);
+  --color-border: var(--color-neutral-30); /* override global */
+
+  &-item {
+    padding-block:pxToRem(4); -webkit-user-select:none; user-select:none;
+    &:not(:last-child) {
+      border-block-end:solid pxToRem(1) hsl(var(--color-border));
+    }
+  }
+  &-button {
+    display:block; padding-block:pxToRem(8); padding-inline:pxToRem(16); border-radius:var(--border-radius-small);
+    &:hover, &:focus { background-color:hsl(var(--p-clickable-button-bg-color-hover)); }
+  }
+
+  &-title {
+    color:hsl(var(--p-clickable-title-text-color));
+    &-sep { color:hsl(var(--p-clickable-sep-color)); margin-inline:pxToRem(4); }
+  }
+  &-desc  { color:hsl(var(--p-clickable-desc-text-color)); font-size:var(--font-size-00); }
+
+  #{$theme-dark} & {
+    --p-clickable-button-bg-color-hover: var(--color-neutral-200);
+    --p-clickable-title-text-color:      var(--color-neutral-10);
+    --p-clickable-desc-text-color:       var(--color-neutral-50);
+    --p-clickable-sep-color:          var(--color-neutral-150);
+
+    --color-border: var(--color-neutral-150); /* override global */
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_index.scss b/packages/ui/src/7-components/_index.scss
index 28f44d108e..a3247291dc 100644
--- a/packages/ui/src/7-components/_index.scss
+++ b/packages/ui/src/7-components/_index.scss
@@ -17,6 +17,7 @@
 @forward "steps";
 @forward "buttons-list";
 @forward "toggle-button";
+@forward "clickable-list";
 
 @forward "top-cover";
 @forward "code-panel";

From f921fa43d2e1c9ba4e40af0fe2a22b4b99dc29b5 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 30 Mar 2023 12:49:12 +0200
Subject: [PATCH 094/167] chore: bump to rc.7

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d13134cf0e..2866ba4bbd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.6",
+      "version": "0.0.6-rc.7",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.6",
+      "version": "0.0.6-rc.7",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index a735f5b22c..1294bcd5b7 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.6",
+  "version": "0.0.6-rc.7",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 151b946b08..c643bb7da1 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.6",
+  "version": "0.0.6-rc.7",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From c3c1b023c5b0a176a26d928c1fd340e816eef1a5 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 31 Mar 2023 14:34:34 +0900
Subject: [PATCH 095/167] -- Typography refactor - all body-text-1 body-text-2
 remove default font-eight:bold - Add new utility classes u-underline &
 u-medium (font-size:16px) - Update all location u-bold instead - Update
 utility text page - text.mdx

---
 apps/kitchensink/cover-frame.html             |  4 ++--
 apps/kitchensink/dashboard.html               |  4 ++--
 apps/kitchensink/empty-state-cards.html       |  2 +-
 apps/kitchensink/partials/topNav.hbs          |  6 ++---
 apps/kitchensink/wizard-form.html             |  4 ++--
 apps/kitchensink/wizard.html                  |  2 +-
 .../src/components/homepage/TryItOut.svelte   |  2 +-
 apps/pink/src/components/layout/Cover.astro   |  2 +-
 apps/pink/src/pages/components/label-card.mdx |  6 ++---
 .../src/pages/components/upload-file-box.mdx  |  6 ++---
 apps/pink/src/pages/elements/card.mdx         |  2 +-
 apps/pink/src/pages/elements/input-field.mdx  |  2 +-
 .../pink/src/pages/foundations/typography.mdx | 24 ++++++++++---------
 apps/pink/src/pages/index.astro               |  4 ++--
 apps/pink/src/pages/utilities/text.mdx        |  2 ++
 packages/ui/src/2-resets/_typography.scss     |  4 ++--
 packages/ui/src/_9-utilities.scss             |  2 ++
 17 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/apps/kitchensink/cover-frame.html b/apps/kitchensink/cover-frame.html
index 8e7b6f587b..13caf7dc59 100644
--- a/apps/kitchensink/cover-frame.html
+++ b/apps/kitchensink/cover-frame.html
@@ -244,7 +244,7 @@ <h6 class="u-bold">Eldad Test</h6>
 
 <section class="cover-frame">
     <header class="cover-frame-header u-flex u-gap-16 u-main-space-between u-cross-center">
-        <h1 class="body-text-1">Function ID: 0123456789012abcdefg</h1>
+        <h1 class="body-text-1 u-bold">Function ID: 0123456789012abcdefg</h1>
         <button class="x-button" aria-label="close popup">
             <span class="icon-x" aria-hidden="true"></span>
         </button>
@@ -255,7 +255,7 @@ <h1 class="body-text-1">Function ID: 0123456789012abcdefg</h1>
                 <img height="28" width="28" src="/images/icons/color/chrome.svg" alt="Chrome">
             </div>
             <div>
-                <h2 class="body-text-2">Deployment ID: 0123456789012</h2>
+                <h2 class="body-text-2 u-bold">Deployment ID: 0123456789012</h2>
                 <time class="u-block">Created at: 08 Jul 2022, 07:00</time>
                 <div>Size 555KB</div>
             </div>
diff --git a/apps/kitchensink/dashboard.html b/apps/kitchensink/dashboard.html
index 0fc1bbfb3f..7d9eb74bd6 100644
--- a/apps/kitchensink/dashboard.html
+++ b/apps/kitchensink/dashboard.html
@@ -38,7 +38,7 @@ <h1 class="heading-level-4 s-dFvp3V-Iy6FY">
                     <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
                         <div class="u-flex u-gap-16 u-main-space-between">
                             <div>
-                                <div class="heading-level-4">1.19 <span class="body-text-2">GB</span></div>
+                                <div class="heading-level-4">1.19 <span class="body-text-2 u-bold">GB</span></div>
                                 <div>Bandwidth</div>
                             </div>
                             <div class="drop-wrapper u-cross-child-start">
@@ -136,7 +136,7 @@ <h1 class="heading-level-4 s-dFvp3V-Iy6FY">
                             </div>
 
                             <div class="grid-item-1-end-start">
-                                <div class="heading-level-4">8.0 <span class="body-text-2">MB</span></div>
+                                <div class="heading-level-4">8.0 <span class="body-text-2 u-bold">MB</span></div>
                                 <div>Users</div>
                             </div>
 
diff --git a/apps/kitchensink/empty-state-cards.html b/apps/kitchensink/empty-state-cards.html
index f9d3f4c144..af34813ac0 100644
--- a/apps/kitchensink/empty-state-cards.html
+++ b/apps/kitchensink/empty-state-cards.html
@@ -58,7 +58,7 @@ <h1 class="heading-level-4">Users</h1>
 
                         <div class="u-text-center">
                             <h4 class="heading-level-7">Create your first [object] to get started</h4>
-                            <p class="body-text-2 u-margin-block-start-4">Need a hand? Check out our documentation.</p>
+                            <p class="body-text-2 u-bold u-margin-block-start-4">Need a hand? Check out our documentation.</p>
                         </div>
                         <div class="u-flex u-gap-16">
                             <button class="button is-text"><span class="text">Documentation</span></button>
diff --git a/apps/kitchensink/partials/topNav.hbs b/apps/kitchensink/partials/topNav.hbs
index 832f77a36c..285e846b9e 100644
--- a/apps/kitchensink/partials/topNav.hbs
+++ b/apps/kitchensink/partials/topNav.hbs
@@ -22,7 +22,7 @@
                 <div class="drop is-block-end u-hide" style="--drop-width-size-desktop:20rem; --section-padding-horizontal:1.5rem; --section-padding-vertical:1.5rem;">
                     <section class="drop-section">
                         <header class="u-flex u-main-space-between u-gap-16">
-                            <h4 class="body-text-1">How can we improve?</h4>
+                            <h4 class="body-text-1 u-bold">How can we improve?</h4>
                             <button type="button" class="x-button" aria-label="Close drop" title="Close Drop"><span class="icon-x" aria-hidden="true"></span></button>
                         </header>
                         <p class="u-line-height-1-5 u-margin-block-start-8">Your feedback is important to us. Please be honest and tell us what you think.</p>
@@ -54,7 +54,7 @@
                 <div class="drop is-block-end u-hide" style="--drop-width-size-desktop:28.125rem; --section-padding-horizontal:1.5rem; --section-padding-vertical:1.5rem;">
                     <section class="drop-section">
                         <header class="u-flex u-main-space-between u-gap-16">
-                            <h4 class="body-text-1">How are we doing?</h4>
+                            <h4 class="body-text-1 u-bold">How are we doing?</h4>
                             <button type="button" class="x-button" aria-label="Close drop" title="Close Drop"><span class="icon-x" aria-hidden="true"></span></button>
                         </header>
                         <p class="u-line-height-1-5 u-margin-block-start-8">At Appwrite, we value the feedback of our users. That means you! We’d love to hear what you think.</p>
@@ -126,7 +126,7 @@
                 <button class="button is-text u-margin-inline-end-16 is-only-desktop"><span class="text">Support</span></button>
                 <section id="Support" class="drop is-block-end is-full-screen-mobile u-width-280-desktop u-hide">
                     <header class="drop-header-mobile">
-                        <h1 class="body-text-1 u-line-height-1">Support</h1>
+                        <h1 class="body-text-1 u-bold u-line-height-1">Support</h1>
                         <button class="x-button u-margin-inline-start-auto" aria-label="close support popup"><span class="icon-x" aria-hidden="true"></span></button>
                     </header>
                     <section class="drop-section u-grid u-gap-24 u-padding-24">
diff --git a/apps/kitchensink/wizard-form.html b/apps/kitchensink/wizard-form.html
index 89488c798c..417ffcdac2 100644
--- a/apps/kitchensink/wizard-form.html
+++ b/apps/kitchensink/wizard-form.html
@@ -253,7 +253,7 @@ <h6 class="u-bold">Eldad Test</h6>
         <button class="button is-text u-padding-inline-0" aria-label="previous page">
           <span class="icon-cheveron-left" aria-hidden="true"></span>
         </button>
-        <div class="body-text-1">Create Document</div>
+        <div class="body-text-1 u-bold">Create Document</div>
         <button class="x-button" aria-label="close popup">
           <span class="icon-x" aria-hidden="true"></span>
         </button>
@@ -262,7 +262,7 @@ <h6 class="u-bold">Eldad Test</h6>
       <div class="wizard-side is-shown-mobile u-grid u-gap-32">
 
         <div class="is-not-mobile">
-          <h4 class="body-text-1">Contact the Appwrite Team</h4>
+          <h4 class="body-text-1 u-bold">Contact the Appwrite Team</h4>
           <p class="u-line-height-1-5">Found a bug? Need a hand? Just want to say hi? Contact the Appwrite team with your queries. </p>
         </div>
         <dl class="u-grid u-grid-columns-auto-1fr u-column-gap-12">
diff --git a/apps/kitchensink/wizard.html b/apps/kitchensink/wizard.html
index bf35231b14..2e819285e1 100644
--- a/apps/kitchensink/wizard.html
+++ b/apps/kitchensink/wizard.html
@@ -250,7 +250,7 @@ <h6 class="u-bold">Eldad Test</h6>
 
       <!-- content elements -->
       <header class="wizard-header">
-        <div class="body-text-1">Create Document</div>
+        <div class="body-text-1 u-bold">Create Document</div>
         <button class="button is-text is-only-icon u-margin-inline-start-auto" aria-label="close popup">
           <span class="icon-x" aria-hidden="true"></span>
         </button>
diff --git a/apps/pink/src/components/homepage/TryItOut.svelte b/apps/pink/src/components/homepage/TryItOut.svelte
index 1f5820aeca..91f6f390e7 100644
--- a/apps/pink/src/components/homepage/TryItOut.svelte
+++ b/apps/pink/src/components/homepage/TryItOut.svelte
@@ -31,7 +31,7 @@
 
   const codes: Record<string, string | Array<{ name: string; code: string }>> =
     {
-      card: `<article class="card u-text-center"><img class="avatar is-size-x-large u-margin-inline-auto" src="https://source.unsplash.com/LaK153ghdig/132x132" alt="Kristin Watson" width="66" height="66" />  <h3 class="body-text-2 u-margin-block-start-16">Kristin Watson</h3>  <p class="u-margin-block-start-4 u-color-text-gray">    kristin.watson@appwrite.io  </p>  <button class="button u-margin-inline-auto u-margin-block-start-24">    <span class="text">Edit profile</span>  </button></article>`,
+      card: `<article class="card u-text-center"><img class="avatar is-size-x-large u-margin-inline-auto" src="https://source.unsplash.com/LaK153ghdig/132x132" alt="Kristin Watson" width="66" height="66" />  <h3 class="body-text-2 u-bold u-margin-block-start-16">Kristin Watson</h3>  <p class="u-margin-block-start-4 u-color-text-gray">    kristin.watson@appwrite.io  </p>  <button class="button u-margin-inline-auto u-margin-block-start-24">    <span class="text">Edit profile</span>  </button></article>`,
       form: `<div class="card">
             <div class="u-flex u-main-space-between u-cross-center">
               <h6 class="heading-level-6">Edit Profile</h6>
diff --git a/apps/pink/src/components/layout/Cover.astro b/apps/pink/src/components/layout/Cover.astro
index daeb259f31..5dfa18e65d 100644
--- a/apps/pink/src/components/layout/Cover.astro
+++ b/apps/pink/src/components/layout/Cover.astro
@@ -17,7 +17,7 @@ const showBreadcrumb =
                 </h1> <code class="u-un-break-text">{frontmatter?.class}</code>
             </div>
     {frontmatter?.description && 
-    <p class="body-text-1 u-normal u-margin-block-start-8">
+    <p class="body-text-1 u-margin-block-start-8">
     {frontmatter.description}
     </p>
     }
diff --git a/apps/pink/src/pages/components/label-card.mdx b/apps/pink/src/pages/components/label-card.mdx
index ddfb9685ca..afdc9145e1 100644
--- a/apps/pink/src/pages/components/label-card.mdx
+++ b/apps/pink/src/pages/components/label-card.mdx
@@ -12,7 +12,7 @@ description: A representation of content uploaded as an attachment.
                 <div class="u-flex u-gap-16">
                     <input class="is-small u-margin-block-start-2" type="radio" name="plan" />
                     <div class="u-flex u-flex-vertical u-gap-4">
-                        <h4 class="body-text-2">Pro plan</h4>
+                        <h4 class="body-text-2 u-bold">Pro plan</h4>
                         <p class="u-color-text-gray">For projects you want to scale easily. <b>$25/month + Add-ons</b></p>
                     </div>
                     <span class="icon-lightning-bolt u-margin-inline-start-auto" aria-hidden="true"></span>
@@ -24,7 +24,7 @@ description: A representation of content uploaded as an attachment.
                 <div class="u-flex u-gap-16">
                     <input class="is-small u-margin-block-start-2" type="radio" name="plan" />
                     <div class="u-flex u-flex-vertical u-gap-4">
-                        <h4 class="body-text-2">Free plan</h4>
+                        <h4 class="body-text-2 u-bold">Free plan</h4>
                         <p class="u-color-text-gray">For personal, passion projects. <b>Totally free</b></p>
                     </div>
                     <span class="icon-lightning-bolt u-margin-inline-start-auto" aria-hidden="true"></span>
@@ -36,7 +36,7 @@ description: A representation of content uploaded as an attachment.
                 <div class="u-flex u-gap-16">
                     <input class="is-small u-margin-block-start-2" type="radio" name="plan" disabled />
                     <div class="u-flex u-flex-vertical u-gap-4 u-opacity-50">
-                        <h4 class="body-text-2">Disabled plan</h4>
+                        <h4 class="body-text-2 u-bold">Disabled plan</h4>
                         <p class="u-color-text-gray"><b>Unlimited</b></p>
                     </div>
                     <span class="icon-lightning-bolt u-margin-inline-start-auto u-opacity-50" aria-hidden="true"></span>
diff --git a/apps/pink/src/pages/components/upload-file-box.mdx b/apps/pink/src/pages/components/upload-file-box.mdx
index f7f0ff7117..045132da65 100644
--- a/apps/pink/src/pages/components/upload-file-box.mdx
+++ b/apps/pink/src/pages/components/upload-file-box.mdx
@@ -46,7 +46,7 @@ Upload File Boxes consist of eight components:
 
       </div>
         <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
-            <p class="upload-file-box-info body-text-2 u-normal">Max file size: 10MB</p>
+            <p class="upload-file-box-info body-text-2">Max file size: 10MB</p>
             <button class="button is-secondary is-full-width-mobile">
                 <span class="text">Choose a file</span>
             </button>
@@ -79,7 +79,7 @@ Upload File Boxes consist of eight components:
 
             </div>
             <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
-                <p class="upload-file-box-info body-text-2 u-normal">Max file size: 10MB</p>
+                <p class="upload-file-box-info body-text-2">Max file size: 10MB</p>
                 <button class="button is-secondary is-full-width-mobile">
                     <span class="text">Choose a file</span>
                 </button>
@@ -128,7 +128,7 @@ Upload File Boxes consist of eight components:
 
             </div>
             <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
-                <p class="upload-file-box-info body-text-2 u-normal">Max file size: 10MB</p>
+                <p class="upload-file-box-info body-text-2">Max file size: 10MB</p>
                 <button class="button is-secondary is-full-width-mobile">
                     <span class="text">Choose a file</span>
                 </button>
diff --git a/apps/pink/src/pages/elements/card.mdx b/apps/pink/src/pages/elements/card.mdx
index cd6c1707e7..0242d81530 100644
--- a/apps/pink/src/pages/elements/card.mdx
+++ b/apps/pink/src/pages/elements/card.mdx
@@ -80,7 +80,7 @@ Cards are used to show empty states, to update or delete objects and to display
         <h2 class="heading-level-7 u-trim-1">
           Create your first file to get started.
         </h2>
-        <p class="body-text-2 u-margin-block-start-4">
+        <p class="body-text-2 u-bold u-margin-block-start-4">
           Need a hand? Check out our documentation.
         </p>
       </div>
diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index afe3f06f89..2aba882107 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -399,7 +399,7 @@ Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
                                     <img class="u-only-dark" src="/empty-state-dark.svg" alt="" aria-hidden="true" height="120" width="128" />
                                 </div>
                                 <div class="u-text-center u-margin-block-start-4">
-                                    <h2 class="body-text-2 u-trim-1">
+                                    <h2 class="body-text-2 u-bold u-trim-1">
                                         <span class="text">Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’</span>
                                     </h2>
                                     <p class="text">There are no documents that match your search.</p>
diff --git a/apps/pink/src/pages/foundations/typography.mdx b/apps/pink/src/pages/foundations/typography.mdx
index 4717af4690..1cdff0cf61 100644
--- a/apps/pink/src/pages/foundations/typography.mdx
+++ b/apps/pink/src/pages/foundations/typography.mdx
@@ -56,21 +56,23 @@ For body texts, there are two font sizes (14px, 16px) and two weights (400 and 6
 <Preview align="start">
   <only-preview>
     <div class="u-grid u-gap-24">
-      <p class="u-bold">Body text level 1 SemiBold</p>
-      <p>Body text level 1 Regular</p>
-      <p class="u-bold">Body text level 2 SemiBold</p>
-      <p>Body text level 2 Regular</p>
-      <p style="text-decoration: underline">Body text level 2 Underline</p>
+      <p class="body-text-1 u-bold">Body text level 1 SemiBold</p>
+      <p class="body-text-1">Body text level 1 Regular</p>
+      <p class="body-text-1 u-underline">Body text level 1 Underline</p>
+      <p class="body-text-2 u-bold">Body text level 2 SemiBold</p>
+      <p class="body-text-2">Body text level 2 Regular</p>
+      <p class="body-text-2 u-underline">Body text level 2 Underline</p>
       <a class="link">Link text Underline</a>
     </div>
   </only-preview>
   <only-html>
-    <p class="u-bold">Body text level 1 SemiBold</p>
-    <p>Body text level 1 Regular</p>
-    <p class="u-bold">Body text level 2 SemiBold</p>
-    <p>Body text level 2 Regular</p>
-    <p style="text-decoration: underline">Body text level 2 Underline</p>
-    <a class="link">Link text Underline</a>
+      <p class="body-text-1 u-bold">Body text level 1 SemiBold</p>
+      <p class="body-text-1">Body text level 1 Regular</p>
+      <p class="body-text-1 u-underline">Body text level 1 Underline</p>
+      <p class="body-text-2 u-bold">Body text level 2 SemiBold</p>
+      <p class="body-text-2">Body text level 2 Regular</p>
+      <p class="body-text-2 u-underline">Body text level 2 Underline</p>
+      <a class="link">Link text Underline</a>
   </only-html>
 </Preview>
 
diff --git a/apps/pink/src/pages/index.astro b/apps/pink/src/pages/index.astro
index 7fc7ae162a..a28ce2f911 100644
--- a/apps/pink/src/pages/index.astro
+++ b/apps/pink/src/pages/index.astro
@@ -100,7 +100,7 @@ const articles: Article[] = [
         <h2 class="heading-level-1 u-margin-block-start-16">
           Design. Build. Collaborate.
         </h2>
-        <p class="body-text-1 u-normal u-small u-margin-block-start-16">
+        <p class="body-text-1 u-small u-margin-block-start-16">
           Pink Design is Appwrite's open-source design system for building
           consistent and reusable user interfaces. Pink is designed to
           prioritize collaboration, dev experience, and accessibility.
@@ -441,7 +441,7 @@ const articles: Article[] = [
                       />
                       <div class="articles-item-content">
                         <header class="articles-item-header">
-                          <h3 class="body-text-1 u-trim-2">
+                          <h3 class="body-text-1 u-bold u-trim-2">
                             <span class="text">{article.title}</span>
                           </h3>
                         </header>
diff --git a/apps/pink/src/pages/utilities/text.mdx b/apps/pink/src/pages/utilities/text.mdx
index cf6691713d..6d6a49d4e0 100644
--- a/apps/pink/src/pages/utilities/text.mdx
+++ b/apps/pink/src/pages/utilities/text.mdx
@@ -7,9 +7,11 @@ description: Text ensures consistent text size, weight, line height and breaks a
 | -------------------- | ------------------------------------------------- | ------------------------------- |
 | `u-x-small`          | `font-size: pxToRem(12)!important;`               | `font-size: 0.75rem!important;` |
 | `u-small`            | `font-size: pxToRem(14)!important;`               | `font-size: 0.875rem!important;`|
+| `u-medium`           | `font-size: pxToRem(16)!important;`               | `font-size: 1rem!important;`    |
 | `u-font-size-32`     | `font-size: pxToRem(32)!important;`               | `font-size: 2rem!important;`    |
 | `u-bold`             | `font-weight: 600;`                               | Stays the same                  |
 | `u-normal`           | `font-weight: normal;`                            | Stays the same                  |
+| `u-underline`        | `text-decoration: underline;`                     | Stays the same                  |
 | `u-text-start`       | `text-align: start;`                              | Stays the same                  |
 | `u-text-center`      | `text-align: center;`                             | Stays the same                  |
 | `u-text-end`         | `text-align: end;`                                | Stays the same                  |
diff --git a/packages/ui/src/2-resets/_typography.scss b/packages/ui/src/2-resets/_typography.scss
index 2d6120c414..1451bd2d2f 100644
--- a/packages/ui/src/2-resets/_typography.scss
+++ b/packages/ui/src/2-resets/_typography.scss
@@ -96,8 +96,8 @@ code  {
 }
 
 .body-text {
-  &-1 { font-size:var(--font-size-1); font-weight:600; }
-  &-2 { font-size:var(--font-size-0); font-weight:600; }
+  &-1 { font-size:var(--font-size-1); }
+  &-2 { font-size:var(--font-size-0); }
 }
 
 :where(body) :focus-visible {
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 56f56045e5..1c93a66547 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -16,9 +16,11 @@
 .u-direction-rtl    { direction:rtl; }
 .u-x-small          { font-size:pxToRem(12)!important; }
 .u-small            { font-size:pxToRem(14)!important; }
+.u-medium           { font-size:pxToRem(16)!important; }
 .u-font-size-32     { font-size:pxToRem(32)!important; }
 .u-bold             { font-weight:600; }
 .u-normal           { font-weight:normal; }
+.u-underline        { text-decoration:underline; }
 .u-text-start       { text-align:start;   }
 .u-text-center      { text-align:center;  }
 .u-text-end         { text-align:end;     }

From 2f59a5b02bde9cdd465b162a2e7c0ddba9ccadb4 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 3 Apr 2023 17:31:54 +0900
Subject: [PATCH 096/167] Grid Header - fix style when missing colum

---
 packages/ui/src/8-grids/_grid-header.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/8-grids/_grid-header.scss b/packages/ui/src/8-grids/_grid-header.scss
index b130bf23d6..260bacb741 100644
--- a/packages/ui/src/8-grids/_grid-header.scss
+++ b/packages/ui/src/8-grids/_grid-header.scss
@@ -5,11 +5,13 @@
   /* mobile */
   @media #{$break1} {
     display:grid; grid-template-columns:auto auto;
+    grid-template-areas:  "col-1 col-2"
+                          "col-3 col-4";
     &-col {
-      &-1 { order:1; }
-      &-2 { order:2; justify-self:end;    }
-      &-3 { order:3; justify-self:start;  }
-      &-4 { order:4; justify-self:end;    }
+      &-1 { grid-area:col-1; }
+      &-2 { grid-area:col-2; justify-self:end;    }
+      &-3 { grid-area:col-3; justify-self:start;  }
+      &-4 { grid-area:col-4; justify-self:end;    }
     }
   }
   /* tablet & desktop */

From 93ec83956d84bd9c399f0bb53430b8574c9c7117 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 3 Apr 2023 18:36:57 +0900
Subject: [PATCH 097/167] Utility classes - add font utility classes

---
 packages/ui/src/_9-utilities.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 1c93a66547..79b751cb34 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -12,6 +12,10 @@
 .u-overflow-y-auto  { overflow-y:auto!important;  }
 
 /* text */
+.font-heading       { font-family:var(--heading-font);  }
+.font-content       { font-family:var(--content-font);  }
+.font-code          { font-family:var(--code-font);     }
+
 .u-direction-ltr    { direction:ltr; }
 .u-direction-rtl    { direction:rtl; }
 .u-x-small          { font-size:pxToRem(12)!important; }

From c575acf8bda08afa6197ce679f5decf78c58825c Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 3 Apr 2023 19:08:17 +0900
Subject: [PATCH 098/167] Select - add back native white-space: pre behavior

---
 packages/ui/src/6-elements/form/_text-inputs.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index 3db40aad1f..e6396e7b90 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -227,6 +227,7 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
 .select {
   position: relative;
   select {
+    white-space: pre;
     cursor: pointer;
     padding-inline-end: pxToRem(48);
     &:focus { outline:unset; }

From f4e1cc53fbed9cc2bbd71acf688f1ac07cc56a07 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 3 Apr 2023 19:14:41 +0900
Subject: [PATCH 099/167] Font utility class - add back native white-space: pre
 behavior

---
 packages/ui/src/_9-utilities.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 79b751cb34..cb5382429f 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -12,10 +12,6 @@
 .u-overflow-y-auto  { overflow-y:auto!important;  }
 
 /* text */
-.font-heading       { font-family:var(--heading-font);  }
-.font-content       { font-family:var(--content-font);  }
-.font-code          { font-family:var(--code-font);     }
-
 .u-direction-ltr    { direction:ltr; }
 .u-direction-rtl    { direction:rtl; }
 .u-x-small          { font-size:pxToRem(12)!important; }
@@ -44,6 +40,11 @@
 .u-capitalize       { text-transform:capitalize; }
 .u-icon-small       { font-size:var(--icon-size-small); }
 
+/* Font family */
+.u-font-heading       { font-family:var(--heading-font);  }
+.u-font-content       { font-family:var(--content-font);  }
+.u-font-code          { font-family:var(--code-font);     }
+
 /* Mouse Cursor */
 .u-cursor-pointer       { cursor:pointer;       }
 

From d5013d7d33894d810a0247677a1cf415868e491b Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 3 Apr 2023 19:20:51 +0900
Subject: [PATCH 100/167] Text page - update utility font classes

---
 apps/pink/src/pages/utilities/text.mdx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/pink/src/pages/utilities/text.mdx b/apps/pink/src/pages/utilities/text.mdx
index 6d6a49d4e0..03184525af 100644
--- a/apps/pink/src/pages/utilities/text.mdx
+++ b/apps/pink/src/pages/utilities/text.mdx
@@ -45,7 +45,10 @@ description: Text ensures consistent text size, weight, line height and breaks a
 | `u-un-break-text`    | `white-space: nowrap !important;`                 | Stays the same                  |
 | `u-capitalize`       | `text-transform: capitalize;`                     | Stays the same                  |
 | `u-icon-small`       | `font-size: var(--icon-size-small);`              | Stays the same                  |
-
+|                      |                                                   |                                 |
+| `u-font-heading`     | `font-family: var(--heading-font);`               | Stays the same                  |
+| `u-font-content`     | `font-family: var(--content-font);`               | Stays the same                  |
+| `u-font-code`        | `font-family: var(--code-font);`                  | Stays the same                  |
 <Preview>
   <div>
     <p class="text u-x-small">x-small</p>

From 4d02ee0557c68d015bd4dc36ae20b5cf85464bb7 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 3 Apr 2023 20:25:07 +0900
Subject: [PATCH 101/167] Graph Horizontal - Add new component partial -
 graph-horizontal.mdx - styles - _graph-horizontal.scss

---
 .../src/pages/components/graph-horizontal.mdx | 86 +++++++++++++++++++
 .../src/7-components/_graph-horizontal.scss   | 38 ++++++++
 packages/ui/src/7-components/_index.scss      |  1 +
 3 files changed, 125 insertions(+)
 create mode 100644 apps/pink/src/pages/components/graph-horizontal.mdx
 create mode 100644 packages/ui/src/7-components/_graph-horizontal.scss

diff --git a/apps/pink/src/pages/components/graph-horizontal.mdx b/apps/pink/src/pages/components/graph-horizontal.mdx
new file mode 100644
index 0000000000..d6695442e9
--- /dev/null
+++ b/apps/pink/src/pages/components/graph-horizontal.mdx
@@ -0,0 +1,86 @@
+---
+title: Graph - Horizontal
+description: Horizontal graph
+---
+
+<Preview noFlex>
+
+    <section class="graph-horizontal">
+
+        <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
+            <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
+                <span class="icon-chart-bar" aria-hidden="true"></span>
+                <span class="text">Bandwidth</span>
+            </h3>
+            <p class="u-medium u-bold">50%</p>
+        </div>
+
+        <div class="graph-horizontal-container" style="--graph-size:50%"></div>
+
+        <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
+            <span class="graph-horizontal-text-used">50.01GB</span>
+            <span class="graph-horizontal-text-max">100GB</span>
+        </div>
+    </section>
+
+</Preview>
+
+## Full Demo
+<Preview noFlex>
+<ul class="u-flex-vertical u-gap-24">
+    <li>
+        <section class="graph-horizontal">
+            <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
+                <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
+                    <span class="icon-chart-bar" aria-hidden="true"></span>
+                    <span class="text">Bandwidth</span>
+                </h3>
+                <p class="u-medium u-bold">50%</p>
+            </div>
+
+            <div class="graph-horizontal-container" style="--graph-size:50%"></div>
+
+            <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
+                <span class="graph-horizontal-text-used">50.01GB</span>
+                <span class="graph-horizontal-text-max">100GB</span>
+            </div>
+        </section>
+    </li>
+    <li>
+        <section class="graph-horizontal">
+            <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
+                <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
+                    <span class="icon-chart-bar" aria-hidden="true"></span>
+                    <span class="text">Bandwidth</span>
+                </h3>
+                <p class="u-medium u-bold u-color-text-warning">85%</p>
+            </div>
+
+            <div class="graph-horizontal-container is-warning" style="--graph-size:85%"></div>
+
+            <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
+                <span class="graph-horizontal-text-used">50.01GB</span>
+                <span class="graph-horizontal-text-max">100GB</span>
+            </div>
+        </section>
+    </li>
+    <li>
+        <section class="graph-horizontal">
+            <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
+                <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
+                    <span class="icon-chart-bar" aria-hidden="true"></span>
+                    <span class="text">Bandwidth</span>
+                </h3>
+                <p class="u-medium u-bold u-color-text-danger">105%</p>
+            </div>
+
+            <div class="graph-horizontal-container is-danger" style="--graph-size:105%"></div>
+
+            <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
+                <span class="graph-horizontal-text-used">50.01GB</span>
+                <span class="graph-horizontal-text-max">100GB</span>
+            </div>
+        </section>
+    </li>
+</ul>
+</Preview>
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_graph-horizontal.scss b/packages/ui/src/7-components/_graph-horizontal.scss
new file mode 100644
index 0000000000..8a7333ebd1
--- /dev/null
+++ b/packages/ui/src/7-components/_graph-horizontal.scss
@@ -0,0 +1,38 @@
+@use '../abstract' as *;
+.graph-horizontal {
+  --p-graph-bg-color:       var(--color-neutral-30);
+  --p-graph-color-fill:     var(--color-information-100);
+  --p-graph-color-warning:  var(--color-warning-100);
+  --p-graph-color-danger:   var(--color-danger-100);
+
+  --p-graph-text-color:       var(--color-neutral-100);
+  --p-graph-used-text-color:  var(--color-neutral-120);
+  --p-graph-max-text-color:   var(--color-neutral-70);
+
+  display:flex; flex-direction:column; gap:pxToRem(8);
+  -webkit-user-select:none; user-select:none;
+
+  &-container {
+    display:flex; block-size:pxToRem(8); border-radius:var(--border-radius-xsmall);
+    background-color:hsl(var(--p-graph-bg-color));
+    /* fill graph */
+    &::before {
+      content:""; display:block; block-size:100%; flex-basis:var(--graph-size, 0);
+      border-radius:inherit; inline-size:var(--graph-size);
+      background-color:hsl(var(--p-graph-color-fill));
+    }
+    /* states */
+    &.is-warning  { --p-graph-color-fill:var(--p-graph-color-warning); }
+    &.is-danger   { --p-graph-color-fill:var(--p-graph-color-danger);  }
+  }
+  &-top-line  { color:hsl(var(--p-graph-text-color));      }
+  &-text-used { color:hsl(var(--p-graph-used-text-color)); }
+  &-text-max  { color:hsl(var(--p-graph-max-text-color));  }
+
+
+  #{$theme-dark} & {
+    --p-graph-bg-color:         var(--color-neutral-200);
+    --p-graph-text-color:       var(--color-neutral-50);
+    --p-graph-used-text-color:  var(--color-neutral-50);
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_index.scss b/packages/ui/src/7-components/_index.scss
index a3247291dc..0855b7aed3 100644
--- a/packages/ui/src/7-components/_index.scss
+++ b/packages/ui/src/7-components/_index.scss
@@ -18,6 +18,7 @@
 @forward "buttons-list";
 @forward "toggle-button";
 @forward "clickable-list";
+@forward "graph-horizontal";
 
 @forward "top-cover";
 @forward "code-panel";

From 4bfad87435daf0bf0da3006633c5b82d188aa196 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 3 Apr 2023 20:26:27 +0900
Subject: [PATCH 102/167] Graph Horizontal - Add new component partial -
 graph-horizontal.mdx - styles - _graph-horizontal.scss

---
 apps/pink/src/pages/components/graph-horizontal.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/pink/src/pages/components/graph-horizontal.mdx b/apps/pink/src/pages/components/graph-horizontal.mdx
index d6695442e9..ca3b86af1e 100644
--- a/apps/pink/src/pages/components/graph-horizontal.mdx
+++ b/apps/pink/src/pages/components/graph-horizontal.mdx
@@ -25,7 +25,7 @@ description: Horizontal graph
 
 </Preview>
 
-## Full Demo
+## Full Graph options
 <Preview noFlex>
 <ul class="u-flex-vertical u-gap-24">
     <li>

From a56fca866f480f9a136714c698a4075b5b642805 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 3 Apr 2023 20:29:34 +0900
Subject: [PATCH 103/167] Graph Horizontal - update full demo

---
 apps/pink/src/pages/components/graph-horizontal.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/pink/src/pages/components/graph-horizontal.mdx b/apps/pink/src/pages/components/graph-horizontal.mdx
index ca3b86af1e..1dae3eca77 100644
--- a/apps/pink/src/pages/components/graph-horizontal.mdx
+++ b/apps/pink/src/pages/components/graph-horizontal.mdx
@@ -50,8 +50,8 @@ description: Horizontal graph
         <section class="graph-horizontal">
             <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
                 <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
-                    <span class="icon-chart-bar" aria-hidden="true"></span>
-                    <span class="text">Bandwidth</span>
+                    <span class="icon-folder" aria-hidden="true"></span>
+                    <span class="text">Storage</span>
                 </h3>
                 <p class="u-medium u-bold u-color-text-warning">85%</p>
             </div>
@@ -68,8 +68,8 @@ description: Horizontal graph
         <section class="graph-horizontal">
             <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
                 <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
-                    <span class="icon-chart-bar" aria-hidden="true"></span>
-                    <span class="text">Bandwidth</span>
+                    <span class="icon-lightning-bolt" aria-hidden="true"></span>
+                    <span class="text">Compute</span>
                 </h3>
                 <p class="u-medium u-bold u-color-text-danger">105%</p>
             </div>
@@ -77,8 +77,8 @@ description: Horizontal graph
             <div class="graph-horizontal-container is-danger" style="--graph-size:105%"></div>
 
             <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
-                <span class="graph-horizontal-text-used">50.01GB</span>
-                <span class="graph-horizontal-text-max">100GB</span>
+                <span class="graph-horizontal-text-used">3.50hrs</span>
+                <span class="graph-horizontal-text-max">100hrs</span>
             </div>
         </section>
     </li>

From 4528408dff59635b58030d190b3d5049bd0bc3b1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 3 Apr 2023 13:49:05 +0200
Subject: [PATCH 104/167] chore: bump to rc.8

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2866ba4bbd..8e997dc7a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.7",
+      "version": "0.0.6-rc.8",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.7",
+      "version": "0.0.6-rc.8",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 1294bcd5b7..bf2465c12f 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.7",
+  "version": "0.0.6-rc.8",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c643bb7da1..a9c1944e22 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.7",
+  "version": "0.0.6-rc.8",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From 12b0e93f9ddd95ded65bf0964f7ca026cbb915e9 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 3 Apr 2023 21:04:49 +0900
Subject: [PATCH 105/167] Progress Bar - refactor name from -> Graph Horizontal

---
 ...{graph-horizontal.mdx => progress-bar.mdx} | 46 +++++++++----------
 packages/ui/src/7-components/_index.scss      |  2 +-
 ...aph-horizontal.scss => _progress-bar.scss} |  2 +-
 3 files changed, 25 insertions(+), 25 deletions(-)
 rename apps/pink/src/pages/components/{graph-horizontal.mdx => progress-bar.mdx} (56%)
 rename packages/ui/src/7-components/{_graph-horizontal.scss => _progress-bar.scss} (98%)

diff --git a/apps/pink/src/pages/components/graph-horizontal.mdx b/apps/pink/src/pages/components/progress-bar.mdx
similarity index 56%
rename from apps/pink/src/pages/components/graph-horizontal.mdx
rename to apps/pink/src/pages/components/progress-bar.mdx
index 1dae3eca77..929217166f 100644
--- a/apps/pink/src/pages/components/graph-horizontal.mdx
+++ b/apps/pink/src/pages/components/progress-bar.mdx
@@ -1,13 +1,13 @@
 ---
-title: Graph - Horizontal
-description: Horizontal graph
+title: Progress Bar
+description:
 ---
 
 <Preview noFlex>
 
-    <section class="graph-horizontal">
+    <section class="progress-bar">
 
-        <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
+        <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
             <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
                 <span class="icon-chart-bar" aria-hidden="true"></span>
                 <span class="text">Bandwidth</span>
@@ -15,22 +15,22 @@ description: Horizontal graph
             <p class="u-medium u-bold">50%</p>
         </div>
 
-        <div class="graph-horizontal-container" style="--graph-size:50%"></div>
+        <div class="progress-bar-container" style="--graph-size:50%"></div>
 
         <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
-            <span class="graph-horizontal-text-used">50.01GB</span>
-            <span class="graph-horizontal-text-max">100GB</span>
+            <span class="progress-bar-text-used">50.01GB</span>
+            <span class="progress-bar-text-max">100GB</span>
         </div>
     </section>
 
 </Preview>
 
-## Full Graph options
+## Full Progress Bar Options
 <Preview noFlex>
 <ul class="u-flex-vertical u-gap-24">
     <li>
-        <section class="graph-horizontal">
-            <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
+        <section class="progress-bar">
+            <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
                 <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
                     <span class="icon-chart-bar" aria-hidden="true"></span>
                     <span class="text">Bandwidth</span>
@@ -38,17 +38,17 @@ description: Horizontal graph
                 <p class="u-medium u-bold">50%</p>
             </div>
 
-            <div class="graph-horizontal-container" style="--graph-size:50%"></div>
+            <div class="progress-bar-container" style="--graph-size:50%"></div>
 
             <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
-                <span class="graph-horizontal-text-used">50.01GB</span>
-                <span class="graph-horizontal-text-max">100GB</span>
+                <span class="progress-bar-text-used">50.01GB</span>
+                <span class="progress-bar-text-max">100GB</span>
             </div>
         </section>
     </li>
     <li>
-        <section class="graph-horizontal">
-            <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
+        <section class="progress-bar">
+            <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
                 <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
                     <span class="icon-folder" aria-hidden="true"></span>
                     <span class="text">Storage</span>
@@ -56,17 +56,17 @@ description: Horizontal graph
                 <p class="u-medium u-bold u-color-text-warning">85%</p>
             </div>
 
-            <div class="graph-horizontal-container is-warning" style="--graph-size:85%"></div>
+            <div class="progress-bar-container is-warning" style="--graph-size:85%"></div>
 
             <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
-                <span class="graph-horizontal-text-used">50.01GB</span>
-                <span class="graph-horizontal-text-max">100GB</span>
+                <span class="progress-bar-text-used">50.01GB</span>
+                <span class="progress-bar-text-max">100GB</span>
             </div>
         </section>
     </li>
     <li>
-        <section class="graph-horizontal">
-            <div class="graph-horizontal-top-line u-flex u-gap-8 u-main-space-between">
+        <section class="progress-bar">
+            <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
                 <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
                     <span class="icon-lightning-bolt" aria-hidden="true"></span>
                     <span class="text">Compute</span>
@@ -74,11 +74,11 @@ description: Horizontal graph
                 <p class="u-medium u-bold u-color-text-danger">105%</p>
             </div>
 
-            <div class="graph-horizontal-container is-danger" style="--graph-size:105%"></div>
+            <div class="progress-bar-container is-danger" style="--graph-size:105%"></div>
 
             <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
-                <span class="graph-horizontal-text-used">3.50hrs</span>
-                <span class="graph-horizontal-text-max">100hrs</span>
+                <span class="progress-bar-text-used">3.50hrs</span>
+                <span class="progress-bar-text-max">100hrs</span>
             </div>
         </section>
     </li>
diff --git a/packages/ui/src/7-components/_index.scss b/packages/ui/src/7-components/_index.scss
index 0855b7aed3..e34e5ae43b 100644
--- a/packages/ui/src/7-components/_index.scss
+++ b/packages/ui/src/7-components/_index.scss
@@ -18,7 +18,7 @@
 @forward "buttons-list";
 @forward "toggle-button";
 @forward "clickable-list";
-@forward "graph-horizontal";
+@forward "progress-bar";
 
 @forward "top-cover";
 @forward "code-panel";
diff --git a/packages/ui/src/7-components/_graph-horizontal.scss b/packages/ui/src/7-components/_progress-bar.scss
similarity index 98%
rename from packages/ui/src/7-components/_graph-horizontal.scss
rename to packages/ui/src/7-components/_progress-bar.scss
index 8a7333ebd1..773306e44c 100644
--- a/packages/ui/src/7-components/_graph-horizontal.scss
+++ b/packages/ui/src/7-components/_progress-bar.scss
@@ -1,5 +1,5 @@
 @use '../abstract' as *;
-.graph-horizontal {
+.progress-bar {
   --p-graph-bg-color:       var(--color-neutral-30);
   --p-graph-color-fill:     var(--color-information-100);
   --p-graph-color-warning:  var(--color-warning-100);

From 3256096e585dba3effb09a176dceab22e5720f2c Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 4 Apr 2023 15:19:19 +0900
Subject: [PATCH 106/167] Refactor Grid With Side - Grid has two options: 1.
 Native scroll according to content 2. Scroll Inside the Main-Content - for
 Top Alert message

- Change location in "main-footer" in HTML demo pages
---
 apps/kitchensink/auth.html                   |  2 +-
 apps/kitchensink/auth2.html                  |  2 +-
 apps/kitchensink/cover-frame.html            |  3 +-
 apps/kitchensink/empty-state-cards.html      |  2 +-
 apps/kitchensink/functions.html              | 52 ++++++++++----------
 apps/kitchensink/getting-started.html        |  2 +-
 apps/kitchensink/index.html                  |  2 +-
 apps/kitchensink/no-side.html                |  3 +-
 apps/kitchensink/teamActivity.html           |  2 +-
 apps/kitchensink/user.html                   |  2 +-
 apps/kitchensink/users.html                  |  2 +-
 apps/kitchensink/wizard-form.html            |  1 -
 apps/kitchensink/wizard.html                 |  1 -
 packages/ui/src/8-grids/_grid-with-side.scss |  9 ++--
 14 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/apps/kitchensink/auth.html b/apps/kitchensink/auth.html
index e574de6ceb..e18e852190 100644
--- a/apps/kitchensink/auth.html
+++ b/apps/kitchensink/auth.html
@@ -527,8 +527,8 @@ <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
 
           </div>
         </div>
+        <footer class="main-footer"></footer>
       </section>
-      <footer class="main-footer"></footer>
     </main>
     <script type="module" src="/main.js"></script>
   </body>
diff --git a/apps/kitchensink/auth2.html b/apps/kitchensink/auth2.html
index c7b08da879..7d947bfa7c 100644
--- a/apps/kitchensink/auth2.html
+++ b/apps/kitchensink/auth2.html
@@ -518,8 +518,8 @@ <h4 class="modal-title">Apple OAuth2 Settings</h4>
    </ul>
 </form>
 </div>
+        <footer class="main-footer"></footer>
       </section>
-      <footer class="main-footer"></footer>
     </main>
     <script type="module" src="/main.js"></script>
   </body>
diff --git a/apps/kitchensink/cover-frame.html b/apps/kitchensink/cover-frame.html
index 13caf7dc59..86ecb86f7e 100644
--- a/apps/kitchensink/cover-frame.html
+++ b/apps/kitchensink/cover-frame.html
@@ -236,9 +236,8 @@ <h6 class="u-bold">Eldad Test</h6>
                 </section>
             </div>
         </div>
-
+        <footer class="main-footer"></footer>
     </section>
-    <footer class="main-footer"></footer>
 </main>
 
 
diff --git a/apps/kitchensink/empty-state-cards.html b/apps/kitchensink/empty-state-cards.html
index af34813ac0..b8baacf760 100644
--- a/apps/kitchensink/empty-state-cards.html
+++ b/apps/kitchensink/empty-state-cards.html
@@ -106,8 +106,8 @@ <h4 class="">You have no [files / users/ buckets / etc.]. Create a [file / etc.]
                 </section>
             </div>
         </div>
+        <footer class="main-footer"></footer>
     </section>
-    <footer class="main-footer"></footer>
 </main>
 <script type="module" src="/main.js"></script>
 </body>
diff --git a/apps/kitchensink/functions.html b/apps/kitchensink/functions.html
index 8017197e0d..777e7600bb 100644
--- a/apps/kitchensink/functions.html
+++ b/apps/kitchensink/functions.html
@@ -145,33 +145,33 @@ <h2 class="heading-level-6 u-trim-1">
       </div>
 
     </div>
+    <footer class="main-footer">
+      <div class="main-footer-start">
+        <ul class="inline-links is-no-padding-first-and-last u-x-small">
+          <li class="inline-links-item">
+            <a href=""><span class="text">version 1.1.1</span></a>
+          </li>
+          <li class="inline-links-item">
+            <a href=""><span class="text">Terms</span></a>
+          </li>
+          <li class="inline-links-item">
+            <a href=""><span class="text">Privacy</span></a>
+          </li>
+        </ul>
+      </div>
+      <div class="main-footer-end">
+        <ul class="inline-links is-no-padding-first-and-last u-x-small">
+          <li class="inline-links-item">
+            <span class="text">ⓒ 2022 Appwrite. All rights reserved.</span>
+          </li>
+          <li class="inline-links-item u-flex u-gap-8">
+            <a href=""><span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github"></span></a>
+            <a href=""><span class="icon-discord" aria-hidden="true" aria-label="Appwrite on Discord"></span></a>
+          </li>
+        </ul>
+      </div>
+    </footer>
   </section>
-  <footer class="main-footer">
-    <div class="main-footer-start">
-      <ul class="inline-links is-no-padding-first-and-last u-x-small">
-        <li class="inline-links-item">
-          <a href=""><span class="text">version 1.1.1</span></a>
-        </li>
-        <li class="inline-links-item">
-          <a href=""><span class="text">Terms</span></a>
-        </li>
-        <li class="inline-links-item">
-          <a href=""><span class="text">Privacy</span></a>
-        </li>
-      </ul>
-    </div>
-    <div class="main-footer-end">
-      <ul class="inline-links is-no-padding-first-and-last u-x-small">
-        <li class="inline-links-item">
-          <span class="text">ⓒ 2022 Appwrite. All rights reserved.</span>
-        </li>
-        <li class="inline-links-item u-flex u-gap-8">
-          <a href=""><span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github"></span></a>
-          <a href=""><span class="icon-discord" aria-hidden="true" aria-label="Appwrite on Discord"></span></a>
-        </li>
-      </ul>
-    </div>
-  </footer>
 
 </main>
 <script type="module" src="/main.js"></script>
diff --git a/apps/kitchensink/getting-started.html b/apps/kitchensink/getting-started.html
index 8383ae4f45..985bd80468 100644
--- a/apps/kitchensink/getting-started.html
+++ b/apps/kitchensink/getting-started.html
@@ -159,8 +159,8 @@ <h3 class="heading-level-7">Add a Platform</h3>
           </div>
           <form class="form"><ul class="form-list"></ul></form>
         </div>
+        <footer class="main-footer"></footer>
       </section>
-      <footer class="main-footer"></footer>
     </main>
     <script type="module" src="/main.js"></script>
   </body>
diff --git a/apps/kitchensink/index.html b/apps/kitchensink/index.html
index e5a7446034..5b51e7e492 100644
--- a/apps/kitchensink/index.html
+++ b/apps/kitchensink/index.html
@@ -1728,8 +1728,8 @@ <h4 class="side-nav-subtitle">Manage</h4>
             </div>
           </div>
         </section>
+        <footer class="main-footer"></footer>
       </div>
-      <footer class="main-footer"></footer>
     </main>
 
     <script type="module" src="/main.js"></script>
diff --git a/apps/kitchensink/no-side.html b/apps/kitchensink/no-side.html
index b66e33de84..eb90fe21fd 100644
--- a/apps/kitchensink/no-side.html
+++ b/apps/kitchensink/no-side.html
@@ -264,9 +264,8 @@ <h6 class="u-bold">Eldad Test</h6>
             </section>
           </div>
         </div>
-
+        <footer class="main-footer"></footer>
       </section>
-      <footer class="main-footer"></footer>
     </main>
     <script type="module" src="/main.js"></script>
   </body>
diff --git a/apps/kitchensink/teamActivity.html b/apps/kitchensink/teamActivity.html
index cef5a7f126..22a62dd02b 100644
--- a/apps/kitchensink/teamActivity.html
+++ b/apps/kitchensink/teamActivity.html
@@ -253,8 +253,8 @@ <h1 class="heading-level-4">
             </div>
           </div>
         </div>
+        <footer class="main-footer"></footer>
       </section>
-      <footer class="main-footer"></footer>
     </main>
     <script type="module" src="/main.js"></script>
   </body>
diff --git a/apps/kitchensink/user.html b/apps/kitchensink/user.html
index dfb6c87a7e..283cfe5301 100644
--- a/apps/kitchensink/user.html
+++ b/apps/kitchensink/user.html
@@ -446,8 +446,8 @@ <h6 class="heading-level-7">Reviews</h6>
           </div>
           <form class="form"><ul class="form-list"></ul></form>
         </div>
+        <footer class="main-footer"></footer>
       </section>
-      <footer class="main-footer"></footer>
     </main>
     <script type="module" src="/main.js"></script>
   </body>
diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index e9ae2f3acd..5fc3f446d3 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -8,7 +8,7 @@
   </head>
 
   <body>
-    <main class="grid-with-side" id="main">
+    <main class="grid-with-side is-fixed-layout" id="main">
       <div class="alert" style="background-color:red; block-size:100px;"></div>
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
diff --git a/apps/kitchensink/wizard-form.html b/apps/kitchensink/wizard-form.html
index 417ffcdac2..582a85f25c 100644
--- a/apps/kitchensink/wizard-form.html
+++ b/apps/kitchensink/wizard-form.html
@@ -238,7 +238,6 @@ <h6 class="u-bold">Eldad Test</h6>
         </div>
 
       </section>
-      <footer class="main-footer"></footer>
     </main>
 
 
diff --git a/apps/kitchensink/wizard.html b/apps/kitchensink/wizard.html
index 2e819285e1..969bda5db5 100644
--- a/apps/kitchensink/wizard.html
+++ b/apps/kitchensink/wizard.html
@@ -238,7 +238,6 @@ <h6 class="u-bold">Eldad Test</h6>
         </div>
 
       </section>
-      <footer class="main-footer"></footer>
     </main>
 
 
diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 8c79251e85..9058355751 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -22,16 +22,17 @@
                           "header header"
                           "side   main";
 
-    /* fixed layout size */
-    block-size:100vh; block-size:100lvh;
-    max-block-size:100vh; max-block-size:100lvh;
+    &.is-fixed-layout {
+      block-size:100vh; block-size:100lvh;
+      max-block-size:100vh; max-block-size:100lvh;
+      .main-content { overflow:auto; }
+    }
 
     &.is-empty-side {
       grid-template-areas:  "header header"
                             "main    main";
       .main-content > * { padding-inline-start:pxToRem(200); }
     }
-    .main-content { overflow:auto; }
     //.main-side { block-size:calc(100vh - var(--main-header-height)); }
   }
 }

From 39901cd0c6ce1e69de05e64590fcc714f786a18b Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 4 Apr 2023 16:34:32 +0900
Subject: [PATCH 107/167] Fix grid-with Side

---
 packages/ui/src/8-grids/_grid-with-side.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 9058355751..a36a3e67a3 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -31,9 +31,10 @@
     &.is-empty-side {
       grid-template-areas:  "header header"
                             "main    main";
+      .main-side { block-size:unset; }
       .main-content > * { padding-inline-start:pxToRem(200); }
     }
-    //.main-side { block-size:calc(100vh - var(--main-header-height)); }
+    .main-side { block-size:calc(100vh - var(--main-header-height)); }
   }
 }
 

From b3f32e0be6b5b03b47a0378900ac13cba291f1f8 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 4 Apr 2023 16:43:17 +0900
Subject: [PATCH 108/167] Progress Bar - Update icon color

---
 packages/ui/src/7-components/_progress-bar.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_progress-bar.scss b/packages/ui/src/7-components/_progress-bar.scss
index 773306e44c..a6b8585849 100644
--- a/packages/ui/src/7-components/_progress-bar.scss
+++ b/packages/ui/src/7-components/_progress-bar.scss
@@ -5,6 +5,7 @@
   --p-graph-color-warning:  var(--color-warning-100);
   --p-graph-color-danger:   var(--color-danger-100);
 
+  --p-graph-icon-color:       var(--color-neutral-70);
   --p-graph-text-color:       var(--color-neutral-100);
   --p-graph-used-text-color:  var(--color-neutral-120);
   --p-graph-max-text-color:   var(--color-neutral-70);
@@ -25,13 +26,17 @@
     &.is-warning  { --p-graph-color-fill:var(--p-graph-color-warning); }
     &.is-danger   { --p-graph-color-fill:var(--p-graph-color-danger);  }
   }
-  &-top-line  { color:hsl(var(--p-graph-text-color));      }
+  &-top-line  {
+    color:hsl(var(--p-graph-text-color));
+    [class*="icon"] { color:hsl(var(--p-graph-icon-color)); }
+  }
   &-text-used { color:hsl(var(--p-graph-used-text-color)); }
   &-text-max  { color:hsl(var(--p-graph-max-text-color));  }
 
 
   #{$theme-dark} & {
     --p-graph-bg-color:         var(--color-neutral-200);
+    --p-graph-icon-color:       var(--color-neutral-50);
     --p-graph-text-color:       var(--color-neutral-50);
     --p-graph-used-text-color:  var(--color-neutral-50);
   }

From 5abc44ebeb39cb3e29c39bca8df365024c4165a0 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 5 Apr 2023 13:43:50 +0200
Subject: [PATCH 109/167] chore: bump to rc.9

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8e997dc7a2..fa69b05644 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.8",
+      "version": "0.0.6-rc.9",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.8",
+      "version": "0.0.6-rc.9",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index bf2465c12f..4389154bf9 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.8",
+  "version": "0.0.6-rc.9",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a9c1944e22..94814d3dea 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.8",
+  "version": "0.0.6-rc.9",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From d5c62294a37c7d67d89e6b048f183a0001d12f22 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 13 Apr 2023 13:52:26 +0900
Subject: [PATCH 110/167] Main layout - fixed main layout console

---
 packages/ui/src/8-grids/_grid-with-side.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index a36a3e67a3..163eda9d13 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -25,6 +25,7 @@
     &.is-fixed-layout {
       block-size:100vh; block-size:100lvh;
       max-block-size:100vh; max-block-size:100lvh;
+      .main-side { block-size:auto; }
       .main-content { overflow:auto; }
     }
 

From 4f779c96bbef41abb5504d9026ddeeda9565e8aa Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 13 Apr 2023 13:55:31 +0900
Subject: [PATCH 111/167] Card - if Card is button hover style are affected

---
 packages/ui/src/6-elements/_card.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/6-elements/_card.scss b/packages/ui/src/6-elements/_card.scss
index 0cab8edd38..98f7f91a92 100644
--- a/packages/ui/src/6-elements/_card.scss
+++ b/packages/ui/src/6-elements/_card.scss
@@ -42,7 +42,7 @@
   }
 
   /* upload state */
-  &:where(a) {
+  &:where(a, button) {
     &:hover {
       --p-card-bg-color:      var(--p-card-bg-color-hover);
       --p-card-border-color:  var(--p-card-border-color-hover);

From 65c41b0067280f29c27807ecb6118866c5d4cc97 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 13 Apr 2023 17:39:51 +0900
Subject: [PATCH 112/167] Grid with no side - fix that footer will stick to
 bottom

---
 packages/ui/src/8-grids/_grid-with-side.scss | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 163eda9d13..9707bc7129 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -40,12 +40,8 @@
 }
 
 .main-content {
-  position:relative; display:flex; flex-direction:column; /* z-index:1; */
+  position:relative; display:flex; flex-direction:column; flex:1; /* z-index:1; */
   > * { flex-shrink:0; }
 } /* remove z-index, mage nug in modals */
 .main-header  { position:sticky; z-index:5; inset-block-start:0; }
-.main-side    { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh; overflow:hidden;}
-
-body {
-  touch-action: none!important;
-}
\ No newline at end of file
+.main-side    { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh; overflow:hidden;}
\ No newline at end of file

From 20711724522197c138dcf7e1a30e76426df3c762 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 13 Apr 2023 17:50:16 +0900
Subject: [PATCH 113/167] Grid Item 1 - Update project card component

---
 apps/pink/src/pages/components/grid-item.mdx   | 18 +++++++++++++++---
 packages/ui/src/7-components/_grid-item-1.scss |  3 ++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/pink/src/pages/components/grid-item.mdx b/apps/pink/src/pages/components/grid-item.mdx
index 716fa67aff..72659890a8 100644
--- a/apps/pink/src/pages/components/grid-item.mdx
+++ b/apps/pink/src/pages/components/grid-item.mdx
@@ -23,7 +23,11 @@ There are four positions within a grid item:
     <div class="grid-item-1">
         <div class="grid-item-1-start-start">
             <div class="eyebrow-heading-3">sub-header</div>
-            <h2 class="heading-level-6 u-margin-block-start-8">Header</h2>
+            <h2 class="heading-level-6 u-margin-block-start-4">Header</h2>
+            <p class="u-flex u-cross-baseline u-gap-4 u-margin-block-start-16">
+                <span class="icon-exclamation u-color-text-warning" aria-hidden="true"></span>
+                <span class="text">All services disabled</span>
+            </p>
         </div>
         <div class="grid-item-1-start-end">
             <div class="status is-complete">
@@ -63,7 +67,11 @@ Display multiple grid items by using the wrapper class `grid-box`:
             <div class="grid-item-1">
                 <div class="grid-item-1-start-start">
                     <div class="eyebrow-heading-3">sub-header</div>
-                    <h2 class="heading-level-6 u-margin-block-start-8">Header</h2>
+                    <h2 class="heading-level-6 u-margin-block-start-4">Header</h2>
+                    <p class="u-flex u-cross-baseline u-gap-4 u-margin-block-start-16">
+                        <span class="icon-exclamation u-color-text-warning" aria-hidden="true"></span>
+                        <span class="text">All services disabled</span>
+                    </p>
                 </div>
                 <div class="grid-item-1-end-start">
                     <div class="u-flex u-gap-16 u-flex-wrap">
@@ -87,7 +95,11 @@ Display multiple grid items by using the wrapper class `grid-box`:
             <div class="grid-item-1">
                 <div class="grid-item-1-start-start">
                     <div class="eyebrow-heading-3">sub-header</div>
-                    <h2 class="heading-level-6 u-margin-block-start-8">Header</h2>
+                    <h2 class="heading-level-6 u-margin-block-start-4">Header</h2>
+                    <p class="u-flex u-cross-baseline u-gap-4 u-margin-block-start-16">
+                        <span class="icon-exclamation u-color-text-warning" aria-hidden="true"></span>
+                        <span class="text">All services disabled</span>
+                    </p>
                 </div>
                 <div class="grid-item-1-start-end">
                     <div class="status">
diff --git a/packages/ui/src/7-components/_grid-item-1.scss b/packages/ui/src/7-components/_grid-item-1.scss
index f82394fa7b..0f28ebdc44 100644
--- a/packages/ui/src/7-components/_grid-item-1.scss
+++ b/packages/ui/src/7-components/_grid-item-1.scss
@@ -7,7 +7,8 @@
                         "end-start   end-end";
   grid-template-columns:  1fr auto;
   grid-template-rows:     auto  1fr;
-  gap:             pxToRem(16);
+  column-gap:             pxToRem(16);
+  row-gap:                pxToRem(48);
 
   block-size:     100%;
 

From c373ed8edc47327e62c376ccab5d2df57d88917a Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 13 Apr 2023 18:20:00 +0900
Subject: [PATCH 114/167] Update Service Card demo - add new utility class

---
 apps/kitchensink/auth.html                  | 18 +++++++++++++++---
 apps/pink/src/pages/utilities/box-model.mdx |  1 +
 packages/ui/src/_9-utilities.scss           |  1 +
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/kitchensink/auth.html b/apps/kitchensink/auth.html
index e18e852190..095b7ea4c8 100644
--- a/apps/kitchensink/auth.html
+++ b/apps/kitchensink/auth.html
@@ -18,7 +18,7 @@
     >
       <ul class="toaster-list s-9NkT8-ZB_aEl">
         <li class="alert-sticky is-success">
-          <button class="x-button" aria-label="close alert">
+          <button class="button is-text is-only-icon" style="--button-size:1.5rem;" aria-label="close alert">
             <span class="icon-x" aria-hidden="true"></span>
           </button>
           <div class="alert-sticky-image">
@@ -76,12 +76,24 @@ <h1 class="heading-level-4">Users</h1>
             <section class="common-section">
               <article class="card common-section">
                 <div class="common-section grid-1-2">
-                  <div class="grid-1-2-col-1">
+                  <div class="u-flex-vertical u-gap-16">
                     <h2 class="heading-level-7">Auth Methods</h2>
                     <p>Enable the auth methods you wish to use.</p>
                   </div>
                   <div class="grid-1-2-col-2">
-                    <form class="form">
+
+                    <div class="u-flex u-padding-block-8 u-sep-block-end">
+                      <ul class="buttons-list u-margin-inline-start-auto">
+                        <li class="buttons-list-item">
+                          <button class="button is-text"><span class="text">Enable all</span></button>
+                        </li>
+                        <li class="buttons-list-item">
+                          <button class="button is-text u-padding-inline-end-0"><span class="text">Disable all</span></button>
+                        </li>
+                      </ul>
+                    </div>
+
+                    <form class="form u-padding-block-start-20">
                       <ul class="form-list is-multiple">
                         <li class="form-item">
                           <label class="choice-item">
diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx
index bdbbe8b6b1..c19ea17b69 100644
--- a/apps/pink/src/pages/utilities/box-model.mdx
+++ b/apps/pink/src/pages/utilities/box-model.mdx
@@ -28,6 +28,7 @@ description: Box Model ensures consistent margins, paddings and borders across o
 | `u-padding-block-12`               | `padding-block: pxToRem(12) !important;`      | `padding-block: 0.75rem !important;`     |
 |                                    |                                               |                                          |
 | `u-padding-block-start-16`         | `padding-block-start: pxToRem(16)!important;` | `padding-block-start: 1rem !important;`  |
+| `u-padding-block-start-20`         | `padding-block-start: pxToRem(20)!important;` | `padding-block-start: 1,25rem !important;`|
 |                                    |                                               |                                          |
 | `u-padding-block-end-32`           | `padding-block-end: pxToRem(32)!important;`   | `padding-block-end: 2rem !important;`    |
 | `u-padding-block-end-56`           | `padding-block-end: pxToRem(56)!important;`   | `padding-block-end: 3.5rem !important;`  |
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index cb5382429f..1b02c8a136 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -225,6 +225,7 @@
 .u-padding-block-12       { padding-block:pxToRem(12)!important; }
 
 .u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; }
+.u-padding-block-start-20 { padding-block-start:pxToRem(20)!important; }
 
 .u-padding-block-end-32   { padding-block-end:pxToRem(32)!important; }
 .u-padding-block-end-56   { padding-block-end:pxToRem(56)!important; }

From 443984d67c5d37f4de9bd11a604e5e17279cb23a Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 13 Apr 2023 19:46:00 +0900
Subject: [PATCH 115/167] Add banner alert to console grid - demo on users.html
 page - add new alert styles - update utility classes

---
 apps/kitchensink/users.html               |  19 ++-
 apps/pink/src/pages/utilities/display.mdx | 172 +++++++++++-----------
 packages/ui/src/7-components/_alert.scss  |   5 +
 packages/ui/src/_9-utilities.scss         |   6 +-
 4 files changed, 112 insertions(+), 90 deletions(-)

diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html
index 5fc3f446d3..83d026b585 100644
--- a/apps/kitchensink/users.html
+++ b/apps/kitchensink/users.html
@@ -9,7 +9,24 @@
 
   <body>
     <main class="grid-with-side is-fixed-layout" id="main">
-      <div class="alert" style="background-color:red; block-size:100px;"></div>
+      <section class="alert is-action is-action-and-top-sticky is-danger u-sep-block-end">
+        <div class="alert-grid">
+          <span class="icon-info" aria-hidden="true"></span>
+          <div class="alert-content">
+            <h6 class="alert-title">This is a default alert</h6>
+            <p class="alert-message">
+              Some description about the alert sent to the user.
+            </p>
+          </div>
+          <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
+            <button class="button is-secondary is-full-width-mobile">
+              <span class="text">Update Billing details</span>
+            </button>
+          </div>
+        </div>
+      </section>
+
+
       {{> topNav}} {{> sideNav}}
       <section class="main-content">
         <div class="top-cover">
diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx
index 708e1f9e4c..ea153d4f67 100644
--- a/apps/pink/src/pages/utilities/display.mdx
+++ b/apps/pink/src/pages/utilities/display.mdx
@@ -3,92 +3,92 @@ title: Display
 description: Display controls how an element is displayed, including its alignment, spacing and size.
 ---
 
-| Class                      | Scss Definition                                                   | Compiled CSS                                                     |
-| -------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------- |
-| `u-block`                  | `display: block;`                                                 | Stays the same                                                   |
-| `u-inline`                 | `display: inline;`                                                | Stays the same                                                   |
-| `u-grid`                   | `display: grid;`                                                  | Stays the same                                                   |
-| `u-flex`                   | `display: flex;`                                                  | Stays the same                                                   |
-| `u-inline-flex`            | `display: inline-flex;`                                           | Stays the same                                                   |
-| `u-contents-mobile`        | `@media #{$break1} { {display: contents;} }`                      | Stays the same                                                   |
-|                            |                                                                   | `@media (max-width:767.99px) { display: contents; }`             |
-| `u-box-sizing-content`     | `box-sizing: content-box;`                                        | Stays the same                                                   |
-|                            |                                                                   |                                                                  |
-| `u-sep-inline-start`       | `border-inline-start: solid pxToRem(1) hsl(var(--color-border));` | `border-inline-start: solid 0.0625rem hsl(var(--color-border));` |
-| `u-sep-block-start`        | `border-block-start: solid pxToRem(1) hsl(var(--color-border));`  | `border-block-start: solid 0.0625rem hsl(var(--color-border));`  |
-| `u-sep-block-end`          | `border-block-end: solid pxToRem(1) hsl(var(--color-border));`    | `border-block-end: solid 0.0625rem hsl(var(--color-border));`    |
-|                            |                                                                   |                                                                  |
-| `u-gap-2`                  | `gap: pxToRem(2);`                                                | `gap: 0.125rem;`                                                 |
-| `u-gap-4`                  | `gap: pxToRem(4);`                                                | `gap: 0.25rem;`                                                  |
-| `u-gap-8`                  | `gap: pxToRem(8);`                                                | `gap: 0.5rem;`                                                   |
-| `u-gap-12`                 | `gap: pxToRem(12);`                                               | `gap: 0.75rem;`                                                  |
-| `u-gap-16`                 | `gap: pxToRem(16);`                                               | `gap: 1rem;`                                                     |
-| `u-gap-24`                 | `gap: pxToRem(24);`                                               | `gap: 1.5rem;`                                                   |
-| `u-gap-32`                 | `gap: pxToRem(32);`                                               | `gap: 2eem;`                                                     |
-|                            |                                                                   |                                                                  |
-| `u-column-gap-2`           | `column-gap: pxToRem(2);`                                         | `column-gap: 0.125rem;`                                          |
-| `u-column-gap-4`           | `column-gap: pxToRem(4);`                                         | `column-gap: 0.25rem;`                                           |
-| `u-column-gap-8`           | `column-gap: pxToRem(8);`                                         | `column-gap: 0.5rem;`                                            |
-| `u-column-gap-12`          | `column-gap: pxToRem(12);`                                        | `column-gap: 0.75rem;`                                           |
-| `u-column-gap-16`          | `column-gap: pxToRem(16);`                                        | `column-gap: 1rem;`                                              |
-| `u-column-gap-24`          | `column-gap: pxToRem(24);`                                        | `column-gap: 1.5rem;`                                            |
-| `u-column-gap-32`          | `column-gap: pxToRem(32);`                                        | `column-gap: 2rem;`                                              |
-|                            |                                                                   |                                                                  |
-| `u-row-gap-2`              | `row-gap: pxToRem(2);`                                            | `row-gap: 0.125rem;`                                             |
-| `u-row-gap-4`              | `row-gap: pxToRem(4);`                                            | `row-gap: 0.25rem;`                                              |
-| `u-row-gap-8`              | `row-gap: pxToRem(8);`                                            | `row-gap: 0.5rem;`                                               |
-| `u-row-gap-12`             | `row-gap: pxToRem(12);`                                           | `row-gap: 0.75rem;`                                              |
-| `u-row-gap-16`             | `row-gap: pxToRem(16);`                                           | `row-gap: 1rem;`                                                 |
-| `u-row-gap-24`             | `row-gap: pxToRem(24);`                                           | `row-gap: 1.5rem;`                                               |
-| `u-row-gap-32`             | `row-gap: pxToRem(32);`                                           | `row-gap: 2rem;`                                                 |
-|                            |                                                                   |                                                                  |
-| `u-row-gap-8`              | `row-gap: pxToRem(8);`                                            | `row-gap: 0.5rem;`                                               |
-| `u-row-gap-12`             | `row-gap: pxToRem(12);`                                           | `row-gap: 0.75rem;`                                              |
-| `u-row-gap-16`             | `row-gap: pxToRem(16);`                                           | `row-gap: 1rem;`                                                 |
-| `u-row-gap-24`             | `row-gap: pxToRem(24);`                                           | `row-gap: 1.5rem;`                                               |
-|                            |                                                                   |                                                                  |
-| `u-flex-vertical`          | `display:flex; flex-direction: column;`                           | Stays the same                                                   |
-| `u-flex-vertical-mobile`   | `@media #{$break1} { flex-direction:column; }`                    | `@media (max-width:767.99px) { flex-direction:column; }`         |
-| `u-flex-wrap`              | `flex-wrap: wrap;`                                                | Stays the same                                                   |
-| `u-stretch`                | `flex: 1;`                                                        | Stays the same                                                   |
-| `u-flex-basis-140`         | `flex-basis: pxToRem(140);`                                       | `flex-basis: 8.75rem`                                            |
-| `u-flex-basis-50-percent`  | `flex-basis: 50%;`                                                | Stays the same                                                   |
-| `u-flex-basis-100-percent` | `flex-basis: 100%;`                                               | Stays the same                                                   |
-| `u-flex-shrink-0`          | `flex-shrink: 0;`                                                 | Stays the same                                                   |
-| `u-flex-basis-auto`        | `flex-basis: auto;`                                               | Stays the same                                                   |
-|                            |                                                                   |                                                                  |
-| `u-grid-columns-auto-1fr`  | `grid-template-columns: auto 1fr;`                                | Stays the same                                                   |
-|                            |                                                                   |                                                                  |
-| `u-width-full-line`        | `inline-size: 100%;`                                              | Stays the same                                                   |
-| `u-width-150`              | `inline-size: pxToRem(150);`                                      | `inline-size: 9.375rem;`                                         |
-| `u-width-200`              | `inline-size: pxToRem(200);`                                      | `inline-size: 12.5rem;`                                          |
-| `u-width-250`              | `inline-size: pxToRem(250);`                                      | `inline-size: 15.625rem;`                                        |
-| `u-width-280-desktop`      | `@media #{$break3open} { inline-size: pxToRem(280); }`            | `@media (min-width:1199px) { inline-size: 17.25rem; }`           |
-|                            |                                                                   |                                                                  |
-| `u-min-width-0`            | `min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/` | Stays the same                                                   |
-| `u-min-width-200`          | `min-inline-size: pxToRem(200); `                                 | min-inline-size: 25rem;                                          |
-| `u-min-width-100-percent`  | `min-inline-size: 100%;`                                          | Stays the same                                                   |
-|                            |                                                                   |                                                                  |
-| `u-max-width-250`          | `max-inline-size: pxToRem(250);`                                  | `max-inline-size: 15.625rem;`                                    |
-| `u-max-width-300`          | `max-inline-size: pxToRem(300);`                                  | `max-inline-size: 18.75rem;`                                     |
-| `u-max-width-350`          | `max-inline-size: pxToRem(350);`                                  | `max-inline-size: 21.875rem;`                                    |
-| `u-max-width-400`          | `max-inline-size: pxToRem(400);`                                  | `max-inline-size: 25rem;`                                        |
-| `u-max-width-450`          | `max-inline-size: pxToRem(450);`                                  | `max-inline-size: 28.125rem;`                                    |
-| `u-max-width-500`          | `max-inline-size: pxToRem(500);`                                  | `max-inline-size: 31.25rem;`                                     |
-| `u-max-width-600`          | `max-inline-size: pxToRem(600);`                                  | `max-inline-size: 37.5rem;`                                      |
-| `u-max-width-650`          | `max-inline-size: pxToRem(650);`                                  | `max-inline-size: 40.625rem;`                                    |
-| `u-max-width-700`          | `max-inline-size: pxToRem(700);`                                  | `max-inline-size: 43.75rem;`                                     |
-| `u-max-width-100-percent`  | `max-inline-size:100%;`                                           | Stays the same                                                   |
-|                            |                                                                   |                                                                  |
-| `u-height-100-percent`     | `block-size: 100%;`                                               | Stays the same                                                   |
-| `u-height-auto`            | `block-size: auto !important;`                                    | Stays the same                                                   |
-| `u-full-screen-height`     | `block-size: 100vh; block-size: 100lvh;`                          | Stays the same                                                   |
-|                            |                                                                   |                                                                  |
-| `u-min-height-100`         | `min-block-size: pxToRem(100);`                                   | `min-block-size: 6.25rem;`                                       |
-| `u-min-height-184`         | `min-block-size: pxToRem(184);`                                   | `min-block-size: 11.5rem;`                                       |
-| `u-min-height-100-percent` | `min-block-size:100%;`                                            | Stays the same                                                   |
-|                            |                                                                   |                                                                  |
-| `u-max-height-200`         | `max-block-size: pxToRem(200);`                                   | `max-block-size: 12.5rem;`                                       |
+| Class                      | Scss Definition                                                               | Compiled CSS                                                                |
+| -------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `u-block`                  | `display: block;`                                                             | Stays the same                                                              |
+| `u-inline`                 | `display: inline;`                                                            | Stays the same                                                              |
+| `u-grid`                   | `display: grid;`                                                              | Stays the same                                                              |
+| `u-flex`                   | `display: flex;`                                                              | Stays the same                                                              |
+| `u-inline-flex`            | `display: inline-flex;`                                                       | Stays the same                                                              |
+| `u-contents-mobile`        | `@media #{$break1} { {display: contents;} }`                                  | `@media (max-width:767.99px) { display: contents; }`                        |
+|                            |                                                                               |                                                                             |
+| `u-box-sizing-content`     | `box-sizing: content-box;`                                                    | Stays the same                                                              |
+|                            |                                                                               |                                                                             |
+| `u-sep-inline-start`       | `border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important;`  | `border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important;` |
+| `u-sep-block-start`        | `border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important;`   | `border-block-start: solid 0.0625rem hsl(var(--color-border)) !important;`  |
+| `u-sep-block-end`          | `border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important;`     | `border-block-end: solid 0.0625rem hsl(var(--color-border)) !important;`    |
+|                            |                                                                               |                                                                             |
+| `u-gap-2`                  | `gap: pxToRem(2);`                                                            | `gap: 0.125rem;`                                                            |
+| `u-gap-4`                  | `gap: pxToRem(4);`                                                            | `gap: 0.25rem;`                                                             |
+| `u-gap-8`                  | `gap: pxToRem(8);`                                                            | `gap: 0.5rem;`                                                              |
+| `u-gap-12`                 | `gap: pxToRem(12);`                                                           | `gap: 0.75rem;`                                                             |
+| `u-gap-16`                 | `gap: pxToRem(16);`                                                           | `gap: 1rem;`                                                                |
+| `u-gap-24`                 | `gap: pxToRem(24);`                                                           | `gap: 1.5rem;`                                                              |
+| `u-gap-32`                 | `gap: pxToRem(32);`                                                           | `gap: 2eem;`                                                                |
+|                            |                                                                               |                                                                             |
+| `u-column-gap-2`           | `column-gap: pxToRem(2);`                                                     | `column-gap: 0.125rem;`                                                     |
+| `u-column-gap-4`           | `column-gap: pxToRem(4);`                                                     | `column-gap: 0.25rem;`                                                      |
+| `u-column-gap-8`           | `column-gap: pxToRem(8);`                                                     | `column-gap: 0.5rem;`                                                       |
+| `u-column-gap-12`          | `column-gap: pxToRem(12);`                                                    | `column-gap: 0.75rem;`                                                      |
+| `u-column-gap-16`          | `column-gap: pxToRem(16);`                                                    | `column-gap: 1rem;`                                                         |
+| `u-column-gap-24`          | `column-gap: pxToRem(24);`                                                    | `column-gap: 1.5rem;`                                                       |
+| `u-column-gap-32`          | `column-gap: pxToRem(32);`                                                    | `column-gap: 2rem;`                                                         |
+|                            |                                                                               |                                                                             |
+| `u-row-gap-2`              | `row-gap: pxToRem(2);`                                                        | `row-gap: 0.125rem;`                                                        |
+| `u-row-gap-4`              | `row-gap: pxToRem(4);`                                                        | `row-gap: 0.25rem;`                                                         |
+| `u-row-gap-8`              | `row-gap: pxToRem(8);`                                                        | `row-gap: 0.5rem;`                                                          |
+| `u-row-gap-12`             | `row-gap: pxToRem(12);`                                                       | `row-gap: 0.75rem;`                                                         |
+| `u-row-gap-16`             | `row-gap: pxToRem(16);`                                                       | `row-gap: 1rem;`                                                            |
+| `u-row-gap-24`             | `row-gap: pxToRem(24);`                                                       | `row-gap: 1.5rem;`                                                          |
+| `u-row-gap-32`             | `row-gap: pxToRem(32);`                                                       | `row-gap: 2rem;`                                                            |
+|                            |                                                                               |                                                                             |
+| `u-row-gap-8`              | `row-gap: pxToRem(8);`                                                        | `row-gap: 0.5rem;`                                                          |
+| `u-row-gap-12`             | `row-gap: pxToRem(12);`                                                       | `row-gap: 0.75rem;`                                                         |
+| `u-row-gap-16`             | `row-gap: pxToRem(16);`                                                       | `row-gap: 1rem;`                                                            |
+| `u-row-gap-24`             | `row-gap: pxToRem(24);`                                                       | `row-gap: 1.5rem;`                                                          |
+|                            |                                                                               |                                                                             |
+| `u-flex-vertical`          | `display:flex; flex-direction: column;`                                       | Stays the same                                                              |
+| `u-flex-vertical-mobile`   | `@media #{$break1} { flex-direction:column; }`                                | `@media (max-width:767.99px) { flex-direction:column; }`                    |
+| `u-flex-wrap`              | `flex-wrap: wrap;`                                                            | Stays the same                                                              |
+| `u-stretch`                | `flex: 1;`                                                                    | Stays the same                                                              |
+| `u-flex-basis-140`         | `flex-basis: pxToRem(140);`                                                   | `flex-basis: 8.75rem`                                                       |
+| `u-flex-basis-50-percent`  | `flex-basis: 50%;`                                                            | Stays the same                                                              |
+| `u-flex-basis-100-percent` | `flex-basis: 100%;`                                                           | Stays the same                                                              |
+| `u-flex-shrink-0`          | `flex-shrink: 0;`                                                             | Stays the same                                                              |
+| `u-flex-basis-auto`        | `flex-basis: auto;`                                                           | Stays the same                                                              |
+|                            |                                                                               |                                                                             |
+| `u-grid-columns-auto-1fr`  | `grid-template-columns: auto 1fr;`                                            | Stays the same                                                              |
+|                            |                                                                               |                                                                             |
+| `u-width-full-line`        | `inline-size: 100%;`                                                          | Stays the same                                                              |
+| `u-width-150`              | `inline-size: pxToRem(150);`                                                  | `inline-size: 9.375rem;`                                                    |
+| `u-width-200`              | `inline-size: pxToRem(200);`                                                  | `inline-size: 12.5rem;`                                                     |
+| `u-width-250`              | `inline-size: pxToRem(250);`                                                  | `inline-size: 15.625rem;`                                                   |
+| `u-width-280-desktop`      | `@media #{$break3open} { inline-size: pxToRem(280); }`                        | `@media (min-width:1199px) { inline-size: 17.25rem; }`                      |
+|                            |                                                                               |                                                                             |
+| `u-min-width-0`            | `min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/`             | Stays the same                                                              |
+| `u-min-width-200`          | `min-inline-size: pxToRem(200); `                                             | min-inline-size: 25rem;                                                     |
+| `u-min-width-100-percent`  | `min-inline-size: 100%;`                                                      | Stays the same                                                              |
+|                            |                                                                               |                                                                             |
+| `u-max-width-250`          | `max-inline-size: pxToRem(250);`                                              | `max-inline-size: 15.625rem;`                                               |
+| `u-max-width-300`          | `max-inline-size: pxToRem(300);`                                              | `max-inline-size: 18.75rem;`                                                |
+| `u-max-width-350`          | `max-inline-size: pxToRem(350);`                                              | `max-inline-size: 21.875rem;`                                               |
+| `u-max-width-400`          | `max-inline-size: pxToRem(400);`                                              | `max-inline-size: 25rem;`                                                   |
+| `u-max-width-450`          | `max-inline-size: pxToRem(450);`                                              | `max-inline-size: 28.125rem;`                                               |
+| `u-max-width-500`          | `max-inline-size: pxToRem(500);`                                              | `max-inline-size: 31.25rem;`                                                |
+| `u-max-width-600`          | `max-inline-size: pxToRem(600);`                                              | `max-inline-size: 37.5rem;`                                                 |
+| `u-max-width-650`          | `max-inline-size: pxToRem(650);`                                              | `max-inline-size: 40.625rem;`                                               |
+| `u-max-width-700`          | `max-inline-size: pxToRem(700);`                                              | `max-inline-size: 43.75rem;`                                                |
+| `u-max-width-100-percent`  | `max-inline-size:100%;`                                                       | Stays the same                                                              |
+|                            |                                                                               |                                                                             |
+| `u-height-100-percent`     | `block-size: 100%;`                                                           | Stays the same                                                              |
+| `u-height-auto`            | `block-size: auto !important;`                                                | Stays the same                                                              |
+| `u-full-screen-height`     | `block-size: 100vh; block-size: 100lvh;`                                      | Stays the same                                                              |
+|                            |                                                                               |                                                                             |
+| `u-min-height-100`         | `min-block-size: pxToRem(100);`                                               | `min-block-size: 6.25rem;`                                                  |
+| `u-min-height-184`         | `min-block-size: pxToRem(184);`                                               | `min-block-size: 11.5rem;`                                                  |
+| `u-min-height-100-percent` | `min-block-size:100%;`                                                        | Stays the same                                                              |
+|                            |                                                                               |                                                                             |
+| `u-max-height-200`         | `max-block-size: pxToRem(200);`                                               | `max-block-size: 12.5rem;`                                                  |
 
 ## Alignments
 
diff --git a/packages/ui/src/7-components/_alert.scss b/packages/ui/src/7-components/_alert.scss
index cfea9e0ce4..0917d4d306 100644
--- a/packages/ui/src/7-components/_alert.scss
+++ b/packages/ui/src/7-components/_alert.scss
@@ -56,6 +56,11 @@
         block-size:pxToRem(4); inline-size:100%;
       }
     }
+
+    &-and-top-sticky {
+      --p-alert-bg-color: var(--color-neutral-0);
+      // #{$theme-dark} & { --p-alert-bg-color: var(--color-neutral-0); }
+    }
     @media #{$break1} {
       .alert-buttons { flex-direction:column; inline-size:100%; }
     }
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 1b02c8a136..2cf2cc29e4 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -115,9 +115,9 @@
 .u-contents-mobile{ @media #{$break1} {display:contents;} }
 
 .u-box-sizing-content { box-sizing:content-box; }
-.u-sep-inline-start   { border-inline-start:solid pxToRem(1) hsl(var(--color-border)); }
-.u-sep-block-start    { border-block-start:solid pxToRem(1) hsl(var(--color-border)); }
-.u-sep-block-end      { border-block-end:solid pxToRem(1) hsl(var(--color-border)); }
+.u-sep-inline-start   { border-inline-start:solid pxToRem(1) hsl(var(--color-border))!important; }
+.u-sep-block-start    { border-block-start:solid pxToRem(1) hsl(var(--color-border))!important; }
+.u-sep-block-end      { border-block-end:solid pxToRem(1) hsl(var(--color-border))!important; }
 
 .u-gap-2          { gap:pxToRem(2);   }
 .u-gap-4          { gap:pxToRem(4);   }

From 34622f33c886e7769c4b54750fd8c3b01edfac86 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 14 Apr 2023 13:28:32 +0900
Subject: [PATCH 116/167] Grid Item - fix demo - added new utility classes

---
 apps/pink/src/pages/components/grid-item.mdx |  6 +++---
 packages/ui/src/_9-utilities.scss            | 11 +++++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/pink/src/pages/components/grid-item.mdx b/apps/pink/src/pages/components/grid-item.mdx
index 72659890a8..308b6d59e3 100644
--- a/apps/pink/src/pages/components/grid-item.mdx
+++ b/apps/pink/src/pages/components/grid-item.mdx
@@ -26,7 +26,7 @@ There are four positions within a grid item:
             <h2 class="heading-level-6 u-margin-block-start-4">Header</h2>
             <p class="u-flex u-cross-baseline u-gap-4 u-margin-block-start-16">
                 <span class="icon-exclamation u-color-text-warning" aria-hidden="true"></span>
-                <span class="text">All services disabled</span>
+                <span class="u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50">All services disabled</span>
             </p>
         </div>
         <div class="grid-item-1-start-end">
@@ -70,7 +70,7 @@ Display multiple grid items by using the wrapper class `grid-box`:
                     <h2 class="heading-level-6 u-margin-block-start-4">Header</h2>
                     <p class="u-flex u-cross-baseline u-gap-4 u-margin-block-start-16">
                         <span class="icon-exclamation u-color-text-warning" aria-hidden="true"></span>
-                        <span class="text">All services disabled</span>
+                        <span class="u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50">All services disabled</span>
                     </p>
                 </div>
                 <div class="grid-item-1-end-start">
@@ -98,7 +98,7 @@ Display multiple grid items by using the wrapper class `grid-box`:
                     <h2 class="heading-level-6 u-margin-block-start-4">Header</h2>
                     <p class="u-flex u-cross-baseline u-gap-4 u-margin-block-start-16">
                         <span class="icon-exclamation u-color-text-warning" aria-hidden="true"></span>
-                        <span class="text">All services disabled</span>
+                        <span class="u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50">All services disabled</span>
                     </p>
                 </div>
                 <div class="grid-item-1-start-end">
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 2cf2cc29e4..c531311d1e 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -59,6 +59,17 @@
 .u-color-text-gray      { color:hsl(var(--color-text-gray));     }
 .u-color-text-pink      { color:hsl(var(--color-pink-text));     }
 
+/* color text light mode only */
+:where(body:not(#{$theme-dark})) {
+  .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-70))!important; }
+}
+
+
+/* color text dark mode only */
+#{$theme-dark} {
+  .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-50))!important; }
+}
+
 /* position */
 
 .u-position-sticky      {

From 1510a36bc02cafc4227ae83a9d688a7de46d7b81 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 14 Apr 2023 16:39:42 +0900
Subject: [PATCH 117/167] Update trim function CSS utility class

---
 packages/ui/src/_9-utilities.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index c531311d1e..8708f3bc81 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -35,7 +35,7 @@
 .u-trim-1           { @include trim(1); }
 .u-trim-2           { @include trim(2); }
 .u-trim-3           { @include trim(3); }
-.u-trim-start       { @include trim(1); direction:rtl; text-align:left; }
+.u-trim-start       { @include trim; direction:rtl; text-align:left; }
 .u-un-break-text    { white-space:nowrap!important; }
 .u-capitalize       { text-transform:capitalize; }
 .u-icon-small       { font-size:var(--icon-size-small); }

From dc52971fc369560233dcc07a1f3dac8b7ada32db Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 14 Apr 2023 18:36:27 +0900
Subject: [PATCH 118/167] Fix trim in demo of input

---
 apps/pink/src/pages/elements/input-field.mdx | 4 ++--
 apps/pink/src/pages/utilities/display.mdx    | 1 +
 packages/ui/src/_9-utilities.scss            | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index 2aba882107..b593014c4c 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -347,7 +347,7 @@ Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
                                 <li class="drop-list-item">
                                     <button class="drop-button">
                                         <div class="u-flex u-cross-baseline u-gap-12">
-                                            <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
+                                            <span class="u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg667fg6fg67fc68ac3515e4bc06</span>
                                             <span class="u-flex-1 u-trim-1">Bessie, Cooper, bessiecooper@gmail.com, bessiecooper.com</span>
                                         </div>
                                     </button>
@@ -355,7 +355,7 @@ Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
                                 <li class="drop-list-item">
                                     <button class="drop-button">
                                         <div class="u-flex u-cross-baseline u-gap-12">
-                                            <span class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg6673515e4bc06</span>
+                                            <span class="u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">63f1efg6673515e4bc06</span>
                                             <span class="u-flex-1 u-trim-1">Baseball, Football, ball@gmail.com, playingball.com</span>
                                         </div>
                                     </button>
diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx
index ea153d4f67..00e1561169 100644
--- a/apps/pink/src/pages/utilities/display.mdx
+++ b/apps/pink/src/pages/utilities/display.mdx
@@ -60,6 +60,7 @@ description: Display controls how an element is displayed, including its alignme
 | `u-grid-columns-auto-1fr`  | `grid-template-columns: auto 1fr;`                                            | Stays the same                                                              |
 |                            |                                                                               |                                                                             |
 | `u-width-full-line`        | `inline-size: 100%;`                                                          | Stays the same                                                              |
+| `u-width-140`              | `inline-size: pxToRem(140);`                                                  | `inline-size: 8.75rem;`                                                     |
 | `u-width-150`              | `inline-size: pxToRem(150);`                                                  | `inline-size: 9.375rem;`                                                    |
 | `u-width-200`              | `inline-size: pxToRem(200);`                                                  | `inline-size: 12.5rem;`                                                     |
 | `u-width-250`              | `inline-size: pxToRem(250);`                                                  | `inline-size: 15.625rem;`                                                   |
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 8708f3bc81..2a8621d5ae 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -167,6 +167,7 @@
 
 .u-width-fit-content      { inline-size:fit-content;     }
 .u-width-full-line        { inline-size:100%;            }
+.u-width-140              { inline-size:pxToRem(140);    }
 .u-width-150              { inline-size:pxToRem(150);    }
 .u-width-200              { inline-size:pxToRem(200);    }
 .u-width-250              { inline-size:pxToRem(250);    }

From e98f271ae5fecb85d3229120c62197a13dd2bd0b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 14 Apr 2023 13:01:51 +0200
Subject: [PATCH 119/167] chore: bump to rc.10

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fa69b05644..53dd0085c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.9",
+      "version": "0.0.6-rc.10",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.9",
+      "version": "0.0.6-rc.10",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 4389154bf9..35c951c002 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.9",
+  "version": "0.0.6-rc.10",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 94814d3dea..39dae50884 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.9",
+  "version": "0.0.6-rc.10",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From 70d949ee210b7657f58f0c12561adabeb540f279 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 19 Apr 2023 14:21:29 +0100
Subject: [PATCH 120/167] fix: alert grid issue

---
 packages/ui/src/8-grids/_grid-with-side.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 9707bc7129..b9f898b110 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -1,7 +1,7 @@
 @use "../abstract" as *;
 .grid-with-side {
   position: relative;
-  :where(.alert)        { grid-area:alert;  }
+  > .alert   { grid-area:alert;  }
   :where(.main-header)  { grid-area:header; }
   :where(.main-side)    { grid-area:side;   }
   :where(.main-content) { grid-area:main;   }

From 2b3fa705bef92f71d4f50c2510279c08a2b19f0c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 19 Apr 2023 14:27:18 +0100
Subject: [PATCH 121/167] chore: bump

---
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/icons/package.json b/packages/icons/package.json
index 35c951c002..02e00c6ab5 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.10",
+  "version": "0.0.6-rc.11",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 39dae50884..890431d728 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.10",
+  "version": "0.0.6-rc.11",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From e4e38c58d71d60c7d38367b88176c75e7ff8f464 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 3 May 2023 14:09:23 +0300
Subject: [PATCH 122/167] Grid with Side - Update structure of selector of CSS
 Grid

---
 packages/ui/src/8-grids/_grid-with-side.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index b9f898b110..d3e1eb54f1 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -1,10 +1,12 @@
 @use "../abstract" as *;
 .grid-with-side {
   position: relative;
-  > .alert   { grid-area:alert;  }
-  :where(.main-header)  { grid-area:header; }
-  :where(.main-side)    { grid-area:side;   }
-  :where(.main-content) { grid-area:main;   }
+  > {
+    :where(.alert)        { grid-area:alert;  }
+    :where(.main-header)  { grid-area:header; }
+    :where(.main-side)    { grid-area:side;   }
+    :where(.main-content) { grid-area:main;   }
+  }
 
   @media #{$break1}, #{$break2} {
     .main-side { display:none; }

From f3a17bc08bf935da859882174c4f13510c41a4a9 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Sun, 7 May 2023 09:38:21 +0300
Subject: [PATCH 123/167] Image Item - Update structure of selector of CSS Grid

---
 packages/ui/src/6-elements/_image-item.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/6-elements/_image-item.scss b/packages/ui/src/6-elements/_image-item.scss
index 4ffe9b47f0..af0fda06b1 100644
--- a/packages/ui/src/6-elements/_image-item.scss
+++ b/packages/ui/src/6-elements/_image-item.scss
@@ -1,5 +1,5 @@
 @use '../abstract' as *;
-
+/* TODO: check if can be merged with Avatar */
 .image-item {
   --p-image-item-bg-color: var(--color-neutral-5);
   --p-image-item-border-color: var(--color-neutral-10);
@@ -11,6 +11,7 @@
   --p-image-item-size: #{$size-item-image};
 
   display:grid; place-content:center;
+  flex-shrink:0; /* in case it a child of flexbox */
   inline-size:var(--p-image-item-full-size); block-size:var(--p-image-item-full-size);
   background-color:hsl(var(--p-image-item-bg-color)); border:solid pxToRem(1) hsl(var(--p-image-item-border-color));
   border-radius:var(--border-radius-circular);

From bba7a0b82bebf9d483cf684fff61897fcb28ee7d Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 8 May 2023 15:22:53 +0300
Subject: [PATCH 124/167] Interactive Text Output - remove special padding-end
 - Add new utility class for padding-end - Update demo page of utility class -
 update demo page of output.mdx

---
 apps/pink/src/pages/elements/output.mdx                       | 2 +-
 apps/pink/src/pages/utilities/box-model.mdx                   | 1 +
 packages/ui/src/6-elements/form/_interactive-text-output.scss | 2 +-
 packages/ui/src/_9-utilities.scss                             | 1 +
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/pink/src/pages/elements/output.mdx b/apps/pink/src/pages/elements/output.mdx
index 970076fb60..d998c2d2ca 100644
--- a/apps/pink/src/pages/elements/output.mdx
+++ b/apps/pink/src/pages/elements/output.mdx
@@ -47,7 +47,7 @@ Interactive text output contains buttons:
 ## Buttons On Top
 
 <Preview center>
-    <div class="interactive-text-output is-buttons-on-top u-width-200">
+    <div class="interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200">
         <span class="text u-trim-start">This is the visible text which is very long</span>
         <div class="interactive-text-output-buttons">
             <button
diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx
index c19ea17b69..2d35ce7a42 100644
--- a/apps/pink/src/pages/utilities/box-model.mdx
+++ b/apps/pink/src/pages/utilities/box-model.mdx
@@ -21,6 +21,7 @@ description: Box Model ensures consistent margins, paddings and borders across o
 | `u-padding-inline-32`              | `padding-inline: pxToRem(32) !important;`     | `padding-inline: 2rem !important;`       |
 |                                    |                                               |                                          |
 | `u-padding-inline-end-0`           | `padding-inline-end: 0 !important;`           | Stays the same                           |
+| `u-padding-inline-end-12`          | `padding-inline-end: pxToRem(12) !important;` | `padding-inline-end: 0.75rem !important;`|
 | `u-padding-inline-end-56`          | `padding-inline-end: pxToRem(56) !important;` | `padding-inline-end: 3.5rem !important;` |
 | `u-padding-inline-end-120`         | `padding-inline-end: pxToRem(120) !important;`| `padding-inline-end: 7.5rem !important;` |
 |                                    |                                               |                                          |
diff --git a/packages/ui/src/6-elements/form/_interactive-text-output.scss b/packages/ui/src/6-elements/form/_interactive-text-output.scss
index b7f8614bd5..e4659ab0af 100644
--- a/packages/ui/src/6-elements/form/_interactive-text-output.scss
+++ b/packages/ui/src/6-elements/form/_interactive-text-output.scss
@@ -26,7 +26,7 @@
   }
 
   &.is-buttons-on-top {
-    padding-inline-end:pxToRem(12); background-color:hsl(var(--p-background-color));
+    background-color:hsl(var(--p-background-color));
     .interactive-text-output-buttons {
       position:absolute; inset-inline-end:pxToRem(8); inset-block-start:pxToRem(4);
       filter: drop-shadow(0px 0px pxToRem(4) hsl(var(--p-background-color)))
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 2a8621d5ae..d1b7d82524 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -230,6 +230,7 @@
 .u-padding-inline-32      { padding-inline:pxToRem(32)!important; }
 
 .u-padding-inline-end-0   { padding-inline-end:0!important; }
+.u-padding-inline-end-12  { padding-inline-end:pxToRem(12)!important; }
 .u-padding-inline-end-56  { padding-inline-end:pxToRem(56)!important; }
 .u-padding-inline-end-120 { padding-inline-end:pxToRem(120)!important; }
 

From 84b55b072d7282a548ee0e233f672e6fdb504bf2 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 8 May 2023 15:53:24 +0300
Subject: [PATCH 125/167] Card + Container - decrease padding size in mobile:
 -- Card - padding changed from 32px to 16px -- container - padding changed
 from 20px to 16px

---
 packages/ui/src/6-elements/_card.scss      | 5 +++++
 packages/ui/src/6-elements/_container.scss | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/6-elements/_card.scss b/packages/ui/src/6-elements/_card.scss
index 98f7f91a92..47e7fe5f0e 100644
--- a/packages/ui/src/6-elements/_card.scss
+++ b/packages/ui/src/6-elements/_card.scss
@@ -77,6 +77,11 @@
     --p-card-bg-color-hover:      var(--color-neutral-200);
     --p-card-border-color-hover:  var(--color-neutral-150);
   }
+
+  @media #{$break1} {
+    $padding: pxToRem(16);
+    --p-card-padding: var(--card-padding-mobile, #{$padding});
+  }
 }
 
 .separator-with-text {
diff --git a/packages/ui/src/6-elements/_container.scss b/packages/ui/src/6-elements/_container.scss
index e1bdef6c9c..0c16b27006 100644
--- a/packages/ui/src/6-elements/_container.scss
+++ b/packages/ui/src/6-elements/_container.scss
@@ -11,7 +11,7 @@
   margin-inline: auto;
   max-inline-size: var(--p-container-max-size);
   &.is-size-xl { --p-container-max-size:var(--container-size-xl); }
-  @media #{$break1}     { $padding-inline:pxToRem(20); --p-container-padding-inline:#{$padding-inline}; }
+  @media #{$break1}     { $padding-inline:pxToRem(16); --p-container-padding-inline:#{$padding-inline}; }
   @media #{$break2}     { $padding-inline:pxToRem(30); --p-container-padding-inline:#{$padding-inline}; }
   @media #{$break3open} { $padding-inline:pxToRem(50); --p-container-padding-inline:#{$padding-inline}; }
 }

From b4960d6b163fcdcd59a5cba31fe2dd7e1b5cf6d1 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 9 May 2023 10:45:48 +0300
Subject: [PATCH 126/167] Alert - New state: "is-standalone" - update demo
 alert.mdx page

---
 apps/pink/src/pages/components/alert.mdx | 146 ++++++++++++++++++++++-
 packages/ui/src/7-components/_alert.scss |  12 +-
 2 files changed, 152 insertions(+), 6 deletions(-)

diff --git a/apps/pink/src/pages/components/alert.mdx b/apps/pink/src/pages/components/alert.mdx
index 16e1333c41..99ed339364 100644
--- a/apps/pink/src/pages/components/alert.mdx
+++ b/apps/pink/src/pages/components/alert.mdx
@@ -7,11 +7,12 @@ description: Alerts display both task-generated and system-generated messages. T
 
 In the Appwrite console, we use two types of alerts:
 
-| Class            | Type   |                                                                                                                      |
-| ---------------- | ------ | -------------------------------------------------------------------------------------------------------------------- |
-| `alert`          | Inline | Inline alerts present additional information to the user related to content within a form or a body of text.         |
-| `alert is-action`| Action | Alert action is based Alert type Inline                                                                              |
-| `alert-sticky`   | Sticky | Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. |
+| Class                | Type        |                                                                                                                      |
+| -------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- |
+| `alert`              | Inline      | Inline alerts present additional information to the user related to content within a form or a body of text.         |
+| `alert is-standalone`| Standalone  | Alert Standalone is based Alert type Inline                                                                          |
+| `alert is-action`    | Action      | Alert action is based Alert type Inline                                                                              |
+| `alert-sticky`       | Sticky      | Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. |
 
 ## States
 
@@ -48,6 +49,33 @@ In the Appwrite console, we use five states of alerts:
     </section>
 </Preview>
 
+<Preview noFlex>
+    <section class="alert is-standalone">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a standalone alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+</Preview>
+
 <Preview noFlex>
     <section class="alert is-action">
         <div class="alert-grid">
@@ -126,6 +154,33 @@ In the Appwrite console, we use five states of alerts:
     </section>
 </Preview>
 
+<Preview noFlex>
+    <section class="alert is-standalone is-info">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a standalone alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+</Preview>
+
 <Preview noFlex>
     <section class="alert is-action is-info">
         <div class="alert-grid">
@@ -204,6 +259,33 @@ In the Appwrite console, we use five states of alerts:
     </section>
 </Preview>
 
+<Preview noFlex>
+    <section class="alert is-standalone is-success">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a standalone alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+</Preview>
+
 <Preview noFlex>
     <section class="alert is-action is-success">
         <div class="alert-grid">
@@ -282,6 +364,33 @@ In the Appwrite console, we use five states of alerts:
     </section>
 </Preview>
 
+<Preview noFlex>
+    <section class="alert is-standalone is-warning">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a standalone alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+</Preview>
+
 <Preview noFlex>
     <section class="alert is-action is-warning">
         <div class="alert-grid">
@@ -360,6 +469,33 @@ In the Appwrite console, we use five states of alerts:
     </section>
 </Preview>
 
+<Preview noFlex>
+    <section class="alert is-standalone is-danger">
+        <div class="alert-grid">
+            <button
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
+                aria-label="close alert box"
+            >
+                <span class="icon-x" aria-hidden="true"></span>
+            </button>
+            <span class="icon-info" aria-hidden="true"></span>
+            <div class="alert-content">
+                <h6 class="alert-title">This is a standalone alert</h6>
+                <p class="alert-message">Some description about the alert sent to the user.</p>
+                <div class="alert-buttons u-flex">
+                    <button class="button is-text">
+                        <span class="text">Action 1</span>
+                    </button>
+                    <button class="button is-text">
+                        <span class="text">Action 2</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+</Preview>
+
 <Preview noFlex>
     <section class="alert is-action is-danger">
         <div class="alert-grid">
diff --git a/packages/ui/src/7-components/_alert.scss b/packages/ui/src/7-components/_alert.scss
index 0917d4d306..97f36b9a78 100644
--- a/packages/ui/src/7-components/_alert.scss
+++ b/packages/ui/src/7-components/_alert.scss
@@ -44,6 +44,7 @@
 
   .button   { --button-size:1.25rem; font-size:var(--font-size-0); }
 
+  /* alert layout state */
   &.is-action {
     position:relative; padding:pxToRem(16); padding-block-start:pxToRem(18);
     border-width:0; border-radius:0;
@@ -65,8 +66,17 @@
       .alert-buttons { flex-direction:column; inline-size:100%; }
     }
   }
+  &.is-standalone {
+    --p-alert-bg-color:     var(--color-neutral-0);
+    --p-alert-border-color: var(--color-neutral-10);
+    box-shadow:             var(--shadow-small);
+    #{$theme-dark} {
+      --p-alert-bg-color:     var(--color-neutral-300);
+      --p-alert-border-color: var(--color-neutral-200);
+    }
+  }
 
-  /* alert types */
+  /* alert types (colors) */
   &.is-info     { --p-alert-color:var(--p-alert-color-info); }
   &.is-success  { --p-alert-color:var(--p-alert-color-success); }
   &.is-warning  { --p-alert-color:var(--p-alert-border-warning); }

From da1b15ed230ec28f08abd70b517bb0b9d1cf64fb Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 9 May 2023 11:06:24 +0300
Subject: [PATCH 127/167] Utility - New display:contents utility class

---
 apps/pink/src/pages/utilities/display.mdx | 1 +
 packages/ui/src/_9-utilities.scss         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx
index 00e1561169..2beb06fcbc 100644
--- a/apps/pink/src/pages/utilities/display.mdx
+++ b/apps/pink/src/pages/utilities/display.mdx
@@ -10,6 +10,7 @@ description: Display controls how an element is displayed, including its alignme
 | `u-grid`                   | `display: grid;`                                                              | Stays the same                                                              |
 | `u-flex`                   | `display: flex;`                                                              | Stays the same                                                              |
 | `u-inline-flex`            | `display: inline-flex;`                                                       | Stays the same                                                              |
+| `u-contents`               | `display: contents;`                                                          | Stays the same                                                              |
 | `u-contents-mobile`        | `@media #{$break1} { {display: contents;} }`                                  | `@media (max-width:767.99px) { display: contents; }`                        |
 |                            |                                                                               |                                                                             |
 | `u-box-sizing-content`     | `box-sizing: content-box;`                                                    | Stays the same                                                              |
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index d1b7d82524..0e1dd7f321 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -123,6 +123,7 @@
 .u-grid           { display:grid;         }
 .u-flex           { display:flex;         }
 .u-inline-flex    { display:inline-flex;  }
+.u-contents       { display:contents;     }
 .u-contents-mobile{ @media #{$break1} {display:contents;} }
 
 .u-box-sizing-content { box-sizing:content-box; }

From 6721a10d5b6fd6db57d4844db9f3444162ce4b18 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 May 2023 16:15:06 +0200
Subject: [PATCH 128/167] chore: bump to 0.0.6-rc.12

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 53dd0085c9..db2c6dd498 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.10",
+      "version": "0.0.6-rc.12",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.10",
+      "version": "0.0.6-rc.12",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 02e00c6ab5..6734ed9bcc 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.11",
+  "version": "0.0.6-rc.12",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 890431d728..270b670ef9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.11",
+  "version": "0.0.6-rc.12",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From 40b0fdae27286b99012962f1230a727db8d09f1e Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 10 May 2023 12:50:13 +0300
Subject: [PATCH 129/167] Alert - Standalone - Fix colors in dar mode

---
 packages/ui/src/7-components/_alert.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_alert.scss b/packages/ui/src/7-components/_alert.scss
index 97f36b9a78..944161e798 100644
--- a/packages/ui/src/7-components/_alert.scss
+++ b/packages/ui/src/7-components/_alert.scss
@@ -70,7 +70,7 @@
     --p-alert-bg-color:     var(--color-neutral-0);
     --p-alert-border-color: var(--color-neutral-10);
     box-shadow:             var(--shadow-small);
-    #{$theme-dark} {
+    #{$theme-dark} & {
       --p-alert-bg-color:     var(--color-neutral-300);
       --p-alert-border-color: var(--color-neutral-200);
     }

From 272b5ff577f9ab333d770bf58f580ce791aa33c4 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 18 May 2023 13:25:31 +0300
Subject: [PATCH 130/167] Table - - Add new state for table:
 "is-table-row-medium-size" - update demo page table.mdx

---
 apps/pink/src/pages/elements/table.mdx | 134 +++++++++++++++++++++++++
 packages/ui/src/6-elements/_table.scss |  11 +-
 2 files changed, 141 insertions(+), 4 deletions(-)

diff --git a/apps/pink/src/pages/elements/table.mdx b/apps/pink/src/pages/elements/table.mdx
index f0a7618111..1404de14b5 100644
--- a/apps/pink/src/pages/elements/table.mdx
+++ b/apps/pink/src/pages/elements/table.mdx
@@ -157,6 +157,140 @@ In the Appwrite console, we use three styles of tables:
 </table>
 </Preview><br /><br /><br />
 
+| Class                      | Type                 |                                                                                  |
+| -------------------------- | -------------------- | -------------------------------------------------------------------------------- |
+| `is-table-row-medium-size` | Narrow rows          | Change heght from 72px to 54px                                                   |
+
+<Preview center>
+    <table class="table is-table-row-medium-size">
+        <thead class="table-thead">
+        <tr class="table-row">
+            <th class="table-thead-col"><span class="eyebrow-heading-3">Filename</span></th>
+            <th class="table-thead-col is-only-desktop" style="--p-col-width:140">
+                <span class="eyebrow-heading-3">Type</span>
+            </th>
+            <th class="table-thead-col is-only-desktop" style="--p-col-width:100">
+                <span class="eyebrow-heading-3">Size</span>
+            </th>
+            <th class="table-thead-col is-only-desktop" style="--p-col-width:120">
+                <span class="eyebrow-heading-3">Created</span>
+            </th>
+            <th class="table-thead-col" style="--p-col-width:40">
+            </th>
+        </tr>
+        </thead>
+        <tbody class="table-tbody">
+        <tr class="table-row">
+            <td class="table-col" data-title="Name">
+                <div class="u-inline-flex u-cross-center u-gap-12">
+                <span class="image">
+                     <img
+                         class="avatar"
+                         width="32"
+                         height="32"
+                         src="https://unsplash.it/41"
+                         alt=""
+                     />
+                </span>
+                    <span class="text u-break-word u-line-height-1-5">airport.jpg</span>
+                </div>
+            </td>
+            <td class="table-col is-only-desktop" data-title="Type">
+                <div class="tag"><span class="text">image/jpeg</span></div>
+            </td>
+            <td class="table-col is-only-desktop" data-title="Size">
+                <span class="text">336.6 kB</span>
+            </td>
+            <td class="table-col is-only-desktop" data-title="Created">
+                <time class="text">11 Mar 2022</time>
+            </td>
+            <td class="table-col u-overflow-visible">
+                <button class="button is-text is-only-icon" aria-label="more options">
+                    <span class="icon-dots-horizontal" aria-hidden="true"></span>
+                </button>
+            </td>
+        </tr>
+        <tr class="table-row">
+            <td class="table-col" data-title="Name">
+                <div class="u-inline-flex u-cross-center u-gap-12">
+                <span class="image">
+                     <img
+                         class="avatar"
+                         width="32"
+                         height="32"
+                         src="https://unsplash.it/40"
+                         alt=""
+                     />
+                </span>
+                    <span class="text u-break-word u-line-height-1-5">Mobile illustration - dark.png</span>
+                </div>
+            </td>
+            <td class="table-col is-only-desktop" data-title="Type">
+                <div class="tag"><span class="text">image/jpeg</span></div>
+            </td>
+            <td class="table-col is-only-desktop" data-title="Size">
+                <span class="text">336.6 kB</span>
+            </td>
+            <td class="table-col is-only-desktop" data-title="Created">
+                <time class="text">11 Mar 2022</time>
+            </td>
+            <td class="table-col">
+                <div class="u-flex">
+                    <button class="button is-text is-only-icon u-hide" aria-label="refresh">
+                        <span class="icon-refresh" aria-hidden="true"></span>
+                    </button>
+                    <button class="button is-text is-only-icon u-hide" aria-label="delete item">
+                        <span class="icon-trash" aria-hidden="true"></span>
+                    </button>
+                    <button class="button is-text is-only-icon" aria-label="more options">
+                        <span class="icon-dots-horizontal" aria-hidden="true"></span>
+                    </button>
+                </div>
+            </td>
+        </tr>
+        <tr class="table-row">
+            <td class="table-col" data-title="Name">
+                <div class="u-inline-flex u-cross-center u-gap-12">
+                <span class="image">
+                     <img
+                         class="avatar"
+                         width="32"
+                         height="32"
+                         src="https://unsplash.it/442"
+                         alt=""
+                     />
+                </span>
+                    <span class="text u-break-word u-line-height-1-5">airport.jpg</span>
+                </div>
+            </td>
+            <td class="table-col is-only-desktop" data-title="Type">
+                <div class="tag"><span class="text">image/jpeg</span></div>
+            </td>
+            <td class="table-col is-only-desktop" data-title="Size">
+                <span class="text">336.6 kB</span>
+            </td>
+            <td class="table-col is-only-desktop" data-title="Created">
+                <time class="text">11 Mar 2022</time>
+            </td>
+            <td class="table-col">
+                <div class="u-flex">
+                    <button class="button is-text is-only-icon u-hide" aria-label="refresh">
+                        <span class="icon-refresh" aria-hidden="true"></span>
+                    </button>
+                    <button class="button is-text is-only-icon u-hide" aria-label="delete item">
+                        <span class="icon-trash" aria-hidden="true"></span>
+                    </button>
+                    <button class="button is-text is-only-icon" aria-label="more options">
+                        <span class="icon-dots-horizontal" aria-hidden="true"></span>
+                    </button>
+                </div>
+            </td>
+        </tr>
+        </tbody>
+
+    </table>
+</Preview><br /><br /><br />
+
 | Class                    | Type                 |                                                                                  |
 | ------------------------ | -------------------- | -------------------------------------------------------------------------------- |
 | `is-remove-outer-styles` | Without Outer Styles | Secondary table - in the Appwrite console used mostly inside a card or a wizard. |
diff --git a/packages/ui/src/6-elements/_table.scss b/packages/ui/src/6-elements/_table.scss
index ea4457434d..b63ce61ebe 100644
--- a/packages/ui/src/6-elements/_table.scss
+++ b/packages/ui/src/6-elements/_table.scss
@@ -17,11 +17,9 @@
   border-collapse: collapse;
   background-color: hsl(var(--p-table-bg-color));
   border-radius: var(--p-border-radius);
-  box-shadow:0 0 0 pxToRem(1) hsl(var(--color-border));
+  box-shadow: 0 0 0 pxToRem(1) hsl(var(--color-border));
   inline-size: 100%;
 
-  &.is-table-layout-auto { table-layout:auto; }
-
   &-with-scroll {
     @include tableScroll; overflow:hidden;
     border-radius:var(--border-radius-medium);
@@ -56,7 +54,7 @@
     --p-col-width: auto;
     inline-size: calc(var(--p-col-width) / 16 * 1rem);
     /** **/
-    padding-block:pxToRem(16); block-size:pxToRem(48);
+    padding-block:pxToRem(16); block-size:pxToRem(40);
   }
   &-thead {
     display: table-header-group;
@@ -130,6 +128,11 @@
       }
     }
   }
+  &.is-table-row-medium-size {
+    :where(.table-col) {
+      padding-block:pxToRem(8);
+    }
+  }
 
   #{$theme-dark} & {
     /* global variable */

From 0323ccd85f0da145d7026935282c2fb5212e3803 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 18 May 2023 15:44:50 +0300
Subject: [PATCH 131/167] Checkbox - - Add new demo for "Indeterminate" state -
 Added JS in the example in order to demonstrate it - checkbox.mdx demo page
 updated

---
 apps/pink/src/pages/elements/checkbox.mdx | 46 ++++++++++++++++++-----
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/apps/pink/src/pages/elements/checkbox.mdx b/apps/pink/src/pages/elements/checkbox.mdx
index 8968c23d4f..c9bf887f8f 100644
--- a/apps/pink/src/pages/elements/checkbox.mdx
+++ b/apps/pink/src/pages/elements/checkbox.mdx
@@ -4,9 +4,15 @@ description: Checkboxes allow users to select one or more items from a set.
 ---
 
 <Preview center>
-  <input type="checkbox" />
-  <input type="checkbox" checked />
+    <input type="checkbox" />
+    <input type="checkbox" checked />
+    <input type="checkbox" class="js-indeterminate" />
+
+    <script set:html={
+        `Array.from(document.getElementsByClassName('js-indeterminate')).forEach(el => el.indeterminate = true)`
+    } />
 </Preview>
+**Note:** that Indeterminate state is done with javascript
 
 ## States
 
@@ -17,8 +23,16 @@ To disable a checkbox, add the following class:
 | `disabled` | Disabled | Use whenever clicking on a checkbox isn't allowed. |
 
 <Preview center>
-  <input type="checkbox" disabled /> <input type="checkbox" checked disabled />
+    <input type="checkbox" disabled />
+    <input type="checkbox" checked disabled />
+    <input type="checkbox" disabled class="js-indeterminate" />
+
+
+    <script set:html={
+        `Array.from(document.getElementsByClassName('js-indeterminate')).forEach(el => el.indeterminate = true)`
+    } />
 </Preview>
+**Note:** that Indeterminate state is done with javascript
 
 ## Sizes
 
@@ -33,19 +47,33 @@ There are three sizes of checkboxes; small, medium and large. Each size has its
 <Preview center>
   <only-preview>
     <div class="u-flex u-flex-vertical u-gap-16 ">
-      <div class="u-flex u-gap-16 u-main-center u-cross-center">
-        <input type="checkbox" class="is-small" />
-        <input type="checkbox" checked />
-        <input type="checkbox" class="is-large" />
-      </div>
+        <div class="u-flex u-gap-16 u-main-center u-cross-center">
+            <input type="checkbox" class="is-small" />
+            <input type="checkbox" />
+            <input type="checkbox" class="is-large" />
+        </div>
+        <div class="u-flex u-gap-16 u-main-center u-cross-center">
+            <input type="checkbox" class="is-small js-indeterminate" />
+            <input type="checkbox" class="js-indeterminate" />
+            <input type="checkbox" class="is-large js-indeterminate" />
+        </div>
     </div>
+
+      <script set:html={
+          `Array.from(document.getElementsByClassName('js-indeterminate')).forEach(el => el.indeterminate = true)`
+      } />
   </only-preview>
   <only-html>
     <input type="checkbox" class="is-small" />
-    <input type="checkbox" checked />
+    <input type="checkbox" />
     <input type="checkbox" class="is-large" />
+    <br />
+    <input type="checkbox" class="is-small js-indeterminate" />
+    <input type="checkbox" class="js-indeterminate" />
+    <input type="checkbox" class="is-large js-indeterminate" />
   </only-html>
 </Preview>
+**Note:** that Indeterminate state is done with javascript
 
 ## Best Practice
 

From 898b087c88a4c8d76ab95355240ef469cbe21bcd Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Sun, 21 May 2023 13:56:07 +0300
Subject: [PATCH 132/167] Grid with side - - Fix bug tables make grid bigger

---
 packages/ui/src/8-grids/_grid-with-side.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index d3e1eb54f1..ce4412acd4 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -1,6 +1,7 @@
 @use "../abstract" as *;
 .grid-with-side {
   position: relative;
+  --p-side-size: #{pxToRem(200)};
   > {
     :where(.alert)        { grid-area:alert;  }
     :where(.main-header)  { grid-area:header; }
@@ -18,11 +19,12 @@
   }
   @media #{$break3open} {
     display: grid;
-    grid-template-columns: minmax(pxToRem(200), auto) 1fr;
+    grid-template-columns: minmax(var(--p-side-size), auto) 1fr;
     grid-template-rows: auto auto 1fr;
     grid-template-areas:  "alert alert"
                           "header header"
                           "side   main";
+    > .main-content { max-inline-size:calc(100vw - var(--p-side-size)); }
 
     &.is-fixed-layout {
       block-size:100vh; block-size:100lvh;
@@ -35,7 +37,7 @@
       grid-template-areas:  "header header"
                             "main    main";
       .main-side { block-size:unset; }
-      .main-content > * { padding-inline-start:pxToRem(200); }
+      .main-content > * { padding-inline-start:var(--p-side-size); }
     }
     .main-side { block-size:calc(100vh - var(--main-header-height)); }
   }

From 75601653a7b28b347e37272e7d9e486b82fcb92f Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Sun, 21 May 2023 14:40:49 +0300
Subject: [PATCH 133/167] Table - - Add new demo, table with checkbox -
 table.mdx - Add new utility class - _9-utilities.scss - Update position.mdx -
 utility demo page

---
 apps/pink/src/pages/elements/table.mdx     | 65 ++++++++++++++++++++++
 apps/pink/src/pages/utilities/position.mdx |  3 +
 packages/ui/src/_9-utilities.scss          |  3 +
 3 files changed, 71 insertions(+)

diff --git a/apps/pink/src/pages/elements/table.mdx b/apps/pink/src/pages/elements/table.mdx
index 1404de14b5..e4d9e7da79 100644
--- a/apps/pink/src/pages/elements/table.mdx
+++ b/apps/pink/src/pages/elements/table.mdx
@@ -493,6 +493,71 @@ In the Appwrite console, we use three styles of tables:
     </div>
   </div>
 </Preview>
+
+<Preview noFlex>
+    <div class="table-with-scroll">
+        <div class="table-wrapper">
+            <table class="table is-sticky-scroll">
+                <thead class="table-thead">
+                <tr class="table-row">
+                    <th class="table-thead-col u-position-relative">
+                        <label class="u-position-absolute u-inset-0 u-flex u-main-center u-cross-center">
+                            <input type="checkbox" />
+                        </label>
+                    </th>
+                    <th class="table-thead-col" style="">
+                        <span class="eyebrow-heading-3">Collection ID</span>
+                    </th>
+                    <th class="table-thead-col" style="">
+                        <span class="eyebrow-heading-3">Name</span>
+                    </th>
+                    <th class="table-thead-col" style="">
+                        <span class="eyebrow-heading-3">Updated</span>
+                    </th>
+                    <th class="table-thead-col" style="--p-col-width:185">
+                        <span class="eyebrow-heading-3">Created</span>
+                    </th>
+                </tr>
+                </thead>
+                <tbody class="table-tbody">
+                <tr class="table-row">
+                    <td class="table-col u-position-relative" data-title="Selection">
+                        <label class="u-position-absolute u-inset-0 u-flex u-main-center u-cross-center">
+                            <input type="checkbox" aria-label="copy collection ID that start in 637a4 " />
+                        </label>
+                    </td>
+                    <td class="table-col" data-title="Collection ID">
+
+                        <div
+                            class="interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250"
+                        >
+                            <div class="text u-trim">637a40ba7a703e3936e1</div>
+                            <div class="interactive-text-output-buttons">
+                                <button
+                                    class="interactive-text-output-button is-hidden"
+                                    aria-label="copy text"
+                                >
+                                    <span class="icon-duplicate" aria-hidden="true"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="table-col" data-title="Name">
+                        <span class="text">Movie</span>
+                    </td>
+                    <td class="table-col" data-title="Updated">
+                        <time class="text">May 3, 2023, 17:32</time>
+                    </td>
+                    <td class="table-col" data-title="Created">
+                        <time class="text">May 3, 2023, 16:59</time>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</Preview>
+
 <br />
 <br />
 <br />
diff --git a/apps/pink/src/pages/utilities/position.mdx b/apps/pink/src/pages/utilities/position.mdx
index 183ac82703..6cdff88feb 100644
--- a/apps/pink/src/pages/utilities/position.mdx
+++ b/apps/pink/src/pages/utilities/position.mdx
@@ -7,8 +7,11 @@ description: An element's position can be quickly configured by using Position c
 | ------------------------ | --------------------------------- | -------------------------------- |
 | `u-position-relative`    | `position: relative;`             | Stays the same                   |
 | `u-position-absolute`    | `position: absolute;`             | Stays the same                   |
+| `u-position-fixed   `    | `position: fixed;`                | Stays the same                   |
 | `u-position-static`      | `position: static !important;`    | Stays the same                   |
 |                          |                                   |                                  |
+| `u-inset-0`              | `inset: 0;`                       | Stays the same                   |
+|                          |                                   |                                  |
 | `u-inset-inline-start-0` | `inset-inline-start: 0;`          | Stays the same                   |
 | `u-inset-inline-start-1` | `inset-inline-start: pxToRem(1);` | `inset-inline-start: 0.0625rem;` |
 | `u-inset-inline-start-4` | `inset-inline-start: pxToRem(4);` | `inset-inline-start: 0.25rem;`   |
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 0e1dd7f321..f70e5843cf 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -84,8 +84,11 @@
 }
 .u-position-relative    { position:relative; }
 .u-position-absolute    { position:absolute; }
+.u-position-fixed       { position:fixed; }
 .u-position-static      { position:static!important; }
 
+.u-inset-0              { inset:0; }
+
 .u-inset-inline-start-0 { inset-inline-start:0;  }
 .u-inset-inline-start-1 { inset-inline-start:pxToRem(1);  }
 .u-inset-inline-start-4 { inset-inline-start:pxToRem(4);  }

From cf6dd42a35bd85bc9d892e8ff46cb26daebf17cb Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Sun, 21 May 2023 16:23:50 +0300
Subject: [PATCH 134/167] Table - - Add cursor for clickable label

---
 apps/pink/src/pages/elements/table.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/pink/src/pages/elements/table.mdx b/apps/pink/src/pages/elements/table.mdx
index e4d9e7da79..c8ecbe3938 100644
--- a/apps/pink/src/pages/elements/table.mdx
+++ b/apps/pink/src/pages/elements/table.mdx
@@ -501,7 +501,7 @@ In the Appwrite console, we use three styles of tables:
                 <thead class="table-thead">
                 <tr class="table-row">
                     <th class="table-thead-col u-position-relative">
-                        <label class="u-position-absolute u-inset-0 u-flex u-main-center u-cross-center">
+                        <label class="u-position-absolute u-inset-0 u-flex u-main-center u-cross-center u-cursor-pointer">
                             <input type="checkbox" />
                         </label>
                     </th>
@@ -522,7 +522,7 @@ In the Appwrite console, we use three styles of tables:
                 <tbody class="table-tbody">
                 <tr class="table-row">
                     <td class="table-col u-position-relative" data-title="Selection">
-                        <label class="u-position-absolute u-inset-0 u-flex u-main-center u-cross-center">
+                        <label class="u-position-absolute u-inset-0 u-flex u-main-center u-cross-center u-cursor-pointer">
                             <input type="checkbox" aria-label="copy collection ID that start in 637a4 " />
                         </label>
                     </td>

From 17ddef55a17d969c127987b99d65a9d14a3eb564 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 22 May 2023 12:34:16 +0300
Subject: [PATCH 135/167] Inline Tag - - Add new 'is-info' state

---
 apps/pink/src/pages/elements/inline-tag.mdx | 12 ++++++++++++
 packages/ui/src/6-elements/_inline-tag.scss |  8 ++++++++
 2 files changed, 20 insertions(+)

diff --git a/apps/pink/src/pages/elements/inline-tag.mdx b/apps/pink/src/pages/elements/inline-tag.mdx
index bc4703bead..84ecc0a6e2 100644
--- a/apps/pink/src/pages/elements/inline-tag.mdx
+++ b/apps/pink/src/pages/elements/inline-tag.mdx
@@ -13,6 +13,18 @@ description: An inline tag is used as a number label inside a button. Some possi
     </span>
 </Preview>
 
+## Color State
+| Class        | Type       |                                    |
+| ------------ | ---------- | ---------------------------------- |
+| `is-info`    | info state | blue color for inline tag          |
+
+<Preview center>
+    <span class="inline-tag is-info">
+        <span class="text">2</span>
+    </span>
+</Preview>
+
+
 ## Usage with Buttons
 Incorporate the inline tag into secondary buttons or text buttons by doing the following:
 
diff --git a/packages/ui/src/6-elements/_inline-tag.scss b/packages/ui/src/6-elements/_inline-tag.scss
index 886787c774..44d70c7876 100644
--- a/packages/ui/src/6-elements/_inline-tag.scss
+++ b/packages/ui/src/6-elements/_inline-tag.scss
@@ -12,6 +12,9 @@
   --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-120));
   --p-inline-tag-bg-color-default:    var(--color-neutral-10);
 
+  --p-inline-tag-text-color-info:     var(--color-neutral-0);
+  --p-inline-tag-bg-color-info:       var(--color-information-100);
+
   display:inline-grid; place-content:center; padding-inline:var(--p-inline-tag-padding-inline);
 
   background-color: hsl(var(--p-inline-tag-bg-color));
@@ -20,6 +23,11 @@
 
   flex-shrink:0; font-weight:600;
 
+  &.is-info {
+    --p-inline-tag-text-color: var(--p-inline-tag-text-color-info);
+    --p-inline-tag-bg-color: var(--p-inline-tag-bg-color-info);
+  }
+
   /* Theme Dark */
   #{$theme-dark} & {
     --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-0));

From 96aebff7bb0adeac625d433c4cbe1f212a9c51ec Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 22 May 2023 12:35:07 +0300
Subject: [PATCH 136/167] Action Bar - - Add new partial - styles are in
 _action-bar.scss - HTML demo - action-bar.mdx

---
 apps/pink/src/pages/components/action-bar.mdx | 29 +++++++++++++++++++
 packages/ui/src/7-components/_action-bar.scss | 23 +++++++++++++++
 packages/ui/src/7-components/_index.scss      |  1 +
 3 files changed, 53 insertions(+)
 create mode 100644 apps/pink/src/pages/components/action-bar.mdx
 create mode 100644 packages/ui/src/7-components/_action-bar.scss

diff --git a/apps/pink/src/pages/components/action-bar.mdx b/apps/pink/src/pages/components/action-bar.mdx
new file mode 100644
index 0000000000..12c127f7d2
--- /dev/null
+++ b/apps/pink/src/pages/components/action-bar.mdx
@@ -0,0 +1,29 @@
+---
+title: Action bar
+description: The floating action bar is a tool that appears on top of the main layout and enables action execution.
+---
+
+| Class              | Type                  |                                              |
+| ------------------ | --------------------- | -------------------------------------------- |
+| `action-bar`       | Action Bar            | A class representing an Action Bar container |
+| `action-bar-start` | Action Bar Start side | Start side contenrt of Action Bar            |
+| `action-bar-end`   | Action Bar End side   | End side contenrt of Action Bar              |
+
+<Preview center>
+    <section class="action-bar">
+        <div class="action-bar-start u-flex u-gap-8">
+            <span class="inline-tag is-info"><span class="text">4</span></span>
+            <span class="text"><span class="is-not-mobile">documents</span> selected</span>
+        </div>
+        <div class="action-bar-end u-flex u-gap-8">
+            <button class="button is-text">
+                <span class="text">Cancel</span>
+            </button>
+            <button class="button is-secondary">
+                <span class="text">Delete <span class="is-not-mobile">selection</span></span>
+            </button>
+        </div>
+    </section>
+</Preview>
+
+
diff --git a/packages/ui/src/7-components/_action-bar.scss b/packages/ui/src/7-components/_action-bar.scss
new file mode 100644
index 0000000000..3adba1f496
--- /dev/null
+++ b/packages/ui/src/7-components/_action-bar.scss
@@ -0,0 +1,23 @@
+@use '../abstract' as *;
+.action-bar {
+    --p-action-bar-bg-color: var(--color-neutral-0);
+    --p-action-bar-border-color: var(--color-neutral-0);
+    --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} hsl(var(--color-neutral-150) / 0.14);
+
+    display:flex; gap:pxToRem(8); justify-content:space-between; align-items:baseline;
+    inline-size:pxToRem(312); padding-inline:pxToRem(12); padding-block:pxToRem(8);
+
+    background-color: hsl(var(--p-action-bar-bg-color));
+    border: solid pxToRem(1) hsl(var(--p-action-bar-border-color));
+    border-radius: var(--border-radius-small);
+    box-shadow: var(--p-action-bar-box-shadow); /* isn't standard box shadow */
+
+    /* tablet & desktop */
+    @media #{$break2open} { inline-size:pxToRem(500); }
+
+    #{$theme-dark} & {
+      --p-action-bar-bg-color: var(--color-neutral-300);
+      --p-action-bar-border-color: var(--color-neutral-200);
+      --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} #{pxToRem(8)} hsl(var(--color-neutral-500));
+    }
+}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_index.scss b/packages/ui/src/7-components/_index.scss
index e34e5ae43b..e911e31eaf 100644
--- a/packages/ui/src/7-components/_index.scss
+++ b/packages/ui/src/7-components/_index.scss
@@ -1,5 +1,6 @@
 @forward "alert";
 @forward "alert-sticky";
+@forward "action-bar";
 @forward "list";
 @forward "collapsible";
 @forward "tabs";

From 2f8ee59779786adaaacef74f7ece4383f9c4f070 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 22 May 2023 12:47:41 +0300
Subject: [PATCH 137/167] Action Bar - - Add kytchensync demo - added new
 utility classes - Update position.mdx utility class page

---
 apps/kitchensink/index.html                | 15 +++++++++++++++
 apps/pink/src/pages/utilities/position.mdx |  6 ++++++
 packages/ui/src/_9-utilities.scss          |  6 ++++++
 3 files changed, 27 insertions(+)

diff --git a/apps/kitchensink/index.html b/apps/kitchensink/index.html
index 5b51e7e492..ed047e3c72 100644
--- a/apps/kitchensink/index.html
+++ b/apps/kitchensink/index.html
@@ -1732,6 +1732,21 @@ <h4 class="side-nav-subtitle">Manage</h4>
       </div>
     </main>
 
+    <section class="action-bar u-position-fixed u-z-index-20 u-inset-block-end-16 u-inset-inline-0 u-margin-inline-auto">
+      <div class="action-bar-start u-flex u-gap-8">
+        <span class="inline-tag is-info"><span class="text">4</span></span>
+        <span class="text"><span class="is-not-mobile">documents</span> selected</span>
+      </div>
+      <div class="action-bar-end u-flex u-gap-8">
+        <button class="button is-text">
+          <span class="text">Cancel</span>
+        </button>
+        <button class="button is-secondary">
+          <span class="text">Delete <span class="is-not-mobile">selection</span></span>
+        </button>
+      </div>
+    </section>
+
     <script type="module" src="/main.js"></script>
   </body>
 </html>
diff --git a/apps/pink/src/pages/utilities/position.mdx b/apps/pink/src/pages/utilities/position.mdx
index 6cdff88feb..059cce9e4e 100644
--- a/apps/pink/src/pages/utilities/position.mdx
+++ b/apps/pink/src/pages/utilities/position.mdx
@@ -12,29 +12,35 @@ description: An element's position can be quickly configured by using Position c
 |                          |                                   |                                  |
 | `u-inset-0`              | `inset: 0;`                       | Stays the same                   |
 |                          |                                   |                                  |
+| `u-inset-inline-0`       | `inset-inline: 0;`                | Stays the same                   |
+|                          |                                   |                                  |
 | `u-inset-inline-start-0` | `inset-inline-start: 0;`          | Stays the same                   |
 | `u-inset-inline-start-1` | `inset-inline-start: pxToRem(1);` | `inset-inline-start: 0.0625rem;` |
 | `u-inset-inline-start-4` | `inset-inline-start: pxToRem(4);` | `inset-inline-start: 0.25rem;`   |
 | `u-inset-inline-start-8` | `inset-inline-start: pxToRem(8);` | `inset-inline-start: 0.5rem;`    |
 | `u-inset-inline-start-12`| `inset-inline-start: pxToRem(12);`| `inset-inline-start: 0.75rem;`   |
+| `u-inset-inline-start-16`| `inset-inline-start: pxToRem(16);`| `inset-inline-start: 1rem;`      |
 |                          |                                   |                                  |
 | `u-inset-inline-end-0`   | `inset-inline-end: 0;`            | Stays the same                   |
 | `u-inset-inline-end-1`   | `inset-inline-end: pxToRem(1);`   | `inset-inline-end: 0.0625rem;`   |
 | `u-inset-inline-end-4`   | `inset-inline-end: pxToRem(4);`   | `inset-inline-end: 0.25rem;`     |
 | `u-inset-inline-end-8`   | `inset-inline-end: pxToRem(8);`   | `inset-inline-end: 0.5rem;`      |
 | `u-inset-inline-end-12`  | `inset-inline-end: pxToRem(12);`  | `inset-inline-end: 0.75rem;`     |
+| `u-inset-inline-end-16`  | `inset-inline-end: pxToRem(16);`  | `inset-inline-end: 1rem;`        |
 |                          |                                   |                                  |
 | `u-inset-block-start-0`  | `inset-block-start: 0;`           | Stays the same                   |
 | `u-inset-block-start-1`  | `inset-block-start: pxToRem(1);`  | `inset-block-start: 0.0625rem;`  |
 | `u-inset-block-start-4`  | `inset-block-start: pxToRem(4);`  | `inset-block-start: 0.25rem;`    |
 | `u-inset-block-start-8`  | `inset-block-start: pxToRem(8);`  | `inset-block-start: 0.5rem;`     |
 | `u-inset-block-start-12` | `inset-block-start: pxToRem(12);` | `inset-block-start: 0.75rem;`    |
+| `u-inset-block-start-16` | `inset-block-start: pxToRem(16);` | `inset-block-start: 1rem;`       |
 |                          |                                   |                                  |
 | `u-inset-block-end-0`    | `inset-block-end: 0;`             | Stays the same                   |
 | `u-inset-block-end-1`    | `inset-block-end: pxToRem(1);`    | `inset-block-end: 0.0625rem;`    |
 | `u-inset-block-end-4`    | `inset-block-end: pxToRem(4);`    | `inset-block-end: 0.25rem;`      |
 | `u-inset-block-end-8`    | `inset-block-end: pxToRem(8);`    | `inset-block-end: 0.5rem;`       |
 | `u-inset-block-end-12`   | `inset-block-end: pxToRem(12);`   | `inset-block-end: 0.75rem;`      |
+| `u-inset-block-end-16`   | `inset-block-end: pxToRem(16);`   | `inset-block-end: 1rem;`         |
 
 ## Z-index Classes
 
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index f70e5843cf..25a49221e7 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -89,29 +89,35 @@
 
 .u-inset-0              { inset:0; }
 
+.u-inset-inline-0       { inset-inline:0; }
+
 .u-inset-inline-start-0 { inset-inline-start:0;  }
 .u-inset-inline-start-1 { inset-inline-start:pxToRem(1);  }
 .u-inset-inline-start-4 { inset-inline-start:pxToRem(4);  }
 .u-inset-inline-start-8 { inset-inline-start:pxToRem(8);  }
 .u-inset-inline-start-12 { inset-inline-start:pxToRem(12); }
+.u-inset-inline-start-16 { inset-inline-start:pxToRem(16); }
 
 .u-inset-inline-end-0   { inset-inline-end:0;    }
 .u-inset-inline-end-1   { inset-inline-end:pxToRem(1);    }
 .u-inset-inline-end-4   { inset-inline-end:pxToRem(4);    }
 .u-inset-inline-end-8   { inset-inline-end:pxToRem(8);    }
 .u-inset-inline-end-12   { inset-inline-end:pxToRem(12);  }
+.u-inset-inline-end-16   { inset-inline-end:pxToRem(16);  }
 
 .u-inset-block-start-0  { inset-block-start:0;   }
 .u-inset-block-start-1  { inset-block-start:pxToRem(1);   }
 .u-inset-block-start-4  { inset-block-start:pxToRem(4);   }
 .u-inset-block-start-8  { inset-block-start:pxToRem(8);   }
 .u-inset-block-start-12  { inset-block-start:pxToRem(12); }
+.u-inset-block-start-16  { inset-block-start:pxToRem(16); }
 
 .u-inset-block-end-0    { inset-block-end:0;     }
 .u-inset-block-end-1    { inset-block-end:pxToRem(1);     }
 .u-inset-block-end-4    { inset-block-end:pxToRem(4);     }
 .u-inset-block-end-8    { inset-block-end:pxToRem(8);     }
 .u-inset-block-end-12   { inset-block-end:pxToRem(12);    }
+.u-inset-block-end-16   { inset-block-end:pxToRem(16);    }
 
 .u-z-index-0   { z-index:0;  }
 .u-z-index-1   { z-index:1;  }

From 2a943b0581076fc0d535dce1d493677cd0a3b4f7 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 23 May 2023 10:25:10 +0300
Subject: [PATCH 138/167] Action Bar - - Add transition

---
 packages/ui/src/7-components/_action-bar.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/7-components/_action-bar.scss b/packages/ui/src/7-components/_action-bar.scss
index 3adba1f496..fd57d9cb47 100644
--- a/packages/ui/src/7-components/_action-bar.scss
+++ b/packages/ui/src/7-components/_action-bar.scss
@@ -11,6 +11,7 @@
     border: solid pxToRem(1) hsl(var(--p-action-bar-border-color));
     border-radius: var(--border-radius-small);
     box-shadow: var(--p-action-bar-box-shadow); /* isn't standard box shadow */
+    transition: var(--transition);
 
     /* tablet & desktop */
     @media #{$break2open} { inline-size:pxToRem(500); }

From dbff86296b5d52678e4cb0a3c3f4c0198a530e03 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 23 May 2023 10:26:00 +0300
Subject: [PATCH 139/167] Utilities Class - - Code alignment

---
 packages/ui/src/_9-utilities.scss | 54 +++++++++++++++----------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 25a49221e7..0d85e29137 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -91,33 +91,33 @@
 
 .u-inset-inline-0       { inset-inline:0; }
 
-.u-inset-inline-start-0 { inset-inline-start:0;  }
-.u-inset-inline-start-1 { inset-inline-start:pxToRem(1);  }
-.u-inset-inline-start-4 { inset-inline-start:pxToRem(4);  }
-.u-inset-inline-start-8 { inset-inline-start:pxToRem(8);  }
-.u-inset-inline-start-12 { inset-inline-start:pxToRem(12); }
-.u-inset-inline-start-16 { inset-inline-start:pxToRem(16); }
-
-.u-inset-inline-end-0   { inset-inline-end:0;    }
-.u-inset-inline-end-1   { inset-inline-end:pxToRem(1);    }
-.u-inset-inline-end-4   { inset-inline-end:pxToRem(4);    }
-.u-inset-inline-end-8   { inset-inline-end:pxToRem(8);    }
-.u-inset-inline-end-12   { inset-inline-end:pxToRem(12);  }
-.u-inset-inline-end-16   { inset-inline-end:pxToRem(16);  }
-
-.u-inset-block-start-0  { inset-block-start:0;   }
-.u-inset-block-start-1  { inset-block-start:pxToRem(1);   }
-.u-inset-block-start-4  { inset-block-start:pxToRem(4);   }
-.u-inset-block-start-8  { inset-block-start:pxToRem(8);   }
-.u-inset-block-start-12  { inset-block-start:pxToRem(12); }
-.u-inset-block-start-16  { inset-block-start:pxToRem(16); }
-
-.u-inset-block-end-0    { inset-block-end:0;     }
-.u-inset-block-end-1    { inset-block-end:pxToRem(1);     }
-.u-inset-block-end-4    { inset-block-end:pxToRem(4);     }
-.u-inset-block-end-8    { inset-block-end:pxToRem(8);     }
-.u-inset-block-end-12   { inset-block-end:pxToRem(12);    }
-.u-inset-block-end-16   { inset-block-end:pxToRem(16);    }
+.u-inset-inline-start-0   { inset-inline-start:0;           }
+.u-inset-inline-start-1   { inset-inline-start:pxToRem(1);  }
+.u-inset-inline-start-4   { inset-inline-start:pxToRem(4);  }
+.u-inset-inline-start-8   { inset-inline-start:pxToRem(8);  }
+.u-inset-inline-start-12  { inset-inline-start:pxToRem(12); }
+.u-inset-inline-start-16  { inset-inline-start:pxToRem(16); }
+
+.u-inset-inline-end-0     { inset-inline-end:0;             }
+.u-inset-inline-end-1     { inset-inline-end:pxToRem(1);    }
+.u-inset-inline-end-4     { inset-inline-end:pxToRem(4);    }
+.u-inset-inline-end-8     { inset-inline-end:pxToRem(8);    }
+.u-inset-inline-end-12    { inset-inline-end:pxToRem(12);   }
+.u-inset-inline-end-16    { inset-inline-end:pxToRem(16);   }
+
+.u-inset-block-start-0    { inset-block-start:0;            }
+.u-inset-block-start-1    { inset-block-start:pxToRem(1);   }
+.u-inset-block-start-4    { inset-block-start:pxToRem(4);   }
+.u-inset-block-start-8    { inset-block-start:pxToRem(8);   }
+.u-inset-block-start-12   { inset-block-start:pxToRem(12);  }
+.u-inset-block-start-16   { inset-block-start:pxToRem(16);  }
+
+.u-inset-block-end-0      { inset-block-end:0;              }
+.u-inset-block-end-1      { inset-block-end:pxToRem(1);     }
+.u-inset-block-end-4      { inset-block-end:pxToRem(4);     }
+.u-inset-block-end-8      { inset-block-end:pxToRem(8);     }
+.u-inset-block-end-12     { inset-block-end:pxToRem(12);    }
+.u-inset-block-end-16     { inset-block-end:pxToRem(16);    }
 
 .u-z-index-0   { z-index:0;  }
 .u-z-index-1   { z-index:1;  }

From b489c981adc5b34cb1462c88b147d33803f07d6e Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 23 May 2023 16:44:38 +0300
Subject: [PATCH 140/167] Table - - update horizontal padding of table cells

---
 packages/ui/src/6-elements/_table.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui/src/6-elements/_table.scss b/packages/ui/src/6-elements/_table.scss
index b63ce61ebe..5d25f02926 100644
--- a/packages/ui/src/6-elements/_table.scss
+++ b/packages/ui/src/6-elements/_table.scss
@@ -34,8 +34,7 @@
   &-wrapper { overflow:auto; }
   :where(.table-thead-col, .table-col) {
     display:table-cell; box-sizing:content-box;
-    padding-block:pxToRem(24); padding-inline:pxToRem(32);
-    vertical-align:middle;
+    padding-block:pxToRem(24); padding-inline:pxToRem(16); vertical-align:middle;
     @media #{$break1} { padding-inline:pxToRem(12); }
     //> * {vertical-align:middle;} //make issue when there is text unwrap with wrap
     &:not(:first-child) { @include trim(); display:table-cell; }

From cf0bfa415e3769a56b2ccc99532c08fc5a859a72 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 23 May 2023 18:01:04 +0300
Subject: [PATCH 141/167] Table - - Update styles of table with checkboxes -
 New negative margin utility class - Update documentation of utility class

---
 apps/pink/src/pages/elements/table.mdx      | 49 +++++++++++----------
 apps/pink/src/pages/utilities/box-model.mdx |  1 +
 packages/ui/src/6-elements/_table.scss      |  8 ++--
 packages/ui/src/_9-utilities.scss           |  1 +
 4 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/apps/pink/src/pages/elements/table.mdx b/apps/pink/src/pages/elements/table.mdx
index c8ecbe3938..9809404b29 100644
--- a/apps/pink/src/pages/elements/table.mdx
+++ b/apps/pink/src/pages/elements/table.mdx
@@ -500,13 +500,15 @@ In the Appwrite console, we use three styles of tables:
             <table class="table is-sticky-scroll">
                 <thead class="table-thead">
                 <tr class="table-row">
-                    <th class="table-thead-col u-position-relative">
-                        <label class="u-position-absolute u-inset-0 u-flex u-main-center u-cross-center u-cursor-pointer">
-                            <input type="checkbox" />
-                        </label>
-                    </th>
                     <th class="table-thead-col" style="">
-                        <span class="eyebrow-heading-3">Collection ID</span>
+                        <div class="u-flex u-cross-center u-gap-16">
+                            <label class="u-flex u-cross-center u-cursor-pointer" aria-label="select/deselect all visible item on table">
+                                <div class="u-padding-16 u-margin-16-negative">
+                                    <input type="checkbox" />
+                                </div>
+                            </label>
+                            <span class="eyebrow-heading-3">Collection ID</span>
+                        </div>
                     </th>
                     <th class="table-thead-col" style="">
                         <span class="eyebrow-heading-3">Name</span>
@@ -521,24 +523,25 @@ In the Appwrite console, we use three styles of tables:
                 </thead>
                 <tbody class="table-tbody">
                 <tr class="table-row">
-                    <td class="table-col u-position-relative" data-title="Selection">
-                        <label class="u-position-absolute u-inset-0 u-flex u-main-center u-cross-center u-cursor-pointer">
-                            <input type="checkbox" aria-label="copy collection ID that start in 637a4 " />
-                        </label>
-                    </td>
                     <td class="table-col" data-title="Collection ID">
-
-                        <div
-                            class="interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250"
-                        >
-                            <div class="text u-trim">637a40ba7a703e3936e1</div>
-                            <div class="interactive-text-output-buttons">
-                                <button
-                                    class="interactive-text-output-button is-hidden"
-                                    aria-label="copy text"
-                                >
-                                    <span class="icon-duplicate" aria-hidden="true"></span>
-                                </button>
+                        <div class="u-flex u-cross-center u-gap-16">
+                            <label class="u-flex u-cursor-pointer">
+                                <div class="u-padding-16 u-margin-16-negative">
+                                    <input type="checkbox" aria-label="select item that start in: 637a4"  />
+                                </div>
+                            </label>
+                            <div
+                                class="interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250"
+                            >
+                                <div class="text u-trim">637a40ba7a703e3936e1</div>
+                                <div class="interactive-text-output-buttons">
+                                    <button
+                                        class="interactive-text-output-button is-hidden"
+                                        aria-label="copy text"
+                                    >
+                                        <span class="icon-duplicate" aria-hidden="true"></span>
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     </td>
diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx
index 2d35ce7a42..6a77403ece 100644
--- a/apps/pink/src/pages/utilities/box-model.mdx
+++ b/apps/pink/src/pages/utilities/box-model.mdx
@@ -35,6 +35,7 @@ description: Box Model ensures consistent margins, paddings and borders across o
 | `u-padding-block-end-56`           | `padding-block-end: pxToRem(56)!important;`   | `padding-block-end: 3.5rem !important;`  |
 |                                    |                                               |                                          |
 |                                    |                                               |                                          |
+| `u-margin-16-negative`             | `margin: pxToRem(-16) !important;`            | `margin: -1rem !important;`              |
 | `u-margin-0`                       | `margin: 0 !important;`                       | Stays the same                           |
 | `u-margin-32`                      | `margin: pxToRem(32) !important;`             | `margin: 2rem !important;`               |
 |                                    |                                               |                                          |
diff --git a/packages/ui/src/6-elements/_table.scss b/packages/ui/src/6-elements/_table.scss
index 5d25f02926..e4de864ec8 100644
--- a/packages/ui/src/6-elements/_table.scss
+++ b/packages/ui/src/6-elements/_table.scss
@@ -17,7 +17,7 @@
   border-collapse: collapse;
   background-color: hsl(var(--p-table-bg-color));
   border-radius: var(--p-border-radius);
-  box-shadow: 0 0 0 pxToRem(1) hsl(var(--color-border));
+  box-shadow: 0 0 0 pxToRem(1) hsl(var(--color-border)), var(--shadow-small);
   inline-size: 100%;
 
   &-with-scroll {
@@ -114,7 +114,7 @@
         inset-inline-start: 0;
         background-color: hsl(var(--p-table-bg-color));
         box-shadow: var(--shadow-large);
-        .text { @include trim; box-sizing:border-box; max-inline-size:pxToRem(150); }
+        > .text { @include trim; box-sizing:border-box; max-inline-size:pxToRem(150); }
       }
       :where(.table-thead-col, .table-col):first-child {
         z-index: 2;
@@ -161,7 +161,5 @@
       }
     }
   }
-  @media #{$break3open} {
-    :where(.table-thead-col, .table-col) { padding-inline-start:pxToRem(30); }
-  }
+  @media #{$break3open} { }
 }
\ No newline at end of file
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 0d85e29137..46e645340f 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -255,6 +255,7 @@
 
 
 .u-margin-auto            { margin:auto!important; }
+.u-margin-16-negative     { margin:pxToRem(-16)!important;}
 .u-margin-0               { margin:0!important; }
 .u-margin-32              { margin:pxToRem(32)!important; }
 

From 4cc4c3f3230b0680e63f9e1e7596fe5a223604f2 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 23 May 2023 18:08:32 +0300
Subject: [PATCH 142/167] Checkbox - - update content od checkbox.mdx demo page

---
 apps/pink/src/pages/elements/checkbox.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/pink/src/pages/elements/checkbox.mdx b/apps/pink/src/pages/elements/checkbox.mdx
index c9bf887f8f..c24f4fc713 100644
--- a/apps/pink/src/pages/elements/checkbox.mdx
+++ b/apps/pink/src/pages/elements/checkbox.mdx
@@ -12,7 +12,7 @@ description: Checkboxes allow users to select one or more items from a set.
         `Array.from(document.getElementsByClassName('js-indeterminate')).forEach(el => el.indeterminate = true)`
     } />
 </Preview>
-**Note:** that Indeterminate state is done with javascript
+**Note:** Javascript is used to implement the indeterminate state
 
 ## States
 
@@ -32,7 +32,7 @@ To disable a checkbox, add the following class:
         `Array.from(document.getElementsByClassName('js-indeterminate')).forEach(el => el.indeterminate = true)`
     } />
 </Preview>
-**Note:** that Indeterminate state is done with javascript
+**Note:** Javascript is used to implement the indeterminate state
 
 ## Sizes
 
@@ -73,7 +73,7 @@ There are three sizes of checkboxes; small, medium and large. Each size has its
     <input type="checkbox" class="is-large js-indeterminate" />
   </only-html>
 </Preview>
-**Note:** that Indeterminate state is done with javascript
+**Note:** Javascript is used to implement the indeterminate state
 
 ## Best Practice
 

From b54d1555c5c4f24950969c444c21d624bbb3824f Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 24 May 2023 12:49:00 +0300
Subject: [PATCH 143/167] Inline Tag - - update default text color - light/dark

---
 packages/ui/src/6-elements/_inline-tag.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/6-elements/_inline-tag.scss b/packages/ui/src/6-elements/_inline-tag.scss
index 44d70c7876..2ca8a40838 100644
--- a/packages/ui/src/6-elements/_inline-tag.scss
+++ b/packages/ui/src/6-elements/_inline-tag.scss
@@ -9,7 +9,7 @@
   --p-inline-tag-text-color:          var(--inline-tag-text-color, var(--p-inline-tag-text-color-default));
   --p-inline-tag-bg-color:            var(--inline-tag-bg-color, var(--p-inline-tag-bg-color-default));
 
-  --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-120));
+  --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-100));
   --p-inline-tag-bg-color-default:    var(--color-neutral-10);
 
   --p-inline-tag-text-color-info:     var(--color-neutral-0);
@@ -30,7 +30,7 @@
 
   /* Theme Dark */
   #{$theme-dark} & {
-    --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-0));
+    --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-50));
     --p-inline-tag-bg-color-default:    var(--color-neutral-150);
   }
 }
\ No newline at end of file

From 312d680d478a4ac06fd7258c9cc44d9938798f38 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 24 May 2023 13:01:48 +0300
Subject: [PATCH 144/167] Action Bar - - update padding - Chen QA

---
 packages/ui/src/7-components/_action-bar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_action-bar.scss b/packages/ui/src/7-components/_action-bar.scss
index fd57d9cb47..0e5f194fec 100644
--- a/packages/ui/src/7-components/_action-bar.scss
+++ b/packages/ui/src/7-components/_action-bar.scss
@@ -14,7 +14,7 @@
     transition: var(--transition);
 
     /* tablet & desktop */
-    @media #{$break2open} { inline-size:pxToRem(500); }
+    @media #{$break2open} { inline-size:pxToRem(500); adding-inline:pxToRem(16); padding-block:pxToRem(12); }
 
     #{$theme-dark} & {
       --p-action-bar-bg-color: var(--color-neutral-300);

From 2fbbc79af07a9de12d0470899b783d8b313b7f08 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 24 May 2023 13:05:26 +0300
Subject: [PATCH 145/167] Action Bar - - update padding - Chen QA

---
 packages/ui/src/7-components/_action-bar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/7-components/_action-bar.scss b/packages/ui/src/7-components/_action-bar.scss
index 0e5f194fec..74911b26a4 100644
--- a/packages/ui/src/7-components/_action-bar.scss
+++ b/packages/ui/src/7-components/_action-bar.scss
@@ -14,7 +14,7 @@
     transition: var(--transition);
 
     /* tablet & desktop */
-    @media #{$break2open} { inline-size:pxToRem(500); adding-inline:pxToRem(16); padding-block:pxToRem(12); }
+    @media #{$break2open} { inline-size:pxToRem(500); padding-inline:pxToRem(16); padding-block:pxToRem(12); }
 
     #{$theme-dark} & {
       --p-action-bar-bg-color: var(--color-neutral-300);

From c7f7bf02f8892a4936fe0fe198ab30d8db0e8062 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 24 May 2023 13:11:28 +0300
Subject: [PATCH 146/167] Action Bar - - update spelling mistakes - Chen QA

---
 apps/pink/src/pages/components/action-bar.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/pink/src/pages/components/action-bar.mdx b/apps/pink/src/pages/components/action-bar.mdx
index 12c127f7d2..90c9d2f85b 100644
--- a/apps/pink/src/pages/components/action-bar.mdx
+++ b/apps/pink/src/pages/components/action-bar.mdx
@@ -5,9 +5,9 @@ description: The floating action bar is a tool that appears on top of the main l
 
 | Class              | Type                  |                                              |
 | ------------------ | --------------------- | -------------------------------------------- |
-| `action-bar`       | Action Bar            | A class representing an Action Bar container |
-| `action-bar-start` | Action Bar Start side | Start side contenrt of Action Bar            |
-| `action-bar-end`   | Action Bar End side   | End side contenrt of Action Bar              |
+| `action-bar`       | Action Bar            | A class representing an action Bar container |
+| `action-bar-start` | Action Bar Start side | Start side content of action Bar             |
+| `action-bar-end`   | Action Bar End side   | End side content of action Bar               |
 
 <Preview center>
     <section class="action-bar">

From 9d77bc27b8221a792584417a8f9379d6018a5246 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 24 May 2023 13:23:00 +0300
Subject: [PATCH 147/167] Action Bar - - update content - Chen QA

---
 apps/pink/src/pages/components/action-bar.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/pink/src/pages/components/action-bar.mdx b/apps/pink/src/pages/components/action-bar.mdx
index 90c9d2f85b..5c0359a2ed 100644
--- a/apps/pink/src/pages/components/action-bar.mdx
+++ b/apps/pink/src/pages/components/action-bar.mdx
@@ -3,11 +3,11 @@ title: Action bar
 description: The floating action bar is a tool that appears on top of the main layout and enables action execution.
 ---
 
-| Class              | Type                  |                                              |
-| ------------------ | --------------------- | -------------------------------------------- |
-| `action-bar`       | Action Bar            | A class representing an action Bar container |
-| `action-bar-start` | Action Bar Start side | Start side content of action Bar             |
-| `action-bar-end`   | Action Bar End side   | End side content of action Bar               |
+| Class              | Type                  |                                                         |
+| ------------------ | --------------------- | ------------------------------------------------------- |
+| `action-bar`       | Action Bar            | A class representing an action bar container            |
+| `action-bar-start` | Action Bar start side | The content located on the start side of the action bar |
+| `action-bar-end`   | Action Bar end side   | The content located on the end side of the action bar   |
 
 <Preview center>
     <section class="action-bar">

From 83e4246f7a0cb3a0be87e0a601fc7896087320a9 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 24 May 2023 13:44:08 +0300
Subject: [PATCH 148/167] QA Chen - - update ratio grid column - Container max
 ratio

---
 packages/ui/src/1-css-variables/_sizes.scss | 2 ++
 packages/ui/src/6-elements/_container.scss  | 2 +-
 packages/ui/src/8-grids/_grid-1-2.scss      | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/1-css-variables/_sizes.scss b/packages/ui/src/1-css-variables/_sizes.scss
index a332d18fa2..aa5517e209 100644
--- a/packages/ui/src/1-css-variables/_sizes.scss
+++ b/packages/ui/src/1-css-variables/_sizes.scss
@@ -1,11 +1,13 @@
 @use '../abstract' as *;
 :root {
+  $size-xxxl: pxToRem(1394);
   $size-xxl: pxToRem(1260);
   $size-xl: pxToRem(928);
   $size-large: pxToRem(700);
   $size-medium: pxToRem(496);
   $size-small: pxToRem(320);
 
+  --container-size-xxxl: #{$size-xxxl};
   --container-size-xxl: #{$size-xxl};
   --container-size-xl: #{$size-xl};
   --container-size-large: #{$size-large};
diff --git a/packages/ui/src/6-elements/_container.scss b/packages/ui/src/6-elements/_container.scss
index 0c16b27006..aebdb61c25 100644
--- a/packages/ui/src/6-elements/_container.scss
+++ b/packages/ui/src/6-elements/_container.scss
@@ -1,6 +1,6 @@
 @use '../abstract' as *;
 .container {
-  --p-container-max-size: var(--container-max-size, var(--container-size-xxl));
+  --p-container-max-size: var(--container-max-size, var(--container-size-xxxl));
 
   $padding-block:pxToRem(20);
   --p-container-padding-block: var(--container-padding-block, #{$padding-block});
diff --git a/packages/ui/src/8-grids/_grid-1-2.scss b/packages/ui/src/8-grids/_grid-1-2.scss
index 0e340f4d7a..403647fd9f 100644
--- a/packages/ui/src/8-grids/_grid-1-2.scss
+++ b/packages/ui/src/8-grids/_grid-1-2.scss
@@ -5,7 +5,7 @@
   row-gap: pxToRem(32);
 
   @media #{$break2open} {
-    grid-template-columns: 40fr 60fr;
+    grid-template-columns: 1fr 1.5fr;
     column-gap: pxToRem(100);
 
     &-col {

From 41162591e270d55555efb7646af8f26829a69a67 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 24 May 2023 13:48:27 +0300
Subject: [PATCH 149/167] QA Chen - - update max container size for
 default/pink

---
 packages/ui/src/6-elements/_container.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/6-elements/_container.scss b/packages/ui/src/6-elements/_container.scss
index aebdb61c25..0c16b27006 100644
--- a/packages/ui/src/6-elements/_container.scss
+++ b/packages/ui/src/6-elements/_container.scss
@@ -1,6 +1,6 @@
 @use '../abstract' as *;
 .container {
-  --p-container-max-size: var(--container-max-size, var(--container-size-xxxl));
+  --p-container-max-size: var(--container-max-size, var(--container-size-xxl));
 
   $padding-block:pxToRem(20);
   --p-container-padding-block: var(--container-padding-block, #{$padding-block});

From adfa7d0b3d44cd05c0c23c799f50e40e201d8a8c Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 24 May 2023 17:05:14 +0300
Subject: [PATCH 150/167] Sizes - - Code alignment

---
 packages/ui/src/1-css-variables/_sizes.scss | 36 ++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/ui/src/1-css-variables/_sizes.scss b/packages/ui/src/1-css-variables/_sizes.scss
index aa5517e209..2b3fa5c267 100644
--- a/packages/ui/src/1-css-variables/_sizes.scss
+++ b/packages/ui/src/1-css-variables/_sizes.scss
@@ -1,28 +1,28 @@
 @use '../abstract' as *;
 :root {
-  $size-xxxl: pxToRem(1394);
-  $size-xxl: pxToRem(1260);
-  $size-xl: pxToRem(928);
-  $size-large: pxToRem(700);
+  $size-xxxl:   pxToRem(1394);
+  $size-xxl:    pxToRem(1260);
+  $size-xl:     pxToRem(928);
+  $size-large:  pxToRem(700);
   $size-medium: pxToRem(496);
-  $size-small: pxToRem(320);
+  $size-small:  pxToRem(320);
 
-  --container-size-xxxl: #{$size-xxxl};
-  --container-size-xxl: #{$size-xxl};
-  --container-size-xl: #{$size-xl};
-  --container-size-large: #{$size-large};
-  --container-size-medium: #{$size-medium};
-  --container-size-small: #{$size-small};
+  --container-size-xxxl:    #{$size-xxxl};
+  --container-size-xxl:     #{$size-xxl};
+  --container-size-xl:      #{$size-xl};
+  --container-size-large:   #{$size-large};
+  --container-size-medium:  #{$size-medium};
+  --container-size-small:   #{$size-small};
 
   /* icons */
-  $icon-size-small: pxToRem(16);
-  $icon-size-medium: pxToRem(20); /* default */
-  $icon-size-large: pxToRem(24);
+  $icon-size-small:       pxToRem(16);
+  $icon-size-medium:      pxToRem(20); /* default */
+  $icon-size-large:       pxToRem(24);
   $icon-size-extra-large: pxToRem(32);
 
-  --icon-size-small: #{$icon-size-small};
-  --icon-size-medium: #{$icon-size-medium};
-  --icon-size-large: #{$icon-size-large};
-  --icon-size-extra-large: #{$icon-size-extra-large};
+  --icon-size-small:        #{$icon-size-small};
+  --icon-size-medium:       #{$icon-size-medium};
+  --icon-size-large:        #{$icon-size-large};
+  --icon-size-extra-large:  #{$icon-size-extra-large};
 
 }
\ No newline at end of file

From 82ca54aedba56979343a735dd1ae7ee7f818472e Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 24 May 2023 17:15:07 +0300
Subject: [PATCH 151/167] Table - - Update content line-height

---
 packages/ui/src/6-elements/_table.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/6-elements/_table.scss b/packages/ui/src/6-elements/_table.scss
index e4de864ec8..00df128e37 100644
--- a/packages/ui/src/6-elements/_table.scss
+++ b/packages/ui/src/6-elements/_table.scss
@@ -19,6 +19,7 @@
   border-radius: var(--p-border-radius);
   box-shadow: 0 0 0 pxToRem(1) hsl(var(--color-border)), var(--shadow-small);
   inline-size: 100%;
+  line-height: 1;
 
   &-with-scroll {
     @include tableScroll; overflow:hidden;
@@ -46,7 +47,7 @@
     }
   }
   :where(.table-thead-col) {
-    padding-block:pxToRem(16); line-height:1.536;
+    padding-block:pxToRem(16);
   }
   :where(.table-col) {
     /* for <ul> list tables */

From f21883bb749296231a731724196d01d01c7e0bf8 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Sun, 28 May 2023 17:21:32 +0300
Subject: [PATCH 152/167] Filtering partial - - Update content line-height -
 Add utility classes - update pages - Update Drop partial + add new state -
 Add kitchen-sync filters.html demo page

---
 apps/kitchensink/filters.html             | 203 ++++++++++++++++++++++
 apps/kitchensink/vite.config.js           |   1 +
 apps/pink/src/pages/utilities/display.mdx |   7 +-
 packages/ui/src/7-components/_drop.scss   |  25 ++-
 packages/ui/src/_9-utilities.scss         |   5 +
 5 files changed, 234 insertions(+), 7 deletions(-)
 create mode 100644 apps/kitchensink/filters.html

diff --git a/apps/kitchensink/filters.html b/apps/kitchensink/filters.html
new file mode 100644
index 0000000000..46f56fb4ff
--- /dev/null
+++ b/apps/kitchensink/filters.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>@appwrite/kitchensink - user demo</title>
+  </head>
+
+  <body>
+    <main class="grid-with-side" id="main">
+
+      {{> topNav}} {{> sideNav}}
+      <section class="main-content">
+        <div class="top-cover">
+          <div class="container">
+            <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
+              <h1 class="heading-level-4 u-flex u-min-width-0">
+                <a class="button is-text is-only-icon" href="" aria-label="back to [PAGE NAME]">
+                  <span class="icon-cheveron-left" aria-hidden="true"></span>
+                </a>
+                <span class="text u-trim-1">Movie</span>
+              </h1>
+              <div class="interactive-text-output is-buttons-on-top u-max-width-250">
+                <span class="text u-trim">637a40ba7a703e3936e2</span>
+              </div>
+
+            </div>
+            <div class="top-cover-options">
+
+            </div>
+            <div class="tabs">
+              <button
+                class="tabs-button-scroll is-start"
+                aria-label="Show items in start side"
+              >
+                <span class="icon-cheveron-left" aria-hidden="true"></span>
+              </button>
+              <button
+                class="tabs-button-scroll is-end"
+                aria-label="Show items in end side"
+              >
+                <span class="icon-cheveron-right" aria-hidden="true"></span>
+              </button>
+              <ul class="tabs-list">
+                <li class="tabs-item">
+                  <a class="tabs-button" href="">
+                    <span class="text">Attribute</span>
+                  </a>
+                </li>
+                <li class="tabs-item">
+                  <a class="tabs-button" href="">
+                    <span class="text">Indexes</span>
+                  </a>
+                </li>
+                <li class="tabs-item">
+                  <a class="tabs-button is-selected" href="">
+                    <span class="text">Documents</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="container u-margin-block-start-24">
+
+          <div class="common-section">
+            <h2 class="heading-level-5 u-trim-1">Documents</h2>
+          </div>
+          <div class="common-section u-flex u-gap-12">
+            <div class="u-flex-basis-50-percent">
+
+              <div class="drop-wrapper">
+                <button class="button is-secondary" onclick="document.getElementById('dialog').showModal();">
+                  <span class="icon-filter" aria-hidden="true"></span>
+                  <span class="is-not-mobile">Filters</span>
+                </button>
+
+                <div class="drop is-block-end u-width-600 is-modal-screen-mobile" id="dialog">
+                  <header class="drop-header-mobile u-flex u-main-space-between">
+                    <h5 class="heading-level-6">Filters</h5>
+                    <button class="button is-text is-only-icon" aria-label="close filter modal">
+                      <span class="icon-x" aria-hidden="true"></span>
+                    </button>
+                  </header>
+                  <div class="u-padding-16">
+                    <p>Apply filter rules to refine the table view</p>
+                    <div class="u-flex u-flex-wrap u-gap-8 u-margin-block-start-16">
+                      <div class="select u-stretch u-flex-basis-250">
+                        <select name="pets" id="pet-select" aria-label="Select filter Pets">
+                          <option value="">Select Pets</option>
+                          <option value="1">Option 1</option>
+                          <option value="2">Option 2</option>
+                          <option value="3">Option 3</option>
+                          <option value="4">Option 4</option>
+                          <option value="5">Option 5</option>
+                          <option value="6">Option 6</option>
+                        </select>
+                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                      </div>
+                      <div class="select u-stretch u-flex-basis-250">
+                        <select name="dog" id="dog-select" aria-label="Select filter Dogs">
+                          <option value="">Select Dog</option>
+                          <option value="1">Option 1</option>
+                          <option value="2">Option 2</option>
+                          <option value="3">Option 3</option>
+                          <option value="4">Option 4</option>
+                          <option value="5">Option 5</option>
+                          <option value="6">Option 6</option>
+                        </select>
+                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                      </div>
+                      <div class="input-text-wrapper u-stretch u-flex-basis-500">
+                        <input type="text" class="input-text" placeholder="Placeholder" aria-label="Fill pet name" />
+                      </div>
+                      <button class="button is-text u-padding-inline-start-0">
+                        <span class="icon-plus" aria-hidden="true"></span>
+                        <span class="text">Add Filter</span>
+                      </button>
+
+                      <div class="u-flex u-flex-wrap u-gap-8 u-stretch u-flex-basis-500 u-margin-block-start-8">
+                        <button class="tag" aria-label="delete">
+                          <span class="text">
+                            <b>title</b> starts with Avengers
+                          </span>
+                          <span class="icon-x" aria-hidden="false"></span>
+                        </button>
+                        <button class="tag" aria-label="delete">
+                          <span class="text">
+                            <b>id</b> equal to <b>1</b>
+                          </span>
+                          <span class="icon-x" aria-hidden="false"></span>
+                        </button>
+                        <button class="tag" aria-label="delete">
+                          <span class="text">
+                            <b>year</b> greater than or equal to <b>2018</b>
+                          </span>
+                          <span class="icon-x" aria-hidden="false"></span>
+                        </button>
+                      </div>
+
+                    </div>
+                  </div>
+
+                  <div class="drop-footer u-flex u-main-end u-gap-8 u-padding-16 u-sep-block-start" style="--inset-block-end:0;">
+                    <button class="button is-text">
+                      <span class="text">Clear All</span>
+                    </button>
+                    <button class="button">
+                      <span class="text">Apply</span>
+                    </button>
+                  </div>
+
+
+                </div>
+              </div>
+
+            </div>
+            <div class="u-flex u-gap-16 u-margin-inline-start-auto">
+              <button class="button is-secondary">
+                <span class="icon-view-boards" aria-hidden="true"></span>
+                <span class="is-not-mobile">Columns</span>
+                <span class="inline-tag">5</span>
+              </button>
+              <button class="button" type="button">
+                <span class="icon-plus" aria-hidden="true"></span>
+                <span class="text">Create <span class="is-not-mobile">Document</span></span>
+              </button>
+            </div>
+          </div>
+
+        </div>
+        <footer class="main-footer">
+          <div class="main-footer-start">
+            <ul class="inline-links is-no-padding-first-and-last u-x-small">
+              <li class="inline-links-item">
+                <a href=""><span class="text">version 1.1.1</span></a>
+              </li>
+              <li class="inline-links-item">
+                <a href=""><span class="text">Terms</span></a>
+              </li>
+              <li class="inline-links-item">
+                <a href=""><span class="text">Privacy</span></a>
+              </li>
+            </ul>
+          </div>
+          <div class="main-footer-end">
+            <ul class="inline-links is-no-padding-first-and-last u-x-small">
+              <li class="inline-links-item">
+                <span class="text">ⓒ 2022 Appwrite. All rights reserved.</span>
+              </li>
+              <li class="inline-links-item u-flex u-gap-8">
+                <a href=""><span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github"></span></a>
+                <a href=""><span class="icon-discord" aria-hidden="true" aria-label="Appwrite on Discord"></span></a>
+              </li>
+            </ul>
+          </div>
+        </footer>
+      </section>
+    </main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js
index feada73833..f5ffa53851 100644
--- a/apps/kitchensink/vite.config.js
+++ b/apps/kitchensink/vite.config.js
@@ -36,6 +36,7 @@ const config = {
         emptyStateCards: new URL("./empty-state-cards.html", import.meta.url).pathname,
         gettingStarted: new URL("./getting-started.html", import.meta.url).pathname,
         modalDemo: new URL("./modal-demo.html", import.meta.url).pathname,
+        filters: new URL("./filters.html", import.meta.url).pathname,
       },
     },
   },
diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx
index 2beb06fcbc..6246c11517 100644
--- a/apps/pink/src/pages/utilities/display.mdx
+++ b/apps/pink/src/pages/utilities/display.mdx
@@ -53,6 +53,8 @@ description: Display controls how an element is displayed, including its alignme
 | `u-flex-wrap`              | `flex-wrap: wrap;`                                                            | Stays the same                                                              |
 | `u-stretch`                | `flex: 1;`                                                                    | Stays the same                                                              |
 | `u-flex-basis-140`         | `flex-basis: pxToRem(140);`                                                   | `flex-basis: 8.75rem`                                                       |
+| `u-flex-basis-250`         | `flex-basis: pxToRem(250);`                                                   | `flex-basis: 15.625rem`                                                       |
+| `u-flex-basis-500`         | `flex-basis: pxToRem(500);`                                                   | `flex-basis: 31.25rem`                                                       |
 | `u-flex-basis-50-percent`  | `flex-basis: 50%;`                                                            | Stays the same                                                              |
 | `u-flex-basis-100-percent` | `flex-basis: 100%;`                                                           | Stays the same                                                              |
 | `u-flex-shrink-0`          | `flex-shrink: 0;`                                                             | Stays the same                                                              |
@@ -65,10 +67,11 @@ description: Display controls how an element is displayed, including its alignme
 | `u-width-150`              | `inline-size: pxToRem(150);`                                                  | `inline-size: 9.375rem;`                                                    |
 | `u-width-200`              | `inline-size: pxToRem(200);`                                                  | `inline-size: 12.5rem;`                                                     |
 | `u-width-250`              | `inline-size: pxToRem(250);`                                                  | `inline-size: 15.625rem;`                                                   |
+| `u-width-600`              | `inline-size: pxToRem(600);`                                                  | `inline-size: 37.5rem;`                                                     |
 | `u-width-280-desktop`      | `@media #{$break3open} { inline-size: pxToRem(280); }`                        | `@media (min-width:1199px) { inline-size: 17.25rem; }`                      |
 |                            |                                                                               |                                                                             |
 | `u-min-width-0`            | `min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/`             | Stays the same                                                              |
-| `u-min-width-200`          | `min-inline-size: pxToRem(200); `                                             | min-inline-size: 25rem;                                                     |
+| `u-min-width-200`          | `min-inline-size: pxToRem(200); `                                             | `min-inline-size: 25rem;`                                                   |
 | `u-min-width-100-percent`  | `min-inline-size: 100%;`                                                      | Stays the same                                                              |
 |                            |                                                                               |                                                                             |
 | `u-max-width-250`          | `max-inline-size: pxToRem(250);`                                              | `max-inline-size: 15.625rem;`                                               |
@@ -80,7 +83,7 @@ description: Display controls how an element is displayed, including its alignme
 | `u-max-width-600`          | `max-inline-size: pxToRem(600);`                                              | `max-inline-size: 37.5rem;`                                                 |
 | `u-max-width-650`          | `max-inline-size: pxToRem(650);`                                              | `max-inline-size: 40.625rem;`                                               |
 | `u-max-width-700`          | `max-inline-size: pxToRem(700);`                                              | `max-inline-size: 43.75rem;`                                                |
-| `u-max-width-100-percent`  | `max-inline-size:100%;`                                                       | Stays the same                                                              |
+| `u-max-width-100-percent`  | `max-inline-size: 100%;`                                                      | Stays the same                                                              |
 |                            |                                                                               |                                                                             |
 | `u-height-100-percent`     | `block-size: 100%;`                                                           | Stays the same                                                              |
 | `u-height-auto`            | `block-size: auto !important;`                                                | Stays the same                                                              |
diff --git a/packages/ui/src/7-components/_drop.scss b/packages/ui/src/7-components/_drop.scss
index 7eabd538d5..eb4213a66a 100644
--- a/packages/ui/src/7-components/_drop.scss
+++ b/packages/ui/src/7-components/_drop.scss
@@ -8,26 +8,32 @@
   --p-drop-border-radius:       var(--drop-border-radius, var(--border-radius-small));
 
   position:absolute; inset-inline-start:pxToRem(-10); inset-block-end:calc(100% + #{pxToRem(10)});
-  background-color:hsl(var(--p-drop-bg-color));
-  color:hsl(var(--p-drop-text-color));
+  background-color:hsl(var(--p-drop-bg-color)); color:hsl(var(--p-drop-text-color)); padding:0;
   border:solid pxToRem(1) hsl(var(--p-drop-border-color)); border-radius:var(--p-drop-border-radius); box-shadow:var(--shadow-small);
   min-inline-size: pxToRem(208);
   max-inline-size: pxToRem(280);
 
+
   @media #{$break3open} {
     inline-size: var(--p-drop-width-size-desltop);
     max-inline-size: none;
   }
 
   &-header-mobile {
-    position:sticky; top:0;
+    position:sticky; top:0; z-index:10;
     display:flex; align-items:center;
-    padding-block:pxToRem(20); padding-inline:pxToRem(16); border-block-end:solid pxToRem(1) hsl(var(--color-border));
+    padding-block:pxToRem(16); padding-inline:pxToRem(16); border-block-end:solid pxToRem(1) hsl(var(--color-border));
+    background-color:hsl(var(--p-drop-bg-color));
 
     @media #{$break3open} {
       display:none;
     }
   }
+  &-footer {
+    @media #{$break1} {
+      position:sticky; inset-block-end:0; background-color:hsl(var(--p-drop-bg-color));
+    }
+  }
 
   &::before {
     content: ""; position:absolute; z-index:3; inset-inline-start:pxToRem(30); inset-block-end:pxToRem(-8);
@@ -94,9 +100,18 @@
   }
   &.is-full-screen-mobile {
     @media #{$break1}, #{$break2} {
-      inset:0;
+      max-inline-size: none;
+      inset: 0;
     }
   }
+  &.is-modal-screen-mobile {
+    @media #{$break1} {
+      position:fixed; inset-block:0;  inset-inline:pxToRem(8);
+      padding:0; inline-size:auto; max-inline-size:none;
+      &::backdrop { background-color:hsl(240 22% 10% /  0.6); }
+    }
+
+  }
 
   &-list {
     display:flex; flex-direction:column; gap:pxToRem(8);
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 46e645340f..c7c7bbafab 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -168,6 +168,8 @@
 .u-flex-wrap                { flex-wrap:wrap;         }
 .u-stretch                  { flex:1;                 }
 .u-flex-basis-140           { flex-basis:pxToRem(140);}
+.u-flex-basis-250           { flex-basis:pxToRem(250);}
+.u-flex-basis-500           { flex-basis:pxToRem(500);}
 .u-flex-basis-50-percent    { flex-basis:50%;         }
 .u-flex-basis-100-percent   { flex-basis:100%;        }
 .u-flex-shrink-0            { flex-shrink:0;          }
@@ -182,6 +184,7 @@
 .u-width-200              { inline-size:pxToRem(200);    }
 .u-width-250              { inline-size:pxToRem(250);    }
 .u-width-280-desktop      { @media #{$break3open} { inline-size:pxToRem(280); } }
+.u-width-600              { inline-size:pxToRem(600);    }
 .u-min-width-0            { min-inline-size:0;            } /*use to solve flexbox un-shrink problem;*/
 .u-min-width-200          { min-inline-size:pxToRem(200); }
 .u-min-width-100-percent  { min-inline-size:100%;         }
@@ -239,6 +242,8 @@
 .u-padding-inline-24      { padding-inline:pxToRem(24)!important; }
 .u-padding-inline-32      { padding-inline:pxToRem(32)!important; }
 
+.u-padding-inline-start-0 { padding-inline-start:0!important; }
+
 .u-padding-inline-end-0   { padding-inline-end:0!important; }
 .u-padding-inline-end-12  { padding-inline-end:pxToRem(12)!important; }
 .u-padding-inline-end-56  { padding-inline-end:pxToRem(56)!important; }

From 36aa172890dabbd5e1c2d7d0bb863cfd5a86df3b Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 29 May 2023 11:16:29 +0300
Subject: [PATCH 153/167] Box - - fix box preview

---
 apps/pink/src/pages/elements/box.mdx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/pink/src/pages/elements/box.mdx b/apps/pink/src/pages/elements/box.mdx
index 8df506dbd9..795de4ff65 100644
--- a/apps/pink/src/pages/elements/box.mdx
+++ b/apps/pink/src/pages/elements/box.mdx
@@ -7,8 +7,15 @@ description: Boxes apply spacing, a border, and rounded corners to content areas
 | ---------------- | ------- | ----------------------------------------------- |
 | `box`            | Box     | A class representing a box                      |
 
-<Preview>
-  <div class="box">Box element</div>
+<Preview center>
+    <only-preview>
+        <div style="--box-border-radius:var(--border-radius-xsmall);">
+            <div class="box">Box element</div>
+        </div>
+    </only-preview>
+    <only-html>
+            <div class="box">Box element</div>
+    </only-html>
 </Preview>
 
 ## Multiple Boxes

From 3e798111224c0a36fa3c0dfad2e1e28619d66028 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 29 May 2023 11:23:39 +0300
Subject: [PATCH 154/167] Grid with Side - - fix side nav isn't scroll

---
 packages/ui/src/8-grids/_grid-with-side.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index ce4412acd4..a730bd47e4 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -10,7 +10,7 @@
   }
 
   @media #{$break1}, #{$break2} {
-    .main-side { display:none; }
+    .main-side { display:none; max-block-size:none; }
 
     &:where(.is-open) {
       .main-side { display:block; position:static; }

From 18da6cf99b630d1fa3196e9f307722565faab068 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 29 May 2023 14:21:09 +0300
Subject: [PATCH 155/167] Inline Loader - - New partial inline-loader.mdx -
 Small refactor for _box.scss - New state "is-small" - loader.mdx +
 _loader.scss

---
 .../src/pages/components/inline-loader.mdx    | 150 ++++++++++++++++++
 .../pages/{components => elements}/loader.mdx |   6 +
 packages/ui/src/6-elements/_box.scss          |   3 +-
 packages/ui/src/6-elements/_loader.scss       |  16 +-
 4 files changed, 170 insertions(+), 5 deletions(-)
 create mode 100644 apps/pink/src/pages/components/inline-loader.mdx
 rename apps/pink/src/pages/{components => elements}/loader.mdx (83%)

diff --git a/apps/pink/src/pages/components/inline-loader.mdx b/apps/pink/src/pages/components/inline-loader.mdx
new file mode 100644
index 0000000000..d45b6542d7
--- /dev/null
+++ b/apps/pink/src/pages/components/inline-loader.mdx
@@ -0,0 +1,150 @@
+---
+title: Inline loader
+---
+
+## Pending/Waiting
+
+<Preview center>
+    <only-preview>
+        <div class="box u-flex u-cross-center u-gap-16" style="--box-border-radius:var(--border-radius-xsmall); --p-box-padding:1rem 1.5rem;">
+            <span class="icon-clock u-color-text-offline" aria-hidden="true"></span>
+            <span class="u-trim u-stretch">Provide contextual message</span>
+            <button class="button is-secondary">
+                <span class="text">Button</span>
+            </button>
+        </div>
+    </only-preview>
+    <only-html>
+        <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+            <span class="icon-clock u-color-text-offline" aria-hidden="true"></span>
+            <span class="u-trim u-stretch">Provide contextual message</span>
+            <button class="button is-secondary">
+                <span class="text">Button</span>
+            </button>
+        </div>
+    </only-html>
+</Preview>
+
+## Loading
+
+<Preview center>
+    <only-preview>
+        <div class="box u-flex u-cross-center u-gap-16" style="--box-border-radius:var(--border-radius-xsmall); --p-box-padding:1rem 1.5rem;">
+            <div class="loader is-small"></div>
+            <span class="u-trim u-stretch">Provide contextual message</span>
+            <button class="button is-secondary">
+                <span class="text">Button</span>
+            </button>
+        </div>
+    </only-preview>
+    <only-html>
+        <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+            <div class="loader" style="--loader-size:1rem; --loader-border-size:0.09375rem"></div>
+            <span class="u-trim u-stretch">Provide contextual message</span>
+            <button class="button is-secondary">
+                <span class="text">Button</span>
+            </button>
+        </div>
+    </only-html>
+</Preview>
+
+## Failed
+
+<Preview center>
+    <only-preview>
+        <div class="box u-flex u-cross-center u-gap-16" style="--box-border-radius:var(--border-radius-xsmall); --p-box-padding:1rem 1.5rem;">
+            <span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true"></span>
+            <span class="u-trim u-stretch">Provide contextual message</span>
+            <button class="button is-secondary">
+                <span class="text">Button</span>
+            </button>
+        </div>
+    </only-preview>
+    <only-html>
+        <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+            <span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true"></span>
+            <span class="u-trim u-stretch">Provide contextual message</span>
+            <button class="button is-secondary">
+                <span class="text">Button</span>
+            </button>
+        </div>
+    </only-html>
+</Preview>
+
+## Success
+
+<Preview center>
+    <only-preview>
+        <div class="box u-flex u-cross-center u-gap-16" style="--box-border-radius:var(--border-radius-xsmall); --p-box-padding:1rem 1.5rem;">
+            <span class="icon-check-circle u-color-text-success" aria-hidden="true"></span>
+            <span class="u-trim u-stretch">Provide contextual message</span>
+            <button class="button is-secondary">
+                <span class="text">Button</span>
+            </button>
+        </div>
+    </only-preview>
+    <only-html>
+        <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+            <span class="icon-check-circle u-color-text-success" aria-hidden="true"></span>
+            <span class="u-trim u-stretch">Provide contextual message</span>
+            <button class="button is-secondary">
+                <span class="text">Button</span>
+            </button>
+        </div>
+    </only-html>
+</Preview>
+
+## Multiple Loader Boxes
+
+<Preview center>
+    <only-preview>
+        <div class="boxes-wrapper" style="--box-border-radius:var(--border-radius-xsmall);">
+            <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+                <span class="icon-clock u-color-text-offline" aria-hidden="true"></span>
+                <span class="u-trim u-stretch">Provide contextual message</span>
+                <button class="button is-secondary">
+                    <span class="text">Button</span>
+                </button>
+            </div>
+            <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+                <div class="loader" style="--loader-size:1rem; --loader-border-size:0.09375rem"></div>
+                <span class="u-trim u-stretch">Provide contextual message</span>
+                <button class="button is-secondary">
+                    <span class="text">Button</span>
+                </button>
+            </div>
+            <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+                <span class="icon-check-circle u-color-text-success" aria-hidden="true"></span>
+                <span class="u-trim u-stretch">Provide contextual message</span>
+                <button class="button is-secondary">
+                    <span class="text">Button</span>
+                </button>
+            </div>
+        </div>
+    </only-preview>
+    <only-html>
+        <div class="boxes-wrapper">
+            <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+                <span class="icon-clock u-color-text-offline" aria-hidden="true"></span>
+                <span class="u-trim u-stretch">Provide contextual message</span>
+                <button class="button is-secondary">
+                    <span class="text">Button</span>
+                </button>
+            </div>
+            <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+                <div class="loader" style="--loader-size:1rem; --loader-border-size:0.09375rem"></div>
+                <span class="u-trim u-stretch">Provide contextual message</span>
+                <button class="button is-secondary">
+                    <span class="text">Button</span>
+                </button>
+            </div>
+            <div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
+                <span class="icon-check-circle u-color-text-success" aria-hidden="true"></span>
+                <span class="u-trim u-stretch">Provide contextual message</span>
+                <button class="button is-secondary">
+                    <span class="text">Button</span>
+                </button>
+            </div>
+        </div>
+    </only-html>
+</Preview>
\ No newline at end of file
diff --git a/apps/pink/src/pages/components/loader.mdx b/apps/pink/src/pages/elements/loader.mdx
similarity index 83%
rename from apps/pink/src/pages/components/loader.mdx
rename to apps/pink/src/pages/elements/loader.mdx
index b599f90a11..2280d35423 100644
--- a/apps/pink/src/pages/components/loader.mdx
+++ b/apps/pink/src/pages/elements/loader.mdx
@@ -10,3 +10,9 @@ description: Use loaders to indicate to users that something is in progress and
 <Preview center>
   <div class="loader"></div>
 </Preview>
+
+## Small Loader
+
+<Preview center>
+    <div class="loader is-small"></div>
+</Preview>
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_box.scss b/packages/ui/src/6-elements/_box.scss
index cdcfacfce8..ffb7926992 100644
--- a/packages/ui/src/6-elements/_box.scss
+++ b/packages/ui/src/6-elements/_box.scss
@@ -9,6 +9,7 @@
 
   --p-box-border-color: var(--color-neutral-30);
 
+  --p-box-padding: var(--box-padding, #{pxToRem(24)} );
   --p-box-border-radius: var(--box-border-radius, var(--border-radius-xsmall));
 
   position: relative;
@@ -16,7 +17,7 @@
   border: solid pxToRem(1) hsl(var(--p-box-border-color));
 
   border-radius: var(--p-box-border-radius);
-  padding: pxToRem(24);
+  padding: var(--p-box-padding);
   color: hsl(var(--p-box-text-color));
 
   max-inline-size:100%;
diff --git a/packages/ui/src/6-elements/_loader.scss b/packages/ui/src/6-elements/_loader.scss
index bdbf5f298e..92f7198d15 100644
--- a/packages/ui/src/6-elements/_loader.scss
+++ b/packages/ui/src/6-elements/_loader.scss
@@ -1,15 +1,23 @@
 @use '../abstract' as *;
 .loader {
-  --p-base-color:       var(--color-neutral-10);
-  --p-base-full-color:  var(--color-neutral-50);
+  --p-base-color:         var(--color-neutral-10);
+  --p-base-full-color:    var(--color-neutral-50);
+
+  --p-loader-size:        var(--loader-size, #{pxToRem(24)});
+  --p-loader-border-size: var(--loader-border-size, #{pxToRem(2.5)});
 
   animation: rotate 1s infinite linear; /* global animation */
 
-  inline-size:pxToRem(24); block-size:pxToRem(24);
-  border:solid pxToRem(2.5) hsl(var(--p-base-color));
+  inline-size:var(--p-loader-size); block-size:var(--p-loader-size);
+  border:solid var(--p-loader-border-size) hsl(var(--p-base-color));
   border-radius: var(--border-radius-circular);
   border-block-start-color:var(--p-base-full-color); border-inline-start-color:var(--p-base-full-color);
 
+  &.is-small {
+    --p-loader-size:        var(--loader-size, #{pxToRem(16)});
+    --p-loader-border-size: var(--loader-border-size, #{pxToRem(1.5)});
+  }
+
   /* Theme Dark */
   #{$theme-dark} & {
     --p-base-color: var(--color-neutral-120);

From e6e130f61255a89ba7693abe24e49d7cf833c75b Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 29 May 2023 15:28:55 +0300
Subject: [PATCH 156/167] Filters - - Update style via utility classes

---
 apps/kitchensink/filters.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/kitchensink/filters.html b/apps/kitchensink/filters.html
index 46f56fb4ff..5d618ec0cf 100644
--- a/apps/kitchensink/filters.html
+++ b/apps/kitchensink/filters.html
@@ -77,7 +77,7 @@ <h2 class="heading-level-5 u-trim-1">Documents</h2>
                 </button>
 
                 <div class="drop is-block-end u-width-600 is-modal-screen-mobile" id="dialog">
-                  <header class="drop-header-mobile u-flex u-main-space-between">
+                  <header class="drop-header-mobile is-only-mobile u-flex u-main-space-between">
                     <h5 class="heading-level-6">Filters</h5>
                     <button class="button is-text is-only-icon" aria-label="close filter modal">
                       <span class="icon-x" aria-hidden="true"></span>
@@ -115,23 +115,23 @@ <h5 class="heading-level-6">Filters</h5>
                       </div>
                       <button class="button is-text u-padding-inline-start-0">
                         <span class="icon-plus" aria-hidden="true"></span>
-                        <span class="text">Add Filter</span>
+                        <span class="text">Add filter</span>
                       </button>
 
                       <div class="u-flex u-flex-wrap u-gap-8 u-stretch u-flex-basis-500 u-margin-block-start-8">
-                        <button class="tag" aria-label="delete">
+                        <button class="tag u-x-small" aria-label="delete">
                           <span class="text">
                             <b>title</b> starts with Avengers
                           </span>
                           <span class="icon-x" aria-hidden="false"></span>
                         </button>
-                        <button class="tag" aria-label="delete">
+                        <button class="tag u-x-small" aria-label="delete">
                           <span class="text">
                             <b>id</b> equal to <b>1</b>
                           </span>
                           <span class="icon-x" aria-hidden="false"></span>
                         </button>
-                        <button class="tag" aria-label="delete">
+                        <button class="tag u-x-small" aria-label="delete">
                           <span class="text">
                             <b>year</b> greater than or equal to <b>2018</b>
                           </span>
@@ -144,7 +144,7 @@ <h5 class="heading-level-6">Filters</h5>
 
                   <div class="drop-footer u-flex u-main-end u-gap-8 u-padding-16 u-sep-block-start" style="--inset-block-end:0;">
                     <button class="button is-text">
-                      <span class="text">Clear All</span>
+                      <span class="text">Clear all</span>
                     </button>
                     <button class="button">
                       <span class="text">Apply</span>

From 8c39c8ebbecc8c2f557c309796c390d6a14fd3ec Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 5 Jun 2023 10:22:53 +0200
Subject: [PATCH 157/167] Icons - - Add new icons of Appwrite & Azure - Include
 Grayscale & color (light/dark theme)

---
 .../pink/public/icons/color/dark/appwrite.svg |  3 +++
 apps/pink/public/icons/color/dark/azure.svg   | 23 +++++++++++++++++++
 .../public/icons/color/light/appwrite.svg     |  3 +++
 apps/pink/public/icons/color/light/azure.svg  | 23 +++++++++++++++++++
 .../public/icons/grayscale/dark/appwrite.svg  |  3 +++
 .../public/icons/grayscale/dark/azure.svg     |  5 ++++
 .../public/icons/grayscale/light/appwrite.svg |  3 +++
 .../public/icons/grayscale/light/azure.svg    |  5 ++++
 apps/pink/public/search.json                  |  2 +-
 9 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 apps/pink/public/icons/color/dark/appwrite.svg
 create mode 100644 apps/pink/public/icons/color/dark/azure.svg
 create mode 100644 apps/pink/public/icons/color/light/appwrite.svg
 create mode 100644 apps/pink/public/icons/color/light/azure.svg
 create mode 100644 apps/pink/public/icons/grayscale/dark/appwrite.svg
 create mode 100644 apps/pink/public/icons/grayscale/dark/azure.svg
 create mode 100644 apps/pink/public/icons/grayscale/light/appwrite.svg
 create mode 100644 apps/pink/public/icons/grayscale/light/azure.svg

diff --git a/apps/pink/public/icons/color/dark/appwrite.svg b/apps/pink/public/icons/color/dark/appwrite.svg
new file mode 100644
index 0000000000..ec223cea31
--- /dev/null
+++ b/apps/pink/public/icons/color/dark/appwrite.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0007 17.1897C12.8841 17.7024 13.9104 17.9959 15.0053 17.9959C18.3161 17.9959 21 15.312 21 12.0012C21 8.6904 18.3161 6.00653 15.0053 6.00653C13.9106 6.00653 12.8844 6.29998 12.0011 6.81246C11.5328 6.54095 11.0288 6.33356 10.5027 6.19681C9.74038 5.99869 8.94658 5.95272 8.16656 6.06152C7.38649 6.17032 6.63555 6.43177 5.9566 6.83091C5.27765 7.23006 4.684 7.75909 4.20959 8.38776C3.73518 9.01643 3.38929 9.73241 3.19171 10.4948C2.99413 11.2572 2.94871 12.0511 3.05806 12.831C3.16742 13.611 3.42939 14.3618 3.82901 15.0404C4.22864 15.7191 4.75808 16.3124 5.38709 16.7864C6.65618 17.744 8.25375 18.1584 9.8283 17.9382C10.6015 17.83 11.3379 17.5733 12.0007 17.1897ZM10.9991 7.54163L10.9973 7.5432C11.9695 7.97914 12.7732 8.72338 13.2841 9.65146C13.5662 10.166 13.756 10.7319 13.8389 11.3242C14.0184 12.6081 13.6806 13.9107 12.8997 14.9455C12.1189 15.9803 10.9589 16.6625 9.67496 16.8421C8.39111 17.0216 7.08847 16.6838 6.05369 15.9029C5.0189 15.1221 4.33669 13.9621 4.15714 12.6782C3.9776 11.3943 4.31542 10.0917 5.0963 9.05691C5.87718 8.02211 7.03717 7.3399 8.32102 7.16036C9.23908 7.03197 10.1667 7.16812 10.9991 7.54163ZM8.96109 10.7319C9.05981 10.3049 9.15144 9.94486 9.15864 9.92714C9.16556 9.91314 9.28566 9.90262 9.42336 9.90262C9.60679 9.90262 9.66692 9.91314 9.65629 9.94486C9.6456 9.96961 9.59267 10.1812 9.53985 10.4141C9.493 10.6199 9.38023 11.0954 9.27671 11.5319C9.26303 11.5896 9.24951 11.6466 9.23632 11.7022C9.18521 11.9179 9.1283 12.1604 9.07541 12.3857C9.01147 12.6581 8.95341 12.9054 8.91857 13.0502L8.80933 13.5373H8.56571C8.43172 13.5373 8.32226 13.523 8.32226 13.5055C8.32226 13.442 8.42812 12.9621 8.60475 12.2316C8.68573 11.879 8.82204 11.3111 8.92333 10.8892C8.93659 10.834 8.94924 10.7813 8.96109 10.7319ZM6.93885 11.8081L7.26352 11.4552L7.59186 11.1023H7.88475C8.04703 11.1023 8.18113 11.1129 8.18113 11.127C8.18113 11.1446 8.05406 11.2931 7.89887 11.4659C7.74356 11.6353 7.61644 11.794 7.61644 11.8187C7.61644 11.8399 7.75408 12.0093 7.92007 12.1856L8.22349 12.5138H7.58122L7.35538 12.2739C7.23186 12.1433 7.08701 11.9844 7.03425 11.921L6.93885 11.8081ZM9.86779 11.2752C9.79382 11.2011 9.7338 11.1342 9.7338 11.1234C9.7338 11.1129 9.87139 11.1023 10.0443 11.1023H10.3515L10.669 11.4448C10.8455 11.6317 10.9866 11.7976 10.9866 11.8151C10.9866 11.8363 10.8526 11.9988 10.6866 12.1822L10.3867 12.5103L10.0585 12.5138H9.73048L10.0233 12.1927C10.1855 12.0198 10.3197 11.854 10.3267 11.8292C10.3373 11.7835 10.1432 11.5505 9.86779 11.2752Z" fill="#F02E65"/>
+</svg>
diff --git a/apps/pink/public/icons/color/dark/azure.svg b/apps/pink/public/icons/color/dark/azure.svg
new file mode 100644
index 0000000000..06a2264b64
--- /dev/null
+++ b/apps/pink/public/icons/color/dark/azure.svg
@@ -0,0 +1,23 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.7421 5.22213C8.84188 4.92647 9.11914 4.72742 9.43118 4.72742H13.9999L9.25784 18.7782C9.15805 19.0739 8.88079 19.2729 8.56876 19.2729H5.013C4.51544 19.2729 4.1648 18.7844 4.32391 18.3131L8.7421 5.22213Z" fill="url(#paint0_linear_11171_107416)"/>
+<path d="M16.0459 14.1819H8.84548C8.54294 14.1819 8.39687 14.5525 8.61804 14.7589L13.2448 19.0772C13.3795 19.2029 13.5568 19.2728 13.741 19.2728H17.818L16.0459 14.1819Z" fill="#0078D4"/>
+<path d="M9.43118 4.72742C9.11914 4.72742 8.84188 4.92647 8.7421 5.22213L4.32391 18.3131C4.1648 18.7844 4.51544 19.2729 5.013 19.2729H8.56876C8.88079 19.2729 9.15805 19.0739 9.25784 18.7782L10.1362 16.1756L13.2448 19.0771C13.3795 19.2028 13.5568 19.2727 13.7411 19.2727H17.8181L16.0459 14.1818H10.8091L13.9999 4.72742H9.43118Z" fill="url(#paint1_linear_11171_107416)"/>
+<path d="M15.2579 5.222C15.1582 4.92635 14.8809 4.72729 14.5688 4.72729H9.45459H9.47792C9.78996 4.72729 10.0672 4.92635 10.167 5.222L14.5852 18.313C14.7443 18.7843 14.3936 19.2728 13.8961 19.2728H13.8182H18.987C19.4846 19.2728 19.8352 18.7843 19.6761 18.313L15.2579 5.222Z" fill="url(#paint2_linear_11171_107416)"/>
+<defs>
+<linearGradient id="paint0_linear_11171_107416" x1="9.40005" y1="5.23088" x2="4.6561" y2="19.2457" gradientUnits="userSpaceOnUse">
+<stop stop-color="#114A8B"/>
+<stop offset="1" stop-color="#0669BC"/>
+</linearGradient>
+<linearGradient id="paint1_linear_11171_107416" x1="13.1912" y1="14.1835" x2="12.0951" y2="14.5541" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.3"/>
+<stop offset="0.0711768" stop-opacity="0.2"/>
+<stop offset="0.321031" stop-opacity="0.1"/>
+<stop offset="0.623053" stop-opacity="0.05"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_11171_107416" x1="12.4077" y1="5.23079" x2="17.615" y2="19.1045" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3CCBF4"/>
+<stop offset="1" stop-color="#2892DF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/pink/public/icons/color/light/appwrite.svg b/apps/pink/public/icons/color/light/appwrite.svg
new file mode 100644
index 0000000000..053d2dadc5
--- /dev/null
+++ b/apps/pink/public/icons/color/light/appwrite.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0007 17.1897C12.8841 17.7023 13.9104 17.9959 15.0053 17.9959C18.3161 17.9959 21 15.312 21 12.0012C21 8.69038 18.3161 6.00652 15.0053 6.00652C13.9106 6.00652 12.8844 6.29996 12.0011 6.81244C11.5328 6.54093 11.0288 6.33355 10.5027 6.1968C9.74038 5.99868 8.94658 5.95271 8.16656 6.0615C7.38649 6.17031 6.63555 6.43175 5.9566 6.8309C5.27765 7.23005 4.684 7.75907 4.20959 8.38774C3.73518 9.01641 3.38929 9.73239 3.19171 10.4948C2.99413 11.2572 2.94871 12.0511 3.05806 12.831C3.16742 13.611 3.42939 14.3618 3.82901 15.0404C4.22864 15.7191 4.75808 16.3123 5.38709 16.7864C6.65618 17.744 8.25375 18.1584 9.8283 17.9381C10.6015 17.83 11.3379 17.5733 12.0007 17.1897ZM10.9991 7.54161L10.9973 7.54319C11.9695 7.97912 12.7732 8.72336 13.2841 9.65145C13.5662 10.166 13.756 10.7319 13.8389 11.3242C14.0184 12.6081 13.6806 13.9107 12.8997 14.9455C12.1189 15.9803 10.9589 16.6625 9.67496 16.8421C8.39111 17.0216 7.08847 16.6838 6.05369 15.9029C5.0189 15.122 4.33669 13.9621 4.15714 12.6782C3.9776 11.3943 4.31542 10.0917 5.0963 9.0569C5.87718 8.0221 7.03717 7.33989 8.32102 7.16034C9.23908 7.03196 10.1667 7.1681 10.9991 7.54161ZM8.96109 10.7318C9.05981 10.3048 9.15144 9.94485 9.15864 9.92713C9.16556 9.91312 9.28566 9.9026 9.42336 9.9026C9.60679 9.9026 9.66692 9.91312 9.65629 9.94485C9.6456 9.9696 9.59267 10.1812 9.53985 10.4141C9.493 10.6199 9.38023 11.0954 9.27671 11.5319C9.26303 11.5896 9.24951 11.6466 9.23632 11.7022C9.18521 11.9179 9.1283 12.1604 9.07541 12.3857C9.01147 12.658 8.95341 12.9054 8.91857 13.0502L8.80933 13.5373H8.56571C8.43172 13.5373 8.32226 13.523 8.32226 13.5055C8.32226 13.442 8.42812 12.962 8.60475 12.2316C8.68573 11.879 8.82204 11.3111 8.92333 10.8892C8.93659 10.834 8.94924 10.7812 8.96109 10.7318ZM6.93885 11.8081L7.26352 11.4552L7.59186 11.1023H7.88475C8.04703 11.1023 8.18113 11.1129 8.18113 11.127C8.18113 11.1446 8.05406 11.293 7.89887 11.4658C7.74356 11.6353 7.61644 11.794 7.61644 11.8187C7.61644 11.8399 7.75408 12.0093 7.92007 12.1856L8.22349 12.5138H7.58122L7.35538 12.2739C7.23186 12.1433 7.08701 11.9844 7.03425 11.921L6.93885 11.8081ZM9.86779 11.2752C9.79382 11.2011 9.7338 11.1341 9.7338 11.1234C9.7338 11.1129 9.87139 11.1023 10.0443 11.1023H10.3515L10.669 11.4448C10.8455 11.6317 10.9866 11.7976 10.9866 11.8151C10.9866 11.8363 10.8526 11.9988 10.6866 12.1822L10.3867 12.5103L10.0585 12.5138H9.73048L10.0233 12.1927C10.1855 12.0197 10.3197 11.854 10.3267 11.8292C10.3373 11.7835 10.1432 11.5504 9.86779 11.2752Z" fill="#F02E65"/>
+</svg>
diff --git a/apps/pink/public/icons/color/light/azure.svg b/apps/pink/public/icons/color/light/azure.svg
new file mode 100644
index 0000000000..10216e3660
--- /dev/null
+++ b/apps/pink/public/icons/color/light/azure.svg
@@ -0,0 +1,23 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.7421 5.22213C8.84188 4.92647 9.11914 4.72742 9.43118 4.72742H13.9999L9.25784 18.7782C9.15805 19.0739 8.88079 19.2729 8.56876 19.2729H5.013C4.51544 19.2729 4.1648 18.7844 4.32391 18.3131L8.7421 5.22213Z" fill="url(#paint0_linear_11171_107415)"/>
+<path d="M16.0459 14.1819H8.84548C8.54294 14.1819 8.39687 14.5525 8.61804 14.7589L13.2448 19.0772C13.3795 19.2029 13.5568 19.2728 13.741 19.2728H17.818L16.0459 14.1819Z" fill="#0078D4"/>
+<path d="M9.43118 4.72742C9.11914 4.72742 8.84188 4.92647 8.7421 5.22213L4.32391 18.3131C4.1648 18.7844 4.51544 19.2729 5.013 19.2729H8.56876C8.88079 19.2729 9.15805 19.0739 9.25784 18.7782L10.1362 16.1756L13.2448 19.0771C13.3795 19.2028 13.5568 19.2727 13.7411 19.2727H17.8181L16.0459 14.1818H10.8091L13.9999 4.72742H9.43118Z" fill="url(#paint1_linear_11171_107415)"/>
+<path d="M15.2579 5.222C15.1582 4.92635 14.8809 4.72729 14.5688 4.72729H9.45459H9.47792C9.78996 4.72729 10.0672 4.92635 10.167 5.222L14.5852 18.313C14.7443 18.7843 14.3936 19.2728 13.8961 19.2728H13.8182H18.987C19.4846 19.2728 19.8352 18.7843 19.6761 18.313L15.2579 5.222Z" fill="url(#paint2_linear_11171_107415)"/>
+<defs>
+<linearGradient id="paint0_linear_11171_107415" x1="9.40005" y1="5.23088" x2="4.6561" y2="19.2457" gradientUnits="userSpaceOnUse">
+<stop stop-color="#114A8B"/>
+<stop offset="1" stop-color="#0669BC"/>
+</linearGradient>
+<linearGradient id="paint1_linear_11171_107415" x1="13.1912" y1="14.1835" x2="12.0951" y2="14.5541" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.3"/>
+<stop offset="0.0711768" stop-opacity="0.2"/>
+<stop offset="0.321031" stop-opacity="0.1"/>
+<stop offset="0.623053" stop-opacity="0.05"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_11171_107415" x1="12.4077" y1="5.23079" x2="17.615" y2="19.1045" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3CCBF4"/>
+<stop offset="1" stop-color="#2892DF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/pink/public/icons/grayscale/dark/appwrite.svg b/apps/pink/public/icons/grayscale/dark/appwrite.svg
new file mode 100644
index 0000000000..d6f7bab119
--- /dev/null
+++ b/apps/pink/public/icons/grayscale/dark/appwrite.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0007 17.1897C12.8841 17.7023 13.9104 17.9959 15.0053 17.9959C18.3161 17.9959 21 15.312 21 12.0012C21 8.69038 18.3161 6.00652 15.0053 6.00652C13.9106 6.00652 12.8844 6.29996 12.0011 6.81244C11.5328 6.54093 11.0288 6.33355 10.5027 6.1968C9.74038 5.99868 8.94658 5.95271 8.16656 6.0615C7.38649 6.17031 6.63555 6.43175 5.95659 6.8309C5.27765 7.23005 4.684 7.75907 4.20959 8.38774C3.73518 9.01641 3.38929 9.73239 3.19171 10.4948C2.99413 11.2572 2.94871 12.0511 3.05806 12.831C3.16742 13.611 3.42939 14.3618 3.82901 15.0404C4.22864 15.7191 4.75808 16.3123 5.38709 16.7864C6.65618 17.744 8.25375 18.1584 9.8283 17.9381C10.6015 17.83 11.3379 17.5733 12.0007 17.1897ZM10.9991 7.54161L10.9973 7.54318C11.9695 7.97912 12.7732 8.72336 13.2841 9.65145C13.5662 10.166 13.756 10.7319 13.8389 11.3242C14.0184 12.6081 13.6806 13.9107 12.8997 14.9455C12.1189 15.9803 10.9589 16.6625 9.67496 16.8421C8.39111 17.0216 7.08847 16.6838 6.05369 15.9029C5.0189 15.122 4.33668 13.9621 4.15714 12.6782C3.9776 11.3943 4.31542 10.0917 5.0963 9.0569C5.87718 8.0221 7.03717 7.33989 8.32102 7.16034C9.23908 7.03196 10.1667 7.1681 10.9991 7.54161ZM8.96109 10.7318C9.05981 10.3048 9.15144 9.94485 9.15864 9.92713C9.16556 9.91312 9.28566 9.9026 9.42336 9.9026C9.60679 9.9026 9.66692 9.91312 9.65629 9.94485C9.6456 9.9696 9.59267 10.1812 9.53985 10.4141C9.493 10.6199 9.38023 11.0954 9.27671 11.5319C9.26303 11.5896 9.24951 11.6466 9.23632 11.7022C9.18521 11.9179 9.1283 12.1604 9.0754 12.3857C9.01147 12.658 8.95341 12.9054 8.91857 13.0502L8.80933 13.5373H8.56571C8.43172 13.5373 8.32226 13.523 8.32226 13.5055C8.32226 13.442 8.42812 12.962 8.60475 12.2316C8.68573 11.879 8.82204 11.3111 8.92333 10.8892C8.93659 10.834 8.94924 10.7812 8.96109 10.7318ZM6.93885 11.8081L7.26352 11.4552L7.59186 11.1023H7.88475C8.04703 11.1023 8.18113 11.1129 8.18113 11.127C8.18113 11.1446 8.05406 11.293 7.89887 11.4658C7.74356 11.6353 7.61644 11.794 7.61644 11.8187C7.61644 11.8399 7.75408 12.0093 7.92007 12.1856L8.22349 12.5138H7.58122L7.35538 12.2739C7.23186 12.1433 7.08701 11.9844 7.03425 11.921L6.93885 11.8081ZM9.86779 11.2752C9.79382 11.2011 9.7338 11.1341 9.7338 11.1234C9.7338 11.1129 9.87139 11.1023 10.0443 11.1023H10.3515L10.669 11.4448C10.8455 11.6317 10.9866 11.7976 10.9866 11.8151C10.9866 11.8363 10.8526 11.9988 10.6866 12.1822L10.3867 12.5103L10.0585 12.5138H9.73048L10.0233 12.1927C10.1855 12.0197 10.3197 11.854 10.3267 11.8292C10.3373 11.7835 10.1432 11.5504 9.86779 11.2752Z" fill="#C4C6D7"/>
+</svg>
diff --git a/apps/pink/public/icons/grayscale/dark/azure.svg b/apps/pink/public/icons/grayscale/dark/azure.svg
new file mode 100644
index 0000000000..740cacaabd
--- /dev/null
+++ b/apps/pink/public/icons/grayscale/dark/azure.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.7421 5.22213C8.84188 4.92647 9.11914 4.72742 9.43118 4.72742H13.9999L9.25784 18.7782C9.15805 19.0739 8.88079 19.2729 8.56876 19.2729H5.013C4.51544 19.2729 4.1648 18.7844 4.32391 18.3131L8.7421 5.22213Z" fill="#C4C6D7"/>
+<path d="M16.0459 14.1819H8.84548C8.54294 14.1819 8.39687 14.5525 8.61804 14.7589L13.2448 19.0772C13.3795 19.2029 13.5568 19.2728 13.741 19.2728H17.818L16.0459 14.1819Z" fill="#C4C6D7"/>
+<path d="M15.2579 5.222C15.1582 4.92635 14.8809 4.72729 14.5688 4.72729H9.45459H9.47792C9.78996 4.72729 10.0672 4.92635 10.167 5.222L14.5852 18.313C14.7443 18.7843 14.3936 19.2728 13.8961 19.2728H13.8182H18.987C19.4846 19.2728 19.8352 18.7843 19.6761 18.313L15.2579 5.222Z" fill="#C4C6D7"/>
+</svg>
diff --git a/apps/pink/public/icons/grayscale/light/appwrite.svg b/apps/pink/public/icons/grayscale/light/appwrite.svg
new file mode 100644
index 0000000000..9c135b0ca4
--- /dev/null
+++ b/apps/pink/public/icons/grayscale/light/appwrite.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0007 17.1897C12.8841 17.7023 13.9104 17.9959 15.0053 17.9959C18.3161 17.9959 21 15.312 21 12.0012C21 8.69038 18.3161 6.00652 15.0053 6.00652C13.9106 6.00652 12.8844 6.29996 12.0011 6.81244C11.5328 6.54093 11.0288 6.33355 10.5027 6.1968C9.74038 5.99868 8.94658 5.95271 8.16656 6.0615C7.38649 6.17031 6.63555 6.43175 5.9566 6.8309C5.27765 7.23005 4.684 7.75907 4.20959 8.38774C3.73518 9.01641 3.38929 9.73239 3.19171 10.4948C2.99413 11.2572 2.94871 12.0511 3.05806 12.831C3.16742 13.611 3.42939 14.3618 3.82901 15.0404C4.22864 15.7191 4.75808 16.3123 5.38709 16.7864C6.65618 17.744 8.25375 18.1584 9.8283 17.9381C10.6015 17.83 11.3379 17.5733 12.0007 17.1897ZM10.9991 7.54161L10.9973 7.54319C11.9695 7.97912 12.7732 8.72336 13.2841 9.65145C13.5662 10.166 13.756 10.7319 13.8389 11.3242C14.0184 12.6081 13.6806 13.9107 12.8997 14.9455C12.1189 15.9803 10.9589 16.6625 9.67496 16.8421C8.39111 17.0216 7.08847 16.6838 6.05369 15.9029C5.0189 15.122 4.33669 13.9621 4.15714 12.6782C3.9776 11.3943 4.31542 10.0917 5.0963 9.0569C5.87718 8.0221 7.03717 7.33989 8.32102 7.16034C9.23908 7.03196 10.1667 7.1681 10.9991 7.54161ZM8.96109 10.7318C9.05981 10.3048 9.15144 9.94485 9.15864 9.92713C9.16556 9.91312 9.28566 9.9026 9.42336 9.9026C9.60679 9.9026 9.66692 9.91312 9.65629 9.94485C9.6456 9.9696 9.59267 10.1812 9.53985 10.4141C9.493 10.6199 9.38023 11.0954 9.27671 11.5319C9.26303 11.5896 9.24951 11.6466 9.23632 11.7022C9.18521 11.9179 9.1283 12.1604 9.07541 12.3857C9.01147 12.658 8.95341 12.9054 8.91857 13.0502L8.80933 13.5373H8.56571C8.43172 13.5373 8.32226 13.523 8.32226 13.5055C8.32226 13.442 8.42812 12.962 8.60475 12.2316C8.68573 11.879 8.82204 11.3111 8.92333 10.8892C8.93659 10.834 8.94924 10.7812 8.96109 10.7318ZM6.93885 11.8081L7.26352 11.4552L7.59186 11.1023H7.88475C8.04703 11.1023 8.18113 11.1129 8.18113 11.127C8.18113 11.1446 8.05406 11.293 7.89887 11.4658C7.74356 11.6353 7.61644 11.794 7.61644 11.8187C7.61644 11.8399 7.75408 12.0093 7.92007 12.1856L8.22349 12.5138H7.58122L7.35538 12.2739C7.23186 12.1433 7.08701 11.9844 7.03425 11.921L6.93885 11.8081ZM9.86779 11.2752C9.79382 11.2011 9.7338 11.1341 9.7338 11.1234C9.7338 11.1129 9.87139 11.1023 10.0443 11.1023H10.3515L10.669 11.4448C10.8455 11.6317 10.9866 11.7976 10.9866 11.8151C10.9866 11.8363 10.8526 11.9988 10.6866 12.1822L10.3867 12.5103L10.0585 12.5138H9.73048L10.0233 12.1927C10.1855 12.0197 10.3197 11.854 10.3267 11.8292C10.3373 11.7835 10.1432 11.5504 9.86779 11.2752Z" fill="#373B4D"/>
+</svg>
diff --git a/apps/pink/public/icons/grayscale/light/azure.svg b/apps/pink/public/icons/grayscale/light/azure.svg
new file mode 100644
index 0000000000..52ee13a52f
--- /dev/null
+++ b/apps/pink/public/icons/grayscale/light/azure.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.7421 5.22213C8.84188 4.92647 9.11914 4.72742 9.43118 4.72742H13.9999L9.25784 18.7782C9.15805 19.0739 8.88079 19.2729 8.56876 19.2729H5.013C4.51544 19.2729 4.1648 18.7844 4.32391 18.3131L8.7421 5.22213Z" fill="#373B4D"/>
+<path d="M16.0459 14.1819H8.84548C8.54294 14.1819 8.39687 14.5525 8.61804 14.7589L13.2448 19.0772C13.3795 19.2029 13.5568 19.2728 13.741 19.2728H17.818L16.0459 14.1819Z" fill="#373B4D"/>
+<path d="M15.2579 5.222C15.1582 4.92635 14.8809 4.72729 14.5688 4.72729H9.45459H9.47792C9.78996 4.72729 10.0672 4.92635 10.167 5.222L14.5852 18.313C14.7443 18.7843 14.3936 19.2728 13.8961 19.2728H13.8182H18.987C19.4846 19.2728 19.8352 18.7843 19.6761 18.313L15.2579 5.222Z" fill="#373B4D"/>
+</svg>
diff --git a/apps/pink/public/search.json b/apps/pink/public/search.json
index 4743952d13..80c13bddaa 100644
--- a/apps/pink/public/search.json
+++ b/apps/pink/public/search.json
@@ -1 +1 @@
-{"documentCount":51,"nextId":51,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[2,243],"1":[2,222],"2":[3,142],"3":[2,173],"4":[3,193],"5":[3,144],"6":[3,170],"7":[2,103],"8":[2,206],"9":[3,117],"10":[2,194],"11":[3,178],"12":[4,204],"13":[3,133],"14":[2,123],"15":[2,262],"16":[2,155],"17":[2,185],"18":[3,112],"19":[3,304],"20":[2,105],"21":[2,133],"22":[2,161],"23":[3,181],"24":[2,123],"25":[2,187],"26":[2,306],"27":[2,231],"28":[2,141],"29":[3,183],"30":[2,205],"31":[3,152],"32":[2,178],"33":[2,265],"34":[2,209],"35":[2,217],"36":[2,151],"37":[1,345],"38":[2,113],"39":[3,149],"40":[2,125],"41":[2,162],"42":[3,150],"43":[2,121],"44":[2,202],"45":[2,151],"46":[3,141],"47":[2,115],"48":[2,155],"49":[2,96],"50":[2,114]},"averageFieldLength":[2.313725490196078,173.13725490196086],"storedFields":{"0":{"title":"components - alert","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky is-info \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-info \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky is-success \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-success \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky is-warning \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-warning \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky is-danger \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-danger \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. tooltip avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"1":{"title":"components - avatar","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> &lt; div class = \" avatar is-color-empty \" > &lt;/ div > &lt; div class = \" avatar \" > aa &lt;/ div > &lt; div class = \" avatar \" > &lt; span class = \" icon-pencil \" > &lt;/ span > &lt;/ div > &lt; img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> &lt; div class = \" avatar is-size-x-small \" > aa &lt;/ div > &lt; div class = \" avatar is-size-small \" > aa &lt;/ div > &lt; div class = \" avatar is-size-medium \" > aa &lt;/ div > &lt; div class = \" avatar is-size-large \" > aa &lt;/ div > &lt; div class = \" avatar is-size-x-large \" > aa &lt;/ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> &lt; div class = \" avatar is-color-empty \" > aa &lt;/ div > &lt; div class = \" avatar \" > aa &lt;/ div > &lt; div class = \" avatar is-color-orange \" > aa &lt;/ div > &lt; div class = \" avatar is-color-green \" > aa &lt;/ div > &lt; div class = \" avatar is-color-blue \" > aa &lt;/ div > &lt; div class = \" avatar is-color-pink \" > aa &lt;/ div > &lt; div class = \" avatar is-color-red \" > aa &lt;/ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> &lt; ul class = \" avatars-group \" > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-x-small is-color-blue \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-x-small is-color-orange \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-x-small is-color-green \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-x-small \" > +2 &lt;/ div > &lt;/ li > &lt;/ ul > &lt; ul class = \" avatars-group \" > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-small is-color-blue \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-small is-color-orange \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-small is-color-green \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-small \" > +2 &lt;/ div > &lt;/ li > &lt;/ ul > &lt; ul class = \" avatars-group \" > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-color-blue \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-color-orange \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-color-green \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar \" > +2 &lt;/ div > &lt;/ li > &lt;/ ul > &lt; ul class = \" avatars-group \" > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-large is-color-blue \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-large is-color-orange \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-large is-color-green \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-large \" > +2 &lt;/ div > &lt;/ li > &lt;/ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"2":{"title":"components - code panel","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> &lt; section class = \" code-panel u-min-width-100-percent theme-dark \" > &lt; header class = \" code-panel-header \" > &lt; div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > &lt; button class = \" button is-text \" > &lt; span class = \" icon-external-link \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Raw data &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary is-disabled \" > &lt; span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Scroll to top &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ header > &lt; code class = \" code-panel-content grid-code \" > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > function = { &lt;/ pre > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > firstName: “hello” &lt;/ pre > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > } &lt;/ pre > &lt;/ code > &lt;/ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> &lt; code class = \" grid-code \" > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > function = { &lt;/ pre > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > firstName: “hello” &lt;/ pre > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > } &lt;/ pre > &lt;/ code > avatar collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"3":{"title":"components - collapsible","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> &lt; ul class = \" collapsible u-width-full-line \" > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; span class = \" text \" > Options one &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; span class = \" text \" > Options two &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; span class = \" text \" > Option three &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt;/ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> &lt; ul class = \" collapsible u-width-full-line \" > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" open > &lt; summary class = \" collapsible-button \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > Advanced Options &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > &lt; div class = \" form \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" choice-item \" > &lt; input type = \" checkbox \" /> &lt; div class = \" choice-item-content \" > &lt; div class = \" choice-item-title \" > Subheading &lt;/ div > &lt; p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" choice-item \" > &lt; input type = \" checkbox \" /> &lt; div class = \" choice-item-content \" > &lt; div class = \" choice-item-title \" > Subheading &lt;/ div > &lt; p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" choice-item \" > &lt; input type = \" checkbox \" /> &lt; div class = \" choice-item-content \" > &lt; div class = \" choice-item-title \" > Subheading &lt;/ div > &lt; p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt;/ details > &lt;/ li > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > Advanced Options &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > Advanced Options &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt;/ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"4":{"title":"components - drop list","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> &lt; div class = \" grid-box u-cross-start \" > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-block-end \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-block-end is-inline-end is-arrow-end \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> &lt; div class = \" grid-box u-cross-start \" > &lt; div class = \" u-flex \" style = \" min-inline-size : 12rem \" > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > &lt; div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-arrow-center \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > &lt; div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-arrow-end \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > &lt; div class = \" u-flex \" style = \" min-inline-size : 12rem \" > &lt; button class = \" button is-full-width is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-no-arrow \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"5":{"title":"components - file preview","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> &lt; a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > &lt; div class = \" file-preview-image \" > &lt; img src = \" https://unsplash.it/600 \" alt = \" \" /> &lt;/ div > &lt; div class = \" file-preview-content \" > &lt; div class = \" avatar \" > &lt; span class = \" icon-external-link \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ div > &lt;/ a > &lt; a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > &lt; div class = \" file-preview-content \" > &lt; div class = \" avatar \" > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; p > Preview not available &lt;/ p > &lt;/ div > &lt;/ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"6":{"title":"components - grid item","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header Complete Interactive sub-header Header Complete Interactive \"> &lt; div class = \" card u-margin-auto \" > &lt; div class = \" grid-item-1 \" > &lt; div class = \" grid-item-1-start-start \" > &lt; div class = \" eyebrow-heading-3 \" > sub-header &lt;/ div > &lt; h2 class = \" heading-level-6 u-margin-block-start-8 \" > Header &lt;/ h2 > &lt;/ div > &lt; div class = \" grid-item-1-start-end \" > &lt; div class = \" status is-complete \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Complete &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-start \" > &lt; div class = \" u-flex u-gap-16 u-flex-wrap \" > &lt; div class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-end \" > &lt; ul class = \" icons u-flex u-gap-8 \" > &lt; li > &lt; span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > &lt;/ span > &lt;/ li > &lt; li > &lt; span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > &lt;/ span > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt;/ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header Interactive sub-header Header Disabled Interactive sub-header Header Interactive sub-header Header Disabled Interactive \"> &lt; ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > &lt; li > &lt; div class = \" card \" > &lt; div class = \" grid-item-1 \" > &lt; div class = \" grid-item-1-start-start \" > &lt; div class = \" eyebrow-heading-3 \" > sub-header &lt;/ div > &lt; h2 class = \" heading-level-6 u-margin-block-start-8 \" > Header &lt;/ h2 > &lt;/ div > &lt; div class = \" grid-item-1-end-start \" > &lt; div class = \" u-flex u-gap-16 u-flex-wrap \" > &lt; div class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-end \" > &lt; ul class = \" icons u-flex u-gap-8 \" > &lt; li > &lt; span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > &lt;/ span > &lt;/ li > &lt; li > &lt; span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > &lt;/ span > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > &lt; div class = \" grid-item-1 \" > &lt; div class = \" grid-item-1-start-start \" > &lt; div class = \" eyebrow-heading-3 \" > sub-header &lt;/ div > &lt; h2 class = \" heading-level-6 u-margin-block-start-8 \" > Header &lt;/ h2 > &lt;/ div > &lt; div class = \" grid-item-1-start-end \" > &lt; div class = \" status \" > &lt; button class = \" tag \" disabled > &lt; span class = \" text \" > Disabled &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-start \" > &lt; div class = \" u-flex u-gap-16 u-flex-wrap \" > &lt; div class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-end \" > &lt; ul class = \" icons u-flex u-gap-8 \" > &lt; li > &lt; span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > &lt;/ span > &lt;/ li > &lt; li > &lt; span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > &lt;/ span > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ li > &lt;/ ul > file preview loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"7":{"title":"components - loader","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> &lt; div class = \" loader \" > &lt;/ div > grid item modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/loader"},"8":{"title":"components - modal","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> &lt; button class = \" button \" > &lt; span > Open Modal &lt;/ span > &lt;/ button > &lt; dialog class = \" modal \" id = \" dialog \" > &lt; form class = \" modal-form \" method = \" dialog \" > &lt; header class = \" modal-header \" > &lt; div class = \" avatar is-color-orange is-medium \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; h4 class = \" modal-title heading-level-5 \" > Modal title &lt;/ h4 > &lt; button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ header > &lt; div class = \" modal-content u-small \" > Modal label text. &lt;/ div > &lt; div class = \" modal-footer \" > &lt; div class = \" u-flex u-main-end u-gap-16 \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ form > &lt;/ dialog > To open or close a modal, use the native &lt;dialog&gt; element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> &lt; dialog id = \" dialog4 \" class = \" modal is-small \" open > &lt; form class = \" modal-form \" method = \" dialog \" > &lt; header class = \" modal-header \" > &lt; h4 class = \" modal-title heading-level-5 \" > Modal title &lt;/ h4 > &lt; button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ header > &lt; div class = \" modal-content u-small \" > Modal label text. &lt;/ div > &lt; div class = \" modal-footer \" > &lt; div class = \" u-flex u-main-end u-gap-16 \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ form > &lt;/ dialog > &lt; dialog id = \" dialog5 \" class = \" modal is-big \" open > &lt; form class = \" modal-form \" method = \" dialog \" > &lt; header class = \" modal-header \" > &lt; h4 class = \" modal-title heading-level-5 \" > Modal title &lt;/ h4 > &lt; button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ header > &lt; div class = \" modal-content u-small \" > Modal label text. &lt;/ div > &lt; div class = \" modal-footer \" > &lt; div class = \" u-flex u-main-end u-gap-16 \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ form > &lt;/ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. loader secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"9":{"title":"components - secondary tabs","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> &lt; ul class = \" secondary-tabs \" > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" disabled > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> &lt; ul class = \" secondary-tabs is-large \" > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" disabled > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > modal tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"10":{"title":"components - tabs","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> &lt; div class = \" tabs \" style = \" width : 350px \" > &lt; button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > &lt; span class = \" icon-cheveron-left \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > &lt; span class = \" icon-cheveron-right \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; ul class = \" tabs-list \" > &lt; li class = \" tabs-item \" > &lt; a class = \" tabs-button is-selected \" href = \" # \" > &lt; span class = \" text \" > Overview &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" tabs-item \" > &lt; a class = \" tabs-button \" href = \" # \" > &lt; span class = \" text \" > Sessions &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" tabs-item \" > &lt; a class = \" tabs-button \" href = \" # \" > &lt; span class = \" text \" > Activity &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" tabs-item \" > &lt; a class = \" tabs-button \" href = \" # \" > &lt; span class = \" text \" > Settings &lt;/ span > &lt;/ a > &lt;/ li > &lt;/ ul > &lt;/ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"11":{"title":"components - upload box","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp;amp; % hello.mp4 &amp;amp; % hello.mp4 &amp;amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> &lt; section class = \" upload-box u-width-full-line \" > &lt; header class = \" upload-box-header \" > &lt; h4 class = \" upload-box-title \" > &lt; span class = \" text \" > File Uploads &lt;/ span > &lt; span class = \" amount \" > 3 &lt;/ span > &lt;/ h4 > &lt; button class = \" upload-box-button \" aria-label = \" toggle upload box \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" upload-box-button \" aria-label = \" close upload box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ header > &lt; div class = \" upload-box-content \" > &lt; ul class = \" upload-box-list \" > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image u-margin-inline-end-16 \" > &lt; div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon \" > % &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > hello.mp4 &lt;/ label > &lt; button class = \" upload-box-button \" aria-label = \" Uploading \" > &lt; span class = \" icon \" > &amp;amp; &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image u-margin-inline-end-16 \" > &lt; div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon \" > % &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > hello.mp4 &lt;/ label > &lt; button class = \" upload-box-button \" aria-label = \" Uploading \" > &lt; span class = \" icon \" > &amp;amp; &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image is-finished u-margin-inline-end-16 \" > &lt; div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon \" > % &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > hello.mp4 &lt;/ label > &lt; button class = \" upload-box-button \" aria-label = \" Uploading \" > &lt; span class = \" icon \" > &amp;amp; &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ section > &lt; section class = \" upload-box u-width-full-line \" > &lt; header class = \" upload-box-header \" > &lt; h4 class = \" upload-box-title \" > &lt; span class = \" text \" > File Uploads &lt;/ span > &lt; span class = \" amount \" > 3 &lt;/ span > &lt;/ h4 > &lt; button class = \" upload-box-button \" aria-label = \" toggle upload box \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" upload-box-button \" aria-label = \" close upload box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ header > &lt; div class = \" upload-box-content is-open \" > &lt; ul class = \" upload-box-list \" > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image u-margin-inline-end-16 \" > &lt; div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" text \" > 30% &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > &lt; p class = \" text u-margin-block-start-8 \" > hello.mp4 &lt;/ p > &lt;/ label > &lt; div class = \" tag is-warning \" > pending &lt;/ div > &lt; button class = \" upload-box-button \" aria-label = \" cancel upload \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image u-margin-inline-end-16 \" > &lt; div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" text \" > 60% &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > &lt; p class = \" text u-margin-block-start-8 \" > hello.mp4 &lt;/ p > &lt;/ label > &lt; div class = \" tag is-danger \" > failed &lt;/ div > &lt; button class = \" upload-box-button \" aria-label = \" cancel upload \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image is-finished u-margin-inline-end-16 \" > &lt; div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > &lt; p class = \" text u-margin-block-start-8 \" > hello.mp4 &lt;/ p > &lt;/ label > &lt; button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > &lt; span class = \" icon-check \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> &lt; div class = \" upload-image \" > &lt; div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon \" > &lt;/ span > &lt;/ div > tabs upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"12":{"title":"components - upload file-box","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> &lt; div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > &lt; div class = \" upload-file-box \" > &lt; div class = \" upload-file-box-image \" > &lt; span class = \" icon-upload \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" u-min-width-0 u-text-center \" > &lt; h5 class = \" upload-file-box-title heading-level-7 u-inline \" > &lt; span class = \" is-only-desktop \" > Drag and drop files here to upload &lt;/ span > &lt; span class = \" is-not-desktop \" > Upload a File &lt;/ span > &lt;/ h5 > &lt; button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. &lt;/ span > &lt;/ button > &lt;/ div > &lt; div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > &lt; p class = \" upload-file-box-info body-text-2 u-normal \" > Max file size: 10MB &lt;/ p > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Choose a file &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> &lt; div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > &lt; div class = \" upload-file-box \" > &lt; div class = \" upload-file-box-image \" > &lt; span class = \" icon-upload \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" u-min-width-0 u-text-center \" > &lt; h5 class = \" upload-file-box-title heading-level-7 u-inline \" > &lt; span class = \" is-only-desktop \" > Drag and drop files here to upload &lt;/ span > &lt; span class = \" is-not-desktop \" > Upload a File &lt;/ span > &lt;/ h5 > &lt; button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. &lt;/ span > &lt;/ button > &lt;/ div > &lt; div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > &lt; p class = \" upload-file-box-info body-text-2 u-normal \" > Max file size: 10MB &lt;/ p > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Choose a file &lt;/ span > &lt;/ button > &lt;/ div > &lt; ul class = \" upload-file-box-list u-min-width-0 \" > &lt; li class = \" u-flex u-cross-center u-min-width-0 \" > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover &lt;/ span > &lt; span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png &lt;/ span > &lt; span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB &lt;/ span > &lt; button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> &lt; div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > &lt; div class = \" upload-file-box \" > &lt; div class = \" upload-file-box-image \" > &lt; span class = \" icon-upload \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" u-min-width-0 u-text-center \" > &lt; h5 class = \" upload-file-box-title heading-level-7 u-inline \" > &lt; span class = \" is-only-desktop \" > Drag and drop files here to upload &lt;/ span > &lt; span class = \" is-not-desktop \" > Upload a File &lt;/ span > &lt;/ h5 > &lt; button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. &lt;/ span > &lt;/ button > &lt;/ div > &lt; div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > &lt; p class = \" upload-file-box-info body-text-2 u-normal \" > Max file size: 10MB &lt;/ p > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Choose a file &lt;/ span > &lt;/ button > &lt;/ div > &lt; ul class = \" upload-file-box-list u-min-width-0 \" > &lt; li class = \" u-flex u-cross-center u-min-width-0 \" > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover &lt;/ span > &lt; span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png &lt;/ span > &lt; span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB &lt;/ span > &lt; button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt; p class = \" helper u-color-text-danger u-margin-block-start-8 \" > &lt; span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Display a contextual error message here &lt;/ span > &lt;/ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"13":{"title":"components - user profile","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> &lt; div class = \" card \" > &lt; div class = \" user-profile \" > &lt; span class = \" avatar \" > UN &lt;/ span > &lt; span class = \" user-profile-info \" > &lt; span class = \" name \" > User Name &lt;/ span > &lt; div class = \" interactive-text-output u-padding-inline-0 \" > &lt; span class = \" text \" > User ID &lt;/ span > &lt; div class = \" u-flex u-cross-child-start u-gap-8 \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ span > &lt; span class = \" user-profile-sep \" > &lt;/ span > &lt; span class = \" user-profile-empty-column \" > &lt;/ span > &lt; span class = \" user-profile-info \" > &lt; span class = \" text \" > Extra description &lt;/ span > &lt;/ span > &lt;/ div > &lt;/ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"14":{"title":"elements - box","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> &lt; div class = \" box \" > Box element &lt;/ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> &lt; div class = \" boxes-wrapper \" > &lt; div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box &lt;/ div > &lt; div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box &lt;/ div > &lt; div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box &lt;/ div > &lt; div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box &lt;/ div > &lt;/ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"15":{"title":"elements - button","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> &lt; button class = \" button \" > &lt; span class = \" text \" > Primary &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Secondary &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text &lt;/ span > &lt;/ button > &lt; button class = \" button is-only-icon \" aria-label = \" Add new item \" > &lt; span class = \" icon-plus \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> &lt; button class = \" button \" > &lt; span class = \" text \" > Medium &lt;/ span > &lt;/ button > &lt; button class = \" button is-big \" > &lt; span class = \" text \" > Large &lt;/ span > &lt;/ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-plus \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-cheveron-left \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" text \" > Button &lt;/ span > &lt; span class = \" icon-cheveron-right \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-download \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-external-link \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> &lt; ul class = \" buttons-list u-margin-auto \" > &lt; li class = \" buttons-list-item \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" buttons-list-item \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" buttons-list-item \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button 3 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" buttons-list-item \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button 4 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"16":{"title":"elements - card","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Preview HTML \"> &lt; article class = \" card \" > &lt;/ article > &lt; article class = \" card is-border-dashed \" > &lt;/ article > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"17":{"title":"elements - checkbox","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> &lt; input type = \" checkbox \" /> &lt; input type = \" checkbox \" checked = \" true \" /> States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> &lt; input type = \" checkbox \" disabled /> &lt; input type = \" checkbox \" checked = \" true \" disabled /> Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> &lt; input type = \" checkbox \" class = \" is-small \" /> &lt; input type = \" checkbox \" checked = \" true \" /> &lt; input type = \" checkbox \" class = \" is-large \" /> Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"18":{"title":"elements - inline code","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> &lt; code class = \" inline-code \" > keyword or part of a code &lt;/ code > checkbox input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"19":{"title":"elements - input field","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" input-text-wrapper \" > &lt; input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> &lt; div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" > &lt; input type = \" search \" placeholder = \" Search \" /> &lt; div class = \" icon-search \" aria-hidden = \" true \" > &lt;/ div > &lt; button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > &lt; input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> &lt; button class = \" show-password-button \" aria-label = \" show password \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > &lt; input type = \" text \" placeholder = \" Placeholder \" /> &lt; div class = \" options-list \" > &lt; button class = \" options-list-button \" aria-label = \" show password / hide password \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" options-list-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" tags-input \" > &lt; div class = \" tags \" > &lt; ul class = \" tags-list \" > &lt; li class = \" tags-item \" > &lt; div class = \" input-tag \" > &lt; span class = \" tag-text \" > role &lt; div > &lt;/ div > &lt;/ span > &lt; button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ div > &lt; input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" select u-width-full-line \" > &lt; select name = \" pets \" id = \" pet-select \" > &lt; option value = \" \" > Select option &lt;/ option > &lt; option value = \" 1 \" > Option 1 &lt;/ option > &lt; option value = \" 2 \" > Option 2 &lt;/ option > &lt; option value = \" 3 \" > Option 3 &lt;/ option > &lt; option value = \" 4 \" > Option 4 &lt;/ option > &lt; option value = \" 5 \" > Option 5 &lt;/ option > &lt; option value = \" 6 \" > Option 6 &lt;/ option > &lt;/ select > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; textarea class = \" input-text \" placeholder = \" Type here... \" > &lt;/ textarea > &lt;/ li > &lt;/ ul > &lt;/ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> &lt;/ li > &lt;/ ul > &lt;/ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> &lt; p class = \" helper \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is a helper &lt;/ span > &lt;/ p > &lt; p class = \" helper u-color-text-success \" > &lt; span class = \" icon-check-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is success &lt;/ span > &lt;/ p > &lt; p class = \" helper u-color-text-warning \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is a warning &lt;/ span > &lt;/ p > &lt; p class = \" helper u-color-text-danger \" > &lt; span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is an error &lt;/ span > &lt;/ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning \"> &lt; div class = \" u-width-full-line u-max-width-500 \" > &lt; label class = \" label is-required \" > Label &lt;/ label > &lt; span class = \" optional \" > (optional) &lt;/ span > &lt; button class = \" tooltip \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > &lt; p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. &lt;/ p > &lt;/ span > &lt;/ button > &lt; div class = \" input-text-wrapper \" > &lt; input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> &lt; span class = \" text-counter \" > &lt; span class = \" text-counter-count \" > 4 &lt;/ span > &lt; span class = \" text-counter-separator \" > &lt;/ span > &lt; span class = \" text-counter-max \" > 20 &lt;/ span > &lt;/ span > &lt;/ div > &lt; p class = \" helper u-color-text-warning u-margin-block-start-8 \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is a warning &lt;/ span > &lt;/ p > &lt;/ div > inline code keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"20":{"title":"elements - keyboard","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> &lt; p class = \" text u-margin-block-start-8 \" > To open search box please press &lt; kbd class = \" kbd \" > ⌘ &lt;/ kbd > + &lt; kbd class = \" kbd \" > K &lt;/ kbd > buttons. &lt;/ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"21":{"title":"elements - list","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> &lt; ul class = \" list \" > &lt; li class = \" list-item \" > &lt; span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > List Item &lt;/ span > &lt;/ li > &lt; li class = \" list-item \" > &lt; span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > &lt;/ span > &lt; a href = \" # \" class = \" link \" > &lt; span class = \" text \" > List Item (link) &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" list-item \" > &lt; span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > &lt;/ span > &lt; button class = \" link \" > &lt; span class = \" text \" > List Item (button) &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> &lt; ul class = \" list \" > &lt; li class = \" list-item \" > &lt; span class = \" icon-check \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > List Item &lt;/ span > &lt;/ li > &lt; li class = \" list-item \" > &lt; span class = \" icon-check \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > List Item &lt;/ span > &lt;/ li > &lt; li class = \" list-item \" > &lt; span class = \" icon-check \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > List Item &lt;/ span > &lt;/ li > &lt;/ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> &lt; ol class = \" numeric-list \" > &lt; li class = \" numeric-list-item \" > &lt; span class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Numeric List Item &lt;/ p > &lt;/ span > &lt;/ li > &lt; li class = \" numeric-list-item \" > &lt; span class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Numeric List Item &lt;/ p > &lt;/ span > &lt;/ li > &lt; li class = \" numeric-list-item \" > &lt; span class = \" text \" > Numeric List Item &lt;/ span > &lt;/ li > &lt;/ ol > keyboard output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"22":{"title":"elements - output","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> &lt; div class = \" interactive-text-output \" > &lt; span class = \" text u-break-word \" > visible text &lt;/ span > &lt; div class = \" u-flex u-cross-child-start u-gap-8 \" > &lt; button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt; div class = \" interactive-text-output \" > &lt; span class = \" text \" > •••••• &lt;/ span > &lt; div class = \" u-flex u-cross-child-start u-gap-8 \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> &lt; div class = \" interactive-text-output is-textarea \" > &lt; span class = \" text u-line-height-1-5 u-break-word \" > &lt; p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi &lt;/ p > &lt;/ span > &lt; div class = \" u-flex u-cross-child-start u-gap-8 \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > list radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"23":{"title":"elements - radio button","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> &lt; input type = \" radio \" name = \" radio-1 \" /> &lt; input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> &lt; input type = \" radio \" name = \" radio-2 \" disabled /> &lt; input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> &lt; input type = \" radio \" class = \" is-small \" name = \" size \" /> &lt; input type = \" radio \" name = \" size \" checked = \" true \" /> &lt; input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"24":{"title":"elements - status","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> &lt; div class = \" status \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Ready &lt;/ span > &lt;/ div > &lt; div class = \" status is-waiting \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Waiting &lt;/ span > &lt;/ div > &lt; div class = \" status is-pending \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Pending &lt;/ span > &lt;/ div > &lt; div class = \" status is-failed \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Failed &lt;/ span > &lt;/ div > &lt; div class = \" status is-complete \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Complete &lt;/ span > &lt;/ div > &lt; div class = \" status is-processing \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Processing &lt;/ span > &lt;/ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"25":{"title":"elements - switch","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> &lt; input type = \" checkbox \" class = \" switch \" /> &lt; input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> &lt; input type = \" checkbox \" class = \" switch \" disabled /> &lt; input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> &lt; input type = \" checkbox \" class = \" switch is-small \" /> &lt; input type = \" checkbox \" class = \" switch \" checked = \" true \" /> &lt; input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"26":{"title":"elements - table","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> &lt; table class = \" table is-selected-columns-mobile \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" > &lt; span class = \" eyebrow-heading-3 \" > Filename &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > &lt; span class = \" eyebrow-heading-3 \" > Type &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > &lt; span class = \" eyebrow-heading-3 \" > Size &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > &lt; span class = \" eyebrow-heading-3 \" > Created &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ td > &lt; td class = \" table-col \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ td > &lt; td class = \" table-col \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> &lt; section class = \" card \" > &lt; table class = \" table is-remove-outer-styles \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" > &lt; span class = \" eyebrow-heading-3 \" > Name &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" > &lt; span class = \" eyebrow-heading-3 \" > Value &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Lorem &lt;/ span > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" data-title = \" value \" > &lt; div class = \" interactive-text-output \" > &lt; span class = \" text \" > Numquam exercitationem. &lt;/ span > &lt; div class = \" u-flex u-cross-child-start u-gap-8 \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > &lt; span class = \" icon-eye-off \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" data-title = \" options \" > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Ipsum &lt;/ span > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" data-title = \" value \" > &lt; div class = \" interactive-text-output \" > &lt; span class = \" text \" > •••••• &lt;/ span > &lt; div class = \" u-flex u-cross-child-start u-gap-8 \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" data-title = \" options \" > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > &lt; div class = \" u-flex u-margin-block-start-16 \" > &lt; button class = \" button is-text u-padding-inline-0 \" type = \" button \" > &lt; span class = \" icon-plus \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Create variable &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> &lt; div class = \" table-with-scroll \" > &lt; div class = \" table-wrapper \" > &lt; table class = \" table is-sticky-scroll \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > &lt; span class = \" eyebrow-heading-3 \" > Document ID &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Name &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Year &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Stars[] &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Directions[] &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Duration[] &lt;/ span > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > &lt;/ div > &lt;/ div > Scrolling tables without a sticky column should be wrapped by &lt;div class=&quot;table-with-scroll&quot;&gt; and &lt;div class=&quot;table-wrapper&quot;&gt; . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> &lt; div class = \" table-with-scroll \" > &lt; div class = \" table-wrapper \" > &lt; table class = \" table \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > &lt; span class = \" eyebrow-heading-3 \" > Document ID &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Name &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Year &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Stars[] &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Directions[] &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Duration[] &lt;/ span > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > &lt;/ div > &lt;/ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> &lt; div class = \" table \" role = \" table \" > &lt; div class = \" table-thead \" role = \" rowheader \" > &lt; div class = \" table-row \" role = \" row \" > &lt; div class = \" table-thead-col \" role = \" columnheader \" > &lt; span class = \" eyebrow-heading-3 \" > Filename &lt;/ span > &lt;/ div > &lt; div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > &lt; span class = \" eyebrow-heading-3 \" > Type &lt;/ span > &lt;/ div > &lt; div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > &lt; span class = \" eyebrow-heading-3 \" > Size &lt;/ span > &lt;/ div > &lt; div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > &lt; span class = \" eyebrow-heading-3 \" > Created &lt;/ span > &lt;/ div > &lt; div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" table-tbody \" role = \" rowgroup \" > &lt; a class = \" table-row \" role = \" row \" href = \" # \" > &lt; div class = \" table-col \" role = \" cell \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ div > &lt; div class = \" table-col \" role = \" cell \" date-title = \" Options \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ a > &lt; a class = \" table-row \" role = \" row \" href = \" # \" > &lt; div class = \" table-col \" role = \" cell \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > &lt; p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png &lt;/ p > &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ div > &lt; div class = \" table-col \" role = \" cell \" date-title = \" Options \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ a > &lt; a class = \" table-row \" role = \" row \" href = \" # \" > &lt; div class = \" table-col \" role = \" cell \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ div > &lt; div class = \" table-col \" role = \" cell \" date-title = \" Options \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ a > &lt;/ div > &lt;/ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"27":{"title":"elements - tag","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error default info success warning error \"> &lt; div class = \" tag \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > default &lt;/ span > &lt;/ div > &lt; div class = \" tag is-info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > info &lt;/ span > &lt;/ div > &lt; div class = \" tag is-success \" > &lt; span class = \" icon-check-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > success &lt;/ span > &lt;/ div > &lt; div class = \" tag is-warning \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > warning &lt;/ span > &lt;/ div > &lt; div class = \" tag is-danger \" > &lt; span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > error &lt;/ span > &lt;/ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ button > &lt; a href = \" # \" class = \" tag is-selected \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ a > &lt; button class = \" tag \" disabled > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"28":{"title":"elements - tooltip","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> &lt; button class = \" tooltip \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. &lt;/ span > &lt;/ button > &lt; button class = \" tag tooltip \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > User ID &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > &lt; p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. &lt;/ p > &lt;/ span > &lt;/ button > &lt; button class = \" tag tooltip \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > User ID &lt;/ span > &lt; span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. &lt;/ span > &lt;/ button > tag alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"29":{"title":"foundations - border radius","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> &lt; div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > &lt;/ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> &lt; div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > &lt;/ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> &lt; div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > &lt;/ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> &lt; div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > &lt;/ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"30":{"title":"foundations - colors","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: &lt; style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } &lt;/ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"31":{"title":"foundations - dark theme","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials &lt; style language = \" scss \" > $ theme-dark : \".theme-dark\" ; &lt;/ style > Implementation to a SCSS Partial &lt; style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } &amp; { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } &lt;/ style > Compiled CSS &lt; style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } &lt;/ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"32":{"title":"foundations - elevation","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is &quot;elevated&quot; in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> &lt; div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > &lt; p class = \" text u-margin-block-start-8 \" > shadow-small &lt;/ p > &lt;/ div > &lt; div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > &lt; p class = \" text u-margin-block-start-8 \" > shadow-large &lt;/ p > &lt;/ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"33":{"title":"foundations - icons","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use the heroicons library. By following the steps below, you can easily include all icons in your projects: Navigate to Heroicons website Navigate to heroicons and make sure you are looking at the solid icons. Select an icon and copy its name. Use the selected icon In your code use a class, type icon- and paste the icon’s name right after. Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-amazon icon-android icon-angular icon-apple icon-auth0 icon-authentik icon-autodesk icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-amazon icon-android icon-angular icon-apple icon-auth0 icon-authentik icon-autodesk icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"34":{"title":"foundations - responsive","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation &lt; style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small &amp; medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } &lt;/ style > SCSS Code &lt; style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; &lt;/ style > Sass Variables Breakpoints in Media Queries Rule &lt; style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium &amp; large screens */ @media # { $break3open } { } /* large screens */ &lt;/ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Desing responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. &lt; style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small &amp; medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small &amp; large screens */ } &lt;/ style > Example of a SCSS Partial &lt; style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } &lt;/ style > Compiled CSS &lt; style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } &lt;/ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"35":{"title":"foundations - typography","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> &lt; h1 class = \" heading-level-1 \" > Heading level 1 &lt;/ h1 > &lt; h2 class = \" heading-level-2 \" > Heading level 2 &lt;/ h2 > &lt; h3 class = \" heading-level-3 \" > Heading level 3 &lt;/ h3 > &lt; h4 class = \" heading-level-4 \" > Heading level 4 &lt;/ h4 > &lt; h5 class = \" heading-level-5 \" > Heading level 5 &lt;/ h5 > &lt; h6 class = \" heading-level-6 \" > Heading level 6 &lt;/ h6 > &lt; h6 class = \" heading-level-7 \" > Heading level 7 &lt;/ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> &lt; h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 &lt;/ h4 > &lt; h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 &lt;/ h5 > &lt; h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 &lt;/ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> &lt; p class = \" u-bold \" > Body text level 1 SemiBold &lt;/ p > &lt; p > Body text level 1 Regular &lt;/ p > &lt; p class = \" u-bold \" > Body text level 2 SemiBold &lt;/ p > &lt; p > Body text level 2 Regular &lt;/ p > &lt; p style = \" text-decoration : underline \" > Body text level 2 Underline &lt;/ p > &lt; a class = \" link \" > Link text Underline &lt;/ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> &lt; code class = \" inline-code \" > Code level 1 &lt;/ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"36":{"title":"getting started","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile Getting Started Pink Design is Appwrite&#39;s open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the &lt;head&gt; section of your HTML file. \"> &lt; link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> &lt;!-- optionally, add icons --> &lt; link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install @appwrite.io/pink Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"37":{"title":"home","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" avatar is-color-pink \" > RR &lt;/ span > &lt;!-- ... --> &lt;/ div > &lt;/ td > &lt;!-- ... --> &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; div class = \" avatar \" > &lt; img src = \" /jenny.jpg \" alt = \" JW \" /> &lt;/ div > &lt;!-- ... --> &lt;/ div > &lt;/ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install @appwrite.io/pink import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite&#39;s Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Elad Shechter @elad2412 Web Developer at Appwrite Chen Parnasa @chenparnasa Product Designer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Wess Cope @wess Software Engineer at Appwrite Brandon @kodumbeats Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Philipp Hausleiter @phaus Shmuel Fogel @fogelito Software Engineer at Appwrite Carla @heyCarla Product Designer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite Jake Barnby @abnegate Engineering Lead at Appwrite Steven Nguyen @stnguyen90 Software Engineer at Appwrite Damodar Lohani @lohanidamodar Software Engineer at Appwrite Bishwajeet Parhi @2002Bishwajeet Hardik Sachan @hardiksachan Shimon Newman @shimonewman Full Stack Engineer at Appwrite Thomas G. Lopes @tglide Frontend Engineer at Appwrite Rahul Singh @drph4nt0m Brandon @brandonroberts Matej Bačo @Meldiron Software Engineer at Appwrite achintya @achintya-7 Aditya Rana @codingsamurai-10 Christy Jacob @christyjacob4 Engineering Lead at Appwrite Eldad Fux @eldadfux Appwrite's Founder Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"38":{"title":"layout - container","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> &lt; div class = \" container \" > &lt; p class = \" text u-margin-block-start-8 \" > Container &lt;/ p > &lt;/ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"39":{"title":"layout - grid box","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> &lt; ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt;/ ul > container navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"40":{"title":"layout - navigation","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> &lt; div class = \" side-nav \" > &lt; div class = \" side-nav-main \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button is-selected \" href = \" \" > &lt; span class = \" icon-home \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-user-group \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-bell \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-chart-pie \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt; div class = \" side-nav-bottom \" > &lt; section class = \" drop-section \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-cog \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ section > &lt;/ div > &lt;/ div > grid box pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"41":{"title":"layout - pagination","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn&#39;t fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> &lt; nav class = \" pagination \" > &lt; span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > &lt; span class = \" icon-cheveron-left \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Prev &lt;/ span > &lt;/ span > &lt; ol class = \" pagination-list is-only-desktop \" > &lt; li class = \" pagination-item \" > &lt; span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > &lt; span class = \" text \" > 1 &lt;/ span > &lt;/ span > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > &lt; span class = \" icon \" > … &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 3 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 4 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 5 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" show next 5 pages \" > &lt; span class = \" icon \" > … &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 20 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ol > &lt; a href = \" \" class = \" button is-text \" aria-label = \" next page \" > &lt; span class = \" text \" > Next &lt;/ span > &lt; span class = \" icon-cheveron-right \" aria-hidden = \" true \" > &lt;/ span > &lt;/ a > &lt;/ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"42":{"title":"utilities - box model","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> &lt; div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > &lt;/ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"43":{"title":"utilities - colors","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> &lt; div class = \" icon-check u-color-text-disabled \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-offline \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-info \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-danger \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-warning \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-success \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-gray \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-pink \" > &lt;/ div > box model display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"44":{"title":"utilities - display","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)); border-inline-start: solid 0.0625rem hsl(var(--color-border)); u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)); border-block-start: solid 0.0625rem hsl(var(--color-border)); u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)); border-block-end: solid 0.0625rem hsl(var(--color-border)); u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-100-percent max-inline-size:100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> &lt; div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > &lt; div class = \" box \" > 1 &lt;/ div > &lt; div class = \" box \" > 2 &lt;/ div > &lt; div class = \" box \" > 3 &lt;/ div > &lt;/ div > colors position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"45":{"title":"utilities - position","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile utilities position Position An element&#39;s position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> &lt; section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > &lt; p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px &lt;/ p > &lt;/ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"46":{"title":"utilities - reset inputs","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field&#39;s arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> &lt; input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> &lt; br /> &lt; input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"47":{"title":"utilities - responsive","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp;amp; desktops I’m visible on mobile &amp;amp; tablets \"> &lt; p class = \" is-only-mobile \" > I’m visible on mobile &lt;/ p > &lt; p class = \" is-only-tablet \" > I’m visible on tablets &lt;/ p > &lt; p class = \" is-only-desktop \" > I’m visible on desktop &lt;/ p > &lt; p class = \" is-not-mobile \" > I’m visible on tablets &amp;amp; desktops &lt;/ p > &lt; p class = \" is-not-desktop \" > I’m visible on mobile &amp;amp; tablets &lt;/ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"48":{"title":"utilities - text","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12); font-size: 0.75rem; u-small font-size: pxToRem(14); font-size: 0.875rem; u-font-size-32 font-size: pxToRem(32); font-size: 2rem; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-text-center text-align: center; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same Preview HTML x-small small text bold x-small small text bold \"> &lt; div > &lt; p class = \" text u-x-small \" > x-small &lt;/ p > &lt; p class = \" text u-small \" > small &lt;/ p > &lt; p class = \" text \" > text &lt;/ p > &lt; p class = \" text u-bold \" > bold &lt;/ p > &lt;/ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"49":{"title":"utilities - theme","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"50":{"title":"utilities - visibility","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile utilities visibility Visibility An element&#39;s visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> &lt; div class = \" box u-overflow-y-auto \" > &lt; p class = \" text \" > some text &lt;/ p > &lt; p class = \" u-hide \" > hide me &lt;/ p > &lt;/ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["99px",{"1":{"34":5,"44":1}}],["zoom",{"1":{"33":2}}],["z",{"1":{"32":1,"45":13}}],["zagar",{"1":{"26":18}}],["$break3open",{"1":{"34":3,"44":1,"47":2}}],["$break2open",{"1":{"34":3,"47":1}}],["$break2",{"1":{"34":4,"47":1}}],["$break1",{"1":{"34":5,"44":1,"47":3}}],["$",{"1":{"31":2,"34":4,"37":2}}],["$theme",{"1":{"31":2,"49":2}}],["queries",{"1":{"34":1}}],["quot",{"1":{"26":4,"32":2}}],["quickly",{"1":{"25":1,"45":1}}],["justify",{"1":{"44":3}}],["jacob",{"1":{"37":1}}],["jake",{"1":{"37":1}}],["javascript",{"1":{"36":1}}],["java",{"1":{"33":2}}],["join",{"1":{"37":3}}],["journey",{"1":{"35":1}}],["jw",{"1":{"37":1}}],["jenny",{"1":{"37":3}}],["jeremiah",{"1":{"26":18}}],["js",{"1":{"33":2}}],["jpg",{"1":{"5":1,"26":12,"37":1}}],["jpeg",{"1":{"5":1,"26":18}}],["⌘",{"1":{"20":3}}],["75rem",{"1":{"42":3,"44":3,"48":1}}],["767",{"1":{"34":3,"44":1}}],["767px",{"1":{"34":1,"39":1}}],["768px",{"1":{"34":6,"39":1}}],["7",{"1":{"12":3,"35":4,"37":2}}],["70",{"1":{"11":2,"30":1}}],["0625rem",{"1":{"44":3}}],["0px",{"1":{"34":1}}],["0",{"1":{"11":7,"12":13,"13":1,"26":1,"30":2,"31":2,"42":13,"44":14,"45":4,"46":1,"48":2,"50":4}}],["52",{"1":{"42":2}}],["50",{"1":{"29":1,"30":5,"31":2,"44":2,"50":1}}],["500",{"1":{"19":9,"30":1,"44":2}}],["57",{"1":{"26":18}}],["56",{"1":{"19":1,"30":1,"42":8}}],["5",{"1":{"8":3,"19":4,"22":1,"26":6,"30":2,"35":4,"41":5,"45":2,"48":2,"50":1}}],["5rem",{"1":{"0":10,"12":2,"15":1,"19":1,"34":2,"39":1,"42":7,"44":8,"45":2}}],["31",{"1":{"44":1}}],["3rem",{"1":{"42":1,"45":1}}],["343",{"1":{"30":1}}],["39",{"1":{"26":1,"36":1,"37":1,"41":1,"45":1,"46":1,"50":1}}],["336",{"1":{"26":18}}],["300",{"1":{"30":2}}],["30",{"1":{"11":3,"30":1}}],["350px",{"1":{"10":1}}],["3",{"1":{"6":3,"11":6,"15":3,"19":4,"26":22,"30":1,"35":8,"37":1,"41":3,"42":3,"44":3}}],["32",{"1":{"3":1,"26":12,"42":9,"44":2,"48":2}}],["32px",{"1":{"1":2}}],["625rem",{"1":{"44":2}}],["60",{"1":{"11":3}}],["600",{"1":{"5":1,"35":1,"48":1}}],["6",{"1":{"6":3,"19":4,"26":18,"35":4,"42":1,"44":1}}],["6rem",{"1":{"4":1}}],["64px",{"1":{"1":1}}],["875rem",{"1":{"48":1}}],["87",{"1":{"30":1}}],["8px",{"1":{"17":1,"23":1,"25":1,"29":1}}],["8rem",{"1":{"4":5,"39":1}}],["8",{"1":{"3":6,"6":6,"11":3,"12":1,"13":1,"19":2,"20":1,"21":2,"22":4,"26":3,"28":1,"32":2,"38":1,"42":2,"44":6,"45":5}}],["vue",{"1":{"33":2}}],["vs",{"1":{"33":2}}],["vk",{"1":{"33":2}}],["verified",{"1":{"27":1}}],["verbatim",{"1":{"18":1}}],["vertical",{"1":{"3":16,"12":3,"21":1,"44":2,"48":1}}],["valid",{"1":{"19":1}}],["values",{"1":{"19":1,"30":1}}],["valuemax",{"1":{"11":7}}],["valuemin",{"1":{"11":7}}],["valuenow",{"1":{"11":7}}],["value",{"1":{"11":7,"19":10,"26":5,"29":4,"39":1}}],["variant",{"1":{"31":1,"34":1}}],["variable",{"1":{"26":3,"29":4,"31":3,"32":1,"34":1,"39":1}}],["variables",{"1":{"12":3,"19":4,"28":10,"30":2,"34":2,"39":1,"45":2}}],["vars",{"1":{"19":3}}],["var",{"1":{"12":3,"29":4,"30":2,"31":12,"32":2,"34":3,"43":8,"44":6,"48":1}}],["via",{"1":{"42":1,"45":1}}],["vimeo",{"1":{"33":2}}],["visually",{"1":{"27":1,"32":1}}],["visual",{"1":{"17":1,"18":1,"33":1}}],["visible",{"1":{"10":2,"22":3,"26":5,"47":15,"50":2}}],["visibility",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":2,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":2,"50":4}}],["view",{"1":{"2":1,"37":1}}],["48",{"1":{"42":2}}],["48px",{"1":{"1":2}}],["4px",{"1":{"29":1,"33":3,"35":1}}],["442",{"1":{"26":1}}],["41",{"1":{"26":1}}],["4mb",{"1":{"12":6}}],["4",{"1":{"12":5,"15":3,"19":7,"29":1,"30":1,"35":4,"41":3,"42":4,"44":2,"45":1}}],["400",{"1":{"30":1,"31":2,"35":1,"44":2}}],["40px",{"1":{"1":2,"15":1}}],["40",{"1":{"1":1,"26":6,"42":2}}],["ycombinator",{"1":{"33":2}}],["yandex",{"1":{"33":2}}],["yammer",{"1":{"33":2}}],["yahoo",{"1":{"33":2}}],["y",{"1":{"26":18,"50":3}}],["year",{"1":{"26":12}}],["yet",{"1":{"1":1}}],["youtube",{"1":{"33":2}}],["you",{"1":{"3":10,"4":1,"10":1,"14":1,"15":2,"17":1,"23":1,"25":1,"26":2,"27":2,"33":2,"34":2,"41":1,"45":1}}],["yourself",{"1":{"37":1}}],["your",{"1":{"0":2,"16":1,"19":3,"33":2,"36":5,"37":3,"41":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["ellipsis",{"1":{"48":2}}],["eldadfux",{"1":{"37":1}}],["eldad",{"1":{"37":1}}],["elad2412",{"1":{"37":1}}],["elad",{"1":{"37":1}}],["elevated",{"1":{"32":1}}],["elevation",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":5,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["element",{"1":{"8":1,"10":2,"14":3,"20":2,"22":1,"27":1,"28":1,"29":1,"44":1,"45":3,"50":1}}],["elements",{"0":{"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":3,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":3,"29":4,"30":1,"31":1,"32":3,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":1,"49":2,"50":1}}],["even",{"1":{"37":1}}],["everything",{"1":{"37":1}}],["every",{"1":{"15":2,"17":1,"23":1,"25":1}}],["edge",{"1":{"33":2,"46":1}}],["edit",{"1":{"19":1,"27":2,"37":2}}],["etsy",{"1":{"33":2}}],["etc",{"1":{"5":1}}],["effect",{"1":{"32":1}}],["efficient",{"1":{"19":1}}],["e",{"1":{"27":1,"32":2}}],["eye",{"1":{"19":2,"22":1,"26":2}}],["eyebrow",{"1":{"6":3,"26":22,"35":15}}],["emphasis",{"1":{"18":1}}],["empty",{"1":{"1":8,"13":3,"16":2}}],["eight",{"1":{"12":1}}],["easier",{"1":{"31":1,"34":1}}],["easily",{"1":{"1":1,"19":1,"33":1}}],["easy",{"1":{"27":1,"37":1,"40":1}}],["each",{"1":{"4":1,"14":1,"15":1,"17":1,"23":1,"25":2,"27":1}}],["ensures",{"1":{"42":1,"48":1}}],["engineering",{"1":{"37":3}}],["engineer",{"1":{"37":8}}],["env",{"1":{"19":3}}],["entered",{"1":{"19":3}}],["enter",{"1":{"19":1}}],["enabling",{"1":{"17":1}}],["end",{"1":{"4":12,"6":15,"8":3,"10":2,"11":6,"12":2,"19":2,"42":15,"44":9,"45":5}}],["enough",{"1":{"0":1,"10":1}}],["exercitationem",{"1":{"26":3}}],["experience",{"1":{"37":3}}],["expanded",{"1":{"30":1}}],["express",{"1":{"15":1}}],["explain",{"1":{"0":1}}],["extra",{"1":{"13":4,"29":1}}],["external",{"1":{"2":1,"5":1,"15":1}}],["exceeds",{"1":{"10":1,"26":2}}],["exclamation",{"1":{"8":1,"12":1,"19":3,"27":2}}],["example",{"1":{"1":1,"2":1,"16":1,"19":2,"30":1,"34":2,"45":1,"46":1}}],["errors",{"1":{"0":1}}],["error",{"1":{"0":1,"12":4,"19":6,"27":5,"30":2}}],["xsmall",{"1":{"12":3,"29":3}}],["xlarge",{"1":{"1":1}}],["x",{"1":{"0":10,"1":11,"8":3,"11":4,"12":2,"15":1,"19":2,"48":5,"50":2}}],["=210px",{"1":{"39":2}}],["=24px",{"1":{"39":1}}],["=",{"1":{"0":165,"1":55,"2":25,"3":87,"4":100,"5":17,"6":67,"7":1,"8":55,"9":20,"10":27,"11":131,"12":90,"13":16,"14":6,"15":67,"16":2,"17":12,"18":1,"19":148,"20":3,"21":38,"22":26,"23":19,"24":18,"25":17,"26":512,"27":33,"28":19,"29":8,"31":2,"32":6,"34":2,"35":15,"36":4,"37":10,"38":2,"39":8,"40":41,"41":47,"42":1,"43":8,"44":4,"45":3,"46":6,"47":5,"48":4,"50":3}}],["280",{"1":{"44":2}}],["25",{"1":{"48":2}}],["250",{"1":{"44":4,"46":2}}],["25rem",{"1":{"34":3,"42":5,"44":6}}],["2eem",{"1":{"44":1}}],["230",{"1":{"26":2}}],["24",{"1":{"12":3,"42":6,"44":6}}],["24px",{"1":{"1":2,"45":2}}],["2002bishwajeet",{"1":{"37":1}}],["200",{"1":{"30":6,"44":4}}],["2022",{"1":{"26":36}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["20",{"1":{"6":2,"11":10,"19":3,"41":3,"42":2,"45":2,"50":1}}],["2rem",{"1":{"6":1,"42":4,"48":1}}],["2",{"1":{"0":30,"1":2,"4":21,"5":1,"12":3,"15":4,"19":5,"23":2,"34":2,"35":17,"37":1,"41":3,"42":3,"44":3,"48":2,"50":1}}],["224",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["17",{"1":{"44":1}}],["15",{"1":{"44":2,"45":2}}],["150",{"1":{"30":1}}],["1fr",{"1":{"44":2}}],["13",{"1":{"39":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"22":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"22":3}}],["14",{"1":{"48":1}}],["14px",{"1":{"35":1}}],["140",{"1":{"26":2}}],["1rem",{"1":{"34":4,"39":1,"42":4,"44":3}}],["184",{"1":{"44":2}}],["185",{"1":{"26":10}}],["18rem",{"1":{"6":1}}],["125rem",{"1":{"39":2,"42":1}}],["12",{"1":{"26":6,"37":2,"42":6,"44":7,"48":1}}],["120",{"1":{"26":2,"30":5}}],["12rem",{"1":{"4":4}}],["1198",{"1":{"34":2}}],["1198px",{"1":{"34":1}}],["1199px",{"1":{"34":3,"44":1}}],["11",{"1":{"26":18,"44":1}}],["10",{"1":{"30":5,"37":1,"45":2}}],["10mb",{"1":{"12":9}}],["100lvh",{"1":{"44":1}}],["100vh",{"1":{"44":1}}],["100",{"1":{"2":1,"11":9,"26":2,"30":15,"31":2,"37":2,"42":2,"44":14}}],["16px",{"1":{"29":1,"35":1}}],["16rem",{"1":{"6":1,"39":1}}],["16",{"1":{"2":1,"6":3,"8":3,"11":6,"12":5,"14":4,"26":1,"42":8,"44":6}}],["1",{"1":{"0":40,"4":21,"6":19,"12":2,"15":3,"19":7,"22":1,"23":2,"26":24,"34":3,"35":17,"39":1,"41":3,"42":4,"44":10,"45":2,"48":9}}],["h3",{"1":{"35":2}}],["h1",{"1":{"35":2}}],["hsl",{"1":{"30":3,"31":4,"43":8,"44":6}}],["hustle",{"1":{"26":18}}],["human",{"1":{"0":1}}],["h5",{"1":{"12":6,"35":4}}],["h2",{"1":{"6":6,"35":2}}],["href",{"1":{"5":2,"10":4,"21":1,"26":3,"27":1,"36":2,"40":6,"41":3}}],["heycarla",{"1":{"37":1}}],["heroicons",{"1":{"33":3}}],["here",{"1":{"12":12,"19":1,"34":1}}],["height",{"1":{"22":1,"26":12,"44":6,"48":9}}],["head",{"1":{"26":2,"36":1}}],["headings",{"1":{"35":5}}],["heading",{"1":{"6":6,"8":3,"12":3,"26":22,"35":41}}],["headers",{"1":{"3":16,"35":1}}],["header",{"1":{"2":3,"6":18,"8":11,"11":8,"37":1}}],["hello",{"1":{"2":6,"11":18}}],["helps",{"1":{"30":1}}],["helper",{"1":{"12":1,"19":12}}],["help",{"1":{"0":1,"4":1,"27":1,"41":1,"43":1}}],["hierarchy",{"1":{"32":1,"35":1}}],["hiding",{"1":{"22":1}}],["hides",{"1":{"47":1,"49":1}}],["hide",{"1":{"3":16,"10":1,"19":2,"26":10,"31":1,"41":1,"50":4}}],["hidden",{"1":{"0":20,"2":2,"3":6,"5":2,"6":9,"8":4,"10":3,"11":8,"12":11,"13":1,"15":9,"19":13,"21":6,"22":7,"26":31,"27":8,"28":3,"40":6,"41":2,"46":1,"48":3,"50":2}}],["high",{"1":{"1":1}}],["https",{"1":{"1":1,"5":1,"26":6,"36":2}}],["html5",{"1":{"33":2}}],["html",{"1":{"0":10,"1":4,"2":2,"3":2,"4":2,"5":1,"6":2,"7":1,"8":2,"9":2,"10":1,"11":2,"12":3,"13":1,"14":2,"15":4,"16":1,"17":3,"18":1,"19":10,"20":1,"21":3,"22":2,"23":3,"24":1,"25":3,"26":5,"27":2,"28":1,"29":4,"32":1,"35":5,"36":1,"38":1,"39":1,"40":1,"41":1,"43":1,"44":1,"46":1,"47":1,"48":1}}],["hardiksachan",{"1":{"37":1}}],["hardik",{"1":{"37":1}}],["hausleiter",{"1":{"37":1}}],["hand",{"1":{"16":1}}],["happen",{"1":{"3":9}}],["have",{"1":{"1":3,"4":1,"15":2,"17":1,"23":1,"25":1,"26":1,"27":1,"37":1}}],["has",{"1":{"0":1,"15":1,"17":1,"23":1,"25":1,"27":2,"31":1}}],["hold",{"1":{"38":1}}],["hover",{"1":{"12":2,"22":1,"28":1}}],["horizontally",{"1":{"26":1}}],["horizontal",{"1":{"10":1,"26":8}}],["how",{"1":{"0":1,"19":1,"31":1,"44":1}}],["home",{"0":{"37":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["h6",{"1":{"0":10,"35":6}}],["h4",{"1":{"0":10,"8":6,"11":4,"35":4}}],["nguyen",{"1":{"37":1}}],["nik",{"1":{"37":1}}],["npm",{"1":{"36":3,"37":1}}],["numquam",{"1":{"26":3}}],["numeric",{"1":{"21":15,"46":2}}],["number",{"1":{"2":6,"21":1,"39":1,"46":4}}],["nowrap",{"1":{"48":3}}],["none",{"1":{"46":1,"47":5,"49":2,"50":1}}],["node",{"1":{"33":2,"36":1}}],["normal",{"1":{"12":3,"48":2}}],["no",{"1":{"4":3,"5":3,"10":1,"12":3,"34":1}}],["notion",{"1":{"33":2}}],["notify",{"1":{"0":1}}],["not",{"1":{"1":2,"4":1,"5":5,"10":1,"12":3,"17":1,"23":1,"25":1,"27":2,"29":1,"32":2,"33":2,"34":1,"35":3,"47":4,"49":1}}],["nav",{"1":{"40":4,"41":2}}],["navigate",{"1":{"31":1,"33":2}}],["navigation",{"0":{"40":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":5,"41":2,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["names",{"1":{"18":1,"33":1}}],["name",{"1":{"11":6,"12":6,"13":4,"19":2,"23":7,"26":23,"33":2,"37":3,"42":1}}],["native",{"1":{"8":1,"26":1}}],["narrow",{"1":{"2":1}}],["neutral",{"1":{"30":14,"31":8}}],["neutrals",{"1":{"30":2}}],["needed",{"1":{"37":1}}],["need",{"1":{"16":1,"41":1}}],["needs",{"1":{"0":1,"7":1,"29":2}}],["next",{"1":{"15":1,"17":1,"22":1,"23":1,"25":1,"41":5}}],["negative",{"1":{"15":1,"42":1}}],["newman",{"1":{"37":1}}],["new",{"1":{"5":1,"15":8,"26":1,"37":1}}],["necessary",{"1":{"0":2,"19":1,"27":2}}],["wordpress",{"1":{"33":2}}],["word",{"1":{"15":2,"22":2,"26":6,"48":3}}],["wrapped",{"1":{"26":1}}],["wrapper",{"1":{"3":8,"4":9,"6":1,"14":2,"19":5,"26":3,"39":1}}],["wrap",{"1":{"6":3,"44":3}}],["watson",{"1":{"37":4}}],["want",{"1":{"26":1,"34":1}}],["waiting",{"1":{"24":5}}],["way",{"1":{"19":1}}],["was",{"1":{"5":1}}],["warn",{"1":{"0":2,"27":2}}],["warning",{"1":{"0":4,"11":1,"19":11,"24":1,"27":6,"30":8,"43":3}}],["white",{"1":{"48":5}}],["while",{"1":{"29":1,"41":1}}],["which",{"1":{"15":1,"45":1}}],["who",{"1":{"27":2,"37":1}}],["why",{"1":{"15":1}}],["whatsapp",{"1":{"33":2}}],["what",{"1":{"3":9,"15":1,"19":2,"41":1}}],["whenever",{"1":{"17":1,"23":1,"25":1}}],["when",{"1":{"1":1,"10":1,"15":1,"19":2,"23":1,"26":1,"27":2,"29":1,"35":1,"37":1,"46":1}}],["where",{"1":{"0":2,"4":1,"15":1}}],["wilson",{"1":{"37":1}}],["will",{"1":{"3":9,"5":1,"14":1,"15":2,"19":3,"22":1,"28":1,"29":1,"35":1,"36":1,"39":1,"45":1}}],["wizard",{"1":{"26":1}}],["window",{"1":{"5":1,"8":1}}],["width",{"1":{"2":1,"3":2,"4":1,"10":1,"11":2,"12":14,"19":19,"26":29,"34":11,"44":13,"46":2}}],["without",{"1":{"14":1,"26":2,"46":2}}],["with",{"1":{"1":1,"3":1,"5":1,"8":2,"12":1,"15":6,"17":1,"19":5,"21":2,"22":1,"26":3,"31":1,"32":1,"34":1,"35":2,"36":1,"37":7,"39":1,"45":2,"46":2}}],["within",{"1":{"0":1,"6":1,"9":1,"10":1,"18":1,"27":2,"41":1}}],["weight",{"1":{"48":3}}],["weights",{"1":{"35":1}}],["wess",{"1":{"37":2}}],["webkit",{"1":{"46":1,"48":3}}],["web",{"1":{"37":1}}],["website",{"1":{"33":1,"40":1}}],["well",{"1":{"35":1}}],["were",{"1":{"33":1}}],["we",{"1":{"0":2,"4":2,"8":1,"15":3,"16":1,"17":1,"21":1,"26":1,"27":3,"29":1,"30":2,"31":1,"32":2,"33":2,"34":3,"35":2,"37":1,"43":1,"44":1}}],["oberai",{"1":{"37":1}}],["objects",{"1":{"16":1}}],["object",{"1":{"1":1,"8":1,"32":1,"37":1}}],["okta",{"1":{"33":2}}],["ol",{"1":{"21":2,"41":2}}],["our",{"1":{"16":1,"27":1,"30":3,"37":3,"42":1,"48":1}}],["outer",{"1":{"26":3}}],["out",{"1":{"15":1,"16":1,"37":2}}],["outputs",{"1":{"22":1}}],["output",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":15,"23":2,"24":1,"25":1,"26":7,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["own",{"1":{"15":1,"17":1,"23":1,"25":1,"37":2}}],["occured",{"1":{"27":1}}],["occur",{"1":{"15":1}}],["others",{"1":{"37":1}}],["other",{"1":{"14":1,"16":1,"19":1}}],["otherwise",{"1":{"10":1}}],["over",{"1":{"28":1}}],["overflow",{"1":{"26":5,"48":5,"50":10}}],["overviews",{"1":{"16":1}}],["overview",{"1":{"10":3,"37":1}}],["overlap",{"1":{"34":1}}],["overlay",{"1":{"8":1}}],["overly",{"1":{"0":1}}],["optimized",{"1":{"37":1}}],["option",{"1":{"3":12,"4":1,"19":36}}],["options",{"1":{"3":15,"17":1,"19":3,"23":1,"25":2,"26":13}}],["optionally",{"1":{"36":2}}],["optional",{"1":{"3":26,"19":4}}],["opera",{"1":{"33":2,"46":1}}],["opening",{"1":{"26":1}}],["open",{"1":{"3":1,"5":1,"8":6,"11":3,"20":3,"34":2,"36":1,"37":6}}],["opacity",{"1":{"6":2,"30":1,"50":7}}],["one",{"1":{"1":1,"3":3,"4":1,"17":2,"19":2,"23":3,"29":1,"34":1,"37":3,"46":2}}],["on",{"1":{"0":1,"8":1,"10":1,"14":1,"15":2,"17":1,"18":1,"19":1,"22":1,"23":1,"25":5,"27":2,"29":3,"31":1,"37":4,"39":2,"41":1,"43":1,"47":16,"49":1}}],["only",{"1":{"0":10,"4":1,"8":3,"10":1,"12":14,"15":4,"16":1,"19":2,"23":2,"26":42,"27":2,"29":1,"34":7,"37":1,"41":1,"47":6,"49":4}}],["offline",{"1":{"43":3}}],["off",{"1":{"25":4,"26":1}}],["often",{"1":{"15":1,"30":4}}],["of",{"1":{"0":6,"1":3,"2":3,"3":26,"4":4,"5":2,"8":4,"9":2,"10":3,"11":3,"12":1,"13":1,"15":6,"16":1,"17":5,"18":3,"19":5,"21":2,"23":6,"24":1,"25":5,"26":4,"27":5,"28":1,"29":5,"30":1,"32":2,"33":8,"34":3,"35":5,"36":2,"37":7,"38":1,"39":5,"41":1,"45":2,"47":1}}],["orient",{"1":{"48":1}}],["orientation",{"1":{"35":1}}],["order",{"1":{"31":1,"35":1}}],["organize",{"1":{"26":1,"27":1,"35":1}}],["orange",{"1":{"1":7,"8":1,"27":1,"30":2}}],["or",{"1":{"0":5,"1":5,"3":16,"6":6,"8":3,"9":1,"13":1,"15":1,"16":1,"17":2,"18":4,"19":6,"22":1,"25":3,"26":2,"27":8,"28":11,"29":3,"31":1,"32":3,"33":1,"35":4,"37":2,"40":1,"46":1,"47":1,"49":2}}],["m",{"1":{"47":15}}],["might",{"1":{"34":1}}],["microsoft",{"1":{"33":4}}],["mix",{"1":{"27":2}}],["middle",{"1":{"14":7}}],["min",{"1":{"2":1,"4":4,"12":11,"34":6,"37":3,"39":1,"44":17}}],["mind",{"1":{"1":1,"15":1,"29":1,"37":1,"41":1}}],["minimum",{"1":{"0":1,"17":1,"23":1,"25":1,"33":2}}],["mp4",{"1":{"11":18}}],["mdn",{"1":{"8":1}}],["multi",{"1":{"19":1,"24":1}}],["multiple",{"1":{"6":2,"9":1,"10":1,"14":2,"17":2,"23":1,"25":1,"33":2,"34":1,"41":1}}],["must",{"1":{"8":1}}],["matej",{"1":{"37":1}}],["matched",{"1":{"35":1}}],["match",{"1":{"27":2,"35":1}}],["mar",{"1":{"26":18}}],["margins",{"1":{"42":1}}],["margin",{"1":{"2":1,"3":6,"4":6,"6":4,"11":9,"12":10,"15":1,"19":2,"20":1,"21":2,"22":1,"26":2,"28":1,"32":2,"38":1,"42":61,"45":1,"46":1}}],["make",{"1":{"15":1,"17":1,"23":2,"25":1,"29":1,"32":1,"33":2,"41":1}}],["maximum",{"1":{"26":1,"39":1}}],["max",{"1":{"12":9,"19":10,"34":5,"39":1,"44":15,"46":2}}],["maintenance",{"1":{"31":1,"34":1}}],["maintain",{"1":{"26":1,"30":1}}],["maintains",{"1":{"10":1}}],["main",{"1":{"4":2,"8":3,"12":3,"35":1,"40":1,"44":4}}],["may",{"1":{"0":1,"27":5}}],["mouse",{"1":{"46":1}}],["moz",{"1":{"46":1}}],["most",{"1":{"10":1,"15":1,"22":1,"37":1}}],["mostly",{"1":{"8":1,"10":1,"15":1,"26":1,"30":1,"35":2}}],["mobile",{"1":{"10":1,"12":6,"26":7,"44":1,"47":10}}],["more",{"1":{"1":2,"8":1,"10":1,"17":3,"19":2,"26":9,"34":1}}],["modules",{"1":{"36":1}}],["mode",{"1":{"1":1,"30":2,"37":1}}],["model",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":4,"43":2,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["modals",{"1":{"8":7,"19":1,"29":1,"30":1,"32":2}}],["modal",{"0":{"8":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":2,"8":53,"9":2,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["me",{"1":{"50":2}}],["meldiron",{"1":{"37":1}}],["media",{"1":{"34":15,"44":4,"47":5}}],["medium",{"1":{"1":3,"8":2,"15":6,"17":2,"23":2,"25":2,"29":5,"33":2,"34":11,"39":1}}],["methods",{"1":{"8":1,"37":2}}],["method",{"1":{"8":3}}],["meaning",{"1":{"4":1,"15":2,"43":1}}],["meanings",{"1":{"1":1}}],["menus",{"1":{"40":1}}],["menu",{"1":{"4":1,"29":1,"40":18}}],["messaging",{"1":{"0":1}}],["message",{"1":{"0":5,"12":3,"19":1}}],["messages",{"1":{"0":17}}],["utility",{"1":{"31":2,"43":1,"46":1}}],["utilities",{"0":{"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["ul",{"1":{"1":8,"3":6,"4":14,"6":8,"9":4,"10":2,"11":4,"12":4,"15":2,"19":16,"21":4,"39":2,"40":2}}],["unpkg",{"1":{"36":2}}],["underlined",{"1":{"35":1}}],["underlines",{"1":{"35":1}}],["underline",{"1":{"35":11}}],["underlying",{"1":{"29":1}}],["underneath",{"1":{"19":1}}],["understanding",{"1":{"27":1}}],["understand",{"1":{"0":1,"4":1}}],["un",{"1":{"13":3,"44":1,"48":1}}],["uncluttered",{"1":{"10":1}}],["unsafe",{"1":{"6":3}}],["unsecure",{"1":{"6":3}}],["unsplash",{"1":{"1":1,"5":1,"26":6}}],["units",{"1":{"42":1}}],["unity",{"1":{"33":2}}],["unique",{"1":{"4":1}}],["universal",{"1":{"1":1,"4":1,"15":2}}],["upon",{"1":{"28":1}}],["update",{"1":{"16":1}}],["uppercase",{"1":{"1":1,"15":2}}],["up",{"1":{"1":2,"2":1,"17":1,"19":1,"41":1}}],["uploading",{"1":{"11":4}}],["uploads",{"1":{"11":6}}],["uploaded",{"1":{"5":3,"11":2}}],["upload",{"0":{"11":1,"12":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":3,"11":57,"12":59,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":4,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["usage",{"1":{"30":1,"37":1}}],["us",{"1":{"30":1,"37":4}}],["using",{"1":{"1":1,"4":1,"6":1,"14":1,"15":3,"22":1,"29":1,"32":1,"33":1,"39":1,"41":1,"44":1,"45":2}}],["useful",{"1":{"26":1}}],["used",{"1":{"0":1,"1":2,"2":2,"3":16,"6":1,"8":1,"9":1,"10":1,"15":5,"16":2,"18":1,"19":8,"25":2,"26":3,"27":3,"29":3,"30":8,"31":2,"32":3,"35":6,"38":1,"46":1}}],["use",{"1":{"0":8,"1":5,"4":4,"5":2,"7":1,"8":2,"10":1,"15":6,"16":2,"17":4,"19":1,"21":3,"23":4,"25":4,"26":2,"27":11,"29":3,"30":2,"31":1,"32":3,"33":5,"34":4,"35":4,"37":1,"41":1,"43":1,"44":1,"46":1}}],["users",{"1":{"4":1,"7":1,"9":1,"10":2,"12":1,"17":3,"19":2,"22":1,"23":2,"27":1,"34":1,"35":2,"41":1}}],["user",{"0":{"13":1},"1":{"0":40,"1":3,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":2,"9":1,"10":3,"11":1,"12":2,"13":23,"14":1,"15":2,"16":1,"17":1,"18":1,"19":7,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":2,"27":8,"28":8,"29":2,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":4,"38":1,"39":1,"40":2,"41":2,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["u",{"1":{"0":10,"2":4,"3":9,"4":8,"6":21,"8":12,"10":1,"11":12,"12":60,"13":4,"14":12,"15":1,"19":29,"20":1,"21":2,"22":13,"26":60,"28":1,"32":2,"35":2,"37":6,"38":1,"41":1,"42":33,"43":16,"44":60,"45":13,"46":4,"48":21,"49":4,"50":10}}],["ui",{"1":{"0":1,"10":1,"29":3}}],["absolute",{"1":{"45":2}}],["abnegate",{"1":{"37":1}}],["above",{"1":{"29":1,"39":1}}],["about",{"1":{"0":18,"13":1,"19":2,"27":1,"28":1}}],["aggressive",{"1":{"37":1}}],["affordance",{"1":{"35":1}}],["affect",{"1":{"34":7}}],["after",{"1":{"33":1,"36":1}}],["auth",{"1":{"37":1}}],["authentik",{"1":{"33":2}}],["auth0",{"1":{"33":2}}],["autodesk",{"1":{"33":2}}],["auto",{"1":{"2":1,"6":1,"12":2,"15":1,"42":4,"44":4,"45":4,"50":5}}],["axis",{"1":{"32":1}}],["airport",{"1":{"26":12}}],["aid",{"1":{"4":1,"15":1}}],["amazon",{"1":{"33":2}}],["amp",{"1":{"11":15,"31":1,"34":4,"47":10}}],["amount",{"1":{"10":1,"11":2,"19":2,"41":1}}],["available",{"1":{"5":4,"10":1,"24":1,"30":1,"33":2}}],["avatars",{"1":{"1":30,"8":1,"16":1,"29":1,"30":1}}],["avatar",{"0":{"1":1},"1":{"0":2,"1":43,"2":2,"3":1,"4":1,"5":3,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":2,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":7,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["avoid",{"1":{"4":1,"15":1}}],["advocate",{"1":{"37":1}}],["advanced",{"1":{"3":9}}],["adityaoberai",{"1":{"37":1}}],["aditya",{"1":{"37":2}}],["adam",{"1":{"26":18}}],["add",{"1":{"15":8,"17":1,"19":1,"23":1,"25":1,"36":2}}],["added",{"1":{"12":1,"36":1}}],["adding",{"1":{"10":2,"34":1}}],["additional",{"1":{"0":2,"19":1,"27":1,"28":1,"30":1,"33":1,"35":2}}],["assist",{"1":{"35":1}}],["as",{"1":{"3":16,"5":2,"15":2,"19":3,"26":1,"27":2,"29":4,"30":3,"31":1,"32":2,"33":1,"34":1,"35":1,"36":3,"39":1}}],["apart",{"1":{"1":1}}],["apple",{"1":{"33":2}}],["applied",{"1":{"19":2,"22":1}}],["application",{"1":{"0":1,"40":1}}],["apply",{"1":{"14":1}}],["appearance",{"1":{"46":2}}],["appear",{"1":{"5":1,"8":1,"14":1,"19":1,"22":1,"28":1}}],["appwrite",{"1":{"0":3,"1":2,"2":1,"3":2,"4":2,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":2,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":4,"27":5,"28":1,"29":3,"30":3,"31":1,"32":2,"33":2,"34":2,"35":1,"36":7,"37":28,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["aa",{"1":{"1":75,"30":1}}],["any",{"1":{"38":1}}],["announcing",{"1":{"37":1}}],["angular",{"1":{"33":2}}],["another",{"1":{"15":1}}],["an",{"1":{"1":4,"4":1,"5":3,"8":1,"10":1,"11":1,"12":1,"15":2,"17":1,"18":1,"19":9,"21":1,"22":1,"24":1,"25":1,"27":3,"32":1,"33":2,"36":1,"39":2,"44":1,"45":1,"50":1}}],["android",{"1":{"33":2}}],["and",{"1":{"0":4,"1":4,"4":1,"5":1,"7":1,"8":2,"10":1,"12":10,"14":1,"15":6,"16":3,"17":2,"18":1,"19":2,"22":1,"23":2,"25":2,"26":3,"27":7,"28":1,"29":5,"30":5,"32":4,"33":8,"34":7,"35":4,"36":1,"37":9,"38":2,"39":2,"42":1,"44":1,"46":1,"48":1,"50":1}}],["along",{"1":{"32":1}}],["align",{"1":{"28":1,"44":6,"48":3}}],["aligned",{"1":{"17":2,"23":2,"25":2,"33":2}}],["alignments",{"1":{"4":1,"44":2}}],["alignment",{"1":{"4":1,"44":1}}],["always",{"1":{"10":1,"37":1}}],["alt",{"1":{"1":1,"5":1,"26":6,"37":1}}],["allowed",{"1":{"17":1,"23":1,"25":1}}],["allows",{"1":{"9":1,"10":1,"12":1,"19":1,"34":1,"41":1}}],["allow",{"1":{"3":16,"4":1,"17":3,"22":1,"23":3,"25":3,"26":1,"27":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":4,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":1,"32":1,"33":3,"34":4,"35":1,"36":1,"37":2,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":4,"49":1,"50":1}}],["alerts",{"1":{"0":8,"29":1,"30":4,"32":2}}],["alert",{"0":{"0":1},"1":{"0":123,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["achintya",{"1":{"37":2}}],["according",{"1":{"29":1}}],["access",{"1":{"34":1,"40":1}}],["accessibile",{"1":{"37":1}}],["accessibility",{"1":{"30":1,"37":1}}],["accessible",{"1":{"19":1}}],["accepted",{"1":{"12":9}}],["active",{"1":{"10":1}}],["activity",{"1":{"10":3}}],["actions",{"1":{"0":15,"8":1,"22":1,"30":1}}],["action",{"1":{"0":63,"4":3,"15":6,"27":2,"33":1}}],["across",{"1":{"0":1,"30":1,"34":1,"42":1,"48":1}}],["attach",{"1":{"45":1}}],["attachment",{"1":{"5":1}}],["attribute",{"1":{"17":1,"19":1,"23":1,"25":1}}],["attention",{"1":{"8":1,"15":1}}],["at",{"1":{"0":1,"17":1,"19":3,"23":1,"25":1,"33":2,"37":17}}],["armannik",{"1":{"37":1}}],["arman",{"1":{"37":1}}],["articles",{"1":{"19":1,"37":2}}],["article",{"1":{"16":4}}],["arrows",{"1":{"46":1}}],["arrow",{"1":{"2":1,"4":10,"10":4,"21":3}}],["aria",{"1":{"0":30,"2":2,"3":6,"5":4,"6":15,"8":7,"10":4,"11":39,"12":16,"13":2,"15":18,"19":19,"21":6,"22":8,"26":51,"27":8,"28":4,"40":6,"41":12}}],["areas",{"1":{"14":1,"40":1}}],["are",{"1":{"0":1,"1":4,"2":1,"3":16,"5":1,"6":1,"8":2,"15":3,"16":2,"17":2,"19":2,"22":1,"23":2,"24":1,"25":4,"26":2,"27":3,"29":2,"30":2,"33":6,"35":3,"46":1,"50":1}}],["a",{"1":{"0":23,"1":8,"2":5,"3":27,"4":4,"5":9,"6":4,"7":2,"8":4,"9":2,"10":11,"11":2,"12":24,"13":4,"14":4,"15":11,"16":5,"17":7,"18":4,"19":16,"20":2,"21":7,"22":1,"23":9,"24":5,"25":8,"26":13,"27":7,"28":2,"29":2,"30":2,"31":2,"32":3,"33":6,"34":2,"35":7,"36":1,"37":1,"38":3,"39":4,"40":15,"41":6,"46":1}}],["lopes",{"1":{"37":1}}],["lohanidamodar",{"1":{"37":1}}],["lohani",{"1":{"37":1}}],["looking",{"1":{"33":1}}],["look",{"1":{"29":1,"32":1}}],["lorem",{"1":{"26":3}}],["long",{"1":{"15":1}}],["lot",{"1":{"15":1}}],["local",{"1":{"45":1}}],["location",{"1":{"12":1}}],["lock",{"1":{"6":3}}],["load",{"1":{"10":1}}],["loaders",{"1":{"7":1}}],["loader",{"0":{"7":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":7,"8":2,"9":1,"10":1,"11":4,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["logs",{"1":{"2":1}}],["lowercase",{"1":{"1":1}}],["lead",{"1":{"37":3}}],["learn",{"1":{"31":1}}],["legibility",{"1":{"17":1,"23":1,"25":1,"33":1}}],["letter",{"1":{"15":1}}],["letters",{"1":{"1":3}}],["level",{"1":{"6":3,"8":3,"12":3,"30":1,"35":55}}],["left",{"1":{"6":2,"10":3,"15":2,"41":1,"45":1}}],["less",{"1":{"1":1,"33":1}}],["library",{"1":{"33":1,"34":1,"36":4}}],["light",{"1":{"30":1,"31":1,"37":1,"49":3}}],["like",{"1":{"18":1,"26":1}}],["linux",{"1":{"33":2}}],["lines",{"1":{"2":1,"17":1,"19":1,"23":1,"25":1,"33":2}}],["line",{"1":{"2":6,"3":2,"11":2,"17":2,"19":10,"22":1,"23":2,"25":2,"26":6,"33":3,"44":1,"48":10}}],["linked",{"1":{"35":1}}],["linkedin",{"1":{"33":2}}],["links",{"1":{"26":2,"35":3}}],["link",{"1":{"2":1,"5":1,"15":1,"21":5,"35":5,"36":2}}],["li",{"1":{"1":32,"3":18,"4":28,"6":16,"9":12,"10":8,"11":12,"12":4,"15":8,"19":22,"21":18,"39":12,"40":10,"41":16}}],["lists",{"1":{"4":2,"16":2,"35":1}}],["list",{"0":{"4":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":20,"4":32,"5":3,"6":2,"7":2,"8":2,"9":2,"10":5,"11":6,"12":6,"13":2,"14":2,"15":8,"16":2,"17":3,"18":2,"19":14,"20":3,"21":54,"22":3,"23":4,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":8,"41":3,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["layers",{"1":{"37":1}}],["layered",{"1":{"32":1}}],["layout",{"0":{"38":1,"39":1,"40":1,"41":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":3,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":3,"40":2,"41":2,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["landing",{"1":{"15":1}}],["language",{"1":{"0":1,"31":2,"34":2}}],["larger",{"1":{"34":4}}],["large",{"1":{"1":11,"9":3,"15":5,"17":4,"23":4,"25":4,"29":3,"32":8,"34":5,"39":1,"41":1}}],["labels",{"1":{"15":1,"17":1,"23":1,"25":1,"33":1,"35":1}}],["label",{"1":{"0":10,"3":7,"5":2,"6":6,"8":12,"10":2,"11":22,"12":5,"13":1,"15":9,"17":2,"19":72,"22":4,"23":2,"25":2,"26":22,"27":1,"28":1,"33":3,"41":10}}],["lt",{"1":{"0":260,"1":105,"2":46,"3":156,"4":180,"5":21,"6":118,"7":2,"8":87,"9":40,"10":36,"11":144,"12":128,"13":28,"14":12,"15":96,"16":4,"17":7,"18":2,"19":200,"20":6,"21":62,"22":36,"23":7,"24":36,"25":7,"26":628,"27":48,"28":24,"29":8,"30":2,"31":6,"32":8,"34":12,"35":34,"36":4,"37":16,"38":4,"39":26,"40":58,"41":64,"42":2,"43":16,"44":8,"45":4,"46":3,"47":10,"48":10,"50":6}}],["frontend",{"1":{"37":2}}],["from",{"1":{"1":1,"4":1,"17":3,"19":1,"23":3}}],["framework",{"1":{"37":1}}],["friendly",{"1":{"37":1}}],["f02e65",{"1":{"37":2}}],["fallbacks",{"1":{"48":2}}],["facebook",{"1":{"33":2}}],["failed",{"1":{"11":3,"24":6,"27":1}}],["features",{"1":{"28":1,"37":1}}],["few",{"1":{"19":1,"24":1}}],["feedback",{"1":{"0":15,"19":2}}],["flutter",{"1":{"33":2}}],["flat",{"1":{"32":1}}],["floating",{"1":{"32":4}}],["float",{"1":{"28":1,"29":1}}],["floyd",{"1":{"12":6}}],["flexbox",{"1":{"44":1}}],["flex",{"1":{"0":10,"2":1,"4":4,"6":9,"8":3,"12":10,"13":1,"14":4,"22":3,"26":14,"37":2,"44":21}}],["fux",{"1":{"37":1}}],["fun",{"1":{"37":1}}],["functions",{"1":{"37":1,"42":1}}],["functionality",{"1":{"19":1}}],["function",{"1":{"2":6,"19":3}}],["fully",{"1":{"37":2}}],["full",{"1":{"3":2,"4":1,"11":2,"12":3,"19":10,"37":1,"44":2,"48":2}}],["fogelito",{"1":{"37":1}}],["fogel",{"1":{"37":1}}],["font",{"1":{"35":3,"48":10}}],["fonts",{"1":{"35":1}}],["follow",{"1":{"36":1}}],["follows",{"1":{"30":1}}],["following",{"1":{"17":1,"22":1,"23":1,"25":1,"33":1,"36":2}}],["focus",{"1":{"28":1,"46":1}}],["focused",{"1":{"2":1}}],["footer",{"1":{"8":5}}],["founder",{"1":{"37":1}}],["foundations",{"0":{"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["four",{"1":{"1":1,"4":1,"6":1,"10":1,"15":1}}],["for",{"1":{"0":15,"1":2,"2":1,"4":1,"8":2,"9":1,"10":1,"11":6,"15":2,"16":3,"17":1,"19":4,"23":1,"24":1,"25":2,"26":1,"27":7,"29":1,"30":7,"31":1,"32":1,"33":1,"34":2,"35":8,"36":1,"37":6,"45":1}}],["forms",{"1":{"19":1}}],["form",{"1":{"0":1,"3":5,"8":11,"19":38,"37":1}}],["find",{"1":{"41":2}}],["finished",{"1":{"11":2}}],["filled",{"1":{"39":1}}],["filename",{"1":{"26":6}}],["file1",{"1":{"11":6}}],["files",{"1":{"11":1,"12":9,"33":1,"36":1}}],["file",{"0":{"5":1,"12":1},"1":{"0":2,"1":3,"2":2,"3":2,"4":3,"5":18,"6":3,"7":2,"8":2,"9":2,"10":2,"11":16,"12":70,"13":3,"14":2,"15":2,"16":4,"17":2,"18":3,"19":9,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":3,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["fit",{"1":{"35":1,"39":1,"41":1}}],["firefox",{"1":{"33":2,"46":1}}],["first",{"1":{"15":1,"16":1,"17":1,"23":1,"25":1,"26":19,"33":2}}],["firstname",{"1":{"2":6}}],["figma",{"1":{"33":2}}],["fix",{"1":{"0":1,"19":1}}],["five",{"1":{"0":1,"1":2,"3":1,"8":1,"26":1}}],["fields",{"1":{"15":2,"19":3,"29":1,"46":2}}],["field",{"0":{"19":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":12,"20":2,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1}}],["bishwajeet",{"1":{"37":1}}],["bitly",{"1":{"33":2}}],["bitbucket",{"1":{"33":2}}],["bigger",{"1":{"29":1}}],["big",{"1":{"8":3,"9":1,"15":2}}],["basis",{"1":{"44":6}}],["based",{"1":{"31":1,"43":1}}],["bačo",{"1":{"37":1}}],["barnby",{"1":{"37":1}}],["background",{"1":{"30":1,"31":2}}],["bg",{"1":{"31":6}}],["build",{"1":{"37":3}}],["building",{"1":{"36":2,"37":4}}],["built",{"1":{"31":1}}],["but",{"1":{"33":1,"42":1}}],["buttons",{"1":{"0":10,"8":1,"15":15,"16":2,"19":3,"20":3,"22":2,"23":5,"25":1,"29":2,"46":2}}],["button",{"0":{"15":1,"23":1},"1":{"0":102,"1":2,"2":8,"3":17,"4":86,"5":2,"6":4,"7":2,"8":50,"9":22,"10":16,"11":32,"12":27,"13":5,"14":3,"15":101,"16":3,"17":2,"18":2,"19":22,"20":2,"21":7,"22":17,"23":7,"24":3,"25":2,"26":84,"27":6,"28":8,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":26,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["br",{"1":{"46":1}}],["brandonroberts",{"1":{"37":1}}],["brandon",{"1":{"37":2}}],["brand",{"1":{"30":3}}],["browser",{"1":{"26":1,"37":1,"48":2}}],["breaks",{"1":{"48":1}}],["break3open",{"1":{"34":1}}],["break2open",{"1":{"34":1}}],["break2",{"1":{"34":1}}],["break1",{"1":{"34":1}}],["breakpoints",{"1":{"34":3}}],["break",{"1":{"22":2,"26":6,"41":1,"48":7}}],["blurs",{"1":{"32":1}}],["blue",{"1":{"1":7,"27":1,"30":2}}],["blog",{"1":{"19":1}}],["block",{"1":{"2":1,"3":6,"4":10,"6":3,"11":3,"12":1,"19":2,"20":1,"21":2,"22":1,"26":2,"28":1,"32":2,"38":1,"42":52,"44":18,"45":7,"48":2,"49":2}}],["by",{"1":{"0":1,"6":1,"10":1,"14":1,"15":3,"26":1,"32":1,"33":1,"34":1,"36":1,"44":1,"45":1,"50":1}}],["bell",{"1":{"40":1}}],["below",{"1":{"4":1,"19":1,"28":1,"30":1,"32":1,"33":1,"34":1,"36":1,"46":1,"50":1}}],["better",{"1":{"37":1}}],["between",{"1":{"9":2,"10":1,"17":1,"23":1,"25":2,"27":1,"32":4,"33":2,"34":1,"44":3,"46":1}}],["behance",{"1":{"33":2}}],["behavior",{"1":{"26":1}}],["beneath",{"1":{"32":1}}],["being",{"1":{"31":1,"42":1}}],["begin",{"1":{"21":2}}],["before",{"1":{"8":1}}],["best",{"1":{"0":1,"1":1,"4":1,"8":1,"10":1,"15":1,"16":1,"17":1,"23":1,"25":1,"27":2,"29":1,"32":1,"33":1,"35":1,"37":1,"41":1,"46":1}}],["been",{"1":{"0":1,"27":1,"37":1}}],["be",{"1":{"0":4,"1":3,"8":2,"10":3,"15":2,"16":1,"17":2,"18":2,"19":5,"22":2,"23":3,"25":3,"26":2,"27":4,"29":1,"30":1,"31":1,"32":1,"33":2,"35":3,"36":1,"39":1,"45":1}}],["bold",{"1":{"35":2,"48":5}}],["bottom",{"1":{"6":2,"14":3,"28":3,"40":1,"45":1}}],["both",{"1":{"0":1,"30":1}}],["body",{"1":{"0":1,"12":3,"26":1,"35":16,"49":1}}],["boxes",{"1":{"11":1,"12":1,"14":6}}],["box",{"0":{"11":1,"12":1,"14":1,"39":1,"42":1},"1":{"0":10,"1":5,"2":5,"3":5,"4":7,"5":5,"6":7,"7":5,"8":5,"9":5,"10":6,"11":46,"12":45,"13":6,"14":30,"15":6,"16":5,"17":5,"18":5,"19":5,"20":8,"21":5,"22":5,"23":5,"24":5,"25":5,"26":5,"27":5,"28":5,"29":5,"30":5,"31":5,"32":7,"33":7,"34":5,"35":6,"36":5,"37":5,"38":6,"39":11,"40":6,"41":6,"42":9,"43":6,"44":11,"45":5,"46":5,"47":5,"48":7,"49":5,"50":6}}],["borders",{"1":{"16":3,"42":1}}],["border",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":10,"13":2,"14":3,"15":1,"16":3,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":22,"30":3,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":13,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["pxtorem",{"1":{"42":27,"44":26,"45":2,"48":3}}],["phaus",{"1":{"37":1}}],["philipp",{"1":{"37":1}}],["php",{"1":{"33":2}}],["put",{"1":{"34":1}}],["purple",{"1":{"30":1}}],["purpose",{"1":{"0":2,"15":1,"17":1,"23":1,"25":1}}],["python",{"1":{"33":2}}],["placeholder",{"1":{"19":15,"46":2}}],["placed",{"1":{"15":1}}],["placement",{"1":{"4":2,"27":2}}],["plus",{"1":{"15":2,"26":1}}],["please",{"1":{"8":1,"20":3}}],["pngs",{"1":{"12":9}}],["png",{"1":{"5":1,"12":6,"26":6}}],["podio",{"1":{"33":2}}],["possible",{"1":{"25":1}}],["posts",{"1":{"19":1}}],["positions",{"1":{"6":2}}],["position",{"0":{"45":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":16,"46":2,"47":1,"48":1,"49":1,"50":1}}],["popup",{"1":{"12":3,"19":1,"28":4}}],["popovers",{"1":{"29":1,"32":2}}],["popover",{"1":{"4":1,"13":1}}],["pixels",{"1":{"42":1}}],["pie",{"1":{"40":1}}],["pinterest",{"1":{"33":2}}],["pink",{"1":{"1":3,"12":6,"15":1,"30":4,"31":2,"34":1,"36":10,"37":9,"43":3}}],["picture",{"1":{"1":1}}],["people",{"1":{"37":1}}],["pet",{"1":{"19":1}}],["pets",{"1":{"19":1}}],["pencil",{"1":{"1":1,"27":1}}],["pending",{"1":{"1":1,"11":3,"24":6}}],["perception",{"1":{"35":1}}],["perceived",{"1":{"35":1}}],["percent",{"1":{"2":1,"44":7}}],["perform",{"1":{"15":1}}],["performed",{"1":{"0":1}}],["person",{"1":{"1":1}}],["persist",{"1":{"0":1}}],["p",{"1":{"0":20,"3":22,"5":2,"11":6,"12":8,"19":12,"20":2,"21":4,"22":2,"26":23,"28":2,"31":8,"32":4,"34":12,"35":10,"38":2,"45":2,"47":10,"48":8,"50":4}}],["prioritize",{"1":{"37":1}}],["priority",{"1":{"32":1}}],["principal",{"1":{"15":1}}],["primary",{"1":{"15":7,"30":8,"37":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["practice",{"1":{"0":1,"1":1,"4":1,"8":1,"10":1,"15":1,"16":1,"17":1,"23":1,"25":1,"27":2,"29":1,"32":1,"33":1,"35":1,"41":1,"46":1}}],["properties",{"1":{"43":2,"47":1,"49":1,"50":1}}],["project",{"1":{"36":3}}],["projects",{"1":{"33":1}}],["product",{"1":{"35":1,"37":2}}],["products",{"1":{"30":1,"37":2,"42":1,"48":1}}],["processing",{"1":{"24":6,"27":1}}],["process",{"1":{"24":1}}],["progressbar",{"1":{"11":7}}],["progress",{"1":{"7":1,"11":15}}],["progressively",{"1":{"3":16}}],["problem",{"1":{"0":1,"44":1}}],["provides",{"1":{"19":2}}],["provide",{"1":{"0":19,"19":3,"27":2,"28":1,"35":3,"40":1}}],["profiles",{"1":{"13":1}}],["profile",{"0":{"13":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":2,"13":15,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["prev",{"1":{"41":5}}],["preview",{"0":{"5":1},"1":{"0":11,"1":6,"2":3,"3":3,"4":4,"5":17,"6":4,"7":2,"8":3,"9":3,"10":2,"11":3,"12":4,"13":2,"14":3,"15":5,"16":2,"17":4,"18":2,"19":11,"20":2,"21":4,"22":3,"23":4,"24":2,"25":4,"26":6,"27":3,"28":2,"29":5,"30":1,"31":1,"32":2,"33":1,"34":1,"35":5,"36":1,"37":1,"38":2,"39":2,"40":2,"41":2,"42":1,"43":2,"44":2,"45":1,"46":2,"47":2,"48":2,"49":1,"50":1}}],["preferred",{"1":{"37":2}}],["preserve",{"1":{"35":1}}],["presented",{"1":{"42":1}}],["present",{"1":{"0":1}}],["press",{"1":{"20":3}}],["pre",{"1":{"2":12}}],["package",{"1":{"36":2}}],["paypal",{"1":{"33":2}}],["paste",{"1":{"33":1}}],["passed",{"1":{"19":3}}],["passwords",{"1":{"19":1}}],["password",{"1":{"19":7}}],["palette",{"1":{"30":3}}],["pair",{"1":{"15":1}}],["pages",{"1":{"15":1,"41":3}}],["page",{"1":{"15":1,"35":1,"41":9}}],["pagination",{"0":{"41":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":19,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["parhi",{"1":{"37":1}}],["parnasa",{"1":{"37":1}}],["parent",{"1":{"32":1}}],["parameters",{"1":{"19":1,"39":2}}],["paragraphs",{"1":{"35":1}}],["paragraph",{"1":{"3":3}}],["part",{"1":{"15":1,"18":3,"29":1,"34":1}}],["partials",{"1":{"31":1}}],["partial",{"1":{"12":1,"31":16,"34":13}}],["paddings",{"1":{"42":1}}],["padding",{"1":{"3":1,"12":3,"13":1,"19":1,"26":1,"34":15,"42":29}}],["patronizing",{"1":{"0":1}}],["panels",{"1":{"2":1}}],["panel",{"0":{"2":1},"1":{"0":1,"1":2,"2":10,"3":2,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["i",{"1":{"37":1,"47":15}}],["io",{"1":{"36":5,"37":6}}],["ios",{"1":{"33":2}}],["ipsum",{"1":{"26":3}}],["illustration",{"1":{"26":6}}],["illustrations",{"1":{"8":1,"16":1}}],["identity",{"1":{"30":1}}],["ids",{"1":{"18":1}}],["id",{"1":{"8":3,"13":3,"19":2,"26":12,"27":1,"28":6}}],["its",{"1":{"15":1,"17":1,"23":1,"25":1,"33":1,"44":1}}],["it",{"1":{"1":1,"5":1,"10":1,"15":1,"26":7,"29":1,"35":1,"36":2,"37":1,"38":1}}],["items",{"1":{"6":2,"10":2,"17":3,"21":3,"29":1,"39":1,"44":3}}],["item",{"0":{"6":1},"1":{"0":1,"1":17,"2":1,"3":24,"4":59,"5":2,"6":28,"7":2,"8":1,"9":27,"10":7,"11":9,"12":1,"13":1,"14":1,"15":14,"16":1,"17":2,"18":1,"19":12,"20":1,"21":41,"22":1,"23":5,"24":1,"25":4,"26":6,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":7,"40":24,"41":9,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["important",{"1":{"42":21,"47":5,"48":1,"50":8}}],["import",{"1":{"36":2,"37":1}}],["importing",{"1":{"36":1}}],["implementation",{"1":{"31":1,"34":1}}],["imply",{"1":{"17":1}}],["img",{"1":{"1":1,"5":1,"26":6,"37":1}}],["images",{"1":{"16":1}}],["image",{"1":{"0":5,"1":2,"5":6,"11":8,"12":5,"26":24}}],["if",{"1":{"0":1,"3":9,"4":2,"10":3,"17":1,"23":1,"25":2,"26":1,"27":2,"33":2,"35":1}}],["icon",{"1":{"0":30,"1":5,"2":2,"3":12,"4":1,"5":2,"6":10,"8":7,"10":2,"11":16,"12":13,"13":1,"15":15,"19":14,"21":7,"22":4,"24":9,"26":47,"27":11,"28":3,"29":1,"33":170,"40":6,"41":4,"43":8,"48":2}}],["icons",{"0":{"33":1},"1":{"0":1,"1":3,"2":1,"3":1,"4":4,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":5,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":5,"28":1,"29":1,"30":1,"31":1,"32":2,"33":12,"34":2,"35":1,"36":5,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["isn",{"1":{"17":1,"23":1,"25":1}}],["is",{"1":{"0":77,"1":50,"2":3,"4":20,"5":5,"6":2,"7":1,"8":22,"9":2,"10":7,"11":6,"12":23,"15":23,"16":2,"17":4,"19":24,"21":1,"22":3,"23":4,"24":10,"25":4,"26":66,"27":11,"28":2,"29":1,"30":3,"31":1,"32":2,"33":1,"34":1,"35":4,"36":1,"37":8,"38":1,"40":1,"41":12,"42":1,"44":1,"46":1,"47":10}}],["infinite",{"1":{"34":2}}],["informative",{"1":{"27":4,"30":1}}],["information",{"1":{"0":4,"3":16,"8":1,"19":6,"27":4,"28":1,"30":6,"35":1,"41":1}}],["inform",{"1":{"0":1,"27":1}}],["info",{"1":{"0":14,"12":11,"13":4,"19":3,"27":8,"28":2,"30":1,"43":3}}],["inner",{"1":{"26":1}}],["index",{"1":{"45":13}}],["independently",{"1":{"25":1}}],["indication",{"1":{"19":2}}],["indicates",{"1":{"24":1,"32":1}}],["indicate",{"1":{"7":1,"18":1,"30":1}}],["invalid",{"1":{"19":1}}],["inset",{"1":{"45":11}}],["installing",{"1":{"36":1}}],["install",{"1":{"36":3,"37":1}}],["instagram",{"1":{"33":2}}],["instructions",{"1":{"19":1}}],["inside",{"1":{"2":1,"15":1,"26":1,"31":1}}],["integrate",{"1":{"37":1}}],["internal",{"1":{"37":1}}],["interfaces",{"1":{"36":1,"37":2,"38":1}}],["interface",{"1":{"28":1}}],["interact",{"1":{"19":2,"22":1}}],["interacts",{"1":{"15":1}}],["interacting",{"1":{"8":1}}],["interactive",{"1":{"6":9,"13":2,"22":12,"26":6,"27":12}}],["into",{"1":{"19":3,"33":1,"36":1,"38":1}}],["initial",{"1":{"48":2}}],["initialize",{"1":{"15":1}}],["initials",{"1":{"1":2}}],["including",{"1":{"44":1}}],["include",{"1":{"8":1,"16":2,"33":1,"36":3,"48":5}}],["incorrect",{"1":{"19":2}}],["inconsistent",{"1":{"1":1}}],["increase",{"1":{"1":1,"15":3}}],["in",{"1":{"0":6,"1":5,"3":1,"4":3,"5":3,"7":1,"8":1,"10":3,"15":10,"16":2,"17":3,"19":8,"21":3,"22":1,"23":3,"25":4,"26":4,"27":4,"28":1,"29":3,"30":5,"31":2,"32":2,"33":7,"34":5,"35":1,"36":3,"37":2,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1}}],["input",{"0":{"19":1},"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":8,"18":2,"19":52,"20":2,"21":1,"22":1,"23":8,"24":1,"25":8,"26":1,"27":1,"28":1,"29":2,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":10,"47":1,"48":1,"49":1,"50":1}}],["inputs",{"0":{"46":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":3,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":4,"47":2,"48":1,"49":1,"50":1}}],["inline",{"0":{"18":1},"1":{"0":3,"1":1,"2":2,"3":2,"4":10,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":7,"12":16,"13":2,"14":1,"15":1,"16":1,"17":2,"18":8,"19":3,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":8,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":5,"36":1,"37":3,"38":1,"39":1,"40":1,"41":1,"42":28,"43":1,"44":24,"45":7,"46":1,"47":1,"48":1,"49":1,"50":1}}],["dynamic",{"1":{"39":2}}],["during",{"1":{"35":1,"42":1}}],["duration",{"1":{"26":12}}],["duplicate",{"1":{"6":3,"13":1,"15":1,"19":1,"22":3,"26":8,"27":4,"28":2}}],["drph4nt0m",{"1":{"37":1}}],["dribbble",{"1":{"33":2}}],["drag",{"1":{"12":9}}],["draw",{"1":{"8":1}}],["dropbox",{"1":{"33":2}}],["dropdown",{"1":{"19":1}}],["drop",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":69,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":10,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":15,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["doesn",{"1":{"35":1,"41":1}}],["dotnet",{"1":{"33":2}}],["dots",{"1":{"26":8}}],["docker",{"1":{"33":2}}],["documentation",{"1":{"8":1,"16":2,"37":1}}],["document",{"1":{"5":1,"11":1,"12":2,"26":12,"40":1}}],["download",{"1":{"15":1}}],["down",{"1":{"3":6,"11":2,"19":1}}],["don",{"1":{"0":1,"1":2,"4":1,"15":1,"17":1,"23":1,"25":1,"27":4,"29":1,"32":1,"33":1,"35":1,"41":1}}],["done",{"1":{"0":1}}],["do",{"1":{"0":1,"1":4,"4":2,"15":1,"17":2,"23":2,"25":2,"27":2,"29":2,"32":2,"33":3,"35":2,"37":1,"41":1}}],["damodar",{"1":{"37":1}}],["dart",{"1":{"33":2}}],["dark",{"0":{"31":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":7,"27":1,"28":1,"29":1,"30":3,"31":15,"32":2,"33":1,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":6,"50":1}}],["dailymotion",{"1":{"33":2}}],["date",{"1":{"26":3}}],["database",{"1":{"37":1}}],["data",{"1":{"2":3,"19":1,"26":67,"37":2,"41":1}}],["dashed",{"1":{"12":3,"16":4}}],["danger",{"1":{"0":4,"11":1,"12":1,"19":1,"27":3,"30":7,"43":3}}],["definition",{"1":{"44":1}}],["define",{"1":{"42":1,"45":2,"48":1}}],["defines",{"1":{"39":1}}],["default",{"1":{"0":16,"1":2,"12":1,"15":2,"16":1,"19":4,"24":1,"26":2,"27":4,"31":1,"37":1,"45":1}}],["develop",{"1":{"37":1}}],["developer",{"1":{"37":6}}],["dev",{"1":{"37":2}}],["device",{"1":{"33":1,"34":1}}],["devices",{"1":{"10":1}}],["decoration",{"1":{"35":1}}],["declared",{"1":{"31":1}}],["determine",{"1":{"35":1}}],["details",{"1":{"3":12,"13":1,"27":1}}],["deno",{"1":{"33":2}}],["delete",{"1":{"16":1,"19":2,"26":5,"37":2}}],["deletion",{"1":{"8":1}}],["desing",{"1":{"34":1}}],["designer",{"1":{"37":2}}],["designed",{"1":{"29":2,"37":1}}],["design",{"1":{"15":1,"30":3,"31":2,"34":1,"36":6,"37":13}}],["desired",{"1":{"3":16}}],["desktops",{"1":{"47":3}}],["desktop",{"1":{"12":6,"26":24,"41":1,"44":1,"47":7}}],["description",{"1":{"0":16,"3":9,"13":3}}],["depending",{"1":{"0":1,"27":2,"47":1,"49":1}}],["difference",{"1":{"46":1}}],["differentiate",{"1":{"27":1}}],["different",{"1":{"1":3,"19":1,"24":1,"27":1,"29":1,"34":1,"40":1}}],["dittmann",{"1":{"37":1}}],["direction",{"1":{"44":3,"45":5,"48":2}}],["directions",{"1":{"26":6}}],["directly",{"1":{"35":1}}],["directory",{"1":{"33":1,"36":1}}],["directors",{"1":{"26":6}}],["dialogue",{"1":{"19":1}}],["dialog5",{"1":{"8":1}}],["dialog4",{"1":{"8":1}}],["dialog",{"1":{"8":11}}],["divides",{"1":{"38":1}}],["div",{"1":{"0":60,"1":62,"2":14,"3":38,"4":40,"5":10,"6":56,"7":2,"8":20,"10":2,"11":36,"12":30,"13":8,"14":12,"19":26,"22":12,"24":12,"26":102,"27":10,"29":8,"30":1,"32":4,"37":6,"38":2,"39":12,"40":6,"42":2,"43":16,"44":8,"48":2,"50":2}}],["disqus",{"1":{"33":2}}],["distance",{"1":{"32":1}}],["distract",{"1":{"27":2}}],["discord",{"1":{"33":2,"37":3}}],["discoverable",{"1":{"19":1}}],["disclose",{"1":{"3":15}}],["disabling",{"1":{"17":1}}],["disable",{"1":{"17":1,"23":1,"25":1}}],["disabled",{"1":{"2":1,"6":4,"9":2,"10":1,"17":4,"19":3,"23":4,"25":4,"27":2,"30":1,"41":2,"43":3}}],["dismissed",{"1":{"0":1,"8":1}}],["displays",{"1":{"11":2,"19":1,"20":1}}],["displayed",{"1":{"1":1,"22":2,"44":1}}],["display",{"0":{"44":1},"1":{"0":2,"1":3,"2":2,"3":18,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":2,"11":1,"12":4,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":9,"45":2,"46":1,"47":6,"48":4,"49":5,"50":2}}],["tglide",{"1":{"37":1}}],["twitter",{"1":{"33":2}}],["twitch",{"1":{"33":2}}],["two",{"1":{"0":1,"1":1,"3":3,"9":1,"15":1,"16":1,"19":3,"21":1,"22":1,"25":1,"26":1,"28":1,"32":2,"35":2,"46":1}}],["tumbir",{"1":{"33":2}}],["turning",{"1":{"25":1}}],["td",{"1":{"26":114,"37":4}}],["tbody",{"1":{"26":14}}],["try",{"1":{"37":1}}],["truth",{"1":{"37":1}}],["true",{"1":{"0":20,"2":2,"3":6,"5":2,"6":9,"8":4,"10":2,"11":8,"12":11,"13":1,"15":9,"17":3,"19":13,"21":6,"22":4,"23":3,"25":3,"26":29,"27":8,"28":3,"40":6,"41":2}}],["tr",{"1":{"26":30}}],["tradeshift",{"1":{"33":2}}],["transform",{"1":{"48":1}}],["translated",{"1":{"33":1,"42":1,"45":1}}],["transparent",{"1":{"8":1}}],["trailing",{"1":{"19":1}}],["trash",{"1":{"15":1,"26":5}}],["trim",{"1":{"12":2,"48":6}}],["template",{"1":{"44":1}}],["telegram",{"1":{"33":2}}],["technology",{"1":{"33":1}}],["team",{"1":{"1":1,"13":1,"37":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["textfield",{"1":{"46":1}}],["texts",{"1":{"35":1}}],["textareas",{"1":{"22":1}}],["textarea",{"1":{"19":4,"22":2}}],["text",{"0":{"48":1},"1":{"0":52,"1":3,"2":4,"3":15,"4":50,"5":1,"6":6,"7":1,"8":23,"9":7,"10":5,"11":9,"12":14,"13":6,"14":1,"15":30,"16":3,"17":2,"18":3,"19":53,"20":2,"21":12,"22":25,"23":2,"24":7,"25":2,"26":96,"27":11,"28":5,"29":1,"30":7,"31":1,"32":3,"33":3,"34":1,"35":27,"36":1,"37":1,"38":2,"39":1,"40":7,"41":18,"42":1,"43":26,"44":1,"45":2,"46":1,"47":2,"48":20,"49":2,"50":4}}],["t",{"1":{"0":1,"1":2,"4":2,"15":1,"17":2,"19":2,"23":2,"25":2,"27":4,"29":1,"32":1,"33":1,"35":2,"41":2}}],["tiktok",{"1":{"33":2}}],["time",{"1":{"26":12}}],["tips",{"1":{"0":1,"1":1,"15":1,"27":1,"29":1,"37":1,"41":1}}],["title",{"1":{"0":26,"3":3,"8":14,"11":4,"12":5,"26":69,"37":2}}],["thomas",{"1":{"37":1}}],["those",{"1":{"37":1}}],["th",{"1":{"26":40}}],["through",{"1":{"41":1,"43":1}}],["throughout",{"1":{"26":1,"29":1}}],["three",{"1":{"1":1,"3":3,"4":1,"8":1,"13":1,"17":1,"23":1,"25":1,"26":1,"34":1,"39":1}}],["thumbnail",{"1":{"5":1}}],["think",{"1":{"4":1}}],["this",{"1":{"0":20,"3":9,"10":1,"16":1,"19":16,"20":1,"22":1,"27":6,"30":1,"31":1,"35":1}}],["than",{"1":{"1":1,"10":1,"19":1,"33":1,"34":1}}],["that",{"1":{"0":2,"1":2,"3":16,"7":1,"8":2,"10":1,"15":1,"18":1,"19":6,"27":3,"29":2,"32":2,"35":2,"39":1,"41":1}}],["these",{"1":{"27":1,"37":1}}],["their",{"1":{"27":2,"32":1}}],["thead",{"1":{"26":40}}],["there",{"1":{"1":1,"5":1,"6":1,"10":1,"15":1,"17":2,"19":2,"23":2,"24":1,"25":2,"33":2,"34":1,"35":1,"37":1}}],["them",{"1":{"0":1,"29":1,"33":1,"34":1}}],["theme",{"0":{"31":1,"49":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":3,"31":17,"32":3,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":3,"49":6,"50":3}}],["the",{"1":{"0":50,"1":4,"2":1,"3":1,"4":7,"5":1,"6":1,"8":6,"10":9,"11":2,"14":1,"15":8,"16":2,"17":5,"19":15,"21":1,"22":5,"23":6,"24":1,"25":5,"26":10,"27":16,"28":4,"29":6,"30":5,"31":2,"32":6,"33":12,"34":4,"35":9,"36":8,"37":5,"39":2,"42":6,"43":1,"44":22,"45":3,"46":4,"47":2,"48":10,"49":1,"50":1}}],["they",{"1":{"0":3,"3":16,"4":2,"8":1,"15":1,"17":1,"19":1,"25":1,"26":1,"33":1,"41":1}}],["torstendittmann",{"1":{"37":1}}],["torsten",{"1":{"37":1}}],["tooling",{"1":{"37":1}}],["tooltips",{"1":{"28":2,"29":1}}],["tooltip",{"0":{"28":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":10,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":4,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":17,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["too",{"1":{"29":1}}],["toggle",{"1":{"11":2,"25":1}}],["top",{"1":{"2":3,"6":2,"8":1,"14":3,"45":3}}],["to",{"1":{"0":30,"1":4,"2":5,"3":32,"4":3,"6":2,"7":3,"8":3,"9":2,"10":3,"12":11,"14":1,"15":7,"16":5,"17":7,"18":1,"19":17,"20":3,"22":3,"23":7,"25":8,"26":3,"27":17,"29":6,"30":2,"31":5,"32":3,"33":7,"34":2,"35":7,"36":3,"37":3,"38":1,"40":1,"41":4,"42":1,"43":2,"44":1,"46":1}}],["typically",{"1":{"1":1,"19":1,"27":2}}],["typical",{"1":{"0":15}}],["type",{"1":{"0":6,"1":5,"2":1,"3":8,"4":4,"5":2,"6":2,"7":1,"8":3,"9":3,"10":2,"11":3,"12":4,"13":2,"14":1,"15":3,"16":2,"17":9,"18":1,"19":27,"20":1,"21":2,"22":2,"23":9,"24":3,"25":10,"26":18,"27":3,"28":2,"30":1,"32":1,"33":1,"38":1,"39":1,"40":1,"41":1,"46":2}}],["types",{"1":{"0":2,"1":2,"5":2,"15":2,"19":3,"21":2,"32":2}}],["typography",{"0":{"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":5,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["tappable",{"1":{"27":1}}],["take",{"1":{"17":1,"45":1}}],["taken",{"1":{"8":1}}],["tall",{"1":{"15":1}}],["task",{"1":{"0":2,"27":3}}],["tab",{"1":{"10":1,"26":1}}],["tabs",{"0":{"9":1,"10":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":26,"10":29,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["tablets",{"1":{"47":9}}],["tablet",{"1":{"47":2}}],["tables",{"1":{"26":5,"29":1,"32":2}}],["table",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":162,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":3,"38":1,"39":1,"40":1,"41":2,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["tags",{"1":{"8":1,"16":1,"19":6,"27":10,"29":1,"35":1}}],["tag",{"0":{"27":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":5,"7":1,"8":1,"9":1,"10":1,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":5,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":14,"27":21,"28":4,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["rtl",{"1":{"48":2}}],["richards",{"1":{"37":1}}],["right",{"1":{"6":2,"10":3,"15":1,"21":3,"33":1,"41":1,"45":1,"48":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["rr",{"1":{"37":4}}],["run",{"1":{"36":1}}],["runtime",{"1":{"19":3}}],["rule",{"1":{"34":1}}],["ruby",{"1":{"33":2}}],["ronald",{"1":{"37":2}}],["rowgroup",{"1":{"26":1}}],["rowheader",{"1":{"26":1}}],["rows",{"1":{"26":2,"39":1}}],["row",{"1":{"26":26,"44":12}}],["rounded",{"1":{"14":1,"15":1,"29":1}}],["role",{"1":{"11":7,"12":3,"19":5,"26":27,"28":3}}],["rana",{"1":{"37":1}}],["range",{"1":{"34":1}}],["ranges",{"1":{"34":1}}],["rahul",{"1":{"37":1}}],["raw",{"1":{"2":3}}],["radio",{"0":{"23":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":2,"23":22,"24":2,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["radius",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":7,"13":2,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":24,"30":2,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["rem",{"1":{"42":1}}],["remove",{"1":{"12":2,"15":1,"26":2,"46":2}}],["rel",{"1":{"36":2}}],["relative",{"1":{"32":1,"45":2}}],["related",{"1":{"0":1,"16":1,"17":1,"21":1}}],["reusable",{"1":{"36":1,"37":2}}],["regular",{"1":{"35":6}}],["react",{"1":{"33":2}}],["ready",{"1":{"24":3}}],["read",{"1":{"19":1,"37":3}}],["readonly",{"1":{"19":3}}],["readability",{"1":{"15":2}}],["readable",{"1":{"0":1}}],["refresh",{"1":{"26":10}}],["refer",{"1":{"8":1,"23":1,"25":1}}],["reveal",{"1":{"3":16}}],["recognition",{"1":{"4":1,"15":2}}],["recognizable",{"1":{"1":2}}],["recommended",{"1":{"10":1}}],["recommend",{"1":{"4":1,"15":1,"17":1,"27":2,"32":1,"33":1,"35":1}}],["recently",{"1":{"0":1}}],["reddit",{"1":{"33":2}}],["reduces",{"1":{"10":1}}],["red",{"1":{"1":3,"27":1,"30":2}}],["represent",{"1":{"30":1}}],["representing",{"1":{"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"18":1,"20":1,"21":1,"22":1,"24":1,"25":1,"26":1,"27":1,"28":1,"38":1,"39":1,"40":1,"41":1}}],["representation",{"1":{"1":1,"5":2,"33":1}}],["required",{"1":{"0":1,"19":1,"27":1}}],["resolutions",{"1":{"34":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["resets",{"1":{"37":1}}],["reset",{"0":{"46":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":7,"47":2,"48":1,"49":1,"50":1}}],["responsive",{"0":{"34":1,"47":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":3,"34":7,"35":3,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":3,"47":5,"48":3,"49":2,"50":2}}],["swift",{"1":{"33":2}}],["switches",{"1":{"17":1,"25":7,"29":1}}],["switch",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":2,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":15,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["slack",{"1":{"33":2}}],["skype",{"1":{"33":2}}],["svg",{"1":{"33":1}}],["same",{"1":{"42":5,"44":21,"45":2,"48":10}}],["sachan",{"1":{"37":1}}],["salesforce",{"1":{"33":2}}],["safari",{"1":{"33":2,"46":1}}],["safe",{"1":{"6":3}}],["sass",{"1":{"31":3,"34":2}}],["sandler",{"1":{"26":18}}],["solve",{"1":{"44":1}}],["solid",{"1":{"16":2,"33":1,"44":6}}],["software",{"1":{"37":7}}],["soften",{"1":{"29":2}}],["source",{"1":{"36":1,"37":6}}],["social",{"1":{"33":1}}],["so",{"1":{"15":1,"17":1,"23":1,"25":1,"27":2}}],["sometimes",{"1":{"19":1}}],["something",{"1":{"0":1,"7":1}}],["some",{"1":{"0":15,"34":1,"50":2}}],["spotify",{"1":{"33":2}}],["special",{"1":{"30":1,"34":1}}],["specific",{"1":{"11":1,"12":1,"15":1,"29":1,"30":1}}],["spacing",{"1":{"14":1,"44":1}}],["space",{"1":{"10":2,"17":2,"23":1,"25":1,"33":3,"44":3,"48":5}}],["span",{"1":{"0":80,"1":2,"2":8,"3":36,"4":42,"5":4,"6":30,"8":22,"9":12,"10":12,"11":42,"12":60,"13":18,"15":50,"19":48,"21":30,"22":14,"24":24,"26":232,"27":32,"28":16,"37":2,"40":24,"41":28}}],["scannable",{"1":{"38":1}}],["scanning",{"1":{"27":2,"35":1}}],["scale",{"1":{"33":2,"35":1}}],["scss",{"1":{"31":5,"34":6,"42":2,"44":1,"45":1,"48":1}}],["scenarios",{"1":{"10":1}}],["screen",{"1":{"10":1,"15":1,"26":1,"34":5,"39":3,"44":1,"47":1}}],["screens",{"1":{"6":1,"34":15,"39":4}}],["scrim",{"1":{"8":1}}],["scrolling",{"1":{"10":1,"26":1}}],["scroll",{"1":{"2":3,"10":7,"26":7}}],["snippets",{"1":{"9":1,"18":2,"30":1,"35":1}}],["shimonewman",{"1":{"37":1}}],["shimon",{"1":{"37":1}}],["shield",{"1":{"6":3}}],["shmuel",{"1":{"37":1}}],["shechter",{"1":{"37":1}}],["shades",{"1":{"30":2}}],["shadows",{"1":{"32":3}}],["shadow",{"1":{"12":3,"32":14}}],["sharp",{"1":{"29":1}}],["shrink",{"1":{"12":2,"44":3}}],["shortcuts",{"1":{"20":2}}],["short",{"1":{"15":1,"27":2}}],["shows",{"1":{"13":1,"46":1,"47":1,"49":1}}],["showmodal",{"1":{"8":1}}],["shown",{"1":{"1":1,"34":1}}],["show",{"1":{"0":1,"8":1,"10":2,"16":1,"19":3,"22":1,"26":2,"31":1,"32":2,"41":2}}],["should",{"1":{"0":2,"10":4,"15":1,"16":1,"17":3,"19":2,"23":3,"25":3,"26":3,"32":1,"33":2}}],["sizing",{"1":{"44":2}}],["sizes",{"1":{"1":4,"8":2,"9":1,"15":2,"17":2,"23":2,"25":2,"29":3,"34":3,"35":3,"39":1}}],["size",{"1":{"0":10,"1":24,"4":4,"6":2,"12":15,"15":6,"17":2,"19":2,"23":5,"25":2,"26":13,"29":1,"34":2,"35":1,"39":8,"44":27,"47":1,"48":10}}],["singh",{"1":{"37":1}}],["single",{"1":{"9":1,"10":1,"16":1,"17":1,"23":3,"25":2,"33":1,"41":1}}],["simple",{"1":{"27":2,"37":1}}],["simplify",{"1":{"6":1}}],["six",{"1":{"10":1,"11":1,"43":1}}],["sidebar",{"1":{"29":1,"40":2}}],["side",{"1":{"10":2,"40":4}}],["surface",{"1":{"32":2}}],["surfaces",{"1":{"32":1}}],["sure",{"1":{"15":1,"17":1,"23":1,"25":1,"33":2}}],["support",{"1":{"31":1,"35":1,"37":2}}],["such",{"1":{"15":1,"29":4,"30":1,"32":2}}],["successfully",{"1":{"0":1,"27":1}}],["success",{"1":{"0":4,"11":1,"19":6,"27":6,"30":8,"43":3}}],["subtle",{"1":{"35":1}}],["sub",{"1":{"6":9}}],["subheading",{"1":{"3":9}}],["summary",{"1":{"3":12}}],["src",{"1":{"1":1,"5":1,"26":6,"37":1}}],["s",{"1":{"1":3,"8":1,"15":1,"26":1,"27":1,"30":2,"33":1,"36":1,"37":3,"45":1,"46":1,"50":1}}],["small",{"1":{"0":10,"1":18,"6":1,"8":9,"17":4,"23":4,"25":4,"29":7,"32":7,"34":9,"39":3,"48":12}}],["stnguyen90",{"1":{"37":1}}],["steven",{"1":{"37":1}}],["steps",{"1":{"33":1,"36":1}}],["storage",{"1":{"37":1}}],["still",{"1":{"7":1}}],["sticky",{"1":{"0":43,"26":4,"45":9}}],["stretch",{"1":{"44":1}}],["stripe",{"1":{"33":2}}],["string",{"1":{"1":1}}],["strong",{"1":{"4":1,"15":1,"35":1}}],["stylesheet",{"1":{"36":2}}],["styles",{"1":{"16":2,"26":5,"37":1,"45":2,"46":1}}],["style",{"1":{"0":10,"4":10,"6":1,"10":1,"11":7,"12":5,"15":1,"19":3,"22":1,"26":21,"27":1,"29":4,"30":2,"31":6,"32":2,"34":12,"35":5,"39":1,"45":2}}],["stays",{"1":{"42":5,"44":21,"45":2,"48":10}}],["stars",{"1":{"26":12}}],["start",{"1":{"2":1,"3":6,"4":11,"6":18,"10":2,"11":3,"12":8,"13":1,"19":2,"20":1,"21":2,"22":4,"26":4,"28":1,"32":2,"36":1,"38":1,"42":53,"44":10,"45":7,"48":1}}],["started",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":4,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["standard",{"1":{"32":1}}],["stand",{"1":{"15":1}}],["stack",{"1":{"14":1,"37":1}}],["static",{"1":{"27":1}}],["state",{"1":{"11":1,"12":1,"16":1,"24":2,"27":1}}],["states",{"1":{"0":2,"16":1,"17":1,"19":2,"23":1,"24":2,"25":2,"43":2}}],["status",{"0":{"24":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":2,"24":22,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["system",{"1":{"0":2,"27":1,"30":2,"35":1,"36":1,"37":3,"43":1}}],["see",{"1":{"46":1}}],["self",{"1":{"44":3}}],["selector",{"1":{"49":1}}],["selectors",{"1":{"23":1,"25":1,"30":1}}],["selection",{"1":{"23":1}}],["selecting",{"1":{"23":1}}],["selected",{"1":{"10":1,"23":1,"26":1,"27":1,"30":2,"33":1,"40":1,"49":1}}],["select",{"1":{"3":9,"4":1,"12":1,"17":3,"19":9,"23":1,"33":1}}],["semantics",{"1":{"35":1}}],["semibold",{"1":{"35":6}}],["semi",{"1":{"8":1}}],["serious",{"1":{"29":1}}],["sensitive",{"1":{"19":1}}],["sentences",{"1":{"15":1}}],["sent",{"1":{"0":15}}],["set",{"1":{"17":2,"19":3,"23":1,"25":1,"28":9,"43":1}}],["settings",{"1":{"10":3}}],["seperators",{"1":{"30":1}}],["separator",{"1":{"13":1,"19":1}}],["sep",{"1":{"13":2,"44":3}}],["sessions",{"1":{"10":3}}],["secret",{"1":{"19":3,"28":9}}],["secure",{"1":{"6":3}}],["sections",{"1":{"9":2,"10":1,"38":1}}],["section",{"1":{"0":20,"2":2,"4":23,"9":1,"11":4,"26":2,"36":1,"40":6,"45":2}}],["secondary",{"0":{"9":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":5,"9":24,"10":2,"11":1,"12":4,"13":1,"14":1,"15":16,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":7,"20":4,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["guide",{"1":{"37":1}}],["guarantees",{"1":{"35":1}}],["google",{"1":{"33":2}}],["global",{"1":{"31":2}}],["g",{"1":{"27":1,"32":2,"37":1}}],["gt",{"1":{"8":1,"26":2,"36":1}}],["gap",{"1":{"2":1,"6":7,"8":3,"12":3,"13":1,"14":4,"22":3,"26":8,"37":2,"39":3,"44":42}}],["growing",{"1":{"37":1}}],["grouping",{"1":{"21":1}}],["group",{"1":{"1":21,"16":1,"38":1,"40":1}}],["groups",{"1":{"1":2}}],["green",{"1":{"1":7,"27":1,"30":2}}],["grayscale",{"1":{"33":1}}],["gray",{"1":{"1":1,"27":1,"33":2,"43":3}}],["graphical",{"1":{"1":1}}],["grid",{"0":{"6":1,"39":1},"1":{"0":7,"1":2,"2":12,"3":2,"4":4,"5":3,"6":34,"7":3,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":3,"39":19,"40":3,"41":2,"42":2,"43":2,"44":6,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["gitlab",{"1":{"33":2}}],["git",{"1":{"33":2,"37":2}}],["github",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":4,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["give",{"1":{"0":1}}],["get",{"1":{"16":1,"37":1,"39":1}}],["getting",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["generic",{"1":{"0":1}}],["general",{"1":{"0":1,"27":1,"33":1}}],["generated",{"1":{"0":2}}],["kind",{"1":{"38":1}}],["kodumbeats",{"1":{"37":1}}],["kotlin",{"1":{"33":2}}],["kristin",{"1":{"37":4}}],["kb",{"1":{"26":18}}],["kbd",{"1":{"20":7}}],["keys",{"1":{"19":3,"28":9}}],["keyword",{"1":{"18":3}}],["keyboard",{"0":{"20":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":6,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1}}],["keeping",{"1":{"15":1}}],["keep",{"1":{"1":1,"15":1,"27":2,"29":1,"41":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":4,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],[">",{"1":{"0":271,"1":110,"2":49,"3":159,"4":183,"5":23,"6":121,"7":4,"8":89,"9":43,"10":38,"11":147,"12":132,"13":30,"14":15,"15":101,"16":6,"17":11,"18":4,"19":211,"20":8,"21":66,"22":39,"23":11,"24":38,"25":11,"26":632,"27":51,"28":26,"29":13,"30":3,"31":7,"32":10,"33":1,"34":13,"35":39,"36":5,"37":19,"38":6,"39":28,"40":60,"41":66,"42":4,"43":18,"44":10,"45":6,"46":5,"47":12,"48":12,"49":1,"50":8}}],["+2",{"1":{"1":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":4,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["custom",{"1":{"39":1}}],["current",{"1":{"24":1}}],["currently",{"1":{"8":1,"27":1}}],["cdn",{"1":{"36":1}}],["cpp",{"1":{"33":2}}],["css3",{"1":{"33":2}}],["css",{"1":{"30":2,"31":3,"34":2,"36":3,"37":4,"39":2,"42":1,"44":2,"45":1,"48":1}}],["circular",{"1":{"29":3}}],["circle",{"1":{"12":1,"19":2,"21":3,"27":2}}],["cell",{"1":{"26":15}}],["centered",{"1":{"33":1}}],["center",{"1":{"1":1,"4":4,"12":11,"14":4,"17":2,"23":2,"25":2,"26":6,"33":3,"37":2,"44":6,"48":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"22":3}}],["creation",{"1":{"8":1}}],["created",{"1":{"26":12,"37":1}}],["create",{"1":{"2":1,"16":2,"18":1,"19":1,"26":3,"30":1,"32":2,"37":3,"38":1}}],["cross",{"1":{"4":2,"12":5,"13":1,"14":4,"22":3,"26":8,"37":2,"44":6}}],["clamp",{"1":{"48":1}}],["clarify",{"1":{"27":1}}],["class=",{"1":{"26":2}}],["classes",{"1":{"4":1,"31":2,"43":2,"45":2,"50":1}}],["class",{"1":{"0":131,"1":59,"2":19,"3":78,"4":95,"5":12,"6":55,"7":3,"8":46,"9":24,"10":22,"11":76,"12":67,"13":17,"14":9,"15":52,"16":5,"17":4,"18":3,"19":95,"20":5,"21":34,"22":22,"23":4,"24":22,"25":11,"26":322,"27":27,"28":15,"29":4,"31":2,"32":4,"33":2,"35":14,"37":6,"38":4,"39":9,"40":31,"41":34,"42":3,"43":10,"44":6,"45":5,"46":4,"47":6,"48":5,"50":4}}],["click",{"1":{"41":1}}],["clickability",{"1":{"35":1}}],["clickable",{"1":{"26":2,"27":1}}],["clicking",{"1":{"17":1,"23":1,"25":1}}],["clear",{"1":{"3":9,"19":2,"35":1}}],["closed",{"1":{"6":3}}],["close",{"1":{"0":10,"8":5,"11":2}}],["chrome",{"1":{"46":1}}],["christyjacob4",{"1":{"37":1}}],["christy",{"1":{"37":1}}],["chart",{"1":{"40":1}}],["change",{"1":{"0":1,"19":1}}],["child",{"1":{"13":1,"22":3,"26":2,"44":3}}],["choose",{"1":{"12":9,"19":1,"27":2}}],["choice",{"1":{"3":12}}],["chenparnasa",{"1":{"37":1}}],["chen",{"1":{"37":1}}],["checked",{"1":{"17":3,"23":3,"25":3}}],["check",{"1":{"6":3,"11":1,"16":1,"19":1,"21":3,"27":1,"43":8}}],["checkboxes",{"1":{"3":2,"17":6,"23":1,"29":1}}],["checkbox",{"0":{"17":1},"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":12,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":8,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["cheveron",{"1":{"3":6,"10":2,"11":2,"15":2,"19":1,"41":2}}],["capitalize",{"1":{"48":2}}],["carla",{"1":{"37":1}}],["cards",{"1":{"6":1,"16":4,"29":1,"32":2}}],["card",{"0":{"16":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":2,"14":1,"15":2,"16":10,"17":2,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":3,"27":1,"28":1,"29":5,"30":1,"31":1,"32":3,"33":1,"34":1,"35":1,"36":1,"37":2,"38":1,"39":25,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["categories",{"1":{"27":1}}],["case",{"1":{"15":1,"19":3,"26":1}}],["cases",{"1":{"4":1,"5":2,"15":1,"21":2,"34":2}}],["call",{"1":{"0":1,"15":2}}],["cancel",{"1":{"11":2,"15":1}}],["cannot",{"1":{"1":1}}],["can",{"1":{"0":4,"1":5,"3":1,"4":1,"8":2,"10":3,"15":2,"16":2,"18":2,"19":4,"22":2,"23":1,"25":1,"26":1,"30":1,"33":1,"34":1,"35":2,"38":1,"39":2,"45":3}}],["cog",{"1":{"40":1}}],["cognitive",{"1":{"10":1}}],["codingsamurai",{"1":{"37":1}}],["code",{"0":{"2":1,"18":1},"1":{"0":2,"1":3,"2":27,"3":3,"4":2,"5":2,"6":2,"7":2,"8":2,"9":3,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":3,"18":15,"19":3,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":3,"31":2,"32":2,"33":7,"34":4,"35":12,"36":3,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["count",{"1":{"19":1}}],["counter",{"1":{"19":4}}],["cope",{"1":{"37":1}}],["copied",{"1":{"18":1}}],["copying",{"1":{"22":1}}],["copy",{"1":{"13":1,"19":3,"22":3,"26":2,"27":2,"33":1,"36":1}}],["com",{"1":{"36":2}}],["community",{"1":{"37":1}}],["commit",{"1":{"37":2}}],["command",{"1":{"33":1,"36":1}}],["common",{"1":{"22":1,"33":1}}],["commonly",{"1":{"15":1,"25":1}}],["compilation",{"1":{"42":1}}],["compiled",{"1":{"31":1,"34":1,"42":1,"44":1,"48":1}}],["compliment",{"1":{"35":1}}],["complete",{"1":{"6":4,"7":1,"15":1,"24":6}}],["completed",{"1":{"0":1,"27":1}}],["complex",{"1":{"6":1}}],["component",{"1":{"15":1,"29":1,"32":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1},"1":{"0":2,"1":2,"2":2,"3":4,"4":4,"5":2,"6":2,"7":2,"8":4,"9":4,"10":4,"11":4,"12":4,"13":4,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":2,"23":1,"24":2,"25":1,"26":3,"27":1,"28":3,"29":4,"30":2,"31":2,"32":5,"33":1,"34":1,"35":1,"36":1,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["core",{"1":{"37":1}}],["corner",{"1":{"29":2}}],["corners",{"1":{"14":1,"15":1,"29":2}}],["correct",{"1":{"19":1}}],["correctly",{"1":{"15":1,"17":1,"23":1,"25":1}}],["cover",{"1":{"12":6}}],["configured",{"1":{"45":1}}],["confused",{"1":{"35":1}}],["confusion",{"1":{"4":1}}],["convey",{"1":{"27":2,"43":1}}],["conduct",{"1":{"19":1}}],["conjunction",{"1":{"15":1}}],["consist",{"1":{"3":1,"4":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"26":1,"28":1}}],["consistency",{"1":{"1":1,"15":1}}],["consistent",{"1":{"0":1,"30":1,"36":1,"37":3,"42":1,"43":1,"48":1}}],["console",{"1":{"0":2,"1":1,"3":1,"4":1,"8":1,"15":1,"16":1,"21":1,"26":3,"27":4,"29":1,"30":2,"32":1,"34":1,"43":1,"44":1}}],["contributing",{"1":{"37":1}}],["controls",{"1":{"44":1}}],["controlled",{"1":{"25":1,"50":1}}],["control",{"1":{"4":1,"30":1,"44":1}}],["contrast",{"1":{"1":1,"32":3}}],["contains",{"1":{"22":1,"24":1,"30":1}}],["containing",{"1":{"19":1,"41":1}}],["contain",{"1":{"0":1,"3":1}}],["containers",{"1":{"8":1}}],["container",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":2,"10":1,"11":1,"12":2,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":11,"39":4,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2}}],["context",{"1":{"0":2,"27":4,"35":1}}],["contextual",{"1":{"0":15,"12":3,"19":1}}],["content",{"1":{"0":11,"2":1,"3":27,"5":6,"8":6,"9":1,"10":1,"11":4,"14":1,"16":1,"19":1,"21":1,"22":1,"26":1,"27":1,"34":1,"38":3,"41":1,"44":5}}],["colours",{"1":{"27":1}}],["colored",{"1":{"1":1}}],["color",{"1":{"1":27,"8":1,"11":1,"12":1,"19":4,"30":56,"31":24,"33":3,"37":1,"43":32,"44":6}}],["colors",{"0":{"30":1,"43":1},"1":{"0":2,"1":4,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":3,"30":12,"31":3,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":3,"43":9,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["collaborating",{"1":{"37":1}}],["collaboration",{"1":{"37":1}}],["collaborate",{"1":{"37":4}}],["collapsibles",{"1":{"3":17}}],["collapsible",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":45,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["collection",{"1":{"26":18}}],["col",{"1":{"26":120,"37":2}}],["columnheader",{"1":{"26":5}}],["columns",{"1":{"26":2,"44":2}}],["column",{"1":{"13":3,"26":4,"44":15}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}]],"serializationVersion":2}
\ No newline at end of file
+{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,134],"1":[2,263],"2":[2,230],"3":[3,133],"4":[3,149],"5":[2,180],"6":[3,205],"7":[3,151],"8":[3,189],"9":[3,137],"10":[3,203],"11":[2,252],"12":[3,147],"13":[3,125],"14":[2,201],"15":[3,162],"16":[3,182],"17":[4,210],"18":[3,140],"19":[2,131],"20":[2,268],"21":[2,195],"22":[2,207],"23":[3,120],"24":[3,137],"25":[3,395],"26":[2,113],"27":[2,141],"28":[2,112],"29":[2,179],"30":[3,188],"31":[2,131],"32":[2,193],"33":[2,341],"34":[2,243],"35":[2,154],"36":[3,191],"37":[2,213],"38":[3,160],"39":[2,186],"40":[2,273],"41":[2,217],"42":[2,224],"43":[2,159],"44":[1,354],"45":[2,121],"46":[3,157],"47":[3,152],"48":[2,133],"49":[2,169],"50":[3,165],"51":[2,129],"52":[2,100],"53":[2,232],"54":[2,168],"55":[3,149],"56":[2,123],"57":[2,173],"58":[2,104],"59":[2,122]},"averageFieldLength":[2.4,180.25],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> &lt; section class = \" action-bar \" > &lt; div class = \" action-bar-start u-flex u-gap-8 \" > &lt; span class = \" inline-tag is-info \" > &lt; span class = \" text \" > 4 &lt;/ span > &lt;/ span > &lt; span class = \" text \" > &lt; span class = \" is-not-mobile \" > documents &lt;/ span > selected &lt;/ span > &lt;/ div > &lt; div class = \" action-bar-end u-flex u-gap-8 \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Cancel &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Delete &lt; span class = \" is-not-mobile \" > selection &lt;/ span > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-standalone \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a standalone alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> &lt; section class = \" alert is-action \" > &lt; div class = \" alert-grid \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt;/ div > &lt; div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > &lt; button class = \" button is-text is-full-width-mobile \" > &lt; span class = \" text \" > Secondary call to action &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Call to action &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-info \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-standalone is-info \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a standalone alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> &lt; section class = \" alert is-action is-info \" > &lt; div class = \" alert-grid \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt;/ div > &lt; div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > &lt; button class = \" button is-text is-full-width-mobile \" > &lt; span class = \" text \" > Secondary call to action &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Call to action &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky is-info \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-success \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-standalone is-success \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a standalone alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> &lt; section class = \" alert is-action is-success \" > &lt; div class = \" alert-grid \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt;/ div > &lt; div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > &lt; button class = \" button is-text is-full-width-mobile \" > &lt; span class = \" text \" > Secondary call to action &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Call to action &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky is-success \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-warning \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-standalone is-warning \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a standalone alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> &lt; section class = \" alert is-action is-warning \" > &lt; div class = \" alert-grid \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt;/ div > &lt; div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > &lt; button class = \" button is-text is-full-width-mobile \" > &lt; span class = \" text \" > Secondary call to action &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Call to action &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky is-warning \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-danger \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> &lt; section class = \" alert is-standalone is-danger \" > &lt; div class = \" alert-grid \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a standalone alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt; div class = \" alert-buttons u-flex \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> &lt; section class = \" alert is-action is-danger \" > &lt; div class = \" alert-grid \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; div class = \" alert-content \" > &lt; h6 class = \" alert-title \" > This is a default alert &lt;/ h6 > &lt; p class = \" alert-message \" > Some description about the alert sent to the user. &lt;/ p > &lt;/ div > &lt; div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > &lt; button class = \" button is-text is-full-width-mobile \" > &lt; span class = \" text \" > Secondary call to action &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Call to action &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> &lt; section class = \" alert-sticky is-danger \" > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; div class = \" alert-sticky-image \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" alert-sticky-content \" > &lt; h4 class = \" alert-sticky-title \" > Alert Sticky Title &lt;/ h4 > &lt; p > Provide contextual feedback messages for typical user actions. &lt;/ p > &lt;/ div > &lt; div class = \" alert-sticky-buttons u-flex \" > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 1 &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-small \" > &lt; span class = \" text \" > Action 2 &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> &lt; div class = \" avatar is-color-empty \" > &lt;/ div > &lt; div class = \" avatar \" > aa &lt;/ div > &lt; div class = \" avatar \" > &lt; span class = \" icon-pencil \" > &lt;/ span > &lt;/ div > &lt; img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> &lt; div class = \" avatar is-size-x-small \" > aa &lt;/ div > &lt; div class = \" avatar is-size-small \" > aa &lt;/ div > &lt; div class = \" avatar is-size-medium \" > aa &lt;/ div > &lt; div class = \" avatar is-size-large \" > aa &lt;/ div > &lt; div class = \" avatar is-size-x-large \" > aa &lt;/ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> &lt; div class = \" avatar is-color-empty \" > aa &lt;/ div > &lt; div class = \" avatar \" > aa &lt;/ div > &lt; div class = \" avatar is-color-orange \" > aa &lt;/ div > &lt; div class = \" avatar is-color-green \" > aa &lt;/ div > &lt; div class = \" avatar is-color-blue \" > aa &lt;/ div > &lt; div class = \" avatar is-color-pink \" > aa &lt;/ div > &lt; div class = \" avatar is-color-red \" > aa &lt;/ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> &lt; ul class = \" avatars-group \" > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-x-small is-color-blue \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-x-small is-color-orange \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-x-small is-color-green \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-x-small \" > +2 &lt;/ div > &lt;/ li > &lt;/ ul > &lt; ul class = \" avatars-group \" > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-small is-color-blue \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-small is-color-orange \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-small is-color-green \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-small \" > +2 &lt;/ div > &lt;/ li > &lt;/ ul > &lt; ul class = \" avatars-group \" > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-color-blue \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-color-orange \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-color-green \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar \" > +2 &lt;/ div > &lt;/ li > &lt;/ ul > &lt; ul class = \" avatars-group \" > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-large is-color-blue \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-large is-color-orange \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-large is-color-green \" > aa &lt;/ div > &lt;/ li > &lt; li class = \" avatars-group-item \" > &lt; div class = \" avatar is-size-large \" > +2 &lt;/ div > &lt;/ li > &lt;/ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> &lt; ul class = \" clickable-list \" > &lt; li class = \" clickable-list-item \" > &lt; a href = \" / \" class = \" clickable-list-button \" > &lt; h5 class = \" clickable-list-title u-trim-1 \" > &lt; span class = \" \" > Cameron Williamson &lt;/ span > &lt; span class = \" clickable-list-title-sep \" > | &lt;/ span > &lt; span class = \" \" > One of the most visually innovative films of all times &lt;/ span > &lt;/ h5 > &lt; div class = \" clickable-list-desc \" > &lt; p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 &lt;/ p > &lt;/ div > &lt;/ a > &lt;/ li > &lt; li class = \" clickable-list-item \" > &lt; a href = \" / \" class = \" clickable-list-button \" > &lt; h5 class = \" clickable-list-title u-trim-1 \" > &lt; span class = \" \" > Cameron Williamson &lt;/ span > &lt; span class = \" clickable-list-title-sep \" > | &lt;/ span > &lt; span class = \" \" > One of the most visually innovative films of all times &lt;/ span > &lt;/ h5 > &lt; div class = \" clickable-list-desc \" > &lt; p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 &lt;/ p > &lt;/ div > &lt;/ a > &lt;/ li > &lt;/ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> &lt; section class = \" code-panel u-min-width-100-percent theme-dark \" > &lt; header class = \" code-panel-header \" > &lt; div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > &lt; button class = \" button is-text \" > &lt; span class = \" icon-external-link \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Raw data &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary is-disabled \" > &lt; span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Scroll to top &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ header > &lt; code class = \" code-panel-content grid-code \" > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > function = { &lt;/ pre > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > firstName: “hello” &lt;/ pre > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > } &lt;/ pre > &lt;/ code > &lt;/ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> &lt; code class = \" grid-code \" > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > function = { &lt;/ pre > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > firstName: “hello” &lt;/ pre > &lt; div class = \" grid-code-line-number \" > &lt;/ div > &lt; pre > } &lt;/ pre > &lt;/ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> &lt; ul class = \" collapsible u-width-full-line \" > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; span class = \" text \" > Options one &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; span class = \" text \" > Options two &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; span class = \" text \" > Option three &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt;/ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> &lt; ul class = \" collapsible u-width-full-line \" > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" open > &lt; summary class = \" collapsible-button \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > Advanced Options &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > &lt; div class = \" form \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" choice-item \" > &lt; input type = \" checkbox \" /> &lt; div class = \" choice-item-content \" > &lt; div class = \" choice-item-title \" > Subheading &lt;/ div > &lt; p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" choice-item \" > &lt; input type = \" checkbox \" /> &lt; div class = \" choice-item-content \" > &lt; div class = \" choice-item-title \" > Subheading &lt;/ div > &lt; p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" choice-item \" > &lt; input type = \" checkbox \" /> &lt; div class = \" choice-item-content \" > &lt; div class = \" choice-item-title \" > Subheading &lt;/ div > &lt; p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt;/ details > &lt;/ li > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > Advanced Options &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt; li class = \" collapsible-item \" > &lt; details class = \" collapsible-wrapper \" > &lt; summary class = \" collapsible-button \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > Advanced Options &lt;/ span > &lt; span class = \" collapsible-button-optional \" > (optional) &lt;/ span > &lt; div class = \" icon \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ summary > &lt; div class = \" collapsible-content \" > &lt; p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. &lt;/ p > &lt;/ div > &lt;/ details > &lt;/ li > &lt;/ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> &lt; div class = \" grid-box u-cross-start \" > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-block-end \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-block-end is-inline-end is-arrow-end \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> &lt; div class = \" grid-box u-cross-start \" > &lt; div class = \" u-flex \" style = \" min-inline-size : 12rem \" > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > &lt; div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-arrow-center \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > &lt; div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-arrow-end \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > &lt; div class = \" u-flex \" style = \" min-inline-size : 12rem \" > &lt; button class = \" button is-full-width is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-no-arrow \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> &lt; div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > &lt; div class = \" u-flex \" style = \" min-inline-size : 12rem \" > &lt; button class = \" button is-full-width is-text \" > &lt; span class = \" text \" > Text button &lt;/ span > &lt;/ button > &lt; div class = \" drop is-no-arrow \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; label class = \" drop-button \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ label > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; label class = \" drop-button \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ label > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> &lt; a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > &lt; div class = \" file-preview-image \" > &lt; img src = \" https://unsplash.it/600 \" alt = \" \" /> &lt;/ div > &lt; div class = \" file-preview-content \" > &lt; div class = \" avatar \" > &lt; span class = \" icon-external-link \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ div > &lt;/ a > &lt; a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > &lt; div class = \" file-preview-content \" > &lt; div class = \" avatar \" > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; p > Preview not available &lt;/ p > &lt;/ div > &lt;/ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> &lt; div class = \" card u-margin-auto \" > &lt; div class = \" grid-item-1 \" > &lt; div class = \" grid-item-1-start-start \" > &lt; div class = \" eyebrow-heading-3 \" > sub-header &lt;/ div > &lt; h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header &lt;/ h2 > &lt; p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > &lt; span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled &lt;/ span > &lt;/ p > &lt;/ div > &lt; div class = \" grid-item-1-start-end \" > &lt; div class = \" status is-complete \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Complete &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-start \" > &lt; div class = \" u-flex u-gap-16 u-flex-wrap \" > &lt; div class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-end \" > &lt; ul class = \" icons u-flex u-gap-8 \" > &lt; li > &lt; span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > &lt;/ span > &lt;/ li > &lt; li > &lt; span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > &lt;/ span > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt;/ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> &lt; ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > &lt; li > &lt; div class = \" card \" > &lt; div class = \" grid-item-1 \" > &lt; div class = \" grid-item-1-start-start \" > &lt; div class = \" eyebrow-heading-3 \" > sub-header &lt;/ div > &lt; h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header &lt;/ h2 > &lt; p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > &lt; span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled &lt;/ span > &lt;/ p > &lt;/ div > &lt; div class = \" grid-item-1-end-start \" > &lt; div class = \" u-flex u-gap-16 u-flex-wrap \" > &lt; div class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-end \" > &lt; ul class = \" icons u-flex u-gap-8 \" > &lt; li > &lt; span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > &lt;/ span > &lt;/ li > &lt; li > &lt; span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > &lt;/ span > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > &lt; div class = \" grid-item-1 \" > &lt; div class = \" grid-item-1-start-start \" > &lt; div class = \" eyebrow-heading-3 \" > sub-header &lt;/ div > &lt; h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header &lt;/ h2 > &lt; p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > &lt; span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled &lt;/ span > &lt;/ p > &lt;/ div > &lt; div class = \" grid-item-1-start-end \" > &lt; div class = \" status \" > &lt; button class = \" tag \" disabled > &lt; span class = \" text \" > Disabled &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-start \" > &lt; div class = \" u-flex u-gap-16 u-flex-wrap \" > &lt; div class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" grid-item-1-end-end \" > &lt; ul class = \" icons u-flex u-gap-8 \" > &lt; li > &lt; span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > &lt;/ span > &lt;/ li > &lt; li > &lt; span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > &lt;/ span > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ li > &lt;/ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> &lt; div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > &lt; span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" u-trim u-stretch \" > Provide contextual message &lt;/ span > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> &lt; div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > &lt; div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > &lt;/ div > &lt; span class = \" u-trim u-stretch \" > Provide contextual message &lt;/ span > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> &lt; div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > &lt; span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" u-trim u-stretch \" > Provide contextual message &lt;/ span > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> &lt; div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > &lt; span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" u-trim u-stretch \" > Provide contextual message &lt;/ span > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> &lt; div class = \" boxes-wrapper \" > &lt; div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > &lt; span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" u-trim u-stretch \" > Provide contextual message &lt;/ span > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt; div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > &lt; div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > &lt;/ div > &lt; span class = \" u-trim u-stretch \" > Provide contextual message &lt;/ span > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt; div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > &lt; span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" u-trim u-stretch \" > Provide contextual message &lt;/ span > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> &lt; ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > &lt; li > &lt; label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; div class = \" u-flex u-gap-16 \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> &lt; div class = \" u-flex u-flex-vertical u-gap-4 \" > &lt; h4 class = \" body-text-2 u-bold \" > Pro plan &lt;/ h4 > &lt; p class = \" u-color-text-gray \" > For projects you want to scale easily. &lt; b > $25/month + Add-ons &lt;/ b > &lt;/ p > &lt;/ div > &lt; span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li > &lt; label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; div class = \" u-flex u-gap-16 \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> &lt; div class = \" u-flex u-flex-vertical u-gap-4 \" > &lt; h4 class = \" body-text-2 u-bold \" > Free plan &lt;/ h4 > &lt; p class = \" u-color-text-gray \" > For personal, passion projects. &lt; b > Totally free &lt;/ b > &lt;/ p > &lt;/ div > &lt; span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li > &lt; label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; div class = \" u-flex u-gap-16 \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> &lt; div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > &lt; h4 class = \" body-text-2 u-bold \" > Disabled plan &lt;/ h4 > &lt; p class = \" u-color-text-gray \" > &lt; b > Unlimited &lt;/ b > &lt;/ p > &lt;/ div > &lt; span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ label > &lt;/ li > &lt;/ ul > Region Cards Preview HTML Netherlands Notify me Netherlands Netherlands Netherlands Netherlands Netherlands Singapore Netherlands Notify me Netherlands Netherlands Netherlands Netherlands Netherlands Singapore \"> &lt; ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > &lt; li > &lt; label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> &lt; div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > &lt; img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> &lt; p class = \" u-opacity-20 \" > Netherlands &lt;/ p > &lt; button class = \" tag u-cross-child-center \" > &lt; span class = \" icon-bell \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Notify me &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li > &lt; label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> &lt; div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > &lt; img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> &lt; p > Netherlands &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li > &lt; label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> &lt; div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > &lt; img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> &lt; p > Netherlands &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li > &lt; label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> &lt; div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > &lt; img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> &lt; p > Netherlands &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li > &lt; label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> &lt; div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > &lt; img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> &lt; p > Netherlands &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li > &lt; label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> &lt; div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > &lt; img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> &lt; p > Netherlands &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt; li > &lt; label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > &lt; input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> &lt; div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > &lt; img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> &lt; p > Singapore &lt;/ p > &lt;/ div > &lt;/ label > &lt;/ li > &lt;/ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> &lt; button class = \" button \" > &lt; span > Open Modal &lt;/ span > &lt;/ button > &lt; dialog class = \" modal \" id = \" dialog \" > &lt; form class = \" modal-form \" method = \" dialog \" > &lt; header class = \" modal-header \" > &lt; div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > &lt; div class = \" avatar is-color-orange is-medium \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; h4 class = \" modal-title heading-level-5 \" > Modal title &lt;/ h4 > &lt; button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ header > &lt; div class = \" modal-content u-small \" > Modal label text. &lt;/ div > &lt; div class = \" modal-footer \" > &lt; div class = \" u-flex u-main-end u-gap-16 \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ form > &lt;/ dialog > To open or close a modal, use the native &lt;dialog&gt; element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> &lt; dialog id = \" dialog4 \" class = \" modal is-small \" open > &lt; form class = \" modal-form \" method = \" dialog \" > &lt; header class = \" modal-header \" > &lt; div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > &lt; h4 class = \" modal-title heading-level-5 \" > Modal title &lt;/ h4 > &lt; button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ header > &lt; div class = \" modal-content u-small \" > Modal label text. &lt;/ div > &lt; div class = \" modal-footer \" > &lt; div class = \" u-flex u-main-end u-gap-16 \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ form > &lt;/ dialog > &lt; dialog id = \" dialog5 \" class = \" modal is-big \" open > &lt; form class = \" modal-form \" method = \" dialog \" > &lt; header class = \" modal-header \" > &lt; div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > &lt; h4 class = \" modal-title heading-level-5 \" > Modal title &lt;/ h4 > &lt; button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ header > &lt; div class = \" modal-content u-small \" > Modal label text. &lt;/ div > &lt; div class = \" modal-footer \" > &lt; div class = \" u-flex u-main-end u-gap-16 \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ form > &lt;/ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> &lt; dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > &lt; form class = \" modal-form \" method = \" dialog \" > &lt; header class = \" modal-header \" > &lt; div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > &lt; h4 class = \" modal-title heading-level-5 \" > Modal title &lt;/ h4 > &lt; button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt; p > Provide contextual feedback messages for complex modals. &lt;/ p > &lt;/ header > &lt; div class = \" modal-content \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > &lt; input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> &lt; button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > &lt; input type = \" text \" placeholder = \" Placeholder \" /> &lt; div class = \" options-list \" > &lt; button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ div > &lt; div class = \" modal-footer \" > &lt; div class = \" u-flex u-main-end u-gap-16 \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ form > &lt;/ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> &lt; section class = \" progress-bar \" > &lt; div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > &lt; h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > &lt; span class = \" icon-chart-bar \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Bandwidth &lt;/ span > &lt;/ h3 > &lt; p class = \" u-medium u-bold \" > 50% &lt;/ p > &lt;/ div > &lt; div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > &lt;/ div > &lt; div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > &lt; span class = \" progress-bar-text-used \" > 50.01GB &lt;/ span > &lt; span class = \" progress-bar-text-max \" > 100GB &lt;/ span > &lt;/ div > &lt;/ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> &lt; ul class = \" u-flex-vertical u-gap-24 \" > &lt; li > &lt; section class = \" progress-bar \" > &lt; div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > &lt; h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > &lt; span class = \" icon-chart-bar \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Bandwidth &lt;/ span > &lt;/ h3 > &lt; p class = \" u-medium u-bold \" > 50% &lt;/ p > &lt;/ div > &lt; div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > &lt;/ div > &lt; div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > &lt; span class = \" progress-bar-text-used \" > 50.01GB &lt;/ span > &lt; span class = \" progress-bar-text-max \" > 100GB &lt;/ span > &lt;/ div > &lt;/ section > &lt;/ li > &lt; li > &lt; section class = \" progress-bar \" > &lt; div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > &lt; h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > &lt; span class = \" icon-folder \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Storage &lt;/ span > &lt;/ h3 > &lt; p class = \" u-medium u-bold u-color-text-warning \" > 85% &lt;/ p > &lt;/ div > &lt; div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > &lt;/ div > &lt; div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > &lt; span class = \" progress-bar-text-used \" > 50.01GB &lt;/ span > &lt; span class = \" progress-bar-text-max \" > 100GB &lt;/ span > &lt;/ div > &lt;/ section > &lt;/ li > &lt; li > &lt; section class = \" progress-bar \" > &lt; div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > &lt; h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > &lt; span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Compute &lt;/ span > &lt;/ h3 > &lt; p class = \" u-medium u-bold u-color-text-danger \" > 105% &lt;/ p > &lt;/ div > &lt; div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > &lt;/ div > &lt; div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > &lt; span class = \" progress-bar-text-used \" > 3.50hrs &lt;/ span > &lt; span class = \" progress-bar-text-max \" > 100hrs &lt;/ span > &lt;/ div > &lt;/ section > &lt;/ li > &lt;/ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> &lt; ul class = \" secondary-tabs \" > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" disabled > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> &lt; ul class = \" secondary-tabs is-large \" > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" disabled > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" secondary-tabs-item \" > &lt; button class = \" secondary-tabs-button \" > &lt; span class = \" text \" > Item &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> &lt; div class = \" tabs \" style = \" width : 350px \" > &lt; button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > &lt; span class = \" icon-cheveron-left \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > &lt; span class = \" icon-cheveron-right \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; ul class = \" tabs-list \" > &lt; li class = \" tabs-item \" > &lt; a class = \" tabs-button is-selected \" href = \" # \" > &lt; span class = \" text \" > Overview &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" tabs-item \" > &lt; a class = \" tabs-button \" href = \" # \" > &lt; span class = \" text \" > Sessions &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" tabs-item \" > &lt; a class = \" tabs-button \" href = \" # \" > &lt; span class = \" text \" > Activity &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" tabs-item \" > &lt; a class = \" tabs-button \" href = \" # \" > &lt; span class = \" text \" > Settings &lt;/ span > &lt;/ a > &lt;/ li > &lt;/ ul > &lt;/ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> &lt; div class = \" toggle-button \" > &lt; ul class = \" toggle-button-list \" > &lt; li class = \" toggle-button-item \" > &lt; button class = \" toggle-button-element \" aria-label = \" List View \" > &lt; span class = \" icon-view-list \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" toggle-button-item \" > &lt; button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > &lt; span class = \" icon-view-grid \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> &lt; div class = \" toggle-button \" > &lt; ul class = \" toggle-button-list \" > &lt; li class = \" toggle-button-item \" > &lt; button class = \" toggle-button-element \" disabled aria-label = \" List View \" > &lt; span class = \" icon-view-list \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" toggle-button-item \" > &lt; button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > &lt; span class = \" icon-view-grid \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> &lt; div class = \" toggle-button \" > &lt; ul class = \" toggle-button-list \" > &lt; li class = \" toggle-button-item \" > &lt; button class = \" toggle-button-element tooltip \" > &lt; span class = \" icon-view-list \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" toggle-button-item \" > &lt; button class = \" toggle-button-element is-selected tooltip \" > &lt; span class = \" icon-view-grid \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt; br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp;amp; % hello.mp4 &amp;amp; % hello.mp4 &amp;amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> &lt; section class = \" upload-box u-width-full-line \" > &lt; header class = \" upload-box-header \" > &lt; h4 class = \" upload-box-title \" > &lt; span class = \" text \" > File Uploads &lt;/ span > &lt; span class = \" amount \" > 3 &lt;/ span > &lt;/ h4 > &lt; button class = \" upload-box-button \" aria-label = \" toggle upload box \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" upload-box-button \" aria-label = \" close upload box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ header > &lt; div class = \" upload-box-content \" > &lt; ul class = \" upload-box-list \" > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image \" > &lt; div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon \" > % &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > hello.mp4 &lt;/ label > &lt; button class = \" upload-box-button \" aria-label = \" Uploading \" > &lt; span class = \" icon \" > &amp;amp; &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image \" > &lt; div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon \" > % &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > hello.mp4 &lt;/ label > &lt; button class = \" upload-box-button \" aria-label = \" Uploading \" > &lt; span class = \" icon \" > &amp;amp; &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image is-finished \" > &lt; div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon \" > % &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > hello.mp4 &lt;/ label > &lt; button class = \" upload-box-button \" aria-label = \" Uploading \" > &lt; span class = \" icon \" > &amp;amp; &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ section > &lt; section class = \" upload-box u-width-full-line \" > &lt; header class = \" upload-box-header \" > &lt; h4 class = \" upload-box-title \" > &lt; span class = \" text \" > File Uploads &lt;/ span > &lt; span class = \" amount \" > 3 &lt;/ span > &lt;/ h4 > &lt; button class = \" upload-box-button \" aria-label = \" toggle upload box \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" upload-box-button \" aria-label = \" close upload box \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ header > &lt; div class = \" upload-box-content is-open \" > &lt; ul class = \" upload-box-list \" > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image \" > &lt; div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" text \" > 30% &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > &lt; p class = \" text u-margin-block-start-8 \" > hello.mp4 &lt;/ p > &lt;/ label > &lt; div class = \" tag is-warning \" > pending &lt;/ div > &lt; button class = \" upload-box-button \" aria-label = \" cancel upload \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image \" > &lt; div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" text \" > 60% &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > &lt; p class = \" text u-margin-block-start-8 \" > hello.mp4 &lt;/ p > &lt;/ label > &lt; div class = \" tag is-danger \" > failed &lt;/ div > &lt; button class = \" upload-box-button \" aria-label = \" cancel upload \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" upload-box-item \" > &lt; div class = \" upload-image is-finished u-margin-inline-end-16 \" > &lt; div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; label for = \" file1 \" class = \" file-name \" > &lt; p class = \" text u-margin-block-start-8 \" > hello.mp4 &lt;/ p > &lt;/ label > &lt; button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > &lt; span class = \" icon-check \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> &lt; div class = \" upload-image \" > &lt; div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > &lt;/ div > &lt; span class = \" icon \" > &lt;/ span > &lt;/ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> &lt; div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > &lt; div class = \" upload-file-box \" > &lt; div class = \" upload-file-box-image \" > &lt; span class = \" icon-upload \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" u-min-width-0 u-text-center \" > &lt; h5 class = \" upload-file-box-title heading-level-7 u-inline \" > &lt; span class = \" is-only-desktop \" > Drag and drop files here to upload &lt;/ span > &lt; span class = \" is-not-desktop \" > Upload a File &lt;/ span > &lt;/ h5 > &lt; button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. &lt;/ span > &lt;/ button > &lt;/ div > &lt; div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > &lt; p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB &lt;/ p > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Choose a file &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> &lt; div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > &lt; div class = \" upload-file-box \" > &lt; div class = \" upload-file-box-image \" > &lt; span class = \" icon-upload \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" u-min-width-0 u-text-center \" > &lt; h5 class = \" upload-file-box-title heading-level-7 u-inline \" > &lt; span class = \" is-only-desktop \" > Drag and drop files here to upload &lt;/ span > &lt; span class = \" is-not-desktop \" > Upload a File &lt;/ span > &lt;/ h5 > &lt; button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. &lt;/ span > &lt;/ button > &lt;/ div > &lt; div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > &lt; p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB &lt;/ p > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Choose a file &lt;/ span > &lt;/ button > &lt;/ div > &lt; ul class = \" upload-file-box-list u-min-width-0 \" > &lt; li class = \" u-flex u-cross-center u-min-width-0 \" > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover &lt;/ span > &lt; span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png &lt;/ span > &lt; span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB &lt;/ span > &lt; button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> &lt; div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > &lt; div class = \" upload-file-box \" > &lt; div class = \" upload-file-box-image \" > &lt; span class = \" icon-upload \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt; div class = \" u-min-width-0 u-text-center \" > &lt; h5 class = \" upload-file-box-title heading-level-7 u-inline \" > &lt; span class = \" is-only-desktop \" > Drag and drop files here to upload &lt;/ span > &lt; span class = \" is-not-desktop \" > Upload a File &lt;/ span > &lt;/ h5 > &lt; button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. &lt;/ span > &lt;/ button > &lt;/ div > &lt; div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > &lt; p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB &lt;/ p > &lt; button class = \" button is-secondary is-full-width-mobile \" > &lt; span class = \" text \" > Choose a file &lt;/ span > &lt;/ button > &lt;/ div > &lt; ul class = \" upload-file-box-list u-min-width-0 \" > &lt; li class = \" u-flex u-cross-center u-min-width-0 \" > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover &lt;/ span > &lt; span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png &lt;/ span > &lt; span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB &lt;/ span > &lt; button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt;/ div > &lt; p class = \" helper u-color-text-danger u-margin-block-start-8 \" > &lt; span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Display a contextual error message here &lt;/ span > &lt;/ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> &lt; div class = \" card \" > &lt; div class = \" user-profile \" > &lt; span class = \" avatar \" > UN &lt;/ span > &lt; span class = \" user-profile-info \" > &lt; span class = \" name \" > User Name &lt;/ span > &lt; div class = \" interactive-text-output u-padding-inline-0 \" > &lt; span class = \" text \" > User ID &lt;/ span > &lt; div class = \" u-flex u-cross-child-start u-gap-8 \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ span > &lt; span class = \" user-profile-sep \" > &lt;/ span > &lt; span class = \" user-profile-empty-column \" > &lt;/ span > &lt; span class = \" user-profile-info \" > &lt; span class = \" text \" > Extra description &lt;/ span > &lt;/ span > &lt;/ div > &lt;/ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> &lt; div class = \" box \" > Box element &lt;/ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> &lt; div class = \" boxes-wrapper \" > &lt; div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box &lt;/ div > &lt; div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box &lt;/ div > &lt; div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box &lt;/ div > &lt; div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box &lt;/ div > &lt;/ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> &lt; button class = \" button \" > &lt; span class = \" text \" > Primary &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > Secondary &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Text &lt;/ span > &lt;/ button > &lt; button class = \" button is-only-icon \" aria-label = \" Add new item \" > &lt; span class = \" icon-plus \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> &lt; button class = \" button \" > &lt; span class = \" text \" > Medium &lt;/ span > &lt;/ button > &lt; button class = \" button is-big \" > &lt; span class = \" text \" > Large &lt;/ span > &lt;/ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-plus \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-cheveron-left \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" text \" > Button &lt;/ span > &lt; span class = \" icon-cheveron-right \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-download \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" aria-label = \" Add new item \" > &lt; span class = \" icon-external-link \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Button &lt;/ span > &lt;/ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> &lt; ul class = \" buttons-list u-margin-auto \" > &lt; li class = \" buttons-list-item \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" buttons-list-item \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" buttons-list-item \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button 3 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" buttons-list-item \" > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > Button 4 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> &lt; article class = \" card \" > &lt;/ article > &lt; article class = \" card is-border-dashed \" > &lt;/ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> &lt; label class = \" card is-allow-focus u-flex u-gap-8 \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > some text &lt;/ span > &lt;/ label > &lt; label class = \" card is-allow-focus u-flex u-gap-8 \" > &lt; input type = \" checkbox \" /> &lt; span class = \" text \" > some text &lt;/ span > &lt;/ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> &lt; input type = \" checkbox \" /> &lt; input type = \" checkbox \" checked = \" true \" /> &lt; input type = \" checkbox \" class = \" js-indeterminate \" /> &lt; script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) &lt;/ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> &lt; input type = \" checkbox \" disabled /> &lt; input type = \" checkbox \" checked = \" true \" disabled /> &lt; input type = \" checkbox \" disabled class = \" js-indeterminate \" /> &lt; script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) &lt;/ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> &lt; input type = \" checkbox \" class = \" is-small \" /> &lt; input type = \" checkbox \" /> &lt; input type = \" checkbox \" class = \" is-large \" /> &lt; br /> &lt; input type = \" checkbox \" class = \" is-small js-indeterminate \" /> &lt; input type = \" checkbox \" class = \" js-indeterminate \" /> &lt; input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> &lt; code class = \" inline-code \" > keyword or part of a code &lt;/ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> &lt; span class = \" inline-tag \" > &lt; span class = \" text \" > 4 &lt;/ span > &lt;/ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> &lt; span class = \" inline-tag is-info \" > &lt; span class = \" text \" > 2 &lt;/ span > &lt;/ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> &lt; button class = \" button is-secondary \" > &lt; span class = \" text \" > button &lt;/ span > &lt; span class = \" inline-tag \" > &lt; span class = \" text \" > 4 &lt;/ span > &lt;/ span > &lt;/ button > &lt; button class = \" button is-secondary \" disabled > &lt; span class = \" text \" > button &lt;/ span > &lt; span class = \" inline-tag \" > &lt; span class = \" text \" > 4 &lt;/ span > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" > &lt; span class = \" text \" > button &lt;/ span > &lt; span class = \" inline-tag \" > &lt; span class = \" text \" > 4 &lt;/ span > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text \" disabled > &lt; span class = \" text \" > button &lt;/ span > &lt; span class = \" inline-tag \" > &lt; span class = \" text \" > 4 &lt;/ span > &lt;/ span > &lt;/ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" input-text-wrapper \" > &lt; input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> &lt; div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > &lt; input type = \" search \" placeholder = \" Search \" /> &lt; div class = \" icon-search \" aria-hidden = \" true \" > &lt;/ div > &lt; button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > &lt; input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> &lt; button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > &lt; input type = \" text \" placeholder = \" Placeholder \" /> &lt; div class = \" options-list \" > &lt; button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > &lt; input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> &lt; button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > &lt; span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > &lt; span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Disabled &lt;/ label > &lt; div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > &lt; input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> &lt; button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > &lt; span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > &lt; span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" tags-input \" > &lt; div class = \" tags \" > &lt; ul class = \" tags-list \" > &lt; li class = \" tags-item \" > &lt; div class = \" input-tag \" > &lt; span class = \" tag-text \" > role &lt; div > &lt;/ div > &lt;/ span > &lt; button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ div > &lt; input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" select u-width-full-line \" > &lt; select name = \" pets \" id = \" pet-select \" > &lt; option value = \" \" > Select option &lt;/ option > &lt; option value = \" 1 \" > Option 1 &lt;/ option > &lt; option value = \" 2 \" > Option 2 &lt;/ option > &lt; option value = \" 3 \" > Option 3 &lt;/ option > &lt; option value = \" 4 \" > Option 4 &lt;/ option > &lt; option value = \" 5 \" > Option 5 &lt;/ option > &lt; option value = \" 6 \" > Option 6 &lt;/ option > &lt;/ select > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ li > &lt;/ ul > &lt;/ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" custom-select is-open \" > &lt; button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > &lt; span class = \" input-text \" > &lt; span class = \" text \" > Placeholder &lt;/ span > &lt;/ span > &lt; div class = \" options-list is-no-separator \" > &lt; div class = \" options-list-button \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ div > &lt;/ div > &lt;/ button > &lt; div class = \" drop is-block-end is-no-arrow \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ li > &lt;/ ul > &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt;/ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" custom-select is-open \" > &lt; div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > &lt; input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> &lt; div class = \" options-list \" > &lt; button class = \" options-list-button u-hide \" aria-label = \" clear field \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" options-list-button \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt; div class = \" drop is-block-end is-no-arrow \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 1 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; span class = \" text \" > Item 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ li > &lt;/ ul > &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt;/ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" custom-select is-open \" > &lt; div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > &lt; input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> &lt; div class = \" options-list \" > &lt; button class = \" options-list-button \" aria-label = \" clear field \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" options-list-button \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt; div class = \" drop is-block-end is-no-arrow \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; div class = \" u-flex u-cross-baseline u-gap-12 \" > &lt; span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 &lt;/ span > &lt; span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, &lt; a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com &lt;/ a > , bessiecooper.com &lt;/ span > &lt;/ div > &lt;/ button > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; button class = \" drop-button \" > &lt; div class = \" u-flex u-cross-baseline u-gap-12 \" > &lt; span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 &lt;/ span > &lt; span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, &lt; a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com &lt;/ a > , playingball.com &lt;/ span > &lt;/ div > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ li > &lt;/ ul > &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt;/ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; div class = \" custom-select \" > &lt; div class = \" input-text-wrapper \" > &lt; input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> &lt; div class = \" options-list \" > &lt; button class = \" options-list-button u-hide \" aria-label = \" clear field \" > &lt; span class = \" icon-x \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" options-list-button \" > &lt; span class = \" icon-cheveron-down \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt; div class = \" drop is-block-end is-no-arrow \" > &lt; section class = \" drop-section \" > &lt; div class = \" u-flex u-flex-vertical u-cross-center \" > &lt; div > &lt; img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> &lt; img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> &lt;/ div > &lt; div class = \" u-text-center u-margin-block-start-4 \" > &lt; h2 class = \" body-text-2 u-bold u-trim-1 \" > &lt; span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ &lt;/ span > &lt;/ h2 > &lt; p class = \" text \" > There are no documents that match your search. &lt;/ p > &lt;/ div > &lt; div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > &lt; button class = \" button is-secondary \" type = \" button \" > &lt; span class = \" text \" > Clear Search &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ section > &lt;/ div > &lt;/ div > &lt;/ li > &lt;/ ul > &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt; br /> &lt;/ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; textarea class = \" input-text \" placeholder = \" Type here... \" > &lt;/ textarea > &lt;/ li > &lt;/ ul > &lt;/ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label \" > Label &lt;/ label > &lt; input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> &lt;/ li > &lt;/ ul > &lt;/ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> &lt; p class = \" helper \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is a helper &lt;/ span > &lt;/ p > &lt; p class = \" helper u-color-text-success \" > &lt; span class = \" icon-check-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is success &lt;/ span > &lt;/ p > &lt; p class = \" helper u-color-text-warning \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is a warning &lt;/ span > &lt;/ p > &lt; p class = \" helper u-color-text-danger \" > &lt; span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is an error &lt;/ span > &lt;/ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> &lt; form class = \" form u-width-full-line u-max-width-500 \" > &lt; ul class = \" form-list \" > &lt; li class = \" form-item \" > &lt; label class = \" label is-required \" > Label &lt;/ label > &lt; span class = \" optional \" > (optional) &lt;/ span > &lt; button class = \" tooltip \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > &lt; p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. &lt;/ p > &lt;/ span > &lt;/ button > &lt; div class = \" input-text-wrapper \" > &lt; input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> &lt; span class = \" text-counter \" > &lt; span class = \" text-counter-count \" > 4 &lt;/ span > &lt; span class = \" text-counter-separator \" > &lt;/ span > &lt; span class = \" text-counter-max \" > 20 &lt;/ span > &lt;/ span > &lt;/ div > &lt; p class = \" helper u-color-text-warning u-margin-block-start-8 \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is a warning &lt;/ span > &lt;/ p > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label is-required \" > Label &lt;/ label > &lt; span class = \" optional \" > (optional) &lt;/ span > &lt; button class = \" tooltip \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > &lt; p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. &lt;/ p > &lt;/ span > &lt;/ button > &lt; div class = \" input-text-wrapper \" > &lt; input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> &lt; ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > &lt; li class = \" buttons-list-item \" > &lt; span class = \" text-counter \" > &lt; span class = \" text-counter-count \" > 4 &lt;/ span > &lt; span class = \" text-counter-separator \" > &lt;/ span > &lt; span class = \" text-counter-max \" > 20 &lt;/ span > &lt;/ span > &lt;/ li > &lt; li class = \" buttons-list-item u-margin-inline-start-8 \" > &lt; label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > &lt; input type = \" checkbox \" class = \" is-small \" /> &lt; span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL &lt;/ span > &lt;/ label > &lt;/ li > &lt;/ ul > &lt;/ div > &lt; p class = \" helper u-color-text-warning u-margin-block-start-8 \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is a warning &lt;/ span > &lt;/ p > &lt;/ li > &lt; li class = \" form-item \" > &lt; label class = \" label is-required \" > Label &lt;/ label > &lt; span class = \" optional \" > (optional) &lt;/ span > &lt; button class = \" tooltip \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > &lt; p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. &lt;/ p > &lt;/ span > &lt;/ button > &lt; div class = \" input-text-wrapper \" > &lt; textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > &lt;/ textarea > &lt; ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > &lt; li class = \" buttons-list-item \" > &lt; span class = \" text-counter \" > &lt; span class = \" text-counter-count \" > 4 &lt;/ span > &lt; span class = \" text-counter-separator \" > &lt;/ span > &lt; span class = \" text-counter-max \" > 20 &lt;/ span > &lt;/ span > &lt;/ li > &lt; li class = \" buttons-list-item u-margin-inline-start-8 \" > &lt; label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > &lt; input type = \" checkbox \" class = \" is-small \" /> &lt; span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL &lt;/ span > &lt;/ label > &lt;/ li > &lt;/ ul > &lt;/ div > &lt; p class = \" helper u-color-text-warning u-margin-block-start-8 \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > This is a warning &lt;/ span > &lt;/ p > &lt;/ li > &lt;/ ul > &lt;/ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> &lt; p class = \" text u-margin-block-start-8 \" > To open search box please press &lt; kbd class = \" kbd \" > ⌘ &lt;/ kbd > + &lt; kbd class = \" kbd \" > K &lt;/ kbd > buttons. &lt;/ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> &lt; ul class = \" list \" > &lt; li class = \" list-item \" > &lt; span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > List Item &lt;/ span > &lt;/ li > &lt; li class = \" list-item \" > &lt; span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > &lt;/ span > &lt; a href = \" # \" class = \" link \" > &lt; span class = \" text \" > List Item (link) &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" list-item \" > &lt; span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > &lt;/ span > &lt; button class = \" link \" > &lt; span class = \" text \" > List Item (button) &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> &lt; ul class = \" list \" > &lt; li class = \" list-item \" > &lt; span class = \" icon-check \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > List Item &lt;/ span > &lt;/ li > &lt; li class = \" list-item \" > &lt; span class = \" icon-check \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > List Item &lt;/ span > &lt;/ li > &lt; li class = \" list-item \" > &lt; span class = \" icon-check \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > List Item &lt;/ span > &lt;/ li > &lt;/ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> &lt; ol class = \" numeric-list \" > &lt; li class = \" numeric-list-item \" > &lt; span class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Numeric List Item &lt;/ p > &lt;/ span > &lt;/ li > &lt; li class = \" numeric-list-item \" > &lt; span class = \" text \" > &lt; p class = \" text u-margin-block-start-8 \" > Numeric List Item &lt;/ p > &lt;/ span > &lt;/ li > &lt; li class = \" numeric-list-item \" > &lt; span class = \" text \" > Numeric List Item &lt;/ span > &lt;/ li > &lt;/ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> &lt; div class = \" loader \" > &lt;/ div > Small Loader Preview HTML \"> &lt; div class = \" loader is-small \" > &lt;/ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> &lt; div class = \" interactive-text-output \" > &lt; span class = \" text u-break-word \" > visible text &lt;/ span > &lt; div class = \" interactive-text-output-buttons \" > &lt; button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt; div class = \" interactive-text-output \" > &lt; span class = \" text \" > •••••• &lt;/ span > &lt; div class = \" interactive-text-output-buttons \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> &lt; div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > &lt; span class = \" text u-trim-start \" > This is the visible text which is very long &lt;/ span > &lt; div class = \" interactive-text-output-buttons \" > &lt; button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> &lt; div class = \" interactive-text-output is-textarea \" > &lt; span class = \" text u-line-height-1-5 u-break-word \" > &lt; p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi &lt;/ p > &lt;/ span > &lt; div class = \" interactive-text-output-buttons \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> &lt; input type = \" radio \" name = \" radio-1 \" /> &lt; input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> &lt; input type = \" radio \" name = \" radio-2 \" disabled /> &lt; input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> &lt; input type = \" radio \" class = \" is-small \" name = \" size \" /> &lt; input type = \" radio \" name = \" size \" checked = \" true \" /> &lt; input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> &lt; div class = \" status \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Ready &lt;/ span > &lt;/ div > &lt; div class = \" status is-waiting \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Waiting &lt;/ span > &lt;/ div > &lt; div class = \" status is-pending \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Pending &lt;/ span > &lt;/ div > &lt; div class = \" status is-failed \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Failed &lt;/ span > &lt;/ div > &lt; div class = \" status is-complete \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Complete &lt;/ span > &lt;/ div > &lt; div class = \" status is-processing \" > &lt; span class = \" status-icon \" > &lt;/ span > &lt; span class = \" text \" > Processing &lt;/ span > &lt;/ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> &lt; input type = \" checkbox \" class = \" switch \" /> &lt; input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> &lt; input type = \" checkbox \" class = \" switch \" disabled /> &lt; input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> &lt; input type = \" checkbox \" class = \" switch is-small \" /> &lt; input type = \" checkbox \" class = \" switch \" checked = \" true \" /> &lt; input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> &lt; table class = \" table is-selected-columns-mobile \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" > &lt; span class = \" eyebrow-heading-3 \" > Filename &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > &lt; span class = \" eyebrow-heading-3 \" > Type &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > &lt; span class = \" eyebrow-heading-3 \" > Size &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > &lt; span class = \" eyebrow-heading-3 \" > Created &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ td > &lt; td class = \" table-col \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ td > &lt; td class = \" table-col \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> &lt; table class = \" table is-table-row-medium-size \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" > &lt; span class = \" eyebrow-heading-3 \" > Filename &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > &lt; span class = \" eyebrow-heading-3 \" > Type &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > &lt; span class = \" eyebrow-heading-3 \" > Size &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > &lt; span class = \" eyebrow-heading-3 \" > Created &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ td > &lt; td class = \" table-col \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ td > &lt; td class = \" table-col is-only-desktop \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ td > &lt; td class = \" table-col \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> &lt; section class = \" card \" > &lt; table class = \" table is-remove-outer-styles \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" > &lt; span class = \" eyebrow-heading-3 \" > Name &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" > &lt; span class = \" eyebrow-heading-3 \" > Value &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Lorem &lt;/ span > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" data-title = \" value \" > &lt; div class = \" interactive-text-output \" > &lt; span class = \" text \" > Numquam exercitationem. &lt;/ span > &lt; div class = \" u-flex u-cross-child-start u-gap-8 \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > &lt; span class = \" icon-eye-off \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" data-title = \" options \" > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Ipsum &lt;/ span > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" data-title = \" value \" > &lt; div class = \" interactive-text-output \" > &lt; span class = \" text \" > •••••• &lt;/ span > &lt; div class = \" u-flex u-cross-child-start u-gap-8 \" > &lt; button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > &lt; span class = \" icon-eye \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" interactive-text-output-button \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ td > &lt; td class = \" table-col u-overflow-visible \" data-title = \" options \" > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > &lt; div class = \" u-flex u-margin-block-start-16 \" > &lt; button class = \" button is-text u-padding-inline-0 \" type = \" button \" > &lt; span class = \" icon-plus \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Create variable &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> &lt; div class = \" table-with-scroll \" > &lt; div class = \" table-wrapper \" > &lt; table class = \" table is-sticky-scroll \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > &lt; span class = \" eyebrow-heading-3 \" > Document ID &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Name &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Year &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Stars[] &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Directions[] &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Duration[] &lt;/ span > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > &lt;/ div > &lt;/ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> &lt; div class = \" table-with-scroll \" > &lt; div class = \" table-wrapper \" > &lt; table class = \" table is-sticky-scroll \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" style = \" \" > &lt; div class = \" u-flex u-cross-center u-gap-16 \" > &lt; label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > &lt; div class = \" u-padding-16 u-margin-16-negative \" > &lt; input type = \" checkbox \" /> &lt;/ div > &lt;/ label > &lt; span class = \" eyebrow-heading-3 \" > Collection ID &lt;/ span > &lt;/ div > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" \" > &lt; span class = \" eyebrow-heading-3 \" > Name &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" \" > &lt; span class = \" eyebrow-heading-3 \" > Updated &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Created &lt;/ span > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Collection ID \" > &lt; div class = \" u-flex u-cross-center u-gap-16 \" > &lt; label class = \" u-flex u-cursor-pointer \" > &lt; div class = \" u-padding-16 u-margin-16-negative \" > &lt; input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> &lt;/ div > &lt;/ label > &lt; div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > &lt; div class = \" text u-trim \" > 637a40ba7a703e3936e1 &lt;/ div > &lt; div class = \" interactive-text-output-buttons \" > &lt; button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ div > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Movie &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Updated \" > &lt; time class = \" text \" > May 3, 2023, 17:32 &lt;/ time > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Created \" > &lt; time class = \" text \" > May 3, 2023, 16:59 &lt;/ time > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > &lt;/ div > &lt;/ div > Scrolling tables without a sticky column should be wrapped by &lt;div class=&quot;table-with-scroll&quot;&gt; and &lt;div class=&quot;table-wrapper&quot;&gt; . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> &lt; div class = \" table-with-scroll \" > &lt; div class = \" table-wrapper \" > &lt; table class = \" table \" > &lt; thead class = \" table-thead \" > &lt; tr class = \" table-row \" > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > &lt; span class = \" eyebrow-heading-3 \" > Document ID &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Name &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Year &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Stars[] &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Directions[] &lt;/ span > &lt;/ th > &lt; th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > &lt; span class = \" eyebrow-heading-3 \" > Duration[] &lt;/ span > &lt;/ th > &lt;/ tr > &lt;/ thead > &lt; tbody class = \" table-tbody \" > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt; tr class = \" table-row \" > &lt; td class = \" table-col \" data-title = \" Document ID \" > &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > …y-first-collection &lt;/ span > &lt;/ button > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Name \" > &lt; span class = \" text \" > Hustle &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Year \" > &lt; span class = \" text \" > 2022 &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Stars[] \" > &lt; span class = \" text \" > Adam Sandler &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Directors[] \" > &lt; span class = \" text \" > Jeremiah Zagar &lt;/ span > &lt;/ td > &lt; td class = \" table-col \" data-title = \" Duration[] \" > &lt; span class = \" text \" > 1.57 &lt;/ span > &lt;/ td > &lt;/ tr > &lt;/ tbody > &lt;/ table > &lt;/ div > &lt;/ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> &lt; div class = \" table \" role = \" table \" > &lt; div class = \" table-thead \" role = \" rowheader \" > &lt; div class = \" table-row \" role = \" row \" > &lt; div class = \" table-thead-col \" role = \" columnheader \" > &lt; span class = \" eyebrow-heading-3 \" > Filename &lt;/ span > &lt;/ div > &lt; div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > &lt; span class = \" eyebrow-heading-3 \" > Type &lt;/ span > &lt;/ div > &lt; div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > &lt; span class = \" eyebrow-heading-3 \" > Size &lt;/ span > &lt;/ div > &lt; div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > &lt; span class = \" eyebrow-heading-3 \" > Created &lt;/ span > &lt;/ div > &lt; div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > &lt;/ div > &lt;/ div > &lt;/ div > &lt; div class = \" table-tbody \" role = \" rowgroup \" > &lt; a class = \" table-row \" role = \" row \" href = \" # \" > &lt; div class = \" table-col \" role = \" cell \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ div > &lt; div class = \" table-col \" role = \" cell \" date-title = \" Options \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ a > &lt; a class = \" table-row \" role = \" row \" href = \" # \" > &lt; div class = \" table-col \" role = \" cell \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > &lt; p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png &lt;/ p > &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ div > &lt; div class = \" table-col \" role = \" cell \" date-title = \" Options \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ a > &lt; a class = \" table-row \" role = \" row \" href = \" # \" > &lt; div class = \" table-col \" role = \" cell \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" image \" > &lt; img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> &lt;/ span > &lt; span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > &lt; div class = \" tag \" > &lt; span class = \" text \" > image/jpeg &lt;/ span > &lt;/ div > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > &lt; span class = \" text \" > 336.6 kB &lt;/ span > &lt;/ div > &lt; div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > &lt; time class = \" text \" > 11 Mar 2022 &lt;/ time > &lt;/ div > &lt; div class = \" table-col \" role = \" cell \" date-title = \" Options \" > &lt; div class = \" u-flex \" > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > &lt; span class = \" icon-refresh \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > &lt; span class = \" icon-trash \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt; button class = \" button is-text is-only-icon \" aria-label = \" more options \" > &lt; span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ div > &lt;/ a > &lt;/ div > &lt;/ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> &lt; div class = \" tag \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > default &lt;/ span > &lt;/ div > &lt; div class = \" tag is-info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > info &lt;/ span > &lt;/ div > &lt; div class = \" tag is-success \" > &lt; span class = \" icon-check-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > success &lt;/ span > &lt;/ div > &lt; div class = \" tag is-warning \" > &lt; span class = \" icon-exclamation \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > warning &lt;/ span > &lt;/ div > &lt; div class = \" tag is-danger \" > &lt; span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > error &lt;/ span > &lt;/ div > &lt; div class = \" tag eyebrow-heading-3 \" > &lt; span class = \" text u-x-small \" > Beta &lt;/ span > &lt;/ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> &lt; button class = \" tag \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ button > &lt; a href = \" # \" class = \" tag is-selected \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ a > &lt; button class = \" tag \" disabled > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Interactive &lt;/ span > &lt;/ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> &lt; button class = \" tooltip \" aria-label = \" variables info \" > &lt; span class = \" icon-info \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. &lt;/ span > &lt;/ button > &lt; button class = \" tag tooltip \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > User ID &lt;/ span > &lt; span class = \" tooltip-popup \" role = \" tooltip \" > &lt; p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. &lt;/ p > &lt;/ span > &lt;/ button > &lt; button class = \" tag tooltip \" > &lt; span class = \" icon-duplicate \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > User ID &lt;/ span > &lt; span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. &lt;/ span > &lt;/ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> &lt; div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > &lt;/ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> &lt; div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > &lt;/ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> &lt; div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > &lt;/ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> &lt; div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > &lt;/ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: &lt; style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } &lt;/ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials &lt; style language = \" scss \" > $ theme-dark : \".theme-dark\" ; &lt;/ style > Implementation to a SCSS Partial &lt; style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } &amp; { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } &lt;/ style > Compiled CSS &lt; style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } &lt;/ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is &quot;elevated&quot; in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> &lt; div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > &lt; p class = \" text u-margin-block-start-8 \" > shadow-small &lt;/ p > &lt;/ div > &lt; div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > &lt; p class = \" text u-margin-block-start-8 \" > shadow-large &lt;/ p > &lt;/ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use the heroicons library. By following the steps below, you can easily include all icons in your projects: Navigate to Heroicons website Navigate to heroicons and make sure you are looking at the solid icons. Select an icon and copy its name. Use the selected icon In your code use a class, type icon- and paste the icon’s name right after. Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation &lt; style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small &amp; medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } &lt;/ style > SCSS Code &lt; style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; &lt;/ style > Sass Variables Breakpoints in Media Queries Rule &lt; style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium &amp; large screens */ @media # { $break3open } { } /* large screens */ &lt;/ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Desing responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. &lt; style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small &amp; medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small &amp; large screens */ } &lt;/ style > Example of a SCSS Partial &lt; style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } &lt;/ style > Compiled CSS &lt; style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } &lt;/ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> &lt; h1 class = \" heading-level-1 \" > Heading level 1 &lt;/ h1 > &lt; h2 class = \" heading-level-2 \" > Heading level 2 &lt;/ h2 > &lt; h3 class = \" heading-level-3 \" > Heading level 3 &lt;/ h3 > &lt; h4 class = \" heading-level-4 \" > Heading level 4 &lt;/ h4 > &lt; h5 class = \" heading-level-5 \" > Heading level 5 &lt;/ h5 > &lt; h6 class = \" heading-level-6 \" > Heading level 6 &lt;/ h6 > &lt; h6 class = \" heading-level-7 \" > Heading level 7 &lt;/ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> &lt; h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 &lt;/ h4 > &lt; h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 &lt;/ h5 > &lt; h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 &lt;/ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> &lt; p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold &lt;/ p > &lt; p class = \" body-text-1 \" > Body text level 1 Regular &lt;/ p > &lt; p class = \" body-text-1 u-underline \" > Body text level 1 Underline &lt;/ p > &lt; p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold &lt;/ p > &lt; p class = \" body-text-2 \" > Body text level 2 Regular &lt;/ p > &lt; p class = \" body-text-2 u-underline \" > Body text level 2 Underline &lt;/ p > &lt; a class = \" link \" > Link text Underline &lt;/ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> &lt; code class = \" inline-code \" > Code level 1 &lt;/ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite&#39;s open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the &lt;head&gt; section of your HTML file. \"> &lt; link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> &lt;!-- optionally, add icons --> &lt; link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install @appwrite.io/pink Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; span class = \" avatar is-color-pink \" > RR &lt;/ span > &lt;!-- ... --> &lt;/ div > &lt;/ td > &lt;!-- ... --> &lt; td class = \" table-col \" data-title = \" Name \" > &lt; div class = \" u-inline-flex u-cross-center u-gap-12 \" > &lt; div class = \" avatar \" > &lt; img src = \" /jenny.jpg \" alt = \" JW \" /> &lt;/ div > &lt;!-- ... --> &lt;/ div > &lt;/ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install @appwrite.io/pink import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite&#39;s Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Shmuel Fogel @fogelito Software Engineer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Eldad Fux @eldadfux Appwrite's Founder Carla @heyCarla Product Designer at Appwrite Philipp Hausleiter @phaus Wess Cope @wess Software Engineer at Appwrite Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Elad Shechter @elad2412 Web Developer at Appwrite Everly Precia Suresh @everly-gif Software Engineer at Appwrite Brandon @brandonroberts Bishwajeet Parhi @2002Bishwajeet Hardik Sachan @hardiksachan Shimon Newman @shimonewman Full Stack Engineer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite achintya @achintya-7 Aditya Rana @codingsamurai-10 Matej Bačo @Meldiron Software Engineer at Appwrite Jake Barnby @abnegate Engineering Lead at Appwrite Steven Nguyen @stnguyen90 Software Engineer at Appwrite Rahul Singh @drph4nt0m Chen Parnasa @chenparnasa Product Designer at Appwrite Brandon @kodumbeats Damodar Lohani @lohanidamodar Software Engineer at Appwrite Bradley Schofield @PineappleIOnic Software Engineer at Appwrite Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> &lt; div class = \" container \" > &lt; p class = \" text u-margin-block-start-8 \" > Container &lt;/ p > &lt;/ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> &lt; ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt; li > &lt; div class = \" card \" > card &lt;/ div > &lt;/ li > &lt;/ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> &lt; header class = \" grid-header \" > &lt; h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases &lt;/ h2 > &lt; div class = \" u-flex u-gap-16 u-contents-mobile \" > &lt; div class = \" grid-header-col-4 drop-wrapper \" > &lt; button class = \" button is-secondary \" type = \" button \" > &lt; span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > &lt;/ span > &lt; span class = \" text is-only-desktop \" > Columns &lt;/ span > &lt; span class = \" inline-tag \" > 4 &lt;/ span > &lt;/ button > &lt;/ div > &lt; div class = \" grid-header-col-3 toggle-button \" > &lt; ul class = \" toggle-button-list \" > &lt; li class = \" toggle-button-item \" > &lt; button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > &lt; span class = \" icon-view-list \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" toggle-button-item \" > &lt; button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > &lt; span class = \" icon-view-grid \" aria-hidden = \" true \" > &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ul > &lt;/ div > &lt; button class = \" grid-header-col-2 button \" type = \" button \" > &lt; span class = \" icon-plus \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Create database &lt;/ span > &lt;/ button > &lt;/ div > &lt;/ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> &lt; div class = \" side-nav \" > &lt; div class = \" side-nav-main \" > &lt; section class = \" drop-section \" > &lt; ul class = \" drop-list \" > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button is-selected \" href = \" \" > &lt; span class = \" icon-home \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-user-group \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-bell \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-chart-pie \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt; li class = \" drop-list-item \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-document \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ li > &lt;/ ul > &lt;/ section > &lt;/ div > &lt; div class = \" side-nav-bottom \" > &lt; section class = \" drop-section \" > &lt; a class = \" drop-button \" href = \" \" > &lt; span class = \" icon-cog \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Menu item &lt;/ span > &lt;/ a > &lt;/ section > &lt;/ div > &lt;/ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn&#39;t fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> &lt; nav class = \" pagination \" > &lt; span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > &lt; span class = \" icon-cheveron-left \" aria-hidden = \" true \" > &lt;/ span > &lt; span class = \" text \" > Prev &lt;/ span > &lt;/ span > &lt; ol class = \" pagination-list is-only-desktop \" > &lt; li class = \" pagination-item \" > &lt; span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > &lt; span class = \" text \" > 1 &lt;/ span > &lt;/ span > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > &lt; span class = \" icon \" > … &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 2 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 3 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 4 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 5 &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" show next 5 pages \" > &lt; span class = \" icon \" > … &lt;/ span > &lt;/ button > &lt;/ li > &lt; li class = \" pagination-item \" > &lt; button class = \" button is-text \" aria-label = \" page \" > &lt; span class = \" text \" > 20 &lt;/ span > &lt;/ button > &lt;/ li > &lt;/ ol > &lt; a href = \" \" class = \" button is-text \" aria-label = \" next page \" > &lt; span class = \" text \" > Next &lt;/ span > &lt; span class = \" icon-cheveron-right \" aria-hidden = \" true \" > &lt;/ span > &lt;/ a > &lt;/ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> &lt; div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > &lt;/ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> &lt; div class = \" icon-check u-color-text-disabled \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-offline \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-info \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-danger \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-warning \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-success \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-gray \" > &lt;/ div > &lt; div class = \" icon-check u-color-text-pink \" > &lt;/ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> &lt; p class = \" u-cursor-pointer \" > this text will now have cursor &lt;/ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> &lt; div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > &lt; div class = \" box \" > 1 &lt;/ div > &lt; div class = \" box \" > 2 &lt;/ div > &lt; div class = \" box \" > 3 &lt;/ div > &lt;/ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element&#39;s position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> &lt; section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > &lt; p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px &lt;/ p > &lt;/ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field&#39;s arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> &lt; input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> &lt; br /> &lt; input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp;amp; desktops I’m visible on mobile &amp;amp; tablets \"> &lt; p class = \" is-only-mobile \" > I’m visible on mobile &lt;/ p > &lt; p class = \" is-only-tablet \" > I’m visible on tablets &lt;/ p > &lt; p class = \" is-only-desktop \" > I’m visible on desktop &lt;/ p > &lt; p class = \" is-not-mobile \" > I’m visible on tablets &amp;amp; desktops &lt;/ p > &lt; p class = \" is-not-desktop \" > I’m visible on mobile &amp;amp; tablets &lt;/ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> &lt; div > &lt; p class = \" text u-x-small \" > x-small &lt;/ p > &lt; p class = \" text u-small \" > small &lt;/ p > &lt; p class = \" text \" > text &lt;/ p > &lt; p class = \" text u-bold \" > bold &lt;/ p > &lt;/ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element&#39;s visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> &lt; div class = \" box u-overflow-y-auto \" > &lt; p class = \" text \" > some text &lt;/ p > &lt; p class = \" u-hide \" > hide me &lt;/ p > &lt;/ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["queries",{"1":{"41":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["zoom",{"1":{"40":2}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jake",{"1":{"44":1}}],["java",{"1":{"40":2}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":2}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":7,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":7,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["vue",{"1":{"40":2}}],["vs",{"1":{"40":2}}],["vk",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":18,"12":1,"17":3,"25":1,"27":1,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":10,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":10,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vimeo",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["318",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":7,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["ycombinator",{"1":{"40":2}}],["yandex",{"1":{"40":2}}],["yammer",{"1":{"40":2}}],["yahoo",{"1":{"40":2}}],["y",{"1":{"33":18,"59":3}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":2}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":2,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"40":2,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":13,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":7,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"44":1,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":7,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":10,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":2}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":2}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":2,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":1,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":8,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["webkit",{"1":{"55":1,"57":3}}],["web",{"1":{"44":1}}],["website",{"1":{"40":1,"48":1}}],["wess",{"1":{"44":2}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nguyen",{"1":{"44":1}}],["nik",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["null",{"1":{"25":6}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":2,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":2}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1,"40":2}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":10,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":2,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":20}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":55,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":118,"11":106,"12":49,"13":20,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":7,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":2,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":2}}],["etc",{"1":{"7":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["ellipsis",{"1":{"57":2}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1,"40":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineering",{"1":{"44":2}}],["engineer",{"1":{"44":9}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":4}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["mdn",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["must",{"1":{"11":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":2,"41":11,"46":1,"57":1}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":20,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":2,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":2}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":2,"55":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":11,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["off",{"1":{"32":4,"33":1}}],["offline",{"1":{"9":2,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":1,"36":5,"37":1,"39":2,"40":8,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["ul",{"1":{"2":8,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":4,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":2}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"49":1}}],["us",{"1":{"37":1,"44":4}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":8,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":114,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["after",{"1":{"40":1,"43":1}}],["azure",{"1":{"40":2}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":2}}],["auth0",{"1":{"40":2}}],["autodesk",{"1":{"40":2}}],["auto",{"1":{"4":1,"8":1,"10":10,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["axis",{"1":{"39":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["abnegate",{"1":{"44":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":2}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":30,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":43,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":2}}],["adam",{"1":{"33":18}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"43":2}}],["assist",{"1":{"42":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":1,"41":1,"42":1,"43":3,"46":1,"47":1}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":2}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":4,"41":2,"42":1,"43":7,"44":28,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":17}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":6,"42":3,"55":1,"59":1}}],["along",{"1":{"39":1}}],["align",{"1":{"35":3,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":7,"25":2,"33":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":8,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":3,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["angular",{"1":{"40":2}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":2,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":2}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":8,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":2}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":1,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"44":1,"58":3}}],["linux",{"1":{"40":2}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":3,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":2}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"42":5,"43":2}}],["li",{"1":{"2":32,"3":4,"5":18,"6":32,"8":16,"10":20,"11":4,"12":6,"13":12,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":105,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":131,"11":153,"12":88,"13":40,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["looking",{"1":{"40":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3}}],["logs",{"1":{"4":1}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":1,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":23,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":2}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":1}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"40":1,"43":2}}],["folder",{"1":{"12":1}}],["focus",{"1":{"10":8,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":1,"6":1,"8":1,"14":1,"20":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":2}}],["flat",{"1":{"39":1}}],["flags",{"1":{"10":7}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":39,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":2,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":2}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filled",{"1":{"46":1}}],["films",{"1":{"3":6}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":2}}],["put",{"1":{"41":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["python",{"1":{"40":2}}],["plus",{"1":{"20":2,"33":1,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":2}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":8,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pie",{"1":{"48":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":2}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":7,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":22,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":6,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":3,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6,"40":1}}],["product",{"1":{"42":1,"44":2}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":2}}],["paste",{"1":{"40":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parnasa",{"1":{"44":1}}],["parhi",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":1,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":10,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":2}}],["html",{"1":{"0":1,"1":20,"2":4,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":2,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["hausleiter",{"1":{"44":1}}],["hand",{"1":{"21":1}}],["happen",{"1":{"5":9}}],["have",{"1":{"2":3,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heycarla",{"1":{"44":1}}],["heroicons",{"1":{"40":3}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":14,"25":10,"29":1,"33":18,"53":7,"57":11}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":2}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":6}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":17,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":27,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":7,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":5,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":174,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":12,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":50,"4":3,"6":23,"7":5,"8":2,"9":7,"10":18,"11":30,"12":2,"13":2,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":3,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"51":3}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":2}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":1}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"40":1,"43":3,"57":5}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":11,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":14,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":2}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":2}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":2}}],["dots",{"1":{"33":11}}],["docker",{"1":{"40":2}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["doing",{"1":{"24":1}}],["download",{"1":{"20":1}}],["down",{"1":{"5":6,"16":2,"25":9}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":2}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":2}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":1,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":2}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["desing",{"1":{"41":1}}],["designer",{"1":{"44":2}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":1,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"47":1,"49":1,"53":1,"56":7}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":3,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["dittmann",{"1":{"44":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":2}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":2,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":2,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":62,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":26,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["twitter",{"1":{"40":2}}],["twitch",{"1":{"40":2}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["true",{"1":{"1":35,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":2}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["transparent",{"1":{"11":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":2}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["template",{"1":{"53":1}}],["telegram",{"1":{"40":2}}],["technology",{"1":{"40":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":15,"11":32,"12":19,"13":7,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":3,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":5,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":10,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"40":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["those",{"1":{"44":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["thumbnail",{"1":{"7":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":1,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":6,"36":6,"37":5,"38":2,"39":6,"40":12,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["torstendittmann",{"1":{"44":1}}],["torsten",{"1":{"44":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":18,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":2,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":7,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":26,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":1,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":2}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rahul",{"1":{"44":1}}],["rana",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":11,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":21,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"55":2}}],["rel",{"1":{"43":2}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":2}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["refresh",{"1":{"33":14}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["recently",{"1":{"1":1}}],["reddit",{"1":{"40":2}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":2}}],["bitbucket",{"1":{"40":2}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["bg",{"1":{"38":6}}],["build",{"1":{"44":3}}],["building",{"1":{"43":2,"44":4}}],["built",{"1":{"38":1}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":23,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["bradley",{"1":{"44":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":2}}],["brand",{"1":{"37":3}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":10,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["bandwidth",{"1":{"12":6}}],["barnby",{"1":{"44":1}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"40":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behave",{"1":{"47":1}}],["behavior",{"1":{"33":1}}],["behance",{"1":{"40":2}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"47":1}}],["bolt",{"1":{"10":3,"12":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":7,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":21,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swift",{"1":{"40":2}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":2}}],["skype",{"1":{"40":2}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":2}}],["safari",{"1":{"40":2,"55":1}}],["safe",{"1":{"8":3}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"40":1,"53":6}}],["software",{"1":{"44":9}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":2}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":2,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":12,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["svg",{"1":{"10":7,"25":2,"40":1}}],["schofield",{"1":{"44":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":2,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3}}],["shechter",{"1":{"44":1}}],["shmuel",{"1":{"44":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["sharp",{"1":{"36":1}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":2}}],["support",{"1":{"38":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":7,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"40":1,"43":1,"44":3,"54":1,"55":1,"59":1}}],["small",{"1":{"1":10,"2":18,"8":1,"10":21,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":4,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":24,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["singh",{"1":{"44":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["singapore",{"1":{"10":3}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"40":1,"43":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["storage",{"1":{"12":3,"44":1}}],["stripe",{"1":{"40":2}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":11,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":13,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2,"40":1}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"40":1,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["serious",{"1":{"36":1}}],["services",{"1":{"8":9}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":9,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":9}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":24,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":21,"21":1,"45":1,"48":1}}],["groups",{"1":{"2":2}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gif",{"1":{"44":1}}],["gitlab",{"1":{"40":2}}],["git",{"1":{"40":2,"44":2}}],["github",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["give",{"1":{"1":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":1}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":21,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kodumbeats",{"1":{"44":1}}],["kotlin",{"1":{"40":2}}],["kristin",{"1":{"44":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":9}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":110,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":134,"11":156,"12":91,"13":43,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":2}}],["css3",{"1":{"40":2}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":8,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":3,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["custom",{"1":{"25":7,"46":1}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":9,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["chrome",{"1":{"55":1}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chart",{"1":{"12":2,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"49":2}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["capitalize",{"1":{"57":2}}],["carla",{"1":{"44":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":34,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":2,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["categories",{"1":{"34":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["cameron",{"1":{"3":6}}],["call",{"1":{"1":31,"20":2}}],["canada",{"1":{"10":1}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"40":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":59,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":55,"11":80,"12":41,"13":24,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["click",{"1":{"49":1}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clock",{"1":{"9":2}}],["closed",{"1":{"8":3}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["cog",{"1":{"48":1}}],["cognitive",{"1":{"14":1}}],["codingsamurai",{"1":{"44":1}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":7,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":7}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["cope",{"1":{"44":1}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":3,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2}
\ No newline at end of file

From 087c69528a9583ae9387b59114d8d5259cebbcf6 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 5 Jun 2023 11:44:57 +0200
Subject: [PATCH 158/167] Avatar Group - - Add new state

---
 apps/pink/src/pages/components/avatar.mdx | 22 ++++++++++++++++++++++
 packages/ui/src/6-elements/_avatar.scss   |  4 ++++
 2 files changed, 26 insertions(+)

diff --git a/apps/pink/src/pages/components/avatar.mdx b/apps/pink/src/pages/components/avatar.mdx
index 6d17d70a40..4b84f6e62c 100644
--- a/apps/pink/src/pages/components/avatar.mdx
+++ b/apps/pink/src/pages/components/avatar.mdx
@@ -148,6 +148,28 @@ Avatar groups have four different sizes:
 
 </Preview>
 
+## Avatar Group - icon with border
+
+Avatar groups have four different sizes:
+
+| class             | Type       |  Size    |
+| :---------------- | :--------- | :------- |
+| `is-with-border`  | add border | 1px      |
+
+<Preview center>
+    <ul class="avatars-group is-with-border">
+        <li class="avatars-group-item">
+            <div class="avatar"><span class="icon-github" aria-hidden="true" aria-label="GitHub"></span></div>
+        </li>
+        <li class="avatars-group-item">
+            <div class="avatar"><span class="icon-gitlab" aria-hidden="true" aria-label="GitLab"></span></div>
+        </li>
+        <li class="avatars-group-item">
+            <div class="avatar"><span class="icon-bitBucket" aria-hidden="true" aria-label="BitBucket"></span></div>
+        </li>
+    </ul>
+</Preview>
+
 ## Best Practice
 
 Tips to keep in mind to increase consistency in avatars:
diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss
index 9e7233df41..8cff21abb3 100644
--- a/packages/ui/src/6-elements/_avatar.scss
+++ b/packages/ui/src/6-elements/_avatar.scss
@@ -221,6 +221,10 @@
     .is-size-small    { margin-inline-start: -.5rem; }
     .is-size-large    { margin-inline-start: -0.8rem; }
   }
+  &.is-with-border .avatar {
+    --p-avatar-group-border-color:var(--p-avatar-border-color-default)!important;
+    border-width:pxToRem(1);
+  }
   #{$theme-dark} & {
     --p-avatar-group-border-color: var(--color-neutral-500);
   }

From 82f1badad2efd9142969335afde18c6c5ed68f96 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 5 Jun 2023 11:49:18 +0200
Subject: [PATCH 159/167] Tooltip - - Add new state of alignment

---
 apps/pink/src/pages/elements/tooltip.mdx | 41 ++++++++++++++----------
 packages/ui/src/6-elements/_tooltip.scss |  1 +
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/apps/pink/src/pages/elements/tooltip.mdx b/apps/pink/src/pages/elements/tooltip.mdx
index b6b4e0ce85..77dabb8406 100644
--- a/apps/pink/src/pages/elements/tooltip.mdx
+++ b/apps/pink/src/pages/elements/tooltip.mdx
@@ -16,28 +16,35 @@ Tooltips consist of two components:
 | `tooltip-popup` | Text         |                                                 |
 | `is-bottom`     | Align Bottom | The tooltip will appear below the element.      |
 | `is-center`     | Align Center | The tooltip will be align center to the partial |
+| `is-end`        | Align Center | The tooltip will be align end of the partial    |
 
 <Preview center overflow>
   <only-preview>
-<div class="u-flex u-gap-8 u-cross-center" style="min-height: 10rem">
-  <button class="tooltip" aria-label="variables info">
-    <span class="icon-info" aria-hidden="true"></span>
-    <span class="tooltip-popup" role="tooltip">Set variables or secret keys.</span>
-  </button>
+    <div class="u-flex u-gap-8 u-cross-center" style="min-height: 10rem">
+      <button class="tooltip" aria-label="variables info">
+        <span class="icon-info" aria-hidden="true"></span>
+        <span class="tooltip-popup" role="tooltip">Set variables or secret keys.</span>
+      </button>
 
-<button class="tag tooltip">
-  <span class="icon-duplicate" aria-hidden="true"></span>
-  <span class="text">User ID</span>
-  <span class="tooltip-popup" role="tooltip">
-    Set variables or secret keys.
-  </span>
-</button>
+    <button class="tag tooltip">
+      <span class="icon-duplicate" aria-hidden="true"></span>
+      <span class="text">User ID</span>
+      <span class="tooltip-popup" role="tooltip">
+        Set variables or secret keys.
+      </span>
+    </button>
 
-<button class="tag tooltip">
-    <span class="icon-duplicate" aria-hidden="true"></span>
-    <span class="text">User ID</span>
-    <span class="tooltip-popup is-bottom" role="tooltip">Set variables or secret keys.</span>
-</button>
+    <button class="tag tooltip">
+        <span class="icon-duplicate" aria-hidden="true"></span>
+        <span class="text">User ID</span>
+        <span class="tooltip-popup is-bottom" role="tooltip">Set variables or secret keys.</span>
+    </button>
+
+    <button class="tag tooltip">
+        <span class="icon-duplicate" aria-hidden="true"></span>
+        <span class="text">User ID</span>
+        <span class="tooltip-popup is-end" role="tooltip">Set variables or secret keys.</span>
+    </button>
 </div>
 </only-preview>
 
diff --git a/packages/ui/src/6-elements/_tooltip.scss b/packages/ui/src/6-elements/_tooltip.scss
index 3a9dd2667c..51ac869c9a 100644
--- a/packages/ui/src/6-elements/_tooltip.scss
+++ b/packages/ui/src/6-elements/_tooltip.scss
@@ -18,6 +18,7 @@
 
     &.is-bottom { inset-block-start:calc(100% + 10px); inset-block-end:auto; }
     &.is-center { inset-inline-start:50%; transform:translateX(-50%); }
+    &.is-end    { inset-inline-start:auto; inset-inline-end:0; }
 
     //&::before {
     //  position:absolute; inset-block-start:100%; inset-inline-start:pxToRem(25);

From 70ac138933ab25c64aeb9387a16128f8175aea28 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 5 Jun 2023 11:57:01 +0200
Subject: [PATCH 160/167] Secondary Tabs - - Add new state of "is-stretch"

---
 .../src/pages/components/secondary-tabs.mdx   | 28 +++++++++++++++++++
 .../ui/src/7-components/_secondary-tabs.scss  |  7 +++++
 2 files changed, 35 insertions(+)

diff --git a/apps/pink/src/pages/components/secondary-tabs.mdx b/apps/pink/src/pages/components/secondary-tabs.mdx
index 7f511572d9..ad3fc87568 100644
--- a/apps/pink/src/pages/components/secondary-tabs.mdx
+++ b/apps/pink/src/pages/components/secondary-tabs.mdx
@@ -36,6 +36,34 @@ Secondary Tabs consist of two components:
   </ul>
 </Preview>
 
+## Stretch Tabs
+
+Tabs stretch to fill all line:
+
+| Class                   | Behave   |
+| ----------------------- | -------- |
+| `is-stretch`            | Stretch  |
+
+<Preview maxLength>
+    <ul class="secondary-tabs is-stretch">
+        <li class="secondary-tabs-item">
+            <button class="secondary-tabs-button" disabled>
+                <span class="text">Item</span>
+            </button>
+        </li>
+        <li class="secondary-tabs-item">
+            <button class="secondary-tabs-button">
+                <span class="text">Item</span>
+            </button>
+        </li>
+        <li class="secondary-tabs-item">
+            <button class="secondary-tabs-button">
+                <span class="text">Item</span>
+            </button>
+        </li>
+    </ul>
+</Preview>
+
 ## Sizes
 
 | Class      | Type  |                                                           |
diff --git a/packages/ui/src/7-components/_secondary-tabs.scss b/packages/ui/src/7-components/_secondary-tabs.scss
index aabe79adc3..18cba5f677 100644
--- a/packages/ui/src/7-components/_secondary-tabs.scss
+++ b/packages/ui/src/7-components/_secondary-tabs.scss
@@ -27,6 +27,13 @@
     $drop-tab-padding-horizontal:     pxToRem(20);
     --p-drop-tab-padding-horizontal:  #{$drop-tab-padding-horizontal};
   }
+  &:where(.is-stretch) {
+    inline-size:100%;
+    .secondary-tabs {
+      &-item { flex:1; }
+      &-button { inline-size:100%; text-align:center; }
+    }
+  }
   #{$theme-dark} & {
     --p-drop-tab-text-color: var(--color-neutral-30);
     &-button {

From 1f91a8d6bcfb8cba43cd65f8024ab20c8479131f Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 5 Jun 2023 11:15:20 +0100
Subject: [PATCH 161/167] chore: bump version

---
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/icons/package.json b/packages/icons/package.json
index 6734ed9bcc..141f96795a 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.12",
+  "version": "0.0.6-rc.13",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 270b670ef9..29bd4e1b94 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.12",
+  "version": "0.0.6-rc.13",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From 8c86a198a6a46251a7b018a915d7fc4cd694f17a Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 5 Jun 2023 12:03:19 +0100
Subject: [PATCH 162/167] chore: bump version

---
 package-lock.json           | 4 ++--
 packages/icons/package.json | 2 +-
 packages/ui/package.json    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index db2c6dd498..099e762244 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.12",
+      "version": "0.0.6-rc.13",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.12",
+      "version": "0.0.6-rc.13",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 141f96795a..428b8c401f 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink-icons",
-  "version": "0.0.6-rc.13",
+  "version": "0.0.6-rc.14",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 29bd4e1b94..cc75a606d7 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appwrite.io/pink",
-  "version": "0.0.6-rc.13",
+  "version": "0.0.6-rc.14",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

From 9abb30b9682bb531afeb981988ebb7de14559b49 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 5 Jun 2023 14:19:31 +0200
Subject: [PATCH 163/167] Font icons - - Add azure to font-icons

---
 apps/pink/src/pages/components/avatar.mdx | 3 +++
 package-lock.json                         | 4 ++--
 packages/icons/svg/azure.svg              | 5 +++++
 3 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 packages/icons/svg/azure.svg

diff --git a/apps/pink/src/pages/components/avatar.mdx b/apps/pink/src/pages/components/avatar.mdx
index 4b84f6e62c..f5e666d411 100644
--- a/apps/pink/src/pages/components/avatar.mdx
+++ b/apps/pink/src/pages/components/avatar.mdx
@@ -167,6 +167,9 @@ Avatar groups have four different sizes:
         <li class="avatars-group-item">
             <div class="avatar"><span class="icon-bitBucket" aria-hidden="true" aria-label="BitBucket"></span></div>
         </li>
+        <li class="avatars-group-item">
+            <div class="avatar"><span class="icon-azure" aria-hidden="true" aria-label="Azure"></span></div>
+        </li>
     </ul>
 </Preview>
 
diff --git a/package-lock.json b/package-lock.json
index db2c6dd498..099e762244 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14080,7 +14080,7 @@
     },
     "packages/icons": {
       "name": "@appwrite.io/pink-icons",
-      "version": "0.0.6-rc.12",
+      "version": "0.0.6-rc.13",
       "license": "ISC",
       "devDependencies": {
         "oslllo-svg-fixer": "^2.2.0",
@@ -14089,7 +14089,7 @@
     },
     "packages/ui": {
       "name": "@appwrite.io/pink",
-      "version": "0.0.6-rc.12",
+      "version": "0.0.6-rc.13",
       "license": "ISC",
       "dependencies": {
         "@appwrite.io/pink-icons": "*",
diff --git a/packages/icons/svg/azure.svg b/packages/icons/svg/azure.svg
new file mode 100644
index 0000000000..52ee13a52f
--- /dev/null
+++ b/packages/icons/svg/azure.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.7421 5.22213C8.84188 4.92647 9.11914 4.72742 9.43118 4.72742H13.9999L9.25784 18.7782C9.15805 19.0739 8.88079 19.2729 8.56876 19.2729H5.013C4.51544 19.2729 4.1648 18.7844 4.32391 18.3131L8.7421 5.22213Z" fill="#373B4D"/>
+<path d="M16.0459 14.1819H8.84548C8.54294 14.1819 8.39687 14.5525 8.61804 14.7589L13.2448 19.0772C13.3795 19.2029 13.5568 19.2728 13.741 19.2728H17.818L16.0459 14.1819Z" fill="#373B4D"/>
+<path d="M15.2579 5.222C15.1582 4.92635 14.8809 4.72729 14.5688 4.72729H9.45459H9.47792C9.78996 4.72729 10.0672 4.92635 10.167 5.222L14.5852 18.313C14.7443 18.7843 14.3936 19.2728 13.8961 19.2728H13.8182H18.987C19.4846 19.2728 19.8352 18.7843 19.6761 18.313L15.2579 5.222Z" fill="#373B4D"/>
+</svg>

From f763db21a2fd0dca8263e8fed6a9bda1c4aec6b6 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 5 Jun 2023 16:50:09 +0200
Subject: [PATCH 164/167] Link - - Add new state

---
 packages/ui/src/6-elements/_link.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/6-elements/_link.scss b/packages/ui/src/6-elements/_link.scss
index 17fc12b894..f4d10a42ff 100644
--- a/packages/ui/src/6-elements/_link.scss
+++ b/packages/ui/src/6-elements/_link.scss
@@ -2,4 +2,5 @@
 .link {
   cursor:pointer; text-decoration:underline;
   > * { vertical-align:middle; }
+  &.is-5px-offset { text-underline-offset:pxToRem(5); }
 }
\ No newline at end of file

From 536e153a017ffd21bafc12953d225793a4c8e4bb Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 6 Jun 2023 09:24:21 +0200
Subject: [PATCH 165/167] Avatar - - font-size of icon, now affect as well on
 image/svg element size

---
 packages/ui/src/6-elements/_avatar.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss
index 8cff21abb3..a736ebf701 100644
--- a/packages/ui/src/6-elements/_avatar.scss
+++ b/packages/ui/src/6-elements/_avatar.scss
@@ -97,6 +97,7 @@
   line-height: 1;
 
   [class*="icon"] { font-size:var(--p-text-size); }
+  img, svg { inline-size:var(--p-text-size); aspect-ratio:1 / 1; }
   &-link {
     display:block; border-radius:var(--border-radius-circular);
     &:focus-visible { box-shadow:var(--focus-box-shadow); }

From debe6a3fa2933da890785f202cb235b43eb959b3 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 6 Jun 2023 09:55:31 +0200
Subject: [PATCH 166/167] link - - add new state add sep

---
 packages/ui/src/6-elements/_link.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/ui/src/6-elements/_link.scss b/packages/ui/src/6-elements/_link.scss
index f4d10a42ff..5c5c5bbe7d 100644
--- a/packages/ui/src/6-elements/_link.scss
+++ b/packages/ui/src/6-elements/_link.scss
@@ -3,4 +3,11 @@
   cursor:pointer; text-decoration:underline;
   > * { vertical-align:middle; }
   &.is-5px-offset { text-underline-offset:pxToRem(5); }
+  &.is-add-sep {
+    > *:nth-child(n + 2)::before {
+      content: "|";
+      margin-inline: pxToRem(4);
+      font-size: pxToRem(10);
+    }
+  }
 }
\ No newline at end of file

From 5ac79f034c820e09cb297e23f83e0a276f115295 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Tue, 6 Jun 2023 09:56:04 +0200
Subject: [PATCH 167/167] link - - add new state add sep

---
 packages/ui/src/6-elements/_link.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/ui/src/6-elements/_link.scss b/packages/ui/src/6-elements/_link.scss
index 5c5c5bbe7d..cbf2d3c7f0 100644
--- a/packages/ui/src/6-elements/_link.scss
+++ b/packages/ui/src/6-elements/_link.scss
@@ -4,10 +4,6 @@
   > * { vertical-align:middle; }
   &.is-5px-offset { text-underline-offset:pxToRem(5); }
   &.is-add-sep {
-    > *:nth-child(n + 2)::before {
-      content: "|";
-      margin-inline: pxToRem(4);
-      font-size: pxToRem(10);
-    }
+    > *:nth-child(n + 2)::before { content:"|"; margin-inline:pxToRem(4); font-size:pxToRem(10); }
   }
 }
\ No newline at end of file
