adding

3 years ago · 8082d0ace8
--- a/dist/fonts/IBMPlexMono-Bold.eot
+++ b/dist/fonts/IBMPlexMono-Bold.eot
--- a/dist/fonts/IBMPlexMono-Bold.ttf
+++ b/dist/fonts/IBMPlexMono-Bold.ttf
--- a/dist/fonts/IBMPlexMono-Bold.woff
+++ b/dist/fonts/IBMPlexMono-Bold.woff
--- a/dist/fonts/IBMPlexMono-Bold.woff2
+++ b/dist/fonts/IBMPlexMono-Bold.woff2
--- a/dist/fonts/IBMPlexMono.eot
+++ b/dist/fonts/IBMPlexMono.eot
--- a/dist/fonts/IBMPlexMono.ttf
+++ b/dist/fonts/IBMPlexMono.ttf
--- a/dist/fonts/IBMPlexMono.woff
+++ b/dist/fonts/IBMPlexMono.woff
--- a/dist/fonts/IBMPlexMono.woff2
+++ b/dist/fonts/IBMPlexMono.woff2
--- a/dist/fonts/demo.html
+++ b/dist/fonts/demo.html
@ -0,0 +1,233 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, noarchive">
    <meta name="format-detection" content="telephone=no">
    <title>Transfonter demo</title>
    <link href="stylesheet.css" rel="stylesheet">
    <style>
        /*
        http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        License: none (public domain)
        */
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        /* demo styles */
        body {
            background: #f0f0f0;
            color: #000;
        }
        .page {
            background: #fff;
            width: 920px;
            margin: 0 auto;
            padding: 20px 20px 0 20px;
            overflow: hidden;
        }
        .font-container {
            overflow-x: auto;
            overflow-y: hidden;
            margin-bottom: 40px;
            line-height: 1.3;
            white-space: nowrap;
            padding-bottom: 5px;
        }
        h1 {
            position: relative;
            background: #444;
            font-size: 32px;
            color: #fff;
            padding: 10px 20px;
            margin: 0 -20px 12px -20px;
        }
        .letters {
            font-size: 25px;
            margin-bottom: 20px;
        }
        .s10:before {
            content: '10px';
        }
        .s11:before {
            content: '11px';
        }
        .s12:before {
            content: '12px';
        }
        .s14:before {
            content: '14px';
        }
        .s18:before {
            content: '18px';
        }
        .s24:before {
            content: '24px';
        }
        .s30:before {
            content: '30px';
        }
        .s36:before {
            content: '36px';
        }
        .s48:before {
            content: '48px';
        }
        .s60:before {
            content: '60px';
        }
        .s72:before {
            content: '72px';
        }
        .s10:before, .s11:before, .s12:before, .s14:before,
        .s18:before, .s24:before, .s30:before, .s36:before,
        .s48:before, .s60:before, .s72:before {
            font-family: Arial, sans-serif;
            font-size: 10px;
            font-weight: normal;
            font-style: normal;
            color: #999;
            padding-right: 6px;
        }
        pre {
            display: block;
            position: relative;
            padding: 9px;
            margin: 0 0 10px;
            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
            font-size: 13px;
            line-height: 1.428571429;
            color: #333;
            font-weight: normal;
            font-style: normal;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            overflow-x: auto;
            border-radius: 4px;
        }
        pre:after {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            content: 'Usage';
            line-height: 1;
            padding: 5px 8px;
            font-size: 12px;
            color: #767676;
            background-color: #fff;
            border: 1px solid #ccc;
            border-right: none;
            border-top: none;
            border-radius: 0 4px 0 4px;
            z-index: 10;
        }
        /* responsive */
        @media (max-width: 959px) {
            .page {
                width: auto;
                margin: 0;
            }
        }
    </style>
 </head>
 <body>
 <div class="page">
    <div class="demo">
        <h1 style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">IBM Plex Mono</h1>
        <pre>.your-style {
    font-family: 'IBM Plex Mono';
    font-weight: normal;
    font-style: normal;
 }</pre>
        <div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">
            <p class="letters">
                abcdefghijklmnopqrstuvwxyz<br>
 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
                0123456789.:,;()*!?'@#<>$%&^+-=~
            </p>
            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
        </div>
    </div>
    <div class="demo">
        <h1 style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">IBM Plex Mono Bold</h1>
        <pre>.your-style {
    font-family: 'IBM Plex Mono';
    font-weight: bold;
    font-style: normal;
 }</pre>
        <div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">
            <p class="letters">
                abcdefghijklmnopqrstuvwxyz<br>
 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
                0123456789.:,;()*!?'@#<>$%&^+-=~
            </p>
            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
        </div>
    </div>
 </div>
 </body>
 </html>
