npm - @zohodesk/react-cli - Versions diffs - 1.1.14-kubernetes → 1.1.15-exp.1 - Mend

@zohodesk/react-cli 1.1.14-kubernetes → 1.1.15-exp.1

Files changed (510) hide show

package/templates/docs/index.html CHANGED Viewed

@@ -1,1501 +1,1665 @@
-<!DOCTYPE html>
-<html dir="ltr">
-<head>
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel=stylesheet href="./css/style.css">
-	<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Lemonada|Lora|Open+Sans+Condensed:300|PT+Sans+Narrow|Slabo+27px|Source+Sans+Pro"
-		rel="stylesheet" />
-	<link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON" rel="SHORTCUT ICON" />
-	<script src="./js/codemirror.js"></script>
-	<script src="./js/javascript.js"></script>
-	<script src="./js/active-line.js"></script>
-	<script src="./js/matchbrackets.js"></script>
-	<link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
-	<title>Zoho Desk - React Components</title>
-	<script>
-	function selectText(containerid) {
-		if (document.selection) {
-			// IE
-			var range = document.body.createTextRange();
-			range.moveToElementText(document.getElementById(containerid));
-			range.select();
-			document.execCommand('copy');
-		} else if (window.getSelection) {
-			var range = document.createRange();
-			range.selectNode(document.getElementById(containerid));
-			window.getSelection().removeAllRanges();
-			window.getSelection().addRange(range);
-			document.execCommand('copy');
-		}
-	}
-	</script>
-</head>
-<body>
-	<div id="react"></div>
-	<div class="iframeCentering">
-		<span class="posAb">Zoho Desk - React Components</span>
-		<iframe src="about:blank" id="ifm"></iframe>
-	</div>
-	<script src="/docs/js/babel.min.js"></script>
-	<script type="text/babel">
-		window.loadDOC = function(Component, mdata) {
-			window.RTLmode = false;
-			var ReactDOM = Component.ReactDOM;
-			window.React = Component.React;
-			window.ReactDOM = Component.ReactDOM;
-			var React= Component.React;
-			class Doc extends React.Component {
-				constructor(props) {
-					super(props);
-					let folderNameDefault='';
-					let groupNameDefault='';
-					(location.hash && props.componentObj )? Object.keys(props.componentObj).map((flName)=>{
-						let fname=props.componentObj[flName]
-						Object.keys(fname).map((grName)=>{
-							if((fname[grName].indexOf(location.hash.substring(1)) > -1)){
-								folderNameDefault=flName;
-								groupNameDefault=grName;
-							}
-						})
-					}):null
-					if(folderNameDefault== '' && groupNameDefault==''){
-						folderNameDefault='Global'
-						groupNameDefault='General'
-					}
-					this.state = {
-						componentObj:props.componentObj,
-						duplicates:props.duplicates,
-						search: '',
-						selectedComponent: location.hash,
-						Components: Component,
-						//popUp: '',
-						fullScreenSrc: '',
-						viewGroup:groupNameDefault,
-						viewFolder:folderNameDefault,
-						moreInform:false,
-						infoTab:'component',
-						changeset:null,
-						version:'',
-						frameWidth:'100%',
-						isMenuClose:false,
-						isRTL:false,
-						isRem:true,
-						isRemOpen:false,
-						rootSize:16,
-						pixelSize:16,
-						resultRem:'1rem',
-						responsiveMenu:false,
-						device:'LAPTOP_M',
-						compList:'Unused',
-						windowSize:{height:0,width:0},
-						isEditMode:false
-					};
-					this.search = this.search.bind(this);
-					this.clear = this.clear.bind(this);
-					this.toggleRemContainer = this.toggleRemContainer.bind(this);
-					this.hashChange = this.hashChange.bind(this);
-					//this.popupToggle = this.popupToggle.bind(this);
-					//this.popupToggleDoc = this.popupToggleDoc.bind(this);
-					this.removeClose = this.removeClose.bind(this);
-					//this.fullScreenSrcToggle = this.fullScreenSrcToggle.bind(this);
-					this.toggleFolder = this.toggleFolder.bind(this);
-					this.toggleGroup = this.toggleGroup.bind(this);
-					this.onTabinfo = this.onTabinfo.bind(this);
-					this.codeview = this.codeview.bind(this);
-					this.reloadFrame = this.reloadFrame.bind(this);
-					this.getFileDetails = this.getFileDetails.bind(this);
-					this.iframeSize = this.iframeSize.bind(this);
-					this.menuOpen = this.menuOpen.bind(this);
-					this.onRtlView=this.onRtlView.bind(this);
-					this.onREMView=this.onREMView.bind(this);
-					this.toggleEditMode=this.toggleEditMode.bind(this);
-					this.calculatePxToRem=this.calculatePxToRem.bind(this);
-					this.calculateRemToPx=this.calculateRemToPx.bind(this);
-					this.onChangeRem=this.onChangeRem.bind(this);
-					this.onChangePixel=this.onChangePixel.bind(this);
-					this.onChangeBase=this.onChangeBase.bind(this);
-					this.responseMenu=this.responseMenu.bind(this);
-					this.getWindow=this.getWindow.bind(this);
-					this.fullView=this.fullView.bind(this);
-					this.handleURL=this.handleURL.bind(this);
-					this.compList=this.compList.bind(this);
-					this.unusedList=this.unusedList.bind(this);
-				}
-				fullView(){
-					this.setState({isMenuClose:!this.state.isMenuClose})
-				}
-				toggleEditMode(){
-					var iframe=document.getElementById('componentIframe');
-					if(iframe){
-					var currentMode=iframe.contentDocument.documentElement.getAttribute('contenteditable');
-						if(currentMode=="true")
-						{
-							iframe.contentDocument.documentElement.setAttribute('contenteditable',"false");
-							this.setState({isEditMode:false});
-						}
-						else {
-							iframe.contentDocument.documentElement.setAttribute('contenteditable',"true");
-							this.setState({isEditMode:true});
-						}}
-				}
-				compList(e){
-					if(e == this.state.compList){
-					}
-					else if(e !== this.state.compList){
-						this.setState({compList:e})
-					}
-					else{
-						this.setState({compList:''})
-					}
-				}
-				getWindow(){
-					var iframe=document.getElementById('componentIframe')
-					if(iframe){
-						this.setState({windowSize:{height:iframe.offsetHeight,width:iframe.offsetWidth}})
-					}
-				}
-				responseMenu(){
-					this.setState({ responsiveMenu:!this.state.responsiveMenu})
-				}
-				toggleRemContainer(){
-					this.setState({  isRemOpen: !this.state.isRemOpen });
-				}
-				calculatePxToRem(){
-					let result=Number((this.state.pixelSize/this.state.rootSize).toFixed(4));
-					this.setState({resultRem:result+"rem"});
-				}
-				calculateRemToPx(){
-					let result=Number(((Number(parseFloat(this.state.resultRem))*this.state.rootSize).toFixed(4)));
-					this.setState({pixelSize:result});
-				}
-				onChangeBase(e) {
-					let result=Number((this.state.pixelSize/e.target.value ).toFixed(4));
-					this.setState({ rootSize: e.target.value,resultRem:result+"rem" });
-				}
-				onChangePixel(e) {
-					let result=Number((e.target.value/this.state.rootSize).toFixed(4));
-					this.setState({ pixelSize: e.target.value ,resultRem:result+"rem" });
-				}
-				onChangeRem(e) {
-					let result=Number(((Number(parseFloat(e.target.value))*this.state.rootSize).toFixed(4)));
-					this.setState({ resultRem: e.target.value,pixelSize:result});
-				}
-				toggleFolder(name,e){
-					let { viewFolder } = this.state;
-					if(name == viewFolder){
-						name =''
-					}
-					this.setState({  viewFolder: name });
-				}
-				hashChange() {
-					let ele = document.getElementById('componentIframe')
-					if(ele){
-						var src = document.getElementById('componentIframe').src;
-						var url = src && src.split('#')[0];
-						document.getElementById('componentIframe').src = url + location.hash;
-					}
-					this.setState({ selectedComponent: location.hash,  infoTab:'component' });
-				}
-				toggleGroup(name) {
-					let element=name;
-					let { viewGroup } = this.state;
-					if(name == viewGroup){
-						name =''
-					}
-					this.setState({  viewGroup: name });
-				}
-				componentDidMount() {
-					window.addEventListener('hashchange', this.hashChange);
-					onLoader()
-					let iframeEle=document.getElementById('componentIframe')
-					iframeEle.contentWindow.addEventListener('resize',this.getWindow)
-					this.getWindow()
-					let index=document.getElementsByClassName('iframeCentering')
-					index ?index[0].style.display='none':null
-					if(!this.state.selectedComponent){
-						this.setState({infoTab:'dashboard'})
-					}
-					//document.addEventListener('click', this.popupToggleDoc);
-					fetch('/cli/version').then((res)=>{return res.json()}).then((response)=>{
-						(response && response.version) ? this.setState({version : response.version }) : this.setState({version : "version get failure" })
-					}).catch(function(err) {
-						this.setState({changeset : "Error accured" })
-					});
-				}
-				codeview(){
-					let compName = location.hash != '' ? location.hash.substring(1) : null;
-					let element = document.getElementById('codeView')
-					if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
-					CodeMirror(element, {
-							value:'',
-							lineNumbers: false,
-							styleActiveLine: false,
-							matchBrackets: false,
-							theme: 'blackboard',
-						});
-					}
-				}
-				componentWillUnmount() {
-					let iframe=document.getElementById('componentIframe');
-					//document.removeEventListener('click', this.popupToggleDoc);
-					iframe.contentWindow.removeEventListener('resize',this.getWindow)
-					window.removeEventListener('hashchange', this.hashChange);
-					window.removeEventListener('error',this.reloadFrame);
-				}
-				search(e) {
-					this.setState({ search: e.target.value });
-				}
-				clear(e) {
-					this.setState({ search: '' });
-				}
-				// popupToggleDoc() {
-				// 	this.setState({ popUp: ''});
-				// }
-				// fullScreenSrcToggle(select) {
-				// 	this.setState({ fullScreenSrc: select });
-				// 	this.popupToggleDoc();
-				// }
-				removeClose(e) {
-					e.stopPropagation && e.stopPropagation();
-					e.nativeEvent.stopImmediatePropagation &&
-						e.nativeEvent.stopImmediatePropagation();
-				}
-				filter(list, str) {
-					list = list.sort((a, b) => {
-						var at = a.toLowerCase();
-						var bt = b.toLowerCase();
-						return at > bt ? 1 : at < bt ? -1 : 0;
-					});
-					// return list.filter(
-					//   item => item.toUpperCase().indexOf(str.toUpperCase()) != -1
-					// );
-					return list.filter((item)=>{
-							let value = item.split('__')[0]
-							return value.toUpperCase().indexOf(str.toUpperCase()) != -1
-					})
-				}
-				onTabinfo(name){
-					this.setState({infoTab:name})
-				}
-				reloadFrame(){
-					let iframeEle = document.getElementById('componentIframe');
-					//this.getWindow()
-					iframeEle.contentDocument.location.reload()
-					parent.document.getElementById("loadingText").style.display= 'block'
-				}
-				getFileDetails(){
-					this.onTabinfo('changeset')
-						let compName = location.hash != '' ? location.hash.substring(1) : null;
-						let compNameSub= window.componentList?window.componentList[compName].docs.filePath :Component[compName].docs.filePath || ''
-						let name = compNameSub ? compNameSub.split('__')[0] : '';
-						let propComName = name.replace("docs","/").split('/')[0]+name.split("docs")[1]
-					fetch('/author/get?componentName='+propComName+'.js').then((res)=>{return res.json()}).then((response)=>{
-						(response && response.stdout) ? this.setState({changeset : response.stdout }) : this.setState({changeset : "response is empty" })
-					}).catch(function(err) {
-						this.setState({changeset : "Error accured" })
-					});
-				}
-				iframeSize() {
-					let slider=document.getElementById('myRange')
-					let iframe = document.getElementById('componentIframe');
-					let value=slider.value;
-					let borderSize=30;
-					let sizes={
-						'1':{device:'MOBILE_XS',frameWidth:320+borderSize},
-						'2':{device:'MOBILE_S',frameWidth:360+borderSize},
-						'3':{device:'MOBILE_M',frameWidth:375.04+borderSize},
-						'4':{device:'MOBILE',frameWidth:480+borderSize},
-						'5':{device:'TABLET_S',frameWidth:640+borderSize},
-						'6':{device:'TABLET_M',frameWidth:720+borderSize},
-						'7':{device:'TABLET',frameWidth:768+borderSize},
-						'8':{device:'LAPTOP_S',frameWidth:1024+borderSize},
-						'9':{device:'LAPTOP_M',frameWidth:1280+borderSize},
-						'10':{device:'LAPTOP',frameWidth:1440+borderSize},
-						'11':{device:'MONITOR_M',frameWidth:1600+borderSize},
-						'12':{device:'MONITOR',frameWidth:1920+borderSize}
-					}
-					this.setState(sizes[value]);
-					this.getWindow()
-				}
-				menuOpen() {
-					this.setState({isMenuClose:!this.state.isMenuClose})
-				}
-				onRtlView(e) {
-					let iframeEle = document.getElementById('componentIframe');
-					let ele = e.target.element || null
-					if (!this.state.isRTL) {
-						this.setState({isRTL:true})
-						window.RTLmode = true;
-						iframeEle.contentDocument.documentElement.setAttribute('dir', 'rtl');
-					} else {
-						this.setState({isRTL:false})
-						iframeEle.contentDocument.documentElement.setAttribute('dir', 'ltr');
-						window.RTLmode = false;
-					}
-				}
-				onREMView(e) {
-					let iframeEle = document.getElementById('componentIframe');
-					let ele = e.target.element || null
-					if (!this.state.isRem) {
-						this.setState({isRem:true})
-						iframeEle.contentDocument.documentElement.classList.add('isRem');
-					} else {
-						this.setState({isRem:false})
-						iframeEle.contentDocument.documentElement.classList.remove('isRem');
-					}
-				}
-				handleURL(){
-					this.setState({viewFolder:'General',viewGroup:'Global',infoTab:'dashboard'})
-					window.history.pushState("", "", '/docs/');
-				}
-				unusedList(mdata){
-					let dbList=[];
-					Object.keys(mdata).map((item,i)=>{
-						if(mdata[item].references.length<=0 && mdata[item].referencedby.length<=0){
-							return dbList.push(item);
-						}
-					})
-					return dbList
-				}
-				render() {
-					const {
-						Components,
-						componentObj,
-						search,
-						selectedComponent,
-						//popUp,
-						viewGroup,
-						viewFolder,
-						moreInform,
-						infoTab,
-						changeset,
-						version,
-						frameWidth,
-						isMenuClose,
-						isRTL,
-						isRem,
-						isRemOpen,
-						rootSize,
-						pixelSize,
-						resultRem,
-						duplicates,
-						isEditMode
-					} = this.state;/* Components & componentObj no need in the state access in props itself*/
-					let devices=[{device:'MOBILE',sizes:['XS','S','M','D']},{device:'TABLET',sizes:['S','M','D']},{device:'LAPTOP',sizes:[,'S','M','D']},{device:'MONITOR',sizes:['M','D']}]
-					let compValue='compValue';
-					let reactCliVersion =version.split(' ').filter(function(el){return el.toLowerCase().indexOf("fz-react-cli@") > -1;});
-					let versionFz = reactCliVersion.length?reactCliVersion[0].substring(reactCliVersion[0].indexOf('@')+1,reactCliVersion[0].length) : '';
-					let compName =location.hash != '' ? location.hash.substring(1) : null;
-					let propComName = compName ? compName.split('__')[0] : '';
-					let propsObj = window.componentList && window.componentList[propComName] &&
-					window.componentList[propComName].propTypes ||
-						(Components &&
-							Components[propComName] &&
-							Components[propComName].propTypes) ||
-						{};
-					let currentCompProps = Object.keys(propsObj) || [];
-					let currentCompPropsDescription = window.componentList && window.componentList[propComName] && window.componentList[propComName].propsDescription || (Components[propComName] && Components[propComName].propsDescription) || {};
-					let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].defaultProps || (Components[propComName] && Components[propComName].defaultProps) || {};
-					let componentsObj=componentObj && this.filter(Object.keys(componentObj),'').map((item,i)=>{
-						return ({key:item,value:componentObj[item],length:Object.keys(componentObj[item]).length})
-					})
-					let compObjList=componentsObj
-					let  dashboardList=[
-					this.unusedList(mdata) &&{name:'Unused',componentList:this.unusedList(mdata)},
-					duplicates && {name:'Duplicates',componentList:duplicates}
-					]
-					return (
-						<main className="dflex flexrow">
-							<div className="showToggleLeft"	onClick={this.menuOpen}>
-								<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGOSURBVGhD7ZrBKkVBHIdPSNKV5A3YKSvvYG/BE0jI3tbGxsYGdTeeQnY8gcLOTigba1KE73ewOGUxc8/8/2fUfPXVndOd23ydM92ae6sIeniIT/iZgW94hYsYxTH+9YFd+4pzGMQIvqAmzepCBgzhESpmRxdCmERNuKtH+bCBWpeCgighxpSQEmJECSkhRpSQkJBRvMFTHNcFQ0xDxvAW9f5ztIwxf7Rm8B6tY1z2iEeM22a3jnELEZYxriHCKsY9RFjERIfo4OECT+rR4KSOiQ5JScqYRsgULji7jM/YNqYR8vAz6NIz1KlILI2QfdTz762Ol7SID1zFQeh0j4gtVECbCBEdMox6tufrUTtSRYjokBTfIyJlhOgkJHWEcA+xiBCuIVYRwi3EMkK4hFhHCPMQjwhhGjKN72gdIczvyDYufb80xW2zW1NCSogRJaSEGFFC/n3IBGrCYz3Kh03Uug7qUSC/x0Z7uJaB63iNWpPuTDArqP9IaWJOXqJ+JYtCJym72M9A7QvdFSKq6gtlqbpowcg25wAAAABJRU5ErkJggg==" />
-							</div>
-							<div className={"menuBar "+(isMenuClose?"isMenuClose":"isMenuOpen")}>
-								<div className="dflex flexcolumn">
-									<div className="flexshrink logoPart dflex">
-										<img src="./css/desklogo.png"  />
-										<div className={'home'} onClick={this.handleURL}>
-											<span className='homeIcon'>
-												<svg className='svg'>
-													<use xlinkHref='#home'></use>
-												</svg>
-											</span>
-										</div>
-									</div>
-									<div  className="flexgrow flexbasis sliderContainer">
-										<div className="dflex flexcolumn">
-											<div className="flexshrink searchPart">
-												<Search onChange={this.search} value={search} onClear={this.clear} />
-											</div>
-											<menu className="flexgrow flexbasis scrollY menuContainer" id="leftPanel">
-												{
-													compObjList && Object.keys(compObjList).length && compObjList.map(comp => {
-														let folderName=comp.key
-														let folderCompCount=0;
-														let sortList=this.filter(Object.keys(componentObj[folderName]),'').map(grpName=>{
-															return({
-																fName:grpName,
-																components:componentObj[folderName][grpName],
-																length:(componentObj[folderName][grpName].filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)
-															})
-														})
-														let outcomp = Object.keys(componentObj[folderName]).sort().map(
-															grn => {
-																let searchList = this.filter(
-																	componentObj[folderName][grn],
-																	search
-																);
-																if(searchList.length){
-																folderCompCount=folderCompCount+1;
-															}
-																return searchList.length ? true : false;
-															}
-														);
-														if (outcomp.indexOf(true) != -1) {
-															return (
-																<div>
-																	<div
-																		onClick={this.toggleFolder.bind(
-																			this,
-																			folderName
-																		)}
-																		className={'mainMenu dflex flexrow alignVertical offSelection'+' '+
-																			(viewFolder == folderName
-																				? 'mainMenuActive'
-																				: '')
-																		}
-																	>
-																		<span className={'flexgrow mainMenutitle dotted'}>{folderName}</span>
-																		<span className={'flexshrink mainMenuCount'}>{folderCompCount}</span>
-																		<i className={'flexshrink mainMenuArrow'}>
-																			<svg className='svg'>
-																				<use xlinkHref='#bottomArrow'></use>
-																			</svg>
-																		</i>
-																	</div>
-																	<div
-																		className={
-																			viewFolder == folderName || search
-																				? 'folderOpen'
-																				: 'hide'
-																		}
-																	>
-																		{
-																			sortList.map((grpName)=>{
-																				return(
-																					<ComponentList
-																						type={grpName.fName}
-																						components={this.filter(
-																							componentObj[folderName][grpName.fName],
-																							search
-																						)}
-																						selectedComponent={selectedComponent}
-																						toggleGroup={this.toggleGroup}
-																						viewGroup={
-																							search  ? grpName.fName : viewGroup
-																						}
-																					/>)
-																			})
-																		}
-																	</div>
-																</div>
-															);
-														} else {
-															return null;
-														}
-													})
-												}
-											</menu>
-											{
-												versionFz!=''&&
-												<div className="flexshrink versionPart ">
-													<span>Version {versionFz}</span>
-												</div>
-											}
-											<div className="flexshrink tools" onClick={this.toggleRemContainer}>
-												<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
-												<span>REM Converter</span>
-											</div>
-										</div>
-										<div className={"slider "+(isRemOpen?'sopen':'')}>
-											<div className="tools sliderHeader">
-												<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
-												<span className="sliderTitle">REM Converter</span>
-												<span className="searchClose" onClick={this.toggleRemContainer}>
-													<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxMi45ODIgMjEyLjk4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEyLjk4MiAyMTIuOTgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJDbG9zZSI+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7IiBkPSJNMTMxLjgwNCwxMDYuNDkxbDc1LjkzNi03NS45MzZjNi45OS02Ljk5LDYuOTktMTguMzIzLDAtMjUuMzEyICAgYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBsLTc1LjkzNyw3NS45MzdMMzAuNTU0LDUuMjQyYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBjLTYuOTg5LDYuOTktNi45ODksMTguMzIzLDAsMjUuMzEyICAgbDc1LjkzNyw3NS45MzZMNS4yNDIsMTgyLjQyN2MtNi45ODksNi45OS02Ljk4OSwxOC4zMjMsMCwyNS4zMTJjNi45OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwbDc1LjkzNy03NS45MzdsNzUuOTM3LDc1LjkzNyAgIGM2Ljk4OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwYzYuOTktNi45OSw2Ljk5LTE4LjMyMiwwLTI1LjMxMkwxMzEuODA0LDEwNi40OTF6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
-												</span>
-											</div>
-											<div className="sliderFormContainer">
-												<div className="sliderInputContainer">
-													<label className="sliderInputTitle">Base  font-size (in px)</label>
-													<input type="number" className="sliderInput" min="1" placeholder="Base  font-size (in px)" value={rootSize} onChange={this.onChangeBase} / >
-												</div>
-												<div className="sliderInputContainer">
-													<label className="sliderInputTitle">PX size to convert</label>
-													<input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} / >
-												</div>
-												<div className="sliderInputContainer">
-													<label className="sliderInputTitle">Result</label>
-													<div className="sliderResult">
-														<input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} / >
-														<span  id="remoutput" className="copyTxtHiden">{resultRem}</span>
-														<span className="copyResult" onClick={selectText.bind(this, 'remoutput')}>
-															<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OC4zIDQ4OC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODguMyA0ODguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTMxNC4yNSw4NS40aC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42djMyNS43YzAsMjEuMywxNy4zLDM4LjYsMzguNiwzOC42aDIyN2MyMS4zLDAsMzguNi0xNy4zLDM4LjYtMzguNlYxMjQgICAgQzM1Mi43NSwxMDIuNywzMzUuNDUsODUuNCwzMTQuMjUsODUuNHogTTMyNS43NSw0NDkuNmMwLDYuNC01LjIsMTEuNi0xMS42LDExLjZoLTIyN2MtNi40LDAtMTEuNi01LjItMTEuNi0xMS42VjEyNCAgICBjMC02LjQsNS4yLTExLjYsMTEuNi0xMS42aDIyN2M2LjQsMCwxMS42LDUuMiwxMS42LDExLjZWNDQ5LjZ6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTQwMS4wNSwwaC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNWMwLTYuNCw1LjItMTEuNiwxMS42LTExLjZoMjI3ICAgIGM2LjQsMCwxMS42LDUuMiwxMS42LDExLjZ2MzI1LjdjMCw2LjQtNS4yLDExLjYtMTEuNiwxMS42Yy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVjMjEuMywwLDM4LjYtMTcuMywzOC42LTM4LjYgICAgVjM4LjZDNDM5LjY1LDE3LjMsNDIyLjM1LDAsNDAxLjA1LDB6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
-														</span>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div className="flexgrow flexbasis">
-								<div id="container" className="dflex flexcolumn flexbasis">
-									{
-										infoTab == 'dashboard' ?
-											<div className='dflex flexcolumn'>
-												<div className="flexshrink cheader">
-													<div className="dflex flexrow flexbasis alignVertical">
-														<div className="flexshrink">
-															<h1 className="cheadertitle">{'Dashboard'}</h1>
-														</div>
-														<div className='flexgrow flexbasis infoTabs dflex'>
-															{
-																dashboardList.map((item,i)=>{
-																	return(
-																		<span key={i} onClick={this.compList.bind(this,item.name)} className={this.state.compList == item.name ? 'dotted infoactive' : 'dotted'}>
-																			{item.name}
-																		</span>
-																	)
-																})
-															}
-														</div>
-													</div>
-												</div>
-												<div className='flexgrow scrollY'>
-													{
-														dashboardList.map((item,i)=>{
-															if(this.state.compList == item.name){
-																return(
-																	item.componentList.length>0?<ul key={i}>
-																		{
-																			(item.componentList).map((component,val)=>{
-																				if(component!== undefined){
-																					return(<li key={val} className="compListItem">{component}</li>)
-																				}
-																			})
-																		}
-																	</ul>:
-																	<div className='dflex alignHorizontal alignVertical flexcolumn'>
-																		<span className='smileIcon'>
-																			<svg className='svg'>
-																				<use xlinkHref='#smileIcon'></use>
-																			</svg>
-																		</span>
-																		<div>{'Sorry! there is no '+this.state.compList +' components'}</div>
-																	</div>
-																)
-															}
-														})
-													}
-												</div>
-											</div>
-										:null
-									}
-									{
-										compName ?
-											<div className="flexshrink cheader">
-												<div className="dflex flexrow flexbasis alignVertical">
-													<div className="flexshrink"><h1 className="cheadertitle">{compName && compName.split('__')[0]}</h1></div>
-													<div className='flexgrow flexbasis infoTabs dflex'>
-															<span onClick={this.onTabinfo.bind(this,'component')} className={infoTab == 'component' ? 'dotted infoactive' : 'dotted'}>Component view</span>
-															<span onClick={this.onTabinfo.bind(this,'proptypes')} className={infoTab == 'proptypes' ? 'dotted infoactive' : 'dotted'}>PropTypes</span>
-															<span onClick={this.onTabinfo.bind(this,'code')} className={infoTab == 'code' ? 'dotted infoactive' : 'dotted'}>Docs Code</span>
-															{
-																/*
-																	<span onClick={this.onTabinfo.bind(this,'src')} className={infoTab == 'src' ? 'dotted infoactive' : 'dotted'}>Source</span>
-																	<span onClick={this.onTabinfo.bind(this,'visual')} className={infoTab == 'visual' ? 'dotted infoactive' : 'dotted'}>Visual Design</span>
-																*/
-															}
-															<span  onClick={this.onTabinfo.bind(this,'references')}className={infoTab=='references' ? 'dotted infoactive' : 'dotted'}>References</span>
-															<span onClick={this.getFileDetails} className={infoTab == 'changeset' ? 'dotted infoactive' : 'dotted'}>Author</span>
-													</div>
-												</div>
-											</div>
-										:null
-									}
-									<div className="flexgrow flexbasis cfooter ">
-										<div className="dflex flexcolumn flexbasis">
-											<div className="flexgrow flexbasis ccontent">
-												{
-													infoTab == 'changeset' ?
-														<pre className="authorview">{changeset ? changeset : 'loading....!!!'}</pre>
-													:null
-												}
-												{
-													infoTab == 'code' ?
-														<CodeView compName={compName} src={window.componentList ?window.componentList[compName].docs.source:Component[compName].docs.source}/>
-													:null
-												}
-												{
-													infoTab == 'src' ?
-														<CodeView compName={compName+'src'} src={window.componentList ?window.componentList[propComName].source:Component[propComName].source}/>
-													: null
-												}
-												{
-													infoTab == 'component' &&
-														<div className='dflex flexcolumn'>
-															<div className={'flexgrow flexshrink flexbasis toolarea'}>
-																<section id="resize" style={{"width":((frameWidth)+'px')}} className={"dflex flexcolumn flexbasis iframeSection"+" "+(frameWidth<481?'section':'')}>
-																	<span className="loadingText" id='loadingText'>
-																		<div className="lds-ripple">
-																			<div></div>
-																			<div></div>
-																		</div>
-																	</span>
-																	<iframe
-																		id="componentIframe"
-																		className="iframe"
-																		src={'/docs/component.html' + location.hash}
-																		mdata={mdata}
-																	/>
-																</section>
-															</div>
-															<div className={'flexshrink toolOptions'}>
-																<div className={'dflex flexrow alignVertical alignHorizontal'}>
-																	<div className={'responsive offSelection'}>
-																		<span className={"responsiveOption iconOption"} onClick={this.reloadFrame}>
-																			<svg className='svg'>
-																				<use xlinkHref='#reload'></use>
-																			</svg>
-																		</span>
-																		<a className={'responsiveOption iconOption'} href={'/docs/component.html' + location.hash} target="_blank" >
-																			<svg className='svg'>
-																				<use xlinkHref='#newTab'></use>
-																			</svg>
-																		</a>
-																		<span className={'responsiveOption iconOption'+' '+(this.state.isRTL?'activeOption transform':'')} onClick={this.onRtlView}>
-																			<svg className='svg'>
-																				<use xlinkHref='#RTL'></use>
-																			</svg>
-																		</span>
-																		<span className={'responsiveOption iconOption textSize'+' '+(this.state.isRem?'activeOption':'')} onClick={this.onREMView} >
-																			<svg className='svg'>
-																				<use xlinkHref='#rem'></use>
-																			</svg>
-																		</span>
-																		<span className={'responsiveOption iconOption textSize'+' '+(this.state.isEditMode?'activeOption':'')} onClick={this.toggleEditMode} >
-																			<svg className='svg'>
-																				<use xlinkHref='#pencil'></use>
-																			</svg>
-																		</span>
-																		<span className={'responsiveOption iconOption fullScreen'+' '+(this.state.isMenuClose?'activeOption':'')} onClick={this.fullView} >
-																			<svg className='svg'>
-																				<use xlinkHref='#fullScreen'></use>
-																			</svg>
-																		</span>
-																	</div>
-																	<div  className={'dflex alignVertical alignHorizontal range'}>
-																		<input min='1' max='12' type='range' defaultValue='9' step='1' id="myRange" onChange={this.iframeSize} className='rangeInput' />
-																		<span className='tooltip'>{this.state.device}</span>
-																		{
-																			this.state.windowSize?
-																			<React.Fragment>
-																				<span className='window'>{this.state.windowSize.width}</span>
-																				<span className='tooltipVal'>x</span>
-																				<span className='window'>{this.state.windowSize.height}</span>
-																			</React.Fragment>:null
-																		}
-																	</div>
-																</div>
-															</div>
-														</div>
-												}
-												{
-													infoTab == 'proptypes' ?
-														<div className="propsTable">
-															<div className="tableHeader">
-																<span className="brR">PropsName</span>
-																<span className="brR">Type</span>
-																<span className="brR">isRequired</span>
-																<span className="brR ">Default Props</span>
-																<span className="brR ">Description</span>
-															</div>
-															{
-																currentCompProps.map((value, i) => {
-																	return (
-																		<div
-																			className={
-																				currentCompProps.length - 1 == i
-																					? 'tableHeaderNB'
-																					: 'tableHeader'
-																			}
-																			key={i}
-																		>
-																			<span>
-																				<div>{value}</div>
-																			</span>
-																			<span>
-																				<div>
-																					{propsObj[value] && propsObj[value].hookType}
-																				</div>
-																			</span>
-																			<span>
-																				<div>
-																					{
-																						propsObj[value] && propsObj[value].isRequired? '-': 'true'
-																					}
-																				</div>
-																			</span>
-																			<span className="defaultProps">
-																				<div className="bn">
-																					{JSON.stringify(currentCompDefault[value] || '')}
-																				</div>
-																			</span>
-																			<span className="defaultProps">
-																				<div className="bn">
-																					{JSON.stringify(currentCompPropsDescription[value] || '')}
-																				</div>
-																			</span>
-																		</div>
-																	);
-																})
-															}
-														</div>
-													: null
-												}
-												{
-													infoTab == 'references' ?
-														<div className="referContainer">
-															<div className='refsBy'>ReferencedBy :</div>
-															<ul>
-																{
-																	compName ?
-																		compName.indexOf('__') > -1 ?
-																			mdata[compName.substring(0, compName.indexOf('_'))] &&
-																			mdata[compName.substring(0, compName.indexOf('_'))].referencedby.map((val, i) => {
-																				return (
-																					<li key={i} className='refsLin'>
-																						<a className="link" href={'#' + val}>
-																							{val}
-																						</a>
-																					</li>
-																				);
-																			})
-																		: mdata[compName].referencedby.map((val, i) => {
-																			return (
-																				<li key={i} className='refsLin'>
-																					<a className="link" href={'#' + val}>
-																						{val}
-																					</a>
-																				</li>
-																			);
-																		})
-																	: null
-																}
-															</ul>
-															<div className='refsBy'>References : </div>
-															<ul>
-																{
-																	compName ? compName.indexOf('__') > -1
-																		? mdata[
-																				compName.substring(0, compName.indexOf('_'))
-																			] &&
-																			mdata[
-																				compName.substring(0, compName.indexOf('_'))
-																			].references.map((val, i) => {
-																				return (
-																					<li key={i} className='refsLin'>
-																						<a className="link" href={'#' + val}>
-																							{val}
-																						</a>
-																					</li>
-																				);
-																			})
-																		: mdata[compName].references.map((val, i) => {
-																			return (
-																				<li key={i} className='refsLin'>
-																					<a className="link" href={'#' + val}>
-																						{val}
-																					</a>
-																				</li>
-																			);
-																		})
-																	: null
-																}
-															</ul>
-														</div>
-														: null
-												}
-												{
-													/*infoTab == 'visual' ?
-														<div>
-															{
-																Component[propComName] &&
-																Component[propComName].docs &&
-																Component[propComName].docs.images &&
-																Component[propComName].docs.images.map(image => {
-																return (
-																	<div className="psdContainer">
-																		<div className="imageContainer">
-																			<img className="psdImage" src={image.view} />
-																		</div>
-																			<div>
-																				<a className="psdLink" href={image.psd} target="_blank" download>
-																					Download PSD
-																				</a>
-																			</div>
-																			<div>
-																				<a className="psdLink" href={image.view} target="_blank" download>
-																					Download Image
-																				</a>
-																			</div>
-																		</div>
-																	);
-																})
-															}
-														</div>
-													: null */
-												}
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</main>
-					);
-				}
-			}
-			class Search extends React.Component {
-				render() {
-					return (
-						<div className="searchContainer">
-						<input
-							type="text"
-							onChange={this.props.onChange}
-							placeholder="Search"
-							className="inputSearch" value={this.props.value}
-						/>
-						{this.props.value.length>=1&&
-						<span className="searchClose" onClick={this.props.onClear}><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxMi45ODIgMjEyLjk4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEyLjk4MiAyMTIuOTgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJDbG9zZSI+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7IiBkPSJNMTMxLjgwNCwxMDYuNDkxbDc1LjkzNi03NS45MzZjNi45OS02Ljk5LDYuOTktMTguMzIzLDAtMjUuMzEyICAgYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBsLTc1LjkzNyw3NS45MzdMMzAuNTU0LDUuMjQyYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBjLTYuOTg5LDYuOTktNi45ODksMTguMzIzLDAsMjUuMzEyICAgbDc1LjkzNyw3NS45MzZMNS4yNDIsMTgyLjQyN2MtNi45ODksNi45OS02Ljk4OSwxOC4zMjMsMCwyNS4zMTJjNi45OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwbDc1LjkzNy03NS45MzdsNzUuOTM3LDc1LjkzNyAgIGM2Ljk4OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwYzYuOTktNi45OSw2Ljk5LTE4LjMyMiwwLTI1LjMxMkwxMzEuODA0LDEwNi40OTF6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /></span>}
-						</div>
-					);
-				}
-			}
-			class ComponentList extends React.Component {
-				constructor(props) {
-					super(props);
-					this.state = {
-						toggle: false
-					};
-				}
-				componentDidMount(){
-					let {type,viewGroup}=this.props;
-					let element=document.getElementById(type);
-					viewGroup==type && element ?
-					element.scrollIntoView(true) && element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
-					:null
-				}
-				render() {
-					const { components, type, toggleGroup,viewGroup } = this.props;
-					let classNameTab = type == viewGroup ? " selected " : '';
-					return (
-						<div  data-title={type}>
-						{
-							components.length>0&&  <div className={"listItem dflex flexrow flexbasis alignVertical offSelection "+ classNameTab} onClick={toggleGroup.bind(this,type)} id={type}>
-								<i className={"flexshrink listIcon"}>
-									<svg className='svg'>
-										<use xlinkHref='#folder'></use>
-									</svg>
-								</i>
-								<span className="dotted flexgrow flexbasis listTitle">{type}</span>
-								{
-									components.length>0&&<i className={"flexshrink listCount"}>{(components.filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)}</i>
-								}
-							</div>
-						}
-						<div className={ viewGroup == type ? 'activeComponent' : 'hide'}>
-							{
-								components.map((component, i) => {
-									let docsComp = component.search('__');
-									return (
-										<div className={((docsComp == -1) ? "componentMain" : "componentDocs")} key={'component' + i} >
-											<a
-												href={ docsComp == -1 && type != 'Global'&& type != 'Page'  ? 'javascript:void(0);' : '#' + component}
-												className={"dflex flexrow flexbasis alignVertical offSelection "+ (this.props.selectedComponent == '#' + component ? 'active' : '') } >
-												<i className={"listIcon"}>
-													<svg className='svg'>
-														<use xlinkHref='#file'></use>
-													</svg>
-												</i>
-												<span className="dotted flexgrow flexbasis listTitle"> {docsComp == -1 ? component : component.split('__')[1]}</span>
-												{(components.filter(function(el) {return el.indexOf(component+'__') > -1}).length)>0 && (docsComp == -1) &&<i className={"flexshrink listCount subCount"}>{(components.filter(function(el) {return el.indexOf(component+'__') > -1}).length)}</i>}
-											</a>
-										</div>
-									);
-								})}
-							</div>
-						</div>
-					);
-				}
-			}
-			class CodeView extends React.Component {
-				constructor(props) {
-					super(props);
-				}
-				componentDidMount(){
-					let {compName,src} = this.props
-					let element = document.getElementById(compName)
-					if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
-						CodeMirror.fromTextArea(element, {
-							lineNumbers: false,
-							styleActiveLine: false,
-							matchBrackets: false,
-							theme: 'blackboard'
-						});
-					}
-				}
-				render() {
-					let {src,compName} = this.props
-					return (
-						<div className={"dflex flexrow flexbasis "}>
-							<textarea className="srcCode" id={compName} defaultValue={src}/>
-						</div>
-					);
-				}
-			}
-			var user={
-				componentObj:{},
-				componentList:{},
-				dupCompList:[],
-				objList:function(fName,gName,key,comp){
-					if(this.componentList[key]){
-						this.componentList[key]=comp;
-						this.dupCompList.push(key)
-					}
-					else{
-						this.componentList[key]=comp;
-					}
-					if(gName){
-						if(!this.componentObj[fName]){
-							this.componentObj[fName]={}
-						}
-						if(!this.componentObj[fName][gName]){
-							this.componentObj[fName][gName] = [];
-							this.componentObj[fName][gName].push(key)
-						}
-						else{
-							this.componentObj[fName][gName].push(key)
-						}
-					}
-					return {componentObj:this.componentObj,componentList:this.componentList}
-				},
-				renderDoc:function(compOBJ,dupCompList){
-					return(
-						ReactDOM.render(
-							<Doc
-								components={Component}
-								componentObj={compOBJ}
-								duplicates={dupCompList}
-							/>,
-							react
-						)
-					)
-				}
-			}
-			var compGroupObj=function(comp,key,compGroup){
-				if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
-					return;
-				}
-				else if(comp=='_provider'){
-					return user.objList(null,null,comp,compGroup[comp])
-				}
-				else{
-					if(compGroup[comp].docs && compGroup[comp].docs.componentGroup ){
-						let groupName = compGroup[comp].docs.componentGroup;
-						let folderName = compGroup[comp].docs.folderName || "General";
-						if(comp=='default'){
-							return user.objList(folderName,groupName,key,compGroup[comp])
-						}
-						else{
-							return user.objList(folderName,groupName,comp,compGroup[comp])
-						}
-					}
-				}
-			}
-			Promise.all(Object.keys(Component).map((key) => {
-				let componentKey=Component[key];
-				if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
-					return;
-				}
-				if(key=='_provider'){
-					return compGroupObj(key,null,Component)
-				}
-				try{
-					return(
-						componentKey && componentKey.then((res)=>{
-							let compList;
-							Object.keys(res).forEach((comp)=>{
-								let compGroup=res[comp];
-								Object.keys(compGroup).forEach((comps)=>{
-									compGroupObj(comps,key,compGroup)
-								})
-							})
-						})
-					)
-				}catch(error){
-					compGroupObj(key,null,Component)
-				}
-			})).then(()=>{
-				window.componentList=user.componentList
-				user.renderDoc(user.componentObj,user.dupCompList)
-			})
-		};
-		var onLoader = function () {
-			// Minimum resizable area
-			var minWidth = 60;
-			var minHeight = 40;
-			// Thresholds
-			var FULLSCREEN_MARGINS = -10;
-			var MARGINS = 15;
-			// End of what's configurable.
-			var clicked = null;
-			var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;
-			var rightScreenEdge, bottomScreenEdge;
-			var preSnapped;
-			var b, x, y;
-			var redraw = false;
-			var pane = document.getElementById( 'resize' );
-			var ghostpane = document.getElementById( 'ghostpane' );
-			function setBounds( element, x, y, w, h ) {
-				element.style.left = x + 'px';
-				element.style.top = y + 'px';
-				element.style.width = w + 'px';
-				element.style.height = h + 'px';
-			}
-			function hintHide() {
-				//setBounds(ghostpane, b.left, b.top, b.width, b.height);
-				//ghostpane.style.opacity = 0;
-				// var b = ghostpane.getBoundingClientRect();
-				// ghostpane.style.top = b.top + b.height / 2;
-				// ghostpane.style.left = b.left + b.width / 2;
-				// ghostpane.style.width = 0;
-				// ghostpane.style.height = 0;
-			}
-			// Mouse events
-			pane && pane.addEventListener( 'mousedown', onMouseDown );
-			pane && document.addEventListener( 'mousemove', onMove );
-			pane && document.addEventListener( 'mouseup', onUp );
-			// Touch events
-			pane && pane.addEventListener( 'touchstart', onTouchDown );
-			pane && document.addEventListener( 'touchmove', onTouchMove );
-			pane && document.addEventListener( 'touchend', onTouchEnd );
-			function onTouchDown( e ) {
-				onDown( e.touches[ 0 ] );
-				e.preventDefault();
-			}
-			function onTouchMove( e ) {
-				onMove( e.touches[ 0 ] );
-			}
-			function onTouchEnd( e ) {
-				if ( e.touches.length == 0 ) onUp( e.changedTouches[ 0 ] );
-			}
-			function onMouseDown( e ) {
-				onDown( e );
-				e.preventDefault();
-			}
-			function onDown( e ) {
-				calc( e );
-				var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
-				clicked = {
-					x: x,
-					y: y,
-					cx: e.clientX,
-					cy: e.clientY,
-					w: b.width,
-					h: b.height,
-					isResizing: isResizing,
-					isMoving: !isResizing && canMove(),
-					onTopEdge: onTopEdge,
-					onLeftEdge: onLeftEdge,
-					onRightEdge: onRightEdge,
-					onBottomEdge: onBottomEdge
-				};
-			}
-			function canMove() {
-				return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
-			}
-			function calc( e ) {
-				b = pane.getBoundingClientRect();
-				x = e.clientX - b.left;
-				y = e.clientY - b.top;
-				onTopEdge = y < MARGINS;
-				onLeftEdge = x < MARGINS;
-				onRightEdge = x >= b.width - MARGINS;
-				onBottomEdge = y >= b.height - MARGINS;
-				rightScreenEdge = window.innerWidth - MARGINS;
-				bottomScreenEdge = window.innerHeight - MARGINS;
-			}
-			var e;
-			function onMove( ee ) {
-				calc( ee );
-				e = ee;
-				redraw = true;
-			}
-			function animate() {
-				requestAnimationFrame( animate );
-				if ( !redraw ) return;
-				redraw = false;
-				if ( clicked && clicked.isResizing ) {
-					if ( clicked.onRightEdge ) pane.style.width = Math.max( x, minWidth ) + 'px';
-					if ( clicked.onBottomEdge )
-						pane.style.height = Math.max( y, minHeight ) + 'px';
-					if ( clicked.onLeftEdge ) {
-						var currentWidth = Math.max(
-							clicked.cx - e.clientX + clicked.w,
-							minWidth
-						);
-						if ( currentWidth > minWidth ) {
-							pane.style.width = currentWidth + 'px';
-							//  pane.style.left = e.clientX + 'px';
-						}
-					}
-					if ( clicked.onTopEdge ) {
-						var currentHeight = Math.max(
-							clicked.cy - e.clientY + clicked.h,
-							minHeight
-						);
-						if ( currentHeight > minHeight ) {
-							pane.style.height = currentHeight + 'px';
-							pane.style.top = e.clientY + 'px';
-						}
-					}
-					hintHide();
-					return;
-				}
-				if ( clicked && clicked.isMoving ) {
-					if (
-						b.top < FULLSCREEN_MARGINS ||
-						b.left < FULLSCREEN_MARGINS ||
-						b.right > window.innerWidth - FULLSCREEN_MARGINS ||
-						b.bottom > window.innerHeight - FULLSCREEN_MARGINS
-					) {
-						// hintFull();
-						setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight );
-						ghostpane.style.opacity = 0.2;
-					} else if ( b.top < MARGINS ) {
-						// hintTop();
-						setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2 );
-						ghostpane.style.opacity = 0.2;
-					} else if ( b.left < MARGINS ) {
-						// hintLeft();
-						setBounds( ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight );
-						ghostpane.style.opacity = 0.2;
-					} else if ( b.right > rightScreenEdge ) {
-						// hintRight();
-						setBounds(
-							ghostpane,
-							window.innerWidth / 2,
-							0,
-							window.innerWidth / 2,
-							window.innerHeight
-						);
-						ghostpane.style.opacity = 0.2;
-					} else if ( b.bottom > bottomScreenEdge ) {
-						// hintBottom();
-						setBounds(
-							ghostpane,
-							0,
-							window.innerHeight / 2,
-							window.innerWidth,
-							window.innerWidth / 2
-						);
-						ghostpane.style.opacity = 0.2;
-					} else {
-						hintHide();
-					}
-					if ( preSnapped ) {
-						setBounds(
-							pane,
-							e.clientX - preSnapped.width / 2,
-							e.clientY - Math.min( clicked.y, preSnapped.height ),
-							preSnapped.width,
-							preSnapped.height
-						);
-						return;
-					}
-					// moving
-					pane.style.top = e.clientY - clicked.y + 'px';
-					//pane.style.left = e.clientX - clicked.x + 'px';
-					return;
-				}
-				// This code executes when mouse moves without clicking
-				// style cursor
-				if ( ( onRightEdge && onBottomEdge ) || ( onLeftEdge && onTopEdge ) ) {
-					pane.style.cursor = 'nwse-resize';
-				} else if ( ( onRightEdge && onTopEdge ) || ( onBottomEdge && onLeftEdge ) ) {
-					pane.style.cursor = 'nesw-resize';
-				} else if ( onRightEdge || onLeftEdge ) {
-					pane.style.cursor = 'ew-resize';
-				} else if ( onBottomEdge || onTopEdge ) {
-					pane.style.cursor = 'ns-resize';
-				} else if ( canMove() ) {
-					pane.style.cursor = 'move';
-				} else {
-					pane.style.cursor = 'default';
-				}
-			}
-			animate();
-			function onUp( e ) {
-				calc( e );
-				if ( clicked && clicked.isMoving ) {
-					// Snap
-					var snapped = {
-						width: b.width,
-						height: b.height
-					};
-					if (
-						b.top < FULLSCREEN_MARGINS ||
-						b.left < FULLSCREEN_MARGINS ||
-						b.right > window.innerWidth - FULLSCREEN_MARGINS ||
-						b.bottom > window.innerHeight - FULLSCREEN_MARGINS
-					) {
-						// hintFull();
-						setBounds( pane, 0, 0, window.innerWidth, window.innerHeight );
-						preSnapped = snapped;
-					} else if ( b.top < MARGINS ) {
-						// hintTop();
-						setBounds( pane, 0, 0, window.innerWidth, window.innerHeight / 2 );
-						preSnapped = snapped;
-					} else if ( b.left < MARGINS ) {
-						// hintLeft();
-						setBounds( pane, 0, 0, window.innerWidth / 2, window.innerHeight );
-						preSnapped = snapped;
-					} else if ( b.right > rightScreenEdge ) {
-						// hintRight();
-						setBounds(
-							pane,
-							window.innerWidth / 2,
-							0,
-							window.innerWidth / 2,
-							window.innerHeight
-						);
-						preSnapped = snapped;
-					} else if ( b.bottom > bottomScreenEdge ) {
-						// hintBottom();
-						setBounds(
-							pane,
-							0,
-							window.innerHeight / 2,
-							window.innerWidth,
-							window.innerWidth / 2
-						);
-						preSnapped = snapped;
-					} else {
-						preSnapped = null;
-					}
-					hintHide();
-				}
-				clicked = null;
-			}
-		};
-	</script>
-	<script type="text/javascript">
-		var html =
-			"<body><script src='/docs/js/vendor.js'><\/script><script src='/docs/js/main.js'><\/script><script src='/docs/js/moduleStats.js'><\/script> <script> if(typeof mdata==\"undefined\"){mdata={};}parent.loadDOC(Component, mdata)  <\/script> <\/body>";
-		var iframe = document.getElementById( 'ifm' );
-		var frameDoc = iframe.document;
-		if ( iframe.contentWindow ) {
-			frameDoc = iframe.contentWindow.document;
-			frameDoc.open();
-			frameDoc.writeln( html );
-			frameDoc.close();
-		} else {
-		}
-	</script>
-	<div style="visibility: hidden;height: 0;width: 0;height:0">
-		<svg
-			xmlSpace="preserve"
-			version="1.1"
-			xmlns="http://www.w3.org/2000/svg"
-			xmlnsXlink="http://www.w3.org/1999/xlink"
-		>
-			<symbol id="home" x="0px" y="0px" viewBox="0 0 495.398 495.398" fill='#FFFFFF' enableBackground="new 0 0 495.398 495.398">
-				<path d="M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391     v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158     c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747     c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z"/>
-				<path d="M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401     c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79     c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z"/>
-			</symbol>
-			<symbol
-				id='bottomArrow'
-				viewBox="0 0 792 792"
-			>
-			<polygon
-				points="580.802,369.604 580.802,369.604 211.198,0 184.802,26.396 554.405,396 184.802,765.604 211.198,792 607.198,396"
-			/>
-			</symbol>
-			<symbol	id="reload" viewBox="0 0 28.265 28.265">
-				<path d="M14.133,28.265c-7.061,0-12.805-5.75-12.805-12.809c0-7.06,5.744-12.807,12.805-12.807c0.469,0,0.943,0.027,1.414,0.08   v-2.07c0-0.266,0.164-0.508,0.406-0.611c0.252-0.098,0.531-0.043,0.723,0.148l4.537,4.547c0.258,0.258,0.258,0.67,0,0.932   l-4.535,4.557c-0.193,0.188-0.473,0.246-0.725,0.143c-0.242-0.104-0.406-0.344-0.406-0.609V7.47   c-0.469-0.086-0.941-0.125-1.414-0.125c-4.473,0-8.113,3.639-8.113,8.111c0,4.471,3.641,8.113,8.113,8.113s8.111-3.643,8.111-8.113   c0-0.363,0.295-0.66,0.662-0.66h3.369c0.365,0,0.662,0.297,0.662,0.66C26.937,22.515,21.189,28.265,14.133,28.265z"/>
-			</symbol>
-			<symbol id='newTab' x="0px" y="0px" viewBox="0 0 26 26" enableBackground='new 0 0 26 26'>
-				<path d="M18,17.759v3.366C18,22.159,17.159,23,16.125,23H4.875C3.841,23,3,22.159,3,21.125V9.875C3,8.841,3.841,8,4.875,8h3.429l3.001-3h-6.43C2.182,5,0,7.182,0,9.875v11.25C0,23.818,2.182,26,4.875,26h11.25C18.818,26,21,23.818,21,21.125v-6.367L18,17.759z"/>
-				<path d="M22.581,0H12.322c-1.886,0.002-1.755,0.51-0.76,1.504l3.22,3.22l-5.52,5.519c-1.145,1.144-1.144,2.998,0,4.141l2.41,2.411c1.144,1.141,2.996,1.142,4.14-0.001l5.52-5.52l3.16,3.16c1.101,1.1,1.507,1.129,1.507-0.757L26,3.419C25.999-0.018,26.024-0.001,22.581,0z"/>
-			</symbol>
-			<symbol id='RTL'
-				width="13" height="16"
-				viewBox="0 0 13 16"
-				fill="none"
-			>
-				<path d="M12.2415 0.318399H3.92167C3.37879 0.318399 2.87197 0.404799 2.39552 0.575999C1.92097 0.747199 1.50527 0.984 1.15221 1.2848C0.799141 1.5856 0.518208 1.936 0.311304 2.3376C0.104401 2.7392 0 3.1632 0 3.616C0 4.0736 0.104401 4.5008 0.311304 4.9024C0.518208 5.3024 0.799141 5.6528 1.15221 5.9552C1.50527 6.2576 1.92097 6.4928 2.39552 6.664C2.87007 6.8352 3.37879 6.9216 3.92167 6.9216H4.89735V10.6368C4.89735 10.7504 4.9448 10.8464 5.04161 10.9264C5.13842 11.0064 5.25231 11.048 5.38518 11.048C5.52565 11.048 5.64334 11.008 5.73825 10.9264C5.83316 10.8464 5.88251 10.7488 5.88251 10.6368V1.1408H8.81902V10.6368C8.81902 10.7504 8.86648 10.8464 8.96328 10.9264C9.06009 11.0064 9.17398 11.048 9.30686 11.048C9.44163 11.048 9.55552 11.008 9.65043 10.9264C9.74534 10.8448 9.79469 10.7488 9.79469 10.6368V1.1408H12.2434C12.3781 1.1408 12.492 1.1008 12.5869 1.0192C12.6818 0.9376 12.7312 0.841599 12.7312 0.729599C12.7312 0.615999 12.6837 0.52 12.5869 0.44C12.4901 0.36 12.3762 0.318399 12.2415 0.318399ZM4.89735 6.0992H3.92167C3.51356 6.0992 3.13013 6.0336 2.77326 5.9024C2.4164 5.7712 2.1051 5.5936 1.84125 5.3696C1.5774 5.1472 1.3686 4.8848 1.21485 4.584C1.06109 4.2832 0.985164 3.96 0.985164 3.616C0.985164 3.2768 1.06109 2.9584 1.21485 2.656C1.3686 2.3552 1.5774 2.0928 1.84125 1.8704C2.1051 1.648 2.4164 1.4704 2.77326 1.3376C3.13013 1.2064 3.51356 1.1408 3.92167 1.1408H4.89735V6.0992ZM11.2658 13.5232H2.16205L3.29147 12.5792C3.38638 12.4992 3.43574 12.4 3.43574 12.2848C3.43574 12.1696 3.38828 12.0704 3.29147 11.9904C3.19656 11.9104 3.07887 11.8688 2.9422 11.8688C2.80553 11.8688 2.68785 11.9088 2.59294 11.9904L0.630201 13.6448C0.535291 13.7248 0.485938 13.824 0.485938 13.9392C0.485938 14.0544 0.533393 14.1536 0.630201 14.2336L2.59104 15.8784C2.64229 15.9216 2.69734 15.952 2.75808 15.9712C2.81882 15.9904 2.87767 16 2.93461 16C2.99915 16 3.05989 15.9904 3.12064 15.9712C3.18138 15.952 3.23642 15.9216 3.28768 15.8784C3.38259 15.7984 3.43194 15.7008 3.43194 15.5888C3.43194 15.4752 3.38448 15.3792 3.28768 15.2992L2.15825 14.3552H11.2639C11.3987 14.3552 11.5126 14.3152 11.6075 14.2336C11.7024 14.1536 11.7517 14.0528 11.7517 13.936C11.7517 13.8224 11.7043 13.7264 11.6075 13.6464C11.5145 13.5632 11.4006 13.5232 11.2658 13.5232Z" fill="white"/>
-			</symbol>
-			<symbol id="rem" enableBackground="new 0 0 458.353 458.353" viewBox="0 0 458.353 458.353">
-				<path d="m415.382 200.529h42.971l-57.294-57.294-57.294 57.294h42.971v171.882h-42.971l57.294 57.294 57.294-57.294h-42.971z"/>
-				<path d="m343.765 85.941v-85.941h-343.765v85.941h28.647v-57.294h128.912v401.059h-71.618v28.647h171.882v-28.647h-71.618v-401.059h128.912v57.294z"/>
-			</symbol>
-			<symbol id='fullScreen' viewBox="0 0 18 18">
-				<path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
-			</symbol>
-			<symbol id='folder' viewBox="0 0 60 60" >
-				<path d="M56.98,11.5H28.02V6.52c0-1.665-1.354-3.02-3.02-3.02H3.02C1.354,3.5,0,4.854,0,6.52V20.5v2v30.98  c0,1.665,1.354,3.02,3.02,3.02H56.98c1.665,0,3.02-1.354,3.02-3.02V22.5v-2v-5.98C60,12.854,58.646,11.5,56.98,11.5z M58,53.48  c0,0.563-0.457,1.02-1.02,1.02H3.02C2.457,54.5,2,54.043,2,53.48V22.5h56V53.48z M2,20.5V6.52C2,5.957,2.457,5.5,3.02,5.5H25  c0.562,0,1.02,0.457,1.02,1.02v6.98H56.98c0.563,0,1.02,0.457,1.02,1.02v5.98H2z" fill="#FFFFFF"/>
-			</symbol>
-			<symbol id='file' viewBox="0 0 512 512" >
-					<path d="M405.333,42.667h-44.632c-4.418-12.389-16.147-21.333-30.035-21.333h-32.219C288.427,8.042,272.677,0,256,0     s-32.427,8.042-42.448,21.333h-32.219c-13.888,0-25.617,8.944-30.035,21.333h-44.631C83.135,42.667,64,61.802,64,85.333v384     C64,492.865,83.135,512,106.667,512h298.667C428.865,512,448,492.865,448,469.333v-384C448,61.802,428.865,42.667,405.333,42.667     z M170.667,53.333c0-5.885,4.781-10.667,10.667-10.667h37.917c3.792,0,7.302-2.021,9.219-5.302     c5.844-10.042,16.135-16.031,27.531-16.031s21.688,5.99,27.531,16.031c1.917,3.281,5.427,5.302,9.219,5.302h37.917     c5.885,0,10.667,4.781,10.667,10.667V64c0,11.76-9.573,21.333-21.333,21.333H192c-11.76,0-21.333-9.573-21.333-21.333V53.333z      M426.667,469.333c0,11.76-9.573,21.333-21.333,21.333H106.667c-11.76,0-21.333-9.573-21.333-21.333v-384     c0-11.76,9.573-21.333,21.333-21.333h42.667c0,23.531,19.135,42.667,42.667,42.667h128c23.531,0,42.667-19.135,42.667-42.667     h42.667c11.76,0,21.333,9.573,21.333,21.333V469.333z" fill="#FFFFFF"/>
-					<path d="M352,234.667H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h192     c5.896,0,10.667-4.771,10.667-10.667C362.667,239.438,357.896,234.667,352,234.667z" fill="#FFFFFF"/>
-					<path d="M352,277.333H160c-5.896,0-10.667,4.771-10.667,10.667s4.771,10.667,10.667,10.667h192     c5.896,0,10.667-4.771,10.667-10.667S357.896,277.333,352,277.333z" fill="#FFFFFF"/>
-					<path d="M352,320H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h192     c5.896,0,10.667-4.771,10.667-10.667C362.667,324.771,357.896,320,352,320z" fill="#FFFFFF"/>
-					<path d="M266.667,362.667H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h106.667     c5.896,0,10.667-4.771,10.667-10.667C277.333,367.438,272.563,362.667,266.667,362.667z" fill="#FFFFFF"/>
-			</symbol>
-			<symbol	id="pencil" viewBox="0 0 512 512">
-			<g>
-			<polygon points="85.333,282.64 85.333,362.64 165.333,362.64 378.667,149.307 298.667,69.307 			"/>
-			<path d="M441.707,56.08L391.893,6.267c-8.32-8.32-21.867-8.32-30.187,0L320,47.973l80,80l41.707-41.707
-				C450.027,77.947,450.027,64.4,441.707,56.08z"/>
-		</g>
-		<g >
-		<rect y="426.64" width="512" height="85.333"/>
-	</g>
-				</symbol>
-			<svg
-                x='0px'
-                y='0px'
-                viewBox='0 0 512 512'
-                enableBackground= 'new 0 0 512 512'
-				id='smileIcon'
-              >
-                <path
-                  fill= '#f00'
-                  d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
-        c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
-        L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
-        C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
-        C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
-        S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
-        S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
-        S326.327,212.122,344,212.122z'
-                />
-              </svg>
-		</svg>
-	</div>
-</body>
-</html>
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel=stylesheet href="./css/style.css">
+	<link rel="stylesheet" href="https://webfonts.zoho.com/css?family=Poppins:400,600,700">
+	<link
+		href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Lemonada|Lora|Open+Sans+Condensed:300|PT+Sans+Narrow|Slabo+27px|Source+Sans+Pro"
+		rel="stylesheet" />
+	<link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON"
+		rel="SHORTCUT ICON" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/github-dark.min.css">
+	<script src="./js/codemirror.js"></script>
+	<script src="./js/javascript.js"></script>
+	<script src="./js/active-line.js"></script>
+	<script src="./js/matchbrackets.js"></script>
+	<link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
+	<link rel="stylesheet" href="./css/markdown.css">
+	<title>Zoho Desk - React Components</title>
+	<script>
+		function selectText(containerid) {
+			if (document.selection) {
+				// IE
+				var range = document.body.createTextRange();
+				range.moveToElementText(document.getElementById(containerid));
+				range.select();
+				document.execCommand('copy');
+			} else if (window.getSelection) {
+				var range = document.createRange();
+				range.selectNode(document.getElementById(containerid));
+				window.getSelection().removeAllRanges();
+				window.getSelection().addRange(range);
+				document.execCommand('copy');
+			}
+		}
+	</script>
+</head>
+<body>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
+	<div id="react"></div>
+	<div class="iframeCentering">
+		<span class="posAb">Zoho Desk - React Components</span>
+		<iframe src="about:blank" id="ifm"></iframe>
+	</div>
+	<script src="/docs/js/babel.min.js"></script>
+	<script type="text/babel">
+		window.loadDOC = function (Component, mdata) {
+			window.RTLmode = false;
+			var ReactDOM = Component.ReactDOM;
+			window.React = Component.React;
+			window.ReactDOM = Component.ReactDOM;
+			var React = Component.React;
+			class Doc extends React.Component {
+				constructor(props) {
+					super(props);
+					let folderNameDefault = '';
+					let groupNameDefault = '';
+					(location.hash && props.componentObj) ? Object.keys(props.componentObj).map((flName) => {
+						let fname = props.componentObj[flName]
+						Object.keys(fname).map((grName) => {
+							if ((fname[grName].indexOf(location.hash.substring(1)) > -1)) {
+								folderNameDefault = flName;
+								groupNameDefault = grName;
+							}
+						})
+					}) : null
+					if (folderNameDefault == '' && groupNameDefault == '') {
+						folderNameDefault = 'Global'
+						groupNameDefault = 'General'
+					}
+					this.state = {
+						componentObj: props.componentObj,
+						duplicates: props.duplicates,
+						search: '',
+						selectedComponent: location.hash,
+						Components: Component,
+						//popUp: '',
+						fullScreenSrc: '',
+						viewGroup: groupNameDefault,
+						viewFolder: folderNameDefault,
+						moreInform: false,
+						infoTab: 'component',
+						changeset: null,
+						version: '',
+						frameWidth: '100%',
+						isMenuClose: false,
+						isRTL: false,
+						isRem: true,
+						isRemOpen: false,
+						rootSize: 16,
+						pixelSize: 16,
+						resultRem: '1rem',
+						responsiveMenu: false,
+						device: 'LAPTOP_M',
+						compList: 'Unused',
+						windowSize: { height: 0, width: 0 },
+						isEditMode: false
+					};
+					this.search = this.search.bind(this);
+					this.clear = this.clear.bind(this);
+					// this.toggleRemContainer = this.toggleRemContainer.bind(this);
+					this.hashChange = this.hashChange.bind(this);
+					//this.popupToggle = this.popupToggle.bind(this);
+					//this.popupToggleDoc = this.popupToggleDoc.bind(this);
+					this.removeClose = this.removeClose.bind(this);
+					//this.fullScreenSrcToggle = this.fullScreenSrcToggle.bind(this);
+					this.toggleFolder = this.toggleFolder.bind(this);
+					this.toggleGroup = this.toggleGroup.bind(this);
+					this.onTabinfo = this.onTabinfo.bind(this);
+					this.codeview = this.codeview.bind(this);
+					this.reloadFrame = this.reloadFrame.bind(this);
+					this.getFileDetails = this.getFileDetails.bind(this);
+					this.iframeSize = this.iframeSize.bind(this);
+					this.menuOpen = this.menuOpen.bind(this);
+					this.onRtlView = this.onRtlView.bind(this);
+					this.onREMView = this.onREMView.bind(this);
+					this.toggleEditMode = this.toggleEditMode.bind(this);
+					// this.calculatePxToRem = this.calculatePxToRem.bind(this);
+					// this.calculateRemToPx = this.calculateRemToPx.bind(this);
+					// this.onChangeRem = this.onChangeRem.bind(this);
+					// this.onChangePixel = this.onChangePixel.bind(this);
+					// this.onChangeBase = this.onChangeBase.bind(this);
+					this.responseMenu = this.responseMenu.bind(this);
+					this.getWindow = this.getWindow.bind(this);
+					this.fullView = this.fullView.bind(this);
+					this.handleURL = this.handleURL.bind(this);
+					this.compList = this.compList.bind(this);
+					this.unusedList = this.unusedList.bind(this);
+					this.getHookType = this.getHookType.bind(this);
+				}
+				fullView() {
+					this.setState({ isMenuClose: !this.state.isMenuClose })
+				}
+				toggleEditMode() {
+					var iframe = document.getElementById('componentIframe');
+					if (iframe) {
+						var currentMode = iframe.contentDocument.documentElement.getAttribute('contenteditable');
+						if (currentMode == "true") {
+							iframe.contentDocument.documentElement.setAttribute('contenteditable', "false");
+							this.setState({ isEditMode: false });
+						}
+						else {
+							iframe.contentDocument.documentElement.setAttribute('contenteditable', "true");
+							this.setState({ isEditMode: true });
+						}
+					}
+				}
+				compList(e) {
+					if (e == this.state.compList) {
+					}
+					else if (e !== this.state.compList) {
+						this.setState({ compList: e })
+					}
+					else {
+						this.setState({ compList: '' })
+					}
+				}
+				getWindow() {
+					var iframe = document.getElementById('componentIframe')
+					if (iframe) {
+						this.setState({ windowSize: { height: iframe.offsetHeight, width: iframe.offsetWidth } })
+					}
+				}
+				responseMenu() {
+					this.setState({ responsiveMenu: !this.state.responsiveMenu })
+				}
+				// toggleRemContainer() {
+				// 	this.setState({ isRemOpen: !this.state.isRemOpen });
+				// }
+				// calculatePxToRem() {
+				// 	let result = Number((this.state.pixelSize / this.state.rootSize).toFixed(4));
+				// 	this.setState({ resultRem: result + "rem" });
+				// }
+				// calculateRemToPx() {
+				// 	let result = Number(((Number(parseFloat(this.state.resultRem)) * this.state.rootSize).toFixed(4)));
+				// 	this.setState({ pixelSize: result });
+				// }
+				// onChangeBase(e) {
+				// 	let result = Number((this.state.pixelSize / e.target.value).toFixed(4));
+				// 	this.setState({ rootSize: e.target.value, resultRem: result + "rem" });
+				// }
+				// onChangePixel(e) {
+				// 	let result = Number((e.target.value / this.state.rootSize).toFixed(4));
+				// 	this.setState({ pixelSize: e.target.value, resultRem: result + "rem" });
+				// }
+				// onChangeRem(e) {
+				// 	let result = Number(((Number(parseFloat(e.target.value)) * this.state.rootSize).toFixed(4)));
+				// 	this.setState({ resultRem: e.target.value, pixelSize: result });
+				// }
+				toggleFolder(name, e) {
+					let { viewFolder } = this.state;
+					if (name == viewFolder) {
+						name = ''
+					}
+					this.setState({ viewFolder: name });
+				}
+				hashChange() {
+					let ele = document.getElementById('componentIframe')
+					if (ele) {
+						var src = document.getElementById('componentIframe').src;
+						var url = src && src.split('#')[0];
+						document.getElementById('componentIframe').src = url + location.hash;
+					}
+					this.setState({ selectedComponent: location.hash, infoTab: 'component' });
+				}
+				toggleGroup(name) {
+					let element = name;
+					let { viewGroup } = this.state;
+					if (name == viewGroup) {
+						name = ''
+					}
+					this.setState({ viewGroup: name });
+				}
+				componentDidMount() {
+					window.addEventListener('hashchange', this.hashChange);
+					onLoader()
+					let iframeEle = document.getElementById('componentIframe')
+					iframeEle.contentWindow.addEventListener('resize', this.getWindow)
+					this.getWindow()
+					let index = document.getElementsByClassName('iframeCentering')
+					index ? index[0].style.display = 'none' : null
+					if (!this.state.selectedComponent) {
+						this.setState({ infoTab: 'dashboard' })
+					}
+					//document.addEventListener('click', this.popupToggleDoc);
+					fetch('/cli/version').then((res) => { return res.json() }).then((response) => {
+						(response && response.version) ? this.setState({ version: response.version }) : this.setState({ version: "version get failure" })
+					}).catch(function (err) {
+						this.setState({ changeset: "Error accured" })
+					});
+				}
+				codeview() {
+					let compName = location.hash != '' ? location.hash.substring(1) : null;
+					let element = document.getElementById('codeView')
+					if (componentList[compName] && typeof CodeMirror !== 'undefined' && element) {
+						CodeMirror(element, {
+							value: '',
+							lineNumbers: false,
+							styleActiveLine: false,
+							matchBrackets: false,
+							theme: 'blackboard',
+						});
+					}
+				}
+				componentWillUnmount() {
+					let iframe = document.getElementById('componentIframe');
+					//document.removeEventListener('click', this.popupToggleDoc);
+					iframe.contentWindow.removeEventListener('resize', this.getWindow)
+					window.removeEventListener('hashchange', this.hashChange);
+					window.removeEventListener('error', this.reloadFrame);
+				}
+				search(e) {
+					this.setState({ search: e.target.value });
+				}
+				clear(e) {
+					this.setState({ search: '' });
+				}
+				// popupToggleDoc() {
+				// 	this.setState({ popUp: ''});
+				// }
+				// fullScreenSrcToggle(select) {
+				// 	this.setState({ fullScreenSrc: select });
+				// 	this.popupToggleDoc();
+				// }
+				removeClose(e) {
+					e.stopPropagation && e.stopPropagation();
+					e.nativeEvent.stopImmediatePropagation &&
+						e.nativeEvent.stopImmediatePropagation();
+				}
+				filter(list, str) {
+					list = list.sort((a, b) => {
+						var at = a.toLowerCase();
+						var bt = b.toLowerCase();
+						return at > bt ? 1 : at < bt ? -1 : 0;
+					});
+					// return list.filter(
+					//   item => item.toUpperCase().indexOf(str.toUpperCase()) != -1
+					// );
+					return list.filter((item) => {
+						let value = item.split('__')[0]
+						return value.toUpperCase().indexOf(str.toUpperCase()) != -1
+					})
+				}
+				onTabinfo(name) {
+					this.setState({ infoTab: name })
+				}
+				reloadFrame() {
+					let iframeEle = document.getElementById('componentIframe');
+					//this.getWindow()
+					iframeEle.contentDocument.location.reload()
+					parent.document.getElementById("loadingText").style.display = 'block'
+				}
+				getFileDetails() {
+					this.onTabinfo('changeset')
+					let compName = location.hash != '' ? location.hash.substring(1) : null;
+					let compNameSub = window.componentList ? window.componentList[compName].docs.filePath : Component[compName].docs.filePath || ''
+					let name = compNameSub ? compNameSub.split('__')[0] : '';
+					let propComName = name.replace("docs", "/").split('/')[0] + name.split("docs")[1]
+					fetch('/author/get?componentName=' + propComName + '.js').then((res) => { return res.json() }).then((response) => {
+						(response && response.stdout) ? this.setState({ changeset: response.stdout }) : this.setState({ changeset: "response is empty" })
+					}).catch(function (err) {
+						this.setState({ changeset: "Error accured" })
+					});
+				}
+				iframeSize() {
+					let slider = document.getElementById('myRange')
+					let iframe = document.getElementById('componentIframe');
+					let value = slider.value;
+					let borderSize = 30;
+					let sizes = {
+						'1': { device: 'MOBILE_XS', frameWidth: 320 + borderSize },
+						'2': { device: 'MOBILE_S', frameWidth: 360 + borderSize },
+						'3': { device: 'MOBILE_M', frameWidth: 375.04 + borderSize },
+						'4': { device: 'MOBILE', frameWidth: 480 + borderSize },
+						'5': { device: 'TABLET_S', frameWidth: 640 + borderSize },
+						'6': { device: 'TABLET_M', frameWidth: 720 + borderSize },
+						'7': { device: 'TABLET', frameWidth: 768 + borderSize },
+						'8': { device: 'LAPTOP_S', frameWidth: 1024 + borderSize },
+						'9': { device: 'LAPTOP_M', frameWidth: 1280 + borderSize },
+						'10': { device: 'LAPTOP', frameWidth: 1440 + borderSize },
+						'11': { device: 'MONITOR_M', frameWidth: 1600 + borderSize },
+						'12': { device: 'MONITOR', frameWidth: 1920 + borderSize }
+					}
+					this.setState(sizes[value]);
+					this.getWindow()
+				}
+				menuOpen() {
+					this.setState({ isMenuClose: !this.state.isMenuClose })
+				}
+				onRtlView(e) {
+					let iframeEle = document.getElementById('componentIframe');
+					let ele = e.target.element || null
+					if (!this.state.isRTL) {
+						this.setState({ isRTL: true })
+						window.RTLmode = true;
+						iframeEle.contentDocument.documentElement.setAttribute('dir', 'rtl');
+					} else {
+						this.setState({ isRTL: false })
+						iframeEle.contentDocument.documentElement.setAttribute('dir', 'ltr');
+						window.RTLmode = false;
+					}
+				}
+				onREMView(e) {
+					let iframeEle = document.getElementById('componentIframe');
+					let ele = e.target.element || null
+					if (!this.state.isRem) {
+						this.setState({ isRem: true })
+						iframeEle.contentDocument.documentElement.classList.add('isRem');
+					} else {
+						this.setState({ isRem: false })
+						iframeEle.contentDocument.documentElement.classList.remove('isRem');
+					}
+				}
+				handleURL() {
+					this.setState({ viewFolder: 'General', viewGroup: 'Global', infoTab: 'dashboard' })
+					window.history.pushState("", "", '/docs/');
+				}
+				unusedList(mdata) {
+					let dbList = [];
+					Object.keys(mdata).map((item, i) => {
+						if (mdata[item].references.length <= 0 && mdata[item].referencedby.length <= 0) {
+							return dbList.push(item);
+						}
+					})
+					return dbList
+				}
+				getHookType(propInfo, value) {
+					if (propInfo[value]) {
+						if (propInfo[value].hookType) {
+							let hookType = propInfo[value].hookType;
+							if (hookType.includes("union")) {
+								hookType = hookType.replace("union", 'oneOfType ');
+							}
+							if (hookType.includes("enum")) {
+								hookType = hookType.replace("enum", "oneOf ");
+							}
+							return hookType;
+						} else {
+							return '';
+						}
+					} else {
+						return '';
+					}
+				}
+				render() {
+					const {
+						Components,
+						componentObj,
+						search,
+						selectedComponent,
+						//popUp,
+						viewGroup,
+						viewFolder,
+						moreInform,
+						infoTab,
+						changeset,
+						version,
+						frameWidth,
+						isMenuClose,
+						isRTL,
+						isRem,
+						isRemOpen,
+						rootSize,
+						pixelSize,
+						resultRem,
+						duplicates,
+						isEditMode
+					} = this.state;/* Components & componentObj no need in the state access in props itself*/
+					let devices = [{ device: 'MOBILE', sizes: ['XS', 'S', 'M', 'D'] }, { device: 'TABLET', sizes: ['S', 'M', 'D'] }, { device: 'LAPTOP', sizes: [, 'S', 'M', 'D'] }, { device: 'MONITOR', sizes: ['M', 'D'] }]
+					let compValue = 'compValue';
+					let reactCliVersion = version.split(' ').filter(function (el) { return el.toLowerCase().indexOf("fz-react-cli@") > -1; });
+					//let versionFz = reactCliVersion.length ? reactCliVersion[0].substring(reactCliVersion[0].indexOf('@') + 1, reactCliVersion[0].length) : '';
+					let compName = location.hash != '' ? location.hash.substring(1) : null;
+					let propComName = compName;
+					let propsObj = Window.componentList && window.componentList[propComName] && window.componentList[propComName].docs.propTypes || (Components[propComName] && Components[propComName].docs.propTypes) || {};
+					let currentCompProps = propsObj;
+					let defaultProps = Window.componentList && window.componentList[propComName] && window.componentList[propComName].docs.defaultProps || (Components[propComName] && Components[propComName].docs.defaultProps) || {};
+					let currentCompPropsDescription = window.componentList && window.componentList[propComName] && window.componentList[propComName].docs.propsDescription || (Components[propComName] && Components[propComName].docs.propsDescription) || {};
+					let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].docs.defaultProps || (Components[propComName] && Components[propComName].docs.defaultProps) || {};
+					let componentsObj = componentObj && this.filter(Object.keys(componentObj), '').map((item, i) => {
+						return ({ key: item, value: componentObj[item], length: Object.keys(componentObj[item]).length })
+					})
+					let compObjList = componentsObj
+					let dashboardList = [
+						this.unusedList(mdata) && { name: 'Unused', componentList: this.unusedList(mdata) },
+						duplicates && { name: 'Duplicates', componentList: duplicates }
+					]
+					let defaultPropsArray = []
+					let currentDefaultPropsArray = []
+					defaultProps.length && defaultProps.forEach((value) => {
+						currentDefaultPropsArray.push(value)
+					})
+					let _propTypesToDefaultPropsArray = []
+					let propsDesArray = []
+					let _propTypesToPropsDesArray = []
+					return (
+						<main className="dflex flexrow">
+							<div className="showToggleLeft" onClick={this.menuOpen}>
+								<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGOSURBVGhD7ZrBKkVBHIdPSNKV5A3YKSvvYG/BE0jI3tbGxsYGdTeeQnY8gcLOTigba1KE73ewOGUxc8/8/2fUfPXVndOd23ydM92ae6sIeniIT/iZgW94hYsYxTH+9YFd+4pzGMQIvqAmzepCBgzhESpmRxdCmERNuKtH+bCBWpeCgighxpSQEmJECSkhRpSQkJBRvMFTHNcFQ0xDxvAW9f5ztIwxf7Rm8B6tY1z2iEeM22a3jnELEZYxriHCKsY9RFjERIfo4OECT+rR4KSOiQ5JScqYRsgULji7jM/YNqYR8vAz6NIz1KlILI2QfdTz762Ol7SID1zFQeh0j4gtVECbCBEdMox6tufrUTtSRYjokBTfIyJlhOgkJHWEcA+xiBCuIVYRwi3EMkK4hFhHCPMQjwhhGjKN72gdIczvyDYufb80xW2zW1NCSogRJaSEGFFC/n3IBGrCYz3Kh03Uug7qUSC/x0Z7uJaB63iNWpPuTDArqP9IaWJOXqJ+JYtCJym72M9A7QvdFSKq6gtlqbpowcg25wAAAABJRU5ErkJggg==" />
+							</div>
+							<div className={"menuBar " + (isMenuClose ? "isMenuClose" : "isMenuOpen")}>
+								<div className="dflex flexcolumn">
+									<div className="flexshrink logoPart dflex">
+										<img src="./css/desklogo.png" />
+										<div className={'home'} onClick={this.handleURL}>
+											<span className='homeIcon'>
+												<svg className='svg'>
+													<use xlinkHref='#home'></use>
+												</svg>
+											</span>
+										</div>
+									</div>
+									<div className="flexgrow flexbasis sliderContainer">
+										<div className="dflex flexcolumn">
+											<div className="flexshrink searchPart">
+												<Search onChange={this.search} value={search} onClear={this.clear} />
+											</div>
+											<menu className="flexgrow flexbasis scrollY menuContainer" id="leftPanel">
+												{
+													compObjList && Object.keys(compObjList).length && compObjList.map(comp => {
+														let folderName = comp.key
+														let folderCompCount = 0;
+														let sortList = this.filter(Object.keys(componentObj[folderName]), '').map(grpName => {
+															return ({
+																fName: grpName,
+																components: componentObj[folderName][grpName],
+																length: (componentObj[folderName][grpName].filter(function (el) { return el.toLowerCase().indexOf('__') > -1 }).length)
+															})
+														})
+														let outcomp = Object.keys(componentObj[folderName]).sort().map(
+															grn => {
+																let searchList = this.filter(
+																	componentObj[folderName][grn],
+																	search
+																);
+																if (searchList.length) {
+																	folderCompCount = folderCompCount + 1;
+																}
+																return searchList.length ? true : false;
+															}
+														);
+														if (outcomp.indexOf(true) != -1) {
+															return (
+																<div>
+																	<div
+																		onClick={this.toggleFolder.bind(
+																			this,
+																			folderName
+																		)}
+																		className={'mainMenu dflex flexrow alignVertical offSelection' + ' ' +
+																			(viewFolder == folderName
+																				? 'mainMenuActive'
+																				: '')
+																		}
+																	>
+																		<span className={'flexgrow mainMenutitle dotted'}>{folderName}</span>
+																		<span className={'flexshrink mainMenuCount'}>{folderCompCount}</span>
+																		<i className={'flexshrink mainMenuArrow'}>
+																			<svg className='svg'>
+																				<use xlinkHref='#bottomArrow'></use>
+																			</svg>
+																		</i>
+																	</div>
+																	<div
+																		className={
+																			viewFolder == folderName || search
+																				? 'folderOpen'
+																				: 'hide'
+																		}
+																	>
+																		{
+																			sortList.map((grpName) => {
+																				return (
+																					<ComponentList
+																						type={grpName.fName}
+																						components={this.filter(
+																							componentObj[folderName][grpName.fName],
+																							search
+																						)}
+																						selectedComponent={selectedComponent}
+																						toggleGroup={this.toggleGroup}
+																						viewGroup={
+																							search ? grpName.fName : viewGroup
+																						}
+																					/>)
+																			})
+																		}
+																	</div>
+																</div>
+															);
+														} else {
+															return null;
+														}
+													})
+												}
+											</menu>
+											{
+												// versionFz != '' &&
+												// <div className="flexshrink versionPart ">
+												// 	<span>Version {versionFz}</span>
+												// </div>
+											}
+									{/*<div className="flexshrink tools" onClick={this.toggleRemContainer}>
+												<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
+												<span>REM Converter</span>
+											</div>
+										*/}
+										</div>
+								{/*		<div className={"slider " + (isRemOpen ? 'sopen' : '')}>
+											<div className="tools sliderHeader">
+												<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
+												<span className="sliderTitle">REM Converter</span>
+												<span className="searchClose" onClick={this.toggleRemContainer}>
+													<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxMi45ODIgMjEyLjk4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEyLjk4MiAyMTIuOTgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJDbG9zZSI+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7IiBkPSJNMTMxLjgwNCwxMDYuNDkxbDc1LjkzNi03NS45MzZjNi45OS02Ljk5LDYuOTktMTguMzIzLDAtMjUuMzEyICAgYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBsLTc1LjkzNyw3NS45MzdMMzAuNTU0LDUuMjQyYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBjLTYuOTg5LDYuOTktNi45ODksMTguMzIzLDAsMjUuMzEyICAgbDc1LjkzNyw3NS45MzZMNS4yNDIsMTgyLjQyN2MtNi45ODksNi45OS02Ljk4OSwxOC4zMjMsMCwyNS4zMTJjNi45OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwbDc1LjkzNy03NS45MzdsNzUuOTM3LDc1LjkzNyAgIGM2Ljk4OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwYzYuOTktNi45OSw2Ljk5LTE4LjMyMiwwLTI1LjMxMkwxMzEuODA0LDEwNi40OTF6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
+												</span>
+											</div>
+											<div className="sliderFormContainer">
+												<div className="sliderInputContainer">
+													<label className="sliderInputTitle">Base  font-size (in px)</label>
+													<input type="number" className="sliderInput" min="1" placeholder="Base  font-size (in px)" value={rootSize} onChange={this.onChangeBase} />
+												</div>
+												<div className="sliderInputContainer">
+													<label className="sliderInputTitle">PX size to convert</label>
+													<input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} />
+												</div>
+												<div className="sliderInputContainer">
+													<label className="sliderInputTitle">Result</label>
+													<div className="sliderResult">
+														<input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} />
+														<span id="remoutput" className="copyTxtHiden">{resultRem}</span>
+														<span className="copyResult" onClick={selectText.bind(this, 'remoutput')}>
+															<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OC4zIDQ4OC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODguMyA0ODguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTMxNC4yNSw4NS40aC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42djMyNS43YzAsMjEuMywxNy4zLDM4LjYsMzguNiwzOC42aDIyN2MyMS4zLDAsMzguNi0xNy4zLDM4LjYtMzguNlYxMjQgICAgQzM1Mi43NSwxMDIuNywzMzUuNDUsODUuNCwzMTQuMjUsODUuNHogTTMyNS43NSw0NDkuNmMwLDYuNC01LjIsMTEuNi0xMS42LDExLjZoLTIyN2MtNi40LDAtMTEuNi01LjItMTEuNi0xMS42VjEyNCAgICBjMC02LjQsNS4yLTExLjYsMTEuNi0xMS42aDIyN2M2LjQsMCwxMS42LDUuMiwxMS42LDExLjZWNDQ5LjZ6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTQwMS4wNSwwaC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNWMwLTYuNCw1LjItMTEuNiwxMS42LTExLjZoMjI3ICAgIGM2LjQsMCwxMS42LDUuMiwxMS42LDExLjZ2MzI1LjdjMCw2LjQtNS4yLDExLjYtMTEuNiwxMS42Yy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVjMjEuMywwLDM4LjYtMTcuMywzOC42LTM4LjYgICAgVjM4LjZDNDM5LjY1LDE3LjMsNDIyLjM1LDAsNDAxLjA1LDB6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
+														</span>
+													</div>
+												</div>
+											</div>
+										</div>
+									*/}
+										</div>
+								</div>
+							</div>
+							<div className="flexgrow flexbasis">
+								<div id="container" className="dflex flexcolumn flexbasis">
+									{
+										infoTab == 'dashboard' ?
+											<div className='dflex flexcolumn'>
+												<div className="flexshrink cheader">
+													<div className="dflex flexrow flexbasis alignVertical">
+														<div className="flexshrink">
+															<h1 className="cheadertitle">{'Dashboard'}</h1>
+														</div>
+														<div className='flexgrow flexbasis infoTabs dflex'>
+															{
+																dashboardList.map((item, i) => {
+																	return (
+																		<span key={i} onClick={this.compList.bind(this, item.name)} className={this.state.compList == item.name ? 'dotted infoactive' : 'dotted'}>
+																			{item.name}
+																		</span>
+																	)
+																})
+															}
+														</div>
+													</div>
+												</div>
+												<div className='flexgrow scrollY'>
+													{
+														dashboardList.map((item, i) => {
+															if (this.state.compList == item.name) {
+																return (
+																	item.componentList.length > 0 ? <ul key={i}>
+																		{
+																			(item.componentList).map((component, val) => {
+																				if (component !== undefined) {
+																					return (<li key={val} className="compListItem">{component}</li>)
+																				}
+																			})
+																		}
+																	</ul> :
+																		<div className='dflex alignHorizontal alignVertical flexcolumn'>
+																			<span className='smileIcon'>
+																				<svg className='svg'>
+																					<use xlinkHref='#smileIcon'></use>
+																				</svg>
+																			</span>
+																			<div>{'Sorry! there is no ' + this.state.compList + ' components'}</div>
+																		</div>
+																)
+															}
+														})
+													}
+												</div>
+											</div>
+											: null
+									}
+									{
+										compName ?
+											<div className="flexshrink cheader">
+												<div className="dflex flexrow flexbasis alignVertical">
+													<div className="flexshrink"><h1 className="cheadertitle">{compName && compName.split('__')[0]}</h1></div>
+													<div className='flexgrow flexbasis infoTabs dflex'>
+														<span onClick={this.onTabinfo.bind(this, 'component')} className={infoTab == 'component' ? 'dotted infoactive' : 'dotted'}>Component view</span>
+														<span onClick={this.onTabinfo.bind(this, 'proptypes')} className={infoTab == 'proptypes' ? 'dotted infoactive' : 'dotted'}>PropTypes</span>
+														<span onClick={this.onTabinfo.bind(this, 'code')} className={infoTab == 'code' ? 'dotted infoactive' : 'dotted'}>Docs Code</span>
+														{
+															/*
+																<span onClick={this.onTabinfo.bind(this,'src')} className={infoTab == 'src' ? 'dotted infoactive' : 'dotted'}>Source</span>
+																<span onClick={this.onTabinfo.bind(this,'visual')} className={infoTab == 'visual' ? 'dotted infoactive' : 'dotted'}>Visual Design</span>
+															*/
+														}
+														<span onClick={this.onTabinfo.bind(this, 'references')} className={infoTab == 'references' ? 'dotted infoactive' : 'dotted'}>References</span>
+													</div>
+												</div>
+											</div>
+											: null
+									}
+									<div className="flexgrow flexbasis cfooter ">
+										<div className="dflex flexcolumn flexbasis">
+											<div className="flexgrow flexbasis ccontent">
+												{
+													infoTab == 'code' ?
+														<CodeView compName={compName} src={window.componentList ? window.componentList[compName].docs.source : Component[compName].docs.source} />
+														: null
+												}
+												{
+													infoTab == 'src' ?
+														<CodeView compName={compName + 'src'} src={window.componentList ? window.componentList[propComName].source : Component[propComName].source} />
+														: null
+												}
+												{
+													infoTab == 'component' &&
+													<div className='dflex flexcolumn'>
+														<div className={'flexgrow flexshrink flexbasis toolarea'}>
+															<section id="resize" style={{ "width": ((frameWidth) + 'px') }} className={"dflex flexcolumn flexbasis iframeSection" + " " + (frameWidth < 481 ? 'section' : '')}>
+																<span className="loadingText" id='loadingText'>
+																	<div className="lds-ripple">
+																		<div></div>
+																		<div></div>
+																	</div>
+																</span>
+																<iframe
+																	id="componentIframe"
+																	className="iframe"
+																	src={'/docs/component.html' + location.hash}
+																	mdata={mdata}
+																/>
+															</section>
+														</div>
+														<div className={'flexshrink toolOptions'}>
+															<div className={'dflex flexrow alignVertical alignHorizontal'}>
+																<div className={'responsive offSelection'}>
+																	<span className={"responsiveOption iconOption"} onClick={this.reloadFrame}>
+																		<svg className='svg'>
+																			<use xlinkHref='#reload'></use>
+																		</svg>
+																	</span>
+																	<a className={'responsiveOption iconOption'} href={'/docs/component.html' + location.hash} target="_blank" >
+																		<svg className='svg'>
+																			<use xlinkHref='#newTab'></use>
+																		</svg>
+																	</a>
+																	<span className={'responsiveOption iconOption' + ' ' + (this.state.isRTL ? 'activeOption transform' : '')} onClick={this.onRtlView}>
+																		<svg className='svg'>
+																			<use xlinkHref='#RTL'></use>
+																		</svg>
+																	</span>
+																	<span className={'responsiveOption iconOption textSize' + ' ' + (this.state.isRem ? 'activeOption' : '')} onClick={this.onREMView} >
+																		<svg className='svg'>
+																			<use xlinkHref='#rem'></use>
+																		</svg>
+																	</span>
+																	<span className={'responsiveOption iconOption textSize' + ' ' + (this.state.isEditMode ? 'activeOption' : '')} onClick={this.toggleEditMode} >
+																		<svg className='svg'>
+																			<use xlinkHref='#pencil'></use>
+																		</svg>
+																	</span>
+																	<span className={'responsiveOption iconOption fullScreen' + ' ' + (this.state.isMenuClose ? 'activeOption' : '')} onClick={this.fullView} >
+																		<svg className='svg'>
+																			<use xlinkHref='#fullScreen'></use>
+																		</svg>
+																	</span>
+																</div>
+																<div className={'dflex alignVertical alignHorizontal range'}>
+																	<input min='1' max='12' type='range' defaultValue='9' step='1' id="myRange" onChange={this.iframeSize} className='rangeInput' />
+																	<span className='tooltip'>{this.state.device}</span>
+																	{
+																		this.state.windowSize ?
+																			<React.Fragment>
+																				<span className='window'>{this.state.windowSize.width}</span>
+																				<span className='tooltipVal'>x</span>
+																				<span className='window'>{this.state.windowSize.height}</span>
+																			</React.Fragment> : null
+																	}
+																</div>
+															</div>
+														</div>
+													</div>
+												}
+												{
+													infoTab === 'proptypes' ? (
+														propsObj.length ?
+															(
+																currentCompProps.map((result, i) => {
+																	const currentDefaultProps = defaultProps[i] || { "undefined": '' };
+																	const _defaultProps = Object.keys(currentDefaultProps)[0].split('_')[0];
+																	defaultPropsArray.push(_defaultProps);
+																	const compName = Object.keys(result)[0];
+																	const _propTypes = Object.keys(result)[0].split('_')[0];
+																	const _propTypesToDefaultProps = _propTypes + '_defaultProps';
+																	const propInfo = result[compName];
+																	_propTypesToDefaultPropsArray.push(defaultPropsArray.includes(_propTypes) ? _propTypesToDefaultProps : "undefined");
+																	const currentPropDes = currentCompPropsDescription[i] || { "undefined": '' };
+																	const _propDes = Object.keys(currentPropDes)[0].split('_')[0];
+																	propsDesArray.push(_propDes);
+																	const _propTypesToPropsDes = _propTypes + '_propsDescription';
+																	_propTypesToPropsDesArray.push(propsDesArray.includes(_propTypes) ? _propTypesToPropsDes : "undefined");
+																	return (
+																		<div className='propsTableContainer'>
+																			<div className="compName">{compName.split('_')[0]}</div>
+																			<div className="propsTable" key={compName}>
+																				<div className="tableHeader">
+																					<span className="brR">PropsName</span>
+																					<span className="brR">Type</span>
+																					<span className="brR">isRequired</span>
+																					<span className="brR">Default Props</span>
+																					{
+																						currentCompPropsDescription ? <span className="brR">Props Description</span> : null
+																					}
+																				</div>
+																				{Object.keys(propInfo).sort().map((value, j) => (
+																					<div
+																						className={'tableHeader'}
+																						key={`${i}-${j}`}
+																					>
+																						<span>
+																							<div >{value}</div>
+																						</span>
+																						<span>
+																							{(() => {
+																								const hookInfo = propInfo[value];
+																								const hookType = hookInfo && hookInfo.hookType;
+																								if (!hookType) return null;
+																								let typeTagClass = 'typeTag';
+																								if (hookType === 'string') {
+																									typeTagClass += ' stringType';
+																								} else if (hookType === 'bool') {
+																									typeTagClass += ' boolType';
+																								} else if (hookType === 'func') {
+																									typeTagClass += ' funcType';
+																								} else if (hookType.includes('union') || hookType.includes('enum')) {
+																									typeTagClass += ' oneOfType';
+																								} else if (hookType === 'object') {
+																									typeTagClass += ' objectType';
+																								} else if (hookType === 'element') {
+																									typeTagClass += ' elementType';
+																								} else if (hookType === 'array') {
+																									typeTagClass += ' arrayType';
+																								} else if (hookType === 'shape') {
+																									typeTagClass += ' shapeType';
+																								} else if (hookType === 'number') {
+																									typeTagClass += ' numberType';
+																								}
+																								return <div className={typeTagClass}>{this.getHookType(propInfo, value)}</div>;
+																							})()}
+																						</span>
+																						<span>
+																							{
+																								propInfo[value] && propInfo[value].isRequired ? (
+																									<input type="checkbox" disabled></input>
+																								) : (
+																									<input type="checkbox" onclick="return false" checked></input>
+																								)
+																							}
+																						</span>
+																						<span>
+																							<div>
+																								{_propTypesToDefaultPropsArray[i] !== 'undefined'
+																									? JSON.stringify(
+																										currentDefaultPropsArray.find(
+																											(element) => Object.keys(element)[0] === _propTypesToDefaultPropsArray[i]
+																										)[_propTypesToDefaultProps][value]
+																									) || '-'
+																									: ''}
+																							</div>
+																						</span>
+																						{
+																							currentCompPropsDescription ? (
+																								<span>
+																									<div>
+																										{
+																											_propTypesToPropsDesArray[i] !== 'undefined'
+																												? currentCompPropsDescription.find(
+																													(element) => Object.keys(element)[0] === _propTypesToPropsDesArray[i]
+																												)[_propTypesToPropsDes][value] || '-'
+																												: '-'
+																										}
+																									</div>
+																								</span>
+																							) : null
+																						}
+																					</div>
+																				))}
+																			</div>
+																		</div>
+																	);
+																})
+															) : (
+																<div className='propsTableContainer'>
+																	<div className="compName">{compName.split('_')[1].split('__')[0]}</div>
+																	<div className="propsTable">
+																		<div className="tableHeader">
+																			<span className="brR">PropsName</span>
+																			<span className="brR">Type</span>
+																			<span className="brR">isRequired</span>
+																			<span className="brR">Default Props</span>
+																			{
+																				Object.keys(currentCompPropsDescription).length > 0 ? <span className="brR">Props Description</span> : null
+																			}
+																		</div>
+																		{
+																			Object.keys(currentCompProps).sort().map((result, i) => {
+																				return (
+																					<div
+																						className={'tableHeader'}
+																						key={`${i}`}
+																					>
+																						<span>
+																							<div>{result}</div>
+																						</span>
+																						<span>
+																							{(() => {
+																								const hookInfo = propsObj[result];
+																								const hookType = hookInfo && hookInfo.hookType;
+																								if (!hookType) return null;
+																								let typeTagClass = 'typeTag';
+																								if (hookType === 'string') {
+																									typeTagClass += ' stringType';
+																								} else if (hookType === 'bool') {
+																									typeTagClass += ' boolType';
+																								} else if (hookType === 'func') {
+																									typeTagClass += ' funcType';
+																								} else if (hookType.includes('union') || hookType.includes('enum')) {
+																									typeTagClass += ' oneOfType';
+																								} else if (hookType === 'object') {
+																									typeTagClass += ' objectType';
+																								} else if (hookType === 'element') {
+																									typeTagClass += ' elementType';
+																								} else if (hookType === 'array') {
+																									typeTagClass += ' arrayType';
+																								} else if (hookType === 'shape') {
+																									typeTagClass += ' shapeType';
+																								} else if (hookType === 'number') {
+																									typeTagClass += ' numberType';
+																								}
+																								return <div className={typeTagClass}>{this.getHookType(propsObj, result)}</div>;
+																							})()}
+																						</span>
+																						<span>
+																							{
+																								propsObj[result] && propsObj[result].isRequired ? (
+																									<input type="checkbox" disabled></input>
+																								) : (
+																									<input type="checkbox" onclick="return false" checked></input>
+																								)
+																							}
+																						</span>
+																						<span>
+																							<div>{JSON.stringify(defaultProps[result]) || '-'}</div>
+																						</span>
+																						{
+																							Object.keys(currentCompPropsDescription).length > 0 ? (
+																								<span>
+																									<div>{currentCompPropsDescription[result] || '-'}</div>
+																								</span>
+																							) : null
+																						}
+																					</div>
+																				);
+																			})
+																		}
+																	</div>
+																</div>
+															)
+													) : null
+												}
+												{
+													infoTab == 'references' ?
+														<div className="referContainer">
+															<div className='refsBy'>ReferencedBy :</div>
+															<ul>
+																{
+																	compName ?
+																		compName.indexOf('__') > -1 ?
+																			mdata[compName.substring(0, compName.indexOf('_'))] &&
+																			mdata[compName.substring(0, compName.indexOf('_'))].referencedby.map((val, i) => {
+																				return (
+																					<li key={i} className='refsLin'>
+																						<a className="link" href={'#' + val}>
+																							{val}
+																						</a>
+																					</li>
+																				);
+																			})
+																			: mdata[compName].referencedby.map((val, i) => {
+																				return (
+																					<li key={i} className='refsLin'>
+																						<a className="link" href={'#' + val}>
+																							{val}
+																						</a>
+																					</li>
+																				);
+																			})
+																		: null
+																}
+															</ul>
+															<div className='refsBy'>References : </div>
+															<ul>
+																{
+																	compName ? compName.indexOf('__') > -1
+																		? mdata[
+																		compName.substring(0, compName.indexOf('_'))
+																		] &&
+																		mdata[
+																			compName.substring(0, compName.indexOf('_'))
+																		].references.map((val, i) => {
+																			return (
+																				<li key={i} className='refsLin'>
+																					<a className="link" href={'#' + val}>
+																						{val}
+																					</a>
+																				</li>
+																			);
+																		})
+																		: mdata[compName].references.map((val, i) => {
+																			return (
+																				<li key={i} className='refsLin'>
+																					<a className="link" href={'#' + val}>
+																						{val}
+																					</a>
+																				</li>
+																			);
+																		})
+																		: null
+																}
+															</ul>
+														</div>
+														: null
+												}
+												{
+													/*infoTab == 'visual' ?
+														<div>
+															{
+																Component[propComName] &&
+																Component[propComName].docs &&
+																Component[propComName].docs.images &&
+																Component[propComName].docs.images.map(image => {
+																return (
+																	<div className="psdContainer">
+																		<div className="imageContainer">
+																			<img className="psdImage" src={image.view} />
+																		</div>
+																			<div>
+																				<a className="psdLink" href={image.psd} target="_blank" download>
+																					Download PSD
+																				</a>
+																			</div>
+																			<div>
+																				<a className="psdLink" href={image.view} target="_blank" download>
+																					Download Image
+																				</a>
+																			</div>
+																		</div>
+																	);
+																})
+															}
+														</div>
+													: null */
+												}
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</main>
+					);
+				}
+			}
+			class Search extends React.Component {
+				render() {
+					return (
+						<div className="searchContainer">
+							<input
+								type="text"
+								onChange={this.props.onChange}
+								placeholder="Search"
+								className="inputSearch" value={this.props.value}
+							/>
+							{this.props.value.length >= 1 &&
+								<span className="searchClose" onClick={this.props.onClear}><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxMi45ODIgMjEyLjk4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEyLjk4MiAyMTIuOTgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJDbG9zZSI+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7IiBkPSJNMTMxLjgwNCwxMDYuNDkxbDc1LjkzNi03NS45MzZjNi45OS02Ljk5LDYuOTktMTguMzIzLDAtMjUuMzEyICAgYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBsLTc1LjkzNyw3NS45MzdMMzAuNTU0LDUuMjQyYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBjLTYuOTg5LDYuOTktNi45ODksMTguMzIzLDAsMjUuMzEyICAgbDc1LjkzNyw3NS45MzZMNS4yNDIsMTgyLjQyN2MtNi45ODksNi45OS02Ljk4OSwxOC4zMjMsMCwyNS4zMTJjNi45OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwbDc1LjkzNy03NS45MzdsNzUuOTM3LDc1LjkzNyAgIGM2Ljk4OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwYzYuOTktNi45OSw2Ljk5LTE4LjMyMiwwLTI1LjMxMkwxMzEuODA0LDEwNi40OTF6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /></span>}
+						</div>
+					);
+				}
+			}
+			class ComponentList extends React.Component {
+				constructor(props) {
+					super(props);
+					this.state = {
+						toggle: false
+					};
+				}
+				componentDidMount() {
+					let { type, viewGroup } = this.props;
+					let element = document.getElementById(type);
+					viewGroup == type && element ?
+						element.scrollIntoView(true) && element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })
+						: null
+				}
+				render() {
+					const { components, type, toggleGroup, viewGroup } = this.props;
+					let classNameTab = type == viewGroup ? " selected " : '';
+					return (
+						<div data-title={type}>
+							{
+								components.length > 0 && <div className={"listItem dflex flexrow flexbasis alignVertical offSelection " + classNameTab} onClick={toggleGroup.bind(this, type)} id={type}>
+									<i className={"flexshrink listIcon"}>
+										<svg className='svg'>
+											<use xlinkHref='#folder'></use>
+										</svg>
+									</i>
+									<span className="dotted flexgrow flexbasis listTitle">{type}</span>
+									{
+										components.length > 0 && <i className={"flexshrink listCount"}>{(components.filter(function (el) { return el.toLowerCase().indexOf('__') > -1 }).length)}</i>
+									}
+								</div>
+							}
+							<div className={viewGroup == type ? 'activeComponent' : 'hide'}>
+								{
+									components.map((component, i) => {
+										let docsComp = component.search('__');
+										return (
+											<div className={((docsComp == -1) ? "componentMain" : "componentDocs")} key={'component' + i} >
+												<a
+													href={docsComp == -1 && type != 'Global' && type != 'Page' ? 'javascript:void(0);' : '#' + component}
+													className={"dflex flexrow flexbasis alignVertical offSelection " + (this.props.selectedComponent == '#' + component ? 'active' : '')} >
+													<i className={"listIcon"}>
+														<svg className='svg'>
+															<use xlinkHref='#file'></use>
+														</svg>
+													</i>
+													<span className="dotted flexgrow flexbasis listTitle"> {docsComp == -1 ? component : component.split('__')[1]}</span>
+													{(components.filter(function (el) { return el.indexOf(component + '__') > -1 }).length) > 0 && (docsComp == -1) && <i className={"flexshrink listCount subCount"}>{(components.filter(function (el) { return el.indexOf(component + '__') > -1 }).length)}</i>}
+												</a>
+											</div>
+										);
+									})}
+							</div>
+						</div>
+					);
+				}
+			}
+			class CodeView extends React.Component {
+				constructor(props) {
+					super(props);
+				}
+				componentDidMount() {
+					hljs.highlightAll();
+				}
+				render() {
+					let { src, compName } = this.props
+					return (
+						<pre className="CodeTag">
+							<code class="javascript hljs language-javascript" id="code-block">
+								{src}
+							</code>
+						</pre>
+					);
+				}
+			}
+			var user = {
+				componentObj: {},
+				componentList: {},
+				dupCompList: [],
+				objList: function (fName, gName, key, comp) {
+					if (this.componentList[key]) {
+						this.componentList[key] = comp;
+						this.dupCompList.push(key)
+					}
+					else {
+						this.componentList[key] = comp;
+					}
+					if (gName) {
+						if (!this.componentObj[fName]) {
+							this.componentObj[fName] = {}
+						}
+						if (!this.componentObj[fName][gName]) {
+							this.componentObj[fName][gName] = [];
+							this.componentObj[fName][gName].push(key)
+						}
+						else {
+							this.componentObj[fName][gName].push(key)
+						}
+					}
+					return { componentObj: this.componentObj, componentList: this.componentList }
+				},
+				renderDoc: function (compOBJ, dupCompList) {
+					return (
+						ReactDOM.render(
+							<Doc
+								components={Component}
+								componentObj={compOBJ}
+								duplicates={dupCompList}
+							/>,
+							react
+						)
+					)
+				}
+			}
+			var compGroupObj = function (comp, key, compGroup) {
+				if (comp == 'React' || comp == 'ReactDOM' || comp == 'renderToStaticMarkup') {
+					return;
+				}
+				else if (comp == '_provider') {
+					return user.objList(null, null, comp, compGroup[comp])
+				}
+				else {
+					if (compGroup[comp].docs && compGroup[comp].docs.componentGroup) {
+						let groupName = compGroup[comp].docs.componentGroup;
+						let folderName = compGroup[comp].docs.folderName || "General";
+						if (comp == 'default') {
+							return user.objList(folderName, groupName, key, compGroup[comp])
+						}
+						else {
+							return user.objList(folderName, groupName, comp, compGroup[comp])
+						}
+					}
+				}
+			}
+			Promise.all(Object.keys(Component).map((key) => {
+				let componentKey = Component[key];
+				if (key == 'React' || key == 'ReactDOM' || key == 'renderToStaticMarkup') {
+					return;
+				}
+				if (key == '_provider') {
+					return compGroupObj(key, null, Component)
+				}
+				try {
+					return (
+						componentKey && componentKey.then((res) => {
+							let compList;
+							Object.keys(res).forEach((comp) => {
+								let compGroup = res[comp];
+								Object.keys(compGroup).forEach((comps) => {
+									compGroupObj(comps, key, compGroup)
+								})
+							})
+						})
+					)
+				} catch (error) {
+					compGroupObj(key, null, Component)
+				}
+			})).then(() => {
+				window.componentList = user.componentList
+				user.renderDoc(user.componentObj, user.dupCompList)
+			})
+		};
+		var onLoader = function () {
+			// Minimum resizable area
+			var minWidth = 60;
+			var minHeight = 40;
+			// Thresholds
+			var FULLSCREEN_MARGINS = -10;
+			var MARGINS = 15;
+			// End of what's configurable.
+			var clicked = null;
+			var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;
+			var rightScreenEdge, bottomScreenEdge;
+			var preSnapped;
+			var b, x, y;
+			var redraw = false;
+			var pane = document.getElementById('resize');
+			var ghostpane = document.getElementById('ghostpane');
+			function setBounds(element, x, y, w, h) {
+				element.style.left = x + 'px';
+				element.style.top = y + 'px';
+				element.style.width = w + 'px';
+				element.style.height = h + 'px';
+			}
+			function hintHide() {
+				//setBounds(ghostpane, b.left, b.top, b.width, b.height);
+				//ghostpane.style.opacity = 0;
+				// var b = ghostpane.getBoundingClientRect();
+				// ghostpane.style.top = b.top + b.height / 2;
+				// ghostpane.style.left = b.left + b.width / 2;
+				// ghostpane.style.width = 0;
+				// ghostpane.style.height = 0;
+			}
+			// Mouse events
+			pane && pane.addEventListener('mousedown', onMouseDown);
+			pane && document.addEventListener('mousemove', onMove);
+			pane && document.addEventListener('mouseup', onUp);
+			// Touch events
+			pane && pane.addEventListener('touchstart', onTouchDown);
+			pane && document.addEventListener('touchmove', onTouchMove);
+			pane && document.addEventListener('touchend', onTouchEnd);
+			function onTouchDown(e) {
+				onDown(e.touches[0]);
+				e.preventDefault();
+			}
+			function onTouchMove(e) {
+				onMove(e.touches[0]);
+			}
+			function onTouchEnd(e) {
+				if (e.touches.length == 0) onUp(e.changedTouches[0]);
+			}
+			function onMouseDown(e) {
+				onDown(e);
+				e.preventDefault();
+			}
+			function onDown(e) {
+				calc(e);
+				var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
+				clicked = {
+					x: x,
+					y: y,
+					cx: e.clientX,
+					cy: e.clientY,
+					w: b.width,
+					h: b.height,
+					isResizing: isResizing,
+					isMoving: !isResizing && canMove(),
+					onTopEdge: onTopEdge,
+					onLeftEdge: onLeftEdge,
+					onRightEdge: onRightEdge,
+					onBottomEdge: onBottomEdge
+				};
+			}
+			function canMove() {
+				return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
+			}
+			function calc(e) {
+				b = pane.getBoundingClientRect();
+				x = e.clientX - b.left;
+				y = e.clientY - b.top;
+				onTopEdge = y < MARGINS;
+				onLeftEdge = x < MARGINS;
+				onRightEdge = x >= b.width - MARGINS;
+				onBottomEdge = y >= b.height - MARGINS;
+				rightScreenEdge = window.innerWidth - MARGINS;
+				bottomScreenEdge = window.innerHeight - MARGINS;
+			}
+			var e;
+			function onMove(ee) {
+				calc(ee);
+				e = ee;
+				redraw = true;
+			}
+			function animate() {
+				requestAnimationFrame(animate);
+				if (!redraw) return;
+				redraw = false;
+				if (clicked && clicked.isResizing) {
+					if (clicked.onRightEdge) pane.style.width = Math.max(x, minWidth) + 'px';
+					if (clicked.onBottomEdge)
+						pane.style.height = Math.max(y, minHeight) + 'px';
+					if (clicked.onLeftEdge) {
+						var currentWidth = Math.max(
+							clicked.cx - e.clientX + clicked.w,
+							minWidth
+						);
+						if (currentWidth > minWidth) {
+							pane.style.width = currentWidth + 'px';
+							//  pane.style.left = e.clientX + 'px';
+						}
+					}
+					if (clicked.onTopEdge) {
+						var currentHeight = Math.max(
+							clicked.cy - e.clientY + clicked.h,
+							minHeight
+						);
+						if (currentHeight > minHeight) {
+							pane.style.height = currentHeight + 'px';
+							pane.style.top = e.clientY + 'px';
+						}
+					}
+					hintHide();
+					return;
+				}
+				if (clicked && clicked.isMoving) {
+					if (
+						b.top < FULLSCREEN_MARGINS ||
+						b.left < FULLSCREEN_MARGINS ||
+						b.right > window.innerWidth - FULLSCREEN_MARGINS ||
+						b.bottom > window.innerHeight - FULLSCREEN_MARGINS
+					) {
+						// hintFull();
+						setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight);
+						ghostpane.style.opacity = 0.2;
+					} else if (b.top < MARGINS) {
+						// hintTop();
+						setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2);
+						ghostpane.style.opacity = 0.2;
+					} else if (b.left < MARGINS) {
+						// hintLeft();
+						setBounds(ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight);
+						ghostpane.style.opacity = 0.2;
+					} else if (b.right > rightScreenEdge) {
+						// hintRight();
+						setBounds(
+							ghostpane,
+							window.innerWidth / 2,
+							0,
+							window.innerWidth / 2,
+							window.innerHeight
+						);
+						ghostpane.style.opacity = 0.2;
+					} else if (b.bottom > bottomScreenEdge) {
+						// hintBottom();
+						setBounds(
+							ghostpane,
+							0,
+							window.innerHeight / 2,
+							window.innerWidth,
+							window.innerWidth / 2
+						);
+						ghostpane.style.opacity = 0.2;
+					} else {
+						hintHide();
+					}
+					if (preSnapped) {
+						setBounds(
+							pane,
+							e.clientX - preSnapped.width / 2,
+							e.clientY - Math.min(clicked.y, preSnapped.height),
+							preSnapped.width,
+							preSnapped.height
+						);
+						return;
+					}
+					// moving
+					pane.style.top = e.clientY - clicked.y + 'px';
+					//pane.style.left = e.clientX - clicked.x + 'px';
+					return;
+				}
+				// This code executes when mouse moves without clicking
+				// style cursor
+				if ((onRightEdge && onBottomEdge) || (onLeftEdge && onTopEdge)) {
+					pane.style.cursor = 'nwse-resize';
+				} else if ((onRightEdge && onTopEdge) || (onBottomEdge && onLeftEdge)) {
+					pane.style.cursor = 'nesw-resize';
+				} else if (onRightEdge || onLeftEdge) {
+					pane.style.cursor = 'ew-resize';
+				} else if (onBottomEdge || onTopEdge) {
+					pane.style.cursor = 'ns-resize';
+				} else if (canMove()) {
+					pane.style.cursor = 'move';
+				} else {
+					pane.style.cursor = 'default';
+				}
+			}
+			animate();
+			function onUp(e) {
+				calc(e);
+				if (clicked && clicked.isMoving) {
+					// Snap
+					var snapped = {
+						width: b.width,
+						height: b.height
+					};
+					if (
+						b.top < FULLSCREEN_MARGINS ||
+						b.left < FULLSCREEN_MARGINS ||
+						b.right > window.innerWidth - FULLSCREEN_MARGINS ||
+						b.bottom > window.innerHeight - FULLSCREEN_MARGINS
+					) {
+						// hintFull();
+						setBounds(pane, 0, 0, window.innerWidth, window.innerHeight);
+						preSnapped = snapped;
+					} else if (b.top < MARGINS) {
+						// hintTop();
+						setBounds(pane, 0, 0, window.innerWidth, window.innerHeight / 2);
+						preSnapped = snapped;
+					} else if (b.left < MARGINS) {
+						// hintLeft();
+						setBounds(pane, 0, 0, window.innerWidth / 2, window.innerHeight);
+						preSnapped = snapped;
+					} else if (b.right > rightScreenEdge) {
+						// hintRight();
+						setBounds(
+							pane,
+							window.innerWidth / 2,
+							0,
+							window.innerWidth / 2,
+							window.innerHeight
+						);
+						preSnapped = snapped;
+					} else if (b.bottom > bottomScreenEdge) {
+						// hintBottom();
+						setBounds(
+							pane,
+							0,
+							window.innerHeight / 2,
+							window.innerWidth,
+							window.innerWidth / 2
+						);
+						preSnapped = snapped;
+					} else {
+						preSnapped = null;
+					}
+					hintHide();
+				}
+				clicked = null;
+			}
+		};
+	</script>
+	<script type="text/javascript">
+		var html =
+			"<body><script src='/docs/js/vendor.js'><\/script><script src='/docs/js/main.js'><\/script><script src='/docs/js/moduleStats.js'><\/script> <script> if(typeof mdata==\"undefined\"){mdata={};}parent.loadDOC(Component, mdata)  <\/script> <\/body>";
+		var iframe = document.getElementById('ifm');
+		var frameDoc = iframe.document;
+		if (iframe.contentWindow) {
+			frameDoc = iframe.contentWindow.document;
+			frameDoc.open();
+			frameDoc.writeln(html);
+			frameDoc.close();
+		} else {
+		}
+	</script>
+	<div style="visibility: hidden;height: 0;width: 0;height:0">
+		<svg xmlSpace="preserve" version="1.1" xmlns="http://www.w3.org/2000/svg"
+			xmlnsXlink="http://www.w3.org/1999/xlink">
+			<symbol id="home" x="0px" y="0px" viewBox="0 0 495.398 495.398" fill='#FFFFFF'
+				enableBackground="new 0 0 495.398 495.398">
+				<path
+					d="M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391     v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158     c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747     c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z" />
+				<path
+					d="M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401     c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79     c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z" />
+			</symbol>
+			<symbol id='bottomArrow' viewBox="0 0 792 792">
+				<polygon
+					points="580.802,369.604 580.802,369.604 211.198,0 184.802,26.396 554.405,396 184.802,765.604 211.198,792 607.198,396" />
+			</symbol>
+			<symbol id="reload" viewBox="0 0 28.265 28.265">
+				<path
+					d="M14.133,28.265c-7.061,0-12.805-5.75-12.805-12.809c0-7.06,5.744-12.807,12.805-12.807c0.469,0,0.943,0.027,1.414,0.08   v-2.07c0-0.266,0.164-0.508,0.406-0.611c0.252-0.098,0.531-0.043,0.723,0.148l4.537,4.547c0.258,0.258,0.258,0.67,0,0.932   l-4.535,4.557c-0.193,0.188-0.473,0.246-0.725,0.143c-0.242-0.104-0.406-0.344-0.406-0.609V7.47   c-0.469-0.086-0.941-0.125-1.414-0.125c-4.473,0-8.113,3.639-8.113,8.111c0,4.471,3.641,8.113,8.113,8.113s8.111-3.643,8.111-8.113   c0-0.363,0.295-0.66,0.662-0.66h3.369c0.365,0,0.662,0.297,0.662,0.66C26.937,22.515,21.189,28.265,14.133,28.265z" />
+			</symbol>
+			<symbol id='newTab' x="0px" y="0px" viewBox="0 0 26 26" enableBackground='new 0 0 26 26'>
+				<path
+					d="M18,17.759v3.366C18,22.159,17.159,23,16.125,23H4.875C3.841,23,3,22.159,3,21.125V9.875C3,8.841,3.841,8,4.875,8h3.429l3.001-3h-6.43C2.182,5,0,7.182,0,9.875v11.25C0,23.818,2.182,26,4.875,26h11.25C18.818,26,21,23.818,21,21.125v-6.367L18,17.759z" />
+				<path
+					d="M22.581,0H12.322c-1.886,0.002-1.755,0.51-0.76,1.504l3.22,3.22l-5.52,5.519c-1.145,1.144-1.144,2.998,0,4.141l2.41,2.411c1.144,1.141,2.996,1.142,4.14-0.001l5.52-5.52l3.16,3.16c1.101,1.1,1.507,1.129,1.507-0.757L26,3.419C25.999-0.018,26.024-0.001,22.581,0z" />
+			</symbol>
+			<symbol id='RTL' width="13" height="16" viewBox="0 0 13 16" fill="none">
+				<path
+					d="M12.2415 0.318399H3.92167C3.37879 0.318399 2.87197 0.404799 2.39552 0.575999C1.92097 0.747199 1.50527 0.984 1.15221 1.2848C0.799141 1.5856 0.518208 1.936 0.311304 2.3376C0.104401 2.7392 0 3.1632 0 3.616C0 4.0736 0.104401 4.5008 0.311304 4.9024C0.518208 5.3024 0.799141 5.6528 1.15221 5.9552C1.50527 6.2576 1.92097 6.4928 2.39552 6.664C2.87007 6.8352 3.37879 6.9216 3.92167 6.9216H4.89735V10.6368C4.89735 10.7504 4.9448 10.8464 5.04161 10.9264C5.13842 11.0064 5.25231 11.048 5.38518 11.048C5.52565 11.048 5.64334 11.008 5.73825 10.9264C5.83316 10.8464 5.88251 10.7488 5.88251 10.6368V1.1408H8.81902V10.6368C8.81902 10.7504 8.86648 10.8464 8.96328 10.9264C9.06009 11.0064 9.17398 11.048 9.30686 11.048C9.44163 11.048 9.55552 11.008 9.65043 10.9264C9.74534 10.8448 9.79469 10.7488 9.79469 10.6368V1.1408H12.2434C12.3781 1.1408 12.492 1.1008 12.5869 1.0192C12.6818 0.9376 12.7312 0.841599 12.7312 0.729599C12.7312 0.615999 12.6837 0.52 12.5869 0.44C12.4901 0.36 12.3762 0.318399 12.2415 0.318399ZM4.89735 6.0992H3.92167C3.51356 6.0992 3.13013 6.0336 2.77326 5.9024C2.4164 5.7712 2.1051 5.5936 1.84125 5.3696C1.5774 5.1472 1.3686 4.8848 1.21485 4.584C1.06109 4.2832 0.985164 3.96 0.985164 3.616C0.985164 3.2768 1.06109 2.9584 1.21485 2.656C1.3686 2.3552 1.5774 2.0928 1.84125 1.8704C2.1051 1.648 2.4164 1.4704 2.77326 1.3376C3.13013 1.2064 3.51356 1.1408 3.92167 1.1408H4.89735V6.0992ZM11.2658 13.5232H2.16205L3.29147 12.5792C3.38638 12.4992 3.43574 12.4 3.43574 12.2848C3.43574 12.1696 3.38828 12.0704 3.29147 11.9904C3.19656 11.9104 3.07887 11.8688 2.9422 11.8688C2.80553 11.8688 2.68785 11.9088 2.59294 11.9904L0.630201 13.6448C0.535291 13.7248 0.485938 13.824 0.485938 13.9392C0.485938 14.0544 0.533393 14.1536 0.630201 14.2336L2.59104 15.8784C2.64229 15.9216 2.69734 15.952 2.75808 15.9712C2.81882 15.9904 2.87767 16 2.93461 16C2.99915 16 3.05989 15.9904 3.12064 15.9712C3.18138 15.952 3.23642 15.9216 3.28768 15.8784C3.38259 15.7984 3.43194 15.7008 3.43194 15.5888C3.43194 15.4752 3.38448 15.3792 3.28768 15.2992L2.15825 14.3552H11.2639C11.3987 14.3552 11.5126 14.3152 11.6075 14.2336C11.7024 14.1536 11.7517 14.0528 11.7517 13.936C11.7517 13.8224 11.7043 13.7264 11.6075 13.6464C11.5145 13.5632 11.4006 13.5232 11.2658 13.5232Z"
+					fill="white" />
+			</symbol>
+			<symbol id="rem" enableBackground="new 0 0 458.353 458.353" viewBox="0 0 458.353 458.353">
+				<path
+					d="m415.382 200.529h42.971l-57.294-57.294-57.294 57.294h42.971v171.882h-42.971l57.294 57.294 57.294-57.294h-42.971z" />
+				<path
+					d="m343.765 85.941v-85.941h-343.765v85.941h28.647v-57.294h128.912v401.059h-71.618v28.647h171.882v-28.647h-71.618v-401.059h128.912v57.294z" />
+			</symbol>
+			<symbol id='fullScreen' viewBox="0 0 18 18">
+				<path
+					d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z" />
+			</symbol>
+			<symbol id='folder' viewBox="0 0 60 60">
+				<path
+					d="M56.98,11.5H28.02V6.52c0-1.665-1.354-3.02-3.02-3.02H3.02C1.354,3.5,0,4.854,0,6.52V20.5v2v30.98  c0,1.665,1.354,3.02,3.02,3.02H56.98c1.665,0,3.02-1.354,3.02-3.02V22.5v-2v-5.98C60,12.854,58.646,11.5,56.98,11.5z M58,53.48  c0,0.563-0.457,1.02-1.02,1.02H3.02C2.457,54.5,2,54.043,2,53.48V22.5h56V53.48z M2,20.5V6.52C2,5.957,2.457,5.5,3.02,5.5H25  c0.562,0,1.02,0.457,1.02,1.02v6.98H56.98c0.563,0,1.02,0.457,1.02,1.02v5.98H2z"
+					fill="#FFFFFF" />
+			</symbol>
+			<symbol id='file' viewBox="0 0 512 512">
+				<path
+					d="M405.333,42.667h-44.632c-4.418-12.389-16.147-21.333-30.035-21.333h-32.219C288.427,8.042,272.677,0,256,0     s-32.427,8.042-42.448,21.333h-32.219c-13.888,0-25.617,8.944-30.035,21.333h-44.631C83.135,42.667,64,61.802,64,85.333v384     C64,492.865,83.135,512,106.667,512h298.667C428.865,512,448,492.865,448,469.333v-384C448,61.802,428.865,42.667,405.333,42.667     z M170.667,53.333c0-5.885,4.781-10.667,10.667-10.667h37.917c3.792,0,7.302-2.021,9.219-5.302     c5.844-10.042,16.135-16.031,27.531-16.031s21.688,5.99,27.531,16.031c1.917,3.281,5.427,5.302,9.219,5.302h37.917     c5.885,0,10.667,4.781,10.667,10.667V64c0,11.76-9.573,21.333-21.333,21.333H192c-11.76,0-21.333-9.573-21.333-21.333V53.333z      M426.667,469.333c0,11.76-9.573,21.333-21.333,21.333H106.667c-11.76,0-21.333-9.573-21.333-21.333v-384     c0-11.76,9.573-21.333,21.333-21.333h42.667c0,23.531,19.135,42.667,42.667,42.667h128c23.531,0,42.667-19.135,42.667-42.667     h42.667c11.76,0,21.333,9.573,21.333,21.333V469.333z"
+					fill="#FFFFFF" />
+				<path
+					d="M352,234.667H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h192     c5.896,0,10.667-4.771,10.667-10.667C362.667,239.438,357.896,234.667,352,234.667z"
+					fill="#FFFFFF" />
+				<path
+					d="M352,277.333H160c-5.896,0-10.667,4.771-10.667,10.667s4.771,10.667,10.667,10.667h192     c5.896,0,10.667-4.771,10.667-10.667S357.896,277.333,352,277.333z"
+					fill="#FFFFFF" />
+				<path
+					d="M352,320H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h192     c5.896,0,10.667-4.771,10.667-10.667C362.667,324.771,357.896,320,352,320z"
+					fill="#FFFFFF" />
+				<path
+					d="M266.667,362.667H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h106.667     c5.896,0,10.667-4.771,10.667-10.667C277.333,367.438,272.563,362.667,266.667,362.667z"
+					fill="#FFFFFF" />
+			</symbol>
+			<symbol id="pencil" viewBox="0 0 512 512">
+				<g>
+					<polygon points="85.333,282.64 85.333,362.64 165.333,362.64 378.667,149.307 298.667,69.307 			" />
+					<path d="M441.707,56.08L391.893,6.267c-8.32-8.32-21.867-8.32-30.187,0L320,47.973l80,80l41.707-41.707
+				C450.027,77.947,450.027,64.4,441.707,56.08z" />
+				</g>
+				<g>
+					<rect y="426.64" width="512" height="85.333" />
+				</g>
+			</symbol>
+			<svg x='0px' y='0px' viewBox='0 0 512 512' enableBackground='new 0 0 512 512' id='smileIcon'>
+				<path fill='#f00' d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
+        c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
+        L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
+        C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
+        C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
+        S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
+        S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
+        S326.327,212.122,344,212.122z' />
+			</svg>
+		</svg>
+	</div>
+</body>
+</html>