%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/59.a61e473e.chunk.js

(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[59],{1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return L}));var r=t(118),a=t(1100),i=t(1109),o=t(1090),c=t(1117),s=t(1119),l=t(5),m=t(0),d=t(1024),u=t(551),b=t(1087),h=t(1099),p=t(11),j=t(370),f=t(371),x=t(1131),k=t.n(x),O=t(1);const y=Object(d.a)({productionPrefix:"iframe-"});class g extends m.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(j.a)({...Object(u.a)(),plugins:[...Object(u.a)().plugins,Object(f.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(O.jsxs)(O.Fragment,{children:[Object(O.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n                    html {\n                    font-size: 62.5%;\n                    font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n                    }\n                "}}),Object(O.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:t}=this.props;return Object(O.jsx)(k.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(O.jsx)(b.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(h.a,{theme:t,children:Object(m.cloneElement)(e,{container:this.state.container})})}):null})}}var C=Object(p.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(g);function v(e){const[n,t]=Object(m.useState)(e.currentTabIndex),{component:d,raw:u,iframe:b,className:h}=e;return Object(O.jsxs)(i.a,{className:Object(l.a)(h,"shadow"),children:[Object(O.jsx)(a.a,{position:"static",color:"default",className:"shadow-0",children:Object(O.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[d&&Object(O.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(o.a,{children:"remove_red_eye"})}),u&&Object(O.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(o.a,{children:"code"})})]})}),Object(O.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(O.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:d&&(b?Object(O.jsx)(C,{children:Object(O.jsx)(d,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(d,{})}))}),Object(O.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:u&&Object(O.jsx)("div",{className:"flex flex-1",children:Object(O.jsx)(r.a,{component:"pre",className:"language-javascript w-full",children:u.default})})})]})]})}v.defaultProps={currentTabIndex:0};var L=v},1807:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return s}));t(0);var r=t(194),a=t(2507),i=t(1808),o=t(1);function c(e){e.preventDefault(),console.info("You clicked a breadcrumb.")}function s(){return Object(o.jsxs)(a.a,{"aria-label":"breadcrumb",children:[Object(o.jsx)(i.a,{color:"inherit",href:"/",onClick:c,children:"Material-UI"}),Object(o.jsx)(i.a,{color:"inherit",href:"/getting-started/installation/",onClick:c,children:"Core"}),Object(o.jsx)(r.a,{color:"textPrimary",children:"Breadcrumb"})]})}},1809:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Breadcrumbs from \'@material-ui/core/Breadcrumbs\';\nimport Link from \'@material-ui/core/Link\';\n\nfunction handleClick(event) {\n  event.preventDefault();\n  console.info(\'You clicked a breadcrumb.\');\n}\n\nexport default function SimpleBreadcrumbs() {\n  return (\n    <Breadcrumbs aria-label="breadcrumb">\n      <Link color="inherit" href="/" onClick={handleClick}>\n        Material-UI\n      </Link>\n      <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>\n        Core\n      </Link>\n      <Typography color="textPrimary">Breadcrumb</Typography>\n    </Breadcrumbs>\n  );\n}\n'},1810:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var r=t(2507),a=t(1808),i=t(1);function o(e){e.preventDefault(),console.info("You clicked a breadcrumb.")}function c(){return Object(i.jsxs)(r.a,{"aria-label":"breadcrumb",children:[Object(i.jsx)(a.a,{color:"inherit",href:"/",onClick:o,children:"Material-UI"}),Object(i.jsx)(a.a,{color:"inherit",href:"/getting-started/installation/",onClick:o,children:"Core"}),Object(i.jsx)(a.a,{color:"textPrimary",href:"/components/breadcrumbs/",onClick:o,"aria-current":"page",children:"Breadcrumb"})]})}},1811:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport Breadcrumbs from \'@material-ui/core/Breadcrumbs\';\nimport Link from \'@material-ui/core/Link\';\n\nfunction handleClick(event) {\n  event.preventDefault();\n  console.info(\'You clicked a breadcrumb.\');\n}\n\nexport default function ActiveLastBreadcrumb() {\n  return (\n    <Breadcrumbs aria-label="breadcrumb">\n      <Link color="inherit" href="/" onClick={handleClick}>\n        Material-UI\n      </Link>\n      <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>\n        Core\n      </Link>\n      <Link\n        color="textPrimary"\n        href="/components/breadcrumbs/"\n        onClick={handleClick}\n        aria-current="page"\n      >\n        Breadcrumb\n      </Link>\n    </Breadcrumbs>\n  );\n}\n'},1812:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));t(0);var r=t(1072),a=t(2507),i=t(194),o=t(1808),c=t(1813),s=t.n(c),l=t(1);const m=Object(r.a)((e=>({root:{"& > * + *":{marginTop:e.spacing(2)}}})));function d(e){e.preventDefault(),console.info("You clicked a breadcrumb.")}function u(){const e=m();return Object(l.jsxs)("div",{className:e.root,children:[Object(l.jsxs)(a.a,{separator:"\u203a","aria-label":"breadcrumb",children:[Object(l.jsx)(o.a,{color:"inherit",href:"/",onClick:d,children:"Material-UI"}),Object(l.jsx)(o.a,{color:"inherit",href:"/getting-started/installation/",onClick:d,children:"Core"}),Object(l.jsx)(i.a,{color:"textPrimary",children:"Breadcrumb"})]}),Object(l.jsxs)(a.a,{separator:"-","aria-label":"breadcrumb",children:[Object(l.jsx)(o.a,{color:"inherit",href:"/",onClick:d,children:"Material-UI"}),Object(l.jsx)(o.a,{color:"inherit",href:"/getting-started/installation/",onClick:d,children:"Core"}),Object(l.jsx)(i.a,{color:"textPrimary",children:"Breadcrumb"})]}),Object(l.jsxs)(a.a,{separator:Object(l.jsx)(s.a,{fontSize:"small"}),"aria-label":"breadcrumb",children:[Object(l.jsx)(o.a,{color:"inherit",href:"/",onClick:d,children:"Material-UI"}),Object(l.jsx)(o.a,{color:"inherit",href:"/getting-started/installation/",onClick:d,children:"Core"}),Object(l.jsx)(i.a,{color:"textPrimary",children:"Breadcrumb"})]})]})}},1814:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Breadcrumbs from \'@material-ui/core/Breadcrumbs\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Link from \'@material-ui/core/Link\';\nimport NavigateNextIcon from \'@material-ui/icons/NavigateNext\';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    \'& > * + *\': {\n      marginTop: theme.spacing(2),\n    },\n  },\n}));\n\nfunction handleClick(event) {\n  event.preventDefault();\n  console.info(\'You clicked a breadcrumb.\');\n}\n\nexport default function CustomSeparator() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <Breadcrumbs separator="\u203a" aria-label="breadcrumb">\n        <Link color="inherit" href="/" onClick={handleClick}>\n          Material-UI\n        </Link>\n        <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>\n          Core\n        </Link>\n        <Typography color="textPrimary">Breadcrumb</Typography>\n      </Breadcrumbs>\n      <Breadcrumbs separator="-" aria-label="breadcrumb">\n        <Link color="inherit" href="/" onClick={handleClick}>\n          Material-UI\n        </Link>\n        <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>\n          Core\n        </Link>\n        <Typography color="textPrimary">Breadcrumb</Typography>\n      </Breadcrumbs>\n      <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="breadcrumb">\n        <Link color="inherit" href="/" onClick={handleClick}>\n          Material-UI\n        </Link>\n        <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>\n          Core\n        </Link>\n        <Typography color="textPrimary">Breadcrumb</Typography>\n      </Breadcrumbs>\n    </div>\n  );\n}\n'},1815:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return j}));t(0);var r=t(1072),a=t(194),i=t(2507),o=t(1808),c=t(1439),s=t.n(c),l=t(1816),m=t.n(l),d=t(1817),u=t.n(d),b=t(1);const h=Object(r.a)((e=>({link:{display:"flex"},icon:{marginRight:e.spacing(.5),width:20,height:20}})));function p(e){e.preventDefault(),console.info("You clicked a breadcrumb.")}function j(){const e=h();return Object(b.jsxs)(i.a,{"aria-label":"breadcrumb",children:[Object(b.jsxs)(o.a,{color:"inherit",href:"/",onClick:p,className:e.link,children:[Object(b.jsx)(s.a,{className:e.icon}),"Material-UI"]}),Object(b.jsxs)(o.a,{color:"inherit",href:"/getting-started/installation/",onClick:p,className:e.link,children:[Object(b.jsx)(m.a,{className:e.icon}),"Core"]}),Object(b.jsxs)(a.a,{color:"textPrimary",className:e.link,children:[Object(b.jsx)(u.a,{className:e.icon}),"Breadcrumb"]})]})}},1818:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\nimport Link from '@material-ui/core/Link';\nimport HomeIcon from '@material-ui/icons/Home';\nimport WhatshotIcon from '@material-ui/icons/Whatshot';\nimport GrainIcon from '@material-ui/icons/Grain';\n\nconst useStyles = makeStyles((theme) => ({\n  link: {\n    display: 'flex',\n  },\n  icon: {\n    marginRight: theme.spacing(0.5),\n    width: 20,\n    height: 20,\n  },\n}));\n\nfunction handleClick(event) {\n  event.preventDefault();\n  console.info('You clicked a breadcrumb.');\n}\n\nexport default function IconBreadcrumbs() {\n  const classes = useStyles();\n\n  return (\n    <Breadcrumbs aria-label=\"breadcrumb\">\n      <Link color=\"inherit\" href=\"/\" onClick={handleClick} className={classes.link}>\n        <HomeIcon className={classes.icon} />\n        Material-UI\n      </Link>\n      <Link\n        color=\"inherit\"\n        href=\"/getting-started/installation/\"\n        onClick={handleClick}\n        className={classes.link}\n      >\n        <WhatshotIcon className={classes.icon} />\n        Core\n      </Link>\n      <Typography color=\"textPrimary\" className={classes.link}>\n        <GrainIcon className={classes.icon} />\n        Breadcrumb\n      </Typography>\n    </Breadcrumbs>\n  );\n}\n"},1819:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return s}));t(0);var r=t(2507),a=t(194),i=t(1808),o=t(1);function c(e){e.preventDefault(),console.info("You clicked a breadcrumb.")}function s(){return Object(o.jsxs)(r.a,{maxItems:2,"aria-label":"breadcrumb",children:[Object(o.jsx)(i.a,{color:"inherit",href:"#",onClick:c,children:"Home"}),Object(o.jsx)(i.a,{color:"inherit",href:"#",onClick:c,children:"Catalog"}),Object(o.jsx)(i.a,{color:"inherit",href:"#",onClick:c,children:"Accessories"}),Object(o.jsx)(i.a,{color:"inherit",href:"#",onClick:c,children:"New Collection"}),Object(o.jsx)(a.a,{color:"textPrimary",children:"Belts"})]})}},1820:function(e,n,t){"use strict";t.r(n),n.default='/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React from \'react\';\nimport Breadcrumbs from \'@material-ui/core/Breadcrumbs\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Link from \'@material-ui/core/Link\';\n\nfunction handleClick(event) {\n  event.preventDefault();\n  console.info(\'You clicked a breadcrumb.\');\n}\n\nexport default function CollapsedBreadcrumbs() {\n  return (\n    <Breadcrumbs maxItems={2} aria-label="breadcrumb">\n      <Link color="inherit" href="#" onClick={handleClick}>\n        Home\n      </Link>\n      <Link color="inherit" href="#" onClick={handleClick}>\n        Catalog\n      </Link>\n      <Link color="inherit" href="#" onClick={handleClick}>\n        Accessories\n      </Link>\n      <Link color="inherit" href="#" onClick={handleClick}>\n        New Collection\n      </Link>\n      <Typography color="textPrimary">Belts</Typography>\n    </Breadcrumbs>\n  );\n}\n'},1821:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return h}));t(0);var r=t(11),a=t(31),i=t(2507),o=t(1192),c=t(1439),s=t.n(c),l=t(1173),m=t.n(l),d=t(1);const u=Object(r.a)((e=>({root:{backgroundColor:e.palette.grey[100],height:e.spacing(3),color:e.palette.grey[800],fontWeight:e.typography.fontWeightRegular,"&:hover, &:focus":{backgroundColor:e.palette.grey[300]},"&:active":{boxShadow:e.shadows[1],backgroundColor:Object(a.d)(e.palette.grey[300],.12)}}})))(o.a);function b(e){e.preventDefault(),console.info("You clicked a breadcrumb.")}function h(){return Object(d.jsxs)(i.a,{"aria-label":"breadcrumb",children:[Object(d.jsx)(u,{component:"a",href:"#",label:"Home",icon:Object(d.jsx)(s.a,{fontSize:"small"}),onClick:b}),Object(d.jsx)(u,{component:"a",href:"#",label:"Catalog",onClick:b}),Object(d.jsx)(u,{label:"Accessories",deleteIcon:Object(d.jsx)(m.a,{}),onClick:b,onDelete:b})]})}},1822:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { emphasize, withStyles } from '@material-ui/core/styles';\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\nimport Chip from '@material-ui/core/Chip';\nimport HomeIcon from '@material-ui/icons/Home';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nconst StyledBreadcrumb = withStyles((theme) => ({\n  root: {\n    backgroundColor: theme.palette.grey[100],\n    height: theme.spacing(3),\n    color: theme.palette.grey[800],\n    fontWeight: theme.typography.fontWeightRegular,\n    '&:hover, &:focus': {\n      backgroundColor: theme.palette.grey[300],\n    },\n    '&:active': {\n      boxShadow: theme.shadows[1],\n      backgroundColor: emphasize(theme.palette.grey[300], 0.12),\n    },\n  },\n}))(Chip); // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591\n\nfunction handleClick(event) {\n  event.preventDefault();\n  console.info('You clicked a breadcrumb.');\n}\n\nexport default function CustomizedBreadcrumbs() {\n  return (\n    <Breadcrumbs aria-label=\"breadcrumb\">\n      <StyledBreadcrumb\n        component=\"a\"\n        href=\"#\"\n        label=\"Home\"\n        icon={<HomeIcon fontSize=\"small\" />}\n        onClick={handleClick}\n      />\n      <StyledBreadcrumb component=\"a\" href=\"#\" label=\"Catalog\" onClick={handleClick} />\n      <StyledBreadcrumb\n        label=\"Accessories\"\n        deleteIcon={<ExpandMoreIcon />}\n        onClick={handleClick}\n        onDelete={handleClick}\n      />\n    </Breadcrumbs>\n  );\n}\n"},1823:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return v}));var r=t(0),a=t.n(r),i=t(1072),o=t(1033),c=t(1808),s=t(1034),l=t(1106),m=t(1103),d=t(194),u=t(1349),b=t.n(u),h=t(1173),p=t.n(h),j=t(2507),f=t(49),x=t(28),k=t(1);const O={"/inbox":"Inbox","/inbox/important":"Important","/trash":"Trash","/spam":"Spam","/drafts":"Drafts"};function y(e){const{to:n,open:t,...r}=e,a=O[n];return Object(k.jsx)("li",{children:Object(k.jsxs)(s.a,{button:!0,component:x.a,to:n,...r,children:[Object(k.jsx)(m.a,{primary:a}),null!=t?t?Object(k.jsx)(b.a,{}):Object(k.jsx)(p.a,{}):null]})})}const g=Object(i.a)((e=>({root:{display:"flex",flexDirection:"column",width:360},lists:{backgroundColor:e.palette.background.paper,marginTop:e.spacing(1)},nested:{paddingLeft:e.spacing(4)}}))),C=e=>Object(k.jsx)(c.a,{...e,component:x.a});function v(){const e=g(),[n,t]=a.a.useState(!0);return Object(k.jsx)(f.a,{initialEntries:["/inbox"],initialIndex:0,children:Object(k.jsxs)("div",{className:e.root,children:[Object(k.jsx)(f.c,{children:e=>{let{location:n}=e;const t=n.pathname.split("/").filter((e=>e));return Object(k.jsxs)(j.a,{"aria-label":"breadcrumb",children:[Object(k.jsx)(C,{color:"inherit",to:"/",children:"Home"}),t.map(((e,n)=>{const r=n===t.length-1,a="/".concat(t.slice(0,n+1).join("/"));return r?Object(k.jsx)(d.a,{color:"textPrimary",children:O[a]},a):Object(k.jsx)(C,{color:"inherit",to:a,children:O[a]},a)}))]})}}),Object(k.jsx)("nav",{className:e.lists,"aria-label":"mailbox folders",children:Object(k.jsxs)(o.a,{children:[Object(k.jsx)(y,{to:"/inbox",open:n,onClick:()=>{t((e=>!e))}}),Object(k.jsx)(l.a,{component:"li",in:n,timeout:"auto",unmountOnExit:!0,children:Object(k.jsx)(o.a,{disablePadding:!0,children:Object(k.jsx)(y,{to:"/inbox/important",className:e.nested})})}),Object(k.jsx)(y,{to:"/trash"}),Object(k.jsx)(y,{to:"/spam"})]})})]})})}},1824:function(e,n,t){"use strict";t.r(n),n.default="/* eslint-disable no-nested-ternary */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport Link from '@material-ui/core/Link';\nimport ListItem from '@material-ui/core/ListItem';\nimport Collapse from '@material-ui/core/Collapse';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandLess from '@material-ui/icons/ExpandLess';\nimport ExpandMore from '@material-ui/icons/ExpandMore';\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\nimport { Route, MemoryRouter } from 'react-router';\nimport { Link as RouterLink } from 'react-router-dom';\n\nconst breadcrumbNameMap = {\n  '/inbox': 'Inbox',\n  '/inbox/important': 'Important',\n  '/trash': 'Trash',\n  '/spam': 'Spam',\n  '/drafts': 'Drafts',\n};\n\nfunction ListItemLink(props) {\n  const { to, open, ...other } = props;\n  const primary = breadcrumbNameMap[to];\n\n  return (\n    <li>\n      <ListItem button component={RouterLink} to={to} {...other}>\n        <ListItemText primary={primary} />\n        {open != null ? open ? <ExpandLess /> : <ExpandMore /> : null}\n      </ListItem>\n    </li>\n  );\n}\n\nListItemLink.propTypes = {\n  open: PropTypes.bool,\n  to: PropTypes.string.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: 360,\n  },\n  lists: {\n    backgroundColor: theme.palette.background.paper,\n    marginTop: theme.spacing(1),\n  },\n  nested: {\n    paddingLeft: theme.spacing(4),\n  },\n}));\n\nconst LinkRouter = (props) => <Link {...props} component={RouterLink} />;\n\nexport default function RouterBreadcrumbs() {\n  const classes = useStyles();\n  const [open, setOpen] = React.useState(true);\n\n  const handleClick = () => {\n    setOpen((prevOpen) => !prevOpen);\n  };\n\n  return (\n    <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>\n      <div className={classes.root}>\n        <Route>\n          {({ location }) => {\n            const pathnames = location.pathname.split('/').filter((x) => x);\n\n            return (\n              <Breadcrumbs aria-label=\"breadcrumb\">\n                <LinkRouter color=\"inherit\" to=\"/\">\n                  Home\n                </LinkRouter>\n                {pathnames.map((value, index) => {\n                  const last = index === pathnames.length - 1;\n                  const to = `/${pathnames.slice(0, index + 1).join('/')}`;\n\n                  return last ? (\n                    <Typography color=\"textPrimary\" key={to}>\n                      {breadcrumbNameMap[to]}\n                    </Typography>\n                  ) : (\n                    <LinkRouter color=\"inherit\" to={to} key={to}>\n                      {breadcrumbNameMap[to]}\n                    </LinkRouter>\n                  );\n                })}\n              </Breadcrumbs>\n            );\n          }}\n        </Route>\n        <nav className={classes.lists} aria-label=\"mailbox folders\">\n          <List>\n            <ListItemLink to=\"/inbox\" open={open} onClick={handleClick} />\n            <Collapse component=\"li\" in={open} timeout=\"auto\" unmountOnExit>\n              <List disablePadding>\n                <ListItemLink to=\"/inbox/important\" className={classes.nested} />\n              </List>\n            </Collapse>\n            <ListItemLink to=\"/trash\" />\n            <ListItemLink to=\"/spam\" />\n          </List>\n        </nav>\n      </div>\n    </MemoryRouter>\n  );\n}\n"},2568:function(e,n,t){"use strict";t.r(n);var r=t(1130),a=t(1098),i=t(1090),o=t(194),c=t(1072),s=t(1);const l=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return l(),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)(a.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/breadcrumbs",target:"_blank",role:"button",children:[Object(s.jsx)(i.a,{children:"link"}),Object(s.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(s.jsx)(o.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Breadcrumbs"}),Object(s.jsx)(o.a,{className:"description",children:"Breadcrumbs allow users to make selections from a range of values."}),Object(s.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple breadcrumbs"}),Object(s.jsx)(o.a,{className:"mb-16",component:"div",children:Object(s.jsx)(r.a,{className:"my-24",iframe:!1,component:t(1807).default,raw:t(1809)})}),Object(s.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Active last breadcrumb"}),Object(s.jsx)(o.a,{className:"mb-16",component:"div",children:"Keep the last breadcrumb interactive."}),Object(s.jsx)(o.a,{className:"mb-16",component:"div",children:Object(s.jsx)(r.a,{className:"my-24",iframe:!1,component:t(1810).default,raw:t(1811)})}),Object(s.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Custom separator"}),Object(s.jsx)(o.a,{className:"mb-16",component:"div",children:"In the following examples, we are using two string separators, and an SVG icon."}),Object(s.jsx)(o.a,{className:"mb-16",component:"div",children:Object(s.jsx)(r.a,{className:"my-24",iframe:!1,component:t(1812).default,raw:t(1814)})}),Object(s.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Breadcrumbs with icons"}),Object(s.jsx)(o.a,{className:"mb-16",component:"div",children:Object(s.jsx)(r.a,{className:"my-24",iframe:!1,component:t(1815).default,raw:t(1818)})}),Object(s.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Collapsed breadcrumbs"}),Object(s.jsx)(o.a,{className:"mb-16",component:"div",children:Object(s.jsx)(r.a,{className:"my-24",iframe:!1,component:t(1819).default,raw:t(1820)})}),Object(s.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized breadcrumbs"}),Object(s.jsxs)(o.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)(o.a,{className:"mb-16",component:"div",children:Object(s.jsx)(r.a,{className:"my-24",iframe:!1,component:t(1821).default,raw:t(1822)})}),Object(s.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Integration with react-router"}),Object(s.jsx)(o.a,{className:"mb-16",component:"div",children:Object(s.jsx)(r.a,{className:"my-24",iframe:!1,component:t(1823).default,raw:t(1824)})}),Object(s.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(s.jsxs)(o.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(s.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#breadcrumb",children:"https://www.w3.org/TR/wai-aria-practices/#breadcrumb"}),")"]}),Object(s.jsxs)(o.a,{className:"mb-16",component:"div",children:["Be sure to add a ",Object(s.jsx)("code",{children:"aria-label"})," description on the ",Object(s.jsx)("code",{children:"Breadcrumbs"})," ","component."]}),Object(s.jsx)(o.a,{className:"mb-16",component:"div",children:"The accessibility of this component relies on:"}),Object(s.jsxs)("ul",{children:[Object(s.jsxs)("li",{children:["The set of links is structured using an ordered list (",Object(s.jsx)("code",{children:"<ol>"})," element)."]}),Object(s.jsxs)("li",{children:["To prevent screen reader announcement of the visual separators between links, they are hidden with ",Object(s.jsx)("code",{children:"aria-hidden"}),"."]}),Object(s.jsxs)("li",{children:["A nav element labeled with ",Object(s.jsx)("code",{children:"aria-label"})," identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate."]})]})]})}}}]);

Zerion Mini Shell 1.0