@eturnity/eturnity_reusable_components 1.2.29-3d-master.1 → 1.2.29-EPDM-2942.2

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

@@ -1,10 +1,5 @@
 <template>
-  <container :inputWidth="inputWidth" :alignItems="alignItems">
-    <label-slot-wrapper v-if="hasLabelSlot" :isInteractive="isInteractive" @mousedown="initInteraction">
-
-      <slot name="label"></slot>
-    </label-slot-wrapper>
-    
+  <container :inputWidth="inputWidth">
     <label-wrapper v-if="labelText">
       <label-text>
         {{ labelText }}
@@ -24,23 +19,21 @@
         :hasUnit="unitName && !!unitName.length"
         :placeholder="displayedPlaceholder"
         :isError="isError"
+        :inputWidth="inputWidth"
         :inputHeight="inputHeight"
         :minWidth="minWidth"
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @keyup.enter="$emit('on-enter-click')"
-        @input="onInput($event)"
         :disabled="disabled"
         :isDisabled="disabled"
         :noBorder="noBorder"
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
-        :backgroundColor="backgroundColor"
         v-on="$listeners"
         :hasSlot="hasSlot"
-        :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
       />
       <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
@@ -108,21 +101,14 @@ const inputProps = {
   textAlign: String,
   fontSize: String,
   fontColor: String,
-  backgroundColor:String,
   hasSlot: Boolean,
-  hasLabelSlot: Boolean,
   slotSize: String,
-  inputHeight:String,
-  isInteractive:Boolean,
-  alignItems:String
+  inputHeight: String
 }
 
 const Container = styled('div', inputProps)`
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
-  display:grid;
-  grid-template-columns: ${(props) =>
-    props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
 `
 
 const InputContainer = styled('input', inputProps)`
@@ -131,13 +117,15 @@ const InputContainer = styled('input', inputProps)`
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : '1px solid ' + props.theme.colors.mediumGray};
+      : '1px solid ' + props.theme.colors.grey4};
   padding-top: 11px;
   padding-bottom: 11px;
   padding-left: 10px;
   padding-right: ${(props) =>
     props.slotSize
       ? 'calc(' + props.slotSize + ' + 10px)'
+      : props.hasUnit
+      ? '40px'
       : '5px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
@@ -145,22 +133,20 @@ const InputContainer = styled('input', inputProps)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   color: ${(props) =>
     props.isError
-      ? props.theme.colors.red
+      ? props.theme.colors.grey6
+      : props.isDisabled
+      ? props.theme.colors.grey2
       : props.fontColor
       ? props.fontColor + ' !important'
       : props.theme.colors.black};
-  background-color:${(props) => props.backgroundColor
-    ? props.backgroundColor+' !important'
-    : props.theme.colors.white};
-  width: ${(props) => (props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%')};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
   box-sizing: border-box;
-  max-height: ${(props) => (props.inputHeight)};
+  max-height: ${(props) => props.inputHeight};
   &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+    color: ${(props) => props.theme.colors.grey2};
   }
 
   &:focus {
@@ -225,22 +211,16 @@ const SlotContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-const LabelWrapper = styled('div',inputProps)`
+const LabelWrapper = styled.div`
   display: flex;
   gap: 10px;
   margin-bottom: 8px;
-  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
-`
-const LabelSlotWrapper = styled('div',inputProps)`
-  display: flex;
-  gap: 10px;
-  align-items:center;
-  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
 `
 
 const LabelText = styled.div`
-  font-weight: bold;
   font-size: 13px;
+  color: ${(props) => props.theme.colors.eturnityGrey};
+  font-weight: 700;
 `
 
 export default {
@@ -252,18 +232,17 @@ export default {
     UnitContainer,
     ErrorMessage,
     LabelWrapper,
-    LabelSlotWrapper,
     LabelText,
     InfoText,
     Icon,
-    SlotContainer,
+    SlotContainer
   },
   inheritAttrs: false,
   data() {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon,
+      warningIcon: warningIcon
     }
   },
   props: {
@@ -283,9 +262,9 @@ export default {
       required: false,
       default: null
     },
-    inputHeight:{
-      required:false,
-      default:null
+    inputHeight: {
+      required: false,
+      default: null
     },
     value: {
       required: true,
@@ -295,10 +274,6 @@ export default {
       required: false,
       default: false
     },
-    alignItems: {
-      required: false,
-      default: "vertical",
-    },
     errorMessage: {
       required: false,
       default: 'Please insert a correct number'
@@ -331,14 +306,6 @@ export default {
       required: false,
       default: '13px'
     },
-    isInteractive: {
-      required: false,
-      default: false
-    },
-    interactionStep:{
-      required:false,
-      default:1
-    },
     labelText: {
       required: false,
       default: null
@@ -359,10 +326,6 @@ export default {
       required: false,
       default: null
     },
-    backgroundColor: {
-      required: false,
-      default: null
-    },
     numberToStringEnabled: {
       required: false,
       default: true
@@ -377,6 +340,10 @@ export default {
       type: String,
       default: ''
     },
+    allowNegative: {
+      required: false,
+      default: true
+    },
     inputIconImageClass: {
       require: false,
       type: Array,
@@ -394,18 +361,18 @@ export default {
     hasSlot() {
       return !!this.$slots.default
     },
-    hasLabelSlot(){
-      return !!this.$slots.label
-    },
     computedSlotSize() {
       return this.slotSize || this.$slots['default'][0].elm.clientWidth
     }
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event) || event=="") {
+      if (isNaN(event) || event == '') {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
+      if (!this.allowNegative) {
+        event = Math.abs(event)
+      }
       this.$emit('input-change', event)
     },
     onEvaluateCode(val) {
@@ -438,15 +405,11 @@ export default {
           value: evaluated,
           numberPrecision: this.numberPrecision
         })
-      }else if(typeof evaluated === 'number'){
-        evaluated=evaluated.toFixed(this.numberPrecision)
+      } else if (typeof evaluated === 'number') {
+        evaluated = evaluated.toFixed(this.numberPrecision)
       }
       return evaluated
     },
-    onInput(value){
-      let evaluatedInput = this.onEvaluateCode(value)
-      this.$emit('on-input',evaluatedInput)
-    },
     onInputBlur(e) {
       this.isFocused = false
       let value = e.target.value
@@ -460,11 +423,11 @@ export default {
         })
       }
       let adjustedMinValue =
-      evaluatedInput && evaluatedInput.length
+        evaluatedInput && evaluatedInput.length
           ? evaluatedInput
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''  
+          : ''
       this.$emit('input-blur', adjustedMinValue)
     },
     focusInput() {
@@ -504,31 +467,7 @@ export default {
             })
           : adjustedMinValue
       }
-    },
-    initInteraction(e) {
-      window.addEventListener('mousemove', this.interact, false);
-      window.addEventListener('mouseup', this.stopInteract, false);
-      e.preventDefault() 
-    },
-    interact(e) {
-      e.preventDefault() 
-      let value=parseInt(this.value || 0)
-      
-      value+=parseFloat(this.interactionStep)*parseInt(e.movementX)
-      this.$emit('on-input',value)
-
-      this.textInput=numberToString({
-          value:
-          value && value.length ? value : this.minNumber,
-          numberPrecision: this.numberPrecision
-        })
-      //this.value=value
-    },
-    stopInteract(e) {
-      e.preventDefault() 
-        window.removeEventListener('mousemove', this.interact, false);
-        window.removeEventListener('mouseup', this.stopInteract, false);
-    },
+    }
   },
   created() {
     if (this.value) {
@@ -552,4 +491,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -14,33 +14,38 @@
           :alignText="infoTextAlign"
         />
       </label-wrapper>
-      <icon-container>
-        <input-container
-          :placeholder="placeholder"
-          :isError="isError"
-          :inputWidth="inputWidth"
-          :minWidth="minWidth"
-          :value="value"
-          @input="onChangeHandler"
-          @blur="onInputBlur"
-          :noBorder="noBorder"
-          :disabled="disabled"
-          :isDisabled="disabled"
-          :fontSize="fontSize"
-          :inputType="inputType"
-          :type="inputTypeData"
-        />
-        <icon-wrapper
-          v-if="inputType === 'password' && !isError"
-          @click="toggleShowPassword()"
-          size="20px"
-        >
-          <icon name="current_variant" size="20px" />
-        </icon-wrapper>
-        <icon-wrapper v-if="isError" size="16px">
-          <icon name="warning" size="16px" cursor="default" />
-        </icon-wrapper>
-      </icon-container>
+      <input-error-wrapper>
+        <icon-container>
+          <input-container
+            :placeholder="placeholder"
+            :isError="isError"
+            :inputWidth="inputWidth"
+            :minWidth="minWidth"
+            :value="value"
+            @input="onChangeHandler"
+            @blur="onInputBlur"
+            :noBorder="noBorder"
+            :disabled="disabled"
+            :isDisabled="disabled"
+            :fontSize="fontSize"
+            :inputType="inputType"
+            :type="inputTypeData"
+          />
+          <icon-wrapper
+            v-if="inputType === 'password' && !isError"
+            @click="toggleShowPassword()"
+            size="20px"
+          >
+            <icon name="current_variant" size="20px" />
+          </icon-wrapper>
+          <icon-wrapper v-if="isError" size="16px">
+            <icon name="warning" size="16px" cursor="default" />
+          </icon-wrapper>
+        </icon-container>
+        <error-message v-if="isError && errorMessage">{{
+          errorMessage
+        }}</error-message>
+      </input-error-wrapper>
     </input-wrapper>
   </container>
 </template>
@@ -49,21 +54,18 @@
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
+import ErrorMessage from '../../errorMessage'
 
 const Container = styled.div`
   width: 100%;
   position: relative;
 `
-const InputErrorWrapper = styled.div`
-  display: inline-grid;
-  grid-template-row: auto auto;
-  grid-gap: 0px;
-  align-items: center;
-`
+
 const labelAttrs = { fontSize: String }
 const InputLabel = styled('div', labelAttrs)`
-  font-weight: bold;
+  color: ${(props) => props.theme.colors.eturnityGrey};
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-weight: 700;
 `
 
 const LabelWrapper = styled.div`
@@ -74,6 +76,13 @@ const LabelWrapper = styled.div`
   justify-content: start;
 `
 
+const InputErrorWrapper = styled.div`
+  display: inline-grid;
+  grid-template-row: auto auto;
+  grid-gap: 0px;
+  align-items: center;
+`
+
 const inputProps = {
   isError: Boolean,
   inputWidth: String,
@@ -89,9 +98,7 @@ const InputContainer = styled('input', inputProps)`
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : props.hasLength
-      ? '1px solid ' + props.theme.colors.black
-      : '1px solid ' + props.theme.colors.mediumGray};
+      : '1px solid ' + props.theme.colors.grey4};
   padding: ${(props) =>
     props.isError
       ? '11px 25px 11px 10px'
@@ -102,7 +109,11 @@ const InputContainer = styled('input', inputProps)`
   position: relative;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   color: ${(props) =>
-    props.isError ? props.theme.colors.red : props.theme.colors.black};
+    props.isError
+      ? props.theme.colors.grey6
+      : props.isDisabled
+      ? props.theme.colors.grey2
+      : props.theme.colors.black};
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   box-sizing: border-box; // to allow width of 100% with padding
@@ -112,8 +123,7 @@ const InputContainer = styled('input', inputProps)`
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
 
   &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+    color: ${(props) => props.theme.colors.grey2};
   }
 
   &:focus {
@@ -131,13 +141,6 @@ const InputWrapper = styled('div', inputAttrs)`
     props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
 `
 
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
-
 const IconAttrs = { size: String }
 const IconWrapper = styled('div', IconAttrs)`
   position: absolute;
@@ -178,11 +181,11 @@ export default {
     ErrorMessage,
     InfoText,
     InputLabel,
-    InputErrorWrapper,
     LabelWrapper,
     Icon,
     IconWrapper,
-    IconContainer
+    IconContainer,
+    InputErrorWrapper
   },
   data() {
     return {

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

@@ -25,8 +25,9 @@
 //   :value="companyName"
 //   :disabled="true"
 //   inputWidth="250px"
+//   @on-change="function($event)"
 // />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const Container = styled.div`
   width: 100%;
@@ -34,15 +35,15 @@ const Container = styled.div`
 `
 
 const inputAttrs = { isDisabled: Boolean, inputWidth: String }
-const InputContainer = styled("input", inputAttrs)`
+const InputContainer = styled('input', inputAttrs)`
   border: 1px solid ${(props) => props.theme.colors.mediumGray};
   padding: 11px 30px 11px 10px;
   border-radius: 4px;
-  font-size: 16px;
+  font-size: 13px;
   color: ${(props) => props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   box-sizing: border-box;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   background: ${(props) => props.theme.colors.white} !important;
   &::placeholder {
     color: ${(props) => props.theme.colors.darkGray};
@@ -65,33 +66,33 @@ const InputWrapper = styled.span`
 `
 
 export default {
-  name: "search-input",
+  name: 'search-input',
   components: {
     InputContainer,
     InputWrapper,
-    Container,
+    Container
   },
   props: {
     value: {
-      required: true,
+      required: true
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     placeholder: {
       required: false,
-      default: "",
+      default: ''
     },
     inputWidth: {
       required: false,
-      default: null,
-    },
+      default: null
+    }
   },
   methods: {
     onChangeHandler(event) {
-      this.$emit("on-change", event)
-    },
-  },
+      this.$emit('on-change', event)
+    }
+  }
 }
 </script>

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

@@ -45,9 +45,11 @@
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
 //     :isDisabled="true"
+// .   fontSize="13px"
 // />
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
 
 const containerProps = { inputWidth: String }
 const Container = styled('div', containerProps)`
@@ -73,7 +75,7 @@ const InputContainer = styled('textarea', inputProps)`
   border: ${(props) =>
     props.isError
       ? '1px solid ' + props.theme.colors.red
-      : '1px solid ' + props.theme.colors.mediumGray};
+      : '1px solid ' + props.theme.colors.grey4};
   padding: ${(props) =>
     props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
   border-radius: 4px;
@@ -85,8 +87,7 @@ const InputContainer = styled('textarea', inputProps)`
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
   &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+    color: ${(props) => props.theme.colors.grey2};
   }
 
   &:focus {
@@ -108,13 +109,6 @@ const InputWrapper = styled('div', inputAttrs)`
       : 'auto 1fr'};
 `
 
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
-
 const labelAttrs = { fontSize: String }
 const InputLabel = styled('div', labelAttrs)`
   font-weight: bold;
@@ -175,11 +169,11 @@ export default {
     },
     inputWidth: {
       required: false,
-      default: null,
+      default: null
     },
-    resize:{
-      required:false,
-      default: "none"
+    resize: {
+      required: false,
+      default: 'none'
     }
   },
   methods: {

package/src/components/modals/modal/index.vue

@@ -1,6 +1,5 @@
 <template>
   <page-wrapper
-    :position="position"
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
@@ -37,9 +36,9 @@ const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
 
-const pageAttrs = { isOpen: Boolean, backdrop: String,position:String }
+const pageAttrs = { isOpen: Boolean, backdrop: String }
 const PageWrapper = styled('div', pageAttrs)`
-  position: ${(props) => props.position}
+  position: fixed;
   display: grid;
   top: 0;
   left: 0;
@@ -133,10 +132,6 @@ export default {
     backdrop: {
       required: false,
       default: 'white'
-    },
-    position: {
-      required: false,
-      default: 'fixed'
     }
   },
   methods: {

package/src/helpers/numberConverter.js

@@ -94,7 +94,6 @@ export const numberToString = ({ value, numberPrecision }) => {
       ? 'fr-fr'
       : localStorage.getItem('lang')
     : 'en-US'
-  if(selectedLang=="null"){selectedLang='en-US'}
   value=parseFloat(value)
   return value.toLocaleString(selectedLang, {
     minimumFractionDigits: numberPrecision,

package/src/assets/svgIcons/areas_tool.svg

@@ -1,14 +0,0 @@
-<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3.79834" y="3" width="12" height="1.6" transform="rotate(90 3.79834 3)" fill="#B2B9C5"/>
-<rect x="16.0015" y="2.80005" width="12" height="1.6" transform="rotate(-180 16.0015 2.80005)" fill="#B2B9C5"/>
-<rect x="16.0015" y="16.8" width="12" height="1.6" transform="rotate(-180 16.0015 16.8)" fill="#B2B9C5"/>
-<path d="M4.99854 2C4.99854 3.10457 4.1031 4 2.99854 4C1.89397 4 0.998535 3.10457 0.998535 2C0.998535 0.89543 1.89397 0 2.99854 0C4.1031 0 4.99854 0.89543 4.99854 2Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.99854 3C3.55082 3 3.99854 2.55228 3.99854 2C3.99854 1.44772 3.55082 1 2.99854 1C2.44625 1 1.99854 1.44772 1.99854 2C1.99854 2.55228 2.44625 3 2.99854 3ZM2.99854 4C4.1031 4 4.99854 3.10457 4.99854 2C4.99854 0.895431 4.1031 0 2.99854 0C1.89397 0 0.998535 0.895431 0.998535 2C0.998535 3.10457 1.89397 4 2.99854 4Z" fill="#B2B9C5"/>
-<rect x="17.7983" y="3" width="12" height="1.6" transform="rotate(90 17.7983 3)" fill="#B2B9C5"/>
-<path d="M19.0015 2C19.0015 3.10457 18.106 4 17.0015 4C15.8969 4 15.0015 3.10457 15.0015 2C15.0015 0.89543 15.8969 0 17.0015 0C18.106 0 19.0015 0.89543 19.0015 2Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0015 3C17.5537 3 18.0015 2.55228 18.0015 2C18.0015 1.44772 17.5537 1 17.0015 1C16.4492 1 16.0015 1.44772 16.0015 2C16.0015 2.55228 16.4492 3 17.0015 3ZM17.0015 4C18.106 4 19.0015 3.10457 19.0015 2C19.0015 0.895431 18.106 0 17.0015 0C15.8969 0 15.0015 0.895431 15.0015 2C15.0015 3.10457 15.8969 4 17.0015 4Z" fill="#B2B9C5"/>
-<path d="M19.0015 16C19.0015 17.1046 18.106 18 17.0015 18C15.8969 18 15.0015 17.1046 15.0015 16C15.0015 14.8954 15.8969 14 17.0015 14C18.106 14 19.0015 14.8954 19.0015 16Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0015 17C17.5537 17 18.0015 16.5523 18.0015 16C18.0015 15.4477 17.5537 15 17.0015 15C16.4492 15 16.0015 15.4477 16.0015 16C16.0015 16.5523 16.4492 17 17.0015 17ZM17.0015 18C18.106 18 19.0015 17.1046 19.0015 16C19.0015 14.8954 18.106 14 17.0015 14C15.8969 14 15.0015 14.8954 15.0015 16C15.0015 17.1046 15.8969 18 17.0015 18Z" fill="#B2B9C5"/>
-<path d="M4.99854 16C4.99854 17.1046 4.1031 18 2.99854 18C1.89397 18 0.998535 17.1046 0.998535 16C0.998535 14.8954 1.89397 14 2.99854 14C4.1031 14 4.99854 14.8954 4.99854 16Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.99854 17C3.55082 17 3.99854 16.5523 3.99854 16C3.99854 15.4477 3.55082 15 2.99854 15C2.44625 15 1.99854 15.4477 1.99854 16C1.99854 16.5523 2.44625 17 2.99854 17ZM2.99854 18C4.1031 18 4.99854 17.1046 4.99854 16C4.99854 14.8954 4.1031 14 2.99854 14C1.89397 14 0.998535 14.8954 0.998535 16C0.998535 17.1046 1.89397 18 2.99854 18Z" fill="#B2B9C5"/>
-</svg>

package/src/assets/svgIcons/base_layer.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="0.75" width="12.5" height="12.5" stroke="white" stroke-width="1.5"/>
-</svg>

package/src/assets/svgIcons/direction_arrow.svg

@@ -1,4 +0,0 @@
-<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="18" y="5.80005" width="12" height="1.6" transform="rotate(-180 18 5.80005)" fill="#B2B9C5"/>
-<path d="M-2.18557e-07 5L7 10L7 3.0598e-07L-2.18557e-07 5Z" fill="#B2B9C5"/>
-</svg>

package/src/assets/svgIcons/distance_tool.svg

@@ -1,8 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="18" y="8" width="10" height="1.6" transform="rotate(90 18 8)" fill="#B2B9C5"/>
-<rect x="1.6001" y="8" width="10" height="1.6" transform="rotate(90 1.6001 8)" fill="#B2B9C5"/>
-<path d="M5.19971 5.38V0.082216H6.07325C6.25138 0.082216 6.36957 0.164432 6.42781 0.328863L6.51002 0.673142C6.60251 0.577224 6.69672 0.488157 6.79264 0.405941C6.89198 0.323725 6.99818 0.253499 7.11123 0.195263C7.22427 0.133601 7.34588 0.0856414 7.47606 0.0513849C7.60966 0.0171283 7.75354 0 7.90769 0C8.23313 0 8.50204 0.0873543 8.71443 0.262063C8.92683 0.433346 9.08783 0.662865 9.19745 0.950621C9.28309 0.782763 9.38758 0.638886 9.5109 0.518988C9.63765 0.395664 9.77468 0.29632 9.92198 0.220955C10.0727 0.145591 10.2303 0.0907802 10.3947 0.0565236C10.5626 0.0188412 10.7304 0 10.8983 0C11.1963 0 11.4601 0.0445336 11.6896 0.133601C11.9191 0.222668 12.111 0.354556 12.2651 0.529264C12.4227 0.700548 12.5426 0.911226 12.6248 1.1613C12.707 1.41137 12.7482 1.6957 12.7482 2.01429V5.38H11.3299V2.01429C11.3299 1.39424 11.0644 1.08422 10.5335 1.08422C10.4136 1.08422 10.3022 1.10478 10.1995 1.14588C10.1001 1.18357 10.011 1.2418 9.93226 1.32059C9.85689 1.39938 9.79694 1.49701 9.75241 1.61349C9.7113 1.72996 9.69075 1.86356 9.69075 2.01429V5.38H8.27252V2.01429C8.27252 1.67857 8.20572 1.44049 8.07212 1.30004C7.94195 1.15616 7.7484 1.08422 7.49147 1.08422C7.32704 1.08422 7.17117 1.12362 7.02387 1.20241C6.87999 1.27777 6.74468 1.38397 6.61793 1.52099V5.38H5.19971Z" fill="#B2B9C5"/>
-<path d="M14.2998 12.9L11.5998 10.2L11.5998 15.6L14.2998 12.9Z" fill="#B2B9C5"/>
-<rect x="13.1707" y="13.7" width="8" height="1.6" transform="rotate(-180 13.1707 13.7)" fill="#B2B9C5"/>
-<path d="M3.59985 12.9L6.29985 15.6L6.29985 10.2L3.59985 12.9Z" fill="#B2B9C5"/>
-</svg>