@nyuccl/smile 0.2.0-beta.2 → 0.2.0-beta.21

package/dist/module.json

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

package/dist/module.mjs

@@ -1,9 +1,6 @@
 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';
-import Components from 'unplugin-vue-components/vite';
-import IconsResolver from 'unplugin-icons/resolver';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -31,14 +28,31 @@ const module$1 = defineNuxtModule({
       projectRef: process.env.VITE_PROJECT_REF || ""
     };
     _nuxt.options.alias["#smile-dev"] = resolver.resolve("./runtime/components/dev");
+    _nuxt.options.alias["#smile-composables"] = resolver.resolve("./runtime/composables");
     _nuxt.options.vite.plugins = _nuxt.options.vite.plugins || [];
     _nuxt.options.vite.plugins.push(tailwindcss());
-    _nuxt.options.vite.plugins.push(Components({
-      resolvers: [IconsResolver()]
-    }));
-    _nuxt.options.vite.plugins.push(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(
+      "@nyuccl/smile > seedrandom",
+      "@nyuccl/smile > lodash",
+      "@nyuccl/smile > clipboard",
+      "@nyuccl/smile > crypto-js/sha256",
+      "@nyuccl/smile > crypto-js/enc-base64",
+      "@nyuccl/smile > json-stable-stringify",
+      "@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"));
     addPlugin(resolver.resolve("./runtime/plugins/seed.client"));

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

@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, ref, onBeforeUnmount } from "vue";
 import { animate } from "motion";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 let timer;
 let clicked = false;
