@eturnity/eturnity_reusable_components 8.22.1 → 8.22.3

package/package.json

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

package/src/components/infoText/defaultProps.js

@@ -0,0 +1,16 @@
+export default {
+  text: 'default text',
+  size: '14px',
+  infoPosition: 'bottom',
+  alignArrow: 'center',
+  openTrigger: 'onHover',
+  width: '165px',
+  maxWidth: '165px',
+  shouldUseTeleport: false,
+  dotColor: '#00009f',
+  type: 'info',
+  iconTextContent: {
+    iconName: 'error',
+    text: 'Sample Text',
+  },
+}

package/src/components/infoText/index.vue

@@ -1,6 +1,7 @@
 <template>
   <PageContainer
     ref="container"
+    data-test-id="infoText_container"
     :type="type"
     @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
     @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
@@ -287,6 +288,11 @@
         default: '',
         required: false,
       },
+      contentBackgroundColor: {
+        type: String,
+        default: '',
+        required: false,
+      },
       borderRadius: {
         type: String,
         default: '',
@@ -466,7 +472,9 @@
           width: '100%',
           maxWidth: props.maxWidth,
           overflowY: 'auto',
-          backgroundColor: props.image
+          backgroundColor: props.contentBackgroundColor
+            ? props.contentBackgroundColor
+            : props.image
             ? theme.colors.white
             : props.appTheme === 'light'
             ? theme.colors.black

package/src/components/infoText/infoText.spec.js

@@ -1,7 +1,8 @@
 /* eslint-disable */
 import { mount } from '@vue/test-utils'
 import InfoText from '@/components/infoText'
-import theme from '@/assets/theme'
+import defaultProps from './defaultProps'
+import IconTextContent from './templates/iconTextContent.vue'
 
 jest.mock('@/components/icon/iconCache.mjs', () => ({
   // need to mock this due to how jest handles import.meta
@@ -13,31 +14,19 @@ describe('InfoText Component', () => {
 
   beforeEach(() => {
     wrapper = mount(InfoText, {
-      props: {
-        text: 'default text',
-        size: '14px',
-        infoPosition: 'bottom',
-        alignArrow: 'center',
-        openTrigger: 'onHover',
-        width: '165px',
-        maxWidth: '165px',
-        shouldUseTeleport: false,
-        dotColor: '#00009f',
-        type: 'info',
-      },
+      props: defaultProps,
       global: {
-        provide: {
-          theme,
-        },
         stubs: {
-          teleport: true
-        }
+          teleport: true,
+        },
       },
     })
   })
 
   test('renders InfoText component with default props', () => {
-    expect(wrapper.find('[data-test-id="infoText_info"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test-id="infoText_container"]').exists()).toBe(
+      true
+    )
     expect(wrapper.vm.text).toContain('default text')
     expect(wrapper.vm.size).toContain('14px')
     expect(wrapper.vm.infoPosition).toContain('bottom')
@@ -52,7 +41,7 @@ describe('InfoText Component', () => {
     )
 
     //should see text upon click
-    await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
+    await wrapper.trigger('click')
     expect(wrapper.vm.isVisible).toBe(true)
 
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
@@ -64,4 +53,34 @@ describe('InfoText Component', () => {
     await wrapper.setProps({ type: 'dot' })
     expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
   })
+
+  test('iconTextContent slot is correctly rendered', async () => {
+    // override
+    const props = defaultProps.iconTextContent
+    wrapper = mount(InfoText, {
+      props: defaultProps,
+      slots: {
+        default: `<IconTextContent icon-name="${props.iconName}" text="${props.text}" />`,
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+        components: {
+          IconTextContent,
+        },
+      },
+    })
+
+    await wrapper.trigger('mouseenter')
+    expect(wrapper.vm.isVisible).toBe(true)
+
+    const container = wrapper.find('[data-test-id="iconTextContent_container"]')
+    const icon = container.find('[data-test-id="iconTextContent_icon"]')
+    const text = container.find('[data-test-id="iconTextContent_text"]')
+    expect(container.exists()).toBe(true)
+    expect(icon.exists()).toBe(true)
+    expect(text.exists()).toBe(true)
+    expect(text.text()).toBe(props.text)
+  })
 })

package/src/components/infoText/infoText.stories.js

@@ -1,4 +1,6 @@
+import theme from '../../assets/theme'
 import InfoText from './index.vue'
+import IconTextContent from './templates/iconTextContent.vue'
 
 export default {
   title: 'infoText',
@@ -46,3 +48,29 @@ export const OnClick = {
     openTrigger: 'onClick',
   },
 }
+
+export const IconTextContentTemplate = {
+  args: {
+    ...Default.args,
+    contentBackgroundColor: 'black',
+    iconName: 'warning_triangle',
+    iconColor: theme.colors.yellow,
+    size: '18px',
+  },
+  render: (args) => ({
+    components: { InfoText, IconTextContent },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoText v-bind="args">
+        <IconTextContent
+          icon-name="warning_triangle"
+          text="This is a sample text with an icon"
+          icon-size="${args.size}"
+          icon-color="${args.iconColor}"
+        />
+      </InfoText>
+    `,
+  }),
+}

package/src/components/infoText/templates/iconTextContent.vue

@@ -0,0 +1,105 @@
+<template>
+  <Container data-test-id="iconTextContent_container">
+    <RCIcon
+      :color="iconColor"
+      data-test-id="iconTextContent_icon"
+      :name="iconName"
+      :size="iconSize"
+    />
+    <TextWrapper
+      data-test-id="iconTextContent_text"
+      :font-color="fontColor"
+      :font-size="fontSize"
+    >
+      {{ text }}
+      <slot data-test-id="iconTextContent_slot"></slot>
+    </TextWrapper>
+  </Container>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  // import IconTextContent from "@eturnity/eturnity_reusable_components/src/components/infoText/templates/iconTextContent"
+  //To use:
+  // <InfoText
+  //      icon-color="red"
+  //      icon-name="error"
+  //      size="20px"
+  //      open-trigger="onClick"
+  // >
+  //   <IconTextContent
+  //     icon-name="error"
+  //     text="Text"
+  //     icon-size="18px"
+  //     icon-color="red"
+  //   />
+  // </InfoText>
+
+  import styled from 'vue3-styled-components'
+  import theme from '../../../assets/theme.js'
+  import RCIcon from '../../icon'
+
+  const Container = styled('div')`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 8px;
+  `
+
+  const TextAttrs = {
+    fontSize: String,
+    fontColor: String,
+  }
+  const TextWrapper = styled('div', TextAttrs)`
+    font-size: ${(props) => props.fontSize};
+    color: ${(props) => props.fontColor};
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    font-weight: 400;
+    line-height: 150%;
+    letter-spacing: 0%;
+    vertical-align: middle;
+  `
+
+  export default {
+    name: 'IconTextContent',
+    components: {
+      Container,
+      TextWrapper,
+      RCIcon,
+    },
+    props: {
+      iconName: {
+        type: String,
+        required: true,
+      },
+      text: {
+        type: String,
+        required: true,
+      },
+      iconSize: {
+        type: String,
+        required: false,
+        default: '18px',
+      },
+      iconColor: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      fontSize: {
+        type: String,
+        required: false,
+        default: '11px',
+      },
+      fontColor: {
+        type: String,
+        required: false,
+        default: theme.colors.white,
+      },
+    },
+  }
+</script>

package/src/components/inputs/radioButton/RadioButton.stories.js

@@ -58,6 +58,12 @@ Default.args = {
   ...defaultProps,
 }
 
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...defaultProps,
+  disabled: true,
+}
+
 export const BlueCheckmark = Template.bind({})
 BlueCheckmark.args = {
   ...defaultProps,

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

@@ -11,7 +11,7 @@
         :has-label="!!item.label"
         :has-slots="!!$slots[`input-${item.value}`]"
         :is-checked="selectedOption === item.value"
-        :is-disabled="item.disabled"
+        :is-disabled="isItemDisabled(item)"
         :size="size"
       >
         <Radio
@@ -19,7 +19,7 @@
           :data-id="`radio_button_${dataId}_option_${item.value}`"
           :data-qa-id="dataQaId"
           :data-test-id="'radioInput_' + item.value"
-          :disabled="item.disabled"
+          :disabled="isItemDisabled(item)"
           :name="'radioButtons_' + radioName"
           type="radio"
           :value="selectedOption"
@@ -30,7 +30,7 @@
           v-if="item.label"
           :color-mode="colorMode"
           :data-test-id="'radioLabel_' + item.value"
-          :is-disabled="item.disabled"
+          :is-disabled="isItemDisabled(item)"
         >
           {{ item.label }}
         </LabelText>
@@ -261,6 +261,11 @@
       LabelText,
     },
     props: {
+      disabled: {
+        default: false,
+        required: false,
+        type: Boolean,
+      },
       selectedOption: {
         required: true,
         type: [String, Number],
@@ -328,6 +333,9 @@
       isImageOpen(index) {
         return this.selectedImage === index
       },
+      isItemDisabled(item) {
+        return this.disabled || item.disabled
+      },
       toggleImageModal(value) {
         this.selectedImage = value
       },

package/src/components/spinner/index.vue

@@ -1,6 +1,8 @@
 <template>
   <SpinnerContainer
     v-if="fullWidth"
+    data-id="spinner_full_container"
+    data-qa-id="spinner_full_container"
     data-test-id="spinner_full_container"
     :size="size"
   >
@@ -12,6 +14,8 @@
   </SpinnerContainer>
   <Container
     v-else
+    data-id="spinner_container"
+    data-qa-id="spinner_container"
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >

package/src/components/spinnerGif/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
+  <SpinnerContainer
+    v-if="fullWidth"
+    data-id="spinner_full_container"
+    data-qa-id="spinner_full_container"
+    data-test-id="spinner_full_container"
+  >
     <Container>
       <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
         <img
@@ -13,6 +18,8 @@
   </SpinnerContainer>
   <Container
     v-else
+    data-id="spinner_container"
+    data-qa-id="spinner_container"
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >

package/src/components/tabsHeader/TabsHeader.spec.js

@@ -0,0 +1,101 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import TabsHeader from './index.vue'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('')),
+}))
+
+describe('TabsHeader', () => {
+  const mockTabsData = [
+    {
+      text: 'Tab 1',
+      id: 0,
+      hasError: true,
+      icon: 'home',
+      subText: 'Subtext 1',
+    },
+    {
+      text: 'Tab 2',
+      id: 1,
+      hasError: false,
+      icon: 'settings',
+      subText: 'Subtext 2',
+    },
+  ]
+
+  const createWrapper = (props = {}) => {
+    return mount(TabsHeader, {
+      props: {
+        tabsData: mockTabsData,
+        activeTab: 0,
+        fullSize: true,
+        ...props,
+      },
+      global: {
+        mocks: {
+          theme,
+        },
+      },
+    })
+  }
+
+  it('renders all tabs correctly', () => {
+    const wrapper = createWrapper()
+    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
+    expect(tabs).toHaveLength(mockTabsData.length)
+  })
+
+  it('displays correct tab text', () => {
+    const wrapper = createWrapper()
+    const firstTab = wrapper.find('[data-test-id="tab-text"]')
+    expect(firstTab.text()).toBe('Tab 1')
+  })
+
+  it('emits on-tab-change event when clicking a tab', async () => {
+    const wrapper = createWrapper()
+    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
+    await tabs[1].trigger('click')
+    expect(wrapper.emitted('on-tab-change')).toBeTruthy()
+    expect(wrapper.emitted('on-tab-change')[0]).toEqual([1])
+  })
+
+  it('does not emit on-tab-change when clicking active tab', async () => {
+    const wrapper = createWrapper()
+    const activeTab = wrapper.find('[data-test-id="tab-item"]')
+    await activeTab.trigger('click')
+    expect(wrapper.emitted('on-tab-change')).toBeFalsy()
+  })
+
+  it('applies correct styles for active tab', () => {
+    const wrapper = createWrapper()
+    const activeTab = wrapper.find('[data-test-active="true"]')
+    expect(activeTab.exists()).toBe(true)
+  })
+
+  it('renders error icon when tab has error', () => {
+    const wrapper = createWrapper()
+    const warningIcon = wrapper.find('[data-test-id="warning-icon"]')
+    expect(warningIcon.exists()).toBe(true)
+  })
+
+  it('renders subtext when provided', () => {
+    const wrapper = createWrapper()
+    const subtext = wrapper.find('[data-test-id="tab-subtext"]')
+    expect(subtext.text()).toBe('Subtext 1')
+  })
+
+  it('renders icon when provided', () => {
+    const wrapper = createWrapper()
+    const icon = wrapper.find('[data-test-id="tab-icon"]')
+    expect(icon.exists()).toBe(true)
+  })
+
+  it('applies fullSize prop correctly', () => {
+    const wrapper = createWrapper({ fullSize: true })
+    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
+    expect(tabs.length).toBeGreaterThan(0)
+  })
+})

package/src/components/tabsHeader/index.vue

@@ -1,10 +1,12 @@
 <template>
-  <PageContainer>
-    <TabsContainer>
+  <PageContainer data-test-id="tabs-header-container">
+    <TabsContainer data-test-id="tabs-container">
       <TabItem
         v-for="item in tabsData"
         :key="item.id"
         :data-id="item.dataId"
+        :data-test-active="activeTab === item.id"
+        data-test-id="tab-item"
         :full-size="fullSize"
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
@@ -16,6 +18,7 @@
               ? theme.semanticColors.purple[500]
               : theme.semanticColors.teal[800]
           "
+          data-test-id="tab-icon"
           :hovered-color="
             activeTab === item.id
               ? theme.semanticColors.purple[500]
@@ -24,10 +27,21 @@
           :name="item.icon"
           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" />
+        <div data-test-id="tab-text">{{ item.text }}</div>
+        <DotIcon
+          v-if="item.subText"
+          data-test-id="dot-icon"
+          :is-active="activeTab === item.id"
+        />
+        <SubText v-if="item.subText" data-test-id="tab-subtext">{{
+          item.subText
+        }}</SubText>
+        <RCIcon
+          v-if="item.hasError"
+          data-test-id="warning-icon"
+          name="warning"
+          size="14px"
+        />
       </TabItem>
     </TabsContainer>
   </PageContainer>
@@ -112,7 +126,6 @@
     components: {
       PageContainer,
       TabsContainer,
-      NameContainer,
       TabItem,
       SubText,
       DotIcon,

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
-};