@eturnity/eturnity_reusable_components 8.49.3-EPDM-13987.2 → 8.49.3-EPDM-16285.1

package/src/assets/svgIcons/collapse_all_corners.svg

@@ -1,12 +0,0 @@
-<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M13.6464 14.3535C13.8417 14.5488 14.1582 14.5488 14.3534 14.3535C14.5487 14.1583 14.5487 13.8417 14.3534 13.6465L11.8739 11.167H13.9999C14.2761 11.167 14.4999 10.9431 14.4999 10.667C14.4999 10.3909 14.2761 10.167 13.9999 10.167H10.6669C10.5343 10.167 10.4072 10.2197 10.3134 10.3135C10.2196 10.4072 10.1669 10.5344 10.1669 10.667V14C10.1669 14.2761 10.3908 14.5 10.6669 14.5C10.9084 14.5 11.1104 14.3292 11.1571 14.1016L11.1669 14V11.874L13.6464 14.3535ZM1.64657 1.64657C1.81734 1.4758 2.08045 1.45418 2.2745 1.58212L2.3536 1.64657L4.83309 4.12606V2.00009C4.83309 1.72394 5.05695 1.50009 5.33309 1.50009C5.60924 1.50009 5.83309 1.72394 5.83309 2.00009V5.33309C5.83309 5.60924 5.60924 5.83309 5.33309 5.83309H2.00009C1.72394 5.83309 1.50009 5.60924 1.50009 5.33309C1.50009 5.05695 1.72394 4.83309 2.00009 4.83309H4.12606L1.64657 2.3536L1.58212 2.2745C1.45418 2.08045 1.4758 1.81734 1.64657 1.64657ZM10.1669 2.00009V5.33309C10.1669 5.60924 10.3908 5.83309 10.6669 5.83309H13.9999L14.1015 5.82333C14.3291 5.77656 14.4999 5.57459 14.4999 5.33309C14.4999 5.0916 14.3291 4.88963 14.1015 4.84286L13.9999 4.83309H11.8739L14.3534 2.3536L14.4179 2.2745C14.5458 2.08045 14.5242 1.81734 14.3534 1.64657C14.1827 1.4758 13.9195 1.45418 13.7255 1.58212L13.6464 1.64657L11.1669 4.12606V2.00009C11.1669 1.72394 10.943 1.50009 10.6669 1.50009C10.3908 1.50009 10.1669 1.72394 10.1669 2.00009ZM5.83309 14C5.83309 14.2761 5.60924 14.5 5.33309 14.5C5.05695 14.5 4.83309 14.2761 4.83309 14V11.874L2.3536 14.3535C2.15834 14.5488 1.84183 14.5488 1.64657 14.3535C1.45131 14.1583 1.45131 13.8417 1.64657 13.6465L4.12606 11.167H2.00009C1.72394 11.167 1.50009 10.9431 1.50009 10.667C1.50009 10.3909 1.72394 10.167 2.00009 10.167H5.33309L5.43368 10.1768C5.66165 10.2233 5.83309 10.4253 5.83309 10.667V14Z"
-    fill="black"
-  />
-</svg>

package/src/assets/svgIcons/compass_with_north.svg

@@ -1,12 +0,0 @@
-<svg
-  width="56"
-  height="56"
-  viewBox="0 0 56 56"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M28 8C38.8785 8 47.7278 16.6854 47.9932 27.5H49C49.2761 27.5 49.5 27.7239 49.5 28C49.5 28.2761 49.2761 28.5 49 28.5H47.9932C47.7278 39.3146 38.8785 48 28 48C17.1215 48 8.27221 39.3146 8.00684 28.5H7C6.72386 28.5 6.5 28.2761 6.5 28C6.5 27.7239 6.72386 27.5 7 27.5H8.00684C8.27221 16.6854 17.1215 8 28 8ZM28 9C17.6738 9 9.27096 17.2377 9.00586 27.5H10C10.2761 27.5 10.5 27.7239 10.5 28C10.5 28.2761 10.2761 28.5 10 28.5H9.00586C9.27096 38.7623 17.6738 47 28 47C38.3262 47 46.729 38.7623 46.9941 28.5H46C45.7239 28.5 45.5 28.2761 45.5 28C45.5 27.7239 45.7239 27.5 46 27.5H46.9941C46.729 17.2377 38.3262 9 28 9ZM36 45L28 42L20 45L28 9.5L36 45ZM30.0879 5.62012V0H30.9375V7H30.0879L25.9082 1.34961V7H25.0576V0H25.918L30.0879 5.62012Z"
-    fill="black"
-  />
-</svg>

