Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/54.700374fa.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[54],{1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return k}));var s=n(118),i=n(1100),c=n(1109),r=n(1090),a=n(1117),o=n(1119),l=n(5),m=n(0),h=n(1024),d=n(551),u=n(1087),j=n(1099),b=n(11),p=n(370),f=n(371),x=n(1131),O=n.n(x),v=n(1);const y=Object(h.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(p.a)({...Object(d.a)(),plugins:[...Object(d.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(v.jsxs)(v.Fragment,{children:[Object(v.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(v.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(v.jsx)(O.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(v.jsx)(u.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(v.jsx)(j.a,{theme:n,children:Object(m.cloneElement)(e,{container:this.state.container})})}):null})}}var A=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(g);function T(e){const[t,n]=Object(m.useState)(e.currentTabIndex),{component:h,raw:d,iframe:u,className:j}=e;return Object(v.jsxs)(c.a,{className:Object(l.a)(j,"shadow"),children:[Object(v.jsx)(i.a,{position:"static",color:"default",className:"shadow-0",children:Object(v.jsxs)(o.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[h&&Object(v.jsx)(a.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(r.a,{children:"remove_red_eye"})}),d&&Object(v.jsx)(a.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(r.a,{children:"code"})})]})}),Object(v.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(v.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:h&&(u?Object(v.jsx)(A,{children:Object(v.jsx)(h,{})}):Object(v.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(v.jsx)(h,{})}))}),Object(v.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:d&&Object(v.jsx)("div",{className:"flex flex-1",children:Object(v.jsx)(s.a,{component:"pre",className:"language-javascript w-full",children:d.default})})})]})]})}T.defaultProps={currentTabIndex:0};var k=T},1672:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return a}));n(0);var s=n(1072),i=n(2504),c=n(1);const r=Object(s.a)((e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}})));function a(){const e=r();return Object(c.jsxs)("div",{className:e.root,children:[Object(c.jsx)(i.a,{severity:"error",children:"This is an error alert \u2014 check it out!"}),Object(c.jsx)(i.a,{severity:"warning",children:"This is a warning alert \u2014 check it out!"}),Object(c.jsx)(i.a,{severity:"info",children:"This is an info alert \u2014 check it out!"}),Object(c.jsx)(i.a,{severity:"success",children:"This is a success alert \u2014 check it out!"})]})}},1673:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function SimpleAlerts() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Alert severity=\"error\">This is an error alert \u2014 check it out!</Alert>\n <Alert severity=\"warning\">This is a warning alert \u2014 check it out!</Alert>\n <Alert severity=\"info\">This is an info alert \u2014 check it out!</Alert>\n <Alert severity=\"success\">This is a success alert \u2014 check it out!</Alert>\n </div>\n );\n}\n"},1674:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return o}));n(0);var s=n(1072),i=n(2504),c=n(2557),r=n(1);const a=Object(s.a)((e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}})));function o(){const e=a();return Object(r.jsxs)("div",{className:e.root,children:[Object(r.jsxs)(i.a,{severity:"error",children:[Object(r.jsx)(c.a,{children:"Error"}),"This is an error alert \u2014 ",Object(r.jsx)("strong",{children:"check it out!"})]}),Object(r.jsxs)(i.a,{severity:"warning",children:[Object(r.jsx)(c.a,{children:"Warning"}),"This is a warning alert \u2014 ",Object(r.jsx)("strong",{children:"check it out!"})]}),Object(r.jsxs)(i.a,{severity:"info",children:[Object(r.jsx)(c.a,{children:"Info"}),"This is an info alert \u2014 ",Object(r.jsx)("strong",{children:"check it out!"})]}),Object(r.jsxs)(i.a,{severity:"success",children:[Object(r.jsx)(c.a,{children:"Success"}),"This is a success alert \u2014 ",Object(r.jsx)("strong",{children:"check it out!"})]})]})}},1675:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Alert, AlertTitle } from '@material-ui/lab';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function DescriptionAlerts() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Alert severity=\"error\">\n <AlertTitle>Error</AlertTitle>\n This is an error alert \u2014 <strong>check it out!</strong>\n </Alert>\n <Alert severity=\"warning\">\n <AlertTitle>Warning</AlertTitle>\n This is a warning alert \u2014 <strong>check it out!</strong>\n </Alert>\n <Alert severity=\"info\">\n <AlertTitle>Info</AlertTitle>\n This is an info alert \u2014 <strong>check it out!</strong>\n </Alert>\n <Alert severity=\"success\">\n <AlertTitle>Success</AlertTitle>\n This is a success alert \u2014 <strong>check it out!</strong>\n </Alert>\n </div>\n );\n}\n"},1676:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return o}));n(0);var s=n(1072),i=n(2504),c=n(1098),r=n(1);const a=Object(s.a)((e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}})));function o(){const e=a();return Object(r.jsxs)("div",{className:e.root,children:[Object(r.jsx)(i.a,{onClose:()=>{},children:"This is a success alert \u2014 check it out!"}),Object(r.jsx)(i.a,{action:Object(r.jsx)(c.a,{color:"inherit",size:"small",children:"UNDO"}),children:"This is a success alert \u2014 check it out!"})]})}},1677:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport Button from '@material-ui/core/Button';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function ActionAlerts() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Alert onClose={() => {}}>This is a success alert \u2014 check it out!</Alert>\n <Alert\n action={\n <Button color=\"inherit\" size=\"small\">\n UNDO\n </Button>\n }\n >\n This is a success alert \u2014 check it out!\n </Alert>\n </div>\n );\n}\n"},1678:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return j}));var s=n(0),i=n.n(s),c=n(1072),r=n(2504),a=n(1028),o=n(1106),l=n(1098),m=n(1185),h=n.n(m),d=n(1);const u=Object(c.a)((e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}})));function j(){const e=u(),[t,n]=i.a.useState(!0);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{in:t,children:Object(d.jsx)(r.a,{action:Object(d.jsx)(a.a,{"aria-label":"close",color:"inherit",size:"small",onClick:()=>{n(!1)},children:Object(d.jsx)(h.a,{fontSize:"inherit"})}),children:"Close me!"})}),Object(d.jsx)(l.a,{disabled:t,variant:"outlined",onClick:()=>{n(!0)},children:"Re-open"})]})}},1679:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport IconButton from '@material-ui/core/IconButton';\nimport Collapse from '@material-ui/core/Collapse';\nimport Button from '@material-ui/core/Button';\nimport CloseIcon from '@material-ui/icons/Close';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function TransitionAlerts() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(true);\n\n return (\n <div className={classes.root}>\n <Collapse in={open}>\n <Alert\n action={\n <IconButton\n aria-label=\"close\"\n color=\"inherit\"\n size=\"small\"\n onClick={() => {\n setOpen(false);\n }}\n >\n <CloseIcon fontSize=\"inherit\" />\n </IconButton>\n }\n >\n Close me!\n </Alert>\n </Collapse>\n <Button\n disabled={open}\n variant=\"outlined\"\n onClick={() => {\n setOpen(true);\n }}\n >\n Re-open\n </Button>\n </div>\n );\n}\n"},1680:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return h}));n(0);var s=n(1072),i=n(2504),c=n(1233),r=n.n(c),a=n(1681),o=n.n(a),l=n(1);const m=Object(s.a)((e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}})));function h(){const e=m();return Object(l.jsxs)("div",{className:e.root,children:[Object(l.jsx)(i.a,{icon:Object(l.jsx)(r.a,{fontSize:"inherit"}),severity:"success",children:"This is a success alert \u2014 check it out!"}),Object(l.jsx)(i.a,{iconMapping:{success:Object(l.jsx)(o.a,{fontSize:"inherit"})},children:"This is a success alert \u2014 check it out!"}),Object(l.jsx)(i.a,{icon:!1,severity:"success",children:"This is a success alert \u2014 check it out!"})]})}},1682:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport CheckIcon from '@material-ui/icons/Check';\nimport CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function IconAlerts() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Alert icon={<CheckIcon fontSize=\"inherit\" />} severity=\"success\">\n This is a success alert \u2014 check it out!\n </Alert>\n <Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize=\"inherit\" /> }}>\n This is a success alert \u2014 check it out!\n </Alert>\n <Alert icon={false} severity=\"success\">\n This is a success alert \u2014 check it out!\n </Alert>\n </div>\n );\n}\n"},1683:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return a}));n(0);var s=n(1072),i=n(2504),c=n(1);const r=Object(s.a)((e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}})));function a(){const e=r();return Object(c.jsxs)("div",{className:e.root,children:[Object(c.jsx)(i.a,{variant:"outlined",severity:"error",children:"This is an error alert \u2014 check it out!"}),Object(c.jsx)(i.a,{variant:"outlined",severity:"warning",children:"This is a warning alert \u2014 check it out!"}),Object(c.jsx)(i.a,{variant:"outlined",severity:"info",children:"This is an info alert \u2014 check it out!"}),Object(c.jsx)(i.a,{variant:"outlined",severity:"success",children:"This is a success alert \u2014 check it out!"})]})}},1684:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Alert from \'@material-ui/lab/Alert\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: \'100%\',\n \'& > * + *\': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function SimpleAlerts() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Alert variant="outlined" severity="error">\n This is an error alert \u2014 check it out!\n </Alert>\n <Alert variant="outlined" severity="warning">\n This is a warning alert \u2014 check it out!\n </Alert>\n <Alert variant="outlined" severity="info">\n This is an info alert \u2014 check it out!\n </Alert>\n <Alert variant="outlined" severity="success">\n This is a success alert \u2014 check it out!\n </Alert>\n </div>\n );\n}\n'},1685:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return a}));n(0);var s=n(1072),i=n(2504),c=n(1);const r=Object(s.a)((e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}})));function a(){const e=r();return Object(c.jsxs)("div",{className:e.root,children:[Object(c.jsx)(i.a,{variant:"filled",severity:"error",children:"This is an error alert \u2014 check it out!"}),Object(c.jsx)(i.a,{variant:"filled",severity:"warning",children:"This is a warning alert \u2014 check it out!"}),Object(c.jsx)(i.a,{variant:"filled",severity:"info",children:"This is an info alert \u2014 check it out!"}),Object(c.jsx)(i.a,{variant:"filled",severity:"success",children:"This is a success alert \u2014 check it out!"})]})}},1686:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Alert from \'@material-ui/lab/Alert\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: \'100%\',\n \'& > * + *\': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function SimpleAlerts() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Alert variant="filled" severity="error">\n This is an error alert \u2014 check it out!\n </Alert>\n <Alert variant="filled" severity="warning">\n This is a warning alert \u2014 check it out!\n </Alert>\n <Alert variant="filled" severity="info">\n This is an info alert \u2014 check it out!\n </Alert>\n <Alert variant="filled" severity="success">\n This is a success alert \u2014 check it out!\n </Alert>\n </div>\n );\n}\n'},1687:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return a}));n(0);var s=n(1072),i=n(2504),c=n(1);const r=Object(s.a)((e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}})));function a(){const e=r();return Object(c.jsx)("div",{className:e.root,children:Object(c.jsx)(i.a,{severity:"success",color:"info",children:"This is a success alert \u2014 check it out!"})})}},1688:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function ColorAlerts() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Alert severity=\"success\" color=\"info\">\n This is a success alert \u2014 check it out!\n </Alert>\n </div>\n );\n}\n"},2556:function(e,t,n){"use strict";n.r(t);var s=n(1130),i=n(1098),c=n(1090),r=n(194),a=n(1072),o=n(1);const l=Object(a.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return l(),Object(o.jsxs)(o.Fragment,{children:[Object(o.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(o.jsxs)(i.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/alert",target:"_blank",role:"button",children:[Object(o.jsx)(c.a,{children:"link"}),Object(o.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(o.jsx)(r.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Alert"}),Object(o.jsx)(r.a,{className:"description",children:"An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task."}),Object(o.jsxs)(r.a,{className:"mb-16",component:"div",children:[Object(o.jsx)("strong",{children:"Note:"})," This component is not documented in the"," ",Object(o.jsx)("a",{href:"https://material.io/",children:"Material Design guidelines"}),", but Material-UI supports it."]}),Object(o.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple alerts"}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:"The alert offers four severity levels that set a distinctive icon and color."}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:Object(o.jsx)(s.a,{className:"my-24",iframe:!1,component:n(1672).default,raw:n(1673)})}),Object(o.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Description"}),Object(o.jsxs)(r.a,{className:"mb-16",component:"div",children:["You can use the ",Object(o.jsx)("code",{children:"AlertTitle"})," component to display a formatted title above the content."]}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:Object(o.jsx)(s.a,{className:"my-24",iframe:!1,component:n(1674).default,raw:n(1675)})}),Object(o.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Actions"}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:"An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert."}),Object(o.jsxs)(r.a,{className:"mb-16",component:"div",children:["If an ",Object(o.jsx)("code",{children:"onClose"})," callback is provided and no ",Object(o.jsx)("code",{children:"action"})," prop is set, a close icon is displayed. The ",Object(o.jsx)("code",{children:"action"})," prop can be used to provide an alternative action, for example using a Button or IconButton."]}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:Object(o.jsx)(s.a,{className:"my-24",iframe:!1,component:n(1676).default,raw:n(1677)})}),Object(o.jsx)(r.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Transition"}),Object(o.jsxs)(r.a,{className:"mb-16",component:"div",children:["You can use a ",Object(o.jsx)("a",{href:"/components/transitions/",children:"transition component"})," such as"," ",Object(o.jsx)("code",{children:"Collapse"})," to transition the appearance of the alert."]}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:Object(o.jsx)(s.a,{className:"my-24",iframe:!1,component:n(1678).default,raw:n(1679)})}),Object(o.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Icons"}),Object(o.jsxs)(r.a,{className:"mb-16",component:"div",children:["The ",Object(o.jsx)("code",{children:"icon"})," prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity."]}),Object(o.jsxs)(r.a,{className:"mb-16",component:"div",children:["You can change the default severity to icon mapping with the ",Object(o.jsx)("code",{children:"iconMapping"})," prop. This can be defined globally using"," ",Object(o.jsx)("a",{href:"/customization/globals/#default-props",children:"theme customization"}),"."]}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:"Setting the icon prop to false will remove the icon altogether."}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:Object(o.jsx)(s.a,{className:"my-24",iframe:!1,component:n(1680).default,raw:n(1682)})}),Object(o.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Variants"}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:"Two additional variants are available \u2013 outlined, and filled:"}),Object(o.jsx)(r.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Outlined"}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:Object(o.jsx)(s.a,{className:"my-24",iframe:!1,component:n(1683).default,raw:n(1684)})}),Object(o.jsx)(r.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Filled"}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:Object(o.jsx)(s.a,{className:"my-24",iframe:!1,component:n(1685).default,raw:n(1686)})}),Object(o.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Toast"}),Object(o.jsxs)(r.a,{className:"mb-16",component:"div",children:["You can use the Snackbar to"," ",Object(o.jsx)("a",{href:"/components/snackbars/#customized-snackbars",children:"display a toast"})," with the Alert."]}),Object(o.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Color"}),Object(o.jsxs)(r.a,{className:"mb-16",component:"div",children:["The ",Object(o.jsx)("code",{children:"color"})," prop will override the default color for the specified severity."]}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:Object(o.jsx)(s.a,{className:"my-24",iframe:!1,component:n(1687).default,raw:n(1688)})}),Object(o.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(o.jsxs)(r.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(o.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#alert",children:"https://www.w3.org/TR/wai-aria-practices/#alert"}),")"]}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:"When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads."}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:"Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text."}),Object(o.jsx)(r.a,{className:"mb-16",component:"div",children:"Actions must have a tab index of 0 so that they can be reached by keyboard-only users."})]})}}}]);
Mini Shell