notra-editor 0.6.0 → 0.8.0

package/dist/styles/globals.css

@@ -3,11 +3,9 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --nt-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --nt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+    --nt-color-black: #000;
     --nt-spacing: 0.25rem;
+    --nt-container-sm: 24rem;
     --nt-text-xs: 0.75rem;
     --nt-text-xs--line-height: calc(1 / 0.75);
     --nt-text-sm: 0.875rem;
@@ -16,11 +14,11 @@
     --nt-text-base--line-height: calc(1.5 / 1);
     --nt-font-weight-medium: 500;
     --nt-tracking-widest: 0.1em;
-    --nt-radius-lg: var(--radius);
+    --nt-blur-xs: 4px;
     --nt-default-transition-duration: 150ms;
     --nt-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --nt-default-font-family: var(--nt-font-sans);
-    --nt-default-mono-font-family: var(--nt-font-mono);
+    --nt-default-font-family: var(--font-sans);
+    --nt-default-mono-font-family: var(--font-geist-mono);
   }
 }
 @layer base {
@@ -189,36 +187,82 @@
   .nt\:absolute {
     position: absolute;
   }
+  .nt\:fixed {
+    position: fixed;
+  }
   .nt\:relative {
     position: relative;
   }
+  .nt\:inset-0 {
+    inset: calc(var(--nt-spacing) * 0);
+  }
   .nt\:inset-x-0 {
     inset-inline: calc(var(--nt-spacing) * 0);
   }
   .nt\:top-0 {
     top: calc(var(--nt-spacing) * 0);
   }
+  .nt\:top-1\/2 {
+    top: calc(1 / 2 * 100%);
+  }
+  .nt\:top-1\/3 {
+    top: calc(1 / 3 * 100%);
+  }
+  .nt\:top-2 {
+    top: calc(var(--nt-spacing) * 2);
+  }
   .nt\:right-2 {
     right: calc(var(--nt-spacing) * 2);
   }
+  .nt\:left-1\/2 {
+    left: calc(1 / 2 * 100%);
+  }
+  .nt\:isolate {
+    isolation: isolate;
+  }
   .nt\:z-50 {
     z-index: 50;
   }
+  .nt\:order-first {
+    order: -9999;
+  }
+  .nt\:order-last {
+    order: 9999;
+  }
   .nt\:-mx-1 {
     margin-inline: calc(var(--nt-spacing) * -1);
   }
+  .nt\:-mx-4 {
+    margin-inline: calc(var(--nt-spacing) * -4);
+  }
   .nt\:my-1 {
     margin-block: calc(var(--nt-spacing) * 1);
   }
+  .nt\:-mb-4 {
+    margin-bottom: calc(var(--nt-spacing) * -4);
+  }
   .nt\:ml-auto {
     margin-left: auto;
   }
+  .nt\:no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
   .nt\:flex {
     display: flex;
   }
+  .nt\:grid {
+    display: grid;
+  }
   .nt\:inline-flex {
     display: inline-flex;
   }
+  .nt\:field-sizing-content {
+    field-sizing: content;
+  }
   .nt\:size-3 {
     width: calc(var(--nt-spacing) * 3);
     height: calc(var(--nt-spacing) * 3);
@@ -243,6 +287,10 @@
     width: calc(var(--nt-spacing) * 9);
     height: calc(var(--nt-spacing) * 9);
   }
+  .nt\:size-full {
+    width: 100%;
+    height: 100%;
+  }
   .nt\:h-5 {
     height: calc(var(--nt-spacing) * 5);
   }
@@ -255,11 +303,14 @@
   .nt\:h-8 {
     height: calc(var(--nt-spacing) * 8);
   }
+  .nt\:h-8\! {
+    height: calc(var(--nt-spacing) * 8) !important;
+  }
   .nt\:h-9 {
     height: calc(var(--nt-spacing) * 9);
   }
-  .nt\:h-full {
-    height: 100%;
+  .nt\:h-auto {
+    height: auto;
   }
   .nt\:h-px {
     height: 1px;
@@ -267,8 +318,11 @@
   .nt\:max-h-\(--radix-dropdown-menu-content-available-height\) {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
-  .nt\:max-h-\[300px\] {
-    max-height: 300px;
+  .nt\:max-h-72 {
+    max-height: calc(var(--nt-spacing) * 72);
+  }
+  .nt\:min-h-16 {
+    min-height: calc(var(--nt-spacing) * 16);
   }
   .nt\:w-\(--radix-dropdown-menu-trigger-width\) {
     width: var(--radix-dropdown-menu-trigger-width);
@@ -285,6 +339,9 @@
   .nt\:w-full {
     width: 100%;
   }
+  .nt\:max-w-\[calc\(100\%-2rem\)\] {
+    max-width: calc(100% - 2rem);
+  }
   .nt\:min-w-0 {
     min-width: calc(var(--nt-spacing) * 0);
   }
@@ -309,15 +366,36 @@
   .nt\:origin-\(--radix-popover-content-transform-origin\) {
     transform-origin: var(--radix-popover-content-transform-origin);
   }
+  .nt\:-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .nt\:-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .nt\:translate-y-0 {
+    --tw-translate-y: calc(var(--nt-spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .nt\:cursor-default {
     cursor: default;
   }
+  .nt\:cursor-text {
+    cursor: text;
+  }
+  .nt\:resize-none {
+    resize: none;
+  }
   .nt\:scroll-py-1 {
     scroll-padding-block: calc(var(--nt-spacing) * 1);
   }
   .nt\:flex-col {
     flex-direction: column;
   }
+  .nt\:flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .nt\:items-center {
     align-items: center;
   }
@@ -330,6 +408,12 @@
   .nt\:justify-end {
     justify-content: flex-end;
   }
+  .nt\:justify-start {
+    justify-content: flex-start;
+  }
+  .nt\:gap-0\.5 {
+    gap: calc(var(--nt-spacing) * 0.5);
+  }
   .nt\:gap-1 {
     gap: calc(var(--nt-spacing) * 1);
   }
@@ -339,6 +423,12 @@
   .nt\:gap-2 {
     gap: calc(var(--nt-spacing) * 2);
   }
+  .nt\:gap-2\.5 {
+    gap: calc(var(--nt-spacing) * 2.5);
+  }
+  .nt\:gap-4 {
+    gap: calc(var(--nt-spacing) * 4);
+  }
   .nt\:overflow-hidden {
     overflow: hidden;
   }
@@ -348,6 +438,9 @@
   .nt\:overflow-y-auto {
     overflow-y: auto;
   }
+  .nt\:rounded-\[calc\(var\(--radius\)-3px\)\] {
+    border-radius: calc(var(--radius) - 3px);
+  }
   .nt\:rounded-\[min\(var\(--radius-md\)\,10px\)\] {
     border-radius: min(var(--radius-md), 10px);
   }
@@ -355,58 +448,99 @@
     border-radius: min(var(--radius-md), 12px);
   }
   .nt\:rounded-lg {
-    border-radius: var(--radius);
+    border-radius: var(--nt-radius);
+  }
+  .nt\:rounded-lg\! {
+    border-radius: var(--nt-radius) !important;
   }
   .nt\:rounded-md {
-    border-radius: calc(var(--radius) * 0.8);
+    border-radius: calc(var(--nt-radius) * 0.8);
+  }
+  .nt\:rounded-none {
+    border-radius: 0;
+  }
+  .nt\:rounded-sm {
+    border-radius: calc(var(--nt-radius) * 0.6);
+  }
+  .nt\:rounded-xl {
+    border-radius: calc(var(--nt-radius) * 1.4);
+  }
+  .nt\:rounded-xl\! {
+    border-radius: calc(var(--nt-radius) * 1.4) !important;
+  }
+  .nt\:rounded-b-xl {
+    border-bottom-right-radius: calc(var(--nt-radius) * 1.4);
+    border-bottom-left-radius: calc(var(--nt-radius) * 1.4);
   }
   .nt\:border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .nt\:border-b {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
+  .nt\:border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .nt\:border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
   }
   .nt\:border-none {
     --tw-border-style: none;
     border-style: none;
   }
   .nt\:border-border {
-    border-color: var(--border);
+    border-color: var(--nt-border);
+  }
+  .nt\:border-input {
+    border-color: var(--nt-input);
   }
-  .nt\:border-foreground\/10 {
-    border-color: var(--foreground);
+  .nt\:border-input\/30 {
+    border-color: var(--nt-input);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--foreground) 10%, transparent);
+      border-color: color-mix(in oklab, var(--nt-input) 30%, transparent);
     }
   }
-  .nt\:border-input {
-    border-color: var(--input);
-  }
   .nt\:border-transparent {
     border-color: transparent;
   }
   .nt\:bg-background {
-    background-color: var(--background);
+    background-color: var(--nt-background);
+  }
+  .nt\:bg-black\/10 {
+    background-color: var(--nt-color-black);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--nt-color-black) 10%, transparent);
+    }
   }
   .nt\:bg-border {
-    background-color: var(--border);
+    background-color: var(--nt-border);
   }
   .nt\:bg-destructive\/10 {
-    background-color: var(--destructive);
+    background-color: var(--nt-destructive);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+      background-color: color-mix(in oklab, var(--nt-destructive) 10%, transparent);
+    }
+  }
+  .nt\:bg-input\/30 {
+    background-color: var(--nt-input);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--nt-input) 30%, transparent);
+    }
+  }
+  .nt\:bg-muted\/50 {
+    background-color: var(--nt-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--nt-muted) 50%, transparent);
     }
   }
   .nt\:bg-popover {
-    background-color: var(--popover);
+    background-color: var(--nt-popover);
   }
   .nt\:bg-primary {
-    background-color: var(--primary);
+    background-color: var(--nt-primary);
   }
   .nt\:bg-secondary {
-    background-color: var(--secondary);
+    background-color: var(--nt-secondary);
   }
   .nt\:bg-transparent {
     background-color: transparent;
@@ -420,6 +554,9 @@
   .nt\:p-1 {
     padding: calc(var(--nt-spacing) * 1);
   }
+  .nt\:p-2\.5 {
+    padding: calc(var(--nt-spacing) * 2.5);
+  }
   .nt\:p-4 {
     padding: calc(var(--nt-spacing) * 4);
   }
@@ -432,17 +569,14 @@
   .nt\:px-2\.5 {
     padding-inline: calc(var(--nt-spacing) * 2.5);
   }
-  .nt\:px-3 {
-    padding-inline: calc(var(--nt-spacing) * 3);
-  }
   .nt\:py-1 {
     padding-block: calc(var(--nt-spacing) * 1);
   }
   .nt\:py-1\.5 {
     padding-block: calc(var(--nt-spacing) * 1.5);
   }
-  .nt\:py-3 {
-    padding-block: calc(var(--nt-spacing) * 3);
+  .nt\:py-2 {
+    padding-block: calc(var(--nt-spacing) * 2);
   }
   .nt\:py-6 {
     padding-block: calc(var(--nt-spacing) * 6);
@@ -450,15 +584,33 @@
   .nt\:\!pt-9 {
     padding-top: calc(var(--nt-spacing) * 9) !important;
   }
+  .nt\:pt-2 {
+    padding-top: calc(var(--nt-spacing) * 2);
+  }
+  .nt\:pr-2 {
+    padding-right: calc(var(--nt-spacing) * 2);
+  }
   .nt\:pr-8 {
     padding-right: calc(var(--nt-spacing) * 8);
   }
+  .nt\:pb-0 {
+    padding-bottom: calc(var(--nt-spacing) * 0);
+  }
+  .nt\:pb-2 {
+    padding-bottom: calc(var(--nt-spacing) * 2);
+  }
   .nt\:pl-1\.5 {
     padding-left: calc(var(--nt-spacing) * 1.5);
   }
+  .nt\:pl-2 {
+    padding-left: calc(var(--nt-spacing) * 2);
+  }
   .nt\:text-center {
     text-align: center;
   }
+  .nt\:font-heading {
+    font-family: var(--font-sans);
+  }
   .nt\:text-base {
     font-size: var(--nt-text-base);
     line-height: var(--tw-leading, var(--nt-text-base--line-height));
@@ -474,6 +626,10 @@
   .nt\:text-\[0\.8rem\] {
     font-size: 0.8rem;
   }
+  .nt\:leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .nt\:font-medium {
     --tw-font-weight: var(--nt-font-weight-medium);
     font-weight: var(--nt-font-weight-medium);
@@ -489,25 +645,25 @@
     color: var(--tt-brand-color-500);
   }
   .nt\:text-destructive {
-    color: var(--destructive);
+    color: var(--nt-destructive);
   }
   .nt\:text-foreground {
-    color: var(--foreground);
+    color: var(--nt-foreground);
   }
   .nt\:text-muted-foreground {
-    color: var(--muted-foreground);
+    color: var(--nt-muted-foreground);
   }
   .nt\:text-popover-foreground {
-    color: var(--popover-foreground);
+    color: var(--nt-popover-foreground);
   }
   .nt\:text-primary {
-    color: var(--primary);
+    color: var(--nt-primary);
   }
   .nt\:text-primary-foreground {
-    color: var(--primary-foreground);
+    color: var(--nt-primary-foreground);
   }
   .nt\:text-secondary-foreground {
-    color: var(--secondary-foreground);
+    color: var(--nt-secondary-foreground);
   }
   .nt\:underline-offset-4 {
     text-underline-offset: 4px;
@@ -533,8 +689,12 @@
     --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);
   }
-  .nt\:shadow-xs {
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+  .nt\:shadow-none\! {
+    --tw-shadow: 0 0 #0000 !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .nt\:ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
   }
   .nt\:ring-1 {
@@ -542,9 +702,9 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .nt\:ring-foreground\/10 {
-    --tw-ring-color: var(--foreground);
+    --tw-ring-color: var(--nt-foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--foreground) 10%, transparent);
+      --tw-ring-color: color-mix(in oklab, var(--nt-foreground) 10%, transparent);
     }
   }
   .nt\:outline-hidden {
@@ -555,13 +715,13 @@
       outline-offset: 2px;
     }
   }
-  .nt\:transition-\[color\,box-shadow\] {
-    transition-property: color,box-shadow;
+  .nt\:transition-all {
+    transition-property: all;
     transition-timing-function: var(--tw-ease, var(--nt-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--nt-default-transition-duration));
   }
-  .nt\:transition-all {
-    transition-property: all;
+  .nt\: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(--nt-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--nt-default-transition-duration));
   }
@@ -579,23 +739,37 @@
   }
   .nt\:group-focus\/dropdown-menu-item\:text-accent-foreground {
     &:is(:where(.nt\:group\/dropdown-menu-item):focus *) {
-      color: var(--accent-foreground);
+      color: var(--nt-accent-foreground);
+    }
+  }
+  .nt\:group-has-data-\[slot\=command-shortcut\]\/command-item\:hidden {
+    &:is(:where(.nt\:group\/command-item):has(*[data-slot="command-shortcut"]) *) {
+      display: none;
     }
   }
-  .nt\:selection\:bg-primary {
-    & *::selection {
-      background-color: var(--primary);
+  .nt\:group-has-\[\>input\]\/input-group\:pt-2 {
+    &:is(:where(.nt\:group\/input-group):has(>input) *) {
+      padding-top: calc(var(--nt-spacing) * 2);
     }
-    &::selection {
-      background-color: var(--primary);
+  }
+  .nt\:group-has-\[\>input\]\/input-group\:pb-2 {
+    &:is(:where(.nt\:group\/input-group):has(>input) *) {
+      padding-bottom: calc(var(--nt-spacing) * 2);
     }
   }
-  .nt\:selection\:text-primary-foreground {
-    & *::selection {
-      color: var(--primary-foreground);
+  .nt\:group-data-\[checked\=true\]\/command-item\:opacity-100 {
+    &:is(:where(.nt\:group\/command-item)[data-checked="true"] *) {
+      opacity: 100%;
     }
-    &::selection {
-      color: var(--primary-foreground);
+  }
+  .nt\:group-data-\[disabled\=true\]\/input-group\:opacity-50 {
+    &:is(:where(.nt\:group\/input-group)[data-disabled="true"] *) {
+      opacity: 50%;
+    }
+  }
+  .nt\:group-data-selected\/command-item\:text-foreground {
+    &:is(:where(.nt\:group\/command-item):where([data-selected="true"]) *) {
+      color: var(--nt-foreground);
     }
   }
   .nt\:file\:inline-flex {
@@ -603,9 +777,9 @@
       display: inline-flex;
     }
   }
-  .nt\:file\:h-7 {
+  .nt\:file\:h-6 {
     &::file-selector-button {
-      height: calc(var(--nt-spacing) * 7);
+      height: calc(var(--nt-spacing) * 6);
     }
   }
   .nt\:file\:border-0 {
@@ -633,27 +807,27 @@
   }
   .nt\:file\:text-foreground {
     &::file-selector-button {
-      color: var(--foreground);
+      color: var(--nt-foreground);
     }
   }
   .nt\:placeholder\:text-muted-foreground {
     &::placeholder {
-      color: var(--muted-foreground);
+      color: var(--nt-muted-foreground);
     }
   }
   .nt\:hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--nt-accent);
       }
     }
   }
   .nt\:hover\:bg-destructive\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--destructive);
+        background-color: var(--nt-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+          background-color: color-mix(in oklab, var(--nt-destructive) 20%, transparent);
         }
       }
     }
