From 8f9642d78a087adc9dc1990514a61e3946ce12e6 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Tue, 15 Nov 2022 12:24:39 +0100 Subject: [PATCH] improve page --- docs/404.html | 4 +- .../_buildManifest.js | 2 +- .../_ssgManifest.js | 0 .../chunks/pages/_app-2a2c3b7059131a2d.js | 9 ---- .../chunks/pages/_app-302faba7de8b264d.js | 9 ++++ ...e08894410.js => index-6ccc9594454841fc.js} | 2 +- docs/index.html | 4 +- website/src/hooks/useOverlayScrollbarsIdle.ts | 51 +++++++++++++++---- 8 files changed, 56 insertions(+), 25 deletions(-) rename docs/_next/static/{rdSn7MfqqvzaExLXDlLOR => T0Zk_s7T8c1fmmXKBC1I2}/_buildManifest.js (79%) rename docs/_next/static/{rdSn7MfqqvzaExLXDlLOR => T0Zk_s7T8c1fmmXKBC1I2}/_ssgManifest.js (100%) delete mode 100644 docs/_next/static/chunks/pages/_app-2a2c3b7059131a2d.js create mode 100644 docs/_next/static/chunks/pages/_app-302faba7de8b264d.js rename docs/_next/static/chunks/pages/{index-ea6f9c0e08894410.js => index-6ccc9594454841fc.js} (99%) diff --git a/docs/404.html b/docs/404.html index aa023c6..152482b 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/rdSn7MfqqvzaExLXDlLOR/_buildManifest.js b/docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_buildManifest.js similarity index 79% rename from docs/_next/static/rdSn7MfqqvzaExLXDlLOR/_buildManifest.js rename to docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_buildManifest.js index f5ea9fb..977c09d 100644 --- a/docs/_next/static/rdSn7MfqqvzaExLXDlLOR/_buildManifest.js +++ b/docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_buildManifest.js @@ -1 +1 @@ -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 +self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-6ccc9594454841fc.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/rdSn7MfqqvzaExLXDlLOR/_ssgManifest.js b/docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_ssgManifest.js similarity index 100% rename from docs/_next/static/rdSn7MfqqvzaExLXDlLOR/_ssgManifest.js rename to docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_ssgManifest.js diff --git a/docs/_next/static/chunks/pages/_app-2a2c3b7059131a2d.js b/docs/_next/static/chunks/pages/_app-2a2c3b7059131a2d.js deleted file mode 100644 index 2964b4b..0000000 --- a/docs/_next/static/chunks/pages/_app-2a2c3b7059131a2d.js +++ /dev/null @@ -1,9 +0,0 @@ -(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);re(t[r],r,t));return t}function o(t,e){let r=v(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,v=t=>"string"==typeof t,y=t=>"boolean"==typeof t,g=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)||!g(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&&!v(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):[],A=(t,e,r,n,l,o,a)=>(("object"!=typeof t||p(t))&&!g(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]=A(o,n)}else t[r]=n})}),t),L=t=>{for(let e in t)return!1;return!0},M=(t,e,r,n)=>{if(f(n))return r?r[t]:e;r&&(v(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)},Z=(t,e)=>{t&&t.removeAttribute(e)},R=(t,e)=>M("scrollLeft",0,t,e),B=(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,tv=u()&&window.clearTimeout,ty=(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},tg=(t,e)=>ty(t,e,["w","h"]),tm=(t,e)=>ty(t,e,["x","y"]),tw=(t,e)=>ty(t,e,["t","r","b","l"]),tx=(t,e,r)=>ty(t,e,["width","height"],r&&(t=>Math.round(t))),tO=()=>{},t_=t=>{let e,r=t?th:tb,n=t?tv:tp;return[l=>{n(e),e=r(l,g(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(),tv(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=g(o)?o():o,u=h(e)&&e>=0;if(u){let f=g(a)?a():a,p=h(f)&&f>=0,b=e>0?tv:tp,v=c(t),y=v||t,m=s.bind(0,y);i();let w=(e>0?th:tb)(m,e);i=()=>b(w),p&&!r&&(r=th(d,f)),n=l=y}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&&v(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},tA=(t,e)=>{let r=e?parseFloat(t):parseInt(t,10);return r==r?r:0},tL=(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]=tL(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:tA(c[i],!0),r:tA(c[a],!0),b:tA(c[u],!0),l:tA(c[s],!0)}},{round:tZ}=Math,tR={w:0,h:0},tB=t=>t?{w:t.offsetWidth,h:t.offsetHeight}:tR,tH=t=>t?{w:t.clientWidth,h:t.clientHeight}:tR,tX=t=>t?{w:t.scrollWidth,h:t.scrollHeight}:tR,tD=t=>{let e=parseFloat(o(t,"height"))||0,r=parseFloat(o(t,"width"))||0;return{w:r-tZ(r),h:e-tZ(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(v(t)){let o=e.get(t)||new Set;return e.set(t,o),t0(t=>{g(t)&&o.add(t)},l),r.bind(0,t,l)}y(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(g(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))A(r[n]={},t8(l,i)),L(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},t7="os-environment",t5=`${t7}-flexbox-glue`,t6=`${t5}-max`,t9="data-overlayscrollbars",t4=`${t9}-overflow-x`,et=`${t9}-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`,ev=`${ec}-visible`,ey=`${ec}-cornerless`,eg=`${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",eA,eL=(t,e,r,n)=>{W(t,e);let l=tH(e),i=tB(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"}),R(t,0);let n=tQ(t),l=tQ(e);R(t,-999);let i=tQ(e);return{i:n.x===l.x,n:l.x!==i.x}},ez=(t,e)=>{let r=tk(t,t5),n=tF(t),l=tF(e),i=tx(l,n,!0),o=tk(t,t6),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:eL(t,r,n),u:tm},eL.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=A({},t2),h=A.bind(0,{},b),v=A.bind(0,{},p),y={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:v,N:t=>A(p,t)&&v(),F:h,G:t=>A(b,t)&&h(),X:A({},p),U:A({},b)},g=window.addEventListener,m=tS(t=>i(t?"z":"r"),{g:33,v:99});if(Z(r,"style"),Q(r),g("resize",m.bind(0,!1)),!d&&(!f.x||!f.y)){let w;g("resize",()=>{let t=e$()[eT];(w=w||t&&t.R())&&w(y,u,m.bind(0,!0))})}return y},eZ=()=>(eA||(eA=eN()),eA),eR=(t,e)=>g(e)?e.apply(0,t):e,eB=(t,e,r,n)=>{let l=f(n)?r:n,i=eR(t,l);return i||e.apply(0,t)},eH=(t,e,r,n)=>{let l=f(n)?r:n,i=eR(t,l);return!!i&&(_(i)?i:e.apply(0,t))},eX=(t,e,r)=>{let{nativeScrollbarsOverlaid:n,body:l}=r||{},{I:i,A:o}=eZ(),{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=A({},e,t)}]},eW="tabindex",eG=tt.bind(0,""),eU=t=>{W(K(t),Y(t)),Q(t)},eQ=t=>{let e=eZ(),{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:v,content:y}=p||{},g=d?t:f.target,m=F(g,"textarea"),w=g.ownerDocument,x=w.documentElement,O=g===w.body,S=w.defaultView,E=eB.bind(0,[g]),P=eH.bind(0,[g]),k=eR.bind(0,[g]),A=E.bind(0,eG,s),L=P.bind(0,eG,c),M=A(v),R=M===g,B=R&&O,H=!R&&L(y),X=!R&&_(M)&&M===H,D=X&&!!k(c),q=D?A():M,J=D?H:L(),V=X?q:M,tt=w.activeElement,te=!R&&S.top===S&&tt===g,tr={W:g,Z:m?E(eG,a,b):g,J:V,K:!R&&P(eG,u,h),tt:X?J:H,nt:!R&&!n&&i&&i(e),ot:B?x:V,st:B?w:V,et:S,ct:w,rt:m,it:O,lt:d,ut:R,dt:X,ft:(t,e)=>R?N(V,t9,e):tP(V,t),_t:(t,e,r)=>R?z(V,t9,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=[()=>{Z(to,t9),O&&Z(x,t9)}],tf=m&&tl(to),tp=m?ti:Y([ts,tu,ta,to,ti].find(t=>!1===tl(t))),tb=ts||tu,th=()=>{I(to,t9,R?"viewport":"host");let t=tk(ta,"os-padding"),e=tk(tu,!R&&en),r=tk(ts,"os-content"),l=O?tk(K(g),ei):tO;if(tf&&(U(ti,to),$(td,()=>{U(to,ti),Q(to)})),W(tb,tp),W(to,ta),W(ta||to,!R&&tu),W(tu,ts),$(td,()=>{l(),Z(tu,t4),Z(tu,et),tl(ts)&&eU(ts),tl(tu)&&eU(tu),tl(ta)&&eU(ta),t(),e(),r()}),n&&!R&&$(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):Z(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}=eZ(),{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}=eZ(),{bt:h}=r(),{vt:v,wt:y,yt:g}=t,[m,w]=e("paddingAbsolute");(v||f||!b&&y)&&([a,f]=c(l));let x=!s&&(w||g||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?$:A({},j,$)})}return{xt:x}}},{max:e3}=Math,e2=e3.bind(0,0),e8="visible",e7="hidden",e5={u:tg,o:{w:0,h:0}},e6={u:tm,o:{x:e7,y:e7}},e9=(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:v,I:y}=eZ(),g=e$()[eT],m=!c&&!v&&(y.x||y.y),w=f&&c,[x,O]=a(e5,tD.bind(0,u)),[_,S]=a(e5,tX.bind(0,u)),[j,$]=a(e5),[E,P]=a(e5),[C]=a(e6),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=!(y.x&&f);o(u,{height:d.h+c.h+(a.x&&b?s.x:0)-p})}},T=(t,e)=>{let r=v||t?0:42,n=(t,n,l)=>{let i=o(u,t),a=e?e[t]:i,s="scroll"===a;return[i,s,s&&!v?n?r:l:0,n&&!!r]},[l,i,a,s]=n("overflowX",y.x,b.x),[c,d,f,p]=n("overflowY",y.y,b.y);return{Ct:{x:l,y:c},$t:{x:i,y:d},P:{x:a,y:f},D:{x:s,y:p}}},A=(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)},L=(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,v=d[p],y=d.paddingBottom;l.width=`calc(100% + ${c+-1*b}px)`,l[f]=-c+b,l.marginBottom=-s+h,n&&(l[p]=v+(u?c:0),l.paddingBottom=y+(a?s:0))},[M,N]=g?g.H(m,h,u,s,r,T,L):[()=>m,()=>[tO]];return(t,e,a)=>{let{vt:s,Ot:f,wt:b,xt:g,gt:m,yt:Z}=t,{ht:R,bt:B}=r(),[H,X]=e("showNativeOverlaidScrollbars"),[D,F]=e("overflow"),Y=H&&y.x&&y.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&&v&&d(ei,"scrollbarHidden",!Y),K&&(tt=T(Y),k(tt,R)),s||g||b||Z||X){V&&d(eo,ee,!1);let[te,tr]=N(Y,B,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,B)&&(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(e9(tc,td),a)}let[tf,tp]=Q,[tb,th]=U,[tv,ty]=G,[tg,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(g||Z||tm||ty||tp||th||F||X||K){let tO={marginRight:0,marginBottom:0,marginLeft:0,width:"",overflowY:"",overflowX:""},t_=A(Y,tw,D,tO),tS=M(t_,tv,tg,B);c||L(t_,B,tS,tO),K&&k(t_,R),c?(I(l,t4,tO.overflowX),I(l,et,tO.overflowY)):o(u,tO)}z(l,t9,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}=eZ(),c=!a&&(u.x||u.y),d=[e0(t,e),e1(t,e),re(t,e)];return(t,e,a)=>{let u=rr(A({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&&R(n),b=f&&B(n);l("",er,!0);let h=u;return i(d,e=>{h=rr(h,e(h,t,!!a)||{},a)}),R(n,p),B(n,b),l("",er),o||(R(r,0),B(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&&v(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||[],y=(o||[]).concat(h),g=(l,o)=>{let a=c||tO,u=d||tO,f=new Set,p=new Set,y=!1,g=!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&&v(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)),g=g||C}!e&&x&&_&&!a(o,l,d,O)&&(p.add(l),y=y||S)}),f.size>0&&b(t=>E(f).reduce((e,r)=>($(e,X(t,r)),F(r,t)?$(e,r):e),[])),e)return!o&&g&&r(!1),[!1];if(p.size>0||y){let m=[E(p),y];return o||r.apply(0,m),m}},m=new tc(t=>g(t));return m.observe(t,{attributes:!0,attributeOldValue:!0,attributeFilter:y,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)&&g(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}=eZ(),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&&y(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);R(s,h?o.n?-3333333:o.i?0:3333333:3333333),B(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=tB(n);o(t)},[i,a]=ra(n,e);$(l,i),a(),e()}W(t,n)},()=>{if(r)return u(r.takeRecords(),!0)}]},rc=`[${t9}]`,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:y}=eZ(),[w]=a({u:tg,o:{w:0,h:0}},()=>{let t=p(eo,ee),e=p(el,""),r=e&&R(s),n=e&&B(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),R(s,r),B(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);v(e)?I(s,t,e):Z(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,L,M]=c||!y?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(),L()},()=>{let t={},e=X(),r=M(),n=o&&o[1]();return e&&A(t,C.apply(0,$(e,!0))),r&&A(t,S.apply(0,$(r,!0))),n&&A(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=>g(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 v=d[0],y=d[1];n=h(v)&&v,l=h(y)&&y}else h(d)?(n=d,l=!1):(n=!1,l=!1)}}]},rv={x:0,y:0},ry={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:rv,Tt:rv,Ct:{x:"hidden",y:"hidden"},Et:{x:!1,y:!1},ht:!1,bt:!1},rg=(t,e)=>{let r=eJ(e,{}),n=eV(ry),[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||!L(e)||r;return l&&o("u",[t,e,r]),l},[b,h,v,y]=rh(s,u,t=>p(f(r,t),{},!1)),g=a.bind(0);return g.jt=t=>l("u",t),g.qt=()=>{let{W:t,J:e}=s,r=R(t),n=B(t);h(),c(),R(e,r),B(e,n)},g.Nt=s,[(t,r)=>{let n=eJ(e,t,r);return y(n),p(f(n,v(),r),t,!!r)},g,()=>{i(),b(),d()}]},{round:rm}=Math,rw=t=>{let{width:e,height:r}=tF(t),{w:n,h:l}=tB(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}=eZ(),{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",v=(t,e)=>r=>{let{Tt:d}=l(),f=tB(u)[b]-tB(a)[b],p=e*r/f*d[h],v=tz(s),y=v&&i?o.n||o.i?1:-1:1;n[c]=t+p*y};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],y=v(n[c]||0,1/rw(n)[h]),g=r[d],m=o(),w=s(),x=m[f],O=b(m,w)+x/2,_=g-w[p],S=l?0:_-O,j=[tV(e,"selectstart",t=>tG(t),{S:!1}),tV(u,"pointermove",t=>{let e=t[d]-g;(l||i)&&y(S+e)})];if(i)y(S);else if(!l){let E=e$().__osClickScrollPlugin;E&&$(j,E.O(y,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=tB(t)[s],d=tB(e)[s];return r$(0,rj(1,c/d))},rk=(t,e,r,n,l,i)=>{let{V:o}=eZ(),{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}=eZ(),{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||{},v=eH([s,c,d],()=>c,a,h),g=(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=y(r);(!n||r)&&g(_,t,e),n&&r||g(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)?eg:"",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},A=T.bind(0,!0),L=T.bind(0,!1),M=()=>{W(v,_[0].Xt),W(v,S[0].Xt),th(()=>{j(eg)},300)};return A(),L(),[{Ut:E,Wt:k,Zt:j,Jt:{Kt:_,Qt:A,tn:m.bind(0,_)},nn:{Kt:S,Qt:L,tn:m.bind(0,S)}},M,C.bind(0,O)]},rA=(t,e,r,n)=>{let l,i,o,a,u,s=0,c=eV({}),[d]=c,[f,p]=t_(),[b,h]=t_(),[v,y]=t_(100),[g,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:A,nn:L,Zt:M,Ut:I,Wt:z}=O,{tn:N}=A,{tn:Z}=L,H=t=>{let{Xt:e}=t,r=k&&!T&&K(e)===$&&e;return[r,{transform:r?`translate(${R(E)}px, ${B(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=[y,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(()=>{y(),X(!0),g(()=>{l&&X(!1)})})}),tV(P,"scroll",t=>{b(()=>{z(r()),o&&X(!0),v(()=>{o&&!a&&X(!1)})}),n(t),k&&N(H),k&&Z(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:v,Ct:y,bt:g}=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(ev,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 A=k(y.x,!0),L=k(y.y,!1);M(ey,!(A&&L))}(c||d||p||n)&&(I(h),z(h),M(ew,!v.x,!0),M(ew,!v.y,!1),M(ed,g&&!T))},Y,C.bind(0,F)]},rL=(t,e,r)=>{g(t)&&t(e||void 0,r||void 0)},rM=(t,e,r)=>{let{F:n,q:l,Y:o,j:a}=eZ(),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=A({},n(),p(e)),[h,v,y]=t1(r),[g,m,w]=rg(t,b),[x,O,S]=rA(t,b,m,t=>y("scroll",[k,t])),j=(t,e)=>g(t,!!e),$=j.bind(0,{},!0),E=o($),P=a($),C=t=>{eY(c),E(),P(),S(),w(),f=!0,y("destroyed",[k,!!t]),v()},k={options(t,e){if(t){let r=e?n():{},l=t8(b,A(r,p(t)));L(l)||(A(b,l),j(l))}return A({},b)},on:h,off(t,e){t&&e&&v(t,e)},state(){let{zt:t,Tt:e,Ct:r,Et:n,K:l,St:i,bt:o}=m();return A({},{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 A({},n,{clone(){let t=s(r());return x({},!0,{}),t}})};return A({},{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=>rL(u[t],0,k)),eX(m.Nt.it,l().cancel,!s&&t.cancel))?(C(!0),k):(m.qt(),O.qt(),y("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;y("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=>rL(t,rM))},rM.valid=t=>{let e=t&&t.elements,r=g(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}=eZ();return A({},{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;if(window.requestIdleCallback){var r=t?window.requestIdleCallback:window.requestAnimationFrame,n=t?window.cancelIdleCallback:window.cancelAnimationFrame;return[function(t,l){n(e),e=r(t,l)},function(){return n(e)}]}return[function(t){return t()},function(){}]},rZ=function(t){var e=(0,n.Z)((0,l.useMemo)(function(){return rN(!0)},[]),2),r=e[0],i=e[1],o=(0,n.Z)((0,l.useMemo)(function(){return rN()},[]),2),a=o[0],u=o[1],s=(0,n.Z)(rI(t),2),c=s[0],d=s[1];return(0,l.useEffect)(function(){return function(){var t;u(),i(),null===(t=d())||void 0===t||t.destroy()}},[]),(0,l.useMemo)(function(){return[function(t){r(function(){a(function(){c(t)})},{timeout:2e3})},d]},[c,d])}},8475:function(t,e,r){"use strict";r.r(e),r.d(e,{default:function(){return y}});var n=r(9722),l=r(169),i=r(1809),o=r(4732),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},v=function(t,e){return(0,u.jsx)(d,(0,l.Z)((0,n.Z)({},t),{tag:e}))},y=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 v(t,"h1")},h2:function(t){return v(t,"h2")},h3:function(t){return v(t,"h3")},h4:function(t){return v(t,"h4")},h5:function(t){return v(t,"h5")},h6:function(t){return v(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);r"})]}),"\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 +*/ !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/index.html b/docs/index.html index d83071d..f27180d 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

    @@ -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/src/hooks/useOverlayScrollbarsIdle.ts b/website/src/hooks/useOverlayScrollbarsIdle.ts index 1ff963e..75d34d8 100644 --- a/website/src/hooks/useOverlayScrollbarsIdle.ts +++ b/website/src/hooks/useOverlayScrollbarsIdle.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { useOverlayScrollbars } from 'overlayscrollbars-react'; import type { UseOverlayScrollbarsParams, @@ -7,26 +7,57 @@ import type { } from 'overlayscrollbars-react'; import type { InitializationTarget } from 'overlayscrollbars'; +type Defer = [ + request: (callback: () => any, options?: IdleRequestOptions) => void, + clear: () => void +]; + +const createDefer = (idle?: boolean): Defer => { + let id: number; + if (typeof window !== 'undefined' && window.requestIdleCallback) { + const setTFn = idle ? window.requestIdleCallback : window.requestAnimationFrame; + const clearTFn = idle ? window.cancelIdleCallback : window.cancelAnimationFrame; + return [ + (callback: () => any, options?: IdleRequestOptions) => { + clearTFn(id); + id = setTFn(callback, options); + }, + () => clearTFn(id), + ]; + } + // eslint-disable-next-line @typescript-eslint/no-empty-function + return [(callback: () => any) => callback(), () => {}]; +}; + export const useOverlayScrollbarsIdle = ( params?: UseOverlayScrollbarsParams ): [ (...args: Parameters) => void, UseOverlayScrollbarsInstance ] => { + const [requestIdle, clearIdle] = useMemo(() => createDefer(true), []); + const [requestRAF, clearRAF] = useMemo(() => createDefer(), []); const [initialize, instance] = useOverlayScrollbars(params); + + useEffect(() => { + return () => { + clearRAF(); + clearIdle(); + instance()?.destroy(); + }; + }, []); + return useMemo( () => [ (target: InitializationTarget) => { - if (typeof window !== 'undefined' && window.requestIdleCallback) { - window.requestIdleCallback( - () => { + requestIdle( + () => { + requestRAF(() => { initialize(target); - }, - { timeout: 2000 } - ); - } else { - initialize(target); - } + }); + }, + { timeout: 2000 } + ); }, instance, ],