plugin-ui-for-kzt 0.0.17 → 0.0.18

package/example/App.vue

@@ -2,40 +2,111 @@
   <div class="demo-page">
     <h1>Plugin UI KZT - Компоненты</h1>
     <p>Ниже представлены все компоненты библиотеки с примерами их использования.</p>
-
     <section>
-      <h2>BaseChips.vue</h2>
-      <p>Пример использования:</p>
-      <base-chips
-          text="Chip Text medium"
-          icon-name="star"
-          count="5"
-          size="medium"
-          active
-      />
-
-      <base-chips
-          text="Chip Text large"
-          icon-name="email-sms"
-          count="0"
-          size="large"
-      />
-
-      <base-chips
-          text="Chip Text small"
-          icon-name="email-sms"
-          count="10"
-          size="small"
-          active
-      />
+      <h2>BaseTag.vue</h2>
+      <div style="display: flex;
+    gap: 8px;
+    align-items: center;">
+        <base-tag size="extra-small" text="base tag" />
+        <base-tag size="small" color="secondary" text="base tag secondary" />
+        <base-tag 
+        text="base tag"
+        size="medium" 
+        closable
+        @close="console.log('Tag closed')"
+        />
+        <base-tag 
+        text="base tag" 
+        size="large"
+        addingTag
+        @addTag="console.log('New tag added:')"
+        />
+        <base-tag 
+        isHasAddTag
+        @updateInput="console.log(' tag added:', $event)"
+        />
+      </div>
+    </section>
+    <section>
+      <h2>BaseBadgeGroup.vue</h2>
+
+      <base-badge-group
+        size="medium"
+        color="primary"
+        badge-position="right"
+      >
+        <template #badge-text-container>
+          New feature
+        </template>
+        <template #badge-text>
+          We’ve just released a new feature
+        </template>
+      </base-badge-group>
+      <base-badge-group
+        size="large"
+        color="gray"
+        arrowRightIcon
+      >
+        <template #badge-text-container>
+          New feature
+        </template>
+        <template #badge-text>
+          We’ve just released a new feature
+        </template>
+      </base-badge-group>
+    </section>
+    <section>
+      <h2>BaseBadge.vue</h2>
+      <base-badge
+        size="extra-small"
+        color="primary"
+        class="badge-example"
+        closable
+      >
+        <template #text>Пример бейджа</template>
+      </base-badge>
+      <base-badge
+        size="small"
+        color="gray"
+        class="badge-example"
+        has-dot
+      >
+        <template #text>Пример бейджа</template>
+      </base-badge>
+      <base-badge
+        size="medium"
+        color="error"
+        class="badge-example"
+        arrow-up-icon
+      >
+        <template #text>Пример бейджа</template>
+      </base-badge>
+      <base-badge
+        size="large"
+        color="warning"
+        class="badge-example"
+        arrow-right-icon
+      >
+        <template #text>Пример бейджа</template>
+      </base-badge>
+      <base-badge
+        size="large"
+        color="success"
+        class="badge-example"
+      >
+        <template #text>
+          <base-icon size="custom" name="help"></base-icon>
+        </template>
+      </base-badge>
+    </section>
 
-      <base-chips
-          text="Chip extra small"
-          icon-name="email-sms"
-          count="0"
-          size="extra-small"
-          active
-      />
+    <section>
+      <h2>BaseUpload.vue</h2>
+      <base-upload
+      :accepted-formats="accept"
+      >
+      <template #title>my title</template>
+      </base-upload>
     </section>
 
     <section>
@@ -51,297 +122,38 @@
     />
       <!-- :autoplay="true"
       :autoplay-interval="2000" -->
-    <p>Текущий слайд: {{ currentSlide }}</p>
   </div>
+  <section>
+  medium size
+    <base-textarea class="text-area" size="medium" placeholder="test"></base-textarea>
+  </section>
     </section>