@@ -661,16 +835,16 @@
   .nt\:hover\:bg-muted {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--muted);
+        background-color: var(--nt-muted);
       }
     }
   }
   .nt\:hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--secondary);
+        background-color: var(--nt-secondary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+          background-color: color-mix(in oklab, var(--nt-secondary) 80%, transparent);
         }
       }
     }
@@ -678,7 +852,7 @@
   .nt\:hover\:text-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--foreground);
+        color: var(--nt-foreground);
       }
     }
   }
@@ -691,18 +865,18 @@
   }
   .nt\:focus\:bg-accent {
     &:focus {
-      background-color: var(--accent);
+      background-color: var(--nt-accent);
     }
   }
   .nt\:focus\:text-accent-foreground {
     &:focus {
-      color: var(--accent-foreground);
+      color: var(--nt-accent-foreground);
     }
   }
   .nt\:focus\:\*\*\:text-accent-foreground {
     &:focus {
       :is(& *) {
-        color: var(--accent-foreground);
+        color: var(--nt-accent-foreground);
       }
     }
   }
@@ -710,22 +884,22 @@
     &:not(*[data-variant="destructive"]) {
       &:focus {
         :is(& *) {
-          color: var(--accent-foreground);
+          color: var(--nt-accent-foreground);
         }
       }
     }
   }
   .nt\:focus-visible\:border-destructive\/40 {
     &:focus-visible {
-      border-color: var(--destructive);
+      border-color: var(--nt-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+        border-color: color-mix(in oklab, var(--nt-destructive) 40%, transparent);
       }
     }
   }
   .nt\:focus-visible\:border-ring {
     &:focus-visible {
-      border-color: var(--ring);
+      border-color: var(--nt-ring);
     }
   }
   .nt\:focus-visible\:ring-0 {
@@ -742,17 +916,17 @@
   }
   .nt\:focus-visible\:ring-destructive\/20 {
     &:focus-visible {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--nt-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--nt-destructive) 20%, transparent);
       }
     }
   }
   .nt\:focus-visible\:ring-ring\/50 {
     &:focus-visible {
-      --tw-ring-color: var(--ring);
+      --tw-ring-color: var(--nt-ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--nt-ring) 50%, transparent);
       }
     }
   }
