refactor: migrate to Svelte 5

use runes ($props, $state, $derived, $effect, etc)

apps/website/src/components/molecules/CartItem/CartItem.svelte

@@ -3,29 +3,28 @@
 </style>
 
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte'
-    // Components
     import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
     import Select from '$components/molecules/Select.svelte'
 
-    export let item: any
+    let {
+        item,
+        quantityLimit = 5,
+        onUpdatedQuantity,
+        onremoved,
+    }: {
+        item: any
+        quantityLimit?: number
+        onUpdatedQuantity?: any
+        onremoved?: any
+    } = $props()
 
-    const dispatch = createEventDispatcher()
-    const quantityLimit = 5
-
-
-    // When changing item quantity
-    const updateQuantity = ({ detail }: any) => {
-        dispatch('updatedQuantity', {
+    /** Handle item quantity change */
+    const updateQuantity = (value: string) => {
+        onUpdatedQuantity({
             id: item.id,
-            quantity: Number(detail)
+            quantity: Number(value)
         })
     }
-
-    // When removing item
-    const removeItem = () => {
-        dispatch('removed', item.id)
-    }
 </script>
 
 <div class="cart-item shadow-small">
@@ -50,16 +49,17 @@
                         selected: index + 1 === item.quantity,
                     }
                 })}
-                on:change={updateQuantity}
+                onchange={updateQuantity}
                 value={String(item.quantity)}
             >
                 <span>Quantity:</span>
             </Select>
         {/if}
 
-        <ButtonCircle class="remove"
+        <ButtonCircle
+            class="remove"
             size="tiny" color="gray"
-            on:click={removeItem}
+            onclick={() => onremoved(item.id)}
         >
             <svg width="8" height="8">
                 <use xlink:href="#cross" />