(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[64129],{33897:function(n,e,o){var t=o(15012),a=/^\s+/;n.exports=function(n){return n?n.slice(0,t(n)+1).replace(a,""):n}},15012:function(n){var e=/\s/;n.exports=function(n){for(var o=n.length;o--&&e.test(n.charAt(o)););return o}},89678:function(n,e,o){var t=o(6627),a=o(85365),i=o(67948),s=Math.max,l=Math.min;n.exports=function(n,e,o){var r,c,d,p,m,u,h=0,f=!1,g=!1,y=!0;if("function"!=typeof n)throw TypeError("Expected a function");function x(e){var o=r,t=c;return r=c=void 0,h=e,p=n.apply(t,o)}function b(n){var o=n-u,t=n-h;return void 0===u||o>=e||o<0||g&&t>=d}function v(){var n,o,t,i=a();if(b(i))return k(i);m=setTimeout(v,(n=i-u,o=i-h,t=e-n,g?l(t,d-o):t))}function k(n){return(m=void 0,y&&r)?x(n):(r=c=void 0,p)}function C(){var n,o=a(),t=b(o);if(r=arguments,c=this,u=o,t){if(void 0===m)return h=n=u,m=setTimeout(v,e),f?x(n):p;if(g)return clearTimeout(m),m=setTimeout(v,e),x(u)}return void 0===m&&(m=setTimeout(v,e)),p}return e=i(e)||0,t(o)&&(f=!!o.leading,d=(g="maxWait"in o)?s(i(o.maxWait)||0,e):d,y="trailing"in o?!!o.trailing:y),C.cancel=function(){void 0!==m&&clearTimeout(m),h=0,r=u=c=m=void 0},C.flush=function(){return void 0===m?p:k(a())},C}},6627:function(n){n.exports=function(n){var e=typeof n;return null!=n&&("object"==e||"function"==e)}},96689:function(n,e,o){var t=o(71017)(function(n,e,o){return n+(o?"-":"")+e.toLowerCase()});n.exports=t},85365:function(n,e,o){var t=o(73401);n.exports=function(){return t.Date.now()}},23763:function(n,e,o){var t=o(89678),a=o(6627);n.exports=function(n,e,o){var i=!0,s=!0;if("function"!=typeof n)throw TypeError("Expected a function");return a(o)&&(i="leading"in o?!!o.leading:i,s="trailing"in o?!!o.trailing:s),t(n,e,{leading:i,maxWait:e,trailing:s})}},67948:function(n,e,o){var t=o(33897),a=o(6627),i=o(42848),s=0/0,l=/^[-+]0x[0-9a-f]+$/i,r=/^0b[01]+$/i,c=/^0o[0-7]+$/i,d=parseInt;n.exports=function(n){if("number"==typeof n)return n;if(i(n))return s;if(a(n)){var e="function"==typeof n.valueOf?n.valueOf():n;n=a(e)?e+"":e}if("string"!=typeof n)return 0===n?n:+n;n=t(n);var o=r.test(n);return o||c.test(n)?d(n.slice(2),o?2:8):l.test(n)?s:+n}},27146:function(n,e,o){"use strict";o.d(e,{Z:function(){return B}});var t,a,i,s,l,r,c,d=o(92379),p=o(10768),m=o(21685),u=o(22981),h=o(38300),f=o(7285),g=o(22269),y=o(651),x=(0,g.Z)((0,y.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,y.jsx)("path",{fill:"#FDB300",d:"M5.24 2.7L12 2l6.76.7L24 9.48 12 23 0 9.49z"}),(0,y.jsx)("path",{fill:"#EA6C00",d:"M4.85 9l7.13 14L0 9zM19.1 9l-7.12 14L23.95 9z"}),(0,y.jsx)("path",{fill:"#FDAD00",d:"M4.85 9H19.1l-7.12 14z"}),(0,y.jsxs)("g",{children:[(0,y.jsx)("path",{fill:"#FDD231",d:"M11.98 2l-6.75.65-.38 6.34zM11.98 2l6.75.65.37 6.34z"}),(0,y.jsx)("path",{fill:"#FDAD00",d:"M23.95 9l-5.22-6.35.37 6.34zM0 9l5.23-6.35-.38 6.34z"}),(0,y.jsx)("path",{fill:"#FEEEB7",d:"M11.98 2L4.85 9H19.1z"})]})]}),"Sketch"),b=(0,g.Z)((0,y.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,y.jsx)("path",{d:"M8 24a4 4 0 004-4v-4H8a4 4 0 000 8z",fill:"#0ACF83"}),(0,y.jsx)("path",{d:"M4 12a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",fill:"#A259FF"}),(0,y.jsx)("path",{d:"M4 4a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",fill:"#F24E1E"}),(0,y.jsx)("path",{d:"M12 0h4a4 4 0 010 8h-4V0z",fill:"#FF7262"}),(0,y.jsx)("path",{d:"M20 12a4 4 0 11-8 0 4 4 0 018 0z",fill:"#1ABCFE"})]}),"Figma"),v=(0,g.Z)((0,y.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,y.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,y.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"),k=(0,g.Z)((0,y.jsxs)("g",{fill:"currentColor",fillRule:"nonzero",children:[(0,y.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,y.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"),C=(0,g.Z)((0,y.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,y.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,y.jsx)("g",{fill:"currentColor",children:(0,y.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"),M=(0,g.Z)((0,y.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,y.jsx)("circle",{fill:"#737373",cx:"12",cy:"12",r:"12"}),(0,y.jsx)("path",{fill:"#BDBDBD",d:"M4 4h16v16H4z"}),(0,y.jsx)("path",{fill:"#FFF",d:"M12 20l8-16H4z"})]}),"MaterialDesign"),w=o(11516),j=(0,f.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}}}),T={"material-ui":"@mui/material","joy-ui":"@mui/joy","base-ui":"@mui/base",system:"@mui/system"};function B(n){var e,o,f=n.markdown.headers,g=n.design,B=(0,w.qM)(),S=null!=(e=null!=(o=f.packageName)?o:T[f.productId])?e:"@mui/material";return(0,y.jsxs)(j,{children:[f.githubLabel?(0,y.jsx)("li",{children:(0,y.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(f.githubLabel)),icon:t||(t=(0,y.jsx)(u.Z,{color:"primary"})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":B("githubLabel"),"data-ga-event-split":"0.1",label:B("githubLabel")})}):null,(0,y.jsx)("li",{children:(0,y.jsx)(m.Z,{title:B("bundleSizeTooltip"),describeChild:!0,children:(0,y.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://bundlephobia.com/package/".concat(S,"@latest"),icon:a||(a=(0,y.jsx)(k,{color:"primary"})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":B("bundleSize"),"data-ga-event-split":"0.1",label:B("bundleSize")})})}),f.githubSource?(0,y.jsx)("li",{children:(0,y.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"".concat("https://github.com/mui/material-ui","/tree/").concat("next","/").concat(f.githubSource),icon:i||(i=(0,y.jsx)(h.default,{})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Source","data-ga-event-split":"0.1",label:"Source",target:"_blank"})}):null,f.waiAria?(0,y.jsx)("li",{children:(0,y.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:f.waiAria,icon:s||(s=(0,y.jsx)(C,{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,f.materialDesign?(0,y.jsx)("li",{children:(0,y.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:f.materialDesign,icon:l||(l=(0,y.jsx)(M,{})),"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===g?null:(0,y.jsxs)(d.Fragment,{children:[r||(r=(0,y.jsx)("li",{children:(0,y.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,y.jsx)(b,{}),"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"===S?null:c||(c=(0,y.jsxs)(d.Fragment,{children:[(0,y.jsx)("li",{children:(0,y.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,y.jsx)(v,{}),"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,y.jsx)("li",{children:(0,y.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,y.jsx)(x,{}),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Sketch","data-ga-event-split":"0.1",label:"Sketch"})})]}))]})]})}},11025:function(n,e,o){"use strict";o.r(e),o.d(e,{backdropClasses:function(){return a.Z},default:function(){return t.Z},getBackdropUtilityClass:function(){return a.s}});var t=o(83120),a=o(28966)},96143:function(n,e,o){"use strict";o.r(e),o.d(e,{boxClasses:function(){return a.Z},default:function(){return t.Z}});var t=o(17125),a=o(60762)},48997:function(n,e,o){"use strict";o.r(e),o.d(e,{buttonClasses:function(){return a.Z},default:function(){return t.Z},getButtonUtilityClass:function(){return a.F}});var t=o(88102),a=o(55109)},32222:function(n,e,o){"use strict";o.r(e),o.d(e,{default:function(){return t.Z}});var t=o(97883)},56706:function(n,e,o){"use strict";o.r(e),o.d(e,{default:function(){return t.Z},getTypographyUtilityClass:function(){return a.f},typographyClasses:function(){return a.Z}});var t=o(18377),a=o(32524)},49622:function(n,e,o){"use strict";o.r(e),o.d(e,{default:function(){return Q}});var t,a,i,s,l,r,c,d,p,m,u={};o.r(u),o.d(u,{ModalManager:function(){return w.g},default:function(){return j.Z},getModalUtilityClass:function(){return T.x},modalClasses:function(){return T.Z}});var h={};o.r(h),o.d(h,{demoComponents:function(){return J},demos:function(){return $},docs:function(){return G},srcComponents:function(){return X}});var f=o(32970),g=o.n(f),y=o(92379),x=o.t(y,2),b=o(45703),v=o(90417),k=o(96143),C=o(48997),M=o(56706),w=o(76609),j=o(14634),T=o(95370),B=o(11025),S=o(32222),Z=o(39519),O=o(66251),A=o(13949),H=o(17125),R=o(88102),D=o(18377),F=o(651),P={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:400,bgcolor:"background.paper",border:"2px solid #000",boxShadow:24,p:4},z={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:400,bgcolor:"background.paper",border:"2px solid #000",boxShadow:24,pt:2,px:4,pb:3};function L(){var n=y.useState(!1),e=(0,A.Z)(n,2),o=e[0],t=e[1],s=function(){t(!1)};return(0,F.jsxs)(y.Fragment,{children:[(0,F.jsx)(R.Z,{onClick:function(){t(!0)},children:"Open Child Modal"}),(0,F.jsx)(j.Z,{open:o,onClose:s,"aria-labelledby":"child-modal-title","aria-describedby":"child-modal-description",children:(0,F.jsxs)(H.Z,{sx:g()(g()({},z),{},{width:200}),children:[a||(a=(0,F.jsx)("h2",{id:"child-modal-title",children:"Text in a child modal"})),i||(i=(0,F.jsx)("p",{id:"child-modal-description",children:"Lorem ipsum, dolor sit amet consectetur adipisicing elit."})),(0,F.jsx)(R.Z,{onClick:s,children:"Close Child Modal"})]})})]})}var E=o(83120),I=o(97883),N={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:400,bgcolor:"background.paper",border:"2px solid #000",boxShadow:24,p:4},_=o(61916),V=["children","in","onClick","onEnter","onExited","ownerState"],q=y.forwardRef(function(n,e){var o=n.children,t=n.in,a=n.onClick,i=n.onEnter,s=n.onExited,l=(n.ownerState,(0,_.Z)(n,V)),r=(0,O.useSpring)({from:{opacity:0},to:{opacity:t?1:0},onStart:function(){t&&i&&i(null,!0)},onRest:function(){!t&&s&&s(null,!0)}});return(0,F.jsx)(O.animated.div,g()(g()({ref:e,style:r},l),{},{children:y.cloneElement(o,{onClick:a})}))}),W={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:400,bgcolor:"background.paper",border:"2px solid #000",boxShadow:24,p:4},K={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:400,bgcolor:"background.paper",border:"2px solid #000",boxShadow:24,p:4},U=o(27146),G={en:{description:"The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.",location:"/docs/data/material/components/modal/modal.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>Modal</h1><p class="description">The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.</p>\n\n<p>The component renders its <code>children</code> node in front of a backdrop component.\nThe <code>Modal</code> offers important features:</p>\n<ul>\n<li>\uD83D\uDC84 Manages modal stacking when one-at-a-time just isn&#39;t enough.</li>\n<li>\uD83D\uDD10 Creates a backdrop, for disabling interaction below the modal.</li>\n<li>\uD83D\uDD10 It disables scrolling of the page content while open.</li>\n<li>♿️ It properly manages focus; moving to the modal content,\nand keeping it there until the modal is closed.</li>\n<li>♿️ Adds the appropriate ARIA roles automatically.</li>\n</ul>\n',{component:"@mui/docs/ComponentLinkHeader",design:!1},'<aside class="MuiCallout-root MuiCallout-info">\n            <div class="MuiCallout-icon-container">\n<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon">\n<use class="MuiCode-copied-icon" xlink:href="#info-icon" />\n</svg>\n</div>\n            <div class="MuiCallout-content">\n            <p>The term &quot;modal&quot; is sometimes used to mean &quot;dialog&quot;, but this is a misnomer.\nA modal window describes parts of a UI.\nAn element is considered modal if <a href="https://en.wikipedia.org/wiki/Modal_window">it blocks interaction with the rest of the application</a>.</p>\n\n</div></aside><p>If you are creating a modal dialog, you probably want to use the <a href="/material-ui/react-dialog/">Dialog</a> component rather than directly using Modal.\nModal is a lower-level construct that is leveraged by the following components:</p>\n<ul>\n<li><a href="/material-ui/react-dialog/">Dialog</a></li>\n<li><a href="/material-ui/react-drawer/">Drawer</a></li>\n<li><a href="/material-ui/react-menu/">Menu</a></li>\n<li><a href="/material-ui/react-popover/">Popover</a></li>\n</ul>\n<h2 id="basic-modal"><a href="#basic-modal" class="title-link-to-anchor">Basic modal<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-modal"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"BasicModal.js"},'<p>Notice that you can disable the outline (often blue or gold) with the <code>outline: 0</code> CSS property.</p>\n<h2 id="nested-modal"><a href="#nested-modal" class="title-link-to-anchor">Nested modal<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="nested-modal"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Modals can be nested, for example a select within a dialog, but stacking of more than two modals, or any two modals with a backdrop is discouraged.</p>\n',{demo:"NestedModal.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 modal can be animated with a transition component.\nThis component should respect the following conditions:</p>\n<ul>\n<li>Be a direct child descendent of the modal.</li>\n<li>Have an <code>in</code> prop. This corresponds to the open/close state.</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 modal to unmount the child content when closed and fully transitioned.</li>\n</ul>\n<p>Modal has built-in support for <a href="https://github.com/reactjs/react-transition-group">react-transition-group</a>.</p>\n',{demo:"TransitionsModal.js"},'<p>Alternatively, you can use <a href="https://github.com/pmndrs/react-spring">react-spring</a>.</p>\n',{demo:"SpringModal.js"},'<h2 id="performance"><a href="#performance" class="title-link-to-anchor">Performance<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="performance"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>The content of modal is unmounted when closed.\nIf you need to make the content available to search engines or render expensive component trees inside your modal while optimizing for interaction responsiveness\nit might be a good idea to change this default behavior by enabling the <code>keepMounted</code> prop:</p>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Modal</span></span> <span class="token attr-name">keepMounted</span> <span class="token punctuation">/></span></span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>\n',{demo:"KeepMountedModal.js",defaultCodeOpen:!1},'<p>As with any performance optimization, this is not a silver bullet.\nBe sure to identify bottlenecks first, and then try out these optimization strategies.</p>\n<h2 id="server-side-modal"><a href="#server-side-modal" class="title-link-to-anchor">Server-side modal<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="server-side-modal"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>React <a href="https://github.com/facebook/react/issues/13097">doesn&#39;t support</a> the <a href="https://react.dev/reference/react-dom/createPortal"><code>createPortal()</code></a> API on the server.\nIn order to display the modal, you need to disable the portal feature with the <code>disablePortal</code> prop:</p>\n',{demo:"ServerModal.js"},'<h2 id="limitations"><a href="#limitations" class="title-link-to-anchor">Limitations<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="limitations"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><h3 id="focus-trap"><a href="#focus-trap" class="title-link-to-anchor">Focus trap<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="focus-trap"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>The modal moves the focus back to the body of the component if the focus tries to escape it.</p>\n<p>This is done for accessibility purposes. However, it might create issues.\nIn the event the users need to interact with another part of the page, for example with a chatbot window, you can disable the behavior:</p>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Modal</span></span> <span class="token attr-name">disableEnforceFocus</span> <span class="token punctuation">/></span></span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>\n<h2 id="accessibility"><a href="#accessibility" class="title-link-to-anchor">Accessibility<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="accessibility"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>(WAI-ARIA: <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" target="_blank" rel="noopener nofollow">https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/</a>)</p>\n<ul>\n<li><p>Be sure to add <code>aria-labelledby=&quot;id...&quot;</code>, referencing the modal title, to the <code>Modal</code>.\nAdditionally, you may give a description of your modal with the <code>aria-describedby=&quot;id...&quot;</code> prop on the <code>Modal</code>.</p>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Modal</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modal-title<span class="token punctuation">"</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modal-description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modal-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>My Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modal-description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>My Description<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Modal</span></span><span class="token punctuation">></span></span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>\n</li>\n<li><p>The <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/" target="_blank" rel="noopener nofollow">WAI-ARIA Authoring Practices</a> can help you set the initial focus on the most relevant element, based on your modal content.</p>\n</li>\n<li><p>Keep in mind that a &quot;modal window&quot; overlays on either the primary window or another modal window. Windows under a modal are <strong>inert</strong>. That is, users cannot interact with content outside an active modal window. This might create <a href="#focus-trap">conflicting behaviors</a>.</p>\n</li>\n</ul>\n','<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-modal/">Base\xa0UI\xa0Modal</a> for complete ownership of the component&#39;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/modal/"><code>&lt;Modal /&gt;</code></a></li>\n</ul>\n'],toc:[{text:"Basic modal",level:2,hash:"basic-modal",children:[]},{text:"Nested modal",level:2,hash:"nested-modal",children:[]},{text:"Transitions",level:2,hash:"transitions",children:[]},{text:"Performance",level:2,hash:"performance",children:[]},{text:"Server-side modal",level:2,hash:"server-side-modal",children:[]},{text:"Limitations",level:2,hash:"limitations",children:[{text:"Focus trap",level:3,hash:"focus-trap"}]},{text:"Accessibility",level:2,hash:"accessibility",children:[]},{text:"Unstyled",level:2,hash:"unstyled",children:[]},{text:"API",level:2,hash:"api",children:[]}],title:"React Modal component",headers:{productId:"material-ui",title:"React Modal component",components:["Modal"],githubLabel:"component: modal",waiAria:"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/",unstyled:"/base-ui/react-modal/",githubSource:"packages/mui-material/src/Modal",hooks:[]}}},$={"BasicModal.js":{module:"./BasicModal.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\nimport Modal from '@mui/material/Modal';\n\nconst style = {\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  p: 4,\n};\n\nexport default function BasicModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => setOpen(true);\n  const handleClose = () => setOpen(false);\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        open={open}\n        onClose={handleClose}\n        aria-labelledby=\"modal-modal-title\"\n        aria-describedby=\"modal-modal-description\"\n      >\n        <Box sx={style}>\n          <Typography id=\"modal-modal-title\" variant=\"h6\" component=\"h2\">\n            Text in a modal\n          </Typography>\n          <Typography id=\"modal-modal-description\" sx={{ mt: 2 }}>\n            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n          </Typography>\n        </Box>\n      </Modal>\n    </div>\n  );\n}\n",jsxPreview:'<Button onClick={handleOpen}>Open modal</Button>\n<Modal\n  open={open}\n  onClose={handleClose}\n  aria-labelledby="modal-modal-title"\n  aria-describedby="modal-modal-description"\n>\n  <Box sx={style}>\n    <Typography id="modal-modal-title" variant="h6" component="h2">\n      Text in a modal\n    </Typography>\n    <Typography id="modal-modal-description" sx={{ mt: 2 }}>\n      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n    </Typography>\n  </Box>\n</Modal>',moduleTS:"./BasicModal.js",rawTS:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\nimport Modal from '@mui/material/Modal';\n\nconst style = {\n  position: 'absolute' as 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  p: 4,\n};\n\nexport default function BasicModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => setOpen(true);\n  const handleClose = () => setOpen(false);\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        open={open}\n        onClose={handleClose}\n        aria-labelledby=\"modal-modal-title\"\n        aria-describedby=\"modal-modal-description\"\n      >\n        <Box sx={style}>\n          <Typography id=\"modal-modal-title\" variant=\"h6\" component=\"h2\">\n            Text in a modal\n          </Typography>\n          <Typography id=\"modal-modal-description\" sx={{ mt: 2 }}>\n            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n          </Typography>\n        </Box>\n      </Modal>\n    </div>\n  );\n}\n"},"NestedModal.js":{module:"./NestedModal.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Modal from '@mui/material/Modal';\nimport Button from '@mui/material/Button';\n\nconst style = {\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  pt: 2,\n  px: 4,\n  pb: 3,\n};\n\nfunction ChildModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => {\n    setOpen(true);\n  };\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  return (\n    <React.Fragment>\n      <Button onClick={handleOpen}>Open Child Modal</Button>\n      <Modal\n        open={open}\n        onClose={handleClose}\n        aria-labelledby=\"child-modal-title\"\n        aria-describedby=\"child-modal-description\"\n      >\n        <Box sx={{ ...style, width: 200 }}>\n          <h2 id=\"child-modal-title\">Text in a child modal</h2>\n          <p id=\"child-modal-description\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit.\n          </p>\n          <Button onClick={handleClose}>Close Child Modal</Button>\n        </Box>\n      </Modal>\n    </React.Fragment>\n  );\n}\n\nexport default function NestedModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => {\n    setOpen(true);\n  };\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        open={open}\n        onClose={handleClose}\n        aria-labelledby=\"parent-modal-title\"\n        aria-describedby=\"parent-modal-description\"\n      >\n        <Box sx={{ ...style, width: 400 }}>\n          <h2 id=\"parent-modal-title\">Text in a modal</h2>\n          <p id=\"parent-modal-description\">\n            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n          </p>\n          <ChildModal />\n        </Box>\n      </Modal>\n    </div>\n  );\n}\n",jsxPreview:'<Button onClick={handleOpen}>Open modal</Button>\n<Modal\n  open={open}\n  onClose={handleClose}\n  aria-labelledby="parent-modal-title"\n  aria-describedby="parent-modal-description"\n>\n  <Box sx={{ ...style, width: 400 }}>\n    <h2 id="parent-modal-title">Text in a modal</h2>\n    <p id="parent-modal-description">\n      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n    </p>\n    <ChildModal />\n  </Box>\n</Modal>',moduleTS:"./NestedModal.js",rawTS:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Modal from '@mui/material/Modal';\nimport Button from '@mui/material/Button';\n\nconst style = {\n  position: 'absolute' as 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  pt: 2,\n  px: 4,\n  pb: 3,\n};\n\nfunction ChildModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => {\n    setOpen(true);\n  };\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  return (\n    <React.Fragment>\n      <Button onClick={handleOpen}>Open Child Modal</Button>\n      <Modal\n        open={open}\n        onClose={handleClose}\n        aria-labelledby=\"child-modal-title\"\n        aria-describedby=\"child-modal-description\"\n      >\n        <Box sx={{ ...style, width: 200 }}>\n          <h2 id=\"child-modal-title\">Text in a child modal</h2>\n          <p id=\"child-modal-description\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit.\n          </p>\n          <Button onClick={handleClose}>Close Child Modal</Button>\n        </Box>\n      </Modal>\n    </React.Fragment>\n  );\n}\n\nexport default function NestedModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => {\n    setOpen(true);\n  };\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        open={open}\n        onClose={handleClose}\n        aria-labelledby=\"parent-modal-title\"\n        aria-describedby=\"parent-modal-description\"\n      >\n        <Box sx={{ ...style, width: 400 }}>\n          <h2 id=\"parent-modal-title\">Text in a modal</h2>\n          <p id=\"parent-modal-description\">\n            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n          </p>\n          <ChildModal />\n        </Box>\n      </Modal>\n    </div>\n  );\n}\n"},"TransitionsModal.js":{module:"./TransitionsModal.js",raw:"import * as React from 'react';\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport Modal from '@mui/material/Modal';\nimport Fade from '@mui/material/Fade';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\n\nconst style = {\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  p: 4,\n};\n\nexport default function TransitionsModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => setOpen(true);\n  const handleClose = () => setOpen(false);\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        aria-labelledby=\"transition-modal-title\"\n        aria-describedby=\"transition-modal-description\"\n        open={open}\n        onClose={handleClose}\n        closeAfterTransition\n        slots={{ backdrop: Backdrop }}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n      >\n        <Fade in={open}>\n          <Box sx={style}>\n            <Typography id=\"transition-modal-title\" variant=\"h6\" component=\"h2\">\n              Text in a modal\n            </Typography>\n            <Typography id=\"transition-modal-description\" sx={{ mt: 2 }}>\n              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n            </Typography>\n          </Box>\n        </Fade>\n      </Modal>\n    </div>\n  );\n}\n",moduleTS:"./TransitionsModal.js",rawTS:"import * as React from 'react';\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport Modal from '@mui/material/Modal';\nimport Fade from '@mui/material/Fade';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\n\nconst style = {\n  position: 'absolute' as 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  p: 4,\n};\n\nexport default function TransitionsModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => setOpen(true);\n  const handleClose = () => setOpen(false);\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        aria-labelledby=\"transition-modal-title\"\n        aria-describedby=\"transition-modal-description\"\n        open={open}\n        onClose={handleClose}\n        closeAfterTransition\n        slots={{ backdrop: Backdrop }}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n      >\n        <Fade in={open}>\n          <Box sx={style}>\n            <Typography id=\"transition-modal-title\" variant=\"h6\" component=\"h2\">\n              Text in a modal\n            </Typography>\n            <Typography id=\"transition-modal-description\" sx={{ mt: 2 }}>\n              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n            </Typography>\n          </Box>\n        </Fade>\n      </Modal>\n    </div>\n  );\n}\n"},"SpringModal.js":{module:"./SpringModal.js",raw:"import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport Modal from '@mui/material/Modal';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\nimport { useSpring, animated } from '@react-spring/web';\n\nconst Fade = React.forwardRef(function Fade(props, ref) {\n  const {\n    children,\n    in: open,\n    onClick,\n    onEnter,\n    onExited,\n    ownerState,\n    ...other\n  } = props;\n  const style = useSpring({\n    from: { opacity: 0 },\n    to: { opacity: open ? 1 : 0 },\n    onStart: () => {\n      if (open && onEnter) {\n        onEnter(null, true);\n      }\n    },\n    onRest: () => {\n      if (!open && onExited) {\n        onExited(null, true);\n      }\n    },\n  });\n\n  return (\n    <animated.div ref={ref} style={style} {...other}>\n      {React.cloneElement(children, { onClick })}\n    </animated.div>\n  );\n});\n\nFade.propTypes = {\n  children: PropTypes.element.isRequired,\n  in: PropTypes.bool,\n  onClick: PropTypes.any,\n  onEnter: PropTypes.func,\n  onExited: PropTypes.func,\n  ownerState: PropTypes.any,\n};\n\nconst style = {\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  p: 4,\n};\n\nexport default function SpringModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => setOpen(true);\n  const handleClose = () => setOpen(false);\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        aria-labelledby=\"spring-modal-title\"\n        aria-describedby=\"spring-modal-description\"\n        open={open}\n        onClose={handleClose}\n        closeAfterTransition\n        slots={{ backdrop: Backdrop }}\n        slotProps={{\n          backdrop: {\n            TransitionComponent: Fade,\n          },\n        }}\n      >\n        <Fade in={open}>\n          <Box sx={style}>\n            <Typography id=\"spring-modal-title\" variant=\"h6\" component=\"h2\">\n              Text in a modal\n            </Typography>\n            <Typography id=\"spring-modal-description\" sx={{ mt: 2 }}>\n              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n            </Typography>\n          </Box>\n        </Fade>\n      </Modal>\n    </div>\n  );\n}\n",moduleTS:"./SpringModal.js",rawTS:"import * as React from 'react';\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport Modal from '@mui/material/Modal';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\nimport { useSpring, animated } from '@react-spring/web';\n\ninterface FadeProps {\n  children: React.ReactElement<any>;\n  in?: boolean;\n  onClick?: any;\n  onEnter?: (node: HTMLElement, isAppearing: boolean) => void;\n  onExited?: (node: HTMLElement, isAppearing: boolean) => void;\n  ownerState?: any;\n}\n\nconst Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, ref) {\n  const {\n    children,\n    in: open,\n    onClick,\n    onEnter,\n    onExited,\n    ownerState,\n    ...other\n  } = props;\n  const style = useSpring({\n    from: { opacity: 0 },\n    to: { opacity: open ? 1 : 0 },\n    onStart: () => {\n      if (open && onEnter) {\n        onEnter(null as any, true);\n      }\n    },\n    onRest: () => {\n      if (!open && onExited) {\n        onExited(null as any, true);\n      }\n    },\n  });\n\n  return (\n    <animated.div ref={ref} style={style} {...other}>\n      {React.cloneElement(children, { onClick })}\n    </animated.div>\n  );\n});\n\nconst style = {\n  position: 'absolute' as 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  p: 4,\n};\n\nexport default function SpringModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => setOpen(true);\n  const handleClose = () => setOpen(false);\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        aria-labelledby=\"spring-modal-title\"\n        aria-describedby=\"spring-modal-description\"\n        open={open}\n        onClose={handleClose}\n        closeAfterTransition\n        slots={{ backdrop: Backdrop }}\n        slotProps={{\n          backdrop: {\n            TransitionComponent: Fade,\n          },\n        }}\n      >\n        <Fade in={open}>\n          <Box sx={style}>\n            <Typography id=\"spring-modal-title\" variant=\"h6\" component=\"h2\">\n              Text in a modal\n            </Typography>\n            <Typography id=\"spring-modal-description\" sx={{ mt: 2 }}>\n              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n            </Typography>\n          </Box>\n        </Fade>\n      </Modal>\n    </div>\n  );\n}\n"},"KeepMountedModal.js":{module:"./KeepMountedModal.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Modal from '@mui/material/Modal';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\n\nconst style = {\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  p: 4,\n};\n\nexport default function KeepMountedModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => setOpen(true);\n  const handleClose = () => setOpen(false);\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        keepMounted\n        open={open}\n        onClose={handleClose}\n        aria-labelledby=\"keep-mounted-modal-title\"\n        aria-describedby=\"keep-mounted-modal-description\"\n      >\n        <Box sx={style}>\n          <Typography id=\"keep-mounted-modal-title\" variant=\"h6\" component=\"h2\">\n            Text in a modal\n          </Typography>\n          <Typography id=\"keep-mounted-modal-description\" sx={{ mt: 2 }}>\n            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n          </Typography>\n        </Box>\n      </Modal>\n    </div>\n  );\n}\n",moduleTS:"./KeepMountedModal.js",rawTS:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Modal from '@mui/material/Modal';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\n\nconst style = {\n  position: 'absolute' as 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: 400,\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  boxShadow: 24,\n  p: 4,\n};\n\nexport default function KeepMountedModal() {\n  const [open, setOpen] = React.useState(false);\n  const handleOpen = () => setOpen(true);\n  const handleClose = () => setOpen(false);\n\n  return (\n    <div>\n      <Button onClick={handleOpen}>Open modal</Button>\n      <Modal\n        keepMounted\n        open={open}\n        onClose={handleClose}\n        aria-labelledby=\"keep-mounted-modal-title\"\n        aria-describedby=\"keep-mounted-modal-description\"\n      >\n        <Box sx={style}>\n          <Typography id=\"keep-mounted-modal-title\" variant=\"h6\" component=\"h2\">\n            Text in a modal\n          </Typography>\n          <Typography id=\"keep-mounted-modal-description\" sx={{ mt: 2 }}>\n            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n          </Typography>\n        </Box>\n      </Modal>\n    </div>\n  );\n}\n"},"ServerModal.js":{module:"./ServerModal.js",raw:"import * as React from 'react';\nimport Modal from '@mui/material/Modal';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\n\nexport default function ServerModal() {\n  const rootRef = React.useRef(null);\n\n  return (\n    <Box\n      sx={{\n        height: 300,\n        flexGrow: 1,\n        minWidth: 300,\n        transform: 'translateZ(0)',\n      }}\n      ref={rootRef}\n    >\n      <Modal\n        disablePortal\n        disableEnforceFocus\n        disableAutoFocus\n        open\n        aria-labelledby=\"server-modal-title\"\n        aria-describedby=\"server-modal-description\"\n        sx={{\n          display: 'flex',\n          p: 1,\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n        container={() => rootRef.current}\n      >\n        <Box\n          sx={(theme) => ({\n            position: 'relative',\n            width: 400,\n            bgcolor: 'background.paper',\n            border: '2px solid #000',\n            boxShadow: theme.shadows[5],\n            p: 4,\n          })}\n        >\n          <Typography id=\"server-modal-title\" variant=\"h6\" component=\"h2\">\n            Server-side modal\n          </Typography>\n          <Typography id=\"server-modal-description\" sx={{ pt: 2 }}>\n            If you disable JavaScript, you will still see me.\n          </Typography>\n        </Box>\n      </Modal>\n    </Box>\n  );\n}\n",moduleTS:"./ServerModal.js",rawTS:"import * as React from 'react';\nimport Modal from '@mui/material/Modal';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\n\nexport default function ServerModal() {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <Box\n      sx={{\n        height: 300,\n        flexGrow: 1,\n        minWidth: 300,\n        transform: 'translateZ(0)',\n      }}\n      ref={rootRef}\n    >\n      <Modal\n        disablePortal\n        disableEnforceFocus\n        disableAutoFocus\n        open\n        aria-labelledby=\"server-modal-title\"\n        aria-describedby=\"server-modal-description\"\n        sx={{\n          display: 'flex',\n          p: 1,\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n        container={() => rootRef.current!}\n      >\n        <Box\n          sx={(theme) => ({\n            position: 'relative',\n            width: 400,\n            bgcolor: 'background.paper',\n            border: '2px solid #000',\n            boxShadow: theme.shadows[5],\n            p: 4,\n          })}\n        >\n          <Typography id=\"server-modal-title\" variant=\"h6\" component=\"h2\">\n            Server-side modal\n          </Typography>\n          <Typography id=\"server-modal-description\" sx={{ pt: 2 }}>\n            If you disable JavaScript, you will still see me.\n          </Typography>\n        </Box>\n      </Modal>\n    </Box>\n  );\n}\n"}};$.scope={process:{},import:{react:x,"@mui/material/Box":k,"@mui/material/Button":C,"@mui/material/Typography":M,"@mui/material/Modal":u,"@mui/material/Backdrop":B,"@mui/material/Fade":S,"prop-types":Z,"@react-spring/web":O}};var J={"./BasicModal.js":function(){var n=y.useState(!1),e=(0,A.Z)(n,2),o=e[0],a=e[1];return(0,F.jsxs)("div",{children:[(0,F.jsx)(R.Z,{onClick:function(){return a(!0)},children:"Open modal"}),(0,F.jsx)(j.Z,{open:o,onClose:function(){return a(!1)},"aria-labelledby":"modal-modal-title","aria-describedby":"modal-modal-description",children:(0,F.jsxs)(H.Z,{sx:P,children:[t||(t=(0,F.jsx)(D.Z,{id:"modal-modal-title",variant:"h6",component:"h2",children:"Text in a modal"})),(0,F.jsx)(D.Z,{id:"modal-modal-description",sx:{mt:2},children:"Duis mollis, est non commodo luctus, nisi erat porttitor ligula."})]})})]})},"./NestedModal.js":function(){var n=y.useState(!1),e=(0,A.Z)(n,2),o=e[0],t=e[1];return(0,F.jsxs)("div",{children:[(0,F.jsx)(R.Z,{onClick:function(){t(!0)},children:"Open modal"}),(0,F.jsx)(j.Z,{open:o,onClose:function(){t(!1)},"aria-labelledby":"parent-modal-title","aria-describedby":"parent-modal-description",children:(0,F.jsxs)(H.Z,{sx:g()(g()({},z),{},{width:400}),children:[s||(s=(0,F.jsx)("h2",{id:"parent-modal-title",children:"Text in a modal"})),l||(l=(0,F.jsx)("p",{id:"parent-modal-description",children:"Duis mollis, est non commodo luctus, nisi erat porttitor ligula."})),r||(r=(0,F.jsx)(L,{}))]})})]})},"./TransitionsModal.js":function(){var n=y.useState(!1),e=(0,A.Z)(n,2),o=e[0],t=e[1];return(0,F.jsxs)("div",{children:[(0,F.jsx)(R.Z,{onClick:function(){return t(!0)},children:"Open modal"}),(0,F.jsx)(j.Z,{"aria-labelledby":"transition-modal-title","aria-describedby":"transition-modal-description",open:o,onClose:function(){return t(!1)},closeAfterTransition:!0,slots:{backdrop:E.Z},slotProps:{backdrop:{timeout:500}},children:(0,F.jsx)(I.Z,{in:o,children:(0,F.jsxs)(H.Z,{sx:N,children:[c||(c=(0,F.jsx)(D.Z,{id:"transition-modal-title",variant:"h6",component:"h2",children:"Text in a modal"})),(0,F.jsx)(D.Z,{id:"transition-modal-description",sx:{mt:2},children:"Duis mollis, est non commodo luctus, nisi erat porttitor ligula."})]})})})]})},"./SpringModal.js":function(){var n=y.useState(!1),e=(0,A.Z)(n,2),o=e[0],t=e[1];return(0,F.jsxs)("div",{children:[(0,F.jsx)(R.Z,{onClick:function(){return t(!0)},children:"Open modal"}),(0,F.jsx)(j.Z,{"aria-labelledby":"spring-modal-title","aria-describedby":"spring-modal-description",open:o,onClose:function(){return t(!1)},closeAfterTransition:!0,slots:{backdrop:E.Z},slotProps:{backdrop:{TransitionComponent:q}},children:(0,F.jsx)(q,{in:o,children:(0,F.jsxs)(H.Z,{sx:W,children:[d||(d=(0,F.jsx)(D.Z,{id:"spring-modal-title",variant:"h6",component:"h2",children:"Text in a modal"})),(0,F.jsx)(D.Z,{id:"spring-modal-description",sx:{mt:2},children:"Duis mollis, est non commodo luctus, nisi erat porttitor ligula."})]})})})]})},"./KeepMountedModal.js":function(){var n=y.useState(!1),e=(0,A.Z)(n,2),o=e[0],t=e[1];return(0,F.jsxs)("div",{children:[(0,F.jsx)(R.Z,{onClick:function(){return t(!0)},children:"Open modal"}),(0,F.jsx)(j.Z,{keepMounted:!0,open:o,onClose:function(){return t(!1)},"aria-labelledby":"keep-mounted-modal-title","aria-describedby":"keep-mounted-modal-description",children:(0,F.jsxs)(H.Z,{sx:K,children:[p||(p=(0,F.jsx)(D.Z,{id:"keep-mounted-modal-title",variant:"h6",component:"h2",children:"Text in a modal"})),(0,F.jsx)(D.Z,{id:"keep-mounted-modal-description",sx:{mt:2},children:"Duis mollis, est non commodo luctus, nisi erat porttitor ligula."})]})})]})},"./ServerModal.js":function(){var n=y.useRef(null);return(0,F.jsx)(H.Z,{sx:{height:300,flexGrow:1,minWidth:300,transform:"translateZ(0)"},ref:n,children:(0,F.jsx)(j.Z,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,open:!0,"aria-labelledby":"server-modal-title","aria-describedby":"server-modal-description",sx:{display:"flex",p:1,alignItems:"center",justifyContent:"center"},container:function(){return n.current},children:(0,F.jsxs)(H.Z,{sx:function(n){return{position:"relative",width:400,bgcolor:"background.paper",border:"2px solid #000",boxShadow:n.shadows[5],p:4}},children:[m||(m=(0,F.jsx)(D.Z,{id:"server-modal-title",variant:"h6",component:"h2",children:"Server-side modal"})),(0,F.jsx)(D.Z,{id:"server-modal-description",sx:{pt:2},children:"If you disable JavaScript, you will still see me."})]})})})}},X={"@mui/docs/ComponentLinkHeader":U.Z};function Q(){return(0,F.jsx)(b.Z,g()({},h))}Q.getLayout=function(n){return(0,F.jsx)(v.ZP,{children:n})}},98268:function(n,e,o){"use strict";o.d(e,{H:function(){return u},Z:function(){return f}});var t=o(28990),a=o(32970),i=o.n(a);o(92379);var s=o(72523),l=o(7285),r=o(15224),c=o(17125),d=o(11516),p=o(93115),m=o(651),u=50,h=(0,l.ZP)(p.r)(function(n){var e=n.theme;return i()({minHeight:30,minWidth:0,padding:e.spacing(.5,1),border:"1px solid",borderColor:"transparent",fontFamily:e.typography.fontFamily,fontWeight:e.typography.fontWeightSemiBold,fontSize:e.typography.pxToRem(14),color:(e.vars||e).palette.text.secondary,borderRadius:"8px","&:hover":{background:(e.vars||e).palette.grey[50],borderColor:(e.vars||e).palette.divider,color:(e.vars||e).palette.text.primary}},e.applyDarkStyles({"&:hover":{borderColor:(e.vars||e).palette.divider,background:(e.vars||e).palette.primaryDark[700]},"&.Mui-selected":{color:(e.vars||e).palette.primary[300]}}))});function f(n){var e,o=n.activeTab,a=n.children,l=n.markdown.headers,p=(0,s.useRouter)(),u=(0,d.qM)(),f=p.pathname.endsWith("[docsTab]")?p.pathname.replace("[docsTab]",""):p.pathname,g="".concat(f.endsWith("/")?f:"".concat(f,"/")),y={"":"62px","components-api":"127px","hooks-api":"86px"}[o],x={"":"1px","components-api":"67px","hooks-api":"198px"}[o],b=[{key:"",label:u("api-docs.demos"),href:f}].concat((0,t.Z)((null==(e=l.components)?void 0:e.length)>0?[{key:"components-api",label:u("api-docs.componentsApi"),href:"".concat(g,"components-api")}]:[]),(0,t.Z)(l.hooks&&l.hooks.length>0?[{key:"hooks-api",label:u("api-docs.hooksApi"),href:"".concat(g,"hooks-api")}]:[]));return(0,m.jsxs)(c.Z,{className:"component-tabs",sx:{display:"inline"},children:[(0,m.jsx)(c.Z,{component:"nav",className:"component-tabs",sx:function(n){return i()({width:"100%",position:"sticky",top:57,mt:2,backdropFilter:"blur(8px)",backgroundColor:"rgba(255,255,255,0.8)",borderBottom:1,borderColor:"divider",zIndex:1e3,display:"inline-flex",py:1,gap:.5,"&::before":{content:"''",position:"absolute",bottom:0,left:x,width:y,height:"2px",backgroundColor:"primary.light"}},n.applyDarkStyles({backgroundColor:(0,r.Fq)(n.palette.primaryDark[900],.7)}))},children:b.map(function(n){return(0,m.jsx)(h,{href:n.href,"aria-current":o===n.key?"page":void 0,className:n.key.includes("api")?"skip-algolia-crawler":"",sx:{color:o===n.key?"primary.main":"inherit"},children:n.label},n.key)})}),a]})}},45703:function(n,e,o){"use strict";o.d(e,{Z:function(){return $}});var t,a,i,s,l,r,c,d=o(28990),p=o(13949),m=o(9984),u=o.n(m),h=o(32970),f=o.n(h),g=o(92379),y=o(39519),x=o.n(y),b=o(72523),v=o(96689),k=o.n(v),C=o(56991),M=o(92359),w=o(79267),j=o(11516),T=o(11522),B=o(27111),S=o(8418),Z=o(51015),O=o(45765),A=o(23351),H=o(18097),R=o(62170),D=o(55593),F=o(30013),P=o(651);function z(n){var e,o=n.hash,t=n.title,a=n.level,i=(0,j.qM)();return(0,P.jsx)(T.N,{title:(e={demos:i("api-docs.demos"),import:i("api-docs.import"),props:i("api-docs.props"),"theme-default-props":i("api-docs.themeDefaultProps"),inheritance:i("api-docs.inheritance"),slots:i("api-docs.slots"),classes:i("api-docs.classes"),css:i("api-docs.css")})[o]||t&&e[t]||t||o,hash:o,level:void 0===a?"h2":a})}function L(n){var e=n.descriptions,o=n.pageContents,l=n.defaultLayout,r=void 0===l?"table":l,c=n.layoutStorageKey,p=void 0===c?D.aB:c,m=(0,j.qM)(),h=(0,j.fO)(),f=(0,b.useRouter)();return g.useEffect(function(){var n=f.asPath.indexOf("#")>=0?f.asPath.split("#")[1]:null;f.isReady&&n&&n.indexOf("-unstyled")>=0&&f.replace({hash:"".concat(n.replace("-unstyled",""))},void 0,{shallow:!0})},[f]),u()(o).map(function(n){var l=o[n],c=l.cssComponent,u=l.filename,f=l.forwardsRefTo,y=l.inheritance,x=l.name,b=l.props,v=l.spread,C=l.slots,M=l.classes,w=l.imports,j=(0,d.Z)(M).sort(function(n,e){return n.className.localeCompare(e.className)}),T=e[n][h],D=T.classDescriptions,L=T.propDescriptions,E=T.slotDescriptions,I=u.includes("mui-joy"),N=u.includes("mui-base"),_="";I?_="/joy-ui/customization/overriding-component-structure/":N&&(_="/base-ui/guides/overriding-component-structure/");var V=m("api-docs.refRootElement");null==f&&(V=m("api-docs.refNotHeld"));var q="";v&&(q=m("api-docs.spreadHint").replace(/{{spreadHintElement}}/,y?'<a href="'.concat(y.pathname,'">').concat(y.component,"</a>"):m("api-docs.nativeElement")));var W="";y&&"Transition"===y.component&&(W=m("api-docs.inheritanceSuffixTransition"));var K=k()(x),U=w.join("\n// ".concat(m("or"),"\n"));return(0,P.jsxs)(g.Fragment,{children:[(0,P.jsxs)(S.G,{children:[(0,P.jsx)(z,{hash:K,title:"".concat(x," API")}),(0,P.jsx)(z,{title:"import",hash:"".concat(K,"-import"),level:"h3"}),(0,P.jsx)(B.HighlightedCode,{code:U,language:"jsx"}),w.length>1&&(0,P.jsx)("p",{dangerouslySetInnerHTML:{__html:m("api-docs.importDifference")}}),(0,P.jsx)(Z.Z,{properties:(0,H.fu)({componentName:l.name,properties:b,propertiesDescriptions:L}),spreadHint:q,level:"h3",titleHash:"".concat(K,"-props"),defaultLayout:r,layoutStorageKey:p.props}),t||(t=(0,P.jsx)("br",{})),c&&(0,P.jsxs)(g.Fragment,{children:[(0,P.jsx)("span",{dangerouslySetInnerHTML:{__html:m("api-docs.cssComponent").replace(/{{name}}/,l.name)}}),a||(a=(0,P.jsx)("br",{})),i||(i=(0,P.jsx)("br",{}))]}),(0,P.jsx)("div",{className:"MuiCallout-root MuiCallout-info",dangerouslySetInnerHTML:{__html:V},style:{alignItems:"baseline",gap:"4px",marginTop:0}}),y&&(0,P.jsxs)(g.Fragment,{children:[(0,P.jsx)(z,{title:"inheritance",hash:"".concat(K,"-inheritance"),level:"h3"}),(0,P.jsx)("span",{dangerouslySetInnerHTML:{__html:m("api-docs.inheritanceDescription").replace(/{{component}}/,y.component).replace(/{{pathname}}/,y.pathname).replace(/{{suffix}}/,W).replace(/{{name}}/,l.name)}})]}),l.themeDefaultProps&&(0,P.jsxs)(g.Fragment,{children:[(0,P.jsx)(z,{title:"theme-default-props",hash:"".concat(x,"-theme-default-props"),level:"h4"}),(0,P.jsx)("span",{dangerouslySetInnerHTML:{__html:m("api-docs.themeDefaultPropsDescription").replace(/{{muiName}}/,l.muiName).replace(/{{defaultPropsLink}}/,I?"/joy-ui/customization/themed-components/#theme-default-props":"/material-ui/customization/theme-components/#theme-default-props")}})]}),(0,P.jsx)(A.Z,{slots:(0,F.s)({componentSlots:C,slotDescriptions:E,componentName:x}),titleHash:"".concat(K,"-slots"),level:"h3",spreadHint:_&&m("api-docs.slotDescription").replace(/{{slotGuideLink}}/,_),defaultLayout:r,layoutStorageKey:p.slots}),(0,P.jsx)(O.Z,{classes:(0,R.m)({componentClasses:j,componentName:l.name,classDescriptions:D}),spreadHint:m("api-docs.classesDescription"),titleHash:"".concat(K,"-classes"),level:"h3",defaultLayout:r,layoutStorageKey:p.classes})]}),(0,P.jsx)("svg",{style:{display:"none"},xmlns:"http://www.w3.org/2000/svg",children:s||(s=(0,P.jsx)("symbol",{id:"anchor-link-icon",viewBox:"0 0 16 16",children:(0,P.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(n))})}function E(n){var e,o=n.hash,t=n.title,a=n.level,i=(0,j.qM)();return(0,P.jsx)(T.N,{title:(e={demos:i("api-docs.demos"),import:i("api-docs.import"),"hook-name":i("api-docs.hookName"),parameters:i("api-docs.parameters"),"return-value":i("api-docs.returnValue")})[o]||t&&e[t]||t||o,hash:o,level:void 0===a?"h2":a})}function I(n){var e=n.descriptions,o=n.pagesContents,t=n.defaultLayout,a=void 0===t?"table":t,i=n.layoutStorageKey,s=void 0===i?D.aB:i,c=(0,j.fO)(),d=(0,j.qM)();return u()(o).map(function(n){var t=o[n],i=t.name,p=t.parameters,m=t.returnValue,h=t.imports,f=e[n][c],y=f.parametersDescriptions,x=f.returnValueDescriptions,b=k()(i),v=h.join("\n// ".concat(d("or"),"\n"));return(0,P.jsxs)(g.Fragment,{children:[(0,P.jsxs)(S.G,{children:[(0,P.jsx)(E,{hash:b,title:"".concat(i," API")}),(0,P.jsx)(E,{title:"import",hash:"".concat(b,"-import"),level:"h3"}),(0,P.jsx)(B.HighlightedCode,{code:v,language:"jsx"}),h.length>1&&(0,P.jsx)("p",{dangerouslySetInnerHTML:{__html:d("api-docs.importDifference")}}),u()(p).length>0?(0,P.jsx)(Z.Z,{properties:(0,H.Hy)({kind:"parameters",hookName:i,properties:p,translations:y}),level:"h3",title:"api-docs.parameters",titleHash:"".concat(b,"-parameters"),defaultLayout:a,layoutStorageKey:s.props}):(0,P.jsx)("span",{children:d("api-docs.hooksNoParameters")}),(0,P.jsx)(Z.Z,{properties:(0,H.Hy)({kind:"return",hookName:i,properties:m,translations:x,showOptionalAbbr:!0}),level:"h3",title:"api-docs.returnValue",titleHash:"".concat(b,"-return-value"),defaultLayout:a,layoutStorageKey:s.props}),l||(l=(0,P.jsx)("br",{}))]}),(0,P.jsx)("svg",{style:{display:"none"},xmlns:"http://www.w3.org/2000/svg",children:r||(r=(0,P.jsx)("symbol",{id:"anchor-link-icon",viewBox:"0 0 16 16",children:(0,P.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(n))})}var N=o(62956),_=o(3281),V=o(72270),q=o(10193),W=o(2689),K=o(90417),U=o(98268);function G(n){var e=n.mode,o=(0,M.tv)().setMode;return g.useEffect(function(){o(e)},[e,o]),null}function $(n){var e,o=(0,C.Z)(),t=(0,b.useRouter)(),a=g.useState(null!=(e=t.query.docsTab)?e:""),i=(0,p.Z)(a,2),s=i[0],l=i[1],r=(0,V.ln)(t.asPath).canonicalAs,m=n.disableAd,h=void 0!==m&&m,y=n.disableToc,x=n.demos,v=void 0===x?{}:x,T=n.docs,B=n.demoComponents,S=n.srcComponents,A=n.componentsApiDescriptions,H=n.componentsApiPageContents,R=n.hooksApiDescriptions,D=n.hooksApiPageContents,F=(0,j.fO)(),z=(0,j.qM)();g.useEffect(function(){var n;l(null!=(n=t.query.docsTab)?n:"")},[t.query.docsTab]);var E=T[F]||T.en,$=E.toc;function J(n,e){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},t=[];return u()(o).forEach(function(o){t.push({text:o,hash:"".concat(n,"-").concat(e,"-").concat(o),children:[]})}),{text:function(n,e){var o={demos:n("api-docs.demos"),import:n("api-docs.import"),"hook-name":n("api-docs.hookName"),parameters:n("api-docs.parameters"),"return-value":n("api-docs.returnValue")};if(!o.hasOwnProperty(e))throw TypeError("Unable to translate header '".concat(e,"'. Did you mean one of '").concat(u()(o).join("', '"),"'"));return o[e]||e}(z,e),hash:"".concat(n,"-").concat(e),children:t}}var X=[];function Q(n,e){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{inheritance:!1,themeDefaultProps:!1};return{text:(0,N.q)(z,e),hash:"".concat(n,"-").concat(e),children:[].concat((0,d.Z)(o.inheritance?[{text:z("api-docs.inheritance"),hash:"inheritance",children:[]}]:[]),(0,d.Z)(o.themeDefaultProps?[{text:z("api-docs.themeDefaultProps"),hash:"theme-default-props",children:[]}]:[]))}}D&&u()(D).forEach(function(n){var e=D[n],o=e.name,t=e.parameters,a=e.returnValue,i=k()(o),s=[J(i,"import"),J(i,"parameters",void 0===t?{}:t),J(i,"return-value",void 0===a?{}:a)].filter(Boolean);X.push({text:o,hash:i,children:s})});var Y=[];H&&u()(H).forEach(function(n){var e=A[n][F].componentDescriptionToc,o=H[n],t=o.name,a=o.slots,i=o.inheritance,s=o.themeDefaultProps,l=o.classes,r=o.props,c=k()(t),p=[Q(c,"import")].concat((0,d.Z)(void 0===e?[]:e),[(0,Z.m)({t:z,componentName:c,componentProps:r,inheritance:i,themeDefaultProps:s,hash:"".concat(c,"-props")}),(null==a?void 0:a.length)>0&&Q(c,"slots")],(0,d.Z)((0,O.A)({t:z,componentName:c,componentClasses:l,hash:"".concat(c,"-classes")}))).filter(Boolean);Y.push({text:t,hash:c,children:p})});for(var nn=r.startsWith("/joy-ui/"),ne=nn?M.lL:g.Fragment,no=nn?W.BrandingProvider:g.Fragment,nt=f()({},nn&&{mode:o.palette.mode}),na=[],ni=0,ns=!1;ni<E.rendered.length&&!ns;){var nl=E.rendered[ni];nl.component&&nl.component.indexOf("Tabs")>=0&&(ns=!0),na.push((0,P.jsx)(_.Z,{activeTab:s,demoComponents:B,demos:v,disableAd:h,localizedDoc:E,renderedMarkdownOrDemo:nl,srcComponents:S,theme:o,WrapperComponent:no,wrapperProps:nt},"common-elements-".concat(ni))),ni+=1}var nr=$;"hooks-api"===s&&(nr=X),"components-api"===s&&(nr=Y);var nc=E.rendered.some(function(n){return"object"==typeof n&&!!n.component&&"modules/components/ComponentPageTabs.js"===n.component});return(0,P.jsx)(q.Z,{cardOptions:{description:E.headers.cardDescription,title:E.headers.cardTitle},description:E.description,disableAd:h,disableToc:void 0!==y&&y,location:E.location,title:E.title,toc:nr,disableLayout:!0,hasTabs:nc,children:(0,P.jsxs)("div",{style:{"--MuiDocs-header-height":nc?"".concat(K.Hx+U.H,"px"):"".concat(K.Hx,"px")},children:[h?null:(0,P.jsx)(W.BrandingProvider,{children:(0,P.jsx)(w.hw,{classSelector:nc?".component-tabs":void 0,children:c||(c=(0,P.jsx)(w.Ad,{}))})}),(0,P.jsxs)(ne,{children:[nn&&(0,P.jsx)(G,{mode:o.palette.mode}),na,""===s&&E.rendered.slice(ni).map(function(n,e){return(0,P.jsx)(_.Z,{activeTab:s,demoComponents:B,demos:v,disableAd:h,localizedDoc:E,renderedMarkdownOrDemo:n,srcComponents:S,theme:o,WrapperComponent:no,wrapperProps:nt},"demos-section-".concat(e))}),"components-api"===s&&(0,P.jsx)(L,{descriptions:A,pageContents:H}),"hooks-api"===s&&(0,P.jsx)(I,{descriptions:R,pagesContents:D})]})]})})}G.propTypes={mode:x().oneOf(["light","dark"])}},15887:function(n,e,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/material-ui/react-modal",function(){return o(49622)}])},22981:function(n,e,o){"use strict";var t=o(22269),a=o(651);e.Z=(0,t.Z)((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(n){n.O(0,[49774,21134,97146,18987,1406,17376,74866,15686,73119,73579,56070,23075,7066,49277,99974,45769,44383,44846,90417,80295,8418,84294,31011,95490,73833,3281,62956,92888,40179],function(){return n(n.s=15887)}),_N_E=n.O()}]);