@eturnity/eturnity_reusable_components 8.19.1 → 8.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.19.1",
+  "version": "8.19.3",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/add_plus.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0H8V14H6V0Z" fill="white"/>
+<path d="M14 6V8H0L8.74227e-08 6L14 6Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/order.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H14V6H2V4ZM2 8V12H14V8H2ZM1 4C1 3.44772 1.44772 3 2 3H14C14.5523 3 15 3.44772 15 4V12C15 12.5523 14.5523 13 14 13H2C1.44772 13 1 12.5523 1 12V4Z" fill="#263238"/>
+</svg>

package/src/components/buttons/mainButton/MainButton.stories.js

@@ -133,3 +133,13 @@ DarkTheme.args = {
   buttonSize: 'medium',
   appTheme: 'dark',
 }
+
+export const IconAltDesignButton = {
+  args: {
+    text: 'Click me',
+    icon: 'bell',
+    type: 'primary',
+    iconAltStyle: true,
+    iconAltStyleColor: '#f2f2f2',
+  },
+}

package/src/components/buttons/mainButton/index.vue

@@ -90,6 +90,7 @@
     ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
     height: ${(props) => props.height};
+    line-height: 1;
 
     &:hover {
       background-color: ${(props) =>
@@ -110,6 +111,30 @@
     }
   `
 
+  const AltAttrs = {
+    altStyle: Boolean,
+    color: String,
+  }
+
+  const IconContainer = styled('div', AltAttrs)`
+    background-color: ${(props) =>
+      props.color ? props.color : props.theme.colors.transparentWhite1};
+    padding: 7px;
+    height: 100%;
+    width: 30%;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    border-radius: 4px 0 0 4px;
+    color: ${(props) => props.theme.colors.white};
+    all: ${(props) => (props.altStyle ? '' : 'unset')};
+  `
+
+  const TextContainer = styled('span', AltAttrs)`
+    padding: ${(props) => (props.altStyle ? '7px' : '0')};
+    all: ${(props) => (props.altStyle ? '' : 'unset')};
+  `
+
   const LabelAttrs = {
     hasIcon: Boolean,
   }
@@ -155,6 +180,16 @@
         default: '',
         type: String,
       },
+      iconAltStyle: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      iconAltStyleColor: {
+        required: false,
+        default: null,
+        type: String,
+      },
       text: {
         required: true,
         type: String,

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

@@ -68,7 +68,17 @@
             <Icon name="current_variant" size="20px" />
           </IconWrapper>
           <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
-            <Icon cursor="default" name="warning" size="16px" />
+            <InfoText
+              v-if="infoErrorMessage != ''"
+              :align-arrow="infoTextAlign"
+              :app-theme="appTheme"
+              button-type="error"
+              data-test-id="info_text_message"
+              icon-name="warning"
+              :size="fontSize ? fontSize : '16px'"
+              :text="infoErrorMessage"
+            />
+            <Icon v-else cursor="default" name="warning" size="16px" />
           </IconWrapper>
           <IconWrapper
             v-if="iconName && !hasError && inputType !== 'password'"
@@ -148,10 +158,10 @@
   }
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
+      props.noBorder
         ? 'none'
+        : props.isError
+        ? '1px solid ' + props.theme.colors.red
         : props.borderColor
         ? props.theme.colors[props.borderColor]
           ? '1px solid ' + props.theme.colors[props.borderColor]
@@ -410,6 +420,11 @@
         default: '',
         type: String,
       },
+      infoErrorMessage: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     data() {
       return {

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

@@ -8,7 +8,9 @@
     <InputWrapper
       :align-items="alignItems"
       :has-label="!!label && label.length > 0"
+      :min-width="minWidth"
       :no-relative="noRelative"
+      :text-center="textCenter"
     >
       <LabelWrapper
         v-if="label"
@@ -43,7 +45,9 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark'
+            buttonBgColor
+              ? buttonBgColor
+              : colorMode == 'dark'
               ? 'transparentBlack1'
               : colorMode == 'transparent'
               ? 'transparent'
@@ -72,6 +76,7 @@
           :show-border="showBorder"
           :show-disabled-background="showDisabledBackground"
           :table-padding-left="tablePaddingLeft"
+          :text-center="textCenter"
           @click="toggleDropdown"
           @keydown="onKeyDown"
         >
@@ -109,7 +114,12 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret class="caret_dropdown" :color-mode="colorMode">
+          <Caret
+            v-if="showCaret"
+            class="caret_dropdown"
+            :color-mode="colorMode"
+            @click.stop="toggleCaretDropdown"
+          >
             <Icon
               v-if="isDropdownOpen"
               :color="
@@ -285,11 +295,13 @@
     selectWidth: String,
     optionWidth: String,
     noRelative: Boolean,
+    textCenter: Boolean,
   }
   const Container = styled('div', inputProps)`
     width: ${(props) => props.selectWidth};
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
     display: inline-block;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
   `
 
   const LabelWrapperAttrs = { infoTextMessage: Boolean }
@@ -326,6 +338,7 @@
     showDisabledBackground: Boolean,
     colorMode: String,
     isSearchBarVisible: Boolean,
+    textCenter: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -346,7 +359,7 @@
               ? props.tablePaddingLeft
               : props.paddingLeft
           }`};
