@designcrowd/fe-shared-lib 1.0.0-test-publish

package/src/atoms/components/Tooltip/Tooltip.vue

@@ -0,0 +1,196 @@
+<template>
+  <div
+    :class="{
+      ['tw-inline-flex tw-relative']: true,
+      ['tw-justify-center']: alignment === 'center' && (tooltipDirection === 'top' || tooltipDirection === 'bottom'),
+      ['tw-justify-end']: alignment === 'right' && (tooltipDirection === 'top' || tooltipDirection === 'bottom'),
+      ['tw-items-center']: alignment === 'middle' && (tooltipDirection === 'right' || tooltipDirection === 'left'),
+      ['tw-items-end']: alignment === 'top' && (tooltipDirection === 'right' || tooltipDirection === 'left'),
+    }"
+  >
+    <span
+      class="shared-tooltip__open"
+      :class="{ 'tw-w-full': fullWidth }"
+      @mouseover="getTooltipDirection"
+      @mouseleave="tooltipDirection = direction"
+    >
+      <slot name="open"></slot>
+    </span>
+    <div
+      :class="{
+        ['shared-tooltip__content tw-absolute tw-hidden']: true,
+        ['tw-m-3']: !shouldShowIcon,
+        ['tw-bottom-full tw-flex-col-reverse']: tooltipDirection === 'top',
+        ['tw-left-full tw-flex-row']: tooltipDirection === 'right',
+        ['tw-top-full tw-flex-col']: tooltipDirection === 'bottom',
+        ['tw-right-full tw-flex-row-reverse']: tooltipDirection === 'left',
+      }"
+    >
+      <Icon
+        v-if="shouldShowIcon && tooltipDirection === 'top'"
+        :class="{
+          ['tw-flex tw-z-20 tw--mt-px']: true,
+          ['tw-justify-end']: alignment === 'right',
+          ['tw-justify-center']: alignment === 'center',
+        }"
+        name="tooltip-bottom"
+        :color="color"
+      />
+      <Icon
+        v-if="shouldShowIcon && tooltipDirection === 'right'"
+        :class="{
+          ['tw-flex tw-z-20 tw--mr-1.5']: true,
+          ['tw-items-end']: alignment === 'top',
+          ['tw-items-center']: alignment === 'middle',
+        }"
+        name="tooltip-left"
+        :color="color"
+      />
+      <Icon
+        v-if="shouldShowIcon && tooltipDirection === 'bottom'"
+        :class="{
+          ['tw-flex tw-z-20 tw--mb-1.5']: true,
+          ['tw-justify-end']: alignment === 'right',
+          ['tw-justify-center']: alignment === 'center',
+        }"
+        name="tooltip-top"
+        :color="color"
+      />
+      <Icon
+        v-if="shouldShowIcon && tooltipDirection === 'left'"
+        :class="{
+          ['tw-flex tw-z-20 tw--ml-px']: true,
+          ['tw-items-end']: alignment === 'top',
+          ['tw-items-center']: alignment === 'middle',
+        }"
+        name="tooltip-right"
+        :color="color"
+      />
+      <div
+        :ref="tooltipBodyRef"
+        :class="{
+          [`tw-border-${color} tw-bg-white tw-border tw-border-solid tw-shadow tw-p-3 tw-z-10 tw-text-left`]: true,
+          [`tw-w-60`]: !fullWidth,
+          [`tw-w-full`]: fullWidth,
+          [`shared-tooltip__body`]: !hasExtendedWidth,
+          [`shared-tooltip__extended-body`]: hasExtendedWidth,
+          ['tw-bottom-full']: tooltipDirection === 'top',
+          ['tw-left-full tw--ml-px']: tooltipDirection === 'right',
+          ['tw-top-full tw--mt-px']: tooltipDirection === 'bottom',
+          ['tw-right-full']: tooltipDirection === 'left',
+          ['tw-rounded']: isRoundedCorner,
+        }"
+      >
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    color: {
+      type: String,
+      required: false,
+      default: 'info-500',
+    },
+    direction: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    alignment: {
+      type: String,
+      required: false,
+      default: 'left',
+    },
+    hasExtendedWidth: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
+    isRoundedCorner: {
+      type: Boolean,
+      default: false,
+    },
+    shouldShowIcon: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      tooltipDirection: null,
+      tooltipBodyRef: 'js-tooltip-body',
+    };
+  },
+  mounted() {
+    this.tooltipDirection = this.direction;
+  },
+  methods: {
+    getTooltipDirection() {
+      const tooltipBodyBoundingRect = this.$refs[this.tooltipBodyRef].getBoundingClientRect();
+
+      if (this.direction === 'top') {
+        if (tooltipBodyBoundingRect.top < 0) {
+          this.tooltipDirection = 'bottom';
+        } else {
+          this.tooltipDirection = 'top';
+        }
+      }
+
+      if (this.direction === 'right') {
+        if (tooltipBodyBoundingRect.right > window.innerWidth) {
+          this.tooltipDirection = 'left';
+        } else {
+          this.tooltipDirection = 'right';
+        }
+      }
+
+      if (this.direction === 'bottom') {
+        if (tooltipBodyBoundingRect.bottom > window.innerHeight) {
+          this.tooltipDirection = 'top';
+        } else {
+          this.tooltipDirection = 'bottom';
+        }
+      }
+
+      if (this.direction === 'left') {
+        if (tooltipBodyBoundingRect.left < 0) {
+          this.tooltipDirection = 'right';
+        } else {
+          this.tooltipDirection = 'left';
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.shared-tooltip__body {
+  max-width: 15rem;
+}
+.shared-tooltip__extended-body {
+  max-width: 27rem;
+  width: 27rem;
+}
+
+.shared-tooltip__open:hover {
+  cursor: help;
+}
+
+.shared-tooltip__open:hover + .shared-tooltip__content {
+  display: flex;
+}
+</style>

package/src/atoms/components/design-com/Icon/Icon.stories.js

@@ -0,0 +1,82 @@
+import Icon from './Icon.vue';
+
+export default {
+  title: 'Components/DesignCom/Icons',
+  component: Icon,
+};
+
+export const IconSample = () => {
+  return {
+    components: {
+      Icon,
+    },
+    data() {
+      return {
+        sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
+        icons: [
+          { name: 'annotate-heart' },
+          { name: 'award' },
+          { name: 'bulb' },
+          { name: 'bezier-curve' },
+          { name: 'card' },
+          { name: 'check-circle-light' },
+          { name: 'chevron-down' },
+          { name: 'chevron-left' },
+          { name: 'chevron-right' },
+          { name: 'chevron-up' },
+          { name: 'diamond' },
+          { name: 'download' },
+          { name: 'file' },
+          { name: 'file-empty' },
+          { name: 'filter' },
+          { name: 'font' },
+          { name: 'headphones' },
+          { name: 'heart' },
+          { name: 'image' },
+          { name: 'logo' },
+          { name: 'minus-circle-light' },
+          { name: 'pen' },
+          { name: 'palette' },
+          { name: 'plus-circle-light' },
+          { name: 'question-circle-filled' },
+          { name: 'search' },
+          { name: 'star-filled' },
+          { name: 'star-hollow' },
+          { name: 'text' },
+          { name: 'users' },
+        ],
+      };
+    },
+    template: `
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-center tw-p-4 tw-bg-grayscale-400 tw-font-sans">Icon ({{icons.length}})</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tr v-for="(icon, i) in icons" :key="i" :class="{'tw-bg-grayscale-200': i % 2 !== 0}">
+          <td class="tw-p-4">
+            <div class="tw-grid tw-grid-cols-8 tw-gap-4 tw-items-center" style="grid-template-columns: repeat(8, minmax(0, 1fr));">
+              <Icon
+                v-for="size in sizes"
+                :name="icon.name"
+                :alt-text="icon.altText"
+                :size="size"
+              />
+            </div>
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Icon :name="{{ icon.name }}" :alt-text="{{ icon.altText }}" size="{{ sizes.join('|') }}" /&gt;
+            </code>
+          </td>
+        </tr>
+      </table>
+    `,
+  };
+};
+
+IconSample.story = {
+  name: 'Dcom Icon Library',
+};

package/src/atoms/components/design-com/Icon/Icon.vue

@@ -0,0 +1,150 @@
+<template>
+  <div :class="computedClass">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :viewBox="viewBox"
+      class="tw-fill-current"
+      :class="{
+        'tw-w-3 tw-h-3': size === 'xs',
+        'tw-w-4 tw-h-4': size === 'sm',
+        'tw-w-6 tw-h-6': size === 'md',
+        'tw-w-8 tw-h-8': size === 'lg',
+        'tw-w-10 tw-h-10': size === 'xl',
+        'tw-w-12 tw-h-12': size === '2xl',
+        'tw-w-14 tw-h-14': size === '3xl',
+        'tw-w-16 tw-h-16': size === '4xl',
+      }"
+      role="graphics-symbol"
+      aria-labelledby="title"
+      aria-describedby="desc"
+    >
+      <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
+      <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
+      <component :is="`icon-${name}`"></component>
+    </svg>
+  </div>
+</template>
+<script>
+import IconAnnotateHeart from './icons/annotate-heart.vue';
+import IconAward from './icons/award.vue';
+import IconBezierCurve from './icons/bezier-curve.vue';
+import IconBulb from './icons/bulb.vue';
+import IconCard from './icons/card.vue';
+import IconCheckCircleLight from './icons/check-circle-light.vue';
+import IconChevronDown from './icons/chevron-down.vue';
+import IconChevronLeft from './icons/chevron-left.vue';
+import IconChevronRight from './icons/chevron-right.vue';
+import IconChevronUp from './icons/chevron-up.vue';
+import IconDiamond from './icons/diamond.vue';
+import IconDownload from './icons/download.vue';
+import IconFile from './icons/file.vue';
+import IconFileEmpty from './icons/file-empty.vue';
+import IconFilter from './icons/filter.vue';
+import IconFont from './icons/font.vue';
+import IconHeadphones from './icons/headphones.vue';
+import IconHeart from './icons/heart.vue';
+import IconImage from './icons/image.vue';
+import IconLogo from './icons/logo.vue';
+import IconMinusCircleLight from './icons/minus-circle-light.vue';
+import IconPalette from './icons/palette.vue';
+import IconPen from './icons/pen.vue';
+import IconPlusCircleLight from './icons/plus-circle-light.vue';
+import IconQuestionCircleFilled from './icons/question-circle-filled.vue';
+import IconSearch from './icons/search.vue';
+import IconStarFilled from './icons/star-filled.vue';
+import IconStarHollow from './icons/star-hollow.vue';
+import IconText from './icons/text.vue';
+import IconUsers from './icons/users.vue';
+
+export default {
+  components: {
+    IconAnnotateHeart,
+    IconAward,
+    IconBezierCurve,
+    IconBulb,
+    IconCard,
+    IconCheckCircleLight,
+    IconChevronDown,
+    IconChevronLeft,
+    IconChevronRight,
+    IconChevronUp,
+    IconDiamond,
+    IconDownload,
+    IconFile,
+    IconFileEmpty,
+    IconFilter,
+    IconFont,
+    IconHeadphones,
+    IconHeart,
+    IconImage,
+    IconLogo,
+    IconMinusCircleLight,
+    IconPalette,
+    IconPen,
+    IconPlusCircleLight,
+    IconQuestionCircleFilled,
+    IconSearch,
+    IconStarFilled,
+    IconStarHollow,
+    IconText,
+    IconUsers,
+  },
+  props: {
+    viewBox: {
+      type: String,
+      required: false,
+      default: '0 0 16 16',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    altText: {
+      type: String,
+      default: null,
+    },
+    color: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'sm',
+    },
+    classes: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      id: null,
+    };
+  },
+  computed: {
+    computedClass() {
+      const colorCss = this.color ? `tw-text-${this.color}` : '';
+      const css = `${colorCss} ${this.classes}`.trim();
+      return css || null;
+    },
+    title() {
+      return this.altText || `${this.titleCase(this.name)}`;
+    },
+    description() {
+      return `${this.title} Icon`;
+    },
+  },
+  mounted() {
+    // eslint-disable-next-line no-underscore-dangle
+    this.id = this.$.uid;
+  },
+  methods: {
+    titleCase(word) {
+      return word.replace(/^[-]*(.)/, (_, c) => c.toUpperCase()).replace(/[-]+(.)/g, (_, c) => ` ${c.toUpperCase()}`);
+    },
+  },
+};
+</script>

package/src/atoms/components/design-com/Icon/icons/annotate-heart.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.16957 1.25H10.8304C11.3646 1.24999 11.8104 1.24998 12.1747 1.27974C12.5546 1.31078 12.9112 1.37789 13.2485 1.54973C13.7659 1.81338 14.1866 2.23408 14.4503 2.75153C14.6221 3.08879 14.6892 3.44545 14.7203 3.82533C14.75 4.18956 14.75 4.6354 14.75 5.16955V9.02526C14.75 9.46972 14.75 9.84075 14.7292 10.1454C14.7076 10.4625 14.661 10.762 14.5407 11.0524C14.2616 11.7262 13.7262 12.2616 13.0524 12.5407C12.762 12.661 12.4625 12.7076 12.1454 12.7292C11.8408 12.75 11.4697 12.75 11.0253 12.75H11C10.6383 12.75 10.5788 12.7547 10.5326 12.7656C10.4445 12.7864 10.3624 12.8275 10.2929 12.8855C10.2565 12.9158 10.217 12.9606 10 13.25L9.02667 14.5478C9.02274 14.553 9.01877 14.5583 9.01475 14.5637C8.95318 14.6458 8.88068 14.7426 8.81036 14.8208C8.73227 14.9076 8.59768 15.041 8.39268 15.1208C8.14011 15.219 7.85989 15.219 7.60732 15.1208C7.40232 15.041 7.26774 14.9076 7.18964 14.8208C7.11932 14.7426 7.04681 14.6458 6.98524 14.5637C6.98123 14.5583 6.97726 14.553 6.97333 14.5478L6 13.25C5.78298 12.9606 5.74349 12.9158 5.7071 12.8855C5.63758 12.8275 5.55549 12.7864 5.46736 12.7656C5.42123 12.7547 5.36171 12.75 5 12.75H4.97474C4.53028 12.75 4.15925 12.75 3.85464 12.7292C3.53754 12.7076 3.23801 12.661 2.94762 12.5407C2.27379 12.2616 1.73844 11.7262 1.45933 11.0524C1.33905 10.762 1.29241 10.4625 1.27077 10.1454C1.24999 9.84075 1.24999 9.46971 1.25 9.02525L1.25 5.16957C1.24999 4.63541 1.24998 4.18956 1.27974 3.82533C1.31078 3.44545 1.37789 3.08879 1.54973 2.75153C1.81338 2.23408 2.23408 1.81338 2.75153 1.54973C3.08879 1.37789 3.44545 1.31078 3.82533 1.27974C4.18956 1.24998 4.63541 1.24999 5.16957 1.25ZM3.94748 2.77476C3.66036 2.79822 3.52307 2.8401 3.43251 2.88624C3.19731 3.00608 3.00608 3.19731 2.88624 3.43251C2.8401 3.52307 2.79822 3.66036 2.77476 3.94748C2.75058 4.24336 2.75 4.62757 2.75 5.2V9C2.75 9.4762 2.75041 9.7958 2.76729 10.0433C2.78372 10.284 2.81319 10.4012 2.84515 10.4784C2.97202 10.7846 3.21536 11.028 3.52165 11.1549C3.5988 11.1868 3.71602 11.2163 3.95674 11.2327C4.20421 11.2496 4.5238 11.25 5 11.25C5.01965 11.25 5.0392 11.25 5.05864 11.25C5.3258 11.2497 5.5733 11.2494 5.81199 11.3057C6.12676 11.38 6.41991 11.5266 6.66823 11.7339C6.85651 11.891 7.00479 12.0892 7.16484 12.3031C7.17649 12.3186 7.18821 12.3343 7.2 12.35L8 13.4167L8.8 12.35C8.8118 12.3343 8.82351 12.3186 8.83516 12.3031C8.99521 12.0892 9.14349 11.891 9.33178 11.7339C9.58009 11.5266 9.87324 11.38 10.188 11.3057C10.4267 11.2494 10.6742 11.2497 10.9414 11.25C10.9608 11.25 10.9803 11.25 11 11.25C11.4762 11.25 11.7958 11.2496 12.0433 11.2327C12.284 11.2163 12.4012 11.1868 12.4784 11.1549C12.7846 11.028 13.028 10.7846 13.1549 10.4784C13.1868 10.4012 13.2163 10.284 13.2327 10.0433C13.2496 9.7958 13.25 9.4762 13.25 9V5.2C13.25 4.62757 13.2494 4.24336 13.2252 3.94748C13.2018 3.66036 13.1599 3.52307 13.1138 3.43251C12.9939 3.19731 12.8027 3.00608 12.5675 2.88624C12.4769 2.8401 12.3396 2.79822 12.0525 2.77476C11.7566 2.75058 11.3724 2.75 10.8 2.75H5.2C4.62757 2.75 4.24336 2.75058 3.94748 2.77476ZM7.99774 4.58662C7.23826 4.12628 6.23643 4.09174 5.42868 4.76272C4.45281 5.57336 4.29957 6.96478 5.08461 7.9469C5.44551 8.39841 6.2652 9.14436 6.81734 9.6334C6.83324 9.64748 6.84974 9.66226 6.86684 9.67759C7.04369 9.83609 7.28513 10.0525 7.59315 10.1444C7.85382 10.2221 8.14253 10.2221 8.4032 10.1444C8.71122 10.0525 8.95266 9.83608 9.12951 9.67759C9.14662 9.66226 9.16311 9.64748 9.17901 9.6334C9.73115 9.14436 10.5508 8.39841 10.9117 7.9469C11.6899 6.97339 11.5653 5.56882 10.5598 4.75628C9.74858 4.10076 8.75572 4.12686 7.99774 4.58662ZM7.43509 6.04914C7.1249 5.69658 6.69286 5.66261 6.38716 5.91655C6.027 6.21572 5.99215 6.67988 6.2563 7.01034C6.5193 7.33937 7.22772 7.9931 7.8119 8.51052C7.87182 8.5636 7.91829 8.60473 7.959 8.63965C7.97375 8.6523 7.98672 8.66324 7.99818 8.67274C8.00963 8.66324 8.0226 8.6523 8.03735 8.63965C8.07806 8.60472 8.12453 8.5636 8.18445 8.51052C8.76863 7.9931 9.47705 7.33937 9.74005 7.01034C10.0111 6.67127 9.9705 6.2086 9.61705 5.92298C9.29205 5.66037 8.86591 5.70287 8.56126 6.04914C8.41888 6.21098 8.21374 6.30373 7.99818 6.30373C7.78261 6.30373 7.57747 6.21098 7.43509 6.04914Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/award.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.66667 1.75C5.50355 1.75 3.75 3.50355 3.75 5.66667C3.75 6.98564 4.40197 8.15233 5.40123 8.86206C5.4071 8.86608 5.41292 8.87019 5.41867 8.87438C6.05494 9.32111 6.83018 9.58333 7.66667 9.58333C8.50339 9.58333 9.27883 9.32096 9.9152 8.874C9.92096 8.86981 9.92678 8.8657 9.93266 8.86167C10.9316 8.1519 11.5833 6.9854 11.5833 5.66667C11.5833 3.50355 9.82978 1.75 7.66667 1.75ZM11.1564 9.80955C12.3348 8.81593 13.0833 7.32872 13.0833 5.66667C13.0833 2.67512 10.6582 0.25 7.66667 0.25C4.67512 0.25 2.25 2.67512 2.25 5.66667C2.25 7.32899 2.99882 8.81642 4.17754 9.81004L3.58986 14.2346C3.55194 14.5201 3.68085 14.8021 3.92156 14.9602C4.16226 15.1183 4.47225 15.1246 4.71921 14.9765L7.66667 13.208L10.6141 14.9765C10.8611 15.1246 11.171 15.1183 11.4117 14.9602C11.6524 14.8021 11.7814 14.5202 11.7435 14.2347L11.1564 9.80955ZM9.75678 10.6654C9.11363 10.9346 8.40752 11.0833 7.66667 11.0833C6.92601 11.0833 6.22008 10.9347 5.57708 10.6656L5.28167 12.8897L7.0064 11.8549C7.01148 11.8518 7.01759 11.848 7.02464 11.8437C7.09325 11.8015 7.25149 11.7041 7.43431 11.6639C7.58739 11.6303 7.74594 11.6303 7.89903 11.6639C8.08184 11.7041 8.24008 11.8015 8.30869 11.8437C8.31574 11.848 8.32185 11.8518 8.32694 11.8549L7.94106 12.498L8.32694 11.8549L10.0519 12.8898L9.75678 10.6654Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/bezier-curve.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.71036 2.58338H8.28949C8.45624 2.58335 8.62325 2.58333 8.76553 2.59495C8.92308 2.60782 9.11509 2.6386 9.30974 2.73779C9.57631 2.87361 9.79303 3.09033 9.92885 3.35689C10.028 3.55155 10.0588 3.74356 10.0717 3.90111C10.0721 3.90628 10.0725 3.91148 10.0729 3.91671L12.7978 3.91671C13.0482 3.51635 13.4929 3.25005 13.9999 3.25005C14.7823 3.25005 15.4166 3.88431 15.4166 4.66671C15.4166 5.44912 14.7823 6.08338 13.9999 6.08338C13.4929 6.08338 13.0482 5.81707 12.7978 5.41671H11.9999C13.1011 6.37837 13.8526 7.73036 14.0384 9.25743C14.059 9.25862 14.0792 9.26001 14.0989 9.26162C14.2564 9.27449 14.4484 9.30527 14.6431 9.40445C14.9096 9.54027 15.1264 9.757 15.2622 10.0236C15.3614 10.2182 15.3921 10.4102 15.405 10.5678C15.4166 10.7101 15.4166 10.8771 15.4166 11.0438V11.6229C15.4166 11.7897 15.4166 11.9567 15.405 12.099C15.3921 12.2565 15.3614 12.4485 15.2622 12.6432C15.1264 12.9098 14.9096 13.1265 14.6431 13.2623C14.4484 13.3615 14.2564 13.3923 14.0989 13.4051C13.9566 13.4168 13.7896 13.4167 13.6228 13.4167H13.0437C12.877 13.4167 12.7099 13.4168 12.5677 13.4051C12.4101 13.3923 12.2181 13.3615 12.0234 13.2623C11.7569 13.1265 11.5402 12.9098 11.4043 12.6432C11.3051 12.4485 11.2744 12.2565 11.2615 12.099C11.2499 11.9567 11.2499 11.7897 11.2499 11.623V11.0438C11.2499 10.8771 11.2499 10.71 11.2615 10.5678C11.2744 10.4102 11.3051 10.2182 11.4043 10.0236C11.5402 9.757 11.7569 9.54027 12.0234 9.40445C12.2007 9.31412 12.3758 9.28053 12.5247 9.26553C12.2824 7.76166 11.3083 6.50185 9.97893 5.8645C9.96454 5.9016 9.94796 5.93902 9.92885 5.97653C9.79303 6.24309 9.57631 6.45982 9.30974 6.59564C9.11509 6.69482 8.92308 6.7256 8.76553 6.73847C8.62325 6.7501 8.45624 6.75007 8.28948 6.75005L7.73326 6.75005C7.72563 6.75005 7.718 6.75005 7.71036 6.75005C7.54361 6.75007 7.3766 6.7501 7.23432 6.73847C7.07677 6.7256 6.88476 6.69482 6.6901 6.59564C6.42354 6.45982 6.20682 6.24309 6.071 5.97653C6.05188 5.93902 6.03531 5.9016 6.02091 5.8645C4.69153 6.50185 3.71742 7.76166 3.47514 9.26553C3.62401 9.28053 3.79911 9.31412 3.97641 9.40445C4.24297 9.54027 4.45969 9.75699 4.59552 10.0236C4.6947 10.2182 4.72548 10.4102 4.73835 10.5678C4.74997 10.7101 4.74995 10.8771 4.74993 11.0438V11.6229C4.74995 11.7897 4.74997 11.9567 4.73835 12.099C4.72548 12.2565 4.6947 12.4485 4.59552 12.6432C4.45969 12.9098 4.24297 13.1265 3.97641 13.2623C3.78175 13.3615 3.58974 13.3923 3.4322 13.4051C3.28991 13.4168 3.12289 13.4167 2.95613 13.4167H2.37705C2.21029 13.4167 2.04327 13.4168 1.90098 13.4051C1.74343 13.3923 1.55142 13.3615 1.35677 13.2623C1.09021 13.1265 0.873485 12.9098 0.737664 12.6432C0.638482 12.4485 0.607702 12.2565 0.59483 12.099C0.583205 11.9567 0.58323 11.7897 0.583254 11.6229V11.0438C0.58323 10.8771 0.583205 10.7101 0.59483 10.5678C0.607702 10.4102 0.638482 10.2182 0.737664 10.0236C0.873485 9.75699 1.09021 9.54027 1.35677 9.40445C1.55142 9.30527 1.74343 9.27449 1.90098 9.26162C1.92069 9.26001 1.94086 9.25862 1.96144 9.25743C2.14724 7.73036 2.89876 6.37837 3.99992 5.41671H3.202C2.95168 5.81707 2.5069 6.08338 1.99992 6.08338C1.21752 6.08338 0.583256 5.44912 0.583256 4.66671C0.583256 3.88431 1.21752 3.25005 1.99992 3.25005C2.5069 3.25005 2.95168 3.51635 3.202 3.91671L5.92694 3.91671C5.92733 3.91148 5.92774 3.90628 5.92816 3.90111C5.94104 3.74356 5.97182 3.55155 6.071 3.35689C6.20682 3.09033 6.42354 2.87361 6.6901 2.73779C6.88476 2.6386 7.07677 2.60782 7.23432 2.59495C7.3766 2.58333 7.5436 2.58335 7.71036 2.58338ZM7.41659 4.81878V4.40005C7.41659 4.25161 7.41692 4.15592 7.41957 4.08636C7.48913 4.0837 7.58482 4.08338 7.73326 4.08338H8.26659C8.41503 4.08338 8.51071 4.0837 8.58027 4.08636C8.58293 4.15592 8.58326 4.25161 8.58326 4.40005V4.8188C8.58301 4.82977 8.58302 4.84071 8.58326 4.85162V4.93338C8.58326 5.08182 8.58293 5.1775 8.58028 5.24706C8.51071 5.24972 8.41503 5.25005 8.26659 5.25005H7.73326C7.58482 5.25005 7.48913 5.24972 7.41957 5.24706C7.41691 5.1775 7.41659 5.08182 7.41659 4.93338V4.85164C7.41683 4.84072 7.41683 4.82976 7.41659 4.81878ZM2.08624 10.753C2.08358 10.8226 2.08326 10.9183 2.08326 11.0667V11.6C2.08326 11.7485 2.08358 11.8442 2.08624 11.9137C2.1558 11.9164 2.25148 11.9167 2.39992 11.9167H2.93326C3.0817 11.9167 3.17738 11.9164 3.24694 11.9137C3.2496 11.8442 3.24992 11.7485 3.24992 11.6V11.0667C3.24992 10.9183 3.2496 10.8226 3.24694 10.753C3.17738 10.7504 3.0817 10.75 2.93326 10.75H2.39992C2.25148 10.75 2.1558 10.7504 2.08624 10.753ZM12.7529 10.753C12.7503 10.8226 12.7499 10.9183 12.7499 11.0667V11.6C12.7499 11.7485 12.7502 11.8442 12.7529 11.9137C12.8225 11.9164 12.9182 11.9167 13.0666 11.9167H13.5999C13.7484 11.9167 13.844 11.9164 13.9136 11.9137C13.9163 11.8442 13.9166 11.7485 13.9166 11.6V11.0667C13.9166 10.9183 13.9163 10.8226 13.9136 10.753C13.844 10.7504 13.7484 10.75 13.5999 10.75H13.0666C12.9182 10.75 12.8225 10.7504 12.7529 10.753Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/bulb.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.99992 0.583374C8.41413 0.583374 8.74992 0.91916 8.74992 1.33337V2.00004C8.74992 2.41425 8.41413 2.75004 7.99992 2.75004C7.58571 2.75004 7.24992 2.41425 7.24992 2.00004V1.33337C7.24992 0.91916 7.58571 0.583374 7.99992 0.583374ZM2.73619 2.73631C3.02908 2.44342 3.50396 2.44342 3.79685 2.73631L4.19692 3.13638C4.48981 3.42927 4.48981 3.90414 4.19692 4.19704C3.90402 4.48993 3.42915 4.48993 3.13626 4.19704L2.73619 3.79697C2.4433 3.50408 2.4433 3.02921 2.73619 2.73631ZM13.2638 2.73638C13.5567 3.02931 13.5566 3.50418 13.2637 3.79704L12.8635 4.1971C12.5706 4.48996 12.0957 4.4899 11.8029 4.19697C11.51 3.90404 11.5101 3.42917 11.803 3.13631L12.2032 2.73625C12.4961 2.44339 12.971 2.44345 13.2638 2.73638ZM7.99992 4.75004C6.20499 4.75004 4.74992 6.20512 4.74992 8.00004C4.74992 9.79497 6.20499 11.25 7.99992 11.25C9.79484 11.25 11.2499 9.79497 11.2499 8.00004C11.2499 6.20512 9.79484 4.75004 7.99992 4.75004ZM3.24992 8.00004C3.24992 5.37669 5.37657 3.25004 7.99992 3.25004C10.6233 3.25004 12.7499 5.37669 12.7499 8.00004C12.7499 9.87608 11.6623 11.4981 10.0833 12.27V13.3334C10.0833 14.484 9.15051 15.4167 7.99992 15.4167C6.84933 15.4167 5.91659 14.484 5.91659 13.3334V12.27C4.33751 11.4981 3.24992 9.87608 3.24992 8.00004ZM7.41659 12.7146V13.3334C7.41659 13.6555 7.67775 13.9167 7.99992 13.9167C8.32208 13.9167 8.58325 13.6555 8.58325 13.3334V12.7146C8.39209 12.738 8.19741 12.75 7.99992 12.75C7.80243 12.75 7.60775 12.738 7.41659 12.7146ZM0.583252 8.00004C0.583252 7.58583 0.919038 7.25004 1.33325 7.25004H1.99992C2.41413 7.25004 2.74992 7.58583 2.74992 8.00004C2.74992 8.41425 2.41413 8.75004 1.99992 8.75004H1.33325C0.919038 8.75004 0.583252 8.41425 0.583252 8.00004ZM13.2499 8.00004C13.2499 7.58583 13.5857 7.25004 13.9999 7.25004H14.6666C15.0808 7.25004 15.4166 7.58583 15.4166 8.00004C15.4166 8.41425 15.0808 8.75004 14.6666 8.75004H13.9999C13.5857 8.75004 13.2499 8.41425 13.2499 8.00004Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/card.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.49964 0.579956H11.4938C12.028 0.579946 12.4738 0.579937 12.8381 0.609696C13.218 0.640734 13.5746 0.707845 13.9119 0.879689C14.4293 1.14334 14.85 1.56404 15.1137 2.08148C15.2855 2.41875 15.3526 2.7754 15.3837 3.15529C15.4134 3.51952 15.4134 3.96536 15.4134 4.49951V11.4937C15.4134 12.0279 15.4134 12.4737 15.3837 12.838C15.3526 13.2178 15.2855 13.5745 15.1137 13.9118C14.85 14.4292 14.4293 14.8499 13.9119 15.1136C13.5746 15.2854 13.218 15.3525 12.8381 15.3836C12.4739 15.4133 12.028 15.4133 11.4939 15.4133H4.49963C3.96548 15.4133 3.51964 15.4133 3.15541 15.3836C2.77552 15.3525 2.41887 15.2854 2.08161 15.1136C1.56416 14.8499 1.14346 14.4292 0.879811 13.9118C0.707967 13.5745 0.640856 13.2178 0.609818 12.838C0.580059 12.4737 0.580068 12.0279 0.580079 11.4937V4.49952C0.580068 3.96537 0.580059 3.51952 0.609818 3.15529C0.640856 2.7754 0.707967 2.41875 0.879811 2.08148C1.14346 1.56404 1.56416 1.14334 2.08161 0.879689C2.41887 0.707845 2.77552 0.640734 3.15541 0.609696C3.51964 0.579937 3.96549 0.579946 4.49964 0.579956ZM3.27756 2.10471C2.99043 2.12817 2.85315 2.17006 2.76259 2.2162C2.52739 2.33604 2.33616 2.52727 2.21632 2.76247C2.17018 2.85303 2.1283 2.99031 2.10484 3.27743C2.08066 3.57331 2.08008 3.95753 2.08008 4.52996V11.4633C2.08008 12.0357 2.08066 12.4199 2.10484 12.7158C2.1283 13.0029 2.17018 13.1402 2.21632 13.2308C2.33616 13.466 2.52739 13.6572 2.76259 13.777C2.85315 13.8232 2.99043 13.8651 3.27756 13.8885C3.57344 13.9127 3.95765 13.9133 4.53008 13.9133H11.4634C12.0358 13.9133 12.4201 13.9127 12.7159 13.8885C13.0031 13.8651 13.1403 13.8232 13.2309 13.777C13.4661 13.6572 13.6573 13.466 13.7772 13.2308C13.8233 13.1402 13.8652 13.0029 13.8887 12.7158C13.9128 12.4199 13.9134 12.0357 13.9134 11.4633V4.52996C13.9134 3.95753 13.9128 3.57331 13.8887 3.27743C13.8652 2.99031 13.8233 2.85303 13.7772 2.76247C13.6573 2.52727 13.4661 2.33604 13.2309 2.2162C13.1403 2.17006 13.0031 2.12817 12.7159 2.10471C12.4201 2.08054 12.0358 2.07996 11.4634 2.07996H4.53008C3.95765 2.07996 3.57344 2.08054 3.27756 2.10471ZM8.00012 5.74996C7.30977 5.74996 6.75012 6.3096 6.75012 6.99996C6.75012 7.69031 7.30977 8.24996 8.00012 8.24996C8.69048 8.24996 9.25012 7.69031 9.25012 6.99996C9.25012 6.3096 8.69048 5.74996 8.00012 5.74996ZM5.25012 6.99996C5.25012 5.48117 6.48134 4.24996 8.00012 4.24996C9.51891 4.24996 10.7501 5.48117 10.7501 6.99996C10.7501 8.51874 9.51891 9.74996 8.00012 9.74996C6.48134 9.74996 5.25012 8.51874 5.25012 6.99996ZM5.91679 11.6666C5.91679 11.2524 6.25258 10.9166 6.66679 10.9166H9.33346C9.74767 10.9166 10.0835 11.2524 10.0835 11.6666C10.0835 12.0808 9.74767 12.4166 9.33346 12.4166H6.66679C6.25258 12.4166 5.91679 12.0808 5.91679 11.6666Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/check-circle-light.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.99992 1.83337C4.59416 1.83337 1.83325 4.59428 1.83325 8.00004C1.83325 11.4058 4.59416 14.1667 7.99992 14.1667C11.4057 14.1667 14.1666 11.4058 14.1666 8.00004C14.1666 4.59428 11.4057 1.83337 7.99992 1.83337ZM0.833252 8.00004C0.833252 4.042 4.04188 0.833374 7.99992 0.833374C11.958 0.833374 15.1666 4.042 15.1666 8.00004C15.1666 11.9581 11.958 15.1667 7.99992 15.1667C4.04188 15.1667 0.833252 11.9581 0.833252 8.00004ZM11.3535 5.64649C11.5487 5.84175 11.5487 6.15833 11.3535 6.35359L7.35347 10.3536C7.15821 10.5489 6.84163 10.5489 6.64637 10.3536L4.64637 8.35359C4.4511 8.15833 4.4511 7.84175 4.64637 7.64649C4.84163 7.45123 5.15821 7.45123 5.35347 7.64649L6.99992 9.29293L10.6464 5.64649C10.8416 5.45123 11.1582 5.45123 11.3535 5.64649Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/chevron-down.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    transform="rotate(90)  translate(0 -16)"
+    d="M10.0541 8L5 2.3497 6.7386 1 13 8l-6.2614 7L5 13.6503z"
+    fill-rule="nonzero"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/chevron-left.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    transform="rotate(180) translate(-16 -16)"
+    d="M10.0541 8L5 2.3497 6.7386 1 13 8l-6.2614 7L5 13.6503z"
+    fill-rule="nonzero"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/chevron-right.vue

@@ -0,0 +1,3 @@
+<template>
+  <path d="M10.0541 8L5 2.3497 6.7386 1 13 8l-6.2614 7L5 13.6503z" fill-rule="nonzero" />
+</template>

package/src/atoms/components/design-com/Icon/icons/chevron-up.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    transform="rotate(-90) translate(-16 0)"
+    d="M10.0541 8L5 2.3497 6.7386 1 13 8l-6.2614 7L5 13.6503z"
+    fill-rule="nonzero"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/diamond.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.9 1.25H11.1c.065 0 .213-.002.358.037.123.033.239.087.342.16.124.087.217.202.258.252l.011.013 2.898 3.477c.042.051.097.116.142.179a1.084 1.084 0 0 1 .166.93c-.043.148-.113.26-.166.334-.045.063-.1.128-.142.179l-5.981 7.178-.012.014c-.06.071-.132.158-.201.227-.079.08-.21.197-.401.267-.24.088-.504.088-.744 0a1.093 1.093 0 0 1-.402-.267c-.069-.07-.14-.156-.2-.227l-.012-.014L1.04 6.822l-.009-.011a3.143 3.143 0 0 1-.141-.179 1.085 1.085 0 0 1-.166-.335 1.083 1.083 0 0 1 0-.594c.043-.149.112-.26.166-.335.044-.063.099-.128.141-.179l.01-.01L3.93 1.711l.011-.013a1.083 1.083 0 0 1 .6-.411c.146-.04.294-.039.358-.038Zm3.892 1.5H7.207l-.833 2.5h3.252l-.834-2.5Zm2.415 2.5-.833-2.5h.608l2.083 2.5h-1.858ZM9.61 6.75 8 11.384 6.388 6.75h3.223Zm-4.819-1.5.834-2.5h-.608l-2.084 2.5h1.858Zm-1.858 1.5H4.8l1.336 3.842L2.934 6.75Zm6.93 3.842L11.2 6.75h1.865l-3.202 3.842Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/download.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V9.52267L11.4697 6.803C11.7626 6.51011 12.2374 6.51011 12.5303 6.803C12.8232 7.0959 12.8232 7.57077 12.5303 7.86366L8.53033 11.8637C8.23744 12.1566 7.76256 12.1566 7.46967 11.8637L3.46967 7.86366C3.17678 7.57077 3.17678 7.0959 3.46967 6.803C3.76256 6.51011 4.23744 6.51011 4.53033 6.803L7.25 9.52267V2C7.25 1.58579 7.58579 1.25 8 1.25ZM1.25 14C1.25 13.5858 1.58579 13.25 2 13.25H14C14.4142 13.25 14.75 13.5858 14.75 14C14.75 14.4142 14.4142 14.75 14 14.75H2C1.58579 14.75 1.25 14.4142 1.25 14Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/file-empty.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.58342 2.09094C8.46625 2.0848 8.29437 2.08337 8.00793 2.08337H5.86675C5.29432 2.08337 4.91011 2.08395 4.61423 2.10813C4.3271 2.13158 4.18982 2.17347 4.09926 2.21961C3.86406 2.33945 3.67283 2.53068 3.55299 2.76588C3.50685 2.85644 3.46497 2.99372 3.44151 3.28085C3.41733 3.57672 3.41675 3.96094 3.41675 4.53337V11.4667C3.41675 12.0391 3.41733 12.4233 3.44151 12.7192C3.46497 13.0063 3.50685 13.1436 3.55299 13.2342C3.67283 13.4694 3.86406 13.6606 4.09926 13.7805C4.18982 13.8266 4.3271 13.8685 4.61423 13.8919C4.91011 13.9161 5.29432 13.9167 5.86675 13.9167H10.1334C10.7058 13.9167 11.0901 13.9161 11.3859 13.8919C11.6731 13.8685 11.8103 13.8266 11.9009 13.7805C12.1361 13.6606 12.3273 13.4694 12.4472 13.2342C12.4933 13.1436 12.5352 13.0063 12.5587 12.7192C12.5828 12.4233 12.5834 12.0391 12.5834 11.4667V6.65885C12.5834 6.37241 12.582 6.20053 12.5758 6.08337L10.3772 6.08337C10.2104 6.08339 10.0434 6.08342 9.90114 6.07179C9.74359 6.05892 9.55158 6.02814 9.35693 5.92896C9.09037 5.79314 8.87364 5.57642 8.73782 5.30985C8.63864 5.1152 8.60786 4.92319 8.59499 4.76564C8.58336 4.62336 8.58339 4.45635 8.58341 4.2896L8.58342 2.09094ZM9.62582 0.822148C9.47177 0.75339 9.31149 0.69885 9.14696 0.65935C8.82855 0.582906 8.49902 0.583097 8.08041 0.58334C8.05654 0.583354 8.03239 0.583368 8.00793 0.583368L5.83631 0.583367C5.30216 0.583357 4.85631 0.583348 4.49208 0.613107C4.11219 0.644145 3.75554 0.711256 3.41827 0.8831C2.90083 1.14675 2.48013 1.56745 2.21648 2.08489C2.04464 2.42216 1.97753 2.77881 1.94649 3.1587C1.91673 3.52293 1.91674 3.96878 1.91675 4.50293V11.4971C1.91674 12.0313 1.91673 12.4771 1.94649 12.8414C1.97753 13.2213 2.04464 13.5779 2.21648 13.9152C2.48013 14.4326 2.90083 14.8533 3.41827 15.117C3.75554 15.2888 4.11219 15.3559 4.49208 15.387C4.85632 15.4167 5.30218 15.4167 5.83634 15.4167H10.1638C10.698 15.4167 11.1438 15.4167 11.5081 15.387C11.888 15.3559 12.2446 15.2888 12.5819 15.117C13.0993 14.8533 13.52 14.4326 13.7837 13.9152C13.9555 13.5779 14.0226 13.2213 14.0537 12.8414C14.0834 12.4771 14.0834 12.0313 14.0834 11.4972V6.65885C14.0834 6.63439 14.0834 6.61024 14.0834 6.58638C14.0837 6.16776 14.0839 5.83824 14.0074 5.51982C13.9679 5.35528 13.9134 5.19499 13.8446 5.04093C13.8396 5.02901 13.8342 5.01726 13.8286 5.00567C13.784 4.9094 13.7338 4.81565 13.6782 4.72492C13.5071 4.44571 13.2739 4.21284 12.9777 3.917C12.9609 3.90014 12.9438 3.88307 12.9265 3.86578L10.801 1.7403C10.7837 1.723 10.7666 1.70591 10.7498 1.68903C10.4539 1.39285 10.2211 1.15971 9.94186 0.988607C9.85114 0.933015 9.75741 0.882816 9.66115 0.838213C9.64954 0.832564 9.63776 0.827206 9.62582 0.822148ZM10.0834 3.14403V4.2667C10.0834 4.41514 10.0837 4.51082 10.0864 4.58038C10.156 4.58304 10.2516 4.58337 10.4001 4.58337H11.5228L10.0834 3.14403Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/file.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.58342 2.09094C8.46625 2.0848 8.29437 2.08337 8.00793 2.08337H5.86675C5.29432 2.08337 4.91011 2.08395 4.61423 2.10813C4.3271 2.13158 4.18982 2.17347 4.09926 2.21961C3.86406 2.33945 3.67283 2.53068 3.55299 2.76588C3.50685 2.85644 3.46497 2.99372 3.44151 3.28085C3.41733 3.57672 3.41675 3.96094 3.41675 4.53337V11.4667C3.41675 12.0391 3.41733 12.4233 3.44151 12.7192C3.46497 13.0063 3.50685 13.1436 3.55299 13.2342C3.67283 13.4694 3.86406 13.6606 4.09926 13.7805C4.18982 13.8266 4.3271 13.8685 4.61423 13.8919C4.91011 13.9161 5.29432 13.9167 5.86675 13.9167H10.1334C10.7058 13.9167 11.0901 13.9161 11.3859 13.8919C11.6731 13.8685 11.8103 13.8266 11.9009 13.7805C12.1361 13.6606 12.3273 13.4694 12.4472 13.2342C12.4933 13.1436 12.5352 13.0063 12.5587 12.7192C12.5828 12.4233 12.5834 12.0391 12.5834 11.4667V6.65885C12.5834 6.37245 12.582 6.20058 12.5758 6.08342L10.3772 6.08342C10.2104 6.08344 10.0434 6.08347 9.90114 6.07184C9.74359 6.05897 9.55158 6.02819 9.35693 5.92901C9.09037 5.79319 8.87364 5.57646 8.73782 5.3099C8.63864 5.11525 8.60786 4.92324 8.59499 4.76569C8.58336 4.62341 8.58339 4.4564 8.58341 4.28964L8.58342 2.09094ZM9.62806 0.823148C9.47333 0.753919 9.31229 0.699042 9.14696 0.65935C8.82855 0.582906 8.49902 0.583097 8.08041 0.58334C8.05654 0.583354 8.03239 0.583368 8.00793 0.583368L5.83631 0.583367C5.30216 0.583357 4.85631 0.583348 4.49208 0.613107C4.11219 0.644145 3.75554 0.711256 3.41827 0.8831C2.90083 1.14675 2.48013 1.56745 2.21648 2.08489C2.04464 2.42216 1.97753 2.77881 1.94649 3.1587C1.91673 3.52293 1.91674 3.96878 1.91675 4.50293V11.4971C1.91674 12.0313 1.91673 12.4771 1.94649 12.8414C1.97753 13.2213 2.04464 13.5779 2.21648 13.9152C2.48013 14.4326 2.90083 14.8533 3.41827 15.117C3.75554 15.2888 4.11219 15.3559 4.49208 15.387C4.85632 15.4167 5.30218 15.4167 5.83634 15.4167H10.1638C10.698 15.4167 11.1438 15.4167 11.5081 15.387C11.888 15.3559 12.2446 15.2888 12.5819 15.117C13.0993 14.8533 13.52 14.4326 13.7837 13.9152C13.9555 13.5779 14.0226 13.2213 14.0537 12.8414C14.0834 12.4771 14.0834 12.0313 14.0834 11.4972V6.65885C14.0834 6.63439 14.0834 6.61024 14.0834 6.58638C14.0837 6.16776 14.0839 5.83824 14.0074 5.51982C13.9679 5.35495 13.9132 5.19435 13.8442 5.04C13.8394 5.02876 13.8344 5.01765 13.8291 5.00669C13.7843 4.91006 13.734 4.81597 13.6782 4.72492C13.5071 4.44571 13.2739 4.21284 12.9777 3.917C12.9609 3.90014 12.9438 3.88307 12.9265 3.86578L10.801 1.7403C10.7837 1.723 10.7666 1.70591 10.7498 1.68903C10.4539 1.39285 10.2211 1.15971 9.94186 0.988607C9.85046 0.932596 9.75599 0.882059 9.65897 0.837205C9.64879 0.832294 9.63849 0.827606 9.62806 0.823148ZM10.0834 3.14403V4.26675C10.0834 4.41519 10.0837 4.51087 10.0864 4.58043C10.156 4.58309 10.2516 4.58342 10.4001 4.58342H11.5228L10.0834 3.14403ZM4.58342 8.6667C4.58342 8.25249 4.9192 7.9167 5.33342 7.9167H10.6667C11.081 7.9167 11.4167 8.25249 11.4167 8.6667C11.4167 9.08091 11.081 9.4167 10.6667 9.4167H5.33342C4.9192 9.4167 4.58342 9.08091 4.58342 8.6667ZM4.58342 11.3334C4.58342 10.9192 4.9192 10.5834 5.33342 10.5834H9.33342C9.74763 10.5834 10.0834 10.9192 10.0834 11.3334C10.0834 11.7476 9.74763 12.0834 9.33342 12.0834H5.33342C4.9192 12.0834 4.58342 11.7476 4.58342 11.3334Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/filter.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 4.08337C11.3096 4.08337 10.75 4.64302 10.75 5.33337C10.75 6.02373 11.3096 6.58337 12 6.58337C12.6904 6.58337 13.25 6.02373 13.25 5.33337C13.25 4.64302 12.6904 4.08337 12 4.08337ZM9.35352 4.58337C9.67998 3.42912 10.7412 2.58337 12 2.58337C13.5188 2.58337 14.75 3.81459 14.75 5.33337C14.75 6.85216 13.5188 8.08337 12 8.08337C10.7412 8.08337 9.67998 7.23763 9.35352 6.08337L2 6.08337C1.58579 6.08337 1.25 5.74759 1.25 5.33337C1.25 4.91916 1.58579 4.58337 2 4.58337L9.35352 4.58337ZM4 9.41671C3.30964 9.41671 2.75 9.97635 2.75 10.6667C2.75 11.3571 3.30964 11.9167 4 11.9167C4.69036 11.9167 5.25 11.3571 5.25 10.6667C5.25 9.97635 4.69036 9.41671 4 9.41671ZM1.25 10.6667C1.25 9.14792 2.48122 7.91671 4 7.91671C5.25878 7.91671 6.32002 8.76245 6.64648 9.91671L14 9.91671C14.4142 9.91671 14.75 10.2525 14.75 10.6667C14.75 11.0809 14.4142 11.4167 14 11.4167H6.64648C6.32002 12.571 5.25878 13.4167 4 13.4167C2.48122 13.4167 1.25 12.1855 1.25 10.6667Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/font.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.31217 2.37722C7.65646 2.20764 8.05999 2.20764 8.40428 2.37722C8.69746 2.52162 8.85798 2.77789 8.94564 2.93223C9.03829 3.09535 9.13464 3.30738 9.23631 3.53112L13.3993 12.6897C13.5707 13.0668 13.4039 13.5114 13.0269 13.6828C12.6498 13.8542 12.2051 13.6875 12.0337 13.3104L10.4669 9.8634L5.24952 9.8634L3.68271 13.3104C3.51131 13.6875 3.06667 13.8542 2.68959 13.6828C2.3125 13.5114 2.14576 13.0668 2.31716 12.6897L6.4678 3.55828C6.47192 3.54921 6.47604 3.54015 6.48015 3.53111C6.58181 3.30738 6.67816 3.09534 6.77081 2.93223C6.85847 2.77789 7.01899 2.52162 7.31217 2.37722ZM5.93134 8.3634L9.78511 8.3634L7.8831 4.17899C7.87455 4.16018 7.86626 4.14196 7.85822 4.12429C7.85019 4.14196 7.8419 4.16018 7.83335 4.17899L5.93134 8.3634Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/headphones.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1.25 8C1.25 4.27208 4.27208 1.25 8 1.25C11.7279 1.25 14.75 4.27208 14.75 8V12.3333C14.75 13.668 13.668 14.75 12.3333 14.75C10.9986 14.75 9.91667 13.668 9.91667 12.3333V11C9.91667 9.66531 10.9986 8.58333 12.3333 8.58333C12.6578 8.58333 12.9673 8.64728 13.25 8.76325V8C13.25 5.10051 10.8995 2.75 8 2.75C5.10051 2.75 2.75 5.10051 2.75 8V8.76325C3.03268 8.64728 3.34221 8.58333 3.66667 8.58333C5.00135 8.58333 6.08333 9.66531 6.08333 11V12.3333C6.08333 13.668 5.00135 14.75 3.66667 14.75C2.33198 14.75 1.25 13.668 1.25 12.3333V8ZM2.75 12.3333C2.75 12.8396 3.16041 13.25 3.66667 13.25C4.17293 13.25 4.58333 12.8396 4.58333 12.3333V11C4.58333 10.4937 4.17293 10.0833 3.66667 10.0833C3.16041 10.0833 2.75 10.4937 2.75 11V12.3333ZM13.25 11C13.25 10.4937 12.8396 10.0833 12.3333 10.0833C11.8271 10.0833 11.4167 10.4937 11.4167 11V12.3333C11.4167 12.8396 11.8271 13.25 12.3333 13.25C12.8396 13.25 13.25 12.8396 13.25 12.3333V11Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/heart.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.99512 2.3681C6.40948 1.02286 4.08987 0.758964 2.2826 2.30314C0.311266 3.98749 0.023908 6.82638 1.58394 8.83382C2.17018 9.58819 3.31022 10.7169 4.40062 11.7462C5.50539 12.7889 6.60743 13.7741 7.15083 14.2554L7.16161 14.2649C7.21213 14.3097 7.27813 14.3682 7.34187 14.4162C7.41907 14.4743 7.5328 14.5488 7.68574 14.5944C7.88723 14.6545 8.10365 14.6545 8.30514 14.5944C8.45808 14.5488 8.57181 14.4743 8.64901 14.4162C8.71276 14.3682 8.77875 14.3097 8.82927 14.2649C8.83295 14.2617 8.83654 14.2585 8.84005 14.2554C9.38345 13.7741 10.4855 12.7889 11.5903 11.7462C12.6807 10.7169 13.8207 9.58819 14.4069 8.83382C15.9603 6.8349 15.7183 3.97369 13.7005 2.29656C11.8742 0.778618 9.57884 1.02241 7.99512 2.3681ZM7.4255 3.91139C6.31331 2.61115 4.55844 2.33157 3.257 3.44355C1.88827 4.61303 1.70539 6.54559 2.76834 7.91339C3.27251 8.56215 4.32766 9.61463 5.43023 10.6553C6.42534 11.5946 7.42087 12.4889 7.99544 12.9995C8.57001 12.4889 9.56554 11.5946 10.5606 10.6553C11.6632 9.61463 12.7184 8.56215 13.2225 7.91339C14.2921 6.53707 14.1213 4.5968 12.7417 3.45013C11.4038 2.33817 9.67192 2.61776 8.56538 3.91139C8.42289 4.07797 8.21465 4.17388 7.99544 4.17388C7.77623 4.17388 7.56799 4.07797 7.4255 3.91139Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/image.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.16957 1.25H10.8304C11.3646 1.24999 11.8104 1.24998 12.1747 1.27974C12.5546 1.31078 12.9112 1.37789 13.2485 1.54973C13.7659 1.81338 14.1866 2.23408 14.4503 2.75153C14.6221 3.08879 14.6892 3.44545 14.7203 3.82533C14.75 4.18956 14.75 4.6354 14.75 5.16955V10.8305C14.75 11.3646 14.75 11.8104 14.7203 12.1747C14.6892 12.5546 14.6221 12.9112 14.4503 13.2485C14.1866 13.7659 13.7659 14.1866 13.2485 14.4503C12.9112 14.6221 12.5546 14.6892 12.1747 14.7203C11.8104 14.75 11.3646 14.75 10.8305 14.75H5.16955C5.1522 14.75 5.13496 14.75 5.1178 14.75L4.59424 14.75C4.41573 14.75 4.23512 14.7501 4.08866 14.7371C4.08379 14.7367 4.07869 14.7362 4.07338 14.7357C3.98683 14.7318 3.90417 14.7267 3.82533 14.7203C3.44545 14.6892 3.08879 14.6221 2.75153 14.4503C2.23408 14.1866 1.81338 13.7659 1.54973 13.2485C1.37789 12.9112 1.31078 12.5546 1.27974 12.1747C1.24998 11.8104 1.24999 11.3646 1.25 10.8304V5.16957C1.24999 4.63541 1.24998 4.18956 1.27974 3.82533C1.31078 3.44545 1.37789 3.08879 1.54973 2.75153C1.81338 2.23408 2.23408 1.81338 2.75153 1.54973C3.08879 1.37789 3.44545 1.31078 3.82533 1.27974C4.18956 1.24998 4.63541 1.24999 5.16957 1.25ZM5.144 13.25C5.16246 13.25 5.18113 13.25 5.2 13.25H10.8C11.3724 13.25 11.7566 13.2494 12.0525 13.2252C12.3396 13.2018 12.4769 13.1599 12.5675 13.1138C12.8027 12.9939 12.9939 12.8027 13.1138 12.5675C13.1599 12.4769 13.2018 12.3396 13.2252 12.0525C13.2494 11.7566 13.25 11.3724 13.25 10.8V10.3107L10.8906 7.95124C10.7856 7.84628 10.7177 7.77885 10.6667 7.73154C10.6156 7.77885 10.5477 7.84628 10.4428 7.95124L5.144 13.25ZM13.25 8.18934L11.935 6.87438C11.8172 6.75646 11.6991 6.63835 11.5903 6.54597C11.4698 6.44366 11.3122 6.32966 11.1044 6.26215C10.8199 6.1697 10.5134 6.1697 10.2289 6.26215C10.0211 6.32966 9.86358 6.44367 9.74308 6.54597C9.63425 6.63836 9.51617 6.75647 9.39827 6.8744L3.71346 12.5592C3.70719 12.5655 3.70091 12.5718 3.69462 12.5781C3.56836 12.7043 3.44062 12.832 3.34623 12.9447C3.32868 12.9657 3.3068 12.9922 3.28297 13.0239C3.11609 12.907 2.97954 12.7506 2.88624 12.5675C2.8401 12.4769 2.79822 12.3396 2.77476 12.0525C2.75058 11.7566 2.75 11.3724 2.75 10.8V5.2C2.75 4.62757 2.75058 4.24336 2.77476 3.94748C2.79822 3.66036 2.8401 3.52307 2.88624 3.43251C3.00608 3.19731 3.19731 3.00608 3.43251 2.88624C3.52307 2.8401 3.66036 2.79822 3.94748 2.77476C4.24336 2.75058 4.62757 2.75 5.2 2.75H10.8C11.3724 2.75 11.7566 2.75058 12.0525 2.77476C12.3396 2.79822 12.4769 2.8401 12.5675 2.88624C12.8027 3.00608 12.9939 3.19731 13.1138 3.43251C13.1599 3.52307 13.2018 3.66036 13.2252 3.94748C13.2494 4.24336 13.25 4.62757 13.25 5.2V8.18934ZM5.66667 5.08333C5.3445 5.08333 5.08333 5.3445 5.08333 5.66667C5.08333 5.98883 5.3445 6.25 5.66667 6.25C5.98883 6.25 6.25 5.98883 6.25 5.66667C6.25 5.3445 5.98883 5.08333 5.66667 5.08333ZM3.58333 5.66667C3.58333 4.51607 4.51607 3.58333 5.66667 3.58333C6.81726 3.58333 7.75 4.51607 7.75 5.66667C7.75 6.81726 6.81726 7.75 5.66667 7.75C4.51607 7.75 3.58333 6.81726 3.58333 5.66667Z"
+  />
+</template>

package/src/atoms/components/design-com/Icon/icons/logo.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.16957 1.25H10.8304C11.3646 1.24999 11.8104 1.24998 12.1747 1.27974C12.5546 1.31078 12.9112 1.37789 13.2485 1.54973C13.7659 1.81338 14.1866 2.23408 14.4503 2.75153C14.6221 3.08879 14.6892 3.44545 14.7203 3.82533C14.75 4.18956 14.75 4.6354 14.75 5.16955V10.8305C14.75 11.3646 14.75 11.8104 14.7203 12.1747C14.6892 12.5546 14.6221 12.9112 14.4503 13.2485C14.1866 13.7659 13.7659 14.1866 13.2485 14.4503C12.9112 14.6221 12.5546 14.6892 12.1747 14.7203C11.8104 14.75 11.3646 14.75 10.8305 14.75H5.16955C4.6354 14.75 4.18956 14.75 3.82533 14.7203C3.44545 14.6892 3.08879 14.6221 2.75153 14.4503C2.23408 14.1866 1.81338 13.7659 1.54973 13.2485C1.37789 12.9112 1.31078 12.5546 1.27974 12.1747C1.24998 11.8104 1.24999 11.3646 1.25 10.8304V5.16957C1.24999 4.63541 1.24998 4.18956 1.27974 3.82533C1.31078 3.44545 1.37789 3.08879 1.54973 2.75153C1.81338 2.23408 2.23408 1.81338 2.75153 1.54973C3.08879 1.37789 3.44545 1.31078 3.82533 1.27974C4.18956 1.24998 4.63541 1.24999 5.16957 1.25ZM3.94748 2.77476C3.66036 2.79822 3.52307 2.8401 3.43251 2.88624C3.19731 3.00608 3.00608 3.19731 2.88624 3.43251C2.8401 3.52307 2.79822 3.66036 2.77476 3.94748C2.75058 4.24336 2.75 4.62757 2.75 5.2V10.8C2.75 11.3724 2.75058 11.7566 2.77476 12.0525C2.79822 12.3396 2.8401 12.4769 2.88624 12.5675C3.00608 12.8027 3.19731 12.9939 3.43251 13.1138C3.52307 13.1599 3.66036 13.2018 3.94748 13.2252C4.24336 13.2494 4.62757 13.25 5.2 13.25H10.8C11.3724 13.25 11.7566 13.2494 12.0525 13.2252C12.3396 13.2018 12.4769 13.1599 12.5675 13.1138C12.8027 12.9939 12.9939 12.8027 13.1138 12.5675C13.1599 12.4769 13.2018 12.3396 13.2252 12.0525C13.2494 11.7566 13.25 11.3724 13.25 10.8V5.2C13.25 4.62757 13.2494 4.24336 13.2252 3.94748C13.2018 3.66036 13.1599 3.52307 13.1138 3.43251C12.9939 3.19731 12.8027 3.00608 12.5675 2.88624C12.4769 2.8401 12.3396 2.79822 12.0525 2.77476C11.7566 2.75058 11.3724 2.75 10.8 2.75H5.2C4.62757 2.75 4.24336 2.75058 3.94748 2.77476ZM7.99998 6.08325C6.94143 6.08325 6.08331 6.94137 6.08331 7.99992C6.08331 9.05847 6.94144 9.91659 7.99998 9.91659C9.05853 9.91659 9.91665 9.05847 9.91665 7.99992C9.91665 6.94137 9.05853 6.08325 7.99998 6.08325ZM4.58331 7.99992C4.58331 6.11295 6.11301 4.58325 7.99998 4.58325C9.88695 4.58325 11.4166 6.11295 11.4166 7.99992C11.4166 9.88689 9.88695 11.4166 7.99998 11.4166C6.11301 11.4166 4.58331 9.88689 4.58331 7.99992Z"
+  />
+</template>