shadcn-ui-react 0.1.1 → 0.2.0

package/dist/style.css

@@ -1,5 +1,3 @@
-@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";
-
 /* src/index.css */
 @layer theme, base, components, utilities;
 @layer theme {
@@ -26,7 +24,11 @@
     --color-red-300: oklch(0.808 0.114 19.571);
     --color-red-400: oklch(0.704 0.191 22.216);
     --color-red-600: oklch(0.577 0.245 27.325);
+    --color-gray-100: oklch(0.967 0.003 264.542);
+    --color-gray-200: oklch(0.928 0.006 264.531);
+    --color-gray-300: oklch(0.872 0.01 258.338);
     --color-black: #000;
+    --color-white: #fff;
     --spacing: 0.25rem;
     --container-sm: 24rem;
     --container-lg: 32rem;
@@ -36,16 +38,19 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --tracking-widest: 0.1em;
     --leading-relaxed: 1.625;
-    --radius-sm: 0.25rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -330,6 +335,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .-bottom-5 {
+    bottom: calc(var(--spacing) * -5);
+  }
   .-bottom-12 {
     bottom: calc(var(--spacing) * -12);
   }
@@ -402,6 +410,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -423,6 +434,12 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
+  .ml-2\.5 {
+    margin-left: calc(var(--spacing) * 2.5);
+  }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -435,6 +452,12 @@
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -444,6 +467,14 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -465,6 +496,9 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -477,9 +511,24 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+  .h-36 {
+    height: calc(var(--spacing) * 36);
+  }
+  .h-\[1\.2rem\] {
+    height: 1.2rem;
+  }
   .h-\[1px\] {
     height: 1px;
   }
+  .h-\[calc\(80vh-220px\)\] {
+    height: calc(80vh - 220px);
+  }
   .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
     height: var(--radix-navigation-menu-viewport-height);
   }
@@ -495,6 +544,9 @@
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -537,18 +589,48 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+  .w-36 {
+    width: calc(var(--spacing) * 36);
+  }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-\[1\.2rem\] {
+    width: 1.2rem;
+  }
   .w-\[1px\] {
     width: 1px;
   }
+  .w-\[70px\] {
+    width: 70px;
+  }
+  .w-\[80px\] {
+    width: 80px;
+  }
   .w-\[100px\] {
     width: 100px;
   }
+  .w-\[150px\] {
+    width: 150px;
+  }
   .w-full {
     width: 100%;
   }
