%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/
Upload File :
Create Path :
Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/21.d50cc261.chunk.js

(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[21],{1046:function(e,t,n){"use strict";function a(e,t,n,a,o){return null}n.d(t,"a",(function(){return a}))},1047:function(e,t,n){"use strict";n.r(t);var a=n(15);n.d(t,"capitalize",(function(){return a.a}));var o=n(78);n.d(t,"createChainedFunction",(function(){return o.a}));var r=n(85);n.d(t,"createSvgIcon",(function(){return r.a}));var i=n(97);n.d(t,"debounce",(function(){return i.a}));var c=n(130);n.d(t,"deprecatedPropType",(function(){return c.a}));var s=n(159);n.d(t,"isMuiElement",(function(){return s.a}));var l=n(47);n.d(t,"ownerDocument",(function(){return l.a}));var u=n(160);n.d(t,"ownerWindow",(function(){return u.a}));var d=n(1134);n.d(t,"requirePropFactory",(function(){return d.a}));var m=n(87);n.d(t,"setRef",(function(){return m.a}));var p=n(1046);n.d(t,"unsupportedProp",(function(){return p.a}));var h=n(104);n.d(t,"useControlled",(function(){return h.a}));var b=n(38);n.d(t,"useEventCallback",(function(){return b.a}));var f=n(25);n.d(t,"useForkRef",(function(){return f.a}));var j=n(224);n.d(t,"unstable_useId",(function(){return j.a}));var v=n(158);n.d(t,"useIsFocusVisible",(function(){return v.a}))},1127:function(e,t,n){var a=n(373).default;function o(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(o=function(e){return e?n:t})(e)}e.exports=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=a(e)&&"function"!=typeof e)return{default:e};var n=o(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var c in e)if("default"!==c&&Object.prototype.hasOwnProperty.call(e,c)){var s=i?Object.getOwnPropertyDescriptor(e,c):null;s&&(s.get||s.set)?Object.defineProperty(r,c,s):r[c]=e[c]}return r.default=e,n&&n.set(e,r),r},e.exports.__esModule=!0,e.exports.default=e.exports},1128:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return a.createSvgIcon}});var a=n(1047)},1129:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContextProvider=t.FrameContext=void 0;var a,o=n(0),r=(a=o)&&a.__esModule?a:{default:a};var i=void 0,c=void 0;"undefined"!==typeof document&&(i=document),"undefined"!==typeof window&&(c=window);var s=t.FrameContext=r.default.createContext({document:i,window:c}),l=s.Provider,u=s.Consumer;t.FrameContextProvider=l,t.FrameContextConsumer=u},1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return w}));var a=n(118),o=n(1100),r=n(1109),i=n(1090),c=n(1117),s=n(1119),l=n(5),u=n(0),d=n(1024),m=n(551),p=n(1087),h=n(1099),b=n(11),f=n(370),j=n(371),v=n(1131),x=n.n(v),g=n(1);const y=Object(d.a)({productionPrefix:"iframe-"});class O extends u.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(f.a)({...Object(m.a)(),plugins:[...Object(m.a)().plugins,Object(j.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(g.jsxs)(g.Fragment,{children:[Object(g.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n                    html {\n                    font-size: 62.5%;\n                    font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n                    }\n                "}}),Object(g.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(g.jsx)(x.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(g.jsx)(p.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(g.jsx)(h.a,{theme:n,children:Object(u.cloneElement)(e,{container:this.state.container})})}):null})}}var B=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(O);function N(e){const[t,n]=Object(u.useState)(e.currentTabIndex),{component:d,raw:m,iframe:p,className:h}=e;return Object(g.jsxs)(r.a,{className:Object(l.a)(h,"shadow"),children:[Object(g.jsx)(o.a,{position:"static",color:"default",className:"shadow-0",children:Object(g.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[d&&Object(g.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(i.a,{children:"remove_red_eye"})}),m&&Object(g.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(i.a,{children:"code"})})]})}),Object(g.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(g.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(p?Object(g.jsx)(B,{children:Object(g.jsx)(d,{})}):Object(g.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(g.jsx)(d,{})}))}),Object(g.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:m&&Object(g.jsx)("div",{className:"flex flex-1",children:Object(g.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:m.default})})})]})]})}N.defaultProps={currentTabIndex:0};var w=N},1131:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContext=void 0;var a=n(1129);Object.defineProperty(t,"FrameContext",{enumerable:!0,get:function(){return a.FrameContext}}),Object.defineProperty(t,"FrameContextConsumer",{enumerable:!0,get:function(){return a.FrameContextConsumer}});var o,r=n(1132),i=(o=r)&&o.__esModule?o:{default:o};t.default=i.default},1132:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),r=n(0),i=d(r),c=d(n(22)),s=d(n(553)),l=n(1129),u=d(n(1133));function d(e){return e&&e.__esModule?e:{default:e}}var m=function(e){function t(e,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return a.handleLoad=function(){a.forceUpdate()},a._isMounted=!1,a}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),o(t,[{key:"componentDidMount",value:function(){this._isMounted=!0;var e=this.getDoc();e&&"complete"===e.readyState?this.forceUpdate():this.node.addEventListener("load",this.handleLoad)}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.node.removeEventListener("load",this.handleLoad)}},{key:"getDoc",value:function(){return this.node?this.node.contentDocument:null}},{key:"getMountTarget",value:function(){var e=this.getDoc();return this.props.mountTarget?e.querySelector(this.props.mountTarget):e.body.children[0]}},{key:"renderFrameContents",value:function(){if(!this._isMounted)return null;var e=this.getDoc();if(!e)return null;var t=this.props.contentDidMount,n=this.props.contentDidUpdate,a=e.defaultView||e.parentView,o=i.default.createElement(u.default,{contentDidMount:t,contentDidUpdate:n},i.default.createElement(l.FrameContextProvider,{value:{document:e,window:a}},i.default.createElement("div",{className:"frame-content"},this.props.children)));e.body.children.length<1&&(e.open("text/html","replace"),e.write(this.props.initialContent),e.close());var r=this.getMountTarget();return[c.default.createPortal(this.props.head,this.getDoc().head),c.default.createPortal(o,r)]}},{key:"render",value:function(){var e=this,t=a({},this.props,{children:void 0});return delete t.head,delete t.initialContent,delete t.mountTarget,delete t.contentDidMount,delete t.contentDidUpdate,i.default.createElement("iframe",a({},t,{ref:function(t){e.node=t}}),this.renderFrameContents())}}]),t}(r.Component);m.propTypes={style:s.default.object,head:s.default.node,initialContent:s.default.string,mountTarget:s.default.string,contentDidMount:s.default.func,contentDidUpdate:s.default.func,children:s.default.oneOfType([s.default.element,s.default.arrayOf(s.default.element)])},m.defaultProps={style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:function(){},contentDidUpdate:function(){},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'},t.default=m},1133:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),o=n(0),r=(i(o),i(n(553)));function i(e){return e&&e.__esModule?e:{default:e}}var c=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),a(t,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return o.Children.only(this.props.children)}}]),t}(o.Component);c.propTypes={children:r.default.element.isRequired,contentDidMount:r.default.func.isRequired,contentDidUpdate:r.default.func.isRequired},t.default=c},1134:function(e,t,n){"use strict";function a(e){return function(){return null}}n.d(t,"a",(function(){return a}))},1190:function(e,t,n){"use strict";var a=n(552),o=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n(0)),i=(0,a(n(1128)).default)(r.createElement("path",{d:"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"}),"Delete");t.default=i},130:function(e,t,n){"use strict";function a(e,t){return function(){return null}}n.d(t,"a",(function(){return a}))},1350:function(e,t,n){"use strict";var a=n(552),o=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n(0)),i=(0,a(n(1128)).default)(r.createElement("path",{d:"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"}),"Save");t.default=i},1836:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return c}));n(0);var a=n(1072),o=n(1098),r=n(1);const i=Object(a.a)((e=>({root:{"& > *":{margin:e.spacing(1)}}})));function c(){const e=i();return Object(r.jsxs)("div",{className:e.root,children:[Object(r.jsx)(o.a,{variant:"contained",children:"Default"}),Object(r.jsx)(o.a,{variant:"contained",color:"primary",children:"Primary"}),Object(r.jsx)(o.a,{variant:"contained",color:"secondary",children:"Secondary"}),Object(r.jsx)(o.a,{variant:"contained",disabled:!0,children:"Disabled"}),Object(r.jsx)(o.a,{variant:"contained",color:"primary",href:"#contained-buttons",children:"Link"})]})}},1837:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Button from \'@material-ui/core/Button\';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    \'& > *\': {\n      margin: theme.spacing(1),\n    },\n  },\n}));\n\nexport default function ContainedButtons() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <Button variant="contained">Default</Button>\n      <Button variant="contained" color="primary">\n        Primary\n      </Button>\n      <Button variant="contained" color="secondary">\n        Secondary\n      </Button>\n      <Button variant="contained" disabled>\n        Disabled\n      </Button>\n      <Button variant="contained" color="primary" href="#contained-buttons">\n        Link\n      </Button>\n    </div>\n  );\n}\n'},1838:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return r}));n(0);var a=n(1098),o=n(1);function r(){return Object(o.jsx)(a.a,{variant:"contained",color:"primary",disableElevation:!0,children:"Disable elevation"})}},1839:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\n\nexport default function DisableElevation() {\n  return (\n    <Button variant=\"contained\" color=\"primary\" disableElevation>\n      Disable elevation\n    </Button>\n  );\n}\n"},1840:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return c}));n(0);var a=n(1072),o=n(1098),r=n(1);const i=Object(a.a)((e=>({root:{"& > *":{margin:e.spacing(1)}}})));function c(){const e=i();return Object(r.jsxs)("div",{className:e.root,children:[Object(r.jsx)(o.a,{children:"Default"}),Object(r.jsx)(o.a,{color:"primary",children:"Primary"}),Object(r.jsx)(o.a,{color:"secondary",children:"Secondary"}),Object(r.jsx)(o.a,{disabled:!0,children:"Disabled"}),Object(r.jsx)(o.a,{href:"#text-buttons",color:"primary",children:"Link"})]})}},1841:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '& > *': {\n      margin: theme.spacing(1),\n    },\n  },\n}));\n\nexport default function TextButtons() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <Button>Default</Button>\n      <Button color=\"primary\">Primary</Button>\n      <Button color=\"secondary\">Secondary</Button>\n      <Button disabled>Disabled</Button>\n      <Button href=\"#text-buttons\" color=\"primary\">\n        Link\n      </Button>\n    </div>\n  );\n}\n"},1842:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return c}));n(0);var a=n(1072),o=n(1098),r=n(1);const i=Object(a.a)((e=>({root:{"& > *":{margin:e.spacing(1)}}})));function c(){const e=i();return Object(r.jsxs)("div",{className:e.root,children:[Object(r.jsx)(o.a,{variant:"outlined",children:"Default"}),Object(r.jsx)(o.a,{variant:"outlined",color:"primary",children:"Primary"}),Object(r.jsx)(o.a,{variant:"outlined",color:"secondary",children:"Secondary"}),Object(r.jsx)(o.a,{variant:"outlined",disabled:!0,children:"Disabled"}),Object(r.jsx)(o.a,{variant:"outlined",color:"primary",href:"#outlined-buttons",children:"Link"})]})}},1843:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Button from \'@material-ui/core/Button\';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    \'& > *\': {\n      margin: theme.spacing(1),\n    },\n  },\n}));\n\nexport default function OutlinedButtons() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <Button variant="outlined">Default</Button>\n      <Button variant="outlined" color="primary">\n        Primary\n      </Button>\n      <Button variant="outlined" color="secondary">\n        Secondary\n      </Button>\n      <Button variant="outlined" disabled>\n        Disabled\n      </Button>\n      <Button variant="outlined" color="primary" href="#outlined-buttons">\n        Link\n      </Button>\n    </div>\n  );\n}\n'},1844:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));n(0);var a=n(1072),o=n(1098),r=n(1028),i=n(1845),c=n.n(i),s=n(1);const l=Object(a.a)((e=>({root:{"& > *":{margin:e.spacing(1)}},input:{display:"none"}})));function u(){const e=l();return Object(s.jsxs)("div",{className:e.root,children:[Object(s.jsx)("input",{accept:"image/*",className:e.input,id:"contained-button-file",multiple:!0,type:"file"}),Object(s.jsx)("label",{htmlFor:"contained-button-file",children:Object(s.jsx)(o.a,{variant:"contained",color:"primary",component:"span",children:"Upload"})}),Object(s.jsx)("input",{accept:"image/*",className:e.input,id:"icon-button-file",type:"file"}),Object(s.jsx)("label",{htmlFor:"icon-button-file",children:Object(s.jsx)(r.a,{color:"primary","aria-label":"upload picture",component:"span",children:Object(s.jsx)(c.a,{})})})]})}},1845:function(e,t,n){"use strict";var a=n(552),o=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n(0)),i=(0,a(n(1128)).default)(r.createElement(r.Fragment,null,r.createElement("circle",{cx:"12",cy:"12",r:"3.2"}),r.createElement("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"})),"PhotoCamera");t.default=i},1846:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Button from \'@material-ui/core/Button\';\nimport IconButton from \'@material-ui/core/IconButton\';\nimport PhotoCamera from \'@material-ui/icons/PhotoCamera\';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    \'& > *\': {\n      margin: theme.spacing(1),\n    },\n  },\n  input: {\n    display: \'none\',\n  },\n}));\n\nexport default function UploadButtons() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <input\n        accept="image/*"\n        className={classes.input}\n        id="contained-button-file"\n        multiple\n        type="file"\n      />\n      <label htmlFor="contained-button-file">\n        <Button variant="contained" color="primary" component="span">\n          Upload\n        </Button>\n      </label>\n      <input accept="image/*" className={classes.input} id="icon-button-file" type="file" />\n      <label htmlFor="icon-button-file">\n        <IconButton color="primary" aria-label="upload picture" component="span">\n          <PhotoCamera />\n        </IconButton>\n      </label>\n    </div>\n  );\n}\n'},1847:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return m}));n(0);var a=n(1072),o=n(1098),r=n(1028),i=n(1190),c=n.n(i),s=n(1848),l=n.n(s),u=n(1);const d=Object(a.a)((e=>({margin:{margin:e.spacing(1)},extendedIcon:{marginRight:e.spacing(1)}})));function m(){const e=d();return Object(u.jsxs)("div",{children:[Object(u.jsxs)("div",{children:[Object(u.jsx)(o.a,{size:"small",className:e.margin,children:"Small"}),Object(u.jsx)(o.a,{size:"medium",className:e.margin,children:"Medium"}),Object(u.jsx)(o.a,{size:"large",className:e.margin,children:"Large"})]}),Object(u.jsxs)("div",{children:[Object(u.jsx)(o.a,{variant:"outlined",size:"small",color:"primary",className:e.margin,children:"Small"}),Object(u.jsx)(o.a,{variant:"outlined",size:"medium",color:"primary",className:e.margin,children:"Medium"}),Object(u.jsx)(o.a,{variant:"outlined",size:"large",color:"primary",className:e.margin,children:"Large"})]}),Object(u.jsxs)("div",{children:[Object(u.jsx)(o.a,{variant:"contained",size:"small",color:"primary",className:e.margin,children:"Small"}),Object(u.jsx)(o.a,{variant:"contained",size:"medium",color:"primary",className:e.margin,children:"Medium"}),Object(u.jsx)(o.a,{variant:"contained",size:"large",color:"primary",className:e.margin,children:"Large"})]}),Object(u.jsxs)("div",{children:[Object(u.jsx)(r.a,{"aria-label":"delete",className:e.margin,size:"small",children:Object(u.jsx)(l.a,{fontSize:"inherit"})}),Object(u.jsx)(r.a,{"aria-label":"delete",className:e.margin,children:Object(u.jsx)(c.a,{fontSize:"small"})}),Object(u.jsx)(r.a,{"aria-label":"delete",className:e.margin,children:Object(u.jsx)(c.a,{})}),Object(u.jsx)(r.a,{"aria-label":"delete",className:e.margin,children:Object(u.jsx)(c.a,{fontSize:"large"})})]})]})}},1848:function(e,t,n){"use strict";var a=n(552),o=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n(0)),i=(0,a(n(1128)).default)(r.createElement("path",{d:"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"}),"ArrowDownward");t.default=i},1849:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Button from \'@material-ui/core/Button\';\nimport IconButton from \'@material-ui/core/IconButton\';\nimport DeleteIcon from \'@material-ui/icons/Delete\';\nimport ArrowDownwardIcon from \'@material-ui/icons/ArrowDownward\';\n\nconst useStyles = makeStyles((theme) => ({\n  margin: {\n    margin: theme.spacing(1),\n  },\n  extendedIcon: {\n    marginRight: theme.spacing(1),\n  },\n}));\n\nexport default function ButtonSizes() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <div>\n        <Button size="small" className={classes.margin}>\n          Small\n        </Button>\n        <Button size="medium" className={classes.margin}>\n          Medium\n        </Button>\n        <Button size="large" className={classes.margin}>\n          Large\n        </Button>\n      </div>\n      <div>\n        <Button variant="outlined" size="small" color="primary" className={classes.margin}>\n          Small\n        </Button>\n        <Button variant="outlined" size="medium" color="primary" className={classes.margin}>\n          Medium\n        </Button>\n        <Button variant="outlined" size="large" color="primary" className={classes.margin}>\n          Large\n        </Button>\n      </div>\n      <div>\n        <Button variant="contained" size="small" color="primary" className={classes.margin}>\n          Small\n        </Button>\n        <Button variant="contained" size="medium" color="primary" className={classes.margin}>\n          Medium\n        </Button>\n        <Button variant="contained" size="large" color="primary" className={classes.margin}>\n          Large\n        </Button>\n      </div>\n      <div>\n        <IconButton aria-label="delete" className={classes.margin} size="small">\n          <ArrowDownwardIcon fontSize="inherit" />\n        </IconButton>\n        <IconButton aria-label="delete" className={classes.margin}>\n          <DeleteIcon fontSize="small" />\n        </IconButton>\n        <IconButton aria-label="delete" className={classes.margin}>\n          <DeleteIcon />\n        </IconButton>\n        <IconButton aria-label="delete" className={classes.margin}>\n          <DeleteIcon fontSize="large" />\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n'},1850:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return f}));n(0);var a=n(1098),o=n(1072),r=n(1190),i=n.n(r),c=n(1851),s=n.n(c),l=n(1852),u=n.n(l),d=n(1090),m=n(1350),p=n.n(m),h=n(1);const b=Object(o.a)((e=>({button:{margin:e.spacing(1)}})));function f(){const e=b();return Object(h.jsxs)("div",{children:[Object(h.jsx)(a.a,{variant:"contained",color:"secondary",className:e.button,startIcon:Object(h.jsx)(i.a,{}),children:"Delete"}),Object(h.jsx)(a.a,{variant:"contained",color:"primary",className:e.button,endIcon:Object(h.jsx)(d.a,{children:"send"}),children:"Send"}),Object(h.jsx)(a.a,{variant:"contained",color:"default",className:e.button,startIcon:Object(h.jsx)(s.a,{}),children:"Upload"}),Object(h.jsx)(a.a,{variant:"contained",disabled:!0,color:"secondary",className:e.button,startIcon:Object(h.jsx)(u.a,{}),children:"Talk"}),Object(h.jsx)(a.a,{variant:"contained",color:"primary",size:"small",className:e.button,startIcon:Object(h.jsx)(p.a,{}),children:"Save"}),Object(h.jsx)(a.a,{variant:"contained",color:"primary",size:"large",className:e.button,startIcon:Object(h.jsx)(p.a,{}),children:"Save"})]})}},1851:function(e,t,n){"use strict";var a=n(552),o=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n(0)),i=(0,a(n(1128)).default)(r.createElement("path",{d:"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"}),"CloudUpload");t.default=i},1852:function(e,t,n){"use strict";var a=n(552),o=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n(0)),i=(0,a(n(1128)).default)(r.createElement("path",{d:"M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"}),"KeyboardVoice");t.default=i},1853:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport Button from \'@material-ui/core/Button\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport DeleteIcon from \'@material-ui/icons/Delete\';\nimport CloudUploadIcon from \'@material-ui/icons/CloudUpload\';\nimport KeyboardVoiceIcon from \'@material-ui/icons/KeyboardVoice\';\nimport Icon from \'@material-ui/core/Icon\';\nimport SaveIcon from \'@material-ui/icons/Save\';\n\nconst useStyles = makeStyles((theme) => ({\n  button: {\n    margin: theme.spacing(1),\n  },\n}));\n\nexport default function IconLabelButtons() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <Button\n        variant="contained"\n        color="secondary"\n        className={classes.button}\n        startIcon={<DeleteIcon />}\n      >\n        Delete\n      </Button>\n      {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */}\n      <Button\n        variant="contained"\n        color="primary"\n        className={classes.button}\n        endIcon={<Icon>send</Icon>}\n      >\n        Send\n      </Button>\n      <Button\n        variant="contained"\n        color="default"\n        className={classes.button}\n        startIcon={<CloudUploadIcon />}\n      >\n        Upload\n      </Button>\n      <Button\n        variant="contained"\n        disabled\n        color="secondary"\n        className={classes.button}\n        startIcon={<KeyboardVoiceIcon />}\n      >\n        Talk\n      </Button>\n      <Button\n        variant="contained"\n        color="primary"\n        size="small"\n        className={classes.button}\n        startIcon={<SaveIcon />}\n      >\n        Save\n      </Button>\n      <Button\n        variant="contained"\n        color="primary"\n        size="large"\n        className={classes.button}\n        startIcon={<SaveIcon />}\n      >\n        Save\n      </Button>\n    </div>\n  );\n}\n'},1854:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));n(0);var a=n(1072),o=n(1028),r=n(1190),i=n.n(r),c=n(1855),s=n.n(c),l=n(1856),u=n.n(l),d=n(1);const m=Object(a.a)((e=>({root:{"& > *":{margin:e.spacing(1)}}})));function p(){const e=m();return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{"aria-label":"delete",children:Object(d.jsx)(i.a,{})}),Object(d.jsx)(o.a,{"aria-label":"delete",disabled:!0,color:"primary",children:Object(d.jsx)(i.a,{})}),Object(d.jsx)(o.a,{color:"secondary","aria-label":"add an alarm",children:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{color:"primary","aria-label":"add to shopping cart",children:Object(d.jsx)(u.a,{})})]})}},1855:function(e,t,n){"use strict";var a=n(552),o=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n(0)),i=(0,a(n(1128)).default)(r.createElement("path",{d:"M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"}),"Alarm");t.default=i},1856:function(e,t,n){"use strict";var a=n(552),o=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n(0)),i=(0,a(n(1128)).default)(r.createElement("path",{d:"M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"}),"AddShoppingCart");t.default=i},1857:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport IconButton from '@material-ui/core/IconButton';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport AlarmIcon from '@material-ui/icons/Alarm';\nimport AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '& > *': {\n      margin: theme.spacing(1),\n    },\n  },\n}));\n\nexport default function IconButtons() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <IconButton aria-label=\"delete\">\n        <DeleteIcon />\n      </IconButton>\n      <IconButton aria-label=\"delete\" disabled color=\"primary\">\n        <DeleteIcon />\n      </IconButton>\n      <IconButton color=\"secondary\" aria-label=\"add an alarm\">\n        <AlarmIcon />\n      </IconButton>\n      <IconButton color=\"primary\" aria-label=\"add to shopping cart\">\n        <AddShoppingCartIcon />\n      </IconButton>\n    </div>\n  );\n}\n"},1858:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return b}));n(0);var a=n(11),o=n(1072),r=n(386),i=n(1099),c=n(1098),s=n(425),l=n(149),u=n(1);const d=Object(a.a)({root:{boxShadow:"none",textTransform:"none",fontSize:16,padding:"6px 12px",border:"1px solid",lineHeight:1.5,backgroundColor:"#0063cc",borderColor:"#0063cc",fontFamily:["-apple-system","BlinkMacSystemFont",'"Segoe UI"',"Roboto",'"Helvetica Neue"',"Arial","sans-serif",'"Apple Color Emoji"','"Segoe UI Emoji"','"Segoe UI Symbol"'].join(","),"&:hover":{backgroundColor:"#0069d9",borderColor:"#0062cc",boxShadow:"none"},"&:active":{boxShadow:"none",backgroundColor:"#0062cc",borderColor:"#005cbf"},"&:focus":{boxShadow:"0 0 0 0.2rem rgba(0,123,255,.5)"}}})(c.a),m=Object(a.a)((e=>({root:{color:e.palette.getContrastText(s.a[500]),backgroundColor:s.a[500],"&:hover":{backgroundColor:s.a[700]}}})))(c.a),p=Object(o.a)((e=>({margin:{margin:e.spacing(1)}}))),h=Object(r.b)({palette:{primary:l.a}});function b(){const e=p();return Object(u.jsxs)("div",{children:[Object(u.jsx)(m,{variant:"contained",color:"primary",className:e.margin,children:"Custom CSS"}),Object(u.jsx)(i.a,{theme:h,children:Object(u.jsx)(c.a,{variant:"contained",color:"primary",className:e.margin,children:"Theme Provider"})}),Object(u.jsx)(d,{variant:"contained",color:"primary",disableRipple:!0,className:e.margin,children:"Bootstrap"})]})}},1859:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { createTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport { green, purple } from '@material-ui/core/colors';\n\nconst BootstrapButton = withStyles({\n  root: {\n    boxShadow: 'none',\n    textTransform: 'none',\n    fontSize: 16,\n    padding: '6px 12px',\n    border: '1px solid',\n    lineHeight: 1.5,\n    backgroundColor: '#0063cc',\n    borderColor: '#0063cc',\n    fontFamily: [\n      '-apple-system',\n      'BlinkMacSystemFont',\n      '\"Segoe UI\"',\n      'Roboto',\n      '\"Helvetica Neue\"',\n      'Arial',\n      'sans-serif',\n      '\"Apple Color Emoji\"',\n      '\"Segoe UI Emoji\"',\n      '\"Segoe UI Symbol\"',\n    ].join(','),\n    '&:hover': {\n      backgroundColor: '#0069d9',\n      borderColor: '#0062cc',\n      boxShadow: 'none',\n    },\n    '&:active': {\n      boxShadow: 'none',\n      backgroundColor: '#0062cc',\n      borderColor: '#005cbf',\n    },\n    '&:focus': {\n      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',\n    },\n  },\n})(Button);\n\nconst ColorButton = withStyles((theme) => ({\n  root: {\n    color: theme.palette.getContrastText(purple[500]),\n    backgroundColor: purple[500],\n    '&:hover': {\n      backgroundColor: purple[700],\n    },\n  },\n}))(Button);\n\nconst useStyles = makeStyles((theme) => ({\n  margin: {\n    margin: theme.spacing(1),\n  },\n}));\n\nconst theme = createTheme({\n  palette: {\n    primary: green,\n  },\n});\n\nexport default function CustomizedButtons() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <ColorButton variant=\"contained\" color=\"primary\" className={classes.margin}>\n        Custom CSS\n      </ColorButton>\n      <ThemeProvider theme={theme}>\n        <Button variant=\"contained\" color=\"primary\" className={classes.margin}>\n          Theme Provider\n        </Button>\n      </ThemeProvider>\n      <BootstrapButton variant=\"contained\" color=\"primary\" disableRipple className={classes.margin}>\n        Bootstrap\n      </BootstrapButton>\n    </div>\n  );\n}\n"},1860:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));n(0);var a=n(1072),o=n(221),r=n(194),i=n(1);const c=[{url:"/material-ui-static/images/image-list/breakfast.jpg",title:"Breakfast",width:"40%"},{url:"/material-ui-static/images/image-list/burgers.jpg",title:"Burgers",width:"30%"},{url:"/material-ui-static/images/image-list/camera.jpg",title:"Camera",width:"30%"}],s=Object(a.a)((e=>({root:{display:"flex",flexWrap:"wrap",minWidth:300,width:"100%"},image:{position:"relative",height:200,[e.breakpoints.down("xs")]:{width:"100% !important",height:100},"&:hover, &$focusVisible":{zIndex:1,"& $imageBackdrop":{opacity:.15},"& $imageMarked":{opacity:0},"& $imageTitle":{border:"4px solid currentColor"}}},focusVisible:{},imageButton:{position:"absolute",left:0,right:0,top:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",color:e.palette.common.white},imageSrc:{position:"absolute",left:0,right:0,top:0,bottom:0,backgroundSize:"cover",backgroundPosition:"center 40%"},imageBackdrop:{position:"absolute",left:0,right:0,top:0,bottom:0,backgroundColor:e.palette.common.black,opacity:.4,transition:e.transitions.create("opacity")},imageTitle:{position:"relative",padding:"".concat(e.spacing(2),"px ").concat(e.spacing(4),"px ").concat(e.spacing(1)+6,"px")},imageMarked:{height:3,width:18,backgroundColor:e.palette.common.white,position:"absolute",bottom:-2,left:"calc(50% - 9px)",transition:e.transitions.create("opacity")}})));function l(){const e=s();return Object(i.jsx)("div",{className:e.root,children:c.map((t=>Object(i.jsxs)(o.a,{focusRipple:!0,className:e.image,focusVisibleClassName:e.focusVisible,style:{width:t.width},children:[Object(i.jsx)("span",{className:e.imageSrc,style:{backgroundImage:"url(".concat(t.url,")")}}),Object(i.jsx)("span",{className:e.imageBackdrop}),Object(i.jsx)("span",{className:e.imageButton,children:Object(i.jsxs)(r.a,{component:"span",variant:"subtitle1",color:"inherit",className:e.imageTitle,children:[t.title,Object(i.jsx)("span",{className:e.imageMarked})]})})]},t.title)))})}},1861:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ButtonBase from '@material-ui/core/ButtonBase';\nimport Typography from '@material-ui/core/Typography';\n\nconst images = [\n  {\n    url: '/material-ui-static/images/image-list/breakfast.jpg',\n    title: 'Breakfast',\n    width: '40%',\n  },\n  {\n    url: '/material-ui-static/images/image-list/burgers.jpg',\n    title: 'Burgers',\n    width: '30%',\n  },\n  {\n    url: '/material-ui-static/images/image-list/camera.jpg',\n    title: 'Camera',\n    width: '30%',\n  },\n];\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    minWidth: 300,\n    width: '100%',\n  },\n  image: {\n    position: 'relative',\n    height: 200,\n    [theme.breakpoints.down('xs')]: {\n      width: '100% !important', // Overrides inline-style\n      height: 100,\n    },\n    '&:hover, &$focusVisible': {\n      zIndex: 1,\n      '& $imageBackdrop': {\n        opacity: 0.15,\n      },\n      '& $imageMarked': {\n        opacity: 0,\n      },\n      '& $imageTitle': {\n        border: '4px solid currentColor',\n      },\n    },\n  },\n  focusVisible: {},\n  imageButton: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    top: 0,\n    bottom: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: theme.palette.common.white,\n  },\n  imageSrc: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    top: 0,\n    bottom: 0,\n    backgroundSize: 'cover',\n    backgroundPosition: 'center 40%',\n  },\n  imageBackdrop: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    top: 0,\n    bottom: 0,\n    backgroundColor: theme.palette.common.black,\n    opacity: 0.4,\n    transition: theme.transitions.create('opacity'),\n  },\n  imageTitle: {\n    position: 'relative',\n    padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`,\n  },\n  imageMarked: {\n    height: 3,\n    width: 18,\n    backgroundColor: theme.palette.common.white,\n    position: 'absolute',\n    bottom: -2,\n    left: 'calc(50% - 9px)',\n    transition: theme.transitions.create('opacity'),\n  },\n}));\n\nexport default function ButtonBases() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      {images.map((image) => (\n        <ButtonBase\n          focusRipple\n          key={image.title}\n          className={classes.image}\n          focusVisibleClassName={classes.focusVisible}\n          style={{\n            width: image.width,\n          }}\n        >\n          <span\n            className={classes.imageSrc}\n            style={{\n              backgroundImage: `url(${image.url})`,\n            }}\n          />\n          <span className={classes.imageBackdrop} />\n          <span className={classes.imageButton}>\n            <Typography\n              component=\"span\"\n              variant=\"subtitle1\"\n              color=\"inherit\"\n              className={classes.imageTitle}\n            >\n              {image.title}\n              <span className={classes.imageMarked} />\n            </Typography>\n          </span>\n        </ButtonBase>\n      ))}\n    </div>\n  );\n}\n"},2570:function(e,t,n){"use strict";n.r(t);var a=n(1130),o=n(118),r=n(1098),i=n(1090),c=n(194),s=n(1072),l=n(1);const u=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return u(),Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(l.jsxs)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/buttons",target:"_blank",role:"button",children:[Object(l.jsx)(i.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(c.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Button"}),Object(l.jsx)(c.a,{className:"description",children:"Buttons allow users to take actions, and make choices, with a single tap."}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("a",{href:"https://material.io/design/components/buttons.html",children:"Buttons"})," communicate actions that users can take. They are typically placed throughout your UI, in places like:"]}),Object(l.jsxs)("ul",{children:[Object(l.jsx)("li",{children:"Dialogs"}),Object(l.jsx)("li",{children:"Modal windows"}),Object(l.jsx)("li",{children:"Forms"}),Object(l.jsx)("li",{children:"Cards"}),Object(l.jsx)("li",{children:"Toolbars"})]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Contained Buttons"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("a",{href:"https://material.io/design/components/buttons.html#contained-button",children:"Contained buttons"}),"are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1836).default,raw:n(1837)})}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["You can remove the elevation with the ",Object(l.jsx)("code",{children:"disableElevation"})," prop."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1838).default,raw:n(1839)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Text Buttons"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("a",{href:"https://material.io/design/components/buttons.html#text-button",children:"Text buttons"}),"are typically used for less-pronounced actions, including those located:"]}),Object(l.jsxs)("ul",{children:[Object(l.jsx)("li",{children:"In dialogs"}),Object(l.jsx)("li",{children:"In cards"})]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"In cards, text buttons help maintain an emphasis on card content."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1840).default,raw:n(1841)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Outlined Buttons"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("a",{href:"https://material.io/design/components/buttons.html#outlined-button",children:"Outlined buttons"}),"are medium-emphasis buttons. They contain actions that are important, but aren\u2019t the primary action in an app."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1842).default,raw:n(1843)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Handling clicks"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["All components accept an ",Object(l.jsx)("code",{children:"onClick"})," handler that is applied to the root DOM element."]}),Object(l.jsx)(o.a,{component:"pre",className:"language-jsx",children:" \n<Button onClick={() => { alert('clicked') }}>Click me</Button>\n"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["Note that the documentation ",Object(l.jsx)("a",{href:"/guides/api/#native-properties",children:"avoids"})," mentioning native props (there are a lot) in the API section of the components."]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Upload button"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1844).default,raw:n(1846)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Sizes"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["Fancy larger or smaller buttons? Use the ",Object(l.jsx)("code",{children:"size"})," property."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1847).default,raw:n(1849)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Buttons with icons and label"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1850).default,raw:n(1853)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Icon Buttons"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"Icon buttons are commonly found in app bars and toolbars."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1854).default,raw:n(1857)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized buttons"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["Here are some examples of customizing the component. You can learn more about this in the",Object(l.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1858).default,raw:n(1859)})}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["\ud83c\udfa8 If you are looking for inspiration, you can check"," ",Object(l.jsx)("a",{href:"https://mui-treasury.com/styles/button",children:"MUI Treasury's customization examples"}),"."]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Complex Buttons"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the ",Object(l.jsx)("code",{children:"ButtonBase"}),". You can take advantage of this lower level component to build custom interactions."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1860).default,raw:n(1861)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Third-party routing library"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["One common use case is to use the button to trigger navigation to a new page. The"," ",Object(l.jsx)("code",{children:"ButtonBase"})," component provides a property to handle this use case:"," ",Object(l.jsx)("code",{children:"component"}),". However for certain focus polyfills ",Object(l.jsx)("code",{children:"ButtonBase"})," requires the DOM node of the provided component. This is achieved by attaching a ref to the component and expecting that the component forwards this ref to the underlying DOM node. Given that many of the interactive components rely on ",Object(l.jsx)("code",{children:"ButtonBase"}),", you should be able to take advantage of it everywhere."]}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["Here is an ",Object(l.jsx)("a",{href:"/guides/composition/#button",children:"integration example with react-router"}),"."]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Limitations"}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Cursor not-allowed"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["The ButtonBase component sets ",Object(l.jsx)("code",{children:"pointer-events: none;"})," on disabled buttons, which prevents the appearance of a disabled cursor."]}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["If you wish to use ",Object(l.jsx)("code",{children:"not-allowed"}),", you have two options:"]}),Object(l.jsxs)("ol",{children:[Object(l.jsxs)("li",{children:[Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("strong",{children:"CSS only"}),". You can remove the pointer events style on the disabled state of the ",Object(l.jsx)("code",{children:"<button>"})," element:"]}),Object(l.jsx)(o.a,{component:"pre",className:"language-css",children:" \n.MuiButtonBase-root:disabled {\n cursor: not-allowed;\n pointer-events: auto;\n}\n"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"However:"}),Object(l.jsxs)("ul",{children:[Object(l.jsxs)("li",{children:["You should add ",Object(l.jsx)("code",{children:"pointer-events: none;"})," back when you need to display"," ",Object(l.jsx)("a",{href:"/components/tooltips/#disabled-elements",children:"tooltips on disabled elements"}),"."]}),Object(l.jsxs)("li",{children:["The cursor won't change if you render something other than a button element, for instance, a link ",Object(l.jsx)("code",{children:"<a>"})," element."]})]})]}),Object(l.jsxs)("li",{children:[Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("strong",{children:"DOM change"}),". You can wrap the button:"]}),Object(l.jsx)(o.a,{component:"pre",className:"language-jsx",children:" \n<span style={{ cursor: 'not-allowed' }}>\n <Button component={Link} disabled>\n   disabled\n </Button>\n</span>\n"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["This has the advantage of supporting any element, for instance, a link"," ",Object(l.jsx)("code",{children:"<a>"})," element."]})]})]})]})}}}]);

Zerion Mini Shell 1.0