1(this.webpackJsonpshotsnap=this.webpackJsonpshotsnap||[]).push([[6],{100:function(t,e,i){"use strict";i.d(e,"a",(function(){return u}));var n,a,s=i(16),o=i(0),r=i.n(o),c=i(26),l=i.n(c),h=i(934),p=i(15),d=i(24),m=i.n(d),g=i(236);class u extends o.Component{constructor(){super(...arguments),this.state={isDragging:!1,showReplaceOption:!1,showImageCrop:!1},this.componentDidMount=()=>{window.addEventListener("paste",this.handlepaste)},this.componentWillUnmount=()=>{window.removeEventListener("paste",this.handlepaste)},this.handlepaste=t=>{var e=(t.clipboardData||t.originalEvent.clipboardData).items;for(var i in e){var n=e[i];if("file"===n.kind&&("image/png"===n.type||"image/jpeg"===n.type||"image/svg+xml"===n.type||"image/gif"===n.type)){let t=n.getAsFile();this.props.setImageFile(URL.createObjectURL(t))}}},this.processFile=t=>{this.setState({isDragging:!1});var e=t[0];e&&("image/png"===e.type||"image/jpeg"===e.type||"image/svg+xml"===e.type||"image/gif"===e.type?this.props.setImageFile(URL.createObjectURL(e)):alert("File not supported"))},this.handleDrag=t=>{this.setState({isDragging:t})},this.removeFile=()=>{this.props.setImageFile(null)},this.toggleReplaceOption=()=>{this.setState({showReplaceOption:!this.state.showReplaceOption})},this.toggleImageCrop=()=>{this.setState({showImageCrop:!this.state.showImageCrop})},this.render=()=>{let t,e=this.props.title||"Drop your image here",i=this.state.showReplaceOption,n=this.state.showImageCrop,a=this.props.supportMultipleSources,s=this.props.file,o=this.props.ratio;return r.a.createElement(b,null,r.a.createElement(h.a,{ref:e=>{t=e},style:{display:"flex"},onDragEnter:()=>this.handleDrag(!0),onDragLeave:()=>this.handleDrag(!1),onDrop:this.processFile,disableClick:!0},r.a.createElement(x,{isDragging:this.state.isDragging},null!==this.props.file&&r.a.createElement("div",{className:"container",style:{backgroundImage:"url(".concat(s,")")}},r.a.createElement("div",{className:"action remove",onClick:()=>this.removeFile()},r.a.createElement(m.a,{icon:"trash-2",size:18}))),null===s&&r.a.createElement("div",{className:"empty",onClick:()=>t.open()},r.a.createElement(m.a,{icon:"image",size:26,color:"rgba(255,255,255,0.8)"}),r.a.createElement("p",null,e," ",r.a.createElement("br",null),"or paste from clipboard"),r.a.createElement("span",null,"PNG, JPG or SVG only")))),null!==this.props.file&&r.a.createElement("div",{className:"actionbtn"},r.a.createElement("div",{className:"action edit",onClick:()=>{a?this.toggleReplaceOption():t.open()}},r.a.createElement(m.a,{icon:"refresh-cw",size:16}),r.a.createElement("span",null,"Replace")),!a&&r.a.createElement("div",{className:"action edit",onClick:()=>this.toggleImageCrop()},r.a.createElement(m.a,{icon:"crop",size:16}),"Crop")),n&&l.a.createPortal(r.a.createElement(g.a,{file:s,ratio:o,imageSize:this.props.imageSize,imageCrop:this.props.imageCrop,setImageCrop:this.props.setImageCrop,toggleImageCrop:this.toggleImageCrop}),document.getElementById("modal")),i&&r.a.createElement(r.a.Fragment,null,r.a.createElement("div",{className:"overlay",onClick:()=>this.toggleReplaceOption()}),r.a.createElement("div",{className:"edit-option"},r.a.createElement("span",null,"Replace image"),r.a.createElement("a",{href:"#",onClick:()=>{this.toggleReplaceOption(),t.open()}},"Upload an image..."),r.a.createElement("a",{href:"#",onClick:()=>
1{this.toggleReplaceOption(),this.props.toggleBackgroundModal()}},"Choose from Unsplash..."))))}}}const b=p.a.div(n||(n=Object(s.a)(["\n\t.overlay {\n\t\tposition: fixed;\n\t\ttop: 0px;\n\t\tright: 0px;\n\t\tbottom: 0px;\n\t\tleft: 0px;\n\t\tz-index: 99;\n\t\tbackground: rgba(0, 0, 0, 0.3);\n\t\t/* background: red; */\n\t}\n\t.edit-option {\n\t\tposition: absolute;\n\t\t/* top: 220px; */\n\t\tright: 35px;\n\t\tbackground: white;\n\t\twidth: 220px;\n\t\tpadding: 0 0 10px 0;\n\t\tborder-radius: 4px;\n\t\tz-index: 100;\n\t\tbox-shadow: 0 1px 20px 1px rgba(0, 0, 0, 0.4);\n\t\ttext-align: left;\n\n\t\tspan {\n\t\t\tpadding: 10px 15px;\n\t\t\tdisplay: block;\n\t\t\tfont-size: 14px;\n\t\t\tborder-bottom: 1px solid #eee;\n\t\t\tmargin-bottom: 8px;\n\t\t}\n\t\ta {\n\t\t\tdisplay: block;\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 15px;\n\t\t\tpadding: 8px 15px;\n\t\t\t/* border-top: 1px solid #eee; */\n\t\t\tcolor: #333;\n\t\t\t&:hover {\n\t\t\t\tbackground: #eee;\n\t\t\t}\n\t\t}\n\t}\n\t.actionbtn {\n\t\tdisplay: flex;\n\t\tmargin-top: 9px;\n\t\tjustify-content: space-between;\n\t\t.action {\n\t\t\tpadding: 12px 10px;\n\t\t\tbackground-color: #2a2c33;\n\t\t\tborder-radius: 4px;\n\t\t\t/* width: 48%; */\n\t\t\tflex: 1;\n\t\t\ttext-align: center;\n\t\t\tcursor: pointer;\n\t\t\tcolor: rgba(255, 255, 255, 0.6);\n\t\t\tfont-size: 14px;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\tsvg {\n\t\t\t\tmargin-right: 6px;\n\t\t\t\tcolor: #fff;\n\t\t\t\topacity: 0.6;\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\tbackground-color: #2e3037;\n\t\t\t}\n\t\t\t& + .action {\n\t\t\t\tmargin: 0 0 0 8px;\n\t\t\t}\n\t\t}\n\t}\n"]))),x=p.a.div(a||(a=Object(s.a)(["\n\tflex: 1;\n\ttext-align: center;\n\tborder-radius: 4px;\n\ttransition: all 0.2s ease-out;\n\tz-index: 1;\n\tbackground-color: ",";\n\ttransform: ",";\n\t.container {\n\t\theight: 100px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin: 0 auto;\n\t\tbackground-position: center;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: contain;\n\t\tposition: relative;\n\t\t.action {\n\t\t\tposition: absolute;\n\t\t\tright: 0;\n\t\t\tpadding: 10px;\n\t\t\tcursor: pointer;\n\t\t\tsvg {\n\t\t\t\tcolor: #fff;\n\t\t\t\topacity: 0.6;\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\tbackground: rgba(255, 255, 255, 0.05);\n\t\t\t\tsvg {\n\t\t\t\t\tcolor: #fff;\n\t\t\t\t\topacity: 0.8;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&.remove {\n\t\t\t\ttop: 4px;\n\t\t\t\tright: 4px;\n\t\t\t\tborder-radius: 4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.empty {\n\t\tpadding: 25px 15px 20px 15px;\n\t\tcursor: pointer;\n\t\ttransition: all 0.1s ease-out;\n\t\t&:hover {\n\t\t\ttransition: all 0.1s ease-out;\n\t\t\tbackground-color: rgba(255, 255, 255, 0.02);\n\t\t}\n\t\tp {\n\t\t\t// margin-top: 6px;\n\t\t\tcolor: rgba(255, 255, 255, 0.6);\n\t\t}\n\t\tspan {\n\t\t\tfont-size: 12px;\n\t\t\tcolor: rgba(255, 255, 255, 0.4);\n\t\t}\n\t}\n"])),t=>t.isDragging?"#0094dd":"#2a2c33",t=>t.isDragging?"scaleY(1.05)":"scale(1)")},108:function(t,e,i){"use strict";i.d(e,"a",(function(){return y}));var n,a,s,o,r,c=i(16),l=i(0),h=i.n(l),p=i(26),d=i.n(p),m=i(15),g=i(170),u=i(109),b=i(13),x=i(60),v=i(24),f=i.n(v);class y extends l.Component{constructor(){super(...arguments),this.state={showUpgrade:!1,models:[]},this.componentDidMount=()=>{this.modelsByType()},this.modelsByType=()=>{var t=this.props.models.reduce((t,e)=>(t[e.type]=t[e.type]||[],t[e.type].push(e),t),Object.create([]));this.setState({models:t})},this.setCurrentDevice=(t,e)=>{Object(x.f)(e,t.isPro)?this.setState({showUpgrade:!0,upgradeMessage:"devices"}):this.props.setCurrentDevice(t)},this.toggleUpgradeModal=()=>{this.setState({showUpgrade:!this.state.showUpgrade})},this.render=()=>{let t=this.state.models,e=this.props.title,i=this.props.back;return h.a.createElement(b.a.Consumer,null,n=>{let{authUser:a}=n;return h.a.createElement(g.a,{toggleSlider:i,title:e},h.a.createElement(w,null,Object.entries(t).map(t=>{let[e,i]=t;return h.a.createElement(E,{key:e},"undefined"!==e&&h.a.createElement("p",{className:"title"},e),i.map(t=>h.a.createElement(j,{key:t.id,onClick:()=>this.setCurrentDevice(t,a)},h.a.createElement(z,{image:t.thumbnail}),h.a.createElement(S,null,h.a.createElement("p",null,!Object(x.g)(a)&&t.isPro&&h.a.createElement(f.a,{icon:"lock",size:12}),t.name),t.screen&&h.a.createElement("span",null,t.screen.width," x ",t.screen.height),t.desc&&h.a.createElement("span",null,t.desc)))))}),this.state.showUpgrade&&d.a.createPortal(h.a.createElement(u.a,{toggleUpgradeModal:this.toggleUpgradeModal,upgradeMessage:this.state.upgradeMessage}),document.getElementById("modal"))))})}}}const w=m.a.div(n||(n=Object(c.a)(["\n\tpadding: 15px 8px;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n"]))),E=m.a.div(a||(a=Object(c.a)(["\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-bottom: 15px;\n\tp.title {\n\t\tmargin-left: 6px;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 1px;\n\t\tmargin-bottom: 0px;\n\t\tfont-size: 12px;\n\t\tfont-weight: bold;\n\t}\n"]))),j=m.a.div(s||(s=Object(c.a)(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding: 8px;\n\twidth: 100%;\n\talign-items: center;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\ttransition: all 0.15s ease-out;\n\tbackground-color: transparent;\n\tposition: relative;\n\t&:hover {\n\t\tbackground-color: #2a2c33;\n\t\ttransition: all 0.15s ease-out;\n\t}\n\tspan.lock {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tmargin: -20px 0 0 -20px;\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tz-index: 11;\n\t\tbackground: rgba(0, 0, 0, 0.5);\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: all 0.15s ease-out;\n\t}\n"]))),S=m.a.div(o||(o=Object(c.a)(["\n\tp {\n\t\tfont-size: 15px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\tsvg {\n\t\t\tmargin-right: 4px;\n\t\t\topacity: 0.8;\n\t\t}\n\t}\n\tspan {\n\t\tfont-size: 12px;\n\t}\n"]))),z=m.a.div(r||(r=Object(c.a)(["\n\twidth: 60px;\n\theight: 45px;\n\tborder-radius: 2px;\n\tmargin-right: 10px;\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\tbackground-image: ",';\n\toverflow: hidden;\n\tbackground-color: #1f2025;\n\tposition: relative;\n\t&::after {\n\t\tcontent: "";\n\t\tposition: absolute;\n\t\tborder-radius: 4px;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tborder: 3px solid;\n\t\tborder-color: ',";\n\t}\n\t&:hover {\n\t\tbackground-color: #24252b;\n\t}\n"])),t=>"url(".concat(t.image,")"),t=>t.active?"#0094dd":"transparent")}
1,109:function(t,e,i){"use strict";var n,a,s,o,r=i(16),c=i(0),l=i.n(c),h=i(166),p=i(93),d=i(78),m=i(15),g=i(1),u=i(24),b=i.n(u),x=i(17);class v extends c.Component{constructor(){super(...arguments),this.componentDidMount=()=>{p.a.event({category:"Views",action:"Upgrade Modal"})},this.render=()=>{let t,e=this.props.upgradeMessage;return t="multiple"===e?l.a.createElement(f,null):"template"===e?l.a.createElement(y,null):"devices"===e?l.a.createElement(E,null):l.a.createElement(w,null),l.a.createElement(h.a,{onExit:this.props.toggleUpgradeModal,containerStyleExtra:{padding:0,width:400}},l.a.createElement(S,null,t,l.a.createElement("p",null,"Get PRO access for as low as $8. ",l.a.createElement("br",null),"No subscriptions."),l.a.createElement(d.a,{big:!0,onClick:()=>this.props.history.push("/upgrade")},"Upgrade to PRO now")),l.a.createElement(z,null,l.a.createElement("p",null,"Also included in a shotsnapp PRO account:"),l.a.createElement("ul",null,"template"!==e&&l.a.createElement("li",null,l.a.createElement(j,{color:"#81BC29"},l.a.createElement(b.a,{icon:"feather",size:20,color:"#fff"})),l.a.createElement("p",null,"Choose from unlimited pre-designed templates that saves you time")),"multiple"!==e&&l.a.createElement("li",null,l.a.createElement(j,{color:"#9013FE"},l.a.createElement(b.a,{icon:"layers",size:22,color:"#fff"})),l.a.createElement("p",null,"Add unlimited number of objects, including text, onto your canvas for your design")),"search"!==e&&l.a.createElement("li",null,l.a.createElement(j,{color:"#0094DD"},l.a.createElement(b.a,{icon:"camera",size:20,color:"#fff"})),l.a.createElement("p",null,"Search from thousands of high-quality photos from Unsplash")),"devices"!==e&&l.a.createElement("li",null,l.a.createElement(j,{color:"#EE008D"},l.a.createElement(b.a,{icon:"smartphone",size:20,color:"#fff"})),l.a.createElement("p",null,"Access to more device mockup styles and variations")))),l.a.createElement(C,null,"Already a shotsnapp PRO member? ",l.a.createElement(x.b,{to:"/login"},"Login here")))}}}e.a=Object(g.f)(v);const f=()=>l.a.createElement("div",null,l.a.createElement(j,{big:!0,color:"#9013FE"},l.a.createElement(b.a,{icon:"layers",size:24,color:"#fff"})),l.a.createElement("h3",null,"Want to add unlimited number of objects into your canvas?")),y=()=>l.a.createElement("div",null,l.a.createElement(j,{big:!0,color:"#81BC29"},l.a.createElement(b.a,{icon:"feather",size:24,color:"#fff"})),l.a.createElement("h3",null,"Choose from unlimited pre-designed templates")),w=()=>l.a.createElement("div",null,l.a.createElement(j,{big:!0,color:"#0094DD"},l.a.createElement(b.a,{icon:"arrow-up-circle",size:24,color:"#fff"})),l.a.createElement("h3",null,"Upgrade to PRO to access all the great features on shotsnapp")),E=()=>l.a.createElement("div",null,l.a.createElement(j,{big:!0,color:"#EE008D"},l.a.createElement(b.a,{icon:"smartphone",size:24,color:"#fff"})),l.a.createElement("h3",null,"Access to more device mockup styles and variations")),j=m.a.span(n||(n=Object(r.a)(["\n\twidth: ","px;\n\theight: ","px;\n\tbackground-color: ",";\n\tmargin: 0 auto;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n"])),t=>t.big?48:40,t=>t.big?48:40,t=>t.color),S=m.a.div(a||(a=Object(r.a)(["\n\tpadding: 25px 30px 30px;\n\t& > div {\n\t\ttext-align: center;\n\t}\n\th3 {\n\t\tmargin-top: 12px;\n\t\tmargin-bottom: 15px;\n\t\tfont-size: 22px;\n\t\tfont-weight: 500;\n\t}\n\tp {\n\t\tmargin-top: 10px;\n\t\tmargin-bottom: 20px;\n\t\tfont-size: 15px;\n\t\tcolor: #4a4a4a;\n\t}\n\n\t.promo {\n\t\tpadding: 10px 4px;\n\t\tborder-radius: 4px;\n\t\tbackground: #eee;\n\t\ttext-align: left;\n\t\tdisplay: flex;\n\t\tmargin-top: 20px;\n\t\talign-items: center;\n\t\tsvg {\n\t\t\twidth: 60px;\n\t\t}\n\t\tp {\n\t\t\tcolor: #000;\n\t\t\tmargin: 0;\n\t\t}\n\t\tspan {\n\t\t\tcolor: red;\n\t\t}\n\t}\n"]))),z=m.a.div(s||(s=Object(r.a)(["\n\tpadding: 20px 30px;\n\tbackground-color: #f8f8f8;\n\tborder-top: 1px solid #eee;\n\ttext-align: left;\n\tp {\n\t\tmargin-bottom: 10px;\n\t\tfont-size: 14px;\n\t\tcolor: #4a4a4a;\n\t}\n\tli {\n\t\tmargin-bottom: 18px;\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\t&:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t\t& >
1 span {\n\t\t\tmargin-right: 10px;\n\t\t}\n\t\t& > p {\n\t\t\tmargin-bottom: 0;\n\t\t\tflex: 1;\n\t\t\tspan {\n\t\t\t\tfont-size: 10px;\n\t\t\t\tborder: 1px solid #f6c7e3;\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tcolor: #ee008d;\n\t\t\t\tpadding: 3px 4px;\n\t\t\t}\n\t\t}\n\t}\n"]))),C=m.a.div(o||(o=Object(r.a)(["\n\tpadding: 15px 30px;\n\t/* background-color: #f8f8f8; */\n\tborder-top: 1px solid #eee;\n\ttext-align: center;\n\tfont-size: 14px;\n\tcolor: #4a4a4a;\n\tborder-radius: 0 0 8px 8px;\n\ta {\n\t\tcolor: #0b5cff;\n\t}\n"])))},110:function(t,e,i){"use strict";var n=i(0),a=i.n(n);i(236);e.a=t=>{let{file:e,imageSize:i,imageCrop:n}=t,s=n?n.y/n.height*100:0,o=n?n.x/n.width*100:0,r=n?i.width/n.width*100:100,c=n?i.height/n.height*100:100;return a.a.createElement(a.a.Fragment,null,e&&a.a.createElement("img",{alt:"screenshot",style:{position:"absolute",top:"-".concat(s,"%"),left:"-".concat(o,"%"),width:"".concat(r,"%"),height:"".concat(c,"%")},src:e}),!e&&a.a.createElement("div",{className:"emptyimage"},a.a.createElement("p",null,"Your image here")))}},143:function(t,e,i){"use strict";i.d(e,"a",(function(){return o}));var n=i(0),a=i.n(n),s=i(931);class o extends n.Component{constructor(){super(...arguments),this.state={displayColorPicker:!1,opacity:this.props.opacity,color:this.props.color},this.handleClick=()=>{this.setState({displayColorPicker:!this.state.displayColorPicker})},this.handleChangeComplete=t=>{this.props.setColor(t.hex)},this.handleColorInput=t=>{let e=t.target.value;this.props.setColor(e)},this.handleOpacity=t=>{let e=parseInt(t.target.value,10);this.setState({opacity:isNaN(e)?"":e})},this.onBlurOpacity=t=>{let e=parseInt(t.target.value,10);isNaN(e)||e>100?this.props.setOpacity(100):this.props.setOpacity(this.state.opacity)},this.onEnterOpacity=t=>{let e=parseInt(t.target.value,10);"Enter"===t.key&&(isNaN(e)||e>100?this.props.setOpacity(100):this.props.setOpacity(this.state.opacity))},this.onKeyDownOpacity=t=>{if("ArrowUp"===t.key){t.preventDefault();let e=this.state.opacity+(t.shiftKey?10:1);this.props.setOpacity(e>100?100:e)}if("ArrowDown"===t.key){t.preventDefault();let e=this.state.opacity-(t.shiftKey?10:1);this.props.setOpacity(e>0?e:0)}},this.render=()=>a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:"sectionBlock sectionBlockInline"},a.a.createElement("p",{className:"sectionLabel"},this.props.label),a.a.createElement("div",{className:"sectionContent"},a.a.createElement("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},a.a.createElement("div",{style:{flex:1}},a.a.createElement("div",{className:"colorButton"},a.a.createElement("div",{onClick:this.handleClick,style:{width:35,height:35,marginRight:0,borderRadius:"4px 0 0 4px",backgroundColor:""===this.props.color?"#fff":this.props.color}}),a.a.createElement("input",{className:"textInput",style:{borderRadius:"0 4px 4px 0",width:75,flex:"auto"},readOnly:!0,value:this.props.color})),this.state.displayColorPicker&&a.a.createElement("div",{style:{position:"absolute",zIndex:"2"}},a.a.createElement("div",{style:{position:"fixed",top:"0px",right:"0px",bottom:"0px",left:"0px"},onClick:this.handleClick}),a.a.createElement("div",{style:{position:"relative",left:-30}},a.a.createElement(s.a,{color:this.props.color,disableAlpha:!0,presetColors:["#5d39f3","#0094DD","#B725D4","#78B221","#405562","#E10387","#F79E1F","#F
1FDD00","#A693F6","#A5E9FF","#D28CE0","#B8E986","#8094A1","#FF94D4","#FECB84","#FFF4AC"],onChangeComplete:this.handleChangeComplete}))))))))}componentWillReceiveProps(t){t.opacity!==this.state.opacity&&this.setState({opacity:t.opacity})}}},166:function(t,e,i){"use strict";i.d(e,"a",(function(){return c}));var n=i(0),a=i.n(n),s=i(362),o=i(24),r=i.n(o);class c extends n.Component{constructor(){super(...arguments),this.state={isMounted:!1},this.componentDidMount=()=>{this.setState({isMounted:!0})},this.handleClose=()=>{this.setState({isMounted:!1})},this.onExited=()=>{this.props.onExit()},this.render=()=>{const t={entering:{background:"rgba(0,0,0,0.0)"},entered:{background:"rgba(0,0,0,0.6)"},exiting:{background:"rgba(0,0,0,0.0)"}},e={entering:{opacity:0,transform:"scale(0.8) translate3d(0, -80px, 0)"},entered:{opacity:1,transform:"scale(1) translate3d(0, 0, 0)"},exiting:{opacity:0,transform:"scale(0.95) translate3d(0, -40px, 0)"}};let i=this.props.containerStyleExtra;return a.a.createElement(s.a,{in:this.state.isMounted,timeout:200,onExited:this.onExited},n=>a.a.createElement("div",{style:{...l.overlay,...t[n]}},a.a.createElement("div",{style:{...l.container,...e[n],...i}},this.props.children,a.a.createElement("button",{style:l.close,onClick:()=>this.handleClose()},a.a.createElement(r.a,{icon:"x",size:20,color:"#333"})))))}}}let l={overlay:{position:"absolute",top:0,right:0,bottom:0,left:0,background:"rgba(21,36,48,0.0)",zIndex:11,transition:"0.2s linear",overflowY:"auto",overflowX:"hidden"},container:{verticalAlign:"middle",textAlign:"center",background:"white",opacity:0,zIndex:"11",width:500,margin:"100px auto 50px",borderRadius:"8px 8px",padding:"30px 50px 40px",transition:"0.2s ease-out",boxShadow:"0 0 15px 4px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.15)"},close:{position:"absolute",top:-10,right:-10,width:30,height:30,paddingTop:2,background:"#fff",borderRadius:"50%",border:0,boxShadow:"0 1px 3px 1px rgba(0,0,0,0.2)",outline:"none",cursor:"pointer"}}},168:function(t,e,i){"use strict";e.a={blue:"#0b5cff",lightblue:"#0094dd",green:"#6FA41F"}},169:function(t,e,i){"use strict";var n,a=i(16),s=i(0),o=i.n(s),r=i(15);e.a=t=>{let{colors:e,colorIndex:i,setColorIndex:n}=t;return e?o.a.createElement(c,null,e.map((t,e)=>o.a.createElement("button",{key:t.id,onClick:()=>n(e)},o.a.createElement("span",{style:{backgroundColor:t.hex,boxShadow:i===e?"0 0 0 2px #191A1E, 0 0 0 3.5px #0094dd":"0 0 0 1px rgba(255,255,255,0)"}})))):null};const c=r.a.div(n||(n=Object(a.a)(["\n display: flex;\n flex-wrap: wrap;\n margin-top: 12px;\n button {\n background: transparent;\n margin: 6px 5px;\n border: 0;\n text-align: center;\n color: rgba(255, 255, 255, 0.6);\n text-decoration: none;\n font-size: 15px;\n cursor: pointer;\n outline: none;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.12s linear;\n }\n span {\n width: 24px;\n height: 24px;\n border-radius: 15px;\n }\n"])))},170:function(t,e,i){"use strict";i.d(e,"a",(function(){return g}));var n,a,s,o,r=i(16),c=i(0),l=i.n(c),h=i(15),p=i(24),d=i.n(p),m=i(362);class g extends c.Component{constructor(){super(...arguments),this.state={isMounted:!1},this.componentDidMount=()=>{this.setState({isMounted:!0})},this.handleClose=()=>{this.setState({isMounted:!1})},this.onExited=()=>{this.props.toggleSlider()},this.render=()=>{const t={entering:{transform:"translate3d(300px, 0, 0)"},entered:{transform:"translate3d(0, 0, 0)"},exiting:{transform:"translate3d(300px, 0, 0)"}};return l.a.createElement(m.a,{in:this.state.isMounted,timeout:200,onExited:this.onExited},e=>l.a.createElement(u,null,l.a.createElement(b,{style:{...t[e]}},l.a.createElement(x,{withSubtitle:this.props.subtitle},l.a.createElement("div",{style:{cursor:"pointer"},onClick:()=>this.handleClose()},l.a.createElement(d.a,{icon:"arrow-left",color:"#f8f8f8",size:20})),l.a.createElement("div",{className:"title"},l.a.createElement("p",null,this.props.title),l.a.createElement("span",{dangerouslySetInnerHTML:{__html:this.props.subtitle}})),l.a.createElement("div",null)),l.a.createElement(v,{style:this.props.contentStyle},this.props.children))))}}}const u=h.a.div(n||(n=Object(r.a)(["\n\tposition: absolute;\n\ttop: 0px;\n\tright: 0px;\n\tbottom: 0px;\n\tleft: 0px;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\tz-index: 10;\n"]))),b=h.a.div(a||(a=Object(r.a)(["\n\tposition: absolute;\n\ttop: 0px;\n\tright: 0px;\n\tbottom: 0px;\n\theight: calc(100vh - 64px);\n\tdisplay: flex;\n\tflex-direction: column;\n\ttransform: translate3d(0px, 0px, 0px);\n\tz-index: 20;\n\twidth: 300px;\n\tbackground: #191a1e;\n\ttransition: transform 0.15s ease-out;\n\t/* box-shadow: -10px 0 10px 2px rgba(0, 0, 0, 0.5); */\n"]))),x=h.a.div(s||(s=Object(r.a)(["\n\tborder-bottom: 1px solid rgba(255, 255, 255, 0.05);\n\tdisplay: flex;\n\theight: ","px;\n\talign-items: center;\n\tjustify-content: space-between;\n\tdiv {\n\t\twidth: 55px;\n\t\tpadding: 15px 12px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\t.title {\n\t\tflex: 1;\n\t\tpadding: 10px 0;\n\t\tflex-direction: column;\n\t\tp {\n\t\t\tmargin-bottom: 3px;\n\t\t\tfont-size: 15px;\n\t\t\tcolor: #f8f8f8;\n\t\t}\n\t\tspan {\n\t\t\tfont-size: 13px;\n\t\t\ta {\n\t\t\t\tcolor: inherit;\n\t\t\t\ttext-decoration: none;\n\t\t\t\t&:hover {\n\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])),t=>t.withSubtitle?60:50),v=h.a.div(o||(o=Object(r.a)(["\n\t/* background: green; */\n\tflex: 1;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tposition: relative;\n"])))},193:function(t,e){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAEhJREFUWAnt1rENADAIA0HICuy/IZ4BsoMjpXn6l9A1kN09YUxVGXXEseoHMQsggAACCCCAQM4d56pKcnL+AQQQQAABBBD4L7D9Pwr+3ufr7AAAAABJRU5ErkJggg=="}
1,236:function(t,e,i){"use strict";var n,a,s=i(16),o=i(0),r=i.n(o),c=i(15),l=i(166),h=i(945),p=i(78),d=i(167),m=i.n(d),g=i(168);e.a=t=>{let{file:e,ratio:i,imageSize:n,imageCrop:a,setImageCrop:s,toggleImageCrop:c}=t;const[d,x]=r.a.useState({x:0,y:0}),[v,f]=r.a.useState(1),[y,w]=Object(o.useState)(null);Object(o.useEffect)(()=>{let t=(n.height-n.width/i)/2;x({x:0,y:t})},[]);const E=Object(o.useCallback)((t,e)=>{w(e)},[]);return r.a.createElement(l.a,{onExit:c,containerStyleExtra:{width:1e3,padding:0,margin:"60px auto"}},r.a.createElement(u,null,r.a.createElement("div",{className:"header"},r.a.createElement("p",null,"Move and zoom the image")),r.a.createElement("div",{className:"crop-wrapper"},r.a.createElement("div",{className:"crop-container"},r.a.createElement(h.a,{image:e,crop:d,zoom:v,aspect:i,onCropChange:t=>{x(t)},initialCroppedAreaPixels:a,onCropComplete:E,onZoomChange:f}))),r.a.createElement("div",{className:"bottom"},r.a.createElement("div",null),r.a.createElement(b,null,r.a.createElement(m.a,{min:1,max:3,step:.1,tooltip:!1,value:v,orientation:"horizontal",onChange:f})),r.a.createElement("div",{className:"action"},r.a.createElement(p.a,{onClick:()=>{s(y),setTimeout(()=>{c()},300)},style:{backgroundColor:g.a.green}},"Save image")))))};const u=c.a.div(n||(n=Object(s.a)(["\n height: calc(100vh - 120px);\n .header {\n display: flex;\n height: 40px;\n justify-content: center;
1\n align-items: center;\n }\n .crop-wrapper {\n position: relative;\n height: calc(100vh - 200px - 40px);\n background: #aaa;\n }\n .crop-container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n }\n .bottom {\n display: flex;\n height: 80px;\n justify-content: space-between;\n align-items: center;\n & > div {\n width: 250px;\n }\n .action {\n text-align: right;\n padding-right: 24px;\n }\n }\n"]))),b=c.a.div(a||(a=Object(s.a)(["\n width: 250px;\n .rangeslider {\n background-color: #ccc;\n }\n .rangeslider .rangeslider__handle {\n box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3), 0 0px 1px 1px rgba(0, 0, 0, 0.5);\n }\n .rangeslider-horizontal .rangeslider__handle {\n width: 18px;\n height: 18px;\n border-radius: 10.5px;\n }\n"])))},237:function(t,e,i){"use strict";var n=i(0);const a=i.n(n).a.createContext();e.a=a},260:function(t,e,i){"use strict";var n,a=i(16),s=i(0),o=i.n(s),r=i(15),c=i(27);e.a=t=>o.a.createElement(l,null,o.a.createElement("div",null,t.showLoader&&o.a.createElement(c.a,{color:"#333",style:{marginRight:10}}),t.children));const l=r.a.div(n||(n=Object(a.a)(["\n padding: 8px 15px;\n display: inline-block;\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.3);\n & > div {\n display: flex;\n justify-content: center;
1\n align-items: center;\n font-size: 15px;\n line-height: 20px;\n }\n"])))},261:function(t,e,i){t.exports=i.p+"static/media/phones.917d4191.svg"},262:function(t,e,i){t.exports=i.p+"static/media/browsers.5c8b4725.svg"},263:function(t,e,i){t.exports=i.p+"static/media/laptops.8ce48303.svg"},264:function(t,e,i){t.exports=i.p+"static/media/displays.ff4dc214.svg"},265:function(t,e,i){t.exports=i.p+"static/media/tablets.99b2d71e.svg"},266:function(t,e,i){t.exports=i.p+"static/media/wearables.6d6e1cb6.svg"},267:function(t,e,i){t.exports=i.p+"static/media/icons.e491b6f7.svg"},268:function(t,e,i){t.exports=i.p+"static/media/text.5bbacd4c.svg"},269:function(t,e,i){t.exports=i.p+"static/media/twitter.d2403421.svg"},270:function(t,e,i){t.exports=i.p+"static/media/luke-chesser-3rWagdKBF7U-unsplash.02b80d5c.jpg"},361:function(t,e,i){"use strict";var n=i(609),a=i.n(n),s=i(60),o=i(70);const r={id:"dbej66",name:"Single phone simple",isPro:!1,thumbnail:a.a,tags:["phone","free"],canvas:{color:"linear-gradient(to top, #00c6fb 0%, #005bea 100%)",opacity:100,size:{width:800,height:600}},objects:[{type:"phone",id:Date.now(),device:Object(s.b)(o.a,"id","iphone_14_pro"),colorIndex:0,size:{width:420,height:836},position:{x:190,y:50}}]};var c=i(610);const l={id:"mwywz3",name:"Single phone simple 2",isPro:!1,thumbnail:i.n(c).a,tags:["phone","free"],canvas:{color:"#ffed75",opacity:100,size:{width:800,height:600}},objects:[{type:"phone",id:Date.now(),device:Object(s.b)(o.a,"id","iphone_8"),colorIndex:1,scale:62,size:{width:590,height:1176.2},position:{x:105.5,y:-584}}]};var h=i(611);const p={id:"wmf8xo",name:"Single phone full",isPro:!1,thumbnail:i.n(h).a,tags:["phone","free"],canvas:{color:"#FF94D4",opacity:100,size:{width:800,height:800}},objects:[{type:"phone",id:Date.now(),device:Object(s.b)(o.a,"id","iphone_14_pro"),colorIndex:1,scale:40,size:{width:374,height:744.4},position:{x:212.8,y:27.4}}]};var d=i(612),m=i.n(d),g=i(142);const u={id:"9x3qzh",name:"Single Chrome browser full",isPro:!1,thumbnail:m.a,tags:["chrome","browser","free"],canvas:{color:"#405562",opacity:100,size:{width:1e3,height:800}},objects:[{type:"browser",id:Date.now(),device:Object(s.b)(g.a,"id","chrome"),scale:100,size:{width:880,height:600},position:{x:60,y:100}}]};var b=i(613);const x={id:"hjyvkl",name:"Single Safari browser corner",isPro:!1,thumbnail:i.n(b).a,tags:["safari","browser","free"],canvas:{color:"#b725d4",opacity:100,size:{width:800,height:600}},objects:[{type:"browser",id:Date.now(),device:Object(s.b)(g.a,"id","safari"),scale:100,size:{width:1200,height:800},position:{x:70,y:70}}]};var v=i(614),f=i.n(v),y=i(141);const w={id:"z0a54h",name:"Single Macbook simple",isPro:!1,thumbnail:f.a,tags:["laptop","free"],canvas:{color:"#cbff96",opacity:100,size:{width:1e3,height:800}},objects:[{type:"laptop",id:Date.now(),device:Object(s.b)(y.a,"id","macbook_pro"),scale:60,size:{width:900,height:531.6},position:{x:50,y:135}}]};var E=i(615),j=i.n(E),S=i(140);const z={id:"tecbu4",name:"Single watch full",isPro:!1,thumbnail:j.a,tags:["watch","free"],canvas:{color:"#dfd7a3",opacity:100,size:{width:600,height:600}},objects:[{type:"wearable",id:Date.now(),device:Object(s.b)(S.a,"id","apple_watch"),colorIndex:2,scale:56,size:{width:286,height:530.66},position:{x:156.6,y:34}}]};var C=i(616),k=i.n(C),O=i(164);const B={id:"ho8pum",name:"Single iMac full",isPro:!1,thumbnail:k.a,tags:["display","imac","free"],canvas:{color:"#35bbd1",opacity:100,size:{width:1e3,height:700}},objects:[{type:"display",id:Date.now(),device:Object(s.b)(O.a,"id","imac"),scale:50,size:{width:750,height:630.5},position:{x:125,y:34.8}}]};var I=i(617);const D={id:"nh63mu",name:"Phone & Watch",isPro:!0,thumbnail:i.n(I).a,tags:["phone","watch"],canvas:{color:"#3190c0",opacity:100,size:{width:800,height:800}},objects:[{type:"wearable",id:1557856635378,scale:40,rotation:8,position:{x:443.6,y:381},device:Object(s.b)(S.a,"id","apple_watch"),deviceColorIndex:6,size:{width:205,height:380.37}},{type:"phone",id:1557856462418,scale:40,rotation:-4,position:{x:170.8,y:35.4},device:Object(s.b)(o.a,"id","iphone_14"),deviceColorIndex:0,size:{width:360,height:716.4}}]};var P=i(618),N=i.n(P),M=i(94);const L={id:"et9d6q",name:"Phone with text side",isPro:!0,thumbnail:N.a,tags:["phone","text"],canvas:{color:"#0069dd",opacity:100,size:{width:1e3,height:600}},objects:[{type:"text",id:Date.now()+10,fontSize:45,color:"#fff",size:{width:440,height:171},text:"Vivamus sagittis lacus vel augue laoreet rutrum.",alignment:"left",font:Object(s.b)(M.a,"name","Poppins"),fontVariantIndex:1,lineHeight:57,position:{x:495,y:143}},{type:"text",id:Date.now()+20,fontSize:25,font:Object(s.b)(M.a,"name","SF Pro Display"),color:"#fff",size:{width:440,height:136},text:"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet quam cras etiam sit vulputate.",alignment:"left",lineHeight:34,opacity:90,position:{x:495,y:330}},{type:"phone",id:Date.now()+5,device:Object(s.b)(o.a,"id","iphone_x"),colorIndex:0,size:{width:420,height:836},position:{x:40,y:-248.3}}]};var F=i(619);
1const R={id:"g5vmam",name:"Clean calming vibe 2",isPro:!0,thumbnail:i.n(F).a,tags:["text","phone"],canvas:{color:"#a5e9ff",opacity:100,size:{width:1e3,height:600}},objects:[{type:"text",id:Date.now()+10,font:Object(s.b)(M.a,"name","Carter One"),fontSize:52,color:"#1318eb",size:{width:540,height:192},text:"Donec ullamcorper nulla non metus auctor fringilla!",alignment:"left",lineHeight:64,position:{x:45.5,y:111}},{type:"text",id:Date.now()+5,font:Object(s.b)(M.a,"name","Caveat"),fontSize:38,color:"#273842",size:{width:450,height:156},text:"Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.",alignment:"left",lineHeight:39,position:{x:45,y:310}},{type:"phone",id:Date.now(),device:Object(s.b)(o.a,"id","galaxy_s8"),colorIndex:1,size:{width:475,height:1042},position:{x:604,y:0}}]};var K=i(620),A=i.n(K),W=i(621),V=i.n(W);const T={id:"yybx9m",name:"Macbook promo",isPro:!0,thumbnail:A.a,tags:["text","laptop"],canvas:{color:"#D7380E",background:{credit:"Denise Bossarte",image:V.a,position:"center center"},opacity:100,size:{width:800,height:800}},objects:[{type:"text",id:Date.now()+10,font:Object(s.b)(M.a,"name","Bangers"),fontSize:74,color:"#fff",text:"Integer posuere!",alignment:"center",size:{width:500,height:106},position:{x:150,y:508}},{type:"text",id:Date.now()+5,font:Object(s.b)(M.a,"name","SF Pro Display"),fontSize:28,color:"#fff",opacity:90,text:"Vestibulum id ligula porta felis euismod semper commodo. Donec id elit non mi porta gravida at eget metus..",alignment:"center",lineHeight:37,size:{width:500,height:111},position:{x:150,y:610}},{type:"laptop",id:Date.now(),device:Object(s.b)(y.a,"id","macbook_pro"),size:{width:675,height:398.7},position:{x:62.5,y:70}}]};var U=i(622);const Y={id:"nt3m3z",name:"Clean calming vibe",isPro:!0,thumbnail:i.n(U).a,tags:["text","phone"],canvas:{color:"#FFF4AC",opacity:100,size:{width:800,height:600}},objects:[{type:"text",id:Date.now()+10,fontSize:30,color:"#bd5615",text:"Make sure to follow us on Instagram at @tryshotsnapp",alignment:"center",lineHeight:35,size:{width:400,height:70},position:{x:200,y:43}},{type:"phone",id:Date.now(),device:Object(s.b)(o.a,"id","iphone_8"),colorIndex:1,size:{width:380,height:757.6},position:{x:210,y:130}}]};var H=i(623),G=i.n(H),q=i(624),Z=i.n(q);const J={id:"ee3q3o",name:"Purple phones",isPro:!0,thumbnail:G.a,tags:["text","phone"],canvas:{color:"#5d39f3",background:{credit:"OC Gonzalez",image:Z.a,position:"top center"},opacity:100,size:{width:1e3,height:1e3}},objects:[{type:"text",id:Date.now()+10,fontSize:60,color:"#fff",text:"Nullam ultricies vehicula.",alignment:"center",bold:!0,size:{width:680,height:85},position:{x:160,y:78}},{type:"text",id:Date.now()+15,fontSize:32,color:"#fff",opacity:70,text:"Vestibulum id ligula porta felis euismod semper donec ullamcorper nulla non metus auctor fringilla.",alignment:"center",size:{width:680,height:90},position:{x:160,y:164}},{type:"phone",id:Date.now()+5,device:Object(s.b)(o.a,"id","iphone_x"),colorIndex:0,scale:50,size:{width:470,height:935.48},position:{x:110,y:300}},{type:"phone",id:Date.now(),device:Object(s.b)(o.a,"id","galaxy_s8"),colorIndex:1,scale:55,size:{width:522,height:1145.65},position:{x:350,y:315}}]};var X=i(625),Q=i.n(X),_=i(626),$=i.n(_);const tt={id:"fu5ky8",name:"Introducing",isPro:!0,thumbnail:Q.a,tags:["text","phone"],canvas:{color:"#2321b2",background:{credit:"OC Gonzalez",image:$.a,position:"top center"},opacity:100,size:{width:1e3,height:950}},objects:[{type:"text",id:Date.now()+10,fontSize:18,color:"#fff",opacity:80,tracking:10,size:{width:250,height:25},text:"INTRODUCING",alignment:"center",font:Object(s.b)(M.a,"name","Poppins"),fontVariantIndex:1,position:{x:375,y:45}},{type:"text",id:Date.now()+15,fontSize:60,font:Object(s.b)(M.a,"name","Poppins"),fontVariantIndex:2,color:"#fff",size:{width:800,height:85},text:"Our brand new design",alignment:"center",position:{x:100,y:78}},{type:"text",id:Date.now()+20,fontSize:28,font:Object(s.b)(M.a,"name","Prata"),color:"#fff",text:"Vestibulum id ligula porta felis euismod semper donec ullamcorper nulla non metus auctor fringilla.",alignment:"center",lineHeight:41,tracking:.5,opacity:100,size:{width:800,height:82},position:{x:100,y:171}},{type:"phone",id:Date.now()+5,device:Object(s.b)(o.a,"id","iphone_14_pro"),colorIndex:0,scale:65,size:{
1width:610,height:1214.13},position:{x:195,y:252}}]};var et=i(627),it=i.n(et),nt=i(270),at=i.n(nt);const st={id:"y6rtsu",name:"AppStore iPhone X",isPro:!0,thumbnail:it.a,tags:["phone","appstore"],canvas:{color:"#4C25F0",background:{credit:"Luke Chesser",image:at.a,position:"top center"},opacity:100,size:{height:2436,width:1125}},objects:[{type:"text",id:Date.now()+15,fontSize:85,font:Object(s.b)(M.a,"name","Poppins"),fontVariantIndex:2,color:"#fff",size:{width:1e3,height:121},text:"Our brand new design",alignment:"center",position:{x:62.5,y:186}},{type:"text",id:Date.now()+20,fontSize:60,font:Object(s.b)(M.a,"name","SF Pro Display"),color:"#fff",text:"Vestibulum id ligula porta felis euismod semper donec ullamcorper nulla",alignment:"center",lineHeight:85,tracking:.5,opacity:90,size:{width:1e3,height:170},position:{x:60.5,y:324}},{type:"phone",id:Date.now()+5,device:Object(s.b)(o.a,"id","iphone_xs"),colorIndex:0,size:{width:1035,height:2059.65},position:{x:45,y:579.4}}]};var ot=i(628);const rt={id:"dntlwh",name:"AppStore iPhone X Bottom",isPro:!0,thumbnail:i.n(ot).a,tags:["phone","appstore"],canvas:{color:"#4C25F0",background:{credit:"Luke Chesser",image:at.a,position:"top center"},opacity:100,size:{height:2436,width:1125}},objects:[{type:"text",id:Date.now()+15,fontSize:85,font:Object(s.b)(M.a,"name","Poppins"),fontVariantIndex:2,color:"#fff",size:{width:1e3,height:121},text:"Discover places",alignment:"center",position:{x:62.5,y:1952}},{type:"text",id:Date.now()+20,fontSize:60,font:Object(s.b)(M.a,"name","SF Pro Display"),color:"#fff",text:"Vestibulum id ligula porta felis euismod semper donec ullamcorper nulla",alignment:"center",lineHeight:85,tracking:.5,opacity:90,size:{width:1e3,height:170},position:{x:60.5,y:2090}},{type:"phone",id:Date.now()+5,device:Object(s.b)(o.a,"id","iphone_xs"),colorIndex:0,size:{width:1035,height:2059.65},position:{x:45,y:-213}}]};i.d(e,"a",(function(){return ct}));const ct=[r,D,z,w,p,l,tt,rt,st,u,x,B,L,R,T,Y,J]},363:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=i(261),r=i.n(o),c=i(262),l=i.n(c),h=i(263),p=i.n(h),d=i(264),m=i.n(d),g=i(265),u=i.n(g),b=i(266),x=i.n(b),v=i(267),f=i.n(v),y=i(268),w=i.n(y);i(269),i(607);const E=[{type:"phone",name:"Phone",icon:r.a,default:"iphone_7",isPro:!1,isAvailable:!0},{type:"browser",name:"Browser",icon:l.a,default:"chrome",isPro:!1,isAvailable:!0},{type:"laptop",name:"Laptop",icon:p.a,default:"macbook",isPro:!1,isAvailable:!0},{type:"display",name:"Display",icon:m.a,default:"thunderbolt",isPro:!1,isAvailable:!0},{type:"tablet",name:"Tablet",icon:u.a,default:"ipad",isPro:!0,isAvailable:!0},{type:"wearable",name:"Watch",icon:x.a,default:"watch",isPro:!0,isAvailable:!0},{type:"text",name:"Text",icon:w.a,isPro:!0,isAvailable:!0},{type:"icon",name:"Icon",icon:f.a,isPro:!0,isAvailable:!0}];var j,S,z=i(15),C=i(79),k=i(60);class O extends a.Component{constructor(){super(...arguments),this.handleClick=t=>{let e,i,n=Object(k.c)(t.type),a=this.props.context.canvasSize;i="text"===t.type?{width:340,height:80}:"icon"===t.type?{width:100,height:100}:"tweet"===t.type?{width:500,height:400}:{width:n.size.width/2,height:n.size.height/2},e=Object(k.e)(i,a);let s={type:t.type,id:Date.now(),scale:100,size:i,rotation:0,position:e,device:n};t.isAvailable&&this.props.addObject(s)},this.render=()=>s.a.createElement("div",null,s.a.createElement(B,null,E.map(t=>s.a.createElement(I,{isAvailable:t.isAvailable,key:t.type,onClick:()=>this.handleClick(t)},s.a.createElement("img",{alt:t.type,src:t.icon}),s.a.createElement("p",null,t.name)))))}}e.a=Object(C.a)(O);const B=z.a.div(j||(j=Object(n.a)(["\n\t// margin: 10px 0 0;\n\tdisplay: flex;\n\tpadding: 6px;\n\tflex-direction: row;\n\t// flex-wrap: wrap;\n\t// background: red;\n\tborder-radius: 8px;\n"]))),I=z.a.a(S||(S=Object(n.a)(["\n\twidth: 54px;\n\tpadding: 4px 0px 3px;\n\ttext-align: center;\n\tposition: relative;\n\tborder-radius: 4px;\n\tcursor: ",";\n\ttransition: all 0.15s ease-out;\n\t&:hover {\n\t\ttransition: all 0.15s ease-out;\n\t\ttransform: ",";\n\t\tbackground: ",";\n\t\tz-index: 999;\n\t\tp {\n\t\t\tcolor: #ccc;\n\t\t\tdisplay: block;\n\t\t}\n\t}\n\timg {\n\t\twidth: 34px;\n\t\theight: 28px;\n\t\tdisplay: block;\n\t\tfont-size: 0;\n\t\tmargin: 0 auto 2px;\n\t\topacity: ",";\n\t}\n\tp {\n\t\tfont-size: 10px;\n\t\tcolor: #737887;\n\t\tline-height: 16px;\n\t\tletter-spacing: -0.2px;\n\t\ttransition: all 0.15s ease-out;\n\t\topacity: ",";\n\t\t// position: absolute;\n\t\t// background: #2a2c33;\n\t\t// padding: 2px 6px;\n\t\t// border-radius: 3px;\n\t\t// left: 30%;\n\t\t// bottom: -60%;\n\t\t// display: none;\n\t}\n"])),t=>t.isAvailable?"pointer":"default",t=>t.isAvailable?"scale(1.04)":"scale(1)",t=>
1t.isAvailable?"#2a2c33":"transparent",t=>t.isAvailable?"1":"0.5",t=>t.isAvailable?"1":"0.5")},364:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=i(15),r=i(17),c=i(29),l=i(24),h=i.n(l),p=i(60),d=i(27),m=i(31),g=i(13);class u extends a.Component{componentDidMount(){const t=document.createElement("script");t.async=!0,t.src="https://cdn.headwayapp.co/widget.js",document.head.appendChild(t);var e={selector:"#headway-badge",account:"72l5ey"};t.onload=function(){window.Headway.init(e)}}render(){return s.a.createElement("span",{id:"headway-badge"})}}var b,x,v,f,y=u;class w extends a.Component{constructor(){super(...arguments),this.state={showUserMenu:!1},this.componentDidMount=()=>{},this.toggleUserMenu=()=>{this.setState({showUserMenu:!this.state.showUserMenu})},this.logout=()=>{this.toggleUserMenu(),c.a.signOut()},this.showChatbox=t=>{this.toggleUserMenu(),window.$crisp.push(["do","chat:show"]),window.$crisp.push(["do","chat:open"]),t&&(window.$crisp.push(["set","user:nickname",t.name]),window.$crisp.push(["set","user:email",t.email]))}}render(){let t=this.state.showUserMenu;return s.a.createElement(g.a.Consumer,null,e=>{let{authUser:i,isLoading:n}=e;
1return s.a.createElement("div",null,s.a.createElement(E,null,n&&s.a.createElement(d.a,{color:"#666"}),!n&&s.a.createElement(s.a.Fragment,null,Object(p.g)(i)&&s.a.createElement("span",{className:"badge"},"Pro"),!Object(p.g)(i)&&s.a.createElement("span",{className:"badge"},s.a.createElement(r.b,{to:"/upgrade"},"Upgrade to PRO")),s.a.createElement(j,null,s.a.createElement(y,null)),s.a.createElement(S,{onClick:()=>this.toggleUserMenu()},s.a.createElement(h.a,{icon:"user",size:18,color:"#eee"})))),t&&s.a.createElement("div",null,s.a.createElement("div",{style:{position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:99,background:"rgba(0,0,0,0.5)"},onClick:()=>this.toggleUserMenu()}),s.a.createElement(z,null,s.a.createElement("ul",null,i?s.a.createElement("li",{className:"menutop"},s.a.createElement("p",null,i.name),s.a.createElement("span",null,i.email)):s.a.createElement("li",{className:"menutop"},s.a.createElement("p",null,"Hello, there!")),s.a.createElement("li",null,s.a.createElement("a",{href:"#",onClick:()=>this.showChatbox(i||null)},"Chat with us")),s.a.createElement("li",null,s.a.createElement("a",{target:"_blank",href:"http://shotsnapp.com/faq"},"Read our FAQ")),s.a.createElement("li",{className:"separator"}),!Object(p.g)(i)&&s.a.createElement("li",null,s.a.createElement(r.b,{to:"/upgrade"},"Upgrade to PRO")),i&&s.a.createElement("li",null,s.a.createElement(r.b,{to:"/account"},"Account")),i?s.a.createElement("li",null,s.a.createElement("a",{href:"#",onClick:this.logout},"Sign out")):s.a.createElement("li",null,s.a.createElement(r.b,{to:"/login"},"Login"))))))})}}e.a=Object(m.a)(w);const E=o.a.div(b||(b=Object(n.a)(["\n\tdisplay: flex;\n\tbackground: #191a1e;\n\tcolor: #eee;\n\tflex-direction: row;\n\tpadding: 0 15px 0 15px;\n\theight: 68px;\n\talign-items: center;\n\tborder-bottom: 1px solid #000;\n\tjustify-content: end;\n\tposition: relative;\n\n\tspan.badge {\n\t\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\t\tpadding: 3px 6px;\n\t\tborder-radius: 4px;\n\t\ttext-transform: uppercase;\n\t\tfont-size: 12px;\n\t}\n\tspan.badge a {\n\t\tcolor: #fff;\n\t\ttext-decoration: none;\n\t}\n"]))),j=o.a.div(x||(x=Object(n.a)(["\n\theight: 36px;\n\twidth: 36px;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\toutline: none;\n\tmargin-left: 10px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground-color: rgba(255, 255, 255, 0.2);\n\t}\n"]))),S=o.a.button(v||(v=Object(n.a)(["\n\tborder: 0;\n\theight: 36px;\n\twidth: 36px;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\toutline: none;\n\tmargin-left: 10px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground-color: rgba(255, 255, 255, 0.2);\n\t}\n"]))),z=o.a.div(f||(f=Object(n.a)(["\n\tposition: absolute;\n\tmin-width: 200px;\n\ttop: 40px;\n\tright: 30px;\n\tbackground-color: #fff;\n\tz-index: 100;\n\tborder-radius: 5px;\n\tpadding: 0 0 8px 0;\n\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n\tul {\n\t\tlist-style: none;\n\t}\n\tli.separator {\n\t\tbackground: #eee;\n\t\theight: 1px;\n\t\tmargin: 10px 0;\n\t}\n\tli.menutop {\n\t\tpadding: 15px 15px;\n\t\tmargin-bottom: 8px;\n\t\tborder-bottom: 1px solid #eee;\n\t\tp {\n\t\t\tfont-size: 16px;\n\t\t\tfont-weight: 500;\n\t\t\tmargin-bottom: 1px;\n\t\t\tcolor: #333;\n\t\t}\n\t\tspan {\n\t\t\tfont-size: 12px;\n\t\t\tcolor: #888;\n\t\t}\n\t}\n\ta {\n\t\ttext-decoration: none;\n\t\tpadding: 8px 15px;\n\t\tfont-size: 15px;\n\t\tdisplay: block;\n\t\tcolor: #333;\n\t\t&:hover {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n"])))},479:function(t,e,i){t.exports=i.p+"static/media/icon_align_top.6bd787f7.svg"},480:function(t,e,i){t.exports=i.p+"static/media/icon_align_v_center.ff1d6652.svg"},481:function(t,e,i){t.exports=i.p+"static/media/icon_align_bottom.cda34ac5.svg"},482:function(t,e,i){t.exports=i.p+"static/media/icon_align_left.7bca830b.svg"},483:function(t,e,i){t.exports=i.p+"static/media/icon_align_h_center.ad3a9262.svg"},484:function(t,e,i){t.exports=i.p+"static/media/icon_align_right.ec9d1c6a.svg"}
1,603:function(t,e,i){t.exports=i.p+"static/media/verified.888e7342.svg"},604:function(t,e,i){t.exports=i.p+"static/media/icon-strikethrough.fc716bbe.svg"},605:function(t,e,i){},606:function(t,e,i){"use strict";i.d(e,"a",(function(){return u}));var n=i(0),a=i.n(n),s=i(26),o=i.n(s),r=i(260),c=i(167),l=i.n(c),h=i(24),p=i.n(h),d=i(363);const{detect:m}=i(608),g=m();class u extends n.Component{constructor(){super(...arguments),this.state={showToast:!1},this.componentDidMount=()=>{let t="";g&&(t=g.name,"safari"!==t&&"edge"!==t||this.setState({showToast:!0}))},this.render=()=>a.a.createElement("div",null,a.a.createElement("div",{style:b.container},a.a.createElement("div",null,a.a.createElement(d.a,{addObject:this.props.addObject})),a.a.createElement("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},a.a.createElement("p",{style:{color:"rgba(255,255,255,0.5)",marginRight:10,fontSize:13}},this.props.zoom,"%"),a.a.createElement("div",{style:{width:90,marginRight:10}},a.a.createElement(l.a,{min:10,max:100,tooltip:!1,value:this.props.zoom,orientation:"horizontal",onChange:this.props.handleZoom})),a.a.createElement(p.a,{icon:"zoom-in",size:18,color:"#fff",style:{opacity:.7}}))),this.state.showToast&&o.a.createPortal(a.a.createElement(r.a,{showLoader:!1},a.a.createElement(p.a,{icon:"alert-triangle",size:18,color:"red",style:{marginRight:10}}),a.a.createElement("p",{style:{color:"red"}},"Sorry, your browser is currently not supported. Please use Chrome or Firefox."," ",a.a.createElement("a",{href:"http://shotsnapp.com/faq"},"Read more"))),document.getElementById("toast")))}}let b={container:{position:"absolute",top:0,right:0,left:0,borderLeft:"1px solid #000",borderRight:"1px solid #000",borderBottom:"1px solid #000",height:68,background:"#191a1e",zIndex:3,display:"flex",padding:"0px 20px 0 0px",justifyContent:"space-between",alignItems:"center"}}},607:function(t,e,i){t.exports=i.p+"static/media/image.12113167.svg"},609:function(t,e,i){t.exports=i.p+"static/media/template_phone_simple.2d50e909.png"},610:function(t,e,i){t.exports=i.p+"static/media/template_phone_simple_2.10c90425.png"},611:function(t,e,i){t.exports=i.p+"static/media/template_phone_full.bf3c302a.png"},612:function(t,e,i){t.exports=i.p+"static/media/template_chrome_full.47f15d94.png"},613:function(t,e,i){t.exports=i.p+"static/media/template_safari_corner.23c8c965.png"},614:function(t,e,i){t.exports=i.p+"static/media/template_macbook_simple.2a30bc5d.png"},615:function(t,e){t.exports="data:image/png;base64,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"},616:function(t,e,i){t.exports=i.p+"static/media/template_imac_full.1a2ef28f.png"},617:function(t,e,i){t.exports=i.p+"static/media/template_phone_watch.9708eaaa.png"},618:function(t,e,i){t.exports=i.p+"static/media/template_phone_text_side.93f5c45f.png"},619:function(t,e,i){t.exports=i.p+"static/media/template-1.4fddcbac.png"},620:function(t,e,i){t.exports=i.p+"static/media/template-2.f85bdb84.png"},621:function(t,e,i){t.exports=i.p+"static/media/denise-bossarte.d817b1f3.jpg"},622:function(t,e,i){t.exports=i.p+"static/media/template-3.b0463900.png"},623:function(t,e,i){t.exports=i.p+"static/media/template-4.9a121bce.png"},624:function(t,e,i){t.exports=i.p+"static/media/oc-gonzalez.9fba219b.jpg"},625:function(t,e,i){t.exports=i.p+"static/media/template-5.bd17175f.png"},626:function(t,e,i){t.exports=i.p+"static/media/oc-gonzalez2.7fe7b44e.jpg"},627:function(t,e,i){t.exports=i.p+"static/media/appstore_iphonex.35935f92.png"},628:function(t,e,i){t.exports=i.p+"static/media/appstore_iphonex_2.3dc69a43.png"},709:function(t,e){},720:function(t,e){},722:function(t,e){},733:function(t,e){},735:function(t,e){},760:function(t,e){},762:function(t,e){},763:function(t,e){},768:function(t,e){},77:function(t,e,i){"use strict";i.d(e,"a",(function(){return s}));var n=i(0),a=i.n(n);class s extends n.Component{constructor(){super(...arguments),this.render=()=>a.a.createElement("div",{style:o.container},a.a.createElement("div",{style:o.content},this.props.children))}}let o={container:{width:296,flex:1,display:"flex",color:"#737887",position:"relative",userSelect:"none",overflow:"hidden"},content:{flex:1,overflowY:"auto",overflowX:"hidden"}}},770:function(t,e){},776:function(t,e){},778:function(t,e){},78:function(t,e,i){"use strict";var n,a=i(16),s=i(0),o=i.n(s),r=i(15),c=i(27);e.a=t=>o.a.createElement(l,{outline:t.outline,block:t.block,big:t.big,small:t.small,onClick:t.onClick,style:t.style},t.isLoading&&o.a.createElement(c.a,{color:"#fff"}),!t.isLoading&&t.children);const l=r.a.button(n||(n=Object(a.a)(["\n background: ",";\n border: 0;\n font-weight: ",";\n font-size: ","px;\n border-radius: 4px;\n color: ",";\n display: ",";\n width: ",";\n height: ",";\n padding: ",";\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-out;\n a {\n color: ",";\n text-decoration: none;\n }\n &:hover {\n transition: 0.2s ease-out;\n background: ",";\n }\n & > span {\n display: inline-block;\n }\n & > svg {\n vertical-align: -3px;\n margin-right: 8px;\n }\n"])),t=>t.outline?"transparent":"#0b5cff",t=>t.outline?"normal":"500",t=>t.big?16:t.small?14:15,t=>t.outline?"#333":"#fff",t=>t.block?"block":"inline-block",t=>t.block?"100%":"auto",t=>t.big?"48px":t.small?"34px":"38px",t=>t.big?"15px 20px":t.small?"8px 14px":"10px 15px",t=>t.outline?"#333":"#fff",t=>t.outline?"transparent":"#0652EB")},79:function(t,e,i){"use strict";var n=i(0),a=i.n(n),s=i(237);e.a=t=>class extends a.a.Component{render(){return a.a.createElement(s.a.Consumer,null,e=>a.a.createElement(t,Object.assign({},this.props,{context:e})))}}},797:function(t,e){},809:function(t,e){},812:function(t,e){},83:function(t,e,i){"use strict";i.d(e,"a",(function(){return x}));var n=i(0),a=i.n(n),s=i(479),o=i.n(s),r=i(480),c=i.n(r),l=i(481),h=i.n(l),p=i(482),d=i.n(p),m=i(483),g=i.n(m),u=i(484),b=i.n(u);class x extends n.Component{constructor(){super(...arguments),this.setVerticalAlignment=t=>{let e=0,i=this.props.canvasSize,n=this.props.objectSize.height;"top"===t?e=0:"center"===t?e=i.height/2-n/2:"bottom"===t&&(e=i.height-n);let a={...this.props.objectPosition};a.y=e,this.props.setObjectPosition(a)},this.setHorizontalAlignment=t=>{let e=0,i=this.props.canvasSize,n=this.props.objectSize.width;"left"===t?e=0:"center"===t?e=i.width/2-n/2:"right"===t&&(e=i.width-n);let a={...this.props.objectPosition};a.x=e,this.props.setObjectPosition(a)},this.render=()=>a.a.createElement("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},a.a.createElement("div",{style:{flex:1,marginRight:5}},a.a.createElement("div",{className:"buttonGroup"},a.a.createElement("button",{className:"button",onClick:()=>this.setVerticalAlignment("top")},a.a.createElement("img",{alt:"top",src:o.a})),a.a.createElement("button",{className:"button",onClick:()=>this.setVerticalAlignment("center")},a.a.createElement("img",{alt:"center",src:c.a})),a.a.createElement("button",{className:"button",onClick:()=>this.setVerticalAlignment("bottom")},a.a.createElement("img",{alt:"bottom",src:h.a})))),a.a.createElement("div",{style:{flex:1,marginLeft:5}},a.a.createElement("div",{className:"buttonGroup"},a.a.createElement("button",{className:"button",onClick:()=>this.setHorizontalAlignment("left")},a.a.createElement("img",{alt:"left",src:d.a})),a.a.createElement("button",{className:"button",onClick:()=>this.setHorizontalAlignment("center")},a.a.createElement("img",{alt:"center",src:g.a})),a.a.createElement("button",{className:"button",onClick:()=>this.setHorizontalAlignment("right")},a.a.createElement("img",{alt:"right",src:b.a})))))}}},838:function(t,e){}
1,84:function(t,e,i){"use strict";var n=i(0),a=i.n(n);e.a=t=>{let{position:e,setObjectPosition:i}=t;const[s,o]=Object(n.useState)(e.x),[r,c]=Object(n.useState)(e.y);Object(n.useEffect)(()=>{o(e.x),c(e.y)},[e]);const l=t=>{i({x:s,y:r})},h=t=>{if("Enter"===t.key){i({x:s,y:r})}};return a.a.createElement("div",{className:"sectionBlock sectionBlockInline"},a.a.createElement("p",{className:"sectionLabel"},"Position"),a.a.createElement("div",{className:"sectionContent",style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},a.a.createElement("div",{className:"textInputUnit inputPixel textInputLabel inputLabelX",style:{marginRight:5}},a.a.createElement("input",{className:"textInput",value:s,onChange:t=>(t=>{let e=parseInt(t.target.value,10);o(e)})(t),onBlur:t=>l(),onKeyPress:t=>h(t),onKeyDown:t=>(t=>{let e=t.shiftKey?10:1;if("ArrowUp"===t.key){t.preventDefault(),i({x:s+e,y:r})}if("ArrowDown"===t.key){t.preventDefault(),i({x:s-e,y:r})}})(t)})),a.a.createElement("div",{className:"textInputUnit inputPixel textInputLabel inputLabelY",style:{marginLeft:5}},a.a.createElement("input",{className:"textInput",value:r,onChange:t=>(t=>{let e=parseInt(t.target.value,10);c(e)})(t),onBlur:t=>l(),onKeyPress:t=>h(t),onKeyDown:t=>(t=>{let e=t.shiftKey?10:1;if("ArrowUp"===t.key){t.preventDefault(),i({x:s,y:r+e})}if("ArrowDown"===t.key){t.preventDefault(),i({x:s,y:r-e})}})(t)}))))}},85:function(t,e,i){"use strict";var n=i(0),a=i.n(n);e.a=t=>{let{ratio:e,size:i,setSize:s}=t;const[o,r]=Object(n.useState)(i.width),[c,l]=Object(n.useState)(i.height);Object(n.useEffect)(()=>{r(parseFloat(i.width.toFixed(1))),l(parseFloat(i.height.toFixed(1)))},[i]);const h=t=>{let e=t.target.getAttribute("name"),i=parseInt(t.target.value,10);i=isNaN(i)?"":i,"width"===e?r(i):l(i)},p=t=>{let i=t.shiftKey?10:1,n=t.target.getAttribute("name"),a=o,r=c;"ArrowUp"===t.key&&(t.preventDefault(),"width"===n&&(a+=i,r=a/e),"height"===n&&(r+=i,a=r*e),s({width:a,height:r})),"ArrowDown"===t.key&&(t.preventDefault(),"width"===n&&(a-=i,a=a<0?0:a,r=a/e),"height"===n&&(r-=i,r=r<0?0:r,a=r*e),s({width:a,height:r}))},d=t=>{let e=parseFloat(o.toFixed(1)),i=parseFloat(c.toFixed(1));s({width:e,height:i})},m=t=>{if("Enter"===t.key){let i,n=t.target.getAttribute("name");if("width"===n){let t=""===o?100:o;i={width:t,height:parseFloat((t/e).toFixed(1))}}if("height"===n){let t=""===c?200:c;i={width:t*e,height:t}}s(i)}};return a.a.createElement("div",{className:"sectionBlock sectionBlockInline"},a.a.createElement("p",{className:"sectionLabel"},"Size"),a.a.createElement("div",{className:"sectionContent",style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},a.a.createElement("div",{className:"textInputUnit inputPixel textInputLabel inputLabelWidth",style:{marginRight:5}},a.a.createElement("input",{className:"textInput",value:o,name:"width",onChange:t=>h(t),onBlur:t=>d(),onKeyPress:t=>m(t),onKeyDown:t=>p(t)})),a.a.createElement("div",{className:"textInputUnit inputPixel textInputLabel inputLabelHeight",style:{marginLeft:5}},a.a.createElement("input",{className:"textInput",value:c,name:"height",onChange:t=>h(t),onBlur:t=>d(),onKeyPress:t=>m(t),onKeyDown:t=>p(t)}))))}},86:function(t,e,i){"use strict";i.d(e,"a",(function(){return g}));var n,a,s,o=i(16),r=i(0),c=i.n(r),l=i(167),h=i.n(l),p=i(15),d=i(24),m=i.n(d);class g extends r.Component{constructor(){super(...arguments),this.state={value:this.props.value,min:this.props.min||0,max:this.props.max||100,unit:this.props.unit||"percentage",steps:this.props.steps||1,showLock:this.props.showLock||!1},this.componentWillReceiveProps=t=>{t.value!==this.state.value&&this.setState({value:t.value})},this.changeValue=t=>{let e=parseInt(t.target.value,10);this.setState({value:isNaN(e)?"":e})},this.onKeyDown=t=>{if("ArrowUp"===t.key){t.preventDefault();let e=this.state.value+(t.shiftKey?10*this.state.steps:1*this.state.steps);e=Math.round(10*e)/10,this.props.setValue(e>this.state.max?this.state.max:e)}if("ArrowDown"===t.key){t.preventDefault();let e=this.state.value-(t.shiftKey?10*this.state.steps:1*this.state.steps);e=Math.round(10*e)/10,this.props.setValue(e>this.state.min?e:this.state.min)}},this.onBlur=t=>{let e=parseInt(t.target.value,10);isNaN(e)?this.props.setValue(this.state.min):this.props.setValue(this.state.value)},this.onEnter=t=>{let e=parseInt(t.target.value,10);"Enter"===t.key&&(isNaN(e)?this.props.setValue(this.state.min):this.props.setValue(this.state.value))},this.onChangeSlider=t=>{t=Math.round(10*t)/10,this.props.setValue(t)}}render(){let t="pixel"===this.state.unit?"textInputUnit inputPixel":"textInputUnit inputScale";return"degree"===this.state.unit&&(t="textInputUnit inputDegree"),c.a.createElement(u,null,c.a.createElement("p",null,this.props.label,this.props.showLock&&c.a.createElement("span",{style:{verticalAlign:"-1px",marginLeft:4}},c.a.createElement(m.a,{icon:"lock",size:14}))),c.a.createElement(b,{className:t},c.a.createElement("input",{ref:t=>this.inputScale=t,className:"textInput",value:this.state.value,onChange:t=>this.changeValue(t),onBlur:t=>this.onBlur(t),onKeyPress:t=>this.onEnter(t),onKeyDown:t=>this.onKeyDown(t)})),c.a.createElement(x,null,c.a.createElement(h.a,{min:this.state.min,max:this.state.max,step:this.state.steps,tooltip:!1,value:this.props.value,orientation:"horizontal",onChange:this.onChangeSlider})))}}const u=p.a.div(n||(n=Object(o.a)(["\n\tdisplay: flex;\n\tflex: 1;\n\tjustify-content: center;\n\talign-items: center;\n\tmargin-bottom: 10px;\n\tp {\n\t\twidth: 85px;\n\t\tmargin-bottom: 0;\n\t}\n"]))),b=p.a.div(a||(a=Object(o.a)(["\n\tflex: 1;\n\tmargin-right: 10px;\n"]))),x=p.a.div(s||(s=Object(o.a)(["\n\twidth: 100px;\n"])))}
1,932:function(t,e,i){"use strict";var n,a,s,o=i(0),r=i.n(o),c=i(26),l=i.n(c),h=(i(143),i(16)),p=i(15),d=i(93),m=i(170),g=i(629),u=i.n(g),b=i(27);class x extends o.Component{constructor(){super(...arguments),this.renderLoading=()=>r.a.createElement("div",{style:{padding:50,display:"flex",justifyContent:"center"}},r.a.createElement(b.a,{style:{marginRight:10}}),r.a.createElement("p",null,"Loading photos ...")),this.renderNoResults=()=>r.a.createElement("div",{style:{textAlign:"center",padding:50}},r.a.createElement("p",null,"No results")),this.render=()=>{let t=this.props.photos,e=this.props.currentBackground,i=this.props.isLoading,n=this.props.noResults;return r.a.createElement(v,null,i&&this.renderLoading(),!i&&n&&this.renderNoResults(),!i&&!n&&r.a.createElement(u.a,{options:{transitionDuration:0}},t.map(t=>r.a.createElement(f,{key:t.id},r.a.createElement(y,{image:t.urls.thumb,height:t.height,width:t.width,color:t.color,active:null!==e&&t.id===e.id,onClick:()=>this.props.onSelectPhoto(t)},r.a.createElement("img",{alt:t.id,src:t.urls.thumb})),r.a.createElement("p",null,"by"," ",r.a.createElement("a",{target:"_blank",href:t.user.links.html+"?utm_source=shotsnapp&utm_medium=referral"},t.user.name))))))}}}const v=p.a.div(n||(n=Object(h.a)(["\n padding: 10px 7.5px;\n margin-top: 50px;\n"]))),f=p.a.div(a||(a=Object(h.a)(["\n margin: 0 7.5px 15px;\n width: ","px;\n text-align: center;\n a {\n text-decoration: none;\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n p {\n white-space: nowrap;\n overflow: hidden;\n font-size: 13px;\n text-overflow: ellipsis;\n }\n"])),127.5),y=p.a.div(s||(s=Object(h.a)(["\n width: ","px;\n height: ","px;\n border-radius: 2px;\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n margin-bottom: 4px;\n overflow: hidden;\n background-color: ",';\n position: relative;\n cursor: pointer;\n &::after {\n content: "";\n position: absolute;\n border-radius: 2px;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 4px solid;\n border-color: ',";\n }\n img {\n width: 100%;\n display: block;\n }\n"])),127.5,t=>127.5/(t.width/t.height),t=>t.color,t=>t.active?"#0094dd":"transparent");var w,E=i(13),j=i(60),S=i(109),z=i(24),C=i.n(z);class k extends o.Component{constructor(){super(...arguments),this.state={keyword:"",showUpgrade:!1},this.onKeywordChange=t=>{const e=t.target.value;this.setState({keyword:e}),""===e&&this.props.resetSearch()},this.onSubmit=t=>{t.preventDefault(),this.props.onSearch(this.state.keyword)},this.toggleUpgradeModal=()=>{this.setState({showUpgrade:!this.state.showUpgrade})}}render(){return r.a.createElement(E.a.Consumer,null,t=>{let{authUser:e}=t;return r.a.createElement(O,null,Object(j.g)(e)&&r.a.createElement("form",{onSubmit:t=>this.onSubmit(t)},r.a.createElement(C.a,{icon:"search",size:16,color:"#ccc",style:{position:"absolute",top:20,left:24,zIndex:2}}),r.a.createElement("input",{className:"textInput",style:{paddingLeft:30},value:this.state.keyword,placeholder:"Search for images...",onChange:this.onKeywordChange})),!Object(j.g)(e)&&r.a.createElement("div",{className:"fake",onClick:()=>this.toggleUpgradeModal()},r.a.createElement(C.a,{icon:"search",size:16,color:"#ccc"}),r.a.createElement("p",null,"Search for images..."),r.a.createElement("span",null,"PRO")),this.state.showUpgrade&&l.a.createPortal(r.a.createElement(S.a,{toggleUpgradeModal:this.toggleUpgradeModal,upgradeMessage:"search"}),document.getElementById("modal")))})}}const O=p.a.div(w||(w=Object(h.a)(["\n padding: 10px 15px 10px;\n position: absolute;\n top: 0px;\n z-index: 22;\n background: #191a1e;\n left: 0;\n right: 0;\n text-align: center;\n .note {\n margin: 8px 0 0;\n font-size: 13px;\n a {\n color: inherit;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n .fake {\n background: #2a2c33;\n border-radius: 4px;\n padding: 8px 8px 8px 12px;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.6);\n display: flex;\n /* justify-content: space-between; */\n align-items: center;\n cursor: pointer;\n &:hover {\n background: #353640;\n }\n svg {\n margin-right: 8px;\n }\n span {\n border: 1px solid rgba(255, 255, 255, 0.2);\n padding: 3px 6px;\n border-radius: 4px;\n text-transform: uppercase;\n font-size: 12px;\n margin-left: auto;\n }\n }\n"])));var B,I,D=i(672),P=i.n(D);var N=t=>r.a.createElement(M,null,r.a.createElement(L,{disabled:t.isLoadingMore,onClick:()=>t.loadMore()},t.isLoadingMore?r.a.createElement(b.a,null):"Load more photos..."));const M=p.a.div(B||(B=Object(h.a)(["\n margin: 0 15px 15px;\n display: flex;\n"]))),L=p.a.button(I||(I=Object(h.a)(["\n padding: 10px;\n flex: 1;\n display: flex;\n justify-content: center;\n border: 0;\n font-size: 14px;\n background-color: #202227;\n color: rgba(255, 255, 255, 0.45);\n border-radius: 4px;\n cursor: pointer;\n &:active {\n outline: none;\n }\n &:hover {\n background-color: #26272d;\n }\n"])));var F=i(260);const R=new P.a({applicationId:"1175ff0c72ccda1b08b0735467779ac56040318f22ea34fbc38d22b534d32f47",secret:"98584d91329c0d6e5d3064ccc2a97b24b7b5be102884168ca234ec6a13f6e9a0",callbackUrl:"urn:ietf:wg:o
1auth:2.0:oob",headers:{Authorization:"Client-ID 1175ff0c72ccda1b08b0735467779ac56040318f22ea34fbc38d22b534d32f47"}});class K extends o.Component{constructor(){super(...arguments),this.state={photos:[],results:[],isLoading:!0,isLoadingMore:!1,noResults:!1,hasMore:!0,page:1,keyword:"",showToast:!1},this.componentDidMount=()=>{d.a.event({category:"Views",action:"Background Image"}),this.showCurated()},this.showCurated=()=>{R.collections.getCollectionPhotos(2191671,1,30,"latest").then(D.toJson).then(t=>{let e=t;0===e.length?this.setState({photos:[],isLoading:!1}):this.setState({photos:e,isLoading:!1})})},this.onSearch=t=>{d.a.event({category:"Views",action:"Unsplash Search"}),this.setState({isLoading:!0,results:[],keyword:t,hasMore:!0,page:1}),R.search.photos(t,1,30).then(D.toJson).then(t=>{let e=t.results;0===e.length?this.setState({results:[],noResults:!0,isLoading:!1}):this.setState({results:e,noResults:!1,isLoading:!1})})},this.resetSearch=()=>{this.setState({results:[],noResults:!1,keyword:"",page:1,isLoadingMore:!1,hasMore:!0})},this.onSelectPhoto=t=>{d.a.event({category:"Clicks",action:"Select Photo"});let e={id:t.id,credit:t.user.name,download:t.urls.regular+"/?client_id=1175ff0c72ccda1b08b0735467779ac56040318f22ea34fbc38d22b534d32f47",image:t.urls.regular,thumbnail:t.urls.thumb,source:t.links.html};this.props.setCanvasBackground(e),R.photos.downloadPhoto(t),this.showLoadingToast(e)},this.showLoadingToast=t=>{this.setState({showToast:!0});var e=new Image;e.onload=()=>{this.setState({showToast:!1})},e.src=t.image,e.complete&&e.onload()},this.loadMore=()=>{this.setState({isLoadingMore:!0}),R.search.photos(this.state.keyword,this.state.page+1,30).then(D.toJson).then(t=>{let e=t.results;this.setState({results:this.state.results.concat(e),hasMore:!(e.length<30),isLoadingMore:!1,page:this.state.page+1})})},this.loadMoreCurated=()=>{this.setState({isLoadingMore:!0}),R.collections.getCollectionPhotos(2191671,this.state.page+1,30,"latest").then(D.toJson).then(t=>{let e=t;this.setState({photos:this.state.photos.concat(e),hasMore:!(e.length<30),isLoadingMore:!1,page:this.state.page+1})})},this.render=()=>{let t=[],e=this.state.photos,i=this.state.results,n=this.state.hasMore,a=this.state.isLoading,s=this.state.noResults,o=this.props.background;return t=i.length>0?i:e,r.a.createElement(m.a,{toggleSlider:this.props.toggleBackgroun
1dModal,title:"Background image",subtitle:"Provided by <a target='_blank' href='http://unsplash.com/?utm_source=shotsnapp&utm_medium=referral'>Unsplash.com</a>",contentStyle:{padding:0}},r.a.createElement("div",null,r.a.createElement(k,{onSearch:this.onSearch,resetSearch:this.resetSearch}),r.a.createElement("div",null,r.a.createElement(x,{photos:t,isLoading:this.state.isLoading,noResults:this.state.noResults,onSelectPhoto:this.onSelectPhoto,currentBackground:o}),!a&&!s&&n&&r.a.createElement(N,{loadMore:""===this.state.keyword?this.loadMoreCurated:this.loadMore,isLoadingMore:this.state.isLoadingMore})),this.state.showToast&&l.a.createPortal(r.a.createElement(F.a,{showLoader:!0},r.a.createElement("p",null,"Fetching photo from Unsplash...")),document.getElementById("toast"))))}}}var A,W,V,T=i(100);class U extends o.Component{constructor(){super(...arguments),this.state={showBackgroundModal:!1,canvasBackgroundPosition:this.props.canvasBackgroundPosition,canvasBackgroundMode:this.props.canvasBackgroundMode},this.componentWillReceiveProps=t=>{t.canvasBackgroundPosition!==this.state.canvasBackgroundPosition&&this.setState({canvasBackgroundPosition:t.canvasBackgroundPosition}),t.canvasBackgroundMode!==this.state.canvasBackgroundMode&&this.setState({canvasBackgroundMode:t.canvasBackgroundMode})}
1,this.toggleBackgroundModal=()=>{this.setState({showBackgroundModal:!this.state.showBackgroundModal})},this.changePosition=t=>{let e=t.target.value;this.props.setCanvasBackgroundPosition(e)},this.changeMode=t=>{let e=t.target.value;this.props.setCanvasBackgroundMode(e)}}render(){let t=this.props.background;return r.a.createElement(G,null,r.a.createElement("div",{className:"sectionBlock"},null===t&&r.a.createElement(r.a.Fragment,null,r.a.createElement(T.a,{file:this.props.background,title:"Drop photo or image here",setImageFile:this.props.setCanvasBackgroundDrop}),r.a.createElement(H,{onClick:()=>this.toggleBackgroundModal()},r.a.createElement(Y,null,r.a.createElement("p",null,"Choose photo from Unsplash")),r.a.createElement(C.a,{icon:"chevron-right",size:20}))),null!==t&&r.a.createElement(T.a,{file:t.image,title:"Drop photo or image here",setImageFile:this.props.setCanvasBackgroundDrop,toggleBackgroundModal:this.toggleBackgroundModal,supportMultipleSources:!0})),null!==t&&r.a.createElement(r.a.Fragment,null,r.a.createElement("div",{className:"sectionBlock sectionBlockInline"}
1,r.a.createElement("p",{className:"sectionLabel"},"Scale mode"),r.a.createElement("div",{className:"sectionContent"},r.a.createElement("div",{className:"selectWrap"},r.a.createElement("select",{className:"textInput ",value:this.state.canvasBackgroundMode,onChange:this.changeMode},r.a.createElement("option",{value:"auto"},"Auto"),r.a.createElement("option",{value:"cover"},"Cover"),r.a.createElement("option",{value:"contain"},"Contain"))))),r.a.createElement("div",{className:"sectionBlock sectionBlockInline"},r.a.createElement("p",{className:"sectionLabel"},"Position"),r.a.createElement("div",{className:"sectionContent"},r.a.createElement("div",{className:"selectWrap"},r.a.createElement("select",{className:"textInput",value:this.state.canvasBackgroundPosition,onChange:this.changePosition},r.a.createElement("option",{value:"top left"},"Top Left"),r.a.createElement("option",{value:"top center"},"Top Center"),r.a.createElement("option",{value:"top right"},"Top Right"),r.a.createElement("option",{value:"center left"},"Center Left"),r.a.createElement("option",{value:"center"},"Center"),r.a.createElement("option",{value:"center right"},"Center Right"),r.a.createElement("option",{value:"bottom left"},"Bottom Left"),r.a.createElement("option",{value:"bottom center"},"Bottom Center"),r.a.createElement("option",{value:"bottom right"},"Bottom Right")))))),this.state.showBackgroundModal&&r.a.createElement(K,{background:t,setCanvasBackground:this.props.setCanvasBackground,toggleBackgroun
1dModal:this.toggleBackgroundModal}))}}const Y=p.a.div(A||(A=Object(h.a)(["\n justify-content: center;\n display: flex;\n flex-direction: column;\n margin-left: 12px;\n flex: 1;\n justify-content: center;\n span {\n display: block;\n font-size: 13px;\n margin-bottom: 3px;\n }\n p {\n color: rgba(255, 255, 255, 0.6);\n }\n"]))),H=p.a.div(W||(W=Object(h.a)(["\n display: flex;\n background: #2a2c33;\n border-radius: 4px;\n overflow: hidden;\n height: 55px;\n padding: 15px 15px 15px 5px;\n align-items: center;\n cursor: pointer;\n text-align: center;\n margin-top: 15px;\n &:hover {\n background: #2d2f36;\n }\n span {\n font-size: 14px;\n }\n"]))),G=p.a.div(V||(V=Object(h.a)(["\n .sectionLabel {\n width: 90px;\n }\n"])));var q=i(193),Z=i.n(q);const J=["#000","#fff","#405562","#5d39f3","#0094DD","#B725D4","#78B221","#2420FF","#E10387","#F79E1F","#FFDD00"],X=["linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)","linear-gradient(0deg, #08AEEA 0%, #2AF598 100%)","linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)","linear-gradient(132deg, #F4D03F 0%, #16A085 100%)","linear-gradient(147deg, #FFE53B 0%, #FF2525 74%)","linear-gradient(to right, #64f38c, #f79d00)","linear-gradient(to right, #A83279, #D38312)","linear-gradient(132deg, #cac7ff, #ee93ff, rgba(255,95,153,1))","linear-gradient(to right, #43e97b 0%, #38f9d7 100%)","linear-gradient(to top, #00c6fb 0%, #005bea 100%)","linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)","linear-gradient(64deg, #8e9c1a, #d8819b, #15edad)"],Q=[{id:0,name:"Custom canvas",width:null,height:null,group:"Custom"},{id:11,name:"5.8\u2033 (iPhone X, Xs, 11 Pro)",width:1125,height:2436,group:"App store screenshot"},{id:12,name:"5.5\u2033 (iPhone 6s Plus, 7 Plus, 8 Plus)",width:1242,height:2208,group:"App store screenshot"},{id:13,name:"4.7\u2033 (iPhone 6, 6s, 7, 8)",width:750,height:1334,group:"App store screenshot"},{id:14,name:"4.0\u2033 (iPhone SE)",width:640,height:1096,group:"App store screenshot"},{id:15,name:"3.5 inch (iPhone 4s)",width:640,height:920,group:"App store screenshot"},{id:21,name:"Android devices (Portrait)",width:640,height:1138,group:"Play store screenshot"},{id:22,name:"Android devices (Landscape - Games)",width:800,height:450,group:"Play store screenshot"},{id:31,name:"Instagram Photo",width:1080,height:1080,group:"Social Media"},{id:32,name:"Instagram Story",width:1080,height:1920,group:"Social Media"},{id:33,name:"Facebook Cover",width:820,height:312,group:"Social Media"},{id:34,name:"Twitter Header",width:1500,height:500,group:"Social Media"},{id:35,name:"Twitter Timeline",width:1024,height:512,group:"Social Media"},{id:36,name:"Pinterest Standard Pin",width:600,height:900,group:"Social Media"},{id:37,name:"Pinterest Giraffe Pin",width:600,height:1560,group:"Social Media"},{id:41,name:"Dribbble",width:1600,height:1200,group:"Others"}];i.d(e,"a",(function(){return _}));class _ extends o.Component{constructor(){super(...arguments),this.state={canvasId:0,canvasWidth:this.props.canvasSize.width,canvasHeight:this.props.canvasSize.height,canvasByGroup:[],isCanvasTransparent:"0"==this.props.canvasOpacity,showUpgrade:!1,backgroundMode:"solid"},this.componentDidMount=()=>{this.getCanvasByGroup(),this.setState({canvasId:this.getCanvasId(this.state.canvasWidth,this.state.canvasHeight)})},this.getCanvasByGroup=()=>{var t=Q.reduce((t,e)=>(t[e.group]=t[e.group]||[],t[e.group].push(e),t),Object.create([]));this.setState({canvasByGroup:t})},this.getCanvasId=(t,e)=>{let i=Q.filter(e=>e.width===t);if(i){let t=Object(j.b)(i,"height",e);if(t)return t.id}return 0},this.changeCanvasWidth=t=>{let e=parseInt(t.target.value,10);this.setState({canvasWidth:isNaN(e)?"":e})},this.changeCanvasHeight=t=>{let e=parseInt(t.target.value,10);this.setState({canvasHeight:isNaN(e)?"":e})},this.onKeyDownCanvasWidth=t=>{let e=t.shiftKey?10:1;if("ArrowUp"===t.key){t.preventDefault();let i=this.state.canvasWidth+e;this.props.setCanvasSize(i>0?i:1,this.state.canvasHeight)}if("ArrowDown"===t.key){t.preventDefault();let i=this.state.canvasWidth-e;this.props.setCanvasSize(i>0?i:1,this.state.canvasHeight)}},this.onKeyDownCanvasHeight=t=>{let e=t.shiftKey?10:1;
1if("ArrowUp"===t.key){t.preventDefault();let i=this.state.canvasHeight+e;this.props.setCanvasSize(this.state.canvasWidth,i>0?i:1)}if("ArrowDown"===t.key){t.preventDefault();let i=this.state.canvasHeight-e;this.props.setCanvasSize(this.state.canvasWidth,i>0?i:1)}},this.onBlur=t=>{let e=this.state.canvasWidth,i=this.state.canvasHeight;this.props.setCanvasSize(e>0?e:1,i>0?i:1)},this.onEnter=t=>{if("Enter"===t.key){let t=this.state.canvasWidth,e=this.state.canvasHeight;this.props.setCanvasSize(t>0?t:1,e>0?e:1)}},this.selectCanvas=t=>{let e=parseInt(t.target.value,10);if(0!==e){let t=Object(j.b)(Q,"id",e);this.props.setCanvasSize(t.width,t.height)}},this.onToggleTransparent=()=>{this.props.setCanvasOpacity(this.state.isCanvasTransparent?100:0),this.setState({isCanvasTransparent:!this.state.isCanvasTransparent})},this.toggleUpgradeModal=()=>{this.setState({showUpgrade:!this.state.showUpgrade})},this.setBackgroundMode=t=>{this.setState({backgroundMode:t})}}componentWillReceiveProps(t){if(t.canvasSize){let e=t.canvasSize.width,i=t.canvasSize.height,n=this.getCanvasId(e,i);this.setState({canvasWidth:e,canvasHeight:i,canvasId:n})}}render(){let t=this.state.canvasByGroup,e=this.state.backgroundMode;return r.a.createElement(E.a.Consumer,null,i=>{let{authUser:n}=i;return r.a.createElement("div",{className:"section"},r.a.createElement("h4",{className:"sectionTitle",style:{border:0}},"Canvas options"),r.a.createElement("div",{className:"sectionBody"},r.a.createElement("div",{className:"sectionBlock sectionBlockInline"}
1,r.a.createElement("p",{className:"sectionLabel"},"Canvas"),r.a.createElement("div",{className:"sectionContent"},r.a.createElement("div",{className:"selectWrap"},r.a.createElement("select",{className:"textInput ",value:this.state.canvasId,onChange:this.selectCanvas},Object.entries(t).map(t=>{let[e,i]=t;return r.a.createElement("optgroup",{key:e,label:e},i.map(t=>r.a.createElement("option",{key:t.id,value:t.id,disabled:0===t.id&&"disabled"},t.name)))}))))),r.a.createElement("div",{className:"sectionBlock sectionBlockInline"},r.a.createElement("p",{className:"sectionLabel"},"Size"),r.a.createElement("div",{className:"sectionContent",style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},r.a.createElement("div",{className:"textInputUnit inputPixel textInputLabel inputLabelWidth",style:{marginRight:5}},r.a.createElement("input",{className:"textInput",value:this.state.canvasWidth,onChange:t=>this.changeCanvasWidth(t),onBlur:t=>this.onBlur(t),onKeyPress:t=>this.onEnter(t),onKeyDown:t=>this.onKeyDownCanvasWidth(t)})),r.a.createElement("div",{className:"textInputUnit inputPixel textInputLabel inputLabelHeight",style:{marginLeft:5}},r.a.createElement("input",{className:"textInput",value:this.state.canvasHeight,onChange:t=>this.changeCanvasHeight(t),onBlur:t=>this.onBlur(t),onKeyPress:t=>this.onEnter(t),onKeyDown:t=>this.onKeyDownCanvasHeight(t)}))))),r.a.createElement("h4",{className:"sectionTitle"},"Background"),r.a.createElement("div",{className:"sectionBody"},r.a.createElement("div",{className:"buttonGroup",style:{marginBottom:15}},r.a.createElement("button",{className:"button "+("solid"===e?"active":""),onClick:()=>this.setBackgroundMode("solid")},"Solid"),r.a.createElement("button",{className:"button "+("gradient"===e?"active":""),onClick:()=>this.setBackgroundMode("gradient")},"Gradient"),r.a.createElement("button",{className:"button "+("image"===e?"active":""),onClick:()=>this.setBackgroundMode("image")},"Image")),r.a.createElement("div",{className:"ccc"},"solid"===e&&r.a.createElement("div",{className:"colorgrid"},r.a.createElement("button",{onClick:Object(j.g)(n)?()=>this.props.setCanvasColor("transparent"):()=>this.toggleUpgradeModal(),style:{backgroundImage:"url(".concat(Z.a,")"),backgroundSize:"50%"}},!Object(j.g)(n)&&r.a.createElement(C.a,{icon:"lock",size:14})),J.map(t=>r.a.createElement("button",{onClick:()=>this.props.setCanvasColor(t),style:{backgroundColor:t}}))),"gradient"===e&&r.a.createElement("div",{className:"colorgrid"},X.map(t=>r.a.createElement("button",{onClick:()=>this.props.setCanvasColor(t),style:{backgroundImage:t}}))),"image"===e&&r.a.createElement("div",{className:"x"},r.a.createElement(U,{background:this.props.canvasBackground,canvasBackgroundMode:this.props.canvasBackgroundMode,canvasBackgroundPosition:this.props.canvasBackgroundPosition,setCanvasBackground:this.props.setCanvasBackground,setCanvasBackgroundDrop:this.props.setCanvasBackgroundDrop,setCanvasBackgroundMode:this.props.setCanvasBackgroundMode,setCanvasBackgroundPosition:this.props.setCanvasBackgroundPosition})))),this.state.showUpgrade&&l.a.createPortal(r.a.createElement(S.a,{toggleUpgradeModal:this.toggleUpgradeModal,upgradeMessage:"search"}),document.getElementById("modal")))})}}},933:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=(i(363),i(15));i(261),i(262),i(263),i(264),i(265),i(266),i(267),i(268),i(269);a.Component;var r,c,l,h=i(24),p=i.n(h);a.Component;o.a.div(r||(r=Object(n.a)(['\n padding: 15px;\n background: #2a2c33;\n text-align: center;\n margin: 40px 25px 0;\n border-radius: 8px;\n position: relative;\n &::before {\n content: "";\n position: absolute;\n top: -10px;\n margin-left: -10px;\n border-bottom: 10px solid #2a2c33;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n }\n']))),o.a.ol(c||(c=Object(n.a)(["\n list-style: none;\n margin: 15px 0;\n"]))),o.a.li(l||(l=Object(n.a)(["\n display: flex;\n padding: 0 15px 0;\n background: ",";\n font-size: 13px;\n margin-bottom: 1px;\n align-items: center;\n outline: none;\n span {\n padding: 10px 0;\n flex: 1;\n text-transform: capitalize;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n img {\n width: 24px;\n margin-right: 4px;\n }\n em {\n visibility: ",";\n padding: 4px;\n margin-left: 1px;\n }\n &:hover {\n background-color: ",";\n em {\n visibility: visible;\n }\n }\n"])),t=>
1t.active?"#0094dd":"transparent",t=>t.active?"visible":"hidden",t=>t.active?"#0094dd":"#222");var d,m=i(361),g=i(60),u=i(13);const b=[{tag:"phone",label:"Phone"},{tag:"browser",label:"Browser"},{tag:"text",label:"Text"},{tag:"laptop",label:"Laptop"},{tag:"display",label:"Display"},{tag:"appstore",label:"App store"},{tag:"watch",label:"Watch"}];var x=t=>{let{resetFilter:e,filterTemplatesByTag:i}=t;const n=Object(a.useRef)(null),[o,r]=Object(a.useState)("All"),c=(t,e,i,n)=>-i*(t/=n)*(t-2)+e;return s.a.createElement(v,null,s.a.createElement("div",{className:"filter-top"},s.a.createElement("p",null,"Templates"),s.a.createElement("div",null,s.a.createElement("button",{onClick:()=>{const t=n.current,e=t.scrollLeft,i=Math.max(t.scrollLeft-200,0),a=performance.now(),s=n=>{const o=n-a,r=Math.min(o/400,1),l=c(r,e,i-e,1);t.scrollTo({left:l}),r<1&&requestAnimationFrame(s)};requestAnimationFrame(s)}},s.a.createElement(p.a,{icon:"chevron-left",size:16,color:"#eee"})),s.a.createElement("button",{onClick:()=>{const t=n.current,e=t.scrollLeft,i=Math.min(t.scrollLeft+200,t.scrollWidth-t.clientWidth),a=performance.now(),s=n=>{const o=n-a,r=Math.min(o/400,1),l=c(r,e,i-e,1);t.scrollTo({left:l}),r<1&&requestAnimationFrame(s)};requestAnimationFrame(s)}},s.a.createElement(p.a,{icon:"chevron-right",size:16,color:"#eee"})))),s.a.createElement("div",{className:"filter-buttons-container",ref:n},s.a.createElement("div",{className:"filter-buttons"},s.a.createElement("button",{onClick:()=>(e(),void r("All")),className:"".concat("All"===o?"active":"")},"All"),b.map(t=>s.a.createElement("button",{key:t.tag,onClick:()=>{return e=t.tag,i(e),void r(e);var e},className:"".concat(t.tag===o?"active":"")},t.label)))))};const v=o.a.div(d||(d=Object(n.a)(["\n\t.filter-top {\n\t\tdisplay: flex;\n\t\tpadding: 15px 15px 5px;\n\t\tjustify-content: space-between;\n\t\tdiv {\n\t\t\tdisplay: flex;\n\t\t}\n\t\tbutton {\n\t\t\tbackground: #2a2c33;\n\t\t\tborder: 0;\n\t\t\tpadding: 2px 3px;\n\t\t\tborder-radius: 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 0 0 3px;\n\t\t}\n\t}\n\t.filter-buttons-container {\n\t\twidth: 100%;\n\t\toverflow-x: scroll;\n\t\tscrollbar-width: none; /* Firefox */\n\t\t&::-webkit-scrollbar {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t.filter-buttons {\n\t\tpadding: 10px 15px 10px;\n\t\tdisplay: flex;\n\t\twidth: 350px;\n\t\t// background: red;\n\t\tflex-wrap: wrap;\n\t\toverflow-y: hidden;\n\t}\n\t.filter-buttons button {\n\t\tbackground: transparent;\n\t\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\t\tborder-radius: 6px;\n\t\tcolor: #eee;\n\t\tpadding: 8px 10px;\n\t\tmargin: 0 6px 6px 0;\n\t\tcursor: pointer;\n\t\tfont-size: 13px;\n\t\t&:hover {\n\t\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\t\tborder-color: rgba(255, 255, 255, 0.5);\n\t\t}\n\t\t&.active {\n\t\t\tcolor: #333;\n\t\t\tbackground: rgba(255, 255, 255, 0.8);\n\t\t\tborder-color: rgba(255, 255, 255, 0.5);\n\t\t}\n\t}\n"])));var f,y,w;var E=t=>{const[e,i]=Object(a.useState)(m.a);Object(a.useEffect)(()=>{i(m.a)},[]);const n=t=>{let e=m.a.filter(e=>Array.isArray(e.tags)&&e.tags.includes(t));i(e)},o=()=>{i(m.a)};return s.a.createElement(u.a.Consumer,null,i=>{let{authUser:a}=i;return s.a.createElement("div",null,s.a.createElement(j,null,s.a.createElement(x,{resetFilter:o,filterTemplatesByTag:n})),s.a.createElement(z,null,e.map(e=>s.a.createElement("li",{key:e.id,onClick:()=>t.applyTemplate(e)},s.a.createElement(S,{alt:e.id,src:e.thumbnail,size:e.canvas.size,color:e.canvas.color}),!Object(g.g)(a)&&e.isPro&&s.a.createElement("span",null,s.a.createElement(p.a,{icon:"lock",size:22}))))))})};const j=o.a.div(f||(f=Object(n.a)(["\n\tborder-bottom: 1px solid #000;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 9;\n\tbackground: #191a1e;\n"]))),S=o.a.img(y||(y=Object(n.a)(["\n\twidth: 100%;\n\tdisplay: block;\n\t/* height: ","px; */\n\tborder-radius: 2px;\n\toverflow: hidden;\n\tbackground-color: ",";\n\tbackground-size: contain;\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-image: ",";\n"])),t=>220/(t.size.width/t.size.height),t=>t.color,t=>"url(".concat(t.src,")")),z=o.a.ul(w||(w=Object(n.a)(["\n\tpadding: 15px 15px 65px;\n\t/* width: 250px;
1 */\n\toverflow-y: scroll;\n\theight: calc(100vh - 58px - 135px);\n\tlist-style: none;\n\tcursor: pointer;\n\tscrollbar-width: none; /* Firefox */\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\tli:not(.note) {\n\t\tmargin-bottom: 12px;\n\t\tposition: relative;\n\t\ttransition: all 0.15s ease-out;\n\t\tspan {\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: 50%;\n\t\t\tmargin: -30px 0 0 -30px;\n\t\t\twidth: 60px;\n\t\t\theight: 60px;\n\t\t\tz-index: 11;\n\t\t\tbackground: rgba(0, 0, 0, 0.5);\n\t\t\tborder-radius: 50%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\ttransition: all 0.15s ease-out;\n\t\t}\n\t\t&:hover {\n\t\t\ttransition: all 0.15s ease-out;\n\t\t\ttransform: scale(1.02);\n\t\t\tspan {\n\t\t\t\ttransition: all 0.15s ease-out;\n\t\t\t\ttransform: scale(1.15);\n\t\t\t}\n\t\t}\n\t}\n\tp {\n\t\tfont-size: 13px;\n\t\tcolor: rgba(255, 255, 255, 0.5);\n\t}\n\t.note {\n\t\ttext-align: center;\n\t\tfont-size: 14px;\n\t\tcursor: default;\n\t\tpadding: 10px 15px;\n\t\tcolor: rgba(255, 255, 255, 0.5);\n\t}\n"])));var C;i(364);i.d(e,"a",(function(){return k}));class k extends a.Component{constructor(){super(...arguments),this.state={currentTab:"templates"},this.changeTab=t=>{this.setState({currentTab:t})}}render(){this.state.currentTab;return s.a.createElement(O,null,s.a.createElement("div",{style:{display:"flex",alignItems:"center",minHeight:68,paddingLeft:15,borderBottom:"1px solid #000"}},s.a.createElement("h1",null,"shotsnapp")),s.a.createElement(E,{applyTemplate:this.props.applyTemplate}))}}const O=o.a.div(C||(C=Object(n.a)(["\n\tbackground: #191a1e;\n\twidth: 220px;\n\tcolor: #fff;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100vh;\n\th1 {\n\t\tfont-size: 20px;\n\t}\n"])))},935:function(t,e,i){"use strict";var n,a=i(16),s=i(0),o=i.n(s),r=i(26),c=i.n(r),l=i(15),h=i(82),p=i(60),d=i(77),m=i(24),g=i.n(m),u=i(83),b=(i(143),i(85)),x=i(13);var v=t=>{let{label:e,status:i,action:n,showLock:a=!1,disabled:s=!1}=t;return o.a.createElement("div",{className:"sectionBlock sectionBlockInline",style:{margin:"15px 0"}},o.a.createElement("p",{className:"sectionLabel",style:{width:140}},e," ",a&&o.a.createElement("span",{style:{verticalAlign:"-1px",marginLeft:4}},o.a.createElement(g.a,{icon:"lock",size:14}))),o.a.createElement("div",{className:"sectionContent",style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},s&&o.a.createElement(f,{className:"false disabled"},o.a.createElement("span",{className:"toggleHandle"}," ")),!s&&o.a.createElement(f,{onClick:()=>n(!i),className:"".concat(i?"true":"false")},o.a.createElement("span",{className:"toggleHandle"}," "))))};const f=l.a.div(n||(n=Object(a.a)(["\n\theight: 22px;\n\tborder-radius: 20px;\n\tdisplay: block;\n\twidth: 42px;\n\tbackground: #2a2c33;\n\tposition: relative;\n\ttransition: 0.12s linear;\n\tcursor: pointer;\n\t&.false {\n\t\tborder: 2px solid #2a2c33;\n\t\tspan {\n\t\t\tleft: 0;\n\t\t}\n\t}\n\t&.true {\n\t\tbackground: #0094dd;\n\t\tborder: 2px solid #0094dd;\n\t\tspan {\n\t\t\tleft: 20px;\n\t\t}\n\t}\n\t&.disabled {\n\t\topacity: 0.3;\n\t}\n\tspan {\n\t\tdisplay: block;\n\t\theight: 18px;\n\t\twidth: 18px;\n\t\tbackground: #fff;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tborder-radius: 15px;\n\t\ttransition: 0.12s linear all;\n\t}\n"])));var y=i(86),w=i(84),E=(i(192),i(109));var j,S=t=>{let{canvasSize:e,width:i,height:n,position:a,setPosition:r,setSize:l,tweet:h,rotation:d,setRotation:m,cornerRadius:g,setCornerRadius:f,padding:j,setPadding:S,fontSize:z,setFontSize:C,shadow:k,setShadow:O,showMetrics:B,showTimestamp:I,showMedia:D,setShowMetrics:P,setShowMedia:N,setShowTimestamp:M,darkMode:L,setDarkMode:F,showTwitterLogo:R,setShowTwitterLogo:K,setTweet:A,getTweetData:W,hasMedia:V}=t,T={width:i,height:n};const[U,Y]=Object(s.useState)(!1);return o.a.createElement(x.a.Consumer,null,t=>{let{authUser:i}=t;return o.a.createElement("div",null,o.a.createElement("div",{className:"section"},o.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},o.a.createElement(u.a,{canvasSize:e,objectSize:T,objectPosition:a,setObjectPosition:r})),o.a.createElement("h4",{className:"sectionTitle"},"Tweet URL"),o.a.createElement("p",{style:{margin:"4px 0 0 15px"}},"Paste any tweet URL and press Enter"),o.a.createElement("div",{className:"sectionBody"},o.a.createElement("textarea",{className:"textInput textArea",value:h,onKeyDown:t=>(t=>{"Enter"===t.key&&W(t.target.value)})(t),onChange:t=>(t=>{A(t.target.value)})(t)})),o.a.createElement("h4",{className:"sectionTitle"},"Options"),o.a.createElement("div",{className:"sectionBody"},o.a.createElement(w.a,{position:a,setObjectPosition:r}),o.a.createElement(b.a,{ratio:1,size:T,setSize:l}),o.a.createElement(y.a,{label:"Rotate",unit:"degree",value:d,setValue:m,min:-180,max:180}),o.a.createElement(y.a,{label:"Font size",unit:"pixel",value:z,showLock:!Object(p.g)(i),setValue:Object(p.g)(i)?C:()=>Y(!0),min:20,max:30}),o.a.createElement(y.a,{label:"Round",unit:"pixel",value:g,setValue:f,min:0,max:50}),o.a.createElement(y.a,{label:"Shadow",unit:"pixel",value:k,setValue:O,min:0,max:50}),o.a.createElement(y.a,{label:"Padding",unit:"pixel",value:j,setValue:S,min:30,max:60}),o.a.createElement(v,{label:"Show media",status:D,showLock:!Object(p.g)(i),action:Object(p.g)(i)?N:()=>Y(!0),disabled:!V}),o.a.createElement(v,{label:"Show timestamp",status:I,action:M}),o.a.createElement(v,{label:"Show metrics",status:B,showLock:!Object(p.g)(i),action:Object(p.g)(i)?P:()=>Y(!0)}),o.a.createElement(v,{label:"Show Twitter logo",status:R,action:K}),o.a.createElement(v,{label:"Dark mode",status:L,showLock:!Object(p.g)(i),action:Object(p.g)(i)?F:()=>Y(!0)}))),U&&c.a.createPortal(o.a.createElement(E.a,{toggleUpgradeModal:()=>Y(!1)}),document.getElementById("modal")))})},z=i(79),C=i(603),k=i.n(C),O=i(27);class B extends s.Component{constructor(){super(...arguments),this.state={divid:(new Date).getTime()/1e3,object:this.props.object,isSelected:!1,width:this.props.object.size?this.props.object.size.width:300,height:this.props.object.size?this.props.object.size.height:500,tweetData:null},this.componentDidMount=()=>{let t=this.state.object.tweet;if(t?this.getTweetData(t):(this.setTweet("https://twitter.com/gaddafirusli/status/1602205710393098241"),this.getTweetData("https://twitter.com/gaddafirusli/status/1602205710393098241")),!this.props.object.position){let t=Object(p.c)(this.props.object.type);this.props.context.setObjectKey(this.props.id,{position:Object(p.e)({width:100,height:100},this.props.context.canvasSize),icon:t})}},this.showSelection=()=>{this.props.context.setSelection(this.state.object)},this.getTweetData=t=>{this.setState({tweetData:null});const e=t.trim().replace(/\/$/,"").split("?")[0].split("/"),i=e[e.length-1];if(!i||!/^\d+$/.test(i))return void console.log("Invalid tweet URL");fetch("https://gumroad-verify-sand.vercel.app/tweet?id="+i,{mode:"cors"}).then(t=>t.json()).then(t=>{this.setState({tweetData:t},()=>{this.calculateDimension()})}).catch(t=>console.log(t))},this.setPosition=t=>{if(t){let e={x:Math.round(10*t.x)/10,y:Math.round(10*t.y)/10};this.props.context.setObjectKey(this.props.id,{position:e})}},this.setIcon=t=>{this.props.context.setObjectKey(this.props.id,{icon:t})},this.setTweet=t=>{this.props.context.setObjectKey(this.props.id,{tweet:t})},this.setShowMetrics=t=>{this.props.context.setObjectKey(this.props.id,{showMetrics:t}),setTimeout(()=>{this.calculateDimension()})},this.setShowTimestamp=t=>{this.props.context.setObjectKey(this.props.id,{showTimestamp:t}),setTimeout(()=>{this.calculateDimension()})},this.setShowMedia=t=>{this.props.context.setObjectKey(this.props.id,{showMedia:t}),setTimeout(()=>{this.calculateDimension()},50)},this.setShowTwitterLogo=t=>{this.props.context.setObjectKey(this.props.id,{showTwitterLogo:t})},this.setRotation=t=>{this.props.context.setObjectKey(this.props.id,{rotation:t})},this.setSize=t=>{this.props.context.setObjectKey(this.props.id,{size:t})},this.setFontSize=t=>{this.props.context.setObjectKey(this.props.id,{fontSize:t}),setTimeout(()=>{this.calculateDimension()})},this.setShadow=t=>{this.props.context.setObjectKey(this.props.id,{shadow:t})},this.setDarkMode=t=>{this.props.context.setObjectKey(this.props.id,{darkMode:t})},this.setCornerRadius=t=>{this.props.context.setObjectKey(this.props.id,{cornerRadius:t})},this.setPadding=t=>{this.props.context.setObjectKey(this.props.id,{padding:t}),setTimeout(()=>{this.calculateDimension()})},this.onKeyDown=t=>{this.setPosition(Object(p.h)(t,this.state.object.position))},this.onDrag=(t,e)=>{if(this.state.isSelected){let i={x:this.state.object.position.x+Math.round(10*t)/10,y:this.state.object.position.y+Math.round(10*e)/10};this.props.context.setObjectKey(this.props.id,{position:i})}},this.onResize=(t,e,i)=>{let{top:n,left:a,width:s,height:o}=t;const r=document.getElementById(this.state.divid),c=r.offsetHeight;r.offsetWidth;this.setSize({width:parseInt(s,10),height:parseInt(c,10)}),this.setPosition({x:a,y:n})},this.calculateDimension=()=>{const t=document.getElementById(this.state.divid),e=t.offsetHeight,i=t.offsetWidth;this.setState({width:i}),this.setSize({width:parseInt(i,10),height:parseInt(e,10)})},this.render=()=>{this.state.object.icon||Object(p.c)(this.props.object.type);let t=this.state.object.position||{x:(this.props.context.canvasSize.width-100)/2,y:(this.props.context.canvasSize.height-100)/2},e=this.state.object.rotation||0,i=null==this.state.object.cornerRadius?16:this.state.object.cornerRadius,n=this.state.object.padding||40,a=this.state.object.fontSize||24,s=null==this.state.object.shadow?10:this.state.object.shadow,r=this.state.object.tweet,l=null==this.state.object.showTimestamp||this.state.object.showTimestamp,m=null==this.state.object.showMetrics||this.state.object.showMetrics,u=null==this.state.object.showMedia||this.state.object.showMedia,b=null!=this.state.object.darkMode&&this.state.object.darkMode,x=null==this.state.object.showTwitterLogo||this.state.object.showTwitterLogo,v=this.state.width,f=this.state.height,y=this.state.tweetData;return o.a.createElement("div",null,o.a.createElement("div",{className:"selectwrap absolute",selected:this.state.isSelected,style:{left:t.x,top:t.y,width:v,height:f,transform:"rotate(".concat(e,"deg)"),background:"".concat(b?"transparent":"#fff"),borderRadius:i,boxShadow:"0 0 ".concat(s,"px 0 rgba(0,0,0,0.3)"),overflow:"hidden"}},!y&&o.a.createElement("div",{id:this.state.divid,style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"}},o.a.createElement(O.a,{color:"#333"})," ",o.a.createElement("div",{style:{marginLeft:5}},"Loading...")),y&&o.a.createElement("div",{id:this.state.divid,className:"twitter-card ".concat(b?"twitter-dark-mode":""),style:{padding:n}},o.a.createElement("div",{className:"tweet-top"},y.user&&o.a.createElement("div",{className:"tweet-user"},o.a.createElement("img",{className:"avatar",src:y.user.profile_image_url_https.replace("_normal","")}),o.a.createElement("div",null,o.a.createElement("p",{className:"name"},y.user.name," ",y.user.is_blue_verified&&o.a.createElement("em",null,o.a.createElement("img",{src:k.a}))),o.a.createElement("p",{className:"handle"},"@",y.user.screen_name))),x&&o.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 24 24",fill:"#1D9BF0"},o.a.createElement("path",{d:"M24 4.37a9.6 9.6 0 0 1-2.83.8 5.04 5.04 0 0 0 2.17-2.8c-.95.58-2 1-3.13 1.22A4.86 4.86 0 0 0 16.61 2a4.99 4.99 0 0 0-4.79 6.2A13.87 13.87 0 0 1 1.67 2.92 5.12 5.12 0 0 0 3.2 9.67a4.82 4.82 0 0 1-2.23-.64v.07c0 2.44 1.7 4.48 3.95 4.95a4.84 4.84 0 0 1-2.22.08c.63 2.01 2.45 3.47 4.6 3.51A9.72 9.72 0 0 1 0 19.74 13.68 13.68 0 0 0 7.55 22c9.06 0 14-7.7 14-14.37v-.65c.96-.71 1.79-1.6 2.45-2.61z"}))),o.a.createElement("div",{className:"tweet_text",style:{fontSize:"".concat(a,"px")}},y.mediaDetails?y.text.replace(y.mediaDetails[0].url,""):y.text),y.mediaDetails&&u&&o.a.createElement("div",{className:"tweet_media ".concat("grid-"+y.mediaDetails.length)},y.mediaDetails.map((t,e)=>o.a.createElement("img",{width:t.original_info.width,height:t.original_info.width/(t.original_info.width/t.original_info.height),key:e,src:t.media_url_https}))),l&&o.a.createElement("p",{className:"tweet-date"}
1,new Date(y.created_at).toLocaleString(void 0,{year:"numeric",month:"long",day:"numeric",hour:"numeric",minute:"numeric",hour12:!0})),m&&o.a.createElement("div",{className:"tweet-metrics ".concat(l?"withTime":"noTime")},o.a.createElement("p",null,o.a.createElement(g.a,{icon:"message-circle",size:16}),y.conversation_count.toLocaleString()),o.a.createElement("p",null,o.a.createElement(g.a,{icon:"heart",size:16}),y.favorite_count.toLocaleString())))),o.a.createElement(I,{onClick:()=>this.showSelection(),tabIndex:0,onKeyDown:this.onKeyDown,zoom:this.props.context.zoom/100,isSelected:this.state.isSelected},o.a.createElement(h.a,{left:t.x,top:t.y,width:v,height:f,rotateAngle:e,onDrag:this.onDrag,onResize:this.onResize,onRotate:this.setRotation,zoomable:this.state.isSelected?"nw, ne, se, sw":"",rotatable:this.state.isSelected})),this.state.isSelected&&c.a.createPortal(o.a.createElement(d.a,null,o.a.createElement(S,{canvasSize:this.props.context.canvasSize,width:v,height:f,position:t,rotation:e,cornerRadius:i,padding:n,shadow:s,fontSize:a,tweet:r,showMetrics:m,showMedia:u,showTimestamp:l,darkMode:b,showTwitterLogo:x,setSize:this.setSize,setFontSize:this.setFontSize,setCornerRadius:this.setCornerRadius,setShadow:this.setShadow,setPadding:this.setPadding,setPosition:this.setPosition,setRotation:this.setRotation,setShowMetrics:this.setShowMetrics,setShowMedia:this.setShowMedia,setShowTimestamp:this.setShowTimestamp,setDarkMode:this.setDarkMode,setTweet:this.setTweet,getTweetData:this.getTweetData,setShowTwitterLogo:this.setShowTwitterLogo,hasMedia:y&&y.mediaDetails})),document.getElementById("sidebar")))}}}B.getDerivedStateFromProps=(t,e)=>t.object!==e.object?{object:t.object,width:t.object.size?t.object.size.width:100,height:t.object.size?t.object.size.height:100}:null===t.context.currentSelection?{isSelected:!1}:null!==t.context.currentSelection?{isSelected:t.context.currentSelection.id===e.object.id}:null;e.a=Object(z.a)(B);const I=l.a.div(j||(j=Object(a.a)(["\n\t.gblcbk {\n\t\toutline: ","px dashed\n\t\t\t",";\n\t\t&:hover {\n\t\t\toutline: ","px dashed\n\t\t\t\t",";\n\t\t}\n\t\t.tr,\n\t\t.tl {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.br,\n\t\t.bl {\n\t\t\ttop: 50%;\n\t\t\tcursor: w-resize !important;\n\t\t}\n\t\t.br {\n\t\t\tcursor: e-resize !important;\n\t\t}\n\t}\n"])),t=>2/t.zoom,t=>t.isSelected?"red":"transparent",t=>2/t.zoom,t=>t.isSelected?"red":"#41bffe")},936:function(t,e,i){"use strict";var n,a,s,o=i(16),r=i(0),c=i.n(r),l=i(26),h=i.n(l),p=i(15),d=i(82),m=i(60),g=i(77),u=i(24),b=i.n(u),x=i(165),v=i(83),f=i(143),y=i(85),w=i(86),E=i(170);class j extends r.Component{constructor(){super(...arguments),this.state={keyword:"",isSearching:!1,searchResults:[]},this.onKeywordChange=t=>{const e=t.target.value;this.setState({keyword:e,isSearching:!0});let i=x.a.filter(t=>t.tags.join(" ").includes(e));this.setState({searchResults:i})},this.render=()=>{let t=this.props.title,e=this.props.back,i=this.props.icon,n=this.state.isSearching?this.state.searchResults:x.a;return c.a.createElement(E.a,{toggleSlider:e,title:t},c.a.createElement("div",null,c.a.createElement(b.a,{icon:"search",size:16,color:"#ccc",style:{position:"absolute",top:22,left:24,zIndex:2}}),c.a.createElement(z,{className:"textInput",value:this.state.keyword,placeholder:"Search for icons...",onChange:this.onKeywordChange})),c.a.createElement(S,null,n.map((t,e)=>c.a.createElement(C,{key:e,selected:i.id===t.id,onClick:()=>this.props.setIcon(t)},c.a.createElement("div",{dangerouslySetInnerHTML:{__html:t.svg}})))))}}}const S=p.a.div(n||(n=Object(o.a)(["\n padding: 15px 15px;\n\n flex-wrap: wrap;\n display: grid;\n grid-template-columns: repeat(auto-fill, 50px);\n -webkit-box-pack: justify;\n justify-content: space-between;\n"]))),z=p.a.input(a||(a=Object(o.a)(["\n margin: 12px 15px 8px;\n padding-left: 30px;\n width: calc(100% - 30px);\n"]))),C=p.a.button(s||(s=Object(o.a)(["\n width: 50px;\n height: 50px;\n border: 2px solid ",";\n background: none;\n color: #fff;\n cursor: pointer;\n margin: 0 0 5px;\n outline: none;\n border-radius: 8px;\n &:hover {\n border-color: ",";\n }\n & > div {\n display: flex;\n width: 46px;\n height: 46px;\n justify-content: center;
1\n align-items: center;\n overflow: hidden;\n }\n svg {\n transform: scale(0.58);\n }\n"])),t=>t.selected?"#0094dd":"transparent",t=>t.selected?"#0094dd":"rgba(255, 255, 255, 0.2)");var k=i(84);class O extends r.Component{constructor(){super(...arguments),this.state={displayIconsBrowser:!1},this.toggleIconsBrowser=()=>{this.setState({displayIconsBrowser:!this.state.displayIconsBrowser})},this.render=()=>{let t={width:this.props.width,height:this.props.height};return c.a.createElement("div",null,c.a.createElement("div",{className:"section"},c.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},c.a.createElement(v.a,{canvasSize:this.props.canvasSize,objectSize:t,objectPosition:this.props.position,setObjectPosition:this.props.setPosition})),c.a.createElement("h4",{className:"sectionTitle"},"Icon"),c.a.createElement("div",{className:"sectionBody"},c.a.createElement("div",{id:"buttonpos",className:"deviceButton",onClick:()=>this.toggleIconsBrowser()},c.a.createElement("div",{className:"icon",dangerouslySetInnerHTML:{__html:this.props.icon.svg}}),c.a.createElement("div",{className:"details"},c.a.createElement("p",null,this.props.icon.id),c.a.createElement("span",null,"Browse all icons")),c.a.createElement(b.a,{icon:"chevron-right",size:20})),this.state.displayIconsBrowser&&c.a.createElement(j,{title:"Icons",back:this.toggleIconsBrowser,icon:this.props.icon,setIcon:this.props.setIcon})),c.a.createElement("h4",{className:"sectionTitle"},"Options"),c.a.createElement("div",{className:"sectionBody"},c.a.createElement(k.a,{position:this.props.position,setObjectPosition:this.props.setPosition}),c.a.createElement(y.a,{ratio:1,size:t,setSize:this.props.setSize}),c.a.createElement(f.a,{label:"Icon color",color:this.props.color,setColor:this.props.setColor,opacity:this.props.opacity,setOpacity:this.props.setOpacity}),c.a.createElement(w.a,{label:"Rotate",unit:"degree",value:this.props.rotation,setValue:this.props.setRotation,min:-180,max:180}))))}}}var B,I=i(79);class D extends r.Component{constructor(){super(...arguments),this.state={object:this.props.object,isSelected:!1,width:this.props.object.size?this.props.object.size.width:100,height:this.props.object.size?this.props.object.size.height:100},this.componentDidMount=()=>{if(!this.props.object.position){let t=Object(m.c)(this.props.object.type);this.props.context.setObjectKey(this.props.id,{position:Object(m.e)({width:100,height:100},this.props.context.canvasSize),icon:t})}},this.showSelection=()=>{this.props.context.setSelection(this.state.object)},this.setPosition=t=>{if(t){let e={x:Math.round(10*t.x)/10,y:Math.round(10*t.y)/10};this.props.context.setObjectKey(this.props.id,{position:e})}},this.setIcon=t=>{this.props.context.setObjectKey(this.props.id,{icon:t})},this.setRotation=t=>{this.props.context.setObjectKey(this.props.id,{rotation:t})},this.setColor=t=>{this.props.context.setObjectKey(this.props.id,{color:t})},this.setSize=t=>{this.props.context.setObjectKey(this.props.id,{size:t})},this.setOpacity=t=>{this.props.context.setObjectKey(this.props.id,{opacity:t})},this.onKeyDown=t=>{console.log("ICON KEYDOWN"),this.setPosition(Object(m.h)(t,this.state.object.position))},this.onDrag=(t,e)=>{if(this.state.isSelected){let i={x:this.state.object.position.x+Math.round(10*t)/10,y:this.state.object.position.y+Math.round(10*e)/10};this.props.context.setObjectKey(this.props.id,{position:i})}},this.onResize=(t,e,i)=>{let{top:n,left:a,width:s,height:o}=t;this.setSize({width:parseInt(s,10),height:parseInt(o,10)}),this.setPosition({x:a,y:n})},this.render=()=>{let t=this.state.object.icon||Object(m.c)(this.props.object.type),e=this.state.object.position||{x:(this.props.context.canvasSize.width-100)/2,y:(this.props.context.canvasSize.height-100)/2},i=this.state.object.rotation||0,n=this.state.object.color||"#fff",a=this.state.object.opacity,s=this.state.width||40,o=this.state.height||40;return c.a.createElement("div",null,c.a.createElement("div",{className:"selectwrap absolute",selected:this.state.isSelected,style:{left:e.x,top:e.y,width:s,height:o,transform:"rotate(".concat(i,"deg)"),color:n}},c.a.createElement("div",{dangerouslySetInnerHTML:{__html:t.svg}})),c.a.createElement(P,{onClick:()=>this.showSelection(),tabIndex:0,onKeyDown:this.onKeyDown,zoom:this.props.context.zoom/100,isSelected:this.state.isSelected},c.a.createElement(d.a,{left:e.x,top:e.y,width:s,height:o,aspectRatio:1,rotateAngle:i,onDrag:this.onDrag,onResize:this.onResize,onRotate:this.setRotation,zoomable:this.state.isSelected?"nw, ne, se, sw":"",rotatable:this.state.isSelected})),this.state.isSelected&&h.a.createPortal(c.a.createElement(g.a,null,c.a.createElement(O,{canvasSize:this.props.context.canvasSize,width:s,height:o,position:e,rotation:i,icon:t,opacity:a,color:n,setIcon:this.setIcon,setSize:this.setSize,setColor:this.setColor,setOpacity:this.setOpacity,setPosition:this.setPosition,setRotation:this.setRotation})),document.getElementById("sidebar")))}}}D.getDerivedStateFromProps=(t,e)=>
1t.object!==e.object?{object:t.object,width:t.object.size?t.object.size.width:100,height:t.object.size?t.object.size.height:100}:null===t.context.currentSelection?{isSelected:!1}:null!==t.context.currentSelection?{isSelected:t.context.currentSelection.id===e.object.id}:null;e.a=Object(I.a)(D);const P=p.a.div(B||(B=Object(o.a)(["\n .gblcbk {\n outline: ","px dashed\n ",";\n &:hover {\n outline: ","px dashed\n ",";\n }\n }\n"])),t=>2/t.zoom,t=>t.isSelected?"red":"transparent",t=>2/t.zoom,t=>t.isSelected?"red":"#41bffe")},937:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=i(26),r=i.n(o),c=i(15),l=i(82),h=i(60),p=i(77),d=i(24),m=i.n(d),g=i(164),u=i(83),b=i(100),x=i(86),v=i(108),f=i(84),y=i(85);class w extends a.Component{constructor(){super(...arguments),this.state={displayPhoneModels:!1},this.togglePhoneModels=()=>{this.setState({displayPhoneModels:!this.state.displayPhoneModels})},this.render=()=>{let t=this.props.device,e=t.size.width/t.size.height,i={width:this.props.width,height:this.props.height};return s.a.createElement("div",null,s.a.createElement("div",{className:"section"},s.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},s.a.createElement(u.a,{canvasSize:this.props.canvasSize,objectSize:i,objectPosition:this.props.position,setObjectPosition:this.props.setPosition})),s.a.createElement("h4",{className:"sectionTitle"},"Your Image"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(b.a,{file:this.props.file,imageSize:this.props.imageSize,imageCrop:this.props.imageCrop,ratio:this.props.screenWidth/this.props.screenHeight,setImageFile:this.props.setImageFile,setImageCrop:this.props.setImageCrop})),s.a.createElement("h4",{className:"sectionTitle"},"Display"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement("div",{id:"buttonpos",className:"deviceButton",onClick:()=>this.togglePhoneModels()},s.a.createElement("img",{alt:t.id,src:t.thumbnail}),s.a.createElement("div",{className:"details"},s.a.createElement("p",null,t.name),t.screen&&s.a.createElement("span",null,t.screen.width," x ",t.screen.height)),s.a.createElement(m.a,{icon:"chevron-right",size:20})),this.state.displayPhoneModels&&s.a.createElement(v.a,{models:g.a,title:"Display models",back:this.togglePhoneModels,setCurrentDevice:this.props.setCurrentDevice})),s.a.createElement("h4",{className:"sectionTitle"},"Options"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(f.a,{position:this.props.position,setObjectPosition:this.props.setPosition}),s.a.createElement(y.a,{ratio:e,size:i,setSize:this.props.setSize}),s.a.createElement(x.a,{label:"Rotate",unit:"degree",value:this.props.rotation,setValue:this.props.setRotation,min:-180,max:180}))))}}}var E,j=i(110),S=i(79);class z extends a.Component{constructor(){super(...arguments),this.state={isSelected:!1,object:this.props.object,file:null,imageSize:null,imageCrop:null,width:this.props.object.size?this.props.object.size.width:936,height:this.props.object.size?this.props.object.size.height:1863},this.componentDidMount=()=>{if(!this.props.object.position){let t=Object(h.c)(this.props.object.type);this.props.context.setObjectKey(this.props.id,{position:Object(h.e)(t.size,this.props.context.canvasSize),device:t})}},this.showSelection=()=>{this.props.context.setSelection(this.state.object)},this.setCurrentDevice=t=>{this.props.context.setObjectKey(this.props.id,{device:t})},this.setPosition=t=>{if(t){let e={x:Math.round(10*t.x)/10,y:Math.round(10*t.y)/10};this.props.context.setObjectKey(this.props.id,{position:e})}},this.setRotation=t=>{this.props.context.setObjectKey(this.props.id,{rotation:t})},this.setImageFile=t=>{this.setState({file:t}),t?Object(h.d)(t).then(t=>{this.setState({imageSize:t,imageCrop:null})}):this.setState({imageSize:null,imageCrop:null})},this.setImageCrop=t=>{this.setState({imageCrop:t})},this.setSize=t=>{this.props.context.setObjectKey(this.props.id,{size:t})},this.onKeyDown=t=>{this.setPosition(Object(h.h)(t,this.state.object.position))},this.onDrag=(t,e)=>{if(this.state.isSelected){let i={x:this.state.object.position.x+Math.round(10*t)/10,y:this.state.object.position.y+Math.round(10*e)/10};this.props.context.setObjectKey(this.props.id,{position:i})}},this.onResize=(t,e,i)=>{let{top:n,left:a,width:s,height:o}=t;this.setSize({width:parseInt(s,10),height:parseInt(o,10)}),this.setPosition({x:a,y:n})},this.render=()=>{let t=this.state.object.device||Object(h.c)(this.props.object.type),e=this.state.width,i=this.state.height,n=this.state.imageCrop,a=this.state.imageSize,o=this.state.file,c=this.state.object.position||0,d=this.state.object.rotation||0,m=t.image,g=t.background||"#1D2129",u=e*t.screen.width/t.size.width,b=i*t.screen.height/t.size.height,x=e*t.offset.top/t.size.width,v=t.hasSharpCorner;return s.a.createElement("div",null,s.a.createElement("div",{className:"selectwrap absolute",style:{left:c.x,top:c.y,width:e,height:i,transform:"rotate(".concat(d,"deg)")}},s.a.createElement("div",{className:"imageframe"},s.a.createElement("div",{className:"imagewrap ".concat(v&&"sharpCorner"),style:{width:u,height:b,marginTop:x||120,backgroundColor:g}},s.a.createElement(j.a,{file:o,imageSize:a,imageCrop:n}))),s.a.createElement("div",{className:"deviceframe"},s.a.createElement("img",{alt:t.id,src:m,style:{width:e,height:i}}
1))),s.a.createElement(C,{onClick:()=>this.showSelection(),tabIndex:0,onKeyDown:this.onKeyDown,zoom:this.props.context.zoom/100,isSelected:this.state.isSelected},s.a.createElement(l.a,{left:c.x,top:c.y,width:e,height:i,aspectRatio:t.size.width/t.size.height,rotateAngle:d,onDrag:this.onDrag,onResize:this.onResize,onRotate:this.setRotation,zoomable:this.state.isSelected?"nw, ne, se, sw":"",rotatable:this.state.isSelected})),this.state.isSelected&&r.a.createPortal(s.a.createElement(p.a,null,s.a.createElement(w,{file:o,device:t,width:e,height:i,screenWidth:u,screenHeight:b,position:c,rotation:d,imageCrop:n,imageSize:a,canvasSize:this.props.context.canvasSize,setCurrentDevice:this.setCurrentDevice,setPosition:this.setPosition,setImageFile:this.setImageFile,setRotation:this.setRotation,setImageFile:this.setImageFile,setImageCrop:this.setImageCrop,setSize:this.setSize})),document.getElementById("sidebar")))}}}z.getDerivedStateFromProps=(t,e)=>{if(t.object!==e.object){let e=Object(h.c)(t.object.type),i=e.size.width/e.size.height;return t.object.device&&(i=t.object.device.size.width/t.object.device.size.height),{object:t.object,width:t.object.size?t.object.size.width:e.size.width/2,height:t.object.size?t.object.size.width/i:e.size.height/2}}return null===t.context.currentSelection?{isSelected:!1}:null!==t.context.currentSelection?{isSelected:t.context.currentSelection.id===e.object.id}:null};e.a=Object(S.a)(z);const C=c.a.div(E||(E=Object(n.a)(["\n\t.gblcbk {\n\t\toutline: ","px dashed\n\t\t\t",";\n\t\t&:hover {\n\t\t\toutline: ","px dashed\n\t\t\t\t",";\n\t\t}\n\t}\n"])),t=>2/t.zoom,t=>t.isSelected?"red":"transparent",t=>2/t.zoom,t=>t.isSelected?"red":"#41bffe")},938:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=i(26),r=i.n(o),c=i(15),l=i(82),h=i(60),p=i(77),d=(i(110),i(83)),m=i(86),g=i(84),u=i(85),b=i(100),x=i(142),v=i(108),f=i(24),y=i.n(f);class w extends a.Component{constructor(){super(...arguments),this.state={displayBrowserModal:!1},this.toggleBrowserModal=()=>{this.setState({displayBrowserModal:!this.state.displayBrowserModal})}}render(){let t=this.props.browser,e=this.props.width/this.props.height,i={width:this.props.width,height:this.props.height};return s.a.createElement("div",{className:"section"},s.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},s.a.createElement(d.a,{canvasSize:this.props.canvasSize,objectSize:i,objectPosition:this.props.position,setObjectPosition:this.props.setPosition})),s.a.createElement("h4",{className:"sectionTitle"},"Your Image"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(b.a,{file:this.props.file,imageSize:this.props.imageSize,imageCrop:this.props.imageCrop,ratio:this.props.screenratio,setImageFile:this.props.setImageFile,setImageCrop:this.props.setImageCrop})),s.a.createElement("h4",{className:"sectionTitle"},"Browser"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement("div",{id:"buttonpos",className:"deviceButton",onClick:()=>this.toggleBrowserModal()},s.a.createElement("img",{alt:t.id,style:{width:80},src:t.thumbnail}),s.a.createElement("div",{className:"details"},s.a.createElement("p",null,t.name),s.a.createElement("span",null,t.desc)),s.a.createElement(y.a,{icon:"chevron-right",size:20})),this.state.displayBrowserModal&&s.a.createElement(v.a,{models:x.a,title:"Browser models",back:this.toggleBrowserModal,setCurrentDevice:this.props.setCurrentBrowser})),s.a.createElement("h4",{className:"sectionTitle"},"Options"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(g.a,{position:this.props.position,setObjectPosition:this.props.setPosition}),s.a.createElement(u.a,{ratio:e,size:i,setSize:this.props.setSize}),s.a.createElement(m.a,{label:"Shadow",value:this.props.shadow,setValue:this.props.setShadow,min:0}),s.a.createElement(m.a,{label:"Rotate",unit:"degree",value:this.props.rotation,setValue:this.props.setRotation,min:-180,max:180})))}}var E,j=i(79);class S extends a.Component{constructor(){super(...arguments),this.state={object:this.props.object,isSelected:!1,file:null,imageSize:null,imageCrop:null,width:this.props.object.size?this.props.object.size.width:1200,height:this.props.object.size?this.props.object.size.height:800},this.componentDidMount=()=>{if(!this.props.object.position){let t={width:1200,height:800},e=Object(h.c)(this.props.object.type);this.props.context.setObjectKey(this.props.id,{position:Object(h.e)(t,this.props.context.canvasSize),device:e})}},this.showSelection=t=>{this.props.context.setSelection(this.state.object)},this.setCurrentBrowser=t=>{console.log(t),this.props.context.setObjectKey(this.props.id,{device:t})},this.setRotation=t=>{this.props.context.setObjectKey(this.props.id,{rotation:t})},this.setShadow=t=>{this.props.context.setObjectKey(this.props.id,{shadow:t})},this.setPosition=t=>{if(t){let e={x:Math.round(10*t.x)/10,y:Math.round(10*t.y)/10};this.props.context.setObjectKey(this.props.id,{position:e})}},this.setImageFile=t=>{null===t?(this.setState({file:null,imageSize:null,imageCrop:null}),this.props.context.setObjectKey(this.props.id,{imageSize:{width:1200,height:800}})):Object(h.d)(t).then(e=>{this.setState({file:t,imageSize:e,imageCrop:null})})},this.setImageCrop=t=>{this.setState({imageCrop:t})},this.setSize=t=>{this.props.context.setObjectKey(this.props.id,{size:t})},this.onKeyDown=t=>{this.setPosition(Object(h.h)(t,this.state.object.position))},this.onDrag=(t,e)=>{if(this.state.isSelected){let i={x:this.state.object.position.x+Math.round(10*t)/10,y:this.state.object.position.y+Math.round(10*e)/10};this.props.context.setObjectKey(this.props.id,{position:i})}},this.onResize=(t,e,i)=>{let{top:n,left:a,width:s,height:o}=t;this.setSize({width:parseInt(s,10),height:parseInt(o,10)}),this.setPosition({x:a,y:n})},this.render=()=>{let t=this.state.file,e=this.state.object.device||Object(h.c)(this.props.object.type),i=e.he
1ight,n=this.state.object.position||0,a=this.state.object.shadow||0,o=this.state.object.rotation||0,c=this.state.width,d=this.state.height,m=this.state.imageCrop,g=this.state.imageSize,u=m?g.width/m.width*100:100,b=m?m.y/m.height*100:0,x=m?m.x/m.width*100:0;return s.a.createElement("div",{className:e.id},s.a.createElement("div",{className:"selectwrap absolute",style:{left:n.x,top:n.y,width:c,height:d,transform:"rotate(".concat(o,"deg)"),overflow:"hidden",borderRadius:8,backgroundColor:"#fff",boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.3), 0px 30px 80px rgba(0, 0, 0,"+a/100+")"}},s.a.createElement("div",{className:"browserView"},s.a.createElement("div",{className:e.class,style:{zIndex:10}}),!t&&s.a.createElement("div",{style:{backgroundColor:"#1D2129",height:d-i,display:"flex",justifyContent:"center",alignItems:"center"}},s.a.createElement("div",{className:"emptyimage"},s.a.createElement("p",null,"Your image here"))),t&&s.a.createElement("div",{className:"browserContent relative",style:{overflow:"hidden",height:d-i}},s.a.createElement("img",{alt:"screenshot",style:{width:"".concat(u,"%"),height:"auto",position:"absolute",top:"-".concat(b,"%"),left:"-".concat(x,"%"),display:"block",pointerEvents:"none"},src:t})))),s.a.createElement(z,{onClick:()=>this.showSelection(),tabIndex:0,onKeyDown:this.onKeyDown,zoom:this.props.context.zoom/100,isSelected:this.state.isSelected},s.a.createElement(l.a,{left:n.x,top:n.y,width:c,height:d,rotateAngle:o,onDrag:this.onDrag,onResize:this.onResize,onRotate:this.setRotation,zoomable:this.state.isSelected?"nw, ne, se, sw, n, s, e, w":"",rotatable:this.state.isSelected})),this.state.isSelected&&r.a.createPortal(s.a.createElement(p.a,null,s.a.createElement(w,{file:t,browser:e,width:c,height:d,position:n,rotation:o,imageCrop:m,imageSize:g,screenratio:c/(d-i),shadow:a,canvasSize:this.props.context.canvasSize,setSize:this.setSize,setCurrentBrowser:this.setCurrentBrowser,setPosition:this.setPosition,setImageFile:this.setImageFile,setImageCrop:this.setImageCrop,setShadow:this.setShadow,setRotation:this.setRotation,objectSize:{width:c,height:d}})),document.getElementById("sidebar")))}}}S.getDerivedStateFromProps=(t,e)=>t.object!==e.object?{object:t.object,width:t.object.size.width,height:t.object.size.height}:null===t.context.currentSelection?{isSelected:!1}:null!==t.context.currentSelection?{isSelected:t.context.currentSelection.id===e.object.id}:null;e.a=Object(j.a)(S);const z=c.a.div(E||(E=Object(n.a)(["\n\t.gblcbk {\n\t\toutline: ","px dashed\n\t\t\t",";\n\t\t&:hover {\n\t\t\toutline: ","px dashed\n\t\t\t\t",";\n\t\t}\n\t}\n"])),t=>2/t.zoom,t=>t.isSelected?"red":"transparent",t=>2/t.zoom,t=>t.isSelected?"red":"#41bffe")},939:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=i(26),r=i.n(o),c=i(15),l=i(82),h=i(60),p=i(77),d=i(24),m=i.n(d),g=i(83),u=i(84),b=i(85),x=i(169),v=i(86),f=i(100),y=i(140),w=i(108);class E extends a.Component{constructor(){super(...arguments),this.state={displayPhoneModels:!1},this.togglePhoneModels=()=>{this.setState({displayPhoneModels:!this.state.displayPhoneModels})},this.render=()=>{let t=this.props.device,e=t.size.width/t.size.height,i={width:this.props.width,height:this.props.height};return s.a.createElement("div",null,s.a.createElement("div",{className:"section"},s.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},s.a.createElement(g.a,{canvasSize:this.props.canvasSize,objectSize:i,objectPosition:this.props.position,setObjectPosition:this.props.setPosition})),s.a.createElement("h4",{className:"sectionTitle"},"Your Image"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(f.a,{file:this.props.file,imageSize:this.props.imageSize,imageCrop:this.props.imageCrop,ratio:this.props.screenWidth/this.props.screenHeight,setImageFile:this.props.setImageFile,setImageCrop:this.props.setImageCrop})),s.a.createElement("h4",{className:"sectionTitle"},"Wearable"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement("div",{id:"buttonpos",className:"deviceButton",onClick:()=>this.togglePhoneModels()},s.a.createElement("img",{alt:t.id,src:t.thumbnail}),s.a.createElement("div",{className:"details"},s.a.createElement("p",null,t.name),s.a.createElement("span",null,t.screen.width," x ",t.screen.height)),s.a.createElement(m.a,{icon:"chevron-right",size:20})),this.state.displayPhoneModels&&s.a.createElement(w.a,{models:y.a,title:"Wearables models",back:this.togglePhoneModels,setCurrentDevice:this.props.setCurrentDevice}),s.a.createElement(x.a,{colors:t.colors,colorIndex:this.props.colorIndex,setColorIndex:this.props.setDeviceColorIndex})),s.a.createElement("h4",{className:"sectionTitle"},"Options"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(u.a,{position:this.props.position,setObjectPosition:this.props.setPosition}),s.a.createElement(b.a,{ratio:e,size:i,setSize:this.props.setSize}),s.a.createElement(v.a,{label:"Rotate",unit:"degree",value:this.props.rotation,setValue:this.props.setRotation,min:-180,max:180}))))}}}var j,S=i(110),z=i(79);class C extends a.Component{constructor(){super(...arguments),this.state={isSelected:!1,object:this.props.object,file:null,imageSize:null,imageCrop:null,width:this.props.object.size?this.props.object.size.width:512,height:this.props.object.size?this.props.object.size.height:950},this.componentDidMount=()=>{if(!this.props.object.position){let t=Object(h.c)(this.props.object.type);this.props.context.setObjectKey(this.props.id,{position:Object(h.e)(t.size,this.props.context.canvasSize),device:t,deviceColorIndex:0})}},this.showSelection=()=>{this.props.context.setSelection(this.state.object)},this.setCurrentDevice=t=>{this.props.context.setObjectKey(this.props.id,{deviceColorIndex:0,device:t})},this.setPosition=t=>{if(t){let e={x:Math.round(10*t.x)/10,y:Math.round(10*t.y)/10};this.props.context.setObjectKey(this.props.id,{position:e})}},this.setRotation=t=>{this.props.context.setObjectKey(this.props.id,{rotation:t})},this.setDeviceColorIndex=t=>{this.props.context.setObjectKey(this.props.id,{deviceColorIndex:t})},this.setImageFile=t=>{this.setState({file:t}),t?Object(h.d)(t).then(t=>{this.setState({imageSize:t,imageCrop:null})}):this.setState({imageSize:null,imageCrop:null})},this.setImageCrop=t=>{this.setState({imageCrop:t})},this.setSize=t=>{this.props.context.setObjectKey(this.props.id,{size:t})},this.onKeyDown=t=>{this.setPosition(Object(h.h)(t,this.state.object.position))},this.onDrag=(t,e)=>{if(this.state.isSelected){let i={x:this.state.object.position.x+Math.round(10*t)/10,y:this.state.object.position.y+Math.round(10*e)/10};this.props.context.setObjectKey(this.props.id,{position:i})}},this.onResize=(t,e,i)=>{let{top:n,left:a,width:s,height:o}=t;this.setSize({width:parseInt(s,10),height:parseInt(o,10)}),this.setPosition({x:a,y:n})},this.render=()=>{let t=this.state.object.device||Object(h.c)(this.props.object.type),e=this.state.width,i=this.state.height,n=this.state.imageCrop,a=this.state.imageSize,o=this.state.file,c=this.state.object.deviceColorIndex||0,d=this.state.object.position||0,m=this.state.object.rotation||0,g=t.colors[c].image,u=t.colors[c].background||"#1D2129",b=t.rounded,x=e*t.screen.width/t.size.width,v=i*t.screen.height/t.size.height,f=e*t.offset.top/t.size.width;return s.a.createElement("div",null,s.a.createElement("div",{className:"selectwrap absolute",tabIndex:0,onKeyDown:this.onKeyDown,selected:this.state.isSelected,zoom:this.props.context.zoom/100,style:{left:d.x,top:d.y,width:e,height:i,transform:"rotate(".concat(m,"deg)")}},s.a.createElement("div",{className:"imageframe"},s.a.createElement("div",{className:"imagewrap",style:{width:x,height:v,marginTop:f||120,backgroundColor:u,borderRadius:b?(x+20)/2:0}},s.a.createElement(S.a,{file:o,imageSize:a,imageCrop:n}))),s.a.createElement("div",{className:"deviceframe"},s.a.createElement("img",{alt:t.id,src:g,style:{width:e,height:i}}
1))),s.a.createElement(k,{onClick:()=>this.showSelection(),tabIndex:0,onKeyDown:this.onKeyDown,zoom:this.props.context.zoom/100,isSelected:this.state.isSelected},s.a.createElement(l.a,{left:d.x,top:d.y,width:e,height:i,aspectRatio:t.size.width/t.size.height,rotateAngle:m,onDrag:this.onDrag,onResize:this.onResize,onRotate:this.setRotation,zoomable:this.state.isSelected?"nw, ne, se, sw":"",rotatable:this.state.isSelected})),this.state.isSelected&&r.a.createPortal(s.a.createElement(p.a,null,s.a.createElement(E,{file:o,device:t,width:e,height:i,screenWidth:x,screenHeight:v,position:d,colorIndex:c,rotation:m,imageCrop:n,imageSize:a,canvasSize:this.props.context.canvasSize,setCurrentDevice:this.setCurrentDevice,setPosition:this.setPosition,setSize:this.setSize,setDeviceColorIndex:this.setDeviceColorIndex,setImageFile:this.setImageFile,setImageCrop:this.setImageCrop,setRotation:this.setRotation})),document.getElementById("sidebar")))}}}C.getDerivedStateFromProps=(t,e)=>{if(t.object!==e.object){let e=Object(h.c)(t.object.type),i=e.size.width/e.size.height;return t.object.device&&(i=t.object.device.size.width/t.object.device.size.height),{object:t.object,width:t.object.size?t.object.size.width:e.size.width/2,height:t.object.size?t.object.size.width/i:e.size.height/2}}return null===t.context.currentSelection?{isSelected:!1}:null!==t.context.currentSelection?{isSelected:t.context.currentSelection.id===e.object.id}:null};e.a=Object(z.a)(C);const k=c.a.div(j||(j=Object(n.a)(["\n .gblcbk {\n outline: ","px dashed\n ",";\n &:hover {\n outline: ","px dashed\n ",";\n }\n }\n"])),t=>2/t.zoom,t=>t.isSelected?"red":"transparent",t=>2/t.zoom,t=>t.isSelected?"red":"#41bffe")},940:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=i(26),r=i.n(o),c=i(15),l=i(82),h=i(60),p=i(77),d=i(110),m=i(24),g=i.n(m),u=i(83),b=i(100),x=i(169),v=i(86),f=i(235),y=i(108),w=i(84),E=i(85);class j extends a.Component{constructor(){super(...arguments),this.state={displayPhoneModels:!1},this.togglePhoneModels=()=>{this.setState({displayPhoneModels:!this.state.displayPhoneModels})},this.render=()=>{let t=this.props.device,e=t.size.width/t.size.height,i={width:this.props.width,height:this.props.height};return s.a.createElement("div",null,s.a.createElement("div",{className:"section"},s.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},s.a.createElement(u.a,{canvasSize:this.props.canvasSize,objectSize:i,objectPosition:this.props.position,setObjectPosition:this.props.setPosition})),s.a.createElement("h4",{className:"sectionTitle"},"Your Image"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(b.a,{file:this.props.file,imageSize:this.props.imageSize,imageCrop:this.props.imageCrop,ratio:this.props.screenWidth/this.props.screenHeight,setImageFile:this.props.setImageFile,setImageCrop:this.props.setImageCrop})),s.a.createElement("h4",{className:"sectionTitle"},"Tablet"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement("div",{id:"buttonpos",className:"deviceButton",onClick:()=>this.togglePhoneModels()},s.a.createElement("img",{alt:t.id,src:t.thumbnail}),s.a.createElement("div",{className:"details"},s.a.createElement("p",null,t.name),s.a.createElement("span",null,t.screen.width," x ",t.screen.height)),s.a.createElement(g.a,{icon:"chevron-right",size:20})),this.state.displayPhoneModels&&s.a.createElement(y.a,{models:f.a,title:"Tablets models",back:this.togglePhoneModels,setCurrentDevice:this.props.setCurrentDevice}),s.a.createElement(x.a,{colors:t.colors,colorIndex:this.props.colorIndex,setColorIndex:this.props.setDeviceColorIndex})),s.a.createElement("h4",{className:"sectionTitle"},"Options"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(w.a,{position:this.props.position,setObjectPosition:this.props.setPosition}),s.a.createElement(E.a,{ratio:e,size:i,setSize:this.props.setSize}),s.a.createElement(v.a,{label:"Rotate",unit:"degree",value:this.props.rotation,setValue:this.props.setRotation,min:-180,max:180}))))}}}var S,z=i(79);class C extends a.Component{constructor(){super(...arguments),this.state={isSelected:!1,object:this.props.object,file:null,imageSize:null,imageCrop:null,width:this.props.object.size?this.props.object.size.width:928,height:this.props.object.size?this.props.object.size.height:1304},this.componentDidMount=()=>{if(!this.props.object.position){let t=Object(h.c)(this.props.object.type);this.props.context.setObjectKey(this.props.id,{position:Object(h.e)(t.size,this.props.context.canvasSize),device:t,deviceColorIndex:0})}},this.showSelection=()=>{this.props.context.setSelection(this.state.object)},this.setCurrentDevice=t=>{this.props.context.setObjectKey(this.props.id,{deviceColorIndex:0,device:t})},this.setPosition=t=>{if(t){let e={x:Math.round(10*t.x)/10,y:Math.round(10*t.y)/10};this.props.context.setObjectKey(this.props.id,{position:e})}},this.setRotation=t=>{this.props.context.setObjectKey(this.props.id,{rotation:t})},this.setDeviceColorIndex=t=>{this.props.context.setObjectKey(this.props.id,{deviceColorIndex:t})},this.setImageFile=t=>{this.setState({file:t}),t?Object(h.d)(t).then(t=>{this.setState({imageSize:t,imageCrop:null})}):this.setState({imageSize:null,imageCrop:null})},this.setImageCrop=t=>{this.setState({imageCrop:t})},this.setSize=t=>{this.props.context.setObjectKey(this.props.id,{size:t})},this.onKeyDown=t=>{this.setPosition(Object(h.h)(t,this.state.object.position))},this.onDrag=(t,e)=>{if(this.state.isSelected){let i={x:this.state.object.position.x+Math.round(10*t)/10,y:this.state.object.position.y+Math.round(10*e)/10};this.props.context.setObjectKey(this.props.id,{position:i})}},this.onResize=(t,e,i)=>{let{top:n,left:a,width:s,height:o}=t;this.setSize({width:parseInt(s,10),height:parseInt(o,10)}),this.setPosition({x:a,y:n})},this.render=()=>{let t=this.state.object.device||Object(h.c)(this.props.object.type),e=this.state.width,i=this.state.height,n=this.state.imageCrop,a=this.state.imageSize,o=this.state.file,c=this.state.object.deviceColorIndex||0,m=this.state.object.position||0,g=this.state.object.rotation||0,u=t.colors[c].image,b=t.colors[c].background||"#1D2129",x=e*t.screen.width/t.size.width,v=i*t.screen.height/t.size.height,f=e*t.offset.top/t.size.width,y=t.hasSharpCorner;return s.a.createElement("div",null,s.a.createElement("div",{className:"selectwrap absolute",style:{left:m.x,top:m.y,width:e,height:i,transform:"rotate(".concat(g,"deg)")}},s.a.createElement("div",{className:"imageframe"},s.a.createElement("div",{className:"imagewrap ".concat(y&&"sharpCorner"),style:{width:x,height:v,marginTop:f||120,backgroundColor:b}},s.a.createElement(d.a,{file:o,imageSize:a,imageCrop:n}))),s.a.createElement("div",{className:"deviceframe"},s.a.createElement("img",{alt:t.id,src:u,style:{width:e,height:i}}
1))),s.a.createElement(k,{onClick:()=>this.showSelection(),tabIndex:0,onKeyDown:this.onKeyDown,zoom:this.props.context.zoom/100,isSelected:this.state.isSelected},s.a.createElement(l.a,{left:m.x,top:m.y,width:e,height:i,aspectRatio:t.size.width/t.size.height,rotateAngle:g,onDrag:this.onDrag,onResize:this.onResize,onRotate:this.setRotation,zoomable:this.state.isSelected?"nw, ne, se, sw":"",rotatable:this.state.isSelected})),this.state.isSelected&&r.a.createPortal(s.a.createElement(p.a,null,s.a.createElement(j,{file:o,device:t,width:e,height:i,screenWidth:x,screenHeight:v,position:m,colorIndex:c,rotation:g,imageCrop:n,imageSize:a,canvasSize:this.props.context.canvasSize,setCurrentDevice:this.setCurrentDevice,setPosition:this.setPosition,setSize:this.setSize,setDeviceColorIndex:this.setDeviceColorIndex,setImageFile:this.setImageFile,setImageCrop:this.setImageCrop,setRotation:this.setRotation})),document.getElementById("sidebar")))}}}C.getDerivedStateFromProps=(t,e)=>{if(t.object!==e.object){let e=Object(h.c)(t.object.type),i=e.size.width/e.size.height;return t.object.device&&(i=t.object.device.size.width/t.object.device.size.height),{object:t.object,width:t.object.size?t.object.size.width:e.size.width/2,height:t.object.size?t.object.size.width/i:e.size.height/2}}return null===t.context.currentSelection?{isSelected:!1}:null!==t.context.currentSelection?{isSelected:t.context.currentSelection.id===e.object.id}:null};e.a=Object(z.a)(C);const k=c.a.div(S||(S=Object(n.a)(["\n\t.gblcbk {\n\t\toutline: ","px dashed\n\t\t\t",";\n\t\t&:hover {\n\t\t\toutline: ","px dashed\n\t\t\t\t",";\n\t\t}\n\t}\n"])),t=>2/t.zoom,t=>t.isSelected?"red":"transparent",t=>2/t.zoom,t=>t.isSelected?"red":"#41bffe")},941:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=i(26),r=i.n(o),c=i(15),l=i(82),h=i(60),p=i(77),d=i(24),m=i.n(d),g=i(83),u=i(84),b=i(85),x=i(100),v=i(86),f=i(108),y=i(141);class w extends a.Component{constructor(){super(...arguments),this.state={displayPhoneModels:!1,positionY:0},this.togglePhoneModels=()=>{let t=document.getElementById("buttonpos");this.setState({positionY:t.getBoundingClientRect().top-t.getBoundingClientRect().height,displayPhoneModels:!this.state.displayPhoneModels})},this.render=()=>{let t=this.props.device,e=t.size.width/t.size.height,i={width:this.props.width,height:this.props.height};return s.a.createElement("div",null,s.a.createElement("div",{className:"section"},s.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},s.a.createElement(g.a,{canvasSize:this.props.canvasSize,objectSize:i,objectPosition:this.props.position,setObjectPosition:this.props.setPosition})),s.a.createElement("h4",{className:"sectionTitle"},"Your Image"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(x.a,{file:this.props.file,imageSize:this.props.imageSize,imageCrop:this.props.imageCrop,ratio:this.props.screenWidth/this.props.screenHeight,setImageFile:this.props.setImageFile,setImageCrop:this.props.setImageCrop})),s.a.createElement("h4",{className:"sectionTitle"},"Laptop"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement("div",{id:"buttonpos",className:"deviceButton",onClick:()=>this.togglePhoneModels()},s.a.createElement("img",{alt:t.id,src:t.thumbnail}),s.a.createElement("div",{className:"details"},s.a.createElement("p",null,t.name),s.a.createElement("span",null,t.screen.width," x ",t.screen.height)),s.a.createElement(m.a,{icon:"chevron-right",size:20})),this.state.displayPhoneModels&&s.a.createElement(f.a,{models:y.a,title:"Laptop models",back:this.togglePhoneModels,setCurrentDevice:this.props.setCurrentDevice})),s.a.createElement("h4",{className:"sectionTitle"},"Options"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(u.a,{position:this.props.position,setObjectPosition:this.props.setPosition}),s.a.createElement(b.a,{ratio:e,size:i,setSize:this.props.setSize}),t.colors&&s.a.createElement("div",{className:"sectionBlock sectionBlockInline"},s.a.createElement("p",{className:"sectionLabel"},"Color"),s.a.createElement("div",{className:"sectionContent"},s.a.createElement("div",{className:"buttonGroup buttonGroupColors"},t.colors.map((t,e)=>s.a.createElement("button",{key:t.id,className:"button "+(this.props.colorIndex===e?"active":""),onClick:()=>this.props.setDeviceColorIndex(e)},s.a.createElement("span",{style:{width:24,height:18,borderRadius:2,backgroundColor:t.hex,boxShadow:this.props.colorIndex===e?"0 0 0 2px #191A1E, 0 0 0 4px #0094dd":"0 0 0 1px rgba(255,255,255,0)"}})))))),s.a.createElement(v.a,{label:"Rotate",unit:"degree",value:this.props.rotation,setValue:this.props.setRotation,min:-180,max:180}))))}}}var E,j=i(110),S=i(79);class z extends a.Component{constructor(){super(...arguments),this.state={isSelected:!1,object:this.props.object,file:null,imageSize:null,imageCrop:null,width:this.props.object.size?this.props.object.size.width:1500,height:this.props.object.size?this.props.object.size.height:886},this.componentDidMount=()=>{if(!this.props.object.position){let t=Object(h.c)(this.props.object.type);this.props.context.setObjectKey(this.props.id,{position:Object(h.e)(t.size,this.props.context.canvasSize),device:t})}},this.showSelection=()=>{this.props.context.setSelection(this.state.object)},this.setCurrentDevice=t=>{this.props.context.setObjectKey(this.props.id,{device:t})},this.setPosition=t=>{if(t){let e={x:Math.round(10*t.x)/10,y:Math.round(10*t.y)/10};this.props.context.setObjectKey(this.props.id,{position:e})}},this.setRotation=t=>{this.props.context.setObjectKey(this.props.id,{rotation:t})},this.setImageFile=t=>{this.setState({file:t}),t?Object(h.d)(t).then(t=>{this.setState({imageSize:t,imageCrop:null})}):this.setState({imageSize:null,imageCrop:null})},this.setImageCrop=t=>{this.setState({imageCrop:t})},this.setSize=t=>{this.props.context.setObjectKey(this.props.id,{size:t})},this.onKeyDown=t=>{this.setPosition(Object(h.h)(t,this.state.object.position))},this.onDrag=(t,e)=>{if(this.state.isSelected){let i={x:this.state.object.position.x+Math.round(10*t)/10,y:this.state.object.position.y+Math.round(10*e)/10};this.props.context.setObjectKey(this.props.id,{position:i})}},this.onResize=(t,e,i)=>{let{top:n,left:a,width:s,height:o}=t;this.setSize({width:parseInt(s,10),height:parseInt(o,10)}),this.setPosition({x:a,y:n})},this.render=()=>{let t=this.state.object.device||Object(h.c)(this.props.object.type),e=this.state.width,i=this.state.height,n=this.state.imageCrop,a=this.state.imageSize,o=this.state.file,c=this.state.object.position||0,d=this.state.object.rotation||0,m=t.image,g=t.background||"#1D2129",u=(t.size.height,t.size.width,e*t.screen.width/t.size.width),b=i*t.screen.height/t.size.height,x=e*t.offset.top/t.size.width,v=t.hasSharpCorner;return s.a.createElement("div",null,s.a.createElement("div",{className:"selectwrap absolute",selected:this.state.isSelected,style:{left:c.x,top:c.y,width:e,height:i,transform:"rotate(".concat(d,"deg)")}},s.a.createElement("div",{className:"imageframe"},s.a.createElement("div",{className:"imagewrap ".concat(v&&"sharpCorner"),style:{width:u,height:b,marginTop:x||120,backgroundColor:g}},s.a.createElement(j.a,{file:o,imageSize:a,imageCrop:n}))),s.a.createElement("div",{className:"deviceframe"},s.a.createElement("img",{alt:t.id,src:m,style:{width:e,height:i}}
1))),s.a.createElement(C,{onClick:()=>this.showSelection(),tabIndex:0,onKeyDown:this.onKeyDown,zoom:this.props.context.zoom/100,isSelected:this.state.isSelected},s.a.createElement(l.a,{left:c.x,top:c.y,width:e,height:i,aspectRatio:t.size.width/t.size.height,rotateAngle:d,onDrag:this.onDrag,onResize:this.onResize,onRotate:this.setRotation,zoomable:this.state.isSelected?"nw, ne, se, sw":"",rotatable:this.state.isSelected})),this.state.isSelected&&r.a.createPortal(s.a.createElement(p.a,null,s.a.createElement(w,{file:o,device:t,width:e,height:i,screenWidth:u,screenHeight:b,position:c,rotation:d,imageCrop:n,imageSize:a,canvasSize:this.props.context.canvasSize,setCurrentDevice:this.setCurrentDevice,setPosition:this.setPosition,setSize:this.setSize,setImageFile:this.setImageFile,setImageCrop:this.setImageCrop,setRotation:this.setRotation})),document.getElementById("sidebar")))}}}z.getDerivedStateFromProps=(t,e)=>{if(t.object!==e.object){let e=Object(h.c)(t.object.type),i=e.size.width/e.size.height;return t.object.device&&(i=t.object.device.size.width/t.object.device.size.height),{object:t.object,width:t.object.size?t.object.size.width:e.size.width/2,height:t.object.size?t.object.size.width/i:e.size.height/2}}return null===t.context.currentSelection?{isSelected:!1}:null!==t.context.currentSelection?{isSelected:t.context.currentSelection.id===e.object.id}:null};e.a=Object(S.a)(z);const C=c.a.div(E||(E=Object(n.a)(["\n\t.gblcbk {\n\t\toutline: ","px dashed\n\t\t\t",";\n\t\t&:hover {\n\t\t\toutline: ","px dashed\n\t\t\t\t",";\n\t\t}\n\t}\n"])),t=>2/t.zoom,t=>t.isSelected?"red":"transparent",t=>2/t.zoom,t=>t.isSelected?"red":"#41bffe")},942:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=i(26),r=i.n(o),c=i(15),l=i(82),h=i(60),p=i(77),d=i(24),m=i.n(d),g=i(83),u=i(84),b=i(85),x=i(100),v=i(169),f=i(86),y=i(70),w=i(108);class E extends a.Component{constructor(){super(...arguments),this.state={displayPhoneModels:!1},this.togglePhoneModels=()=>{this.setState({displayPhoneModels:!this.state.displayPhoneModels})},this.render=()=>{let t=this.props.device,e=t.size.width/t.size.height,i={width:this.props.width,height:this.props.height};return s.a.createElement("div",null,s.a.createElement("div",{className:"section"},s.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},s.a.createElement(g.a,{canvasSize:this.props.canvasSize,objectSize:i,objectPosition:this.props.position,setObjectPosition:this.props.setPosition})),s.a.createElement("h4",{className:"sectionTitle"},"Your Image"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(x.a,{file:this.props.file,imageSize:this.props.imageSize,imageCrop:this.props.imageCrop,ratio:this.props.screenWidth/this.props.screenHeight,setImageFile:this.props.setImageFile,setImageCrop:this.props.setImageCrop})),s.a.createElement("h4",{className:"sectionTitle"},"Phone"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement("div",{id:"buttonpos",className:"deviceButton",onClick:()=>this.togglePhoneModels()},s.a.createElement("img",{alt:t.id,src:t.thumbnail}),s.a.createElement("div",{className:"details"},s.a.createElement("p",null,t.name),s.a.createElement("span",null,t.screen.width," x ",t.screen.height)),s.a.createElement(m.a,{icon:"chevron-right",size:20})),this.state.displayPhoneModels&&s.a.createElement(w.a,{models:y.a,title:"Phone models",back:this.togglePhoneModels,setCurrentDevice:this.props.setCurrentDevice}),s.a.createElement(v.a,{colors:t.colors,colorIndex:this.props.colorIndex,setColorIndex:this.props.setDeviceColorIndex})),s.a.createElement("h4",{className:"sectionTitle"},"Options"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(u.a,{position:this.props.position,setObjectPosition:this.props.setPosition}),s.a.createElement(b.a,{ratio:e,size:i,setSize:this.props.setSize}),s.a.createElement(f.a,{label:"Rotate",unit:"degree",value:this.props.rotation,setValue:this.props.setRotation,min:-180,max:180}))))}}}var j,S=i(110),z=i(79);class C extends a.Component{constructor(){super(...arguments),this.state={isSelected:!1,object:this.props.object,file:null,imageSize:null,imageCrop:null,width:this.props.object.size?this.props.object.size.width:936,height:this.props.object.size?this.props.object.size.height:1863},this.componentDidMount=()=>{if(!this.props.object.position){let t=Object(h.c)(this.props.object.type);this.props.context.setObjectKey(this.props.id,{position:Object(h.e)(t.size,this.props.context.canvasSize),device:t,deviceColorIndex:0})}},this.showSelection=()=>{this.props.context.setSelection(this.state.object)},this.setCurrentDevice=t=>{console.log("Set current device"),this.props.context.setObjectKey(this.props.id,{deviceColorIndex:0,device:t})},this.setPosition=t=>{if(t){let e={x:Math.round(10*t.x)/10,y:Math.round(10*t.y)/10};this.props.context.setObjectKey(this.props.id,{position:e})}},this.setRotation=t=>{this.props.context.setObjectKey(this.props.id,{rotation:t})},this.setDeviceColorIndex=t=>{this.props.context.setObjectKey(this.props.id,{deviceColorIndex:t})},this.setImageFile=t=>{this.setState({file:t}),t?Object(h.d)(t).then(t=>{this.setState({imageSize:t,imageCrop:null})}):this.setState({imageSize:null,imageCrop:null})},this.setImageCrop=t=>{this.setState({imageCrop:t})},this.setSize=t=>{this.props.context.setObjectKey(this.props.id,{size:t})},this.onKeyDown=t=>{this.setPosition(Object(h.h)(t,this.state.object.position))},this.onDrag=(t,e)=>{if(this.state.isSelected){let i={x:this.state.object.position.x+Math.round(10*t)/10,y:this.state.object.position.y+Math.round(10*e)/10};this.props.context.setObjectKey(this.props.id,{position:i})}},this.onResize=(t,e,i)=>{let{top:n,left:a,width:s,height:o}=t;this.setSize({width:parseInt(s,10),height:parseInt(o,10)}),this.setPosition({x:a,y:n})},this.render=()=>{let t=this.state.object.device||Object(h.c)(this.state.object.type),e=this.state.width,i=this.state.height,n=this.state.imageCrop,a=this.state.imageSize,o=this.state.file,c=this.state.object.deviceColorIndex||0,d=this.state.object.position||0,m=this.state.object.rotation||0,g=t.colors[c].image,u=t.colors[c].background||"#1D2129",b=e*t.screen.width/t.size.width,x=i*t.screen.height/t.size.height,v=e*t.offset.top/t.size.width,f=t.hasSharpCorner;return t?s.a.createElement("div",null,s.a.createElement("div",{className:"selectwrap absolute",style:{left:d.x,top:d.y,width:e,height:i,transform:"rotate(".concat(m,"deg)")}},s.a.createElement("div",{className:"imageframe"},s.a.createElement("div",{className:"imagewrap ".concat(f&&"sharpCorner"),style:{width:b,height:x,marginTop:v||120,backgroundColor:u}},s.a.createElement(S.a,{file:o,imageSize:a,imageCrop:n}))),s.a.createElement("div",{className:"deviceframe"},s.a.createElement("img",{alt:t.id,src:g,style:{width:e,height:i}}
1))),s.a.createElement(k,{onClick:()=>this.showSelection(),tabIndex:0,onKeyDown:this.onKeyDown,zoom:this.props.context.zoom/100,isSelected:this.state.isSelected},s.a.createElement(l.a,{left:d.x,top:d.y,width:e,height:i,aspectRatio:t.size.width/t.size.height,rotateAngle:m,onDrag:this.onDrag,onResize:this.onResize,onRotate:this.setRotation,zoomable:this.state.isSelected?"nw, ne, se, sw":"",rotatable:this.state.isSelected})),this.state.isSelected&&r.a.createPortal(s.a.createElement(p.a,null,s.a.createElement(E,{file:o,device:t,width:e,height:i,screenWidth:b,screenHeight:x,position:d,colorIndex:c,rotation:m,imageCrop:n,imageSize:a,canvasSize:this.props.context.canvasSize,setCurrentDevice:this.setCurrentDevice,setPosition:this.setPosition,setSize:this.setSize,setDeviceColorIndex:this.setDeviceColorIndex,setImageFile:this.setImageFile,setImageCrop:this.setImageCrop,setRotation:this.setRotation})),document.getElementById("sidebar"))):null}}}C.getDerivedStateFromProps=(t,e)=>{if(t.object!==e.object){let e=Object(h.c)(t.object.type),i=e.size.width/e.size.height;return t.object.device&&(i=t.object.device.size.width/t.object.device.size.height),{object:t.object,width:t.object.size?t.object.size.width:e.size.width/2,height:t.object.size?t.object.size.width/i:e.size.height/2}}return null===t.context.currentSelection?{isSelected:!1}:null!==t.context.currentSelection?{isSelected:t.context.currentSelection.id===e.object.id}:null};e.a=Object(z.a)(C);const k=c.a.div(j||(j=Object(n.a)(["\n\t.gblcbk {\n\t\toutline: ","px dashed\n\t\t\t",";\n\t\t&:hover {\n\t\t\toutline: ","px dashed\n\t\t\t\t",";\n\t\t}\n\t}\n"])),t=>2/t.zoom,t=>t.isSelected?"red":"transparent",t=>2/t.zoom,t=>t.isSelected?"red":"#41bffe")},943:function(t,e,i){"use strict";var n=i(16),a=i(0),s=i.n(a),o=i(26),r=i.n(o),c=i(82),l=i(15),h=i(77),p=i(83),d=i(84),m=i(143),g=i(60),u=i(94),b=i(86),x=i(85),v=i(604),f=i.n(v),y=i(24),w=i.n(y),E=i(192),j=i.n(E);class S extends a.Component{constructor(t){super(t),this.componentWillReceiveProps=t=>{t.text!==this.state.text&&this.setState({text:t.text}),t.lineHeight!==this.state.lineHeight&&this.setState({lineHeight:t.lineHeight}),t.font!==this.state.font&&this.setState({font:t.font}),t.fontVariantIndex!==this.state.fontVariantIndex&&this.setState({fontVariantIndex:t.fontVariantIndex})},this.changeText=t=>{let e=t.target.value;this.props.setText(e)},this.changeFont=t=>{let e=t.target.value,i=Object(g.b)(u.a,"name",e);this.props.setFont(i)},this.changeWeight=t=>{let e=t.target.value;this.props.setFontVariantIndex(e)},this.render=()=>{let t={width:this.props.width,height:this.props.height};return s.a.createElement("div",null,s.a.createElement("div",{className:"section"},s.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},s.a.createElement(p.a,{canvasSize:this.props.canvasSize,objectSize:t,objectPosition:this.props.position,setObjectPosition:this.props.setPosition})),s.a.createElement("h4",{className:"sectionTitle"},"Your text"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(j.a,{innerRef:this.contentEditable,html:this.state.text,onChange:t=>this.changeText(t),className:"textInput textArea"})),s.a.createElement("h4",{className:"sectionTitle"},"Text options"),s.a.createElement("div",{className:"sectionBody"},s.a.createElement(d.a,{position:this.props.position,setObjectPosition:this.props.setPosition}),s.a.createElement(x.a,{ratio:1,size:t,setSize:this.props.setSize}),s.a.createElement("div",{className:"sectionBlock sectionBlockInline"},s.a.createElement("p",{className:"sectionLabel"},"Font family"),s.a.createElement("div",{className:"sectionContent"},s.a.createElement("div",{className:"selectWrap"},s.a.createElement("select",{className:"textInput",value:this.state.font.name,onChange:this.changeFont},u.a.map(t=>s.a.createElement("option",{key:t.slug,value:t.name},t.name)))))),s.a.createElement("div",{className:"sectionBlock sectionBlockInline"},s.a.createElement("p",{className:"sectionLabel"},"Font weight"),s.a.createElement("div",{className:"sectionContent"},s.a.createElement("div",{className:"selectWrap"},s.a.createElement("select",{className:"textInput",value:this.state.fontVariantIndex,onChange:this.changeWeight},this.state.font.variants.map((t,e)=>s.a.createElement("option",{key:t.name,value:e},t.name)))))),s.a.createElement("div",{className:"sectionBlock"},s.a.createElement(m.a,{label:"Text color",color:this.props.color,setColor:this.props.setColor,opacity:this.props.opacity,setOpacity:this.props.setOpacity})),s.a.createElement("div",{className:"sectionBlock sectionBlockInline"},s.a.createElement("p",{className:"sectionLabel"},"Alignment"),s.a.createElement("div",{className:"sectionContent"},s.a.createElement("div",{className:"buttonGroup"},s.a.createElement("button",{className:"button "+("left"===this.props.alignment?"active":""),onClick:()=>this.props.setAlignment("left")},s.a.createElement(w.a,{icon:"align-left",size:16,color:"#fff"})),s.a.createElement("button",{className:"button "+("center"===this.props.alignment?"active":""),onClick:()=>this.props.setAlignment("center")},s.a.createElement(w.a,{icon:"align-center",size:16,color:"#fff"})),s.a.createElement("button",{className:"button "+("right"===this.props.alignment?"active":""),onClick:()=>this.props.setAlignment("right")},s.a.createElement(w.a,{icon:"align-right",size:16,color:"#fff"})),s.a.createElement("button",{className:"button "+("justify"===this.props.alignment?"active":""),onClick:()=>this.props.setAlignment("justify")},s.a.createElement(w.a,{icon:"align-justify",size:16,color:"#fff"}))))),s.a.createElement("div",{className:"sectionBlock sectionBlockInline"},s.a.createElement("p",{className:"sectionLabel"},"Format"),s.a.createElement("div",{className:"sectionContent"},s.a.createElement("div",{className:"buttonGroup"},s.a.createElement("button",{className:"button "+(this.props.bold?"active":""),onClick:()=>this.props.setBold(!this.props.bold)},s.a.createElement(w.a,{icon:"bold",size:16,color:"#fff"})),s.a.createElement("button",{className:"button "+(this.props.italic?"active":""),onClick:()=>this.props.setItalic(!this.props.italic)},s.a.createElement(w.a,{icon:"italic",size:16,color:"#fff"})),s.a.createElement("button",{className:"button "+(this.props.underline?"active":""),onClick:()=>this.props.setUnderline(!this.props.underline)},s.a.createElement(w.a,{icon:"underline",size:16,color:"#fff"})),s.a.createElement("button",{className:"button "+(this.props.strikethrough?"active":""),onClick:()=>this.props.setStrikethrough(!this.props.strikethrough)},s.a.createElement("img",{src:f.a,alt:"strike",style:{width:16,height:16}}
1))))),s.a.createElement(b.a,{label:"Font size",unit:"pixel",value:this.props.size,setValue:this.props.setSize,min:1}),s.a.createElement(b.a,{label:"Line height",unit:"pixel",value:this.props.lineHeight,setValue:this.props.setLineHeight,min:1}),s.a.createElement(b.a,{label:"Tracking",unit:"pixel",value:this.props.tracking,setValue:this.props.setTracking,min:-10,max:30,steps:.1}),s.a.createElement(b.a,{label:"Rotate",unit:"degree",value:this.props.rotation,setValue:this.props.setRotation,min:-180,max:180}))))},this.state={displayPhoneModels:!1,positionY:0,text:this.props.text,lineHeight:this.props.lineHeight,font:this.props.font,fontVariantIndex:this.props.fontVariantIndex}}}i(605);var z,C,k=i(79);class O extends a.Component{constructor(){super(...arguments),this.divElement=s.a.createRef(),this.contentEditable=s.a.createRef(),this.state={object:this.props.object,isSelected:!1,width:this.props.object.size?this.props.object.size.width:400,height:this.props.object.size?this.props.object.size.height:200,isEditing:!1},this.componentDidMount=()=>{this.showSelection(!0),this.props.object.position||this.props.context.setObjectKey(this.props.id,{position:{x:(this.props.context.canvasSize.width-400)/2,y:(this.props.context.canvasSize.height-50)/2}})},this.componentDidUpdate=(t,e)=>{const i=this.divElement.clientWidth,n=this.divElement.clientHeight;!e.object.objectSize||e.object.objectSize.width===i&&e.object.objectSize.height===n||this.getObjectSize()},this.getObjectSize=()=>{},this.getUpdatedSize=()=>{const t=this.divElement.clientHeight;return{width:this.state.width,height:parseInt(t,10)}},this.showSelection=()=>{this.props.context.setSelection(this.state.object)},this.setText=t=>{console.log("Set text: ",t),this.props.context.setObjectKey(this.props.id,{text:t,size:this.getUpdatedSize()})},this.setFontSize=t=>{this.props.context.setObjectKey(this.props.id,{fontSize:t,lineHeight:Math.floor(1.433*t),size:this.getUpdatedSize()})},this.setColor=t=>{this.props.context.setObjectKey(this.props.id,{color:t})},this.setOpacity=t=>{this.props.context.setObjectKey(this.props.id,{opacity:t})},this.setAlignment=t=>{this.props.context.setObjectKey(this.props.id,{alignment:t})},this.setTracking=t=>{this.props.context.setObjectKey(this.props.id,{tracking:t,size:this.getUpdatedSize()})},this.setLineHeight=t=>{this.props.context.setObjectKey(this.props.id,{lineHeight:t,size:this.getUpdatedSize()})},this.setUnderline=t=>{this.props.context.setObjectKey(this.props.id,{underline:t})},this.setStrikethrough=t=>{this.props.context.setObjectKey(this.props.id,{strikethrough:t})},this.setItalic=t=>{this.props.context.setObjectKey(this.props.id,{italic:t})},this.setBold=t=>{this.props.context.setObjectKey(this.props.id,{bold:t})},this.setFont=t=>{this.props.context.setObjectKey(this.props.id,{font:t,fontVariantIndex:0}),setTimeout(()=>{this.setSize(this.getUpdatedSize())},300)},this.setFontVariantIndex=t=>{this.props.context.setObjectKey(this.props.id,{fontVariantIndex:t}),setTimeout(()=>{this.setSize(this.getUpdatedSize())},300)},this.setPosition=t=>{if(t){let e={x:Math.round(10*t.x)/10,y:Math.round(10*t.y)/10};this.props.context.setObjectKey(this.props.id,{position:e})}},this.setRotation=t=>{this.props.context.setObjectKey(this.props.id,{rotation:t})},this.onKeyDown=t=>{this.setPosition(Object(g.h)(t,this.state.object.position))},this.setSize=t=>{this.props.context.setObjectKey(this.props.id,{size:t})},this.onResize=(t,e,i)=>{let{top:n,left:a,width:s,height:o}=t;"r"!==i&&"l"!==i||(o=this.divElement.clientHeight),this.setSize({width:parseInt(s,10),height:parseInt(o,10)}),this.setPosition({x:a,y:n})},this.onDrag=(t,e)=>{if(this.state.isSelected){let i={x:this.state.object.position.x+Math.round(10*t)/10,y:this.state.object.position.y+Math.round(10*e)/10};this.props.context.setObjectKey(this.props.id,{position:i})}},this.handleChange=t=>{console.log(t.target.value),this.setText(t.target.value)},this.handleDoubleClickItem=()=>{console.log("double click"),this.setState({isEditing:!0})}}render(){let t=this.state.object.position||{x:(this.props.context.canvasSize.width-400)/2,y:(this.props.context.canvasSize.height-50)/2},e=this.state.object.text||"Your text here",i=this.state.object.color||"#fff",n=this.state.object.opacity||100,a=this.state.object.fontSize||50,o=this.state.object.bold||!1,l=this.state.object.italic||!1,p=this.state.object.underline||!1,d=this.state.object.strikethrough||!1,m=this.state.object.lineHeight||Math.floor(1.433*a),u=this.state.object.alignment||"center",b=this.state.object.tracking||0,x=this.state.object.font||Object(g.c)(this.props.object.type),v=this.state.object.fontVariantIndex||0,f=x.variants[v].family,y=this.state.object.rotation||0,w=this.state.width,E=this.state.height,z=this.state.isEditing;return s.a.createElement("div",{onDoubleClick:this.handleDoubleClickItem},s.a.createElement(B,{className:"selectwrap absolute",selected:this.state.isSelected,fontSize:a,c
1olor:i,alignment:u,underline:p,italic:l,bold:o,strikethrough:d,lineHeight:m,fontFamily:f,tracking:b,isEditing:z,style:{transform:"rotate(".concat(y,"deg)"),left:t.x,top:t.y,width:w,height:E,zIndex:z?1001:0}},s.a.createElement("div",{className:"textwrap",ref:t=>this.divElement=t,style:{opacity:n/100,visibility:z?"hidden":"visible"}},s.a.createElement("div",{dangerouslySetInnerHTML:{__html:e}})),z&&s.a.createElement(j.a,{innerRef:this.contentEditable,html:e,disabled:!1,onChange:this.handleChange,tagName:"article",className:"editable"})),s.a.createElement(I,{onKeyDown:this.onKeyDown,tabIndex:0,onClick:()=>this.showSelection(),zoom:this.props.context.zoom/100,isSelected:this.state.isSelected},s.a.createElement(c.a,{left:t.x,top:t.y,width:w,height:E,rotateAngle:y,onDrag:this.onDrag,onResize:this.onResize,onRotate:this.setRotation,zoomable:this.state.isSelected?"w,e":"",rotatable:this.state.isSelected})),this.state.isSelected&&r.a.createPortal(s.a.createElement(h.a,null,s.a.createElement(S,{canvasSize:this.props.context.canvasSize,text:e,setText:this.setText,size:a,setSize:this.setFontSize,color:i,setColor:this.setColor,opacity:n,setOpacity:this.setOpacity,position:t,setPosition:this.setPosition,setAlignment:this.setAlignment,alignment:u,setUnderline:this.setUnderline,underline:p,italic:l,setItalic:this.setItalic,setBold:this.setBold,bold:o,strikethrough:d,setStrikethrough:this.setStrikethrough,lineHeight:m,setLineHeight:this.setLineHeight,font:x,setFont:this.setFont,fontVariantIndex:v,setFontVariantIndex:this.setFontVariantIndex,tracking:b,setTracking:this.setTracking,rotation:y,setRotation:this.setRotation,width:w,height:E})),document.getElementById("sidebar")))}}O.getDerivedStateFromProps=(t,e)=>t.object!==e.object?{object:t.object,width:t.object.size?t.object.size.width:200,height:t.object.size?t.object.size.height:50}:null===t.context.currentSelection?{isSelected:!1,isEditing:!1}:null!==t.context.currentSelection?{isSelected:t.context.currentSelection.id===e.object.id}:null;e.a=Object(k.a)(O);const B=l.a.div(z||(z=Object(n.a)(["\n -webkit-font-smoothing: antialiased;\n font-size: ","px;\n text-align: ",";\n color: ",";\n letter-spacing: ","px;\n line-height: ",'px;\n white-space: pre-line;\n font-family: "','", sans-serif;\n font-weight: ',";\n font-style: ",";\n text-decoration: ",";\n cursor: ",";\n"])),t=>t.fontSize,t=>t.alignment,t=>t.color,t=>t.tracking,t=>t.lineHeight,t=>t.fontFamily,t=>t.bold?"bold":"normal",t=>t.italic?"italic":"normal",t=>t.underline||t.strikethrough?(t.underline?"underline":"")+" "+(t.strikethrough?"line-through":""):"none",t=>t.isEditing?"text":"default"),I=l.a.div(C||(C=Object(n.a)(["\n z-index: ",";\n .gblcbk {\n outline: ","px dashed\n ",";\n &:hover {\n outline: ","px dashed\n ",";\n }\n }\n"])),t=>t.isEditing?1e3:0,t=>2/t.zoom,t=>t.isSelected?"red":"transparent",t=>2/t.zoom,t=>t.isSelected?"red":"#41bffe")},944:function(t,e,i){"use strict";var n,a,s,o,r,c,l=i(0),h=i.n(l),p=i(26),d=i.n(p),m=i(168),g=i(16),u=i(166),b=i(93),x=i(688),v=i.n(x),f=i(60),y=i(193),w=i.n(y),E=i(78),j=i(24),S=i.n(j),z=i(15),C=i(13),k=i(109);class O extends l.Component{constructor(){super(...arguments),this.state={docWidth:0,docHeight:0,scaleRatio:1,exportScale:1,format:"png",showWatermark:!Object(f.g)(this.props.authUser),isLoading:!1,isCopying:!1,showUpgrade:!1},this.componentDidMount=()=>{b.a.event({category:"Views",action:"Preview"});let t=document.getElementById("thebox").offsetWidth,e=document.getElementById("thebox").offsetHeight,i=640/t;this.setState({docWidth:t,docHeight:e,scaleRatio:i>1?1:i});let n=document.getElementById("thebox").cloneNode(!0);if(n.id=Date.now(),n.getElementsByClassName("canvasView")[0].style.backgroundImage=null,this.props.bgurl){n.getElementsByClassName("canvasImage")[0].style.backgroundImage="url("+this.props.bgurl+")"}let a=n.getElementsByClassName("emptyimage");for(var s of a)s.style.display="none";let o=n.getElementsByClassName("editable");for(var r of o)r.style.display="none";let c=n.getElementsByClassName("textwrap");for(var l of c)l.style.visibility="visible";let h=n.getElementsByClassName("gblcbk");for(var p of h)p.style.display="none";let d=n.getElementsByClassName("selectwrap");for(var m of d)m.style.outline="none";n.style.transformOrigin="top left",n.style.transform="scale(1)",document.getElementById("newholder").appendChild(n)},this.setExportScale=t=>{let e=this.state.docWidth,i=this.state.docHeight,n=640/(e*t),a=document.getElementById("newholder");a.style.transformOrigin="top left",a.style.transform="scale("+t+")",a.style.width=e*t+"px",a.style.height=i*t+"px",this.setState({exportScale:t,scaleRatio:n>1?1:n})},this.setFormat=t=>{this.setState({format:t})},this.toggleWatermark=()=>{this.setState({showWatermark:!this.state.showWatermark},()=>{document.getElementById("watermark").style.opacity=this.state.showWatermark?"1":"0"})},this.handleDownload=()=>{let t=this.state.format;this.setState({isLoading:!0}),"jpeg"===t?this.downloadJPEG():this.downloadPNG()},this.downloadPNG=()=>{b.a.event({category:"Clicks",action:"Download",label:"PNG"});let t=document.getElementById("newholder");v.a.toPng(t).then(e=>{v.a.toPng(t).then(t=>{let e=Object(f.a)(t),i=document.createElement("a"),n=(new Date).getTime()/1e3;i.download="shotsnapp-".concat(n,".png"),i.href=URL.createObjectURL(e),document.body.appendChild(i),i.click(),i.remove(),window.URL.revokeObjectURL(i.href),this.setState({isLoading:!1})}).catch(t=>{console.error("oops, something went wrong!",t),console.log(t),this.setState({isLoading:!1})})}).catch(t=>{console.error("oops, something went wrong!",t),console.log(t),this.setState({isLoading:!1})})},this.downloadJPEG=()=>{b.a.event({category:"Clicks",action:"Download",label:"JPEG"});let t=document.getElementById("newholder");v.a.toJpeg(t,{quality:1}).then(t=>{let e=Object(f.a)(t),i=document.createElement("a"),n=(new Date).getTime()/1e3;i.download="shotsnapp-".concat(n,".jpeg"),i.href=URL.createObjectURL(e),document.body.appendChild(i),i.click(),i.remove(),window.URL.revokeObjectURL(i.href),this.setState({isLoading:!1})}).catch(t=>{console.error("oops, something went wrong!",t),console.log(t),this.setState({isLoading:!1})})},this.copytoClipboard=()=>{this.setState({isCopying:!0}),b.a.event({category:"Clicks",action:"Copy image",label:this.state.format});let t=document.getElementById("newholder");v.a.toPng(t,{quality:1}).then(t=>{let e=Object(f.a)(t);try{navigator.clipboard.write([new window.ClipboardItem({"image/png":e})]),this.setState({isCopying:!1})}catch(i){this.setState({isCopying:!1}),console.error(i)}}).catch(t=>{console.error("oops, something went wrong!",t),console.log(t),this.setState({isCopying:!1})})},this.toggleUpgradeModal=()=>{this.setState({showUpgrade:!this.state.showUpgrade})}}render(){let t=this.state.docWidth,e=this.state.docHeight,i=this.state.scaleRatio,n=this.state.exportScale,a=this.state.format,s=this.state.showWatermark;return h.a.createElement(C.a.Consumer,null,o=>{let{authUser:r}=o;return h.a.createElement(u.a,{onExit:this.props.togglePreview,containerStyleExtra:{width:1e3,padding:0,margin:"60px auto"}},h.a.createElement(B,null,h.a.createElement(I,null,h.a.createElement(D,{scaleRatio:i,style:{width:t*i*n,height:e*i*n,overflow:"hidden"}},h.a.createElement("div",{id:"transformwrap",style:{transformOrigin:"top left",position:"relative",transform:"scale("+i+")"}},h.a.createElement("div",{id:"newholder",style:{userSelect:"none",width:t,height:e,position:"relative"}}
1,!Object(f.g)(r)&&h.a.createElement("div",{id:"watermark",onClick:()=>this.toggleUpgradeModal(),style:{opacity:s?1:0,top:e-53}},h.a.createElement("p",{style:{fontSize:16,marginBottom:0,display:"flex",alignItems:"center"}},h.a.createElement(S.a,{icon:"arrow-up-right",size:18}),h.a.createElement("span",{style:{marginLeft:5}},"Created using shotsnapp.com"))))))),h.a.createElement(P,null,h.a.createElement("div",{className:"section"},h.a.createElement("div",{className:"sectionBody",style:{paddingBottom:15}},h.a.createElement("h4",null,"Download settings"),h.a.createElement("div",{className:"sectionBlock "},h.a.createElement("p",{className:"sectionLabel"},"Image format"),h.a.createElement("div",{className:"sectionContent"},h.a.createElement("div",{className:"buttonGroup"},h.a.createElement("button",{className:"button "+("png"===a?"active":""),onClick:()=>this.setFormat("png")},"PNG"),h.a.createElement("button",{className:"button "+("jpeg"===a?"active":""),onClick:()=>this.setFormat("jpeg")},"JPEG")))),h.a.createElement("div",{className:"sectionBlock "},h.a.createElement("p",{className:"sectionLabel"},"Scale"),h.a.createElement("div",{className:"sectionContent"},h.a.createElement("div",{className:"buttonGroup"},h.a.createElement("button",{className:"button "+(1===n?"active":""),onClick:()=>this.setExportScale(1)},"1x"),h.a.createElement("button",{className:"button "+(2===n?"active":""),onClick:()=>this.setExportScale(2)},"2x"),h.a.createElement("button",{className:"button "+(3===n?"active":""),onClick:()=>this.setExportScale(3)},"3x")),h.a.createElement("p",{style:{marginTop:8,fontSize:13,color:"#555",lineHeight:1.4}},"Your final image will be ",t*n,"px width and ",e*n,"px height"))),!Object(f.g)(r)&&h.a.createElement("div",{className:"sectionBlock "},h.a.createElement("p",{className:"sectionLabel"},"Watermark"),h.a.createElement("div",{className:"sectionContent"},h.a.createElement(M,{showWatermark:!this.state.showWatermark},h.a.createElement("div",{className:"label"},h.a.createElement("p",null,"Remove watermark"),h.a.createElement(S.a,{icon:"lock",size:12})),h.a.createElement("a",{href:"#",onClick:()=>this.toggleUpgradeModal()},h.a.createElement("span",null))))))),h.a.createElement(N,null,h.a.createElement(E.a,{big:!0,block:!0,isLoading:this.state.isCopying,onClick:()=>this.copytoClipboard(),style:{backgroundColor:m.a.green,marginBottom:10}},h.a.createElement(S.a,{icon:"copy",size:18}),"Copy to clipboard"),h.a.createElement(E.a,{big:!0,block:!0,isLoading:this.state.isLoading,onClick:()=>this.handleDownload(),style:{backgroundColor:m.a.green}},h.a.createElement(S.a,{icon:"download",size:18}),"Download image")))),this.state.showUpgrade&&d.a.createPortal(h.a.createElement(k.a,{toggleUpgradeModal:this.toggleUpgradeModal,upgradeMessage:"search"}),document.getElementById("modal")))})}}const B=z.a.div(n||(n=Object(g.a)(["\n\tmin-height: 550px;\n\tmax-height: 700px;\n\theight: calc(100vh - 120px);\n\tdisplay: flex;\n\tborder-radius: 8px;\n\toverflow: hidden;\n"]))),I=z.a.div(a||(a=Object(g.a)(["\n\twidth: ","px;\n\toverflow: auto;\n\tposition: relative;\n\tbackground: url(",') repeat;\n\tbackground-size: 20px;\n\n\t&::after {\n\t\tposition: absolute;\n\t\tcontent: "";\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tpointer-events: none;\n\t}\n'])),720,w.a),D=z.a.div(s||(s=Object(g.a)(["\n\tmargin: ",";\n\t/* transform: ","; */\n\ttransform-origin: top left;\n\tborder: 1px solid rgba(0, 0, 0, 0.2);\n"])),t=>1===t.scaleRatio?"40px auto":"40px",t=>"scale(".concat(t.scaleRatio,")")),P=z.a.div(o||(o=Object(g.a)(["\n\twidth: ",'px;\n\tbackground: #fff;\n\tpadding: 5px;\n\ttext-align: left;\n\tborder-radius: 0 0 8px 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tposition: relative;\n\tbox-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);\n\t.section {\n\t\tflex: 1;\n\t}\n\th4 {\n\t\tfont-size: 20px;\n\t\tmargin-top: 15px;\n\t\tmargin-bottom: 20px;\n\t}\n\tp {\n\t\tcolor: #444;\n\t}\n\t.sectionLabel {\n\t\ttext-transform: uppercase;\n\t\tfont-size: 11px;\n\t\tletter-spacing: 0.5px;\n\t\tfont-weight: 600;\n\t\tcolor: #555;\n\t}\n\t.sectionBlock {\n\t\tmargin-bottom: 24px;\n\t}\n\t.sectionBlockInline {\n\t\tmargin-bottom: 12px;\n\t}\n\t.buttonGroup {\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tposition: absolute;\n\t\t\tcontent: "";\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.1);\n\t\t\tborder-radius: 4px;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\t.button {\n\t\tpadding: 8px 5px 9px;\n\t\tbackground-color: #fff;\n\t\tcolor: #333;\n\t\tmargin: 0;\n\t\tborder: 0;\n\t\tfont-size: 13px;\n\t\tborder-right: 1px solid rgba(0, 0, 0, 0.05);\n\t\t&:hover:not(.active) {\n\t\t\tbackground-color: #f1f2f3;\n\t\t}\n\t\t&:last-child {\n\t\t\tborder: 0;\n\t\t\t&:focus {\n\t\t\t\tborder: 0;\n\t\t\t}\n\t\t}\n\t\t&:focus {\n\t\t\tborder: 0;\n\t\t\tborder-right: 1px solid rgba(0, 0, 0, 0.05);\n\t\t}\n\t}\n'])),280),N=z.a.div(r||(r=Object(g.a)(["\n\t/* background-color: red; */\n\tpadding: 15px;\n"]))),M=z.a.div(c||(c=Object(g.a)(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 15px;\n\tborder: 1px solid rgba(0, 0, 0, 0.1);\n\tpadding: 10px;\n\tborder-radius: 4px;\n\t.label {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tsvg {\n\t\t\tmargin-left: 4px;\n\t\t}\n\t}\n\ta {\n\t\twidth: 36px;\n\t\theight: 20px;\n\t\tborder-radius: 11px;\n\t\tbackground: ",";\n\t\tposition: relative;\n\t\ttransition: all 0.1s ease-out;\n\n\t\tspan {\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tborder-radius: 9px;\n\t\t\tbackground-color: #fff;\n\t\t\tposition: absolute;\n\t\t\tleft: ",";\n\t\t\ttransition: left 0.1s ease-out;\n\t\t\ttop: 2px;\n\t\t}\n\t}\n"])),t=>t.showWatermark?m.a.lightblue:"#ccc",t=>t.showWatermark?"18px":"2px");i.d(e,"a",(function(){return L}));class L extends l.Component{constructor(){super(...arguments),this.state={showPreview:!1},this.togglePreview=()=>{this.setState({showPreview:!this.state.showPreview})}}render(){return h.a.createElement(C.a.Consumer,null,t=>{let{authUser:e}=t;return h.a.createElement("div",null,h.a.createElement("div",{style:F.button},h.a.createElement(E.a,{block:!0,onClick:()=>this.togglePreview(),style:{backgroundColor:m.a.green}},h.a.createElement(S.a,{icon:"eye",size:18}),"Preview & download")),this.state.showPreview&&d.a.createPortal(h.a.createElement(O,{togglePreview:this.togglePreview,bgurl:this.props.bgurl,authUser:e}),document.getElementById("modal")))})}}let F={button:{padding:12,backgroundColor:"#111"}}}
1,948:function(t,e,i){"use strict";i.r(e),function(t){var n,a,s,o,r,c,l,h,p,d,m=i(16),g=i(0),u=i.n(g),b=i(26),x=i.n(b),v=i(93),f=i(15),y=i(942),w=i(941),E=i(936),j=i(935),S=i(940),z=i(939),C=i(943),k=i(937),O=i(938),B=i(77),I=i(606),D=i(933),P=i(364),N=i(193),M=i.n(N),L=i(932),F=i(944),R=i(109),K=i(60),A=i(20),W=i(1),V=i(27),T=i(127),U=i.n(T),Y=i(361),H=i(237);const G=i(693);var q=i(694).defaults({encoding:null});class Z extends g.Component{constructor(){super(...arguments),this.state={canvasColor:Object(A.a)("canvasColor")||"#5d39f3",canvasBackground:Object(A.a)("canvasBackground")||null,bgurl:Object(A.a)("bgurl")||null,canvasBackgroundMode:Object(A.a)("canvasBackgroundMode")||"cover",canvasBackgroundPosition:Object(A.a)("canvasBackgroundPosition")||"center",canvasOpacity:null==Object(A.a)("canvasOpacity")?100:Object(A.a)("canvasOpacity"),canvasSize:Object(A.a)("canvasSize")||{width:800,height:800},zoom:null==Object(A.a)("zoom")?80:Object(A.a)("zoom"),objects:Object(A.a)("objects")||[],currentSelection:null,showUpgrade:!1,upgradeMessage:"multiple",showLoading:!1},this.componentDidMount=()=>{v.a.initialize("UA-121406997-1"),v.a.pageview(window.location.pathname+window.location.search),this.keyBinding();let t=this.props.match.params.id,e=Object(K.b)(Y.a,"id",t),i=Object(A.a)("isLoggedIn");e&&(this.setState({showLoading:!0}),i&&e.isPro||this.applyTemplate(e))},this.toggleUpgradeModal=()=>{this.setState({showUpgrade:!this.state.showUpgrade})},this.applyTemplate=t=>{this.props.history.push("/"),this.setState({showLoading:!1});let e=this.props.authUser,i=Object(K.f)(e,t.isPro);if(v.a.event({category:"Clicks",action:"Apply Template",label:t.id}),i)this.setState({showUpgrade:!0,upgradeMessage:"template"});else{let e=t.objects;this.setState({objects:[],bgurl:null,canvasBackground:null,canvasBackgroundMode:"cover",canvasBackgroundPosition:"center",canvasSize:{width:"",height:""},currentSelection:null}),setTimeout(()=>{let i=t.canvas.background||null,n=t.canvas.background?t.canvas.background.image:null,a=t.canvas.background?t.canvas.background.position||"center":null,s=t.canvas.background?t.canvas.background.mode||"cover":null;this.setState({canvasBackground:i,canvasColor:t.canvas.color,bgurl:n,canvasOpacity:t.canvas.opacity,canvasBackgroundMode:s,canvasBackgroundPosition:a,canvasSize:t.canvas.size,objects:e}),Object(A.b)("canvasBackground",i),Object(A.b)("bgurl",n),Object(A.b)("canvasBackgroundPosition",a),Object(A.b)("canvasBackgroundMode",s),Object(A.b)("canvasSize",t.canvas.size),Object(A.b)("canvasColor",t.canvas.color),Object(A.b)("canvasOpacity",t.canvas.opacity),Object(A.b)("objects",e)},300)}},this.addObject=t=>{v.a.event({category:"Clicks",action:"Add Object",label:t.type||"Unknown"});var e=[t,...this.state.objects];let i=this.props.authUser;Object(K.f)(i,e.length>1)?this.setState({showUpgrade:!0,upgradeMessage:"multiple"}):(this.setState({objects:e,currentSelection:t}),Object(A.b)("objects",e))},this.moveObject=(t,e)=>{let i=this.state.objects;"up"===t?i.splice(e-1,0,i.splice(e,1).pop()):"down"===t&&i.splice(e+1,0,i.splice(e,1).pop()),this.setState({objects:i})},this.removeObject=t=>{let e=this.state.objects.filter((function(e){return e.id!==t.id}));this.setState({objects:e,currentSelection:null}),Object(A.b)("objects",e)},this.duplicateObject=t=>{let e=JSON.parse(JSON.stringify(t));e.id=Date.now(),e.position.x+=15,e.position.y+=15,this.addObject(e)},this.setCanvasSize=(t,e)=>{let i={width:t,height:e};Object(A.b)("canvasSize",i),this.setState({canvasSize:i})},this.setCanvasColor=t=>{Object(A.b)("canvasColor",t),Object(A.b)("bgurl",null),this.setState({canvasColor:t,canvasBackground:null,bgurl:null})},this.setCanvasBackground=e=>{if(null===e)this.setState({canvasBackground:null,bgurl:null,canvasBackgroundMode:"cover",canvasBackgroundPosition:"center"}),Object(A.b)("bgurl",null),Object(A.b)("canvasBackgroundMode","cover"),Object(A.b)("canvasBackgroundPosition","center");else{this.setState({canvasBackground:e,bgurl:null,canvasBackgroundMode:"cover",canvasBackgroundPosition:"center"});var i={url:e.download};let n=this;q(i,(function(e,i,a){if(!e&&200===i.statusCode){let e="data:"+i.headers["content-type"]+";
1base64,"+new t(a).toString("base64");n.setState({bgurl:e}),Object(A.b)("bgurl",e)}}))}Object(A.b)("canvasBackground",e)},this.setCanvasBackgroundDrop=t=>{if(t){let e={image:t};this.setState({canvasBackground:e,bgurl:null})}else this.setState({canvasBackground:null,bgurl:null});Object(A.b)("canvasBackground",null),Object(A.b)("bgurl",null)},this.setCanvasBackgroundMode=t=>{Object(A.b)("canvasBackgroundMode",t),this.setState({canvasBackgroundMode:t})},this.setCanvasBackgroundPosition=t=>{Object(A.b)("canvasBackgroundPosition",t),this.setState({canvasBackgroundPosition:t})},this.setCanvasOpacity=t=>{Object(A.b)("canvasOpacity",t),this.setState({canvasOpacity:t})},this.setObjectKey=(t,e)=>{const i=this.state.objects.findIndex(e=>e.id===t);let n=Object.assign({},this.state);Object.keys(e).forEach(t=>{let a=e[t];n.objects=n.objects.slice(),n.objects[i]=Object.assign({},n.objects[i]),n.objects[i][t]=a}),this.setState(n),Object(A.b)("objects",n.objects)},this.hideSelection=()=>{null!==this.state.currentSelection&&this.setState({currentSelection:null})},this.setSelection=t=>{this.setState({currentSelection:t})},this.handleZoom=t=>{Object(A.b)("zoom",t),this.setState({zoom:t<10?10:t})},this.keyBinding=()=>{G.bind("mod+0",t=>{t.preventDefault(),this.handleZoom(100)}),G.bind("mod+=",t=>{t.preventDefault(),this.handleZoom(this.state.zoom+10)}),G.bind("mod+-",t=>{t.preventDefault(),this.handleZoom(this.state.zoom-10)}),G.bind("mod+d",t=>{t.preventDefault();let e=this.state.currentSelection;e&&this.duplicateObject(e)}),G.bind(["del","backspace"],t=>{t.preventDefault();let e=this.state.currentSelection;e&&(this.removeObject(e),this.setSelection(null))})},this.onGesture=t=>{t.preventDefault();let e=t.wheelDelta>0?2:-2;this.handleZoom(this.state.zoom+e)},this.render=()=>u.a.createElement(H.a.Provider,{value:{objects:this.state.objects,currentSelection:this.state.currentSelection,canvasSize:this.state.canvasSize,zoom:this.state.zoom,setObjectKey:this.setObjectKey,setSelection:this.setSelection,removeObject:this.removeObject,duplicateObject:this.duplicateObject}},u.a.createElement(J,null,u.a.createElement(U.a,null,u.a.createElement("title",null,"shotsnapp")),u.a.createElement(D.a,{objects:this.state.objects,download:this.download,addObject:this.addObject,removeObject:this.removeObject,moveObject:this.moveObject,currentSelection:this.state.currentSelection,setSelection:this.setSelection,applyTemplate:this.applyTemplate}),u.a.createElement(Q,null,this.state.showLoading&&u.a.createElement(X,null,u.a.createElement("div",null,u.a.createElement(V.a,{style:{width:24,height:24},size:24}),u.a.createElement("p",null,"Loading template..."))),u.a.createElement(I.a,{addObject:this.addObject,setCurrentType:this.setCurrentType,currentType:this.state.currentType,toggleSubscribeModal:this.toggleSubscribeModal,zoom:this.state.zoom,handleZoom:this.handleZoom}),u.a.createElement(_,null,u.a.createElement($,{canvasSize:this.state.canvasSize,zoom:this.state.zoom},u.a.createElement(tt,{onClick:()=>this.hideSelection()}),u.a.createElement(et,{id:"thebox",canvasSize:this.state.canvasSize,zoom:this.state.zoom},u.a.createElement(it,{id:"canvas",className:"canvasView",canvasSize:this.state.canvasSize,style:{backgroundImage:"url(".concat(M.a,")")}},u.a.createElement(nt,{className:"canvasbg",onClick:()=>this.hideSelection(),canvasSize:this.state.canvasSize,canvasColor:this.state.canvasColor,canvasOpacity:this.state.canvasOpacity}),u.a.createElement(at,{className:"canvasImage",canvasSize:this.state.canvasSize,onClick:()=>this.hideSelection(),canvasBackground:this.state.canvasBackground,canvasBackgroundMode:this.state.canvasBackgroundMode,canvasBackgroundPosition:this.state.canvasBackgroundPosition}),this.state.objects.slice(0).reverse().map(t=>"phone"===t.type?u.a.createElement(y.a,{key:t.id.toString(),id:t.id,object:t}):"laptop"===t.type?u.a.createElement(w.a,{key:t.id.toString(),id:t.id,object:t}):"tablet"===t.type?u.a.createElement(S.a,{key:t.id.toString(),id:t.id,object:t}):"icon"===t.type?u.a.createElement(E.a,{key:t.id.toString(),id:t.id,object:t}):"wearable"===t.type?u.a.createElement(z.a,{key:t.id.toString(),id:t.id,object:t}):"display"===t.type?u.a.createElement(k.a,{key:t.id.toString(),id:t.id,object:t}):"text"===t.type?u.a.createElement(C.a,{key:t.id.toString(),id:t.id,object:t}):"browser"===t.type?u.a.createElement(O.a,{key:t.id.toString(),id:t.id,object:t}):"tweet"===t.type?u.a.createElement(j.a,{key:t.id.toString(),id:t.id,object:t}):null)))))),this.state.showUpgrade&&x.a.createPortal(u.a.createElement(R.a,{toggleUpgradeModal:this.toggleUpgradeModal,upgradeMessage:this.state.upgradeMessage}),document.getElementById("modal")),x.a.createPortal(u.a.createElement(F.a,{bgurl:this.state.bgurl}),document.getElementById("sidebar")),null===this.state.currentSelection&&x.a.createPortal(u.a.createElement(B.a,{bgurl:this.state.bgurl},u.a.createElement(L.a,{setCanvasSize:this.setCanvasSize,canvasSize:this.state.canvasSize,setCanvasColor:this.setCanvasColor,canvasColor:this.state.canvasColor,setCanvasOpacity:this.setCanvasOpacity,canvasOpacity:this.state.canvasOpacity,setCanvasBackgroun
1d:this.setCanvasBackground,setCanvasBackgroundDrop:this.setCanvasBackgroundDrop,canvasBackground:this.state.canvasBackground,setCanvasBackgroundMode:this.setCanvasBackgroundMode,canvasBackgroundMode:this.state.canvasBackgroundMode,setCanvasBackgroundPosition:this.setCanvasBackgroundPosition,canvasBackgroundPosition:this.state.canvasBackgroundPosition})),document.getElementById("sidebar")),x.a.createPortal(u.a.createElement(P.a,null),document.getElementById("usermenu"))))}componentDidUpdate(t){if(t.authUser!==this.props.authUser){let t=this.props.match.params.id,e=Object(K.b)(Y.a,"id",t);this.state.showLoading&&e&&this.applyTemplate(e)}}}e.default=Object(W.f)(Z);const J=f.a.div(n||(n=Object(m.a)(["\n\tdisplay: flex;\n\tflex: 1;\n\theight: calc(100vh);\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: stretch;\n\tuser-select: none;\n"]))),X=f.a.div(a||(a=Object(m.a)(["\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tz-index: 333;\n\tbackground: rgba(0, 0, 0, 1);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: #fff;\n\t/* background: red; */\n\t& > div {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tp {\n\t\t\tfont-size: 16px;\n\t\t\tmargin-top: 12px;\n\t\t\tcolor: rgba(255, 255, 255, 0.7);\n\t\t}\n\t}\n"]))),Q=f.a.div(s||(s=Object(m.a)(["\n\tposition: relative;\n\tflex: 1;\n\tdisplay: flex;\n\toverflow: hidden;\n\tflex-direction: column;\n"]))),_=f.a.div(o||(o=Object(m.a)(["\n\tposition: relative;\n\toverflow-y: auto;\n\toverflow-x: auto;\n\tbackground-color: #080808;\n\tflex: 1;\n\tscrollbar-width: none; /* Firefox */\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n"]))),$=f.a.div(r||(r=Object(m.a)(["\n\tdisplay: flex;\n\tjustify-content: center;\n\twidth: ","px;\n\tmargin: 100px auto;\n\theight: ","px;\n\tmin-height: 100vh;\n\talign-items: center;\n\t// background-color: red;\n"])),t=>t.canvasSize.width*(t.zoom/100)+200,t=>t.canvasSize.height*(t.zoom/100)),tt=f.a.div(c||(c=Object(m.a)(["\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n"]))),et=f.a.div(l||(l=Object(m.a)(["\n\t/* padding-left: 100px;\n \tpadding-right: 100px; */\n\twidth: ","px;\n\theight: ","px;\n\ttransform-origin: center;\n\ttransform: scale(",");\n\t/* zoom: ","; */\n\tposition: relative;\n"])),t=>t.canvasSize.width,t=>t.canvasSize.height,t=>t.zoom/100,t=>t.zoom/100),it=f.a.div(h||(h=Object(m.a)(["\n\toverflow: hidden;\n\tposition: relative;\n\twidth: ","px;\n\theight: ","px;\n\t/* margin-bottom: 100px; */\n"])),t=>t.canvasSize.width,t=>t.canvasSize.height),nt=f.a.div(p||(p=Object(m.a)(["\n\tposition: absolute;\n\n\tbackground: ",";\n\topacity: ",";\n\twidth: ","px;\n\theight: ","px;\n"])),t=>""===t.canvasColor?"#fff":t.canvasColor,t=>t.canvasOpacity/100,t=>t.canvasSize.width,t=>t.canvasSize.height),at=f.a.div(d||(d=Object(m.a)(["\n\tposition: absolute;\n\tbackground-size: ",";\n\tbackground-position: ",";\n\tbackground-repeat: no-repeat;\n\tbackground-image: ",";\n\twidth: ","px;\n\theight: ","px;\n"])),t=>t.canvasBackgroundMode,t=>t.canvasBackgroundPosition,t=>null===t.canvasBackground?"none":"url(".concat(t.canvasBackground.image,")"),t=>t.canvasSize.width,t=>t.canvasSize.height)}.call(this,i(61).Buffer)}}]); 2//# sourceMappingURL=6.3b4f4b22.chunk.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.