Add new claymorphic component library

src/app/components/PollCreate.svelte

@@ -7,18 +7,22 @@
   import HamburgerMenu from "@assets/icons/hamburger-menu.svg?dataurl"
   import PlusCircle from "@assets/icons/add-circle.svg?dataurl"
   import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Field from "@lib/components/Field.svelte"
-  import FieldInline from "@lib/components/FieldInline.svelte"
-  import DateTimeInput from "@lib/components/DateTimeInput.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
+  import Icon from "@lib/components2/Icon.svelte"
+  import Col from "@lib/components2/Col.svelte"
+  import Row from "@lib/components2/Row.svelte"
+  import Field from "@lib/components2/Field.svelte"
+  import FieldInline from "@lib/components2/FieldInline.svelte"
+  import Input from "@lib/components2/Input.svelte"
+  import Select from "@lib/components2/Select.svelte"
+  import DateTimeInput from "@lib/components2/DateTimeInput.svelte"
+  import Button from "@lib/components2/Button.svelte"
+  import Spinner from "@lib/components2/Spinner.svelte"
+  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import Modal from "@lib/components2/Modal.svelte"
+  import ModalBody from "@lib/components2/ModalBody.svelte"
   import {pushToast} from "@app/toast"
   import {PROTECTED, publishRoomQuote} from "@app/groups"
   import {canEnforceNip70} from "@app/relays"
@@ -188,21 +192,18 @@
       <ModalTitle>Create a Poll</ModalTitle>
       <ModalSubtitle>Ask a question and collect votes right in the feed.</ModalSubtitle>
     </ModalHeader>
-    <div class="col-8 relative">
+    <Col gap={8} class="relative">
       <Field>
         {#snippet label()}
           <p>Question*</p>
         {/snippet}
         {#snippet input()}
-          <label class="input input-bordered flex w-full items-center gap-2">
-            <!-- svelte-ignore a11y_autofocus -->
-            <input
-              autofocus={!isMobile}
-              bind:value={title}
-              class="grow"
-              type="text"
-              placeholder="What would you like to ask?" />
-          </label>
+          <!-- svelte-ignore a11y_autofocus -->
+          <Input
+            autofocus={!isMobile}
+            bind:value={title}
+            type="text"
+            placeholder="What would you like to ask?" />
         {/snippet}
       </Field>
 
@@ -211,7 +212,7 @@
           <p>Options*</p>
         {/snippet}
         {#snippet input()}
-          <div class="flex flex-col gap-2" role="list">
+          <Col gap={2} role="list">
             {#each options as option, index (option.id)}
               <div
                 class="flex items-center gap-2"
@@ -224,37 +225,34 @@
                 <div class="cursor-move opacity-70" aria-label="Drag handle">
                   <Icon icon={HamburgerMenu} size={4} />
                 </div>
-                <label class="input input-bordered flex w-full items-center gap-2">
-                  <input
-                    value={option.value}
-                    class="grow"
-                    type="text"
-                    placeholder={`Option ${index + 1}`}
-                    oninput={e => updateOption(option.id, e.currentTarget.value)} />
-                </label>
-                <Button class="btn btn-ghost btn-sm" onclick={() => removeOption(option.id)}>
+                <Input
+                  value={option.value}
+                  type="text"
+                  placeholder={`Option ${index + 1}`}
+                  oninput={e => updateOption(option.id, e.currentTarget.value)} />
+                <Button variant="ghost" size="sm" onclick={() => removeOption(option.id)}>
                   <Icon icon={MinusCircle} size={4} />
                 </Button>
               </div>
             {/each}
-            <Button class="btn btn-outline btn-sm self-end" onclick={addOption}>
+            <Button variant="secondary" size="sm" class="self-end" onclick={addOption}>
               <Icon icon={PlusCircle} size={4} />
               Add option
             </Button>
-          </div>
+          </Col>
         {/snippet}
       </Field>
 
-      <div class="flex flex-col gap-2">
+      <Col gap={2}>
         <FieldInline>
           {#snippet label()}
             Poll type
           {/snippet}
           {#snippet input()}
-            <select class="select select-bordered w-full max-w-xs" bind:value={pollType}>
+            <Select class="w-full max-w-xs" bind:value={pollType}>
               <option value="singlechoice">Single choice</option>
               <option value="multiplechoice">Multiple choice</option>
-            </select>
+            </Select>
           {/snippet}
         </FieldInline>
         <FieldInline>
@@ -265,15 +263,15 @@
             <DateTimeInput bind:value={endsAt} />
           {/snippet}
         </FieldInline>
-      </div>
-    </div>
+      </Col>
+    </Col>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back} disabled={loading}>
+    <Button variant="ghost" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" variant="primary" disabled={loading}>
       <Spinner {loading}>Create Poll</Spinner>
     </Button>
   </ModalFooter>