@@ -774,6 +948,19 @@
       cursor: not-allowed;
     }
   }
+  .nt\:disabled\:bg-input\/50 {
+    &:disabled {
+      background-color: var(--nt-input);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--nt-input) 50%, transparent);
+      }
+    }
+  }
+  .nt\:disabled\:bg-transparent {
+    &:disabled {
+      background-color: transparent;
+    }
+  }
   .nt\:disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -781,7 +968,40 @@
   }
   .nt\:in-data-\[slot\=button-group\]\:rounded-lg {
     :where(*[data-slot="button-group"]) & {
-      border-radius: var(--radius);
+      border-radius: var(--nt-radius);
+    }
+  }
+  .nt\:in-data-\[slot\=combobox-content\]\:focus-within\:border-inherit {
+    :where(*[data-slot="combobox-content"]) & {
+      &:focus-within {
+        border-color: inherit;
+      }
+    }
+  }
+  .nt\:in-data-\[slot\=combobox-content\]\:focus-within\:ring-0 {
+    :where(*[data-slot="combobox-content"]) & {
+      &:focus-within {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
+      }
+    }
+  }
+  .nt\:in-data-\[slot\=dialog-content\]\:rounded-lg\! {
+    :where(*[data-slot="dialog-content"]) & {
+      border-radius: var(--nt-radius) !important;
+    }
+  }
+  .nt\:has-disabled\:bg-input\/50 {
+    &:has(*:disabled) {
+      background-color: var(--nt-input);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--nt-input) 50%, transparent);
+      }
+    }
+  }
+  .nt\:has-disabled\:opacity-50 {
+    &:has(*:disabled) {
+      opacity: 50%;
     }
   }
   .nt\:has-data-\[icon\=inline-end\]\:pr-1\.5 {
@@ -804,29 +1024,123 @@
       padding-left: calc(var(--nt-spacing) * 2);
     }
   }