@@ -35,7 +36,7 @@ onBeforeUnmount(() => {
   >
     <img
       ref="logo"
-      src="/brain.svg"
+      :src="'/brain.svg'"
       width="220"
       class="dark-aware-img"
     >

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

@@ -1,4 +1,5 @@
 <script setup>
+import { ArrowRight } from "lucide-vue-next";
 const api = useViewAPI();
 const _props = defineProps({
   debriefText: {
@@ -35,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,6 +1,8 @@
 <script setup>
+import { ArrowLeft, ArrowRight, CalendarIcon, User } from "lucide-vue-next";
 import { reactive, computed, ref } from "vue";
-import { CalendarIcon } from "lucide-vue-next";
+import { cn } from "../../lib/utils";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 api.steps.append([{ id: "survey_page1" }, { id: "survey_page2" }, { id: "survey_page3" }]);
 const isPopoverOpen = ref(false);
@@ -75,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
@@ -290,7 +292,7 @@ function finish() {
               @click="api.goNextStep()"
             >
               Continue
-              <i-fa6-solid-arrow-right />
+              <ArrowRight />
             </Button>
           </div>
         </div>
@@ -450,7 +452,7 @@ function finish() {
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous
             </Button>
             <Button
@@ -459,7 +461,7 @@ function finish() {
               @click="api.goNextStep()"
             >
               Continue
-              <i-fa6-solid-arrow-right />
+              <ArrowRight />
             </Button>
           </div>
         </div>
@@ -1188,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,5 +1,7 @@
 <script setup>
+import { ArrowLeft, ArrowRight, Monitor } from "lucide-vue-next";
 import { reactive, computed } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 api.steps.append([{ id: "device_page1" }, { id: "device_page2" }]);
 if (!api.persist.isDefined("forminfo")) {
@@ -61,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
@@ -277,7 +279,7 @@ function finish() {
               @click="api.goNextStep()"
             >
               Continue
-              <i-fa6-solid-arrow-right />
+              <ArrowRight />
             </Button>
           </div>
         </div>
@@ -434,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,4 +1,6 @@
 <script setup>
+import { ArrowRight } from "lucide-vue-next";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 function finish() {
   api.goNextView();
@@ -31,7 +33,7 @@ function finish() {
           @click="finish()"
         >
           next
-          <i-fa6-solid-arrow-right />
+          <ArrowRight />
         </Button>
       </div>
     </div>

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

@@ -1,4 +1,7 @@
 <script setup>
+import { computed } from "vue";
+import { useRoute } from "#imports";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const route = useRoute();
 const showStatusBar = computed(() => {

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

@@ -1,5 +1,7 @@
 <script setup>
+import { ArrowRight } from "lucide-vue-next";
 import { ref } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const faveColor = ref("");
 function finish() {
@@ -48,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,7 @@
 <script setup>
+import { ArrowRight } from "lucide-vue-next";
 import { ref } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const faveNumber = ref("1");
 function finish() {
@@ -48,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,7 @@
 <script setup>
+import { X } from "lucide-vue-next";
 import { watch, onUnmounted } from "vue";
+import useAPI from "../../composables/useAPI";
 const props = defineProps({
   show: {
     type: Boolean,
@@ -48,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/InformedConsentView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch, onBeforeUnmount } from "vue";
 import { animate } from "motion";
+import useViewAPI from "../../composables/useViewAPI";
 const _props = defineProps({
   informedConsentText: {
     type: Object,

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

@@ -1,5 +1,7 @@
 <script setup>
+import { ArrowLeft, ArrowRight, CircleAlert, SquareCheckBig } from "lucide-vue-next";
 import { computed } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const props = defineProps({
   questions: {
@@ -127,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
@@ -200,7 +202,7 @@ init();
               variant="outline"
               @click="api.goPrevStep()"
             >
-              <i-fa6-solid-arrow-left />
+              <ArrowLeft />
               Previous page
             </Button>
             <div v-else />
@@ -210,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>
@@ -229,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>
@@ -256,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,5 +1,7 @@
 <script setup>
+import { ArrowRight, BookOpen } from "lucide-vue-next";
 import { computed } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const cond = api.getConditionByName("instructionsVersion");
 const instText = computed(() => {
@@ -32,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 -->
@@ -50,7 +52,7 @@ function finish(_goto) {
           @click="finish()"
         >
           next
-          <i-fa6-solid-arrow-right />
+          <ArrowRight />
         </Button>
       </div>
     </div>

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

@@ -1,5 +1,6 @@
 <script setup>
 import { onMounted, ref } from "vue";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const props = defineProps({
   estimated_time: {

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { ArrowRight } from "lucide-vue-next";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const props = defineProps({
   title: {

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

@@ -1,5 +1,8 @@
 <script setup>
+import { CircleX, Hand, Search } from "lucide-vue-next";
 import { ref } from "vue";
+import useSmileStore from "../../stores/smilestore";
+import useAPI from "../../composables/useAPI";
 const smilestore = useSmileStore();
 const api = useAPI();
 const email = ref("");
@@ -80,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
@@ -93,7 +96,7 @@ function submitWithdraw() {
               size="xs"
               @click="toggleWithdraw()"
             >
-              <i-fa6-solid-circle-xmark />
+              <CircleX />
               <span class="@[400px]:inline hidden">Withdraw</span>
             </Button>
             <Button
@@ -102,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,4 +1,6 @@
 <script setup>
+import { Sparkles } from "lucide-vue-next";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const _props = defineProps({
   estimated_time: {
@@ -50,7 +52,7 @@ const _props = defineProps({
     <template #right>
       <!-- Lab logo (hidden on smaller screens) -->
       <img
-        src="@/user/assets/brain.svg"
+        :src="'/brain.svg'"
         width="220"
         class="mb-4 hidden @xl:block"
       >
@@ -59,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,7 @@
 <script setup>
+import { Pencil } from "lucide-vue-next";
 import { reactive, computed } from "vue";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 if (!api.persist.isDefined("forminfo")) {
   api.persist.forminfo = reactive({
@@ -46,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,6 +1,8 @@
 <script setup>
+import { ArrowRight, ClipboardCopy, SquareCheckBig } from "lucide-vue-next";
 import Clipboard from "clipboard";
 import { onMounted, ref } from "vue";
+import useAPI from "../../composables/useAPI";
 const api = useAPI();
 const alreadyCompleted = !!api.store.cookieState.completionCode;
 const isUploading = ref(!alreadyCompleted);
@@ -77,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
@@ -103,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>
@@ -119,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
@@ -153,7 +155,7 @@ onMounted(() => {
                   data-clipboard-target=".completioncode-cloudresearch"
                 >
                   Copy Code
-                  <i-fa6-solid-clipboard />
+                  <ClipboardCopy />
                 </Button>
               </div>
             </div>
@@ -170,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
@@ -205,7 +207,7 @@ onMounted(() => {
                   data-clipboard-target=".completioncode-mturk"
                 >
                   Copy Code
-                  <i-fa6-solid-clipboard />
+                  <ClipboardCopy />
                 </Button>
               </div>
             </div>
@@ -222,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
@@ -246,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>
@@ -262,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.
@@ -287,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>
@@ -303,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.
@@ -328,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>
@@ -344,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.
@@ -369,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>
@@ -385,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
@@ -421,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,4 +1,6 @@
 <script setup>
+import { ArrowRight, Move } from "lucide-vue-next";
+import useViewAPI from "../../composables/useViewAPI";
 const api = useViewAPI();
 const props = defineProps(["triggered"]);
 function finish() {
@@ -27,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 -->
@@ -55,7 +57,7 @@ function finish() {
             @click="finish()"
           >
             It is visible now, I'm ready
-            <i-fa6-solid-arrow-right />
+            <ArrowRight />
           </Button>
         </div>
       </div>
@@ -67,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,5 +1,7 @@
 <script setup>
+import { LogOut, X } from "lucide-vue-next";
 import { reactive, watch, onUnmounted } from "vue";
+import useAPI from "../../composables/useAPI";
 const props = defineProps({
   show: {
     type: Boolean,
@@ -72,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 -->
@@ -83,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>