Maybe get dialogs behaving properly

src/lib/components/Dialog.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import {noop} from '@welshman/lib'
+  import {fade, fly} from "@lib/transition"
+
+  export let onClose: any = noop
+</script>
+
+<div class="center fixed inset-0 z-modal">
+  <button
+    class="absolute inset-0 cursor-pointer bg-black opacity-50"
+    transition:fade
+    on:click={onClose} />
+  <div
+    class="card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
+    transition:fly={{duration: 300}}>
+    <slot />
+  </div>
+</div>

src/lib/components/Drawer.svelte

@@ -1,37 +1,17 @@
 <script lang="ts">
-  import {randomId} from "@welshman/lib"
+  import {fade, slide} from "@lib/transition"
 
-  const id = randomId()
-
-  let input: any
-  let label: any
-
-  export const open = () => {
-    if (!input.checked) {
-      label.click()
-    }
-  }
-
-  export const close = () => {
-    if (input.checked) {
-      label.click()
-    }
-  }
-
-  export const toggle = () => {
-    label.click()
-  }
+  export let onClose
 </script>
 
-<div class="drawer drawer-end">
-  <input {id} type="checkbox" class="drawer-toggle" bind:this={input} on:change />
-  <div class="drawer-content">
-    <label for={id} bind:this={label} />
-  </div>
-  <div class="drawer-side z-modal">
-    <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="menu h-full w-80 overflow-auto bg-base-200 p-0 text-base-content lg:w-96">
-      <slot />
-    </div>
+<div class="fixed inset-0 z-modal">
+  <button
+    class="absolute inset-0 cursor-pointer bg-black opacity-50"
+    transition:fade
+    on:click={onClose} />
+  <div
+    class="menu absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
+    transition:slide={{axis: "x", duration: 300}}>
+    <slot />
   </div>
 </div>

src/lib/components/ModalFooter.svelte

@@ -1,3 +1,3 @@
-<div class="mt-4 flex flex-row items-center justify-between gap-4">
+<div class="row-4 mt-4 items-center justify-between">
   <slot />
 </div>