@eturnity/eturnity_reusable_components 9.3.1-EPDM-16212.0 → 9.3.1-EPDM-13987.2

package/src/assets/svgIcons/layer_back.svg

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,5 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,3 @@
+<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/assets/theme.js

@@ -70,7 +70,7 @@ const theme = (() => {
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
     transparentWhite1: '#ffffff16',
-    transparentBlack1: '#263238e6',
+    transparentBlack1: '#162228e6',
     transparentBlack2: '#263238e5',
     transparentBlue1: '#20a4cae6',
     blueElectric: '#66dffa',
@@ -178,6 +178,39 @@ const theme = (() => {
       800: '#662222',
       900: '#331111',
     },
+    transparentWhite: {
+      100: '#ffffff24',
+      200: '#ffffff48',
+      300: '#ffffff64',
+      400: '#ffffff80',
+      500: '#ffffff96',
+      600: '#ffffffb4',
+      700: '#ffffffd4',
+      800: '#ffffffe6',
+      900: '#fffffffa',
+    },
+    transparentBlack: {
+      100: '#00000024',
+      200: '#00000048',
+      300: '#00000064',
+      400: '#00000080',
+      500: '#00000096',
+      600: '#000000b4',
+      700: '#000000d4',
+      800: '#000000e6',
+      900: '#000000fa',
+    },
+    transparentTeal: {
+      100: '#6E8E9E24',
+      200: '#6E8E9E48',
+      300: '#6E8E9E64',
+      400: '#6E8E9E80',
+      500: '#6E8E9E96',
+      600: '#6E8E9Eb4',
+      700: '#6E8E9Ed4',
+      800: '#6E8E9Ee6',
+      900: '#6E8E9Efa',
+    },
   }
 
   const chartGradients = {
@@ -626,55 +659,6 @@ const theme = (() => {
             },
           },
         },
-        tertiary: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: 'transparent',
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[500],
-            },
-            hover: {
-              backgroundColor: semanticColors.teal[600],
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[400],
-            },
-            active: {
-              backgroundColor: semanticColors.teal[700],
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[300],
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: semanticColors.teal[200],
-              textColor: semanticColors.red[400],
-              borderColor: semanticColors.teal[500],
-            },
-            hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[700],
-              borderColor: semanticColors.teal[400],
-            },
-            active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
-              borderColor: semanticColors.teal[300],
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
-            },
-          },
-        },
         ghost: {
           // type
           main: {

package/src/components/accordion/Accordion.stories.js

@@ -1,5 +1,4 @@
 import Accordion from './index.vue'
-import theme from '@/assets/theme'
 
 export default {
   title: 'Accordion',
@@ -27,9 +26,6 @@ const Template = (args, { argTypes }) => ({
       </div>
   </template>
 </Accordion>`,
-  provide: {
-    theme,
-  },
 })
 
 export const Default = Template.bind({})

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

@@ -10,6 +10,7 @@
       :height="height"
       :is-active="isActive"
       :is-disabled="isDisabled"
+      :is-hovered="isHovered"
       :min-width="minWidth"
       :type="type"
       :variant="variant"
@@ -46,7 +47,7 @@
         data-test-id="button-icon-text"
         :height="height"
       >
-        {{ text }}
+        {{ isFirstLetterCapitalized ? capitalizeFirstLetter(text) : text }}
         <Icon
           v-if="showCaret"
           :color="
@@ -115,11 +116,13 @@
     variant: String,
     appTheme: String,
     isActive: Boolean,
+    isHovered: Boolean,
     height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     position: relative;
     display: grid;
+    align-content: center
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
     font-size: ${(props) =>
@@ -140,6 +143,9 @@
         : props.isActive
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .active.backgroundColor
+        : props.isHovered
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .hover.backgroundColor
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.backgroundColor};
     border: ${(props) => {
@@ -209,6 +215,7 @@
     width: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
     background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px 0 0 4px;
     border-right: ${(props) => {
       const borderColor =
         props.theme.mainButton[props.appTheme][props.type][props.variant]
@@ -350,6 +357,11 @@
         default: false,
         type: Boolean,
       },
+      isHovered: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       fillType: {
         required: false,
         default: 'fill',
@@ -389,20 +401,21 @@
         type: String,
         default: '',
       },
+      isFirstLetterCapitalized: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     data() {
       return {
         theme: Theme,
       }
     },
-    // computed: {
-    //   getIconColor() {
-    //     console.log(this.theme[this.themeType][this.type][this.variant])
-    //     return (
-    //       this.iconColor ||
-    //       this.theme[this.themeType][this.type][this.variant].textColor
-    //     )
-    //   },
-    // },
+    methods: {
+      capitalizeFirstLetter(word) {
+        return word.charAt(0).toUpperCase() + word.slice(1)
+      },
+    },
   }
 </script>

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,355 @@
+<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>