--- a/dist/fonts/stylesheet.css
+++ b/dist/fonts/stylesheet.css
@ -0,0 +1,24 @@
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('IBMPlexMono.eot');
    src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
        url('IBMPlexMono.woff2') format('woff2'),
        url('IBMPlexMono.woff') format('woff'),
        url('IBMPlexMono.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
 }
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('IBMPlexMono-Bold.eot');
    src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
        url('IBMPlexMono-Bold.woff2') format('woff2'),
        url('IBMPlexMono-Bold.woff') format('woff'),
        url('IBMPlexMono-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
 }
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1,150 @@
 <!doctype html>
 <html lang="en_EN">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
    <meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="plain-ui.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css">
 </head>
 <body class="home">
    <header id="header" class="header">
        <div class="container">
            <div class="grid">
                <div class="col-12">
                    <div class="text-center">
                        <hgroup>
                            <a href="/">
                                <h1 class="h2 margin-top-4 margin-bottom-0">Plain UI</h1>
                        </a></hgroup>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="grid">
            <div class="col-12">
                <h2>Buttons</h2>
                <button class="button">
                    Default
                </button>
                <button class="button">
                    Default
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="symbol-defs.svg#icon-check"></use>
                    </svg>
                </button>
                <button class="button button--success">
                    Success
                </button>
                <button class="button button--danger">
                    Danger
                </button>
            </div>
        </div>
        <div class="grid">
            <div class="col-12">
                <h2>Icon</h2>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="symbol-defs.svg#icon-check"></use>
                </svg>
                <svg class="icon icon--circle" aria-hidden="true">
                    <use xlink:href="symbol-defs.svg#icon-check"></use>
                </svg>
            </div>
        </div>
        <div class="grid">
            <div class="col-12">
                <h2>Badge</h2>
                <span class="badge">
                    Category
                </span>
            </div>
        </div>
        <div class="grid">
            <div class="col-12">
                <h2>Panel</h2>
                <div class="panel">
                    <div class="panel__header">
                        <button type="button">
                            <svg class="icon icon--first" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-expand"></use>
                            </svg>
                        </button>
                        <div class="panel__title">Test</div>
                        <div class="panel__buttons">
                            <button type="button">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="symbol-defs.svg#icon-edit"></use>
                                </svg>
                            </button>
                            <button type="button">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="symbol-defs.svg#icon-close"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="panel__body">
                        <div class="content">
                            <p>
                                Hallo
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid">
            <div class="col-12">
                <h2>Form</h2>
                <form>
                    <div class="group">
                        <label class="label">
                            Name
                            <input class="text" />
                        </label>
                    </div>
                    <div class="group group--valid">
                        <label class="label">
                            <svg class="icon" aria-hidden="true">
                                <use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
                            </svg>
                            Surname
                            <input class="text" />
                        </label>
                    </div>
                    <div class="group group--error">
                        <label class="label">
                            <svg class="icon" aria-hidden="true">
                                <use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
                            </svg>
                            E-Mail
                            <input class="text" />
                        </label>
                        <span class="error">
                            String is not valid
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
 </body>
 </html>
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@ -0,0 +1,393 @@
@charset "UTF-8";
@font-face {
  font-family: "IBM Plex Mono";
  src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1);
  src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1) format("embedded-opentype"), url(/fonts/IBMPlexMono.woff2?db620201a437f00ce78da2a10cf50f3f) format("woff2"), url(/fonts/IBMPlexMono.woff?3d04ef6de65d3c77bd60c158326be298) format("woff"), url(/fonts/IBMPlexMono.ttf?ce51a85eb7160067d01bcf6e56f837d1) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: "IBM Plex Mono";
  src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34);
  src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34) format("embedded-opentype"), url(/fonts/IBMPlexMono-Bold.woff2?8b633c62813e0275ebd7a1c793c4e99c) format("woff2"), url(/fonts/IBMPlexMono-Bold.woff?b72090c625b4144f3763d5b2bf8f5942) format("woff"), url(/fonts/IBMPlexMono-Bold.ttf?558e55bd46468bb8d7074d7064d02c30) format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
 }
 /**
 *  variables
 *
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/plain-ui-css
 *
 */
 /**
 *  breakpoints
 *
 */
 /**
 *  fonts
 *
 */
 /**
 *  colors
 *
 *
 */
 /**
 *  padding & margin
 *
 */
 /**
 *  heading
 *
 */
 /**
 *  z-index
 *
 */
 /**
 *  core
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */
 /**
 *  normalize
 *
 *  Thanks to https://necolas.github.io/normalize.css/, use a lot from them
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */
 /**
 *  Heading
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */
 /**
 *  typograhy
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */
 html {
  font-size: 100%;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
 }
 body,
 html {
  margin: 0;
  height: 100%;
 }
 html,
 legend {
  box-sizing: border-box;
 }
 main {
  display: block;
 }
 *,
 *::after,
 *::before {
  box-sizing: inherit;
 }
 table {
  border-collapse: collapse;
  border-spacing: 0;
 }
 figcaption {
  margin: 10px 0;
 }
 /**
 *  form elements
 *
 *
 */
 button,
 input,
 optgroup,
 select,
 textarea {
  margin: 0;
 }
 button,
 select {
  text-transform: none;
 }
 button,
 [type=button],
 [type=reset],
 [type=submit] {
  -webkit-appearance: button;
 }
 button::-moz-focus-inner,
 [type=button]::-moz-focus-inner,
 [type=reset]::-moz-focus-inner,
 [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }
 button:-moz-focusring,
 [type=button]:-moz-focusring,
 [type=reset]:-moz-focusring,
 [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
 }
 legend {
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
 }
 [type=number]::-webkit-inner-spin-button,
 [type=number]::-webkit-outer-spin-button {
  height: auto;
 }
 [type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
 }
 [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
 }
 ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
 }
 /**
 * hr
 *
 */
 hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  margin: 0.3em 0;
 }
 progress {
  vertical-align: baseline;
 }
 details {
  display: block;
 }
 summary {
  display: list-item;
 }
 /**
 *
 *
 *
 */
 /**
 *
 *
 *
 */
 /**
 *
 *
 *
 *
 */
 /**
 *
 *
 *
 */
 a {
  color: #fff;
 }
 a:focus {
  outline: none;
 }
 /**
 *  body
 *
 *
 *
 *  line-height and breakpoints
 *  font-size and breakpoints
 *
 */
 body {
  font-family: "IBM Plex Mono", sans-serif;
  background-color: #f9f9f9;
  direction: ltr;
  font-size: 1rem;
  line-height: 1.4;
 }
 .button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-family: "IBM Plex Mono", sans-serif;
  border: 1px solid black;
  background-color: #3e3e3e;
  color: white;
  padding: 0.7em 1.5em;
  font-size: 1.1rem;
  border-radius: 2px;
  transition: background-color 0.5s;
 }
 .button:hover {
  cursor: pointer;
  text-decoration: none;
  background-color: #575757;
 }
 .label {
  font-family: "IBM Plex Mono", sans-serif;
 }
 .label .icon {
  vertical-align: text-top;
  font-size: 1.2rem;
 }
 input.text, textarea.text {
  font-family: "IBM Plex Mono", sans-serif;
  width: 100%;
  padding: 0.8em 1.1em;
  font-size: 0.9rem;
  border: 1px solid;
  border-radius: 2px;
  margin: 0.7em 0 0;
 }
 input.text:focus, input.text:active, textarea.text:focus, textarea.text:active {
  outline: 0;
  border-color: #4d8c4d;
 }
 .help, .error {
  display: inline-block;
  width: 100%;
  padding: 0.6em 0.5em;
  font-size: 0.8rem;
 }
 .error {
  color: #d95959;
 }
 .group {
  margin-bottom: 1.2em;
 }
 .group--valid input.text, .group--valid textarea.text {
  border-color: #64ac64;
 }
 .group--valid .icon {
  fill: #64ac64;
 }
 .group--error input.text, .group--error textarea.text {
  border-color: #d95959;
 }
 .group--error .icon {
  fill: #d95959;
 }
 .text-wrapper {
  display: flex;
 }
 .text-wrapper input.text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
 }
 .icon {
  width: 1em;
  height: 1em;
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  overflow: hidden;
  fill: white;
 }
 .icon--danger {
  fill: #d95959;
 }
 .panel {
  border: 1px solid #242424;
  border-radius: 2px;
  background: #fff;
 }
 .panel__header {
  display: flex;
  background-color: #242424;
  color: white;
  padding: 0.8em 1.2em;
  line-height: 1.6em;
 }
 .panel__header button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  padding: 0;
 }
 .panel__header button:hover {
  cursor: pointer;
 }
 .panel__header .icon {
  vertical-align: bottom;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
 }
 .panel__buttons {
  display: flex;
  justify-content: end;
  width: 100%;
 }
 .panel__buttons button:last-child .icon {
  margin-right: 0;
 }
 .panel__body {
  padding: 0.6em 1.2em;
 }
--- a/dist/symbol-defs.svg
+++ b/dist/symbol-defs.svg
--- a/fonts/IBMPlexMono-Bold.eot
+++ b/fonts/IBMPlexMono-Bold.eot
--- a/fonts/IBMPlexMono-Bold.ttf
+++ b/fonts/IBMPlexMono-Bold.ttf
--- a/fonts/IBMPlexMono-Bold.woff
+++ b/fonts/IBMPlexMono-Bold.woff
--- a/fonts/IBMPlexMono-Bold.woff2
+++ b/fonts/IBMPlexMono-Bold.woff2
--- a/fonts/IBMPlexMono.eot
+++ b/fonts/IBMPlexMono.eot
--- a/fonts/IBMPlexMono.ttf
+++ b/fonts/IBMPlexMono.ttf
--- a/fonts/IBMPlexMono.woff
+++ b/fonts/IBMPlexMono.woff
--- a/fonts/IBMPlexMono.woff2
+++ b/fonts/IBMPlexMono.woff2
--- a/mix-manifest.json
+++ b/mix-manifest.json
@ -0,0 +1,14 @@
 {
    "/spritemap.js": "/spritemap.js",
    "/dist/plain-ui.css": "/dist/plain-ui.css",
    "/dist/fonts/demo.html": "/dist/fonts/demo.html",
    "/dist/fonts/IBMPlexMono-Bold.eot": "/dist/fonts/IBMPlexMono-Bold.eot",
    "/dist/fonts/IBMPlexMono-Bold.ttf": "/dist/fonts/IBMPlexMono-Bold.ttf",
    "/dist/fonts/IBMPlexMono-Bold.woff": "/dist/fonts/IBMPlexMono-Bold.woff",
    "/dist/fonts/IBMPlexMono-Bold.woff2": "/dist/fonts/IBMPlexMono-Bold.woff2",
    "/dist/fonts/IBMPlexMono.eot": "/dist/fonts/IBMPlexMono.eot",
    "/dist/fonts/IBMPlexMono.ttf": "/dist/fonts/IBMPlexMono.ttf",
    "/dist/fonts/IBMPlexMono.woff": "/dist/fonts/IBMPlexMono.woff",
    "/dist/fonts/IBMPlexMono.woff2": "/dist/fonts/IBMPlexMono.woff2",
    "/dist/fonts/stylesheet.css": "/dist/fonts/stylesheet.css"
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -13,7 +13,13 @@
  "author": "Björn Hase",
  "license": "MIT",
  "devDependencies": {
    "laravel-mix": "^6.0.16"
    "laravel-mix": "^6.0.16",
    "postcss-css-variables": "^0.17.0",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "svg-spritemap-webpack-plugin": "^3.9.1",
    "svgo": "^1.3.2"
  },
  "dependencies": {
    "normalize.css": "^8.0.1",
--- a/spritemap.js
+++ b/spritemap.js
@ -0,0 +1,13 @@
 (self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
 /***/ "?4e0c":
 /*!******************************!*\
  !*** spritemap-dummy-module ***!
  \******************************/
 /***/ (() => {
 /***/ })
 }]);