-
-    <section>
-      <h2>BaseInputCurrency.vue</h2>
-      <p>Компонент для отображения полей ввода валюты.</p>
-      <p>Пример использования:</p>
-      <base-input-currency
-          id="currency"
-          v-model="currencyModel"
-          size="large"
-          label="Currency Amount"
-          placeholder="0.00"
-          error="Invalid currency amount"
-          hint="Please enter a valid currency amount"
-          :tooltip-options="tooltipOptions"
-      />
-    </section>
-
-    <section>
-      <h2>BaseIcon.vue</h2>
-      <p>Компонент для отображения иконок.</p>
-      <p>Пример использования:</p>
-      <base-icon name="loader" size="small"/>
-      <base-icon name="email-sms" size="medium"/>
-      <base-icon name="calendar" size="small"/>
-    </section>
-
-    <section>
-      <h2>BaseSiteInput.vue</h2>
-      <base-site-input
-          v-model="siteModel"
-          size="small"
-          label="Site"
-          hint="Please enter site"
-          validation-text="validationText"
-      />
-    </section>
-
-    <section>
-      <h2>BaseBreadCrumbs.vue</h2>
-      <p>Компонент для отображения хлебных крошек.</p>
-      <p>Пример использования:</p>
-      <base-bread-crumbs :crumbs="[
-    { label: 'Home', to: '/' },
-    { label: 'Products', to: '/products' },
-    { label: 'Electronics', to: '/electronics' },
-    { label: 'Laptops', to: '/laptops' },
-    { label: 'Gaming Laptops', to: '/laptops/gaming' },
-  ]"/>
-    </section>
-
-    <section>
-      <h2>BaseLoader.vue</h2>
-      <p>Компонент для отображения индикатора загрузки.</p>
-      <p>Пример использования:</p>
-      <base-loader/>
-    </section>
-
-    <section>
-      <h2>BaseButton.vue</h2>
-      <p>Компонент для отображения кнопок.</p>
-      <p>Пример использования:</p>
-      <base-button>Click Me</base-button>
-    </section>
-
-    <section>
-      <h2>BaseCheckbox.vue</h2>
-      <p>Компонент для отображения чекбоксов.</p>
-      <p>Пример использования:</p>
-      <base-checkbox id="check" v-model="checkboxModel" label="Accept Terms"/>
-    </section>
-
-    <section>
-      <h2>BaseRadio.vue</h2>
-      <p>Компонент для отображения радиокнопок.</p>
-      <p>Пример использования:</p>
-      <base-radio id="radio1" v-model="radioModel" label="Option 1"/>
-    </section>
-
-    <section>
-      <h2>BaseTextarea.vue</h2>
-      <p>Компонент для отображения текстовых областей.</p>
-      <p>Пример использования:</p>
-      <base-textarea
-          id="textarea"
-          v-model="textAreaModel"
-          label="Enter text here"
-          size="large"
-      />
-    </section>
-
-    <section>
-      <h2>BaseToggle.vue</h2>
-      <p>Компонент для отображения переключателей.</p>
-      <p>Пример использования:</p>
-      <base-toggle id="toggle" v-model="toggleModel" label="Enable feature"/>
-    </section>
-
-    <section>
-      <h2>BaseTooltip.vue</h2>
-      <p>Компонент для отображения подсказок.</p>
-      <p>Пример использования:</p>
-      <base-tooltip
-          title="This is a tooltip"
-          :content="contentTooltip"
-          position="right"
-          trigger="click"
-          theme="light"
-      >
-        <template #trigger>
-          <base-button>Hover me</base-button>
-        </template>
-      </base-tooltip>
-    </section>
-
-    <section>
-      <h2>BaseInput.vue</h2>
-      <p>Компонент для отображения текстовых полей.</p>
-      <p>Пример использования:</p>
-      <base-input id="input" v-model="inputModel" label="Enter text here"/>
-    </section>
-
-    <section>
-      <h2>BaseInputEmail.vue</h2>
-      <p>Компонент для отображения полей ввода электронной почты.</p>
-      <p>Пример использования:</p>
-      <base-input-email
-          id="email"
-          v-model="emailModel"
-          label="Enter email here"
-          size="medium"
-          :tooltip-options="tooltipOptions"
-          validation-text="validationText Email"
-      >
-        <template>
-<!--          // #[right-icon]-->
-          <base-icon name="calendar" size="medium"/>
-        </template>
-      </base-input-email>
-    </section>
-
-    <section>
-      <h2>BaseInputCalendar.vue</h2>
-      <p>Компонент для отображения полей ввода даты.</p>
-      <p>Пример использования:</p>
-      <base-input-calendar
-          id="calendar"
-          v-model="calendarModel"
-          label="Select date here"
-          size="medium"
-          placeholder="Select date"
-          :min-date="new Date()"
-      />
+    <section style="height: 300px;">
+    <p></p>
+    <base-textarea class="text-area" size="custom" placeholder="test"></base-textarea>
     </section>
 
     <section>
-      <h2>BaseOpenedListItem.vue</h2>
-      <p>Компонент для отображения открытых элементов списка.</p>
-      <p>Пример использования:</p>
-      <base-opened-list-item
-          id="list-item"
-          label="List Item"
-          active
-      >
-        <template #icon>
-          <base-icon name="email-sms"/>
-        </template>
-        <p>This is the content of the opened list item.</p>
-      </base-opened-list-item>
-    </section>
-
-    <section>
-      <h2>BaseDropdown.vue</h2>
-      <p>Компонент для отображения выпадающих списков.</p>
-      <p>Пример использования:</p>
-      <base-dropdown
-          id="dropdown"
-          v-model="dropdownModel"
-          label="Select an option"
-          auto-close
-          :options="[
-      { label: 'Option 1', value: 'option1' },
-      { label: 'Option 2', value: 'option2' },
-      { label: 'Option 3', value: 'option3' },
-    ]"
-      >
-        <template #top>
-          <base-button>Open Dropdown</base-button>
-        </template>
-        <template #dropdown>
-          <base-opened-list-item v-for="item in itemsDropdown" :key="item.text">
-            <template #icon>
-              <base-icon :name="item.name" size="medium"/>
-            </template>
-            {{ item.text }}
-          </base-opened-list-item>
-        </template>
-      </base-dropdown>
-    </section>
-
-    <section>
-      <h2>BaseSelect.vue</h2>
-      <p>Компонент для отображения выпадающих списков с выбором.</p>
-      <p>Пример использования:</p>
-      <base-select
-          id="select"
-          v-model="selectedOption"
-          :options="[
-        { id: 1, name: 'Option 1', value: 'option1', label: 'Option 1' },
-        { id: 2, name: 'Option 2', value: 'option2', label: 'Option 2' },
-        { id: 3, name: 'Option 3', value: 'option3', label: 'Option 3', disabled: true },
-        { id: 4, name: 'Option 4', value: 'option4', label: 'Option 4' },
-        { id: 5, name: 'Option 5', value: 'option5', label: 'Option 5' },
-        { id: 6, name: 'Option 6', value: 'option6', label: 'Option 6' },
-        { id: 7, name: 'Option 7', value: 'option7', label: 'Option 7' },
-        { id: 8, name: 'Option 8', value: 'option8', label: 'Option 8' },
-        { id: 9, name: 'Option 9', value: 'option9', label: 'Option 9' },
-        { id: 10, name: 'Option 10', value: 'option10', label: 'Option 10' },
-        { id: 11, name: 'Option 11', value: 'option11', label: 'Option 11' },
-        { id: 12, name: 'Option 12', value: 'option12', label: 'Option 12' },
-        { id: 13, name: 'Option 13', value: 'option13', label: 'Option 13' },
-        { id: 14, name: 'Option 14', value: 'option14', label: 'Option 14' },
-        { id: 15, name: 'Option 15', value: 'option15', label: 'Option 15' },
-      ]"
-          label="Выберите опцию"
-          hint="Подсказка"
-          error=""
-          placeholder="Выберите текст"
-          size="small"
-      >
-        <template #headerIcon>
-          <base-icon
-              name="email"
-              size="small"
-          />
-        </template>
-        <template #iconItem>
-          <base-icon
-              name="email"
-              size="small"
-          />
-        </template>
-      </base-select>
+      <div>
+        <base-button @click="openModal">Открыть модал</base-button>
+      </div>
     </section>
