text: _N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[133],{"+lDO":function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){return function({addUtilities:e,variants:t}){e({".overscroll-auto":{"overscroll-behavior":"auto"},".overscroll-contain":{"overscroll-behavior":"contain"},".overscroll-none":{"overscroll-behavior":"none"},".overscroll-y-auto":{"overscroll-behavior-y":"auto"},".overscroll-y-contain":{"overscroll-behavior-y":"contain"},".overscroll-y-none":{"overscroll-behavior-y":"none"},".overscroll-x-auto":{"overscroll-behavior-x":"auto"},".overscroll-x-contain":{"overscroll-behavior-x":"contain"},".overscroll-x-none":{"overscroll-behavior-x":"none"}},t("overscrollBehavior"))}}},"4mb6":function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return j}));var n=a("HALo"),s=a("dhJC"),r=a("q1tI"),i=a.n(r),o=a("7ljp"),l=a("YFqc"),c=a.n(l),u=a("tc9R"),p=a("pOT7"),d=a("vRWG"),m=a("I6Nb"),g=a("+lDO"),b=a.n(g),v=a("8C7G"),f=a("wH44");i.a.createElement;const h={Layout:d.DocumentationLayout,classes:{plugin:b()},meta:{title:"Overscroll Behavior",description:"Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area."},tableOfContents:[{title:"Auto",slug:"auto",children:[]},{title:"Contain",slug:"contain",children:[]},{title:"None",slug:"none",children:[]},{title:"Responsive",slug:"responsive",children:[]},{title:"Customizing",slug:"customizing",children:[{title:"Variants",slug:"variants"},{title:"Disabling",slug:"disabling"}]}]},O=m.ContentsLayout;function j(e){let{components:t}=e,a=Object(s.a)(e,["components"]);return Object(o.a)(O,Object(n.a)({},h,a,{components:t,mdxType:"MDXLayout"}),Object(o.a)("div",{className:"prose"},Object(o.a)(u.a,{level:2,id:"auto",toc:!0},"Auto"),Object(o.a)("p",null,"Use ",Object(o.a)("inlineCode",{parentName:"p"},"overscroll-auto")," to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area.")),Object(o.a)(p.a,{preview:'\n  <div class="overscroll-auto overflow-auto h-32 bg-emerald-200 text-emerald-500 px-6 py-4 font-medium font-flow rounded-lg">\n    <p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.\n    </p>\n  </div>\n',src:void 0,snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">overscroll-auto</span> ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',previewClassName:void 0,color:"emerald",min:!1}),Object(o.a)("div",{className:"prose"},Object(o.a)(u.a,{level:2,id:"contain",toc:!0},"Contain"),Object(o.a)("p",null,"Use ",Object(o.a)("inlineCode",{parentName:"p"},"overscroll-contain")," to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve \u201cbounce\u201d effects when scrolling past the end of the container in operating systems that support it.")),Object(o.a)(p.a,{preview:'\n  <div class="overscroll-contain overflow-auto h-32 bg-light-blue-200 text-light-blue-500 px-6 py-4 font-medium font-flow rounded-lg">\n    <p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.\n    </p>\n  </div>\n',src:void 0,snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">overscroll-contain</span> ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',previewClassName:void 0,color:"lightBlue",min:!1}),Object(o.a)("div",{className:"prose"},Object(o.a)(u.a,{level:2,id:"none",toc:!0},"None"),Object(o.a)("p",null,"Use ",Object(o.a)("inlineCode",{parentName:"p"},"overscroll-none")," to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent \u201cbounce\u201d effects when scrolling past the end of the container.")),Object(o.a)(p.a,{preview:'\n  <div class="overscroll-none overflow-auto h-32 bg-amber-200 text-amber-500 px-6 py-4 font-medium font-flow rounded-lg">\n    <p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.\n    </p>\n  </div>\n',src:void 0,snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">overscroll-none</span> ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',previewClassName:void 0,color:"amber",min:!1}),Object(o.a)("div",{className:"prose"},Object(o.a)(u.a,{level:2,id:"responsive",toc:!0},"Responsive"),Object(o.a)("p",null,"To control the overscroll-behavior property at a specific breakpoint, add a ",Object(o.a)("inlineCode",{parentName:"p"},"{screen}:")," prefix to any existing overscroll-behavior utility. For example, use ",Object(o.a)("inlineCode",{parentName:"p"},"md:overscroll-contain")," to apply the ",Object(o.a)("inlineCode",{parentName:"p"},"overscroll-contain")," utility at only medium screen sizes and above."),Object(o.a)("div",{className:"my-6 rounded-xl overflow-hidden bg-gray-800"},Object(o.a)("pre",Object(n.a)({parentName:"div"},{className:"language-html"}),Object(o.a)("code",Object(n.a)({parentName:"pre"},{className:"language-html"}),Object(o.a)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"class"),Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token attr-value"}),Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation attr-equals"}),"="),Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),'"'),"overscroll-auto ",Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"md:overscroll-contain lg:overscroll-none")," ...",Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),'"')),Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",Object(o.a)("span",Object(n.a)({parentName:"code"},{className:"token comment"}),"\x3c!-- ... --\x3e"),"\n",Object(o.a)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"</"),"div"),Object(o.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),">"))))),Object(o.a)("p",null,"For more information about Tailwind\u2019s responsive design features, check out the ",Object(o.a)(c.a,{href:"/docs/responsive-design",passHref:!0},Object(o.a)("a",null,"Responsive Design"))," documentation."),Object(o.a)(u.a,{level:2,id:"customizing",toc:!0},"Customizing"),Object(o.a)(u.a,{level:3,id:"variants",toc:!0},"Variants")),Object(o.a)(v.a,{plugin:"overscrollBehavior",name:"overscroll-behavior",mdxType:"Variants"}),Object(o.a)("div",{className:"prose"},Object(o.a)(u.a,{level:3,id:"disabling",toc:!0},"Disabling")),Object(o.a)(f.a,{plugin:"overscrollBehavior",name:"overscroll-behavior",mdxType:"Disabling"}))}j.isMDXComponent=!0,j.layoutProps=h},"5xSE":function(e,t,a){"use strict";e.exports=function(e){return"[object RegExp]"===Object.prototype.toString.call(e)}},"8C7G":function(e,t,a){"use strict";a.d(t,"a",(function(){return c}));var n=a("q1tI"),s=a.n(n),r=a("98BF"),i=a("Zb5r"),o=a("AOjV"),l=s.a.createElement;function c({plugin:e,name:t}){const a=r.defaultConfig.variants[e]||["responsive"];t=t||e.replace(/([a-z])([A-Z])/g,((e,t,a)=>`${t} ${a.toLowerCase()}`));const n=["responsive","hover","focus","active","group-hover"].filter((e=>!a.includes(e))).slice(0,2),s=`By default, ${a.length?`only ${Object(i.a)(a).replace("dark","dark mode <em>(if enabled)</em>")}`:"no"} variants are generated for ${t} utilities.`;return l("div",{className:"prose"},l("p",{dangerouslySetInnerHTML:{__html:s}}),l("p",null,"You can control which variants are generated for the ",t," utilities by modifying the"," ",l("code",null,e)," property in the ",l("code",null,"variants")," section of your"," ",l("code",null,"tailwind.config.js")," file."),l("p",null,"For example, this config will ",a.length>0?"also ":"","generate"," ",Object(i.a)(n)," variants:"),l(o.a,{path:"variants.extend",before:"...",add:{[e]:n}}))}},"9lDz":function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/overscroll-behavior",function(){return a("4mb6")}])},AOjV:function(e,t,a){"use strict";a.d(t,"a",(function(){return u}));var n=a("q1tI"),s=a.n(n),r=(a("Btb4"),a("AI3G")),i=a("iuhU"),o=s.a.createElement;function l({value:e}){return"string"===typeof e?o("span",{className:"token string"},"'",e,"'"):Array.isArray(e)?o(s.a.Fragment,null,o("span",{className:"token punctuation"},"["),e.map(((t,a)=>o(n.Fragment,{key:a},o(l,{value:t}),a===e.length-1?null:o("span",{className:"token punctuation"},", ")))),o("span",{className:"token punctuation"},"]")):"boolean"===typeof e?o("span",{className:"token boolean"},e.toString()):e.toString()}function c({edits:e,indent:t="",type:a="inserted"}){return o("span",{className:Object(i.a)("token",{"inserted-sign inserted":"inserted"===a,"deleted-sign deleted":"inserted"!==a})},Object.keys(e).map(((s,r)=>{return o(n.Fragment,{key:r},o("span",{className:Object(i.a)("token prefix",{inserted:"inserted"===a,deleted:"inserted"!==a})},"inserted"===a?"+":"-")," ",t,/^[a-z_$][a-z0-9_$]*$/i.test(c=s)?c:`'${c}'`,o("span",{className:"token operator"},":")," ",o(l,{value:e[s]}),o("span",{className:"token punctuation"},","),"\n");var c})))}function u({path:e,add:t,remove:a,before:s,after:i}){return e="string"===typeof e?e.split("."):e,o("div",{className:"prose"},o("div",{className:"my-6 rounded-xl overflow-hidden bg-gray-800"},o("pre",{className:"language-diff"},o("code",{className:"language-diff"},o("span",{className:"token unchanged"},"  ",o("span",{className:"token comment"},"// tailwind.config.js"),"\n","  module",o("span",{className:"token punctuation"},"."),o("span",{className:"token property-access"},"exports")," ",o("span",{className:"token operator"},"=")," ",o("span",{className:"token punctuation"},"{"),"\n",e.map(((e,t)=>o(n.Fragment,{key:t},"  ","  ".repeat(t+1),e,o("span",{className:"token operator"},":")," ",o("span",{className:"token punctuation"},"{"),"\n"))),s&&Object(r.a)(s).map(((t,a)=>o(n.Fragment,{key:a},"  ".repeat(e.length+2),o("span",{className:"token comment"},`// ${t}`),"\n")))),a&&o(c,{edits:a,type:"deleted",indent:"  ".repeat(e.length+1)}),t&&o(c,{edits:t,type:"inserted",indent:"  ".repeat(e.length+1)}),o("span",{className:"token unchanged"},i&&Object(r.a)(i).map((t=>`${"  ".repeat(e.length+2)}${t}\n`)),e.map(((t,a)=>o(n.Fragment,{key:a},"  ","  ".repeat(e.length-a),"}\n"))),"  }")))))}},Btb4:function(e,t,a){"use strict";const n=a("5xSE"),s=a("p+I8"),r=a("GAX2").default;e.exports=(e,t,a)=>{const i=[];return function e(t,a,o){let l;(a=a||{}).indent=a.indent||"\t",o=o||"",l=void 0===a.inlineCharacterLimit?{newLine:"\n",newLineOrSpace:"\n",pad:o,indent:o+a.indent}:{newLine:"@@__STRINGIFY_OBJECT_NEW_LINE__@@",newLineOrSpace:"@@__STRINGIFY_OBJECT_NEW_LINE_OR_SPACE__@@",pad:"@@__STRINGIFY_OBJECT_PAD__@@",indent:"@@__STRINGIFY_OBJECT_INDENT__@@"};const c=e=>{if(void 0===a.inlineCharacterLimit)return e;const t=e.replace(new RegExp(l.newLine,"g"),"").replace(new RegExp(l.newLineOrSpace,"g")," ").replace(new RegExp(l.pad+"|"+l.indent,"g"),"");return t.length<=a.inlineCharacterLimit?t:e.replace(new RegExp(l.newLine+"|"+l.newLineOrSpace,"g"),"\n").replace(new RegExp(l.pad,"g"),o).replace(new RegExp(l.indent,"g"),o+a.indent)};if(-1!==i.indexOf(t))return'"[Circular]"';if(null===t||void 0===t||"number"===typeof t||"boolean"===typeof t||"function"===typeof t||"symbol"===typeof t||n(t))return String(t);if(t instanceof Date)return`new Date('${t.toISOString()}')`;if(Array.isArray(t)){if(0===t.length)return"[]";i.push(t);const n="["+l.newLine+t.map(((n,s)=>{const r=t.length-1===s?l.newLine:","+l.newLineOrSpace;let i=e(n,a,o+a.indent);return a.transform&&(i=a.transform(t,s,i)),l.indent+i+r})).join("")+l.pad+"]";return i.pop(),c(n)}if(s(t)){let n=Object.keys(t).concat(r(t));if(a.filter&&(n=n.filter((e=>a.filter(t,e)))),0===n.length)return"{}";i.push(t);const s="{"+l.newLine+n.map(((s,r)=>{const i=n.length-1===r?l.newLine:","+l.newLineOrSpace,c="symbol"===typeof s,u=!c&&/^[a-z$_][a-z$_0-9]*$/i.test(s),p=c||u?s:e(s,a);let d=e(t[s],a,o+a.indent);return a.transform&&(d=a.transform(t,s,d)),l.indent+String(p)+": "+d+i})).join("")+l.pad+"}";return i.pop(),c(s)}return t=String(t).replace(/[\r\n]/g,(e=>"\n"===e?"\\n":"\\r")),!1===a.singleQuotes?`"${t=t.replace(/"/g,'\\"')}"`:`'${t=t.replace(/\\?'/g,"\\'")}'`}(e,t,a)}},GAX2:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=e=>Object.getOwnPropertySymbols(e).filter((t=>Object.prototype.propertyIsEnumerable.call(e,t)))},Zb5r:function(e,t,a){"use strict";function n(e){return e.reduce(((t,a,n)=>0===n?a:n===e.length-1?`${t} and ${a}`:`${t}, ${a}`),"")}a.d(t,"a",(function(){return n}))},"p+I8":function(e,t,a){"use strict";e.exports=function(e){var t=typeof e;return null!==e&&("object"===t||"function"===t)}},pOT7:function(e,t,a){"use strict";a.d(t,"a",(function(){return b})),a.d(t,"b",(function(){return v}));var n=a("HALo"),s=a("q1tI"),r=a.n(s),i=a("iuhU"),o=a("ZMKu"),l=r.a.createElement;const c={amber:"bg-amber-500",emerald:"bg-emerald-500",fuchsia:"bg-fuchsia-400",indigo:"bg-indigo-400",lightBlue:"bg-light-blue-500",purple:"bg-purple-400",rose:"bg-rose-400"},u={amber:"bg-gradient-to-r from-amber-50 to-amber-100",emerald:"bg-gradient-to-r from-emerald-50 to-teal-100",fuchsia:"bg-gradient-to-r from-fuchsia-50 to-fuchsia-100",gray:"bg-gradient-to-r from-gray-50 to-gray-100",indigo:"bg-gradient-to-r from-indigo-50 to-indigo-100",lightBlue:"bg-gradient-to-r from-light-blue-50 to-light-blue-100",purple:"bg-gradient-to-r from-purple-50 to-purple-100",rose:"bg-gradient-to-r from-rose-50 to-rose-100"},p={amber:"bg-stripes bg-stripes-amber-500 bg-amber-100",emerald:"bg-stripes bg-stripes-emerald-500 bg-emerald-100",fuchsia:"bg-stripes bg-stripes-fuchsia-500 bg-fuchsia-100",indigo:"bg-stripes bg-stripes-indigo-500 bg-indigo-100",lightBlue:"bg-stripes bg-stripes-light-blue-500 bg-light-blue-100",purple:"bg-stripes bg-stripes-purple-500 bg-purple-100",rose:"bg-stripes bg-stripes-rose-500 bg-rose-100"},d={amber:"text-amber-700",emerald:"text-emerald-700",fuchsia:"text-fuchsia-700",indigo:"text-indigo-700",lightBlue:"text-light-blue-700",purple:"text-purple-700",rose:"text-rose-700"};function m(e){const t=Object(s.useRef)(),{0:a,1:r}=Object(s.useState)(!1),{0:i,1:o}=Object(s.useState)({});return Object(s.useEffect)((()=>{if(!a)return;function e(){o({height:t.current.contentDocument.body.scrollHeight})}const n=new window.ResizeObserver(e);return e(),n.observe(t.current.contentDocument.body),()=>{n.disconnect()}}),[a]),l("iframe",Object(n.a)({},e,{ref:t,onLoad:()=>r(!0),style:i}))}function g({color:e,snippet:t}){return l("div",{className:Object(i.a)("overflow-hidden rounded-b-xl",c[e],{"bg-gray-800":!c[e]})},l("pre",{className:Object(i.a)("scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white",{"bg-black bg-opacity-75":c[e]})},l("code",{className:"language-html",dangerouslySetInnerHTML:{__html:t}})))}function b({preview:e,src:t,snippet:a,previewClassName:n,color:s="gray"}){return l("div",{className:"relative overflow-hidden mb-8"},e?l("div",{className:Object(i.a)("rounded-t-xl overflow-hidden",u[s],n,{"p-10":!n}),dangerouslySetInnerHTML:{__html:e}}):l(m,{src:t,className:Object(i.a)("w-full rounded-t-xl",u[s])}),l(g,{color:s,snippet:a}))}function v({preview:e,src:t,previewClassName:a,snippet:n,color:r="gray",min:c=!1}){const b=Object(s.useRef)(),v=Object(o.h)(0),f=Object(s.useRef)(),{0:h,1:O}=Object(s.useState)(!1);return Object(s.useEffect)((()=>{const e=new window.ResizeObserver((()=>{v.set(0)}));return e.observe(b.current),()=>{e.disconnect()}}),[]),l("div",{className:"relative mb-8"},l("div",{ref:b,className:`relative rounded-t-xl ${p[r]}`},l("div",{className:c?"md:w-88":void 0},l(o.d.div,{className:"relative",style:{marginRight:Object(o.i)(v,(e=>-e))}},e?l("div",{className:Object(i.a)("rounded-t-xl",a,u[r],{"p-10":!a}),dangerouslySetInnerHTML:{__html:e}}):l(m,{src:t,className:Object(i.a)("w-full rounded-t-xl",u[r],{"pointer-events-none":h})}))),l("div",{ref:f,className:"absolute inset-y-0 -right-4 left-80 ml-4 pointer-events-none"},l(o.d.div,{drag:"x",_dragX:v,dragMomentum:!1,dragElastic:0,dragConstraints:f,className:"pointer-events-auto absolute top-1/2 -mt-4 w-8 hidden md:flex items-center justify-center cursor-grab active:cursor-grabbing "+(c?"right-0 md:left-0 md:right-auto":"right-0"),style:{x:v},onDragStart:()=>{document.body.classList.add("cursor-grabbing"),O(!0)},onDragEnd:()=>{document.body.classList.remove("cursor-grabbing"),O(!1)}},l("div",{className:"flex-none rounded bg-white shadow flex items-center justify-center h-8",style:{width:"0.9375rem"}},l("svg",{viewBox:"0 0 14 24",fill:"none",strokeWidth:"2",stroke:"currentColor",className:`h-3 flex-none ${d[r]}`,style:{width:"0.4375rem"}},l("path",{d:"M 1 0 V 24 M 7 0 V 24 M 13 0 V 24"})))))),l(g,{color:r,snippet:n}))}},wH44:function(e,t,a){"use strict";a.d(t,"a",(function(){return d}));var n=a("cpVT"),s=a("q1tI"),r=a.n(s),i=a("AOjV"),o=a("AI3G"),l=a("Zb5r"),c=r.a.createElement;function u(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function p(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?u(Object(a),!0).forEach((function(t){Object(n.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):u(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function d({plugin:e,name:t}){const a=Object(o.a)(e);return t=t||e.replace(/([a-z])([A-Z])/g,((e,t,a)=>`${t} ${a.toLowerCase()}`)),c("div",{className:"prose"},c("p",null,"If you don't plan to use the ",t," utilities in your project, you can disable them entirely by setting the"," ",c("span",{dangerouslySetInnerHTML:{__html:Object(l.a)(a.map((e=>`<code>${e}</code>`)))}})," ",a.length>1?"properties":"property"," to ",c("code",null,"false")," in the"," ",c("code",null,"corePlugins")," section of your config file:"),c(i.a,{path:"corePlugins",before:"...",add:a.reduce(((e,t)=>p(p({},e),{},{[t]:!1})),{})}))}}},[["9lDz",0,2,6,1,3,4,5,7]]]);