Event handlers with the `on:` directive are deprecated in svelte 5 — radicle-desktop

Also bubbling events from HTML elements to the components have to be done with onclick callback props.

 <script lang="ts">
   export let variant: "primary" | "secondary" | "ghost";
   export let hoverable: boolean = false;
   export let onclick: (() => void) | undefined = undefined;
   export let stylePadding: string | undefined = undefined;
   export let styleHeight: string | undefined = undefined;

 <div
   style:width={styleWidth}
   class="container"
   on:click
   {onclick}
   role="button"
   tabindex="0"
   {style}

 <script lang="ts">
   export let variant: "primary" | "secondary" | "ghost";
   export let onclick: (() => void) | undefined = undefined;
   $: style =
     `--button-color-1: var(--color-fill-${variant});` +

 </style>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container" on:click role="button" tabindex="0" {style}>
 <div class="container" {onclick} role="button" tabindex="0" {style}>
   <div class="pixel p1-1"></div>
   <div class="pixel p1-2"></div>
   <div class="pixel p1-3"></div>

   export let stylePadding: string | undefined = undefined;
   export let styleHeight: string | undefined = undefined;
   export let styleWidth: string | undefined = undefined;
   export let onclick: (() => void) | undefined = undefined;
   $: style =
     variant === "transparent"

       <div class="flex-item navigation" style:gap="0.5rem">
         <Icon
           name="arrow-left"
           on:click={() => {
           onclick={() => {
             window.history.back();
           }} />
         <Icon
           name="arrow-right"
           on:click={() => {
           onclick={() => {
             window.history.forward();
           }} />
       </div>

         <Border
           slot="toggle"
           let:toggle
           on:click={toggle}
           onclick={toggle}
           variant="ghost"
           stylePadding="0 0.25rem"
           styleHeight="32px">

   import { unreachable } from "@app/lib/utils";
   export let size: "16" | "32" = "16";
   export let onclick: (() => void) | undefined = undefined;
   export let name:
     | "arrow-left"

 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <svg
   role="img"
   on:click
   {onclick}
   width={size}
   height={size}
   fill="currentColor"

   }
 </style>
 <a on:click={navigateToRoute} href={routeToPath(route)}>
 <a onclick={navigateToRoute} href={routeToPath(route)}>
   <slot />
 </a>

   }
 </style>
 <svelte:window on:click={clickOutside} on:touchstart={clickOutside} />
 <svelte:window onclick={clickOutside} on:touchstart={clickOutside} />
 <div
   bind:this={thisComponent}

     <Fill
       stylePadding="0 0.5rem"
       variant={$theme === "dark" ? "secondary" : "transparent"}
       on:click={() => {
       onclick={() => {
         storeTheme("dark");
       }}>
       <Icon name="moon" />