@mlw-packages/react-components 1.3.12 → 1.3.14

package/dist/index.css

@@ -465,6 +465,9 @@ body {
 .top-1\/2 {
   top: 50%;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-3\.5 {
   top: 0.875rem;
 }
@@ -504,6 +507,12 @@ body {
 .m-0 {
   margin: 0px;
 }
+.m-12 {
+  margin: 3rem;
+}
+.m-6 {
+  margin: 1.5rem;
+}
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -561,12 +570,21 @@ body {
 .mb-6 {
   margin-bottom: 1.5rem;
 }
+.mb-8 {
+  margin-bottom: 2rem;
+}
 .mb-\[-1rem\] {
   margin-bottom: -1rem;
 }
 .ml-2 {
   margin-left: 0.5rem;
 }
+.ml-36 {
+  margin-left: 9rem;
+}
+.ml-40 {
+  margin-left: 10rem;
+}
 .ml-5 {
   margin-left: 1.25rem;
 }
@@ -588,9 +606,6 @@ body {
 .mt-1 {
   margin-top: 0.25rem;
 }
-.mt-10 {
-  margin-top: 2.5rem;
-}
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -705,6 +720,9 @@ body {
 .h-5 {
   height: 1.25rem;
 }
+.h-56 {
+  height: 14rem;
+}
 .h-6 {
   height: 1.5rem;
 }
@@ -726,15 +744,15 @@ body {
 .h-\[1\.2rem\] {
   height: 1.2rem;
 }
-.h-\[120px\] {
-  height: 120px;
-}
 .h-\[1px\] {
   height: 1px;
 }
 .h-\[200px\] {
   height: 200px;
 }
+.h-\[220px\] {
+  height: 220px;
+}
 .h-\[var\(--radix-select-trigger-height\)\] {
   height: var(--radix-select-trigger-height);
 }
@@ -750,6 +768,9 @@ body {
 .h-svh {
   height: 100svh;
 }
+.max-h-40 {
+  max-height: 10rem;
+}
 .max-h-96 {
   max-height: 24rem;
 }
@@ -810,12 +831,18 @@ body {
 .w-44 {
   width: 11rem;
 }
+.w-48 {
+  width: 12rem;
+}
 .w-5 {
   width: 1.25rem;
 }
 .w-6 {
   width: 1.5rem;
 }
+.w-60 {
+  width: 15rem;
+}
 .w-64 {
   width: 16rem;
 }
@@ -825,9 +852,6 @@ body {
 .w-72 {
   width: 18rem;
 }
-.w-8 {
-  width: 2rem;
-}
 .w-80 {
   width: 20rem;
 }
@@ -931,6 +955,9 @@ body {
 .max-w-\[80px\] {
   max-width: 80px;
 }
+.max-w-full {
+  max-width: 100%;
+}
 .max-w-lg {
   max-width: 32rem;
 }
@@ -940,6 +967,9 @@ body {
 .max-w-sm {
   max-width: 24rem;
 }
+.max-w-xl {
+  max-width: 36rem;
+}
 .max-w-xs {
   max-width: 20rem;
 }
@@ -1099,6 +1129,9 @@ body {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-20 {
+  gap: 5rem;
+}
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1111,10 +1144,13 @@ body {
 .gap-6 {
   gap: 1.5rem;
 }
-.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+.gap-8 {
+  gap: 2rem;
+}
+.-space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(-0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
@@ -1202,6 +1238,9 @@ body {
 .whitespace-pre {
   white-space: pre;
 }
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
 .whitespace-break-spaces {
   white-space: break-spaces;
 }
@@ -1311,6 +1350,10 @@ body {
 .border-border {
   border-color: hsl(var(--border));
 }
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
@@ -1318,6 +1361,10 @@ body {
 .border-input {
   border-color: hsl(var(--input));
 }
+.border-neutral-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
+}
 .border-primary {
   border-color: hsl(var(--primary));
 }
@@ -1350,6 +1397,10 @@ body {
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
 .bg-border {
   background-color: hsl(var(--border));
 }
@@ -1359,6 +1410,10 @@ body {
 .bg-destructive {
   background-color: hsl(var(--destructive));
 }
+.bg-emerald-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
+}
 .bg-foreground {
   background-color: hsl(var(--foreground));
 }
@@ -1374,12 +1429,24 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
+}
 .bg-muted {
   background-color: hsl(var(--muted));
 }
 .bg-muted\/50 {
   background-color: hsl(var(--muted) / 0.5);
 }
+.bg-neutral-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
+}
+.bg-neutral-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+}
 .bg-neutral-950 {
   --tw-bg-opacity: 1;
   background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
@@ -1414,6 +1481,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
+}
 .bg-zinc-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
@@ -1446,6 +1517,9 @@ body {
 .p-1 {
   padding: 0.25rem;
 }
+.p-1\.5 {
+  padding: 0.375rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -1487,6 +1561,10 @@ body {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1603,16 +1681,16 @@ body {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
-.text-7xl {
-  font-size: 4.5rem;
+.text-6xl {
+  font-size: 3.75rem;
   line-height: 1;
 }
-.text-\[0\.70rem\] {
-  font-size: 0.70rem;
-}
 .text-\[0\.8rem\] {
   font-size: 0.8rem;
 }
+.text-\[28\.5px\] {
+  font-size: 28.5px;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1636,6 +1714,9 @@ body {
 .font-bold {
   font-weight: 700;
 }
+.font-extrabold {
+  font-weight: 800;
+}
 .font-medium {
   font-weight: 500;
 }
@@ -1661,12 +1742,16 @@ body {
 .tracking-tight {
   letter-spacing: -0.025em;
 }
-.tracking-tighter {
-  letter-spacing: -0.05em;
+.tracking-wider {
+  letter-spacing: 0.05em;
 }
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
@@ -1683,6 +1768,10 @@ body {
 .text-destructive-foreground {
   color: hsl(var(--destructive-foreground));
 }
+.text-emerald-600 {
+  --tw-text-opacity: 1;
+  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
+}
 .text-foreground {
   color: hsl(var(--foreground));
 }
@@ -1698,21 +1787,33 @@ body {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
-}
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity, 1));
 }
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
+}
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
+}
 .text-neutral-600 {
   --tw-text-opacity: 1;
   color: rgb(82 82 82 / var(--tw-text-opacity, 1));
 }
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
+}
+.text-neutral-800 {
+  --tw-text-opacity: 1;
+  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
+}
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity, 1));
@@ -1753,6 +1854,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
+}
 .text-yellow-600 {
   --tw-text-opacity: 1;
   color: rgb(202 138 4 / var(--tw-text-opacity, 1));
@@ -1773,6 +1878,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(9 9 11 / var(--tw-text-opacity, 1));
 }
+.underline {
+  text-decoration-line: underline;
+}
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -1873,9 +1981,27 @@ body {
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
+.ring-2 {
+  --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(2px + 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);
+}
+.ring-background {
+  --tw-ring-color: hsl(var(--background));
+}
+.ring-primary {
+  --tw-ring-color: hsl(var(--primary));
+}
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
+.grayscale {
+  --tw-grayscale: grayscale(100%);
+  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: 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;
 }
@@ -2077,6 +2203,7 @@ body {
   --destructive: 0 100% 50%;
   --destructive-foreground: 210 40% 98%;
   --ring: 215 20.2% 65.1%;
+  --tick-color: #000;
 }
 .dark,
 .dark-purple,
@@ -2095,6 +2222,7 @@ body {
   --destructive: 0 100% 70%;
   --destructive-foreground: 231 15% 19%;
   --ring: 216 34% 17%;
+  --tick-color: #fff;
 }
 .dark {
   --primary: 210 40% 98%;
@@ -2324,25 +2452,50 @@ body {
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
+.hover\:bg-emerald-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(4 120 87 / 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:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-muted\/50:hover {
   background-color: hsl(var(--muted) / 0.5);
 }
-.hover\:bg-muted\/80:hover {
-  background-color: hsl(var(--muted) / 0.8);
+.hover\:bg-neutral-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
+}
+.hover\:bg-neutral-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
 }
 .hover\:bg-primary:hover {
   background-color: hsl(var(--primary));
 }
-.hover\:bg-primary\/80:hover {
-  background-color: hsl(var(--primary) / 0.8);
+.hover\:bg-primary\/20:hover {
+  background-color: hsl(var(--primary) / 0.2);
 }
 .hover\:bg-slate-900:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-yellow-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-zinc-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
@@ -2424,6 +2577,9 @@ body {
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
+.focus\:ring-primary:focus {
+  --tw-ring-color: hsl(var(--primary));
+}
 .focus\:ring-ring:focus {
   --tw-ring-color: hsl(var(--ring));
 }
@@ -2505,8 +2661,9 @@ body {
 .group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
   opacity: 1;
 }
-.group.toast .group-\[\.toast\]\:text-muted-foreground {
-  color: hsl(var(--muted-foreground));
+.group.toast .group-\[\.toast\]\:text-neutral-600 {
+  --tw-text-opacity: 1;
+  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
 }
 .peer:focus ~ .peer-focus\:shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
@@ -2718,6 +2875,22 @@ body {
 .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
   color: hsl(var(--muted-foreground));
 }
+.data-\[type\=error\]\:text-red-800[data-type=error] {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
+}
+.data-\[type\=info\]\:text-blue-800[data-type=info] {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
+}
+.data-\[type\=success\]\:text-green-800[data-type=success] {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
+}
+.data-\[type\=warning\]\:text-yellow-800[data-type=warning] {
+  --tw-text-opacity: 1;
+  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
+}
 .data-\[disabled\=true\]\:opacity-50[data-disabled=true] {
   opacity: 0.5;
 }
@@ -2840,21 +3013,6 @@ body {
 .data-\[state\=open\]\:duration-500[data-state=open] {
   animation-duration: 500ms;
 }
-.\*\:data-\[slot\=avatar\]\:ring-2[data-slot=avatar] > * {
-  --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(2px + 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);
-}
-.\*\:data-\[slot\=avatar\]\:ring-background[data-slot=avatar] > * {
-  --tw-ring-color: hsl(var(--background));
-}
-.\*\:data-\[slot\=avatar\]\:grayscale[data-slot=avatar] > * {
-  --tw-grayscale: grayscale(100%);
-  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);
-}
 .data-\[state\=active\]\:after\:scale-x-100[data-state=active]::after {
   content: var(--tw-content);
   --tw-scale-x: 1;
@@ -2959,6 +3117,10 @@ body {
 .peer[data-variant=inset] ~ .peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-theme\(spacing\.4\)\)\] {
   min-height: calc(100svh - 1rem);
 }
+.dark\:border-gray-700:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
 .dark\:border-transparent:is(.dark *) {
   border-color: transparent;
 }
@@ -2966,10 +3128,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: hsl(231 15% 19% / var(--tw-bg-opacity, 1));
 }
-.dark\:bg-gray-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
-}
 .dark\:bg-input\/30:is(.dark *) {
   background-color: hsl(var(--input) / 0.3);
 }
@@ -3000,30 +3158,14 @@ body {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
-.dark\:text-blue-400:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
-}
-.dark\:text-gray-100:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
-}
 .dark\:text-gray-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
 }
-.dark\:text-green-400:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
-}
 .dark\:text-neutral-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(212 212 212 / var(--tw-text-opacity, 1));
 }
-.dark\:text-red-400:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
-}
 .dark\:text-slate-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity, 1));
@@ -3040,14 +3182,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.dark\:text-yellow-400:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
-}
-.dark\:text-zinc-400:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
-}
 .dark\:hover\:bg-slate-50:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
@@ -3064,9 +3198,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity, 1));
 }
-.group.toast .dark\:group-\[\.toast\]\:text-muted-foreground\/80:is(.dark *) {
-  color: hsl(var(--muted-foreground) / 0.8);
-}
 .dark\:aria-selected\:bg-primary[aria-selected=true]:is(.dark *) {
   background-color: hsl(var(--primary));
 }
@@ -3088,34 +3219,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(248 250 252 / var(--tw-text-opacity, 1));
 }
-.dark\:data-\[type\=error\]\:bg-red-900\/30[data-type=error]:is(.dark *) {
-  background-color: rgb(127 29 29 / 0.3);
-}
-.dark\:data-\[type\=info\]\:bg-blue-900\/30[data-type=info]:is(.dark *) {
-  background-color: rgb(30 58 138 / 0.3);
-}
-.dark\:data-\[type\=success\]\:bg-green-900\/30[data-type=success]:is(.dark *) {
-  background-color: rgb(20 83 45 / 0.3);
-}
-.dark\:data-\[type\=warning\]\:bg-yellow-900\/30[data-type=warning]:is(.dark *) {
-  background-color: rgb(113 63 18 / 0.3);
-}
-.dark\:data-\[type\=error\]\:text-red-400[data-type=error]:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
-}
-.dark\:data-\[type\=info\]\:text-blue-400[data-type=info]:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
-}
-.dark\:data-\[type\=success\]\:text-green-400[data-type=success]:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
-}
-.dark\:data-\[type\=warning\]\:text-yellow-400[data-type=warning]:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
-}
 @media (min-width: 640px) {
   .sm\:mt-0 {
     margin-top: 0px;

package/dist/index.js

@@ -1572,7 +1572,7 @@ function MultiCombobox({
       {
         className: "flex items-center gap-1 rounded-md border p-1",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate whitespace-break-spaces text-xs", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "whitespace-break-spaces text-xs", children: item.label }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "span",
             {
@@ -1582,12 +1582,6 @@ function MultiCombobox({
                 e.stopPropagation();
                 handleSelection(item.value);
               },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  handleSelection(item.value);
-                }
-              },
               className: "cursor-pointer p-0 m-0 text-xs flex items-center justify-center hover:text-red-500 hover:scale-110 transition-all",
               children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_phosphor_react9.X, { size: 14 })
             }
@@ -1596,7 +1590,7 @@ function MultiCombobox({
       },
       item.value
     ));
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-wrap gap-2", children: items2 });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex w-full flex-wrap gap-2", children: items2 });
   }, [handleSelection, placeholder, selectedItems]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("flex flex-col gap-1 w-full min-w-[150px]", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LabelBase_default, { className: labelClassname, children: label }),
@@ -3040,34 +3034,34 @@ var Toaster = ({ ...props }) => {
         classNames: {
           toast: `
             group toast
-            bg-white dark:bg-gray-900
-            text-gray-900 dark:text-gray-100
+            bg-white
+            text-neutral-800
             shadow-lg rounded-md
             border-l-8
-            border-border
+            border-neutral-200
             flex items-center gap-3
-            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 dark:data-[type=success]:bg-green-900/30 dark:data-[type=success]:text-green-400
-            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 dark:data-[type=error]:bg-red-900/30 dark:data-[type=error]:text-red-400
-            data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 dark:data-[type=warning]:bg-yellow-900/30 dark:data-[type=warning]:text-yellow-400
-            data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 dark:data-[type=info]:bg-blue-900/30 dark:data-[type=info]:text-blue-400
+
+            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 data-[type=success]:text-green-800
+            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 data-[type=error]:text-red-800
+            data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 data-[type=warning]:text-yellow-800
+            data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 data-[type=info]:text-blue-800
           `,
           description: `
             text-sm
-            group-[.toast]:text-muted-foreground
-            dark:group-[.toast]:text-muted-foreground/80
+            group-[.toast]:text-neutral-600
           `,
           actionButton: `
             ml-auto
             rounded-md px-3 py-1 text-sm font-semibold
-            bg-primary text-primary-foreground
-            hover:bg-primary/80
+            bg-neutral-800 text-white
+            hover:bg-neutral-700
             transition-colors duration-200
           `,
           cancelButton: `
             ml-2
             rounded-md px-3 py-1 text-sm font-semibold
-            bg-muted text-muted-foreground
-            hover:bg-muted/80
+            bg-neutral-100 text-neutral-700
+            hover:bg-neutral-200
             transition-colors duration-200
           `
         }
@@ -3078,46 +3072,22 @@ var Toaster = ({ ...props }) => {
 };
 var toast = {
   success: (message) => import_sonner.toast.success(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_phosphor_react15.CheckCircle,
-      {
-        className: `${iconBaseClass} text-green-600 dark:text-green-400`,
-        weight: "fill"
-      }
-    )
+    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react15.CheckCircle, { className: `${iconBaseClass} text-green-600`, weight: "fill" })
   }),
   error: (message) => import_sonner.toast.error(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_phosphor_react15.XCircle,
-      {
-        className: `${iconBaseClass} text-red-600 dark:text-red-400`,
-        weight: "fill"
-      }
-    )
+    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react15.XCircle, { className: `${iconBaseClass} text-red-600`, weight: "fill" })
   }),
   warning: (message) => import_sonner.toast.warning(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_phosphor_react15.Warning,
-      {
-        className: `${iconBaseClass} text-yellow-600 dark:text-yellow-400`,
-        weight: "fill"
-      }
-    )
+    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react15.Warning, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" })
   }),
   info: (message) => import_sonner.toast.info(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_phosphor_react15.Info,
-      {
-        className: `${iconBaseClass} text-blue-600 dark:text-blue-400`,
-        weight: "fill"
-      }
-    )
+    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react15.Info, { className: `${iconBaseClass} text-blue-600`, weight: "fill" })
   }),
   loading: (message) => (0, import_sonner.toast)(message, {
     icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       import_phosphor_react15.Spinner,
       {
-        className: `${iconBaseClass} animate-spin text-zinc-500 dark:text-zinc-400`,
+        className: `${iconBaseClass} animate-spin text-neutral-500`,
         weight: "fill"
       }
     )

package/dist/index.mjs

@@ -1379,7 +1379,7 @@ function MultiCombobox({
       {
         className: "flex items-center gap-1 rounded-md border p-1",
         children: [
-          /* @__PURE__ */ jsx18("span", { className: "truncate whitespace-break-spaces text-xs", children: item.label }),
+          /* @__PURE__ */ jsx18("span", { className: "whitespace-break-spaces text-xs", children: item.label }),
           /* @__PURE__ */ jsx18(
             "span",
             {
@@ -1389,12 +1389,6 @@ function MultiCombobox({
                 e.stopPropagation();
                 handleSelection(item.value);
               },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  handleSelection(item.value);
-                }
-              },
               className: "cursor-pointer p-0 m-0 text-xs flex items-center justify-center hover:text-red-500 hover:scale-110 transition-all",
               children: /* @__PURE__ */ jsx18(X2, { size: 14 })
             }
@@ -1403,7 +1397,7 @@ function MultiCombobox({
       },
       item.value
     ));
-    return /* @__PURE__ */ jsx18("div", { className: "flex flex-wrap gap-2", children: items2 });
+    return /* @__PURE__ */ jsx18("div", { className: "flex w-full flex-wrap gap-2", children: items2 });
   }, [handleSelection, placeholder, selectedItems]);
   return /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-col gap-1 w-full min-w-[150px]", className), children: [
     label && /* @__PURE__ */ jsx18(LabelBase_default, { className: labelClassname, children: label }),
@@ -2837,7 +2831,13 @@ var SlideBase = React23.forwardRef(
 SlideBase.displayName = "SlideBase";
 
 // src/components/ui/SonnerBase.tsx
-import { CheckCircle, XCircle, Info, Warning, Spinner } from "phosphor-react";
+import {
+  CheckCircle,
+  XCircle,
+  Info,
+  Warning,
+  Spinner
+} from "phosphor-react";
 import { Toaster as Sonner, toast as sonnertoast } from "sonner";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var iconBaseClass = "w-5 h-auto";
@@ -2851,34 +2851,34 @@ var Toaster = ({ ...props }) => {
         classNames: {
           toast: `
             group toast
-            bg-white dark:bg-gray-900
-            text-gray-900 dark:text-gray-100
+            bg-white
+            text-neutral-800
             shadow-lg rounded-md
             border-l-8
-            border-border
+            border-neutral-200
             flex items-center gap-3
-            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 dark:data-[type=success]:bg-green-900/30 dark:data-[type=success]:text-green-400
-            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 dark:data-[type=error]:bg-red-900/30 dark:data-[type=error]:text-red-400
-            data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 dark:data-[type=warning]:bg-yellow-900/30 dark:data-[type=warning]:text-yellow-400
-            data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 dark:data-[type=info]:bg-blue-900/30 dark:data-[type=info]:text-blue-400
+
+            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 data-[type=success]:text-green-800
+            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 data-[type=error]:text-red-800
+            data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 data-[type=warning]:text-yellow-800
+            data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 data-[type=info]:text-blue-800
           `,
           description: `
             text-sm
-            group-[.toast]:text-muted-foreground
-            dark:group-[.toast]:text-muted-foreground/80
+            group-[.toast]:text-neutral-600
           `,
           actionButton: `
             ml-auto
             rounded-md px-3 py-1 text-sm font-semibold
-            bg-primary text-primary-foreground
-            hover:bg-primary/80
+            bg-neutral-800 text-white
+            hover:bg-neutral-700
             transition-colors duration-200
           `,
           cancelButton: `
             ml-2
             rounded-md px-3 py-1 text-sm font-semibold
-            bg-muted text-muted-foreground
-            hover:bg-muted/80
+            bg-neutral-100 text-neutral-700
+            hover:bg-neutral-200
             transition-colors duration-200
           `
         }
@@ -2889,46 +2889,22 @@ var Toaster = ({ ...props }) => {
 };
 var toast = {
   success: (message) => sonnertoast.success(message, {
-    icon: /* @__PURE__ */ jsx33(
-      CheckCircle,
-      {
-        className: `${iconBaseClass} text-green-600 dark:text-green-400`,
-        weight: "fill"
-      }
-    )
+    icon: /* @__PURE__ */ jsx33(CheckCircle, { className: `${iconBaseClass} text-green-600`, weight: "fill" })
   }),
   error: (message) => sonnertoast.error(message, {
-    icon: /* @__PURE__ */ jsx33(
-      XCircle,
-      {
-        className: `${iconBaseClass} text-red-600 dark:text-red-400`,
-        weight: "fill"
-      }
-    )
+    icon: /* @__PURE__ */ jsx33(XCircle, { className: `${iconBaseClass} text-red-600`, weight: "fill" })
   }),
   warning: (message) => sonnertoast.warning(message, {
-    icon: /* @__PURE__ */ jsx33(
-      Warning,
-      {
-        className: `${iconBaseClass} text-yellow-600 dark:text-yellow-400`,
-        weight: "fill"
-      }
-    )
+    icon: /* @__PURE__ */ jsx33(Warning, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" })
   }),
   info: (message) => sonnertoast.info(message, {
-    icon: /* @__PURE__ */ jsx33(
-      Info,
-      {
-        className: `${iconBaseClass} text-blue-600 dark:text-blue-400`,
-        weight: "fill"
-      }
-    )
+    icon: /* @__PURE__ */ jsx33(Info, { className: `${iconBaseClass} text-blue-600`, weight: "fill" })
   }),
   loading: (message) => sonnertoast(message, {
     icon: /* @__PURE__ */ jsx33(
       Spinner,
       {
-        className: `${iconBaseClass} animate-spin text-zinc-500 dark:text-zinc-400`,
+        className: `${iconBaseClass} animate-spin text-neutral-500`,
         weight: "fill"
       }
     )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlw-packages/react-components",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",