adata-ui 2.1.40 → 2.1.41-beta.1

package/illustrations/phone-check.vue

@@ -1,90 +1,110 @@
+<script setup lang="ts">
+const uid = useId()
+</script>
+
 <template>
-  <svg
-    width="156"
-    height="155"
-    viewBox="0 0 156 155"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle cx="79.2916" cy="77.4998" r="64.5833" fill="#BDC7CE" fill-opacity="0.15" />
-    <g clip-path="url(#clip0_2935_107718)">
-      <path
-        d="M108.332 126.993C108.338 126.92 108.338 126.847 108.332 126.773V25.0928C108.353 23.914 108.033 22.7544 107.409 21.7564C106.786 20.7584 105.887 19.9652 104.823 19.4741V19.4741C104.257 18.3644 103.367 17.4551 102.274 16.8676C101.181 16.2801 99.9363 16.0422 98.7056 16.1857L54.4676 20.717C52.6854 20.9202 51.0311 21.7492 49.7949 23.0583C48.5588 24.3674 47.8196 26.0731 47.7072 27.8763C47.7072 27.9928 47.7072 28.1093 47.7072 28.2259V129.906C47.6876 131.041 47.9813 132.158 48.5554 133.135C49.1296 134.111 49.9617 134.907 50.9589 135.434V135.434L51.2031 135.564C51.2031 135.564 51.2031 135.499 51.2031 135.473C51.5694 136.232 52.0908 136.905 52.7331 137.447C53.3754 137.989 54.1241 138.389 54.9303 138.619C55.7967 138.92 56.7179 139.026 57.6293 138.93L101.944 134.373C103.775 134.167 105.471 133.302 106.718 131.936C107.965 130.571 108.68 128.797 108.73 126.942L108.332 126.993Z"
-        fill="white"
-      />
-      <path
-        d="M101.571 134.27L57.256 138.827C56.3945 138.931 55.521 138.847 54.6943 138.582C53.8676 138.317 53.1069 137.876 52.4637 137.29C51.8205 136.703 51.3097 135.984 50.9658 135.182C50.6218 134.38 50.4528 133.512 50.4699 132.639V30.9582C50.4699 26.1162 53.0404 23.8377 57.256 23.4622L101.571 18.9051C102.433 18.8013 103.306 18.8848 104.133 19.15C104.96 19.4152 105.72 19.8559 106.363 20.4424C107.007 21.029 107.517 21.7476 107.861 22.55C108.205 23.3523 108.374 24.2197 108.357 25.0935V126.774C108.322 128.64 107.614 130.43 106.365 131.809C105.117 133.188 103.413 134.063 101.571 134.27V134.27Z"
-        class="fill-white dark:fill-gray-900"
-        stroke="#9DA3AC"
-        stroke-width="1.29167"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        opacity="0.2"
-        d="M107.008 127.266L62.7061 131.862C61.8446 131.966 60.9711 131.882 60.1444 131.617C59.3176 131.352 58.557 130.911 57.9139 130.325C57.2707 129.738 56.7598 129.019 56.4159 128.217C56.0719 127.415 55.9028 126.547 55.92 125.674V23.7988C52.6555 24.5756 50.7791 26.8412 50.7791 31.0358V132.716C50.7616 133.59 50.9306 134.457 51.2747 135.258C51.6188 136.06 52.1298 136.778 52.7733 137.364C53.4167 137.949 54.1776 138.389 55.0043 138.652C55.8311 138.916 56.7044 138.998 57.5651 138.892L101.88 134.335C103.711 134.129 105.406 133.264 106.654 131.898C107.901 130.532 108.616 128.758 108.666 126.903C108.131 127.094 107.574 127.216 107.008 127.266V127.266Z"
-        fill="#BDC7CE"
-      />
-      <path
-        d="M50.8947 135.435C49.8975 134.907 49.0654 134.111 48.4912 133.135C47.917 132.159 47.6234 131.041 47.643 129.907V28.291C47.6949 26.4277 48.4102 24.6454 49.6583 23.2692C50.9065 21.8931 52.6044 21.0149 54.4419 20.7951L98.7442 16.238C99.9721 16.0922 101.215 16.3262 102.308 16.9089C103.4 17.4917 104.291 18.3955 104.862 19.5005"
-        stroke="#9DA3AC"
-        stroke-width="1.29167"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        opacity="0.2"
-        d="M104.862 19.436C103.836 18.9534 102.698 18.761 101.572 18.8794L57.2567 23.4365C53.0154 23.8119 50.4706 26.0904 50.4706 30.9453V132.613C50.4628 133.625 50.6964 134.624 51.1518 135.526C50.088 135.032 49.1905 134.236 48.5695 133.235C47.9485 132.235 47.631 131.074 47.6559 129.894V28.2137C47.6913 26.3474 48.3992 24.5579 49.6478 23.1787C50.8964 21.7995 52.6004 20.9248 54.442 20.7177L98.7442 16.1477C99.9749 16.0041 101.22 16.242 102.313 16.8295C103.406 17.417 104.295 18.3263 104.862 19.436V19.436Z"
-        class="fill-white dark:fill-gray-900"
-      />
-      <path
-        d="M102.599 114.98L56.2788 119.731V33.5731L102.599 28.8218V114.98Z"
-        stroke="#9DA3AC"
-        stroke-width="1.29167"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M75.8406 27.1259L82.9737 26.4268"
-        stroke="#9DA3AC"
-        stroke-width="1.29167"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M84.4375 128.492C86.1174 126.717 86.1798 124.03 84.5768 122.491C82.9738 120.951 80.3125 121.143 78.6326 122.918C76.9527 124.693 76.8903 127.38 78.4933 128.919C80.0963 130.458 82.7576 130.267 84.4375 128.492Z"
-        stroke="#9DA3AC"
-        stroke-width="1.29167"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        opacity="0.2"
-        d="M84.9915 127.861C84.6217 128.499 84.1077 129.04 83.4914 129.44C82.8751 129.841 82.1737 130.089 81.4442 130.165C80.9062 130.231 80.3604 130.179 79.8444 130.012C79.3284 129.845 78.8545 129.567 78.4551 129.198C78.0557 128.829 77.7404 128.377 77.5309 127.874C77.3214 127.37 77.2227 126.827 77.2415 126.282C77.2542 125.417 77.5001 124.572 77.9529 123.838C78.4057 123.104 79.0484 122.507 79.812 122.113C79.3884 122.82 79.1619 123.63 79.1565 124.456C79.149 124.997 79.2564 125.533 79.4715 126.029C79.6866 126.524 80.0045 126.968 80.4037 127.33C80.803 127.691 81.2744 127.963 81.7863 128.126C82.2983 128.289 82.839 128.34 83.3721 128.275C83.9331 128.242 84.4828 128.101 84.9915 127.861V127.861Z"
-        fill="#BDC7CE"
-      />
-      <path
-        opacity="0.2"
-        d="M90.0096 84.2891C96.2143 77.6428 96.5116 67.7718 90.6736 62.2418C84.8356 56.7117 75.073 57.6167 68.8682 64.263C62.6635 70.9094 62.3662 80.7803 68.2042 86.3104C74.0422 91.8405 83.8048 90.9355 90.0096 84.2891Z"
-        fill="#BDC7CE"
-      />
-      <path
-        d="M72.4863 75.3225L77.8972 80.2939L86.4183 67.1016"
-        stroke="#9DA3AC"
-        stroke-width="1.29167"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
+  <svg class="dark:hidden" width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="70" cy="70" r="70" :fill="`url(#paint0_radial_${uid}_light)`"/>
+    <g :filter="`url(#filter0_f_${uid}_light)`">
+      <ellipse cx="70.0001" cy="117.133" rx="37.3333" ry="7" fill="#3DA6FF" fill-opacity="0.14"/>
     </g>
