@jameskabz/nextcraft-ui 0.4.0 → 0.6.0

package/dist/styles.css

@@ -6,17 +6,20 @@
     --color-amber-200: oklch(92.4% 0.12 95.746);
     --color-amber-400: oklch(82.8% 0.189 84.429);
     --color-emerald-200: oklch(90.5% 0.093 164.15);
+    --color-emerald-300: oklch(84.5% 0.143 164.978);
     --color-emerald-400: oklch(76.5% 0.177 163.223);
     --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-rose-300: oklch(81% 0.117 11.638);
     --color-rose-400: oklch(71.2% 0.194 13.428);
     --color-slate-300: oklch(86.9% 0.022 252.894);
     --color-slate-900: oklch(20.8% 0.042 265.755);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
-    --container-lg: 32rem;
+    --container-xl: 36rem;
     --container-3xl: 48rem;
     --container-5xl: 64rem;
     --container-6xl: 72rem;
@@ -46,6 +49,7 @@
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
+    --animate-spin: spin 1s linear infinite;
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-xl: 24px;
@@ -243,6 +247,9 @@
   .top-6 {
     top: calc(var(--spacing) * 6);
   }
+  .top-10 {
+    top: calc(var(--spacing) * 10);
+  }
   .top-full {
     top: 100%;
   }
@@ -282,6 +289,9 @@
   .z-20 {
     z-index: 20;
   }
+  .z-40 {
+    z-index: 40;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -294,6 +304,9 @@
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -336,9 +349,15 @@
   .hidden {
     display: none;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -351,6 +370,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
   .h-9 {
     height: calc(var(--spacing) * 9);
   }
@@ -375,6 +397,9 @@
   .h-full {
     height: 100%;
   }
+  .max-h-\[calc\(100vh-1rem\)\] {
+    max-height: calc(100vh - 1rem);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -393,6 +418,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-11 {
     width: calc(var(--spacing) * 11);
   }
@@ -402,9 +430,15 @@
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
+  .w-48 {
+    width: calc(var(--spacing) * 48);
+  }
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
@@ -417,18 +451,27 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
-  .max-w-lg {
-    max-width: var(--container-lg);
-  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
+  .min-w-48 {
+    min-width: calc(var(--spacing) * 48);
+  }
   .flex-1 {
     flex: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -464,6 +507,15 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -546,6 +598,13 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-6 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -553,6 +612,13 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-10 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -603,6 +669,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-\[3px\] {
+    border-style: var(--tw-border-style);
+    border-width: 3px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -627,15 +697,39 @@
   .border-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
     border-color: rgb(var(--nc-accent-1)/0.3);
   }
+  .border-\[rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
+    border-color: rgb(var(--nc-accent-1)/0.6);
+  }
+  .border-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
+    border-color: rgb(var(--nc-accent-1)/0.25);
+  }
+  .border-\[rgb\(var\(--nc-accent-1\)\/0\.45\)\] {
+    border-color: rgb(var(--nc-accent-1)/0.45);
+  }
+  .border-\[rgb\(var\(--nc-accent-2\)\/0\.45\)\] {
+    border-color: rgb(var(--nc-accent-2)/0.45);
+  }
+  .border-\[rgb\(var\(--nc-accent-3\)\/0\.45\)\] {
+    border-color: rgb(var(--nc-accent-3)/0.45);
+  }
+  .border-\[rgb\(var\(--nc-accent-3\)\/0\.65\)\] {
+    border-color: rgb(var(--nc-accent-3)/0.65);
+  }
   .border-\[rgb\(var\(--nc-border\)\/0\.3\)\] {
     border-color: rgb(var(--nc-border)/0.3);
   }
+  .border-\[rgb\(var\(--nc-border\)\/0\.15\)\] {
+    border-color: rgb(var(--nc-border)/0.15);
+  }
   .border-\[rgb\(var\(--nc-border\)\/0\.35\)\] {
     border-color: rgb(var(--nc-border)/0.35);
   }
   .border-\[rgb\(var\(--nc-border\)\/0\.45\)\] {
     border-color: rgb(var(--nc-border)/0.45);
   }
+  .border-\[rgb\(var\(--nc-fg-muted\)\)\] {
+    border-color: rgb(var(--nc-fg-muted));
+  }
   .border-amber-400\/40 {
     border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -663,6 +757,21 @@
       border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
     }
   }
+  .border-white\/60 {
+    border-color: color-mix(in srgb, #fff 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 60%, transparent);
+    }
+  }
+  .border-t-\[rgb\(var\(--nc-accent-1\)\)\] {
+    border-top-color: rgb(var(--nc-accent-1));
+  }
+  .border-t-transparent {
+    border-top-color: transparent;
+  }
+  .border-t-white {
+    border-top-color: var(--color-white);
+  }
   .bg-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
     background-color: rgb(var(--nc-accent-1));
   }
@@ -681,18 +790,39 @@
   .bg-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
     background-color: rgb(var(--nc-accent-1)/0.3);
   }
+  .bg-\[rgb\(var\(--nc-accent-1\)\/0\.08\)\] {
+    background-color: rgb(var(--nc-accent-1)/0.08);
+  }
+  .bg-\[rgb\(var\(--nc-accent-1\)\/0\.12\)\] {
+    background-color: rgb(var(--nc-accent-1)/0.12);
+  }
   .bg-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
     background-color: rgb(var(--nc-accent-1)/0.25);
   }
   .bg-\[rgb\(var\(--nc-accent-1\)\/0\.65\)\] {
     background-color: rgb(var(--nc-accent-1)/0.65);
   }
