chromia 0.0.1 → 0.0.2

package/src/icons/BellIcon.svelte

@@ -0,0 +1,87 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Bell">
+      <path
+        id="icon_Bell"
+        d="M1.81928 9.83893L1.41136 9.5498H1.41136L1.81928 9.83893ZM2.58249 7.51967L2.08249 7.51396V7.51967H2.58249ZM2.59851 6.11743L3.09851 6.12314V6.11743H2.59851ZM12.1848 9.85019L12.5983 9.56912L12.5983 9.56912L12.1848 9.85019ZM11.4503 7.51967L10.9503 7.51366V7.51967H11.4503ZM11.4663 6.18691L11.9663 6.19292V6.18691H11.4663ZM5.25 12.1001C4.97386 12.1001 4.75 12.3239 4.75 12.6001C4.75 12.8762 4.97386 13.1001 5.25 13.1001V12.1001ZM8.75 13.1001C9.02614 13.1001 9.25 12.8762 9.25 12.6001C9.25 12.3239 9.02614 12.1001 8.75 12.1001V13.1001ZM2.22721 10.1281C2.65774 9.52064 3.08249 8.61792 3.08249 7.51967H2.08249C2.08249 8.35688 1.75754 9.06138 1.41136 9.5498L2.22721 10.1281ZM3.08245 7.52538L3.09847 6.12314L2.09854 6.11171L2.08252 7.51396L3.08245 7.52538ZM12.5983 9.56912C12.2665 9.08087 11.9503 8.36919 11.9503 7.51967H10.9503C10.9503 8.6189 11.358 9.52322 11.7713 10.1313L12.5983 9.56912ZM11.9503 7.52568L11.9663 6.19292L10.9664 6.1809L10.9503 7.51366L11.9503 7.52568ZM11.9663 6.18691C11.9663 3.30031 9.77489 0.900146 7 0.900146V1.90015C9.15848 1.90015 10.9663 3.7862 10.9663 6.18691H11.9663ZM11.9175 11.0001C12.3356 11.0001 12.5832 10.6889 12.6786 10.4485C12.7761 10.203 12.7946 9.85786 12.5983 9.56912L11.7713 10.1313C11.7521 10.1031 11.7502 10.0816 11.75 10.0782C11.7499 10.0758 11.7501 10.0755 11.7499 10.0768C11.7498 10.0773 11.7497 10.0779 11.7496 10.0784C11.7495 10.0787 11.7494 10.0789 11.7494 10.0791C11.7493 10.0792 11.7493 10.0792 11.7493 10.0793C11.7493 10.0793 11.7493 10.0793 11.7493 10.0793C11.7493 10.0793 11.7493 10.0793 11.7493 10.0792C11.7493 10.0792 11.7494 10.0791 11.7494 10.079C11.7495 10.0788 11.7497 10.0784 11.75 10.0779C11.7505 10.0769 11.7515 10.0751 11.7532 10.0727C11.7563 10.0682 11.7631 10.0595 11.7753 10.0492C11.8021 10.0267 11.8522 10.0001 11.9175 10.0001V11.0001ZM3.09851 6.11743C3.09851 3.75509 4.87733 1.90015 7 1.90015V0.900146C4.26092 0.900146 2.09851 3.2692 2.09851 6.11743H3.09851ZM2.08313 10.0001C2.14997 10.0001 2.20071 10.0278 2.22707 10.0504C2.24961 10.0697 2.25302 10.0828 2.25127 10.0783C2.24991 10.0748 2.25011 10.0717 2.24995 10.0741C2.24977 10.077 2.24772 10.0991 2.22721 10.1281L1.41136 9.5498C1.20614 9.83933 1.2228 10.1903 1.31811 10.4378C1.41123 10.6795 1.65828 11.0001 2.08313 11.0001V10.0001ZM11.9175 10.0001H2.08313V11.0001H11.9175V10.0001ZM5.25 13.1001H8.75V12.1001H5.25V13.1001Z"
+        stroke="url(#grad-Bell)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Bell"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Bell">
+      <path
+        id="icon_Bell"
+        d="M1.81928 9.83893L1.41136 9.5498H1.41136L1.81928 9.83893ZM2.58249 7.51967L2.08249 7.51396V7.51967H2.58249ZM2.59851 6.11743L3.09851 6.12314V6.11743H2.59851ZM12.1848 9.85019L12.5983 9.56912L12.5983 9.56912L12.1848 9.85019ZM11.4503 7.51967L10.9503 7.51366V7.51967H11.4503ZM11.4663 6.18691L11.9663 6.19292V6.18691H11.4663ZM5.25 12.1001C4.97386 12.1001 4.75 12.3239 4.75 12.6001C4.75 12.8762 4.97386 13.1001 5.25 13.1001V12.1001ZM8.75 13.1001C9.02614 13.1001 9.25 12.8762 9.25 12.6001C9.25 12.3239 9.02614 12.1001 8.75 12.1001V13.1001ZM2.22721 10.1281C2.65774 9.52064 3.08249 8.61792 3.08249 7.51967H2.08249C2.08249 8.35688 1.75754 9.06138 1.41136 9.5498L2.22721 10.1281ZM3.08245 7.52538L3.09847 6.12314L2.09854 6.11171L2.08252 7.51396L3.08245 7.52538ZM12.5983 9.56912C12.2665 9.08087 11.9503 8.36919 11.9503 7.51967H10.9503C10.9503 8.6189 11.358 9.52322 11.7713 10.1313L12.5983 9.56912ZM11.9503 7.52568L11.9663 6.19292L10.9664 6.1809L10.9503 7.51366L11.9503 7.52568ZM11.9663 6.18691C11.9663 3.30031 9.77489 0.900146 7 0.900146V1.90015C9.15848 1.90015 10.9663 3.7862 10.9663 6.18691H11.9663ZM11.9175 11.0001C12.3356 11.0001 12.5832 10.6889 12.6786 10.4485C12.7761 10.203 12.7946 9.85786 12.5983 9.56912L11.7713 10.1313C11.7521 10.1031 11.7502 10.0816 11.75 10.0782C11.7499 10.0758 11.7501 10.0755 11.7499 10.0768C11.7498 10.0773 11.7497 10.0779 11.7496 10.0784C11.7495 10.0787 11.7494 10.0789 11.7494 10.0791C11.7493 10.0792 11.7493 10.0792 11.7493 10.0793C11.7493 10.0793 11.7493 10.0793 11.7493 10.0793C11.7493 10.0793 11.7493 10.0793 11.7493 10.0792C11.7493 10.0792 11.7494 10.0791 11.7494 10.079C11.7495 10.0788 11.7497 10.0784 11.75 10.0779C11.7505 10.0769 11.7515 10.0751 11.7532 10.0727C11.7563 10.0682 11.7631 10.0595 11.7753 10.0492C11.8021 10.0267 11.8522 10.0001 11.9175 10.0001V11.0001ZM3.09851 6.11743C3.09851 3.75509 4.87733 1.90015 7 1.90015V0.900146C4.26092 0.900146 2.09851 3.2692 2.09851 6.11743H3.09851ZM2.08313 10.0001C2.14997 10.0001 2.20071 10.0278 2.22707 10.0504C2.24961 10.0697 2.25302 10.0828 2.25127 10.0783C2.24991 10.0748 2.25011 10.0717 2.24995 10.0741C2.24977 10.077 2.24772 10.0991 2.22721 10.1281L1.41136 9.5498C1.20614 9.83933 1.2228 10.1903 1.31811 10.4378C1.41123 10.6795 1.65828 11.0001 2.08313 11.0001V10.0001ZM11.9175 10.0001H2.08313V11.0001H11.9175V10.0001ZM5.25 13.1001H8.75V12.1001H5.25V13.1001Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+  