-
   </div>
 </template>
 <script setup lang="ts">
-import {ref} from 'vue';
+import { ref } from 'vue';
+import { useModal } from '../src/composables/useModal';
+import MyCustomModal from './MyCustomModal.vue';
+
+const accept = ['image/*']
+
+const modal = useModal();
 
-const checkboxModel = ref(false);
-const radioModel = ref(false);
-const textAreaModel = ref('');
-const toggleModel = ref(false);
-const inputModel = ref('');
-const emailModel = ref('');
-const selectedOption = ref('option1');
-const siteModel = ref('');
-const phoneModel = ref('');
-const currencyModel = ref('');
-const selectedOptionButton = ref('1');
-const tooltipOptions = ref({
-  title: 'Tooltip Title',
-  content: 'This is a tooltip content.',
-  position: 'top',
-  trigger: 'hover',
-  theme: 'light',
-});
+const openModal = () => {
+  modal.open('myModal', { closable: true }, MyCustomModal);
+};
 
-const itemsDropdown = ref([
-  {name: 'email-sms', text: 'Clipboard Item'},
-  {name: 'help', text: 'Clipboard Item 2'},
-  {name: 'loader', text: 'Clipboard Item 32'},
-  {name: 'loader', text: 'Clipboard Item 33'},
-  {name: 'loader', text: 'Clipboard Item 34'},
-  {name: 'loader', text: 'Clipboard Item 35'},
-  {name: 'loader', text: 'Clipboard Item 31'},
-  {name: 'loader', text: 'Clipboard Item 323'},
-  {name: 'loader', text: 'Clipboard Item 351'},
-  {name: 'loader', text: 'Clipboard Item 3124'},
-  {name: 'loader', text: 'Clipboard Item 3512'},
-  {name: 'loader', text: 'Clipboard Item 3521'},
-  {name: 'loader', text: 'Clipboard Item 3512'},
-  {name: 'loader', text: 'Clipboard Item 3512'},
-]);
-const calendarModel = ref('');
 const currentSlide = ref(0);
-const dropdownModel = ref(false);
-const contentTooltip = ref('<p>Test lorem ipsum asd asdd dasda text lorem ipsum dolor sit amet.</p>');
 </script>
 
 <style lang="scss" scoped>

