From 5232c39769169a4d8b85acb3aeca74b3a536ea3b Mon Sep 17 00:00:00 2001
From: ChivukulaVirinchi <virinchi@gurujada.com>
Date: Fri, 18 Oct 2024 09:47:07 +0530
Subject: [PATCH] input & migrating from phx-feedback

---
 assets/tailwind.config.js                     |    6 -
 lib/library_web/components/core_components.ex |    2 +-
 lib/library_web/components/dropdown.ex        |    2 +-
 lib/library_web/components/error.ex           |   14 +
 lib/library_web/components/input.ex           | 1136 +++++++----------
 lib/library_web/components/inputnew.ex        |   94 ++
 lib/library_web/components/modal.ex           |  302 ++---
 lib/library_web/components/test               |  136 ++
 .../live/post_live/form_component.ex          |   21 +-
 .../live/post_live/index.html.heex            |  431 +++----
 mix.exs                                       |   22 +-
 mix.lock                                      |   76 +-
 12 files changed, 1071 insertions(+), 1171 deletions(-)
 create mode 100644 lib/library_web/components/error.ex
 create mode 100644 lib/library_web/components/inputnew.ex
 create mode 100644 lib/library_web/components/test

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 1d0b5a6..a7be954 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -32,12 +32,6 @@ module.exports = {
     //
     //     <div class="phx-click-loading:animate-ping">
     //
-    plugin(({ addVariant }) =>
-      addVariant("phx-no-feedback", [
-        ".phx-no-feedback&",
-        ".phx-no-feedback &",
-      ]),
-    ),
     plugin(({ addVariant }) =>
       addVariant("phx-click-loading", [
         ".phx-click-loading&",
diff --git a/lib/library_web/components/core_components.ex b/lib/library_web/components/core_components.ex
index 85a66b4..1d48780 100644
--- a/lib/library_web/components/core_components.ex
+++ b/lib/library_web/components/core_components.ex
@@ -368,13 +368,13 @@ defmodule LibraryWeb.CoreComponents do
         name={@name}
         id={@id}
         value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-        {@rest}
         class={[
           "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
           "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
           @errors == [] && "border-zinc-300 focus:border-zinc-400",
           @errors != [] && "border-rose-400 focus:border-rose-400"
         ]}
+        {@rest}
       />
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
diff --git a/lib/library_web/components/dropdown.ex b/lib/library_web/components/dropdown.ex
index 368fc26..74c3d41 100644
--- a/lib/library_web/components/dropdown.ex
+++ b/lib/library_web/components/dropdown.ex
@@ -1,7 +1,7 @@
 defmodule Dropdown do
   use Phoenix.Component
   slot :content, required: true
-  slot :trigger, requirded: true
+  slot :trigger, required: true
   attr :class, :string, default: ""
 
   attr :rest, :global,
diff --git a/lib/library_web/components/error.ex b/lib/library_web/components/error.ex
new file mode 100644
index 0000000..ed60144
--- /dev/null
+++ b/lib/library_web/components/error.ex
@@ -0,0 +1,14 @@
+defmodule Error do
+  use Phoenix.Component
+slot :inner_block, required: true
+
+  def error(assigns) do
+    ~H"""
+    <p class="flex gap-3 mt-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
+      <LibraryWeb.CoreComponents.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
+      <%= render_slot(@inner_block) %>
+    </p>
+    """
+  end
+
+end
diff --git a/lib/library_web/components/input.ex b/lib/library_web/components/input.ex
index 897e005..c80b37e 100644
--- a/lib/library_web/components/input.ex
+++ b/lib/library_web/components/input.ex
@@ -1,235 +1,25 @@
 defmodule Input do
   use Phoenix.Component
 
+ attr :id, :any, default: nil
+  attr :name, :any
+  attr :label, :string, default: nil
+  attr :value, :any
+
   attr :class, :string, default: ""
   attr :placeholder, :string, default: nil
-  #   #   # attr :type, :string, default: "text"
 
   attr :variant, :string,
-    default: "basic",
+    default: "default",
     values: [
-      "basic",
+      "default",
       "gray",
       "underline",
       "floating-basic",
       "floating-gray",
       "floating-underline"
     ]
-
-  #   #   attr :label, :string, default: ""
-  #   #   attr :value, :string, default: ""
-  slot :icon, required: false
-
-  #   #   def input(assigns) do
-  #   #     case assigns.variant do
-  #   #       "basic" ->
-  #   #         ~H"""
-  #   #         <label class="block mb-2 text-sm font-medium dark:text-white" for="input"><%= @label %></label>
-  #   #         <input
-  #   #           value={@value}
-  #   #           id="input"
-  #   #           placeholder={@placeholder}
-  #   #           class="block w-full px-4 py-3 text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
-  #   #           type="email"
-  #   #         />
-  #   #         """
-
-  #   #       "gray" ->
-  #   #         ~H"""
-  #   #         <div class="relative">
-  #   #           <label class="block mb-2 text-sm font-medium dark:text-white" for="input"><%= @label %></label>
-
-  #   #           <input
-  #   #             value={@value}
-  #   #             type={@type}
-  #   #             class={"block px-4 py-3 text-sm bg-gray-100 border-transparent rounded-lg peer ps-11 focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-transparent dark:text-gray-400 dark:focus:ring-gray-600 #{assigns.class}"}
-  #   #             placeholder={@placeholder}
-  #   #           />
-  #   #           <div class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
-  #   #             <%= if @icon do %>
-  #   #               <%= render_slot(@icon) %>
-  #   #             <% end %>
-  #   #           </div>
-  #   #         </div>
-  #   #         """
-
-  #   #       "underline" ->
-  #   #         ~H"""
-  #   #         <div class="relative">
-  #   #           <input
-  #   #             value={@value}
-  #   #             type={@type}
-  #   #             class={"block py-3 text-sm bg-transparent border-b-2 peer pe-0 ps-8 border-t-transparent border-x-transparent border-b-gray-200 focus:border-t-transparent focus:border-x-transparent focus:border-b-blue-500 focus:ring-0 dark:border-b-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 dark:focus:border-b-gray-600 #{assigns.class}"}
-  #   #             placeholder={@placeholder}
-  #   #           />
-  #   #           <div class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-2 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
-  #   #             <%= if @icon do %>
-  #   #               <%= render_slot(@icon) %>
-  #   #             <% end %>
-  #   #           </div>
-  #   #         </div>
-  #   #         """
-
-  #   #       "floating-basic" ->
-  #   #         ~H"""
-  #   #         <div class="relative">
-  #   #           <input
-  #   #             value={@value}
-  #   #             type={@type}
-  #   #             id="hs-floating-input-email"
-  #   #             class={"peer p-4 block w-full border-gray-200 rounded-lg text-sm placeholder:text-transparent focus:placeholder:text-gray-700 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 #{assigns.class}"}
-  #   #             placeholder={@placeholder}
-  #   #           />
-  #   #           <label
-  #   #             for="hs-floating-input-email"
-  #   #             class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
-  #   #         peer-focus:text-xs
-  #   #         peer-focus:-translate-y-1.5
-  #   #         peer-focus:text-gray-500
-  #   #         peer-[:not(:placeholder-shown)]:text-xs
-  #   #         peer-[:not(:placeholder-shown)]:-translate-y-1.5
-  #   #         peer-[:not(:placeholder-shown)]:text-gray-500"
-  #   #           >
-  #   #             Email
-  #   #           </label>
-  #   #         </div>
-  #   #         """
-
-  #   #       "floating-gray" ->
-  #   #         ~H"""
-  #   #         <div class="relative">
-  #   #           <input
-  #   #             value={@value}
-  #   #             type={@type}
-  #   #             id="hs-floating-gray-input-email"
-  #   #             class={"peer p-4 block w-full bg-gray-100 border-transparent rounded-lg text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-transparent dark:text-gray-400 dark:focus:ring-gray-600
-  #   #         focus:pt-6
-  #   #         focus:pb-2
-  #   #         [&:not(:placeholder-shown)]:pt-6
-  #   #         [&:not(:placeholder-shown)]:pb-2
-  #   #         autofill:pt-6
-  #   #         autofill:pb-2 #{assigns.class}"}
-  #   #             placeholder={@placeholder}
-  #   #           />
-  #   #           <label
-  #   #             for="hs-floating-gray-input-email"
-  #   #             class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
-  #   #         peer-focus:text-xs
-  #   #         peer-focus:-translate-y-1.5
-  #   #         peer-focus:text-gray-500
-  #   #         peer-[:not(:placeholder-shown)]:text-xs
-  #   #         peer-[:not(:placeholder-shown)]:-translate-y-1.5
-  #   #         peer-[:not(:placeholder-shown)]:text-gray-500"
-  #   #           >
-  #   #             Email
-  #   #           </label>
-  #   #         </div>
-  #   #         """
-
-  #   #       "floating-underline" ->
-  #   #         ~H"""
-  #   #         <div class="relative">
-  #   #           <input
-  #   #             value={@value}
-  #   #             type={@type}
-  #   #             id="hs-floating-underline-input-email"
-  #   #             class={"peer py-4 px-0 block w-full bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-gray-200 text-sm placeholder:text-transparent focus:border-t-transparent focus:border-x-transparent focus:border-b-blue-500 focus:ring-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 dark:focus:border-b-gray-600
-  #   #         focus:pt-6
-  #   #         focus:pb-2
-  #   #         [&:not(:placeholder-shown)]:pt-6
-  #   #         [&:not(:placeholder-shown)]:pb-2
-  #   #         autofill:pt-6
-  #   #         autofill:pb-2 #{assigns.class}"}
-  #   #             placeholder={@placeholder}
-  #   #           />
-  #   #           <label
-  #   #             for="hs-floating-underline-input-email"
-  #   #             class="absolute top-0 start-0 py-4 px-0 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
-  #   #         peer-focus:text-xs
-  #   #         peer-focus:-translate-y-1.5
-  #   #         peer-focus:text-gray-500
-  #   #         peer-[:not(:placeholder-shown)]:text-xs
-  #   #         peer-[:not(:placeholder-shown)]:-translate-y-1.5
-  #   #         peer-[:not(:placeholder-shown)]:text-gray-500"
-  #   #           >
-  #   #             Email
-  #   #           </label>
-  #   #         </div>
-  #   #         """
-  #   #     end
-  #   #   end
-
-  #   This
-  #   is
-  #   v1
-  #   !
-  #   !
-  #   attr :id, :any, default: nil
-  #   attr :name, :string, default: ""
-  #   attr :label, :string, default: nil
-  #   attr :value, :string, default: ""
-
-  #   attr :type, :string,
-  #     default: "text",
-  #     values: ~w(checkbox color date datetime-local email file hidden month number password
-  #                range radio search select tel text textarea time url week)
-
-  #   attr :field, Phoenix.HTML.FormField,
-  #     doc: "a form field struct retrieved from the form, for example: @form[:email]"
-
-  #   attr :errors, :list, default: []
-  #   # attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
-  #   # attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
-  #   # attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
-  #   # attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
-
-  #   attr :rest, :global,
-  #     include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
-  #                 multiple pattern placeholder readonly required rows size step)
-
-  #   def input(assigns) do
-  #     ~H"""
-  #     <div phx-feedback-for={@name}>
-  #       <.label for={@id}><%= @label %></.label>
-  #       <input
-  #         type={@type}
-  #         name={@name}
-  #         id={@id}
-  #         value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-  #         class={[
-  #           "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
-  #           "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
-  #           @errors == [] && "border-zinc-300 focus:border-zinc-400",
-  #           @errors != [] && "border-rose-400 focus:border-rose-400"
-  #         ]}
-  #       />
-  #       <.error :for={msg <- @errors}><%= msg %></.error>
-  #     </div>
-  #     """
-  #   end
-
-  #   def label(assigns) do
-  #     ~H"""
-  #     <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
-  #       <%= render_slot(@inner_block) %>
-  #     </label>
-  #     """
-  #   end
-
-  #   def error(assigns) do
-  #     ~H"""
-  #     <p class="flex gap-3 mt-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
-  #       <%!-- <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" /> --%>
-  #       <%= render_slot(@inner_block) %>
-  #     </p>
-  #     """
-  #   end
-  # end
-
-  attr :id, :any, default: nil
-  attr :name, :any
-  attr :label, :string, default: nil
-  attr :value, :any
+  attr :icon, :string, default: "hero-"
 
   attr :type, :string,
     default: "text",
@@ -253,34 +43,18 @@ defmodule Input do
   # HAVE TO INCLUDE @REST, @FORM AND @DISABLED
 
   @error_classes "border-red-500 focus:border-red-500 focus:ring-red-500"
-  @no_error_classes "border-teal-500 focus:border-green-500 focus:ring-green-500"
+  @no_error_classes "border-teal-500 focus:border-teal-500 focus:ring-teal-500"
   attr :error_classes, :string, default: @error_classes
   attr :no_error_classes, :string, default: @no_error_classes
-  # def input(assigns) do
-  #   ~H"""
-  #   <div phx-feedback-for={@name}>
-  #     <.label for={@id}><%= @label %></.label>
-  #     <input
-  #       type={@type}
-  #       name={@name}
-  #       id={@id}
-  #       value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-  #       class={[
-  #         "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
-  #         "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
-  #         @errors == [] && "border-zinc-300 focus:border-zinc-400",
-  #         @errors != [] && "border-rose-400 focus:border-rose-400"
-  #       ]}
-  #     />
-  #     <.error :for={msg <- @errors}><%= msg %></.error>
-  #   </div>
-  #   """
-  # end
+  attr :helper, :string, default: ""
+  attr :msg, :string, default: "Looks good!"
+  attr :hint, :string, default: ""
 
   def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
     assigns
     |> assign(field: nil, id: assigns.id || field.id)
-    |> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
+    |> assign(:errors, Enum.map(errors, &translate_error(&1)))
     |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
     |> assign_new(:value, fn -> field.value end)
     |> input()
@@ -468,447 +242,473 @@ defmodule Input do
     """
   end
 
-  def input(assigns) do
-    case assigns.variant do
-      "basic" ->
-        ~H"""
-        <div phx-feedback-for={@name}>
-          <label for={@id} class="block mb-2 text-sm font-medium dark:text-white"><%= @label %></label>
-          <div class="relative">
-            <input
-              type={@type}
-              name={@name}
-              id={@id}
-              value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-              {@rest}
-              class={[
-                "py-3 px-4 block w-full rounded-lg text-sm dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-blue-500 phx-no-feedback:focus:ring-blue-500 #{assigns.class}",
-                @errors == [] &&
-                  @no_error_classes,
-                @errors != [] &&
-                  @error_classes
-              ]}
-            />
-            <div
-              :if={@errors != []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-5 h-5 text-red-500"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
-                  x1="12"
-                  x2="12.01"
-                  y1="16"
-                  y2="16"
-                />
-              </svg>
-            </div>
-
-            <div
-              :if={@errors == []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-4 h-4 text-green-500"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            </div>
-          </div>
-          <.error :for={msg <- @errors}>
-            <%= msg %>
-          </.error>
-        </div>
-        """
-
-      "gray" ->
-        ~H"""
-        <div phx-feedback-for={@name}>
-          <label class="block mb-2 text-sm font-medium dark:text-white" for={@id}><%= @label %></label>
-          <div class="relative">
-            <input
-              value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-              id={@id}
-              name={@name}
-              type={@type}
-              class={[
-                "w-full block px-4 py-3 text-sm border-transparent rounded-lg focus:ring-0 phx-no-feedback:focus:border-blue-500 phx-no-feedback:focus:ring-blue-500 phx-no-feedback:bg-gray-100 dark:bg-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 #{assigns.class}",
-                @icon && "ps-11",
-                @errors == [] &&
-                  "bg-green-100/75",
-                @errors != [] &&
-                  "bg-red-100/50"
-              ]}
-              {@rest}
+  def input(%{variant: "default"} = assigns) do
+    ~H"""
+    <div phx-feedback-for={@name}>
+      <label for={@id} class="block mb-2 text-sm font-medium dark:text-white"><%= @label %></label>
+      <div class="relative">
+        <input
+          type={@type}
+          name={@name}
+          id={@id}
+          placeholder="hi"
+          value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+          {@rest}
+          class={[
+            "py-3 px-4 block w-full rounded-lg text-sm
+            disabled:opacity-50 disabled:pointer-events-none
+            dark:bg-neutral-900 dark:text-neutral-400 dark:placeholder-neutral-500
+            phx-no-feedback:dark:focus:ring-neutral-600 phx-no-feedback:dark:border-neutral-700
+            phx-no-feedback:border-gray-200 phx-no-feedback:focus:border-blue-500
+            phx-no-feedback:focus:ring-blue-500 #{@class}",
+            @errors == [] &&
+              @no_error_classes,
+            @errors != [] &&
+              @error_classes
+          ]}
+        />
+        <div
+          :if={@errors != []}
+          class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-red-500"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
+              x1="12"
+              x2="12.01"
+              y1="16"
+              y2="16"
             />
-            <div
-              :if={@icon}
-              class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none"
-            >
-              <%= if @icon do %>
-                <%= render_slot(@icon) %>
-              <% end %>
-            </div>
-            <div
-              :if={@errors != []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-5 h-5 text-red-500"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
-                  x1="12"
-                  x2="12.01"
-                  y1="16"
-                  y2="16"
-                />
-              </svg>
-            </div>
-
-            <div
-              :if={@errors == []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-4 h-4 text-green-500"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            </div>
-          </div>
-          <.error :for={msg <- @errors}>
-            <%= msg %>
-          </.error>
+          </svg>
         </div>
-        """
-
-      "underline" ->
-        ~H"""
-        <div phx-feedback-for={@name} class="relative">
-          <input
-            value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-            id={@id}
-            {@rest}
-            name={@name}
-            type={@type}
-            class={[
-              "w-full block py-3 text-sm bg-transparent border-b-2 peer pe-0 ps-8 border-t-transparent border-x-transparent phx-no-feedback:border-b-gray-200 focus:border-t-transparent focus:border-x-transparent phx-no-feedback:focus:border-b-blue-500 focus:ring-0 dark:border-b-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 dark:focus:border-b-gray-600 #{assigns.class}",
-              @errors == [] &&
-                "bg-green-100/75 border-b-green-300",
-              @errors != [] &&
-                "bg-red-100/50 border-b-red-400"
-            ]}
-          />
-          <div class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-2 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
-            <%= if @icon do %>
-              <%= render_slot(@icon) %>
-            <% end %>
-          </div>
-          <div
-            :if={@errors != []}
-            class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-          >
-            <svg
-              class="flex-shrink-0 w-5 h-5 text-red-500"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
-                x1="12"
-                x2="12.01"
-                y1="16"
-                y2="16"
-              />
-            </svg>
-          </div>
 
-          <div
-            :if={@errors == []}
-            class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+        <div
+          :if={@errors == []}
+          class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+        >
+          <svg
+            class="flex-shrink-0 w-4 h-4 text-teal-500"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           >
-            <svg
-              class="flex-shrink-0 w-4 h-4 text-green-500"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <polyline points="20 6 9 17 4 12" />
-            </svg>
-          </div>
-          <.error :for={msg <- @errors}>
-            <%= msg %>
-          </.error>
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
         </div>
-        """
+      </div>
+      <.error :for={msg <- @errors}>
+        <%= msg %>
+      </.error>
+      <%= if @errors == [] do %>
+
+        <p class="text-sm text-teal-600 mt-2 phx-no-feedback:hidden" id="hs-validation-name-success-helper">Looks good!</p>
+        <% end %>
+    </div>
+    """
+  end
 
-      "floating-basic" ->
-        ~H"""
-        <div phx-feedback-for={@name}>
-          <div class="relative">
-            <input
-              value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-              id={@id}
-              {@rest}
-              name={@name}
-              type={@type}
-              placeholder={@placeholder}
-              class={[
-                "peer p-4 block w-full border-1 focus:ring-0 phx-no-feedback:border-gray-200 phx-no-feedback:bg-white rounded-lg text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 #{assigns.class}",
-                @errors == [] &&
-                  "border-green-500",
-                @errors != [] &&
-                  "border-red-500"
-              ]}
-            />
-            <label
-              for={@id}
-              class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
-            >
-              <%= @label %>
-            </label>
-            <div
-              :if={@errors != []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-5 h-5 text-red-500"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
-                  x1="12"
-                  x2="12.01"
-                  y1="16"
-                  y2="16"
-                />
-              </svg>
-            </div>
-
-            <div
-              :if={@errors == []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-4 h-4 text-green-500"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            </div>
-          </div>
-          <.error :for={msg <- @errors}>
-            <%= msg %>
-          </.error>
+  def input(%{variant: "gray"} = assigns) do
+    ~H"""
+    <div phx-feedback-for={@name}>
+    <div class="flex justify-between">
+      <label class="block mb-2 text-sm font-medium dark:text-white" for={@id}><%= @label %></label>
+        <span :if={@hint} class="block mb-2 text-sm text-gray-500 dark:text-neutral-500"> <%= @hint %> </span>
+    </div>
+      <div class="relative">
+        <input
+          value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+          id={@id}
+          name={@name}
+          type={@type}
+          placeholder={@placeholder}
+          class={[
+            "peer disabled:opacity-50 disabled:pointer-events-none focus:border-blue-500
+            focus:ring-blue-500 border-transparent dark:placeholder-neutral-500 dark:focus:ring-neutral-600
+            w-full block px-4 py-3 text-sm rounded-lg phx-no-feedback:bg-gray-100
+            dark:bg-neutral-700 dark:text-neutral-400 #{@class}",
+            @icon && "ps-11", @errors == [] && "bg-teal-100/50", @errors != [] && "bg-red-100/50"
+          ]}
+          {@rest}
+        />
+        <div
+          :if={@icon}
+          class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none"
+        >
+          <LibraryWeb.CoreComponents.icon class="text-gray-500 dark:text-neutral-500" name={@icon} />
         </div>
-        """
-
-      "floating-gray" ->
-        ~H"""
-        <div phx-feedback-for={@name}>
-          <div class="relative">
-            <input
-              value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-              id={@id}
-              {@rest}
-              name={@name}
-              type={@type}
-              placeholder={@placeholder}
-              class={[
-                "peer p-4 block w-full bg-gray-100 border-transparent rounded-lg text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-transparent dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 #{assigns.class}",
-                @errors == [] &&
-                  "bg-green-100/75",
-                @errors != [] &&
-                  "bg-red-100/50"
-              ]}
+        <div
+          :if={@errors != []}
+          class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-red-500"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
+              x1="12"
+              x2="12.01"
+              y1="16"
+              y2="16"
             />
-            <label
-              for={@id}
-              class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
-            >
-              <%= @label %>
-            </label>
-            <div
-              :if={@errors != []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-5 h-5 text-red-500"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
-                  x1="12"
-                  x2="12.01"
-                  y1="16"
-                  y2="16"
-                />
-              </svg>
-            </div>
-
-            <div
-              :if={@errors == []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-4 h-4 text-green-500"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            </div>
-          </div>
-          <.error :for={msg <- @errors}>
-            <%= msg %>
-          </.error>
+          </svg>
         </div>
-        """
 
-      "floating-underline" ->
-        ~H"""
-        <div phx-no-feedback={@name}>
-          <div class="relative">
-            <input
-              value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-              id={@id}
-              {@rest}
-              name={@name}
-              type={@type}
-              placeholder={@placeholder}
-              class={[
-                "peer py-4 px-0 block w-full bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-gray-200 text-sm placeholder:text-transparent focus:border-t-transparent focus:border-x-transparent focus:border-b-blue-500 focus:ring-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 dark:focus:border-b-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 #{assigns.class}",
-                @errors == [] &&
-                  "border-b-green-500",
-                @errors != [] &&
-                  "border-b-red-500"
-              ]}
-            />
-            <label
-              for={@id}
-              class="absolute top-0 start-0 py-4 px-0 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
-            >
-              <%= @label %>
-            </label>
-            <div
-              :if={@errors != []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-5 h-5 text-red-500"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
-                  x1="12"
-                  x2="12.01"
-                  y1="16"
-                  y2="16"
-                />
-              </svg>
-            </div>
-
-            <div
-              :if={@errors == []}
-              class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
-            >
-              <svg
-                class="flex-shrink-0 w-4 h-4 text-green-500"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            </div>
-          </div>
-          <.error :for={msg <- @errors}>
-            <%= msg %>
-          </.error>
+        <div
+          :if={@errors == []}
+          class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+        >
+          <svg
+            class="flex-shrink-0 w-4 h-4 text-teal-500"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
         </div>
-        """
-    end
+      </div>
+      <p :if={Phoenix.Component.used_input?(@name) && @helper} class="mt-2 text-sm text-gray-500 dark:text-neutral-500" id="input-helper-text"> <%= @helper %> </p>
+      <.error :for={msg <- @errors}>
+        <%= msg %>
+      </.error>
+
+      <%= if @errors == [] do %>
+          <p class="text-sm text-teal-600 mt-2 phx-no-feedback:hidden"
+        id="success-helper"> <%= @msg %> </p>
+        <% end %>
+    </div>
+    """
   end
 
+  # def input(%{variant: "underline"} = assigns) do
+  #         ~H"""
+  #         <div phx-feedback-for={@name} class="relative">
+  #           <input
+  #             value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+  #             id={@id}
+  #             {@rest}
+  #             name={@name}
+  #             type={@type}
+  #             placeholder={@placeholder}
+  #             class={[
+  #               "w-full block py-3 text-sm bg-transparent border-b-2 peer pe-0 ps-8 border-t-transparent
+  #               border-x-transparent
+  #               phx-no-feedback:border-b-gray-200
+  #               focus:border-t-transparent focus:border-x-transparent
+  #               phx-no-feedback:focus:border-b-blue-500 focus:ring-0 focus:border-b-transperant focus:outline-none
+  #               dark:border-b-gray-700 dark:text-gray-400 dark:focus:ring-gray-600
+  #               dark:focus:border-b-gray-600 #{@class}",
+  #               @errors == [] &&
+  #                 "bg-green-100/75 border-b-green-300",
+  #               @errors != [] &&
+  #                 "bg-red-100/50 border-b-red-400"
+  #             ]}
+  #             {@rest}
+  #           />
+  #           <div class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-2 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
+  #           <LibraryWeb.CoreComponents.icon class="text-gray-500 dark:text-neutral-500" name={@icon} />
+  #           </div>
+  #           <div
+  #             :if={@errors != []}
+  #             class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+  #           >
+  #             <svg
+  #               class="flex-shrink-0 w-5 h-5 text-red-500"
+  #               xmlns="http://www.w3.org/2000/svg"
+  #               viewBox="0 0 24 24"
+  #               fill="none"
+  #               stroke="currentColor"
+  #               stroke-width="2"
+  #               stroke-linecap="round"
+  #               stroke-linejoin="round"
+  #             >
+  #               <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
+  #                 x1="12"
+  #                 x2="12.01"
+  #                 y1="16"
+  #                 y2="16"
+  #               />
+  #             </svg>
+  #           </div>
+
+  #           <div
+  #             :if={@errors == []}
+  #             class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+  #           >
+  #             <svg
+  #               class="flex-shrink-0 w-4 h-4 text-green-500"
+  #               xmlns="http://www.w3.org/2000/svg"
+  #               width="24"
+  #               height="24"
+  #               viewBox="0 0 24 24"
+  #               fill="none"
+  #               stroke="currentColor"
+  #               stroke-width="2"
+  #               stroke-linecap="round"
+  #               stroke-linejoin="round"
+  #             >
+  #               <polyline points="20 6 9 17 4 12" />
+  #             </svg>
+  #           </div>
+  #           <.error :for={msg <- @errors}>
+  #             <%= msg %>
+  #           </.error>
+  #         </div>
+  #         """
+  # end
+
+  # def input(assigns) do
+  #   case assigns.variant do
+  #     "floating-basic" ->
+  #       ~H"""
+  #       <div phx-feedback-for={@name}>
+  #         <div class="relative">
+  #           <input
+  #             value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+  #             id={@id}
+  #             {@rest}
+  #             name={@name}
+  #             type={@type}
+  #             placeholder={@placeholder}
+  #             class={[
+  #               "peer p-4 block w-full border-1 focus:ring-0 phx-no-feedback:border-gray-200 phx-no-feedback:bg-white rounded-lg text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 #{assigns.class}",
+  #               @errors == [] &&
+  #                 "border-green-500",
+  #               @errors != [] &&
+  #                 "border-red-500"
+  #             ]}
+  #           />
+  #           <label
+  #             for={@id}
+  #             class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
+  #           >
+  #             <%= @label %>
+  #           </label>
+  #           <div
+  #             :if={@errors != []}
+  #             class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+  #           >
+  #             <svg
+  #               class="flex-shrink-0 w-5 h-5 text-red-500"
+  #               xmlns="http://www.w3.org/2000/svg"
+  #               viewBox="0 0 24 24"
+  #               fill="none"
+  #               stroke="currentColor"
+  #               stroke-width="2"
+  #               stroke-linecap="round"
+  #               stroke-linejoin="round"
+  #             >
+  #               <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
+  #                 x1="12"
+  #                 x2="12.01"
+  #                 y1="16"
+  #                 y2="16"
+  #               />
+  #             </svg>
+  #           </div>
+
+  #           <div
+  #             :if={@errors == []}
+  #             class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+  #           >
+  #             <svg
+  #               class="flex-shrink-0 w-4 h-4 text-green-500"
+  #               xmlns="http://www.w3.org/2000/svg"
+  #               width="24"
+  #               height="24"
+  #               viewBox="0 0 24 24"
+  #               fill="none"
+  #               stroke="currentColor"
+  #               stroke-width="2"
+  #               stroke-linecap="round"
+  #               stroke-linejoin="round"
+  #             >
+  #               <polyline points="20 6 9 17 4 12" />
+  #             </svg>
+  #           </div>
+  #         </div>
+  #         <.error :for={msg <- @errors}>
+  #           <%= msg %>
+  #         </.error>
+  #       </div>
+  #       """
+
+  #     "floating-gray" ->
+  #       ~H"""
+  #       <div phx-feedback-for={@name}>
+  #         <div class="relative">
+  #           <input
+  #             value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+  #             id={@id}
+  #             {@rest}
+  #             name={@name}
+  #             type={@type}
+  #             placeholder={@placeholder}
+  #             class={[
+  #               "peer p-4 block w-full bg-gray-100 border-transparent rounded-lg text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-transparent dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 #{assigns.class}",
+  #               @errors == [] &&
+  #                 "bg-green-100/75",
+  #               @errors != [] &&
+  #                 "bg-red-100/50"
+  #             ]}
+  #           />
+  #           <label
+  #             for={@id}
+  #             class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
+  #           >
+  #             <%= @label %>
+  #           </label>
+  #           <div
+  #             :if={@errors != []}
+  #             class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+  #           >
+  #             <svg
+  #               class="flex-shrink-0 w-5 h-5 text-red-500"
+  #               xmlns="http://www.w3.org/2000/svg"
+  #               viewBox="0 0 24 24"
+  #               fill="none"
+  #               stroke="currentColor"
+  #               stroke-width="2"
+  #               stroke-linecap="round"
+  #               stroke-linejoin="round"
+  #             >
+  #               <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
+  #                 x1="12"
+  #                 x2="12.01"
+  #                 y1="16"
+  #                 y2="16"
+  #               />
+  #             </svg>
+  #           </div>
+
+  #           <div
+  #             :if={@errors == []}
+  #             class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+  #           >
+  #             <svg
+  #               class="flex-shrink-0 w-4 h-4 text-green-500"
+  #               xmlns="http://www.w3.org/2000/svg"
+  #               width="24"
+  #               height="24"
+  #               viewBox="0 0 24 24"
+  #               fill="none"
+  #               stroke="currentColor"
+  #               stroke-width="2"
+  #               stroke-linecap="round"
+  #               stroke-linejoin="round"
+  #             >
+  #               <polyline points="20 6 9 17 4 12" />
+  #             </svg>
+  #           </div>
+  #         </div>
+  #         <.error :for={msg <- @errors}>
+  #           <%= msg %>
+  #         </.error>
+  #       </div>
+  #       """
+
+  #     "floating-underline" ->
+  #       ~H"""
+  #       <div phx-no-feedback={@name}>
+  #         <div class="relative">
+  #           <input
+  #             value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+  #             id={@id}
+  #             {@rest}
+  #             name={@name}
+  #             type={@type}
+  #             placeholder={@placeholder}
+  #             class={[
+  #               "peer py-4 px-0 block w-full bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-gray-200 text-sm placeholder:text-transparent focus:border-t-transparent focus:border-x-transparent focus:border-b-blue-500 focus:ring-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 dark:focus:border-b-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 #{assigns.class}",
+  #               @errors == [] &&
+  #                 "border-b-green-500",
+  #               @errors != [] &&
+  #                 "border-b-red-500"
+  #             ]}
+  #           />
+  #           <label
+  #             for={@id}
+  #             class="absolute top-0 start-0 py-4 px-0 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
+  #           >
+  #             <%= @label %>
+  #           </label>
+  #           <div
+  #             :if={@errors != []}
+  #             class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+  #           >
+  #             <svg
+  #               class="flex-shrink-0 w-5 h-5 text-red-500"
+  #               xmlns="http://www.w3.org/2000/svg"
+  #               viewBox="0 0 24 24"
+  #               fill="none"
+  #               stroke="currentColor"
+  #               stroke-width="2"
+  #               stroke-linecap="round"
+  #               stroke-linejoin="round"
+  #             >
+  #               <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
+  #                 x1="12"
+  #                 x2="12.01"
+  #                 y1="16"
+  #                 y2="16"
+  #               />
+  #             </svg>
+  #           </div>
+
+  #           <div
+  #             :if={@errors == []}
+  #             class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+  #           >
+  #             <svg
+  #               class="flex-shrink-0 w-4 h-4 text-green-500"
+  #               xmlns="http://www.w3.org/2000/svg"
+  #               width="24"
+  #               height="24"
+  #               viewBox="0 0 24 24"
+  #               fill="none"
+  #               stroke="currentColor"
+  #               stroke-width="2"
+  #               stroke-linecap="round"
+  #               stroke-linejoin="round"
+  #             >
+  #               <polyline points="20 6 9 17 4 12" />
+  #             </svg>
+  #           </div>
+  #         </div>
+  #         <.error :for={msg <- @errors}>
+  #           <%= msg %>
+  #         </.error>
+  #       </div>
+  #       """
+  #   end
+  # end
+
   def label(assigns) do
     ~H"""
     <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
diff --git a/lib/library_web/components/inputnew.ex b/lib/library_web/components/inputnew.ex
new file mode 100644
index 0000000..b170a3d
--- /dev/null
+++ b/lib/library_web/components/inputnew.ex
@@ -0,0 +1,94 @@
+defmodule Library.Input do
+  use Phoenix.Component
+
+  attr :label, :string, default: ""
+  attr :variant, :string, values: ["gray", "default", "underlined"], default: "default"
+  attr :rest, :global,
+    include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
+                multiple pattern placeholder readonly required rows size step type)
+
+  def input(assigns = %{variant: "default"}) do
+    ~H"""
+    <div phx-feedback-for={@name}>
+      <label for={@id} class="block mb-2 text-sm font-medium dark:text-white"><%= @label %></label>
+      <div class="relative">
+        <input
+          type={@type}
+          name={@name}
+          id={@id}
+          value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+          {@rest}
+          class={[
+            "py-3 px-4 block w-full rounded-lg text-sm dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-blue-500 phx-no-feedback:focus:ring-blue-500 #{assigns.class}",
+            @errors == [] &&
+              @no_error_classes,
+            @errors != [] &&
+              @error_classes
+          ]}
+        />
+        <div
+          :if={@errors != []}
+          class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-red-500"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line
+              x1="12"
+              x2="12.01"
+              y1="16"
+              y2="16"
+            />
+          </svg>
+        </div>
+
+        <div
+          :if={@errors == []}
+          class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3 phx-no-feedback:hidden"
+        >
+          <svg
+            class="flex-shrink-0 w-4 h-4 text-green-500"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </div>
+      </div>
+      <Error.error :for={msg <- @errors}>
+        <%= msg %>
+      </Error.error>
+    </div>
+    """
+  end
+
+  def input(assigns = %{variant: "gray"}) do
+    ~H"""
+    <div class="relative">
+        <input type="email"
+        {@rest}
+        class="peer py-3 px-4 ps-11 block w-full bg-gray-100 border-transparent rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:border-transparent dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600" placeholder="Enter name" />
+        <div class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
+          <svg class="shrink-0 h-4 w-4 text-gray-500 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
+            <circle cx="12" cy="7" r="4"></circle>
+          </svg>
+        </div>
+      </div>
+    """
+  end
+end
diff --git a/lib/library_web/components/modal.ex b/lib/library_web/components/modal.ex
index 87da309..2ebb3c4 100644
--- a/lib/library_web/components/modal.ex
+++ b/lib/library_web/components/modal.ex
@@ -1,6 +1,6 @@
-defmodule Modal do
-  use Phoenix.Component
-  alias Phoenix.LiveView.JS
+# defmodule Modal do
+#   use Phoenix.Component
+#   alias Phoenix.LiveView.JS
 
   #   attr :class, :string, default: ""
   #   attr :id, :string, default: ""
@@ -44,151 +44,151 @@ defmodule Modal do
   #     |> JS.focus_first(to: "##{id} .pc-modal__box")
   #   end
 
-  attr :size, :string, default: "sm", values: ["sm", "md", "lg"]
-  slot :modal_header, required: true, attrs: [:class]
-  slot :modal_content, required: true, attrs: [:class]
-  slot :modal_footer, required: false, attrs: [:class]
-
-  def modal(assigns) do
-    ~H"""
-    <div
-      id={@id}
-      phx-mounted={@show && show_modal(@id)}
-      phx-remove={hide_modal(@id)}
-      data-cancel={JS.exec(@on_cancel, "phx-remove")}
-      class="relative z-50 hidden"
-    >
-      <div
-        id={"#{@id}-bg"}
-        class="fixed inset-0 transition-opacity bg-zinc-100/90"
-        aria-hidden="true"
-      />
-      <div
-        class="fixed inset-0 overflow-y-auto"
-        aria-labelledby={"#{@id}-title"}
-        aria-describedby={"#{@id}-description"}
-        role="dialog"
-        aria-modal="true"
-        tabindex="0"
-      >
-        <div class="flex items-center justify-center min-h-full">
-          <div class={"w-full p-2 m-3 #{size_class(assigns)}"}>
-            <.focus_wrap
-              id={"#{@id}-container"}
-              phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
-              phx-key="escape"
-              phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
-              class="relative hidden transition duration-500 bg-white shadow-lg shadow-zinc-700/10 ring-zinc-700/10 rounded-2xl ring-1
-              flex flex-col border shadow-sm rounded-xl pointer-events-auto dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]
-              "
-            >
-              <div class="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700">
-                <h3 class="font-bold text-gray-800 dark:text-white">
-                  <%= render_slot(@modal_header) %>
-                </h3>
-                <button
-                  phx-click={JS.exec("data-cancel", to: "##{@id}")}
-                  type="button"
-                  class="flex items-center justify-center text-sm font-semibold text-gray-600 border border-transparent rounded-full focus:outline-none size-7 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-                >
-                  <span class="sr-only">Close</span>
-                  <svg
-                    class="flex-shrink-0 p-1 size-4"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path d="M18 6 6 18" /><path d="m6 6 12 12" />
-                  </svg>
-                </button>
-              </div>
-              <div class={[
-                "p-4 overflow-y-auto",
-                Map.has_key?(hd(@modal_content), :class) && hd(@modal_content).class
-              ]}>
-                <%= render_slot(@modal_content) %>
-              </div>
-              <div class={[
-                "flex items-center justify-end px-4 py-3 border-t gap-x-2 dark:border-gray-700",
-                Map.has_key?(hd(@modal_footer), :class) && hd(@modal_footer).class
-              ]}>
-                <%= render_slot(@modal_footer) %>
-              </div>
-            </.focus_wrap>
-          </div>
-        </div>
-      </div>
-    </div>
-    """
-  end
-
-  def show_modal(js \\ %JS{}, id) when is_binary(id) do
-    js
-    |> JS.show(to: "##{id}")
-    |> JS.show(
-      to: "##{id}-bg",
-      transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
-    )
-    |> show("##{id}-container")
-    |> JS.add_class("overflow-hidden", to: "body")
-    |> JS.focus_first(to: "##{id}-content")
-  end
-
-  def hide_modal(js \\ %JS{}, id) do
-    js
-    |> JS.hide(
-      to: "##{id}-bg",
-      transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"}
-    )
-    |> hide("##{id}-container")
-    |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
-    |> JS.remove_class("overflow-hidden", to: "body")
-    |> JS.pop_focus()
-  end
-
-  attr :name, :string, required: true
-  attr :class, :string, default: nil
-
-  def icon(%{name: "hero-" <> _} = assigns) do
-    ~H"""
-    <span class={[@name, @class]} />
-    """
-  end
-
-  ## JS Commands
-
-  def show(js \\ %JS{}, selector) do
-    JS.show(js,
-      to: selector,
-      transition:
-        {"transition-all transform ease-out duration-300",
-         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-         "opacity-100 translate-y-0 sm:scale-100"}
-    )
-  end
-
-  def hide(js \\ %JS{}, selector) do
-    JS.hide(js,
-      to: selector,
-      time: 200,
-      transition:
-        {"transition-all transform ease-in duration-200",
-         "opacity-100 translate-y-0 sm:scale-100",
-         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
-    )
-  end
-
-  def size_class(assigns) do
-    case assigns.size do
-      "sm" -> "sm:max-w-lg sm:w-full sm:mx-auto"
-      "md" -> "md:max-w-2xl md:w-full md:mx-auto"
-      "lg" -> "lg:max-w-4xl lg:w-full lg:mx-auto"
-    end
-  end
-end
+#   attr :size, :string, default: "sm", values: ["sm", "md", "lg"]
+#   slot :modal_header, required: true, attrs: [:class]
+#   slot :modal_content, required: true, attrs: [:class]
+#   slot :modal_footer, required: false, attrs: [:class]
+
+#   def modal(assigns) do
+#     ~H"""
+#     <div
+#       id={@id}
+#       phx-mounted={@show && show_modal(@id)}
+#       phx-remove={hide_modal(@id)}
+#       data-cancel={JS.exec(@on_cancel, "phx-remove")}
+#       class="relative z-50 hidden"
+#     >
+#       <div
+#         id={"#{@id}-bg"}
+#         class="fixed inset-0 transition-opacity bg-zinc-100/90"
+#         aria-hidden="true"
+#       />
+#       <div
+#         class="fixed inset-0 overflow-y-auto"
+#         aria-labelledby={"#{@id}-title"}
+#         aria-describedby={"#{@id}-description"}
+#         role="dialog"
+#         aria-modal="true"
+#         tabindex="0"
+#       >
+#         <div class="flex items-center justify-center min-h-full">
+#           <div class={"w-full p-2 m-3 #{size_class(assigns)}"}>
+#             <.focus_wrap
+#               id={"#{@id}-container"}
+#               phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
+#               phx-key="escape"
+#               phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
+#               class="relative hidden transition duration-500 bg-white shadow-lg shadow-zinc-700/10 ring-zinc-700/10 rounded-2xl ring-1
+#               flex flex-col border shadow-sm rounded-xl pointer-events-auto dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]
+#               "
+#             >
+#               <div class="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700">
+#                 <h3 class="font-bold text-gray-800 dark:text-white">
+#                   <%= render_slot(@modal_header) %>
+#                 </h3>
+#                 <button
+#                   phx-click={JS.exec("data-cancel", to: "##{@id}")}
+#                   type="button"
+#                   class="flex items-center justify-center text-sm font-semibold text-gray-600 border border-transparent rounded-full focus:outline-none size-7 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+#                 >
+#                   <span class="sr-only">Close</span>
+#                   <svg
+#                     class="flex-shrink-0 p-1 size-4"
+#                     xmlns="http://www.w3.org/2000/svg"
+#                     width="24"
+#                     height="24"
+#                     viewBox="0 0 24 24"
+#                     fill="none"
+#                     stroke="currentColor"
+#                     stroke-width="2"
+#                     stroke-linecap="round"
+#                     stroke-linejoin="round"
+#                   >
+#                     <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+#                   </svg>
+#                 </button>
+#               </div>
+#               <div class={[
+#                 "p-4 overflow-y-auto",
+#                 Map.has_key?(hd(@modal_content), :class) && hd(@modal_content).class
+#               ]}>
+#                 <%= render_slot(@modal_content) %>
+#               </div>
+#               <div class={[
+#                 "flex items-center justify-end px-4 py-3 border-t gap-x-2 dark:border-gray-700",
+#                 Map.has_key?(hd(@modal_footer), :class) && hd(@modal_footer).class
+#               ]}>
+#                 <%= render_slot(@modal_footer) %>
+#               </div>
+#             </.focus_wrap>
+#           </div>
+#         </div>
+#       </div>
+#     </div>
+#     """
+#   end
+
+#   def show_modal(js \\ %JS{}, id) when is_binary(id) do
+#     js
+#     |> JS.show(to: "##{id}")
+#     |> JS.show(
+#       to: "##{id}-bg",
+#       transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
+#     )
+#     |> show("##{id}-container")
+#     |> JS.add_class("overflow-hidden", to: "body")
+#     |> JS.focus_first(to: "##{id}-content")
+#   end
+
+#   def hide_modal(js \\ %JS{}, id) do
+#     js
+#     |> JS.hide(
+#       to: "##{id}-bg",
+#       transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"}
+#     )
+#     |> hide("##{id}-container")
+#     |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
+#     |> JS.remove_class("overflow-hidden", to: "body")
+#     |> JS.pop_focus()
+#   end
+
+#   attr :name, :string, required: true
+#   attr :class, :string, default: nil
+
+#   def icon(%{name: "hero-" <> _} = assigns) do
+#     ~H"""
+#     <span class={[@name, @class]} />
+#     """
+#   end
+
+#   ## JS Commands
+
+#   def show(js \\ %JS{}, selector) do
+#     JS.show(js,
+#       to: selector,
+#       transition:
+#         {"transition-all transform ease-out duration-300",
+#          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+#          "opacity-100 translate-y-0 sm:scale-100"}
+#     )
+#   end
+
+#   def hide(js \\ %JS{}, selector) do
+#     JS.hide(js,
+#       to: selector,
+#       time: 200,
+#       transition:
+#         {"transition-all transform ease-in duration-200",
+#          "opacity-100 translate-y-0 sm:scale-100",
+#          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
+#     )
+#   end
+
+#   def size_class(assigns) do
+#     case assigns.size do
+#       "sm" -> "sm:max-w-lg sm:w-full sm:mx-auto"
+#       "md" -> "md:max-w-2xl md:w-full md:mx-auto"
+#       "lg" -> "lg:max-w-4xl lg:w-full lg:mx-auto"
+#     end
+#   end
+# end
diff --git a/lib/library_web/components/test b/lib/library_web/components/test
new file mode 100644
index 0000000..2f193ed
--- /dev/null
+++ b/lib/library_web/components/test
@@ -0,0 +1,136 @@
+<section>
+  <h1 class="text-2xl">Dropdown</h1>
+  <p class="text-gray-600">
+    Pass dropdown-toggle to the button and dropdown-icon to the icon. Additionally, pass transition, duration to the icon if you want to rotate it. Dont pass the icon at all if you dont want it.
+  </p>
+
+  <Dropdown.dropdown>
+    <:trigger>
+      <button
+        phx-hook="Tooltip"
+        data-tippy-content="Hi"
+        id="dropdown-button1"
+        type="button"
+        class=" py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
+        aria-haspopup="menu"
+        aria-expanded="false"
+        aria-label="Dropdown"
+      >
+        Actions
+        <svg
+          id="dropdown-icon1"
+          class="transition duration-300 size-4"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+    </:trigger>
+
+    <:content>
+      <DropdownItem.dropdownItem type="custom" label="Newsletter">
+        <h1>Heading</h1>
+      </DropdownItem.dropdownItem>
+      <div class="p-1 space-y-0.5">
+        <DropdownItem.dropdownItem type="title" label="Newsletter" />
+        <DropdownItem.dropdownItem label="Newsletter" />
+      </div>
+
+      <div class="p-1 space-y-0.5">
+        <DropdownItem.dropdownItem
+          icon="hero-exclamation-circle-mini"
+          label="Newsletter"
+          class="hover:text-red-500"
+          patch={~p"/"}
+        />
+        <DropdownItem.dropdownItem icon="hero-beaker" label="Newsletter" />
+      </div>
+      <div class="p-1 space-y-0.5">
+        <DropdownItem.dropdownItem type="title" label="Contacts" />
+        <%!-- <DropdownItem.dropdownItem kbd="shift + ," icon="hero-beaker" label="Newsletter" /> --%>
+        <DropdownItem.dropdownItem icon="hero-beaker" label="Newsletter" />
+      </div>
+    </:content>
+  </Dropdown.dropdown>
+</section>
+
+<section class="my-16">
+  <h1 class="text-2xl">Tabs</h1>
+  <p class="text-gray-600">Tabs make it easy to switch between different views.</p>
+  <.live_component module={Tabs} active_tab={@active_tab} id="1">
+    <:tab name="Home" icon="hero-home" badge="9" class="">
+      <div id="tabs-with-underline-1" role="tabpanel" aria-labelledby="tabs-with-underline-item-1">
+        <p class="text-gray-500 dark:text-neutral-400">
+          This is the <em class="font-semibold text-gray-800 dark:text-neutral-200">first</em>
+          item's tab body.
+        </p>
+      </div>
+    </:tab>
+    <:tab name="Profile" icon="hero-user">
+      <div
+        id="tabs-with-underline-2"
+        class=""
+        role="tabpanel"
+        aria-labelledby="tabs-with-underline-item-2"
+      >
+        <p class="text-gray-500 dark:text-neutral-400">
+          This is the <em class="font-semibold text-gray-800 dark:text-neutral-200">second</em>
+          item's tab body.
+        </p>
+      </div>
+    </:tab>
+    <:tab name="Settings" icon="hero-cog-6-tooth" badge="50+">
+      <div
+        id="tabs-with-underline-3"
+        class=""
+        role="tabpanel"
+        aria-labelledby="tabs-with-underline-item-3"
+      >
+        <p class="text-gray-500 dark:text-neutral-400">
+          This is the <em class="font-semibold text-gray-800 dark:text-neutral-200">third</em>
+          item's tab body.
+        </p>
+      </div>
+    </:tab>
+
+    <:tab name="Submarines">
+      <div
+        id="tabs-with-underline-4"
+        class=""
+        role="tabpanel"
+        aria-labelledby="tabs-with-underline-item-3"
+      >
+        <p class="text-gray-500 dark:text-neutral-400">
+          This is the <em class="font-semibold text-gray-800 dark:text-neutral-200">fourth</em>
+          item's tab body.
+        </p>
+      </div>
+    </:tab>
+  </.live_component>
+</section>
+
+<section class="my-16">
+  <h1 class="text-2xl">Breadcrumb</h1>
+  <Breadcrumb.breadcrumb
+    separator="slash"
+    class=""
+    links={[
+      %{
+        label: "Link 1",
+        to: "https://www.virinchi.me",
+        icon: "hero-building-office-2"
+      },
+      %{label: "Link 2", to: "/", icon: "hero-beaker"},
+      %{label: "Link 3", to: "", icon: "hero-beaker"},
+      %{label: "Link 4", to: "", icon: "hero-beaker"}
+    ]}
+  />
+</section>
diff --git a/lib/library_web/live/post_live/form_component.ex b/lib/library_web/live/post_live/form_component.ex
index b33bd66..be741cd 100644
--- a/lib/library_web/live/post_live/form_component.ex
+++ b/lib/library_web/live/post_live/form_component.ex
@@ -19,29 +19,14 @@ defmodule LibraryWeb.PostLive.FormComponent do
         name="form"
         phx-submit="save"
       >
-        <Input.input
+        <Input.input variant="gray" icon="hero-user" helper="We'll never share your details" hint="Optional"
           field={@form[:body]}
-          variant="floating-underline"
           placeholder="Body"
+          phx-debounce="500"
           type="text"
           label="Body"
         >
-          <:icon>
-            <svg
-              class="flex-shrink-0 w-4 h-4 text-gray-500"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
-            </svg>
-          </:icon>
+
         </Input.input>
 
         <.input field={@form[:likes_count]} type="number" label="Likes count" />
diff --git a/lib/library_web/live/post_live/index.html.heex b/lib/library_web/live/post_live/index.html.heex
index 67216ca..b2050a9 100644
--- a/lib/library_web/live/post_live/index.html.heex
+++ b/lib/library_web/live/post_live/index.html.heex
@@ -1,141 +1,3 @@
-<section>
-  <h1 class="text-2xl">Dropdown</h1>
-  <p class="text-gray-600">
-    Pass dropdown-toggle to the button and dropdown-icon to the icon. Additionally, pass transition, duration to the icon if you want to rotate it. Dont pass the icon at all if you dont want it.
-  </p>
-
-  <Dropdown.dropdown>
-    <:trigger>
-      <button
-        phx-hook="Tooltip"
-        data-tippy-content="Hi"
-        id="dropdown-button1"
-        type="button"
-        class=" py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
-        aria-haspopup="menu"
-        aria-expanded="false"
-        aria-label="Dropdown"
-      >
-        Actions
-        <svg
-          id="dropdown-icon1"
-          class="transition duration-300 size-4"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="m6 9 6 6 6-6" />
-        </svg>
-      </button>
-    </:trigger>
-
-    <:content>
-      <DropdownItem.dropdownItem type="custom" label="Newsletter">
-        <h1>Heading</h1>
-      </DropdownItem.dropdownItem>
-      <div class="p-1 space-y-0.5">
-        <DropdownItem.dropdownItem type="title" label="Newsletter" />
-        <DropdownItem.dropdownItem label="Newsletter" />
-      </div>
-
-      <div class="p-1 space-y-0.5">
-        <DropdownItem.dropdownItem
-          icon="hero-exclamation-circle-mini"
-          label="Newsletter"
-          class="hover:text-red-500"
-          patch={~p"/"}
-        />
-        <DropdownItem.dropdownItem icon="hero-beaker" label="Newsletter" />
-      </div>
-      <div class="p-1 space-y-0.5">
-        <DropdownItem.dropdownItem type="title" label="Contacts" />
-        <%!-- <DropdownItem.dropdownItem kbd="shift + ," icon="hero-beaker" label="Newsletter" /> --%>
-        <DropdownItem.dropdownItem icon="hero-beaker" label="Newsletter" />
-      </div>
-    </:content>
-  </Dropdown.dropdown>
-</section>
-
-<section class="my-16">
-  <h1 class="text-2xl">Tabs</h1>
-  <p class="text-gray-600">Tabs make it easy to switch between different views.</p>
-  <.live_component module={Tabs} active_tab={@active_tab} id="1">
-    <:tab name="Home" icon="hero-home" badge="9" class="">
-      <div id="tabs-with-underline-1" role="tabpanel" aria-labelledby="tabs-with-underline-item-1">
-        <p class="text-gray-500 dark:text-neutral-400">
-          This is the <em class="font-semibold text-gray-800 dark:text-neutral-200">first</em>
-          item's tab body.
-        </p>
-      </div>
-    </:tab>
-    <:tab name="Profile" icon="hero-user">
-      <div
-        id="tabs-with-underline-2"
-        class=""
-        role="tabpanel"
-        aria-labelledby="tabs-with-underline-item-2"
-      >
-        <p class="text-gray-500 dark:text-neutral-400">
-          This is the <em class="font-semibold text-gray-800 dark:text-neutral-200">second</em>
-          item's tab body.
-        </p>
-      </div>
-    </:tab>
-    <:tab name="Settings" icon="hero-cog-6-tooth" badge="50+">
-      <div
-        id="tabs-with-underline-3"
-        class=""
-        role="tabpanel"
-        aria-labelledby="tabs-with-underline-item-3"
-      >
-        <p class="text-gray-500 dark:text-neutral-400">
-          This is the <em class="font-semibold text-gray-800 dark:text-neutral-200">third</em>
-          item's tab body.
-        </p>
-      </div>
-    </:tab>
-
-    <:tab name="Submarines">
-      <div
-        id="tabs-with-underline-4"
-        class=""
-        role="tabpanel"
-        aria-labelledby="tabs-with-underline-item-3"
-      >
-        <p class="text-gray-500 dark:text-neutral-400">
-          This is the <em class="font-semibold text-gray-800 dark:text-neutral-200">fourth</em>
-          item's tab body.
-        </p>
-      </div>
-    </:tab>
-  </.live_component>
-</section>
-
-<section class="my-16">
-  <h1 class="text-2xl">Breadcrumb</h1>
-  <Breadcrumb.breadcrumb
-    separator="slash"
-    class=""
-    links={[
-      %{
-        label: "Link 1",
-        to: "https://www.virinchi.me",
-        icon: "hero-building-office-2"
-      },
-      %{label: "Link 2", to: "/", icon: "hero-beaker"},
-      %{label: "Link 3", to: "", icon: "hero-beaker"},
-      %{label: "Link 4", to: "", icon: "hero-beaker"}
-    ]}
-  />
-</section>
-
-<h1 class="text-2xl">Dark Mode</h1>
 <%!-- <div class="my-2">
   <h1 class="text-xl">Sizes</h1>
   <div class="flex space-x-2">
@@ -321,6 +183,151 @@
   Connected
 </Chip.chip> --%>
 
+<%!--
+
+<%!-- <div class="w-1/4">
+  <AvatarGroup.avatar_group
+    size="lg"
+    variant="grid"
+    limit={3}
+    color="primary"
+    avatars={[
+      %{
+        name: "Virinchi",
+        src:
+          "https://www.virinchi.me/img/virinchi_hu922a05f833375c24fc0b469acb202f7a_6128766_288x288_fill_q75_h2_box_center_2.webp"
+      },
+      %{
+        name: "Chivukula Virinchi",
+        src: ""
+      },
+      %{
+        name: "Virinchi",
+        src:
+          "https://www.virinchi.me/img/virinchi_hu922a05f833375c24fc0b469acb202f7a_6128766_288x288_fill_q75_h2_box_center_2.webp"
+      },
+      %{
+        name: "Virinchi",
+        src:
+          "https://www.virinchi.me/img/virinchi_hu922a05f833375c24fc0b469acb202f7a_6128766_288x288_fill_q75_h2_box_center_2.webp"
+      },
+      %{
+        name: "Virinchi",
+        src:
+          "https://www.virinchi.me/img/virinchi_hu922a05f833375c24fc0b469acb202f7a_6128766_288x288_fill_q75_h2_box_center_2.webp"
+      }
+    ]}
+  />
+</div>
+
+<Offcanvas.offcanvas class="absolute top-0" position="top">
+  <div class="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700">
+    <h3 class="font-bold text-gray-800 dark:text-white">
+      Offcanvas title
+    </h3>
+    <button
+      phx-click={Offcanvas.button_classes("top")}
+      type="button"
+      class="flex items-center justify-center text-sm font-semibold text-gray-800 border border-transparent rounded-full w-7 h-7 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+      data-hs-overlay="#hs-overlay-example"
+    >
+      <span class="sr-only">Close modal</span>
+      <svg
+        class="flex-shrink-0 w-4 h-4"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+      </svg>
+    </button>
+  </div>
+  <div class="p-4">
+    <p class="text-gray-800 dark:text-gray-400">
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea unde est voluptatibus praesentium. Ipsam veritatis adipisci necessitatibus nostrum alias natus nobis quis provident sunt! Minima harum animi impedit earum et.
+    </p>
+    <%!-- <.Button.button class="mt-2" color="primary">Click Me!</.Button.button>
+  </div>
+</Offcanvas.offcanvas>
+<Modal.modal
+  :if={@live_action in [:new]}
+  size="lg"
+  id="test"
+  show
+  on_cancel={JS.patch(~p"/posts")}
+>
+  <:modal_header>
+    Modal Title
+  </:modal_header>
+
+  <:modal_content>
+    <p class="text-gray-800">
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores quia commodi illum aliquid exercitationem magni cum facere itaque libero beatae culpa necessitatibus voluptatem officia laudantium saepe voluptas vitae, velit officiis!
+    </p>
+  </:modal_content>
+
+  <:modal_footer>
+    <button
+      type="button"
+      class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-800 bg-white border border-gray-200 rounded-lg shadow-sm gap-x-2 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+      data-hs-overlay="#hs-basic-modal"
+    >
+      Close
+    </button>
+    <button
+      type="button"
+      class="inline-flex items-center px-3 py-2 text-sm font-semibold text-white bg-blue-600 border border-transparent rounded-lg gap-x-2 hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+    >
+      Save changes
+    </button>
+  </:modal_footer>
+</Modal.modal> --%>
+
+<section>
+  <h1 class="text-2xl">Dark Mode</h1>
+
+  <button id="theme-toggle" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
+    <svg
+      id="theme-toggle-dark-icon"
+      class="w-5 h-5"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+    </svg>
+    <svg
+      id="theme-toggle-light-icon"
+      class="hidden w-5 h-5"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+      >
+      </path>
+    </svg>
+  </button>
+</section>
+<%!--
+<button
+  phx-hook="Tooltip"
+  data-tippy-content="<b>Lorem</b> ipsum dolor sit amet consecticur api"
+  data-tippy-class="rounded-md px-2.5 py-0.5 text-white bg-gray-700 text-xs"
+  id="b1"
+>
+  Ghost
+</button> --%>
+
 <%!-- <div class="my-4">
   <h1 class="text-lg">Inputs</h1>
   <h1 class="text-lg">Basic</h1>
@@ -434,8 +441,7 @@
   label="Message"
   value=""
 /> --%>
-
-<%!-- <.modal
+<.modal
   :if={@live_action in [:new, :edit]}
   id="post-modal"
   show
@@ -449,144 +455,7 @@
     post={@post}
     patch={~p"/posts"}
   />
-</.modal> --%
-
-<%!-- <div class="w-1/4">
-  <AvatarGroup.avatar_group
-    size="lg"
-    variant="grid"
-    limit={3}
-    color="primary"
-    avatars={[
-      %{
-        name: "Virinchi",
-        src:
-          "https://www.virinchi.me/img/virinchi_hu922a05f833375c24fc0b469acb202f7a_6128766_288x288_fill_q75_h2_box_center_2.webp"
-      },
-      %{
-        name: "Chivukula Virinchi",
-        src: ""
-      },
-      %{
-        name: "Virinchi",
-        src:
-          "https://www.virinchi.me/img/virinchi_hu922a05f833375c24fc0b469acb202f7a_6128766_288x288_fill_q75_h2_box_center_2.webp"
-      },
-      %{
-        name: "Virinchi",
-        src:
-          "https://www.virinchi.me/img/virinchi_hu922a05f833375c24fc0b469acb202f7a_6128766_288x288_fill_q75_h2_box_center_2.webp"
-      },
-      %{
-        name: "Virinchi",
-        src:
-          "https://www.virinchi.me/img/virinchi_hu922a05f833375c24fc0b469acb202f7a_6128766_288x288_fill_q75_h2_box_center_2.webp"
-      }
-    ]}
-  />
-</div>
-
-<Offcanvas.offcanvas class="absolute top-0" position="top">
-  <div class="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700">
-    <h3 class="font-bold text-gray-800 dark:text-white">
-      Offcanvas title
-    </h3>
-    <button
-      phx-click={Offcanvas.button_classes("top")}
-      type="button"
-      class="flex items-center justify-center text-sm font-semibold text-gray-800 border border-transparent rounded-full w-7 h-7 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-      data-hs-overlay="#hs-overlay-example"
-    >
-      <span class="sr-only">Close modal</span>
-      <svg
-        class="flex-shrink-0 w-4 h-4"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M18 6 6 18" /><path d="m6 6 12 12" />
-      </svg>
-    </button>
-  </div>
-  <div class="p-4">
-    <p class="text-gray-800 dark:text-gray-400">
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea unde est voluptatibus praesentium. Ipsam veritatis adipisci necessitatibus nostrum alias natus nobis quis provident sunt! Minima harum animi impedit earum et.
-    </p>
-    <%!-- <.Button.button class="mt-2" color="primary">Click Me!</.Button.button>
-  </div>
-</Offcanvas.offcanvas>
-<Modal.modal
-  :if={@live_action in [:new]}
-  size="lg"
-  id="test"
-  show
-  on_cancel={JS.patch(~p"/posts")}
->
-  <:modal_header>
-    Modal Title
-  </:modal_header>
-
-  <:modal_content>
-    <p class="text-gray-800">
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores quia commodi illum aliquid exercitationem magni cum facere itaque libero beatae culpa necessitatibus voluptatem officia laudantium saepe voluptas vitae, velit officiis!
-    </p>
-  </:modal_content>
-
-  <:modal_footer>
-    <button
-      type="button"
-      class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-800 bg-white border border-gray-200 rounded-lg shadow-sm gap-x-2 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-      data-hs-overlay="#hs-basic-modal"
-    >
-      Close
-    </button>
-    <button
-      type="button"
-      class="inline-flex items-center px-3 py-2 text-sm font-semibold text-white bg-blue-600 border border-transparent rounded-lg gap-x-2 hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-    >
-      Save changes
-    </button>
-  </:modal_footer>
-</Modal.modal> --%>
-
-<button id="theme-toggle" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
-  <svg
-    id="theme-toggle-dark-icon"
-    class="w-5 h-5"
-    fill="currentColor"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-  </svg>
-  <svg
-    id="theme-toggle-light-icon"
-    class="hidden w-5 h-5"
-    fill="currentColor"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-    >
-    </path>
-  </svg>
-</button>
-
-<%!--
-<button
-  phx-hook="Tooltip"
-  data-tippy-content="<b>Lorem</b> ipsum dolor sit amet consecticur api"
-  data-tippy-class="rounded-md px-2.5 py-0.5 text-white bg-gray-700 text-xs"
-  id="b1"
->
-  Ghost
-</button> --%>
+</.modal>
+<Input.input placeholder="Enter message" variant="gray" msg="Good!"
+type="text" icon="hero-user" id="id" name="pass" value=""
+label="Password" />
diff --git a/mix.exs b/mix.exs
index da82c06..e163297 100644
--- a/mix.exs
+++ b/mix.exs
@@ -32,23 +32,27 @@ defmodule Library.MixProject do
   # Type `mix help deps` for examples and options.
   defp deps do
     [
-      {:phoenix, "~> 1.7.11"},
-      {:phoenix_ecto, "~> 4.4"},
+      {:phoenix, "~> 1.7.14"},
+      {:phoenix_ecto, "~> 4.5"},
       {:ecto_sql, "~> 3.10"},
       {:postgrex, ">= 0.0.0"},
-      {:phoenix_html, "~> 3.3"},
+      {:phoenix_html, "~> 4.1"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
-      {:phoenix_live_view, "~> 0.20.6"},
+      # TODO bump on release to {:phoenix_live_view, "~> 1.0.0"},
+      {:phoenix_live_view, "~> 1.0.0-rc.1", override: true},
       {:floki, ">= 0.30.0", only: :test},
-      {:phoenix_live_dashboard, "~> 0.8.0"},
-      {:esbuild, "~> 0.7", runtime: Mix.env() == :dev},
-      {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},
-      {:swoosh, "~> 1.3"},
+      {:phoenix_live_dashboard, "~> 0.8.3"},
+      {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
+      {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
+      {:heroicons, github: "tailwindlabs/heroicons", tag: "v2.1.1", sparse: "optimized", app: false, compile: false, depth: 1},
+      {:swoosh, "~> 1.5"},
       {:finch, "~> 0.13"},
-      {:telemetry_metrics, "~> 0.6"},
+      {:telemetry_metrics, "~> 1.0"},
       {:telemetry_poller, "~> 1.0"},
       {:gettext, "~> 0.20"},
       {:jason, "~> 1.2"},
+      {:dns_cluster, "~> 0.1.1"},
+      {:bandit, "~> 1.5"},
       {:wallaby, "~> 0.30.6", [runtime: false, only: :test]},
       {:plug_cowboy, "~> 2.5"}
     ]
diff --git a/mix.lock b/mix.lock
index ba71006..805d1d8 100644
--- a/mix.lock
+++ b/mix.lock
@@ -1,54 +1,58 @@
 %{
-  "castore": {:hex, :castore, "1.0.5", "9eeebb394cc9a0f3ae56b813459f990abb0a3dedee1be6b27fdb50301930502f", [:mix], [], "hexpm", "8d7c597c3e4a64c395980882d4bca3cebb8d74197c590dc272cfd3b6a6310578"},
+  "bandit": {:hex, :bandit, "1.5.7", "6856b1e1df4f2b0cb3df1377eab7891bec2da6a7fd69dc78594ad3e152363a50", [:mix], [{:hpax, "~> 1.0.0", [hex: :hpax, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:thousand_island, "~> 1.0", [hex: :thousand_island, repo: "hexpm", optional: false]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "f2dd92ae87d2cbea2fa9aa1652db157b6cba6c405cb44d4f6dd87abba41371cd"},
+  "castore": {:hex, :castore, "1.0.9", "5cc77474afadf02c7c017823f460a17daa7908e991b0cc917febc90e466a375c", [:mix], [], "hexpm", "5ea956504f1ba6f2b4eb707061d8e17870de2bee95fb59d512872c2ef06925e7"},
   "certifi": {:hex, :certifi, "2.12.0", "2d1cca2ec95f59643862af91f001478c9863c2ac9cb6e2f89780bfd8de987329", [:rebar3], [], "hexpm", "ee68d85df22e554040cdb4be100f33873ac6051387baf6a8f6ce82272340ff1c"},
-  "cowboy": {:hex, :cowboy, "2.10.0", "ff9ffeff91dae4ae270dd975642997afe2a1179d94b1887863e43f681a203e26", [:make, :rebar3], [{:cowlib, "2.12.1", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "3afdccb7183cc6f143cb14d3cf51fa00e53db9ec80cdcd525482f5e99bc41d6b"},
+  "cowboy": {:hex, :cowboy, "2.12.0", "f276d521a1ff88b2b9b4c54d0e753da6c66dd7be6c9fca3d9418b561828a3731", [:make, :rebar3], [{:cowlib, "2.13.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "8a7abe6d183372ceb21caa2709bec928ab2b72e18a3911aa1771639bef82651e"},
   "cowboy_telemetry": {:hex, :cowboy_telemetry, "0.4.0", "f239f68b588efa7707abce16a84d0d2acf3a0f50571f8bb7f56a15865aae820c", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7d98bac1ee4565d31b62d59f8823dfd8356a169e7fcbb83831b8a5397404c9de"},
-  "cowlib": {:hex, :cowlib, "2.12.1", "a9fa9a625f1d2025fe6b462cb865881329b5caff8f1854d1cbc9f9533f00e1e1", [:make, :rebar3], [], "hexpm", "163b73f6367a7341b33c794c4e88e7dbfe6498ac42dcd69ef44c5bc5507c8db0"},
-  "db_connection": {:hex, :db_connection, "2.6.0", "77d835c472b5b67fc4f29556dee74bf511bbafecdcaf98c27d27fa5918152086", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "c2f992d15725e721ec7fbc1189d4ecdb8afef76648c746a8e1cad35e3b8a35f3"},
+  "cowlib": {:hex, :cowlib, "2.13.0", "db8f7505d8332d98ef50a3ef34b34c1afddec7506e4ee4dd4a3a266285d282ca", [:make, :rebar3], [], "hexpm", "e1e1284dc3fc030a64b1ad0d8382ae7e99da46c3246b815318a4b848873800a4"},
+  "db_connection": {:hex, :db_connection, "2.7.0", "b99faa9291bb09892c7da373bb82cba59aefa9b36300f6145c5f201c7adf48ec", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "dcf08f31b2701f857dfc787fbad78223d61a32204f217f15e881dd93e4bdd3ff"},
   "decimal": {:hex, :decimal, "2.1.1", "5611dca5d4b2c3dd497dec8f68751f1f1a54755e8ed2a966c2633cf885973ad6", [:mix], [], "hexpm", "53cfe5f497ed0e7771ae1a475575603d77425099ba5faef9394932b35020ffcc"},
-  "ecto": {:hex, :ecto, "3.11.1", "4b4972b717e7ca83d30121b12998f5fcdc62ba0ed4f20fd390f16f3270d85c3e", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "ebd3d3772cd0dfcd8d772659e41ed527c28b2a8bde4b00fe03e0463da0f1983b"},
-  "ecto_sql": {:hex, :ecto_sql, "3.11.1", "e9abf28ae27ef3916b43545f9578b4750956ccea444853606472089e7d169470", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.11.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.6.0", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.16.0 or ~> 0.17.0 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "ce14063ab3514424276e7e360108ad6c2308f6d88164a076aac8a387e1fea634"},
+  "dns_cluster": {:hex, :dns_cluster, "0.1.3", "0bc20a2c88ed6cc494f2964075c359f8c2d00e1bf25518a6a6c7fd277c9b0c66", [:mix], [], "hexpm", "46cb7c4a1b3e52c7ad4cbe33ca5079fbde4840dedeafca2baf77996c2da1bc33"},
+  "ecto": {:hex, :ecto, "3.12.4", "267c94d9f2969e6acc4dd5e3e3af5b05cdae89a4d549925f3008b2b7eb0b93c3", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "ef04e4101688a67d061e1b10d7bc1fbf00d1d13c17eef08b71d070ff9188f747"},
+  "ecto_sql": {:hex, :ecto_sql, "3.12.1", "c0d0d60e85d9ff4631f12bafa454bc392ce8b9ec83531a412c12a0d415a3a4d0", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.12", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.7", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.19 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "aff5b958a899762c5f09028c847569f7dfb9cc9d63bdb8133bff8a5546de6bf5"},
   "esbuild": {:hex, :esbuild, "0.8.1", "0cbf919f0eccb136d2eeef0df49c4acf55336de864e63594adcea3814f3edf41", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "25fc876a67c13cb0a776e7b5d7974851556baeda2085296c14ab48555ea7560f"},
-  "expo": {:hex, :expo, "0.5.1", "249e826a897cac48f591deba863b26c16682b43711dd15ee86b92f25eafd96d9", [:mix], [], "hexpm", "68a4233b0658a3d12ee00d27d37d856b1ba48607e7ce20fd376958d0ba6ce92b"},
-  "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
-  "finch": {:hex, :finch, "0.17.0", "17d06e1d44d891d20dbd437335eebe844e2426a0cd7e3a3e220b461127c73f70", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: false]}, {:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mint, "~> 1.3", [hex: :mint, repo: "hexpm", optional: false]}, {:nimble_options, "~> 0.4 or ~> 1.0", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:nimble_pool, "~> 0.2.6 or ~> 1.0", [hex: :nimble_pool, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "8d014a661bb6a437263d4b5abf0bcbd3cf0deb26b1e8596f2a271d22e48934c7"},
-  "floki": {:hex, :floki, "0.35.3", "0c8c6234aa71cb2b069cf801e8f8f30f8d096eb452c3dae2ccc409510ec32720", [:mix], [], "hexpm", "6d9f07f3fc76599f3b66c39f4a81ac62c8f4d9631140268db92aacad5d0e56d4"},
-  "gettext": {:hex, :gettext, "0.24.0", "6f4d90ac5f3111673cbefc4ebee96fe5f37a114861ab8c7b7d5b30a1108ce6d8", [:mix], [{:expo, "~> 0.5.1", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "bdf75cdfcbe9e4622dd18e034b227d77dd17f0f133853a1c73b97b3d6c770e8b"},
+  "expo": {:hex, :expo, "1.1.0", "f7b9ed7fb5745ebe1eeedf3d6f29226c5dd52897ac67c0f8af62a07e661e5c75", [:mix], [], "hexpm", "fbadf93f4700fb44c331362177bdca9eeb8097e8b0ef525c9cc501cb9917c960"},
+  "file_system": {:hex, :file_system, "1.0.1", "79e8ceaddb0416f8b8cd02a0127bdbababe7bf4a23d2a395b983c1f8b3f73edd", [:mix], [], "hexpm", "4414d1f38863ddf9120720cd976fce5bdde8e91d8283353f0e31850fa89feb9e"},
+  "finch": {:hex, :finch, "0.19.0", "c644641491ea854fc5c1bbaef36bfc764e3f08e7185e1f084e35e0672241b76d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mint, "~> 1.6.2 or ~> 1.7", [hex: :mint, repo: "hexpm", optional: false]}, {:nimble_options, "~> 0.4 or ~> 1.0", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:nimble_pool, "~> 1.1", [hex: :nimble_pool, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "fc5324ce209125d1e2fa0fcd2634601c52a787aff1cd33ee833664a5af4ea2b6"},
+  "floki": {:hex, :floki, "0.36.2", "a7da0193538c93f937714a6704369711998a51a6164a222d710ebd54020aa7a3", [:mix], [], "hexpm", "a8766c0bc92f074e5cb36c4f9961982eda84c5d2b8e979ca67f5c268ec8ed580"},
+  "gettext": {:hex, :gettext, "0.26.1", "38e14ea5dcf962d1fc9f361b63ea07c0ce715a8ef1f9e82d3dfb8e67e0416715", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "01ce56f188b9dc28780a52783d6529ad2bc7124f9744e571e1ee4ea88bf08734"},
   "hackney": {:hex, :hackney, "1.20.1", "8d97aec62ddddd757d128bfd1df6c5861093419f8f7a4223823537bad5d064e2", [:rebar3], [{:certifi, "~> 2.12.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~> 6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~> 1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~> 1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.4.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~> 1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "fe9094e5f1a2a2c0a7d10918fee36bfec0ec2a979994cff8cfe8058cd9af38e3"},
-  "hpax": {:hex, :hpax, "0.1.2", "09a75600d9d8bbd064cdd741f21fc06fc1f4cf3d0fcc335e5aa19be1a7235c84", [:mix], [], "hexpm", "2c87843d5a23f5f16748ebe77969880e29809580efdaccd615cd3bed628a8c13"},
+  "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "88ab3a0d790e6a47404cba02800a6b25d2afae50", [tag: "v2.1.1", sparse: "optimized", depth: 1]},
+  "hpax": {:hex, :hpax, "1.0.0", "28dcf54509fe2152a3d040e4e3df5b265dcb6cb532029ecbacf4ce52caea3fd2", [:mix], [], "hexpm", "7f1314731d711e2ca5fdc7fd361296593fc2542570b3105595bb0bc6d0fad601"},
   "httpoison": {:hex, :httpoison, "2.2.1", "87b7ed6d95db0389f7df02779644171d7319d319178f6680438167d7b69b1f3d", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "51364e6d2f429d80e14fe4b5f8e39719cacd03eb3f9a9286e61e216feac2d2df"},
   "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
-  "jason": {:hex, :jason, "1.4.1", "af1504e35f629ddcdd6addb3513c3853991f694921b1b9368b0bd32beb9f1b63", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "fbb01ecdfd565b56261302f7e1fcc27c4fb8f32d56eab74db621fc154604a7a1"},
+  "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
   "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"},
-  "mime": {:hex, :mime, "2.0.5", "dc34c8efd439abe6ae0343edbb8556f4d63f178594894720607772a041b04b02", [:mix], [], "hexpm", "da0d64a365c45bc9935cc5c8a7fc5e49a0e0f9932a761c55d6c52b142780a05c"},
-  "mimerl": {:hex, :mimerl, "1.2.0", "67e2d3f571088d5cfd3e550c383094b47159f3eee8ffa08e64106cdf5e981be3", [:rebar3], [], "hexpm", "f278585650aa581986264638ebf698f8bb19df297f66ad91b18910dfc6e19323"},
-  "mint": {:hex, :mint, "1.5.2", "4805e059f96028948870d23d7783613b7e6b0e2fb4e98d720383852a760067fd", [:mix], [{:castore, "~> 0.1.0 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:hpax, "~> 0.1.1", [hex: :hpax, repo: "hexpm", optional: false]}], "hexpm", "d77d9e9ce4eb35941907f1d3df38d8f750c357865353e21d335bdcdf6d892a02"},
-  "nimble_options": {:hex, :nimble_options, "1.1.0", "3b31a57ede9cb1502071fade751ab0c7b8dbe75a9a4c2b5bbb0943a690b63172", [:mix], [], "hexpm", "8bbbb3941af3ca9acc7835f5655ea062111c9c27bcac53e004460dfd19008a99"},
-  "nimble_pool": {:hex, :nimble_pool, "1.0.0", "5eb82705d138f4dd4423f69ceb19ac667b3b492ae570c9f5c900bb3d2f50a847", [:mix], [], "hexpm", "80be3b882d2d351882256087078e1b1952a28bf98d0a287be87e4a24a710b67a"},
+  "mime": {:hex, :mime, "2.0.6", "8f18486773d9b15f95f4f4f1e39b710045fa1de891fada4516559967276e4dc2", [:mix], [], "hexpm", "c9945363a6b26d747389aac3643f8e0e09d30499a138ad64fe8fd1d13d9b153e"},
+  "mimerl": {:hex, :mimerl, "1.3.0", "d0cd9fc04b9061f82490f6581e0128379830e78535e017f7780f37fea7545726", [:rebar3], [], "hexpm", "a1e15a50d1887217de95f0b9b0793e32853f7c258a5cd227650889b38839fe9d"},
+  "mint": {:hex, :mint, "1.6.2", "af6d97a4051eee4f05b5500671d47c3a67dac7386045d87a904126fd4bbcea2e", [:mix], [{:castore, "~> 0.1.0 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:hpax, "~> 0.1.1 or ~> 0.2.0 or ~> 1.0", [hex: :hpax, repo: "hexpm", optional: false]}], "hexpm", "5ee441dffc1892f1ae59127f74afe8fd82fda6587794278d924e4d90ea3d63f9"},
+  "nimble_options": {:hex, :nimble_options, "1.1.1", "e3a492d54d85fc3fd7c5baf411d9d2852922f66e69476317787a7b2bb000a61b", [:mix], [], "hexpm", "821b2470ca9442c4b6984882fe9bb0389371b8ddec4d45a9504f00a66f650b44"},
+  "nimble_pool": {:hex, :nimble_pool, "1.1.0", "bf9c29fbdcba3564a8b800d1eeb5a3c58f36e1e11d7b7fb2e084a643f645f06b", [:mix], [], "hexpm", "af2e4e6b34197db81f7aad230c1118eac993acc0dae6bc83bac0126d4ae0813a"},
   "parse_trans": {:hex, :parse_trans, "3.4.1", "6e6aa8167cb44cc8f39441d05193be6e6f4e7c2946cb2759f015f8c56b76e5ff", [:rebar3], [], "hexpm", "620a406ce75dada827b82e453c19cf06776be266f5a67cff34e1ef2cbb60e49a"},
-  "phoenix": {:hex, :phoenix, "1.7.11", "1d88fc6b05ab0c735b250932c4e6e33bfa1c186f76dcf623d8dd52f07d6379c7", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "b1ec57f2e40316b306708fe59b92a16b9f6f4bf50ccfa41aa8c7feb79e0ec02a"},
-  "phoenix_ecto": {:hex, :phoenix_ecto, "4.4.3", "86e9878f833829c3f66da03d75254c155d91d72a201eb56ae83482328dc7ca93", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "d36c401206f3011fefd63d04e8ef626ec8791975d9d107f9a0817d426f61ac07"},
-  "phoenix_html": {:hex, :phoenix_html, "3.3.3", "380b8fb45912b5638d2f1d925a3771b4516b9a78587249cabe394e0a5d579dc9", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "923ebe6fec6e2e3b3e569dfbdc6560de932cd54b000ada0208b5f45024bdd76c"},
-  "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.8.3", "7ff51c9b6609470f681fbea20578dede0e548302b0c8bdf338b5a753a4f045bf", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.5", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:ecto_sqlite3_extras, "~> 1.1.7 or ~> 1.2.0", [hex: :ecto_sqlite3_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.19 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "f9470a0a8bae4f56430a23d42f977b5a6205fdba6559d76f932b876bfaec652d"},
-  "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.4.1", "2aff698f5e47369decde4357ba91fc9c37c6487a512b41732818f2204a8ef1d3", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "9bffb834e7ddf08467fe54ae58b5785507aaba6255568ae22b4d46e2bb3615ab"},
-  "phoenix_live_view": {:hex, :phoenix_live_view, "0.20.6", "64927c3c01def01db5d777c0e483d15f37da975a1754e7148a25357485b5c30e", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "6e1a254402f4f986834c5023862c3936ff6674bd05ce13dd492b3971dc99157b"},
+  "phoenix": {:hex, :phoenix, "1.7.14", "a7d0b3f1bc95987044ddada111e77bd7f75646a08518942c72a8440278ae7825", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "c7859bc56cc5dfef19ecfc240775dae358cbaa530231118a9e014df392ace61a"},
+  "phoenix_ecto": {:hex, :phoenix_ecto, "4.6.2", "3b83b24ab5a2eb071a20372f740d7118767c272db386831b2e77638c4dcc606d", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.1", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.16 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}], "hexpm", "3f94d025f59de86be00f5f8c5dd7b5965a3298458d21ab1c328488be3b5fcd59"},
+  "phoenix_html": {:hex, :phoenix_html, "4.1.1", "4c064fd3873d12ebb1388425a8f2a19348cef56e7289e1998e2d2fa758aa982e", [:mix], [], "hexpm", "f2f2df5a72bc9a2f510b21497fd7d2b86d932ec0598f0210fed4114adc546c6f"},
+  "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.8.4", "4508e481f791ce62ec6a096e13b061387158cbeefacca68c6c1928e1305e23ed", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.5", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:ecto_sqlite3_extras, "~> 1.1.7 or ~> 1.2.0", [hex: :ecto_sqlite3_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.19 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "2984aae96994fbc5c61795a73b8fb58153b41ff934019cfb522343d2d3817d59"},
+  "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.5.3", "f2161c207fda0e4fb55165f650f7f8db23f02b29e3bff00ff7ef161d6ac1f09d", [:mix], [{:file_system, "~> 0.3 or ~> 1.0", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "b4ec9cd73cb01ff1bd1cac92e045d13e7030330b74164297d1aee3907b54803c"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "1.0.0-rc.7", "d2abca526422adea88896769529addb6443390b1d4f1ff9cbe694312d8875fb2", [:mix], [{:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b82a4575f6f3eb5b97922ec6874b0c52b3ca0cc5dcb4b14ddc478cbfa135dd01"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.3", "3168d78ba41835aecad272d5e8cd51aa87a7ac9eb836eabc42f6e57538e3731d", [:mix], [], "hexpm", "bba06bc1dcfd8cb086759f0edc94a8ba2bc8896d5331a1e2c2902bf8e36ee502"},
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
-  "plug": {:hex, :plug, "1.15.3", "712976f504418f6dff0a3e554c40d705a9bcf89a7ccef92fc6a5ef8f16a30a97", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "cc4365a3c010a56af402e0809208873d113e9c38c401cabd88027ef4f5c01fd2"},
-  "plug_cowboy": {:hex, :plug_cowboy, "2.7.0", "3ae9369c60641084363b08fe90267cbdd316df57e3557ea522114b30b63256ea", [:mix], [{:cowboy, "~> 2.7.0 or ~> 2.8.0 or ~> 2.9.0 or ~> 2.10.0", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "d85444fb8aa1f2fc62eabe83bbe387d81510d773886774ebdcb429b3da3c1a4a"},
-  "plug_crypto": {:hex, :plug_crypto, "2.0.0", "77515cc10af06645abbfb5e6ad7a3e9714f805ae118fa1a70205f80d2d70fe73", [:mix], [], "hexpm", "53695bae57cc4e54566d993eb01074e4d894b65a3766f1c43e2c61a1b0f45ea9"},
-  "postgrex": {:hex, :postgrex, "0.17.4", "5777781f80f53b7c431a001c8dad83ee167bcebcf3a793e3906efff680ab62b3", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "6458f7d5b70652bc81c3ea759f91736c16a31be000f306d3c64bcdfe9a18b3cc"},
+  "plug": {:hex, :plug, "1.16.1", "40c74619c12f82736d2214557dedec2e9762029b2438d6d175c5074c933edc9d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a13ff6b9006b03d7e33874945b2755253841b238c34071ed85b0e86057f8cddc"},
+  "plug_cowboy": {:hex, :plug_cowboy, "2.7.2", "fdadb973799ae691bf9ecad99125b16625b1c6039999da5fe544d99218e662e4", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "245d8a11ee2306094840c000e8816f0cbed69a23fc0ac2bcf8d7835ae019bb2f"},
+  "plug_crypto": {:hex, :plug_crypto, "2.1.0", "f44309c2b06d249c27c8d3f65cfe08158ade08418cf540fd4f72d4d6863abb7b", [:mix], [], "hexpm", "131216a4b030b8f8ce0f26038bc4421ae60e4bb95c5cf5395e1421437824c4fa"},
+  "postgrex": {:hex, :postgrex, "0.19.1", "73b498508b69aded53907fe48a1fee811be34cc720e69ef4ccd568c8715495ea", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "8bac7885a18f381e091ec6caf41bda7bb8c77912bb0e9285212829afe5d8a8f8"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
-  "swoosh": {:hex, :swoosh, "1.15.1", "9a8f45b24efc51ce3b04680324828c50fbd9733b9cd798abdcf9b51f5b4667a3", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.4 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "aa4e794bd39529f3d7e9cfd406ff1bbc422b9120e2a7ad38dfdf9b469d0c91f6"},
-  "tailwind": {:hex, :tailwind, "0.2.2", "9e27288b568ede1d88517e8c61259bc214a12d7eed271e102db4c93fcca9b2cd", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "ccfb5025179ea307f7f899d1bb3905cd0ac9f687ed77feebc8f67bdca78565c4"},
-  "telemetry": {:hex, :telemetry, "1.2.1", "68fdfe8d8f05a8428483a97d7aab2f268aaff24b49e0f599faa091f1d4e7f61c", [:rebar3], [], "hexpm", "dad9ce9d8effc621708f99eac538ef1cbe05d6a874dd741de2e689c47feafed5"},
-  "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.2", "2caabe9344ec17eafe5403304771c3539f3b6e2f7fb6a6f602558c825d0d0bfb", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9b43db0dc33863930b9ef9d27137e78974756f5f198cae18409970ed6fa5b561"},
-  "telemetry_poller": {:hex, :telemetry_poller, "1.0.0", "db91bb424e07f2bb6e73926fcafbfcbcb295f0193e0a00e825e589a0a47e8453", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b3a24eafd66c3f42da30fc3ca7dda1e9d546c12250a2d60d7b81d264fbec4f6e"},
-  "tesla": {:hex, :tesla, "1.8.0", "d511a4f5c5e42538d97eef7c40ec4f3e44effdc5068206f42ed859e09e51d1fd", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:exjsx, ">= 3.0.0", [hex: :exjsx, repo: "hexpm", optional: true]}, {:finch, "~> 0.13", [hex: :finch, repo: "hexpm", optional: true]}, {:fuse, "~> 2.4", [hex: :fuse, repo: "hexpm", optional: true]}, {:gun, ">= 1.0.0", [hex: :gun, repo: "hexpm", optional: true]}, {:hackney, "~> 1.6", [hex: :hackney, repo: "hexpm", optional: true]}, {:ibrowse, "4.4.2", [hex: :ibrowse, repo: "hexpm", optional: true]}, {:jason, ">= 1.0.0", [hex: :jason, repo: "hexpm", optional: true]}, {:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mint, "~> 1.0", [hex: :mint, repo: "hexpm", optional: true]}, {:msgpax, "~> 2.3", [hex: :msgpax, repo: "hexpm", optional: true]}, {:poison, ">= 1.0.0", [hex: :poison, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm", "10501f360cd926a309501287470372af1a6e1cbed0f43949203a4c13300bc79f"},
+  "swoosh": {:hex, :swoosh, "1.17.2", "73611f08fc7cb9fa15f4909db36eeb12b70727d5c8b6a7fa0d4a31c6575db29e", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "de914359f0ddc134dc0d7735e28922d49d0503f31e4bd66b44e26039c2226d39"},
+  "tailwind": {:hex, :tailwind, "0.2.3", "277f08145d407de49650d0a4685dc062174bdd1ae7731c5f1da86163a24dfcdb", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "8e45e7a34a676a7747d04f7913a96c770c85e6be810a1d7f91e713d3a3655b5d"},
+  "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
+  "telemetry_metrics": {:hex, :telemetry_metrics, "1.0.0", "29f5f84991ca98b8eb02fc208b2e6de7c95f8bb2294ef244a176675adc7775df", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "f23713b3847286a534e005126d4c959ebcca68ae9582118ce436b521d1d47d5d"},
+  "telemetry_poller": {:hex, :telemetry_poller, "1.1.0", "58fa7c216257291caaf8d05678c8d01bd45f4bdbc1286838a28c4bb62ef32999", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9eb9d9cbfd81cbd7cdd24682f8711b6e2b691289a0de6826e58452f28c103c8f"},
+  "tesla": {:hex, :tesla, "1.12.1", "fe2bf4250868ee72e5d8b8dfa408d13a00747c41b7237b6aa3b9a24057346681", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:exjsx, ">= 3.0.0", [hex: :exjsx, repo: "hexpm", optional: true]}, {:finch, "~> 0.13", [hex: :finch, repo: "hexpm", optional: true]}, {:fuse, "~> 2.4", [hex: :fuse, repo: "hexpm", optional: true]}, {:gun, ">= 1.0.0", [hex: :gun, repo: "hexpm", optional: true]}, {:hackney, "~> 1.6", [hex: :hackney, repo: "hexpm", optional: true]}, {:ibrowse, "4.4.2", [hex: :ibrowse, repo: "hexpm", optional: true]}, {:jason, ">= 1.0.0", [hex: :jason, repo: "hexpm", optional: true]}, {:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mint, "~> 1.0", [hex: :mint, repo: "hexpm", optional: true]}, {:msgpax, "~> 2.3", [hex: :msgpax, repo: "hexpm", optional: true]}, {:poison, ">= 1.0.0", [hex: :poison, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm", "2391efc6243d37ead43afd0327b520314c7b38232091d4a440c1212626fdd6e7"},
+  "thousand_island": {:hex, :thousand_island, "1.3.5", "6022b6338f1635b3d32406ff98d68b843ba73b3aa95cfc27154223244f3a6ca5", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "2be6954916fdfe4756af3239fb6b6d75d0b8063b5df03ba76fd8a4c87849e180"},
   "unicode_util_compat": {:hex, :unicode_util_compat, "0.7.0", "bc84380c9ab48177092f43ac89e4dfa2c6d62b40b8bd132b1059ecc7232f9a78", [:rebar3], [], "hexpm", "25eee6d67df61960cf6a794239566599b09e17e668d3700247bc498638152521"},
-  "wallaby": {:hex, :wallaby, "0.30.6", "7dc4c1213f3b52c4152581d126632bc7e06892336d3a0f582853efeeabd45a71", [:mix], [{:ecto_sql, ">= 3.0.0", [hex: :ecto_sql, repo: "hexpm", optional: true]}, {:httpoison, "~> 0.12 or ~> 1.0 or ~> 2.0", [hex: :httpoison, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix_ecto, ">= 3.0.0", [hex: :phoenix_ecto, repo: "hexpm", optional: true]}, {:web_driver_client, "~> 0.2.0", [hex: :web_driver_client, repo: "hexpm", optional: false]}], "hexpm", "50950c1d968549b54c20e16175c68c7fc0824138e2bb93feb11ef6add8eb23d4"},
+  "wallaby": {:hex, :wallaby, "0.30.9", "51d60682092c3c428c63b656b818e2258202b9f9a31ec37230659647ae20325b", [:mix], [{:ecto_sql, ">= 3.0.0", [hex: :ecto_sql, repo: "hexpm", optional: true]}, {:httpoison, "~> 0.12 or ~> 1.0 or ~> 2.0", [hex: :httpoison, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix_ecto, ">= 3.0.0", [hex: :phoenix_ecto, repo: "hexpm", optional: true]}, {:web_driver_client, "~> 0.2.0", [hex: :web_driver_client, repo: "hexpm", optional: false]}], "hexpm", "62e3ccb89068b231b50ed046219022020516d44f443eebef93a19db4be95b808"},
   "web_driver_client": {:hex, :web_driver_client, "0.2.0", "63b76cd9eb3b0716ec5467a0f8bead73d3d9612e63f7560d21357f03ad86e31a", [:mix], [{:hackney, "~> 1.6", [hex: :hackney, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:tesla, "~> 1.3", [hex: :tesla, repo: "hexpm", optional: false]}], "hexpm", "83cc6092bc3e74926d1c8455f0ce927d5d1d36707b74d9a65e38c084aab0350f"},
   "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},
-  "websock_adapter": {:hex, :websock_adapter, "0.5.5", "9dfeee8269b27e958a65b3e235b7e447769f66b5b5925385f5a569269164a210", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "4b977ba4a01918acbf77045ff88de7f6972c2a009213c515a445c48f224ffce9"},
+  "websock_adapter": {:hex, :websock_adapter, "0.5.7", "65fa74042530064ef0570b75b43f5c49bb8b235d6515671b3d250022cb8a1f9e", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "d0f478ee64deddfec64b800673fd6e0c8888b079d9f3444dd96d2a98383bdbd1"},
 }