%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[39],{1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return w}));var a=n(118),s=n(1100),i=n(1109),o=n(1090),c=n(1117),r=n(1119),l=n(5),p=n(0),d=n(1024),m=n(551),h=n(1087),u=n(1099),b=n(11),S=n(370),g=n(371),v=n(1131),j=n.n(v),f=n(1);const x=Object(d.a)({productionPrefix:"iframe-"});class y extends p.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(S.a)({...Object(m.a)(),plugins:[...Object(m.a)().plugins,Object(g.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(f.jsxs)(f.Fragment,{children:[Object(f.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(f.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(f.jsx)(j.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(f.jsx)(h.b,{jss:this.state.jss,generateClassName:x,sheetsManager:this.state.sheetsManager,children:Object(f.jsx)(u.a,{theme:n,children:Object(p.cloneElement)(e,{container:this.state.container})})}):null})}}var k=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(y);function O(e){const[t,n]=Object(p.useState)(e.currentTabIndex),{component:d,raw:m,iframe:h,className:u}=e;return Object(f.jsxs)(i.a,{className:Object(l.a)(u,"shadow"),children:[Object(f.jsx)(s.a,{position:"static",color:"default",className:"shadow-0",children:Object(f.jsxs)(r.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[d&&Object(f.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(f.jsx)(o.a,{children:"remove_red_eye"})}),m&&Object(f.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(f.jsx)(o.a,{children:"code"})})]})}),Object(f.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(f.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(h?Object(f.jsx)(k,{children:Object(f.jsx)(d,{})}):Object(f.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(f.jsx)(d,{})}))}),Object(f.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:m&&Object(f.jsx)("div",{className:"flex flex-1",children:Object(f.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:m.default})})})]})]})}O.defaultProps={currentTabIndex:0};var w=O},2234:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var a=n(0),s=n.n(a),i=n(1072),o=n(1484),c=n(1486),r=n(2505),l=n(1098),p=n(194),d=n(1);const m=Object(i.a)((e=>({root:{width:"100%"},button:{marginRight:e.spacing(1)},instructions:{marginTop:e.spacing(1),marginBottom:e.spacing(1)}})));function h(e){switch(e){case 0:return"Select campaign settings...";case 1:return"What is an ad group anyways?";case 2:return"This is the bit I really care about!";default:return"Unknown step"}}function u(){const e=m(),[t,n]=s.a.useState(0),[a,i]=s.a.useState(new Set),u=["Select campaign settings","Create an ad group","Create an ad"],b=e=>1===e,S=e=>a.has(e);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{activeStep:t,children:u.map(((e,t)=>{const n={},a={};return b(t)&&(a.optional=Object(d.jsx)(p.a,{variant:"caption",children:"Optional"})),S(t)&&(n.completed=!1),Object(d.jsx)(c.a,{...n,children:Object(d.jsx)(r.a,{...a,children:e})},e)}))}),Object(d.jsx)("div",{children:t===u.length?Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:"All steps completed - you're finished"}),Object(d.jsx)(l.a,{onClick:()=>{n(0)},className:e.button,children:"Reset"})]}):Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:h(t)}),Object(d.jsxs)("div",{children:[Object(d.jsx)(l.a,{disabled:0===t,onClick:()=>{n((e=>e-1))},className:e.button,children:"Back"}),b(t)&&Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:()=>{if(!b(t))throw new Error("You can't skip a step that isn't optional.");n((e=>e+1)),i((e=>{const n=new Set(e.values());return n.add(t),n}))},className:e.button,children:"Skip"}),Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:()=>{let e=a;S(t)&&(e=new Set(e.values()),e.delete(t)),n((e=>e+1)),i(e)},className:e.button,children:t===u.length-1?"Finish":"Next"})]})]})})]})}},2235:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Stepper from '@material-ui/core/Stepper';\nimport Step from '@material-ui/core/Step';\nimport StepLabel from '@material-ui/core/StepLabel';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n button: {\n marginRight: theme.spacing(1),\n },\n instructions: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n}));\n\nfunction getSteps() {\n return ['Select campaign settings', 'Create an ad group', 'Create an ad'];\n}\n\nfunction getStepContent(step) {\n switch (step) {\n case 0:\n return 'Select campaign settings...';\n case 1:\n return 'What is an ad group anyways?';\n case 2:\n return 'This is the bit I really care about!';\n default:\n return 'Unknown step';\n }\n}\n\nexport default function HorizontalLinearStepper() {\n const classes = useStyles();\n const [activeStep, setActiveStep] = React.useState(0);\n const [skipped, setSkipped] = React.useState(new Set());\n const steps = getSteps();\n\n const isStepOptional = (step) => {\n return step === 1;\n };\n\n const isStepSkipped = (step) => {\n return skipped.has(step);\n };\n\n const handleNext = () => {\n let newSkipped = skipped;\n if (isStepSkipped(activeStep)) {\n newSkipped = new Set(newSkipped.values());\n newSkipped.delete(activeStep);\n }\n\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n setSkipped(newSkipped);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleSkip = () => {\n if (!isStepOptional(activeStep)) {\n // You probably want to guard against something like this,\n // it should never occur unless someone's actively trying to break something.\n throw new Error(\"You can't skip a step that isn't optional.\");\n }\n\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n setSkipped((prevSkipped) => {\n const newSkipped = new Set(prevSkipped.values());\n newSkipped.add(activeStep);\n return newSkipped;\n });\n };\n\n const handleReset = () => {\n setActiveStep(0);\n };\n\n return (\n <div className={classes.root}>\n <Stepper activeStep={activeStep}>\n {steps.map((label, index) => {\n const stepProps = {};\n const labelProps = {};\n if (isStepOptional(index)) {\n labelProps.optional = <Typography variant=\"caption\">Optional</Typography>;\n }\n if (isStepSkipped(index)) {\n stepProps.completed = false;\n }\n return (\n <Step key={label} {...stepProps}>\n <StepLabel {...labelProps}>{label}</StepLabel>\n </Step>\n );\n })}\n </Stepper>\n <div>\n {activeStep === steps.length ? (\n <div>\n <Typography className={classes.instructions}>\n All steps completed - you're finished\n </Typography>\n <Button onClick={handleReset} className={classes.button}>\n Reset\n </Button>\n </div>\n ) : (\n <div>\n <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>\n <div>\n <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>\n Back\n </Button>\n {isStepOptional(activeStep) && (\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleSkip}\n className={classes.button}\n >\n Skip\n </Button>\n )}\n\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleNext}\n className={classes.button}\n >\n {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n </Button>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"},2236:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var a=n(0),s=n.n(a),i=n(1072),o=n(1484),c=n(1486),r=n(2505),l=n(1098),p=n(194),d=n(1);const m=Object(i.a)((e=>({root:{width:"100%"},backButton:{marginRight:e.spacing(1)},instructions:{marginTop:e.spacing(1),marginBottom:e.spacing(1)}})));function h(e){switch(e){case 0:return"Select campaign settings...";case 1:return"What is an ad group anyways?";case 2:return"This is the bit I really care about!";default:return"Unknown stepIndex"}}function u(){const e=m(),[t,n]=s.a.useState(0),a=["Select master blaster campaign settings","Create an ad group","Create an ad"];return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{activeStep:t,alternativeLabel:!0,children:a.map((e=>Object(d.jsx)(c.a,{children:Object(d.jsx)(r.a,{children:e})},e)))}),Object(d.jsx)("div",{children:t===a.length?Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:"All steps completed"}),Object(d.jsx)(l.a,{onClick:()=>{n(0)},children:"Reset"})]}):Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:h(t)}),Object(d.jsxs)("div",{children:[Object(d.jsx)(l.a,{disabled:0===t,onClick:()=>{n((e=>e-1))},className:e.backButton,children:"Back"}),Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:()=>{n((e=>e+1))},children:t===a.length-1?"Finish":"Next"})]})]})})]})}},2237:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Stepper from '@material-ui/core/Stepper';\nimport Step from '@material-ui/core/Step';\nimport StepLabel from '@material-ui/core/StepLabel';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n backButton: {\n marginRight: theme.spacing(1),\n },\n instructions: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n}));\n\nfunction getSteps() {\n return ['Select master blaster campaign settings', 'Create an ad group', 'Create an ad'];\n}\n\nfunction getStepContent(stepIndex) {\n switch (stepIndex) {\n case 0:\n return 'Select campaign settings...';\n case 1:\n return 'What is an ad group anyways?';\n case 2:\n return 'This is the bit I really care about!';\n default:\n return 'Unknown stepIndex';\n }\n}\n\nexport default function HorizontalLabelPositionBelowStepper() {\n const classes = useStyles();\n const [activeStep, setActiveStep] = React.useState(0);\n const steps = getSteps();\n\n const handleNext = () => {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleReset = () => {\n setActiveStep(0);\n };\n\n return (\n <div className={classes.root}>\n <Stepper activeStep={activeStep} alternativeLabel>\n {steps.map((label) => (\n <Step key={label}>\n <StepLabel>{label}</StepLabel>\n </Step>\n ))}\n </Stepper>\n <div>\n {activeStep === steps.length ? (\n <div>\n <Typography className={classes.instructions}>All steps completed</Typography>\n <Button onClick={handleReset}>Reset</Button>\n </div>\n ) : (\n <div>\n <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>\n <div>\n <Button\n disabled={activeStep === 0}\n onClick={handleBack}\n className={classes.backButton}\n >\n Back\n </Button>\n <Button variant=\"contained\" color=\"primary\" onClick={handleNext}>\n {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n </Button>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"},2238:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return R}));var a=n(0),s=n.n(a),i=n(11),o=n(1072),c=n(5),r=n(1484),l=n(1486),p=n(2505),d=n(1233),m=n.n(d),h=n(1348),u=n.n(h),b=n(2239),S=n.n(b),g=n(2240),v=n.n(g),j=n(1485),f=n(1098),x=n(194),y=n(1);const k=Object(i.a)({alternativeLabel:{top:10,left:"calc(-50% + 16px)",right:"calc(50% + 16px)"},active:{"& $line":{borderColor:"#784af4"}},completed:{"& $line":{borderColor:"#784af4"}},line:{borderColor:"#eaeaf0",borderTopWidth:3,borderRadius:1}})(j.a),O=Object(o.a)({root:{color:"#eaeaf0",display:"flex",height:22,alignItems:"center"},active:{color:"#784af4"},circle:{width:8,height:8,borderRadius:"50%",backgroundColor:"currentColor"},completed:{color:"#784af4",zIndex:1,fontSize:18}});function w(e){const t=O(),{active:n,completed:a}=e;return Object(y.jsx)("div",{className:Object(c.a)(t.root,{[t.active]:n}),children:a?Object(y.jsx)(m.a,{className:t.completed}):Object(y.jsx)("div",{className:t.circle})})}const N=Object(i.a)({alternativeLabel:{top:22},active:{"& $line":{backgroundImage:"linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)"}},completed:{"& $line":{backgroundImage:"linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)"}},line:{height:3,border:0,backgroundColor:"#eaeaf0",borderRadius:1}})(j.a),C=Object(o.a)({root:{backgroundColor:"#ccc",zIndex:1,color:"#fff",width:50,height:50,display:"flex",borderRadius:"50%",justifyContent:"center",alignItems:"center"},active:{backgroundImage:"linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)",boxShadow:"0 4px 10px 0 rgba(0,0,0,.25)"},completed:{backgroundImage:"linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)"}});function B(e){const t=C(),{active:n,completed:a}=e,s={1:Object(y.jsx)(u.a,{}),2:Object(y.jsx)(S.a,{}),3:Object(y.jsx)(v.a,{})};return Object(y.jsx)("div",{className:Object(c.a)(t.root,{[t.active]:n,[t.completed]:a}),children:s[String(e.icon)]})}const A=Object(o.a)((e=>({root:{width:"100%"},button:{marginRight:e.spacing(1)},instructions:{marginTop:e.spacing(1),marginBottom:e.spacing(1)}})));function T(e){switch(e){case 0:return"Select campaign settings...";case 1:return"What is an ad group anyways?";case 2:return"This is the bit I really care about!";default:return"Unknown step"}}function R(){const e=A(),[t,n]=s.a.useState(1),a=["Select campaign settings","Create an ad group","Create an ad"];return Object(y.jsxs)("div",{className:e.root,children:[Object(y.jsx)(r.a,{alternativeLabel:!0,activeStep:t,children:a.map((e=>Object(y.jsx)(l.a,{children:Object(y.jsx)(p.a,{children:e})},e)))}),Object(y.jsx)(r.a,{alternativeLabel:!0,activeStep:t,connector:Object(y.jsx)(k,{}),children:a.map((e=>Object(y.jsx)(l.a,{children:Object(y.jsx)(p.a,{StepIconComponent:w,children:e})},e)))}),Object(y.jsx)(r.a,{alternativeLabel:!0,activeStep:t,connector:Object(y.jsx)(N,{}),children:a.map((e=>Object(y.jsx)(l.a,{children:Object(y.jsx)(p.a,{StepIconComponent:B,children:e})},e)))}),Object(y.jsx)("div",{children:t===a.length?Object(y.jsxs)("div",{children:[Object(y.jsx)(x.a,{className:e.instructions,children:"All steps completed - you're finished"}),Object(y.jsx)(f.a,{onClick:()=>{n(0)},className:e.button,children:"Reset"})]}):Object(y.jsxs)("div",{children:[Object(y.jsx)(x.a,{className:e.instructions,children:T(t)}),Object(y.jsxs)("div",{children:[Object(y.jsx)(f.a,{disabled:0===t,onClick:()=>{n((e=>e-1))},className:e.button,children:"Back"}),Object(y.jsx)(f.a,{variant:"contained",color:"primary",onClick:()=>{n((e=>e+1))},className:e.button,children:t===a.length-1?"Finish":"Next"})]})]})})]})}},2241:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport clsx from 'clsx';\nimport Stepper from '@material-ui/core/Stepper';\nimport Step from '@material-ui/core/Step';\nimport StepLabel from '@material-ui/core/StepLabel';\nimport Check from '@material-ui/icons/Check';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport GroupAddIcon from '@material-ui/icons/GroupAdd';\nimport VideoLabelIcon from '@material-ui/icons/VideoLabel';\nimport StepConnector from '@material-ui/core/StepConnector';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\n\nconst QontoConnector = withStyles({\n alternativeLabel: {\n top: 10,\n left: 'calc(-50% + 16px)',\n right: 'calc(50% + 16px)',\n },\n active: {\n '& $line': {\n borderColor: '#784af4',\n },\n },\n completed: {\n '& $line': {\n borderColor: '#784af4',\n },\n },\n line: {\n borderColor: '#eaeaf0',\n borderTopWidth: 3,\n borderRadius: 1,\n },\n})(StepConnector);\n\nconst useQontoStepIconStyles = makeStyles({\n root: {\n color: '#eaeaf0',\n display: 'flex',\n height: 22,\n alignItems: 'center',\n },\n active: {\n color: '#784af4',\n },\n circle: {\n width: 8,\n height: 8,\n borderRadius: '50%',\n backgroundColor: 'currentColor',\n },\n completed: {\n color: '#784af4',\n zIndex: 1,\n fontSize: 18,\n },\n});\n\nfunction QontoStepIcon(props) {\n const classes = useQontoStepIconStyles();\n const { active, completed } = props;\n\n return (\n <div\n className={clsx(classes.root, {\n [classes.active]: active,\n })}\n >\n {completed ? <Check className={classes.completed} /> : <div className={classes.circle} />}\n </div>\n );\n}\n\nQontoStepIcon.propTypes = {\n /**\n * Whether this step is active.\n */\n active: PropTypes.bool,\n /**\n * Mark the step as completed. Is passed to child components.\n */\n completed: PropTypes.bool,\n};\n\nconst ColorlibConnector = withStyles({\n alternativeLabel: {\n top: 22,\n },\n active: {\n '& $line': {\n backgroundImage:\n 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',\n },\n },\n completed: {\n '& $line': {\n backgroundImage:\n 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',\n },\n },\n line: {\n height: 3,\n border: 0,\n backgroundColor: '#eaeaf0',\n borderRadius: 1,\n },\n})(StepConnector);\n\nconst useColorlibStepIconStyles = makeStyles({\n root: {\n backgroundColor: '#ccc',\n zIndex: 1,\n color: '#fff',\n width: 50,\n height: 50,\n display: 'flex',\n borderRadius: '50%',\n justifyContent: 'center',\n alignItems: 'center',\n },\n active: {\n backgroundImage:\n 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',\n boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',\n },\n completed: {\n backgroundImage:\n 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',\n },\n});\n\nfunction ColorlibStepIcon(props) {\n const classes = useColorlibStepIconStyles();\n const { active, completed } = props;\n\n const icons = {\n 1: <SettingsIcon />,\n 2: <GroupAddIcon />,\n 3: <VideoLabelIcon />,\n };\n\n return (\n <div\n className={clsx(classes.root, {\n [classes.active]: active,\n [classes.completed]: completed,\n })}\n >\n {icons[String(props.icon)]}\n </div>\n );\n}\n\nColorlibStepIcon.propTypes = {\n /**\n * Whether this step is active.\n */\n active: PropTypes.bool,\n /**\n * Mark the step as completed. Is passed to child components.\n */\n completed: PropTypes.bool,\n /**\n * The label displayed in the step icon.\n */\n icon: PropTypes.node,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n button: {\n marginRight: theme.spacing(1),\n },\n instructions: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n}));\n\nfunction getSteps() {\n return ['Select campaign settings', 'Create an ad group', 'Create an ad'];\n}\n\nfunction getStepContent(step) {\n switch (step) {\n case 0:\n return 'Select campaign settings...';\n case 1:\n return 'What is an ad group anyways?';\n case 2:\n return 'This is the bit I really care about!';\n default:\n return 'Unknown step';\n }\n}\n\nexport default function CustomizedSteppers() {\n const classes = useStyles();\n const [activeStep, setActiveStep] = React.useState(1);\n const steps = getSteps();\n\n const handleNext = () => {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleReset = () => {\n setActiveStep(0);\n };\n\n return (\n <div className={classes.root}>\n <Stepper alternativeLabel activeStep={activeStep}>\n {steps.map((label) => (\n <Step key={label}>\n <StepLabel>{label}</StepLabel>\n </Step>\n ))}\n </Stepper>\n <Stepper alternativeLabel activeStep={activeStep} connector={<QontoConnector />}>\n {steps.map((label) => (\n <Step key={label}>\n <StepLabel StepIconComponent={QontoStepIcon}>{label}</StepLabel>\n </Step>\n ))}\n </Stepper>\n <Stepper alternativeLabel activeStep={activeStep} connector={<ColorlibConnector />}>\n {steps.map((label) => (\n <Step key={label}>\n <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>\n </Step>\n ))}\n </Stepper>\n <div>\n {activeStep === steps.length ? (\n <div>\n <Typography className={classes.instructions}>\n All steps completed - you're finished\n </Typography>\n <Button onClick={handleReset} className={classes.button}>\n Reset\n </Button>\n </div>\n ) : (\n <div>\n <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>\n <div>\n <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>\n Back\n </Button>\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleNext}\n className={classes.button}\n >\n {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n </Button>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"},2242:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var a=n(0),s=n.n(a),i=n(1072),o=n(1484),c=n(1486),r=n(2604),l=n(1098),p=n(194),d=n(1);const m=Object(i.a)((e=>({root:{width:"100%"},button:{marginRight:e.spacing(1)},completed:{display:"inline-block"},instructions:{marginTop:e.spacing(1),marginBottom:e.spacing(1)}})));function h(e){switch(e){case 0:return"Step 1: Select campaign settings...";case 1:return"Step 2: What is an ad group anyways?";case 2:return"Step 3: This is the bit I really care about!";default:return"Unknown step"}}function u(){const e=m(),[t,n]=s.a.useState(0),[a,i]=s.a.useState({}),u=["Select campaign settings","Create an ad group","Create an ad"],b=()=>u.length,S=()=>Object.keys(a).length,g=()=>S()===b(),v=()=>{const e=t!==b()-1||g()?t+1:u.findIndex(((e,t)=>!(t in a)));n(e)};return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{nonLinear:!0,activeStep:t,children:u.map(((e,t)=>{return Object(d.jsx)(c.a,{children:Object(d.jsx)(r.a,{onClick:(s=t,()=>{n(s)}),completed:a[t],children:e})},e);var s}))}),Object(d.jsx)("div",{children:g()?Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:"All steps completed - you're finished"}),Object(d.jsx)(l.a,{onClick:()=>{n(0),i({})},children:"Reset"})]}):Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:h(t)}),Object(d.jsxs)("div",{children:[Object(d.jsx)(l.a,{disabled:0===t,onClick:()=>{n((e=>e-1))},className:e.button,children:"Back"}),Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:v,className:e.button,children:"Next"}),t!==u.length&&(a[t]?Object(d.jsxs)(p.a,{variant:"caption",className:e.completed,children:["Step ",t+1," already completed"]}):Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:()=>{const e=a;e[t]=!0,i(e),v()},children:S()===b()-1?"Finish":"Complete Step"}))]})]})})]})}},2243:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Stepper from '@material-ui/core/Stepper';\nimport Step from '@material-ui/core/Step';\nimport StepButton from '@material-ui/core/StepButton';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n button: {\n marginRight: theme.spacing(1),\n },\n completed: {\n display: 'inline-block',\n },\n instructions: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n}));\n\nfunction getSteps() {\n return ['Select campaign settings', 'Create an ad group', 'Create an ad'];\n}\n\nfunction getStepContent(step) {\n switch (step) {\n case 0:\n return 'Step 1: Select campaign settings...';\n case 1:\n return 'Step 2: What is an ad group anyways?';\n case 2:\n return 'Step 3: This is the bit I really care about!';\n default:\n return 'Unknown step';\n }\n}\n\nexport default function HorizontalNonLinearStepper() {\n const classes = useStyles();\n const [activeStep, setActiveStep] = React.useState(0);\n const [completed, setCompleted] = React.useState({});\n const steps = getSteps();\n\n const totalSteps = () => {\n return steps.length;\n };\n\n const completedSteps = () => {\n return Object.keys(completed).length;\n };\n\n const isLastStep = () => {\n return activeStep === totalSteps() - 1;\n };\n\n const allStepsCompleted = () => {\n return completedSteps() === totalSteps();\n };\n\n const handleNext = () => {\n const newActiveStep =\n isLastStep() && !allStepsCompleted()\n ? // It's the last step, but not all steps have been completed,\n // find the first step that has been completed\n steps.findIndex((step, i) => !(i in completed))\n : activeStep + 1;\n setActiveStep(newActiveStep);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleStep = (step) => () => {\n setActiveStep(step);\n };\n\n const handleComplete = () => {\n const newCompleted = completed;\n newCompleted[activeStep] = true;\n setCompleted(newCompleted);\n handleNext();\n };\n\n const handleReset = () => {\n setActiveStep(0);\n setCompleted({});\n };\n\n return (\n <div className={classes.root}>\n <Stepper nonLinear activeStep={activeStep}>\n {steps.map((label, index) => (\n <Step key={label}>\n <StepButton onClick={handleStep(index)} completed={completed[index]}>\n {label}\n </StepButton>\n </Step>\n ))}\n </Stepper>\n <div>\n {allStepsCompleted() ? (\n <div>\n <Typography className={classes.instructions}>\n All steps completed - you're finished\n </Typography>\n <Button onClick={handleReset}>Reset</Button>\n </div>\n ) : (\n <div>\n <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>\n <div>\n <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>\n Back\n </Button>\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleNext}\n className={classes.button}\n >\n Next\n </Button>\n {activeStep !== steps.length &&\n (completed[activeStep] ? (\n <Typography variant=\"caption\" className={classes.completed}>\n Step {activeStep + 1} already completed\n </Typography>\n ) : (\n <Button variant=\"contained\" color=\"primary\" onClick={handleComplete}>\n {completedSteps() === totalSteps() - 1 ? 'Finish' : 'Complete Step'}\n </Button>\n ))}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"},2244:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var a=n(0),s=n.n(a),i=n(1072),o=n(1484),c=n(1486),r=n(2604),l=n(1098),p=n(194),d=n(1);const m=Object(i.a)((e=>({root:{width:"100%"},button:{marginRight:e.spacing(1)},backButton:{marginRight:e.spacing(1)},completed:{display:"inline-block"},instructions:{marginTop:e.spacing(1),marginBottom:e.spacing(1)}})));function h(e){switch(e){case 0:return"Step 1: Select campaign settings...";case 1:return"Step 2: What is an ad group anyways?";case 2:return"Step 3: This is the bit I really care about!";default:return"Unknown step"}}function u(){const e=m(),[t,n]=s.a.useState(0),[a,i]=s.a.useState(new Set),[u,b]=s.a.useState(new Set),S=["Select campaign settings","Create an ad group","Create an ad"],g=e=>1===e,v=()=>u.size,j=()=>a.size,f=()=>j()===3-v(),x=()=>{const e=2!==t||f()?t+1:S.findIndex(((e,t)=>!a.has(t)));n(e)},y=e=>()=>{n(e)};function k(e){return a.has(e)}return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{alternativeLabel:!0,nonLinear:!0,activeStep:t,children:S.map(((e,t)=>{const n={},a={};var s;return g(t)&&(a.optional=Object(d.jsx)(p.a,{variant:"caption",children:"Optional"})),s=t,u.has(s)&&(n.completed=!1),Object(d.jsx)(c.a,{...n,children:Object(d.jsx)(r.a,{onClick:y(t),completed:k(t),...a,children:e})},e)}))}),Object(d.jsx)("div",{children:f()?Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:"All steps completed - you're finished"}),Object(d.jsx)(l.a,{onClick:()=>{n(0),i(new Set),b(new Set)},children:"Reset"})]}):Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:h(t)}),Object(d.jsxs)("div",{children:[Object(d.jsx)(l.a,{disabled:0===t,onClick:()=>{n((e=>e-1))},className:e.button,children:"Back"}),Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:x,className:e.button,children:"Next"}),g(t)&&!a.has(t)&&Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:()=>{if(!g(t))throw new Error("You can't skip a step that isn't optional.");n((e=>e+1)),b((e=>{const n=new Set(e.values());return n.add(t),n}))},className:e.button,children:"Skip"}),t!==S.length&&(a.has(t)?Object(d.jsxs)(p.a,{variant:"caption",className:e.completed,children:["Step ",t+1," already completed"]}):Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:()=>{const e=new Set(a);e.add(t),i(e),a.size!==3-v()&&x()},children:2===j()?"Finish":"Complete Step"}))]})]})})]})}},2245:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Stepper from '@material-ui/core/Stepper';\nimport Step from '@material-ui/core/Step';\nimport StepButton from '@material-ui/core/StepButton';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n button: {\n marginRight: theme.spacing(1),\n },\n backButton: {\n marginRight: theme.spacing(1),\n },\n completed: {\n display: 'inline-block',\n },\n instructions: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n}));\n\nfunction getSteps() {\n return ['Select campaign settings', 'Create an ad group', 'Create an ad'];\n}\n\nfunction getStepContent(step) {\n switch (step) {\n case 0:\n return 'Step 1: Select campaign settings...';\n case 1:\n return 'Step 2: What is an ad group anyways?';\n case 2:\n return 'Step 3: This is the bit I really care about!';\n default:\n return 'Unknown step';\n }\n}\n\nexport default function HorizontalNonLinearAlternativeLabelStepper() {\n const classes = useStyles();\n const [activeStep, setActiveStep] = React.useState(0);\n const [completed, setCompleted] = React.useState(new Set());\n const [skipped, setSkipped] = React.useState(new Set());\n const steps = getSteps();\n\n const totalSteps = () => {\n return getSteps().length;\n };\n\n const isStepOptional = (step) => {\n return step === 1;\n };\n\n const handleSkip = () => {\n if (!isStepOptional(activeStep)) {\n // You probably want to guard against something like this\n // it should never occur unless someone's actively trying to break something.\n throw new Error(\"You can't skip a step that isn't optional.\");\n }\n\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n setSkipped((prevSkipped) => {\n const newSkipped = new Set(prevSkipped.values());\n newSkipped.add(activeStep);\n return newSkipped;\n });\n };\n\n const skippedSteps = () => {\n return skipped.size;\n };\n\n const completedSteps = () => {\n return completed.size;\n };\n\n const allStepsCompleted = () => {\n return completedSteps() === totalSteps() - skippedSteps();\n };\n\n const isLastStep = () => {\n return activeStep === totalSteps() - 1;\n };\n\n const handleNext = () => {\n const newActiveStep =\n isLastStep() && !allStepsCompleted()\n ? // It's the last step, but not all steps have been completed\n // find the first step that has been completed\n steps.findIndex((step, i) => !completed.has(i))\n : activeStep + 1;\n\n setActiveStep(newActiveStep);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleStep = (step) => () => {\n setActiveStep(step);\n };\n\n const handleComplete = () => {\n const newCompleted = new Set(completed);\n newCompleted.add(activeStep);\n setCompleted(newCompleted);\n\n /**\n * Sigh... it would be much nicer to replace the following if conditional with\n * `if (!this.allStepsComplete())` however state is not set when we do this,\n * thus we have to resort to not being very DRY.\n */\n if (completed.size !== totalSteps() - skippedSteps()) {\n handleNext();\n }\n };\n\n const handleReset = () => {\n setActiveStep(0);\n setCompleted(new Set());\n setSkipped(new Set());\n };\n\n const isStepSkipped = (step) => {\n return skipped.has(step);\n };\n\n function isStepComplete(step) {\n return completed.has(step);\n }\n\n return (\n <div className={classes.root}>\n <Stepper alternativeLabel nonLinear activeStep={activeStep}>\n {steps.map((label, index) => {\n const stepProps = {};\n const buttonProps = {};\n if (isStepOptional(index)) {\n buttonProps.optional = <Typography variant=\"caption\">Optional</Typography>;\n }\n if (isStepSkipped(index)) {\n stepProps.completed = false;\n }\n return (\n <Step key={label} {...stepProps}>\n <StepButton\n onClick={handleStep(index)}\n completed={isStepComplete(index)}\n {...buttonProps}\n >\n {label}\n </StepButton>\n </Step>\n );\n })}\n </Stepper>\n <div>\n {allStepsCompleted() ? (\n <div>\n <Typography className={classes.instructions}>\n All steps completed - you're finished\n </Typography>\n <Button onClick={handleReset}>Reset</Button>\n </div>\n ) : (\n <div>\n <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>\n <div>\n <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>\n Back\n </Button>\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleNext}\n className={classes.button}\n >\n Next\n </Button>\n {isStepOptional(activeStep) && !completed.has(activeStep) && (\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleSkip}\n className={classes.button}\n >\n Skip\n </Button>\n )}\n\n {activeStep !== steps.length &&\n (completed.has(activeStep) ? (\n <Typography variant=\"caption\" className={classes.completed}>\n Step {activeStep + 1} already completed\n </Typography>\n ) : (\n <Button variant=\"contained\" color=\"primary\" onClick={handleComplete}>\n {completedSteps() === totalSteps() - 1 ? 'Finish' : 'Complete Step'}\n </Button>\n ))}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"},2246:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var a=n(0),s=n.n(a),i=n(1072),o=n(1484),c=n(1486),r=n(2505),l=n(1098),p=n(194),d=n(1);const m=Object(i.a)((e=>({root:{width:"100%"},button:{marginRight:e.spacing(1)},instructions:{marginTop:e.spacing(1),marginBottom:e.spacing(1)}})));function h(e){switch(e){case 0:return"Select campaign settings...";case 1:return"What is an ad group anyways?";case 2:return"This is the bit I really care about!";default:return"Unknown step"}}function u(){const e=m(),[t,n]=s.a.useState(0),[a,i]=s.a.useState(new Set),u=["Select campaign settings","Create an ad group","Create an ad"],b=e=>1===e,S=e=>a.has(e);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{activeStep:t,children:u.map(((e,t)=>{const n={},a={};return b(t)&&(a.optional=Object(d.jsx)(p.a,{variant:"caption",color:"error",children:"Alert message"})),1===t&&(a.error=!0),S(t)&&(n.completed=!1),Object(d.jsx)(c.a,{...n,children:Object(d.jsx)(r.a,{...a,children:e})},e)}))}),Object(d.jsx)("div",{children:t===u.length?Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:"All steps completed - you're finished"}),Object(d.jsx)(l.a,{onClick:()=>{n(0)},className:e.button,children:"Reset"})]}):Object(d.jsxs)("div",{children:[Object(d.jsx)(p.a,{className:e.instructions,children:h(t)}),Object(d.jsxs)("div",{children:[Object(d.jsx)(l.a,{disabled:0===t,onClick:()=>{n((e=>e-1))},className:e.button,children:"Back"}),b(t)&&Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:()=>{if(!b(t))throw new Error("You can't skip a step that isn't optional.");i((e=>{const n=new Set(e.values());return n.add(t),n})),n((e=>e+1))},className:e.button,children:"Skip"}),Object(d.jsx)(l.a,{variant:"contained",color:"primary",onClick:()=>{let e=a;S(t)&&(e=new Set(a.values()),e.delete(t)),n((e=>e+1)),i(e)},className:e.button,children:t===u.length-1?"Finish":"Next"})]})]})})]})}},2247:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Stepper from '@material-ui/core/Stepper';\nimport Step from '@material-ui/core/Step';\nimport StepLabel from '@material-ui/core/StepLabel';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n button: {\n marginRight: theme.spacing(1),\n },\n instructions: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n}));\n\nfunction getSteps() {\n return ['Select campaign settings', 'Create an ad group', 'Create an ad'];\n}\n\nfunction getStepContent(step) {\n switch (step) {\n case 0:\n return 'Select campaign settings...';\n case 1:\n return 'What is an ad group anyways?';\n case 2:\n return 'This is the bit I really care about!';\n default:\n return 'Unknown step';\n }\n}\n\nexport default function HorizontalNonLinearStepperWithError() {\n const classes = useStyles();\n const [activeStep, setActiveStep] = React.useState(0);\n const [skipped, setSkipped] = React.useState(new Set());\n const steps = getSteps();\n\n const isStepOptional = (step) => {\n return step === 1;\n };\n\n const isStepFailed = (step) => {\n return step === 1;\n };\n\n const isStepSkipped = (step) => {\n return skipped.has(step);\n };\n\n const handleNext = () => {\n let newSkipped = skipped;\n if (isStepSkipped(activeStep)) {\n newSkipped = new Set(skipped.values());\n newSkipped.delete(activeStep);\n }\n\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n setSkipped(newSkipped);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleSkip = () => {\n if (!isStepOptional(activeStep)) {\n // You probably want to guard against something like this,\n // it should never occur unless someone's actively trying to break something.\n throw new Error(\"You can't skip a step that isn't optional.\");\n }\n\n setSkipped((prevSkipped) => {\n const newSkipped = new Set(prevSkipped.values());\n newSkipped.add(activeStep);\n return newSkipped;\n });\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleReset = () => {\n setActiveStep(0);\n };\n\n return (\n <div className={classes.root}>\n <Stepper activeStep={activeStep}>\n {steps.map((label, index) => {\n const stepProps = {};\n const labelProps = {};\n if (isStepOptional(index)) {\n labelProps.optional = (\n <Typography variant=\"caption\" color=\"error\">\n Alert message\n </Typography>\n );\n }\n if (isStepFailed(index)) {\n labelProps.error = true;\n }\n if (isStepSkipped(index)) {\n stepProps.completed = false;\n }\n return (\n <Step key={label} {...stepProps}>\n <StepLabel {...labelProps}>{label}</StepLabel>\n </Step>\n );\n })}\n </Stepper>\n <div>\n {activeStep === steps.length ? (\n <div>\n <Typography className={classes.instructions}>\n All steps completed - you're finished\n </Typography>\n <Button onClick={handleReset} className={classes.button}>\n Reset\n </Button>\n </div>\n ) : (\n <div>\n <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>\n <div>\n <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>\n Back\n </Button>\n {isStepOptional(activeStep) && (\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleSkip}\n className={classes.button}\n >\n Skip\n </Button>\n )}\n\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleNext}\n className={classes.button}\n >\n {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n </Button>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"},2248:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return S}));var a=n(0),s=n.n(a),i=n(1072),o=n(1484),c=n(1486),r=n(2505),l=n(2605),p=n(1098),d=n(193),m=n(194),h=n(1);const u=Object(i.a)((e=>({root:{width:"100%"},button:{marginTop:e.spacing(1),marginRight:e.spacing(1)},actionsContainer:{marginBottom:e.spacing(2)},resetContainer:{padding:e.spacing(3)}})));function b(e){switch(e){case 0:return"For each ad campaign that you create, you can control how much\n you're willing to spend on clicks and conversions, which networks\n and geographical locations you want your ads to show on, and more.";case 1:return"An ad group contains one or more ads which target a shared set of keywords.";case 2:return"Try out different ad text to see what brings in the most customers,\n and learn how to enhance your ads using features like ad extensions.\n If you run into any problems with your ads, find out how to tell if\n they're running and how to resolve approval issues.";default:return"Unknown step"}}function S(){const e=u(),[t,n]=s.a.useState(0),a=["Select campaign settings","Create an ad group","Create an ad"],i=()=>{n((e=>e+1))},S=()=>{n((e=>e-1))};return Object(h.jsxs)("div",{className:e.root,children:[Object(h.jsx)(o.a,{activeStep:t,orientation:"vertical",children:a.map(((n,s)=>Object(h.jsxs)(c.a,{children:[Object(h.jsx)(r.a,{children:n}),Object(h.jsxs)(l.a,{children:[Object(h.jsx)(m.a,{children:b(s)}),Object(h.jsx)("div",{className:e.actionsContainer,children:Object(h.jsxs)("div",{children:[Object(h.jsx)(p.a,{disabled:0===t,onClick:S,className:e.button,children:"Back"}),Object(h.jsx)(p.a,{variant:"contained",color:"primary",onClick:i,className:e.button,children:t===a.length-1?"Finish":"Next"})]})})]})]},n)))}),t===a.length&&Object(h.jsxs)(d.a,{square:!0,elevation:0,className:e.resetContainer,children:[Object(h.jsx)(m.a,{children:"All steps completed - you're finished"}),Object(h.jsx)(p.a,{onClick:()=>{n(0)},className:e.button,children:"Reset"})]})]})}},2249:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Stepper from '@material-ui/core/Stepper';\nimport Step from '@material-ui/core/Step';\nimport StepLabel from '@material-ui/core/StepLabel';\nimport StepContent from '@material-ui/core/StepContent';\nimport Button from '@material-ui/core/Button';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n button: {\n marginTop: theme.spacing(1),\n marginRight: theme.spacing(1),\n },\n actionsContainer: {\n marginBottom: theme.spacing(2),\n },\n resetContainer: {\n padding: theme.spacing(3),\n },\n}));\n\nfunction getSteps() {\n return ['Select campaign settings', 'Create an ad group', 'Create an ad'];\n}\n\nfunction getStepContent(step) {\n switch (step) {\n case 0:\n return `For each ad campaign that you create, you can control how much\n you're willing to spend on clicks and conversions, which networks\n and geographical locations you want your ads to show on, and more.`;\n case 1:\n return 'An ad group contains one or more ads which target a shared set of keywords.';\n case 2:\n return `Try out different ad text to see what brings in the most customers,\n and learn how to enhance your ads using features like ad extensions.\n If you run into any problems with your ads, find out how to tell if\n they're running and how to resolve approval issues.`;\n default:\n return 'Unknown step';\n }\n}\n\nexport default function VerticalLinearStepper() {\n const classes = useStyles();\n const [activeStep, setActiveStep] = React.useState(0);\n const steps = getSteps();\n\n const handleNext = () => {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleReset = () => {\n setActiveStep(0);\n };\n\n return (\n <div className={classes.root}>\n <Stepper activeStep={activeStep} orientation=\"vertical\">\n {steps.map((label, index) => (\n <Step key={label}>\n <StepLabel>{label}</StepLabel>\n <StepContent>\n <Typography>{getStepContent(index)}</Typography>\n <div className={classes.actionsContainer}>\n <div>\n <Button\n disabled={activeStep === 0}\n onClick={handleBack}\n className={classes.button}\n >\n Back\n </Button>\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleNext}\n className={classes.button}\n >\n {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n </Button>\n </div>\n </div>\n </StepContent>\n </Step>\n ))}\n </Stepper>\n {activeStep === steps.length && (\n <Paper square elevation={0} className={classes.resetContainer}>\n <Typography>All steps completed - you're finished</Typography>\n <Button onClick={handleReset} className={classes.button}>\n Reset\n </Button>\n </Paper>\n )}\n </div>\n );\n}\n"},2250:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return v}));var a=n(0),s=n.n(a),i=n(1072),o=n(43),c=n(2606),r=n(193),l=n(194),p=n(1098),d=n(1198),m=n.n(d),h=n(1197),u=n.n(h),b=n(1);const S=[{label:"San Francisco \u2013 Oakland Bay Bridge, United States",imgPath:"https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60"},{label:"Bird",imgPath:"https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60"},{label:"Bali, Indonesia",imgPath:"https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80"},{label:"NeONBRAND Digital Marketing, Las Vegas, United States",imgPath:"https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60"},{label:"Go\u010d, Serbia",imgPath:"https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60"}],g=Object(i.a)((e=>({root:{maxWidth:400,flexGrow:1},header:{display:"flex",alignItems:"center",height:50,paddingLeft:e.spacing(4),backgroundColor:e.palette.background.default},img:{height:255,maxWidth:400,overflow:"hidden",display:"block",width:"100%"}})));function v(){const e=g(),t=Object(o.a)(),[n,a]=s.a.useState(0),i=S.length;return Object(b.jsxs)("div",{className:e.root,children:[Object(b.jsx)(r.a,{square:!0,elevation:0,className:e.header,children:Object(b.jsx)(l.a,{children:S[n].label})}),Object(b.jsx)("img",{className:e.img,src:S[n].imgPath,alt:S[n].label}),Object(b.jsx)(c.a,{steps:i,position:"static",variant:"text",activeStep:n,nextButton:Object(b.jsxs)(p.a,{size:"small",onClick:()=>{a((e=>e+1))},disabled:n===i-1,children:["Next","rtl"===t.direction?Object(b.jsx)(m.a,{}):Object(b.jsx)(u.a,{})]}),backButton:Object(b.jsxs)(p.a,{size:"small",onClick:()=>{a((e=>e-1))},disabled:0===n,children:["rtl"===t.direction?Object(b.jsx)(u.a,{}):Object(b.jsx)(m.a,{}),"Back"]})})]})}},2251:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport MobileStepper from '@material-ui/core/MobileStepper';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\n\nconst tutorialSteps = [\n {\n label: 'San Francisco \u2013 Oakland Bay Bridge, United States',\n imgPath:\n 'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',\n },\n {\n label: 'Bird',\n imgPath:\n 'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',\n },\n {\n label: 'Bali, Indonesia',\n imgPath:\n 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80',\n },\n {\n label: 'NeONBRAND Digital Marketing, Las Vegas, United States',\n imgPath:\n 'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60',\n },\n {\n label: 'Go\u010d, Serbia',\n imgPath:\n 'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60',\n },\n];\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n maxWidth: 400,\n flexGrow: 1,\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n height: 50,\n paddingLeft: theme.spacing(4),\n backgroundColor: theme.palette.background.default,\n },\n img: {\n height: 255,\n maxWidth: 400,\n overflow: 'hidden',\n display: 'block',\n width: '100%',\n },\n}));\n\nexport default function TextMobileStepper() {\n const classes = useStyles();\n const theme = useTheme();\n const [activeStep, setActiveStep] = React.useState(0);\n const maxSteps = tutorialSteps.length;\n\n const handleNext = () => {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n return (\n <div className={classes.root}>\n <Paper square elevation={0} className={classes.header}>\n <Typography>{tutorialSteps[activeStep].label}</Typography>\n </Paper>\n <img\n className={classes.img}\n src={tutorialSteps[activeStep].imgPath}\n alt={tutorialSteps[activeStep].label}\n />\n <MobileStepper\n steps={maxSteps}\n position=\"static\"\n variant=\"text\"\n activeStep={activeStep}\n nextButton={\n <Button size=\"small\" onClick={handleNext} disabled={activeStep === maxSteps - 1}>\n Next\n {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}\n </Button>\n }\n backButton={\n <Button size=\"small\" onClick={handleBack} disabled={activeStep === 0}>\n {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}\n Back\n </Button>\n }\n />\n </div>\n );\n}\n"},2252:function(e,t,n){"use strict";n.r(t);var a=n(0),s=n.n(a),i=n(1072),o=n(43),c=n(2606),r=n(193),l=n(194),p=n(1098),d=n(1198),m=n.n(d),h=n(1197),u=n.n(h),b=n(1273),S=n.n(b),g=n(2253),v=n(1);const j=Object(g.autoPlay)(S.a),f=[{label:"San Francisco \u2013 Oakland Bay Bridge, United States",imgPath:"https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60"},{label:"Bird",imgPath:"https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60"},{label:"Bali, Indonesia",imgPath:"https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80"},{label:"NeONBRAND Digital Marketing, Las Vegas, United States",imgPath:"https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60"},{label:"Go\u010d, Serbia",imgPath:"https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60"}],x=Object(i.a)((e=>({root:{maxWidth:400,flexGrow:1},header:{display:"flex",alignItems:"center",height:50,paddingLeft:e.spacing(4),backgroundColor:e.palette.background.default},img:{height:255,display:"block",maxWidth:400,overflow:"hidden",width:"100%"}})));t.default=function(){const e=x(),t=Object(o.a)(),[n,a]=s.a.useState(0),i=f.length;return Object(v.jsxs)("div",{className:e.root,children:[Object(v.jsx)(r.a,{square:!0,elevation:0,className:e.header,children:Object(v.jsx)(l.a,{children:f[n].label})}),Object(v.jsx)(j,{axis:"rtl"===t.direction?"x-reverse":"x",index:n,onChangeIndex:e=>{a(e)},enableMouseEvents:!0,children:f.map(((t,a)=>Object(v.jsx)("div",{children:Math.abs(n-a)<=2?Object(v.jsx)("img",{className:e.img,src:t.imgPath,alt:t.label}):null},t.label)))}),Object(v.jsx)(c.a,{steps:i,position:"static",variant:"text",activeStep:n,nextButton:Object(v.jsxs)(p.a,{size:"small",onClick:()=>{a((e=>e+1))},disabled:n===i-1,children:["Next","rtl"===t.direction?Object(v.jsx)(m.a,{}):Object(v.jsx)(u.a,{})]}),backButton:Object(v.jsxs)(p.a,{size:"small",onClick:()=>{a((e=>e-1))},disabled:0===n,children:["rtl"===t.direction?Object(v.jsx)(u.a,{}):Object(v.jsx)(m.a,{}),"Back"]})})]})}},2269:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport MobileStepper from '@material-ui/core/MobileStepper';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\nimport SwipeableViews from 'react-swipeable-views';\nimport { autoPlay } from 'react-swipeable-views-utils';\n\nconst AutoPlaySwipeableViews = autoPlay(SwipeableViews);\n\nconst tutorialSteps = [\n {\n label: 'San Francisco \u2013 Oakland Bay Bridge, United States',\n imgPath:\n 'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',\n },\n {\n label: 'Bird',\n imgPath:\n 'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',\n },\n {\n label: 'Bali, Indonesia',\n imgPath:\n 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80',\n },\n {\n label: 'NeONBRAND Digital Marketing, Las Vegas, United States',\n imgPath:\n 'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60',\n },\n {\n label: 'Go\u010d, Serbia',\n imgPath:\n 'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60',\n },\n];\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n maxWidth: 400,\n flexGrow: 1,\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n height: 50,\n paddingLeft: theme.spacing(4),\n backgroundColor: theme.palette.background.default,\n },\n img: {\n height: 255,\n display: 'block',\n maxWidth: 400,\n overflow: 'hidden',\n width: '100%',\n },\n}));\n\nfunction SwipeableTextMobileStepper() {\n const classes = useStyles();\n const theme = useTheme();\n const [activeStep, setActiveStep] = React.useState(0);\n const maxSteps = tutorialSteps.length;\n\n const handleNext = () => {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleStepChange = (step) => {\n setActiveStep(step);\n };\n\n return (\n <div className={classes.root}>\n <Paper square elevation={0} className={classes.header}>\n <Typography>{tutorialSteps[activeStep].label}</Typography>\n </Paper>\n <AutoPlaySwipeableViews\n axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}\n index={activeStep}\n onChangeIndex={handleStepChange}\n enableMouseEvents\n >\n {tutorialSteps.map((step, index) => (\n <div key={step.label}>\n {Math.abs(activeStep - index) <= 2 ? (\n <img className={classes.img} src={step.imgPath} alt={step.label} />\n ) : null}\n </div>\n ))}\n </AutoPlaySwipeableViews>\n <MobileStepper\n steps={maxSteps}\n position=\"static\"\n variant=\"text\"\n activeStep={activeStep}\n nextButton={\n <Button size=\"small\" onClick={handleNext} disabled={activeStep === maxSteps - 1}>\n Next\n {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}\n </Button>\n }\n backButton={\n <Button size=\"small\" onClick={handleBack} disabled={activeStep === 0}>\n {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}\n Back\n </Button>\n }\n />\n </div>\n );\n}\n\nexport default SwipeableTextMobileStepper;\n"},2270:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return b}));var a=n(0),s=n.n(a),i=n(1072),o=n(43),c=n(2606),r=n(1098),l=n(1198),p=n.n(l),d=n(1197),m=n.n(d),h=n(1);const u=Object(i.a)({root:{maxWidth:400,flexGrow:1}});function b(){const e=u(),t=Object(o.a)(),[n,a]=s.a.useState(0);return Object(h.jsx)(c.a,{variant:"dots",steps:6,position:"static",activeStep:n,className:e.root,nextButton:Object(h.jsxs)(r.a,{size:"small",onClick:()=>{a((e=>e+1))},disabled:5===n,children:["Next","rtl"===t.direction?Object(h.jsx)(p.a,{}):Object(h.jsx)(m.a,{})]}),backButton:Object(h.jsxs)(r.a,{size:"small",onClick:()=>{a((e=>e-1))},disabled:0===n,children:["rtl"===t.direction?Object(h.jsx)(m.a,{}):Object(h.jsx)(p.a,{}),"Back"]})})}},2271:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport MobileStepper from '@material-ui/core/MobileStepper';\nimport Button from '@material-ui/core/Button';\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\n\nconst useStyles = makeStyles({\n root: {\n maxWidth: 400,\n flexGrow: 1,\n },\n});\n\nexport default function DotsMobileStepper() {\n const classes = useStyles();\n const theme = useTheme();\n const [activeStep, setActiveStep] = React.useState(0);\n\n const handleNext = () => {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n return (\n <MobileStepper\n variant=\"dots\"\n steps={6}\n position=\"static\"\n activeStep={activeStep}\n className={classes.root}\n nextButton={\n <Button size=\"small\" onClick={handleNext} disabled={activeStep === 5}>\n Next\n {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}\n </Button>\n }\n backButton={\n <Button size=\"small\" onClick={handleBack} disabled={activeStep === 0}>\n {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}\n Back\n </Button>\n }\n />\n );\n}\n"},2272:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return b}));var a=n(0),s=n.n(a),i=n(1072),o=n(43),c=n(2606),r=n(1098),l=n(1198),p=n.n(l),d=n(1197),m=n.n(d),h=n(1);const u=Object(i.a)({root:{maxWidth:400,flexGrow:1}});function b(){const e=u(),t=Object(o.a)(),[n,a]=s.a.useState(0);return Object(h.jsx)(c.a,{variant:"progress",steps:6,position:"static",activeStep:n,className:e.root,nextButton:Object(h.jsxs)(r.a,{size:"small",onClick:()=>{a((e=>e+1))},disabled:5===n,children:["Next","rtl"===t.direction?Object(h.jsx)(p.a,{}):Object(h.jsx)(m.a,{})]}),backButton:Object(h.jsxs)(r.a,{size:"small",onClick:()=>{a((e=>e-1))},disabled:0===n,children:["rtl"===t.direction?Object(h.jsx)(m.a,{}):Object(h.jsx)(p.a,{}),"Back"]})})}},2273:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport MobileStepper from '@material-ui/core/MobileStepper';\nimport Button from '@material-ui/core/Button';\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\n\nconst useStyles = makeStyles({\n root: {\n maxWidth: 400,\n flexGrow: 1,\n },\n});\n\nexport default function ProgressMobileStepper() {\n const classes = useStyles();\n const theme = useTheme();\n const [activeStep, setActiveStep] = React.useState(0);\n\n const handleNext = () => {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n return (\n <MobileStepper\n variant=\"progress\"\n steps={6}\n position=\"static\"\n activeStep={activeStep}\n className={classes.root}\n nextButton={\n <Button size=\"small\" onClick={handleNext} disabled={activeStep === 5}>\n Next\n {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}\n </Button>\n }\n backButton={\n <Button size=\"small\" onClick={handleBack} disabled={activeStep === 0}>\n {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}\n Back\n </Button>\n }\n />\n );\n}\n"},2603:function(e,t,n){"use strict";n.r(t);var a=n(1130),s=n(1098),i=n(1090),o=n(194),c=n(1072),r=n(1);const l=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return l(),Object(r.jsxs)(r.Fragment,{children:[Object(r.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(r.jsxs)(s.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/steppers",target:"_blank",role:"button",children:[Object(r.jsx)(i.a,{children:"link"}),Object(r.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(r.jsx)(o.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Stepper"}),Object(r.jsx)(o.a,{className:"description",children:"Steppers convey progress through numbered steps. It provides a wizard-like workflow."}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:[Object(r.jsx)("a",{href:"https://material.io/archive/guidelines/components/steppers.html",children:"Steppers"})," ","display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved."]}),Object(r.jsxs)("ul",{children:[Object(r.jsxs)("li",{children:[Object(r.jsx)("strong",{children:"Types of Steps"}),": Editable, Non-editable, Mobile, Optional"]}),Object(r.jsxs)("li",{children:[Object(r.jsx)("strong",{children:"Types of Steppers"}),": Horizontal, Vertical, Linear, Non-linear"]})]}),Object(r.jsx)("blockquote",{children:Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:[Object(r.jsx)("strong",{children:"Note:"})," Steppers are no longer documented in the"," ",Object(r.jsx)("a",{href:"https://material.io/",children:"Material Design guidelines"}),", but Material-UI will continue to support them."]})}),Object(r.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Horizontal Stepper"}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Linear"}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["The ",Object(r.jsx)("code",{children:"Stepper"})," can be controlled by passing the current step index (zero-based) as the ",Object(r.jsx)("code",{children:"activeStep"})," property. ",Object(r.jsx)("code",{children:"Stepper"})," orientation is set using the"," ",Object(r.jsx)("code",{children:"orientation"})," property."]}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["This example also shows the use of an optional step by placing the ",Object(r.jsx)("code",{children:"optional"})," ","property on the second ",Object(r.jsx)("code",{children:"Step"})," component. Note that it's up to you to manage when an optional step is skipped. Once you've determined this for a particular step you must set ",Object(r.jsx)("code",{children:"completed={false}"})," to signify that even though the active step index has gone beyond the optional step, it's not actually complete."]}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2234).default,raw:n(2235)})}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Linear - Alternative Label"}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["Labels can be placed below the step icon by setting the ",Object(r.jsx)("code",{children:"alternativeLabel"})," prop on the ",Object(r.jsx)("code",{children:"Stepper"})," component."]}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2236).default,raw:n(2237)})}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Customized Stepper"}),Object(r.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(r.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2238).default,raw:n(2241)})}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Non-linear"}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:"Non-linear steppers allow users to enter a multi-step flow at any point."}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["This example is similar to the regular horizontal stepper, except steps are no longer automatically set to ",Object(r.jsx)("code",{children:"disabled={true}"})," based on the ",Object(r.jsx)("code",{children:"activeStep"})," ","property."]}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["The use of the ",Object(r.jsx)("code",{children:"StepButton"})," here demonstrates clickable step labels, as well as setting the ",Object(r.jsx)("code",{children:"completed"}),"flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed)."]}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2242).default,raw:n(2243)})}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Non-linear - Alternative Label"}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["Labels can be placed below the step icon by setting the ",Object(r.jsx)("code",{children:"alternativeLabel"})," prop on the ",Object(r.jsx)("code",{children:"Stepper"})," component."]}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2244).default,raw:n(2245)})}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Non-linear - Error Step"}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2246).default,raw:n(2247)})}),Object(r.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Vertical Stepper"}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2248).default,raw:n(2249)})}),Object(r.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Mobile Stepper"}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["This component implements a compact stepper suitable for a mobile device. See"," ",Object(r.jsx)("a",{href:"https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps",children:"mobile steps"})," ","for its inspiration."]}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Text"}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:"This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference."}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2250).default,raw:n(2251)})}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Text with Carousel effect"}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["This demo is very similar to the previous, the difference is the usage of",Object(r.jsx)("a",{href:"https://github.com/oliviertassinari/react-swipeable-views",children:"react-swipeable-views"})," ","to make the transition of steps."]}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2252).default,raw:n(2269)})}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Dots"}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:"Use dots when the number of steps isn\u2019t large."}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2270).default,raw:n(2271)})}),Object(r.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Progress"}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:"Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps)."}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2272).default,raw:n(2273)})})]})}}}]);
Zerion Mini Shell 1.0