+    <path d="M72.022 26.3824H31.5966C28.8058 26.3824 26.5435 28.6448 26.5435 31.4356V55.6908C26.5435 58.4816 28.8058 60.744 31.5966 60.744H72.022C74.8128 60.744 77.0751 58.4816 77.0751 55.6908V31.4356C77.0751 28.6448 74.8128 26.3824 72.022 26.3824Z" :fill="`url(#paint1_linear_${uid}_light)`"/>
+    <path d="M70.0005 31.4354H33.6177C32.5014 31.4354 31.5964 32.3404 31.5964 33.4567V53.6694C31.5964 54.7857 32.5014 55.6906 33.6177 55.6906H70.0005C71.1168 55.6906 72.0218 54.7857 72.0218 53.6694V33.4567C72.0218 32.3404 71.1168 31.4354 70.0005 31.4354Z" :fill="`url(#paint2_linear_${uid}_light)`"/>
+    <path d="M22.5 64.7864H81.1167L77.0742 60.7439H26.5425L22.5 64.7864Z" :fill="`url(#paint3_linear_${uid}_light)`"/>
+    <path d="M102.341 42.5525H88.1919C84.2848 42.5525 81.1174 45.7198 81.1174 49.6269V86.0097C81.1174 89.9168 84.2848 93.0842 88.1919 93.0842H102.341C106.248 93.0842 109.415 89.9168 109.415 86.0097V49.6269C109.415 45.7198 106.248 42.5525 102.341 42.5525Z" :fill="`url(#paint4_linear_${uid}_light)`"/>
+    <path d="M102.341 48.6163H88.1922C87.0759 48.6163 86.1709 49.5213 86.1709 50.6376V80.9566C86.1709 82.0729 87.0759 82.9779 88.1922 82.9779H102.341C103.457 82.9779 104.362 82.0729 104.362 80.9566V50.6376C104.362 49.5213 103.457 48.6163 102.341 48.6163Z" :fill="`url(#paint5_linear_${uid}_light)`"/>
+    <path d="M95.2663 89.4459C96.6059 89.4459 97.6919 88.3599 97.6919 87.0204C97.6919 85.6808 96.6059 84.5948 95.2663 84.5948C93.9268 84.5948 92.8408 85.6808 92.8408 87.0204C92.8408 88.3599 93.9268 89.4459 95.2663 89.4459Z" fill="#BEDBFF"/>
+    <path d="M105.372 50.6377C112.07 50.6377 117.5 45.2079 117.5 38.51C117.5 31.8122 112.07 26.3824 105.372 26.3824C98.6746 26.3824 93.2449 31.8122 93.2449 38.51C93.2449 45.2079 98.6746 50.6377 105.372 50.6377Z" fill="white"/>
+    <path d="M105.373 48.1107C110.675 48.1107 114.974 43.8122 114.974 38.5097C114.974 33.2072 110.675 28.9087 105.373 28.9087C100.07 28.9087 95.772 33.2072 95.772 38.5097C95.772 43.8122 100.07 48.1107 105.373 48.1107Z" :fill="`url(#paint6_linear_${uid}_light)`"/>
+    <path d="M107.596 33.6588C107.596 32.4309 106.601 31.4354 105.373 31.4354C104.145 31.4354 103.149 32.4309 103.149 33.6588V37.2971C103.149 38.525 104.145 39.5205 105.373 39.5205C106.601 39.5205 107.596 38.525 107.596 37.2971V33.6588Z" fill="white"/>
+    <path d="M105.373 45.7866C106.601 45.7866 107.596 44.7912 107.596 43.5632C107.596 42.3353 106.601 41.3398 105.373 41.3398C104.145 41.3398 103.149 42.3353 103.149 43.5632C103.149 44.7912 104.145 45.7866 105.373 45.7866Z" fill="white"/>
     <defs>
