From d8cecb6eee7459283e3370d3cfb7ba0f1cee2820 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Mon, 14 Nov 2022 17:16:52 +0100 Subject: [PATCH] improve website --- docs/404.html | 4 +-- .../chunks/pages/_app-2a2c3b7059131a2d.js | 9 +++++ .../chunks/pages/_app-ac0e1f2fc4980ec7.js | 9 ----- .../chunks/pages/index-6cf432147fa9d4da.js | 5 --- .../chunks/pages/index-ea6f9c0e08894410.js | 5 +++ ...e5124cd83f7fb.css => a0f974289bbacc23.css} | 5 +-- .../_buildManifest.js | 2 +- .../_ssgManifest.js | 0 docs/index.html | 32 ++++++++--------- website/package-lock.json | 26 ++++++++++---- website/package.json | 1 + website/src/assets/css/styles.css | 3 ++ website/src/components/md/Pre.tsx | 25 ++++++++----- website/src/hooks/useOverlayScrollbarsIdle.ts | 35 +++++++++++++++++++ website/src/pages/_app.tsx | 9 ++--- website/src/pages/index.tsx | 17 ++++++--- 16 files changed, 128 insertions(+), 59 deletions(-) create mode 100644 docs/_next/static/chunks/pages/_app-2a2c3b7059131a2d.js delete mode 100644 docs/_next/static/chunks/pages/_app-ac0e1f2fc4980ec7.js delete mode 100644 docs/_next/static/chunks/pages/index-6cf432147fa9d4da.js create mode 100644 docs/_next/static/chunks/pages/index-ea6f9c0e08894410.js rename docs/_next/static/css/{16de5124cd83f7fb.css => a0f974289bbacc23.css} (68%) rename docs/_next/static/{a6rCR9y6SQ5Ojjwxqah3- => rdSn7MfqqvzaExLXDlLOR}/_buildManifest.js (79%) rename docs/_next/static/{a6rCR9y6SQ5Ojjwxqah3- => rdSn7MfqqvzaExLXDlLOR}/_ssgManifest.js (100%) create mode 100644 website/src/hooks/useOverlayScrollbarsIdle.ts diff --git a/docs/404.html b/docs/404.html index 34ee70b..aa023c6 100644 --- a/docs/404.html +++ b/docs/404.html @@ -1,4 +1,4 @@ -404: This page could not be found

404

This page could not be found.

\ No newline at end of file + }

404

This page could not be found.