package/src/icons/BellIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BellIconProps = typeof __propDef.props;
+export type BellIconEvents = typeof __propDef.events;
+export type BellIconSlots = typeof __propDef.slots;
+export default class BellIcon extends SvelteComponent<BellIconProps, BellIconEvents, BellIconSlots> {
+}
+export {};

package/src/icons/BezierIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Bezier">
+      <path
+        id="icon_Bezier"
+        d="M5.32361 4.37015C5.59976 4.37015 5.82361 4.14629 5.82361 3.87015C5.82361 3.59401 5.59976 3.37015 5.32361 3.37015V4.37015ZM2.1133 3.37015C1.83716 3.37015 1.6133 3.59401 1.6133 3.87015C1.6133 4.14629 1.83716 4.37015 2.1133 4.37015V3.37015ZM11.8999 4.37015C12.176 4.37015 12.3999 4.14629 12.3999 3.87015C12.3999 3.59401 12.176 3.37015 11.8999 3.37015V4.37015ZM8.53392 3.37015C8.25778 3.37015 8.03392 3.59401 8.03392 3.87015C8.03392 4.14629 8.25778 4.37015 8.53392 4.37015V3.37015ZM6.1343 3.30005H7.71781V2.30005H6.1343V3.30005ZM7.74564 3.32788V4.91139H8.74564V3.32788H7.74564ZM7.71781 4.93922H6.1343V5.93922H7.71781V4.93922ZM6.10647 4.91139V3.32788H5.10647V4.91139H6.10647ZM6.1343 4.93922C6.11893 4.93922 6.10647 4.92676 6.10647 4.91139H5.10647C5.10647 5.47905 5.56665 5.93922 6.1343 5.93922V4.93922ZM7.74564 4.91139C7.74564 4.92676 7.73318 4.93922 7.71781 4.93922V5.93922C8.28547 5.93922 8.74564 5.47905 8.74564 4.91139H7.74564ZM7.71781 3.30005C7.73318 3.30005 7.74564 3.31251 7.74564 3.32788H8.74564C8.74564 2.76023 8.28547 2.30005 7.71781 2.30005V3.30005ZM6.1343 2.30005C5.56665 2.30005 5.10647 2.76023 5.10647 3.32788H6.10647C6.10647 3.31251 6.11893 3.30005 6.1343 3.30005V2.30005ZM1.92774 9.00727H3.51124V8.00727H1.92774V9.00727ZM3.53908 9.0351V10.6186H4.53908V9.0351H3.53908ZM3.51124 10.6464H1.92774V11.6464H3.51124V10.6464ZM1.8999 10.6186V9.0351H0.899902V10.6186H1.8999ZM1.92774 10.6464C1.91237 10.6464 1.8999 10.634 1.8999 10.6186H0.899902C0.899902 11.1863 1.36008 11.6464 1.92774 11.6464V10.6464ZM3.53908 10.6186C3.53908 10.634 3.52661 10.6464 3.51124 10.6464V11.6464C4.0789 11.6464 4.53908 11.1863 4.53908 10.6186H3.53908ZM3.51124 9.00727C3.52661 9.00727 3.53908 9.01973 3.53908 9.0351H4.53908C4.53908 8.46745 4.0789 8.00727 3.51124 8.00727V9.00727ZM1.92774 8.00727C1.36008 8.00727 0.899902 8.46744 0.899902 9.0351H1.8999C1.8999 9.01973 1.91236 9.00727 1.92774 9.00727V8.00727ZM10.4886 9.00727H12.0721V8.00727H10.4886V9.00727ZM12.0999 9.0351V10.6186H13.0999V9.0351H12.0999ZM12.0721 10.6464H10.4886V11.6464H12.0721V10.6464ZM10.4607 10.6186V9.0351H9.46073V10.6186H10.4607ZM10.4886 10.6464C10.4732 10.6464 10.4607 10.634 10.4607 10.6186H9.46073C9.46073 11.1863 9.9209 11.6464 10.4886 11.6464V10.6464ZM12.0999 10.6186C12.0999 10.634 12.0874 10.6464 12.0721 10.6464V11.6464C12.6397 11.6464 13.0999 11.1863 13.0999 10.6186H12.0999ZM12.0721 9.00727C12.0874 9.00727 12.0999 9.01973 12.0999 9.0351H13.0999C13.0999 8.46745 12.6397 8.00727 12.0721 8.00727V9.00727ZM10.4886 8.00727C9.9209 8.00727 9.46073 8.46744 9.46073 9.0351H10.4607C10.4607 9.01973 10.4732 9.00727 10.4886 9.00727V8.00727ZM5.32361 3.37015H2.1133V4.37015H5.32361V3.37015ZM11.8999 3.37015H8.53392V4.37015H11.8999V3.37015ZM2.32671 7.79386V8.50727H3.32671V7.79386H2.32671ZM10.8875 7.79386V8.50727H11.8875V7.79386H10.8875ZM3.32671 7.79386C3.32671 6.39521 4.086 5.1733 5.21728 4.5189L4.71655 3.65329C3.28899 4.47909 2.32671 6.02381 2.32671 7.79386H3.32671ZM8.99696 4.5189C10.1282 5.1733 10.8875 6.39521 10.8875 7.79386H11.8875C11.8875 6.02381 10.9253 4.47909 9.49769 3.65329L8.99696 4.5189Z"
+        stroke="url(#grad-Bezier)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Bezier"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Bezier">
+      <path
+        id="icon_Bezier"
+        d="M5.32361 4.37015C5.59976 4.37015 5.82361 4.14629 5.82361 3.87015C5.82361 3.59401 5.59976 3.37015 5.32361 3.37015V4.37015ZM2.1133 3.37015C1.83716 3.37015 1.6133 3.59401 1.6133 3.87015C1.6133 4.14629 1.83716 4.37015 2.1133 4.37015V3.37015ZM11.8999 4.37015C12.176 4.37015 12.3999 4.14629 12.3999 3.87015C12.3999 3.59401 12.176 3.37015 11.8999 3.37015V4.37015ZM8.53392 3.37015C8.25778 3.37015 8.03392 3.59401 8.03392 3.87015C8.03392 4.14629 8.25778 4.37015 8.53392 4.37015V3.37015ZM6.1343 3.30005H7.71781V2.30005H6.1343V3.30005ZM7.74564 3.32788V4.91139H8.74564V3.32788H7.74564ZM7.71781 4.93922H6.1343V5.93922H7.71781V4.93922ZM6.10647 4.91139V3.32788H5.10647V4.91139H6.10647ZM6.1343 4.93922C6.11893 4.93922 6.10647 4.92676 6.10647 4.91139H5.10647C5.10647 5.47905 5.56665 5.93922 6.1343 5.93922V4.93922ZM7.74564 4.91139C7.74564 4.92676 7.73318 4.93922 7.71781 4.93922V5.93922C8.28547 5.93922 8.74564 5.47905 8.74564 4.91139H7.74564ZM7.71781 3.30005C7.73318 3.30005 7.74564 3.31251 7.74564 3.32788H8.74564C8.74564 2.76023 8.28547 2.30005 7.71781 2.30005V3.30005ZM6.1343 2.30005C5.56665 2.30005 5.10647 2.76023 5.10647 3.32788H6.10647C6.10647 3.31251 6.11893 3.30005 6.1343 3.30005V2.30005ZM1.92774 9.00727H3.51124V8.00727H1.92774V9.00727ZM3.53908 9.0351V10.6186H4.53908V9.0351H3.53908ZM3.51124 10.6464H1.92774V11.6464H3.51124V10.6464ZM1.8999 10.6186V9.0351H0.899902V10.6186H1.8999ZM1.92774 10.6464C1.91237 10.6464 1.8999 10.634 1.8999 10.6186H0.899902C0.899902 11.1863 1.36008 11.6464 1.92774 11.6464V10.6464ZM3.53908 10.6186C3.53908 10.634 3.52661 10.6464 3.51124 10.6464V11.6464C4.0789 11.6464 4.53908 11.1863 4.53908 10.6186H3.53908ZM3.51124 9.00727C3.52661 9.00727 3.53908 9.01973 3.53908 9.0351H4.53908C4.53908 8.46745 4.0789 8.00727 3.51124 8.00727V9.00727ZM1.92774 8.00727C1.36008 8.00727 0.899902 8.46744 0.899902 9.0351H1.8999C1.8999 9.01973 1.91236 9.00727 1.92774 9.00727V8.00727ZM10.4886 9.00727H12.0721V8.00727H10.4886V9.00727ZM12.0999 9.0351V10.6186H13.0999V9.0351H12.0999ZM12.0721 10.6464H10.4886V11.6464H12.0721V10.6464ZM10.4607 10.6186V9.0351H9.46073V10.6186H10.4607ZM10.4886 10.6464C10.4732 10.6464 10.4607 10.634 10.4607 10.6186H9.46073C9.46073 11.1863 9.9209 11.6464 10.4886 11.6464V10.6464ZM12.0999 10.6186C12.0999 10.634 12.0874 10.6464 12.0721 10.6464V11.6464C12.6397 11.6464 13.0999 11.1863 13.0999 10.6186H12.0999ZM12.0721 9.00727C12.0874 9.00727 12.0999 9.01973 12.0999 9.0351H13.0999C13.0999 8.46745 12.6397 8.00727 12.0721 8.00727V9.00727ZM10.4886 8.00727C9.9209 8.00727 9.46073 8.46744 9.46073 9.0351H10.4607C10.4607 9.01973 10.4732 9.00727 10.4886 9.00727V8.00727ZM5.32361 3.37015H2.1133V4.37015H5.32361V3.37015ZM11.8999 3.37015H8.53392V4.37015H11.8999V3.37015ZM2.32671 7.79386V8.50727H3.32671V7.79386H2.32671ZM10.8875 7.79386V8.50727H11.8875V7.79386H10.8875ZM3.32671 7.79386C3.32671 6.39521 4.086 5.1733 5.21728 4.5189L4.71655 3.65329C3.28899 4.47909 2.32671 6.02381 2.32671 7.79386H3.32671ZM8.99696 4.5189C10.1282 5.1733 10.8875 6.39521 10.8875 7.79386H11.8875C11.8875 6.02381 10.9253 4.47909 9.49769 3.65329L8.99696 4.5189Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/BezierIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BezierIconProps = typeof __propDef.props;
+export type BezierIconEvents = typeof __propDef.events;
+export type BezierIconSlots = typeof __propDef.slots;
+export default class BezierIcon extends SvelteComponent<BezierIconProps, BezierIconEvents, BezierIconSlots> {
+}
+export {};

