Move xlsx import warnings to a modal

src/lib/files/ImportXlsx.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="StateType">
-  import { stripSuffix, Loading } from "$lib";
-  import { FormElement, WarningText } from "govuk-svelte";
+  import { stripSuffix, Loading, Modal } from "$lib";
+  import { FormElement, SecondaryButton, WarningText } from "govuk-svelte";
   import { createEventDispatcher } from "svelte";
 
   let dispatch = createEventDispatcher<{
@@ -10,6 +10,7 @@
   export let xlsxImporter: (buffer: ArrayBuffer) => Promise<StateType>;
 
   let loading = "";
+  let open = false;
 
   let fileInput: HTMLInputElement;
   async function fileLoaded(e: Event) {
@@ -28,14 +29,22 @@
   }
 </script>
 
-<FormElement label="Import from XLSX file" id="import-xlsx">
-  <input
-    bind:this={fileInput}
-    on:change={fileLoaded}
-    class="govuk-file-upload"
-    id="import-xlsx"
-    type="file"
-  />
+<SecondaryButton on:click={() => (open = true)}>
+  Import from XLSX file
+</SecondaryButton>
+
+<Loading {loading} />
+
+<Modal title="Import from XLSX file" bind:open>
+  <FormElement label="Import from XLSX file" id="import-xlsx">
+    <input
+      bind:this={fileInput}
+      on:change={fileLoaded}
+      class="govuk-file-upload"
+      id="import-xlsx"
+      type="file"
+    />
+  </FormElement>
 
   <WarningText>
     <p>
@@ -52,6 +61,5 @@
       <li>Some text fields on the Summary of Scheme page will be missing</li>
     </ul>
   </WarningText>
-</FormElement>
-
-<Loading {loading} />
+  <SecondaryButton on:click={() => (open = false)}>Close</SecondaryButton>
+</Modal>