@@ -581,6 +663,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-none {
+    flex: none;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -615,12 +700,30 @@
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-0 {
+    --tw-scale-x: 0%;
+    --tw-scale-y: 0%;
+    --tw-scale-z: 0%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .rotate-0 {
+    rotate: 0deg;
+  }
   .rotate-45 {
     rotate: 45deg;
   }
   .rotate-90 {
     rotate: 90deg;
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }
@@ -630,6 +733,9 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -657,12 +763,18 @@
   .items-end {
     align-items: flex-end;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -696,6 +808,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -717,6 +836,11 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -736,23 +860,23 @@
     border-radius: calc(infinity * 1px);
   }
   .rounded-lg {
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius);
   }
   .rounded-md {
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
   }
   .rounded-sm {
-    border-radius: var(--radius-sm);
+    border-radius: calc(var(--radius) - 4px);
   }
   .rounded-xl {
-    border-radius: var(--radius-xl);
+    border-radius: calc(var(--radius) + 4px);
   }
   .rounded-t-\[10px\] {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
   }
   .rounded-tl-sm {
-    border-top-left-radius: var(--radius-sm);
+    border-top-left-radius: calc(var(--radius) - 4px);
   }
   .border {
     border-style: var(--tw-border-style);
@@ -782,6 +906,25 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .border-destructive {
+    border-color: var(--destructive);
+  }
+  .border-destructive\/50 {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+  }
+  .border-input {
+    border-color: var(--input);
+  }
+  .border-primary {
+    border-color: var(--primary);
+  }
+  .border-primary\/50 {
+    border-color: color-mix(in oklab, var(--primary) 50%, transparent);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -791,15 +934,70 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
+  .bg-accent {
+    background-color: var(--accent);
+  }
+  .bg-background {
+    background-color: var(--background);
+  }
   .bg-black\/80 {
     background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
   }
+  .bg-border {
+    background-color: var(--border);
+  }
+  .bg-card {
+    background-color: var(--card);
+  }
+  .bg-destructive {
+    background-color: var(--destructive);
+  }
+  .bg-foreground {
+    background-color: var(--foreground);
+  }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
+  .bg-muted {
+    background-color: var(--muted);
+  }
+  .bg-muted\/50 {
+    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+  }
+  .bg-popover {
+    background-color: var(--popover);
+  }
+  .bg-primary {
+    background-color: var(--primary);
+  }
+  .bg-primary\/10 {
+    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+  }
+  .bg-primary\/20 {
+    background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+  }
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .fill-current {
     fill: currentColor;
   }
+  .fill-primary {
+    fill: var(--primary);
+  }
+  .object-cover {
+    -o-object-fit: cover;
+    object-fit: cover;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -821,6 +1019,12 @@
   .p-\[1px\] {
     padding: 1px;
   }
+  .\!px-0 {
+    padding-inline: calc(var(--spacing) * 0) !important;
+  }
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -854,6 +1058,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -866,6 +1073,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -902,6 +1112,10 @@
   .align-middle {
     vertical-align: middle;
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -910,6 +1124,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -921,6 +1139,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -947,9 +1169,51 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-accent-foreground {
+    color: var(--accent-foreground);
+  }
+  .text-black {
+    color: var(--color-black);
+  }
+  .text-card-foreground {
+    color: var(--card-foreground);
+  }
   .text-current {
     color: currentColor;
   }
+  .text-destructive {
+    color: var(--destructive);
+  }
+  .text-destructive-foreground {
+    color: var(--destructive-foreground);
+  }
+  .text-foreground {
+    color: var(--foreground);
+  }
+  .text-foreground\/50 {
+    color: color-mix(in oklab, var(--foreground) 50%, transparent);
+  }
+  .text-gray-100 {
+    color: var(--color-gray-100);
+  }
+  .text-muted-foreground {
+    color: var(--muted-foreground);
+  }
+  .text-popover-foreground {
+    color: var(--popover-foreground);
+  }
+  .text-primary {
+    color: var(--primary);
+  }
+  .text-primary-foreground {
+    color: var(--primary-foreground);
+  }
+  .text-secondary-foreground {
+    color: var(--secondary-foreground);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -965,6 +1229,9 @@
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-80 {
+    opacity: 80%;
+  }
   .opacity-90 {
     opacity: 90%;
   }
@@ -977,8 +1244,8 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
-  .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow:
       var(--tw-inset-shadow),
       var(--tw-inset-ring-shadow),
@@ -986,8 +1253,8 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
-  .shadow-md {
-    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
       var(--tw-inset-shadow),
       var(--tw-inset-ring-shadow),
@@ -995,8 +1262,8 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
-  .shadow-sm {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
       var(--tw-inset-shadow),
       var(--tw-inset-ring-shadow),
@@ -1004,8 +1271,8 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
-  .ring {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
       var(--tw-inset-shadow),
       var(--tw-inset-ring-shadow),
@@ -1031,6 +1298,12 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .ring-ring {
+    --tw-ring-color: var(--ring);
+  }
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--background);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1104,6 +1377,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
   .duration-1000 {
     --tw-duration: 1000ms;
     transition-duration: 1000ms;
@@ -1116,6 +1393,15 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .animate-in {
+    animation-name: enter;
+    animation-duration: 150ms;
+    --tw-enter-opacity: initial;
+    --tw-enter-scale: initial;
+    --tw-enter-rotate: initial;
+    --tw-enter-translate-x: initial;
+    --tw-enter-translate-y: initial;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1125,6 +1411,30 @@
     -moz-user-select: none;
     user-select: none;
   }
+  .duration-200 {
+    animation-duration: 200ms;
+  }
+  .duration-300 {
+    animation-duration: 300ms;
+  }
+  .duration-500 {
+    animation-duration: 500ms;
+  }
+  .duration-1000 {
+    animation-duration: 1000ms;
+  }
+  .ease-in-out {
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .ease-out {
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+  .fade-in-0 {
+    --tw-enter-opacity: 0;
+  }
+  .zoom-in-95 {
+    --tw-enter-scale: .95;
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1137,11 +1447,51 @@
       rotate: 180deg;
     }
   }
+  .group-\[\.destructive\]\:border-muted\/40 {
+    &:is(:where(.group):is(.destructive) *) {
+      border-color: color-mix(in oklab, var(--muted) 40%, transparent);
+    }
+  }
   .group-\[\.destructive\]\:text-red-300 {
     &:is(:where(.group):is(.destructive) *) {
       color: var(--color-red-300);
     }
   }
+  .group-\[\.toast\]\:bg-muted {
+    &:is(:where(.group):is(.toast) *) {
+      background-color: var(--muted);
+    }
+  }
+  .group-\[\.toast\]\:bg-primary {
+    &:is(:where(.group):is(.toast) *) {
+      background-color: var(--primary);
+    }
+  }
+  .group-\[\.toast\]\:text-muted-foreground {
+    &:is(:where(.group):is(.toast) *) {
+      color: var(--muted-foreground);
+    }
+  }
+  .group-\[\.toast\]\:text-primary-foreground {
+    &:is(:where(.group):is(.toast) *) {
+      color: var(--primary-foreground);
+    }
+  }
+  .group-\[\.toaster\]\:border-border {
+    &:is(:where(.group):is(.toaster) *) {
+      border-color: var(--border);
+    }
+  }
+  .group-\[\.toaster\]\:bg-background {
+    &:is(:where(.group):is(.toaster) *) {
+      background-color: var(--background);
+    }
+  }
+  .group-\[\.toaster\]\:text-foreground {
+    &:is(:where(.group):is(.toaster) *) {
+      color: var(--foreground);
+    }
+  }
   .group-\[\.toaster\]\:shadow-lg {
     &:is(:where(.group):is(.toaster) *) {
       --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -1186,6 +1536,14 @@
       font-weight: var(--font-weight-medium);
     }
   }
+  .placeholder\:text-muted-foreground {
+    &::-moz-placeholder {
+      color: var(--muted-foreground);
+    }
+    &::placeholder {
+      color: var(--muted-foreground);
+    }
+  }
   .after\:absolute {
     &::after {
       content: var(--tw-content);
@@ -1219,8 +1577,8 @@
   }
   .first\:rounded-l-md {
     &:first-child {
-      border-top-left-radius: var(--radius-md);
-      border-bottom-left-radius: var(--radius-md);
+      border-top-left-radius: calc(var(--radius) - 2px);
+      border-bottom-left-radius: calc(var(--radius) - 2px);
     }
   }
   .first\:border-l {
@@ -1231,8 +1589,8 @@
   }
   .last\:rounded-r-md {
     &:last-child {
-      border-top-right-radius: var(--radius-md);
-      border-bottom-right-radius: var(--radius-md);
+      border-top-right-radius: calc(var(--radius) - 2px);
+      border-bottom-right-radius: calc(var(--radius) - 2px);
     }
   }
   .focus-within\:relative {
@@ -1245,6 +1603,118 @@
       z-index: 20;
     }
   }
+  .hover\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+      }
+    }
+  }
+  .hover\:bg-destructive\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--destructive) 80%, transparent);
+      }
+    }
+  }
+  .hover\:bg-destructive\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      }
+    }
+  }
+  .hover\:bg-muted {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted);
+      }
+    }
+  }
+  .hover\:bg-muted\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+      }
+    }
+  }
+  .hover\:bg-primary {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+      }
+    }
+  }
+  .hover\:bg-primary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
+      }
+    }
+  }
+  .hover\:bg-primary\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+  }
+  .hover\:bg-secondary {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--secondary);
+      }
+    }
+  }
+  .hover\:bg-secondary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+      }
+    }
+  }
+  .hover\:bg-transparent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
+  .hover\:text-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--accent-foreground);
+      }
+    }
+  }
+  .hover\:text-black {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-black);
+      }
+    }
+  }
+  .hover\:text-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground);
+      }
+    }
+  }
+  .hover\:text-muted-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--muted-foreground);
+      }
+    }
+  }
+  .hover\:text-primary-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--primary-foreground);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -1259,6 +1729,33 @@
       }
     }
   }
