%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[29],{1130:function(e,n,a){"use strict";a.d(n,"a",(function(){return P}));var t=a(118),l=a(1100),o=a(1109),r=a(1090),i=a(1117),s=a(1119),c=a(5),b=a(0),d=a(1024),m=a(551),p=a(1087),u=a(1099),h=a(11),x=a(370),j=a(371),v=a(1131),f=a.n(v),T=a(1);const y=Object(d.a)({productionPrefix:"iframe-"});class O extends b.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(x.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(T.jsxs)(T.Fragment,{children:[Object(T.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(T.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:a}=this.props;return Object(T.jsx)(f.a,{head:this.renderHead(),ref:this.handleRef,className:Object(c.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(T.jsx)(p.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(T.jsx)(u.a,{theme:a,children:Object(b.cloneElement)(e,{container:this.state.container})})}):null})}}var g=Object(h.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(O);function w(e){const[n,a]=Object(b.useState)(e.currentTabIndex),{component:d,raw:m,iframe:p,className:u}=e;return Object(T.jsxs)(o.a,{className:Object(c.a)(u,"shadow"),children:[Object(T.jsx)(l.a,{position:"static",color:"default",className:"shadow-0",children:Object(T.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){a(n)},children:[d&&Object(T.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(T.jsx)(r.a,{children:"remove_red_eye"})}),m&&Object(T.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(T.jsx)(r.a,{children:"code"})})]})}),Object(T.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(T.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:d&&(p?Object(T.jsx)(g,{children:Object(T.jsx)(d,{})}):Object(T.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(T.jsx)(d,{})}))}),Object(T.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:m&&Object(T.jsx)("div",{className:"flex flex-1",children:Object(T.jsx)(t.a,{component:"pre",className:"language-javascript w-full",children:m.default})})})]})]})}w.defaultProps={currentTabIndex:0};var P=w},2316:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return h}));var t=a(0),l=a.n(t),o=a(1072),r=a(1100),i=a(1119),s=a(1117),c=a(194),b=a(1304),d=a(1);function m(e){const{children:n,value:a,index:t,...l}=e;return Object(d.jsx)("div",{role:"tabpanel",hidden:a!==t,id:"simple-tabpanel-".concat(t),"aria-labelledby":"simple-tab-".concat(t),...l,children:a===t&&Object(d.jsx)(b.a,{p:3,children:Object(d.jsx)(c.a,{children:n})})})}function p(e){return{id:"simple-tab-".concat(e),"aria-controls":"simple-tabpanel-".concat(e)}}const u=Object(o.a)((e=>({root:{flexGrow:1,backgroundColor:e.palette.background.paper}})));function h(){const e=u(),[n,a]=l.a.useState(0);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(r.a,{position:"static",children:Object(d.jsxs)(i.a,{value:n,onChange:(e,n)=>{a(n)},"aria-label":"simple tabs example",children:[Object(d.jsx)(s.a,{label:"Item One",...p(0)}),Object(d.jsx)(s.a,{label:"Item Two",...p(1)}),Object(d.jsx)(s.a,{label:"Item Three",...p(2)})]})}),Object(d.jsx)(m,{value:n,index:0,children:"Item One"}),Object(d.jsx)(m,{value:n,index:1,children:"Item Two"}),Object(d.jsx)(m,{value:n,index:2,children:"Item Three"})]})}},2317:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport Typography from '@material-ui/core/Typography';\nimport Box from '@material-ui/core/Box';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <div\n role=\"tabpanel\"\n hidden={value !== index}\n id={`simple-tabpanel-${index}`}\n aria-labelledby={`simple-tab-${index}`}\n {...other}\n >\n {value === index && (\n <Box p={3}>\n <Typography>{children}</Typography>\n </Box>\n )}\n </div>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n id: `simple-tab-${index}`,\n 'aria-controls': `simple-tabpanel-${index}`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function SimpleTabs() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <AppBar position=\"static\">\n <Tabs value={value} onChange={handleChange} aria-label=\"simple tabs example\">\n <Tab label=\"Item One\" {...a11yProps(0)} />\n <Tab label=\"Item Two\" {...a11yProps(1)} />\n <Tab label=\"Item Three\" {...a11yProps(2)} />\n </Tabs>\n </AppBar>\n <TabPanel value={value} index={0}>\n Item One\n </TabPanel>\n <TabPanel value={value} index={1}>\n Item Two\n </TabPanel>\n <TabPanel value={value} index={2}>\n Item Three\n </TabPanel>\n </div>\n );\n}\n"},2318:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return h}));var t=a(0),l=a.n(t),o=a(1072),r=a(1100),i=a(1119),s=a(1117),c=a(194),b=a(1304),d=a(1);function m(e){const{children:n,value:a,index:t,...l}=e;return Object(d.jsx)("div",{role:"tabpanel",hidden:a!==t,id:"wrapped-tabpanel-".concat(t),"aria-labelledby":"wrapped-tab-".concat(t),...l,children:a===t&&Object(d.jsx)(b.a,{p:3,children:Object(d.jsx)(c.a,{children:n})})})}function p(e){return{id:"wrapped-tab-".concat(e),"aria-controls":"wrapped-tabpanel-".concat(e)}}const u=Object(o.a)((e=>({root:{flexGrow:1,backgroundColor:e.palette.background.paper}})));function h(){const e=u(),[n,a]=l.a.useState("one");return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(r.a,{position:"static",children:Object(d.jsxs)(i.a,{value:n,onChange:(e,n)=>{a(n)},"aria-label":"wrapped label tabs example",children:[Object(d.jsx)(s.a,{value:"one",label:"New Arrivals in the Longest Text of Nonfiction",wrapped:!0,...p("one")}),Object(d.jsx)(s.a,{value:"two",label:"Item Two",...p("two")}),Object(d.jsx)(s.a,{value:"three",label:"Item Three",...p("three")})]})}),Object(d.jsx)(m,{value:n,index:"one",children:"Item One"}),Object(d.jsx)(m,{value:n,index:"two",children:"Item Two"}),Object(d.jsx)(m,{value:n,index:"three",children:"Item Three"})]})}},2319:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport Typography from '@material-ui/core/Typography';\nimport Box from '@material-ui/core/Box';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <div\n role=\"tabpanel\"\n hidden={value !== index}\n id={`wrapped-tabpanel-${index}`}\n aria-labelledby={`wrapped-tab-${index}`}\n {...other}\n >\n {value === index && (\n <Box p={3}>\n <Typography>{children}</Typography>\n </Box>\n )}\n </div>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n id: `wrapped-tab-${index}`,\n 'aria-controls': `wrapped-tabpanel-${index}`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function TabsWrappedLabel() {\n const classes = useStyles();\n const [value, setValue] = React.useState('one');\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <AppBar position=\"static\">\n <Tabs value={value} onChange={handleChange} aria-label=\"wrapped label tabs example\">\n <Tab\n value=\"one\"\n label=\"New Arrivals in the Longest Text of Nonfiction\"\n wrapped\n {...a11yProps('one')}\n />\n <Tab value=\"two\" label=\"Item Two\" {...a11yProps('two')} />\n <Tab value=\"three\" label=\"Item Three\" {...a11yProps('three')} />\n </Tabs>\n </AppBar>\n <TabPanel value={value} index=\"one\">\n Item One\n </TabPanel>\n <TabPanel value={value} index=\"two\">\n Item Two\n </TabPanel>\n <TabPanel value={value} index=\"three\">\n Item Three\n </TabPanel>\n </div>\n );\n}\n"},2320:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return c}));var t=a(0),l=a.n(t),o=a(193),r=a(1119),i=a(1117),s=a(1);function c(){const[e,n]=l.a.useState(2);return Object(s.jsx)(o.a,{square:!0,children:Object(s.jsxs)(r.a,{value:e,indicatorColor:"primary",textColor:"primary",onChange:(e,a)=>{n(a)},"aria-label":"disabled tabs example",children:[Object(s.jsx)(i.a,{label:"Active"}),Object(s.jsx)(i.a,{label:"Disabled",disabled:!0}),Object(s.jsx)(i.a,{label:"Active"})]})})}},2321:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport Paper from \'@material-ui/core/Paper\';\nimport Tabs from \'@material-ui/core/Tabs\';\nimport Tab from \'@material-ui/core/Tab\';\n\nexport default function DisabledTabs() {\n const [value, setValue] = React.useState(2);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <Paper square>\n <Tabs\n value={value}\n indicatorColor="primary"\n textColor="primary"\n onChange={handleChange}\n aria-label="disabled tabs example"\n >\n <Tab label="Active" />\n <Tab label="Disabled" disabled />\n <Tab label="Active" />\n </Tabs>\n </Paper>\n );\n}\n'},2322:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return v}));var t=a(0),l=a.n(t),o=a(1273),r=a.n(o),i=a(1072),s=a(43),c=a(1100),b=a(1119),d=a(1117),m=a(194),p=a(1304),u=a(1);function h(e){const{children:n,value:a,index:t,...l}=e;return Object(u.jsx)("div",{role:"tabpanel",hidden:a!==t,id:"full-width-tabpanel-".concat(t),"aria-labelledby":"full-width-tab-".concat(t),...l,children:a===t&&Object(u.jsx)(p.a,{p:3,children:Object(u.jsx)(m.a,{children:n})})})}function x(e){return{id:"full-width-tab-".concat(e),"aria-controls":"full-width-tabpanel-".concat(e)}}const j=Object(i.a)((e=>({root:{backgroundColor:e.palette.background.paper,width:500}})));function v(){const e=j(),n=Object(s.a)(),[a,t]=l.a.useState(0);return Object(u.jsxs)("div",{className:e.root,children:[Object(u.jsx)(c.a,{position:"static",color:"default",children:Object(u.jsxs)(b.a,{value:a,onChange:(e,n)=>{t(n)},indicatorColor:"primary",textColor:"primary",variant:"fullWidth","aria-label":"full width tabs example",children:[Object(u.jsx)(d.a,{label:"Item One",...x(0)}),Object(u.jsx)(d.a,{label:"Item Two",...x(1)}),Object(u.jsx)(d.a,{label:"Item Three",...x(2)})]})}),Object(u.jsxs)(r.a,{axis:"rtl"===n.direction?"x-reverse":"x",index:a,onChangeIndex:e=>{t(e)},children:[Object(u.jsx)(h,{value:a,index:0,dir:n.direction,children:"Item One"}),Object(u.jsx)(h,{value:a,index:1,dir:n.direction,children:"Item Two"}),Object(u.jsx)(h,{value:a,index:2,dir:n.direction,children:"Item Three"})]})]})}},2323:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport SwipeableViews from 'react-swipeable-views';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport Typography from '@material-ui/core/Typography';\nimport Box from '@material-ui/core/Box';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <div\n role=\"tabpanel\"\n hidden={value !== index}\n id={`full-width-tabpanel-${index}`}\n aria-labelledby={`full-width-tab-${index}`}\n {...other}\n >\n {value === index && (\n <Box p={3}>\n <Typography>{children}</Typography>\n </Box>\n )}\n </div>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n id: `full-width-tab-${index}`,\n 'aria-controls': `full-width-tabpanel-${index}`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundColor: theme.palette.background.paper,\n width: 500,\n },\n}));\n\nexport default function FullWidthTabs() {\n const classes = useStyles();\n const theme = useTheme();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n const handleChangeIndex = (index) => {\n setValue(index);\n };\n\n return (\n <div className={classes.root}>\n <AppBar position=\"static\" color=\"default\">\n <Tabs\n value={value}\n onChange={handleChange}\n indicatorColor=\"primary\"\n textColor=\"primary\"\n variant=\"fullWidth\"\n aria-label=\"full width tabs example\"\n >\n <Tab label=\"Item One\" {...a11yProps(0)} />\n <Tab label=\"Item Two\" {...a11yProps(1)} />\n <Tab label=\"Item Three\" {...a11yProps(2)} />\n </Tabs>\n </AppBar>\n <SwipeableViews\n axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}\n index={value}\n onChangeIndex={handleChangeIndex}\n >\n <TabPanel value={value} index={0} dir={theme.direction}>\n Item One\n </TabPanel>\n <TabPanel value={value} index={1} dir={theme.direction}>\n Item Two\n </TabPanel>\n <TabPanel value={value} index={2} dir={theme.direction}>\n Item Three\n </TabPanel>\n </SwipeableViews>\n </div>\n );\n}\n"},2324:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return d}));var t=a(0),l=a.n(t),o=a(1072),r=a(193),i=a(1119),s=a(1117),c=a(1);const b=Object(o.a)({root:{flexGrow:1}});function d(){const e=b(),[n,a]=l.a.useState(0);return Object(c.jsx)(r.a,{className:e.root,children:Object(c.jsxs)(i.a,{value:n,onChange:(e,n)=>{a(n)},indicatorColor:"primary",textColor:"primary",centered:!0,children:[Object(c.jsx)(s.a,{label:"Item One"}),Object(c.jsx)(s.a,{label:"Item Two"}),Object(c.jsx)(s.a,{label:"Item Three"})]})})}},2325:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\n\nconst useStyles = makeStyles({\n root: {\n flexGrow: 1,\n },\n});\n\nexport default function CenteredTabs() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <Paper className={classes.root}>\n <Tabs\n value={value}\n onChange={handleChange}\n indicatorColor=\"primary\"\n textColor=\"primary\"\n centered\n >\n <Tab label=\"Item One\" />\n <Tab label=\"Item Two\" />\n <Tab label=\"Item Three\" />\n </Tabs>\n </Paper>\n );\n}\n"},2326:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return h}));var t=a(0),l=a.n(t),o=a(1072),r=a(1100),i=a(1119),s=a(1117),c=a(194),b=a(1304),d=a(1);function m(e){const{children:n,value:a,index:t,...l}=e;return Object(d.jsx)("div",{role:"tabpanel",hidden:a!==t,id:"scrollable-auto-tabpanel-".concat(t),"aria-labelledby":"scrollable-auto-tab-".concat(t),...l,children:a===t&&Object(d.jsx)(b.a,{p:3,children:Object(d.jsx)(c.a,{children:n})})})}function p(e){return{id:"scrollable-auto-tab-".concat(e),"aria-controls":"scrollable-auto-tabpanel-".concat(e)}}const u=Object(o.a)((e=>({root:{flexGrow:1,width:"100%",backgroundColor:e.palette.background.paper}})));function h(){const e=u(),[n,a]=l.a.useState(0);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(r.a,{position:"static",color:"default",children:Object(d.jsxs)(i.a,{value:n,onChange:(e,n)=>{a(n)},indicatorColor:"primary",textColor:"primary",variant:"scrollable",scrollButtons:"auto","aria-label":"scrollable auto tabs example",children:[Object(d.jsx)(s.a,{label:"Item One",...p(0)}),Object(d.jsx)(s.a,{label:"Item Two",...p(1)}),Object(d.jsx)(s.a,{label:"Item Three",...p(2)}),Object(d.jsx)(s.a,{label:"Item Four",...p(3)}),Object(d.jsx)(s.a,{label:"Item Five",...p(4)}),Object(d.jsx)(s.a,{label:"Item Six",...p(5)}),Object(d.jsx)(s.a,{label:"Item Seven",...p(6)})]})}),Object(d.jsx)(m,{value:n,index:0,children:"Item One"}),Object(d.jsx)(m,{value:n,index:1,children:"Item Two"}),Object(d.jsx)(m,{value:n,index:2,children:"Item Three"}),Object(d.jsx)(m,{value:n,index:3,children:"Item Four"}),Object(d.jsx)(m,{value:n,index:4,children:"Item Five"}),Object(d.jsx)(m,{value:n,index:5,children:"Item Six"}),Object(d.jsx)(m,{value:n,index:6,children:"Item Seven"})]})}},2327:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport PropTypes from \'prop-types\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport AppBar from \'@material-ui/core/AppBar\';\nimport Tabs from \'@material-ui/core/Tabs\';\nimport Tab from \'@material-ui/core/Tab\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Box from \'@material-ui/core/Box\';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <div\n role="tabpanel"\n hidden={value !== index}\n id={`scrollable-auto-tabpanel-${index}`}\n aria-labelledby={`scrollable-auto-tab-${index}`}\n {...other}\n >\n {value === index && (\n <Box p={3}>\n <Typography>{children}</Typography>\n </Box>\n )}\n </div>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n id: `scrollable-auto-tab-${index}`,\n \'aria-controls\': `scrollable-auto-tabpanel-${index}`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n width: \'100%\',\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function ScrollableTabsButtonAuto() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <AppBar position="static" color="default">\n <Tabs\n value={value}\n onChange={handleChange}\n indicatorColor="primary"\n textColor="primary"\n variant="scrollable"\n scrollButtons="auto"\n aria-label="scrollable auto tabs example"\n >\n <Tab label="Item One" {...a11yProps(0)} />\n <Tab label="Item Two" {...a11yProps(1)} />\n <Tab label="Item Three" {...a11yProps(2)} />\n <Tab label="Item Four" {...a11yProps(3)} />\n <Tab label="Item Five" {...a11yProps(4)} />\n <Tab label="Item Six" {...a11yProps(5)} />\n <Tab label="Item Seven" {...a11yProps(6)} />\n </Tabs>\n </AppBar>\n <TabPanel value={value} index={0}>\n Item One\n </TabPanel>\n <TabPanel value={value} index={1}>\n Item Two\n </TabPanel>\n <TabPanel value={value} index={2}>\n Item Three\n </TabPanel>\n <TabPanel value={value} index={3}>\n Item Four\n </TabPanel>\n <TabPanel value={value} index={4}>\n Item Five\n </TabPanel>\n <TabPanel value={value} index={5}>\n Item Six\n </TabPanel>\n <TabPanel value={value} index={6}>\n Item Seven\n </TabPanel>\n </div>\n );\n}\n'},2328:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return N}));var t=a(0),l=a.n(t),o=a(1072),r=a(1100),i=a(1119),s=a(1117),c=a(1301),b=a.n(c),d=a(1175),m=a.n(d),p=a(1302),u=a.n(p),h=a(1451),x=a.n(h),j=a(1452),v=a.n(j),f=a(1453),T=a.n(f),y=a(1454),O=a.n(y),g=a(194),w=a(1304),P=a(1);function I(e){const{children:n,value:a,index:t,...l}=e;return Object(P.jsx)("div",{role:"tabpanel",hidden:a!==t,id:"scrollable-force-tabpanel-".concat(t),"aria-labelledby":"scrollable-force-tab-".concat(t),...l,children:a===t&&Object(P.jsx)(w.a,{p:3,children:Object(P.jsx)(g.a,{children:n})})})}function S(e){return{id:"scrollable-force-tab-".concat(e),"aria-controls":"scrollable-force-tabpanel-".concat(e)}}const C=Object(o.a)((e=>({root:{flexGrow:1,width:"100%",backgroundColor:e.palette.background.paper}})));function N(){const e=C(),[n,a]=l.a.useState(0);return Object(P.jsxs)("div",{className:e.root,children:[Object(P.jsx)(r.a,{position:"static",color:"default",children:Object(P.jsxs)(i.a,{value:n,onChange:(e,n)=>{a(n)},variant:"scrollable",scrollButtons:"on",indicatorColor:"primary",textColor:"primary","aria-label":"scrollable force tabs example",children:[Object(P.jsx)(s.a,{label:"Item One",icon:Object(P.jsx)(b.a,{}),...S(0)}),Object(P.jsx)(s.a,{label:"Item Two",icon:Object(P.jsx)(m.a,{}),...S(1)}),Object(P.jsx)(s.a,{label:"Item Three",icon:Object(P.jsx)(u.a,{}),...S(2)}),Object(P.jsx)(s.a,{label:"Item Four",icon:Object(P.jsx)(x.a,{}),...S(3)}),Object(P.jsx)(s.a,{label:"Item Five",icon:Object(P.jsx)(v.a,{}),...S(4)}),Object(P.jsx)(s.a,{label:"Item Six",icon:Object(P.jsx)(T.a,{}),...S(5)}),Object(P.jsx)(s.a,{label:"Item Seven",icon:Object(P.jsx)(O.a,{}),...S(6)})]})}),Object(P.jsx)(I,{value:n,index:0,children:"Item One"}),Object(P.jsx)(I,{value:n,index:1,children:"Item Two"}),Object(P.jsx)(I,{value:n,index:2,children:"Item Three"}),Object(P.jsx)(I,{value:n,index:3,children:"Item Four"}),Object(P.jsx)(I,{value:n,index:4,children:"Item Five"}),Object(P.jsx)(I,{value:n,index:5,children:"Item Six"}),Object(P.jsx)(I,{value:n,index:6,children:"Item Seven"})]})}},2329:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport PhoneIcon from '@material-ui/icons/Phone';\nimport FavoriteIcon from '@material-ui/icons/Favorite';\nimport PersonPinIcon from '@material-ui/icons/PersonPin';\nimport HelpIcon from '@material-ui/icons/Help';\nimport ShoppingBasket from '@material-ui/icons/ShoppingBasket';\nimport ThumbDown from '@material-ui/icons/ThumbDown';\nimport ThumbUp from '@material-ui/icons/ThumbUp';\nimport Typography from '@material-ui/core/Typography';\nimport Box from '@material-ui/core/Box';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <div\n role=\"tabpanel\"\n hidden={value !== index}\n id={`scrollable-force-tabpanel-${index}`}\n aria-labelledby={`scrollable-force-tab-${index}`}\n {...other}\n >\n {value === index && (\n <Box p={3}>\n <Typography>{children}</Typography>\n </Box>\n )}\n </div>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n id: `scrollable-force-tab-${index}`,\n 'aria-controls': `scrollable-force-tabpanel-${index}`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n width: '100%',\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function ScrollableTabsButtonForce() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <AppBar position=\"static\" color=\"default\">\n <Tabs\n value={value}\n onChange={handleChange}\n variant=\"scrollable\"\n scrollButtons=\"on\"\n indicatorColor=\"primary\"\n textColor=\"primary\"\n aria-label=\"scrollable force tabs example\"\n >\n <Tab label=\"Item One\" icon={<PhoneIcon />} {...a11yProps(0)} />\n <Tab label=\"Item Two\" icon={<FavoriteIcon />} {...a11yProps(1)} />\n <Tab label=\"Item Three\" icon={<PersonPinIcon />} {...a11yProps(2)} />\n <Tab label=\"Item Four\" icon={<HelpIcon />} {...a11yProps(3)} />\n <Tab label=\"Item Five\" icon={<ShoppingBasket />} {...a11yProps(4)} />\n <Tab label=\"Item Six\" icon={<ThumbDown />} {...a11yProps(5)} />\n <Tab label=\"Item Seven\" icon={<ThumbUp />} {...a11yProps(6)} />\n </Tabs>\n </AppBar>\n <TabPanel value={value} index={0}>\n Item One\n </TabPanel>\n <TabPanel value={value} index={1}>\n Item Two\n </TabPanel>\n <TabPanel value={value} index={2}>\n Item Three\n </TabPanel>\n <TabPanel value={value} index={3}>\n Item Four\n </TabPanel>\n <TabPanel value={value} index={4}>\n Item Five\n </TabPanel>\n <TabPanel value={value} index={5}>\n Item Six\n </TabPanel>\n <TabPanel value={value} index={6}>\n Item Seven\n </TabPanel>\n </div>\n );\n}\n"},2330:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return N}));var t=a(0),l=a.n(t),o=a(1072),r=a(1100),i=a(1119),s=a(1117),c=a(1301),b=a.n(c),d=a(1175),m=a.n(d),p=a(1302),u=a.n(p),h=a(1451),x=a.n(h),j=a(1452),v=a.n(j),f=a(1453),T=a.n(f),y=a(1454),O=a.n(y),g=a(194),w=a(1304),P=a(1);function I(e){const{children:n,value:a,index:t,...l}=e;return Object(P.jsx)("div",{role:"tabpanel",hidden:a!==t,id:"scrollable-prevent-tabpanel-".concat(t),"aria-labelledby":"scrollable-prevent-tab-".concat(t),...l,children:a===t&&Object(P.jsx)(w.a,{p:3,children:Object(P.jsx)(g.a,{children:n})})})}function S(e){return{id:"scrollable-prevent-tab-".concat(e),"aria-controls":"scrollable-prevent-tabpanel-".concat(e)}}const C=Object(o.a)((e=>({root:{flexGrow:1,width:"100%",backgroundColor:e.palette.background.paper}})));function N(){const e=C(),[n,a]=l.a.useState(0);return Object(P.jsxs)("div",{className:e.root,children:[Object(P.jsx)(r.a,{position:"static",children:Object(P.jsxs)(i.a,{value:n,onChange:(e,n)=>{a(n)},variant:"scrollable",scrollButtons:"off","aria-label":"scrollable prevent tabs example",children:[Object(P.jsx)(s.a,{icon:Object(P.jsx)(b.a,{}),"aria-label":"phone",...S(0)}),Object(P.jsx)(s.a,{icon:Object(P.jsx)(m.a,{}),"aria-label":"favorite",...S(1)}),Object(P.jsx)(s.a,{icon:Object(P.jsx)(u.a,{}),"aria-label":"person",...S(2)}),Object(P.jsx)(s.a,{icon:Object(P.jsx)(x.a,{}),"aria-label":"help",...S(3)}),Object(P.jsx)(s.a,{icon:Object(P.jsx)(v.a,{}),"aria-label":"shopping",...S(4)}),Object(P.jsx)(s.a,{icon:Object(P.jsx)(T.a,{}),"aria-label":"up",...S(5)}),Object(P.jsx)(s.a,{icon:Object(P.jsx)(O.a,{}),"aria-label":"down",...S(6)})]})}),Object(P.jsx)(I,{value:n,index:0,children:"Item One"}),Object(P.jsx)(I,{value:n,index:1,children:"Item Two"}),Object(P.jsx)(I,{value:n,index:2,children:"Item Three"}),Object(P.jsx)(I,{value:n,index:3,children:"Item Four"}),Object(P.jsx)(I,{value:n,index:4,children:"Item Five"}),Object(P.jsx)(I,{value:n,index:5,children:"Item Six"}),Object(P.jsx)(I,{value:n,index:6,children:"Item Seven"})]})}},2331:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport PhoneIcon from '@material-ui/icons/Phone';\nimport FavoriteIcon from '@material-ui/icons/Favorite';\nimport PersonPinIcon from '@material-ui/icons/PersonPin';\nimport HelpIcon from '@material-ui/icons/Help';\nimport ShoppingBasket from '@material-ui/icons/ShoppingBasket';\nimport ThumbDown from '@material-ui/icons/ThumbDown';\nimport ThumbUp from '@material-ui/icons/ThumbUp';\nimport Typography from '@material-ui/core/Typography';\nimport Box from '@material-ui/core/Box';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <div\n role=\"tabpanel\"\n hidden={value !== index}\n id={`scrollable-prevent-tabpanel-${index}`}\n aria-labelledby={`scrollable-prevent-tab-${index}`}\n {...other}\n >\n {value === index && (\n <Box p={3}>\n <Typography>{children}</Typography>\n </Box>\n )}\n </div>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n id: `scrollable-prevent-tab-${index}`,\n 'aria-controls': `scrollable-prevent-tabpanel-${index}`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n width: '100%',\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function ScrollableTabsButtonPrevent() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <AppBar position=\"static\">\n <Tabs\n value={value}\n onChange={handleChange}\n variant=\"scrollable\"\n scrollButtons=\"off\"\n aria-label=\"scrollable prevent tabs example\"\n >\n <Tab icon={<PhoneIcon />} aria-label=\"phone\" {...a11yProps(0)} />\n <Tab icon={<FavoriteIcon />} aria-label=\"favorite\" {...a11yProps(1)} />\n <Tab icon={<PersonPinIcon />} aria-label=\"person\" {...a11yProps(2)} />\n <Tab icon={<HelpIcon />} aria-label=\"help\" {...a11yProps(3)} />\n <Tab icon={<ShoppingBasket />} aria-label=\"shopping\" {...a11yProps(4)} />\n <Tab icon={<ThumbDown />} aria-label=\"up\" {...a11yProps(5)} />\n <Tab icon={<ThumbUp />} aria-label=\"down\" {...a11yProps(6)} />\n </Tabs>\n </AppBar>\n <TabPanel value={value} index={0}>\n Item One\n </TabPanel>\n <TabPanel value={value} index={1}>\n Item Two\n </TabPanel>\n <TabPanel value={value} index={2}>\n Item Three\n </TabPanel>\n <TabPanel value={value} index={3}>\n Item Four\n </TabPanel>\n <TabPanel value={value} index={4}>\n Item Five\n </TabPanel>\n <TabPanel value={value} index={5}>\n Item Six\n </TabPanel>\n <TabPanel value={value} index={6}>\n Item Seven\n </TabPanel>\n </div>\n );\n}\n"},2332:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return x}));var t=a(0),l=a.n(t),o=a(11),r=a(1072),i=a(1119),s=a(1117),c=a(194),b=a(1);const d=Object(o.a)({root:{borderBottom:"1px solid #e8e8e8"},indicator:{backgroundColor:"#1890ff"}})(i.a),m=Object(o.a)((e=>({root:{textTransform:"none",minWidth:72,fontWeight:e.typography.fontWeightRegular,marginRight:e.spacing(4),fontFamily:["-apple-system","BlinkMacSystemFont",'"Segoe UI"',"Roboto",'"Helvetica Neue"',"Arial","sans-serif",'"Apple Color Emoji"','"Segoe UI Emoji"','"Segoe UI Symbol"'].join(","),"&:hover":{color:"#40a9ff",opacity:1},"&$selected":{color:"#1890ff",fontWeight:e.typography.fontWeightMedium},"&:focus":{color:"#40a9ff"}},selected:{}})))((e=>Object(b.jsx)(s.a,{disableRipple:!0,...e}))),p=Object(o.a)({indicator:{display:"flex",justifyContent:"center",backgroundColor:"transparent","& > span":{maxWidth:40,width:"100%",backgroundColor:"#635ee7"}}})((e=>Object(b.jsx)(i.a,{...e,TabIndicatorProps:{children:Object(b.jsx)("span",{})}}))),u=Object(o.a)((e=>({root:{textTransform:"none",color:"#fff",fontWeight:e.typography.fontWeightRegular,fontSize:e.typography.pxToRem(15),marginRight:e.spacing(1),"&:focus":{opacity:1}}})))((e=>Object(b.jsx)(s.a,{disableRipple:!0,...e}))),h=Object(r.a)((e=>({root:{flexGrow:1},padding:{padding:e.spacing(3)},demo1:{backgroundColor:e.palette.background.paper},demo2:{backgroundColor:"#2e1534"}})));function x(){const e=h(),[n,a]=l.a.useState(0),t=(e,n)=>{a(n)};return Object(b.jsxs)("div",{className:e.root,children:[Object(b.jsxs)("div",{className:e.demo1,children:[Object(b.jsxs)(d,{value:n,onChange:t,"aria-label":"ant example",children:[Object(b.jsx)(m,{label:"Tab 1"}),Object(b.jsx)(m,{label:"Tab 2"}),Object(b.jsx)(m,{label:"Tab 3"})]}),Object(b.jsx)(c.a,{className:e.padding})]}),Object(b.jsxs)("div",{className:e.demo2,children:[Object(b.jsxs)(p,{value:n,onChange:t,"aria-label":"styled tabs example",children:[Object(b.jsx)(u,{label:"Workflows"}),Object(b.jsx)(u,{label:"Datasets"}),Object(b.jsx)(u,{label:"Connections"})]}),Object(b.jsx)(c.a,{className:e.padding})]})]})}},2333:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport Typography from '@material-ui/core/Typography';\n\nconst AntTabs = withStyles({\n root: {\n borderBottom: '1px solid #e8e8e8',\n },\n indicator: {\n backgroundColor: '#1890ff',\n },\n})(Tabs);\n\nconst AntTab = withStyles((theme) => ({\n root: {\n textTransform: 'none',\n minWidth: 72,\n fontWeight: theme.typography.fontWeightRegular,\n marginRight: theme.spacing(4),\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 color: '#40a9ff',\n opacity: 1,\n },\n '&$selected': {\n color: '#1890ff',\n fontWeight: theme.typography.fontWeightMedium,\n },\n '&:focus': {\n color: '#40a9ff',\n },\n },\n selected: {},\n}))((props) => <Tab disableRipple {...props} />);\n\nconst StyledTabs = withStyles({\n indicator: {\n display: 'flex',\n justifyContent: 'center',\n backgroundColor: 'transparent',\n '& > span': {\n maxWidth: 40,\n width: '100%',\n backgroundColor: '#635ee7',\n },\n },\n})((props) => <Tabs {...props} TabIndicatorProps={{ children: <span /> }} />);\n\nconst StyledTab = withStyles((theme) => ({\n root: {\n textTransform: 'none',\n color: '#fff',\n fontWeight: theme.typography.fontWeightRegular,\n fontSize: theme.typography.pxToRem(15),\n marginRight: theme.spacing(1),\n '&:focus': {\n opacity: 1,\n },\n },\n}))((props) => <Tab disableRipple {...props} />);\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n padding: {\n padding: theme.spacing(3),\n },\n demo1: {\n backgroundColor: theme.palette.background.paper,\n },\n demo2: {\n backgroundColor: '#2e1534',\n },\n}));\n\nexport default function CustomizedTabs() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <div className={classes.demo1}>\n <AntTabs value={value} onChange={handleChange} aria-label=\"ant example\">\n <AntTab label=\"Tab 1\" />\n <AntTab label=\"Tab 2\" />\n <AntTab label=\"Tab 3\" />\n </AntTabs>\n <Typography className={classes.padding} />\n </div>\n <div className={classes.demo2}>\n <StyledTabs value={value} onChange={handleChange} aria-label=\"styled tabs example\">\n <StyledTab label=\"Workflows\" />\n <StyledTab label=\"Datasets\" />\n <StyledTab label=\"Connections\" />\n </StyledTabs>\n <Typography className={classes.padding} />\n </div>\n </div>\n );\n}\n"},2334:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return u}));var t=a(0),l=a.n(t),o=a(1072),r=a(1119),i=a(1117),s=a(194),c=a(1304),b=a(1);function d(e){const{children:n,value:a,index:t,...l}=e;return Object(b.jsx)("div",{role:"tabpanel",hidden:a!==t,id:"vertical-tabpanel-".concat(t),"aria-labelledby":"vertical-tab-".concat(t),...l,children:a===t&&Object(b.jsx)(c.a,{p:3,children:Object(b.jsx)(s.a,{children:n})})})}function m(e){return{id:"vertical-tab-".concat(e),"aria-controls":"vertical-tabpanel-".concat(e)}}const p=Object(o.a)((e=>({root:{flexGrow:1,backgroundColor:e.palette.background.paper,display:"flex",height:224},tabs:{borderRight:"1px solid ".concat(e.palette.divider)}})));function u(){const e=p(),[n,a]=l.a.useState(0);return Object(b.jsxs)("div",{className:e.root,children:[Object(b.jsxs)(r.a,{orientation:"vertical",variant:"scrollable",value:n,onChange:(e,n)=>{a(n)},"aria-label":"Vertical tabs example",className:e.tabs,children:[Object(b.jsx)(i.a,{label:"Item One",...m(0)}),Object(b.jsx)(i.a,{label:"Item Two",...m(1)}),Object(b.jsx)(i.a,{label:"Item Three",...m(2)}),Object(b.jsx)(i.a,{label:"Item Four",...m(3)}),Object(b.jsx)(i.a,{label:"Item Five",...m(4)}),Object(b.jsx)(i.a,{label:"Item Six",...m(5)}),Object(b.jsx)(i.a,{label:"Item Seven",...m(6)})]}),Object(b.jsx)(d,{value:n,index:0,children:"Item One"}),Object(b.jsx)(d,{value:n,index:1,children:"Item Two"}),Object(b.jsx)(d,{value:n,index:2,children:"Item Three"}),Object(b.jsx)(d,{value:n,index:3,children:"Item Four"}),Object(b.jsx)(d,{value:n,index:4,children:"Item Five"}),Object(b.jsx)(d,{value:n,index:5,children:"Item Six"}),Object(b.jsx)(d,{value:n,index:6,children:"Item Seven"})]})}},2335:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport PropTypes from \'prop-types\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Tabs from \'@material-ui/core/Tabs\';\nimport Tab from \'@material-ui/core/Tab\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Box from \'@material-ui/core/Box\';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <div\n role="tabpanel"\n hidden={value !== index}\n id={`vertical-tabpanel-${index}`}\n aria-labelledby={`vertical-tab-${index}`}\n {...other}\n >\n {value === index && (\n <Box p={3}>\n <Typography>{children}</Typography>\n </Box>\n )}\n </div>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n id: `vertical-tab-${index}`,\n \'aria-controls\': `vertical-tabpanel-${index}`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n backgroundColor: theme.palette.background.paper,\n display: \'flex\',\n height: 224,\n },\n tabs: {\n borderRight: `1px solid ${theme.palette.divider}`,\n },\n}));\n\nexport default function VerticalTabs() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <Tabs\n orientation="vertical"\n variant="scrollable"\n value={value}\n onChange={handleChange}\n aria-label="Vertical tabs example"\n className={classes.tabs}\n >\n <Tab label="Item One" {...a11yProps(0)} />\n <Tab label="Item Two" {...a11yProps(1)} />\n <Tab label="Item Three" {...a11yProps(2)} />\n <Tab label="Item Four" {...a11yProps(3)} />\n <Tab label="Item Five" {...a11yProps(4)} />\n <Tab label="Item Six" {...a11yProps(5)} />\n <Tab label="Item Seven" {...a11yProps(6)} />\n </Tabs>\n <TabPanel value={value} index={0}>\n Item One\n </TabPanel>\n <TabPanel value={value} index={1}>\n Item Two\n </TabPanel>\n <TabPanel value={value} index={2}>\n Item Three\n </TabPanel>\n <TabPanel value={value} index={3}>\n Item Four\n </TabPanel>\n <TabPanel value={value} index={4}>\n Item Five\n </TabPanel>\n <TabPanel value={value} index={5}>\n Item Six\n </TabPanel>\n <TabPanel value={value} index={6}>\n Item Seven\n </TabPanel>\n </div>\n );\n}\n'},2336:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return x}));var t=a(0),l=a.n(t),o=a(1072),r=a(1100),i=a(1119),s=a(1117),c=a(194),b=a(1304),d=a(1);function m(e){const{children:n,value:a,index:t,...l}=e;return Object(d.jsx)("div",{role:"tabpanel",hidden:a!==t,id:"nav-tabpanel-".concat(t),"aria-labelledby":"nav-tab-".concat(t),...l,children:a===t&&Object(d.jsx)(b.a,{p:3,children:Object(d.jsx)(c.a,{children:n})})})}function p(e){return{id:"nav-tab-".concat(e),"aria-controls":"nav-tabpanel-".concat(e)}}function u(e){return Object(d.jsx)(s.a,{component:"a",onClick:e=>{e.preventDefault()},...e})}const h=Object(o.a)((e=>({root:{flexGrow:1,backgroundColor:e.palette.background.paper}})));function x(){const e=h(),[n,a]=l.a.useState(0);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(r.a,{position:"static",children:Object(d.jsxs)(i.a,{variant:"fullWidth",value:n,onChange:(e,n)=>{a(n)},"aria-label":"nav tabs example",children:[Object(d.jsx)(u,{label:"Page One",href:"/drafts",...p(0)}),Object(d.jsx)(u,{label:"Page Two",href:"/trash",...p(1)}),Object(d.jsx)(u,{label:"Page Three",href:"/spam",...p(2)})]})}),Object(d.jsx)(m,{value:n,index:0,children:"Page One"}),Object(d.jsx)(m,{value:n,index:1,children:"Page Two"}),Object(d.jsx)(m,{value:n,index:2,children:"Page Three"})]})}},2337:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport PropTypes from \'prop-types\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport AppBar from \'@material-ui/core/AppBar\';\nimport Tabs from \'@material-ui/core/Tabs\';\nimport Tab from \'@material-ui/core/Tab\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Box from \'@material-ui/core/Box\';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <div\n role="tabpanel"\n hidden={value !== index}\n id={`nav-tabpanel-${index}`}\n aria-labelledby={`nav-tab-${index}`}\n {...other}\n >\n {value === index && (\n <Box p={3}>\n <Typography>{children}</Typography>\n </Box>\n )}\n </div>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n id: `nav-tab-${index}`,\n \'aria-controls\': `nav-tabpanel-${index}`,\n };\n}\n\nfunction LinkTab(props) {\n return (\n <Tab\n component="a"\n onClick={(event) => {\n event.preventDefault();\n }}\n {...props}\n />\n );\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function NavTabs() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <AppBar position="static">\n <Tabs\n variant="fullWidth"\n value={value}\n onChange={handleChange}\n aria-label="nav tabs example"\n >\n <LinkTab label="Page One" href="/drafts" {...a11yProps(0)} />\n <LinkTab label="Page Two" href="/trash" {...a11yProps(1)} />\n <LinkTab label="Page Three" href="/spam" {...a11yProps(2)} />\n </Tabs>\n </AppBar>\n <TabPanel value={value} index={0}>\n Page One\n </TabPanel>\n <TabPanel value={value} index={1}>\n Page Two\n </TabPanel>\n <TabPanel value={value} index={2}>\n Page Three\n </TabPanel>\n </div>\n );\n}\n'},2338:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return j}));var t=a(0),l=a.n(t),o=a(1072),r=a(193),i=a(1119),s=a(1117),c=a(1301),b=a.n(c),d=a(1175),m=a.n(d),p=a(1302),u=a.n(p),h=a(1);const x=Object(o.a)({root:{flexGrow:1,maxWidth:500}});function j(){const e=x(),[n,a]=l.a.useState(0);return Object(h.jsx)(r.a,{square:!0,className:e.root,children:Object(h.jsxs)(i.a,{value:n,onChange:(e,n)=>{a(n)},variant:"fullWidth",indicatorColor:"primary",textColor:"primary","aria-label":"icon tabs example",children:[Object(h.jsx)(s.a,{icon:Object(h.jsx)(b.a,{}),"aria-label":"phone"}),Object(h.jsx)(s.a,{icon:Object(h.jsx)(m.a,{}),"aria-label":"favorite"}),Object(h.jsx)(s.a,{icon:Object(h.jsx)(u.a,{}),"aria-label":"person"})]})})}},2339:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport PhoneIcon from '@material-ui/icons/Phone';\nimport FavoriteIcon from '@material-ui/icons/Favorite';\nimport PersonPinIcon from '@material-ui/icons/PersonPin';\n\nconst useStyles = makeStyles({\n root: {\n flexGrow: 1,\n maxWidth: 500,\n },\n});\n\nexport default function IconTabs() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <Paper square className={classes.root}>\n <Tabs\n value={value}\n onChange={handleChange}\n variant=\"fullWidth\"\n indicatorColor=\"primary\"\n textColor=\"primary\"\n aria-label=\"icon tabs example\"\n >\n <Tab icon={<PhoneIcon />} aria-label=\"phone\" />\n <Tab icon={<FavoriteIcon />} aria-label=\"favorite\" />\n <Tab icon={<PersonPinIcon />} aria-label=\"person\" />\n </Tabs>\n </Paper>\n );\n}\n"},2340:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return j}));var t=a(0),l=a.n(t),o=a(193),r=a(1072),i=a(1119),s=a(1117),c=a(1301),b=a.n(c),d=a(1175),m=a.n(d),p=a(1302),u=a.n(p),h=a(1);const x=Object(r.a)({root:{flexGrow:1,maxWidth:500}});function j(){const e=x(),[n,a]=l.a.useState(0);return Object(h.jsx)(o.a,{square:!0,className:e.root,children:Object(h.jsxs)(i.a,{value:n,onChange:(e,n)=>{a(n)},variant:"fullWidth",indicatorColor:"secondary",textColor:"secondary","aria-label":"icon label tabs example",children:[Object(h.jsx)(s.a,{icon:Object(h.jsx)(b.a,{}),label:"RECENTS"}),Object(h.jsx)(s.a,{icon:Object(h.jsx)(m.a,{}),label:"FAVORITES"}),Object(h.jsx)(s.a,{icon:Object(h.jsx)(u.a,{}),label:"NEARBY"})]})})}},2341:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport Paper from '@material-ui/core/Paper';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport PhoneIcon from '@material-ui/icons/Phone';\nimport FavoriteIcon from '@material-ui/icons/Favorite';\nimport PersonPinIcon from '@material-ui/icons/PersonPin';\n\nconst useStyles = makeStyles({\n root: {\n flexGrow: 1,\n maxWidth: 500,\n },\n});\n\nexport default function IconLabelTabs() {\n const classes = useStyles();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <Paper square className={classes.root}>\n <Tabs\n value={value}\n onChange={handleChange}\n variant=\"fullWidth\"\n indicatorColor=\"secondary\"\n textColor=\"secondary\"\n aria-label=\"icon label tabs example\"\n >\n <Tab icon={<PhoneIcon />} label=\"RECENTS\" />\n <Tab icon={<FavoriteIcon />} label=\"FAVORITES\" />\n <Tab icon={<PersonPinIcon />} label=\"NEARBY\" />\n </Tabs>\n </Paper>\n );\n}\n"},2342:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return h}));var t=a(0),l=a.n(t),o=a(1072),r=a(1100),i=a(1119),s=a(1117),c=a(194),b=a(1304),d=a(1);function m(e){const{children:n,value:a,index:t,...l}=e;return Object(d.jsx)("div",{role:"tabpanel",hidden:a!==t,id:"a11y-tabpanel-".concat(t),"aria-labelledby":"a11y-tab-".concat(t),...l,children:a===t&&Object(d.jsx)(b.a,{p:3,children:Object(d.jsx)(c.a,{children:n})})})}function p(e){const{labelId:n,onChange:a,selectionFollowsFocus:t,value:l}=e;return Object(d.jsx)(r.a,{position:"static",children:Object(d.jsxs)(i.a,{"aria-labelledby":n,onChange:a,selectionFollowsFocus:t,value:l,children:[Object(d.jsx)(s.a,{label:"Item One","aria-controls":"a11y-tabpanel-0",id:"a11y-tab-0"}),Object(d.jsx)(s.a,{label:"Item Two","aria-controls":"a11y-tabpanel-1",id:"a11y-tab-1"}),Object(d.jsx)(s.a,{label:"Item Three","aria-controls":"a11y-tabpanel-2",id:"a11y-tab-2"})]})})}const u=Object(o.a)({root:{flexGrow:1}});function h(){const e=u(),[n,a]=l.a.useState(0),t=(e,n)=>{a(n)};return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(c.a,{id:"demo-a11y-tabs-automatic-label",children:"Tabs where selection follows focus"}),Object(d.jsx)(p,{labelId:"demo-a11y-tabs-automatic-label",selectionFollowsFocus:!0,onChange:t,value:n}),Object(d.jsx)(c.a,{id:"demo-a11y-tabs-manual-label",children:"Tabs where each tab needs to be selected manually"}),Object(d.jsx)(p,{labelId:"demo-a11y-tabs-manual-label",onChange:t,value:n}),Object(d.jsx)(m,{value:n,index:0,children:"Item One"}),Object(d.jsx)(m,{value:n,index:1,children:"Item Two"}),Object(d.jsx)(m,{value:n,index:2,children:"Item Three"})]})}},2343:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport PropTypes from \'prop-types\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport AppBar from \'@material-ui/core/AppBar\';\nimport Tabs from \'@material-ui/core/Tabs\';\nimport Tab from \'@material-ui/core/Tab\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Box from \'@material-ui/core/Box\';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <div\n role="tabpanel"\n hidden={value !== index}\n id={`a11y-tabpanel-${index}`}\n aria-labelledby={`a11y-tab-${index}`}\n {...other}\n >\n {value === index && (\n <Box p={3}>\n <Typography>{children}</Typography>\n </Box>\n )}\n </div>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.number.isRequired,\n value: PropTypes.number.isRequired,\n};\n\nfunction DemoTabs(props) {\n const { labelId, onChange, selectionFollowsFocus, value } = props;\n\n return (\n <AppBar position="static">\n <Tabs\n aria-labelledby={labelId}\n onChange={onChange}\n selectionFollowsFocus={selectionFollowsFocus}\n value={value}\n >\n <Tab label="Item One" aria-controls="a11y-tabpanel-0" id="a11y-tab-0" />\n <Tab label="Item Two" aria-controls="a11y-tabpanel-1" id="a11y-tab-1" />\n <Tab label="Item Three" aria-controls="a11y-tabpanel-2" id="a11y-tab-2" />\n </Tabs>\n </AppBar>\n );\n}\n\nDemoTabs.propTypes = {\n labelId: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n selectionFollowsFocus: PropTypes.bool,\n value: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles({\n root: {\n flexGrow: 1,\n },\n});\n\nexport default function AccessibleTabs() {\n const classes = useStyles();\n\n const [value, setValue] = React.useState(0);\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <Typography id="demo-a11y-tabs-automatic-label">\n Tabs where selection follows focus\n </Typography>\n <DemoTabs\n labelId="demo-a11y-tabs-automatic-label"\n selectionFollowsFocus\n onChange={handleChange}\n value={value}\n />\n <Typography id="demo-a11y-tabs-manual-label">\n Tabs where each tab needs to be selected manually\n </Typography>\n <DemoTabs labelId="demo-a11y-tabs-manual-label" onChange={handleChange} value={value} />\n <TabPanel value={value} index={0}>\n Item One\n </TabPanel>\n <TabPanel value={value} index={1}>\n Item Two\n </TabPanel>\n <TabPanel value={value} index={2}>\n Item Three\n </TabPanel>\n </div>\n );\n}\n'},2344:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return p}));var t=a(0),l=a.n(t),o=a(1072),r=a(1100),i=a(1117),s=a(2612),c=a(2613),b=a(2614),d=a(1);const m=Object(o.a)((e=>({root:{flexGrow:1,backgroundColor:e.palette.background.paper}})));function p(){const e=m(),[n,a]=l.a.useState("1");return Object(d.jsx)("div",{className:e.root,children:Object(d.jsxs)(s.a,{value:n,children:[Object(d.jsx)(r.a,{position:"static",children:Object(d.jsxs)(c.a,{onChange:(e,n)=>{a(n)},"aria-label":"simple tabs example",children:[Object(d.jsx)(i.a,{label:"Item One",value:"1"}),Object(d.jsx)(i.a,{label:"Item Two",value:"2"}),Object(d.jsx)(i.a,{label:"Item Three",value:"3"})]})}),Object(d.jsx)(b.a,{value:"1",children:"Item One"}),Object(d.jsx)(b.a,{value:"2",children:"Item Two"}),Object(d.jsx)(b.a,{value:"3",children:"Item Three"})]})})}},2345:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport AppBar from \'@material-ui/core/AppBar\';\nimport Tab from \'@material-ui/core/Tab\';\nimport TabContext from \'@material-ui/lab/TabContext\';\nimport TabList from \'@material-ui/lab/TabList\';\nimport TabPanel from \'@material-ui/lab/TabPanel\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function LabTabs() {\n const classes = useStyles();\n const [value, setValue] = React.useState(\'1\');\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n <div className={classes.root}>\n <TabContext value={value}>\n <AppBar position="static">\n <TabList onChange={handleChange} aria-label="simple tabs example">\n <Tab label="Item One" value="1" />\n <Tab label="Item Two" value="2" />\n <Tab label="Item Three" value="3" />\n </TabList>\n </AppBar>\n <TabPanel value="1">Item One</TabPanel>\n <TabPanel value="2">Item Two</TabPanel>\n <TabPanel value="3">Item Three</TabPanel>\n </TabContext>\n </div>\n );\n}\n'},2611:function(e,n,a){"use strict";a.r(n);var t=a(1130),l=a(118),o=a(1098),r=a(1090),i=a(194),s=a(1072),c=a(1);const b=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return b(),Object(c.jsxs)(c.Fragment,{children:[Object(c.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(c.jsxs)(o.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/tabs",target:"_blank",role:"button",children:[Object(c.jsx)(r.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(c.jsx)(i.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Tabs"}),Object(c.jsx)(i.a,{className:"description",children:"Tabs make it easy to explore and switch between different views."}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(c.jsx)("a",{href:"https://material.io/design/components/tabs.html",children:"Tabs"})," organize and allow navigation between groups of content that are related and at the same level of hierarchy."]}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple Tabs"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"A simple example with no frills."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2316).default,raw:a(2317)})}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Wrapped Labels"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow and the text will not be visible."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2318).default,raw:a(2319)})}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Disabled Tab"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["A Tab can be disabled by setting ",Object(c.jsx)("code",{children:"disabled"})," property."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2320).default,raw:a(2321)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Fixed Tabs"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory."}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Full width"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["The ",Object(c.jsx)("code",{children:'variant="fullWidth"'})," property should be used for smaller views. This demo also uses"," ",Object(c.jsx)("a",{href:"https://github.com/oliviertassinari/react-swipeable-views",children:"react-swipeable-views"})," ","to animate the Tab transition, and allowing tabs to be swiped on touch devices."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2322).default,raw:a(2323)})}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Centered"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["The ",Object(c.jsx)("code",{children:"centered"})," property should be used for larger views."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2324).default,raw:a(2325)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Scrollable Tabs"}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Automatic Scroll Buttons"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Left and right scroll buttons will automatically be presented on desktop and hidden on mobile. (based on viewport width)"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2326).default,raw:a(2327)})}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Forced Scroll Buttons"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Left and right scroll buttons will be presented regardless of the viewport width."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2328).default,raw:a(2329)})}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Prevent Scroll Buttons"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Left and right scroll buttons will never be presented. All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2330).default,raw:a(2331)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized tabs"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["Here is an example of customizing the component. You can learn more about this in the",Object(c.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2332).default,raw:a(2333)})}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["\ud83c\udfa8 If you are looking for inspiration, you can check"," ",Object(c.jsx)("a",{href:"https://mui-treasury.com/styles/tabs/",children:"MUI Treasury's customization examples"}),"."]}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Vertical tabs"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2334).default,raw:a(2335)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Nav Tabs"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["By default tabs use a ",Object(c.jsx)("code",{children:"button"})," element, but you can provide your own custom tag or component. Here's an example of implementing tabbed navigation:"]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2336).default,raw:a(2337)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Icon Tabs"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Tab labels may be either all icons or all text."}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2338).default,raw:a(2339)}),Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2340).default,raw:a(2341)})]}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(c.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#tabpanel",children:"https://www.w3.org/TR/wai-aria-practices/#tabpanel"}),")"]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"The following steps are needed in order to provide necessary information for assistive technologies:"}),Object(c.jsxs)("ol",{children:[Object(c.jsxs)("li",{children:["Label ",Object(c.jsx)("code",{children:"Tabs"})," via ",Object(c.jsx)("code",{children:"aria-label"})," or ",Object(c.jsx)("code",{children:"aria-labelledby"}),"."]}),Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"Tab"}),"s need to be connected to their corresponding"," ",Object(c.jsx)("code",{children:'[role="tabpanel"]'})," by setting the correct ",Object(c.jsx)("code",{children:"id"}),","," ",Object(c.jsx)("code",{children:"aria-controls"})," and ",Object(c.jsx)("code",{children:"aria-labelledby"}),"."]})]}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["An example for the current implementation can be found in the demos on this page. We've also published ",Object(c.jsx)("a",{href:"#experimental-api",children:"an experimental API"})," in"," ",Object(c.jsx)("code",{children:"@material-ui/lab"})," that does not require extra work."]}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Keyboard navigation"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:['The components implement keyboard navigation using the "manual activation" behavior. If you want to switch to the "selection automatically follows focus" behavior you have pass ',Object(c.jsx)("code",{children:"selectionFollowsFocus"})," to the ",Object(c.jsx)("code",{children:"Tabs"})," ","component. The WAI-ARIA authoring practices have a detailed guide on"," ",Object(c.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus",children:"how to decide when to make selection automatically follow focus"}),"."]}),Object(c.jsx)(i.a,{className:"text-16 mt-32 mb-8",component:"h4",children:"Demo"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"The following two demos only differ in their keyboard navigation behavior. Focus a tab and navigate with arrow keys to notice the difference."}),Object(c.jsx)(l.a,{component:"pre",className:"language-jsx",children:" \n/* Tabs where selection follows focus */\n<Tabs selectionFollowsFocus />\n/* Tabs where each tab needs to be selected manually */\n<Tabs />\n"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2342).default,raw:a(2343)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Experimental API"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(c.jsx)("code",{children:"@material-ui/lab"})," offers utility components that inject props to implement accessible tabs following"," ",Object(c.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#tabpanel",children:"WAI-ARIA authoring practices"}),"."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2344).default,raw:a(2345)})})]})}}}]);
Zerion Mini Shell 1.0