--- a/src/fonts/IBMPlexMono-Bold.eot
+++ b/src/fonts/IBMPlexMono-Bold.eot
--- a/src/fonts/IBMPlexMono-Bold.ttf
+++ b/src/fonts/IBMPlexMono-Bold.ttf
--- a/src/fonts/IBMPlexMono-Bold.woff
+++ b/src/fonts/IBMPlexMono-Bold.woff
--- a/src/fonts/IBMPlexMono-Bold.woff2
+++ b/src/fonts/IBMPlexMono-Bold.woff2
--- a/src/fonts/IBMPlexMono.eot
+++ b/src/fonts/IBMPlexMono.eot
--- a/src/fonts/IBMPlexMono.ttf
+++ b/src/fonts/IBMPlexMono.ttf
--- a/src/fonts/IBMPlexMono.woff
+++ b/src/fonts/IBMPlexMono.woff
--- a/src/fonts/IBMPlexMono.woff2
+++ b/src/fonts/IBMPlexMono.woff2
--- a/src/fonts/demo.html
+++ b/src/fonts/demo.html
@ -0,0 +1,233 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, noarchive">
    <meta name="format-detection" content="telephone=no">
    <title>Transfonter demo</title>
    <link href="stylesheet.css" rel="stylesheet">
    <style>
        /*
        http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        License: none (public domain)
        */
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        /* demo styles */
        body {
            background: #f0f0f0;
            color: #000;
        }
        .page {
            background: #fff;
            width: 920px;
            margin: 0 auto;
            padding: 20px 20px 0 20px;
            overflow: hidden;
        }
        .font-container {
            overflow-x: auto;
            overflow-y: hidden;
            margin-bottom: 40px;
            line-height: 1.3;
            white-space: nowrap;
            padding-bottom: 5px;
        }
        h1 {
            position: relative;
            background: #444;
            font-size: 32px;
            color: #fff;
            padding: 10px 20px;
            margin: 0 -20px 12px -20px;
        }
        .letters {
            font-size: 25px;
            margin-bottom: 20px;
        }
        .s10:before {
            content: '10px';
        }
        .s11:before {
            content: '11px';
        }
        .s12:before {
            content: '12px';
        }
        .s14:before {
            content: '14px';
        }
        .s18:before {
            content: '18px';
        }
        .s24:before {
            content: '24px';
        }
        .s30:before {
            content: '30px';
        }
        .s36:before {
            content: '36px';
        }
        .s48:before {
            content: '48px';
        }
        .s60:before {
            content: '60px';
        }
        .s72:before {
            content: '72px';
        }
        .s10:before, .s11:before, .s12:before, .s14:before,
        .s18:before, .s24:before, .s30:before, .s36:before,
        .s48:before, .s60:before, .s72:before {
            font-family: Arial, sans-serif;
            font-size: 10px;
            font-weight: normal;
            font-style: normal;
            color: #999;
            padding-right: 6px;
        }
        pre {
            display: block;
            position: relative;
            padding: 9px;
            margin: 0 0 10px;
            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
            font-size: 13px;
            line-height: 1.428571429;
            color: #333;
            font-weight: normal;
            font-style: normal;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            overflow-x: auto;
            border-radius: 4px;
        }
        pre:after {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            content: 'Usage';
            line-height: 1;
            padding: 5px 8px;
            font-size: 12px;
            color: #767676;
            background-color: #fff;
            border: 1px solid #ccc;
            border-right: none;
            border-top: none;
            border-radius: 0 4px 0 4px;
            z-index: 10;
        }
        /* responsive */
        @media (max-width: 959px) {
            .page {
                width: auto;
                margin: 0;
            }
        }
    </style>
 </head>
 <body>
 <div class="page">
    <div class="demo">
        <h1 style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">IBM Plex Mono</h1>
        <pre>.your-style {
    font-family: 'IBM Plex Mono';
    font-weight: normal;
    font-style: normal;
 }</pre>
        <div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">
            <p class="letters">
                abcdefghijklmnopqrstuvwxyz<br>
 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
                0123456789.:,;()*!?'@#<>$%&^+-=~
            </p>
            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
        </div>
    </div>
    <div class="demo">
        <h1 style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">IBM Plex Mono Bold</h1>
        <pre>.your-style {
    font-family: 'IBM Plex Mono';
    font-weight: bold;
    font-style: normal;
 }</pre>
        <div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">
            <p class="letters">
                abcdefghijklmnopqrstuvwxyz<br>
 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
                0123456789.:,;()*!?'@#<>$%&^+-=~
            </p>
            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
        </div>
    </div>
 </div>
 </body>
 </html>
--- a/src/fonts/stylesheet.css
+++ b/src/fonts/stylesheet.css
@ -0,0 +1,24 @@
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('IBMPlexMono.eot');
    src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
        url('IBMPlexMono.woff2') format('woff2'),
        url('IBMPlexMono.woff') format('woff'),
        url('IBMPlexMono.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
 }
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('IBMPlexMono-Bold.eot');
    src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
        url('IBMPlexMono-Bold.woff2') format('woff2'),
        url('IBMPlexMono-Bold.woff') format('woff'),
        url('IBMPlexMono-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
 }
