(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[24360],{42282:(e,s,r)=>{"use strict";r.d(s,{Z:()=>i});var t=r(79477),n=r(74631),l=r(87740);let o=e=>e instanceof MouseEvent,i=function(e){let{buffer:s=0,throttleBy:r=18,excludeTouchEvents:i,onEnterBox:c,onLeaveBox:d}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=(0,l.Z)(e),[a,h]=t.useState({x:null,y:null}),v=t.useRef(!1),p=t.useRef(c),f=t.useRef(d);return p.current=c,f.current=d,t.useEffect(()=>{let e=p.current,t=f.current,l=r=>{o(r)&&(r.preventDefault(),r.stopPropagation());let{clientX:n,clientY:l}=r;if(!u)return;if(!(n>=u.left-s&&n<=u.left+u.width+s&&l>=u.top-s&&l<=u.top+u.height+s)){v.current&&"function"==typeof t&&t(),v.current=!1;return}v.current||("function"==typeof e&&e(),v.current=!0);let i={x:n-u.left,y:l-u.top};v.current=!0,h(i)},[c,d]=(0,n.Ep)(l,r),[a,x]=(0,n.Ep)(e=>{l(e.touches[0])},r);return window.addEventListener("mousemove",c),i||window.addEventListener("touchmove",a),()=>{window.removeEventListener("mousemove",c),d(),i||(window.removeEventListener("touchmove",a),x())}},[u,s,r,i]),[a,u]}},24360:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>y});var t=r(67841),n=r(79477),l=r(64833),o=r(82375),i=r.n(o),c=r(74631),d=r(42282),u=r(76955);let a=(0,l.z)("div")({name:"Wrapper",class:"w1y7nvoh",propsAsIs:!1}),h=(0,l.z)("div")({name:"Row",class:"r1xuh1hb",propsAsIs:!1}),v=(0,l.z)("div")({name:"Key",class:"k67s48q",propsAsIs:!1}),p=function(e){let{color:s,colorMode:r}=e;return"hsl"===r?(0,t.jsxs)(a,{children:[(0,t.jsxs)(h,{children:[(0,t.jsx)(v,{children:"HUE:"})," ",Math.round(s.get("hsl.h"))]}),(0,t.jsxs)(h,{children:[(0,t.jsx)(v,{children:"SAT:"})," ",Math.round(100*s.get("hsl.s"))]}),(0,t.jsxs)(h,{children:[(0,t.jsx)(v,{children:"LIT:"})," ",Math.round(100*s.get("hsl.l"))]})]}):"hcl"===r?(0,t.jsxs)(a,{children:[(0,t.jsxs)(h,{children:[(0,t.jsx)(v,{children:"H:"})," ",Math.round(s.get("hcl.h"))]}),(0,t.jsxs)(h,{children:[(0,t.jsx)(v,{children:"C:"})," ",Math.round(100*s.get("hcl.c"))]}),(0,t.jsxs)(h,{children:[(0,t.jsx)(v,{children:"L:"})," ",Math.round(100*s.get("hcl.l"))]})]}):(0,t.jsxs)(a,{children:[(0,t.jsxs)(h,{children:[(0,t.jsx)(v,{children:"R:"})," ",s.get("rgb.r")]}),(0,t.jsxs)(h,{children:[(0,t.jsx)(v,{children:"G:"})," ",s.get("rgb.g")]}),(0,t.jsxs)(h,{children:[(0,t.jsx)(v,{children:"B:"})," ",s.get("rgb.b")]})]})};r(13262);let f=(0,l.z)("div")({name:"Wrapper",class:"w1r66lnd",propsAsIs:!1}),x=(0,l.z)("div")({name:"BarWrapper",class:"busge9z",propsAsIs:!1}),w=(0,l.z)("div")({name:"IndicatorPipe",class:"i15704yz",propsAsIs:!1}),m=(0,l.z)("div")({name:"IndicatorWrapper",class:"i1vg66il",propsAsIs:!1}),j=(0,l.z)("button")({name:"ColorPreview",class:"c1skvvd3",propsAsIs:!1}),g=(0,l.z)("div")({name:"Bar",class:"b1ltaklf",propsAsIs:!1}),b=(0,l.z)("div")({name:"BreakdownWrapper",class:"b1xflxhw",propsAsIs:!1}),y=function(e){let{from:s,to:r,colorMode:l="rgb"}=e,o=n.useRef(),[a,h]=n.useState(0),[v,y]=n.useState(!1),E=(0,u.Z)(),[k,z]=(0,d.Z)(o,{buffer:100});function A(e){e.preventDefault(),y(!0)}n.useEffect(()=>{if(!v||!k||!z)return;let e=k.x/z.width*100;h((0,c.uZ)(e,0,100))},[v,k,z]),n.useEffect(()=>{function e(e){y(!1)}return v&&(window.addEventListener("mouseup",e),window.addEventListener("touchend",e),document.addEventListener("mouseleave",e)),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("touchend",e),document.removeEventListener("mouseleave",e)}},[v]);let I=i().scale([s,r]).mode(l).colors(20),L="to right, ".concat(I.join(", ")),M=z?(0,c.Fv)(a,0,100,0,z.width):0;(null==E?void 0:E.width)<800&&z&&(M=(0,c.uZ)(M,50,z.width-50+6));let Z=z?(0,c.Fv)(a,0,100,6,z.width):6,R=i().mix(s,r,a/100,l),D=a>((null==E?void 0:E.width)<800?60:85)?{left:0,transform:"translateX(calc(-100% - 16px))"}:{left:"calc(100% + 16px)"};return(0,t.jsxs)(f,{children:[E&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(m,{style:{left:M},children:[(0,t.jsx)(j,{style:{backgroundColor:R.hex()},onKeyDown:function(e,s){if(e.key.match(/^Arrow/))switch(e.preventDefault(),e.key){case"ArrowLeft":h(e=>(0,c.uZ)(e-5,0,100));return;case"ArrowRight":h(e=>(0,c.uZ)(e+5,0,100));return}},onMouseDown:A,onTouchStart:A}),(0,t.jsx)(b,{style:D,children:(0,t.jsx)(p,{color:R,colorMode:l})})]}),(0,t.jsx)(w,{style:{left:Z}})]}),(0,t.jsx)(x,{children:(0,t.jsx)(g,{ref:o,style:{backgroundImage:"linear-gradient(".concat(L,")")},onMouseDown:A,onTouchStart:A})})]})};r(34734)},13262:e=>{e.exports={w1y7nvoh:"w1y7nvoh",r1xuh1hb:"r1xuh1hb",k67s48q:"k67s48q"}},34734:e=>{e.exports={w1r66lnd:"w1r66lnd",busge9z:"busge9z",i15704yz:"i15704yz",i1vg66il:"i1vg66il",c1skvvd3:"c1skvvd3",b1ltaklf:"b1ltaklf",b1xflxhw:"b1xflxhw"}}}]);
//# sourceMappingURL=24360.73420ce70198aa2f.js.map