Add new claymorphic component library

src/app/components/EventInfo.svelte

@@ -8,15 +8,16 @@
   import FileText from "@assets/icons/file-text.svg?dataurl"
   import Copy from "@assets/icons/copy.svg?dataurl"
   import UserCircle from "@assets/icons/user-circle.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import FieldInline from "@lib/components/FieldInline.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import Icon from "@lib/components2/Icon.svelte"
+  import FieldInline from "@lib/components2/FieldInline.svelte"
+  import Button from "@lib/components2/Button.svelte"
+  import Badge from "@lib/components2/Badge.svelte"
+  import Modal from "@lib/components2/Modal.svelte"
+  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
   import {clip} from "@app/toast"
 
   type Props = {
@@ -60,13 +61,13 @@
         <p>Event Link</p>
       {/snippet}
       {#snippet input()}
-        <label class="input input-bordered flex w-full items-center gap-2">
+        <div class="input-cl input-cl-group w-full">
           <Icon icon={FileText} />
-          <input type="text" class="ellipsize min-w-0 grow" value={nevent1} />
+          <input type="text" class="input-cl-bare overflow-hidden text-ellipsis" value={nevent1} />
           <Button onclick={copyLink} class="flex items-center">
             <Icon icon={Copy} />
           </Button>
-        </label>
+        </div>
       {/snippet}
     </FieldInline>
     <FieldInline>
@@ -74,13 +75,13 @@
         <p>Author Pubkey</p>
       {/snippet}
       {#snippet input()}
-        <label class="input input-bordered flex w-full items-center gap-2">
+        <div class="input-cl input-cl-group w-full">
           <Icon icon={UserCircle} />
-          <input type="text" class="ellipsize min-w-0 grow" value={npub1} />
+          <input type="text" class="input-cl-bare overflow-hidden text-ellipsis" value={npub1} />
           <Button onclick={copyPubkey} class="flex items-center">
             <Icon icon={Copy} />
           </Button>
-        </label>
+        </div>
       {/snippet}
     </FieldInline>
     {#if !url && seenOn.size > 0}
@@ -91,24 +92,25 @@
         {#snippet input()}
           <div class="flex flex-wrap gap-2">
             {#each seenOn as url, i (url)}
-              <span class="bg-alt badge flex gap-1">
+              <Badge>
                 {displayRelayUrl(url)}
-              </span>
+              </Badge>
             {/each}
           </div>
         {/snippet}
       </FieldInline>
     {/if}
     <div class="relative">
-      <pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre>
+      <pre
+        class="cl-surface-alt cl-border overflow-auto rounded-2xl p-4 text-xs"><code>{json}</code></pre>
       <p class="absolute right-2 top-2 flex grow items-center justify-between">
-        <Button onclick={copyJson} class="btn btn-neutral btn-sm flex items-center">
+        <Button variant="secondary" size="sm" onclick={copyJson} class="flex items-center">
           <Icon icon={Copy} /> Copy
         </Button>
       </p>
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-primary grow" onclick={() => history.back()}>Got it</Button>
+    <Button variant="primary" class="grow" onclick={() => history.back()}>Got it</Button>
   </ModalFooter>
 </Modal>