\ No newline at end of file diff --git a/docs/_next/static/chunks/pages/_app-2a2c3b7059131a2d.js b/docs/_next/static/chunks/pages/_app-2a2c3b7059131a2d.js new file mode 100644 index 0000000..2964b4b --- /dev/null +++ b/docs/_next/static/chunks/pages/_app-2a2c3b7059131a2d.js @@ -0,0 +1,9 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[888],{8936:function(t,e,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return r(1311)}])},6702:function(t,e,r){"use strict";r.d(e,{a:function(){return rN}});var n=r(1809),l=r(7378);/*! + * OverlayScrollbars + * Version: 2.0.0 + * + * Copyright (c) Rene Haas | KingSora. + * https://github.com/KingSora + * + * Released under the MIT license. + */ function i(t,e){if(x(t))for(let r=0;re(t[r],r,t));return t}function o(t,e){let r=y(e),n=m(e)||r;if(n){let l=r?"":{};if(t){let o=window.getComputedStyle(t,null);l=r?tM(t,o,e):e.reduce((e,r)=>(e[r]=tM(t,o,r),e),l)}return l}t&&i(T(e),r=>tI(t,r,e[r]))}let a=(t,e)=>{let{o:r,u:n,_:l}=t,i=r,o,a=(t,e)=>{let r=i,a=e||(n?!n(r,t):r!==t);return(a||l)&&(i=t,o=r),[i,a,o]},u=t=>a(e(i,o),t),s=t=>[i,!!t,o];return[e?u:a,s]},u=()=>"undefined"!=typeof window,s=u()&&Node.ELEMENT_NODE,{toString:c,hasOwnProperty:d}=Object.prototype,f=t=>void 0===t,p=t=>null===t,b=t=>f(t)||p(t)?`${t}`:c.call(t).replace(/^\[object (.+)\]$/,"$1").toLowerCase(),h=t=>"number"==typeof t,y=t=>"string"==typeof t,g=t=>"boolean"==typeof t,v=t=>"function"==typeof t,m=t=>Array.isArray(t),w=t=>"object"==typeof t&&!m(t)&&!p(t),x=t=>{let e=!!t&&t.length,r=h(e)&&e>-1&&e%1==0;return(!!m(t)||!v(t)&&!!r)&&(!(e>0&&w(t))||e-1 in t)},O=t=>{if(!t||!w(t)||"object"!==b(t))return!1;let e,r="constructor",n=t[r],l=n&&n.prototype,i=d.call(t,r),o=l&&d.call(l,"isPrototypeOf");if(n&&!i&&!o)return!1;for(e in t);return f(e)||d.call(t,e)},_=t=>{let e=HTMLElement;return!!t&&(e?t instanceof e:t.nodeType===s)},S=t=>{let e=Element;return!!t&&(e?t instanceof e:t.nodeType===s)},j=(t,e,r)=>t.indexOf(e,r),$=(t,e,r)=>(!r&&!y(e)&&x(e)?Array.prototype.push.apply(t,e):t.push(e),t),E=t=>{let e=Array.from,r=[];return e&&t?e(t):(t instanceof Set?t.forEach(t=>{$(r,t)}):i(t,t=>{$(r,t)}),r)},P=t=>!!t&&0===t.length,C=(t,e,r)=>{let n=t=>t&&t.apply(void 0,e||[]);i(t,n),r||(t.length=0)},k=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),T=t=>t?Object.keys(t):[],L=(t,e,r,n,l,o,a)=>(("object"!=typeof t||p(t))&&!v(t)&&(t={}),i([e,r,n,l,o,a],e=>{i(T(e),r=>{let n=e[r];if(t===n)return!0;let l=m(n);if(n&&(O(n)||l)){let i=t[r],o=i;l&&!m(i)?o=[]:l||O(i)||(o={}),t[r]=L(o,n)}else t[r]=n})}),t),A=t=>{for(let e in t)return!1;return!0},M=(t,e,r,n)=>{if(f(n))return r?r[t]:e;r&&(y(n)||h(n))&&(r[t]=n)},I=(t,e,r)=>{if(f(r))return t?t.getAttribute(e):null;t&&t.setAttribute(e,r)},z=(t,e,r,n)=>{if(r){let l=I(t,e)||"",i=new Set(l.split(" "));i[n?"add":"delete"](r),I(t,e,E(i).join(" ").trim())}},N=(t,e,r)=>{let n=I(t,e)||"",l=new Set(n.split(" "));return l.has(r)},R=(t,e)=>{t&&t.removeAttribute(e)},B=(t,e)=>M("scrollLeft",0,t,e),Z=(t,e)=>M("scrollTop",0,t,e),H=u()&&Element.prototype,X=(t,e)=>{let r=[],n=e?S(e)?e:null:document;return n?$(r,n.querySelectorAll(t)):r},D=(t,e)=>{let r=e?S(e)?e:null:document;return r?r.querySelector(t):null},F=(t,e)=>{if(S(t)){let r=H.matches||H.msMatchesSelector;return r.call(t,e)}return!1},Y=t=>t?E(t.childNodes):[],K=t=>t?t.parentElement:null,q=(t,e)=>{if(S(t)){let r=H.closest;if(r)return r.call(t,e);do{if(F(t,e))return t;t=K(t)}while(t)}return null},J=(t,e,r)=>{let n=t&&q(t,e),l=t&&D(r,n),i=q(l,e)===n;return!!n&&!!l&&(n===t||l===t||i&&q(q(t,r),e)!==n)},V=(t,e,r)=>{if(r&&t){let n=e,l;x(r)?(l=document.createDocumentFragment(),i(r,t=>{t===n&&(n=t.previousSibling),l.appendChild(t)})):l=r,e&&(n?n!==e&&(n=n.nextSibling):n=t.firstChild),t.insertBefore(l,n||null)}},W=(t,e)=>{V(t,null,e)},G=(t,e)=>{V(K(t),t,e)},U=(t,e)=>{V(K(t),t&&t.nextSibling,e)},Q=t=>{if(x(t))i(E(t),t=>Q(t));else if(t){let e=K(t);e&&e.removeChild(t)}},tt=t=>{let e=document.createElement("div");return t&&I(e,"class",t),e},te=t=>{let e=tt();return e.innerHTML=t.trim(),i(Y(e),t=>Q(t))},tr=t=>t.charAt(0).toUpperCase()+t.slice(1),tn=()=>tt().style,tl=["-webkit-","-moz-","-o-","-ms-"],ti=["WebKit","Moz","O","MS","webkit","moz","o","ms"],to={},ta={},tu=t=>{let e=ta[t];if(k(ta,t))return e;let r=tr(t),n=tn();return i(tl,l=>{let i=l.replace(/-/g,""),o=[t,l+t,i+r,tr(i)+r];return!(e=o.find(t=>void 0!==n[t]))}),ta[t]=e||""},ts=t=>{if(u()){let e=to[t]||window[t];return k(to,t)||(i(ti,r=>!(e=e||window[r+tr(t)])),to[t]=e),e}},tc=ts("MutationObserver"),td=ts("IntersectionObserver"),tf=ts("ResizeObserver"),tp=ts("cancelAnimationFrame"),tb=ts("requestAnimationFrame"),th=u()&&window.setTimeout,ty=u()&&window.clearTimeout,tg=(t,e,r,n)=>{if(t&&e){let l=!0;return i(r,r=>{let i=n?n(t[r]):t[r],o=n?n(e[r]):e[r];i!==o&&(l=!1)}),l}return!1},tv=(t,e)=>tg(t,e,["w","h"]),tm=(t,e)=>tg(t,e,["x","y"]),tw=(t,e)=>tg(t,e,["t","r","b","l"]),tx=(t,e,r)=>tg(t,e,["width","height"],r&&(t=>Math.round(t))),tO=()=>{},t_=t=>{let e,r=t?th:tb,n=t?ty:tp;return[l=>{n(e),e=r(l,v(t)?t():t)},()=>n(e)]},tS=(t,e)=>{let r,n,l,i=tO,{g:o,v:a,p:u}=e||{},s=function(e){i(),ty(r),r=n=void 0,i=tO,t.apply(this,e)},c=t=>u&&n?u(n,t):t,d=()=>{i!==tO&&s(c(l)||l)},f=function(){let t=E(arguments),e=v(o)?o():o,u=h(e)&&e>=0;if(u){let f=v(a)?a():a,p=h(f)&&f>=0,b=e>0?ty:tp,y=c(t),g=y||t,m=s.bind(0,g);i();let w=(e>0?th:tb)(m,e);i=()=>b(w),p&&!r&&(r=th(d,f)),n=l=g}else s(t)};return f.m=d,f},{max:tj}=Math,t$=/[^\x20\t\r\n\f]+/g,tE=(t,e,r)=>{let n=t&&t.classList,l,i=0,o=!1;if(n&&e&&y(e)){let a=e.match(t$)||[];for(o=a.length>0;l=a[i++];)o=!!r(n,l)&&o}return o},tP=(t,e)=>tE(t,e,(t,e)=>t.contains(e)),tC=(t,e)=>{tE(t,e,(t,e)=>t.remove(e))},tk=(t,e)=>(tE(t,e,(t,e)=>t.add(e)),tC.bind(0,t,e)),tT={opacity:1,zindex:1},tL=(t,e)=>{let r=e?parseFloat(t):parseInt(t,10);return r==r?r:0},tA=(t,e)=>!tT[t.toLowerCase()]&&h(e)?`${e}px`:e,tM=(t,e,r)=>null!=e?e[r]||e.getPropertyValue(r):t.style[r],tI=(t,e,r)=>{try{let{style:n}=t;f(n[e])?n.setProperty(e,r):n[e]=tA(e,r)}catch(l){}},tz=t=>"rtl"===o(t,"direction"),tN=(t,e,r)=>{let n=e?`${e}-`:"",l=r?`-${r}`:"",i=`${n}top${l}`,a=`${n}right${l}`,u=`${n}bottom${l}`,s=`${n}left${l}`,c=o(t,[i,a,u,s]);return{t:tL(c[i],!0),r:tL(c[a],!0),b:tL(c[u],!0),l:tL(c[s],!0)}},{round:tR}=Math,tB={w:0,h:0},tZ=t=>t?{w:t.offsetWidth,h:t.offsetHeight}:tB,tH=t=>t?{w:t.clientWidth,h:t.clientHeight}:tB,tX=t=>t?{w:t.scrollWidth,h:t.scrollHeight}:tB,tD=t=>{let e=parseFloat(o(t,"height"))||0,r=parseFloat(o(t,"width"))||0;return{w:r-tR(r),h:e-tR(e)}},tF=t=>t.getBoundingClientRect(),tY,tK=()=>{if(f(tY)){tY=!1;try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get(){tY=!0}}))}catch(t){}}return tY},tq=t=>t.split(" "),tJ=(t,e,r,n)=>{i(tq(e),e=>{t.removeEventListener(e,r,n)})},tV=(t,e,r,n)=>{var l;let o=tK(),a=null!=(l=o&&n&&n.S)?l:o,u=n&&n.$||!1,s=n&&n.C||!1,c=[],d=o?{passive:a,capture:u}:u;return i(tq(e),e=>{let n=s?l=>{t.removeEventListener(e,n,u),r&&r(l)}:r;$(c,tJ.bind(null,t,e,n,u)),t.addEventListener(e,n,d)}),C.bind(0,c)},tW=t=>t.stopPropagation(),tG=t=>t.preventDefault(),tU={x:0,y:0},tQ=t=>{let e=t?tF(t):0;return e?{x:e.left+window.pageYOffset,y:e.top+window.pageXOffset}:tU},t0=(t,e)=>{i(m(e)?e:[e],t)},t1=t=>{let e=new Map,r=(t,r)=>{if(t){let n=e.get(t);t0(t=>{n&&n[t?"delete":"clear"](t)},r)}else e.forEach(t=>{t.clear()}),e.clear()},n=(t,l)=>{if(y(t)){let o=e.get(t)||new Set;return e.set(t,o),t0(t=>{v(t)&&o.add(t)},l),r.bind(0,t,l)}g(l)&&l&&r();let a=T(t),u=[];return i(a,e=>{let r=t[e];r&&$(u,n(e,r))}),C.bind(0,u)},l=(t,r)=>{let n=e.get(t);i(E(n),t=>{r&&!P(r)?t.apply(0,r):t()})};return n(t||{}),[n,r,l]},t3=t=>JSON.stringify(t,(t,e)=>{if(v(e))throw Error();return e}),t2={paddingAbsolute:!1,showNativeOverlaidScrollbars:!1,update:{elementEvents:[["img","load"]],debounce:[0,33],attributes:null,ignoreMutation:null},overflow:{x:"scroll",y:"scroll"},scrollbars:{theme:"os-theme-dark",visibility:"auto",autoHide:"never",autoHideDelay:1300,dragScroll:!0,clickScroll:!1,pointers:["mouse","touch","pen"]}},t8=(t,e)=>{let r={},n=T(e).concat(T(t));return i(n,n=>{let l=t[n],i=e[n];if(w(l)&&w(i))L(r[n]={},t8(l,i)),A(r[n])&&delete r[n];else if(k(e,n)&&i!==l){let o=!0;if(m(l)||m(i))try{t3(l)===t3(i)&&(o=!1)}catch(a){}o&&(r[n]=i)}}),r},t6="os-environment",t7=`${t6}-flexbox-glue`,t9=`${t7}-max`,t5="data-overlayscrollbars",t4=`${t5}-overflow-x`,et=`${t5}-overflow-y`,ee="overflowVisible",er="updating",en="os-viewport",el=`${en}-arrange`,ei=`${en}-scrollbar-hidden`,eo="os-overflow-visible",ea="os-size-observer",eu=`${ea}-appear`,es=`${ea}-listener`,ec="os-scrollbar",ed=`${ec}-rtl`,ef=`${ec}-horizontal`,ep=`${ec}-vertical`,eb=`${ec}-track`,eh=`${ec}-handle`,ey=`${ec}-visible`,eg=`${ec}-cornerless`,ev=`${ec}-transitionless`,em=`${ec}-interaction`,ew=`${ec}-unusable`,ex=`${ec}-auto-hidden`,eO=`${ec}-wheel`,e_=`${eb}-interactive`,eS=`${eh}-interactive`,ej={},e$=()=>ej,eE=t=>{let e=[];return i(m(t)?t:[t],t=>{let r=T(t);i(r,r=>{$(e,ej[r]=t[r])})}),e},eP={boolean:"__TPL_boolean_TYPE__",number:"__TPL_number_TYPE__",string:"__TPL_string_TYPE__",array:"__TPL_array_TYPE__",object:"__TPL_object_TYPE__",function:"__TPL_function_TYPE__",null:"__TPL_null_TYPE__"};eP.number,eP.boolean,eP.array,eP.null,eP.number,eP.array,eP.null,eP.function,eP.null,eP.string,eP.null,eP.array,eP.null;let{round:eC,abs:ek}=Math,eT="__osScrollbarsHidingPlugin",eL,eA=(t,e,r,n)=>{W(t,e);let l=tH(e),i=tZ(e),o=tD(r);return n&&Q(e),{x:i.h-l.h+o.h,y:i.w-l.w+o.w}},eM=t=>{let e=!1,r=tk(t,ei);try{e="none"===o(t,tu("scrollbar-width"))||"none"===window.getComputedStyle(t,"::-webkit-scrollbar").getPropertyValue("display")}catch(n){}return r(),e},eI=(t,e)=>{let r="hidden";o(t,{overflowX:r,overflowY:r,direction:"rtl"}),B(t,0);let n=tQ(t),l=tQ(e);B(t,-999);let i=tQ(e);return{i:n.x===l.x,n:l.x!==i.x}},ez=(t,e)=>{let r=tk(t,t7),n=tF(t),l=tF(e),i=tx(l,n,!0),o=tk(t,t9),a=tF(t),u=tF(e),s=tx(u,a,!0);return r(),o(),i&&s},eN=()=>{let{body:t}=document,e=te(`
`),r=e[0],n=r.firstChild,[l,,i]=t1(),[u,s]=a({o:eA(t,r,n),u:tm},eA.bind(0,t,r,n,!0)),[c]=s(),d=eM(r),f={x:0===c.x,y:0===c.y},p={elements:{host:null,padding:!d,viewport:t=>d&&t===t.ownerDocument.body&&t,content:!1},scrollbars:{slot:!0},cancel:{nativeScrollbarsOverlaid:!1,body:null}},b=L({},t2),h=L.bind(0,{},b),y=L.bind(0,{},p),g={k:c,I:f,A:d,L:"-1"===o(r,"zIndex"),V:eI(r,n),B:ez(r,n),Y:l.bind(0,"z"),j:l.bind(0,"r"),q:y,N:t=>L(p,t)&&y(),F:h,G:t=>L(b,t)&&h(),X:L({},p),U:L({},b)},v=window.addEventListener,m=tS(t=>i(t?"z":"r"),{g:33,v:99});if(R(r,"style"),Q(r),v("resize",m.bind(0,!1)),!d&&(!f.x||!f.y)){let w;v("resize",()=>{let t=e$()[eT];(w=w||t&&t.R())&&w(g,u,m.bind(0,!0))})}return g},eR=()=>(eL||(eL=eN()),eL),eB=(t,e)=>v(e)?e.apply(0,t):e,eZ=(t,e,r,n)=>{let l=f(n)?r:n,i=eB(t,l);return i||e.apply(0,t)},eH=(t,e,r,n)=>{let l=f(n)?r:n,i=eB(t,l);return!!i&&(_(i)?i:e.apply(0,t))},eX=(t,e,r)=>{let{nativeScrollbarsOverlaid:n,body:l}=r||{},{I:i,A:o}=eR(),{nativeScrollbarsOverlaid:a,body:u}=e,s=f(l)?u:l,c=(i.x||i.y)&&(null!=n?n:a),d=t&&(p(s)?!o:s);return!!c||!!d},eD=new WeakMap,eF=(t,e)=>{eD.set(t,e)},eY=t=>{eD.delete(t)},eK=t=>eD.get(t),eq=(t,e)=>t?e.split(".").reduce((t,e)=>t&&k(t,e)?t[e]:void 0,t):void 0,eJ=(t,e,r)=>n=>[eq(t,n),r||void 0!==eq(e,n)],eV=t=>{let e=t;return[()=>e,t=>{e=L({},e,t)}]},eW="tabindex",eG=tt.bind(0,""),eU=t=>{W(K(t),Y(t)),Q(t)},eQ=t=>{let e=eR(),{q:r,A:n}=e,l=e$()[eT],i=l&&l.T,{elements:o}=r(),{host:a,padding:u,viewport:s,content:c}=o,d=_(t),f=d?{}:t,{elements:p}=f,{host:b,padding:h,viewport:y,content:g}=p||{},v=d?t:f.target,m=F(v,"textarea"),w=v.ownerDocument,x=w.documentElement,O=v===w.body,S=w.defaultView,E=eZ.bind(0,[v]),P=eH.bind(0,[v]),k=eB.bind(0,[v]),L=E.bind(0,eG,s),A=P.bind(0,eG,c),M=L(y),B=M===v,Z=B&&O,H=!B&&A(g),X=!B&&_(M)&&M===H,D=X&&!!k(c),q=D?L():M,J=D?H:A(),V=X?q:M,tt=w.activeElement,te=!B&&S.top===S&&tt===v,tr={W:v,Z:m?E(eG,a,b):v,J:V,K:!B&&P(eG,u,h),tt:X?J:H,nt:!B&&!n&&i&&i(e),ot:Z?x:V,st:Z?w:V,et:S,ct:w,rt:m,it:O,lt:d,ut:B,dt:X,ft:(t,e)=>B?N(V,t5,e):tP(V,t),_t:(t,e,r)=>B?z(V,t5,e,r):(r?tk:tC)(V,t)},tn=T(tr).reduce((t,e)=>{let r=tr[e];return $(t,!!r&&!K(r)&&r)},[]),tl=t=>t?j(tn,t)>-1:null,{W:ti,Z:to,K:ta,J:tu,tt:ts,nt:tc}=tr,td=[()=>{R(to,t5),O&&R(x,t5)}],tf=m&&tl(to),tp=m?ti:Y([ts,tu,ta,to,ti].find(t=>!1===tl(t))),tb=ts||tu,th=()=>{I(to,t5,B?"viewport":"host");let t=tk(ta,"os-padding"),e=tk(tu,!B&&en),r=tk(ts,"os-content"),l=O?tk(K(v),ei):tO;if(tf&&(U(ti,to),$(td,()=>{U(to,ti),Q(to)})),W(tb,tp),W(to,ta),W(ta||to,!B&&tu),W(tu,ts),$(td,()=>{l(),R(tu,t4),R(tu,et),tl(ts)&&eU(ts),tl(tu)&&eU(tu),tl(ta)&&eU(ta),t(),e(),r()}),n&&!B&&$(td,tC.bind(0,tu,ei)),tc&&(G(tu,tc),$(td,Q.bind(0,tc))),te){let i=I(tu,eW);I(tu,eW,"-1"),tu.focus();let o=()=>i?I(tu,eW,i):R(tu,eW),a=tV(w,"pointerdown keydown",()=>{o(),a()});$(td,[o,a])}else tt&&tt.focus&&tt.focus();tp=0};return[tr,th,C.bind(0,td)]},e0=(t,e)=>{let{tt:r}=t,[n]=e;return t=>{let{B:e}=eR(),{ht:l}=n(),{gt:i}=t,a=(r||!e)&&i;return a&&o(r,{height:l?"":"100%"}),{vt:a,wt:a}}},e1=(t,e)=>{let[r,n]=e,{Z:l,K:i,J:u,ut:s}=t,[c,d]=a({u:tw,o:tN()},tN.bind(0,l,"padding",""));return(t,e,l)=>{let[a,f]=d(l),{A:p,B:b}=eR(),{bt:h}=r(),{vt:y,wt:g,yt:v}=t,[m,w]=e("paddingAbsolute");(y||f||!b&&g)&&([a,f]=c(l));let x=!s&&(w||v||f);if(x){let O=!m||!i&&!p,_=a.r+a.l,S=a.t+a.b,j={marginRight:O&&!h?-_:0,marginBottom:O?-S:0,marginLeft:O&&h?-_:0,top:O?-a.t:0,right:O?h?-a.r:"auto":0,left:O?h?"auto":-a.l:0,width:O?`calc(100% + ${_}px)`:""},$={paddingTop:O?a.t:0,paddingRight:O?a.r:0,paddingBottom:O?a.b:0,paddingLeft:O?a.l:0};o(i||u,j),o(u,$),n({K:a,St:!O,M:i?$:L({},j,$)})}return{xt:x}}},{max:e3}=Math,e2=e3.bind(0,0),e8="visible",e6="hidden",e7={u:tv,o:{w:0,h:0}},e9={u:tm,o:{x:e6,y:e6}},e5=(t,e)=>{let r=window.devicePixelRatio%1!=0?1:0,n={w:e2(t.w-e.w),h:e2(t.h-e.h)};return{w:n.w>r?n.w:0,h:n.h>r?n.h:0}},e4=(t,e,r)=>r?tk(t,e):tC(t,e),rt=t=>0===t.indexOf(e8),re=(t,e)=>{let[r,n]=e,{Z:l,K:i,J:u,nt:s,ut:c,_t:d,it:f,et:p}=t,{k:b,B:h,A:y,I:g}=eR(),v=e$()[eT],m=!c&&!y&&(g.x||g.y),w=f&&c,[x,O]=a(e7,tD.bind(0,u)),[_,S]=a(e7,tX.bind(0,u)),[j,$]=a(e7),[E,P]=a(e7),[C]=a(e9),k=(t,e)=>{if(o(u,{height:""}),e){let{St:n,K:i}=r(),{$t:a,P:s}=t,c=tD(l),d=tH(l),f="content-box"===o(u,"boxSizing"),p=n||f?i.b+i.t:0,b=!(g.x&&f);o(u,{height:d.h+c.h+(a.x&&b?s.x:0)-p})}},T=(t,e)=>{let r=y||t?0:42,n=(t,n,l)=>{let i=o(u,t),a=e?e[t]:i,s="scroll"===a;return[i,s,s&&!y?n?r:l:0,n&&!!r]},[l,i,a,s]=n("overflowX",g.x,b.x),[c,d,f,p]=n("overflowY",g.y,b.y);return{Ct:{x:l,y:c},$t:{x:i,y:d},P:{x:a,y:f},D:{x:s,y:p}}},L=(t,e,r,n)=>{let l=(t,e)=>{let r=rt(t),n=e&&r&&t.replace(`${e8}-`,"")||"";return[e&&!r?t:"",rt(n)?"hidden":n]},[i,o]=l(r.x,e.x),[a,u]=l(r.y,e.y);return n.overflowX=o&&a?o:i,n.overflowY=u&&i?u:a,T(t,n)},A=(t,e,n,l)=>{let{P:i,D:o}=t,{x:a,y:u}=o,{x:s,y:c}=i,{M:d}=r(),f=e?"marginLeft":"marginRight",p=e?"paddingLeft":"paddingRight",b=d[f],h=d.marginBottom,y=d[p],g=d.paddingBottom;l.width=`calc(100% + ${c+-1*b}px)`,l[f]=-c+b,l.marginBottom=-s+h,n&&(l[p]=y+(u?c:0),l.paddingBottom=g+(a?s:0))},[M,N]=v?v.H(m,h,u,s,r,T,A):[()=>m,()=>[tO]];return(t,e,a)=>{let{vt:s,Ot:f,wt:b,xt:v,gt:m,yt:R}=t,{ht:B,bt:Z}=r(),[H,X]=e("showNativeOverlaidScrollbars"),[D,F]=e("overflow"),Y=H&&g.x&&g.y,K=!c&&!h&&(s||b||f||X||m),q=rt(D.x),J=rt(D.y),V=q||J,W=O(a),G=S(a),U=$(a),Q=P(a),tt;if(X&&y&&d(ei,"scrollbarHidden",!Y),K&&(tt=T(Y),k(tt,B)),s||v||b||R||X){V&&d(eo,ee,!1);let[te,tr]=N(Y,Z,tt),[tn,tl]=W=x(a),[ti,to]=G=_(a),ta=tH(u),tu=ti,ts=ta;te(),(to||tl||X)&&tr&&!Y&&M(tr,ti,tn,Z)&&(ts=tH(u),tu=tX(u));let tc={w:e2(e3(ti.w,tu.w)+tn.w),h:e2(e3(ti.h,tu.h)+tn.h)},td={w:e2((w?p.innerWidth:ts.w+e2(ta.w-ti.w))+tn.w),h:e2((w?p.innerHeight+tn.h:ts.h+e2(ta.h-ti.h))+tn.h)};Q=E(td),U=j(e5(tc,td),a)}let[tf,tp]=Q,[tb,th]=U,[ty,tg]=G,[tv,tm]=W,tw={x:tb.w>0,y:tb.h>0},tx=q&&J&&(tw.x||tw.y)||q&&tw.x&&!tw.y||J&&tw.y&&!tw.x;if(v||R||tm||tg||tp||th||F||X||K){let tO={marginRight:0,marginBottom:0,marginLeft:0,width:"",overflowY:"",overflowX:""},t_=L(Y,tw,D,tO),tS=M(t_,ty,tv,Z);c||A(t_,Z,tS,tO),K&&k(t_,B),c?(I(l,t4,tO.overflowX),I(l,et,tO.overflowY)):o(u,tO)}z(l,t5,ee,tx),e4(i,eo,tx),c||e4(u,eo,V);let[tj,t$]=C(T(Y).Ct);return n({Ct:tj,zt:{x:tf.w,y:tf.h},Tt:{x:tb.w,y:tb.h},Et:tw}),{At:t$,It:tp,Lt:th}}},rr=(t,e,r)=>{let n={},l=e||{},o=T(t).concat(T(l));return i(o,e=>{let i=t[e],o=l[e];n[e]=!!(r||i||o)}),n},rn=(t,e)=>{let{W:r,J:n,_t:l,ut:o}=t,{A:a,I:u,B:s}=eR(),c=!a&&(u.x||u.y),d=[e0(t,e),e1(t,e),re(t,e)];return(t,e,a)=>{let u=rr(L({vt:!1,xt:!1,yt:!1,gt:!1,It:!1,Lt:!1,At:!1,Ot:!1,wt:!1},e),{},a),f=c||!s,p=f&&B(n),b=f&&Z(n);l("",er,!0);let h=u;return i(d,e=>{h=rr(h,e(h,t,!!a)||{},a)}),B(n,p),Z(n,b),l("",er),o||(B(r,0),Z(r,0)),h}},rl=(t,e,r)=>{let n,l=!1,o=()=>{l=!0},a=o=>{if(r){let a=r.reduce((e,r)=>{if(r){let[n,l]=r,i=l&&n&&(o?o(n):X(n,t));i&&i.length&&l&&y(l)&&$(e,[i,l.trim()],!0)}return e},[]);i(a,r=>i(r[0],i=>{let o=r[1],a=n.get(i)||[],u=t.contains(i);if(u){let s=tV(i,o,t=>{l?(s(),n.delete(i)):e(t)});n.set(i,$(a,s))}else C(a),n.delete(i)}))}};return r&&(n=new WeakMap,a()),[o,a]},ri=(t,e,r,n)=>{let l=!1,{Ht:o,Mt:a,Pt:u,Dt:s,Rt:c,kt:d}=n||{},f=tS(()=>{l&&r(!0)},{g:33,v:99}),[p,b]=rl(t,f,u),h=a||[],g=(o||[]).concat(h),v=(l,o)=>{let a=c||tO,u=d||tO,f=new Set,p=new Set,g=!1,v=!1;if(i(l,r=>{let{attributeName:l,target:o,type:c,oldValue:d,addedNodes:b,removedNodes:m}=r,w="attributes"===c,x=t===o,O=w&&y(l)?I(o,l):0,_=0!==O&&d!==O,S=j(h,l)>-1&&_;if(e&&("childList"===c||!x)){let $=w&&_,E=$&&s&&F(o,s),P=E?!a(o,l,d,O):!w||$,C=P&&!u(r,!!E,t,n);i(b,t=>f.add(t)),i(m,t=>f.add(t)),v=v||C}!e&&x&&_&&!a(o,l,d,O)&&(p.add(l),g=g||S)}),f.size>0&&b(t=>E(f).reduce((e,r)=>($(e,X(t,r)),F(r,t)?$(e,r):e),[])),e)return!o&&v&&r(!1),[!1];if(p.size>0||g){let m=[E(p),g];return o||r.apply(0,m),m}},m=new tc(t=>v(t));return m.observe(t,{attributes:!0,attributeOldValue:!0,attributeFilter:g,subtree:e,childList:e,characterData:e}),l=!0,[()=>{l&&(p(),m.disconnect(),l=!1)},()=>{if(l){f.m();let t=m.takeRecords();return!P(t)&&v(t,!0)}}]},ro=t=>t&&(t.height||t.width),ra=(t,e,r)=>{let{Vt:n=!1,Bt:l=!1}=r||{},i=e$().__osSizeObserverPlugin,{V:o}=eR(),u=te(`
`),s=u[0],c=s.firstChild,d=tz.bind(0,t),[f]=a({o:void 0,_:!0,u:(t,e)=>!(!t||!ro(t)&&ro(e))}),p=t=>{let r=m(t)&&t.length>0&&w(t[0]),l=!r&&g(t[0]),i=!1,a=!1,u=!0;if(r){let[c,,d]=f(t.pop().contentRect),p=ro(c),b=ro(d);i=!d||!p,a=!b&&p,u=!i}else l?[,u]=t:a=!0===t;if(n&&u){let h=l?t[0]:tz(s);B(s,h?o.n?-3333333:o.i?0:3333333:3333333),Z(s,3333333)}i||e({vt:!l,Yt:l?t:void 0,Bt:!!a})},b=[],h=!!l&&p;return[()=>{C(b),Q(s)},()=>{if(tf){let e=new tf(p);e.observe(c),$(b,()=>{e.disconnect()})}else if(i){let[r,o]=i.O(c,p,l);h=r,$(b,o)}if(n){let[u]=a({o:!d()},d);$(b,tV(s,"scroll",t=>{let e=u(),[r,n]=e;n&&(tC(c,"ltr rtl"),r?tk(c,"rtl"):tk(c,"ltr"),p(e)),tW(t)}))}h&&(tk(s,eu),$(b,tV(s,"animationstart",h,{C:!!tf}))),(tf||i)&&W(t,s)}]},ru=t=>0===t.h||t.isIntersecting||t.intersectionRatio>0,rs=(t,e)=>{let r,n=tt("os-trinsic-observer"),l=[],[i]=a({o:!1}),o=(t,r)=>{if(t){let n=i(ru(t)),[,l]=n;if(l)return r||e(n),[n]}},u=(t,e)=>{if(t&&t.length>0)return o(t.pop(),e)};return[()=>{C(l),Q(n)},()=>{if(td)(r=new td(t=>u(t),{root:t})).observe(n),$(l,()=>{r.disconnect()});else{let e=()=>{let t=tZ(n);o(t)},[i,a]=ra(n,e);$(l,i),a(),e()}W(t,n)},()=>{if(r)return u(r.takeRecords(),!0)}]},rc=`[${t5}]`,rd=`.${en}`,rf=["tabindex"],rp=["wrap","cols","rows"],rb=["id","class","style","open"],rh=(t,e,r)=>{let n,l,o,{Z:u,J:s,tt:c,rt:d,ut:f,ft:p,_t:b}=t,{B:g}=eR(),[w]=a({u:tv,o:{w:0,h:0}},()=>{let t=p(eo,ee),e=p(el,""),r=e&&B(s),n=e&&Z(s);b(eo,ee),b(el,""),b("",er,!0);let l=tX(c),i=tX(s),o=tD(s);return b(eo,ee,t),b(el,"",e),b("",er),B(s,r),Z(s,n),{w:i.w+l.w+o.w,h:i.h+l.h+o.h}}),x=d?rp:rb.concat(rp),O=tS(r,{g:()=>n,v:()=>l,p(t,e){let[r]=t,[n]=e;return[T(r).concat(T(n)).reduce((t,e)=>(t[e]=r[e]||n[e],t),{})]}}),_=t=>{i(t||rf,t=>{if(j(rf,t)>-1){let e=I(u,t);y(e)?I(s,t,e):R(s,t)}})},S=(t,n)=>{let[l,i]=t,o={gt:i};return e({ht:l}),n||r(o),o},E=({vt:t,Yt:n,Bt:l})=>{let i=!1;if(n){let[o,a]=n;i=a,e({bt:o})}(!t||l?r:O)({vt:t,yt:i})},P=(t,e)=>{let[,n]=w(),l={wt:n};return n&&(e||(t?r:O)(l)),l},C=(t,e,r)=>{let n={Ot:e};return e?r||O(n):f||_(t),n},[k,A,M]=c||!g?rs(u,S):[tO,tO,tO],[z,N]=f?[tO,tO]:ra(u,E,{Bt:!0,Vt:!0}),[H,X]=ri(u,!1,C,{Mt:rb,Ht:rb.concat(rf)}),D=f&&tf&&new tf(E.bind(0,{vt:!0}));return D&&D.observe(u),_(),[()=>{k(),z(),o&&o[0](),D&&D.disconnect(),H()},()=>{N(),A()},()=>{let t={},e=X(),r=M(),n=o&&o[1]();return e&&L(t,C.apply(0,$(e,!0))),r&&L(t,S.apply(0,$(r,!0))),n&&L(t,P.apply(0,$(n,!0))),t},t=>{let[e]=t("update.ignoreMutation"),[r,i]=t("update.attributes"),[a,u]=t("update.elementEvents"),[d,p]=t("update.debounce"),b=t=>v(e)&&e(t);if((u||i)&&(o&&(o[1](),o[0]()),o=ri(c||s,!0,P,{Ht:x.concat(r||[]),Pt:a,Dt:rc,kt(t,e){let{target:r,attributeName:n}=t,l=!e&&!!n&&!f&&J(r,rc,rd);return l||!!q(r,`.${ec}`)||!!b(t)}})),p){if(O.m(),m(d)){let y=d[0],g=d[1];n=h(y)&&y,l=h(g)&&g}else h(d)?(n=d,l=!1):(n=!1,l=!1)}}]},ry={x:0,y:0},rg={K:{t:0,r:0,b:0,l:0},St:!1,M:{marginRight:0,marginBottom:0,marginLeft:0,paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0},zt:ry,Tt:ry,Ct:{x:"hidden",y:"hidden"},Et:{x:!1,y:!1},ht:!1,bt:!1},rv=(t,e)=>{let r=eJ(e,{}),n=eV(rg),[l,i,o]=t1(),[a,u]=n,[s,c,d]=eQ(t),f=rn(s,n),p=(t,e,r)=>{let n=T(t).some(e=>t[e]),l=n||!A(e)||r;return l&&o("u",[t,e,r]),l},[b,h,y,g]=rh(s,u,t=>p(f(r,t),{},!1)),v=a.bind(0);return v.jt=t=>l("u",t),v.qt=()=>{let{W:t,J:e}=s,r=B(t),n=Z(t);h(),c(),B(e,r),Z(e,n)},v.Nt=s,[(t,r)=>{let n=eJ(e,t,r);return g(n),p(f(n,y(),r),t,!!r)},v,()=>{i(),b(),d()}]},{round:rm}=Math,rw=t=>{let{width:e,height:r}=tF(t),{w:n,h:l}=tZ(t);return{x:rm(e)/n||1,y:rm(r)/l||1}},rx=(t,e,r)=>{let n=e.scrollbars,{button:l,isPrimary:i,pointerType:o}=t,{pointers:a}=n;return 0===l&&i&&n[r?"dragScroll":"clickScroll"]&&(a||[]).includes(o)},rO=(t,e)=>tV(t,"mousedown",tV.bind(0,e,"click",tW,{C:!0,$:!0}),{$:!0}),r_=(t,e,r,n,l,i)=>{let{V:o}=eR(),{Ft:a,Gt:u,Xt:s}=r,c=`scroll${i?"Left":"Top"}`,d=`client${i?"X":"Y"}`,f=i?"width":"height",p=i?"left":"top",b=i?"w":"h",h=i?"x":"y",y=(t,e)=>r=>{let{Tt:d}=l(),f=tZ(u)[b]-tZ(a)[b],p=e*r/f*d[h],y=tz(s),g=y&&i?o.n||o.i?1:-1:1;n[c]=t+p*g};return tV(u,"pointerdown",r=>{let l=q(r.target,`.${eh}`)===a;if(rx(r,t,l)){let i=!l&&r.shiftKey,o=()=>tF(a),s=()=>tF(u),b=(t,e)=>(t||o())[p]-(e||s())[p],g=y(n[c]||0,1/rw(n)[h]),v=r[d],m=o(),w=s(),x=m[f],O=b(m,w)+x/2,_=v-w[p],S=l?0:_-O,j=[tV(e,"selectstart",t=>tG(t),{S:!1}),tV(u,"pointermove",t=>{let e=t[d]-v;(l||i)&&g(S+e)})];if(i)g(S);else if(!l){let E=e$().__osClickScrollPlugin;E&&$(j,E.O(g,b,S,x,_))}tV(u,"pointerup",t=>{C(j),u.releasePointerCapture(t.pointerId)},{C:!0}),u.setPointerCapture(r.pointerId)}})},rS=(t,e)=>(r,n,l,i,o,a)=>{let{Xt:u}=r,[s,c]=t_(333),d=!!o.scrollBy,f=!0;return C.bind(0,[tV(u,"pointerenter",()=>{n(em,!0)}),tV(u,"pointerleave pointercancel",()=>{n(em)}),tV(u,"wheel",t=>{let{deltaX:e,deltaY:r,deltaMode:l}=t;d&&f&&0===l&&K(u)===i&&o.scrollBy({left:e,top:r,behavior:"smooth"}),f=!1,n(eO,!0),s(()=>{f=!0,n(eO)}),tG(t)},{S:!1,$:!0}),rO(u,l),r_(t,l,r,o,e,a),c])},{min:rj,max:r$,abs:rE,round:rP}=Math,rC=(t,e,r,n)=>{if(n){let l=r?"x":"y",{Tt:i,zt:o}=n,a=o[l],u=i[l];return r$(0,rj(1,a/(a+u)))}let s=r?"w":"h",c=tZ(t)[s],d=tZ(e)[s];return r$(0,rj(1,c/d))},rk=(t,e,r,n,l,i)=>{let{V:o}=eR(),{Tt:a}=n,u=rP(a[i?"x":"y"]),s=rE(r[`scroll${i?"Left":"Top"}`]),c=o.i?s:u-s,d=rj(1,(i&&l?c:s)/u),f=rC(t,e,i);return 1/f*(1-f)*d},rT=(t,e,r)=>{let{q:n}=eR(),{scrollbars:l}=n(),{slot:a}=l,{ct:u,W:s,Z:c,J:d,lt:f,ot:p}=e,{scrollbars:b}=f?{}:t,{slot:h}=b||{},y=eH([s,c,d],()=>c,a,h),v=(t,e,r)=>{let n=r?tk:tC;i(t,t=>{n(t.Xt,e)})},m=(t,e)=>{i(t,t=>{let[r,n]=e(t);o(r,n)})},w=(t,e,r)=>{m(t,t=>{let{Ft:n,Gt:l}=t;return[n,{[r?"width":"height"]:`${(100*rC(n,l,r,e)).toFixed(3)}%`}]})},x=(t,e,r)=>{let n=r?"X":"Y";m(t,t=>{let{Ft:l,Gt:i,Xt:o}=t,a=rk(l,i,p,e,tz(o),r);return[l,{transform:a==a?`translate${n}(${(100*a).toFixed(3)}%)`:""}]})},O=[],_=[],S=[],j=(t,e,r)=>{let n=g(r);(!n||r)&&v(_,t,e),n&&r||v(S,t,e)},E=t=>{w(_,t,!0),w(S,t)},k=t=>{x(_,t,!0),x(S,t)},T=t=>{let e=t?_:S,n=P(e)?ev:"",l=tt(`${ec} ${t?ef:ep} ${n}`),i=tt(eb),o=tt(eh),a={Xt:l,Gt:i,Ft:o};return W(l,i),W(i,o),$(e,a),$(O,[Q.bind(0,l),r(a,j,u,c,p,t)]),a},L=T.bind(0,!0),A=T.bind(0,!1),M=()=>{W(y,_[0].Xt),W(y,S[0].Xt),th(()=>{j(ev)},300)};return L(),A(),[{Ut:E,Wt:k,Zt:j,Jt:{Kt:_,Qt:L,tn:m.bind(0,_)},nn:{Kt:S,Qt:A,tn:m.bind(0,S)}},M,C.bind(0,O)]},rL=(t,e,r,n)=>{let l,i,o,a,u,s=0,c=eV({}),[d]=c,[f,p]=t_(),[b,h]=t_(),[y,g]=t_(100),[v,m]=t_(100),[w,x]=t_(()=>s),[O,_,S]=rT(t,r.Nt,rS(e,r)),{Z:j,J:$,ot:E,st:P,ut:k,it:T}=r.Nt,{Jt:L,nn:A,Zt:M,Ut:I,Wt:z}=O,{tn:N}=L,{tn:R}=A,H=t=>{let{Xt:e}=t,r=k&&!T&&K(e)===$&&e;return[r,{transform:r?`translate(${B(E)}px, ${Z(E)}px)`:""}]},X=(t,e)=>{if(x(),t)M(ex);else{let r=()=>M(ex,!0);s>0&&!e?w(r):r()}},D=()=>{(a=i)&&X(!0)},F=[g,x,m,h,p,S,tV(j,"pointerover",D,{C:!0}),tV(j,"pointerenter",D),tV(j,"pointerleave",()=>{a=!1,i&&X(!1)}),tV(j,"pointermove",()=>{l&&f(()=>{g(),X(!0),v(()=>{l&&X(!1)})})}),tV(P,"scroll",t=>{b(()=>{z(r()),o&&X(!0),y(()=>{o&&!a&&X(!1)})}),n(t),k&&N(H),k&&R(H)})],Y=d.bind(0);return Y.Nt=O,Y.qt=_,[(t,n,a)=>{let{It:c,Lt:d,At:f,yt:p}=a,b=eJ(e,t,n),h=r(),{Tt:y,Ct:g,bt:v}=h,[m,w]=b("scrollbars.theme"),[x,O]=b("scrollbars.visibility"),[_,S]=b("scrollbars.autoHide"),[j]=b("scrollbars.autoHideDelay"),[$,E]=b("scrollbars.dragScroll"),[P,C]=b("scrollbars.clickScroll"),k=(t,e)=>{let r="visible"===x||"auto"===x&&"scroll"===t;return M(ey,r,e),r};if(s=j,w&&(M(u),M(m,!0),u=m),S&&(l="move"===_,i="leave"===_,X(!(o="never"!==_),!0)),E&&M(eS,$),C&&M(e_,P),f||O||n){let L=k(g.x,!0),A=k(g.y,!1);M(eg,!(L&&A))}(c||d||p||n)&&(I(h),z(h),M(ew,!y.x,!0),M(ew,!y.y,!1),M(ed,v&&!T))},Y,C.bind(0,F)]},rA=(t,e,r)=>{v(t)&&t(e||void 0,r||void 0)},rM=(t,e,r)=>{let{F:n,q:l,Y:o,j:a}=eR(),u=e$(),s=_(t),c=s?t:t.target,d=eK(c);if(e&&!d){let f=!1,p=t=>{let e=e$().__osOptionsValidationPlugin,r=e&&e.O;return r?r(t,!0):t},b=L({},n(),p(e)),[h,y,g]=t1(r),[v,m,w]=rv(t,b),[x,O,S]=rL(t,b,m,t=>g("scroll",[k,t])),j=(t,e)=>v(t,!!e),$=j.bind(0,{},!0),E=o($),P=a($),C=t=>{eY(c),E(),P(),S(),w(),f=!0,g("destroyed",[k,!!t]),y()},k={options(t,e){if(t){let r=e?n():{},l=t8(b,L(r,p(t)));A(l)||(L(b,l),j(l))}return L({},b)},on:h,off(t,e){t&&e&&y(t,e)},state(){let{zt:t,Tt:e,Ct:r,Et:n,K:l,St:i,bt:o}=m();return L({},{overflowEdge:t,overflowAmount:e,overflowStyle:r,hasOverflow:n,padding:l,paddingAbsolute:i,directionRTL:o,destroyed:f})},elements(){let{W:t,Z:e,K:r,J:n,tt:l,ot:i,st:o}=m.Nt,{Jt:a,nn:u}=O.Nt,s=t=>{let{Ft:e,Gt:r,Xt:n}=t;return{scrollbar:n,track:r,handle:e}},c=t=>{let{Kt:e,Qt:r}=t,n=s(e[0]);return L({},n,{clone(){let t=s(r());return x({},!0,{}),t}})};return L({},{target:t,host:e,padding:r||n,viewport:n,content:l||n,scrollOffsetElement:i,scrollEventElement:o,scrollbarHorizontal:c(a),scrollbarVertical:c(u)})},update:t=>j({},t),destroy:C.bind(0)};return(m.jt((t,e,r)=>{x(e,r,t)}),eF(c,k),i(T(u),t=>rA(u[t],0,k)),eX(m.Nt.it,l().cancel,!s&&t.cancel))?(C(!0),k):(m.qt(),O.qt(),g("initialized",[k]),m.jt((t,e,r)=>{let{vt:n,yt:l,gt:i,It:o,Lt:a,At:u,wt:s,Ot:c}=t;g("updated",[k,{updateHints:{sizeChanged:n,directionChanged:l,heightIntrinsicChanged:i,overflowEdgeChanged:o,overflowAmountChanged:a,overflowStyleChanged:u,contentMutation:s,hostMutation:c},changedOptions:e,force:r}])}),k.update(!0),k)}return d};rM.plugin=t=>{i(eE(t),t=>rA(t,rM))},rM.valid=t=>{let e=t&&t.elements,r=v(e)&&e();return O(r)&&!!eK(r.target)},rM.env=()=>{let{k:t,I:e,A:r,V:n,B:l,L:i,X:o,U:a,q:u,N:s,F:c,G:d}=eR();return L({},{scrollbarsSize:t,scrollbarsOverlaid:e,scrollbarsHiding:r,rtlScrollBehavior:n,flexboxGlue:l,cssCustomProperties:i,staticDefaultInitialization:o,staticDefaultOptions:a,getDefaultInitialization:u,setDefaultInitialization:s,getDefaultOptions:c,setDefaultOptions:d})};let rI=t=>{let{options:e,events:r}=t||{},n=(0,l.useRef)(null),i=(0,l.useRef)(e),o=(0,l.useRef)(r);return(0,l.useEffect)(()=>{let{current:t}=n;i.current=e,rM.valid(t)&&t.options(e||{},!0)},[e]),(0,l.useEffect)(()=>{let{current:t}=n;o.current=r,rM.valid(t)&&t.on(r||{},!0)},[r]),(0,l.useMemo)(()=>[t=>{let e=n.current;if(rM.valid(e))return e;let r=i.current||{},l=o.current||{};return n.current=rM(t,r,l)},()=>n.current],[])},rz=(t,e)=>{let{element:r="div",options:n,events:i,children:o,...a}=t,u=(0,l.useRef)(null),s=(0,l.useRef)(null),[c,d]=rI({options:n,events:i});return(0,l.useEffect)(()=>{let{current:t}=u,{current:e}=s;if(t&&e){let r=c({target:t,elements:{viewport:e,content:e}});return()=>r.destroy()}},[c,r]),(0,l.useImperativeHandle)(e,()=>({osInstance:d,getElement:()=>u.current}),[]),l.createElement(r,{"data-overlayscrollbars-initialize":"",ref:u,...a},l.createElement("div",{ref:s},o))};(0,l.forwardRef)(rz);var rN=function(t){var e=(0,n.Z)(rI(t),2),r=e[0],i=e[1];return(0,l.useMemo)(function(){return[function(t){window.requestIdleCallback?window.requestIdleCallback(function(){r(t)},{timeout:2e3}):r(t)},i]},[r,i])}},1311:function(t,e,r){"use strict";r.r(e),r.d(e,{default:function(){return g}});var n=r(9722),l=r(169),i=r(1809),o=r(6702),a=r(7378),u=r(4246),s=function(t){var e=t.children,r=(0,a.useRef)(null),n=(0,i.Z)((0,o.a)({options:{paddingAbsolute:!0,scrollbars:{autoHide:"leave"}}}),2),l=n[0],s=n[1];return(0,a.useEffect)(function(){if(r.current)return l(r.current),function(){var t;return null===(t=s())||void 0===t?void 0:t.destroy()}},[]),(0,u.jsx)("pre",{ref:r,"data-overlayscrollbars-initialize":!0,children:e})},c=r(1373),d=function(t){var e=t.id,r=t.tag,l=(0,c.Z)(t,["id","tag"]);return e?(0,u.jsx)(u.Fragment,{children:(0,u.jsx)(r,(0,n.Z)({},l))}):(0,u.jsx)(r,(0,n.Z)({},l))};r(2586),r(2431),r(5532);var f=r(8038),p=r.n(f),b=r(1670),h={src:"/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico",height:256,width:256},y=function(t,e){return(0,u.jsx)(d,(0,l.Z)((0,n.Z)({},t),{tag:e}))},g=function(t){var e=t.Component,r=t.pageProps,l=(0,i.Z)((0,o.a)(),2),c=l[0],d=l[1];return(0,a.useEffect)(function(){return c(document.body),function(){var t;return null===(t=d())||void 0===t?void 0:t.destroy()}},[]),(0,u.jsx)(b.Zo,{components:{h1:function(t){return y(t,"h1")},h2:function(t){return y(t,"h2")},h3:function(t){return y(t,"h3")},h4:function(t){return y(t,"h4")},h5:function(t){return y(t,"h5")},h6:function(t){return y(t,"h6")},pre:s},children:(0,u.jsxs)("div",{className:"font-sans font-normal text-primary-dark",children:[(0,u.jsxs)(p(),{children:[(0,u.jsx)("title",{children:"OverlayScrollbars"},"title"),(0,u.jsx)("meta",{name:"description",content:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."},"description"),(0,u.jsx)("link",{rel:"icon",href:h.src}),(0,u.jsx)("link",{rel:"shortcut icon",type:"image/x-icon",href:h.src}),(0,u.jsx)("meta",{httpEquiv:"X-UA-Compatible",content:"IE=edge"}),(0,u.jsx)("meta",{name:"theme-color",content:"#36befd"}),(0,u.jsx)("meta",{name:"msapplication-TileColor",content:"#36befd"}),(0,u.jsx)("meta",{name:"msapplication-navbutton-color",content:"#36befd"}),(0,u.jsx)("meta",{name:"application-name",content:"OverlayScrollbars"}),(0,u.jsx)("meta",{name:"msapplication-tooltip",content:"OverlayScrollbars"}),(0,u.jsx)("meta",{name:"apple-mobile-web-app-title",content:"OverlayScrollbars"}),(0,u.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify({"@context":"http://schema.org","@type":"SoftwareSourceCode",url:"https://kingsora.github.io/OverlayScrollbars",name:"OverlayScrollbars",description:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",license:"https://en.wikipedia.org/wiki/MIT_License",keywords:"js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking",isAccessibleForFree:!0,image:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png",codeRepository:"https://github.com/KingSora/OverlayScrollbars",runtimePlatform:"browser",maintainer:{"@type":"Person",name:"Rene Haas",additionalName:"KingSora",url:"https://github.com/KingSora"},programmingLanguage:{"@type":"ComputerLanguage",name:"javascript",alternateName:"js"}})}})]}),(0,u.jsx)(e,(0,n.Z)({},r))]})})}},5532:function(){},2431:function(){},2586:function(){},8038:function(t,e,r){t.exports=r(555)},1670:function(t,e,r){"use strict";r.d(e,{Zo:function(){return a},ah:function(){return i}});var n=r(7378);let l=n.createContext({});function i(t){let e=n.useContext(l);return n.useMemo(()=>"function"==typeof t?t(e):{...e,...t},[e,t])}let o={};function a({components:t,children:e,disableParentContext:r}){let a=i(t);return r&&(a=t||o),n.createElement(l.Provider,{value:a},e)}},9722:function(t,e,r){"use strict";function n(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function l(t){for(var e=1;e=0||(l[r]=t[r]);return l}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n=0)&&Object.prototype.propertyIsEnumerable.call(t,r)&&(l[r]=t[r])}return l}r.d(e,{Z:function(){return n}})},1809:function(t,e,r){"use strict";function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);rt.length)&&(n=t.length);for(var r=0,e=Array(n);r-1&&n%1==0;return(!!O(t)||!x(t)&&!!r)&&(!(n>0&&S(t))||n-1 in t)},j=function(t){if(!t||!S(t)||"object"!==(h(n=t)||y(n)?"".concat(n):p.call(n).replace(/^\[object (.+)\]$/,"$1").toLowerCase()))return!1;var n,r,e="constructor",o=t[e],i=o&&o.prototype,u=b.call(t,e),c=i&&b.call(i,"isPrototypeOf");if(o&&!u&&!c)return!1;for(r in t);return h(r)||b.call(t,r)},P=function(t){var n=HTMLElement;return!!t&&(n?o(t,n):t.nodeType===d)},E=function(t){var n=Element;return!!t&&(n?o(t,n):t.nodeType===d)},C=function(t,n,r){return t.indexOf(n,r)},T=function(t,n,r){return!r&&!m(n)&&_(n)?Array.prototype.push.apply(t,n):t.push(n),t},L=function(t){var n=Array.from,r=[];return n&&t?n(t):(o(t,Set)?t.forEach(function(t){T(r,t)}):c(t,function(t){T(r,t)}),r)},k=function(t){return!!t&&0===t.length},A=function(t,n,r){c(t,function(t){return t&&t.apply(void 0,n||[])}),r||(t.length=0)},M=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},N=function(t){return t?Object.keys(t):[]},I=function(t,n,r,e,o,i,u){return("object"!=typeof t||y(t))&&!x(t)&&(t={}),c([n,r,e,o,i,u],function(n){c(N(n),function(r){var e=n[r];if(t===e)return!0;var o=O(e);if(e&&(j(e)||o)){var i=t[r],u=i;o&&!O(i)?u=[]:o||j(i)||(u={}),t[r]=I(u,e)}else t[r]=e})}),t},z=function(t){for(var n in t)return!1;return!0},B=function(t,n,r,e){if(h(e))return r?r[t]:n;r&&(m(e)||g(e))&&(r[t]=e)},Z=function(t,n,r){if(h(r))return t?t.getAttribute(n):null;t&&t.setAttribute(n,r)},X=function(t,n,r,e){if(r){var o=Z(t,n)||"",i=new Set(o.split(" "));i[e?"add":"delete"](r),Z(t,n,L(i).join(" ").trim())}},D=function(t,n,r){var e=Z(t,n)||"";return new Set(e.split(" ")).has(r)},H=function(t,n){t&&t.removeAttribute(n)},F=function(t,n){return B("scrollLeft",0,t,n)},R=function(t,n){return B("scrollTop",0,t,n)},Y=s()&&Element.prototype,K=function(t,n){var r=[],e=n?E(n)?n:null:document;return e?T(r,e.querySelectorAll(t)):r},J=function(t,n){var r=n?E(n)?n:null:document;return r?r.querySelector(t):null},V=function(t,n){return!!E(t)&&(Y.matches||Y.msMatchesSelector).call(t,n)},W=function(t){return t?L(t.childNodes):[]},q=function(t){return t?t.parentElement:null},$=function(t,n){if(E(t)){var r=Y.closest;if(r)return r.call(t,n);do{if(V(t,n))return t;t=q(t)}while(t)}return null},G=function(t,n,r){var e=t&&$(t,n),o=t&&J(r,e),i=$(o,n)===e;return!!e&&!!o&&(e===t||o===t||i&&$($(t,r),n)!==e)},U=function(t,n,r){if(r&&t){var e,o=n;_(r)?(e=document.createDocumentFragment(),c(r,function(t){t===o&&(o=t.previousSibling),e.appendChild(t)})):e=r,n&&(o?o!==n&&(o=o.nextSibling):o=t.firstChild),t.insertBefore(e,o||null)}},Q=function(t,n){U(t,null,n)},tt=function(t,n){U(q(t),t,n)},tn=function(t,n){U(q(t),t&&t.nextSibling,n)},tr=function(t){if(_(t))c(L(t),function(t){return tr(t)});else if(t){var n=q(t);n&&n.removeChild(t)}},te=function(t){var n=document.createElement("div");return t&&Z(n,"class",t),n},to=function(t){var n=te();return n.innerHTML=t.trim(),c(W(n),function(t){return tr(t)})},ti=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},tu=["-webkit-","-moz-","-o-","-ms-"],tc=["WebKit","Moz","O","MS","webkit","moz","o","ms"],ta={},tf={},tl=function(t){var n=tf[t];if(M(tf,t))return n;var r=ti(t),e=te().style;return c(tu,function(o){var i=o.replace(/-/g,"");return!(n=[t,o+t,i+r,ti(i)+r].find(function(t){return void 0!==e[t]}))}),tf[t]=n||""},ts=function(t){if(s()){var n=ta[t]||window[t];return M(ta,t)||(c(tc,function(r){return!(n=n||window[r+ti(t)])}),ta[t]=n),n}},td=ts("MutationObserver"),tv=ts("IntersectionObserver"),tp=ts("ResizeObserver"),tb=ts("cancelAnimationFrame"),th=ts("requestAnimationFrame"),ty=s()&&window.setTimeout,tg=s()&&window.clearTimeout,tm=function(t,n,r,e){if(t&&n){var o=!0;return c(r,function(r){var i=e?e(t[r]):t[r],u=e?e(n[r]):n[r];i!==u&&(o=!1)}),o}return!1},tw=function(t,n){return tm(t,n,["w","h"])},tx=function(t,n){return tm(t,n,["x","y"])},tO=function(t,n){return tm(t,n,["t","r","b","l"])},tS=function(t,n,r){return tm(t,n,["width","height"],r&&function(t){return Math.round(t)})},t_=function(){},tj=function(t){var n,r=t?ty:th,e=t?tg:tb;return[function(o){e(n),n=r(o,x(t)?t():t)},function(){return e(n)}]},tP=function(t,n){var r,e,o,i=t_,u=n||{},c=u.g,a=u.v,f=u.p,l=function(n){i(),tg(r),r=e=void 0,i=t_,t.apply(this,n)},s=function(t){return f&&e?f(e,t):t},d=function(){i!==t_&&l(s(o)||o)},v=function(){var t=L(arguments),n=x(c)?c():c;if(g(n)&&n>=0){var u=x(a)?a():a,f=g(u)&&u>=0,v=n>0?tg:tb,p=s(t)||t,b=l.bind(0,p);i();var h=(n>0?ty:th)(b,n);i=function(){return v(h)},f&&!r&&(r=ty(d,u)),e=o=p}else l(t)};return v.m=d,v},tE=/[^\x20\t\r\n\f]+/g,tC=function(t,n,r){var e,o=t&&t.classList,i=0,u=!1;if(o&&n&&m(n)){var c=n.match(tE)||[];for(u=c.length>0;e=c[i++];)u=!!r(o,e)&&u}return u},tT=function(t,n){tC(t,n,function(t,n){return t.remove(n)})},tL=function(t,n){return tC(t,n,function(t,n){return t.add(n)}),tT.bind(0,t,n)},tk={opacity:1,zindex:1},tA=function(t,n){var r=n?parseFloat(t):parseInt(t,10);return r==r?r:0},tM=function(t,n,r){return null!=n?n[r]||n.getPropertyValue(r):t.style[r]},tN=function(t,n,r){try{var e,o,i=t.style;h(i[n])?i.setProperty(n,r):i[n]=!tk[n.toLowerCase()]&&g(r)?"".concat(r,"px"):r}catch(u){}},tI=function(t){return"rtl"===a(t,"direction")},tz=function(t,n,r){var e=n?"".concat(n,"-"):"",o=r?"-".concat(r):"",i="".concat(e,"top").concat(o),u="".concat(e,"right").concat(o),c="".concat(e,"bottom").concat(o),f="".concat(e,"left").concat(o),l=a(t,[i,u,c,f]);return{t:tA(l[i],!0),r:tA(l[u],!0),b:tA(l[c],!0),l:tA(l[f],!0)}},tB=Math.round,tZ={w:0,h:0},tX=function(t){return t?{w:t.offsetWidth,h:t.offsetHeight}:tZ},tD=function(t){return t?{w:t.clientWidth,h:t.clientHeight}:tZ},tH=function(t){return t?{w:t.scrollWidth,h:t.scrollHeight}:tZ},tF=function(t){var n=parseFloat(a(t,"height"))||0,r=parseFloat(a(t,"width"))||0;return{w:r-tB(r),h:n-tB(n)}},tR=function(t){return t.getBoundingClientRect()},tY=function(){if(h(f)){f=!1;try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){f=!0}}))}catch(t){}}return f},tK=function(t){return t.split(" ")},tJ=function(t,n,r,e){c(tK(n),function(n){t.removeEventListener(n,r,e)})},tV=function(t,n,r,e){var o,i=tY(),u=null!=(o=i&&e&&e.S)?o:i,a=e&&e.$||!1,f=e&&e.C||!1,l=[],s=i?{passive:u,capture:a}:a;return c(tK(n),function(n){var e=f?function(o){t.removeEventListener(n,e,a),r&&r(o)}:r;T(l,tJ.bind(null,t,n,e,a)),t.addEventListener(n,e,s)}),A.bind(0,l)},tW=function(t){return t.stopPropagation()},tq=function(t){return t.preventDefault()},t$={x:0,y:0},tG=function(t){var n=t?tR(t):0;return n?{x:n.left+window.pageYOffset,y:n.top+window.pageXOffset}:t$},tU=function(t,n){c(O(n)?n:[n],t)},tQ=function(t){var n=new Map,r=function(t,r){if(t){var e=n.get(t);tU(function(t){e&&e[t?"delete":"clear"](t)},r)}else n.forEach(function(t){t.clear()}),n.clear()},e=function(t,o){if(m(t)){var i=n.get(t)||new Set;return n.set(t,i),tU(function(t){x(t)&&i.add(t)},o),r.bind(0,t,o)}w(o)&&o&&r();var u=N(t),a=[];return c(u,function(n){var r=t[n];r&&T(a,e(n,r))}),A.bind(0,a)},o=function(t,r){c(L(n.get(t)),function(t){r&&!k(r)?t.apply(0,r):t()})};return e(t||{}),[e,r,o]},t0=function(t){return JSON.stringify(t,function(t,n){if(x(n))throw Error();return n})},t1={paddingAbsolute:!1,showNativeOverlaidScrollbars:!1,update:{elementEvents:[["img","load"]],debounce:[0,33],attributes:null,ignoreMutation:null},overflow:{x:"scroll",y:"scroll"},scrollbars:{theme:"os-theme-dark",visibility:"auto",autoHide:"never",autoHideDelay:1300,dragScroll:!0,clickScroll:!1,pointers:["mouse","touch","pen"]}},t3=function(t,n){var r={},e=N(n).concat(N(t));return c(e,function(e){var o=t[e],i=n[e];if(S(o)&&S(i))I(r[e]={},t3(o,i)),z(r[e])&&delete r[e];else if(M(n,e)&&i!==o){var u=!0;if(O(o)||O(i))try{t0(o)===t0(i)&&(u=!1)}catch(c){}u&&(r[e]=i)}}),r},t2="os-environment",t7="".concat(t2,"-flexbox-glue"),t8="".concat(t7,"-max"),t6="data-overlayscrollbars",t9="".concat(t6,"-overflow-x"),t5="".concat(t6,"-overflow-y"),t4="overflowVisible",nt="updating",nn="os-viewport",nr="".concat(nn,"-arrange"),ne="".concat(nn,"-scrollbar-hidden"),no="os-overflow-visible",ni="os-size-observer",nu="".concat(ni,"-appear"),nc="".concat(ni,"-listener"),na=("".concat(nc,"-scroll"),"".concat(nc,"-item")),nf=("".concat(na,"-final"),"os-scrollbar"),nl="".concat(nf,"-rtl"),ns="".concat(nf,"-horizontal"),nd="".concat(nf,"-vertical"),nv="".concat(nf,"-track"),np="".concat(nf,"-handle"),nb="".concat(nf,"-visible"),nh="".concat(nf,"-cornerless"),ny="".concat(nf,"-transitionless"),ng="".concat(nf,"-interaction"),nm="".concat(nf,"-unusable"),nw="".concat(nf,"-auto-hidden"),nx="".concat(nf,"-wheel"),nO="".concat(nv,"-interactive"),nS="".concat(np,"-interactive"),n_={},nj=function(){return n_},nP=function(t){var n=[];return c(O(t)?t:[t],function(t){var r=N(t);c(r,function(r){T(n,n_[r]=t[r])})}),n},nE={boolean:"__TPL_boolean_TYPE__",number:"__TPL_number_TYPE__",string:"__TPL_string_TYPE__",array:"__TPL_array_TYPE__",object:"__TPL_object_TYPE__",function:"__TPL_function_TYPE__",null:"__TPL_null_TYPE__"};nE.number,nE.boolean,nE.array,nE.null,nE.number,nE.array,nE.null,nE.function,nE.null,nE.string,nE.null,nE.array,nE.null;var nC,nT="__osScrollbarsHidingPlugin",nL=function(t,n,r,e){Q(t,n);var o=tD(n),i=tX(n),u=tF(r);return e&&tr(n),{x:i.h-o.h+u.h,y:i.w-o.w+u.w}},nk=function(t){var n=!1,r=tL(t,ne);try{n="none"===a(t,tl("scrollbar-width"))||"none"===window.getComputedStyle(t,"::-webkit-scrollbar").getPropertyValue("display")}catch(e){}return r(),n},nA=function(t,n){var r="hidden";a(t,{overflowX:r,overflowY:r,direction:"rtl"}),F(t,0);var e=tG(t),o=tG(n);F(t,-999);var i=tG(n);return{i:e.x===o.x,n:o.x!==i.x}},nM=function(t,n){var r=tL(t,t7),e=tR(t),o=tR(n),i=tS(o,e,!0),u=tL(t,t8),c=tR(t),a=tR(n),f=tS(a,c,!0);return r(),u(),i&&f},nN=function(){var t,n=document.body,r=to('
'))[0],e=r.firstChild,o=u(tQ(),3),i=o[0],c=o[2],f=u(l({o:nL(n,r,e),u:tx},nL.bind(0,n,r,e,!0)),2),s=f[0],d=u((0,f[1])(),1)[0],v=nk(r),p={x:0===d.x,y:0===d.y},b={elements:{host:null,padding:!v,viewport:function(t){return v&&t===t.ownerDocument.body&&t},content:!1},scrollbars:{slot:!0},cancel:{nativeScrollbarsOverlaid:!1,body:null}},h=I({},t1),y=I.bind(0,{},h),g=I.bind(0,{},b),m={k:d,I:p,A:v,L:"-1"===a(r,"zIndex"),V:nA(r,e),B:nM(r,e),Y:i.bind(0,"z"),j:i.bind(0,"r"),q:g,N:function(t){return I(b,t)&&g()},F:y,G:function(t){return I(h,t)&&y()},X:I({},b),U:I({},h)},w=window.addEventListener,x=tP(function(t){return c(t?"z":"r")},{g:33,v:99});return H(r,"style"),tr(r),w("resize",x.bind(0,!1)),v||p.x&&p.y||w("resize",function(){var n=nj()[nT];(t=t||n&&n.R())&&t(m,s,x.bind(0,!0))}),m},nI=function(){return nC||(nC=nN()),nC},nz=function(t,n){return x(n)?n.apply(0,t):n},nB=function(t,n,r,e){var o=h(e)?r:e;return nz(t,o)||n.apply(0,t)},nZ=function(t,n,r,e){var o=h(e)?r:e,i=nz(t,o);return!!i&&(P(i)?i:n.apply(0,t))},nX=function(t,n,r){var e=r||{},o=e.nativeScrollbarsOverlaid,i=e.body,u=nI(),c=u.I,a=u.A,f=n.nativeScrollbarsOverlaid,l=n.body,s=h(i)?l:i,d=(c.x||c.y)&&(null!=o?o:f),v=t&&(y(s)?!a:s);return!!d||!!v},nD=new WeakMap,nH=function(t,n){nD.set(t,n)},nF=function(t){nD.delete(t)},nR=function(t){return nD.get(t)},nY=function(t,n){return t?n.split(".").reduce(function(t,n){return t&&M(t,n)?t[n]:void 0},t):void 0},nK=function(t,n,r){return function(e){return[nY(t,e),r||void 0!==nY(n,e)]}},nJ=function(t){var n=t;return[function(){return n},function(t){n=I({},n,t)}]},nV="tabindex",nW=te.bind(0,""),nq=function(t){Q(q(t),W(t)),tr(t)},n$=function(t){var n=nI(),r=n.q,e=n.A,o=nj()[nT],i=o&&o.T,u=r().elements,c=u.host,a=u.padding,f=u.viewport,l=u.content,s=P(t),d=s?{}:t,v=d.elements||{},p=v.host,b=v.padding,h=v.viewport,y=v.content,g=s?t:d.target,m=V(g,"textarea"),w=g.ownerDocument,x=w.documentElement,O=g===w.body,S=w.defaultView,_=nB.bind(0,[g]),j=nZ.bind(0,[g]),E=nz.bind(0,[g]),L=_.bind(0,nW,f),k=j.bind(0,nW,l),M=L(h),I=M===g,z=I&&O,B=!I&&k(y),F=!I&&P(M)&&M===B,R=F&&!!E(l),Y=R?L():M,K=R?B:k(),J=F?Y:M,$=w.activeElement,G=!I&&S.top===S&&$===g,U={W:g,Z:m?_(nW,c,p):g,J:J,K:!I&&j(nW,a,b),tt:F?K:B,nt:!I&&!e&&i&&i(n),ot:z?x:J,st:z?w:J,et:S,ct:w,rt:m,it:O,lt:s,ut:I,dt:F,ft:function(t,n){var r,e;return I?D(J,t6,n):tC(J,t,function(t,n){return t.contains(n)})},_t:function(t,n,r){return I?X(J,t6,n,r):(r?tL:tT)(J,t)}},te=N(U).reduce(function(t,n){var r=U[n];return T(t,!!r&&!q(r)&&r)},[]),to=function(t){return t?C(te,t)>-1:null},ti=U.W,tu=U.Z,tc=U.K,ta=U.J,tf=U.tt,tl=U.nt,ts=[function(){H(tu,t6),O&&H(x,t6)}],td=m&&to(tu),tv=m?ti:W([tf,ta,tc,tu,ti].find(function(t){return!1===to(t)})),tp=tf||ta;return[U,function(){Z(tu,t6,I?"viewport":"host");var t=tL(tc,"os-padding"),n=tL(ta,!I&&nn),r=tL(tf,"os-content"),o=O?tL(q(g),ne):t_;if(td&&(tn(ti,tu),T(ts,function(){tn(tu,ti),tr(tu)})),Q(tp,tv),Q(tu,tc),Q(tc||tu,!I&&ta),Q(ta,tf),T(ts,function(){o(),H(ta,t9),H(ta,t5),to(tf)&&nq(tf),to(ta)&&nq(ta),to(tc)&&nq(tc),t(),n(),r()}),e&&!I&&T(ts,tT.bind(0,ta,ne)),tl&&(tt(ta,tl),T(ts,tr.bind(0,tl))),G){var i=Z(ta,nV);Z(ta,nV,"-1"),ta.focus();var u=function(){return i?Z(ta,nV,i):H(ta,nV)},c=tV(w,"pointerdown keydown",function(){u(),c()});T(ts,[u,c])}else $&&$.focus&&$.focus();tv=0},A.bind(0,ts)]},nG=function(t,n){var r=t.tt,e=u(n,1)[0];return function(t){var n=nI().B,o=e().ht,i=t.gt,u=(r||!n)&&i;return u&&a(r,{height:o?"":"100%"}),{vt:u,wt:u}}},nU=function(t,n){var r=u(n,2),e=r[0],o=r[1],i=t.Z,c=t.K,f=t.J,s=t.ut,d=u(l({u:tO,o:tz()},tz.bind(0,i,"padding","")),2),v=d[0],p=d[1];return function(t,n,r){var i,l=u(p(r),2),d=l[0],b=l[1],h=nI(),y=h.A,g=h.B,m=e().bt,w=t.vt,x=t.wt,O=t.yt,S=u(n("paddingAbsolute"),2),_=S[0],j=S[1];(w||b||!g&&x)&&(d=(i=u(v(r),2))[0],b=i[1]);var P=!s&&(j||O||b);if(P){var E=!_||!c&&!y,C=d.r+d.l,T=d.t+d.b,L={marginRight:E&&!m?-C:0,marginBottom:E?-T:0,marginLeft:E&&m?-C:0,top:E?-d.t:0,right:E?m?-d.r:"auto":0,left:E?m?"auto":-d.l:0,width:E?"calc(100% + ".concat(C,"px)"):""},k={paddingTop:E?d.t:0,paddingRight:E?d.r:0,paddingBottom:E?d.b:0,paddingLeft:E?d.l:0};a(c||f,L),a(f,k),o({K:d,St:!E,M:c?k:I({},L,k)})}return{xt:P}}},nQ=Math.max,n0=nQ.bind(0,0),n1="visible",n3="hidden",n2={u:tw,o:{w:0,h:0}},n7={u:tx,o:{x:n3,y:n3}},n8=function(t,n){var r=window.devicePixelRatio%1!=0?1:0,e={w:n0(t.w-n.w),h:n0(t.h-n.h)};return{w:e.w>r?e.w:0,h:e.h>r?e.h:0}},n6=function(t,n,r){return r?tL(t,n):tT(t,n)},n9=function(t){return 0===t.indexOf(n1)},n5=function(t,n){var r=u(n,2),e=r[0],o=r[1],i=t.Z,c=t.K,f=t.J,s=t.nt,d=t.ut,v=t._t,p=t.it,b=t.et,h=nI(),y=h.k,g=h.B,m=h.A,w=h.I,x=nj()[nT],O=!d&&!m&&(w.x||w.y),S=p&&d,_=u(l(n2,tF.bind(0,f)),2),j=_[0],P=_[1],E=u(l(n2,tH.bind(0,f)),2),C=E[0],T=E[1],L=u(l(n2),2),k=L[0],A=L[1],M=u(l(n2),2),N=M[0],I=M[1],z=u(l(n7),1)[0],B=function(t,n){if(a(f,{height:""}),n){var r=e(),o=r.St,u=r.K,c=t.$t,l=t.P,s=tF(i),d=tD(i),v="content-box"===a(f,"boxSizing"),p=o||v?u.b+u.t:0,b=!(w.x&&v);a(f,{height:d.h+s.h+(c.x&&b?l.x:0)-p})}},D=function(t,n){var r,e=m||t?0:42,o=function(t,r,o){var i=a(f,t),u=(n?n[t]:i)==="scroll";return[i,u,u&&!m?r?e:o:0,r&&!!e]},i=u(o("overflowX",w.x,y.x),4),c=i[0],l=i[1],s=i[2],d=i[3],v=u(o("overflowY",w.y,y.y),4),p=v[0],b=v[1];return{Ct:{x:c,y:p},$t:{x:l,y:b},P:{x:s,y:v[2]},D:{x:d,y:v[3]}}},H=function(t,n,r,e){var o=function(t,n){var r=n9(t),e=n&&r&&t.replace("".concat(n1,"-"),"")||"";return[n&&!r?t:"",n9(e)?"hidden":e]},i=u(o(r.x,n.x),2),c=i[0],a=i[1],f=u(o(r.y,n.y),2),l=f[0],s=f[1];return e.overflowX=a&&l?a:c,e.overflowY=s&&c?s:l,D(t,e)},F=function(t,n,r,o){var i=t.P,u=t.D,c=u.x,a=u.y,f=i.x,l=i.y,s=e().M,d=n?"marginLeft":"marginRight",v=n?"paddingLeft":"paddingRight",p=s[d],b=s.marginBottom,h=s[v],y=s.paddingBottom;o.width="calc(100% + ".concat(l+-1*p,"px)"),o[d]=-l+p,o.marginBottom=-f+b,r&&(o[v]=h+(a?l:0),o.paddingBottom=y+(c?f:0))},R=u(x?x.H(O,g,f,s,e,D,F):[function(){return O},function(){return[t_]}],2),Y=R[0],K=R[1];return function(t,n,r){var l,s=t.vt,p=t.Ot,h=t.wt,y=t.xt,x=t.gt,O=t.yt,_=e(),E=_.ht,L=_.bt,M=u(n("showNativeOverlaidScrollbars"),2),R=M[0],J=M[1],V=u(n("overflow"),2),W=V[0],q=V[1],$=R&&w.x&&w.y,G=!d&&!g&&(s||h||p||J||x),U=n9(W.x),Q=n9(W.y),tt=U||Q,tn=P(r),tr=T(r),te=A(r),to=I(r);if(J&&m&&v(ne,"scrollbarHidden",!$),G&&(l=D($),B(l,E)),s||y||h||O||J){tt&&v(no,t4,!1);var ti=u(K($,L,l),2),tu=ti[0],tc=ti[1],ta=u(tn=j(r),2),tf=ta[0],tl=ta[1],ts=u(tr=C(r),2),td=ts[0],tv=ts[1],tp=tD(f),tb=td,th=tp;tu(),(tv||tl||J)&&tc&&!$&&Y(tc,td,tf,L)&&(th=tD(f),tb=tH(f));var ty={w:n0(nQ(td.w,tb.w)+tf.w),h:n0(nQ(td.h,tb.h)+tf.h)},tg={w:n0((S?b.innerWidth:th.w+n0(tp.w-td.w))+tf.w),h:n0((S?b.innerHeight+tf.h:th.h+n0(tp.h-td.h))+tf.h)};to=N(tg),te=k(n8(ty,tg),r)}var tm=u(to,2),tw=tm[0],tx=tm[1],tO=u(te,2),tS=tO[0],t_=tO[1],tj=u(tr,2),tP=tj[0],tE=tj[1],tC=u(tn,2),tT=tC[0],tL=tC[1],tk={x:tS.w>0,y:tS.h>0},tA=U&&Q&&(tk.x||tk.y)||U&&tk.x&&!tk.y||Q&&tk.y&&!tk.x;if(y||O||tL||tE||tx||t_||q||J||G){var tM={marginRight:0,marginBottom:0,marginLeft:0,width:"",overflowY:"",overflowX:""},tN=H($,tk,W,tM),tI=Y(tN,tP,tT,L);d||F(tN,L,tI,tM),G&&B(tN,E),d?(Z(i,t9,tM.overflowX),Z(i,t5,tM.overflowY)):a(f,tM)}X(i,t6,t4,tA),n6(c,no,tA),d||n6(f,no,tt);var tz=u(z(D($).Ct),2),tB=tz[0],tZ=tz[1];return o({Ct:tB,zt:{x:tw.w,y:tw.h},Tt:{x:tS.w,y:tS.h},Et:tk}),{At:tZ,It:tx,Lt:t_}}},n4=function(t,n,r){var e={},o=n||{},i=N(t).concat(N(o));return c(i,function(n){var i=t[n],u=o[n];e[n]=!!(r||i||u)}),e},rt=function(t,n){var r=t.W,e=t.J,o=t._t,i=t.ut,u=nI(),a=u.A,f=u.I,l=u.B,s=!a&&(f.x||f.y),d=[nG(t,n),nU(t,n),n5(t,n)];return function(t,n,u){var a=n4(I({vt:!1,xt:!1,yt:!1,gt:!1,It:!1,Lt:!1,At:!1,Ot:!1,wt:!1},n),{},u),f=s||!l,v=f&&F(e),p=f&&R(e);o("",nt,!0);var b=a;return c(d,function(n){b=n4(b,n(b,t,!!u)||{},u)}),F(e,v),R(e,p),o("",nt),i||(F(r,0),R(r,0)),b}},rn=function(t,n,r){var e,o=!1,i=function(){o=!0},a=function(i){if(r){var a=r.reduce(function(n,r){if(r){var e=u(r,2),o=e[0],c=e[1],a=c&&o&&(i?i(o):K(o,t));a&&a.length&&c&&m(c)&&T(n,[a,c.trim()],!0)}return n},[]);c(a,function(r){return c(r[0],function(i){var u=r[1],c=e.get(i)||[];if(t.contains(i)){var a=tV(i,u,function(t){o?(a(),e.delete(i)):n(t)});e.set(i,T(c,a))}else A(c),e.delete(i)})})}};return r&&(e=new WeakMap,a()),[i,a]},rr=function(t,n,r,e){var o=!1,i=e||{},a=i.Ht,f=i.Mt,l=i.Pt,s=i.Dt,d=i.Rt,v=i.kt,p=tP(function(){o&&r(!0)},{g:33,v:99}),b=u(rn(t,p,l),2),h=b[0],y=b[1],g=f||[],w=(a||[]).concat(g),x=function(o,i){var u=d||t_,a=v||t_,f=new Set,l=new Set,p=!1,b=!1;if(c(o,function(r){var o=r.attributeName,i=r.target,d=r.type,v=r.oldValue,h=r.addedNodes,y=r.removedNodes,w="attributes"===d,x=t===i,O=w&&m(o)?Z(i,o):0,S=0!==O&&v!==O,_=C(g,o)>-1&&S;if(n&&("childList"===d||!x)){var j=w&&S,P=j&&s&&V(i,s),E=(P?!u(i,o,v,O):!w||j)&&!a(r,!!P,t,e);c(h,function(t){return f.add(t)}),c(y,function(t){return f.add(t)}),b=b||E}!n&&x&&S&&!u(i,o,v,O)&&(l.add(o),p=p||_)}),f.size>0&&y(function(t){return L(f).reduce(function(n,r){return T(n,K(t,r)),V(r,t)?T(n,r):n},[])}),n)return!i&&b&&r(!1),[!1];if(l.size>0||p){var h=[L(l),p];return i||r.apply(0,h),h}},O=new td(function(t){return x(t)});return O.observe(t,{attributes:!0,attributeOldValue:!0,attributeFilter:w,subtree:n,childList:n,characterData:n}),o=!0,[function(){o&&(h(),O.disconnect(),o=!1)},function(){if(o){p.m();var t=O.takeRecords();return!k(t)&&x(t,!0)}}]},re=function(t){return t&&(t.height||t.width)},ro=function(t,n,r){var e=r||{},o=e.Vt,i=void 0!==o&&o,c=e.Bt,a=void 0!==c&&c,f=nj().__osSizeObserverPlugin,s=nI().V,d=to('
'))[0],v=d.firstChild,p=tI.bind(0,t),b=u(l({o:void 0,_:!0,u:function(t,n){return!(!t||!re(t)&&re(n))}}),1)[0],h=function(t){var r,e=O(t)&&t.length>0&&S(t[0]),o=!e&&w(t[0]),c=!1,a=!1,f=!0;if(e){var l=u(b(t.pop().contentRect),3),v=l[0],p=l[2],h=re(v),y=re(p);c=!p||!h,a=!y&&h,f=!c}else o?f=u(t,2)[1]:a=!0===t;if(i&&f){var g=o?t[0]:tI(d);F(d,g?s.n?-3333333:s.i?0:3333333:3333333),R(d,3333333)}c||n({vt:!o,Yt:o?t:void 0,Bt:!!a})},y=[],g=!!a&&h;return[function(){A(y),tr(d)},function(){if(tp){var n=new tp(h);n.observe(v),T(y,function(){n.disconnect()})}else if(f){var r=u(f.O(v,h,a),2),e=r[0],o=r[1];g=e,T(y,o)}if(i){var c=u(l({o:!p()},p),1)[0];T(y,tV(d,"scroll",function(t){var n=c(),r=u(n,2),e=r[0];r[1]&&(tT(v,"ltr rtl"),e?tL(v,"rtl"):tL(v,"ltr"),h(n)),tW(t)}))}g&&(tL(d,nu),T(y,tV(d,"animationstart",g,{C:!!tp}))),(tp||f)&&Q(t,d)}]},ri=function(t,n){var r,e=te("os-trinsic-observer"),o=[],i=u(l({o:!1}),1)[0],c=function(t,r){if(t){var e,o=i(0===t.h||t.isIntersecting||t.intersectionRatio>0);if(u(o,2)[1])return r||n(o),[o]}},a=function(t,n){if(t&&t.length>0)return c(t.pop(),n)};return[function(){A(o),tr(e)},function(){if(tv)(r=new tv(function(t){return a(t)},{root:t})).observe(e),T(o,function(){r.disconnect()});else{var n=function(){var t=tX(e);c(t)},i=u(ro(e,n),2),f=i[0],l=i[1];T(o,f),l(),n()}Q(t,e)},function(){if(r)return a(r.takeRecords(),!0)}]},ru="[".concat(t6,"]"),rc=".".concat(nn),ra=["tabindex"],rf=["wrap","cols","rows"],rl=["id","class","style","open"],rs=function(t,n,r){var e,o,i,a=t.Z,f=t.J,s=t.tt,d=t.rt,v=t.ut,p=t.ft,b=t._t,h=nI().B,y=u(l({u:tw,o:{w:0,h:0}},function(){var t=p(no,t4),n=p(nr,""),r=n&&F(f),e=n&&R(f);b(no,t4),b(nr,""),b("",nt,!0);var o=tH(s),i=tH(f),u=tF(f);return b(no,t4,t),b(nr,"",n),b("",nt),F(f,r),R(f,e),{w:i.w+o.w+u.w,h:i.h+o.h+u.h}}),1)[0],w=d?rf:rl.concat(rf),S=tP(r,{g:function(){return e},v:function(){return o},p:function(t,n){var r=u(t,1)[0],e=u(n,1)[0];return[N(r).concat(N(e)).reduce(function(t,n){return t[n]=r[n]||e[n],t},{})]}}),_=function(t){c(t||ra,function(t){if(C(ra,t)>-1){var n=Z(a,t);m(n)?Z(f,t,n):H(f,t)}})},j=function(t,e){var o=u(t,2),i=o[0],c={gt:o[1]};return n({ht:i}),e||r(c),c},P=function(t){var e=t.vt,o=t.Yt,i=t.Bt,c=!1;if(o){var a=u(o,2),f=a[0];c=a[1],n({bt:f})}(!e||i?r:S)({vt:e,yt:c})},E=function(t,n){var e=u(y(),2)[1],o={wt:e};return e&&!n&&(t?r:S)(o),o},L=function(t,n,r){var e={Ot:n};return n?r||S(e):v||_(t),e},k=u(s||!h?ri(a,j):[t_,t_,t_],3),A=k[0],M=k[1],z=k[2],B=u(v?[t_,t_]:ro(a,P,{Bt:!0,Vt:!0}),2),X=B[0],D=B[1],Y=u(rr(a,!1,L,{Mt:rl,Ht:rl.concat(ra)}),2),K=Y[0],J=Y[1],V=v&&tp&&new tp(P.bind(0,{vt:!0}));return V&&V.observe(a),_(),[function(){A(),X(),i&&i[0](),V&&V.disconnect(),K()},function(){D(),M()},function(){var t={},n=J(),r=z(),e=i&&i[1]();return n&&I(t,L.apply(0,T(n,!0))),r&&I(t,j.apply(0,T(r,!0))),e&&I(t,E.apply(0,T(e,!0))),t},function(t){var n=u(t("update.ignoreMutation"),1)[0],r=u(t("update.attributes"),2),c=r[0],a=r[1],l=u(t("update.elementEvents"),2),d=l[0],p=l[1],b=u(t("update.debounce"),2),h=b[0],y=b[1];if((p||a)&&(i&&(i[1](),i[0]()),i=rr(s||f,!0,E,{Ht:w.concat(c||[]),Pt:d,Dt:ru,kt:function(t,r){var e,o=t.target,i=t.attributeName;return!r&&!!i&&!v&&G(o,ru,rc)||!!$(o,".".concat(nf))||!!(x(n)&&n(t))}})),y){if(S.m(),O(h)){var m=h[0],_=h[1];e=g(m)&&m,o=g(_)&&_}else g(h)?(e=h,o=!1):(e=!1,o=!1)}}]},rd={x:0,y:0},rv={K:{t:0,r:0,b:0,l:0},St:!1,M:{marginRight:0,marginBottom:0,marginLeft:0,paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0},zt:rd,Tt:rd,Ct:{x:"hidden",y:"hidden"},Et:{x:!1,y:!1},ht:!1,bt:!1},rp=function(t,n){var r=nK(n,{}),e=nJ(rv),o=u(tQ(),3),i=o[0],c=o[1],a=o[2],f=u(e,2),l=f[0],s=f[1],d=u(n$(t),3),v=d[0],p=d[1],b=d[2],h=rt(v,e),y=function(t,n,r){var e=N(t).some(function(n){return t[n]})||!z(n)||r;return e&&a("u",[t,n,r]),e},g=u(rs(v,s,function(t){return y(h(r,t),{},!1)}),4),m=g[0],w=g[1],x=g[2],O=g[3],S=l.bind(0);return S.jt=function(t){return i("u",t)},S.qt=function(){var t=v.W,n=v.J,r=F(t),e=R(t);w(),p(),F(n,r),R(n,e)},S.Nt=v,[function(t,r){var e=nK(n,t,r);return O(e),y(h(e,x(),r),t,!!r)},S,function(){c(),m(),b()}]},rb=Math.round,rh=function(t){var n=tR(t),r=n.width,e=n.height,o=tX(t),i=o.w,u=o.h;return{x:rb(r)/i||1,y:rb(e)/u||1}},ry=function(t,n,r){var e=n.scrollbars,o=t.button,i=t.isPrimary,u=t.pointerType,c=e.pointers;return 0===o&&i&&e[r?"dragScroll":"clickScroll"]&&(c||[]).includes(u)},rg=function(t,n,r,e,o,i){var u=nI().V,c=r.Ft,a=r.Gt,f=r.Xt,l="scroll".concat(i?"Left":"Top"),s="client".concat(i?"X":"Y"),d=i?"width":"height",v=i?"left":"top",p=i?"w":"h",b=i?"x":"y";return tV(a,"pointerdown",function(r){var h=$(r.target,".".concat(np))===c;if(ry(r,t,h)){var y,g,m=!h&&r.shiftKey,w=function(){return tR(c)},x=function(){return tR(a)},O=function(t,n){return(t||w())[v]-(n||x())[v]},S=(y=e[l]||0,g=1/rh(e)[b],function(t){var n=o().Tt,r=tX(a)[p]-tX(c)[p],s=g*t/r*n[b],d=tI(f)&&i?u.n||u.i?1:-1:1;e[l]=y+s*d}),_=r[s],j=w(),P=x(),E=j[d],C=O(j,P)+E/2,L=_-P[v],k=h?0:L-C,M=[tV(n,"selectstart",function(t){return tq(t)},{S:!1}),tV(a,"pointermove",function(t){var n=t[s]-_;(h||m)&&S(k+n)})];if(m)S(k);else if(!h){var N=nj().__osClickScrollPlugin;N&&T(M,N.O(S,O,k,E,L))}tV(a,"pointerup",function(t){A(M),a.releasePointerCapture(t.pointerId)},{C:!0}),a.setPointerCapture(r.pointerId)}})},rm=Math.min,rw=Math.max,rx=Math.abs,rO=Math.round,rS=function(t,n,r,e){if(e){var o=r?"x":"y",i=e.Tt,u=e.zt[o];return rw(0,rm(1,u/(u+i[o])))}var c=r?"w":"h",a=tX(t)[c],f=tX(n)[c];return rw(0,rm(1,a/f))},r_=function(t,n,r,e,o,i){var u=nI().V,c=rO(e.Tt[i?"x":"y"]),a=rx(r["scroll".concat(i?"Left":"Top")]),f=u.i?a:c-a,l=rm(1,(i&&o?f:a)/c),s=rS(t,n,i);return 1/s*(1-s)*l},rj=function(t,n,r){var o=(0,nI().q)().scrollbars.slot,i=n.ct,f=n.W,l=n.Z,s=n.J,d=n.lt,v=n.ot,p=nZ([f,l,s],function(){return l},o,((d?{}:t).scrollbars||{}).slot),b=function(t,n,r){var e=r?tL:tT;c(t,function(t){e(t.Xt,n)})},h=function(t,n){c(t,function(t){var r,e=u(n(t),2);a(e[0],e[1])})},y=function(t,n,r){h(t,function(t){var o=t.Ft,i=t.Gt;return[o,(0,e.Z)({},r?"width":"height","".concat((100*rS(o,i,r,n)).toFixed(3),"%"))]})},g=function(t,n,r){var e=r?"X":"Y";h(t,function(t){var o,i=t.Ft,u=r_(i,t.Gt,v,n,tI(t.Xt),r);return[i,{transform:u==u?"translate".concat(e,"(").concat((100*u).toFixed(3),"%)"):""}]})},m=[],x=[],O=[],S=function(t,n,r){var e=w(r);(!e||r)&&b(x,t,n),e&&r||b(O,t,n)},_=function(t){y(x,t,!0),y(O,t)},j=function(t){g(x,t,!0),g(O,t)},P=function(t){var n=t?x:O,e=k(n)?ny:"",o=te("".concat(nf," ").concat(t?ns:nd," ").concat(e)),u=te(nv),c=te(np),a={Xt:o,Gt:u,Ft:c};return Q(o,u),Q(u,c),T(n,a),T(m,[tr.bind(0,o),r(a,S,i,l,v,t)]),a},E=P.bind(0,!0),C=P.bind(0,!1),L=function(){Q(p,x[0].Xt),Q(p,O[0].Xt),ty(function(){S(ny)},300)};return E(),C(),[{Ut:_,Wt:j,Zt:S,Jt:{Kt:x,Qt:E,tn:h.bind(0,x)},nn:{Kt:O,Qt:C,tn:h.bind(0,O)}},L,A.bind(0,m)]},rP=function(t,n,r,e){var o,i,c,a,f,l,s,d=0,v=nJ({}),p=u(v,1)[0],b=u(tj(),2),h=b[0],y=b[1],g=u(tj(),2),m=g[0],w=g[1],x=u(tj(100),2),O=x[0],S=x[1],_=u(tj(100),2),j=_[0],P=_[1],E=u(tj(function(){return d}),2),C=E[0],T=E[1],L=u(rj(t,r.Nt,function(t,e,o,i,c,a){var f,l,s=t.Xt,d=u(tj(333),2),v=d[0],p=d[1],b=!!c.scrollBy,h=!0;return A.bind(0,[tV(s,"pointerenter",function(){e(ng,!0)}),tV(s,"pointerleave pointercancel",function(){e(ng)}),tV(s,"wheel",function(t){var n=t.deltaX,r=t.deltaY,o=t.deltaMode;b&&h&&0===o&&q(s)===i&&c.scrollBy({left:n,top:r,behavior:"smooth"}),h=!1,e(nx,!0),v(function(){h=!0,e(nx)}),tq(t)},{S:!1,$:!0}),tV(s,"mousedown",tV.bind(0,o,"click",tW,{C:!0,$:!0}),{$:!0}),rg(n,o,t,c,r,a),p])}),3),k=L[0],M=L[1],N=L[2],I=r.Nt,z=I.Z,B=I.J,Z=I.ot,X=I.st,D=I.ut,H=I.it,Y=k.Jt,K=k.nn,J=k.Zt,V=k.Ut,W=k.Wt,$=Y.tn,G=K.tn,U=function(t){var n=t.Xt,r=D&&!H&&q(n)===B&&n;return[r,{transform:r?"translate(".concat(F(Z),"px, ").concat(R(Z),"px)"):""}]},Q=function(t,n){if(T(),t)J(nw);else{var r=function(){return J(nw,!0)};d>0&&!n?C(r):r()}},tt=function(){(l=a)&&Q(!0)},tn=[S,T,P,w,y,N,tV(z,"pointerover",tt,{C:!0}),tV(z,"pointerenter",tt),tV(z,"pointerleave",function(){l=!1,a&&Q(!1)}),tV(z,"pointermove",function(){c&&h(function(){S(),Q(!0),j(function(){c&&Q(!1)})})}),tV(X,"scroll",function(t){m(function(){W(r()),f&&Q(!0),O(function(){f&&!l&&Q(!1)})}),e(t),D&&$(U),D&&G(U)})],tr=p.bind(0);return tr.Nt=k,tr.qt=M,[function(t,e,o){var i=o.It,l=o.Lt,v=o.At,p=o.yt,b=nK(n,t,e),h=r(),y=h.Tt,g=h.Ct,m=h.bt,w=u(b("scrollbars.theme"),2),x=w[0],O=w[1],S=u(b("scrollbars.visibility"),2),_=S[0],j=S[1],P=u(b("scrollbars.autoHide"),2),E=P[0],C=P[1],T=u(b("scrollbars.autoHideDelay"),1)[0],L=u(b("scrollbars.dragScroll"),2),k=L[0],A=L[1],M=u(b("scrollbars.clickScroll"),2),N=M[0],I=M[1],z=function(t,n){var r="visible"===_||"auto"===_&&"scroll"===t;return J(nb,r,n),r};if(d=T,O&&(J(s),J(x,!0),s=x),C&&(c="move"===E,a="leave"===E,Q(!(f="never"!==E),!0)),A&&J(nS,k),I&&J(nO,N),v||j||e){var B=z(g.x,!0),Z=z(g.y,!1);J(nh,!(B&&Z))}(i||l||p||e)&&(V(h),W(h),J(nm,!y.x,!0),J(nm,!y.y,!1),J(nl,m&&!H))},tr,A.bind(0,tn)]},rE=function(t,n,r){x(t)&&t(n||void 0,r||void 0)},rC=function(t,n,r){var e=nI(),o=e.F,i=e.q,a=e.Y,f=e.j,l=nj(),s=P(t),d=s?t:t.target,v=nR(d);if(n&&!v){var p=!1,b=function(t){var n=nj().__osOptionsValidationPlugin,r=n&&n.O;return r?r(t,!0):t},h=I({},o(),b(n)),y=u(tQ(r),3),g=y[0],m=y[1],w=y[2],x=u(rp(t,h),3),O=x[0],S=x[1],_=x[2],j=u(rP(t,h,S,function(t){return w("scroll",[Z,t])}),3),E=j[0],C=j[1],T=j[2],L=function(t,n){return O(t,!!n)},k=L.bind(0,{},!0),A=a(k),M=f(k),B=function(t){nF(d),A(),M(),T(),_(),p=!0,w("destroyed",[Z,!!t]),m()},Z={options:function(t,n){if(t){var r=n?o():{},e=t3(h,I(r,b(t)));z(e)||(I(h,e),L(e))}return I({},h)},on:g,off:function(t,n){t&&n&&m(t,n)},state:function(){var t,n=S(),r=n.zt,e=n.Tt,o=n.Ct,i=n.Et,u=n.K;return I({},{overflowEdge:r,overflowAmount:e,overflowStyle:o,hasOverflow:i,padding:u,paddingAbsolute:n.St,directionRTL:n.bt,destroyed:p})},elements:function(){var t=S.Nt,n=t.W,r=t.Z,e=t.K,o=t.J,i=t.tt,u=t.ot,c=t.st,a=C.Nt,f=a.Jt,l=a.nn,s=function(t){var n=t.Ft,r=t.Gt;return{scrollbar:t.Xt,track:r,handle:n}},d=function(t){var n=t.Kt,r=t.Qt,e=s(n[0]);return I({},e,{clone:function(){var t=s(r());return E({},!0,{}),t}})};return I({},{target:n,host:r,padding:e||o,viewport:o,content:i||o,scrollOffsetElement:u,scrollEventElement:c,scrollbarHorizontal:d(f),scrollbarVertical:d(l)})},update:function(t){return L({},t)},destroy:B.bind(0)};return S.jt(function(t,n,r){E(n,r,t)}),nH(d,Z),c(N(l),function(t){return rE(l[t],0,Z)}),nX(S.Nt.it,i().cancel,!s&&t.cancel)?(B(!0),Z):(S.qt(),C.qt(),w("initialized",[Z]),S.jt(function(t,n,r){var e,o=t.vt,i=t.yt,u=t.gt,c=t.It,a=t.Lt,f=t.At;w("updated",[Z,{updateHints:{sizeChanged:o,directionChanged:i,heightIntrinsicChanged:u,overflowEdgeChanged:c,overflowAmountChanged:a,overflowStyleChanged:f,contentMutation:t.wt,hostMutation:t.Ot},changedOptions:n,force:r}])}),Z.update(!0),Z)}return v};rC.plugin=function(t){c(nP(t),function(t){return rE(t,rC)})},rC.valid=function(t){var n=t&&t.elements,r=x(n)&&n();return j(r)&&!!nR(r.target)},rC.env=function(){var t,n=nI(),r=n.k,e=n.I,o=n.A,i=n.V,u=n.B,c=n.L,a=n.X,f=n.U,l=n.q,s=n.N;return I({},{scrollbarsSize:r,scrollbarsOverlaid:e,scrollbarsHiding:o,rtlScrollBehavior:i,flexboxGlue:u,cssCustomProperties:c,staticDefaultInitialization:a,staticDefaultOptions:f,getDefaultInitialization:l,setDefaultInitialization:s,getDefaultOptions:n.F,setDefaultOptions:n.G})};/*! - * OverlayScrollbars - * Version: 2.0.0 - * - * Copyright (c) Rene Haas | KingSora. - * https://github.com/KingSora - * - * Released under the MIT license. - */ },8276:function(t,n,r){"use strict";r.r(n),r.d(n,{default:function(){return h}});var e=r(5034),o=r(169),i=r(1373),u=r(4246),c=function(t){var n=t.id,r=t.tag,o=(0,i.Z)(t,["id","tag"]);return n?(0,u.jsx)(u.Fragment,{children:(0,u.jsx)(r,(0,e.Z)({},o))}):(0,u.jsx)(r,(0,e.Z)({},o))},a=r(8310),f=r(7378),l=function(t){var n=t.children,r=(0,f.useRef)(null);return(0,f.useEffect)(function(){if(r.current){var t=(0,a.a)(r.current,{paddingAbsolute:!0,scrollbars:{autoHide:"leave"}});return function(){return t.destroy()}}}),(0,u.jsx)("pre",{ref:r,children:n})};r(2586),r(2431),r(7733);var s=r(8038),d=r.n(s),v=r(1670),p={src:"/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico",height:256,width:256},b=function(t,n){return(0,u.jsx)(c,(0,o.Z)((0,e.Z)({},t),{tag:n}))},h=function(t){var n=t.Component,r=t.pageProps;return(0,f.useEffect)(function(){var t=(0,a.a)(document.body,{});window.osBody=t},[]),(0,u.jsx)(v.Zo,{components:{h1:function(t){return b(t,"h1")},h2:function(t){return b(t,"h2")},h3:function(t){return b(t,"h3")},h4:function(t){return b(t,"h4")},h5:function(t){return b(t,"h5")},h6:function(t){return b(t,"h6")},pre:l},children:(0,u.jsxs)("div",{className:"font-sans font-normal text-primary-dark",children:[(0,u.jsxs)(d(),{children:[(0,u.jsx)("title",{children:"OverlayScrollbars"},"title"),(0,u.jsx)("meta",{name:"description",content:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."},"description"),(0,u.jsx)("link",{rel:"icon",href:p.src}),(0,u.jsx)("link",{rel:"shortcut icon",type:"image/x-icon",href:p.src}),(0,u.jsx)("meta",{httpEquiv:"X-UA-Compatible",content:"IE=edge"}),(0,u.jsx)("meta",{name:"theme-color",content:"#36befd"}),(0,u.jsx)("meta",{name:"msapplication-TileColor",content:"#36befd"}),(0,u.jsx)("meta",{name:"msapplication-navbutton-color",content:"#36befd"}),(0,u.jsx)("meta",{name:"application-name",content:"OverlayScrollbars"}),(0,u.jsx)("meta",{name:"msapplication-tooltip",content:"OverlayScrollbars"}),(0,u.jsx)("meta",{name:"apple-mobile-web-app-title",content:"OverlayScrollbars"}),(0,u.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify({"@context":"http://schema.org","@type":"SoftwareSourceCode",url:"https://kingsora.github.io/OverlayScrollbars",name:"OverlayScrollbars",description:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",license:"https://en.wikipedia.org/wiki/MIT_License",keywords:"js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking",isAccessibleForFree:!0,image:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png",codeRepository:"https://github.com/KingSora/OverlayScrollbars",runtimePlatform:"browser",maintainer:{"@type":"Person",name:"Rene Haas",additionalName:"KingSora",url:"https://github.com/KingSora"},programmingLanguage:{"@type":"ComputerLanguage",name:"javascript",alternateName:"js"}})}})]}),(0,u.jsx)(n,(0,e.Z)({},r))]})})}},7733:function(){},2431:function(){},2586:function(){},8038:function(t,n,r){t.exports=r(555)},1670:function(t,n,r){"use strict";r.d(n,{Zo:function(){return c},ah:function(){return i}});var e=r(7378);let o=e.createContext({});function i(t){let n=e.useContext(o);return e.useMemo(()=>"function"==typeof t?t(n):{...n,...t},[n,t])}let u={};function c({components:t,children:n,disableParentContext:r}){let c=i(t);return r&&(c=t||u),e.createElement(o.Provider,{value:c},n)}},7599:function(t,n,r){"use strict";function e(t,n,r){return n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r,t}r.d(n,{Z:function(){return e}})},5034:function(t,n,r){"use strict";r.d(n,{Z:function(){return o}});var e=r(7599);function o(t){for(var n=1;n=0||(o[r]=t[r]);return o}(t,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(e=0;e=0)&&Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}r.d(n,{Z:function(){return e}})}},function(t){var n=function(n){return t(t.s=n)};t.O(0,[774,179],function(){return n(8936),n(5817)}),_N_E=t.O()}]); \ No newline at end of file diff --git a/docs/_next/static/chunks/pages/index-6cf432147fa9d4da.js b/docs/_next/static/chunks/pages/index-6cf432147fa9d4da.js deleted file mode 100644 index 06a80ce..0000000 --- a/docs/_next/static/chunks/pages/index-6cf432147fa9d4da.js +++ /dev/null @@ -1,5 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{42:function(e,s){var l; /*! - Copyright (c) 2018 Jed Watson. - Licensed under the MIT License (MIT), see - http://jedwatson.github.io/classnames -*/ !function(){"use strict";var n={}.hasOwnProperty;function r(){for(var e=[],s=0;s"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"script"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"type"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:'"text/javascript"'}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"src"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:'"path/to/overlayscrollbars.js"'}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"defer>"})]})]})})})]}),"\n",(0,o.jsx)(s.h2,{id:"initialization",children:"Initialization"}),"\n",(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": During initialization its expected that the ",(0,o.jsx)("b",{children:"CSS file is loaded and parsed"})," by the browser."]}),"\n"]}),"\n",(0,o.jsxs)(s.p,{children:["You can initialize either directly with an ",(0,o.jsx)(s.code,{children:"Element"})," or with an ",(0,o.jsx)(s.code,{children:"Object"})," where you have more control over the initialization process."]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// simple initialization with an element"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"osInstance"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]})]})})}),"\n",(0,o.jsx)(s.h3,{id:"bridging-initialization-flickering",children:"Bridging initialization flickering"}),"\n",(0,o.jsx)(s.p,{children:"If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.\r\nWhile this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering."}),"\n",(0,o.jsxs)(s.p,{children:["To fix this behavior apply the ",(0,o.jsx)(s.code,{children:"data-overlayscrollbars-initialize"})," attribute to the target element (and ",(0,o.jsx)(s.code,{children:"html"})," element if the target element is ",(0,o.jsx)(s.code,{children:"body"}),")."]}),"\n",(0,o.jsx)(s.h3,{id:"initialization-with-an-object",children:"Initialization with an Object"}),"\n",(0,o.jsxs)("details",{children:[(0,o.jsx)("summary",{children:(0,o.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,o.jsx)("br",{}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,o.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description of all possibilities."]}),"\n"]}),(0,o.jsxs)(s.p,{children:["The only required field is the ",(0,o.jsx)(s.code,{children:"target"})," field. This is the field to which the plugin is applied to.",(0,o.jsx)(s.br,{}),"\n","If you use the object initialization only with the ",(0,o.jsx)(s.code,{children:"target"})," field, the outcome is equivalent to the element initialization:"]}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// Both initializations have the same outcome"})}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"({ target: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:") }, {});"})]})]})})}),(0,o.jsxs)(s.p,{children:["In the initialization object you can specify how the library is handling generated elements.\r\nFor example you can appoint an existing element as the ",(0,o.jsx)(s.code,{children:"viewport"})," element. Like this the library won't generate it but take the specified element instead:"]}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" elements: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" viewport: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#viewport'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,o.jsx)(s.p,{children:"This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to generate its own elements. Those cases arise very often when you want an other library to work together with OverlayScrollbars."}),(0,o.jsx)(s.hr,{}),(0,o.jsx)(s.p,{children:"You can also decide to which element the scrollbars should be applied to:"}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" slot: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"parentElement"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,o.jsx)(s.hr,{}),(0,o.jsx)(s.p,{children:"And last but not least you can decide when the initialization should be canceled:"}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" cancel: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" nativeScrollbarsOverlaid: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" body: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,o.jsxs)(s.p,{children:["In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a ",(0,o.jsx)(s.code,{children:"body"})," element and the plugin determined that a initialization to the ",(0,o.jsx)(s.code,{children:"body"})," element would affect native functionality like ",(0,o.jsx)(s.code,{children:"window.scrollTo"}),"."]})]}),"\n",(0,o.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,o.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",(0,o.jsx)(s.code,{children:"options"})," method:"]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"), {"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'hidden'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,o.jsx)(s.h3,{id:"options-in-depth",children:"Options in depth"}),"\n",(0,o.jsxs)("details",{children:[(0,o.jsx)("summary",{children:(0,o.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,o.jsx)("br",{}),(0,o.jsx)(s.p,{children:"The default options are:"}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"defaultOptions"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" paddingAbsolute: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" showNativeOverlaidScrollbars: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" update: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" elementEvents: [["}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'img'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'load'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"]],"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" debounce: ["}),(0,o.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#D33682"},children:"33"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" attributes: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" ignoreMutation: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" y: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" theme: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'os-theme-dark'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" visibility: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'auto'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" autoHide: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'never'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" autoHideDelay: "}),(0,o.jsx)(s.span,{style:{color:"#D33682"},children:"1300"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" dragScroll: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" clickScroll: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" pointers: ["}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'mouse'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'touch'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'pen'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"};"})})]})})}),(0,o.jsx)(s.h3,{id:"paddingabsolute",children:(0,o.jsx)(s.code,{children:"paddingAbsolute"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"boolean"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"false"})})]})})]}),(0,o.jsx)(s.p,{children:"Indicates whether the padding for the content shall be absolute."}),(0,o.jsx)(s.h3,{id:"shownativeoverlaidscrollbars",children:(0,o.jsx)(s.code,{children:"showNativeOverlaidScrollbars"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"boolean"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"false"})})]})})]}),(0,o.jsx)(s.p,{children:"Indicates whether the native overlaid scrollbars shall be visible."}),(0,o.jsx)(s.h3,{id:"updateelementevents",children:(0,o.jsx)(s.code,{children:"update.elementEvents"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"Array<[string, string]> | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"[['img', 'load']]"})})]})})]}),(0,o.jsxs)(s.p,{children:["An array of tuples. The first value in the tuple is an ",(0,o.jsx)(s.code,{children:"selector"})," and the second value are ",(0,o.jsx)(s.code,{children:"event names"}),'. The plugin will update itself if any of the elements with the specified selector will emit any specified event. The default value can be interpreted as "The plugin will update itself if any ',(0,o.jsx)(s.code,{children:"img"})," element emits an ",(0,o.jsx)(s.code,{children:"load"}),' event."']}),(0,o.jsx)(s.h3,{id:"updatedebounce",children:(0,o.jsx)(s.code,{children:"update.debounce"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"[number, number] | number | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"[0, 33]"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": If 0 is used for the timeout, ",(0,o.jsx)(s.code,{children:"requestAnimationFrame"})," instead of ",(0,o.jsx)(s.code,{children:"setTimeout"})," is used for the debounce."]}),"\n"]}),(0,o.jsxs)(s.p,{children:["Debounces the ",(0,o.jsx)(s.code,{children:"MutationObserver"})," which tracks changes to the content. If a ",(0,o.jsx)(s.strong,{children:"tuple"})," is passed, the first value is the timeout and second is the max wait. If only a ",(0,o.jsx)(s.strong,{children:"number"})," is passed you specify only the timeout and there is no max wait. With ",(0,o.jsx)(s.strong,{children:"null"})," there is no debounce. ",(0,o.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,o.jsx)(s.h3,{id:"updateattributes",children:(0,o.jsx)(s.code,{children:"update.attributes"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string[] | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"null"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": There is a base array of attributes that the ",(0,o.jsx)(s.code,{children:"MutationObserver"})," always observes, even if this option is ",(0,o.jsx)(s.code,{children:"null"}),"."]}),"\n"]}),(0,o.jsxs)(s.p,{children:["An array of additional attributes that the ",(0,o.jsx)(s.code,{children:"MutationObserver"})," should observe for the content."]}),(0,o.jsx)(s.h3,{id:"updateignoremutation",children:(0,o.jsx)(s.code,{children:"update.ignoreMutation"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"((mutation) => any) | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"null"})})]})})]}),(0,o.jsxs)(s.p,{children:["A function which receives a ",(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord",children:(0,o.jsx)(s.code,{children:"MutationRecord"})})," as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. ",(0,o.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,o.jsx)(s.h3,{id:"overflowx",children:(0,o.jsx)(s.code,{children:"overflow.x"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,o.jsx)(s.code,{children:"'hidden'"}),", ",(0,o.jsx)(s.code,{children:"'scroll'"}),", ",(0,o.jsx)(s.code,{children:"'visible'"}),", ",(0,o.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,o.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,o.jsx)(s.p,{children:"The overflow behavior for the horizontal (x) axis."}),(0,o.jsx)(s.h3,{id:"overflowy",children:(0,o.jsx)(s.code,{children:"overflow.y"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,o.jsx)(s.code,{children:"'hidden'"}),", ",(0,o.jsx)(s.code,{children:"'scroll'"}),", ",(0,o.jsx)(s.code,{children:"'visible'"}),", ",(0,o.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,o.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,o.jsx)(s.p,{children:"The overflow behavior for the vertical (y) axis."}),(0,o.jsx)(s.h3,{id:"scrollbarstheme",children:(0,o.jsx)(s.code,{children:"scrollbars.theme"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'os-theme-dark'"})})]})})]}),(0,o.jsx)(s.p,{children:"Applies the specified theme (classname) to the scrollbars."}),(0,o.jsx)(s.h3,{id:"scrollbarsvisibility",children:(0,o.jsx)(s.code,{children:"scrollbars.visibility"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'auto'"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,o.jsx)(s.code,{children:"'visible'"}),", ",(0,o.jsx)(s.code,{children:"'hidden'"}),", and ",(0,o.jsx)(s.code,{children:"'auto'"}),"."]}),"\n"]}),(0,o.jsx)(s.p,{children:"The base visibility of the scrollbars."}),(0,o.jsx)(s.h3,{id:"scrollbarsautohide",children:(0,o.jsx)(s.code,{children:"scrollbars.autoHide"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'never'"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,o.jsx)(s.code,{children:"'never'"}),", ",(0,o.jsx)(s.code,{children:"'scroll'"}),", ",(0,o.jsx)(s.code,{children:"'leave'"})," and ",(0,o.jsx)(s.code,{children:"'move'"}),"."]}),"\n"]}),(0,o.jsx)(s.p,{children:"The possibility to hide visible scrollbars automatically after a certain user action."}),(0,o.jsx)(s.h3,{id:"scrollbarsautohidedelay",children:(0,o.jsx)(s.code,{children:"scrollbars.autoHideDelay"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"number"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"1300"})})]})})]}),(0,o.jsx)(s.p,{children:"The delay in milliseconds before the scrollbars are hidden automatically."}),(0,o.jsx)(s.h3,{id:"scrollbarsdragscroll",children:(0,o.jsx)(s.code,{children:"scrollbars.dragScroll"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"boolean"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"true"})})]})})]}),(0,o.jsx)(s.p,{children:"Indicates whether you can drag the scrollbar handles for scrolling."}),(0,o.jsx)(s.h3,{id:"scrollbarsclickscroll",children:(0,o.jsx)(s.code,{children:"scrollbars.clickScroll"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"boolean"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"false"})})]})})]}),(0,o.jsx)(s.p,{children:"Indicates whether you can click on the scrollbar track for scrolling."}),(0,o.jsx)(s.h3,{id:"scrollbarspointers",children:(0,o.jsx)(s.code,{children:"scrollbars.pointers"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string[] | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"['mouse', 'touch', 'pen']"})})]})})]}),(0,o.jsxs)(s.p,{children:["The ",(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType",children:(0,o.jsx)(s.code,{children:"PointerTypes"})})," the plugin should react to."]})]}),"\n",(0,o.jsx)(s.h2,{id:"events",children:"Events"}),"\n",(0,o.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",(0,o.jsx)(s.code,{children:"on"})," and ",(0,o.jsx)(s.code,{children:"off"})," methods:"]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"), {}, {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"updated"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance, onUpdatedArgs) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// ..."})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,o.jsx)(s.h3,{id:"events-in-depth",children:"Events in depth"}),"\n",(0,o.jsxs)("details",{children:[(0,o.jsx)("summary",{children:(0,o.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,o.jsx)("br",{}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Every event receives the ",(0,o.jsx)(s.code,{children:"instance"})," from which it was invoked as the first argument. Always."]}),"\n"]}),(0,o.jsx)(s.h3,{id:"initialized",children:(0,o.jsx)(s.code,{children:"initialized"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"arguments"}),(0,o.jsx)(s.th,{align:"left",children:"description"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"instance"})}),(0,o.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]})})]}),(0,o.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were appended to the DOM."}),(0,o.jsx)(s.h3,{id:"updated",children:(0,o.jsx)(s.code,{children:"updated"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"arguments"}),(0,o.jsx)(s.th,{align:"left",children:"description"})]})}),(0,o.jsxs)(s.tbody,{children:[(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"instance"})}),(0,o.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"onUpdatedArgs"})}),(0,o.jsxs)(s.td,{align:"left",children:["An ",(0,o.jsx)(s.code,{children:"object"})," which describes the update in detail."]})]})]})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": If an update was triggered but nothing changed, the event won't be invoked."]}),"\n"]}),(0,o.jsx)(s.p,{children:"Is invoked after the instace was updated."}),(0,o.jsx)(s.h3,{id:"destroyed",children:(0,o.jsx)(s.code,{children:"destroyed"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"arguments"}),(0,o.jsx)(s.th,{align:"left",children:"description"})]})}),(0,o.jsxs)(s.tbody,{children:[(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"instance"})}),(0,o.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"canceled"})}),(0,o.jsxs)(s.td,{align:"left",children:["An ",(0,o.jsx)(s.code,{children:"boolean"})," which indicates whether the initialization was canceled and thus destroyed."]})]})]})]}),(0,o.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were removed from the DOM."}),(0,o.jsx)(s.h3,{id:"scroll",children:(0,o.jsx)(s.code,{children:"scroll"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"arguments"}),(0,o.jsx)(s.th,{align:"left",children:"description"})]})}),(0,o.jsxs)(s.tbody,{children:[(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"instance"})}),(0,o.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"event"})}),(0,o.jsxs)(s.td,{align:"left",children:["The original ",(0,o.jsx)(s.code,{children:"event"})," argument of the DOM event."]})]})]})]}),(0,o.jsx)(s.p,{children:"Is invoked by scrolling the viewport."})]}),"\n",(0,o.jsx)(s.h2,{id:"instance",children:"Instance"}),"\n",(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,o.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(newOptions"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(eventListeners"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"update"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(force"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"state"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"State"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"elements"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Elements"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"destroy"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,o.jsx)(s.h2,{id:"static-methods",children:"Static Methods"}),"\n",(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,o.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbarsStatic"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"undefined"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", options"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", eventListeners"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(plugin"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"[])"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"valid"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"any"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" osInstance "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"is"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"env"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Environment"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,o.jsx)(s.h2,{id:"plugins",children:"Plugins"}),"\n",(0,o.jsx)(s.p,{children:"Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.strong,{children:"ScrollbarsHidingPlugin"}),": Is needed for old browsers which aren't supporting nativ scrollbar styling features. ",(0,o.jsx)(s.a,{href:"https://caniuse.com/?search=scrollbar%20styling",children:"You can find the list of browsers where you need this plugin here"})," (note that even though ",(0,o.jsx)(s.code,{children:"iOS Safari >= 14"})," is marked as unsupported you only need this plugin for ",(0,o.jsx)(s.code,{children:"iOS < 7.1"}),")."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.strong,{children:"SizeObserverPlugin"}),": Is needed for old browsers which aren't supporting the ",(0,o.jsx)(s.code,{children:"ResizeObserver"})," api. ",(0,o.jsx)(s.a,{href:"https://caniuse.com/?search=ResizeObserver",children:"You can find the list of browsers where you need this plugin here"})]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.strong,{children:"ClickScrollPlugin"}),": If you want to use the option ",(0,o.jsx)(s.code,{children:"scrollbars: { clickScroll: true }"}),"."]}),"\n"]}),"\n",(0,o.jsx)(s.h3,{id:"consuming-plugins",children:"Consuming Plugins"}),"\n",(0,o.jsx)(s.p,{children:"Plugins are consumed like:"}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#859900"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" { "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"} "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'overlayscrollbars'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// single plugin"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// multiple plugins"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(["}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"]);"})]})]})})}),"\n",(0,o.jsx)(s.h3,{id:"writing-plugins",children:"Writing Plugins"}),"\n",(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,o.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,o.jsx)(s.p,{children:"You can write and publish your own Plugins. This section is a work in progress."}),"\n",(0,o.jsxs)(s.h2,{id:"feature-comparison-to-v1",children:["Feature comparison to ",(0,o.jsx)(s.code,{children:"v1"})]}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["The ",(0,o.jsx)(s.code,{children:"scroll"})," function is missing. Planned as a ",(0,o.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n",(0,o.jsxs)(s.li,{children:["Initialization to the ",(0,o.jsx)(s.code,{children:"textarea"})," element isn't supported yet. Planned as a ",(0,o.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"future-plans",children:"Future Plans"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:"Provide plugin based support for missing features. (treeshakeable)"}),"\n",(0,o.jsx)(s.li,{children:"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}),"\n",(0,o.jsx)(s.li,{children:"Improve tests. (unit & browser tests)"}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"license",children:"License"}),"\n",(0,o.jsx)(s.p,{children:"MIT"})]})}var B=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=Object.assign({},(0,m.ah)(),e.components).wrapper;return s?(0,o.jsx)(s,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)},b=l(4028),v=l.n(b),w=function(e){return(0,o.jsx)("div",{className:"my-6 text-center font-medium text-sm uppercase relative",children:(0,o.jsxs)("span",{className:"p-3 bg-white",children:[e,(0,o.jsx)("div",{className:"absolute block top-1/2 left-1/2 w-[100%] xs:w-[80%] border-t-[1px] border-slate-300 translate-x-[-50%] translate-y-[-50%] z-[-1]"})]})})},N=function(){var e=(0,t.useRef)(null);return(0,t.useEffect)(function(){if(e.current){var s=(0,x.a)(e.current,{});return function(){return s.destroy()}}},[]),(0,o.jsxs)(h,{className:"px-6",children:[(0,o.jsx)("div",{className:"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44",children:(0,o.jsx)("div",{className:a()("h-full",v().logo),children:(0,o.jsx)("img",{src:j.src,className:"h-full",alt:"OverlayScrollbars Logo"})})}),(0,o.jsxs)("h1",{className:"text-center xxs:text-4xl text-2xl font-bold my-11",children:["Overlay",(0,o.jsx)("wbr",{}),"Scrollbars"]}),(0,o.jsx)("p",{className:"text-center mx-auto max-w-screen-sm my-11 font-medium",children:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}),w("used by"),(0,o.jsx)("div",{ref:e,children:(0,o.jsx)("div",{className:"flex justify-center",children:(0,o.jsxs)("div",{className:a()("inline-flex items-center gap-6 py-6",v().usedBy),children:[(0,o.jsx)("div",{className:"h-11 px-3 flex-grow flex-shrink-0",style:{filter:"brightness(0.35)"},children:(0,o.jsx)("img",{className:"h-full",src:p.src,alt:""})}),(0,o.jsx)("div",{className:"h-11 px-3 py-1.5 flex-grow flex-shrink-0",children:(0,o.jsx)("img",{className:"h-full",src:y.src,alt:""})}),(0,o.jsx)("div",{className:"h-11 p-3 flex-grow flex-shrink-0",children:(0,o.jsx)("img",{className:"h-full",src:u.src,alt:""})})]})})}),w((0,o.jsxs)("a",{href:"https://github.com/KingSora/OverlayScrollbars",target:"_blank",rel:"noreferrer",children:[(0,o.jsx)(d,{className:"inline-block w-11 hover:scale-110 text-primary-dark hover:text-primary-blue1 active:text-primary-blue2 transition-transformColor ease-in-out duration-300",svg:g,icon:"github"}),(0,o.jsx)("span",{className:"sr-only",children:"OverlayScrollbars on Github"})]})),(0,o.jsxs)("p",{className:"text-center text-sm text-primary-gray2 mx-auto max-w-screen-sm my-11 font-medium",children:["This page is a work in progress. For now refer to the TypeScript definitions for a more detailed documentation.",(0,o.jsx)("br",{}),"Looking for the v1 docs?"," ",(0,o.jsx)("a",{href:"v1",className:"text-primary-blue2 underline",children:"Follow this link"}),"."]}),(0,o.jsxs)("div",{className:"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap",children:[(0,o.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,o.jsx)("img",{src:"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square",alt:"Downloads"})}),(0,o.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,o.jsx)("img",{src:"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square",alt:"Version"})}),(0,o.jsx)("a",{href:"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE",children:(0,o.jsx)("img",{src:"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square",alt:"License"})}),(0,o.jsx)("a",{href:"https://app.codecov.io/gh/KingSora/OverlayScrollbars",children:(0,o.jsx)("img",{src:"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square",alt:"Code Coverage"})}),(0,o.jsx)("a",{href:"https://bundlephobia.com/package/overlayscrollbars",children:(0,o.jsx)("img",{src:"https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square",alt:"Max. Bundle Size"})})]}),(0,o.jsx)("div",{className:"mt-11 prose prose-primary mx-auto pb-32",children:(0,o.jsx)(B,{})})]})}},4028:function(e){e.exports={logo:"assets_logo__UC59w",usedBySeparator:"assets_usedBySeparator__yqt5h",usedBy:"assets_usedBy__FHTGG"}}},function(e){e.O(0,[774,888,179],function(){return e(e.s=2766)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/docs/_next/static/chunks/pages/index-ea6f9c0e08894410.js b/docs/_next/static/chunks/pages/index-ea6f9c0e08894410.js new file mode 100644 index 0000000..c4415a7 --- /dev/null +++ b/docs/_next/static/chunks/pages/index-ea6f9c0e08894410.js @@ -0,0 +1,5 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{42:function(e,s){var l; /*! + Copyright (c) 2018 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames +*/ !function(){"use strict";var n={}.hasOwnProperty;function r(){for(var e=[],s=0;s"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"script"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"type"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:'"text/javascript"'}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"src"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:'"path/to/overlayscrollbars.js"'}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"defer>"})]})]})})})]}),"\n",(0,d.jsx)(s.h2,{id:"initialization",children:"Initialization"}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": During initialization its expected that the ",(0,d.jsx)("b",{children:"CSS file is loaded and parsed"})," by the browser."]}),"\n"]}),"\n",(0,d.jsxs)(s.p,{children:["You can initialize either directly with an ",(0,d.jsx)(s.code,{children:"Element"})," or with an ",(0,d.jsx)(s.code,{children:"Object"})," where you have more control over the initialization process."]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// simple initialization with an element"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"osInstance"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]})]})})}),"\n",(0,d.jsx)(s.h3,{id:"bridging-initialization-flickering",children:"Bridging initialization flickering"}),"\n",(0,d.jsx)(s.p,{children:"If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.\r\nWhile this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering."}),"\n",(0,d.jsxs)(s.p,{children:["To fix this behavior apply the ",(0,d.jsx)(s.code,{children:"data-overlayscrollbars-initialize"})," attribute to the target element (and ",(0,d.jsx)(s.code,{children:"html"})," element if the target element is ",(0,d.jsx)(s.code,{children:"body"}),")."]}),"\n",(0,d.jsx)(s.h3,{id:"initialization-with-an-object",children:"Initialization with an Object"}),"\n",(0,d.jsxs)("details",{children:[(0,d.jsx)("summary",{children:(0,d.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,d.jsx)("br",{}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,d.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description of all possibilities."]}),"\n"]}),(0,d.jsxs)(s.p,{children:["The only required field is the ",(0,d.jsx)(s.code,{children:"target"})," field. This is the field to which the plugin is applied to.",(0,d.jsx)(s.br,{}),"\n","If you use the object initialization only with the ",(0,d.jsx)(s.code,{children:"target"})," field, the outcome is equivalent to the element initialization:"]}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// Both initializations have the same outcome"})}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"({ target: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:") }, {});"})]})]})})}),(0,d.jsxs)(s.p,{children:["In the initialization object you can specify how the library is handling generated elements.\r\nFor example you can appoint an existing element as the ",(0,d.jsx)(s.code,{children:"viewport"})," element. Like this the library won't generate it but take the specified element instead:"]}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" elements: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" viewport: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#viewport'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,d.jsx)(s.p,{children:"This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to generate its own elements. Those cases arise very often when you want an other library to work together with OverlayScrollbars."}),(0,d.jsx)(s.hr,{}),(0,d.jsx)(s.p,{children:"You can also decide to which element the scrollbars should be applied to:"}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" slot: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"parentElement"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,d.jsx)(s.hr,{}),(0,d.jsx)(s.p,{children:"And last but not least you can decide when the initialization should be canceled:"}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" cancel: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" nativeScrollbarsOverlaid: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" body: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,d.jsxs)(s.p,{children:["In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a ",(0,d.jsx)(s.code,{children:"body"})," element and the plugin determined that a initialization to the ",(0,d.jsx)(s.code,{children:"body"})," element would affect native functionality like ",(0,d.jsx)(s.code,{children:"window.scrollTo"}),"."]})]}),"\n",(0,d.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,d.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",(0,d.jsx)(s.code,{children:"options"})," method:"]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"), {"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'hidden'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,d.jsx)(s.h3,{id:"options-in-depth",children:"Options in depth"}),"\n",(0,d.jsxs)("details",{children:[(0,d.jsx)("summary",{children:(0,d.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,d.jsx)("br",{}),(0,d.jsx)(s.p,{children:"The default options are:"}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"defaultOptions"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" paddingAbsolute: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" showNativeOverlaidScrollbars: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" update: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" elementEvents: [["}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'img'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'load'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"]],"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" debounce: ["}),(0,d.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#D33682"},children:"33"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" attributes: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" ignoreMutation: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" y: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" theme: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'os-theme-dark'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" visibility: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'auto'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" autoHide: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'never'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" autoHideDelay: "}),(0,d.jsx)(s.span,{style:{color:"#D33682"},children:"1300"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" dragScroll: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" clickScroll: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" pointers: ["}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'mouse'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'touch'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'pen'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"};"})})]})})}),(0,d.jsx)(s.h3,{id:"paddingabsolute",children:(0,d.jsx)(s.code,{children:"paddingAbsolute"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"boolean"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"false"})})]})})]}),(0,d.jsx)(s.p,{children:"Indicates whether the padding for the content shall be absolute."}),(0,d.jsx)(s.h3,{id:"shownativeoverlaidscrollbars",children:(0,d.jsx)(s.code,{children:"showNativeOverlaidScrollbars"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"boolean"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"false"})})]})})]}),(0,d.jsx)(s.p,{children:"Indicates whether the native overlaid scrollbars shall be visible."}),(0,d.jsx)(s.h3,{id:"updateelementevents",children:(0,d.jsx)(s.code,{children:"update.elementEvents"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"Array<[string, string]> | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"[['img', 'load']]"})})]})})]}),(0,d.jsxs)(s.p,{children:["An array of tuples. The first value in the tuple is an ",(0,d.jsx)(s.code,{children:"selector"})," and the second value are ",(0,d.jsx)(s.code,{children:"event names"}),'. The plugin will update itself if any of the elements with the specified selector will emit any specified event. The default value can be interpreted as "The plugin will update itself if any ',(0,d.jsx)(s.code,{children:"img"})," element emits an ",(0,d.jsx)(s.code,{children:"load"}),' event."']}),(0,d.jsx)(s.h3,{id:"updatedebounce",children:(0,d.jsx)(s.code,{children:"update.debounce"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"[number, number] | number | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"[0, 33]"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": If 0 is used for the timeout, ",(0,d.jsx)(s.code,{children:"requestAnimationFrame"})," instead of ",(0,d.jsx)(s.code,{children:"setTimeout"})," is used for the debounce."]}),"\n"]}),(0,d.jsxs)(s.p,{children:["Debounces the ",(0,d.jsx)(s.code,{children:"MutationObserver"})," which tracks changes to the content. If a ",(0,d.jsx)(s.strong,{children:"tuple"})," is passed, the first value is the timeout and second is the max wait. If only a ",(0,d.jsx)(s.strong,{children:"number"})," is passed you specify only the timeout and there is no max wait. With ",(0,d.jsx)(s.strong,{children:"null"})," there is no debounce. ",(0,d.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,d.jsx)(s.h3,{id:"updateattributes",children:(0,d.jsx)(s.code,{children:"update.attributes"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string[] | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"null"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": There is a base array of attributes that the ",(0,d.jsx)(s.code,{children:"MutationObserver"})," always observes, even if this option is ",(0,d.jsx)(s.code,{children:"null"}),"."]}),"\n"]}),(0,d.jsxs)(s.p,{children:["An array of additional attributes that the ",(0,d.jsx)(s.code,{children:"MutationObserver"})," should observe for the content."]}),(0,d.jsx)(s.h3,{id:"updateignoremutation",children:(0,d.jsx)(s.code,{children:"update.ignoreMutation"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"((mutation) => any) | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"null"})})]})})]}),(0,d.jsxs)(s.p,{children:["A function which receives a ",(0,d.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord",children:(0,d.jsx)(s.code,{children:"MutationRecord"})})," as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. ",(0,d.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,d.jsx)(s.h3,{id:"overflowx",children:(0,d.jsx)(s.code,{children:"overflow.x"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,d.jsx)(s.code,{children:"'hidden'"}),", ",(0,d.jsx)(s.code,{children:"'scroll'"}),", ",(0,d.jsx)(s.code,{children:"'visible'"}),", ",(0,d.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,d.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,d.jsx)(s.p,{children:"The overflow behavior for the horizontal (x) axis."}),(0,d.jsx)(s.h3,{id:"overflowy",children:(0,d.jsx)(s.code,{children:"overflow.y"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,d.jsx)(s.code,{children:"'hidden'"}),", ",(0,d.jsx)(s.code,{children:"'scroll'"}),", ",(0,d.jsx)(s.code,{children:"'visible'"}),", ",(0,d.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,d.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,d.jsx)(s.p,{children:"The overflow behavior for the vertical (y) axis."}),(0,d.jsx)(s.h3,{id:"scrollbarstheme",children:(0,d.jsx)(s.code,{children:"scrollbars.theme"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'os-theme-dark'"})})]})})]}),(0,d.jsx)(s.p,{children:"Applies the specified theme (classname) to the scrollbars."}),(0,d.jsx)(s.h3,{id:"scrollbarsvisibility",children:(0,d.jsx)(s.code,{children:"scrollbars.visibility"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'auto'"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,d.jsx)(s.code,{children:"'visible'"}),", ",(0,d.jsx)(s.code,{children:"'hidden'"}),", and ",(0,d.jsx)(s.code,{children:"'auto'"}),"."]}),"\n"]}),(0,d.jsx)(s.p,{children:"The base visibility of the scrollbars."}),(0,d.jsx)(s.h3,{id:"scrollbarsautohide",children:(0,d.jsx)(s.code,{children:"scrollbars.autoHide"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'never'"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,d.jsx)(s.code,{children:"'never'"}),", ",(0,d.jsx)(s.code,{children:"'scroll'"}),", ",(0,d.jsx)(s.code,{children:"'leave'"})," and ",(0,d.jsx)(s.code,{children:"'move'"}),"."]}),"\n"]}),(0,d.jsx)(s.p,{children:"The possibility to hide visible scrollbars automatically after a certain user action."}),(0,d.jsx)(s.h3,{id:"scrollbarsautohidedelay",children:(0,d.jsx)(s.code,{children:"scrollbars.autoHideDelay"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"number"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"1300"})})]})})]}),(0,d.jsx)(s.p,{children:"The delay in milliseconds before the scrollbars are hidden automatically."}),(0,d.jsx)(s.h3,{id:"scrollbarsdragscroll",children:(0,d.jsx)(s.code,{children:"scrollbars.dragScroll"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"boolean"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"true"})})]})})]}),(0,d.jsx)(s.p,{children:"Indicates whether you can drag the scrollbar handles for scrolling."}),(0,d.jsx)(s.h3,{id:"scrollbarsclickscroll",children:(0,d.jsx)(s.code,{children:"scrollbars.clickScroll"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"boolean"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"false"})})]})})]}),(0,d.jsx)(s.p,{children:"Indicates whether you can click on the scrollbar track for scrolling."}),(0,d.jsx)(s.h3,{id:"scrollbarspointers",children:(0,d.jsx)(s.code,{children:"scrollbars.pointers"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string[] | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"['mouse', 'touch', 'pen']"})})]})})]}),(0,d.jsxs)(s.p,{children:["The ",(0,d.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType",children:(0,d.jsx)(s.code,{children:"PointerTypes"})})," the plugin should react to."]})]}),"\n",(0,d.jsx)(s.h2,{id:"events",children:"Events"}),"\n",(0,d.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",(0,d.jsx)(s.code,{children:"on"})," and ",(0,d.jsx)(s.code,{children:"off"})," methods:"]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"), {}, {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"updated"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance, onUpdatedArgs) {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// ..."})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,d.jsx)(s.h3,{id:"events-in-depth",children:"Events in depth"}),"\n",(0,d.jsxs)("details",{children:[(0,d.jsx)("summary",{children:(0,d.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,d.jsx)("br",{}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Every event receives the ",(0,d.jsx)(s.code,{children:"instance"})," from which it was invoked as the first argument. Always."]}),"\n"]}),(0,d.jsx)(s.h3,{id:"initialized",children:(0,d.jsx)(s.code,{children:"initialized"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"arguments"}),(0,d.jsx)(s.th,{align:"left",children:"description"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"instance"})}),(0,d.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]})})]}),(0,d.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were appended to the DOM."}),(0,d.jsx)(s.h3,{id:"updated",children:(0,d.jsx)(s.code,{children:"updated"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"arguments"}),(0,d.jsx)(s.th,{align:"left",children:"description"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"instance"})}),(0,d.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"onUpdatedArgs"})}),(0,d.jsxs)(s.td,{align:"left",children:["An ",(0,d.jsx)(s.code,{children:"object"})," which describes the update in detail."]})]})]})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": If an update was triggered but nothing changed, the event won't be invoked."]}),"\n"]}),(0,d.jsx)(s.p,{children:"Is invoked after the instace was updated."}),(0,d.jsx)(s.h3,{id:"destroyed",children:(0,d.jsx)(s.code,{children:"destroyed"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"arguments"}),(0,d.jsx)(s.th,{align:"left",children:"description"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"instance"})}),(0,d.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"canceled"})}),(0,d.jsxs)(s.td,{align:"left",children:["An ",(0,d.jsx)(s.code,{children:"boolean"})," which indicates whether the initialization was canceled and thus destroyed."]})]})]})]}),(0,d.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were removed from the DOM."}),(0,d.jsx)(s.h3,{id:"scroll",children:(0,d.jsx)(s.code,{children:"scroll"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"arguments"}),(0,d.jsx)(s.th,{align:"left",children:"description"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"instance"})}),(0,d.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"event"})}),(0,d.jsxs)(s.td,{align:"left",children:["The original ",(0,d.jsx)(s.code,{children:"event"})," argument of the DOM event."]})]})]})]}),(0,d.jsx)(s.p,{children:"Is invoked by scrolling the viewport."})]}),"\n",(0,d.jsx)(s.h2,{id:"instance",children:"Instance"}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,d.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(newOptions"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(eventListeners"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"update"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(force"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"state"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"State"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"elements"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Elements"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"destroy"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,d.jsx)(s.h2,{id:"static-methods",children:"Static Methods"}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,d.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbarsStatic"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"undefined"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", options"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", eventListeners"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(plugin"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"[])"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"valid"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"any"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" osInstance "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"is"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"env"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Environment"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,d.jsx)(s.h2,{id:"plugins",children:"Plugins"}),"\n",(0,d.jsx)(s.p,{children:"Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:"}),"\n",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsxs)(s.li,{children:[(0,d.jsx)(s.strong,{children:"ScrollbarsHidingPlugin"}),": Is needed for old browsers which aren't supporting nativ scrollbar styling features. ",(0,d.jsx)(s.a,{href:"https://caniuse.com/?search=scrollbar%20styling",children:"You can find the list of browsers where you need this plugin here"})," (note that even though ",(0,d.jsx)(s.code,{children:"iOS Safari >= 14"})," is marked as unsupported you only need this plugin for ",(0,d.jsx)(s.code,{children:"iOS < 7.1"}),")."]}),"\n",(0,d.jsxs)(s.li,{children:[(0,d.jsx)(s.strong,{children:"SizeObserverPlugin"}),": Is needed for old browsers which aren't supporting the ",(0,d.jsx)(s.code,{children:"ResizeObserver"})," api. ",(0,d.jsx)(s.a,{href:"https://caniuse.com/?search=ResizeObserver",children:"You can find the list of browsers where you need this plugin here"})]}),"\n",(0,d.jsxs)(s.li,{children:[(0,d.jsx)(s.strong,{children:"ClickScrollPlugin"}),": If you want to use the option ",(0,d.jsx)(s.code,{children:"scrollbars: { clickScroll: true }"}),"."]}),"\n"]}),"\n",(0,d.jsx)(s.h3,{id:"consuming-plugins",children:"Consuming Plugins"}),"\n",(0,d.jsx)(s.p,{children:"Plugins are consumed like:"}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#859900"},children:"import"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" { "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"} "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"from"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'overlayscrollbars'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// single plugin"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:");"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// multiple plugins"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(["}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"]);"})]})]})})}),"\n",(0,d.jsx)(s.h3,{id:"writing-plugins",children:"Writing Plugins"}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,d.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,d.jsx)(s.p,{children:"You can write and publish your own Plugins. This section is a work in progress."}),"\n",(0,d.jsxs)(s.h2,{id:"feature-comparison-to-v1",children:["Feature comparison to ",(0,d.jsx)(s.code,{children:"v1"})]}),"\n",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsxs)(s.li,{children:["The ",(0,d.jsx)(s.code,{children:"scroll"})," function is missing. Planned as a ",(0,d.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n",(0,d.jsxs)(s.li,{children:["Initialization to the ",(0,d.jsx)(s.code,{children:"textarea"})," element isn't supported yet. Planned as a ",(0,d.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n"]}),"\n",(0,d.jsx)(s.h2,{id:"future-plans",children:"Future Plans"}),"\n",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsx)(s.li,{children:"Provide plugin based support for missing features. (treeshakeable)"}),"\n",(0,d.jsx)(s.li,{children:"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}),"\n",(0,d.jsx)(s.li,{children:"Improve tests. (unit & browser tests)"}),"\n"]}),"\n",(0,d.jsx)(s.h2,{id:"license",children:"License"}),"\n",(0,d.jsx)(s.p,{children:"MIT"})]})}var b=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=Object.assign({},(0,f.ah)(),e.components).wrapper;return s?(0,d.jsx)(s,Object.assign({},e,{children:(0,d.jsx)(B,e)})):B(e)},v=l(4028),w=l.n(v),N=function(e){return(0,d.jsx)("div",{className:"my-6 text-center font-medium text-sm uppercase relative",children:(0,d.jsxs)("span",{className:"p-3 bg-white",children:[e,(0,d.jsx)("div",{className:"absolute block top-1/2 left-1/2 w-[100%] xs:w-[80%] border-t-[1px] border-slate-300 translate-x-[-50%] translate-y-[-50%] z-[-1]"})]})})},S=function(){var e=(0,o.useRef)(null),s=(0,n.Z)((0,j.a)(),2),l=s[0],r=s[1];return(0,o.useEffect)(function(){if(e.current)return l(e.current),function(){var e;return null===(e=r())||void 0===e?void 0:e.destroy()}},[]),(0,d.jsxs)(x,{className:"px-6",children:[(0,d.jsx)("div",{className:"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44",children:(0,d.jsx)("div",{className:t()("h-full",w().logo),children:(0,d.jsx)("img",{src:p.src,className:"h-full",alt:"OverlayScrollbars Logo",width:"200",height:"200"})})}),(0,d.jsxs)("h1",{className:"text-center xxs:text-4xl text-2xl font-bold my-11",children:["Overlay",(0,d.jsx)("wbr",{}),"Scrollbars"]}),(0,d.jsx)("p",{className:"text-center mx-auto max-w-screen-sm my-11 font-medium",children:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}),N("used by"),(0,d.jsx)("div",{ref:e,"data-overlayscrollbars-initialize":!0,children:(0,d.jsx)("div",{className:"flex justify-center",children:(0,d.jsxs)("div",{className:t()("inline-flex items-center gap-6 py-6",w().usedBy),children:[(0,d.jsx)("div",{className:"h-11 px-3 flex-grow flex-shrink-0",style:{filter:"brightness(0.35)"},children:(0,d.jsx)("img",{className:"h-full",src:y.src,alt:""})}),(0,d.jsx)("div",{className:"h-11 px-3 py-1.5 flex-grow flex-shrink-0",children:(0,d.jsx)("img",{className:"h-full",src:u.src,alt:""})}),(0,d.jsx)("div",{className:"h-11 p-3 flex-grow flex-shrink-0",children:(0,d.jsx)("img",{className:"h-full",src:g.src,alt:""})})]})})}),N((0,d.jsxs)("a",{href:"https://github.com/KingSora/OverlayScrollbars",target:"_blank",rel:"noreferrer",children:[(0,d.jsx)(h,{className:"inline-block w-11 hover:scale-110 text-primary-dark hover:text-primary-blue1 active:text-primary-blue2 transition-transformColor ease-in-out duration-300",svg:m,icon:"github"}),(0,d.jsx)("span",{className:"sr-only",children:"OverlayScrollbars on Github"})]})),(0,d.jsxs)("p",{className:"text-center text-sm text-primary-gray2 mx-auto max-w-screen-sm my-11 font-medium",children:["This page is a work in progress. For now refer to the TypeScript definitions for a more detailed documentation.",(0,d.jsx)("br",{}),"Looking for the v1 docs?"," ",(0,d.jsx)("a",{href:"v1",className:"text-primary-blue2 underline",children:"Follow this link"}),"."]}),(0,d.jsxs)("div",{className:"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap",children:[(0,d.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,d.jsx)("img",{src:"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square",alt:"Downloads"})}),(0,d.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,d.jsx)("img",{src:"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square",alt:"Version"})}),(0,d.jsx)("a",{href:"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE",children:(0,d.jsx)("img",{src:"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square",alt:"License"})}),(0,d.jsx)("a",{href:"https://app.codecov.io/gh/KingSora/OverlayScrollbars",children:(0,d.jsx)("img",{src:"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square",alt:"Code Coverage"})}),(0,d.jsx)("a",{href:"https://bundlephobia.com/package/overlayscrollbars",children:(0,d.jsx)("img",{src:"https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square",alt:"Max. Bundle Size"})})]}),(0,d.jsx)("div",{className:"mt-11 prose prose-primary mx-auto pb-32",children:(0,d.jsx)(b,{})})]})}},4028:function(e){e.exports={logo:"assets_logo__UC59w",usedBySeparator:"assets_usedBySeparator__yqt5h",usedBy:"assets_usedBy__FHTGG"}}},function(e){e.O(0,[774,888,179],function(){return e(e.s=2766)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/docs/_next/static/css/16de5124cd83f7fb.css b/docs/_next/static/css/a0f974289bbacc23.css similarity index 68% rename from docs/_next/static/css/16de5124cd83f7fb.css rename to docs/_next/static/css/a0f974289bbacc23.css index 45b4547..4525c79 100644 --- a/docs/_next/static/css/16de5124cd83f7fb.css +++ b/docs/_next/static/css/a0f974289bbacc23.css @@ -1,6 +1,7 @@ .default\:fill-current{fill:currentColor}/* ! tailwindcss v3.2.0 | MIT License | https://tailwindcss.com -*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Noto Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em;background:var(--tw-prose-pre-bg);padding:.25rem;border-radius:.375rem;overflow-wrap:break-word}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose :where(b):not(:where([class~=not-prose] *)){font-weight:600}.prose :where(h5):not(:where([class~=not-prose] *)){color:#0a376b;font-weight:600;font-size:.875rem;font-size:[object Object]}.prose :where(h6):not(:where([class~=not-prose] *)){color:#0a376b;font-weight:600;font-size:.875rem;font-size:[object Object]}.prose :where(blockquote>p>strong:first-child):not(:where([class~=not-prose] *)){color:#4276ff}.prose :where(summary>:only-child,):not(:where([class~=not-prose] *)){display:inline;margin:0}.prose :where(summary):not(:where([class~=not-prose] *)){display:list-item;cursor:pointer}.prose-sm :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-base :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose-base :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-base :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-lg :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8888889em;margin-bottom:.8888889em}.prose-lg :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-lg :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8em;margin-bottom:.8em}.prose-xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-2xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8333333em;margin-bottom:.8333333em}.prose-2xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-2xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-primary{--tw-prose-body:#475774;--tw-prose-headings:#0a376b;--tw-prose-lead:#475774;--tw-prose-links:#4276ff;--tw-prose-bold:#0a376b;--tw-prose-counters:#475774;--tw-prose-bullets:#4276ff;--tw-prose-hr:#e2e8f0;--tw-prose-quotes:#0a376b;--tw-prose-quote-borders:#e2e8f0;--tw-prose-captions:#475774;--tw-prose-code:#0a376b;--tw-prose-pre-code:#fce7f3;--tw-prose-pre-bg:#f1f5f9;--tw-prose-th-borders:#e2e8f0;--tw-prose-td-borders:#e2e8f0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.top-1\/2{top:50%}.left-1\/2{left:50%}.z-\[-1\]{z-index:-1}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-11{margin-top:2.75rem;margin-bottom:2.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-8{margin-top:2rem}.mt-11{margin-top:2.75rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-\[80px\]{height:80px}.h-\[33vh\]{height:33vh}.h-full{height:100%}.h-11{height:2.75rem}.max-h-40{max-height:10rem}.w-\[100\%\]{width:100%}.w-11{width:2.75rem}.max-w-screen-sm{max-width:768px}.flex-shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.flex-grow{flex-grow:1}.translate-x-\[-50\%\]{--tw-translate-x:-50%}.translate-x-\[-50\%\],.translate-y-\[-50\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y:-50%}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-6{gap:1.5rem}.gap-2{gap:.5rem}.border-t-\[1px\]{border-top-width:1px}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-3{padding:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pb-32{padding-bottom:8rem}.text-center{text-align:center}.font-sans{font-family:Noto Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-medium{font-weight:600}.font-bold{font-weight:800}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.text-primary-dark{--tw-text-opacity:1;color:rgb(10 55 107/var(--tw-text-opacity))}.text-primary-gray2{--tw-text-opacity:1;color:rgb(105 121 150/var(--tw-text-opacity))}.text-primary-blue2{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transformColor{transition-property:transform,color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.default\:fill-current:default{fill:currentColor}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:text-primary-blue1:hover{--tw-text-opacity:1;color:rgb(51 142 255/var(--tw-text-opacity))}.active\:text-primary-blue2:active{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}@media (min-width:374px){.xxs\:max-h-44{max-height:11rem}.xxs\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:640px){.xs\:w-\[80\%\]{width:80%}}@media (min-width:768px){.sm\:container{width:100%;margin-right:auto;margin-left:auto}@media (min-width:374px){.sm\:container{max-width:374px}}@media (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:960px){.sm\:container{max-width:960px}}@media (min-width:1280px){.sm\:container{max-width:1280px}}@media (min-width:1440px){.sm\:container{max-width:1440px}}@media (min-width:1536px){.sm\:container{max-width:1536px}}.sm\:flex-row{flex-direction:row}}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-Regular.c983f2f0.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-SemiBold.dedd3bcb.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-ExtraBold.d19a8e50.ttf) format("truetype");font-weight:800;font-style:normal}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html){overflow:auto}.os-size-observer,.os-size-observer-listener{direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;inset:0;transform:scale(.1)}.os-size-observer:before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(10)}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}.os-environment{--os-custom-prop:-1;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:var(--os-custom-prop)}.os-environment div{width:200%;height:200%;margin:10px 0}.os-environment.os-environment-flexbox-glue{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto;width:auto;min-height:200px;min-width:200px}.os-environment.os-environment-flexbox-glue div{flex:auto;width:auto;height:auto;max-height:100%;max-width:100%;margin:0}.os-environment.os-environment-flexbox-glue-max{max-height:200px}.os-environment.os-environment-flexbox-glue-max div{overflow:visible}.os-environment.os-environment-flexbox-glue-max div:before{content:"";display:block;height:999px;width:999px}.os-environment,.os-viewport{-ms-overflow-style:scrollbar!important}.os-viewport-scrollbar-hidden.os-environment,.os-viewport-scrollbar-hidden.os-viewport,[data-overlayscrollbars-initialize],[data-overlayscrollbars~=scrollbarHidden],html.os-viewport-scrollbar-hidden{scrollbar-width:none!important}.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar,.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar-corner,.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar,.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar-corner,[data-overlayscrollbars-initialize]::-webkit-scrollbar,[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,html.os-viewport-scrollbar-hidden::-webkit-scrollbar,html.os-viewport-scrollbar-hidden::-webkit-scrollbar-corner{display:none!important;width:0!important;height:0!important;visibility:hidden!important;background:transparent!important}html.os-viewport-scrollbar-hidden,html.os-viewport-scrollbar-hidden>body[data-overlayscrollbars]{box-sizing:border-box;margin:0;width:100%;height:100%}.os-padding,[data-overlayscrollbars~=host]{position:relative;display:flex;flex-direction:row!important;flex-wrap:nowrap!important}.os-padding,.os-viewport{box-sizing:inherit;position:relative;flex:auto!important;height:auto;width:100%;padding:0;margin:0;border:none;z-index:0}.os-viewport{--os-vaw:0;--os-vah:0}.os-viewport.os-viewport-arrange:before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars~=viewport]{overflow:hidden!important}[data-overlayscrollbars~=overflowVisible]{overflow:visible!important}[data-overlayscrollbars-overflow-x=hidden]{overflow-x:hidden!important}[data-overlayscrollbars-overflow-x=scroll]{overflow-x:scroll!important}[data-overlayscrollbars-overflow-x=hidden]{overflow-y:hidden!important}[data-overlayscrollbars-overflow-y=scroll]{overflow-y:scroll!important}.os-padding,.os-viewport{overflow:hidden}.os-overflow-visible{overflow:visible}.os-content{box-sizing:inherit}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] .os-padding{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>.os-padding,[data-overlayscrollbars-grid]>.os-padding>.os-viewport,[data-overlayscrollbars-grid]>.os-viewport{height:auto!important;width:auto!important}.os-scrollbar{contain:strict;transition:opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none}.os-scrollbar-track{position:relative;direction:ltr!important;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-handle,.os-scrollbar-track{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle,.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-interaction.os-scrollbar-visible,.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hidden{opacity:0;visibility:hidden}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}.os-theme-none.os-scrollbar,[data-overlayscrollbars~=updating]>.os-scrollbar{display:none!important}.os-theme-dark.os-scrollbar-horizontal,.os-theme-light.os-scrollbar-horizontal{right:10px;height:10px}.os-theme-dark.os-scrollbar-vertical,.os-theme-light.os-scrollbar-vertical{bottom:10px;width:10px}.os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,.os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal{left:10px;right:0}.os-theme-dark.os-scrollbar,.os-theme-light.os-scrollbar{padding:2px;box-sizing:border-box;background:transparent}.os-theme-dark.os-scrollbar-unusable,.os-theme-dark.os-scrollbar>.os-scrollbar-track,.os-theme-light.os-scrollbar-unusable,.os-theme-light.os-scrollbar>.os-scrollbar-track{background:transparent}.os-theme-dark.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle{min-width:30px}.os-theme-dark.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle{min-height:30px}.os-theme-dark.os-scrollbar-transition>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light.os-scrollbar-transition>.os-scrollbar-track>.os-scrollbar-handle{transition:background-color .3s}.os-theme-dark.os-scrollbar>.os-scrollbar-track,.os-theme-dark.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light.os-scrollbar>.os-scrollbar-track,.os-theme-light.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{border-radius:10px}.os-theme-dark.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background:rgba(0,0,0,.4)}.os-theme-light.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background:hsla(0,0%,100%,.4)}.os-theme-dark.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle{background:rgba(0,0,0,.55)}.os-theme-light.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle{background:hsla(0,0%,100%,.55)}.os-theme-dark.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle.active{background:rgba(0,0,0,.7)}.os-theme-light.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle.active{background:hsla(0,0%,100%,.7)}.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before{content:"";position:absolute;inset:0;display:block}.os-theme-dark.os-host-scrollbar-hidden>.os-scrollbar-handle:before{display:none}.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before{top:-6px;bottom:-2px}.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before{left:-6px;right:-2px}.os-theme-dark.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before{right:-6px;left:-2px} +*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Noto Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em;background:var(--tw-prose-pre-bg);padding:.25rem;border-radius:.375rem;overflow-wrap:break-word}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose :where(b):not(:where([class~=not-prose] *)){font-weight:600}.prose :where(h5):not(:where([class~=not-prose] *)){color:#0a376b;font-weight:600;font-size:.875rem;font-size:[object Object]}.prose :where(h6):not(:where([class~=not-prose] *)){color:#0a376b;font-weight:600;font-size:.875rem;font-size:[object Object]}.prose :where(blockquote>p>strong:first-child):not(:where([class~=not-prose] *)){color:#4276ff}.prose :where(summary>:only-child,):not(:where([class~=not-prose] *)){display:inline;margin:0}.prose :where(summary):not(:where([class~=not-prose] *)){display:list-item;cursor:pointer}.prose-sm :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-base :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose-base :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-base :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-lg :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8888889em;margin-bottom:.8888889em}.prose-lg :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-lg :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8em;margin-bottom:.8em}.prose-xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-2xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8333333em;margin-bottom:.8333333em}.prose-2xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-2xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-primary{--tw-prose-body:#475774;--tw-prose-headings:#0a376b;--tw-prose-lead:#475774;--tw-prose-links:#4276ff;--tw-prose-bold:#0a376b;--tw-prose-counters:#475774;--tw-prose-bullets:#4276ff;--tw-prose-hr:#e2e8f0;--tw-prose-quotes:#0a376b;--tw-prose-quote-borders:#e2e8f0;--tw-prose-captions:#475774;--tw-prose-code:#0a376b;--tw-prose-pre-code:#fce7f3;--tw-prose-pre-bg:#f1f5f9;--tw-prose-th-borders:#e2e8f0;--tw-prose-td-borders:#e2e8f0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.top-1\/2{top:50%}.left-1\/2{left:50%}.z-\[-1\]{z-index:-1}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-11{margin-top:2.75rem;margin-bottom:2.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-8{margin-top:2rem}.mt-11{margin-top:2.75rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-\[80px\]{height:80px}.h-\[33vh\]{height:33vh}.h-full{height:100%}.h-11{height:2.75rem}.max-h-40{max-height:10rem}.w-\[100\%\]{width:100%}.w-11{width:2.75rem}.max-w-screen-sm{max-width:768px}.flex-shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.flex-grow{flex-grow:1}.translate-x-\[-50\%\]{--tw-translate-x:-50%}.translate-x-\[-50\%\],.translate-y-\[-50\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y:-50%}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-6{gap:1.5rem}.gap-2{gap:.5rem}.border-t-\[1px\]{border-top-width:1px}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-3{padding:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pb-32{padding-bottom:8rem}.text-center{text-align:center}.font-sans{font-family:Noto Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-medium{font-weight:600}.font-bold{font-weight:800}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.text-primary-dark{--tw-text-opacity:1;color:rgb(10 55 107/var(--tw-text-opacity))}.text-primary-gray2{--tw-text-opacity:1;color:rgb(105 121 150/var(--tw-text-opacity))}.text-primary-blue2{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transformColor{transition-property:transform,color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.default\:fill-current:default{fill:currentColor}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:text-primary-blue1:hover{--tw-text-opacity:1;color:rgb(51 142 255/var(--tw-text-opacity))}.active\:text-primary-blue2:active{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}@media (min-width:374px){.xxs\:max-h-44{max-height:11rem}.xxs\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:640px){.xs\:w-\[80\%\]{width:80%}}@media (min-width:768px){.sm\:container{width:100%;margin-right:auto;margin-left:auto}@media (min-width:374px){.sm\:container{max-width:374px}}@media (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:960px){.sm\:container{max-width:960px}}@media (min-width:1280px){.sm\:container{max-width:1280px}}@media (min-width:1440px){.sm\:container{max-width:1440px}}@media (min-width:1536px){.sm\:container{max-width:1536px}}.sm\:flex-row{flex-direction:row}}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-Regular.c983f2f0.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-SemiBold.dedd3bcb.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-ExtraBold.d19a8e50.ttf) format("truetype");font-weight:800;font-style:normal;font-display:swap}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html){overflow:auto} + /*! * OverlayScrollbars * Version: 2.0.0 @@ -9,4 +10,4 @@ * https://github.com/KingSora * * Released under the MIT license. - */ \ No newline at end of file + */.os-size-observer,.os-size-observer-listener{direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(.1)}.os-size-observer:before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(10)}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}.os-environment{--os-custom-prop:-1;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:var(--os-custom-prop)}.os-environment div{width:200%;height:200%;margin:10px 0}.os-environment.os-environment-flexbox-glue{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto;width:auto;min-height:200px;min-width:200px}.os-environment.os-environment-flexbox-glue div{flex:auto;width:auto;height:auto;max-height:100%;max-width:100%;margin:0}.os-environment.os-environment-flexbox-glue-max{max-height:200px}.os-environment.os-environment-flexbox-glue-max div{overflow:visible}.os-environment.os-environment-flexbox-glue-max div:before{content:"";display:block;height:999px;width:999px}.os-environment,.os-viewport{-ms-overflow-style:scrollbar!important}.os-viewport-scrollbar-hidden.os-environment,.os-viewport-scrollbar-hidden.os-viewport,[data-overlayscrollbars-initialize],[data-overlayscrollbars~=scrollbarHidden],html.os-viewport-scrollbar-hidden{scrollbar-width:none!important}.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar,.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar-corner,.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar,.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar-corner,[data-overlayscrollbars-initialize]::-webkit-scrollbar,[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,html.os-viewport-scrollbar-hidden::-webkit-scrollbar,html.os-viewport-scrollbar-hidden::-webkit-scrollbar-corner{display:none!important;width:0!important;height:0!important;visibility:hidden!important;background:transparent!important}html.os-viewport-scrollbar-hidden,html.os-viewport-scrollbar-hidden>body[data-overlayscrollbars]{box-sizing:border-box;margin:0;width:100%;height:100%}.os-padding,[data-overlayscrollbars~=host]{position:relative;display:flex;flex-direction:row!important;flex-wrap:nowrap!important}.os-padding,.os-viewport{box-sizing:inherit;position:relative;flex:auto!important;height:auto;width:100%;padding:0;margin:0;border:none;z-index:0}.os-viewport{--os-vaw:0;--os-vah:0}.os-viewport.os-viewport-arrange:before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars~=viewport]{overflow:hidden!important}[data-overlayscrollbars~=overflowVisible]{overflow:visible!important}[data-overlayscrollbars-overflow-x=hidden]{overflow-x:hidden!important}[data-overlayscrollbars-overflow-x=scroll]{overflow-x:scroll!important}[data-overlayscrollbars-overflow-x=hidden]{overflow-y:hidden!important}[data-overlayscrollbars-overflow-y=scroll]{overflow-y:scroll!important}.os-padding,.os-viewport{overflow:hidden}.os-overflow-visible{overflow:visible}.os-content{box-sizing:inherit}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] .os-padding{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>.os-padding,[data-overlayscrollbars-grid]>.os-padding>.os-viewport,[data-overlayscrollbars-grid]>.os-viewport{height:auto!important;width:auto!important}.os-scrollbar{contain:strict;transition:opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none}.os-scrollbar-track{position:relative;direction:ltr!important;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-handle,.os-scrollbar-track{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle,.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-interaction.os-scrollbar-visible,.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hidden{opacity:0;visibility:hidden}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}.os-theme-none.os-scrollbar,[data-overlayscrollbars~=updating]>.os-scrollbar{display:none!important}.os-theme-dark.os-scrollbar-horizontal,.os-theme-light.os-scrollbar-horizontal{right:10px;height:10px}.os-theme-dark.os-scrollbar-vertical,.os-theme-light.os-scrollbar-vertical{bottom:10px;width:10px}.os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,.os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal{left:10px;right:0}.os-theme-dark.os-scrollbar,.os-theme-light.os-scrollbar{padding:2px;box-sizing:border-box;background:transparent}.os-theme-dark.os-scrollbar-unusable,.os-theme-dark.os-scrollbar>.os-scrollbar-track,.os-theme-light.os-scrollbar-unusable,.os-theme-light.os-scrollbar>.os-scrollbar-track{background:transparent}.os-theme-dark.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle{min-width:30px}.os-theme-dark.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle{min-height:30px}.os-theme-dark.os-scrollbar-transition>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light.os-scrollbar-transition>.os-scrollbar-track>.os-scrollbar-handle{transition:background-color .3s}.os-theme-dark.os-scrollbar>.os-scrollbar-track,.os-theme-dark.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light.os-scrollbar>.os-scrollbar-track,.os-theme-light.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{border-radius:10px}.os-theme-dark.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background:rgba(0,0,0,.4)}.os-theme-light.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background:hsla(0,0%,100%,.4)}.os-theme-dark.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle{background:rgba(0,0,0,.55)}.os-theme-light.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle{background:hsla(0,0%,100%,.55)}.os-theme-dark.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle.active{background:rgba(0,0,0,.7)}.os-theme-light.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle.active{background:hsla(0,0%,100%,.7)}.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-theme-dark.os-host-scrollbar-hidden>.os-scrollbar-handle:before{display:none}.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before{top:-6px;bottom:-2px}.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before{left:-6px;right:-2px}.os-theme-dark.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before,.os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before{right:-6px;left:-2px} \ No newline at end of file diff --git a/docs/_next/static/a6rCR9y6SQ5Ojjwxqah3-/_buildManifest.js b/docs/_next/static/rdSn7MfqqvzaExLXDlLOR/_buildManifest.js similarity index 79% rename from docs/_next/static/a6rCR9y6SQ5Ojjwxqah3-/_buildManifest.js rename to docs/_next/static/rdSn7MfqqvzaExLXDlLOR/_buildManifest.js index 2fae63c..f5ea9fb 100644 --- a/docs/_next/static/a6rCR9y6SQ5Ojjwxqah3-/_buildManifest.js +++ b/docs/_next/static/rdSn7MfqqvzaExLXDlLOR/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-6cf432147fa9d4da.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file +self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-ea6f9c0e08894410.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/docs/_next/static/a6rCR9y6SQ5Ojjwxqah3-/_ssgManifest.js b/docs/_next/static/rdSn7MfqqvzaExLXDlLOR/_ssgManifest.js similarity index 100% rename from docs/_next/static/a6rCR9y6SQ5Ojjwxqah3-/_ssgManifest.js rename to docs/_next/static/rdSn7MfqqvzaExLXDlLOR/_ssgManifest.js diff --git a/docs/index.html b/docs/index.html index 6ccccac..d83071d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ -OverlayScrollbars
OverlayScrollbars Logo

OverlayScrollbars

A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

used by
OverlayScrollbars on Github

This page is a work in progress. For now refer to the TypeScript definitions for a more detailed documentation.
Looking for the v1 docs? Follow this link.

DownloadsVersionLicenseCode CoverageMax. Bundle Size

Why

+OverlayScrollbars
OverlayScrollbars Logo

OverlayScrollbars

A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

used by
OverlayScrollbars on Github

This page is a work in progress. For now refer to the TypeScript definitions for a more detailed documentation.
Looking for the v1 docs? Follow this link.

DownloadsVersionLicenseCode CoverageMax. Bundle Size

Why

I created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.

Goals & Features

    @@ -23,9 +23,9 @@

    Getting started

    npm & node

    OverlayScrollbars can be downloaded from npm or the package manager of your choice:

    -
    npm install overlayscrollbars
    +
    npm install overlayscrollbars

    After installation it can be imported:

    -
    import 'overlayscrollbars/overlayscrollbars.css';
+
    import 'overlayscrollbars/overlayscrollbars.css';
 import { OverlayScrollbars } from 'overlayscrollbars';
    
 
    
 
    Note: In older node versions use 'overlayscrollbars/styles/overlayscrollbars.css' as the import path for the CSS file.
    
@@ -36,14 +36,14 @@
 
  • Use the javascript files with the .browser extension.
    • 
 
  • If you target old browsers use the .es5 javascript file, for new browsers .es6.
    • 
 
  • For production use the javascript / stylesheet files with the .min extension.
    • 
-

Embedd OverlayScrollbars manually in your HTML:

<link type="text/css" href="path/to/overlayscrollbars.css" rel="stylesheet" />
+
Embedd OverlayScrollbars manually in your HTML:
<link type="text/css" href="path/to/overlayscrollbars.css" rel="stylesheet" />
 <script type="text/javascript" src="path/to/overlayscrollbars.js" defer></script>

 
Initialization

 

 
Note: During initialization its expected that the CSS file is loaded and parsed by the browser.

 

 
You can initialize either directly with an Element or with an Object where you have more control over the initialization process.

-
// simple initialization with an element
+
// simple initialization with an element
 const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});

 
