Fix errors from using UI package

src/lib/holocene/error-boundary.svelte

@@ -1,7 +1,12 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
   import Error from './error.svelte';
 
-  let { children } = $props();
+  type $$Props = {
+    children: Snippet;
+  };
+
+  let { children }: $$Props = $props();
 </script>
 
 <svelte:boundary>

src/lib/holocene/menu/menu-item.svelte

@@ -145,7 +145,7 @@
     tabindex={disabled ? -1 : 0}
     onkeydown={handleKeydown}
   >
-    {@render children()}
+    {@render children?.()}
   </a>
 {:else}
   <li
@@ -169,7 +169,7 @@
     {@render leading?.()}
     <div class="grow">
       <div class:centered class="menu-item-wrapper">
-        {@render children()}
+        {@render children?.()}
         {#if selected}
           <Icon name="checkmark" />
         {/if}

src/lib/holocene/select/select.svelte

@@ -23,8 +23,7 @@
   import type { HTMLInputAttributes } from 'svelte/elements';
   import { writable, type Writable } from 'svelte/store';
 
-  import { onMount } from 'svelte';
-  import { setContext } from 'svelte';
+  import { onMount, setContext, type Snippet } from 'svelte';
 
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
@@ -47,6 +46,7 @@
     menuClass?: string;
     variant?: MenuButtonVariant;
     required?: boolean;
+    icon?: Snippet;
   };
 
   let {
@@ -63,6 +63,7 @@
     required = false,
     children,
     'data-testid': testId = '',
+    icon,
   }: $$Props = $props();
 
   // We get the "true" value of this further down but before the mount happens we should have some kind of value