+  .nt\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring {
+    &:has(*:is([data-slot=input-group-control]:focus-visible)) {
+      border-color: var(--nt-ring);
+    }
+  }
+  .nt\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-3 {
+    &:has(*:is([data-slot=input-group-control]:focus-visible)) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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);
+    }
+  }
+  .nt\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50 {
+    &:has(*:is([data-slot=input-group-control]:focus-visible)) {
+      --tw-ring-color: var(--nt-ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--nt-ring) 50%, transparent);
+      }
+    }
+  }
+  .nt\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive {
+    &:has(*:is([data-slot][aria-invalid=true])) {
+      border-color: var(--nt-destructive);
+    }
+  }
+  .nt\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-3 {
+    &:has(*:is([data-slot][aria-invalid=true])) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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);
+    }
+  }
+  .nt\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20 {
+    &:has(*:is([data-slot][aria-invalid=true])) {
+      --tw-ring-color: var(--nt-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--nt-destructive) 20%, transparent);
+      }
+    }
+  }
+  .nt\:has-\[\>\[data-align\=block-end\]\]\:h-auto {
+    &:has(>[data-align=block-end]) {
+      height: auto;
+    }
+  }
+  .nt\:has-\[\>\[data-align\=block-end\]\]\:flex-col {
+    &:has(>[data-align=block-end]) {
+      flex-direction: column;
+    }
+  }
+  .nt\:has-\[\>\[data-align\=block-start\]\]\:h-auto {
+    &:has(>[data-align=block-start]) {
+      height: auto;
+    }
+  }
+  .nt\:has-\[\>\[data-align\=block-start\]\]\:flex-col {
+    &:has(>[data-align=block-start]) {
+      flex-direction: column;
+    }
+  }
+  .nt\:has-\[\>button\]\:mr-\[-0\.3rem\] {
+    &:has(>button) {
+      margin-right: -0.3rem;
+    }
+  }
+  .nt\:has-\[\>button\]\:ml-\[-0\.3rem\] {
+    &:has(>button) {
+      margin-left: -0.3rem;
+    }
+  }
+  .nt\:has-\[\>kbd\]\:mr-\[-0\.15rem\] {
+    &:has(>kbd) {
+      margin-right: -0.15rem;
+    }
+  }
+  .nt\:has-\[\>kbd\]\:ml-\[-0\.15rem\] {
+    &:has(>kbd) {
+      margin-left: -0.15rem;
+    }
+  }
+  .nt\:has-\[\>svg\]\:p-0 {
+    &:has(>svg) {
+      padding: calc(var(--nt-spacing) * 0);
+    }
+  }
+  .nt\:has-\[\>textarea\]\:h-auto {
+    &:has(>textarea) {
+      height: auto;
+    }
+  }
   .nt\:aria-expanded\:bg-muted {
     &[aria-expanded="true"] {
-      background-color: var(--muted);
+      background-color: var(--nt-muted);
     }
   }
   .nt\:aria-expanded\:bg-secondary {
     &[aria-expanded="true"] {
-      background-color: var(--secondary);
+      background-color: var(--nt-secondary);
     }
   }
   .nt\:aria-expanded\:text-foreground {
     &[aria-expanded="true"] {
-      color: var(--foreground);
+      color: var(--nt-foreground);
     }
   }
   .nt\:aria-expanded\:text-secondary-foreground {
     &[aria-expanded="true"] {
-      color: var(--secondary-foreground);
+      color: var(--nt-secondary-foreground);
     }
   }
   .nt\:aria-invalid\:border-destructive {
     &[aria-invalid="true"] {
-      border-color: var(--destructive);
+      border-color: var(--nt-destructive);
+    }
+  }
+  .nt\:aria-invalid\:ring-0 {
+    &[aria-invalid="true"] {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
     }
   }
   .nt\:aria-invalid\:ring-3 {
@@ -837,40 +1151,20 @@
   }
   .nt\:aria-invalid\:ring-destructive\/20 {
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--nt-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--nt-destructive) 20%, transparent);
       }
     }
   }