-    text-align: left;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
     min-height: ${(props) =>
       props.selectHeight
         ? props.selectHeight
@@ -374,7 +387,7 @@
         ? props.theme.colors.grey5
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
-        : props.bgColor};
+        : props.bgColor} !important;
     color: ${(props) =>
       props.colorMode === 'transparent'
         ? props.theme.colors.white
@@ -455,6 +468,7 @@
   const inputAttrs = {
     alignItems: String,
     hasLabel: Boolean,
+    minWidth: String,
     noRelative: Boolean,
   }
   const InputWrapper = styled('div', inputAttrs)`
@@ -662,6 +676,16 @@
         type: String,
         required: false,
       },
+      showCaret: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      textCenter: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       isFixedDropdownPosition: {
         type: Boolean,
         required: false,

package/src/components/paginationV2/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <!-- Check, if pages more than 1 -->
+  <PaginationWrapper v-if="paginationParams.pages > 1">
+    <PaginationLink v-if="paginationParams.previous" @click="fetchPage(1)">
+      <ArrowIconContainer>
+        <RCIcon name="start_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <PaginationLink
+      v-if="paginationParams.previous"
+      @click="fetchPage(paginationParams.previous)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_left" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <!-- Current block -->
+    <SelectWrapper>
+      <RCSelect
+        :button-font-color="getTheme.colors.gray1"
+        :dropdown-font-color="getTheme.colors.gray1"
+        font-size="14px"
+        :has-select-button-padding="false"
+        :is-auto-search="false"
+        :is-searchable="false"
+        :label-font-color="getTheme.colors.gray1"
+        left-padding="0px"
+        min-width="0px"
+        no-border
+        :no-max-width="true"
+        option-width="75px"
+        select-width="100%"
+        :show-border="false"
+        :show-caret="false"
+        text-center
+        :value="currentPage"
+        @input-change="fetchPage($event)"
+      >
+        <template #selector>
+          <SelectText>
+            {{ currentPage }} of {{ paginationParams.pages }}
+          </SelectText>
+        </template>
+        <template #dropdown>
+          <RCOption
+            v-for="number in paginationNumbers()"
+            :key="number"
+            text-center
+            :value="number"
+          >
+            {{ number }}
+          </RCOption>
+        </template>
+      </RCSelect>
+    </SelectWrapper>
+
+    <!-- Forward button -->
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.next)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_right" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.pages)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="end_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+  </PaginationWrapper>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
+  import RCSelect from '../inputs/select'
+  import RCOption from '../inputs/select/option'
+  import theme from '@/assets/theme.js'
+
+  const PaginationWrapper = styled.nav`
+    gap: 5px;
+    font-size: 13px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+  `
+  const PaginationLink = styled.div`
+    display: flex;
+    padding: 0px 5px;
+    margin: 0 2px;
+    text-align: center;
+    border-radius: 3px;
+    white-space: nowrap;
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.brightBlue};
+
+    &.active {
+      color: ${(props) => props.theme.colors.white};
+      background-color: ${(props) => props.theme.colors.brightBlue};
+      padding: 7px 12px;
+      border-radius: 4px;
+    }
+  `
+  const ArrowIconContainer = styled.div`
+    display: flex;
+    align-items: center;
+  `
+
+  const SelectText = styled.div`
+    font-size: 14px;
+    color: ${(props) => props.theme.colors.grey1};
+  `
+
+  const SelectWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    width: 75px;
+  `
+
+  export default {
+    name: 'PaginationV2',
+    components: {
+      PaginationWrapper,
+      PaginationLink,
+      RCIcon,
+      RCSelect,
+      RCOption,
+      SelectWrapper,
+      SelectText,
+      ArrowIconContainer,
+    },
+    props: {
+      fetchPage: {
+        type: Function,
+        required: true,
+      },
+      currentPage: {
+        type: Number,
+        required: true,
+      },
+      paginationParams: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        selectedValue: this.currentPage,
+      }
+    },
+    computed: {
+      getTheme() {
+        return theme
+      },
+    },
+    methods: {
+      getNewProjects(num) {
+        this.$emit('on-pagination-change', num)
+      },
+      paginationNumbers() {
+        return Array.from(
+          { length: this.paginationParams.pages },
+          (_, i) => i + 1
+        )
+      },
+    },
+  }
+</script>