--- a/src/icons/add.svg
+++ b/src/icons/add.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 d="M12 4C12.5523 4 13 4.44772 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44772 11.4477 4 12 4Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/archive.svg
+++ b/src/icons/archive.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 d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V7C22 7.74708 21.5904 8.39848 20.9835 8.74188C20.9944 8.82638 21 8.91253 21 9V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V9C3 8.91253 3.00561 8.82638 3.0165 8.74188C2.40961 8.39848 2 7.74707 2 7V5ZM20 7V5H4V7H20ZM5 9V19H19V9H5ZM8 12C8 11.4477 8.44772 11 9 11H15C15.5523 11 16 11.4477 16 12C16 12.5523 15.5523 13 15 13H9C8.44772 13 8 12.5523 8 12Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/arrow-down.svg
+++ b/src/icons/arrow-down.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 d="M12 4C12.5523 4 13 4.44772 13 5V16.5858L17.2929 12.2929C17.6834 11.9024 18.3166 11.9024 18.7071 12.2929C19.0976 12.6834 19.0976 13.3166 18.7071 13.7071L12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L5.29289 13.7071C4.90237 13.3166 4.90237 12.6834 5.29289 12.2929C5.68342 11.9024 6.31658 11.9024 6.70711 12.2929L11 16.5858V5C11 4.44772 11.4477 4 12 4Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/arrow-left-down.svg
+++ b/src/icons/arrow-left-down.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 d="M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L9.41421 16L15 16C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18L7 18C6.44772 18 6 17.5523 6 17L6 9C6 8.44771 6.44772 8 7 8C7.55228 8 8 8.44771 8 9L8 14.5858L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/arrow-left-up.svg
+++ b/src/icons/arrow-left-up.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 d="M8 9.41421L8 15C8 15.5523 7.55228 16 7 16C6.44772 16 6 15.5523 6 15L6 7C6 6.44772 6.44772 6 7 6L15 6C15.5523 6 16 6.44772 16 7C16 7.55228 15.5523 8 15 8L9.41421 8L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L8 9.41421Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/arrow-left.svg
+++ b/src/icons/arrow-left.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 d="M11.7071 5.29289C12.0976 5.68342 12.0976 6.31658 11.7071 6.70711L7.41421 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H7.41421L11.7071 17.2929C12.0976 17.6834 12.0976 18.3166 11.7071 18.7071C11.3166 19.0976 10.6834 19.0976 10.2929 18.7071L4.29289 12.7071C4.10536 12.5196 4 12.2652 4 12C4 11.7348 4.10536 11.4804 4.29289 11.2929L10.2929 5.29289C10.6834 4.90237 11.3166 4.90237 11.7071 5.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/arrow-right-down.svg
+++ b/src/icons/arrow-right-down.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 d="M6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L16 14.5858L16 9C16 8.44772 16.4477 8 17 8C17.5523 8 18 8.44772 18 9L18 17C18 17.5523 17.5523 18 17 18H9C8.44771 18 8 17.5523 8 17C8 16.4477 8.44771 16 9 16H14.5858L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/arrow-right-up.svg
+++ b/src/icons/arrow-right-up.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 d="M8 7C8 6.44772 8.44772 6 9 6L17 6C17.5523 6 18 6.44772 18 7V15C18 15.5523 17.5523 16 17 16C16.4477 16 16 15.5523 16 15V9.41421L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L14.5858 8L9 8C8.44772 8 8 7.55228 8 7Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/arrow-right.svg
+++ b/src/icons/arrow-right.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 d="M12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289L19.7071 11.2929C19.8946 11.4804 20 11.7348 20 12C20 12.2652 19.8946 12.5196 19.7071 12.7071L13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071C11.9024 18.3166 11.9024 17.6834 12.2929 17.2929L16.5858 13L5 13C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11L16.5858 11L12.2929 6.70711C11.9024 6.31658 11.9024 5.68342 12.2929 5.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/arrow-up.svg
+++ b/src/icons/arrow-up.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 d="M12 4C12.2652 4 12.5196 4.10536 12.7071 4.29289L18.7071 10.2929C19.0976 10.6834 19.0976 11.3166 18.7071 11.7071C18.3166 12.0976 17.6834 12.0976 17.2929 11.7071L13 7.41421L13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19L11 7.41421L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071C4.90237 11.3166 4.90237 10.6834 5.29289 10.2929L11.2929 4.29289C11.4804 4.10536 11.7348 4 12 4Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/attachment.svg
+++ b/src/icons/attachment.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 d="M19.4628 5.57572C18.7755 4.82596 17.5344 4.77976 16.7071 5.60711L8.60706 13.7071C8.39758 13.9166 8.39758 14.1834 8.60706 14.3929C8.81653 14.6024 9.08337 14.6024 9.29284 14.3929L15.9928 7.69289C16.3834 7.30237 17.0165 7.30237 17.4071 7.69289C17.7976 8.08342 17.7976 8.71658 17.4071 9.10711L10.7071 15.8071C9.71653 16.7976 8.18337 16.7976 7.19284 15.8071C6.20232 14.8166 6.20232 13.2834 7.19284 12.2929L15.2928 4.19289C16.8604 2.62536 19.4077 2.57435 20.9223 4.2082C22.4746 5.77661 22.5203 8.31156 20.8928 9.82132L11.4071 19.3071C9.21653 21.4976 5.78337 21.4976 3.59284 19.3071C1.40232 17.1166 1.40232 13.6834 3.59284 11.4929L11.6928 3.39289C12.0834 3.00237 12.7165 3.00237 13.1071 3.39289C13.4976 3.78342 13.4976 4.41658 13.1071 4.80711L5.00706 12.9071C3.59758 14.3166 3.59758 16.4834 5.00706 17.8929C6.41653 19.3024 8.58337 19.3024 9.99284 17.8929L19.4928 8.39289C19.5031 8.38265 19.5135 8.37263 19.5242 8.36284C20.274 7.67556 20.3202 6.43445 19.4928 5.60711C19.4826 5.59686 19.4726 5.5864 19.4628 5.57572Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/backspace.svg
+++ b/src/icons/backspace.svg
@ -0,0 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M17.7072 8.29289C18.0977 8.68342 18.0977 9.31658 17.7072 9.70711L15.4143 12L17.7072 14.2929C18.0977 14.6834 18.0977 15.3166 17.7072 15.7071C17.3166 16.0976 16.6835 16.0976 16.293 15.7071L14.0001 13.4142L11.7072 15.7071C11.3166 16.0976 10.6835 16.0976 10.293 15.7071C9.90243 15.3166 9.90243 14.6834 10.293 14.2929L12.5858 12L10.293 9.70711C9.90243 9.31658 9.90243 8.68342 10.293 8.29289C10.6835 7.90237 11.3166 7.90237 11.7072 8.29289L14.0001 10.5858L16.293 8.29289C16.6835 7.90237 17.3166 7.90237 17.7072 8.29289Z" fill="#0D0D0D"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M22.0001 5C22.0001 4.44772 21.5523 4 21.0001 4H9.46C8.87615 4 8.32145 4.25513 7.94148 4.69842L2.79863 10.6984C2.15664 11.4474 2.15664 12.5526 2.79863 13.3016L7.94148 19.3016C8.32145 19.7449 8.87615 20 9.46 20H21.0001C21.5523 20 22.0001 19.5523 22.0001 19V5ZM20.0001 18H9.46L4.31714 12L9.46 6H20.0001V18Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/ban.svg
+++ b/src/icons/ban.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 d="M5.68014 7.09436C4.62708 8.44904 4 10.1513 4 12C4 16.4183 7.58172 20 12 20C13.8487 20 15.551 19.3729 16.9056 18.3199L5.68014 7.09436ZM7.09436 5.68014L18.3199 16.9056C19.3729 15.551 20 13.8487 20 12C20 7.58172 16.4183 4 12 4C10.1513 4 8.44904 4.62708 7.09436 5.68014ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/bar-chart-alt.svg
+++ b/src/icons/bar-chart-alt.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 d="M12 4C12.5523 4 13 4.44772 13 5V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V5C11 4.44772 11.4477 4 12 4ZM17 8C17.5523 8 18 8.44772 18 9V19C18 19.5523 17.5523 20 17 20C16.4477 20 16 19.5523 16 19V9C16 8.44772 16.4477 8 17 8ZM7 12C7.55228 12 8 12.4477 8 13V19C8 19.5523 7.55228 20 7 20C6.44772 20 6 19.5523 6 19V13C6 12.4477 6.44772 12 7 12Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/bar-chart.svg
+++ b/src/icons/bar-chart.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 d="M3 5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5ZM19 5H5V19H19V5ZM12 7C12.5523 7 13 7.44772 13 8V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V8C11 7.44772 11.4477 7 12 7ZM16 9C16.5523 9 17 9.44772 17 10V16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16V10C15 9.44772 15.4477 9 16 9ZM8 11C8.55228 11 9 11.4477 9 12V16C9 16.5523 8.55228 17 8 17C7.44772 17 7 16.5523 7 16V12C7 11.4477 7.44772 11 8 11Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/board.svg
+++ b/src/icons/board.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 d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V19C22 20.1046 21.1046 21 20 21H4C2.89543 21 2 20.1046 2 19V5ZM8 5H4V19H8V5ZM10 5V19H14V5H10ZM16 5V19H20V5H16Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/book.svg
+++ b/src/icons/book.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 d="M4 6.6335C4.13986 6.57696 4.308 6.51452 4.50288 6.45153C5.19213 6.22874 6.21301 6 7.5 6C8.78699 6 9.80787 6.22874 10.4971 6.45153C10.692 6.51452 10.8601 6.57696 11 6.6335V17.5129C10.1488 17.2485 8.96016 17 7.5 17C6.03984 17 4.85122 17.2485 4 17.5129V6.6335ZM12 4.88528C11.7743 4.78519 11.4765 4.66622 11.1123 4.54847C10.2546 4.27126 9.02551 4 7.5 4C5.97449 4 4.74537 4.27126 3.88775 4.54847C3.45896 4.68707 3.12235 4.82736 2.88689 4.93656C2.76911 4.99119 2.67645 5.03812 2.61002 5.07329C2.5768 5.09089 2.55011 5.10555 2.5301 5.11679L2.5051 5.131L2.49638 5.13607L2.49297 5.13807L2.49151 5.13893C2.48954 5.1401 2.2451 5.28495 2.4902 5.13971C2.18633 5.31978 2 5.64679 2 6V19C2 19.3593 2.19275 19.691 2.50493 19.8689C2.8169 20.0466 3.20021 20.0435 3.50921 19.8606C3.50648 19.8622 3.50477 19.8632 3.50477 19.8632L3.50609 19.8625L3.50765 19.8616L3.50921 19.8606C3.51529 19.8572 3.52757 19.8505 3.54599 19.8408C3.58283 19.8213 3.64398 19.7901 3.72834 19.7509C3.89718 19.6726 4.15822 19.5629 4.50288 19.4515C5.19213 19.2287 6.21301 19 7.5 19C8.78699 19 9.80787 19.2287 10.4971 19.4515C10.8418 19.5629 11.1028 19.6726 11.2717 19.7509C11.356 19.7901 11.4172 19.8213 11.454 19.8408C11.4724 19.8505 11.4847 19.8573 11.4908 19.8608C11.4936 19.8623 11.4952 19.8632 11.4952 19.8632M11.4952 19.8632L11.4939 19.8625L11.4924 19.8616L11.4908 19.8608C11.8048 20.0462 12.1954 20.0463 12.5092 19.8606C12.5153 19.8572 12.5276 19.8505 12.546 19.8408C12.5828 19.8213 12.644 19.7901 12.7283 19.7509C12.8972 19.6726 13.1582 19.5629 13.5029 19.4515C14.1921 19.2287 15.213 19 16.5 19C17.787 19 18.8079 19.2287 19.4971 19.4515C19.8418 19.5629 20.1028 19.6726 20.2717 19.7509C20.356 19.7901 20.4172 19.8213 20.454 19.8408C20.4724 19.8505 20.4847 19.8573 20.4908 19.8608L20.4919 19.8613C20.8007 20.0435 21.1835 20.0464 21.4951 19.8689C21.8072 19.691 22 19.3593 22 19V6C22 5.64679 21.8137 5.31978 21.5098 5.13971L21.5085 5.13893L21.507 5.13807L21.5036 5.13607L21.4949 5.131L21.4699 5.11679C21.4499 5.10555 21.4232 5.09089 21.39 5.07329C21.3236 5.03812 21.2309 4.99119 21.1131 4.93656C20.8776 4.82736 20.541 4.68707 20.1123 4.54847C19.2546 4.27126 18.0255 4 16.5 4C14.9745 4 13.7454 4.27126 12.8877 4.54847C12.5235 4.66622 12.2257 4.78519 12 4.88528M20 6.6335V17.5129C19.1488 17.2485 17.9602 17 16.5 17C15.0398 17 13.8512 17.2485 13 17.5129V6.6335C13.1399 6.57696 13.308 6.51452 13.5029 6.45153C14.1921 6.22874 15.213 6 16.5 6C17.787 6 18.8079 6.22874 19.4971 6.45153C19.692 6.51452 19.8601 6.57696 20 6.6335ZM20.4908 6.86075C20.4935 6.86228 20.4952 6.86325 20.4952 6.86325L20.4939 6.86248L20.4908 6.86075ZM20.4908 19.8608L20.4941 19.8626L20.4919 19.8613" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/bookmark.svg
+++ b/src/icons/bookmark.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 d="M4 4C4 2.89543 4.89543 2 6 2H18C19.1046 2 20 2.89543 20 4V21C20 21.3746 19.7907 21.7178 19.4576 21.8892C19.1245 22.0606 18.7236 22.0315 18.4188 21.8137L12 17.2289L5.58124 21.8137C5.27642 22.0315 4.87549 22.0606 4.54242 21.8892C4.20935 21.7178 4 21.3746 4 21V4ZM18 4L6 4V19.0568L11.4188 15.1863C11.7665 14.9379 12.2335 14.9379 12.5812 15.1863L18 19.0568V4Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/calendar.svg
+++ b/src/icons/calendar.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 d="M9 2C9.55228 2 10 2.44772 10 3V4H14V3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V4H19C20.1046 4 21 4.89543 21 6V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V6C3 4.89543 3.89543 4 5 4H8V3C8 2.44772 8.44772 2 9 2ZM8 6H5V9H19V6H16V7C16 7.55228 15.5523 8 15 8C14.4477 8 14 7.55228 14 7V6H10V7C10 7.55228 9.55228 8 9 8C8.44772 8 8 7.55228 8 7V6ZM19 11H5V19H19V11Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/call.svg
+++ b/src/icons/call.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 d="M3.83302 4H8.32296L9.77018 7.61803L7.4453 9.16795C7.1671 9.35342 7 9.66565 7 10C7.00254 10.0936 7 10.001 7 10.001L7 10.002L7.00001 10.0043L7.00004 10.0093L7.00018 10.0217C7.00033 10.0309 7.00058 10.0421 7.00101 10.0552C7.00185 10.0814 7.00338 10.1153 7.00612 10.1564C7.01159 10.2385 7.02191 10.3494 7.0413 10.4852C7.08005 10.7565 7.15527 11.1281 7.30131 11.5662C7.59455 12.4459 8.17073 13.5849 9.29289 14.7071C10.4151 15.8293 11.5541 16.4054 12.4338 16.6987C12.8719 16.8447 13.2435 16.9199 13.5148 16.9587C13.6506 16.9781 13.7615 16.9884 13.8436 16.9939C13.8847 16.9966 13.9186 16.9981 13.9448 16.999C13.9579 16.9994 13.9691 16.9997 13.9783 16.9998L13.9907 17L13.9957 17L13.9979 17L13.999 17C13.999 17 14.1106 16.9939 14 17C14.3788 17 14.725 16.786 14.8944 16.4472L15.5641 15.1078L20 15.8471V20.167C17.8889 20.4723 12.1874 20.7732 7.7071 16.2929C3.2268 11.8126 3.52772 6.1111 3.83302 4ZM9.07364 10.4861L10.8796 9.28213C11.6665 8.75751 11.9784 7.75338 11.6271 6.87525L10.1799 3.25722C9.87619 2.4979 9.14077 2 8.32296 2H3.78077C2.87226 2 2.01708 2.63116 1.86794 3.6169C1.52863 5.8595 1.06678 12.481 6.29289 17.7071C11.519 22.9332 18.1405 22.4714 20.3831 22.1321C21.3688 21.9829 22 21.1277 22 20.2192V15.8471C22 14.8694 21.2932 14.0351 20.3288 13.8743L15.8929 13.135C15.0269 12.9907 14.1679 13.4281 13.7753 14.2134L13.4288 14.9064C13.3199 14.8796 13.1983 14.8453 13.0662 14.8013C12.4459 14.5946 11.5849 14.1707 10.7071 13.2929C9.82927 12.4151 9.40545 11.5541 9.19868 10.9338C9.14281 10.7662 9.10259 10.6154 9.07364 10.4861Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/camera.svg
+++ b/src/icons/camera.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 d="M8.29289 4.29289C8.48043 4.10536 8.73478 4 9 4H15C15.2652 4 15.5196 4.10536 15.7071 4.29289L17.4142 6H20C21.1046 6 22 6.89543 22 8V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V8C2 6.89543 2.89543 6 4 6H6.58579L8.29289 4.29289ZM9.41421 6L7.70711 7.70711C7.51957 7.89464 7.26522 8 7 8L4 8V18H20V8H17C16.7348 8 16.4804 7.89464 16.2929 7.70711L14.5858 6H9.41421ZM12 10.5C10.8954 10.5 10 11.3954 10 12.5C10 13.6046 10.8954 14.5 12 14.5C13.1046 14.5 14 13.6046 14 12.5C14 11.3954 13.1046 10.5 12 10.5ZM8 12.5C8 10.2909 9.79086 8.5 12 8.5C14.2091 8.5 16 10.2909 16 12.5C16 14.7091 14.2091 16.5 12 16.5C9.79086 16.5 8 14.7091 8 12.5Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/caret-down.svg
+++ b/src/icons/caret-down.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 d="M17 10L12 16L7 10H17Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/caret-left.svg
+++ b/src/icons/caret-left.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 d="M14 17L8 12L14 7L14 17Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/caret-right.svg
+++ b/src/icons/caret-right.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 d="M10 7L16 12L10 17L10 7Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/caret-up.svg
+++ b/src/icons/caret-up.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 d="M7 14L12 8L17 14L7 14Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/check.svg
+++ b/src/icons/check.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 d="M20.6644 5.25259C21.0772 5.61951 21.1143 6.25158 20.7474 6.66437L10.0808 18.6644C9.89099 18.8779 9.61898 19 9.33334 19C9.04771 19 8.7757 18.8779 8.58593 18.6644L3.2526 12.6644C2.88568 12.2516 2.92286 11.6195 3.33565 11.2526C3.74843 10.8857 4.3805 10.9229 4.74742 11.3356L9.33334 16.4948L19.2526 5.33564C19.6195 4.92286 20.2516 4.88568 20.6644 5.25259Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/chevron-double-down.svg
+++ b/src/icons/chevron-double-down.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 d="M5.29289 6.29289C5.68342 5.90237 6.31658 5.90237 6.70711 6.29289L12 11.5858L17.2929 6.2929C17.6834 5.90237 18.3166 5.90237 18.7071 6.2929C19.0976 6.68342 19.0976 7.31658 18.7071 7.70711L12.7071 13.7071C12.3166 14.0976 11.6834 14.0976 11.2929 13.7071L5.29289 7.70711C4.90237 7.31658 4.90237 6.68342 5.29289 6.29289ZM5.29289 12.2929C5.68342 11.9024 6.31658 11.9024 6.70711 12.2929L12 17.5858L17.2929 12.2929C17.6834 11.9024 18.3166 11.9024 18.7071 12.2929C19.0976 12.6834 19.0976 13.3166 18.7071 13.7071L12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L5.29289 13.7071C4.90237 13.3166 4.90237 12.6834 5.29289 12.2929Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/chevron-double-left.svg
+++ b/src/icons/chevron-double-left.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 d="M17.7071 5.29289C18.0976 5.68342 18.0976 6.31658 17.7071 6.70711L12.4142 12L17.7071 17.2929C18.0976 17.6834 18.0976 18.3166 17.7071 18.7071C17.3166 19.0976 16.6834 19.0976 16.2929 18.7071L10.2929 12.7071C9.90237 12.3166 9.90237 11.6834 10.2929 11.2929L16.2929 5.29289C16.6834 4.90237 17.3166 4.90237 17.7071 5.29289ZM11.7071 5.29289C12.0976 5.68342 12.0976 6.31658 11.7071 6.70711L6.41421 12L11.7071 17.2929C12.0976 17.6834 12.0976 18.3166 11.7071 18.7071C11.3166 19.0976 10.6834 19.0976 10.2929 18.7071L4.29289 12.7071C4.10536 12.5196 4 12.2652 4 12C4 11.7348 4.10536 11.4804 4.29289 11.2929L10.2929 5.29289C10.6834 4.90237 11.3166 4.90237 11.7071 5.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/chevron-double-right.svg
+++ b/src/icons/chevron-double-right.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 d="M12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289L19.7071 11.2929C20.0976 11.6834 20.0976 12.3166 19.7071 12.7071L13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071C11.9024 18.3166 11.9024 17.6834 12.2929 17.2929L17.5858 12L12.2929 6.70711C11.9024 6.31658 11.9024 5.68342 12.2929 5.29289ZM6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289L13.7071 11.2929C13.8946 11.4804 14 11.7348 14 12C14 12.2652 13.8946 12.5196 13.7071 12.7071L7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071C5.90237 18.3166 5.90237 17.6834 6.29289 17.2929L11.5858 12L6.29289 6.70711C5.90237 6.31658 5.90237 5.68342 6.29289 5.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/chevron-double-up.svg
+++ b/src/icons/chevron-double-up.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 d="M11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289L18.7071 10.2929C19.0976 10.6834 19.0976 11.3166 18.7071 11.7071C18.3166 12.0976 17.6834 12.0976 17.2929 11.7071L12 6.41421L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071C4.90237 11.3166 4.90237 10.6834 5.29289 10.2929L11.2929 4.29289ZM12 12.4142L6.70711 17.7071C6.31658 18.0976 5.68342 18.0976 5.29289 17.7071C4.90237 17.3166 4.90237 16.6834 5.29289 16.2929L11.2929 10.2929C11.6834 9.90237 12.3166 9.90237 12.7071 10.2929L18.7071 16.2929C19.0976 16.6834 19.0976 17.3166 18.7071 17.7071C18.3166 18.0976 17.6834 18.0976 17.2929 17.7071L12 12.4142Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/chevron-down.svg
+++ b/src/icons/chevron-down.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 d="M5.29289 9.29289C5.68342 8.90237 6.31658 8.90237 6.70711 9.29289L12 14.5858L17.2929 9.29289C17.6834 8.90237 18.3166 8.90237 18.7071 9.29289C19.0976 9.68342 19.0976 10.3166 18.7071 10.7071L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L5.29289 10.7071C4.90237 10.3166 4.90237 9.68342 5.29289 9.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/chevron-left.svg
+++ b/src/icons/chevron-left.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 d="M14.7071 5.29289C15.0976 5.68342 15.0976 6.31658 14.7071 6.70711L9.41421 12L14.7071 17.2929C15.0976 17.6834 15.0976 18.3166 14.7071 18.7071C14.3166 19.0976 13.6834 19.0976 13.2929 18.7071L7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929L13.2929 5.29289C13.6834 4.90237 14.3166 4.90237 14.7071 5.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/chevron-right.svg
+++ b/src/icons/chevron-right.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 d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/chevron-up.svg
+++ b/src/icons/chevron-up.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 d="M11.2929 7.29289C11.6834 6.90237 12.3166 6.90237 12.7071 7.29289L18.7071 13.2929C19.0976 13.6834 19.0976 14.3166 18.7071 14.7071C18.3166 15.0976 17.6834 15.0976 17.2929 14.7071L12 9.41421L6.70711 14.7071C6.31658 15.0976 5.68342 15.0976 5.29289 14.7071C4.90237 14.3166 4.90237 13.6834 5.29289 13.2929L11.2929 7.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-add.svg
+++ b/src/icons/circle-add.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 d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-arrow-down.svg
+++ b/src/icons/circle-arrow-down.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 d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 6C12.5523 6 13 6.44772 13 7V14.5858L15.2929 12.2929C15.6834 11.9024 16.3166 11.9024 16.7071 12.2929C17.0976 12.6834 17.0976 13.3166 16.7071 13.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L7.29289 13.7071C6.90237 13.3166 6.90237 12.6834 7.29289 12.2929C7.68342 11.9024 8.31658 11.9024 8.70711 12.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-arrow-left.svg
+++ b/src/icons/circle-arrow-left.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 d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.7071 7.29289C12.0976 7.68342 12.0976 8.31658 11.7071 8.70711L9.41421 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H9.41421L11.7071 15.2929C12.0976 15.6834 12.0976 16.3166 11.7071 16.7071C11.3166 17.0976 10.6834 17.0976 10.2929 16.7071L6.29289 12.7071C5.90237 12.3166 5.90237 11.6834 6.29289 11.2929L10.2929 7.29289C10.6834 6.90237 11.3166 6.90237 11.7071 7.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-arrow-right.svg
+++ b/src/icons/circle-arrow-right.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 d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12.2929 7.29289C12.6834 6.90237 13.3166 6.90237 13.7071 7.29289L17.7071 11.2929C18.0976 11.6834 18.0976 12.3166 17.7071 12.7071L13.7071 16.7071C13.3166 17.0976 12.6834 17.0976 12.2929 16.7071C11.9024 16.3166 11.9024 15.6834 12.2929 15.2929L14.5858 13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H14.5858L12.2929 8.70711C11.9024 8.31658 11.9024 7.68342 12.2929 7.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-arrow-up.svg
+++ b/src/icons/circle-arrow-up.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 d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11 9.41421L8.70711 11.7071C8.31658 12.0976 7.68342 12.0976 7.29289 11.7071C6.90237 11.3166 6.90237 10.6834 7.29289 10.2929L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L16.7071 10.2929C17.0976 10.6834 17.0976 11.3166 16.7071 11.7071C16.3166 12.0976 15.6834 12.0976 15.2929 11.7071L13 9.41421V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V9.41421Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-check.svg
+++ b/src/icons/circle-check.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 d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16.6644 8.75259C17.0771 9.11951 17.1143 9.75158 16.7474 10.1644L11.4141 16.1644C11.2243 16.3779 10.9523 16.5 10.6667 16.5C10.381 16.5 10.109 16.3779 9.91926 16.1644L7.25259 13.1644C6.88567 12.7516 6.92285 12.1195 7.33564 11.7526C7.74842 11.3857 8.38049 11.4229 8.74741 11.8356L10.6667 13.9948L15.2526 8.83564C15.6195 8.42285 16.2516 8.38567 16.6644 8.75259Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-error.svg
+++ b/src/icons/circle-error.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 d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM7.79289 7.79289C8.18342 7.40237 8.81658 7.40237 9.20711 7.79289L12 10.5858L14.7929 7.79289C15.1834 7.40237 15.8166 7.40237 16.2071 7.79289C16.5976 8.18342 16.5976 8.81658 16.2071 9.20711L13.4142 12L16.2071 14.7929C16.5976 15.1834 16.5976 15.8166 16.2071 16.2071C15.8166 16.5976 15.1834 16.5976 14.7929 16.2071L12 13.4142L9.20711 16.2071C8.81658 16.5976 8.18342 16.5976 7.79289 16.2071C7.40237 15.8166 7.40237 15.1834 7.79289 14.7929L10.5858 12L7.79289 9.20711C7.40237 8.81658 7.40237 8.18342 7.79289 7.79289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-help.svg
+++ b/src/icons/circle-help.svg
@ -0,0 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#0D0D0D"/>
 <path d="M12 14C11.4477 14 11 13.5523 11 13V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13C13 13.5523 12.5523 14 12 14Z" fill="#0D0D0D"/>
 <path d="M10.5 16.5C10.5 15.6716 11.1716 15 12 15C12.8284 15 13.5 15.6716 13.5 16.5C13.5 17.3284 12.8284 18 12 18C11.1716 18 10.5 17.3284 10.5 16.5Z" fill="#0D0D0D"/>
 <path d="M12.3899 7.81137C11.4329 7.7658 10.6304 8.3004 10.4864 9.1644C10.3956 9.70917 9.88037 10.0772 9.3356 9.9864C8.79083 9.8956 8.42281 9.38037 8.51361 8.8356C8.86961 6.69961 10.8171 5.73421 12.4851 5.81363C13.3395 5.85432 14.2176 6.16099 14.8937 6.79278C15.5866 7.44027 16 8.36777 16 9.5C16 10.7913 15.4919 11.7489 14.6172 12.3321C13.8141 12.8675 12.8295 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.6705 11 13.1859 10.8825 13.5078 10.668C13.7581 10.5011 14 10.2087 14 9.5C14 8.88224 13.7884 8.49723 13.5282 8.2541C13.2512 7.99526 12.848 7.83318 12.3899 7.81137Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-information.svg
