diff --git a/.prettierrc.json b/.prettierrc.json
index 17a23d07d9fe2da12777651d9c9c16d1656a6048..06c8d433b8f896061558cd509c5641143f1b9bfb 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,7 +1,7 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
- "semi": false,
+ "semi": true,
"singleQuote": true,
"printWidth": 100
}
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 7a164c5b0c71a41260fe646aba82b94aac5cffa8..48eccba1f170c927d95ca18d7278a4362b713094 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,7 @@
import type { StorybookConfig } from '@storybook/vue3-vite'
const config: StorybookConfig = {
- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-onboarding',
'@storybook/addon-essentials',
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
new file mode 100644
index 0000000000000000000000000000000000000000..657a1b80ee9ff6812a340b117a507dd94429fb66
--- /dev/null
+++ b/.storybook/manager-head.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <link rel="icon" href="./storybook.ico">
+ <title>Storybook</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index fe415c7f14dd001ec2e72ad6bd5707eca19c96b5..137c52e30e1b5c14c3066bd819bb4e011f22bf1f 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,5 @@
import type { Preview } from '@storybook/vue3'
+import '../src/assets/main.css';
const preview: Preview = {
parameters: {
diff --git a/README.md b/README.md
index e1ed42575e1c0e5427e1d8280e952a0adbd01e70..1976a8ed277d950da9acdc8eb9c84dac9ece3bf4 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,40 @@
-# UI_storybook
+# UI_Storybook
-UI library of components of Vue.
+> UI-библиотека компонентов на Vue, ÑÐ¾Ð·Ð´Ð°Ð½Ð½Ð°Ñ Ñ Ñ†ÐµÐ»ÑŒÑŽ получить опыт
+> и иÑпользовать в других проектах ввиду её предполагаемой в будущем
+> лёгкоÑти и проÑтоте.
-Components list:
--
+## СпиÑок компонентов:
+- TreeList;
+- MenuDial;
+- Slider;
+- Drawer;
+- Modal;
+- SelectButton;
+- Button;
+- ToggleSwitch;
+- Divider;
-## Project Setup
+### ÐаÑтройка окружениÑ
```sh
yarn
```
-### Compile and Hot-Reload for Development
+### ПроÑмотр ÑущеÑтвующих иконок в виде ÑпиÑка и теÑтирование компонентов
```sh
yarn dev
```
-### Type-Check, Compile and Minify for Production
+### Проверка типов, компилÑÑ†Ð¸Ñ Ð¸ Ð¼Ð¸Ð½Ð¸Ð¼Ð¸Ð·Ð°Ñ†Ð¸Ñ Ð´Ð»Ñ production
```sh
yarn build
```
-### Run Unit Tests with [Vitest](https://vitest.dev/)
+## Важные моменты при разработке
-```sh
-yarn test:unit
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-yarn lint
-```
+ПоÑле ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð¸ÐºÐ¾Ð½ÐºÐ¸:
+1. Добавить иконку в iconsSet (src/common/constants/icons);
+2. Добавить иконку в ÑоответÑтвующий маÑÑив в App.vue.
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.js
index 40b84cd9df08124cf7676efbc8e276ecfd71a7bd..977eb79b3f9c499fd658b8c134d06f1a2e2451ea 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,7 +1,7 @@
-import pluginVue from 'eslint-plugin-vue'
-import vueTsEslintConfig from '@vue/eslint-config-typescript'
-import pluginVitest from '@vitest/eslint-plugin'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+import pluginVue from 'eslint-plugin-vue';
+import vueTsEslintConfig from '@vue/eslint-config-typescript';
+import pluginVitest from '@vitest/eslint-plugin';
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
export default [
{
@@ -16,10 +16,15 @@ export default [
...pluginVue.configs['flat/essential'],
...vueTsEslintConfig(),
-
+
{
...pluginVitest.configs.recommended,
files: ['src/**/__tests__/*'],
},
skipFormatting,
-]
+ {
+ rules: {
+ 'vue/multi-word-component-names': 'off',
+ },
+ },
+];
diff --git a/index.html b/index.html
index 7f488bd8d39590f5289c2b73e59df931af6f8e39..0ab5bb43e96dbdfb7b413c47a657a2f1c7ba23be 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
<html lang="">
<head>
<meta charset="UTF-8">
- <link rel="icon" href="/favicon.ico">
+ <link rel="icon" href="/storybook.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Storybook</title>
</head>
diff --git a/package.json b/package.json
index aed89f0ddb010d02327261b2bbf75c65cc4a5c47..5c66f1f72dc9a7db96f506a4591bf6ccb0fcf384 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
"@storybook/vue3-vite": "8.4.5",
"@tsconfig/node22": "^22.0.0",
"@types/jsdom": "^21.1.7",
- "@types/node": "^22.9.0",
+ "@types/node": "^22.10.1",
"@vitejs/plugin-vue": "^5.1.4",
"@vitest/eslint-plugin": "1.1.7",
"@vue/eslint-config-prettier": "^10.1.0",
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/storybook.ico b/public/storybook.ico
new file mode 100644
index 0000000000000000000000000000000000000000..690ee543d1b7a8d727252f9d278e2538ad02a61f
Binary files /dev/null and b/public/storybook.ico differ
diff --git a/src/App.vue b/src/App.vue
index e16c9d3119fd35f7f257f97dd49f35010dadd608..5838a25512df06c7ee27db0df1a554e7fdd2ef17 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,429 @@
<script setup lang="ts">
+import Drawer from '@stories/components/Drawer/Drawer.vue';
+import { ref } from 'vue';
+import Age18Icon from '@stories/icons/Mono/Age18Icon.vue';
+import AlarmIcon from '@stories/icons/Mono/AlarmIcon.vue';
+import AirplaneIcon from '@stories/icons/Mono/AirplaneIcon.vue';
+import ArrowLeftIcon from '@stories/icons/Mono/ArrowLeftIcon.vue';
+import ArrowForwardIcon from '@stories/icons/Mono/ArrowForwardIcon.vue';
+import ArchiveIcon from '@stories/icons/Mono/ArchiveIcon.vue';
+import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
+import AnchorIcon from '@stories/icons/Mono/AnchorIcon.vue';
+import AlignRightIcon from '@stories/icons/Mono/AlignRightIcon.vue';
+import AlignLeftIcon from '@stories/icons/Mono/AlignLeftIcon.vue';
+import AlignCenterIcon from '@stories/icons/Mono/AlignCenterIcon.vue';
+import ArrowRightIcon from '@stories/icons/Mono/ArrowRightIcon.vue';
+import AtIcon from '@stories/icons/Mono/AtIcon.vue';
+import AwardIcon from '@stories/icons/Mono/AwardIcon.vue';
+import BackspaceIcon from '@stories/icons/Mono/BackspaceIcon.vue';
+import BadgeIcon from '@stories/icons/Mono/BadgeIcon.vue';
+import BallFootballIcon from '@stories/icons/Mono/BallFootballIcon.vue';
+import BallIcon from '@stories/icons/Mono/BallIcon.vue';
+import BanknoteIcon from '@stories/icons/Mono/BanknoteIcon.vue';
+import BellIcon from '@stories/icons/Mono/BellIcon.vue';
+import BellOffIcon from '@stories/icons/Mono/BellOffIcon.vue';
+import BoxIcon from '@stories/icons/Mono/BoxIcon.vue';
+import BrightnessIcon from '@stories/icons/Mono/BrightnessIcon.vue';
+import BulbIcon from '@stories/icons/Mono/BulbIcon.vue';
+import CalculatorIcon from '@stories/icons/Mono/CalculatorIcon.vue';
+import CalendarIcon from '@stories/icons/Mono/CalendarIcon.vue';
+import CalendarAddIcon from '@stories/icons/Mono/CalendarAddIcon.vue';
+import CalendarRemoveIcon from '@stories/icons/Mono/CalendarRemoveIcon.vue';
+import CardsIcon from '@stories/icons/Mono/CardsIcon.vue';
+import ChartLineIcon from '@stories/icons/Mono/ChartLineIcon.vue';
+import ChartPieIcon from '@stories/icons/Mono/ChartPieIcon.vue';
+import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
+import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue';
+import CheckmarkIcon from '@stories/icons/Mono/CheckmarkIcon.vue';
+import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue';
+import CodeIcon from '@stories/icons/Mono/CodeIcon.vue';
+import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue';
+import ColorPaletteIcon from '@stories/icons/Mono/ColorPaletteIcon.vue';
+import CompassIcon from '@stories/icons/Mono/CompassIcon.vue';
+import ConstructionWorkerIcon from '@stories/icons/Mono/ConstructionWorkerIcon.vue';
+import ContactsIcon from '@stories/icons/Mono/ContactsIcon.vue';
+import CropIcon from '@stories/icons/Mono/CropIcon.vue';
+import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
+import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
+import CubeIcon from '@stories/icons/Mono/CubeIcon.vue';
+import CupIcon from '@stories/icons/Mono/CupIcon.vue';
+import CursorIcon from '@stories/icons/Mono/CursorIcon.vue';
+import LineDashedIcon from '@stories/icons/Mono/LineDashedIcon.vue';
+import LineDiagonalIcon from '@stories/icons/Mono/LineDiagonalIcon.vue';
+import DiamondIcon from '@stories/icons/Mono/DiamondIcon.vue';
+import DiaryIcon from '@stories/icons/Mono/DiaryIcon.vue';
+import DiceIcon from '@stories/icons/Mono/DiceIcon.vue';
+import DigIcon from '@stories/icons/Mono/DigIcon.vue';
+import DislikeIcon from '@stories/icons/Mono/DislikeIcon.vue';
+import DisplayIcon from '@stories/icons/Mono/DisplayIcon.vue';
+import DocumentIcon from '@stories/icons/Mono/DocumentIcon.vue';
+import DollarIcon from '@stories/icons/Mono/DollarIcon.vue';
+import DotsHorizontalIcon from '@stories/icons/Mono/DotsHorizontalIcon.vue';
+import DotsVerticalIcon from '@stories/icons/Mono/DotsVerticalIcon.vue';
+import LineDottedIcon from '@stories/icons/Mono/LineDottedIcon.vue';
+import DownloadIcon from '@stories/icons/Mono/DownloadIcon.vue';
+import DropIcon from '@stories/icons/Mono/DropIcon.vue';
+import DumbbelIcon from '@stories/icons/Mono/DumbbelIcon.vue';
+import EarthIcon from '@stories/icons/Mono/EarthIcon.vue';
+import EditIcon from '@stories/icons/Mono/EditIcon.vue';
+import EyeIcon from '@stories/icons/Mono/EyeIcon.vue';
+import EncyclopediaIcon from '@stories/icons/Mono/EncyclopediaIcon.vue';
+import ExitIcon from '@stories/icons/Mono/ExitIcon.vue';
+import FeedbackIcon from '@stories/icons/Mono/FeedbackIcon.vue';
+import FilterIcon from '@stories/icons/Mono/FilterIcon.vue';
+import FingerprintIcon from '@stories/icons/Mono/FingerprintIcon.vue';
+import FireIcon from '@stories/icons/Mono/FireIcon.vue';
+import FlagIcon from '@stories/icons/Mono/FlagIcon.vue';
+import FlashIcon from '@stories/icons/Mono/FlashIcon.vue';
+import FlashlightIcon from '@stories/icons/Mono/FlashlightIcon.vue';
+import FolderLockIcon from '@stories/icons/Mono/FolderLockIcon.vue';
+import FrameIcon from '@stories/icons/Mono/FrameIcon.vue';
+import FullScreenIcon from '@stories/icons/Mono/FullScreenIcon.vue';
+import GameControllerIcon from '@stories/icons/Mono/GameControllerIcon.vue';
+import GiftIcon from '@stories/icons/Mono/GiftIcon.vue';
+import GlassesIcon from '@stories/icons/Mono/GlassesIcon.vue';
+import HamburgerIcon from '@stories/icons/Mono/HamburgerIcon.vue';
+import HandIcon from '@stories/icons/Mono/HandIcon.vue';
+import HomeIcon from '@stories/icons/Mono/HomeIcon.vue';
+import ImageEditIcon from '@stories/icons/Mono/ImageEditIcon.vue';
+import ImageIcon from '@stories/icons/Mono/ImageIcon.vue';
+import MoveIcon from '@stories/icons/Mono/MoveIcon.vue';
+import DocumentAddIcon from '@stories/icons/Mono/DocumentAddIcon.vue';
+import DocumentDeleteIcon from '@stories/icons/Mono/DocumentDeleteIcon.vue';
+import DocumentEditIcon from '@stories/icons/Mono/DocumentEditIcon.vue';
+import ParagraphIcon from '@stories/icons/Mono/ParagraphIcon.vue';
+import PhoneHandsetIcon from '@stories/icons/Mono/PhoneHandsetIcon.vue';
+import PlusCircleIcon from '@stories/icons/Mono/PlusCircleIcon.vue';
+import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
+import PointerIcon from '@stories/icons/Mono/PointerIcon.vue';
+import SaveIcon from '@stories/icons/Mono/SaveIcon.vue';
+import SettingsIcon from '@stories/icons/Mono/SettingsIcon.vue';
+import LineIcon from '@stories/icons/Mono/LineIcon.vue';
+import TableIcon from '@stories/icons/Mono/TableIcon.vue';
+import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
+import UserIcon from '@stories/icons/Mono/UserIcon.vue';
+import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
+import SelectButton from '@stories/components/SelectButton/SelectButton.vue';
+import ToggleSwitch from '@stories/components/ToggleSwitch/ToggleSwitch.vue';
+import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
+import Button from '@stories/components/Button/Button.vue';
+import Slider from '@stories/components/Slider/Slider.vue';
+import type { ISBOption } from '@interfaces/componentsProp';
+import Modal from '@stories/components/Modal/Modal.vue';
+import MenuDial from '@stories/components/MenuDial/MenuDial.vue';
+
+const gentleIcons = [
+ Age18Icon,
+ AirplaneIcon,
+ AlarmIcon,
+ AlignRightIcon,
+ AlignLeftIcon,
+ AlignCenterIcon,
+ AnchorIcon,
+ AnchorLinkIcon,
+ ArchiveIcon,
+ ArrowForwardIcon,
+ ArrowLeftIcon,
+ ArrowRightIcon,
+ ArrowsVerticalIcon,
+ AtIcon,
+ AwardIcon,
+ BackspaceIcon,
+ BadgeIcon,
+ BallFootballIcon,
+ BallIcon,
+ BanknoteIcon,
+ BellIcon,
+ BellOffIcon,
+ BoxIcon,
+ BrightnessIcon,
+ BulbIcon,
+ CalculatorIcon,
+ CalendarIcon,
+ CalendarAddIcon,
+ CalendarRemoveIcon,
+ CardsIcon,
+ ChartLineIcon,
+ ChartPieIcon,
+ ChatIcon,
+ ChatWritingIcon,
+ CheckmarkIcon,
+ ChemistryFlaskIcon,
+ CodeIcon,
+ CoinsIcon,
+ ColorPaletteIcon,
+ CompassIcon,
+ ConstructionWorkerIcon,
+ ContactsIcon,
+ CropIcon,
+ CrossIcon,
+ CrossCircleIcon,
+ CubeIcon,
+ CupIcon,
+ CursorIcon,
+ DiamondIcon,
+ DiaryIcon,
+ DiceIcon,
+ DigIcon,
+ DislikeIcon,
+ DisplayIcon,
+ DocumentIcon,
+ DocumentAddIcon,
+ DocumentDeleteIcon,
+ DocumentEditIcon,
+ DollarIcon,
+ DotsHorizontalIcon,
+ DotsVerticalIcon,
+ DownloadIcon,
+ DropIcon,
+ DumbbelIcon,
+ EarthIcon,
+ EditIcon,
+ EncyclopediaIcon,
+ ExitIcon,
+ EyeIcon,
+ FeedbackIcon,
+ FilterIcon,
+ FingerprintIcon,
+ FireIcon,
+ FlagIcon,
+ FlashIcon,
+ FlashlightIcon,
+ FolderLockIcon,
+ FrameIcon,
+ FullScreenIcon,
+ GameControllerIcon,
+ GiftIcon,
+ GlassesIcon,
+ HamburgerIcon,
+ HandIcon,
+ HomeIcon,
+ ImageIcon,
+ ImageEditIcon,
+ LineIcon,
+ LineDashedIcon,
+ LineDottedIcon,
+ LineDiagonalIcon,
+ MoveIcon,
+ ParagraphIcon,
+ PhoneHandsetIcon,
+ PlusCircleIcon,
+ PlusIcon,
+ PointerIcon,
+ SaveIcon,
+ SettingsIcon,
+ TableIcon,
+ TrashIcon,
+ TriangleIcon,
+ UserIcon,
+];
+const visibleDrawer = ref(true);
+const sliderOptions = [
+ {
+ label: 0,
+ value: 0,
+ color: 'red',
+ },
+ {
+ label: 2,
+ value: 2,
+ color: 'orange',
+ },
+ {
+ label: 4,
+ value: 4,
+ color: 'yellow',
+ },
+ {
+ label: 6,
+ value: 6,
+ color: 'green',
+ },
+ {
+ label: 8,
+ value: 8,
+ color: 'sky',
+ },
+ {
+ label: 10,
+ value: 10,
+ color: 'purple',
+ },
+ {
+ label: 12,
+ value: 12,
+ color: 'purple',
+ },
+ {
+ label: 14,
+ value: 14,
+ color: 'purple',
+ },
+ {
+ label: 16,
+ value: 16,
+ color: 'purple',
+ },
+ {
+ label: 18,
+ },
+];
+const options: ISBOption[] = [
+ {
+ label: 'First',
+ textStyle: 'bold',
+ iconPosition: 'top',
+ },
+ {
+ label: 'Second',
+ },
+];
+const visible = ref(false);
+const onClose = () => console.log('close!');
+const value = ref();
+const active = ref(false);
+const sliderValue = ref(1);
</script>
<template>
- <main class="container">
- Hello, storybook!
+ <Modal v-model:visible="visible" theme="red" @onClose="onClose"
+ ><template #header>huuuuuuuuuuui</template>Lorem ipsum dolor sit amet, consectetur adipisicing
+ elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo
+ nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam
+ repellat saepe temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
+ explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil
+ officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe
+ temporibus?</Modal
+ >
+ <MenuDial
+ v-model:active="active"
+ theme="sky"
+ direction="right"
+ :items="[
+ {
+ label: 'font-family',
+ theme: 'green',
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ linkBlank: true,
+ textStyle: 'bold',
+ },
+ {
+ label: 'Second',
+ theme: 'red',
+ textStyle: 'italic',
+ },
+ ]"
+ >
+ <template #1IconBefore>
+ <AnchorLinkIcon size="20" color="white" />
+ </template>
+ <template #2IconBefore>
+ <CrossIcon color="white" />
+ </template>
+ <template #2IconAfter>
+ <CrossIcon color="white" />
+ </template>
+ </MenuDial>
+ <Slider
+ v-model:value="sliderValue"
+ :options="sliderOptions"
+ orientation="vertical"
+ width="400"
+ min="0"
+ max="18"
+ step="2"
+ backgroundColor="black"
+ theme="blue"
+ isSmooth
+ />
+ <Button @click="visible = true" theme="sky" label="I'm a button"></Button>
+ <SelectButton :options="options" size="large" v-model:value="value">
+ <template #1Icon>
+ <TrashIcon />
+ </template>
+ </SelectButton>
+ <ToggleSwitch />
+ <Drawer v-model:visible="visibleDrawer" theme="sky" closeIcon="CropIcon">
+ <template #header>Ðто - Drawer</template>
+ <p>
+ pizdwertyuki lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit
+ amet, consectetur adipisicing elit. Amet deleniti, esse in ipsam quis sapiente tempore
+ voluptas. Aperiam dignissimos enim, fuga fugit, modi, nam necessitatibus numquam obcaecati
+ omnis recusandae voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque
+ blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto molestiae odio optio
+ reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor sit
+ amet, consectetur adipisicing elit. Ducimus expedita laboriosam nesciunt voluptatum! Ab animi
+ illum impedit iusto libero magni maxime molestias nisi nobis possimus provident quia repellat,
+ rerum suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem modi ratione
+ reiciendis. Cupiditate deserunt eaque eum labore qui rem? Consequatur corporis, dolorem
+ doloremque eveniet facilis obcaecati quasi repellat vel velit. pizdwertyuki
+ lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet,
+ consectetur adipisicing elit. Amet deleniti, esse in ipsam quis sapiente tempore voluptas.
+ Aperiam dignissimos enim, fuga fugit, modi, nam necessitatibus numquam obcaecati omnis
+ recusandae voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque
+ blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto molestiae odio optio
+ reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor sit
+ amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Eaque explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo
+ nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas
+ quisquam repellat saepe temporibus?
+ </p>
+ <template #footer>
+ pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template
+ ></Drawer
+ >
+ <main class="main">
+ <h2 class="title"><span class="mono">Mono</span> icons</h2>
+ <ul class="iconsList">
+ <li class="iconsItem" v-for="icon of gentleIcons" :key="icon.__name">
+ <component :is="icon" class="icon" />
+ <span class="iconName">{{ icon.__name!.slice(0, -4) }}</span>
+ </li>
+ </ul>
+ <button class="testButton" @click="visibleDrawer = !visibleDrawer">Ðажми менÑ</button>
</main>
</template>
<style scoped>
-.container {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-size: 64px;
+.main {
+ margin: 20px;
+ font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.title {
+ font-size: 48px;
+ width: max-content;
+ margin: 0 auto 40px auto;
+}
+.iconsList {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+ gap: 10px;
+}
+.iconsItem {
+ font-size: 14px;
+}
+.icon {
+ display: block;
+ width: max-content;
+ margin: 0 auto 5px auto;
+}
+.iconName {
+ font-weight: bold;
+ display: block;
+ width: max-content;
+ margin: 0 auto;
+}
+.mono {
+ color: green;
font-style: italic;
}
+.testButton {
+ position: absolute;
+ right: 50px;
+ top: 50px;
+ background-color: red;
+ color: white;
+ padding: 10px;
+ border-radius: 5px;
+}
</style>
diff --git a/src/assets/components.css b/src/assets/components.css
new file mode 100644
index 0000000000000000000000000000000000000000..6ad19a0c418960dc3616edb589a34d071fcea464
--- /dev/null
+++ b/src/assets/components.css
@@ -0,0 +1,17 @@
+.bold {
+ font-weight: bold;
+}
+.italic {
+ font-style: italic;
+}
+.flex-column {
+ flex-direction: column;
+}
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: #888;
+}
diff --git a/src/assets/main.css b/src/assets/main.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7b91d0d87864745b54750912cdbdcbabe74610e1 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -0,0 +1,282 @@
+@import './components.css';
+
+:root {
+ --gray-100: #f3f4f6;
+ --gray-200: #e5e7eb;
+ --gray-300: #d1d5db;
+ --gray-400: #9ca3af;
+ --gray-500: #6b7280;
+ --gray-600: #4b5563;
+ --gray-700: #374151;
+ --gray-800: #1f2937;
+ --gray-900: #111827;
+ --slate-100: #f1f5f9;
+ --slate-200: #e2e8f0;
+ --slate-300: #cbd5e1;
+ --slate-400: #94a3b8;
+ --slate-500: #64748b;
+ --slate-600: #475569;
+ --slate-700: #334155;
+ --slate-800: #1e293b;
+ --slate-900: #0f172a;
+ --red-100: #fee2e2;
+ --red-200: #fecaca;
+ --red-300: #fca5a5;
+ --red-400: #f87171;
+ --red-500: #ef4444;
+ --red-600: #dc2626;
+ --red-700: #b91c1c;
+ --red-800: #991b1b;
+ --red-900: #7f1d1d;
+ --orange-100: #ffedd5;
+ --orange-200: #fed7aa;
+ --orange-300: #fdba74;
+ --orange-400: #fb923c;
+ --orange-500: #f97316;
+ --orange-600: #ea580c;
+ --orange-700: #c2410c;
+ --orange-800: #9a3412;
+ --orange-900: #7c2d12;
+ --amber-100: #fef3c7;
+ --amber-200: #fde68a;
+ --amber-300: #fcd34d;
+ --amber-400: #fbbf24;
+ --amber-500: #f59e0b;
+ --amber-600: #d97706;
+ --amber-700: #b45309;
+ --amber-800: #92400e;
+ --amber-900: #78350f;
+ --yellow-100: #fef9c3;
+ --yellow-200: #fef08a;
+ --yellow-300: #fde047;
+ --yellow-400: #facc15;
+ --yellow-500: #eab308;
+ --yellow-600: #ca8a04;
+ --yellow-700: #a16207;
+ --yellow-800: #854d0e;
+ --yellow-900: #713f12;
+ --lime-100: #ecfccb;
+ --lime-200: #d9f99d;
+ --lime-300: #bef264;
+ --lime-400: #a3e635;
+ --lime-500: #84cc16;
+ --lime-600: #65a30d;
+ --lime-700: #4d7c0f;
+ --lime-800: #3f6212;
+ --lime-900: #365314;
+ --green-100: #dcfce7;
+ --green-200: #bbf7d0;
+ --green-300: #86efac;
+ --green-400: #4ade80;
+ --green-500: #22c55e;
+ --green-600: #16a34a;
+ --green-700: #15803d;
+ --green-800: #166534;
+ --green-900: #14532d;
+ --teal-100: #ccfbf1;
+ --teal-200: #99f6e4;
+ --teal-300: #5eead4;
+ --teal-400: #2dd4bf;
+ --teal-500: #14b8a6;
+ --teal-600: #0d9488;
+ --teal-700: #0f766e;
+ --teal-800: #115e59;
+ --teal-900: #134e4a;
+ --sky-100: #e0f2fe;
+ --sky-200: #bae6fd;
+ --sky-300: #7dd3fc;
+ --sky-400: #38bdf8;
+ --sky-500: #0ea5e9;
+ --sky-600: #0284c7;
+ --sky-700: #0369a1;
+ --sky-800: #075985;
+ --sky-900: #0c4a6e;
+ --blue-100: #dbeafe;
+ --blue-200: #bfdbfe;
+ --blue-300: #93c5fd;
+ --blue-400: #60a5fa;
+ --blue-500: #3b82f6;
+ --blue-600: #2563eb;
+ --blue-700: #1d4ed8;
+ --blue-800: #1e40af;
+ --blue-900: #1e3a8a;
+ --indigo-100: #e0e7ff;
+ --indigo-200: #c7d2fe;
+ --indigo-300: #a5b4fc;
+ --indigo-400: #818cf8;
+ --indigo-500: #6366f1;
+ --indigo-600: #4f46e5;
+ --indigo-700: #4338ca;
+ --indigo-800: #3730a3;
+ --indigo-900: #312e81;
+ --purple-100: #f3e8ff;
+ --purple-200: #e9d5ff;
+ --purple-300: #d8b4fe;
+ --purple-400: #c084fc;
+ --purple-500: #a855f7;
+ --purple-600: #9333ea;
+ --purple-700: #7e22ce;
+ --purple-800: #6b21a8;
+ --purple-900: #581c87;
+ --fuchsia-100: #fae8ff;
+ --fuchsia-200: #f5d0fe;
+ --fuchsia-300: #f0abfc;
+ --fuchsia-400: #e879f9;
+ --fuchsia-500: #d946ef;
+ --fuchsia-600: #c026d3;
+ --fuchsia-700: #a21caf;
+ --fuchsia-800: #86198f;
+ --fuchsia-900: #701a75;
+ --pink-100: #fce7f3;
+ --pink-200: #fbcfe8;
+ --pink-300: #f9a8d4;
+ --pink-400: #f472b6;
+ --pink-500: #ec4899;
+ --pink-600: #db2777;
+ --pink-700: #be185d;
+ --pink-800: #9d174d;
+ --pink-900: #831843;
+ --rose-100: #ffe4e6;
+ --rose-200: #fecdd3;
+ --rose-300: #fda4af;
+ --rose-400: #fb7185;
+ --rose-500: #f43f5e;
+ --rose-600: #e11d48;
+ --rose-700: #be123c;
+ --rose-800: #9f1239;
+ --rose-900: #881337;
+}
+body {
+ min-height: 100vh;
+ overflow-x: hidden;
+}
+* {
+ font-family: Arial, serif;
+}
+#app {
+ min-height: 100vh;
+ display: flex;
+ flex-flow: column;
+}
+#sheetContainer {
+ padding-top: 80px;
+}
+#app > main {
+ flex: 1 1 auto;
+}
+/* Reset and base styles */
+* {
+ padding: 0;
+ margin: 0;
+ border: none;
+ box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ font-weight: 500;
+}
+
+/* Links */
+
+a,
+a:link,
+a:visited {
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+/* Common */
+
+aside,
+nav,
+footer,
+header,
+section,
+main {
+ display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+ul,
+ul li {
+ list-style: none;
+}
+
+img {
+ vertical-align: top;
+}
+
+img,
+svg {
+ max-width: 100%;
+ height: auto;
+}
+
+address {
+ font-style: normal;
+}
+
+/* Form */
+
+input,
+textarea,
+button,
+select {
+ font-family: inherit;
+ font-size: inherit;
+ color: inherit;
+ background-color: transparent;
+}
+
+input::-ms-clear {
+ display: none;
+}
+
+button,
+input[type='submit'] {
+ display: inline-block;
+ box-shadow: none;
+ background-color: transparent;
+ background: none;
+ cursor: pointer;
+}
+
+input:focus,
+input:active,
+button:focus,
+button:active {
+ outline: none;
+}
+
+button::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+
+label {
+ cursor: pointer;
+}
+
+legend {
+ display: block;
+}
+input[type=file], /* FF, IE7+, chrome (except button) */
+input[type=file]::-webkit-file-upload-button {
+ cursor: pointer;
+}
diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts
new file mode 100644
index 0000000000000000000000000000000000000000..892a811cdd65c74e7434ef955c25de7458a168ff
--- /dev/null
+++ b/src/common/constants/icons.ts
@@ -0,0 +1,211 @@
+import type { Component } from 'vue';
+
+import Age18Icon from '@stories/icons/Mono/Age18Icon.vue';
+import AirplaneIcon from '@stories/icons/Mono/AirplaneIcon.vue';
+import AlarmIcon from '@stories/icons/Mono/AlarmIcon.vue';
+import AlignCenterIcon from '@stories/icons/Mono/AlignCenterIcon.vue';
+import AlignLeftIcon from '@stories/icons/Mono/AlignLeftIcon.vue';
+import AlignRightIcon from '@stories/icons/Mono/AlignRightIcon.vue';
+import AnchorIcon from '@stories/icons/Mono/AnchorIcon.vue';
+import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
+import ArchiveIcon from '@stories/icons/Mono/ArchiveIcon.vue';
+import ArrowForwardIcon from '@stories/icons/Mono/ArrowForwardIcon.vue';
+import ArrowLeftIcon from '@stories/icons/Mono/ArrowLeftIcon.vue';
+import ArrowRightIcon from '@stories/icons/Mono/ArrowRightIcon.vue';
+import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
+import AtIcon from '@stories/icons/Mono/AtIcon.vue';
+import AwardIcon from '@stories/icons/Mono/AwardIcon.vue';
+import BackspaceIcon from '@stories/icons/Mono/BackspaceIcon.vue';
+import BadgeIcon from '@stories/icons/Mono/BadgeIcon.vue';
+import BallFootballIcon from '@stories/icons/Mono/BallFootballIcon.vue';
+import BallIcon from '@stories/icons/Mono/BallIcon.vue';
+import BanknoteIcon from '@stories/icons/Mono/BanknoteIcon.vue';
+import BellIcon from '@stories/icons/Mono/BellIcon.vue';
+import BellOffIcon from '@stories/icons/Mono/BellOffIcon.vue';
+import BoxIcon from '@stories/icons/Mono/BoxIcon.vue';
+import BrightnessIcon from '@stories/icons/Mono/BrightnessIcon.vue';
+import BulbIcon from '@stories/icons/Mono/BulbIcon.vue';
+import CalculatorIcon from '@stories/icons/Mono/CalculatorIcon.vue';
+import CalendarAddIcon from '@stories/icons/Mono/CalendarAddIcon.vue';
+import CalendarIcon from '@stories/icons/Mono/CalendarIcon.vue';
+import CalendarRemoveIcon from '@stories/icons/Mono/CalendarRemoveIcon.vue';
+import CardsIcon from '@stories/icons/Mono/CardsIcon.vue';
+import ChartLineIcon from '@stories/icons/Mono/ChartLineIcon.vue';
+import ChartPieIcon from '@stories/icons/Mono/ChartPieIcon.vue';
+import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
+import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
+import CropIcon from '@stories/icons/Mono/CropIcon.vue';
+import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue';
+import CheckmarkIcon from '@stories/icons/Mono/CheckmarkIcon.vue';
+import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue';
+import CodeIcon from '@stories/icons/Mono/CodeIcon.vue';
+import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue';
+import ColorPaletteIcon from '@stories/icons/Mono/ColorPaletteIcon.vue';
+import CompassIcon from '@stories/icons/Mono/CompassIcon.vue';
+import ConstructionWorkerIcon from '@stories/icons/Mono/ConstructionWorkerIcon.vue';
+import ContactsIcon from '@stories/icons/Mono/ContactsIcon.vue';
+import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
+import CubeIcon from '@stories/icons/Mono/CubeIcon.vue';
+import CupIcon from '@stories/icons/Mono/CupIcon.vue';
+import CursorIcon from '@stories/icons/Mono/CursorIcon.vue';
+import DiamondIcon from '@stories/icons/Mono/DiamondIcon.vue';
+import DiaryIcon from '@stories/icons/Mono/DiaryIcon.vue';
+import DiceIcon from '@stories/icons/Mono/DiceIcon.vue';
+import DigIcon from '@stories/icons/Mono/DigIcon.vue';
+import DislikeIcon from '@stories/icons/Mono/DislikeIcon.vue';
+import DisplayIcon from '@stories/icons/Mono/DisplayIcon.vue';
+import DocumentIcon from '@stories/icons/Mono/DocumentIcon.vue';
+import DocumentAddIcon from '@stories/icons/Mono/DocumentAddIcon.vue';
+import DocumentDeleteIcon from '@stories/icons/Mono/DocumentDeleteIcon.vue';
+import DocumentEditIcon from '@stories/icons/Mono/DocumentEditIcon.vue';
+import DollarIcon from '@stories/icons/Mono/DollarIcon.vue';
+import DotsHorizontalIcon from '@stories/icons/Mono/DotsHorizontalIcon.vue';
+import DotsVerticalIcon from '@stories/icons/Mono/DotsVerticalIcon.vue';
+import DownloadIcon from '@stories/icons/Mono/DownloadIcon.vue';
+import DropIcon from '@stories/icons/Mono/DropIcon.vue';
+import DumbbelIcon from '@stories/icons/Mono/DumbbelIcon.vue';
+import EarthIcon from '@stories/icons/Mono/EarthIcon.vue';
+import EditIcon from '@stories/icons/Mono/EditIcon.vue';
+import EncyclopediaIcon from '@stories/icons/Mono/EncyclopediaIcon.vue';
+import ExitIcon from '@stories/icons/Mono/ExitIcon.vue';
+import EyeIcon from '@stories/icons/Mono/EyeIcon.vue';
+import FeedbackIcon from '@stories/icons/Mono/FeedbackIcon.vue';
+import FilterIcon from '@stories/icons/Mono/FilterIcon.vue';
+import FingerprintIcon from '@stories/icons/Mono/FingerprintIcon.vue';
+import FireIcon from '@stories/icons/Mono/FireIcon.vue';
+import FlagIcon from '@stories/icons/Mono/FlagIcon.vue';
+import FlashIcon from '@stories/icons/Mono/FlashIcon.vue';
+import FlashlightIcon from '@stories/icons/Mono/FlashlightIcon.vue';
+import FolderLockIcon from '@stories/icons/Mono/FolderLockIcon.vue';
+import FrameIcon from '@stories/icons/Mono/FrameIcon.vue';
+import FullScreenIcon from '@stories/icons/Mono/FullScreenIcon.vue';
+import GameControllerIcon from '@stories/icons/Mono/GameControllerIcon.vue';
+import GiftIcon from '@stories/icons/Mono/GiftIcon.vue';
+import GlassesIcon from '@stories/icons/Mono/GlassesIcon.vue';
+import HamburgerIcon from '@stories/icons/Mono/HamburgerIcon.vue';
+import HandIcon from '@stories/icons/Mono/HandIcon.vue';
+import HomeIcon from '@stories/icons/Mono/HomeIcon.vue';
+import ImageIcon from '@stories/icons/Mono/ImageIcon.vue';
+import ImageEditIcon from '@stories/icons/Mono/ImageEditIcon.vue';
+import LineIcon from '@stories/icons/Mono/LineIcon.vue';
+import LineDashedIcon from '@stories/icons/Mono/LineDashedIcon.vue';
+import LineDottedIcon from '@stories/icons/Mono/LineDottedIcon.vue';
+import LineDiagonalIcon from '@stories/icons/Mono/LineDiagonalIcon.vue';
+import MoveIcon from '@stories/icons/Mono/MoveIcon.vue';
+import ParagraphIcon from '@stories/icons/Mono/ParagraphIcon.vue';
+import PhoneHandsetIcon from '@stories/icons/Mono/PhoneHandsetIcon.vue';
+import PlusCircleIcon from '@stories/icons/Mono/PlusCircleIcon.vue';
+import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
+import PointerIcon from '@stories/icons/Mono/PointerIcon.vue';
+import SaveIcon from '@stories/icons/Mono/SaveIcon.vue';
+import SettingsIcon from '@stories/icons/Mono/SettingsIcon.vue';
+import TableIcon from '@stories/icons/Mono/TableIcon.vue';
+import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
+import UserIcon from '@stories/icons/Mono/UserIcon.vue';
+import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
+
+export const iconsSet: Record<string, Component> = {
+ Age18Icon: Age18Icon,
+ AirplaneIcon: AirplaneIcon,
+ AlarmIcon: AlarmIcon,
+ AlignCenterIcon: AlignCenterIcon,
+ AlignLeftIcon: AlignLeftIcon,
+ AlignRightIcon: AlignRightIcon,
+ AnchorIcon: AnchorIcon,
+ AnchorLinkIcon: AnchorLinkIcon,
+ ArchiveIcon: ArchiveIcon,
+ ArrowForwardIcon: ArrowForwardIcon,
+ ArrowLeftIcon: ArrowLeftIcon,
+ ArrowRightIcon: ArrowRightIcon,
+ ArrowsVerticalIcon: ArrowsVerticalIcon,
+ AtIcon: AtIcon,
+ AwardIcon: AwardIcon,
+ BackspaceIcon: BackspaceIcon,
+ BadgeIcon: BadgeIcon,
+ BallFootballIcon: BallFootballIcon,
+ BallIcon: BallIcon,
+ BanknoteIcon: BanknoteIcon,
+ BellIcon: BellIcon,
+ BellOffIcon: BellOffIcon,
+ BoxIcon: BoxIcon,
+ BrightnessIcon: BrightnessIcon,
+ BulbIcon: BulbIcon,
+ CalculatorIcon: CalculatorIcon,
+ CalendarAddIcon: CalendarAddIcon,
+ CalendarIcon: CalendarIcon,
+ CalendarRemoveIcon: CalendarRemoveIcon,
+ CardsIcon: CardsIcon,
+ ChartLineIcon: ChartLineIcon,
+ ChartPieIcon: ChartPieIcon,
+ ChatIcon: ChatIcon,
+ ChatWritingIcon: ChatWritingIcon,
+ CheckmarkIcon: CheckmarkIcon,
+ ChemistryFlaskIcon: ChemistryFlaskIcon,
+ CodeIcon: CodeIcon,
+ CoinsIcon: CoinsIcon,
+ ColorPaletteIcon: ColorPaletteIcon,
+ CompassIcon: CompassIcon,
+ ConstructionWorkerIcon: ConstructionWorkerIcon,
+ ContactsIcon: ContactsIcon,
+ CropIcon: CropIcon,
+ CrossIcon: CrossIcon,
+ CrossCircleIcon: CrossCircleIcon,
+ CubeIcon: CubeIcon,
+ CupIcon: CupIcon,
+ CursorIcon: CursorIcon,
+ DiamondIcon: DiamondIcon,
+ DiaryIcon: DiaryIcon,
+ DiceIcon: DiceIcon,
+ DigIcon: DigIcon,
+ DislikeIcon: DislikeIcon,
+ DisplayIcon: DisplayIcon,
+ DocumentIcon: DocumentIcon,
+ DocumentAddIcon: DocumentAddIcon,
+ DocumentDeleteIcon: DocumentDeleteIcon,
+ DocumentEditIcon: DocumentEditIcon,
+ DollarIcon: DollarIcon,
+ DotsHorizontalIcon: DotsHorizontalIcon,
+ DotsVerticalIcon: DotsVerticalIcon,
+ DownloadIcon: DownloadIcon,
+ DropIcon: DropIcon,
+ DumbbelIcon: DumbbelIcon,
+ EarthIcon: EarthIcon,
+ EditIcon: EditIcon,
+ EncyclopediaIcon: EncyclopediaIcon,
+ ExitIcon: ExitIcon,
+ EyeIcon: EyeIcon,
+ FeedbackIcon: FeedbackIcon,
+ FilterIcon: FilterIcon,
+ FingerprintIcon: FingerprintIcon,
+ FireIcon: FireIcon,
+ FlagIcon: FlagIcon,
+ FlashIcon: FlashIcon,
+ FlashlightIcon: FlashlightIcon,
+ FolderLockIcon: FolderLockIcon,
+ FrameIcon: FrameIcon,
+ FullScreenIcon: FullScreenIcon,
+ GameControllerIcon: GameControllerIcon,
+ GiftIcon: GiftIcon,
+ GlassesIcon: GlassesIcon,
+ HamburgerIcon: HamburgerIcon,
+ HandIcon: HandIcon,
+ HomeIcon: HomeIcon,
+ ImageIcon: ImageIcon,
+ ImageEditIcon: ImageEditIcon,
+ LineIcon: LineIcon,
+ LineDashedIcon: LineDashedIcon,
+ LineDottedIcon: LineDottedIcon,
+ LineDiagonalIcon: LineDiagonalIcon,
+ MoveIcon: MoveIcon,
+ ParagraphIcon: ParagraphIcon,
+ PhoneHandsetIcon: PhoneHandsetIcon,
+ PlusCircleIcon: PlusCircleIcon,
+ PlusIcon: PlusIcon,
+ PointerIcon: PointerIcon,
+ SaveIcon: SaveIcon,
+ SettingsIcon: SettingsIcon,
+ TableIcon: TableIcon,
+ TrashIcon: TrashIcon,
+ TriangleIcon: TriangleIcon,
+ UserIcon: UserIcon,
+};
diff --git a/src/common/helpers/colors.ts b/src/common/helpers/colors.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ec5279ec225be5b688403176bbad63de75f1cbf
--- /dev/null
+++ b/src/common/helpers/colors.ts
@@ -0,0 +1,117 @@
+export const convert300ThemeToColor = (theme: string | undefined) => {
+ switch (theme) {
+ case 'white':
+ return '#cbd5e1';
+ case 'slate':
+ return '#cbd5e1';
+ case 'blue':
+ return '#93c5fd';
+ case 'sky':
+ return '#7dd3fc';
+ case 'teal':
+ return '#5eead4';
+ case 'lime':
+ return '#bef264';
+ case 'green':
+ return '#86efac';
+ case 'yellow':
+ return '#fde047';
+ case 'amber':
+ return '#fcd34d';
+ case 'orange':
+ return '#fdba74';
+ case 'pink':
+ return '#ec4899';
+ case 'fuchsia':
+ return '#f0abfc';
+ case 'purple':
+ return '#d8b4fe';
+ case 'indigo':
+ return '#a5b4fc';
+ case 'rose':
+ return '#fda4af';
+ case 'red':
+ return '#fca5a5';
+ case 'black':
+ return '#334155';
+ }
+};
+
+export const convert500ThemeToColor = (theme: string | undefined) => {
+ switch (theme) {
+ case 'white':
+ return '#ffffff';
+ case 'slate':
+ return '#64748b';
+ case 'blue':
+ return '#3b82f6';
+ case 'sky':
+ return '#0ea5e9';
+ case 'teal':
+ return '#14b8a6';
+ case 'lime':
+ return '#84cc16';
+ case 'green':
+ return '#22c55e';
+ case 'yellow':
+ return '#eab308';
+ case 'amber':
+ return '#f59e0b';
+ case 'orange':
+ return '#f97316';
+ case 'pink':
+ return '#ec4899';
+ case 'fuchsia':
+ return '#d946ef';
+ case 'purple':
+ return '#a855f7';
+ case 'indigo':
+ return '#6366f1';
+ case 'rose':
+ return '#f43f5e';
+ case 'red':
+ return '#ef4444';
+ case 'black':
+ return '#000000';
+ }
+ return '#000000';
+};
+
+export const convert800ThemeToColor = (theme: string | undefined) => {
+ switch (theme) {
+ case 'white':
+ return '#ffffff';
+ case 'slate':
+ return '#1e293b';
+ case 'blue':
+ return '#1e40af';
+ case 'sky':
+ return '#075985';
+ case 'teal':
+ return '#115e59';
+ case 'lime':
+ return '#3f6212';
+ case 'green':
+ return '#166534';
+ case 'yellow':
+ return '#854d0e';
+ case 'amber':
+ return '#92400e';
+ case 'orange':
+ return '#9a3412';
+ case 'pink':
+ return '#9d174d';
+ case 'fuchsia':
+ return '#86198f';
+ case 'purple':
+ return '#6b21a8';
+ case 'indigo':
+ return '#3730a3';
+ case 'rose':
+ return '#9f1239';
+ case 'red':
+ return '#991b1b';
+ case 'black':
+ return '#000000';
+ }
+};
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ff7e70be1d1b1a5f75dae47b36135593e55b09c
--- /dev/null
+++ b/src/common/interfaces/common.ts
@@ -0,0 +1,34 @@
+import type { iconsSet } from '@/common/constants/icons';
+
+export type TThemeColor =
+ | 'white'
+ | 'slate'
+ | 'blue'
+ | 'sky'
+ | 'teal'
+ | 'green'
+ | 'yellow'
+ | 'orange'
+ | 'pink'
+ | 'fuchsia'
+ | 'purple'
+ | 'indigo'
+ | 'rose'
+ | 'red'
+ | 'black';
+
+export type TThemeColorNoWhite = Exclude<TThemeColor, 'white'>;
+
+export type TSize = 'small' | 'medium' | 'large' | 'huge';
+
+export type TTextStyle = 'bold' | 'italic';
+
+export type TDirection = 'up' | 'right' | 'down' | 'left';
+
+export type TPosition = 'top' | 'right' | 'bottom' | 'left';
+
+export type TExpandedPosition = TPosition | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+
+export type TBorder = 'solid' | 'dashed' | 'dotted';
+
+export type TIcons = keyof typeof iconsSet;
diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f0e3c306f006ef5c98664440d53df2ecb17db4a
--- /dev/null
+++ b/src/common/interfaces/componentsProp.ts
@@ -0,0 +1,32 @@
+import type { TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
+
+export interface ITreeItem {
+ label: string;
+ link?: string;
+ linkBlank?: boolean;
+ color?: TThemeColor;
+ textStyle?: TTextStyle;
+ isTriangleToColor?: boolean;
+ iconBefore?: TIcons;
+ iconAfter?: TIcons;
+ iconColor?: TThemeColor;
+ children?: ITreeItem[];
+ isLinkClicked?: boolean;
+}
+
+export interface ISBOption {
+ label: string;
+ value?: never;
+ color?: TThemeColor;
+ activeColor?: TThemeColor;
+ backgroundColor?: TThemeColor;
+ isLabelHidden?: boolean;
+ iconPosition?: TPosition;
+ textStyle?: TTextStyle;
+}
+
+export interface ISliderOptions {
+ label: string | number;
+ value?: string | number;
+ color?: string;
+}
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8d663ab5a251804b593200f44f06cc24c09cd124
--- /dev/null
+++ b/src/common/interfaces/componentsProps.ts
@@ -0,0 +1,113 @@
+import type {
+ TBorder,
+ TDirection,
+ TExpandedPosition,
+ TIcons,
+ TPosition,
+ TSize,
+ TTextStyle,
+ TThemeColor,
+ TThemeColorNoWhite,
+} from '@interfaces/common';
+import type { ISBOption, ISliderOptions, ITreeItem } from '@interfaces/componentsProp';
+
+export interface ITLProps {
+ items: ITreeItem[];
+ maxWidth?: number;
+ expand?: boolean;
+ theme?: TThemeColor;
+}
+
+export interface ITIProps {
+ state: {
+ isOpen: boolean;
+ label: string;
+ }[];
+ items: ITreeItem[];
+ textColor: TThemeColor;
+ themeColor: string;
+}
+
+export interface IMDProps {
+ items: {
+ label: string;
+ theme?: string;
+ textStyle?: TTextStyle;
+ link?: string;
+ linkBlank?: boolean;
+ onClick?: () => void;
+ }[];
+ size?: TSize;
+ theme?: string;
+ direction?: TDirection;
+ // direction?: TDirection | 'circle';
+}
+
+export interface ISliderProps {
+ width?: string | number;
+ min?: string | number;
+ max?: string | number;
+ step?: string | number;
+ size?: TSize;
+ theme?: TThemeColor;
+ backgroundColor?: TThemeColor;
+ orientation?: 'horizontal' | 'vertical';
+ isSmooth?: boolean;
+ options?: ISliderOptions[];
+}
+
+export interface IDrawerProps {
+ position?: TPosition;
+ width?: string | number;
+ theme?: TThemeColor;
+ modal?: boolean;
+ dismissible?: boolean;
+ closeIcon?: TIcons;
+ headerDivider?: boolean;
+ footerDivider?: boolean;
+}
+
+export interface IModalProps {
+ theme?: TThemeColor;
+ width?: string;
+ height?: string;
+ position?: TExpandedPosition;
+ dismissible?: boolean;
+ closeIcon?: TIcons;
+ headerDivider?: boolean;
+}
+
+export interface ISBProps {
+ options: ISBOption[];
+ size?: TSize;
+ rounded?: boolean;
+ activeBackgroundColor?: TThemeColor;
+ border?: TThemeColor;
+ disabled?: boolean;
+}
+
+export interface IButtonProps {
+ label?: string;
+ size?: TSize;
+ textStyle?: TTextStyle;
+ iconPos?: TPosition;
+ width?: string | number;
+ theme?: TThemeColor;
+ textColor?: TThemeColor;
+ border?: TThemeColor;
+ iconOnly?: boolean;
+}
+
+export interface ITSProps {
+ size?: TSize;
+ theme?: TThemeColorNoWhite;
+ negativeTheme?: TThemeColor;
+ darkNegative?: boolean;
+ disabled?: boolean;
+}
+
+export interface IDividerProps {
+ height?: number;
+ type?: TBorder;
+ color?: TThemeColor;
+}
diff --git a/src/main.ts b/src/main.ts
index 0ac3a5ff0ceea45d1a9066b2df477773977a338b..b05b45f90ef9150f51d190fb429151a2808aeef8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
-import './assets/main.css'
+import './assets/main.css';
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
deleted file mode 100644
index fb8a318614c626cafecd6a1e6e374c1d68069c1a..0000000000000000000000000000000000000000
--- a/src/stories/Button.stories.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { fn } from '@storybook/test'
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-import Button from './Button.vue'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta = {
- title: 'Example/Button',
- component: Button,
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
- argTypes: {
- size: { control: 'select', options: ['small', 'medium', 'large'] },
- backgroundColor: { control: 'color' },
- },
- args: {
- primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- onClick: fn(),
- },
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
- args: {
- primary: true,
- label: 'Button',
- },
-}
-
-export const Secondary: Story = {
- args: {
- primary: false,
- label: 'Button',
- },
-}
-
-export const Large: Story = {
- args: {
- label: 'Button',
- size: 'large',
- },
-}
-
-export const Small: Story = {
- args: {
- label: 'Button',
- size: 'small',
- },
-}
-
-export const DefaultButton: Story = {
- args: {
- primary: false,
- label: 'Button',
- },
-}
diff --git a/src/stories/Button.vue b/src/stories/Button.vue
deleted file mode 100644
index 2e1ee0ee22f3c6d8a825e13b6405a5761117f43c..0000000000000000000000000000000000000000
--- a/src/stories/Button.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
- <button type="button" :class="classes" @click="onClick" :style="style">{{ label }} </button>
-</template>
-
-<script lang="ts" setup>
-import './button.css';
-import { computed } from 'vue';
-
-const props = withDefaults(defineProps<{
- /**
- * The label of the button
- */
- label: string,
- /**
- * primary or secondary button
- */
- primary?: boolean,
- /**
- * size of the button
- */
- size?: 'small' | 'medium' | 'large',
- /**
- * background color of the button
- */
- backgroundColor?: string,
-
-}>(), { primary: false });
-
-const emit = defineEmits<{
- (e: 'click', id: number): void;
-}>();
-
-const classes = computed(() => ({
- 'storybook-button': true,
- 'storybook-button--primary': props.primary,
- 'storybook-button--secondary': !props.primary,
- [`storybook-button--${props.size || 'medium'}`]: true,
-}));
-
-const style = computed(() => ({
- backgroundColor: props.backgroundColor
-}));
-
-const onClick = () => {
- emit("click", 1)
-};
-
-</script>
\ No newline at end of file
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
deleted file mode 100644
index 347315a5036537c97581652fbd19a72c549e096d..0000000000000000000000000000000000000000
--- a/src/stories/Configure.mdx
+++ /dev/null
@@ -1,364 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
-
-export const RightArrow = () => <svg
- viewBox="0 0 14 14"
- width="8px"
- height="14px"
- style={{
- marginLeft: '4px',
- display: 'inline-block',
- shapeRendering: 'inherit',
- verticalAlign: 'middle',
- fill: 'currentColor',
- 'path fill': 'currentColor'
- }}
->
- <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
-
-<Meta title="Configure your project" />
-
-<div className="sb-container">
- <div className='sb-section-title'>
- # Configure your project
-
- Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
- </div>
- <div className="sb-section">
- <div className="sb-section-item">
- <img
- src={Styling}
- alt="A wall of logos representing different styling technologies"
- />
- <h4 className="sb-section-item-heading">Add styling and CSS</h4>
- <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
- <a
- href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=vue"
- target="_blank"
- >Learn more<RightArrow /></a>
- </div>
- <div className="sb-section-item">
- <img
- src={Context}
- alt="An abstraction representing the composition of data for a component"
- />
- <h4 className="sb-section-item-heading">Provide context and mocking</h4>
- <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
- <a
- href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=vue#context-for-mocking"
- target="_blank"
- >Learn more<RightArrow /></a>
- </div>
- <div className="sb-section-item">
- <img src={Assets} alt="A representation of typography and image assets" />
- <div>
- <h4 className="sb-section-item-heading">Load assets and resources</h4>
- <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
- `staticDirs` configuration option to specify folders to load when
- starting Storybook.</p>
- <a
- href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=vue"
- target="_blank"
- >Learn more<RightArrow /></a>
- </div>
- </div>
- </div>
-</div>
-<div className="sb-container">
- <div className='sb-section-title'>
- # Do more with Storybook
-
- Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
- </div>
-
- <div className="sb-section">
- <div className="sb-features-grid">
- <div className="sb-grid-item">
- <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" />
- <h4 className="sb-section-item-heading">Autodocs</h4>
- <p className="sb-section-item-paragraph">Auto-generate living,
- interactive reference documentation from your components and stories.</p>
- <a
- href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=vue"
- target="_blank"
- >Learn more<RightArrow /></a>
- </div>
- <div className="sb-grid-item">
- <img src={Share} alt="A browser window showing a Storybook being published to a chromatic.com URL" />
- <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
- <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
- <a
- href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=vue#publish-storybook-with-chromatic"
- target="_blank"
- >Learn more<RightArrow /></a>
- </div>
- <div className="sb-grid-item">
- <img src={FigmaPlugin} alt="Windows showing the Storybook plugin in Figma" />
- <h4 className="sb-section-item-heading">Figma Plugin</h4>
- <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
- implementation in one place.</p>
- <a
- href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=vue#embed-storybook-in-figma-with-the-plugin"
- target="_blank"
- >Learn more<RightArrow /></a>
- </div>
- <div className="sb-grid-item">
- <img src={Testing} alt="Screenshot of tests passing and failing" />
- <h4 className="sb-section-item-heading">Testing</h4>
- <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
- complex.</p>
- <a
- href="https://storybook.js.org/docs/writing-tests/?renderer=vue"
- target="_blank"
- >Learn more<RightArrow /></a>
- </div>
- <div className="sb-grid-item">
- <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" />
- <h4 className="sb-section-item-heading">Accessibility</h4>
- <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
- <a
- href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=vue"
- target="_blank"
- >Learn more<RightArrow /></a>
- </div>
- <div className="sb-grid-item">
- <img src={Theming} alt="Screenshot of Storybook in light and dark mode" />
- <h4 className="sb-section-item-heading">Theming</h4>
- <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
- <a
- href="https://storybook.js.org/docs/configure/theming/?renderer=vue"
- target="_blank"
- >Learn more<RightArrow /></a>
- </div>
- </div>
- </div>
-</div>
-<div className='sb-addon'>
- <div className='sb-addon-text'>
- <h4>Addons</h4>
- <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
- <a
- href="https://storybook.js.org/addons/"
- target="_blank"
- >Discover all addons<RightArrow /></a>
- </div>
- <div className='sb-addon-img'>
- <img src={AddonLibrary} alt="Integrate your tools with Storybook to connect workflows." />
- </div>
-</div>
-
-<div className="sb-section sb-socials">
- <div className="sb-section-item">
- <img src={Github} alt="Github logo" className="sb-explore-image"/>
- Join our contributors building the future of UI development.
-
- <a
- href="https://github.com/storybookjs/storybook"
- target="_blank"
- >Star on GitHub<RightArrow /></a>
- </div>
- <div className="sb-section-item">
- <img src={Discord} alt="Discord logo" className="sb-explore-image"/>
- <div>
- Get support and chat with frontend developers.
-
- <a
- href="https://discord.gg/storybook"
- target="_blank"
- >Join Discord server<RightArrow /></a>
- </div>
- </div>
- <div className="sb-section-item">
- <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/>
- <div>
- Watch tutorials, feature previews and interviews.
-
- <a
- href="https://www.youtube.com/@chromaticui"
- target="_blank"
- >Watch on YouTube<RightArrow /></a>
- </div>
- </div>
- <div className="sb-section-item">
- <img src={Tutorials} alt="A book" className="sb-explore-image"/>
- <p>Follow guided walkthroughs on for key workflows.</p>
-
- <a
- href="https://storybook.js.org/tutorials/"
- target="_blank"
- >Discover tutorials<RightArrow /></a>
- </div>
-</div>
-
-<style>
- {`
- .sb-container {
- margin-bottom: 48px;
- }
-
- .sb-section {
- width: 100%;
- display: flex;
- flex-direction: row;
- gap: 20px;
- }
-
- img {
- object-fit: cover;
- }
-
- .sb-section-title {
- margin-bottom: 32px;
- }
-
- .sb-section a:not(h1 a, h2 a, h3 a) {
- font-size: 14px;
- }
-
- .sb-section-item, .sb-grid-item {
- flex: 1;
- display: flex;
- flex-direction: column;
- }
-
- .sb-section-item-heading {
- padding-top: 20px !important;
- padding-bottom: 5px !important;
- margin: 0 !important;
- }
- .sb-section-item-paragraph {
- margin: 0;
- padding-bottom: 10px;
- }
-
- .sb-chevron {
- margin-left: 5px;
- }
-
- .sb-features-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- grid-gap: 32px 20px;
- }
-
- .sb-socials {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- }
-
- .sb-socials p {
- margin-bottom: 10px;
- }
-
- .sb-explore-image {
- max-height: 32px;
- align-self: flex-start;
- }
-
- .sb-addon {
- width: 100%;
- display: flex;
- align-items: center;
- position: relative;
- background-color: #EEF3F8;
- border-radius: 5px;
- border: 1px solid rgba(0, 0, 0, 0.05);
- background: #EEF3F8;
- height: 180px;
- margin-bottom: 48px;
- overflow: hidden;
- }
-
- .sb-addon-text {
- padding-left: 48px;
- max-width: 240px;
- }
-
- .sb-addon-text h4 {
- padding-top: 0px;
- }
-
- .sb-addon-img {
- position: absolute;
- left: 345px;
- top: 0;
- height: 100%;
- width: 200%;
- overflow: hidden;
- }
-
- .sb-addon-img img {
- width: 650px;
- transform: rotate(-15deg);
- margin-left: 40px;
- margin-top: -72px;
- box-shadow: 0 0 1px rgba(255, 255, 255, 0);
- backface-visibility: hidden;
- }
-
- @media screen and (max-width: 800px) {
- .sb-addon-img {
- left: 300px;
- }
- }
-
- @media screen and (max-width: 600px) {
- .sb-section {
- flex-direction: column;
- }
-
- .sb-features-grid {
- grid-template-columns: repeat(1, 1fr);
- }
-
- .sb-socials {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .sb-addon {
- height: 280px;
- align-items: flex-start;
- padding-top: 32px;
- overflow: hidden;
- }
-
- .sb-addon-text {
- padding-left: 24px;
- }
-
- .sb-addon-img {
- right: 0;
- left: 0;
- top: 130px;
- bottom: 0;
- overflow: hidden;
- height: auto;
- width: 124%;
- }
-
- .sb-addon-img img {
- width: 1200px;
- transform: rotate(-12deg);
- margin-left: 0;
- margin-top: 48px;
- margin-bottom: -40px;
- margin-left: -24px;
- }
- }
- `}
-</style>
diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts
deleted file mode 100644
index f0cf6d03459022ec46f20e6433af04a6a84a735c..0000000000000000000000000000000000000000
--- a/src/stories/Header.stories.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { fn } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import MyHeader from './Header.vue';
-
-const meta = {
- /* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/configure/#configure-story-loading
- * to learn how to generate automatic titles
- */
- title: 'Example/Header',
- component: MyHeader,
- render: (args: any) => ({
- components: { MyHeader },
- setup() {
- return { args };
- },
- template: '<my-header :user="args.user" />',
- }),
- parameters: {
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
- layout: 'fullscreen',
- },
- args: {
- onLogin: fn(),
- onLogout: fn(),
- onCreateAccount: fn(),
- },
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
-} satisfies Meta<typeof MyHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedIn: Story = {
- args: {
- user: {
- name: 'Jane Doe',
- },
- },
-};
-
-export const LoggedOut: Story = {
- args: {
- user: null,
- },
-};
diff --git a/src/stories/Header.vue b/src/stories/Header.vue
deleted file mode 100644
index b716db02b3f5102cc7a67fb3216a5a20974c254e..0000000000000000000000000000000000000000
--- a/src/stories/Header.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
- <header>
- <div class="storybook-header">
- <div>
- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
- <g fill="none" fill-rule="evenodd">
- <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
- <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
- <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
- </g>
- </svg>
- <h1>Acme</h1>
- </div>
- <div>
- <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
- <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
- <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
- <my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />
- </div>
- </div>
- </header>
-</template>
-
-<script lang="ts" setup>
-import './header.css';
-import MyButton from './Button.vue';
-
-defineProps<{ user: { name: string } | null }>();
-
-defineEmits<{
- (event: 'createAccount'): void;
- (event: 'login'): void;
- (event: 'logout'): void;
-}>();
-
-</script>
-
diff --git a/src/stories/Page.stories.ts b/src/stories/Page.stories.ts
deleted file mode 100644
index 525870f15307bfb0ee0c43f3aa43c4301cedad6c..0000000000000000000000000000000000000000
--- a/src/stories/Page.stories.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { expect, userEvent, within } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import MyPage from './Page.vue';
-
-const meta = {
- title: 'Example/Page',
- component: MyPage,
- render: () => ({
- components: { MyPage },
- template: '<my-page />',
- }),
- parameters: {
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
- layout: 'fullscreen',
- },
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
-} satisfies Meta<typeof MyPage>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
-export const LoggedIn: Story = {
- play: async ({ canvasElement }: any) => {
- const canvas = within(canvasElement);
- const loginButton = canvas.getByRole('button', { name: /Log in/i });
- await expect(loginButton).toBeInTheDocument();
- await userEvent.click(loginButton);
- await expect(loginButton).not.toBeInTheDocument();
-
- const logoutButton = canvas.getByRole('button', { name: /Log out/i });
- await expect(logoutButton).toBeInTheDocument();
- },
-};
-
-export const LoggedOut: Story = {};
diff --git a/src/stories/Page.vue b/src/stories/Page.vue
deleted file mode 100644
index 6a6e5eb1a4afd1b9768d61c6641e0b03ba82c97d..0000000000000000000000000000000000000000
--- a/src/stories/Page.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
- <article>
- <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
-
- <section class="storybook-page">
- <h2>Pages in Storybook</h2>
- <p>
- We recommend building UIs with a
- <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
- <strong>component-driven</strong>
- </a>
- process starting with atomic components and ending with pages.
- </p>
- <p>
- Render pages with mock data. This makes it easy to build and review page states without
- needing to navigate to them in your app. Here are some handy patterns for managing page data
- in Storybook:
- </p>
- <ul>
- <li>
- Use a higher-level connected component. Storybook helps you compose such data from the
- "args" of child component stories
- </li>
- <li>
- Assemble data in the page component from your services. You can mock these services out
- using Storybook.
- </li>
- </ul>
- <p>
- Get a guided tutorial on component-driven development at
- <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
- >Storybook tutorials</a
- >
- . Read more in the
- <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
- .
- </p>
- <div class="tip-wrapper">
- <span class="tip">Tip</span>
- Adjust the width of the canvas with the
- <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
- <g fill="none" fill-rule="evenodd">
- <path
- d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
- id="a"
- fill="#999"
- />
- </g>
- </svg>
- Viewports addon in the toolbar
- </div>
- </section>
- </article>
-</template>
-
-<script lang="ts" setup>
-import './page.css';
-import MyHeader from './Header.vue';
-
-import { ref } from 'vue';
-
-const user = ref<{ name: string } | null>(null);
-
-const onLogin = () => {
- user.value = { name: 'Jane Doe' };
-};
-const onLogout = () => {
- user.value = null;
-};
-const onCreateAccount = () => {
- user.value = { name: 'Jane Doe' };
-};
-</script>
diff --git a/src/stories/assets/accessibility.png b/src/stories/assets/accessibility.png
deleted file mode 100644
index 6ffe6feabdc17f715771b69fd7f33ec2c57e7c30..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/accessibility.png and /dev/null differ
diff --git a/src/stories/assets/accessibility.svg b/src/stories/assets/accessibility.svg
deleted file mode 100644
index 107e93f838409ec8f8cd2f41eb89bf981c107009..0000000000000000000000000000000000000000
--- a/src/stories/assets/accessibility.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 48 48"><title>Accessibility</title><circle cx="24.334" cy="24" r="24" fill="#A849FF" fill-opacity=".3"/><path fill="#A470D5" fill-rule="evenodd" d="M27.8609 11.585C27.8609 9.59506 26.2497 7.99023 24.2519 7.99023C22.254 7.99023 20.6429 9.65925 20.6429 11.585C20.6429 13.575 22.254 15.1799 24.2519 15.1799C26.2497 15.1799 27.8609 13.575 27.8609 11.585ZM21.8922 22.6473C21.8467 23.9096 21.7901 25.4788 21.5897 26.2771C20.9853 29.0462 17.7348 36.3314 17.3325 37.2275C17.1891 37.4923 17.1077 37.7955 17.1077 38.1178C17.1077 39.1519 17.946 39.9902 18.9802 39.9902C19.6587 39.9902 20.253 39.6293 20.5814 39.0889L20.6429 38.9874L24.2841 31.22C24.2841 31.22 27.5529 37.9214 27.9238 38.6591C28.2948 39.3967 28.8709 39.9902 29.7168 39.9902C30.751 39.9902 31.5893 39.1519 31.5893 38.1178C31.5893 37.7951 31.3639 37.2265 31.3639 37.2265C30.9581 36.3258 27.698 29.0452 27.0938 26.2771C26.8975 25.4948 26.847 23.9722 26.8056 22.7236C26.7927 22.333 26.7806 21.9693 26.7653 21.6634C26.7008 21.214 27.0231 20.8289 27.4097 20.7005L35.3366 18.3253C36.3033 18.0685 36.8834 16.9773 36.6256 16.0144C36.3678 15.0515 35.2722 14.4737 34.3055 14.7305C34.3055 14.7305 26.8619 17.1057 24.2841 17.1057C21.7062 17.1057 14.456 14.7947 14.456 14.7947C13.4893 14.5379 12.3937 14.9873 12.0715 15.9502C11.7493 16.9131 12.3293 18.0044 13.3604 18.3253L21.2873 20.7005C21.674 20.8289 21.9318 21.214 21.9318 21.6634C21.9174 21.9493 21.9053 22.2857 21.8922 22.6473Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/stories/assets/addon-library.png b/src/stories/assets/addon-library.png
deleted file mode 100644
index 95deb38a88de416671e20ebc28dcd397d6910331..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/addon-library.png and /dev/null differ
diff --git a/src/stories/assets/assets.png b/src/stories/assets/assets.png
deleted file mode 100644
index cfba6817aeb60fe5eac1f632b703b18da0ec8759..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/assets.png and /dev/null differ
diff --git a/src/stories/assets/avif-test-image.avif b/src/stories/assets/avif-test-image.avif
deleted file mode 100644
index 530709bc1217efa55381695b81007deaababe82d..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/avif-test-image.avif and /dev/null differ
diff --git a/src/stories/assets/context.png b/src/stories/assets/context.png
deleted file mode 100644
index e5cd249a2d3adb58bd4c557405c9c1c0a4c340ee..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/context.png and /dev/null differ
diff --git a/src/stories/assets/discord.svg b/src/stories/assets/discord.svg
deleted file mode 100644
index d638958b66deab5c09daf517f4a6b5ed1d3b6ba6..0000000000000000000000000000000000000000
--- a/src/stories/assets/discord.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177575)"><mask id="mask0_10031_177575" style="mask-type:luminance" width="33" height="25" x="0" y="4" maskUnits="userSpaceOnUse"><path fill="#fff" d="M32.5034 4.00195H0.503906V28.7758H32.5034V4.00195Z"/></mask><g mask="url(#mask0_10031_177575)"><path fill="#5865F2" d="M27.5928 6.20817C25.5533 5.27289 23.3662 4.58382 21.0794 4.18916C21.0378 4.18154 20.9962 4.20057 20.9747 4.23864C20.6935 4.73863 20.3819 5.3909 20.1637 5.90358C17.7042 5.53558 15.2573 5.53558 12.8481 5.90358C12.6299 5.37951 12.307 4.73863 12.0245 4.23864C12.003 4.20184 11.9614 4.18281 11.9198 4.18916C9.63431 4.58255 7.44721 5.27163 5.40641 6.20817C5.38874 6.21578 5.3736 6.22848 5.36355 6.24497C1.21508 12.439 0.078646 18.4809 0.636144 24.4478C0.638667 24.477 0.655064 24.5049 0.677768 24.5227C3.41481 26.5315 6.06609 27.7511 8.66815 28.5594C8.70979 28.5721 8.75392 28.5569 8.78042 28.5226C9.39594 27.6826 9.94461 26.7968 10.4151 25.8653C10.4428 25.8107 10.4163 25.746 10.3596 25.7244C9.48927 25.3945 8.66058 24.9922 7.86343 24.5354C7.80038 24.4986 7.79533 24.4084 7.85333 24.3653C8.02108 24.2397 8.18888 24.109 8.34906 23.977C8.37804 23.9529 8.41842 23.9478 8.45249 23.963C13.6894 26.3526 19.359 26.3526 24.5341 23.963C24.5682 23.9465 24.6086 23.9516 24.6388 23.9757C24.799 24.1077 24.9668 24.2397 25.1358 24.3653C25.1938 24.4084 25.19 24.4986 25.127 24.5354C24.3298 25.0011 23.5011 25.3945 22.6296 25.7232C22.5728 25.7447 22.5476 25.8107 22.5754 25.8653C23.0559 26.7955 23.6046 27.6812 24.2087 28.5213C24.234 28.5569 24.2794 28.5721 24.321 28.5594C26.9357 27.7511 29.5869 26.5315 32.324 24.5227C32.348 24.5049 32.3631 24.4783 32.3656 24.4491C33.0328 17.5506 31.2481 11.5584 27.6344 6.24623C27.6256 6.22848 27.6105 6.21578 27.5928 6.20817ZM11.1971 20.8146C9.62043 20.8146 8.32129 19.3679 8.32129 17.5913C8.32129 15.8146 9.59523 14.368 11.1971 14.368C12.8115 14.368 14.0981 15.8273 14.0729 17.5913C14.0729 19.3679 12.7989 20.8146 11.1971 20.8146ZM21.8299 20.8146C20.2533 20.8146 18.9541 19.3679 18.9541 17.5913C18.9541 15.8146 20.228 14.368 21.8299 14.368C23.4444 14.368 24.7309 15.8273 24.7057 17.5913C24.7057 19.3679 23.4444 20.8146 21.8299 20.8146Z"/></g></g><defs><clipPath id="clip0_10031_177575"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/stories/assets/docs.png b/src/stories/assets/docs.png
deleted file mode 100644
index a749629df9ef3b4e20b86ab1a2482040df3ce8dd..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/docs.png and /dev/null differ
diff --git a/src/stories/assets/figma-plugin.png b/src/stories/assets/figma-plugin.png
deleted file mode 100644
index 8f79b08cdf28f568a9bfc9d2fee39bd85d4831e3..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/figma-plugin.png and /dev/null differ
diff --git a/src/stories/assets/github.svg b/src/stories/assets/github.svg
deleted file mode 100644
index dc513528ca899d698d55418bd3a39c036d01e21e..0000000000000000000000000000000000000000
--- a/src/stories/assets/github.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#161614" d="M16.0001 0C7.16466 0 0 7.17472 0 16.0256C0 23.1061 4.58452 29.1131 10.9419 31.2322C11.7415 31.3805 12.0351 30.8845 12.0351 30.4613C12.0351 30.0791 12.0202 28.8167 12.0133 27.4776C7.56209 28.447 6.62283 25.5868 6.62283 25.5868C5.89499 23.7345 4.8463 23.2419 4.8463 23.2419C3.39461 22.2473 4.95573 22.2678 4.95573 22.2678C6.56242 22.3808 7.40842 23.9192 7.40842 23.9192C8.83547 26.3691 11.1514 25.6609 12.0645 25.2514C12.2081 24.2156 12.6227 23.5087 13.0803 23.1085C9.52648 22.7032 5.7906 21.3291 5.7906 15.1886C5.7906 13.4389 6.41563 12.0094 7.43916 10.8871C7.27303 10.4834 6.72537 8.85349 7.59415 6.64609C7.59415 6.64609 8.93774 6.21539 11.9953 8.28877C13.2716 7.9337 14.6404 7.75563 16.0001 7.74953C17.3599 7.75563 18.7297 7.9337 20.0084 8.28877C23.0623 6.21539 24.404 6.64609 24.404 6.64609C25.2749 8.85349 24.727 10.4834 24.5608 10.8871C25.5868 12.0094 26.2075 13.4389 26.2075 15.1886C26.2075 21.3437 22.4645 22.699 18.9017 23.0957C19.4756 23.593 19.9869 24.5683 19.9869 26.0634C19.9869 28.2077 19.9684 29.9334 19.9684 30.4613C19.9684 30.8877 20.2564 31.3874 21.0674 31.2301C27.4213 29.1086 32 23.1037 32 16.0256C32 7.17472 24.8364 0 16.0001 0ZM5.99257 22.8288C5.95733 22.9084 5.83227 22.9322 5.71834 22.8776C5.60229 22.8253 5.53711 22.7168 5.57474 22.6369C5.60918 22.5549 5.7345 22.5321 5.85029 22.587C5.9666 22.6393 6.03284 22.7489 5.99257 22.8288ZM6.7796 23.5321C6.70329 23.603 6.55412 23.5701 6.45291 23.4581C6.34825 23.3464 6.32864 23.197 6.40601 23.125C6.4847 23.0542 6.62937 23.0874 6.73429 23.1991C6.83895 23.3121 6.85935 23.4605 6.7796 23.5321ZM7.31953 24.4321C7.2215 24.5003 7.0612 24.4363 6.96211 24.2938C6.86407 24.1513 6.86407 23.9804 6.96422 23.9119C7.06358 23.8435 7.2215 23.905 7.32191 24.0465C7.41968 24.1914 7.41968 24.3623 7.31953 24.4321ZM8.23267 25.4743C8.14497 25.5712 7.95818 25.5452 7.82146 25.413C7.68156 25.2838 7.64261 25.1004 7.73058 25.0035C7.81934 24.9064 8.00719 24.9337 8.14497 25.0648C8.28381 25.1938 8.3262 25.3785 8.23267 25.4743ZM9.41281 25.8262C9.37413 25.9517 9.19423 26.0088 9.013 25.9554C8.83203 25.9005 8.7136 25.7535 8.75016 25.6266C8.78778 25.5003 8.96848 25.4408 9.15104 25.4979C9.33174 25.5526 9.45044 25.6985 9.41281 25.8262ZM10.7559 25.9754C10.7604 26.1076 10.6067 26.2172 10.4165 26.2196C10.2252 26.2238 10.0704 26.1169 10.0683 25.9868C10.0683 25.8534 10.2185 25.7448 10.4098 25.7416C10.6001 25.7379 10.7559 25.8441 10.7559 25.9754ZM12.0753 25.9248C12.0981 26.0537 11.9658 26.1862 11.7769 26.2215C11.5912 26.2554 11.4192 26.1758 11.3957 26.0479C11.3726 25.9157 11.5072 25.7833 11.6927 25.7491C11.8819 25.7162 12.0512 25.7937 12.0753 25.9248Z"/></svg>
\ No newline at end of file
diff --git a/src/stories/assets/share.png b/src/stories/assets/share.png
deleted file mode 100644
index 8097a370777a782bbe52082a338584d04e62e796..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/share.png and /dev/null differ
diff --git a/src/stories/assets/styling.png b/src/stories/assets/styling.png
deleted file mode 100644
index d341e8263e403615dadaa6ffc5fb7604837357f8..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/styling.png and /dev/null differ
diff --git a/src/stories/assets/testing.png b/src/stories/assets/testing.png
deleted file mode 100644
index d4ac39a0ced924068b7625735c9bccac7b17f45d..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/testing.png and /dev/null differ
diff --git a/src/stories/assets/theming.png b/src/stories/assets/theming.png
deleted file mode 100644
index 1535eb9b8192efc0992daf0a0adc1d424660890d..0000000000000000000000000000000000000000
Binary files a/src/stories/assets/theming.png and /dev/null differ
diff --git a/src/stories/assets/tutorials.svg b/src/stories/assets/tutorials.svg
deleted file mode 100644
index b492a9c66f7f9e077006618889d18d3d1a7473dd..0000000000000000000000000000000000000000
--- a/src/stories/assets/tutorials.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177597)"><path fill="#B7F0EF" fill-rule="evenodd" d="M17 7.87059C17 6.48214 17.9812 5.28722 19.3431 5.01709L29.5249 2.99755C31.3238 2.64076 33 4.01717 33 5.85105V22.1344C33 23.5229 32.0188 24.7178 30.6569 24.9879L20.4751 27.0074C18.6762 27.3642 17 25.9878 17 24.1539L17 7.87059Z" clip-rule="evenodd" opacity=".7"/><path fill="#87E6E5" fill-rule="evenodd" d="M1 5.85245C1 4.01857 2.67623 2.64215 4.47507 2.99895L14.6569 5.01848C16.0188 5.28861 17 6.48354 17 7.87198V24.1553C17 25.9892 15.3238 27.3656 13.5249 27.0088L3.34311 24.9893C1.98119 24.7192 1 23.5242 1 22.1358V5.85245Z" clip-rule="evenodd"/><path fill="#61C1FD" fill-rule="evenodd" d="M15.543 5.71289C15.543 5.71289 16.8157 5.96289 17.4002 6.57653C17.9847 7.19016 18.4521 9.03107 18.4521 9.03107C18.4521 9.03107 18.4521 25.1106 18.4521 26.9629C18.4521 28.8152 19.3775 31.4174 19.3775 31.4174L17.4002 28.8947L16.2575 31.4174C16.2575 31.4174 15.543 29.0765 15.543 27.122C15.543 25.1674 15.543 5.71289 15.543 5.71289Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_10031_177597"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/stories/assets/youtube.svg b/src/stories/assets/youtube.svg
deleted file mode 100644
index a7515d7e9b37fb70bc23d5b87e55ad11f2f77213..0000000000000000000000000000000000000000
--- a/src/stories/assets/youtube.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#ED1D24" d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z"/><path fill="#fff" d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z"/></svg>
\ No newline at end of file
diff --git a/src/stories/button.css b/src/stories/button.css
deleted file mode 100644
index 94d674b7614d9ccd5d005df17fdb2a7c2bc287f4..0000000000000000000000000000000000000000
--- a/src/stories/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
- display: inline-block;
- cursor: pointer;
- border: 0;
- border-radius: 3em;
- font-weight: 700;
- line-height: 1;
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
- background-color: #1ea7fd;
- color: white;
-}
-.storybook-button--secondary {
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
- background-color: transparent;
- color: #333;
-}
-.storybook-button--small {
- padding: 10px 16px;
- font-size: 12px;
-}
-.storybook-button--medium {
- padding: 11px 20px;
- font-size: 14px;
-}
-.storybook-button--large {
- padding: 12px 24px;
- font-size: 16px;
-}
diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bdbacf43e8e2de1c35b2a953afda4b6278444e16
--- /dev/null
+++ b/src/stories/components/Button/Button.stories.ts
@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta: Meta = {
+ title: 'Components/Button',
+ component: Button,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component that is used as a button. Can be used with icon.',
+ },
+ },
+ },
+ argTypes: {
+ label: { control: 'text' },
+ size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+ textStyle: { control: 'select', options: ['bold', 'italic'] },
+ iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
+ width: { control: 'text' },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ textColor: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ border: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+ args: {},
+};
+
+export const LargeFull: Story = {
+ args: {
+ label: 'Press me!',
+ size: 'large',
+ textStyle: 'bold',
+ iconPos: 'left',
+ width: '200',
+ theme: 'sky',
+ textColor: 'white',
+ border: 'black',
+ },
+};
diff --git a/src/stories/components/Button/Button.vue b/src/stories/components/Button/Button.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cef4d5580cf028204bf2d801c0f90ad95706f798
--- /dev/null
+++ b/src/stories/components/Button/Button.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { convert500ThemeToColor } from '@helpers/colors';
+import type { IButtonProps } from '@interfaces/componentsProps';
+
+const props = withDefaults(defineProps<IButtonProps>(), {
+ size: 'medium',
+ theme: 'white',
+ textColor: 'black',
+ iconPos: 'left',
+});
+
+const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const textColorComputed = computed(() => convert500ThemeToColor(props.textColor));
+const borderColor = computed(() => (props.border ? convert500ThemeToColor(props.border) : ''));
+const textSize = computed(() => {
+ switch (props.size) {
+ case 'small':
+ return '12px';
+ case 'large':
+ return '20px';
+ case 'huge':
+ return '28px';
+ }
+ return '16px';
+});
+const buttonPadding = computed(() => {
+ switch (props.size) {
+ case 'small':
+ return '0.5rem 0.375rem';
+ case 'large':
+ return '1.2rem 0.8rem';
+ case 'huge':
+ return '1.8rem 1.2rem';
+ }
+ return '0.75rem 0.5rem';
+});
+const width = computed(() => (props.width ? `${props.width}px` : 'max-content'));
+</script>
+
+<template>
+ <button
+ :class="[
+ 'button',
+ {
+ 'flex-column': iconPos === 'top' || iconPos === 'bottom',
+ border: borderColor,
+ },
+ ]"
+ :style="`padding: ${buttonPadding}; width: ${width}`"
+ >
+ <span :style="`background-color: ${themeColor}`" class="background"></span>
+ <span
+ v-if="label || !iconOnly"
+ :style="`color: ${textColorComputed}; font-size: ${textSize}`"
+ :class="[
+ 'text',
+ {
+ bold: textStyle === 'bold',
+ italic: textStyle === 'italic',
+ },
+ ]"
+ >{{ label ? label : !iconOnly ? 'Button' : '' }}</span
+ >
+ <span
+ v-if="$slots.default"
+ :class="[
+ 'icon',
+ {
+ 'order-1': iconPos === 'left' || iconPos === 'top',
+ },
+ ]"
+ >
+ <slot />
+ </span>
+ </button>
+</template>
+
+<style scoped>
+.button {
+ position: relative;
+ border-radius: 7px;
+ display: flex;
+ gap: 8px;
+ justify-content: center;
+ align-items: center;
+ user-select: none;
+}
+.button:hover .background {
+ filter: brightness(90%);
+}
+.button:active .background {
+ filter: brightness(75%);
+}
+.background {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-radius: 5px;
+ transition: filter 0.2s ease-in-out;
+}
+.text {
+ position: relative;
+ z-index: 2;
+ line-height: 1;
+}
+.icon {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.order-1 {
+ order: -1;
+}
+.border {
+ border: 2px solid v-bind(borderColor);
+}
+</style>
diff --git a/src/stories/components/Divider/Divider.stories.ts b/src/stories/components/Divider/Divider.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b7a635072f60e90f550c45dec65c27d0e215c77e
--- /dev/null
+++ b/src/stories/components/Divider/Divider.stories.ts
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Divider from './Divider.vue';
+
+const meta: Meta = {
+ title: 'Components/Divider',
+ component: Divider,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component that is used to separate content.',
+ },
+ },
+ },
+ argTypes: {
+ height: { control: 'number' },
+ type: { control: 'select', options: ['solid', 'dashed', 'dotted'] },
+ color: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+ args: {},
+};
+
+export const RedDashed: Story = {
+ args: {
+ height: 2,
+ color: 'red',
+ type: 'dashed',
+ },
+};
diff --git a/src/stories/components/Divider/Divider.vue b/src/stories/components/Divider/Divider.vue
new file mode 100644
index 0000000000000000000000000000000000000000..54164cd1f5d957799855c0581e2c182949ce2cea
--- /dev/null
+++ b/src/stories/components/Divider/Divider.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { convert500ThemeToColor } from '@helpers/colors';
+import type { IDividerProps } from '@interfaces/componentsProps';
+
+const props = withDefaults(defineProps<IDividerProps>(), {
+ height: 1,
+ type: 'solid',
+ color: 'black',
+});
+const colorConverted = computed(() => convert500ThemeToColor(props.color));
+</script>
+
+<template>
+ <div :style="`border-bottom: ${height}px ${type} ${colorConverted}`" class="w-full"></div>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/stories/components/Drawer/Drawer.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cd0c0de42a74321505e837c0b8647ea3ddfb567c
--- /dev/null
+++ b/src/stories/components/Drawer/Drawer.stories.ts
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Drawer from './Drawer.vue';
+import { iconsSet } from '@/common/constants/icons';
+
+const meta: Meta = {
+ title: 'Components/Drawer',
+ component: Drawer,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component that displayed as an overlay. Can be used as a sidebar or tooltip.',
+ },
+ },
+ },
+ argTypes: {
+ visible: { control: 'boolean' },
+ position: { control: 'select', options: ['left', 'right', 'top', 'bottom'] },
+ width: { control: 'number' },
+ header: { control: 'text' },
+ default: { control: 'text' },
+ footer: { control: 'text' },
+ modal: { control: 'boolean' },
+ dismissible: { control: 'boolean' },
+ closeIcon: { control: 'select', options: Object.keys(iconsSet) },
+ headerDivider: { control: 'boolean' },
+ footerDivider: { control: 'boolean' },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+ args: {
+ visible: true,
+ default: 'Какой-то текÑÑ‚.',
+ },
+};
+
+export const BlackFull: Story = {
+ args: {
+ visible: true,
+ width: 200,
+ theme: 'black',
+ closeIcon: 'CrossIcon',
+ header: 'Drawer',
+ footer: 'The end.',
+ headerDivider: true,
+ footerDivider: true,
+
+ default:
+ ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta dolorum eaque explicabo illo. Beatae et eveniet itaque libero sint. Atque blanditiis consequuntur dolorum explicabo, facilis iste nulla numquam provident.',
+
+ modal: false,
+ dismissible: false,
+ },
+};
diff --git a/src/stories/components/Drawer/Drawer.vue b/src/stories/components/Drawer/Drawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..913796fe566dac8f8657b5fd6dfebc04f98ec446
--- /dev/null
+++ b/src/stories/components/Drawer/Drawer.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { iconsSet } from '@/common/constants/icons';
+import { convert500ThemeToColor, convert300ThemeToColor } from '@helpers/colors';
+import type { IDrawerProps } from '@interfaces/componentsProps';
+
+const props = withDefaults(defineProps<IDrawerProps>(), {
+ visible: false,
+ position: 'left',
+ width: 400,
+ modal: true,
+ dismissible: true,
+ theme: 'white',
+ closeIcon: 'CrossIcon',
+ headerDivider: false,
+ footerDivider: false,
+});
+const emit = defineEmits(['onClose']);
+const visible = defineModel<boolean>('visible', {
+ set(value) {
+ if (!value) {
+ emit('onClose');
+ }
+ return value;
+ },
+});
+
+const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const scrollColor = computed(() => convert300ThemeToColor(props.theme));
+const textColor = computed(() => {
+ if (!props.theme || props.theme === 'white') return 'black';
+ return 'white';
+});
+const drawerWidth = computed(() => {
+ if (+props.width < 200) return '200px';
+ return `${props.width}px`;
+});
+</script>
+<template>
+ <article>
+ <section
+ v-if="modal"
+ :class="[
+ 'drawerBackground',
+ {
+ drawerBackgroundOpened: visible,
+ },
+ ]"
+ @click.prevent="dismissible ? (visible = false) : ''"
+ ></section>
+ <section
+ :style="`color: ${textColor}; background-color: ${themeColor}`"
+ :class="[
+ 'drawer',
+ {
+ drawerLeft: position === 'left',
+ drawerRight: position === 'right',
+ drawerTop: position === 'top',
+ drawerBottom: position === 'bottom',
+ drawerOpened: visible,
+ drawerVertical: position === 'top' || position === 'bottom',
+ },
+ ]"
+ >
+ <header class="drawerHeader">
+ <slot name="header" />
+ <button class="buttonClose" @click.prevent="visible = false">
+ <component :is="iconsSet[closeIcon]" :color="textColor" />
+ </button>
+ </header>
+ <div v-if="headerDivider" class="divider divider-header"></div>
+ <div class="main">
+ <slot />
+ </div>
+ <div v-if="$slots.footer">
+ <div v-if="footerDivider" class="divider"></div>
+ <footer class="drawerFooter">
+ <slot name="footer" />
+ </footer>
+ </div>
+ </section>
+ </article>
+</template>
+
+<style scoped>
+.drawerBackground {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.5);
+ transition: all ease-out 0.2s;
+ z-index: -50;
+ opacity: 0;
+}
+.drawerBackgroundOpened {
+ z-index: 30;
+ opacity: 1;
+}
+.drawer {
+ width: v-bind(drawerWidth);
+ position: fixed;
+ z-index: 31;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 20px;
+ transition: transform ease-out 0.2s;
+ border-right: 2px solid #b1b1b1;
+}
+.drawerVertical {
+ width: 100vw !important;
+ height: v-bind(drawerWidth) !important;
+}
+.drawerOpened {
+ transform: translateX(0) !important;
+}
+.drawerLeft {
+ transform: translateX(-100%);
+ top: 0;
+ left: 0;
+}
+.drawerRight {
+ transform: translateX(100%);
+ top: 0;
+ right: 0;
+}
+.drawerTop {
+ transform: translateY(-100%);
+ top: 0;
+ left: 0;
+}
+.drawerBottom {
+ transform: translateY(100%);
+ bottom: 0;
+ left: 0;
+}
+.drawerHeader {
+ font-weight: bold;
+ font-size: 32px;
+ width: calc(100% - 30px);
+ margin-bottom: 10px;
+ min-height: 37px;
+ height: 37px;
+ overflow: auto;
+}
+.main {
+ flex: 1 1 auto;
+ overflow: auto;
+ margin: 10px;
+ padding-right: 10px;
+}
+.drawerFooter {
+ padding: 10px 10px 0 10px;
+ overflow: auto;
+}
+.divider {
+ height: 2px;
+ background-color: v-bind(scrollColor);
+}
+.divider-header {
+ position: absolute;
+ left: 20px;
+ top: 65px;
+ width: calc(100% - 40px);
+}
+.buttonClose {
+ position: absolute;
+ top: 25px;
+ right: 20px;
+ width: 30px;
+ display: flex;
+ align-items: center;
+}
+::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: v-bind(scrollColor);
+}
+</style>
diff --git a/src/stories/components/MenuDial/MenuDial.stories.ts b/src/stories/components/MenuDial/MenuDial.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a91196a0ff882e4feb5fa05f244d7dd8cdd7f20a
--- /dev/null
+++ b/src/stories/components/MenuDial/MenuDial.stories.ts
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import MenuDial from './MenuDial.vue';
+
+const meta: Meta = {
+ title: 'Components/MenuDial',
+ component: MenuDial,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component that represents a button with a drop-down list.',
+ },
+ },
+ },
+ argTypes: {
+ items: { control: 'object' },
+ size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+ direction: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof MenuDial>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+ args: {
+ items: [
+ {
+ label: 'First',
+ },
+ {
+ label: 'Second',
+ },
+ ],
+
+ theme: 'white',
+ },
+};
+
+export const Full: Story = {
+ args: {
+ items: [
+ {
+ label: 'font-family link',
+ theme: 'green',
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ linkBlank: true,
+ },
+ {
+ label: 'Second',
+ theme: 'green',
+ textStyle: 'italic',
+ },
+ ],
+
+ theme: 'sky',
+ },
+};
diff --git a/src/stories/components/MenuDial/MenuDial.vue b/src/stories/components/MenuDial/MenuDial.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b541296d9ac86f579c62cbecc79291ca8788bc7
--- /dev/null
+++ b/src/stories/components/MenuDial/MenuDial.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { IMDProps } from '@interfaces/componentsProps';
+import { convert500ThemeToColor } from '@helpers/colors';
+import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
+
+const props = withDefaults(defineProps<IMDProps>(), {
+ theme: 'white',
+ size: 'medium',
+ direction: 'right',
+});
+const active = defineModel('active');
+
+const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const textColor = computed(() => {
+ if (props.theme === 'white') return '#000000';
+ return '#ffffff';
+});
+const elementsSize = computed(() => {
+ switch (props.size) {
+ case 'small':
+ return 30;
+ case 'large':
+ return 55;
+ case 'huge':
+ return 70;
+ }
+ return 40;
+});
+const menuListStyles = computed(() => {
+ switch (props.direction) {
+ case 'left':
+ return `flex-direction: row-reverse; transform: translateY(-${elementsSize.value / 2}px) ${active.value ? `translateX(calc(-100% - 10px))` : 'translateX(calc(-100% + 60px))'}`;
+ case 'up':
+ return `flex-direction: column-reverse; transform: translateY(-${active.value ? (0.5 + props.items.length) * elementsSize.value + 15 : 1.5 * elementsSize.value}px) translateX(calc(-50% + ${elementsSize.value / 2}px))`;
+ case 'down':
+ return `flex-direction: column; transform: translateY(${active.value ? 25 : -20}px) translateX(calc(-50% + ${elementsSize.value / 2}px))`;
+ }
+ return `transform: translateY(-${elementsSize.value / 2}px) translateX(${active.value ? elementsSize.value + 10 : -20}px)`;
+});
+// const circleStylesItems = computed(() => {
+// if (props.direction !== 'circle') {
+// return '';
+// }
+// const styles = [];
+// let deg = 0;
+// const itemsCount = props.items.length;
+// const degToItem = Math.round(360 / itemsCount);
+// for (let i = 0; i < itemsCount; i++) {
+// styles.push(`transform: rotate(${deg}deg) rotate(${-deg}deg)`);
+// deg += degToItem;
+// }
+// console.log(styles);
+// return styles;
+// });
+const openLink = (url: string, isBlank: boolean | undefined) =>
+ window.open(url, isBlank ? '_blank' : '_self');
+</script>
+
+<template>
+ <section class="menuContainer">
+ <button
+ :style="`border: ${theme === 'white' ? '2px solid black' : ''}; background-color: ${themeColor ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${active ? 'rotate(135deg)' : ''};`"
+ class="menuButton"
+ @click.prevent="active = !active"
+ >
+ <slot name="buttonIcon" />
+ <PlusIcon v-if="!$slots.buttonIcon" :size="elementsSize - 10" :color="textColor" />
+ </button>
+ <ul
+ :class="[
+ 'menuList',
+ {
+ menuListColumn: direction === 'up' || direction === 'down',
+ menuListOpened: active,
+ },
+ ]"
+ :style="menuListStyles"
+ >
+ <li
+ v-for="(item, index) of items"
+ :key="item.label"
+ :style="`height: ${elementsSize}px; background-color: ${convert500ThemeToColor(item.theme ?? 'white')};
+ color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'}; border-color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'};`"
+ class="menuElement"
+ @click="
+ () => {
+ if (item.link) openLink(item.link, item.linkBlank);
+ if (item.onClick) item.onClick();
+ }
+ "
+ >
+ <slot :name="`${index + 1}IconBefore`" />
+ <p
+ style="padding: 5px"
+ :class="[
+ '',
+ {
+ bold: item.textStyle === 'bold',
+ italic: item.textStyle === 'italic',
+ },
+ ]"
+ >
+ {{ item.label }}
+ </p>
+ <slot :name="`${index + 1}IconAfter`" />
+ </li>
+ </ul>
+ </section>
+</template>
+
+<style scoped>
+.menuContainer {
+ position: relative;
+}
+.menuButton {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ transition: 0.2s ease-in-out;
+}
+.menuButton:hover {
+ filter: brightness(90%);
+}
+.menuButton:active {
+ filter: brightness(75%);
+}
+.menuList {
+ display: flex;
+ pointer-events: none;
+ gap: 10px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ opacity: 0;
+ transition: 0.2s ease-in-out;
+}
+.menuListOpened {
+ pointer-events: auto;
+ opacity: 1;
+}
+.menuElement {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+ border: 1px solid white;
+ border-radius: 5px;
+ user-select: none;
+ cursor: pointer;
+ transition: 0.2s ease-in-out;
+}
+.menuElement:hover {
+ filter: brightness(90%);
+}
+.menuElement:active {
+ filter: brightness(75%);
+}
+</style>
diff --git a/src/stories/components/Modal/Modal.stories.ts b/src/stories/components/Modal/Modal.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b23779a6d548c112db0372571eb43b2e7a0ba5c3
--- /dev/null
+++ b/src/stories/components/Modal/Modal.stories.ts
@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Modal from './Modal.vue';
+import { iconsSet } from '@/common/constants/icons';
+
+const meta: Meta = {
+ title: 'Components/Modal',
+ component: Modal,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A container to display content in an overlay window.',
+ },
+ },
+ },
+ argTypes: {
+ visible: { control: 'boolean' },
+ width: { control: 'text' },
+ height: { control: 'text' },
+ header: { control: 'text' },
+ default: { control: 'text' },
+ headerDivider: { control: 'boolean' },
+ dismissible: { control: 'boolean' },
+ closeIcon: { control: 'select', options: Object.keys(iconsSet) },
+ position: {
+ control: 'select',
+ options: [
+ 'top',
+ 'right',
+ 'bottom',
+ 'left',
+ 'topLeft',
+ 'topRight',
+ 'bottomLeft',
+ 'bottomRight',
+ ],
+ },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+ args: {
+ visible: true,
+ header: 'Modal',
+ default: 'This is a modal.',
+ },
+};
+
+export const Full: Story = {
+ args: {
+ visible: true,
+ header: 'Modal with veeeeeery long content',
+
+ default:
+ 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\n\n\n',
+
+ width: '40%',
+ height: '50%',
+ theme: 'black',
+ position: 'topRight',
+ dismissible: true,
+ closeIcon: 'CodeIcon',
+ headerDivider: true,
+ },
+};
diff --git a/src/stories/components/Modal/Modal.vue b/src/stories/components/Modal/Modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1ebe15a779132e088c5cd524a2edfab02dd9d1ed
--- /dev/null
+++ b/src/stories/components/Modal/Modal.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { convert300ThemeToColor, convert500ThemeToColor } from '@helpers/colors';
+import type { IModalProps } from '@interfaces/componentsProps';
+import { iconsSet } from '@/common/constants/icons';
+
+const props = withDefaults(defineProps<IModalProps>(), {
+ visible: false,
+ dismissible: false,
+ theme: 'white',
+ width: '30%',
+ height: '30%',
+ headerDivider: false,
+ closeIcon: 'CrossIcon',
+});
+const emit = defineEmits(['onClose']);
+const visible = defineModel('visible', {
+ set(value) {
+ if (!value) {
+ emit('onClose');
+ }
+ return value;
+ },
+});
+const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const scrollColor = computed(() => convert300ThemeToColor(props.theme));
+const textColor = computed(() => {
+ if (!props.theme) return '#000000';
+ if (props.theme === 'white') return '#000000';
+ return '#ffffff';
+});
+const onKeydown = (event: KeyboardEvent) => {
+ if (event.key === 'Escape' && visible.value) visible.value = false;
+};
+document.addEventListener('keydown', onKeydown);
+</script>
+
+<template>
+ <article>
+ <section
+ :class="[
+ 'modalBackground',
+ {
+ openedModalBackground: visible,
+ },
+ ]"
+ @click.prevent="() => (dismissible ? (visible = false) : false)"
+ ></section>
+ <section
+ :style="`color: ${textColor}; background-color: ${themeColor}; width: ${width}; height: ${height}`"
+ :class="[
+ 'modal',
+ {
+ openedModal: visible,
+ modalToCenter: !position,
+ top: position === 'top',
+ toTop: position === 'topLeft' || position === 'topRight',
+ bottom: position === 'bottom',
+ toBottom: position === 'bottomLeft' || position === 'bottomRight',
+ left: position === 'left',
+ toLeft: position === 'topLeft' || position === 'bottomLeft',
+ right: position === 'right',
+ toRight: position === 'topRight' || position === 'bottomRight',
+ },
+ ]"
+ >
+ <header class="modalHeader">
+ <div class="headerContent">
+ <slot name="header" />
+ </div>
+ <button class="buttonClose" @click.prevent="visible = false">
+ <component :is="iconsSet[closeIcon]" :color="textColor" />
+ </button>
+ <div v-if="headerDivider" class="divider"></div>
+ </header>
+ <div class="main">
+ <slot />
+ </div>
+ </section>
+ </article>
+</template>
+
+<style scoped>
+.modalBackground {
+ position: fixed;
+ top: -100%;
+ left: -100%;
+ width: 200vw;
+ height: 200vh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: -50;
+ opacity: 0;
+}
+.openedModalBackground {
+ z-index: 60;
+ opacity: 1;
+}
+.modal {
+ position: absolute;
+ z-index: -50;
+ min-width: 250px;
+ min-height: 100px;
+ padding: 20px;
+ border: 2px solid gray;
+ border-radius: 15px;
+ opacity: 0;
+ transform: scale(0.5);
+ transition: all ease-in-out 0.2s;
+ user-select: none;
+}
+.modalToCenter {
+ top: 50%;
+ left: 50%;
+ translate: -50% -50%;
+}
+.openedModal {
+ user-select: auto;
+ z-index: 9999;
+ opacity: 1;
+ transform: scale(1);
+}
+.modalHeader {
+ font-size: 1.5rem;
+ min-height: 1.5rem;
+ text-align: center;
+ padding-right: 40px;
+ margin-bottom: 20px;
+}
+.headerContent {
+ font-weight: bold;
+ overflow: auto;
+ white-space: nowrap;
+}
+.main {
+ padding-right: 5px;
+ height: calc(100% - 45px);
+ overflow: auto;
+}
+.buttonClose {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 30px;
+ cursor: pointer;
+}
+.divider {
+ height: 2px;
+ background-color: v-bind(scrollColor);
+ position: absolute;
+ left: 20px;
+ top: 60px;
+ width: calc(100% - 40px);
+}
+::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: v-bind(scrollColor);
+}
+.toTop {
+ top: 10px !important;
+}
+.toBottom {
+ bottom: 10px !important;
+}
+.toLeft {
+ left: 10px !important;
+}
+.toRight {
+ right: 10px !important;
+}
+.top {
+ top: 10px !important;
+ left: 50%;
+ translate: -50% 0;
+}
+.bottom {
+ bottom: 10px !important;
+ left: 50%;
+ translate: -50% 0;
+}
+.left {
+ top: 50%;
+ translate: 0 -50%;
+ left: 10px !important;
+}
+.right {
+ top: 50%;
+ translate: 0 -50%;
+ right: 10px !important;
+}
+</style>
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/stories/components/SelectButton/SelectButton.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0e7f8c88b58e34fb32461fe14996c6aa1e4046c4
--- /dev/null
+++ b/src/stories/components/SelectButton/SelectButton.stories.ts
@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import SelectButton from './SelectButton.vue';
+
+const meta: Meta = {
+ title: 'Components/SelectButton',
+ component: SelectButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component that is used to select a value from a list using a button.',
+ },
+ },
+ },
+ argTypes: {
+ options: {
+ control: 'object',
+ },
+ size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+ rounded: { control: 'boolean' },
+ activeBackgroundColor: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ border: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ disabled: { control: 'boolean' },
+ },
+ args: {},
+} satisfies Meta<typeof SelectButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+ args: {
+ options: [
+ {
+ label: 'First',
+ },
+ {
+ label: 'Second',
+ },
+ ],
+
+ rounded: false,
+ disabled: false,
+ },
+};
+
+export const LargeFull: Story = {
+ args: {
+ options: [
+ {
+ label: 'First',
+ color: 'white',
+ backgroundColor: 'black',
+ },
+ {
+ label: 'Second',
+ activeColor: 'blue',
+ backgroundColor: 'yellow',
+ },
+ {
+ label: 'Third',
+ activeColor: 'green',
+ backgroundColor: 'purple',
+ },
+ ],
+
+ border: 'sky',
+ activeBackgroundColor: 'red',
+ rounded: true,
+ disabled: false,
+ size: 'large',
+ },
+};
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f3761b9bd5185f7e58378dde2e5d3083b450b4b
--- /dev/null
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { convert500ThemeToColor } from '@helpers/colors';
+import type { ISBProps } from '@interfaces/componentsProps';
+
+const props = withDefaults(defineProps<ISBProps>(), {
+ size: 'medium',
+ border: 'black',
+ activeBackgroundColor: 'sky',
+});
+const emit = defineEmits(['onClick']);
+const value = defineModel<never>('value');
+
+const activeBackgroundColorComputed = computed(() =>
+ props.activeBackgroundColor ? convert500ThemeToColor(props.activeBackgroundColor) : '',
+);
+const borderColor = computed(() => (props.border ? convert500ThemeToColor(props.border) : ''));
+const textSize = computed(() => {
+ switch (props.size) {
+ case 'small':
+ return '12px';
+ case 'large':
+ return '20px';
+ case 'huge':
+ return '24px';
+ }
+ return '16px';
+});
+const buttonPadding = computed(() => {
+ switch (props.size) {
+ case 'small':
+ return '0.5rem 0.375rem';
+ case 'large':
+ return '1.2rem 0.8rem';
+ case 'huge':
+ return '1.8rem 1.2rem';
+ }
+ return '0.75rem 0.5rem';
+});
+const buttonHeight = computed(() => {
+ switch (props.size) {
+ case 'small':
+ return '24px';
+ case 'large':
+ return '68px';
+ case 'huge':
+ return '114px';
+ }
+ return '40px';
+});
+</script>
+
+<template>
+ <div
+ :class="[
+ 'buttonGroup',
+ {
+ 'rounded-full': props.rounded,
+ border: borderColor,
+ disabled: disabled,
+ },
+ ]"
+ >
+ <button
+ v-for="(item, index) of options"
+ :key="item.label"
+ :class="[
+ 'button',
+ {
+ 'flex-column': item.iconPosition === 'top' || item.iconPosition === 'bottom',
+ },
+ ]"
+ :style="`padding: ${buttonPadding}`"
+ @click.prevent="
+ () => {
+ value = (item.value as never) ?? item.label;
+ emit('onClick', value);
+ }
+ "
+ >
+ <span
+ :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : convert500ThemeToColor(item.backgroundColor ?? 'white')}`"
+ :class="[
+ 'background',
+ {
+ 'rounded-left': index === 0,
+ 'rounded-left-full': index === 0 && props.rounded,
+ 'rounded-right': index === options.length - 1,
+ 'rounded-right-full': index === options.length - 1 && props.rounded,
+ },
+ ]"
+ ></span>
+ <span
+ v-if="!item.isLabelHidden"
+ :style="`color: ${value === item.value || value === item.label ? item.activeColor : convert500ThemeToColor(item.color ?? 'black')}; font-size: ${textSize}`"
+ :class="[
+ 'text',
+ {
+ bold: item.textStyle === 'bold',
+ italic: item.textStyle === 'italic',
+ },
+ ]"
+ >{{ item.label ?? index }}</span
+ >
+ <div
+ :class="[
+ 'icon',
+ {
+ 'order-1': item.iconPosition === 'left' || item.iconPosition === 'top',
+ },
+ ]"
+ >
+ <slot :name="`${index + 1}Icon`" />
+ </div>
+ </button>
+ </div>
+</template>
+
+<style scoped>
+.buttonGroup {
+ width: max-content;
+ display: flex;
+ border-radius: 0.75rem;
+ position: relative;
+}
+.button {
+ position: relative;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ user-select: none;
+}
+.button:hover .background {
+ filter: brightness(90%);
+}
+.button:active .background {
+ filter: brightness(75%);
+}
+.background {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: -2;
+ top: 0;
+ left: 0;
+ transition: filter 0.2s ease-in-out;
+}
+.icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.order-1 {
+ order: -1;
+}
+.border {
+ border: 2px solid v-bind(borderColor);
+}
+.rounded-left {
+ border-radius: 0.5rem 0 0 0.5rem;
+}
+.rounded-left-full {
+ border-radius: v-bind(buttonHeight) 0 0 v-bind(buttonHeight);
+}
+.rounded-right {
+ border-radius: 0 0.5rem 0.5rem 0;
+}
+.rounded-right-full {
+ border-radius: 0 v-bind(buttonHeight) v-bind(buttonHeight) 0;
+}
+.rounded-full {
+ border-radius: v-bind(buttonHeight);
+}
+.disabled {
+ pointer-events: none;
+ background-color: #e1e7f1;
+}
+.disabled * {
+ color: #62708c !important;
+}
+</style>
diff --git a/src/stories/components/Slider/Slider.stories.ts b/src/stories/components/Slider/Slider.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d465efa91f311e07eb90f277f984c23d426e6824
--- /dev/null
+++ b/src/stories/components/Slider/Slider.stories.ts
@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Slider from './Slider.vue';
+
+const meta: Meta = {
+ title: 'Components/Slider',
+ component: Slider,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component to provide input with a drag handle.',
+ },
+ },
+ },
+ argTypes: {
+ options: { control: 'object' },
+ width: { control: 'text' },
+ min: { control: 'text' },
+ max: { control: 'text' },
+ step: { control: 'text' },
+ size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+ orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+ isSmooth: { control: 'boolean' },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ backgroundColor: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+ args: {},
+};
+
+export const Full: Story = {
+ args: {
+ min: '0',
+ max: '20',
+ step: '2',
+ size: 'large',
+ backgroundColor: 'black',
+ theme: 'blue',
+ isSmooth: true,
+
+ options: [
+ {
+ label: 0,
+ value: 0,
+ color: 'red',
+ },
+ {
+ label: 2,
+ value: 2,
+ color: 'orange',
+ },
+ {
+ label: 4,
+ value: 4,
+ color: 'yellow',
+ },
+ {
+ label: 6,
+ value: 6,
+ color: 'green',
+ },
+ {
+ label: 8,
+ value: 8,
+ color: 'sky',
+ },
+ {
+ label: 10,
+ value: 10,
+ color: 'purple',
+ },
+ {
+ label: 12,
+ value: 12,
+ color: 'purple',
+ },
+ {
+ label: 14,
+ value: 14,
+ color: 'purple',
+ },
+ {
+ label: 16,
+ value: 16,
+ color: 'purple',
+ },
+ {
+ label: 18,
+ value: 18,
+ color: 'purple',
+ },
+ {
+ label: 20,
+ value: 20,
+ color: 'purple',
+ },
+ ],
+
+ width: '300',
+ },
+};
+
+export const Smooth: Story = {
+ args: {
+ max: '1000',
+ isSmooth: true,
+ width: '300',
+ size: 'medium',
+ backgroundColor: 'blue',
+ theme: 'black',
+ },
+};
diff --git a/src/stories/components/Slider/Slider.vue b/src/stories/components/Slider/Slider.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47b6fcb0f58697288f2c9fe7b1c9735831101f41
--- /dev/null
+++ b/src/stories/components/Slider/Slider.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { convert500ThemeToColor } from '@helpers/colors';
+import type { ISliderProps } from '@interfaces/componentsProps';
+
+const props = withDefaults(defineProps<ISliderProps>(), {
+ width: '100',
+ size: 'medium',
+ theme: 'sky',
+ backgroundColor: 'black',
+});
+const value = defineModel('value');
+const optionValue = ref(
+ typeof value.value === 'string'
+ ? props.options!.findIndex((option) => option.label === value.value)
+ : value.value,
+);
+watch([optionValue], () => {
+ if (props.options) {
+ value.value = props.options!.find(
+ (option) => (option.value ?? option.label) == optionValue.value,
+ )!.label;
+ } else value.value = optionValue.value;
+});
+watch([value], () => {
+ if (value.value !== optionValue.value) {
+ optionValue.value =
+ typeof value.value === 'string'
+ ? props.options!.findIndex((option) => option.label === value.value)
+ : value.value;
+ }
+});
+const sliderButtonSize = computed(() => {
+ switch (props.size) {
+ case 'small':
+ return '10px';
+ case 'large':
+ return '30px';
+ case 'huge':
+ return '40px';
+ }
+ return '20px';
+});
+const optionsFontSize = computed(() => {
+ if (!props.options?.length) return;
+ switch (props.size) {
+ case 'small':
+ return '10px';
+ case 'large':
+ return '14px';
+ case 'huge':
+ return '16px';
+ }
+ return '12px';
+});
+const widthHalf = computed(() => `${Math.floor(+props.width / 2)}px`);
+const sliderHeight = computed(() => `${Math.floor(+sliderButtonSize.value.slice(0, -2) / 2.5)}px`);
+const sliderBorderRadius = computed(() => (props.isSmooth ? sliderHeight.value : '0%'));
+const sliderButtonBorderRadius = computed(() => (props.isSmooth ? '50%' : '0%'));
+const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const themeBackground = computed(() => convert500ThemeToColor(props.backgroundColor));
+const marksListPadding = computed(
+ () => `${Math.floor(+sliderButtonSize.value.slice(0, -2) / 2)}px`,
+);
+</script>
+
+<template>
+ <div
+ :class="[
+ 'sliderContainer',
+ {
+ verticalSlider: orientation === 'vertical',
+ },
+ ]"
+ :style="`width: ${width}px`"
+ >
+ <input
+ v-model="optionValue"
+ type="range"
+ class="slider"
+ :min="min ?? 0"
+ :max="max ?? 100"
+ :step="step ?? 1"
+ />
+ <div v-if="options?.length">
+ <ul class="marksList" :style="`width: ${width ?? 200}px`">
+ <li
+ v-for="option of options"
+ :key="option.label"
+ class="mark"
+ :style="`color: ${convert500ThemeToColor(option?.color) ?? 'white'}; font-size: ${optionsFontSize}`"
+ >
+ {{ option.label }}
+ </li>
+ </ul>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.sliderContainer {
+ width: v-bind(width);
+}
+.slider {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: v-bind(sliderHeight);
+ background: v-bind(themeBackground);
+ outline: none;
+ border-radius: v-bind(sliderBorderRadius);
+ filter: brightness(100%);
+ -webkit-transition: 0.2s;
+ transition: filter 0.2s;
+ cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: v-bind(sliderButtonSize);
+ height: v-bind(sliderButtonSize);
+ border-radius: v-bind(sliderButtonBorderRadius);
+ background: v-bind(themeColor);
+ -webkit-transition: 0.2s;
+ transition: filter 0.2s;
+}
+
+.slider::-webkit-slider-thumb:hover {
+ filter: brightness(90%);
+}
+
+.slider::-moz-range-thumb {
+ width: v-bind(sliderButtonSize);
+ height: v-bind(sliderButtonSize);
+ background: v-bind(themeColor);
+ cursor: pointer;
+}
+.verticalSlider {
+ margin-top: v-bind(widthHalf);
+ transform: rotate(270deg);
+}
+datalist {
+ display: flex;
+ justify-content: space-between;
+ width: v-bind(width);
+}
+.values {
+ padding: 0 -15px;
+}
+option {
+ padding: 0;
+}
+.marksList {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 5px;
+ font-size: 10px;
+ padding: 0 v-bind(marksListPadding);
+}
+.mark {
+ display: flex;
+ justify-content: center;
+ line-height: 40px;
+ background-color: black;
+ width: 1px;
+ height: 10px;
+}
+</style>
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c003e865f3bf2d5596f363b3e9cc938ca8fe645c
--- /dev/null
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import ToggleSwitch from './ToggleSwitch.vue';
+
+const meta: Meta = {
+ title: 'Components/ToggleSwitch',
+ component: ToggleSwitch,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component that is used to select a boolean value.',
+ },
+ },
+ },
+ argTypes: {
+ active: { control: 'boolean' },
+ size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+ negativeTheme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ darkNegative: { control: 'boolean' },
+ disabled: { control: 'boolean' },
+ },
+ args: {},
+} satisfies Meta<typeof ToggleSwitch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+ args: {
+ darkNegative: true,
+ active: false,
+ },
+};
+
+export const SmallLight: Story = {
+ args: {
+ darkNegative: false,
+ negativeTheme: 'yellow',
+ theme: 'red',
+ size: 'small',
+ },
+};
+
+export const Large: Story = {
+ args: {
+ darkNegative: true,
+ negativeTheme: 'purple',
+ theme: 'green',
+ size: 'large',
+ },
+};
+
+export const Huge: Story = {
+ args: {
+ darkNegative: true,
+ negativeTheme: 'blue',
+ theme: 'orange',
+ size: 'huge',
+ },
+};
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..503feb5e515694159db475cda77619426bfc28df
--- /dev/null
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { convert500ThemeToColor, convert800ThemeToColor } from '@helpers/colors';
+import type { ITSProps } from '@interfaces/componentsProps';
+
+const props = withDefaults(defineProps<ITSProps>(), {
+ size: 'medium',
+ theme: 'sky',
+ negativeTheme: 'black',
+ darkNegative: true,
+});
+const active = defineModel<boolean>('active');
+
+const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const inactiveColor = computed(() =>
+ props.darkNegative
+ ? convert800ThemeToColor(props.negativeTheme)
+ : convert500ThemeToColor(props.negativeTheme),
+);
+const sizes = computed(() => {
+ if (!props?.size) {
+ return {
+ containerWidth: 37,
+ containerHeight: 21,
+ padding: 3,
+ borderRadius: 11,
+ circleSize: 15,
+ transformXCircle: 16,
+ };
+ }
+ switch (props.size) {
+ case 'small':
+ return {
+ containerWidth: 28,
+ containerHeight: 16,
+ padding: 3,
+ borderRadius: 8,
+ circleSize: 10,
+ transformXCircle: 12,
+ };
+ case 'large':
+ return {
+ containerWidth: 45,
+ containerHeight: 27,
+ padding: 4,
+ borderRadius: 14,
+ circleSize: 19,
+ transformXCircle: 18,
+ };
+ case 'huge':
+ return {
+ containerWidth: 70,
+ containerHeight: 42,
+ padding: 6,
+ borderRadius: 21,
+ circleSize: 30,
+ transformXCircle: 28,
+ };
+ }
+ return {
+ containerWidth: 37,
+ containerHeight: 21,
+ padding: 3,
+ borderRadius: 11,
+ circleSize: 15,
+ transformXCircle: 16,
+ };
+});
+</script>
+
+<template>
+ <button
+ :style="`width: ${sizes.containerWidth}px; min-height: ${sizes.containerHeight}px; border-radius: ${sizes.borderRadius}px; padding: ${sizes.padding}px; cursor: ${disabled ? 'auto' : 'pointer'}`"
+ class="switcher"
+ @click.prevent="!disabled && (active = !active)"
+ >
+ <span
+ :style="`background-color: ${disabled ? '#e1e7f1 !important' : themeColor}; border-radius: ${sizes.borderRadius}px;`"
+ :class="[
+ 'background',
+ {
+ inactiveBackground: !active && !disabled,
+ },
+ ]"
+ ></span>
+ <span
+ :style="`width: ${sizes.circleSize}px; height: ${sizes.circleSize}px; transform: translateX(${active ? sizes.transformXCircle : 0}px); background-color: ${disabled ? '#62708c' : 'white'}`"
+ class="switcherCircle"
+ ></span>
+ </button>
+</template>
+
+<style scoped>
+.switcher {
+ position: relative;
+}
+.background {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transition: all 0.2s ease-in-out;
+}
+.inactiveBackground {
+ background-color: v-bind(inactiveColor) !important;
+ transition: all 0.2s ease-in-out;
+}
+.switcher:hover .background {
+ filter: brightness(90%);
+}
+.switcherCircle {
+ display: block;
+ border-radius: 50%;
+ transition: transform 0.2s ease-in-out;
+}
+</style>
diff --git a/src/stories/components/TreeList/TreeItems.vue b/src/stories/components/TreeList/TreeItems.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2dd704c4cfb2560631e267385cfc108865434864
--- /dev/null
+++ b/src/stories/components/TreeList/TreeItems.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { iconsSet } from '@/common/constants/icons';
+import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
+import { convert500ThemeToColor } from '@helpers/colors';
+import type { ITIProps } from '@interfaces/componentsProps';
+
+defineProps<ITIProps>();
+const emit = defineEmits(['toggleIsOpen', 'onClick']);
+</script>
+
+<template>
+ <ul>
+ <li
+ v-for="item of items"
+ :key="item.label"
+ :class="[
+ 'item',
+ {
+ pl27: !item.children,
+ openContent: state.find(
+ (itemState) => itemState.label === item.label && itemState.isOpen,
+ ),
+ },
+ ]"
+ >
+ <article>
+ <section
+ :class="[
+ 'textContainer',
+ {
+ pointer: item.children,
+ },
+ ]"
+ @click="emit('toggleIsOpen', item)"
+ >
+ <TriangleIcon
+ v-if="item.children"
+ :class="[
+ 'openButton',
+ {
+ openButtonOpened: state.find(
+ (itemState) => itemState.label === item.label && itemState.isOpen,
+ ),
+ },
+ ]"
+ :color="
+ item.color && item.isTriangleToColor ? convert500ThemeToColor(item.color) : textColor
+ "
+ size="17"
+ />
+ <a
+ :href="item.link"
+ :target="item.linkBlank ? '_blank' : '_self'"
+ :class="[
+ 'label',
+ {
+ bold: item.textStyle === 'bold',
+ italic: item.textStyle === 'italic',
+ isDarkerOnHover: item.link,
+ },
+ ]"
+ :style="`color: ${item.color ? convert500ThemeToColor(item.color) : textColor}`"
+ @click="
+ () => {
+ item.isLinkClicked = true;
+ if (!item.link) {
+ emit('toggleIsOpen', item);
+ }
+ emit('onClick', item.link);
+ }
+ "
+ ><component
+ :is="iconsSet[item.iconBefore]"
+ v-if="item.iconBefore"
+ :color="convert500ThemeToColor(item.iconColor)"
+ style="min-width: 17px"
+ size="17" />
+ <span>{{ item.label }}</span
+ ><component
+ :is="iconsSet[item.iconAfter]"
+ v-if="item.iconAfter"
+ :color="convert500ThemeToColor(item.iconColor)"
+ style="min-width: 17px"
+ size="17"
+ /></a>
+ </section>
+ <section class="children">
+ <TreeItems
+ :items="item.children ?? []"
+ :state="state"
+ :textColor="textColor"
+ :themeColor="themeColor"
+ @toggleIsOpen="emit('toggleIsOpen', $event)"
+ />
+ </section>
+ </article>
+ </li>
+ </ul>
+</template>
+
+<style scoped>
+.item {
+ width: 100%;
+ transition: all 0.4s ease;
+ background-color: v-bind(themeColor);
+}
+.label {
+ display: flex;
+ gap: 5px;
+ position: relative;
+ padding: 4px 5px;
+ background-color: v-bind(themeColor);
+ word-break: break-word;
+}
+.openButton {
+ margin-right: 10px;
+ min-width: 17px;
+ transition: transform 0.3s ease;
+}
+.openButtonOpened {
+ transform: rotate(180deg);
+}
+.children {
+ width: 100%;
+ padding-left: 15px;
+ display: grid;
+ grid-template-rows: 0fr;
+ transition:
+ all 0.3s ease-in,
+ grid-template-rows 0.3s ease-out;
+}
+.children > ul {
+ overflow: hidden;
+}
+.openContent > article > .children {
+ grid-template-rows: 1fr;
+ opacity: 1;
+}
+.textContainer {
+ position: relative;
+ display: flex;
+}
+.pointer {
+ cursor: pointer;
+}
+.pl27 {
+ padding-left: 27px;
+}
+.isDarkerOnHover:hover {
+ filter: brightness(80%);
+}
+</style>
diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/stories/components/TreeList/TreeList.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9be416a753c45db4cd877b3094f1b0cce4ea8165
--- /dev/null
+++ b/src/stories/components/TreeList/TreeList.stories.ts
@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import TreeList from './TreeList.vue';
+
+const meta: Meta = {
+ title: 'Components/TreeList',
+ component: TreeList,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A component that is used to display hierarchical data. Can contain links to a new page or the same.',
+ },
+ },
+ },
+ argTypes: {
+ items: { control: 'object' },
+ maxWidth: { control: 'number' },
+ expand: { control: 'boolean' },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof TreeList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+ args: {
+ items: [
+ {
+ label: 'First',
+ children: [
+ {
+ label: '1-1',
+ children: [
+ {
+ label: '1-1-1',
+ children: [
+ {
+ label: '1-1-1-1',
+ children: [
+ {
+ label: '1-1-1-1-1',
+ children: [
+ { label: '1-1-1-1-1-1' },
+ { label: '1-1-1-1-1-2' },
+ { label: '1-1-1-1-1-3' },
+ { label: '1-1-1-1-1-4' },
+ ],
+ },
+ ],
+ },
+ { label: '1-1-1-2' },
+ { label: '1-1-1-3' },
+ ],
+ },
+ {
+ label: '1-1-2',
+ },
+ ],
+ },
+ {
+ label: '1-2',
+ },
+ ],
+ },
+ {
+ label: 'Second',
+ children: [
+ {
+ label: '2-1',
+ },
+ ],
+ },
+ ],
+ },
+};
+
+export const Full: Story = {
+ args: {
+ items: [
+ {
+ label: 'Font-family (mdn web docs)',
+ color: 'green',
+ iconBefore: 'EncyclopediaIcon',
+ iconColor: 'green',
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ linkBlank: true,
+ textStyle: 'bold',
+ children: [
+ {
+ label: 'Font-family (mdn web docs) but same page (error?)',
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ color: 'sky',
+ iconBefore: 'EyeIcon',
+ iconColor: 'white',
+ textStyle: 'italic',
+ isTriangleToColor: true,
+ children: [
+ {
+ label: '1-1-1',
+ color: 'red',
+ iconAfter: 'DiceIcon',
+ iconColor: 'red',
+ children: [
+ {
+ label: '1-1-1-1',
+ children: [
+ { label: '1-1-1-1-1' },
+ { label: '1-1-1-1-2' },
+ { label: '1-1-1-1-3' },
+ { label: '1-1-1-1-4' },
+ ],
+ },
+ { label: '1-1-1-2' },
+ { label: '1-1-1-3' },
+ ],
+ },
+ {
+ label: '1-1-2',
+ },
+ ],
+ },
+ {
+ label: '1-2',
+ },
+ ],
+ },
+ {
+ label: 'Second',
+ children: [
+ {
+ label: '2-1',
+ },
+ ],
+ },
+ ],
+
+ expand: true,
+ theme: 'black',
+ },
+};
diff --git a/src/stories/components/TreeList/TreeList.vue b/src/stories/components/TreeList/TreeList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..061fe645ac17c74418f517f072fb0937093991bc
--- /dev/null
+++ b/src/stories/components/TreeList/TreeList.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { ITreeItem } from '@interfaces/componentsProp';
+import { convert500ThemeToColor } from '@helpers/colors';
+import TreeItems from '@stories/components/TreeList/TreeItems.vue';
+import type { ITLProps } from '@interfaces/componentsProps';
+
+interface IStateItem {
+ isOpen: boolean;
+ label: string;
+}
+
+const props = withDefaults(defineProps<ITLProps>(), {
+ theme: 'white',
+ maxWidth: 300,
+});
+const emit = defineEmits(['onClick']);
+const items = computed(() => props.items);
+const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const textColor = computed(() => {
+ if (!props.theme) return 'black';
+ if (props.theme === 'white') return 'black';
+ return 'white';
+});
+
+const state = ref<IStateItem[]>([]);
+const setItemChildrenToState = (items: ITreeItem[]) => {
+ for (const item of items) {
+ state.value.push({
+ isOpen: props?.expand,
+ label: item.label,
+ });
+ if (item.children) {
+ setItemChildrenToState(item.children);
+ }
+ }
+};
+const setInitialState = () => {
+ if (!props?.items) return;
+ setItemChildrenToState(props.items);
+};
+watch(
+ [items],
+ () => {
+ if (items.value) setInitialState();
+ },
+ {
+ immediate: true,
+ },
+);
+const toggleIsOpen = (item: ITreeItem) => {
+ if (item.isLinkClicked) {
+ item.isLinkClicked = false;
+ return;
+ }
+ state.value.map((itemState) => {
+ if (itemState.label === item.label) itemState.isOpen = !itemState.isOpen;
+ });
+};
+</script>
+
+<template>
+ <div
+ :style="`background-color: ${themeColor ?? 'white'}; max-width: ${maxWidth}px; padding: 15px 25px 15px 15px`"
+ class="tree"
+ >
+ <TreeItems
+ :items="items"
+ :state="state"
+ :textColor="textColor"
+ :themeColor="themeColor"
+ @toggleIsOpen="toggleIsOpen"
+ @onClick="emit('onClick')"
+ />
+ </div>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/header.css b/src/stories/header.css
deleted file mode 100644
index 5efd46c26a03cca7ba29f1b9bfab680eb1e08238..0000000000000000000000000000000000000000
--- a/src/stories/header.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.storybook-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- padding: 15px 20px;
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-header svg {
- display: inline-block;
- vertical-align: top;
-}
-
-.storybook-header h1 {
- display: inline-block;
- vertical-align: top;
- margin: 6px 0 6px 10px;
- font-weight: 700;
- font-size: 20px;
- line-height: 1;
-}
-
-.storybook-header button + button {
- margin-left: 10px;
-}
-
-.storybook-header .welcome {
- margin-right: 10px;
- color: #333;
- font-size: 14px;
-}
diff --git a/src/stories/icons/Mono/Age18Icon.vue b/src/stories/icons/Mono/Age18Icon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be3b17c7c597cda69bd925d3c009616cd42ba012
--- /dev/null
+++ b/src/stories/icons/Mono/Age18Icon.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M20 1C20 0.447715 20.4477 0 21 0C21.5523 0 22 0.447715 22 1V2H23C23.5523 2 24 2.44772 24 3C24 3.55228 23.5523 4 23 4H22V5C22 5.55228 21.5523 6 21 6C20.4477 6 20 5.55228 20 5V4H19C18.4477 4 18 3.55228 18 3C18 2.44772 18.4477 2 19 2H20V1Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M21.1936 8.07463C21.7016 7.85776 22.297 8.09138 22.4668 8.6169C23.145 10.7148 23.1792 12.9766 22.5523 15.1064C21.8308 17.5572 20.2788 19.6804 18.1626 21.1117C16.0464 22.5429 13.498 23.193 10.9548 22.9502C8.41165 22.7075 6.03225 21.5871 4.22503 19.7814C2.4178 17.9757 1.29545 15.5972 1.05062 13.0542C0.805783 10.5112 1.45373 7.96227 2.88325 5.84491C4.31277 3.72755 6.43471 2.17379 8.88488 1.4503C11.0142 0.821568 13.2759 0.853957 15.3744 1.53036C15.9001 1.69979 16.1342 2.29501 15.9178 2.80311C15.7013 3.31122 15.1136 3.54496 14.5846 3.38623C12.9184 2.88626 11.1353 2.8783 9.4532 3.37498C7.45003 3.96647 5.71522 5.23677 4.5465 6.96784C3.37778 8.69891 2.84804 10.7828 3.04821 12.8619C3.24838 14.9409 4.16596 16.8855 5.64348 18.3618C7.121 19.8381 9.06631 20.754 11.1455 20.9525C13.2247 21.1509 15.3082 20.6195 17.0383 19.4493C18.7684 18.2792 20.0373 16.5433 20.6271 14.5397C21.1224 12.8572 21.113 11.074 20.6116 9.40826C20.4525 8.87941 20.6857 8.29149 21.1936 8.07463Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M7.71054 9.14472L7.29441 9.35279C6.69971 9.65014 5.99999 9.21769 5.99999 8.55279C5.99999 8.214 6.1914 7.9043 6.49441 7.75279L7.78884 7.10557C7.9277 7.03615 8.08081 7 8.23605 7H8.99999C9.55227 7 9.99999 7.44772 9.99999 8V16C9.99999 16.5523 9.55227 17 8.99999 17C8.4477 17 7.99999 16.5523 7.99999 16V9.32361C7.99999 9.17493 7.84352 9.07823 7.71054 9.14472Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M18 9C18 7.89543 17.1046 7 16 7H14C12.8954 7 12 7.89543 12 9V10.5C12 11.3284 12.6716 12 13.5 12C12.6716 12 12 12.6716 12 13.5V15C12 16.1046 12.8954 17 14 17H16C17.1046 17 18 16.1046 18 15V13.5C18 12.6716 17.3284 12 16.5 12C17.3284 12 18 11.3284 18 10.5V9ZM16 10C16 9.44771 15.5523 9 15 9C14.4477 9 14 9.44771 14 10C14 10.5523 14.4477 11 15 11C15.5523 11 16 10.5523 16 10ZM16 14C16 14.5523 15.5523 15 15 15C14.4477 15 14 14.5523 14 14C14 13.4477 14.4477 13 15 13C15.5523 13 16 13.4477 16 14Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AirplaneIcon.vue b/src/stories/icons/Mono/AirplaneIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..885289a1e007d6b8bf26382553e4ea3c7363cb10
--- /dev/null
+++ b/src/stories/icons/Mono/AirplaneIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M18.8286 1.72758C19.618 1.37176 21.0449 0.981099 22.1457 2.08172C23.2466 3.18244 22.8558 4.60949 22.5 5.39885C22.2409 5.97353 21.8851 6.58498 21.4343 7.03586L18.3035 10.1667L20.75 19.9527C21.0686 21.2273 19.4017 22.0136 18.6208 20.957L13.9001 14.5701L11.0678 17.4024L10.4818 21.504C10.326 22.5944 8.90642 22.9164 8.29541 21.9999L5.86325 18.3517L1.89476 15.6042C0.960857 14.9577 1.36456 13.4958 2.49799 13.4203L6.85509 13.1298L9.65741 10.3275L3.27054 5.60674C2.21395 4.82579 3.00021 3.1589 4.27485 3.47756L14.0608 5.92406L17.1916 2.7933C17.6424 2.34244 18.254 1.98663 18.8286 1.72758ZM18.5828 4.23053L15.1548 7.65856C14.8567 7.95662 14.4241 8.07643 14.0152 7.9742L7.70352 6.39628L11.5932 9.27129C12.1832 9.70735 12.2473 10.5661 11.7285 11.0848L8.05676 14.7566C7.85123 14.9621 7.57808 15.086 7.28807 15.1054L4.91621 15.2635L7.31557 16.9246L8.79804 19.1483L9.12556 16.8556C9.16228 16.5986 9.28139 16.3604 9.46498 16.1768L13.1427 12.499C13.6615 11.9803 14.5202 12.0443 14.9562 12.6343L17.8312 16.524L16.2533 10.2123C16.1511 9.80342 16.2709 9.37083 16.569 9.07277L19.997 5.64474C20.0811 5.54456 20.4407 5.10051 20.6767 4.57691C20.9648 3.93787 20.8835 3.64788 20.7316 3.49604C20.5796 3.34411 20.2895 3.26286 19.6505 3.5509C19.127 3.78691 18.683 4.14648 18.5828 4.23053Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AlarmIcon.vue b/src/stories/icons/Mono/AlarmIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b395d215ef251dfa8059a0f470510af8d014f5ac
--- /dev/null
+++ b/src/stories/icons/Mono/AlarmIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12.9999 11.8811V5.99997C12.9999 5.44768 12.5522 4.99997 11.9999 4.99997C11.4476 4.99997 10.9999 5.44768 10.9999 5.99997V12.4666C10.9999 12.8159 11.2182 13.1618 11.5173 13.3345L16.1371 16.0017C16.6154 16.2779 17.227 16.114 17.5031 15.6357C17.7792 15.1574 17.6154 14.5458 17.1371 14.2697L12.9999 11.8811Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11.9999 0.00012207C11.4477 0.00012207 10.9999 0.447835 10.9999 1.00012V1.04484C9.74801 1.15765 8.55656 1.48023 7.46101 1.97715C7.18844 1.67245 6.75176 1.24982 6.16157 0.932023C5.62139 0.641155 4.92587 0.427815 4.12846 0.531815C3.3261 0.636461 2.53871 1.04702 1.79289 1.79283C1.04706 2.53865 0.636487 3.32603 0.531831 4.12839C0.427821 4.9258 0.641157 5.62133 0.932021 6.1615C1.24982 6.75171 1.67247 7.1884 1.97717 7.46097C1.34951 8.84475 0.999995 10.3815 0.999995 11.9999C0.999995 14.6729 1.95339 17.1232 3.53867 19.0293L2.29875 20.2692C1.90823 20.6597 1.90892 21.2936 2.29944 21.6841C2.68996 22.0746 3.32381 22.0753 3.71433 21.6848L4.95277 20.4464C6.86141 22.0405 9.31864 22.9999 11.9999 22.9999C14.6812 22.9999 17.1385 22.0405 19.0471 20.4464L20.2855 21.6848C20.6761 22.0753 21.3099 22.0746 21.7004 21.6841C22.0909 21.2936 22.0916 20.6597 21.7011 20.2692L20.4612 19.0293C22.0465 17.1232 22.9999 14.6729 22.9999 11.9999C22.9999 10.3815 22.6504 8.84475 22.0227 7.46097C22.3274 7.18839 22.75 6.75171 23.0678 6.1615C23.3587 5.62132 23.572 4.92579 23.468 4.12839C23.3634 3.32602 22.9528 2.53864 22.207 1.79283C21.4612 1.04702 20.6738 0.636458 19.8714 0.531811C19.074 0.427811 18.3785 0.641152 17.8383 0.932019C17.2481 1.24982 16.8114 1.67245 16.5389 1.97715C15.4433 1.48023 14.2519 1.15766 12.9999 1.04484V1.00012C12.9999 0.447835 12.5522 0.00012207 11.9999 0.00012207ZM18.337 3.00768C19.3663 3.73444 20.2654 4.63349 20.9922 5.66286C21.108 5.5287 21.2187 5.37704 21.3069 5.21331C21.4535 4.94099 21.5215 4.66777 21.4848 4.38706C21.4489 4.11131 21.297 3.71121 20.7928 3.20705C20.2886 2.70289 19.8885 2.55097 19.6128 2.515C19.332 2.47839 19.0588 2.54631 18.7865 2.69295C18.6228 2.78111 18.4711 2.89187 18.337 3.00768ZM3.0077 5.66287C3.73446 4.63349 4.63351 3.73444 5.66289 3.00768C5.52874 2.89187 5.37709 2.78111 5.21337 2.69295C4.94105 2.54631 4.66783 2.4784 4.38711 2.51501C4.11136 2.55097 3.71125 2.70289 3.20708 3.20705C2.70291 3.71121 2.55099 4.11131 2.51502 4.38707C2.47841 4.66777 2.54632 4.94099 2.69295 5.21331C2.78112 5.37704 2.89189 5.52871 3.0077 5.66287ZM11.9999 20.9931C7.03317 20.9931 3.00681 16.9667 3.00681 11.9999C3.00681 7.03317 7.03317 3.00681 11.9999 3.00681C16.9667 3.00681 20.9931 7.03317 20.9931 11.9999C20.9931 16.9667 16.9667 20.9931 11.9999 20.9931Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AlignCenterIcon.vue b/src/stories/icons/Mono/AlignCenterIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a79b39b7d03c3ec1e0db97b89bbc316afbe92534
--- /dev/null
+++ b/src/stories/icons/Mono/AlignCenterIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="size ?? '40'"
+ :height="size ?? '40'"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M3 6H21M3 14H21M17 10H7M17 18H7"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AlignLeftIcon.vue b/src/stories/icons/Mono/AlignLeftIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..878160ac6d8d5df258d526e1b82c92370a923456
--- /dev/null
+++ b/src/stories/icons/Mono/AlignLeftIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="size ?? '40px'"
+ :height="size ?? '40px'"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M3 10H16M3 14H21M3 18H16M3 6H21"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AlignRightIcon.vue b/src/stories/icons/Mono/AlignRightIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e2440af6ca77a6b6fa775370fcde2376a398803
--- /dev/null
+++ b/src/stories/icons/Mono/AlignRightIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="size ?? '40px'"
+ :height="size ?? '40px'"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M8 10H21M3 14H21M8 18H21M3 6H21"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AnchorIcon.vue b/src/stories/icons/Mono/AnchorIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d13c80cc8e80eaead8350b963904f64b04713982
--- /dev/null
+++ b/src/stories/icons/Mono/AnchorIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M13 6.82929C14.1652 6.41746 15 5.30622 15 4C15 2.34315 13.6568 1 12 1C10.3431 1 8.99999 2.34315 8.99999 4C8.99999 5.30622 9.8348 6.41746 11 6.82929V9H9.99999C9.44771 9 8.99999 9.44771 8.99999 10C8.99999 10.5523 9.44771 11 9.99999 11H11V20.9513C9.6854 20.8184 8.69059 20.4252 7.92969 19.9179C6.98043 19.2851 6.33511 18.4342 5.89442 17.5528C5.45178 16.6675 5.22547 15.7701 5.11139 15.0856C5.10656 15.0566 5.10194 15.0281 5.09752 15H5.99999C6.55228 15 6.99999 14.5523 6.99999 14C6.99999 13.4477 6.55228 13 5.99999 13H3.99999C3.37285 13 2.98297 13.5373 3.0025 14.1232C3.00953 14.3341 3.03602 14.7989 3.1386 15.4144C3.27451 16.2299 3.54821 17.3325 4.10557 18.4472C4.66488 19.5658 5.51956 20.7149 6.82029 21.5821C8.12729 22.4534 9.82501 23 12 23C14.175 23 15.8727 22.4534 17.1797 21.5821C18.4804 20.7149 19.3351 19.5658 19.8944 18.4472C20.4518 17.3325 20.7255 16.2299 20.8614 15.4144C20.964 14.7989 20.9905 14.3341 20.9975 14.1232C21.017 13.5373 20.6272 13 20 13H18C17.4477 13 17 13.4477 17 14C17 14.5523 17.4477 15 18 15H18.9025C18.898 15.0281 18.8934 15.0566 18.8886 15.0856C18.7745 15.7701 18.5482 16.6675 18.1056 17.5528C17.6649 18.4342 17.0196 19.2851 16.0703 19.9179C15.3094 20.4252 14.3146 20.8184 13 20.9513V11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H13V6.82929ZM12 5.04921C11.4205 5.04921 10.9508 4.57946 10.9508 4C10.9508 3.42054 11.4205 2.95079 12 2.95079C12.5795 2.95079 13.0492 3.42054 13.0492 4C13.0492 4.57946 12.5795 5.04921 12 5.04921Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AnchorLinkIcon.vue b/src/stories/icons/Mono/AnchorLinkIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a7ef42ccc8dca5548a8569a20174d9c643d9f88
--- /dev/null
+++ b/src/stories/icons/Mono/AnchorLinkIcon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M13.2218 3.32234C15.3697 1.17445 18.8521 1.17445 21 3.32234C23.1479 5.47022 23.1479 8.95263 21 11.1005L17.4645 14.636C15.3166 16.7839 11.8342 16.7839 9.6863 14.636C9.48752 14.4373 9.30713 14.2271 9.14514 14.0075C8.90318 13.6796 8.97098 13.2301 9.25914 12.9419C9.73221 12.4688 10.5662 12.6561 11.0245 13.1435C11.0494 13.1699 11.0747 13.196 11.1005 13.2218C12.4673 14.5887 14.6834 14.5887 16.0503 13.2218L19.5858 9.6863C20.9526 8.31947 20.9526 6.10339 19.5858 4.73655C18.219 3.36972 16.0029 3.36972 14.636 4.73655L13.5754 5.79721C13.1849 6.18774 12.5517 6.18774 12.1612 5.79721C11.7706 5.40669 11.7706 4.77352 12.1612 4.383L13.2218 3.32234Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M6.85787 9.6863C8.90184 7.64233 12.2261 7.60094 14.3494 9.42268C14.7319 9.75083 14.7008 10.3287 14.3444 10.685C13.9253 11.1041 13.2317 11.0404 12.7416 10.707C11.398 9.79292 9.48593 9.88667 8.27209 11.1005L4.73655 14.636C3.36972 16.0029 3.36972 18.219 4.73655 19.5858C6.10339 20.9526 8.31947 20.9526 9.6863 19.5858L10.747 18.5251C11.1375 18.1346 11.7706 18.1346 12.1612 18.5251C12.5517 18.9157 12.5517 19.5488 12.1612 19.9394L11.1005 21C8.95263 23.1479 5.47022 23.1479 3.32234 21C1.17445 18.8521 1.17445 15.3697 3.32234 13.2218L6.85787 9.6863Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArchiveIcon.vue b/src/stories/icons/Mono/ArchiveIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6a8e7b7ded47a385786f24d5193862f5a63a125
--- /dev/null
+++ b/src/stories/icons/Mono/ArchiveIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12H16C16.5523 12 17 11.5523 17 11C17 10.4477 16.5523 10 16 10H8Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V5C1 6.30622 1.83481 7.41746 3 7.82929V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V7.82929C22.1652 7.41746 23 6.30622 23 5V4ZM20 6H4C3.44772 6 3 5.55228 3 5V4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V5C21 5.55228 20.5523 6 20 6ZM5 20V8H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArrowForwardIcon.vue b/src/stories/icons/Mono/ArrowForwardIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ae4ade43331aa362cae436e82c896dbbb9b9121
--- /dev/null
+++ b/src/stories/icons/Mono/ArrowForwardIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M17.6 3.80353C16.4468 2.26658 14 3.08182 14 5.00302V8.00929C9.32281 7.86093 6.22286 9.50672 4.22042 11.7657C2.13865 14.1142 1.33668 17.0185 1.02193 18.9028C0.884035 19.7283 1.41941 20.3237 1.98513 20.5275C2.52889 20.7234 3.25333 20.6283 3.72507 20.0531C5.30555 18.1261 8.5 15.4884 14 15.4884V18.997C14 20.9182 16.4468 21.7334 17.6 20.1965L22.4 13.7992C23.2 12.733 23.2 11.267 22.4 10.2008L17.6 3.80353ZM16 5.00302L20.8 11.4003C21.0667 11.7557 21.0667 12.2443 20.8 12.5997L16 18.997V14.5C16 13.9477 15.5523 13.5 15 13.5H14C7 13.5 3.39908 17.4621 3.39908 17.4621C3.81724 16.0361 4.52506 14.4371 5.71707 13.0924C7.28166 11.3273 9.5 10 14 10H15C15.5523 10 16 9.55228 16 9V5.00302Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArrowLeftIcon.vue b/src/stories/icons/Mono/ArrowLeftIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b6ff8be4806b1ee229e4834ce34f23ca65ed8d2
--- /dev/null
+++ b/src/stories/icons/Mono/ArrowLeftIcon.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ id="left-arrow"
+ :fill="color ?? '#000000'"
+ :width="size ?? '40px'"
+ :height="size ?? '40px'"
+ viewBox="0 0 24 24"
+ data-name="Flat Line"
+ xmlns="http://www.w3.org/2000/svg"
+ class="icon flat-line"
+ >
+ <line
+ id="primary"
+ x1="21"
+ y1="12"
+ x2="3"
+ y2="12"
+ :stroke="color ?? '#000000'"
+ style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2"
+ ></line>
+ <polyline
+ id="primary-2"
+ data-name="primary"
+ points="6 9 3 12 6 15"
+ :stroke="color ?? '#000000'"
+ style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2"
+ ></polyline>
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArrowRightIcon.vue b/src/stories/icons/Mono/ArrowRightIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aa302e5a4d2b59175efc7fd8cc824e8575b869c0
--- /dev/null
+++ b/src/stories/icons/Mono/ArrowRightIcon.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ id="right-arrow"
+ :fill="color ?? '#000000'"
+ :width="size ?? '40px'"
+ :height="size ?? '40px'"
+ viewBox="0 0 24 24"
+ data-name="Flat Line"
+ xmlns="http://www.w3.org/2000/svg"
+ class="icon flat-line"
+ >
+ <line
+ id="primary"
+ x1="3"
+ y1="12"
+ x2="21"
+ y2="12"
+ :stroke="color ?? '#000000'"
+ style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2"
+ ></line>
+ <polyline
+ id="primary-2"
+ data-name="primary"
+ points="18 15 21 12 18 9"
+ :stroke="color ?? '#000000'"
+ style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2"
+ ></polyline>
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArrowsVerticalIcon.vue b/src/stories/icons/Mono/ArrowsVerticalIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..05715194e0daf1321301752f987693dd8779e6df
--- /dev/null
+++ b/src/stories/icons/Mono/ArrowsVerticalIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ id="Capa_1"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 349.455 349.455"
+ xml:space="preserve"
+ >
+ <path
+ :style="`fill: ${color ?? '#231f20'}`"
+ d="M248.263,240.135c-1.407-1.407-3.314-2.197-5.304-2.197c-1.989,0-3.896,0.79-5.304,2.197
+ l-45.429,45.429l0.001-221.673l45.428,45.429c1.407,1.407,3.314,2.197,5.304,2.197c1.989,0,3.896-0.79,5.304-2.197l14.143-14.143
+ c1.406-1.406,2.196-3.314,2.196-5.303c0-1.989-0.79-3.897-2.196-5.303L180.032,2.197C178.625,0.79,176.717,0,174.728,0
+ c-1.989,0-3.896,0.79-5.304,2.197L87.049,84.573c-1.406,1.407-2.196,3.314-2.196,5.303c0,1.989,0.79,3.897,2.197,5.304
+ l14.143,14.142c1.464,1.464,3.384,2.196,5.303,2.196c1.919,0,3.839-0.732,5.304-2.197l45.429-45.43l-0.001,221.673l-45.428-45.429
+ c-1.407-1.407-3.314-2.197-5.304-2.197c-1.989,0-3.896,0.79-5.304,2.197l-14.143,14.143c-1.406,1.406-2.196,3.314-2.196,5.303
+ c0,1.989,0.79,3.897,2.196,5.303l82.374,82.374c1.465,1.464,3.385,2.197,5.304,2.197c1.919,0,3.839-0.733,5.304-2.197l82.375-82.375
+ c1.406-1.406,2.196-3.314,2.196-5.303c0-1.989-0.79-3.897-2.196-5.303L248.263,240.135z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AtIcon.vue b/src/stories/icons/Mono/AtIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..784ee469f943e52aa0b602b7816da0b651ce1af1
--- /dev/null
+++ b/src/stories/icons/Mono/AtIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M16.5485 20.9074C16.7993 21.3985 16.6058 22.0046 16.0939 22.2098C13.9858 23.0552 11.6589 23.2302 9.43437 22.6966C6.885 22.0852 4.63785 20.5833 3.09784 18.4616C1.55783 16.3399 0.82623 13.7379 1.03488 11.1246C1.24352 8.51121 2.37869 6.0583 4.23584 4.20784C6.09298 2.35738 8.54997 1.23105 11.1641 1.03182C13.7782 0.832594 16.3775 1.57356 18.4936 3.12121C20.6097 4.66885 22.1035 6.9214 22.7058 9.47296C22.9026 10.3069 23 11.1549 23 12L23 12.0022C22.9999 12.5715 22.9555 13.1396 22.8676 13.7012C22.5877 15.7731 21.7158 19 19 19C16.6669 19 15.889 17.6669 15.6297 16.778C14.6219 17.5448 13.3641 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 12 18 14 17.9985 16C18 17 18.5 17 18.5 17C19.427 17 20.0112 16.2367 20.3791 15.3067C20.3882 15.2749 20.3987 15.2434 20.4106 15.2122C20.4524 15.1026 20.4921 14.9924 20.5296 14.8815C20.9613 13.5182 21 12 21 12H21.0031C21.0031 11.3083 20.9234 10.6143 20.7623 9.93171C20.2694 7.84334 19.0467 5.99971 17.3148 4.73301C15.5828 3.46632 13.4554 2.85986 11.3158 3.02292C9.17626 3.18599 7.1653 4.10785 5.64529 5.62239C4.12529 7.13693 3.19619 9.14455 3.02542 11.2835C2.85465 13.4224 3.45343 15.5521 4.71388 17.2886C5.97433 19.0251 7.81354 20.2544 9.90012 20.7548C11.6616 21.1773 13.5015 21.057 15.1819 20.4221C15.6977 20.2273 16.2977 20.4164 16.5485 20.9074ZM7.99803 12C7.99803 14.2102 9.78977 16.002 12 16.002C14.2102 16.002 16.002 14.2102 16.002 12C16.002 9.78978 14.2102 7.99803 12 7.99803C9.78977 7.99803 7.99803 9.78978 7.99803 12Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AwardIcon.vue b/src/stories/icons/Mono/AwardIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..350d6969ef783c36ebff837f1d6c0d00cc859ea1
--- /dev/null
+++ b/src/stories/icons/Mono/AwardIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M18.6284 13.4807C19.4942 12.2024 20 10.6603 20 9C20 4.58172 16.4183 1 12 1C7.58172 1 4 4.58172 4 9C4 10.5545 4.44338 12.0055 5.21057 13.2333L2.05686 18.6957C1.88357 18.9958 1.87805 19.3643 2.04226 19.6695C2.20648 19.9747 2.51701 20.1731 2.86297 20.1939L5.85952 20.3738L7.51356 22.8789C7.70452 23.1681 8.03162 23.3379 8.37805 23.3275C8.72447 23.3171 9.04081 23.1281 9.2141 22.8279L12.0008 18.0013L14.634 22.5622C14.8073 22.8623 15.1236 23.0513 15.47 23.0617C15.8165 23.0721 16.1436 22.9024 16.3345 22.6132L17.9071 20.2314L20.7561 20.0604C21.102 20.0396 21.4126 19.8412 21.5768 19.536C21.741 19.2308 21.7355 18.8623 21.5622 18.5622L18.6284 13.4807ZM12 15C15.3137 15 18 12.3137 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9C6 12.3137 8.68629 15 12 15ZM13.6355 16.8327L15.557 20.1609L16.5136 18.7122C16.687 18.4495 16.974 18.2838 17.2882 18.2649L19.0211 18.1609L17.2282 15.0554C16.2192 15.9273 14.9901 16.5513 13.6355 16.8327ZM4.59792 18.2944L6.57139 14.8763C7.61642 15.8422 8.91965 16.5328 10.3659 16.833L8.29107 20.4267L7.25305 18.8545C7.07962 18.5919 6.79264 18.4262 6.47845 18.4073L4.59792 18.2944Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BackspaceIcon.vue b/src/stories/icons/Mono/BackspaceIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b9a692bda3c1b8b794d8955ba3b94fd84ddcd729
--- /dev/null
+++ b/src/stories/icons/Mono/BackspaceIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M11.7071 15.2938C11.3166 14.9033 11.3166 14.2701 11.7071 13.8796L13.5839 12.0027L11.7079 10.1267C11.3174 9.73617 11.3174 9.103 11.7079 8.71248C12.0984 8.32195 12.7316 8.32195 13.1221 8.71248L14.9982 10.5885L16.8796 8.70702C17.2702 8.3165 17.9033 8.3165 18.2938 8.70702C18.6844 9.09755 18.6844 9.73071 18.2938 10.1212L16.4124 12.0027L18.293 13.8833C18.6835 14.2739 18.6835 14.907 18.293 15.2975C17.9025 15.6881 17.2693 15.6881 16.8788 15.2975L14.9982 13.4169L13.1213 15.2938C12.7308 15.6843 12.0976 15.6843 11.7071 15.2938Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5.6131 5.14653C6.18186 4.42266 7.05148 4 7.97206 4H20C21.6568 4 23 5.34315 23 7V17C23 18.6569 21.6568 20 20 20H7.97206C7.05148 20 6.18186 19.5773 5.6131 18.8535L1.68453 13.8535C0.829805 12.7656 0.829807 11.2344 1.68453 10.1465L5.6131 5.14653ZM7.97206 6C7.6652 6 7.37533 6.14089 7.18574 6.38218L3.25717 11.3822C2.97226 11.7448 2.97226 12.2552 3.25717 12.6178L7.18574 17.6178C7.37533 17.8591 7.6652 18 7.97206 18H20C20.5523 18 21 17.5523 21 17V7C21 6.44772 20.5523 6 20 6H7.97206Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BadgeIcon.vue b/src/stories/icons/Mono/BadgeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..108092cd7821e32fb42bc9cf617de54eff634e17
--- /dev/null
+++ b/src/stories/icons/Mono/BadgeIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M1 5C1 2.79086 2.79086 1 5 1H9.75736C10.8182 1 11.8356 1.42143 12.5858 2.17157L21.5858 11.1716C23.1479 12.7337 23.1479 15.2663 21.5858 16.8284L16.8284 21.5858C15.2663 23.1479 12.7337 23.1479 11.1716 21.5858L2.17157 12.5858C1.42143 11.8356 1 10.8182 1 9.75736V5ZM5 3C3.89543 3 3 3.89543 3 5V9.75736C3 10.2878 3.21071 10.7965 3.58579 11.1716L12.5858 20.1716C13.3668 20.9526 14.6332 20.9526 15.4142 20.1716L20.1716 15.4142C20.9526 14.6332 20.9526 13.3668 20.1716 12.5858L11.1716 3.58579C10.7965 3.21071 10.2878 3 9.75736 3H5Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M9 7.5C9 8.32843 8.32843 9 7.5 9C6.67157 9 6 8.32843 6 7.5C6 6.67157 6.67157 6 7.5 6C8.32843 6 9 6.67157 9 7.5Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BallFootballIcon.vue b/src/stories/icons/Mono/BallFootballIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e055d6715c5d5d176e15d174cdd475bbd5d6a23
--- /dev/null
+++ b/src/stories/icons/Mono/BallFootballIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11.9999 22.9998C18.075 22.9998 22.9999 18.0749 22.9999 11.9998C22.9999 5.92462 18.075 0.999756 11.9999 0.999756C5.92478 0.999756 0.999908 5.92462 0.999908 11.9998C0.999908 18.0749 5.92478 22.9998 11.9999 22.9998ZM3.02676 12.6047C3.08664 13.5062 3.27939 14.3715 3.5856 15.181L7.66338 15.9224L8.78323 14.8025L7.25464 11.7454L5.99999 11.118L3.02676 12.6047ZM4.83959 17.4418C5.74823 18.6355 6.94856 19.5951 8.3343 20.2144L7.30091 17.8893L4.83959 17.4418ZM10.8358 20.9183C11.2168 20.9675 11.6054 20.9929 11.9999 20.9929C12.3945 20.9929 12.7831 20.9675 13.1642 20.9182L14.8072 17.2215L13.5858 16H10.4142L9.19274 17.2215L10.8358 20.9183ZM15.6657 20.2143C17.0514 19.595 18.2516 18.6354 19.1602 17.4418L16.6991 17.8893L15.6657 20.2143ZM3.16748 10.2982L4.86962 9.44715L4.41375 7.16782C3.81434 8.10693 3.38453 9.16479 3.16748 10.2982ZM6.06786 5.24032L6.88466 9.3243L7.89442 9.82918L11 7.5V6.11803L7.35671 4.29639C6.89885 4.57295 6.46765 4.88918 6.06786 5.24032ZM9.79419 3.27906L12 4.38197L14.2057 3.27909C13.4999 3.10112 12.761 3.00659 11.9999 3.00659C11.2389 3.00659 10.5 3.10111 9.79419 3.27906ZM16.6432 4.29644L13 6.11803V7.5L16.1056 9.82918L17.1153 9.3243L17.9321 5.24044C17.5323 4.88928 17.1011 4.57302 16.6432 4.29644ZM19.5862 7.16802L19.1304 9.44715L20.8323 10.2981C20.6153 9.16481 20.1855 8.10706 19.5862 7.16802ZM20.9731 12.6046L18 11.118L16.7453 11.7454L15.2168 14.8025L16.3366 15.9224L20.4142 15.181C20.7204 14.3715 20.9132 13.5062 20.9731 12.6046ZM9.26765 11.2993L12 9.25L14.7323 11.2993L13.382 14H10.618L9.26765 11.2993Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BallIcon.vue b/src/stories/icons/Mono/BallIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51a7902e41e03864eab94a8ef50bc0fcbe440c73
--- /dev/null
+++ b/src/stories/icons/Mono/BallIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM5.14386 17.8201C3.81099 16.2515 3.00683 14.2197 3.00683 12L3.00683 11.9978C6.61307 11.9618 9.57567 11.4838 12.2422 10.5779C12.4668 11.0605 12.6847 11.5534 12.8956 12.0564C12.5555 12.1691 12.221 12.2949 11.8918 12.4335C9.24177 13.5489 7.00538 15.4612 5.14386 17.8201ZM6.60614 19.1967C8.10884 20.3248 9.97636 20.9932 12 20.9932C13.2188 20.9932 14.3809 20.7507 15.4409 20.3114C14.9668 18.0368 14.352 15.907 13.6265 13.9217C13.3003 14.0264 12.9807 14.1451 12.6677 14.2768C10.356 15.2499 8.33843 16.9649 6.60614 19.1967ZM15.5924 13.4765C16.2479 15.3019 16.8129 17.2399 17.267 19.2902C19.048 18.0013 20.338 16.0757 20.8032 13.8473C18.9143 13.3589 17.1821 13.2604 15.5924 13.4765ZM14.8575 11.5662C16.754 11.2412 18.7996 11.3067 20.9917 11.8332C20.9578 9.97415 20.3599 8.25291 19.3619 6.8334C17.6358 8.0531 15.9276 9.06168 14.1111 9.85398C14.3687 10.4121 14.6177 10.9829 14.8575 11.5662ZM11.3457 8.76846C8.99734 9.53429 6.39047 9.94463 3.2312 9.9948C3.85725 7.24565 5.74294 4.97565 8.24906 3.82401C9.34941 5.31262 10.3933 6.96064 11.3457 8.76846ZM13.2302 8.05623C14.8876 7.34152 16.4466 6.43089 18.0282 5.32624C16.4333 3.88469 14.3192 3.00683 12 3.00683C11.4014 3.00683 10.8165 3.06531 10.2506 3.17688C11.3103 4.66337 12.3129 6.28992 13.2302 8.05623Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BanknoteIcon.vue b/src/stories/icons/Mono/BanknoteIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d1dc02c2469cb38ddb03ffbd0de19c176472b238
--- /dev/null
+++ b/src/stories/icons/Mono/BanknoteIcon.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 14.0967C10.842 14.0967 9.90331 13.158 9.90331 12C9.90331 10.842 10.842 9.90331 12 9.90331C13.158 9.90331 14.0967 10.842 14.0967 12C14.0967 13.158 13.158 14.0967 12 14.0967Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M7 12C7 12.5523 6.55229 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55229 11 7 11.4477 7 12Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M18 13C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M21 5C22.6569 5 24 6.34315 24 8V16C24 17.6569 22.6569 19 21 19H3C1.34315 19 0 17.6569 0 16V8C0 6.34315 1.34315 5 3 5H21ZM4 7H20C20 7.26264 20.0517 7.52272 20.1522 7.76537C20.2528 8.00802 20.4001 8.2285 20.5858 8.41421C20.7715 8.59993 20.992 8.74725 21.2346 8.84776C21.4773 8.94827 21.7374 9 22 9V15C21.7374 15 21.4773 15.0517 21.2346 15.1522C20.992 15.2528 20.7715 15.4001 20.5858 15.5858C20.4001 15.7715 20.2528 15.992 20.1522 16.2346C20.0517 16.4773 20 16.7374 20 17H4C4 16.7374 3.94827 16.4773 3.84776 16.2346C3.74725 15.992 3.59993 15.7715 3.41421 15.5858C3.2285 15.4001 3.00802 15.2528 2.76537 15.1522C2.52272 15.0517 2.26264 15 2 15V9C2.26264 9 2.52272 8.94827 2.76537 8.84776C3.00802 8.74725 3.2285 8.59993 3.41421 8.41421C3.59993 8.2285 3.74725 8.00802 3.84776 7.76537C3.94827 7.52272 4 7.26264 4 7Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BellIcon.vue b/src/stories/icons/Mono/BellIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea10cb265988fcfe8e6dd3e36008affa16502cb0
--- /dev/null
+++ b/src/stories/icons/Mono/BellIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11.5 1C10.9477 1 10.5 1.44772 10.5 2V3H9.99998C7.23864 3 4.99999 5.23825 4.99999 7.99975V11C4.99999 11.7377 4.76718 12.5722 4.39739 13.4148C4.03165 14.2482 3.55876 15.0294 3.14142 15.6439C2.38188 16.7624 2.85216 18.5301 4.40564 18.8103C5.42144 18.9935 6.85701 19.2115 8.54656 19.3527C8.54454 19.4015 8.54352 19.4506 8.54352 19.5C8.54352 21.433 10.1105 23 12.0435 23C13.9765 23 15.5435 21.433 15.5435 19.5C15.5435 19.4482 15.5424 19.3966 15.5402 19.3453C17.1921 19.204 18.596 18.9903 19.5943 18.8103C21.1478 18.5301 21.6181 16.7624 20.8586 15.6439C20.4412 15.0294 19.9683 14.2482 19.6026 13.4148C19.2328 12.5722 19 11.7377 19 11V7.99975C19 5.23825 16.7613 3 14 3H13.5V2C13.5 1.44772 13.0523 1 12.5 1H11.5ZM12 19.5C12.5113 19.5 13.0122 19.4898 13.4997 19.4715C13.5076 20.2758 12.8541 20.9565 12.0435 20.9565C11.2347 20.9565 10.5803 20.2778 10.5872 19.4747C11.0473 19.491 11.5191 19.5 12 19.5ZM9.99998 5C8.34305 5 6.99999 6.34298 6.99999 7.99975V11C6.99999 12.1234 6.65547 13.2463 6.22878 14.2186C5.79804 15.2 5.25528 16.0911 4.79599 16.7675C4.78578 16.7825 4.78102 16.7969 4.77941 16.8113C4.77797 16.8242 4.77919 16.8362 4.78167 16.8458C6.3644 17.1303 9.00044 17.5 12 17.5C14.9995 17.5 17.6356 17.1303 19.2183 16.8458C19.2208 16.8362 19.222 16.8242 19.2206 16.8113C19.2189 16.7969 19.2142 16.7825 19.204 16.7675C18.7447 16.0911 18.2019 15.2 17.7712 14.2186C17.3445 13.2463 17 12.1234 17 11V7.99975C17 6.34298 15.6569 5 14 5H9.99998Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BellOffIcon.vue b/src/stories/icons/Mono/BellOffIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..daae8ca9ee1aa55fd7af13260846b91c4328c8a2
--- /dev/null
+++ b/src/stories/icons/Mono/BellOffIcon.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M10.5 2C10.5 1.44772 10.9477 1 11.5 1H12.5C13.0523 1 13.5 1.44772 13.5 2V3H14C16.7613 3 19 5.23825 19 7.99975V11C19 11.7377 19.2328 12.5722 19.6026 13.4148C19.9683 14.2482 20.4412 15.0294 20.8586 15.6439C21.3162 16.3178 21.3274 17.2273 20.9242 17.9052L18.2876 15.2685C18.1067 14.9353 17.9312 14.5831 17.7712 14.2186C17.3445 13.2463 17 12.1234 17 11V7.99975C17 6.34298 15.6569 5 14 5H9.99999C9.43275 5 8.9023 5.15739 8.44992 5.43089L7.01062 3.99158C7.84446 3.36876 8.87917 3 9.99999 3H10.5V2Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5.00027 7.94565C5.00008 7.96366 4.99999 7.98169 4.99999 7.99975V11C4.99999 11.7377 4.76718 12.5722 4.39739 13.4148C4.03165 14.2482 3.55876 15.0294 3.14142 15.6439C2.38188 16.7624 2.85216 18.5301 4.40564 18.8103C5.42144 18.9935 6.85701 19.2115 8.54657 19.3527C8.54454 19.4015 8.54352 19.4506 8.54352 19.5C8.54352 21.433 10.1105 23 12.0435 23C13.9765 23 15.5435 21.433 15.5435 19.5C15.5435 19.4482 15.5424 19.3966 15.5402 19.3453C15.8088 19.3224 16.0709 19.2975 16.3257 19.2711L14.4742 17.4196C13.6902 17.4696 12.86 17.5 12 17.5C9.00044 17.5 6.36441 17.1303 4.78167 16.8458C4.7792 16.8362 4.77797 16.8242 4.77941 16.8113C4.78102 16.7969 4.78578 16.7825 4.79599 16.7675C5.25529 16.0911 5.79804 15.2 6.22878 14.2186C6.65547 13.2463 6.99999 12.1234 6.99999 11V9.94536L5.00027 7.94565ZM13.4997 19.4715C13.0122 19.4898 12.5113 19.5 12 19.5C11.5191 19.5 11.0473 19.491 10.5872 19.4747C10.5803 20.2778 11.2347 20.9565 12.0435 20.9565C12.8541 20.9565 13.5076 20.2758 13.4997 19.4715Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M2.00789 3.42206C1.61737 3.03153 1.61737 2.39837 2.00789 2.00784C2.39841 1.61732 3.03158 1.61732 3.4221 2.00784L22.0004 20.5862C22.391 20.9767 22.391 21.6099 22.0004 22.0004C21.6099 22.3909 20.9767 22.3909 20.5862 22.0004L2.00789 3.42206Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BoxIcon.vue b/src/stories/icons/Mono/BoxIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d12ed84bd54bd9ae736bf57f3409d61e861fdc3
--- /dev/null
+++ b/src/stories/icons/Mono/BoxIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12.4856 1.12584C12.1836 0.958052 11.8164 0.958052 11.5144 1.12584L2.51436 6.12584L2.5073 6.13784L2.49287 6.13802C2.18749 6.3177 2 6.64568 2 7V16.9999C2 17.3631 2.19689 17.6977 2.51436 17.874L11.5022 22.8673C11.8059 23.0416 12.1791 23.0445 12.4856 22.8742L21.4856 17.8742C21.8031 17.6978 22 17.3632 22 17V7C22 6.64568 21.8125 6.31781 21.5071 6.13813C21.4996 6.13372 21.4921 6.12942 21.4845 6.12522L12.4856 1.12584ZM5.05923 6.99995L12.0001 10.856L14.4855 9.47519L7.74296 5.50898L5.05923 6.99995ZM16.5142 8.34816L18.9409 7L12 3.14396L9.77162 4.38195L16.5142 8.34816ZM4 16.4115V8.69951L11 12.5884V20.3004L4 16.4115ZM13 20.3005V12.5884L20 8.69951V16.4116L13 20.3005Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BrightnessIcon.vue b/src/stories/icons/Mono/BrightnessIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..570a8695a6327a23d80a3491d1b734f91862e641
--- /dev/null
+++ b/src/stories/icons/Mono/BrightnessIcon.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 0C11.4477 0 11 0.447715 11 1V3C11 3.55228 11.4477 4 12 4C12.5523 4 13 3.55228 13 3V1C13 0.447715 12.5523 0 12 0Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM9.21518 14.7848C8.50248 14.0721 8.06167 13.0875 8.06167 12C8.06167 9.82492 9.82492 8.06167 12 8.06167C13.0875 8.06167 14.0721 8.50248 14.7848 9.21518L9.21518 14.7848Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M19.0711 3.51472C19.4616 3.12419 20.0947 3.12419 20.4853 3.51472C20.8758 3.90524 20.8758 4.53841 20.4853 4.92893L19.0711 6.34315C18.6805 6.73367 18.0474 6.73367 17.6568 6.34315C17.2663 5.95262 17.2663 5.31946 17.6568 4.92893L19.0711 3.51472Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M0 12C0 12.5523 0.447715 13 1 13H3C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11H1C0.447715 11 0 11.4477 0 12Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M3.51472 4.92893C3.1242 4.53841 3.1242 3.90524 3.51472 3.51472C3.90525 3.12419 4.53841 3.12419 4.92894 3.51472L6.34315 4.92893C6.73368 5.31946 6.73368 5.95262 6.34315 6.34314C5.95263 6.73367 5.31946 6.73367 4.92894 6.34314L3.51472 4.92893Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M12 20C11.4477 20 11 20.4477 11 21V23C11 23.5523 11.4477 24 12 24C12.5523 24 13 23.5523 13 23V21C13 20.4477 12.5523 20 12 20Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M4.92894 17.6569C5.31946 17.2663 5.95263 17.2663 6.34315 17.6569C6.73368 18.0474 6.73368 18.6805 6.34315 19.0711L4.92894 20.4853C4.53842 20.8758 3.90525 20.8758 3.51473 20.4853C3.1242 20.0948 3.1242 19.4616 3.51473 19.0711L4.92894 17.6569Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M20 12C20 12.5523 20.4477 13 21 13H23C23.5523 13 24 12.5523 24 12C24 11.4477 23.5523 11 23 11H21C20.4477 11 20 11.4477 20 12Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M17.6568 19.0711C17.2663 18.6805 17.2663 18.0474 17.6568 17.6569C18.0474 17.2663 18.6805 17.2663 19.0711 17.6569L20.4853 19.0711C20.8758 19.4616 20.8758 20.0948 20.4853 20.4853C20.0947 20.8758 19.4616 20.8758 19.0711 20.4853L17.6568 19.0711Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BulbIcon.vue b/src/stories/icons/Mono/BulbIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..376111bd2ba54317a645c2b05039f6f47a834a16
--- /dev/null
+++ b/src/stories/icons/Mono/BulbIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 1C8.20602 1 6.15147 3.02886 5.1033 5.03734C4.591 6.01899 4.31823 6.98949 4.17245 7.70719C4.09911 8.06826 4.05672 8.3713 4.03245 8.58786C4.01718 8.72417 4 8.86266 4 9C4 11.7224 5.23215 13.3137 6.29447 14.1534C6.82295 14.5712 7.11709 14.999 7.16406 15.3747L7.78873 20.3721C7.97639 21.8734 9.25259 23 10.7656 23H13.2344C14.7474 23 16.0236 21.8734 16.2113 20.3721L16.8359 15.3747C16.8829 14.999 17.177 14.5712 17.7055 14.1534C18.7678 13.3137 20 11.7224 20 9C20 8.86266 19.9828 8.72417 19.9675 8.58786C19.9433 8.3713 19.9009 8.06826 19.8275 7.70719C19.6818 6.98949 19.409 6.01899 18.8967 5.03734C17.8485 3.02886 15.794 1 12 1ZM7.53474 12.5845C6.43811 11.7176 5.86517 10.1925 6.02001 8.81057C6.03864 8.64432 6.07247 8.40049 6.13243 8.10531C6.25324 7.51051 6.47539 6.73101 6.87637 5.96266C7.65476 4.47114 9.10021 3 12 3C14.8998 3 16.3452 4.47114 17.1236 5.96266C17.5246 6.73101 17.7468 7.51051 17.8676 8.10531C17.9275 8.40049 17.9614 8.64432 17.98 8.81057C18.1348 10.1925 17.5619 11.7176 16.4653 12.5845C15.7853 13.1219 14.9955 13.974 14.8514 15.1267L14.6172 17H9.38278L9.14862 15.1267C9.00453 13.974 8.21469 13.1219 7.53474 12.5845ZM9.63278 19L9.77329 20.124C9.83584 20.6245 10.2612 21 10.7656 21H13.2344C13.7388 21 14.1642 20.6245 14.2267 20.124L14.3672 19H9.63278Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CalculatorIcon.vue b/src/stories/icons/Mono/CalculatorIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8531fdab0c515617b4001f6c67ef5e279bcf2681
--- /dev/null
+++ b/src/stories/icons/Mono/CalculatorIcon.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M14 7C14 6.44771 14.4477 6 15 6H16V5C16 4.44772 16.4477 4 17 4C17.5523 4 18 4.44772 18 5V6H19C19.5523 6 20 6.44771 20 7C20 7.55229 19.5523 8 19 8H18V9C18 9.55228 17.5523 10 17 10C16.4477 10 16 9.55228 16 9V8H15C14.4477 8 14 7.55229 14 7Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M14 15C14 14.4477 14.4477 14 15 14H19C19.5523 14 20 14.4477 20 15C20 15.5523 19.5523 16 19 16H15C14.4477 16 14 15.5523 14 15Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M15 18C14.4477 18 14 18.4477 14 19C14 19.5523 14.4477 20 15 20H19C19.5523 20 20 19.5523 20 19C20 18.4477 19.5523 18 19 18H15Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M5 6C4.44772 6 4 6.44771 4 7C4 7.55229 4.44772 8 5 8H9C9.55228 8 10 7.55229 10 7C10 6.44771 9.55228 6 9 6H5Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M5.92512 14.5109C5.5346 14.1204 4.90143 14.1204 4.51091 14.5109C4.12039 14.9014 4.12039 15.5346 4.51091 15.9251L5.5858 17L4.50337 18.0824C4.11284 18.4729 4.11284 19.1061 4.50337 19.4966C4.89389 19.8872 5.52705 19.8872 5.91758 19.4966L7.00002 18.4142L8.08944 19.5036C8.47996 19.8941 9.11313 19.8941 9.50365 19.5036C9.89418 19.1131 9.89418 18.4799 9.50365 18.0894L8.41423 17L9.50194 15.9123C9.89246 15.5218 9.89246 14.8886 9.50194 14.4981C9.11141 14.1075 8.47825 14.1075 8.08772 14.4981L7.00002 15.5858L5.92512 14.5109Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M20 1C21.6569 1 23 2.34315 23 4V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H20ZM20 3C20.5523 3 21 3.44772 21 4V11H13V3H20ZM21 13V20C21 20.5523 20.5523 21 20 21H13V13H21ZM4 3H11V11H3V4C3 3.44772 3.44772 3 4 3ZM3 20V13H11V21H4C3.44772 21 3 20.5523 3 20Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CalendarAddIcon.vue b/src/stories/icons/Mono/CalendarAddIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f3cad6d52b70882b7bc4aef9bb47d1a2ed7d9ed5
--- /dev/null
+++ b/src/stories/icons/Mono/CalendarAddIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M7 1C6.44772 1 6 1.44772 6 2V3H5C3.34315 3 2 4.34315 2 6V20C2 21.6569 3.34315 23 5 23H13.101C12.5151 22.4259 12.0297 21.7496 11.6736 21H5C4.44772 21 4 20.5523 4 20V11H20V11.2899C20.7224 11.5049 21.396 11.8334 22 12.2547V6C22 4.34315 20.6569 3 19 3H18V2C18 1.44772 17.5523 1 17 1C16.4477 1 16 1.44772 16 2V3H8V2C8 1.44772 7.55228 1 7 1ZM16 6V5H8V6C8 6.55228 7.55228 7 7 7C6.44772 7 6 6.55228 6 6V5H5C4.44772 5 4 5.44772 4 6V9H20V6C20 5.44772 19.5523 5 19 5H18V6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M17 16C17 15.4477 17.4477 15 18 15C18.5523 15 19 15.4477 19 16V17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H19V20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20V19H16C15.4477 19 15 18.5523 15 18C15 17.4477 15.4477 17 16 17H17V16Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M24 18C24 21.3137 21.3137 24 18 24C14.6863 24 12 21.3137 12 18C12 14.6863 14.6863 12 18 12C21.3137 12 24 14.6863 24 18ZM13.9819 18C13.9819 20.2191 15.7809 22.0181 18 22.0181C20.2191 22.0181 22.0181 20.2191 22.0181 18C22.0181 15.7809 20.2191 13.9819 18 13.9819C15.7809 13.9819 13.9819 15.7809 13.9819 18Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CalendarIcon.vue b/src/stories/icons/Mono/CalendarIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f0d9a933963e8a20f1beaea31eef767e72d61f2
--- /dev/null
+++ b/src/stories/icons/Mono/CalendarIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M7 1C6.44772 1 6 1.44772 6 2V3H5C3.34315 3 2 4.34315 2 6V20C2 21.6569 3.34315 23 5 23H19C20.6569 23 22 21.6569 22 20V6C22 4.34315 20.6569 3 19 3H18V2C18 1.44772 17.5523 1 17 1C16.4477 1 16 1.44772 16 2V3H8V2C8 1.44772 7.55229 1 7 1ZM16 6V5H8V6C8 6.55228 7.55229 7 7 7C6.44772 7 6 6.55228 6 6V5H5C4.44772 5 4 5.44772 4 6V9H20V6C20 5.44772 19.5523 5 19 5H18V6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6ZM4 15V11H8V15H4ZM4 17V20C4 20.5523 4.44772 21 5 21H8V17H4ZM10 17V21H14V17H10ZM16 17V21H19C19.5523 21 20 20.5523 20 20V17H16ZM20 15H16V11H20V15ZM14 15H10V11H14V15Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CalendarRemoveIcon.vue b/src/stories/icons/Mono/CalendarRemoveIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a0541bd422820661b9dd11abe506945f1458321
--- /dev/null
+++ b/src/stories/icons/Mono/CalendarRemoveIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M7 1C6.44772 1 6 1.44772 6 2V3H5C3.34315 3 2 4.34315 2 6V20C2 21.6569 3.34315 23 5 23H13.101C12.5151 22.4259 12.0297 21.7496 11.6736 21H5C4.44772 21 4 20.5523 4 20V11H20V11.2899C20.7224 11.5049 21.396 11.8334 22 12.2547V6C22 4.34315 20.6569 3 19 3H18V2C18 1.44772 17.5523 1 17 1C16.4477 1 16 1.44772 16 2V3H8V2C8 1.44772 7.55228 1 7 1ZM16 6V5H8V6C8 6.55228 7.55228 7 7 7C6.44772 7 6 6.55228 6 6V5H5C4.44772 5 4 5.44772 4 6V9H20V6C20 5.44772 19.5523 5 19 5H18V6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M16 17C15.4477 17 15 17.4477 15 18C15 18.5523 15.4477 19 16 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H16Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M24 18C24 21.3137 21.3137 24 18 24C14.6863 24 12 21.3137 12 18C12 14.6863 14.6863 12 18 12C21.3137 12 24 14.6863 24 18ZM13.9819 18C13.9819 20.2191 15.7809 22.0181 18 22.0181C20.2191 22.0181 22.0181 20.2191 22.0181 18C22.0181 15.7809 20.2191 13.9819 18 13.9819C15.7809 13.9819 13.9819 15.7809 13.9819 18Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CardsIcon.vue b/src/stories/icons/Mono/CardsIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fafda21bde70718e80d37c70a21f284e1c770d85
--- /dev/null
+++ b/src/stories/icons/Mono/CardsIcon.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M9.4 7.53333C9.2 7.26667 8.8 7.26667 8.6 7.53333L6.225 10.7C6.09167 10.8778 6.09167 11.1222 6.225 11.3L8.6 14.4667C8.8 14.7333 9.2 14.7333 9.4 14.4667L11.775 11.3C11.9083 11.1222 11.9083 10.8778 11.775 10.7L9.4 7.53333Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M4.09245 5.63868C4.03647 5.5547 4.03647 5.4453 4.09245 5.36133L4.79199 4.31202C4.89094 4.16359 5.10906 4.16359 5.20801 4.31202L5.90755 5.36132C5.96353 5.4453 5.96353 5.5547 5.90755 5.63867L5.20801 6.68798C5.10906 6.83641 4.89094 6.83641 4.79199 6.68798L4.09245 5.63868Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M13.208 15.312C13.1091 15.1636 12.8909 15.1636 12.792 15.312L12.0924 16.3613C12.0365 16.4453 12.0365 16.5547 12.0924 16.6387L12.792 17.688C12.8909 17.8364 13.1091 17.8364 13.208 17.688L13.9075 16.6387C13.9635 16.5547 13.9635 16.4453 13.9075 16.3613L13.208 15.312Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M1 4C1 2.34315 2.34315 1 4 1H14C15.1323 1 16.1181 1.62732 16.6288 2.55337L20.839 3.68148C22.4394 4.11031 23.3891 5.75532 22.9603 7.35572L19.3368 20.8787C18.908 22.4791 17.263 23.4288 15.6626 23L8.19849 21H4C2.34315 21 1 19.6569 1 18V4ZM17 18V4.72339L20.3213 5.61334C20.8548 5.75628 21.1714 6.30461 21.0284 6.83808L17.405 20.361C17.262 20.8945 16.7137 21.2111 16.1802 21.0681L15.1198 20.784C16.222 20.3403 17 19.261 17 18ZM4 3C3.44772 3 3 3.44772 3 4V18C3 18.5523 3.44772 19 4 19H14C14.5523 19 15 18.5523 15 18V4C15 3.44772 14.5523 3 14 3H4Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChartLineIcon.vue b/src/stories/icons/Mono/ChartLineIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c09464e6d93a26011f83ec5f55e3936ea4d31d7f
--- /dev/null
+++ b/src/stories/icons/Mono/ChartLineIcon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M1 2C1 1.44772 1.44772 1 2 1C2.55228 1 3 1.44772 3 2V20C3 20.5523 3.44771 21 4 21L22 21C22.5523 21 23 21.4477 23 22C23 22.5523 22.5523 23 22 23H3C1.89543 23 1 22.1046 1 21V2Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M19.9285 5.37139C20.1336 4.85861 19.8842 4.27664 19.3714 4.07152C18.8586 3.86641 18.2766 4.11583 18.0715 4.62861L14.8224 12.7513C14.6978 13.0628 14.3078 13.1656 14.0459 12.9561L11.0811 10.5843C10.3619 10.0089 9.29874 10.2116 8.84174 11.0114L5.13176 17.5039C4.85775 17.9834 5.02434 18.5942 5.50386 18.8682C5.98338 19.1423 6.59423 18.9757 6.86824 18.4961L9.9982 13.0187C10.1505 12.7521 10.5049 12.6846 10.7447 12.8764L13.849 15.3598C14.635 15.9886 15.805 15.6802 16.1788 14.7456L19.9285 5.37139Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChartPieIcon.vue b/src/stories/icons/Mono/ChartPieIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c456f242234f386c1bc4dab7d34454bb452bb440
--- /dev/null
+++ b/src/stories/icons/Mono/ChartPieIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 20.9932C7.03321 20.9932 3.00683 16.9668 3.00683 12C3.00683 7.37122 6.50383 3.55921 11 3.0618V11.5858C11 12.1162 11.2107 12.6249 11.5858 13L17.6128 19.027C16.0744 20.2574 14.1231 20.9932 12 20.9932ZM19.027 17.6128L14.7556 13.3414C14.6296 13.2154 14.7189 13 14.8971 13H20.9382C20.7464 14.734 20.0616 16.3193 19.027 17.6128ZM20.9382 11H13.5C13.2239 11 13 10.7761 13 10.5V3.0618C17.1678 3.52289 20.4771 6.83216 20.9382 11Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChatIcon.vue b/src/stories/icons/Mono/ChatIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ea3573d63481df06526e3e1122240239641d1aa
--- /dev/null
+++ b/src/stories/icons/Mono/ChatIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 3C7.85113 3 4 5.73396 4 10C4 11.5704 4.38842 12.7289 5.08252 13.6554C5.79003 14.5998 6.87746 15.3863 8.41627 16.0908L9.2326 16.4645L8.94868 17.3162C8.54129 18.5384 7.84997 19.6611 7.15156 20.5844C9.56467 19.8263 12.7167 18.6537 14.9453 17.1679C17.1551 15.6948 18.3969 14.5353 19.0991 13.455C19.7758 12.4139 20 11.371 20 10C20 5.73396 16.1489 3 12 3ZM2 10C2 4.26604 7.14887 1 12 1C16.8511 1 22 4.26604 22 10C22 11.629 21.7242 13.0861 20.7759 14.545C19.8531 15.9647 18.3449 17.3052 16.0547 18.8321C13.0781 20.8164 8.76589 22.2232 6.29772 22.9281C5.48665 23.1597 4.84055 22.6838 4.56243 22.1881C4.28848 21.6998 4.22087 20.9454 4.74413 20.3614C5.44439 19.5798 6.21203 18.5732 6.72616 17.4871C5.40034 16.7841 4.29326 15.9376 3.48189 14.8545C2.48785 13.5277 2 11.9296 2 10Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChatWritingIcon.vue b/src/stories/icons/Mono/ChatWritingIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6c11f9c1f67accf1426b5dbc2cbe13e0488aa05f
--- /dev/null
+++ b/src/stories/icons/Mono/ChatWritingIcon.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 3C7.85113 3 4 5.73396 4 10C4 11.5704 4.38842 12.7289 5.08252 13.6554C5.79003 14.5998 6.87746 15.3863 8.41627 16.0908L9.2326 16.4645L8.94868 17.3162C8.54129 18.5384 7.84997 19.6611 7.15156 20.5844C9.56467 19.8263 12.7167 18.6537 14.9453 17.1679C17.1551 15.6948 18.3969 14.5353 19.0991 13.455C19.7758 12.4139 20 11.371 20 10C20 5.73396 16.1489 3 12 3ZM2 10C2 4.26604 7.14887 1 12 1C16.8511 1 22 4.26604 22 10C22 11.629 21.7242 13.0861 20.7759 14.545C19.8531 15.9647 18.3449 17.3052 16.0547 18.8321C13.0781 20.8164 8.76589 22.2232 6.29772 22.9281C5.48665 23.1597 4.84055 22.6838 4.56243 22.1881C4.28848 21.6998 4.22087 20.9454 4.74413 20.3614C5.44439 19.5798 6.21203 18.5732 6.72616 17.4871C5.40034 16.7841 4.29326 15.9376 3.48189 14.8545C2.48785 13.5277 2 11.9296 2 10Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M9 10C9 10.8284 8.32843 11.5 7.5 11.5C6.67157 11.5 6 10.8284 6 10C6 9.17157 6.67157 8.5 7.5 8.5C8.32843 8.5 9 9.17157 9 10Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M13.4976 10C13.4976 10.8284 12.826 11.5 11.9976 11.5C11.1692 11.5 10.4976 10.8284 10.4976 10C10.4976 9.17157 11.1692 8.5 11.9976 8.5C12.826 8.5 13.4976 9.17157 13.4976 10Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M16.5 11.5C17.3284 11.5 18 10.8284 18 10C18 9.17157 17.3284 8.5 16.5 8.5C15.6716 8.5 15 9.17157 15 10C15 10.8284 15.6716 11.5 16.5 11.5Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CheckmarkIcon.vue b/src/stories/icons/Mono/CheckmarkIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..05ab9bd0e2251521a3accab1cf8bc2257026a566
--- /dev/null
+++ b/src/stories/icons/Mono/CheckmarkIcon.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M19 7.34189C18.6095 6.95136 17.9763 6.95136 17.5858 7.34189L10.3407 14.587C9.95016 14.9775 9.31699 14.9775 8.92647 14.587L6.38507 12.0456C5.99454 11.6551 5.36138 11.6551 4.97085 12.0456C4.58033 12.4361 4.58033 13.0693 4.97085 13.4598L7.51774 16C8.68969 17.1689 10.5869 17.1677 11.7574 15.9974L19 8.7561C19.3905 8.36558 19.3905 7.73241 19 7.34189Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChemistryFlaskIcon.vue b/src/stories/icons/Mono/ChemistryFlaskIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f49358a6f446460d45693224b4664119cc61e288
--- /dev/null
+++ b/src/stories/icons/Mono/ChemistryFlaskIcon.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M10 17C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15C9.44772 15 9 15.4477 9 16C9 16.5523 9.44772 17 10 17Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M15 18C15 18.5523 14.5523 19 14 19C13.4477 19 13 18.5523 13 18C13 17.4477 13.4477 17 14 17C14.5523 17 15 17.4477 15 18Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M15 3V7.58152C17.9318 8.76829 20 11.6426 20 15C20 19.4183 16.4183 23 12 23C7.58172 23 4 19.4183 4 15C4 11.6426 6.06817 8.76829 9 7.58152V3H8C7.44772 3 7 2.55228 7 2C7 1.44772 7.44772 1 8 1H16C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3H15ZM9.75043 9.43539L10.3752 9.18249C10.7529 9.02962 11 8.66295 11 8.25555V3H13V8.25555C13 8.66295 13.2471 9.02962 13.6248 9.18249L14.2496 9.43539C15.1075 9.78268 15.8661 10.3221 16.4726 11L7.52739 11C8.13388 10.3221 8.89249 9.78268 9.75043 9.43539ZM6.3414 13C6.12025 13.6258 6 14.2991 6 15C6 18.3137 8.68629 21 12 21C15.3137 21 18 18.3137 18 15C18 14.2991 17.8798 13.6258 17.6586 13L6.3414 13Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CodeIcon.vue b/src/stories/icons/Mono/CodeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6eba9b7dbb464087f5dd26179047fc2432a4e49
--- /dev/null
+++ b/src/stories/icons/Mono/CodeIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M14.9615 5.27473C15.1132 4.7437 14.8058 4.19021 14.2747 4.03849C13.7437 3.88677 13.1902 4.19426 13.0385 4.72529L9.03847 18.7253C8.88675 19.2563 9.19424 19.8098 9.72528 19.9615C10.2563 20.1133 10.8098 19.8058 10.9615 19.2747L14.9615 5.27473Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M5.7991 7.39879C6.13114 7.84012 6.04255 8.46705 5.60123 8.7991L2.40894 11.2009C1.87724 11.601 1.87723 12.399 2.40894 12.7991L5.60123 15.2009C6.04255 15.533 6.13114 16.1599 5.7991 16.6012C5.46705 17.0426 4.84012 17.1311 4.39879 16.7991L1.20651 14.3973C-0.388615 13.1971 -0.388621 10.8029 1.2065 9.60276L4.39879 7.20093C4.84012 6.86889 5.46705 6.95747 5.7991 7.39879Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M18.2009 16.6012C17.8689 16.1599 17.9575 15.533 18.3988 15.2009L21.5911 12.7991C22.1228 12.399 22.1228 11.601 21.5911 11.2009L18.3988 8.7991C17.9575 8.46705 17.8689 7.84012 18.2009 7.39879C18.533 6.95747 19.1599 6.86889 19.6012 7.20093L22.7935 9.60276C24.3886 10.8029 24.3886 13.1971 22.7935 14.3973L19.6012 16.7991C19.1599 17.1311 18.533 17.0426 18.2009 16.6012Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CoinsIcon.vue b/src/stories/icons/Mono/CoinsIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ab24d7290d89443e64eb0dacf5ac70e28cefa85
--- /dev/null
+++ b/src/stories/icons/Mono/CoinsIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M8 1C11.866 1 15 2.56689 15 4.5V6C15 6.55228 14.5523 7 14 7H13C11.7295 7.64819 9.95868 8 8 8C6.04132 8 4.27051 7.64819 3 7V8.5C3 9.22569 4.71803 9.83109 7.00053 9.97002C7.55179 10.0036 8 10.4477 8 11C8 11.5523 7.55166 12.0038 7.0005 11.9686C5.44274 11.8692 4.05039 11.5359 3 11V12.5C3 13.2257 4.71803 13.8311 7.00053 13.97C7.55179 14.0036 8 14.4477 8 15C8 15.5523 7.55132 16.004 7.00044 15.9646C3.60793 15.7221 1 14.2634 1 12.5V4.5C1 2.56689 4.134 1 8 1ZM3 4.5C3 3.67163 5.23859 3 8 3C10.7614 3 13 3.67163 13 4.5C13 5.32837 10.7614 6 8 6C5.23859 6 3 5.32837 3 4.5Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M23 11.5C23 9.567 19.866 8 16 8C12.134 8 9 9.567 9 11.5V19.5C9 21.433 12.134 23 16 23C19.866 23 23 21.433 23 19.5V11.5ZM11 19.5C11 20.3284 13.2386 21 16 21C18.7614 21 21 20.3284 21 19.5V18C19.7295 18.6483 17.9587 19 16 19C14.0413 19 12.2705 18.6483 11 18V19.5ZM16 17C13.2386 17 11 16.3284 11 15.5V14C12.2705 14.6483 14.0413 15 16 15C17.9587 15 19.7295 14.6483 21 14V15.5C21 16.3284 18.7614 17 16 17ZM16 10C13.2386 10 11 10.6716 11 11.5C11 12.3284 13.2386 13 16 13C18.7614 13 21 12.3284 21 11.5C21 10.6716 18.7614 10 16 10Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ColorPaletteIcon.vue b/src/stories/icons/Mono/ColorPaletteIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56a85805dcc52f05ba18674d85901bf8a27ed6ed
--- /dev/null
+++ b/src/stories/icons/Mono/ColorPaletteIcon.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M14 12.5001C14 13.3285 13.3284 14.0001 12.5 14.0001C11.6716 14.0001 11 13.3285 11 12.5001C11 11.6717 11.6716 11.0001 12.5 11.0001C13.3284 11.0001 14 11.6717 14 12.5001Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M16.5 10.0001C17.3284 10.0001 18 9.32854 18 8.50011C18 7.67169 17.3284 7.00011 16.5 7.00011C15.6716 7.00011 15 7.67169 15 8.50011C15 9.32854 15.6716 10.0001 16.5 10.0001Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M13 6.50011C13 7.32854 12.3284 8.00011 11.5 8.00011C10.6716 8.00011 10 7.32854 10 6.50011C10 5.67169 10.6716 5.00011 11.5 5.00011C12.3284 5.00011 13 5.67169 13 6.50011Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M7.50001 12.0001C8.32844 12.0001 9.00001 11.3285 9.00001 10.5001C9.00001 9.67169 8.32844 9.00011 7.50001 9.00011C6.67158 9.00011 6.00001 9.67169 6.00001 10.5001C6.00001 11.3285 6.67158 12.0001 7.50001 12.0001Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M14 17.5001C14 18.3285 13.3284 19.0001 12.5 19.0001C11.6716 19.0001 11 18.3285 11 17.5001C11 16.6717 11.6716 16.0001 12.5 16.0001C13.3284 16.0001 14 16.6717 14 17.5001Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M7.50001 17.0001C8.32844 17.0001 9.00001 16.3285 9.00001 15.5001C9.00001 14.6717 8.32844 14.0001 7.50001 14.0001C6.67158 14.0001 6.00001 14.6717 6.00001 15.5001C6.00001 16.3285 6.67158 17.0001 7.50001 17.0001Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11.5017 1.02215C15.4049 0.791746 19.5636 2.32444 21.8087 5.41131C22.5084 6.37324 22.8228 7.63628 22.6489 8.83154C22.471 10.054 21.7734 11.2315 20.4472 11.8945C19.6389 12.2987 18.7731 12.9466 18.2401 13.668C17.7158 14.3778 17.6139 14.9917 17.8944 15.5529C18.4231 16.6102 18.8894 17.9257 18.8106 19.1875C18.7699 19.8375 18.5828 20.4946 18.1664 21.0799C17.7488 21.6667 17.1448 22.1192 16.3714 22.4286C14.6095 23.1333 12.6279 23.1643 10.8081 22.8207C8.98579 22.4765 7.24486 21.7421 5.92656 20.8194C4.00568 19.4748 2.47455 17.6889 1.71371 15.4464C0.9504 13.1965 0.995912 10.5851 2.06024 7.65803C3.64355 3.30372 7.56248 1.25469 11.5017 1.02215ZM11.6196 3.01868C8.26589 3.21665 5.18483 4.9176 3.93984 8.34149C3.00414 10.9148 3.01388 13.0536 3.60768 14.8038C4.20395 16.5613 5.42282 18.0255 7.07347 19.1809C8.14405 19.9303 9.6169 20.5604 11.1792 20.8554C12.7442 21.151 14.3181 21.0959 15.6286 20.5716C16.308 20.2999 16.7678 19.8099 16.8145 19.0627C16.8606 18.3245 16.5769 17.3901 16.1056 16.4473C15.3639 14.9639 15.8542 13.5318 16.6315 12.4796C17.4002 11.4391 18.5455 10.6093 19.5528 10.1057C20.2266 9.76878 20.5747 9.19623 20.6697 8.54355C20.7686 7.86365 20.5831 7.12638 20.1913 6.58769C18.4364 4.17486 15.0093 2.81858 11.6196 3.01868Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CompassIcon.vue b/src/stories/icons/Mono/CompassIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..20dee87a3833db4338333d027a3bff9e48709786
--- /dev/null
+++ b/src/stories/icons/Mono/CompassIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M16.982 8.99791C17.5399 7.7427 16.2573 6.46011 15.0021 7.01799L10.0018 9.24033C9.66249 9.39115 9.39115 9.66249 9.24033 10.0018L7.01798 15.0021C6.46011 16.2573 7.74269 17.5399 8.99791 16.982L13.9982 14.7597C14.3375 14.6089 14.6089 14.3375 14.7597 13.9982L16.982 8.99791ZM10.9898 10.9898L14.6264 9.37359L13.0102 13.0102L9.37359 14.6264L10.9898 10.9898Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 20.9869C7.03665 20.9869 3.01306 16.9633 3.01306 12C3.01306 7.03665 7.03665 3.01306 12 3.01306C16.9633 3.01306 20.9869 7.03665 20.9869 12C20.9869 16.9633 16.9633 20.9869 12 20.9869Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ConstructionWorkerIcon.vue b/src/stories/icons/Mono/ConstructionWorkerIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b22431194eb2491ecdb9b79448bdf1c729783cf5
--- /dev/null
+++ b/src/stories/icons/Mono/ConstructionWorkerIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M3.13861 8.5856C3.10395 8.79352 3.07799 8.98444 3.05852 9.15412C2.89911 9.20305 2.72733 9.2683 2.55279 9.35557C2.18416 9.53989 1.78511 9.83206 1.48045 10.2891C1.17162 10.7523 1 11.325 1 12C1 12.675 1.17162 13.2477 1.48045 13.7109C1.78511 14.1679 2.18416 14.4601 2.55279 14.6444C2.72733 14.7317 2.89911 14.7969 3.05852 14.8459C3.07798 15.0156 3.10395 15.2065 3.13861 15.4144C3.27452 16.2299 3.54822 17.3325 4.10557 18.4472C4.66489 19.5658 5.51956 20.7149 6.8203 21.5821C8.1273 22.4534 9.82502 23 12 23C14.175 23 15.8727 22.4534 17.1797 21.5821C18.4804 20.7149 19.3351 19.5658 19.8944 18.4472C20.4518 17.3325 20.7255 16.2299 20.8614 15.4144C20.896 15.2065 20.922 15.0156 20.9415 14.8459C21.1009 14.7969 21.2727 14.7317 21.4472 14.6444C21.8158 14.4601 22.2149 14.1679 22.5196 13.7109C22.8284 13.2477 23 12.675 23 12C23 11.325 22.8284 10.7523 22.5196 10.2891C22.2149 9.83206 21.8158 9.53989 21.4472 9.35557C21.2727 9.2683 21.1009 9.20305 20.9415 9.15412C20.922 8.98444 20.896 8.79352 20.8614 8.5856C20.7255 7.77011 20.4518 6.6675 19.8944 5.55278C19.3351 4.43416 18.4804 3.28511 17.1797 2.41795C15.8727 1.54662 14.175 1 12 1C9.82502 1 8.1273 1.54662 6.8203 2.41795C5.51957 3.28511 4.66489 4.43416 4.10558 5.55279C3.54822 6.6675 3.27452 7.77011 3.13861 8.5856ZM18.9025 15H5.09753C5.20639 15.692 5.43305 16.63 5.89443 17.5528C6.33511 18.4342 6.98044 19.2851 7.9297 19.9179C8.8727 20.5466 10.175 21 12 21C13.825 21 15.1273 20.5466 16.0703 19.9179C17.0196 19.2851 17.6649 18.4342 18.1056 17.5528C18.5669 16.63 18.7936 15.692 18.9025 15ZM18.9025 9H18C17.4477 9 17 9.44771 17 10C17 10.5523 17.4477 11 18 11H20C20.3084 11.012 20.6759 11.1291 20.8554 11.3984C20.9216 11.4977 21 11.675 21 12C21 12.325 20.9216 12.5023 20.8554 12.6016C20.6759 12.8709 20.3084 12.988 20 13H4C3.69155 12.988 3.32414 12.8709 3.14455 12.6016C3.07838 12.5023 3 12.325 3 12C3 11.675 3.07838 11.4977 3.14455 11.3984C3.32414 11.1291 3.69155 11.012 4 11H6C6.55228 11 7 10.5523 7 10C7 9.44771 6.55228 9 6 9H5.09753C5.20639 8.30804 5.43306 7.36996 5.89443 6.44721C6.33512 5.56584 6.98044 4.71489 7.92971 4.08205C8.24443 3.87224 8.59917 3.68195 9 3.52152V6C9 6.55228 9.44771 7 10 7C10.5523 7 11 6.55228 11 6V3.04872C11.3146 3.01691 11.6476 3 12 3C12.3524 3 12.6854 3.01691 13 3.04872V6C13 6.55228 13.4477 7 14 7C14.5523 7 15 6.55228 15 6V3.52152C15.4008 3.68195 15.7556 3.87224 16.0703 4.08205C17.0196 4.71489 17.6649 5.56584 18.1056 6.44721C18.5669 7.36996 18.7936 8.30804 18.9025 9Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ContactsIcon.vue b/src/stories/icons/Mono/ContactsIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cdad55fa75d52d2215c9a6c9f8b26ffa083cd2b1
--- /dev/null
+++ b/src/stories/icons/Mono/ContactsIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4C14.2091 4 16 5.79086 16 8ZM9.97716 8C9.97716 9.11719 10.8828 10.0228 12 10.0228C13.1172 10.0228 14.0228 9.11719 14.0228 8C14.0228 6.88281 13.1172 5.97716 12 5.97716C10.8828 5.97716 9.97716 6.88281 9.97716 8Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5.39909 16.6808C6.49015 13.8286 9.47114 13 12 13C14.5289 13 17.5099 13.8286 18.6009 16.6808C18.9505 17.5948 18.6826 18.4756 18.1363 19.0778C17.6103 19.6576 16.8215 20 16 20H8C7.17849 20 6.38973 19.6576 5.86372 19.0778C5.31737 18.4756 5.04947 17.5948 5.39909 16.6808ZM12 15C9.72346 15 7.89905 15.7433 7.26709 17.3954C7.21826 17.523 7.25506 17.6349 7.34496 17.734C7.47492 17.8772 7.71694 18 8 18H16C16.2831 18 16.5251 17.8772 16.655 17.734C16.7449 17.6349 16.7817 17.523 16.7329 17.3954C16.101 15.7433 14.2765 15 12 15Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CropIcon.vue b/src/stories/icons/Mono/CropIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6446f2ea82997acd5491459acdaa9cabc9009842
--- /dev/null
+++ b/src/stories/icons/Mono/CropIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M6 3V14.8C6 15.9201 6 16.4802 6.21799 16.908C6.40973 17.2843 6.71569 17.5903 7.09202 17.782C7.51984 18 8.0799 18 9.2 18H15M21 18H18M18 21V9.2C18 8.0799 18 7.51984 17.782 7.09202C17.5903 6.71569 17.2843 6.40973 16.908 6.21799C16.4802 6 15.9201 6 14.8 6H9M3 6H6"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CrossCircleIcon.vue b/src/stories/icons/Mono/CrossCircleIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e28872399a232d3bf0f10a542b95045e47abeec3
--- /dev/null
+++ b/src/stories/icons/Mono/CrossCircleIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ :fill="color ?? 'none'"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
+ :fill="color ?? '#1C274C'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CrossIcon.vue b/src/stories/icons/Mono/CrossIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..294696a8c1dc4256bd98f9492a5af1973da925ce
--- /dev/null
+++ b/src/stories/icons/Mono/CrossIcon.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M6.99486 7.00636C6.60433 7.39689 6.60433 8.03005 6.99486 8.42058L10.58 12.0057L6.99486 15.5909C6.60433 15.9814 6.60433 16.6146 6.99486 17.0051C7.38538 17.3956 8.01855 17.3956 8.40907 17.0051L11.9942 13.4199L15.5794 17.0051C15.9699 17.3956 16.6031 17.3956 16.9936 17.0051C17.3841 16.6146 17.3841 15.9814 16.9936 15.5909L13.4084 12.0057L16.9936 8.42059C17.3841 8.03007 17.3841 7.3969 16.9936 7.00638C16.603 6.61585 15.9699 6.61585 15.5794 7.00638L11.9942 10.5915L8.40907 7.00636C8.01855 6.61584 7.38538 6.61584 6.99486 7.00636Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CubeIcon.vue b/src/stories/icons/Mono/CubeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3cceaa827416e78d3e4dad342f1653e60664e934
--- /dev/null
+++ b/src/stories/icons/Mono/CubeIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11.5144 1.12584C11.8164 0.958052 12.1836 0.958052 12.4856 1.12584L21.4845 6.12522C21.4921 6.12942 21.4996 6.13372 21.5071 6.13813C21.8125 6.31781 22 6.64568 22 7V17C22 17.3632 21.8031 17.6978 21.4856 17.8742L12.4856 22.8742C12.1791 23.0445 11.8059 23.0416 11.5022 22.8673L2.51436 17.874C2.19689 17.6977 2 17.3631 2 16.9999V7C2 6.64568 2.18749 6.3177 2.49287 6.13802L2.5073 6.13784L2.51436 6.12584L11.5144 1.12584ZM12.0001 10.856L5.05923 6.99995L12 3.14396L18.9409 7L12.0001 10.856ZM4 8.69951V16.4115L11 20.3004V12.5884L4 8.69951ZM13 12.5884V20.3005L20 16.4116V8.69951L13 12.5884Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CupIcon.vue b/src/stories/icons/Mono/CupIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f39410aefa670159b7d2cd6989b6ef3afa90789
--- /dev/null
+++ b/src/stories/icons/Mono/CupIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5 4C5 2.34315 6.34315 1 8 1H15.9999C17.6568 1 19 2.34314 19 4H20C21.6569 4 23 5.34315 23 7V7.64593C23 8.87265 22.2531 9.97577 21.1142 10.4314L18.031 11.6646C17.5965 12.464 16.958 13.2715 16.0234 13.8946C15.211 14.4361 14.2124 14.8132 13 14.9467V17H15C16.6569 17 18 18.3431 18 20V21C18 22.1046 17.1046 23 16 23H8C6.89543 23 6 22.1046 6 21V20C6 18.3431 7.34315 17 9 17H11V14.9467C9.78757 14.8133 8.7889 14.4361 7.97651 13.8945C7.04188 13.2715 6.40335 12.464 5.9689 11.6646L2.88583 10.4314C1.74685 9.97577 1 8.87265 1 7.64593V7C1 5.34315 2.34315 4 4 4H5ZM5 6H4C3.44772 6 3 6.44772 3 7V7.64593C3 8.05484 3.24895 8.42255 3.62861 8.57441L5.11907 9.1706C5.05194 8.78628 5.00063 8.39214 5 8.00104L5 6ZM19 8V6H20C20.5523 6 21 6.44772 21 7V7.64593C21 8.05484 20.751 8.42255 20.3714 8.57441L18.8809 9.17062C18.9469 8.78361 19 8.39286 19 8ZM8 3C7.44772 3 7 3.44772 7 4V7.99707L7 7.99832C7 7.99996 7 8.00078 7 7.99832C7.00508 8.25761 7.03756 8.51764 7.08014 8.77311C7.16297 9.27012 7.32677 9.91751 7.6444 10.5528C7.96008 11.1842 8.4179 11.7851 9.08591 12.2305C9.74766 12.6716 10.6749 13 12 13C13.325 13 14.2522 12.6716 14.914 12.2304C15.582 11.7851 16.0398 11.1842 16.3555 10.5528C16.6732 9.9175 16.837 9.27011 16.9198 8.7731C16.9624 8.51735 16.993 8.25848 17 7.99909V4C17 3.44772 16.5522 3 15.9999 3H8ZM9 19C8.44772 19 8 19.4477 8 20V21H16V20C16 19.4477 15.5523 19 15 19H9Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CursorIcon.vue b/src/stories/icons/Mono/CursorIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47e49b27174acf08567fcfe11c584a2332f01093
--- /dev/null
+++ b/src/stories/icons/Mono/CursorIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M1.50001 4.07491C0.897091 2.46714 2.46715 0.897094 4.07491 1.50001L21.2155 7.92774C23.1217 8.64256 22.8657 11.4162 20.8609 11.77L13.1336 13.1336L11.77 20.8609C11.4162 22.8657 8.64255 23.1217 7.92774 21.2155L1.50001 4.07491ZM3.37267 3.37267L9.8004 20.5133L11.164 12.786C11.3101 11.9582 11.9582 11.3101 12.786 11.164L20.5133 9.8004L3.37267 3.37267Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DiamondIcon.vue b/src/stories/icons/Mono/DiamondIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19a08adc05a5304b75a5f2038d62782f07321f02
--- /dev/null
+++ b/src/stories/icons/Mono/DiamondIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M6.23607 1C5.09976 1 4.06097 1.64201 3.55279 2.65836L1.14806 7.46782C0.647975 8.46799 0.745665 9.66329 1.40152 10.569L9.57018 21.8495C10.7679 23.5035 13.2321 23.5035 14.4298 21.8495L22.5985 10.569C23.2543 9.66329 23.352 8.468 22.852 7.46782L20.4472 2.65836C19.939 1.64201 18.9003 1 17.7639 1H6.23607ZM5.34165 3.55279C5.51104 3.214 5.8573 3 6.23607 3H8.67428L7.24571 8H3.11804L5.34165 3.55279ZM9.32574 8L10.7543 3H13.2457L14.6743 8H9.32574ZM14.646 10H9.35397L12 18.5996L14.646 10ZM13.929 19.1312L16.7386 10H20.5412L13.929 19.1312ZM16.7543 8L15.3257 3H17.7639C18.1427 3 18.489 3.214 18.6584 3.55279L20.882 8H16.7543ZM3.4588 10H7.26143L10.071 19.1312L3.4588 10Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DiaryIcon.vue b/src/stories/icons/Mono/DiaryIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6caf5a1edf4e746c20d439068e0685ae01c0d2ae
--- /dev/null
+++ b/src/stories/icons/Mono/DiaryIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M7 8C7 6.89543 7.89543 6 9 6H15C16.1046 6 17 6.89543 17 8V10C17 11.1046 16.1046 12 15 12H9C7.89543 12 7 11.1046 7 10V8ZM9 8H15V10H9V8Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5 1C3.89543 1 3 1.89543 3 3V21C3 22.1046 3.89543 23 5 23H17C19.2091 23 21 21.2091 21 19V5C21 2.79086 19.2091 1 17 1H5ZM5 4C5 3.44772 5.44772 3 6 3H17C18.1046 3 19 3.89543 19 5V19C19 20.1046 18.1046 21 17 21H6C5.44772 21 5 20.5523 5 20V4Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DiceIcon.vue b/src/stories/icons/Mono/DiceIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd78aedd306cb04aac066e91963c93eb138bb029
--- /dev/null
+++ b/src/stories/icons/Mono/DiceIcon.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M9 8C9 8.55229 8.55229 9 8 9C7.44771 9 7 8.55229 7 8C7 7.44771 7.44771 7 8 7C8.55229 7 9 7.44771 9 8Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M5 8C5 8.55229 4.55228 9 4 9C3.44772 9 3 8.55229 3 8C3 7.44771 3.44772 7 4 7C4.55228 7 5 7.44771 5 8Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M9 4C9 4.55228 8.55229 5 8 5C7.44771 5 7 4.55228 7 4C7 3.44772 7.44771 3 8 3C8.55229 3 9 3.44772 9 4Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M4 5C4.55228 5 5 4.55228 5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M9 0C10.6569 0 12 1.34315 12 3V9C12 10.6569 10.6569 12 9 12H3C1.34315 12 0 10.6569 0 9V3C0 1.34315 1.34315 0 3 0H9ZM9 2C9.55229 2 10 2.44772 10 3V9C10 9.55229 9.55229 10 9 10H3C2.44772 10 2 9.55229 2 9V3C2 2.44772 2.44772 2 3 2H9Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M20 17C20.5523 17 21 16.5523 21 16C21 15.4477 20.5523 15 20 15C19.4477 15 19 15.4477 19 16C19 16.5523 19.4477 17 20 17Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M21 12C22.6569 12 24 13.3431 24 15V21C24 22.6569 22.6569 24 21 24H15C13.3431 24 12 22.6569 12 21V15C12 13.3431 13.3431 12 15 12H21ZM21 14C21.5523 14 22 14.4477 22 15V21C22 21.5523 21.5523 22 21 22H15C14.4477 22 14 21.5523 14 21V15C14 14.4477 14.4477 14 15 14H21Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DigIcon.vue b/src/stories/icons/Mono/DigIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ae8c3dc64b875380bcc5d33548bd38eb21999d9c
--- /dev/null
+++ b/src/stories/icons/Mono/DigIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M19.6712 1.257C19.2806 0.86648 18.6475 0.86648 18.257 1.257C17.8664 1.64753 17.8664 2.28069 18.257 2.67122L19.0983 3.5126L10.0125 12.5984L8.41422 11.0001C7.63317 10.219 6.36684 10.219 5.58579 11.0001L3.02918 13.5567C1.76017 14.8257 0.867312 16.5433 0.875174 18.4552C0.877805 19.0951 0.912494 19.7972 1.02031 20.4227C1.11795 20.9892 1.30983 21.7241 1.79291 22.2072C2.27599 22.6903 3.01093 22.8822 3.57741 22.9798C4.20292 23.0876 4.90502 23.1223 5.54494 23.1249C7.45684 23.1328 9.17438 22.2399 10.4434 20.9709L13 18.4143C13.7811 17.6333 13.7811 16.3669 13 15.5859L11.4268 14.0126L20.5126 4.92684L21.3213 5.73561C21.7119 6.12613 22.345 6.12613 22.7356 5.73561C23.1261 5.34508 23.1261 4.71192 22.7356 4.32139L19.6712 1.257ZM7.11903 15.4919L8.59832 14.0126L7.00001 12.4143L4.4434 14.9709C3.46451 15.9498 2.86995 17.1799 2.87516 18.4469C2.87758 19.0363 2.91037 19.6138 2.99124 20.083C3.03079 20.3124 3.0712 20.595 3.20771 20.7924C3.40514 20.9289 3.68766 20.9693 3.91712 21.0089C4.38634 21.0897 4.96381 21.1225 5.55316 21.1249C6.82023 21.1302 8.05029 20.5356 9.02917 19.5567L11.5858 17.0001L10.0126 15.4269L8.53327 16.9061C8.14275 17.2967 7.50957 17.2967 7.11905 16.9061C6.72852 16.5156 6.72851 15.8824 7.11903 15.4919Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DislikeIcon.vue b/src/stories/icons/Mono/DislikeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..52ad47896a1ad1e9f8535167ffc772a2feb01341
--- /dev/null
+++ b/src/stories/icons/Mono/DislikeIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11.556 22.646C12.3525 23.0443 13.3186 22.6649 13.6313 21.8311L16.193 15L20 15C21.6568 15 23 13.6569 23 12L23 4C23 2.34315 21.6568 1 20 1L5.62625 1C4.20523 1 2.97914 1.99698 2.68931 3.38814L1.02265 11.3881C0.634535 13.2511 2.05665 15 3.95959 15H9.11255L8.37409 17.2154C7.7446 19.1039 8.59952 21.1678 10.38 22.058L11.556 22.646ZM14.3203 14.2978L11.9537 20.6088L11.2744 20.2692C10.3842 19.8241 9.95671 18.7921 10.2715 17.8479L11.0099 15.6325C11.4416 14.3374 10.4777 13 9.11256 13H3.95959C3.32527 13 2.85124 12.417 2.98061 11.7961L3.14645 11L6.99998 11C7.55226 11 7.99998 10.5523 7.99998 10C7.99998 9.44772 7.55226 9.00001 6.99998 9.00001L3.56312 9.00001L3.97978 7.00001L6.99998 7.00001C7.55226 7.00001 7.99998 6.55229 7.99998 6.00001C7.99998 5.44772 7.55226 5.00001 6.99998 5.00001L4.39645 5.00001L4.64727 3.79605C4.74388 3.33233 5.15258 3 5.62625 3L16 3L16 13.0093C15.2458 13.0821 14.5903 13.5779 14.3203 14.2978ZM18 13H20C20.5523 13 21 12.5523 21 12L21 4C21 3.44772 20.5523 3 20 3L18 3L18 13Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DisplayIcon.vue b/src/stories/icons/Mono/DisplayIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..91719d88212195ec79e5d63509787616a34d953d
--- /dev/null
+++ b/src/stories/icons/Mono/DisplayIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V15C1 16.6569 2.34315 18 4 18H11V21H6C5.44772 21 5 21.4477 5 22C5 22.5523 5.44772 23 6 23H18C18.5523 23 19 22.5523 19 22C19 21.4477 18.5523 21 18 21H13V18H20C21.6569 18 23 16.6569 23 15V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V15C3 15.5523 3.44772 16 4 16H20C20.5523 16 21 15.5523 21 15V4Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DocumentAddIcon.vue b/src/stories/icons/Mono/DocumentAddIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9c7884cff69ebb2455e7c44bf4f02aebc8f186ec
--- /dev/null
+++ b/src/stories/icons/Mono/DocumentAddIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 1024 1024"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ :fill="color ?? '#000000'"
+ d="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm320 512V448h64v128h128v64H544v128h-64V640H352v-64h128z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DocumentDeleteIcon.vue b/src/stories/icons/Mono/DocumentDeleteIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..355553fa95843060704f00da67c6446d2a68046d
--- /dev/null
+++ b/src/stories/icons/Mono/DocumentDeleteIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 1024 1024"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ :fill="color ?? '#000000'"
+ d="M805.504 320 640 154.496V320h165.504zM832 384H576V128H192v768h640V384zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm308.992 546.304-90.496-90.624 45.248-45.248 90.56 90.496 90.496-90.432 45.248 45.248-90.496 90.56 90.496 90.496-45.248 45.248-90.496-90.496-90.56 90.496-45.248-45.248 90.496-90.496z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DocumentEditIcon.vue b/src/stories/icons/Mono/DocumentEditIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d462a7960806c028b6f60d91c53704e365340b0e
--- /dev/null
+++ b/src/stories/icons/Mono/DocumentEditIcon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M6.25 3.5C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H10.0293C9.92216 21.0483 10.0375 21.5732 10.3007 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H12.3358C12.7999 2 13.245 2.18437 13.5732 2.51256L19.4874 8.42678C19.8156 8.75497 20 9.20009 20 9.66421V10H19.8698C19.7592 9.99447 19.6484 9.99447 19.5378 10H14C12.8954 10 12 9.10457 12 8V3.5H6.25ZM13.5 4.56066V8C13.5 8.27614 13.7239 8.5 14 8.5H17.4393L13.5 4.56066Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M19.7133 11H19.7154C20.3 11.0003 20.8845 11.2234 21.3305 11.6695C22.2231 12.5621 22.2231 14.0093 21.3305 14.9019L15.4281 20.8043C15.084 21.1485 14.6528 21.3926 14.1806 21.5106L12.3499 21.9683C11.5538 22.1674 10.8326 21.4462 11.0317 20.6501L11.4894 18.8194C11.6074 18.3472 11.8515 17.916 12.1957 17.5719L18.0981 11.6695C18.5441 11.2234 19.1287 11.0003 19.7133 11ZM20.2699 12.7301C19.963 12.4233 19.4656 12.4233 19.1587 12.7301L13.2563 18.6325C13.1044 18.7844 12.9967 18.9748 12.9446 19.1832L12.6538 20.3462L13.8168 20.0554C14.0252 20.0033 14.2155 19.8956 14.3674 19.7437L20.2699 13.8412C20.5767 13.5344 20.5767 13.0369 20.2699 12.7301Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DocumentIcon.vue b/src/stories/icons/Mono/DocumentIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..124df228dea3554e0f5fcd89330ceb8a6ed346c6
--- /dev/null
+++ b/src/stories/icons/Mono/DocumentIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M6 1C4.34315 1 3 2.34315 3 4V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V8.82843C21 8.03278 20.6839 7.26972 20.1213 6.70711L15.2929 1.87868C14.7303 1.31607 13.9672 1 13.1716 1H6ZM5 4C5 3.44772 5.44772 3 6 3H12V8C12 9.10457 12.8954 10 14 10H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V4ZM18.5858 8L14 3.41421V8H18.5858Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DollarIcon.vue b/src/stories/icons/Mono/DollarIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..10866c472ba1e3e13c9cf2f5363329d30a4e45a2
--- /dev/null
+++ b/src/stories/icons/Mono/DollarIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 1C11.4477 1 11 1.44772 11 2V3H10C8.3642 3 7.0588 3.60369 6.1691 4.57428C5.29413 5.52878 4.875 6.77845 4.875 8C4.875 9.22155 5.29413 10.4712 6.1691 11.4257C6.33335 11.6049 6.51177 11.7716 6.70382 11.9243C7.55205 12.5986 8.6662 13 10 13H11V19H10C9.17499 19 8.62271 18.7966 8.2422 18.5429C7.85544 18.2851 7.58511 17.9342 7.39443 17.5528C7.20178 17.1675 7.10048 16.7701 7.04889 16.4606C7.02329 16.307 7.00411 16.1512 6.99999 15.9953C6.99736 15.4454 6.55059 15 6 15C5.44771 15 5 15.4477 5 16C5.00003 16.0672 5.0024 16.1317 5.01035 16.2431C5.02006 16.3791 5.039 16.5668 5.07611 16.7894C5.14952 17.2299 5.29821 17.8325 5.60557 18.4472C5.91489 19.0658 6.39456 19.7149 7.1328 20.2071C7.8773 20.7034 8.82502 21 10 21H11V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V21H14C15.6358 21 16.9412 20.3963 17.8309 19.4257C18.7059 18.4712 19.125 17.2216 19.125 16C19.125 14.7784 18.7059 13.5288 17.8309 12.5743C16.9412 11.6037 15.6358 11 14 11H13V5H14C14.825 5 15.3773 5.20338 15.7578 5.45705C16.1446 5.71489 16.4149 6.06584 16.6056 6.44721C16.7982 6.8325 16.8995 7.22989 16.9511 7.5394C16.9767 7.69303 16.9959 7.84879 17 8.00465C17.0027 8.55467 17.4494 9 18 9C18.5458 9 19 8.54436 19 7.99898C18.9999 7.93212 18.9976 7.8677 18.9896 7.75688C18.9799 7.62092 18.961 7.43322 18.9239 7.2106C18.8505 6.77011 18.7018 6.1675 18.3944 5.55279C18.0851 4.93416 17.6054 4.28511 16.8672 3.79295C16.1227 3.29662 15.175 3 14 3H13V2C13 1.44772 12.5523 1 12 1ZM11 5H10C8.8858 5 8.1287 5.39631 7.6434 5.92572C7.14337 6.47122 6.875 7.22155 6.875 8C6.875 8.77845 7.14337 9.52878 7.6434 10.0743C8.1287 10.6037 8.8858 11 10 11H11V5ZM13 13V19H14C15.1142 19 15.8713 18.6037 16.3566 18.0743C16.8566 17.5288 17.125 16.7784 17.125 16C17.125 15.2216 16.8566 14.4712 16.3566 13.9257C15.8713 13.3963 15.1142 13 14 13H13Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DotsHorizontalIcon.vue b/src/stories/icons/Mono/DotsHorizontalIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4acef683109ece4d0f91140bad4d3fb40f426d75
--- /dev/null
+++ b/src/stories/icons/Mono/DotsHorizontalIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM2.97192 12C2.97192 12.5678 3.43221 13.0281 4 13.0281C4.56779 13.0281 5.02808 12.5678 5.02808 12C5.02808 11.4322 4.56779 10.9719 4 10.9719C3.43221 10.9719 2.97192 11.4322 2.97192 12Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM10.9719 12C10.9719 12.5678 11.4322 13.0281 12 13.0281C12.5678 13.0281 13.0281 12.5678 13.0281 12C13.0281 11.4322 12.5678 10.9719 12 10.9719C11.4322 10.9719 10.9719 11.4322 10.9719 12Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M23 12C23 13.6569 21.6569 15 20 15C18.3431 15 17 13.6569 17 12C17 10.3431 18.3431 9 20 9C21.6569 9 23 10.3431 23 12ZM18.9719 12C18.9719 12.5678 19.4322 13.0281 20 13.0281C20.5678 13.0281 21.0281 12.5678 21.0281 12C21.0281 11.4322 20.5678 10.9719 20 10.9719C19.4322 10.9719 18.9719 11.4322 18.9719 12Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DotsVerticalIcon.vue b/src/stories/icons/Mono/DotsVerticalIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1ad56aff03d4c443bb0197d10d04169161a9defb
--- /dev/null
+++ b/src/stories/icons/Mono/DotsVerticalIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M15 20C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20C9 18.3431 10.3431 17 12 17C13.6569 17 15 18.3431 15 20ZM10.9719 20C10.9719 20.5678 11.4322 21.0281 12 21.0281C12.5678 21.0281 13.0281 20.5678 13.0281 20C13.0281 19.4322 12.5678 18.9719 12 18.9719C11.4322 18.9719 10.9719 19.4322 10.9719 20Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM10.9719 12C10.9719 12.5678 11.4322 13.0281 12 13.0281C12.5678 13.0281 13.0281 12.5678 13.0281 12C13.0281 11.4322 12.5678 10.9719 12 10.9719C11.4322 10.9719 10.9719 11.4322 10.9719 12Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M15 4C15 5.65685 13.6569 7 12 7C10.3431 7 9 5.65685 9 4C9 2.34315 10.3431 1 12 1C13.6569 1 15 2.34315 15 4ZM10.9719 4C10.9719 4.56779 11.4322 5.02808 12 5.02808C12.5678 5.02808 13.0281 4.56779 13.0281 4C13.0281 3.43221 12.5678 2.97192 12 2.97192C11.4322 2.97192 10.9719 3.43221 10.9719 4Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DownloadIcon.vue b/src/stories/icons/Mono/DownloadIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85cb21b873728358e5609abd8567e41420980e22
--- /dev/null
+++ b/src/stories/icons/Mono/DownloadIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M23 22C23 22.5523 22.5523 23 22 23H2C1.44772 23 1 22.5523 1 22C1 21.4477 1.44772 21 2 21H22C22.5523 21 23 21.4477 23 22Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M13.3099 18.6881C12.5581 19.3396 11.4419 19.3396 10.6901 18.6881L5.87088 14.5114C4.47179 13.2988 5.32933 11 7.18074 11L9.00001 11V3C9.00001 1.89543 9.89544 1 11 1L13 1C14.1046 1 15 1.89543 15 3L15 11H16.8193C18.6707 11 19.5282 13.2988 18.1291 14.5114L13.3099 18.6881ZM11.3451 16.6091C11.7209 16.9348 12.2791 16.9348 12.6549 16.6091L16.8193 13H14.5C13.6716 13 13 12.3284 13 11.5V3L11 3V11.5C11 12.3284 10.3284 13 9.50001 13L7.18074 13L11.3451 16.6091Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DropIcon.vue b/src/stories/icons/Mono/DropIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25781f2025d4a95314b29fe1248e89abe68ec998
--- /dev/null
+++ b/src/stories/icons/Mono/DropIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M8.99999 14C8.99999 13.4477 8.55227 13 7.99999 13C7.4477 13 6.99999 13.4477 6.99999 14C6.99999 15.3574 7.26721 16.7375 8.08236 17.7972C8.93437 18.9048 10.2571 19.5 12 19.5C12.5523 19.5 13 19.0523 13 18.5C13 17.9477 12.5523 17.5 12 17.5C10.7429 17.5 10.0656 17.0952 9.66761 16.5778C9.23276 16.0125 8.99999 15.1426 8.99999 14Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M13.4228 1.54267C12.6513 0.711988 11.348 0.712021 10.5766 1.54273C9.63287 2.55896 7.89116 4.5305 6.37916 6.77881C4.87045 9.02222 3.46953 11.5773 3.49416 14.3526C3.49633 14.5981 3.50939 14.9426 3.55218 15.3536C3.63717 16.17 3.84245 17.278 4.33361 18.4008C4.82693 19.5285 5.61868 20.6923 6.88173 21.5709C8.15052 22.4536 9.82552 23 11.9997 23C14.1739 23 15.8489 22.4536 17.1178 21.5709C18.3808 20.6923 19.1727 19.5286 19.6661 18.4009C20.1573 17.2781 20.3627 16.17 20.4477 15.3536C20.4905 14.9427 20.5036 14.5982 20.5058 14.3527C20.5306 11.5774 19.1293 9.02208 17.6206 6.77875C16.1084 4.53043 14.3666 2.55889 13.4228 1.54267ZM8.03877 7.89491C9.44577 5.80274 11.0797 3.94302 11.9997 2.94942C12.9198 3.94301 14.5539 5.80273 15.961 7.89491C17.2351 9.78932 18.5269 11.9805 18.5059 14.3348C18.5042 14.5268 18.4938 14.8074 18.4585 15.1464C18.3873 15.83 18.2176 16.722 17.8338 17.5992C17.4521 18.4715 16.8689 19.3078 15.9756 19.9291C15.0882 20.5465 13.8256 21 11.9997 21C10.1738 21 8.91129 20.5465 8.02387 19.9291C7.13071 19.3078 6.54754 18.4715 6.16596 17.5992C5.78221 16.722 5.61259 15.8301 5.54142 15.1465C5.50613 14.8074 5.49578 14.5269 5.49408 14.3349C5.4732 11.9806 6.76469 9.78944 8.03877 7.89491Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DumbbelIcon.vue b/src/stories/icons/Mono/DumbbelIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c77acd702199743750da501ca51f0688a404bc97
--- /dev/null
+++ b/src/stories/icons/Mono/DumbbelIcon.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M19.7781 1.39348C20.1686 1.00295 20.8018 1.00295 21.1923 1.39348L22.6066 2.80769C22.9971 3.19822 22.9971 3.83138 22.6066 4.22191C22.216 4.61243 21.5829 4.61243 21.1923 4.22191L19.7781 2.80769C19.3876 2.41717 19.3876 1.784 19.7781 1.39348Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M16.2425 2.10051C16.633 1.70999 17.2662 1.70999 17.6567 2.10051L21.8993 6.34315C22.2899 6.73368 22.2899 7.36684 21.8993 7.75736C21.5088 8.14789 20.8756 8.14789 20.4851 7.75736L16.2425 3.51472C15.852 3.1242 15.852 2.49103 16.2425 2.10051Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M16.9497 8.46463L8.46451 16.9498L10.5858 19.0711C10.9763 19.4616 10.9763 20.0948 10.5858 20.4853C10.1952 20.8758 9.56207 20.8758 9.17155 20.4853L3.5147 14.8284C3.12417 14.4379 3.12417 13.8048 3.51469 13.4142C3.90522 13.0237 4.53838 13.0237 4.92891 13.4142L7.05029 15.5356L15.5355 7.05041L13.4141 4.92903C13.0236 4.53851 13.0236 3.90534 13.4141 3.51482C13.8046 3.12429 14.4378 3.12429 14.8283 3.51482L20.4852 9.17167C20.8757 9.56219 20.8757 10.1954 20.4852 10.5859C20.0947 10.9764 19.4615 10.9764 19.071 10.5859L16.9497 8.46463Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M3.5146 16.2428C3.12408 15.8523 2.49091 15.8523 2.10039 16.2428C1.70986 16.6334 1.70986 17.2665 2.10039 17.6571L6.34303 21.8997C6.73355 22.2902 7.36672 22.2902 7.75724 21.8997C8.14777 21.5092 8.14777 20.876 7.75724 20.4855L3.5146 16.2428Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M2.80757 19.7782C2.41705 19.3877 1.78388 19.3877 1.39336 19.7782C1.00283 20.1688 1.00283 20.8019 1.39336 21.1925L2.80757 22.6067C3.1981 22.9972 3.83126 22.9972 4.22178 22.6067C4.61231 22.2161 4.61231 21.583 4.22178 21.1925L2.80757 19.7782Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/EarthIcon.vue b/src/stories/icons/Mono/EarthIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6592b504dfa426589a7c4c66eb151ba746718772
--- /dev/null
+++ b/src/stories/icons/Mono/EarthIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM3.11735 13.414C3.0446 12.9533 3.00683 12.4811 3.00683 12C3.00683 7.92975 5.71082 4.49105 9.42045 3.38225C9.26876 4.1948 8.92119 4.82883 8.56392 5.48056C8.49846 5.59998 8.43262 5.72008 8.36765 5.84191C8.11741 6.3111 7.8125 6.92968 7.8125 7.63281C7.8125 8.40645 8.16953 9.08375 8.79289 9.70711C9.47791 10.3921 9.61869 10.9399 9.77777 11.5589C9.80021 11.6462 9.823 11.7349 9.84774 11.8256C9.9509 12.2039 10.1151 12.7168 10.5507 13.1524C10.9866 13.5883 11.5772 13.8352 12.3039 13.9806C14.5643 14.4327 15.27 15.276 15.6056 15.9472C15.6352 16.0065 15.6909 16.2077 15.7213 16.6337C15.7495 17.0287 15.75 17.4906 15.75 18V18.0209C15.75 18.5058 15.75 19.0355 15.7838 19.5087C15.7976 19.702 15.8183 19.9137 15.855 20.1274C14.9439 20.5603 13.9484 20.8445 12.9 20.9487C12.8003 20.4939 12.6154 20.0705 12.3 19.65C11.8228 19.0138 11.0709 18.4282 10.1 17.7C9.84017 17.5051 9.76955 17.3242 9.74598 17.1091C9.71395 16.8166 9.7722 16.4839 9.86464 15.965L9.87042 15.9326C9.94741 15.5014 10.0634 14.8519 9.91598 14.2343C9.73457 13.4741 9.21019 12.9071 8.37139 12.5715C6.79661 11.9416 5.08866 12.472 3.95556 12.9878C3.65093 13.1265 3.36866 13.2729 3.11735 13.414ZM3.67505 15.4081C4.86529 18.3124 7.53119 20.4558 10.7402 20.9056C10.4744 20.5227 9.98152 20.1111 8.9 19.3C8.15983 18.7449 7.83633 18.0431 7.75787 17.3268C7.69302 16.7348 7.80144 16.1354 7.87812 15.7115L7.89565 15.6142C7.98731 15.0997 8.00826 14.8563 7.9706 14.6985L7.96922 14.6918C7.96193 14.6543 7.94243 14.554 7.6286 14.4285C6.85633 14.1196 5.81428 14.3392 4.78415 14.8081C4.35219 15.0047 3.96855 15.2241 3.67505 15.4081ZM12 3.00683C11.8255 3.00683 11.6522 3.0118 11.4802 3.0216C11.3622 4.56477 10.7424 5.68086 10.3067 6.46524C10.2441 6.57794 10.1853 6.6838 10.1324 6.78309C9.88258 7.2514 9.8125 7.47657 9.8125 7.63281C9.8125 7.71855 9.83047 7.91625 10.2071 8.29289C11.2928 9.37855 11.5515 10.4075 11.7187 11.0724C11.7391 11.1537 11.7582 11.2295 11.7773 11.2994C11.8616 11.6086 11.9162 11.6895 11.9649 11.7382C12.0134 11.7867 12.1728 11.9148 12.6961 12.0194C15.4357 12.5673 16.73 13.724 17.3944 15.0528C17.6148 15.4935 17.6841 16.0423 17.7162 16.4913C17.75 16.9645 17.75 17.4942 17.75 17.9792V18C17.75 18.3238 17.7502 18.6284 17.7576 18.9088C19.735 17.2591 20.9932 14.7765 20.9932 12C20.9932 11.8662 20.9902 11.733 20.9845 11.6006C20.2535 11.6212 19.6814 11.3344 19.2306 11.1084C18.5139 10.7494 17.8137 10.5 17 10.5C16.2483 10.5 15.6108 10.35 15.102 9.98256C14.5938 9.61549 14.3483 9.12594 14.1965 8.74639C14.11 8.52998 14.0455 8.35024 13.991 8.19815C13.8293 7.74679 13.7545 7.5382 13.4453 7.33205C12.9178 6.98037 12.5083 6.49222 12.4492 5.82227C12.3986 5.24927 12.6363 4.74129 12.7931 4.42778C12.8619 4.29017 12.9292 4.16168 12.9929 4.03999C13.1683 3.70495 13.3183 3.41848 13.4087 3.11652C12.9497 3.04432 12.4792 3.00683 12 3.00683ZM20.6571 9.55597C20.5134 9.50863 20.3335 9.42369 20.0722 9.29307L20.0672 9.29057C19.4072 8.96054 18.4861 8.5 17 8.5C16.5017 8.5 16.3267 8.4 16.273 8.36119C16.2187 8.32201 16.1517 8.24906 16.0535 8.00361C16.03 7.94484 16.0042 7.8672 15.9737 7.77553C15.8013 7.25678 15.4779 6.28341 14.5547 5.66795C14.408 5.57017 14.5089 5.46824 14.5819 5.32222C14.6169 5.25224 14.6606 5.17129 14.7098 5.08013C14.8964 4.73435 15.1623 4.24166 15.333 3.64469C17.9082 4.67287 19.8967 6.8571 20.6571 9.55597Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/EditIcon.vue b/src/stories/icons/Mono/EditIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..506a59afeb17ef74b1c9aca236f81510b3c32dcb
--- /dev/null
+++ b/src/stories/icons/Mono/EditIcon.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ >
+ <path
+ :fill="color ?? '#000000'"
+ fill-rule="evenodd"
+ d="M15.747 2.97a.864.864 0 011.177 1.265l-7.904 7.37-1.516.194.653-1.785 7.59-7.044zm2.639-1.366a2.864 2.864 0 00-4-.1L6.62 8.71a1 1 0 00-.26.39l-1.3 3.556a1 1 0 001.067 1.335l3.467-.445a1 1 0 00.555-.26l8.139-7.59a2.864 2.864 0 00.098-4.093zM3.1 3.007c0-.001 0-.003.002-.005A.013.013 0 013.106 3H8a1 1 0 100-2H3.108a2.009 2.009 0 00-2 2.19C1.256 4.814 1.5 7.848 1.5 10c0 2.153-.245 5.187-.391 6.81A2.009 2.009 0 003.108 19H17c1.103 0 2-.892 2-1.999V12a1 1 0 10-2 0v5H3.106l-.003-.002a.012.012 0 01-.002-.005v-.004c.146-1.62.399-4.735.399-6.989 0-2.254-.253-5.37-.4-6.99v-.003zM17 17c-.001 0 0 0 0 0zm0 0z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/EncyclopediaIcon.vue b/src/stories/icons/Mono/EncyclopediaIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6585958fc495e69b33cf8c5930ea8ba9cd7d2f5
--- /dev/null
+++ b/src/stories/icons/Mono/EncyclopediaIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M19 23H7C4.27504 23 2 20.7055 2 18V6C2 3.23858 4.23858 1 7 1H19C20.6569 1 22 2.34315 22 4V20C22 21.6569 20.6569 23 19 23ZM7 3C5.34315 3 4 4.34315 4 6V14.9996C4.83566 14.3719 5.87439 14 7 14H19C19.3506 14 19.6872 14.0602 20 14.1707V4C20 3.44772 19.5523 3 19 3H18V9C18 9.3688 17.797 9.70765 17.4719 9.88167C17.1467 10.0557 16.7522 10.0366 16.4453 9.83205L14 8.20185L11.5547 9.83205C11.2478 10.0366 10.8533 10.0557 10.5281 9.88167C10.203 9.70765 10 9.3688 10 9V3H7ZM12 3H16V7.13148L14.5547 6.16795C14.2188 5.94402 13.7812 5.94402 13.4453 6.16795L12 7.13148V3ZM19 16C19.5523 16 20 16.4477 20 17V20C20 20.5523 19.5523 21 19 21H7C5.5135 21 4.04148 19.9162 4.04148 18.5C4.04148 17.0532 5.5135 16 7 16H19Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ExitIcon.vue b/src/stories/icons/Mono/ExitIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..092dd702256f3ce0f1b3fadd0c92dda4fb220426
--- /dev/null
+++ b/src/stories/icons/Mono/ExitIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M9.70725 2.4087C9 3.03569 9 4.18259 9 6.4764V17.5236C9 19.8174 9 20.9643 9.70725 21.5913C10.4145 22.2183 11.4955 22.0297 13.6576 21.6526L15.9864 21.2465C18.3809 20.8288 19.5781 20.62 20.2891 19.7417C21 18.8635 21 17.5933 21 15.0529V8.94711C21 6.40671 21 5.13652 20.2891 4.25826C19.5781 3.37999 18.3809 3.17118 15.9864 2.75354L13.6576 2.34736C11.4955 1.97026 10.4145 1.78171 9.70725 2.4087ZM12 10.1686C12.4142 10.1686 12.75 10.52 12.75 10.9535V13.0465C12.75 13.48 12.4142 13.8314 12 13.8314C11.5858 13.8314 11.25 13.48 11.25 13.0465V10.9535C11.25 10.52 11.5858 10.1686 12 10.1686Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M7.54717 4.5C5.48889 4.503 4.41599 4.54826 3.73223 5.23202C3 5.96425 3 7.14276 3 9.49979V14.4998C3 16.8568 3 18.0353 3.73223 18.7676C4.41599 19.4513 5.48889 19.4966 7.54717 19.4996C7.49985 18.8763 7.49992 18.1557 7.50001 17.3768V6.6227C7.49992 5.84388 7.49985 5.1233 7.54717 4.5Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/EyeIcon.vue b/src/stories/icons/Mono/EyeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cf92eec82328b39f519b85b9f66f6f3ec170af57
--- /dev/null
+++ b/src/stories/icons/Mono/EyeIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11.9944 15.5C13.9274 15.5 15.4944 13.933 15.4944 12C15.4944 10.067 13.9274 8.5 11.9944 8.5C10.0614 8.5 8.49439 10.067 8.49439 12C8.49439 13.933 10.0614 15.5 11.9944 15.5ZM11.9944 13.4944C11.1691 13.4944 10.5 12.8253 10.5 12C10.5 11.1747 11.1691 10.5056 11.9944 10.5056C12.8197 10.5056 13.4888 11.1747 13.4888 12C13.4888 12.8253 12.8197 13.4944 11.9944 13.4944Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 5C7.18879 5 3.9167 7.60905 2.1893 9.47978C0.857392 10.9222 0.857393 13.0778 2.1893 14.5202C3.9167 16.391 7.18879 19 12 19C16.8112 19 20.0833 16.391 21.8107 14.5202C23.1426 13.0778 23.1426 10.9222 21.8107 9.47978C20.0833 7.60905 16.8112 5 12 5ZM3.65868 10.8366C5.18832 9.18002 7.9669 7 12 7C16.0331 7 18.8117 9.18002 20.3413 10.8366C20.9657 11.5128 20.9657 12.4872 20.3413 13.1634C18.8117 14.82 16.0331 17 12 17C7.9669 17 5.18832 14.82 3.65868 13.1634C3.03426 12.4872 3.03426 11.5128 3.65868 10.8366Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FeedbackIcon.vue b/src/stories/icons/Mono/FeedbackIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..089ff8c5e42f3116e7acb3bf99de018336bb0e6a
--- /dev/null
+++ b/src/stories/icons/Mono/FeedbackIcon.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M16 1C17.6569 1 19 2.34315 19 4C19 4.55228 18.5523 5 18 5C17.4477 5 17 4.55228 17 4C17 3.44772 16.5523 3 16 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H16C16.5523 21 17 20.5523 17 20V19C17 18.4477 17.4477 18 18 18C18.5523 18 19 18.4477 19 19V20C19 21.6569 17.6569 23 16 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H16Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M20.7991 8.20087C20.4993 7.90104 20.0132 7.90104 19.7133 8.20087L11.9166 15.9977C11.7692 16.145 11.6715 16.3348 11.6373 16.5404L11.4728 17.5272L12.4596 17.3627C12.6652 17.3285 12.855 17.2308 13.0023 17.0835L20.7991 9.28666C21.099 8.98682 21.099 8.5007 20.7991 8.20087ZM18.2991 6.78666C19.38 5.70578 21.1325 5.70577 22.2134 6.78665C23.2942 7.86754 23.2942 9.61999 22.2134 10.7009L14.4166 18.4977C13.9744 18.9398 13.4052 19.2327 12.7884 19.3355L11.8016 19.5C10.448 19.7256 9.2744 18.5521 9.50001 17.1984L9.66448 16.2116C9.76728 15.5948 10.0602 15.0256 10.5023 14.5834L18.2991 6.78666Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M5 7C5 6.44772 5.44772 6 6 6H14C14.5523 6 15 6.44772 15 7C15 7.55228 14.5523 8 14 8H6C5.44772 8 5 7.55228 5 7Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M5 11C5 10.4477 5.44772 10 6 10H10C10.5523 10 11 10.4477 11 11C11 11.5523 10.5523 12 10 12H6C5.44772 12 5 11.5523 5 11Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M5 15C5 14.4477 5.44772 14 6 14H7C7.55228 14 8 14.4477 8 15C8 15.5523 7.55228 16 7 16H6C5.44772 16 5 15.5523 5 15Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FilterIcon.vue b/src/stories/icons/Mono/FilterIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f94447137de48b9f960ba9c4f9e36495fdbd86d
--- /dev/null
+++ b/src/stories/icons/Mono/FilterIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M4.2673 6.24223C2.20553 4.40955 3.50184 1 6.26039 1H17.7396C20.4981 1 21.7945 4.40955 19.7327 6.24223L15.3356 10.1507C15.1221 10.3405 15 10.6125 15 10.8981V21.0858C15 22.8676 12.8457 23.7599 11.5858 22.5L9.58578 20.5C9.21071 20.1249 8.99999 19.6162 8.99999 19.0858V10.8981C8.99999 10.6125 8.87785 10.3405 8.66436 10.1507L4.2673 6.24223ZM6.26039 3C5.34088 3 4.90877 4.13652 5.59603 4.74741L9.99309 8.6559C10.6336 9.22521 11 10.0412 11 10.8981V19.0858L13 21.0858V10.8981C13 10.0412 13.3664 9.22521 14.0069 8.6559L18.404 4.74741C19.0912 4.13652 18.6591 3 17.7396 3H6.26039Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FingerprintIcon.vue b/src/stories/icons/Mono/FingerprintIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e3ef0ded3be79f12572693467ae4149c2c64113
--- /dev/null
+++ b/src/stories/icons/Mono/FingerprintIcon.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M17.1268 2.15028C17.6261 2.38624 17.7846 3.00768 17.5079 3.48565C17.2312 3.96362 16.6178 4.12728 16.1146 3.89974C15.03 3.40935 13.8639 3.11566 12.6709 3.03534C11.1445 2.93257 9.61495 3.18183 8.20017 3.76389C6.78538 4.34594 5.52323 5.24524 4.51108 6.39239C3.72001 7.28897 3.09818 8.31822 2.67268 9.42988C2.47526 9.94568 1.92433 10.261 1.39138 10.1161C0.858439 9.97127 0.533708 9.41823 0.722442 8.89919C1.23443 7.49117 2.00666 6.18858 3.00179 5.06072C4.21793 3.68238 5.73445 2.60184 7.43437 1.90248C9.13428 1.20312 10.9721 0.903626 12.8061 1.02711C14.3068 1.12815 15.7722 1.5102 17.1268 2.15028Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M20.0201 8.91621C19.4756 7.84688 18.7228 6.89722 17.8059 6.12311C16.889 5.349 15.8265 4.76607 14.681 4.40861C13.5355 4.05114 12.3301 3.92636 11.1357 4.0416C9.94123 4.15684 8.7819 4.50978 7.72587 5.07966C6.66984 5.64954 5.73843 6.42484 4.98644 7.35997C4.23444 8.2951 3.67705 9.37117 3.34704 10.5249C3.18538 11.0901 3.07988 11.6683 3.03121 12.2511C3.01084 12.3307 3 12.4141 3 12.5V17.3332C3 18.1576 2.79646 18.6456 2.6425 18.9022C2.53296 19.0847 2.43609 19.1713 2.41696 19.1875C1.98077 19.5002 1.86799 20.1048 2.16796 20.5547C2.47432 21.0142 3.09519 21.1384 3.55471 20.832C3.63204 20.7804 3.72468 20.7104 3.86337 20.5717C4.00971 20.4253 4.1868 20.2156 4.3575 19.9311C4.70354 19.3544 5 18.509 5 17.3332V12.8341C5.01408 12.2399 5.10381 11.6485 5.26803 11.0744C5.52478 10.1768 5.95843 9.33961 6.54348 8.61208C7.12852 7.88455 7.85315 7.28137 8.67474 6.83801C9.49633 6.39464 10.3983 6.12006 11.3276 6.0304C12.2568 5.94074 13.1946 6.03782 14.0858 6.31593C14.977 6.59404 15.8036 7.04755 16.517 7.64981C17.2303 8.25206 17.816 8.99089 18.2396 9.82283C18.4483 10.2326 18.6155 10.6608 18.7396 11.1012C19.0927 12.59 19.2646 13.5941 19.3135 14.6704C19.3722 15.9606 19.2562 17.388 19.005 19.9005C18.95 20.45 19.351 20.9401 19.9005 20.995C20.45 21.05 20.9401 20.649 20.995 20.0995C21.2438 17.6119 21.3778 16.0394 21.3115 14.5796C21.2632 13.5175 21.11 12.5324 20.841 11.3158C20.7991 11.0956 20.7489 10.8771 20.6907 10.6608C20.5353 10.0048 20.3195 9.50404 20.0201 8.91621Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M1.17257 11.0106C0.634077 10.9117 0.113017 11.268 0.0588556 11.8128C-0.081407 13.2237 0.0295143 14.6485 0.386451 16.0207C0.52428 16.5506 1.09421 16.822 1.6109 16.6409C2.1276 16.4598 2.39451 15.8948 2.26536 15.3628C2.01211 14.3194 1.92824 13.242 2.01696 12.1721C2.06221 11.6264 1.71107 11.1096 1.17257 11.0106Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M23.9985 12.8083C24.0072 13.3555 23.5308 13.7691 22.9847 13.7327C22.4387 13.6963 22.0308 13.2234 22.0131 12.6764C21.9681 11.2865 21.6341 9.91726 21.0282 8.65752C20.4222 7.39777 19.561 6.28215 18.5032 5.37942C18.0869 5.02419 17.9721 4.41027 18.2845 3.96096C18.5969 3.51165 19.2174 3.3976 19.6395 3.74597C20.9753 4.84876 22.0598 6.23042 22.814 7.79852C23.5683 9.36662 23.9708 11.0763 23.9985 12.8083Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M17.9942 13.2638C17.9699 13.8156 17.4295 14.161 16.8895 14.0455L16.536 13.9699C15.9959 13.8544 15.6665 13.3178 15.6311 12.7666C15.6174 12.5535 15.5849 12.3414 15.5337 12.1327C15.4026 11.5988 15.1523 11.1015 14.8015 10.6782C14.4507 10.255 14.0086 9.91668 13.5083 9.68879C13.008 9.46091 12.4626 9.34935 11.913 9.36249C11.3634 9.37564 10.8239 9.51315 10.3351 9.76469C9.84631 10.0162 9.42084 10.3753 9.09069 10.8148C8.76054 11.2544 8.53428 11.7631 8.42891 12.3026C8.38773 12.5135 8.36543 12.727 8.36194 12.9405C8.35291 13.4927 8.04949 14.0445 7.51555 14.1857L7.16611 14.2781C6.63217 14.4192 6.07591 14.1001 6.02528 13.5501C5.97314 12.9839 6.00161 12.4114 6.11124 11.85C6.28499 10.9603 6.65809 10.1215 7.20252 9.39665C7.74694 8.6718 8.44854 8.07974 9.25461 7.66495C10.0607 7.25015 10.9503 7.02339 11.8565 7.00172C12.7628 6.98004 13.6622 7.164 14.4872 7.53979C15.3122 7.91557 16.0413 8.47341 16.6197 9.1714C17.1982 9.86939 17.611 10.6894 17.827 11.5698C17.9634 12.1253 18.0192 12.6958 17.9942 13.2638Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M8 16.5C8 15.9477 7.55229 15.5 7 15.5C6.44772 15.5 6 15.9477 6 16.5C6 18.1048 5.65647 19.3538 5.32153 20.1911C5.15388 20.6102 4.98845 20.926 4.86959 21.1307C4.81545 21.2239 4.75944 21.3168 4.69662 21.4045C4.36925 21.8461 4.45969 22.4698 4.9 22.8C5.34183 23.1314 5.96863 23.0418 6.3 22.6C6.40836 22.4507 6.50656 22.2944 6.59917 22.1349C6.76156 21.8553 6.97112 21.4523 7.17848 20.9339C7.59354 19.8962 8 18.3952 8 16.5Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M17 15.5C17.5523 15.5 18 15.9477 18 16.5C18 18.2976 17.8716 19.7168 17.7412 20.6947C17.676 21.1836 17.6103 21.5623 17.5599 21.8228C17.5328 21.9629 17.5049 22.1032 17.4704 22.2417C17.3364 22.7775 16.7933 23.1041 16.2575 22.9701C15.7222 22.8363 15.3965 22.2943 15.5295 21.759C15.5555 21.6545 15.5759 21.5484 15.5963 21.4428C15.6397 21.219 15.699 20.8789 15.7588 20.4303C15.8784 19.5332 16 18.2024 16 16.5C16 15.9477 16.4477 15.5 17 15.5Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M11.8239 12.4476C12.5509 12.1987 12.6356 12.8392 12.7294 13.4601C12.9398 14.8536 12.7861 17.0747 12.5049 19.9012C12.4502 20.4507 12.8514 20.9406 13.401 20.9953C13.9506 21.0499 14.4404 20.6487 14.4951 20.0992C14.7695 17.3408 14.9622 14.8516 14.7069 13.1614C14.5821 12.3346 14.3206 11.4669 13.6907 10.9075C12.9687 10.2661 12.0495 10.2564 11.1761 10.5555C10.7476 10.7022 10.3575 10.9081 10.0434 11.2153C9.71867 11.5328 9.52989 11.9048 9.42805 12.2925C9.33149 12.6602 9.31356 13.0409 9.31671 13.3918C9.31983 13.7399 9.34613 14.1377 9.36662 14.5245C9.4486 16.0716 9.49899 18.2972 8.08086 21.6062C7.8633 22.1138 8.09845 22.7017 8.60608 22.9192C9.11371 23.1368 9.70159 22.9016 9.91915 22.394C11.501 18.703 11.455 16.1403 11.3638 14.4187C11.341 13.9885 11.3192 13.6637 11.3166 13.3739C11.3125 12.9089 11.3453 12.6115 11.8239 12.4476Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FireIcon.vue b/src/stories/icons/Mono/FireIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e40c6cd8f8adf60f036af06ce1261037e4c8ded4
--- /dev/null
+++ b/src/stories/icons/Mono/FireIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M10.0284 1.11813C9.69728 1.2952 9.53443 1.61638 9.49957 1.97965C9.48456 2.15538 9.46201 2.32986 9.43136 2.50363C9.3663 2.87248 9.24303 3.3937 9.01205 3.98313C8.5513 5.15891 7.67023 6.58926 5.96985 7.65195C3.57358 9.14956 2.68473 12.5146 3.06456 15.527C3.45234 18.6026 5.20871 21.7903 8.68375 22.9486C9.03 23.0641 9.41163 22.9817 9.67942 22.7337C10.0071 22.4303 10.0238 22.0282 9.94052 21.6223C9.87941 21.3244 9.74999 20.5785 9.74999 19.6875C9.74999 19.3992 9.76332 19.1034 9.79413 18.8068C10.3282 20.031 11.0522 20.9238 11.7758 21.5623C12.8522 22.5121 13.8694 22.8574 14.1722 22.9466C14.402 23.0143 14.6462 23.0185 14.8712 22.9284C17.5283 21.8656 19.2011 20.4232 20.1356 18.7742C21.068 17.1288 21.1993 15.3939 20.9907 13.8648C20.7833 12.3436 20.2354 10.9849 19.7537 10.0215C19.3894 9.29292 19.0534 8.77091 18.8992 8.54242C18.7101 8.26241 18.4637 8.04626 18.1128 8.00636C17.8332 7.97456 17.5531 8.06207 17.3413 8.24739L15.7763 9.61686C15.9107 7.44482 15.1466 5.61996 14.1982 4.24472C13.5095 3.24609 12.7237 2.47913 12.1151 1.96354C11.8094 1.70448 11.5443 1.50549 11.3525 1.36923C11.2564 1.30103 11.1784 1.24831 11.1224 1.21142C10.7908 0.99291 10.3931 0.923125 10.0284 1.11813ZM7.76396 20.256C7.75511 20.0744 7.74999 19.8842 7.74999 19.6875C7.75 18.6347 7.89677 17.3059 8.47802 16.0708C8.67271 15.6572 8.91614 15.254 9.21914 14.8753C9.47408 14.5566 9.89709 14.4248 10.2879 14.5423C10.6787 14.6598 10.959 15.003 10.9959 15.4094C11.2221 17.8977 12.2225 19.2892 13.099 20.0626C13.5469 20.4579 13.979 20.7056 14.292 20.8525C15.5 20.9999 17.8849 18.6892 18.3955 17.7882C19.0569 16.6211 19.1756 15.356 19.0091 14.1351C18.8146 12.7092 18.2304 11.3897 17.7656 10.5337L14.6585 13.2525C14.3033 13.5634 13.779 13.5835 13.401 13.3008C13.023 13.018 12.8942 12.5095 13.092 12.0809C14.4081 9.22933 13.655 6.97987 12.5518 5.38019C12.1138 4.74521 11.6209 4.21649 11.18 3.80695C11.0999 4.088 10.9997 4.39262 10.8742 4.71284C10.696 5.16755 10.4662 5.65531 10.1704 6.15187C9.50801 7.26379 8.51483 8.41987 7.02982 9.34797C5.57752 10.2556 4.71646 12.6406 5.04885 15.2768C5.29944 17.2643 6.20241 19.1244 7.76396 20.256Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FlagIcon.vue b/src/stories/icons/Mono/FlagIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..149ce0ea35fa41bdfc8fd5b796f555a5d83929e8
--- /dev/null
+++ b/src/stories/icons/Mono/FlagIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5 1C4.44772 1 4 1.44772 4 2V22C4 22.5523 4.44772 23 5 23C5.55228 23 6 22.5523 6 22V14H19C19.3603 14 19.6927 13.8062 19.8702 13.4927C20.0477 13.1792 20.0429 12.7944 19.8575 12.4855L17.1662 8L19.8575 3.5145C20.0429 3.20556 20.0477 2.82081 19.8702 2.5073C19.6927 2.19379 19.3603 2 19 2L6 2C6 1.44772 5.55228 1 5 1ZM6 4V12H17.2338L15.1425 8.5145C14.9525 8.19781 14.9525 7.80219 15.1425 7.4855L17.2338 4H6Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FlashIcon.vue b/src/stories/icons/Mono/FlashIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2608f6ee0d4a54238425b94b939eba74b73eb07
--- /dev/null
+++ b/src/stories/icons/Mono/FlashIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5.66493 2.74199C5.99503 1.70455 6.95855 1 8.04724 1H13.1756C14.9704 1 16.1805 2.83513 15.4735 4.4848L13.967 8H18.2405C20.4882 8 21.5942 10.7352 19.978 12.2975L9.43055 22.4934C8.25327 23.6314 6.36431 22.329 7.0093 20.824L9.93388 14H5.50179C3.80978 14 2.60645 12.3544 3.11948 10.742L5.66493 2.74199ZM8.04724 3C7.82951 3 7.6368 3.14091 7.57078 3.3484L5.02533 11.3484C4.92272 11.6709 5.16339 12 5.50179 12H11.1471C12.0086 12 12.5894 12.8809 12.2501 13.6727L9.82561 19.3298L18.588 10.8595C18.9112 10.547 18.69 10 18.2405 10H12.7537C11.8922 10 11.3114 9.11914 11.6508 8.3273L13.6352 3.69696C13.7766 3.36703 13.5346 3 13.1756 3H8.04724Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FlashlightIcon.vue b/src/stories/icons/Mono/FlashlightIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b56efc182a9923be54c3be5b4df2c08bb717bca
--- /dev/null
+++ b/src/stories/icons/Mono/FlashlightIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5 4C5 2.34315 6.34315 1 8 1H16C17.6569 1 19 2.34315 19 4V5.33333C19 5.98244 18.7895 6.61404 18.4 7.13333L16 10.3333V20C16 21.6569 14.6569 23 13 23H11C9.34315 23 8 21.6569 8 20V10.3333L5.6 7.13333C5.21053 6.61404 5 5.98244 5 5.33333V4ZM8 3C7.44772 3 7 3.44772 7 4H17C17 3.44772 16.5523 3 16 3H8ZM9.6 9.13333L7.25 6H16.75L14.4 9.13333C14.1404 9.47952 14 9.90059 14 10.3333V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V10.3333C10 9.90059 9.85964 9.47952 9.6 9.13333Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FolderLockIcon.vue b/src/stories/icons/Mono/FolderLockIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83cc1a221c055472710df2b60f1a7fa72146ac91
--- /dev/null
+++ b/src/stories/icons/Mono/FolderLockIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M1 4C1 2.34315 2.34315 1 4 1H7.76393C8.90025 1 9.93904 1.64201 10.4472 2.65836L11.3416 4.44721C11.511 4.786 11.8573 5 12.2361 5H20C21.6569 5 23 6.34315 23 8V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4ZM4 3C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V8C21 7.44772 20.5523 7 20 7H12.2361C11.0998 7 10.061 6.35799 9.55279 5.34164L8.65836 3.55279C8.48897 3.214 8.1427 3 7.76393 3H4Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M8.96182 13.0007C8.9616 12.9928 8.9614 12.9849 8.96121 12.9769C8.95231 12.6032 8.96882 12.0812 9.08469 11.5405C9.1987 11.0084 9.42623 10.3766 9.90001 9.86642C10.4037 9.32402 11.1116 9 12 9C12.8884 9 13.5963 9.32402 14.1 9.86642C14.5737 10.3766 14.8013 11.0084 14.9153 11.5405C15.0312 12.0812 15.0477 12.6033 15.0388 12.9769C15.0386 12.9849 15.0384 12.9928 15.0382 13.0007C15.5728 13.0208 16 13.4605 16 14V18C16 18.5523 15.5523 19 15 19H9C8.44772 19 8 18.5523 8 18V14C8 13.4605 8.42723 13.0208 8.96182 13.0007ZM13.0372 13C13.038 12.9772 13.0388 12.9537 13.0393 12.9293C13.0461 12.6467 13.0313 12.2938 12.9597 11.9595C12.8862 11.6166 12.77 11.3734 12.6344 11.2273C12.5287 11.1135 12.3616 11 12 11C11.6384 11 11.4713 11.1135 11.3656 11.2273C11.23 11.3734 11.1138 11.6166 11.0403 11.9595C10.9687 12.2938 10.9539 12.6468 10.9606 12.9293C10.9612 12.9537 10.962 12.9772 10.9628 13H13.0372Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FrameIcon.vue b/src/stories/icons/Mono/FrameIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a4a721bfc1dd5f90d01d01e164d7ec4110640cd1
--- /dev/null
+++ b/src/stories/icons/Mono/FrameIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M7 1C6.44775 1 6 1.44775 6 2V6H2C1.44775 6 1 6.44775 1 7C1 7.55225 1.44775 8 2 8H6V16H2C1.44775 16 1 16.4478 1 17C1 17.5522 1.44775 18 2 18H6V22C6 22.5522 6.44775 23 7 23C7.55225 23 8 22.5522 8 22V18H16V22C16 22.5522 16.4478 23 17 23C17.5522 23 18 22.5522 18 22V18H22C22.5522 18 23 17.5522 23 17C23 16.4478 22.5522 16 22 16H18V8H22C22.5522 8 23 7.55225 23 7C23 6.44775 22.5522 6 22 6H18V2C18 1.44775 17.5522 1 17 1C16.4478 1 16 1.44775 16 2V6H8V2C8 1.44775 7.55225 1 7 1ZM8 8V16H16V8H8Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FullScreenIcon.vue b/src/stories/icons/Mono/FullScreenIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..592854ca34a2afa57e8e72c980cb0070aca75bba
--- /dev/null
+++ b/src/stories/icons/Mono/FullScreenIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M23 4C23 2.34315 21.6569 1 20 1H16C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3H20C20.5523 3 21 3.44772 21 4V8C21 8.55228 21.4477 9 22 9C22.5523 9 23 8.55228 23 8V4Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M23 16C23 15.4477 22.5523 15 22 15C21.4477 15 21 15.4477 21 16V20C21 20.5523 20.5523 21 20 21H16C15.4477 21 15 21.4477 15 22C15 22.5523 15.4477 23 16 23H20C21.6569 23 23 21.6569 23 20V16Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M4 21H8C8.55228 21 9 21.4477 9 22C9 22.5523 8.55228 23 8 23H4C2.34315 23 1 21.6569 1 20V16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16V20C3 20.5523 3.44772 21 4 21Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M1 8C1 8.55228 1.44772 9 2 9C2.55228 9 3 8.55228 3 8L3 4C3 3.44772 3.44772 3 4 3H8C8.55228 3 9 2.55228 9 2C9 1.44772 8.55228 1 8 1H4C2.34315 1 1 2.34315 1 4V8Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/GameControllerIcon.vue b/src/stories/icons/Mono/GameControllerIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e1f7e6c080954ee4d29f2f1dd5fc7d825573c0b
--- /dev/null
+++ b/src/stories/icons/Mono/GameControllerIcon.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M7 6C7 5.44772 7.44771 5 8 5C8.55228 5 9 5.44772 9 6V7H10C10.5523 7 11 7.44771 11 8C11 8.55228 10.5523 9 10 9H9V10C9 10.5523 8.55228 11 8 11C7.44771 11 7 10.5523 7 10V9H6C5.44771 9 5 8.55229 5 8C5 7.44771 5.44771 7 6 7H7V6Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M17 6C17 6.55229 16.5523 7 16 7C15.4477 7 15 6.55229 15 6C15 5.44772 15.4477 5 16 5C16.5523 5 17 5.44772 17 6Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M16 11C16.5523 11 17 10.5523 17 10C17 9.44771 16.5523 9 16 9C15.4477 9 15 9.44771 15 10C15 10.5523 15.4477 11 16 11Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M19 8C19 8.55229 18.5523 9 18 9C17.4477 9 17 8.55229 17 8C17 7.44771 17.4477 7 18 7C18.5523 7 19 7.44771 19 8Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M14 9C14.5523 9 15 8.55229 15 8C15 7.44771 14.5523 7 14 7C13.4477 7 13 7.44771 13 8C13 8.55229 13.4477 9 14 9Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M2.17856 3.46413C2.7668 1.72817 4.47823 1 5.99997 1H18C19.5217 1 21.2331 1.72817 21.8214 3.46411C22.5987 5.75813 22.9381 9.03747 23.0762 12.1306C23.2157 15.2519 23.1537 18.2926 23.0858 20.165C23.0275 21.7748 21.6987 23 20.1211 23H18.5615C17.1849 23 15.985 22.0631 15.6511 20.7276L14.4086 15.7575C14.2973 15.3123 13.8973 15 13.4384 15H10.5615C10.1026 15 9.70266 15.3123 9.59137 15.7575L8.34884 20.7276C8.01496 22.0631 6.81501 23 5.43841 23H3.87886C2.30118 23 0.972467 21.7748 0.914126 20.165C0.846263 18.2926 0.784238 15.2519 0.923689 12.1306C1.06188 9.03748 1.40122 5.75815 2.17856 3.46413ZM5.99997 3C5.00364 3 4.29265 3.45709 4.07276 4.10599C3.39318 6.11152 3.05905 9.14533 2.9217 12.2198C2.7856 15.2661 2.84594 18.2475 2.91281 20.0926C2.93098 20.5937 3.34429 21 3.87886 21H5.43841C5.89728 21 6.29726 20.6877 6.40855 20.2425L7.65109 15.2724C7.98496 13.9369 9.18491 13 10.5615 13H13.4384C14.815 13 16.015 13.9369 16.3488 15.2724L17.5914 20.2425C17.7027 20.6877 18.1026 21 18.5615 21H20.1211C20.6556 21 21.0689 20.5937 21.0871 20.0926C21.154 18.2475 21.2143 15.2661 21.0782 12.2198C20.9409 9.14532 20.6068 6.11151 19.9272 4.10598C19.7073 3.45708 18.9963 3 18 3H5.99997Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/GiftIcon.vue b/src/stories/icons/Mono/GiftIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eccf30de6eab465ad98dc74a44a7352c013ed051
--- /dev/null
+++ b/src/stories/icons/Mono/GiftIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5.12702 6C4.97689 5.41856 4.95943 4.81002 5.07686 4.21964C5.20519 3.57448 5.49065 2.97092 5.90796 2.46243C6.32527 1.95394 6.86154 1.55621 7.46927 1.30448C8.077 1.05275 8.73743 0.954786 9.39207 1.01926C10.0467 1.08374 10.6753 1.30867 11.2223 1.67412C11.5109 1.86698 11.7721 2.09584 12 2.35425C12.2125 2.11335 12.4539 1.89804 12.7197 1.7136C13.2506 1.34528 13.8627 1.11103 14.5038 1.03089C15.145 0.95075 15.7959 1.0271 16.4011 1.25342C17.0063 1.47973 17.5476 1.84928 17.9788 2.33043C18.41 2.81159 18.7183 3.39004 18.8772 4.0163C19.0361 4.64256 19.0409 5.29799 18.8912 5.92652C18.8854 5.95109 18.8793 5.97558 18.873 6H19C20.6569 6 22 7.34315 22 9V10C22 11.3062 21.1652 12.4175 20 12.8293V20C20 21.6569 18.6569 23 17 23H7C5.34315 23 4 21.6569 4 20V12.8293C2.83481 12.4175 2 11.3062 2 10V9C2 7.34315 3.34315 6 5 6H5.12702ZM10.7528 4.06311C10.9068 4.3512 10.9999 4.6728 11 4.99947V6H7.28241C7.20504 5.86711 7.14307 5.7252 7.09809 5.57694C7.00322 5.26417 6.98694 4.93283 7.0507 4.61226C7.11447 4.2917 7.2563 3.99181 7.46365 3.73915C7.671 3.4865 7.93746 3.28888 8.23942 3.1638C8.54139 3.03872 8.86954 2.99005 9.19481 3.02208C9.52008 3.05412 9.83243 3.16588 10.1042 3.34747C10.376 3.52905 10.5987 3.77485 10.7528 4.06311ZM13 21H17C17.5523 21 18 20.5523 18 20V13H13V21ZM11 13V21H7C6.44772 21 6 20.5523 6 20V13H11ZM13 11H19C19.5523 11 20 10.5523 20 10V9C20 8.44772 19.5523 8 19 8H13V11ZM11 8V11H5C4.44772 11 4 10.5523 4 10V9C4 8.44772 4.44772 8 5 8H11ZM13 6H16.7176C16.8153 5.83225 16.8882 5.65051 16.9334 5.46036C17.0078 5.14806 17.0054 4.8224 16.9265 4.51123C16.8475 4.20006 16.6944 3.91264 16.4801 3.67357C16.2658 3.43449 15.9969 3.25088 15.6962 3.13843C15.3955 3.02598 15.072 2.98804 14.7535 3.02786C14.4349 3.06768 14.1308 3.18407 13.867 3.36708C13.6032 3.55009 13.3877 3.79427 13.2389 4.07873C13.0903 4.3629 13.0001 4.6793 13 5V6Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/GlassesIcon.vue b/src/stories/icons/Mono/GlassesIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36e6e4c2f291342f7c2dbf60085a1f69ce623f3f
--- /dev/null
+++ b/src/stories/icons/Mono/GlassesIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M5.44152 5.00024C5.00819 5.00024 4.63559 5.27423 4.50847 5.67256C4.12006 6.88964 3.54128 8.7533 3.03552 10.582C3.77685 10.2098 4.61396 10.0002 5.5 10.0002C8.08018 10.0002 10.2454 11.7769 10.839 14.1737C11.1739 14.0666 11.5598 14.0002 12 14.0002C12.4402 14.0002 12.8261 14.0666 13.161 14.1737C13.7546 11.7769 15.9198 10.0002 18.5 10.0002C19.386 10.0002 20.2231 10.2098 20.9645 10.582C20.4587 8.7533 19.8799 6.88964 19.4915 5.67256C19.3644 5.27423 18.9918 5.00024 18.5585 5.00024H17C16.4477 5.00024 16 4.55253 16 4.00024C16 3.44796 16.4477 3.00024 17 3.00024H18.5585C19.8469 3.00024 21.0005 3.82262 21.3969 5.06451C21.8162 6.3784 22.4602 8.45388 23.0003 10.4437C23.2702 11.438 23.517 12.4208 23.6969 13.2818C23.8041 13.7942 23.8932 14.2893 23.9465 14.7302C23.9818 14.9818 24 15.2389 24 15.5002C24 18.5378 21.5376 21.0002 18.5 21.0002C15.7742 21.0002 13.5116 19.0174 13.0758 16.4154C12.8172 16.1044 12.3886 16.0002 12 16.0002C11.6114 16.0002 11.1828 16.1044 10.9242 16.4154C10.4884 19.0174 8.22578 21.0002 5.5 21.0002C2.46243 21.0002 0 18.5378 0 15.5002C0 15.2389 0.0182295 14.9818 0.0534864 14.7302C0.106769 14.2893 0.195948 13.7942 0.303069 13.2818C0.483034 12.4208 0.729752 11.438 0.99968 10.4437C1.53984 8.45388 2.18384 6.3784 2.60314 5.06451C2.99947 3.82262 4.15313 3.00024 5.44152 3.00024H7C7.55228 3.00024 8 3.44796 8 4.00024C8 4.55253 7.55228 5.00024 7 5.00024H5.44152ZM2.00992 15.5002C2.00992 17.4278 3.57248 18.9903 5.5 18.9903C7.42752 18.9903 8.99008 17.4278 8.99008 15.5002C8.99008 13.5727 7.42752 12.0102 5.5 12.0102C3.57248 12.0102 2.00992 13.5727 2.00992 15.5002ZM15.0099 15.5002C15.0099 17.4278 16.5725 18.9903 18.5 18.9903C20.4275 18.9903 21.9901 17.4278 21.9901 15.5002C21.9901 13.5727 20.4275 12.0102 18.5 12.0102C16.5725 12.0102 15.0099 13.5727 15.0099 15.5002Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/HamburgerIcon.vue b/src/stories/icons/Mono/HamburgerIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8563c80035ad0ab13ba405a311364d05fbc77987
--- /dev/null
+++ b/src/stories/icons/Mono/HamburgerIcon.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 20 20"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+ >
+ <g
+ id="Page-1"
+ stroke="none"
+ stroke-width="1"
+ fill="none"
+ fill-rule="evenodd"
+ sketch:type="MSPage"
+ >
+ <g
+ id="Icon-Set-Filled"
+ sketch:type="MSLayerGroup"
+ transform="translate(-212.000000, -888.000000)"
+ :fill="color ?? '#000000'"
+ >
+ <path
+ id="hamburger"
+ d="M230,904 L214,904 C212.896,904 212,904.896 212,906 C212,907.104 212.896,908 214,908 L230,908 C231.104,908 232,907.104 232,906 C232,904.896 231.104,904 230,904 L230,904 Z M230,896 L214,896 C212.896,896 212,896.896 212,898 C212,899.104 212.896,900 214,900 L230,900 C231.104,900 232,899.104 232,898 C232,896.896 231.104,896 230,896 L230,896 Z M214,892 L230,892 C231.104,892 232,891.104 232,890 C232,888.896 231.104,888 230,888 L214,888 C212.896,888 212,888.896 212,890 C212,891.104 212.896,892 214,892 L214,892 Z"
+ sketch:type="MSShapeGroup"
+ ></path>
+ </g>
+ </g>
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/HandIcon.vue b/src/stories/icons/Mono/HandIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..045ddd669081780a552e9b7a3400ba131cb03c95
--- /dev/null
+++ b/src/stories/icons/Mono/HandIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M13.5 3C13.2239 3 13 3.22386 13 3.5V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V5.5C11 5.22386 10.7761 5 10.5 5C10.2239 5 9.99999 5.22386 9.99999 5.5V13.9677C9.99999 15.0757 8.62655 15.5918 7.8969 14.7579L5.34951 11.8466C5.19167 11.6662 4.95459 11.576 4.71675 11.6057C4.15329 11.6761 3.88804 12.3395 4.24762 12.779L8.93807 18.5118C10.2266 20.0867 12.154 21 14.1888 21C17.3982 21 20 18.3982 20 15.1888V7.5C20 7.22386 19.7761 7 19.5 7C19.2239 7 19 7.22386 19 7.5V12C19 12.5523 18.5523 13 18 13C17.4477 13 17 12.5523 17 12V5.5C17 5.22386 16.7761 5 16.5 5C16.2239 5 16 5.22386 16 5.5V12C16 12.5523 15.5523 13 15 13C14.4477 13 14 12.5523 14 12V3.5C14 3.22386 13.7761 3 13.5 3ZM15.9611 3.05823C15.7525 1.88823 14.73 1 13.5 1C12.27 1 11.2475 1.88823 11.0389 3.05823C10.8653 3.0201 10.685 3 10.5 3C9.11928 3 7.99999 4.11929 7.99999 5.5V11.8386L6.85467 10.5296C6.2595 9.84942 5.36551 9.50903 4.46868 9.62113C2.34401 9.88672 1.34381 12.3883 2.6997 14.0455L7.39016 19.7783C9.05854 21.8174 11.5541 23 14.1888 23C18.5028 23 22 19.5028 22 15.1888V7.5C22 6.11929 20.8807 5 19.5 5C19.315 5 19.1347 5.0201 18.9611 5.05823C18.7525 3.88823 17.73 3 16.5 3C16.315 3 16.1347 3.0201 15.9611 3.05823Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/HomeIcon.vue b/src/stories/icons/Mono/HomeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50dabe08072897065fbb22dcbfe786fb10862f56
--- /dev/null
+++ b/src/stories/icons/Mono/HomeIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 16 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M8 0L0 6V8H1V15H4V10H7V15H15V8H16V6L14 4.5V1H11V2.25L8 0ZM9 10H12V13H9V10Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ImageEditIcon.vue b/src/stories/icons/Mono/ImageEditIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..21137ce8d7706a21e62fe64a74291aa70bd53c6c
--- /dev/null
+++ b/src/stories/icons/Mono/ImageEditIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M14.2639 15.9376L12.5958 14.2835C11.7909 13.4852 11.3884 13.0861 10.9266 12.9402C10.5204 12.8119 10.0838 12.8166 9.68048 12.9537C9.22188 13.1096 8.82814 13.5173 8.04068 14.3327L4.04409 18.2802M14.2639 15.9376L14.6053 15.5991C15.4112 14.7999 15.8141 14.4003 16.2765 14.2544C16.6831 14.1262 17.12 14.1312 17.5236 14.2688C17.9824 14.4252 18.3761 14.834 19.1634 15.6515L20 16.4936M14.2639 15.9376L18.275 19.9566M18.275 19.9566C17.9176 20.0001 17.4543 20.0001 16.8 20.0001H7.2C6.07989 20.0001 5.51984 20.0001 5.09202 19.7821C4.71569 19.5904 4.40973 19.2844 4.21799 18.9081C4.12796 18.7314 4.07512 18.5322 4.04409 18.2802M18.275 19.9566C18.5293 19.9257 18.7301 19.8728 18.908 19.7821C19.2843 19.5904 19.5903 19.2844 19.782 18.9081C20 18.4803 20 17.9202 20 16.8001V16.4936M12.5 4L7.2 4.00011C6.07989 4.00011 5.51984 4.00011 5.09202 4.21809C4.71569 4.40984 4.40973 4.7158 4.21799 5.09213C4 5.51995 4 6.08 4 7.20011V16.8001C4 17.4576 4 17.9222 4.04409 18.2802M20 11.5V16.4936M14 10.0002L16.0249 9.59516C16.2015 9.55984 16.2898 9.54219 16.3721 9.5099C16.4452 9.48124 16.5146 9.44407 16.579 9.39917C16.6515 9.34859 16.7152 9.28492 16.8425 9.1576L21 5.00015C21.5522 4.44787 21.5522 3.55244 21 3.00015C20.4477 2.44787 19.5522 2.44787 19 3.00015L14.8425 7.1576C14.7152 7.28492 14.6515 7.34859 14.6009 7.42112C14.556 7.4855 14.5189 7.55494 14.4902 7.62801C14.4579 7.71033 14.4403 7.79862 14.4049 7.97518L14 10.0002Z"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ImageIcon.vue b/src/stories/icons/Mono/ImageIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7aad96ee52b4b751c929d38b3bbfba2aed40519
--- /dev/null
+++ b/src/stories/icons/Mono/ImageIcon.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M4.80665 17.5211L9.1221 9.60947C9.50112 8.91461 10.4989 8.91461 10.8779 9.60947L14.0465 15.4186L15.1318 13.5194C15.5157 12.8476 16.4843 12.8476 16.8682 13.5194L19.1451 17.5039C19.526 18.1705 19.0446 19 18.2768 19H5.68454C4.92548 19 4.44317 18.1875 4.80665 17.5211Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M18 8C18 9.10457 17.1046 10 16 10C14.8954 10 14 9.10457 14 8C14 6.89543 14.8954 6 16 6C17.1046 6 18 6.89543 18 8Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/LineDashedIcon.vue b/src/stories/icons/Mono/LineDashedIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc23bead92e4a86d1ab1c37ca92ea2984b463080
--- /dev/null
+++ b/src/stories/icons/Mono/LineDashedIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :fill="color ?? '#000000'"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 15 15"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M0 7.5C0 7.22386 0.223858 7 0.5 7H3C3.27614 7 3.5 7.22386 3.5 7.5C3.5 7.77614 3.27614 8 3 8H0.5C0.223858 8 0 7.77614 0 7.5ZM5.75 7.5C5.75 7.22386 5.97386 7 6.25 7H8.75C9.02614 7 9.25 7.22386 9.25 7.5C9.25 7.77614 9.02614 8 8.75 8H6.25C5.97386 8 5.75 7.77614 5.75 7.5ZM12 7C11.7239 7 11.5 7.22386 11.5 7.5C11.5 7.77614 11.7239 8 12 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/LineDiagonalIcon.vue b/src/stories/icons/Mono/LineDiagonalIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..59773e5c5a30487824ceae43312bb3897ee5e68a
--- /dev/null
+++ b/src/stories/icons/Mono/LineDiagonalIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :fill="color ?? '#000000'"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M3.293,20.707a1,1,0,0,1,0-1.414l16-16a1,1,0,1,1,1.414,1.414l-16,16A1,1,0,0,1,3.293,20.707Z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/LineDottedIcon.vue b/src/stories/icons/Mono/LineDottedIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2df5fd2fa50a559cc547c6208c345ab744eeae8
--- /dev/null
+++ b/src/stories/icons/Mono/LineDottedIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :fill="color ?? '#000000'"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 15 15"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M1.5 6.625C1.01675 6.625 0.625 7.01675 0.625 7.5C0.625 7.98325 1.01675 8.375 1.5 8.375C1.98325 8.375 2.375 7.98325 2.375 7.5C2.375 7.01675 1.98325 6.625 1.5 6.625ZM5.5 6.625C5.01675 6.625 4.625 7.01675 4.625 7.5C4.625 7.98325 5.01675 8.375 5.5 8.375C5.98325 8.375 6.375 7.98325 6.375 7.5C6.375 7.01675 5.98325 6.625 5.5 6.625ZM9.5 6.625C9.01675 6.625 8.625 7.01675 8.625 7.5C8.625 7.98325 9.01675 8.375 9.5 8.375C9.98325 8.375 10.375 7.98325 10.375 7.5C10.375 7.01675 9.98325 6.625 9.5 6.625ZM12.625 7.5C12.625 7.01675 13.0168 6.625 13.5 6.625C13.9832 6.625 14.375 7.01675 14.375 7.5C14.375 7.98325 13.9832 8.375 13.5 8.375C13.0168 8.375 12.625 7.98325 12.625 7.5Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/LineIcon.vue b/src/stories/icons/Mono/LineIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5ff4ff12f2066b6d0e385b94da8445a5eff4017a
--- /dev/null
+++ b/src/stories/icons/Mono/LineIcon.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :fill="color ?? '#000000'"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path d="M23 13H1v-2h22z" />
+ <path fill="none" d="M0 0h24v24H0z" />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/MoveIcon.vue b/src/stories/icons/Mono/MoveIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ddb211cc8745cadabbea2bed8d9750c332f39510
--- /dev/null
+++ b/src/stories/icons/Mono/MoveIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 3V21M12 3L9 6M12 3L15 6M12 21L15 18M12 21L9 18M3 12H21M3 12L6 15M3 12L6 9M21 12L18 9M21 12L18 15"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ParagraphIcon.vue b/src/stories/icons/Mono/ParagraphIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8061cbe1ae4f0c99c2bc34bba650dd94aa4b37b4
--- /dev/null
+++ b/src/stories/icons/Mono/ParagraphIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :fill="color ?? '#000000'"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M2,12H5a1,1,0,0,0,0-2H4.635l.586-1.692H8.779L9.365,10H9a1,1,0,0,0,0,2h3a1,1,0,0,0,0-2h-.518L8.945,2.673A1,1,0,0,0,8,2H6a1,1,0,0,0-.945.673L2.518,10H2a1,1,0,0,0,0,2ZM6.712,4h.576l.8,2.308H5.913ZM23,4a1,1,0,0,1-1,1H15a1,1,0,0,1,0-2h7A1,1,0,0,1,23,4Zm0,6a1,1,0,0,1-1,1H15a1,1,0,0,1,0-2h7A1,1,0,0,1,23,10Zm0,5a1,1,0,0,1-1,1H2a1,1,0,0,1,0-2H22A1,1,0,0,1,23,15Zm0,6a1,1,0,0,1-1,1H2a1,1,0,0,1,0-2H22A1,1,0,0,1,23,21Z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/PhoneHandsetIcon.vue b/src/stories/icons/Mono/PhoneHandsetIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a4a1dd73e2b9c5ceef4c86f921a0807263b851b6
--- /dev/null
+++ b/src/stories/icons/Mono/PhoneHandsetIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M17.3545 22.2323C15.3344 21.7262 11.1989 20.2993 7.44976 16.5502C3.70065 12.8011 2.2738 8.66559 1.76767 6.6455C1.47681 5.48459 2.00058 4.36434 2.88869 3.72997L5.21694 2.06693C6.57922 1.09388 8.47432 1.42407 9.42724 2.80051L10.893 4.91776C11.5152 5.8165 11.3006 7.0483 10.4111 7.68365L9.24234 8.51849C9.41923 9.1951 9.96939 10.5846 11.6924 12.3076C13.4154 14.0306 14.8049 14.5807 15.4815 14.7576L16.3163 13.5888C16.9517 12.6994 18.1835 12.4847 19.0822 13.1069L21.1995 14.5727C22.5759 15.5257 22.9061 17.4207 21.933 18.783L20.27 21.1113C19.6356 21.9994 18.5154 22.5232 17.3545 22.2323ZM8.86397 15.136C12.2734 18.5454 16.0358 19.8401 17.8405 20.2923C18.1043 20.3583 18.4232 20.2558 18.6425 19.9488L20.3056 17.6205C20.6299 17.1665 20.5199 16.5348 20.061 16.2171L17.9438 14.7513L17.0479 16.0056C16.6818 16.5182 16.0047 16.9202 15.2163 16.7501C14.2323 16.5378 12.4133 15.8569 10.2782 13.7218C8.1431 11.5867 7.46219 9.7677 7.24987 8.7837C7.07977 7.9953 7.48181 7.31821 7.99439 6.95208L9.24864 6.05618L7.78285 3.93893C7.46521 3.48011 6.83351 3.37005 6.37942 3.6944L4.05117 5.35744C3.74413 5.57675 3.64162 5.89565 3.70771 6.15943C4.15989 7.96418 5.45459 11.7266 8.86397 15.136Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/PlusCircleIcon.vue b/src/stories/icons/Mono/PlusCircleIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa854cd9e51a4041d295e92a2d62f12aa58fcc89
--- /dev/null
+++ b/src/stories/icons/Mono/PlusCircleIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M11 8C11 7.44772 11.4477 7 12 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.44771 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/PlusIcon.vue b/src/stories/icons/Mono/PlusIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9afde0ac92569afeb69fc904d12e2addda34e45b
--- /dev/null
+++ b/src/stories/icons/Mono/PlusIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M6 12H18M12 6V18"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/PointerIcon.vue b/src/stories/icons/Mono/PointerIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..72ad734813d9656d8dcfcd8254da4e1b29b147ca
--- /dev/null
+++ b/src/stories/icons/Mono/PointerIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11 2C11 1.44772 11.4477 1 12 1C12.5523 1 13 1.44772 13 2V3H17.9477C18.6289 3 19.2898 3.23184 19.8217 3.65739L22.0478 5.43826C23.0486 6.23891 23.0486 7.76109 22.0478 8.56174L19.8217 10.3426C19.2898 10.7682 18.6289 11 17.9477 11H13V22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22V11H5C3.34315 11 2 9.65685 2 8V6C2 4.34315 3.34315 3 5 3H11V2ZM5 5H17.9477C18.1747 5 18.395 5.07728 18.5724 5.21913L20.3104 6.60957C20.5606 6.80973 20.5606 7.19027 20.3104 7.39043L18.5724 8.78087C18.395 8.92272 18.1747 9 17.9477 9H5C4.44772 9 4 8.55228 4 8V6C4 5.44772 4.44772 5 5 5Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/SaveIcon.vue b/src/stories/icons/Mono/SaveIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3070e24fd9efd72e5d88e49fd22a2b05f0ff1c58
--- /dev/null
+++ b/src/stories/icons/Mono/SaveIcon.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 -0.5 21 21"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g
+ id="Dribbble-Light-Preview"
+ transform="translate(-419.000000, -640.000000)"
+ :fill="color ?? '#000000'"
+ >
+ <g id="icons" transform="translate(56.000000, 160.000000)">
+ <path
+ id="save_item-[#1411]"
+ d="M370.21875,484 C370.21875,483.448 370.68915,483 371.26875,483 C371.84835,483 372.31875,483.448 372.31875,484 C372.31875,484.552 371.84835,485 371.26875,485 C370.68915,485 370.21875,484.552 370.21875,484 L370.21875,484 Z M381.9,497 C381.9,497.552 381.4296,498 380.85,498 L379.8,498 L379.8,494 C379.8,492.895 378.86025,492 377.7,492 L369.3,492 C368.13975,492 367.2,492.895 367.2,494 L367.2,498 L366.15,498 C365.5704,498 365.1,497.552 365.1,497 L365.1,487.044 C365.1,486.911 365.15565,486.784 365.2533,486.691 L367.2,484.837 L367.2,486 C367.2,487.105 368.13975,488 369.3,488 L377.7,488 C378.86025,488 379.8,487.105 379.8,486 L379.8,482 L380.85,482 C381.4296,482 381.9,482.448 381.9,483 L381.9,497 Z M377.7,498 L369.3,498 L369.3,495 C369.3,494.448 369.7704,494 370.35,494 L376.65,494 C377.2296,494 377.7,494.448 377.7,495 L377.7,498 Z M369.3,482.837 L370.17885,482 L377.7,482 L377.7,485 C377.7,485.552 377.2296,486 376.65,486 L370.35,486 C369.7704,486 369.3,485.552 369.3,485 L369.3,482.837 Z M381.9,480 L369.7347,480 C369.45645,480 369.18975,480.105 368.99235,480.293 L363.30765,485.707 C363.11025,485.895 363,486.149 363,486.414 L363,498 C363,499.105 363.93975,500 365.1,500 L381.9,500 C383.06025,500 384,499.105 384,498 L384,482 C384,480.895 383.06025,480 381.9,480 L381.9,480 Z"
+ ></path>
+ </g>
+ </g>
+ </g>
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/SettingsIcon.vue b/src/stories/icons/Mono/SettingsIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..604a19a277d018cee3dc6ac01cb9e17e3073eaee
--- /dev/null
+++ b/src/stories/icons/Mono/SettingsIcon.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 30 30"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g
+ id="Icon-Set-Filled"
+ transform="translate(-103.000000, -362.000000)"
+ :fill="color ?? '#000000'"
+ >
+ <path
+ id="settings"
+ d="M118,382 C115.261,382 113.042,379.762 113.042,377 C113.042,374.238 115.261,372 118,372 C120.739,372 122.959,374.238 122.959,377 C122.959,379.762 120.739,382 118,382 L118,382 Z M132.008,380.536 L129.685,379.184 C129.815,378.474 129.901,377.749 129.901,377 C129.901,376.252 129.815,375.526 129.685,374.816 L132.008,373.464 C132.957,372.912 133.281,371.688 132.733,370.732 L130.75,367.268 C130.203,366.312 128.989,365.983 128.041,366.536 L125.694,367.901 C124.598,366.961 123.352,366.192 121.967,365.697 L121.967,364 C121.967,362.896 121.079,362 119.983,362 L116.017,362 C114.921,362 114.033,362.896 114.033,364 L114.033,365.697 C112.648,366.192 111.402,366.961 110.306,367.901 L107.959,366.536 C107.011,365.983 105.797,366.312 105.25,367.268 L103.267,370.732 C102.719,371.688 103.044,372.912 103.992,373.464 L106.315,374.816 C106.185,375.526 106.099,376.252 106.099,377 C106.099,377.749 106.185,378.474 106.315,379.184 L103.992,380.536 C103.044,381.088 102.719,382.312 103.267,383.268 L105.25,386.732 C105.797,387.688 107.011,388.017 107.959,387.464 L110.306,386.099 C111.402,387.039 112.648,387.809 114.033,388.303 L114.033,390 C114.033,391.104 114.921,392 116.017,392 L119.983,392 C121.079,392 121.967,391.104 121.967,390 L121.967,388.303 C123.352,387.809 124.598,387.039 125.694,386.099 L128.041,387.464 C128.989,388.017 130.203,387.688 130.75,386.732 L132.733,383.268 C133.281,382.312 132.957,381.088 132.008,380.536 L132.008,380.536 Z M118,374 C116.357,374 115.025,375.344 115.025,377 C115.025,378.657 116.357,380 118,380 C119.643,380 120.975,378.657 120.975,377 C120.975,375.344 119.643,374 118,374 L118,374 Z"
+ ></path>
+ </g>
+ </g>
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/TableIcon.vue b/src/stories/icons/Mono/TableIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d010f47bd2fd9f1a8e6dd51365a56cbc546659d8
--- /dev/null
+++ b/src/stories/icons/Mono/TableIcon.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M3 9.5H21M3 14.5H21M8 4.5V19.5M6.2 19.5H17.8C18.9201 19.5 19.4802 19.5 19.908 19.282C20.2843 19.0903 20.5903 18.7843 20.782 18.408C21 17.9802 21 17.4201 21 16.3V7.7C21 6.5799 21 6.01984 20.782 5.59202C20.5903 5.21569 20.2843 4.90973 19.908 4.71799C19.4802 4.5 18.9201 4.5 17.8 4.5H6.2C5.0799 4.5 4.51984 4.5 4.09202 4.71799C3.71569 4.90973 3.40973 5.21569 3.21799 5.59202C3 6.01984 3 6.57989 3 7.7V16.3C3 17.4201 3 17.9802 3.21799 18.408C3.40973 18.7843 3.71569 19.0903 4.09202 19.282C4.51984 19.5 5.07989 19.5 6.2 19.5Z"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/TrashIcon.vue b/src/stories/icons/Mono/TrashIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a18eee55aa46c96e746a85de0979cf841238c92
--- /dev/null
+++ b/src/stories/icons/Mono/TrashIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M14 10V17M10 10V17"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/TriangleIcon.vue b/src/stories/icons/Mono/TriangleIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f89a51134fe7fb6e79dfce0853c505d20dbc58c
--- /dev/null
+++ b/src/stories/icons/Mono/TriangleIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12.0001 5.94363L4.76627 18H19.2339L12.0001 5.94363ZM10.7138 4.20006C11.2964 3.22905 12.7037 3.22905 13.2863 4.20006L21.4032 17.7282C22.0031 18.728 21.2829 20 20.117 20H3.88318C2.71724 20 1.99706 18.728 2.59694 17.7282L10.7138 4.20006Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/UserIcon.vue b/src/stories/icons/Mono/UserIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a15fbab178bf6c673f3138a53972ee0ad74be80c
--- /dev/null
+++ b/src/stories/icons/Mono/UserIcon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 16 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M8 7C9.65685 7 11 5.65685 11 4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4C5 5.65685 6.34315 7 8 7Z"
+ :fill="color ?? '#000000'"
+ />
+ <path
+ d="M14 12C14 10.3431 12.6569 9 11 9H5C3.34315 9 2 10.3431 2 12V15H14V12Z"
+ :fill="color ?? '#000000'"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/page.css b/src/stories/page.css
deleted file mode 100644
index 87f7ecb17c4e62bb9ef3b65a668a476c93dd13c7..0000000000000000000000000000000000000000
--- a/src/stories/page.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.storybook-page {
- margin: 0 auto;
- padding: 48px 20px;
- max-width: 600px;
- color: #333;
- font-size: 14px;
- line-height: 24px;
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-page h2 {
- display: inline-block;
- vertical-align: top;
- margin: 0 0 4px;
- font-weight: 700;
- font-size: 32px;
- line-height: 1;
-}
-
-.storybook-page p {
- margin: 1em 0;
-}
-
-.storybook-page a {
- color: #1ea7fd;
- text-decoration: none;
-}
-
-.storybook-page ul {
- margin: 1em 0;
- padding-left: 30px;
-}
-
-.storybook-page li {
- margin-bottom: 8px;
-}
-
-.storybook-page .tip {
- display: inline-block;
- vertical-align: top;
- margin-right: 10px;
- border-radius: 1em;
- background: #e7fdd8;
- padding: 4px 12px;
- color: #66bf3c;
- font-weight: 700;
- font-size: 11px;
- line-height: 12px;
-}
-
-.storybook-page .tip-wrapper {
- margin-top: 40px;
- margin-bottom: 40px;
- font-size: 13px;
- line-height: 20px;
-}
-
-.storybook-page .tip-wrapper svg {
- display: inline-block;
- vertical-align: top;
- margin-top: 3px;
- margin-right: 4px;
- width: 12px;
- height: 12px;
-}
-
-.storybook-page .tip-wrapper svg path {
- fill: #1ea7fd;
-}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index e14c754d3ae5775d2ab13001e251c1371be912de..b5c26be5a9d5fdd76a0e64793a4653e0b7c7d3a5 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,14 +1,19 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
- "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+ "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "App.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
- "baseUrl": ".",
+ "baseUrl": "./",
"paths": {
- "@/*": ["./src/*"]
+ "@/*": ["src/*"],
+ "@assets/*": ["./src/assets/*"],
+ "@icons/*": ["./src/icons/*"],
+ "@helpers/*": ["src/common/helpers/*"],
+ "@interfaces/*": ["src/common/interfaces/*"],
+ "@stories/*": ["./src/stories/*"]
}
}
}
diff --git a/vite.config.ts b/vite.config.ts
index 4217010a3178372181948ce34c4d5045dfa18325..b38c6eb4e53b77a8f4df992e0094629525e8fec2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,18 +1,18 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools';
-// https://vite.dev/config/
export default defineConfig({
- plugins: [
- vue(),
- vueDevTools(),
- ],
+ plugins: [vue(), vueDevTools()],
resolve: {
alias: {
- '@': fileURLToPath(new URL('./src', import.meta.url))
+ '@': fileURLToPath(new URL('./src', import.meta.url)),
+ '@icons': fileURLToPath(new URL('./src/icons', import.meta.url)),
+ '@helpers': fileURLToPath(new URL('./src/common/helpers', import.meta.url)),
+ '@interfaces': fileURLToPath(new URL('./src/common/interfaces', import.meta.url)),
+ '@stories': fileURLToPath(new URL('./src/stories', import.meta.url)),
},
},
-})
+});
diff --git a/yarn.lock b/yarn.lock
index 86963f861d1e519bb3da6372a9853baf98804b06..c78b8cbda9cf4445c22b6dbc75d7c5252f46dedb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1107,13 +1107,20 @@
resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.13.tgz#68f6877043d377092890ff5b298152b0a21671bd"
integrity sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==
-"@types/node@*", "@types/node@^22.9.0":
+"@types/node@*":
version "22.9.3"
resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.3.tgz#08f3d64b3bc6d74b162d36f60213e8a6704ef2b4"
integrity sha512-F3u1fs/fce3FFk+DAxbxc78DF8x0cY09RRL8GnXLmkJ1jvx3TtPdWoTT5/NiYfI5ASqXBmfqJi9dZ3gxMx4lzw==
dependencies:
undici-types "~6.19.8"
+"@types/node@^22.10.1":
+ version "22.10.1"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.1.tgz#41ffeee127b8975a05f8c4f83fb89bcb2987d766"
+ integrity sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==
+ dependencies:
+ undici-types "~6.20.0"
+
"@types/tough-cookie@*":
version "4.0.5"
resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
@@ -3920,6 +3927,11 @@ undici-types@~6.19.8:
resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+undici-types@~6.20.0:
+ version "6.20.0"
+ resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
+ integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
+
universalify@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"