(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[92951],{52209:(e,s,t)=>{"use strict";t.d(s,{A:()=>x});var n=t(87687),r=t(52751),a=t(31928),o=t(30251),l=t(21040);let i=r.forwardRef(function(e,s){let{Icon:t,iconSide:r="left",iconProps:a={},backgroundColor:o="var(--color-gray-900)",highlightColor:i="var(--color-gray-800)",boopEffect:x={rotation:10},children:g,style:v={},discouraged:w=!1,href:f,textAlign:j="center",...b}=e,[I,y]=(0,l.A)(x);return(0,n.jsxs)(c,{ref:s,onMouseEnter:()=>{y()},style:{"--background-color":o,...v},"data-discouraged":w,href:f,as:"string"==typeof f?"a":"button",...b,children:[t&&(0,n.jsx)(d,{style:{order:"left"===r?1:3},children:(0,n.jsx)(u,{style:{"--background-color":i},children:(0,n.jsx)(h,{style:I,children:(0,n.jsx)(t,{size:20,...a})})})}),g&&(0,n.jsx)(m,{style:{order:2},children:g}),"true-center"===j&&(0,n.jsx)(p,{style:{order:"left"===r?3:1}})]})}),c=(0,a.I)("button")({name:"Wrapper",class:"w19mrn5v",propsAsIs:!1}),p=(0,a.I)("span")({name:"Col",class:"c1rpf4ut",propsAsIs:!1}),d=(0,a.I)(p)({name:"IconCol",class:"iwv8n0j",propsAsIs:!0}),u=(0,a.I)("span")({name:"IconBox",class:"i1qpbbb9",propsAsIs:!1}),h=(0,a.I)(o.CS.span)({name:"IconWrapper",class:"i1m1cbkp",propsAsIs:!0}),m=(0,a.I)("span")({name:"ChildWrapper",class:"c7sw782",propsAsIs:!1}),x=i;t(52391)},65598:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>e6});var n=t(87687),r=t(52751),a=t(31928);let o=(0,t(2651).A)("Hand",[["path",{d:"M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2",key:"1fvzgz"}],["path",{d:"M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2",key:"1kc0my"}],["path",{d:"M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8",key:"10h0bg"}],["path",{d:"M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15",key:"1s1gnw"}]]);var l=t(42432),i=t(30251);let c=r.createContext(!1),p=(0,a.I)(i.CS.span)({name:"IconWrapper",class:"i5e2apv",propsAsIs:!0}),d=(0,a.I)("button")({name:"Button",class:"b9bkmsg",propsAsIs:!1}),u=function(e){let{customBoop:s,index:t,transformOrigin:a,children:o,...l}=e,[u,h]=r.useState(!1),m=(0,i.zh)({transform:s?"":"rotate(".concat(u?10:0,"deg)"),transformOrigin:a,config:{tension:300,friction:10}}),x=r.useRef(null);function g(){h(!0),x.current&&window.clearTimeout(x.current),x.current=window.setTimeout(()=>{h(!1)},150)}return(0,n.jsx)(c.Provider,{value:u,children:(0,n.jsx)(d,{"data-block-grab-outline":"true",onPointerDown:g,onMouseEnter:g,onFocus:g,style:{"--index":t},...l,children:(0,n.jsx)(p,{style:m,children:o})})})};function h(e){let{size:s=24,fillRatio:t=0,isBooped:a=!1,boopRotation:o=40,includePivotPoints:l=!1,mainPivotColor:c="hsl(180deg 100% 40%)",fusePivotColor:p="hsl(350deg 100% 50%)",...d}=e,u=(0,i.zh)({transform:"rotate(".concat(a?o:0,"deg)"),transformOrigin:"75% 25%",config:{tension:400,friction:10}}),h=r.useId().replace(/:/g,""),m="mask-".concat(h);return(0,n.jsxs)(x,{xmlns:"http://www.w3.org/2000/svg",width:s,height:s,fill:"none",viewBox:"0 0 24 24",...d,children:[(0,n.jsxs)("g",{mask:l?"url(#".concat(m,")"):void 0,children:[(0,n.jsx)("path",{fill:"currentColor",d:"m20.468 1.037-.466 2.96 2.96-.468-2.96.472 1.361 2.671L20 4.003 17 7l2.998-3-2.67-1.36 2.671 1.357z"}),(0,n.jsx)(i.CS.path,{fill:"currentColor",style:u,d:"m20.468 1.037.988.155A1 1 0 0 0 19.48.88zm-.466 2.96-.988-.154a1 1 0 0 0 1.144 1.143zm2.96-.468.158.988a1 1 0 0 0-.314-1.975zm-2.96.472-.157-.987a1 1 0 0 0-.733 1.441zm1.361 2.671-.89.455a1 1 0 0 0 1.781-.909zM20 4.003l.89-.455a1 1 0 0 0-1.596-.252zM17 7l-.707-.707a1 1 0 0 0 1.415 1.414zm2.998-3 .707.707a1 1 0 0 0-.253-1.597zm-2.67-1.36.452-.892a1 1 0 0 0-.907 1.782zm2.671 1.357-.453.892a1 1 0 0 0 1.441-.735zM19.48.881l-.466 2.962 1.976.31.466-2.96zm.678 4.105 2.961-.47-.313-1.974-2.96.468zm2.647-2.444-2.96.472.315 1.975 2.96-.472zm-3.693 1.913 1.36 2.671 1.782-.908-1.36-2.67zm3.142 1.762L20.89 3.548l-1.781.91 1.364 2.67zm-2.961-2.921-3 2.997 1.414 1.414 3-2.997zm-1.586 4.41 2.997-2.999-1.415-1.413-2.997 3zm2.744-4.596-2.67-1.362-.909 1.782 2.67 1.361zm-3.578.42 2.672 1.359.906-1.783-2.672-1.358zm4.113.624.47-2.96L19.48.88l-.47 2.96z"}),(0,n.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeWidth:"2",d:"M13.444 8.347A8 8 0 1 0 15.93 11"}),(0,n.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m12.359 7.649 1.06-1.061a2 2 0 0 1 2.829 0l1.414 1.414a2 2 0 0 1 0 2.829l-1.06 1.06"})]}),(0,n.jsxs)("mask",{id:m,children:[(0,n.jsx)("rect",{width:"100%",height:"100%",fill:"white"}),(0,n.jsx)("circle",{cx:"18",cy:"6",r:"2",fill:"black"})]}),l&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("circle",{cx:"18",cy:"6",r:"1.25",fill:p}),(0,n.jsx)("circle",{cx:9,cy:15,r:"2",fill:c})]})]})}function m(e){let{size:s=24,fillRatio:t=0,...a}=e,o=r.use(c);return(0,n.jsx)(h,{size:s,fillRatio:t,isBooped:o,...a})}t(40501);let x=(0,a.I)("svg")({name:"Svg",class:"swatygt",propsAsIs:!1});t(47693);let g=(0,a.I)("svg")({name:"Svg",class:"s17be3er",propsAsIs:!1}),v=function(e){let{size:s=24,...t}=e,a=r.use(c),o=(0,i.zh)({transform:"translateX(".concat(a?3:0,"px)"),config:{tension:300,friction:10}});return(0,n.jsxs)(g,{xmlns:"http://www.w3.org/2000/svg",width:s,height:s,fill:"none",viewBox:"0 0 24 24",...t,children:[(0,n.jsx)("path",{d:"M22 22H2",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),(0,n.jsx)(i.CS.path,{style:o,d:"M5.5 12.5L4.03109 13.9689C2.89536 15.1046 2.85562 16.9334 3.94095 18.1174L7.5 22H12L13.5 20.5M5.5 12.5L11.8787 6.12132C13.0503 4.94975 14.9497 4.94975 16.1213 6.12132L19.8787 9.87868C21.0503 11.0503 21.0503 12.9497 19.8787 14.1213L13.5 20.5M5.5 12.5L13.5 20.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]})};t(38130);let w={tension:300,friction:10},f=function(e){let{size:s=24,...t}=e,a=r.use(c),o=(0,i.zh)({transform:"rotate(".concat(a?5:0,"deg)"),transformOrigin:"14% 86%",config:w}),l=(0,i.zh)({transform:a?"scale(1.2) rotate(20deg)":"scale(1) rotate(0deg)",transformOrigin:"20.8% 33.3%",config:{tension:300,friction:8},delay:0}),p=(0,i.zh)({transform:a?"scale(1.16) rotate(20deg)":"scale(1) rotate(0deg)",transformOrigin:"79.2% 66.7%",config:{tension:350,friction:9},delay:75}),d=(0,i.zh)({transform:a?"scale(1.24) rotate(20deg)":"scale(1) rotate(0deg)",transformOrigin:"41.7% 12.5%",delay:150,config:{tension:300,friction:5}});return(0,n.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:s,height:s,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...t,children:[(0,n.jsxs)(i.CS.g,{style:o,children:[(0,n.jsx)("path",{d:"M19.6398 5.64005L18.3598 4.36004C18.2473 4.24636 18.1133 4.15612 17.9657 4.09452C17.8181 4.03293 17.6598 4.00122 17.4998 4.00122C17.3399 4.00122 17.1815 4.03293 17.0339 4.09452C16.8863 4.15612 16.7523 4.24636 16.6398 4.36004L2.3598 18.64C2.24612 18.7526 2.15587 18.8865 2.09428 19.0341C2.03269 19.1817 2.00098 19.3401 2.00098 19.5C2.00098 19.66 2.03269 19.8184 2.09428 19.966C2.15587 20.1136 2.24612 20.2475 2.3598 20.36L3.6398 21.64C3.75162 21.755 3.88534 21.8463 4.03305 21.9087C4.18076 21.971 4.33947 22.0031 4.4998 22.0031C4.66014 22.0031 4.81885 21.971 4.96656 21.9087C5.11427 21.8463 5.24798 21.755 5.3598 21.64L19.6398 7.36005C19.7547 7.24822 19.846 7.11451 19.9084 6.9668C19.9708 6.81909 20.0029 6.66038 20.0029 6.50005C20.0029 6.33971 19.9708 6.181 19.9084 6.03329C19.846 5.88558 19.7547 5.75187 19.6398 5.64005Z"}),(0,n.jsx)("path",{d:"m14 7 3 3"})]}),(0,n.jsxs)(i.CS.g,{style:l,children:[(0,n.jsx)("path",{d:"M5 6v4"}),(0,n.jsx)("path",{d:"M7 8H3"})]}),(0,n.jsxs)(i.CS.g,{style:p,children:[(0,n.jsx)("path",{d:"M19 14v4"}),(0,n.jsx)("path",{d:"M21 16h-4"})]}),(0,n.jsxs)(i.CS.g,{style:d,children:[(0,n.jsx)("path",{d:"M10 2v2"}),(0,n.jsx)("path",{d:"M11 3H9"})]})]})},j=(0,a.I)("div")({name:"Wrapper",class:"w1h7524q",propsAsIs:!1}),b=r.memo(function(e){let{}=e;return(0,n.jsxs)(j,{children:[(0,n.jsxs)(u,{index:0,transformOrigin:"50% 80%",children:[(0,n.jsx)(o,{"aria-hidden":"true",size:64}),(0,n.jsx)(l.A,{children:"Select “Grabber” tool"})]}),(0,n.jsxs)(u,{customBoop:!0,index:1,transformOrigin:"50% 91.6%",children:[(0,n.jsx)(v,{size:64,"aria-hidden":"true"}),(0,n.jsx)(l.A,{children:"Select “Eraser” tool"})]}),(0,n.jsxs)(u,{index:2,transformOrigin:"37.5% 62.5%",children:[(0,n.jsx)(m,{size:64}),(0,n.jsx)(l.A,{children:"Select “Bomb” tool"})]}),(0,n.jsxs)(u,{customBoop:!0,index:3,transformOrigin:"37.5% 62.5%",children:[(0,n.jsx)(f,{size:64}),(0,n.jsx)(l.A,{children:"Select “Wand” tool"})]})]})});t(48137);var I=t(51838),y=t(2518),k=t(68852);let A={down1:[250,150],down2:[450,150],down3:[650,150],up1:[1050,150],up2:[1250,150],up3:[1450,150]},z=(0,a.I)("label")({name:"Wrapper",class:"w1bbbz0l",propsAsIs:!1}),C=(0,a.I)("div")({name:"Face",class:"fmmddfn",propsAsIs:!1}),M=(0,a.I)("div")({name:"PseudoCheckbox",class:"p2uqtol",propsAsIs:!1}),q=(0,a.I)("input")({name:"HiddenCheckbox",class:"hnr4spm",propsAsIs:!1}),L=(0,a.I)("div")({name:"Label",class:"l1oi6ts5",propsAsIs:!1});t(8671);let S=(0,a.I)("div")({name:"Wrapper",class:"wujny8",propsAsIs:!1}),W=(0,a.I)("svg")({name:"Svg",class:"shftdbl",propsAsIs:!1}),P=(0,a.I)("path")({name:"ShadowPath",class:"s7nqz7f",propsAsIs:!0}),D=(0,a.I)("path")({name:"BrightPath",class:"b32sw2i",propsAsIs:!0}),B=(0,a.I)("div")({name:"Actions",class:"a1kd9b3l",propsAsIs:!1}),E=(0,a.I)(function(e){let{color:s,label:t,isEnabled:r,onToggle:a,...o}=e,[l]=(0,y.A)("/sounds/rubber-button-sprite.mp3",{sprite:A,volume:.5});return(0,n.jsx)(z,{"data-is-enabled":r,...o,onPointerDown:()=>{l({id:(0,k.Z6)(Object.keys(A).slice(0,3))})},onPointerUp:()=>l({id:(0,k.Z6)(Object.keys(A).slice(3))}),children:(0,n.jsxs)(C,{children:[(0,n.jsx)(M,{children:r&&(0,n.jsx)(I.A,{size:16,strokeWidth:4,color:"black"})}),(0,n.jsx)(q,{type:"checkbox",checked:r,onChange:e=>{a(e.target.checked)}}),(0,n.jsx)(L,{children:t})]})})})({name:"Button",class:"b1in6eh3",propsAsIs:!0});t(11351);var T=t(20120),F=t(82359),O=t(66557);let R=(0,a.I)("div")({name:"Header",class:"h1pxftsm",propsAsIs:!1}),V=(0,a.I)("div")({name:"Wrapper",class:"w1h7eatl",propsAsIs:!1}),H=(0,a.I)(i.CS.button)({name:"Button",class:"b1q27bnp",propsAsIs:!0});t(77625);let X="hsl(350deg 100% 50%)",G="hsl(180deg 100% 40%)";function Y(){return(0,n.jsx)(N,{width:"79",height:"74",viewBox:"0 0 79 74",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{d:"M2 2.08341C27 -0.799743 20 72 77 72",stroke:"var(--color-main)",strokeWidth:"4",strokeLinecap:"round"})})}function Z(){return(0,n.jsx)(K,{width:"161",height:"47",viewBox:"0 0 161 47",fill:"none",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"none",children:(0,n.jsx)("path",{d:"M2 2.5C15.5 41.5 141.045 5.74074 159 45",stroke:"var(--color-fuse)",strokeWidth:"4",strokeLinecap:"round"})})}let U=(0,a.I)("div")({name:"Wrapper",class:"wq9sae1",propsAsIs:!1}),_=(0,a.I)("div")({name:"BombWrapper",class:"bzh0nim",propsAsIs:!1}),N=(0,a.I)("svg")({name:"MainSvg",class:"mq0ip3d",propsAsIs:!1}),K=(0,a.I)("svg")({name:"FuseSvg",class:"f39s78w",propsAsIs:!1}),J=(0,a.I)("div")({name:"Label",class:"ltqepyt",propsAsIs:!1}),Q=(0,a.I)(J)({name:"MainLabel",class:"m60lmxl",propsAsIs:!0}),$=(0,a.I)(J)({name:"FuseLabel",class:"fltuv9q",propsAsIs:!0});t(5405);var ee=t(99460);let es=(0,a.I)("div")({name:"Wrapper",class:"w1can9ee",propsAsIs:!1}),et=(0,a.I)("div")({name:"Col",class:"csc52ac",propsAsIs:!1}),en=(0,a.I)("div")({name:"Label",class:"l1u3dtcq",propsAsIs:!1}),er=(0,a.I)("div")({name:"Value",class:"v7zloin",propsAsIs:!1}),ea=function(e){let{values:s,minWidth:t="5rem"}=e;return(0,n.jsx)(es,{style:{"--min-width":t},children:s.map(e=>{let{value:s,label:t}=e;return(0,n.jsxs)(et,{children:[(0,n.jsx)(en,{children:t}),(0,n.jsx)(er,{children:s})]},t)})})};t(5705);let eo=(0,a.I)("div")({name:"Wrapper",class:"wnhldzt",propsAsIs:!1}),el=(0,a.I)("div")({name:"Graph",class:"gc79mpo",propsAsIs:!1}),ei=(0,a.I)("div")({name:"XAxis",class:"xmk5vaz",propsAsIs:!1}),ec=(0,a.I)("div")({name:"YAxis",class:"yb9ua59",propsAsIs:!1}),ep=(0,a.I)("button")({name:"Point",class:"p1uwgjd4",propsAsIs:!1}),ed=(0,a.I)("div")({name:"DashedLine",class:"d1g96ux0",propsAsIs:!1}),eu=(0,a.I)(ed)({name:"XDashedLine",class:"x1qd2wzl",propsAsIs:!0}),eh=(0,a.I)(ed)({name:"YDashedLine",class:"y1xzng1v",propsAsIs:!0}),em=(0,a.I)("div")({name:"Label",class:"lh9orn1",propsAsIs:!1}),ex=(0,a.I)(em)({name:"XLabel",class:"x1f3bn7u",propsAsIs:!0}),eg=(0,a.I)(em)({name:"YLabel",class:"youzgem",propsAsIs:!0}),ev=(0,a.I)("div")({name:"GridLines",class:"g1tgxkgl",propsAsIs:!1}),ew=function(e){let{size:s}=e,[t,a]=r.useState({x:110,y:-45}),[o,i]=r.useState(!1),c=r.useRef(null),p=(0,ee.A)(c,100),d=r.useCallback(e=>{if(!p)return;let t=-s/2,n=s/2;a({x:(0,k.qE)(Math.round(e.clientX-p.left-s/2),t,n),y:(0,k.qE)(Math.round(e.clientY-p.top-s/2),t,n)})},[p,s]);r.useEffect(()=>{if(o)return window.addEventListener("pointermove",e),window.addEventListener("pointerup",s),()=>{window.removeEventListener("pointermove",e),window.removeEventListener("pointerup",s)};function e(e){e.preventDefault(),d(e)}function s(){i(!1)}},[o,d]);let u=Math.abs(t.y)>140||Math.abs(t.x)>25,h=Math.abs(t.x)>140||Math.abs(t.y)>25;return(0,n.jsxs)(eo,{children:[(0,n.jsxs)(el,{ref:c,onPointerDown:e=>{e.preventDefault(),i(!0),d(e)},style:{width:s,height:s},children:[(0,n.jsx)(ev,{}),(0,n.jsx)(ec,{}),(0,n.jsx)(ei,{}),(0,n.jsx)(eu,{style:{width:Math.abs(t.x),top:(0,k.S8)(t.y,-s/2,s/2,0,s)-3,left:t.x>0?"50%":(0,k.S8)(t.x,-s/2,0,0,s/2)}}),(0,n.jsx)(eh,{style:{height:Math.abs(t.y),left:(0,k.S8)(t.x,-s/2,s/2,0,s)-3,top:t.y>0?"50%":(0,k.S8)(t.y,-s/2,0,0,s/2)}}),(0,n.jsx)(ex,{"data-flip-sides":t.y<0,style:{opacity:u?1:0,left:t.x>0?(0,k.S8)(t.x,0,s/2,.5*s,.75*s):(0,k.S8)(t.x,-s/2,0,.25*s,.5*s),top:(0,k.S8)(t.y,-s/2,s/2,0,s)-2},children:t.x}),(0,n.jsx)(eg,{"data-flip-sides":t.x<0,style:{opacity:h?1:0,top:t.y>0?(0,k.S8)(t.y,0,s/2,.5*s,.75*s):(0,k.S8)(t.y,-s/2,0,.25*s,.5*s),left:(0,k.S8)(t.x,-s/2,s/2,0,s)},children:t.y}),(0,n.jsx)(ep,{onKeyDown:e=>{"ArrowDown"===e.key?(e.preventDefault(),a({x:t.x,y:(0,k.qE)(t.y+5,-s/2,s/2)})):"ArrowUp"===e.key?(e.preventDefault(),a({x:t.x,y:(0,k.qE)(t.y-5,-s/2,s/2)})):"ArrowLeft"===e.key?(e.preventDefault(),a({x:(0,k.qE)(t.x-5,-s/2,s/2),y:t.y})):"ArrowRight"===e.key&&(e.preventDefault(),a({x:(0,k.qE)(t.x+5,-s/2,s/2),y:t.y}))},style:{transform:"translate(".concat(t.x,"px, ").concat(t.y,"px)")},children:(0,n.jsxs)(l.A,{children:["X: ",t.x,"px, Y: ",t.y,"px"]})})]}),(0,n.jsx)(ea,{minWidth:"6.875rem",values:[{value:t.x+"px",label:"X (Horizontal)"},{value:t.y+"px",label:"Y (Vertical)"}]})]})};function ef(e){let s=arguments.length>1&&void 0!==arguments[1]&&arguments[1],t=e*Math.PI/180,n=25+25*Math.cos(t),r=25+25*Math.sin(t),a=e>180?1:0;return s?"\n      M ".concat(25," ").concat(25,"\n      L ").concat(50," ").concat(25,"\n      A ").concat(25," ").concat(25," 0 ").concat(a," 1 ").concat(n," ").concat(r,"\n      Z\n    "):"\n      M ".concat(50," ").concat(25,"\n      A ").concat(25," ").concat(25," 0 ").concat(a," 1 ").concat(n," ").concat(r,"\n    ")}t(11641);let ej=(0,a.I)("div")({name:"Wrapper",class:"w1vazyie",propsAsIs:!1}),eb=(0,a.I)("div")({name:"Graph",class:"gjmslgd",propsAsIs:!1}),eI=(0,a.I)("div")({name:"GridLines",class:"gd5m87o",propsAsIs:!1}),ey=(0,a.I)("button")({name:"Point",class:"p1h0bkia",propsAsIs:!1}),ek=(0,a.I)("svg")({name:"Arc",class:"a1icn27q",propsAsIs:!1}),eA=(0,a.I)("div")({name:"DistanceLine",class:"dt83p75",propsAsIs:!1}),ez=(0,a.I)("div")({name:"Label",class:"lgp492z",propsAsIs:!1}),eC=(0,a.I)(ez)({name:"AngleLabel",class:"ae8w72x",propsAsIs:!0}),eM=(0,a.I)(ez)({name:"DistanceLabel",class:"d1et5kx8",propsAsIs:!0}),eq=function(e){let{size:s}=e,[t,a]=r.useState({angle:110,distance:125});r.useRef(t).current=t;let[o,i]=r.useState(!1),c=r.useRef(null),p=(0,ee.A)(c,100),d=r.useCallback(e=>{if(!p)return;let t=s/2,n=p.left+t,r=p.top+t,o=e.clientX-n,l=e.clientY-r,i=180/Math.PI*Math.atan2(l,o);i<0&&(i+=360),360===Math.round(i)&&(i=0),a({angle:Math.round(i),distance:Math.round(Math.min(Math.sqrt(o*o+l*l),t))})},[p,s]);r.useEffect(()=>{if(o)return window.addEventListener("pointermove",e),window.addEventListener("pointerup",s),()=>{window.removeEventListener("pointermove",e),window.removeEventListener("pointerup",s)};function e(e){e.preventDefault(),d(e)}function s(){i(!1)}},[o,d]);let u=t.angle*Math.PI/180,h=t.distance*Math.cos(u),m=t.distance*Math.sin(u),x=t.distance>25,g=x&&t.angle>20,v=t.distance>25,w=ef(t.angle,!0),f=ef(t.angle,!1);return(0,n.jsxs)(ej,{children:[(0,n.jsxs)(eb,{ref:c,onPointerDown:e=>{e.preventDefault(),i(!0),d(e)},style:{width:s,height:s,borderRadius:"50%"},children:[(0,n.jsx)(eI,{}),(0,n.jsxs)(ek,{viewBox:"0 0 50 50",width:50,height:50,xmlns:"http://www.w3.org/2000/svg",style:{opacity:x?1:0},children:[(0,n.jsx)("path",{d:w,fill:"hsl(var(--main-color-fragment) / 0.2)"}),(0,n.jsx)("path",{d:f,stroke:"hsl(var(--main-color-fragment) / 1)",strokeWidth:2,fill:"none"})]}),(0,n.jsx)(eA,{style:{width:t.distance,transform:"rotate(".concat(t.angle,"deg)")}}),(0,n.jsxs)(eC,{style:{opacity:g?1:0,transition:t.angle<10?"none":"opacity 250ms",transform:function(e){let s=(e<90?(0,k.S8)(e,0,90,-10,45):(0,k.S8)(e,90,360,45,270))*Math.PI/180,t=50*Math.cos(s),n=45*Math.sin(s);return"translate(-50%, -50%) translate(".concat(t-2,"px, ").concat(n,"px)")}(t.angle)},children:[t.angle,"\xb0"]}),(0,n.jsx)(eM,{style:{opacity:v?1:0,transform:function(e){let s=e.angle<270?10:-10,t=e.angle>90&&e.angle<270;return"\n    translate(-50%, -50%)\n    rotate(".concat(e.angle,"deg)\n    translate(").concat(e.distance/2,"px, ").concat(s,"px)\n    rotate(").concat(t?180:0,"deg)\n  ")}(t)},children:t.distance}),(0,n.jsx)(ey,{onKeyDown:e=>{"ArrowDown"===e.key?(e.preventDefault(),a({angle:t.angle,distance:Math.max(t.distance-5,0)})):"ArrowUp"===e.key?(e.preventDefault(),a({angle:t.angle,distance:Math.min(t.distance+5,s/2)})):"ArrowLeft"===e.key?(e.preventDefault(),a({angle:Math.max(t.angle-5,0),distance:t.distance})):"ArrowRight"===e.key&&(e.preventDefault(),a({angle:Math.min(t.angle+5,360),distance:t.distance}))},style:{transform:"translate(".concat(h,"px, ").concat(m,"px)")},children:(0,n.jsxs)(l.A,{children:["Distance: ",t.distance,"px, Angle: ",t.angle,"\xb0"]})})]}),(0,n.jsx)(ea,{values:[{value:t.angle+"\xb0",label:"Angle"},{value:t.distance+"px",label:"Distance"}]})]})};t(95780);let eL=(0,a.I)("div")({name:"Wrapper",class:"wbqksxv",propsAsIs:!1}),eS=(0,a.I)("div")({name:"Col",class:"cevuz94",propsAsIs:!1}),eW=(0,a.I)("h3")({name:"Heading",class:"h9ly9vq",propsAsIs:!1});t(39855);var eP=t(7660),eD=t(53740),eB=t(52209);let eE=(0,a.I)("div")({name:"Wrapper",class:"w9yuk8m",propsAsIs:!1}),eT=(0,a.I)("svg")({name:"Svg",class:"s1hl5xdc",propsAsIs:!1}),eF=(0,a.I)("g")({name:"EraserGroup",class:"e1pvv5x6",propsAsIs:!0}),eO=(0,a.I)(eB.A)({name:"Button",class:"b1qlqfpa",propsAsIs:!0});t(15329);var eR=t(82310);let eV=(0,t(37467).default)(()=>t.e(76615).then(t.bind(t,76615)),{loadableGenerated:{webpack:()=>[76615]}}),eH=(0,a.I)("div")({name:"Wrapper",class:"w8gqdxu",propsAsIs:!1});t(8455);let eX=(0,a.I)("div")({name:"Wrapper",class:"w117cwkv",propsAsIs:!1}),eG=(0,a.I)("img")({name:"Image",class:"i1s9hb7d",propsAsIs:!1}),eY=(0,a.I)("p")({name:"Disclaimer",class:"dth8w6c",propsAsIs:!1});t(90126);let eZ={a:[52,30],b:[88,30],c:[124,30],d:[163,30],e:[198,30]},eU=(0,a.I)("div")({name:"Wrapper",class:"wr6mma6",propsAsIs:!1}),e_=(0,a.I)("div")({name:"Ticks",class:"t1r760p6",propsAsIs:!1}),eN=(0,a.I)("div")({name:"Tick",class:"t1qfwu6x",propsAsIs:!1}),eK=(0,a.I)("input")({name:"Input",class:"i1r82ncc",propsAsIs:!1}),eJ=r.memo(function(e){let{mode:s,...t}=e,[a,o]=r.useState(.5),l=r.useId().replace(/:/g,""),[i]=(0,y.A)("/sounds/heavier-tick-sprite.mp3",{sprite:eZ,volume:.333});return(0,n.jsxs)(eU,{style:{"--value-as-percentage":100*a+"%"},...t,children:[(0,n.jsx)(e_,{children:(0,k.y1)(21).map(e=>(0,n.jsx)(eN,{},e))}),(0,n.jsx)(eK,{id:l,type:"range",value:a,min:"0",max:"1",step:"0.05",onChange:e=>{i({id:"single-sample"===s?"b":(0,k.Z6)(Object.keys(eZ))}),o(Number(e.target.value))}})]})});t(12143);let eQ=(0,a.I)("div")({name:"Wrapper",class:"w1wlslkw",propsAsIs:!1});t(46023);let e$={down1:[250,150],down2:[450,150],down3:[650,150],up1:[1050,150],up2:[1250,150],up3:[1450,150]},e0=(0,a.I)("div")({name:"Wrapper",class:"w1690fak",propsAsIs:!1}),e1=(0,a.I)("div")({name:"ButtonWell",class:"b1q02y6d",propsAsIs:!1}),e2=(0,a.I)("div")({name:"VisibleButton",class:"v1ub22q8",propsAsIs:!1}),e5=(0,a.I)("input")({name:"ActualRadioButton",class:"a9b3j8e",propsAsIs:!1}),e3=function(e){let{width:s,height:t,label:a,name:o,checked:i,...c}=e,p=r.useId().replace(/:/g,""),[d]=(0,y.A)("/sounds/rubber-button-sprite.mp3",{sprite:e$,volume:.5});return(0,n.jsxs)(e0,{"data-mass":3,"data-checked":String(i),style:{width:s,height:t},onPointerDown:()=>d({id:(0,k.Z6)(Object.keys(e$).slice(0,3))}),onPointerUp:()=>d({id:(0,k.Z6)(Object.keys(e$).slice(3))}),children:[(0,n.jsx)(e1,{children:(0,n.jsx)(e2,{})}),(0,n.jsx)(l.A,{children:(0,n.jsx)("label",{htmlFor:p,children:a})}),(0,n.jsx)(e5,{type:"radio",id:p,checked:i,name:o,...c})]})};t(13499);let e9=(0,a.I)("div")({name:"Wrapper",class:"w1h25yb2",propsAsIs:!1});t(83463);let e4={IconBoopDemo:b,EraserExplanation:function(){let[e,s]=r.useState(!0),[t,a]=r.useState(!1),[o,l]=r.useState(!1);return(0,n.jsxs)(S,{children:[(0,n.jsxs)(W,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,n.jsx)(P,{d:"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21",stroke:"var(--color-gray-200)"}),(0,n.jsx)(P,{d:"M22 21H3",stroke:"var(--color-gray-200)"}),(0,n.jsx)(P,{d:"m5 11 9 9",stroke:"var(--color-gray-200)"}),e&&(0,n.jsx)(D,{d:"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21",stroke:"var(--color-text)"}),t&&(0,n.jsx)(D,{d:"m5 11 9 9",stroke:"var(--color-text)"}),o&&(0,n.jsx)(D,{d:"M22 21H2",stroke:"var(--color-text)"})]}),(0,n.jsxs)(B,{children:[(0,n.jsx)(E,{color:"var(--color-first)",label:"Path A",isEnabled:e,onToggle:s}),(0,n.jsx)(E,{color:"var(--color-second)",label:"Path B",isEnabled:t,onToggle:a}),(0,n.jsx)(E,{color:"var(--color-third)",label:"Path C",isEnabled:o,onToggle:l})]})]})},BombExaggeration:function(){let[e,s]=r.useState(!0),[t,a]=r.useState(!1),o=r.useRef(null);r.useEffect(()=>{window.matchMedia("(prefers-reduced-motion: no-preference)").matches||s(!1)},[]);let l=(0,i.zh)({transform:"rotate(".concat(t?10:0,"deg)"),config:{tension:300,friction:10}});function c(){a(!0),o.current&&window.clearTimeout(o.current),o.current=window.setTimeout(()=>{a(!1)},150)}return(0,O.A)(c,e?1500:null),(0,n.jsx)(T.Ay,{id:"bomb-exaggeration",initialValues:{magnitude:50},outputWrapper:null,controls:[(0,n.jsx)(T.oP,{id:"magnitude",label:"Magnitude",min:0,max:130,step:5},"magnitude")],controlStyles:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},children:r=>{let{magnitude:a}=r;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(R,{children:(0,n.jsx)(F.A,{id:"autoplay",label:"Autoplay animation",value:e,setValue:e=>{s(e),e&&c()},handleFocusColor:null,handleColor:e?"var(--color-text)":"var(--color-gray-400)"})}),(0,n.jsx)(V,{children:(0,n.jsx)(H,{style:l,onMouseEnter:()=>{e||c()},onPointerDown:()=>{e||c()},onFocus:()=>{e||c()},children:(0,n.jsx)(h,{size:64,isBooped:t,boopRotation:a})})})]})}})},BombPivotDiagram:function(){return(0,n.jsxs)(U,{style:{"--color-main":X,"--color-fuse":G},children:[(0,n.jsx)(_,{children:(0,n.jsx)(h,{size:130,includePivotPoints:!0,mainPivotColor:X,fusePivotColor:G})}),(0,n.jsx)(Y,{}),(0,n.jsx)(Z,{}),(0,n.jsx)(Q,{children:"Main pivot point"}),(0,n.jsx)($,{children:"Fuse pivot point"})]})},CartesianVsPolar:function(){return(0,n.jsxs)(eL,{children:[(0,n.jsxs)(eS,{children:[(0,n.jsx)(eW,{children:"Cartesian Coordinates"}),(0,n.jsx)(ew,{size:300})]}),(0,n.jsxs)(eS,{children:[(0,n.jsx)(eW,{children:"Polar Coordinates"}),(0,n.jsx)(eq,{size:300})]})]})},EraserWiggle:function(){let[e,s]=r.useState(!0);return(0,n.jsxs)(eE,{children:[(0,n.jsxs)(eT,{xmlns:"http://www.w3.org/2000/svg",width:128,height:128,fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",viewBox:"0 0 24 24",children:[(0,n.jsxs)(eF,{style:{animationPlayState:e?"running":"paused"},children:[(0,n.jsx)("path",{d:"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"}),(0,n.jsx)("path",{d:"m5 11 9 9"})]}),(0,n.jsx)("path",{d:"M22 21H3"})]}),(0,n.jsx)(eO,{onClick:()=>s(!e),Icon:e?eP.A:eD.A,backgroundColor:"var(--color-btn-bg)",highlightColor:"var(--color-btn-highlight)",children:e?"Pause":"Play"})]})},SynthLayersDemo:function(){let e=(0,eR.A)(),s=1;return(null==e?void 0:e.width)&&e.width<544&&(s=1- -((e.width-544)*1)/512),(0,n.jsx)(T.Ay,{id:"synth-gradient-demo",initialValues:{layers:0},outputWrapper:null,controls:[(0,n.jsx)(T.oP,{id:"layers",label:"Layers",min:0,max:10,step:1},"layers")],controlStyles:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},children:e=>{let{layers:t}=e;return(0,n.jsx)(eH,{style:{transform:"scale(".concat(s,")")},children:(0,n.jsx)(eV,{layers:t})})}})},ShapesColorModeToggle:function(){return(0,n.jsx)(T.Ay,{id:"shapes-color-mode-toggle",initialValues:{colorMode:"srgb"},outputWrapper:null,controlPosition:"top",controls:[(0,n.jsx)(T.Cd,{id:"colorMode",label:"Color Mode",options:[{label:"sRGB",value:"srgb"},{label:"P3",value:"p3"}]},"colorMode"),,],controlStyles:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},children:e=>{let{colorMode:s}=e;return(0,n.jsxs)(eX,{children:[(0,n.jsx)(eG,{alt:"p3"===s?"Three of the abstract shapes from the landing page in vibrant P3 colors":"Three of the abstract shapes from the landing page, slightly washed out",src:"p3"===s?"/images/whimsical-animations/shapes-p3.png":"/images/whimsical-animations/shapes-srgb.png"}),(0,n.jsx)(eY,{children:"If the two images look the same to you, it’s likely because you’re not using a display that supports the P3 color space."})]})}})},SliderSFXDemo:function(){return(0,n.jsx)(T.Ay,{id:"slider-sfx-demo",initialValues:{mode:"single-sample"},outputWrapper:null,controlPosition:"top",controls:[(0,n.jsx)(T.Cd,{id:"mode",label:"Mode",options:[{label:"Single sample",value:"single-sample"},{label:"Multiple samples",value:"multi-samples"}]},"mode"),,],controlStyles:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},children:e=>{let{mode:s}=e;return(0,n.jsx)(eQ,{children:(0,n.jsx)(eJ,{mode:s})})}})},ButtonPushDemo:function(){let[e,s]=r.useState(null);return(0,n.jsx)(T.Ay,{id:"button-push-demo",initialValues:{},outputWrapper:null,children:t=>{let{}=t;return(0,n.jsx)(e9,{children:(0,k.y1)(4).map(t=>(0,n.jsx)(e3,{name:"waveform",label:"Example Button",width:64,height:64,checked:e===t,onChange:()=>{s(t)}},t))})}})}};function e6(e){let s=e4[e.variant];return(0,n.jsx)(s,{...e})}},52391:e=>{e.exports={w19mrn5v:"w19mrn5v",c1rpf4ut:"c1rpf4ut",iwv8n0j:"iwv8n0j",i1qpbbb9:"i1qpbbb9",i1m1cbkp:"i1m1cbkp",c7sw782:"c7sw782"}},77625:e=>{e.exports={h1pxftsm:"h1pxftsm",w1h7eatl:"w1h7eatl",b1q27bnp:"b1q27bnp"}},5405:e=>{e.exports={wq9sae1:"wq9sae1",bzh0nim:"bzh0nim",mq0ip3d:"mq0ip3d",f39s78w:"f39s78w",ltqepyt:"ltqepyt",m60lmxl:"m60lmxl",fltuv9q:"fltuv9q"}},83463:e=>{e.exports={w1h25yb2:"w1h25yb2"}},13499:e=>{e.exports={w1690fak:"w1690fak",b1q02y6d:"b1q02y6d",v1ub22q8:"v1ub22q8",a9b3j8e:"a9b3j8e"}},11641:e=>{e.exports={wnhldzt:"wnhldzt",gc79mpo:"gc79mpo",xmk5vaz:"xmk5vaz",yb9ua59:"yb9ua59",p1uwgjd4:"p1uwgjd4",d1g96ux0:"d1g96ux0",x1qd2wzl:"x1qd2wzl",y1xzng1v:"y1xzng1v",lh9orn1:"lh9orn1",x1f3bn7u:"x1f3bn7u",youzgem:"youzgem",g1tgxkgl:"g1tgxkgl"}},39855:e=>{e.exports={wbqksxv:"wbqksxv",cevuz94:"cevuz94",h9ly9vq:"h9ly9vq"}},5705:e=>{e.exports={w1can9ee:"w1can9ee",csc52ac:"csc52ac",l1u3dtcq:"l1u3dtcq",v7zloin:"v7zloin"}},95780:e=>{e.exports={w1vazyie:"w1vazyie",gjmslgd:"gjmslgd",gd5m87o:"gd5m87o",p1h0bkia:"p1h0bkia",a1icn27q:"a1icn27q",dt83p75:"dt83p75",lgp492z:"lgp492z",ae8w72x:"ae8w72x",d1et5kx8:"d1et5kx8"}},8671:e=>{e.exports={w1bbbz0l:"w1bbbz0l",fmmddfn:"fmmddfn",p2uqtol:"p2uqtol",hnr4spm:"hnr4spm",l1oi6ts5:"l1oi6ts5"}},11351:e=>{e.exports={wujny8:"wujny8",shftdbl:"shftdbl",s7nqz7f:"s7nqz7f",b32sw2i:"b32sw2i","fadeFromBright-b32sw2i":"fadeFromBright-b32sw2i",fadeFromTransparent:"fadeFromTransparent",a1kd9b3l:"a1kd9b3l",b1in6eh3:"b1in6eh3"}},15329:e=>{e.exports={w9yuk8m:"w9yuk8m",s1hl5xdc:"s1hl5xdc",e1pvv5x6:"e1pvv5x6","wiggle-e1pvv5x6":"wiggle-e1pvv5x6",b1qlqfpa:"b1qlqfpa"}},47693:e=>{e.exports={swatygt:"swatygt"}},48137:e=>{e.exports={w1h7524q:"w1h7524q"}},38130:e=>{e.exports={s17be3er:"s17be3er"}},40501:e=>{e.exports={i5e2apv:"i5e2apv",b9bkmsg:"b9bkmsg","slideIn-b9bkmsg":"slideIn-b9bkmsg"}},90126:e=>{e.exports={w117cwkv:"w117cwkv",i1s9hb7d:"i1s9hb7d",dth8w6c:"dth8w6c"}},46023:e=>{e.exports={w1wlslkw:"w1wlslkw"}},12143:e=>{e.exports={wr6mma6:"wr6mma6",t1r760p6:"t1r760p6",t1qfwu6x:"t1qfwu6x",i1r82ncc:"i1r82ncc"}},8455:e=>{e.exports={w8gqdxu:"w8gqdxu"}}}]);
//# sourceMappingURL=92951.16fdd060b8234110.js.map