%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/33.366d1225.chunk.js

(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[33],{1046:function(e,n,t){"use strict";function o(e,n,t,o,a){return null}t.d(n,"a",(function(){return o}))},1047:function(e,n,t){"use strict";t.r(n);var o=t(15);t.d(n,"capitalize",(function(){return o.a}));var a=t(78);t.d(n,"createChainedFunction",(function(){return a.a}));var r=t(85);t.d(n,"createSvgIcon",(function(){return r.a}));var c=t(97);t.d(n,"debounce",(function(){return c.a}));var l=t(130);t.d(n,"deprecatedPropType",(function(){return l.a}));var i=t(159);t.d(n,"isMuiElement",(function(){return i.a}));var s=t(47);t.d(n,"ownerDocument",(function(){return s.a}));var d=t(160);t.d(n,"ownerWindow",(function(){return d.a}));var u=t(1134);t.d(n,"requirePropFactory",(function(){return u.a}));var h=t(87);t.d(n,"setRef",(function(){return h.a}));var b=t(1046);t.d(n,"unsupportedProp",(function(){return b.a}));var m=t(104);t.d(n,"useControlled",(function(){return m.a}));var p=t(38);t.d(n,"useEventCallback",(function(){return p.a}));var f=t(25);t.d(n,"useForkRef",(function(){return f.a}));var j=t(224);t.d(n,"unstable_useId",(function(){return j.a}));var x=t(158);t.d(n,"useIsFocusVisible",(function(){return x.a}))},1127:function(e,n,t){var o=t(373).default;function a(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,t=new WeakMap;return(a=function(e){return e?t:n})(e)}e.exports=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=o(e)&&"function"!=typeof e)return{default:e};var t=a(n);if(t&&t.has(e))return t.get(e);var r={__proto__:null},c=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var i=c?Object.getOwnPropertyDescriptor(e,l):null;i&&(i.get||i.set)?Object.defineProperty(r,l,i):r[l]=e[l]}return r.default=e,t&&t.set(e,r),r},e.exports.__esModule=!0,e.exports.default=e.exports},1128:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return o.createSvgIcon}});var o=t(1047)},1129:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.FrameContextConsumer=n.FrameContextProvider=n.FrameContext=void 0;var o,a=t(0),r=(o=a)&&o.__esModule?o:{default:o};var c=void 0,l=void 0;"undefined"!==typeof document&&(c=document),"undefined"!==typeof window&&(l=window);var i=n.FrameContext=r.default.createContext({document:c,window:l}),s=i.Provider,d=i.Consumer;n.FrameContextProvider=s,n.FrameContextConsumer=d},1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return w}));var o=t(118),a=t(1100),r=t(1109),c=t(1090),l=t(1117),i=t(1119),s=t(5),d=t(0),u=t(1024),h=t(551),b=t(1087),m=t(1099),p=t(11),f=t(370),j=t(371),x=t(1131),k=t.n(x),C=t(1);const v=Object(u.a)({productionPrefix:"iframe-"});class O extends d.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(h.a)(),plugins:[...Object(h.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(C.jsxs)(C.Fragment,{children:[Object(C.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n                    html {\n                    font-size: 62.5%;\n                    font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n                    }\n                "}}),Object(C.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:t}=this.props;return Object(C.jsx)(k.a,{head:this.renderHead(),ref:this.handleRef,className:Object(s.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(C.jsx)(b.b,{jss:this.state.jss,generateClassName:v,sheetsManager:this.state.sheetsManager,children:Object(C.jsx)(m.a,{theme:t,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var g=Object(p.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(O);function y(e){const[n,t]=Object(d.useState)(e.currentTabIndex),{component:u,raw:h,iframe:b,className:m}=e;return Object(C.jsxs)(r.a,{className:Object(s.a)(m,"shadow"),children:[Object(C.jsx)(a.a,{position:"static",color:"default",className:"shadow-0",children:Object(C.jsxs)(i.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[u&&Object(C.jsx)(l.a,{classes:{root:"min-w-64"},icon:Object(C.jsx)(c.a,{children:"remove_red_eye"})}),h&&Object(C.jsx)(l.a,{classes:{root:"min-w-64"},icon:Object(C.jsx)(c.a,{children:"code"})})]})}),Object(C.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(C.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:u&&(b?Object(C.jsx)(g,{children:Object(C.jsx)(u,{})}):Object(C.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(C.jsx)(u,{})}))}),Object(C.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:h&&Object(C.jsx)("div",{className:"flex flex-1",children:Object(C.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:h.default})})})]})]})}y.defaultProps={currentTabIndex:0};var w=y},1131:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.FrameContextConsumer=n.FrameContext=void 0;var o=t(1129);Object.defineProperty(n,"FrameContext",{enumerable:!0,get:function(){return o.FrameContext}}),Object.defineProperty(n,"FrameContextConsumer",{enumerable:!0,get:function(){return o.FrameContextConsumer}});var a,r=t(1132),c=(a=r)&&a.__esModule?a:{default:a};n.default=c.default},1132:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},a=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}(),r=t(0),c=u(r),l=u(t(22)),i=u(t(553)),s=t(1129),d=u(t(1133));function u(e){return e&&e.__esModule?e:{default:e}}var h=function(e){function n(e,t){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n);var o=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!==typeof n&&"function"!==typeof n?e:n}(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e,t));return o.handleLoad=function(){o.forceUpdate()},o._isMounted=!1,o}return function(e,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}(n,e),a(n,[{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 n=this.props.contentDidMount,t=this.props.contentDidUpdate,o=e.defaultView||e.parentView,a=c.default.createElement(d.default,{contentDidMount:n,contentDidUpdate:t},c.default.createElement(s.FrameContextProvider,{value:{document:e,window:o}},c.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[l.default.createPortal(this.props.head,this.getDoc().head),l.default.createPortal(a,r)]}},{key:"render",value:function(){var e=this,n=o({},this.props,{children:void 0});return delete n.head,delete n.initialContent,delete n.mountTarget,delete n.contentDidMount,delete n.contentDidUpdate,c.default.createElement("iframe",o({},n,{ref:function(n){e.node=n}}),this.renderFrameContents())}}]),n}(r.Component);h.propTypes={style:i.default.object,head:i.default.node,initialContent:i.default.string,mountTarget:i.default.string,contentDidMount:i.default.func,contentDidUpdate:i.default.func,children:i.default.oneOfType([i.default.element,i.default.arrayOf(i.default.element)])},h.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>'},n.default=h},1133:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}(),a=t(0),r=(c(a),c(t(553)));function c(e){return e&&e.__esModule?e:{default:e}}var l=function(e){function n(){return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!==typeof n&&"function"!==typeof n?e:n}(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return function(e,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}(n,e),o(n,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return a.Children.only(this.props.children)}}]),n}(a.Component);l.propTypes={children:r.default.element.isRequired,contentDidMount:r.default.func.isRequired,contentDidUpdate:r.default.func.isRequired},n.default=l},1134:function(e,n,t){"use strict";function o(e){return function(){return null}}t.d(n,"a",(function(){return o}))},1165:function(e,n,t){"use strict";var o=t(2),a=t(7),r=t(0),c=t(8),l=t(228),i=t(85),s=Object(i.a)(r.createElement("path",{d:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"}),"CheckBoxOutlineBlank"),d=Object(i.a)(r.createElement("path",{d:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"}),"CheckBox"),u=t(31),h=Object(i.a)(r.createElement("path",{d:"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"}),"IndeterminateCheckBox"),b=t(15),m=t(11),p=r.createElement(d,null),f=r.createElement(s,null),j=r.createElement(h,null),x=r.forwardRef((function(e,n){var t=e.checkedIcon,i=void 0===t?p:t,s=e.classes,d=e.color,u=void 0===d?"secondary":d,h=e.icon,m=void 0===h?f:h,x=e.indeterminate,k=void 0!==x&&x,C=e.indeterminateIcon,v=void 0===C?j:C,O=e.inputProps,g=e.size,y=void 0===g?"medium":g,w=Object(a.a)(e,["checkedIcon","classes","color","icon","indeterminate","indeterminateIcon","inputProps","size"]),F=k?v:m,P=k?v:i;return r.createElement(l.a,Object(o.a)({type:"checkbox",classes:{root:Object(c.a)(s.root,s["color".concat(Object(b.a)(u))],k&&s.indeterminate),checked:s.checked,disabled:s.disabled},color:u,inputProps:Object(o.a)({"data-indeterminate":k},O),icon:r.cloneElement(F,{fontSize:void 0===F.props.fontSize&&"small"===y?y:F.props.fontSize}),checkedIcon:r.cloneElement(P,{fontSize:void 0===P.props.fontSize&&"small"===y?y:P.props.fontSize}),ref:n},w))}));n.a=Object(m.a)((function(e){return{root:{color:e.palette.text.secondary},checked:{},disabled:{},indeterminate:{},colorPrimary:{"&$checked":{color:e.palette.primary.main,"&:hover":{backgroundColor:Object(u.a)(e.palette.primary.main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}}},"&$disabled":{color:e.palette.action.disabled}},colorSecondary:{"&$checked":{color:e.palette.secondary.main,"&:hover":{backgroundColor:Object(u.a)(e.palette.secondary.main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}}},"&$disabled":{color:e.palette.action.disabled}}}}),{name:"MuiCheckbox"})(x)},1175:function(e,n,t){"use strict";var o=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),c=(0,o(t(1128)).default)(r.createElement("path",{d:"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"}),"Favorite");n.default=c},130:function(e,n,t){"use strict";function o(e,n){return function(){return null}}t.d(n,"a",(function(){return o}))},1346:function(e,n,t){"use strict";var o=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),c=(0,o(t(1128)).default)(r.createElement("path",{d:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"}),"CheckBoxOutlineBlank");n.default=c},1347:function(e,n,t){"use strict";var o=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),c=(0,o(t(1128)).default)(r.createElement("path",{d:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"}),"CheckBox");n.default=c},1878:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return l}));var o=t(0),a=t.n(o),r=t(1165),c=t(1);function l(){const[e,n]=a.a.useState(!0);return Object(c.jsxs)("div",{children:[Object(c.jsx)(r.a,{checked:e,onChange:e=>{n(e.target.checked)},inputProps:{"aria-label":"primary checkbox"}}),Object(c.jsx)(r.a,{defaultChecked:!0,color:"primary",inputProps:{"aria-label":"secondary checkbox"}}),Object(c.jsx)(r.a,{inputProps:{"aria-label":"uncontrolled-checkbox"}}),Object(c.jsx)(r.a,{disabled:!0,inputProps:{"aria-label":"disabled checkbox"}}),Object(c.jsx)(r.a,{disabled:!0,checked:!0,inputProps:{"aria-label":"disabled checked checkbox"}}),Object(c.jsx)(r.a,{defaultChecked:!0,indeterminate:!0,inputProps:{"aria-label":"indeterminate checkbox"}}),Object(c.jsx)(r.a,{defaultChecked:!0,color:"default",inputProps:{"aria-label":"checkbox with default color"}}),Object(c.jsx)(r.a,{defaultChecked:!0,size:"small",inputProps:{"aria-label":"checkbox with small size"}})]})}},1879:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Checkbox from '@material-ui/core/Checkbox';\n\nexport default function Checkboxes() {\n  const [checked, setChecked] = React.useState(true);\n\n  const handleChange = (event) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <div>\n      <Checkbox\n        checked={checked}\n        onChange={handleChange}\n        inputProps={{ 'aria-label': 'primary checkbox' }}\n      />\n      <Checkbox\n        defaultChecked\n        color=\"primary\"\n        inputProps={{ 'aria-label': 'secondary checkbox' }}\n      />\n      <Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />\n      <Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />\n      <Checkbox disabled checked inputProps={{ 'aria-label': 'disabled checked checkbox' }} />\n      <Checkbox\n        defaultChecked\n        indeterminate\n        inputProps={{ 'aria-label': 'indeterminate checkbox' }}\n      />\n      <Checkbox\n        defaultChecked\n        color=\"default\"\n        inputProps={{ 'aria-label': 'checkbox with default color' }}\n      />\n      <Checkbox\n        defaultChecked\n        size=\"small\"\n        inputProps={{ 'aria-label': 'checkbox with small size' }}\n      />\n    </div>\n  );\n}\n"},1880:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return C}));var o=t(0),a=t.n(o),r=t(11),c=t(149),l=t(1037),i=t(1094),s=t(1165),d=t(1346),u=t.n(d),h=t(1347),b=t.n(h),m=t(1175),p=t.n(m),f=t(1881),j=t.n(f),x=t(1);const k=Object(r.a)({root:{color:c.a[400],"&$checked":{color:c.a[600]}},checked:{}})((e=>Object(x.jsx)(s.a,{color:"default",...e})));function C(){const[e,n]=a.a.useState({checkedA:!0,checkedB:!0,checkedF:!0,checkedG:!0}),t=t=>{n({...e,[t.target.name]:t.target.checked})};return Object(x.jsxs)(l.a,{row:!0,children:[Object(x.jsx)(i.a,{control:Object(x.jsx)(s.a,{checked:e.checkedA,onChange:t,name:"checkedA"}),label:"Secondary"}),Object(x.jsx)(i.a,{control:Object(x.jsx)(s.a,{checked:e.checkedB,onChange:t,name:"checkedB",color:"primary"}),label:"Primary"}),Object(x.jsx)(i.a,{control:Object(x.jsx)(s.a,{name:"checkedC"}),label:"Uncontrolled"}),Object(x.jsx)(i.a,{disabled:!0,control:Object(x.jsx)(s.a,{name:"checkedD"}),label:"Disabled"}),Object(x.jsx)(i.a,{disabled:!0,control:Object(x.jsx)(s.a,{checked:!0,name:"checkedE"}),label:"Disabled"}),Object(x.jsx)(i.a,{control:Object(x.jsx)(s.a,{checked:e.checkedF,onChange:t,name:"checkedF",indeterminate:!0}),label:"Indeterminate"}),Object(x.jsx)(i.a,{control:Object(x.jsx)(k,{checked:e.checkedG,onChange:t,name:"checkedG"}),label:"Custom color"}),Object(x.jsx)(i.a,{control:Object(x.jsx)(s.a,{icon:Object(x.jsx)(j.a,{}),checkedIcon:Object(x.jsx)(p.a,{}),name:"checkedH"}),label:"Custom icon"}),Object(x.jsx)(i.a,{control:Object(x.jsx)(s.a,{icon:Object(x.jsx)(u.a,{fontSize:"small"}),checkedIcon:Object(x.jsx)(b.a,{fontSize:"small"}),name:"checkedI"}),label:"Custom size"})]})}},1881:function(e,n,t){"use strict";var o=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),c=(0,o(t(1128)).default)(r.createElement("path",{d:"M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"}),"FavoriteBorder");n.default=c},1882:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport { withStyles } from \'@material-ui/core/styles\';\nimport { green } from \'@material-ui/core/colors\';\nimport FormGroup from \'@material-ui/core/FormGroup\';\nimport FormControlLabel from \'@material-ui/core/FormControlLabel\';\nimport Checkbox from \'@material-ui/core/Checkbox\';\nimport CheckBoxOutlineBlankIcon from \'@material-ui/icons/CheckBoxOutlineBlank\';\nimport CheckBoxIcon from \'@material-ui/icons/CheckBox\';\nimport Favorite from \'@material-ui/icons/Favorite\';\nimport FavoriteBorder from \'@material-ui/icons/FavoriteBorder\';\n\nconst GreenCheckbox = withStyles({\n  root: {\n    color: green[400],\n    \'&$checked\': {\n      color: green[600],\n    },\n  },\n  checked: {},\n})((props) => <Checkbox color="default" {...props} />);\n\nexport default function CheckboxLabels() {\n  const [state, setState] = React.useState({\n    checkedA: true,\n    checkedB: true,\n    checkedF: true,\n    checkedG: true,\n  });\n\n  const handleChange = (event) => {\n    setState({ ...state, [event.target.name]: event.target.checked });\n  };\n\n  return (\n    <FormGroup row>\n      <FormControlLabel\n        control={<Checkbox checked={state.checkedA} onChange={handleChange} name="checkedA" />}\n        label="Secondary"\n      />\n      <FormControlLabel\n        control={\n          <Checkbox\n            checked={state.checkedB}\n            onChange={handleChange}\n            name="checkedB"\n            color="primary"\n          />\n        }\n        label="Primary"\n      />\n      <FormControlLabel control={<Checkbox name="checkedC" />} label="Uncontrolled" />\n      <FormControlLabel disabled control={<Checkbox name="checkedD" />} label="Disabled" />\n      <FormControlLabel disabled control={<Checkbox checked name="checkedE" />} label="Disabled" />\n      <FormControlLabel\n        control={\n          <Checkbox\n            checked={state.checkedF}\n            onChange={handleChange}\n            name="checkedF"\n            indeterminate\n          />\n        }\n        label="Indeterminate"\n      />\n      <FormControlLabel\n        control={<GreenCheckbox checked={state.checkedG} onChange={handleChange} name="checkedG" />}\n        label="Custom color"\n      />\n      <FormControlLabel\n        control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} name="checkedH" />}\n        label="Custom icon"\n      />\n      <FormControlLabel\n        control={\n          <Checkbox\n            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}\n            checkedIcon={<CheckBoxIcon fontSize="small" />}\n            name="checkedI"\n          />\n        }\n        label="Custom size"\n      />\n    </FormGroup>\n  );\n}\n'},1883:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return m}));var o=t(0),a=t.n(o),r=t(1072),c=t(1036),l=t(1035),i=t(1037),s=t(1094),d=t(1039),u=t(1165),h=t(1);const b=Object(r.a)((e=>({root:{display:"flex"},formControl:{margin:e.spacing(3)}})));function m(){const e=b(),[n,t]=a.a.useState({gilad:!0,jason:!1,antoine:!1}),o=e=>{t({...n,[e.target.name]:e.target.checked})},{gilad:r,jason:m,antoine:p}=n,f=2!==[r,m,p].filter((e=>e)).length;return Object(h.jsxs)("div",{className:e.root,children:[Object(h.jsxs)(l.a,{component:"fieldset",className:e.formControl,children:[Object(h.jsx)(c.a,{component:"legend",children:"Assign responsibility"}),Object(h.jsxs)(i.a,{children:[Object(h.jsx)(s.a,{control:Object(h.jsx)(u.a,{checked:r,onChange:o,name:"gilad"}),label:"Gilad Gray"}),Object(h.jsx)(s.a,{control:Object(h.jsx)(u.a,{checked:m,onChange:o,name:"jason"}),label:"Jason Killian"}),Object(h.jsx)(s.a,{control:Object(h.jsx)(u.a,{checked:p,onChange:o,name:"antoine"}),label:"Antoine Llorca"})]}),Object(h.jsx)(d.a,{children:"Be careful"})]}),Object(h.jsxs)(l.a,{required:!0,error:f,component:"fieldset",className:e.formControl,children:[Object(h.jsx)(c.a,{component:"legend",children:"Pick two"}),Object(h.jsxs)(i.a,{children:[Object(h.jsx)(s.a,{control:Object(h.jsx)(u.a,{checked:r,onChange:o,name:"gilad"}),label:"Gilad Gray"}),Object(h.jsx)(s.a,{control:Object(h.jsx)(u.a,{checked:m,onChange:o,name:"jason"}),label:"Jason Killian"}),Object(h.jsx)(s.a,{control:Object(h.jsx)(u.a,{checked:p,onChange:o,name:"antoine"}),label:"Antoine Llorca"})]}),Object(h.jsx)(d.a,{children:"You can display an error"})]})]})}},1884:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport FormLabel from \'@material-ui/core/FormLabel\';\nimport FormControl from \'@material-ui/core/FormControl\';\nimport FormGroup from \'@material-ui/core/FormGroup\';\nimport FormControlLabel from \'@material-ui/core/FormControlLabel\';\nimport FormHelperText from \'@material-ui/core/FormHelperText\';\nimport Checkbox from \'@material-ui/core/Checkbox\';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: \'flex\',\n  },\n  formControl: {\n    margin: theme.spacing(3),\n  },\n}));\n\nexport default function CheckboxesGroup() {\n  const classes = useStyles();\n  const [state, setState] = React.useState({\n    gilad: true,\n    jason: false,\n    antoine: false,\n  });\n\n  const handleChange = (event) => {\n    setState({ ...state, [event.target.name]: event.target.checked });\n  };\n\n  const { gilad, jason, antoine } = state;\n  const error = [gilad, jason, antoine].filter((v) => v).length !== 2;\n\n  return (\n    <div className={classes.root}>\n      <FormControl component="fieldset" className={classes.formControl}>\n        <FormLabel component="legend">Assign responsibility</FormLabel>\n        <FormGroup>\n          <FormControlLabel\n            control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}\n            label="Gilad Gray"\n          />\n          <FormControlLabel\n            control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}\n            label="Jason Killian"\n          />\n          <FormControlLabel\n            control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}\n            label="Antoine Llorca"\n          />\n        </FormGroup>\n        <FormHelperText>Be careful</FormHelperText>\n      </FormControl>\n      <FormControl required error={error} component="fieldset" className={classes.formControl}>\n        <FormLabel component="legend">Pick two</FormLabel>\n        <FormGroup>\n          <FormControlLabel\n            control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}\n            label="Gilad Gray"\n          />\n          <FormControlLabel\n            control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}\n            label="Jason Killian"\n          />\n          <FormControlLabel\n            control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}\n            label="Antoine Llorca"\n          />\n        </FormGroup>\n        <FormHelperText>You can display an error</FormHelperText>\n      </FormControl>\n    </div>\n  );\n}\n'},1885:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return s}));t(0);var o=t(1165),a=t(1037),r=t(1094),c=t(1035),l=t(1036),i=t(1);function s(){return Object(i.jsxs)(c.a,{component:"fieldset",children:[Object(i.jsx)(l.a,{component:"legend",children:"Label Placement"}),Object(i.jsxs)(a.a,{"aria-label":"position",row:!0,children:[Object(i.jsx)(r.a,{value:"top",control:Object(i.jsx)(o.a,{color:"primary"}),label:"Top",labelPlacement:"top"}),Object(i.jsx)(r.a,{value:"start",control:Object(i.jsx)(o.a,{color:"primary"}),label:"Start",labelPlacement:"start"}),Object(i.jsx)(r.a,{value:"bottom",control:Object(i.jsx)(o.a,{color:"primary"}),label:"Bottom",labelPlacement:"bottom"}),Object(i.jsx)(r.a,{value:"end",control:Object(i.jsx)(o.a,{color:"primary"}),label:"End",labelPlacement:"end"})]})]})}},1886:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport Checkbox from \'@material-ui/core/Checkbox\';\nimport FormGroup from \'@material-ui/core/FormGroup\';\nimport FormControlLabel from \'@material-ui/core/FormControlLabel\';\nimport FormControl from \'@material-ui/core/FormControl\';\nimport FormLabel from \'@material-ui/core/FormLabel\';\n\nexport default function FormControlLabelPosition() {\n  return (\n    <FormControl component="fieldset">\n      <FormLabel component="legend">Label Placement</FormLabel>\n      <FormGroup aria-label="position" row>\n        <FormControlLabel\n          value="top"\n          control={<Checkbox color="primary" />}\n          label="Top"\n          labelPlacement="top"\n        />\n        <FormControlLabel\n          value="start"\n          control={<Checkbox color="primary" />}\n          label="Start"\n          labelPlacement="start"\n        />\n        <FormControlLabel\n          value="bottom"\n          control={<Checkbox color="primary" />}\n          label="Bottom"\n          labelPlacement="bottom"\n        />\n        <FormControlLabel\n          value="end"\n          control={<Checkbox color="primary" />}\n          label="End"\n          labelPlacement="end"\n        />\n      </FormGroup>\n    </FormControl>\n  );\n}\n'},1887:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return s}));t(0);var o=t(5),a=t(1072),r=t(1165),c=t(1);const l=Object(a.a)({root:{"&:hover":{backgroundColor:"transparent"}},icon:{borderRadius:3,width:16,height:16,boxShadow:"inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)",backgroundColor:"#f5f8fa",backgroundImage:"linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))","$root.Mui-focusVisible &":{outline:"2px auto rgba(19,124,189,.6)",outlineOffset:2},"input:hover ~ &":{backgroundColor:"#ebf1f5"},"input:disabled ~ &":{boxShadow:"none",background:"rgba(206,217,224,.5)"}},checkedIcon:{backgroundColor:"#137cbd",backgroundImage:"linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))","&:before":{display:"block",width:16,height:16,backgroundImage:"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",content:'""'},"input:hover ~ &":{backgroundColor:"#106ba3"}}});function i(e){const n=l();return Object(c.jsx)(r.a,{className:n.root,disableRipple:!0,color:"default",checkedIcon:Object(c.jsx)("span",{className:Object(o.a)(n.icon,n.checkedIcon)}),icon:Object(c.jsx)("span",{className:n.icon}),inputProps:{"aria-label":"decorative checkbox"},...e})}function s(){return Object(c.jsxs)("div",{children:[Object(c.jsx)(i,{}),Object(c.jsx)(i,{defaultChecked:!0}),Object(c.jsx)(i,{disabled:!0})]})}},1888:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\n\nconst useStyles = makeStyles({\n  root: {\n    '&:hover': {\n      backgroundColor: 'transparent',\n    },\n  },\n  icon: {\n    borderRadius: 3,\n    width: 16,\n    height: 16,\n    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',\n    backgroundColor: '#f5f8fa',\n    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',\n    '$root.Mui-focusVisible &': {\n      outline: '2px auto rgba(19,124,189,.6)',\n      outlineOffset: 2,\n    },\n    'input:hover ~ &': {\n      backgroundColor: '#ebf1f5',\n    },\n    'input:disabled ~ &': {\n      boxShadow: 'none',\n      background: 'rgba(206,217,224,.5)',\n    },\n  },\n  checkedIcon: {\n    backgroundColor: '#137cbd',\n    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',\n    '&:before': {\n      display: 'block',\n      width: 16,\n      height: 16,\n      backgroundImage:\n        \"url(\\\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath\" +\n        \" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 \" +\n        \"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\\\")\",\n      content: '\"\"',\n    },\n    'input:hover ~ &': {\n      backgroundColor: '#106ba3',\n    },\n  },\n});\n\n// Inspired by blueprintjs\nfunction StyledCheckbox(props) {\n  const classes = useStyles();\n\n  return (\n    <Checkbox\n      className={classes.root}\n      disableRipple\n      color=\"default\"\n      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}\n      icon={<span className={classes.icon} />}\n      inputProps={{ 'aria-label': 'decorative checkbox' }}\n      {...props}\n    />\n  );\n}\n\nexport default function CustomizedCheckbox() {\n  return (\n    <div>\n      <StyledCheckbox />\n      <StyledCheckbox defaultChecked />\n      <StyledCheckbox disabled />\n    </div>\n  );\n}\n"},2574:function(e,n,t){"use strict";t.r(n);var o=t(1130),a=t(118),r=t(1098),c=t(1090),l=t(194),i=t(1072),s=t(1);const d=Object(i.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return d(),Object(s.jsxs)(s.Fragment,{children:[Object(s.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(s.jsxs)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/checkboxes",target:"_blank",role:"button",children:[Object(s.jsx)(c.a,{children:"link"}),Object(s.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(s.jsx)(l.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Checkbox"}),Object(s.jsx)(l.a,{className:"description",children:"Checkboxes allow the user to select one or more items from a set."}),Object(s.jsxs)(l.a,{className:"mb-16",component:"div",children:[Object(s.jsx)("a",{href:"https://material.io/design/components/selection-controls.html#checkboxes",children:"Checkboxes"})," ","can be used to turn an option on or off."]}),Object(s.jsx)(l.a,{className:"mb-16",component:"div",children:"If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead."}),Object(s.jsx)(l.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Basic checkboxes"}),Object(s.jsx)(l.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1878).default,raw:t(1879)})}),Object(s.jsx)(l.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Checkbox with FormControlLabel"}),Object(s.jsxs)(l.a,{className:"mb-16",component:"div",children:[Object(s.jsx)("code",{children:"Checkbox"})," can be provided with a label thanks to the"," ",Object(s.jsx)("code",{children:"FormControlLabel"})," component."]}),Object(s.jsx)(l.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1880).default,raw:t(1882)})}),Object(s.jsx)(l.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Checkboxes with FormGroup"}),Object(s.jsxs)(l.a,{className:"mb-16",component:"div",children:[Object(s.jsx)("code",{children:"FormGroup"})," is a helpful wrapper used to group selection controls components that provides an easier API."]}),Object(s.jsx)(l.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1883).default,raw:t(1884)})}),Object(s.jsx)(l.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Label placement"}),Object(s.jsx)(l.a,{className:"mb-16",component:"div",children:"You can change the placement of the label:"}),Object(s.jsx)(l.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1885).default,raw:t(1886)})}),Object(s.jsx)(l.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized checkbox"}),Object(s.jsxs)(l.a,{className:"mb-16",component:"div",children:["Here is an example of customizing the component. You can learn more about this in the",Object(s.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(s.jsx)(l.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1887).default,raw:t(1888)})}),Object(s.jsxs)(l.a,{className:"mb-16",component:"div",children:["\ud83c\udfa8 If you are looking for inspiration, you can check"," ",Object(s.jsx)("a",{href:"https://mui-treasury.com/styles/checkbox",children:"MUI Treasury's customization examples"}),"."]}),Object(s.jsx)(l.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"When to use"}),Object(s.jsxs)("ul",{children:[Object(s.jsx)("li",{children:Object(s.jsx)("a",{href:"https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/",children:"Checkboxes vs. Radio Buttons"})}),Object(s.jsx)("li",{children:Object(s.jsx)("a",{href:"https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8",children:"Checkboxes vs. Switches"})})]}),Object(s.jsx)(l.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(s.jsxs)(l.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(s.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#checkbox",children:"https://www.w3.org/TR/wai-aria-practices/#checkbox"}),")"]}),Object(s.jsxs)("ul",{children:[Object(s.jsxs)("li",{children:["All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the ",Object(s.jsx)("code",{children:"<label>"})," element (",Object(s.jsx)("a",{href:"/api/form-control-label/",children:"FormControlLabel"}),")."]}),Object(s.jsxs)("li",{children:["When a label can't be used, it's necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g."," ",Object(s.jsx)("code",{children:"aria-label"}),", ",Object(s.jsx)("code",{children:"aria-labelledby"}),", ",Object(s.jsx)("code",{children:"title"}),") via the"," ",Object(s.jsx)("code",{children:"inputProps"})," property."]})]}),Object(s.jsx)(a.a,{component:"pre",className:"language-jsx",children:" \n<Checkbox\n  value=\"checkedA\"\n  inputProps={{ 'aria-label': 'Checkbox A' \n/>\n"})]})}}}]);

Zerion Mini Shell 1.0