+  .bg-\[rgb\(var\(--nc-accent-2\)\/0\.12\)\] {
+    background-color: rgb(var(--nc-accent-2)/0.12);
+  }
+  .bg-\[rgb\(var\(--nc-accent-3\)\/0\.12\)\] {
+    background-color: rgb(var(--nc-accent-3)/0.12);
+  }
+  .bg-\[rgb\(var\(--nc-accent-3\)\/0\.18\)\] {
+    background-color: rgb(var(--nc-accent-3)/0.18);
+  }
+  .bg-\[rgb\(var\(--nc-surface\)\/0\.2\)\] {
+    background-color: rgb(var(--nc-surface)/0.2);
+  }
   .bg-\[rgb\(var\(--nc-surface\)\/0\.08\)\] {
     background-color: rgb(var(--nc-surface)/0.08);
   }
   .bg-\[rgb\(var\(--nc-surface\)\/0\.12\)\] {
     background-color: rgb(var(--nc-surface)/0.12);
   }
+  .bg-\[rgb\(var\(--nc-surface\)\/0\.18\)\] {
+    background-color: rgb(var(--nc-surface)/0.18);
+  }
   .bg-\[rgb\(var\(--nc-surface\)\/1\.52\)\] {
     background-color: rgb(var(--nc-surface)/1.52);
   }
@@ -780,6 +910,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -792,6 +925,9 @@
   .p-12 {
     padding: calc(var(--spacing) * 12);
   }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -822,6 +958,9 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
@@ -846,6 +985,9 @@
   .text-left {
     text-align: left;
   }
+  .text-right {
+    text-align: right;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -890,6 +1032,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-\[0\.2em\] {
+    --tw-tracking: 0.2em;
+    letter-spacing: 0.2em;
+  }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -903,6 +1049,9 @@
   .text-\[rgb\(var\(--nc-accent-1\)\)\] {
     color: rgb(var(--nc-accent-1));
   }
+  .text-\[rgb\(var\(--nc-accent-3\)\)\] {
+    color: rgb(var(--nc-accent-3));
+  }
   .text-\[rgb\(var\(--nc-accent-soft\)\)\] {
     color: rgb(var(--nc-accent-soft));
   }
@@ -924,6 +1073,12 @@
   .text-emerald-200 {
     color: var(--color-emerald-200);
   }
+  .text-emerald-300 {
+    color: var(--color-emerald-300);
+  }
+  .text-rose-300 {
+    color: var(--color-rose-300);
+  }
   .text-slate-300 {
     color: var(--color-slate-300);
   }
@@ -939,6 +1094,12 @@
   .text-white {
     color: var(--color-white);
   }
+  .text-white\/60 {
+    color: color-mix(in srgb, #fff 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-white) 60%, transparent);
+    }
+  }
   .text-white\/80 {
     color: color-mix(in srgb, #fff 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -948,16 +1109,28 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .accent-\[rgb\(var\(--nc-accent-1\)\)\] {
+    accent-color: rgb(var(--nc-accent-1));
+  }
   .opacity-0 {
     opacity: 0%;
   }
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -976,6 +1149,10 @@
     --tw-shadow: 0 10px 20px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.35));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_12px_30px_rgb\(var\(--nc-accent-1\)\/0\.35\)\] {
+    --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.35));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_12px_30px_rgb\(var\(--nc-accent-1\)\/0\.45\)\] {
     --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.45));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -984,6 +1161,18 @@
     --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-2)/0.45));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.25\)\] {
+    --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.35\)\] {
+    --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.35));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_12px_36px_rgba\(0\,0\,0\,0\.2\)\] {
+    --tw-shadow: 0 12px 36px var(--tw-shadow-color, rgba(0,0,0,0.2));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_15px_35px_rgba\(0\,0\,0\,0\.35\)\] {
     --tw-shadow: 0 15px 35px var(--tw-shadow-color, rgba(0,0,0,0.35));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -996,6 +1185,10 @@
     --tw-shadow: 0 18px 40px var(--tw-shadow-color, rgba(0,0,0,0.35));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_18px_50px_rgba\(0\,0\,0\,0\.35\)\] {
+    --tw-shadow: 0 18px 50px var(--tw-shadow-color, rgba(0,0,0,0.35));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.45\)\] {
     --tw-shadow: 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.45));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1016,6 +1209,10 @@
     --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), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), 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));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1028,6 +1225,9 @@
     --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: 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,);
