kumo-svelte 0.1.0-beta.0

package/src/lib/styles.css

@@ -0,0 +1,1350 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+:root {
+  --svelte-orange: oklch(0.6385 0.1991 34.99);
+}
+
+/**
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * This file is generated by the theme generator.
+ * To modify tokens, edit: scripts/theme-generator/config.ts
+ * Then run: pnpm codegen:themes
+ */
+
+
+@theme {
+  --text-color-kumo-default: light-dark(
+    var(--color-neutral-900, oklch(21% 0.006 285.885)),
+    var(--color-neutral-100, oklch(97% 0 0))
+  );
+
+  --text-color-kumo-inverse: light-dark(
+    var(--color-neutral-100, oklch(97% 0 0)),
+    var(--color-neutral-900, oklch(20.5% 0 0))
+  );
+
+  --text-color-kumo-strong: light-dark(
+    var(--color-neutral-950, oklch(14.5% 0 0)),
+    var(--color-neutral-50, oklch(98.5% 0 0))
+  );
+
+  --text-color-kumo-subtle: light-dark(
+    var(--color-neutral-500, oklch(55.6% 0 0)),
+    var(--color-neutral-400, oklch(70.8% 0 0))
+  );
+
+  --text-color-kumo-inactive: light-dark(
+    var(--color-neutral-300, oklch(87% 0 0)),
+    var(--color-neutral-600, oklch(43.9% 0 0))
+  );
+
+  --text-color-kumo-placeholder: light-dark(
+    var(--color-neutral-400, oklch(70.8% 0 0)),
+    var(--color-neutral-500, oklch(55.6% 0 0))
+  );
+
+  --text-color-kumo-brand: light-dark(
+    #f6821f,
+    #f6821f
+  );
+
+  --text-color-kumo-link: light-dark(
+    var(--color-blue-800, oklch(42.4% 0.199 265.638)),
+    var(--color-blue-400, oklch(70.7% 0.165 254.624))
+  );
+
+  --text-color-kumo-info: light-dark(
+    var(--color-blue-800, oklch(42.4% 0.199 265.638)),
+    var(--color-blue-400, oklch(70.7% 0.165 254.624))
+  );
+
+  --text-color-kumo-success: light-dark(
+    var(--color-emerald-800, oklch(43.2% 0.095 166.913)),
+    var(--color-emerald-200, oklch(90.5% 0.093 164.15))
+  );
+
+  --text-color-kumo-danger: light-dark(
+    var(--color-red-700, oklch(50.5% 0.213 27.518)),
+    var(--color-red-400, oklch(70.4% 0.191 22.216))
+  );
+
+  --text-color-kumo-warning: light-dark(
+    var(--color-yellow-800, oklch(47.6% 0.114 61.907)),
+    var(--color-yellow-400, oklch(85.2% 0.199 91.936))
+  );
+
+  --text-color-kumo-badge-orange-subtle: light-dark(
+    var(--color-orange-800, oklch(47% 0.157 37.304)),
+    var(--color-orange-200, oklch(90.1% 0.076 70.697))
+  );
+
+  --text-color-kumo-badge-teal-subtle: light-dark(
+    var(--color-teal-800, oklch(43.7% 0.078 188.216)),
+    var(--color-teal-200, oklch(91% 0.096 180.426))
+  );
+
+  --text-color-kumo-badge-neutral-subtle: light-dark(
+    var(--color-neutral-800, oklch(26.9% 0 0)),
+    var(--color-neutral-200, oklch(92.2% 0 0))
+  );
+
+  --text-color-kumo-badge-inverted: light-dark(
+    var(--color-white, #fff),
+    var(--color-black, #000)
+  );
+
+}
+
+@theme {
+  --color-kumo-canvas: light-dark(
+    var(--color-kumo-neutral-25, oklch(98.75% 0 0)),
+    var(--color-kumo-neutral-1000, oklch(10% 0 0))
+  );
+
+  --color-kumo-elevated: light-dark(
+    var(--color-kumo-neutral-75, oklch(98% 0 0)),
+    var(--color-kumo-neutral-975, oklch(12% 0 0))
+  );
+
+  --color-kumo-recessed: light-dark(
+    var(--color-kumo-neutral-125, oklch(96% 0 0)),
+    var(--color-kumo-neutral-950, oklch(15% 0 0))
+  );
+
+  --color-kumo-base: light-dark(
+    var(--color-white, #fff),
+    var(--color-kumo-neutral-925, oklch(17% 0 0))
+  );
+
+  --color-kumo-tint: light-dark(
+    var(--color-neutral-100, oklch(97% 0 0)),
+    var(--color-kumo-neutral-800, oklch(26.9% 0 0))
+  );
+
+  --color-kumo-contrast: light-dark(
+    var(--color-kumo-neutral-975, oklch(8.5% 0 0)),
+    var(--color-kumo-neutral-25, oklch(98.5% 0 0))
+  );
+
+  --color-kumo-overlay: light-dark(
+    var(--color-kumo-neutral-50, oklch(97.5% 0 0)),
+    var(--color-neutral-800, oklch(26.9% 0 0))
+  );
+
+  --color-kumo-control: light-dark(
+    var(--color-white, #fff),
+    var(--color-neutral-900, oklch(21% 0.006 285.885))
+  );
+
+  --color-kumo-interact: light-dark(
+    var(--color-neutral-300, oklch(87% 0 0)),
+    var(--color-neutral-700, oklch(37.1% 0 0))
+  );
+
+  --color-kumo-fill: light-dark(
+    var(--color-neutral-200, oklch(92.2% 0 0)),
+    var(--color-neutral-800, oklch(26.9% 0 0))
+  );
+
+  --color-kumo-fill-hover: light-dark(
+    var(--color-kumo-neutral-125, oklch(96.5% 0 0)),
+    var(--color-neutral-800, oklch(37.1% 0 0))
+  );
+
+  --color-kumo-brand: light-dark(
+    oklch(0.5772 0.2324 260),
+    oklch(0.5772 0.2324 260)
+  );
+
+  --color-kumo-brand-hover: light-dark(
+    var(--color-blue-700, oklch(48.8% 0.243 264.376)),
+    var(--color-blue-700, oklch(48.8% 0.243 264.376))
+  );
+
+  --color-kumo-line: light-dark(
+    oklch(14.5% 0 0 / 0.1),
+    var(--color-kumo-neutral-750, oklch(32% 0 0))
+  );
+
+  --color-kumo-hairline: light-dark(
+    var(--color-kumo-neutral-150, oklch(93.5% 0 0)),
+    var(--color-neutral-800, oklch(26.9% 0 0))
+  );
+
+  --color-kumo-focus: light-dark(
+    var(--color-kumo-neutral-950, oklch(15% 0 0)),
+    var(--color-kumo-neutral-150, oklch(93.5% 0 0))
+  );
+
+  --color-kumo-shadow-edge: light-dark(
+    oklch(0% 0 0 / 0.12),
+    oklch(100% 0 0 / 0.1)
+  );
+
+  --color-kumo-shadow-drop: light-dark(
+    oklch(0% 0 0 / 0.08),
+    oklch(0% 0 0 / 0.3)
+  );
+
+  --color-kumo-tip-shadow: light-dark(
+    var(--color-gray-200, oklch(92.8% 0.006 264.531)),
+    transparent
+  );
+
+  --color-kumo-tip-stroke: light-dark(
+    transparent,
+    var(--color-neutral-800, oklch(26.9% 0 0))
+  );
+
+  --color-kumo-info-tint: light-dark(
+    var(--color-blue-100, oklch(93.2% 0.032 255.585)),
+    var(--color-blue-900, oklch(37.9% 0.146 265.522))
+  );
+
+  --color-kumo-info: light-dark(
+    var(--color-blue-300, oklch(80.9% 0.105 251.813)),
+    var(--color-blue-900, oklch(37.9% 0.146 265.522))
+  );
+
+  --color-kumo-warning-tint: light-dark(
+    var(--color-yellow-100, oklch(97.3% 0.071 103.193)),
+    var(--color-yellow-700, oklch(55.4% 0.135 66.442))
+  );
+
+  --color-kumo-warning: light-dark(
+    var(--color-yellow-300, oklch(90.5% 0.182 98.111)),
+    var(--color-yellow-900, oklch(42.1% 0.095 57.708))
+  );
+
+  --color-kumo-danger-tint: light-dark(
+    var(--color-red-100, oklch(93.6% 0.032 17.717)),
+    var(--color-red-900, oklch(39.6% 0.141 25.723))
+  );
+
+  --color-kumo-danger: light-dark(
+    var(--color-red-500, oklch(63.7% 0.237 25.331)),
+    var(--color-red-900, oklch(39.6% 0.141 25.723))
+  );
+
+  --color-kumo-success-tint: light-dark(
+    var(--color-emerald-100, oklch(95% 0.052 163.051)),
+    var(--color-emerald-900, oklch(37.8% 0.077 168.94))
+  );
+
+  --color-kumo-success: light-dark(
+    var(--color-green-300, oklch(87.1% 0.15 154.449)),
+    var(--color-green-900, oklch(39.3% 0.095 152.535))
+  );
+
+  --color-kumo-badge-red: light-dark(
+    var(--color-red-600, oklch(57.7% 0.245 27.325)),
+    var(--color-red-700, oklch(50.5% 0.213 27.518))
+  );
+
+  --color-kumo-badge-orange: light-dark(
+    var(--color-orange-650, oklch(81.5% 0.197 76)),
+    var(--color-orange-650, oklch(81.5% 0.197 76))
+  );
+
+  --color-kumo-badge-orange-subtle: light-dark(
+    var(--color-orange-100, oklch(95.4% 0.038 75.164)),
+    var(--color-orange-900, oklch(40.8% 0.123 38.172))
+  );
+
+  --color-kumo-badge-purple: light-dark(
+    var(--color-purple-600, oklch(60% 0.118 184.704)),
+    var(--color-purple-700, oklch(50.8% 0.118 165.612))
+  );
+
+  --color-kumo-badge-green: light-dark(
+    var(--color-emerald-700, oklch(50.8% 0.118 165.612)),
+    var(--color-emerald-700, oklch(50.8% 0.118 165.612))
+  );
+
+  --color-kumo-badge-teal: light-dark(
+    var(--color-teal-650, oklch(54.9% 0.096 184.565)),
+    var(--color-teal-700, oklch(51.1% 0.096 186.391))
+  );
+
+  --color-kumo-badge-teal-subtle: light-dark(
+    var(--color-teal-100, oklch(95.3% 0.051 180.801)),
+    var(--color-teal-900, oklch(38.6% 0.063 188.416))
+  );
+
+  --color-kumo-badge-blue: light-dark(
+    var(--color-blue-600, oklch(54.6% 0.245 262.881)),
+    var(--color-blue-700, oklch(48.8% 0.243 264.376))
+  );
+
+  --color-kumo-badge-neutral: light-dark(
+    var(--color-neutral-600, oklch(43.9% 0 0)),
+    var(--color-neutral-600, oklch(43.9% 0 0))
+  );
+
+  --color-kumo-badge-inverted: light-dark(
+    var(--color-neutral-950, oklch(14.5% 0 0)),
+    var(--color-white, #fff)
+  );
+
+}
+
+@theme {
+  /* Typography - text sizes and line heights */
+  --text-xs: 12px;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 13px;
+  --text-sm--line-height: calc(1 / 0.85);
+  --text-base: 14px;
+  --text-base--line-height: calc(1.25 / 0.875);
+  --text-lg: 16px;
+  --text-lg--line-height: calc(1.25 / 1);
+}
+
+@layer base {
+  :root, [data-theme="kumo"] {
+    --text-color-kumo-default: var(--color-neutral-900, oklch(21% 0.006 285.885));
+    --text-color-kumo-inverse: var(--color-neutral-100, oklch(97% 0 0));
+    --text-color-kumo-strong: var(--color-neutral-950, oklch(14.5% 0 0));
+    --text-color-kumo-subtle: var(--color-neutral-500, oklch(55.6% 0 0));
+    --text-color-kumo-inactive: var(--color-neutral-300, oklch(87% 0 0));
+    --text-color-kumo-placeholder: var(--color-neutral-400, oklch(70.8% 0 0));
+    --text-color-kumo-brand: #f6821f;
+    --text-color-kumo-link: var(--color-blue-800, oklch(42.4% 0.199 265.638));
+    --text-color-kumo-info: var(--color-blue-800, oklch(42.4% 0.199 265.638));
+    --text-color-kumo-success: var(--color-emerald-800, oklch(43.2% 0.095 166.913));
+    --text-color-kumo-danger: var(--color-red-700, oklch(50.5% 0.213 27.518));
+    --text-color-kumo-warning: var(--color-yellow-800, oklch(47.6% 0.114 61.907));
+    --text-color-kumo-badge-orange-subtle: var(--color-orange-800, oklch(47% 0.157 37.304));
+    --text-color-kumo-badge-teal-subtle: var(--color-teal-800, oklch(43.7% 0.078 188.216));
+    --text-color-kumo-badge-neutral-subtle: var(--color-neutral-800, oklch(26.9% 0 0));
+    --text-color-kumo-badge-inverted: var(--color-white, #fff);
+    --color-kumo-canvas: var(--color-kumo-neutral-25, oklch(98.75% 0 0));
+    --color-kumo-elevated: var(--color-kumo-neutral-75, oklch(98% 0 0));
+    --color-kumo-recessed: var(--color-kumo-neutral-125, oklch(96% 0 0));
+    --color-kumo-base: var(--color-white, #fff);
+    --color-kumo-tint: var(--color-neutral-100, oklch(97% 0 0));
+    --color-kumo-contrast: var(--color-kumo-neutral-975, oklch(8.5% 0 0));
+    --color-kumo-overlay: var(--color-kumo-neutral-50, oklch(97.5% 0 0));
+    --color-kumo-control: var(--color-white, #fff);
+    --color-kumo-interact: var(--color-neutral-300, oklch(87% 0 0));
+    --color-kumo-fill: var(--color-neutral-200, oklch(92.2% 0 0));
+    --color-kumo-fill-hover: var(--color-kumo-neutral-125, oklch(96.5% 0 0));
+    --color-kumo-brand: oklch(0.5772 0.2324 260);
+    --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376));
+    --color-kumo-line: oklch(14.5% 0 0 / 0.1);
+    --color-kumo-hairline: var(--color-kumo-neutral-150, oklch(93.5% 0 0));
+    --color-kumo-focus: var(--color-kumo-neutral-950, oklch(15% 0 0));
+    --color-kumo-shadow-edge: oklch(0% 0 0 / 0.12);
+    --color-kumo-shadow-drop: oklch(0% 0 0 / 0.08);
+    --color-kumo-tip-shadow: var(--color-gray-200, oklch(92.8% 0.006 264.531));
+    --color-kumo-tip-stroke: transparent;
+    --color-kumo-info-tint: var(--color-blue-100, oklch(93.2% 0.032 255.585));
+    --color-kumo-info: var(--color-blue-300, oklch(80.9% 0.105 251.813));
+    --color-kumo-warning-tint: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
+    --color-kumo-warning: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
+    --color-kumo-danger-tint: var(--color-red-100, oklch(93.6% 0.032 17.717));
+    --color-kumo-danger: var(--color-red-500, oklch(63.7% 0.237 25.331));
+    --color-kumo-success-tint: var(--color-emerald-100, oklch(95% 0.052 163.051));
+    --color-kumo-success: var(--color-green-300, oklch(87.1% 0.15 154.449));
+    --color-kumo-badge-red: var(--color-red-600, oklch(57.7% 0.245 27.325));
+    --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
+    --color-kumo-badge-orange-subtle: var(--color-orange-100, oklch(95.4% 0.038 75.164));
+    --color-kumo-badge-purple: var(--color-purple-600, oklch(60% 0.118 184.704));
+    --color-kumo-badge-green: var(--color-emerald-700, oklch(50.8% 0.118 165.612));
+    --color-kumo-badge-teal: var(--color-teal-650, oklch(54.9% 0.096 184.565));
+    --color-kumo-badge-teal-subtle: var(--color-teal-100, oklch(95.3% 0.051 180.801));
+    --color-kumo-badge-blue: var(--color-blue-600, oklch(54.6% 0.245 262.881));
+    --color-kumo-badge-neutral: var(--color-neutral-600, oklch(43.9% 0 0));
+    --color-kumo-badge-inverted: var(--color-neutral-950, oklch(14.5% 0 0));
+  }
+  
+  :root[data-mode="dark"], [data-mode="dark"]:not([data-theme]), [data-mode="dark"] [data-theme="kumo"], [data-theme="kumo"][data-mode="dark"], [data-theme="kumo"] [data-mode="dark"] {
+    --text-color-kumo-default: var(--color-neutral-100, oklch(97% 0 0));
+    --text-color-kumo-inverse: var(--color-neutral-900, oklch(20.5% 0 0));
+    --text-color-kumo-strong: var(--color-neutral-50, oklch(98.5% 0 0));
+    --text-color-kumo-subtle: var(--color-neutral-400, oklch(70.8% 0 0));
+    --text-color-kumo-inactive: var(--color-neutral-600, oklch(43.9% 0 0));
+    --text-color-kumo-placeholder: var(--color-neutral-500, oklch(55.6% 0 0));
+    --text-color-kumo-brand: #f6821f;
+    --text-color-kumo-link: var(--color-blue-400, oklch(70.7% 0.165 254.624));
+    --text-color-kumo-info: var(--color-blue-400, oklch(70.7% 0.165 254.624));
+    --text-color-kumo-success: var(--color-emerald-200, oklch(90.5% 0.093 164.15));
+    --text-color-kumo-danger: var(--color-red-400, oklch(70.4% 0.191 22.216));
+    --text-color-kumo-warning: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
+    --text-color-kumo-badge-orange-subtle: var(--color-orange-200, oklch(90.1% 0.076 70.697));
+    --text-color-kumo-badge-teal-subtle: var(--color-teal-200, oklch(91% 0.096 180.426));
+    --text-color-kumo-badge-neutral-subtle: var(--color-neutral-200, oklch(92.2% 0 0));
+    --text-color-kumo-badge-inverted: var(--color-black, #000);
+    --color-kumo-canvas: var(--color-kumo-neutral-1000, oklch(10% 0 0));
+    --color-kumo-elevated: var(--color-kumo-neutral-975, oklch(12% 0 0));
+    --color-kumo-recessed: var(--color-kumo-neutral-950, oklch(15% 0 0));
+    --color-kumo-base: var(--color-kumo-neutral-925, oklch(17% 0 0));
+    --color-kumo-tint: var(--color-kumo-neutral-800, oklch(26.9% 0 0));
+    --color-kumo-contrast: var(--color-kumo-neutral-25, oklch(98.5% 0 0));
+    --color-kumo-overlay: var(--color-neutral-800, oklch(26.9% 0 0));
+    --color-kumo-control: var(--color-neutral-900, oklch(21% 0.006 285.885));
+    --color-kumo-interact: var(--color-neutral-700, oklch(37.1% 0 0));
+    --color-kumo-fill: var(--color-neutral-800, oklch(26.9% 0 0));
+    --color-kumo-fill-hover: var(--color-neutral-800, oklch(37.1% 0 0));
+    --color-kumo-brand: oklch(0.5772 0.2324 260);
+    --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376));
+    --color-kumo-line: var(--color-kumo-neutral-750, oklch(32% 0 0));
+    --color-kumo-hairline: var(--color-neutral-800, oklch(26.9% 0 0));
+    --color-kumo-focus: var(--color-kumo-neutral-150, oklch(93.5% 0 0));
+    --color-kumo-shadow-edge: oklch(100% 0 0 / 0.1);
+    --color-kumo-shadow-drop: oklch(0% 0 0 / 0.3);
+    --color-kumo-tip-shadow: transparent;
+    --color-kumo-tip-stroke: var(--color-neutral-800, oklch(26.9% 0 0));
+    --color-kumo-info-tint: var(--color-blue-900, oklch(37.9% 0.146 265.522));
+    --color-kumo-info: var(--color-blue-900, oklch(37.9% 0.146 265.522));
+    --color-kumo-warning-tint: var(--color-yellow-700, oklch(55.4% 0.135 66.442));
+    --color-kumo-warning: var(--color-yellow-900, oklch(42.1% 0.095 57.708));
+    --color-kumo-danger-tint: var(--color-red-900, oklch(39.6% 0.141 25.723));
+    --color-kumo-danger: var(--color-red-900, oklch(39.6% 0.141 25.723));
+    --color-kumo-success-tint: var(--color-emerald-900, oklch(37.8% 0.077 168.94));
+    --color-kumo-success: var(--color-green-900, oklch(39.3% 0.095 152.535));
+    --color-kumo-badge-red: var(--color-red-700, oklch(50.5% 0.213 27.518));
+    --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
+    --color-kumo-badge-orange-subtle: var(--color-orange-900, oklch(40.8% 0.123 38.172));
+    --color-kumo-badge-purple: var(--color-purple-700, oklch(50.8% 0.118 165.612));
+    --color-kumo-badge-green: var(--color-emerald-700, oklch(50.8% 0.118 165.612));
+    --color-kumo-badge-teal: var(--color-teal-700, oklch(51.1% 0.096 186.391));
+    --color-kumo-badge-teal-subtle: var(--color-teal-900, oklch(38.6% 0.063 188.416));
+    --color-kumo-badge-blue: var(--color-blue-700, oklch(48.8% 0.243 264.376));
+    --color-kumo-badge-neutral: var(--color-neutral-600, oklch(43.9% 0 0));
+    --color-kumo-badge-inverted: var(--color-white, #fff);
+  }
+}
+
+/* ==========================================================================
+   Kumo Docs Global Styles
+   ========================================================================== */
+
+* {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Prevent CLS from font loading */
+html {
+  scroll-behavior: smooth;
+  letter-spacing: -0.01em;
+  line-height: 1.5;
+  font-feature-settings: "cv02", "cv03", "cv04", "calt";
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+/* Reset tracking for monospace/code elements and kumo component areas */
+pre,
+code,
+kbd,
+.font-mono {
+  letter-spacing: normal;
+}
+
+/* ==========================================================================
+   Kumo Prose — Tailwind Typography overrides using kumo semantic tokens
+   Used on .kumo-prose wrapper in DocLayout and MdxDocLayout
+   ========================================================================== */
+
+.kumo-prose {
+  /* Body text */
+  --tw-prose-body: var(--text-color-kumo-default);
+  /* Headings */
+  --tw-prose-headings: var(--text-color-kumo-default);
+  /* Lead paragraphs */
+  --tw-prose-lead: var(--text-color-kumo-default);
+  /* Link color */
+  --tw-prose-links: var(--text-color-kumo-link);
+  /* Bold text */
+  --tw-prose-bold: var(--text-color-kumo-strong);
+  /* List counters (ordered lists) */
+  --tw-prose-counters: var(--text-color-kumo-subtle);
+  /* Bullet markers */
+  --tw-prose-bullets: var(--text-color-kumo-default);
+  /* Horizontal rules */
+  --tw-prose-hr: var(--color-kumo-hairline);
+  /* Blockquote text */
+  --tw-prose-quotes: var(--text-color-kumo-default);
+  /* Blockquote left border */
+  --tw-prose-quote-borders: var(--color-kumo-hairline);
+  /* Figure captions */
+  --tw-prose-captions: var(--text-color-kumo-subtle);
+  /* Keyboard input */
+  --tw-prose-kbd: var(--text-color-kumo-default);
+  /* Keyboard shadow */
+  --tw-prose-kbd-shadows: transparent;
+  /* Inline code */
+  --tw-prose-code: var(--text-color-kumo-default);
+  /* Code inside pre blocks */
+  --tw-prose-pre-code: var(--text-color-kumo-default);
+  /* Pre block background */
+  --tw-prose-pre-bg: var(--color-kumo-canvas);
+  /* Table header borders */
+  --tw-prose-th-borders: var(--color-kumo-hairline);
+  /* Table cell borders */
+  --tw-prose-td-borders: var(--color-kumo-hairline);
+
+  /* Dark mode — same tokens, they auto-adapt via light-dark() */
+  --tw-prose-invert-body: var(--text-color-kumo-default);
+  --tw-prose-invert-headings: var(--text-color-kumo-default);
+  --tw-prose-invert-lead: var(--text-color-kumo-default);
+  --tw-prose-invert-links: var(--text-color-kumo-link);
+  --tw-prose-invert-bold: var(--text-color-kumo-strong);
+  --tw-prose-invert-counters: var(--text-color-kumo-subtle);
+  --tw-prose-invert-bullets: var(--text-color-kumo-default);
+  --tw-prose-invert-hr: var(--color-kumo-hairline);
+  --tw-prose-invert-quotes: var(--text-color-kumo-default);
+  --tw-prose-invert-quote-borders: var(--color-kumo-hairline);
+  --tw-prose-invert-captions: var(--text-color-kumo-subtle);
+  --tw-prose-invert-kbd: var(--text-color-kumo-default);
+  --tw-prose-invert-kbd-shadows: transparent;
+  --tw-prose-invert-code: var(--text-color-kumo-default);
+  --tw-prose-invert-pre-code: var(--text-color-kumo-default);
+  --tw-prose-invert-pre-bg: var(--color-kumo-canvas);
+  --tw-prose-invert-th-borders: var(--color-kumo-hairline);
+  --tw-prose-invert-td-borders: var(--color-kumo-hairline);
+}
+
+/* Reset prose styles inside not-prose wrappers */
+.kumo-prose .not-prose {
+  letter-spacing: normal;
+  line-height: normal;
+}
+
+/* Inline code styling — match existing site style */
+.kumo-prose :where(code):not(:where(pre code)) {
+  font-weight: 500;
+  font-size: 0.875em;
+  background-color: var(--color-kumo-base);
+  border: 1px solid var(--color-kumo-hairline);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  letter-spacing: normal;
+}
+
+/* Remove backtick decoration from inline code */
+.kumo-prose :where(code):not(:where(pre code))::before,
+.kumo-prose :where(code):not(:where(pre code))::after {
+  content: none;
+}
+
+/* Links — underline on hover only (skip .not-prose where components control their own styles) */
+.kumo-prose :where(a):not(:where(.not-prose, .not-prose *)) {
+  text-decoration: none;
+}
+
+.kumo-prose :where(a):not(:where(.not-prose, .not-prose *)):hover {
+  text-decoration: underline;
+}
+
+/* Heading anchor links */
+.kumo-prose :where(h2, h3, h4):not(:where(.not-prose, .not-prose *)) a {
+  color: inherit;
+  font-weight: inherit;
+  text-decoration: none;
+}
+
+.kumo-prose :where(.heading-anchor-icon) {
+  color: var(--text-color-kumo-subtle);
+}
+
+/* Headings — shared spacing and tracking */
+.kumo-prose :where(h2, h3, h4):not(:where(.not-prose, .not-prose *)) {
+  @apply tracking-tight;
+  scroll-margin-top: 6rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.kumo-prose :where(h2):not(:where(.not-prose, .not-prose *)) {
+  @apply mt-8 text-2xl;
+}
+
+.kumo-prose :where(h3):not(:where(.not-prose, .not-prose *)) {
+  @apply mt-6 text-xl;
+}
+
+.kumo-prose :where(h4):not(:where(.not-prose, .not-prose *)) {
+  @apply mt-4 text-base;
+  margin-bottom: 0.75rem;
+}
+
+.kumo-prose :where(h2, h3, h4):first-child:not(:where(.not-prose, .not-prose *)) {
+  margin-top: 0;
+}
+
+/* Adjacent sibling spacing after headings */
+.kumo-prose :where(h2, h3, h4):not(:where(.not-prose, .not-prose *)) + * {
+  margin-top: 0;
+}
+
+/* Paragraphs */
+.kumo-prose :where(p):not(:where(.not-prose, .not-prose *)) {
+  @apply text-base leading-normal;
+  margin-bottom: 1rem;
+}
+
+/* Adjacent sibling spacing between paragraphs */
+.kumo-prose :where(p + p):not(:where(.not-prose, .not-prose *)) {
+  margin-top: 0.75rem;
+}
+
+/* Unordered and ordered lists */
+.kumo-prose :where(ul, ol):not(:where(.not-prose, .not-prose *)) {
+  @apply text-base;
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+/* List items */
+.kumo-prose :where(li):not(:where(.not-prose, .not-prose *)) {
+  @apply text-base leading-normal;
+}
+
+/* Horizontal rule */
+.kumo-prose :where(hr):not(:where(.not-prose, .not-prose *)) {
+  margin: 1.5rem 0;
+}
+
+/* kbd styling */
+.kumo-prose :where(kbd) {
+  background-color: var(--color-kumo-control);
+  border: 1px solid var(--color-kumo-hairline);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875em;
+  box-shadow: none;
+}
+
+/* Pre / code blocks — better defaults for changelog <pre> without affecting CodeBlock (wrapped in .not-prose) or Shiki blocks (inline styles override) */
+.kumo-prose :where(pre):not(:where(.not-prose, .not-prose *)) {
+  @apply text-base;
+  background-color: var(--tw-prose-pre-bg);
+  border: 1px solid var(--color-kumo-hairline);
+  border-radius: 0.5rem;
+  letter-spacing: normal;
+  padding: 0.75rem 1rem;
+  margin: 0.75rem 0;
+}
+
+/* Table styling */
+.kumo-prose :where(table) {
+  width: 100%;
+}
+
+/* Table header border */
+.kumo-prose :where(thead) {
+  border-bottom-color: var(--color-kumo-hairline);
+}
+
+/* Table header cells */
+.kumo-prose :where(thead th) {
+  color: var(--text-color-kumo-strong);
+  font-weight: 600;
+}
+
+/* Blockquote */
+.kumo-prose :where(blockquote) {
+  border-left-color: var(--color-kumo-brand);
+  color: var(--text-color-kumo-default);
+  font-style: normal;
+}
+
+/* Non-prose sections inside prose (ComponentExample, Callout, etc.)
+   These opt out of prose styling via not-prose */
+.kumo-prose :where(.not-prose) {
+  /* Reset any inherited typography transforms */
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* Chart wave-loader animation: slides the SVG path left by one full period,
+   creating a seamless looping sine wave. Used by TimeseriesChart loading state. */
+@keyframes kumo-chart-wave {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-400px);
+  }
+}
+
+/* ==========================================================================
+   Shiki code blocks — markdown and docs copy blocks use Shiki HTML
+   Dual theme support: light (github-light) and dark (vesper)
+   ========================================================================== */
+
+/* Code block inside wrapper — extra right padding so text clears the copy button */
+.code-block .shiki {
+  padding: 0.875rem 2rem 0.875rem 1rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+/* Container styling for standalone markdown code blocks */
+.kumo-prose :where(pre.shiki):not(:where(.not-prose, .not-prose *)),
+pre.shiki {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-kumo-hairline);
+  margin: 1rem 0;
+  padding: 0.875rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  letter-spacing: normal;
+}
+
+.shiki code {
+  display: block;
+  min-width: max-content;
+  width: fit-content;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+}
+
+.shiki .line {
+  display: block;
+  min-height: 1.5em;
+}
+
+.shiki .line:empty:first-child,
+.shiki .line:empty:last-child {
+  display: none;
+}
+
+.kumo-shiki pre {
+  margin: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background-color: transparent !important;
+  padding: 1rem !important;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace !important;
+  font-size: 0.875rem !important;
+  line-height: 1.625 !important;
+}
+
+.kumo-shiki code {
+  display: block;
+  min-width: 100%;
+  width: fit-content;
+  background-color: transparent !important;
+  border: 0 !important;
+  margin: 0 !important;
+  padding: 0 1rem 0 0 !important;
+}
+
+[data-mode="dark"] .kumo-shiki span:not(.line-highlighted) {
+  color: var(--shiki-dark) !important;
+  background-color: transparent !important;
+}
+
+/* Light mode (default) */
+.shiki,
+.shiki span {
+  color: var(--shiki-light) !important;
+  background-color: var(--shiki-light-bg) !important;
+}
+
+/* Dark mode — toggle via data-mode attribute */
+[data-mode="dark"] .shiki,
+[data-mode="dark"] .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+}
+
+/* ==========================================================================
+   Code block copy button
+   ========================================================================== */
+
+.code-block-copy-btn {
+  @apply absolute top-3 right-3 flex items-center justify-center size-6.5 rounded-md cursor-pointer border-none shadow-none select-none focus-visible:ring-1;
+  background: var(--color-kumo-base);
+  color: var(--text-color-kumo-subtle);
+  --tw-ring-color: var(--color-kumo-hairline);
+
+  &:hover {
+    background: var(--color-kumo-tint);
+  }
+}
+
+/* Icon wrapper — relative + overflow-hidden for slide animation */
+.code-block-copy-btn__icons {
+  @apply relative overflow-hidden size-4;
+}
+
+/* Both icons stacked absolutely */
+.code-block-copy-btn__icon {
+  @apply absolute inset-0 flex items-center justify-center;
+  transition:
+    transform 200ms,
+    opacity 200ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .code-block-copy-btn__icon {
+    transition: none;
+  }
+}
+
+/* Check icon: hidden below by default, slides up when copied */
+.code-block-copy-btn__icon--check {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+/* Copy icon: visible by default, slides up when copied */
+.code-block-copy-btn__icon--copy {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Copied state */
+.code-block-copy-btn[data-copied] .code-block-copy-btn__icon--check {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.code-block-copy-btn[data-copied] .code-block-copy-btn__icon--copy {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+/* ==========================================================================
+   DatePicker / react-day-picker compatible styles
+   ========================================================================== */
+
+.rdp-root {
+  font-variant-numeric: tabular-nums;
+  --rdp-cell-padding: 2px;
+  --rdp-day-height: calc(2rem + var(--rdp-cell-padding) * 2);
+  --rdp-day-width: calc(2rem + var(--rdp-cell-padding) * 2);
+  --rdp-day_button-border-radius: 0.375rem;
+  --rdp-day_button-border: none;
+  --rdp-day_button-height: 2rem;
+  --rdp-day_button-width: 2rem;
+  --rdp-selected-border: none;
+  --rdp-disabled-opacity: 0.4;
+  --rdp-outside-opacity: 0.4;
+  --rdp-dropdown-gap: 0.5rem;
+  --rdp-months-gap: 1rem;
+  --rdp-nav_button-disabled-opacity: 0.5;
+  --rdp-nav_button-height: 2rem;
+  --rdp-nav_button-width: 2rem;
+  --rdp-nav-height: 2.5rem;
+  --rdp-week_number-border-radius: 0.375rem;
+  --rdp-week_number-border: none;
+  --rdp-week_number-height: var(--rdp-day-height);
+  --rdp-week_number-opacity: 0.75;
+  --rdp-week_number-width: var(--rdp-day-width);
+  --rdp-weekday-opacity: 1;
+  --rdp-weekday-padding: 0.5rem 0;
+  --rdp-gradient-direction: 90deg;
+  --rdp-animation_duration: 0.2s;
+  --rdp-animation_timing: ease-out;
+  --rdp-accent-color: oklch(20.5% 0 0);
+  --rdp-accent-background-color: oklch(92.2% 0 0);
+  --rdp-range_middle-background-color: oklch(92.2% 0 0);
+  --rdp-range_middle-color: oklch(21% 0.006 285.885);
+  --rdp-range_start-color: oklch(97% 0 0);
+  --rdp-range_start-date-background-color: oklch(20.5% 0 0);
+  --rdp-range_end-color: oklch(97% 0 0);
+  --rdp-range_end-date-background-color: oklch(20.5% 0 0);
+  --rdp-today-color: oklch(54.6% 0.215 262.881);
+  --rdp-day-color: oklch(21% 0.006 285.885);
+  --rdp-day-color-subtle: oklch(55.6% 0 0);
+  --rdp-nav-bg: transparent;
+  --rdp-nav-border: oklch(14.5% 0 0 / 0.1);
+  --rdp-hover-bg: oklch(90% 0 0);
+  --rdp-fill-hover-bg: oklch(87% 0 0);
+  --rdp-focus-ring: var(--color-kumo-brand);
+  position: relative;
+  box-sizing: border-box;
+}
+
+[data-mode="dark"] .rdp-root {
+  --rdp-accent-color: oklch(97% 0 0);
+  --rdp-accent-background-color: oklch(35% 0 0);
+  --rdp-range_middle-background-color: oklch(28% 0 0);
+  --rdp-range_middle-color: oklch(97% 0 0);
+  --rdp-range_start-color: oklch(20.5% 0 0);
+  --rdp-range_start-date-background-color: oklch(97% 0 0);
+  --rdp-range_end-color: oklch(20.5% 0 0);
+  --rdp-range_end-date-background-color: oklch(97% 0 0);
+  --rdp-today-color: oklch(62.3% 0.214 259.815);
+  --rdp-day-color: oklch(97% 0 0);
+  --rdp-day-color-subtle: oklch(70% 0 0);
+  --rdp-nav-bg: transparent;
+  --rdp-nav-border: oklch(26.9% 0 0);
+  --rdp-hover-bg: oklch(20% 0 0);
+  --rdp-fill-hover-bg: oklch(25% 0 0);
+  --rdp-focus-ring: var(--color-kumo-brand);
+}
+
+.rdp-root[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
+
+.rdp-root * {
+  box-sizing: border-box;
+}
+
+.rdp-root thead {
+  background: transparent;
+}
+
+.rdp-day {
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  text-align: center;
+  padding: var(--rdp-cell-padding);
+}
+
+.rdp-day_button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8125rem;
+  color: var(--rdp-day-color);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  width: var(--rdp-day_button-width);
+  height: var(--rdp-day_button-height);
+  border: var(--rdp-day_button-border);
+  border-radius: var(--rdp-day_button-border-radius);
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.rdp-day_button:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--rdp-focus-ring);
+}
+
+.rdp-day_button:hover {
+  background-color: var(--rdp-hover-bg);
+}
+
+.rdp-day_button:disabled {
+  cursor: not-allowed;
+}
+
+.rdp-caption_label {
+  z-index: 1;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border: 0;
+  font-weight: 600;
+  color: var(--rdp-day-color);
+}
+
+.rdp-button_next,
+.rdp-button_previous {
+  border: none;
+  background: transparent !important;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: var(--rdp-day-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  border-radius: 0.375rem;
+  box-shadow: inset 0 0 0 1px var(--rdp-nav-border);
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.rdp-button_next:hover,
+.rdp-button_previous:hover {
+  background: var(--rdp-hover-bg) !important;
+}
+
+.rdp-button_next:focus-visible,
+.rdp-button_previous:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--rdp-focus-ring);
+}
+
+.rdp-button_next:disabled,
+.rdp-button_next[aria-disabled="true"],
+.rdp-button_previous:disabled,
+.rdp-button_previous[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--rdp-nav_button-disabled-opacity);
+}
+
+.rdp-chevron {
+  display: inline-block;
+  fill: var(--rdp-day-color);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+  transform-origin: 50%;
+}
+
+.rdp-dropdowns {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rdp-dropdown-gap);
+}
+
+.rdp-dropdown {
+  z-index: 2;
+  opacity: 0;
+  appearance: none;
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  border: none;
+  line-height: inherit;
+}
+
+.rdp-dropdown_root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-month_caption {
+  display: flex;
+  align-content: center;
+  height: var(--rdp-nav-height);
+  font-weight: 600;
+}
+
+.rdp-root[data-nav-layout="around"] .rdp-month,
+.rdp-root[data-nav-layout="after"] .rdp-month {
+  position: relative;
+}
+
+.rdp-root[data-nav-layout="around"] .rdp-month_caption {
+  justify-content: center;
+  margin-inline-start: var(--rdp-nav_button-width);
+  margin-inline-end: var(--rdp-nav_button-width);
+  position: relative;
+}
+
+.rdp-root[data-nav-layout="around"] .rdp-button_previous {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  height: var(--rdp-nav-height);
+  display: inline-flex;
+}
+
+.rdp-root[data-nav-layout="around"] .rdp-button_next {
+  position: absolute;
+  inset-inline-end: 0;
+  top: 0;
+  height: var(--rdp-nav-height);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.rdp-months {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rdp-months-gap);
+  max-width: fit-content;
+}
+
+.rdp-month_grid {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.rdp-month_grid_wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.rdp-nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: var(--rdp-nav-height);
+}
+
+.rdp-weekday {
+  opacity: var(--rdp-weekday-opacity);
+  padding: var(--rdp-weekday-padding);
+  font-weight: 500;
+  font-size: smaller;
+  text-align: center;
+  color: var(--rdp-day-color-subtle);
+}
+
+.rdp-week_number {
+  opacity: var(--rdp-week_number-opacity);
+  font-weight: 400;
+  font-size: small;
+  height: var(--rdp-week_number-height);
+  width: var(--rdp-week_number-width);
+  border: var(--rdp-week_number-border);
+  border-radius: var(--rdp-week_number-border-radius);
+  text-align: center;
+  color: var(--rdp-day-color-subtle);
+}
+
+.rdp-today:not(.rdp-outside):not(.rdp-selected) .rdp-day_button {
+  color: var(--rdp-today-color);
+  font-weight: 600;
+}
+
+.rdp-selected .rdp-day_button {
+  background-color: var(--rdp-accent-color);
+  color: var(--rdp-range_start-color);
+  border-radius: var(--rdp-day_button-border-radius);
+}
+
+.rdp-selected .rdp-day_button:hover {
+  background-color: var(--rdp-accent-color);
+}
+
+.rdp-outside .rdp-day_button {
+  opacity: var(--rdp-outside-opacity);
+  color: var(--rdp-day-color-subtle);
+}
+
+.rdp-disabled:not(.rdp-selected) .rdp-day_button {
+  opacity: var(--rdp-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.rdp-disabled .rdp-day_button:hover {
+  background-color: transparent;
+}
+
+.rdp-hidden {
+  visibility: hidden;
+}
+
+.rdp-day.rdp-range_start:not(.rdp-range_end) {
+  background-color: var(--rdp-range_start-date-background-color);
+  border-radius: var(--rdp-day_button-border-radius) 0 0 var(--rdp-day_button-border-radius);
+}
+
+.rdp-day.rdp-range_start .rdp-day_button {
+  background-color: transparent;
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-day.rdp-range_start .rdp-day_button:hover {
+  background-color: transparent;
+}
+
+.rdp-day.rdp-range_middle {
+  background-color: var(--rdp-range_middle-background-color);
+}
+
+.rdp-day.rdp-range_middle .rdp-day_button {
+  background-color: transparent;
+  color: var(--rdp-range_middle-color);
+}
+
+.rdp-day.rdp-range_middle .rdp-day_button:hover {
+  background-color: var(--rdp-fill-hover-bg);
+  border-radius: var(--rdp-day_button-border-radius);
+}
+
+.rdp-day.rdp-range_end:not(.rdp-range_start) {
+  background-color: var(--rdp-range_end-date-background-color);
+  border-radius: 0 var(--rdp-day_button-border-radius) var(--rdp-day_button-border-radius) 0;
+}
+
+.rdp-day.rdp-range_end .rdp-day_button {
+  background-color: transparent;
+  color: var(--rdp-range_end-color);
+}
+
+.rdp-day.rdp-range_end .rdp-day_button:hover {
+  background-color: transparent;
+}
+
+.rdp-day.rdp-range_start.rdp-range_end {
+  background-color: var(--rdp-range_start-date-background-color);
+  border-radius: var(--rdp-day_button-border-radius);
+}
+
+.rdp-day.rdp-range_start.rdp-range_end .rdp-day_button {
+  background-color: transparent;
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-focusable {
+  cursor: pointer;
+}
+
+.rdp-footer {
+  width: 0;
+  min-width: 100%;
+  padding-top: 0.5rem;
+}
+
+/* ANIMATIONS */
+
+@keyframes rdp-slide_in_left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes rdp-slide_in_right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes rdp-slide_out_left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes rdp-slide_out_right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.rdp-weeks_before_enter {
+  animation: rdp-slide_in_left var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-weeks_before_exit {
+  animation: rdp-slide_out_left var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-weeks_after_enter {
+  animation: rdp-slide_in_right var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-weeks_after_exit {
+  animation: rdp-slide_out_right var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
+  animation: rdp-slide_in_left var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
+  animation: rdp-slide_out_right var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
+  animation: rdp-slide_in_right var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
+  animation: rdp-slide_out_left var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+@keyframes rdp-fade_in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rdp-fade_out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.rdp-caption_after_enter {
+  animation: rdp-fade_in var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-caption_after_exit {
+  animation: rdp-fade_out var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-caption_before_enter {
+  animation: rdp-fade_in var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-caption_before_exit {
+  animation: rdp-fade_out var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}