package/src/assets/svgIcons/cursor_tool.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.12586 1.51758C2.30041 1.47862 2.46167 1.51289 2.56239 1.53907C2.68705 1.57149 2.83783 1.62682 2.99598 1.6836L13.454 5.4375L13.7313 5.53809C13.8172 5.57049 13.8956 5.60193 13.9628 5.63281C14.0625 5.67865 14.233 5.76344 14.3514 5.92578L14.3993 6L14.4423 6.0918C14.5166 6.2801 14.5193 6.48948 14.4501 6.67969L14.4091 6.77344C14.2993 6.98824 14.0947 7.09607 13.9823 7.15137C13.916 7.18398 13.8387 7.21734 13.7538 7.25196L13.4794 7.36035L9.08387 9.06934C9.08014 9.07079 9.07651 9.07193 9.07313 9.07324L9.06922 9.08399L7.36024 13.4795C7.28488 13.6733 7.21649 13.8498 7.15125 13.9824C7.10282 14.0809 7.01409 14.25 6.84852 14.3643L6.77332 14.4092C6.56007 14.5181 6.31143 14.5291 6.09168 14.4424L5.99989 14.3994C5.78795 14.2841 5.68507 14.0768 5.6327 13.9629C5.60181 13.8957 5.57037 13.8173 5.53797 13.7314L5.43739 13.4541L1.68348 2.9961C1.62671 2.83794 1.57137 2.68716 1.53895 2.5625C1.50906 2.4475 1.46875 2.25348 1.53895 2.05078L1.57508 1.96387C1.67016 1.76565 1.84052 1.61191 2.05067 1.53907L2.12586 1.51758ZM2.62489 2.65821L6.40223 13.1816C6.4103 13.1609 6.41982 13.1398 6.4286 13.1172L8.13758 8.72168L8.18446 8.60645C8.20547 8.55995 8.23213 8.50814 8.26649 8.45996L8.35535 8.35547C8.38769 8.32313 8.42249 8.29326 8.45985 8.2666L8.53407 8.22071C8.60785 8.18001 8.67963 8.15399 8.72157 8.1377L13.1171 6.42871L13.1815 6.40235L2.65809 2.625C2.64049 2.61868 2.62344 2.6132 2.60731 2.60742C2.61308 2.62356 2.61857 2.6406 2.62489 2.65821Z" fill="black"/>
-</svg>