+  }
   .backdrop-blur-2xl {
     --tw-backdrop-blur: blur(var(--blur-2xl));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1058,6 +1258,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-opacity {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1117,6 +1322,54 @@
       --tw-ring-color: rgb(var(--nc-accent-1)/0.5);
     }
   }
+  .file\:mr-4 {
+    &::file-selector-button {
+      margin-right: calc(var(--spacing) * 4);
+    }
+  }
+  .file\:rounded-xl {
+    &::file-selector-button {
+      border-radius: var(--radius-xl);
+    }
+  }
+  .file\:border-0 {
+    &::file-selector-button {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .file\:bg-\[rgb\(var\(--nc-surface\)\/0\.35\)\] {
+    &::file-selector-button {
+      background-color: rgb(var(--nc-surface)/0.35);
+    }
+  }
+  .file\:px-4 {
+    &::file-selector-button {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .file\:py-2 {
+    &::file-selector-button {
+      padding-block: calc(var(--spacing) * 2);
+    }
+  }
+  .file\:text-sm {
+    &::file-selector-button {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .file\:font-semibold {
+    &::file-selector-button {
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+    }
+  }
+  .file\:text-\[rgb\(var\(--nc-fg\)\)\] {
+    &::file-selector-button {
+      color: rgb(var(--nc-fg));
+    }
+  }
   .placeholder\:text-\[rgb\(var\(--nc-fg-soft\)\)\] {
     &::placeholder {
       color: rgb(var(--nc-fg-soft));
@@ -1299,6 +1552,17 @@
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
+  .focus-within\:ring-2 {
+    &:focus-within {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-within\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
+    &:focus-within {
+      --tw-ring-color: rgb(var(--nc-accent-1)/0.5);
+    }
+  }
   .hover\:scale-\[1\.01\] {
     &:hover {
       @media (hover: hover) {
@@ -1341,6 +1605,13 @@
       }
     }
   }
+  .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.2\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgb(var(--nc-surface)/0.2);
+      }
+    }
+  }
   .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.12\)\] {
     &:hover {
       @media (hover: hover) {
@@ -1348,6 +1619,20 @@
       }
     }
   }
+  .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.16\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgb(var(--nc-surface)/0.16);
+      }
+    }
+  }
+  .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.18\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgb(var(--nc-surface)/0.18);
+      }
+    }
+  }
   .hover\:bg-transparent {
     &:hover {
       @media (hover: hover) {
@@ -1365,6 +1650,13 @@
       }
     }
   }
+  .hover\:text-\[rgb\(var\(--nc-accent-1\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: rgb(var(--nc-accent-1));
+      }
+    }
+  }
   .hover\:text-\[rgb\(var\(--nc-fg\)\)\] {
     &:hover {
       @media (hover: hover) {
@@ -1380,6 +1672,14 @@
       }
     }
   }
+  .hover\:shadow-\[0_16px_36px_rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 16px 36px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.5));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .hover\:shadow-\[0_16px_36px_rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
     &:hover {
       @media (hover: hover) {
@@ -1488,6 +1788,11 @@
       opacity: 50%;
     }
   }
+  .disabled\:opacity-60 {
+    &:disabled {
+      opacity: 60%;
+    }
+  }
   .disabled\:hover\:scale-100 {
     &:disabled {
       &:hover {
@@ -1500,6 +1805,11 @@
       }
     }
   }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -1520,11 +1830,36 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
+  .md\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
+    @media (width >= 48rem) {
+      grid-template-columns: minmax(0,1fr) auto;
+    }
+  }
+  .lg\:sticky {
+    @media (width >= 64rem) {
+      position: sticky;
+    }
+  }
+  .lg\:top-6 {
+    @media (width >= 64rem) {
+      top: calc(var(--spacing) * 6);
+    }
+  }
+  .lg\:z-20 {
+    @media (width >= 64rem) {
+      z-index: 20;
+    }
+  }
   .lg\:flex {
     @media (width >= 64rem) {
       display: flex;
     }
   }
+  .lg\:max-h-\[calc\(100vh-3rem\)\] {
+    @media (width >= 64rem) {
+      max-height: calc(100vh - 3rem);
+    }
+  }
   .lg\:grid-cols-3 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1560,6 +1895,21 @@
       grid-template-columns: 260px 1fr;
     }
   }
+  .lg\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
+    @media (width >= 64rem) {
+      grid-template-columns: minmax(0,1fr) auto;
+    }
+  }
+  .lg\:self-start {
+    @media (width >= 64rem) {
+      align-self: flex-start;
+    }
+  }
+  .lg\:overflow-y-auto {
+    @media (width >= 64rem) {
+      overflow-y: auto;
+    }
+  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);
@@ -1937,6 +2287,11 @@ body {
   inherits: false;
   initial-value: 1;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {