%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[19],{1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return w}));var a=n(118),i=n(1100),r=n(1109),l=n(1090),o=n(1117),s=n(1119),c=n(5),y=n(0),d=n(1024),h=n(551),p=n(1087),u=n(1099),m=n(11),b=n(370),f=n(371),g=n(1131),T=n.n(g),S=n(1);const x=Object(d.a)({productionPrefix:"iframe-"});class O extends y.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(b.a)({...Object(h.a)(),plugins:[...Object(h.a)().plugins,Object(f.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(S.jsxs)(S.Fragment,{children:[Object(S.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(S.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(S.jsx)(T.a,{head:this.renderHead(),ref:this.handleRef,className:Object(c.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(S.jsx)(p.b,{jss:this.state.jss,generateClassName:x,sheetsManager:this.state.sheetsManager,children:Object(S.jsx)(u.a,{theme:n,children:Object(y.cloneElement)(e,{container:this.state.container})})}):null})}}var j=Object(m.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(O);function v(e){const[t,n]=Object(y.useState)(e.currentTabIndex),{component:d,raw:h,iframe:p,className:u}=e;return Object(S.jsxs)(r.a,{className:Object(c.a)(u,"shadow"),children:[Object(S.jsx)(i.a,{position:"static",color:"default",className:"shadow-0",children:Object(S.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[d&&Object(S.jsx)(o.a,{classes:{root:"min-w-64"},icon:Object(S.jsx)(l.a,{children:"remove_red_eye"})}),h&&Object(S.jsx)(o.a,{classes:{root:"min-w-64"},icon:Object(S.jsx)(l.a,{children:"code"})})]})}),Object(S.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(S.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(p?Object(S.jsx)(j,{children:Object(S.jsx)(d,{})}):Object(S.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(S.jsx)(d,{})}))}),Object(S.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:h&&Object(S.jsx)("div",{className:"flex flex-1",children:Object(S.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:h.default})})})]})]})}v.defaultProps={currentTabIndex:0};var w=v},1711:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));n(0);var a=n(1096),i=n(2716),r=n(1);function l(){return Object(r.jsx)(i.a,{id:"combo-box-demo",options:o,getOptionLabel:e=>e.title,style:{width:300},renderInput:e=>Object(r.jsx)(a.a,{...e,label:"Combo box",variant:"outlined"})})}const o=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1712:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\nexport default function ComboBox() {\n return (\n <Autocomplete\n id=\"combo-box-demo\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n style={{ width: 300 }}\n renderInput={(params) => <TextField {...params} label=\"Combo box\" variant=\"outlined\" />}\n />\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1713:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));var a=n(0),i=n.n(a),r=n(1096),l=n(2716),o=n(1);function s(){const e={options:c,getOptionLabel:e=>e.title},t={options:c.map((e=>e.title))},[n,a]=i.a.useState(null);return Object(o.jsxs)("div",{style:{width:300},children:[Object(o.jsx)(l.a,{...e,id:"debug",debug:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"debug",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"disable-close-on-select",disableCloseOnSelect:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"disableCloseOnSelect",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"clear-on-escape",clearOnEscape:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"clearOnEscape",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"disable-clearable",disableClearable:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"disableClearable",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"include-input-in-list",includeInputInList:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"includeInputInList",margin:"normal"})}),Object(o.jsx)(l.a,{...t,id:"flat-demo",renderInput:e=>Object(o.jsx)(r.a,{...e,label:"flat",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"controlled-demo",value:n,onChange:(e,t)=>{a(t)},renderInput:e=>Object(o.jsx)(r.a,{...e,label:"controlled",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"auto-complete",autoComplete:!0,includeInputInList:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"autoComplete",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"disable-list-wrap",disableListWrap:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"disableListWrap",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"open-on-focus",openOnFocus:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"openOnFocus",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"auto-highlight",autoHighlight:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"autoHighlight",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"auto-select",autoSelect:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"autoSelect",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"disabled",disabled:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"disabled",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"disable-portal",disablePortal:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"disablePortal",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"blur-on-select",blurOnSelect:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"blurOnSelect",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"clear-on-blur",clearOnBlur:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"clearOnBlur",margin:"normal"})}),Object(o.jsx)(l.a,{...e,id:"select-on-focus",selectOnFocus:!0,renderInput:e=>Object(o.jsx)(r.a,{...e,label:"selectOnFocus",margin:"normal"})})]})}const c=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1714:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\nexport default function Playground() {\n const defaultProps = {\n options: top100Films,\n getOptionLabel: (option) => option.title,\n };\n\n const flatProps = {\n options: top100Films.map((option) => option.title),\n };\n\n const [value, setValue] = React.useState(null);\n\n return (\n <div style={{ width: 300 }}>\n <Autocomplete\n {...defaultProps}\n id=\"debug\"\n debug\n renderInput={(params) => <TextField {...params} label=\"debug\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"disable-close-on-select\"\n disableCloseOnSelect\n renderInput={(params) => (\n <TextField {...params} label=\"disableCloseOnSelect\" margin=\"normal\" />\n )}\n />\n <Autocomplete\n {...defaultProps}\n id=\"clear-on-escape\"\n clearOnEscape\n renderInput={(params) => <TextField {...params} label=\"clearOnEscape\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"disable-clearable\"\n disableClearable\n renderInput={(params) => <TextField {...params} label=\"disableClearable\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"include-input-in-list\"\n includeInputInList\n renderInput={(params) => (\n <TextField {...params} label=\"includeInputInList\" margin=\"normal\" />\n )}\n />\n <Autocomplete\n {...flatProps}\n id=\"flat-demo\"\n renderInput={(params) => <TextField {...params} label=\"flat\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"controlled-demo\"\n value={value}\n onChange={(event, newValue) => {\n setValue(newValue);\n }}\n renderInput={(params) => <TextField {...params} label=\"controlled\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"auto-complete\"\n autoComplete\n includeInputInList\n renderInput={(params) => <TextField {...params} label=\"autoComplete\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"disable-list-wrap\"\n disableListWrap\n renderInput={(params) => <TextField {...params} label=\"disableListWrap\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"open-on-focus\"\n openOnFocus\n renderInput={(params) => <TextField {...params} label=\"openOnFocus\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"auto-highlight\"\n autoHighlight\n renderInput={(params) => <TextField {...params} label=\"autoHighlight\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"auto-select\"\n autoSelect\n renderInput={(params) => <TextField {...params} label=\"autoSelect\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"disabled\"\n disabled\n renderInput={(params) => <TextField {...params} label=\"disabled\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"disable-portal\"\n disablePortal\n renderInput={(params) => <TextField {...params} label=\"disablePortal\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"blur-on-select\"\n blurOnSelect\n renderInput={(params) => <TextField {...params} label=\"blurOnSelect\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"clear-on-blur\"\n clearOnBlur\n renderInput={(params) => <TextField {...params} label=\"clearOnBlur\" margin=\"normal\" />}\n />\n <Autocomplete\n {...defaultProps}\n id=\"select-on-focus\"\n selectOnFocus\n renderInput={(params) => <TextField {...params} label=\"selectOnFocus\" margin=\"normal\" />}\n />\n </div>\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1715:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return y}));var a=n(0),i=n.n(a),r=n(1096),l=n(2716),o=n(1072),s=n(1);const c=Object(o.a)({option:{fontSize:15,"& > span":{marginRight:10,fontSize:18}}});function y(){const e=c();return Object(s.jsx)(l.a,{id:"country-select-demo",style:{width:300},options:d,classes:{option:e.option},autoHighlight:!0,getOptionLabel:e=>e.label,renderOption:e=>{return Object(s.jsxs)(i.a.Fragment,{children:[Object(s.jsx)("span",{children:(t=e.code,"undefined"!==typeof String.fromCodePoint?t.toUpperCase().replace(/./g,(e=>String.fromCodePoint(e.charCodeAt(0)+127397))):t)}),e.label," (",e.code,") +",e.phone]});var t},renderInput:e=>Object(s.jsx)(r.a,{...e,label:"Choose a country",variant:"outlined",inputProps:{...e.inputProps,autoComplete:"new-password"}})})}const d=[{code:"AD",label:"Andorra",phone:"376"},{code:"AE",label:"United Arab Emirates",phone:"971"},{code:"AF",label:"Afghanistan",phone:"93"},{code:"AG",label:"Antigua and Barbuda",phone:"1-268"},{code:"AI",label:"Anguilla",phone:"1-264"},{code:"AL",label:"Albania",phone:"355"},{code:"AM",label:"Armenia",phone:"374"},{code:"AO",label:"Angola",phone:"244"},{code:"AQ",label:"Antarctica",phone:"672"},{code:"AR",label:"Argentina",phone:"54"},{code:"AS",label:"American Samoa",phone:"1-684"},{code:"AT",label:"Austria",phone:"43"},{code:"AU",label:"Australia",phone:"61",suggested:!0},{code:"AW",label:"Aruba",phone:"297"},{code:"AX",label:"Alland Islands",phone:"358"},{code:"AZ",label:"Azerbaijan",phone:"994"},{code:"BA",label:"Bosnia and Herzegovina",phone:"387"},{code:"BB",label:"Barbados",phone:"1-246"},{code:"BD",label:"Bangladesh",phone:"880"},{code:"BE",label:"Belgium",phone:"32"},{code:"BF",label:"Burkina Faso",phone:"226"},{code:"BG",label:"Bulgaria",phone:"359"},{code:"BH",label:"Bahrain",phone:"973"},{code:"BI",label:"Burundi",phone:"257"},{code:"BJ",label:"Benin",phone:"229"},{code:"BL",label:"Saint Barthelemy",phone:"590"},{code:"BM",label:"Bermuda",phone:"1-441"},{code:"BN",label:"Brunei Darussalam",phone:"673"},{code:"BO",label:"Bolivia",phone:"591"},{code:"BR",label:"Brazil",phone:"55"},{code:"BS",label:"Bahamas",phone:"1-242"},{code:"BT",label:"Bhutan",phone:"975"},{code:"BV",label:"Bouvet Island",phone:"47"},{code:"BW",label:"Botswana",phone:"267"},{code:"BY",label:"Belarus",phone:"375"},{code:"BZ",label:"Belize",phone:"501"},{code:"CA",label:"Canada",phone:"1",suggested:!0},{code:"CC",label:"Cocos (Keeling) Islands",phone:"61"},{code:"CD",label:"Congo, Democratic Republic of the",phone:"243"},{code:"CF",label:"Central African Republic",phone:"236"},{code:"CG",label:"Congo, Republic of the",phone:"242"},{code:"CH",label:"Switzerland",phone:"41"},{code:"CI",label:"Cote d'Ivoire",phone:"225"},{code:"CK",label:"Cook Islands",phone:"682"},{code:"CL",label:"Chile",phone:"56"},{code:"CM",label:"Cameroon",phone:"237"},{code:"CN",label:"China",phone:"86"},{code:"CO",label:"Colombia",phone:"57"},{code:"CR",label:"Costa Rica",phone:"506"},{code:"CU",label:"Cuba",phone:"53"},{code:"CV",label:"Cape Verde",phone:"238"},{code:"CW",label:"Curacao",phone:"599"},{code:"CX",label:"Christmas Island",phone:"61"},{code:"CY",label:"Cyprus",phone:"357"},{code:"CZ",label:"Czech Republic",phone:"420"},{code:"DE",label:"Germany",phone:"49",suggested:!0},{code:"DJ",label:"Djibouti",phone:"253"},{code:"DK",label:"Denmark",phone:"45"},{code:"DM",label:"Dominica",phone:"1-767"},{code:"DO",label:"Dominican Republic",phone:"1-809"},{code:"DZ",label:"Algeria",phone:"213"},{code:"EC",label:"Ecuador",phone:"593"},{code:"EE",label:"Estonia",phone:"372"},{code:"EG",label:"Egypt",phone:"20"},{code:"EH",label:"Western Sahara",phone:"212"},{code:"ER",label:"Eritrea",phone:"291"},{code:"ES",label:"Spain",phone:"34"},{code:"ET",label:"Ethiopia",phone:"251"},{code:"FI",label:"Finland",phone:"358"},{code:"FJ",label:"Fiji",phone:"679"},{code:"FK",label:"Falkland Islands (Malvinas)",phone:"500"},{code:"FM",label:"Micronesia, Federated States of",phone:"691"},{code:"FO",label:"Faroe Islands",phone:"298"},{code:"FR",label:"France",phone:"33",suggested:!0},{code:"GA",label:"Gabon",phone:"241"},{code:"GB",label:"United Kingdom",phone:"44"},{code:"GD",label:"Grenada",phone:"1-473"},{code:"GE",label:"Georgia",phone:"995"},{code:"GF",label:"French Guiana",phone:"594"},{code:"GG",label:"Guernsey",phone:"44"},{code:"GH",label:"Ghana",phone:"233"},{code:"GI",label:"Gibraltar",phone:"350"},{code:"GL",label:"Greenland",phone:"299"},{code:"GM",label:"Gambia",phone:"220"},{code:"GN",label:"Guinea",phone:"224"},{code:"GP",label:"Guadeloupe",phone:"590"},{code:"GQ",label:"Equatorial Guinea",phone:"240"},{code:"GR",label:"Greece",phone:"30"},{code:"GS",label:"South Georgia and the South Sandwich Islands",phone:"500"},{code:"GT",label:"Guatemala",phone:"502"},{code:"GU",label:"Guam",phone:"1-671"},{code:"GW",label:"Guinea-Bissau",phone:"245"},{code:"GY",label:"Guyana",phone:"592"},{code:"HK",label:"Hong Kong",phone:"852"},{code:"HM",label:"Heard Island and McDonald Islands",phone:"672"},{code:"HN",label:"Honduras",phone:"504"},{code:"HR",label:"Croatia",phone:"385"},{code:"HT",label:"Haiti",phone:"509"},{code:"HU",label:"Hungary",phone:"36"},{code:"ID",label:"Indonesia",phone:"62"},{code:"IE",label:"Ireland",phone:"353"},{code:"IL",label:"Israel",phone:"972"},{code:"IM",label:"Isle of Man",phone:"44"},{code:"IN",label:"India",phone:"91"},{code:"IO",label:"British Indian Ocean Territory",phone:"246"},{code:"IQ",label:"Iraq",phone:"964"},{code:"IR",label:"Iran, Islamic Republic of",phone:"98"},{code:"IS",label:"Iceland",phone:"354"},{code:"IT",label:"Italy",phone:"39"},{code:"JE",label:"Jersey",phone:"44"},{code:"JM",label:"Jamaica",phone:"1-876"},{code:"JO",label:"Jordan",phone:"962"},{code:"JP",label:"Japan",phone:"81",suggested:!0},{code:"KE",label:"Kenya",phone:"254"},{code:"KG",label:"Kyrgyzstan",phone:"996"},{code:"KH",label:"Cambodia",phone:"855"},{code:"KI",label:"Kiribati",phone:"686"},{code:"KM",label:"Comoros",phone:"269"},{code:"KN",label:"Saint Kitts and Nevis",phone:"1-869"},{code:"KP",label:"Korea, Democratic People's Republic of",phone:"850"},{code:"KR",label:"Korea, Republic of",phone:"82"},{code:"KW",label:"Kuwait",phone:"965"},{code:"KY",label:"Cayman Islands",phone:"1-345"},{code:"KZ",label:"Kazakhstan",phone:"7"},{code:"LA",label:"Lao People's Democratic Republic",phone:"856"},{code:"LB",label:"Lebanon",phone:"961"},{code:"LC",label:"Saint Lucia",phone:"1-758"},{code:"LI",label:"Liechtenstein",phone:"423"},{code:"LK",label:"Sri Lanka",phone:"94"},{code:"LR",label:"Liberia",phone:"231"},{code:"LS",label:"Lesotho",phone:"266"},{code:"LT",label:"Lithuania",phone:"370"},{code:"LU",label:"Luxembourg",phone:"352"},{code:"LV",label:"Latvia",phone:"371"},{code:"LY",label:"Libya",phone:"218"},{code:"MA",label:"Morocco",phone:"212"},{code:"MC",label:"Monaco",phone:"377"},{code:"MD",label:"Moldova, Republic of",phone:"373"},{code:"ME",label:"Montenegro",phone:"382"},{code:"MF",label:"Saint Martin (French part)",phone:"590"},{code:"MG",label:"Madagascar",phone:"261"},{code:"MH",label:"Marshall Islands",phone:"692"},{code:"MK",label:"Macedonia, the Former Yugoslav Republic of",phone:"389"},{code:"ML",label:"Mali",phone:"223"},{code:"MM",label:"Myanmar",phone:"95"},{code:"MN",label:"Mongolia",phone:"976"},{code:"MO",label:"Macao",phone:"853"},{code:"MP",label:"Northern Mariana Islands",phone:"1-670"},{code:"MQ",label:"Martinique",phone:"596"},{code:"MR",label:"Mauritania",phone:"222"},{code:"MS",label:"Montserrat",phone:"1-664"},{code:"MT",label:"Malta",phone:"356"},{code:"MU",label:"Mauritius",phone:"230"},{code:"MV",label:"Maldives",phone:"960"},{code:"MW",label:"Malawi",phone:"265"},{code:"MX",label:"Mexico",phone:"52"},{code:"MY",label:"Malaysia",phone:"60"},{code:"MZ",label:"Mozambique",phone:"258"},{code:"NA",label:"Namibia",phone:"264"},{code:"NC",label:"New Caledonia",phone:"687"},{code:"NE",label:"Niger",phone:"227"},{code:"NF",label:"Norfolk Island",phone:"672"},{code:"NG",label:"Nigeria",phone:"234"},{code:"NI",label:"Nicaragua",phone:"505"},{code:"NL",label:"Netherlands",phone:"31"},{code:"NO",label:"Norway",phone:"47"},{code:"NP",label:"Nepal",phone:"977"},{code:"NR",label:"Nauru",phone:"674"},{code:"NU",label:"Niue",phone:"683"},{code:"NZ",label:"New Zealand",phone:"64"},{code:"OM",label:"Oman",phone:"968"},{code:"PA",label:"Panama",phone:"507"},{code:"PE",label:"Peru",phone:"51"},{code:"PF",label:"French Polynesia",phone:"689"},{code:"PG",label:"Papua New Guinea",phone:"675"},{code:"PH",label:"Philippines",phone:"63"},{code:"PK",label:"Pakistan",phone:"92"},{code:"PL",label:"Poland",phone:"48"},{code:"PM",label:"Saint Pierre and Miquelon",phone:"508"},{code:"PN",label:"Pitcairn",phone:"870"},{code:"PR",label:"Puerto Rico",phone:"1"},{code:"PS",label:"Palestine, State of",phone:"970"},{code:"PT",label:"Portugal",phone:"351"},{code:"PW",label:"Palau",phone:"680"},{code:"PY",label:"Paraguay",phone:"595"},{code:"QA",label:"Qatar",phone:"974"},{code:"RE",label:"Reunion",phone:"262"},{code:"RO",label:"Romania",phone:"40"},{code:"RS",label:"Serbia",phone:"381"},{code:"RU",label:"Russian Federation",phone:"7"},{code:"RW",label:"Rwanda",phone:"250"},{code:"SA",label:"Saudi Arabia",phone:"966"},{code:"SB",label:"Solomon Islands",phone:"677"},{code:"SC",label:"Seychelles",phone:"248"},{code:"SD",label:"Sudan",phone:"249"},{code:"SE",label:"Sweden",phone:"46"},{code:"SG",label:"Singapore",phone:"65"},{code:"SH",label:"Saint Helena",phone:"290"},{code:"SI",label:"Slovenia",phone:"386"},{code:"SJ",label:"Svalbard and Jan Mayen",phone:"47"},{code:"SK",label:"Slovakia",phone:"421"},{code:"SL",label:"Sierra Leone",phone:"232"},{code:"SM",label:"San Marino",phone:"378"},{code:"SN",label:"Senegal",phone:"221"},{code:"SO",label:"Somalia",phone:"252"},{code:"SR",label:"Suriname",phone:"597"},{code:"SS",label:"South Sudan",phone:"211"},{code:"ST",label:"Sao Tome and Principe",phone:"239"},{code:"SV",label:"El Salvador",phone:"503"},{code:"SX",label:"Sint Maarten (Dutch part)",phone:"1-721"},{code:"SY",label:"Syrian Arab Republic",phone:"963"},{code:"SZ",label:"Swaziland",phone:"268"},{code:"TC",label:"Turks and Caicos Islands",phone:"1-649"},{code:"TD",label:"Chad",phone:"235"},{code:"TF",label:"French Southern Territories",phone:"262"},{code:"TG",label:"Togo",phone:"228"},{code:"TH",label:"Thailand",phone:"66"},{code:"TJ",label:"Tajikistan",phone:"992"},{code:"TK",label:"Tokelau",phone:"690"},{code:"TL",label:"Timor-Leste",phone:"670"},{code:"TM",label:"Turkmenistan",phone:"993"},{code:"TN",label:"Tunisia",phone:"216"},{code:"TO",label:"Tonga",phone:"676"},{code:"TR",label:"Turkey",phone:"90"},{code:"TT",label:"Trinidad and Tobago",phone:"1-868"},{code:"TV",label:"Tuvalu",phone:"688"},{code:"TW",label:"Taiwan, Province of China",phone:"886"},{code:"TZ",label:"United Republic of Tanzania",phone:"255"},{code:"UA",label:"Ukraine",phone:"380"},{code:"UG",label:"Uganda",phone:"256"},{code:"US",label:"United States",phone:"1",suggested:!0},{code:"UY",label:"Uruguay",phone:"598"},{code:"UZ",label:"Uzbekistan",phone:"998"},{code:"VA",label:"Holy See (Vatican City State)",phone:"379"},{code:"VC",label:"Saint Vincent and the Grenadines",phone:"1-784"},{code:"VE",label:"Venezuela",phone:"58"},{code:"VG",label:"British Virgin Islands",phone:"1-284"},{code:"VI",label:"US Virgin Islands",phone:"1-340"},{code:"VN",label:"Vietnam",phone:"84"},{code:"VU",label:"Vanuatu",phone:"678"},{code:"WF",label:"Wallis and Futuna",phone:"681"},{code:"WS",label:"Samoa",phone:"685"},{code:"XK",label:"Kosovo",phone:"383"},{code:"YE",label:"Yemen",phone:"967"},{code:"YT",label:"Mayotte",phone:"262"},{code:"ZA",label:"South Africa",phone:"27"},{code:"ZM",label:"Zambia",phone:"260"},{code:"ZW",label:"Zimbabwe",phone:"263"}]},1716:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { makeStyles } from '@material-ui/core/styles';\n\n// ISO 3166-1 alpha-2\n// \u26a0\ufe0f No support for IE 11\nfunction countryToFlag(isoCode) {\n return typeof String.fromCodePoint !== 'undefined'\n ? isoCode\n .toUpperCase()\n .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397))\n : isoCode;\n}\n\nconst useStyles = makeStyles({\n option: {\n fontSize: 15,\n '& > span': {\n marginRight: 10,\n fontSize: 18,\n },\n },\n});\n\nexport default function CountrySelect() {\n const classes = useStyles();\n\n return (\n <Autocomplete\n id=\"country-select-demo\"\n style={{ width: 300 }}\n options={countries}\n classes={{\n option: classes.option,\n }}\n autoHighlight\n getOptionLabel={(option) => option.label}\n renderOption={(option) => (\n <React.Fragment>\n <span>{countryToFlag(option.code)}</span>\n {option.label} ({option.code}) +{option.phone}\n </React.Fragment>\n )}\n renderInput={(params) => (\n <TextField\n {...params}\n label=\"Choose a country\"\n variant=\"outlined\"\n inputProps={{\n ...params.inputProps,\n autoComplete: 'new-password', // disable autocomplete and autofill\n }}\n />\n )}\n />\n );\n}\n\n// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js\nconst countries = [\n { code: 'AD', label: 'Andorra', phone: '376' },\n { code: 'AE', label: 'United Arab Emirates', phone: '971' },\n { code: 'AF', label: 'Afghanistan', phone: '93' },\n { code: 'AG', label: 'Antigua and Barbuda', phone: '1-268' },\n { code: 'AI', label: 'Anguilla', phone: '1-264' },\n { code: 'AL', label: 'Albania', phone: '355' },\n { code: 'AM', label: 'Armenia', phone: '374' },\n { code: 'AO', label: 'Angola', phone: '244' },\n { code: 'AQ', label: 'Antarctica', phone: '672' },\n { code: 'AR', label: 'Argentina', phone: '54' },\n { code: 'AS', label: 'American Samoa', phone: '1-684' },\n { code: 'AT', label: 'Austria', phone: '43' },\n { code: 'AU', label: 'Australia', phone: '61', suggested: true },\n { code: 'AW', label: 'Aruba', phone: '297' },\n { code: 'AX', label: 'Alland Islands', phone: '358' },\n { code: 'AZ', label: 'Azerbaijan', phone: '994' },\n { code: 'BA', label: 'Bosnia and Herzegovina', phone: '387' },\n { code: 'BB', label: 'Barbados', phone: '1-246' },\n { code: 'BD', label: 'Bangladesh', phone: '880' },\n { code: 'BE', label: 'Belgium', phone: '32' },\n { code: 'BF', label: 'Burkina Faso', phone: '226' },\n { code: 'BG', label: 'Bulgaria', phone: '359' },\n { code: 'BH', label: 'Bahrain', phone: '973' },\n { code: 'BI', label: 'Burundi', phone: '257' },\n { code: 'BJ', label: 'Benin', phone: '229' },\n { code: 'BL', label: 'Saint Barthelemy', phone: '590' },\n { code: 'BM', label: 'Bermuda', phone: '1-441' },\n { code: 'BN', label: 'Brunei Darussalam', phone: '673' },\n { code: 'BO', label: 'Bolivia', phone: '591' },\n { code: 'BR', label: 'Brazil', phone: '55' },\n { code: 'BS', label: 'Bahamas', phone: '1-242' },\n { code: 'BT', label: 'Bhutan', phone: '975' },\n { code: 'BV', label: 'Bouvet Island', phone: '47' },\n { code: 'BW', label: 'Botswana', phone: '267' },\n { code: 'BY', label: 'Belarus', phone: '375' },\n { code: 'BZ', label: 'Belize', phone: '501' },\n { code: 'CA', label: 'Canada', phone: '1', suggested: true },\n { code: 'CC', label: 'Cocos (Keeling) Islands', phone: '61' },\n { code: 'CD', label: 'Congo, Democratic Republic of the', phone: '243' },\n { code: 'CF', label: 'Central African Republic', phone: '236' },\n { code: 'CG', label: 'Congo, Republic of the', phone: '242' },\n { code: 'CH', label: 'Switzerland', phone: '41' },\n { code: 'CI', label: \"Cote d'Ivoire\", phone: '225' },\n { code: 'CK', label: 'Cook Islands', phone: '682' },\n { code: 'CL', label: 'Chile', phone: '56' },\n { code: 'CM', label: 'Cameroon', phone: '237' },\n { code: 'CN', label: 'China', phone: '86' },\n { code: 'CO', label: 'Colombia', phone: '57' },\n { code: 'CR', label: 'Costa Rica', phone: '506' },\n { code: 'CU', label: 'Cuba', phone: '53' },\n { code: 'CV', label: 'Cape Verde', phone: '238' },\n { code: 'CW', label: 'Curacao', phone: '599' },\n { code: 'CX', label: 'Christmas Island', phone: '61' },\n { code: 'CY', label: 'Cyprus', phone: '357' },\n { code: 'CZ', label: 'Czech Republic', phone: '420' },\n { code: 'DE', label: 'Germany', phone: '49', suggested: true },\n { code: 'DJ', label: 'Djibouti', phone: '253' },\n { code: 'DK', label: 'Denmark', phone: '45' },\n { code: 'DM', label: 'Dominica', phone: '1-767' },\n { code: 'DO', label: 'Dominican Republic', phone: '1-809' },\n { code: 'DZ', label: 'Algeria', phone: '213' },\n { code: 'EC', label: 'Ecuador', phone: '593' },\n { code: 'EE', label: 'Estonia', phone: '372' },\n { code: 'EG', label: 'Egypt', phone: '20' },\n { code: 'EH', label: 'Western Sahara', phone: '212' },\n { code: 'ER', label: 'Eritrea', phone: '291' },\n { code: 'ES', label: 'Spain', phone: '34' },\n { code: 'ET', label: 'Ethiopia', phone: '251' },\n { code: 'FI', label: 'Finland', phone: '358' },\n { code: 'FJ', label: 'Fiji', phone: '679' },\n { code: 'FK', label: 'Falkland Islands (Malvinas)', phone: '500' },\n { code: 'FM', label: 'Micronesia, Federated States of', phone: '691' },\n { code: 'FO', label: 'Faroe Islands', phone: '298' },\n { code: 'FR', label: 'France', phone: '33', suggested: true },\n { code: 'GA', label: 'Gabon', phone: '241' },\n { code: 'GB', label: 'United Kingdom', phone: '44' },\n { code: 'GD', label: 'Grenada', phone: '1-473' },\n { code: 'GE', label: 'Georgia', phone: '995' },\n { code: 'GF', label: 'French Guiana', phone: '594' },\n { code: 'GG', label: 'Guernsey', phone: '44' },\n { code: 'GH', label: 'Ghana', phone: '233' },\n { code: 'GI', label: 'Gibraltar', phone: '350' },\n { code: 'GL', label: 'Greenland', phone: '299' },\n { code: 'GM', label: 'Gambia', phone: '220' },\n { code: 'GN', label: 'Guinea', phone: '224' },\n { code: 'GP', label: 'Guadeloupe', phone: '590' },\n { code: 'GQ', label: 'Equatorial Guinea', phone: '240' },\n { code: 'GR', label: 'Greece', phone: '30' },\n { code: 'GS', label: 'South Georgia and the South Sandwich Islands', phone: '500' },\n { code: 'GT', label: 'Guatemala', phone: '502' },\n { code: 'GU', label: 'Guam', phone: '1-671' },\n { code: 'GW', label: 'Guinea-Bissau', phone: '245' },\n { code: 'GY', label: 'Guyana', phone: '592' },\n { code: 'HK', label: 'Hong Kong', phone: '852' },\n { code: 'HM', label: 'Heard Island and McDonald Islands', phone: '672' },\n { code: 'HN', label: 'Honduras', phone: '504' },\n { code: 'HR', label: 'Croatia', phone: '385' },\n { code: 'HT', label: 'Haiti', phone: '509' },\n { code: 'HU', label: 'Hungary', phone: '36' },\n { code: 'ID', label: 'Indonesia', phone: '62' },\n { code: 'IE', label: 'Ireland', phone: '353' },\n { code: 'IL', label: 'Israel', phone: '972' },\n { code: 'IM', label: 'Isle of Man', phone: '44' },\n { code: 'IN', label: 'India', phone: '91' },\n { code: 'IO', label: 'British Indian Ocean Territory', phone: '246' },\n { code: 'IQ', label: 'Iraq', phone: '964' },\n { code: 'IR', label: 'Iran, Islamic Republic of', phone: '98' },\n { code: 'IS', label: 'Iceland', phone: '354' },\n { code: 'IT', label: 'Italy', phone: '39' },\n { code: 'JE', label: 'Jersey', phone: '44' },\n { code: 'JM', label: 'Jamaica', phone: '1-876' },\n { code: 'JO', label: 'Jordan', phone: '962' },\n { code: 'JP', label: 'Japan', phone: '81', suggested: true },\n { code: 'KE', label: 'Kenya', phone: '254' },\n { code: 'KG', label: 'Kyrgyzstan', phone: '996' },\n { code: 'KH', label: 'Cambodia', phone: '855' },\n { code: 'KI', label: 'Kiribati', phone: '686' },\n { code: 'KM', label: 'Comoros', phone: '269' },\n { code: 'KN', label: 'Saint Kitts and Nevis', phone: '1-869' },\n { code: 'KP', label: \"Korea, Democratic People's Republic of\", phone: '850' },\n { code: 'KR', label: 'Korea, Republic of', phone: '82' },\n { code: 'KW', label: 'Kuwait', phone: '965' },\n { code: 'KY', label: 'Cayman Islands', phone: '1-345' },\n { code: 'KZ', label: 'Kazakhstan', phone: '7' },\n { code: 'LA', label: \"Lao People's Democratic Republic\", phone: '856' },\n { code: 'LB', label: 'Lebanon', phone: '961' },\n { code: 'LC', label: 'Saint Lucia', phone: '1-758' },\n { code: 'LI', label: 'Liechtenstein', phone: '423' },\n { code: 'LK', label: 'Sri Lanka', phone: '94' },\n { code: 'LR', label: 'Liberia', phone: '231' },\n { code: 'LS', label: 'Lesotho', phone: '266' },\n { code: 'LT', label: 'Lithuania', phone: '370' },\n { code: 'LU', label: 'Luxembourg', phone: '352' },\n { code: 'LV', label: 'Latvia', phone: '371' },\n { code: 'LY', label: 'Libya', phone: '218' },\n { code: 'MA', label: 'Morocco', phone: '212' },\n { code: 'MC', label: 'Monaco', phone: '377' },\n { code: 'MD', label: 'Moldova, Republic of', phone: '373' },\n { code: 'ME', label: 'Montenegro', phone: '382' },\n { code: 'MF', label: 'Saint Martin (French part)', phone: '590' },\n { code: 'MG', label: 'Madagascar', phone: '261' },\n { code: 'MH', label: 'Marshall Islands', phone: '692' },\n { code: 'MK', label: 'Macedonia, the Former Yugoslav Republic of', phone: '389' },\n { code: 'ML', label: 'Mali', phone: '223' },\n { code: 'MM', label: 'Myanmar', phone: '95' },\n { code: 'MN', label: 'Mongolia', phone: '976' },\n { code: 'MO', label: 'Macao', phone: '853' },\n { code: 'MP', label: 'Northern Mariana Islands', phone: '1-670' },\n { code: 'MQ', label: 'Martinique', phone: '596' },\n { code: 'MR', label: 'Mauritania', phone: '222' },\n { code: 'MS', label: 'Montserrat', phone: '1-664' },\n { code: 'MT', label: 'Malta', phone: '356' },\n { code: 'MU', label: 'Mauritius', phone: '230' },\n { code: 'MV', label: 'Maldives', phone: '960' },\n { code: 'MW', label: 'Malawi', phone: '265' },\n { code: 'MX', label: 'Mexico', phone: '52' },\n { code: 'MY', label: 'Malaysia', phone: '60' },\n { code: 'MZ', label: 'Mozambique', phone: '258' },\n { code: 'NA', label: 'Namibia', phone: '264' },\n { code: 'NC', label: 'New Caledonia', phone: '687' },\n { code: 'NE', label: 'Niger', phone: '227' },\n { code: 'NF', label: 'Norfolk Island', phone: '672' },\n { code: 'NG', label: 'Nigeria', phone: '234' },\n { code: 'NI', label: 'Nicaragua', phone: '505' },\n { code: 'NL', label: 'Netherlands', phone: '31' },\n { code: 'NO', label: 'Norway', phone: '47' },\n { code: 'NP', label: 'Nepal', phone: '977' },\n { code: 'NR', label: 'Nauru', phone: '674' },\n { code: 'NU', label: 'Niue', phone: '683' },\n { code: 'NZ', label: 'New Zealand', phone: '64' },\n { code: 'OM', label: 'Oman', phone: '968' },\n { code: 'PA', label: 'Panama', phone: '507' },\n { code: 'PE', label: 'Peru', phone: '51' },\n { code: 'PF', label: 'French Polynesia', phone: '689' },\n { code: 'PG', label: 'Papua New Guinea', phone: '675' },\n { code: 'PH', label: 'Philippines', phone: '63' },\n { code: 'PK', label: 'Pakistan', phone: '92' },\n { code: 'PL', label: 'Poland', phone: '48' },\n { code: 'PM', label: 'Saint Pierre and Miquelon', phone: '508' },\n { code: 'PN', label: 'Pitcairn', phone: '870' },\n { code: 'PR', label: 'Puerto Rico', phone: '1' },\n { code: 'PS', label: 'Palestine, State of', phone: '970' },\n { code: 'PT', label: 'Portugal', phone: '351' },\n { code: 'PW', label: 'Palau', phone: '680' },\n { code: 'PY', label: 'Paraguay', phone: '595' },\n { code: 'QA', label: 'Qatar', phone: '974' },\n { code: 'RE', label: 'Reunion', phone: '262' },\n { code: 'RO', label: 'Romania', phone: '40' },\n { code: 'RS', label: 'Serbia', phone: '381' },\n { code: 'RU', label: 'Russian Federation', phone: '7' },\n { code: 'RW', label: 'Rwanda', phone: '250' },\n { code: 'SA', label: 'Saudi Arabia', phone: '966' },\n { code: 'SB', label: 'Solomon Islands', phone: '677' },\n { code: 'SC', label: 'Seychelles', phone: '248' },\n { code: 'SD', label: 'Sudan', phone: '249' },\n { code: 'SE', label: 'Sweden', phone: '46' },\n { code: 'SG', label: 'Singapore', phone: '65' },\n { code: 'SH', label: 'Saint Helena', phone: '290' },\n { code: 'SI', label: 'Slovenia', phone: '386' },\n { code: 'SJ', label: 'Svalbard and Jan Mayen', phone: '47' },\n { code: 'SK', label: 'Slovakia', phone: '421' },\n { code: 'SL', label: 'Sierra Leone', phone: '232' },\n { code: 'SM', label: 'San Marino', phone: '378' },\n { code: 'SN', label: 'Senegal', phone: '221' },\n { code: 'SO', label: 'Somalia', phone: '252' },\n { code: 'SR', label: 'Suriname', phone: '597' },\n { code: 'SS', label: 'South Sudan', phone: '211' },\n { code: 'ST', label: 'Sao Tome and Principe', phone: '239' },\n { code: 'SV', label: 'El Salvador', phone: '503' },\n { code: 'SX', label: 'Sint Maarten (Dutch part)', phone: '1-721' },\n { code: 'SY', label: 'Syrian Arab Republic', phone: '963' },\n { code: 'SZ', label: 'Swaziland', phone: '268' },\n { code: 'TC', label: 'Turks and Caicos Islands', phone: '1-649' },\n { code: 'TD', label: 'Chad', phone: '235' },\n { code: 'TF', label: 'French Southern Territories', phone: '262' },\n { code: 'TG', label: 'Togo', phone: '228' },\n { code: 'TH', label: 'Thailand', phone: '66' },\n { code: 'TJ', label: 'Tajikistan', phone: '992' },\n { code: 'TK', label: 'Tokelau', phone: '690' },\n { code: 'TL', label: 'Timor-Leste', phone: '670' },\n { code: 'TM', label: 'Turkmenistan', phone: '993' },\n { code: 'TN', label: 'Tunisia', phone: '216' },\n { code: 'TO', label: 'Tonga', phone: '676' },\n { code: 'TR', label: 'Turkey', phone: '90' },\n { code: 'TT', label: 'Trinidad and Tobago', phone: '1-868' },\n { code: 'TV', label: 'Tuvalu', phone: '688' },\n { code: 'TW', label: 'Taiwan, Province of China', phone: '886' },\n { code: 'TZ', label: 'United Republic of Tanzania', phone: '255' },\n { code: 'UA', label: 'Ukraine', phone: '380' },\n { code: 'UG', label: 'Uganda', phone: '256' },\n { code: 'US', label: 'United States', phone: '1', suggested: true },\n { code: 'UY', label: 'Uruguay', phone: '598' },\n { code: 'UZ', label: 'Uzbekistan', phone: '998' },\n { code: 'VA', label: 'Holy See (Vatican City State)', phone: '379' },\n { code: 'VC', label: 'Saint Vincent and the Grenadines', phone: '1-784' },\n { code: 'VE', label: 'Venezuela', phone: '58' },\n { code: 'VG', label: 'British Virgin Islands', phone: '1-284' },\n { code: 'VI', label: 'US Virgin Islands', phone: '1-340' },\n { code: 'VN', label: 'Vietnam', phone: '84' },\n { code: 'VU', label: 'Vanuatu', phone: '678' },\n { code: 'WF', label: 'Wallis and Futuna', phone: '681' },\n { code: 'WS', label: 'Samoa', phone: '685' },\n { code: 'XK', label: 'Kosovo', phone: '383' },\n { code: 'YE', label: 'Yemen', phone: '967' },\n { code: 'YT', label: 'Mayotte', phone: '262' },\n { code: 'ZA', label: 'South Africa', phone: '27' },\n { code: 'ZM', label: 'Zambia', phone: '260' },\n { code: 'ZW', label: 'Zimbabwe', phone: '263' },\n];\n"},1717:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return c}));var a=n(0),i=n.n(a),r=n(1096),l=n(2716),o=n(1);const s=["Option 1","Option 2"];function c(){const[e,t]=i.a.useState(s[0]),[n,a]=i.a.useState("");return Object(o.jsxs)("div",{children:[Object(o.jsx)("div",{children:"value: ".concat(null!==e?"'".concat(e,"'"):"null")}),Object(o.jsx)("div",{children:"inputValue: '".concat(n,"'")}),Object(o.jsx)("br",{}),Object(o.jsx)(l.a,{value:e,onChange:(e,n)=>{t(n)},inputValue:n,onInputChange:(e,t)=>{a(t)},id:"controllable-states-demo",options:s,style:{width:300},renderInput:e=>Object(o.jsx)(r.a,{...e,label:"Controllable",variant:"outlined"})})]})}},1718:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\nconst options = ['Option 1', 'Option 2'];\n\nexport default function ControllableStates() {\n const [value, setValue] = React.useState(options[0]);\n const [inputValue, setInputValue] = React.useState('');\n\n return (\n <div>\n <div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>\n <div>{`inputValue: '${inputValue}'`}</div>\n <br />\n <Autocomplete\n value={value}\n onChange={(event, newValue) => {\n setValue(newValue);\n }}\n inputValue={inputValue}\n onInputChange={(event, newInputValue) => {\n setInputValue(newInputValue);\n }}\n id=\"controllable-states-demo\"\n options={options}\n style={{ width: 300 }}\n renderInput={(params) => <TextField {...params} label=\"Controllable\" variant=\"outlined\" />}\n />\n </div>\n );\n}\n"},1719:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));n(0);var a=n(1096),i=n(2716),r=n(1);function l(){return Object(r.jsxs)("div",{style:{width:300},children:[Object(r.jsx)(i.a,{id:"free-solo-demo",freeSolo:!0,options:o.map((e=>e.title)),renderInput:e=>Object(r.jsx)(a.a,{...e,label:"freeSolo",margin:"normal",variant:"outlined"})}),Object(r.jsx)(i.a,{freeSolo:!0,id:"free-solo-2-demo",disableClearable:!0,options:o.map((e=>e.title)),renderInput:e=>Object(r.jsx)(a.a,{...e,label:"Search input",margin:"normal",variant:"outlined",InputProps:{...e.InputProps,type:"search"}})})]})}const o=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1720:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\nexport default function FreeSolo() {\n return (\n <div style={{ width: 300 }}>\n <Autocomplete\n id=\"free-solo-demo\"\n freeSolo\n options={top100Films.map((option) => option.title)}\n renderInput={(params) => (\n <TextField {...params} label=\"freeSolo\" margin=\"normal\" variant=\"outlined\" />\n )}\n />\n <Autocomplete\n freeSolo\n id=\"free-solo-2-demo\"\n disableClearable\n options={top100Films.map((option) => option.title)}\n renderInput={(params) => (\n <TextField\n {...params}\n label=\"Search input\"\n margin=\"normal\"\n variant=\"outlined\"\n InputProps={{ ...params.InputProps, type: 'search' }}\n />\n )}\n />\n </div>\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1721:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return y}));var a=n(0),i=n.n(a),r=n(1096),l=n(2525),o=n(2716),s=n(1);const c=Object(l.a)();function y(){const[e,t]=i.a.useState(null);return Object(s.jsx)(o.a,{value:e,onChange:(e,n)=>{"string"===typeof n?t({title:n}):n&&n.inputValue?t({title:n.inputValue}):t(n)},filterOptions:(e,t)=>{const n=c(e,t);return""!==t.inputValue&&n.push({inputValue:t.inputValue,title:'Add "'.concat(t.inputValue,'"')}),n},selectOnFocus:!0,clearOnBlur:!0,handleHomeEndKeys:!0,id:"free-solo-with-text-demo",options:d,getOptionLabel:e=>"string"===typeof e?e:e.inputValue?e.inputValue:e.title,renderOption:e=>e.title,style:{width:300},freeSolo:!0,renderInput:e=>Object(s.jsx)(r.a,{...e,label:"Free solo with text demo",variant:"outlined"})})}const d=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1722:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';\n\nconst filter = createFilterOptions();\n\nexport default function FreeSoloCreateOption() {\n const [value, setValue] = React.useState(null);\n\n return (\n <Autocomplete\n value={value}\n onChange={(event, newValue) => {\n if (typeof newValue === 'string') {\n setValue({\n title: newValue,\n });\n } else if (newValue && newValue.inputValue) {\n // Create a new value from the user input\n setValue({\n title: newValue.inputValue,\n });\n } else {\n setValue(newValue);\n }\n }}\n filterOptions={(options, params) => {\n const filtered = filter(options, params);\n\n // Suggest the creation of a new value\n if (params.inputValue !== '') {\n filtered.push({\n inputValue: params.inputValue,\n title: `Add \"${params.inputValue}\"`,\n });\n }\n\n return filtered;\n }}\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n id=\"free-solo-with-text-demo\"\n options={top100Films}\n getOptionLabel={(option) => {\n // Value selected with enter, right from the input\n if (typeof option === 'string') {\n return option;\n }\n // Add \"xxx\" option created dynamically\n if (option.inputValue) {\n return option.inputValue;\n }\n // Regular option\n return option.title;\n }}\n renderOption={(option) => option.title}\n style={{ width: 300 }}\n freeSolo\n renderInput={(params) => (\n <TextField {...params} label=\"Free solo with text demo\" variant=\"outlined\" />\n )}\n />\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n {\n title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',\n year: 1964,\n },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1723:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return b}));var a=n(0),i=n.n(a),r=n(1096),l=n(1085),o=n(1247),s=n(1194),c=n(1290),y=n(1196),d=n(1098),h=n(2525),p=n(2716),u=n(1);const m=Object(h.a)();function b(){const[e,t]=i.a.useState(null),[n,a]=i.a.useState(!1),h=()=>{g({title:"",year:""}),a(!1)},[b,g]=i.a.useState({title:"",year:""});return Object(u.jsxs)(i.a.Fragment,{children:[Object(u.jsx)(p.a,{value:e,onChange:(e,n)=>{"string"===typeof n?setTimeout((()=>{a(!0),g({title:n,year:""})})):n&&n.inputValue?(a(!0),g({title:n.inputValue,year:""})):t(n)},filterOptions:(e,t)=>{const n=m(e,t);return""!==t.inputValue&&n.push({inputValue:t.inputValue,title:'Add "'.concat(t.inputValue,'"')}),n},id:"free-solo-dialog-demo",options:f,getOptionLabel:e=>"string"===typeof e?e:e.inputValue?e.inputValue:e.title,selectOnFocus:!0,clearOnBlur:!0,handleHomeEndKeys:!0,renderOption:e=>e.title,style:{width:300},freeSolo:!0,renderInput:e=>Object(u.jsx)(r.a,{...e,label:"Free solo dialog",variant:"outlined"})}),Object(u.jsx)(l.a,{open:n,onClose:h,"aria-labelledby":"form-dialog-title",children:Object(u.jsxs)("form",{onSubmit:e=>{e.preventDefault(),t({title:b.title,year:parseInt(b.year,10)}),h()},children:[Object(u.jsx)(o.a,{id:"form-dialog-title",children:"Add a new film"}),Object(u.jsxs)(s.a,{children:[Object(u.jsx)(c.a,{children:"Did you miss any film in our list? Please, add it!"}),Object(u.jsx)(r.a,{autoFocus:!0,margin:"dense",id:"name",value:b.title,onChange:e=>g({...b,title:e.target.value}),label:"title",type:"text"}),Object(u.jsx)(r.a,{margin:"dense",id:"name",value:b.year,onChange:e=>g({...b,year:e.target.value}),label:"year",type:"number"})]}),Object(u.jsxs)(y.a,{children:[Object(u.jsx)(d.a,{onClick:h,color:"primary",children:"Cancel"}),Object(u.jsx)(d.a,{type:"submit",color:"primary",children:"Add"})]})]})})]})}const f=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1724:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport Button from '@material-ui/core/Button';\nimport Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';\n\nconst filter = createFilterOptions();\n\nexport default function FreeSoloCreateOptionDialog() {\n const [value, setValue] = React.useState(null);\n const [open, toggleOpen] = React.useState(false);\n\n const handleClose = () => {\n setDialogValue({\n title: '',\n year: '',\n });\n\n toggleOpen(false);\n };\n\n const [dialogValue, setDialogValue] = React.useState({\n title: '',\n year: '',\n });\n\n const handleSubmit = (event) => {\n event.preventDefault();\n setValue({\n title: dialogValue.title,\n year: parseInt(dialogValue.year, 10),\n });\n\n handleClose();\n };\n\n return (\n <React.Fragment>\n <Autocomplete\n value={value}\n onChange={(event, newValue) => {\n if (typeof newValue === 'string') {\n // timeout to avoid instant validation of the dialog's form.\n setTimeout(() => {\n toggleOpen(true);\n setDialogValue({\n title: newValue,\n year: '',\n });\n });\n } else if (newValue && newValue.inputValue) {\n toggleOpen(true);\n setDialogValue({\n title: newValue.inputValue,\n year: '',\n });\n } else {\n setValue(newValue);\n }\n }}\n filterOptions={(options, params) => {\n const filtered = filter(options, params);\n\n if (params.inputValue !== '') {\n filtered.push({\n inputValue: params.inputValue,\n title: `Add \"${params.inputValue}\"`,\n });\n }\n\n return filtered;\n }}\n id=\"free-solo-dialog-demo\"\n options={top100Films}\n getOptionLabel={(option) => {\n // e.g value selected with enter, right from the input\n if (typeof option === 'string') {\n return option;\n }\n if (option.inputValue) {\n return option.inputValue;\n }\n return option.title;\n }}\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n renderOption={(option) => option.title}\n style={{ width: 300 }}\n freeSolo\n renderInput={(params) => (\n <TextField {...params} label=\"Free solo dialog\" variant=\"outlined\" />\n )}\n />\n <Dialog open={open} onClose={handleClose} aria-labelledby=\"form-dialog-title\">\n <form onSubmit={handleSubmit}>\n <DialogTitle id=\"form-dialog-title\">Add a new film</DialogTitle>\n <DialogContent>\n <DialogContentText>\n Did you miss any film in our list? Please, add it!\n </DialogContentText>\n <TextField\n autoFocus\n margin=\"dense\"\n id=\"name\"\n value={dialogValue.title}\n onChange={(event) => setDialogValue({ ...dialogValue, title: event.target.value })}\n label=\"title\"\n type=\"text\"\n />\n <TextField\n margin=\"dense\"\n id=\"name\"\n value={dialogValue.year}\n onChange={(event) => setDialogValue({ ...dialogValue, year: event.target.value })}\n label=\"year\"\n type=\"number\"\n />\n </DialogContent>\n <DialogActions>\n <Button onClick={handleClose} color=\"primary\">\n Cancel\n </Button>\n <Button type=\"submit\" color=\"primary\">\n Add\n </Button>\n </DialogActions>\n </form>\n </Dialog>\n </React.Fragment>\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n {\n title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',\n year: 1964,\n },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1725:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));n(0);var a=n(1096),i=n(2716),r=n(1);function l(){const e=o.map((e=>{const t=e.title[0].toUpperCase();return{firstLetter:/[0-9]/.test(t)?"0-9":t,...e}}));return Object(r.jsx)(i.a,{id:"grouped-demo",options:e.sort(((e,t)=>-t.firstLetter.localeCompare(e.firstLetter))),groupBy:e=>e.firstLetter,getOptionLabel:e=>e.title,style:{width:300},renderInput:e=>Object(r.jsx)(a.a,{...e,label:"With categories",variant:"outlined"})})}const o=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1726:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\nexport default function Grouped() {\n const options = top100Films.map((option) => {\n const firstLetter = option.title[0].toUpperCase();\n return {\n firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,\n ...option,\n };\n });\n\n return (\n <Autocomplete\n id=\"grouped-demo\"\n options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}\n groupBy={(option) => option.firstLetter}\n getOptionLabel={(option) => option.title}\n style={{ width: 300 }}\n renderInput={(params) => <TextField {...params} label=\"With categories\" variant=\"outlined\" />}\n />\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1727:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));n(0);var a=n(1096),i=n(2716),r=n(1);function l(){return Object(r.jsx)(i.a,{id:"disabled-options-demo",options:o,getOptionDisabled:e=>e===o[0]||e===o[2],style:{width:300},renderInput:e=>Object(r.jsx)(a.a,{...e,label:"Disabled options",variant:"outlined"})})}const o=Array.from(new Array(48)).map(((e,t)=>"".concat(t<20?"0":"").concat(Math.floor(t/2),":").concat(t%2===0?"00":"30")))},1728:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\nexport default function DisabledOptions() {\n return (\n <Autocomplete\n id=\"disabled-options-demo\"\n options={timeSlots}\n getOptionDisabled={(option) => option === timeSlots[0] || option === timeSlots[2]}\n style={{ width: 300 }}\n renderInput={(params) => (\n <TextField {...params} label=\"Disabled options\" variant=\"outlined\" />\n )}\n />\n );\n}\n\n// One time slot every 30 minutes.\nconst timeSlots = Array.from(new Array(24 * 2)).map(\n (_, index) => `${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${index % 2 === 0 ? '00' : '30'}`,\n);\n"},1729:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return o}));n(0);var a=n(2525),i=n(1072),r=n(1);const l=Object(i.a)((e=>({label:{display:"block"},input:{width:200},listbox:{width:200,margin:0,padding:0,zIndex:1,position:"absolute",listStyle:"none",backgroundColor:e.palette.background.paper,overflow:"auto",maxHeight:200,border:"1px solid rgba(0,0,0,.25)",'& li[data-focus="true"]':{backgroundColor:"#4a8df6",color:"white",cursor:"pointer"},"& li:active":{backgroundColor:"#2977f5",color:"white"}}})));function o(){const e=l(),{getRootProps:t,getInputLabelProps:n,getInputProps:i,getListboxProps:o,getOptionProps:c,groupedOptions:y}=Object(a.b)({id:"use-autocomplete-demo",options:s,getOptionLabel:e=>e.title});return Object(r.jsxs)("div",{children:[Object(r.jsxs)("div",{...t(),children:[Object(r.jsx)("label",{className:e.label,...n(),children:"useAutocomplete"}),Object(r.jsx)("input",{className:e.input,...i()})]}),y.length>0?Object(r.jsx)("ul",{className:e.listbox,...o(),children:y.map(((e,t)=>Object(r.jsx)("li",{...c({option:e,index:t}),children:e.title})))}):null]})}const s=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1730:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport useAutocomplete from '@material-ui/lab/useAutocomplete';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n label: {\n display: 'block',\n },\n input: {\n width: 200,\n },\n listbox: {\n width: 200,\n margin: 0,\n padding: 0,\n zIndex: 1,\n position: 'absolute',\n listStyle: 'none',\n backgroundColor: theme.palette.background.paper,\n overflow: 'auto',\n maxHeight: 200,\n border: '1px solid rgba(0,0,0,.25)',\n '& li[data-focus=\"true\"]': {\n backgroundColor: '#4a8df6',\n color: 'white',\n cursor: 'pointer',\n },\n '& li:active': {\n backgroundColor: '#2977f5',\n color: 'white',\n },\n },\n}));\n\nexport default function UseAutocomplete() {\n const classes = useStyles();\n const {\n getRootProps,\n getInputLabelProps,\n getInputProps,\n getListboxProps,\n getOptionProps,\n groupedOptions,\n } = useAutocomplete({\n id: 'use-autocomplete-demo',\n options: top100Films,\n getOptionLabel: (option) => option.title,\n });\n\n return (\n <div>\n <div {...getRootProps()}>\n <label className={classes.label} {...getInputLabelProps()}>\n useAutocomplete\n </label>\n <input className={classes.input} {...getInputProps()} />\n </div>\n {groupedOptions.length > 0 ? (\n <ul className={classes.listbox} {...getListboxProps()}>\n {groupedOptions.map((option, index) => (\n <li {...getOptionProps({ option, index })}>{option.title}</li>\n ))}\n </ul>\n ) : null}\n </div>\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1731:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return S}));var a,i,r,l,o=n(1335),s=(n(0),n(2525)),c=n(1111),y=n(1233),d=n.n(y),h=n(1185),p=n.n(h),u=n(1732),m=n(1);const b=Object(u.a)("label")(a||(a=Object(o.a)(["\n padding: 0 0 4px;\n line-height: 1.5;\n display: block;\n"]))),f=Object(u.a)("div")(i||(i=Object(o.a)(["\n width: 300px;\n border: 1px solid #d9d9d9;\n background-color: #fff;\n border-radius: 4px;\n padding: 1px;\n display: flex;\n flex-wrap: wrap;\n\n &:hover {\n border-color: #40a9ff;\n }\n\n &.focused {\n border-color: #40a9ff;\n box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n }\n\n & input {\n font-size: 14px;\n height: 30px;\n box-sizing: border-box;\n padding: 4px 6px;\n width: 0;\n min-width: 30px;\n flex-grow: 1;\n border: 0;\n margin: 0;\n outline: 0;\n }\n"]))),g=Object(u.a)((e=>{let{label:t,onDelete:n,...a}=e;return Object(m.jsxs)("div",{...a,children:[Object(m.jsx)("span",{children:t}),Object(m.jsx)(p.a,{onClick:n})]})}))(r||(r=Object(o.a)(["\n display: flex;\n align-items: center;\n height: 24px;\n margin: 2px;\n line-height: 22px;\n background-color: #fafafa;\n border: 1px solid #e8e8e8;\n border-radius: 2px;\n box-sizing: content-box;\n padding: 0 4px 0 10px;\n outline: 0;\n overflow: hidden;\n\n &:focus {\n border-color: #40a9ff;\n background-color: #e6f7ff;\n }\n\n & span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n & svg {\n font-size: 12px;\n cursor: pointer;\n padding: 4px;\n }\n"]))),T=Object(u.a)("ul")(l||(l=Object(o.a)(["\n width: 300px;\n margin: 2px 0 0;\n padding: 0;\n position: absolute;\n list-style: none;\n background-color: #fff;\n overflow: auto;\n max-height: 250px;\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n z-index: 1;\n\n & li {\n padding: 5px 12px;\n display: flex;\n\n & span {\n flex-grow: 1;\n }\n\n & svg {\n color: transparent;\n }\n }\n\n & li[aria-selected='true'] {\n background-color: #fafafa;\n font-weight: 600;\n\n & svg {\n color: #1890ff;\n }\n }\n\n & li[data-focus='true'] {\n background-color: #e6f7ff;\n cursor: pointer;\n\n & svg {\n color: #000;\n }\n }\n"])));function S(){const{getRootProps:e,getInputLabelProps:t,getInputProps:n,getTagProps:a,getListboxProps:i,getOptionProps:r,groupedOptions:l,value:o,focused:y,setAnchorEl:h}=Object(s.b)({id:"customized-hook-demo",defaultValue:[x[1]],multiple:!0,options:x,getOptionLabel:e=>e.title});return Object(m.jsx)(c.a,{children:Object(m.jsxs)("div",{children:[Object(m.jsxs)("div",{...e(),children:[Object(m.jsx)(b,{...t(),children:"Customized hook"}),Object(m.jsxs)(f,{ref:h,className:y?"focused":"",children:[o.map(((e,t)=>Object(m.jsx)(g,{label:e.title,...a({index:t})}))),Object(m.jsx)("input",{...n()})]})]}),l.length>0?Object(m.jsx)(T,{...i(),children:l.map(((e,t)=>Object(m.jsxs)("li",{...r({option:e,index:t}),children:[Object(m.jsx)("span",{children:e.title}),Object(m.jsx)(d.a,{fontSize:"small"})]})))}):null]})})}const x=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1734:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport useAutocomplete from '@material-ui/lab/useAutocomplete';\nimport NoSsr from '@material-ui/core/NoSsr';\nimport CheckIcon from '@material-ui/icons/Check';\nimport CloseIcon from '@material-ui/icons/Close';\nimport styled from 'styled-components';\n\nconst Label = styled('label')`\n padding: 0 0 4px;\n line-height: 1.5;\n display: block;\n`;\n\nconst InputWrapper = styled('div')`\n width: 300px;\n border: 1px solid #d9d9d9;\n background-color: #fff;\n border-radius: 4px;\n padding: 1px;\n display: flex;\n flex-wrap: wrap;\n\n &:hover {\n border-color: #40a9ff;\n }\n\n &.focused {\n border-color: #40a9ff;\n box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n }\n\n & input {\n font-size: 14px;\n height: 30px;\n box-sizing: border-box;\n padding: 4px 6px;\n width: 0;\n min-width: 30px;\n flex-grow: 1;\n border: 0;\n margin: 0;\n outline: 0;\n }\n`;\n\nconst Tag = styled(({ label, onDelete, ...props }) => (\n <div {...props}>\n <span>{label}</span>\n <CloseIcon onClick={onDelete} />\n </div>\n))`\n display: flex;\n align-items: center;\n height: 24px;\n margin: 2px;\n line-height: 22px;\n background-color: #fafafa;\n border: 1px solid #e8e8e8;\n border-radius: 2px;\n box-sizing: content-box;\n padding: 0 4px 0 10px;\n outline: 0;\n overflow: hidden;\n\n &:focus {\n border-color: #40a9ff;\n background-color: #e6f7ff;\n }\n\n & span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n & svg {\n font-size: 12px;\n cursor: pointer;\n padding: 4px;\n }\n`;\n\nconst Listbox = styled('ul')`\n width: 300px;\n margin: 2px 0 0;\n padding: 0;\n position: absolute;\n list-style: none;\n background-color: #fff;\n overflow: auto;\n max-height: 250px;\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n z-index: 1;\n\n & li {\n padding: 5px 12px;\n display: flex;\n\n & span {\n flex-grow: 1;\n }\n\n & svg {\n color: transparent;\n }\n }\n\n & li[aria-selected='true'] {\n background-color: #fafafa;\n font-weight: 600;\n\n & svg {\n color: #1890ff;\n }\n }\n\n & li[data-focus='true'] {\n background-color: #e6f7ff;\n cursor: pointer;\n\n & svg {\n color: #000;\n }\n }\n`;\n\nexport default function CustomizedHook() {\n const {\n getRootProps,\n getInputLabelProps,\n getInputProps,\n getTagProps,\n getListboxProps,\n getOptionProps,\n groupedOptions,\n value,\n focused,\n setAnchorEl,\n } = useAutocomplete({\n id: 'customized-hook-demo',\n defaultValue: [top100Films[1]],\n multiple: true,\n options: top100Films,\n getOptionLabel: (option) => option.title,\n });\n\n return (\n <NoSsr>\n <div>\n <div {...getRootProps()}>\n <Label {...getInputLabelProps()}>Customized hook</Label>\n <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>\n {value.map((option, index) => (\n <Tag label={option.title} {...getTagProps({ index })} />\n ))}\n\n <input {...getInputProps()} />\n </InputWrapper>\n </div>\n {groupedOptions.length > 0 ? (\n <Listbox {...getListboxProps()}>\n {groupedOptions.map((option, index) => (\n <li {...getOptionProps({ option, index })}>\n <span>{option.title}</span>\n <CheckIcon fontSize=\"small\" />\n </li>\n ))}\n </Listbox>\n ) : null}\n </div>\n </NoSsr>\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1735:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return d}));var a=n(1736),i=n.n(a),r=n(0),l=n.n(r),o=n(1096),s=n(2716),c=n(1279),y=n(1);function d(){const[e,t]=l.a.useState(!1),[n,a]=l.a.useState([]),r=e&&0===n.length;return l.a.useEffect((()=>{let e=!0;if(r)return(async()=>{const t=await i()("https://country.register.gov.uk/records.json?page-size=5000");await function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return new Promise((t=>{setTimeout(t,e)}))}(1e3);const n=await t.json();e&&a(Object.keys(n).map((e=>n[e].item[0])))})(),()=>{e=!1}}),[r]),l.a.useEffect((()=>{e||a([])}),[e]),Object(y.jsx)(s.a,{id:"asynchronous-demo",style:{width:300},open:e,onOpen:()=>{t(!0)},onClose:()=>{t(!1)},getOptionSelected:(e,t)=>e.name===t.name,getOptionLabel:e=>e.name,options:n,loading:r,renderInput:e=>Object(y.jsx)(o.a,{...e,label:"Asynchronous",variant:"outlined",InputProps:{...e.InputProps,endAdornment:Object(y.jsxs)(l.a.Fragment,{children:[r?Object(y.jsx)(c.a,{color:"inherit",size:20}):null,e.InputProps.endAdornment]})}})})}},1737:function(e,t,n){"use strict";n.r(t),t.default="// *https://www.registers.service.gov.uk/registers/country/use-the-api*\nimport fetch from 'cross-fetch';\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nfunction sleep(delay = 0) {\n return new Promise((resolve) => {\n setTimeout(resolve, delay);\n });\n}\n\nexport default function Asynchronous() {\n const [open, setOpen] = React.useState(false);\n const [options, setOptions] = React.useState([]);\n const loading = open && options.length === 0;\n\n React.useEffect(() => {\n let active = true;\n\n if (!loading) {\n return undefined;\n }\n\n (async () => {\n const response = await fetch('https://country.register.gov.uk/records.json?page-size=5000');\n await sleep(1e3); // For demo purposes.\n const countries = await response.json();\n\n if (active) {\n setOptions(Object.keys(countries).map((key) => countries[key].item[0]));\n }\n })();\n\n return () => {\n active = false;\n };\n }, [loading]);\n\n React.useEffect(() => {\n if (!open) {\n setOptions([]);\n }\n }, [open]);\n\n return (\n <Autocomplete\n id=\"asynchronous-demo\"\n style={{ width: 300 }}\n open={open}\n onOpen={() => {\n setOpen(true);\n }}\n onClose={() => {\n setOpen(false);\n }}\n getOptionSelected={(option, value) => option.name === value.name}\n getOptionLabel={(option) => option.name}\n options={options}\n loading={loading}\n renderInput={(params) => (\n <TextField\n {...params}\n label=\"Asynchronous\"\n variant=\"outlined\"\n InputProps={{\n ...params.InputProps,\n endAdornment: (\n <React.Fragment>\n {loading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n {params.InputProps.endAdornment}\n </React.Fragment>\n ),\n }}\n />\n )}\n />\n );\n}\n"},1738:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return T}));var a=n(0),i=n.n(a),r=n(1096),l=n(2716),o=n(1294),s=n.n(o),c=n(1172),y=n(194),d=n(1072),h=n(400),p=n.n(h),u=n(1739),m=n.n(u),b=n(1);const f={current:null},g=Object(d.a)((e=>({icon:{color:e.palette.text.secondary,marginRight:e.spacing(2)}})));function T(){const e=g(),[t,n]=i.a.useState(null),[a,o]=i.a.useState(""),[d,h]=i.a.useState([]),u=i.a.useRef(!1);"undefined"===typeof window||u.current||(document.querySelector("#google-maps")||function(e,t,n){if(!t)return;const a=document.createElement("script");a.setAttribute("async",""),a.setAttribute("id",n),a.src=e,t.appendChild(a)}("https://maps.googleapis.com/maps/api/js?key=AIzaSyBwRp1e12ec1vOTtGiA4fcCt2sCUS78UYc&libraries=places",document.querySelector("head"),"google-maps"),u.current=!0);const T=i.a.useMemo((()=>m()(((e,t)=>{f.current.getPlacePredictions(e,t)}),200)),[]);return i.a.useEffect((()=>{let e=!0;if(!f.current&&window.google&&(f.current=new window.google.maps.places.AutocompleteService),f.current){if(""!==a)return T({input:a},(n=>{if(e){let e=[];t&&(e=[t]),n&&(e=[...e,...n]),h(e)}})),()=>{e=!1};h(t?[t]:[])}}),[t,a,T]),Object(b.jsx)(l.a,{id:"google-map-demo",style:{width:300},getOptionLabel:e=>"string"===typeof e?e:e.description,filterOptions:e=>e,options:d,autoComplete:!0,includeInputInList:!0,filterSelectedOptions:!0,value:t,onChange:(e,t)=>{h(t?[t,...d]:d),n(t)},onInputChange:(e,t)=>{o(t)},renderInput:e=>Object(b.jsx)(r.a,{...e,label:"Add a location",variant:"outlined",fullWidth:!0}),renderOption:t=>{const n=t.structured_formatting.main_text_matched_substrings,a=p()(t.structured_formatting.main_text,n.map((e=>[e.offset,e.offset+e.length])));return Object(b.jsxs)(c.a,{container:!0,alignItems:"center",children:[Object(b.jsx)(c.a,{item:!0,children:Object(b.jsx)(s.a,{className:e.icon})}),Object(b.jsxs)(c.a,{item:!0,xs:!0,children:[a.map(((e,t)=>Object(b.jsx)("span",{style:{fontWeight:e.highlight?700:400},children:e.text},t))),Object(b.jsx)(y.a,{variant:"body2",color:"textSecondary",children:t.structured_formatting.secondary_text})]})]})}})}},1745:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport LocationOnIcon from '@material-ui/icons/LocationOn';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport parse from 'autosuggest-highlight/parse';\nimport throttle from 'lodash/throttle';\n\nfunction loadScript(src, position, id) {\n if (!position) {\n return;\n }\n\n const script = document.createElement('script');\n script.setAttribute('async', '');\n script.setAttribute('id', id);\n script.src = src;\n position.appendChild(script);\n}\n\nconst autocompleteService = { current: null };\n\nconst useStyles = makeStyles((theme) => ({\n icon: {\n color: theme.palette.text.secondary,\n marginRight: theme.spacing(2),\n },\n}));\n\nexport default function GoogleMaps() {\n const classes = useStyles();\n const [value, setValue] = React.useState(null);\n const [inputValue, setInputValue] = React.useState('');\n const [options, setOptions] = React.useState([]);\n const loaded = React.useRef(false);\n\n if (typeof window !== 'undefined' && !loaded.current) {\n if (!document.querySelector('#google-maps')) {\n loadScript(\n 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBwRp1e12ec1vOTtGiA4fcCt2sCUS78UYc&libraries=places',\n document.querySelector('head'),\n 'google-maps',\n );\n }\n\n loaded.current = true;\n }\n\n const fetch = React.useMemo(\n () =>\n throttle((request, callback) => {\n autocompleteService.current.getPlacePredictions(request, callback);\n }, 200),\n [],\n );\n\n React.useEffect(() => {\n let active = true;\n\n if (!autocompleteService.current && window.google) {\n autocompleteService.current = new window.google.maps.places.AutocompleteService();\n }\n if (!autocompleteService.current) {\n return undefined;\n }\n\n if (inputValue === '') {\n setOptions(value ? [value] : []);\n return undefined;\n }\n\n fetch({ input: inputValue }, (results) => {\n if (active) {\n let newOptions = [];\n\n if (value) {\n newOptions = [value];\n }\n\n if (results) {\n newOptions = [...newOptions, ...results];\n }\n\n setOptions(newOptions);\n }\n });\n\n return () => {\n active = false;\n };\n }, [value, inputValue, fetch]);\n\n return (\n <Autocomplete\n id=\"google-map-demo\"\n style={{ width: 300 }}\n getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)}\n filterOptions={(x) => x}\n options={options}\n autoComplete\n includeInputInList\n filterSelectedOptions\n value={value}\n onChange={(event, newValue) => {\n setOptions(newValue ? [newValue, ...options] : options);\n setValue(newValue);\n }}\n onInputChange={(event, newInputValue) => {\n setInputValue(newInputValue);\n }}\n renderInput={(params) => (\n <TextField {...params} label=\"Add a location\" variant=\"outlined\" fullWidth />\n )}\n renderOption={(option) => {\n const matches = option.structured_formatting.main_text_matched_substrings;\n const parts = parse(\n option.structured_formatting.main_text,\n matches.map((match) => [match.offset, match.offset + match.length]),\n );\n\n return (\n <Grid container alignItems=\"center\">\n <Grid item>\n <LocationOnIcon className={classes.icon} />\n </Grid>\n <Grid item xs>\n {parts.map((part, index) => (\n <span key={index} style={{ fontWeight: part.highlight ? 700 : 400 }}>\n {part.text}\n </span>\n ))}\n\n <Typography variant=\"body2\" color=\"textSecondary\">\n {option.structured_formatting.secondary_text}\n </Typography>\n </Grid>\n </Grid>\n );\n }}\n />\n );\n}\n"},1746:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return c}));n(0);var a=n(1192),i=n(2716),r=n(1072),l=n(1096),o=n(1);const s=Object(r.a)((e=>({root:{width:500,"& > * + *":{marginTop:e.spacing(3)}}})));function c(){const e=s();return Object(o.jsxs)("div",{className:e.root,children:[Object(o.jsx)(i.a,{multiple:!0,id:"tags-standard",options:y,getOptionLabel:e=>e.title,defaultValue:[y[13]],renderInput:e=>Object(o.jsx)(l.a,{...e,variant:"standard",label:"Multiple values",placeholder:"Favorites"})}),Object(o.jsx)(i.a,{multiple:!0,id:"tags-outlined",options:y,getOptionLabel:e=>e.title,defaultValue:[y[13]],filterSelectedOptions:!0,renderInput:e=>Object(o.jsx)(l.a,{...e,variant:"outlined",label:"filterSelectedOptions",placeholder:"Favorites"})}),Object(o.jsx)(i.a,{multiple:!0,id:"tags-filled",options:y.map((e=>e.title)),defaultValue:[y[13].title],freeSolo:!0,renderTags:(e,t)=>e.map(((e,n)=>Object(o.jsx)(a.a,{variant:"outlined",label:e,...t({index:n})}))),renderInput:e=>Object(o.jsx)(l.a,{...e,variant:"filled",label:"freeSolo",placeholder:"Favorites"})})]})}const y=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1747:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport Chip from '@material-ui/core/Chip';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 500,\n '& > * + *': {\n marginTop: theme.spacing(3),\n },\n },\n}));\n\nexport default function Tags() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Autocomplete\n multiple\n id=\"tags-standard\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n defaultValue={[top100Films[13]]}\n renderInput={(params) => (\n <TextField\n {...params}\n variant=\"standard\"\n label=\"Multiple values\"\n placeholder=\"Favorites\"\n />\n )}\n />\n <Autocomplete\n multiple\n id=\"tags-outlined\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n defaultValue={[top100Films[13]]}\n filterSelectedOptions\n renderInput={(params) => (\n <TextField\n {...params}\n variant=\"outlined\"\n label=\"filterSelectedOptions\"\n placeholder=\"Favorites\"\n />\n )}\n />\n <Autocomplete\n multiple\n id=\"tags-filled\"\n options={top100Films.map((option) => option.title)}\n defaultValue={[top100Films[13].title]}\n freeSolo\n renderTags={(value, getTagProps) =>\n value.map((option, index) => (\n <Chip variant=\"outlined\" label={option} {...getTagProps({ index })} />\n ))\n }\n renderInput={(params) => (\n <TextField {...params} variant=\"filled\" label=\"freeSolo\" placeholder=\"Favorites\" />\n )}\n />\n </div>\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1748:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return c}));var a=n(0),i=n.n(a),r=n(1192),l=n(1096),o=n(2716),s=n(1);function c(){const e=[y[6]],[t,n]=i.a.useState([...e,y[13]]);return Object(s.jsx)(o.a,{multiple:!0,id:"fixed-tags-demo",value:t,onChange:(t,a)=>{n([...e,...a.filter((t=>-1===e.indexOf(t)))])},options:y,getOptionLabel:e=>e.title,renderTags:(t,n)=>t.map(((t,a)=>Object(s.jsx)(r.a,{label:t.title,...n({index:a}),disabled:-1!==e.indexOf(t)}))),style:{width:500},renderInput:e=>Object(s.jsx)(l.a,{...e,label:"Fixed tag",variant:"outlined",placeholder:"Favorites"})})}const y=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1749:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport Chip from '@material-ui/core/Chip';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\nexport default function FixedTags() {\n const fixedOptions = [top100Films[6]];\n const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);\n\n return (\n <Autocomplete\n multiple\n id=\"fixed-tags-demo\"\n value={value}\n onChange={(event, newValue) => {\n setValue([\n ...fixedOptions,\n ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),\n ]);\n }}\n options={top100Films}\n getOptionLabel={(option) => option.title}\n renderTags={(tagValue, getTagProps) =>\n tagValue.map((option, index) => (\n <Chip\n label={option.title}\n {...getTagProps({ index })}\n disabled={fixedOptions.indexOf(option) !== -1}\n />\n ))\n }\n style={{ width: 500 }}\n renderInput={(params) => (\n <TextField {...params} label=\"Fixed tag\" variant=\"outlined\" placeholder=\"Favorites\" />\n )}\n />\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1750:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return m}));var a=n(0),i=n.n(a),r=n(1165),l=n(1096),o=n(2716),s=n(1346),c=n.n(s),y=n(1347),d=n.n(y),h=n(1);const p=Object(h.jsx)(c.a,{fontSize:"small"}),u=Object(h.jsx)(d.a,{fontSize:"small"});function m(){return Object(h.jsx)(o.a,{multiple:!0,id:"checkboxes-tags-demo",options:b,disableCloseOnSelect:!0,getOptionLabel:e=>e.title,renderOption:(e,t)=>{let{selected:n}=t;return Object(h.jsxs)(i.a.Fragment,{children:[Object(h.jsx)(r.a,{icon:p,checkedIcon:u,style:{marginRight:8},checked:n}),e.title]})},style:{width:500},renderInput:e=>Object(h.jsx)(l.a,{...e,variant:"outlined",label:"Checkboxes",placeholder:"Favorites"})})}const b=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014}]},1751:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\n\nimport React from 'react';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\nexport default function CheckboxesTags() {\n return (\n <Autocomplete\n multiple\n id=\"checkboxes-tags-demo\"\n options={top100Films}\n disableCloseOnSelect\n getOptionLabel={(option) => option.title}\n renderOption={(option, { selected }) => (\n <React.Fragment>\n <Checkbox\n icon={icon}\n checkedIcon={checkedIcon}\n style={{ marginRight: 8 }}\n checked={selected}\n />\n {option.title}\n </React.Fragment>\n )}\n style={{ width: 500 }}\n renderInput={(params) => (\n <TextField {...params} variant=\"outlined\" label=\"Checkboxes\" placeholder=\"Favorites\" />\n )}\n />\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n];\n"},1752:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));n(0);var a=n(2716),i=n(1072),r=n(1096),l=n(1);const o=Object(i.a)((e=>({root:{width:500,"& > * + *":{marginTop:e.spacing(3)}}})));function s(){const e=o();return Object(l.jsx)("div",{className:e.root,children:Object(l.jsx)(a.a,{multiple:!0,limitTags:2,id:"multiple-limit-tags",options:c,getOptionLabel:e=>e.title,defaultValue:[c[13],c[12],c[11]],renderInput:e=>Object(l.jsx)(r.a,{...e,variant:"outlined",label:"limitTags",placeholder:"Favorites"})})})}const c=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1753:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 500,\n '& > * + *': {\n marginTop: theme.spacing(3),\n },\n },\n}));\n\nexport default function LimitTags() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Autocomplete\n multiple\n limitTags={2}\n id=\"multiple-limit-tags\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}\n renderInput={(params) => (\n <TextField {...params} variant=\"outlined\" label=\"limitTags\" placeholder=\"Favorites\" />\n )}\n />\n </div>\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1754:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return c}));n(0);var a=n(1192),i=n(2716),r=n(1072),l=n(1096),o=n(1);const s=Object(r.a)((e=>({root:{width:500,"& > * + *":{marginTop:e.spacing(2)}}})));function c(){const e=s();return Object(o.jsxs)("div",{className:e.root,children:[Object(o.jsx)(i.a,{id:"size-small-standard",size:"small",options:y,getOptionLabel:e=>e.title,defaultValue:y[13],renderInput:e=>Object(o.jsx)(l.a,{...e,variant:"standard",label:"Size small",placeholder:"Favorites"})}),Object(o.jsx)(i.a,{multiple:!0,id:"size-small-standard-multi",size:"small",options:y,getOptionLabel:e=>e.title,defaultValue:[y[13]],renderInput:e=>Object(o.jsx)(l.a,{...e,variant:"standard",label:"Size small",placeholder:"Favorites"})}),Object(o.jsx)(i.a,{id:"size-small-outlined",size:"small",options:y,getOptionLabel:e=>e.title,defaultValue:y[13],renderInput:e=>Object(o.jsx)(l.a,{...e,variant:"outlined",label:"Size small",placeholder:"Favorites"})}),Object(o.jsx)(i.a,{multiple:!0,id:"size-small-outlined-multi",size:"small",options:y,getOptionLabel:e=>e.title,defaultValue:[y[13]],renderInput:e=>Object(o.jsx)(l.a,{...e,variant:"outlined",label:"Size small",placeholder:"Favorites"})}),Object(o.jsx)(i.a,{id:"size-small-filled",size:"small",options:y,getOptionLabel:e=>e.title,defaultValue:y[13],renderTags:(e,t)=>e.map(((e,n)=>Object(o.jsx)(a.a,{variant:"outlined",label:e.title,size:"small",...t({index:n})}))),renderInput:e=>Object(o.jsx)(l.a,{...e,variant:"filled",label:"Size small",placeholder:"Favorites"})}),Object(o.jsx)(i.a,{multiple:!0,id:"size-small-filled-multi",size:"small",options:y,getOptionLabel:e=>e.title,defaultValue:[y[13]],renderTags:(e,t)=>e.map(((e,n)=>Object(o.jsx)(a.a,{variant:"outlined",label:e.title,size:"small",...t({index:n})}))),renderInput:e=>Object(o.jsx)(l.a,{...e,variant:"filled",label:"Size small",placeholder:"Favorites"})})]})}const y=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1755:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport Chip from '@material-ui/core/Chip';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 500,\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function Sizes() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Autocomplete\n id=\"size-small-standard\"\n size=\"small\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n defaultValue={top100Films[13]}\n renderInput={(params) => (\n <TextField {...params} variant=\"standard\" label=\"Size small\" placeholder=\"Favorites\" />\n )}\n />\n <Autocomplete\n multiple\n id=\"size-small-standard-multi\"\n size=\"small\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n defaultValue={[top100Films[13]]}\n renderInput={(params) => (\n <TextField {...params} variant=\"standard\" label=\"Size small\" placeholder=\"Favorites\" />\n )}\n />\n <Autocomplete\n id=\"size-small-outlined\"\n size=\"small\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n defaultValue={top100Films[13]}\n renderInput={(params) => (\n <TextField {...params} variant=\"outlined\" label=\"Size small\" placeholder=\"Favorites\" />\n )}\n />\n <Autocomplete\n multiple\n id=\"size-small-outlined-multi\"\n size=\"small\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n defaultValue={[top100Films[13]]}\n renderInput={(params) => (\n <TextField {...params} variant=\"outlined\" label=\"Size small\" placeholder=\"Favorites\" />\n )}\n />\n <Autocomplete\n id=\"size-small-filled\"\n size=\"small\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n defaultValue={top100Films[13]}\n renderTags={(value, getTagProps) =>\n value.map((option, index) => (\n <Chip\n variant=\"outlined\"\n label={option.title}\n size=\"small\"\n {...getTagProps({ index })}\n />\n ))\n }\n renderInput={(params) => (\n <TextField {...params} variant=\"filled\" label=\"Size small\" placeholder=\"Favorites\" />\n )}\n />\n <Autocomplete\n multiple\n id=\"size-small-filled-multi\"\n size=\"small\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n defaultValue={[top100Films[13]]}\n renderTags={(value, getTagProps) =>\n value.map((option, index) => (\n <Chip\n variant=\"outlined\"\n label={option.title}\n size=\"small\"\n {...getTagProps({ index })}\n />\n ))\n }\n renderInput={(params) => (\n <TextField {...params} variant=\"filled\" label=\"Size small\" placeholder=\"Favorites\" />\n )}\n />\n </div>\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1756:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));n(0);var a=n(2716),i=n(1);const r=["Option 1","Option 2"];function l(){return Object(i.jsx)(a.a,{id:"custom-input-demo",options:r,renderInput:e=>Object(i.jsx)("div",{ref:e.InputProps.ref,children:Object(i.jsx)("input",{style:{width:200},type:"text",...e.inputProps})})})}},1757:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\nconst options = ['Option 1', 'Option 2'];\n\nexport default function CustomInputAutocomplete() {\n return (\n <Autocomplete\n id=\"custom-input-demo\"\n options={options}\n renderInput={(params) => (\n <div ref={params.InputProps.ref}>\n <input style={{ width: 200 }} type=\"text\" {...params.inputProps} />\n </div>\n )}\n />\n );\n}\n"},1758:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return S}));var a=n(0),i=n.n(a),r=n(1072),l=n(31),o=n(43),s=n(1041),c=n(1348),y=n.n(c),d=n(1185),h=n.n(d),p=n(1235),u=n.n(p),m=n(2716),b=n(221),f=n(549),g=n(1);const T=Object(r.a)((e=>({root:{width:221,fontSize:13},button:{fontSize:13,width:"100%",textAlign:"left",paddingBottom:8,color:"#586069",fontWeight:600,"&:hover,&:focus":{color:"#0366d6"},"& span":{width:"100%"},"& svg":{width:16,height:16}},tag:{marginTop:3,height:20,padding:".15em 4px",fontWeight:600,lineHeight:"15px",borderRadius:2},popper:{border:"1px solid rgba(27,31,35,.15)",boxShadow:"0 3px 12px rgba(27,31,35,.15)",borderRadius:3,width:300,zIndex:1,fontSize:13,color:"#586069",backgroundColor:"#f6f8fa"},header:{borderBottom:"1px solid #e1e4e8",padding:"8px 10px",fontWeight:600},inputBase:{padding:10,width:"100%",borderBottom:"1px solid #dfe2e5","& input":{borderRadius:4,backgroundColor:e.palette.common.white,padding:8,transition:e.transitions.create(["border-color","box-shadow"]),border:"1px solid #ced4da",fontSize:14,"&:focus":{boxShadow:"".concat(Object(l.a)(e.palette.primary.main,.25)," 0 0 0 0.2rem"),borderColor:e.palette.primary.main}}},paper:{boxShadow:"none",margin:0,color:"#586069",fontSize:13},option:{minHeight:"auto",alignItems:"flex-start",padding:8,'&[aria-selected="true"]':{backgroundColor:"transparent"},'&[data-focus="true"]':{backgroundColor:e.palette.action.hover}},popperDisablePortal:{position:"relative"},iconSelected:{width:17,height:17,marginRight:5,marginLeft:-2},color:{width:14,height:14,flexShrink:0,borderRadius:3,marginRight:8,marginTop:2},text:{flexGrow:1},close:{opacity:.6,width:18,height:18}})));function S(){const e=T(),[t,n]=i.a.useState(null),[a,r]=i.a.useState([x[1],x[11]]),[l,c]=i.a.useState([]),d=Object(o.a)(),p=Boolean(t),S=p?"github-label":void 0;return Object(g.jsxs)(i.a.Fragment,{children:[Object(g.jsxs)("div",{className:e.root,children:[Object(g.jsxs)(b.a,{disableRipple:!0,className:e.button,"aria-describedby":S,onClick:e=>{c(a),n(e.currentTarget)},children:[Object(g.jsx)("span",{children:"Labels"}),Object(g.jsx)(y.a,{})]}),a.map((t=>Object(g.jsx)("div",{className:e.tag,style:{backgroundColor:t.color,color:d.palette.getContrastText(t.color)},children:t.name},t.name)))]}),Object(g.jsxs)(s.a,{id:S,open:p,anchorEl:t,placement:"bottom-start",className:e.popper,children:[Object(g.jsx)("div",{className:e.header,children:"Apply labels to this pull request"}),Object(g.jsx)(m.a,{open:!0,onClose:(e,a)=>{"toggleInput"!==a&&(r(l),t&&t.focus(),n(null))},multiple:!0,classes:{paper:e.paper,option:e.option,popperDisablePortal:e.popperDisablePortal},value:l,onChange:(e,t)=>{c(t)},disableCloseOnSelect:!0,disablePortal:!0,renderTags:()=>null,noOptionsText:"No labels",renderOption:(t,n)=>{let{selected:a}=n;return Object(g.jsxs)(i.a.Fragment,{children:[Object(g.jsx)(u.a,{className:e.iconSelected,style:{visibility:a?"visible":"hidden"}}),Object(g.jsx)("span",{className:e.color,style:{backgroundColor:t.color}}),Object(g.jsxs)("div",{className:e.text,children:[t.name,Object(g.jsx)("br",{}),t.description]}),Object(g.jsx)(h.a,{className:e.close,style:{visibility:a?"visible":"hidden"}})]})},options:[...x].sort(((e,t)=>{let n=a.indexOf(e);n=-1===n?a.length+x.indexOf(e):n;let i=a.indexOf(t);return i=-1===i?a.length+x.indexOf(t):i,n-i})),getOptionLabel:e=>e.name,renderInput:t=>Object(g.jsx)(f.a,{ref:t.InputProps.ref,inputProps:t.inputProps,autoFocus:!0,className:e.inputBase})})]})]})}const x=[{name:"good first issue",color:"#7057ff",description:"Good for newcomers"},{name:"help wanted",color:"#008672",description:"Extra attention is needed"},{name:"priority: critical",color:"#b60205",description:""},{name:"priority: high",color:"#d93f0b",description:""},{name:"priority: low",color:"#0e8a16",description:""},{name:"priority: medium",color:"#fbca04",description:""},{name:"status: can't reproduce",color:"#fec1c1",description:""},{name:"status: confirmed",color:"#215cea",description:""},{name:"status: duplicate",color:"#cfd3d7",description:"This issue or pull request already exists"},{name:"status: needs information",color:"#fef2c0",description:""},{name:"status: wont do/fix",color:"#eeeeee",description:"This will not be worked on"},{name:"type: bug",color:"#d73a4a",description:"Something isn't working"},{name:"type: discussion",color:"#d4c5f9",description:""},{name:"type: documentation",color:"#006b75",description:""},{name:"type: enhancement",color:"#84b6eb",description:""},{name:"type: epic",color:"#3e4b9e",description:"A theme of work that contain sub-tasks"},{name:"type: feature request",color:"#fbca04",description:"New feature or request"},{name:"type: question",color:"#d876e3",description:"Further information is requested"}]},1759:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport { useTheme, alpha, makeStyles } from '@material-ui/core/styles';\nimport Popper from '@material-ui/core/Popper';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport CloseIcon from '@material-ui/icons/Close';\nimport DoneIcon from '@material-ui/icons/Done';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport ButtonBase from '@material-ui/core/ButtonBase';\nimport InputBase from '@material-ui/core/InputBase';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 221,\n fontSize: 13,\n },\n button: {\n fontSize: 13,\n width: '100%',\n textAlign: 'left',\n paddingBottom: 8,\n color: '#586069',\n fontWeight: 600,\n '&:hover,&:focus': {\n color: '#0366d6',\n },\n '& span': {\n width: '100%',\n },\n '& svg': {\n width: 16,\n height: 16,\n },\n },\n tag: {\n marginTop: 3,\n height: 20,\n padding: '.15em 4px',\n fontWeight: 600,\n lineHeight: '15px',\n borderRadius: 2,\n },\n popper: {\n border: '1px solid rgba(27,31,35,.15)',\n boxShadow: '0 3px 12px rgba(27,31,35,.15)',\n borderRadius: 3,\n width: 300,\n zIndex: 1,\n fontSize: 13,\n color: '#586069',\n backgroundColor: '#f6f8fa',\n },\n header: {\n borderBottom: '1px solid #e1e4e8',\n padding: '8px 10px',\n fontWeight: 600,\n },\n inputBase: {\n padding: 10,\n width: '100%',\n borderBottom: '1px solid #dfe2e5',\n '& input': {\n borderRadius: 4,\n backgroundColor: theme.palette.common.white,\n padding: 8,\n transition: theme.transitions.create(['border-color', 'box-shadow']),\n border: '1px solid #ced4da',\n fontSize: 14,\n '&:focus': {\n boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,\n borderColor: theme.palette.primary.main,\n },\n },\n },\n paper: {\n boxShadow: 'none',\n margin: 0,\n color: '#586069',\n fontSize: 13,\n },\n option: {\n minHeight: 'auto',\n alignItems: 'flex-start',\n padding: 8,\n '&[aria-selected=\"true\"]': {\n backgroundColor: 'transparent',\n },\n '&[data-focus=\"true\"]': {\n backgroundColor: theme.palette.action.hover,\n },\n },\n popperDisablePortal: {\n position: 'relative',\n },\n iconSelected: {\n width: 17,\n height: 17,\n marginRight: 5,\n marginLeft: -2,\n },\n color: {\n width: 14,\n height: 14,\n flexShrink: 0,\n borderRadius: 3,\n marginRight: 8,\n marginTop: 2,\n },\n text: {\n flexGrow: 1,\n },\n close: {\n opacity: 0.6,\n width: 18,\n height: 18,\n },\n}));\n\nexport default function GitHubLabel() {\n const classes = useStyles();\n const [anchorEl, setAnchorEl] = React.useState(null);\n const [value, setValue] = React.useState([labels[1], labels[11]]);\n const [pendingValue, setPendingValue] = React.useState([]);\n const theme = useTheme();\n\n const handleClick = (event) => {\n setPendingValue(value);\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = (event, reason) => {\n if (reason === 'toggleInput') {\n return;\n }\n setValue(pendingValue);\n if (anchorEl) {\n anchorEl.focus();\n }\n setAnchorEl(null);\n };\n\n const open = Boolean(anchorEl);\n const id = open ? 'github-label' : undefined;\n\n return (\n <React.Fragment>\n <div className={classes.root}>\n <ButtonBase\n disableRipple\n className={classes.button}\n aria-describedby={id}\n onClick={handleClick}\n >\n <span>Labels</span>\n <SettingsIcon />\n </ButtonBase>\n {value.map((label) => (\n <div\n key={label.name}\n className={classes.tag}\n style={{\n backgroundColor: label.color,\n color: theme.palette.getContrastText(label.color),\n }}\n >\n {label.name}\n </div>\n ))}\n </div>\n <Popper\n id={id}\n open={open}\n anchorEl={anchorEl}\n placement=\"bottom-start\"\n className={classes.popper}\n >\n <div className={classes.header}>Apply labels to this pull request</div>\n <Autocomplete\n open\n onClose={handleClose}\n multiple\n classes={{\n paper: classes.paper,\n option: classes.option,\n popperDisablePortal: classes.popperDisablePortal,\n }}\n value={pendingValue}\n onChange={(event, newValue) => {\n setPendingValue(newValue);\n }}\n disableCloseOnSelect\n disablePortal\n renderTags={() => null}\n noOptionsText=\"No labels\"\n renderOption={(option, { selected }) => (\n <React.Fragment>\n <DoneIcon\n className={classes.iconSelected}\n style={{ visibility: selected ? 'visible' : 'hidden' }}\n />\n <span className={classes.color} style={{ backgroundColor: option.color }} />\n <div className={classes.text}>\n {option.name}\n <br />\n {option.description}\n </div>\n <CloseIcon\n className={classes.close}\n style={{ visibility: selected ? 'visible' : 'hidden' }}\n />\n </React.Fragment>\n )}\n options={[...labels].sort((a, b) => {\n // Display the selected labels first.\n let ai = value.indexOf(a);\n ai = ai === -1 ? value.length + labels.indexOf(a) : ai;\n let bi = value.indexOf(b);\n bi = bi === -1 ? value.length + labels.indexOf(b) : bi;\n return ai - bi;\n })}\n getOptionLabel={(option) => option.name}\n renderInput={(params) => (\n <InputBase\n ref={params.InputProps.ref}\n inputProps={params.inputProps}\n autoFocus\n className={classes.inputBase}\n />\n )}\n />\n </Popper>\n </React.Fragment>\n );\n}\n\n// From https://github.com/abdonrd/github-labels\nconst labels = [\n {\n name: 'good first issue',\n color: '#7057ff',\n description: 'Good for newcomers',\n },\n {\n name: 'help wanted',\n color: '#008672',\n description: 'Extra attention is needed',\n },\n {\n name: 'priority: critical',\n color: '#b60205',\n description: '',\n },\n {\n name: 'priority: high',\n color: '#d93f0b',\n description: '',\n },\n {\n name: 'priority: low',\n color: '#0e8a16',\n description: '',\n },\n {\n name: 'priority: medium',\n color: '#fbca04',\n description: '',\n },\n {\n name: \"status: can't reproduce\",\n color: '#fec1c1',\n description: '',\n },\n {\n name: 'status: confirmed',\n color: '#215cea',\n description: '',\n },\n {\n name: 'status: duplicate',\n color: '#cfd3d7',\n description: 'This issue or pull request already exists',\n },\n {\n name: 'status: needs information',\n color: '#fef2c0',\n description: '',\n },\n {\n name: 'status: wont do/fix',\n color: '#eeeeee',\n description: 'This will not be worked on',\n },\n {\n name: 'type: bug',\n color: '#d73a4a',\n description: \"Something isn't working\",\n },\n {\n name: 'type: discussion',\n color: '#d4c5f9',\n description: '',\n },\n {\n name: 'type: documentation',\n color: '#006b75',\n description: '',\n },\n {\n name: 'type: enhancement',\n color: '#84b6eb',\n description: '',\n },\n {\n name: 'type: epic',\n color: '#3e4b9e',\n description: 'A theme of work that contain sub-tasks',\n },\n {\n name: 'type: feature request',\n color: '#fbca04',\n description: 'New feature or request',\n },\n {\n name: 'type: question',\n color: '#d876e3',\n description: 'Further information is requested',\n },\n];\n"},1760:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return y}));n(0);var a=n(1096),i=n(2716),r=n(400),l=n.n(r),o=n(359),s=n.n(o),c=n(1);function y(){return Object(c.jsx)(i.a,{id:"highlights-demo",style:{width:300},options:d,getOptionLabel:e=>e.title,renderInput:e=>Object(c.jsx)(a.a,{...e,label:"Highlights",variant:"outlined",margin:"normal"}),renderOption:(e,t)=>{let{inputValue:n}=t;const a=s()(e.title,n),i=l()(e.title,a);return Object(c.jsx)("div",{children:i.map(((e,t)=>Object(c.jsx)("span",{style:{fontWeight:e.highlight?700:400},children:e.text},t)))})}})}const d=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1761:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport parse from 'autosuggest-highlight/parse';\nimport match from 'autosuggest-highlight/match';\n\nexport default function Highlights() {\n return (\n <Autocomplete\n id=\"highlights-demo\"\n style={{ width: 300 }}\n options={top100Films}\n getOptionLabel={(option) => option.title}\n renderInput={(params) => (\n <TextField {...params} label=\"Highlights\" variant=\"outlined\" margin=\"normal\" />\n )}\n renderOption={(option, { inputValue }) => {\n const matches = match(option.title, inputValue);\n const parts = parse(option.title, matches);\n\n return (\n <div>\n {parts.map((part, index) => (\n <span key={index} style={{ fontWeight: part.highlight ? 700 : 400 }}>\n {part.text}\n </span>\n ))}\n </div>\n );\n }}\n />\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1762:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));n(0);var a=n(1096),i=n(2525),r=n(2716),l=n(1);const o=Object(i.a)({matchFrom:"start",stringify:e=>e.title});function s(){return Object(l.jsx)(r.a,{id:"filter-demo",options:c,getOptionLabel:e=>e.title,filterOptions:o,style:{width:300},renderInput:e=>Object(l.jsx)(a.a,{...e,label:"Custom filter",variant:"outlined"})})}const c=[{title:"The Shawshank Redemption",year:1994},{title:"The Godfather",year:1972},{title:"The Godfather: Part II",year:1974},{title:"The Dark Knight",year:2008},{title:"12 Angry Men",year:1957},{title:"Schindler's List",year:1993},{title:"Pulp Fiction",year:1994},{title:"The Lord of the Rings: The Return of the King",year:2003},{title:"The Good, the Bad and the Ugly",year:1966},{title:"Fight Club",year:1999},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980},{title:"Forrest Gump",year:1994},{title:"Inception",year:2010},{title:"The Lord of the Rings: The Two Towers",year:2002},{title:"One Flew Over the Cuckoo's Nest",year:1975},{title:"Goodfellas",year:1990},{title:"The Matrix",year:1999},{title:"Seven Samurai",year:1954},{title:"Star Wars: Episode IV - A New Hope",year:1977},{title:"City of God",year:2002},{title:"Se7en",year:1995},{title:"The Silence of the Lambs",year:1991},{title:"It's a Wonderful Life",year:1946},{title:"Life Is Beautiful",year:1997},{title:"The Usual Suspects",year:1995},{title:"L\xe9on: The Professional",year:1994},{title:"Spirited Away",year:2001},{title:"Saving Private Ryan",year:1998},{title:"Once Upon a Time in the West",year:1968},{title:"American History X",year:1998},{title:"Interstellar",year:2014},{title:"Casablanca",year:1942},{title:"City Lights",year:1931},{title:"Psycho",year:1960},{title:"The Green Mile",year:1999},{title:"The Intouchables",year:2011},{title:"Modern Times",year:1936},{title:"Raiders of the Lost Ark",year:1981},{title:"Rear Window",year:1954},{title:"The Pianist",year:2002},{title:"The Departed",year:2006},{title:"Terminator 2: Judgment Day",year:1991},{title:"Back to the Future",year:1985},{title:"Whiplash",year:2014},{title:"Gladiator",year:2e3},{title:"Memento",year:2e3},{title:"The Prestige",year:2006},{title:"The Lion King",year:1994},{title:"Apocalypse Now",year:1979},{title:"Alien",year:1979},{title:"Sunset Boulevard",year:1950},{title:"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",year:1964},{title:"The Great Dictator",year:1940},{title:"Cinema Paradiso",year:1988},{title:"The Lives of Others",year:2006},{title:"Grave of the Fireflies",year:1988},{title:"Paths of Glory",year:1957},{title:"Django Unchained",year:2012},{title:"The Shining",year:1980},{title:"WALL\xb7E",year:2008},{title:"American Beauty",year:1999},{title:"The Dark Knight Rises",year:2012},{title:"Princess Mononoke",year:1997},{title:"Aliens",year:1986},{title:"Oldboy",year:2003},{title:"Once Upon a Time in America",year:1984},{title:"Witness for the Prosecution",year:1957},{title:"Das Boot",year:1981},{title:"Citizen Kane",year:1941},{title:"North by Northwest",year:1959},{title:"Vertigo",year:1958},{title:"Star Wars: Episode VI - Return of the Jedi",year:1983},{title:"Reservoir Dogs",year:1992},{title:"Braveheart",year:1995},{title:"M",year:1931},{title:"Requiem for a Dream",year:2e3},{title:"Am\xe9lie",year:2001},{title:"A Clockwork Orange",year:1971},{title:"Like Stars on Earth",year:2007},{title:"Taxi Driver",year:1976},{title:"Lawrence of Arabia",year:1962},{title:"Double Indemnity",year:1944},{title:"Eternal Sunshine of the Spotless Mind",year:2004},{title:"Amadeus",year:1984},{title:"To Kill a Mockingbird",year:1962},{title:"Toy Story 3",year:2010},{title:"Logan",year:2017},{title:"Full Metal Jacket",year:1987},{title:"Dangal",year:2016},{title:"The Sting",year:1973},{title:"2001: A Space Odyssey",year:1968},{title:"Singin' in the Rain",year:1952},{title:"Toy Story",year:1995},{title:"Bicycle Thieves",year:1948},{title:"The Kid",year:1921},{title:"Inglourious Basterds",year:2009},{title:"Snatch",year:2e3},{title:"3 Idiots",year:2009},{title:"Monty Python and the Holy Grail",year:1975}]},1763:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';\n\nconst filterOptions = createFilterOptions({\n matchFrom: 'start',\n stringify: (option) => option.title,\n});\n\nexport default function Filter() {\n return (\n <Autocomplete\n id=\"filter-demo\"\n options={top100Films}\n getOptionLabel={(option) => option.title}\n filterOptions={filterOptions}\n style={{ width: 300 }}\n renderInput={(params) => <TextField {...params} label=\"Custom filter\" variant=\"outlined\" />}\n />\n );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n { title: 'The Shawshank Redemption', year: 1994 },\n { title: 'The Godfather', year: 1972 },\n { title: 'The Godfather: Part II', year: 1974 },\n { title: 'The Dark Knight', year: 2008 },\n { title: '12 Angry Men', year: 1957 },\n { title: \"Schindler's List\", year: 1993 },\n { title: 'Pulp Fiction', year: 1994 },\n { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n { title: 'The Good, the Bad and the Ugly', year: 1966 },\n { title: 'Fight Club', year: 1999 },\n { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n { title: 'Forrest Gump', year: 1994 },\n { title: 'Inception', year: 2010 },\n { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n { title: 'Goodfellas', year: 1990 },\n { title: 'The Matrix', year: 1999 },\n { title: 'Seven Samurai', year: 1954 },\n { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n { title: 'City of God', year: 2002 },\n { title: 'Se7en', year: 1995 },\n { title: 'The Silence of the Lambs', year: 1991 },\n { title: \"It's a Wonderful Life\", year: 1946 },\n { title: 'Life Is Beautiful', year: 1997 },\n { title: 'The Usual Suspects', year: 1995 },\n { title: 'L\xe9on: The Professional', year: 1994 },\n { title: 'Spirited Away', year: 2001 },\n { title: 'Saving Private Ryan', year: 1998 },\n { title: 'Once Upon a Time in the West', year: 1968 },\n { title: 'American History X', year: 1998 },\n { title: 'Interstellar', year: 2014 },\n { title: 'Casablanca', year: 1942 },\n { title: 'City Lights', year: 1931 },\n { title: 'Psycho', year: 1960 },\n { title: 'The Green Mile', year: 1999 },\n { title: 'The Intouchables', year: 2011 },\n { title: 'Modern Times', year: 1936 },\n { title: 'Raiders of the Lost Ark', year: 1981 },\n { title: 'Rear Window', year: 1954 },\n { title: 'The Pianist', year: 2002 },\n { title: 'The Departed', year: 2006 },\n { title: 'Terminator 2: Judgment Day', year: 1991 },\n { title: 'Back to the Future', year: 1985 },\n { title: 'Whiplash', year: 2014 },\n { title: 'Gladiator', year: 2000 },\n { title: 'Memento', year: 2000 },\n { title: 'The Prestige', year: 2006 },\n { title: 'The Lion King', year: 1994 },\n { title: 'Apocalypse Now', year: 1979 },\n { title: 'Alien', year: 1979 },\n { title: 'Sunset Boulevard', year: 1950 },\n { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },\n { title: 'The Great Dictator', year: 1940 },\n { title: 'Cinema Paradiso', year: 1988 },\n { title: 'The Lives of Others', year: 2006 },\n { title: 'Grave of the Fireflies', year: 1988 },\n { title: 'Paths of Glory', year: 1957 },\n { title: 'Django Unchained', year: 2012 },\n { title: 'The Shining', year: 1980 },\n { title: 'WALL\xb7E', year: 2008 },\n { title: 'American Beauty', year: 1999 },\n { title: 'The Dark Knight Rises', year: 2012 },\n { title: 'Princess Mononoke', year: 1997 },\n { title: 'Aliens', year: 1986 },\n { title: 'Oldboy', year: 2003 },\n { title: 'Once Upon a Time in America', year: 1984 },\n { title: 'Witness for the Prosecution', year: 1957 },\n { title: 'Das Boot', year: 1981 },\n { title: 'Citizen Kane', year: 1941 },\n { title: 'North by Northwest', year: 1959 },\n { title: 'Vertigo', year: 1958 },\n { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n { title: 'Reservoir Dogs', year: 1992 },\n { title: 'Braveheart', year: 1995 },\n { title: 'M', year: 1931 },\n { title: 'Requiem for a Dream', year: 2000 },\n { title: 'Am\xe9lie', year: 2001 },\n { title: 'A Clockwork Orange', year: 1971 },\n { title: 'Like Stars on Earth', year: 2007 },\n { title: 'Taxi Driver', year: 1976 },\n { title: 'Lawrence of Arabia', year: 1962 },\n { title: 'Double Indemnity', year: 1944 },\n { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n { title: 'Amadeus', year: 1984 },\n { title: 'To Kill a Mockingbird', year: 1962 },\n { title: 'Toy Story 3', year: 2010 },\n { title: 'Logan', year: 2017 },\n { title: 'Full Metal Jacket', year: 1987 },\n { title: 'Dangal', year: 2016 },\n { title: 'The Sting', year: 1973 },\n { title: '2001: A Space Odyssey', year: 1968 },\n { title: \"Singin' in the Rain\", year: 1952 },\n { title: 'Toy Story', year: 1995 },\n { title: 'Bicycle Thieves', year: 1948 },\n { title: 'The Kid', year: 1921 },\n { title: 'Inglourious Basterds', year: 2009 },\n { title: 'Snatch', year: 2000 },\n { title: '3 Idiots', year: 2009 },\n { title: 'Monty Python and the Holy Grail', year: 1975 },\n];\n"},1764:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return x}));var a=n(0),i=n.n(a),r=n(1096),l=n(2716),o=n(1042),s=n(1107),c=n(43),y=n(1072),d=n(1436),h=n(194),p=n(1);function u(e){const{data:t,index:n,style:a}=e;return i.a.cloneElement(t[n],{style:{...a,top:a.top+8}})}const m=i.a.createContext({}),b=i.a.forwardRef(((e,t)=>{const n=i.a.useContext(m);return Object(p.jsx)("div",{ref:t,...e,...n})}));const f=i.a.forwardRef((function(e,t){const{children:n,...a}=e,r=i.a.Children.toArray(n),l=Object(c.a)(),y=Object(o.a)(l.breakpoints.up("sm"),{noSsr:!0}),h=r.length,f=y?36:48,g=e=>i.a.isValidElement(e)&&e.type===s.a?48:f,T=function(e){const t=i.a.useRef(null);return i.a.useEffect((()=>{null!=t.current&&t.current.resetAfterIndex(0,!0)}),[e]),t}(h);return Object(p.jsx)("div",{ref:t,children:Object(p.jsx)(m.Provider,{value:a,children:Object(p.jsx)(d.b,{itemData:r,height:(h>8?8*f:r.map(g).reduce(((e,t)=>e+t),0))+16,width:"100%",ref:T,outerElementType:b,innerElementType:"ul",itemSize:e=>g(r[e]),overscanCount:5,itemCount:h,children:u})})})}));const g=Object(y.a)({listbox:{boxSizing:"border-box","& ul":{padding:0,margin:0}}}),T=Array.from(new Array(1e4)).map((()=>function(e){const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let n="";for(let a=0;a<e;a+=1)n+=t.charAt(Math.floor(62*Math.random()));return n}(10+Math.ceil(20*Math.random())))).sort(((e,t)=>e.toUpperCase().localeCompare(t.toUpperCase()))),S=e=>[Object(p.jsx)(s.a,{component:"div",children:e.group},e.key),e.children];function x(){const e=g();return Object(p.jsx)(l.a,{id:"virtualize-demo",style:{width:300},disableListWrap:!0,classes:e,ListboxComponent:f,renderGroup:S,options:T,groupBy:e=>e[0].toUpperCase(),renderInput:e=>Object(p.jsx)(r.a,{...e,variant:"outlined",label:"10,000 options"}),renderOption:e=>Object(p.jsx)(h.a,{noWrap:!0,children:e})})}},1765:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport { useTheme, makeStyles } from '@material-ui/core/styles';\nimport { VariableSizeList } from 'react-window';\nimport { Typography } from '@material-ui/core';\n\nconst LISTBOX_PADDING = 8; // px\n\nfunction renderRow(props) {\n const { data, index, style } = props;\n return React.cloneElement(data[index], {\n style: {\n ...style,\n top: style.top + LISTBOX_PADDING,\n },\n });\n}\n\nconst OuterElementContext = React.createContext({});\n\nconst OuterElementType = React.forwardRef((props, ref) => {\n const outerProps = React.useContext(OuterElementContext);\n return <div ref={ref} {...props} {...outerProps} />;\n});\n\nfunction useResetCache(data) {\n const ref = React.useRef(null);\n React.useEffect(() => {\n if (ref.current != null) {\n ref.current.resetAfterIndex(0, true);\n }\n }, [data]);\n return ref;\n}\n\n// Adapter for react-window\nconst ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {\n const { children, ...other } = props;\n const itemData = React.Children.toArray(children);\n const theme = useTheme();\n const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });\n const itemCount = itemData.length;\n const itemSize = smUp ? 36 : 48;\n\n const getChildSize = (child) => {\n if (React.isValidElement(child) && child.type === ListSubheader) {\n return 48;\n }\n\n return itemSize;\n };\n\n const getHeight = () => {\n if (itemCount > 8) {\n return 8 * itemSize;\n }\n return itemData.map(getChildSize).reduce((a, b) => a + b, 0);\n };\n\n const gridRef = useResetCache(itemCount);\n\n return (\n <div ref={ref}>\n <OuterElementContext.Provider value={other}>\n <VariableSizeList\n itemData={itemData}\n height={getHeight() + 2 * LISTBOX_PADDING}\n width=\"100%\"\n ref={gridRef}\n outerElementType={OuterElementType}\n innerElementType=\"ul\"\n itemSize={(index) => getChildSize(itemData[index])}\n overscanCount={5}\n itemCount={itemCount}\n >\n {renderRow}\n </VariableSizeList>\n </OuterElementContext.Provider>\n </div>\n );\n});\n\nListboxComponent.propTypes = {\n children: PropTypes.node,\n};\n\nfunction random(length) {\n const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n let result = '';\n\n for (let i = 0; i < length; i += 1) {\n result += characters.charAt(Math.floor(Math.random() * characters.length));\n }\n\n return result;\n}\n\nconst useStyles = makeStyles({\n listbox: {\n boxSizing: 'border-box',\n '& ul': {\n padding: 0,\n margin: 0,\n },\n },\n});\n\nconst OPTIONS = Array.from(new Array(10000))\n .map(() => random(10 + Math.ceil(Math.random() * 20)))\n .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase()));\n\nconst renderGroup = (params) => [\n <ListSubheader key={params.key} component=\"div\">\n {params.group}\n </ListSubheader>,\n params.children,\n];\n\nexport default function Virtualize() {\n const classes = useStyles();\n\n return (\n <Autocomplete\n id=\"virtualize-demo\"\n style={{ width: 300 }}\n disableListWrap\n classes={classes}\n ListboxComponent={ListboxComponent}\n renderGroup={renderGroup}\n options={OPTIONS}\n groupBy={(option) => option[0].toUpperCase()}\n renderInput={(params) => <TextField {...params} variant=\"outlined\" label=\"10,000 options\" />}\n renderOption={(option) => <Typography noWrap>{option}</Typography>}\n />\n );\n}\n"},2560:function(e,t,n){"use strict";n.r(t);var a=n(1130),i=n(118),r=n(1098),l=n(1090),o=n(194),s=n(1072),c=n(1);const y=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return y(),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)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/autocomplete",target:"_blank",role:"button",children:[Object(c.jsx)(l.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(c.jsx)(o.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Autocomplete"}),Object(c.jsx)(o.a,{className:"description",children:"The autocomplete is a normal text input enhanced by a panel of suggested options."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"The widget is useful for setting the value of a single-line textbox in one of two types of scenarios:"}),Object(c.jsxs)("ol",{children:[Object(c.jsxs)("li",{children:["The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: ",Object(c.jsx)("a",{href:"#combo-box",children:"combo box"}),"."]}),Object(c.jsxs)("li",{children:["The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: ",Object(c.jsx)("a",{href:"#free-solo",children:"free solo"}),"."]})]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:'It\'s meant to be an improved version of the "react-select" and "downshift" packages.'}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Combo box"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"The value must be chosen from a predefined set of allowed values."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1711).default,raw:n(1712)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Playground"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"Each of the following examples demonstrate one feature of the Autocomplete component."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1713).default,raw:n(1714)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Country select"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"Choose one of the 248 countries."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1715).default,raw:n(1716)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Controllable states"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"The component has two states that can be controlled:"}),Object(c.jsxs)("ol",{children:[Object(c.jsxs)("li",{children:['the "value" state with the ',Object(c.jsx)("code",{children:"value"}),"/",Object(c.jsx)("code",{children:"onChange"})," props combination. This state represents the value selected by the user, for instance when pressing ",Object(c.jsx)("kbd",{children:"Enter"}),"."]}),Object(c.jsxs)("li",{children:['the "input value" state with the ',Object(c.jsx)("code",{children:"inputValue"}),"/",Object(c.jsx)("code",{children:"onInputChange"})," props combination. This state represents the value displayed in the textbox."]})]}),Object(c.jsx)("blockquote",{children:Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"\u26a0\ufe0f These two state are isolated, they should be controlled independently."})}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1717).default,raw:n(1718)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Free solo"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["Set ",Object(c.jsx)("code",{children:"freeSolo"})," to true so the textbox can contain any arbitrary value."]}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Search input"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["The prop is designed to cover the primary use case of a ",Object(c.jsx)("strong",{children:"search input"})," with suggestions, e.g. Google search or react-autowhatever."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1719).default,raw:n(1720)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Creatable"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["If you intend to use this mode for a ",Object(c.jsx)("a",{href:"#combo-box",children:"combo box"})," like experience (an enhanced version of a select element) we recommend setting:"]}),Object(c.jsxs)("ul",{children:[Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"selectOnFocus"})," to helps the user clear the selected value."]}),Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"clearOnBlur"})," to helps the user to enter a new value."]}),Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"handleHomeEndKeys"})," to move focus inside the popup with the ",Object(c.jsx)("kbd",{children:"Home"})," and"," ",Object(c.jsx)("kbd",{children:"End"})," keys."]}),Object(c.jsxs)("li",{children:["A last option, for instance ",Object(c.jsx)("code",{children:'Add "YOUR SEARCH"'}),"."]})]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1721).default,raw:n(1722)})}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"You could also display a dialog when the user wants to add a new value."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1723).default,raw:n(1724)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Grouped"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1725).default,raw:n(1726)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Disabled options"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1727).default,raw:n(1728)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:Object(c.jsx)("code",{children:"useAutocomplete"})}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["For advanced customization use cases, we expose a headless ",Object(c.jsx)("code",{children:"useAutocomplete()"})," ","hook. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component uses this hook internally."]}),Object(c.jsx)(i.a,{component:"pre",className:"language-jsx",children:" \nimport useAutocomplete from '@material-ui/lab/useAutocomplete';\n"}),Object(c.jsx)("ul",{children:Object(c.jsxs)("li",{children:["\ud83d\udce6 ",Object(c.jsx)("a",{href:"/size-snapshot",children:"4.5 kB gzipped"}),"."]})}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1729).default,raw:n(1730)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Customized hook"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1731).default,raw:n(1734)})}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["Head to the ",Object(c.jsx)("a",{href:"#customized-autocomplete",children:"Customized Autocomplete"})," section for a customization example with the ",Object(c.jsx)("code",{children:"Autocomplete"})," component instead of the hook."]}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Asynchronous requests"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1735).default,raw:n(1737)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Google Maps place"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"A customized UI for Google Maps Places Autocomplete."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1738).default,raw:n(1745)})}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["For this demo, we need to load the"," ",Object(c.jsx)("a",{href:"https://developers.google.com/maps/documentation/javascript/tutorial",children:"Google Maps JavaScript"})," ","API."]}),Object(c.jsx)("blockquote",{children:Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"\u26a0\ufe0f Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account."})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Multiple values"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"Also known as tags, the user is allowed to enter more than one value."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1746).default,raw:n(1747)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Fixed options"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1748).default,raw:n(1749)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Checkboxes"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1750).default,raw:n(1751)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Limit tags"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["You can use the ",Object(c.jsx)("code",{children:"limitTags"})," prop to limit the number of displayed options when not focused."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1752).default,raw:n(1753)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Sizes"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["Fancy smaller inputs? Use the ",Object(c.jsx)("code",{children:"size"})," prop."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1754).default,raw:n(1755)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customizations"}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Custom input"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["The ",Object(c.jsx)("code",{children:"renderInput"})," prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the ",Object(c.jsx)("code",{children:"ref"})," and ",Object(c.jsx)("code",{children:"inputProps"})," keys."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1756).default,raw:n(1757)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"GitHub's picker"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"This demo reproduces the GitHub's label picker:"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1758).default,raw:n(1759)})}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["Head to the ",Object(c.jsx)("a",{href:"#customized-hook",children:"Customized hook"})," section for a customization example with the ",Object(c.jsx)("code",{children:"useAutocomplete"})," hook instead of the component."]}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Highlights"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["The following demo relies on"," ",Object(c.jsx)("a",{href:"https://github.com/moroshko/autosuggest-highlight",children:"autosuggest-highlight"}),", a small (1 kB) utility for highlighting text in autosuggest and autocomplete components."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1760).default,raw:n(1761)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Custom filter"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["The component exposes a factory to create a filter method that can provided to the"," ",Object(c.jsx)("code",{children:"filterOptions"})," prop. You can use it to change the default option filter behavior."]}),Object(c.jsx)(i.a,{component:"pre",className:"language-js",children:" \nimport { createFilterOptions } from '@material-ui/lab/Autocomplete';\n"}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:Object(c.jsx)("code",{children:"createFilterOptions(config) => filterOptions"})}),Object(c.jsx)(o.a,{className:"text-16 mt-32 mb-8",component:"h4",children:"Arguments"}),Object(c.jsx)("ol",{children:Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"config"})," (",Object(c.jsx)("em",{children:"Object"})," [optional]):",Object(c.jsxs)("ul",{children:[Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"config.ignoreAccents"})," (",Object(c.jsx)("em",{children:"Boolean"})," [optional]): Defaults to"," ",Object(c.jsx)("code",{children:"true"}),". Remove diacritics."]}),Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"config.ignoreCase"})," (",Object(c.jsx)("em",{children:"Boolean"})," [optional]): Defaults to"," ",Object(c.jsx)("code",{children:"true"}),". Lowercase everything."]}),Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"config.limit"})," (",Object(c.jsx)("em",{children:"Number"})," [optional]): Default to null. Limit the number of suggested options to be shown. For example, if ",Object(c.jsx)("code",{children:"config.limit"})," is"," ",Object(c.jsx)("code",{children:"100"}),", only the first ",Object(c.jsx)("code",{children:"100"})," matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up."]}),Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"config.matchFrom"})," (",Object(c.jsx)("em",{children:"'any' | 'start'"})," [optional]): Defaults to ",Object(c.jsx)("code",{children:"'any'"}),"."]}),Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"config.stringify"})," (",Object(c.jsx)("em",{children:"Func"})," [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment."]}),Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"config.trim"})," (",Object(c.jsx)("em",{children:"Boolean"})," [optional]): Defaults to ",Object(c.jsx)("code",{children:"false"}),". Remove trailing spaces."]})]})]})}),Object(c.jsx)(o.a,{className:"text-16 mt-32 mb-8",component:"h4",children:"Returns"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:[Object(c.jsx)("code",{children:"filterOptions"}),": the returned filter method can be provided directly to the"," ",Object(c.jsx)("code",{children:"filterOptions"})," prop of the ",Object(c.jsx)("code",{children:"Autocomplete"})," component, or the parameter of the same name for the hook."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"In the following demo, the options need to start with the query prefix:"}),Object(c.jsx)(i.a,{component:"pre",className:"language-js",children:" \nconst filterOptions = createFilterOptions({\n matchFrom: 'start',\n stringify: option => option.title,\n});\n\n<Autocomplete filterOptions={filterOptions} />\n"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1762).default,raw:n(1763)})}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Advanced"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["For richer filtering mechanisms, like fuzzy matching, it's recommended to look at"," ",Object(c.jsx)("a",{href:"https://github.com/kentcdodds/match-sorter",children:"match-sorter"}),". For instance:"]}),Object(c.jsx)(i.a,{component:"pre",className:"language-jsx",children:" \nimport matchSorter from 'match-sorter';\n\nconst filterOptions = (options, { inputValue }) =>\n matchSorter(options, inputValue);\n\n<Autocomplete filterOptions={filterOptions} />\n"}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Virtualization"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["Search within 10,000 randomly generated options. The list is virtualized thanks to"," ",Object(c.jsx)("a",{href:"https://github.com/bvaughn/react-window",children:"react-window"}),"."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1764).default,raw:n(1765)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Limitations"}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"autocomplete/autofill"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component."}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["By default, the component disable the ",Object(c.jsx)("strong",{children:"autocomplete"})," feature (remembering what the user has typed for a given field in a previous session) with the"," ",Object(c.jsx)("code",{children:'autoComplete="off"'})," attribute."]}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["However, in addition to remembering past entered values, the browser might also propose"," ",Object(c.jsx)("strong",{children:"autofill"})," suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following:"]}),Object(c.jsxs)("ul",{children:[Object(c.jsx)("li",{children:Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["Name the input without leaking any information the browser can use. e.g."," ",Object(c.jsx)("code",{children:'id="field1"'})," instead of ",Object(c.jsx)("code",{children:'id="country"'}),". If you leave the id empty, the component uses a random id."]})}),Object(c.jsxs)("li",{children:[Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["Set ",Object(c.jsx)("code",{children:'autoComplete="new-password"'}),":"]}),Object(c.jsx)(i.a,{component:"pre",className:"language-jsx",children:" \n<TextField\n {...params}\n inputProps={{\n ...params.inputProps,\n autoComplete: 'new-password',\n\n/>\n"})]})]}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"iOS VoiceOver"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["VoiceOver on iOS Safari doesn't support the ",Object(c.jsx)("code",{children:"aria-owns"})," attribute very well. You can work around the issue with the ",Object(c.jsx)("code",{children:"disablePortal"})," prop."]}),Object(c.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"ListboxComponent"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["If you provide a custom ",Object(c.jsx)("code",{children:"ListboxComponent"})," prop, you need to make sure that the intended scroll container has the ",Object(c.jsx)("code",{children:"role"})," attribute set to ",Object(c.jsx)("code",{children:"listbox"}),". This ensures the correct behavior of the scroll, for example when using the keyboard to navigate."]}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(c.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#combobox",children:"https://www.w3.org/TR/wai-aria-practices/#combobox"}),")"]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices."})]})}}}]);
Zerion Mini Shell 1.0