@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.11 → 7.48.1-EPDM-10964.0

package/src/components/inputs/radioButton/radioButton.spec.js

@@ -114,7 +114,9 @@ describe('RadioButton.vue', () => {
     const checkedWrapper = checkedWrapperArray[0]
     const checkedRadioInput = checkedWrapper.find('input[type="radio"]')
     const defaultValueFromProps = radioButtons.props('selectedOption')
-    expect(checkedRadioInput.attributes('value')).toBe(defaultValueFromProps)
+    expect(checkedRadioInput.attributes('value')).toBe(
+      defaultValueFromProps
+    )
 
     // Log attributes to see what is rendered (commented out just for reference)
     // console.log('checkedRadioInput attributes', checkedRadioInput.attributes())
@@ -147,33 +149,25 @@ describe('RadioButton.vue', () => {
     it('click on disabled element (|| selected element || info icon || image) does not emit anything', async () => {
       // Remember the number of emitted events before triggering clicks
       const initialNumberOfEvents =
-        radioButtons.emitted('on-radio-change')?.length || 0
+        radioButtons.emitted('on-radio-change').length
 
       // Test RadioWrapper with disabled element
       const disabledWrapperArray = findRadioWrappersByCriteria(['disabled'])
-      if (disabledWrapperArray.length > 0) {
-        const disabledLabelWrapper = disabledWrapperArray[0].find('label')
-        if (disabledLabelWrapper.exists()) {
-          await disabledLabelWrapper.trigger('click')
-          // Check if we still have the same number of emitted events as at the beginning
-          expect(radioButtons.emitted('on-radio-change')?.length || 0).toBe(
-            initialNumberOfEvents
-          )
-        }
-      }
+      const disabledLabelWrapper = disabledWrapperArray[0].find('label')
+      await disabledLabelWrapper.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
 
       // Get RadioWrapper with selected element
       const checkedWrapperArray = findRadioWrappersByCriteria(['checked'])
-      if (checkedWrapperArray.length > 0) {
-        const checkedLabelWrapper = checkedWrapperArray[0].find('label')
-        if (checkedLabelWrapper.exists()) {
-          await checkedLabelWrapper.trigger('click')
-          // Check if we still have the same number of emitted events as at the beginning
-          expect(radioButtons.emitted('on-radio-change')?.length || 0).toBe(
-            initialNumberOfEvents
-          )
-        }
-      }
+      const checkedLabelWrapper = checkedWrapperArray[0].find('label')
+      await checkedLabelWrapper.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
 
       // Get RadioWrapper with info icon
       const arrayOfWrappersWithInfoIcons = findRadioWrappersByCriteria([
@@ -181,18 +175,14 @@ describe('RadioButton.vue', () => {
         'unchecked',
         'hasInfoIcon',
       ])
-      if (arrayOfWrappersWithInfoIcons.length > 0) {
-        const infoIconForClick = arrayOfWrappersWithInfoIcons[0].find(
-          '[data-test-id="infoText_trigger"]'
-        )
-        if (infoIconForClick.exists()) {
-          await infoIconForClick.trigger('click')
-          // Check if we still have the same number of emitted events as at the beginning
-          expect(radioButtons.emitted('on-radio-change')?.length || 0).toBe(
-            initialNumberOfEvents
-          )
-        }
-      }
+      const infoIconForClick = arrayOfWrappersWithInfoIcons[0].find(
+        '[data-test-id="infoText_trigger"]'
+      )
+      await infoIconForClick.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
 
       // Get RadioWrapper with image
       const arrayOfWrappersWithImage = findRadioWrappersByCriteria([
@@ -200,87 +190,60 @@ describe('RadioButton.vue', () => {
         'unchecked',
         'hasImage',
       ])
-      if (arrayOfWrappersWithImage.length > 0) {
-        const testedRadioWrapperWithImage = arrayOfWrappersWithImage[0]
-        const openImageWrapperTestId = testedRadioWrapperWithImage
-          .attributes('data-test-id')
-          .replace('radioWrapper_', 'radioOpenImage_')
-        const openImageWrapper = testedRadioWrapperWithImage.find(
-          `[data-test-id="${openImageWrapperTestId}"]`
-        )
-        if (openImageWrapper.exists()) {
-          await openImageWrapper.trigger('click')
-          // Check if we still have the same number of emitted events as at the beginning
-          expect(radioButtons.emitted('on-radio-change')?.length || 0).toBe(
-            initialNumberOfEvents
-          )
+      const testedRadioWrapperWithImage = arrayOfWrappersWithImage[0]
+      const openImageWrapperTestId = testedRadioWrapperWithImage
+        .attributes('data-test-id')
+        .replace('radioWrapper_', 'radioOpenImage_')
+      const openImageWrapper = testedRadioWrapperWithImage.find(
+        `[data-test-id="${openImageWrapperTestId}"]`
+      )
+      await openImageWrapper.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
 
-          // Since we just clicked on image miniature
-          // lets check has the corresponding modal been opened
-          // and is the correct image displayed
-          const imageModalWrapperTestId = testedRadioWrapperWithImage
-            .attributes('data-test-id')
-            .replace('radioWrapper_', 'radioModal_')
-          const imageModalWrapper = testedRadioWrapperWithImage.find(
-            `[data-test-id="${imageModalWrapperTestId}"]`
-          )
-          if (imageModalWrapper.exists()) {
-            expect(imageModalWrapper.attributes('class')).toContain('visible')
-            const imageWrapperTestId = testedRadioWrapperWithImage
-              .attributes('data-test-id')
-              .replace('radioWrapper_', 'radioImage_')
-            const imageWrapper = testedRadioWrapperWithImage.find(
-              `[data-test-id="${imageWrapperTestId}"]`
-            )
-            if (imageWrapper.exists()) {
-              const expectedImageSrc = imageWrapper.attributes('src')
-              const modalImage = imageModalWrapper.find('img')
-              if (modalImage.exists()) {
-                const modalImageSrc = modalImage.attributes('src')
-                expect(modalImageSrc).toBe(expectedImageSrc)
-              }
-            }
-            //Close the modal
-            const closeButton = radioButtons.find('.visible .close')
-            if (closeButton.exists()) {
-              await closeButton.trigger('click')
-              await radioButtons.vm.$nextTick()
-              expect(imageModalWrapper.attributes('class')).toContain('hidden')
-            }
-          }
-        }
-      }
+      // Since we just clicked on image miniature
+      // lets check has the corresponding modal been opened
+      // and is the correct image displayed
+      const imageModalWrapperTestId = testedRadioWrapperWithImage
+        .attributes('data-test-id')
+        .replace('radioWrapper_', 'radioModal_')
+      const imageModalWrapper = testedRadioWrapperWithImage.find(
+        `[data-test-id="${imageModalWrapperTestId}"]`
+      )
+      expect(imageModalWrapper.attributes('class')).toContain('visible')
+      const imageWrapperTestId = testedRadioWrapperWithImage
+        .attributes('data-test-id')
+        .replace('radioWrapper_', 'radioImage_')
+      const imageWrapper = testedRadioWrapperWithImage.find(
+        `[data-test-id="${imageWrapperTestId}"]`
+      )
+      const expectedImageSrc = imageWrapper.attributes('src')
+      const modalImageSrc = imageModalWrapper.find('img').attributes('src')
+      expect(modalImageSrc).toBe(expectedImageSrc)
+      //Close the modal
+      radioButtons.find('.visible .close').trigger('click')
+      await radioButtons.vm.$nextTick()
+      expect(imageModalWrapper.attributes('class')).toContain('hidden')
     }),
     it('test hover on Info Icon', async () => {
       // Get RadioWrapper with Info Icon
       const arrayOfWrappersWithInfoIcon = findRadioWrappersByCriteria([
         'hasInfoIcon',
       ])
-
-      // Ensure we have at least one wrapper with Info Icon
-      expect(arrayOfWrappersWithInfoIcon.length).toBeGreaterThan(0)
-
       //Select tested item and get expected text within the info badge
       const testedRadioWrapper =
         arrayOfWrappersWithInfoIcon[arrayOfWrappersWithInfoIcon.length - 1]
       const valueOfTestedRadioWrapper = testedRadioWrapper
         .attributes('data-test-id')
         .replace('radioWrapper_', '')
-      const expectedText = defaultRadioButtonProps.options.find(
-        (el) => el.value === valueOfTestedRadioWrapper
-      ).infoText
+      const expectedText = defaultRadioButtonProps.options.find((el) => el.value === valueOfTestedRadioWrapper).infoText
       const iconForHover = testedRadioWrapper.find(
         '[data-test-id="infoText_trigger"]'
       )
-
-      // Check if the icon exists before triggering the event
-      // expect(iconForHover.exists()).toBe(true)
-
-      if (iconForHover.exists()) {
-        await iconForHover.trigger('mouseenter')
-        await radioButtons.vm.$nextTick() // Wait for the next tick to ensure reactivity
-        expect(testedRadioWrapper.text()).toContain(expectedText)
-      }
+      await iconForHover.trigger('mouseenter')
+      expect(testedRadioWrapper.text()).toContain(expectedText)
     }),
     it('Test the click again after all the manipulations', async () => {
       const uncheckedWrapperArray = findRadioWrappersByCriteria([

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

@@ -17,9 +17,7 @@
       >
         <InputLabel
           :font-color="
-            labelFontColor || colorMode == 'dark' || colorMode == 'transparent'
-              ? 'white'
-              : 'eturnityGrey'
+            labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :font-size="fontSize"
           >{{ label }}
@@ -42,26 +40,18 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark'
-              ? 'transparentBlack1'
-              : colorMode == 'transparent'
-              ? 'transparent'
-              : 'white'
+            buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
           "
           class="select-button"
-          :color-mode="colorMode"
           :data-id="dataId"
           :disabled="disabled"
           :font-color="
-            buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
-              ? 'white'
-              : 'black'
+            buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
           "
           :font-size="fontSize"
           :has-error="hasError"
           :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
           :height="height"
-          :is-search-bar-visible="isSearchBarVisible"
           :no-relative="noRelative"
           :padding-left="paddingLeft"
           :select-height="selectHeight"
@@ -82,11 +72,7 @@
             ref="searchInput"
             background-color="transparent"
             :font-color="
-              buttonFontColor ||
-              colorMode == 'dark' ||
-              colorMode == 'transparent'
-                ? 'white'
-                : 'black'
+              buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
             :font-size="fontSize"
             input-height="34px"
@@ -106,30 +92,26 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret
-            class="caret_dropdown"
-            :color-mode="colorMode"
-            @click.stop="toggleCaretDropdown"
-          >
+          <Caret class="caret_dropdown" @click.stop="toggleCaretDropdown">
             <Icon
               v-if="isDropdownOpen"
               :color="
-                caretColor || colorMode == 'dark' || colorMode == 'transparent'
+                caretColor || colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_up"
-              :size="colorMode === 'transparent' ? '8px' : '12px'"
+              size="12px"
             />
             <Icon
               v-else
               :color="
-                caretColor || colorMode == 'dark' || colorMode == 'transparent'
+                caretColor || colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_down"
-              :size="colorMode === 'transparent' ? '8px' : '12px'"
+              size="12px"
             />
           </Caret>
         </SelectButton>
@@ -139,27 +121,15 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                dropdownBgColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
-                  ? 'black'
-                  : 'white'
+                dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
               "
               :dropdown-position="dropdownPosition"
               :font-color="
-                dropdownFontColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
-                  ? 'white'
-                  : 'black'
+                dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
               "
               :font-size="fontSize"
               :hovered-bg-color="
-                colorMode == 'dark'
-                  ? '#000000'
-                  : colorMode == 'transparent'
-                  ? 'grey6'
-                  : dropdownBgColor
+                colorMode == 'dark' ? '#000000' : dropdownBgColor
               "
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
@@ -216,15 +186,12 @@
   const CARET_WIDTH = '30px'
   const BORDER_WIDTH = '1px'
 
-  const CaretAttrs = { colorMode: String }
-  const Caret = styled('div', CaretAttrs)`
+  const Caret = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: ${(props) =>
-      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
-    min-width: ${(props) =>
-      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
+    width: ${CARET_WIDTH};
+    min-width: ${CARET_WIDTH};
     height: 100%;
     align-items: center;
     cursor: pointer;
@@ -263,7 +230,6 @@
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
-    text-transform: lowercase;
   `
   const inputProps = {
     selectWidth: String,
@@ -308,8 +274,6 @@
     noRelative: Boolean,
     tablePaddingLeft: String,
     showDisabledBackground: Boolean,
-    colorMode: String,
-    isSearchBarVisible: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -317,11 +281,7 @@
     border-radius: 4px;
     max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
     ${(props) =>
-      props.colorMode === 'transparent'
-        ? props.isSearchBarVisible
-          ? 'padding: 10px 15px 10px 5px;'
-          : 'padding: 10px 15px;'
-        : props.isSearchBarVisible
+      props.isSearchBarVisible
         ? ''
         : `padding-left: ${
             props.hasNoPadding
@@ -349,22 +309,14 @@
         hasError ? theme.colors.red : theme.colors.grey4
       }
   `}
-    opacity: ${(props) =>
-      props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
-    background-color: ${(props) =>
-      props.colorMode === 'transparent'
-        ? 'transparent'
-        : props.disabled && props.showDisabledBackground
-        ? props.theme.colors.disabled
+    background-color:${(props) =>
+      props.disabled && props.showDisabledBackground
+        ? props.theme.colors.grey5
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
         : props.bgColor};
     color: ${(props) =>
-      props.colorMode === 'transparent'
-        ? props.theme.colors.white
-        : props.disabled && props.showDisabledBackground
-        ? props.theme.colors.black
-        : props.theme.colors[props.fontColor]
+      props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     ${(props) => (props.disabled ? 'pointer-events: none' : '')};
@@ -661,7 +613,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : this.$refs.dropdown.$el.children[0]
+            : !!this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }

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

@@ -1,12 +1,6 @@
 <template>
   <OptionContainer
-    :background-color="
-      colorMode == 'dark'
-        ? '#000000'
-        : colorMode == 'transparent'
-        ? 'black'
-        : backgroundColor
-    "
+    :background-color="colorMode == 'dark' ? '#000000' : backgroundColor"
     :cursor-type="cursorType"
     :data-value="value"
     :disabled-bg-color="disabledBgColor"
@@ -14,8 +8,6 @@
     :hovered-bg-color="
       colorMode == 'dark'
         ? '#000000'
-        : colorMode == 'transparent'
-        ? 'grey6'
         : hoveredBgColor
         ? hoveredBgColor
         : 'grey5'
@@ -138,8 +130,7 @@
         default: '12px 10px',
       },
       textColor: {
-        type: String,
-        required: false,
+        type: true,
         default: 'inherit',
       },
     },

package/src/components/markerItem/index.vue

@@ -12,7 +12,7 @@
         :name="iconName"
         size="10px"
       />
-      <span :title="label">{{ label }}</span>
+      <span>{{ label }}</span>
     </MarkerContainer>
   </PageContainer>
 </template>
@@ -60,13 +60,6 @@
     border-radius: 4px;
     white-space: nowrap;
     cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
   `
 
   export default {

package/src/components/spinner/index.vue

@@ -3,7 +3,6 @@
     <Container>
       <SpinnerWrapper data-test-id="spinner_full_wrapper">
         <SpinnerSvg
-          :class="{ white: isWhite }"
           data-test-id="spinner_full_icon"
           :style="{ width: size, height: size }"
         />
@@ -17,7 +16,6 @@
   >
     <SpinnerWrapper data-test-id="spinner_wrapper">
       <SpinnerSvg
-        :class="{ white: isWhite }"
         data-test-id="spinner_icon"
         :style="{ width: size, height: size }"
       />
@@ -56,10 +54,6 @@
   const SpinnerWrapper = styled.div`
     width: ${(props) => (props.size ? props.size : '60px')};
     height: auto;
-
-    .white {
-      filter: brightness(0) invert(1);
-    }
   `
 
   export default {
@@ -86,11 +80,6 @@
         default: '60px',
         type: String,
       },
-      isWhite: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
   }
 </script>

package/src/components/tables/mainTable/index.vue

@@ -10,7 +10,11 @@
       ref="tableRef"
       :is-position-absolute="doesTableContainDraggables"
     >
-      <TableWrapper class="main-table-wrapper" :full-width="fullWidth">
+      <TableWrapper
+        class="main-table-wrapper"
+        :full-width="fullWidth"
+        :is-overflow-hidden="isOverflowHidden"
+      >
         <SpinnerWrapper v-if="isLoading">
           <Spinner />
         </SpinnerWrapper>
@@ -70,12 +74,12 @@
   `}
   `
 
-  const wrapperAttrs = { fullWidth: Boolean }
+  const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
   const TableWrapper = styled('div', wrapperAttrs)`
     width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
     max-width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
+    ${(props) =>
+      props.isOverflowHidden ? 'overflow-x: auto; overflow-y: hidden;' : ''}
 
     ::-webkit-scrollbar {
       height: 10px; //height of the whole scrollbar area
@@ -409,6 +413,10 @@
         required: false,
         default: false,
       },
+      isOverflowHidden: {
+        required: false,
+        default: true,
+      },
       titleText: {
         required: false,
         default: null,

package/src/assets/svgIcons/collapse_all.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-  <path d="M3 2L7 5L11 2" stroke="white" stroke-width="1.27273" class="fix"/>
-  <path d="M3 12L7 9L11 12" stroke="white" stroke-width="1.27273" class="fix"/>
-</svg>

package/src/assets/svgIcons/hybrid.svg

@@ -1,4 +0,0 @@
-<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="M4.22998 11.8962H10.5006H12.2505V10.1463V8.97906H14.0004V5.47917H12.2505V4.31283V2.56289V2.55151H10.5006V2.56289H8.58218L7.76617 4.31283H10.5006V10.1463H5.04599L4.22998 11.8962Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.2622 4.79738C6.91629 4.63687 6.53076 4.54729 6.12431 4.54729C4.63054 4.54729 3.41919 5.75796 3.41919 7.25241C3.41919 8.33588 4.05591 9.26984 4.97534 9.70158L7.2622 4.79738ZM5.44786 3.11681C5.44786 3.49042 5.7507 3.79326 6.12431 3.79326C6.49793 3.79326 6.80077 3.49042 6.80077 3.11681V1.76459C6.80077 1.39097 6.49793 1.08813 6.12431 1.08813C5.7507 1.08813 5.44786 1.39097 5.44786 1.76459V3.11681ZM2.02818 7.88939H0.675962C0.302349 7.88939 -0.000488281 7.58655 -0.000488281 7.21294C-0.000488281 6.83932 0.302349 6.53649 0.675962 6.53649H2.02818C2.4018 6.53649 2.70463 6.83932 2.70463 7.21294C2.70463 7.58655 2.4018 7.88939 2.02818 7.88939ZM3.7057 10.5877L2.74955 11.5439C2.4855 11.8079 2.05745 11.8079 1.7934 11.5439C1.52935 11.2798 1.52935 10.8518 1.7934 10.5877L2.74955 9.63155C3.0136 9.36751 3.44165 9.36751 3.7057 9.63155C3.96975 9.8956 3.96975 10.3237 3.7057 10.5877ZM2.74955 4.79432L1.7934 3.83817C1.52935 3.57412 1.52935 3.14607 1.7934 2.88202C2.05745 2.61797 2.4855 2.61797 2.74955 2.88202L3.7057 3.83817C3.96975 4.10222 3.96975 4.53027 3.7057 4.79432C3.44165 5.05837 3.0136 5.05837 2.74955 4.79432Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/module.svg

@@ -1,3 +0,0 @@
-<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="M11.0722 3.6H1.6V10.4H11.0722L7.87332 7.60217L7.18484 7L7.87332 6.39783L11.0722 3.6ZM12.4 9.43572V4.56428L9.61516 7L12.4 9.43572ZM0 2H1.6H12.4H14V3.6V10.4V12H12.4H1.6H0V10.4V3.6V2Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/move_down.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.875 7.63636H4.55V0H9.45V7.63636H13.125L7 14L0.875 7.63636Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/move_up.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.875 6.36364H4.55V14H9.45V6.36364H13.125L7 0L0.875 6.36364Z" fill="#B2B9C5"/>
-</svg>

package/src/assets/svgIcons/optimizer.svg

@@ -1,6 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3.11079" y="3.10981" width="7.77778" height="7.77778" stroke="white" stroke-width="1.55556"/>
-<line x1="3.72749" y1="10.3387" x2="10.7275" y2="3.3387" stroke="white" stroke-width="1.55556"/>
-<line x1="-0.000366211" y1="7.05425" x2="2.99963" y2="7.05425" stroke="white" stroke-width="1.55556"/>
-<line x1="10.9994" y1="6.99957" x2="13.9994" y2="6.99957" stroke="white" stroke-width="1.55556"/>
-</svg>

package/src/assets/svgIcons/string_design.svg

@@ -1,5 +0,0 @@
-<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.85714 1.92857C2.85714 2.71755 2.21755 3.35714 1.42857 3.35714C0.639593 3.35714 0 2.71755 0 1.92857C0 1.13959 0.639593 0.5 1.42857 0.5C2.21755 0.5 2.85714 1.13959 2.85714 1.92857Z" fill="white"/>
-<path d="M10 9.07143C10 9.86041 9.36041 10.5 8.57143 10.5C7.78245 10.5 7.14286 9.86041 7.14286 9.07143C7.14286 8.28245 7.78245 7.64286 8.57143 7.64286C9.36041 7.64286 10 8.28245 10 9.07143Z" fill="white"/>
-<path d="M5.71429 3C5.71429 2.40827 6.19398 1.92857 6.78571 1.92857C7.37745 1.92857 7.85714 2.40827 7.85714 3V6.21429H9.28571V3C9.28571 1.61929 8.16643 0.5 6.78571 0.5C5.405 0.5 4.28571 1.61929 4.28571 3V8C4.28571 8.59173 3.80602 9.07143 3.21429 9.07143C2.62255 9.07143 2.14286 8.59173 2.14286 8V4.78571H0.714286V8C0.714286 9.38071 1.83357 10.5 3.21429 10.5C4.595 10.5 5.71429 9.38071 5.71429 8V3Z" fill="white"/>
-</svg>