+++ b/src/icons/circle-information.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="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#0D0D0D"/>
 <path d="M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z" fill="#0D0D0D"/>
 <path d="M13.5 7.5C13.5 8.32843 12.8284 9 12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-remove.svg
+++ b/src/icons/circle-remove.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 d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM7 12C7 11.4477 7.44772 11 8 11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H8C7.44772 13 7 12.5523 7 12Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle-warning.svg
+++ b/src/icons/circle-warning.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="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#0D0D0D"/>
 <path d="M12 14C11.4477 14 11 13.5523 11 13L11 7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7L13 13C13 13.5523 12.5523 14 12 14Z" fill="#0D0D0D"/>
 <path d="M10.5 16.5C10.5 15.6716 11.1716 15 12 15C12.8284 15 13.5 15.6716 13.5 16.5C13.5 17.3284 12.8284 18 12 18C11.1716 18 10.5 17.3284 10.5 16.5Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/circle.svg
+++ b/src/icons/circle.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 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/clipboard-check.svg
+++ b/src/icons/clipboard-check.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 d="M8 3C8 2.44772 8.44772 2 9 2H15C15.5523 2 16 2.44772 16 3H18C19.1046 3 20 3.89543 20 5V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V5C4 3.89543 4.89543 3 6 3H8ZM8 5H6V20H18V5H16V6C16 6.55228 15.5523 7 15 7H9C8.44772 7 8 6.55228 8 6V5ZM14 4H10V5H14V4ZM15.7071 10.7929C16.0976 11.1834 16.0976 11.8166 15.7071 12.2071L11.7071 16.2071C11.3166 16.5976 10.6834 16.5976 10.2929 16.2071L8.29289 14.2071C7.90237 13.8166 7.90237 13.1834 8.29289 12.7929C8.68342 12.4024 9.31658 12.4024 9.70711 12.7929L11 14.0858L14.2929 10.7929C14.6834 10.4024 15.3166 10.4024 15.7071 10.7929Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/clipboard-list.svg
+++ b/src/icons/clipboard-list.svg
@ -0,0 +1,9 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9 11.5C9.55228 11.5 10 11.0523 10 10.5C10 9.94772 9.55228 9.5 9 9.5C8.44772 9.5 8 9.94772 8 10.5C8 11.0523 8.44772 11.5 9 11.5Z" fill="#0D0D0D"/>
 <path d="M11 10.5C11 9.94772 11.4477 9.5 12 9.5H15C15.5523 9.5 16 9.94772 16 10.5C16 11.0523 15.5523 11.5 15 11.5H12C11.4477 11.5 11 11.0523 11 10.5Z" fill="#0D0D0D"/>
 <path d="M12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5H15C15.5523 14.5 16 14.0523 16 13.5C16 12.9477 15.5523 12.5 15 12.5H12Z" fill="#0D0D0D"/>
 <path d="M12 15.5C11.4477 15.5 11 15.9477 11 16.5C11 17.0523 11.4477 17.5 12 17.5H15C15.5523 17.5 16 17.0523 16 16.5C16 15.9477 15.5523 15.5 15 15.5H12Z" fill="#0D0D0D"/>
 <path d="M10 13.5C10 14.0523 9.55228 14.5 9 14.5C8.44772 14.5 8 14.0523 8 13.5C8 12.9477 8.44772 12.5 9 12.5C9.55228 12.5 10 12.9477 10 13.5Z" fill="#0D0D0D"/>
 <path d="M9 17.5C9.55228 17.5 10 17.0523 10 16.5C10 15.9477 9.55228 15.5 9 15.5C8.44772 15.5 8 15.9477 8 16.5C8 17.0523 8.44772 17.5 9 17.5Z" fill="#0D0D0D"/>
 <path d="M9 2C8.44772 2 8 2.44772 8 3H6C4.89543 3 4 3.89543 4 5V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V5C20 3.89543 19.1046 3 18 3H16C16 2.44772 15.5523 2 15 2H9ZM16 5H18V20H6V5H8V6C8 6.55228 8.44772 7 9 7H15C15.5523 7 16 6.55228 16 6V5ZM10 5V4H14V5H10Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/clipboard.svg
