@vanduo-oss/framework 1.5.1 → 1.7.0

package/dist/vanduo-core.css

@@ -1,4 +1,4 @@
-/*! Vanduo v1.5.1 | Built: 2026-06-20T15:00:18.257Z | git:baf8178 | development */
+/*! Vanduo v1.7.0 | Built: 2026-06-29T06:28:14.462Z | git:c12c685 | development */
 *, :before, :after {
   box-sizing: border-box;
 }
@@ -83,6 +83,514 @@ table {
 }
 
 :root {
+  --vd-oc-gray-0: #f8f9fa;
+  --vd-oc-gray-1: #f1f3f5;
+  --vd-oc-gray-2: #e9ecef;
+  --vd-oc-gray-3: #dee2e6;
+  --vd-oc-gray-4: #ced4da;
+  --vd-oc-gray-5: #adb5bd;
+  --vd-oc-gray-6: #868e96;
+  --vd-oc-gray-7: #495057;
+  --vd-oc-gray-8: #343a40;
+  --vd-oc-gray-9: #212529;
+  --vd-oc-primary-0: #edf2ff;
+  --vd-oc-primary-1: #dbe4ff;
+  --vd-oc-primary-2: #bac8ff;
+  --vd-oc-primary-3: #91a7ff;
+  --vd-oc-primary-4: #748ffc;
+  --vd-oc-primary-5: #5c7cfa;
+  --vd-oc-primary-6: #4c6ef5;
+  --vd-oc-primary-7: #4263eb;
+  --vd-oc-primary-8: #3b5bdb;
+  --vd-oc-primary-9: #364fc7;
+  --vd-oc-secondary-0: #e6fcf5;
+  --vd-oc-secondary-1: #c3fae8;
+  --vd-oc-secondary-2: #96f2d7;
+  --vd-oc-secondary-3: #63e6be;
+  --vd-oc-secondary-4: #38d9a9;
+  --vd-oc-secondary-5: #20c997;
+  --vd-oc-secondary-6: #12b886;
+  --vd-oc-secondary-7: #0ca678;
+  --vd-oc-secondary-8: #099268;
+  --vd-oc-secondary-9: #087f5b;
+  --vd-oc-danger-0: #fff5f5;
+  --vd-oc-danger-1: #ffe3e3;
+  --vd-oc-danger-2: #ffc9c9;
+  --vd-oc-danger-3: #ffa8a8;
+  --vd-oc-danger-4: #ff8787;
+  --vd-oc-danger-5: #ff6b6b;
+  --vd-oc-danger-6: #fa5252;
+  --vd-oc-danger-7: #f03e3e;
+  --vd-oc-danger-8: #e03131;
+  --vd-oc-danger-9: #c92a2a;
+  --vd-oc-error-0: #fff5f5;
+  --vd-oc-error-1: #ffe3e3;
+  --vd-oc-error-2: #ffc9c9;
+  --vd-oc-error-3: #ffa8a8;
+  --vd-oc-error-4: #ff8787;
+  --vd-oc-error-5: #ff6b6b;
+  --vd-oc-error-6: #fa5252;
+  --vd-oc-error-7: #f03e3e;
+  --vd-oc-error-8: #e03131;
+  --vd-oc-error-9: #c92a2a;
+  --vd-oc-success-0: #ebfbee;
+  --vd-oc-success-1: #d3f9d8;
+  --vd-oc-success-2: #b2f2bb;
+  --vd-oc-success-3: #8ce99a;
+  --vd-oc-success-4: #69db7c;
+  --vd-oc-success-5: #51cf66;
+  --vd-oc-success-6: #40c057;
+  --vd-oc-success-7: #37b24d;
+  --vd-oc-success-8: #2f9e44;
+  --vd-oc-success-9: #2b8a3e;
+  --vd-oc-warning-0: #fff9db;
+  --vd-oc-warning-1: #fff3bf;
+  --vd-oc-warning-2: #ffec99;
+  --vd-oc-warning-3: #ffe066;
+  --vd-oc-warning-4: #ffd43b;
+  --vd-oc-warning-5: #fcc419;
+  --vd-oc-warning-6: #fab005;
+  --vd-oc-warning-7: #f59f00;
+  --vd-oc-warning-8: #f08c00;
+  --vd-oc-warning-9: #e67700;
+  --vd-oc-info-0: #e7f5ff;
+  --vd-oc-info-1: #d0ebff;
+  --vd-oc-info-2: #a5d8ff;
+  --vd-oc-info-3: #74c0fc;
+  --vd-oc-info-4: #4dabf7;
+  --vd-oc-info-5: #339af0;
+  --vd-oc-info-6: #228be6;
+  --vd-oc-info-7: #1c7ed6;
+  --vd-oc-info-8: #1971c2;
+  --vd-oc-info-9: #1864ab;
+  --vd-oc-red-0: #fff5f5;
+  --vd-oc-red-1: #ffe3e3;
+  --vd-oc-red-2: #ffc9c9;
+  --vd-oc-red-3: #ffa8a8;
+  --vd-oc-red-4: #ff8787;
+  --vd-oc-red-5: #ff6b6b;
+  --vd-oc-red-6: #fa5252;
+  --vd-oc-red-7: #f03e3e;
+  --vd-oc-red-8: #e03131;
+  --vd-oc-red-9: #c92a2a;
+  --vd-oc-orange-0: #fff4e6;
+  --vd-oc-orange-1: #ffe8cc;
+  --vd-oc-orange-2: #ffd8a8;
+  --vd-oc-orange-3: #ffc078;
+  --vd-oc-orange-4: #ffa94d;
+  --vd-oc-orange-5: #ff922b;
+  --vd-oc-orange-6: #fd7e14;
+  --vd-oc-orange-7: #f76707;
+  --vd-oc-orange-8: #e8590c;
+  --vd-oc-orange-9: #d9480f;
+  --vd-oc-yellow-0: #fff9db;
+  --vd-oc-yellow-1: #fff3bf;
+  --vd-oc-yellow-2: #ffec99;
+  --vd-oc-yellow-3: #ffe066;
+  --vd-oc-yellow-4: #ffd43b;
+  --vd-oc-yellow-5: #fcc419;
+  --vd-oc-yellow-6: #fab005;
+  --vd-oc-yellow-7: #f59f00;
+  --vd-oc-yellow-8: #f08c00;
+  --vd-oc-yellow-9: #e67700;
+  --vd-oc-lime-0: #f4fce3;
+  --vd-oc-lime-1: #e9fac8;
+  --vd-oc-lime-2: #d8f5a2;
+  --vd-oc-lime-3: #c0eb75;
+  --vd-oc-lime-4: #a9e34b;
+  --vd-oc-lime-5: #94d82d;
+  --vd-oc-lime-6: #82c91e;
+  --vd-oc-lime-7: #74b816;
+  --vd-oc-lime-8: #66a80f;
+  --vd-oc-lime-9: #5c940d;
+  --vd-oc-green-0: #ebfbee;
+  --vd-oc-green-1: #d3f9d8;
+  --vd-oc-green-2: #b2f2bb;
+  --vd-oc-green-3: #8ce99a;
+  --vd-oc-green-4: #69db7c;
+  --vd-oc-green-5: #51cf66;
+  --vd-oc-green-6: #40c057;
+  --vd-oc-green-7: #37b24d;
+  --vd-oc-green-8: #2f9e44;
+  --vd-oc-green-9: #2b8a3e;
+  --vd-oc-teal-0: #e6fcf5;
+  --vd-oc-teal-1: #c3fae8;
+  --vd-oc-teal-2: #96f2d7;
+  --vd-oc-teal-3: #63e6be;
+  --vd-oc-teal-4: #38d9a9;
+  --vd-oc-teal-5: #20c997;
+  --vd-oc-teal-6: #12b886;
+  --vd-oc-teal-7: #0ca678;
+  --vd-oc-teal-8: #099268;
+  --vd-oc-teal-9: #087f5b;
+  --vd-oc-cyan-0: #e3fafc;
+  --vd-oc-cyan-1: #c5f6fa;
+  --vd-oc-cyan-2: #99e9f2;
+  --vd-oc-cyan-3: #66d9e8;
+  --vd-oc-cyan-4: #3bc9db;
+  --vd-oc-cyan-5: #22b8cf;
+  --vd-oc-cyan-6: #15aabf;
+  --vd-oc-cyan-7: #1098ad;
+  --vd-oc-cyan-8: #0c8599;
+  --vd-oc-cyan-9: #0b7285;
+  --vd-oc-blue-0: #e7f5ff;
+  --vd-oc-blue-1: #d0ebff;
+  --vd-oc-blue-2: #a5d8ff;
+  --vd-oc-blue-3: #74c0fc;
+  --vd-oc-blue-4: #4dabf7;
+  --vd-oc-blue-5: #339af0;
+  --vd-oc-blue-6: #228be6;
+  --vd-oc-blue-7: #1c7ed6;
+  --vd-oc-blue-8: #1971c2;
+  --vd-oc-blue-9: #1864ab;
+  --vd-oc-indigo-0: #edf2ff;
+  --vd-oc-indigo-1: #dbe4ff;
+  --vd-oc-indigo-2: #bac8ff;
+  --vd-oc-indigo-3: #91a7ff;
+  --vd-oc-indigo-4: #748ffc;
+  --vd-oc-indigo-5: #5c7cfa;
+  --vd-oc-indigo-6: #4c6ef5;
+  --vd-oc-indigo-7: #4263eb;
+  --vd-oc-indigo-8: #3b5bdb;
+  --vd-oc-indigo-9: #364fc7;
+  --vd-oc-violet-0: #f3f0ff;
+  --vd-oc-violet-1: #e5dbff;
+  --vd-oc-violet-2: #d0bfff;
+  --vd-oc-violet-3: #b197fc;
+  --vd-oc-violet-4: #9775fa;
+  --vd-oc-violet-5: #845ef7;
+  --vd-oc-violet-6: #7950f2;
+  --vd-oc-violet-7: #7048e8;
+  --vd-oc-violet-8: #6741d9;
+  --vd-oc-violet-9: #5f3dc4;
+  --vd-oc-grape-0: #f8f0fc;
+  --vd-oc-grape-1: #f3d9fa;
+  --vd-oc-grape-2: #eebefa;
+  --vd-oc-grape-3: #e599f7;
+  --vd-oc-grape-4: #da77f2;
+  --vd-oc-grape-5: #cc5de8;
+  --vd-oc-grape-6: #be4bdb;
+  --vd-oc-grape-7: #ae3ec9;
+  --vd-oc-grape-8: #9c36b5;
+  --vd-oc-grape-9: #862e9c;
+  --vd-oc-pink-0: #fff0f6;
+  --vd-oc-pink-1: #ffdeeb;
+  --vd-oc-pink-2: #fcc2d7;
+  --vd-oc-pink-3: #faa2c1;
+  --vd-oc-pink-4: #f783ac;
+  --vd-oc-pink-5: #f06595;
+  --vd-oc-pink-6: #e64980;
+  --vd-oc-pink-7: #d6336c;
+  --vd-oc-pink-8: #c2255c;
+  --vd-oc-pink-9: #a61e4d;
+  --vd-oc-slate-0: #f8fafc;
+  --vd-oc-slate-1: #f1f5f9;
+  --vd-oc-slate-2: #e2e8f0;
+  --vd-oc-slate-3: #cbd5e1;
+  --vd-oc-slate-4: #94a3b8;
+  --vd-oc-slate-5: #64748b;
+  --vd-oc-slate-6: #475569;
+  --vd-oc-slate-7: #334155;
+  --vd-oc-slate-8: #1e293b;
+  --vd-oc-slate-9: #0f172a;
+  --vd-oc-charcoal-0: #f5f7f8;
+  --vd-oc-charcoal-1: #e7ebee;
+  --vd-oc-charcoal-2: #ced6dc;
+  --vd-oc-charcoal-3: #adb8c1;
+  --vd-oc-charcoal-4: #8b98a3;
+  --vd-oc-charcoal-5: #6d7c88;
+  --vd-oc-charcoal-6: #53616d;
+  --vd-oc-charcoal-7: #394754;
+  --vd-oc-charcoal-8: #202c38;
+  --vd-oc-charcoal-9: #0d1117;
+  --vd-oc-zinc-0: #fafafa;
+  --vd-oc-zinc-1: #f4f4f5;
+  --vd-oc-zinc-2: #e4e4e7;
+  --vd-oc-zinc-3: #d4d4d8;
+  --vd-oc-zinc-4: #a1a1aa;
+  --vd-oc-zinc-5: #71717a;
+  --vd-oc-zinc-6: #52525b;
+  --vd-oc-zinc-7: #3f3f46;
+  --vd-oc-zinc-8: #27272a;
+  --vd-oc-zinc-9: #18181b;
+  --vd-oc-neutral-0: #fafafa;
+  --vd-oc-neutral-1: #f5f5f5;
+  --vd-oc-neutral-2: #e5e5e5;
+  --vd-oc-neutral-3: #d4d4d4;
+  --vd-oc-neutral-4: #a3a3a3;
+  --vd-oc-neutral-5: #737373;
+  --vd-oc-neutral-6: #525252;
+  --vd-oc-neutral-7: #404040;
+  --vd-oc-neutral-8: #262626;
+  --vd-oc-neutral-9: #171717;
+  --vd-oc-stone-0: #fafaf9;
+  --vd-oc-stone-1: #f5f5f4;
+  --vd-oc-stone-2: #e7e5e4;
+  --vd-oc-stone-3: #d6d3d1;
+  --vd-oc-stone-4: #a8a29e;
+  --vd-oc-stone-5: #78716c;
+  --vd-oc-stone-6: #57534e;
+  --vd-oc-stone-7: #44403c;
+  --vd-oc-stone-8: #292524;
+  --vd-oc-stone-9: #1c1917;
+  --vd-fib-gray-0: #f5f6f6;
+  --vd-fib-gray-1: #e7e8e9;
+  --vd-fib-gray-2: #d3d5d7;
+  --vd-fib-gray-3: #bdc0c2;
+  --vd-fib-gray-4: #a6a9ac;
+  --vd-fib-gray-5: #8f9296;
+  --vd-fib-gray-6: #797c80;
+  --vd-fib-gray-7: #616366;
+  --vd-fib-gray-8: #494b4d;
+  --vd-fib-gray-9: #323334;
+  --vd-fib-slate-0: #f4f6f7;
+  --vd-fib-slate-1: #e5e8eb;
+  --vd-fib-slate-2: #d1d5da;
+  --vd-fib-slate-3: #bac0c6;
+  --vd-fib-slate-4: #a2a9b0;
+  --vd-fib-slate-5: #8b939a;
+  --vd-fib-slate-6: #757d84;
+  --vd-fib-slate-7: #5d646a;
+  --vd-fib-slate-8: #464b50;
+  --vd-fib-slate-9: #303336;
+  --vd-fib-charcoal-0: #f5f6f7;
+  --vd-fib-charcoal-1: #e6e8ea;
+  --vd-fib-charcoal-2: #d2d5d9;
+  --vd-fib-charcoal-3: #bcc0c5;
+  --vd-fib-charcoal-4: #a4a9ae;
+  --vd-fib-charcoal-5: #8d9399;
+  --vd-fib-charcoal-6: #777d83;
+  --vd-fib-charcoal-7: #5f6469;
+  --vd-fib-charcoal-8: #474b4f;
+  --vd-fib-charcoal-9: #313336;
+  --vd-fib-zinc-0: #f6f6f6;
+  --vd-fib-zinc-1: #e8e8e9;
+  --vd-fib-zinc-2: #d4d4d7;
+  --vd-fib-zinc-3: #bfbfc2;
+  --vd-fib-zinc-4: #a8a8ab;
+  --vd-fib-zinc-5: #929295;
+  --vd-fib-zinc-6: #7c7c7f;
+  --vd-fib-zinc-7: #636366;
+  --vd-fib-zinc-8: #4a4a4c;
+  --vd-fib-zinc-9: #333334;
+  --vd-fib-neutral-0: #f6f6f6;
+  --vd-fib-neutral-1: #e8e8e8;
+  --vd-fib-neutral-2: #d5d5d5;
+  --vd-fib-neutral-3: #bfbfbf;
+  --vd-fib-neutral-4: #a8a8a8;
+  --vd-fib-neutral-5: #929292;
+  --vd-fib-neutral-6: #7c7c7c;
+  --vd-fib-neutral-7: #636363;
+  --vd-fib-neutral-8: #4a4a4a;
+  --vd-fib-neutral-9: #333;
+  --vd-fib-stone-0: #f6f6f5;
+  --vd-fib-stone-1: #e9e7e6;
+  --vd-fib-stone-2: #d7d4d2;
+  --vd-fib-stone-3: #c2bfbb;
+  --vd-fib-stone-4: #aba8a3;
+  --vd-fib-stone-5: #95918d;
+  --vd-fib-stone-6: #7f7b77;
+  --vd-fib-stone-7: #66635f;
+  --vd-fib-stone-8: #4c4a47;
+  --vd-fib-stone-9: #343230;
+  --vd-fib-primary-0: #e4fbfc;
+  --vd-fib-primary-1: #c1f3f5;
+  --vd-fib-primary-2: #8fe6eb;
+  --vd-fib-primary-3: #51d6dd;
+  --vd-fib-primary-4: #00bfc7;
+  --vd-fib-primary-5: #00a6ad;
+  --vd-fib-primary-6: #008d93;
+  --vd-fib-primary-7: #007176;
+  --vd-fib-primary-8: #005559;
+  --vd-fib-primary-9: #003b3e;
+  --vd-fib-secondary-0: #fff1fa;
+  --vd-fib-secondary-1: #ffdcf4;
+  --vd-fib-secondary-2: #fac0e9;
+  --vd-fib-secondary-3: #efa3da;
+  --vd-fib-secondary-4: #de85c6;
+  --vd-fib-secondary-5: #ca6bb2;
+  --vd-fib-secondary-6: #b2549b;
+  --vd-fib-secondary-7: #92407e;
+  --vd-fib-secondary-8: #6e305f;
+  --vd-fib-secondary-9: #4c2041;
+  --vd-fib-danger-0: #fff3f1;
+  --vd-fib-danger-1: #ffe0db;
+  --vd-fib-danger-2: #ffc4bd;
+  --vd-fib-danger-3: #ffa499;
+  --vd-fib-danger-4: #f68176;
+  --vd-fib-danger-5: #e3655b;
+  --vd-fib-danger-6: #c94d45;
+  --vd-fib-danger-7: #a63933;
+  --vd-fib-danger-8: #7d2b26;
+  --vd-fib-danger-9: #571d19;
+  --vd-fib-error-0: #fff3f1;
+  --vd-fib-error-1: #ffe0db;
+  --vd-fib-error-2: #ffc4bd;
+  --vd-fib-error-3: #ffa499;
+  --vd-fib-error-4: #f68176;
+  --vd-fib-error-5: #e3655b;
+  --vd-fib-error-6: #c94d45;
+  --vd-fib-error-7: #a63933;
+  --vd-fib-error-8: #7d2b26;
+  --vd-fib-error-9: #571d19;
+  --vd-fib-success-0: #ecfbed;
+  --vd-fib-success-1: #d2f2d5;
+  --vd-fib-success-2: #b0e5b6;
+  --vd-fib-success-3: #8bd496;
+  --vd-fib-success-4: #67bf76;
+  --vd-fib-success-5: #46aa5b;
+  --vd-fib-success-6: #299344;
+  --vd-fib-success-7: #167732;
+  --vd-fib-success-8: #125925;
+  --vd-fib-success-9: #0d3e19;
+  --vd-fib-warning-0: #fff4e6;
+  --vd-fib-warning-1: #fce4c3;
+  --vd-fib-warning-2: #f6ce97;
+  --vd-fib-warning-3: #ebb567;
+  --vd-fib-warning-4: #d99b35;
+  --vd-fib-warning-5: #c38400;
+  --vd-fib-warning-6: #a66f00;
+  --vd-fib-warning-7: #865900;
+  --vd-fib-warning-8: #654200;
+  --vd-fib-warning-9: #472d00;
+  --vd-fib-info-0: #eff7ff;
+  --vd-fib-info-1: #d7eaff;
+  --vd-fib-info-2: #b5d9ff;
+  --vd-fib-info-3: #8dc5ff;
+  --vd-fib-info-4: #61adfa;
+  --vd-fib-info-5: #3f96e9;
+  --vd-fib-info-6: #227fd1;
+  --vd-fib-info-7: #0f66ac;
+  --vd-fib-info-8: #0d4c82;
+  --vd-fib-info-9: #09345a;
+  --vd-fib-red-0: #fff3f1;
+  --vd-fib-red-1: #ffe0db;
+  --vd-fib-red-2: #ffc4bd;
+  --vd-fib-red-3: #ffa499;
+  --vd-fib-red-4: #f68176;
+  --vd-fib-red-5: #e3655b;
+  --vd-fib-red-6: #c94d45;
+  --vd-fib-red-7: #a63933;
+  --vd-fib-red-8: #7d2b26;
+  --vd-fib-red-9: #571d19;
+  --vd-fib-orange-0: #fff3ed;
+  --vd-fib-orange-1: #ffe1d1;
+  --vd-fib-orange-2: #ffc7a8;
+  --vd-fib-orange-3: #fbaa7c;
+  --vd-fib-orange-4: #eb8d55;
+  --vd-fib-orange-5: #d87331;
+  --vd-fib-orange-6: #c05b0e;
+  --vd-fib-orange-7: #9c4700;
+  --vd-fib-orange-8: #773501;
+  --vd-fib-orange-9: #522403;
+  --vd-fib-yellow-0: #fbf6e4;
+  --vd-fib-yellow-1: #f2e8c2;
+  --vd-fib-yellow-2: #e6d595;
+  --vd-fib-yellow-3: #d7bf65;
+  --vd-fib-yellow-4: #c3a730;
+  --vd-fib-yellow-5: #ac9000;
+  --vd-fib-yellow-6: #937a00;
+  --vd-fib-yellow-7: #766200;
+  --vd-fib-yellow-8: #594900;
+  --vd-fib-yellow-9: #3d3200;
+  --vd-fib-lime-0: #f1f9e8;
+  --vd-fib-lime-1: #deefcb;
+  --vd-fib-lime-2: #c5e0a5;
+  --vd-fib-lime-3: #aace7d;
+  --vd-fib-lime-4: #90b856;
+  --vd-fib-lime-5: #77a331;
+  --vd-fib-lime-6: #628c0a;
+  --vd-fib-lime-7: #4d7000;
+  --vd-fib-lime-8: #395400;
+  --vd-fib-lime-9: #273a03;
+  --vd-fib-green-0: #ecfbed;
+  --vd-fib-green-1: #d2f2d5;
+  --vd-fib-green-2: #b0e5b6;
+  --vd-fib-green-3: #8bd496;
+  --vd-fib-green-4: #67bf76;
+  --vd-fib-green-5: #46aa5b;
+  --vd-fib-green-6: #299344;
+  --vd-fib-green-7: #167732;
+  --vd-fib-green-8: #125925;
+  --vd-fib-green-9: #0d3e19;
+  --vd-fib-teal-0: #e7fbf6;
+  --vd-fib-teal-1: #c7f3e8;
+  --vd-fib-teal-2: #9be6d5;
+  --vd-fib-teal-3: #69d6c0;
+  --vd-fib-teal-4: #2bc2a8;
+  --vd-fib-teal-5: #00aa92;
+  --vd-fib-teal-6: #00917c;
+  --vd-fib-teal-7: #007463;
+  --vd-fib-teal-8: #00574a;
+  --vd-fib-teal-9: #003c33;
+  --vd-fib-cyan-0: #e5fbfc;
+  --vd-fib-cyan-1: #c4f2f4;
+  --vd-fib-cyan-2: #95e5e9;
+  --vd-fib-cyan-3: #5ed4db;
+  --vd-fib-cyan-4: #00bfc7;
+  --vd-fib-cyan-5: #00a6ad;
+  --vd-fib-cyan-6: #008d93;
+  --vd-fib-cyan-7: #007176;
+  --vd-fib-cyan-8: #005559;
+  --vd-fib-cyan-9: #003b3e;
+  --vd-fib-blue-0: #eff7ff;
+  --vd-fib-blue-1: #d7eaff;
+  --vd-fib-blue-2: #b5d9ff;
+  --vd-fib-blue-3: #8dc5ff;
+  --vd-fib-blue-4: #61adfa;
+  --vd-fib-blue-5: #3f96e9;
+  --vd-fib-blue-6: #227fd1;
+  --vd-fib-blue-7: #0f66ac;
+  --vd-fib-blue-8: #0d4c82;
+  --vd-fib-blue-9: #09345a;
+  --vd-fib-indigo-0: #f2f5ff;
+  --vd-fib-indigo-1: #e0e7ff;
+  --vd-fib-indigo-2: #c6d3ff;
+  --vd-fib-indigo-3: #a9bcff;
+  --vd-fib-indigo-4: #8ba2fd;
+  --vd-fib-indigo-5: #738aec;
+  --vd-fib-indigo-6: #5e73d4;
+  --vd-fib-indigo-7: #495baf;
+  --vd-fib-indigo-8: #374484;
+  --vd-fib-indigo-9: #252f5c;
+  --vd-fib-violet-0: #f6f4ff;
+  --vd-fib-violet-1: #e9e3ff;
+  --vd-fib-violet-2: #d8ccff;
+  --vd-fib-violet-3: #c4b2ff;
+  --vd-fib-violet-4: #af96f4;
+  --vd-fib-violet-5: #9a7de3;
+  --vd-fib-violet-6: #8466ca;
+  --vd-fib-violet-7: #6a50a7;
+  --vd-fib-violet-8: #503c7e;
+  --vd-fib-violet-9: #362957;
+  --vd-fib-grape-0: #fff1ff;
+  --vd-fib-grape-1: #faddfb;
+  --vd-fib-grape-2: #f2c2f4;
+  --vd-fib-grape-3: #e5a6e8;
+  --vd-fib-grape-4: #d389d7;
+  --vd-fib-grape-5: #bf6fc4;
+  --vd-fib-grape-6: #a758ac;
+  --vd-fib-grape-7: #88448d;
+  --vd-fib-grape-8: #67336a;
+  --vd-fib-grape-9: #472249;
+  --vd-fib-pink-0: #fff2f7;
+  --vd-fib-pink-1: #ffddeb;
+  --vd-fib-pink-2: #ffc0da;
+  --vd-fib-pink-3: #f9a1c7;
+  --vd-fib-pink-4: #e883b1;
+  --vd-fib-pink-5: #d5689c;
+  --vd-fib-pink-6: #bc5085;
+  --vd-fib-pink-7: #9a3c6b;
+  --vd-fib-pink-8: #742d50;
+  --vd-fib-pink-9: #501f37;
+  --vd-fib-golden-1: #008d93;
+  --vd-fib-golden-2: #b5509d;
+  --vd-fib-golden-3: #7a8400;
+  --vd-fib-golden-4: #227dd7;
+  --vd-fib-golden-5: #c94e3e;
+  --vd-fib-golden-6: #00926e;
+  --vd-fib-golden-7: #935fc7;
+  --vd-fib-golden-8: #9f7400;
   --vd-gray-0: #f8f9fa;
   --vd-gray-1: #f1f3f5;
   --vd-gray-2: #e9ecef;
@@ -391,18 +899,18 @@ table {
   --vd-border-color: var(--vd-gray-3);
   --vd-border-color-light: var(--vd-gray-2);
   --vd-border-color-dark: var(--vd-gray-4);
-  --vd-color-primary-alpha-10: #5c7cfa1a;
-  --vd-color-primary-alpha-20: #5c7cfa33;
-  --vd-color-secondary-alpha-10: #20c9971a;
-  --vd-color-secondary-alpha-20: #20c99733;
-  --vd-color-success-alpha-10: #40c0571a;
-  --vd-color-success-alpha-20: #40c05733;
-  --vd-color-error-alpha-10: #fa52521a;
-  --vd-color-error-alpha-20: #fa525233;
-  --vd-color-warning-alpha-10: #fab0051a;
-  --vd-color-warning-alpha-20: #fab00533;
-  --vd-color-info-alpha-10: #228be61a;
-  --vd-color-info-alpha-20: #228be633;
+  --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 10%, transparent);
+  --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 20%, transparent);
+  --vd-color-secondary-alpha-10: color-mix(in srgb, var(--vd-color-secondary) 10%, transparent);
+  --vd-color-secondary-alpha-20: color-mix(in srgb, var(--vd-color-secondary) 20%, transparent);
+  --vd-color-success-alpha-10: color-mix(in srgb, var(--vd-color-success) 10%, transparent);
+  --vd-color-success-alpha-20: color-mix(in srgb, var(--vd-color-success) 20%, transparent);
+  --vd-color-error-alpha-10: color-mix(in srgb, var(--vd-color-error) 10%, transparent);
+  --vd-color-error-alpha-20: color-mix(in srgb, var(--vd-color-error) 20%, transparent);
+  --vd-color-warning-alpha-10: color-mix(in srgb, var(--vd-color-warning) 10%, transparent);
+  --vd-color-warning-alpha-20: color-mix(in srgb, var(--vd-color-warning) 20%, transparent);
+  --vd-color-info-alpha-10: color-mix(in srgb, var(--vd-color-info) 10%, transparent);
+  --vd-color-info-alpha-20: color-mix(in srgb, var(--vd-color-info) 20%, transparent);
 }
 
 .vd-bg-primary, .bg-primary {
@@ -546,8 +1054,8 @@ table {
   --vd-color-primary-active: var(--vd-primary-6);
   --vd-color-secondary: var(--vd-secondary-4);
   --vd-color-secondary-hover: var(--vd-secondary-5);
-  --vd-color-primary-alpha-10: #748ffc26;
-  --vd-color-primary-alpha-20: #748ffc40;
+  --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 15%, transparent);
+  --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 25%, transparent);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -572,12 +1080,12 @@ table {
     --vd-color-primary-active: var(--vd-primary-6);
     --vd-color-secondary: var(--vd-secondary-4);
     --vd-color-secondary-hover: var(--vd-secondary-5);
-    --vd-color-primary-alpha-10: #748ffc26;
-    --vd-color-primary-alpha-20: #748ffc40;
+    --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 15%, transparent);
+    --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 25%, transparent);
   }
 }
 