Bridging initialization flickering

 
If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.
@@ -53,21 +53,21 @@ While this period the native scrollbars are still visible and are switched out a
 
This is a in depth topic. Click here to read it.


 
Note: For now please refer to the TypeScript definitions for a more detailed description of all possibilities.

 
The only required field is the target field. This is the field to which the plugin is applied to.

-If you use the object initialization only with the target field, the outcome is equivalent to the element initialization:
// Both initializations have the same outcome
+If you use the object initialization only with the target field, the outcome is equivalent to the element initialization:
// Both initializations have the same outcome
 
 OverlayScrollbars(document.querySelector('#myElement'), {});
 OverlayScrollbars({ target: document.querySelector('#myElement') }, {});
In the initialization object you can specify how the library is handling generated elements.
-For example you can appoint an existing element as the viewport element. Like this the library won't generate it but take the specified element instead:
OverlayScrollbars({ 
+For example you can appoint an existing element as the viewport element. Like this the library won't generate it but take the specified element instead:
OverlayScrollbars({ 
  target: document.querySelector('#target'),
  elements: {
    viewport: document.querySelector('#viewport'),
  },
-}, {});
This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to generate its own elements. Those cases arise very often when you want an other library to work together with OverlayScrollbars.
You can also decide to which element the scrollbars should be applied to:
OverlayScrollbars({ 
+}, {});
This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to generate its own elements. Those cases arise very often when you want an other library to work together with OverlayScrollbars.
You can also decide to which element the scrollbars should be applied to:
OverlayScrollbars({ 
  target: document.querySelector('#target'),
  scrollbars: {
    slot: document.querySelector('#target').parentElement,
  },
-}, {});
And last but not least you can decide when the initialization should be canceled:
OverlayScrollbars({ 
+}, {});
And last but not least you can decide when the initialization should be canceled:
OverlayScrollbars({ 
  target: document.querySelector('#target'),
  cancel: {
    nativeScrollbarsOverlaid: true,
@@ -76,13 +76,13 @@ For example you can appoint an existing element as the viewport ele
 }, {});
In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a body element and the plugin determined that a initialization to the body element would affect native functionality like window.scrollTo.

 
Options

 
You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the options method:

-
OverlayScrollbars(document.querySelector('#myElement'), {
+
OverlayScrollbars(document.querySelector('#myElement'), {
   overflow: {
     x: 'hidden',
   },
 });

 
Options in depth

-
This is a in depth topic. Click here to read it.

The default options are:
const defaultOptions = {
+
This is a in depth topic. Click here to read it.

The default options are:
const defaultOptions = {
   paddingAbsolute: false,
   showNativeOverlaidScrollbars: false,
   update: {
@@ -119,7 +119,7 @@ For example you can appoint an existing element as the viewport ele
 
The possibility to hide visible scrollbars automatically after a certain user action.
scrollbars.autoHideDelay
typedefault
number1300
The delay in milliseconds before the scrollbars are hidden automatically.
scrollbars.dragScroll
typedefault
booleantrue
Indicates whether you can drag the scrollbar handles for scrolling.
scrollbars.clickScroll
typedefault
booleanfalse
Indicates whether you can click on the scrollbar track for scrolling.
scrollbars.pointers
typedefault
string[] | null['mouse', 'touch', 'pen']
The PointerTypes the plugin should react to.

 
Events

 
You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the on and off methods:

-
OverlayScrollbars(document.querySelector('#myElement'), {}, {
+
OverlayScrollbars(document.querySelector('#myElement'), {}, {
   updated(osInstance, onUpdatedArgs) {
     // ...
   }
@@ -134,7 +134,7 @@ For example you can appoint an existing element as the viewport ele
 

 
Note: For now please refer to the TypeScript definitions for a more detailed description.

 

-
interface OverlayScrollbars {
+
interface OverlayScrollbars {
   options(): Options;
   options(newOptions: PartialOptions, pure?: boolean): Options;
 
@@ -157,7 +157,7 @@ For example you can appoint an existing element as the viewport ele
 

 
Note: For now please refer to the TypeScript definitions for a more detailed description.

 

-
interface OverlayScrollbarsStatic {
+
interface OverlayScrollbarsStatic {
   (target: InitializationTarget): OverlayScrollbars | undefined;
   (target: InitializationTarget, options: PartialOptions, eventListeners?: EventListeners): OverlayScrollbars;
 
@@ -176,7 +176,7 @@ For example you can appoint an existing element as the viewport ele
 
 
Consuming Plugins

 
Plugins are consumed like:

-
import { 
+
import { 
   OverlayScrollbars, 
   ScrollbarsHidingPlugin, 
   SizeObserverPlugin, 
@@ -205,4 +205,4 @@ For example you can appoint an existing element as the viewport ele
 
  • Improve tests. (unit & browser tests)
    • 
 
 
    License
    
-
    MIT
    
\ No newline at end of file
+
    MIT
    
\ No newline at end of file
diff --git a/website/package-lock.json b/website/package-lock.json
index 7f1439b..9056842 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -11,6 +11,7 @@
         "classnames": "^2.3.2",
         "next": "12.3.1",
         "overlayscrollbars": "file:./../packages/overlayscrollbars/dist",
+        "overlayscrollbars-react": "file:./../packages/overlayscrollbars-react/dist",
         "react": "18.2.0",
         "react-dom": "18.2.0"
       },
@@ -36,16 +37,13 @@
     },
     "../packages/overlayscrollbars": {
       "version": "2.0.0-beta.3",
+      "extraneous": true,
       "license": "MIT",
       "devDependencies": {
         "rollup-plugin-summary": "^1.4.3",
         "rollup-plugin-terser": "^7.0.2"
       }
     },
-    "../packages/overlayscrollbars/dist": {
-      "version": "2.0.0-beta.3",
-      "license": "MIT"
-    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -3086,8 +3084,18 @@
       }
     },
     "node_modules/overlayscrollbars": {
-      "resolved": "../packages/overlayscrollbars/dist",
-      "link": true
+      "version": "2.0.0",
+      "resolved": "file:../packages/overlayscrollbars/dist",
+      "license": "MIT"
+    },
+    "node_modules/overlayscrollbars-react": {
+      "version": "0.4.0",
+      "resolved": "file:../packages/overlayscrollbars-react/dist",
+      "license": "MIT",
+      "peerDependencies": {
+        "overlayscrollbars": "^2.0.0",
+        "react": ">=16.8.0"
+      }
     },
     "node_modules/parse-entities": {
       "version": "4.0.0",
@@ -6478,7 +6486,11 @@
       "dev": true
     },
     "overlayscrollbars": {
-      "version": "file:../packages/overlayscrollbars/dist"
+      "version": "2.0.0"
+    },
+    "overlayscrollbars-react": {
+      "version": "0.4.0",
+      "requires": {}
     },
     "parse-entities": {
       "version": "4.0.0",
diff --git a/website/package.json b/website/package.json
index 4bf98c2..da541ac 100644
--- a/website/package.json
+++ b/website/package.json
@@ -12,6 +12,7 @@
     "classnames": "^2.3.2",
     "next": "12.3.1",
     "overlayscrollbars": "file:./../packages/overlayscrollbars/dist",
+    "overlayscrollbars-react": "file:./../packages/overlayscrollbars-react/dist",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
diff --git a/website/src/assets/css/styles.css b/website/src/assets/css/styles.css
index efec92d..f7e9b55 100644
--- a/website/src/assets/css/styles.css
+++ b/website/src/assets/css/styles.css
@@ -3,18 +3,21 @@
   src: url('~/assets/font/noto_sans/NotoSans-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: Noto Sans;
   src: url('~/assets/font/noto_sans/NotoSans-SemiBold.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: Noto Sans;
   src: url('~/assets/font/noto_sans/NotoSans-ExtraBold.ttf') format('truetype');
   font-weight: 800;
   font-style: normal;
+  font-display: swap;
 }
 
 /* elements wont be suddenly cropped after initialization is done */
diff --git a/website/src/components/md/Pre.tsx b/website/src/components/md/Pre.tsx
index 273dfa2..04a3942 100644
--- a/website/src/components/md/Pre.tsx
+++ b/website/src/components/md/Pre.tsx
@@ -1,17 +1,26 @@
 import { useEffect, useRef } from 'react';
-import { OverlayScrollbars } from 'overlayscrollbars';
+import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
 import type { ComponentProps } from 'react';
 
 export const Pre = ({ children }: ComponentProps<'pre'>) => {
   const ref = useRef(null);
+  const [initialize, instance] = useOverlayScrollbarsIdle({
+    options: {
+      paddingAbsolute: true,
+      scrollbars: { autoHide: 'leave' },
+    },
+  });
+
   useEffect(() => {
     if (ref.current) {
-      const instance = OverlayScrollbars(ref.current, {
-        paddingAbsolute: true,
-        scrollbars: { autoHide: 'leave' },
-      });
-      return () => instance.destroy();
+      initialize(ref.current);
+      return () => instance()?.destroy();
     }
-  });
-  return 
    {children}
    ;
+  }, []);
+
+  return (
+    
    +      {children}
+    
    
+  );
 };
diff --git a/website/src/hooks/useOverlayScrollbarsIdle.ts b/website/src/hooks/useOverlayScrollbarsIdle.ts
new file mode 100644
index 0000000..1ff963e
--- /dev/null
+++ b/website/src/hooks/useOverlayScrollbarsIdle.ts
@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import type {
+  UseOverlayScrollbarsParams,
+  UseOverlayScrollbarsInitialization,
+  UseOverlayScrollbarsInstance,
+} from 'overlayscrollbars-react';
+import type { InitializationTarget } from 'overlayscrollbars';
+
+export const useOverlayScrollbarsIdle = (
+  params?: UseOverlayScrollbarsParams
+): [
+  (...args: Parameters) => void,
+  UseOverlayScrollbarsInstance
+] => {
+  const [initialize, instance] = useOverlayScrollbars(params);
+  return useMemo(
+    () => [
+      (target: InitializationTarget) => {
+        if (typeof window !== 'undefined' && window.requestIdleCallback) {
+          window.requestIdleCallback(
+            () => {
+              initialize(target);
+            },
+            { timeout: 2000 }
+          );
+        } else {
+          initialize(target);
+        }
+      },
+      instance,
+    ],
+    [initialize, instance]
+  );
+};
diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx
index f9b8ddc..0056a6d 100644
--- a/website/src/pages/_app.tsx
+++ b/website/src/pages/_app.tsx
@@ -2,9 +2,9 @@ import '~/assets/css/tailwind.css';
 import '~/assets/css/styles.css';
 import 'overlayscrollbars/overlayscrollbars.css';
 import { useEffect } from 'react';
-import { OverlayScrollbars } from 'overlayscrollbars';
 import Head from 'next/head';
 import { MDXProvider } from '@mdx-js/react';
+import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
 import favicon from '~/assets/favicon.ico';
 import { Pre } from '~/components/md/Pre';
 import { Heading } from '~/components/md/Heading';
@@ -18,10 +18,11 @@ const generateHeading = (props: ComponentProps<'h1'>, tag: HeadingProps['tag'])
 );
 
 const OverlayScrollbarsDocs = ({ Component, pageProps }: AppProps) => {
+  const [initialize, instance] = useOverlayScrollbarsIdle();
+
   useEffect(() => {
-    const bodyInstance = OverlayScrollbars(document.body, {});
-    // @ts-ignore
-    window.osBody = bodyInstance;
+    initialize(document.body);
+    return () => instance()?.destroy();
   }, []);
 
   return (
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index ec5ded5..285f40d 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
-import { OverlayScrollbars } from 'overlayscrollbars';
+import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
 import { PageContainer } from '~/components/PageContainer';
 import { Icon } from '~/components/Icon';
 import logo from '~/assets/img/logo.svg';
@@ -24,11 +24,12 @@ const separator = (children: ReactNode) => (
 
 const IndexPage: NextPage = () => {
   const usedByRef = useRef(null);
+  const [initialize, instance] = useOverlayScrollbarsIdle();
 
   useEffect(() => {
     if (usedByRef.current) {
-      const instance = OverlayScrollbars(usedByRef.current, {});
-      return () => instance.destroy();
+      initialize(usedByRef.current);
+      return () => instance()?.destroy();
     }
   }, []);
 
@@ -36,7 +37,13 @@ const IndexPage: NextPage = () => {
     
       
    
         
    
-          OverlayScrollbars Logo
+          OverlayScrollbars Logo
         
    
       
    
       
    
@@ -49,7 +56,7 @@ const IndexPage: NextPage = () => {
         overlay scrollbars and keeps the native functionality and feeling.
       
    
       {separator('used by')}
-      
    
+