package/example/MyCustomModal.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h2>Моя модалка с картинкой</h2>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <img src="https://i.pinimg.com/736x/90/71/bc/9071bcfb179dafd923d0f90653338ea1.jpg" alt="Пример изображения" style="max-width: 100%; height: auto;" />
+    <base-button @click="closeModal">Закрыть</base-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+import BaseButton from '../src/components/BaseButton/BaseButton.vue';
+import type { ICoreModalProps } from '../src/types/modal';
+
+const props = defineProps<{
+  modalProps: ICoreModalProps;
+}>();
+
+const emit = defineEmits(['close']);
+
+const closeModal = () => {
+  emit('close');
+  if (props.modalProps.closable) {
+    // Можно добавить логику закрытия через useModal, если нужно
+  }
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/assets/icons/add.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33337 8H12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 12.6667V3.33337" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/arrow-up.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.0581 7.97499L9.99974 2.91666L4.94141 7.97499" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M10 17.0833V3.05832" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/close-circle.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="#F2F4F7"/>
+<path d="M15.9988 32.0005L32 15.9993" stroke="#475467" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 32.0007L15.9988 15.9995" stroke="#475467" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/close.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99927 15.0003L15 4.99958" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 15.0004L4.99927 4.99966" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/document-text.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7999 2.20999C15.3899 1.79999 14.6799 2.07999 14.6799 2.64999V6.13999C14.6799 7.59999 15.9199 8.80999 17.4299 8.80999C18.3799 8.81999 19.6999 8.81999 20.8299 8.81999C21.3999 8.81999 21.6999 8.14999 21.2999 7.74999C19.8599 6.29999 17.2799 3.68999 15.7999 2.20999Z" fill="#1AA0DB"/>
+<path d="M20.5 10.19H17.61C15.24 10.19 13.31 8.26 13.31 5.89V3C13.31 2.45 12.86 2 12.31 2H8.07C4.99 2 2.5 4 2.5 7.57V16.43C2.5 20 4.99 22 8.07 22H15.93C19.01 22 21.5 20 21.5 16.43V11.19C21.5 10.64 21.05 10.19 20.5 10.19ZM11.5 17.75H7.5C7.09 17.75 6.75 17.41 6.75 17C6.75 16.59 7.09 16.25 7.5 16.25H11.5C11.91 16.25 12.25 16.59 12.25 17C12.25 17.41 11.91 17.75 11.5 17.75ZM13.5 13.75H7.5C7.09 13.75 6.75 13.41 6.75 13C6.75 12.59 7.09 12.25 7.5 12.25H13.5C13.91 12.25 14.25 12.59 14.25 13C14.25 13.41 13.91 13.75 13.5 13.75Z" fill="#1AA0DB"/>
+</svg>

package/src/assets/icons/export.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.32031 6.49994L11.8803 3.93994L14.4403 6.49994" stroke="#0096D7" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.8809 14.1798V4.00977" stroke="#0096D7" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 12C4 16.42 7 20 12 20C17 20 20 16.42 20 12" stroke="#0096D7" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/gallery.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.66992 18.95L7.59992 15.64C8.38992 15.11 9.52992 15.17 10.2399 15.78L10.5699 16.07C11.3499 16.74 12.6099 16.74 13.3899 16.07L17.5499 12.5C18.3299 11.83 19.5899 11.83 20.3699 12.5L21.9999 13.9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/notification-icon.svg

@@ -0,0 +1,7 @@
+
+<svg viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="76" height="76" rx="38" fill="#D1FADF"/>
+<rect x="4" y="4" width="76" height="76" rx="38" stroke="#ECFDF3" stroke-width="8"/>
+<path d="M42 59.5C51.625 59.5 59.5 51.625 59.5 42C59.5 32.375 51.625 24.5 42 24.5C32.375 24.5 24.5 32.375 24.5 42C24.5 51.625 32.375 59.5 42 59.5Z" stroke="#12B76A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.5625 42L39.515 46.9525L49.4375 37.0475" stroke="#12B76A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/search-zoom-in.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.66675 9.75H11.8334" stroke="#0096D7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 11.8334V7.66669" stroke="#0096D7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.58341 17.5C13.9557 17.5 17.5001 13.9556 17.5001 9.58335C17.5001 5.2111 13.9557 1.66669 9.58341 1.66669C5.21116 1.66669 1.66675 5.2111 1.66675 9.58335C1.66675 13.9556 5.21116 17.5 9.58341 17.5Z" stroke="#0096D7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3334 18.3334L16.6667 16.6667" stroke="#0096D7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/trash.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.08325 4.14169L7.26659 3.05002C7.39992 2.25835 7.49992 1.66669 8.90825 1.66669H11.0916C12.4999 1.66669 12.6083 2.29169 12.7333 3.05835L12.9166 4.14169" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.7087 7.61676L15.167 16.0084C15.0753 17.3168 15.0003 18.3334 12.6753 18.3334H7.32533C5.00033 18.3334 4.92533 17.3168 4.83366 16.0084L4.29199 7.61676" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.6084 13.75H11.3834" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.91675 10.4167H12.0834" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/upload.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4271 15.5735L15.8404 18.9869L19.2538 15.5735" stroke="#667085" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.8412 5.33331V18.8933" stroke="#667085" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.6667 16.24C26.6667 22.1333 22.6667 26.9067 16 26.9067C9.33334 26.9067 5.33334 22.1333 5.33334 16.24" stroke="#667085" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>