@yurikilian/lex4 0.1.2 → 0.2.0

package/dist/style.css

@@ -1,4 +1,6 @@
-*, ::before, ::after {
+@import url('https://rsms.me/inter/inter.css');
+
+*, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -52,7 +54,7 @@
   --tw-contain-style:  ;
 }
 
-::backdrop {
+::backdrop{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -104,9 +106,13 @@
   --tw-contain-layout:  ;
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
-}/*
+}
+
+/*
 ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
-*//*
+*/
+
+/*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
@@ -142,7 +148,7 @@ html,
   -moz-tab-size: 4; /* 3 */
   -o-tab-size: 4;
      tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-family: Inter, system-ui, -apple-system, sans-serif; /* 4 */
   font-feature-settings: normal; /* 5 */
   font-variation-settings: normal; /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
@@ -423,6 +429,7 @@ menu {
 /*
 Reset default styling for dialogs.
 */
+
 dialog {
   padding: 0;
 }
@@ -463,6 +470,7 @@ button,
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
+
 :disabled {
   cursor: default;
 }
@@ -496,490 +504,830 @@ video {
 }
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
+
 [hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
-.\!container {
+
+.\!container{
   width: 100% !important;
 }
-.container {
+
+.container{
   width: 100%;
 }
-@media (min-width: 640px) {
 
-  .\!container {
+@media (min-width: 640px){
+
+  .\!container{
     max-width: 640px !important;
   }
 
-  .container {
+  .container{
     max-width: 640px;
   }
 }
-@media (min-width: 768px) {
 
-  .\!container {
+@media (min-width: 768px){
+
+  .\!container{
     max-width: 768px !important;
   }
 
-  .container {
+  .container{
     max-width: 768px;
   }
 }
-@media (min-width: 1024px) {
 
-  .\!container {
+@media (min-width: 1024px){
+
+  .\!container{
     max-width: 1024px !important;
   }
 
-  .container {
+  .container{
     max-width: 1024px;
   }
 }
-@media (min-width: 1280px) {
 
-  .\!container {
+@media (min-width: 1280px){
+
+  .\!container{
     max-width: 1280px !important;
   }
 
-  .container {
+  .container{
     max-width: 1280px;
   }
 }
-@media (min-width: 1536px) {
 
-  .\!container {
+@media (min-width: 1536px){
+
+  .\!container{
     max-width: 1536px !important;
   }
 
-  .container {
+  .container{
     max-width: 1536px;
   }
 }
-.pointer-events-none {
+
+.pointer-events-none{
   pointer-events: none;
 }
-.visible {
+
+.visible{
   visibility: visible;
 }
-.fixed {
+
+.static{
+  position: static;
+}
+
+.fixed{
   position: fixed;
 }
-.absolute {
+
+.absolute{
   position: absolute;
 }
-.relative {
+
+.relative{
   position: relative;
 }
-.sticky {
+
+.sticky{
   position: sticky;
 }
-.-left-\[9999px\] {
+
+.-left-\[9999px\]{
   left: -9999px;
 }
-.left-0 {
+
+.left-0{
   left: 0px;
 }
-.right-2 {
+
+.left-2\.5{
+  left: 0.625rem;
+}
+
+.right-2{
   right: 0.5rem;
 }
-.top-0 {
+
+.top-0{
   top: 0px;
 }
-.top-2 {
+
+.top-1\/2{
+  top: 50%;
+}
+
+.top-2{
   top: 0.5rem;
 }
-.z-10 {
+
+.top-full{
+  top: 100%;
+}
+
+.z-10{
   z-index: 10;
 }
-.mx-0\.5 {
+
+.z-50{
+  z-index: 50;
+}
+
+.mx-0\.5{
   margin-left: 0.125rem;
   margin-right: 0.125rem;
 }
-.mb-1 {
+
+.mb-1{
   margin-bottom: 0.25rem;
 }
-.mb-2 {
+
+.mb-2{
   margin-bottom: 0.5rem;
 }
-.ml-6 {
+
+.mb-3{
+  margin-bottom: 0.75rem;
+}
+
+.ml-6{
   margin-left: 1.5rem;
 }
-.ml-auto {
+
+.ml-auto{
   margin-left: auto;
 }
-.mt-0\.5 {
+
+.mt-0\.5{
   margin-top: 0.125rem;
 }
-.block {
+
+.mt-1{
+  margin-top: 0.25rem;
+}
+
+.block{
   display: block;
 }
-.inline-block {
+
+.inline-block{
   display: inline-block;
 }
-.inline {
+
+.inline{
   display: inline;
 }
-.flex {
+
+.flex{
   display: flex;
 }
-.inline-flex {
+
+.inline-flex{
   display: inline-flex;
 }
-.hidden {
+
+.list-item{
+  display: list-item;
+}
+
+.hidden{
   display: none;
 }
-.h-0 {
+
+.h-0{
   height: 0px;
 }
-.h-3 {
+
+.h-3{
   height: 0.75rem;
 }
-.h-4 {
+
+.h-4{
   height: 1rem;
 }
-.h-5 {
+
+.h-5{
   height: 1.25rem;
 }
-.h-6 {
+
+.h-6{
   height: 1.5rem;
 }
-.h-7 {
+
+.h-7{
   height: 1.75rem;
 }
-.h-full {
+
+.h-full{
   height: 100%;
 }
-.min-h-0 {
+
+.max-h-48{
+  max-height: 12rem;
+}
+
+.min-h-0{
   min-height: 0px;
 }
-.min-h-\[24px\] {
+
+.min-h-\[24px\]{
   min-height: 24px;
 }
-.min-h-full {
+
+.min-h-full{
   min-height: 100%;
 }
-.w-0 {
+
+.w-0{
   width: 0px;
 }
-.w-3 {
+
+.w-16{
+  width: 4rem;
+}
+
+.w-3{
   width: 0.75rem;
 }
-.w-6 {
+
+.w-6{
   width: 1.5rem;
 }
-.w-7 {
+
+.w-64{
+  width: 16rem;
+}
+
+.w-7{
   width: 1.75rem;
 }
-.w-\[320px\] {
+
+.w-\[320px\]{
   width: 320px;
 }
-.w-full {
+
+.w-full{
   width: 100%;
 }
-.w-px {
+
+.w-px{
   width: 1px;
 }
-.min-w-0 {
+
+.min-w-0{
   min-width: 0px;
 }
-.flex-1 {
+
+.flex-1{
   flex: 1 1 0%;
 }
-.flex-shrink-0 {
+
+.flex-shrink-0{
   flex-shrink: 0;
 }
-.shrink-0 {
+
+.shrink-0{
   flex-shrink: 0;
 }
-.translate-x-0\.5 {
+
+.-translate-y-1\/2{
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-0\.5{
   --tw-translate-x: 0.125rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.translate-x-3\.5 {
+
+.translate-x-3\.5{
   --tw-translate-x: 0.875rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.cursor-not-allowed {
+
+.cursor-default{
+  cursor: default;
+}
+
+.cursor-not-allowed{
   cursor: not-allowed;
 }
-.cursor-pointer {
+
+.cursor-pointer{
   cursor: pointer;
 }
-.select-none {
+
+.select-none{
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
-.list-decimal {
+
+.list-decimal{
   list-style-type: decimal;
 }
-.list-disc {
+
+.list-disc{
   list-style-type: disc;
 }
-.list-none {
+
+.list-none{
   list-style-type: none;
 }
-.flex-col {
+
+.flex-col{
   flex-direction: column;
 }
-.flex-wrap {
+
+.flex-wrap{
   flex-wrap: wrap;
 }
-.items-start {
+
+.items-start{
   align-items: flex-start;
 }
-.items-center {
+
+.items-center{
   align-items: center;
 }
-.justify-center {
+
+.justify-center{
   justify-content: center;
 }
-.justify-between {
+
+.justify-between{
   justify-content: space-between;
 }
-.gap-0\.5 {
+
+.gap-0\.5{
   gap: 0.125rem;
 }
-.gap-1 {
+
+.gap-1{
   gap: 0.25rem;
 }
-.gap-1\.5 {
+
+.gap-1\.5{
   gap: 0.375rem;
 }
-.gap-2 {
+
+.gap-2{
   gap: 0.5rem;
 }
-.gap-8 {
+
+.gap-8{
   gap: 2rem;
 }
-.divide-y > :not([hidden]) ~ :not([hidden]) {
+
+.divide-y > :not([hidden]) ~ :not([hidden]){
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
-.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
   --tw-divide-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
 }
-.overflow-auto {
+
+.overflow-auto{
   overflow: auto;
 }
-.overflow-hidden {
+
+.overflow-hidden{
   overflow: hidden;
 }
-.rounded {
+
+.overflow-y-auto{
+  overflow-y: auto;
+}
+
+.whitespace-nowrap{
+  white-space: nowrap;
+}
+
+.rounded{
   border-radius: 0.25rem;
 }
-.rounded-full {
+
+.rounded-full{
   border-radius: 9999px;
 }
-.border {
+
+.rounded-lg{
+  border-radius: 0.5rem;
+}
+
+.rounded-md{
+  border-radius: 0.375rem;
+}
+
+.border{
   border-width: 1px;
 }
-.border-b {
+
+.border-b{
   border-bottom-width: 1px;
 }
-.border-l {
+
+.border-b-2{
+  border-bottom-width: 2px;
+}
+
+.border-l{
   border-left-width: 1px;
 }
-.border-l-4 {
+
+.border-l-4{
   border-left-width: 4px;
 }
-.border-t {
+
+.border-t{
   border-top-width: 1px;
 }
-.border-dashed {
+
+.border-t-2{
+  border-top-width: 2px;
+}
+
+.border-dashed{
   border-style: dashed;
 }
-.border-gray-200 {
+
+.border-blue-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
+}
+
+.border-blue-300{
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-200{
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
-.border-gray-300 {
+
+.border-gray-300{
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
-.bg-blue-50 {
+
+.border-b-blue-200{
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
+}
+
+.border-t-blue-200{
+  --tw-border-opacity: 1;
+  border-top-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
+}
+
+.bg-blue-50{
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
 }
-.bg-blue-500 {
+
+.bg-blue-50\/60{
+  background-color: rgb(239 246 255 / 0.6);
+}
+
+.bg-blue-500{
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
-.bg-gray-200 {
+
+.bg-gray-200{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
-.bg-gray-300 {
+
+.bg-gray-300{
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
-.bg-gray-300\/60 {
+
+.bg-gray-300\/60{
   background-color: rgb(209 213 219 / 0.6);
 }
-.bg-white {
+
+.bg-gray-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-700{
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+
+.bg-white{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
-.p-0 {
+
+.p-0{
   padding: 0px;
 }
-.p-2 {
+
+.p-1{
+  padding: 0.25rem;
+}
+
+.p-2{
   padding: 0.5rem;
 }
-.px-1\.5 {
+
+.p-3{
+  padding: 0.75rem;
+}
+
+.px-1{
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-1\.5{
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
-.px-2 {
+
+.px-2{
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-3 {
+
+.px-2\.5{
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.px-3{
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.py-1\.5 {
+
+.py-0\.5{
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.py-1{
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5{
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
-.py-2 {
+
+.py-2{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-2\.5 {
+
+.py-2\.5{
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
-.py-4 {
+
+.py-4{
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
-.py-8 {
+
+.py-8{
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-.pl-4 {
+
+.pb-3{
+  padding-bottom: 0.75rem;
+}
+
+.pl-4{
   padding-left: 1rem;
 }
-.pr-24 {
+
+.pl-8{
+  padding-left: 2rem;
+}
+
+.pr-24{
   padding-right: 6rem;
 }
-.text-left {
+
+.pr-3{
+  padding-right: 0.75rem;
+}
+
+.text-left{
   text-align: left;
 }
-.text-2xl {
+
+.text-center{
+  text-align: center;
+}
+
+.text-2xl{
   font-size: 1.5rem;
   line-height: 2rem;
 }
-.text-3xl {
+
+.text-3xl{
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
-.text-base {
+
+.text-\[10px\]{
+  font-size: 10px;
+}
+
+.text-\[11px\]{
+  font-size: 11px;
+}
+
+.text-base{
   font-size: 1rem;
   line-height: 1.5rem;
 }
-.text-lg {
+
+.text-lg{
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
-.text-sm {
+
+.text-sm{
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.text-xl {
+
+.text-xl{
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
-.text-xs {
+
+.text-xs{
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.font-bold {
+
+.font-bold{
   font-weight: 700;
 }
-.font-medium {
+
+.font-medium{
   font-weight: 500;
 }
-.font-semibold {
+
+.font-semibold{
   font-weight: 600;
 }
-.italic {
+
+.uppercase{
+  text-transform: uppercase;
+}
+
+.italic{
   font-style: italic;
 }
-.text-blue-600 {
+
+.tracking-wider{
+  letter-spacing: 0.05em;
+}
+
+.text-blue-600{
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
-.text-blue-700 {
+
+.text-blue-700{
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity, 1));
 }
-.text-gray-300 {
+
+.text-gray-300{
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
 }
-.text-gray-400 {
+
+.text-gray-400{
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
-.text-gray-500 {
+
+.text-gray-500{
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
-.text-gray-600 {
+
+.text-gray-600{
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
-.text-gray-700 {
+
+.text-gray-700{
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.text-gray-900 {
+
+.text-gray-900{
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
-.underline {
+
+.underline{
   text-decoration-line: underline;
 }
-.line-through {
+
+.line-through{
   text-decoration-line: line-through;
 }
-.opacity-0 {
+
+.placeholder-gray-400::-moz-placeholder{
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
+}
+
+.placeholder-gray-400::placeholder{
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
+}
+
+.opacity-0{
   opacity: 0;
 }
-.shadow-sm {
+
+.shadow-lg{
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm{
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.outline-none {
+
+.shadow-xl{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.outline-none{
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.blur {
+
+.blur{
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.filter {
+
+.\!filter{
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+}
+
+.filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.transition-colors {
+
+.transition-colors{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-transform {
+
+.transition-transform{
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.duration-200 {
+
+.duration-200{
   transition-duration: 200ms;
 }
 
+.lex4-editor {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
 .lex4-editor[data-global-selection-active="true"] [data-testid^="page-body-"] [contenteditable="true"] {
   background-color: rgb(191 219 254) !important;
   caret-color: transparent;
@@ -1005,61 +1353,85 @@ video {
   color: inherit !important;
 }
 
-.hover\:bg-gray-100:hover {
+.hover\:bg-blue-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-gray-200\/60:hover {
+.hover\:bg-gray-200\/60:hover{
   background-color: rgb(229 231 235 / 0.6);
 }
 
-.hover\:bg-gray-50:hover {
+.hover\:bg-gray-50:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:text-gray-600:hover {
+.hover\:text-gray-600:hover{
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 
-.hover\:text-gray-700:hover {
+.hover\:text-gray-700:hover{
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
 
-.hover\:text-gray-900:hover {
+.hover\:text-gray-900:hover{
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
 
-.focus\:border-blue-400:focus {
+.focus\:border-blue-400:focus{
   --tw-border-opacity: 1;
   border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
 }
 
-.focus\:outline-none:focus {
+.focus\:bg-white:focus{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
+.focus\:outline-none:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
-.focus\:ring-1:focus {
+.focus\:ring-1:focus{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-blue-400:focus {
+.focus\:ring-blue-400:focus{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
 }
 
-.disabled\:cursor-not-allowed:disabled {
+.disabled\:cursor-not-allowed:disabled{
   cursor: not-allowed;
 }
 
-.disabled\:text-gray-300:disabled {
+.disabled\:text-gray-300:disabled{
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
 }
+
+.disabled\:opacity-50:disabled{
+  opacity: 0.5;
+}
+
+.group:hover .group-hover\:border-blue-400{
+  --tw-border-opacity: 1;
+  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
+}
+
+.group:hover .group-hover\:bg-blue-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}