@nyuccl/smile 0.2.0-beta.12 → 0.2.0-beta.15

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@nyuccl/smile",
   "configKey": "smile",
-  "version": "0.2.0-beta.12",
+  "version": "0.2.0-beta.15",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,7 +1,6 @@
-import { defineNuxtModule, createResolver, addServerScanDir, addServerImportsDir, addVitePlugin, addPlugin, addRouteMiddleware, addLayout, extendPages, addComponentsDir, addImports } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerScanDir, addServerImportsDir, addPlugin, addRouteMiddleware, addLayout, extendPages, addComponentsDir, addImports } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
 import tailwindcss from '@tailwindcss/vite';
-import Icons from 'unplugin-icons/vite';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -31,9 +30,6 @@ const module$1 = defineNuxtModule({
     _nuxt.options.alias["#smile-dev"] = resolver.resolve("./runtime/components/dev");
     _nuxt.options.vite.plugins = _nuxt.options.vite.plugins || [];
     _nuxt.options.vite.plugins.push(tailwindcss());
-    addVitePlugin(Icons({
-      compiler: "vue3"
-    }));
     _nuxt.options.vite.optimizeDeps = _nuxt.options.vite.optimizeDeps || {};
     _nuxt.options.vite.optimizeDeps.include = _nuxt.options.vite.optimizeDeps.include || [];
     _nuxt.options.vite.optimizeDeps.include.push(
@@ -43,7 +39,18 @@ const module$1 = defineNuxtModule({
       "@nyuccl/smile > crypto-js/sha256",
       "@nyuccl/smile > crypto-js/enc-base64",
       "@nyuccl/smile > json-stable-stringify",
-      "@nyuccl/smile > qrcode-svg"
+      "@nyuccl/smile > qrcode-svg",
+      "@nyuccl/smile > lucide-vue-next",
+      "@nyuccl/smile > reka-ui",
+      "@nyuccl/smile > reka-ui/date",
+      "@nyuccl/smile > @internationalized/date",
+      "@nyuccl/smile > vue-sonner",
+      "@nyuccl/smile > class-variance-authority",
+      "@nyuccl/smile > clsx",
+      "@nyuccl/smile > tailwind-merge",
+      "@nyuccl/smile > @vueuse/core",
+      "@nyuccl/smile > uuid",
+      "@nyuccl/smile > axios"
     );
     _nuxt.options.css.push(resolver.resolve("./runtime/css/main.css"));
     addPlugin(resolver.resolve("./runtime/plugins/store-sync.client"));

package/dist/runtime/components/builtins/DebriefView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
+import { ArrowRight } from "lucide-vue-next";
 const api = useViewAPI();
 const _props = defineProps({
   debriefText: {
@@ -36,7 +36,7 @@ function finish() {
           @click="finish()"
         >
           next
-          <i-fa6-solid-arrow-right />
+          <ArrowRight />
         </Button>
       </div>
     </div>

package/dist/runtime/components/builtins/DemographicSurveyView.vue

@@ -1,10 +1,7 @@
 <script setup>
-import IFa6SolidArrowLeft from "~icons/fa6-solid/arrow-left";
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
-import IFa6SolidPerson from "~icons/fa6-solid/person";
+import { ArrowLeft, ArrowRight, CalendarIcon, User } from "lucide-vue-next";
 import { reactive, computed, ref } from "vue";
 import { cn } from "../../lib/utils";
-import { CalendarIcon } from "lucide-vue-next";
 import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 api.steps.append([{ id: "survey_page1" }, { id: "survey_page2" }, { id: "survey_page3" }]);
@@ -80,7 +77,7 @@ function finish() {
       <!-- Page title and description section -->
       <template #title>
         <h3 class="text-3xl font-bold mb-4">
-          <i-fa6-solid-person class="inline mr-2" />Demographic Information
+          <User class="inline mr-2" />Demographic Information
         </h3>
         <p class="text-lg mb-8">
           We request some information about you which we can use to understand aggregate differences between
@@ -295,7 +292,7 @@ function finish() {
               @click="api.goNextStep()"
             >
               Continue
-              <i-fa6-solid-arrow-right />
+              <ArrowRight />
             </Button>
           </div>
         </div>
@@ -455,7 +452,7 @@ function finish() {
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous
             </Button>
             <Button
@@ -464,7 +461,7 @@ function finish() {
               @click="api.goNextStep()"
             >
               Continue
-              <i-fa6-solid-arrow-right />
+              <ArrowRight />
             </Button>
           </div>
         </div>
@@ -1193,7 +1190,7 @@ function finish() {
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous
             </Button>
             <Button

package/dist/runtime/components/builtins/DeviceSurveyView.vue

@@ -1,7 +1,5 @@
 <script setup>
-import IFa6SolidArrowLeft from "~icons/fa6-solid/arrow-left";
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
-import IFa6SolidDesktop from "~icons/fa6-solid/desktop";
+import { ArrowLeft, ArrowRight, Monitor } from "lucide-vue-next";
 import { reactive, computed } from "vue";
 import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
@@ -65,7 +63,7 @@ function finish() {
       <!-- Title and description section -->
       <template #title>
         <h3 class="text-3xl font-bold mb-4">
-          <i-fa6-solid-desktop class="inline mr-2" />&nbsp;Computer/Device Information
+          <Monitor class="inline mr-2" />&nbsp;Computer/Device Information
         </h3>
         <p class="text-lg mb-8">
           We request some basic information about the computer you are using right now. We also can use this information
@@ -281,7 +279,7 @@ function finish() {
               @click="api.goNextStep()"
             >
               Continue
-              <i-fa6-solid-arrow-right />
+              <ArrowRight />
             </Button>
           </div>
         </div>
@@ -438,7 +436,7 @@ function finish() {
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous
             </Button>
             <Button

package/dist/runtime/components/builtins/ExpView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
+import { ArrowRight } from "lucide-vue-next";
 import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 function finish() {
@@ -33,7 +33,7 @@ function finish() {
           @click="finish()"
         >
           next
-          <i-fa6-solid-arrow-right />
+          <ArrowRight />
         </Button>
       </div>
     </div>

package/dist/runtime/components/builtins/FavoriteColor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
+import { ArrowRight } from "lucide-vue-next";
 import { ref } from "vue";
 import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
@@ -50,7 +50,7 @@ function finish() {
             @click="finish()"
           >
             next
-            <i-fa6-solid-arrow-right />
+            <ArrowRight />
           </Button>
         </div>
       </div>

package/dist/runtime/components/builtins/FavoriteNumber.vue

@@ -1,5 +1,5 @@
 <script setup>
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
+import { ArrowRight } from "lucide-vue-next";
 import { ref } from "vue";
 import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
@@ -50,7 +50,7 @@ function finish() {
             @click="finish()"
           >
             next
-            <i-fa6-solid-arrow-right />
+            <ArrowRight />
           </Button>
         </div>
       </div>

package/dist/runtime/components/builtins/InformedConsentModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import IFa6SolidXmark from "~icons/fa6-solid/xmark";
+import { X } from "lucide-vue-next";
 import { watch, onUnmounted } from "vue";
 import useAPI from "../../composables/useAPI";
 const props = defineProps({
@@ -50,7 +50,7 @@ onUnmounted(() => {
       aria-label="close"
       @click="$emit('toggleConsent')"
     >
-      <i-fa6-solid-xmark class="text-xl" />
+      <X class="text-xl" />
     </Button>
 
     <!-- Modal content container -->

package/dist/runtime/components/builtins/InstructionsQuiz.vue

@@ -1,8 +1,5 @@
 <script setup>
-import IBxError from "~icons/bx/error";
-import IFa6SolidArrowLeft from "~icons/fa6-solid/arrow-left";
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
-import IFa6SolidSquareCheck from "~icons/fa6-solid/square-check";
+import { ArrowLeft, ArrowRight, CircleAlert, SquareCheckBig } from "lucide-vue-next";
 import { computed } from "vue";
 import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
@@ -132,7 +129,7 @@ init();
     >
       <template #title>
         <h3 class="text-3xl font-bold mb-4">
-          <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Did we explain things clearly?
+          <SquareCheckBig class="inline mr-2" />&nbsp;Did we explain things clearly?
         </h3>
         <p class="text-lg mb-8">
           Using the information provided in the previous pages, please select the correct answer for each question. Do
@@ -205,7 +202,7 @@ init();
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous page
             </Button>
             <div v-else />
@@ -215,7 +212,7 @@ init();
               @click="api.isLastBlockStep() ? submitQuiz() : api.goNextStep()"
             >
               {{ api.isLastBlockStep() ? 'Submit' : 'Next page' }}
-              <i-fa6-solid-arrow-right v-if="!api.isLastBlockStep()" />
+              <ArrowRight v-if="!api.isLastBlockStep()" />
             </Button>
           </div>
         </div>
@@ -234,7 +231,7 @@ init();
     <div class="text-center items-center justify-center">
       <h3 class="text-3xl font-bold mb-4">
         <div class="flex justify-center mb-2">
-          <i-fa6-solid-square-check class="text-[4rem]" />
+          <SquareCheckBig class="text-[4rem]" />
         </div>
         Congrats! You passed.
       </h3>
@@ -261,7 +258,7 @@ init();
     <div class="text-center items-center justify-center">
       <h3 class="text-3xl font-bold mb-4">
         <div class="flex justify-center mb-2">
-          <i-bx-error class="text-[4rem]" />
+          <CircleAlert class="text-[4rem]" />
         </div>
         Sorry! You did not get all the answers correct.
       </h3>

package/dist/runtime/components/builtins/InstructionsView.vue

@@ -1,6 +1,5 @@
 <script setup>
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
-import IMaterialSymbolsIntegrationInstructions from "~icons/material-symbols/integration-instructions";
+import { ArrowRight, BookOpen } from "lucide-vue-next";
 import { computed } from "vue";
 import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
@@ -35,7 +34,7 @@ function finish(_goto) {
     <div class="w-[80%] h-[80%]">
       <!-- Instruction header with icon -->
       <h1 class="text-2xl font-bold mb-4">
-        <i-material-symbols-integration-instructions class="inline-block mr-2 text-3xl" /> Instructions
+        <BookOpen class="inline-block mr-2 text-3xl" /> Instructions
       </h1>
 
       <!-- Dynamic instruction text based on condition -->
@@ -53,7 +52,7 @@ function finish(_goto) {
           @click="finish()"
         >
           next
-          <i-fa6-solid-arrow-right />
+          <ArrowRight />
         </Button>
       </div>
     </div>

package/dist/runtime/components/builtins/StatusBar.vue

@@ -1,7 +1,5 @@
 <script setup>
-import IFa6SolidCircleXmark from "~icons/fa6-solid/circle-xmark";
-import IFa6SolidHand from "~icons/fa6-solid/hand";
-import IFa6SolidMagnifyingGlass from "~icons/fa6-solid/magnifying-glass";
+import { CircleX, Hand, Search } from "lucide-vue-next";
 import { ref } from "vue";
 import useSmileStore from "../../stores/smilestore";
 import useAPI from "../../composables/useAPI";
@@ -85,7 +83,7 @@ function submitWithdraw() {
               size="xs"
               @click="toggleConsent()"
             >
-              <i-fa6-solid-magnifying-glass />
+              <Search />
               <span class="@[400px]:inline hidden">View consent</span>
             </Button>
             <Button
@@ -98,7 +96,7 @@ function submitWithdraw() {
               size="xs"
               @click="toggleWithdraw()"
             >
-              <i-fa6-solid-circle-xmark />
+              <CircleX />
               <span class="@[400px]:inline hidden">Withdraw</span>
             </Button>
             <Button
@@ -107,7 +105,7 @@ function submitWithdraw() {
               size="xs"
               @click="toggleReport()"
             >
-              <i-fa6-solid-hand />
+              <Hand />
               Report issue
             </Button>
           </div>

package/dist/runtime/components/builtins/StudyPreviewText.vue

@@ -1,5 +1,5 @@
 <script setup>
-import IFa6SolidBahai from "~icons/fa6-solid/bahai";
+import { Sparkles } from "lucide-vue-next";
 import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const _props = defineProps({
@@ -61,7 +61,7 @@ const _props = defineProps({
       <article class="border border-gray-300 rounded-lg shadow-lg">
         <!-- Card header -->
         <div class="bg-gray-100 px-3 py-2 text-xs font-medium border-b border-gray-300 rounded-t-lg">
-          <p><i-fa6-solid-bahai class="inline" />&nbsp;&nbsp;Who are we?</p>
+          <p><Sparkles class="inline" />&nbsp;&nbsp;Who are we?</p>
         </div>
 
         <!-- Card content with lab details -->

package/dist/runtime/components/builtins/TaskFeedbackSurveyView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import IFa6SolidPencil from "~icons/fa6-solid/pencil";
+import { Pencil } from "lucide-vue-next";
 import { reactive, computed } from "vue";
 import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
@@ -48,7 +48,7 @@ function finish() {
       <!-- Page title and description section -->
       <template #title>
         <h3 class="text-3xl font-bold mb-4">
-          <i-fa6-solid-pencil class="inline mr-2" />&nbsp;Give us feedback
+          <Pencil class="inline mr-2" />&nbsp;Give us feedback
         </h3>
         <p class="text-lg mb-8">
           Please give us feedback about your experience with the study. Your feedback will help us improve our study and

package/dist/runtime/components/builtins/ThanksView.vue

@@ -1,7 +1,5 @@
 <script setup>
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
-import IFa6SolidClipboard from "~icons/fa6-solid/clipboard";
-import IFa6SolidSquareCheck from "~icons/fa6-solid/square-check";
+import { ArrowRight, ClipboardCopy, SquareCheckBig } from "lucide-vue-next";
 import Clipboard from "clipboard";
 import { onMounted, ref } from "vue";
 import useAPI from "../../composables/useAPI";
@@ -81,7 +79,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               Please click the button below to begin the process of payment. This will notify Prolific you successfully
@@ -107,7 +105,7 @@ onMounted(() => {
                 :href="`https://app.prolific.co/submissions/complete?cc=${completionCode}`"
               >
                 Submit my work to Prolific
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -123,7 +121,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               Please copy the code displayed below (or click the button) and paste it into the Mechanical Turk window to
@@ -157,7 +155,7 @@ onMounted(() => {
                   data-clipboard-target=".completioncode-cloudresearch"
                 >
                   Copy Code
-                  <i-fa6-solid-clipboard />
+                  <ClipboardCopy />
                 </Button>
               </div>
             </div>
@@ -174,7 +172,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               Please verify the code displayed below is visible in the form on the Mechanical Turk website. If it is not
@@ -209,7 +207,7 @@ onMounted(() => {
                   data-clipboard-target=".completioncode-mturk"
                 >
                   Copy Code
-                  <i-fa6-solid-clipboard />
+                  <ClipboardCopy />
                 </Button>
               </div>
             </div>
@@ -226,7 +224,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               This still needs to be implemented
@@ -250,7 +248,7 @@ onMounted(() => {
                 :href="!api.config.anonymousMode ? 'http://gureckislab.org' : 'http://google.com'"
               >
                 Submit my work
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -266,7 +264,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's record your credit!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's record your credit!
             </h1>
             <p class="text-lg mb-8">
               Please click the button below to return to SONA and receive credit for completing this study.
@@ -291,7 +289,7 @@ onMounted(() => {
                 :href="`${api.config.sona.url}/webstudy_credit.aspx?experiment_id=${api.config.sona.experimentId}&credit_token=${api.config.sona.creditToken}&survey_code=${api.store.private.recruitmentInfo.survey_code}`"
               >
                 Return to SONA for credit
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -307,7 +305,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
             </h1>
             <p class="text-lg mb-8">
               Please click the button below to return to SONA and begin the payment process.
@@ -332,7 +330,7 @@ onMounted(() => {
                 :href="`${api.config.sonaPaid.url}/webstudy_credit.aspx?experiment_id=${api.config.sonaPaid.experimentId}&credit_token=${api.config.sonaPaid.creditToken}&survey_code=${api.store.private.recruitmentInfo.survey_code}`"
               >
                 Return to SONA for payment
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -348,7 +346,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks for your contribution to science!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks for your contribution to science!
             </h1>
             <p class="text-lg mb-8">
               Please click the button below to return to SPARK and complete your session.
@@ -373,7 +371,7 @@ onMounted(() => {
                 :href="`${api.config.spark.completionUrl}/${api.store.private.recruitmentInfo.subject_ID}`"
               >
                 Return to SPARK
-                <i-fa6-solid-arrow-right />
+                <ArrowRight />
               </Button>
             </div>
           </template>
@@ -389,7 +387,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks for your contribution to science!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks for your contribution to science!
             </h1>
             <p class="text-lg mb-8">
               Your data have been successfully recorded. You may now close this window or follow any
@@ -425,7 +423,7 @@ onMounted(() => {
         >
           <template #title>
             <h1 class="text-3xl font-bold mb-4">
-              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks for your contribution to science!
+              <SquareCheckBig class="inline mr-2" />&nbsp;Thanks for your contribution to science!
             </h1>
             <p class="text-lg mb-8">
               Your data have been successfully recorded and you can close this window or navigate to another page.

package/dist/runtime/components/builtins/WindowSizerView.vue

@@ -1,6 +1,5 @@
 <script setup>
-import IFa6SolidArrowRight from "~icons/fa6-solid/arrow-right";
-import IFa6SolidArrowsUpDownLeftRight from "~icons/fa6-solid/arrows-up-down-left-right";
+import { ArrowRight, Move } from "lucide-vue-next";
 import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const props = defineProps(["triggered"]);
@@ -30,7 +29,7 @@ function finish() {
       >
         <!-- Resize icon -->
         <div class="text-4xl text-window-sizer-text mb-4 flex justify-center">
-          <i-fa6-solid-arrows-up-down-left-right />
+          <Move />
         </div>
 
         <!-- Main instruction text -->
@@ -58,7 +57,7 @@ function finish() {
             @click="finish()"
           >
             It is visible now, I'm ready
-            <i-fa6-solid-arrow-right />
+            <ArrowRight />
           </Button>
         </div>
       </div>
@@ -70,7 +69,7 @@ function finish() {
       >
         <!-- Resize icon -->
         <span class="text-4xl text-window-sizer-text mb-4 flex justify-center">
-          <i-fa6-solid-arrows-up-down-left-right />
+          <Move />
         </span>
 
         <!-- Re-adjustment instruction text -->

package/dist/runtime/components/builtins/WithdrawModal.vue

@@ -1,6 +1,5 @@
 <script setup>
-import IFa6SolidXmark from "~icons/fa6-solid/xmark";
-import IPhHandWithdrawThin from "~icons/ph/hand-withdraw-thin";
+import { LogOut, X } from "lucide-vue-next";
 import { reactive, watch, onUnmounted } from "vue";
 import useAPI from "../../composables/useAPI";
 const props = defineProps({
@@ -75,7 +74,7 @@ onUnmounted(() => {
       aria-label="close"
       @click="$emit('toggleWithdraw')"
     >
-      <i-fa6-solid-xmark class="text-xl" />
+      <X class="text-xl" />
     </Button>
 
     <!-- Modal content container -->
@@ -86,7 +85,7 @@ onUnmounted(() => {
           <!-- Modal header with title -->
           <template #title>
             <h3 class="text-3xl font-semibold">
-              <i-ph-hand-withdraw-thin class="text-red-500 inline-block mr-2" />Withdraw from study?
+              <LogOut class="text-red-500 inline-block mr-2" />Withdraw from study?
             </h3>
           </template>
 

package/dist/runtime/components/builtins/WithdrawView.vue

@@ -1,6 +1,5 @@
 <script setup>
-import IIconParkOutlineAttention from "~icons/icon-park-outline/attention";
-import IIconParkOutlineBye from "~icons/icon-park-outline/bye";
+import { AlertTriangle, HandMetal } from "lucide-vue-next";
 import { computed } from "vue";
 import useAPI from "../../composables/useAPI";
 const api = useAPI();
@@ -69,7 +68,7 @@ const content = computed(() => {
       >
         <CardHeader>
           <p class="text-xl font-semibold text-center">
-            <i-icon-park-outline-bye class="text-withdraw-text inline-block text-5xl mb-2" />
+            <HandMetal class="text-withdraw-text inline-block text-5xl mb-2" />
             <br>{{ content.title }}
           </p>
         </CardHeader>
@@ -85,7 +84,7 @@ const content = computed(() => {
       >
         <CardHeader>
           <p class="text-xl font-semibold text-center">
-            <i-icon-park-outline-attention class="text-warning-text inline-block text-5xl mb-2" />
+            <AlertTriangle class="text-warning-text inline-block text-5xl mb-2" />
             <br>Access Error
           </p>
         </CardHeader>