-      <clipPath id="clip0_2935_107718">
-        <rect
-          width="62"
-          height="124"
-          class="fill-white dark:fill-gray-900"
-          transform="translate(47 15.5)"
-        />
-      </clipPath>
+      <filter :id="`filter0_f_${uid}_light`" x="27.0667" y="104.533" width="85.8667" height="25.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="2.8" :result="`effect1_foregroundBlur_${uid}_light`"/>
+      </filter>
+      <radialGradient :id="`paint0_radial_${uid}_light`" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(70 70) scale(70)">
+        <stop stop-color="#B3DCFF" stop-opacity="0.62"/>
+        <stop offset="0.6" stop-color="#DBEFFF" stop-opacity="0.4"/>
+        <stop offset="1" stop-color="#F0F8FF" stop-opacity="0"/>
+      </radialGradient>
+      <linearGradient :id="`paint1_linear_${uid}_light`" x1="26.5435" y1="26.3824" x2="26.5435" y2="60.744" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#8EC5FF"/>
+        <stop offset="1" stop-color="#3DA6FF"/>
+      </linearGradient>
+      <linearGradient :id="`paint2_linear_${uid}_light`" x1="31.5964" y1="31.4354" x2="31.5964" y2="55.6906" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
+      <linearGradient :id="`paint3_linear_${uid}_light`" x1="22.5" y1="60.7439" x2="22.5" y2="64.7864" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#3DA6FF"/>
+        <stop offset="1" stop-color="#068DFF"/>
+      </linearGradient>
+      <linearGradient :id="`paint4_linear_${uid}_light`" x1="81.1174" y1="42.5525" x2="81.1174" y2="93.0842" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#3DA6FF"/>
+        <stop offset="1" stop-color="#068DFF"/>
+      </linearGradient>
+      <linearGradient :id="`paint5_linear_${uid}_light`" x1="86.1709" y1="48.6163" x2="86.1709" y2="82.9779" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
+      <linearGradient :id="`paint6_linear_${uid}_light`" x1="95.772" y1="28.9087" x2="95.772" y2="48.1107" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#FFA2A2"/>
+        <stop offset="1" stop-color="#FB6A6D"/>
+      </linearGradient>
+    </defs>
+  </svg>
+  <svg class="hidden dark:block" width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="70" cy="70" r="70" :fill="`url(#paint0_radial_${uid}_dark)`"/>
+    <g :filter="`url(#filter0_f_${uid}_dark)`">
+      <ellipse cx="70.0001" cy="117.133" rx="37.3333" ry="7" fill="#278BFF" fill-opacity="0.22"/>
+    </g>
+    <path d="M72.022 26.3823H31.5966C28.8058 26.3823 26.5435 28.6447 26.5435 31.4355V55.6907C26.5435 58.4815 28.8058 60.7439 31.5966 60.7439H72.022C74.8128 60.7439 77.0751 58.4815 77.0751 55.6907V31.4355C77.0751 28.6447 74.8128 26.3823 72.022 26.3823Z" :fill="`url(#paint1_linear_${uid}_dark)`"/>
+    <path d="M70.0005 31.4355H33.6177C32.5014 31.4355 31.5964 32.3405 31.5964 33.4568V53.6695C31.5964 54.7858 32.5014 55.6908 33.6177 55.6908H70.0005C71.1168 55.6908 72.0218 54.7858 72.0218 53.6695V33.4568C72.0218 32.3405 71.1168 31.4355 70.0005 31.4355Z" :fill="`url(#paint2_linear_${uid}_dark)`"/>
+    <path d="M22.5 64.7862H81.1167L77.0742 60.7437H26.5425L22.5 64.7862Z" :fill="`url(#paint3_linear_${uid}_dark)`"/>
+    <path d="M102.341 42.5527H88.1919C84.2848 42.5527 81.1174 45.7201 81.1174 49.6272V86.01C81.1174 89.9171 84.2848 93.0844 88.1919 93.0844H102.341C106.248 93.0844 109.415 89.9171 109.415 86.01V49.6272C109.415 45.7201 106.248 42.5527 102.341 42.5527Z" :fill="`url(#paint4_linear_${uid}_dark)`"/>
+    <path d="M102.341 48.6162H88.1922C87.0759 48.6162 86.1709 49.5212 86.1709 50.6375V80.9565C86.1709 82.0728 87.0759 82.9778 88.1922 82.9778H102.341C103.457 82.9778 104.362 82.0728 104.362 80.9565V50.6375C104.362 49.5212 103.457 48.6162 102.341 48.6162Z" :fill="`url(#paint5_linear_${uid}_dark)`"/>
+    <path d="M95.2663 89.4458C96.6059 89.4458 97.6919 88.3598 97.6919 87.0202C97.6919 85.6807 96.6059 84.5947 95.2663 84.5947C93.9268 84.5947 92.8408 85.6807 92.8408 87.0202C92.8408 88.3598 93.9268 89.4458 95.2663 89.4458Z" fill="#BEDBFF"/>
+    <path d="M105.372 50.6375C112.07 50.6375 117.5 45.2078 117.5 38.5099C117.5 31.812 112.07 26.3823 105.372 26.3823C98.6746 26.3823 93.2449 31.812 93.2449 38.5099C93.2449 45.2078 98.6746 50.6375 105.372 50.6375Z" fill="white"/>
+    <path d="M105.373 48.1107C110.675 48.1107 114.974 43.8122 114.974 38.5097C114.974 33.2072 110.675 28.9087 105.373 28.9087C100.07 28.9087 95.772 33.2072 95.772 38.5097C95.772 43.8122 100.07 48.1107 105.373 48.1107Z" :fill="`url(#paint6_linear_${uid}_dark)`"/>
+    <path d="M107.596 33.6589C107.596 32.431 106.601 31.4355 105.373 31.4355C104.145 31.4355 103.149 32.431 103.149 33.6589V37.2972C103.149 38.5252 104.145 39.5206 105.373 39.5206C106.601 39.5206 107.596 38.5252 107.596 37.2972V33.6589Z" fill="white"/>
+    <path d="M105.373 45.7866C106.601 45.7866 107.596 44.7912 107.596 43.5632C107.596 42.3353 106.601 41.3398 105.373 41.3398C104.145 41.3398 103.149 42.3353 103.149 43.5632C103.149 44.7912 104.145 45.7866 105.373 45.7866Z" fill="white"/>
+    <defs>
+      <filter :id="`filter0_f_${uid}_dark`" x="27.0667" y="104.533" width="85.8667" height="25.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="2.8" :result="`effect1_foregroundBlur_${uid}_dark`"/>
+      </filter>
+      <radialGradient :id="`paint0_radial_${uid}_dark`" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(70 70) scale(70)">
+        <stop stop-color="#278BFF" stop-opacity="0.42"/>
+        <stop offset="0.58" stop-color="#278BFF" stop-opacity="0.16"/>
+        <stop offset="1" stop-color="#278BFF" stop-opacity="0"/>
+      </radialGradient>
+      <linearGradient :id="`paint1_linear_${uid}_dark`" x1="26.5435" y1="26.3823" x2="26.5435" y2="60.7439" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#8EC5FF"/>
+        <stop offset="1" stop-color="#3DA6FF"/>
+      </linearGradient>
+      <linearGradient :id="`paint2_linear_${uid}_dark`" x1="31.5964" y1="31.4355" x2="31.5964" y2="55.6908" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
+      <linearGradient :id="`paint3_linear_${uid}_dark`" x1="22.5" y1="60.7437" x2="22.5" y2="64.7862" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#3DA6FF"/>
+        <stop offset="1" stop-color="#068DFF"/>
+      </linearGradient>
+      <linearGradient :id="`paint4_linear_${uid}_dark`" x1="81.1174" y1="42.5527" x2="81.1174" y2="93.0844" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#3DA6FF"/>
+        <stop offset="1" stop-color="#068DFF"/>
+      </linearGradient>
+      <linearGradient :id="`paint5_linear_${uid}_dark`" x1="86.1709" y1="48.6162" x2="86.1709" y2="82.9778" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
+      <linearGradient :id="`paint6_linear_${uid}_dark`" x1="95.772" y1="28.9087" x2="95.772" y2="48.1107" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#FFA2A2"/>
+        <stop offset="1" stop-color="#FB6A6D"/>
+      </linearGradient>
     </defs>
   </svg>
 </template>

