@nanisoft/prism-ui 0.5.1 → 0.7.0

package/dist/styles.css

@@ -5,6 +5,8 @@
   :root, :host {
     --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
     --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
     --spacing: 0.25rem;
     --breakpoint-sm: 40rem;
     --breakpoint-md: 48rem;
@@ -45,6 +47,7 @@
     --leading-normal: 1.5;
     --leading-relaxed: 1.625;
     --leading-loose: 2;
+    --radius-xl: calc(var(--radius) * 1.4);
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -245,6 +248,12 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -271,6 +280,9 @@
   .static {
     position: static;
   }
+  .sticky {
+    position: sticky;
+  }
   .inset-0 {
     inset: var(--spacing-0);
   }
@@ -316,6 +328,9 @@
   .-z-10 {
     z-index: calc(10 * -1);
   }
+  .z-30 {
+    z-index: 30;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -349,15 +364,30 @@
   .my-6 {
     margin-block: var(--spacing-6);
   }
+  .-ms-px {
+    margin-inline-start: -1px;
+  }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
   .mt-0\.5 {
     margin-top: var(--spacing-0\.5);
   }
+  .mt-1 {
+    margin-top: var(--spacing-1);
+  }
   .mt-2 {
     margin-top: var(--spacing-2);
   }
   .mt-4 {
     margin-top: var(--spacing-4);
   }
+  .mt-6 {
+    margin-top: var(--spacing-6);
+  }
+  .mt-10 {
+    margin-top: var(--spacing-10);
+  }
   .mt-auto {
     margin-top: auto;
   }
@@ -379,6 +409,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -391,6 +424,9 @@
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -432,6 +468,10 @@
     width: var(--spacing-5);
     height: var(--spacing-5);
   }
+  .size-6 {
+    width: var(--spacing-6);
+    height: var(--spacing-6);
+  }
   .size-8 {
     width: var(--spacing-8);
     height: var(--spacing-8);
@@ -472,6 +512,9 @@
   .h-24 {
     height: var(--spacing-24);
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -481,6 +524,9 @@
   .max-h-\(--available-height\) {
     max-height: var(--available-height);
   }
+  .min-h-0 {
+    min-height: var(--spacing-0);
+  }
   .min-h-4 {
     min-height: var(--spacing-4);
   }
@@ -493,6 +539,9 @@
   .w-\(--anchor-width\) {
     width: var(--anchor-width);
   }
+  .w-1\/2 {
+    width: calc(1 / 2 * 100%);
+  }
   .w-3\/4 {
     width: calc(3 / 4 * 100%);
   }
@@ -532,9 +581,15 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-measure {
+    max-width: var(--container-measure);
+  }
   .max-w-measure-narrow {
     max-width: var(--container-measure-narrow);
   }
+  .max-w-none {
+    max-width: none;
+  }
   .max-w-page {
     max-width: var(--container-page);
   }
@@ -589,6 +644,9 @@
   .resize {
     resize: both;
   }
+  .list-disc {
+    list-style-type: disc;
+  }
   .auto-rows-min {
     grid-auto-rows: min-content;
   }
@@ -607,6 +665,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -658,9 +719,29 @@
   .gap-x-3 {
     column-gap: var(--spacing-3);
   }
+  .gap-x-4 {
+    column-gap: var(--spacing-4);
+  }
+  .gap-x-5 {
+    column-gap: var(--spacing-5);
+  }
+  .gap-x-6 {
+    column-gap: var(--spacing-6);
+  }
   .gap-y-0\.5 {
     row-gap: var(--spacing-0\.5);
   }
+  .gap-y-2 {
+    row-gap: var(--spacing-2);
+  }
+  .gap-y-3 {
+    row-gap: var(--spacing-3);
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -673,9 +754,15 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-2xl {
     border-radius: calc(var(--radius) * 1.8);
   }
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -685,6 +772,9 @@
   .rounded-md {
     border-radius: calc(var(--radius) * 0.8);
   }
+  .rounded-none {
+    border-radius: 0;
+  }
   .rounded-sm {
     border-radius: calc(var(--radius) * 0.6);
   }
@@ -735,9 +825,16 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-border {
     border-color: var(--border);
   }
+  .border-brand-ink {
+    border-color: var(--brand-ink);
+  }
   .border-destructive\/40 {
     border-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
@@ -747,12 +844,21 @@
   .border-input {
     border-color: var(--input);
   }
+  .border-muted-foreground {
+    border-color: var(--muted-foreground);
+  }
   .border-primary {
     border-color: var(--primary);
   }
+  .border-success {
+    border-color: var(--success);
+  }
   .border-transparent {
     border-color: transparent;
   }
+  .border-warning {
+    border-color: var(--warning);
+  }
   .bg-accent {
     background-color: var(--accent);
   }
@@ -783,6 +889,9 @@
   .bg-muted {
     background-color: var(--muted);
   }
+  .bg-muted-foreground {
+    background-color: var(--muted-foreground);
+  }
   .bg-muted\/50 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -801,6 +910,9 @@
   .bg-success {
     background-color: var(--success);
   }
+  .bg-violet-500 {
+    background-color: var(--color-violet-500);
+  }
   .bg-warning {
     background-color: var(--warning);
   }
@@ -812,6 +924,9 @@
     --tw-gradient-position: to top right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .bg-\[conic-gradient\(var\(--chart-1\)\,var\(--chart-2\)\,var\(--chart-3\)\,var\(--chart-4\)\,var\(--chart-5\)\,var\(--chart-1\)\)\] {
+    background-image: conic-gradient(var(--chart-1),var(--chart-2),var(--chart-3),var(--chart-4),var(--chart-5),var(--chart-1));
+  }
   .from-primary-foreground\/15 {
     --tw-gradient-from: var(--primary-foreground);
     @supports (color: color-mix(in lab, red, red)) {
@@ -830,12 +945,42 @@
     --tw-gradient-to: transparent;
     --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));
   }
+  .fill-accent {
+    fill: var(--accent);
+  }
+  .fill-card {
+    fill: var(--card);
+  }
   .fill-current {
     fill: currentcolor;
   }
+  .fill-foreground {
+    fill: var(--foreground);
+  }
+  .fill-muted-foreground {
+    fill: var(--muted-foreground);
+  }
+  .fill-none {
+    fill: none;
+  }
   .fill-primary {
     fill: var(--primary);
   }
+  .stroke-border {
+    stroke: var(--border);
+  }
+  .stroke-brand-ink {
+    stroke: var(--brand-ink);
+  }
+  .stroke-current {
+    stroke: currentcolor;
+  }
+  .stroke-muted-foreground {
+    stroke: var(--muted-foreground);
+  }
+  .stroke-red-500 {
+    stroke: var(--color-red-500);
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -905,15 +1050,36 @@
   .py-6 {
     padding-block: var(--spacing-6);
   }
+  .py-10 {
+    padding-block: var(--spacing-10);
+  }
+  .py-12 {
+    padding-block: var(--spacing-12);
+  }
   .py-16 {
     padding-block: var(--spacing-16);
   }
   .py-20 {
     padding-block: var(--spacing-20);
   }
+  .ps-3 {
+    padding-inline-start: var(--spacing-3);
+  }
   .pt-0 {
     padding-top: var(--spacing-0);
   }
+  .pt-2 {
+    padding-top: var(--spacing-2);
+  }
+  .pt-4 {
+    padding-top: var(--spacing-4);
+  }
+  .pt-6 {
+    padding-top: var(--spacing-6);
+  }
+  .pt-8 {
+    padding-top: var(--spacing-8);
+  }
   .pr-8 {
     padding-right: var(--spacing-8);
   }
@@ -923,6 +1089,9 @@
   .pl-2 {
     padding-left: var(--spacing-2);
   }
+  .pl-5 {
+    padding-left: var(--spacing-5);
+  }
   .pl-8 {
     padding-left: var(--spacing-8);
   }
@@ -938,6 +1107,9 @@
   .align-middle {
     vertical-align: middle;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .font-sans {
     font-family: var(--font-sans);
   }
@@ -989,6 +1161,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-normal {
+    --tw-tracking: var(--tracking-normal);
+    letter-spacing: var(--tracking-normal);
+  }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -1015,6 +1191,9 @@
   .text-background {
     color: var(--background);
   }
+  .text-brand-ink {
+    color: var(--brand-ink);
+  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -1054,9 +1233,16 @@
   .text-warning-foreground {
     color: var(--warning-foreground);
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .uppercase {
     text-transform: uppercase;
   }
+  .ordinal {
+    --tw-ordinal: ordinal;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -1066,9 +1252,16 @@
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-80 {
+    opacity: 80%;
+  }
   .opacity-90 {
     opacity: 90%;
   }
+  .shadow {
+    --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);
+  }
   .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), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1085,6 +1278,10 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
   }
+  .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);
+  }
   .ring-ring {
     --tw-ring-color: var(--ring);
   }
@@ -1109,6 +1306,11 @@
     -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,);
   }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[color\,box-shadow\,background-color\] {
     transition-property: color,box-shadow,background-color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1216,10 +1418,36 @@
   .placeholder\:text-muted-foreground::placeholder {
     color: var(--muted-foreground);
   }
+  .first\:mt-0:first-child {
+    margin-top: var(--spacing-0);
+  }
+  .first\:border-t:first-child {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .first\:border-t-0:first-child {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 0px;
+  }
+  .first\:pt-0:first-child {
+    padding-top: var(--spacing-0);
+  }
+  .last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
   @media (hover: hover) {
     .hover\:bg-accent:hover {
       background-color: var(--accent);
     }
+    .hover\:bg-accent\/50:hover {
+      background-color: var(--accent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-accent\/50:hover {
+        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      }
+    }
     .hover\:bg-destructive\/90:hover {
       background-color: var(--destructive);
     }
@@ -1261,6 +1489,9 @@
     .hover\:underline:hover {
       text-decoration-line: underline;
     }
+    .hover\:opacity-80:hover {
+      opacity: 80%;
+    }
     .hover\:opacity-100:hover {
       opacity: 100%;
     }
@@ -1275,9 +1506,21 @@
   .focus\:text-accent-foreground:focus {
     color: var(--accent-foreground);
   }
+  .focus\:ring-0:focus {
+    --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);
+  }
+  .focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .focus-visible\:border-ring:focus-visible {
     border-color: var(--ring);
   }
+  .focus-visible\:ring-0:focus-visible {
+    --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);
+  }
   .focus-visible\:ring-4:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
@@ -1295,6 +1538,10 @@
       --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
+  .focus-visible\:outline-none:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .disabled\:pointer-events-none:disabled {
     pointer-events: none;
   }
@@ -1488,18 +1735,39 @@
     .sm\:block {
       display: block;
     }
+    .sm\:w-64 {
+      width: calc(var(--spacing) * 64);
+    }
     .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
+    .sm\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
     .sm\:flex-row {
       flex-direction: row;
     }
+    .sm\:items-baseline {
+      align-items: baseline;
+    }
+    .sm\:items-end {
+      align-items: flex-end;
+    }
     .sm\:justify-end {
       justify-content: flex-end;
     }
     .sm\:gap-2\.5 {
       gap: var(--spacing-2\.5);
     }
+    .sm\:gap-6 {
+      gap: var(--spacing-6);
+    }
+    .sm\:gap-px {
+      gap: 1px;
+    }
+    .sm\:py-14 {
+      padding-block: var(--spacing-14);
+    }
     .sm\:py-24 {
       padding-block: var(--spacing-24);
     }
@@ -1512,24 +1780,57 @@
     .sm\:text-left {
       text-align: left;
     }
+    .sm\:text-right {
+      text-align: right;
+    }
     .sm\:text-4xl {
       font-size: var(--text-4xl);
       line-height: var(--tw-leading, var(--text-4xl--line-height));
     }
   }
   @media (width >= 48rem) {
+    .md\:flex-row {
+      flex-direction: row;
+    }
+    .md\:justify-between {
+      justify-content: space-between;
+    }
     .md\:text-sm {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
   @media (width >= 64rem) {
+    .lg\:sticky {
+      position: sticky;
+    }
+    .lg\:top-20 {
+      top: var(--spacing-20);
+    }
+    .lg\:col-start-1 {
+      grid-column-start: 1;
+    }
+    .lg\:col-start-3 {
+      grid-column-start: 3;
+    }
+    .lg\:row-start-1 {
+      grid-row-start: 1;
+    }
+    .lg\:block {
+      display: block;
+    }
     .lg\:flex {
       display: flex;
     }
+    .lg\:grid {
+      display: grid;
+    }
     .lg\:hidden {
       display: none;
     }
+    .lg\:max-h-\[calc\(100svh-7rem\)\] {
+      max-height: calc(100svh - 7rem);
+    }
     .lg\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -1539,12 +1840,27 @@
     .lg\:grid-cols-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
+    .lg\:grid-cols-\[15rem_minmax\(0\,1fr\)\] {
+      grid-template-columns: 15rem minmax(0,1fr);
+    }
+    .lg\:flex-row {
+      flex-direction: row;
+    }
+    .lg\:gap-10 {
+      gap: var(--spacing-10);
+    }
+    .lg\:overflow-y-auto {
+      overflow-y: auto;
+    }
     .lg\:p-6 {
       padding: var(--spacing-6);
     }
     .lg\:px-8 {
       padding-inline: var(--spacing-8);
     }
+    .lg\:pe-4 {
+      padding-inline-end: var(--spacing-4);
+    }
   }
   @media (pointer: coarse) {
     .pointer-coarse\:size-11 {
@@ -1564,10 +1880,173 @@
       padding-inline: var(--spacing-4);
     }
   }
+  .\[\&_a\]\:text-foreground a {
+    color: var(--foreground);
+  }
+  .\[\&_a\]\:underline a {
+    text-decoration-line: underline;
+  }
+  .\[\&_a\]\:underline-offset-4 a {
+    text-underline-offset: 4px;
+  }
+  .\[\&_a\:hover\]\:underline a:hover {
+    text-decoration-line: underline;
+  }
+  .\[\&_blockquote\]\:border-l-2 blockquote {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
+  .\[\&_blockquote\]\:border-border blockquote {
+    border-color: var(--border);
+  }
+  .\[\&_blockquote\]\:pl-4 blockquote {
+    padding-left: var(--spacing-4);
+  }
+  .\[\&_blockquote\]\:text-muted-foreground blockquote {
+    color: var(--muted-foreground);
+  }
+  .\[\&_blockquote\]\:italic blockquote {
+    font-style: italic;
+  }
+  .\[\&_code\]\:rounded-sm code {
+    border-radius: calc(var(--radius) * 0.6);
+  }
+  .\[\&_code\]\:bg-muted code {
+    background-color: var(--muted);
+  }
+  .\[\&_code\]\:px-1 code {
+    padding-inline: var(--spacing-1);
+  }
+  .\[\&_code\]\:py-0\.5 code {
+    padding-block: var(--spacing-0\.5);
+  }
+  .\[\&_code\]\:font-mono code {
+    font-family: var(--font-mono);
+  }
+  .\[\&_code\]\:text-xs code {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .\[\&_code\]\:text-muted-foreground code {
+    color: var(--muted-foreground);
+  }
+  .\[\&_h1\]\:text-3xl h1 {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .\[\&_h1\]\:font-semibold h1 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_h1\]\:tracking-tight h1 {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+  .\[\&_h1\]\:text-balance h1 {
+    text-wrap: balance;
+  }
+  .\[\&_h2\]\:mt-2 h2 {
+    margin-top: var(--spacing-2);
+  }
+  .\[\&_h2\]\:text-2xl h2 {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .\[\&_h2\]\:font-semibold h2 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_h2\]\:tracking-tight h2 {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+  .\[\&_h2\]\:text-balance h2 {
+    text-wrap: balance;
+  }
+  .\[\&_h3\]\:mt-2 h3 {
+    margin-top: var(--spacing-2);
+  }
+  .\[\&_h3\]\:text-xl h3 {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .\[\&_h3\]\:font-semibold h3 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_h3\]\:tracking-tight h3 {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+  .\[\&_h3\]\:text-balance h3 {
+    text-wrap: balance;
+  }
+  .\[\&_h4\]\:text-lg h4 {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .\[\&_h4\]\:font-semibold h4 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_h4\]\:text-balance h4 {
+    text-wrap: balance;
+  }
+  .\[\&_hr\]\:my-2 hr {
+    margin-block: var(--spacing-2);
+  }
+  .\[\&_hr\]\:h-px hr {
+    height: 1px;
+  }
+  .\[\&_hr\]\:bg-border hr {
+    background-color: var(--border);
+  }
+  .\[\&_img\]\:rounded-lg img {
+    border-radius: var(--radius);
+  }
+  .\[\&_li\]\:leading-relaxed li {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .\[\&_ol\]\:list-decimal ol {
+    list-style-type: decimal;
+  }
+  .\[\&_ol\]\:pl-6 ol {
+    padding-left: var(--spacing-6);
+  }
   .\[\&_p\]\:leading-relaxed p {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .\[\&_pre\]\:overflow-x-auto pre {
+    overflow-x: auto;
+  }
+  .\[\&_pre\]\:rounded-lg pre {
+    border-radius: var(--radius);
+  }
+  .\[\&_pre\]\:bg-muted pre {
+    background-color: var(--muted);
+  }
+  .\[\&_pre\]\:p-4 pre {
+    padding: var(--spacing-4);
+  }
+  .\[\&_pre\]\:font-mono pre {
+    font-family: var(--font-mono);
+  }
+  .\[\&_pre\]\:text-xs pre {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .\[\&_pre_code\]\:bg-transparent pre code {
+    background-color: transparent;
+  }
+  .\[\&_pre_code\]\:p-0 pre code {
+    padding: var(--spacing-0);
+  }
+  .\[\&_strong\]\:font-semibold strong {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
   .\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }
@@ -1586,6 +2065,27 @@
     width: var(--spacing-4);
     height: var(--spacing-4);
   }
+  .\[\&_table\]\:w-full table {
+    width: 100%;
+  }
+  .\[\&_td\]\:px-3 td {
+    padding-inline: var(--spacing-3);
+  }
+  .\[\&_td\]\:py-2 td {
+    padding-block: var(--spacing-2);
+  }
+  .\[\&_td\]\:align-top td {
+    vertical-align: top;
+  }
+  .\[\&_th\]\:px-3 th {
+    padding-inline: var(--spacing-3);
+  }
+  .\[\&_th\]\:py-2 th {
+    padding-block: var(--spacing-2);
+  }
+  .\[\&_th\]\:text-left th {
+    text-align: left;
+  }
   .\[\&_tr\]\:border-b tr {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1594,6 +2094,12 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .\[\&_ul\]\:list-disc ul {
+    list-style-type: disc;
+  }
+  .\[\&_ul\]\:pl-6 ul {
+    padding-left: var(--spacing-6);
+  }
   .\[\&\>svg\]\:size-3\.5 > svg {
     width: var(--spacing-3\.5);
     height: var(--spacing-3\.5);
@@ -1635,6 +2141,7 @@
   --border: #e5e5e5;
   --input: #e5e5e5;
   --ring: #737373;
+  --brand-ink: #4338ca;
   --chart-1: #6366f1;
   --chart-2: #14b8a6;
   --chart-3: #f59e0b;
@@ -1647,7 +2154,7 @@
   --sidebar-accent: #f5f5f5;
   --sidebar-accent-foreground: #171717;
   --sidebar-border: #e5e5e5;
-  --sidebar-ring: #a3a3a3;
+  --sidebar-ring: #737373;
 }
 .dark {
   --radius: 0.5rem;
@@ -1674,6 +2181,7 @@
   --border: #262626;
   --input: #262626;
   --ring: #737373;
+  --brand-ink: #c7d2fe;
   --chart-1: #818cf8;
   --chart-2: #2dd4bf;
   --chart-3: #fbbf24;
@@ -1686,7 +2194,7 @@
   --sidebar-accent: #262626;
   --sidebar-accent-foreground: #f5f5f5;
   --sidebar-border: #262626;
-  --sidebar-ring: #404040;
+  --sidebar-ring: #737373;
 }
 [data-pack="blush"] {
   --background: #ffffff;
@@ -1712,6 +2220,7 @@
   --border: #e2dcdd;
   --input: #e2dcdd;
   --ring: #d06a84;
+  --brand-ink: #913751;
   --chart-1: #d06a84;
   --chart-2: #14b8a6;
   --chart-3: #f59e0b;
@@ -1724,10 +2233,10 @@
   --sidebar-accent: #ffe5ea;
   --sidebar-accent-foreground: #330313;
   --sidebar-border: #e2dcdd;
-  --sidebar-ring: #d06a84;
+  --sidebar-ring: #b14f6a;
   --radius: 0.875rem;
 }
-[data-pack="blush"].dark {
+[data-pack="blush"].dark, .dark [data-pack="blush"] {
   --background: #1b1718;
   --foreground: #f0ebec;
   --card: #322c2d;
@@ -1751,6 +2260,7 @@
   --border: #474042;
   --input: #474042;
   --ring: #ffb2c2;
+  --brand-ink: #ffd0d9;
   --chart-1: #ec88a0;
   --chart-2: #2dd4bf;
   --chart-3: #fbbf24;
@@ -1790,6 +2300,7 @@
   --border: #dbdfdc;
   --input: #dbdfdc;
   --ring: #53a36c;
+  --brand-ink: #1c6c3b;
   --chart-1: #53a36c;
   --chart-2: #14b8a6;
   --chart-3: #f59e0b;
@@ -1802,10 +2313,10 @@
   --sidebar-accent: #d4f7dc;
   --sidebar-accent-foreground: #001f0a;
   --sidebar-border: #dbdfdc;
-  --sidebar-ring: #53a36c;
+  --sidebar-ring: #368752;
   --radius: 0.625rem;
 }
-[data-pack="mint"].dark {
+[data-pack="mint"].dark, .dark [data-pack="mint"] {
   --background: #161917;
   --foreground: #ebeeeb;
   --card: #2b2f2c;
@@ -1829,6 +2340,7 @@
   --border: #3f4440;
   --input: #3f4440;
   --ring: #9ddcad;
+  --brand-ink: #bcecc7;
   --chart-1: #73bf88;
   --chart-2: #2dd4bf;
   --chart-3: #fbbf24;
@@ -1868,6 +2380,7 @@
   --border: #dfdde2;
   --input: #dfdde2;
   --ring: #a17acc;
+  --brand-ink: #6b4790;
   --chart-1: #a17acc;
   --chart-2: #14b8a6;
   --chart-3: #f59e0b;
@@ -1880,10 +2393,10 @@
   --sidebar-accent: #f2e8ff;
   --sidebar-accent-foreground: #210c33;
   --sidebar-border: #dfdde2;
-  --sidebar-ring: #a17acc;
+  --sidebar-ring: #865faf;
   --radius: 0.75rem;
 }
-[data-pack="lavender"].dark {
+[data-pack="lavender"].dark, .dark [data-pack="lavender"] {
   --background: #19171b;
   --foreground: #edecf0;
   --card: #2f2d31;
@@ -1907,6 +2420,7 @@
   --border: #434147;
   --input: #434147;
   --ring: #d9baff;
+  --brand-ink: #e7d5ff;
   --chart-1: #bc97e7;
   --chart-2: #2dd4bf;
   --chart-3: #fbbf24;
@@ -1946,6 +2460,7 @@
   --border: #dadee2;
   --input: #dadee2;
   --ring: #4c96d0;
+  --brand-ink: #135f93;
   --chart-1: #4c96d0;
   --chart-2: #14b8a6;
   --chart-3: #f59e0b;
@@ -1958,10 +2473,10 @@
   --sidebar-accent: #deefff;
   --sidebar-accent-foreground: #001a2f;
   --sidebar-border: #dadee2;
-  --sidebar-ring: #4c96d0;
+  --sidebar-ring: #2f7ab3;
   --radius: 0.5rem;
 }
-[data-pack="sky"].dark {
+[data-pack="sky"].dark, .dark [data-pack="sky"] {
   --background: #16191b;
   --foreground: #eaedf0;
   --card: #2b2e32;
@@ -1985,6 +2500,7 @@
   --border: #3e4347;
   --input: #3e4347;
   --ring: #9bd1ff;
+  --brand-ink: #c2e2ff;
   --chart-1: #6cb2eb;
   --chart-2: #2dd4bf;
   --chart-3: #fbbf24;
@@ -2024,6 +2540,7 @@
   --border: #e2ddd9;
   --input: #e2ddd9;
   --ring: #c9783d;
+  --brand-ink: #8b4500;
   --chart-1: #c9783d;
   --chart-2: #14b8a6;
   --chart-3: #f59e0b;
@@ -2036,10 +2553,10 @@
   --sidebar-accent: #ffe8d9;
   --sidebar-accent-foreground: #2a1000;
   --sidebar-border: #e2ddd9;
-  --sidebar-ring: #c9783d;
+  --sidebar-ring: #ab5d1d;
   --radius: 1rem;
 }
-[data-pack="peach"].dark {
+[data-pack="peach"].dark, .dark [data-pack="peach"] {
   --background: #1b1715;
   --foreground: #f0ece9;
   --card: #312d2a;
@@ -2063,6 +2580,7 @@
   --border: #47413d;
   --input: #47413d;
   --ring: #feb98b;
+  --brand-ink: #ffd4b8;
   --chart-1: #e4965e;
   --chart-2: #2dd4bf;
   --chart-3: #fbbf24;
@@ -2165,6 +2683,26 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -2366,6 +2904,11 @@
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;