(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[90650,75469],{30809:function(e,n,t){var o=t(547853).default,r=t(156512);t(373231),t(611911),t(998196),t(522404),t(233787),t(846425),t(12331),t(544094),t(543257),e.exports=function(e,n){var t;switch(n){case"ts":t=r.languages.tsx;break;case"js":t=r.languages.jsx;break;case"sh":throw Error(['docs-infra: Unsupported language: "sh" in:',"","```sh",e,"```","",'Use "bash" instead.',""].join("\n"));case"diff":(t=o({},r.languages.diff)).deleted=/^[-].*$/m;break;default:t=r.languages[n]}if(!t){if(n)throw Error('unsupported language: "'.concat(n,'", "').concat(e,'"'));t=r.languages.jsx}return r.highlight(e,t)}},731478:function(e,n,t){"use strict";t.d(n,{Z:function(){return j}});var o,r,a,i,l,s,c=t(470079),p=t(46426),d=t(574323),u=t(388339),m=t(205783),h=t(959340),f=t(735250),v=(0,h.Z)((0,f.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,f.jsx)("path",{fill:"#FDB300",d:"M5.24 2.7L12 2l6.76.7L24 9.48 12 23 0 9.49z"}),(0,f.jsx)("path",{fill:"#EA6C00",d:"M4.85 9l7.13 14L0 9zM19.1 9l-7.12 14L23.95 9z"}),(0,f.jsx)("path",{fill:"#FDAD00",d:"M4.85 9H19.1l-7.12 14z"}),(0,f.jsxs)("g",{children:[(0,f.jsx)("path",{fill:"#FDD231",d:"M11.98 2l-6.75.65-.38 6.34zM11.98 2l6.75.65.37 6.34z"}),(0,f.jsx)("path",{fill:"#FDAD00",d:"M23.95 9l-5.22-6.35.37 6.34zM0 9l5.23-6.35-.38 6.34z"}),(0,f.jsx)("path",{fill:"#FEEEB7",d:"M11.98 2L4.85 9H19.1z"})]})]}),"Sketch"),g=(0,h.Z)((0,f.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,f.jsx)("path",{d:"M8 24a4 4 0 004-4v-4H8a4 4 0 000 8z",fill:"#0ACF83"}),(0,f.jsx)("path",{d:"M4 12a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",fill:"#A259FF"}),(0,f.jsx)("path",{d:"M4 4a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",fill:"#F24E1E"}),(0,f.jsx)("path",{d:"M12 0h4a4 4 0 010 8h-4V0z",fill:"#FF7262"}),(0,f.jsx)("path",{d:"M20 12a4 4 0 11-8 0 4 4 0 018 0z",fill:"#1ABCFE"})]}),"Figma"),b=(0,h.Z)((0,f.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,f.jsx)("path",{d:"M5.54 2h12.92C20.42 2 22 3.6 22 5.58v12.55a3.56 3.56 0 01-3.54 3.58H5.54A3.56 3.56 0 012 18.13V5.58A3.56 3.56 0 015.54 2z",fill:"#470137"}),(0,f.jsx)("path",{d:"M12.52 7.28L10 11.45l2.68 4.41c.01.04.02.07.01.1 0 .04-.04.01-.09.02H10.7c-.13 0-.22 0-.28-.1l-.54-1.04c-.17-.35-.36-.7-.57-1.06l-.6-1.1h-.02c-.17.36-.36.73-.56 1.09l-.57 1.07-.57 1.06c-.04.09-.1.1-.2.1H4.94c-.03 0-.06.01-.06-.03 0-.03 0-.07.02-.1l2.6-4.28-2.53-4.31c-.03-.04-.04-.07-.02-.09.02-.02.05-.03.09-.03h1.9a.5.5 0 01.11.01c.04.02.06.05.09.08.16.36.34.72.53 1.09l.6 1.06c.2.36.39.71.57 1.07h.01c.18-.37.36-.73.55-1.08.18-.36.37-.71.57-1.06l.56-1.06c0-.04.02-.07.05-.09.03-.01.06-.02.1-.01h1.77c.04-.01.09.01.1.06 0 0-.01.04-.03.05zM16.39 16.16c-.62 0-1.24-.12-1.8-.38a2.92 2.92 0 01-1.27-1.15 3.65 3.65 0 01-.46-1.91 3.46 3.46 0 011.8-3.08 4.27 4.27 0 012.29-.48c.07 0 .16 0 .26.02V6.52c0-.06.02-.1.08-.1H19c.04 0 .08.03.08.07v8.01l.02.51.03.49c0 .06-.02.11-.08.13a6.37 6.37 0 01-2.65.53zm.82-1.69v-3.7a2.11 2.11 0 00-1.45.16c-.29.15-.53.36-.71.63-.19.27-.28.63-.28 1.06 0 .3.04.6.14.87a1.44 1.44 0 00.95.93c.23.08.46.11.7.11a4.49 4.49 0 00.65-.06z",fill:"#FF61F6"})]}),"AdobeXD"),x=(0,h.Z)((0,f.jsxs)("g",{fill:"currentColor",fillRule:"nonzero",children:[(0,f.jsx)("path",{d:"M5.84 3c-.52 0-1 .25-1.3.67l-1.4 2.05c-.06.09-.1.19-.14.28h8V3H5.84zM20.86 5.72l-1.4-2.05c-.3-.42-.81-.67-1.33-.67H13v3h8c-.05-.1-.08-.2-.14-.28z",fillOpacity:".79"}),(0,f.jsx)("path",{d:"M20.98 7H3.02L3 7.11V19.4c0 .89.71 1.61 1.58 1.61h14.84A1.6 1.6 0 0021 19.4V7.1L20.98 7zm-6.87 5.36H9.89a1.6 1.6 0 01-1.58-1.61c0-.89.7-1.6 1.58-1.6h4.22c.87 0 1.58.71 1.58 1.6 0 .89-.7 1.6-1.58 1.6z",fillOpacity:".87"})]}),"BundleSize"),y=(0,h.Z)((0,f.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,f.jsx)("path",{d:"M6.92 6.1l2.33 7.99 2.32-8h6.3v.8l-2.37 4.14c.83.27 1.46.76 1.89 1.47.43.71.64 1.55.64 2.51 0 1.2-.31 2.2-.94 3a2.93 2.93 0 01-2.42 1.22 2.9 2.9 0 01-1.96-.72 4.25 4.25 0 01-1.23-1.96l1.31-.55c.2.5.45.9.76 1.18.32.28.69.43 1.12.43.44 0 .82-.26 1.13-.76.31-.51.47-1.12.47-1.84 0-.79-.17-1.4-.5-1.83-.38-.5-.99-.76-1.81-.76h-.64v-.78l2.24-3.92h-2.7l-.16.26-3.3 11.25h-.15l-2.4-8.14-2.41 8.14h-.16L.43 6.1H2.1l2.33 7.99L6 8.71 5.24 6.1h1.68z",fill:"#005A9C"}),(0,f.jsx)("g",{fill:"currentColor",children:(0,f.jsx)("path",{d:"M23.52 6.25l.28 1.62-.98 1.8s-.38-.76-1.01-1.19c-.53-.35-.87-.43-1.41-.33-.7.14-1.48.93-1.82 1.9-.41 1.18-.42 1.74-.43 2.26a4.9 4.9 0 00.11 1.33s-.6-1.06-.59-2.61c0-1.1.19-2.11.72-3.1.47-.87 1.17-1.4 1.8-1.45.63-.07 1.14.23 1.53.55.42.33.83 1.07.83 1.07l.97-1.85zM23.64 15.4s-.43.75-.7 1.04c-.27.28-.76.79-1.36 1.04-.6.25-.91.3-1.5.25a3.03 3.03 0 01-1.34-.52 5.08 5.08 0 01-1.67-2.04s.24.75.39 1.07c.09.18.36.74.74 1.23a3.5 3.5 0 002.1 1.42c1.04.18 1.76-.27 1.94-.38a5.32 5.32 0 001.4-1.43c.1-.14.25-.43.25-.43l-.25-1.25z"})})]}),"W3C"),Z=(0,h.Z)((0,f.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,f.jsx)("circle",{fill:"#737373",cx:"12",cy:"12",r:"12"}),(0,f.jsx)("path",{fill:"#BDBDBD",d:"M4 4h16v16H4z"}),(0,f.jsx)("path",{fill:"#FFF",d:"M12 20l8-16H4z"})]}),"MaterialDesign"),P=t(99820),w=(0,m.ZP)("ul")({margin:0,padding:0,listStyle:"none",display:"flex",flexWrap:"wrap",gap:8,"& .MuiChip-root":{height:26,padding:"0 8px",gap:6,"& .MuiChip-label":{padding:0},"& .MuiChip-iconSmall":{margin:0,fontSize:14}}}),k={"material-ui":"@mui/material","joy-ui":"@mui/joy","base-ui":"@mui/base",system:"@mui/system"};function j(e){var n,t,m=e.markdown.headers,h=e.design,j=(0,P.qM)(),C=null!==(n=null!==(t=m.packageName)&&void 0!==t?t:k[m.productId])&&void 0!==n?n:"@mui/material";return(0,f.jsxs)(w,{children:[m.githubLabel?(0,f.jsx)("li",{children:(0,f.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"".concat("https://github.com/mui/material-ui","/labels/").concat(encodeURIComponent(m.githubLabel)),icon:o||(o=(0,f.jsx)(u.default,{color:"primary"})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":j("githubLabel"),"data-ga-event-split":"0.1",label:j("githubLabel")})}):null,(0,f.jsx)("li",{children:(0,f.jsx)(d.Z,{title:j("bundleSizeTooltip"),describeChild:!0,children:(0,f.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://bundlephobia.com/package/".concat(C,"@latest"),icon:r||(r=(0,f.jsx)(x,{color:"primary"})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":j("bundleSize"),"data-ga-event-split":"0.1",label:j("bundleSize")})})}),m.waiAria?(0,f.jsx)("li",{children:(0,f.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:m.waiAria,icon:a||(a=(0,f.jsx)(y,{color:"primary"})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"WAI-ARIA","data-ga-event-split":"0.1",label:"WAI-ARIA"})}):null,m.materialDesign?(0,f.jsx)("li",{children:(0,f.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:m.materialDesign,icon:i||(i=(0,f.jsx)(Z,{})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Material Design","data-ga-event-split":"0.1",label:"Material Design"})}):null,!1===h?null:(0,f.jsxs)(c.Fragment,{children:[l||(l=(0,f.jsx)("li",{children:(0,f.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",icon:(0,f.jsx)(g,{}),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Figma","data-ga-event-split":"0.1",label:"Figma"})})),"@mui/joy"===C?null:s||(s=(0,f.jsxs)(c.Fragment,{children:[(0,f.jsx)("li",{children:(0,f.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",icon:(0,f.jsx)(b,{}),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Adobe XD","data-ga-event-split":"0.1",label:"Adobe"})}),(0,f.jsx)("li",{children:(0,f.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",icon:(0,f.jsx)(v,{}),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Sketch","data-ga-event-split":"0.1",label:"Sketch"})})]}))]})]})}},412016:function(e,n,t){"use strict";t.r(n),t.d(n,{HighlightedCode:function(){return v}});var o=t(17896),r=t(666524),a=t(858033),i=t(470079),l=t(30809),s=t.n(l),c=t(516714),p=t(205783),d=t(410468),u=t(490380),m=t(735250),h=["code","copyButtonHidden","copyButtonProps","language","plainStyle","parentComponent","preComponent"],f=(0,p.ZP)("pre")(function(e){var n,t=e.theme;return n={margin:0,color:"hsl(60deg 30% 96.08%)",WebkitOverflowScrolling:"touch",maxWidth:"calc(100vw - 32px)"},(0,r.Z)(n,t.breakpoints.up("md"),{maxWidth:"calc(100vw - 32px - 16px)"}),(0,r.Z)(n,"& code",(0,a.Z)((0,a.Z)({},t.typography.caption),{},{fontFamily:t.typography.fontFamilyCode,fontWeight:400,WebkitFontSmoothing:"subpixel-antialiased"})),n}),v=i.forwardRef(function(e,n){var t=e.code,r=e.copyButtonHidden,l=e.copyButtonProps,p=e.language,v=e.plainStyle,g=e.parentComponent,b=void 0===g?v?"div":u.G:g,x=e.preComponent,y=void 0===x?v?f:"pre":x,Z=(0,o.Z)(e,h),P=i.useMemo(function(){return s()(t.trim(),p)},[t,p]),w=(0,d.YA)();return(0,m.jsx)(b,(0,a.Z)((0,a.Z)({ref:n},Z),{},{children:(0,m.jsxs)("div",(0,a.Z)((0,a.Z)({className:"MuiCode-root"},w),{},{children:[void 0!==r&&r?null:(0,m.jsx)(c.a,{children:(0,m.jsx)(d.xe,(0,a.Z)({code:t},l))}),(0,m.jsx)(y,{children:(0,m.jsx)("code",{className:"language-".concat(p),dangerouslySetInnerHTML:{__html:P}})})]}))}))})},828477:function(e,n,t){"use strict";t.r(n),t.d(n,{boxClasses:function(){return r.Z},default:function(){return o.Z}});var o=t(710494),r=t(84241)},844463:function(e,n,t){"use strict";t.r(n),t.d(n,{buttonClasses:function(){return r.Z},default:function(){return o.Z},getButtonUtilityClass:function(){return r.F}});var o=t(223809),r=t(997116)},793541:function(e,n,t){"use strict";var o=t(470079).createContext({});n.Z=o},561197:function(e,n,t){"use strict";var o=t(858033),r=t(17896),a=t(666524),i=t(470079),l=t(653048),s=t(617320),c=t(205783),p=t(62598),d=t(787911),u=t(755589),m=t(735250),h=["className","dividers"],f=function(e){var n=e.classes,t=e.dividers;return(0,s.Z)({root:["root",t&&"dividers"]},d.G,n)},v=(0,c.ZP)("div",{name:"MuiDialogContent",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState;return[n.root,t.dividers&&n.dividers]}})(function(e){var n=e.theme;return{flex:"1 1 auto",WebkitOverflowScrolling:"touch",overflowY:"auto",padding:"20px 24px",variants:[{props:function(e){return e.ownerState.dividers},style:{padding:"16px 24px",borderTop:"1px solid ".concat((n.vars||n).palette.divider),borderBottom:"1px solid ".concat((n.vars||n).palette.divider)}},{props:function(e){return!e.ownerState.dividers},style:(0,a.Z)({},".".concat(u.Z.root," + &"),{paddingTop:0})}]}}),g=i.forwardRef(function(e,n){var t=(0,p.i)({props:e,name:"MuiDialogContent"}),a=t.className,i=t.dividers,s=(0,r.Z)(t,h),c=(0,o.Z)((0,o.Z)({},t),{},{dividers:void 0!==i&&i}),d=f(c);return(0,m.jsx)(v,(0,o.Z)({className:(0,l.default)(d.root,a),ownerState:c,ref:n},s))});n.Z=g},787911:function(e,n,t){"use strict";t.d(n,{G:function(){return a}});var o=t(609789),r=t(533834);function a(e){return(0,r.ZP)("MuiDialogContent",e)}var i=(0,o.Z)("MuiDialogContent",["root","dividers"]);n.Z=i},304224:function(e,n,t){"use strict";var o=t(17896),r=t(858033),a=t(470079),i=t(653048),l=t(617320),s=t(968039),c=t(205783),p=t(62598),d=t(620783),u=t(867192),m=t(735250),h=["children","className"],f=function(e){var n=e.classes,t=(0,l.Z)({root:["root"]},u.i,n);return(0,r.Z)((0,r.Z)({},n),t)},v=(0,c.ZP)(d.Z,{shouldForwardProp:function(e){return(0,s.Z)(e)||"classes"===e},name:"MuiDialogContentText",slot:"Root",overridesResolver:function(e,n){return n.root}})({}),g=a.forwardRef(function(e,n){var t=(0,p.i)({props:e,name:"MuiDialogContentText"});t.children;var a=t.className,l=(0,o.Z)(t,h),s=f(l);return(0,m.jsx)(v,(0,r.Z)((0,r.Z)({component:"p",variant:"body1",color:"text.secondary",ref:n,ownerState:l,className:(0,i.default)(s.root,a)},t),{},{classes:s}))});n.Z=g},867192:function(e,n,t){"use strict";t.d(n,{i:function(){return a}});var o=t(609789),r=t(533834);function a(e){return(0,r.ZP)("MuiDialogContentText",e)}var i=(0,o.Z)("MuiDialogContentText",["root"]);n.Z=i},479915:function(e,n,t){"use strict";var o=t(858033),r=t(17896),a=t(470079),i=t(653048),l=t(617320),s=t(620783),c=t(205783),p=t(62598),d=t(755589),u=t(793541),m=t(735250),h=["className","id"],f=function(e){var n=e.classes;return(0,l.Z)({root:["root"]},d.a,n)},v=(0,c.ZP)(s.Z,{name:"MuiDialogTitle",slot:"Root",overridesResolver:function(e,n){return n.root}})({padding:"16px 24px",flex:"0 0 auto"}),g=a.forwardRef(function(e,n){var t=(0,p.i)({props:e,name:"MuiDialogTitle"}),l=t.className,s=t.id,c=(0,r.Z)(t,h),d=f(t),g=a.useContext(u.Z).titleId;return(0,m.jsx)(v,(0,o.Z)({component:"h2",className:(0,i.default)(d.root,l),ownerState:t,ref:n,variant:"h6",id:null!=s?s:void 0===g?s:g},c))});n.Z=g},755589:function(e,n,t){"use strict";t.d(n,{a:function(){return a}});var o=t(609789),r=t(533834);function a(e){return(0,r.ZP)("MuiDialogTitle",e)}var i=(0,o.Z)("MuiDialogTitle",["root"]);n.Z=i},493160:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return o.Z}});var o=t(647234)},215870:function(e,n,t){"use strict";var o=t(929231),r=t(858033),a=t(17896),i=t(666524),l=t(470079),s=t(653048),c=t(617320),p=t(359522),d=t(205783),u=t(62598),m=t(549358),h=t(620783),f=t(185542),v=t(299930),g=t(894882),b=t(529823),x=t(735250),y=["checked","className","componentsProps","control","disabled","disableTypography","inputRef","label","labelPlacement","name","onChange","required","slots","slotProps","value"],Z=function(e){var n=e.classes,t=e.disabled,o=e.labelPlacement,r=e.error,a=e.required,i={root:["root",t&&"disabled","labelPlacement".concat((0,f.Z)(o)),r&&"error",a&&"required"],label:["label",t&&"disabled"],asterisk:["asterisk",r&&"error"]};return(0,c.Z)(i,v.r,n)},P=(0,d.ZP)("label",{name:"MuiFormControlLabel",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState;return[(0,i.Z)({},"& .".concat(v.Z.label),n.label),n.root,n["labelPlacement".concat((0,f.Z)(t.labelPlacement))]]}})(function(e){var n,t=e.theme;return n={display:"inline-flex",alignItems:"center",cursor:"pointer",verticalAlign:"middle",WebkitTapHighlightColor:"transparent",marginLeft:-11,marginRight:16},(0,i.Z)(n,"&.".concat(v.Z.disabled),{cursor:"default"}),(0,i.Z)(n,"& .".concat(v.Z.label),(0,i.Z)({},"&.".concat(v.Z.disabled),{color:(t.vars||t).palette.text.disabled})),(0,i.Z)(n,"variants",[{props:{labelPlacement:"start"},style:{flexDirection:"row-reverse",marginRight:-11}},{props:{labelPlacement:"top"},style:{flexDirection:"column-reverse"}},{props:{labelPlacement:"bottom"},style:{flexDirection:"column"}},{props:function(e){var n=e.labelPlacement;return"start"===n||"top"===n||"bottom"===n},style:{marginLeft:16}}]),n}),w=(0,d.ZP)("span",{name:"MuiFormControlLabel",slot:"Asterisk",overridesResolver:function(e,n){return n.asterisk}})(function(e){var n=e.theme;return(0,i.Z)({},"&.".concat(v.Z.error),{color:(n.vars||n).palette.error.main})}),k=l.forwardRef(function(e,n){var t,i=(0,u.i)({props:e,name:"MuiFormControlLabel"});i.checked;var c=i.className,d=i.componentsProps,f=void 0===d?{}:d,v=i.control,k=i.disabled,j=i.disableTypography,C=(i.inputRef,i.label),B=i.labelPlacement,T=(i.name,i.onChange,i.required),S=i.slots,E=i.slotProps,R=void 0===E?{}:E,M=(i.value,(0,a.Z)(i,y)),F=(0,p.Z)(),A=null!==(t=null!=k?k:v.props.disabled)&&void 0!==t?t:null==F?void 0:F.disabled,D=null!=T?T:v.props.required,L={disabled:A,required:D};["checked","name","onChange","value","inputRef"].forEach(function(e){void 0===v.props[e]&&void 0!==i[e]&&(L[e]=i[e])});var H=(0,g.Z)({props:i,muiFormControl:F,states:["error"]}),O=(0,r.Z)((0,r.Z)({},i),{},{disabled:A,labelPlacement:void 0===B?"end":B,required:D,error:H.error}),z=Z(O),G={slots:void 0===S?{}:S,slotProps:(0,r.Z)((0,r.Z)({},f),R)},N=(0,b.Z)("typography",{elementType:h.Z,externalForwardedProps:G,ownerState:O}),W=(0,o.Z)(N,2),I=W[0],_=W[1],q=C;return null==q||q.type===h.Z||j||(q=(0,x.jsx)(I,(0,r.Z)((0,r.Z)({component:"span"},_),{},{className:(0,s.default)(z.label,null==_?void 0:_.className),children:q}))),(0,x.jsxs)(P,(0,r.Z)((0,r.Z)({className:(0,s.default)(z.root,c),ownerState:O,ref:n},M),{},{children:[l.cloneElement(v,L),D?(0,x.jsxs)(m.Z,{display:"block",children:[q,(0,x.jsxs)(w,{ownerState:O,"aria-hidden":!0,className:z.asterisk,children:[" ","*"]})]}):q]}))});n.Z=k},299930:function(e,n,t){"use strict";t.d(n,{r:function(){return a}});var o=t(609789),r=t(533834);function a(e){return(0,r.ZP)("MuiFormControlLabel",e)}var i=(0,o.Z)("MuiFormControlLabel",["root","labelPlacementStart","labelPlacementTop","labelPlacementBottom","disabled","label","error","required","asterisk"]);n.Z=i},26173:function(e,n,t){"use strict";var o=t(858033),r=t(17896),a=t(470079),i=t(653048),l=t(617320),s=t(205783),c=t(62598),p=t(27399),d=t(359522),u=t(894882),m=t(735250),h=["className","row"],f=function(e){var n=e.classes,t=e.row,o=e.error;return(0,l.Z)({root:["root",t&&"row",o&&"error"]},p.y,n)},v=(0,s.ZP)("div",{name:"MuiFormGroup",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState;return[n.root,t.row&&n.row]}})({display:"flex",flexDirection:"column",flexWrap:"wrap",variants:[{props:{row:!0},style:{flexDirection:"row"}}]}),g=a.forwardRef(function(e,n){var t=(0,c.i)({props:e,name:"MuiFormGroup"}),a=t.className,l=t.row,s=(0,r.Z)(t,h),p=(0,d.Z)(),g=(0,u.Z)({props:t,muiFormControl:p,states:["error"]}),b=(0,o.Z)((0,o.Z)({},t),{},{row:void 0!==l&&l,error:g.error}),x=f(b);return(0,m.jsx)(v,(0,o.Z)({className:(0,i.default)(x.root,a),ownerState:b,ref:n},s))});n.Z=g},27399:function(e,n,t){"use strict";t.d(n,{y:function(){return a}});var o=t(609789),r=t(533834);function a(e){return(0,r.ZP)("MuiFormGroup",e)}var i=(0,o.Z)("MuiFormGroup",["root","row","error"]);n.Z=i},201321:function(e,n,t){"use strict";t.d(n,{ZP:function(){return T}});var o=t(17896),r=t(639909),a=t(666524),i=t(858033),l=t(901260),s=t.n(l),c=t(787154),p=t.n(c),d=t(77696),u=t.n(d),m=t(470079),h=t(653048),f=t(637017),v=t(74703),g=t(617320),b=t(205783),x=t(632751),y=t(459497),Z=m.createContext(),P=t(112611),w=t(735250),k=["className","columns","columnSpacing","component","container","direction","item","rowSpacing","spacing","wrap","zeroMinWidth"];function j(e){var n=e.breakpoints,t=e.values,o="";p()(t).forEach(function(e){""===o&&0!==t[e]&&(o=e)});var r=p()(n).sort(function(e,t){return n[e]-n[t]});return r.slice(0,r.indexOf(o))}var C=(0,b.ZP)("div",{name:"MuiGrid",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState,o=t.container,a=t.direction,i=t.item,l=t.spacing,s=t.wrap,c=t.zeroMinWidth,p=t.breakpoints,d=[];o&&(d=function(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!e||e<=0)return[];if("string"==typeof e&&!u()(Number(e))||"number"==typeof e)return[t["spacing-xs-".concat(String(e))]];var o=[];return n.forEach(function(n){var r=e[n];Number(r)>0&&o.push(t["spacing-".concat(n,"-").concat(String(r))])}),o}(l,p,n));var m=[];return p.forEach(function(e){var o=t[e];o&&m.push(n["grid-".concat(e,"-").concat(String(o))])}),[n.root,o&&n.container,i&&n.item,c&&n.zeroMinWidth].concat((0,r.Z)(d),["row"!==a&&n["direction-xs-".concat(String(a))],"wrap"!==s&&n["wrap-xs-".concat(String(s))]],m)}})(function(e){var n=e.ownerState;return(0,i.Z)((0,i.Z)((0,i.Z)((0,i.Z)({boxSizing:"border-box"},n.container&&{display:"flex",flexWrap:"wrap",width:"100%"}),n.item&&{margin:0}),n.zeroMinWidth&&{minWidth:0}),"wrap"!==n.wrap&&{flexWrap:n.wrap})},function(e){var n=e.theme,t=e.ownerState,o=(0,f.P$)({values:t.direction,breakpoints:n.breakpoints.values});return(0,f.k9)({theme:n},o,function(e){var n={flexDirection:e};return 0===e.indexOf("column")&&(n["& > .".concat(P.Z.item)]={maxWidth:"none"}),n})},function(e){var n=e.theme,t=e.ownerState,o=t.container,r=t.rowSpacing,i={};if(o&&0!==r){var l,s=(0,f.P$)({values:r,breakpoints:n.breakpoints.values});"object"==typeof s&&(l=j({breakpoints:n.breakpoints.values,values:s})),i=(0,f.k9)({theme:n},s,function(e,t){var o,r=n.spacing(e);return"0px"!==r?(0,a.Z)({marginTop:n.spacing(-e)},"& > .".concat(P.Z.item),{paddingTop:r}):null!==(o=l)&&void 0!==o&&o.includes(t)?{}:(0,a.Z)({marginTop:0},"& > .".concat(P.Z.item),{paddingTop:0})})}return i},function(e){var n=e.theme,t=e.ownerState,o=t.container,r=t.columnSpacing,i={};if(o&&0!==r){var l,s=(0,f.P$)({values:r,breakpoints:n.breakpoints.values});"object"==typeof s&&(l=j({breakpoints:n.breakpoints.values,values:s})),i=(0,f.k9)({theme:n},s,function(e,t){var o,r=n.spacing(e);if("0px"!==r){var i=n.spacing(-e);return(0,a.Z)({width:"calc(100% + ".concat(r,")"),marginLeft:i},"& > .".concat(P.Z.item),{paddingLeft:r})}return null!==(o=l)&&void 0!==o&&o.includes(t)?{}:(0,a.Z)({width:"100%",marginLeft:0},"& > .".concat(P.Z.item),{paddingLeft:0})})}return i},function(e){var n,t=e.theme,o=e.ownerState;return t.breakpoints.keys.reduce(function(e,r){var a={};if(o[r]&&(n=o[r]),!n)return e;if(!0===n)a={flexBasis:0,flexGrow:1,maxWidth:"100%"};else if("auto"===n)a={flexBasis:"auto",flexGrow:0,flexShrink:0,maxWidth:"none",width:"auto"};else{var l=(0,f.P$)({values:o.columns,breakpoints:t.breakpoints.values}),c="object"==typeof l?l[r]:l;if(null==c)return e;var p="".concat(Math.round(n/c*1e8)/1e6,"%"),d={};if(o.container&&o.item&&0!==o.columnSpacing){var u=t.spacing(o.columnSpacing);if("0px"!==u){var m="calc(".concat(p," + ").concat(u,")");d={flexBasis:m,maxWidth:m}}}a=(0,i.Z)({flexBasis:p,flexGrow:0,maxWidth:p},d)}return 0===t.breakpoints.values[r]?s()(e,a):e[t.breakpoints.up(r)]=a,e},{})}),B=function(e){var n=e.classes,t=e.container,o=e.direction,a=e.item,i=e.spacing,l=e.wrap,s=e.zeroMinWidth,c=e.breakpoints,p=[];t&&(p=function(e,n){if(!e||e<=0)return[];if("string"==typeof e&&!u()(Number(e))||"number"==typeof e)return["spacing-xs-".concat(String(e))];var t=[];return n.forEach(function(n){var o=e[n];if(Number(o)>0){var r="spacing-".concat(n,"-").concat(String(o));t.push(r)}}),t}(i,c));var d=[];c.forEach(function(n){var t=e[n];t&&d.push("grid-".concat(n,"-").concat(String(t)))});var m={root:["root",t&&"container",a&&"item",s&&"zeroMinWidth"].concat((0,r.Z)(p),["row"!==o&&"direction-xs-".concat(String(o)),"wrap"!==l&&"wrap-xs-".concat(String(l))],d)};return(0,g.Z)(m,P.H,n)},T=m.forwardRef(function(e,n){var t=(0,x.Z)({props:e,name:"MuiGrid"}),r=(0,y.Z)().breakpoints,a=(0,v.Z)(t),l=a.className,s=a.columns,c=a.columnSpacing,p=a.component,d=a.container,u=void 0!==d&&d,f=a.direction,g=a.item,b=a.rowSpacing,P=a.spacing,j=void 0===P?0:P,T=a.wrap,S=a.zeroMinWidth,E=(0,o.Z)(a,k),R=m.useContext(Z),M=u?s||12:R,F={},A=(0,i.Z)({},E);r.keys.forEach(function(e){null!=E[e]&&(F[e]=E[e],delete A[e])});var D=(0,i.Z)((0,i.Z)((0,i.Z)({},a),{},{columns:M,container:u,direction:void 0===f?"row":f,item:void 0!==g&&g,rowSpacing:b||j,columnSpacing:c||j,wrap:void 0===T?"wrap":T,zeroMinWidth:void 0!==S&&S,spacing:j},F),{},{breakpoints:r.keys}),L=B(D);return(0,w.jsx)(Z.Provider,{value:M,children:(0,w.jsx)(C,(0,i.Z)({ownerState:D,className:(0,h.default)(L.root,l),as:void 0===p?"div":p,ref:n},A))})})},112611:function(e,n,t){"use strict";t.d(n,{H:function(){return i}});var o=t(639909),r=t(609789),a=t(533834);function i(e){return(0,a.ZP)("MuiGrid",e)}var l=["auto",!0,1,2,3,4,5,6,7,8,9,10,11,12],s=(0,r.Z)("MuiGrid",["root","container","item","zeroMinWidth"].concat((0,o.Z)([0,1,2,3,4,5,6,7,8,9,10].map(function(e){return"spacing-xs-".concat(e)})),(0,o.Z)(["column-reverse","column","row-reverse","row"].map(function(e){return"direction-xs-".concat(e)})),(0,o.Z)(["nowrap","wrap-reverse","wrap"].map(function(e){return"wrap-xs-".concat(e)})),(0,o.Z)(l.map(function(e){return"grid-xs-".concat(e)})),(0,o.Z)(l.map(function(e){return"grid-sm-".concat(e)})),(0,o.Z)(l.map(function(e){return"grid-md-".concat(e)})),(0,o.Z)(l.map(function(e){return"grid-lg-".concat(e)})),(0,o.Z)(l.map(function(e){return"grid-xl-".concat(e)}))));n.Z=s},342160:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return o.ZP},getGridUtilityClass:function(){return r.H},gridClasses:function(){return r.Z}});var o=t(201321),r=t(112611)},206861:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return o.Z},getPaperUtilityClass:function(){return r.J},paperClasses:function(){return r.Z}});var o=t(739659),r=t(936648)},889803:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return o.Z}});var o=t(312280)},210538:function(e,n,t){"use strict";var o,r=t(17896),a=t(929231),i=t(639909),l=t(666524),s=t(858033),c=t(548286),p=t.n(c),d=t(470079),u=t(653048),m=t(617320),h=t(607182),f=t(185542),v=t(42105),g=t(205783),b=t(62598),x=t(806869),y=t(735250),Z=["className","color","edge","size","sx"],P=function(e){var n=e.classes,t=e.edge,o=e.size,r=e.color,a=e.checked,i=e.disabled,l={root:["root",t&&"edge".concat((0,f.Z)(t)),"size".concat((0,f.Z)(o))],switchBase:["switchBase","color".concat((0,f.Z)(r)),a&&"checked",i&&"disabled"],thumb:["thumb"],track:["track"],input:["input"]},c=(0,m.Z)(l,x.H,n);return(0,s.Z)((0,s.Z)({},n),c)},w=(0,g.ZP)("span",{name:"MuiSwitch",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState;return[n.root,t.edge&&n["edge".concat((0,f.Z)(t.edge))],n["size".concat((0,f.Z)(t.size))]]}})({display:"inline-flex",width:58,height:38,overflow:"hidden",padding:12,boxSizing:"border-box",position:"relative",flexShrink:0,zIndex:0,verticalAlign:"middle","@media print":{colorAdjust:"exact"},variants:[{props:{edge:"start"},style:{marginLeft:-8}},{props:{edge:"end"},style:{marginRight:-8}},{props:{size:"small"},style:(o={width:40,height:24,padding:7},(0,l.Z)(o,"& .".concat(x.Z.thumb),{width:16,height:16}),(0,l.Z)(o,"& .".concat(x.Z.switchBase),(0,l.Z)({padding:4},"&.".concat(x.Z.checked),{transform:"translateX(16px)"})),o)}]}),k=(0,g.ZP)(v.Z,{name:"MuiSwitch",slot:"SwitchBase",overridesResolver:function(e,n){var t=e.ownerState;return[n.switchBase,(0,l.Z)({},"& .".concat(x.Z.input),n.input),"default"!==t.color&&n["color".concat((0,f.Z)(t.color))]]}})(function(e){var n,t=e.theme;return n={position:"absolute",top:0,left:0,zIndex:1,color:t.vars?t.vars.palette.Switch.defaultColor:"".concat("light"===t.palette.mode?t.palette.common.white:t.palette.grey[300]),transition:t.transitions.create(["left","transform"],{duration:t.transitions.duration.shortest})},(0,l.Z)(n,"&.".concat(x.Z.checked),{transform:"translateX(20px)"}),(0,l.Z)(n,"&.".concat(x.Z.disabled),{color:t.vars?t.vars.palette.Switch.defaultDisabledColor:"".concat("light"===t.palette.mode?t.palette.grey[100]:t.palette.grey[600])}),(0,l.Z)(n,"&.".concat(x.Z.checked," + .").concat(x.Z.track),{opacity:.5}),(0,l.Z)(n,"&.".concat(x.Z.disabled," + .").concat(x.Z.track),{opacity:t.vars?t.vars.opacity.switchTrackDisabled:"".concat("light"===t.palette.mode?.12:.2)}),(0,l.Z)(n,"& .".concat(x.Z.input),{left:"-100%",width:"300%"}),n},function(e){var n=e.theme;return{"&:hover":{backgroundColor:n.vars?"rgba(".concat(n.vars.palette.action.activeChannel," / ").concat(n.vars.palette.action.hoverOpacity,")"):(0,h.Fq)(n.palette.action.active,n.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}},variants:(0,i.Z)(p()(n.palette).filter(function(e){var n=(0,a.Z)(e,2)[1];return n&&n.main&&n.light}).map(function(e){var t,o=(0,a.Z)(e,1)[0];return{props:{color:o},style:(t={},(0,l.Z)(t,"&.".concat(x.Z.checked),(0,l.Z)({color:(n.vars||n).palette[o].main,"&:hover":{backgroundColor:n.vars?"rgba(".concat(n.vars.palette[o].mainChannel," / ").concat(n.vars.palette.action.hoverOpacity,")"):(0,h.Fq)(n.palette[o].main,n.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}}},"&.".concat(x.Z.disabled),{color:n.vars?n.vars.palette.Switch["".concat(o,"DisabledColor")]:"".concat("light"===n.palette.mode?(0,h.$n)(n.palette[o].main,.62):(0,h._j)(n.palette[o].main,.55))})),(0,l.Z)(t,"&.".concat(x.Z.checked," + .").concat(x.Z.track),{backgroundColor:(n.vars||n).palette[o].main}),t)}}))}}),j=(0,g.ZP)("span",{name:"MuiSwitch",slot:"Track",overridesResolver:function(e,n){return n.track}})(function(e){var n=e.theme;return{height:"100%",width:"100%",borderRadius:7,zIndex:-1,transition:n.transitions.create(["opacity","background-color"],{duration:n.transitions.duration.shortest}),backgroundColor:n.vars?n.vars.palette.common.onBackground:"".concat("light"===n.palette.mode?n.palette.common.black:n.palette.common.white),opacity:n.vars?n.vars.opacity.switchTrack:"".concat("light"===n.palette.mode?.38:.3)}}),C=(0,g.ZP)("span",{name:"MuiSwitch",slot:"Thumb",overridesResolver:function(e,n){return n.thumb}})(function(e){var n=e.theme;return{boxShadow:(n.vars||n).shadows[1],backgroundColor:"currentColor",width:20,height:20,borderRadius:"50%"}}),B=d.forwardRef(function(e,n){var t=(0,b.i)({props:e,name:"MuiSwitch"}),o=t.className,a=t.color,i=t.edge,l=t.size,c=t.sx,p=(0,r.Z)(t,Z),d=(0,s.Z)((0,s.Z)({},t),{},{color:void 0===a?"primary":a,edge:void 0!==i&&i,size:void 0===l?"medium":l}),m=P(d),h=(0,y.jsx)(C,{className:m.thumb,ownerState:d});return(0,y.jsxs)(w,{className:(0,u.default)(m.root,o),sx:c,ownerState:d,children:[(0,y.jsx)(k,(0,s.Z)((0,s.Z)({type:"checkbox",icon:h,checkedIcon:h,ref:n,ownerState:d},p),{},{classes:(0,s.Z)((0,s.Z)({},m),{},{root:m.switchBase})})),(0,y.jsx)(j,{className:m.track,ownerState:d})]})});n.Z=B},806869:function(e,n,t){"use strict";t.d(n,{H:function(){return a}});var o=t(609789),r=t(533834);function a(e){return(0,r.ZP)("MuiSwitch",e)}var i=(0,o.Z)("MuiSwitch",["root","edgeStart","edgeEnd","switchBase","colorPrimary","colorSecondary","sizeSmall","sizeMedium","checked","disabled","input","thumb","track"]);n.Z=i},421072:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return o.Z},getTypographyUtilityClass:function(){return r.f},typographyClasses:function(){return r.Z}});var o=t(620783),r=t(635130)},42105:function(e,n,t){"use strict";t.d(n,{Z:function(){return w}});var o=t(858033),r=t(929231),a=t(17896),i=t(470079),l=t(653048),s=t(617320),c=t(185542),p=t(968039),d=t(205783),u=t(960945),m=t(359522),h=t(311289),f=t(609789),v=t(533834);function g(e){return(0,v.ZP)("PrivateSwitchBase",e)}(0,f.Z)("PrivateSwitchBase",["root","checked","disabled","input","edgeStart","edgeEnd"]);var b=t(735250),x=["autoFocus","checked","checkedIcon","className","defaultChecked","disabled","disableFocusRipple","edge","icon","id","inputProps","inputRef","name","onBlur","onChange","onFocus","readOnly","required","tabIndex","type","value"],y=function(e){var n=e.classes,t=e.checked,o=e.disabled,r=e.edge,a={root:["root",t&&"checked",o&&"disabled",r&&"edge".concat((0,c.Z)(r))],input:["input"]};return(0,s.Z)(a,g,n)},Z=(0,d.ZP)(h.Z)({padding:9,borderRadius:"50%",variants:[{props:{edge:"start",size:"small"},style:{marginLeft:-3}},{props:function(e){var n=e.edge,t=e.ownerState;return"start"===n&&"small"!==t.size},style:{marginLeft:-12}},{props:{edge:"end",size:"small"},style:{marginRight:-3}},{props:function(e){var n=e.edge,t=e.ownerState;return"end"===n&&"small"!==t.size},style:{marginRight:-12}}]}),P=(0,d.ZP)("input",{shouldForwardProp:p.Z})({cursor:"inherit",position:"absolute",opacity:0,width:"100%",height:"100%",top:0,left:0,margin:0,padding:0,zIndex:1}),w=i.forwardRef(function(e,n){var t=e.autoFocus,i=e.checked,s=e.checkedIcon,c=e.className,p=e.defaultChecked,d=e.disabled,h=e.disableFocusRipple,f=void 0!==h&&h,v=e.edge,g=e.icon,w=e.id,k=e.inputProps,j=e.inputRef,C=e.name,B=e.onBlur,T=e.onChange,S=e.onFocus,E=e.readOnly,R=e.required,M=e.tabIndex,F=e.type,A=e.value,D=(0,a.Z)(e,x),L=(0,u.Z)({controlled:i,default:!!p,name:"SwitchBase",state:"checked"}),H=(0,r.Z)(L,2),O=H[0],z=H[1],G=(0,m.Z)(),N=d;G&&void 0===N&&(N=G.disabled);var W="checkbox"===F||"radio"===F,I=(0,o.Z)((0,o.Z)({},e),{},{checked:O,disabled:N,disableFocusRipple:f,edge:void 0!==v&&v}),_=y(I);return(0,b.jsxs)(Z,(0,o.Z)((0,o.Z)({component:"span",className:(0,l.default)(_.root,c),centerRipple:!0,focusRipple:!f,disabled:N,tabIndex:null,role:void 0,onFocus:function(e){S&&S(e),G&&G.onFocus&&G.onFocus(e)},onBlur:function(e){B&&B(e),G&&G.onBlur&&G.onBlur(e)},ownerState:I,ref:n},D),{},{children:[(0,b.jsx)(P,(0,o.Z)((0,o.Z)({autoFocus:t,checked:i,defaultChecked:p,className:_.input,disabled:N,id:W?w:void 0,name:C,onChange:function(e){if(!e.nativeEvent.defaultPrevented){var n=e.target.checked;z(n),T&&T(e,n)}},readOnly:E,ref:j,required:void 0!==R&&R,ownerState:I,tabIndex:M,type:F},"checkbox"===F&&void 0===A?{}:{value:A}),k)),O?s:g]}))})},769858:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return ey}});var o,r,a,i,l,s,c,p,d,u,m,h,f,v,g,b,x,y,Z,P,w,k,j,C,B,T={};t.r(T),t.d(T,{demoComponents:function(){return eb},demos:function(){return eg},docs:function(){return ev},srcComponents:function(){return ex}});var S=t(858033),E=t(470079),R=t.t(E,2),M=t(50128),F=t(248541),A=t(828477),D=t(889803),L=t(493160),H=t(639519),O=t(355455),z=t(421072),G=t(342160),N=t(844463),W=t(206861),I=t(89589),_=t(929231),q=t(710494),V=t(312280),U=t(735250),$=t(647234),K=t(17896),X=["in","children","onEnter","onExited"],Y=E.forwardRef(function(e,n){var t=e.in,o=e.children,r=e.onEnter,a=e.onExited,i=(0,K.Z)(e,X),l=(0,O.useSpring)({from:{opacity:0},to:{opacity:t?1:0},onStart:function(){t&&r&&r()},onRest:function(){!t&&a&&a()}});return(0,U.jsx)(O.animated.div,(0,S.Z)((0,S.Z)({ref:n,style:l},i),{},{children:o}))}),Q=t(620783),J=t(201321),ee=t(223809),en=t(739659),et=t(205783),eo=t(215870),er=t(568526),ea=t(561197),ei=t(304224),el=t(479915),es=t(210538),ec=t(319863),ep=t(26173),ed=t(412016),eu=(0,et.ZP)(V.Z,{shouldForwardProp:function(e){return"arrow"!==e}})(function(e){var n=e.theme;return{zIndex:1,"& > div":{position:"relative"},'&[data-popper-placement*="bottom"]':{"& .MuiPopper-arrow":{top:0,left:0,marginTop:"-0.9em",width:"3em",height:"1em","&::before":{borderWidth:"0 1em 1em 1em",borderColor:"transparent transparent ".concat(n.palette.background.paper," transparent")}}},'&[data-popper-placement*="top"]':{"& .MuiPopper-arrow":{bottom:0,left:0,marginBottom:"-0.9em",width:"3em",height:"1em","&::before":{borderWidth:"1em 1em 0 1em",borderColor:"".concat(n.palette.background.paper," transparent transparent transparent")}}},'&[data-popper-placement*="right"]':{"& .MuiPopper-arrow":{left:0,marginLeft:"-0.9em",height:"3em",width:"1em","&::before":{borderWidth:"1em 1em 1em 0",borderColor:"transparent ".concat(n.palette.background.paper," transparent transparent")}}},'&[data-popper-placement*="left"]':{"& .MuiPopper-arrow":{right:0,marginRight:"-0.9em",height:"3em",width:"1em","&::before":{borderWidth:"1em 0 1em 1em",borderColor:"transparent transparent transparent ".concat(n.palette.background.paper)}}},variants:[{props:function(e){return e.arrow},style:{'&[data-popper-placement*="bottom"]':{"& > div":{marginTop:2}}}},{props:function(e){return!e.arrow},style:{'&[data-popper-placement*="bottom"]':{"& > div":{marginTop:0}}}},{props:function(e){return e.arrow},style:{'&[data-popper-placement*="top"]':{"& > div":{marginBottom:2}}}},{props:function(e){return!e.arrow},style:{'&[data-popper-placement*="top"]':{"& > div":{marginBottom:0}}}},{props:function(e){return e.arrow},style:{'&[data-popper-placement*="right"]':{"& > div":{marginLeft:2}}}},{props:function(e){return!e.arrow},style:{'&[data-popper-placement*="right"]':{"& > div":{marginLeft:0}}}},{props:function(e){return e.arrow},style:{'&[data-popper-placement*="left"]':{"& > div":{marginRight:2}}}},{props:function(e){return!e.arrow},style:{'&[data-popper-placement*="left"]':{"& > div":{marginRight:0}}}}]}}),em=(0,et.ZP)("div")({position:"absolute",fontSize:7,width:"3em",height:"3em","&::before":{content:'""',margin:"auto",display:"block",width:0,height:0,borderStyle:"solid"}}),eh=t(517237),ef=t(731478),ev={en:{description:"A Popper can be used to display some content on top of another. It's an alternative to react-popper.",location:"/docs/data/material/components/popper/popper.md",rendered:['<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="error-icon" viewBox="0 0 20 20">\n <path fill-rule="evenodd" d="M2 7.4v5.2a2 2 0 0 0 .586 1.414l3.4 3.4A2 2 0 0 0 7.4 18h5.2a2 2 0 0 0 1.414-.586l3.4-3.4A2 2 0 0 0 18 12.6V7.4a2 2 0 0 0-.586-1.414l-3.4-3.4A2 2 0 0 0 12.6 2H7.4a2 2 0 0 0-1.414.586l-3.4 3.4A2 2 0 0 0 2 7.4Zm11.03-.43a.75.75 0 0 1 0 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 1.06-1.06L10 8.94l1.97-1.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="warning-icon" viewBox="0 0 20 20">\n <path d="M2.33 17a.735.735 0 0 1-.665-.375.631.631 0 0 1-.094-.375.898.898 0 0 1 .115-.396L9.353 3.062a.621.621 0 0 1 .281-.27.85.85 0 0 1 .729 0 .622.622 0 0 1 .281.27l7.667 12.792c.07.125.108.257.114.396a.63.63 0 0 1-.093.375.842.842 0 0 1-.271.27.728.728 0 0 1-.394.105H2.33Zm7.664-2.5c.211 0 .39-.072.536-.214a.714.714 0 0 0 .218-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.531-.22.736.736 0 0 0-.536.215.714.714 0 0 0-.219.531c0 .212.072.39.215.536.143.146.32.219.531.219Zm0-2.5c.211 0 .39-.072.536-.216a.72.72 0 0 0 .218-.534v-2.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.531-.216.734.734 0 0 0-.536.216.72.72 0 0 0-.219.534v2.5c0 .212.072.39.215.534a.72.72 0 0 0 .531.216Z"/>\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="success-icon" viewBox="0 0 20 20">\n <path d="m8.938 10.875-1.25-1.23a.718.718 0 0 0-.521-.228.718.718 0 0 0-.521.229.73.73 0 0 0 0 1.062l1.77 1.771c.153.153.327.23.521.23a.718.718 0 0 0 .521-.23l3.896-3.896a.73.73 0 0 0 0-1.062.718.718 0 0 0-.52-.23.718.718 0 0 0-.521.23l-3.376 3.354ZM10 18a7.796 7.796 0 0 1-3.104-.625 8.065 8.065 0 0 1-2.552-1.719 8.064 8.064 0 0 1-1.719-2.552A7.797 7.797 0 0 1 2 10c0-1.111.208-2.15.625-3.115a8.064 8.064 0 0 1 4.27-4.26A7.797 7.797 0 0 1 10 2c1.111 0 2.15.208 3.115.625a8.096 8.096 0 0 1 4.26 4.26C17.792 7.851 18 8.89 18 10a7.797 7.797 0 0 1-.625 3.104 8.066 8.066 0 0 1-4.26 4.271A7.774 7.774 0 0 1 10 18Z"/>\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="info-icon" viewBox="0 0 20 20">\n <path d="M9.996 14c.21 0 .39-.072.535-.216a.72.72 0 0 0 .219-.534v-3.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.532-.216.734.734 0 0 0-.535.216.72.72 0 0 0-.219.534v3.5c0 .213.071.39.214.534a.72.72 0 0 0 .532.216Zm0-6.5c.21 0 .39-.071.535-.214a.714.714 0 0 0 .219-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.532-.219.736.736 0 0 0-.535.214.714.714 0 0 0-.219.532c0 .21.071.39.214.535.143.146.32.219.532.219Zm.01 10.5a7.81 7.81 0 0 1-3.11-.625 8.065 8.065 0 0 1-2.552-1.719 8.066 8.066 0 0 1-1.719-2.551A7.818 7.818 0 0 1 2 9.99c0-1.104.208-2.14.625-3.105a8.066 8.066 0 0 1 4.27-4.26A7.818 7.818 0 0 1 10.009 2a7.75 7.75 0 0 1 3.106.625 8.083 8.083 0 0 1 4.26 4.265A7.77 7.77 0 0 1 18 9.994a7.81 7.81 0 0 1-.625 3.11 8.066 8.066 0 0 1-1.719 2.552 8.083 8.083 0 0 1-2.546 1.719 7.77 7.77 0 0 1-3.104.625Z"/>\n </symbol>\n </svg>','\n <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="copied-icon" viewBox="0 0 24 24">\n <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.24 11.28L9.69 11.2c-.38-.39-.38-1.01 0-1.4.39-.39 1.02-.39 1.41 0l1.36 1.37 4.42-4.46c.39-.39 1.02-.39 1.41 0 .38.39.38 1.01 0 1.4l-5.13 5.17c-.37.4-1.01.4-1.4 0zM3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1z" />\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="copy-icon" viewBox="0 0 24 24">\n <path d="M15 20H5V7c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1zm5-4V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2zm-2 0H9V4h9v12z" />\n +</symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="anchor-link-icon" viewBox="0 0 12 6">\n <path d="M8.9176 0.083252H7.1676C6.84677 0.083252 6.58427 0.345752 6.58427 0.666585C6.58427 0.987419 6.84677 1.24992 7.1676 1.24992H8.9176C9.8801 1.24992 10.6676 2.03742 10.6676 2.99992C10.6676 3.96242 9.8801 4.74992 8.9176 4.74992H7.1676C6.84677 4.74992 6.58427 5.01242 6.58427 5.33325C6.58427 5.65409 6.84677 5.91659 7.1676 5.91659H8.9176C10.5276 5.91659 11.8343 4.60992 11.8343 2.99992C11.8343 1.38992 10.5276 0.083252 8.9176 0.083252ZM3.6676 2.99992C3.6676 3.32075 3.9301 3.58325 4.25094 3.58325H7.75094C8.07177 3.58325 8.33427 3.32075 8.33427 2.99992C8.33427 2.67909 8.07177 2.41659 7.75094 2.41659H4.25094C3.9301 2.41659 3.6676 2.67909 3.6676 2.99992ZM4.83427 4.74992H3.08427C2.12177 4.74992 1.33427 3.96242 1.33427 2.99992C1.33427 2.03742 2.12177 1.24992 3.08427 1.24992H4.83427C5.1551 1.24992 5.4176 0.987419 5.4176 0.666585C5.4176 0.345752 5.1551 0.083252 4.83427 0.083252H3.08427C1.47427 0.083252 0.167603 1.38992 0.167603 2.99992C0.167603 4.60992 1.47427 5.91659 3.08427 5.91659H4.83427C5.1551 5.91659 5.4176 5.65409 5.4176 5.33325C5.4176 5.01242 5.1551 4.74992 4.83427 4.74992Z" />\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="comment-link-icon" viewBox="0 0 24 24">\n <path d="M22.8481 4C22.8481 2.9 21.9481 2 20.8481 2H4.84814C3.74814 2 2.84814 2.9 2.84814 4V16C2.84814 17.1 3.74814 18 4.84814 18H18.8481L22.8481 22V4ZM16.8481 11H13.8481V14C13.8481 14.55 13.3981 15 12.8481 15C12.2981 15 11.8481 14.55 11.8481 14V11H8.84814C8.29814 11 7.84814 10.55 7.84814 10C7.84814 9.45 8.29814 9 8.84814 9H11.8481V6C11.8481 5.45 12.2981 5 12.8481 5C13.3981 5 13.8481 5.45 13.8481 6V9H16.8481C17.3981 9 17.8481 9.45 17.8481 10C17.8481 10.55 17.3981 11 16.8481 11Z" />\n </symbol>\n </svg>','<h1>Popper</h1><p class="description">A Popper can be used to display some content on top of another. It\'s an alternative to react-popper.</p>\n\n<p>Some important features of the <code>Popper</code> component:</p>\n<ul>\n<li>\uD83D\uDD77 Popper relies on the 3rd party library (<a href="https://popper.js.org/">Popper.js</a>) for perfect positioning.</li>\n<li>\uD83D\uDC84 It's an alternative API to react-popper. It aims for simplicity.</li>\n<li>The children is <a href="/material-ui/react-portal/"><code>Portal</code></a> to the body of the document to avoid rendering problems.\nYou can disable this behavior with <code>disablePortal</code>.</li>\n<li>The scroll isn't blocked like with the <a href="/material-ui/react-popover/"><code>Popover</code></a> component.\nThe placement of the popper updates with the available area in the viewport.</li>\n<li>Clicking away does not hide the <code>Popper</code> component.\nIf you need this behavior, you can use <a href="/material-ui/react-click-away-listener/"><code>ClickAwayListener</code></a> - see the example in the <a href="/material-ui/react-menu/#menulist-composition">menu documentation section</a>.</li>\n<li>The <code>anchorEl</code> is passed as the reference object to create a new <code>Popper.js</code> instance.</li>\n</ul>\n',{component:"@mui/docs/ComponentLinkHeader",design:!1},'<h2 id="basic-popper"><a href="#basic-popper" class="title-link-to-anchor">Basic popper<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="basic-popper"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"SimplePopper.js"},'<h2 id="transitions"><a href="#transitions" class="title-link-to-anchor">Transitions<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="transitions"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>The open/close state of the popper can be animated with a render prop child and a transition component.\nThis component should respect the following conditions:</p>\n<ul>\n<li>Be a direct child descendent of the popper.</li>\n<li>Call the <code>onEnter</code> callback prop when the enter transition starts.</li>\n<li>Call the <code>onExited</code> callback prop when the exit transition is completed.\nThese two callbacks allow the popper to unmount the child content when closed and fully transitioned.</li>\n</ul>\n<p>Popper has built-in support for <a href="https://github.com/reactjs/react-transition-group">react-transition-group</a>.</p>\n',{demo:"TransitionsPopper.js"},'<p>Alternatively, you can use <a href="https://github.com/pmndrs/react-spring">react-spring</a>.</p>\n',{demo:"SpringPopper.js"},'<h2 id="positioned-popper"><a href="#positioned-popper" class="title-link-to-anchor">Positioned popper<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="positioned-popper"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"PositionedPopper.js"},'<h2 id="scroll-playground"><a href="#scroll-playground" class="title-link-to-anchor">Scroll playground<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="scroll-playground"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"ScrollPlayground.js",hideToolbar:!0,bg:!0},'<h2 id="virtual-element"><a href="#virtual-element" class="title-link-to-anchor">Virtual element<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="virtual-element"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>The value of the <code>anchorEl</code> prop can be a reference to a fake DOM element.\nYou need to create an object shaped like the <a href="https://popper.js.org/docs/v2/virtual-elements/"><code>VirtualElement</code></a>.</p>\n<p>Highlight part of the text to see the popper:</p>\n',{demo:"VirtualElementPopper.js"},'<h2 id="complementary-projects"><a href="#complementary-projects" class="title-link-to-anchor">Complementary projects<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="complementary-projects"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>For more advanced use cases you might be able to take advantage of:</p>\n<h3 id="material-ui-popup-state"><a href="#material-ui-popup-state" class="title-link-to-anchor">material-ui-popup-state<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="material-ui-popup-state"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p><img src="https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star" alt="stars">\n<img src="https://img.shields.io/npm/dm/material-ui-popup-state.svg" alt="npm downloads"></p>\n<p>The package <a href="https://github.com/jcoreio/material-ui-popup-state"><code>material-ui-popup-state</code></a> that takes care of popper state for you in most cases.</p>\n',{demo:"PopperPopupState.js"},'<h2 id="unstyled"><a href="#unstyled" class="title-link-to-anchor">Unstyled<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="unstyled"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Use the <a href="/base-ui/react-popper/">Base\xa0UI\xa0Popper</a> for complete ownership of the component's design, with no Material\xa0UI or Joy\xa0UI styles to override.\nThis unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.\n </p>\n','<h2 id="api"><a href="#api" class="title-link-to-anchor">API<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="api"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.</p>\n<ul>\n<li><a href="/material-ui/api/popper/"><code><Popper /></code></a></li>\n</ul>\n'],toc:[{text:"Basic popper",level:2,hash:"basic-popper",children:[]},{text:"Transitions",level:2,hash:"transitions",children:[]},{text:"Positioned popper",level:2,hash:"positioned-popper",children:[]},{text:"Scroll playground",level:2,hash:"scroll-playground",children:[]},{text:"Virtual element",level:2,hash:"virtual-element",children:[]},{text:"Complementary projects",level:2,hash:"complementary-projects",children:[{text:"material-ui-popup-state",level:3,hash:"material-ui-popup-state"}]},{text:"Unstyled",level:2,hash:"unstyled",children:[]},{text:"API",level:2,hash:"api",children:[]}],title:"React Popper component",headers:{productId:"material-ui",title:"React Popper component",components:["Popper"],githubLabel:"component: Popper",unstyled:"/base-ui/react-popper/",hooks:[]}}},eg={"SimplePopper.js":{module:"./SimplePopper.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Popper from '@mui/material/Popper';\n\nexport default function SimplePopper() {\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const handleClick = (event) => {\n setAnchorEl(anchorEl ? null : event.currentTarget);\n };\n\n const open = Boolean(anchorEl);\n const id = open ? 'simple-popper' : undefined;\n\n return (\n <div>\n <button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n </button>\n <Popper id={id} open={open} anchorEl={anchorEl}>\n <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>\n The content of the Popper.\n </Box>\n </Popper>\n </div>\n );\n}\n",jsxPreview:"<button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n</button>\n<Popper id={id} open={open} anchorEl={anchorEl}>\n <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>\n The content of the Popper.\n </Box>\n</Popper>",moduleTS:"./SimplePopper.js",rawTS:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Popper from '@mui/material/Popper';\n\nexport default function SimplePopper() {\n const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(anchorEl ? null : event.currentTarget);\n };\n\n const open = Boolean(anchorEl);\n const id = open ? 'simple-popper' : undefined;\n\n return (\n <div>\n <button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n </button>\n <Popper id={id} open={open} anchorEl={anchorEl}>\n <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>\n The content of the Popper.\n </Box>\n </Popper>\n </div>\n );\n}\n"},"TransitionsPopper.js":{module:"./TransitionsPopper.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Popper from '@mui/material/Popper';\nimport Fade from '@mui/material/Fade';\n\nexport default function TransitionsPopper() {\n const [open, setOpen] = React.useState(false);\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const handleClick = (event) => {\n setAnchorEl(event.currentTarget);\n setOpen((previousOpen) => !previousOpen);\n };\n\n const canBeOpen = open && Boolean(anchorEl);\n const id = canBeOpen ? 'transition-popper' : undefined;\n\n return (\n <div>\n <button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n </button>\n <Popper id={id} open={open} anchorEl={anchorEl} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>\n The content of the Popper.\n </Box>\n </Fade>\n )}\n </Popper>\n </div>\n );\n}\n",jsxPreview:"<button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n</button>\n<Popper id={id} open={open} anchorEl={anchorEl} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>\n The content of the Popper.\n </Box>\n </Fade>\n )}\n</Popper>",moduleTS:"./TransitionsPopper.js",rawTS:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Popper from '@mui/material/Popper';\nimport Fade from '@mui/material/Fade';\n\nexport default function TransitionsPopper() {\n const [open, setOpen] = React.useState(false);\n const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget);\n setOpen((previousOpen) => !previousOpen);\n };\n\n const canBeOpen = open && Boolean(anchorEl);\n const id = canBeOpen ? 'transition-popper' : undefined;\n\n return (\n <div>\n <button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n </button>\n <Popper id={id} open={open} anchorEl={anchorEl} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>\n The content of the Popper.\n </Box>\n </Fade>\n )}\n </Popper>\n </div>\n );\n}\n"},"SpringPopper.js":{module:"./SpringPopper.js",raw:"import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport Box from '@mui/material/Box';\nimport Popper from '@mui/material/Popper';\nimport { useSpring, animated } from '@react-spring/web';\n\nconst Fade = React.forwardRef(function Fade(props, ref) {\n const { in: open, children, onEnter, onExited, ...other } = props;\n const style = useSpring({\n from: { opacity: 0 },\n to: { opacity: open ? 1 : 0 },\n onStart: () => {\n if (open && onEnter) {\n onEnter();\n }\n },\n onRest: () => {\n if (!open && onExited) {\n onExited();\n }\n },\n });\n\n return (\n <animated.div ref={ref} style={style} {...other}>\n {children}\n </animated.div>\n );\n});\n\nFade.propTypes = {\n children: PropTypes.element,\n in: PropTypes.bool,\n onEnter: PropTypes.func,\n onExited: PropTypes.func,\n};\n\nexport default function SpringPopper() {\n const [open, setOpen] = React.useState(false);\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const handleClick = (event) => {\n setAnchorEl(event.currentTarget);\n setOpen((previousOpen) => !previousOpen);\n };\n\n const canBeOpen = open && Boolean(anchorEl);\n const id = canBeOpen ? 'spring-popper' : undefined;\n\n return (\n <div>\n <button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n </button>\n <Popper id={id} open={open} anchorEl={anchorEl} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps}>\n <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>\n The content of the Popper.\n </Box>\n </Fade>\n )}\n </Popper>\n </div>\n );\n}\n",jsxPreview:"<button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n</button>\n<Popper id={id} open={open} anchorEl={anchorEl} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps}>\n <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>\n The content of the Popper.\n </Box>\n </Fade>\n )}\n</Popper>",moduleTS:"./SpringPopper.js",rawTS:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Popper from '@mui/material/Popper';\nimport { useSpring, animated } from '@react-spring/web';\n\ninterface FadeProps {\n children?: React.ReactElement<any>;\n in?: boolean;\n onEnter?: () => void;\n onExited?: () => void;\n}\n\nconst Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, ref) {\n const { in: open, children, onEnter, onExited, ...other } = props;\n const style = useSpring({\n from: { opacity: 0 },\n to: { opacity: open ? 1 : 0 },\n onStart: () => {\n if (open && onEnter) {\n onEnter();\n }\n },\n onRest: () => {\n if (!open && onExited) {\n onExited();\n }\n },\n });\n\n return (\n <animated.div ref={ref} style={style} {...other}>\n {children}\n </animated.div>\n );\n});\n\nexport default function SpringPopper() {\n const [open, setOpen] = React.useState(false);\n const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget);\n setOpen((previousOpen) => !previousOpen);\n };\n\n const canBeOpen = open && Boolean(anchorEl);\n const id = canBeOpen ? 'spring-popper' : undefined;\n\n return (\n <div>\n <button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n </button>\n <Popper id={id} open={open} anchorEl={anchorEl} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps}>\n <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>\n The content of the Popper.\n </Box>\n </Fade>\n )}\n </Popper>\n </div>\n );\n}\n"},"PositionedPopper.js":{module:"./PositionedPopper.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Popper from '@mui/material/Popper';\nimport Typography from '@mui/material/Typography';\nimport Grid from '@mui/material/Grid';\nimport Button from '@mui/material/Button';\nimport Fade from '@mui/material/Fade';\nimport Paper from '@mui/material/Paper';\n\nexport default function PositionedPopper() {\n const [anchorEl, setAnchorEl] = React.useState(null);\n const [open, setOpen] = React.useState(false);\n const [placement, setPlacement] = React.useState();\n\n const handleClick = (newPlacement) => (event) => {\n setAnchorEl(event.currentTarget);\n setOpen((prev) => placement !== newPlacement || !prev);\n setPlacement(newPlacement);\n };\n\n return (\n <Box sx={{ width: 500 }}>\n <Popper\n // Note: The following zIndex style is specifically for documentation purposes and may not be necessary in your application.\n sx={{ zIndex: 1200 }}\n open={open}\n anchorEl={anchorEl}\n placement={placement}\n transition\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Paper>\n <Typography sx={{ p: 2 }}>The content of the Popper.</Typography>\n </Paper>\n </Fade>\n )}\n </Popper>\n <Grid container sx={{ justifyContent: 'center' }}>\n <Grid item>\n <Button onClick={handleClick('top-start')}>top-start</Button>\n <Button onClick={handleClick('top')}>top</Button>\n <Button onClick={handleClick('top-end')}>top-end</Button>\n </Grid>\n </Grid>\n <Grid container sx={{ justifyContent: 'center' }}>\n <Grid item xs={6}>\n <Button onClick={handleClick('left-start')}>left-start</Button>\n <br />\n <Button onClick={handleClick('left')}>left</Button>\n <br />\n <Button onClick={handleClick('left-end')}>left-end</Button>\n </Grid>\n <Grid\n item\n container\n xs={6}\n direction=\"column\"\n sx={{ alignItems: 'flex-end' }}\n >\n <Grid item>\n <Button onClick={handleClick('right-start')}>right-start</Button>\n </Grid>\n <Grid item>\n <Button onClick={handleClick('right')}>right</Button>\n </Grid>\n <Grid item>\n <Button onClick={handleClick('right-end')}>right-end</Button>\n </Grid>\n </Grid>\n </Grid>\n <Grid container sx={{ justifyContent: 'center' }}>\n <Grid item>\n <Button onClick={handleClick('bottom-start')}>bottom-start</Button>\n <Button onClick={handleClick('bottom')}>bottom</Button>\n <Button onClick={handleClick('bottom-end')}>bottom-end</Button>\n </Grid>\n </Grid>\n </Box>\n );\n}\n",moduleTS:"./PositionedPopper.js",rawTS:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Popper, { PopperPlacementType } from '@mui/material/Popper';\nimport Typography from '@mui/material/Typography';\nimport Grid from '@mui/material/Grid';\nimport Button from '@mui/material/Button';\nimport Fade from '@mui/material/Fade';\nimport Paper from '@mui/material/Paper';\n\nexport default function PositionedPopper() {\n const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\n const [open, setOpen] = React.useState(false);\n const [placement, setPlacement] = React.useState<PopperPlacementType>();\n\n const handleClick =\n (newPlacement: PopperPlacementType) =>\n (event: React.MouseEvent<HTMLButtonElement>) => {\n setAnchorEl(event.currentTarget);\n setOpen((prev) => placement !== newPlacement || !prev);\n setPlacement(newPlacement);\n };\n\n return (\n <Box sx={{ width: 500 }}>\n <Popper\n // Note: The following zIndex style is specifically for documentation purposes and may not be necessary in your application.\n sx={{ zIndex: 1200 }}\n open={open}\n anchorEl={anchorEl}\n placement={placement}\n transition\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Paper>\n <Typography sx={{ p: 2 }}>The content of the Popper.</Typography>\n </Paper>\n </Fade>\n )}\n </Popper>\n <Grid container sx={{ justifyContent: 'center' }}>\n <Grid item>\n <Button onClick={handleClick('top-start')}>top-start</Button>\n <Button onClick={handleClick('top')}>top</Button>\n <Button onClick={handleClick('top-end')}>top-end</Button>\n </Grid>\n </Grid>\n <Grid container sx={{ justifyContent: 'center' }}>\n <Grid item xs={6}>\n <Button onClick={handleClick('left-start')}>left-start</Button>\n <br />\n <Button onClick={handleClick('left')}>left</Button>\n <br />\n <Button onClick={handleClick('left-end')}>left-end</Button>\n </Grid>\n <Grid\n item\n container\n xs={6}\n direction=\"column\"\n sx={{ alignItems: 'flex-end' }}\n >\n <Grid item>\n <Button onClick={handleClick('right-start')}>right-start</Button>\n </Grid>\n <Grid item>\n <Button onClick={handleClick('right')}>right</Button>\n </Grid>\n <Grid item>\n <Button onClick={handleClick('right-end')}>right-end</Button>\n </Grid>\n </Grid>\n </Grid>\n <Grid container sx={{ justifyContent: 'center' }}>\n <Grid item>\n <Button onClick={handleClick('bottom-start')}>bottom-start</Button>\n <Button onClick={handleClick('bottom')}>bottom</Button>\n <Button onClick={handleClick('bottom-end')}>bottom-end</Button>\n </Grid>\n </Grid>\n </Box>\n );\n}\n"},"ScrollPlayground.js":{module:"./ScrollPlayground.js",raw:"import * as React from 'react';\nimport { styled } from '@mui/material/styles';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Grid from '@mui/material/Grid';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport MuiPopper from '@mui/material/Popper';\nimport Paper from '@mui/material/Paper';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogContentText from '@mui/material/DialogContentText';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Switch from '@mui/material/Switch';\nimport TextField from '@mui/material/TextField';\nimport FormGroup from '@mui/material/FormGroup';\nimport { HighlightedCode } from '@mui/docs/HighlightedCode';\n\nconst Popper = styled(MuiPopper, {\n shouldForwardProp: (prop) => prop !== 'arrow',\n})(({ theme }) => ({\n zIndex: 1,\n '& > div': {\n position: 'relative',\n },\n '&[data-popper-placement*=\"bottom\"]': {\n '& .MuiPopper-arrow': {\n top: 0,\n left: 0,\n marginTop: '-0.9em',\n width: '3em',\n height: '1em',\n '&::before': {\n borderWidth: '0 1em 1em 1em',\n borderColor: `transparent transparent ${theme.palette.background.paper} transparent`,\n },\n },\n },\n '&[data-popper-placement*=\"top\"]': {\n '& .MuiPopper-arrow': {\n bottom: 0,\n left: 0,\n marginBottom: '-0.9em',\n width: '3em',\n height: '1em',\n '&::before': {\n borderWidth: '1em 1em 0 1em',\n borderColor: `${theme.palette.background.paper} transparent transparent transparent`,\n },\n },\n },\n '&[data-popper-placement*=\"right\"]': {\n '& .MuiPopper-arrow': {\n left: 0,\n marginLeft: '-0.9em',\n height: '3em',\n width: '1em',\n '&::before': {\n borderWidth: '1em 1em 1em 0',\n borderColor: `transparent ${theme.palette.background.paper} transparent transparent`,\n },\n },\n },\n '&[data-popper-placement*=\"left\"]': {\n '& .MuiPopper-arrow': {\n right: 0,\n marginRight: '-0.9em',\n height: '3em',\n width: '1em',\n '&::before': {\n borderWidth: '1em 0 1em 1em',\n borderColor: `transparent transparent transparent ${theme.palette.background.paper}`,\n },\n },\n },\n variants: [\n {\n props: ({ arrow }) => arrow,\n style: {\n '&[data-popper-placement*=\"bottom\"]': {\n '& > div': {\n marginTop: 2,\n },\n },\n },\n },\n {\n props: ({ arrow }) => !arrow,\n style: {\n '&[data-popper-placement*=\"bottom\"]': {\n '& > div': {\n marginTop: 0,\n },\n },\n },\n },\n {\n props: ({ arrow }) => arrow,\n style: {\n '&[data-popper-placement*=\"top\"]': {\n '& > div': {\n marginBottom: 2,\n },\n },\n },\n },\n {\n props: ({ arrow }) => !arrow,\n style: {\n '&[data-popper-placement*=\"top\"]': {\n '& > div': {\n marginBottom: 0,\n },\n },\n },\n },\n {\n props: ({ arrow }) => arrow,\n style: {\n '&[data-popper-placement*=\"right\"]': {\n '& > div': {\n marginLeft: 2,\n },\n },\n },\n },\n {\n props: ({ arrow }) => !arrow,\n style: {\n '&[data-popper-placement*=\"right\"]': {\n '& > div': {\n marginLeft: 0,\n },\n },\n },\n },\n {\n props: ({ arrow }) => arrow,\n style: {\n '&[data-popper-placement*=\"left\"]': {\n '& > div': {\n marginRight: 2,\n },\n },\n },\n },\n {\n props: ({ arrow }) => !arrow,\n style: {\n '&[data-popper-placement*=\"left\"]': {\n '& > div': {\n marginRight: 0,\n },\n },\n },\n },\n ],\n}));\n\nconst Arrow = styled('div')({\n position: 'absolute',\n fontSize: 7,\n width: '3em',\n height: '3em',\n '&::before': {\n content: '\"\"',\n margin: 'auto',\n display: 'block',\n width: 0,\n height: 0,\n borderStyle: 'solid',\n },\n});\n\nexport default function ScrollPlayground() {\n const anchorRef = React.useRef(null);\n const [open, setOpen] = React.useState(false);\n\n const [placement, setPlacement] = React.useState('bottom');\n const [disablePortal, setDisablePortal] = React.useState(false);\n\n const [flip, setFlip] = React.useState({\n enabled: true,\n altBoundary: true,\n rootBoundary: 'document',\n });\n const [preventOverflow, setPreventOverflow] = React.useState({\n enabled: true,\n altAxis: true,\n altBoundary: true,\n tether: true,\n rootBoundary: 'document',\n });\n\n const [arrow, setArrow] = React.useState(false);\n const [arrowRef, setArrowRef] = React.useState(null);\n\n const handleClickButton = () => {\n setOpen((prevOpen) => !prevOpen);\n };\n\n const centerScroll = (element) => {\n if (!element) {\n return;\n }\n\n const container = element.parentElement;\n container.scrollTop = element.clientHeight / 4;\n container.scrollLeft = element.clientWidth / 4;\n };\n\n const jsx = `\n<Popper\n placement=\"${placement}\"\n disablePortal={${disablePortal}}\n modifiers={[\n {\n name: 'flip',\n enabled: ${flip.enabled},\n options: {\n altBoundary: ${flip.altBoundary},\n rootBoundary: '${flip.rootBoundary}',\n padding: 8,\n },\n },\n {\n name: 'preventOverflow',\n enabled: ${preventOverflow.enabled},\n options: {\n altAxis: ${preventOverflow.altAxis},\n altBoundary: ${preventOverflow.altBoundary},\n tether: ${preventOverflow.tether},\n rootBoundary: '${preventOverflow.rootBoundary}',\n padding: 8,\n },\n },\n {\n name: 'arrow',\n enabled: ${arrow},\n options: {\n element: arrowRef,\n },\n },\n ]}\n>\n `;\n const id = open ? 'scroll-playground' : null;\n\n return (\n <Box sx={{ flexGrow: 1 }}>\n <Box sx={{ height: 400, overflow: 'auto', mb: 3 }}>\n <Grid\n container\n ref={centerScroll}\n sx={{\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n width: '230%',\n bgcolor: 'background.paper',\n height: '230%',\n }}\n >\n <div>\n <Button\n ref={anchorRef}\n variant=\"contained\"\n onClick={handleClickButton}\n aria-describedby={id}\n >\n Toggle Popper\n </Button>\n <Typography sx={{ mt: 2, maxWidth: 300 }}>\n Scroll around this container to experiment with flip and\n preventOverflow modifiers.\n </Typography>\n <Popper\n id={id}\n open={open}\n arrow={arrow}\n anchorEl={anchorRef.current}\n placement={placement}\n disablePortal={disablePortal}\n modifiers={[\n {\n name: 'flip',\n enabled: flip.enabled,\n options: {\n altBoundary: flip.altBoundary,\n rootBoundary: flip.rootBoundary,\n padding: 8,\n },\n },\n {\n name: 'preventOverflow',\n enabled: preventOverflow.enabled,\n options: {\n altAxis: preventOverflow.altAxis,\n altBoundary: preventOverflow.altBoundary,\n tether: preventOverflow.tether,\n rootBoundary: preventOverflow.rootBoundary,\n padding: 8,\n },\n },\n {\n name: 'arrow',\n enabled: arrow,\n options: {\n element: arrowRef,\n },\n },\n ]}\n >\n <div>\n {arrow ? (\n <Arrow ref={setArrowRef} className=\"MuiPopper-arrow\" />\n ) : null}\n <Paper sx={{ maxWidth: 400, overflow: 'auto' }}>\n <DialogTitle>{\"Use Google's location service?\"}</DialogTitle>\n <DialogContent>\n <DialogContentText>\n Let Google help apps determine location.\n </DialogContentText>\n </DialogContent>\n <DialogActions>\n <Button onClick={handleClickButton}>Disagree</Button>\n <Button onClick={handleClickButton}>Agree</Button>\n </DialogActions>\n </Paper>\n </div>\n </Popper>\n </div>\n </Grid>\n </Box>\n <Grid container spacing={2}>\n <Grid container item xs={12}>\n <Grid item xs={12}>\n <Typography variant=\"h6\" component=\"div\">\n Appearance\n </Typography>\n </Grid>\n <Grid item xs={6}>\n <TextField\n margin=\"dense\"\n sx={{ width: 200 }}\n label=\"Placement\"\n select\n value={placement}\n onChange={(event) => {\n setPlacement(event.target.value);\n }}\n variant=\"standard\"\n slotProps={{\n select: {\n native: true,\n inputProps: {\n 'aria-labelledby': 'scroll-playground-placement-label',\n },\n },\n\n inputLabel: {\n id: 'scroll-playground-placement-label',\n },\n }}\n >\n <option value=\"top-start\">top-start</option>\n <option value=\"top\">top</option>\n <option value=\"top-end\">top-end</option>\n <option value=\"left-start\">left-start</option>\n <option value=\"left\">left</option>\n <option value=\"left-end\">left-end</option>\n <option value=\"right-start\">right-start</option>\n <option value=\"right\">right</option>\n <option value=\"right-end\">right-end</option>\n <option value=\"bottom-start\">bottom-start</option>\n <option value=\"bottom\">bottom</option>\n <option value=\"bottom-end\">bottom-end</option>\n </TextField>\n </Grid>\n <Grid item xs={6}>\n <FormControlLabel\n control={\n <Switch\n checked={disablePortal}\n onChange={(event) => {\n setDisablePortal(event.target.checked);\n }}\n value=\"disablePortal\"\n />\n }\n label=\"Disable portal\"\n />\n <Typography\n variant=\"caption\"\n sx={{ display: 'block', color: 'text.secondary' }}\n >\n (the children stay within their parent DOM hierarchy)\n </Typography>\n </Grid>\n </Grid>\n <Grid item xs={12}>\n <Typography variant=\"h6\" component=\"div\">\n Modifiers (options from Popper.js)\n </Typography>\n </Grid>\n <Grid container item xs={12} spacing={1}>\n <Grid item xs={6}>\n <FormGroup>\n <Typography variant=\"subtitle1\">Prevent Overflow</Typography>\n <FormControlLabel\n control={\n <Switch\n checked={preventOverflow.enabled}\n onChange={(event) => {\n setPreventOverflow((old) => ({\n ...old,\n enabled: event.target.checked,\n }));\n }}\n value=\"arrow\"\n />\n }\n label=\"Enable\"\n />\n <FormControlLabel\n control={\n <Switch\n checked={preventOverflow.altAxis}\n onChange={(event) => {\n setPreventOverflow((old) => ({\n ...old,\n altAxis: event.target.checked,\n }));\n }}\n value=\"alt-axis\"\n />\n }\n label=\"Alt axis\"\n />\n <FormControlLabel\n control={\n <Switch\n checked={preventOverflow.altBoundary}\n onChange={(event) => {\n setPreventOverflow((old) => ({\n ...old,\n altBoundary: event.target.checked,\n }));\n }}\n value=\"alt-boundary\"\n />\n }\n label=\"Alt Boundary\"\n />\n <FormControlLabel\n control={\n <Switch\n checked={preventOverflow.tether}\n onChange={(event) => {\n setPreventOverflow((old) => ({\n ...old,\n tether: event.target.checked,\n }));\n }}\n value=\"tether\"\n />\n }\n label=\"Tether\"\n />\n <TextField\n margin=\"dense\"\n size=\"small\"\n label=\"Root Boundary\"\n select\n value={preventOverflow.rootBoundary}\n onChange={(event) => {\n setPreventOverflow((old) => ({\n ...old,\n rootBoundary: event.target.value,\n }));\n }}\n variant=\"standard\"\n slotProps={{\n select: {\n native: true,\n inputProps: {\n 'aria-labelledby':\n 'scroll-playground-prevent-overflow-root-boundary',\n },\n },\n\n inputLabel: {\n id: 'scroll-playground-prevent-overflow-root-boundary',\n },\n }}\n >\n <option value=\"document\">document</option>\n <option value=\"viewport\">viewport</option>\n </TextField>\n </FormGroup>\n </Grid>\n <Grid item xs={6}>\n <FormGroup>\n <Typography variant=\"subtitle1\">Flip</Typography>\n <FormControlLabel\n control={\n <Switch\n checked={flip.enabled}\n onChange={(event) => {\n setFlip((old) => ({\n ...old,\n enabled: event.target.checked,\n }));\n }}\n value=\"enabled\"\n />\n }\n label=\"Enable\"\n />\n <FormControlLabel\n control={\n <Switch\n checked={flip.altBoundary}\n onChange={(event) => {\n setFlip((old) => ({\n ...old,\n altBoundary: event.target.checked,\n }));\n }}\n value=\"alt-boundary\"\n />\n }\n label=\"Alt Boundary\"\n />\n <TextField\n margin=\"dense\"\n size=\"small\"\n label=\"Root Boundary\"\n select\n value={flip.rootBoundary}\n onChange={(event) => {\n setFlip((old) => ({\n ...old,\n rootBoundary: event.target.value,\n }));\n }}\n variant=\"standard\"\n slotProps={{\n select: {\n native: true,\n inputProps: {\n 'aria-labelledby': 'scroll-playground-flip-root-boundary',\n },\n },\n\n inputLabel: {\n id: 'scroll-playground-flip-root-boundary',\n },\n }}\n >\n <option value=\"document\">document</option>\n <option value=\"viewport\">viewport</option>\n </TextField>\n </FormGroup>\n <FormGroup>\n <Typography variant=\"subtitle1\">Arrow</Typography>\n <FormControlLabel\n control={\n <Switch\n checked={arrow}\n onChange={(event) => {\n setArrow(event.target.checked);\n }}\n value=\"arrow\"\n />\n }\n label=\"Enable\"\n />\n </FormGroup>\n </Grid>\n </Grid>\n </Grid>\n <HighlightedCode code={jsx} language=\"jsx\" />\n </Box>\n );\n}\n"},"VirtualElementPopper.js":{module:"./VirtualElementPopper.js",raw:"import * as React from 'react';\nimport Popper from '@mui/material/Popper';\nimport Typography from '@mui/material/Typography';\nimport Fade from '@mui/material/Fade';\nimport Paper from '@mui/material/Paper';\n\nexport default function VirtualElementPopper() {\n const [open, setOpen] = React.useState(false);\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const previousAnchorElPosition = React.useRef(undefined);\n\n React.useEffect(() => {\n if (anchorEl) {\n if (typeof anchorEl === 'object') {\n previousAnchorElPosition.current = anchorEl.getBoundingClientRect();\n } else {\n previousAnchorElPosition.current = anchorEl().getBoundingClientRect();\n }\n }\n }, [anchorEl]);\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleMouseUp = () => {\n const selection = window.getSelection();\n\n // Resets when the selection has a length of 0\n if (!selection || selection.anchorOffset === selection.focusOffset) {\n handleClose();\n return;\n }\n\n const getBoundingClientRect = () => {\n if (selection.rangeCount === 0 && previousAnchorElPosition.current) {\n setOpen(false);\n return previousAnchorElPosition.current;\n }\n return selection.getRangeAt(0).getBoundingClientRect();\n };\n\n setOpen(true);\n\n setAnchorEl({ getBoundingClientRect });\n };\n\n const id = open ? 'virtual-element-popper' : undefined;\n\n return (\n <div onMouseLeave={handleClose}>\n <Typography aria-describedby={id} onMouseUp={handleMouseUp}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus,\n bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum\n vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor\n porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis\n vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus\n massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit\n amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus\n consequat. Suspendisse lacinia tellus a libero volutpat maximus.\n </Typography>\n <Popper\n id={id}\n open={open}\n anchorEl={anchorEl}\n transition\n placement=\"bottom-start\"\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Paper>\n <Typography sx={{ p: 2 }}>The content of the Popper.</Typography>\n </Paper>\n </Fade>\n )}\n </Popper>\n </div>\n );\n}\n",moduleTS:"./VirtualElementPopper.js",rawTS:"import * as React from 'react';\nimport Popper, { PopperProps } from '@mui/material/Popper';\nimport Typography from '@mui/material/Typography';\nimport Fade from '@mui/material/Fade';\nimport Paper from '@mui/material/Paper';\n\nexport default function VirtualElementPopper() {\n const [open, setOpen] = React.useState(false);\n const [anchorEl, setAnchorEl] = React.useState<PopperProps['anchorEl']>(null);\n\n const previousAnchorElPosition = React.useRef<DOMRect | undefined>(undefined);\n\n React.useEffect(() => {\n if (anchorEl) {\n if (typeof anchorEl === 'object') {\n previousAnchorElPosition.current = anchorEl.getBoundingClientRect();\n } else {\n previousAnchorElPosition.current = anchorEl().getBoundingClientRect();\n }\n }\n }, [anchorEl]);\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleMouseUp = () => {\n const selection = window.getSelection();\n\n // Resets when the selection has a length of 0\n if (!selection || selection.anchorOffset === selection.focusOffset) {\n handleClose();\n return;\n }\n\n const getBoundingClientRect = () => {\n if (selection.rangeCount === 0 && previousAnchorElPosition.current) {\n setOpen(false);\n return previousAnchorElPosition.current;\n }\n return selection.getRangeAt(0).getBoundingClientRect();\n };\n\n setOpen(true);\n\n setAnchorEl({ getBoundingClientRect });\n };\n\n const id = open ? 'virtual-element-popper' : undefined;\n\n return (\n <div onMouseLeave={handleClose}>\n <Typography aria-describedby={id} onMouseUp={handleMouseUp}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus,\n bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum\n vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor\n porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis\n vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus\n massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit\n amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus\n consequat. Suspendisse lacinia tellus a libero volutpat maximus.\n </Typography>\n <Popper\n id={id}\n open={open}\n anchorEl={anchorEl}\n transition\n placement=\"bottom-start\"\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Paper>\n <Typography sx={{ p: 2 }}>The content of the Popper.</Typography>\n </Paper>\n </Fade>\n )}\n </Popper>\n </div>\n );\n}\n"},"PopperPopupState.js":{module:"./PopperPopupState.js",raw:"import * as React from 'react';\nimport Typography from '@mui/material/Typography';\nimport Button from '@mui/material/Button';\nimport Popper from '@mui/material/Popper';\nimport PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state';\nimport Fade from '@mui/material/Fade';\nimport Paper from '@mui/material/Paper';\n\nexport default function PopperPopupState() {\n return (\n <PopupState variant=\"popper\" popupId=\"demo-popup-popper\">\n {(popupState) => (\n <div>\n <Button variant=\"contained\" {...bindToggle(popupState)}>\n Toggle Popper\n </Button>\n <Popper {...bindPopper(popupState)} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Paper>\n <Typography sx={{ p: 2 }}>The content of the Popper.</Typography>\n </Paper>\n </Fade>\n )}\n </Popper>\n </div>\n )}\n </PopupState>\n );\n}\n",moduleTS:"./PopperPopupState.js",rawTS:"import * as React from 'react';\nimport Typography from '@mui/material/Typography';\nimport Button from '@mui/material/Button';\nimport Popper from '@mui/material/Popper';\nimport PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state';\nimport Fade from '@mui/material/Fade';\nimport Paper from '@mui/material/Paper';\n\nexport default function PopperPopupState() {\n return (\n <PopupState variant=\"popper\" popupId=\"demo-popup-popper\">\n {(popupState) => (\n <div>\n <Button variant=\"contained\" {...bindToggle(popupState)}>\n Toggle Popper\n </Button>\n <Popper {...bindPopper(popupState)} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Paper>\n <Typography sx={{ p: 2 }}>The content of the Popper.</Typography>\n </Paper>\n </Fade>\n )}\n </Popper>\n </div>\n )}\n </PopupState>\n );\n}\n"}};eg.scope={process:{},import:{react:R,"@mui/material/Box":A,"@mui/material/Popper":D,"@mui/material/Fade":L,"prop-types":H,"@react-spring/web":O,"@mui/material/Typography":z,"@mui/material/Grid":G,"@mui/material/Button":N,"@mui/material/Paper":W,"material-ui-popup-state":I}};var eb={"./SimplePopper.js":function(){var e=E.useState(null),n=(0,_.Z)(e,2),t=n[0],o=n[1],r=!!t,a=r?"simple-popper":void 0;return(0,U.jsxs)("div",{children:[(0,U.jsx)("button",{"aria-describedby":a,type:"button",onClick:function(e){o(t?null:e.currentTarget)},children:"Toggle Popper"}),(0,U.jsx)(V.Z,{id:a,open:r,anchorEl:t,children:(0,U.jsx)(q.Z,{sx:{border:1,p:1,bgcolor:"background.paper"},children:"The content of the Popper."})})]})},"./TransitionsPopper.js":function(){var e=E.useState(!1),n=(0,_.Z)(e,2),t=n[0],o=n[1],r=E.useState(null),a=(0,_.Z)(r,2),i=a[0],l=a[1],s=t&&i?"transition-popper":void 0;return(0,U.jsxs)("div",{children:[(0,U.jsx)("button",{"aria-describedby":s,type:"button",onClick:function(e){l(e.currentTarget),o(function(e){return!e})},children:"Toggle Popper"}),(0,U.jsx)(V.Z,{id:s,open:t,anchorEl:i,transition:!0,children:function(e){var n=e.TransitionProps;return(0,U.jsx)($.Z,(0,S.Z)((0,S.Z)({},n),{},{timeout:350,children:(0,U.jsx)(q.Z,{sx:{border:1,p:1,bgcolor:"background.paper"},children:"The content of the Popper."})}))}})]})},"./SpringPopper.js":function(){var e=E.useState(!1),n=(0,_.Z)(e,2),t=n[0],o=n[1],r=E.useState(null),a=(0,_.Z)(r,2),i=a[0],l=a[1],s=t&&i?"spring-popper":void 0;return(0,U.jsxs)("div",{children:[(0,U.jsx)("button",{"aria-describedby":s,type:"button",onClick:function(e){l(e.currentTarget),o(function(e){return!e})},children:"Toggle Popper"}),(0,U.jsx)(V.Z,{id:s,open:t,anchorEl:i,transition:!0,children:function(e){var n=e.TransitionProps;return(0,U.jsx)(Y,(0,S.Z)((0,S.Z)({},n),{},{children:(0,U.jsx)(q.Z,{sx:{border:1,p:1,bgcolor:"background.paper"},children:"The content of the Popper."})}))}})]})},"./PositionedPopper.js":function(){var e=E.useState(null),n=(0,_.Z)(e,2),t=n[0],a=n[1],i=E.useState(!1),l=(0,_.Z)(i,2),s=l[0],c=l[1],p=E.useState(),d=(0,_.Z)(p,2),u=d[0],m=d[1],h=function(e){return function(n){a(n.currentTarget),c(function(n){return u!==e||!n}),m(e)}};return(0,U.jsxs)(q.Z,{sx:{width:500},children:[(0,U.jsx)(V.Z,{sx:{zIndex:1200},open:s,anchorEl:t,placement:u,transition:!0,children:function(e){var n=e.TransitionProps;return(0,U.jsx)($.Z,(0,S.Z)((0,S.Z)({},n),{},{timeout:350,children:(0,U.jsx)(en.Z,{children:(0,U.jsx)(Q.Z,{sx:{p:2},children:"The content of the Popper."})})}))}}),(0,U.jsx)(J.ZP,{container:!0,sx:{justifyContent:"center"},children:(0,U.jsxs)(J.ZP,{item:!0,children:[(0,U.jsx)(ee.Z,{onClick:h("top-start"),children:"top-start"}),(0,U.jsx)(ee.Z,{onClick:h("top"),children:"top"}),(0,U.jsx)(ee.Z,{onClick:h("top-end"),children:"top-end"})]})}),(0,U.jsxs)(J.ZP,{container:!0,sx:{justifyContent:"center"},children:[(0,U.jsxs)(J.ZP,{item:!0,xs:6,children:[(0,U.jsx)(ee.Z,{onClick:h("left-start"),children:"left-start"}),o||(o=(0,U.jsx)("br",{})),(0,U.jsx)(ee.Z,{onClick:h("left"),children:"left"}),r||(r=(0,U.jsx)("br",{})),(0,U.jsx)(ee.Z,{onClick:h("left-end"),children:"left-end"})]}),(0,U.jsxs)(J.ZP,{item:!0,container:!0,xs:6,direction:"column",sx:{alignItems:"flex-end"},children:[(0,U.jsx)(J.ZP,{item:!0,children:(0,U.jsx)(ee.Z,{onClick:h("right-start"),children:"right-start"})}),(0,U.jsx)(J.ZP,{item:!0,children:(0,U.jsx)(ee.Z,{onClick:h("right"),children:"right"})}),(0,U.jsx)(J.ZP,{item:!0,children:(0,U.jsx)(ee.Z,{onClick:h("right-end"),children:"right-end"})})]})]}),(0,U.jsx)(J.ZP,{container:!0,sx:{justifyContent:"center"},children:(0,U.jsxs)(J.ZP,{item:!0,children:[(0,U.jsx)(ee.Z,{onClick:h("bottom-start"),children:"bottom-start"}),(0,U.jsx)(ee.Z,{onClick:h("bottom"),children:"bottom"}),(0,U.jsx)(ee.Z,{onClick:h("bottom-end"),children:"bottom-end"})]})})]})},"./ScrollPlayground.js":function(){var e=E.useRef(null),n=E.useState(!1),t=(0,_.Z)(n,2),o=t[0],r=t[1],T=E.useState("bottom"),R=(0,_.Z)(T,2),M=R[0],F=R[1],A=E.useState(!1),D=(0,_.Z)(A,2),L=D[0],H=D[1],O=E.useState({enabled:!0,altBoundary:!0,rootBoundary:"document"}),z=(0,_.Z)(O,2),G=z[0],N=z[1],W=E.useState({enabled:!0,altAxis:!0,altBoundary:!0,tether:!0,rootBoundary:"document"}),I=(0,_.Z)(W,2),V=I[0],$=I[1],K=E.useState(!1),X=(0,_.Z)(K,2),Y=X[0],et=X[1],eh=E.useState(null),ef=(0,_.Z)(eh,2),ev=ef[0],eg=ef[1],eb=function(){r(function(e){return!e})},ex='\n<Popper\n placement="'.concat(M,'"\n disablePortal={').concat(L,"}\n modifiers={[\n {\n name: 'flip',\n enabled: ").concat(G.enabled,",\n options: {\n altBoundary: ").concat(G.altBoundary,",\n rootBoundary: '").concat(G.rootBoundary,"',\n padding: 8,\n },\n },\n {\n name: 'preventOverflow',\n enabled: ").concat(V.enabled,",\n options: {\n altAxis: ").concat(V.altAxis,",\n altBoundary: ").concat(V.altBoundary,",\n tether: ").concat(V.tether,",\n rootBoundary: '").concat(V.rootBoundary,"',\n padding: 8,\n },\n },\n {\n name: 'arrow',\n enabled: ").concat(Y,",\n options: {\n element: arrowRef,\n },\n },\n ]}\n>\n "),ey=o?"scroll-playground":null;return(0,U.jsxs)(q.Z,{sx:{flexGrow:1},children:[(0,U.jsx)(q.Z,{sx:{height:400,overflow:"auto",mb:3},children:(0,U.jsx)(J.ZP,{container:!0,ref:function(e){if(e){var n=e.parentElement;n.scrollTop=e.clientHeight/4,n.scrollLeft=e.clientWidth/4}},sx:{alignItems:"center",justifyContent:"center",position:"relative",width:"230%",bgcolor:"background.paper",height:"230%"},children:(0,U.jsxs)("div",{children:[(0,U.jsx)(ee.Z,{ref:e,variant:"contained",onClick:eb,"aria-describedby":ey,children:"Toggle Popper"}),(0,U.jsx)(Q.Z,{sx:{mt:2,maxWidth:300},children:"Scroll around this container to experiment with flip and preventOverflow modifiers."}),(0,U.jsx)(eu,{id:ey,open:o,arrow:Y,anchorEl:e.current,placement:M,disablePortal:L,modifiers:[{name:"flip",enabled:G.enabled,options:{altBoundary:G.altBoundary,rootBoundary:G.rootBoundary,padding:8}},{name:"preventOverflow",enabled:V.enabled,options:{altAxis:V.altAxis,altBoundary:V.altBoundary,tether:V.tether,rootBoundary:V.rootBoundary,padding:8}},{name:"arrow",enabled:Y,options:{element:ev}}],children:(0,U.jsxs)("div",{children:[Y?(0,U.jsx)(em,{ref:eg,className:"MuiPopper-arrow"}):null,(0,U.jsxs)(en.Z,{sx:{maxWidth:400,overflow:"auto"},children:[a||(a=(0,U.jsx)(el.Z,{children:"Use Google's location service?"})),i||(i=(0,U.jsx)(ea.Z,{children:(0,U.jsx)(ei.Z,{children:"Let Google help apps determine location."})})),(0,U.jsxs)(er.Z,{children:[(0,U.jsx)(ee.Z,{onClick:eb,children:"Disagree"}),(0,U.jsx)(ee.Z,{onClick:eb,children:"Agree"})]})]})]})})]})})}),(0,U.jsxs)(J.ZP,{container:!0,spacing:2,children:[(0,U.jsxs)(J.ZP,{container:!0,item:!0,xs:12,children:[l||(l=(0,U.jsx)(J.ZP,{item:!0,xs:12,children:(0,U.jsx)(Q.Z,{variant:"h6",component:"div",children:"Appearance"})})),(0,U.jsx)(J.ZP,{item:!0,xs:6,children:(0,U.jsxs)(ec.Z,{margin:"dense",sx:{width:200},label:"Placement",select:!0,value:M,onChange:function(e){F(e.target.value)},variant:"standard",slotProps:{select:{native:!0,inputProps:{"aria-labelledby":"scroll-playground-placement-label"}},inputLabel:{id:"scroll-playground-placement-label"}},children:[s||(s=(0,U.jsx)("option",{value:"top-start",children:"top-start"})),c||(c=(0,U.jsx)("option",{value:"top",children:"top"})),p||(p=(0,U.jsx)("option",{value:"top-end",children:"top-end"})),d||(d=(0,U.jsx)("option",{value:"left-start",children:"left-start"})),u||(u=(0,U.jsx)("option",{value:"left",children:"left"})),m||(m=(0,U.jsx)("option",{value:"left-end",children:"left-end"})),h||(h=(0,U.jsx)("option",{value:"right-start",children:"right-start"})),f||(f=(0,U.jsx)("option",{value:"right",children:"right"})),v||(v=(0,U.jsx)("option",{value:"right-end",children:"right-end"})),g||(g=(0,U.jsx)("option",{value:"bottom-start",children:"bottom-start"})),b||(b=(0,U.jsx)("option",{value:"bottom",children:"bottom"})),x||(x=(0,U.jsx)("option",{value:"bottom-end",children:"bottom-end"}))]})}),(0,U.jsxs)(J.ZP,{item:!0,xs:6,children:[(0,U.jsx)(eo.Z,{control:(0,U.jsx)(es.Z,{checked:L,onChange:function(e){H(e.target.checked)},value:"disablePortal"}),label:"Disable portal"}),(0,U.jsx)(Q.Z,{variant:"caption",sx:{display:"block",color:"text.secondary"},children:"(the children stay within their parent DOM hierarchy)"})]})]}),y||(y=(0,U.jsx)(J.ZP,{item:!0,xs:12,children:(0,U.jsx)(Q.Z,{variant:"h6",component:"div",children:"Modifiers (options from Popper.js)"})})),(0,U.jsxs)(J.ZP,{container:!0,item:!0,xs:12,spacing:1,children:[(0,U.jsx)(J.ZP,{item:!0,xs:6,children:(0,U.jsxs)(ep.Z,{children:[Z||(Z=(0,U.jsx)(Q.Z,{variant:"subtitle1",children:"Prevent Overflow"})),(0,U.jsx)(eo.Z,{control:(0,U.jsx)(es.Z,{checked:V.enabled,onChange:function(e){$(function(n){return(0,S.Z)((0,S.Z)({},n),{},{enabled:e.target.checked})})},value:"arrow"}),label:"Enable"}),(0,U.jsx)(eo.Z,{control:(0,U.jsx)(es.Z,{checked:V.altAxis,onChange:function(e){$(function(n){return(0,S.Z)((0,S.Z)({},n),{},{altAxis:e.target.checked})})},value:"alt-axis"}),label:"Alt axis"}),(0,U.jsx)(eo.Z,{control:(0,U.jsx)(es.Z,{checked:V.altBoundary,onChange:function(e){$(function(n){return(0,S.Z)((0,S.Z)({},n),{},{altBoundary:e.target.checked})})},value:"alt-boundary"}),label:"Alt Boundary"}),(0,U.jsx)(eo.Z,{control:(0,U.jsx)(es.Z,{checked:V.tether,onChange:function(e){$(function(n){return(0,S.Z)((0,S.Z)({},n),{},{tether:e.target.checked})})},value:"tether"}),label:"Tether"}),(0,U.jsxs)(ec.Z,{margin:"dense",size:"small",label:"Root Boundary",select:!0,value:V.rootBoundary,onChange:function(e){$(function(n){return(0,S.Z)((0,S.Z)({},n),{},{rootBoundary:e.target.value})})},variant:"standard",slotProps:{select:{native:!0,inputProps:{"aria-labelledby":"scroll-playground-prevent-overflow-root-boundary"}},inputLabel:{id:"scroll-playground-prevent-overflow-root-boundary"}},children:[P||(P=(0,U.jsx)("option",{value:"document",children:"document"})),w||(w=(0,U.jsx)("option",{value:"viewport",children:"viewport"}))]})]})}),(0,U.jsxs)(J.ZP,{item:!0,xs:6,children:[(0,U.jsxs)(ep.Z,{children:[k||(k=(0,U.jsx)(Q.Z,{variant:"subtitle1",children:"Flip"})),(0,U.jsx)(eo.Z,{control:(0,U.jsx)(es.Z,{checked:G.enabled,onChange:function(e){N(function(n){return(0,S.Z)((0,S.Z)({},n),{},{enabled:e.target.checked})})},value:"enabled"}),label:"Enable"}),(0,U.jsx)(eo.Z,{control:(0,U.jsx)(es.Z,{checked:G.altBoundary,onChange:function(e){N(function(n){return(0,S.Z)((0,S.Z)({},n),{},{altBoundary:e.target.checked})})},value:"alt-boundary"}),label:"Alt Boundary"}),(0,U.jsxs)(ec.Z,{margin:"dense",size:"small",label:"Root Boundary",select:!0,value:G.rootBoundary,onChange:function(e){N(function(n){return(0,S.Z)((0,S.Z)({},n),{},{rootBoundary:e.target.value})})},variant:"standard",slotProps:{select:{native:!0,inputProps:{"aria-labelledby":"scroll-playground-flip-root-boundary"}},inputLabel:{id:"scroll-playground-flip-root-boundary"}},children:[j||(j=(0,U.jsx)("option",{value:"document",children:"document"})),C||(C=(0,U.jsx)("option",{value:"viewport",children:"viewport"}))]})]}),(0,U.jsxs)(ep.Z,{children:[B||(B=(0,U.jsx)(Q.Z,{variant:"subtitle1",children:"Arrow"})),(0,U.jsx)(eo.Z,{control:(0,U.jsx)(es.Z,{checked:Y,onChange:function(e){et(e.target.checked)},value:"arrow"}),label:"Enable"})]})]})]})]}),(0,U.jsx)(ed.HighlightedCode,{code:ex,language:"jsx"})]})},"./VirtualElementPopper.js":function(){var e=E.useState(!1),n=(0,_.Z)(e,2),t=n[0],o=n[1],r=E.useState(null),a=(0,_.Z)(r,2),i=a[0],l=a[1],s=E.useRef(void 0);E.useEffect(function(){i&&("object"==typeof i?s.current=i.getBoundingClientRect():s.current=i().getBoundingClientRect())},[i]);var c=function(){o(!1)},p=t?"virtual-element-popper":void 0;return(0,U.jsxs)("div",{onMouseLeave:c,children:[(0,U.jsx)(Q.Z,{"aria-describedby":p,onMouseUp:function(){var e=window.getSelection();if(!e||e.anchorOffset===e.focusOffset){c();return}o(!0),l({getBoundingClientRect:function(){return 0===e.rangeCount&&s.current?(o(!1),s.current):e.getRangeAt(0).getBoundingClientRect()}})},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus."}),(0,U.jsx)(V.Z,{id:p,open:t,anchorEl:i,transition:!0,placement:"bottom-start",children:function(e){var n=e.TransitionProps;return(0,U.jsx)($.Z,(0,S.Z)((0,S.Z)({},n),{},{timeout:350,children:(0,U.jsx)(en.Z,{children:(0,U.jsx)(Q.Z,{sx:{p:2},children:"The content of the Popper."})})}))}})]})},"./PopperPopupState.js":function(){return(0,U.jsx)(I.default,{variant:"popper",popupId:"demo-popup-popper",children:function(e){return(0,U.jsxs)("div",{children:[(0,U.jsx)(ee.Z,(0,S.Z)((0,S.Z)({variant:"contained"},(0,eh.LI)(e)),{},{children:"Toggle Popper"})),(0,U.jsx)(V.Z,(0,S.Z)((0,S.Z)({},(0,eh.Rg)(e)),{},{transition:!0,children:function(e){var n=e.TransitionProps;return(0,U.jsx)($.Z,(0,S.Z)((0,S.Z)({},n),{},{timeout:350,children:(0,U.jsx)(en.Z,{children:(0,U.jsx)(Q.Z,{sx:{p:2},children:"The content of the Popper."})})}))}}))]})}})}},ex={"@mui/docs/ComponentLinkHeader":ef.Z};function ey(){return(0,U.jsx)(M.Z,(0,S.Z)({},T))}ey.getLayout=function(e){return(0,U.jsx)(F.ZP,{children:e})}},398009:function(e,n,t){"use strict";t.d(n,{c:function(){return g},Z:function(){return b}});var o,r=t(871598),a=t(220733),i=t(929231),l=t(858033),s=t(787154),c=t.n(s),p=t(470079),d=t(205783),u=t(629620),m=t(932152),h=t(735250),f=(0,d.ZP)("span")(function(e){var n=e.theme,t=m.s["body-image"](n);return{width:"100%","& > div":{display:"none"},"& #carbonads":(0,l.Z)((0,l.Z)({display:"block"},t.root),{},{"& .carbon-img":t.imgWrapper,"& img":t.img,"& a, & a:hover":t.a,"& .carbon-text":t.description,"& .carbon-poweredby":t.poweredby})}});function v(){var e=p.useRef(null);return p.useEffect(function(){var n=setTimeout(function(){var n,t;(n=e.current,(t=document.createElement("script")).setAttribute("async",""),t.src="https://cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom",n.appendChild(t),t).id="_carbonads_js"});return function(){clearTimeout(n)}},[]),(0,h.jsx)(f,{ref:e})}function g(e){var n=p.useState(null),t=(0,i.Z)(n,2),o=t[0],s=t[1];return p.useEffect(function(){var e=!0,n=0;return(0,a.Z)((0,r.Z)().mark(function t(){var o,i,l;return(0,r.Z)().wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return i=function(){return(i=(0,a.Z)((0,r.Z)().mark(function t(){var a,i;return(0,r.Z)().wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(!(n>=10||!e)){t.next=2;break}return t.abrupt("return",null);case 2:return n+=1,t.prev=3,t.next=6,fetch("https://srv.buysellads.com/ads/CE7DC23W.json");case 6:a=t.sent,t.next=12;break;case 9:return t.prev=9,t.t0=t.catch(3),t.abrupt("return",null);case 12:return t.next=14,a.json();case 14:if(i=t.sent.ads.filter(function(e){return c()(e).length>0}).filter(function(e){return e.statlink}).filter(Boolean)[0]){t.next=18;break}return t.abrupt("return",o());case 18:return t.abrupt("return",i);case 19:case"end":return t.stop()}},t,null,[[3,9]])}))).apply(this,arguments)},o=function(){return i.apply(this,arguments)},t.next=4,o();case 4:l=t.sent,e&&s(l);case 6:case"end":return t.stop()}},t)}))(),function(){e=!1}},[]),o?(0,h.jsxs)(p.Fragment,{children:[(0,h.jsx)("img",{src:o.statimp,alt:"",style:{display:"none"}}),o.pixel&&o.pixel.split("||").map(function(e,n){return(0,h.jsx)("img",{src:"".concat(e.replace("[timestamp]",o.timestamp)),style:{display:"none"},alt:""},n)}),(0,h.jsx)(u.Z,(0,l.Z)((0,l.Z)({},e),{},{className:"carbonads",shape:"inline",ad:{link:o.statlink,img:o.image,name:o.company,description:"<strong>".concat(o.company,"</strong> - ").concat(o.description),poweredby:"Carbon",label:"carbon-demo-inline"}}))]}):(0,h.jsx)("div",(0,l.Z)((0,l.Z)({},e),{},{style:{minHeight:52}}))}function b(){return o||(o=(0,h.jsx)(v,{}))}},629620:function(e,n,t){"use strict";t.d(n,{Z:function(){return u}});var o=t(858033),r=t(470079),a=t(205783),i=t(948743),l=t(297069),s=t(932152),c=t(735250),p=(0,a.ZP)("span")(function(e){var n=e.theme,t=s.s["body-inline"](n);return(0,o.Z)((0,o.Z)({},t.root),{},{"& img":t.img,"& a, & a:hover":t.a,"& .AdDisplay-imageWrapper":t.imgWrapper,"& .AdDisplay-description":t.description,"& .AdDisplay-poweredby":t.poweredby})}),d=(0,a.ZP)("span")(function(e){var n=e.theme,t=s.s["body-image"](n);return(0,o.Z)((0,o.Z)({},t.root),{},{"& img":t.img,"& a, & a:hover":t.a,"& .AdDisplay-imageWrapper":t.imgWrapper,"& .AdDisplay-description":t.description,"& .AdDisplay-poweredby":t.poweredby})});function u(e){var n,t=e.ad,a=e.className,s=e.shape,u=void 0===s?"auto":s;r.useEffect(function(){!(Math.random()>l.GA_ADS_DISPLAY_RATIO)&&t.label&&window.gtag("event","ad",{eventAction:"display",eventLabel:t.label})},[t.label]);var m="auto"===u?i.xM:u;return"inline"===m&&(n=p),"image"===m&&(n=d),(0,c.jsxs)(n,{className:a,children:[(0,c.jsxs)("a",(0,o.Z)((0,o.Z)({href:t.link,target:"_blank",rel:"noopener sponsored"},t.label?{"data-ga-event-category":"ad","data-ga-event-action":"click","data-ga-event-label":t.label}:{}),{},{children:[(0,c.jsx)("span",{className:"AdDisplay-imageWrapper",children:(0,c.jsx)("img",{height:"100",width:"130",src:t.img,alt:t.name})}),(0,c.jsx)("span",{className:"AdDisplay-description",dangerouslySetInnerHTML:{__html:t.description}})]})),(0,c.jsxs)("span",{className:"AdDisplay-poweredby",children:["ad by ",t.poweredby]})]})}},948743:function(e,n,t){"use strict";t.d(n,{QN:function(){return c},ZP:function(){return d},xM:function(){return p}});var o=t(929231),r=t(17896),a=t(470079),i=t(681449),l=t(735250),s=["classSelector"],c=a.createContext(),p=.2>Math.random()?"inline":"image";function d(e){var n=e.classSelector,t=void 0===n?".description":n,p=(0,r.Z)(e,s),d=a.useState({}),u=(0,o.Z)(d,2),m=u[0],h=u[1];return(0,i.Z)(function(){h({placement:"body-top",element:document.querySelector(t)})},[t]),(0,l.jsx)(c.Provider,{value:m,children:p.children})}},152385:function(e,n,t){"use strict";t.d(n,{Z:function(){return c}});var o=t(858033),r=t(666524);t(470079);var a=t(205783),i=t(845356),l=t(735250),s=(0,a.ZP)(i.Z)(function(e){var n=e.theme;return(0,r.Z)({paddingTop:"calc(var(--MuiDocs-header-height) + ".concat(n.spacing(4),")"),fontFamily:"Arial",maxWidth:"105ch"},n.breakpoints.up("lg"),{paddingLeft:n.spacing(8),paddingRight:n.spacing(8)})});function c(e){return(0,l.jsx)(s,(0,o.Z)({id:"main-content",maxWidth:!1},e))}},452373:function(e,n,t){"use strict";t.d(n,{H:function(){return d},Z:function(){return m}});var o=t(639909),r=t(858033);t(470079);var a=t(692579),i=t(205783),l=t(710494),s=t(491102),c=t(408078),p=t(735250),d=50,u=(0,i.ZP)(c.r)(function(e){var n=e.theme;return(0,r.Z)({minHeight:30,minWidth:0,padding:n.spacing(.5,1),border:"1px solid",borderColor:"transparent",fontFamily:n.typography.fontFamily,fontWeight:n.typography.fontWeightSemiBold,fontSize:n.typography.pxToRem(14),color:(n.vars||n).palette.text.secondary,borderRadius:"8px","&:hover":{background:(n.vars||n).palette.grey[50],borderColor:(n.vars||n).palette.divider,color:(n.vars||n).palette.text.primary}},n.applyDarkStyles({"&:hover":{borderColor:(n.vars||n).palette.divider,background:(n.vars||n).palette.primaryDark[700]},"&.Mui-selected":{color:(n.vars||n).palette.primary[300]}}))});function m(e){var n,t=e.activeTab,r=e.children,i=e.markdown.headers,c=(0,a.useRouter)(),d=(0,s.qM)(),m=c.pathname.endsWith("[docsTab]")?c.pathname.replace("[docsTab]",""):c.pathname,h="".concat(m.endsWith("/")?m:"".concat(m,"/")),f=[{key:"",label:d("api-docs.demos"),href:m}].concat((0,o.Z)((null===(n=i.components)||void 0===n?void 0:n.length)>0?[{key:"components-api",label:d("api-docs.componentsApi"),href:"".concat(h,"components-api")}]:[]),(0,o.Z)(i.hooks&&i.hooks.length>0?[{key:"hooks-api",label:d("api-docs.hooksApi"),href:"".concat(h,"hooks-api")}]:[]));return(0,p.jsxs)(l.Z,{className:"component-tabs",sx:{display:"inline"},children:[(0,p.jsx)(l.Z,{component:"nav",className:"component-tabs",sx:{position:"sticky",top:57,mt:2,mx:{xs:-2,sm:-1},backgroundColor:"background.default",borderBottom:1,borderColor:"divider",zIndex:1e3,display:"inline-flex",py:1,gap:.5,"&::before":{content:"''",position:"absolute",bottom:0,left:{"":"1px","components-api":"67px","hooks-api":"198px"}[t],width:{"":"62px","components-api":"127px","hooks-api":"86px"}[t],height:"2px",backgroundColor:"primary.light"}},children:f.map(function(e){return(0,p.jsx)(u,{href:e.href,"aria-current":t===e.key?"page":void 0,className:e.key.includes("api")?"skip-algolia-crawler":"",sx:{color:t===e.key?"primary.main":"inherit"},children:e.label},e.key)})}),r]})}},50128:function(e,n,t){"use strict";t.d(n,{Z:function(){return V}});var o,r,a,i,l,s,c,p=t(858033),d=t(639909),u=t(929231),m=t(787154),h=t.n(m),f=t(470079),v=t(639519),g=t.n(v),b=t(692579),x=t(696689),y=t.n(x),Z=t(523752),P=t(630446),w=t(99820),k=t(743031),j=t(412016),C=t(438013),B=t(736179),T=t(819415),S=t(986572),E=t(275857),R=t(735250);function M(e){var n,t=e.hash,o=e.text,r=e.level,a=(0,w.qM)();return(0,R.jsx)(k.N,{title:(n={demos:a("api-docs.demos"),import:a("api-docs.import"),props:a("api-docs.props"),"theme-default-props":a("api-docs.themeDefaultProps"),inheritance:a("api-docs.inheritance"),slots:a("api-docs.slots"),classes:a("api-docs.classes"),css:a("api-docs.css")})[t]||n[o]||o||t,hash:t,level:void 0===r?"h2":r})}function F(e){var n=e.descriptions,t=e.pageContents,l=e.defaultLayout,s=void 0===l?"table":l,c=e.layoutStorageKey,p=void 0===c?E.aB:c,u=(0,w.qM)(),m=(0,w.fO)(),v=(0,b.useRouter)();return f.useEffect(function(){var e=v.asPath.indexOf("#")>=0?v.asPath.split("#")[1]:null;v.isReady&&e&&e.indexOf("-unstyled")>=0&&v.replace({hash:"".concat(e.replace("-unstyled",""))},null,{shallow:!0})},[v]),h()(t).map(function(e){var l=t[e],c=l.cssComponent,h=l.filename,v=l.forwardsRefTo,g=l.inheritance,b=l.name,x=l.props,Z=l.spread,P=l.slots,w=l.classes,k=l.imports,E=(0,d.Z)(w).sort(function(e,n){return e.className.localeCompare(n.className)}),F=n[e][m],A=F.classDescriptions,D=F.propDescriptions,L=F.slotDescriptions,H=h.includes("mui-joy"),O=h.includes("mui-base"),z="";H?z="/joy-ui/customization/overriding-component-structure/":O&&(z="/base-ui/guides/overriding-component-structure/");var G=u("api-docs.refRootElement");null==v&&(G=u("api-docs.refNotHeld"));var N="";Z&&(N=u("api-docs.spreadHint").replace(/{{spreadHintElement}}/,g?'<a href="'.concat(g.pathname,'">').concat(g.component,"</a>"):u("api-docs.nativeElement")));var W="";g&&"Transition"===g.component&&(W=u("api-docs.inheritanceSuffixTransition"));var I=y()(b),_=k.join("\n// ".concat(u("or"),"\n"));return(0,R.jsxs)(f.Fragment,{children:[(0,R.jsxs)(C.Z,{children:[(0,R.jsx)(M,{hash:I,text:"".concat(b," API")}),(0,R.jsx)(M,{text:"import",hash:"".concat(I,"-import"),level:"h3"}),(0,R.jsx)(j.HighlightedCode,{code:_,language:"jsx"}),k.length>1&&(0,R.jsx)("p",{dangerouslySetInnerHTML:{__html:u("api-docs.importDifference")}}),(0,R.jsx)(B.Z,{properties:x,propertiesDescriptions:D,componentName:b,spreadHint:N,level:"h3",titleHash:"".concat(I,"-props"),defaultLayout:s,layoutStorageKey:p.props}),o||(o=(0,R.jsx)("br",{})),c&&(0,R.jsxs)(f.Fragment,{children:[(0,R.jsx)("span",{dangerouslySetInnerHTML:{__html:u("api-docs.cssComponent").replace(/{{name}}/,l.name)}}),r||(r=(0,R.jsx)("br",{})),a||(a=(0,R.jsx)("br",{}))]}),(0,R.jsx)("div",{className:"MuiCallout-root MuiCallout-info",dangerouslySetInnerHTML:{__html:G},style:{alignItems:"baseline",gap:"4px",marginTop:0}}),g&&(0,R.jsxs)(f.Fragment,{children:[(0,R.jsx)(M,{text:"inheritance",hash:"".concat(I,"-inheritance"),level:"h3"}),(0,R.jsx)("span",{dangerouslySetInnerHTML:{__html:u("api-docs.inheritanceDescription").replace(/{{component}}/,g.component).replace(/{{pathname}}/,g.pathname).replace(/{{suffix}}/,W).replace(/{{name}}/,l.name)}})]}),l.themeDefaultProps&&(0,R.jsxs)(f.Fragment,{children:[(0,R.jsx)(M,{text:"theme-default-props",hash:"".concat(b,"-theme-default-props"),level:"h4"}),(0,R.jsx)("span",{dangerouslySetInnerHTML:{__html:u("api-docs.themeDefaultPropsDescription").replace(/{{muiName}}/,l.muiName).replace(/{{defaultPropsLink}}/,H?"/joy-ui/customization/themed-components/#theme-default-props":"/material-ui/customization/theme-components/#theme-default-props")}})]}),(0,R.jsx)(S.Z,{componentSlots:P,slotDescriptions:L,componentName:b,titleHash:"".concat(I,"-slots"),level:"h3",spreadHint:z&&u("api-docs.slotDescription").replace(/{{slotGuideLink}}/,z),defaultLayout:s,layoutStorageKey:p.slots}),(0,R.jsx)(T.Z,{componentClasses:E,componentName:l.name,classDescriptions:A,spreadHint:u("api-docs.classesDescription"),titleHash:"".concat(I,"-classes"),level:"h3",defaultLayout:s,layoutStorageKey:p.classes})]}),(0,R.jsx)("svg",{style:{display:"none"},xmlns:"http://www.w3.org/2000/svg",children:i||(i=(0,R.jsx)("symbol",{id:"anchor-link-icon",viewBox:"0 0 16 16",children:(0,R.jsx)("path",{d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"})}))})]},"component-api-".concat(e))})}function A(e){var n,t=e.hash,o=e.text,r=e.level,a=(0,w.qM)();return(0,R.jsx)(k.N,{hash:t,title:(n={demos:a("api-docs.demos"),import:a("api-docs.import"),"hook-name":a("api-docs.hookName"),parameters:a("api-docs.parameters"),"return-value":a("api-docs.returnValue")})[t]||n[o]||o||t,level:void 0===r?"h2":r})}function D(e){var n=e.descriptions,t=e.pagesContents,o=e.defaultLayout,r=void 0===o?"table":o,a=e.layoutStorageKey,i=void 0===a?E.aB:a,c=(0,w.fO)(),p=(0,w.qM)();return h()(t).map(function(e){var o=t[e],a=o.name,d=o.parameters,u=o.returnValue,m=o.imports,v=n[e][c],g=v.parametersDescriptions,b=v.returnValueDescriptions,x=y()(a),Z=m.join("\n// ".concat(p("or"),"\n"));return(0,R.jsxs)(f.Fragment,{children:[(0,R.jsxs)(C.Z,{children:[(0,R.jsx)(A,{hash:x,text:"".concat(a," API")}),(0,R.jsx)(A,{text:"import",hash:"".concat(x,"-import"),level:"h3"}),(0,R.jsx)(j.HighlightedCode,{code:Z,language:"jsx"}),m.length>1&&(0,R.jsx)("p",{dangerouslySetInnerHTML:{__html:p("api-docs.importDifference")}}),h()(d).length>0?(0,R.jsx)(B.Z,{properties:d,propertiesDescriptions:g,componentName:a,hooksParameters:!0,level:"h3",title:"api-docs.parameters",titleHash:"".concat(x,"-parameters"),defaultLayout:r,layoutStorageKey:i}):(0,R.jsx)("span",{children:p("api-docs.hooksNoParameters")}),(0,R.jsx)(B.Z,{properties:u,propertiesDescriptions:b,componentName:a,showOptionalAbbr:!0,hooksReturnValue:!0,level:"h3",title:"api-docs.returnValue",titleHash:"".concat(x,"-return-value"),defaultLayout:r,layoutStorageKey:i}),l||(l=(0,R.jsx)("br",{}))]}),(0,R.jsx)("svg",{style:{display:"none"},xmlns:"http://www.w3.org/2000/svg",children:s||(s=(0,R.jsx)("symbol",{id:"anchor-link-icon",viewBox:"0 0 16 16",children:(0,R.jsx)("path",{d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"})}))})]},"hook-api-".concat(e))})}var L=t(20883),H=t(813152),O=t(921363),z=t(441706),G=t(380587),N=t(484190),W=t(248541),I=t(452373),_=t(4803);function q(e){var n=e.mode,t=(0,P.tv)().setMode;return f.useEffect(function(){t(n)},[n,t]),null}function V(e){var n,t=(0,Z.Z)(),o=(0,b.useRouter)(),r=f.useState(null!==(n=o.query.docsTab)&&void 0!==n?n:""),a=(0,u.Z)(r,2),i=a[0],l=a[1],s=(0,O.ln)(o.asPath).canonicalAs,m=e.disableAd,v=void 0!==m&&m,g=e.disableToc,x=e.demos,k=void 0===x?{}:x,j=e.docs,C=e.demoComponents,S=e.srcComponents,E=e.componentsApiDescriptions,M=e.componentsApiPageContents,A=e.hooksApiDescriptions,V=e.hooksApiPageContents,U=(0,w.fO)(),$=(0,w.qM)();f.useEffect(function(){var e;l(null!==(e=o.query.docsTab)&&void 0!==e?e:"")},[o.query.docsTab]);var K=j[U]||j.en,X=K.toc;function Y(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=[];return h()(t).forEach(function(t){o.push({text:t,hash:"".concat(e,"-").concat(n,"-").concat(t),children:[]})}),{text:function(e,n){var t={demos:e("api-docs.demos"),import:e("api-docs.import"),"hook-name":e("api-docs.hookName"),parameters:e("api-docs.parameters"),"return-value":e("api-docs.returnValue")};if(!t.hasOwnProperty(n))throw TypeError("Unable to translate header '".concat(n,"'. Did you mean one of '").concat(h()(t).join("', '"),"'"));return t[n]||n}($,n),hash:"".concat(e,"-").concat(n),children:o}}var Q=[];function J(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{inheritance:!1,themeDefaultProps:!1};return{text:(0,L.q)($,n),hash:"".concat(e,"-").concat(n),children:[].concat((0,d.Z)(t.inheritance?[{text:$("api-docs.inheritance"),hash:"inheritance",children:[]}]:[]),(0,d.Z)(t.themeDefaultProps?[{text:$("api-docs.themeDefaultProps"),hash:"theme-default-props",children:[]}]:[]))}}V&&h()(V).forEach(function(e){var n=V[e],t=n.name,o=n.parameters,r=n.returnValue,a=y()(t),i=[Y(a,"import"),Y(a,"parameters",void 0===o?{}:o),Y(a,"return-value",void 0===r?{}:r)].filter(Boolean);Q.push({text:t,hash:a,children:i})});var ee=[];M&&h()(M).forEach(function(e){var n=E[e][U].componentDescriptionToc,t=M[e],o=t.name,r=t.inheritance,a=t.slots,i=t.themeDefaultProps,l=t.classes,s=t.props,c=y()(o),p=[J(c,"import")].concat((0,d.Z)(void 0===n?[]:n),[(0,B.m)({t:$,componentName:c,componentProps:s,inheritance:r,themeDefaultProps:i,hash:"".concat(c,"-props")}),(null==a?void 0:a.length)>0&&J(c,"slots")],(0,d.Z)((0,T.A)({t:$,componentName:c,componentClasses:l,hash:"".concat(c,"-classes")}))).filter(Boolean);ee.push({text:o,hash:c,children:p})});for(var en=s.startsWith("/joy-ui/"),et=en?P.lL:f.Fragment,eo=en?G.BrandingProvider:f.Fragment,er=(0,p.Z)({},en&&{mode:t.palette.mode}),ea=[],ei=0,el=!1;ei<K.rendered.length&&!el;){var es=K.rendered[ei];es.component&&es.component.indexOf("Tabs")>=0&&(el=!0),ea.push((0,R.jsx)(H.Z,{activeTab:i,demoComponents:C,demos:k,disableAd:v,localizedDoc:K,renderedMarkdownOrDemo:es,srcComponents:S,theme:t,WrapperComponent:eo,wrapperProps:er},"common-elements-".concat(ei))),ei+=1}var ec=X;"hooks-api"===i&&(ec=Q),"components-api"===i&&(ec=ee);var ep=K.rendered.some(function(e){return"object"==typeof e&&!!e.component&&"modules/components/ComponentPageTabs.js"===e.component});return(0,R.jsx)(z.Z,{cardOptions:{description:K.headers.cardDescription,title:K.headers.cardTitle},description:K.description,disableAd:v,disableToc:void 0!==g&&g,location:K.location,title:K.title,toc:ec,disableLayout:!0,hasTabs:ep,children:(0,R.jsxs)("div",{style:{"--MuiDocs-header-height":ep?"".concat(W.Hx+I.H,"px"):"".concat(W.Hx,"px")},children:[v?null:(0,R.jsx)(G.BrandingProvider,{children:(0,R.jsx)(_.Z,{classSelector:ep?".component-tabs":void 0,children:c||(c=(0,R.jsx)(N.ZP,{}))})}),(0,R.jsxs)(et,{children:[en&&(0,R.jsx)(q,{mode:t.palette.mode}),ea,""===i&&K.rendered.slice(ei).map(function(e,n){return(0,R.jsx)(H.Z,{activeTab:i,demoComponents:C,demos:k,disableAd:v,localizedDoc:K,renderedMarkdownOrDemo:e,srcComponents:S,theme:t,WrapperComponent:eo,wrapperProps:er},"demos-section-".concat(n))}),"components-api"===i&&(0,R.jsx)(F,{descriptions:E,pageContents:M}),"hooks-api"===i&&(0,R.jsx)(D,{descriptions:A,pagesContents:V})]})]})})}q.propTypes={mode:g().oneOf(["light","dark"])}},438013:function(e,n,t){"use strict";var o=t(490380);n.Z=o.G},932152:function(e,n,t){"use strict";t.d(n,{s:function(){return s}});var o=t(858033),r=t(666524),a=t(607182),i=t(948743),l=function(e){var n;return{root:(0,r.Z)({display:"block",overflow:"hidden",border:"1px dashed",borderColor:e.palette.divider,borderRadius:e.shape.borderRadius,padding:"8px 8px 8px calc(8px + 130px)"},e.breakpoints.up("sm"),{padding:"12px 12px 12px calc(12px + 130px)"}),imgWrapper:{float:"left",marginLeft:-130,width:130,height:100},img:{verticalAlign:"middle"},a:{color:e.palette.text.primary,textDecoration:"none"},description:(0,o.Z)((0,o.Z)({},e.typography.body2),{},(n={},(0,r.Z)(n,e.breakpoints.up("sm"),(0,o.Z)({},e.typography.body1)),(0,r.Z)(n,"display","block"),(0,r.Z)(n,"marginLeft",e.spacing(1.5)),n)),poweredby:(0,o.Z)((0,o.Z)({},e.typography.caption),{},{marginLeft:e.spacing(1.5),color:e.palette.text.secondary,display:"block",marginTop:e.spacing(.5),fontWeight:e.typography.fontWeightRegular})}},s={"body-image":l,"body-inline":function(e){var n=l(e);return(0,o.Z)((0,o.Z)({},n),{},{root:{display:"block",paddingTop:8},imgWrapper:{display:"none"},description:(0,o.Z)((0,o.Z)({},n.description),{},{marginLeft:0,"&::before":{border:"1px solid #3e8e41",color:"#3e8e41",marginRight:6,padding:"1px 5px",borderRadius:3,content:'"Ad"',fontSize:e.typography.pxToRem(14)},"&::after":(0,o.Z)({marginLeft:4,content:'"Get started"',color:e.palette.primary[600],textDecoration:"underline",textDecorationColor:(0,a.Fq)(e.palette.primary.main,.4)},e.applyStyles("dark",{color:e.palette.primary[300]}))}),poweredby:(0,o.Z)((0,o.Z)({},n.poweredby),{},{marginTop:2,marginLeft:0}),link:{display:"none"}})}};s["body-".concat(i.xM)]},647567:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/material-ui/react-popper",function(){return t(769858)}])},388339:function(e,n,t){"use strict";var o=t(181925);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=o(t(122268)),a=t(735250);n.default=(0,r.default)((0,a.jsx)("path",{d:"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M7 9h10c.55 0 1 .45 1 1s-.45 1-1 1H7c-.55 0-1-.45-1-1s.45-1 1-1m6 5H7c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1m4-6H7c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1"}),"ChatRounded")}},function(e){e.O(0,[49774,78557,95432,97146,83507,53274,17376,20464,15686,82218,55455,13228,19612,60838,81926,70355,68453,93560,78262,13202,42193,48541,73937,90380,19863,38071,76966,43088,13152,20883,92888,40179],function(){return e(e.s=647567)}),_N_E=e.O()}]);