@eturnity/eturnity_reusable_components 8.10.0 → 8.10.1

package/README.md

@@ -1,29 +1,29 @@
-# eturnity_reusable_components
-
-## To use in a project:
-
-```
-npm install @eturnity/eturnity_reusable_components
-```
-
-### To run locally
-
-```
-npm run dev
-```
-
-### To use storybook
-
-```
-npm run storybook
-```
-
-### To publish a new version
-
-```
-Follow correct semantic versioning
-https://docs.npmjs.com/about-semantic-versioning
-
-
-npm publish
-```
+# eturnity_reusable_components
+
+## To use in a project:
+
+```
+npm install @eturnity/eturnity_reusable_components
+```
+
+### To run locally
+
+```
+npm run dev
+```
+
+### To use storybook
+
+```
+npm run storybook
+```
+
+### To publish a new version
+
+```
+Follow correct semantic versioning
+https://docs.npmjs.com/about-semantic-versioning
+
+
+npm publish
+```

package/package.json

@@ -1,84 +1,85 @@
-{
-  "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.10.0",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "main": "./dist/main.umd.js",
-  "module": "./dist/main.es.js",
-  "private": false,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "vue-cli-service lint",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prettier": "prettier --write 'src/**/*.{js,vue}'",
-    "test": "jest",
-    "test-coverage": "jest --coverage"
-  },
-  "dependencies": {
-    "@originjs/vite-plugin-commonjs": "1.0.3",
-    "@vue/compat": "3.3.4",
-    "@vueform/slider": "2.1.10",
-    "@vuepic/vue-datepicker": "6.1.0",
-    "click-outside-vue3": "4.0.1",
-    "storybook": "8.2.9",
-    "vite-plugin-require": "1.1.14",
-    "vue": "3.3.4",
-    "vue-router": "4.2.2",
-    "vue3-styled-components": "1.2.1",
-    "vuedraggable": "4.1.0"
-  },
-  "devDependencies": {
-    "@babel/core": "7.25.2",
-    "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/preset-env": "7.25.3",
-    "@chromatic-com/storybook": "1.6.1",
-    "@storybook/addon-essentials": "8.2.9",
-    "@storybook/addon-interactions": "8.2.9",
-    "@storybook/addon-links": "8.2.9",
-    "@storybook/addon-onboarding": "8.2.8",
-    "@storybook/blocks": "8.2.8",
-    "@storybook/test": "8.2.8",
-    "@storybook/vue3-vite": "8.2.9",
-    "@types/node": "22.1.0",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-plugin-eslint": "5.0.8",
-    "@vue/cli-service": "5.0.8",
-    "@vue/compiler-sfc": "3.3.4",
-    "@vue/test-utils": "2.4.6",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "26.6.3",
-    "eslint": "8.0.1",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-vue": "9.14.1",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "26.6.3",
-    "jest-styled-components": "7.2.0",
-    "jsdom": "24.1.1",
-    "prettier": "2.8.4",
-    "vite": "4.0.0",
-    "vite-svg-loader": "5.1.0",
-    "vue-jest": "5.0.0-alpha.10",
-    "vue-loader": "17.4.2",
-    "vue-svg-loader": "0.16.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "description": "## Project setup ``` npm install ```",
-  "repository": {
-    "type": "git",
-    "url": "git+https://aaronenser@bitbucket.org/eturnitydevs/eturnity_reusable_components.git"
-  },
-  "author": "Aaron Enser",
-  "license": "ISC",
-  "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+{
+  "name": "@eturnity/eturnity_reusable_components",
+  "version": "8.10.1",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/main.umd.js",
+  "module": "./dist/main.es.js",
+  "private": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "vue-cli-service lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prettier": "prettier --write 'src/**/*.{js,vue}'",
+    "test": "jest",
+    "test-coverage": "jest --coverage",
+    "merge-remote-master": "node scripts/merge-remote-master.js"
+  },
+  "dependencies": {
+    "@originjs/vite-plugin-commonjs": "1.0.3",
+    "@vue/compat": "3.3.4",
+    "@vueform/slider": "2.1.10",
+    "@vuepic/vue-datepicker": "6.1.0",
+    "click-outside-vue3": "4.0.1",
+    "storybook": "8.2.9",
+    "vite-plugin-require": "1.1.14",
+    "vue": "3.3.4",
+    "vue-router": "4.2.2",
+    "vue3-styled-components": "1.2.1",
+    "vuedraggable": "4.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.25.2",
+    "@babel/plugin-syntax-import-meta": "7.10.4",
+    "@babel/preset-env": "7.25.3",
+    "@chromatic-com/storybook": "1.6.1",
+    "@storybook/addon-essentials": "8.2.9",
+    "@storybook/addon-interactions": "8.2.9",
+    "@storybook/addon-links": "8.2.9",
+    "@storybook/addon-onboarding": "8.2.8",
+    "@storybook/blocks": "8.2.8",
+    "@storybook/test": "8.2.8",
+    "@storybook/vue3-vite": "8.2.9",
+    "@types/node": "22.1.0",
+    "@vitejs/plugin-vue": "4.0.0",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/compiler-sfc": "3.3.4",
+    "@vue/test-utils": "2.4.6",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "26.6.3",
+    "eslint": "8.0.1",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-vue": "9.14.1",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "26.6.3",
+    "jest-styled-components": "7.2.0",
+    "jsdom": "24.1.1",
+    "prettier": "2.8.4",
+    "vite": "4.0.0",
+    "vite-svg-loader": "5.1.0",
+    "vue-jest": "5.0.0-alpha.10",
+    "vue-loader": "17.4.2",
+    "vue-svg-loader": "0.16.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "description": "## Project setup ``` npm install ```",
+  "repository": {
+    "type": "git",
+    "url": "git+https://aaronenser@bitbucket.org/eturnitydevs/eturnity_reusable_components.git"
+  },
+  "author": "Aaron Enser",
+  "license": "ISC",
+  "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
+}

package/src/App.vue

@@ -1,30 +1,30 @@
-<template>
-  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
-    <RouterView />
-  </ThemeProvider>
-</template>
-
-<script>
-  import { ThemeProvider } from 'vue3-styled-components'
-  import theme from './assets/theme'
-
-  export default {
-    name: 'App',
-    components: {
-      ThemeProvider,
-    },
-    methods: {
-      getTheme() {
-        return theme
-      },
-    },
-  }
-</script>
-
-<style>
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-  }
-</style>
+<template>
+  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
+    <RouterView />
+  </ThemeProvider>
+</template>
+
+<script>
+  import { ThemeProvider } from 'vue3-styled-components'
+  import theme from './assets/theme'
+
+  export default {
+    name: 'App',
+    components: {
+      ThemeProvider,
+    },
+    methods: {
+      getTheme() {
+        return theme
+      },
+    },
+  }
+</script>
+
+<style>
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+  }
+</style>

package/src/Test.vue

@@ -1,128 +1,64 @@
-<template>
-  <PageContainer>
-    <SpinnerComponent size="60px" />
-    <IconComponent color="red" cursor="pointer" name="House" size="30px" />
-    <MainButton icon="bell" text="Click ME" type="secondary" />
-    <AddNewButton />
-    <ToggleComponent
-      :disabled="false"
-      info-text-message="My info message"
-      :is-checked="true"
-      label="My Label Text"
-      label-align="right"
-      toggle-color="red"
-    />
-    <br />
-    <InputNumber
-      background-color="transparent"
-      border-color="eturnityGrey"
-      input-height="34px"
-      input-width="420px"
-      :interaction-step="1"
-      :is-interactive="true"
-      :min-number="0"
-      :number-precision="0"
-      text-align="left"
-      unit-name="mm"
-      :value="value"
-      @input-blur="blurHandler"
-      @input-change="changeHandler"
-      @input-focus="focusHandler"
-      @on-input="inputHandler"
-    >
-      <template #label>
-        <div>Interactive Label 1</div>
-      </template>
-    </InputNumber>
-
-    <hr />
-
-    <InputNumber
-      background-color="transparent"
-      border-color="eturnityGrey"
-      input-height="34px"
-      input-width="420px"
-      :interaction-step="1"
-      :is-interactive="true"
-      :min-number="0"
-      :number-precision="0"
-      text-align="left"
-      unit-name="mm"
-      :value="value"
-      @input-blur="blurHandler"
-      @input-change="changeHandler"
-      @input-focus="focusHandler"
-      @on-input="inputHandler"
-    >
-      <template #label>
-        <div>Interactive Label 2</div>
-      </template>
-    </InputNumber>
-
-    <hr />
-    <button @click="value = 42">Click to set at 42</button>
-    <br />
-    <IconCollection />
-  </PageContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import InputNumber from '@/components/inputs/inputNumber'
-  import ToggleComponent from '@/components/inputs/toggle'
-  import IconCollection from '@/components/icon/iconCollection'
-  import AddNewButton from '@/components/addNewButton'
-  import MainButton from '@/components/buttons/mainButton'
-  import IconComponent from '@/components/icon'
-  import SpinnerComponent from '@/components/spinner'
-
-  const PageContainer = styled.div`
-    padding: 40px;
-  `
-
-  export default {
-    name: 'App',
-    components: {
-      PageContainer,
-      InputNumber,
-      ToggleComponent,
-      IconCollection,
-      AddNewButton,
-      MainButton,
-      IconComponent,
-      SpinnerComponent,
-    },
-    data() {
-      return {
-        value: 42,
-      }
-    },
-    computed: {},
-    methods: {
-      blurHandler(e) {
-        console.log('blur', e)
-      },
-      changeHandler(e) {
-        console.log('change', e)
-      },
-      focusHandler(e) {
-        console.log('focus', e)
-      },
-      inputHandler(e) {
-        console.log('input', e)
-        //this.value = e
-        setTimeout(() => {
-          this.value = e
-        }, 1000)
-      },
-    },
-  }
-</script>
-
-<style>
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-  }
-</style>
+<template>
+  <PageContainer>
+    <PanelRangeInfo
+      :arrow-color="value < 8 ? 'yellow' : 'lime'"
+      height="42px"
+      :max-value="12"
+      :min-value="8"
+      :value="value"
+      width="120px"
+  /></PageContainer>
+  <IconCollection color="red" />
+  <input v-model="value" max="30" min="0" type="range" />
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import PanelRangeInfo from '@/components/panelRangeInfo'
+  import IconCollection from './components/icon/iconCollection.vue'
+
+  const PageContainer = styled.div`
+    padding: 40px;
+  `
+
+  export default {
+    name: 'App',
+    components: {
+      PageContainer,
+      PanelRangeInfo,
+      IconCollection,
+    },
+    data() {
+      return {
+        value: 42,
+      }
+    },
+    computed: {},
+    methods: {
+      blurHandler(e) {
+        console.log('blur', e)
+      },
+      changeHandler(e) {
+        console.log('change', e)
+      },
+      focusHandler(e) {
+        console.log('focus', e)
+      },
+      inputHandler(e) {
+        console.log('input', e)
+        //this.value = e
+        setTimeout(() => {
+          this.value = e
+        }, 1000)
+      },
+    },
+  }
+</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>