@@ -120,7 +121,9 @@
       data-testid={`${testId}-button`}
     >
       {#snippet leading()}
-        {#if leadingIcon}
+        {#if icon}
+          {@render icon()}
+        {:else if leadingIcon}
           <Icon name={leadingIcon} />
         {/if}
       {/snippet}

src/lib/holocene/table/paginated-table/api-paginated.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   export type PaginatedRequest<T> = (
     size: number,
     token: string,
@@ -7,6 +7,7 @@
 
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
+  import { run } from 'svelte/legacy';
 
   import { onMount } from 'svelte';
 
@@ -25,7 +26,7 @@
   import PaginatedTable from './index.svelte';
 
   type T = $$Generic;
-  type $$Props = HTMLAttributes<HTMLDivElement> & {
+  type $$Props = HTMLAttributes<HTMLTableElement> & {
     id?: string;
     maxHeight?: string;
     onError?: (error: Error | unknown) => void | undefined;
@@ -63,31 +64,33 @@
     previousButtonLabel,
     nextButtonLabel,
     pageSizeOptions = options,
+    ...rest
   }: $$Props = $props();
 
   let store: PaginationStore<T> = createPaginationStore(
     pageSizeOptions,
     pageSizeOptions[0],
   );
-  let error: Error;
+  let error: Error = $state();
 
   function clearError() {
     if (error) error = undefined;
   }
 
-  $: pageSizeChange =
-    !$store.loading && $store.pageSize !== $store.previousPageSize;
+  let pageSizeChange = $derived(
+    !$store.loading && $store.pageSize !== $store.previousPageSize,
+  );
 
   onMount(() => {
     initalDataFetch();
   });
 
-  $: {
+  run(() => {
     if (pageSizeChange) {
       store.resetPageSize($store.pageSize);
       initalDataFetch();
     }
-  }
+  });
 
   async function initalDataFetch() {
     const fetchData = await onFetch();
@@ -213,7 +216,7 @@
 
   <nav
     class="flex shrink-0 items-center gap-2"
-    aria-label={$$restProps['aria-label']}
+    aria-label={rest['aria-label']}
     slot="actions-end"
   >
     <IconButton

src/lib/holocene/table/paginated-table/index.svelte

@@ -1,19 +1,32 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
   import ProgressBar from '$lib/holocene/progress-bar.svelte';
 
   type Item = $$Generic;
 
-  export let visibleItems: Item[];
-  export let variant: 'primary' | 'split' = 'primary';
-  export let updating = false;
-  export let maxHeight = '';
-  export let fixed = false;
-
-  let tableContainer: HTMLDivElement;
-
-  $: tableOffset = tableContainer?.offsetTop
-    ? tableContainer?.offsetTop + 32
-    : 0;
+  type $$Props = HTMLAttributes<HTMLTableElement> & {
+    visibleItems: Item[];
+    variant?: 'primary' | 'split';
+    updating?: boolean;
+    maxHeight?: string;
+    fixed?: boolean;
+  };
+
+  let {
+    visibleItems,
+    variant = 'primary',
+    updating = false,
+    maxHeight = '',
+    fixed = false,
+    ...rest
+  }: $$Props = $props();
+
+  let tableContainer: HTMLDivElement | undefined = $state();
+
+  let tableOffset = $derived(
+    tableContainer?.offsetTop ? tableContainer?.offsetTop + 32 : 0,
+  );
 </script>
 
 <div
@@ -25,7 +38,7 @@
     class="paginated-table"
     class:table-fixed={fixed}
     class:table-auto={!fixed}
-    {...$$restProps}
+    {...rest}
   >
     <slot name="caption" />
     <thead class="paginated-table-header">

src/lib/holocene/table/paginated-table/paginated.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { run } from 'svelte/legacy';
+
   import { page } from '$app/stores';
 
   import Button from '$lib/holocene/button.svelte';
@@ -18,25 +21,44 @@
 
   type Item = $$Generic;
 
-  export let id: string = null;
-  export let items: Item[];
-  export let variant: 'primary' | 'split' = 'primary';
-  export let updating = false;
-  export let perPageLabel: string;
-  export let pageButtonLabel: (page: number) => string;
-  export let nextPageButtonLabel: string;
-  export let previousPageButtonLabel: string;
-  export let maxHeight = '';
-  export let pageSizeOptions: string[] = options;
-  export let fixed = false;
-
-  $: url = $page.url;
-  $: perPageParam = url.searchParams.get(perPageKey) ?? pageSizeOptions[0];
-  $: currentPageParam = url.searchParams.get(currentPageKey) ?? '1';
-  $: store = pagination(items, perPageParam, currentPageParam);
+  type $$Props = HTMLAttributes<HTMLTableElement> & {
+    id?: string;
+    items: Item[];
+    variant?: 'primary' | 'split';
+    updating?: boolean;
+    perPageLabel: string;
+    pageButtonLabel: (page: number) => string;
+    nextPageButtonLabel: string;
+    previousPageButtonLabel: string;
+    maxHeight?: string;
+    pageSizeOptions?: string[];
+    fixed?: boolean;
+  };
+
+  let {
+    id,
+    items,
+    variant = 'primary',
+    updating = false,
+    perPageLabel,
+    pageButtonLabel,
+    nextPageButtonLabel,
+    previousPageButtonLabel,
+    maxHeight = '',
+    pageSizeOptions = options,
+    fixed = false,
+    ...rest
+  }: $$Props = $props();
+
+  let url = $derived($page.url);
+  let perPageParam = $derived(
+    url.searchParams.get(perPageKey) ?? pageSizeOptions[0],
+  );
+  let currentPageParam = $derived(url.searchParams.get(currentPageKey) ?? '1');
+  let store = $derived(pagination(items, perPageParam, currentPageParam));
 
   // keep the 'page-size' url search param within the supported options
-  $: {
+  run(() => {
     if (parseInt(perPageParam, 10) > parseInt(MAX_PAGE_SIZE, 10)) {
       updateQueryParameters({
         parameter: perPageKey,
@@ -50,10 +72,10 @@
         url,
       });
     }
-  }
+  });
 
   // Keep the 'page' url search param within 1 and the total number of pages
-  $: {
+  run(() => {
     if (
       $store.totalPages &&
       parseInt(currentPageParam, 10) > $store.totalPages
@@ -73,7 +95,7 @@
         url,
       });
     }
-  }
+  });
 
   const handlePageChange = (page: number) => {
     updateQueryParameters({
@@ -83,10 +105,10 @@
     });
   };
 
-  $: {
+  run(() => {
     if (currentPageParam) store.jumpToPage(currentPageParam);
     if (perPageParam) store.adjustPageSize(perPageParam);
-  }
+  });
 </script>
 
 <PaginatedTable
@@ -130,7 +152,7 @@
 
   <nav
     class="flex shrink-0 items-center gap-2"
-    aria-label={$$restProps['aria-label']}
+    aria-label={rest['aria-label']}
     slot="actions-end"
   >
     <IconButton