-  .nt\:data-disabled\:pointer-events-none {
-    &[data-disabled] {
-      pointer-events: none;
-    }
-  }
-  .nt\:data-disabled\:opacity-50 {
-    &[data-disabled] {
-      opacity: 50%;
-    }
-  }
   .nt\:data-inset\:pl-7 {
     &[data-inset] {
       padding-left: calc(var(--nt-spacing) * 7);
     }
   }
-  .nt\:data-open\:bg-accent {
-    &[data-open] {
-      background-color: var(--accent);
-    }
-  }
-  .nt\:data-open\:text-accent-foreground {
-    &[data-open] {
-      color: var(--accent-foreground);
-    }
-  }
   .nt\:data-\[active-state\=on\]\:bg-accent {
     &[data-active-state="on"] {
-      background-color: var(--accent);
+      background-color: var(--nt-accent);
     }
   }
   .nt\:data-\[active-state\=on\]\:text-\[var\(--tt-brand-color-500\)\] {
@@ -888,34 +1182,31 @@
       opacity: 50%;
     }
   }
-  .nt\:data-\[orientation\=horizontal\]\:h-px {
-    &[data-orientation="horizontal"] {
-      height: 1px;
+  .nt\:data-\[side\=bottom\]\:slide-in-from-top-2 {
+    &[data-side="bottom"] {
+      --tw-enter-translate-y: calc(2*var(--spacing)*-1);
     }
   }
-  .nt\:data-\[orientation\=horizontal\]\:w-full {
-    &[data-orientation="horizontal"] {
-      width: 100%;
+  .nt\:data-\[side\=left\]\:slide-in-from-right-2 {
+    &[data-side="left"] {
+      --tw-enter-translate-x: calc(2*var(--spacing));
     }
   }
-  .nt\:data-\[orientation\=vertical\]\:h-full {
-    &[data-orientation="vertical"] {
-      height: 100%;
+  .nt\:data-\[side\=right\]\:slide-in-from-left-2 {
+    &[data-side="right"] {
+      --tw-enter-translate-x: calc(2*var(--spacing)*-1);
     }
   }
-  .nt\:data-\[orientation\=vertical\]\:w-px {
-    &[data-orientation="vertical"] {
-      width: 1px;
+  .nt\:data-\[side\=top\]\:slide-in-from-bottom-2 {
+    &[data-side="top"] {
+      --tw-enter-translate-y: calc(2*var(--spacing));
     }
   }
-  .nt\:data-\[selected\=true\]\:bg-accent {
-    &[data-selected="true"] {
-      background-color: var(--accent);
-    }
-  }
-  .nt\:data-\[selected\=true\]\:text-accent-foreground {
-    &[data-selected="true"] {
-      color: var(--accent-foreground);
+  .nt\:\*\:data-\[slot\=input-group-addon\]\:pl-2\! {
+    :is(& > *) {
+      &[data-slot="input-group-addon"] {
+        padding-left: calc(var(--nt-spacing) * 2) !important;
+      }
     }
   }
   .nt\:data-\[state\=closed\]\:overflow-hidden {
@@ -925,15 +1216,15 @@
   }
   .nt\:data-\[variant\=destructive\]\:text-destructive {
     &[data-variant="destructive"] {
-      color: var(--destructive);
+      color: var(--nt-destructive);
     }
   }
   .nt\:data-\[variant\=destructive\]\:focus\:bg-destructive\/10 {
     &[data-variant="destructive"] {
       &:focus {
-        background-color: var(--destructive);
+        background-color: var(--nt-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+          background-color: color-mix(in oklab, var(--nt-destructive) 10%, transparent);
         }
       }
     }
@@ -941,10 +1232,32 @@
   .nt\:data-\[variant\=destructive\]\:focus\:text-destructive {
     &[data-variant="destructive"] {
       &:focus {
-        color: var(--destructive);
+        color: var(--nt-destructive);
       }
     }
   }
+  .nt\:supports-backdrop-filter\:backdrop-blur-xs {
+    @supports (backdrop-filter: var(--tw)) {
+      --tw-backdrop-blur: blur(var(--nt-blur-xs));
+      -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,);
+      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,);
+    }
+  }
+  .nt\:sm\:max-w-sm {
+    @media (width >= 40rem) {
+      max-width: var(--nt-container-sm);
+    }
+  }
+  .nt\:sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .nt\:sm\:justify-end {
+    @media (width >= 40rem) {
+      justify-content: flex-end;
+    }
+  }
   .nt\:md\:text-sm {
     @media (width >= 48rem) {
       font-size: var(--nt-text-sm);
@@ -953,32 +1266,37 @@
   }
   .nt\:dark\:border-input {
     &:is(.dark *) {
-      border-color: var(--input);
+      border-color: var(--nt-input);
     }
   }
   .nt\:dark\:bg-destructive\/20 {
     &:is(.dark *) {
-      background-color: var(--destructive);
+      background-color: var(--nt-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        background-color: color-mix(in oklab, var(--nt-destructive) 20%, transparent);
       }
     }
   }
   .nt\:dark\:bg-input\/30 {
     &:is(.dark *) {
-      background-color: var(--input);
+      background-color: var(--nt-input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--nt-input) 30%, transparent);
       }
     }
   }
+  .nt\:dark\:bg-transparent {
+    &:is(.dark *) {
+      background-color: transparent;
+    }
+  }
   .nt\:dark\:hover\:bg-destructive\/30 {
     &:is(.dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--destructive);
+          background-color: var(--nt-destructive);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
+            background-color: color-mix(in oklab, var(--nt-destructive) 30%, transparent);
           }
         }
       }
@@ -988,9 +1306,9 @@
     &:is(.dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--input);
+          background-color: var(--nt-input);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--input) 50%, transparent);
+            background-color: color-mix(in oklab, var(--nt-input) 50%, transparent);
           }
         }
       }
@@ -1000,9 +1318,9 @@
     &:is(.dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--muted);
+          background-color: var(--nt-muted);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+            background-color: color-mix(in oklab, var(--nt-muted) 50%, transparent);
           }
         }
       }
