reacthub-pixitweenjs 0.2.107-alpha.113 → 0.2.107-alpha.114

package/dist/index.es.js

@@ -13089,7 +13089,9 @@ const Sketch$1 = Sketch, ColorPickerPortal = ({
     isTextEditMode: Fe,
     handleDragFontSize: ke,
     handleDragWordWrap: Ge
-  } = C, {
+  } = C;
+  console.log("AbstractContainer", C);
+  const {
     x: Be = 0,
     y: qe = 0,
     width: Ke,
@@ -13112,7 +13114,7 @@ const Sketch$1 = Sketch, ColorPickerPortal = ({
     [U, V]
   ), React.useEffect(() => {
     xe.current && B(!0);
-  }, []), React.useEffect(() => {
+  }, [Me]), React.useEffect(() => {
     K({
       x: Be,
       y: qe,
@@ -13122,7 +13124,7 @@ const Sketch$1 = Sketch, ColorPickerPortal = ({
       maxX: Pe,
       maxY: Ie
     });
-  }, [nt, Be, qe, Ke, Ye, Pe, Ie]), React.useEffect(() => {
+  }, [Me, nt, Be, qe, Ke, Ye, Pe, Ie]), React.useEffect(() => {
     if (!Z.current)
       return;
     const ct = gsap$2.context(() => {

package/dist/index.umd.js

@@ -1921,7 +1921,7 @@ void main() {
 
     gl_FragColor = color;
 }
-`,i=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,c=(C,E)=>{var I={};for(var B in C)d.call(C,B)&&E.indexOf(B)<0&&(I[B]=C[B]);if(C!=null&&i)for(var B of i(C))E.indexOf(B)<0&&f.call(C,B)&&(I[B]=C[B]);return I};const a=class extends Filter{constructor(C){const E=Object.assign(a.defaults,C),{maxKernelSize:I}=E,B=c(E,["maxKernelSize"]);super(l,u.replace("${maxKernelSize}",I.toFixed(1))),Object.assign(this,B)}get center(){return this.uniforms.uCenter}set center(C){this.uniforms.uCenter=C}get strength(){return this.uniforms.uStrength}set strength(C){this.uniforms.uStrength=C}get innerRadius(){return this.uniforms.uInnerRadius}set innerRadius(C){this.uniforms.uInnerRadius=C}get radius(){return this.uniforms.uRadius}set radius(C){(C<0||C===1/0)&&(C=-1),this.uniforms.uRadius=C}};let o=a;o.defaults={strength:.1,center:[0,0],innerRadius:0,radius:-1,maxKernelSize:32};function _extends(){return _extends=Object.assign?Object.assign.bind():function(C){for(var E=1;E<arguments.length;E++){var I=arguments[E];for(var B in I)Object.prototype.hasOwnProperty.call(I,B)&&(C[B]=I[B])}return C},_extends.apply(this,arguments)}function _objectWithoutPropertiesLoose(C,E){if(C==null)return{};var I={},B=Object.keys(C),U,V;for(V=0;V<B.length;V++)U=B[V],!(E.indexOf(U)>=0)&&(I[U]=C[U]);return I}var RGB_MAX=255,SV_MAX=100,rgbaToHsva=C=>{var{r:E,g:I,b:B,a:U}=C,V=Math.max(E,I,B),X=V-Math.min(E,I,B),Y=X?V===E?(I-B)/X:V===I?2+(B-E)/X:4+(E-I)/X:0;return{h:60*(Y<0?Y+6:Y),s:V?X/V*SV_MAX:0,v:V/RGB_MAX*SV_MAX,a:U}},hsvaToHslaString=C=>{var{h:E,s:I,l:B,a:U}=hsvaToHsla(C);return"hsla("+E+", "+I+"%, "+B+"%, "+U+")"},hsvaToHsla=C=>{var{h:E,s:I,v:B,a:U}=C,V=(200-I)*B/SV_MAX;return{h:E,s:V>0&&V<200?I*B/SV_MAX/(V<=SV_MAX?V:200-V)*SV_MAX:0,l:V/2,a:U}},rgbaToHex$1=C=>{var{r:E,g:I,b:B}=C,U=E<<16|I<<8|B;return"#"+(V=>new Array(7-V.length).join("0")+V)(U.toString(16))},rgbaToHexa=C=>{var{r:E,g:I,b:B,a:U}=C,V=typeof U=="number"&&(U*255|256).toString(16).slice(1);return""+rgbaToHex$1({r:E,g:I,b:B,a:U})+(V||"")},hexToHsva=C=>rgbaToHsva(hexToRgba(C)),hexToRgba=C=>{var E=C.replace("#","");/^#?/.test(C)&&E.length===3&&(C="#"+E.charAt(0)+E.charAt(0)+E.charAt(1)+E.charAt(1)+E.charAt(2)+E.charAt(2));var I=new RegExp("[A-Za-z0-9]{2}","g"),[B,U,V=0,X]=C.match(I).map(Y=>parseInt(Y,16));return{r:B,g:U,b:V,a:(X??255)/RGB_MAX}},hsvaToRgba=C=>{var{h:E,s:I,v:B,a:U}=C,V=E/60,X=I/SV_MAX,Y=B/SV_MAX,K=Math.floor(V)%6,J=V-Math.floor(V),xe=RGB_MAX*Y*(1-X),Z=RGB_MAX*Y*(1-X*J),_e=RGB_MAX*Y*(1-X*(1-J));Y*=RGB_MAX;var Se={};switch(K){case 0:Se.r=Y,Se.g=_e,Se.b=xe;break;case 1:Se.r=Z,Se.g=Y,Se.b=xe;break;case 2:Se.r=xe,Se.g=Y,Se.b=_e;break;case 3:Se.r=xe,Se.g=Z,Se.b=Y;break;case 4:Se.r=_e,Se.g=xe,Se.b=Y;break;case 5:Se.r=Y,Se.g=xe,Se.b=Z;break}return Se.r=Math.round(Se.r),Se.g=Math.round(Se.g),Se.b=Math.round(Se.b),_extends({},Se,{a:U})},hsvaToRgbaString=C=>{var{r:E,g:I,b:B,a:U}=hsvaToRgba(C);return"rgba("+E+", "+I+", "+B+", "+U+")"},rgbaToRgb=C=>{var{r:E,g:I,b:B}=C;return{r:E,g:I,b:B}},hslaToHsl=C=>{var{h:E,s:I,l:B}=C;return{h:E,s:I,l:B}},hsvaToHex=C=>rgbaToHex$1(hsvaToRgba(C)),hsvaToHsv=C=>{var{h:E,s:I,v:B}=C;return{h:E,s:I,v:B}},rgbToXY=C=>{var{r:E,g:I,b:B}=C,U=function(xe){return xe<=.04045?xe/12.92:Math.pow((xe+.055)/1.055,2.4)},V=U(E/255),X=U(I/255),Y=U(B/255),K={};return K.x=V*.4124+X*.3576+Y*.1805,K.y=V*.2126+X*.7152+Y*.0722,K.bri=V*.0193+X*.1192+Y*.9505,K},color=C=>{var E,I,B,U,V,X,Y,K,J;return typeof C=="string"&&validHex$1(C)?(X=hexToHsva(C),K=C):typeof C!="string"&&(X=C),X&&(B=hsvaToHsv(X),V=hsvaToHsla(X),U=hsvaToRgba(X),J=rgbaToHexa(U),K=hsvaToHex(X),I=hslaToHsl(V),E=rgbaToRgb(U),Y=rgbToXY(E)),{rgb:E,hsl:I,hsv:B,rgba:U,hsla:V,hsva:X,hex:K,hexa:J,xy:Y}},validHex$1=C=>/^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(C);function useEventCallback$1(C){var E=React.useRef(C);return React.useEffect(()=>{E.current=C}),React.useCallback((I,B)=>E.current&&E.current(I,B),[])}var isTouch=C=>"touches"in C,preventDefaultMove=C=>{!isTouch(C)&&C.preventDefault&&C.preventDefault()},clamp=function(E,I,B){return I===void 0&&(I=0),B===void 0&&(B=1),E>B?B:E<I?I:E},getRelativePosition=(C,E)=>{var I=C.getBoundingClientRect(),B=isTouch(E)?E.touches[0]:E;return{left:clamp((B.pageX-(I.left+window.pageXOffset))/I.width),top:clamp((B.pageY-(I.top+window.pageYOffset))/I.height),width:I.width,height:I.height,x:B.pageX-(I.left+window.pageXOffset),y:B.pageY-(I.top+window.pageYOffset)}},_excluded$8=["prefixCls","className","onMove","onDown"],Interactive=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-interactive",className:B,onMove:U,onDown:V}=C,X=_objectWithoutPropertiesLoose(C,_excluded$8),Y=React.useRef(null),K=React.useRef(!1),[J,xe]=React.useState(!1),Z=useEventCallback$1(U),_e=useEventCallback$1(V),Se=we=>K.current&&!isTouch(we)?!1:(K.current=isTouch(we),!0),Ee=React.useCallback(we=>{preventDefaultMove(we);var Pe=isTouch(we)?we.touches.length>0:we.buttons>0;Pe&&Y.current?Z&&Z(getRelativePosition(Y.current,we),we):xe(!1)},[Z]),Ae=React.useCallback(()=>xe(!1),[]),Re=React.useCallback(we=>{var Pe=we?window.addEventListener:window.removeEventListener;Pe(K.current?"touchmove":"mousemove",Ee),Pe(K.current?"touchend":"mouseup",Ae)},[]);React.useEffect(()=>(Re(J),()=>{J&&Re(!1)}),[J,Re]);var Te=React.useCallback(we=>{preventDefaultMove(we.nativeEvent),Se(we.nativeEvent)&&(_e&&_e(getRelativePosition(Y.current,we.nativeEvent),we.nativeEvent),xe(!0))},[_e]);return jsxRuntimeExports.jsx("div",_extends({},X,{className:[I,B||""].filter(Boolean).join(" "),style:_extends({},X.style,{touchAction:"none"}),ref:Y,tabIndex:0,onMouseDown:Te,onTouchStart:Te}))});Interactive.displayName="Interactive";const Interactive$1=Interactive;var Pointer$1=C=>{var{className:E,color:I,left:B,top:U,prefixCls:V}=C,X={position:"absolute",top:U,left:B},Y={"--saturation-pointer-box-shadow":"rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px",width:6,height:6,transform:"translate(-3px, -3px)",boxShadow:"var(--saturation-pointer-box-shadow)",borderRadius:"50%",backgroundColor:I};return React.useMemo(()=>jsxRuntimeExports.jsx("div",{className:V+"-pointer "+(E||""),style:X,children:jsxRuntimeExports.jsx("div",{className:V+"-fill",style:Y})}),[U,B,I,E,V])},_excluded$7=["prefixCls","radius","pointer","className","hue","style","hsva","onChange"],Saturation=React.forwardRef((C,E)=>{var I,{prefixCls:B="w-color-saturation",radius:U=0,pointer:V,className:X,hue:Y=0,style:K,hsva:J,onChange:xe}=C,Z=_objectWithoutPropertiesLoose(C,_excluded$7),_e=_extends({width:200,height:200,borderRadius:U},K,{position:"relative"}),Se=(Ae,Re)=>{xe&&J&&xe({h:J.h,s:Ae.left*100,v:(1-Ae.top)*100,a:J.a})},Ee=React.useMemo(()=>{if(!J)return null;var Ae={top:100-J.v+"%",left:J.s+"%",color:hsvaToHslaString(J)};return V&&typeof V=="function"?V(_extends({prefixCls:B},Ae)):jsxRuntimeExports.jsx(Pointer$1,_extends({prefixCls:B},Ae))},[J,V,B]);return jsxRuntimeExports.jsx(Interactive$1,_extends({className:[B,X||""].filter(Boolean).join(" ")},Z,{style:_extends({position:"absolute",inset:0,cursor:"crosshair",backgroundImage:"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl("+((I=J==null?void 0:J.h)!=null?I:Y)+", 100%, 50%))"},_e),ref:E,onMove:Se,onDown:Se,children:Ee}))});Saturation.displayName="Saturation";const Saturation$1=Saturation;var _excluded$6=["className","prefixCls","left","top","style","fillProps"],Pointer=C=>{var{className:E,prefixCls:I,left:B,top:U,style:V,fillProps:X}=C,Y=_objectWithoutPropertiesLoose(C,_excluded$6),K=_extends({},V,{position:"absolute",left:B,top:U}),J=_extends({width:18,height:18,boxShadow:"var(--alpha-pointer-box-shadow)",borderRadius:"50%",backgroundColor:"var(--alpha-pointer-background-color)"},X==null?void 0:X.style,{transform:B?"translate(-9px, -1px)":"translate(-1px, -9px)"});return jsxRuntimeExports.jsx("div",_extends({className:I+"-pointer "+(E||""),style:K},Y,{children:jsxRuntimeExports.jsx("div",_extends({className:I+"-fill"},X,{style:J}))}))},_excluded$5=["prefixCls","className","hsva","background","bgProps","innerProps","pointerProps","radius","width","height","direction","style","onChange","pointer"],BACKGROUND_IMG="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==",Alpha=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-alpha",className:B,hsva:U,background:V,bgProps:X={},innerProps:Y={},pointerProps:K={},radius:J=0,width:xe,height:Z=16,direction:_e="horizontal",style:Se,onChange:Ee,pointer:Ae}=C,Re=_objectWithoutPropertiesLoose(C,_excluded$5),Te=Le=>{Ee&&Ee(_extends({},U,{a:_e==="horizontal"?Le.left:Le.top}),Le)},we=hsvaToHslaString(Object.assign({},U,{a:1})),Pe="linear-gradient(to "+(_e==="horizontal"?"right":"bottom")+", rgba(244, 67, 54, 0) 0%, "+we+" 100%)",Ie={};_e==="horizontal"?Ie.left=U.a*100+"%":Ie.top=U.a*100+"%";var Me=_extends({"--alpha-background-color":"#fff","--alpha-pointer-background-color":"rgb(248, 248, 248)","--alpha-pointer-box-shadow":"rgb(0 0 0 / 37%) 0px 1px 4px 0px",borderRadius:J,background:"url("+BACKGROUND_IMG+") left center",backgroundColor:"var(--alpha-background-color)"},{width:xe,height:Z},Se,{position:"relative"}),Oe=Ae&&typeof Ae=="function"?Ae(_extends({prefixCls:I},K,Ie)):jsxRuntimeExports.jsx(Pointer,_extends({},K,{prefixCls:I},Ie));return jsxRuntimeExports.jsxs("div",_extends({},Re,{className:[I,I+"-"+_e,B||""].filter(Boolean).join(" "),style:Me,ref:E,children:[jsxRuntimeExports.jsx("div",_extends({},X,{style:_extends({inset:0,position:"absolute",background:V||Pe,borderRadius:J},X.style)})),jsxRuntimeExports.jsx(Interactive$1,_extends({},Y,{style:_extends({},Y.style,{inset:0,zIndex:1,position:"absolute"}),onMove:Te,onDown:Te,children:Oe}))]}))});Alpha.displayName="Alpha";const Alpha$1=Alpha;var _excluded$4=["prefixCls","placement","label","value","className","style","labelStyle","inputStyle","onChange","onBlur"],validHex=C=>/^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(C),getNumberValue=C=>Number(String(C).replace(/%/g,"")),EditableInput=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-editable-input",placement:B="bottom",label:U,value:V,className:X,style:Y,labelStyle:K,inputStyle:J,onChange:xe,onBlur:Z}=C,_e=_objectWithoutPropertiesLoose(C,_excluded$4),[Se,Ee]=React.useState(V),Ae=React.useRef(!1);React.useEffect(()=>{C.value!==Se&&(Ae.current||Ee(C.value))},[C.value]);function Re(Me,Oe){var Le=(Oe||Me.target.value).trim().replace(/^#/,"");validHex(Le)&&xe&&xe(Me,Le);var De=getNumberValue(Le);isNaN(De)||xe&&xe(Me,De),Ee(Le)}function Te(Me){Ae.current=!1,Ee(C.value),Z&&Z(Me)}var we={};B==="bottom"&&(we.flexDirection="column"),B==="top"&&(we.flexDirection="column-reverse"),B==="left"&&(we.flexDirection="row-reverse");var Pe=_extends({"--editable-input-label-color":"rgb(153, 153, 153)","--editable-input-box-shadow":"rgb(204 204 204) 0px 0px 0px 1px inset","--editable-input-color":"#666",position:"relative",alignItems:"center",display:"flex",fontSize:11},we,Y),Ie=_extends({width:"100%",paddingTop:2,paddingBottom:2,paddingLeft:3,paddingRight:3,fontSize:11,background:"transparent",boxSizing:"border-box",border:"none",color:"var(--editable-input-color)",boxShadow:"var(--editable-input-box-shadow)"},J);return jsxRuntimeExports.jsxs("div",{className:[I,X||""].filter(Boolean).join(" "),style:Pe,children:[jsxRuntimeExports.jsx("input",_extends({ref:E,value:Se,onChange:Re,onBlur:Te,autoComplete:"off",onFocus:()=>Ae.current=!0},_e,{style:Ie})),U&&jsxRuntimeExports.jsx("span",{style:_extends({color:"var(--editable-input-label-color)",textTransform:"capitalize"},K),children:U})]})});EditableInput.displayName="EditableInput";const EditableInput$1=EditableInput;var _excluded$3=["prefixCls","hsva","placement","rProps","gProps","bProps","aProps","className","style","onChange"],EditableInputRGBA=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-editable-input-rgba",hsva:B,placement:U="bottom",rProps:V={},gProps:X={},bProps:Y={},aProps:K={},className:J,style:xe,onChange:Z}=C,_e=_objectWithoutPropertiesLoose(C,_excluded$3),Se=B?hsvaToRgba(B):{};function Ee(Re){var Te=Number(Re.target.value);Te&&Te>255&&(Re.target.value="255"),Te&&Te<0&&(Re.target.value="0")}var Ae=(Re,Te,we)=>{typeof Re=="number"&&(Te==="a"&&(Re<0&&(Re=0),Re>100&&(Re=100),Z&&Z(color(rgbaToHsva(_extends({},Se,{a:Re/100}))))),Re>255&&(Re=255,we.target.value="255"),Re<0&&(Re=0,we.target.value="0"),Te==="r"&&Z&&Z(color(rgbaToHsva(_extends({},Se,{r:Re})))),Te==="g"&&Z&&Z(color(rgbaToHsva(_extends({},Se,{g:Re})))),Te==="b"&&Z&&Z(color(rgbaToHsva(_extends({},Se,{b:Re})))))};return jsxRuntimeExports.jsxs("div",_extends({ref:E,className:[I,J||""].filter(Boolean).join(" ")},_e,{style:_extends({fontSize:11,display:"flex"},xe),children:[jsxRuntimeExports.jsx(EditableInput$1,_extends({label:"R",value:Se.r||0,onBlur:Ee,placement:U,onChange:(Re,Te)=>Ae(Te,"r",Re)},V,{style:_extends({},V.style)})),jsxRuntimeExports.jsx(EditableInput$1,_extends({label:"G",value:Se.g||0,onBlur:Ee,placement:U,onChange:(Re,Te)=>Ae(Te,"g",Re)},X,{style:_extends({marginLeft:5},V.style)})),jsxRuntimeExports.jsx(EditableInput$1,_extends({label:"B",value:Se.b||0,onBlur:Ee,placement:U,onChange:(Re,Te)=>Ae(Te,"b",Re)},Y,{style:_extends({marginLeft:5},Y.style)})),K&&jsxRuntimeExports.jsx(EditableInput$1,_extends({label:"A",value:Se.a?parseInt(String(Se.a*100),10):0,onBlur:Ee,placement:U,onChange:(Re,Te)=>Ae(Te,"a",Re)},K,{style:_extends({marginLeft:5},K.style)}))]}))});EditableInputRGBA.displayName="EditableInputRGBA";const RGBA=EditableInputRGBA;var _excluded$2=["prefixCls","className","hue","onChange","direction"],Hue=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-hue",className:B,hue:U=0,onChange:V,direction:X="horizontal"}=C,Y=_objectWithoutPropertiesLoose(C,_excluded$2);return jsxRuntimeExports.jsx(Alpha$1,_extends({ref:E,className:I+" "+(B||"")},Y,{direction:X,background:"linear-gradient(to "+(X==="horizontal"?"right":"bottom")+", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",hsva:{h:U,s:100,v:100,a:U/360},onChange:(K,J)=>{V&&V({h:X==="horizontal"?360*J.left:360*J.top})}}))});Hue.displayName="Hue";const Hue$1=Hue;var _excluded$1=["prefixCls","className","color","colors","style","rectProps","onChange","addonAfter","addonBefore","rectRender"],Swatch=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-swatch",className:B,color:U,colors:V=[],style:X,rectProps:Y={},onChange:K,addonAfter:J,addonBefore:xe,rectRender:Z}=C,_e=_objectWithoutPropertiesLoose(C,_excluded$1),Se=_extends({"--swatch-background-color":"rgb(144, 19, 254)",background:"var(--swatch-background-color)",height:15,width:15,marginRight:5,marginBottom:5,cursor:"pointer",position:"relative",outline:"none",borderRadius:2},Y.style),Ee=(Ae,Re)=>{K&&K(hexToHsva(Ae),color(hexToHsva(Ae)),Re)};return jsxRuntimeExports.jsxs("div",_extends({ref:E},_e,{className:[I,B||""].filter(Boolean).join(" "),style:_extends({display:"flex",flexWrap:"wrap",position:"relative"},X),children:[xe&&React.isValidElement(xe)&&xe,V&&Array.isArray(V)&&V.map((Ae,Re)=>{var Te="",we="";typeof Ae=="string"&&(Te=Ae,we=Ae),typeof Ae=="object"&&Ae.color&&(Te=Ae.title||Ae.color,we=Ae.color);var Pe=U&&U.toLocaleLowerCase()===we.toLocaleLowerCase(),Ie=Z&&Z({title:Te,color:we,checked:!!Pe,style:_extends({},Se,{background:we}),onClick:Oe=>Ee(we,Oe)});if(Ie)return jsxRuntimeExports.jsx(React.Fragment,{children:Ie},Re);var Me=Y.children&&React.isValidElement(Y.children)?React.cloneElement(Y.children,{color:we,checked:Pe}):null;return jsxRuntimeExports.jsx("div",_extends({tabIndex:0,title:Te,onClick:Oe=>Ee(we,Oe)},Y,{children:Me,style:_extends({},Se,{background:we})}),Re)}),J&&React.isValidElement(J)&&J]}))});Swatch.displayName="Swatch";const Swatch$1=Swatch;var _excluded=["prefixCls","className","onChange","width","presetColors","color","editableDisable","disableAlpha","style"],PRESET_COLORS=["#D0021B","#F5A623","#f8e61b","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"],Bar=C=>jsxRuntimeExports.jsx("div",{style:{boxShadow:"rgb(0 0 0 / 60%) 0px 0px 2px",width:4,top:1,bottom:1,left:C.left,borderRadius:1,position:"absolute",backgroundColor:"#fff"}}),Sketch=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-sketch",className:B,onChange:U,width:V=218,presetColors:X=PRESET_COLORS,color:Y,editableDisable:K=!0,disableAlpha:J=!1,style:xe}=C,Z=_objectWithoutPropertiesLoose(C,_excluded),[_e,Se]=React.useState({h:209,s:36,v:90,a:1});React.useEffect(()=>{typeof Y=="string"&&validHex$1(Y)&&Se(hexToHsva(Y)),typeof Y=="object"&&Se(Y)},[Y]);var Ee=Oe=>{Se(Oe),U&&U(color(Oe))},Ae=(Oe,Le)=>{typeof Oe=="string"&&validHex$1(Oe)&&/(3|6)/.test(String(Oe.length))&&Ee(hexToHsva(Oe))},Re=Oe=>Ee(_extends({},_e,{a:Oe.a})),Te=Oe=>Ee(_extends({},_e,Oe,{a:_e.a})),we=_extends({"--sketch-background":"rgb(255, 255, 255)","--sketch-box-shadow":"rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px","--sketch-swatch-box-shadow":"rgb(0 0 0 / 15%) 0px 0px 0px 1px inset","--sketch-alpha-box-shadow":"rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset","--sketch-swatch-border-top":"1px solid rgb(238, 238, 238)",background:"var(--sketch-background)",borderRadius:4,boxShadow:"var(--sketch-box-shadow)",width:V},xe),Pe={borderRadius:2,background:hsvaToRgbaString(_e),boxShadow:"var(--sketch-alpha-box-shadow)"},Ie={borderTop:"var(--sketch-swatch-border-top)",paddingTop:10,paddingLeft:10},Me={marginRight:10,marginBottom:10,borderRadius:3,boxShadow:"var(--sketch-swatch-box-shadow)"};return jsxRuntimeExports.jsxs("div",_extends({},Z,{className:I+" "+(B||""),ref:E,style:we,children:[jsxRuntimeExports.jsxs("div",{style:{padding:"10px 10px 8px"},children:[jsxRuntimeExports.jsx(Saturation$1,{hsva:_e,style:{width:"auto",height:150},onChange:Te}),jsxRuntimeExports.jsxs("div",{style:{display:"flex",marginTop:4},children:[jsxRuntimeExports.jsxs("div",{style:{flex:1},children:[jsxRuntimeExports.jsx(Hue$1,{width:"auto",height:10,hue:_e.h,pointer:Bar,innerProps:{style:{marginLeft:1,marginRight:5}},onChange:Oe=>Ee(_extends({},_e,Oe))}),!J&&jsxRuntimeExports.jsx(Alpha$1,{width:"auto",height:10,hsva:_e,pointer:Bar,style:{marginTop:4},innerProps:{style:{marginLeft:1,marginRight:5}},onChange:Re})]}),!J&&jsxRuntimeExports.jsx(Alpha$1,{width:24,height:24,hsva:_e,radius:2,style:{marginLeft:4},bgProps:{style:{background:"transparent"}},innerProps:{style:Pe},pointer:()=>jsxRuntimeExports.jsx(React.Fragment,{})})]})]}),K&&jsxRuntimeExports.jsxs("div",{style:{display:"flex",margin:"0 10px 3px 10px"},children:[jsxRuntimeExports.jsx(EditableInput$1,{label:"Hex",value:hsvaToHex(_e).replace(/^#/,"").toLocaleUpperCase(),onChange:(Oe,Le)=>Ae(Le),style:{minWidth:58}}),jsxRuntimeExports.jsx(RGBA,{hsva:_e,style:{marginLeft:6},aProps:J?!1:{},onChange:Oe=>Ee(Oe.hsva)})]}),X&&X.length>0&&jsxRuntimeExports.jsx(Swatch$1,{style:Ie,colors:X,color:hsvaToHex(_e),onChange:Oe=>Ee(Oe),rectProps:{style:Me}})]}))});Sketch.displayName="Sketch";const Sketch$1=Sketch,ColorPickerPortal=({position:C,color:E,onChange:I,onClose:B})=>{const U=React__namespace.useCallback(K=>{I(K.hex)},[I]);React__namespace.useEffect(()=>{const K=J=>{var xe;J.target instanceof Node&&!((xe=document.getElementById("color-picker-portal"))!=null&&xe.contains(J.target))&&B()};return document.addEventListener("mousedown",K),()=>{document.removeEventListener("mousedown",K)}},[B]);const V=React__namespace.useCallback(()=>{const Z=window.innerWidth,_e=window.innerHeight;let{x:Se,y:Ee}=C;return Se+220+10>Z&&(Se=Z-220-10),Ee+300+10>_e&&(Ee=Ee-300-10),{x:Se,y:Ee}},[C]),{x:X,y:Y}=V();return reactDom.createPortal(jsxRuntimeExports.jsxs("div",{style:{position:"fixed",left:X,top:Y,zIndex:9999,backgroundColor:"white",borderRadius:"8px",boxShadow:"0 10px 15px rgba(0, 0, 0, 0.1)",padding:"8px"},children:[jsxRuntimeExports.jsx("div",{style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.4)",zIndex:-1},onClick:B}),jsxRuntimeExports.jsx(Sketch$1,{color:E,onChange:U})]}),document.body)},MENUS_ICONS={ARROW_DOWN:"▼",ARROW_UP:"▲",COLOR:"🎨",COPY:"📋",DELETE:"❌",TRASH:"🗑️",EYE:"👁️",EYE_SLASH:"👁️‍🗨️",LOCK:"🔒",UNLOCK:"🔓",PASTE:"📋",PENCIL:"✏️",PLUS:"➕",MINUS:"➖",ROTATE:"🔄",SCALE:"⚖️",SAVE:"💾",RESET:"🔄",SETTINGS:"⚙️",ZOOM_IN:"🔍",ZOOM_OUT:"🔍",ALIGN_LEFT:"☰",ALIGN_CENTER:"≣",ALIGN_RIGHT:"⋰",DISTRIBUTE_HORIZONTALLY:"↔️",DISTRIBUTE_VERTICALLY:"↕️",FLIP_HORIZONTAL:"↔️",FLIP_VERTICAL:"↕️",ROTATE_LEFT:"↺",ROTATE_RIGHT:"↻",SCALE_DOWN:"➖",SCALE_UP:"➕",ADJUST_EQUALISER:"🔊",ADJUST_EQUALISER_SLIDERS:"🎚️",ADJUST_HORIZONTAL_SLIDERS:"🔲",COLOR_FILL:"🎨"},MAX_RECENT_COLORS=10,useDropDownMenu=C=>{const E=React.useRef(null),I=react.useApp();return{createMenu:React.useCallback((U,V,X)=>{if(!U||!I)return;const Y=new PIXI__namespace.Container;I.stage.addChild(Y),E.current=Y;const K=132,J=(32+4)*V.length+8,xe=new PIXI__namespace.Graphics;xe.beginFill(16777215,.95),xe.lineStyle(1,14540253),xe.drawRoundedRect(0,0,K,J,4),xe.endFill(),Y.addChild(xe);const Z=new F;Z.alpha=.2,Z.blur=2,Z.distance=3,Y.filters=[Z],V.forEach((Se,Ee)=>{const Ae=new PIXI__namespace.Container;Ae.eventMode="static";const Re=new PIXI__namespace.Graphics;Re.beginFill(16777215,0),Re.drawRect(0,0,K,32),Re.endFill(),Ae.addChild(Re);const Te=new PIXI__namespace.Text(Se.icon,{fontSize:14,fontFamily:"Arial",fill:3355443});Te.x=8,Te.y=32/2-Te.height/2,Ae.addChild(Te);const we=new PIXI__namespace.Text(Se.label,{fontSize:12,fontFamily:"Arial",fill:3355443});we.x=32+4,we.y=32/2-we.height/2,Ae.addChild(we),Ae.y=Ee*(32+4)+4,Ae.on("pointerover",()=>{Re.clear(),Re.beginFill(15790320),Re.drawRect(0,0,K,32),Re.endFill()}).on("pointerout",()=>{Re.clear(),Re.beginFill(16777215,0),Re.drawRect(0,0,K,32),Re.endFill()}).on("pointerup",()=>{Se.action(),C(!1)}),Y.addChild(Ae)}),Y.x=X.x,Y.y=X.y;const _e=Se=>{const Ee=new PIXI__namespace.Point(Se.global.x,Se.global.y);Y.getBounds().contains(Ee.x,Ee.y)||C(!1)};return I.stage.on("pointerdown",_e),()=>{I.stage.off("pointerdown",_e),Y.parent&&Y.parent.removeChild(Y)}},[]),dropdownRef:E}},TransformerMenu=({PixiTransformer:C})=>{const E=React.useRef(null),I=React.useRef(null),B=React.useRef(null),U=react.useApp(),[V,X]=React.useState(!1),[Y,K]=React.useState({x:0,y:0}),[,J]=React.useState(!1),[xe,Z]=React.useState("#000000"),[,_e]=React.useState({x:0,y:0}),[Se,Ee]=React.useState(!1),[Ae,Re]=React.useState({x:0,y:0}),[Te,we]=React.useState(()=>{const ke=localStorage.getItem("recentColors");return ke?JSON.parse(ke):[]}),{createMenu:Pe,dropdownRef:Ie}=useDropDownMenu(Ee),Me=32,Oe=4,Le=8,De=[{icon:"B",action:()=>{},tooltip:"Bold"},{icon:"I",action:()=>{},tooltip:"Italic"},{icon:"U",action:()=>{},tooltip:"Underline"},{icon:"🎨",action:(ke,Ge)=>{const Be={x:Y.x+ke,y:Y.y+Ge+33},qe=U.view.getBoundingClientRect(),Ke=qe.left+Be.x,Ye=qe.top+Be.y;$e(Ke,Ye)},tooltip:"Color",withPreview:!0},{icon:MENUS_ICONS.ARROW_DOWN,action:(ke,Ge)=>{We(ke,Ge)},tooltip:"Alignment Options"}],Ve=[{icon:MENUS_ICONS.ALIGN_LEFT,action:()=>console.log("Align Left"),label:"Left"},{icon:MENUS_ICONS.ALIGN_CENTER,action:()=>console.log("Align Center"),label:"Center"},{icon:MENUS_ICONS.ALIGN_RIGHT,action:()=>console.log("Align Right"),label:"Right"},{icon:"↑",action:()=>console.log("bring forward"),label:"Bring Forward"},{icon:"↓",action:()=>console.log("send backward"),label:"Send Backward"}],Xe=(Me+Oe)*De.length+Le*2-Oe,Ue=Me+Le*2,We=React.useCallback((ke,Ge)=>{Ee(Be=>!Be),Re({x:Y.x+ke,y:Y.y+Ge+Me+5})},[Y,Me]),He=React.useCallback(()=>{B.current&&(B.current.unmount(),J(!1)),Ie.current&&Ie.current.parent&&(Ie.current.parent.removeChild(Ie.current),Ie.current=null,Ee(!1))},[]),ze=React.useCallback(()=>{const ke=document.createElement("div");return ke.id="color-picker-portal",document.body.appendChild(ke),I.current=ke,B.current=ReactDOM__namespace.createRoot(ke),()=>{ke&&ke.parentNode&&document.body.removeChild(ke)}},[]);React.useEffect(()=>{ze()},[]);const je=React.useCallback(ke=>{Z(ke),we(Ge=>{const Be=[ke,...Ge.filter(qe=>qe!==ke)].slice(0,MAX_RECENT_COLORS);return localStorage.setItem("recentColors",JSON.stringify(Be)),Be})},[]),Ne=React.useCallback(()=>{J(!1),B.current&&B.current.unmount()},[]),$e=React.useCallback((ke,Ge)=>{I.current&&B.current&&(_e({x:ke,y:Ge}),J(!0),(!B.current||!B.current._internalRoot)&&ze(),B.current.render(jsxRuntimeExports.jsx(ColorPickerPortal,{position:{x:ke,y:Ge},color:xe,onChange:je,onClose:Ne,recentColors:Te})))},[xe,je,Ne]);React.useEffect(()=>{const ke=()=>{if(C.current){const Be=C.current.getBounds();K({x:Be.x+Be.width/2-Xe/2,y:Be.y+Be.height})}},Ge=setTimeout(()=>{E.current&&(ke(),X(!0))},300);return()=>{clearTimeout(Ge)}},[]);const Fe=React.useCallback(()=>{if(He(),C.current){const ke=C.current.getBounds();K({x:ke.x+ke.width/2-Xe/2,y:ke.y+ke.height})}},[He]);return React.useEffect(()=>{const ke=Ge=>{if(I.current){const Be=I.current.firstChild;Be&&!Be.contains(Ge.target)&&He()}(Ge.type==="resize"||Ge.type==="scroll")&&He()};return window.addEventListener("click",ke),window.addEventListener("resize",ke),window.addEventListener("scroll",ke),()=>{window.removeEventListener("click",ke),window.removeEventListener("resize",ke),window.removeEventListener("scroll",ke)}},[He]),React.useEffect(()=>{var Ke;if(!U||!V||!C.current||!E.current)return;const ke=C.current,Ge=new PIXI__namespace.Container;(Ke=E.current)==null||Ke.addChild(Ge),ke.addListener("transformchange",Fe);const Be=new PIXI__namespace.Graphics;Be.beginFill(16777215,.9),Be.lineStyle(1,14540253),Be.drawRoundedRect(0,0,Xe,Ue,4),Be.endFill(),Ge.addChild(Be);const qe=new F;return qe.alpha=.2,qe.blur=2,qe.distance=3,Ge.filters=[qe],De.forEach((Ye,tt)=>{const Je=new PIXI__namespace.Container,rt=Le+(Me+Oe)*tt,at=Le,nt=new PIXI__namespace.Graphics;nt.beginFill(16119285),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill(),Je.addChild(nt);const Ze=new PIXI__namespace.Text(Ye.icon,{fontSize:14,fontFamily:"Arial",fill:Ye.icon==="🎨"?xe:3355443,fontWeight:"bold"});Ze.x=Me/2-Ze.width/2,Ze.y=Me/2-Ze.height/2,Je.addChild(Ze),Je.x=rt,Je.y=at,Je.interactive=!0,Je.eventMode="static",Je.on("pointerover",()=>{nt.clear(),nt.beginFill(15658734),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill(),Ye.icon!=="🎨"&&(Ze.style.fill=0)}),Je.on("pointerout",()=>{nt.clear(),nt.beginFill(16119285),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill(),Ye.icon!=="🎨"&&(Ze.style.fill=3355443)}),Je.on("pointerdown",()=>{nt.clear(),nt.beginFill(14737632),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill()}),Je.on("pointerup",()=>{nt.clear(),nt.beginFill(16119285),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill(),Ye.action(rt,at)}),Ge.addChild(Je)}),Ge.x=Y.x,Ge.y=Y.y,Ge.visible=ke.visible,()=>{E.current&&E.current.removeChild(Ge),C.current&&C.current.removeListener("transformchange",Fe)}},[U,V,Y,De,Xe,Ue,xe]),React.useEffect(()=>Pe(Se,Ve,Ae),[Se,Ve,Ae]),React.useEffect(()=>()=>{He()},[He]),jsxRuntimeExports.jsx(react.Sprite,{texture:PIXI__namespace.Texture.EMPTY,ref:E,x:10,y:10})},CYAN=[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],initalTransforms$1={x:0,y:0,width:0,height:0,anchor:.5,animation:Animations.NONE,maxX:0,maxY:0,scale:1,rotation:0,effect:Effects.Normal,overlay:OverlayTypes.NONE,fontSize:10},AbstractContainer=React__namespace.forwardRef((C,E)=>{const[I,B]=React__namespace.useState(!1),[U]=React.useState(!1),[V,X]=React.useState(!1),[Y,K]=React.useState(),J=useDebounce(Y,300),xe=React.useRef(null),Z=React.useRef(null),_e=React.useRef(null),Se=React.useRef(null),Ee=React.useRef(null),Ae=React.useRef(null),Re=React.useRef({isDragging:!1}),{tl:Te}=React.useContext(GsapPixieContext),we=react.useApp(),Pe=we.screen.width,Ie=we.screen.height,{uniqueId:Me,visible:Oe,startAt:Le,transformation:De=initalTransforms$1,applyTransformer:Ve,disabled:Xe,pointerdown:Ue,pointerout:We,pointerover:He,isText:ze,isDragging:je,isGif:Ne,onDoubleClick:$e,isTextEditMode:Fe,handleDragFontSize:ke,handleDragWordWrap:Ge}=C,{x:Be=0,y:qe=0,width:Ke,height:Ye,scale:tt=[1,1],rotation:Je=0,effect:rt,overlay:at,animation:nt=Animations.NONE,fontSize:Ze=16}=De,et=useGsapEffect();useCustomEventListener(Events.COMPLETE,()=>{xe.current}),React__namespace.useImperativeHandle(E,()=>({getIsTransformerDragging:()=>U,getIsMouseOverTransformer:()=>V}),[U,V]),React__namespace.useEffect(()=>{xe.current&&B(!0)},[]),React__namespace.useEffect(()=>{K({x:Be,y:qe,width:Ke,height:Ye,animation:nt,maxX:Pe,maxY:Ie})},[nt,Be,qe,Ke,Ye,Pe,Ie]),React__namespace.useEffect(()=>{if(!Z.current)return;const ut=gsap$2.context(()=>{if(Te.current&&J){const{x:ft,y:xt,animation:pt,maxX:mt,maxY:bt}=J||{},_t=Te.current.progress(),vt=et.updateEffect(xe.current,pt,{immediateRender:!1,x:ft,y:xt,overwrite:!0,maxX:mt,maxY:bt});Ee.current&&(Te.current.remove(Ee.current),Ee.current.progress(0).kill()),_t>.1?(vt.eventCallback("onComplete",()=>{vt.remove("onComplete"),Te.current.add(vt,Le),Ee.current=vt}),vt.play()):(vt.progress(1),Te.current.add(vt,Le),Ee.current=vt)}else Ee.current&&Ee.current.progress(0).kill()},Z.current);return()=>{ut.revert()}},[Le,J]);const st=React__namespace.useCallback(()=>{X(!0),He&&!Re.current.isDragging&&He()},[]),it=ut=>parseFloat(ut.toFixed(2)),Qe=React__namespace.useCallback(()=>{var xt,pt;Re.current.isDragging=!0;const{width:ut}=xe.current,ft={x:it(Number((xt=xe.current)==null?void 0:xt.scale.x)),y:it(Number((pt=xe.current)==null?void 0:pt.scale.y))};if(ze){if(ft.x!==1&&ft.y!==1&&_e.current){const mt=Ze*ft.x;ke&&ke(ut,mt,ft)}else if(ft.x!==1)Ge&&Ge(ut,ft);else if(ft.y!==1){const mt=Ze*ft.x;ke&&ke(ut,mt,ft)}}},[ze,Ze,ke,Ge]),ot=React__namespace.useCallback(ut=>{var It,At;const{x:ft,y:xt,width:pt,height:mt,rotation:bt}=xe.current,_t={x:it(Number((It=xe.current)==null?void 0:It.scale.x)),y:it(Number((At=xe.current)==null?void 0:At.scale.y))};let vt=Ze;ze&&_t.x!==1&&_t.y!==1?(vt=Ze*_t.x,ke&&ke(pt,vt,_t)):ze&&_t.x!==1&&Ge&&Ge(pt,_t),C.onAnchorTransformationEnd&&C.onAnchorTransformationEnd({uniqueId:Me,transformation:{...ut.transformation,fontSize:vt}}),Re.current.isDragging=!1},[ze,Me,Ze,ke,Ge]),ht=react.withFilters(react.Container,{matrix:PIXI__namespace.filters.ColorMatrixFilter});return jsxRuntimeExports.jsxs(react.Container,{ref:Z,children:[jsxRuntimeExports.jsx(react.Container,{ref:xe,position:[Be,qe],pivot:[Be,qe],width:Ke,height:Ye,scale:tt,rotation:Je,...!Xe&&Oe&&!U&&!je&&{interactive:!0,buttonMode:!0,pointerdown:Ue,pointerover:He,pointerout:We},children:jsxRuntimeExports.jsxs(react.Container,{ref:Ae,children:[!Ne&&jsxRuntimeExports.jsx(ht,{scale:1,apply:({matrix:ut})=>{rt===Effects.BlackAndWhite?ut.desaturate():rt===Effects.Sepia?ut.sepia():rt===Effects.RetroVintage||rt===Effects.NightVision?ut.negative():rt===Effects.Normal&&ut.reset()},matrix:{enabled:!0,matrix:CYAN},children:jsxRuntimeExports.jsx(react.Container,{ref:_e,children:C.children})}),Ne&&jsxRuntimeExports.jsx(react.Container,{ref:_e,children:C.children}),!isEmpty$1(at)&&at!==OverlayTypes.NONE&&at!==OverlayTypes.NORMAL&&jsxRuntimeExports.jsx(PixiOverlayTilingSprite,{overlay:at,width:Ke,height:Ye,x:Be,y:qe}),jsxRuntimeExports.jsx(react.Sprite,{texture:PIXI__namespace.Texture.WHITE,alpha:0,x:Be,y:qe,width:Ke,height:Ye,scale:tt,rotation:Je})]})}),Ve&&Oe&&!Fe&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(PixiTransformer,{pixiTransformerRef:Se,imageRef:xe,isMounted:I,transformCommit:ot,transformChange:Qe,mouseoverEvent:st,uniqueId:Me,isText:ze,onDoubleClick:$e}),jsxRuntimeExports.jsx(TransformerMenu,{PixiTransformer:Se,uniqueId:Me,isText:!!ze})]})]})}),withFiltersHook=C=>{const{contrast:E=1,saturation:I=1,brightness:B=1,alpha:U=1,red:V=1,blue:X=1,gamma:Y=1,green:K=1,blurRadius:J=0,temperature:xe=0,hue:Z=0,sharpness:_e=0,vignette:Se=0,noise:Ee=0}=C||{},Ae=new PIXI__namespace.Filter(null,`
+`,i=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,c=(C,E)=>{var I={};for(var B in C)d.call(C,B)&&E.indexOf(B)<0&&(I[B]=C[B]);if(C!=null&&i)for(var B of i(C))E.indexOf(B)<0&&f.call(C,B)&&(I[B]=C[B]);return I};const a=class extends Filter{constructor(C){const E=Object.assign(a.defaults,C),{maxKernelSize:I}=E,B=c(E,["maxKernelSize"]);super(l,u.replace("${maxKernelSize}",I.toFixed(1))),Object.assign(this,B)}get center(){return this.uniforms.uCenter}set center(C){this.uniforms.uCenter=C}get strength(){return this.uniforms.uStrength}set strength(C){this.uniforms.uStrength=C}get innerRadius(){return this.uniforms.uInnerRadius}set innerRadius(C){this.uniforms.uInnerRadius=C}get radius(){return this.uniforms.uRadius}set radius(C){(C<0||C===1/0)&&(C=-1),this.uniforms.uRadius=C}};let o=a;o.defaults={strength:.1,center:[0,0],innerRadius:0,radius:-1,maxKernelSize:32};function _extends(){return _extends=Object.assign?Object.assign.bind():function(C){for(var E=1;E<arguments.length;E++){var I=arguments[E];for(var B in I)Object.prototype.hasOwnProperty.call(I,B)&&(C[B]=I[B])}return C},_extends.apply(this,arguments)}function _objectWithoutPropertiesLoose(C,E){if(C==null)return{};var I={},B=Object.keys(C),U,V;for(V=0;V<B.length;V++)U=B[V],!(E.indexOf(U)>=0)&&(I[U]=C[U]);return I}var RGB_MAX=255,SV_MAX=100,rgbaToHsva=C=>{var{r:E,g:I,b:B,a:U}=C,V=Math.max(E,I,B),X=V-Math.min(E,I,B),Y=X?V===E?(I-B)/X:V===I?2+(B-E)/X:4+(E-I)/X:0;return{h:60*(Y<0?Y+6:Y),s:V?X/V*SV_MAX:0,v:V/RGB_MAX*SV_MAX,a:U}},hsvaToHslaString=C=>{var{h:E,s:I,l:B,a:U}=hsvaToHsla(C);return"hsla("+E+", "+I+"%, "+B+"%, "+U+")"},hsvaToHsla=C=>{var{h:E,s:I,v:B,a:U}=C,V=(200-I)*B/SV_MAX;return{h:E,s:V>0&&V<200?I*B/SV_MAX/(V<=SV_MAX?V:200-V)*SV_MAX:0,l:V/2,a:U}},rgbaToHex$1=C=>{var{r:E,g:I,b:B}=C,U=E<<16|I<<8|B;return"#"+(V=>new Array(7-V.length).join("0")+V)(U.toString(16))},rgbaToHexa=C=>{var{r:E,g:I,b:B,a:U}=C,V=typeof U=="number"&&(U*255|256).toString(16).slice(1);return""+rgbaToHex$1({r:E,g:I,b:B,a:U})+(V||"")},hexToHsva=C=>rgbaToHsva(hexToRgba(C)),hexToRgba=C=>{var E=C.replace("#","");/^#?/.test(C)&&E.length===3&&(C="#"+E.charAt(0)+E.charAt(0)+E.charAt(1)+E.charAt(1)+E.charAt(2)+E.charAt(2));var I=new RegExp("[A-Za-z0-9]{2}","g"),[B,U,V=0,X]=C.match(I).map(Y=>parseInt(Y,16));return{r:B,g:U,b:V,a:(X??255)/RGB_MAX}},hsvaToRgba=C=>{var{h:E,s:I,v:B,a:U}=C,V=E/60,X=I/SV_MAX,Y=B/SV_MAX,K=Math.floor(V)%6,J=V-Math.floor(V),xe=RGB_MAX*Y*(1-X),Z=RGB_MAX*Y*(1-X*J),_e=RGB_MAX*Y*(1-X*(1-J));Y*=RGB_MAX;var Se={};switch(K){case 0:Se.r=Y,Se.g=_e,Se.b=xe;break;case 1:Se.r=Z,Se.g=Y,Se.b=xe;break;case 2:Se.r=xe,Se.g=Y,Se.b=_e;break;case 3:Se.r=xe,Se.g=Z,Se.b=Y;break;case 4:Se.r=_e,Se.g=xe,Se.b=Y;break;case 5:Se.r=Y,Se.g=xe,Se.b=Z;break}return Se.r=Math.round(Se.r),Se.g=Math.round(Se.g),Se.b=Math.round(Se.b),_extends({},Se,{a:U})},hsvaToRgbaString=C=>{var{r:E,g:I,b:B,a:U}=hsvaToRgba(C);return"rgba("+E+", "+I+", "+B+", "+U+")"},rgbaToRgb=C=>{var{r:E,g:I,b:B}=C;return{r:E,g:I,b:B}},hslaToHsl=C=>{var{h:E,s:I,l:B}=C;return{h:E,s:I,l:B}},hsvaToHex=C=>rgbaToHex$1(hsvaToRgba(C)),hsvaToHsv=C=>{var{h:E,s:I,v:B}=C;return{h:E,s:I,v:B}},rgbToXY=C=>{var{r:E,g:I,b:B}=C,U=function(xe){return xe<=.04045?xe/12.92:Math.pow((xe+.055)/1.055,2.4)},V=U(E/255),X=U(I/255),Y=U(B/255),K={};return K.x=V*.4124+X*.3576+Y*.1805,K.y=V*.2126+X*.7152+Y*.0722,K.bri=V*.0193+X*.1192+Y*.9505,K},color=C=>{var E,I,B,U,V,X,Y,K,J;return typeof C=="string"&&validHex$1(C)?(X=hexToHsva(C),K=C):typeof C!="string"&&(X=C),X&&(B=hsvaToHsv(X),V=hsvaToHsla(X),U=hsvaToRgba(X),J=rgbaToHexa(U),K=hsvaToHex(X),I=hslaToHsl(V),E=rgbaToRgb(U),Y=rgbToXY(E)),{rgb:E,hsl:I,hsv:B,rgba:U,hsla:V,hsva:X,hex:K,hexa:J,xy:Y}},validHex$1=C=>/^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(C);function useEventCallback$1(C){var E=React.useRef(C);return React.useEffect(()=>{E.current=C}),React.useCallback((I,B)=>E.current&&E.current(I,B),[])}var isTouch=C=>"touches"in C,preventDefaultMove=C=>{!isTouch(C)&&C.preventDefault&&C.preventDefault()},clamp=function(E,I,B){return I===void 0&&(I=0),B===void 0&&(B=1),E>B?B:E<I?I:E},getRelativePosition=(C,E)=>{var I=C.getBoundingClientRect(),B=isTouch(E)?E.touches[0]:E;return{left:clamp((B.pageX-(I.left+window.pageXOffset))/I.width),top:clamp((B.pageY-(I.top+window.pageYOffset))/I.height),width:I.width,height:I.height,x:B.pageX-(I.left+window.pageXOffset),y:B.pageY-(I.top+window.pageYOffset)}},_excluded$8=["prefixCls","className","onMove","onDown"],Interactive=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-interactive",className:B,onMove:U,onDown:V}=C,X=_objectWithoutPropertiesLoose(C,_excluded$8),Y=React.useRef(null),K=React.useRef(!1),[J,xe]=React.useState(!1),Z=useEventCallback$1(U),_e=useEventCallback$1(V),Se=we=>K.current&&!isTouch(we)?!1:(K.current=isTouch(we),!0),Ee=React.useCallback(we=>{preventDefaultMove(we);var Pe=isTouch(we)?we.touches.length>0:we.buttons>0;Pe&&Y.current?Z&&Z(getRelativePosition(Y.current,we),we):xe(!1)},[Z]),Ae=React.useCallback(()=>xe(!1),[]),Re=React.useCallback(we=>{var Pe=we?window.addEventListener:window.removeEventListener;Pe(K.current?"touchmove":"mousemove",Ee),Pe(K.current?"touchend":"mouseup",Ae)},[]);React.useEffect(()=>(Re(J),()=>{J&&Re(!1)}),[J,Re]);var Te=React.useCallback(we=>{preventDefaultMove(we.nativeEvent),Se(we.nativeEvent)&&(_e&&_e(getRelativePosition(Y.current,we.nativeEvent),we.nativeEvent),xe(!0))},[_e]);return jsxRuntimeExports.jsx("div",_extends({},X,{className:[I,B||""].filter(Boolean).join(" "),style:_extends({},X.style,{touchAction:"none"}),ref:Y,tabIndex:0,onMouseDown:Te,onTouchStart:Te}))});Interactive.displayName="Interactive";const Interactive$1=Interactive;var Pointer$1=C=>{var{className:E,color:I,left:B,top:U,prefixCls:V}=C,X={position:"absolute",top:U,left:B},Y={"--saturation-pointer-box-shadow":"rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px",width:6,height:6,transform:"translate(-3px, -3px)",boxShadow:"var(--saturation-pointer-box-shadow)",borderRadius:"50%",backgroundColor:I};return React.useMemo(()=>jsxRuntimeExports.jsx("div",{className:V+"-pointer "+(E||""),style:X,children:jsxRuntimeExports.jsx("div",{className:V+"-fill",style:Y})}),[U,B,I,E,V])},_excluded$7=["prefixCls","radius","pointer","className","hue","style","hsva","onChange"],Saturation=React.forwardRef((C,E)=>{var I,{prefixCls:B="w-color-saturation",radius:U=0,pointer:V,className:X,hue:Y=0,style:K,hsva:J,onChange:xe}=C,Z=_objectWithoutPropertiesLoose(C,_excluded$7),_e=_extends({width:200,height:200,borderRadius:U},K,{position:"relative"}),Se=(Ae,Re)=>{xe&&J&&xe({h:J.h,s:Ae.left*100,v:(1-Ae.top)*100,a:J.a})},Ee=React.useMemo(()=>{if(!J)return null;var Ae={top:100-J.v+"%",left:J.s+"%",color:hsvaToHslaString(J)};return V&&typeof V=="function"?V(_extends({prefixCls:B},Ae)):jsxRuntimeExports.jsx(Pointer$1,_extends({prefixCls:B},Ae))},[J,V,B]);return jsxRuntimeExports.jsx(Interactive$1,_extends({className:[B,X||""].filter(Boolean).join(" ")},Z,{style:_extends({position:"absolute",inset:0,cursor:"crosshair",backgroundImage:"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl("+((I=J==null?void 0:J.h)!=null?I:Y)+", 100%, 50%))"},_e),ref:E,onMove:Se,onDown:Se,children:Ee}))});Saturation.displayName="Saturation";const Saturation$1=Saturation;var _excluded$6=["className","prefixCls","left","top","style","fillProps"],Pointer=C=>{var{className:E,prefixCls:I,left:B,top:U,style:V,fillProps:X}=C,Y=_objectWithoutPropertiesLoose(C,_excluded$6),K=_extends({},V,{position:"absolute",left:B,top:U}),J=_extends({width:18,height:18,boxShadow:"var(--alpha-pointer-box-shadow)",borderRadius:"50%",backgroundColor:"var(--alpha-pointer-background-color)"},X==null?void 0:X.style,{transform:B?"translate(-9px, -1px)":"translate(-1px, -9px)"});return jsxRuntimeExports.jsx("div",_extends({className:I+"-pointer "+(E||""),style:K},Y,{children:jsxRuntimeExports.jsx("div",_extends({className:I+"-fill"},X,{style:J}))}))},_excluded$5=["prefixCls","className","hsva","background","bgProps","innerProps","pointerProps","radius","width","height","direction","style","onChange","pointer"],BACKGROUND_IMG="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==",Alpha=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-alpha",className:B,hsva:U,background:V,bgProps:X={},innerProps:Y={},pointerProps:K={},radius:J=0,width:xe,height:Z=16,direction:_e="horizontal",style:Se,onChange:Ee,pointer:Ae}=C,Re=_objectWithoutPropertiesLoose(C,_excluded$5),Te=Le=>{Ee&&Ee(_extends({},U,{a:_e==="horizontal"?Le.left:Le.top}),Le)},we=hsvaToHslaString(Object.assign({},U,{a:1})),Pe="linear-gradient(to "+(_e==="horizontal"?"right":"bottom")+", rgba(244, 67, 54, 0) 0%, "+we+" 100%)",Ie={};_e==="horizontal"?Ie.left=U.a*100+"%":Ie.top=U.a*100+"%";var Me=_extends({"--alpha-background-color":"#fff","--alpha-pointer-background-color":"rgb(248, 248, 248)","--alpha-pointer-box-shadow":"rgb(0 0 0 / 37%) 0px 1px 4px 0px",borderRadius:J,background:"url("+BACKGROUND_IMG+") left center",backgroundColor:"var(--alpha-background-color)"},{width:xe,height:Z},Se,{position:"relative"}),Oe=Ae&&typeof Ae=="function"?Ae(_extends({prefixCls:I},K,Ie)):jsxRuntimeExports.jsx(Pointer,_extends({},K,{prefixCls:I},Ie));return jsxRuntimeExports.jsxs("div",_extends({},Re,{className:[I,I+"-"+_e,B||""].filter(Boolean).join(" "),style:Me,ref:E,children:[jsxRuntimeExports.jsx("div",_extends({},X,{style:_extends({inset:0,position:"absolute",background:V||Pe,borderRadius:J},X.style)})),jsxRuntimeExports.jsx(Interactive$1,_extends({},Y,{style:_extends({},Y.style,{inset:0,zIndex:1,position:"absolute"}),onMove:Te,onDown:Te,children:Oe}))]}))});Alpha.displayName="Alpha";const Alpha$1=Alpha;var _excluded$4=["prefixCls","placement","label","value","className","style","labelStyle","inputStyle","onChange","onBlur"],validHex=C=>/^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(C),getNumberValue=C=>Number(String(C).replace(/%/g,"")),EditableInput=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-editable-input",placement:B="bottom",label:U,value:V,className:X,style:Y,labelStyle:K,inputStyle:J,onChange:xe,onBlur:Z}=C,_e=_objectWithoutPropertiesLoose(C,_excluded$4),[Se,Ee]=React.useState(V),Ae=React.useRef(!1);React.useEffect(()=>{C.value!==Se&&(Ae.current||Ee(C.value))},[C.value]);function Re(Me,Oe){var Le=(Oe||Me.target.value).trim().replace(/^#/,"");validHex(Le)&&xe&&xe(Me,Le);var De=getNumberValue(Le);isNaN(De)||xe&&xe(Me,De),Ee(Le)}function Te(Me){Ae.current=!1,Ee(C.value),Z&&Z(Me)}var we={};B==="bottom"&&(we.flexDirection="column"),B==="top"&&(we.flexDirection="column-reverse"),B==="left"&&(we.flexDirection="row-reverse");var Pe=_extends({"--editable-input-label-color":"rgb(153, 153, 153)","--editable-input-box-shadow":"rgb(204 204 204) 0px 0px 0px 1px inset","--editable-input-color":"#666",position:"relative",alignItems:"center",display:"flex",fontSize:11},we,Y),Ie=_extends({width:"100%",paddingTop:2,paddingBottom:2,paddingLeft:3,paddingRight:3,fontSize:11,background:"transparent",boxSizing:"border-box",border:"none",color:"var(--editable-input-color)",boxShadow:"var(--editable-input-box-shadow)"},J);return jsxRuntimeExports.jsxs("div",{className:[I,X||""].filter(Boolean).join(" "),style:Pe,children:[jsxRuntimeExports.jsx("input",_extends({ref:E,value:Se,onChange:Re,onBlur:Te,autoComplete:"off",onFocus:()=>Ae.current=!0},_e,{style:Ie})),U&&jsxRuntimeExports.jsx("span",{style:_extends({color:"var(--editable-input-label-color)",textTransform:"capitalize"},K),children:U})]})});EditableInput.displayName="EditableInput";const EditableInput$1=EditableInput;var _excluded$3=["prefixCls","hsva","placement","rProps","gProps","bProps","aProps","className","style","onChange"],EditableInputRGBA=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-editable-input-rgba",hsva:B,placement:U="bottom",rProps:V={},gProps:X={},bProps:Y={},aProps:K={},className:J,style:xe,onChange:Z}=C,_e=_objectWithoutPropertiesLoose(C,_excluded$3),Se=B?hsvaToRgba(B):{};function Ee(Re){var Te=Number(Re.target.value);Te&&Te>255&&(Re.target.value="255"),Te&&Te<0&&(Re.target.value="0")}var Ae=(Re,Te,we)=>{typeof Re=="number"&&(Te==="a"&&(Re<0&&(Re=0),Re>100&&(Re=100),Z&&Z(color(rgbaToHsva(_extends({},Se,{a:Re/100}))))),Re>255&&(Re=255,we.target.value="255"),Re<0&&(Re=0,we.target.value="0"),Te==="r"&&Z&&Z(color(rgbaToHsva(_extends({},Se,{r:Re})))),Te==="g"&&Z&&Z(color(rgbaToHsva(_extends({},Se,{g:Re})))),Te==="b"&&Z&&Z(color(rgbaToHsva(_extends({},Se,{b:Re})))))};return jsxRuntimeExports.jsxs("div",_extends({ref:E,className:[I,J||""].filter(Boolean).join(" ")},_e,{style:_extends({fontSize:11,display:"flex"},xe),children:[jsxRuntimeExports.jsx(EditableInput$1,_extends({label:"R",value:Se.r||0,onBlur:Ee,placement:U,onChange:(Re,Te)=>Ae(Te,"r",Re)},V,{style:_extends({},V.style)})),jsxRuntimeExports.jsx(EditableInput$1,_extends({label:"G",value:Se.g||0,onBlur:Ee,placement:U,onChange:(Re,Te)=>Ae(Te,"g",Re)},X,{style:_extends({marginLeft:5},V.style)})),jsxRuntimeExports.jsx(EditableInput$1,_extends({label:"B",value:Se.b||0,onBlur:Ee,placement:U,onChange:(Re,Te)=>Ae(Te,"b",Re)},Y,{style:_extends({marginLeft:5},Y.style)})),K&&jsxRuntimeExports.jsx(EditableInput$1,_extends({label:"A",value:Se.a?parseInt(String(Se.a*100),10):0,onBlur:Ee,placement:U,onChange:(Re,Te)=>Ae(Te,"a",Re)},K,{style:_extends({marginLeft:5},K.style)}))]}))});EditableInputRGBA.displayName="EditableInputRGBA";const RGBA=EditableInputRGBA;var _excluded$2=["prefixCls","className","hue","onChange","direction"],Hue=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-hue",className:B,hue:U=0,onChange:V,direction:X="horizontal"}=C,Y=_objectWithoutPropertiesLoose(C,_excluded$2);return jsxRuntimeExports.jsx(Alpha$1,_extends({ref:E,className:I+" "+(B||"")},Y,{direction:X,background:"linear-gradient(to "+(X==="horizontal"?"right":"bottom")+", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",hsva:{h:U,s:100,v:100,a:U/360},onChange:(K,J)=>{V&&V({h:X==="horizontal"?360*J.left:360*J.top})}}))});Hue.displayName="Hue";const Hue$1=Hue;var _excluded$1=["prefixCls","className","color","colors","style","rectProps","onChange","addonAfter","addonBefore","rectRender"],Swatch=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-swatch",className:B,color:U,colors:V=[],style:X,rectProps:Y={},onChange:K,addonAfter:J,addonBefore:xe,rectRender:Z}=C,_e=_objectWithoutPropertiesLoose(C,_excluded$1),Se=_extends({"--swatch-background-color":"rgb(144, 19, 254)",background:"var(--swatch-background-color)",height:15,width:15,marginRight:5,marginBottom:5,cursor:"pointer",position:"relative",outline:"none",borderRadius:2},Y.style),Ee=(Ae,Re)=>{K&&K(hexToHsva(Ae),color(hexToHsva(Ae)),Re)};return jsxRuntimeExports.jsxs("div",_extends({ref:E},_e,{className:[I,B||""].filter(Boolean).join(" "),style:_extends({display:"flex",flexWrap:"wrap",position:"relative"},X),children:[xe&&React.isValidElement(xe)&&xe,V&&Array.isArray(V)&&V.map((Ae,Re)=>{var Te="",we="";typeof Ae=="string"&&(Te=Ae,we=Ae),typeof Ae=="object"&&Ae.color&&(Te=Ae.title||Ae.color,we=Ae.color);var Pe=U&&U.toLocaleLowerCase()===we.toLocaleLowerCase(),Ie=Z&&Z({title:Te,color:we,checked:!!Pe,style:_extends({},Se,{background:we}),onClick:Oe=>Ee(we,Oe)});if(Ie)return jsxRuntimeExports.jsx(React.Fragment,{children:Ie},Re);var Me=Y.children&&React.isValidElement(Y.children)?React.cloneElement(Y.children,{color:we,checked:Pe}):null;return jsxRuntimeExports.jsx("div",_extends({tabIndex:0,title:Te,onClick:Oe=>Ee(we,Oe)},Y,{children:Me,style:_extends({},Se,{background:we})}),Re)}),J&&React.isValidElement(J)&&J]}))});Swatch.displayName="Swatch";const Swatch$1=Swatch;var _excluded=["prefixCls","className","onChange","width","presetColors","color","editableDisable","disableAlpha","style"],PRESET_COLORS=["#D0021B","#F5A623","#f8e61b","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"],Bar=C=>jsxRuntimeExports.jsx("div",{style:{boxShadow:"rgb(0 0 0 / 60%) 0px 0px 2px",width:4,top:1,bottom:1,left:C.left,borderRadius:1,position:"absolute",backgroundColor:"#fff"}}),Sketch=React.forwardRef((C,E)=>{var{prefixCls:I="w-color-sketch",className:B,onChange:U,width:V=218,presetColors:X=PRESET_COLORS,color:Y,editableDisable:K=!0,disableAlpha:J=!1,style:xe}=C,Z=_objectWithoutPropertiesLoose(C,_excluded),[_e,Se]=React.useState({h:209,s:36,v:90,a:1});React.useEffect(()=>{typeof Y=="string"&&validHex$1(Y)&&Se(hexToHsva(Y)),typeof Y=="object"&&Se(Y)},[Y]);var Ee=Oe=>{Se(Oe),U&&U(color(Oe))},Ae=(Oe,Le)=>{typeof Oe=="string"&&validHex$1(Oe)&&/(3|6)/.test(String(Oe.length))&&Ee(hexToHsva(Oe))},Re=Oe=>Ee(_extends({},_e,{a:Oe.a})),Te=Oe=>Ee(_extends({},_e,Oe,{a:_e.a})),we=_extends({"--sketch-background":"rgb(255, 255, 255)","--sketch-box-shadow":"rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px","--sketch-swatch-box-shadow":"rgb(0 0 0 / 15%) 0px 0px 0px 1px inset","--sketch-alpha-box-shadow":"rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset","--sketch-swatch-border-top":"1px solid rgb(238, 238, 238)",background:"var(--sketch-background)",borderRadius:4,boxShadow:"var(--sketch-box-shadow)",width:V},xe),Pe={borderRadius:2,background:hsvaToRgbaString(_e),boxShadow:"var(--sketch-alpha-box-shadow)"},Ie={borderTop:"var(--sketch-swatch-border-top)",paddingTop:10,paddingLeft:10},Me={marginRight:10,marginBottom:10,borderRadius:3,boxShadow:"var(--sketch-swatch-box-shadow)"};return jsxRuntimeExports.jsxs("div",_extends({},Z,{className:I+" "+(B||""),ref:E,style:we,children:[jsxRuntimeExports.jsxs("div",{style:{padding:"10px 10px 8px"},children:[jsxRuntimeExports.jsx(Saturation$1,{hsva:_e,style:{width:"auto",height:150},onChange:Te}),jsxRuntimeExports.jsxs("div",{style:{display:"flex",marginTop:4},children:[jsxRuntimeExports.jsxs("div",{style:{flex:1},children:[jsxRuntimeExports.jsx(Hue$1,{width:"auto",height:10,hue:_e.h,pointer:Bar,innerProps:{style:{marginLeft:1,marginRight:5}},onChange:Oe=>Ee(_extends({},_e,Oe))}),!J&&jsxRuntimeExports.jsx(Alpha$1,{width:"auto",height:10,hsva:_e,pointer:Bar,style:{marginTop:4},innerProps:{style:{marginLeft:1,marginRight:5}},onChange:Re})]}),!J&&jsxRuntimeExports.jsx(Alpha$1,{width:24,height:24,hsva:_e,radius:2,style:{marginLeft:4},bgProps:{style:{background:"transparent"}},innerProps:{style:Pe},pointer:()=>jsxRuntimeExports.jsx(React.Fragment,{})})]})]}),K&&jsxRuntimeExports.jsxs("div",{style:{display:"flex",margin:"0 10px 3px 10px"},children:[jsxRuntimeExports.jsx(EditableInput$1,{label:"Hex",value:hsvaToHex(_e).replace(/^#/,"").toLocaleUpperCase(),onChange:(Oe,Le)=>Ae(Le),style:{minWidth:58}}),jsxRuntimeExports.jsx(RGBA,{hsva:_e,style:{marginLeft:6},aProps:J?!1:{},onChange:Oe=>Ee(Oe.hsva)})]}),X&&X.length>0&&jsxRuntimeExports.jsx(Swatch$1,{style:Ie,colors:X,color:hsvaToHex(_e),onChange:Oe=>Ee(Oe),rectProps:{style:Me}})]}))});Sketch.displayName="Sketch";const Sketch$1=Sketch,ColorPickerPortal=({position:C,color:E,onChange:I,onClose:B})=>{const U=React__namespace.useCallback(K=>{I(K.hex)},[I]);React__namespace.useEffect(()=>{const K=J=>{var xe;J.target instanceof Node&&!((xe=document.getElementById("color-picker-portal"))!=null&&xe.contains(J.target))&&B()};return document.addEventListener("mousedown",K),()=>{document.removeEventListener("mousedown",K)}},[B]);const V=React__namespace.useCallback(()=>{const Z=window.innerWidth,_e=window.innerHeight;let{x:Se,y:Ee}=C;return Se+220+10>Z&&(Se=Z-220-10),Ee+300+10>_e&&(Ee=Ee-300-10),{x:Se,y:Ee}},[C]),{x:X,y:Y}=V();return reactDom.createPortal(jsxRuntimeExports.jsxs("div",{style:{position:"fixed",left:X,top:Y,zIndex:9999,backgroundColor:"white",borderRadius:"8px",boxShadow:"0 10px 15px rgba(0, 0, 0, 0.1)",padding:"8px"},children:[jsxRuntimeExports.jsx("div",{style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.4)",zIndex:-1},onClick:B}),jsxRuntimeExports.jsx(Sketch$1,{color:E,onChange:U})]}),document.body)},MENUS_ICONS={ARROW_DOWN:"▼",ARROW_UP:"▲",COLOR:"🎨",COPY:"📋",DELETE:"❌",TRASH:"🗑️",EYE:"👁️",EYE_SLASH:"👁️‍🗨️",LOCK:"🔒",UNLOCK:"🔓",PASTE:"📋",PENCIL:"✏️",PLUS:"➕",MINUS:"➖",ROTATE:"🔄",SCALE:"⚖️",SAVE:"💾",RESET:"🔄",SETTINGS:"⚙️",ZOOM_IN:"🔍",ZOOM_OUT:"🔍",ALIGN_LEFT:"☰",ALIGN_CENTER:"≣",ALIGN_RIGHT:"⋰",DISTRIBUTE_HORIZONTALLY:"↔️",DISTRIBUTE_VERTICALLY:"↕️",FLIP_HORIZONTAL:"↔️",FLIP_VERTICAL:"↕️",ROTATE_LEFT:"↺",ROTATE_RIGHT:"↻",SCALE_DOWN:"➖",SCALE_UP:"➕",ADJUST_EQUALISER:"🔊",ADJUST_EQUALISER_SLIDERS:"🎚️",ADJUST_HORIZONTAL_SLIDERS:"🔲",COLOR_FILL:"🎨"},MAX_RECENT_COLORS=10,useDropDownMenu=C=>{const E=React.useRef(null),I=react.useApp();return{createMenu:React.useCallback((U,V,X)=>{if(!U||!I)return;const Y=new PIXI__namespace.Container;I.stage.addChild(Y),E.current=Y;const K=132,J=(32+4)*V.length+8,xe=new PIXI__namespace.Graphics;xe.beginFill(16777215,.95),xe.lineStyle(1,14540253),xe.drawRoundedRect(0,0,K,J,4),xe.endFill(),Y.addChild(xe);const Z=new F;Z.alpha=.2,Z.blur=2,Z.distance=3,Y.filters=[Z],V.forEach((Se,Ee)=>{const Ae=new PIXI__namespace.Container;Ae.eventMode="static";const Re=new PIXI__namespace.Graphics;Re.beginFill(16777215,0),Re.drawRect(0,0,K,32),Re.endFill(),Ae.addChild(Re);const Te=new PIXI__namespace.Text(Se.icon,{fontSize:14,fontFamily:"Arial",fill:3355443});Te.x=8,Te.y=32/2-Te.height/2,Ae.addChild(Te);const we=new PIXI__namespace.Text(Se.label,{fontSize:12,fontFamily:"Arial",fill:3355443});we.x=32+4,we.y=32/2-we.height/2,Ae.addChild(we),Ae.y=Ee*(32+4)+4,Ae.on("pointerover",()=>{Re.clear(),Re.beginFill(15790320),Re.drawRect(0,0,K,32),Re.endFill()}).on("pointerout",()=>{Re.clear(),Re.beginFill(16777215,0),Re.drawRect(0,0,K,32),Re.endFill()}).on("pointerup",()=>{Se.action(),C(!1)}),Y.addChild(Ae)}),Y.x=X.x,Y.y=X.y;const _e=Se=>{const Ee=new PIXI__namespace.Point(Se.global.x,Se.global.y);Y.getBounds().contains(Ee.x,Ee.y)||C(!1)};return I.stage.on("pointerdown",_e),()=>{I.stage.off("pointerdown",_e),Y.parent&&Y.parent.removeChild(Y)}},[]),dropdownRef:E}},TransformerMenu=({PixiTransformer:C})=>{const E=React.useRef(null),I=React.useRef(null),B=React.useRef(null),U=react.useApp(),[V,X]=React.useState(!1),[Y,K]=React.useState({x:0,y:0}),[,J]=React.useState(!1),[xe,Z]=React.useState("#000000"),[,_e]=React.useState({x:0,y:0}),[Se,Ee]=React.useState(!1),[Ae,Re]=React.useState({x:0,y:0}),[Te,we]=React.useState(()=>{const ke=localStorage.getItem("recentColors");return ke?JSON.parse(ke):[]}),{createMenu:Pe,dropdownRef:Ie}=useDropDownMenu(Ee),Me=32,Oe=4,Le=8,De=[{icon:"B",action:()=>{},tooltip:"Bold"},{icon:"I",action:()=>{},tooltip:"Italic"},{icon:"U",action:()=>{},tooltip:"Underline"},{icon:"🎨",action:(ke,Ge)=>{const Be={x:Y.x+ke,y:Y.y+Ge+33},qe=U.view.getBoundingClientRect(),Ke=qe.left+Be.x,Ye=qe.top+Be.y;$e(Ke,Ye)},tooltip:"Color",withPreview:!0},{icon:MENUS_ICONS.ARROW_DOWN,action:(ke,Ge)=>{We(ke,Ge)},tooltip:"Alignment Options"}],Ve=[{icon:MENUS_ICONS.ALIGN_LEFT,action:()=>console.log("Align Left"),label:"Left"},{icon:MENUS_ICONS.ALIGN_CENTER,action:()=>console.log("Align Center"),label:"Center"},{icon:MENUS_ICONS.ALIGN_RIGHT,action:()=>console.log("Align Right"),label:"Right"},{icon:"↑",action:()=>console.log("bring forward"),label:"Bring Forward"},{icon:"↓",action:()=>console.log("send backward"),label:"Send Backward"}],Xe=(Me+Oe)*De.length+Le*2-Oe,Ue=Me+Le*2,We=React.useCallback((ke,Ge)=>{Ee(Be=>!Be),Re({x:Y.x+ke,y:Y.y+Ge+Me+5})},[Y,Me]),He=React.useCallback(()=>{B.current&&(B.current.unmount(),J(!1)),Ie.current&&Ie.current.parent&&(Ie.current.parent.removeChild(Ie.current),Ie.current=null,Ee(!1))},[]),ze=React.useCallback(()=>{const ke=document.createElement("div");return ke.id="color-picker-portal",document.body.appendChild(ke),I.current=ke,B.current=ReactDOM__namespace.createRoot(ke),()=>{ke&&ke.parentNode&&document.body.removeChild(ke)}},[]);React.useEffect(()=>{ze()},[]);const je=React.useCallback(ke=>{Z(ke),we(Ge=>{const Be=[ke,...Ge.filter(qe=>qe!==ke)].slice(0,MAX_RECENT_COLORS);return localStorage.setItem("recentColors",JSON.stringify(Be)),Be})},[]),Ne=React.useCallback(()=>{J(!1),B.current&&B.current.unmount()},[]),$e=React.useCallback((ke,Ge)=>{I.current&&B.current&&(_e({x:ke,y:Ge}),J(!0),(!B.current||!B.current._internalRoot)&&ze(),B.current.render(jsxRuntimeExports.jsx(ColorPickerPortal,{position:{x:ke,y:Ge},color:xe,onChange:je,onClose:Ne,recentColors:Te})))},[xe,je,Ne]);React.useEffect(()=>{const ke=()=>{if(C.current){const Be=C.current.getBounds();K({x:Be.x+Be.width/2-Xe/2,y:Be.y+Be.height})}},Ge=setTimeout(()=>{E.current&&(ke(),X(!0))},300);return()=>{clearTimeout(Ge)}},[]);const Fe=React.useCallback(()=>{if(He(),C.current){const ke=C.current.getBounds();K({x:ke.x+ke.width/2-Xe/2,y:ke.y+ke.height})}},[He]);return React.useEffect(()=>{const ke=Ge=>{if(I.current){const Be=I.current.firstChild;Be&&!Be.contains(Ge.target)&&He()}(Ge.type==="resize"||Ge.type==="scroll")&&He()};return window.addEventListener("click",ke),window.addEventListener("resize",ke),window.addEventListener("scroll",ke),()=>{window.removeEventListener("click",ke),window.removeEventListener("resize",ke),window.removeEventListener("scroll",ke)}},[He]),React.useEffect(()=>{var Ke;if(!U||!V||!C.current||!E.current)return;const ke=C.current,Ge=new PIXI__namespace.Container;(Ke=E.current)==null||Ke.addChild(Ge),ke.addListener("transformchange",Fe);const Be=new PIXI__namespace.Graphics;Be.beginFill(16777215,.9),Be.lineStyle(1,14540253),Be.drawRoundedRect(0,0,Xe,Ue,4),Be.endFill(),Ge.addChild(Be);const qe=new F;return qe.alpha=.2,qe.blur=2,qe.distance=3,Ge.filters=[qe],De.forEach((Ye,tt)=>{const Je=new PIXI__namespace.Container,rt=Le+(Me+Oe)*tt,at=Le,nt=new PIXI__namespace.Graphics;nt.beginFill(16119285),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill(),Je.addChild(nt);const Ze=new PIXI__namespace.Text(Ye.icon,{fontSize:14,fontFamily:"Arial",fill:Ye.icon==="🎨"?xe:3355443,fontWeight:"bold"});Ze.x=Me/2-Ze.width/2,Ze.y=Me/2-Ze.height/2,Je.addChild(Ze),Je.x=rt,Je.y=at,Je.interactive=!0,Je.eventMode="static",Je.on("pointerover",()=>{nt.clear(),nt.beginFill(15658734),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill(),Ye.icon!=="🎨"&&(Ze.style.fill=0)}),Je.on("pointerout",()=>{nt.clear(),nt.beginFill(16119285),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill(),Ye.icon!=="🎨"&&(Ze.style.fill=3355443)}),Je.on("pointerdown",()=>{nt.clear(),nt.beginFill(14737632),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill()}),Je.on("pointerup",()=>{nt.clear(),nt.beginFill(16119285),nt.drawRoundedRect(0,0,Me,Me,4),nt.endFill(),Ye.action(rt,at)}),Ge.addChild(Je)}),Ge.x=Y.x,Ge.y=Y.y,Ge.visible=ke.visible,()=>{E.current&&E.current.removeChild(Ge),C.current&&C.current.removeListener("transformchange",Fe)}},[U,V,Y,De,Xe,Ue,xe]),React.useEffect(()=>Pe(Se,Ve,Ae),[Se,Ve,Ae]),React.useEffect(()=>()=>{He()},[He]),jsxRuntimeExports.jsx(react.Sprite,{texture:PIXI__namespace.Texture.EMPTY,ref:E,x:10,y:10})},CYAN=[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],initalTransforms$1={x:0,y:0,width:0,height:0,anchor:.5,animation:Animations.NONE,maxX:0,maxY:0,scale:1,rotation:0,effect:Effects.Normal,overlay:OverlayTypes.NONE,fontSize:10},AbstractContainer=React__namespace.forwardRef((C,E)=>{const[I,B]=React__namespace.useState(!1),[U]=React.useState(!1),[V,X]=React.useState(!1),[Y,K]=React.useState(),J=useDebounce(Y,300),xe=React.useRef(null),Z=React.useRef(null),_e=React.useRef(null),Se=React.useRef(null),Ee=React.useRef(null),Ae=React.useRef(null),Re=React.useRef({isDragging:!1}),{tl:Te}=React.useContext(GsapPixieContext),we=react.useApp(),Pe=we.screen.width,Ie=we.screen.height,{uniqueId:Me,visible:Oe,startAt:Le,transformation:De=initalTransforms$1,applyTransformer:Ve,disabled:Xe,pointerdown:Ue,pointerout:We,pointerover:He,isText:ze,isDragging:je,isGif:Ne,onDoubleClick:$e,isTextEditMode:Fe,handleDragFontSize:ke,handleDragWordWrap:Ge}=C;console.log("AbstractContainer",C);const{x:Be=0,y:qe=0,width:Ke,height:Ye,scale:tt=[1,1],rotation:Je=0,effect:rt,overlay:at,animation:nt=Animations.NONE,fontSize:Ze=16}=De,et=useGsapEffect();useCustomEventListener(Events.COMPLETE,()=>{xe.current}),React__namespace.useImperativeHandle(E,()=>({getIsTransformerDragging:()=>U,getIsMouseOverTransformer:()=>V}),[U,V]),React__namespace.useEffect(()=>{xe.current&&B(!0)},[Me]),React__namespace.useEffect(()=>{K({x:Be,y:qe,width:Ke,height:Ye,animation:nt,maxX:Pe,maxY:Ie})},[Me,nt,Be,qe,Ke,Ye,Pe,Ie]),React__namespace.useEffect(()=>{if(!Z.current)return;const ut=gsap$2.context(()=>{if(Te.current&&J){const{x:ft,y:xt,animation:pt,maxX:mt,maxY:bt}=J||{},_t=Te.current.progress(),vt=et.updateEffect(xe.current,pt,{immediateRender:!1,x:ft,y:xt,overwrite:!0,maxX:mt,maxY:bt});Ee.current&&(Te.current.remove(Ee.current),Ee.current.progress(0).kill()),_t>.1?(vt.eventCallback("onComplete",()=>{vt.remove("onComplete"),Te.current.add(vt,Le),Ee.current=vt}),vt.play()):(vt.progress(1),Te.current.add(vt,Le),Ee.current=vt)}else Ee.current&&Ee.current.progress(0).kill()},Z.current);return()=>{ut.revert()}},[Le,J]);const st=React__namespace.useCallback(()=>{X(!0),He&&!Re.current.isDragging&&He()},[]),it=ut=>parseFloat(ut.toFixed(2)),Qe=React__namespace.useCallback(()=>{var xt,pt;Re.current.isDragging=!0;const{width:ut}=xe.current,ft={x:it(Number((xt=xe.current)==null?void 0:xt.scale.x)),y:it(Number((pt=xe.current)==null?void 0:pt.scale.y))};if(ze){if(ft.x!==1&&ft.y!==1&&_e.current){const mt=Ze*ft.x;ke&&ke(ut,mt,ft)}else if(ft.x!==1)Ge&&Ge(ut,ft);else if(ft.y!==1){const mt=Ze*ft.x;ke&&ke(ut,mt,ft)}}},[ze,Ze,ke,Ge]),ot=React__namespace.useCallback(ut=>{var It,At;const{x:ft,y:xt,width:pt,height:mt,rotation:bt}=xe.current,_t={x:it(Number((It=xe.current)==null?void 0:It.scale.x)),y:it(Number((At=xe.current)==null?void 0:At.scale.y))};let vt=Ze;ze&&_t.x!==1&&_t.y!==1?(vt=Ze*_t.x,ke&&ke(pt,vt,_t)):ze&&_t.x!==1&&Ge&&Ge(pt,_t),C.onAnchorTransformationEnd&&C.onAnchorTransformationEnd({uniqueId:Me,transformation:{...ut.transformation,fontSize:vt}}),Re.current.isDragging=!1},[ze,Me,Ze,ke,Ge]),ht=react.withFilters(react.Container,{matrix:PIXI__namespace.filters.ColorMatrixFilter});return jsxRuntimeExports.jsxs(react.Container,{ref:Z,children:[jsxRuntimeExports.jsx(react.Container,{ref:xe,position:[Be,qe],pivot:[Be,qe],width:Ke,height:Ye,scale:tt,rotation:Je,...!Xe&&Oe&&!U&&!je&&{interactive:!0,buttonMode:!0,pointerdown:Ue,pointerover:He,pointerout:We},children:jsxRuntimeExports.jsxs(react.Container,{ref:Ae,children:[!Ne&&jsxRuntimeExports.jsx(ht,{scale:1,apply:({matrix:ut})=>{rt===Effects.BlackAndWhite?ut.desaturate():rt===Effects.Sepia?ut.sepia():rt===Effects.RetroVintage||rt===Effects.NightVision?ut.negative():rt===Effects.Normal&&ut.reset()},matrix:{enabled:!0,matrix:CYAN},children:jsxRuntimeExports.jsx(react.Container,{ref:_e,children:C.children})}),Ne&&jsxRuntimeExports.jsx(react.Container,{ref:_e,children:C.children}),!isEmpty$1(at)&&at!==OverlayTypes.NONE&&at!==OverlayTypes.NORMAL&&jsxRuntimeExports.jsx(PixiOverlayTilingSprite,{overlay:at,width:Ke,height:Ye,x:Be,y:qe}),jsxRuntimeExports.jsx(react.Sprite,{texture:PIXI__namespace.Texture.WHITE,alpha:0,x:Be,y:qe,width:Ke,height:Ye,scale:tt,rotation:Je})]})}),Ve&&Oe&&!Fe&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(PixiTransformer,{pixiTransformerRef:Se,imageRef:xe,isMounted:I,transformCommit:ot,transformChange:Qe,mouseoverEvent:st,uniqueId:Me,isText:ze,onDoubleClick:$e}),jsxRuntimeExports.jsx(TransformerMenu,{PixiTransformer:Se,uniqueId:Me,isText:!!ze})]})]})}),withFiltersHook=C=>{const{contrast:E=1,saturation:I=1,brightness:B=1,alpha:U=1,red:V=1,blue:X=1,gamma:Y=1,green:K=1,blurRadius:J=0,temperature:xe=0,hue:Z=0,sharpness:_e=0,vignette:Se=0,noise:Ee=0}=C||{},Ae=new PIXI__namespace.Filter(null,`
       precision mediump float;
       varying vec2 vTextureCoord;
       uniform sampler2D uSampler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.107-alpha.113",
+  "version": "0.2.107-alpha.114",
   "description": "reacthub-pixitweenjs is a library that provides a powerful combination of React, PixiJS, GSAP, and image manipulation capabilities in a timeline sequence. With this library, you can easily create stunning animations and interactive graphics for your React applications",
   "author": "khanzzirfan <reacthub.ai@gmail.com>",
   "main": "dist/index.es.js",