package/src/icons/CalendarIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g id="id_Calendar">
+      <path
+        id="icon_Calendar"
+        d="M4.83331 11.7023V11.6459M8.20831 11.7023V11.6459M8.20831 8.64587V8.58947M11.2083 8.64587V8.58947M2.58331 5.64584H13.0833M3.94046 1.33334V2.45847M11.5833 1.33334V2.45834M11.5833 2.45834H4.08331C2.84067 2.45834 1.83331 3.4657 1.83331 4.70834V12.2084C1.83331 13.451 2.84067 14.4584 4.08331 14.4584H11.5833C12.826 14.4584 13.8333 13.451 13.8333 12.2084L13.8333 4.70834C13.8333 3.4657 12.826 2.45834 11.5833 2.45834Z"
+        stroke="url(#grad-Calendar)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Calendar"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g id="id_Calendar">
+      <path
+        id="icon_Calendar"
+        d="M4.83331 11.7023V11.6459M8.20831 11.7023V11.6459M8.20831 8.64587V8.58947M11.2083 8.64587V8.58947M2.58331 5.64584H13.0833M3.94046 1.33334V2.45847M11.5833 1.33334V2.45834M11.5833 2.45834H4.08331C2.84067 2.45834 1.83331 3.4657 1.83331 4.70834V12.2084C1.83331 13.451 2.84067 14.4584 4.08331 14.4584H11.5833C12.826 14.4584 13.8333 13.451 13.8333 12.2084L13.8333 4.70834C13.8333 3.4657 12.826 2.45834 11.5833 2.45834Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/CalendarIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CalendarIconProps = typeof __propDef.props;
+export type CalendarIconEvents = typeof __propDef.events;
+export type CalendarIconSlots = typeof __propDef.slots;
+export default class CalendarIcon extends SvelteComponent<CalendarIconProps, CalendarIconEvents, CalendarIconSlots> {
+}
+export {};

