@eturnity/eturnity_reusable_components 1.2.19-EPDM-5295.0 → 1.2.19-EPDM-3412.8

package/src/App.vue

@@ -1,219 +1,216 @@
-<template>
-  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
-    <page-container>
-      <br />
-      <modal backdrop="dark" :isLoading="false" :isOpen="true">
-        <main-table titleText="My Table">
-          <thead>
-            <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-              <th>Column 3</th>
-              <div />
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <!-- <table-dropdown
-              :colSpan="3"
-              :tableItems="getDropdownValues()"
-              @toggle-dropdown-open="toggleDropdownOpen()"
-              @item-selected="onItemSelected({ item: $event, index })"
-              :isOpen="isDropdownOpen()"
-              :optionItems="itemOptions"
-              :optionsDisplay="['display_name', 'company_item_number', 'model']"
-            /> -->
-              <td>Test</td>
-              <div class="icons-container">
-                <three-dots :options="listOptions" :isLoading="false" />
-              </div>
-            </tr>
-          </tbody>
-        </main-table>
-      </modal>
-      <br />
-      <toggle
-        @on-toggle-change="onInputChange($event)"
-        :isChecked="inputValue"
-        label="My Label Text"
-        infoTextMessage="This is my test message"
-        infoTextAlign="right"
-        labelAlign="right"
-        :disabled="false"
-      />
-      <br />
-      <input-number
-        placeholder="Enter distance"
-        :numberPrecision="2"
-        :value="inputValue"
-        @input-change="onInputChange($event)"
-      />
-      <br />
-      <page-subtitle text="My Subtitle" infoText="My info Text" />
-      <spinner size="30px" />
-      <checkbox
-        label="Do you accept the Terms?"
-        :isChecked="true"
-        size="small"
-        :isDisabled="false"
-      />
-      <external-button text="Click me!" minWidth="500px" />
-    </page-container>
-  </ThemeProvider>
-</template>
-
-<script>
-import { ThemeProvider } from 'vue-styled-components'
-import theme from './assets/theme'
-import styled from 'vue-styled-components'
-import MainTable from '@/components/tables/mainTable'
-import ThreeDots from '@/components/threeDots'
-import Toggle from '@/components/inputs/toggle'
-import InputNumber from '@/components/inputs/inputNumber'
-import Checkbox from '@/components/inputs/checkbox'
-import PageSubtitle from '@/components/pageSubtitle'
-import Spinner from '@/components/spinner'
-import ExternalButton from '@/components/buttons/externalButton'
-import Modal from '@/components/modals/modal'
-// import TableDropdown from "@/components/tableDropdown"
-
-const PageContainer = styled.div`
-  padding: 40px;
-`
-
-export default {
-  name: 'App',
-  components: {
-    ThemeProvider,
-    PageContainer,
-    MainTable,
-    ThreeDots,
-    Toggle,
-    InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    ExternalButton,
-    Modal,
-  },
-  data() {
-    return {
-      inputValue: null,
-      checkedOption: 'button_1',
-      question: {
-        number_format_precision: 4,
-        number_min_allowed: 0,
-        number_max_allowed: 10,
-        unit_short_name: 'cm',
-      },
-      dropdownOpen: false,
-      isChecked: false,
-      listOptions: [
-        {
-          name: 'Option 1',
-          value: 'option_1',
-          disabled: true,
-        },
-        {
-          name: 'Option 2',
-          value: 'option_2',
-        },
-        {
-          name: 'Option 3',
-          value: 'option_3',
-        },
-        {
-          name: 'Option 4',
-          value: 'option_4',
-        },
-      ],
-      itemOptions: [
-        {
-          display_name: 'Test 1',
-          company_item_number: '123',
-          model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
-          id: 1,
-        },
-        {
-          display_name: 'Test 2',
-          company_item_number: '1234',
-          model: 'BTB-123',
-          id: 2,
-        },
-        {
-          display_name: 'Test 3',
-          company_item_number: '12345',
-          model: 'BTB-543',
-          id: 3,
-        },
-        {
-          display_name: 'Test 4',
-          company_item_number: '123456',
-          model: 'BTB-4930',
-          id: 4,
-        },
-      ],
-    }
-  },
-  methods: {
-    getTheme() {
-      return theme
-    },
-    onInputChange(event) {
-      this.inputValue = event
-    },
-    isDropdownOpen() {
-      return this.dropdownOpen
-    },
-    onClickButton() {
-      console.log('Test')
-    },
-    toggleDropdownOpen() {
-      this.dropdownOpen = !this.dropdownOpen
-    },
-    getDropdownValues() {
-      let items = []
-      items = [
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'display_name',
-          }),
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'company_item_number',
-          }),
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'model',
-          }),
-        },
-      ]
-      return items
-    },
-    getComponentInfo({ row, value }) {
-      let item
-      if (row.selectedValue && row.selectedValue[value]) {
-        item = row.selectedValue[value]
-      } else if (row[value]) {
-        item = row[value]
-      } else {
-        item = '-'
-      }
-      return item
-    },
-  },
-}
-</script>
-
-<style>
-html,
-body {
-  height: 100%;
-  margin: 0;
-}
+<template>
+  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
+    <page-container>
+      <br />
+      <input-number
+        :value="inputValue"
+        @input-change="inputValue = $event"
+        inputWidth="250px"
+        slotSize="50%"
+        ><InputAnnexContainer>
+          <span>123m2</span>
+          <info-text size="10px" alignArrow="right" text="infoText ceci est le text"></info-text>
+        </InputAnnexContainer>
+      </input-number>
+      <input-number
+        :value="inputValue"
+        @input-change="inputValue = $event"
+        inputWidth="250px"
+        slotSize="50%"
+        :isError="true"
+        ><InputAnnexContainer>
+          <span>123m2</span>
+          <info-text :style="{'justify-self': 'end'}" size="12px" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
+        </InputAnnexContainer>
+      </input-number>
+      <br />
+      
+  <p>InputText</p>
+   <input-text
+     placeholder="Company name"
+     :value="inputValue"
+     :isError="true"
+     errorMessage="This is my error message"
+     infoTextAlign="right" 
+     infoTextMessage="My info message"
+     label="Question 5"
+     alignItems="vertical"
+     inputWidth="250px"
+     minWidth="100px"
+   />
+   <br/>
+      <input-number
+        :value="num"
+        @input-change="num = $event"
+        unitName="t"
+        id="biebie"
+        test="koko"
+        @keydown="keydownHandler"
+      />
+    </page-container>
+  </ThemeProvider>
+</template>
+
+<script>
+import { ThemeProvider } from "vue-styled-components"
+import theme from "./assets/theme"
+import styled from "vue-styled-components"
+import MainTable from "@/components/tables/mainTable"
+import ThreeDots from "@/components/threeDots"
+import Toggle from "@/components/inputs/toggle"
+import InputNumber from "@/components/inputs/inputNumber"
+import Checkbox from "@/components/inputs/checkbox"
+import PageSubtitle from "@/components/pageSubtitle"
+import Spinner from "@/components/spinner"
+import ExternalButton from "@/components/buttons/externalButton"
+import InputText from "@/components/inputs/inputText"
+// import TableDropdown from "@/components/tableDropdown"
+const InputAnnexContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-gap: 10px;
+`
+
+const PageContainer = styled.div`
+  padding: 40px;
+`
+
+export default {
+  name: 'App',
+  components: {
+    ThemeProvider,
+    PageContainer,
+    InputNumber,
+    PageSubtitle,
+    Spinner,
+    Checkbox,
+    InputText,
+    ExternalButton,
+    iconWrapper,
+    Modal,
+  },
+  data() {
+    return {
+      num: 42,
+      inputValue: null,
+      checkedOption: 'button_1',
+      question: {
+        number_format_precision: 4,
+        number_min_allowed: 0,
+        number_max_allowed: 10,
+        unit_short_name: 'cm',
+      },
+      dropdownOpen: false,
+      isChecked: false,
+      listOptions: [
+        {
+          name: 'Option 1',
+          value: 'option_1',
+          disabled: true,
+        },
+        {
+          name: 'Option 2',
+          value: 'option_2',
+        },
+        {
+          name: 'Option 3',
+          value: 'option_3',
+        },
+        {
+          name: 'Option 4',
+          value: 'option_4',
+        },
+      ],
+      itemOptions: [
+        {
+          display_name: 'Test 1',
+          company_item_number: '123',
+          model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
+          id: 1,
+        },
+        {
+          display_name: 'Test 2',
+          company_item_number: '1234',
+          model: 'BTB-123',
+          id: 2,
+        },
+        {
+          display_name: 'Test 3',
+          company_item_number: '12345',
+          model: 'BTB-543',
+          id: 3,
+        },
+        {
+          display_name: 'Test 4',
+          company_item_number: '123456',
+          model: 'BTB-4930',
+          id: 4,
+        },
+      ],
+    }
+  },
+  methods: {
+    keydownHandler(e) {
+      console.log('test', e)
+    },
+    getTheme() {
+      return theme
+    },
+    onInputChange(event) {
+      this.inputValue = event
+    },
+    isDropdownOpen() {
+      return this.dropdownOpen
+    },
+    onClickButton() {
+      console.log('Test')
+    },
+    toggleDropdownOpen() {
+      this.dropdownOpen = !this.dropdownOpen
+    },
+    getDropdownValues() {
+      let items = []
+      items = [
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: 'display_name',
+          }),
+        },
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: 'company_item_number',
+          }),
+        },
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: 'model',
+          }),
+        },
+      ]
+      return items
+    },
+    getComponentInfo({ row, value }) {
+      let item
+      if (row.selectedValue && row.selectedValue[value]) {
+        item = row.selectedValue[value]
+      } else if (row[value]) {
+        item = row[value]
+      } else {
+        item = '-'
+      }
+      return item
+    }
+  }
+}
+</script>
+
+<style>
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
 </style>

package/src/assets/icons/arrow_down.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
-</svg>
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
+</svg>

package/src/assets/icons/arrow_up_red.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
-</svg>
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
+</svg>

package/src/assets/icons/black_spinner.svg

@@ -1,36 +1,36 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-<g transform="rotate(0 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(45 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(90 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(135 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(180 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(225 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(270 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(315 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
-  </rect>
-</g>
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(45 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(135 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(225 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(315 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g>
 <!-- [ldio] generated by https://loading.io/ --></svg>

package/src/assets/icons/delete_icon.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #ff5656;
-        fill-rule: evenodd;
-      }
-    </style>
-  </defs>
-  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ff5656;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
+</svg>

package/src/assets/icons/delete_icon_gray.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #DEE2EB;
-        fill-rule: evenodd;
-      }
-    </style>
-  </defs>
-  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #DEE2EB;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
+</svg>

package/src/assets/icons/drag_icon.svg

@@ -1,8 +1,8 @@
-<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 2C4 3.10457 3.10457 4 2 4C0.89543 4 0 3.10457 0 2C0 0.89543 0.89543 0 2 0C3.10457 0 4 0.89543 4 2Z" fill="#B2B9C5"/>
-<path d="M10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2Z" fill="#B2B9C5"/>
-<path d="M4 8C4 9.10457 3.10457 10 2 10C0.89543 10 0 9.10457 0 8C0 6.89543 0.89543 6 2 6C3.10457 6 4 6.89543 4 8Z" fill="#B2B9C5"/>
-<path d="M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z" fill="#B2B9C5"/>
-<path d="M4 14C4 15.1046 3.10457 16 2 16C0.89543 16 0 15.1046 0 14C0 12.8954 0.89543 12 2 12C3.10457 12 4 12.8954 4 14Z" fill="#B2B9C5"/>
-<path d="M10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z" fill="#B2B9C5"/>
-</svg>
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2C4 3.10457 3.10457 4 2 4C0.89543 4 0 3.10457 0 2C0 0.89543 0.89543 0 2 0C3.10457 0 4 0.89543 4 2Z" fill="#B2B9C5"/>
+<path d="M10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2Z" fill="#B2B9C5"/>
+<path d="M4 8C4 9.10457 3.10457 10 2 10C0.89543 10 0 9.10457 0 8C0 6.89543 0.89543 6 2 6C3.10457 6 4 6.89543 4 8Z" fill="#B2B9C5"/>
+<path d="M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z" fill="#B2B9C5"/>
+<path d="M4 14C4 15.1046 3.10457 16 2 16C0.89543 16 0 15.1046 0 14C0 12.8954 0.89543 12 2 12C3.10457 12 4 12.8954 4 14Z" fill="#B2B9C5"/>
+<path d="M10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/icons/external_icon.svg

@@ -1,6 +1,6 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 4C0 1.79086 1.79086 0 4 0H30V30H4C1.79086 30 0 28.2091 0 26V4Z" fill="white" fill-opacity="0.1"/>
-<path d="M20.65 22H9.24995C8.54995 22 7.94995 21.4 7.94995 20.7V9.3C7.94995 8.6 8.54995 8 9.24995 8H13.95V10H10.85C10.35 10 9.94995 10.4 9.94995 10.9V19.2C9.94995 19.6 10.35 20 10.85 20H19.15C19.65 20 20.05 19.6 20.05 19.1V16H22.05V20.7C21.95 21.4 21.35 22 20.65 22Z" fill="white"/>
-<path d="M15.95 8H21.95V14L15.95 8Z" fill="white"/>
-<path d="M20.809 10.6108L19.3948 9.19659L12.2531 16.3383L13.6673 17.7525L20.809 10.6108Z" fill="white"/>
-</svg>
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H30V30H4C1.79086 30 0 28.2091 0 26V4Z" fill="white" fill-opacity="0.1"/>
+<path d="M20.65 22H9.24995C8.54995 22 7.94995 21.4 7.94995 20.7V9.3C7.94995 8.6 8.54995 8 9.24995 8H13.95V10H10.85C10.35 10 9.94995 10.4 9.94995 10.9V19.2C9.94995 19.6 10.35 20 10.85 20H19.15C19.65 20 20.05 19.6 20.05 19.1V16H22.05V20.7C21.95 21.4 21.35 22 20.65 22Z" fill="white"/>
+<path d="M15.95 8H21.95V14L15.95 8Z" fill="white"/>
+<path d="M20.809 10.6108L19.3948 9.19659L12.2531 16.3383L13.6673 17.7525L20.809 10.6108Z" fill="white"/>
+</svg>