Added new Drawer Component

src/components/PasswordField.astro

@@ -46,7 +46,7 @@ const inputCls = cn(
     "wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-border wr:rounded-lg wr:sm:text-sm wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
     sizeKls,
     "wr:pr-10", // space for eye button
-    p.error && "wr:border-danger wr:focus-visible:wr:ring-danger/40",
+    p.error && "wr:border-danger wr:focus-visible:ring-danger/40",
 );
 
 const containerId = `pf-${Math.random().toString(36).slice(2)}`;
@@ -104,7 +104,7 @@ const showChecklist = p.showChecklist ?? true;
         <button
             type="button"
             aria-label="Toggle password"
-            class="wr:absolute wr:inset-y-0 wr:right-0 wr:pr-3 wr:flex wr:items-center wr:text-muted-foreground hover:wr:text-foreground wr:z-20"
+            class="wr:absolute wr:inset-y-0 wr:right-0 wr:pr-3 wr:flex wr:items-center wr:text-muted-foreground wr:hover:text-foreground wr:z-20"
             onclick={`const i = this.previousElementSibling; i.type = i.type === 'password' ? 'text' : 'password';`}
             tabindex="-1"
         >
@@ -202,7 +202,7 @@ const showChecklist = p.showChecklist ?? true;
         p.description && (
             <p
                 id={descId}
-                class="wr:text-sm wr:text-gray-500 dark:wr:text-neutral-500"
+                class="wr:text-sm wr:text-gray-500 wr:dark:text-neutral-500"
             >
                 {p.description}
             </p>