(window.webpackJsonp=window.webpackJsonp||[]).push([[131],{102:function(e,n,a){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var t=function(e,n,a,t,o){return null};n.default=t},133:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return o.default}});var o=t(a(190))},190:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=n.styles=void 0;var o=t(a(3)),l=t(a(6)),s=t(a(4)),i=t(a(10)),r=t(a(11)),d=t(a(12)),p=t(a(13)),u=t(a(14)),c=t(a(1)),m=(t(a(2)),t(a(5))),f=(t(a(20)),a(9),t(a(191))),h=t(a(7)),x=a(79),g=(t(a(102)),a(22));a(76);var y=function(e){var n="light"===e.palette.type?e.palette.grey[300]:e.palette.grey[700],a=(0,x.fade)(e.palette.text.primary,.26);return{root:{fontFamily:e.typography.fontFamily,fontSize:e.typography.pxToRem(13),display:"inline-flex",alignItems:"center",justifyContent:"center",height:32,color:e.palette.getContrastText(n),backgroundColor:n,borderRadius:16,whiteSpace:"nowrap",transition:e.transitions.create(["background-color","box-shadow"]),cursor:"default",outline:"none",textDecoration:"none",border:"none",padding:0,verticalAlign:"middle",boxSizing:"border-box"},colorPrimary:{backgroundColor:e.palette.primary.main,color:e.palette.primary.contrastText},colorSecondary:{backgroundColor:e.palette.secondary.main,color:e.palette.secondary.contrastText},clickable:{WebkitTapHighlightColor:"transparent",cursor:"pointer","&:hover, &:focus":{backgroundColor:(0,x.emphasize)(n,.08)},"&:active":{boxShadow:e.shadows[1],backgroundColor:(0,x.emphasize)(n,.12)}},clickableColorPrimary:{"&:hover, &:focus":{backgroundColor:(0,x.emphasize)(e.palette.primary.main,.08)},"&:active":{backgroundColor:(0,x.emphasize)(e.palette.primary.main,.12)}},clickableColorSecondary:{"&:hover, &:focus":{backgroundColor:(0,x.emphasize)(e.palette.secondary.main,.08)},"&:active":{backgroundColor:(0,x.emphasize)(e.palette.secondary.main,.12)}},deletable:{"&:focus":{backgroundColor:(0,x.emphasize)(n,.08)}},deletableColorPrimary:{"&:focus":{backgroundColor:(0,x.emphasize)(e.palette.primary.main,.2)}},deletableColorSecondary:{"&:focus":{backgroundColor:(0,x.emphasize)(e.palette.secondary.main,.2)}},outlined:{backgroundColor:"transparent",border:"1px solid ".concat("light"===e.palette.type?"rgba(0, 0, 0, 0.23)":"rgba(255, 255, 255, 0.23)"),"$clickable&:hover, $clickable&:focus, $deletable&:focus":{backgroundColor:(0,x.fade)(e.palette.text.primary,e.palette.action.hoverOpacity)},"& $avatar":{marginLeft:-1}},outlinedPrimary:{color:e.palette.primary.main,border:"1px solid ".concat(e.palette.primary.main),"$clickable&:hover, $clickable&:focus, $deletable&:focus":{backgroundColor:(0,x.fade)(e.palette.primary.main,e.palette.action.hoverOpacity)}},outlinedSecondary:{color:e.palette.secondary.main,border:"1px solid ".concat(e.palette.secondary.main),"$clickable&:hover, $clickable&:focus, $deletable&:focus":{backgroundColor:(0,x.fade)(e.palette.secondary.main,e.palette.action.hoverOpacity)}},avatar:{marginRight:-4,width:32,height:32,color:"light"===e.palette.type?e.palette.grey[700]:e.palette.grey[300],fontSize:e.typography.pxToRem(16)},avatarColorPrimary:{color:e.palette.primary.contrastText,backgroundColor:e.palette.primary.dark},avatarColorSecondary:{color:e.palette.secondary.contrastText,backgroundColor:e.palette.secondary.dark},avatarChildren:{width:19,height:19},icon:{color:"light"===e.palette.type?e.palette.grey[700]:e.palette.grey[300],marginLeft:4,marginRight:-8},iconColorPrimary:{color:"inherit"},iconColorSecondary:{color:"inherit"},label:{display:"flex",alignItems:"center",paddingLeft:12,paddingRight:12,userSelect:"none",whiteSpace:"nowrap",cursor:"inherit"},deleteIcon:{WebkitTapHighlightColor:"transparent",color:a,cursor:"pointer",height:"auto",margin:"0 4px 0 -8px","&:hover":{color:(0,x.fade)(a,.4)}},deleteIconColorPrimary:{color:(0,x.fade)(e.palette.primary.contrastText,.7),"&:hover, &:active":{color:e.palette.primary.contrastText}},deleteIconColorSecondary:{color:(0,x.fade)(e.palette.secondary.contrastText,.7),"&:hover, &:active":{color:e.palette.secondary.contrastText}},deleteIconOutlinedColorPrimary:{color:(0,x.fade)(e.palette.primary.main,.7),"&:hover, &:active":{color:e.palette.primary.main}},deleteIconOutlinedColorSecondary:{color:(0,x.fade)(e.palette.secondary.main,.7),"&:hover, &:active":{color:e.palette.secondary.main}}}};n.styles=y;var E=function(e){function n(){var e,a;(0,i.default)(this,n);for(var t=arguments.length,o=new Array(t),l=0;l<t;l++)o[l]=arguments[l];return(a=(0,d.default)(this,(e=(0,p.default)(n)).call.apply(e,[this].concat(o)))).handleDeleteIconClick=function(e){e.stopPropagation();var n=a.props.onDelete;n&&n(e)},a.handleKeyDown=function(e){var n=a.props.onKeyDown;if(n&&n(e),e.currentTarget===e.target){var t=e.key;" "!==t&&"Enter"!==t&&"Backspace"!==t&&"Escape"!==t||e.preventDefault()}},a.handleKeyUp=function(e){var n=a.props,t=n.onClick,o=n.onDelete,l=n.onKeyUp;if(l&&l(e),e.currentTarget===e.target){var s=e.key;!t||" "!==s&&"Enter"!==s?o&&"Backspace"===s?o(e):"Escape"===s&&a.chipRef&&a.chipRef.blur():t(e)}},a}return(0,u.default)(n,e),(0,r.default)(n,[{key:"render",value:function(){var e,n=this,a=this.props,t=a.avatar,i=a.classes,r=a.className,d=a.clickable,p=a.color,u=a.component,h=a.deleteIcon,x=a.icon,y=a.label,E=a.onClick,P=a.onDelete,v=(a.onKeyDown,a.onKeyUp,a.tabIndex),b=a.variant,C=(0,s.default)(a,["avatar","classes","className","clickable","color","component","deleteIcon","icon","label","onClick","onDelete","onKeyDown","onKeyUp","tabIndex","variant"]),S=!(!1===d||!E)||d,T=(0,m.default)(i.root,(e={},(0,l.default)(e,i["color".concat((0,g.capitalize)(p))],"default"!==p),(0,l.default)(e,i.clickable,S),(0,l.default)(e,i["clickableColor".concat((0,g.capitalize)(p))],S&&"default"!==p),(0,l.default)(e,i.deletable,P),(0,l.default)(e,i["deletableColor".concat((0,g.capitalize)(p))],P&&"default"!==p),(0,l.default)(e,i.outlined,"outlined"===b),(0,l.default)(e,i.outlinedPrimary,"outlined"===b&&"primary"===p),(0,l.default)(e,i.outlinedSecondary,"outlined"===b&&"secondary"===p),e),r),N=null;if(P){var D,w=(D={},(0,l.default)(D,i["deleteIconColor".concat((0,g.capitalize)(p))],"default"!==p&&"outlined"!==b),(0,l.default)(D,i["deleteIconOutlinedColor".concat((0,g.capitalize)(p))],"default"!==p&&"outlined"===b),D);N=h&&c.default.isValidElement(h)?c.default.cloneElement(h,{className:(0,m.default)(h.props.className,i.deleteIcon,w),onClick:this.handleDeleteIconClick}):c.default.createElement(f.default,{className:(0,m.default)(i.deleteIcon,w),onClick:this.handleDeleteIconClick})}var k=null;t&&c.default.isValidElement(t)&&(k=c.default.cloneElement(t,{className:(0,m.default)(i.avatar,t.props.className,(0,l.default)({},i["avatarColor".concat((0,g.capitalize)(p))],"default"!==p)),childrenClassName:(0,m.default)(i.avatarChildren,t.props.childrenClassName)}));var I=null;x&&c.default.isValidElement(x)&&(I=c.default.cloneElement(x,{className:(0,m.default)(i.icon,x.props.className,(0,l.default)({},i["iconColor".concat((0,g.capitalize)(p))],"default"!==p))}));var j=v;return j||(j=E||P||S?0:-1),c.default.createElement(u,(0,o.default)({role:"button",className:T,tabIndex:j,onClick:E,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,ref:function(e){n.chipRef=e}},C),k||I,c.default.createElement("span",{className:i.label},y),N)}}]),n}(c.default.Component);E.defaultProps={component:"div",color:"default",variant:"default"};var P=(0,h.default)(y,{name:"MuiChip"})(E);n.default=P},191:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(a(1)),l=t(a(33)),s=t(a(31)),i=o.default.createElement("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}),r=function(e){return o.default.createElement(s.default,e,i)};(r=(0,l.default)(r)).muiName="SvgIcon";var d=r;n.default=d},2134:function(e,n,a){__NEXT_REGISTER_PAGE("/demos/expansion-panels",function(){return e.exports=a(2135),{page:e.exports.default}})},2135:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0,a(17);var o=t(a(1)),l=t(a(18)),s=a(2136),i=a(2155),r=o.default.createElement(l.default,{req:s,reqSource:i,reqPrefix:"pages/demos/expansion-panels"});var d=function(){return r};n.default=d},2136:function(e,n,a){var t={"./ControlledExpansionPanels.hooks.js":2137,"./ControlledExpansionPanels.js":2141,"./CustomizedExpansionPanel.js":2142,"./DetailedExpansionPanel.js":2143,"./SimpleExpansionPanel.js":2146,"./expansion-panels-de.md":2147,"./expansion-panels-es.md":2148,"./expansion-panels-fr.md":2149,"./expansion-panels-ja.md":2150,"./expansion-panels-pt.md":2151,"./expansion-panels-ru.md":2152,"./expansion-panels-zh.md":2153,"./expansion-panels.md":2154};function o(e){var n=l(e);return a(n)}function l(e){var n=t[e];if(!(n+1)){var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}return n}o.keys=function(){return Object.keys(t)},o.resolve=l,e.exports=o,o.id=2136},2137:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(a(25)),l=t(a(1)),s=a(29),i=t(a(542)),r=t(a(543)),d=t(a(544)),p=t(a(16)),u=t(a(236)),c=(0,s.makeStyles)(function(e){return{root:{width:"100%"},heading:{fontSize:e.typography.pxToRem(15),flexBasis:"33.33%",flexShrink:0},secondaryHeading:{fontSize:e.typography.pxToRem(15),color:e.palette.text.secondary}}}),m=l.default.createElement(u.default,null),f=l.default.createElement(r.default,null,l.default.createElement(p.default,null,"Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.")),h=l.default.createElement(u.default,null),x=l.default.createElement(r.default,null,l.default.createElement(p.default,null,"Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.")),g=l.default.createElement(u.default,null),y=l.default.createElement(r.default,null,l.default.createElement(p.default,null,"Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.")),E=l.default.createElement(u.default,null),P=l.default.createElement(r.default,null,l.default.createElement(p.default,null,"Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue."));var v=function(){var e=c(),n=l.default.useState(null),a=(0,o.default)(n,2),t=a[0],s=a[1],r=function(e){return function(n,a){s(!!a&&e)}};return l.default.createElement("div",{className:e.root},l.default.createElement(i.default,{expanded:"panel1"===t,onChange:r("panel1")},l.default.createElement(d.default,{expandIcon:m},l.default.createElement(p.default,{className:e.heading},"General settings"),l.default.createElement(p.default,{className:e.secondaryHeading},"I am an expansion panel")),f),l.default.createElement(i.default,{expanded:"panel2"===t,onChange:r("panel2")},l.default.createElement(d.default,{expandIcon:h},l.default.createElement(p.default,{className:e.heading},"Users"),l.default.createElement(p.default,{className:e.secondaryHeading},"You are currently not an owner")),x),l.default.createElement(i.default,{expanded:"panel3"===t,onChange:r("panel3")},l.default.createElement(d.default,{expandIcon:g},l.default.createElement(p.default,{className:e.heading},"Advanced settings"),l.default.createElement(p.default,{className:e.secondaryHeading},"Filtering has been entirely disabled for whole web server")),y),l.default.createElement(i.default,{expanded:"panel4"===t,onChange:r("panel4")},l.default.createElement(d.default,{expandIcon:E},l.default.createElement(p.default,{className:e.heading},"Personal data")),P))};n.default=v},2138:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=n.styles=void 0;var o=t(a(3)),l=t(a(6)),s=t(a(4)),i=t(a(10)),r=t(a(11)),d=t(a(12)),p=t(a(13)),u=t(a(14)),c=t(a(1)),m=(t(a(2)),t(a(5))),f=(t(a(20)),t(a(286))),h=t(a(28)),x=t(a(7)),g=a(43),y=function(e){var n={duration:e.transitions.duration.shortest};return{root:{position:"relative",transition:e.transitions.create(["margin"],n),"&:before":{position:"absolute",left:0,top:-1,right:0,height:1,content:'""',opacity:1,backgroundColor:e.palette.divider,transition:e.transitions.create(["opacity","background-color"],n)},"&:first-child":{"&:before":{display:"none"}},"&$expanded + &":{"&:before":{display:"none"}}},rounded:{borderRadius:0,"&:first-child":{borderTopLeftRadius:e.shape.borderRadius,borderTopRightRadius:e.shape.borderRadius},"&:last-child":{borderBottomLeftRadius:e.shape.borderRadius,borderBottomRightRadius:e.shape.borderRadius,"@supports (-ms-ime-align: auto)":{borderBottomLeftRadius:0,borderBottomRightRadius:0}}},expanded:{margin:"16px 0","&:first-child":{marginTop:0},"&:last-child":{marginBottom:0},"&:before":{opacity:0}},disabled:{backgroundColor:e.palette.action.disabledBackground}}};n.styles=y;var E=function(e){function n(e){var a;return(0,i.default)(this,n),(a=(0,d.default)(this,(0,p.default)(n).call(this))).handleChange=function(e){var n=a.isControlled?a.props.expanded:a.state.expanded;a.isControlled||a.setState({expanded:!n}),a.props.onChange&&a.props.onChange(e,!n)},a.isControlled=null!=e.expanded,a.state={},a.isControlled||(a.state.expanded=void 0!==e.defaultExpanded&&e.defaultExpanded),a}return(0,u.default)(n,e),(0,r.default)(n,[{key:"render",value:function(){var e,n=this,a=this.props,t=a.children,i=a.classes,r=a.className,d=a.CollapseProps,p=(a.defaultExpanded,a.disabled),u=a.expanded,x=(a.onChange,a.square),y=(0,s.default)(a,["children","classes","className","CollapseProps","defaultExpanded","disabled","expanded","onChange","square"]),E=this.isControlled?u:this.state.expanded,P=null,v=c.default.Children.map(t,function(e){return c.default.isValidElement(e)?(0,g.isMuiElement)(e,["ExpansionPanelSummary"])?(P=c.default.cloneElement(e,{disabled:p,expanded:E,onChange:n.handleChange}),null):e:null}),b=E?null:{"aria-hidden":"true"};return c.default.createElement(h.default,(0,o.default)({className:(0,m.default)(i.root,(e={},(0,l.default)(e,i.expanded,E),(0,l.default)(e,i.disabled,p),(0,l.default)(e,i.rounded,!x),e),r),elevation:1,square:x},y),P,c.default.createElement(f.default,(0,o.default)({in:E,timeout:"auto"},b,d),v))}}]),n}(c.default.Component);E.defaultProps={defaultExpanded:!1,disabled:!1,square:!1};var P=(0,x.default)(y,{name:"MuiExpansionPanel"})(E);n.default=P},2139:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=n.styles=void 0;var o=t(a(3)),l=t(a(4)),s=t(a(1)),i=(t(a(2)),t(a(5))),r=t(a(7)),d={root:{display:"flex",padding:"8px 24px 24px"}};n.styles=d;var p=(0,r.default)(d,{name:"MuiExpansionPanelDetails"})(function(e){var n=e.classes,a=e.children,t=e.className,r=(0,l.default)(e,["classes","children","className"]);return s.default.createElement("div",(0,o.default)({className:(0,i.default)(n.root,t)},r),a)});n.default=p},2140:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=n.styles=void 0;var o=t(a(3)),l=t(a(6)),s=t(a(4)),i=t(a(10)),r=t(a(11)),d=t(a(12)),p=t(a(13)),u=t(a(14)),c=t(a(1)),m=(t(a(2)),t(a(5))),f=t(a(80)),h=t(a(34)),x=t(a(7)),g=function(e){var n={duration:e.transitions.duration.shortest};return{root:{display:"flex",minHeight:48,transition:e.transitions.create(["min-height","background-color"],n),padding:"0 24px 0 24px","&:hover:not($disabled)":{cursor:"pointer"},"&$expanded":{minHeight:64},"&$focused":{backgroundColor:e.palette.grey[300]},"&$disabled":{opacity:.38}},expanded:{},focused:{},disabled:{},content:{display:"flex",flexGrow:1,transition:e.transitions.create(["margin"],n),margin:"12px 0","& > :last-child":{paddingRight:32},"&$expanded":{margin:"20px 0"}},expandIcon:{position:"absolute",top:"50%",right:8,transform:"translateY(-50%) rotate(0deg)",transition:e.transitions.create("transform",n),"&:hover":{backgroundColor:"transparent"},"&$expanded":{transform:"translateY(-50%) rotate(180deg)"}}}};n.styles=g;var y=function(e){function n(){var e,a;(0,i.default)(this,n);for(var t=arguments.length,o=new Array(t),l=0;l<t;l++)o[l]=arguments[l];return(a=(0,d.default)(this,(e=(0,p.default)(n)).call.apply(e,[this].concat(o)))).state={focused:!1},a.handleFocusVisible=function(e){a.setState({focused:!0}),a.props.onFocusVisible&&a.props.onFocusVisible(e)},a.handleBlur=function(e){a.setState({focused:!1}),a.props.onBlur&&a.props.onBlur(e)},a.handleChange=function(e){var n=a.props,t=n.onChange,o=n.onClick;t&&t(e),o&&o(e)},a}return(0,u.default)(n,e),(0,r.default)(n,[{key:"render",value:function(){var e,n=this.props,a=n.children,t=n.classes,i=n.className,r=n.disabled,d=n.expanded,p=n.expandIcon,u=n.IconButtonProps,x=(n.onBlur,n.onChange,n.onClick,n.onFocusVisible,(0,s.default)(n,["children","classes","className","disabled","expanded","expandIcon","IconButtonProps","onBlur","onChange","onClick","onFocusVisible"])),g=this.state.focused;return c.default.createElement(f.default,(0,o.default)({focusRipple:!1,disableRipple:!0,disabled:r,component:"div","aria-expanded":d,className:(0,m.default)(t.root,(e={},(0,l.default)(e,t.disabled,r),(0,l.default)(e,t.expanded,d),(0,l.default)(e,t.focused,g),e),i),onFocusVisible:this.handleFocusVisible,onBlur:this.handleBlur,onClick:this.handleChange},x),c.default.createElement("div",{className:(0,m.default)(t.content,(0,l.default)({},t.expanded,d))},a),p&&c.default.createElement(h.default,(0,o.default)({disabled:r,className:(0,m.default)(t.expandIcon,(0,l.default)({},t.expanded,d)),component:"div",tabIndex:-1,"aria-hidden":"true"},u),p))}}]),n}(c.default.Component);y.defaultProps={disabled:!1},y.muiName="ExpansionPanelSummary";var E=(0,x.default)(g,{name:"MuiExpansionPanelSummary"})(y);n.default=E},2141:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(a(10)),l=t(a(11)),s=t(a(12)),i=t(a(13)),r=t(a(14)),d=t(a(1)),p=(t(a(2)),a(8)),u=t(a(542)),c=t(a(543)),m=t(a(544)),f=t(a(16)),h=t(a(236)),x=d.default.createElement(h.default,null),g=d.default.createElement(c.default,null,d.default.createElement(f.default,null,"Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.")),y=d.default.createElement(h.default,null),E=d.default.createElement(c.default,null,d.default.createElement(f.default,null,"Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.")),P=d.default.createElement(h.default,null),v=d.default.createElement(c.default,null,d.default.createElement(f.default,null,"Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.")),b=d.default.createElement(h.default,null),C=d.default.createElement(c.default,null,d.default.createElement(f.default,null,"Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.")),S=function(e){function n(){var e,a;(0,o.default)(this,n);for(var t=arguments.length,l=new Array(t),r=0;r<t;r++)l[r]=arguments[r];return(a=(0,s.default)(this,(e=(0,i.default)(n)).call.apply(e,[this].concat(l)))).state={expanded:null},a.handleChange=function(e){return function(n,t){a.setState({expanded:!!t&&e})}},a}return(0,r.default)(n,e),(0,l.default)(n,[{key:"render",value:function(){var e=this.props.classes,n=this.state.expanded;return d.default.createElement("div",{className:e.root},d.default.createElement(u.default,{expanded:"panel1"===n,onChange:this.handleChange("panel1")},d.default.createElement(m.default,{expandIcon:x},d.default.createElement(f.default,{className:e.heading},"General settings"),d.default.createElement(f.default,{className:e.secondaryHeading},"I am an expansion panel")),g),d.default.createElement(u.default,{expanded:"panel2"===n,onChange:this.handleChange("panel2")},d.default.createElement(m.default,{expandIcon:y},d.default.createElement(f.default,{className:e.heading},"Users"),d.default.createElement(f.default,{className:e.secondaryHeading},"You are currently not an owner")),E),d.default.createElement(u.default,{expanded:"panel3"===n,onChange:this.handleChange("panel3")},d.default.createElement(m.default,{expandIcon:P},d.default.createElement(f.default,{className:e.heading},"Advanced settings"),d.default.createElement(f.default,{className:e.secondaryHeading},"Filtering has been entirely disabled for whole web server")),v),d.default.createElement(u.default,{expanded:"panel4"===n,onChange:this.handleChange("panel4")},d.default.createElement(m.default,{expandIcon:b},d.default.createElement(f.default,{className:e.heading},"Personal data")),C))}}]),n}(d.default.Component),T=(0,p.withStyles)(function(e){return{root:{width:"100%"},heading:{fontSize:e.typography.pxToRem(15),flexBasis:"33.33%",flexShrink:0},secondaryHeading:{fontSize:e.typography.pxToRem(15),color:e.palette.text.secondary}}})(S);n.default=T},2142:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(a(10)),l=t(a(11)),s=t(a(12)),i=t(a(13)),r=t(a(14)),d=t(a(1)),p=a(8),u=t(a(542)),c=t(a(544)),m=t(a(543)),f=t(a(16)),h=(0,p.withStyles)({root:{border:"1px solid rgba(0,0,0,.125)",boxShadow:"none","&:not(:last-child)":{borderBottom:0},"&:before":{display:"none"}},expanded:{margin:"auto"}})(u.default),x=(0,p.withStyles)({root:{backgroundColor:"rgba(0,0,0,.03)",borderBottom:"1px solid rgba(0,0,0,.125)",marginBottom:-1,minHeight:56,"&$expanded":{minHeight:56}},content:{"&$expanded":{margin:"12px 0"}},expanded:{}})(function(e){return d.default.createElement(c.default,e)});x.muiName="ExpansionPanelSummary";var g=(0,p.withStyles)(function(e){return{root:{padding:2*e.spacing.unit}}})(m.default),y=d.default.createElement(x,null,d.default.createElement(f.default,null,"Collapsible Group Item #1")),E=d.default.createElement(g,null,d.default.createElement(f.default,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")),P=d.default.createElement(x,null,d.default.createElement(f.default,null,"Collapsible Group Item #2")),v=d.default.createElement(g,null,d.default.createElement(f.default,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")),b=d.default.createElement(x,null,d.default.createElement(f.default,null,"Collapsible Group Item #3")),C=d.default.createElement(g,null,d.default.createElement(f.default,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")),S=function(e){function n(){var e,a;(0,o.default)(this,n);for(var t=arguments.length,l=new Array(t),r=0;r<t;r++)l[r]=arguments[r];return(a=(0,s.default)(this,(e=(0,i.default)(n)).call.apply(e,[this].concat(l)))).state={expanded:"panel1"},a.handleChange=function(e){return function(n,t){a.setState({expanded:!!t&&e})}},a}return(0,r.default)(n,e),(0,l.default)(n,[{key:"render",value:function(){var e=this.state.expanded;return d.default.createElement("div",null,d.default.createElement(h,{square:!0,expanded:"panel1"===e,onChange:this.handleChange("panel1")},y,E),d.default.createElement(h,{square:!0,expanded:"panel2"===e,onChange:this.handleChange("panel2")},P,v),d.default.createElement(h,{square:!0,expanded:"panel3"===e,onChange:this.handleChange("panel3")},b,C))}}]),n}(d.default.Component);n.default=S},2143:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(a(1)),l=(t(a(2)),a(8)),s=t(a(5)),i=t(a(542)),r=t(a(543)),d=t(a(544)),p=t(a(2144)),u=t(a(16)),c=t(a(236)),m=t(a(133)),f=t(a(19)),h=t(a(81)),x=o.default.createElement(c.default,null),g=o.default.createElement("br",null),y=o.default.createElement(h.default,null),E=o.default.createElement(p.default,null,o.default.createElement(f.default,{size:"small"},"Cancel"),o.default.createElement(f.default,{size:"small",color:"primary"},"Save"));var P=(0,l.withStyles)(function(e){return{root:{width:"100%"},heading:{fontSize:e.typography.pxToRem(15)},secondaryHeading:{fontSize:e.typography.pxToRem(15),color:e.palette.text.secondary},icon:{verticalAlign:"bottom",height:20,width:20},details:{alignItems:"center"},column:{flexBasis:"33.33%"},helper:{borderLeft:"2px solid ".concat(e.palette.divider),padding:"".concat(e.spacing.unit,"px ").concat(2*e.spacing.unit,"px")},link:{color:e.palette.primary.main,textDecoration:"none","&:hover":{textDecoration:"underline"}}}})(function(e){var n=e.classes;return o.default.createElement("div",{className:n.root},o.default.createElement(i.default,{defaultExpanded:!0},o.default.createElement(d.default,{expandIcon:x},o.default.createElement("div",{className:n.column},o.default.createElement(u.default,{className:n.heading},"Location")),o.default.createElement("div",{className:n.column},o.default.createElement(u.default,{className:n.secondaryHeading},"Select trip destination"))),o.default.createElement(r.default,{className:n.details},o.default.createElement("div",{className:n.column}),o.default.createElement("div",{className:n.column},o.default.createElement(m.default,{label:"Barbados",className:n.chip,onDelete:function(){}})),o.default.createElement("div",{className:(0,s.default)(n.column,n.helper)},o.default.createElement(u.default,{variant:"caption"},"Select your destination of choice",g,o.default.createElement("a",{href:"#sub-labels-and-columns",className:n.link},"Learn more")))),y,E))});n.default=P},2144:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return o.default}});var o=t(a(2145))},2145:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=n.styles=void 0;var o=t(a(3)),l=t(a(4)),s=t(a(1)),i=(t(a(2)),t(a(5))),r=t(a(7)),d=a(43);a(19);var p={root:{display:"flex",alignItems:"center",justifyContent:"flex-end",padding:"16px 8px"},action:{marginLeft:8}};n.styles=p;var u=(0,r.default)(p,{name:"MuiExpansionPanelActions"})(function(e){var n=e.children,a=e.classes,t=e.className,r=(0,l.default)(e,["children","classes","className"]);return s.default.createElement("div",(0,o.default)({className:(0,i.default)(a.root,t)},r),(0,d.cloneChildrenWithClassName)(n,a.action))});n.default=u},2146:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(a(1)),l=(t(a(2)),a(8)),s=t(a(542)),i=t(a(544)),r=t(a(543)),d=t(a(16)),p=t(a(236)),u=o.default.createElement(p.default,null),c=o.default.createElement(r.default,null,o.default.createElement(d.default,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")),m=o.default.createElement(p.default,null),f=o.default.createElement(r.default,null,o.default.createElement(d.default,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")),h=o.default.createElement(p.default,null);var x=(0,l.withStyles)(function(e){return{root:{width:"100%"},heading:{fontSize:e.typography.pxToRem(15),fontWeight:e.typography.fontWeightRegular}}})(function(e){var n=e.classes;return o.default.createElement("div",{className:n.root},o.default.createElement(s.default,null,o.default.createElement(i.default,{expandIcon:u},o.default.createElement(d.default,{className:n.heading},"Expansion Panel 1")),c),o.default.createElement(s.default,null,o.default.createElement(i.default,{expandIcon:m},o.default.createElement(d.default,{className:n.heading},"Expansion Panel 2")),f),o.default.createElement(s.default,{disabled:!0},o.default.createElement(i.default,{expandIcon:h},o.default.createElement(d.default,{className:n.heading},"Disabled Expansion Panel"))))});n.default=x},2147:function(e,n){e.exports='---\ntitle: Expansion Panel React component\ncomponents: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary\n---\n# Expansion Panels\n\n<p class="description">Expansion panels contain creation flows and allow lightweight editing of an element.</p>\n\n[An expansion panel](https://material.io/archive/guidelines/components/expansion-panels.html) is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.\n\n> **Note:** Expansion panels are no longer documented in the Material Design documentation.\n\n## Simple Expansion Panel\n\n{{"demo": "pages/demos/expansion-panels/SimpleExpansionPanel.js"}}\n\n## Controlled Accordion\n\nExtend the default panel behavior to create an accordion with the `ExpansionPanel` component.\n\n{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}\n\n## Secondary heading and Columns\n\nMultiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user.\n\n{{"demo": "pages/demos/expansion-panels/DetailedExpansionPanel.js"}}\n\n## Customized Expansion Panel\n\nIf you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the background color of the `ExpansionPanelSummary` and padding of `ExpansionPanelDetails`.\n\n⚠️ Auch wenn die material design Spezifikation zur Verwendung von Themes ermutigt, liegen diese Beispiele außerhalb der üblichen Pfade.\n\n{{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}}'},2148:function(e,n){e.exports='---\ntitle: Expansion Panel React component\ncomponents: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary\n---\n# Expansion Panels\n\n<p class="description">Expansion panels contain creation flows and allow lightweight editing of an element.</p>\n\n[An expansion panel](https://material.io/archive/guidelines/components/expansion-panels.html) is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.\n\n> **Note:** Expansion panels are no longer documented in the Material Design documentation.\n\n## Simple Expansion Panel\n\n{{"demo": "pages/demos/expansion-panels/SimpleExpansionPanel.js"}}\n\n## Controlled Accordion\n\nExtend the default panel behavior to create an accordion with the `ExpansionPanel` component.\n\n{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}\n\n## Secondary heading and Columns\n\nMultiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user.\n\n{{"demo": "pages/demos/expansion-panels/DetailedExpansionPanel.js"}}\n\n## Customized Expansion Panel\n\nIf you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the background color of the `ExpansionPanelSummary` and padding of `ExpansionPanelDetails`.\n\n⚠️ A pesar de que la especificación de material design anima a usar temas, estos ejemplos no son comunes.\n\n{{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}}'},2149:function(e,n){e.exports='---\ntitle: Composant React Panneau d\'expansion\ncomponents: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary\n---\n# Panneaux d\'extension (Expansion Panels)\n\n<p class="description">Les panneaux d’extension contiennent des flux de création et permettent une édition légère d’un élément.</p>\n\n[Un panneau d\'extension](https://material.io/archive/guidelines/components/expansion-panels.html) est un conteneur léger pouvant être autonome ou connecté à une surface plus grande, telle qu\'une carte.\n\n> **Remarque:** Les panneaux d\'extension ne sont plus décrits dans la documentation Material Design.\n\n## Panneau d\'extension simple\n\n{{"demo": "pages/demos/expansion-panels/SimpleExpansionPanel.js"}}\n\n## Accordéon contrôlé\n\nÉtendez le comportement du panneau par défaut pour créer un accordéon avec le composant `ExpansionPanel`.\n\n{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}\n\n## En-tête et colonnes secondaires\n\nPlusieurs colonnes peuvent être utilisées pour structurer le contenu et un texte d\'assistance peut être ajouté au panneau pour aider l\'utilisateur.\n\n{{"demo": "pages/demos/expansion-panels/DetailedExpansionPanel.js"}}\n\n## Panneau d\'extension personnalisé\n\nSi vous avez lu le [overrides page de documentation](/customization/overrides/) mais vous n\'êtes pas sûr de sauter dans, ici est un exemple de la façon dont vous pouvez personnaliser la couleur de fond du `ExpansionPanelSummary` et le rembourrage de `ExpansionPanelDetails`.\n\n⚠️ Bien que les spécifications de conception des matériaux encouragent la thématisation, ces exemples sortent des sentiers battus.\n\n{{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}}'},2150:function(e,n){e.exports='---\ntitle: Expansion Panel React component\ncomponents: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary\n---\n# Expansion Panels\n\n<p class="description">Expansion panels contain creation flows and allow lightweight editing of an element.</p>\n\n[An expansion panel](https://material.io/archive/guidelines/components/expansion-panels.html) is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.\n\n> **Note:** Expansion panels are no longer documented in the Material Design documentation.\n\n## Simple Expansion Panel\n\n{{"demo": "pages/demos/expansion-panels/SimpleExpansionPanel.js"}}\n\n## Controlled Accordion\n\nExtend the default panel behavior to create an accordion with the `ExpansionPanel` component.\n\n{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}\n\n## Secondary heading and Columns\n\nMultiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user.\n\n{{"demo": "pages/demos/expansion-panels/DetailedExpansionPanel.js"}}\n\n## Customized Expansion Panel\n\nIf you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the background color of the `ExpansionPanelSummary` and padding of `ExpansionPanelDetails`.\n\n⚠️ While the material design specification encourages theming, these examples are off the beaten path.\n\n{{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}}'},2151:function(e,n){e.exports='---\ntitle: Expansion Panel React component\ncomponents: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary\n---\n# Expansion Panels (Painéis de Expansão)\n\n<p class="description">Expansion panels contain creation flows and allow lightweight editing of an element.</p>\n\n[An expansion panel](https://material.io/archive/guidelines/components/expansion-panels.html) is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.\n\n> **Note:** Expansion panels are no longer documented in the Material Design documentation.\n\n## Simple Expansion Panel\n\n{{"demo": "pages/demos/expansion-panels/SimpleExpansionPanel.js"}}\n\n## Controlled Accordion\n\nExtend the default panel behavior to create an accordion with the `ExpansionPanel` component.\n\n{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}\n\n## Secondary heading and Columns\n\nMultiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user.\n\n{{"demo": "pages/demos/expansion-panels/DetailedExpansionPanel.js"}}\n\n## Customized Expansion Panel\n\nIf you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the background color of the `ExpansionPanelSummary` and padding of `ExpansionPanelDetails`.\n\n⚠️ Embora a especificação do design do material incentive o tema, esses exemplos estão fora do caminho comum.\n\n{{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}}'},2152:function(e,n){e.exports='---\ntitle: Панель расширения (Компонент React)\ncomponents: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary\n---\n# Панель расширения\n\n<p class="description">Панель расширения содержит потоки создания и позволяет легко редактировать элементы.</p>\n\n[An expansion panel](https://material.io/archive/guidelines/components/expansion-panels.html) is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.\n\n> **Note:** Expansion panels are no longer documented in the Material Design documentation.\n\n## Simple Expansion Panel\n\n{{"demo": "pages/demos/expansion-panels/SimpleExpansionPanel.js"}}\n\n## Controlled Accordion\n\nExtend the default panel behavior to create an accordion with the `ExpansionPanel` component.\n\n{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}\n\n## Secondary heading and Columns\n\nMultiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user.\n\n{{"demo": "pages/demos/expansion-panels/DetailedExpansionPanel.js"}}\n\n## Customized Expansion Panel\n\nIf you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the background color of the `ExpansionPanelSummary` and padding of `ExpansionPanelDetails`.\n\n⚠️ Хотя спецификации материал дизайна поощряют использование тем, эти примеры не соответствуют требованиям.\n\n{{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}}'},2153:function(e,n){e.exports='---\ntitle: 扩展面板 React 组件\ncomponents: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary\n---\n# 扩展面板\n\n<p class="description">扩展面板包含创建流程，允许轻量编辑元素。</p>\n\n[扩展面板](https://material.io/archive/guidelines/components/expansion-panels.html)是一个轻量级容器，既可以单独使用，也可以和卡片这样更大的平面相结合。\n\n> **注意：** 材料设计文档中不再记录扩展面板。\n\n## 简单的扩展面板\n\n{{"demo": "pages/demos/expansion-panels/SimpleExpansionPanel.js"}}\n\n## 受控手风琴\n\n扩展默认面板行为以使用` ExpansionPanel `组件创建手风琴。\n\n{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}\n\n## 次要标题和列\n\n可以使用多列来构造内容，并且可以将辅助文本添加到面板以帮助用户。\n\n{{"demo": "pages/demos/expansion-panels/DetailedExpansionPanel.js"}}\n\n## 定制扩展面板\n\n如果您一直在阅读 [覆盖文档页面](/customization/overrides/) 但是您没有信心跳入， 这里是一个示例，说明如何自定义 `ExpansionPanelSummary` 的背景颜色和 `ExpansionPanelDetails`填充。\n\n⚠️虽然材料设计规范鼓励主题，但这些例子是不合适的。\n\n{{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}}'},2154:function(e,n){e.exports='---\ntitle: Expansion Panel React component\ncomponents: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary\n---\n\n# Expansion Panels\n\n<p class="description">Expansion panels contain creation flows and allow lightweight editing of an element.</p>\n\n[An expansion panel](https://material.io/archive/guidelines/components/expansion-panels.html) is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.\n\n> **Note:** Expansion panels are no longer documented in the Material Design documentation.\n\n## Simple Expansion Panel\n\n{{"demo": "pages/demos/expansion-panels/SimpleExpansionPanel.js"}}\n\n## Controlled Accordion\n\nExtend the default panel behavior to create an accordion with the `ExpansionPanel` component.\n\n{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}\n\n## Secondary heading and Columns\n\nMultiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user.\n\n{{"demo": "pages/demos/expansion-panels/DetailedExpansionPanel.js"}}\n\n## Customized Expansion Panel\n\nIf you have been reading the [overrides documentation page](/customization/overrides/)\nbut you are not confident jumping in,\nhere is one example of how you can customize the background color of the `ExpansionPanelSummary` and padding of `ExpansionPanelDetails`.\n\n⚠️ While the material design specification encourages theming, these examples are off the beaten path.\n\n{{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}}\n'},2155:function(e,n,a){var t={"./ControlledExpansionPanels.hooks.js":2156,"./ControlledExpansionPanels.js":2157,"./CustomizedExpansionPanel.js":2158,"./DetailedExpansionPanel.js":2159,"./SimpleExpansionPanel.js":2160};function o(e){var n=l(e);return a(n)}function l(e){var n=t[e];if(!(n+1)){var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}return n}o.keys=function(){return Object.keys(t)},o.resolve=l,e.exports=o,o.id=2155},2156:function(e,n){e.exports="import React from 'react';\nimport { makeStyles } from '@material-ui/styles';\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: '100%',\n  },\n  heading: {\n    fontSize: theme.typography.pxToRem(15),\n    flexBasis: '33.33%',\n    flexShrink: 0,\n  },\n  secondaryHeading: {\n    fontSize: theme.typography.pxToRem(15),\n    color: theme.palette.text.secondary,\n  },\n}));\n\nfunction ControlledExpansionPanels() {\n  const classes = useStyles();\n  const [expanded, setExpanded] = React.useState(null);\n\n  const handleChange = panel => (event, isExpanded) => {\n    setExpanded(isExpanded ? panel : false);\n  };\n\n  return (\n    <div className={classes.root}>\n      <ExpansionPanel expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography className={classes.heading}>General settings</Typography>\n          <Typography className={classes.secondaryHeading}>I am an expansion panel</Typography>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails>\n          <Typography>\n            Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget\n            maximus est, id dignissim quam.\n          </Typography>\n        </ExpansionPanelDetails>\n      </ExpansionPanel>\n      <ExpansionPanel expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography className={classes.heading}>Users</Typography>\n          <Typography className={classes.secondaryHeading}>\n            You are currently not an owner\n          </Typography>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails>\n          <Typography>\n            Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar\n            diam eros in elit. Pellentesque convallis laoreet laoreet.\n          </Typography>\n        </ExpansionPanelDetails>\n      </ExpansionPanel>\n      <ExpansionPanel expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography className={classes.heading}>Advanced settings</Typography>\n          <Typography className={classes.secondaryHeading}>\n            Filtering has been entirely disabled for whole web server\n          </Typography>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails>\n          <Typography>\n            Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,\n            vitae egestas augue. Duis vel est augue.\n          </Typography>\n        </ExpansionPanelDetails>\n      </ExpansionPanel>\n      <ExpansionPanel expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography className={classes.heading}>Personal data</Typography>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails>\n          <Typography>\n            Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,\n            vitae egestas augue. Duis vel est augue.\n          </Typography>\n        </ExpansionPanelDetails>\n      </ExpansionPanel>\n    </div>\n  );\n}\n\nexport default ControlledExpansionPanels;\n"},2157:function(e,n){e.exports="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nconst styles = theme => ({\n  root: {\n    width: '100%',\n  },\n  heading: {\n    fontSize: theme.typography.pxToRem(15),\n    flexBasis: '33.33%',\n    flexShrink: 0,\n  },\n  secondaryHeading: {\n    fontSize: theme.typography.pxToRem(15),\n    color: theme.palette.text.secondary,\n  },\n});\n\nclass ControlledExpansionPanels extends React.Component {\n  state = {\n    expanded: null,\n  };\n\n  handleChange = panel => (event, expanded) => {\n    this.setState({\n      expanded: expanded ? panel : false,\n    });\n  };\n\n  render() {\n    const { classes } = this.props;\n    const { expanded } = this.state;\n\n    return (\n      <div className={classes.root}>\n        <ExpansionPanel expanded={expanded === 'panel1'} onChange={this.handleChange('panel1')}>\n          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n            <Typography className={classes.heading}>General settings</Typography>\n            <Typography className={classes.secondaryHeading}>I am an expansion panel</Typography>\n          </ExpansionPanelSummary>\n          <ExpansionPanelDetails>\n            <Typography>\n              Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget\n              maximus est, id dignissim quam.\n            </Typography>\n          </ExpansionPanelDetails>\n        </ExpansionPanel>\n        <ExpansionPanel expanded={expanded === 'panel2'} onChange={this.handleChange('panel2')}>\n          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n            <Typography className={classes.heading}>Users</Typography>\n            <Typography className={classes.secondaryHeading}>\n              You are currently not an owner\n            </Typography>\n          </ExpansionPanelSummary>\n          <ExpansionPanelDetails>\n            <Typography>\n              Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar\n              diam eros in elit. Pellentesque convallis laoreet laoreet.\n            </Typography>\n          </ExpansionPanelDetails>\n        </ExpansionPanel>\n        <ExpansionPanel expanded={expanded === 'panel3'} onChange={this.handleChange('panel3')}>\n          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n            <Typography className={classes.heading}>Advanced settings</Typography>\n            <Typography className={classes.secondaryHeading}>\n              Filtering has been entirely disabled for whole web server\n            </Typography>\n          </ExpansionPanelSummary>\n          <ExpansionPanelDetails>\n            <Typography>\n              Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas\n              eros, vitae egestas augue. Duis vel est augue.\n            </Typography>\n          </ExpansionPanelDetails>\n        </ExpansionPanel>\n        <ExpansionPanel expanded={expanded === 'panel4'} onChange={this.handleChange('panel4')}>\n          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n            <Typography className={classes.heading}>Personal data</Typography>\n          </ExpansionPanelSummary>\n          <ExpansionPanelDetails>\n            <Typography>\n              Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas\n              eros, vitae egestas augue. Duis vel est augue.\n            </Typography>\n          </ExpansionPanelDetails>\n        </ExpansionPanel>\n      </div>\n    );\n  }\n}\n\nControlledExpansionPanels.propTypes = {\n  classes: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles)(ControlledExpansionPanels);\n"},2158:function(e,n){e.exports="import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport MuiExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport Typography from '@material-ui/core/Typography';\n\nconst ExpansionPanel = withStyles({\n  root: {\n    border: '1px solid rgba(0,0,0,.125)',\n    boxShadow: 'none',\n    '&:not(:last-child)': {\n      borderBottom: 0,\n    },\n    '&:before': {\n      display: 'none',\n    },\n  },\n  expanded: {\n    margin: 'auto',\n  },\n})(MuiExpansionPanel);\n\nconst ExpansionPanelSummary = withStyles({\n  root: {\n    backgroundColor: 'rgba(0,0,0,.03)',\n    borderBottom: '1px solid rgba(0,0,0,.125)',\n    marginBottom: -1,\n    minHeight: 56,\n    '&$expanded': {\n      minHeight: 56,\n    },\n  },\n  content: {\n    '&$expanded': {\n      margin: '12px 0',\n    },\n  },\n  expanded: {},\n})(props => <MuiExpansionPanelSummary {...props} />);\n\nExpansionPanelSummary.muiName = 'ExpansionPanelSummary';\n\nconst ExpansionPanelDetails = withStyles(theme => ({\n  root: {\n    padding: theme.spacing.unit * 2,\n  },\n}))(MuiExpansionPanelDetails);\n\nclass CustomizedExpansionPanel extends React.Component {\n  state = {\n    expanded: 'panel1',\n  };\n\n  handleChange = panel => (event, expanded) => {\n    this.setState({\n      expanded: expanded ? panel : false,\n    });\n  };\n\n  render() {\n    const { expanded } = this.state;\n    return (\n      <div>\n        <ExpansionPanel\n          square\n          expanded={expanded === 'panel1'}\n          onChange={this.handleChange('panel1')}\n        >\n          <ExpansionPanelSummary>\n            <Typography>Collapsible Group Item #1</Typography>\n          </ExpansionPanelSummary>\n          <ExpansionPanelDetails>\n            <Typography>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus\n              ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur\n              adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.\n            </Typography>\n          </ExpansionPanelDetails>\n        </ExpansionPanel>\n        <ExpansionPanel\n          square\n          expanded={expanded === 'panel2'}\n          onChange={this.handleChange('panel2')}\n        >\n          <ExpansionPanelSummary>\n            <Typography>Collapsible Group Item #2</Typography>\n          </ExpansionPanelSummary>\n          <ExpansionPanelDetails>\n            <Typography>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus\n              ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur\n              adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.\n            </Typography>\n          </ExpansionPanelDetails>\n        </ExpansionPanel>\n        <ExpansionPanel\n          square\n          expanded={expanded === 'panel3'}\n          onChange={this.handleChange('panel3')}\n        >\n          <ExpansionPanelSummary>\n            <Typography>Collapsible Group Item #3</Typography>\n          </ExpansionPanelSummary>\n          <ExpansionPanelDetails>\n            <Typography>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus\n              ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur\n              adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.\n            </Typography>\n          </ExpansionPanelDetails>\n        </ExpansionPanel>\n      </div>\n    );\n  }\n}\n\nexport default CustomizedExpansionPanel;\n"},2159:function(e,n){e.exports="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Chip from '@material-ui/core/Chip';\nimport Button from '@material-ui/core/Button';\nimport Divider from '@material-ui/core/Divider';\n\nconst styles = theme => ({\n  root: {\n    width: '100%',\n  },\n  heading: {\n    fontSize: theme.typography.pxToRem(15),\n  },\n  secondaryHeading: {\n    fontSize: theme.typography.pxToRem(15),\n    color: theme.palette.text.secondary,\n  },\n  icon: {\n    verticalAlign: 'bottom',\n    height: 20,\n    width: 20,\n  },\n  details: {\n    alignItems: 'center',\n  },\n  column: {\n    flexBasis: '33.33%',\n  },\n  helper: {\n    borderLeft: `2px solid ${theme.palette.divider}`,\n    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,\n  },\n  link: {\n    color: theme.palette.primary.main,\n    textDecoration: 'none',\n    '&:hover': {\n      textDecoration: 'underline',\n    },\n  },\n});\n\nfunction DetailedExpansionPanel(props) {\n  const { classes } = props;\n  return (\n    <div className={classes.root}>\n      <ExpansionPanel defaultExpanded>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <div className={classes.column}>\n            <Typography className={classes.heading}>Location</Typography>\n          </div>\n          <div className={classes.column}>\n            <Typography className={classes.secondaryHeading}>Select trip destination</Typography>\n          </div>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails className={classes.details}>\n          <div className={classes.column} />\n          <div className={classes.column}>\n            <Chip label=\"Barbados\" className={classes.chip} onDelete={() => {}} />\n          </div>\n          <div className={classNames(classes.column, classes.helper)}>\n            <Typography variant=\"caption\">\n              Select your destination of choice\n              <br />\n              <a href=\"#sub-labels-and-columns\" className={classes.link}>\n                Learn more\n              </a>\n            </Typography>\n          </div>\n        </ExpansionPanelDetails>\n        <Divider />\n        <ExpansionPanelActions>\n          <Button size=\"small\">Cancel</Button>\n          <Button size=\"small\" color=\"primary\">\n            Save\n          </Button>\n        </ExpansionPanelActions>\n      </ExpansionPanel>\n    </div>\n  );\n}\n\nDetailedExpansionPanel.propTypes = {\n  classes: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles)(DetailedExpansionPanel);\n"},2160:function(e,n){e.exports="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nconst styles = theme => ({\n  root: {\n    width: '100%',\n  },\n  heading: {\n    fontSize: theme.typography.pxToRem(15),\n    fontWeight: theme.typography.fontWeightRegular,\n  },\n});\n\nfunction SimpleExpansionPanel(props) {\n  const { classes } = props;\n  return (\n    <div className={classes.root}>\n      <ExpansionPanel>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography className={classes.heading}>Expansion Panel 1</Typography>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails>\n          <Typography>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,\n            sit amet blandit leo lobortis eget.\n          </Typography>\n        </ExpansionPanelDetails>\n      </ExpansionPanel>\n      <ExpansionPanel>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography className={classes.heading}>Expansion Panel 2</Typography>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails>\n          <Typography>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,\n            sit amet blandit leo lobortis eget.\n          </Typography>\n        </ExpansionPanelDetails>\n      </ExpansionPanel>\n      <ExpansionPanel disabled>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography className={classes.heading}>Disabled Expansion Panel</Typography>\n        </ExpansionPanelSummary>\n      </ExpansionPanel>\n    </div>\n  );\n}\n\nSimpleExpansionPanel.propTypes = {\n  classes: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles)(SimpleExpansionPanel);\n"},236:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(a(1)),l=(0,t(a(21)).default)(o.default.createElement(o.default.Fragment,null,o.default.createElement("path",{d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"}),o.default.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),"ExpandMore");n.default=l},542:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return o.default}});var o=t(a(2138))},543:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return o.default}});var o=t(a(2139))},544:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return o.default}});var o=t(a(2140))},76:function(e,n,a){"use strict";var t=a(0);Object.defineProperty(n,"__esModule",{value:!0}),n.default=n.styles=void 0;var o=t(a(6)),l=t(a(3)),s=t(a(4)),i=t(a(1)),r=(t(a(2)),t(a(5))),d=(a(9),t(a(7))),p=function(e){return{root:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,width:40,height:40,fontFamily:e.typography.fontFamily,fontSize:e.typography.pxToRem(20),borderRadius:"50%",overflow:"hidden",userSelect:"none"},colorDefault:{color:e.palette.background.default,backgroundColor:"light"===e.palette.type?e.palette.grey[400]:e.palette.grey[600]},img:{width:"100%",height:"100%",textAlign:"center",objectFit:"cover"}}};function u(e){var n=e.alt,a=e.children,t=e.childrenClassName,d=e.classes,p=e.className,u=e.component,c=e.imgProps,m=e.sizes,f=e.src,h=e.srcSet,x=(0,s.default)(e,["alt","children","childrenClassName","classes","className","component","imgProps","sizes","src","srcSet"]),g=null,y=f||h;return g=y?i.default.createElement("img",(0,l.default)({alt:n,src:f,srcSet:h,sizes:m,className:d.img},c)):t&&i.default.isValidElement(a)?i.default.cloneElement(a,{className:(0,r.default)(t,a.props.className)}):a,i.default.createElement(u,(0,l.default)({className:(0,r.default)(d.root,d.system,(0,o.default)({},d.colorDefault,!y),p)},x),g)}n.styles=p,u.defaultProps={component:"div"};var c=(0,d.default)(p,{name:"MuiAvatar"})(u);n.default=c}},[[2134,1,0]]]);