package/src/icons/CameraIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <g id="id_Camera">
+      <path
+        id="icon_Camera"
+        d="M7.20002 6.11999V7.11999C7.55569 7.11999 7.88459 6.93108 8.0638 6.62386L7.20002 6.11999ZM8.88002 3.23999V2.23999C8.52436 2.23999 8.19546 2.4289 8.01624 2.73612L8.88002 3.23999ZM15.12 3.23999L15.9838 2.73612C15.8046 2.4289 15.4757 2.23999 15.12 2.23999V3.23999ZM16.8 6.11999L15.9362 6.62386C16.1155 6.93108 16.4444 7.11999 16.8 7.11999V6.11999ZM3.40002 18.36V8.51999H1.40002V18.36H3.40002ZM4.80002 7.11999H7.20002V5.11999H4.80002V7.11999ZM8.0638 6.62386L9.7438 3.74386L8.01624 2.73612L6.33624 5.61612L8.0638 6.62386ZM8.88002 4.23999H15.12V2.23999H8.88002V4.23999ZM14.2562 3.74386L15.9362 6.62386L17.6638 5.61612L15.9838 2.73612L14.2562 3.74386ZM16.8 7.11999H19.2V5.11999H16.8V7.11999ZM20.6 8.51999V18.36H22.6V8.51999H20.6ZM20.6 18.36C20.6 19.1332 19.9732 19.76 19.2 19.76V21.76C21.0778 21.76 22.6 20.2378 22.6 18.36H20.6ZM19.2 7.11999C19.9732 7.11999 20.6 7.74679 20.6 8.51999H22.6C22.6 6.64222 21.0778 5.11999 19.2 5.11999V7.11999ZM3.40002 8.51999C3.40002 7.74679 4.02682 7.11999 4.80002 7.11999V5.11999C2.92226 5.11999 1.40002 6.64222 1.40002 8.51999H3.40002ZM4.80002 19.76C4.02683 19.76 3.40002 19.1332 3.40002 18.36H1.40002C1.40002 20.2378 2.92226 21.76 4.80002 21.76V19.76ZM14.6 12.84C14.6 14.2759 13.436 15.44 12 15.44V17.44C14.5405 17.44 16.6 15.3805 16.6 12.84H14.6ZM12 15.44C10.5641 15.44 9.40002 14.2759 9.40002 12.84H7.40002C7.40002 15.3805 9.45951 17.44 12 17.44V15.44ZM9.40002 12.84C9.40002 11.404 10.5641 10.24 12 10.24V8.23999C9.45951 8.23999 7.40002 10.2995 7.40002 12.84H9.40002ZM12 10.24C13.436 10.24 14.6 11.404 14.6 12.84H16.6C16.6 10.2995 14.5405 8.23999 12 8.23999V10.24ZM19.2 19.76H4.80002V21.76H19.2V19.76Z"
+        stroke="url(#grad-Camera)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Camera"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <g id="id_Camera">
+      <path
+        id="icon_Camera"
+        d="M7.20002 6.11999V7.11999C7.55569 7.11999 7.88459 6.93108 8.0638 6.62386L7.20002 6.11999ZM8.88002 3.23999V2.23999C8.52436 2.23999 8.19546 2.4289 8.01624 2.73612L8.88002 3.23999ZM15.12 3.23999L15.9838 2.73612C15.8046 2.4289 15.4757 2.23999 15.12 2.23999V3.23999ZM16.8 6.11999L15.9362 6.62386C16.1155 6.93108 16.4444 7.11999 16.8 7.11999V6.11999ZM3.40002 18.36V8.51999H1.40002V18.36H3.40002ZM4.80002 7.11999H7.20002V5.11999H4.80002V7.11999ZM8.0638 6.62386L9.7438 3.74386L8.01624 2.73612L6.33624 5.61612L8.0638 6.62386ZM8.88002 4.23999H15.12V2.23999H8.88002V4.23999ZM14.2562 3.74386L15.9362 6.62386L17.6638 5.61612L15.9838 2.73612L14.2562 3.74386ZM16.8 7.11999H19.2V5.11999H16.8V7.11999ZM20.6 8.51999V18.36H22.6V8.51999H20.6ZM20.6 18.36C20.6 19.1332 19.9732 19.76 19.2 19.76V21.76C21.0778 21.76 22.6 20.2378 22.6 18.36H20.6ZM19.2 7.11999C19.9732 7.11999 20.6 7.74679 20.6 8.51999H22.6C22.6 6.64222 21.0778 5.11999 19.2 5.11999V7.11999ZM3.40002 8.51999C3.40002 7.74679 4.02682 7.11999 4.80002 7.11999V5.11999C2.92226 5.11999 1.40002 6.64222 1.40002 8.51999H3.40002ZM4.80002 19.76C4.02683 19.76 3.40002 19.1332 3.40002 18.36H1.40002C1.40002 20.2378 2.92226 21.76 4.80002 21.76V19.76ZM14.6 12.84C14.6 14.2759 13.436 15.44 12 15.44V17.44C14.5405 17.44 16.6 15.3805 16.6 12.84H14.6ZM12 15.44C10.5641 15.44 9.40002 14.2759 9.40002 12.84H7.40002C7.40002 15.3805 9.45951 17.44 12 17.44V15.44ZM9.40002 12.84C9.40002 11.404 10.5641 10.24 12 10.24V8.23999C9.45951 8.23999 7.40002 10.2995 7.40002 12.84H9.40002ZM12 10.24C13.436 10.24 14.6 11.404 14.6 12.84H16.6C16.6 10.2995 14.5405 8.23999 12 8.23999V10.24ZM19.2 19.76H4.80002V21.76H19.2V19.76Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/CameraIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CameraIconProps = typeof __propDef.props;
+export type CameraIconEvents = typeof __propDef.events;
+export type CameraIconSlots = typeof __propDef.slots;
+export default class CameraIcon extends SvelteComponent<CameraIconProps, CameraIconEvents, CameraIconSlots> {
+}
+export {};