package/src/assets/svgIcons/layer_back.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7.49971C8.27604 7.49971 8.49984 7.7237 8.5 7.99971V12.9597L10.1875 11.6091C10.4031 11.4368 10.7181 11.4718 10.8906 11.6872C11.0631 11.9028 11.028 12.2178 10.8125 12.3903L8.3125 14.3903C8.15281 14.5181 7.93421 14.5339 7.75977 14.4382L7.6875 14.3903L5.1875 12.3903C4.972 12.2178 4.93691 11.9028 5.10938 11.6872C5.28187 11.4718 5.59693 11.4368 5.8125 11.6091L7.5 12.9597V7.99971C7.50016 7.7237 7.72396 7.49971 8 7.49971Z" fill="black"/>
-<path d="M4.2998 6.21748L3.30078 6.63447L6.50098 7.96748C6.50075 7.9781 6.50002 7.98903 6.5 7.99971V9.05146L1.80762 7.09639C1.62141 7.0187 1.5 6.83624 1.5 6.63447C1.50024 6.43286 1.62148 6.25011 1.80762 6.17256L2.99902 5.67549L4.2998 6.21748Z" fill="black"/>
-<path d="M14.1924 6.17256C14.3785 6.25011 14.4998 6.43286 14.5 6.63447C14.5 6.83624 14.3786 7.0187 14.1924 7.09639L9.5 9.05146V7.99971C9.49997 7.9887 9.49829 7.97745 9.49805 7.9665L12.6982 6.63447L11.6992 6.21748L13 5.67549L14.1924 6.17256Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.80762 1.03877C7.93065 0.987525 8.06935 0.987525 8.19238 1.03877L14.1924 3.53877C14.3786 3.61643 14.5 3.79888 14.5 4.00068C14.4999 4.2024 14.3786 4.38501 14.1924 4.4626L8.19238 6.9626C8.10012 7.00099 7.99892 7.01014 7.90234 6.99092L7.80762 6.9626L1.80762 4.4626C1.6214 4.38501 1.50014 4.2024 1.5 4.00068C1.5 3.79888 1.62136 3.61643 1.80762 3.53877L7.80762 1.03877ZM3.30078 4.00068L8 5.95869L12.6982 4.00068L8 2.04365L3.30078 4.00068Z" fill="black"/>
-</svg>

package/src/assets/svgIcons/layer_backward.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7.49971C8.27604 7.49971 8.49984 7.7237 8.5 7.99971V12.9597L10.1875 11.6091C10.4031 11.4368 10.7181 11.4718 10.8906 11.6872C11.0631 11.9028 11.028 12.2178 10.8125 12.3903L8.3125 14.3903C8.15281 14.5181 7.93421 14.5339 7.75977 14.4382L7.6875 14.3903L5.1875 12.3903C4.972 12.2178 4.93691 11.9028 5.10938 11.6872C5.28187 11.4718 5.59693 11.4368 5.8125 11.6091L7.5 12.9597V7.99971C7.50016 7.7237 7.72396 7.49971 8 7.49971Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.80762 1.03877C7.93065 0.987525 8.06935 0.987525 8.19238 1.03877L14.1924 3.53877C14.3786 3.61643 14.5 3.79888 14.5 4.00068C14.4999 4.2024 14.3786 4.38501 14.1924 4.4626L8.19238 6.9626C8.10012 7.00099 7.99892 7.01014 7.90234 6.99092L7.80762 6.9626L1.80762 4.4626C1.6214 4.38501 1.50014 4.2024 1.5 4.00068C1.5 3.79888 1.62136 3.61643 1.80762 3.53877L7.80762 1.03877ZM3.30078 4.00068L8 5.95869L12.6982 4.00068L8 2.04365L3.30078 4.00068Z" fill="black"/>
-</svg>

package/src/assets/svgIcons/layer_forward.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.1924 10.5381C14.3787 10.6157 14.5 10.7981 14.5 11C14.5 11.2018 14.3787 11.3842 14.1924 11.4619L8.19238 13.9619C8.06935 14.0131 7.93065 14.0131 7.80762 13.9619L1.80762 11.4619C1.6213 11.3842 1.5 11.2018 1.5 11C1.50002 10.7981 1.62131 10.6157 1.80762 10.5381L6.5 8.582V9.66696L3.30078 11L8 12.957L12.6982 11L9.5 9.66696V8.582L14.1924 10.5381Z" fill="black"/>
-<path d="M7.75977 1.56149C7.9342 1.46582 8.15282 1.48161 8.3125 1.60934L10.8125 3.60934C11.0281 3.78184 11.0631 4.09684 10.8906 4.31247C10.7181 4.5281 10.4031 4.5631 10.1875 4.39059L8.5 3.04001V11C8.5 11.2761 8.27614 11.5 8 11.5C7.72386 11.5 7.5 11.2761 7.5 11V3.04001L5.8125 4.39059C5.59687 4.5631 5.28188 4.5281 5.10938 4.31247C4.93689 4.09684 4.97188 3.78184 5.1875 3.60934L7.6875 1.60934L7.75977 1.56149Z" fill="black"/>
-</svg>