+  .group-\[\.destructive\]\:hover\:border-destructive\/30 {
+    &:is(:where(.group):is(.destructive) *) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
+        }
+      }
+    }
+  }
+  .group-\[\.destructive\]\:hover\:bg-destructive {
+    &:is(:where(.group):is(.destructive) *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--destructive);
+        }
+      }
+    }
+  }
+  .group-\[\.destructive\]\:hover\:text-destructive-foreground {
+    &:is(:where(.group):is(.destructive) *) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--destructive-foreground);
+        }
+      }
+    }
+  }
   .group-\[\.destructive\]\:hover\:text-red-50 {
     &:is(:where(.group):is(.destructive) *) {
       &:hover {
@@ -1268,6 +1765,26 @@
       }
     }
   }
+  .focus\:bg-accent {
+    &:focus {
+      background-color: var(--accent);
+    }
+  }
+  .focus\:bg-primary {
+    &:focus {
+      background-color: var(--primary);
+    }
+  }
+  .focus\:text-accent-foreground {
+    &:focus {
+      color: var(--accent-foreground);
+    }
+  }
+  .focus\:text-primary-foreground {
+    &:focus {
+      color: var(--primary-foreground);
+    }
+  }
   .focus\:opacity-100 {
     &:focus {
       opacity: 100%;
@@ -1295,6 +1812,11 @@
         var(--tw-shadow);
     }
   }