package/src/components/tabsHeader/index.vue

@@ -4,6 +4,7 @@
       <TabItem
         v-for="item in tabsData"
         :key="item.id"
+        :full-size="fullSize"
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
       >
@@ -23,6 +24,8 @@
           size="14px"
         />
         <div>{{ item.text }}</div>
+        <DotIcon v-if="item.subText" :is-active="activeTab === item.id" />
+          <SubText v-if="item.subText">{{ item.subText }}</SubText>
         <RCIcon v-if="item.hasError" name="warning" size="14px" />
       </TabItem>
     </TabsContainer>
@@ -51,33 +54,56 @@
   import RCIcon from '../icon'
   import theme from '@/assets/theme'
 
+  const NameContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  `
+
+  const DotIconAttrs = { isActive: Boolean }
+  const DotIcon = styled('div', DotIconAttrs)`
+    width: 4px;
+    height: 4px;
+    border-radius: 100%;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.purple6 : props.theme.colors.black};
+  `
+
+  const SubText = styled.div`
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.black};
+  `
+
   const PageContainer = styled.div``
 
   const TabsContainer = styled.div`
     display: flex;
     cursor: pointer;
     width: 100%;
+
+    border-bottom: 1px solid ${(props) => props.theme.colors.purple7};
   `
 
-  const TabAttrs = { isActive: Boolean }
+  const TabAttrs = { isActive: Boolean, fullSize: Boolean }
   const TabItem = styled('div', TabAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
-    padding: 10px 20px;
+    padding: 10px 25px;
     font-size: 14px;
     font-weight: ${(props) => (props.isActive ? '500' : '400')};
-    background-color: ${(props) => props.theme.colors.white};
     color: ${(props) =>
       props.isActive
         ? props.theme.semanticColors.purple[500]
         : props.theme.semanticColors.teal[800]};
+    flex-grow: ${(props) => (props.fullSize ? 1 : 0)};
+    background-color: ${(props) => props.theme.colors.white};
     border-bottom: ${(props) =>
       props.isActive
         ? '1px solid' + props.theme.semanticColors.purple[400]
         : '1px solid' + props.theme.semanticColors.grey[400]};
-    flex-grow: 1;
   `
 
   export default {
@@ -85,7 +111,10 @@
     components: {
       PageContainer,
       TabsContainer,
+      NameContainer,
       TabItem,
+      SubText,
+      DotIcon,
       RCIcon,
     },
     props: {
@@ -97,7 +126,12 @@
         required: true,
         type: [Number, String],
       },
+      fullSize: {
+        type: Boolean,
+        default: true,
+      },
     },
+    emits: ['on-tab-change'],
     data() {
       return {
         theme,

package/src/helpers/toLocaleNumber.js

@@ -0,0 +1,11 @@
+import { langForLocaleString } from './translateLang'
+
+export const toLocaleNumber = (value, digit = 0) => {
+  if (isNaN(value)) {
+    return '-'
+  }
+  return new Intl.NumberFormat(langForLocaleString(), {
+    minimumFractionDigits: digit,
+    maximumFractionDigits: digit,
+  }).format(value)
+}

package/dist/main.es.js

@@ -1,7 +0,0 @@
-import App from "./main.es2.js";
-import "./main.es3.js";
-import router from "./main.es4.js";
-import { createApp } from "./main.es5.js";
-const app = createApp(App);
-app.use(router);
-app.mount("#app");

package/dist/main.es10.js

@@ -1,10 +0,0 @@
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-export {
-  _export_sfc as default
-};

package/dist/main.es100.js

@@ -1,23 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "18",
-  height: "18",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#fff",
-  d: "m13.483 9.497-3.069 3.069-.414.414V13h-.02l-.98.98-.98-.98H8v-.02l-.414-.414-3.069-3.069 1.414-1.414 2.07 2.068V4h2v6.151l2.068-2.069zM16 16H0v2h18v-2zM16 0H0v2h18V0z"
-}, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
-}
-const deal_flow = { render };
-export {
-  deal_flow as default,
-  render
-};

package/dist/main.es101.js

@@ -1,23 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "14",
-  height: "16",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#DEE2EB",
-  d: "M15.771 25.713A1.35 1.35 0 0 0 17.124 27h5.494c.725 0 1.317-.564 1.353-1.287l.79-9.1h-9.78zm5.455-6.842h.903v4.968h-.903zm-1.807 0h.904v4.968h-.904zm-1.806 0h.903v4.968h-.903zM22.129 13.903V13h-4.516v.903H14v1.807h11.742v-1.807z"
-}, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
-}
-const _delete = { render };
-export {
-  _delete as default,
-  render
-};

package/dist/main.es102.js

@@ -1,20 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "42",
-  height: "42",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#B2B9C5" d="M0 0h40v40H0z"></path><path fill="#fff" d="M20.5 7C21.9 7 23 8.1 23 9.5S21.9 12 20.5 12 18 10.9 18 9.5 19.1 7 20.5 7m0-1C18.6 6 17 7.6 17 9.5s1.6 3.5 3.5 3.5S24 11.4 24 9.5 22.4 6 20.5 6M30.5 7C31.9 7 33 8.1 33 9.5S31.9 12 30.5 12 28 10.9 28 9.5 29.1 7 30.5 7m0-1C28.6 6 27 7.6 27 9.5s1.6 3.5 3.5 3.5S34 11.4 34 9.5 32.4 6 30.5 6M30.5 28c1.4 0 2.5 1.1 2.5 2.5S31.9 33 30.5 33 28 31.9 28 30.5s1.1-2.5 2.5-2.5m0-1c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5M20.5 28c1.4 0 2.5 1.1 2.5 2.5S21.9 33 20.5 33 18 31.9 18 30.5s1.1-2.5 2.5-2.5m0-1c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5"></path><path stroke="#fff" stroke-miterlimit="10" d="M30.5 12v16M28 9.5h-4M28 30.5h-4"></path><path fill="#fff" d="M15 17v7.6c0 .8-.6 1.4-1.4 1.4H9.4c-.8 0-1.4-.6-1.4-1.4V17zm1-1H7v8.6C7 25.9 8.1 27 9.4 27h4.2c1.3 0 2.4-1.1 2.4-2.4z"></path><path fill="#fff" d="M16 15v1H7v-1zm1-1H6v3h11z"></path><path stroke="#fff" stroke-miterlimit="10" d="M11.5 19v5M13.5 19v5M9.5 19v5"></path><path fill="#fff" d="M12 13v1h-1v-1zm1-1h-3v3h3z"></path>', 7);
-const _hoisted_9 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_9);
-}
-const delete_area_active = { render };
-export {
-  delete_area_active as default,
-  render
-};

package/dist/main.es103.js

@@ -1,20 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "30",
-  height: "30",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#666" d="M20.5 7C21.9 7 23 8.1 23 9.5S21.9 12 20.5 12 18 10.9 18 9.5 19.1 7 20.5 7m0-1C18.6 6 17 7.6 17 9.5s1.6 3.5 3.5 3.5S24 11.4 24 9.5 22.4 6 20.5 6M30.5 7C31.9 7 33 8.1 33 9.5S31.9 12 30.5 12 28 10.9 28 9.5 29.1 7 30.5 7m0-1C28.6 6 27 7.6 27 9.5s1.6 3.5 3.5 3.5S34 11.4 34 9.5 32.4 6 30.5 6M30.5 28c1.4 0 2.5 1.1 2.5 2.5S31.9 33 30.5 33 28 31.9 28 30.5s1.1-2.5 2.5-2.5m0-1c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5M20.5 28c1.4 0 2.5 1.1 2.5 2.5S21.9 33 20.5 33 18 31.9 18 30.5s1.1-2.5 2.5-2.5m0-1c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5"></path><path stroke="#666" stroke-miterlimit="10" d="M30.5 12v16M28 9.5h-4M28 30.5h-4"></path><path fill="#666" d="M15 17v7.6c0 .8-.6 1.4-1.4 1.4H9.4c-.8 0-1.4-.6-1.4-1.4V17zm1-1H7v8.6C7 25.9 8.1 27 9.4 27h4.2c1.3 0 2.4-1.1 2.4-2.4z"></path><path fill="#666" d="M16 15v1H7v-1zm1-1H6v3h11z"></path><path stroke="#666" stroke-miterlimit="10" d="M11.5 19v5M13.5 19v5M9.5 19v5"></path><path fill="#666" d="M12 13v1h-1v-1zm1-1h-3v3h3z"></path>', 6);
-const _hoisted_8 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_8);
-}
-const delete_area_inactive = { render };
-export {
-  delete_area_inactive as default,
-  render
-};

package/dist/main.es104.js

@@ -1,20 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "42",
-  height: "42",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#B2B9C5" d="M0 0h40v40H0z"></path><path fill="#fff" d="M19.5 7C20.9 7 22 8.1 22 9.5S20.9 12 19.5 12 17 10.9 17 9.5 18.1 7 19.5 7m0-1C17.6 6 16 7.6 16 9.5s1.6 3.5 3.5 3.5S23 11.4 23 9.5 21.4 6 19.5 6M30.5 7C31.9 7 33 8.1 33 9.5S31.9 12 30.5 12 28 10.9 28 9.5 29.1 7 30.5 7m0-1C28.6 6 27 7.6 27 9.5s1.6 3.5 3.5 3.5S34 11.4 34 9.5 32.4 6 30.5 6M30.5 28c1.4 0 2.5 1.1 2.5 2.5S31.9 33 30.5 33 28 31.9 28 30.5s1.1-2.5 2.5-2.5m0-1c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5M19.5 28c1.4 0 2.5 1.1 2.5 2.5S20.9 33 19.5 33 17 31.9 17 30.5s1.1-2.5 2.5-2.5m0-1c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5"></path><path stroke="#fff" stroke-miterlimit="10" d="M30.5 12v16M28 9.5h-6M28 30.5h-6"></path><path fill="#fff" d="M18 19H6v2h12z"></path><path fill="#fff" d="M13 26V14h-2v12z"></path>', 5);
-const _hoisted_7 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_7);
-}
-const direction_active1 = { render };
-export {
-  direction_active1 as default,
-  render
-};