package/illustrations/phone-payment-method.vue

@@ -10,7 +10,7 @@
     <g clip-path="url(#clip0_8013_8834)">
       <path
         d="M84.3376 32.0486H81.321C81.3235 31.1152 81.1401 30.1904 80.7814 29.3271C80.4226 28.4638 79.8955 27.6788 79.2301 27.0171C78.5647 26.3553 77.774 25.8296 76.9033 25.4702C76.0325 25.1107 75.0987 24.9244 74.1552 24.9219H66.0664V18.0211L67.018 19.0379L67.9697 18.0305L69.1116 19.0473L70.2345 18.0305L71.4526 19.0473L72.4708 18.0305L73.3083 18.7837V14.1989C73.3084 13.2098 72.9152 12.2605 72.2136 11.5558C71.5121 10.8512 70.5585 10.4479 69.5589 10.4331H48.5565C47.5569 10.4479 46.6033 10.8512 45.9017 11.5558C45.2002 12.2605 44.807 13.2098 44.8071 14.1989V24.9219H37.6414C36.6978 24.9244 35.764 25.1107 34.8933 25.4702C34.0226 25.8296 33.2319 26.3553 32.5665 27.0171C31.9011 27.6788 31.374 28.4638 31.0152 29.3271C30.6565 30.1904 30.4731 31.1152 30.4756 32.0486V72.5306L34.1679 103.269C34.3708 104.996 35.2077 106.59 36.5198 107.748C37.832 108.905 39.528 109.546 41.2861 109.548H71.0149C72.7937 109.545 74.5079 108.888 75.825 107.705C77.142 106.522 77.968 104.898 78.1425 103.146L78.8372 96.415H84.3376C85.0233 96.4138 85.7019 96.2788 86.3348 96.0178C86.9676 95.7568 87.5422 95.3749 88.0257 94.894C88.5092 94.413 88.8921 93.8425 89.1524 93.215C89.4128 92.5875 89.5455 91.9154 89.543 91.2371V37.2265C89.5455 35.8574 88.9988 34.5432 88.0229 33.5724C87.047 32.6016 85.7216 32.0536 84.3376 32.0486Z"
-        class="fill-white dark:fill-gray-900"
+        class="fill-main"
       />
       <path
         d="M71.0149 109.53H41.2861C39.528 109.527 37.832 108.887 36.5198 107.729C35.2077 106.572 34.3708 104.978 34.1679 103.25L30.4756 72.512V32.03C30.4731 31.0966 30.6565 30.1718 31.0152 29.3085C31.374 28.4452 31.9011 27.6602 32.5665 26.9985C33.2319 26.3367 34.0226 25.811 34.8933 25.4516C35.764 25.0921 36.6978 24.9058 37.6414 24.9033H74.1362C75.0797 24.9058 76.0135 25.0921 76.8842 25.4516C77.755 25.811 78.5456 26.3367 79.211 26.9985C79.8764 27.6602 80.4036 28.4452 80.7623 29.3085C81.1211 30.1718 81.3044 31.0966 81.3019 32.03V72.512L78.1711 103.137C77.9938 104.892 77.1628 106.518 75.84 107.7C74.5172 108.881 72.7971 109.534 71.0149 109.53V109.53Z"

package/illustrations/shield-user.vue

@@ -0,0 +1,94 @@
+<template>
+  <svg class="dark:hidden" width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="70" cy="70" r="70" fill="url(#paint0_radial_2077_2335)"/>
+    <g filter="url(#filter0_f_2077_2335)">
+      <ellipse cx="70.0001" cy="117.133" rx="37.3333" ry="7" fill="#3DA6FF" fill-opacity="0.14"/>
+    </g>
+    <path d="M69.9998 22.7145L96.9998 33.2145V54.2145C96.9998 73.7145 84.2498 85.7145 69.9998 90.2145C55.7498 85.7145 42.9998 73.7145 42.9998 54.2145V33.2145L69.9998 22.7145Z" fill="url(#paint1_linear_2077_2335)"/>
+    <path d="M70.0002 27.2145L92.5002 36.2145V54.2145C92.5002 70.7145 81.2502 80.4645 70.0002 84.9645C58.7502 80.4645 47.5002 70.7145 47.5002 54.2145V36.2145L70.0002 27.2145Z" fill="url(#paint2_linear_2077_2335)"/>
+    <path d="M70 57.2144C74.1421 57.2144 77.5 53.8565 77.5 49.7144C77.5 45.5722 74.1421 42.2144 70 42.2144C65.8579 42.2144 62.5 45.5722 62.5 49.7144C62.5 53.8565 65.8579 57.2144 70 57.2144Z" fill="url(#paint3_linear_2077_2335)"/>
+    <path d="M56.4998 70.7143C57.454 68.3363 59.2698 66.2701 61.6915 64.8066C64.1133 63.3432 67.019 62.556 69.9998 62.556C72.9805 62.556 75.8863 63.3432 78.308 64.8066C80.7297 66.2701 82.5455 68.3363 83.4998 70.7143H56.4998Z" fill="url(#paint4_linear_2077_2335)"/>
+    <g opacity="0.45" filter="url(#filter1_f_2077_2335)">
+      <path d="M60.25 42.9644C63.9779 42.9644 67 40.6138 67 37.7144C67 34.8149 63.9779 32.4644 60.25 32.4644C56.5221 32.4644 53.5 34.8149 53.5 37.7144C53.5 40.6138 56.5221 42.9644 60.25 42.9644Z" fill="white"/>
+    </g>
+    <defs>
+      <filter id="filter0_f_2077_2335" x="27.0667" y="104.533" width="85.8667" height="25.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="2.8" result="effect1_foregroundBlur_2077_2335"/>
+      </filter>
+      <filter id="filter1_f_2077_2335" x="47.7553" y="26.7197" width="24.9894" height="21.9894" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="2.87234" result="effect1_foregroundBlur_2077_2335"/>
+      </filter>
+      <radialGradient id="paint0_radial_2077_2335" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(70 70) scale(70)">
+        <stop stop-color="#B3DCFF" stop-opacity="0.62"/>
+        <stop offset="0.6" stop-color="#DBEFFF" stop-opacity="0.4"/>
+        <stop offset="1" stop-color="#F0F8FF" stop-opacity="0"/>
+      </radialGradient>
+      <linearGradient id="paint1_linear_2077_2335" x1="42.9998" y1="22.7145" x2="42.9998" y2="90.2145" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#8EC5FF"/>
+        <stop offset="1" stop-color="#3DA6FF"/>
+      </linearGradient>
+      <linearGradient id="paint2_linear_2077_2335" x1="47.5002" y1="27.2145" x2="47.5002" y2="84.9645" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
+      <linearGradient id="paint3_linear_2077_2335" x1="62.5" y1="42.2144" x2="62.5" y2="57.2144" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#3DA6FF"/>
+        <stop offset="1" stop-color="#068DFF"/>
+      </linearGradient>
+      <linearGradient id="paint4_linear_2077_2335" x1="56.4998" y1="62.556" x2="56.4998" y2="70.7143" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#3DA6FF"/>
+        <stop offset="1" stop-color="#068DFF"/>
+      </linearGradient>
+    </defs>
+  </svg>
+  <svg class="hidden dark:block" width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="70" cy="70" r="70" fill="url(#paint0_radial_2077_2098)"/>
+    <g filter="url(#filter0_f_2077_2098)">
+      <ellipse cx="70.0001" cy="117.133" rx="37.3333" ry="7" fill="#278BFF" fill-opacity="0.22"/>
+    </g>
+    <path d="M69.9998 22.7144L96.9998 33.2144V54.2144C96.9998 73.7144 84.2498 85.7144 69.9998 90.2144C55.7498 85.7144 42.9998 73.7144 42.9998 54.2144V33.2144L69.9998 22.7144Z" fill="url(#paint1_linear_2077_2098)"/>
+    <path d="M70.0002 27.2144L92.5002 36.2144V54.2144C92.5002 70.7144 81.2502 80.4644 70.0002 84.9644C58.7502 80.4644 47.5002 70.7144 47.5002 54.2144V36.2144L70.0002 27.2144Z" fill="url(#paint2_linear_2077_2098)"/>
+    <path d="M70 57.2144C74.1421 57.2144 77.5 53.8565 77.5 49.7144C77.5 45.5722 74.1421 42.2144 70 42.2144C65.8579 42.2144 62.5 45.5722 62.5 49.7144C62.5 53.8565 65.8579 57.2144 70 57.2144Z" fill="url(#paint3_linear_2077_2098)"/>
+    <path d="M56.4998 70.7144C57.454 68.3364 59.2698 66.2702 61.6915 64.8068C64.1133 63.3433 67.019 62.5562 69.9998 62.5562C72.9805 62.5562 75.8863 63.3433 78.308 64.8068C80.7297 66.2702 82.5455 68.3364 83.4998 70.7144H56.4998Z" fill="url(#paint4_linear_2077_2098)"/>
+    <g opacity="0.45" filter="url(#filter1_f_2077_2098)">
+      <path d="M60.25 42.9644C63.9779 42.9644 67 40.6138 67 37.7144C67 34.8149 63.9779 32.4644 60.25 32.4644C56.5221 32.4644 53.5 34.8149 53.5 37.7144C53.5 40.6138 56.5221 42.9644 60.25 42.9644Z" fill="white"/>
+    </g>
+    <defs>
+      <filter id="filter0_f_2077_2098" x="27.0667" y="104.533" width="85.8667" height="25.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="2.8" result="effect1_foregroundBlur_2077_2098"/>
+      </filter>
+      <filter id="filter1_f_2077_2098" x="47.7553" y="26.7197" width="24.9894" height="21.9894" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="2.87234" result="effect1_foregroundBlur_2077_2098"/>
+      </filter>
+      <radialGradient id="paint0_radial_2077_2098" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(70 70) scale(70)">
+        <stop stop-color="#278BFF" stop-opacity="0.42"/>
+        <stop offset="0.58" stop-color="#278BFF" stop-opacity="0.16"/>
+        <stop offset="1" stop-color="#278BFF" stop-opacity="0"/>
+      </radialGradient>
+      <linearGradient id="paint1_linear_2077_2098" x1="42.9998" y1="22.7144" x2="42.9998" y2="90.2144" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#8EC5FF"/>
+        <stop offset="1" stop-color="#3DA6FF"/>
+      </linearGradient>
+      <linearGradient id="paint2_linear_2077_2098" x1="47.5002" y1="27.2144" x2="47.5002" y2="84.9644" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
+      <linearGradient id="paint3_linear_2077_2098" x1="62.5" y1="42.2144" x2="62.5" y2="57.2144" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#3DA6FF"/>
+        <stop offset="1" stop-color="#068DFF"/>
+      </linearGradient>
+      <linearGradient id="paint4_linear_2077_2098" x1="56.4998" y1="62.5562" x2="56.4998" y2="70.7144" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#3DA6FF"/>
+        <stop offset="1" stop-color="#068DFF"/>
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

package/illustrations/stop-hand.vue

@@ -1,77 +1,84 @@
 <template>