+  .focus\:ring-ring {
+    &:focus {
+      --tw-ring-color: var(--ring);
+    }
+  }
   .focus\:ring-offset-2 {
     &:focus {
       --tw-ring-offset-width: 2px;
@@ -1307,6 +1829,13 @@
       outline-style: none;
     }
   }
+  .group-\[\.destructive\]\:focus\:ring-destructive {
+    &:is(:where(.group):is(.destructive) *) {
+      &:focus {
+        --tw-ring-color: var(--destructive);
+      }
+    }
+  }
   .group-\[\.destructive\]\:focus\:ring-red-400 {
     &:is(:where(.group):is(.destructive) *) {
       &:focus {
@@ -1343,6 +1872,11 @@
         var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-ring {
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+    }
+  }
   .focus-visible\:ring-offset-1 {
     &:focus-visible {
       --tw-ring-offset-width: 1px;
@@ -1355,6 +1889,11 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .focus-visible\:ring-offset-background {
+    &:focus-visible {
+      --tw-ring-offset-color: var(--background);
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
@@ -1381,6 +1920,26 @@
       opacity: 50%;
     }
   }
+  .aria-selected\:bg-accent {
+    &[aria-selected=true] {
+      background-color: var(--accent);
+    }
+  }
+  .aria-selected\:bg-accent\/50 {
+    &[aria-selected=true] {
+      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    }
+  }
+  .aria-selected\:text-accent-foreground {
+    &[aria-selected=true] {
+      color: var(--accent-foreground);
+    }
+  }
+  .aria-selected\:text-muted-foreground {
+    &[aria-selected=true] {
+      color: var(--muted-foreground);
+    }
+  }
   .aria-selected\:opacity-30 {
     &[aria-selected=true] {
       opacity: 30%;
@@ -1391,6 +1950,11 @@
       opacity: 100%;
     }
   }
+  .data-\[active\]\:bg-accent\/50 {
+    &[data-active] {
+      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    }
+  }
   .data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;
@@ -1401,6 +1965,58 @@
       opacity: 50%;
     }
   }
+  .data-\[motion\=from-end\]\:slide-in-from-right-52 {
+    &[data-motion=from-end] {
+      --tw-enter-translate-x: 13rem;
+    }
+  }
+  .data-\[motion\=from-start\]\:slide-in-from-left-52 {
+    &[data-motion=from-start] {
+      --tw-enter-translate-x: -13rem;
+    }
+  }
+  .data-\[motion\=to-end\]\:slide-out-to-right-52 {
+    &[data-motion=to-end] {
+      --tw-exit-translate-x: 13rem;
+    }
+  }
+  .data-\[motion\=to-start\]\:slide-out-to-left-52 {
+    &[data-motion=to-start] {
+      --tw-exit-translate-x: -13rem;
+    }
+  }
+  .data-\[motion\^\=from-\]\:animate-in {
+    &[data-motion^=from-] {
+      animation-name: enter;
+      animation-duration: 150ms;
+      --tw-enter-opacity: initial;
+      --tw-enter-scale: initial;
+      --tw-enter-rotate: initial;
+      --tw-enter-translate-x: initial;
+      --tw-enter-translate-y: initial;
+    }
+  }
+  .data-\[motion\^\=from-\]\:fade-in {
+    &[data-motion^=from-] {
+      --tw-enter-opacity: 0;
+    }
+  }
+  .data-\[motion\^\=to-\]\:animate-out {
+    &[data-motion^=to-] {
+      animation-name: exit;
+      animation-duration: 150ms;
+      --tw-exit-opacity: initial;
+      --tw-exit-scale: initial;
+      --tw-exit-rotate: initial;
+      --tw-exit-translate-x: initial;
+      --tw-exit-translate-y: initial;
+    }
+  }
+  .data-\[motion\^\=to-\]\:fade-out {
+    &[data-motion^=to-] {
+      --tw-exit-opacity: 0;
+    }
+  }
   .data-\[panel-group-direction\=vertical\]\:h-px {
     &[data-panel-group-direction=vertical] {
       height: 1px;
@@ -1464,24 +2080,54 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[side\=bottom\]\:slide-in-from-top-2 {
+    &[data-side=bottom] {
+      --tw-enter-translate-y: -0.5rem;
+    }
+  }
   .data-\[side\=left\]\:-translate-x-1 {
     &[data-side=left] {
       --tw-translate-x: calc(var(--spacing) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[side\=left\]\:slide-in-from-right-2 {
+    &[data-side=left] {
+      --tw-enter-translate-x: 0.5rem;
+    }
+  }
   .data-\[side\=right\]\:translate-x-1 {
     &[data-side=right] {
       --tw-translate-x: calc(var(--spacing) * 1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[side\=right\]\:slide-in-from-left-2 {
+    &[data-side=right] {
+      --tw-enter-translate-x: -0.5rem;
+    }
+  }
   .data-\[side\=top\]\:-translate-y-1 {
     &[data-side=top] {
       --tw-translate-y: calc(var(--spacing) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[side\=top\]\:slide-in-from-bottom-2 {
+    &[data-side=top] {
+      --tw-enter-translate-y: 0.5rem;
+    }
+  }
+  .data-\[state\=active\]\:bg-background {
+    &[data-state=active] {
+      background-color: var(--background);
+    }
+  }
+  .data-\[state\=active\]\:text-foreground {
+    &[data-state=active] {
+      color: var(--foreground);
+    }
+  }
   .data-\[state\=active\]\:shadow {
     &[data-state=active] {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -1499,24 +2145,243 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=checked\]\:bg-primary {
+    &[data-state=checked] {
+      background-color: var(--primary);
+    }
+  }
+  .data-\[state\=checked\]\:text-primary-foreground {
+    &[data-state=checked] {
+      color: var(--primary-foreground);
+    }
+  }
   .data-\[state\=closed\]\:duration-300 {
     &[data-state=closed] {
       --tw-duration: 300ms;
       transition-duration: 300ms;
     }
   }
+  .data-\[state\=closed\]\:animate-out {
+    &[data-state=closed] {
+      animation-name: exit;
+      animation-duration: 150ms;
+      --tw-exit-opacity: initial;
+      --tw-exit-scale: initial;
+      --tw-exit-rotate: initial;
+      --tw-exit-translate-x: initial;
+      --tw-exit-translate-y: initial;
+    }
+  }
+  .data-\[state\=closed\]\:duration-300 {
+    &[data-state=closed] {
+      animation-duration: 300ms;
+    }
+  }
+  .data-\[state\=closed\]\:fade-out-0 {
+    &[data-state=closed] {
+      --tw-exit-opacity: 0;
+    }
+  }
+  .data-\[state\=closed\]\:fade-out-80 {
+    &[data-state=closed] {
+      --tw-exit-opacity: 0.8;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-bottom {
+    &[data-state=closed] {
+      --tw-exit-translate-y: 100%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-left {
+    &[data-state=closed] {
+      --tw-exit-translate-x: -100%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-left-1\/2 {
+    &[data-state=closed] {
+      --tw-exit-translate-x: -50%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-right {
+    &[data-state=closed] {
+      --tw-exit-translate-x: 100%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-right-full {
+    &[data-state=closed] {
+      --tw-exit-translate-x: 100%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-top {
+    &[data-state=closed] {
+      --tw-exit-translate-y: -100%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-top-\[48\%\] {
+    &[data-state=closed] {
+      --tw-exit-translate-y: -48%;
+    }
+  }
+  .data-\[state\=closed\]\:zoom-out-95 {
+    &[data-state=closed] {
+      --tw-exit-scale: .95;
+    }
+  }
+  .data-\[state\=hidden\]\:animate-out {
+    &[data-state=hidden] {
+      animation-name: exit;
+      animation-duration: 150ms;
+      --tw-exit-opacity: initial;
+      --tw-exit-scale: initial;
+      --tw-exit-rotate: initial;
+      --tw-exit-translate-x: initial;
+      --tw-exit-translate-y: initial;
+    }
+  }
+  .data-\[state\=hidden\]\:fade-out {
+    &[data-state=hidden] {
+      --tw-exit-opacity: 0;
+    }
+  }
+  .data-\[state\=on\]\:bg-accent {
+    &[data-state=on] {
+      background-color: var(--accent);
+    }
+  }
+  .data-\[state\=on\]\:text-accent-foreground {
+    &[data-state=on] {
+      color: var(--accent-foreground);
+    }
+  }
+  .data-\[state\=open\]\:bg-accent {
+    &[data-state=open] {
+      background-color: var(--accent);
+    }
+  }
+  .data-\[state\=open\]\:bg-accent\/50 {
+    &[data-state=open] {
+      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    }
+  }
+  .data-\[state\=open\]\:bg-secondary {
+    &[data-state=open] {
+      background-color: var(--secondary);
+    }
+  }
+  .data-\[state\=open\]\:text-accent-foreground {
+    &[data-state=open] {
+      color: var(--accent-foreground);
+    }
+  }
+  .data-\[state\=open\]\:text-muted-foreground {
+    &[data-state=open] {
+      color: var(--muted-foreground);
+    }
+  }
   .data-\[state\=open\]\:duration-500 {
     &[data-state=open] {
       --tw-duration: 500ms;
       transition-duration: 500ms;
     }
   }
+  .data-\[state\=open\]\:animate-in {
+    &[data-state=open] {
+      animation-name: enter;
+      animation-duration: 150ms;
+      --tw-enter-opacity: initial;
+      --tw-enter-scale: initial;
+      --tw-enter-rotate: initial;
+      --tw-enter-translate-x: initial;
+      --tw-enter-translate-y: initial;
+    }
+  }
+  .data-\[state\=open\]\:duration-500 {
+    &[data-state=open] {
+      animation-duration: 500ms;
+    }
+  }
+  .data-\[state\=open\]\:fade-in-0 {
+    &[data-state=open] {
+      --tw-enter-opacity: 0;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-bottom {
+    &[data-state=open] {
+      --tw-enter-translate-y: 100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-left {
+    &[data-state=open] {
+      --tw-enter-translate-x: -100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-left-1\/2 {
+    &[data-state=open] {
+      --tw-enter-translate-x: -50%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-right {
+    &[data-state=open] {
+      --tw-enter-translate-x: 100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-top {
+    &[data-state=open] {
+      --tw-enter-translate-y: -100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-top-\[48\%\] {
+    &[data-state=open] {
+      --tw-enter-translate-y: -48%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-top-full {
+    &[data-state=open] {
+      --tw-enter-translate-y: -100%;
+    }
+  }
+  .data-\[state\=open\]\:zoom-in-90 {
+    &[data-state=open] {
+      --tw-enter-scale: .9;
+    }
+  }
+  .data-\[state\=open\]\:zoom-in-95 {
+    &[data-state=open] {
+      --tw-enter-scale: .95;
+    }
+  }
+  .data-\[state\=selected\]\:bg-muted {
+    &[data-state=selected] {
+      background-color: var(--muted);
+    }
+  }
   .data-\[state\=unchecked\]\:translate-x-0 {
     &[data-state=unchecked] {
       --tw-translate-x: calc(var(--spacing) * 0);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=unchecked\]\:bg-input {
+    &[data-state=unchecked] {
+      background-color: var(--input);
+    }
+  }
+  .data-\[state\=visible\]\:animate-in {
+    &[data-state=visible] {
+      animation-name: enter;
+      animation-duration: 150ms;
+      --tw-enter-opacity: initial;
+      --tw-enter-scale: initial;
+      --tw-enter-rotate: initial;
+      --tw-enter-translate-x: initial;
+      --tw-enter-translate-y: initial;
+    }
+  }
+  .data-\[state\=visible\]\:fade-in {
+    &[data-state=visible] {
+      --tw-enter-opacity: 0;
+    }
+  }
   .data-\[swipe\=cancel\]\:translate-x-0 {
     &[data-swipe=cancel] {
       --tw-translate-x: calc(var(--spacing) * 0);
@@ -1529,6 +2394,17 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[swipe\=end\]\:animate-out {
+    &[data-swipe=end] {
+      animation-name: exit;
+      animation-duration: 150ms;
+      --tw-exit-opacity: initial;
+      --tw-exit-scale: initial;
+      --tw-exit-rotate: initial;
+      --tw-exit-translate-x: initial;
+      --tw-exit-translate-y: initial;
+    }
+  }
   .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\] {
     &[data-swipe=move] {
       --tw-translate-x: var(--radix-toast-swipe-move-x);
@@ -1585,6 +2461,16 @@
       gap: calc(var(--spacing) * 2.5);
     }
   }
+  .sm\:gap-6 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:gap-8 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:space-y-0 {
     @media (width >= 40rem) {
       :where(& > :not(:last-child)) {
@@ -1614,7 +2500,7 @@
   }
   .sm\:rounded-lg {
     @media (width >= 40rem) {
-      border-radius: var(--radius-lg);
+      border-radius: var(--radius);
     }
   }
   .sm\:text-left {
@@ -1622,11 +2508,39 @@
       text-align: left;
     }
   }
+  .sm\:text-3xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full {
+    &[data-state=open] {
+      @media (width >= 40rem) {
+        --tw-enter-translate-y: 100%;
+      }
+    }
+  }
   .md\:absolute {
     @media (width >= 48rem) {
       position: absolute;
     }
   }
+  .md\:ml-6 {
+    @media (width >= 48rem) {
+      margin-left: calc(var(--spacing) * 6);
+    }
+  }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .md\:h-\[calc\(80dvh-80px\)\] {
+    @media (width >= 48rem) {
+      height: calc(80dvh - 80px);
+    }
+  }
   .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
     @media (width >= 48rem) {
       width: var(--radix-navigation-menu-viewport-width);
@@ -1642,6 +2556,67 @@
       max-width: 420px;
     }
   }
+  .md\:max-w-sm {
+    @media (width >= 48rem) {
+      max-width: var(--container-sm);
+    }
+  }
+  .md\:px-2 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+  }
+  .lg\:block {
+    @media (width >= 64rem) {
+      display: block;
+    }
+  }
+  .lg\:flex {
+    @media (width >= 64rem) {
+      display: flex;
+    }
+  }
+  .lg\:w-\[250px\] {
+    @media (width >= 64rem) {
+      width: 250px;
+    }
+  }
+  .lg\:gap-8 {
+    @media (width >= 64rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
+  .dark\:scale-0 {
+    &:is(.dark *) {
+      --tw-scale-x: 0%;
+      --tw-scale-y: 0%;
+      --tw-scale-z: 0%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .dark\:scale-100 {
+    &:is(.dark *) {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .dark\:-rotate-90 {
+    &:is(.dark *) {
+      rotate: calc(90deg * -1);
+    }
+  }
+  .dark\:rotate-0 {
+    &:is(.dark *) {
+      rotate: 0deg;
+    }
+  }
+  .dark\:border-destructive {
+    &:is(.dark *) {
+      border-color: var(--destructive);
+    }
+  }
   .\[\&_\[cmdk-group-heading\]\]\:px-2 {
     & [cmdk-group-heading] {
       padding-inline: calc(var(--spacing) * 2);
@@ -1664,6 +2639,11 @@
       font-weight: var(--font-weight-medium);
     }
   }
+  .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
+    & [cmdk-group-heading] {
+      color: var(--muted-foreground);
+    }
+  }
   .\[\&_\[cmdk-group\]\]\:px-2 {
     & [cmdk-group] {
       padding-inline: calc(var(--spacing) * 2);
@@ -1735,41 +2715,51 @@
   }
   .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md {
     &:has(> .day-range-end) {
-      border-top-right-radius: var(--radius-md);
-      border-bottom-right-radius: var(--radius-md);
+      border-top-right-radius: calc(var(--radius) - 2px);
+      border-bottom-right-radius: calc(var(--radius) - 2px);
     }
   }
   .\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md {
     &:has(> .day-range-start) {
-      border-top-left-radius: var(--radius-md);
-      border-bottom-left-radius: var(--radius-md);
+      border-top-left-radius: calc(var(--radius) - 2px);
+      border-bottom-left-radius: calc(var(--radius) - 2px);
     }
   }
   .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md {
     &:has([aria-selected]) {
-      border-radius: var(--radius-md);
+      border-radius: calc(var(--radius) - 2px);
+    }
+  }
+  .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent {
+    &:has([aria-selected]) {
+      background-color: var(--accent);
     }
   }
   .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md {
     &:first-child {
       &:has([aria-selected]) {
-        border-top-left-radius: var(--radius-md);
-        border-bottom-left-radius: var(--radius-md);
+        border-top-left-radius: calc(var(--radius) - 2px);
+        border-bottom-left-radius: calc(var(--radius) - 2px);
       }
     }
   }
   .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md {
     &:last-child {
       &:has([aria-selected]) {
-        border-top-right-radius: var(--radius-md);
-        border-bottom-right-radius: var(--radius-md);
+        border-top-right-radius: calc(var(--radius) - 2px);
+        border-bottom-right-radius: calc(var(--radius) - 2px);
       }
     }
   }
+  .\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50 {
+    &:has([aria-selected].day-outside) {
+      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    }
+  }
   .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md {
     &:has([aria-selected].day-range-end) {
-      border-top-right-radius: var(--radius-md);
-      border-bottom-right-radius: var(--radius-md);
+      border-top-right-radius: calc(var(--radius) - 2px);
+      border-bottom-right-radius: calc(var(--radius) - 2px);
     }
   }
   .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
@@ -1812,6 +2802,16 @@
       height: calc(var(--spacing) * 3.5);
     }
   }
+  .\[\&\>svg\]\:text-destructive {
+    & > svg {
+      color: var(--destructive);
+    }
+  }
+  .\[\&\>svg\]\:text-foreground {
+    & > svg {
+      color: var(--foreground);
+    }
+  }
   .\[\&\>svg\+div\]\:translate-y-\[-3px\] {
     & > svg + div {
       --tw-translate-y: -3px;
@@ -1842,19 +2842,103 @@
     }
   }
 }
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
 @layer base {
-  html {
-    font-family: "Montserrat", sans-serif;
+  * {
+    border-color: var(--border);
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
   }
 }
-@keyframes pulse {
-  50% {
-    opacity: 0.5;
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
 @property --tw-rotate-x { syntax: "*"; inherits: false; initial-value: rotateX(0); }
 @property --tw-rotate-y { syntax: "*"; inherits: false; initial-value: rotateY(0); }
 @property --tw-rotate-z { syntax: "*"; inherits: false; initial-value: rotateZ(0); }
@@ -1892,4 +2976,9 @@
 @property --tw-duration { syntax: "*"; inherits: false; }
 @property --tw-ease { syntax: "*"; inherits: false; }
 @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; }
-/*! tailwindcss v4.0.8 | MIT License | https://tailwindcss.com */
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */