@hanzo/docs-base-ui 16.5.3 → 16.7.5

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -7,10 +7,10 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-black: #000;
     --spacing: 0.25rem;
     --breakpoint-sm: 40rem;
     --container-sm: 24rem;
+    --container-md: 28rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -20,9 +20,13 @@
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -253,15 +257,15 @@
   .fd-steps {
     counter-reset: step;
     position: relative;
-    margin-left: calc(var(--spacing) * 2);
-    border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
-    padding-left: calc(var(--spacing) * 6);
+    margin-inline-start: calc(var(--spacing) * 2);
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+    padding-inline-start: calc(var(--spacing) * 6);
     @media (width >= 40rem) {
-      margin-left: calc(var(--spacing) * 4);
+      margin-inline-start: calc(var(--spacing) * 4);
     }
     @media (width >= 40rem) {
-      padding-left: calc(var(--spacing) * 7);
+      padding-inline-start: calc(var(--spacing) * 7);
     }
   }
   .absolute {
@@ -282,6 +286,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
   .inset-x-2 {
     inset-inline: calc(var(--spacing) * 2);
   }
@@ -291,6 +298,12 @@
   .inset-y-2 {
     inset-block: calc(var(--spacing) * 2);
   }
+  .inset-s-0 {
+    inset-inline-start: calc(var(--spacing) * 0);
+  }
+  .start {
+    inset-inline-start: var(--spacing);
+  }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
@@ -300,6 +313,12 @@
   .start-4 {
     inset-inline-start: calc(var(--spacing) * 4);
   }
+  .start-6 {
+    inset-inline-start: calc(var(--spacing) * 6);
+  }
+  .end {
+    inset-inline-end: var(--spacing);
+  }
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
@@ -318,9 +337,6 @@
   .top-\(--fd-docs-row-3\) {
     top: var(--fd-docs-row-3);
   }
-  .top-\(--fd-top\) {
-    top: var(--fd-top);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -328,11 +344,14 @@
     top: calc(var(--spacing) * 1.5);
   }
   .top-1\/2 {
-    top: calc(1/2 * 100%);
+    top: calc(1 / 2 * 100%);
   }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
+  .top-2\.5 {
+    top: calc(var(--spacing) * 2.5);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -352,7 +371,7 @@
     bottom: calc(var(--spacing) * 26);
   }
   .left-1\/2 {
-    left: calc(1/2 * 100%);
+    left: calc(1 / 2 * 100%);
   }
   .z-2 {
     z-index: 2;
@@ -414,6 +433,9 @@
   .my-0\! {
     margin-block: calc(var(--spacing) * 0) !important;
   }
+  .my-0\.5 {
+    margin-block: calc(var(--spacing) * 0.5);
+  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
@@ -831,6 +853,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -858,6 +883,9 @@
   .mb-auto {
     margin-bottom: auto;
   }
+  .box-border {
+    box-sizing: border-box;
+  }
   .fd-scroll-container {
     &::-webkit-scrollbar {
       width: 5px;
@@ -886,15 +914,16 @@
   .hidden {
     display: none;
   }
-  .inline {
-    display: inline;
-  }
   .inline-flex {
     display: inline-flex;
   }
   .table {
     display: table;
   }
+  .size-1 {
+    width: calc(var(--spacing) * 1);
+    height: calc(var(--spacing) * 1);
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -939,9 +968,6 @@
   .h-\(--fd-header-height\) {
     height: var(--fd-header-height);
   }
-  .h-\(--fd-height\) {
-    height: var(--fd-height);
-  }
   .h-\(--fd-toc-popover-height\) {
     height: var(--fd-toc-popover-height);
   }
@@ -987,6 +1013,9 @@
   .max-h-\(--available-height\) {
     max-height: var(--available-height);
   }
+  .max-h-20 {
+    max-height: calc(var(--spacing) * 20);
+  }
   .max-h-\[50vh\] {
     max-height: 50vh;
   }
@@ -1020,6 +1049,9 @@
   .w-\(--positioner-width\) {
     width: var(--positioner-width);
   }
+  .w-\(--radix-popover-trigger-width\) {
+    width: var(--radix-popover-trigger-width);
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -1029,12 +1061,12 @@
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
+  .w-1\/4 {
+    width: calc(1 / 4 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-\[25\%\] {
-    width: 25%;
-  }
   .w-\[85\%\] {
     width: 85%;
   }
@@ -1077,12 +1109,21 @@
   .max-w-\[900px\] {
     max-width: 900px;
   }
+  .max-w-\[1168px\] {
+    max-width: 1168px;
+  }
   .max-w-\[1200px\] {
     max-width: 1200px;
   }
   .max-w-\[1400px\] {
     max-width: 1400px;
   }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .max-w-screen-sm {
     max-width: var(--breakpoint-sm);
   }
@@ -1118,7 +1159,7 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .translate-x-2 {
@@ -1130,7 +1171,7 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-full {
@@ -1156,6 +1197,12 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .scroll-m-4 {
+    scroll-margin: calc(var(--spacing) * 4);
+  }
+  .scroll-m-20 {
+    scroll-margin: calc(var(--spacing) * 20);
+  }
   .scroll-m-24 {
     scroll-margin: calc(var(--spacing) * 24);
   }
@@ -1237,6 +1284,14 @@
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
+  .divide-x {
+    :where(& > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
+      border-inline-style: var(--tw-border-style);
+      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+    }
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -1301,10 +1356,6 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
-  .rounded-e-sm {
-    border-start-end-radius: var(--radius-sm);
-    border-end-end-radius: var(--radius-sm);
-  }
   .rounded-b-2xl {
     border-bottom-right-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
@@ -1341,6 +1392,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-fd-foreground\/10 {
     border-color: color-mix(in srgb, hsl(0, 0%, 3.9%) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1434,11 +1489,17 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .mask-\[linear-gradient\(to_bottom\,transparent\,white_--spacing\(14\)\,white_calc\(100\%---spacing\(14\)\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - calc(var(--spacing) * 14)),transparent);
+  }
+  .mask-\[linear-gradient\(to_bottom\,transparent\,white_12px\,white_calc\(100\%-12px\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,transparent,white 12px,white calc(100% - 12px),transparent);
+  }
   .mask-\[linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
   }
-  .mask-\[linear-gradient\(to_bottom\,transparent\,white_calc\(var\(--spacing\)\*14\)\,white_calc\(100\%-var\(--spacing\)\*14\)\,transparent\)\] {
-    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - var(--spacing) * 14),transparent);
+  .mask-\[linear-gradient\(to_bottom\,white\,white_30px\,transparent_80px\)\] {
+    mask-image: linear-gradient(to bottom,white,white 30px,transparent 80px);
   }
   .fill-\(--callout-color\) {
     fill: var(--callout-color);
@@ -1455,6 +1516,9 @@
       stroke: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
     }
   }
+  .stroke-fd-primary {
+    stroke: var(--color-fd-primary);
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1500,8 +1564,11 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .py-0 {
-    padding-block: calc(var(--spacing) * 0);
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+  .px-px {
+    padding-inline: 1px;
   }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
@@ -1569,6 +1636,9 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * 0.5);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1605,6 +1675,14 @@
   .font-mono {
     font-family: var(--font-mono);
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1634,6 +1712,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1730,12 +1812,6 @@
     --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-black\/50 {
-    --tw-shadow-color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 50%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1768,11 +1844,26 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[box-shadow\,background-color\,border-radius\] {
+    transition-property: box-shadow,background-color,border-radius;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[clip-path\] {
+    transition-property: clip-path;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[grid-template-columns\] {
     transition-property: grid-template-columns;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[height\,opacity\] {
+    transition-property: height,opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[height\] {
     transition-property: height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1793,8 +1884,13 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[top\,height\] {
-    transition-property: top,height;
+  .transition-\[opacity\,translate\,color\] {
+    transition-property: opacity,translate,color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[opacity\,translate\] {
+    transition-property: opacity,translate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -1851,10 +1947,6 @@
     --tw-ease: var(--easing);
     transition-timing-function: var(--easing);
   }
-  .ease-linear {
-    --tw-ease: linear;
-    transition-timing-function: linear;
-  }
   .ease-out {
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
@@ -1969,16 +2061,16 @@
       margin-bottom: calc(var(--spacing) * 2);
     }
   }
+  .group-data-active\:bg-fd-primary {
+    &:is(:where(.group)[data-active] *) {
+      background-color: var(--color-fd-primary);
+    }
+  }
   .group-data-panel-open\:rotate-180 {
     &:is(:where(.group)[data-panel-open] *) {
       rotate: 180deg;
     }
   }
-  .group-data-\[active\]\:bg-fd-primary {
-    &:is(:where(.group)[data-active] *) {
-      background-color: var(--color-fd-primary);
-    }
-  }
   .group-data-\[open\]\:rotate-180 {
     &:is(:where(.group)[data-open] *) {
       rotate: 180deg;
@@ -2224,6 +2316,21 @@
       color: var(--color-fd-accent-foreground);
     }
   }
+  .data-closed\:animate-fd-dialog-out {
+    &[data-closed] {
+      animation: var(--animate-fd-dialog-out);
+    }
+  }
+  .data-closed\:animate-fd-fade-out {
+    &[data-closed] {
+      animation: var(--animate-fd-fade-out);
+    }
+  }
+  .data-ending-style\:h-0 {
+    &[data-ending-style] {
+      height: calc(var(--spacing) * 0);
+    }
+  }
   .data-ending-style\:scale-90 {
     &[data-ending-style] {
       --tw-scale-x: 90%;
@@ -2248,6 +2355,16 @@
       transition-property: none;
     }
   }
+  .data-open\:animate-fd-dialog-in {
+    &[data-open] {
+      animation: var(--animate-fd-dialog-in);
+    }
+  }
+  .data-open\:animate-fd-fade-in {
+    &[data-open] {
+      animation: var(--animate-fd-fade-in);
+    }
+  }
   .data-open\:bg-fd-accent {
     &[data-open] {
       background-color: var(--color-fd-accent);
@@ -2263,6 +2380,11 @@
       color: var(--color-fd-primary);
     }
   }
+  .data-starting-style\:h-0 {
+    &[data-starting-style] {
+      height: calc(var(--spacing) * 0);
+    }
+  }
   .data-starting-style\:scale-90 {
     &[data-starting-style] {
       --tw-scale-x: 90%;
@@ -2276,6 +2398,38 @@
       opacity: 0%;
     }
   }
+  .data-ending-style\:data-\[activation-direction\=left\]\:translate-x-1\/2 {
+    &[data-ending-style] {
+      &[data-activation-direction="left"] {
+        --tw-translate-x: calc(1 / 2 * 100%);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .data-starting-style\:data-\[activation-direction\=left\]\:-translate-x-1\/2 {
+    &[data-starting-style] {
+      &[data-activation-direction="left"] {
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .data-ending-style\:data-\[activation-direction\=right\]\:-translate-x-1\/2 {
+    &[data-ending-style] {
+      &[data-activation-direction="right"] {
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .data-starting-style\:data-\[activation-direction\=right\]\:translate-x-1\/2 {
+    &[data-starting-style] {
+      &[data-activation-direction="right"] {
+        --tw-translate-x: calc(1 / 2 * 100%);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .data-\[active\]\:border-fd-primary {
     &[data-active] {
       border-color: var(--color-fd-primary);
@@ -2364,16 +2518,6 @@
       }
     }
   }
-  .data-\[closed\]\:animate-fd-dialog-out {
-    &[data-closed] {
-      animation: var(--animate-fd-dialog-out);
-    }
-  }
-  .data-\[closed\]\:animate-fd-fade-out {
-    &[data-closed] {
-      animation: var(--animate-fd-fade-out);
-    }
-  }
   .data-\[closed\]\:animate-fd-popover-out {
     &[data-closed] {
       animation: var(--animate-fd-popover-out);
@@ -2397,73 +2541,149 @@
       height: calc(var(--spacing) * 0);
     }
   }
-  .data-\[ending-style\]\:opacity-0 {
-    &[data-ending-style] {
-      opacity: 0%;
+  .data-\[inactive\]\:hidden {
+    &[data-inactive] {
+      display: none;
     }
   }
-  .data-\[ending-style\]\:data-\[activation-direction\=left\]\:translate-x-1\/2 {
-    &[data-ending-style] {
-      &[data-activation-direction="left"] {
-        --tw-translate-x: calc(1/2 * 100%);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+  .data-\[open\]\:animate-fd-popover-in {
+    &[data-open] {
+      animation: var(--animate-fd-popover-in);
+    }
+  }
+  .data-\[side\=bottom\]\:before\:top-\[-10px\] {
+    &[data-side="bottom"] {
+      &::before {
+        content: var(--tw-content);
+        top: -10px;
       }
     }
   }
-  .data-\[ending-style\]\:data-\[activation-direction\=right\]\:-translate-x-1\/2 {
-    &[data-ending-style] {
-      &[data-activation-direction="right"] {
-        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+  .data-\[side\=bottom\]\:before\:right-0 {
+    &[data-side="bottom"] {
+      &::before {
+        content: var(--tw-content);
+        right: calc(var(--spacing) * 0);
       }
     }
   }
-  .data-\[inactive\]\:hidden {
-    &[data-inactive] {
-      display: none;
+  .data-\[side\=bottom\]\:before\:left-0 {
+    &[data-side="bottom"] {
+      &::before {
+        content: var(--tw-content);
+        left: calc(var(--spacing) * 0);
+      }
     }
   }
-  .data-\[open\]\:animate-fd-dialog-in {
-    &[data-open] {
-      animation: var(--animate-fd-dialog-in);
+  .data-\[side\=bottom\]\:before\:h-2\.5 {
+    &[data-side="bottom"] {
+      &::before {
+        content: var(--tw-content);
+        height: calc(var(--spacing) * 2.5);
+      }
     }
   }
-  .data-\[open\]\:animate-fd-fade-in {
-    &[data-open] {
-      animation: var(--animate-fd-fade-in);
+  .data-\[side\=left\]\:before\:top-0 {
+    &[data-side="left"] {
+      &::before {
+        content: var(--tw-content);
+        top: calc(var(--spacing) * 0);
+      }
     }
   }
-  .data-\[open\]\:animate-fd-popover-in {
-    &[data-open] {
-      animation: var(--animate-fd-popover-in);
+  .data-\[side\=left\]\:before\:right-\[-10px\] {
+    &[data-side="left"] {
+      &::before {
+        content: var(--tw-content);
+        right: -10px;
+      }
     }
   }
-  .data-\[starting-style\]\:h-0 {
-    &[data-starting-style] {
-      height: calc(var(--spacing) * 0);
+  .data-\[side\=left\]\:before\:bottom-0 {
+    &[data-side="left"] {
+      &::before {
+        content: var(--tw-content);
+        bottom: calc(var(--spacing) * 0);
+      }
     }
   }
-  .data-\[starting-style\]\:opacity-0 {
-    &[data-starting-style] {
-      opacity: 0%;
+  .data-\[side\=left\]\:before\:w-2\.5 {
+    &[data-side="left"] {
+      &::before {
+        content: var(--tw-content);
+        width: calc(var(--spacing) * 2.5);
+      }
     }
   }
-  .data-\[starting-style\]\:data-\[activation-direction\=left\]\:-translate-x-1\/2 {
-    &[data-starting-style] {
-      &[data-activation-direction="left"] {
-        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+  .data-\[side\=right\]\:before\:top-0 {
+    &[data-side="right"] {
+      &::before {
+        content: var(--tw-content);
+        top: calc(var(--spacing) * 0);
       }
     }
   }
-  .data-\[starting-style\]\:data-\[activation-direction\=right\]\:translate-x-1\/2 {
-    &[data-starting-style] {
-      &[data-activation-direction="right"] {
-        --tw-translate-x: calc(1/2 * 100%);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+  .data-\[side\=right\]\:before\:bottom-0 {
+    &[data-side="right"] {
+      &::before {
+        content: var(--tw-content);
+        bottom: calc(var(--spacing) * 0);
+      }
+    }
+  }
+  .data-\[side\=right\]\:before\:left-\[-10px\] {
+    &[data-side="right"] {
+      &::before {
+        content: var(--tw-content);
+        left: -10px;
       }
     }
   }
+  .data-\[side\=right\]\:before\:w-2\.5 {
+    &[data-side="right"] {
+      &::before {
+        content: var(--tw-content);
+        width: calc(var(--spacing) * 2.5);
+      }
+    }
+  }
+  .data-\[side\=top\]\:before\:right-0 {
+    &[data-side="top"] {
+      &::before {
+        content: var(--tw-content);
+        right: calc(var(--spacing) * 0);
+      }
+    }
+  }
+  .data-\[side\=top\]\:before\:bottom-\[-10px\] {
+    &[data-side="top"] {
+      &::before {
+        content: var(--tw-content);
+        bottom: -10px;
+      }
+    }
+  }
+  .data-\[side\=top\]\:before\:left-0 {
+    &[data-side="top"] {
+      &::before {
+        content: var(--tw-content);
+        left: calc(var(--spacing) * 0);
+      }
+    }
+  }
+  .data-\[side\=top\]\:before\:h-2\.5 {
+    &[data-side="top"] {
+      &::before {
+        content: var(--tw-content);
+        height: calc(var(--spacing) * 2.5);
+      }
+    }
+  }
+  .data-\[starting-style\]\:h-0 {
+    &[data-starting-style] {
+      height: calc(var(--spacing) * 0);
+    }
+  }
   .data-\[state\=closed\]\:animate-fd-fade-out {
     &[data-state="closed"] {
       animation: var(--animate-fd-fade-out);
@@ -2484,6 +2704,11 @@
       animation: var(--animate-fd-sidebar-in);
     }
   }
+  .data-\[state\=open\]\:bg-fd-accent {
+    &[data-state="open"] {
+      background-color: var(--color-fd-accent);
+    }
+  }
   .data-\[state\=open\]\:text-fd-accent-foreground {
     &[data-state="open"] {
       color: var(--color-fd-accent-foreground);
@@ -2512,6 +2737,18 @@
       display: none;
     }
   }
+  .max-lg\:rounded-b-2xl {
+    @media (width < 64rem) {
+      border-bottom-right-radius: var(--radius-2xl);
+      border-bottom-left-radius: var(--radius-2xl);
+    }
+  }
+  .max-lg\:shadow-lg {
+    @media (width < 64rem) {
+      --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);
+    }
+  }
   .max-md\:flex {
     @media (width < 48rem) {
       display: flex;
@@ -2543,6 +2780,11 @@
       padding: calc(var(--spacing) * 1.5);
     }
   }
+  .max-sm\:mt-2 {
+    @media (width < 40rem) {
+      margin-top: calc(var(--spacing) * 2);
+    }
+  }
   .max-sm\:hidden {
     @media (width < 40rem) {
       display: none;
@@ -2568,6 +2810,21 @@
       max-width: 400px;
     }
   }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\:items-center {
+    @media (width >= 40rem) {
+      align-items: center;
+    }
+  }
+  .sm\:justify-end {
+    @media (width >= 40rem) {
+      justify-content: flex-end;
+    }
+  }
   .sm\:rounded-2xl {
     @media (width >= 40rem) {
       border-radius: var(--radius-2xl);
@@ -2642,16 +2899,6 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .lg\:flex-row {
-    @media (width >= 64rem) {
-      flex-direction: row;
-    }
-  }
-  .lg\:items-center {
-    @media (width >= 64rem) {
-      align-items: center;
-    }
-  }
   .lg\:text-sm {
     @media (width >= 64rem) {
       font-size: var(--text-sm);
@@ -2695,10 +2942,9 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .rtl\:-scale-x-100 {
+  .rtl\:rotate-90 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      --tw-scale-x: calc(100% * -1);
-      scale: var(--tw-scale-x) var(--tw-scale-y);
+      rotate: 90deg;
     }
   }
   .rtl\:rotate-180 {
@@ -2792,6 +3038,11 @@
       flex-shrink: 0;
     }
   }
+  .\[\&_svg\]\:text-fd-muted-foreground {
+    & svg {
+      color: var(--color-fd-muted-foreground);
+    }
+  }
   .\[\&\>figure\:only-child\]\:-m-4 {
     &>figure:only-child {
       margin: calc(var(--spacing) * -4);
@@ -2833,85 +3084,85 @@
   --color-fd-secondary: hsl(0, 0%, 18%);
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
-.shiki:not(.not-hanzo-docs-codeblock *) {
+:root {
+  --fd-sidebar-drawer-offset: 100%;
+}
+[dir='rtl'] {
+  --fd-sidebar-drawer-offset: -100%;
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    border-color: var(--color-fd-border, currentColor);
+  }
+  body {
+    background-color: var(--color-fd-background);
+    color: var(--color-fd-foreground);
+  }
+}
+.shiki:not(.not-fumadocs-codeblock *) {
   --padding-left: calc(var(--spacing) * 4);
   --padding-right: calc(var(--spacing) * 4);
   code span {
     color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style);
   }
-}
-.dark .shiki:not(.not-hanzo-docs-codeblock *) {
-  code span {
-    color: var(--shiki-dark);
-  }
-}
-:is(pre *):is(.shiki *):not(.not-hanzo-docs-codeblock *) {
-  .line& {
+  .line {
     position: relative;
-    min-height: 1lh;
     padding-left: var(--padding-left);
     padding-right: var(--padding-right);
   }
-  .has-focused .line&:not(.focused) {
+  .line:empty {
+    height: 1lh;
+  }
+  &.has-focused .line:not(.focused) {
     filter: blur(2px);
     transition: filter 200ms;
   }
-  .has-focused:hover .line&:not(.focused) {
+  &.has-focused:hover .line:not(.focused) {
     filter: blur(0);
   }
-  [data-line-numbers] .twoslash-meta-line& {
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-  [data-line-numbers] .line& {
-    counter-increment: line;
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-  [data-line-numbers] .line&::after {
-    position: absolute;
-    content: counter(line);
-    color: var(--fd-counter-color, hsl(0, 0%, 45.1%));
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix( in oklab, var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%, transparent );
-    }
-    top: calc(var(--spacing) * 0);
-    left: calc(var(--spacing) * 4);
-  }
-  .diff&::before {
+  .diff::before {
     position: absolute;
     left: calc(var(--spacing) * 1.5);
   }
-  .diff.remove& {
+  .diff.remove {
     opacity: 0.7;
     --fd-counter-color: var(--color-fd-diff-remove-symbol);
     background-color: var(--color-fd-diff-remove);
   }
-  .diff.remove&::before {
+  .diff.remove::before {
     content: '-';
     color: var(--color-fd-diff-remove-symbol);
   }
-  .diff.add& {
+  .diff.add {
     --fd-counter-color: var(--color-fd-diff-add-symbol);
     background-color: var(--color-fd-diff-add);
   }
-  .diff.add&::before {
+  .diff.add::before {
     content: '+';
     color: var(--color-fd-diff-add-symbol);
   }
-  .highlighted& {
+  .highlighted {
     --fd-counter-color: var(--color-fd-primary);
     padding-left: calc(var(--padding-left) - 2px);
+    background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
+    }
+  }
+  .highlighted::after {
+    position: absolute;
+    content: '';
+    inset-block: calc(var(--spacing) * 0);
+    left: calc(var(--spacing) * 0);
     border-left-style: var(--tw-border-style);
     border-left-width: 2px;
     border-color: color-mix(in srgb, hsl(0, 0%, 9%) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
     }
-    background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
-    }
   }
-  .highlighted-word& {
+  .highlighted-word {
     padding: 1px;
     margin-block: -1px;
     border-radius: var(--radius-md);
@@ -2928,20 +3179,30 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-}
-:root {
-  --fd-sidebar-drawer-offset: 100%;
-}
-[dir='rtl'] {
-  --fd-sidebar-drawer-offset: -100%;
-}
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    border-color: var(--color-fd-border, currentColor);
+  &[data-line-numbers] .twoslash-meta-line {
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
   }
-  body {
-    background-color: var(--color-fd-background);
-    color: var(--color-fd-foreground);
+  &[data-line-numbers] .line {
+    counter-increment: line;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+  &[data-line-numbers] .line::after {
+    position: absolute;
+    content: counter(line);
+    color: var(--fd-counter-color, hsl(0, 0%, 45.1%));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix( in oklab, var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%, transparent );
+    }
+    inset-block: calc(var(--spacing) * 0);
+    left: calc(var(--spacing) * 0);
+    width: calc(var(--spacing) * 7);
+    text-align: right;
+  }
+}
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style);
   }
 }
 @layer base {
@@ -2991,6 +3252,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-divide-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;
@@ -3264,6 +3530,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-divide-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-leading: initial;
       --tw-font-weight: initial;