@@ -1011,9 +1329,46 @@
   .nt\:dark\:focus-visible\:ring-destructive\/40 {
     &:is(.dark *) {
       &:focus-visible {
-        --tw-ring-color: var(--destructive);
+        --tw-ring-color: var(--nt-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--nt-destructive) 40%, transparent);
+        }
+      }
+    }
+  }
+  .nt\:dark\:disabled\:bg-input\/80 {
+    &:is(.dark *) {
+      &:disabled {
+        background-color: var(--nt-input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--nt-input) 80%, transparent);
+        }
+      }
+    }
+  }
+  .nt\:dark\:disabled\:bg-transparent {
+    &:is(.dark *) {
+      &:disabled {
+        background-color: transparent;
+      }
+    }
+  }
+  .nt\:dark\:has-disabled\:bg-input\/80 {
+    &:is(.dark *) {
+      &:has(*:disabled) {
+        background-color: var(--nt-input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--nt-input) 80%, transparent);
+        }
+      }
+    }
+  }
+  .nt\:dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40 {
+    &:is(.dark *) {
+      &:has(*:is([data-slot][aria-invalid=true])) {
+        --tw-ring-color: var(--nt-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--nt-destructive) 40%, transparent);
         }
       }
     }
@@ -1021,9 +1376,9 @@
   .nt\:dark\:aria-invalid\:border-destructive\/50 {
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        border-color: var(--destructive);
+        border-color: var(--nt-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+          border-color: color-mix(in oklab, var(--nt-destructive) 50%, transparent);
         }
       }
     }
@@ -1031,9 +1386,9 @@
   .nt\:dark\:aria-invalid\:ring-destructive\/40 {
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--destructive);
+        --tw-ring-color: var(--nt-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--nt-destructive) 40%, transparent);
         }
       }
     }
@@ -1042,39 +1397,96 @@
     &:is(.dark *) {
       &[data-variant="destructive"] {
         &:focus {
-          background-color: var(--destructive);
+          background-color: var(--nt-destructive);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+            background-color: color-mix(in oklab, var(--nt-destructive) 20%, transparent);
           }
         }
       }
     }
   }
-  .nt\:\[\&_\[cmdk-group-heading\]\]\:px-2 {
-    & [cmdk-group-heading] {
-      padding-inline: calc(var(--nt-spacing) * 2);
+  .nt\:data-open\:animate-in {
+    &:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) {
+      animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .nt\:data-open\:bg-accent {
+    &:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) {
+      background-color: var(--nt-accent);
     }
   }
-  .nt\:\[\&_\[cmdk-group-heading\]\]\:py-1\.5 {
-    & [cmdk-group-heading] {
-      padding-block: calc(var(--nt-spacing) * 1.5);
+  .nt\:data-open\:text-accent-foreground {
+    &:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) {
+      color: var(--nt-accent-foreground);
     }
   }
-  .nt\:\[\&_\[cmdk-group-heading\]\]\:text-xs {
-    & [cmdk-group-heading] {
-      font-size: var(--nt-text-xs);
-      line-height: var(--tw-leading, var(--nt-text-xs--line-height));
+  .nt\:data-open\:fade-in-0 {
+    &:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) {
+      --tw-enter-opacity: calc(0/100);
+      --tw-enter-opacity: 0;
     }
   }
-  .nt\:\[\&_\[cmdk-group-heading\]\]\:font-medium {
-    & [cmdk-group-heading] {
-      --tw-font-weight: var(--nt-font-weight-medium);
-      font-weight: var(--nt-font-weight-medium);
+  .nt\:data-open\:zoom-in-95 {
+    &:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) {
+      --tw-enter-scale: calc(95*1%);
+      --tw-enter-scale: .95;
+    }
+  }
+  .nt\:data-closed\:animate-out {
+    &:where([data-state="closed"]), &:where([data-closed]:not([data-closed="false"])) {
+      animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .nt\:data-closed\:fade-out-0 {
+    &:where([data-state="closed"]), &:where([data-closed]:not([data-closed="false"])) {
+      --tw-exit-opacity: calc(0/100);
+      --tw-exit-opacity: 0;
+    }
+  }
+  .nt\:data-closed\:zoom-out-95 {
+    &:where([data-state="closed"]), &:where([data-closed]:not([data-closed="false"])) {
+      --tw-exit-scale: calc(95*1%);
+      --tw-exit-scale: .95;
+    }
+  }
+  .nt\:data-selected\:bg-muted {
+    &:where([data-selected="true"]) {
+      background-color: var(--nt-muted);
     }
   }
-  .nt\:\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
-    & [cmdk-group-heading] {
-      color: var(--muted-foreground);
+  .nt\:data-selected\:text-foreground {
+    &:where([data-selected="true"]) {
+      color: var(--nt-foreground);
+    }
+  }
+  .nt\:data-disabled\:pointer-events-none {
+    &:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) {
+      pointer-events: none;
+    }
+  }
+  .nt\:data-disabled\:opacity-50 {
+    &:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) {
+      opacity: 50%;
+    }
+  }
+  .nt\:data-horizontal\:h-px {
+    &:where([data-orientation="horizontal"]) {
+      height: 1px;
+    }
+  }
+  .nt\:data-horizontal\:w-full {
+    &:where([data-orientation="horizontal"]) {
+      width: 100%;
+    }
+  }
+  .nt\:data-vertical\:w-px {
+    &:where([data-orientation="vertical"]) {
+      width: 1px;
+    }
+  }
+  .nt\:data-vertical\:self-stretch {
+    &:where([data-orientation="vertical"]) {
+      align-self: stretch;
     }
   }
   .nt\:\[\&_svg\]\:pointer-events-none {
@@ -1105,13 +1517,85 @@
       height: calc(var(--nt-spacing) * 4);
     }
   }
+  .nt\:\[\.border-b\]\:pb-2 {
+    &:is(.border-b) {
+      padding-bottom: calc(var(--nt-spacing) * 2);
+    }
+  }
+  .nt\:\[\.border-t\]\:pt-2 {
+    &:is(.border-t) {
+      padding-top: calc(var(--nt-spacing) * 2);
+    }
+  }
+  .nt\:\*\*\:\[\[cmdk-group-heading\]\]\:px-2 {
+    :is(& *) {
+      &:is([cmdk-group-heading]) {
+        padding-inline: calc(var(--nt-spacing) * 2);
+      }
+    }
+  }
+  .nt\:\*\*\:\[\[cmdk-group-heading\]\]\:py-1\.5 {
+    :is(& *) {
+      &:is([cmdk-group-heading]) {
+        padding-block: calc(var(--nt-spacing) * 1.5);
+      }
+    }
+  }
+  .nt\:\*\*\:\[\[cmdk-group-heading\]\]\:text-xs {
+    :is(& *) {
+      &:is([cmdk-group-heading]) {
+        font-size: var(--nt-text-xs);
+        line-height: var(--tw-leading, var(--nt-text-xs--line-height));
+      }
+    }
+  }
+  .nt\:\*\*\:\[\[cmdk-group-heading\]\]\:font-medium {
+    :is(& *) {
+      &:is([cmdk-group-heading]) {
+        --tw-font-weight: var(--nt-font-weight-medium);
+        font-weight: var(--nt-font-weight-medium);
+      }
+    }
+  }
+  .nt\:\*\*\:\[\[cmdk-group-heading\]\]\:text-muted-foreground {
+    :is(& *) {
+      &:is([cmdk-group-heading]) {
+        color: var(--nt-muted-foreground);
+      }
+    }
+  }
+  .nt\:\*\:\[a\]\:underline {
+    :is(& > *) {
+      &:is(a) {
+        text-decoration-line: underline;
+      }
+    }
+  }
+  .nt\:\*\:\[a\]\:underline-offset-3 {
+    :is(& > *) {
+      &:is(a) {
+        text-underline-offset: 3px;
+      }
+    }
+  }
   .nt\:\[a\]\:hover\:bg-primary\/80 {
     &:is(a) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--primary);
+          background-color: var(--nt-primary);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--primary) 80%, transparent);
+            background-color: color-mix(in oklab, var(--nt-primary) 80%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .nt\:\*\:\[a\]\:hover\:text-foreground {
+    :is(& > *) {
+      &:is(a) {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--nt-foreground);
           }
         }
       }
@@ -1121,34 +1605,216 @@
     &[data-variant="destructive"] {
       :is(& > *) {
         &:is(svg) {
-          color: var(--destructive);
+          color: var(--nt-destructive);
+        }
+      }
+    }
+  }
+  .nt\:data-selected\:\*\:\[svg\]\:text-foreground {
+    &:where([data-selected="true"]) {
+      :is(& > *) {
+        &:is(svg) {
+          color: var(--nt-foreground);
         }
       }
     }
   }
+  .nt\:has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3 {
+    &:has(>[data-align=block-end]) {
+      &>input {
+        padding-top: calc(var(--nt-spacing) * 3);
+      }
+    }
+  }
+  .nt\:has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3 {
+    &:has(>[data-align=block-start]) {
+      &>input {
+        padding-bottom: calc(var(--nt-spacing) * 3);
+      }
+    }
+  }
+  .nt\:has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-1\.5 {
+    &:has(>[data-align=inline-end]) {
+      &>input {
+        padding-right: calc(var(--nt-spacing) * 1.5);
+      }
+    }
+  }
+  .nt\:has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-1\.5 {
+    &:has(>[data-align=inline-start]) {
+      &>input {
+        padding-left: calc(var(--nt-spacing) * 1.5);
+      }
+    }
+  }
+  .nt\:\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\] {
+    &>kbd {
+      border-radius: calc(var(--radius) - 5px);
+    }
+  }
+  .nt\:\[\&\>svg\:not\(\[class\*\=size-\]\)\]\:size-3\.5 {
+    &>svg:not([class*=size-]) {
+      width: calc(var(--nt-spacing) * 3.5);
+      height: calc(var(--nt-spacing) * 3.5);
+    }
+  }
+  .nt\:\[\&\>svg\:not\(\[class\*\=size-\]\)\]\:size-4 {
+    &>svg:not([class*=size-]) {
+      width: calc(var(--nt-spacing) * 4);
+      height: calc(var(--nt-spacing) * 4);
+    }
+  }
+}
+@property --tw-animation-delay {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0s;
+}
+@property --tw-animation-direction {
+  syntax: "*";
+  inherits: false;
+  initial-value: normal;
+}
+@property --tw-animation-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-animation-fill-mode {
+  syntax: "*";
+  inherits: false;
+  initial-value: none;
+}
+@property --tw-animation-iteration-count {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
 :root {
-  --radius: 0.625rem;
-  --radius-md: calc(var(--radius) * 0.8);
-  --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.97 0.01 17);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --nt-background: oklch(1 0 0);
+  --nt-foreground: oklch(0.145 0 0);
+  --nt-card: oklch(1 0 0);
+  --nt-card-foreground: oklch(0.145 0 0);
+  --nt-popover: oklch(1 0 0);
+  --nt-popover-foreground: oklch(0.145 0 0);
+  --nt-primary: oklch(0.205 0 0);
+  --nt-primary-foreground: oklch(0.985 0 0);
+  --nt-secondary: oklch(0.97 0 0);
+  --nt-secondary-foreground: oklch(0.205 0 0);
+  --nt-muted: oklch(0.97 0 0);
+  --nt-muted-foreground: oklch(0.556 0 0);
+  --nt-accent: oklch(0.97 0 0);
+  --nt-accent-foreground: oklch(0.205 0 0);
+  --nt-destructive: oklch(0.577 0.245 27.325);
+  --nt-border: oklch(0.922 0 0);
+  --nt-input: oklch(0.922 0 0);
+  --nt-ring: oklch(0.708 0 0);
+  --nt-chart-1: oklch(0.87 0 0);
+  --nt-chart-2: oklch(0.556 0 0);
+  --nt-chart-3: oklch(0.439 0 0);
+  --nt-chart-4: oklch(0.371 0 0);
+  --nt-chart-5: oklch(0.269 0 0);
+  --nt-radius: 0.625rem;
+  --nt-sidebar: oklch(0.985 0 0);
+  --nt-sidebar-foreground: oklch(0.145 0 0);
+  --nt-sidebar-primary: oklch(0.205 0 0);
+  --nt-sidebar-primary-foreground: oklch(0.985 0 0);
+  --nt-sidebar-accent: oklch(0.97 0 0);
+  --nt-sidebar-accent-foreground: oklch(0.205 0 0);
+  --nt-sidebar-border: oklch(0.922 0 0);
+  --nt-sidebar-ring: oklch(0.708 0 0);
+}
+.dark {
+  --nt-background: oklch(0.145 0 0);
+  --nt-foreground: oklch(0.985 0 0);
+  --nt-card: oklch(0.205 0 0);
+  --nt-card-foreground: oklch(0.985 0 0);
+  --nt-popover: oklch(0.205 0 0);
+  --nt-popover-foreground: oklch(0.985 0 0);
+  --nt-primary: oklch(0.922 0 0);
+  --nt-primary-foreground: oklch(0.205 0 0);
+  --nt-secondary: oklch(0.269 0 0);
+  --nt-secondary-foreground: oklch(0.985 0 0);
+  --nt-muted: oklch(0.269 0 0);
+  --nt-muted-foreground: oklch(0.708 0 0);
+  --nt-accent: oklch(0.269 0 0);
+  --nt-accent-foreground: oklch(0.985 0 0);
+  --nt-destructive: oklch(0.704 0.191 22.216);
+  --nt-border: oklch(1 0 0 / 10%);
+  --nt-input: oklch(1 0 0 / 15%);
+  --nt-ring: oklch(0.556 0 0);
+  --nt-chart-1: oklch(0.87 0 0);
+  --nt-chart-2: oklch(0.556 0 0);
+  --nt-chart-3: oklch(0.439 0 0);
+  --nt-chart-4: oklch(0.371 0 0);
+  --nt-chart-5: oklch(0.269 0 0);
+  --nt-sidebar: oklch(0.205 0 0);
+  --nt-sidebar-foreground: oklch(0.985 0 0);
+  --nt-sidebar-primary: oklch(0.488 0.243 264.376);
+  --nt-sidebar-primary-foreground: oklch(0.985 0 0);
+  --nt-sidebar-accent: oklch(0.269 0 0);
+  --nt-sidebar-accent-foreground: oklch(0.985 0 0);
+  --nt-sidebar-border: oklch(1 0 0 / 10%);
+  --nt-sidebar-ring: oklch(0.556 0 0);
 }
 @layer base {
   .notra button:not(:disabled),
@@ -1156,11 +1822,30 @@
     cursor: pointer;
   }
 }