package/src/assets/svgIcons/layer_front.svg

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.1924 10.497C14.3787 10.5747 14.5 10.7571 14.5 10.959C14.5 11.1608 14.3787 11.3432 14.1924 11.4209L8.19238 13.9209C8.06935 13.9721 7.93065 13.9721 7.80762 13.9209L1.80762 11.4209C1.6213 11.3432 1.5 11.1608 1.5 10.959C1.50002 10.7571 1.62131 10.5747 1.80762 10.497L2.99902 9.99997L4.2998 10.542L3.30078 10.959L8 12.916L12.6982 10.959L11.6992 10.542L13 9.99997L14.1924 10.497Z" fill="black"/>
-<path d="M14.1924 7.95602C14.3787 8.03365 14.5 8.2161 14.5 8.41794C14.5 8.61978 14.3787 8.80221 14.1924 8.87985L8.19238 11.3799C8.06935 11.4311 7.93065 11.4311 7.80762 11.3799L1.80762 8.87985C1.6213 8.80221 1.5 8.61978 1.5 8.41794C1.50002 8.2161 1.62131 8.03365 1.80762 7.95602L6.5 5.99997V7.08493L3.30078 8.41794L8 10.375L12.6982 8.41794L9.5 7.08493V5.99997L14.1924 7.95602Z" fill="black"/>
-<path d="M7.75977 1.56149C7.9342 1.46582 8.15282 1.48161 8.3125 1.60934L10.8125 3.60934C11.0281 3.78184 11.0631 4.09684 10.8906 4.31247C10.7181 4.5281 10.4031 4.5631 10.1875 4.39059L8.5 3.04001V8.99997C8.5 9.27611 8.27614 9.49997 8 9.49997C7.72386 9.49997 7.5 9.27611 7.5 8.99997V3.04001L5.8125 4.39059C5.59687 4.5631 5.28188 4.5281 5.10938 4.31247C4.93689 4.09684 4.97188 3.78184 5.1875 3.60934L7.6875 1.60934L7.75977 1.56149Z" fill="black"/>
-</svg>

package/src/assets/svgIcons/polygon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 2C13.5523 2 14 2.44772 14 3C14 3.36979 13.7984 3.69123 13.5 3.86426V12.1348C13.7987 12.3077 14 12.63 14 13C14 13.5523 13.5523 14 13 14C12.5598 14 12.1863 13.7154 12.0527 13.3203L3.74902 11.6592C3.56577 11.8672 3.29906 12 3 12C2.44772 12 2 11.5523 2 11C2 10.63 2.20133 10.3077 2.5 10.1348V5.86426C2.20157 5.69123 2 5.36979 2 5C2 4.44772 2.44772 4 3 4C3.29879 4 3.56578 4.1321 3.74902 4.33984L12.0527 2.67871C12.1866 2.28404 12.5601 2 13 2ZM3.94629 5.31934C3.86817 5.55092 3.70817 5.74357 3.5 5.86426V10.1348C3.70785 10.2551 3.8679 10.4477 3.94629 10.6787L12.25 12.3389C12.3214 12.2579 12.406 12.1892 12.5 12.1348V3.86426C12.4056 3.8095 12.3206 3.74069 12.249 3.65918L3.94629 5.31934Z" fill="black"/>
-</svg>

package/src/assets/svgIcons/upload_image_2.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.5 1C8.77614 1 9 1.22386 9 1.5C8.99982 1.77599 8.77603 2 8.5 2H2.5C2.22386 2 2 2.22386 2 2.5V13.5C2.00006 13.5915 2.02637 13.6763 2.06934 13.75C2.09841 13.6999 2.13528 13.6532 2.18262 13.6143L9.93262 7.23145C10.5586 6.71591 11.4816 6.79106 12.0156 7.40137L14 9.66895V7.5C14 7.22386 14.2239 7 14.5 7C14.7761 7 15 7.22386 15 7.5V13.5C14.9998 14.3283 14.3283 15 13.5 15H2.5C1.67168 15 1.00018 14.3283 1 13.5V2.5C1 1.67157 1.67157 1 2.5 1H8.5ZM11.2627 8.05957C11.0847 7.85623 10.777 7.83111 10.5684 8.00293L3.28613 14H13.5C13.776 14 13.9998 13.776 14 13.5V11.1865L11.2627 8.05957ZM5.5 3.5C6.60457 3.5 7.5 4.39543 7.5 5.5C7.5 6.60457 6.60457 7.5 5.5 7.5C4.39543 7.5 3.5 6.60457 3.5 5.5C3.5 4.39543 4.39543 3.5 5.5 3.5ZM5.5 4.5C4.94772 4.5 4.5 4.94772 4.5 5.5C4.5 6.05228 4.94772 6.5 5.5 6.5C6.05228 6.5 6.5 6.05228 6.5 5.5C6.5 4.94772 6.05228 4.5 5.5 4.5ZM12.5 1C12.7761 1 13 1.22386 13 1.5V4.29297L14.1465 3.14648C14.3417 2.95122 14.6583 2.95122 14.8535 3.14648C15.0488 3.34175 15.0488 3.65825 14.8535 3.85352L12.9238 5.7832C12.9122 5.79477 12.898 5.80306 12.8857 5.81348C12.7941 5.92604 12.6565 6 12.5 6C12.3433 6 12.205 5.92631 12.1133 5.81348C12.1012 5.8032 12.0876 5.79459 12.0762 5.7832L10.1465 3.85352C9.95122 3.65825 9.95122 3.34175 10.1465 3.14648C10.3417 2.95122 10.6583 2.95122 10.8535 3.14648L12 4.29297V1.5C12 1.22386 12.2239 1 12.5 1Z" fill="black"/>
-</svg>

package/src/components/buttons/collection/ButtonIconCollection.stories.js

@@ -1,31 +0,0 @@
-import ButtonIconCollection from './index.vue'
-
-export default {
-  title: 'Components/Buttons/ButtonIconCollection',
-  component: ButtonIconCollection,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'A comprehensive display of all ButtonIcon variations across themes, types, variants, and states.',
-      },
-    },
-  },
-}
-
-export const AllButtonIcons = {
-  render: () => ({
-    components: { ButtonIconCollection },
-    template: '<ButtonIconCollection />',
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Displays all ButtonIcon possibilities in a grid with Light and Dark themes side by side.',
-      },
-    },
-  },
-}

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

@@ -1,355 +0,0 @@
-<template>
-  <PageWrapper>
-    <PageTitle>ButtonIcon Collection</PageTitle>
-
-    <GridContainer>
-      <!-- Light Theme Column -->
-      <ThemeSection :is-dark="false">
-        <ThemeTitle>Light Theme</ThemeTitle>
-
-        <!-- Header Row -->
-        <HeaderRow>
-          <HeaderCell
-            v-for="buttonType in types"
-            :key="'light-header-' + buttonType"
-          >
-            {{ buttonType }}
-          </HeaderCell>
-        </HeaderRow>
-
-        <!-- Main Variant Section -->
-        <VariantSection>
-          <VariantHeader :cols="types.length">main</VariantHeader>
-        </VariantSection>
-
-        <!-- States for Main variant -->
-        <StateSection v-for="state in states" :key="'light-main-' + state.name">
-          <StateHeader :cols="types.length">{{ state.name }}</StateHeader>
-          <ButtonRow>
-            <ButtonCell
-              v-for="buttonType in types"
-              :key="'light-main-' + buttonType + '-' + state.name"
-            >
-              <ButtonIcon
-                app-theme="light"
-                icon-name="plus_button"
-                :is-active="state.isActive"
-                :is-disabled="state.isDisabled"
-                :is-hovered="state.isHovered"
-                :text="buttonType"
-                :type="buttonType"
-                variant="main"
-              />
-            </ButtonCell>
-          </ButtonRow>
-        </StateSection>
-
-        <!-- Cancel Variant Section -->
-        <VariantSection>
-          <VariantHeader :cols="types.length">cancel</VariantHeader>
-        </VariantSection>
-
-        <!-- States for Cancel variant -->
-        <StateSection
-          v-for="state in states"
-          :key="'light-cancel-' + state.name"
-        >
-          <StateHeader :cols="types.length">{{ state.name }}</StateHeader>
-          <ButtonRow>
-            <ButtonCell
-              v-for="buttonType in types"
-              :key="'light-cancel-' + buttonType + '-' + state.name"
-            >
-              <ButtonIcon
-                app-theme="light"
-                icon-name="plus_button"
-                :is-active="state.isActive"
-                :is-disabled="state.isDisabled"
-                :is-hovered="state.isHovered"
-                :text="buttonType"
-                :type="buttonType"
-                variant="cancel"
-              />
-            </ButtonCell>
-          </ButtonRow>
-        </StateSection>
-      </ThemeSection>
-
-      <!-- Dark Theme Column -->
-      <ThemeSection :is-dark="true">
-        <ThemeTitle :is-dark="true">Dark Theme</ThemeTitle>
-
-        <!-- Header Row -->
-        <HeaderRow :is-dark="true">
-          <HeaderCell
-            v-for="buttonType in types"
-            :key="'dark-header-' + buttonType"
-            :is-dark="true"
-          >
-            {{ buttonType }}
-          </HeaderCell>
-        </HeaderRow>
-
-        <!-- Main Variant Section -->
-        <VariantSection>
-          <VariantHeader :cols="types.length" :is-dark="true">
-            main
-          </VariantHeader>
-        </VariantSection>
-
-        <!-- States for Main variant -->
-        <StateSection v-for="state in states" :key="'dark-main-' + state.name">
-          <StateHeader :cols="types.length" :is-dark="true">
-            {{ state.name }}
-          </StateHeader>
-          <ButtonRow>
-            <ButtonCell
-              v-for="buttonType in types"
-              :key="'dark-main-' + buttonType + '-' + state.name"
-            >
-              <ButtonIcon
-                app-theme="dark"
-                icon-name="plus_button"
-                :is-active="state.isActive"
-                :is-disabled="state.isDisabled"
-                :is-hovered="state.isHovered"
-                :text="buttonType"
-                :type="buttonType"
-                variant="main"
-              />
-            </ButtonCell>
-          </ButtonRow>
-        </StateSection>
-
-        <!-- Cancel Variant Section -->
-        <VariantSection>
-          <VariantHeader :cols="types.length" :is-dark="true">
-            cancel
-          </VariantHeader>
-        </VariantSection>
-
-        <!-- States for Cancel variant -->
-        <StateSection
-          v-for="state in states"
-          :key="'dark-cancel-' + state.name"
-        >
-          <StateHeader :cols="types.length" :is-dark="true">
-            {{ state.name }}
-          </StateHeader>
-          <ButtonRow>
-            <ButtonCell
-              v-for="buttonType in types"
-              :key="'dark-cancel-' + buttonType + '-' + state.name"
-            >
-              <ButtonIcon
-                app-theme="dark"
-                icon-name="plus_button"
-                :is-active="state.isActive"
-                :is-disabled="state.isDisabled"
-                :is-hovered="state.isHovered"
-                :text="buttonType"
-                :type="buttonType"
-                variant="cancel"
-              />
-            </ButtonCell>
-          </ButtonRow>
-        </StateSection>
-      </ThemeSection>
-    </GridContainer>
-  </PageWrapper>
-</template>
-
-<script>
-  import ButtonIcon from '../buttonIcon/index.vue'
-  import styled from 'vue3-styled-components'
-  import theme from '@/assets/theme'
-
-  const PageWrapper = styled.div`
-    padding: 40px;
-    font-family: ${(props) => props.theme.fonts.mainFont};
-    background: linear-gradient(135deg, #f8f9fb 0%, #ebeef3 100%);
-    min-height: 100vh;
-  `
-
-  const PageTitle = styled.h1`
-    text-align: center;
-    font-size: 32px;
-    font-weight: 700;
-    color: ${(props) => props.theme.semanticColors.teal[800]};
-    margin-bottom: 40px;
-    letter-spacing: -0.5px;
-  `
-
-  const GridContainer = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 32px;
-    max-width: 1600px;
-    margin: 0 auto;
-  `
-
-  const ThemeSectionAttrs = { isDark: Boolean }
-  const ThemeSection = styled('div', ThemeSectionAttrs)`
-    background-color: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.teal[800]
-        : props.theme.colors.white};
-    border-radius: 16px;
-    padding: 24px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-    border: 1px solid
-      ${(props) =>
-        props.isDark ? 'transparent' : props.theme.semanticColors.grey[300]};
-  `
-
-  const ThemeTitleAttrs = { isDark: Boolean }
-  const ThemeTitle = styled('h2', ThemeTitleAttrs)`
-    text-align: center;
-    font-size: 22px;
-    font-weight: 600;
-    margin-bottom: 20px;
-    padding-bottom: 12px;
-    border-bottom: 2px solid
-      ${(props) =>
-        props.isDark
-          ? props.theme.semanticColors.teal[600]
-          : props.theme.semanticColors.purple[200]};
-    color: ${(props) =>
-      props.isDark
-        ? props.theme.colors.white
-        : props.theme.semanticColors.teal[800]};
-  `
-
-  const HeaderRowAttrs = { isDark: Boolean }
-  const HeaderRow = styled('div', HeaderRowAttrs)`
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 12px;
-    margin-bottom: 8px;
-  `
-
-  const HeaderCellAttrs = { isDark: Boolean }
-  const HeaderCell = styled('div', HeaderCellAttrs)`
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    text-align: center;
-    padding: 10px 4px;
-    border-radius: 6px;
-    background: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.teal[700]
-        : props.theme.semanticColors.purple[50]};
-    color: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.purple[200]
-        : props.theme.semanticColors.purple[600]};
-  `
-
-  const VariantSection = styled.div`
-    margin-top: 16px;
-  `
-
-  const VariantHeaderAttrs = { cols: Number, isDark: Boolean }
-  const VariantHeader = styled('div', VariantHeaderAttrs)`
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: capitalize;
-    padding: 8px 12px;
-    border-radius: 6px;
-    text-align: center;
-    margin-bottom: 8px;
-    background: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.teal[600]
-        : props.theme.semanticColors.grey[200]};
-    color: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.yellow[300]
-        : props.theme.semanticColors.teal[700]};
-  `
-
-  const StateSection = styled.div`
-    margin-bottom: 4px;
-  `
-
-  const StateHeaderAttrs = { cols: Number, isDark: Boolean }
-  const StateHeader = styled('div', StateHeaderAttrs)`
-    font-size: 10px;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    padding: 4px 0;
-    color: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.grey[400]
-        : props.theme.semanticColors.grey[600]};
-  `
-
-  const ButtonRow = styled.div`
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 12px;
-    align-items: center;
-  `
-
-  const ButtonCell = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 36px;
-  `
-
-  export default {
-    name: 'ButtonIconCollection',
-    components: {
-      ButtonIcon,
-      PageWrapper,
-      PageTitle,
-      GridContainer,
-      ThemeSection,
-      ThemeTitle,
-      HeaderRow,
-      HeaderCell,
-      VariantSection,
-      VariantHeader,
-      StateSection,
-      StateHeader,
-      ButtonRow,
-      ButtonCell,
-    },
-    data() {
-      return {
-        theme,
-        types: ['primary', 'secondary', 'tertiary', 'ghost'],
-        states: [
-          {
-            name: 'default',
-            isActive: false,
-            isHovered: false,
-            isDisabled: false,
-          },
-          {
-            name: 'hover',
-            isActive: false,
-            isHovered: true,
-            isDisabled: false,
-          },
-          {
-            name: 'active',
-            isActive: true,
-            isHovered: false,
-            isDisabled: false,
-          },
-          {
-            name: 'disabled',
-            isActive: false,
-            isHovered: false,
-            isDisabled: true,
-          },
-        ],
-      }
-    },
-  }
-</script>