-[data-primary="red"] {
+html[data-primary="red"] {
   --vd-primary-0: var(--vd-red-0);
   --vd-primary-1: var(--vd-red-1);
   --vd-primary-2: var(--vd-red-2);
@@ -590,7 +1098,7 @@ table {
   --vd-primary-9: var(--vd-red-9);
 }
 
-[data-primary="orange"] {
+html[data-primary="orange"] {
   --vd-primary-0: var(--vd-orange-0);
   --vd-primary-1: var(--vd-orange-1);
   --vd-primary-2: var(--vd-orange-2);
@@ -603,7 +1111,7 @@ table {
   --vd-primary-9: var(--vd-orange-9);
 }
 
-[data-primary="amber"] {
+html[data-primary="amber"] {
   --vd-primary-0: #fffbeb;
   --vd-primary-1: #fef3c7;
   --vd-primary-2: #fde68a;
@@ -616,7 +1124,7 @@ table {
   --vd-primary-9: #78350f;
 }
 
-[data-primary="yellow"] {
+html[data-primary="yellow"] {
   --vd-primary-0: var(--vd-yellow-0);
   --vd-primary-1: var(--vd-yellow-1);
   --vd-primary-2: var(--vd-yellow-2);
@@ -629,7 +1137,7 @@ table {
   --vd-primary-9: var(--vd-yellow-9);
 }
 
-[data-primary="lime"] {
+html[data-primary="lime"] {
   --vd-primary-0: var(--vd-lime-0);
   --vd-primary-1: var(--vd-lime-1);
   --vd-primary-2: var(--vd-lime-2);
@@ -642,7 +1150,7 @@ table {
   --vd-primary-9: var(--vd-lime-9);
 }
 
-[data-primary="green"] {
+html[data-primary="green"] {
   --vd-primary-0: var(--vd-green-0);
   --vd-primary-1: var(--vd-green-1);
   --vd-primary-2: var(--vd-green-2);
@@ -655,7 +1163,7 @@ table {
   --vd-primary-9: var(--vd-green-9);
 }
 
-[data-primary="emerald"] {
+html[data-primary="emerald"] {
   --vd-primary-0: #ecfdf5;
   --vd-primary-1: #d1fae5;
   --vd-primary-2: #a7f3d0;
@@ -668,7 +1176,7 @@ table {
   --vd-primary-9: #064e3b;
 }
 
-[data-primary="teal"] {
+html[data-primary="teal"] {
   --vd-primary-0: var(--vd-teal-0);
   --vd-primary-1: var(--vd-teal-1);
   --vd-primary-2: var(--vd-teal-2);
@@ -681,7 +1189,7 @@ table {
   --vd-primary-9: var(--vd-teal-9);
 }
 
-[data-primary="cyan"] {
+html[data-primary="cyan"] {
   --vd-primary-0: var(--vd-cyan-0);
   --vd-primary-1: var(--vd-cyan-1);
   --vd-primary-2: var(--vd-cyan-2);
@@ -694,7 +1202,7 @@ table {
   --vd-primary-9: var(--vd-cyan-9);
 }
 
-[data-primary="sky"] {
+html[data-primary="sky"] {
   --vd-primary-0: #f0f9ff;
   --vd-primary-1: #e0f2fe;
   --vd-primary-2: #bae6fd;
@@ -707,7 +1215,7 @@ table {
   --vd-primary-9: #0c4a6e;
 }
 
-[data-primary="blue"] {
+html[data-primary="blue"] {
   --vd-primary-0: var(--vd-blue-0);
   --vd-primary-1: var(--vd-blue-1);
   --vd-primary-2: var(--vd-blue-2);
@@ -720,7 +1228,7 @@ table {
   --vd-primary-9: var(--vd-blue-9);
 }
 
-[data-primary="indigo"] {
+html[data-primary="indigo"] {
   --vd-primary-0: var(--vd-indigo-0);
   --vd-primary-1: var(--vd-indigo-1);
   --vd-primary-2: var(--vd-indigo-2);
@@ -733,7 +1241,7 @@ table {
   --vd-primary-9: var(--vd-indigo-9);
 }
 
-[data-primary="violet"] {
+html[data-primary="violet"] {
   --vd-primary-0: var(--vd-violet-0);
   --vd-primary-1: var(--vd-violet-1);
   --vd-primary-2: var(--vd-violet-2);
@@ -746,7 +1254,7 @@ table {
   --vd-primary-9: var(--vd-violet-9);
 }
 
-[data-primary="purple"] {
+html[data-primary="purple"] {
   --vd-primary-0: var(--vd-grape-0);
   --vd-primary-1: var(--vd-grape-1);
   --vd-primary-2: var(--vd-grape-2);
@@ -759,7 +1267,7 @@ table {
   --vd-primary-9: var(--vd-grape-9);
 }
 
-[data-primary="fuchsia"] {
+html[data-primary="fuchsia"] {
   --vd-primary-0: #fdf4ff;
   --vd-primary-1: #fae8ff;
   --vd-primary-2: #f5d0fe;
@@ -772,7 +1280,7 @@ table {
   --vd-primary-9: #701a75;
 }
 
-[data-primary="pink"] {
+html[data-primary="pink"] {
   --vd-primary-0: var(--vd-pink-0);
   --vd-primary-1: var(--vd-pink-1);
   --vd-primary-2: var(--vd-pink-2);
@@ -785,7 +1293,7 @@ table {
   --vd-primary-9: var(--vd-pink-9);
 }
 
-[data-primary="rose"] {
+html[data-primary="rose"] {
   --vd-primary-0: #fff1f2;
   --vd-primary-1: #ffe4e6;
   --vd-primary-2: #fecdd3;
@@ -798,7 +1306,7 @@ table {
   --vd-primary-9: #881337;
 }
 
-[data-primary="black"] {
+html[data-primary="black"] {
   --vd-primary-0: #fafafa;
   --vd-primary-1: #f5f5f5;
   --vd-primary-2: #e5e5e5;
@@ -811,7 +1319,7 @@ table {
   --vd-primary-9: #0a0a0a;
 }
 
-[data-neutral="charcoal"] {
+html[data-neutral="charcoal"] {
   --vd-gray-0: var(--vd-charcoal-0);
   --vd-gray-1: var(--vd-charcoal-1);
   --vd-gray-2: var(--vd-charcoal-2);
@@ -824,7 +1332,7 @@ table {
   --vd-gray-9: var(--vd-charcoal-9);
 }
 
-[data-neutral="gray"] {
+html[data-neutral="gray"] {
   --vd-gray-0: #f8f9fa;
   --vd-gray-1: #f1f3f5;
   --vd-gray-2: #e9ecef;
@@ -837,7 +1345,7 @@ table {
   --vd-gray-9: #212529;
 }
 
-[data-neutral="slate"] {
+html[data-neutral="slate"] {
   --vd-gray-0: var(--vd-slate-0);
   --vd-gray-1: var(--vd-slate-1);
   --vd-gray-2: var(--vd-slate-2);
@@ -850,7 +1358,7 @@ table {
   --vd-gray-9: var(--vd-slate-9);
 }
 
-[data-neutral="zinc"] {
+html[data-neutral="zinc"] {
   --vd-gray-0: var(--vd-zinc-0);
   --vd-gray-1: var(--vd-zinc-1);
   --vd-gray-2: var(--vd-zinc-2);
@@ -863,7 +1371,7 @@ table {
   --vd-gray-9: var(--vd-zinc-9);
 }
 
-[data-neutral="neutral"] {
+html[data-neutral="neutral"] {
   --vd-gray-0: var(--vd-neutral-0);
   --vd-gray-1: var(--vd-neutral-1);
   --vd-gray-2: var(--vd-neutral-2);
@@ -876,7 +1384,7 @@ table {
   --vd-gray-9: var(--vd-neutral-9);
 }
 
-[data-neutral="stone"] {
+html[data-neutral="stone"] {
   --vd-gray-0: var(--vd-stone-0);
   --vd-gray-1: var(--vd-stone-1);
   --vd-gray-2: var(--vd-stone-2);
@@ -889,6 +1397,781 @@ table {
   --vd-gray-9: var(--vd-stone-9);
 }
 
+:root {
+  --vd-gray-0: var(--vd-oc-gray-0);
+  --vd-gray-1: var(--vd-oc-gray-1);
+  --vd-gray-2: var(--vd-oc-gray-2);
+  --vd-gray-3: var(--vd-oc-gray-3);
+  --vd-gray-4: var(--vd-oc-gray-4);
+  --vd-gray-5: var(--vd-oc-gray-5);
+  --vd-gray-6: var(--vd-oc-gray-6);
+  --vd-gray-7: var(--vd-oc-gray-7);
+  --vd-gray-8: var(--vd-oc-gray-8);
+  --vd-gray-9: var(--vd-oc-gray-9);
+  --vd-slate-0: var(--vd-oc-slate-0);
+  --vd-slate-1: var(--vd-oc-slate-1);
+  --vd-slate-2: var(--vd-oc-slate-2);
+  --vd-slate-3: var(--vd-oc-slate-3);
+  --vd-slate-4: var(--vd-oc-slate-4);
+  --vd-slate-5: var(--vd-oc-slate-5);
+  --vd-slate-6: var(--vd-oc-slate-6);
+  --vd-slate-7: var(--vd-oc-slate-7);
+  --vd-slate-8: var(--vd-oc-slate-8);
+  --vd-slate-9: var(--vd-oc-slate-9);
+  --vd-charcoal-0: var(--vd-oc-charcoal-0);
+  --vd-charcoal-1: var(--vd-oc-charcoal-1);
+  --vd-charcoal-2: var(--vd-oc-charcoal-2);
+  --vd-charcoal-3: var(--vd-oc-charcoal-3);
+  --vd-charcoal-4: var(--vd-oc-charcoal-4);
+  --vd-charcoal-5: var(--vd-oc-charcoal-5);
+  --vd-charcoal-6: var(--vd-oc-charcoal-6);
+  --vd-charcoal-7: var(--vd-oc-charcoal-7);
+  --vd-charcoal-8: var(--vd-oc-charcoal-8);
+  --vd-charcoal-9: var(--vd-oc-charcoal-9);
+  --vd-zinc-0: var(--vd-oc-zinc-0);
+  --vd-zinc-1: var(--vd-oc-zinc-1);
+  --vd-zinc-2: var(--vd-oc-zinc-2);
+  --vd-zinc-3: var(--vd-oc-zinc-3);
+  --vd-zinc-4: var(--vd-oc-zinc-4);
+  --vd-zinc-5: var(--vd-oc-zinc-5);
+  --vd-zinc-6: var(--vd-oc-zinc-6);
+  --vd-zinc-7: var(--vd-oc-zinc-7);
+  --vd-zinc-8: var(--vd-oc-zinc-8);
+  --vd-zinc-9: var(--vd-oc-zinc-9);
+  --vd-neutral-0: var(--vd-oc-neutral-0);
+  --vd-neutral-1: var(--vd-oc-neutral-1);
+  --vd-neutral-2: var(--vd-oc-neutral-2);
+  --vd-neutral-3: var(--vd-oc-neutral-3);
+  --vd-neutral-4: var(--vd-oc-neutral-4);
+  --vd-neutral-5: var(--vd-oc-neutral-5);
+  --vd-neutral-6: var(--vd-oc-neutral-6);
+  --vd-neutral-7: var(--vd-oc-neutral-7);
+  --vd-neutral-8: var(--vd-oc-neutral-8);
+  --vd-neutral-9: var(--vd-oc-neutral-9);
+  --vd-stone-0: var(--vd-oc-stone-0);
+  --vd-stone-1: var(--vd-oc-stone-1);
+  --vd-stone-2: var(--vd-oc-stone-2);
+  --vd-stone-3: var(--vd-oc-stone-3);
+  --vd-stone-4: var(--vd-oc-stone-4);
+  --vd-stone-5: var(--vd-oc-stone-5);
+  --vd-stone-6: var(--vd-oc-stone-6);
+  --vd-stone-7: var(--vd-oc-stone-7);
+  --vd-stone-8: var(--vd-oc-stone-8);
+  --vd-stone-9: var(--vd-oc-stone-9);
+  --vd-primary-0: var(--vd-oc-primary-0);
+  --vd-primary-1: var(--vd-oc-primary-1);
+  --vd-primary-2: var(--vd-oc-primary-2);
+  --vd-primary-3: var(--vd-oc-primary-3);
+  --vd-primary-4: var(--vd-oc-primary-4);
+  --vd-primary-5: var(--vd-oc-primary-5);
+  --vd-primary-6: var(--vd-oc-primary-6);
+  --vd-primary-7: var(--vd-oc-primary-7);
+  --vd-primary-8: var(--vd-oc-primary-8);
+  --vd-primary-9: var(--vd-oc-primary-9);
+  --vd-secondary-0: var(--vd-oc-secondary-0);
+  --vd-secondary-1: var(--vd-oc-secondary-1);
+  --vd-secondary-2: var(--vd-oc-secondary-2);
+  --vd-secondary-3: var(--vd-oc-secondary-3);
+  --vd-secondary-4: var(--vd-oc-secondary-4);
+  --vd-secondary-5: var(--vd-oc-secondary-5);
+  --vd-secondary-6: var(--vd-oc-secondary-6);
+  --vd-secondary-7: var(--vd-oc-secondary-7);
+  --vd-secondary-8: var(--vd-oc-secondary-8);
+  --vd-secondary-9: var(--vd-oc-secondary-9);
+  --vd-danger-0: var(--vd-oc-danger-0);
+  --vd-danger-1: var(--vd-oc-danger-1);
+  --vd-danger-2: var(--vd-oc-danger-2);
+  --vd-danger-3: var(--vd-oc-danger-3);
+  --vd-danger-4: var(--vd-oc-danger-4);
+  --vd-danger-5: var(--vd-oc-danger-5);
+  --vd-danger-6: var(--vd-oc-danger-6);
+  --vd-danger-7: var(--vd-oc-danger-7);
+  --vd-danger-8: var(--vd-oc-danger-8);
+  --vd-danger-9: var(--vd-oc-danger-9);
+  --vd-error-0: var(--vd-oc-error-0);
+  --vd-error-1: var(--vd-oc-error-1);
+  --vd-error-2: var(--vd-oc-error-2);
+  --vd-error-3: var(--vd-oc-error-3);
+  --vd-error-4: var(--vd-oc-error-4);
+  --vd-error-5: var(--vd-oc-error-5);
+  --vd-error-6: var(--vd-oc-error-6);
+  --vd-error-7: var(--vd-oc-error-7);
+  --vd-error-8: var(--vd-oc-error-8);
+  --vd-error-9: var(--vd-oc-error-9);
+  --vd-success-0: var(--vd-oc-success-0);
+  --vd-success-1: var(--vd-oc-success-1);
+  --vd-success-2: var(--vd-oc-success-2);
+  --vd-success-3: var(--vd-oc-success-3);
+  --vd-success-4: var(--vd-oc-success-4);
+  --vd-success-5: var(--vd-oc-success-5);
+  --vd-success-6: var(--vd-oc-success-6);
+  --vd-success-7: var(--vd-oc-success-7);
+  --vd-success-8: var(--vd-oc-success-8);
+  --vd-success-9: var(--vd-oc-success-9);
+  --vd-warning-0: var(--vd-oc-warning-0);
+  --vd-warning-1: var(--vd-oc-warning-1);
+  --vd-warning-2: var(--vd-oc-warning-2);
+  --vd-warning-3: var(--vd-oc-warning-3);
+  --vd-warning-4: var(--vd-oc-warning-4);
+  --vd-warning-5: var(--vd-oc-warning-5);
+  --vd-warning-6: var(--vd-oc-warning-6);
+  --vd-warning-7: var(--vd-oc-warning-7);
+  --vd-warning-8: var(--vd-oc-warning-8);
+  --vd-warning-9: var(--vd-oc-warning-9);
+  --vd-info-0: var(--vd-oc-info-0);
+  --vd-info-1: var(--vd-oc-info-1);
+  --vd-info-2: var(--vd-oc-info-2);
+  --vd-info-3: var(--vd-oc-info-3);
+  --vd-info-4: var(--vd-oc-info-4);
+  --vd-info-5: var(--vd-oc-info-5);
+  --vd-info-6: var(--vd-oc-info-6);
+  --vd-info-7: var(--vd-oc-info-7);
+  --vd-info-8: var(--vd-oc-info-8);
+  --vd-info-9: var(--vd-oc-info-9);
+  --vd-red-0: var(--vd-oc-red-0);
+  --vd-red-1: var(--vd-oc-red-1);
+  --vd-red-2: var(--vd-oc-red-2);
+  --vd-red-3: var(--vd-oc-red-3);
+  --vd-red-4: var(--vd-oc-red-4);
+  --vd-red-5: var(--vd-oc-red-5);
+  --vd-red-6: var(--vd-oc-red-6);
+  --vd-red-7: var(--vd-oc-red-7);
+  --vd-red-8: var(--vd-oc-red-8);
+  --vd-red-9: var(--vd-oc-red-9);
+  --vd-orange-0: var(--vd-oc-orange-0);
+  --vd-orange-1: var(--vd-oc-orange-1);
+  --vd-orange-2: var(--vd-oc-orange-2);
+  --vd-orange-3: var(--vd-oc-orange-3);
+  --vd-orange-4: var(--vd-oc-orange-4);
+  --vd-orange-5: var(--vd-oc-orange-5);
+  --vd-orange-6: var(--vd-oc-orange-6);
+  --vd-orange-7: var(--vd-oc-orange-7);
+  --vd-orange-8: var(--vd-oc-orange-8);
+  --vd-orange-9: var(--vd-oc-orange-9);
+  --vd-yellow-0: var(--vd-oc-yellow-0);
+  --vd-yellow-1: var(--vd-oc-yellow-1);
+  --vd-yellow-2: var(--vd-oc-yellow-2);
+  --vd-yellow-3: var(--vd-oc-yellow-3);
+  --vd-yellow-4: var(--vd-oc-yellow-4);
+  --vd-yellow-5: var(--vd-oc-yellow-5);
+  --vd-yellow-6: var(--vd-oc-yellow-6);
+  --vd-yellow-7: var(--vd-oc-yellow-7);
+  --vd-yellow-8: var(--vd-oc-yellow-8);
+  --vd-yellow-9: var(--vd-oc-yellow-9);
+  --vd-lime-0: var(--vd-oc-lime-0);
+  --vd-lime-1: var(--vd-oc-lime-1);
+  --vd-lime-2: var(--vd-oc-lime-2);
+  --vd-lime-3: var(--vd-oc-lime-3);
+  --vd-lime-4: var(--vd-oc-lime-4);
+  --vd-lime-5: var(--vd-oc-lime-5);
+  --vd-lime-6: var(--vd-oc-lime-6);
+  --vd-lime-7: var(--vd-oc-lime-7);
+  --vd-lime-8: var(--vd-oc-lime-8);
+  --vd-lime-9: var(--vd-oc-lime-9);
+  --vd-green-0: var(--vd-oc-green-0);
+  --vd-green-1: var(--vd-oc-green-1);
+  --vd-green-2: var(--vd-oc-green-2);
+  --vd-green-3: var(--vd-oc-green-3);
+  --vd-green-4: var(--vd-oc-green-4);
+  --vd-green-5: var(--vd-oc-green-5);
+  --vd-green-6: var(--vd-oc-green-6);
+  --vd-green-7: var(--vd-oc-green-7);
+  --vd-green-8: var(--vd-oc-green-8);
+  --vd-green-9: var(--vd-oc-green-9);
+  --vd-teal-0: var(--vd-oc-teal-0);
+  --vd-teal-1: var(--vd-oc-teal-1);
+  --vd-teal-2: var(--vd-oc-teal-2);
+  --vd-teal-3: var(--vd-oc-teal-3);
+  --vd-teal-4: var(--vd-oc-teal-4);
+  --vd-teal-5: var(--vd-oc-teal-5);
+  --vd-teal-6: var(--vd-oc-teal-6);
+  --vd-teal-7: var(--vd-oc-teal-7);
+  --vd-teal-8: var(--vd-oc-teal-8);
+  --vd-teal-9: var(--vd-oc-teal-9);
+  --vd-cyan-0: var(--vd-oc-cyan-0);
+  --vd-cyan-1: var(--vd-oc-cyan-1);
+  --vd-cyan-2: var(--vd-oc-cyan-2);
+  --vd-cyan-3: var(--vd-oc-cyan-3);
+  --vd-cyan-4: var(--vd-oc-cyan-4);
+  --vd-cyan-5: var(--vd-oc-cyan-5);
+  --vd-cyan-6: var(--vd-oc-cyan-6);
+  --vd-cyan-7: var(--vd-oc-cyan-7);
+  --vd-cyan-8: var(--vd-oc-cyan-8);
+  --vd-cyan-9: var(--vd-oc-cyan-9);
+  --vd-blue-0: var(--vd-oc-blue-0);
+  --vd-blue-1: var(--vd-oc-blue-1);
+  --vd-blue-2: var(--vd-oc-blue-2);
+  --vd-blue-3: var(--vd-oc-blue-3);
+  --vd-blue-4: var(--vd-oc-blue-4);
+  --vd-blue-5: var(--vd-oc-blue-5);
+  --vd-blue-6: var(--vd-oc-blue-6);
+  --vd-blue-7: var(--vd-oc-blue-7);
+  --vd-blue-8: var(--vd-oc-blue-8);
+  --vd-blue-9: var(--vd-oc-blue-9);
+  --vd-indigo-0: var(--vd-oc-indigo-0);
+  --vd-indigo-1: var(--vd-oc-indigo-1);
+  --vd-indigo-2: var(--vd-oc-indigo-2);
+  --vd-indigo-3: var(--vd-oc-indigo-3);
+  --vd-indigo-4: var(--vd-oc-indigo-4);
+  --vd-indigo-5: var(--vd-oc-indigo-5);
+  --vd-indigo-6: var(--vd-oc-indigo-6);
+  --vd-indigo-7: var(--vd-oc-indigo-7);
+  --vd-indigo-8: var(--vd-oc-indigo-8);
+  --vd-indigo-9: var(--vd-oc-indigo-9);
+  --vd-violet-0: var(--vd-oc-violet-0);
+  --vd-violet-1: var(--vd-oc-violet-1);
+  --vd-violet-2: var(--vd-oc-violet-2);
+  --vd-violet-3: var(--vd-oc-violet-3);
+  --vd-violet-4: var(--vd-oc-violet-4);
+  --vd-violet-5: var(--vd-oc-violet-5);
+  --vd-violet-6: var(--vd-oc-violet-6);
+  --vd-violet-7: var(--vd-oc-violet-7);
+  --vd-violet-8: var(--vd-oc-violet-8);
+  --vd-violet-9: var(--vd-oc-violet-9);
+  --vd-grape-0: var(--vd-oc-grape-0);
+  --vd-grape-1: var(--vd-oc-grape-1);
+  --vd-grape-2: var(--vd-oc-grape-2);
+  --vd-grape-3: var(--vd-oc-grape-3);
+  --vd-grape-4: var(--vd-oc-grape-4);
+  --vd-grape-5: var(--vd-oc-grape-5);
+  --vd-grape-6: var(--vd-oc-grape-6);
+  --vd-grape-7: var(--vd-oc-grape-7);
+  --vd-grape-8: var(--vd-oc-grape-8);
+  --vd-grape-9: var(--vd-oc-grape-9);
+  --vd-pink-0: var(--vd-oc-pink-0);
+  --vd-pink-1: var(--vd-oc-pink-1);
+  --vd-pink-2: var(--vd-oc-pink-2);
+  --vd-pink-3: var(--vd-oc-pink-3);
+  --vd-pink-4: var(--vd-oc-pink-4);
+  --vd-pink-5: var(--vd-oc-pink-5);
+  --vd-pink-6: var(--vd-oc-pink-6);
+  --vd-pink-7: var(--vd-oc-pink-7);
+  --vd-pink-8: var(--vd-oc-pink-8);
+  --vd-pink-9: var(--vd-oc-pink-9);
+  --vd-golden-1: var(--vd-fib-golden-1);
+  --vd-golden-2: var(--vd-fib-golden-2);
+  --vd-golden-3: var(--vd-fib-golden-3);
+  --vd-golden-4: var(--vd-fib-golden-4);
+  --vd-golden-5: var(--vd-fib-golden-5);
+  --vd-golden-6: var(--vd-fib-golden-6);
+  --vd-golden-7: var(--vd-fib-golden-7);
+  --vd-golden-8: var(--vd-fib-golden-8);
+}
+
+[data-palette="fibonacci"] {
+  --vd-gray-0: var(--vd-fib-gray-0);
+  --vd-gray-1: var(--vd-fib-gray-1);
+  --vd-gray-2: var(--vd-fib-gray-2);
+  --vd-gray-3: var(--vd-fib-gray-3);
+  --vd-gray-4: var(--vd-fib-gray-4);
+  --vd-gray-5: var(--vd-fib-gray-5);
+  --vd-gray-6: var(--vd-fib-gray-6);
+  --vd-gray-7: var(--vd-fib-gray-7);
+  --vd-gray-8: var(--vd-fib-gray-8);
+  --vd-gray-9: var(--vd-fib-gray-9);
+  --vd-slate-0: var(--vd-fib-slate-0);
+  --vd-slate-1: var(--vd-fib-slate-1);
+  --vd-slate-2: var(--vd-fib-slate-2);
+  --vd-slate-3: var(--vd-fib-slate-3);
+  --vd-slate-4: var(--vd-fib-slate-4);
+  --vd-slate-5: var(--vd-fib-slate-5);
+  --vd-slate-6: var(--vd-fib-slate-6);
+  --vd-slate-7: var(--vd-fib-slate-7);
+  --vd-slate-8: var(--vd-fib-slate-8);
+  --vd-slate-9: var(--vd-fib-slate-9);
+  --vd-charcoal-0: var(--vd-fib-charcoal-0);
+  --vd-charcoal-1: var(--vd-fib-charcoal-1);
+  --vd-charcoal-2: var(--vd-fib-charcoal-2);
+  --vd-charcoal-3: var(--vd-fib-charcoal-3);
+  --vd-charcoal-4: var(--vd-fib-charcoal-4);
+  --vd-charcoal-5: var(--vd-fib-charcoal-5);
+  --vd-charcoal-6: var(--vd-fib-charcoal-6);
+  --vd-charcoal-7: var(--vd-fib-charcoal-7);
+  --vd-charcoal-8: var(--vd-fib-charcoal-8);
+  --vd-charcoal-9: var(--vd-fib-charcoal-9);
+  --vd-zinc-0: var(--vd-fib-zinc-0);
+  --vd-zinc-1: var(--vd-fib-zinc-1);
+  --vd-zinc-2: var(--vd-fib-zinc-2);
+  --vd-zinc-3: var(--vd-fib-zinc-3);
+  --vd-zinc-4: var(--vd-fib-zinc-4);
+  --vd-zinc-5: var(--vd-fib-zinc-5);
+  --vd-zinc-6: var(--vd-fib-zinc-6);
+  --vd-zinc-7: var(--vd-fib-zinc-7);
+  --vd-zinc-8: var(--vd-fib-zinc-8);
+  --vd-zinc-9: var(--vd-fib-zinc-9);
+  --vd-neutral-0: var(--vd-fib-neutral-0);
+  --vd-neutral-1: var(--vd-fib-neutral-1);
+  --vd-neutral-2: var(--vd-fib-neutral-2);
+  --vd-neutral-3: var(--vd-fib-neutral-3);
+  --vd-neutral-4: var(--vd-fib-neutral-4);
+  --vd-neutral-5: var(--vd-fib-neutral-5);
+  --vd-neutral-6: var(--vd-fib-neutral-6);
+  --vd-neutral-7: var(--vd-fib-neutral-7);
+  --vd-neutral-8: var(--vd-fib-neutral-8);
+  --vd-neutral-9: var(--vd-fib-neutral-9);
+  --vd-stone-0: var(--vd-fib-stone-0);
+  --vd-stone-1: var(--vd-fib-stone-1);
+  --vd-stone-2: var(--vd-fib-stone-2);
+  --vd-stone-3: var(--vd-fib-stone-3);
+  --vd-stone-4: var(--vd-fib-stone-4);
+  --vd-stone-5: var(--vd-fib-stone-5);
+  --vd-stone-6: var(--vd-fib-stone-6);
+  --vd-stone-7: var(--vd-fib-stone-7);
+  --vd-stone-8: var(--vd-fib-stone-8);
+  --vd-stone-9: var(--vd-fib-stone-9);
+  --vd-primary-0: var(--vd-fib-primary-0);
+  --vd-primary-1: var(--vd-fib-primary-1);
+  --vd-primary-2: var(--vd-fib-primary-2);
+  --vd-primary-3: var(--vd-fib-primary-3);
+  --vd-primary-4: var(--vd-fib-primary-4);
+  --vd-primary-5: var(--vd-fib-primary-5);
+  --vd-primary-6: var(--vd-fib-primary-6);
+  --vd-primary-7: var(--vd-fib-primary-7);
+  --vd-primary-8: var(--vd-fib-primary-8);
+  --vd-primary-9: var(--vd-fib-primary-9);
+  --vd-secondary-0: var(--vd-fib-secondary-0);
+  --vd-secondary-1: var(--vd-fib-secondary-1);
+  --vd-secondary-2: var(--vd-fib-secondary-2);
+  --vd-secondary-3: var(--vd-fib-secondary-3);
+  --vd-secondary-4: var(--vd-fib-secondary-4);
+  --vd-secondary-5: var(--vd-fib-secondary-5);
+  --vd-secondary-6: var(--vd-fib-secondary-6);
+  --vd-secondary-7: var(--vd-fib-secondary-7);
+  --vd-secondary-8: var(--vd-fib-secondary-8);
+  --vd-secondary-9: var(--vd-fib-secondary-9);
+  --vd-danger-0: var(--vd-fib-danger-0);
+  --vd-danger-1: var(--vd-fib-danger-1);
+  --vd-danger-2: var(--vd-fib-danger-2);
+  --vd-danger-3: var(--vd-fib-danger-3);
+  --vd-danger-4: var(--vd-fib-danger-4);
+  --vd-danger-5: var(--vd-fib-danger-5);
+  --vd-danger-6: var(--vd-fib-danger-6);
+  --vd-danger-7: var(--vd-fib-danger-7);
+  --vd-danger-8: var(--vd-fib-danger-8);
+  --vd-danger-9: var(--vd-fib-danger-9);
+  --vd-error-0: var(--vd-fib-error-0);
+  --vd-error-1: var(--vd-fib-error-1);
+  --vd-error-2: var(--vd-fib-error-2);
+  --vd-error-3: var(--vd-fib-error-3);
+  --vd-error-4: var(--vd-fib-error-4);
+  --vd-error-5: var(--vd-fib-error-5);
+  --vd-error-6: var(--vd-fib-error-6);
+  --vd-error-7: var(--vd-fib-error-7);
+  --vd-error-8: var(--vd-fib-error-8);
+  --vd-error-9: var(--vd-fib-error-9);
+  --vd-success-0: var(--vd-fib-success-0);
+  --vd-success-1: var(--vd-fib-success-1);
+  --vd-success-2: var(--vd-fib-success-2);
+  --vd-success-3: var(--vd-fib-success-3);
+  --vd-success-4: var(--vd-fib-success-4);
+  --vd-success-5: var(--vd-fib-success-5);
+  --vd-success-6: var(--vd-fib-success-6);
+  --vd-success-7: var(--vd-fib-success-7);
+  --vd-success-8: var(--vd-fib-success-8);
+  --vd-success-9: var(--vd-fib-success-9);
+  --vd-warning-0: var(--vd-fib-warning-0);
+  --vd-warning-1: var(--vd-fib-warning-1);
+  --vd-warning-2: var(--vd-fib-warning-2);
+  --vd-warning-3: var(--vd-fib-warning-3);
+  --vd-warning-4: var(--vd-fib-warning-4);
+  --vd-warning-5: var(--vd-fib-warning-5);
+  --vd-warning-6: var(--vd-fib-warning-6);
+  --vd-warning-7: var(--vd-fib-warning-7);
+  --vd-warning-8: var(--vd-fib-warning-8);
+  --vd-warning-9: var(--vd-fib-warning-9);
+  --vd-info-0: var(--vd-fib-info-0);
+  --vd-info-1: var(--vd-fib-info-1);
+  --vd-info-2: var(--vd-fib-info-2);
+  --vd-info-3: var(--vd-fib-info-3);
+  --vd-info-4: var(--vd-fib-info-4);
+  --vd-info-5: var(--vd-fib-info-5);
+  --vd-info-6: var(--vd-fib-info-6);
+  --vd-info-7: var(--vd-fib-info-7);
+  --vd-info-8: var(--vd-fib-info-8);
+  --vd-info-9: var(--vd-fib-info-9);
+  --vd-red-0: var(--vd-fib-red-0);
+  --vd-red-1: var(--vd-fib-red-1);
+  --vd-red-2: var(--vd-fib-red-2);
+  --vd-red-3: var(--vd-fib-red-3);
+  --vd-red-4: var(--vd-fib-red-4);
+  --vd-red-5: var(--vd-fib-red-5);
+  --vd-red-6: var(--vd-fib-red-6);
+  --vd-red-7: var(--vd-fib-red-7);
+  --vd-red-8: var(--vd-fib-red-8);
+  --vd-red-9: var(--vd-fib-red-9);
+  --vd-orange-0: var(--vd-fib-orange-0);
+  --vd-orange-1: var(--vd-fib-orange-1);
+  --vd-orange-2: var(--vd-fib-orange-2);
+  --vd-orange-3: var(--vd-fib-orange-3);
+  --vd-orange-4: var(--vd-fib-orange-4);
+  --vd-orange-5: var(--vd-fib-orange-5);
+  --vd-orange-6: var(--vd-fib-orange-6);
+  --vd-orange-7: var(--vd-fib-orange-7);
+  --vd-orange-8: var(--vd-fib-orange-8);
+  --vd-orange-9: var(--vd-fib-orange-9);
+  --vd-yellow-0: var(--vd-fib-yellow-0);
+  --vd-yellow-1: var(--vd-fib-yellow-1);
+  --vd-yellow-2: var(--vd-fib-yellow-2);
+  --vd-yellow-3: var(--vd-fib-yellow-3);
+  --vd-yellow-4: var(--vd-fib-yellow-4);
+  --vd-yellow-5: var(--vd-fib-yellow-5);
+  --vd-yellow-6: var(--vd-fib-yellow-6);
+  --vd-yellow-7: var(--vd-fib-yellow-7);
+  --vd-yellow-8: var(--vd-fib-yellow-8);
+  --vd-yellow-9: var(--vd-fib-yellow-9);
+  --vd-lime-0: var(--vd-fib-lime-0);
+  --vd-lime-1: var(--vd-fib-lime-1);
+  --vd-lime-2: var(--vd-fib-lime-2);
+  --vd-lime-3: var(--vd-fib-lime-3);
+  --vd-lime-4: var(--vd-fib-lime-4);
+  --vd-lime-5: var(--vd-fib-lime-5);
+  --vd-lime-6: var(--vd-fib-lime-6);
+  --vd-lime-7: var(--vd-fib-lime-7);
+  --vd-lime-8: var(--vd-fib-lime-8);
+  --vd-lime-9: var(--vd-fib-lime-9);
+  --vd-green-0: var(--vd-fib-green-0);
+  --vd-green-1: var(--vd-fib-green-1);
+  --vd-green-2: var(--vd-fib-green-2);
+  --vd-green-3: var(--vd-fib-green-3);
+  --vd-green-4: var(--vd-fib-green-4);
+  --vd-green-5: var(--vd-fib-green-5);
+  --vd-green-6: var(--vd-fib-green-6);
+  --vd-green-7: var(--vd-fib-green-7);
+  --vd-green-8: var(--vd-fib-green-8);
+  --vd-green-9: var(--vd-fib-green-9);
+  --vd-teal-0: var(--vd-fib-teal-0);
+  --vd-teal-1: var(--vd-fib-teal-1);
+  --vd-teal-2: var(--vd-fib-teal-2);
+  --vd-teal-3: var(--vd-fib-teal-3);
+  --vd-teal-4: var(--vd-fib-teal-4);
+  --vd-teal-5: var(--vd-fib-teal-5);
+  --vd-teal-6: var(--vd-fib-teal-6);
+  --vd-teal-7: var(--vd-fib-teal-7);
+  --vd-teal-8: var(--vd-fib-teal-8);
+  --vd-teal-9: var(--vd-fib-teal-9);
+  --vd-cyan-0: var(--vd-fib-cyan-0);
+  --vd-cyan-1: var(--vd-fib-cyan-1);
+  --vd-cyan-2: var(--vd-fib-cyan-2);
+  --vd-cyan-3: var(--vd-fib-cyan-3);
+  --vd-cyan-4: var(--vd-fib-cyan-4);
+  --vd-cyan-5: var(--vd-fib-cyan-5);
+  --vd-cyan-6: var(--vd-fib-cyan-6);
+  --vd-cyan-7: var(--vd-fib-cyan-7);
+  --vd-cyan-8: var(--vd-fib-cyan-8);
+  --vd-cyan-9: var(--vd-fib-cyan-9);
+  --vd-blue-0: var(--vd-fib-blue-0);
+  --vd-blue-1: var(--vd-fib-blue-1);
+  --vd-blue-2: var(--vd-fib-blue-2);
+  --vd-blue-3: var(--vd-fib-blue-3);
+  --vd-blue-4: var(--vd-fib-blue-4);
+  --vd-blue-5: var(--vd-fib-blue-5);
+  --vd-blue-6: var(--vd-fib-blue-6);
+  --vd-blue-7: var(--vd-fib-blue-7);
+  --vd-blue-8: var(--vd-fib-blue-8);
+  --vd-blue-9: var(--vd-fib-blue-9);
+  --vd-indigo-0: var(--vd-fib-indigo-0);
+  --vd-indigo-1: var(--vd-fib-indigo-1);
+  --vd-indigo-2: var(--vd-fib-indigo-2);
+  --vd-indigo-3: var(--vd-fib-indigo-3);
+  --vd-indigo-4: var(--vd-fib-indigo-4);
+  --vd-indigo-5: var(--vd-fib-indigo-5);
+  --vd-indigo-6: var(--vd-fib-indigo-6);
+  --vd-indigo-7: var(--vd-fib-indigo-7);
+  --vd-indigo-8: var(--vd-fib-indigo-8);
+  --vd-indigo-9: var(--vd-fib-indigo-9);
+  --vd-violet-0: var(--vd-fib-violet-0);
+  --vd-violet-1: var(--vd-fib-violet-1);
+  --vd-violet-2: var(--vd-fib-violet-2);
+  --vd-violet-3: var(--vd-fib-violet-3);
+  --vd-violet-4: var(--vd-fib-violet-4);
+  --vd-violet-5: var(--vd-fib-violet-5);
+  --vd-violet-6: var(--vd-fib-violet-6);
+  --vd-violet-7: var(--vd-fib-violet-7);
+  --vd-violet-8: var(--vd-fib-violet-8);
+  --vd-violet-9: var(--vd-fib-violet-9);
+  --vd-grape-0: var(--vd-fib-grape-0);
+  --vd-grape-1: var(--vd-fib-grape-1);
+  --vd-grape-2: var(--vd-fib-grape-2);
+  --vd-grape-3: var(--vd-fib-grape-3);
+  --vd-grape-4: var(--vd-fib-grape-4);
+  --vd-grape-5: var(--vd-fib-grape-5);
+  --vd-grape-6: var(--vd-fib-grape-6);
+  --vd-grape-7: var(--vd-fib-grape-7);
+  --vd-grape-8: var(--vd-fib-grape-8);
+  --vd-grape-9: var(--vd-fib-grape-9);
+  --vd-pink-0: var(--vd-fib-pink-0);
+  --vd-pink-1: var(--vd-fib-pink-1);
+  --vd-pink-2: var(--vd-fib-pink-2);
+  --vd-pink-3: var(--vd-fib-pink-3);
+  --vd-pink-4: var(--vd-fib-pink-4);
+  --vd-pink-5: var(--vd-fib-pink-5);
+  --vd-pink-6: var(--vd-fib-pink-6);
+  --vd-pink-7: var(--vd-fib-pink-7);
+  --vd-pink-8: var(--vd-fib-pink-8);
+  --vd-pink-9: var(--vd-fib-pink-9);
+  --vd-golden-1: var(--vd-fib-golden-1);
+  --vd-golden-2: var(--vd-fib-golden-2);
+  --vd-golden-3: var(--vd-fib-golden-3);
+  --vd-golden-4: var(--vd-fib-golden-4);
+  --vd-golden-5: var(--vd-fib-golden-5);
+  --vd-golden-6: var(--vd-fib-golden-6);
+  --vd-golden-7: var(--vd-fib-golden-7);
+  --vd-golden-8: var(--vd-fib-golden-8);
+}
+
+[data-palette="open-color"] {
+  --vd-gray-0: var(--vd-oc-gray-0);
+  --vd-gray-1: var(--vd-oc-gray-1);
+  --vd-gray-2: var(--vd-oc-gray-2);
+  --vd-gray-3: var(--vd-oc-gray-3);
+  --vd-gray-4: var(--vd-oc-gray-4);
+  --vd-gray-5: var(--vd-oc-gray-5);
+  --vd-gray-6: var(--vd-oc-gray-6);
+  --vd-gray-7: var(--vd-oc-gray-7);
+  --vd-gray-8: var(--vd-oc-gray-8);
+  --vd-gray-9: var(--vd-oc-gray-9);
+  --vd-primary-0: var(--vd-oc-primary-0);
+  --vd-primary-1: var(--vd-oc-primary-1);
+  --vd-primary-2: var(--vd-oc-primary-2);
+  --vd-primary-3: var(--vd-oc-primary-3);
+  --vd-primary-4: var(--vd-oc-primary-4);
+  --vd-primary-5: var(--vd-oc-primary-5);
+  --vd-primary-6: var(--vd-oc-primary-6);
+  --vd-primary-7: var(--vd-oc-primary-7);
+  --vd-primary-8: var(--vd-oc-primary-8);
+  --vd-primary-9: var(--vd-oc-primary-9);
+  --vd-secondary-0: var(--vd-oc-secondary-0);
+  --vd-secondary-1: var(--vd-oc-secondary-1);
+  --vd-secondary-2: var(--vd-oc-secondary-2);
+  --vd-secondary-3: var(--vd-oc-secondary-3);
+  --vd-secondary-4: var(--vd-oc-secondary-4);
+  --vd-secondary-5: var(--vd-oc-secondary-5);
+  --vd-secondary-6: var(--vd-oc-secondary-6);
+  --vd-secondary-7: var(--vd-oc-secondary-7);
+  --vd-secondary-8: var(--vd-oc-secondary-8);
+  --vd-secondary-9: var(--vd-oc-secondary-9);
+  --vd-danger-0: var(--vd-oc-danger-0);
+  --vd-danger-1: var(--vd-oc-danger-1);
+  --vd-danger-2: var(--vd-oc-danger-2);
+  --vd-danger-3: var(--vd-oc-danger-3);
+  --vd-danger-4: var(--vd-oc-danger-4);
+  --vd-danger-5: var(--vd-oc-danger-5);
+  --vd-danger-6: var(--vd-oc-danger-6);
+  --vd-danger-7: var(--vd-oc-danger-7);
+  --vd-danger-8: var(--vd-oc-danger-8);
+  --vd-danger-9: var(--vd-oc-danger-9);
+  --vd-error-0: var(--vd-oc-error-0);
+  --vd-error-1: var(--vd-oc-error-1);
+  --vd-error-2: var(--vd-oc-error-2);
+  --vd-error-3: var(--vd-oc-error-3);
+  --vd-error-4: var(--vd-oc-error-4);
+  --vd-error-5: var(--vd-oc-error-5);
+  --vd-error-6: var(--vd-oc-error-6);
+  --vd-error-7: var(--vd-oc-error-7);
+  --vd-error-8: var(--vd-oc-error-8);
+  --vd-error-9: var(--vd-oc-error-9);
+  --vd-success-0: var(--vd-oc-success-0);
+  --vd-success-1: var(--vd-oc-success-1);
+  --vd-success-2: var(--vd-oc-success-2);
+  --vd-success-3: var(--vd-oc-success-3);
+  --vd-success-4: var(--vd-oc-success-4);
+  --vd-success-5: var(--vd-oc-success-5);
+  --vd-success-6: var(--vd-oc-success-6);
+  --vd-success-7: var(--vd-oc-success-7);
+  --vd-success-8: var(--vd-oc-success-8);
+  --vd-success-9: var(--vd-oc-success-9);
+  --vd-warning-0: var(--vd-oc-warning-0);
+  --vd-warning-1: var(--vd-oc-warning-1);
+  --vd-warning-2: var(--vd-oc-warning-2);
+  --vd-warning-3: var(--vd-oc-warning-3);
+  --vd-warning-4: var(--vd-oc-warning-4);
+  --vd-warning-5: var(--vd-oc-warning-5);
+  --vd-warning-6: var(--vd-oc-warning-6);
+  --vd-warning-7: var(--vd-oc-warning-7);
+  --vd-warning-8: var(--vd-oc-warning-8);
+  --vd-warning-9: var(--vd-oc-warning-9);
+  --vd-info-0: var(--vd-oc-info-0);
+  --vd-info-1: var(--vd-oc-info-1);
+  --vd-info-2: var(--vd-oc-info-2);
+  --vd-info-3: var(--vd-oc-info-3);
+  --vd-info-4: var(--vd-oc-info-4);
+  --vd-info-5: var(--vd-oc-info-5);
+  --vd-info-6: var(--vd-oc-info-6);
+  --vd-info-7: var(--vd-oc-info-7);
+  --vd-info-8: var(--vd-oc-info-8);
+  --vd-info-9: var(--vd-oc-info-9);
+  --vd-red-0: var(--vd-oc-red-0);
+  --vd-red-1: var(--vd-oc-red-1);
+  --vd-red-2: var(--vd-oc-red-2);
+  --vd-red-3: var(--vd-oc-red-3);
+  --vd-red-4: var(--vd-oc-red-4);
+  --vd-red-5: var(--vd-oc-red-5);
+  --vd-red-6: var(--vd-oc-red-6);
+  --vd-red-7: var(--vd-oc-red-7);
+  --vd-red-8: var(--vd-oc-red-8);
+  --vd-red-9: var(--vd-oc-red-9);
+  --vd-orange-0: var(--vd-oc-orange-0);
+  --vd-orange-1: var(--vd-oc-orange-1);
+  --vd-orange-2: var(--vd-oc-orange-2);
+  --vd-orange-3: var(--vd-oc-orange-3);
+  --vd-orange-4: var(--vd-oc-orange-4);
+  --vd-orange-5: var(--vd-oc-orange-5);
+  --vd-orange-6: var(--vd-oc-orange-6);
+  --vd-orange-7: var(--vd-oc-orange-7);
+  --vd-orange-8: var(--vd-oc-orange-8);
+  --vd-orange-9: var(--vd-oc-orange-9);
+  --vd-yellow-0: var(--vd-oc-yellow-0);
+  --vd-yellow-1: var(--vd-oc-yellow-1);
+  --vd-yellow-2: var(--vd-oc-yellow-2);
+  --vd-yellow-3: var(--vd-oc-yellow-3);
+  --vd-yellow-4: var(--vd-oc-yellow-4);
+  --vd-yellow-5: var(--vd-oc-yellow-5);
+  --vd-yellow-6: var(--vd-oc-yellow-6);
+  --vd-yellow-7: var(--vd-oc-yellow-7);
+  --vd-yellow-8: var(--vd-oc-yellow-8);
+  --vd-yellow-9: var(--vd-oc-yellow-9);
+  --vd-lime-0: var(--vd-oc-lime-0);
+  --vd-lime-1: var(--vd-oc-lime-1);
+  --vd-lime-2: var(--vd-oc-lime-2);
+  --vd-lime-3: var(--vd-oc-lime-3);
+  --vd-lime-4: var(--vd-oc-lime-4);
+  --vd-lime-5: var(--vd-oc-lime-5);
+  --vd-lime-6: var(--vd-oc-lime-6);
+  --vd-lime-7: var(--vd-oc-lime-7);
+  --vd-lime-8: var(--vd-oc-lime-8);
+  --vd-lime-9: var(--vd-oc-lime-9);
+  --vd-green-0: var(--vd-oc-green-0);
+  --vd-green-1: var(--vd-oc-green-1);
+  --vd-green-2: var(--vd-oc-green-2);
+  --vd-green-3: var(--vd-oc-green-3);
+  --vd-green-4: var(--vd-oc-green-4);
+  --vd-green-5: var(--vd-oc-green-5);
+  --vd-green-6: var(--vd-oc-green-6);
+  --vd-green-7: var(--vd-oc-green-7);
+  --vd-green-8: var(--vd-oc-green-8);
+  --vd-green-9: var(--vd-oc-green-9);
+  --vd-teal-0: var(--vd-oc-teal-0);
+  --vd-teal-1: var(--vd-oc-teal-1);
+  --vd-teal-2: var(--vd-oc-teal-2);
+  --vd-teal-3: var(--vd-oc-teal-3);
+  --vd-teal-4: var(--vd-oc-teal-4);
+  --vd-teal-5: var(--vd-oc-teal-5);
+  --vd-teal-6: var(--vd-oc-teal-6);
+  --vd-teal-7: var(--vd-oc-teal-7);
+  --vd-teal-8: var(--vd-oc-teal-8);
+  --vd-teal-9: var(--vd-oc-teal-9);
+  --vd-cyan-0: var(--vd-oc-cyan-0);
+  --vd-cyan-1: var(--vd-oc-cyan-1);
+  --vd-cyan-2: var(--vd-oc-cyan-2);
+  --vd-cyan-3: var(--vd-oc-cyan-3);
+  --vd-cyan-4: var(--vd-oc-cyan-4);
+  --vd-cyan-5: var(--vd-oc-cyan-5);
+  --vd-cyan-6: var(--vd-oc-cyan-6);
+  --vd-cyan-7: var(--vd-oc-cyan-7);
+  --vd-cyan-8: var(--vd-oc-cyan-8);
+  --vd-cyan-9: var(--vd-oc-cyan-9);
+  --vd-blue-0: var(--vd-oc-blue-0);
+  --vd-blue-1: var(--vd-oc-blue-1);
+  --vd-blue-2: var(--vd-oc-blue-2);
+  --vd-blue-3: var(--vd-oc-blue-3);
+  --vd-blue-4: var(--vd-oc-blue-4);
+  --vd-blue-5: var(--vd-oc-blue-5);
+  --vd-blue-6: var(--vd-oc-blue-6);
+  --vd-blue-7: var(--vd-oc-blue-7);
+  --vd-blue-8: var(--vd-oc-blue-8);
+  --vd-blue-9: var(--vd-oc-blue-9);
+  --vd-indigo-0: var(--vd-oc-indigo-0);
+  --vd-indigo-1: var(--vd-oc-indigo-1);
+  --vd-indigo-2: var(--vd-oc-indigo-2);
+  --vd-indigo-3: var(--vd-oc-indigo-3);
+  --vd-indigo-4: var(--vd-oc-indigo-4);
+  --vd-indigo-5: var(--vd-oc-indigo-5);
+  --vd-indigo-6: var(--vd-oc-indigo-6);
+  --vd-indigo-7: var(--vd-oc-indigo-7);
+  --vd-indigo-8: var(--vd-oc-indigo-8);
+  --vd-indigo-9: var(--vd-oc-indigo-9);
+  --vd-violet-0: var(--vd-oc-violet-0);
+  --vd-violet-1: var(--vd-oc-violet-1);
+  --vd-violet-2: var(--vd-oc-violet-2);
+  --vd-violet-3: var(--vd-oc-violet-3);
+  --vd-violet-4: var(--vd-oc-violet-4);
+  --vd-violet-5: var(--vd-oc-violet-5);
+  --vd-violet-6: var(--vd-oc-violet-6);
+  --vd-violet-7: var(--vd-oc-violet-7);
+  --vd-violet-8: var(--vd-oc-violet-8);
+  --vd-violet-9: var(--vd-oc-violet-9);
+  --vd-grape-0: var(--vd-oc-grape-0);
+  --vd-grape-1: var(--vd-oc-grape-1);
+  --vd-grape-2: var(--vd-oc-grape-2);
+  --vd-grape-3: var(--vd-oc-grape-3);
+  --vd-grape-4: var(--vd-oc-grape-4);
+  --vd-grape-5: var(--vd-oc-grape-5);
+  --vd-grape-6: var(--vd-oc-grape-6);
+  --vd-grape-7: var(--vd-oc-grape-7);
+  --vd-grape-8: var(--vd-oc-grape-8);
+  --vd-grape-9: var(--vd-oc-grape-9);
+  --vd-pink-0: var(--vd-oc-pink-0);
+  --vd-pink-1: var(--vd-oc-pink-1);
+  --vd-pink-2: var(--vd-oc-pink-2);
+  --vd-pink-3: var(--vd-oc-pink-3);
+  --vd-pink-4: var(--vd-oc-pink-4);
+  --vd-pink-5: var(--vd-oc-pink-5);
+  --vd-pink-6: var(--vd-oc-pink-6);
+  --vd-pink-7: var(--vd-oc-pink-7);
+  --vd-pink-8: var(--vd-oc-pink-8);
+  --vd-pink-9: var(--vd-oc-pink-9);
+  --vd-slate-0: var(--vd-oc-slate-0);
+  --vd-slate-1: var(--vd-oc-slate-1);
+  --vd-slate-2: var(--vd-oc-slate-2);
+  --vd-slate-3: var(--vd-oc-slate-3);
+  --vd-slate-4: var(--vd-oc-slate-4);
+  --vd-slate-5: var(--vd-oc-slate-5);
+  --vd-slate-6: var(--vd-oc-slate-6);
+  --vd-slate-7: var(--vd-oc-slate-7);
+  --vd-slate-8: var(--vd-oc-slate-8);
+  --vd-slate-9: var(--vd-oc-slate-9);
+  --vd-charcoal-0: var(--vd-oc-charcoal-0);
+  --vd-charcoal-1: var(--vd-oc-charcoal-1);
+  --vd-charcoal-2: var(--vd-oc-charcoal-2);
+  --vd-charcoal-3: var(--vd-oc-charcoal-3);
+  --vd-charcoal-4: var(--vd-oc-charcoal-4);
+  --vd-charcoal-5: var(--vd-oc-charcoal-5);
+  --vd-charcoal-6: var(--vd-oc-charcoal-6);
+  --vd-charcoal-7: var(--vd-oc-charcoal-7);
+  --vd-charcoal-8: var(--vd-oc-charcoal-8);
+  --vd-charcoal-9: var(--vd-oc-charcoal-9);
+  --vd-zinc-0: var(--vd-oc-zinc-0);
+  --vd-zinc-1: var(--vd-oc-zinc-1);
+  --vd-zinc-2: var(--vd-oc-zinc-2);
+  --vd-zinc-3: var(--vd-oc-zinc-3);
+  --vd-zinc-4: var(--vd-oc-zinc-4);
+  --vd-zinc-5: var(--vd-oc-zinc-5);
+  --vd-zinc-6: var(--vd-oc-zinc-6);
+  --vd-zinc-7: var(--vd-oc-zinc-7);
+  --vd-zinc-8: var(--vd-oc-zinc-8);
+  --vd-zinc-9: var(--vd-oc-zinc-9);
+  --vd-neutral-0: var(--vd-oc-neutral-0);
+  --vd-neutral-1: var(--vd-oc-neutral-1);
+  --vd-neutral-2: var(--vd-oc-neutral-2);
+  --vd-neutral-3: var(--vd-oc-neutral-3);
+  --vd-neutral-4: var(--vd-oc-neutral-4);
+  --vd-neutral-5: var(--vd-oc-neutral-5);
+  --vd-neutral-6: var(--vd-oc-neutral-6);
+  --vd-neutral-7: var(--vd-oc-neutral-7);
+  --vd-neutral-8: var(--vd-oc-neutral-8);
+  --vd-neutral-9: var(--vd-oc-neutral-9);
+  --vd-stone-0: var(--vd-oc-stone-0);
+  --vd-stone-1: var(--vd-oc-stone-1);
+  --vd-stone-2: var(--vd-oc-stone-2);
+  --vd-stone-3: var(--vd-oc-stone-3);
+  --vd-stone-4: var(--vd-oc-stone-4);
+  --vd-stone-5: var(--vd-oc-stone-5);
+  --vd-stone-6: var(--vd-oc-stone-6);
+  --vd-stone-7: var(--vd-oc-stone-7);
+  --vd-stone-8: var(--vd-oc-stone-8);
+  --vd-stone-9: var(--vd-oc-stone-9);
+}
+
 @font-face {
   font-family: Inter;
   src: url("./fonts/inter/inter-regular.woff2") format("woff2");
@@ -1494,21 +2777,21 @@ pre code {
   --vd-color-primary-hover: var(--vd-primary-6);
   --vd-color-primary-active: var(--vd-primary-7);
   --vd-color-primary-rgb: 92, 124, 250;
-  --vd-color-primary-alpha-5: #5c7cfa0d;
-  --vd-color-primary-alpha-08: #5c7cfa14;
-  --vd-color-primary-alpha-10: #5c7cfa1a;
-  --vd-color-primary-alpha-15: #5c7cfa26;
-  --vd-color-primary-alpha-20: #5c7cfa33;
-  --vd-color-primary-alpha-30: #5c7cfa4d;
-  --vd-color-primary-alpha-40: #5c7cfa66;
-  --vd-color-primary-alpha-50: #5c7cfa80;
+  --vd-color-primary-alpha-5: color-mix(in srgb, var(--vd-color-primary) 5%, transparent);
+  --vd-color-primary-alpha-08: color-mix(in srgb, var(--vd-color-primary) 8%, transparent);
+  --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 10%, transparent);
+  --vd-color-primary-alpha-15: color-mix(in srgb, var(--vd-color-primary) 15%, transparent);
+  --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 20%, transparent);
+  --vd-color-primary-alpha-30: color-mix(in srgb, var(--vd-color-primary) 30%, transparent);
+  --vd-color-primary-alpha-40: color-mix(in srgb, var(--vd-color-primary) 40%, transparent);
+  --vd-color-primary-alpha-50: color-mix(in srgb, var(--vd-color-primary) 50%, transparent);
   --vd-color-secondary: var(--vd-secondary-5);
   --vd-color-secondary-light: var(--vd-secondary-3);
   --vd-color-secondary-dark: var(--vd-secondary-7);
   --vd-color-secondary-hover: var(--vd-secondary-6);
   --vd-color-secondary-active: var(--vd-secondary-7);
-  --vd-color-secondary-alpha-10: #20c9971a;
-  --vd-color-secondary-alpha-20: #20c99733;
+  --vd-color-secondary-alpha-10: color-mix(in srgb, var(--vd-color-secondary) 10%, transparent);
+  --vd-color-secondary-alpha-20: color-mix(in srgb, var(--vd-color-secondary) 20%, transparent);
   --vd-color-accent: var(--vd-color-primary);
   --vd-color-accent-light: var(--vd-color-primary-light);
   --vd-color-accent-dark: var(--vd-color-primary-dark);
@@ -1518,25 +2801,25 @@ pre code {
   --vd-color-success-hover: var(--vd-success-7);
   --vd-color-success-active: var(--vd-success-8);
   --vd-color-success-rgb: 64, 192, 87;
-  --vd-color-success-alpha-10: #40c0571a;
-  --vd-color-success-alpha-20: #40c05733;
+  --vd-color-success-alpha-10: color-mix(in srgb, var(--vd-color-success) 10%, transparent);
+  --vd-color-success-alpha-20: color-mix(in srgb, var(--vd-color-success) 20%, transparent);
   --vd-color-warning: var(--vd-warning-6);
   --vd-color-warning-light: var(--vd-warning-4);
   --vd-color-warning-dark: var(--vd-warning-7);
   --vd-color-warning-hover: var(--vd-warning-7);
   --vd-color-warning-active: var(--vd-warning-8);
   --vd-color-warning-rgb: 250, 176, 5;
-  --vd-color-warning-alpha-10: #fab0051a;
-  --vd-color-warning-alpha-20: #fab00533;
-  --vd-color-warning-alpha-30: #fab0054d;
+  --vd-color-warning-alpha-10: color-mix(in srgb, var(--vd-color-warning) 10%, transparent);
+  --vd-color-warning-alpha-20: color-mix(in srgb, var(--vd-color-warning) 20%, transparent);
+  --vd-color-warning-alpha-30: color-mix(in srgb, var(--vd-color-warning) 30%, transparent);
   --vd-color-error: var(--vd-danger-6);
   --vd-color-error-light: var(--vd-danger-4);
   --vd-color-error-dark: var(--vd-danger-7);
   --vd-color-error-hover: var(--vd-danger-7);
   --vd-color-error-active: var(--vd-danger-8);
   --vd-color-error-rgb: 250, 82, 82;
-  --vd-color-error-alpha-10: #fa52521a;
-  --vd-color-error-alpha-20: #fa525233;
+  --vd-color-error-alpha-10: color-mix(in srgb, var(--vd-color-error) 10%, transparent);
+  --vd-color-error-alpha-20: color-mix(in srgb, var(--vd-color-error) 20%, transparent);
   --vd-color-danger: var(--vd-color-error);
   --vd-color-danger-light: var(--vd-color-error-light);
   --vd-color-danger-dark: var(--vd-color-error-dark);
@@ -1550,8 +2833,8 @@ pre code {
   --vd-color-info-hover: var(--vd-info-7);
   --vd-color-info-active: var(--vd-info-8);
   --vd-color-info-rgb: 34, 139, 230;
-  --vd-color-info-alpha-10: #228be61a;
-  --vd-color-info-alpha-20: #228be633;
+  --vd-color-info-alpha-10: color-mix(in srgb, var(--vd-color-info) 10%, transparent);
+  --vd-color-info-alpha-20: color-mix(in srgb, var(--vd-color-info) 20%, transparent);
   --vd-color-white: #fff;
   --vd-color-black: #000;
   --vd-color-gray-50: var(--vd-gray-0);
@@ -5778,6 +7061,22 @@ pre code {
   --vd-radius-fib-21: 2.625rem;
 }
 
+.vd-muted {
+  color: var(--vd-text-muted);
+}
+
+.vd-visually-hidden {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  position: absolute !important;
+}
+
 :root {
   --vd-shadow-sm: 0 1px 2px 0 #0000000d;
   --vd-shadow: 0 2px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
@@ -6516,6 +7815,14 @@ pre code {
   margin-bottom: 1rem;
 }
 
+.vd-table-caption {
+  padding: var(--vd-table-padding-y) var(--vd-table-padding-x);
+  color: var(--vd-text-muted);
+  font-size: var(--vd-font-size-sm);
+  text-align: left;
+  caption-side: top;
+}
+
 .vd-table th, .vd-table td, .table th, .table td {
   padding: var(--vd-table-padding-y) var(--vd-table-padding-x);
   vertical-align: middle;
@@ -8249,6 +9556,39 @@ a.vd-btn, a.vd-btn:hover {
   }
 }
 
+.vd-btn.is-loading:has(.vd-btn-spinner):after {
+  content: none;
+}
+
+.vd-btn-spinner {
+  border: 2px solid var(--vd-color-primary);
+  border-right-color: #0000;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em;
+  margin: -.5em 0 0 -.5em;
+  animation: .6s linear infinite btn-spinner;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.vd-btn-primary .vd-btn-spinner, .vd-btn-secondary .vd-btn-spinner, .vd-btn-success .vd-btn-spinner, .vd-btn-danger .vd-btn-spinner, .vd-btn-error .vd-btn-spinner, .vd-btn-info .vd-btn-spinner {
+  border-color: var(--vd-color-white);
+  border-right-color: #0000;
+}
+
+.vd-btn-warning .vd-btn-spinner {
+  border-color: var(--vd-color-black);
+  border-right-color: #0000;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-btn-spinner {
+    animation-duration: 1.2s;
+  }
+}
+
 :root {
   --vd-input-padding-x-sm: .5rem;
   --vd-input-padding-y-sm: .3125rem;
@@ -8366,11 +9706,11 @@ a.vd-btn, a.vd-btn:hover {
   border-radius: var(--vd-input-border-radius-lg);
 }
 
-.vd-input-error, input.vd-input-error, .vd-input.is-error, input.is-error, .vd-input-invalid, input.vd-input-invalid {
+.vd-input-error, input.vd-input-error, .vd-input-danger, input.vd-input-danger, .vd-input.is-error, input.is-error, .vd-input-invalid, input.vd-input-invalid {
   border-color: var(--vd-color-error);
 }
 
-.vd-input-error:focus, input.vd-input-error:focus, .vd-input.is-error:focus, input.is-error:focus, .vd-input-invalid:focus, input.vd-input-invalid:focus {
+.vd-input-error:focus, input.vd-input-error:focus, .vd-input-danger:focus, input.vd-input-danger:focus, .vd-input.is-error:focus, input.is-error:focus, .vd-input-invalid:focus, input.vd-input-invalid:focus {
   border-color: var(--vd-color-error);
   box-shadow: 0 0 0 3px var(--vd-color-error-alpha-10);
 }
@@ -8402,7 +9742,7 @@ a.vd-btn, a.vd-btn:hover {
   box-shadow: 0 0 0 3px var(--vd-color-success-alpha-10);
 }
 
-.label, label {
+.label, .vd-form-label, label {
   font-size: var(--vd-font-size-sm);
   font-weight: var(--vd-font-weight-medium);
   color: var(--vd-text-primary);
@@ -8416,6 +9756,11 @@ a.vd-btn, a.vd-btn:hover {
   color: var(--vd-color-error);
 }
 
+.vd-form-radio-icon {
+  vertical-align: -.125em;
+  margin-right: .375rem;
+}
+
 .label-sm, label.label-sm {
   font-size: var(--vd-font-size-xs);
 }
@@ -9859,6 +11204,231 @@ a.vd-card:active {
   }
 }
 
+.vd-card-interactive {
+  cursor: pointer;
+  transition: transform .2s, box-shadow .2s;
+}
+
+.vd-card-interactive:hover {
+  box-shadow: var(--vd-shadow-lg);
+  transform: translateY(-2px) translateZ(0);
+}
+
+.vd-card-interactive:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-card-interactive {
+    transition: none;
+  }
+
+  .vd-card-interactive:hover {
+    transform: none;
+  }
+}
+
+:root {
+  --vd-accordion-border-color: var(--vd-border-color);
+  --vd-accordion-header-bg: transparent;
+  --vd-accordion-header-bg-hover: var(--vd-bg-secondary);
+  --vd-accordion-padding-x: 1.3125rem;
+  --vd-accordion-padding-y: .8125rem;
+}
+
+.vd-accordion {
+  border: 1px solid var(--vd-accordion-border-color);
+  border-radius: var(--vd-btn-border-radius);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+}
+
+.vd-accordion-item {
+  border-top: 1px solid var(--vd-accordion-border-color);
+}
+
+.vd-accordion-item:first-child {
+  border-top: none;
+}
+
+.vd-accordion-header {
+  width: 100%;
+  padding: var(--vd-accordion-padding-y) var(--vd-accordion-padding-x);
+  background: var(--vd-accordion-header-bg);
+  cursor: pointer;
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-medium);
+  color: var(--vd-text-primary);
+  text-align: left;
+  border: none;
+  justify-content: space-between;
+  align-items: center;
+  gap: .75rem;
+  transition: background-color .15s;
+  display: flex;
+}
+
+.vd-accordion-header:hover {
+  background: var(--vd-accordion-header-bg-hover);
+}
+
+.vd-accordion-header:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+  outline-offset: -2px;
+}
+
+.vd-accordion-icon {
+  color: var(--vd-text-secondary);
+  flex-shrink: 0;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.vd-accordion-panel {
+  padding: var(--vd-accordion-padding-y) var(--vd-accordion-padding-x);
+  color: var(--vd-text-primary);
+  border-top: 1px solid var(--vd-accordion-border-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-accordion-header {
+    transition: none;
+  }
+}
+
+:root {
+  --vd-separator-color: var(--vd-border-color);
+  --vd-separator-spacing: 1.3125rem;
+}
+
+.vd-separator {
+  width: 100%;
+  height: 0;
+  margin: var(--vd-separator-spacing) 0;
+  border: none;
+  border-top: 1px solid var(--vd-separator-color);
+}
+
+.vd-separator-vertical {
+  width: 0;
+  height: auto;
+  min-height: 1em;
+  margin: 0 var(--vd-separator-spacing);
+  border-top: none;
+  border-left: 1px solid var(--vd-separator-color);
+  align-self: stretch;
+}
+
+.vd-separator-labeled {
+  width: 100%;
+  margin: var(--vd-separator-spacing) 0;
+  color: var(--vd-text-muted);
+  font-size: var(--vd-font-size-sm);
+  border: none;
+  align-items: center;
+  gap: .75rem;
+  display: flex;
+}
+
+.vd-separator-labeled:before, .vd-separator-labeled:after {
+  content: "";
+  border-top: 1px solid var(--vd-separator-color);
+  flex: auto;
+}
+
+.vd-separator-label {
+  flex-shrink: 0;
+}
+
+:root {
+  --vd-slider-track-height: .375rem;
+  --vd-slider-track-bg: var(--vd-bg-tertiary, #e9ecef);
+  --vd-slider-thumb-size: 1.125rem;
+  --vd-slider-thumb-bg: var(--vd-color-primary);
+}
+
+.vd-slider-field {
+  flex-direction: column;
+  gap: .375rem;
+  width: 100%;
+  display: flex;
+}
+
+.vd-slider-row {
+  align-items: center;
+  gap: .75rem;
+  display: flex;
+}
+
+.vd-slider-value {
+  text-align: right;
+  min-width: 3ch;
+  font-size: var(--vd-font-size-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--vd-text-secondary);
+  flex-shrink: 0;
+}
+
+.vd-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: var(--vd-slider-track-height);
+  border-radius: calc(var(--vd-slider-track-height) / 2);
+  background-color: var(--vd-slider-track-bg);
+  cursor: pointer;
+  outline-offset: 4px;
+}
+
+.vd-slider:disabled {
+  opacity: .6;
+  cursor: not-allowed;
+}
+
+.vd-slider:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+}
+
+.vd-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--vd-slider-thumb-size);
+  height: var(--vd-slider-thumb-size);
+  border: 2px solid var(--vd-color-white);
+  background-color: var(--vd-slider-thumb-bg);
+  box-shadow: var(--vd-shadow-sm);
+  border-radius: 50%;
+  transition: transform .1s;
+}
+
+.vd-slider::-webkit-slider-thumb:active {
+  transform: scale(1.15);
+}
+
+.vd-slider::-moz-range-thumb {
+  width: var(--vd-slider-thumb-size);
+  height: var(--vd-slider-thumb-size);
+  border: 2px solid var(--vd-color-white);
+  background-color: var(--vd-slider-thumb-bg);
+  box-shadow: var(--vd-shadow-sm);
+  border-radius: 50%;
+}
+
+.vd-slider::-moz-range-track {
+  height: var(--vd-slider-track-height);
+  border-radius: calc(var(--vd-slider-track-height) / 2);
+  background-color: var(--vd-slider-track-bg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-slider::-webkit-slider-thumb {
+    transition: none;
+  }
+}
+
 .vd-expanding-cards {
   flex-direction: row;
   align-items: stretch;
@@ -10172,6 +11742,15 @@ a.vd-card:active {
   border-bottom-color: #0000;
 }
 
+.vd-navbar-glass.vd-navbar-scrolled {
+  --vd-glass-blur: 80px;
+  --vd-glass-saturate: 2.6;
+}
+
+.vd-navbar-fixed.vd-navbar-glass.vd-navbar-scrolled, .vd-navbar-fixed-top.vd-navbar-glass.vd-navbar-scrolled {
+  box-shadow: var(--vd-glass-shadow);
+}
+
 .vd-navbar-container {
   width: 100%;
   max-width: var(--vd-container-max-width);
@@ -12090,38 +13669,100 @@ a.vd-card:active {
   overflow: hidden;
 }
 
-:root {
-  --vd-badge-padding-y: .3em;
-  --vd-badge-padding-x: .48em;
-  --vd-badge-padding-y-sm: .18em;
-  --vd-badge-padding-x-sm: .3em;
-  --vd-badge-padding-y-lg: .42em;
-  --vd-badge-padding-x-lg: .65em;
-  --vd-badge-font-size: .8125em;
-  --vd-badge-font-size-sm: .7em;
-  --vd-badge-font-size-lg: .9375em;
-  --vd-badge-font-weight: var(--vd-font-weight-semibold);
-  --vd-badge-line-height: 1;
-  --vd-badge-border-radius: var(--vd-btn-border-radius-sm);
-  --vd-badge-pill-border-radius: 50rem;
+.vd-modal.vd-modal-open {
+  opacity: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
 }
 
-[data-theme="dark"] .vd-badge-light {
-  background-color: var(--vd-color-gray-700);
-  color: var(--vd-color-gray-100);
+.vd-modal-open .vd-modal-backdrop {
+  opacity: 1;
+  pointer-events: auto;
 }
 
-[data-theme="dark"] .vd-badge-outlined.vd-badge-light {
-  color: var(--vd-color-gray-300);
-  border-color: var(--vd-color-gray-500);
+.vd-modal-panel {
+  width: min(calc(100% - 3.5rem), var(--vd-modal-dialog-max-width));
+  max-width: var(--vd-modal-dialog-max-width);
+  pointer-events: auto;
+  background-color: var(--vd-modal-bg);
+  border: 1px solid var(--vd-modal-border-color);
+  border-radius: var(--vd-btn-border-radius-lg);
+  box-shadow: var(--vd-shadow-2xl);
+  transition: var(--vd-modal-dialog-transition);
+  z-index: 1060;
+  background-clip: padding-box;
+  outline: 0;
+  flex-direction: column;
+  margin: 1.75rem auto;
+  display: flex;
+  position: relative;
+  transform: scale(.95);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) .vd-badge-light {
-    background-color: var(--vd-color-gray-700);
-    color: var(--vd-color-gray-100);
-  }
-
+.vd-modal.vd-modal-open .vd-modal-panel {
+  transform: scale(1);
+}
+
+.vd-modal-panel-sm {
+  --vd-modal-dialog-max-width: var(--vd-modal-width-sm);
+}
+
+.vd-modal-panel-md {
+  --vd-modal-dialog-max-width: var(--vd-modal-width);
+}
+
+.vd-modal-panel-lg {
+  --vd-modal-dialog-max-width: var(--vd-modal-width-lg);
+}
+
+.vd-modal-glass .vd-modal-panel {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
+@media (width <= 575.98px) {
+  .vd-modal-panel {
+    width: calc(100% - 1rem);
+    max-width: calc(100% - 1rem);
+    margin: .5rem;
+  }
+}
+
+:root {
+  --vd-badge-padding-y: .3em;
+  --vd-badge-padding-x: .48em;
+  --vd-badge-padding-y-sm: .18em;
+  --vd-badge-padding-x-sm: .3em;
+  --vd-badge-padding-y-lg: .42em;
+  --vd-badge-padding-x-lg: .65em;
+  --vd-badge-font-size: .8125em;
+  --vd-badge-font-size-sm: .7em;
+  --vd-badge-font-size-lg: .9375em;
+  --vd-badge-font-weight: var(--vd-font-weight-semibold);
+  --vd-badge-line-height: 1;
+  --vd-badge-border-radius: var(--vd-btn-border-radius-sm);
+  --vd-badge-pill-border-radius: 50rem;
+}
+
+[data-theme="dark"] .vd-badge-light {
+  background-color: var(--vd-color-gray-700);
+  color: var(--vd-color-gray-100);
+}
+
+[data-theme="dark"] .vd-badge-outlined.vd-badge-light {
+  color: var(--vd-color-gray-300);
+  border-color: var(--vd-color-gray-500);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .vd-badge-light {
+    background-color: var(--vd-color-gray-700);
+    color: var(--vd-color-gray-100);
+  }
+
   :root:not([data-theme]) .vd-badge-outlined.vd-badge-light {
     color: var(--vd-color-gray-300);
     border-color: var(--vd-color-gray-500);
@@ -12162,7 +13803,7 @@ a.vd-card:active {
   color: var(--vd-color-gray-900);
 }
 
-.vd-badge-error {
+.vd-badge-error, .vd-badge-danger {
   background-color: var(--vd-color-error);
   color: var(--vd-color-white);
 }
@@ -12515,6 +14156,21 @@ h1 .vd-badge, h2 .vd-badge, h3 .vd-badge, h4 .vd-badge, h5 .vd-badge, h6 .vd-bad
   }
 }
 
+.vd-collection-list {
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.vd-collection-text-secondary {
+  font-size: var(--vd-font-size-sm);
+  color: var(--vd-text-secondary);
+  margin-top: .125rem;
+  display: block;
+}
+
 :root {
   --vd-pagination-bg: var(--vd-color-white);
   --vd-pagination-border-color: var(--vd-border-color);
@@ -13073,6 +14729,31 @@ h1 .vd-badge, h2 .vd-badge, h3 .vd-badge, h4 .vd-badge, h5 .vd-badge, h6 .vd-bad
   }
 }
 
+.vd-preloader:has(.vd-preloader-spinner) {
+  border: none;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  animation: none;
+  display: inline-flex;
+}
+
+.vd-preloader-spinner {
+  width: var(--vd-spinner-size, 2rem);
+  height: var(--vd-spinner-size, 2rem);
+  border: var(--vd-spinner-border-width, 3px) solid var(--vd-border-color, #e9ecef);
+  border-top-color: var(--vd-spinner-color, var(--vd-color-primary));
+  animation: spinner-rotate var(--vd-spinner-speed, .65s) linear infinite;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-preloader-spinner {
+    animation-duration: 1.5s;
+  }
+}
+
 :root {
   --vd-alert-padding-x: 1.3125rem;
   --vd-alert-padding-y: .8125rem;
@@ -13153,6 +14834,22 @@ h1 .vd-badge, h2 .vd-badge, h3 .vd-badge, h4 .vd-badge, h5 .vd-badge, h6 .vd-bad
   color: var(--vd-alert-info-text);
 }
 
+.vd-alert-secondary {
+  background-color: var(--vd-color-secondary-alpha-10);
+  border-color: var(--vd-color-secondary);
+  color: var(--vd-color-secondary-dark);
+}
+
+[data-theme="dark"] .vd-alert-secondary {
+  color: var(--vd-color-secondary-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .vd-alert-secondary {
+    color: var(--vd-color-secondary-light);
+  }
+}
+
 .vd-alert-icon {
   align-items: flex-start;
   gap: .75rem;
@@ -13268,6 +14965,48 @@ h1 .vd-badge, h2 .vd-badge, h3 .vd-badge, h4 .vd-badge, h5 .vd-badge, h6 .vd-bad
   }
 }
 
+.vd-alert:has(.vd-alert-body) {
+  align-items: flex-start;
+  gap: .75rem;
+  display: flex;
+}
+
+.vd-alert:has(.vd-alert-body) > .vd-alert-icon {
+  flex-shrink: 0;
+}
+
+.vd-alert-body {
+  flex: auto;
+  min-width: 0;
+}
+
+.vd-alert-dismiss {
+  cursor: pointer;
+  opacity: .5;
+  color: inherit;
+  background: none;
+  border: none;
+  flex-shrink: 0;
+  padding: 0;
+  line-height: 1;
+  transition: opacity .15s;
+}
+
+.vd-alert-dismiss:hover {
+  opacity: 1;
+}
+
+.vd-alert-dismiss:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-alert-dismiss {
+    transition: none;
+  }
+}
+
 :root {
   --vd-chip-padding-x: .8125rem;
   --vd-chip-padding-y: .3125rem;
@@ -13515,7 +15254,7 @@ h1 .vd-badge, h2 .vd-badge, h3 .vd-badge, h4 .vd-badge, h5 .vd-badge, h6 .vd-bad
   overflow: hidden;
 }
 
-.vd-avatar img {
+.vd-avatar img, .vd-avatar-img {
   object-fit: cover;
   border-radius: inherit;
   width: 100%;
@@ -14009,6 +15748,52 @@ a.vd-avatar:focus-visible, button.vd-avatar:focus-visible {
   }
 }
 
+.vd-skeleton-lines {
+  flex-direction: column;
+  gap: .5rem;
+  display: flex;
+}
+
+.vd-skeleton-lines .vd-skeleton-text {
+  margin-bottom: 0;
+}
+
+.vd-skeleton-text-short {
+  width: 60%;
+}
+
+.vd-skeleton-card-header {
+  width: 100%;
+  height: 8rem;
+  margin-bottom: .8125rem;
+}
+
+.vd-skeleton-card-body {
+  flex-direction: column;
+  gap: .5rem;
+  display: flex;
+}
+
+.vd-skeleton-card-body .vd-skeleton-text {
+  margin-bottom: 0;
+}
+
+.vd-skeleton-card-sm .vd-skeleton-card-header {
+  height: 5rem;
+}
+
+.vd-skeleton-card-md .vd-skeleton-card-header {
+  height: 8rem;
+}
+
+.vd-skeleton-card-lg .vd-skeleton-card-header {
+  height: 12rem;
+}
+
+.vd-skeleton-card-xl .vd-skeleton-card-header {
+  height: 16rem;
+}
+
 :root {
   --vd-tab-padding-x: 1.3125rem;
   --vd-tab-padding-y: .8125rem;
@@ -14299,6 +16084,47 @@ a.vd-avatar:focus-visible, button.vd-avatar:focus-visible {
   }
 }
 
+.vd-tab {
+  padding: var(--vd-tab-padding-y) var(--vd-tab-padding-x);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-medium);
+  color: var(--vd-tab-text);
+  border: none;
+  border-bottom: var(--vd-tab-border-width) solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  background: none;
+  align-items: center;
+  gap: .5rem;
+  transition: color .15s, border-color .15s, background-color .15s;
+  display: inline-flex;
+}
+
+.vd-tab:hover {
+  color: var(--vd-tab-text-hover);
+  background-color: var(--vd-tab-bg-hover);
+}
+
+.vd-tab:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+  outline-offset: -2px;
+}
+
+.vd-tab.is-active {
+  color: var(--vd-tab-text-active);
+  border-bottom-color: var(--vd-tab-border-active);
+}
+
+.vd-tab-panels {
+  padding-top: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-tab {
+    transition: none;
+  }
+}
+
 :root {
   --vd-toast-width: 377px;
   --vd-toast-max-width: 90vw;
@@ -15126,6 +16952,25 @@ a.vd-avatar:focus-visible, button.vd-avatar:focus-visible {
   }
 }
 
+.vd-code-snippet-pre {
+  padding: var(--vd-code-padding-y) var(--vd-code-padding-x);
+  -webkit-overflow-scrolling: touch;
+  background-color: var(--vd-code-bg);
+  font-family: var(--vd-font-family-mono, "JetBrains Mono", "Fira Code", "Consolas", monospace);
+  font-size: var(--vd-code-font-size);
+  line-height: var(--vd-code-line-height);
+  color: var(--vd-code-text);
+  margin: 0;
+  overflow-x: auto;
+}
+
+.vd-code-snippet-pre code {
+  font: inherit;
+  color: inherit;
+  white-space: pre;
+  tab-size: 2;
+}
+
 :root {
   --vd-progress-height: 8px;
   --vd-progress-bg: var(--vd-bg-tertiary, #e9ecef);
@@ -15241,6 +17086,45 @@ a.vd-avatar:focus-visible, button.vd-avatar:focus-visible {
   }
 }
 
+.vd-progress:has(.vd-progress-track) {
+  background-color: #0000;
+  height: auto;
+  display: block;
+  overflow: visible;
+}
+
+.vd-progress-track {
+  height: var(--vd-progress-height);
+  background-color: var(--vd-progress-bg);
+  border-radius: var(--vd-progress-border-radius);
+  display: flex;
+  overflow: hidden;
+}
+
+.vd-progress-fill {
+  background-color: var(--vd-progress-bar-bg);
+  border-radius: var(--vd-progress-border-radius);
+  height: 100%;
+  transition: width .4s;
+  display: block;
+}
+
+.vd-progress.is-indeterminate .vd-progress-fill {
+  width: 30%;
+  animation: 1.5s ease-in-out infinite progress-indeterminate;
+}
+
+.vd-progress-label {
+  margin-top: .375rem;
+  display: block;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-progress.is-indeterminate .vd-progress-fill {
+    animation: none;
+  }
+}
+
 :root {
   --vd-spinner-size: 2rem;
   --vd-spinner-border-width: 3px;
@@ -15726,6 +17610,56 @@ body > .vd-theme-customizer-panel.is-open {
   z-index: 1;
 }
 
+.tc-palette-group {
+  gap: 0;
+  display: flex;
+}
+
+.tc-palette-btn {
+  border: 1px solid var(--vd-border-color);
+  color: var(--vd-text-primary);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-medium);
+  cursor: pointer;
+  background: none;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  padding: .5rem;
+  transition: all .15s;
+  display: flex;
+}
+
+.tc-palette-btn:first-child {
+  border-radius: calc(var(--vd-radius-scale, .25) * .5rem) 0 0 calc(var(--vd-radius-scale, .25) * .5rem);
+}
+
+.tc-palette-btn:last-child {
+  border-radius: 0 calc(var(--vd-radius-scale, .25) * .5rem) calc(var(--vd-radius-scale, .25) * .5rem) 0;
+}
+
+.tc-palette-btn:not(:first-child) {
+  margin-left: -1px;
+}
+
+.tc-palette-btn:hover {
+  background-color: var(--vd-bg-secondary);
+  z-index: 1;
+}
+
+.tc-palette-btn:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+  outline-offset: 1px;
+  z-index: 2;
+}
+
+.tc-palette-btn.is-active {
+  background-color: var(--vd-bg-dark);
+  border-color: var(--vd-bg-dark);
+  color: var(--vd-text-inverse);
+  z-index: 1;
+}
+
 .tc-font-select {
   background-color: var(--vd-bg-primary);
   border: 1px solid var(--vd-border-color);
@@ -16110,7 +18044,7 @@ body > .vd-theme-customizer-panel.is-open {
   box-shadow: inset 0 0 0 1px #ffffff1a;
 }
 
-[data-theme="dark"] .customizer-radius-btn.is-active, [data-theme="dark"] .customizer-mode-btn.is-active, [data-theme="dark"] .tc-radius-btn.is-active, [data-theme="dark"] .tc-mode-btn.is-active {
+[data-theme="dark"] .customizer-radius-btn.is-active, [data-theme="dark"] .customizer-mode-btn.is-active, [data-theme="dark"] .tc-radius-btn.is-active, [data-theme="dark"] .tc-palette-btn.is-active, [data-theme="dark"] .tc-mode-btn.is-active {
   background-color: var(--vd-gray-2);
   border-color: var(--vd-gray-2);
   color: var(--vd-gray-9);
@@ -16126,7 +18060,7 @@ body > .vd-theme-customizer-panel.is-open {
     box-shadow: inset 0 0 0 1px #ffffff1a;
   }
 
-  :root:not([data-theme]) .customizer-radius-btn.is-active, :root:not([data-theme]) .customizer-mode-btn.is-active, :root:not([data-theme]) .tc-radius-btn.is-active, :root:not([data-theme]) .tc-mode-btn.is-active {
+  :root:not([data-theme]) .customizer-radius-btn.is-active, :root:not([data-theme]) .customizer-mode-btn.is-active, :root:not([data-theme]) .tc-radius-btn.is-active, :root:not([data-theme]) .tc-palette-btn.is-active, :root:not([data-theme]) .tc-mode-btn.is-active {
     background-color: var(--vd-gray-2);
     border-color: var(--vd-gray-2);
     color: var(--vd-gray-9);
@@ -17512,6 +19446,21 @@ input.vd-doc-search-input {
   }
 }
 
+.vd-flow-controls {
+  justify-content: center;
+  align-items: center;
+  gap: .75rem;
+  margin-top: .8125rem;
+  display: flex;
+}
+
+.vd-flow-position {
+  min-width: 4ch;
+  font-size: var(--vd-font-size-sm);
+  color: var(--vd-text-secondary);
+  text-align: center;
+}
+
 :root {
   --vd-bubble-bg: var(--vd-card-bg, #fff);
   --vd-bubble-text: var(--vd-text-primary, #212529);
@@ -17648,6 +19597,111 @@ input.vd-doc-search-input {
   --vd-bubble-max-width: 34rem;
 }
 
+:root {
+  --vd-popover-bg: var(--vd-card-bg, #fff);
+  --vd-popover-text: var(--vd-text-primary, #212529);
+  --vd-popover-border-color: var(--vd-border-color, #dee2e6);
+  --vd-popover-shadow: 0 .5rem 1.3125rem #0000001f;
+  --vd-popover-padding: .8125rem;
+  --vd-popover-radius: var(--vd-border-radius, .5rem);
+  --vd-popover-max-width: 21rem;
+  --vd-popover-min-width: 8rem;
+  --vd-popover-z-index: 1060;
+  --vd-popover-arrow-size: 8px;
+  --vd-popover-font-size: var(--vd-font-size-sm, .875rem);
+}
+
+[data-theme="dark"] {
+  --vd-popover-bg: var(--vd-card-bg, #2d2d44);
+  --vd-popover-border-color: var(--vd-border-color, #3d3d5c);
+  --vd-popover-shadow: 0 .5rem 1.3125rem #0000004d;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --vd-popover-bg: var(--vd-card-bg, #2d2d44);
+    --vd-popover-border-color: var(--vd-border-color, #3d3d5c);
+    --vd-popover-shadow: 0 .5rem 1.3125rem #0000004d;
+  }
+}
+
+.vd-popover-panel {
+  z-index: var(--vd-popover-z-index);
+  min-width: var(--vd-popover-min-width);
+  max-width: var(--vd-popover-max-width);
+  padding: var(--vd-popover-padding);
+  background: var(--vd-popover-bg);
+  color: var(--vd-popover-text);
+  border: 1px solid var(--vd-popover-border-color);
+  border-radius: var(--vd-popover-radius);
+  box-shadow: var(--vd-popover-shadow);
+  font-size: var(--vd-popover-font-size);
+  animation: .18s ease-out vd-popover-enter;
+  position: absolute;
+}
+
+.vd-popover-panel[hidden] {
+  display: none !important;
+}
+
+.vd-popover-panel:before {
+  content: "";
+  border: var(--vd-popover-arrow-size) solid transparent;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.vd-popover-panel[data-placement="bottom"]:before {
+  border-bottom-color: var(--vd-popover-border-color);
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.vd-popover-panel[data-placement="top"]:before {
+  border-top-color: var(--vd-popover-border-color);
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.vd-popover-panel[data-placement="left"]:before {
+  border-left-color: var(--vd-popover-border-color);
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+}
+
+.vd-popover-panel[data-placement="right"]:before {
+  border-right-color: var(--vd-popover-border-color);
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%);
+}
+
+.vd-popover-sm {
+  --vd-popover-padding: .5rem;
+  --vd-popover-font-size: var(--vd-font-size-xs, .75rem);
+}
+
+.vd-popover-lg {
+  --vd-popover-padding: 1.3125rem;
+  --vd-popover-max-width: 34rem;
+}
+
+@keyframes vd-popover-enter {
+  from {
+    opacity: 0;
+    transform: scale(.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 :root {
   --vd-waypoint-active-color: var(--vd-color-primary, #0d6efd);
   --vd-waypoint-active-bg: transparent;