(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[45782],{48997:function(e,n,t){"use strict";t.r(n),t.d(n,{buttonClasses:function(){return r.Z},default:function(){return i.Z},getButtonUtilityClass:function(){return r.F}});var i=t(88102),r=t(55109)},69780:function(e,n,t){"use strict";t.d(n,{Z:function(){return G}});var i=t(61916),r=t(59875),a=t(13949),o=t(28990),s=t(32970),c=t.n(s),l=t(15741),d=t.n(l),u=t(92379),m=t(53048),h=t(53379),f=t(15224),p=t(4667),v=t(22269),g=t(651),b=(0,v.Z)((0,g.jsx)("path",{d:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"}),"CheckBoxOutlineBlank"),k=(0,v.Z)((0,g.jsx)("path",{d:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"}),"CheckBox"),x=(0,v.Z)((0,g.jsx)("path",{d:"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"}),"IndeterminateCheckBox"),C=t(52944),y=t(48554),Z=t(1485),L=t(7285),I=t(2739),w=t(59520),S=["checkedIcon","color","icon","indeterminate","indeterminateIcon","inputProps","size","disableRipple","className"],R=function(e){var n=e.classes,t=e.indeterminate,i=e.color,r=e.size,a={root:["root",t&&"indeterminate","color".concat((0,C.Z)(i)),"size".concat((0,C.Z)(r))]},o=(0,h.Z)(a,Z.y,n);return c()(c()({},n),o)},B=(0,L.ZP)(p.Z,{shouldForwardProp:function(e){return(0,y.Z)(e)||"classes"===e},name:"MuiCheckbox",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState;return[n.root,t.indeterminate&&n.indeterminate,n["size".concat((0,C.Z)(t.size))],"default"!==t.color&&n["color".concat((0,C.Z)(t.color))]]}})((0,I.Z)(function(e){var n=e.theme;return{color:(n.vars||n).palette.text.secondary,variants:[{props:{color:"default",disableRipple:!1},style:{"&:hover":{backgroundColor:n.vars?"rgba(".concat(n.vars.palette.action.activeChannel," / ").concat(n.vars.palette.action.hoverOpacity,")"):(0,f.Fq)(n.palette.action.active,n.palette.action.hoverOpacity)}}}].concat((0,o.Z)(d()(n.palette).filter(function(e){var n=(0,a.Z)(e,2)[1];return n&&n.main}).map(function(e){var t=(0,a.Z)(e,1)[0];return{props:{color:t,disableRipple:!1},style:{"&:hover":{backgroundColor:n.vars?"rgba(".concat(n.vars.palette[t].mainChannel," / ").concat(n.vars.palette.action.hoverOpacity,")"):(0,f.Fq)(n.palette[t].main,n.palette.action.hoverOpacity)}}}})),(0,o.Z)(d()(n.palette).filter(function(e){var n=(0,a.Z)(e,2)[1];return n&&n.main}).map(function(e){var t,i=(0,a.Z)(e,1)[0];return{props:{color:i},style:(t={},(0,r.Z)(t,"&.".concat(Z.Z.checked,", &.").concat(Z.Z.indeterminate),{color:(n.vars||n).palette[i].main}),(0,r.Z)(t,"&.".concat(Z.Z.disabled),{color:(n.vars||n).palette.action.disabled}),t)}})),[{props:{disableRipple:!1},style:{"&:hover":{"@media (hover: none)":{backgroundColor:"transparent"}}}}])}})),T=(0,g.jsx)(k,{}),P=(0,g.jsx)(b,{}),j=(0,g.jsx)(x,{}),G=u.forwardRef(function(e,n){var t,r,a=(0,w.i)({props:e,name:"MuiCheckbox"}),o=a.checkedIcon,s=a.color,l=a.icon,d=a.indeterminate,h=void 0!==d&&d,f=a.indeterminateIcon,p=void 0===f?j:f,v=a.inputProps,b=a.size,k=void 0===b?"medium":b,x=a.disableRipple,C=a.className,y=(0,i.Z)(a,S),Z=h?p:void 0===l?P:l,L=h?p:void 0===o?T:o,I=c()(c()({},a),{},{disableRipple:void 0!==x&&x,color:void 0===s?"primary":s,indeterminate:h,size:k}),G=R(I);return(0,g.jsx)(B,c()(c()({type:"checkbox",inputProps:c()({"data-indeterminate":h},v),icon:u.cloneElement(Z,{fontSize:null!=(t=Z.props.fontSize)?t:k}),checkedIcon:u.cloneElement(L,{fontSize:null!=(r=L.props.fontSize)?r:k}),ownerState:I,ref:n,className:(0,m.default)(G.root,C)},y),{},{classes:G}))})},1485:function(e,n,t){"use strict";t.d(n,{y:function(){return a}});var i=t(17580),r=t(88270);function a(e){return(0,r.ZP)("MuiCheckbox",e)}var o=(0,i.Z)("MuiCheckbox",["root","checked","disabled","indeterminate","colorPrimary","colorSecondary","sizeSmall","sizeMedium"]);n.Z=o},57503:function(e,n,t){"use strict";t.r(n),t.d(n,{checkboxClasses:function(){return r.Z},default:function(){return i.Z},getCheckboxUtilityClass:function(){return r.y}});var i=t(69780),r=t(1485)},56258:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return i.Z},dividerClasses:function(){return r.Z},getDividerUtilityClass:function(){return r.V}});var i=t(35810),r=t(32835)},26361:function(e,n,t){"use strict";t.d(n,{ZP:function(){return S}});var i=t(61916),r=t(28990),a=t(59875),o=t(32970),s=t.n(o),c=t(9984),l=t.n(c),d=t(73527),u=t.n(d),m=t(92379),h=t(53048),f=t(4043),p=t(22413),v=t(53379),g=t(7285),b=t(89387),k=t(53983),x=m.createContext(),C=t(92314),y=t(651),Z=["className","columns","columnSpacing","component","container","direction","item","rowSpacing","spacing","wrap","zeroMinWidth"];function L(e){var n=e.breakpoints,t=e.values,i="";l()(t).forEach(function(e){""===i&&0!==t[e]&&(i=e)});var r=l()(n).sort(function(e,t){return n[e]-n[t]});return r.slice(0,r.indexOf(i))}var I=(0,g.ZP)("div",{name:"MuiGrid",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState,i=t.container,a=t.direction,o=t.item,s=t.spacing,c=t.wrap,l=t.zeroMinWidth,d=t.breakpoints,m=[];i&&(m=function(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!e||e<=0)return[];if("string"==typeof e&&!u()(Number(e))||"number"==typeof e)return[t["spacing-xs-".concat(String(e))]];var i=[];return n.forEach(function(n){var r=e[n];Number(r)>0&&i.push(t["spacing-".concat(n,"-").concat(String(r))])}),i}(s,d,n));var h=[];return d.forEach(function(e){var i=t[e];i&&h.push(n["grid-".concat(e,"-").concat(String(i))])}),[n.root,i&&n.container,o&&n.item,l&&n.zeroMinWidth].concat((0,r.Z)(m),["row"!==a&&n["direction-xs-".concat(String(a))],"wrap"!==c&&n["wrap-xs-".concat(String(c))]],h)}})(function(e){var n=e.ownerState;return s()(s()(s()(s()({boxSizing:"border-box"},n.container&&{display:"flex",flexWrap:"wrap",width:"100%"}),n.item&&{margin:0}),n.zeroMinWidth&&{minWidth:0}),"wrap"!==n.wrap&&{flexWrap:n.wrap})},function(e){var n=e.theme,t=e.ownerState,i=(0,f.P$)({values:t.direction,breakpoints:n.breakpoints.values});return(0,f.k9)({theme:n},i,function(e){var n={flexDirection:e};return e.startsWith("column")&&(n["& > .".concat(C.Z.item)]={maxWidth:"none"}),n})},function(e){var n=e.theme,t=e.ownerState,i=t.container,r=t.rowSpacing,o={};if(i&&0!==r){var s,c=(0,f.P$)({values:r,breakpoints:n.breakpoints.values});"object"==typeof c&&(s=L({breakpoints:n.breakpoints.values,values:c})),o=(0,f.k9)({theme:n},c,function(e,t){var i,r=n.spacing(e);return"0px"!==r?(0,a.Z)({marginTop:n.spacing(-e)},"& > .".concat(C.Z.item),{paddingTop:r}):null!=(i=s)&&i.includes(t)?{}:(0,a.Z)({marginTop:0},"& > .".concat(C.Z.item),{paddingTop:0})})}return o},function(e){var n=e.theme,t=e.ownerState,i=t.container,r=t.columnSpacing,o={};if(i&&0!==r){var s,c=(0,f.P$)({values:r,breakpoints:n.breakpoints.values});"object"==typeof c&&(s=L({breakpoints:n.breakpoints.values,values:c})),o=(0,f.k9)({theme:n},c,function(e,t){var i,r=n.spacing(e);if("0px"!==r){var o=n.spacing(-e);return(0,a.Z)({width:"calc(100% + ".concat(r,")"),marginLeft:o},"& > .".concat(C.Z.item),{paddingLeft:r})}return null!=(i=s)&&i.includes(t)?{}:(0,a.Z)({width:"100%",marginLeft:0},"& > .".concat(C.Z.item),{paddingLeft:0})})}return o},function(e){var n,t=e.theme,i=e.ownerState;return t.breakpoints.keys.reduce(function(e,r){var a={};if(i[r]&&(n=i[r]),!n)return e;if(!0===n)a={flexBasis:0,flexGrow:1,maxWidth:"100%"};else if("auto"===n)a={flexBasis:"auto",flexGrow:0,flexShrink:0,maxWidth:"none",width:"auto"};else{var o=(0,f.P$)({values:i.columns,breakpoints:t.breakpoints.values}),c="object"==typeof o?o[r]:o;if(null==c)return e;var l="".concat(Math.round(n/c*1e8)/1e6,"%"),d={};if(i.container&&i.item&&0!==i.columnSpacing){var u=t.spacing(i.columnSpacing);if("0px"!==u){var m="calc(".concat(l," + ").concat(u,")");d={flexBasis:m,maxWidth:m}}}a=s()({flexBasis:l,flexGrow:0,maxWidth:l},d)}return 0===t.breakpoints.values[r]?s()(e,a):e[t.breakpoints.up(r)]=a,e},{})}),w=function(e){var n=e.classes,t=e.container,i=e.direction,a=e.item,o=e.spacing,s=e.wrap,c=e.zeroMinWidth,l=e.breakpoints,d=[];t&&(d=function(e,n){if(!e||e<=0)return[];if("string"==typeof e&&!u()(Number(e))||"number"==typeof e)return["spacing-xs-".concat(String(e))];var t=[];return n.forEach(function(n){var i=e[n];if(Number(i)>0){var r="spacing-".concat(n,"-").concat(String(i));t.push(r)}}),t}(o,l));var m=[];l.forEach(function(n){var t=e[n];t&&m.push("grid-".concat(n,"-").concat(String(t)))});var h={root:["root",t&&"container",a&&"item",c&&"zeroMinWidth"].concat((0,r.Z)(d),["row"!==i&&"direction-xs-".concat(String(i)),"wrap"!==s&&"wrap-xs-".concat(String(s))],m)};return(0,v.Z)(h,C.H,n)},S=m.forwardRef(function(e,n){var t=(0,b.Z)({props:e,name:"MuiGrid"}),r=(0,k.Z)().breakpoints,a=(0,p.Z)(t),o=a.className,c=a.columns,l=a.columnSpacing,d=a.component,u=a.container,f=void 0!==u&&u,v=a.direction,g=a.item,C=a.rowSpacing,L=a.spacing,S=void 0===L?0:L,R=a.wrap,B=a.zeroMinWidth,T=(0,i.Z)(a,Z),P=C||S,j=l||S,G=m.useContext(x),O=f?c||12:G,z={},M=s()({},T);r.keys.forEach(function(e){null!=T[e]&&(z[e]=T[e],delete M[e])});var H=s()(s()(s()({},a),{},{columns:O,container:f,direction:void 0===v?"row":v,item:void 0!==g&&g,rowSpacing:P,columnSpacing:j,wrap:void 0===R?"wrap":R,zeroMinWidth:void 0!==B&&B,spacing:S},z),{},{breakpoints:r.keys}),A=w(H);return(0,y.jsx)(x.Provider,{value:O,children:(0,y.jsx)(I,s()({ownerState:H,className:(0,h.default)(A.root,o),as:void 0===d?"div":d,ref:n},M))})})},92314:function(e,n,t){"use strict";t.d(n,{H:function(){return o}});var i=t(28990),r=t(17580),a=t(88270);function o(e){return(0,a.ZP)("MuiGrid",e)}var s=["auto",!0,1,2,3,4,5,6,7,8,9,10,11,12],c=(0,r.Z)("MuiGrid",["root","container","item","zeroMinWidth"].concat((0,i.Z)([0,1,2,3,4,5,6,7,8,9,10].map(function(e){return"spacing-xs-".concat(e)})),(0,i.Z)(["column-reverse","column","row-reverse","row"].map(function(e){return"direction-xs-".concat(e)})),(0,i.Z)(["nowrap","wrap-reverse","wrap"].map(function(e){return"wrap-xs-".concat(e)})),(0,i.Z)(s.map(function(e){return"grid-xs-".concat(e)})),(0,i.Z)(s.map(function(e){return"grid-sm-".concat(e)})),(0,i.Z)(s.map(function(e){return"grid-md-".concat(e)})),(0,i.Z)(s.map(function(e){return"grid-lg-".concat(e)})),(0,i.Z)(s.map(function(e){return"grid-xl-".concat(e)}))));n.Z=c},11629:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return i.ZP},getGridUtilityClass:function(){return r.H},gridClasses:function(){return r.Z}});var i=t(26361),r=t(92314)},10432:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return i.Z},getListUtilityClass:function(){return r.z},listClasses:function(){return r.Z}});var i=t(7014),r=t(52179)},42476:function(e,n,t){"use strict";var i=t(61916),r=t(59875),a=t(32970),o=t.n(a),s=t(92379),c=t(53048),l=t(53379),d=t(15224),u=t(7285),m=t(2739),h=t(59520),f=t(48554),p=t(7066),v=t(76855),g=t(55882),b=t(95916),k=t(19888),x=t(651),C=["alignItems","autoFocus","component","children","dense","disableGutters","divider","focusVisibleClassName","selected","className"],y=function(e){var n=e.alignItems,t=e.classes,i=e.dense,r=e.disabled,a=e.disableGutters,s=e.divider,c=e.selected,d=(0,l.Z)({root:["root",i&&"dense",!a&&"gutters",s&&"divider",r&&"disabled","flex-start"===n&&"alignItemsFlexStart",c&&"selected"]},k.t,t);return o()(o()({},t),d)},Z=(0,u.ZP)(p.Z,{shouldForwardProp:function(e){return(0,f.Z)(e)||"classes"===e},name:"MuiListItemButton",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState;return[n.root,t.dense&&n.dense,"flex-start"===t.alignItems&&n.alignItemsFlexStart,t.divider&&n.divider,!t.disableGutters&&n.gutters]}})((0,m.Z)(function(e){var n,t=e.theme;return n={display:"flex",flexGrow:1,justifyContent:"flex-start",alignItems:"center",position:"relative",textDecoration:"none",minWidth:0,boxSizing:"border-box",textAlign:"left",paddingTop:8,paddingBottom:8,transition:t.transitions.create("background-color",{duration:t.transitions.duration.shortest}),"&:hover":{textDecoration:"none",backgroundColor:(t.vars||t).palette.action.hover,"@media (hover: none)":{backgroundColor:"transparent"}}},(0,r.Z)(n,"&.".concat(k.Z.selected),(0,r.Z)({backgroundColor:t.vars?"rgba(".concat(t.vars.palette.primary.mainChannel," / ").concat(t.vars.palette.action.selectedOpacity,")"):(0,d.Fq)(t.palette.primary.main,t.palette.action.selectedOpacity)},"&.".concat(k.Z.focusVisible),{backgroundColor:t.vars?"rgba(".concat(t.vars.palette.primary.mainChannel," / calc(").concat(t.vars.palette.action.selectedOpacity," + ").concat(t.vars.palette.action.focusOpacity,"))"):(0,d.Fq)(t.palette.primary.main,t.palette.action.selectedOpacity+t.palette.action.focusOpacity)})),(0,r.Z)(n,"&.".concat(k.Z.selected,":hover"),{backgroundColor:t.vars?"rgba(".concat(t.vars.palette.primary.mainChannel," / calc(").concat(t.vars.palette.action.selectedOpacity," + ").concat(t.vars.palette.action.hoverOpacity,"))"):(0,d.Fq)(t.palette.primary.main,t.palette.action.selectedOpacity+t.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:t.vars?"rgba(".concat(t.vars.palette.primary.mainChannel," / ").concat(t.vars.palette.action.selectedOpacity,")"):(0,d.Fq)(t.palette.primary.main,t.palette.action.selectedOpacity)}}),(0,r.Z)(n,"&.".concat(k.Z.focusVisible),{backgroundColor:(t.vars||t).palette.action.focus}),(0,r.Z)(n,"&.".concat(k.Z.disabled),{opacity:(t.vars||t).palette.action.disabledOpacity}),(0,r.Z)(n,"variants",[{props:function(e){return e.ownerState.divider},style:{borderBottom:"1px solid ".concat((t.vars||t).palette.divider),backgroundClip:"padding-box"}},{props:{alignItems:"flex-start"},style:{alignItems:"flex-start"}},{props:function(e){return!e.ownerState.disableGutters},style:{paddingLeft:16,paddingRight:16}},{props:function(e){return e.ownerState.dense},style:{paddingTop:4,paddingBottom:4}}]),n})),L=s.forwardRef(function(e,n){var t=(0,h.i)({props:e,name:"MuiListItemButton"}),r=t.alignItems,a=void 0===r?"center":r,l=t.autoFocus,d=void 0!==l&&l,u=t.component,m=void 0===u?"div":u,f=t.children,p=t.dense,k=void 0!==p&&p,L=t.disableGutters,I=void 0!==L&&L,w=t.divider,S=t.focusVisibleClassName,R=t.selected,B=t.className,T=(0,i.Z)(t,C),P=s.useContext(b.Z),j=s.useMemo(function(){return{dense:k||P.dense||!1,alignItems:a,disableGutters:I}},[a,P.dense,k,I]),G=s.useRef(null);(0,v.Z)(function(){d&&G.current&&G.current.focus()},[d]);var O=o()(o()({},t),{},{alignItems:a,dense:j.dense,disableGutters:I,divider:void 0!==w&&w,selected:void 0!==R&&R}),z=y(O),M=(0,g.Z)(G,n);return(0,x.jsx)(b.Z.Provider,{value:j,children:(0,x.jsx)(Z,o()(o()({ref:M,href:T.href||T.to,component:(T.href||T.to)&&"div"===m?"button":m,focusVisibleClassName:(0,c.default)(z.focusVisible,S),ownerState:O,className:(0,c.default)(z.root,B)},T),{},{classes:z,children:f}))})});n.Z=L},12747:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return i.Z},getListItemButtonUtilityClass:function(){return r.t},listItemButtonClasses:function(){return r.Z}});var i=t(42476),r=t(19888)},21123:function(e,n,t){"use strict";var i=t(61916),r=t(32970),a=t.n(r),o=t(92379),s=t(53048),c=t(53379),l=t(7285),d=t(2739),u=t(59520),m=t(89212),h=t(95916),f=t(651),p=["className"],v=function(e){var n=e.alignItems,t=e.classes;return(0,c.Z)({root:["root","flex-start"===n&&"alignItemsFlexStart"]},m.f,t)},g=(0,l.ZP)("div",{name:"MuiListItemIcon",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState;return[n.root,"flex-start"===t.alignItems&&n.alignItemsFlexStart]}})((0,d.Z)(function(e){var n=e.theme;return{minWidth:56,color:(n.vars||n).palette.action.active,flexShrink:0,display:"inline-flex",variants:[{props:{alignItems:"flex-start"},style:{marginTop:8}}]}})),b=o.forwardRef(function(e,n){var t=(0,u.i)({props:e,name:"MuiListItemIcon"}),r=t.className,c=(0,i.Z)(t,p),l=o.useContext(h.Z),d=a()(a()({},t),{},{alignItems:l.alignItems}),m=v(d);return(0,f.jsx)(g,a()({className:(0,s.default)(m.root,r),ownerState:d,ref:n},c))});n.Z=b},18598:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return i.Z},getListItemIconUtilityClass:function(){return r.f},listItemIconClasses:function(){return r.Z}});var i=t(21123),r=t(89212)},34594:function(e,n,t){"use strict";var i,r=t(61916),a=t(59875),o=t(32970),s=t.n(o),c=t(92379),l=t(53048),d=t(53379),u=t(32524),m=t(18377),h=t(95916),f=t(7285),p=t(59520),v=t(87153),g=t(651),b=["children","className","disableTypography","inset","primary","primaryTypographyProps","secondary","secondaryTypographyProps"],k=function(e){var n=e.classes,t=e.inset,i=e.primary,r=e.secondary,a=e.dense;return(0,d.Z)({root:["root",t&&"inset",a&&"dense",i&&r&&"multiline"],primary:["primary"],secondary:["secondary"]},v.L,n)},x=(0,f.ZP)("div",{name:"MuiListItemText",slot:"Root",overridesResolver:function(e,n){var t=e.ownerState;return[(0,a.Z)({},"& .".concat(v.Z.primary),n.primary),(0,a.Z)({},"& .".concat(v.Z.secondary),n.secondary),n.root,t.inset&&n.inset,t.primary&&t.secondary&&n.multiline,t.dense&&n.dense]}})((i={flex:"1 1 auto",minWidth:0,marginTop:4,marginBottom:4},(0,a.Z)(i,".".concat(u.Z.root,":where(& .").concat(v.Z.primary,")"),{display:"block"}),(0,a.Z)(i,".".concat(u.Z.root,":where(& .").concat(v.Z.secondary,")"),{display:"block"}),(0,a.Z)(i,"variants",[{props:function(e){var n=e.ownerState;return n.primary&&n.secondary},style:{marginTop:6,marginBottom:6}},{props:function(e){return e.ownerState.inset},style:{paddingLeft:56}}]),i)),C=c.forwardRef(function(e,n){var t=(0,p.i)({props:e,name:"MuiListItemText"}),i=t.children,a=t.className,o=t.disableTypography,d=void 0!==o&&o,u=t.inset,f=t.primary,v=t.primaryTypographyProps,C=t.secondary,y=t.secondaryTypographyProps,Z=(0,r.Z)(t,b),L=c.useContext(h.Z).dense,I=null!=f?f:i,w=C,S=s()(s()({},t),{},{disableTypography:d,inset:void 0!==u&&u,primary:!!I,secondary:!!w,dense:L}),R=k(S);return null==I||I.type===m.Z||d||(I=(0,g.jsx)(m.Z,s()(s()({variant:L?"body2":"body1",className:R.primary,component:null!=v&&v.variant?void 0:"span"},v),{},{children:I}))),null==w||w.type===m.Z||d||(w=(0,g.jsx)(m.Z,s()(s()({variant:"body2",className:R.secondary,color:"textSecondary"},y),{},{children:w}))),(0,g.jsxs)(x,s()(s()({className:(0,l.default)(R.root,a),ownerState:S,ref:n},Z),{},{children:[I,w]}))});n.Z=C},89066:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return i.Z},getListItemTextUtilityClass:function(){return r.L},listItemTextClasses:function(){return r.Z}});var i=t(34594),r=t(87153)},2259:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return i.Z},getPaperUtilityClass:function(){return r.J},paperClasses:function(){return r.Z}});var i=t(64740),r=t(80124)},4667:function(e,n,t){"use strict";t.d(n,{Z:function(){return L}});var i=t(13949),r=t(61916),a=t(32970),o=t.n(a),s=t(92379),c=t(53048),l=t(53379),d=t(52944),u=t(48554),m=t(7285),h=t(1976),f=t(31008),p=t(7066),v=t(17580),g=t(88270);function b(e){return(0,g.ZP)("PrivateSwitchBase",e)}(0,v.Z)("PrivateSwitchBase",["root","checked","disabled","input","edgeStart","edgeEnd"]);var k=t(651),x=["autoFocus","checked","checkedIcon","className","defaultChecked","disabled","disableFocusRipple","edge","icon","id","inputProps","inputRef","name","onBlur","onChange","onFocus","readOnly","required","tabIndex","type","value"],C=function(e){var n=e.classes,t=e.checked,i=e.disabled,r=e.edge,a={root:["root",t&&"checked",i&&"disabled",r&&"edge".concat((0,d.Z)(r))],input:["input"]};return(0,l.Z)(a,b,n)},y=(0,m.ZP)(p.Z)({padding:9,borderRadius:"50%",variants:[{props:{edge:"start",size:"small"},style:{marginLeft:-3}},{props:function(e){var n=e.edge,t=e.ownerState;return"start"===n&&"small"!==t.size},style:{marginLeft:-12}},{props:{edge:"end",size:"small"},style:{marginRight:-3}},{props:function(e){var n=e.edge,t=e.ownerState;return"end"===n&&"small"!==t.size},style:{marginRight:-12}}]}),Z=(0,m.ZP)("input",{shouldForwardProp:u.Z})({cursor:"inherit",position:"absolute",opacity:0,width:"100%",height:"100%",top:0,left:0,margin:0,padding:0,zIndex:1}),L=s.forwardRef(function(e,n){var t=e.autoFocus,a=e.checked,s=e.checkedIcon,l=e.className,d=e.defaultChecked,u=e.disabled,m=e.disableFocusRipple,p=void 0!==m&&m,v=e.edge,g=e.icon,b=e.id,L=e.inputProps,I=e.inputRef,w=e.name,S=e.onBlur,R=e.onChange,B=e.onFocus,T=e.readOnly,P=e.required,j=e.tabIndex,G=e.type,O=e.value,z=(0,r.Z)(e,x),M=(0,h.Z)({controlled:a,default:!!d,name:"SwitchBase",state:"checked"}),H=(0,i.Z)(M,2),A=H[0],N=H[1],F=(0,f.Z)(),V=u;F&&void 0===V&&(V=F.disabled);var W="checkbox"===G||"radio"===G,E=o()(o()({},e),{},{checked:A,disabled:V,disableFocusRipple:p,edge:void 0!==v&&v}),$=C(E);return(0,k.jsxs)(y,o()(o()({component:"span",className:(0,c.default)($.root,l),centerRipple:!0,focusRipple:!p,disabled:V,tabIndex:null,role:void 0,onFocus:function(e){B&&B(e),F&&F.onFocus&&F.onFocus(e)},onBlur:function(e){S&&S(e),F&&F.onBlur&&F.onBlur(e)},ownerState:E,ref:n},z),{},{children:[(0,k.jsx)(Z,o()(o()({autoFocus:t,checked:a,defaultChecked:d,className:$.input,disabled:V,id:W?b:void 0,name:w,onChange:function(e){if(!e.nativeEvent.defaultPrevented){var n=e.target.checked;N(n),R&&R(e,n)}},readOnly:T,ref:I,required:void 0!==P&&P,ownerState:E,tabIndex:j,type:G},"checkbox"===G&&void 0===O?{}:{value:O}),L)),A?s:g]}))})},67343:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return q}});var i,r={};t.r(r),t.d(r,{demoComponents:function(){return E},demos:function(){return W},docs:function(){return V},srcComponents:function(){return $}});var a=t(32970),o=t.n(a),s=t(92379),c=t.t(s,2),l=t(45703),d=t(90417),u=t(11629),m=t(10432),h=t(8161),f=t(66870),p=t(12747),v=t(89066),g=t(18598),b=t(57503),k=t(48997),x=t(56258),C=t(2259),y=t(13949),Z=t(28990),L=t(26361),I=t(7014),w=t(3121),S=t(43318),R=t(42476),B=t(34594),T=t(21123),P=t(69780),j=t(88102),G=t(35810),O=t(651);function z(e,n){return e.filter(function(e){return -1===n.indexOf(e)})}function M(e,n){return e.filter(function(e){return -1!==n.indexOf(e)})}var H=t(64740);function A(e,n){return e.filter(function(e){return -1===n.indexOf(e)})}function N(e,n){return e.filter(function(e){return -1!==n.indexOf(e)})}var F=t(27146),V={en:{description:'A Transfer List (or "shuttle") enables the user to move one or more list items between lists.',location:"/docs/data/material/components/transfer-list/transfer-list.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>Transfer List</h1><p class="description">A Transfer List (or "shuttle") enables the user to move one or more list items between lists.</p>\n\n',{component:"@mui/docs/ComponentLinkHeader"},'<h2 id="basic-transfer-list"><a href="#basic-transfer-list" class="title-link-to-anchor">Basic transfer list<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-transfer-list"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>For completeness, this example includes buttons for &quot;move all&quot;, but not every transfer list needs these.</p>\n',{demo:"TransferList.js",bg:!0},'<h2 id="enhanced-transfer-list"><a href="#enhanced-transfer-list" class="title-link-to-anchor">Enhanced transfer list<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="enhanced-transfer-list"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>This example exchanges the &quot;move all&quot; buttons for a &quot;select all / select none&quot; checkbox and adds a counter.</p>\n',{demo:"SelectAllTransferList.js",bg:!0},'<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><p>The component comes with a couple of limitations:</p>\n<ul>\n<li>It only works on desktop.\nIf you have a limited amount of options to select, prefer the <a href="/material-ui/react-autocomplete/#multiple-values">Autocomplete</a> component.\nIf mobile support is important for you, have a look at <a href="https://github.com/mui/material-ui/issues/27579">#27579</a>.</li>\n<li>There are no high-level components exported from npm. The demos are based on composition.\nIf this is important for you, have a look at <a href="https://github.com/mui/material-ui/issues/27579">#27579</a>.</li>\n</ul>\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/checkbox/"><code>&lt;Checkbox /&gt;</code></a></li>\n<li><a href="/material-ui/api/list/"><code>&lt;List /&gt;</code></a></li>\n<li><a href="/material-ui/api/list-item/"><code>&lt;ListItem /&gt;</code></a></li>\n<li><a href="/material-ui/api/switch/"><code>&lt;Switch /&gt;</code></a></li>\n</ul>\n'],toc:[{text:"Basic transfer list",level:2,hash:"basic-transfer-list",children:[]},{text:"Enhanced transfer list",level:2,hash:"enhanced-transfer-list",children:[]},{text:"Limitations",level:2,hash:"limitations",children:[]},{text:"API",level:2,hash:"api",children:[]}],title:"Transfer list React component",headers:{productId:"material-ui",title:"Transfer list React component",components:["Checkbox","List","ListItem","Switch"],githubLabel:"component: transfer list",hooks:[]}}},W={"SelectAllTransferList.js":{module:"./SelectAllTransferList.js",raw:"import * as React from 'react';\nimport Grid from '@mui/material/Grid';\nimport List from '@mui/material/List';\nimport Card from '@mui/material/Card';\nimport CardHeader from '@mui/material/CardHeader';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemText from '@mui/material/ListItemText';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport Checkbox from '@mui/material/Checkbox';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\n\nfunction not(a, b) {\n  return a.filter((value) => b.indexOf(value) === -1);\n}\n\nfunction intersection(a, b) {\n  return a.filter((value) => b.indexOf(value) !== -1);\n}\n\nfunction union(a, b) {\n  return [...a, ...not(b, a)];\n}\n\nexport default function SelectAllTransferList() {\n  const [checked, setChecked] = React.useState([]);\n  const [left, setLeft] = React.useState([0, 1, 2, 3]);\n  const [right, setRight] = React.useState([4, 5, 6, 7]);\n\n  const leftChecked = intersection(checked, left);\n  const rightChecked = intersection(checked, right);\n\n  const handleToggle = (value) => () => {\n    const currentIndex = checked.indexOf(value);\n    const newChecked = [...checked];\n\n    if (currentIndex === -1) {\n      newChecked.push(value);\n    } else {\n      newChecked.splice(currentIndex, 1);\n    }\n\n    setChecked(newChecked);\n  };\n\n  const numberOfChecked = (items) => intersection(checked, items).length;\n\n  const handleToggleAll = (items) => () => {\n    if (numberOfChecked(items) === items.length) {\n      setChecked(not(checked, items));\n    } else {\n      setChecked(union(checked, items));\n    }\n  };\n\n  const handleCheckedRight = () => {\n    setRight(right.concat(leftChecked));\n    setLeft(not(left, leftChecked));\n    setChecked(not(checked, leftChecked));\n  };\n\n  const handleCheckedLeft = () => {\n    setLeft(left.concat(rightChecked));\n    setRight(not(right, rightChecked));\n    setChecked(not(checked, rightChecked));\n  };\n\n  const customList = (title, items) => (\n    <Card>\n      <CardHeader\n        sx={{ px: 2, py: 1 }}\n        avatar={\n          <Checkbox\n            onClick={handleToggleAll(items)}\n            checked={numberOfChecked(items) === items.length && items.length !== 0}\n            indeterminate={\n              numberOfChecked(items) !== items.length && numberOfChecked(items) !== 0\n            }\n            disabled={items.length === 0}\n            inputProps={{\n              'aria-label': 'all items selected',\n            }}\n          />\n        }\n        title={title}\n        subheader={`${numberOfChecked(items)}/${items.length} selected`}\n      />\n      <Divider />\n      <List\n        sx={{\n          width: 200,\n          height: 230,\n          bgcolor: 'background.paper',\n          overflow: 'auto',\n        }}\n        dense\n        component=\"div\"\n        role=\"list\"\n      >\n        {items.map((value) => {\n          const labelId = `transfer-list-all-item-${value}-label`;\n\n          return (\n            <ListItemButton\n              key={value}\n              role=\"listitem\"\n              onClick={handleToggle(value)}\n            >\n              <ListItemIcon>\n                <Checkbox\n                  checked={checked.indexOf(value) !== -1}\n                  tabIndex={-1}\n                  disableRipple\n                  inputProps={{\n                    'aria-labelledby': labelId,\n                  }}\n                />\n              </ListItemIcon>\n              <ListItemText id={labelId} primary={`List item ${value + 1}`} />\n            </ListItemButton>\n          );\n        })}\n      </List>\n    </Card>\n  );\n\n  return (\n    <Grid\n      container\n      spacing={2}\n      sx={{ justifyContent: 'center', alignItems: 'center' }}\n    >\n      <Grid item>{customList('Choices', left)}</Grid>\n      <Grid item>\n        <Grid container direction=\"column\" sx={{ alignItems: 'center' }}>\n          <Button\n            sx={{ my: 0.5 }}\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={handleCheckedRight}\n            disabled={leftChecked.length === 0}\n            aria-label=\"move selected right\"\n          >\n            &gt;\n          </Button>\n          <Button\n            sx={{ my: 0.5 }}\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={handleCheckedLeft}\n            disabled={rightChecked.length === 0}\n            aria-label=\"move selected left\"\n          >\n            &lt;\n          </Button>\n        </Grid>\n      </Grid>\n      <Grid item>{customList('Chosen', right)}</Grid>\n    </Grid>\n  );\n}\n",moduleTS:"./SelectAllTransferList.js",rawTS:"import * as React from 'react';\nimport Grid from '@mui/material/Grid';\nimport List from '@mui/material/List';\nimport Card from '@mui/material/Card';\nimport CardHeader from '@mui/material/CardHeader';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemText from '@mui/material/ListItemText';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport Checkbox from '@mui/material/Checkbox';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\n\nfunction not(a: readonly number[], b: readonly number[]) {\n  return a.filter((value) => b.indexOf(value) === -1);\n}\n\nfunction intersection(a: readonly number[], b: readonly number[]) {\n  return a.filter((value) => b.indexOf(value) !== -1);\n}\n\nfunction union(a: readonly number[], b: readonly number[]) {\n  return [...a, ...not(b, a)];\n}\n\nexport default function SelectAllTransferList() {\n  const [checked, setChecked] = React.useState<readonly number[]>([]);\n  const [left, setLeft] = React.useState<readonly number[]>([0, 1, 2, 3]);\n  const [right, setRight] = React.useState<readonly number[]>([4, 5, 6, 7]);\n\n  const leftChecked = intersection(checked, left);\n  const rightChecked = intersection(checked, right);\n\n  const handleToggle = (value: number) => () => {\n    const currentIndex = checked.indexOf(value);\n    const newChecked = [...checked];\n\n    if (currentIndex === -1) {\n      newChecked.push(value);\n    } else {\n      newChecked.splice(currentIndex, 1);\n    }\n\n    setChecked(newChecked);\n  };\n\n  const numberOfChecked = (items: readonly number[]) =>\n    intersection(checked, items).length;\n\n  const handleToggleAll = (items: readonly number[]) => () => {\n    if (numberOfChecked(items) === items.length) {\n      setChecked(not(checked, items));\n    } else {\n      setChecked(union(checked, items));\n    }\n  };\n\n  const handleCheckedRight = () => {\n    setRight(right.concat(leftChecked));\n    setLeft(not(left, leftChecked));\n    setChecked(not(checked, leftChecked));\n  };\n\n  const handleCheckedLeft = () => {\n    setLeft(left.concat(rightChecked));\n    setRight(not(right, rightChecked));\n    setChecked(not(checked, rightChecked));\n  };\n\n  const customList = (title: React.ReactNode, items: readonly number[]) => (\n    <Card>\n      <CardHeader\n        sx={{ px: 2, py: 1 }}\n        avatar={\n          <Checkbox\n            onClick={handleToggleAll(items)}\n            checked={numberOfChecked(items) === items.length && items.length !== 0}\n            indeterminate={\n              numberOfChecked(items) !== items.length && numberOfChecked(items) !== 0\n            }\n            disabled={items.length === 0}\n            inputProps={{\n              'aria-label': 'all items selected',\n            }}\n          />\n        }\n        title={title}\n        subheader={`${numberOfChecked(items)}/${items.length} selected`}\n      />\n      <Divider />\n      <List\n        sx={{\n          width: 200,\n          height: 230,\n          bgcolor: 'background.paper',\n          overflow: 'auto',\n        }}\n        dense\n        component=\"div\"\n        role=\"list\"\n      >\n        {items.map((value: number) => {\n          const labelId = `transfer-list-all-item-${value}-label`;\n\n          return (\n            <ListItemButton\n              key={value}\n              role=\"listitem\"\n              onClick={handleToggle(value)}\n            >\n              <ListItemIcon>\n                <Checkbox\n                  checked={checked.indexOf(value) !== -1}\n                  tabIndex={-1}\n                  disableRipple\n                  inputProps={{\n                    'aria-labelledby': labelId,\n                  }}\n                />\n              </ListItemIcon>\n              <ListItemText id={labelId} primary={`List item ${value + 1}`} />\n            </ListItemButton>\n          );\n        })}\n      </List>\n    </Card>\n  );\n\n  return (\n    <Grid\n      container\n      spacing={2}\n      sx={{ justifyContent: 'center', alignItems: 'center' }}\n    >\n      <Grid item>{customList('Choices', left)}</Grid>\n      <Grid item>\n        <Grid container direction=\"column\" sx={{ alignItems: 'center' }}>\n          <Button\n            sx={{ my: 0.5 }}\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={handleCheckedRight}\n            disabled={leftChecked.length === 0}\n            aria-label=\"move selected right\"\n          >\n            &gt;\n          </Button>\n          <Button\n            sx={{ my: 0.5 }}\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={handleCheckedLeft}\n            disabled={rightChecked.length === 0}\n            aria-label=\"move selected left\"\n          >\n            &lt;\n          </Button>\n        </Grid>\n      </Grid>\n      <Grid item>{customList('Chosen', right)}</Grid>\n    </Grid>\n  );\n}\n"},"TransferList.js":{module:"./TransferList.js",raw:'import * as React from \'react\';\nimport Grid from \'@mui/material/Grid\';\nimport List from \'@mui/material/List\';\nimport ListItemButton from \'@mui/material/ListItemButton\';\nimport ListItemIcon from \'@mui/material/ListItemIcon\';\nimport ListItemText from \'@mui/material/ListItemText\';\nimport Checkbox from \'@mui/material/Checkbox\';\nimport Button from \'@mui/material/Button\';\nimport Paper from \'@mui/material/Paper\';\n\nfunction not(a, b) {\n  return a.filter((value) => b.indexOf(value) === -1);\n}\n\nfunction intersection(a, b) {\n  return a.filter((value) => b.indexOf(value) !== -1);\n}\n\nexport default function TransferList() {\n  const [checked, setChecked] = React.useState([]);\n  const [left, setLeft] = React.useState([0, 1, 2, 3]);\n  const [right, setRight] = React.useState([4, 5, 6, 7]);\n\n  const leftChecked = intersection(checked, left);\n  const rightChecked = intersection(checked, right);\n\n  const handleToggle = (value) => () => {\n    const currentIndex = checked.indexOf(value);\n    const newChecked = [...checked];\n\n    if (currentIndex === -1) {\n      newChecked.push(value);\n    } else {\n      newChecked.splice(currentIndex, 1);\n    }\n\n    setChecked(newChecked);\n  };\n\n  const handleAllRight = () => {\n    setRight(right.concat(left));\n    setLeft([]);\n  };\n\n  const handleCheckedRight = () => {\n    setRight(right.concat(leftChecked));\n    setLeft(not(left, leftChecked));\n    setChecked(not(checked, leftChecked));\n  };\n\n  const handleCheckedLeft = () => {\n    setLeft(left.concat(rightChecked));\n    setRight(not(right, rightChecked));\n    setChecked(not(checked, rightChecked));\n  };\n\n  const handleAllLeft = () => {\n    setLeft(left.concat(right));\n    setRight([]);\n  };\n\n  const customList = (items) => (\n    <Paper sx={{ width: 200, height: 230, overflow: \'auto\' }}>\n      <List dense component="div" role="list">\n        {items.map((value) => {\n          const labelId = `transfer-list-item-${value}-label`;\n\n          return (\n            <ListItemButton\n              key={value}\n              role="listitem"\n              onClick={handleToggle(value)}\n            >\n              <ListItemIcon>\n                <Checkbox\n                  checked={checked.indexOf(value) !== -1}\n                  tabIndex={-1}\n                  disableRipple\n                  inputProps={{\n                    \'aria-labelledby\': labelId,\n                  }}\n                />\n              </ListItemIcon>\n              <ListItemText id={labelId} primary={`List item ${value + 1}`} />\n            </ListItemButton>\n          );\n        })}\n      </List>\n    </Paper>\n  );\n\n  return (\n    <Grid\n      container\n      spacing={2}\n      sx={{ justifyContent: \'center\', alignItems: \'center\' }}\n    >\n      <Grid item>{customList(left)}</Grid>\n      <Grid item>\n        <Grid container direction="column" sx={{ alignItems: \'center\' }}>\n          <Button\n            sx={{ my: 0.5 }}\n            variant="outlined"\n            size="small"\n            onClick={handleAllRight}\n            disabled={left.length === 0}\n            aria-label="move all right"\n          >\n            ≫\n          </Button>\n          <Button\n            sx={{ my: 0.5 }}\n            variant="outlined"\n            size="small"\n            onClick={handleCheckedRight}\n            disabled={leftChecked.length === 0}\n            aria-label="move selected right"\n          >\n            &gt;\n          </Button>\n          <Button\n            sx={{ my: 0.5 }}\n            variant="outlined"\n            size="small"\n            onClick={handleCheckedLeft}\n            disabled={rightChecked.length === 0}\n            aria-label="move selected left"\n          >\n            &lt;\n          </Button>\n          <Button\n            sx={{ my: 0.5 }}\n            variant="outlined"\n            size="small"\n            onClick={handleAllLeft}\n            disabled={right.length === 0}\n            aria-label="move all left"\n          >\n            ≪\n          </Button>\n        </Grid>\n      </Grid>\n      <Grid item>{customList(right)}</Grid>\n    </Grid>\n  );\n}\n',moduleTS:"./TransferList.js",rawTS:'import * as React from \'react\';\nimport Grid from \'@mui/material/Grid\';\nimport List from \'@mui/material/List\';\nimport ListItemButton from \'@mui/material/ListItemButton\';\nimport ListItemIcon from \'@mui/material/ListItemIcon\';\nimport ListItemText from \'@mui/material/ListItemText\';\nimport Checkbox from \'@mui/material/Checkbox\';\nimport Button from \'@mui/material/Button\';\nimport Paper from \'@mui/material/Paper\';\n\nfunction not(a: readonly number[], b: readonly number[]) {\n  return a.filter((value) => b.indexOf(value) === -1);\n}\n\nfunction intersection(a: readonly number[], b: readonly number[]) {\n  return a.filter((value) => b.indexOf(value) !== -1);\n}\n\nexport default function TransferList() {\n  const [checked, setChecked] = React.useState<readonly number[]>([]);\n  const [left, setLeft] = React.useState<readonly number[]>([0, 1, 2, 3]);\n  const [right, setRight] = React.useState<readonly number[]>([4, 5, 6, 7]);\n\n  const leftChecked = intersection(checked, left);\n  const rightChecked = intersection(checked, right);\n\n  const handleToggle = (value: number) => () => {\n    const currentIndex = checked.indexOf(value);\n    const newChecked = [...checked];\n\n    if (currentIndex === -1) {\n      newChecked.push(value);\n    } else {\n      newChecked.splice(currentIndex, 1);\n    }\n\n    setChecked(newChecked);\n  };\n\n  const handleAllRight = () => {\n    setRight(right.concat(left));\n    setLeft([]);\n  };\n\n  const handleCheckedRight = () => {\n    setRight(right.concat(leftChecked));\n    setLeft(not(left, leftChecked));\n    setChecked(not(checked, leftChecked));\n  };\n\n  const handleCheckedLeft = () => {\n    setLeft(left.concat(rightChecked));\n    setRight(not(right, rightChecked));\n    setChecked(not(checked, rightChecked));\n  };\n\n  const handleAllLeft = () => {\n    setLeft(left.concat(right));\n    setRight([]);\n  };\n\n  const customList = (items: readonly number[]) => (\n    <Paper sx={{ width: 200, height: 230, overflow: \'auto\' }}>\n      <List dense component="div" role="list">\n        {items.map((value: number) => {\n          const labelId = `transfer-list-item-${value}-label`;\n\n          return (\n            <ListItemButton\n              key={value}\n              role="listitem"\n              onClick={handleToggle(value)}\n            >\n              <ListItemIcon>\n                <Checkbox\n                  checked={checked.indexOf(value) !== -1}\n                  tabIndex={-1}\n                  disableRipple\n                  inputProps={{\n                    \'aria-labelledby\': labelId,\n                  }}\n                />\n              </ListItemIcon>\n              <ListItemText id={labelId} primary={`List item ${value + 1}`} />\n            </ListItemButton>\n          );\n        })}\n      </List>\n    </Paper>\n  );\n\n  return (\n    <Grid\n      container\n      spacing={2}\n      sx={{ justifyContent: \'center\', alignItems: \'center\' }}\n    >\n      <Grid item>{customList(left)}</Grid>\n      <Grid item>\n        <Grid container direction="column" sx={{ alignItems: \'center\' }}>\n          <Button\n            sx={{ my: 0.5 }}\n            variant="outlined"\n            size="small"\n            onClick={handleAllRight}\n            disabled={left.length === 0}\n            aria-label="move all right"\n          >\n            ≫\n          </Button>\n          <Button\n            sx={{ my: 0.5 }}\n            variant="outlined"\n            size="small"\n            onClick={handleCheckedRight}\n            disabled={leftChecked.length === 0}\n            aria-label="move selected right"\n          >\n            &gt;\n          </Button>\n          <Button\n            sx={{ my: 0.5 }}\n            variant="outlined"\n            size="small"\n            onClick={handleCheckedLeft}\n            disabled={rightChecked.length === 0}\n            aria-label="move selected left"\n          >\n            &lt;\n          </Button>\n          <Button\n            sx={{ my: 0.5 }}\n            variant="outlined"\n            size="small"\n            onClick={handleAllLeft}\n            disabled={right.length === 0}\n            aria-label="move all left"\n          >\n            ≪\n          </Button>\n        </Grid>\n      </Grid>\n      <Grid item>{customList(right)}</Grid>\n    </Grid>\n  );\n}\n'}};W.scope={process:{},import:{react:c,"@mui/material/Grid":u,"@mui/material/List":m,"@mui/material/Card":h,"@mui/material/CardHeader":f,"@mui/material/ListItemButton":p,"@mui/material/ListItemText":v,"@mui/material/ListItemIcon":g,"@mui/material/Checkbox":b,"@mui/material/Button":k,"@mui/material/Divider":x,"@mui/material/Paper":C}};var E={"./SelectAllTransferList.js":function(){var e=s.useState([]),n=(0,y.Z)(e,2),t=n[0],r=n[1],a=s.useState([0,1,2,3]),o=(0,y.Z)(a,2),c=o[0],l=o[1],d=s.useState([4,5,6,7]),u=(0,y.Z)(d,2),m=u[0],h=u[1],f=M(t,c),p=M(t,m),v=function(e){return M(t,e).length},g=function(e,n){return(0,O.jsxs)(w.Z,{children:[(0,O.jsx)(S.Z,{sx:{px:2,py:1},avatar:(0,O.jsx)(P.Z,{onClick:function(){v(n)===n.length?r(z(t,n)):r([].concat((0,Z.Z)(t),(0,Z.Z)(z(n,t))))},checked:v(n)===n.length&&0!==n.length,indeterminate:v(n)!==n.length&&0!==v(n),disabled:0===n.length,inputProps:{"aria-label":"all items selected"}}),title:e,subheader:"".concat(v(n),"/").concat(n.length," selected")}),i||(i=(0,O.jsx)(G.Z,{})),(0,O.jsx)(I.Z,{sx:{width:200,height:230,bgcolor:"background.paper",overflow:"auto"},dense:!0,component:"div",role:"list",children:n.map(function(e){var n="transfer-list-all-item-".concat(e,"-label");return(0,O.jsxs)(R.Z,{role:"listitem",onClick:function(){var n=t.indexOf(e),i=(0,Z.Z)(t);-1===n?i.push(e):i.splice(n,1),r(i)},children:[(0,O.jsx)(T.Z,{children:(0,O.jsx)(P.Z,{checked:-1!==t.indexOf(e),tabIndex:-1,disableRipple:!0,inputProps:{"aria-labelledby":n}})}),(0,O.jsx)(B.Z,{id:n,primary:"List item ".concat(e+1)})]},e)})})]})};return(0,O.jsxs)(L.ZP,{container:!0,spacing:2,sx:{justifyContent:"center",alignItems:"center"},children:[(0,O.jsx)(L.ZP,{item:!0,children:g("Choices",c)}),(0,O.jsx)(L.ZP,{item:!0,children:(0,O.jsxs)(L.ZP,{container:!0,direction:"column",sx:{alignItems:"center"},children:[(0,O.jsx)(j.Z,{sx:{my:.5},variant:"outlined",size:"small",onClick:function(){h(m.concat(f)),l(z(c,f)),r(z(t,f))},disabled:0===f.length,"aria-label":"move selected right",children:">"}),(0,O.jsx)(j.Z,{sx:{my:.5},variant:"outlined",size:"small",onClick:function(){l(c.concat(p)),h(z(m,p)),r(z(t,p))},disabled:0===p.length,"aria-label":"move selected left",children:"<"})]})}),(0,O.jsx)(L.ZP,{item:!0,children:g("Chosen",m)})]})},"./TransferList.js":function(){var e=s.useState([]),n=(0,y.Z)(e,2),t=n[0],i=n[1],r=s.useState([0,1,2,3]),a=(0,y.Z)(r,2),o=a[0],c=a[1],l=s.useState([4,5,6,7]),d=(0,y.Z)(l,2),u=d[0],m=d[1],h=N(t,o),f=N(t,u),p=function(e){return(0,O.jsx)(H.Z,{sx:{width:200,height:230,overflow:"auto"},children:(0,O.jsx)(I.Z,{dense:!0,component:"div",role:"list",children:e.map(function(e){var n="transfer-list-item-".concat(e,"-label");return(0,O.jsxs)(R.Z,{role:"listitem",onClick:function(){var n=t.indexOf(e),r=(0,Z.Z)(t);-1===n?r.push(e):r.splice(n,1),i(r)},children:[(0,O.jsx)(T.Z,{children:(0,O.jsx)(P.Z,{checked:-1!==t.indexOf(e),tabIndex:-1,disableRipple:!0,inputProps:{"aria-labelledby":n}})}),(0,O.jsx)(B.Z,{id:n,primary:"List item ".concat(e+1)})]},e)})})})};return(0,O.jsxs)(L.ZP,{container:!0,spacing:2,sx:{justifyContent:"center",alignItems:"center"},children:[(0,O.jsx)(L.ZP,{item:!0,children:p(o)}),(0,O.jsx)(L.ZP,{item:!0,children:(0,O.jsxs)(L.ZP,{container:!0,direction:"column",sx:{alignItems:"center"},children:[(0,O.jsx)(j.Z,{sx:{my:.5},variant:"outlined",size:"small",onClick:function(){m(u.concat(o)),c([])},disabled:0===o.length,"aria-label":"move all right",children:"≫"}),(0,O.jsx)(j.Z,{sx:{my:.5},variant:"outlined",size:"small",onClick:function(){m(u.concat(h)),c(A(o,h)),i(A(t,h))},disabled:0===h.length,"aria-label":"move selected right",children:">"}),(0,O.jsx)(j.Z,{sx:{my:.5},variant:"outlined",size:"small",onClick:function(){c(o.concat(f)),m(A(u,f)),i(A(t,f))},disabled:0===f.length,"aria-label":"move selected left",children:"<"}),(0,O.jsx)(j.Z,{sx:{my:.5},variant:"outlined",size:"small",onClick:function(){c(o.concat(u)),m([])},disabled:0===u.length,"aria-label":"move all left",children:"≪"})]})}),(0,O.jsx)(L.ZP,{item:!0,children:p(u)})]})}},$={"@mui/docs/ComponentLinkHeader":F.Z};function q(){return(0,O.jsx)(l.Z,o()({},r))}q.getLayout=function(e){return(0,O.jsx)(d.ZP,{children:e})}},61922:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/material-ui/react-transfer-list",function(){return t(67343)}])}},function(e){e.O(0,[49774,21134,97146,18987,1406,17376,74866,15686,73119,73579,23075,7066,49277,99974,45769,44383,44846,90417,80295,8418,84294,31011,95490,73833,3281,62956,67119,92888,40179],function(){return e(e.s=61922)}),_N_E=e.O()}]);