+++ b/src/icons/clipboard.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 d="M8 3C8 2.44772 8.44772 2 9 2H15C15.5523 2 16 2.44772 16 3H18C19.1046 3 20 3.89543 20 5V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V5C4 3.89543 4.89543 3 6 3H8ZM8 5H6V20H18V5H16V6C16 6.55228 15.5523 7 15 7H9C8.44772 7 8 6.55228 8 6V5ZM14 4H10V5H14V4Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/clock.svg
+++ b/src/icons/clock.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 d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 6C12.5523 6 13 6.44772 13 7V11.5858L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L11.2929 12.7071C11.1054 12.5196 11 12.2652 11 12V7C11 6.44772 11.4477 6 12 6Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/close.svg
+++ b/src/icons/close.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 d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/cloud-download.svg
+++ b/src/icons/cloud-download.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 d="M11 4C8.79082 4 7 5.79085 7 8C7 8.03242 7.00047 8.06627 7.00131 8.10224C7.01219 8.56727 6.70099 8.97839 6.25047 9.09416C4.95577 9.42685 4 10.6031 4 12C4 13.6569 5.34317 15 7 15H8C8.55228 15 9 15.4477 9 16C9 16.5523 8.55228 17 8 17H7C4.23861 17 2 14.7614 2 12C2 9.93746 3.2482 8.16845 5.02926 7.40373C5.32856 4.36995 7.88746 2 11 2C13.2236 2 15.1629 3.20934 16.199 5.00324C19.4207 5.10823 22 7.75289 22 11C22 14.3137 19.3138 17 16 17C15.4477 17 15 16.5523 15 16C15 15.4477 15.4477 15 16 15C18.2092 15 20 13.2091 20 11C20 8.79085 18.2092 7 16 7C15.8893 7 15.78 7.00447 15.6718 7.01322C15.2449 7.04776 14.8434 6.8066 14.6734 6.4135C14.0584 4.99174 12.6439 4 11 4ZM12 10C12.5523 10 13 10.4477 13 11L13 18.5858L13.2929 18.2929C13.6834 17.9024 14.3166 17.9024 14.7071 18.2929C15.0976 18.6834 15.0976 19.3166 14.7071 19.7071L12.7071 21.7071C12.5196 21.8946 12.2652 22 12 22C11.7348 22 11.4804 21.8946 11.2929 21.7071L9.29289 19.7071C8.90237 19.3166 8.90237 18.6834 9.29289 18.2929C9.68342 17.9024 10.3166 17.9024 10.7071 18.2929L11 18.5858L11 11C11 10.4477 11.4477 10 12 10Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/cloud-upload.svg
+++ b/src/icons/cloud-upload.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 d="M11 4C8.79082 4 7 5.79085 7 8C7 8.03242 7.00047 8.06627 7.00131 8.10224C7.01219 8.56727 6.70099 8.97839 6.25047 9.09416C4.95577 9.42685 4 10.6031 4 12C4 13.6569 5.34317 15 7 15H8C8.55228 15 9 15.4477 9 16C9 16.5523 8.55228 17 8 17H7C4.23861 17 2 14.7614 2 12C2 9.93746 3.2482 8.16845 5.02926 7.40373C5.32856 4.36995 7.88746 2 11 2C13.2236 2 15.1629 3.20934 16.199 5.00324C19.4207 5.10823 22 7.75289 22 11C22 14.3137 19.3138 17 16 17C15.4477 17 15 16.5523 15 16C15 15.4477 15.4477 15 16 15C18.2092 15 20 13.2091 20 11C20 8.79085 18.2092 7 16 7C15.8893 7 15.78 7.00447 15.6718 7.01322C15.2449 7.04776 14.8434 6.8066 14.6734 6.4135C14.0584 4.99174 12.6439 4 11 4ZM11.2929 9.29289C11.6834 8.90237 12.3166 8.90237 12.7071 9.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071C14.3166 13.0976 13.6834 13.0976 13.2929 12.7071L13 12.4142V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V12.4142L10.7071 12.7071C10.3166 13.0976 9.68342 13.0976 9.29289 12.7071C8.90237 12.3166 8.90237 11.6834 9.29289 11.2929L11.2929 9.29289Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/cloud.svg
+++ b/src/icons/cloud.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 d="M5 10C5 6.68629 7.68629 4 11 4C13.627 4 15.858 5.68745 16.6713 8.03713C19.669 8.37085 22 10.9132 22 14C22 17.3137 19.3137 20 16 20H7C4.23858 20 2 17.7614 2 15C2 12.9436 3.24073 11.1787 5.01385 10.4103C5.00466 10.2746 5 10.1378 5 10ZM11 6C8.79086 6 7 7.79086 7 10C7 10.3029 7.03348 10.5967 7.09656 10.8785C7.21716 11.4173 6.8783 11.9519 6.33958 12.0727C5.00015 12.3732 4 13.571 4 15C4 16.6569 5.34315 18 7 18H16C18.2091 18 20 16.2091 20 14C20 11.7909 18.2091 10 16 10C15.9732 10 15.9465 10.0003 15.9198 10.0008C15.4368 10.0102 15.0161 9.67312 14.9201 9.19971C14.5499 7.37395 12.9343 6 11 6Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/computer.svg
+++ b/src/icons/computer.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 d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V16C22 17.1046 21.1046 18 20 18H13V20H16C16.5523 20 17 20.4477 17 21C17 21.5523 16.5523 22 16 22H8C7.44772 22 7 21.5523 7 21C7 20.4477 7.44772 20 8 20H11V18H4C2.89543 18 2 17.1046 2 16V5ZM20 16V5H4V16H20Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/copy.svg
+++ b/src/icons/copy.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 d="M2 4C2 2.89543 2.89543 2 4 2H14C15.1046 2 16 2.89543 16 4V8H20C21.1046 8 22 8.89543 22 10V20C22 21.1046 21.1046 22 20 22H10C8.89543 22 8 21.1046 8 20V16H4C2.89543 16 2 15.1046 2 14V4ZM10 16V20H20V10H16V14C16 15.1046 15.1046 16 14 16H10ZM14 14V4L4 4V14H14Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/credit-card.svg
+++ b/src/icons/credit-card.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 d="M22 6C22 4.89543 21.1046 4 20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6ZM20 8H4L4 6L20 6V8ZM4 11H20V18L4 18L4 11Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/delete-alt.svg
+++ b/src/icons/delete-alt.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 d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/delete.svg
+++ b/src/icons/delete.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 d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/document-add.svg
+++ b/src/icons/document-add.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 d="M4 4C4 2.89543 4.89543 2 6 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289L19.7071 7.29289C19.8946 7.48043 20 7.73478 20 8V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4ZM17.5858 8L14 4.41421V8H17.5858ZM12 4L6 4V20H18V10H13C12.4477 10 12 9.55228 12 9V4ZM12 12C12.5523 12 13 12.4477 13 13V14H14C14.5523 14 15 14.4477 15 15C15 15.5523 14.5523 16 14 16H13V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V16H10C9.44772 16 9 15.5523 9 15C9 14.4477 9.44772 14 10 14H11V13C11 12.4477 11.4477 12 12 12Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/document-check.svg
+++ b/src/icons/document-check.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 d="M4 4C4 2.89543 4.89543 2 6 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289L19.7071 7.29289C19.8946 7.48043 20 7.73478 20 8V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4ZM17.5858 8L14 4.41421V8H17.5858ZM12 4L6 4V20H18V10H13C12.4477 10 12 9.55228 12 9V4ZM15.7071 12.2929C16.0976 12.6834 16.0976 13.3166 15.7071 13.7071L11.7071 17.7071C11.3166 18.0976 10.6834 18.0976 10.2929 17.7071L8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929C8.68342 13.9024 9.31658 13.9024 9.70711 14.2929L11 15.5858L14.2929 12.2929C14.6834 11.9024 15.3166 11.9024 15.7071 12.2929Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/document-download.svg
+++ b/src/icons/document-download.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 d="M4 4C4 2.89543 4.89543 2 6 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289L19.7071 7.29289C19.8946 7.48043 20 7.73478 20 8V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4ZM17.5858 8L14 4.41421V8H17.5858ZM12 4L6 4V20H18V10H13C12.4477 10 12 9.55228 12 9V4ZM12 11.5C12.5523 11.5 13 11.9477 13 12.5V15.0858L13.2929 14.7929C13.6834 14.4024 14.3166 14.4024 14.7071 14.7929C15.0976 15.1834 15.0976 15.8166 14.7071 16.2071L12.7071 18.2071C12.3166 18.5976 11.6834 18.5976 11.2929 18.2071L9.29289 16.2071C8.90237 15.8166 8.90237 15.1834 9.29289 14.7929C9.68342 14.4024 10.3166 14.4024 10.7071 14.7929L11 15.0858L11 12.5C11 11.9477 11.4477 11.5 12 11.5Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/document-empty.svg
+++ b/src/icons/document-empty.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 d="M4 4C4 2.89543 4.89543 2 6 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289L19.7071 7.29289C19.8946 7.48043 20 7.73478 20 8V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4ZM17.5858 8L14 4.41421V8H17.5858ZM12 4L6 4V20H18V10H13C12.4477 10 12 9.55228 12 9V4Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/document-remove.svg
+++ b/src/icons/document-remove.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 d="M4 4C4 2.89543 4.89543 2 6 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289L19.7071 7.29289C19.8946 7.48043 20 7.73478 20 8V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4ZM17.5858 8L14 4.41421V8H17.5858ZM12 4L6 4V20H18V10H13C12.4477 10 12 9.55228 12 9V4ZM9 15C9 14.4477 9.44772 14 10 14H14C14.5523 14 15 14.4477 15 15C15 15.5523 14.5523 16 14 16H10C9.44772 16 9 15.5523 9 15Z" fill="#0D0D0D"/>
 </svg>
--- a/src/icons/document.svg
+++ b/src/icons/document.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 d="M4 4C4 2.89543 4.89543 2 6 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289L19.7071 7.29289C19.8946 7.48043 20 7.73478 20 8V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4ZM17.5858 8L14 4.41421V8H17.5858ZM12 4L6 4V20H18V10H13C12.4477 10 12 9.55228 12 9V4ZM8 13C8 12.4477 8.44772 12 9 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H9C8.44772 14 8 13.5523 8 13ZM8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#0D0D0D"/>
 </svg>