+@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-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -1238,25 +1923,64 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-translate-x {
+@property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
-  initial-value: 0;
 }
-@property --tw-translate-y {
+@property --tw-backdrop-brightness {
   syntax: "*";
   inherits: false;
-  initial-value: 0;
 }
-@property --tw-translate-z {
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
   syntax: "*";
   inherits: false;
-  initial-value: 0;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@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));
+    filter: blur(var(--tw-enter-blur,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));
+    filter: blur(var(--tw-exit-blur,0));
+  }
 }
 @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 {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-border-style: solid;
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
@@ -1274,9 +1998,32 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-duration: initial;
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-animation-delay: 0s;
+      --tw-animation-direction: normal;
+      --tw-animation-duration: initial;
+      --tw-animation-fill-mode: none;
+      --tw-animation-iteration-count: 1;
+      --tw-enter-blur: 0;
+      --tw-enter-opacity: 1;
+      --tw-enter-rotate: 0;
+      --tw-enter-scale: 1;
+      --tw-enter-translate-x: 0;
+      --tw-enter-translate-y: 0;
+      --tw-exit-blur: 0;
+      --tw-exit-opacity: 1;
+      --tw-exit-rotate: 0;
+      --tw-exit-scale: 1;
+      --tw-exit-translate-x: 0;
+      --tw-exit-translate-y: 0;
     }
   }
 }