@designcrowd/fe-shared-lib 1.4.8-promocardv1 → 1.4.9

package/src/atoms/components/Icon/Icon.stories.js

@@ -25,6 +25,8 @@ export const IconSample = () => {
           { name: 'auth-facebook' },
           { name: 'auth-facebook-white' },
           { name: 'auth-google' },
+          { name: 'badge' },
+          { name: 'briefcase' },
           { name: 'brush' },
           { name: 'banner' },
           { name: 'banner-centered' },
@@ -60,6 +62,7 @@ export const IconSample = () => {
           { name: 'chevron-right' },
           { name: 'chevron-right-wide' },
           { name: 'chevron-up' },
+          { name: 'clipboard-check' },
           { name: 'close' },
           { name: 'community' },
           { name: 'column-1' },

package/src/atoms/components/Icon/Icon.vue

@@ -49,6 +49,7 @@ import IconAttach from './icons/attach.vue';
 import IconAuthFacebookWhite from './icons/auth-facebook-white.vue';
 import IconAuthFacebook from './icons/auth-facebook.vue';
 import IconAuthGoogle from './icons/auth-google.vue';
+import IconBriefcase from './icons/briefcase.vue';
 import IconBackground from './icons/background.vue';
 import IconBannerCentered from './icons/banner-centered.vue';
 import IconBannerLeft from './icons/banner-left.vue';
@@ -396,6 +397,8 @@ import IconVolume from './icons/volume.vue';
 
 import IconFile from './icons/file.vue';
 import IconPenTool from './icons/pen-tool.vue';
+import IconClipboardCheck from './icons/clipboard-check.vue';
+import IconBadge from './icons/badge.vue';
 
 export default {
   components: {
@@ -413,6 +416,7 @@ export default {
     IconAuthFacebook,
     IconAuthFacebookWhite,
     IconAuthGoogle,
+    IconBriefcase,
     IconBcMast,
     IconBackground,
     IconBanner,
@@ -763,6 +767,8 @@ export default {
     /* eslint-enable camelcase */
     IconAspectRatioCircle,
     IconAspectRatioOriginal,
+    IconClipboardCheck,
+    IconBadge,
   },
   props: {
     viewBox: {

package/src/atoms/components/Icon/icons/badge.vue

@@ -0,0 +1,8 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12Z
+       M12.1308 3.09889C12.275 3.44751 12.5516 3.72462 12.9 3.86929L14.1217 4.37532C14.4703 4.51974 14.7473 4.79673 14.8917 5.14538C15.0361 5.49402 15.0361 5.88576 14.8917 6.2344L14.386 7.4552C14.2416 7.804 14.2414 8.19613 14.3865 8.54476L14.8913 9.76519C14.9629 9.93787 14.9997 10.123 14.9997 10.3099C14.9998 10.4968 14.963 10.6819 14.8914 10.8546C14.8199 11.0273 14.715 11.1843 14.5828 11.3164C14.4507 11.4486 14.2937 11.5534 14.121 11.6249L12.9002 12.1305C12.5516 12.2747 12.2745 12.5514 12.1299 12.8998L11.6239 14.1214C11.4794 14.4701 11.2025 14.7471 10.8538 14.8915C10.5052 15.0359 10.1135 15.0359 9.76485 14.8915L8.54409 14.3858C8.19545 14.2418 7.80387 14.2421 7.45545 14.3867L6.23382 14.892C5.88538 15.036 5.494 15.0359 5.14566 14.8916C4.79731 14.7473 4.52047 14.4707 4.37597 14.1224L3.8698 12.9003C3.72566 12.5517 3.44898 12.2746 3.10059 12.13L1.87896 11.6239C1.53048 11.4796 1.25358 11.2027 1.10912 10.8543C0.964656 10.5059 0.96446 10.1143 1.10857 9.76572L1.61422 8.54492C1.75828 8.19627 1.75798 7.80467 1.61341 7.45623L1.10848 6.23369C1.03689 6.06101 1.00003 5.87591 1 5.68898C0.99997 5.50205 1.03677 5.31694 1.10831 5.14424C1.17984 4.97154 1.2847 4.81462 1.4169 4.68246C1.54909 4.5503 1.70604 4.44549 1.87876 4.37401L3.09951 3.86834C3.44781 3.72432 3.72474 3.44798 3.86951 3.09998L4.37553 1.87831C4.51993 1.52966 4.79692 1.25266 5.14555 1.10825C5.49419 0.963836 5.88591 0.963836 6.23454 1.10825L7.45529 1.61392C7.80393 1.75798 8.19551 1.75768 8.54393 1.6131L9.76608 1.10903C10.1147 0.964701 10.5063 0.96473 10.8549 1.10912C11.2034 1.2535 11.4804 1.53042 11.6248 1.87897L12.131 3.10101L12.1308 3.09889Z"
+  />
+</template>

package/src/atoms/components/Icon/icons/briefcase.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    d="M13.9163 6.79983C13.9163 6.41419 13.9158 6.17005 13.9007 5.98537C13.8864 5.80959 13.8627 5.75468 13.8529 5.73537C13.7969 5.62561 13.7077 5.53642 13.598 5.48049C13.5787 5.47066 13.5238 5.447 13.348 5.43264C13.1633 5.41755 12.9192 5.41701 12.5335 5.41701H11.4163V13.25H12.5335C12.9191 13.25 13.1633 13.2495 13.348 13.2344C13.5234 13.2201 13.5786 13.1964 13.598 13.1865C13.7077 13.1307 13.7969 13.0413 13.8529 12.9317C13.8627 12.9124 13.8863 12.8574 13.9007 12.6817C13.9158 12.497 13.9163 12.252 13.9163 11.8662V6.79983ZM6.08333 13.25H9.91634V5.41701H6.08333V13.25ZM8.00032 2.75002C7.33233 2.75002 7.14499 2.75688 7.01009 2.79299C6.57872 2.90857 6.24188 3.24541 6.1263 3.67678C6.11062 3.73534 6.10144 3.80371 6.09505 3.91701H9.90462C9.89823 3.80382 9.89 3.7353 9.87435 3.67678C9.7588 3.24556 9.42171 2.90868 8.99056 2.79299C8.85566 2.75684 8.66833 2.75002 8.00032 2.75002ZM2.08333 11.8662C2.08333 12.252 2.08386 12.497 2.09896 12.6817C2.11333 12.8574 2.137 12.9124 2.14681 12.9317C2.20272 13.0414 2.29199 13.1306 2.40169 13.1865C2.42094 13.1964 2.47598 13.22 2.65169 13.2344C2.8364 13.2495 3.08138 13.25 3.46712 13.25H4.58333V5.41701H3.46712C3.08138 5.41701 2.8364 5.41755 2.65169 5.43264C2.476 5.44702 2.42094 5.47068 2.40169 5.48049C2.29202 5.53642 2.2027 5.62568 2.14681 5.73537C2.13694 5.75479 2.11329 5.80997 2.09896 5.98537C2.08387 6.17005 2.08333 6.4142 2.08333 6.79983V11.8662ZM15.4163 11.8662C15.4163 12.2272 15.4171 12.5438 15.3958 12.8037C15.3739 13.0723 15.3252 13.3465 15.1898 13.6123C14.9901 14.0041 14.6714 14.3227 14.2796 14.5225C14.0137 14.658 13.7388 14.7076 13.47 14.7295C13.2102 14.7507 12.8944 14.75 12.5335 14.75H3.46712C3.10613 14.75 2.78958 14.7508 2.52962 14.7295C2.26098 14.7075 1.98691 14.658 1.72103 14.5225C1.32906 14.3228 1.0106 14.0043 0.81087 13.6123C0.675395 13.3464 0.625803 13.0724 0.603839 12.8037C0.582599 12.5438 0.583331 12.2272 0.583331 11.8662V6.79983C0.583331 6.43896 0.582611 6.1232 0.603839 5.8633C0.625794 5.59459 0.675358 5.31969 0.81087 5.05373C1.01062 4.66199 1.32921 4.34322 1.72103 4.14358C1.98684 4.00819 2.26106 3.95948 2.52962 3.93752C2.78958 3.91628 3.10613 3.91701 3.46712 3.91701H4.5931C4.60372 3.68501 4.626 3.47875 4.67708 3.28811C4.93139 2.33924 5.67255 1.59808 6.62142 1.34377C6.99517 1.24363 7.42863 1.25002 8.00032 1.25002C8.57179 1.25002 9.00461 1.24368 9.37825 1.34377C10.3272 1.59803 11.0682 2.33922 11.3226 3.28811C11.3737 3.47875 11.3969 3.68499 11.4075 3.91701H12.5335C12.8944 3.91701 13.2101 3.91629 13.47 3.93752C13.7388 3.95948 14.0137 4.00806 14.2796 4.14358C14.6714 4.34327 14.9901 4.66197 15.1898 5.05373C15.3253 5.31969 15.3739 5.59459 15.3958 5.8633C15.4171 6.1232 15.4163 6.43895 15.4163 6.79983V11.8662Z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  />
+</template>

package/src/atoms/components/Icon/icons/clipboard-check.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12.6667 5.33333C12.6667 4.67043 12.6605 4.46979 12.6208 4.32161C12.4975 3.86155 12.1384 3.50253 11.6784 3.37923C11.5979 3.35766 11.502 3.34621 11.3249 3.34016C11.3234 3.36931 11.3242 3.39777 11.3219 3.42513C11.3095 3.57752 11.2803 3.75785 11.1881 3.9388C11.0603 4.18965 10.856 4.39398 10.6051 4.5218C10.4244 4.61382 10.2447 4.64314 10.0924 4.65559C9.94791 4.6674 9.77585 4.66634 9.60026 4.66634H6.40006C6.2244 4.66634 6.05248 4.66741 5.90788 4.65559C5.75548 4.64314 5.57515 4.614 5.3942 4.5218C5.14347 4.394 4.93998 4.18953 4.81217 3.9388C4.71997 3.75785 4.69083 3.57752 4.67838 3.42513C4.67615 3.39775 4.67591 3.36933 4.67448 3.34016C4.49797 3.34621 4.40228 3.35773 4.32194 3.37923C3.86182 3.50252 3.50187 3.86149 3.37858 4.32161C3.33889 4.46979 3.33366 4.67055 3.33366 5.33333V11.4671C3.33366 12.0379 3.33357 12.4259 3.35807 12.7259C3.38193 13.0179 3.42514 13.1676 3.47819 13.2718C3.60601 13.5227 3.81034 13.727 4.0612 13.8548C4.16543 13.9079 4.31499 13.951 4.60709 13.9749C4.90715 13.9994 5.29581 14.0003 5.86686 14.0003H10.1335C10.7042 14.0003 11.0923 13.9994 11.3923 13.9749C11.6845 13.951 11.8349 13.9079 11.9391 13.8548C12.1899 13.727 12.3934 13.5226 12.5212 13.2718C12.5743 13.1675 12.6174 13.0181 12.6413 12.7259C12.6658 12.4259 12.6667 12.0379 12.6667 11.4671V5.33333ZM9.86198 7.86165C10.1222 7.60157 10.544 7.60168 10.8044 7.86165C11.0647 8.122 11.0647 8.54466 10.8044 8.80501L7.80436 11.805C7.54404 12.065 7.12223 12.0651 6.86198 11.805L5.52897 10.471C5.26862 10.2107 5.26862 9.78899 5.52897 9.52864C5.78933 9.26845 6.21106 9.26835 6.47135 9.52864L7.33268 10.39L9.86198 7.86165ZM6.01627 2.00716C6.01317 2.00741 6.01026 2.00788 6.00749 2.00813C6.00726 2.01062 6.00673 2.0132 6.00651 2.01595C6.00016 2.09363 5.99967 2.20222 5.99967 2.39973V2.93294C5.99967 3.13045 6.00017 3.23902 6.00651 3.31673C6.00673 3.31939 6.00727 3.32212 6.00749 3.32454C6.01028 3.3248 6.01314 3.32624 6.01627 3.32649C6.094 3.33284 6.20238 3.33333 6.40006 3.33333H9.60026C9.79778 3.33333 9.90636 3.33284 9.98405 3.32649C9.98644 3.3263 9.98869 3.32571 9.99088 3.32552C9.99114 3.32276 9.99259 3.31981 9.99284 3.31673C9.99918 3.23901 9.99967 3.13049 9.99967 2.93294V2.39973C9.99967 2.20222 9.99918 2.09363 9.99284 2.01595C9.99258 2.01284 9.99212 2.00993 9.99186 2.00716C9.9894 2.00693 9.98676 2.00738 9.98405 2.00716C9.90636 2.00081 9.79778 2.00032 9.60026 2.00032H6.40006C6.20238 2.00032 6.094 2.00081 6.01627 2.00716ZM13.9997 11.4671C13.9997 12.0159 14.0003 12.4675 13.9704 12.8343C13.9398 13.209 13.8744 13.5538 13.7096 13.8773C13.454 14.379 13.0454 14.7867 12.5436 15.0423C12.2202 15.2071 11.8762 15.2734 11.5016 15.304C11.1347 15.334 10.6825 15.3333 10.1335 15.3333H5.86686C5.31781 15.3333 4.86564 15.334 4.4987 15.304C4.12399 15.2734 3.77926 15.2072 3.45573 15.0423C2.95414 14.7866 2.54629 14.3789 2.29069 13.8773C2.12583 13.5537 2.06056 13.209 2.02995 12.8343C1.99999 12.4675 1.99967 12.0159 1.99967 11.4671V5.33333C1.99967 4.75652 1.99403 4.33726 2.09049 3.97688C2.33705 3.05674 3.05613 2.3378 3.97624 2.09114C4.18299 2.03574 4.40938 2.01465 4.6735 2.00618C4.67504 1.97229 4.67581 1.93909 4.67838 1.90755C4.69085 1.75524 4.72007 1.57565 4.81217 1.39485C4.93995 1.14408 5.14347 0.939685 5.3942 0.811844C5.57515 0.719646 5.75548 0.690506 5.90788 0.678055C6.05248 0.666241 6.22439 0.666336 6.40006 0.666336H9.60026C9.77585 0.666336 9.94791 0.666245 10.0924 0.678055C10.2447 0.690516 10.4244 0.719786 10.6051 0.811844C10.8247 0.92371 11.0083 1.09416 11.1364 1.30305L11.1881 1.39485L11.2458 1.52962C11.2935 1.66364 11.3126 1.79326 11.3219 1.90755C11.3245 1.93908 11.3243 1.9723 11.3258 2.00618C11.5901 2.01463 11.8163 2.03576 12.0231 2.09114C12.9434 2.33772 13.6623 3.05664 13.9089 3.97688C13.9813 4.24728 13.9968 4.55068 13.9997 4.92903V11.4671Z"
+  />
+</template>

package/src/atoms/components/Price/Price.vue

@@ -71,6 +71,10 @@ export default {
       if (!this.amount || this.amount === 0) {
         return this.free;
       }
+      const parsedAmount = Number.parseFloat(this.amount);
+      const hasFraction = parsedAmount % 1 !== 0;
+
+      const fractionToDisplay = (!hasFraction && !this.alwaysShowFraction) ? 0 : this.fraction;
 
       if (this.locale != null)
       {
@@ -78,7 +82,7 @@ export default {
           this.amount,
           this.locale,
           this.currency,
-          this.fraction,
+          fractionToDisplay,
           this.showAbbreviation
         );
         
@@ -87,14 +91,10 @@ export default {
         }
       }
 
-      const parsedAmount = Number.parseFloat(this.amount);
-
       if (Number.isNaN(parsedAmount)) {
         return this.amount;
       }
 
-      const hasFraction = parsedAmount % 1 !== 0;
-
       if (!hasFraction && !this.alwaysShowFraction) {
         return parsedAmount.toFixed(0);
       }

package/src/atoms/components/SparkleIcon/SparkleIcon.stories.js

@@ -0,0 +1,182 @@
+import SparkleIcon from './SparkleIcon.vue';
+
+export default {
+  title: 'Components/SparkleIcon',
+  component: SparkleIcon,
+  argTypes: {
+    animated: {
+      control: 'boolean',
+      description: 'Whether the sparkle icon should animate',
+      defaultValue: false,
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg', 12, 16, 20, 24, 32, 48],
+      description: 'Size of the icon (predefined or custom number)',
+      defaultValue: 'md',
+    },
+  },
+};
+
+// Default story
+export const Default = (args) => ({
+  components: { SparkleIcon },
+  setup() {
+    return { args };
+  },
+  template: '<SparkleIcon v-bind="args" />',
+});
+
+Default.args = {
+  animated: false,
+  size: 'md',
+};
+
+// Static icon story
+export const Static = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-flex tw-gap-4 tw-items-center">
+      <SparkleIcon size="sm" />
+      <SparkleIcon size="md" />
+      <SparkleIcon size="lg" />
+    </div>
+  `,
+});
+
+Static.story = {
+  name: 'Static Sizes',
+};
+
+// Animated icon story
+export const Animated = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-flex tw-gap-4 tw-items-center">
+      <SparkleIcon :animated="true" size="sm" />
+      <SparkleIcon :animated="true" size="md" />
+      <SparkleIcon :animated="true" size="lg" />
+    </div>
+  `,
+});
+
+Animated.story = {
+  name: 'Animated Sizes',
+};
+
+// Custom sizes story
+export const CustomSizes = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-flex tw-gap-4 tw-items-center">
+      <SparkleIcon :size="12" />
+      <SparkleIcon :size="16" />
+      <SparkleIcon :size="20" />
+      <SparkleIcon :size="24" />
+      <SparkleIcon :size="32" />
+      <SparkleIcon :size="48" />
+    </div>
+  `,
+});
+
+CustomSizes.story = {
+  name: 'Custom Number Sizes',
+};
+
+// Interactive toggle story
+export const Interactive = () => ({
+  components: { SparkleIcon },
+  data() {
+    return {
+      isAnimated: false,
+    };
+  },
+  template: `
+    <div class="tw-flex tw-flex-col tw-gap-4">
+      <div class="tw-flex tw-items-center tw-gap-4">
+        <SparkleIcon :animated="isAnimated" size="lg" />
+        <button 
+          class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded hover:tw-bg-blue-600"
+          @click="isAnimated = !isAnimated"
+        >
+          {{ isAnimated ? 'Stop Animation' : 'Start Animation' }}
+        </button>
+      </div>
+      <p class="tw-text-sm tw-text-gray-600">
+        Click the button to toggle animation
+      </p>
+    </div>
+  `,
+});
+
+Interactive.story = {
+  name: 'Interactive Toggle',
+};
+
+// All variations showcase
+export const Showcase = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-p-6">
+      <h3 class="tw-text-lg tw-font-bold tw-mb-4">Sparkle Icon Showcase</h3>
+      
+      <div class="tw-mb-6">
+        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Static Icons</h4>
+        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+          <div class="tw-text-center">
+            <SparkleIcon size="sm" />
+            <p class="tw-text-xs tw-mt-1">Small (12px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon size="md" />
+            <p class="tw-text-xs tw-mt-1">Medium (16px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon size="lg" />
+            <p class="tw-text-xs tw-mt-1">Large (20px)</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="tw-mb-6">
+        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Animated Icons</h4>
+        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" size="sm" />
+            <p class="tw-text-xs tw-mt-1">Small (12px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" size="md" />
+            <p class="tw-text-xs tw-mt-1">Medium (16px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" size="lg" />
+            <p class="tw-text-xs tw-mt-1">Large (20px)</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Custom Sizes</h4>
+        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :size="24" />
+            <p class="tw-text-xs tw-mt-1">24px</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :size="32" />
+            <p class="tw-text-xs tw-mt-1">32px</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :size="48" />
+            <p class="tw-text-xs tw-mt-1">48px</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+Showcase.story = {
+  name: 'Complete Showcase',
+};

package/src/atoms/components/SparkleIcon/SparkleIcon.vue

@@ -0,0 +1,105 @@
+<template>
+  <img :src="currentIcon" alt="AI" class="tw-flex-shrink-0" :style="sizeStyle" />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue';
+import sparkleIcon from './assets/sparkle.svg';
+import sparkleState01 from './assets/animations/state-01.svg';
+import sparkleState02 from './assets/animations/state-02.svg';
+import sparkleState03 from './assets/animations/state-03.svg';
+import sparkleState04 from './assets/animations/state-04.svg';
+import sparkleState05 from './assets/animations/state-05.svg';
+import sparkleState06 from './assets/animations/state-06.svg';
+import sparkleState07 from './assets/animations/state-07.svg';
+import sparkleState08 from './assets/animations/state-08.svg';
+
+interface SparkleIconProps {
+  animated?: boolean;
+  size?: 'sm' | 'md' | 'lg' | number;
+}
+
+const props = withDefaults(defineProps<SparkleIconProps>(), {
+  animated: false,
+  size: 'md',
+});
+
+// Size mapping
+const sizeMap = {
+  sm: 12,
+  md: 16,
+  lg: 20,
+};
+
+// Computed style for size
+const sizeStyle = computed(() => {
+  const sizeValue = typeof props.size === 'number' ? props.size : sizeMap[props.size];
+
+  return {
+    width: `${sizeValue}px`,
+    height: `${sizeValue}px`,
+  };
+});
+
+// Animation frames
+const sparkleFrames = [
+  sparkleState01,
+  sparkleState02,
+  sparkleState03,
+  sparkleState04,
+  sparkleState05,
+  sparkleState06,
+  sparkleState07,
+  sparkleState08,
+];
+
+const currentFrame = ref(0);
+let animationInterval: number | null = null;
+
+// Computed property to return either static or animated icon
+const currentIcon = computed(() => {
+  if (props.animated) {
+    return sparkleFrames[currentFrame.value];
+  }
+
+  return sparkleIcon;
+});
+
+// Start animation
+const startAnimation = () => {
+  if (animationInterval) return;
+
+  currentFrame.value = 0;
+  animationInterval = window.setInterval(() => {
+    currentFrame.value = (currentFrame.value + 1) % sparkleFrames.length;
+  }, 100); // Change frame every 100ms
+};
+
+// Stop animation
+const stopAnimation = () => {
+  if (animationInterval) {
+    clearInterval(animationInterval);
+    animationInterval = null;
+  }
+
+  currentFrame.value = 0;
+};
+
+// Watch animated prop to control animation
+watch(
+  () => props.animated,
+  (isAnimated) => {
+    if (isAnimated) {
+      startAnimation();
+    } else {
+      stopAnimation();
+    }
+  },
+  { immediate: true },
+);
+
+// Cleanup on unmount
+onUnmounted(() => {
+  stopAnimation();
+});
+</script>

package/src/atoms/components/SparkleIcon/assets/animations/state-01.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 10C12.5 9.80469 12.4121 9.6582 12.2363 9.56055L8.95508 7.91992L7.28516 4.60938C7.20703 4.45312 7.07031 4.375 6.875 4.375C6.67969 4.375 6.54297 4.45312 6.46484 4.60938L4.79492 7.91992L1.51367 9.56055C1.33789 9.6582 1.25 9.80469 1.25 10C1.25 10.1953 1.33789 10.332 1.51367 10.4102L4.79492 12.0508L6.46484 15.3613C6.54297 15.5371 6.67969 15.625 6.875 15.625C7.07031 15.625 7.20703 15.5371 7.28516 15.3613L8.95508 12.0508L12.2363 10.4102C12.4121 10.332 12.5 10.1953 12.5 10Z" fill="#3F59F6"/>
+<path d="M11.5625 5.3125C11.5625 5.3776 11.5885 5.42318 11.6406 5.44922L12.8125 5.9375L13.3008 7.10938C13.3268 7.16146 13.3724 7.1875 13.4375 7.1875C13.5026 7.1875 13.5482 7.16146 13.5742 7.10938L14.0625 5.9375L15.2344 5.44922C15.2865 5.42318 15.3125 5.3776 15.3125 5.3125C15.3125 5.2474 15.2865 5.20182 15.2344 5.17578L14.0625 4.6875L13.5742 3.51562C13.5482 3.46354 13.5026 3.4375 13.4375 3.4375C13.3724 3.4375 13.3268 3.46354 13.3008 3.51562L12.8125 4.6875L11.6406 5.17578C11.5885 5.20182 11.5625 5.2474 11.5625 5.3125Z" fill="#3F59F6"/>
+<path d="M15.3125 14.6875C15.3125 14.6224 15.2865 14.5768 15.2344 14.5508L14.0625 14.0625L13.5742 12.8906C13.5482 12.8385 13.5026 12.8125 13.4375 12.8125C13.3724 12.8125 13.3268 12.8385 13.3008 12.8906L12.8125 14.0625L11.6406 14.5508C11.5885 14.5768 11.5625 14.6224 11.5625 14.6875C11.5625 14.7526 11.5885 14.7982 11.6406 14.8242L12.8125 15.3125L13.3008 16.4844C13.3268 16.5365 13.3724 16.5625 13.4375 16.5625C13.5026 16.5625 13.5482 16.5365 13.5742 16.4844L14.0625 15.3125L15.2344 14.8242C15.2865 14.7982 15.3125 14.7526 15.3125 14.6875Z" fill="#3F59F6"/>
+</svg>

package/src/atoms/components/SparkleIcon/assets/animations/state-02.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.125 10C13.125 9.78299 13.0273 9.62023 12.832 9.51172L9.1862 7.6888L7.33073 4.01042C7.24392 3.83681 7.09201 3.75 6.875 3.75C6.65799 3.75 6.50608 3.83681 6.41927 4.01042L4.5638 7.6888L0.917969 9.51172C0.722656 9.62023 0.625 9.78299 0.625 10C0.625 10.217 0.722656 10.3689 0.917969 10.4557L4.5638 12.2786L6.41927 15.957C6.50608 16.1523 6.65799 16.25 6.875 16.25C7.09201 16.25 7.24392 16.1523 7.33073 15.957L9.1862 12.2786L12.832 10.4557C13.0273 10.3689 13.125 10.217 13.125 10Z" fill="#3F59F6"/>
+<path d="M12.5 5.3125C12.5 5.34505 12.513 5.36784 12.5391 5.38086L13.125 5.625L13.3691 6.21094C13.3822 6.23698 13.4049 6.25 13.4375 6.25C13.4701 6.25 13.4928 6.23698 13.5059 6.21094L13.75 5.625L14.3359 5.38086C14.362 5.36784 14.375 5.34505 14.375 5.3125C14.375 5.27995 14.362 5.25716 14.3359 5.24414L13.75 5L13.5059 4.41406C13.4928 4.38802 13.4701 4.375 13.4375 4.375C13.4049 4.375 13.3822 4.38802 13.3691 4.41406L13.125 5L12.5391 5.24414C12.513 5.25716 12.5 5.27995 12.5 5.3125Z" fill="#3F59F6"/>
+<path d="M14.375 14.6875C14.375 14.6549 14.362 14.6322 14.3359 14.6191L13.75 14.375L13.5059 13.7891C13.4928 13.763 13.4701 13.75 13.4375 13.75C13.4049 13.75 13.3822 13.763 13.3691 13.7891L13.125 14.375L12.5391 14.6191C12.513 14.6322 12.5 14.6549 12.5 14.6875C12.5 14.7201 12.513 14.7428 12.5391 14.7559L13.125 15L13.3691 15.5859C13.3822 15.612 13.4049 15.625 13.4375 15.625C13.4701 15.625 13.4928 15.612 13.5059 15.5859L13.75 15L14.3359 14.7559C14.362 14.7428 14.375 14.7201 14.375 14.6875Z" fill="#3F59F6"/>
+</svg>

package/src/atoms/components/SparkleIcon/assets/animations/state-03.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 10C12.5 9.80469 12.4121 9.6582 12.2363 9.56055L8.95508 7.91992L7.28516 4.60938C7.20703 4.45312 7.07031 4.375 6.875 4.375C6.67969 4.375 6.54297 4.45312 6.46484 4.60938L4.79492 7.91992L1.51367 9.56055C1.33789 9.6582 1.25 9.80469 1.25 10C1.25 10.1953 1.33789 10.332 1.51367 10.4102L4.79492 12.0508L6.46484 15.3613C6.54297 15.5371 6.67969 15.625 6.875 15.625C7.07031 15.625 7.20703 15.5371 7.28516 15.3613L8.95508 12.0508L12.2363 10.4102C12.4121 10.332 12.5 10.1953 12.5 10Z" fill="#3F59F6"/>
+<path d="M11.5625 5.3125C11.5625 5.3776 11.5885 5.42318 11.6406 5.44922L12.8125 5.9375L13.3008 7.10938C13.3268 7.16146 13.3724 7.1875 13.4375 7.1875C13.5026 7.1875 13.5482 7.16146 13.5742 7.10938L14.0625 5.9375L15.2344 5.44922C15.2865 5.42318 15.3125 5.3776 15.3125 5.3125C15.3125 5.2474 15.2865 5.20182 15.2344 5.17578L14.0625 4.6875L13.5742 3.51562C13.5482 3.46354 13.5026 3.4375 13.4375 3.4375C13.3724 3.4375 13.3268 3.46354 13.3008 3.51562L12.8125 4.6875L11.6406 5.17578C11.5885 5.20182 11.5625 5.2474 11.5625 5.3125Z" fill="#3F59F6"/>
+<path d="M15.3125 14.6875C15.3125 14.6224 15.2865 14.5768 15.2344 14.5508L14.0625 14.0625L13.5742 12.8906C13.5482 12.8385 13.5026 12.8125 13.4375 12.8125C13.3724 12.8125 13.3268 12.8385 13.3008 12.8906L12.8125 14.0625L11.6406 14.5508C11.5885 14.5768 11.5625 14.6224 11.5625 14.6875C11.5625 14.7526 11.5885 14.7982 11.6406 14.8242L12.8125 15.3125L13.3008 16.4844C13.3268 16.5365 13.3724 16.5625 13.4375 16.5625C13.5026 16.5625 13.5482 16.5365 13.5742 16.4844L14.0625 15.3125L15.2344 14.8242C15.2865 14.7982 15.3125 14.7526 15.3125 14.6875Z" fill="#3F59F6"/>
+</svg>

package/src/atoms/components/SparkleIcon/assets/animations/state-04.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5625 10C11.5625 9.83724 11.4893 9.71517 11.3428 9.63379L8.6084 8.2666L7.2168 5.50781C7.15169 5.3776 7.03776 5.3125 6.875 5.3125C6.71224 5.3125 6.59831 5.3776 6.5332 5.50781L5.1416 8.2666L2.40723 9.63379C2.26074 9.71517 2.1875 9.83724 2.1875 10C2.1875 10.1628 2.26074 10.2767 2.40723 10.3418L5.1416 11.709L6.5332 14.4678C6.59831 14.6143 6.71224 14.6875 6.875 14.6875C7.03776 14.6875 7.15169 14.6143 7.2168 14.4678L8.6084 11.709L11.3428 10.3418C11.4893 10.2767 11.5625 10.1628 11.5625 10Z" fill="#3F59F6"/>
+<path d="M10.625 5.3125C10.625 5.41016 10.6641 5.47852 10.7422 5.51758L12.5 6.25L13.2324 8.00781C13.2715 8.08594 13.3398 8.125 13.4375 8.125C13.5352 8.125 13.6035 8.08594 13.6426 8.00781L14.375 6.25L16.1328 5.51758C16.2109 5.47852 16.25 5.41016 16.25 5.3125C16.25 5.21484 16.2109 5.14648 16.1328 5.10742L14.375 4.375L13.6426 2.61719C13.6035 2.53906 13.5352 2.5 13.4375 2.5C13.3398 2.5 13.2715 2.53906 13.2324 2.61719L12.5 4.375L10.7422 5.10742C10.6641 5.14648 10.625 5.21484 10.625 5.3125Z" fill="#3F59F6"/>
+<path d="M16.25 14.6875C16.25 14.5898 16.2109 14.5215 16.1328 14.4824L14.375 13.75L13.6426 11.9922C13.6035 11.9141 13.5352 11.875 13.4375 11.875C13.3398 11.875 13.2715 11.9141 13.2324 11.9922L12.5 13.75L10.7422 14.4824C10.6641 14.5215 10.625 14.5898 10.625 14.6875C10.625 14.7852 10.6641 14.8535 10.7422 14.8926L12.5 15.625L13.2324 17.3828C13.2715 17.4609 13.3398 17.5 13.4375 17.5C13.5352 17.5 13.6035 17.4609 13.6426 17.3828L14.375 15.625L16.1328 14.8926C16.2109 14.8535 16.25 14.7852 16.25 14.6875Z" fill="#3F59F6"/>
+</svg>

package/src/atoms/components/SparkleIcon/assets/animations/state-05.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 10C10 9.89149 9.95117 9.81011 9.85352 9.75586L8.0306 8.8444L7.10286 7.00521C7.05946 6.9184 6.98351 6.875 6.875 6.875C6.76649 6.875 6.69054 6.9184 6.64714 7.00521L5.7194 8.8444L3.89648 9.75586C3.79883 9.81011 3.75 9.89149 3.75 10C3.75 10.1085 3.79883 10.1845 3.89648 10.2279L5.7194 11.1393L6.64714 12.9785C6.69054 13.0762 6.76649 13.125 6.875 13.125C6.98351 13.125 7.05946 13.0762 7.10286 12.9785L8.0306 11.1393L9.85352 10.2279C9.95117 10.1845 10 10.1085 10 10Z" fill="#3F59F6"/>
+<path d="M10 5.3125C10 5.43186 10.0477 5.51541 10.1432 5.56315L12.2917 6.45833L13.1868 8.60677C13.2346 8.70226 13.3181 8.75 13.4375 8.75C13.5569 8.75 13.6404 8.70226 13.6882 8.60677L14.5833 6.45833L16.7318 5.56315C16.8273 5.51541 16.875 5.43186 16.875 5.3125C16.875 5.19314 16.8273 5.10959 16.7318 5.06185L14.5833 4.16667L13.6882 2.01823C13.6404 1.92274 13.5569 1.875 13.4375 1.875C13.3181 1.875 13.2346 1.92274 13.1868 2.01823L12.2917 4.16667L10.1432 5.06185C10.0477 5.10959 10 5.19314 10 5.3125Z" fill="#3F59F6"/>
+<path d="M16.875 14.6875C16.875 14.5681 16.8273 14.4846 16.7318 14.4368L14.5833 13.5417L13.6882 11.3932C13.6404 11.2977 13.5569 11.25 13.4375 11.25C13.3181 11.25 13.2346 11.2977 13.1868 11.3932L12.2917 13.5417L10.1432 14.4368C10.0477 14.4846 10 14.5681 10 14.6875C10 14.8069 10.0477 14.8904 10.1432 14.9382L12.2917 15.8333L13.1868 17.9818C13.2346 18.0773 13.3181 18.125 13.4375 18.125C13.5569 18.125 13.6404 18.0773 13.6882 17.9818L14.5833 15.8333L16.7318 14.9382C16.8273 14.8904 16.875 14.8069 16.875 14.6875Z" fill="#3F59F6"/>
+</svg>

package/src/atoms/components/SparkleIcon/assets/animations/state-06.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.0625 10C9.0625 9.92405 9.02832 9.86708 8.95996 9.8291L7.68392 9.19108L7.03451 7.90365C7.00412 7.84288 6.95095 7.8125 6.875 7.8125C6.79905 7.8125 6.74588 7.84288 6.71549 7.90365L6.06608 9.19108L4.79004 9.8291C4.72168 9.86708 4.6875 9.92405 4.6875 10C4.6875 10.076 4.72168 10.1291 4.79004 10.1595L6.06608 10.7975L6.71549 12.085C6.74588 12.1533 6.79905 12.1875 6.875 12.1875C6.95095 12.1875 7.00412 12.1533 7.03451 12.085L7.68392 10.7975L8.95996 10.1595C9.02832 10.1291 9.0625 10.076 9.0625 10Z" fill="#3F59F6"/>
+<path d="M9.0625 5.3125C9.0625 5.46441 9.12326 5.57075 9.24479 5.63151L11.9792 6.77083L13.1185 9.50521C13.1793 9.62674 13.2856 9.6875 13.4375 9.6875C13.5894 9.6875 13.6957 9.62674 13.7565 9.50521L14.8958 6.77083L17.6302 5.63151C17.7517 5.57075 17.8125 5.46441 17.8125 5.3125C17.8125 5.16059 17.7517 5.05425 17.6302 4.99349L14.8958 3.85417L13.7565 1.11979C13.6957 0.998264 13.5894 0.9375 13.4375 0.9375C13.2856 0.9375 13.1793 0.998264 13.1185 1.11979L11.9792 3.85417L9.24479 4.99349C9.12326 5.05425 9.0625 5.16059 9.0625 5.3125Z" fill="#3F59F6"/>
+<path d="M17.8125 14.6875C17.8125 14.5356 17.7517 14.4293 17.6302 14.3685L14.8958 13.2292L13.7565 10.4948C13.6957 10.3733 13.5894 10.3125 13.4375 10.3125C13.2856 10.3125 13.1793 10.3733 13.1185 10.4948L11.9792 13.2292L9.24479 14.3685C9.12326 14.4293 9.0625 14.5356 9.0625 14.6875C9.0625 14.8394 9.12326 14.9457 9.24479 15.0065L11.9792 16.1458L13.1185 18.8802C13.1793 19.0017 13.2856 19.0625 13.4375 19.0625C13.5894 19.0625 13.6957 19.0017 13.7565 18.8802L14.8958 16.1458L17.6302 15.0065C17.7517 14.9457 17.8125 14.8394 17.8125 14.6875Z" fill="#3F59F6"/>
+</svg>

package/src/atoms/components/SparkleIcon/assets/animations/state-07.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 10C10 9.89149 9.95117 9.81011 9.85352 9.75586L8.0306 8.8444L7.10286 7.00521C7.05946 6.9184 6.98351 6.875 6.875 6.875C6.76649 6.875 6.69054 6.9184 6.64714 7.00521L5.7194 8.8444L3.89648 9.75586C3.79883 9.81011 3.75 9.89149 3.75 10C3.75 10.1085 3.79883 10.1845 3.89648 10.2279L5.7194 11.1393L6.64714 12.9785C6.69054 13.0762 6.76649 13.125 6.875 13.125C6.98351 13.125 7.05946 13.0762 7.10286 12.9785L8.0306 11.1393L9.85352 10.2279C9.95117 10.1845 10 10.1085 10 10Z" fill="#3F59F6"/>
+<path d="M10 5.3125C10 5.43186 10.0477 5.51541 10.1432 5.56315L12.2917 6.45833L13.1868 8.60677C13.2346 8.70226 13.3181 8.75 13.4375 8.75C13.5569 8.75 13.6404 8.70226 13.6882 8.60677L14.5833 6.45833L16.7318 5.56315C16.8273 5.51541 16.875 5.43186 16.875 5.3125C16.875 5.19314 16.8273 5.10959 16.7318 5.06185L14.5833 4.16667L13.6882 2.01823C13.6404 1.92274 13.5569 1.875 13.4375 1.875C13.3181 1.875 13.2346 1.92274 13.1868 2.01823L12.2917 4.16667L10.1432 5.06185C10.0477 5.10959 10 5.19314 10 5.3125Z" fill="#3F59F6"/>
+<path d="M16.875 14.6875C16.875 14.5681 16.8273 14.4846 16.7318 14.4368L14.5833 13.5417L13.6882 11.3932C13.6404 11.2977 13.5569 11.25 13.4375 11.25C13.3181 11.25 13.2346 11.2977 13.1868 11.3932L12.2917 13.5417L10.1432 14.4368C10.0477 14.4846 10 14.5681 10 14.6875C10 14.8069 10.0477 14.8904 10.1432 14.9382L12.2917 15.8333L13.1868 17.9818C13.2346 18.0773 13.3181 18.125 13.4375 18.125C13.5569 18.125 13.6404 18.0773 13.6882 17.9818L14.5833 15.8333L16.7318 14.9382C16.8273 14.8904 16.875 14.8069 16.875 14.6875Z" fill="#3F59F6"/>
+</svg>

package/src/atoms/components/SparkleIcon/assets/animations/state-08.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5625 10C11.5625 9.83724 11.4893 9.71517 11.3428 9.63379L8.6084 8.2666L7.2168 5.50781C7.15169 5.3776 7.03776 5.3125 6.875 5.3125C6.71224 5.3125 6.59831 5.3776 6.5332 5.50781L5.1416 8.2666L2.40723 9.63379C2.26074 9.71517 2.1875 9.83724 2.1875 10C2.1875 10.1628 2.26074 10.2767 2.40723 10.3418L5.1416 11.709L6.5332 14.4678C6.59831 14.6143 6.71224 14.6875 6.875 14.6875C7.03776 14.6875 7.15169 14.6143 7.2168 14.4678L8.6084 11.709L11.3428 10.3418C11.4893 10.2767 11.5625 10.1628 11.5625 10Z" fill="#3F59F6"/>
+<path d="M10.625 5.3125C10.625 5.41016 10.6641 5.47852 10.7422 5.51758L12.5 6.25L13.2324 8.00781C13.2715 8.08594 13.3398 8.125 13.4375 8.125C13.5352 8.125 13.6035 8.08594 13.6426 8.00781L14.375 6.25L16.1328 5.51758C16.2109 5.47852 16.25 5.41016 16.25 5.3125C16.25 5.21484 16.2109 5.14648 16.1328 5.10742L14.375 4.375L13.6426 2.61719C13.6035 2.53906 13.5352 2.5 13.4375 2.5C13.3398 2.5 13.2715 2.53906 13.2324 2.61719L12.5 4.375L10.7422 5.10742C10.6641 5.14648 10.625 5.21484 10.625 5.3125Z" fill="#3F59F6"/>
+<path d="M16.25 14.6875C16.25 14.5898 16.2109 14.5215 16.1328 14.4824L14.375 13.75L13.6426 11.9922C13.6035 11.9141 13.5352 11.875 13.4375 11.875C13.3398 11.875 13.2715 11.9141 13.2324 11.9922L12.5 13.75L10.7422 14.4824C10.6641 14.5215 10.625 14.5898 10.625 14.6875C10.625 14.7852 10.6641 14.8535 10.7422 14.8926L12.5 15.625L13.2324 17.3828C13.2715 17.4609 13.3398 17.5 13.4375 17.5C13.5352 17.5 13.6035 17.4609 13.6426 17.3828L14.375 15.625L16.1328 14.8926C16.2109 14.8535 16.25 14.7852 16.25 14.6875Z" fill="#3F59F6"/>
+</svg>

package/src/atoms/components/SparkleIcon/assets/sparkle.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="M9.59375 4.41406C9.53125 4.38281 9.5 4.32812 9.5 4.25C9.5 4.17188 9.53125 4.11719 9.59375 4.08594L11 3.5L11.5859 2.09375C11.6172 2.03125 11.6719 2 11.75 2C11.8281 2 11.8828 2.03125 11.9141 2.09375L12.5 3.5L13.9062 4.08594C13.9688 4.11719 14 4.17188 14 4.25C14 4.32812 13.9688 4.38281 13.9062 4.41406L12.5 5L11.9141 6.40625C11.8828 6.46875 11.8281 6.5 11.75 6.5C11.6719 6.5 11.6172 6.46875 11.5859 6.40625L11 5L9.59375 4.41406ZM13.9062 11.5859C13.9688 11.6172 14 11.6719 14 11.75C14 11.8281 13.9688 11.8828 13.9062 11.9141L12.5 12.5L11.9141 13.9062C11.8828 13.9688 11.8281 14 11.75 14C11.6719 14 11.6172 13.9688 11.5859 13.9062L11 12.5L9.59375 11.9141C9.53125 11.8828 9.5 11.8281 9.5 11.75C9.5 11.6719 9.53125 11.6172 9.59375 11.5859L11 11L11.5859 9.59375C11.6172 9.53125 11.6719 9.5 11.75 9.5C11.8281 9.5 11.8828 9.53125 11.9141 9.59375L12.5 11L13.9062 11.5859ZM10.7891 7.64844C10.9297 7.72656 11 7.84375 11 8C11 8.15625 10.9297 8.26562 10.7891 8.32812L8.16406 9.64062L6.82812 12.2891C6.76562 12.4297 6.65625 12.5 6.5 12.5C6.34375 12.5 6.23438 12.4297 6.17188 12.2891L4.83594 9.64062L2.21094 8.32812C2.07031 8.26562 2 8.15625 2 8C2 7.84375 2.07031 7.72656 2.21094 7.64844L4.83594 6.33594L6.17188 3.6875C6.23438 3.5625 6.34375 3.5 6.5 3.5C6.65625 3.5 6.76562 3.5625 6.82812 3.6875L8.16406 6.33594L10.7891 7.64844Z" fill="#3F59F6"/>
+</svg>

package/src/atoms/components/SparkleIcon/index.ts

@@ -0,0 +1,3 @@
+import SparkleIcon from './SparkleIcon.vue';
+
+export { SparkleIcon };

package/tailwind.config.js

@@ -1,9 +1,9 @@
-const bcTheme = require('./src/themes/bc');
-const bpTheme = require('./src/themes/bp');
-const dcTheme = require('./src/themes/dc');
-const cdTheme = require('./src/themes/cd');
-const dcomTheme = require('./src/themes/dcom');
-const viewports = require('./src/viewports');
+const bcTheme = require("./src/themes/bc");
+const bpTheme = require("./src/themes/bp");
+const dcTheme = require("./src/themes/dc");
+const cdTheme = require("./src/themes/cd");
+const dcomTheme = require("./src/themes/dcom");
+const viewports = require("./src/viewports");
 
 const designSystemConfig = {
   themes: {
@@ -20,7 +20,7 @@ const theme = designSystemConfig.themes[process.env.tailwindTheme]; // use the e
 module.exports = {
   prefix: 'tw-',
   content: ['./src/**/components/**/*.vue'],
-  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }, { pattern: /^tw-line-clamp-/ }],
+  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }],
   theme: {
     ...theme,
     extend: {
@@ -34,3 +34,4 @@ module.exports = {
     preflight: true,
   },
 };
+