Refactor input and dialog components

src/assets/css/style.css

@@ -1095,6 +1095,10 @@ select {
   margin-top: 1.5rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -1158,6 +1162,10 @@ select {
   height: 1.5rem;
 }
 
+.h-7 {
+  height: 1.75rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -1195,6 +1203,10 @@ select {
   height: 80vh;
 }
 
+.h-\[56px\] {
+  height: 56px;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -1219,6 +1231,10 @@ select {
   min-height: 100vh;
 }
 
+.min-h-\[56px\] {
+  min-height: 56px;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -1287,6 +1303,10 @@ select {
   width: 100%;
 }
 
+.w-\[170px\] {
+  width: 170px;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1448,6 +1468,10 @@ select {
   place-items: center;
 }
 
+.content-start {
+  align-content: flex-start;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -1542,6 +1566,12 @@ select {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2571,6 +2601,11 @@ select {
   background-color: rgb(255 255 0 / var(--tw-bg-opacity));
 }
 
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -2664,6 +2699,10 @@ select {
   --tw-ring-offset-width: 2px;
 }
 
+.focus\:ring-offset-0:focus {
+  --tw-ring-offset-width: 0px;
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }