@designcrowd/fe-shared-lib 1.4.7 → 1.4.8-promocardv0

package/src/atoms/components/PromoCard/PromoCard.stories.ts

@@ -0,0 +1,265 @@
+import PromoCard from './PromoCard.vue';
+
+export default {
+  title: 'Components/PromoCard',
+  component: PromoCard,
+};
+
+export const Standard = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Special Offer',
+    description: 'Get 20% off your next purchase. Limited time offer!',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Promotional image',
+    buttonLabel: 'Learn More',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const HorizontalLayout = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Premium Package',
+    description: 'Upgrade to premium and unlock exclusive features today.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Premium package image',
+    buttonLabel: 'Upgrade Now',
+    horizontalLayout: true,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const ImageOnTop = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Mobile Friendly',
+    description: 'This layout works great on mobile devices with the image displayed on top.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Mobile friendly layout',
+    buttonLabel: 'Try It',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: true,
+  },
+};
+
+export const ScaledDownImage = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Logo Showcase',
+    description: 'Display your logo with proper spacing and scaling.',
+    imageUrl: 'https://via.placeholder.com/120x120',
+    altText: 'Logo showcase',
+    buttonLabel: 'View More',
+    horizontalLayout: false,
+    scaleImageDown: true,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const FullWidthImage = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Full Width Banner',
+    description: 'Images that stretch to fill the available space.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Full width banner',
+    buttonLabel: 'Explore',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: true,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const AllOptions = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <div class="tw-space-y-4">
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Standard Layout</h3>
+            <PromoCard
+              title="Standard Promo"
+              description="This is the default vertical layout with image on the left."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Standard layout"
+              buttonLabel="Click Me"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+          
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Horizontal Layout</h3>
+            <PromoCard
+              title="Horizontal Promo"
+              description="This layout is better for desktop with content side by side."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Horizontal layout"
+              buttonLabel="Click Me"
+              :horizontal-layout="true"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+          
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Image On Top</h3>
+            <PromoCard
+              title="Mobile Optimized"
+              description="Perfect for mobile views with image stacked on top."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Image on top"
+              buttonLabel="Click Me"
+              :should-show-image-on-top="true"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+        </div>
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {},
+};
+
+Standard.story = {
+  name: 'PromoCard - Standard',
+};
+
+HorizontalLayout.story = {
+  name: 'PromoCard - Horizontal Layout',
+};
+
+ImageOnTop.story = {
+  name: 'PromoCard - Image On Top',
+};
+
+ScaledDownImage.story = {
+  name: 'PromoCard - Scaled Down Image',
+};
+
+FullWidthImage.story = {
+  name: 'PromoCard - Full Width Image',
+};
+
+AllOptions.story = {
+  name: 'PromoCard - All Variants',
+};

package/src/atoms/components/PromoCard/PromoCard.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="tw-flex" :class="shouldShowImageOnTop ? 'tw-flex-col' : 'tw-flex-row'">
+    <div
+      class="tw-flex tw-justify-center tw-items-center tw-bg-grayscale-400 tw-w-60 tw-p-1 dcom-rounded-tl dcom-rounded-bl"
+      :class="{
+        'tw-w-full tw-px-8 md:tw-px-12 lg:tw-px-20 tw-py-4': shouldShowImageOnTop,
+        'tw-px-4': !shouldShowImageOnTop,
+      }"
+    >
+      <img :src="imageUrl" :alt="altText" />
+    </div>
+    <div
+      class="tw-flex tw-bg-white tw-w-full tw-p-4 tw-grow dcom-rounded-tr dcom-rounded-br tw-flex-col tw-justify-between"
+      :class="{
+        'lg:tw-flex-row lg:tw-items-center lg:tw-justify-normal': horizontalLayout,
+      }"
+    >
+      <div class="tw-text-left tw-overflow-hidden tw-text-ellipsis" :class="lineClampStyle">
+        <div class="tw-font-bold tw-text-black tw-mb-0.5">
+          {{ title }}
+        </div>
+        <p>
+          {{ description }}
+        </p>
+      </div>
+      <Button
+        variant="primary"
+        size="small"
+        :full-width="!horizontalLayout"
+        class="tw-text-left tw-mt-4"
+        :class="horizontalLayout ? 'tw-w-full tw-mr-2 md:tw-mt-0 md:tw-w-auto' : ''"
+        :label="buttonLabel"
+        @on-click="buttonClicked"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../Button/Button.vue';
+
+export default {
+  components: { Button },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    imageUrl: { type: String, required: true },
+    altText: { type: String, default: '' },
+    buttonLabel: {
+      type: String,
+      required: true,
+    },
+    horizontalLayout: {
+      type: Boolean,
+      default: false,
+    },
+    shouldShowImageOnTop: {
+      type: Boolean,
+      default: false,
+    },
+    textLineClamp: {
+      type: Number,
+      default: 0, // 0 is infinite
+    },
+  },
+  computed: {
+    shouldUseHorizontalLayout() {
+      // when in desktop view, display horizontal mode
+      return this.horizontalLayout;
+    },
+    lineClampStyle() {
+      if (this.textLineClamp > 0) {
+        return `tw-line-clamp-${this.textLineClamp}`;
+      }
+      return 'tw-line-clamp-none';
+    },
+  },
+  methods: {
+    buttonClicked() {
+      this.$emit('button-clicked');
+    },
+  },
+};
+</script>

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$/ }],
+  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }, { pattern: /^tw-line-clamp-/ }],
   theme: {
     ...theme,
     extend: {
@@ -34,4 +34,3 @@ module.exports = {
     preflight: true,
   },
 };
-

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

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

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

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

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

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