-  <svg
-    width="156"
-    height="155"
-    viewBox="0 0 156 155"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle cx="79.6248" cy="77.5001" r="64.5833" fill="#BDC7CE" fill-opacity="0.15" />
-    <g clip-path="url(#clip0_2708_133543)">
-      <path
-        d="M111.243 60.4993C108.861 60.6348 106.622 61.6736 104.99 63.4009C103.357 65.1283 102.456 67.4122 102.472 69.7804V29.6305C102.472 27.6339 101.673 25.7191 100.251 24.3073C98.8284 22.8955 96.8992 22.1023 94.8875 22.1023H94.7182H94.1618C92.7345 22.2138 91.3681 22.7241 90.2207 23.5739C89.0733 24.4238 88.1916 25.5786 87.6777 26.9049C86.373 29.9354 85.7695 33.2177 85.9116 36.5102V21.0457C85.9102 19.6425 85.5143 18.2675 84.7684 17.0754C84.0226 15.8833 82.9564 14.9215 81.6898 14.298L81.8349 14.214C80.6627 13.6482 79.3652 13.3863 78.0634 13.4527C76.7616 13.5192 75.498 13.9117 74.3904 14.5938C73.2828 15.276 72.3673 16.2254 71.7293 17.3536C71.0913 18.4818 70.7516 19.752 70.7419 21.0457V27.9255L70.8387 28.2377V28.6339C70.5974 27.5423 70.1139 26.5178 69.4233 25.6351C68.7327 24.7523 67.8525 24.0336 66.8467 23.5311C66.6064 23.4109 66.3601 23.3027 66.1088 23.2069H66.012C65.7822 23.1229 65.5644 23.0628 65.3346 23.0028H65.1531L64.512 22.8827H64.3064C64.0285 22.8648 63.7496 22.8648 63.4717 22.8827C61.4601 22.8827 59.5308 23.6759 58.1084 25.0877C56.686 26.4995 55.8869 28.4143 55.8869 30.4109V46.8959C55.2621 45.6361 54.2938 44.5755 53.092 43.8348C51.8902 43.094 50.5031 42.7028 49.0884 42.7056H48.8464C46.8802 42.768 45.0157 43.5873 43.6474 44.9901C42.2792 46.393 41.5146 48.2692 41.5156 50.2217V104.9C41.5156 114.599 45.3977 123.901 52.308 130.76C59.2182 137.619 68.5905 141.472 78.3631 141.472C79.0526 141.472 79.73 141.472 80.4075 141.412H80.976C81.4478 141.412 81.9075 141.412 82.3672 141.304L83.1777 141.195L84.3027 141.039L85.2099 140.883L86.1898 140.679C86.5164 140.679 86.8309 140.535 87.1575 140.463L88.0286 140.235C88.3673 140.155 88.706 140.059 89.0447 139.947L89.8189 139.707C90.1697 139.599 90.5326 139.479 90.8834 139.346L91.5125 139.106L92.7222 138.662L93.0488 138.518C95.0711 137.648 97.0104 136.599 98.8433 135.384L99.0731 135.24C99.4844 134.964 99.8836 134.676 100.283 134.388L100.561 134.184C100.96 133.883 101.347 133.583 101.771 133.271L102.025 133.067C102.412 132.743 102.799 132.419 103.162 132.082C103.232 132.033 103.297 131.977 103.355 131.914C103.743 131.566 104.13 131.194 104.565 130.822C105.372 130.061 106.11 129.261 106.779 128.42C112.338 121.849 115.38 113.54 115.368 104.96V64.4015C115.368 63.8725 115.261 63.3488 115.051 62.8624C114.841 62.376 114.534 61.937 114.149 61.572C113.763 61.2071 113.306 60.9238 112.807 60.7394C112.307 60.555 111.775 60.4733 111.243 60.4993Z"
-        class="fill-white dark:fill-gray-900"
-      />
-      <path
-        opacity="0.2"
-        d="M66.8476 23.5426C65.6929 22.958 64.4062 22.6779 63.111 22.7291C61.8158 22.7803 60.5556 23.1612 59.4514 23.8351C58.3473 24.509 57.4363 25.4534 56.8058 26.5775C56.1754 27.7017 55.8467 28.9678 55.8514 30.2543V76.4435L62.662 74.4145V30.2543C62.664 28.8604 63.0565 27.4945 63.7956 26.3092C64.5348 25.124 65.5915 24.1661 66.8476 23.5426Z"
-        class="fill-white dark:fill-gray-900"
-      />
-      <path
-        opacity="0.2"
-        d="M81.8343 14.2141C80.7781 13.6785 79.6091 13.3987 78.423 13.3977C76.4114 13.3977 74.4821 14.1909 73.0597 15.6027C71.6372 17.0145 70.8381 18.9293 70.8381 20.9258V72.9023H77.552L77.6609 20.9258C77.6603 19.5329 78.0505 18.1673 78.7876 16.9819C79.5247 15.7965 80.5796 14.8382 81.8343 14.2141Z"
-        fill="#BDC7CE"
-      />
-      <path
-        opacity="0.2"
-        d="M85.8519 134.784C81.012 134.784 76.2195 133.838 71.7482 131.999C67.2768 130.16 63.2142 127.465 59.7925 124.068C56.3707 120.671 53.6568 116.638 51.8058 112.199C49.9547 107.761 49.0028 103.004 49.0044 98.2V43.462C49.0044 43.2139 49.0044 42.9617 49.0044 42.7056C47.0023 42.7151 45.0855 43.5112 43.6732 44.9197C42.2608 46.3282 41.468 48.2345 41.468 50.2217V104.9C41.4664 109.711 42.4215 114.476 44.2786 118.921C46.1357 123.366 48.8582 127.403 52.2903 130.802C55.7223 134.2 59.7963 136.893 64.2788 138.726C68.7613 140.559 73.5642 141.496 78.4122 141.484C83.8084 141.486 89.1392 140.311 94.0269 138.041C98.9145 135.771 103.239 132.462 106.695 128.348C100.567 132.545 93.2969 134.79 85.8519 134.784Z"
-        fill="#BDC7CE"
-      />
-      <path
-        opacity="0.2"
-        d="M98.1539 22.9065C97.0942 22.3817 95.9268 22.1064 94.7426 22.1021C92.7309 22.1021 90.8017 22.8952 89.3793 24.307C87.9569 25.7188 87.1577 27.6336 87.1577 29.6302V73.8624L93.8716 75.2311L93.9683 29.6062C93.9753 28.2149 94.3701 26.8526 95.1088 25.6702C95.8475 24.4878 96.9014 23.5312 98.1539 22.9065Z"
-        class="fill-white dark:fill-gray-900"
-      />
-      <path
-        d="M107.3 61.2918C108.549 60.7706 109.889 60.5012 111.244 60.4993V60.4993C112.287 60.4993 113.287 60.9104 114.024 61.6422C114.761 62.374 115.175 63.3665 115.175 64.4015V104.912C115.175 114.611 111.293 123.913 104.383 130.772C97.4727 137.63 88.1005 141.484 78.3279 141.484V141.484C68.5554 141.484 59.1831 137.63 52.2729 130.772C45.3627 123.913 41.4805 114.611 41.4805 104.912V50.2337C41.4789 49.2456 41.6737 48.267 42.0535 47.3537C42.4334 46.4404 42.9909 45.6104 43.6942 44.9112C44.3976 44.212 45.2329 43.6573 46.1525 43.2789C47.072 42.9004 48.0577 42.7056 49.0532 42.7056V42.7056C50.0497 42.704 51.0367 42.8977 51.9577 43.2754C52.8786 43.6532 53.7154 44.2076 54.4201 44.907C55.1247 45.6063 55.6833 46.4369 56.0639 47.3509C56.4445 48.265 56.6396 49.2446 56.638 50.2337V76.0118"
-        stroke="#9DA3AC"
-        stroke-width="1.2097"
-        stroke-miterlimit="10"
-      />
-      <path
-        d="M55.8513 40.1238V30.2544C55.8513 28.2578 56.6505 26.343 58.0729 24.9312C59.4953 23.5194 61.4245 22.7263 63.4362 22.7263V22.7263C65.4478 22.7263 67.377 23.5194 68.7995 24.9312C70.2219 26.343 71.021 28.2578 71.021 30.2544V72.9017"
-        stroke="#9DA3AC"
-        stroke-width="1.2097"
-        stroke-miterlimit="10"
-      />
-      <path
-        d="M70.7434 20.8656V21.0457C70.7434 19.0491 71.5426 17.1343 72.965 15.7225C74.3874 14.3107 76.3166 13.5176 78.3282 13.5176V13.5176C80.3399 13.5176 82.2691 14.3107 83.6916 15.7225C85.114 17.1343 85.9131 19.0491 85.9131 21.0457V73.6585"
-        stroke="#9DA3AC"
-        stroke-width="1.2097"
-        stroke-miterlimit="10"
-      />
-      <path
-        d="M47.9629 79.8779C47.9629 79.8779 66.8463 67.7873 94.2097 75.4595"
-        stroke="#9DA3AC"
-        stroke-width="1.2097"
-        stroke-miterlimit="10"
-      />
-      <path
-        d="M74.0693 106.544C74.0693 106.544 79.005 92.5446 102.473 90.4915V29.6302C102.473 27.6336 101.674 25.7188 100.252 24.307C98.8292 22.8952 96.8999 22.1021 94.8883 22.1021V22.1021C93.4295 22.1014 92.0014 22.5182 90.7753 23.3027"
-        stroke="#9DA3AC"
-        stroke-width="1.2097"
-        stroke-miterlimit="10"
-      />
+  <svg class="dark:hidden" width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="70" cy="70" r="70" fill="url(#paint0_radial_2020_2726)"/>
+    <g filter="url(#filter0_f_2020_2726)">
+      <ellipse cx="70.0001" cy="117.133" rx="37.3333" ry="7" fill="#3DA6FF" fill-opacity="0.14"/>
+    </g>
+    <path d="M47.0336 25.3132H92.9669C93.904 25.3132 94.8027 25.6855 95.4654 26.3481C96.128 27.0108 96.5002 27.9095 96.5002 28.8466C96.5002 29.7837 96.128 30.6824 95.4654 31.345C94.8027 32.0076 93.904 32.3799 92.9669 32.3799H91.2002V37.6799C91.0813 41.283 90.0454 44.7962 88.1906 47.8875C86.3359 50.9788 83.7234 53.546 80.6002 55.3466C83.7234 57.1471 86.3359 59.7144 88.1906 62.8057C90.0454 65.897 91.0813 69.4102 91.2002 73.0132V78.3132H92.9669C93.904 78.3132 94.8027 78.6855 95.4654 79.3481C96.128 80.0107 96.5002 80.9095 96.5002 81.8466C96.5002 82.7837 96.128 83.6824 95.4654 84.345C94.8027 85.0076 93.904 85.3799 92.9669 85.3799H47.0336C46.0965 85.3799 45.1978 85.0076 44.5351 84.345C43.8725 83.6824 43.5002 82.7837 43.5002 81.8466C43.5002 80.9095 43.8725 80.0107 44.5351 79.3481C45.1978 78.6855 46.0965 78.3132 47.0336 78.3132H48.8002V73.0132C48.9192 69.4102 49.9551 65.897 51.8098 62.8057C53.6646 59.7144 56.2771 57.1471 59.4002 55.3466C56.2771 53.546 53.6646 50.9788 51.8098 47.8875C49.9551 44.7962 48.9192 41.283 48.8002 37.6799V32.3799H47.0336C46.0965 32.3799 45.1978 32.0076 44.5351 31.345C43.8725 30.6824 43.5002 29.7837 43.5002 28.8466C43.5002 27.9095 43.8725 27.0108 44.5351 26.3481C45.1978 25.6855 46.0965 25.3132 47.0336 25.3132Z" fill="url(#paint1_linear_2020_2726)"/>
+    <path d="M70.0008 61.114C73.4372 62.0291 76.4326 64.3109 78.3952 67.5085C80.3578 70.7062 81.1448 74.5871 80.6008 78.3845H59.4008C58.8568 74.5871 59.6438 70.7062 61.6064 67.5085C63.569 64.3109 66.5644 62.0291 70.0008 61.114Z" fill="url(#paint2_linear_2020_2726)"/>
+    <path d="M70.0002 49.6508C66.5638 48.7357 63.5684 46.4539 61.6058 43.2562C59.6432 40.0586 58.8562 36.1777 59.4002 32.3802H80.6002C81.1442 36.1777 80.3572 40.0586 78.3946 43.2562C76.432 46.4539 73.4366 48.7357 70.0002 49.6508Z" fill="url(#paint3_linear_2020_2726)"/>
+    <g opacity="0.5" filter="url(#filter1_f_2020_2726)">
+      <path d="M57.6333 35.0303C61.0482 35.0303 63.8166 33.8439 63.8166 32.3803C63.8166 30.9168 61.0482 29.7303 57.6333 29.7303C54.2183 29.7303 51.45 30.9168 51.45 32.3803C51.45 33.8439 54.2183 35.0303 57.6333 35.0303Z" fill="white"/>
+    </g>
+    <defs>
+      <filter id="filter0_f_2020_2726" x="27.0667" y="104.533" width="85.8667" height="25.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="2.8" result="effect1_foregroundBlur_2020_2726"/>
+      </filter>
+      <filter id="filter1_f_2020_2726" x="44.684" y="22.9644" width="25.8986" height="18.832" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="3.38298" result="effect1_foregroundBlur_2020_2726"/>
+      </filter>
+      <radialGradient id="paint0_radial_2020_2726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(70 70) scale(70)">
+        <stop stop-color="#B3DCFF" stop-opacity="0.62"/>
+        <stop offset="0.6" stop-color="#DBEFFF" stop-opacity="0.4"/>
+        <stop offset="1" stop-color="#F0F8FF" stop-opacity="0"/>
+      </radialGradient>
+      <linearGradient id="paint1_linear_2020_2726" x1="43.5002" y1="25.3132" x2="43.5002" y2="85.3799" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#8EC5FF"/>
+        <stop offset="1" stop-color="#3DA6FF"/>
+      </linearGradient>
+      <linearGradient id="paint2_linear_2020_2726" x1="59.2327" y1="61.114" x2="59.2327" y2="78.3845" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
+      <linearGradient id="paint3_linear_2020_2726" x1="80.7683" y1="49.6508" x2="80.7683" y2="32.3802" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
+    </defs>
+  </svg>
+  <svg class="hidden dark:block" width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="70" cy="70" r="70" fill="url(#paint0_radial_2020_1201)"/>
+    <g filter="url(#filter0_f_2020_1201)">
+      <ellipse cx="70.0001" cy="117.133" rx="37.3333" ry="7" fill="#278BFF" fill-opacity="0.22"/>
+    </g>
+    <path d="M47.0336 25.313H92.9669C93.904 25.313 94.8027 25.6852 95.4654 26.3479C96.128 27.0105 96.5002 27.9092 96.5002 28.8463C96.5002 29.7834 96.128 30.6821 95.4654 31.3448C94.8027 32.0074 93.904 32.3797 92.9669 32.3797H91.2002V37.6797C91.0813 41.2827 90.0454 44.7959 88.1906 47.8872C86.3359 50.9785 83.7234 53.5458 80.6002 55.3463C83.7234 57.1469 86.3359 59.7141 88.1906 62.8054C90.0454 65.8967 91.0813 69.4099 91.2002 73.013V78.313H92.9669C93.904 78.313 94.8027 78.6852 95.4654 79.3479C96.128 80.0105 96.5002 80.9092 96.5002 81.8463C96.5002 82.7834 96.128 83.6821 95.4654 84.3448C94.8027 85.0074 93.904 85.3797 92.9669 85.3797H47.0336C46.0965 85.3797 45.1978 85.0074 44.5351 84.3448C43.8725 83.6821 43.5002 82.7834 43.5002 81.8463C43.5002 80.9092 43.8725 80.0105 44.5351 79.3479C45.1978 78.6852 46.0965 78.313 47.0336 78.313H48.8002V73.013C48.9192 69.4099 49.9551 65.8967 51.8098 62.8054C53.6646 59.7141 56.2771 57.1469 59.4002 55.3463C56.2771 53.5458 53.6646 50.9785 51.8098 47.8872C49.9551 44.7959 48.9192 41.2827 48.8002 37.6797V32.3797H47.0336C46.0965 32.3797 45.1978 32.0074 44.5351 31.3448C43.8725 30.6821 43.5002 29.7834 43.5002 28.8463C43.5002 27.9092 43.8725 27.0105 44.5351 26.3479C45.1978 25.6852 46.0965 25.313 47.0336 25.313Z" fill="url(#paint1_linear_2020_1201)"/>
+    <path d="M70.0008 61.1138C73.4372 62.0288 76.4326 64.3106 78.3952 67.5083C80.3578 70.7059 81.1448 74.5869 80.6008 78.3843H59.4008C58.8568 74.5869 59.6438 70.7059 61.6064 67.5083C63.569 64.3106 66.5644 62.0288 70.0008 61.1138Z" fill="url(#paint2_linear_2020_1201)"/>
+    <path d="M70.0002 49.6504C66.5638 48.7353 63.5684 46.4535 61.6058 43.2559C59.6432 40.0582 58.8562 36.1773 59.4002 32.3799H80.6002C81.1442 36.1773 80.3572 40.0582 78.3946 43.2559C76.432 46.4535 73.4366 48.7353 70.0002 49.6504Z" fill="url(#paint3_linear_2020_1201)"/>
+    <g opacity="0.5" filter="url(#filter1_f_2020_1201)">
+      <path d="M57.6333 35.03C61.0482 35.03 63.8166 33.8435 63.8166 32.38C63.8166 30.9164 61.0482 29.73 57.6333 29.73C54.2183 29.73 51.45 30.9164 51.45 32.38C51.45 33.8435 54.2183 35.03 57.6333 35.03Z" fill="white"/>
     </g>
     <defs>
-      <clipPath id="clip0_2708_133543">
-        <rect
-          width="74.9167"
-          height="129.167"
-          class="fill-white dark:fill-gray-900"
-          transform="translate(40.875 12.917)"
-        />
-      </clipPath>
+      <filter id="filter0_f_2020_1201" x="27.0667" y="104.533" width="85.8667" height="25.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="2.8" result="effect1_foregroundBlur_2020_1201"/>
+      </filter>
+      <filter id="filter1_f_2020_1201" x="44.684" y="22.964" width="25.8986" height="18.8317" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+        <feGaussianBlur stdDeviation="3.38298" result="effect1_foregroundBlur_2020_1201"/>
+      </filter>
+      <radialGradient id="paint0_radial_2020_1201" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(70 70) scale(70)">
+        <stop stop-color="#278BFF" stop-opacity="0.42"/>
+        <stop offset="0.58" stop-color="#278BFF" stop-opacity="0.16"/>
+        <stop offset="1" stop-color="#278BFF" stop-opacity="0"/>
+      </radialGradient>
+      <linearGradient id="paint1_linear_2020_1201" x1="43.5002" y1="25.313" x2="43.5002" y2="85.3797" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#8EC5FF"/>
+        <stop offset="1" stop-color="#3DA6FF"/>
+      </linearGradient>
+      <linearGradient id="paint2_linear_2020_1201" x1="59.2327" y1="61.1138" x2="59.2327" y2="78.3843" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
+      <linearGradient id="paint3_linear_2020_1201" x1="80.7683" y1="49.6504" x2="80.7683" y2="32.3799" gradientUnits="userSpaceOnUse">
+        <stop stop-color="white"/>
+        <stop offset="1" stop-color="#E4F1FF"/>
+      </linearGradient>
     </defs>
   </svg>
 </template>

package/illustrations/stop-sign.vue

@@ -13,7 +13,7 @@
     />
     <path
       d="M54.2738 21.975L20.6738 80.275C17.5738 85.575 21.4738 92.175 27.5738 92.175H94.8737C100.974 92.175 104.774 85.575 101.774 80.275L68.0738 21.975C64.9738 16.675 57.3737 16.675 54.2738 21.975Z"
-      class="fill-white dark:fill-gray-900"
+      class="fill-main"
       stroke="#9DA3AC"
       stroke-miterlimit="10"
     />