package/src/icons/CertificateIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Certificate">
+      <path
+        id="icon_Certificate"
+        d="M3.35425 1.25C1.97987 1.25 0.66675 2.159 0.666749 3.49998L0.666748 9.33332C0.666748 10.6743 1.97987 11.5833 3.35425 11.5833H8.25008V12.25C8.25008 12.4601 8.38137 12.6477 8.57869 12.7197C8.77602 12.7917 8.99731 12.7327 9.13259 12.572L9.91675 11.6405L10.7009 12.572C10.8362 12.7327 11.0575 12.7917 11.2548 12.7197C11.4521 12.6477 11.5834 12.4601 11.5834 12.25V11.4405C12.5623 11.1349 13.3334 10.3609 13.3334 9.33332V3.49999C13.3334 2.159 12.0203 1.25 10.6459 1.25L3.35425 1.25ZM11.5834 10.3726C12.0606 10.1309 12.3334 9.71816 12.3334 9.33332V3.49999C12.3334 2.90799 11.6878 2.25 10.6459 2.25L3.35425 2.25C2.31238 2.25 1.66675 2.90799 1.66675 3.49998L1.66675 9.33332C1.66675 9.92531 2.31238 10.5833 3.35425 10.5833H8.25008V8.16667C8.25008 8.13041 8.25394 8.09505 8.26127 8.06098C7.84229 7.63918 7.58342 7.05815 7.58342 6.41665C7.58342 5.12799 8.62808 4.08332 9.91675 4.08332C11.2054 4.08332 12.2501 5.12799 12.2501 6.41665C12.2501 7.05815 11.9912 7.63918 11.5722 8.06098C11.5796 8.09505 11.5834 8.13041 11.5834 8.16667V10.3726ZM10.5834 8.65335C10.3722 8.71622 10.1484 8.74998 9.91675 8.74998C9.68509 8.74998 9.46132 8.71622 9.25008 8.65335V10.5833H9.49958L9.53424 10.5421C9.62924 10.4293 9.76923 10.3641 9.91675 10.3641C10.0643 10.3641 10.2043 10.4293 10.2993 10.5421L10.3339 10.5833H10.5834V8.65335ZM2.91675 4.16666C2.64061 4.16666 2.41675 4.39051 2.41675 4.66666C2.41675 4.9428 2.64061 5.16666 2.91675 5.16666H6.41675C6.69289 5.16666 6.91675 4.9428 6.91675 4.66666C6.91675 4.39051 6.69289 4.16666 6.41675 4.16666H2.91675ZM2.41675 6.41665C2.41675 6.14051 2.64061 5.91665 2.91675 5.91665H6.41675C6.69289 5.91665 6.91675 6.14051 6.91675 6.41665C6.91675 6.69279 6.69289 6.91665 6.41675 6.91665H2.91675C2.64061 6.91665 2.41675 6.69279 2.41675 6.41665ZM2.91675 7.66665C2.64061 7.66665 2.41675 7.8905 2.41675 8.16665C2.41675 8.44279 2.64061 8.66665 2.91675 8.66665H6.41675C6.69289 8.66665 6.91675 8.44279 6.91675 8.16665C6.91675 7.8905 6.69289 7.66665 6.41675 7.66665H2.91675ZM9.91675 7.74998C10.6531 7.74998 11.2501 7.15302 11.2501 6.41665C11.2501 5.68028 10.6531 5.08332 9.91675 5.08332C9.18037 5.08332 8.58342 5.68028 8.58342 6.41665C8.58342 7.15302 9.18037 7.74998 9.91675 7.74998Z"
+        stroke="url(#grad-Certificate)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Certificate"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Certificate">
+      <path
+        id="icon_Certificate"
+        d="M3.35425 1.25C1.97987 1.25 0.66675 2.159 0.666749 3.49998L0.666748 9.33332C0.666748 10.6743 1.97987 11.5833 3.35425 11.5833H8.25008V12.25C8.25008 12.4601 8.38137 12.6477 8.57869 12.7197C8.77602 12.7917 8.99731 12.7327 9.13259 12.572L9.91675 11.6405L10.7009 12.572C10.8362 12.7327 11.0575 12.7917 11.2548 12.7197C11.4521 12.6477 11.5834 12.4601 11.5834 12.25V11.4405C12.5623 11.1349 13.3334 10.3609 13.3334 9.33332V3.49999C13.3334 2.159 12.0203 1.25 10.6459 1.25L3.35425 1.25ZM11.5834 10.3726C12.0606 10.1309 12.3334 9.71816 12.3334 9.33332V3.49999C12.3334 2.90799 11.6878 2.25 10.6459 2.25L3.35425 2.25C2.31238 2.25 1.66675 2.90799 1.66675 3.49998L1.66675 9.33332C1.66675 9.92531 2.31238 10.5833 3.35425 10.5833H8.25008V8.16667C8.25008 8.13041 8.25394 8.09505 8.26127 8.06098C7.84229 7.63918 7.58342 7.05815 7.58342 6.41665C7.58342 5.12799 8.62808 4.08332 9.91675 4.08332C11.2054 4.08332 12.2501 5.12799 12.2501 6.41665C12.2501 7.05815 11.9912 7.63918 11.5722 8.06098C11.5796 8.09505 11.5834 8.13041 11.5834 8.16667V10.3726ZM10.5834 8.65335C10.3722 8.71622 10.1484 8.74998 9.91675 8.74998C9.68509 8.74998 9.46132 8.71622 9.25008 8.65335V10.5833H9.49958L9.53424 10.5421C9.62924 10.4293 9.76923 10.3641 9.91675 10.3641C10.0643 10.3641 10.2043 10.4293 10.2993 10.5421L10.3339 10.5833H10.5834V8.65335ZM2.91675 4.16666C2.64061 4.16666 2.41675 4.39051 2.41675 4.66666C2.41675 4.9428 2.64061 5.16666 2.91675 5.16666H6.41675C6.69289 5.16666 6.91675 4.9428 6.91675 4.66666C6.91675 4.39051 6.69289 4.16666 6.41675 4.16666H2.91675ZM2.41675 6.41665C2.41675 6.14051 2.64061 5.91665 2.91675 5.91665H6.41675C6.69289 5.91665 6.91675 6.14051 6.91675 6.41665C6.91675 6.69279 6.69289 6.91665 6.41675 6.91665H2.91675C2.64061 6.91665 2.41675 6.69279 2.41675 6.41665ZM2.91675 7.66665C2.64061 7.66665 2.41675 7.8905 2.41675 8.16665C2.41675 8.44279 2.64061 8.66665 2.91675 8.66665H6.41675C6.69289 8.66665 6.91675 8.44279 6.91675 8.16665C6.91675 7.8905 6.69289 7.66665 6.41675 7.66665H2.91675ZM9.91675 7.74998C10.6531 7.74998 11.2501 7.15302 11.2501 6.41665C11.2501 5.68028 10.6531 5.08332 9.91675 5.08332C9.18037 5.08332 8.58342 5.68028 8.58342 6.41665C8.58342 7.15302 9.18037 7.74998 9.91675 7.74998Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/CertificateIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CertificateIconProps = typeof __propDef.props;
+export type CertificateIconEvents = typeof __propDef.events;
+export type CertificateIconSlots = typeof __propDef.slots;
+export default class CertificateIcon extends SvelteComponent<CertificateIconProps, CertificateIconEvents, CertificateIconSlots> {
+}
+export {};

package/src/icons/CheckCircleIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_CheckCircle">
+      <path
+        id="icon_CheckCircle"
+        d="M8.95502 5.745L6.29999 8.40002L5.39497 7.495M6.99999 1.40002C3.9072 1.40002 1.39999 3.90723 1.39999 7.00002C1.39999 10.0928 3.9072 12.6 6.99999 12.6C10.0928 12.6 12.6 10.0928 12.6 7.00002C12.6 3.90723 10.0928 1.40002 6.99999 1.40002Z"
+        stroke="url(#grad-CheckCircle)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-CheckCircle"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_CheckCircle">
+      <path
+        id="icon_CheckCircle"
+        d="M8.95502 5.745L6.29999 8.40002L5.39497 7.495M6.99999 1.40002C3.9072 1.40002 1.39999 3.90723 1.39999 7.00002C1.39999 10.0928 3.9072 12.6 6.99999 12.6C10.0928 12.6 12.6 10.0928 12.6 7.00002C12.6 3.90723 10.0928 1.40002 6.99999 1.40002Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+