rotion 0.0.14 → 0.1.0

package/dist/ui/umd/style.css

@@ -1,31 +1,31 @@
-:root{--x1ctp1av:rgb(50, 48, 44, 0.8);--x1hhtl5i:rgb(50, 48, 44, 0.6);--x1khxzqo:1px solid rgb(50, 48, 44, 0.4);--x1uo4k1o:1px solid rgb(50, 48, 44, 0.2);--x1c2jxxn:inherit;--xqk8mah:rgba(227, 226, 224, 0.5);--xo1lou4:none;--x1fk9x9:pointer;}
-:root{--x1kobltp:rgb(50, 48, 44);--xvgebug:rgba(227, 226, 224, 0.5);--x1rmwt51:rgb(50, 48, 44);--xct8ea3:rgb(227, 226, 224);--x1j9csdi:rgb(68, 42, 30);--x1sd8ela:rgb(238, 224, 218);--x1k1yqrb:rgb(73, 41, 14);--x1i7j10x:rgb(250, 222, 201);--xl5u7lq:rgb(64, 44, 27);--x1moi2c1:rgb(253, 236, 200);--x1vhimwe:rgb(28, 56, 41);--x1nnc86d:rgb(219, 237, 219);--xkc13yr:rgb(24, 51, 71);--x1afd3dd:rgb(211, 229, 239);--xrtss6q:rgb(65, 36, 84);--x6sa30t:rgb(232, 222, 238);--xdxv7wn:rgb(76, 35, 55);--x1dwla9d:rgb(245, 224, 233);--x1u13keg:rgb(93, 23, 21);--x7ti7sc:rgb(255, 226, 221);}
-:root{--xpzsu2c:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";--xcevxv5:4px;--x1e0rwzh:rgba(55, 53, 47, 0.65);--x1ulgvz2:rgba(55, 53, 47, 0.3);}
+:root{--x1ctp1av:rgb(50, 48, 44);--x1hhtl5i:rgba(50, 48, 44, 0.6);--x1khxzqo:1px solid rgba(50, 48, 44, 0.4);--x1uo4k1o:1px solid rgba(50, 48, 44, 0.2);--x4d7xz0:inherit;--xgoj2td:rgba(150, 150, 150, 0.1);--xo1lou4:none;--x1fk9x9:pointer;}
+:root{--x1t5svdl:rgb(50, 48, 44);--xfv6ehf:rgba(227, 226, 224, 0.5);--x19kji8b:rgb(50, 48, 44);--xlajt4c:rgb(227, 226, 224);--x1h58ikr:rgb(68, 42, 30);--x1lgegj8:rgb(238, 224, 218);--x1dobdqq:rgb(73, 41, 14);--x67ies3:rgb(250, 222, 201);--xos4pem:rgb(64, 44, 27);--x18qxxqs:rgb(253, 236, 200);--x1pl3l1k:rgb(28, 56, 41);--x1jxuftm:rgb(219, 237, 219);--x39ajyn:rgb(24, 51, 71);--xsdiylp:rgb(211, 229, 239);--xshm41a:rgb(65, 36, 84);--xclopz6:rgb(232, 222, 238);--x1jwh6p3:rgb(76, 35, 55);--xmle28t:rgb(245, 224, 233);--xtxoqe4:rgb(93, 23, 21);--x1cs7rmz:rgb(255, 226, 221);}
+:root{--x3otoa1:1px solid rgba(50, 48, 44, 0.3);--x1iitcpn:rgb(50, 48, 44);--x1nzmgtq:rgba(227, 226, 224, 0.5);--xnmnmcg:rgb(50, 48, 44);--x28mk2i:rgb(155, 155, 155);--xktsgfh:rgb(68, 42, 30);--xzy5kuj:rgb(238, 224, 218);--x1xarmmv:rgb(73, 41, 14);--x5ynj2h:rgb(250, 222, 201);--xek95s8:rgb(64, 44, 27);--xdyiup8:rgb(253, 236, 200);--x981q4j:rgb(28, 56, 41);--xstqlry:rgb(219, 237, 219);--xc9k0gq:rgb(24, 51, 71);--x9l2ums:rgb(211, 229, 239);--x1seoq5v:rgb(65, 36, 84);--x1vusc46:rgb(232, 222, 238);--x1xblyyj:rgb(76, 35, 55);--xdsin2c:rgb(245, 224, 233);--x1vpxilb:rgb(93, 23, 21);--x1ydeh9:rgb(255, 226, 221);}
+:root{--x52570m:1px solid rgba(55, 53, 47, 0.09);--x6rt3ft:rgba(55, 53, 47, 0.45);--xfd9ycw:white -3px 0px 0px, rgb(233 233 231) 0px 1px 0px;--x7f4nts:rgb(227, 226, 224) none repeat scroll 0% 0%;}
+:root{--xpzsu2c:ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";--xcevxv5:4px;--x1liba71:1.5;--xb8z6mo:rgba(220, 220, 220, 0.8);--xjdl0h1:1px solid rgb(230, 230, 230);--x1qwrlbe:rgb(35, 45, 55);--x1e0rwzh:rgb(130, 140, 150);--x1ulgvz2:rgb(160, 170, 180);--x12fcvf1:#f5f2f0;--x4ht6xg:rgba(150, 150, 150, 0.1);}
+:root{--xrwgx8b:rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;--xnojjrq:rgba(55, 53, 47, 0.005);--x1o4qrai:rgba(55, 53, 47, 0.03);--x57mnsg:1px solid rgba(55, 53, 47, 0.1);--xeg6zs1:repeat(auto-fill, minmax(180px, 1fr));--x97sy6c:repeat(auto-fill, minmax(260px, 1fr));--x3uee17:repeat(auto-fill, minmax(320px, 1fr));}
+@media (prefers-color-scheme: dark){:root{--x1ctp1av:rgb(225, 223, 219);--x1hhtl5i:rgba(225, 223, 219, 0.6);--x1khxzqo:1px solid rgba(205, 203, 199, 0.4);--x1uo4k1o:1px solid rgba(205, 203, 199, 0.2);--xgoj2td:rgba(255, 255, 255, 0.15);}}
+@media (prefers-color-scheme: dark){:root{--x1t5svdl:rgba(255, 255, 255, 0.804);--xfv6ehf:rgb(55, 55, 55);--x19kji8b:rgba(255, 255, 255, 0.804);--xlajt4c:rgb(90, 90, 90);--x1h58ikr:rgba(255, 255, 255, 0.804);--x1lgegj8:rgb(96, 59, 44);--x1dobdqq:rgba(255, 255, 255, 0.804);--x67ies3:rgb(133, 76, 29);--xos4pem:rgba(255, 255, 255, 0.804);--x18qxxqs:rgb(137, 99, 42);--x1pl3l1k:rgba(255, 255, 255, 0.804);--x1jxuftm:rgb(43, 89, 63);--x39ajyn:rgba(255, 255, 255, 0.804);--xsdiylp:rgb(40, 69, 108);--xshm41a:rgba(255, 255, 255, 0.804);--xclopz6:rgb(73, 47, 100);--x1jwh6p3:rgba(255, 255, 255, 0.804);--xmle28t:rgb(105, 49, 76);--xtxoqe4:rgba(255, 255, 255, 0.804);--x1cs7rmz:rgb(110, 54, 48);}}
+@media (prefers-color-scheme: dark){:root{--x3otoa1:1px solid rgba(205, 203, 199, 0.3);--x1iitcpn:rgb(235, 233, 228);--x1nzmgtq:rgb(55, 55, 55);--xnmnmcg:rgb(155, 155, 155);--x28mk2i:rgb(47, 47, 47);--xktsgfh:rgb(186, 133, 111);--xzy5kuj:rgb(74, 50, 40);--x1xarmmv:rgb(199, 125, 72);--x5ynj2h:rgb(92, 59, 35);--xek95s8:rgb(202, 152, 73);--xdyiup8:rgb(86, 67, 40);--x981q4j:rgb(82, 158, 114);--xstqlry:rgb(36, 61, 48);--xc9k0gq:rgb(94, 135, 201);--x9l2ums:rgb(20, 58, 78);--x1seoq5v:rgb(157, 104, 211);--x1vusc46:rgb(60, 45, 73);--x1xblyyj:rgb(209, 87, 150);--xdsin2c:rgb(78, 44, 60);--x1vpxilb:rgb(223, 84, 82);--x1ydeh9:rgb(82, 46, 42);}}
+@media (prefers-color-scheme: dark){:root{--x52570m:1px solid rgb(47, 47, 47);--x6rt3ft:rgba(255, 253, 247, 0.45);--xfd9ycw:rgb(25, 25, 25) -3px 0px 0px, rgb(47, 47, 47) 0px 1px 0px;--x7f4nts:rgb(28, 29, 31) none repeat scroll 0% 0%;}}
+@media (prefers-color-scheme: dark){:root{--xb8z6mo:rgba(80, 80, 80, 0.8);--xjdl0h1:1px solid rgb(70, 70, 70);--x1qwrlbe:rgb(230, 230, 230);--x1e0rwzh:rgb(130, 130, 130);--x1ulgvz2:rgb(100, 100, 100);--x12fcvf1:#2d2d2d;--x4ht6xg:rgba(255, 255, 255, 0.15);}}
+@media (prefers-color-scheme: dark){:root{--xrwgx8b:rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px;--xnojjrq:rgba(255, 255, 255, 0.1);--x1o4qrai:rgb(47, 47, 47);--x57mnsg:1px solid rgba(255, 255, 255, 0.1);}}
 .x130j894:not(#\#){background:inherit}
 .xwpv0f9:not(#\#){background:rgb(211,229,239) none repeat scroll 0 0}
 .x1rzy9ey:not(#\#){background:rgb(25,25,25)}
-.xxmbyu5:not(#\#){background:rgb(46,170,220)}
+.x13ghql:not(#\#){background:rgb(35,131,226)}
 .x1iyahom:not(#\#){background:rgba(135,131,120,.15)}
-.x1vc4kkm:not(#\#){background:rgba(231,243,248,1)}
-.x1wbybi0:not(#\#){background:rgba(237,243,236,1)}
-.x1b0lv13:not(#\#){background:rgba(241,241,239,1)}
-.xh3ejly:not(#\#){background:rgba(244,238,238,1)}
-.x4hwpk7:not(#\#){background:rgba(244,240,247,.8)}
-.x1yop5l8:not(#\#){background:rgba(249,238,243,.8)}
-.x36tass:not(#\#){background:rgba(251,236,221,1)}
-.xoow5ae:not(#\#){background:rgba(251,243,219,1)}
-.x1dia63y:not(#\#){background:rgba(253,235,236,1)}
-.x1r7xphn:not(#\#){background:white}
-.xtfardp:not(#\#){border:1px solid #ddd}
+.x1kjckmb:not(#\#){background:var(--xnojjrq)}
 .x1pwd5xa:not(#\#){border:1px solid #EEE}
-.xjr8z75:not(#\#){border:1px solid rgb(233,233,231)}
-.xrwc1qg:not(#\#){border:1px solid rgba(55,53,47,.16)}
+.x4pyi0n:not(#\#){border:var(--x1khxzqo)}
+.x1pxoru6:not(#\#){border:var(--x3otoa1)}
+.x1kph17r:not(#\#){border:var(--xjdl0h1)}
 .x13k78xn:not(#\#){grid-template:repeat(1,1fr) /1.5rem 1fr}
 .x1ga92pj:not(#\#){margin:.2rem 0 0}
 .x1aki0ej:not(#\#){margin:.3rem .3rem 0}
 .x1rz42sk:not(#\#){margin:.5rem auto}
+.x1326qfr:not(#\#){margin:0 .3rem}
 .x1minv1u:not(#\#){margin:0 .5rem}
-.x1y59oyo:not(#\#){margin:0 0 0 7px}
 .x7qn6qj:not(#\#){margin:0 0 1rem}
 .xwkitof:not(#\#){margin:0 6px 0 0}
 .xqmp0lw:not(#\#){margin:0 7px}
@@ -33,6 +33,8 @@
 .x1ghz6dp:not(#\#){margin:0}
 .xbkgn1r:not(#\#){margin:1rem 0}
 .x1qk52y6:not(#\#){margin:4px 0}
+.xl5gqxi:not(#\#){margin:4px 7px 0}
+.xv6lp74:not(#\#){margin:8px 0 0 7px}
 .x1bpp3o7:not(#\#){margin:auto}
 .x16riluj:not(#\#){padding:.1rem .2rem}
 .x1q4hdjl:not(#\#){padding:.2rem .3rem}
@@ -50,8 +52,7 @@
 .x1gpzwh6:not(#\#){padding:0 0 .5rem}
 .x8flsbp:not(#\#){padding:0 0 .8rem}
 .xe4ajzu:not(#\#){padding:0 0 10px}
-.xeacz2j:not(#\#){padding:0 0 8px}
-.xqamk0n:not(#\#){padding:0 10px 8px}
+.xzbvcfu:not(#\#){padding:0 2px 3px}
 .x1baykjp:not(#\#){padding:0 5px 2px}
 .xcq2ivu:not(#\#){padding:0 5px 4px}
 .x1717udv:not(#\#){padding:0}
@@ -61,28 +62,30 @@
 .xpwwz5d:not(#\#){padding:1px 2px}
 .x1uz70x1:not(#\#){padding:1rem}
 .x1rbdj2j:not(#\#){padding:2px 10px}
+.x1i3ajwb:not(#\#){padding:2px}
 .x1cfqnp1:not(#\#){padding:2rem 0 3px}
 .xp8ws5:not(#\#){padding:3rem 0 3px}
 .xoth7wd:not(#\#){padding:4px 0 1px 2px}
 .xztvwtv:not(#\#){padding:4px 0}
-.xfawy5m:not(#\#){padding:4px}
+.x12bz10l:not(#\#){padding:5px 10px 0}
 .x8lhhth:not(#\#){padding:5px 8px}
 .x1160tuk:not(#\#){padding:8px 10px}
-.x1hwub78:hover:not(#\#){background:rgb(227,226,224) none repeat scroll 0 0}
-.x3u7e13:hover:not(#\#){background:rgba(55,53,47,.03)}
+.x1tntyj9:hover:not(#\#){background:var(--x1o4qrai)}
+.x76wgnk:hover:not(#\#){background:var(--x7f4nts)}
+.x1ax34ch:hover:not(#\#){background:var(--xgoj2td)}
 @media (max-width: 580px){.x1t8upxr.x1t8upxr:not(#\#){padding:1rem 0 .85rem}}
-.x13pqoeu:not(#\#):not(#\#){background-position:0 100%}
-.x15su7se:not(#\#):not(#\#){border-bottom:1px solid #ddd}
-.xagqfe1:not(#\#):not(#\#){border-bottom:1px solid rgba(55,53,47,.09)}
 .xpzjx3:not(#\#):not(#\#){border-bottom:var(--x1khxzqo)}
-.x4ubzz0:not(#\#):not(#\#){border-left:3px solid currentcolor}
+.x42xdh5:not(#\#):not(#\#){border-bottom:var(--x57mnsg)}
+.x1vmqtsv:not(#\#):not(#\#){border-color:var(--xb8z6mo)}
+.x1a0pi56:not(#\#):not(#\#){border-left:var(--xjdl0h1)}
 .x1nj7uno:not(#\#):not(#\#){border-radius:1px}
 .x18zih8k:not(#\#):not(#\#){border-radius:3px}
 .x12oqio5:not(#\#):not(#\#){border-radius:4px}
 .xoz5i10:not(#\#):not(#\#){border-radius:var(--xcevxv5)}
-.x3o4md8:not(#\#):not(#\#){border-right:1px solid rgba(55,53,47,.09)}
-.x1mpjign:not(#\#):not(#\#){border-top:1px dashed #999}
-.x1jlbt0v:not(#\#):not(#\#){border-top:1px solid rgb(233,233,231)}
+.x7956lj:not(#\#):not(#\#){border-right:none}
+.xbwemkf:not(#\#):not(#\#){border-top:1px dashed var(--x1ulgvz2)}
+.xx23a3d:not(#\#):not(#\#){border-top:var(--x52570m)}
+.x1cla6av:not(#\#):not(#\#){border-top:var(--xjdl0h1)}
 .x1cqoux5:not(#\#):not(#\#){flex:1 1 0}
 .x15lv9n0:not(#\#):not(#\#){flex:1 1 180px}
 .x1fvrxw4:not(#\#):not(#\#){flex:4 1 180px}
@@ -107,78 +110,59 @@
 .x1y8v6su:not(#\#):not(#\#):not(#\#){align-self:start}
 .xa5665v:not(#\#):not(#\#):not(#\#){aspect-ratio:16/9}
 .xlp1x4z:not(#\#):not(#\#):not(#\#){backface-visibility:hidden}
-.xjup8qr:not(#\#):not(#\#):not(#\#){background-color:#f5f2f0}
 .xgcd1z6:not(#\#):not(#\#):not(#\#){background-color:inherit}
-.xivqcaa:not(#\#):not(#\#):not(#\#){background-color:rgb(231,243,248)}
-.xk1eqyx:not(#\#):not(#\#):not(#\#){background-color:rgb(237,243,236)}
-.xan1y3o:not(#\#):not(#\#):not(#\#){background-color:rgb(241,241,239)}
-.x5sxmnr:not(#\#):not(#\#):not(#\#){background-color:rgb(244,238,238)}
-.x14zlkn0:not(#\#):not(#\#):not(#\#){background-color:rgb(247,246,243)}
-.x1js6t1l:not(#\#):not(#\#):not(#\#){background-color:rgb(251,236,221)}
-.x125ifk9:not(#\#):not(#\#):not(#\#){background-color:rgb(251,243,219)}
-.x1e4p6wl:not(#\#):not(#\#):not(#\#){background-color:rgb(253,235,236)}
-.xjy77r2:not(#\#):not(#\#):not(#\#){background-color:rgba(244,240,247,.8)}
-.x1u8e821:not(#\#):not(#\#):not(#\#){background-color:rgba(249,238,243,.8)}
-.xr54tmh:not(#\#):not(#\#):not(#\#){background-color:var(--x1afd3dd)}
-.x1h2krsp:not(#\#):not(#\#):not(#\#){background-color:var(--x1c2jxxn)}
-.xfw6yvh:not(#\#):not(#\#):not(#\#){background-color:var(--x1i7j10x)}
-.x161dwim:not(#\#):not(#\#):not(#\#){background-color:var(--x1moi2c1)}
-.xn4asuu:not(#\#):not(#\#):not(#\#){background-color:var(--x1nnc86d)}
-.x12pkou0:not(#\#):not(#\#):not(#\#){background-color:var(--x1sd8ela)}
-.x1fi4u8n:not(#\#):not(#\#):not(#\#){background-color:var(--x6sa30t)}
-.xnsnhni:not(#\#):not(#\#):not(#\#){background-color:var(--x7ti7sc)}
-.x1ckdm3g:not(#\#):not(#\#):not(#\#){background-color:var(--xct8ea3)}
-.x1a1dwqt:not(#\#):not(#\#):not(#\#){background-color:var(--xvgebug)}
-.x1hk33u3:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(to right,rgba(55,53,47,.16) 0,rgba(55,53,47,.16) 100%)}
-.x1w3jsh0:not(#\#):not(#\#):not(#\#){background-repeat:repeat-x}
-.xntq7mn:not(#\#):not(#\#):not(#\#){background-size:100% 1px}
+.x6hzvzm:not(#\#):not(#\#):not(#\#){background-color:var(--x12fcvf1)}
+.x1v56k7e:not(#\#):not(#\#):not(#\#){background-color:var(--x18qxxqs)}
+.xyiez3y:not(#\#):not(#\#):not(#\#){background-color:var(--x1cs7rmz)}
+.x1kdmsmv:not(#\#):not(#\#):not(#\#){background-color:var(--x1jxuftm)}
+.xtwhjv8:not(#\#):not(#\#):not(#\#){background-color:var(--x1lgegj8)}
+.xfcv1ws:not(#\#):not(#\#):not(#\#){background-color:var(--x1nzmgtq)}
+.x1gyzooh:not(#\#):not(#\#):not(#\#){background-color:var(--x1vusc46)}
+.xc2dxvp:not(#\#):not(#\#):not(#\#){background-color:var(--x1ydeh9)}
+.x1eja9dt:not(#\#):not(#\#):not(#\#){background-color:var(--x28mk2i)}
+.x1me1y9f:not(#\#):not(#\#):not(#\#){background-color:var(--x4d7xz0)}
+.x28ozau:not(#\#):not(#\#):not(#\#){background-color:var(--x4ht6xg)}
+.x156te9n:not(#\#):not(#\#):not(#\#){background-color:var(--x5ynj2h)}
+.xp79xic:not(#\#):not(#\#):not(#\#){background-color:var(--x67ies3)}
+.xcauth6:not(#\#):not(#\#):not(#\#){background-color:var(--x9l2ums)}
+.xtsin74:not(#\#):not(#\#):not(#\#){background-color:var(--xclopz6)}
+.x1vfhc98:not(#\#):not(#\#):not(#\#){background-color:var(--xdsin2c)}
+.x10se57c:not(#\#):not(#\#):not(#\#){background-color:var(--xdyiup8)}
+.xoocbay:not(#\#):not(#\#):not(#\#){background-color:var(--xfv6ehf)}
+.xqe7p8n:not(#\#):not(#\#):not(#\#){background-color:var(--xlajt4c)}
+.x1qic2v2:not(#\#):not(#\#):not(#\#){background-color:var(--xsdiylp)}
+.xt8nrx1:not(#\#):not(#\#):not(#\#){background-color:var(--xstqlry)}
+.xfrqai6:not(#\#):not(#\#):not(#\#){background-color:var(--xzy5kuj)}
 .x1mwwwfo:not(#\#):not(#\#):not(#\#){border-collapse:collapse}
 .x1gukg7c:not(#\#):not(#\#):not(#\#){border-spacing:0}
-.x1uustg:not(#\#):not(#\#):not(#\#){border-top-color:#ddd}
-.x13fuv20:not(#\#):not(#\#):not(#\#){border-top-style:solid}
-.x178xt8z:not(#\#):not(#\#):not(#\#){border-top-width:1px}
-html:not([dir='rtl']) .x14n9bkn:not(#\#):not(#\#):not(#\#){box-shadow:rgb(15 15 15/10%) 0 0 0 1px,rgb(15 15 15/10%) 0 2px 4px}
-html[dir='rtl'] .x14n9bkn:not(#\#):not(#\#):not(#\#){box-shadow:rgb(15 -15 15/10%) 0 0 0 1px, rgb(15 -15 15/10%) 0 2px 4px}
-html:not([dir='rtl']) .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white -3px 0 0,rgb(233 233 231) 0 1px 0}
-html[dir='rtl'] .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white 3px 0 0, rgb(233 -233 231) 0 1px 0}
-.xh3659q:not(#\#):not(#\#):not(#\#){color:#777}
-.x1g3taxb:not(#\#):not(#\#):not(#\#){color:#888}
-.x1noocy9:not(#\#):not(#\#):not(#\#){color:#999}
+.xnnn7g2:not(#\#):not(#\#):not(#\#){box-shadow:var(--xfd9ycw)}
+.x2ceahd:not(#\#):not(#\#):not(#\#){box-shadow:var(--xrwgx8b)}
 .xytkd8t:not(#\#):not(#\#):not(#\#){color:#EB5757}
 .x1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
-.xbtqrdd:not(#\#):not(#\#):not(#\#){color:rgb(120,119,116)}
-.xocb71z:not(#\#):not(#\#):not(#\#){color:rgb(144,101,176)}
-.xfgbdse:not(#\#):not(#\#):not(#\#){color:rgb(159,107,83)}
-.x16mczcu:not(#\#):not(#\#):not(#\#){color:rgb(193,76,138)}
-.x1cuxad4:not(#\#):not(#\#):not(#\#){color:rgb(203,145,47)}
-.x1ii5icm:not(#\#):not(#\#):not(#\#){color:rgb(212,76,71)}
-.xeubebw:not(#\#):not(#\#):not(#\#){color:rgb(217,115,13)}
 .x1ctjc2f:not(#\#):not(#\#):not(#\#){color:rgb(24,51,71)}
-.x1a2b8c4:not(#\#):not(#\#):not(#\#){color:rgb(51,126,169)}
-.xiniunn:not(#\#):not(#\#):not(#\#){color:rgb(55,53,47)}
-.xzrguvn:not(#\#):not(#\#):not(#\#){color:rgb(68,131,97)}
-.xiz7vfo:not(#\#):not(#\#):not(#\#){color:rgba(120,119,116,1)}
-.xf43dgl:not(#\#):not(#\#):not(#\#){color:rgba(144,101,176,1)}
-.xsm54nf:not(#\#):not(#\#):not(#\#){color:rgba(159,107,83,1)}
-.x1qdz2de:not(#\#):not(#\#):not(#\#){color:rgba(193,76,138,1)}
-.xajnbqy:not(#\#):not(#\#):not(#\#){color:rgba(203,145,47,1)}
-.x7n30i6:not(#\#):not(#\#):not(#\#){color:rgba(212,76,71,1)}
-.x1hwudao:not(#\#):not(#\#):not(#\#){color:rgba(217,115,13,1)}
-.x2xfezk:not(#\#):not(#\#):not(#\#){color:rgba(51,126,169,1)}
-.xyj4yit:not(#\#):not(#\#):not(#\#){color:rgba(55,53,47,.65)}
-.x9lygya:not(#\#):not(#\#):not(#\#){color:rgba(68,131,97,1)}
+.x1n2sw3j:not(#\#):not(#\#):not(#\#){color:var(--x19kji8b)}
 .x2w0cx1:not(#\#):not(#\#):not(#\#){color:var(--x1ctp1av)}
+.x1achdc8:not(#\#):not(#\#):not(#\#){color:var(--x1dobdqq)}
 .x7j76ka:not(#\#):not(#\#):not(#\#){color:var(--x1e0rwzh)}
-.xyrhg7e:not(#\#):not(#\#):not(#\#){color:var(--x1j9csdi)}
-.xz43sf9:not(#\#):not(#\#):not(#\#){color:var(--x1k1yqrb)}
-.x1d0pfws:not(#\#):not(#\#):not(#\#){color:var(--x1kobltp)}
-.x1vng7ge:not(#\#):not(#\#):not(#\#){color:var(--x1rmwt51)}
-.xylzfvh:not(#\#):not(#\#):not(#\#){color:var(--x1u13keg)}
+.xbh0e5f:not(#\#):not(#\#):not(#\#){color:var(--x1h58ikr)}
+.x1k31k6q:not(#\#):not(#\#):not(#\#){color:var(--x1iitcpn)}
+.x1de1agw:not(#\#):not(#\#):not(#\#){color:var(--x1pl3l1k)}
+.x1gs1mh7:not(#\#):not(#\#):not(#\#){color:var(--x1qwrlbe)}
+.xtsu70q:not(#\#):not(#\#):not(#\#){color:var(--x1seoq5v)}
+.x1r97g0h:not(#\#):not(#\#):not(#\#){color:var(--x1t5svdl)}
 .x1i17pws:not(#\#):not(#\#):not(#\#){color:var(--x1ulgvz2)}
-.xe04n57:not(#\#):not(#\#):not(#\#){color:var(--x1vhimwe)}
-.x19jod5o:not(#\#):not(#\#):not(#\#){color:var(--xkc13yr)}
-.x1o2vnr2:not(#\#):not(#\#):not(#\#){color:var(--xl5u7lq)}
-.x1jk8wgv:not(#\#):not(#\#):not(#\#){color:var(--xrtss6q)}
+.xmhkicg:not(#\#):not(#\#):not(#\#){color:var(--x1vpxilb)}
+.x17wjuzo:not(#\#):not(#\#):not(#\#){color:var(--x1xarmmv)}
+.x1tn2f8g:not(#\#):not(#\#):not(#\#){color:var(--x1xblyyj)}
+.xt74tvz:not(#\#):not(#\#):not(#\#){color:var(--x39ajyn)}
+.x1577tfg:not(#\#):not(#\#):not(#\#){color:var(--x981q4j)}
+.xq1vw0c:not(#\#):not(#\#):not(#\#){color:var(--xc9k0gq)}
+.x1yoq8nz:not(#\#):not(#\#):not(#\#){color:var(--xek95s8)}
+.xr5jqov:not(#\#):not(#\#):not(#\#){color:var(--xktsgfh)}
+.xczb2yt:not(#\#):not(#\#):not(#\#){color:var(--xnmnmcg)}
+.xwl5pj2:not(#\#):not(#\#):not(#\#){color:var(--xos4pem)}
+.x1u2oj82:not(#\#):not(#\#):not(#\#){color:var(--xshm41a)}
+.x1sitf2y:not(#\#):not(#\#):not(#\#){color:var(--xtxoqe4)}
 .x1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}
 .xoebl6a:not(#\#):not(#\#):not(#\#){cursor:var(--x1fk9x9)}
 .x1lliihq:not(#\#):not(#\#):not(#\#){display:block}
@@ -187,10 +171,8 @@ html[dir='rtl'] .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white 3px 0 0, r
 .x1rg5ohu:not(#\#):not(#\#):not(#\#){display:inline-block}
 .x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
 .xt0psk2:not(#\#):not(#\#):not(#\#){display:inline}
-.x1pa04qk:not(#\#):not(#\#):not(#\#){fill:#000}
-.x1kihv7h:not(#\#):not(#\#):not(#\#){fill:inherit}
-.x118tc7y:not(#\#):not(#\#):not(#\#){fill:rgba(55,53,47,.45)}
-.x5hlbpq:not(#\#):not(#\#):not(#\#){fill:rgba(55,53,47,1)}
+.x1k5320x:not(#\#):not(#\#):not(#\#){fill:var(--x1qwrlbe)}
+.x1ezp069:not(#\#):not(#\#):not(#\#){fill:var(--x6rt3ft)}
 .xypthjr:not(#\#):not(#\#):not(#\#){fill:white}
 .xdt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}
 .x1q0g3np:not(#\#):not(#\#):not(#\#){flex-direction:row}
@@ -208,19 +190,17 @@ html[dir='rtl'] .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white 3px 0 0, r
 .xgommxb:not(#\#):not(#\#):not(#\#){font-size:.8rem}
 .xyr29y3:not(#\#):not(#\#):not(#\#){font-size:.95rem}
 .x1nrrp6k:not(#\#):not(#\#):not(#\#){font-size:.9rem}
-.x1hptrd9:not(#\#):not(#\#):not(#\#){font-size:1.1rem}
 .x8c3b7j:not(#\#):not(#\#):not(#\#){font-size:1.7rem}
 .xfifm61:not(#\#):not(#\#):not(#\#){font-size:12px}
 .x4z9k3i:not(#\#):not(#\#):not(#\#){font-size:13px}
 .xif65rj:not(#\#):not(#\#):not(#\#){font-size:14px}
-.x1jchvi3:not(#\#):not(#\#):not(#\#){font-size:1rem}
 .x1k4tb9n:not(#\#):not(#\#):not(#\#){font-style:italic}
 .xk50ysn:not(#\#):not(#\#):not(#\#){font-weight:500}
 .x117nqv4:not(#\#):not(#\#):not(#\#){font-weight:bold}
 .x1a7s9hc:not(#\#):not(#\#):not(#\#){grid-template-columns:32px 1fr}
-.x15vz560:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
-.x1vn7x89:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
-.xu66tq2:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
+.xo7fr4q:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x3uee17)}
+.xyz7apw:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x97sy6c)}
+.x18una38:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--xeg6zs1)}
 .xl56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}
 .x1nhvcw1:not(#\#):not(#\#):not(#\#){justify-content:flex-start}
 .x1szn6h9:not(#\#):not(#\#):not(#\#){justify-content:stretch}
@@ -232,12 +212,13 @@ html[dir='rtl'] .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white 3px 0 0, r
 .xwxc2jc:not(#\#):not(#\#):not(#\#){line-height:1.8}
 .xo5v014:not(#\#):not(#\#):not(#\#){line-height:1}
 .x1d3mw78:not(#\#):not(#\#):not(#\#){line-height:16px}
+.x1rth96y:not(#\#):not(#\#):not(#\#){line-height:var(--x1liba71)}
 .x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
 .x126bhsu:not(#\#):not(#\#):not(#\#){minwidth:0}
 .x19kjcj4:not(#\#):not(#\#):not(#\#){object-fit:contain}
 .xl1xv1r:not(#\#):not(#\#):not(#\#){object-fit:cover}
 .x1a2r2ce:not(#\#):not(#\#):not(#\#){object-position:center 50%}
-.x1htuu40:not(#\#):not(#\#):not(#\#){object-position:top 50%}
+.xa9wxui:not(#\#):not(#\#):not(#\#){object-position:top center}
 .xbyyjgo:not(#\#):not(#\#):not(#\#){opacity:.5}
 .x1hc1fzr:not(#\#):not(#\#):not(#\#){opacity:1}
 .x10l6tqk:not(#\#):not(#\#):not(#\#){position:absolute}
@@ -246,7 +227,7 @@ html[dir='rtl'] .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white 3px 0 0, r
 .x2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}
 .xdpxx8g:not(#\#):not(#\#):not(#\#){text-align:left}
 .x1hr2gdg:not(#\#):not(#\#):not(#\#){text-align:right}
-.x1ccxkrh:not(#\#):not(#\#):not(#\#){text-decoration-color:#999}
+.x19b41g:not(#\#):not(#\#):not(#\#){text-decoration-color:var(--x1ulgvz2)}
 .x5lhwog:not(#\#):not(#\#):not(#\#){text-decoration-line:line-through}
 .xlyipyv:not(#\#):not(#\#):not(#\#){text-overflow:ellipsis}
 .xn80e1m:not(#\#):not(#\#):not(#\#){text-transform:capitalize}
@@ -257,31 +238,29 @@ html[dir='rtl'] .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white 3px 0 0, r
 .xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
 .x126k92a:not(#\#):not(#\#):not(#\#){white-space:pre-wrap}
 .x13faqbe:not(#\#):not(#\#):not(#\#){word-break:break-word}
-.xy8jdh7:hover:not(#\#):not(#\#):not(#\#){background-color:#eee}
-.xwy3pg2:hover:not(#\#):not(#\#):not(#\#){background-color:var(--xqk8mah)}
+.xn08ye4:hover:not(#\#):not(#\#):not(#\#){background-color:var(--xgoj2td)}
 .x1binvwd:hover:not(#\#):not(#\#):not(#\#){color:var(--x1hhtl5i)}
 @media (max-width: 580px){.xjimrh6.xjimrh6:not(#\#):not(#\#):not(#\#){display:block}}
 @media (max-width: 580px){.x1v6uw9j.x1v6uw9j:not(#\#):not(#\#):not(#\#){display:none}}
 @media (max-width: 580px){.x1xrxgpl.x1xrxgpl:not(#\#):not(#\#):not(#\#){position:static}}
+.x1vo0akb:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:3px}
 .x1l0ckx5:not(#\#):not(#\#):not(#\#):not(#\#){bottom:-0.2em}
 .xwlngq8:not(#\#):not(#\#):not(#\#):not(#\#){height:.6875em}
 .x1h95vlm:not(#\#):not(#\#):not(#\#):not(#\#){height:.7em}
 .xqtp20y:not(#\#):not(#\#):not(#\#):not(#\#){height:0}
 .xydt64x:not(#\#):not(#\#):not(#\#):not(#\#){height:1.4rem}
 .x5yr21d:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
-.x1rxgj4k:not(#\#):not(#\#):not(#\#):not(#\#){height:101.25px}
 .x1dr9wh:not(#\#):not(#\#):not(#\#):not(#\#){height:108px}
 .x1kpxq89:not(#\#):not(#\#):not(#\#):not(#\#){height:12px}
-.x1cm2wpk:not(#\#):not(#\#):not(#\#):not(#\#){height:146.25px}
 .x1v9usgg:not(#\#):not(#\#):not(#\#):not(#\#){height:14px}
 .xlup9mm:not(#\#):not(#\#):not(#\#):not(#\#){height:16px}
-.x1b51vyi:not(#\#):not(#\#):not(#\#):not(#\#){height:180px}
 .xjm9jq1:not(#\#):not(#\#):not(#\#):not(#\#){height:1px}
 .xxk0z11:not(#\#):not(#\#):not(#\#):not(#\#){height:24px}
 .x10w6t97:not(#\#):not(#\#):not(#\#):not(#\#){height:32px}
 .xojvqvm:not(#\#):not(#\#):not(#\#):not(#\#){height:33px}
 .xb7ufyx:not(#\#):not(#\#):not(#\#):not(#\#){left:.8rem}
 .xu96u03:not(#\#):not(#\#):not(#\#):not(#\#){left:0}
+.xat24cr:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:0}
 .x1ty9z65:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:1px}
 .xjpr12u:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:2px}
 .xg06gn0:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:.6rem}
@@ -298,6 +277,7 @@ html[dir='rtl'] .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white 3px 0 0, r
 .xdt5uv0:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:.4rem}
 .xv0uc0e:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:.6rem}
 .xdj266r:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:0}
+.xr9ek0c:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:2px}
 .x1gslohp:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:4px}
 .x1xmf6yo:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:8px}
 .x193iq5w:not(#\#):not(#\#):not(#\#):not(#\#){max-width:100%}
@@ -312,10 +292,9 @@ html[dir='rtl'] .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white 3px 0 0, r
 .x1cf5d4w:not(#\#):not(#\#):not(#\#):not(#\#){min-width:1200px}
 .xgc0pbm:not(#\#):not(#\#):not(#\#):not(#\#){min-width:1px}
 .xt4ypqs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:20px}
-.xjdhk0:not(#\#):not(#\#):not(#\#):not(#\#){min-width:calc((100% - 192px) - 0)}
 .x14aock7:not(#\#):not(#\#):not(#\#):not(#\#){overflow-x:scroll}
+.xes99ow:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:.25rem}
 .xn2xpo4:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:.2rem}
-.x1a8lsjc:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:10px}
 .x2yie3v:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:1rem}
 .x10avn17:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:56.25%}
 .x15u6esi:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:.5rem}
@@ -333,8 +312,8 @@ html[dir='rtl'] .x139so5o:not(#\#):not(#\#):not(#\#){box-shadow:white 3px 0 0, r
 .xsmyaan:not(#\#):not(#\#):not(#\#):not(#\#){width:12px}
 .x6jxa94:not(#\#):not(#\#):not(#\#):not(#\#){width:14px}
 .x1kky2od:not(#\#):not(#\#):not(#\#):not(#\#){width:16px}
-.xe9vn5y:not(#\#):not(#\#):not(#\#):not(#\#){width:174px}
 .xzjbwwf:not(#\#):not(#\#):not(#\#):not(#\#){width:180px}
+.x16grhtn:not(#\#):not(#\#):not(#\#):not(#\#){width:220px}
 .x17z2i9w:not(#\#):not(#\#):not(#\#):not(#\#){width:22px}
 .xvy4d1p:not(#\#):not(#\#):not(#\#):not(#\#){width:24px}
 .x1hfn5x7:not(#\#):not(#\#):not(#\#):not(#\#){width:260px}

package/dist/ui/umd/types/ui/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const Checkbox: ({ bool }: {
+    bool: boolean;
+}) => React.JSX.Element;
+export default Checkbox;

package/dist/ui/umd/types/ui/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import Checkbox from './Checkbox';
+export { Checkbox };

package/dist/ui/umd/types/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { TextLinkProps, LinkIfLinkedProps } from './LinkIfLinked.types';
 export declare const TextLink: ({ textObject, children }: TextLinkProps) => React.JSX.Element;
-declare const LinkIfLinked: ({ condition, textObject, children }: LinkIfLinkedProps) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+declare const LinkIfLinked: ({ condition, textObject, children }: LinkIfLinkedProps) => React.JSX.Element;
 export default LinkIfLinked;

package/dist/ui/umd/types/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.types.d.ts

@@ -8,5 +8,5 @@ export interface TextLinkProps {
 export interface LinkIfLinkedProps {
     condition: boolean;
     textObject: RichTextItemResponse;
-    children: React.ReactNode;
+    children: ReactNode;
 }

package/dist/ui/umd/types/ui/components/index.d.ts

@@ -50,5 +50,6 @@ export * from './Page/RichText';
 export * from './Page/ToDoBlock';
 export * from './Page/ToggleBlock';
 export * from './Page/VideoBlock';
+export * from './Checkbox';
 export * from './lib';
 export * from './types';

package/dist/ui/umd/types/ui/components/lib.d.ts

@@ -11,3 +11,11 @@ export declare function UsePagination<T>(pages: T[], perPage: number): {
 };
 export declare function BuildPlainTextByPage(blocks: ListBlockChildrenResponseEx): string;
 export declare function pathBasename(str: string): string;
+export declare function getDatetimeFormat(): {
+    dateF: string;
+    timeF: string;
+};
+export declare function splitUrl(url: string): {
+    domain: string;
+    omittedPath: string;
+};

package/dist/ui/umd/types/ui/components/tokens.stylex.d.ts

@@ -1,19 +1,82 @@
 export declare const tokens: import("@stylexjs/stylex").VarGroup<Readonly<{
     fontFamily: string;
     borderRadius: string;
+    lineHeight: string;
+    borderColor: string;
+    border: string;
+    primaryText: string;
     secondaryText: string;
     thirdText: string;
+    codeBgColor: string;
+    tableHeaderBgColor: string;
+}>, symbol>;
+export declare const table: import("@stylexjs/stylex").VarGroup<Readonly<{
+    border: string;
+    iconFill: string;
+    boxShadow: string;
+    linkBgHover: string;
 }>, symbol>;
 export declare const link: import("@stylexjs/stylex").VarGroup<Readonly<{
     color: string;
     colorHover: string;
     borderBottom: string;
     borderBottomHover: string;
-    backgroundColor: string;
-    backgroundColorHover: string;
+    bgColor: string;
+    bgColorHover: string;
     textDecoration: string;
     cursor: string;
 }>, symbol>;
-export declare const colors: import("@stylexjs/stylex").VarGroup<Readonly<{
-    [x: string]: string;
+export declare const callout: import("@stylexjs/stylex").VarGroup<Readonly<{
+    border: string;
+    default: string;
+    bgDefault: string;
+    gray: string;
+    bgGray: string;
+    brown: string;
+    bgBrown: string;
+    orange: string;
+    bgOrange: string;
+    yellow: string;
+    bgYellow: string;
+    green: string;
+    bgGreen: string;
+    blue: string;
+    bgBlue: string;
+    purple: string;
+    bgPurple: string;
+    pink: string;
+    bgPink: string;
+    red: string;
+    bgRed: string;
+}>, symbol>;
+export declare const tag: import("@stylexjs/stylex").VarGroup<Readonly<{
+    default: string;
+    bgDefault: string;
+    gray: string;
+    bgGray: string;
+    brown: string;
+    bgBrown: string;
+    orange: string;
+    bgOrange: string;
+    yellow: string;
+    bgYellow: string;
+    green: string;
+    bgGreen: string;
+    blue: string;
+    bgBlue: string;
+    purple: string;
+    bgPurple: string;
+    pink: string;
+    bgPink: string;
+    red: string;
+    bgRed: string;
+}>, symbol>;
+export declare const gallery: import("@stylexjs/stylex").VarGroup<Readonly<{
+    boxShadow: string;
+    background: string;
+    backgroundHover: string;
+    imageBorderBottom: string;
+    gridTemplateColumnsSmall: string;
+    gridTemplateColumnsMedium: string;
+    gridTemplateColumnsLarge: string;
 }>, symbol>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rotion",
-  "version": "0.0.14",
+  "version": "0.1.0",
   "license": "MIT",
   "repository": "linyows/rotion",
   "description": "This is react components that uses the notion API to display the notion's database and page.",
@@ -16,7 +16,6 @@
       "require": "./dist/ui/cjs/index.js"
     },
     "./style.css": "./dist/ui/esm/style.css",
-    "./styles/*": "./dist/ui/styles/*",
     "./package.json": "./package.json",
     "./README.md": "./README.md",
     "./LICENSE": "./LICENSE"
@@ -45,10 +44,9 @@
     "exporter:build": "npm run exporter:clean && tsc -p tsconfig.exporter.json",
     "exporter:clean": "rm -rf dist/exporter/*",
     "exporter:test": "tsm node_modules/uvu/bin.js ./src/exporter",
-    "ui:build": "npm run ui:lint && npm run ui:typecheck && npm run ui:rollup && npm run ui:styles",
+    "ui:build": "npm run ui:lint && npm run ui:typecheck && npm run ui:rollup",
     "ui:rollup": "rollup --config rollup.config.ts --configPlugin typescript",
     "ui:typecheck": "tsc -p src/ui/tsconfig.typecheck.json",
-    "ui:styles": "cp -r ./src/ui/styles ./dist/ui/",
     "ui:lint": "eslint ./src/ui/components --ext .js,.jsx,.ts,.tsx -c ./src/ui/.eslintrc.json",
     "ui:test": "uvu -r tsm ./src/ui/components",
     "story": "storybook dev -p 6006",
@@ -62,7 +60,7 @@
   "dependencies": {
     "@notionhq/client": "^2.2.14",
     "cdate": "^0.0.7",
-    "cdate-schedule": "^0.0.1",
+    "cdate-relative": "^0.0.1",
     "file-type": "^18.7.0",
     "imagemin": "^8.0.1",
     "imagemin-webp": "^8.0.0",
@@ -72,19 +70,22 @@
     "replace-ext": "^2.0.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-vite": "^7.6.12",
-    "@storybook/test": "^7.6.12",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-interactions": "^8.0.6",
+    "@storybook/addon-links": "^8.0.6",
+    "@storybook/addon-mdx-gfm": "^8.0.6",
+    "@storybook/addon-onboarding": "^8.0.6",
+    "@storybook/blocks": "^8.0.6",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-vite": "^8.0.6",
+    "@storybook/test": "^8.0.6",
+    "@storybook/theming": "^8.0.6",
     "@stylexjs/rollup-plugin": "^0.4.1",
     "@stylexjs/stylex": "^0.4.1",
     "@tsconfig/node-lts-strictest-esm": "^18.12.1",
@@ -105,7 +106,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "http-cache-semantics": ">=4.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -113,7 +114,8 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "storybook": "^7.6.12",
+    "storybook": "^8.0.6",
+    "storybook-dark-mode": "^4.0.1",
     "testdouble": "^3.20.1",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",

package/dist/ui/styles/base.css

@@ -1,44 +0,0 @@
-.notionate {
-  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.notionate-select-default {
-  color: rgb(50, 48, 44);
-  background-color: rgba(227, 226, 224, 0.5);
-}
-.notionate-select-gray {
-  color: rgb(50, 48, 44);
-  background-color: rgb(227, 226, 224);
-}
-.notionate-select-brown {
-  color: rgb(68, 42, 30);
-  background-color: rgb(238, 224, 218);
-}
-.notionate-select-orange {
-  color: rgb(73, 41, 14);
-  background-color: rgb(250, 222, 201);
-}
-.notionate-select-yellow {
-  color: rgb(64, 44, 27);
-  background-color: rgb(253, 236, 200);
-}
-.notionate-select-green {
-  color: rgb(28, 56, 41);
-  background-color: rgb(219, 237, 219);
-}
-.notionate-select-blue {
-  color: rgb(24, 51, 71);
-  background-color: rgb(211, 229, 239);
-}
-.notionate-select-purple {
-  color: rgb(65, 36, 84);
-  background-color: rgb(232, 222, 238);
-}
-.notionate-select-pink {
-  color: rgb(76, 35, 55);
-  background-color: rgb(245, 224, 233);
-}
-.notionate-select-red {
-  color: rgb(93, 23, 21);
-  background-color: rgb(255, 226, 221);
-}