polotno 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [

package/polotno.bundle.js

@@ -189,7 +189,7 @@ PERFORMANCE OF THIS SOFTWARE.
   .bp4-dark & .sketch-picker label {
     color: #f5f8fa !important;
   }
-`,B7=({style:e,color:t,onChange:r,...i})=>{const[o,a]=n(d).useState(t);n(d).useEffect((()=>{a(t)}),[t]);const l=n(d).useRef(),c=n(d).useRef();return(0,s.jsx)(F7,{style:e,onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()},children:(0,s.jsx)(_7,{color:o,...i,onChange:e=>{const{r:t,g:n,b:i,a:o}=e.rgb,s=`rgba(${t},${n},${i},${o})`;a(s),c.current=s,l.current||(l.current=window.setTimeout((()=>{l.current=0,r(s)}),50))}})})},U7=e=>e.map((e=>`${e.color} ${100*e.offset}%`)).join(","),q7=({value:e,onChange:t,store:r})=>{const{rotation:i,stops:o}=yc(e),a=n(d).useRef(o);a.current=o;const l=n(d).useRef(i);l.current=i;const[c,u]=n(d).useState(0),h=n(d).useRef(null),f=n(d).useRef(!1),p=()=>{f.current=!0};return n(d).useEffect((()=>{const e=e=>{if(f.current){const n=h.current.getBoundingClientRect(),r=e.clientX-n.left,i=r/n.width,s=i<-.5||i>1.5;if(o.length>2&&s)return u(0),f.current=!1,a.current.splice(c,1),void t(`linear-gradient(${l.current}deg, ${U7(a.current)})`);const d=Math.min(1,Math.max(0,r/n.width)),p=[...o];p[c].offset=d,t(`linear-gradient(${l.current}deg, ${U7(p)})`)}},n=()=>{f.current=!1};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",n),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",n)}}),[c,a]),(0,s.jsxs)("div",{children:[(0,s.jsxs)("div",{style:{width:"calc(100% - 35px)",height:"60px",position:"relative"},children:[(0,s.jsx)("div",{ref:h,style:{position:"absolute",top:0,left:0,width:"100%",marginLeft:"15px",height:"100%",zIndex:0},onMouseDown:e=>{const n=e.currentTarget.getBoundingClientRect(),r=e.clientX-n.left,a=Math.min(1,Math.max(0,r/n.width)),l=o[0].color;o.push({color:l,offset:a}),o.sort(((e,t)=>e.offset-t.offset));const s=o.findIndex((e=>e.offset===a));u(s),p(),t(`linear-gradient(${i}deg, ${U7(o)})`)}}),o.map((({offset:e,color:t},n)=>(0,s.jsx)("div",{style:{position:"absolute",top:"10px",left:100*e+"%",border:n===c?"2px solid rgb(0, 161, 255)":"2px solid rgb(0, 0, 0, 0)",padding:"2px"},onMouseDown:e=>{e.stopPropagation(),u(n),p()},children:(0,s.jsx)(W7,{background:t,style:{margin:0}})},n)))]}),(0,s.jsx)("div",{style:{width:"calc(100% - 30px)",height:"10px",marginLeft:"15px",background:`linear-gradient(90deg,${U7(o)})`}}),(0,s.jsx)("div",{style:{padding:"10px"},children:(0,s.jsx)(nG,{min:0,max:360,value:i,showTrackFill:!1,labelRenderer:!1,onChange:e=>{t(`linear-gradient(${e}deg,${U7(o)})`)}})}),(0,s.jsx)(B7,{color:o[0].color,onChange:e=>{const n=[...o];n[c].color=e,t(`linear-gradient(${i}deg, ${U7(n)})`)}})]})},G7=({value:e,onChange:t,preset:r,store:i})=>{const[o,a]=n(d).useState(mc(e)?"gradient":"solid");return(0,s.jsx)("div",{style:{padding:"5px"},children:(0,s.jsxs)(cG,{id:"TabsExample",selectedTabId:o,onChange:e=>a(e),children:[(0,s.jsx)(rG,{id:"solid",title:"Solid",panel:(0,s.jsx)(B7,{color:e,onChange:t,presetColors:r,style:{padding:"0"}})}),(0,s.jsx)(rG,{id:"gradient",title:"Linear",panel:(0,s.jsx)(q7,{value:e,onChange:t,store:i}),panelClassName:"ember-panel"})]})})},W7=({size:e=30,background:t,style:n={},children:r=null,...i})=>(0,s.jsx)("div",{onMouseDown:e=>e.preventDefault(),style:{width:e+"px",height:e+"px",background:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")",borderRadius:"2px",boxShadow:"0 0 2px grey",marginBottom:"-4px",...n},...i,children:(0,s.jsx)("div",{style:{width:e+"px",height:e+"px",background:t},children:r})}),K7=({value:e,onChange:t,size:n,store:r,gradientEnabled:i,children:o,style:a})=>{const l=r?(e=>{const t=[];e.pages.forEach((e=>{e.children.forEach((e=>{"text"===e.type&&t.push(e.fill),"svg"===e.type&&t.push(...e.colorsReplace.values())}))}));const n=[];return t.forEach((e=>{if(mc(e)){const{stops:t}=yc(e);n.push(...t.map((e=>e.color)))}else n.push(e)})),[...new Set(n)]})(r).slice(0,8):[],c=l.filter((e=>!D7.find((t=>Vc(t,e))))),u=c.concat(D7.slice(0,16-c.length).reverse());return(0,s.jsx)(MK,{autoFocus:!1,enforceFocus:!0,interactionKind:"click",hasBackdrop:!0,content:i?(0,s.jsx)(G7,{preset:u,value:e,onChange:t,store:r}):(0,s.jsx)("div",{style:{padding:"5px"},children:(0,s.jsx)(B7,{color:e,onChange:t,presetColors:u})}),children:(0,s.jsx)(W7,{size:n,background:e,style:a,children:o})})};var Y7=K7;d=l("8NFma");const $7=(e,t,n)=>Math.max(t,Math.min(n,e)),X7=({value:e,onValueChange:t,...r})=>{const[i,o]=n(d).useState(e.toString());n(d).useEffect((()=>{o(e.toString())}),[e]);return(0,s.jsx)(Mq,{value:i,onValueChange:(e,n)=>{o(n),Number.isNaN(e)||t(e)},...r})};var Q7=ei((({element:e,store:t,elements:r})=>{const i=r||[e],o=i[0],a="text"===o.type,l="image"===o.type,c="svg"===o.type,u=e=>{t.history.transaction((()=>{i.forEach((t=>{t.set(e)}))}))};return(0,s.jsx)(MK,{content:(0,s.jsxs)("div",{style:{padding:"15px",paddingTop:"25px",width:"230px"},children:[(0,s.jsx)(dq,{checked:o.blurEnabled,label:RK("toolbar.blur"),onChange:e=>{u({blurEnabled:e.target.checked})},alignIndicator:_f.RIGHT}),o.blurEnabled&&(0,s.jsx)(nG,{value:o.blurRadius,labelStepSize:5,onChange:e=>{u({blurRadius:e})},min:0,max:20,showTrackFill:!1}),!a&&(0,s.jsx)(dq,{checked:o.brightnessEnabled,label:RK("toolbar.brightness"),onChange:e=>{u({brightnessEnabled:e.target.checked})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),o.brightnessEnabled&&(0,s.jsx)(nG,{value:100*o.brightness+100,onChange:e=>{u({brightness:(e-100)/100})},min:0,max:200,showTrackFill:!1,labelStepSize:50}),!a&&(0,s.jsx)(dq,{checked:o.sepiaEnabled,label:RK("toolbar.sepia"),onChange:e=>{u({sepiaEnabled:e.target.checked})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),!a&&(0,s.jsx)(dq,{checked:o.grayscaleEnabled,label:RK("toolbar.grayscale"),onChange:e=>{u({grayscaleEnabled:e.target.checked})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),a&&(0,s.jsx)(dq,{checked:!!o.strokeWidth,label:RK("toolbar.textStroke"),onChange:e=>{u({strokeWidth:e.target.checked?2:0})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),!!o.strokeWidth&&(0,s.jsx)(n(d).Fragment,{children:(0,s.jsxs)("div",{style:{display:"flex",justifyContent:"space-between"},children:[(0,s.jsx)(Y7,{value:o.stroke,size:30,onChange:e=>{u({stroke:e})},store:t}),(0,s.jsx)(Mq,{defaultValue:o.strokeWidth,onValueChange:e=>{u({strokeWidth:$7(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(o.fontSize/2)})]})}),(l||c)&&(0,s.jsx)(dq,{checked:!!o.borderSize,label:RK("toolbar.border"),onChange:e=>{u({borderSize:e.target.checked?2:0})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),!!o.borderSize&&(0,s.jsx)(n(d).Fragment,{children:(0,s.jsxs)("div",{style:{display:"flex",justifyContent:"space-between"},children:[(0,s.jsx)(Y7,{value:o.borderColor,size:30,onChange:e=>{u({borderColor:e})},store:t}),(0,s.jsx)(Mq,{defaultValue:o.borderSize,onValueChange:e=>{u({borderSize:$7(e,1,Math.min(o.width,o.height)/2)})},style:{width:"80px"},min:1,max:Math.min(o.width,o.height)/2})]})}),!a&&(0,s.jsx)(dq,{checked:!!o.cornerRadius,label:RK("toolbar.cornerRadius"),onChange:e=>{u({cornerRadius:e.target.checked?Math.min(o.width/4,o.height/4):0})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),!a&&!!o.cornerRadius&&(0,s.jsxs)("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"},children:[(0,s.jsx)("div",{style:{width:"150px",paddingTop:"7px"},children:(0,s.jsx)(nG,{value:Math.min(o.cornerRadius,Math.round(Math.min(o.width/2,o.height/2))),onChange:e=>{u({cornerRadius:e})},min:1,max:Math.round(Math.min(o.width/2,o.height/2)),labelStepSize:50,showTrackFill:!1,labelRenderer:!1})}),(0,s.jsx)(Mq,{value:o.cornerRadius,onValueChange:e=>{u({cornerRadius:$7(e,1,Math.min(o.width,o.height)/2)})},buttonPosition:"none",style:{width:"45px",padding:"0 5px"},min:1,max:Math.round(Math.min(o.width/2,o.height/2))})]}),(0,s.jsx)(dq,{checked:o.shadowEnabled,label:RK("toolbar.shadow"),onChange:e=>{u({shadowEnabled:e.target.checked})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),o.shadowEnabled&&(0,s.jsxs)(n(d).Fragment,{children:[(0,s.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{children:RK("toolbar.blur")}),(0,s.jsx)("div",{children:(0,s.jsx)(X7,{value:o.shadowBlur,onValueChange:e=>{u({shad:$7(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"})})]}),(0,s.jsx)(nG,{value:o.shadowBlur,onChange:e=>{u({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1}),(0,s.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{children:RK("toolbar.offsetX")}),(0,s.jsx)("div",{children:(0,s.jsx)(X7,{value:o.shadowOffsetX,onValueChange:e=>{u({shadowOffsetX:$7(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"})})]}),(0,s.jsx)(nG,{value:o.shadowOffsetX,onChange:e=>{u({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),(0,s.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{children:RK("toolbar.offsetY")}),(0,s.jsx)("div",{children:(0,s.jsx)(X7,{value:o.shadowOffsetY,onValueChange:e=>{u({shadowOffsetY:$7(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"})})]}),(0,s.jsx)(nG,{value:o.shadowOffsetY,onChange:e=>{u({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),(0,s.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{children:RK("toolbar.opacity")}),(0,s.jsx)("div",{children:(0,s.jsx)(X7,{value:Math.round(100*o.shadowOpacity),onValueChange:e=>{u({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"})})]}),(0,s.jsx)(nG,{value:100*o.shadowOpacity,onChange:e=>{u({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1}),(0,s.jsxs)("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{style:{lineHeight:"30px"},children:RK("toolbar.color")}),(0,s.jsx)(Y7,{value:o.shadowColor,size:30,onChange:e=>{u({shadowColor:e})},store:t})]})]})]}),position:Sf.BOTTOM,children:(0,s.jsx)(QU,{icon:"left-join",text:RK("toolbar.effects"),minimal:!0})})}));const Z7=Ch("div",n(d=l("8NFma")).forwardRef)`
+`,B7=({style:e,color:t,onChange:r,...i})=>{const[o,a]=n(d).useState(t);n(d).useEffect((()=>{a(t)}),[t]);const l=n(d).useRef(),c=n(d).useRef();return(0,s.jsx)(F7,{style:e,onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()},children:(0,s.jsx)(_7,{color:o,...i,onChange:e=>{const{r:t,g:n,b:i,a:o}=e.rgb,s=`rgba(${t},${n},${i},${o})`;a(s),c.current=s,l.current||(l.current=window.setTimeout((()=>{l.current=0,r(s)}),50))}})})},U7=e=>e.map((e=>`${e.color} ${100*e.offset}%`)).join(","),q7=({value:e,onChange:t,store:r})=>{const{rotation:i,stops:o}=yc(e),a=n(d).useRef(o);a.current=o;const l=n(d).useRef(i);l.current=i;const[c,u]=n(d).useState(0),h=n(d).useRef(null),f=n(d).useRef(!1),p=()=>{f.current=!0};return n(d).useEffect((()=>{const e=e=>{if(f.current){const n=h.current.getBoundingClientRect(),r=e.clientX-n.left,i=r/n.width,s=i<-.5||i>1.5;if(o.length>2&&s)return u(0),f.current=!1,a.current.splice(c,1),void t(`linear-gradient(${l.current}deg, ${U7(a.current)})`);const d=Math.min(1,Math.max(0,r/n.width)),p=[...a.current];p[c].offset=d,t(`linear-gradient(${l.current}deg, ${U7(p)})`)}},n=()=>{f.current=!1};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",n),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",n)}}),[c,a]),(0,s.jsxs)("div",{children:[(0,s.jsxs)("div",{style:{width:"calc(100% - 35px)",height:"60px",position:"relative"},children:[(0,s.jsx)("div",{ref:h,style:{position:"absolute",top:0,left:0,width:"100%",marginLeft:"15px",height:"100%",zIndex:0},onMouseDown:e=>{const n=e.currentTarget.getBoundingClientRect(),r=e.clientX-n.left,a=Math.min(1,Math.max(0,r/n.width)),l=o[0].color;o.push({color:l,offset:a}),o.sort(((e,t)=>e.offset-t.offset));const s=o.findIndex((e=>e.offset===a));u(s),p(),t(`linear-gradient(${i}deg, ${U7(o)})`)}}),o.map((({offset:e,color:t},n)=>(0,s.jsx)("div",{style:{position:"absolute",top:"10px",left:100*e+"%",border:n===c?"2px solid rgb(0, 161, 255)":"2px solid rgb(0, 0, 0, 0)",padding:"2px"},onMouseDown:e=>{e.stopPropagation(),u(n),p()},children:(0,s.jsx)(W7,{background:t,style:{margin:0}})},n)))]}),(0,s.jsx)("div",{style:{width:"calc(100% - 30px)",height:"10px",marginLeft:"15px",background:`linear-gradient(90deg,${U7(o)})`}}),(0,s.jsx)("div",{style:{padding:"10px"},children:(0,s.jsx)(nG,{min:0,max:360,value:i,showTrackFill:!1,labelRenderer:!1,onChange:e=>{t(`linear-gradient(${e}deg,${U7(o)})`)}})}),(0,s.jsx)(B7,{color:o[0].color,onChange:e=>{const n=[...o];n[c].color=e,t(`linear-gradient(${i}deg, ${U7(n)})`)}})]})},G7=({value:e,onChange:t,preset:r,store:i})=>{const[o,a]=n(d).useState(mc(e)?"gradient":"solid");return(0,s.jsx)("div",{style:{padding:"5px"},children:(0,s.jsxs)(cG,{id:"TabsExample",selectedTabId:o,onChange:e=>a(e),children:[(0,s.jsx)(rG,{id:"solid",title:"Solid",panel:(0,s.jsx)(B7,{color:e,onChange:t,presetColors:r,style:{padding:"0"}})}),(0,s.jsx)(rG,{id:"gradient",title:"Linear",panel:(0,s.jsx)(q7,{value:e,onChange:t,store:i}),panelClassName:"ember-panel"})]})})},W7=({size:e=30,background:t,style:n={},children:r=null,...i})=>(0,s.jsx)("div",{onMouseDown:e=>e.preventDefault(),style:{width:e+"px",height:e+"px",background:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")",borderRadius:"2px",boxShadow:"0 0 2px grey",marginBottom:"-4px",...n},...i,children:(0,s.jsx)("div",{style:{width:e+"px",height:e+"px",background:t},children:r})}),K7=({value:e,onChange:t,size:n,store:r,gradientEnabled:i,children:o,style:a})=>{const l=r?(e=>{const t=[];e.pages.forEach((e=>{e.children.forEach((e=>{"text"===e.type&&t.push(e.fill),"svg"===e.type&&t.push(...e.colorsReplace.values())}))}));const n=[];return t.forEach((e=>{if(mc(e)){const{stops:t}=yc(e);n.push(...t.map((e=>e.color)))}else n.push(e)})),[...new Set(n)]})(r).slice(0,8):[],c=l.filter((e=>!D7.find((t=>Vc(t,e))))),u=c.concat(D7.slice(0,16-c.length).reverse());return(0,s.jsx)(MK,{autoFocus:!1,enforceFocus:!0,interactionKind:"click",hasBackdrop:!0,content:i?(0,s.jsx)(G7,{preset:u,value:e,onChange:t,store:r}):(0,s.jsx)("div",{style:{padding:"5px"},children:(0,s.jsx)(B7,{color:e,onChange:t,presetColors:u})}),children:(0,s.jsx)(W7,{size:n,background:e,style:a,children:o})})};var Y7=K7;d=l("8NFma");const $7=(e,t,n)=>Math.max(t,Math.min(n,e)),X7=({value:e,onValueChange:t,...r})=>{const[i,o]=n(d).useState(e.toString());n(d).useEffect((()=>{o(e.toString())}),[e]);return(0,s.jsx)(Mq,{value:i,onValueChange:(e,n)=>{o(n),Number.isNaN(e)||t(e)},...r})};var Q7=ei((({element:e,store:t,elements:r})=>{const i=r||[e],o=i[0],a="text"===o.type,l="image"===o.type,c="svg"===o.type,u=e=>{t.history.transaction((()=>{i.forEach((t=>{t.set(e)}))}))};return(0,s.jsx)(MK,{content:(0,s.jsxs)("div",{style:{padding:"15px",paddingTop:"25px",width:"230px"},children:[(0,s.jsx)(dq,{checked:o.blurEnabled,label:RK("toolbar.blur"),onChange:e=>{u({blurEnabled:e.target.checked})},alignIndicator:_f.RIGHT}),o.blurEnabled&&(0,s.jsx)(nG,{value:o.blurRadius,labelStepSize:5,onChange:e=>{u({blurRadius:e})},min:0,max:20,showTrackFill:!1}),!a&&(0,s.jsx)(dq,{checked:o.brightnessEnabled,label:RK("toolbar.brightness"),onChange:e=>{u({brightnessEnabled:e.target.checked})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),o.brightnessEnabled&&(0,s.jsx)(nG,{value:100*o.brightness+100,onChange:e=>{u({brightness:(e-100)/100})},min:0,max:200,showTrackFill:!1,labelStepSize:50}),!a&&(0,s.jsx)(dq,{checked:o.sepiaEnabled,label:RK("toolbar.sepia"),onChange:e=>{u({sepiaEnabled:e.target.checked})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),!a&&(0,s.jsx)(dq,{checked:o.grayscaleEnabled,label:RK("toolbar.grayscale"),onChange:e=>{u({grayscaleEnabled:e.target.checked})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),a&&(0,s.jsx)(dq,{checked:!!o.strokeWidth,label:RK("toolbar.textStroke"),onChange:e=>{u({strokeWidth:e.target.checked?2:0})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),!!o.strokeWidth&&(0,s.jsx)(n(d).Fragment,{children:(0,s.jsxs)("div",{style:{display:"flex",justifyContent:"space-between"},children:[(0,s.jsx)(Y7,{value:o.stroke,size:30,onChange:e=>{u({stroke:e})},store:t}),(0,s.jsx)(Mq,{defaultValue:o.strokeWidth,onValueChange:e=>{u({strokeWidth:$7(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(o.fontSize/2)})]})}),(l||c)&&(0,s.jsx)(dq,{checked:!!o.borderSize,label:RK("toolbar.border"),onChange:e=>{u({borderSize:e.target.checked?2:0})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),!!o.borderSize&&(0,s.jsx)(n(d).Fragment,{children:(0,s.jsxs)("div",{style:{display:"flex",justifyContent:"space-between"},children:[(0,s.jsx)(Y7,{value:o.borderColor,size:30,onChange:e=>{u({borderColor:e})},store:t}),(0,s.jsx)(Mq,{defaultValue:o.borderSize,onValueChange:e=>{u({borderSize:$7(e,1,Math.min(o.width,o.height)/2)})},style:{width:"80px"},min:1,max:Math.min(o.width,o.height)/2})]})}),!a&&(0,s.jsx)(dq,{checked:!!o.cornerRadius,label:RK("toolbar.cornerRadius"),onChange:e=>{u({cornerRadius:e.target.checked?Math.min(o.width/4,o.height/4):0})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),!a&&!!o.cornerRadius&&(0,s.jsxs)("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"},children:[(0,s.jsx)("div",{style:{width:"150px",paddingTop:"7px"},children:(0,s.jsx)(nG,{value:Math.min(o.cornerRadius,Math.round(Math.min(o.width/2,o.height/2))),onChange:e=>{u({cornerRadius:e})},min:1,max:Math.round(Math.min(o.width/2,o.height/2)),labelStepSize:50,showTrackFill:!1,labelRenderer:!1})}),(0,s.jsx)(Mq,{value:o.cornerRadius,onValueChange:e=>{u({cornerRadius:$7(e,1,Math.min(o.width,o.height)/2)})},buttonPosition:"none",style:{width:"45px",padding:"0 5px"},min:1,max:Math.round(Math.min(o.width/2,o.height/2))})]}),(0,s.jsx)(dq,{checked:o.shadowEnabled,label:RK("toolbar.shadow"),onChange:e=>{u({shadowEnabled:e.target.checked})},alignIndicator:_f.RIGHT,style:{marginTop:"20px"}}),o.shadowEnabled&&(0,s.jsxs)(n(d).Fragment,{children:[(0,s.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{children:RK("toolbar.blur")}),(0,s.jsx)("div",{children:(0,s.jsx)(X7,{value:o.shadowBlur,onValueChange:e=>{u({shad:$7(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"})})]}),(0,s.jsx)(nG,{value:o.shadowBlur,onChange:e=>{u({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1}),(0,s.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{children:RK("toolbar.offsetX")}),(0,s.jsx)("div",{children:(0,s.jsx)(X7,{value:o.shadowOffsetX,onValueChange:e=>{u({shadowOffsetX:$7(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"})})]}),(0,s.jsx)(nG,{value:o.shadowOffsetX,onChange:e=>{u({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),(0,s.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{children:RK("toolbar.offsetY")}),(0,s.jsx)("div",{children:(0,s.jsx)(X7,{value:o.shadowOffsetY,onValueChange:e=>{u({shadowOffsetY:$7(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"})})]}),(0,s.jsx)(nG,{value:o.shadowOffsetY,onChange:e=>{u({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),(0,s.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{children:RK("toolbar.opacity")}),(0,s.jsx)("div",{children:(0,s.jsx)(X7,{value:Math.round(100*o.shadowOpacity),onValueChange:e=>{u({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"})})]}),(0,s.jsx)(nG,{value:100*o.shadowOpacity,onChange:e=>{u({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1}),(0,s.jsxs)("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[(0,s.jsx)("div",{style:{lineHeight:"30px"},children:RK("toolbar.color")}),(0,s.jsx)(Y7,{value:o.shadowColor,size:30,onChange:e=>{u({shadowColor:e})},store:t})]})]})]}),position:Sf.BOTTOM,children:(0,s.jsx)(QU,{icon:"left-join",text:RK("toolbar.effects"),minimal:!0})})}));const Z7=Ch("div",n(d=l("8NFma")).forwardRef)`
   @media screen and (max-width: 500px) {
     width: auto !important;
   }

package/toolbar/color-picker.js

@@ -16,4 +16,4 @@
   .bp4-dark & .sketch-picker label {
     color: #f5f8fa !important;
   }
-`,SolidInput=e=>{var{style:t,color:r,onChange:a}=e,o=__rest(e,["style","color","onChange"]);const[n,l]=react_1.default.useState(r);react_1.default.useEffect((()=>{l(r)}),[r]);const i=react_1.default.useRef(),c=react_1.default.useRef();return react_1.default.createElement(SolidContainer,{style:t,onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()}},react_1.default.createElement(react_color_1.SketchPicker,Object.assign({color:n},o,{onChange:e=>{const{r:t,g:r,b:o,a:n}=e.rgb,s=`rgba(${t},${r},${o},${n})`;l(s),c.current=s,i.current||(i.current=window.setTimeout((()=>{i.current=0,a(s)}),50))}})))},serializeStops=e=>e.map((e=>`${e.color} ${100*e.offset}%`)).join(","),LinearGradient=({value:e,onChange:t,store:r})=>{const{rotation:a,stops:o}=(0,gradient_1.parseColor)(e),n=react_1.default.useRef(o);n.current=o;const l=react_1.default.useRef(a);l.current=a;const[i,c]=react_1.default.useState(0),s=react_1.default.useRef(null),d=react_1.default.useRef(!1),u=()=>{d.current=!0};return react_1.default.useEffect((()=>{const e=e=>{if(d.current){const r=s.current.getBoundingClientRect(),a=e.clientX-r.left,u=a/r.width,p=u<-.5||u>1.5;if(o.length>2&&p)return c(0),d.current=!1,n.current.splice(i,1),void t(`linear-gradient(${l.current}deg, ${serializeStops(n.current)})`);const f=Math.min(1,Math.max(0,a/r.width)),g=[...o];g[i].offset=f,t(`linear-gradient(${l.current}deg, ${serializeStops(g)})`)}},r=()=>{d.current=!1};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",r),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",r)}}),[i,n]),react_1.default.createElement("div",null,react_1.default.createElement("div",{style:{width:"calc(100% - 35px)",height:"60px",position:"relative"}},react_1.default.createElement("div",{ref:s,style:{position:"absolute",top:0,left:0,width:"100%",marginLeft:"15px",height:"100%",zIndex:0},onMouseDown:e=>{const r=e.currentTarget.getBoundingClientRect(),n=e.clientX-r.left,l=Math.min(1,Math.max(0,n/r.width)),i=o[0].color;o.push({color:i,offset:l}),o.sort(((e,t)=>e.offset-t.offset));const s=o.findIndex((e=>e.offset===l));c(s),u(),t(`linear-gradient(${a}deg, ${serializeStops(o)})`)}}),o.map((({offset:e,color:t},r)=>react_1.default.createElement("div",{key:r,style:{position:"absolute",top:"10px",left:100*e+"%",border:r===i?"2px solid rgb(0, 161, 255)":"2px solid rgb(0, 0, 0, 0)",padding:"2px"},onMouseDown:e=>{e.stopPropagation(),c(r),u()}},react_1.default.createElement(ColoredBox,{background:t,style:{margin:0}}))))),react_1.default.createElement("div",{style:{width:"calc(100% - 30px)",height:"10px",marginLeft:"15px",background:`linear-gradient(90deg,${serializeStops(o)})`}}),react_1.default.createElement("div",{style:{padding:"10px"}},react_1.default.createElement(core_2.Slider,{min:0,max:360,value:a,showTrackFill:!1,labelRenderer:!1,onChange:e=>{t(`linear-gradient(${e}deg,${serializeStops(o)})`)}})),react_1.default.createElement(SolidInput,{color:o[0].color,onChange:e=>{const r=[...o];r[i].color=e,t(`linear-gradient(${a}deg, ${serializeStops(r)})`)}}))},VariantColorInput=({value:e,onChange:t,preset:r,store:a})=>{const[o,n]=react_1.default.useState((0,gradient_1.isGradient)(e)?"gradient":"solid");return react_1.default.createElement("div",{style:{padding:"5px"}},react_1.default.createElement(core_1.Tabs,{id:"TabsExample",selectedTabId:o,onChange:e=>n(e)},react_1.default.createElement(core_1.Tab,{id:"solid",title:"Solid",panel:react_1.default.createElement(SolidInput,{color:e,onChange:t,presetColors:r,style:{padding:"0"}})}),react_1.default.createElement(core_1.Tab,{id:"gradient",title:"Linear",panel:react_1.default.createElement(LinearGradient,{value:e,onChange:t,store:a}),panelClassName:"ember-panel"})))},ColoredBox=e=>{var{size:t=30,background:r,style:a={},children:o=null}=e,n=__rest(e,["size","background","style","children"]);return react_1.default.createElement("div",Object.assign({onMouseDown:e=>e.preventDefault(),style:Object.assign({width:t+"px",height:t+"px",background:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")",borderRadius:"2px",boxShadow:"0 0 2px grey",marginBottom:"-4px"},a)},n),react_1.default.createElement("div",{style:{width:t+"px",height:t+"px",background:r}},o))},ColorPicker=({value:e,onChange:t,size:r,store:a,gradientEnabled:o,children:n,style:l})=>{const i=(a?getUsedColors(a).slice(0,8):[]).filter((e=>!DEFAULT_COLORS.find((t=>(0,svg_1.sameColors)(t,e))))),c=i.concat(DEFAULT_COLORS.slice(0,16-i.length).reverse());return react_1.default.createElement(popover2_1.Popover2,{autoFocus:!1,enforceFocus:!0,interactionKind:"click",hasBackdrop:!0,content:o?react_1.default.createElement(VariantColorInput,{preset:c,value:e,onChange:t,store:a}):react_1.default.createElement("div",{style:{padding:"5px"}},react_1.default.createElement(SolidInput,{color:e,onChange:t,presetColors:c}))},react_1.default.createElement(ColoredBox,{size:r,background:e,style:l},n))};exports.ColorPicker=ColorPicker,exports.default=exports.ColorPicker;
+`,SolidInput=e=>{var{style:t,color:r,onChange:a}=e,o=__rest(e,["style","color","onChange"]);const[n,l]=react_1.default.useState(r);react_1.default.useEffect((()=>{l(r)}),[r]);const i=react_1.default.useRef(),c=react_1.default.useRef();return react_1.default.createElement(SolidContainer,{style:t,onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()}},react_1.default.createElement(react_color_1.SketchPicker,Object.assign({color:n},o,{onChange:e=>{const{r:t,g:r,b:o,a:n}=e.rgb,s=`rgba(${t},${r},${o},${n})`;l(s),c.current=s,i.current||(i.current=window.setTimeout((()=>{i.current=0,a(s)}),50))}})))},serializeStops=e=>e.map((e=>`${e.color} ${100*e.offset}%`)).join(","),LinearGradient=({value:e,onChange:t,store:r})=>{const{rotation:a,stops:o}=(0,gradient_1.parseColor)(e),n=react_1.default.useRef(o);n.current=o;const l=react_1.default.useRef(a);l.current=a;const[i,c]=react_1.default.useState(0),s=react_1.default.useRef(null),d=react_1.default.useRef(!1),u=()=>{d.current=!0};return react_1.default.useEffect((()=>{const e=e=>{if(d.current){const r=s.current.getBoundingClientRect(),a=e.clientX-r.left,u=a/r.width,p=u<-.5||u>1.5;if(o.length>2&&p)return c(0),d.current=!1,n.current.splice(i,1),void t(`linear-gradient(${l.current}deg, ${serializeStops(n.current)})`);const f=Math.min(1,Math.max(0,a/r.width)),g=[...n.current];g[i].offset=f,t(`linear-gradient(${l.current}deg, ${serializeStops(g)})`)}},r=()=>{d.current=!1};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",r),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",r)}}),[i,n]),react_1.default.createElement("div",null,react_1.default.createElement("div",{style:{width:"calc(100% - 35px)",height:"60px",position:"relative"}},react_1.default.createElement("div",{ref:s,style:{position:"absolute",top:0,left:0,width:"100%",marginLeft:"15px",height:"100%",zIndex:0},onMouseDown:e=>{const r=e.currentTarget.getBoundingClientRect(),n=e.clientX-r.left,l=Math.min(1,Math.max(0,n/r.width)),i=o[0].color;o.push({color:i,offset:l}),o.sort(((e,t)=>e.offset-t.offset));const s=o.findIndex((e=>e.offset===l));c(s),u(),t(`linear-gradient(${a}deg, ${serializeStops(o)})`)}}),o.map((({offset:e,color:t},r)=>react_1.default.createElement("div",{key:r,style:{position:"absolute",top:"10px",left:100*e+"%",border:r===i?"2px solid rgb(0, 161, 255)":"2px solid rgb(0, 0, 0, 0)",padding:"2px"},onMouseDown:e=>{e.stopPropagation(),c(r),u()}},react_1.default.createElement(ColoredBox,{background:t,style:{margin:0}}))))),react_1.default.createElement("div",{style:{width:"calc(100% - 30px)",height:"10px",marginLeft:"15px",background:`linear-gradient(90deg,${serializeStops(o)})`}}),react_1.default.createElement("div",{style:{padding:"10px"}},react_1.default.createElement(core_2.Slider,{min:0,max:360,value:a,showTrackFill:!1,labelRenderer:!1,onChange:e=>{t(`linear-gradient(${e}deg,${serializeStops(o)})`)}})),react_1.default.createElement(SolidInput,{color:o[0].color,onChange:e=>{const r=[...o];r[i].color=e,t(`linear-gradient(${a}deg, ${serializeStops(r)})`)}}))},VariantColorInput=({value:e,onChange:t,preset:r,store:a})=>{const[o,n]=react_1.default.useState((0,gradient_1.isGradient)(e)?"gradient":"solid");return react_1.default.createElement("div",{style:{padding:"5px"}},react_1.default.createElement(core_1.Tabs,{id:"TabsExample",selectedTabId:o,onChange:e=>n(e)},react_1.default.createElement(core_1.Tab,{id:"solid",title:"Solid",panel:react_1.default.createElement(SolidInput,{color:e,onChange:t,presetColors:r,style:{padding:"0"}})}),react_1.default.createElement(core_1.Tab,{id:"gradient",title:"Linear",panel:react_1.default.createElement(LinearGradient,{value:e,onChange:t,store:a}),panelClassName:"ember-panel"})))},ColoredBox=e=>{var{size:t=30,background:r,style:a={},children:o=null}=e,n=__rest(e,["size","background","style","children"]);return react_1.default.createElement("div",Object.assign({onMouseDown:e=>e.preventDefault(),style:Object.assign({width:t+"px",height:t+"px",background:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")",borderRadius:"2px",boxShadow:"0 0 2px grey",marginBottom:"-4px"},a)},n),react_1.default.createElement("div",{style:{width:t+"px",height:t+"px",background:r}},o))},ColorPicker=({value:e,onChange:t,size:r,store:a,gradientEnabled:o,children:n,style:l})=>{const i=(a?getUsedColors(a).slice(0,8):[]).filter((e=>!DEFAULT_COLORS.find((t=>(0,svg_1.sameColors)(t,e))))),c=i.concat(DEFAULT_COLORS.slice(0,16-i.length).reverse());return react_1.default.createElement(popover2_1.Popover2,{autoFocus:!1,enforceFocus:!0,interactionKind:"click",hasBackdrop:!0,content:o?react_1.default.createElement(VariantColorInput,{preset:c,value:e,onChange:t,store:a}):react_1.default.createElement("div",{style:{padding:"5px"}},react_1.default.createElement(SolidInput,{color:e,onChange:t,presetColors:c}))},react_1.default.createElement(ColoredBox,{size:r,background:e,style:l},n))};exports.ColorPicker=ColorPicker,exports.default=exports.ColorPicker;