(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[75730,39519,43182],{333897:function(n,e,t){var a=t(915012),o=/^\s+/;n.exports=function(n){return n?n.slice(0,a(n)+1).replace(o,""):n}},915012:function(n){var e=/\s/;n.exports=function(n){for(var t=n.length;t--&&e.test(n.charAt(t)););return t}},889678:function(n,e,t){var a=t(706627),o=t(885365),i=t(67948),r=Math.max,s=Math.min;n.exports=function(n,e,t){var c,l,p,u,d,m,f=0,h=!1,v=!1,g=!0;if("function"!=typeof n)throw TypeError("Expected a function");function x(e){var t=c,a=l;return c=l=void 0,f=e,u=n.apply(a,t)}function y(n){var t=n-m,a=n-f;return void 0===m||t>=e||t<0||v&&a>=p}function k(){var n,t,a,i=o();if(y(i))return b(i);d=setTimeout(k,(n=i-m,t=i-f,a=e-n,v?s(a,p-t):a))}function b(n){return(d=void 0,g&&c)?x(n):(c=l=void 0,u)}function w(){var n,t=o(),a=y(t);if(c=arguments,l=this,m=t,a){if(void 0===d)return f=n=m,d=setTimeout(k,e),h?x(n):u;if(v)return clearTimeout(d),d=setTimeout(k,e),x(m)}return void 0===d&&(d=setTimeout(k,e)),u}return e=i(e)||0,a(t)&&(h=!!t.leading,p=(v="maxWait"in t)?r(i(t.maxWait)||0,e):p,g="trailing"in t?!!t.trailing:g),w.cancel=function(){void 0!==d&&clearTimeout(d),f=0,c=m=l=d=void 0},w.flush=function(){return void 0===d?u:b(o())},w}},706627:function(n){n.exports=function(n){var e=typeof n;return null!=n&&("object"==e||"function"==e)}},885365:function(n,e,t){var a=t(573401);n.exports=function(){return a.Date.now()}},123763:function(n,e,t){var a=t(889678),o=t(706627);n.exports=function(n,e,t){var i=!0,r=!0;if("function"!=typeof n)throw TypeError("Expected a function");return o(t)&&(i="leading"in t?!!t.leading:i,r="trailing"in t?!!t.trailing:r),a(n,e,{leading:i,maxWait:e,trailing:r})}},67948:function(n,e,t){var a=t(333897),o=t(706627),i=t(42848),r=0/0,s=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,l=/^0o[0-7]+$/i,p=parseInt;n.exports=function(n){if("number"==typeof n)return n;if(i(n))return r;if(o(n)){var e="function"==typeof n.valueOf?n.valueOf():n;n=o(e)?e+"":e}if("string"!=typeof n)return 0===n?n:+n;n=a(n);var t=c.test(n);return t||l.test(n)?p(n.slice(2),t?2:8):s.test(n)?r:+n}},597931:function(n,e,t){"use strict";t.r(e),t.d(e,{boxClasses:function(){return o.Z},default:function(){return a.Z}});var a=t(342479),o=t(816306)},590660:function(n,e,t){"use strict";t.d(e,{ZP:function(){return P}});var a=t(532534),o=t(362493),i=t(974468),r=t(176905),s=t(41732),c=t(393356),l=t.n(c),p=t(512815),u=t.n(p),d=t(385406),m=t.n(d),f=t(470079),h=t(969577),v=t(299737),g=t(538874),x=t(12914),y=t(457095),k=t(261659),b=t(215093),w=f.createContext(),C=t(216600),Z=t(735250),M=["className","columns","columnSpacing","component","container","direction","item","rowSpacing","spacing","wrap","zeroMinWidth"];function G(n){var e=l()(n);return"".concat(e).concat(String(n).replace(String(e),"")||"px")}function T(n){var e=n.breakpoints,t=n.values,a="";u()(t).forEach(function(n){""===a&&0!==t[n]&&(a=n)});var o=u()(e).sort(function(n,t){return e[n]-e[t]});return o.slice(0,o.indexOf(a))}var j=(0,y.ZP)("div",{name:"MuiGrid",slot:"Root",overridesResolver:function(n,e){var t=n.ownerState,a=t.container,i=t.direction,r=t.item,s=t.spacing,c=t.wrap,l=t.zeroMinWidth,p=t.breakpoints,u=[];a&&(u=function(n,e){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!n||n<=0)return[];if("string"==typeof n&&!m()(Number(n))||"number"==typeof n)return[t["spacing-xs-".concat(String(n))]];var a=[];return e.forEach(function(e){var o=n[e];Number(o)>0&&a.push(t["spacing-".concat(e,"-").concat(String(o))])}),a}(s,p,e));var d=[];return p.forEach(function(n){var a=t[n];a&&d.push(e["grid-".concat(n,"-").concat(String(a))])}),[e.root,a&&e.container,r&&e.item,l&&e.zeroMinWidth].concat((0,o.Z)(u),["row"!==i&&e["direction-xs-".concat(String(i))],"wrap"!==c&&e["wrap-xs-".concat(String(c))]],d)}})(function(n){var e=n.ownerState;return(0,s.Z)((0,s.Z)((0,s.Z)((0,s.Z)({boxSizing:"border-box"},e.container&&{display:"flex",flexWrap:"wrap",width:"100%"}),e.item&&{margin:0}),e.zeroMinWidth&&{minWidth:0}),"wrap"!==e.wrap&&{flexWrap:e.wrap})},function(n){var e=n.theme,t=n.ownerState,a=(0,v.P$)({values:t.direction,breakpoints:e.breakpoints.values});return(0,v.k9)({theme:e},a,function(n){var e={flexDirection:n};return 0===n.indexOf("column")&&(e["& > .".concat(C.Z.item)]={maxWidth:"none"}),e})},function(n){var e=n.theme,t=n.ownerState,a=t.container,o=t.rowSpacing,r={};if(a&&0!==o){var s,c=(0,v.P$)({values:o,breakpoints:e.breakpoints.values});"object"==typeof c&&(s=T({breakpoints:e.breakpoints.values,values:c})),r=(0,v.k9)({theme:e},c,function(n,t){var a,o=e.spacing(n);return"0px"!==o?(0,i.Z)({marginTop:"-".concat(G(o))},"& > .".concat(C.Z.item),{paddingTop:G(o)}):null!==(a=s)&&void 0!==a&&a.includes(t)?{}:(0,i.Z)({marginTop:0},"& > .".concat(C.Z.item),{paddingTop:0})})}return r},function(n){var e=n.theme,t=n.ownerState,a=t.container,o=t.columnSpacing,r={};if(a&&0!==o){var s,c=(0,v.P$)({values:o,breakpoints:e.breakpoints.values});"object"==typeof c&&(s=T({breakpoints:e.breakpoints.values,values:c})),r=(0,v.k9)({theme:e},c,function(n,t){var a,o=e.spacing(n);return"0px"!==o?(0,i.Z)({width:"calc(100% + ".concat(G(o),")"),marginLeft:"-".concat(G(o))},"& > .".concat(C.Z.item),{paddingLeft:G(o)}):null!==(a=s)&&void 0!==a&&a.includes(t)?{}:(0,i.Z)({width:"100%",marginLeft:0},"& > .".concat(C.Z.item),{paddingLeft:0})})}return r},function(n){var e,t=n.theme,a=n.ownerState;return t.breakpoints.keys.reduce(function(n,o){var i={};if(a[o]&&(e=a[o]),!e)return n;if(!0===e)i={flexBasis:0,flexGrow:1,maxWidth:"100%"};else if("auto"===e)i={flexBasis:"auto",flexGrow:0,flexShrink:0,maxWidth:"none",width:"auto"};else{var c=(0,v.P$)({values:a.columns,breakpoints:t.breakpoints.values}),l="object"==typeof c?c[o]:c;if(null==l)return n;var p="".concat(Math.round(e/l*1e8)/1e6,"%"),u={};if(a.container&&a.item&&0!==a.columnSpacing){var d=t.spacing(a.columnSpacing);if("0px"!==d){var m="calc(".concat(p," + ").concat(G(d),")");u={flexBasis:m,maxWidth:m}}}i=(0,s.Z)({flexBasis:p,flexGrow:0,maxWidth:p},u)}return 0===t.breakpoints.values[o]?(0,r.Z)(n,i):n[t.breakpoints.up(o)]=i,n},{})}),S=function(n){var e=n.classes,t=n.container,a=n.direction,i=n.item,r=n.spacing,s=n.wrap,c=n.zeroMinWidth,l=n.breakpoints,p=[];t&&(p=function(n,e){if(!n||n<=0)return[];if("string"==typeof n&&!m()(Number(n))||"number"==typeof n)return["spacing-xs-".concat(String(n))];var t=[];return e.forEach(function(e){var a=n[e];if(Number(a)>0){var o="spacing-".concat(e,"-").concat(String(a));t.push(o)}}),t}(r,l));var u=[];l.forEach(function(e){var t=n[e];t&&u.push("grid-".concat(e,"-").concat(String(t)))});var d={root:["root",t&&"container",i&&"item",c&&"zeroMinWidth"].concat((0,o.Z)(p),["row"!==a&&"direction-xs-".concat(String(a)),"wrap"!==s&&"wrap-xs-".concat(String(s))],u)};return(0,x.Z)(d,C.H,e)},P=f.forwardRef(function(n,e){var t=(0,k.Z)({props:n,name:"MuiGrid"}),o=(0,b.Z)().breakpoints,i=(0,g.Z)(t),r=i.className,c=i.columns,l=i.columnSpacing,p=i.component,u=i.container,d=void 0!==u&&u,m=i.direction,v=i.item,x=i.rowSpacing,y=i.spacing,C=void 0===y?0:y,G=i.wrap,T=i.zeroMinWidth,P=(0,a.Z)(i,M),W=f.useContext(w),B=d?c||12:W,E={},I=(0,s.Z)({},P);o.keys.forEach(function(n){null!=P[n]&&(E[n]=P[n],delete I[n])});var H=(0,s.Z)((0,s.Z)((0,s.Z)({},i),{},{columns:B,container:d,direction:void 0===m?"row":m,item:void 0!==v&&v,rowSpacing:x||C,columnSpacing:l||C,wrap:void 0===G?"wrap":G,zeroMinWidth:void 0!==T&&T,spacing:C},E),{},{breakpoints:o.keys}),O=S(H);return(0,Z.jsx)(w.Provider,{value:B,children:(0,Z.jsx)(j,(0,s.Z)({ownerState:H,className:(0,h.default)(O.root,r),as:void 0===p?"div":p,ref:e},I))})})},216600:function(n,e,t){"use strict";t.d(e,{H:function(){return r}});var a=t(362493),o=t(983433),i=t(743064);function r(n){return(0,i.ZP)("MuiGrid",n)}var s=["auto",!0,1,2,3,4,5,6,7,8,9,10,11,12],c=(0,o.Z)("MuiGrid",["root","container","item","zeroMinWidth"].concat((0,a.Z)([0,1,2,3,4,5,6,7,8,9,10].map(function(n){return"spacing-xs-".concat(n)})),(0,a.Z)(["column-reverse","column","row-reverse","row"].map(function(n){return"direction-xs-".concat(n)})),(0,a.Z)(["nowrap","wrap-reverse","wrap"].map(function(n){return"wrap-xs-".concat(n)})),(0,a.Z)(s.map(function(n){return"grid-xs-".concat(n)})),(0,a.Z)(s.map(function(n){return"grid-sm-".concat(n)})),(0,a.Z)(s.map(function(n){return"grid-md-".concat(n)})),(0,a.Z)(s.map(function(n){return"grid-lg-".concat(n)})),(0,a.Z)(s.map(function(n){return"grid-xl-".concat(n)}))));e.Z=c},648832:function(n,e,t){"use strict";t.r(e),t.d(e,{default:function(){return a.ZP},getGridUtilityClass:function(){return o.H},gridClasses:function(){return o.Z}});var a=t(590660),o=t(216600)},313973:function(n,e,t){"use strict";t.r(e),t.d(e,{default:function(){return a.Z},getTypographyUtilityClass:function(){return o.f},typographyClasses:function(){return o.Z}});var a=t(274982),o=t(628939)},377052:function(n,e,t){"use strict";var a=t(61493),o=t(457095),i=t(261659),r=(0,a.Z)({createStyledComponent:(0,o.ZP)("div",{name:"MuiGrid2",slot:"Root",overridesResolver:function(n,e){return e.root}}),componentName:"MuiGrid2",useThemeProps:function(n){return(0,i.Z)({props:n,name:"MuiGrid2"})}});e.Z=r},860974:function(n,e,t){"use strict";t.r(e),t.d(e,{default:function(){return a.Z},getGrid2UtilityClass:function(){return s},grid2Classes:function(){return l}});var a=t(377052),o=t(362493),i=t(983433),r=t(743064);function s(n){return(0,r.ZP)("MuiGrid2",n)}var c=["auto",!0,1,2,3,4,5,6,7,8,9,10,11,12],l=(0,i.Z)("MuiGrid2",["root","container","item","zeroMinWidth"].concat((0,o.Z)([0,1,2,3,4,5,6,7,8,9,10].map(function(n){return"spacing-xs-".concat(n)})),(0,o.Z)(["column-reverse","column","row-reverse","row"].map(function(n){return"direction-xs-".concat(n)})),(0,o.Z)(["nowrap","wrap-reverse","wrap"].map(function(n){return"wrap-xs-".concat(n)})),(0,o.Z)(c.map(function(n){return"grid-xs-".concat(n)})),(0,o.Z)(c.map(function(n){return"grid-sm-".concat(n)})),(0,o.Z)(c.map(function(n){return"grid-md-".concat(n)})),(0,o.Z)(c.map(function(n){return"grid-lg-".concat(n)})),(0,o.Z)(c.map(function(n){return"grid-xl-".concat(n)}))))},931435:function(n,e,t){"use strict";t.r(e),t.d(e,{default:function(){return Z}});var a,o,i,r={};t.r(r),t.d(r,{demoComponents:function(){return w},demos:function(){return b},docs:function(){return k},srcComponents:function(){return C}});var s=t(41732),c=t(470079),l=t.t(c,2),p=t(292812),u=t(597931),d=t(648832),m=t(860974),f=t(313973),h=t(342479),v=t(590660),g=t(377052),x=t(274982),y=t(735250),k={en:{description:"This guide explains how and why to migrate from Material\xa0UI Grid v1 to v2.",location:"/docs/data/material/migration/migration-grid-v2/migration-grid-v2.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>Migration to Grid v2</h1><p class="description">This guide explains how and why to migrate from Material\xa0UI Grid v1 to v2.</p>\n\n<h2 id="why-you-should-migrate">Why you should migrate<a aria-labelledby="why-you-should-migrate" class="anchor-link" href="#why-you-should-migrate" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="why-you-should-migrate"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Grid v2 has several new feature and many improvements over the original:</p>\n<ul>\n<li>Grid v2 uses CSS variables which remove CSS specificity from class selectors.\nNow you can use <code>sx</code> prop on the Grid to control any style you&#39;d like.</li>\n<li>All grids are considered items without specifying the <code>item</code> prop.</li>\n<li>The long-awaited <a href="/material-ui/react-grid2/#offset">offset feature</a> gives you more flexibility for positioning.</li>\n<li><a href="/material-ui/react-grid2/#nested-grid">Nested grids</a> now have no depth limitation.</li>\n<li>The <code>disableEqualOverflow</code> flag disables the horizontal scrollbar in smaller viewports.</li>\n</ul>\n<aside class="MuiCallout-root MuiCallout-info">\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 class="MuiCallout-content">\n            <p>Grid v2 is currently considered <code>Unstable_</code> as we give the community time to try it out and offer feedback.\nWe will make it stable and deprecate v1 in the next major release of Material\xa0UI.</p>\n\n</div></aside><h2 id="with-material-ui-v4">With Material\xa0UI v4<a aria-labelledby="with-material-ui-v4" class="anchor-link" href="#with-material-ui-v4" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="with-material-ui-v4"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>The Grid v2 is introduced in Material\xa0UI v5, so you have to follow the <a href="/material-ui/migration/migration-v4/">Material\xa0UI migration guide</a> first.</p>\n<h2 id="with-material-ui-v5">With Material\xa0UI v5<a aria-labelledby="with-material-ui-v5" class="anchor-link" href="#with-material-ui-v5" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="with-material-ui-v5"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>The migration is expected to be smooth since most of the APIs remains the same. However, there is one breaking change that we want to clarify:</p>\n<p>The default implementation of the negative margin in Grid v2 is spread equally on all sides (same as the Grid in Material\xa0UI v4).</p>\n',{demo:"GridsDiff.js",bg:!0,hideToolbar:!0},'<h3 id="import">Import<a aria-labelledby="import" class="anchor-link" href="#import" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="import"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><div class="MuiCode-root"><pre><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import Grid from \'@mui/material/Grid\';\n</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Grid from \'@mui/material/Unstable_Grid2\';</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"><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"><use class="MuiCode-copy-icon" xlink:href="#copy-icon" /><use class="MuiCode-copied-icon" xlink:href="#copied-icon" /></svg><span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>\n<h3 id="remove-props">Remove props<a aria-labelledby="remove-props" class="anchor-link" href="#remove-props" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="remove-props"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>The <code>item</code> and <code>zeroMinWidth</code> props have been removed in Grid v2:</p>\n<div class="MuiCode-root"><pre><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Grid item zeroMinWidth xs={6}>\n</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Grid xs={6}></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"><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"><use class="MuiCode-copy-icon" xlink:href="#copy-icon" /><use class="MuiCode-copied-icon" xlink:href="#copied-icon" /></svg><span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>\n<h3 id="negative-margins">Negative margins<a aria-labelledby="negative-margins" class="anchor-link" href="#negative-margins" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="negative-margins"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>If you want to apply the negative margins similar to the Grid v1, specify <code>disableEqualOverflow: true</code> on the grid container:</p>\n',{demo:"GridDisableEqualOverflow.js",bg:!0,hideToolbar:!0},'<p>To apply to all grids, add the default props to the theme:</p>\n<div class="MuiCode-root"><pre><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> createTheme<span class="token punctuation">,</span> ThemeProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@mui/material/styles\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> Grid <span class="token keyword">from</span> <span class="token string">\'@mui/material/Unstable_Grid2\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n    <span class="token literal-property property">MuiGrid2</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n      <span class="token literal-property property">defaultProps</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n        <span class="token comment">// all grids under this theme will apply</span>\n        <span class="token comment">// negative margin on the top and left sides.</span>\n        <span class="token literal-property property">disableEqualOverflow</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">Demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ThemeProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<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><span class="token class-name">Grid</span></span> <span class="token attr-name">container</span><span class="token punctuation">></span></span><span class="token operator">...</span>grids<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Grid</span></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">ThemeProvider</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"><use class="MuiCode-copy-icon" xlink:href="#copy-icon" /><use class="MuiCode-copied-icon" xlink:href="#copied-icon" /></svg><span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>\n<h2 id="documentation-page">Documentation page<a aria-labelledby="documentation-page" class="anchor-link" href="#documentation-page" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="documentation-page"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Check out <a href="/material-ui/react-grid2/#fluid-grids">Grid v2 docs</a> for all the demos and code samples.</p>\n'],toc:[{text:"Why you should migrate",level:2,hash:"why-you-should-migrate",children:[]},{text:"With Material\xa0UI v4",level:2,hash:"with-material-ui-v4",children:[]},{text:"With Material\xa0UI v5",level:2,hash:"with-material-ui-v5",children:[{text:"Import",level:3,hash:"import"},{text:"Remove props",level:3,hash:"remove-props"},{text:"Negative margins",level:3,hash:"negative-margins"}]},{text:"Documentation page",level:2,hash:"documentation-page",children:[]}],title:"Migration to Grid v2",headers:{components:[]}}},b={"GridsDiff.js":{module:"./GridsDiff.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Grid from '@mui/material/Grid';\nimport Grid2 from '@mui/material/Unstable_Grid2';\nimport Typography from '@mui/material/Typography';\n\nexport default function GridsDiff() {\n  return (\n    <div>\n      <Box\n        sx={{\n          pt: 3,\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: 4,\n          justifyContent: 'space-between',\n        }}\n      >\n        <Box sx={{ border: '1px solid', borderColor: 'primary.main' }}>\n          <Grid\n            container\n            spacing={2}\n            sx={{ bgcolor: 'rgba(255 255 255 / 0.72)', width: 160 }}\n          >\n            <Grid\n              item\n              height={100}\n              display=\"flex\"\n              alignItems=\"center\"\n              justifyContent=\"center\"\n              textAlign=\"center\"\n              xs\n            >\n              ver.1 <br />\n              Top and left\n            </Grid>\n          </Grid>\n        </Box>\n        <Box sx={{ border: '1px solid', borderColor: 'primary.main' }}>\n          <Grid2\n            container\n            spacing={2}\n            sx={{ bgcolor: 'rgba(255 255 255 / 0.6)', width: 160 }}\n          >\n            <Grid2\n              height={100}\n              display=\"flex\"\n              alignItems=\"center\"\n              justifyContent=\"center\"\n              textAlign=\"center\"\n              xs\n            >\n              ver.2 <br />\n              All sides\n            </Grid2>\n          </Grid2>\n        </Box>\n      </Box>\n      <Typography variant=\"body2\" sx={{ mt: 3, color: 'text.secondary' }}>\n        The overflow represents the negative margin of the grid.\n      </Typography>\n    </div>\n  );\n}\n"},"GridDisableEqualOverflow.js":{module:"./GridDisableEqualOverflow.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Grid2 from '@mui/material/Unstable_Grid2';\nimport Typography from '@mui/material/Typography';\n\nexport default function GridDisableEqualOverflow() {\n  return (\n    <Box sx={{ pt: 3 }}>\n      <Box sx={{ border: '1px solid', borderColor: 'primary.main' }}>\n        <Grid2\n          container\n          spacing={2}\n          disableEqualOverflow\n          sx={{ bgcolor: 'rgba(255 255 255 / 0.6)' }}\n        >\n          <Grid2\n            height={100}\n            display=\"flex\"\n            flexDirection=\"column\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            textAlign=\"center\"\n            xs\n          >\n            ver.2 <br />\n            Top and left overflow\n          </Grid2>\n        </Grid2>\n      </Box>\n      <Typography variant=\"body2\" sx={{ mt: 3, color: 'text.secondary' }}>\n        The overflow represents the negative margin of the grid.\n      </Typography>\n    </Box>\n  );\n}\n"}};b.scope={process:{},import:{react:l,"@mui/material/Box":u,"@mui/material/Grid":d,"@mui/material/Unstable_Grid2":m,"@mui/material/Typography":f}};var w={"./GridsDiff.js":function(){return(0,y.jsxs)("div",{children:[(0,y.jsxs)(h.Z,{sx:{pt:3,display:"flex",flexWrap:"wrap",gap:4,justifyContent:"space-between"},children:[(0,y.jsx)(h.Z,{sx:{border:"1px solid",borderColor:"primary.main"},children:(0,y.jsx)(v.ZP,{container:!0,spacing:2,sx:{bgcolor:"rgba(255 255 255 / 0.72)",width:160},children:a||(a=(0,y.jsxs)(v.ZP,{item:!0,height:100,display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center",xs:!0,children:["ver.1 ",(0,y.jsx)("br",{}),"Top and left"]}))})}),(0,y.jsx)(h.Z,{sx:{border:"1px solid",borderColor:"primary.main"},children:(0,y.jsx)(g.Z,{container:!0,spacing:2,sx:{bgcolor:"rgba(255 255 255 / 0.6)",width:160},children:o||(o=(0,y.jsxs)(g.Z,{height:100,display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center",xs:!0,children:["ver.2 ",(0,y.jsx)("br",{}),"All sides"]}))})})]}),(0,y.jsx)(x.Z,{variant:"body2",sx:{mt:3,color:"text.secondary"},children:"The overflow represents the negative margin of the grid."})]})},"./GridDisableEqualOverflow.js":function(){return(0,y.jsxs)(h.Z,{sx:{pt:3},children:[(0,y.jsx)(h.Z,{sx:{border:"1px solid",borderColor:"primary.main"},children:(0,y.jsx)(g.Z,{container:!0,spacing:2,disableEqualOverflow:!0,sx:{bgcolor:"rgba(255 255 255 / 0.6)"},children:i||(i=(0,y.jsxs)(g.Z,{height:100,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",xs:!0,children:["ver.2 ",(0,y.jsx)("br",{}),"Top and left overflow"]}))})}),(0,y.jsx)(x.Z,{variant:"body2",sx:{mt:3,color:"text.secondary"},children:"The overflow represents the negative margin of the grid."})]})}},C={};function Z(){return(0,y.jsx)(p.Z,(0,s.Z)({},r))}},292812:function(n,e,t){"use strict";t.d(e,{Z:function(){return k}});var a,o=t(41732),i=t(470079),r=t(639519),s=t.n(r),c=t(649052),l=t(267054),p=t(912526),u=t(327220),d=t(61212),m=t(647034),f=t(241290),h=t(141246),v=t(337798),g=t(240713),x=t(735250);function y(n){var e=n.mode,t=(0,p.tv)().setMode;return i.useEffect(function(){t(e)},[e,t]),null}function k(n){var e=(0,l.Z)(),t=(0,c.useRouter)(),r=(0,d.ln)(t.asPath).canonicalAs,s=n.disableAd,k=void 0!==s&&s,b=n.disableToc,w=n.disableCssVarsProvider,C=n.demos,Z=void 0===C?{}:C,M=n.docs,G=n.demoComponents,T=n.srcComponents,j=M[(0,f.useUserLanguage)()]||M.en,S=r.startsWith("/joy-ui/")&&!(void 0!==w&&w),P=S?p.lL:i.Fragment,W=S?h.default:i.Fragment,B=(0,o.Z)({},S&&{mode:e.palette.mode});return(0,x.jsxs)(m.Z,{description:j.description,disableAd:k,disableToc:void 0!==b&&b,location:j.location,title:j.title,toc:j.toc,children:[k?null:a||(a=(0,x.jsx)(h.default,{children:(0,x.jsx)(g.Z,{children:(0,x.jsx)(v.ZP,{})})})),(0,x.jsxs)(P,{children:[S&&(0,x.jsx)(y,{mode:e.palette.mode}),j.rendered.map(function(n,t){return(0,x.jsx)(u.Z,{demoComponents:G,demos:Z,disableAd:k,localizedDoc:j,renderedMarkdownOrDemo:n,srcComponents:T,theme:e,WrapperComponent:W,wrapperProps:B},"demos-section-".concat(t))})]})]})}y.propTypes={mode:s().oneOf(["light","dark"])}},817101:function(n,e,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/material-ui/migration/migration-grid-v2",function(){return t(931435)}])},884835:function(n,e,t){"use strict";var a=t(311596);function o(){}function i(){}i.resetWarningCache=o,n.exports=function(){function n(n,e,t,o,i,r){if(r!==a){var s=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function e(){return n}n.isRequired=n;var t={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:e,element:n,elementType:n,instanceOf:e,node:n,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:i,resetWarningCache:o};return t.PropTypes=t,t}},639519:function(n,e,t){n.exports=t(884835)()},311596:function(n){"use strict";n.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}},function(n){n.O(0,[49774,86291,18914,17376,8817,15686,88530,1089,26037,37092,33986,55124,59395,14091,97692,42596,2464,9503,86520,15438,31707,81238,27220,61493,92888,40179],function(){return n(n.s=817101)}),_N_E=n.O()}]);