@eturnity/eturnity_reusable_components 7.20.0--EPDM-9013.2 → 7.20.0--EPDM-10564.4

package/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ['@vue/cli-plugin-babel/preset']
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.20.0--EPDM-9013.2",
+  "version": "7.20.0--EPDM-10564.4",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -23,7 +23,6 @@
   },
   "devDependencies": {
     "@babel/core": "7.12.16",
-    "@babel/eslint-parser": "7.12.16",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",

package/src/assets/svgIcons/height_equalize.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99482 2.7C4.49188 2.7 4.89482 2.29706 4.89482 1.8C4.89482 1.30294 4.49188 0.9 3.99482 0.9C3.49777 0.9 3.09482 1.30294 3.09482 1.8C3.09482 2.29706 3.49777 2.7 3.99482 2.7ZM5.79482 1.8C5.79482 2.50671 5.38756 3.11829 4.79492 3.41285V4H5.80557L4.00557 6L2.20557 4H3.19492L3.19492 3.41294C2.60218 3.11842 2.19482 2.50678 2.19482 1.8C2.19482 0.805887 3.00071 0 3.99482 0C4.98894 0 5.79482 0.805887 5.79482 1.8ZM10.8948 1.8C10.8948 2.29706 10.4919 2.7 9.99482 2.7C9.49777 2.7 9.09482 2.29706 9.09482 1.8C9.09482 1.30294 9.49777 0.9 9.99482 0.9C10.4919 0.9 10.8948 1.30294 10.8948 1.8ZM10.7949 3.41285C11.3876 3.11829 11.7948 2.50671 11.7948 1.8C11.7948 0.805887 10.9889 0 9.99482 0C9.00071 0 8.19482 0.805887 8.19482 1.8C8.19482 2.50678 8.60218 3.11842 9.19492 3.41294V4H8.20557L10.0056 6L11.8056 4H10.7949V3.41285ZM14 7.79999L0 7.79999V6.19999L14 6.19999V7.79999ZM7.00518 11.3C6.50812 11.3 6.10518 11.7029 6.10518 12.2C6.10518 12.6971 6.50812 13.1 7.00518 13.1C7.50223 13.1 7.90518 12.6971 7.90518 12.2C7.90518 11.7029 7.50223 11.3 7.00518 11.3ZM5.20518 12.2C5.20518 11.4933 5.61244 10.8817 6.20508 10.5872L6.20508 10H5.19443L6.99443 8L8.79443 10H7.80508V10.5871C8.39782 10.8816 8.80518 11.4932 8.80518 12.2C8.80518 13.1941 7.99929 14 7.00518 14C6.01106 14 5.20518 13.1941 5.20518 12.2Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/height_snap.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.59997L14 1.59998V-2.44379e-05L0 -2.56618e-05V1.59997ZM6.10274 12.2C6.10274 11.7029 6.50568 11.3 7.00274 11.3C7.49979 11.3 7.90274 11.7029 7.90274 12.2C7.90274 12.6971 7.49979 13.1 7.00274 13.1C6.50568 13.1 6.10274 12.6971 6.10274 12.2ZM6.20264 10.5872C5.61 10.8817 5.20274 11.4933 5.20274 12.2C5.20274 13.1941 6.00862 14 7.00274 14C7.99685 14 8.80274 13.1941 8.80274 12.2C8.80274 11.4932 8.39538 10.8816 7.80264 10.5871L7.80264 4.65002H9.5L7 2.65002L4.5 4.65002H6.20264L6.20264 10.5872Z" fill="#B2B9C5"/>
+</svg>

package/src/components/filter/filterSettings.vue

@@ -100,10 +100,12 @@
                 <option-title> {{ filter.selectedText }} </option-title>
               </template>
               <template #dropdown>
-                <dropdown-checkbox-container @click.stop>
+                <dropdown-checkbox-container
+                  v-for="(filterOption, optionIdx) in filter.choices"
+                  :key="optionIdx + 'optionIdx'"
+                  @click.stop
+                >
                   <checkbox
-                    v-for="(filterOption, optionIdx) in filter.choices"
-                    :key="optionIdx + 'optionIdx'"
                     :label="filterOption.text"
                     :isChecked="filterOption.selected"
                     @on-event-handler="
@@ -376,7 +378,7 @@ const DropdownCheckboxContainer = styled.div`
   display: grid;
   gap: 6px;
   width: 100%;
-  padding: 12px 10px;
+  padding: 7px 10px;
   background: ${(props) => props.theme.colors.grey5};
 `
 

package/src/components/infoText/index.vue

@@ -26,7 +26,7 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     size="20"
+//     size="20px"
 //     alignArrow="right" // which side the arrow should be on
 // />
 import theme from '../../assets/theme.js'

package/src/components/inputs/inputNumber/index.vue

@@ -560,7 +560,7 @@ export default {
       try {
         evaluatedVal = this.onEvaluateCode(event)
       } finally {
-        if (evaluatedVal) {
+        if (evaluatedVal && this.value != evaluatedVal) {
           this.$emit('on-input', evaluatedVal)
         }
       }
@@ -646,10 +646,10 @@ export default {
       }
     },
     initInteraction(e) {
+      this.focusInput()
+      e.preventDefault()
       window.addEventListener('mousemove', this.interact, false)
       window.addEventListener('mouseup', this.stopInteract, false)
-      e.preventDefault()
-      this.focusInput()
     },
     interact(e) {
       e.preventDefault()

package/src/components/inputs/select/index.vue

@@ -1,12 +1,14 @@
 <template>
   <Container
     :selectWidth="selectWidth"
+    :noRelative="noRelative"
     @mouseenter="mouseEnterHandler"
     @mouseleave="mouseLeaveHandler"
   >
     <input-wrapper
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
+      :noRelative="noRelative"
     >
       <label-wrapper v-if="label" :data-id="labelDataId">
         <input-label
@@ -47,6 +49,9 @@
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
+          :tablePaddingLeft="tablePaddingLeft"
+          :noRelative="noRelative"
+          :showDisabledBackground="showDisabledBackground"
         >
           <draggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
@@ -76,7 +81,7 @@
           >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
-          <Caret @click.stop="toggleCaretDropdown">
+          <Caret @click.stop="toggleCaretDropdown" class="caret_dropdown">
             <icon
               v-if="isDropdownOpen"
               name="arrow_up"
@@ -99,7 +104,7 @@
             />
           </Caret>
         </selectButton>
-        <DropdownWrapper ref="dropdownWrapperRef">
+        <DropdownWrapper ref="dropdownWrapperRef" :noRelative="noRelative">
           <Teleport to="#portal-target">
             <selectDropdown
               ref="dropdown"
@@ -118,10 +123,13 @@
               :fontColor="
                 dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
               "
+              :noRelative="noRelative"
               :fontSize="fontSize"
+              :minWidth="minWidth"
               :selectedValue="selectedValue"
               @option-selected="optionSelected"
               @option-hovered="optionHovered"
+              @mouseleave="optionLeave"
             >
               <slot name="dropdown"></slot>
             </selectDropdown>
@@ -212,11 +220,12 @@ const optionalLabel = styled.span`
 `
 const inputProps = {
   selectWidth: String,
-  optionWidth: String
+  optionWidth: String,
+  noRelative: Boolean
 }
 const Container = styled('div', inputProps)`
   width: ${(props) => props.selectWidth};
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: inline-block;
 `
 const LabelWrapper = styled.div`
@@ -245,13 +254,22 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   hasNoPadding: Boolean,
   showBorder: Boolean,
-  paddingLeft: String
+  paddingLeft: String,
+  noRelative: Boolean,
+  tablePaddingLeft: String,
+  showDisabledBackground: Boolean
 }
 const selectButton = styled('div', selectButtonAttrs)`
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   box-sizing: border-box;
   border-radius: 4px;
   max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
+  ${(props) =>
+    props.isSearchBarVisible
+      ? ''
+      : `padding-left: ${
+          props.tablePaddingLeft ? props.tablePaddingLeft : props.paddingLeft
+        }`};
   ${(props) =>
     props.hasNoPadding ? '' : `padding-left: ${props.paddingLeft}`};
   text-align: left;
@@ -274,7 +292,7 @@ const selectButton = styled('div', selectButtonAttrs)`
     }
   `}
   background-color:${(props) =>
-    props.disabled
+    props.disabled && props.showDisabledBackground
       ? props.theme.colors.grey5
       : props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -300,13 +318,16 @@ const selectDropdownAttrs = {
   fontSize: String,
   dropdownPosition: Object,
   hoveredValue: Number | String,
-  selectedValue: Number | String
+  selectedValue: Number | String,
+  noRelative: Boolean,
+  minWidth: String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
   box-sizing: border-box;
   z-index: ${(props) => (props.isActive ? '2' : '99999')};
   position: absolute;
-  top: ${(props) => props.dropdownPosition?.top}px;
+  top: ${(props) =>
+    props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
   left: ${(props) => props.dropdownPosition?.left}px;
   border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
@@ -315,7 +336,13 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
   align-items: flex-start;
   padding: 0px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  width: ${(props) => (props.optionWidth ? props.optionWidth : 'auto')};
+  width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
+  min-width: ${(props) =>
+    props.minWidth
+      ? props.minWidth
+      : props.optionWidth
+      ? props.optionWidth
+      : '100%'};
   background-color: ${(props) =>
     props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -335,12 +362,17 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
   font-size: ${(props) => props.fontSize};
 `
 selectDropdown.emits = ['option-hovered', 'option-selected']
-const DropdownWrapper = styled('div')`
-  position: relative;
+const DropdownAttrs = { noRelative: Boolean }
+const DropdownWrapper = styled('div', DropdownAttrs)`
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
 `
-const inputAttrs = { alignItems: String, hasLabel: Boolean }
+const inputAttrs = {
+  alignItems: String,
+  hasLabel: Boolean,
+  noRelative: Boolean
+}
 const InputWrapper = styled('div', inputAttrs)`
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: grid;
   align-items: center;
   gap: 8px;
@@ -369,6 +401,10 @@ export default {
       required: false,
       default: '13px'
     },
+    noRelative: {
+      required: false,
+      default: false
+    },
     label: {
       required: false
     },
@@ -401,6 +437,9 @@ export default {
       required: false,
       default: '36px'
     },
+    minWidth: {
+      required: false
+    },
     optionWidth: {
       required: false,
       default: null
@@ -476,6 +515,13 @@ export default {
       type: Boolean,
       default: false
     },
+    tablePaddingLeft: {
+      required: false
+    },
+    showDisabledBackground: {
+      required: false,
+      default: true
+    },
     minOptionLength: {
       type: Number,
       default: MIN_OPTION_LENGTH

package/src/components/inputs/select/option/index.vue

@@ -16,6 +16,7 @@
     :disabledTextColor="disabledTextColor"
     :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
     :title="hoverText"
+    :minWidth="minWidth"
     :padding="padding"
   >
     <slot></slot>
@@ -31,6 +32,7 @@ const optionProps = {
   hoveredBgColor: String,
   cursorType: String,
   backgroundColor: String,
+  minWidth: String,
   disabledBgColor: String,
   disabledTextColor: String,
   padding: String
@@ -44,6 +46,7 @@ const optionContainer = styled('div', optionProps)`
   padding: ${(props) => props.padding};
   gap: 14px;
   width: 100%;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors[props.disabledBgColor]
@@ -106,6 +109,9 @@ export default {
       required: false,
       default: false
     },
+    minWidth: {
+      required: false
+    },
     disabledBgColor: {
       required: false,
       default: 'white'

package/src/components/markerItem/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <page-container>
+    <marker-container
+      :backgroundColor="backgroundColor"
+      :hasIcon="!!iconName"
+      :cursor="cursor"
+    >
+      <icon
+        v-if="!!iconName"
+        :name="iconName"
+        color="white"
+        size="10px"
+        :cursor="cursor"
+      />
+      <span>{{ label }}</span>
+    </marker-container>
+  </page-container>
+</template>
+
+<script>
+// import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
+// To use:
+// <marker-item
+//   label="Label"
+//   backgroundColor="#ab5348"
+//   iconName="icon_name"
+//   cursor="pointer"
+// />
+
+import styled from 'vue3-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 14px;
+`
+
+const MarkerAttrs = {
+  backgroundColor: String,
+  hasIcon: Boolean,
+  cursor: String
+}
+const MarkerContainer = styled('div', MarkerAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
+  grid-gap: 5px;
+  position: relative;
+  align-items: center;
+  padding: 2px 7px;
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) =>
+    props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border: 1px solid
+    ${(props) =>
+      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
+`
+
+export default {
+  name: 'project-marker',
+  components: {
+    PageContainer,
+    MarkerContainer,
+    Icon
+  },
+  props: {
+    backgroundColor: {
+      required: false
+    },
+    iconName: {
+      required: false
+    },
+    label: {
+      required: true
+    },
+    cursor: {
+      required: false,
+      default: 'default'
+    }
+  }
+}
+</script>

package/src/components/pageTitle/index.vue

@@ -3,11 +3,7 @@
     <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
       {{ text }}
     </title-text>
-    <info-text
-      v-if="!!infoText"
-      :text="infoText"
-      :alignArrow="infoAlign"
-    />
+    <info-text v-if="!!infoText" :text="infoText" :alignArrow="infoAlign" />
   </title-wrap>
 </template>
 
@@ -18,16 +14,16 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from "vue3-styled-components"
-import InfoText from "../infoText"
+import styled from 'vue3-styled-components'
+import InfoText from '../infoText'
 
 const wrapAttrs = { hasInfoText: Boolean }
-const TitleWrap = styled("div", wrapAttrs)`
+const TitleWrap = styled('div', wrapAttrs)`
   display: grid;
   align-items: center;
   grid-gap: 12px;
   grid-template-columns: ${(props) =>
-    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+    props.hasInfoText ? 'auto auto 1fr' : '1fr'};
   margin-bottom: 20px;
 `
 
@@ -35,7 +31,7 @@ const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
 `
 
@@ -54,8 +50,7 @@ export default {
       required: false
     },
     fontSize: {
-      required: false,
-      default: '16px'
+      required: false
     },
     uppercase: {
       required: false,
@@ -63,11 +58,11 @@ export default {
     },
     infoText: {
       required: false,
-      default: null,
+      default: null
     },
     infoAlign: {
-      required: false,
+      required: false
     }
-  },
+  }
 }
 </script>

package/src/components/tableDropdown/index.vue

@@ -40,7 +40,12 @@
             "
             @click.stop="onSelectedTemplateClick(item.row)"
           >
-            <img :src="fileIcon" alt="icon" width="12" height="16" />
+            <!-- <img :src="fileIcon" alt="icon" width="12" height="16" /> -->
+            <icon
+              name="template_icon_not_clickable"
+              :color="theme.colors.brightBlue"
+              size="14px"
+            />
             <div>{{ item.value }}</div>
           </template-link>
           <no-template v-if="item.type && item.type === 'no-template'">
@@ -178,6 +183,8 @@ import InputText from '../inputs/inputText'
 import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
 import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
 import fileIconPng from '../../assets/icons/file_icon.png'
+import Icon from '../icon'
+import theme from '@/assets/theme.js'
 
 const rowAttrs = { disabled: Boolean, isOpen: Boolean }
 const DropdownRow = styled('div', rowAttrs)`
@@ -273,6 +280,7 @@ const ArrowWrapper = styled('div', arrowAttrs)`
 const optionsAttrs = { top: Number, left: Number }
 const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
+  margin-top: 10px;
   display: grid;
   grid-template-rows: 1fr auto;
   left: 20px;
@@ -307,10 +315,6 @@ const OptionsWrapper = styled.div`
 
 const OptionsItem = styled('div', containerAttrs)`
   display: grid;
-  /* grid-template-columns: 1fr repeat(
-      ${(props) => props.colSpan},
-      minmax(50px, auto)
-    ); */
   grid-template-columns: ${(props) => props.width};
   grid-gap: 30px;
   padding: 10px;
@@ -343,6 +347,7 @@ const TemplateButton = styled.div`
   display: inline-block;
   border-radius: 4px;
   text-align: center;
+  margin-left: 15px;
 `
 
 const NoTemplate = styled.div`
@@ -350,14 +355,16 @@ const NoTemplate = styled.div`
   font-style: italic;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-left: 15px;
 `
 
 const TemplateLink = styled.div`
-  color: ${(props) => props.theme.colors.purple};
+  color: ${(props) => props.theme.colors.brightBlue};
   cursor: pointer;
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 12px;
+  padding-left: 15px;
 `
 
 const InputContainer = styled.div`
@@ -433,7 +440,8 @@ export default {
     ArrowContainer,
     TextContainer,
     NestedIcon,
-    NestedContainer
+    NestedContainer,
+    Icon
   },
   props: {
     colSpan: {
@@ -599,6 +607,9 @@ export default {
   computed: {
     getCustomName() {
       return this.inputText
+    },
+    theme() {
+      return theme
     }
   },
   watch: {

package/src/assets/svgIcons/bexio.svg

@@ -1,4 +0,0 @@
-<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.462 8.46H12.894C12.7848 8.46 12.697 8.4327 12.6307 8.37809C12.5683 8.32349 12.5176 8.26108 12.4786 8.19087L10.5186 4.94378C10.4874 5.04129 10.4504 5.12514 10.4075 5.19535L8.52943 8.19087C8.48263 8.25718 8.42802 8.31958 8.36562 8.37809C8.30711 8.4327 8.2291 8.46 8.13159 8.46H6.66309L9.47138 4.10714L6.77425 0H8.34221C8.45143 0 8.52943 0.0156017 8.57624 0.0468051C8.62694 0.0741079 8.67375 0.120913 8.71665 0.18722L10.6415 3.28805C10.6805 3.19054 10.7273 3.09303 10.7819 2.99552L12.5488 0.216473C12.5917 0.142365 12.6385 0.0877595 12.6892 0.052656C12.7399 0.017552 12.8043 0 12.8823 0H14.3859L11.6654 4.04278L14.462 8.46Z" fill="#263238"/>
-<path d="M3.16519 7.23137C3.45772 7.23137 3.70344 7.19627 3.90237 7.12606C4.10129 7.05585 4.25925 6.96224 4.37627 6.84523C4.49718 6.72822 4.58299 6.5917 4.63369 6.43569C4.6883 6.27967 4.7156 6.1139 4.7156 5.93838C4.7156 5.75506 4.68635 5.59124 4.62784 5.44693C4.56934 5.29871 4.47768 5.1739 4.35286 5.07249C4.22805 4.96718 4.06618 4.88722 3.86726 4.83261C3.67224 4.77801 3.43627 4.75071 3.15934 4.75071H1.57382V7.23137H3.16519ZM1.57382 1.21693V3.66249H2.82585C3.36411 3.66249 3.76975 3.56498 4.04278 3.36996C4.31971 3.17494 4.45817 2.86486 4.45817 2.43971C4.45817 1.99896 4.33336 1.68498 4.08373 1.49776C3.83411 1.31054 3.44407 1.21693 2.91361 1.21693H1.57382ZM2.91361 0C3.46747 0 3.94137 0.0526557 4.33531 0.157967C4.72925 0.263278 5.05104 0.413444 5.30066 0.608465C5.55419 0.803486 5.73946 1.03946 5.85647 1.31639C5.97349 1.59332 6.03199 1.90535 6.03199 2.25249C6.03199 2.45141 6.00274 2.64253 5.94423 2.82585C5.88573 3.00527 5.79407 3.17494 5.66925 3.33485C5.54834 3.49087 5.39232 3.63324 5.2012 3.76195C5.01398 3.89066 4.78971 3.99988 4.52838 4.08959C5.69071 4.35091 6.27187 4.97888 6.27187 5.97349C6.27187 6.33232 6.20361 6.66386 6.0671 6.96809C5.93058 7.27232 5.73166 7.5356 5.47033 7.75793C5.209 7.97635 4.88722 8.14797 4.50498 8.27278C4.12274 8.39759 3.68589 8.46 3.19444 8.46H0V0H2.91361Z" fill="#263238"/>
-</svg>

package/src/assets/svgIcons/data_transfer.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H6V16H2V2H16V16H12V18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.11 0 16 0ZM9 6L5 10H8V18H10V10H13L9 6Z" fill="#263238"/>
-</svg>