(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[76615],{76615:(s,e,a)=>{"use strict";a.r(e),a.d(e,{default:()=>X});var d=a(87687),t=a(52751),r=a(31928),n=a(68852);let l=["C","C#","D","D#","E","F","F#","G","G#","A","A#","B"],o=["D","E","G","A","B"],p=(0,r.I)("div")({name:"Wrapper",class:"wj7jjy7",propsAsIs:!1}),i=(0,r.I)("div")({name:"KeyFace",class:"k3d7hqc",propsAsIs:!1}),c=(0,r.I)("div")({name:"KeyEdge",class:"kg30s0y",propsAsIs:!1}),m=(0,r.I)("div")({name:"BlackKeyShadow",class:"bkme6br",propsAsIs:!1}),h=t.memo(function(s){let{musicalKey:e,isPressed:a,isPreviousKeyPressed:r,handleClickKey:n,handleReleaseKey:l,setIsGlissando:h,layers:u}=s,I=o.includes(e),j=t.useCallback(()=>{h(!0),n(e)},[n,e,h]),v=t.useCallback(()=>{h(!1),l(e)},[l,e,h]),x=t.useCallback(()=>{a&&l(e)},[l,e,a]),k=t.useCallback(s=>{1===s.buttons&&n(e)},[n,e]);return(0,d.jsxs)(p,{"data-is-pressed":a,"data-is-previous-key-pressed":r,"data-hide-box-shadow":u<4,"data-hide-key-edge":u<2,"data-hide-top-shadow":u<1,onMouseDown:j,onMouseUp:v,onMouseLeave:x,onMouseEnter:k,children:[(0,d.jsx)(c,{}),(0,d.jsx)(i,{children:I&&(0,d.jsx)(m,{})})]})});a(72703);let u=(0,r.I)("div")({name:"OuterWrapper",class:"ouc7b0z",propsAsIs:!1}),I=(0,r.I)("div")({name:"Wrapper",class:"w1yl3sn1",propsAsIs:!1}),j=(0,r.I)("div")({name:"KeyFace",class:"k19c6k44",propsAsIs:!1}),v=(0,r.I)("div")({name:"KeyEdge",class:"kodwvhk",propsAsIs:!1}),x=t.memo(function(s){let{musicalKey:e,isPressed:a,isPreviousKeyPressed:r,isNextKeyPressed:n,handleClickKey:l,handleReleaseKey:o,isGlissando:p,setIsGlissando:i,layers:c}=s,m=t.useCallback(()=>{i(!0),l(e)},[l,e,i]),h=t.useCallback(()=>{i(!1),o(e)},[o,e,i]),x=t.useCallback(()=>{a&&o(e)},[o,e,a]),k=t.useCallback(s=>{1===s.buttons&&l(e)},[l,e]);return t.useEffect(()=>{if(!p)return;let s=()=>{i(!1),a&&o(e)};return window.addEventListener("mouseup",s),()=>{window.removeEventListener("mouseup",s)}},[p,a,o,e]),(0,d.jsx)(u,{children:(0,d.jsxs)(I,{"data-is-pressed":a,"data-is-next-key-pressed":n,"data-is-previous-key-pressed":r,"data-hide-rounding":c<7,"data-hide-edge":c<7,"data-hide-light-glare":c<8,"data-hide-texture":c<5,onMouseDown:m,onMouseUp:h,onMouseLeave:x,onMouseEnter:k,children:[(0,d.jsx)(j,{}),(0,d.jsx)(v,{})]})})});a(28433);let k=(0,r.I)("div")({name:"Wrapper",class:"w13nunkg",propsAsIs:!1}),w=function(s){let{numberOfKeys:e,startingOctave:a,layers:r}=s,o=t.useRef(null);return(0,d.jsx)(k,{ref:o,children:(0,n.y1)(e).map(s=>{let e=l[s%l.length],t=e.includes("#"),n=a+Math.floor(s/l.length),o="".concat(e).concat(n);return(0,d.jsx)(t?x:h,{musicalKey:o,isPressed:!1,isPreviousKeyPressed:!1,isNextKeyPressed:!1,handleClickKey:()=>{},handleReleaseKey:()=>{},isGlissando:!1,setIsGlissando:()=>{},layers:r},o)})})};a(45645);let g=(0,r.I)("div")({name:"Wrapper",class:"w1cronct",propsAsIs:!1}),y=(0,r.I)("div")({name:"ControlButton",class:"c5tr8r4",propsAsIs:!1}),b=(0,r.I)("span")({name:"ClickExpander",class:"c1c0e7a9",propsAsIs:!1}),A=(0,r.I)("span")({name:"Notch",class:"n1m61cvk",propsAsIs:!1}),f=(0,r.I)("div")({name:"NotchHighlight",class:"nlo6jmo",propsAsIs:!1}),z=(0,r.I)("div")({name:"Shadow",class:"s1vmhwjq",propsAsIs:!1}),E=t.memo(function(s){let{value:e,min:a,max:t,label:r,controlType:l,layers:o,...p}=s,i=(0,n.S8)(e,a,t,17,-17);return(0,d.jsxs)(g,{...p,"data-hide-inner-shadow":o<1,"data-hide-grooves":o<4,"data-hide-traintracks":o<3,"data-hide-texture":o<2,"data-hide-outline":o<3,children:[o>7&&(0,d.jsx)(z,{}),(0,d.jsxs)(y,{children:[(0,d.jsx)(b,{}),o>4&&(0,d.jsx)(A,{style:{transform:"translateY(".concat(i,"px)"),"--top-gradient-opacity":(0,n.S8)(e,a,t,1,.25),"--bottom-gradient-opacity":(0,n.S8)(e,a,t,.6,1)},children:o>5&&(0,d.jsx)(f,{style:{"--shift":(0,n.S8)(e,a,t,7.199999999999999,-4.800000000000001)+1+"px"}})})]})]})});a(39113);let q=(0,r.I)("div")({name:"Wrapper",class:"wzq9bb6",propsAsIs:!1}),C=function(s){let{layers:e}=s;return(0,d.jsxs)(q,{children:[(0,d.jsx)(E,{layers:e,value:0,min:-1,max:1,label:"Pitch Bend",controlType:"pitch"}),(0,d.jsx)(E,{layers:e,value:.5,min:0,max:1,label:"Mod Wheel",controlType:"mod"})]})};a(71396);let K=(0,r.I)("div")({name:"Wrapper",class:"watuhzq",propsAsIs:!1}),M=(0,r.I)("div")({name:"Edge",class:"epjs8aj",propsAsIs:!1}),W=(0,r.I)(M)({name:"LeftEdge",class:"l1d9g5nh",propsAsIs:!0}),P=(0,r.I)(M)({name:"RightEdge",class:"rmdfvd0",propsAsIs:!0}),S=(0,r.I)("div")({name:"Front",class:"f9g7zaf",propsAsIs:!1}),B=(0,r.I)("div")({name:"Panel",class:"pq6ws56",propsAsIs:!1}),D=(0,r.I)(B)({name:"NameplatePanel",class:"n18rwl3o",propsAsIs:!0}),F=(0,r.I)(B)({name:"ButtonPanel",class:"b1g6l6di",propsAsIs:!0}),L=(0,r.I)(B)({name:"MiddlePanel",class:"m134xt4x",propsAsIs:!0}),N=(0,r.I)("div")({name:"TopRow",class:"t1mzgqwv",propsAsIs:!1}),R=(0,r.I)("div")({name:"TopEdge",class:"tzco0uw",propsAsIs:!1});(0,r.I)("div")({name:"VolumeFaderWrapper",class:"v1o9nktf",propsAsIs:!1});let G=(0,r.I)("div")({name:"TopContent",class:"tw946li",propsAsIs:!1}),T=(0,r.I)("div")({name:"HorizontalDivider",class:"hk8xn35",propsAsIs:!1}),_=(0,r.I)("div")({name:"VerticalDivider",class:"v154fc1j",propsAsIs:!1}),O=(0,r.I)("div")({name:"BottomRow",class:"b1571u9b",propsAsIs:!1}),H=(0,r.I)("div")({name:"KeyControlsWrapper",class:"k1jt8zmg",propsAsIs:!1}),U=(0,r.I)("div")({name:"KeyBedWrapper",class:"ky36cyu",propsAsIs:!1}),V=(0,r.I)("div")({name:"KeyboardEdge",class:"k1mtlxlt",propsAsIs:!1}),Y=(0,r.I)("div")({name:"KeyboardEdgeShadow",class:"kjl9vay",propsAsIs:!1}),J=(0,r.I)(Y)({name:"LeftKeyboardEdgeShadow",class:"ldp002u",propsAsIs:!0}),Q=(0,r.I)(Y)({name:"RightKeyboardEdgeShadow",class:"r5lsvut",propsAsIs:!0}),X=t.memo(function(s){let{layers:e}=s;return(0,d.jsxs)(K,{"data-hide-panels":e<3,children:[(0,d.jsx)(W,{"data-hide-gradient":e<10}),(0,d.jsxs)(S,{children:[(0,d.jsxs)(N,{children:[(0,d.jsx)(R,{"data-hide-gradient":e<6}),(0,d.jsxs)(G,{children:[(0,d.jsx)(D,{}),(0,d.jsx)(_,{"data-hide-gradient":e<1}),(0,d.jsx)(L,{}),(0,d.jsx)(_,{"data-hide-gradient":e<1}),(0,d.jsx)(F,{})]})]}),(0,d.jsx)(T,{"data-hide-gradient":e<2}),(0,d.jsxs)(O,{children:[(0,d.jsx)(H,{"data-hide-gradient":e<9,"data-hide-shadow":e<4,children:(0,d.jsx)(C,{layers:e})}),(0,d.jsxs)(U,{"data-hide-gradient":e<6,children:[(0,d.jsx)(w,{numberOfKeys:29,startingOctave:3,layers:e}),(0,d.jsx)(J,{style:{opacity:e<3?0:1}}),(0,d.jsx)(Q,{style:{opacity:e<3?0:1}})]}),(0,d.jsx)(V,{"data-hide-gradient":e<9,"data-hide-shadow":e<4})]})]}),(0,d.jsx)(P,{"data-hide-gradient":e<10})]})});a(70355)},39113:s=>{s.exports={w1cronct:"w1cronct",c5tr8r4:"c5tr8r4",c1c0e7a9:"c1c0e7a9",n1m61cvk:"n1m61cvk",nlo6jmo:"nlo6jmo",s1vmhwjq:"s1vmhwjq"}},45645:s=>{s.exports={w13nunkg:"w13nunkg"}},28433:s=>{s.exports={ouc7b0z:"ouc7b0z",w1yl3sn1:"w1yl3sn1",k19c6k44:"k19c6k44",kodwvhk:"kodwvhk"}},72703:s=>{s.exports={wj7jjy7:"wj7jjy7",k3d7hqc:"k3d7hqc",kg30s0y:"kg30s0y",bkme6br:"bkme6br"}},71396:s=>{s.exports={wzq9bb6:"wzq9bb6"}},70355:s=>{s.exports={watuhzq:"watuhzq",epjs8aj:"epjs8aj",l1d9g5nh:"l1d9g5nh",rmdfvd0:"rmdfvd0",f9g7zaf:"f9g7zaf",pq6ws56:"pq6ws56",n18rwl3o:"n18rwl3o",b1g6l6di:"b1g6l6di",m134xt4x:"m134xt4x",t1mzgqwv:"t1mzgqwv",tzco0uw:"tzco0uw",tw946li:"tw946li",hk8xn35:"hk8xn35",v154fc1j:"v154fc1j",b1571u9b:"b1571u9b",k1jt8zmg:"k1jt8zmg",ky36cyu:"ky36cyu",k1mtlxlt:"k1mtlxlt",kjl9vay:"kjl9vay",ldp002u:"ldp002u",r5lsvut:"r5lsvut"}}}]);
//# sourceMappingURL=76615.cc44839fab16e2ec.js.map