@armco/imageeditor 0.0.1

package/cjs/Control-chunk.js

@@ -0,0 +1,3 @@
+"use strict";const v=require("react/jsx-runtime"),h=require("react"),yt=require("react-dom");var D=(t=>(t.POPOVER="popover",t.ANCHOR="anchor",t))(D||{}),q=(t=>(t.LIGHT1="th-light-1",t.DARK1="th-dark-1",t))(q||{}),u=(t=>(t.URL="URL",t.identifier="identifier",t.svgString="svgString",t.b64="b64",t.raw="raw",t))(u||{}),H=(t=>(t.JPEG="image/jpeg",t.PNG="image/png",t.GIF="image/gif",t.WEBP="image/webp",t.SVG="image/svg+xml",t.TIFF="image/tiff",t.BMP="image/bmp",t.ICON="image/x-icon",t))(H||{}),W=(t=>(t.POPOVER="popover",t.ANCHOR="anchor",t))(W||{}),F=(t=>(t.FADEINOUT="fade",t.EXPANDSHRINK="expand-shrink",t))(F||{}),ot=(t=>(t.TOPLEFT="top-left",t.TOPRIGHT="top-right",t.TOPCENTER="top-center",t.RIGHTTOP="right-top",t.RIGHTBOTTOM="right-bottom",t.RIGHTCENTER="right-center",t.BOTTOMLEFT="bottom-left",t.BOTTOMRIGHT="bottom-right",t.BOTTOMCENTER="bottom-center",t.LEFTTOP="left-top",t.LEFTBOTTOM="left-bottom",t.LEFTCENTER="left-center",t.BOTTOM="bottom",t.RIGHT="right",t.LEFT="left",t.TOP="top",t.AUTO="auto",t))(ot||{}),C=(t=>(t.HOVER="hover",t.CLICK="click",t))(C||{}),f=(t=>(t.TOPLEFT="top-left",t.TOPRIGHT="top-right",t.TOPCENTER="top-center",t.RIGHTTOP="right-top",t.RIGHTBOTTOM="right-bottom",t.RIGHTCENTER="right-center",t.BOTTOMLEFT="bottom-left",t.BOTTOMRIGHT="bottom-right",t.BOTTOMCENTER="bottom-center",t.LEFTTOP="left-top",t.LEFTBOTTOM="left-bottom",t.LEFTCENTER="left-center",t.BOTTOM="bottom",t.RIGHT="right",t.LEFT="left",t.TOP="top",t.AUTO="auto",t))(f||{});const Ot=window.getComputedStyle(document.documentElement),E=parseFloat(Ot.fontSize),B=7;function kt(t){if(t){const e=document.querySelector(".ar-Editor__frame");if(e)return e.contentDocument}return document}function rt(t){if(t){const e=document.querySelector(".ar-Editor__frame");if(e)return e.contentWindow}return window}function xt(t,e,o,r){const a=rt(r)||window;if({bottom:e.top+e.height+o.height>a.innerHeight,right:e.left+e.width+o.width>a.innerWidth,left:e.left-o.width<0,top:e.top-o.height<0}[t])return!1;if(t==="left"||t==="right"){if(E>e.top||E>e.bottom)return!1}else if(E>e.left||E>e.right)return!1;return t}function Ct(t,e,o,r,a){const i={[f.BOTTOM]:{top:e.top+e.height+(r?0:B)+(a||0),left:e.left+(e.width-o.width)/2},[f.RIGHT]:{top:e.top+(e.height-o.height)/2,left:e.left+e.width+(r?0:B)},[f.LEFT]:{top:e.top+(e.height-o.height)/2,left:e.left-o.width-(r?0:B)},[f.TOP]:{top:e.top-o.height-(r?0:B)-(a||0),left:e.left+(e.width-o.width)/2}};let{left:n,top:c}=i[t];return t===f.BOTTOM||t===f.TOP?(n<0&&(n=E),n+o.width>window.innerWidth&&(n=`calc(100% - ${o.width}px - ${E}px)`)):(c<0&&(c=E),c+o.height>window.innerHeight&&(c=`calc(100% - ${o.height}px - ${E}px)`)),{left:n,top:c}}function Et(t,e,o,r){if(o&&o!==f.AUTO)return o;const a=[f.BOTTOM,f.RIGHT,f.LEFT,f.TOP];for(const i of a)if(xt(i,t,e,r))return i;return f.BOTTOM}function Rt(t,e,o,r,a,i,n){const c=rt(i)||window;t=a?{left:a[0],x:a[0],top:a[1],y:a[1],height:0,width:0,right:c.screen.width-a[0],bottom:c.screen.height-a[1],toJSON:()=>{}}:t;const s=Et(t,e,o,i),{left:l,top:d}=Ct(s,t,e,r,n);return{leftTop:{top:(""+d).startsWith("calc")?d:d+"px",left:(""+l).startsWith("calc")?l:l+"px"},position:s}}const St=t=>{const{children:e,classes:o,container:r,demo:a,styles:i}=t,[n,c]=h.useState();return h.useEffect(()=>(c(r||document.createElement("div")),()=>c(null)),[r]),h.useEffect(()=>{if(n){const s=kt(a);if(s){const l=s.getElementById("root");l&&l.appendChild(n)}return()=>{if(s){const l=s.getElementById("root");l&&l.removeChild(n)}}}},[n,a]),h.useEffect(()=>{n&&(o&&(n.className=o),n.classList.contains("ar-Portal")||n.classList.add("ar-Portal"),i&&Object.assign(n.style,i))},[o,i,n]),n?yt.createPortal(e,n):null};let Lt=!1;const It={left:"right",right:"left",top:"bottom",bottom:"top"},Pt={left:"135",right:"-45",top:"-135",bottom:"45"},$t=t=>{const{classes:e,children:o,closeOnSelfClick:r,contentClasses:a,contentMatchAnchorWidth:i,demo:n,disabled:c,hideMarker:s,invertBg:l,isOpen:d,isRaw:g,onAnchorClick:O,onClose:b,popAtPointer:A,position:G=ot.AUTO,preserveMarkerSpace:K,stretch:pt,topOffset:X,trigger:R=C.CLICK,animation:j,updateTriggers:ut,wrapText:gt,...mt}=t,w=h.useMemo(()=>j&&!Array.isArray(j)?[j]:j,[j]),I=h.useRef(null),k=h.useRef(null),[x,P]=h.useState(),[ft,vt]=h.useState(),[S,wt]=h.useState(),[J,Z]=h.useState(),[$,V]=h.useState(),U=h.useRef(),Y=h.useRef(0),Q=h.useCallback(()=>{if(!I.current||!k.current)return;const p=I.current.getBoundingClientRect();i&&(k.current.style.width=p.width+"px");const m=k.current.getBoundingClientRect();w&&w.length>0&&w.indexOf(F.EXPANDSHRINK)>-1&&(m.width=Math.floor(m.width*1.25),m.height=Math.floor(m.height*1.25));const{leftTop:T,position:y}=Rt(p,m,G,s&&!K,A&&R===C.CLICK?U.current:null,n,X);vt(T),wt(y)},[i,n,s,A,G,K,X,R,w]);let z,tt;return h.Children.forEach(o,p=>{var m,T;((m=p==null?void 0:p.props)==null?void 0:m.slot)===W.ANCHOR&&(tt=p),((T=p==null?void 0:p.props)==null?void 0:T.slot)===W.POPOVER&&(z=p)}),h.useEffect(()=>{d!==void 0&&(P(d),d&&!$&&V(!0))},[d,$]),h.useEffect(()=>{var p;let m=T=>{I.current&&!I.current.contains(T.target)&&k.current&&!k.current.contains(T.target)&&(P(!1),b&&b())};if(R===C.CLICK&&x){document.addEventListener("mousedown",m);const T=document.querySelector("iframe");return T&&((p=T.contentWindow)==null||p.document.addEventListener("mousedown",m)),()=>{var y;document.removeEventListener("click",m);const M=document.querySelector("iframe");M&&((y=M.contentWindow)==null||y.document.removeEventListener("click",m))}}},[R,x,b]),h.useEffect(()=>{$&&x&&(Q(),Z(!0))},[x,$,Q,...ut||[]]),h.useEffect(()=>{if(!s&&k.current&&J&&S){const p=k.current,m=I.current.getBoundingClientRect(),T=It[S],y=p.getBoundingClientRect();w&&w.length>0&&w.indexOf(F.EXPANDSHRINK)>-1&&(y.width=Math.floor(y.width*1.25),y.height=Math.floor(y.height*1.25));const M=S==="top"||S==="bottom";let et=m[M?"width":"height"]/2-7;const Tt=m.left-y.left+et,bt=m.top-y.top+et;p.style.setProperty("--marker-transform",`rotate(${Pt[S]}deg)`),p.style.setProperty(`--marker-${T}`,"-0.35rem"),p.style.setProperty(`--marker-${S}`,"initial"),p.style.setProperty(`--marker-${M?"left":"top"}`,(M?Tt:bt)+"px"),Z(!1)}},[J,k,s,S,U,w]),v.jsxs(v.Fragment,{children:[v.jsx("span",{className:`ar-Popover__anchor${e?" "+e:""}${pt?" w-100":""}`,onMouseDown:p=>{U.current=[p.clientX,p.clientY],Date.now()-Y.current<500||(Y.current=Date.now(),R===C.CLICK&&!Lt&&!c&&(!$&&V(!0),(d===void 0||d)&&setTimeout(()=>P(!x),0)),x&&b&&b(),O&&O(!x))},ref:I,onMouseEnter:()=>{R===C.HOVER&&!c&&(V(!0),setTimeout(()=>P(!0),0))},onMouseLeave:()=>{R===C.HOVER&&!c&&(setTimeout(()=>P(!1),0),b&&b())},...mt,children:tt}),z&&$&&v.jsx(St,{classes:`position-fixed popover-container${x?" z-3000":" invisible"}`,demo:n,styles:ft||{},children:v.jsx("div",{className:`ar-Popover__content${l?" invert-bg":""}${gt?" wrap":""}${G?" "+G:""} ${a}${w&&w.length>0?" transition "+(w==null?void 0:w.join(" ")):""} ${x?" show":""}${s?" hide-marker":""}${g?"":" p-1 border-radius l2 f25"}`,onClick:()=>r&&P(!1),ref:k,children:z})})]})},nt=t=>{const{children:e,demo:o,...r}=t,[a,i]=h.useState();return v.jsx($t,{contentClasses:"overflow-auto",trigger:C.HOVER,onAnchorClick:()=>{i(!1),setTimeout(()=>i(void 0),10)},animation:[F.EXPANDSHRINK,F.FADEINOUT],demo:o,isOpen:a,hideMarker:!0,preserveMarkerSpace:!0,wrapText:!0,...r,children:e})},st=new DOMParser,L=st.parseFromString(`<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+      <rect width="20" height="20" x="2" y="2" fill="none" stroke="#000" stroke-width="2"rx="2"></rect>
+    </svg>`,H.SVG).querySelector("svg"),Mt=/^[a-zA-Z]{2,3}[./][a-zA-Z0-9]+$/,Nt=t=>typeof t=="object"?u.raw:t.startsWith("data:image/svg+xml;base64,")?u.b64:t.startsWith("<svg")?u.svgString:t.startsWith("http://")||t.startsWith("https://")?u.URL:Mt.test(t)?u.identifier:u.b64,_=t=>{try{const e=st.parseFromString(t,H.SVG).querySelector("svg");return console.warn("Parsed item isn't an svg"),e===null?L:e}catch(e){return console.warn("Error parsing SVG string:",e),L}},At=t=>{try{const e=atob(t);return _(e)}catch(e){return console.error("Error decoding base64 SVG string:",e),L}},jt=t=>{const e=o=>{const r=Array.from(o.children).map(e),a=Array.from(o.attributes).reduce((i,n)=>(i[n.name]=n.value,i),{});return h.createElement(o.tagName,a,...r)};return e(t)},Ht=(t,e)=>{const{attributes:o,theme:r}=t,{colors:a}=o||{},{strokeColor:i,toggleStrokeColor:n,hoverStrokeColor:c,darkStrokeColor:s,darkToggleStrokeColor:l,darkHoverStrokeColor:d}=a||{},{hovered:g,toggled:O}=e;return r===q.DARK1?g&&d?d:O&&l?l:s:g&&c?c:O&&n?n:i},Ft=(t,e)=>{const{attributes:o,theme:r}=t,{colors:a}=o||{},{fillColor:i,toggleFillColor:n,hoverFillColor:c,darkFillColor:s,darkToggleFillColor:l,darkHoverFillColor:d}=a||{},{hovered:g,toggled:O}=e;return r===q.DARK1?g&&d?d:O&&l?l:s:g&&c?c:O&&n?n:i},Gt=(t,e,o)=>{if(!(t instanceof SVGSVGElement))return;const{attributes:r,hoverShadow:a}=e,{strokeWidth:i,styles:n}=r||{},c=((r==null?void 0:r.classes)||"")+(a?" hover-shadow p-1":""),s=Ft(e,o),l=Ht(e,o),d=(r==null?void 0:r.height)||(typeof(n==null?void 0:n.height)=="number"?typeof(n==null?void 0:n.height)+"px":typeof(n==null?void 0:n.height))||(r==null?void 0:r.size)||"1rem",g=(r==null?void 0:r.width)||(typeof(n==null?void 0:n.width)=="number"?typeof(n==null?void 0:n.width)+"px":typeof(n==null?void 0:n.width))||(r==null?void 0:r.size)||"1rem";s&&t.setAttribute("fill",s),l&&t.setAttribute("stroke",l),i&&t.setAttribute("stroke-width",i),t.setAttribute("width",g),t.setAttribute("height",d),t.setAttribute("class",`ar-Icon${c?" "+c:""}`),n&&Object.assign(t.style,n)};(function(){try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ar-Icon{transition:all .3s}.ar-Icon:hover.hover-shadow{box-shadow:0 4px 8px var(--ar-shadow)}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();const Bt={development:"http://localhost:5000/api",production:"https://api.armco.tech"},it={development:"http://localhost:5001/api",production:"https://static.armco.tech"};`${it[process.env.NODE_ENV]}`;class at{constructor(e,o,r){this.message=e,this.status=o,this.extras=r}}const Dt=10;async function Vt(t,e,o){const r=lt(t,e);return o={method:"GET",mode:"cors",credentials:"include",...o},ct(r,o)}async function Ut(t,e,o){let r=lt(t,e);const a=process.env.NODE_ENV||"development",i=r.startsWith("http")?"":it[a];return r=i?i+r:r,o={method:"GET",mode:"cors",credentials:"include",...o},ct(r,o)}async function ct(t,e){const o=process.env.NODE_ENV||"development",r=t.startsWith("http")?"":Bt[o],a=e==null?void 0:e.extras;t=r?r+t:t,e.headers||(e.headers={}),e.toggleLoader&&e.toggleLoader({[t]:!0}),e.headers.Origin=window.location.protocol+"//"+window.location.host;const i=await fetch(t,e),{ok:n,status:c,headers:s}=i;if(n){if(s.get("content-type")){if(s.get("content-type").indexOf("application/json")!==-1){const g=await i.json();return e.toggleLoader&&e.toggleLoader({[t]:!1}),{status:c,body:g,headers:s}}else if(s.get("content-type").indexOf("application/zip")!==-1||s.get("content-type").indexOf("image/png")!==-1||s.get("content-type").indexOf("application/pdf")!==-1||s.get("content-type").indexOf("video/mp4")!==-1||s.get("content-type").indexOf("image/gif")!==-1){const g=await i.blob();return e.toggleLoader&&e.toggleLoader({[t]:!1}),{status:c,body:g,headers:s}}}const d=await i.text();return e.toggleLoader&&e.toggleLoader({[t]:!1}),{status:c,body:d,headers:s}}const l=await i.json();throw e.toggleLoader&&e.toggleLoader({[t]:!1}),console.log(l),new at(l.error||l.message,c,a)}function lt(t,e){if(!e)return t||"";const o=Object.keys(e).length;return t&&o?Object.keys(e).filter(r=>e[r]!==void 0).reduce((r,a,i)=>r.concat(`${encodeURIComponent(a)}=${encodeURIComponent(e[a]).replace(/'/g,"%27")}`+(i<o-1?"&":"")),t+"?"):""}async function zt(t,e={}){let{retryDescriptor:o=[1,3,5],maxAttempts:r=5,onRetry:a,onSuccess:i,onFailure:n}=e;r=Math.min(r,Dt);let c=0;const s=async()=>{try{const l=await t();return i&&i(),l}catch(l){if(c<Math.min(o.length,r)){const d=o[c]*1e3;return c++,a&&a(c,d),console.warn(`Retrying in ${d/1e3} seconds...`),await new Promise(g=>setTimeout(g,d)),s()}else{const d=new at("Max retries reached",500,l);throw n&&n(d),d}}};return s()}var dt=(t=>(t.LIGHT1="th-light-1",t.DARK1="th-dark-1",t))(dt||{});function Wt(){let t=!1;return function(e){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(e)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(e.substr(0,4)))&&(t=!0)}(navigator.userAgent||navigator.vendor||"opera"in window&&window.opera),t}h.createContext({slotted:[]});const _t=h.createContext({theme:dt.DARK1,drawerState:{collapsed:Wt()},notify:()=>{},setDrawerState:()=>{},setLeftPanelContent:()=>{},setLoggedIn:()=>{},setModalState:()=>{},setRightPanelContent:()=>{},setTheme:()=>{},setUser:()=>{}}),qt=()=>{const t=h.useContext(_t);if(!t)throw new Error("useTheme must be used within an ArProvider");return{theme:t.theme,setTheme:t.setTheme}},Kt=t=>e=>{const{theme:o,setTheme:r}=qt();return v.jsx(t,{...e,theme:o,setTheme:r})},N={};class Xt extends h.Component{constructor(e){super(e),this.parseIconDescriptor=o=>{var r,a,i;const n=typeof o=="object"&&"source"in o,c=n&&!!u[o.type];let s=n?o.source:o;const l=c?o.type:Nt(s);let d;if(l===u.identifier||l===u.URL){s=s;const g=l===u.URL?s:s.replace(/./g,"/"),O=()=>(l===u.URL?Vt:Ut)(g);if(N[s])N[s].icon?this.setState({juice:N[s].icon??L,type:l}):(r=N[s].promise)==null||r.then(b=>this.handleIconResponse(b,s,l));else{const b=zt(O).then(A=>(this.handleIconResponse(A,s,l),A));N[s]={promise:b}}}else{switch(l){case u.b64:d=At(s);break;case u.raw:d=v.jsx("img",{src:s,alt:"ar-icon",className:`ar-Icon ${(a=this.props.attributes)==null?void 0:a.classes}${this.props.hoverShadow?" hover-shadow p-1":""}`,style:(i=this.props.attributes)==null?void 0:i.styles});break;case u.svgString:d=_(s);break;default:console.error("Unsupported icon type."),d=L}d&&this.setState({juice:d,type:l})}},this.handleMouseEnter=()=>{var o,r;this.setState({hovered:!0}),(r=(o=this.props.events)==null?void 0:o.onMouseEnter)==null||r.call(o)},this.handleMouseLeave=()=>{var o,r;this.setState({hovered:!1}),(r=(o=this.props.events)==null?void 0:o.onMouseLeave)==null||r.call(o)},this.state={hovered:!1,toggled:e.toggled||!1,juice:L,type:u.svgString},this.parseIconDescriptor=this.parseIconDescriptor.bind(this),this.handleIconResponse=this.handleIconResponse.bind(this)}componentDidMount(){this.props.icon&&this.parseIconDescriptor(this.props.icon)}componentDidUpdate(e){if(JSON.stringify(e.attributes)!==JSON.stringify(this.props.attributes)){const{juice:o}=this.state;o&&Gt(o,this.props,this.state)}}handleIconResponse(e,o,r){var a,i;const n=e.headers.get("content-type");let c;r===u.identifier||n!=null&&n.includes(H.SVG)?c=_(e.body):n&&Object.values(H).findIndex(s=>n.includes(s))>-1?c=v.jsx("img",{src:o,alt:"ar-icon",className:`ar-Icon ${(a=this.props.attributes)==null?void 0:a.classes}${this.props.hoverShadow?" hover-shadow p-1":""}`,style:(i=this.props.attributes)==null?void 0:i.styles}):(console.error("Unsupported content type."),c=L),c&&this.setState({juice:c,type:r}),N[o].icon=c}render(){var e;const{juice:o,type:r}=this.state;return o?r===u.raw?o:h.cloneElement(jt(o),{onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:(e=this.props.events)==null?void 0:e.onClick,onClickCapture:()=>this.setState({toggled:!this.state.toggled})}):null}}const ht=Kt(Xt),Jt=({icon:t,handler:e,tooltip:o})=>v.jsxs(nt,{children:[v.jsx("span",{className:"mx-3 p-1 cursor-pointer",slot:D.ANCHOR,children:v.jsx(ht,{icon:t,attributes:{colors:{fillColor:"#ffffff99"},classes:"cursor-pointer",size:"2rem"},events:{onClick:e}})}),v.jsx("span",{slot:D.POPOVER,children:o})]});exports.B=ht;exports.Control=Jt;exports.L=D;exports.v=nt;

package/cjs/Control.js

@@ -0,0 +1 @@
+"use strict";require("react/jsx-runtime");const r=require("./Control-chunk.js");require("react");require("react-dom");module.exports=r.Control;

package/cjs/ImageEditor.js

@@ -0,0 +1,7 @@
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode('.ar-Image{transition:all .3s}.ar-Image.fill{object-fit:cover}.ar-Image.fill.preserveAspectRatio{object-fit:contain}.ar-Slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.ar-Slider input[type=range]:hover+.ar-Slider__bubble{opacity:1}.ar-Slider input[type=range]:focus{outline:none}.ar-Slider input[type=range]::-webkit-slider-runnable-track{background-color:#053a5f;border-radius:.2rem;height:.2rem}.ar-Slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-6.5px;transition:outline .5s;background-color:var(--ar-bg-slider-track);height:1rem;width:1rem;border-radius:50%}.ar-Slider input[type=range]::-webkit-slider-thumb:hover{border:5px solid var(--ar-bg-slider-track)}.ar-Slider input[type=range]:focus::-webkit-slider-thumb{border:1px solid #053a5f}.ar-Slider input[type=range]::-moz-range-track{background-color:#053a5f;border-radius:.2rem;height:.2rem}.ar-Slider input[type=range]::-moz-range-thumb{border:none;border-radius:0;background-color:var(--ar-bg-slider-track);height:1rem;width:1rem}.ar-Slider input[type=range]:focus::-moz-range-thumb{border:1px solid #053a5f}.ar-Slider .ar-Slider__bubble{background:#454545;color:#fff;padding:4px 12px;border-radius:4px;left:50%;bottom:-1.5rem;transform:translate(-50%);opacity:0;transition:opacity .3s}.ar-Slider .ar-Slider__bubble:after{content:"";position:absolute;width:4px;height:4px;transform:rotate(45deg);background:#454545;top:-2px;left:50%}.ar-Slider .ar-Slider__manual-input{width:2rem}.ar-ImageEditor .ar-ImageEditor__image-container{max-width:60vw;max-height:75vh}.ar-ImageEditor .ar-ImageEditor__editor-controls{transition:background-color .5s,box-shadow .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);border-radius:2rem}.ar-ImageEditor .ar-ImageEditor__editor-controls:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button.is-dirty:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__controls{bottom:0}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container{transition:background-color .5s,box-shadow .5s,max-height .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);max-height:3.2rem;overflow:hidden}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container.expanded{max-height:20rem}.ar-Portal{z-index:2001;white-space:nowrap}.ar-Popover__anchor:focus-visible{outline:none}:root{--marker-transform: rotate(45deg);--marker-top: -.4rem;--marker-left: 10%;--marker-right: unset;--marker-bottom: unset}:root .ar-Popover__content{box-shadow:0 4px 8px -2px #091e4240,0 0 1px #091e424f;z-index:2002;background-color:var(--ar-bg);white-space:nowrap;position:relative;border:1px solid var(--ar-color-border)}:root .ar-Popover__content>*{position:relative}:root .ar-Popover__content.invert-bg{background-color:var(--ar-bg-invert-1)}:root .ar-Popover__content.wrap{white-space:wrap}:root .ar-Popover__content:not(.hide-marker):before{content:"";background-color:var(--ar-bg);position:absolute;height:.7rem;width:.7rem;border-width:1px;border-style:solid;border-color:var(--ar-color-border) transparent transparent var(--ar-color-border);transform:var(--marker-transform);top:var(--marker-top);left:var(--marker-left);right:var(--marker-right);bottom:var(--marker-bottom)}:root .ar-Popover__content.invert-bg:not(.hide-marker):before{background-color:var(--ar-bg-invert-1)}:root .ar-Popover__content.transition{transition:width .15s ease-in-out,height .15s ease-in-out,opacity .3s ease-in-out,transform .15s ease-in-out}:root .ar-Popover__content.transition.expand-shrink{transform:scale(.8)}:root .ar-Popover__content.transition.show{transform:scale(1)}@media (min-width: 576px){:root .ar-Popover__content{max-width:25vw}}:root .ar-List__item{line-height:1.5rem}:root .ar-List__item:hover{background-color:var(--ar-color-font);color:var(--ar-color-font-invert);cursor:pointer}')),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+"use strict";const t=require("react/jsx-runtime"),h=require("react"),p=require("./Control-chunk.js"),B=require("./helper.js");require("react-dom");const z=s=>new URL(s).hostname,F=s=>{const d=z(s);return d==="localhost"||d==="armco.tech"?"use-credentials":"anonymous"},L=h.forwardRef((s,d)=>{const{alt:f,blur:c,brightness:b,classes:n,contrast:m,customBgZIndex:r,demo:N,fill:x,flipHorizontal:y,flipVertical:j,grayscale:C,image:i,isBackground:u,opacity:R,preserveAspectRatio:_,rotateBy:e,saturate:o,scale:l,sepia:v,style:g,title:$}=s,a={};l!==void 0&&(a.transform=`scale(${l})`),y&&(a.transform=`scaleX(-${l!==void 0?l:1})`),j&&(a.transform=(a.transform?a.transform+" ":"")+`scaleY(-${l!==void 0?l:1})`),e&&(a.transform=(a.transform?a.transform+" ":"")+`rotate(${e}deg)`),R&&(a.opacity=R),b&&(a.filter=`brightness(${b})`),m&&(a.filter=(a.filter?a.filter+" ":"")+`contrast(${m})`),o&&(a.filter=(a.filter?a.filter+" ":"")+`saturate(${o})`),c&&(a.filter=(a.filter?a.filter+" ":"")+`blur(${c}px)`),C&&(a.filter=(a.filter?a.filter+" ":"")+`grayscale(${C})`),v&&(a.filter=(a.filter?a.filter+" ":"")+`sepia(${v})`),u&&r&&(a.zIndex=`${r} !important`);const I=N?i||"https://picsum.photos/200/300":i;return t.jsx("img",{ref:d,className:`ar-Image
+          ${x&&!u?" fill w-100 h-100":""}
+          ${_&&!u?" preserveAspectRatio":""}
+          ${u?" position-absolute top-0 start-0 h-100 w-100":""}
+          ${n?" "+n:""}
+        `,crossOrigin:F(I),src:I,alt:f||"ar-image-placeholder",title:$,style:{...a,...g||{}}})});function O(s,d){const f=+s.value,c=+(s.min?s.min:0),b=+(s.max?s.max:100),n=Number((f-c)*100/(b-c));d.innerHTML=""+f;const m=-(n/100*16)+8;d.style.left=`calc(${n}% + ${m}px)`}const k=s=>{const{assistiveContent:d,classes:f,containerClasses:c,focussed:b,id:n,label:m,name:r,size:N,onBlur:x,onChange:y,onFocus:j,precision:C,type:i,value:u,withManual:R,..._}=s,e=h.useRef(null),o=h.useRef(null),[l,v]=h.useState();return h.useEffect(()=>{e.current&&o.current&&O(e.current,o.current),e.current&&e.current.addEventListener("input",()=>{e.current&&o.current&&O(e.current,o.current)})},[]),h.useEffect(()=>{u!==l&&v(u)},[u]),t.jsx("div",{className:`ar-Slider w-100${c?" "+c:""}`,children:t.jsxs("div",{className:"ar-Slider__control flex-v-center position-relative justify-content-between",children:[m&&t.jsx("label",{className:"me-3",htmlFor:n,children:t.jsx("strong",{children:m})}),t.jsxs("div",{className:"ar-Slider__slider-bar flex-center",children:[t.jsx("div",{className:"d-inline-block me-2",children:_.min}),t.jsxs("div",{className:"position-relative",children:[t.jsx("input",{ref:e,id:n,name:r||n,type:"range",className:`ar-TextInput__input h-100 py-2${f?" "+f:""}`,onChange:g=>{v(g.target.value),y&&y(g)},onFocus:j,onBlur:x,value:l,step:C,..._}),l&&t.jsx("output",{ref:o,className:"ar-Slider__bubble position-absolute",htmlFor:n})]}),t.jsx("div",{className:"d-inline-block ms-2",children:_.max}),R&&t.jsx("input",{className:"ar-Slider__manual-input",type:"text",value:l,onChange:g=>{v(g.target.value),y&&y(g)},title:"Maunal Value"})]})]})})};let E={rotateBy:0,brightness:1,contrast:1,saturate:1,grayscale:0,blur:0,sepia:0,opacity:1,scale:1};const S=s=>(s%360+360)%360,w=22.5,A=s=>{const{image:d,imageState:f,onChange:c,onCommit:b,viewOnly:n}=s;E={...E,...f};const m=h.useRef(null),[r,N]=h.useState({...E}),[x,y]=h.useState(),[j,C]=h.useState(),i=(e,o)=>{const l={...r,[e]:o},{rotateBy:v,...g}=l,{rotateBy:$,...a}=E;v!==void 0&&$!==void 0&&C(JSON.stringify(g)!==JSON.stringify(a)||S(v)!==S($)),N(l),c&&c(l)},u=[{icon:"tb.TbFlipHorizontal",handler:()=>i("flipHorizontal",!r.flipHorizontal),tooltip:"Flip Horizontal"},{icon:"tb.TbFlipVertical",handler:()=>i("flipVertical",!r.flipVertical),tooltip:"Flip Vertical"},{icon:"ai.AiOutlineRotateLeft",handler:()=>i("rotateBy",r.rotateBy-w),tooltip:"Rotate Left"},{icon:"ai.AiOutlineRotateRight",handler:()=>i("rotateBy",r.rotateBy+w),tooltip:"Rotate Right"},{icon:"fi.FiZoomIn",handler:()=>i("scale",(r.scale+1)%10),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>i("scale",(r.scale-1<0?0:r.scale-1)%10),tooltip:"Zoom Out"},{icon:x?"md.MdOutlineExpandLess":"md.MdOutlineExpandMore",handler:()=>y(!x),tooltip:x?"Hide Advanced Controls":"Show Advanced Controls"}],R=[{icon:"fi.FiZoomIn",handler:()=>N({...r,scale:(r.scale+1)%10}),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>N({...r,scale:(r.scale-1<0?0:r.scale-1)%10}),tooltip:"Zoom Out"}],_=[[{label:"Brightness",min:0,max:5,precision:.1,handler:e=>i("brightness",+e.target.value)},{label:"Contrast",min:0,max:5,precision:.1,handler:e=>i("contrast",+e.target.value)}],[{label:"Saturation",min:0,max:10,precision:.2,handler:e=>i("saturate",+e.target.value)},{label:"Grayscale",min:0,max:1,precision:.05,handler:e=>i("grayscale",+e.target.value)}],[{label:"Blur",min:0,max:20,handler:e=>i("blur",+e.target.value)},{label:"Sepia",min:0,max:1,precision:.05,handler:e=>i("sepia",+e.target.value)}],[{label:"Opacity",min:0,max:1,precision:.05,handler:e=>i("opacity",+e.target.value)},{label:"Scale",min:0,max:10,precision:.2,handler:e=>i("scale",+e.target.value)}]];return t.jsxs("div",{className:"ar-ImageEditor d-flex flex-column h-100 overflow-auto flex-center position-relative",children:[!n&&t.jsxs("div",{className:"ar-ImageEditor__editor-controls position-absolute p-1 top-0 end-0 hover-shadow-dark",children:[t.jsxs(p.v,{children:[t.jsx("span",{className:"ar-ImageEditor__download-button cursor-pointer border-radius-50 p-1 me-2",slot:p.L.ANCHOR,children:t.jsx(p.B,{icon:"md/MdDownload",attributes:{colors:{fillColor:"#232323cc"},size:"1.5rem"},events:{onClick:()=>B.downloadEditedImage(m.current)}})}),t.jsx("span",{slot:p.L.POPOVER,children:"Download"})]}),t.jsxs(p.v,{children:[t.jsx("span",{className:`ar-ImageEditor__commit-button border-radius-50 p-1${j?" cursor-pointer is-dirty":""}`,slot:p.L.ANCHOR,children:t.jsx(p.B,{icon:"io5.IoCheckmarkCircleSharp",slot:p.L.ANCHOR,attributes:{colors:{fillColor:j?"#008000":"#00800077"},size:"1.5rem"},events:{onClick:()=>j&&b&&b(r)}})}),t.jsx("span",{slot:p.L.POPOVER,children:j?"Save":"Edit image to save"})]})]}),t.jsx("div",{className:"ar-ImageEditor__image-container mb-4",children:t.jsx(L,{ref:m,image:d,fill:!0,preserveAspectRatio:!0,...r})}),t.jsx("div",{className:"ar-ImageEditor__controls py-3 flex-center z-1 position-absolute",children:t.jsxs("div",{className:`ar-ImageEditor__controls-container border-radius prominent hover-shadow-dark${x?" expanded":""}`,children:[t.jsx("div",{className:`ar-ImageEditor__basic-controls px-3 py-2 ${x?"border-bottom":""}`,children:(n?R:u).map(e=>t.jsx(p.Control,{...e}))}),!n&&t.jsx("div",{className:"ar-ImageEditor__advanced-controls mt-2 px-3",children:_.map(e=>t.jsx("div",{className:"row pb-3 border-bottom",children:e.map(o=>t.jsx("div",{className:"col-6",children:t.jsx(k,{label:o.label,min:o.min,max:o.max,onChange:o.handler,precision:o.precision})}))}))})]})})]})};module.exports=A;

package/cjs/helper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");require("react/jsx-runtime");const r=window.getComputedStyle(document.documentElement);parseFloat(r.fontSize);function c(t,a){const e=document.createElement("a");e.href=typeof t=="string"?t:window.URL.createObjectURL(t),e.download=a||"edited-image.png",document.body.appendChild(e),e.click(),document.body.removeChild(e)}const i=t=>{if(t){const a=document.createElement("canvas");a.width=t.naturalWidth,a.height=t.naturalHeight;const e=a.getContext("2d");if(!e)return;const s=t.style.filter,o=t.style.opacity,n=t.style.transform;e.filter=s!==""?s:"",e.globalAlpha=o!==""?parseFloat(o):1,n&&n!=="none"&&h(e,n,a),e.drawImage(t,0,0),c(a.toDataURL())}},h=(t,a,e)=>{const s=a.match(/rotate\((\d+(?:\.\d+)?)deg\)/);if(s){const d=parseFloat(s[1])*(Math.PI/180);t.translate(e.width/2,e.height/2),t.rotate(d),t.translate(-e.width/2,-e.height/2)}const o=a.match(/scale\((\d+(?:\.\d+)?)(?:,\s*(\d+(?:\.\d+)?))?\)/);if(o){const l=parseFloat(o[1]),d=o[2]?parseFloat(o[2]):l;t.scale(l,d)}const n=a.match(/translate\((\d+px)(?:,\s*(\d+px))?\)/);if(n){const l=parseFloat(n[1]),d=n[2]?parseFloat(n[2]):0;t.translate(l,d)}};exports.downloadEditedImage=i;

package/es/Control-chunk.js

@@ -0,0 +1,633 @@
+import { jsxs as nt, Fragment as kt, jsx as y } from "react/jsx-runtime";
+import { useState as L, useEffect as S, useMemo as Ct, useRef as D, useCallback as Et, Children as Rt, createElement as xt, createContext as it, useContext as Lt, Component as St, cloneElement as It } from "react";
+import Pt from "react-dom";
+var _ = /* @__PURE__ */ ((t) => (t.POPOVER = "popover", t.ANCHOR = "anchor", t))(_ || {}), X = /* @__PURE__ */ ((t) => (t.LIGHT1 = "th-light-1", t.DARK1 = "th-dark-1", t))(X || {}), p = /* @__PURE__ */ ((t) => (t.URL = "URL", t.identifier = "identifier", t.svgString = "svgString", t.b64 = "b64", t.raw = "raw", t))(p || {}), G = /* @__PURE__ */ ((t) => (t.JPEG = "image/jpeg", t.PNG = "image/png", t.GIF = "image/gif", t.WEBP = "image/webp", t.SVG = "image/svg+xml", t.TIFF = "image/tiff", t.BMP = "image/bmp", t.ICON = "image/x-icon", t))(G || {}), K = /* @__PURE__ */ ((t) => (t.POPOVER = "popover", t.ANCHOR = "anchor", t))(K || {}), B = /* @__PURE__ */ ((t) => (t.FADEINOUT = "fade", t.EXPANDSHRINK = "expand-shrink", t))(B || {}), st = /* @__PURE__ */ ((t) => (t.TOPLEFT = "top-left", t.TOPRIGHT = "top-right", t.TOPCENTER = "top-center", t.RIGHTTOP = "right-top", t.RIGHTBOTTOM = "right-bottom", t.RIGHTCENTER = "right-center", t.BOTTOMLEFT = "bottom-left", t.BOTTOMRIGHT = "bottom-right", t.BOTTOMCENTER = "bottom-center", t.LEFTTOP = "left-top", t.LEFTBOTTOM = "left-bottom", t.LEFTCENTER = "left-center", t.BOTTOM = "bottom", t.RIGHT = "right", t.LEFT = "left", t.TOP = "top", t.AUTO = "auto", t))(st || {}), C = /* @__PURE__ */ ((t) => (t.HOVER = "hover", t.CLICK = "click", t))(C || {}), m = /* @__PURE__ */ ((t) => (t.TOPLEFT = "top-left", t.TOPRIGHT = "top-right", t.TOPCENTER = "top-center", t.RIGHTTOP = "right-top", t.RIGHTBOTTOM = "right-bottom", t.RIGHTCENTER = "right-center", t.BOTTOMLEFT = "bottom-left", t.BOTTOMRIGHT = "bottom-right", t.BOTTOMCENTER = "bottom-center", t.LEFTTOP = "left-top", t.LEFTBOTTOM = "left-bottom", t.LEFTCENTER = "left-center", t.BOTTOM = "bottom", t.RIGHT = "right", t.LEFT = "left", t.TOP = "top", t.AUTO = "auto", t))(m || {});
+const $t = window.getComputedStyle(document.documentElement), E = parseFloat($t.fontSize), V = 7;
+function Mt(t) {
+  if (t) {
+    const e = document.querySelector(".ar-Editor__frame");
+    if (e)
+      return e.contentDocument;
+  }
+  return document;
+}
+function at(t) {
+  if (t) {
+    const e = document.querySelector(".ar-Editor__frame");
+    if (e)
+      return e.contentWindow;
+  }
+  return window;
+}
+function Nt(t, e, o, r) {
+  const a = at(r) || window;
+  if ({
+    bottom: e.top + e.height + o.height > a.innerHeight,
+    right: e.left + e.width + o.width > a.innerWidth,
+    left: e.left - o.width < 0,
+    top: e.top - o.height < 0
+  }[t])
+    return !1;
+  if (t === "left" || t === "right") {
+    if (E > e.top || E > e.bottom)
+      return !1;
+  } else if (E > e.left || E > e.right)
+    return !1;
+  return t;
+}
+function At(t, e, o, r, a) {
+  const s = {
+    [m.BOTTOM]: {
+      top: e.top + e.height + (r ? 0 : V) + (a || 0),
+      left: e.left + (e.width - o.width) / 2
+    },
+    [m.RIGHT]: {
+      top: e.top + (e.height - o.height) / 2,
+      left: e.left + e.width + (r ? 0 : V)
+    },
+    [m.LEFT]: {
+      top: e.top + (e.height - o.height) / 2,
+      left: e.left - o.width - (r ? 0 : V)
+    },
+    [m.TOP]: {
+      top: e.top - o.height - (r ? 0 : V) - (a || 0),
+      left: e.left + (e.width - o.width) / 2
+    }
+  };
+  let { left: n, top: c } = s[t];
+  return t === m.BOTTOM || t === m.TOP ? (n < 0 && (n = E), n + o.width > window.innerWidth && (n = `calc(100% - ${o.width}px - ${E}px)`)) : (c < 0 && (c = E), c + o.height > window.innerHeight && (c = `calc(100% - ${o.height}px - ${E}px)`)), { left: n, top: c };
+}
+function Ht(t, e, o, r) {
+  if (o && o !== m.AUTO)
+    return o;
+  const a = [
+    m.BOTTOM,
+    m.RIGHT,
+    m.LEFT,
+    m.TOP
+  ];
+  for (const s of a)
+    if (Nt(s, t, e, r))
+      return s;
+  return m.BOTTOM;
+}
+function Ft(t, e, o, r, a, s, n) {
+  const c = at(s) || window;
+  t = a ? {
+    left: a[0],
+    x: a[0],
+    top: a[1],
+    y: a[1],
+    height: 0,
+    width: 0,
+    right: c.screen.width - a[0],
+    bottom: c.screen.height - a[1],
+    toJSON: () => {
+    }
+  } : t;
+  const i = Ht(
+    t,
+    e,
+    o,
+    s
+  ), { left: l, top: d } = At(
+    i,
+    t,
+    e,
+    r,
+    n
+  );
+  return {
+    leftTop: {
+      top: ("" + d).startsWith("calc") ? d : d + "px",
+      left: ("" + l).startsWith("calc") ? l : l + "px"
+    },
+    position: i
+  };
+}
+const Gt = (t) => {
+  const { children: e, classes: o, container: r, demo: a, styles: s } = t, [n, c] = L();
+  return S(() => (c(r || document.createElement("div")), () => c(null)), [r]), S(() => {
+    if (n) {
+      const i = Mt(a);
+      if (i) {
+        const l = i.getElementById("root");
+        l && l.appendChild(n);
+      }
+      return () => {
+        if (i) {
+          const l = i.getElementById("root");
+          l && l.removeChild(n);
+        }
+      };
+    }
+  }, [n, a]), S(() => {
+    n && (o && (n.className = o), n.classList.contains("ar-Portal") || n.classList.add("ar-Portal"), s && Object.assign(n.style, s));
+  }, [o, s, n]), n ? Pt.createPortal(e, n) : null;
+};
+let Bt = !1;
+const jt = {
+  left: "right",
+  right: "left",
+  top: "bottom",
+  bottom: "top"
+}, Dt = {
+  left: "135",
+  right: "-45",
+  top: "-135",
+  bottom: "45"
+}, Vt = (t) => {
+  const {
+    classes: e,
+    children: o,
+    closeOnSelfClick: r,
+    contentClasses: a,
+    contentMatchAnchorWidth: s,
+    demo: n,
+    disabled: c,
+    hideMarker: i,
+    invertBg: l,
+    isOpen: d,
+    isRaw: u,
+    onAnchorClick: b,
+    onClose: w,
+    popAtPointer: H,
+    position: j = st.AUTO,
+    preserveMarkerSpace: J,
+    stretch: gt,
+    topOffset: Z,
+    trigger: R = C.CLICK,
+    animation: F,
+    updateTriggers: mt,
+    wrapText: ft,
+    ...vt
+  } = t, f = Ct(
+    () => F && !Array.isArray(F) ? [F] : F,
+    [F]
+  ), P = D(null), O = D(null), [k, $] = L(), [wt, Tt] = L(), [x, bt] = L(), [Y, Q] = L(), [M, U] = L(), z = D(), tt = D(0), et = Et(() => {
+    if (!P.current || !O.current)
+      return;
+    const h = P.current.getBoundingClientRect();
+    s && (O.current.style.width = h.width + "px");
+    const g = O.current.getBoundingClientRect();
+    f && f.length > 0 && f.indexOf(B.EXPANDSHRINK) > -1 && (g.width = Math.floor(g.width * 1.25), g.height = Math.floor(g.height * 1.25));
+    const { leftTop: v, position: T } = Ft(
+      h,
+      g,
+      j,
+      i && !J,
+      H && R === C.CLICK ? z.current : null,
+      n,
+      Z
+    );
+    Tt(v), bt(T);
+  }, [
+    s,
+    n,
+    i,
+    H,
+    j,
+    J,
+    Z,
+    R,
+    f
+  ]);
+  let W, ot;
+  return Rt.forEach(o, (h) => {
+    var g, v;
+    ((g = h == null ? void 0 : h.props) == null ? void 0 : g.slot) === K.ANCHOR && (ot = h), ((v = h == null ? void 0 : h.props) == null ? void 0 : v.slot) === K.POPOVER && (W = h);
+  }), S(() => {
+    d !== void 0 && ($(d), d && !M && U(!0));
+  }, [d, M]), S(() => {
+    var h;
+    let g = (v) => {
+      P.current && !P.current.contains(v.target) && O.current && !O.current.contains(v.target) && ($(!1), w && w());
+    };
+    if (R === C.CLICK && k) {
+      document.addEventListener("mousedown", g);
+      const v = document.querySelector("iframe");
+      return v && ((h = v.contentWindow) == null || h.document.addEventListener("mousedown", g)), () => {
+        var T;
+        document.removeEventListener("click", g);
+        const N = document.querySelector("iframe");
+        N && ((T = N.contentWindow) == null || T.document.removeEventListener("click", g));
+      };
+    }
+  }, [R, k, w]), S(() => {
+    M && k && (et(), Q(!0));
+  }, [
+    k,
+    M,
+    et,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ...mt || []
+  ]), S(() => {
+    if (!i && O.current && Y && x) {
+      const h = O.current, g = P.current.getBoundingClientRect(), v = jt[x], T = h.getBoundingClientRect();
+      f && f.length > 0 && f.indexOf(B.EXPANDSHRINK) > -1 && (T.width = Math.floor(T.width * 1.25), T.height = Math.floor(T.height * 1.25));
+      const N = x === "top" || x === "bottom";
+      let rt = g[N ? "width" : "height"] / 2 - 7;
+      const yt = g.left - T.left + rt, Ot = g.top - T.top + rt;
+      h.style.setProperty(
+        "--marker-transform",
+        `rotate(${Dt[x]}deg)`
+      ), h.style.setProperty(
+        `--marker-${v}`,
+        "-0.35rem"
+      ), h.style.setProperty(
+        `--marker-${x}`,
+        "initial"
+      ), h.style.setProperty(
+        `--marker-${N ? "left" : "top"}`,
+        (N ? yt : Ot) + "px"
+      ), Q(!1);
+    }
+  }, [
+    Y,
+    O,
+    i,
+    x,
+    z,
+    f
+  ]), /* @__PURE__ */ nt(kt, { children: [
+    /* @__PURE__ */ y(
+      "span",
+      {
+        className: `ar-Popover__anchor${e ? " " + e : ""}${gt ? " w-100" : ""}`,
+        onMouseDown: (h) => {
+          z.current = [h.clientX, h.clientY], Date.now() - tt.current < 500 || (tt.current = Date.now(), R === C.CLICK && !Bt && !c && (!M && U(!0), (d === void 0 || d) && setTimeout(() => $(!k), 0)), k && w && w(), b && b(!k));
+        },
+        ref: P,
+        onMouseEnter: () => {
+          R === C.HOVER && !c && (U(!0), setTimeout(() => $(!0), 0));
+        },
+        onMouseLeave: () => {
+          R === C.HOVER && !c && (setTimeout(() => $(!1), 0), w && w());
+        },
+        ...vt,
+        children: ot
+      }
+    ),
+    W && M && /* @__PURE__ */ y(
+      Gt,
+      {
+        classes: `position-fixed popover-container${k ? " z-3000" : " invisible"}`,
+        demo: n,
+        styles: wt || {},
+        children: /* @__PURE__ */ y(
+          "div",
+          {
+            className: `ar-Popover__content${l ? " invert-bg" : ""}${ft ? " wrap" : ""}${j ? " " + j : ""} ${a}${f && f.length > 0 ? " transition " + (f == null ? void 0 : f.join(" ")) : ""} ${k ? " show" : ""}${i ? " hide-marker" : ""}${u ? "" : " p-1 border-radius l2 f25"}`,
+            onClick: () => r && $(!1),
+            ref: O,
+            children: W
+          }
+        )
+      }
+    )
+  ] });
+}, Ut = (t) => {
+  const { children: e, demo: o, ...r } = t, [a, s] = L();
+  return /* @__PURE__ */ y(
+    Vt,
+    {
+      contentClasses: "overflow-auto",
+      trigger: C.HOVER,
+      onAnchorClick: () => {
+        s(!1), setTimeout(() => s(void 0), 10);
+      },
+      animation: [
+        B.EXPANDSHRINK,
+        B.FADEINOUT
+      ],
+      demo: o,
+      isOpen: a,
+      hideMarker: !0,
+      preserveMarkerSpace: !0,
+      wrapText: !0,
+      ...r,
+      children: e
+    }
+  );
+}, ct = new DOMParser(), I = ct.parseFromString(
+  `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+      <rect width="20" height="20" x="2" y="2" fill="none" stroke="#000" stroke-width="2"rx="2"></rect>
+    </svg>`,
+  G.SVG
+).querySelector("svg"), zt = /^[a-zA-Z]{2,3}[./][a-zA-Z0-9]+$/, Wt = (t) => typeof t == "object" ? p.raw : t.startsWith("data:image/svg+xml;base64,") ? p.b64 : t.startsWith("<svg") ? p.svgString : t.startsWith("http://") || t.startsWith("https://") ? p.URL : zt.test(t) ? p.identifier : p.b64, q = (t) => {
+  try {
+    const e = ct.parseFromString(t, G.SVG).querySelector("svg");
+    return console.warn("Parsed item isn't an svg"), e === null ? I : e;
+  } catch (e) {
+    return console.warn("Error parsing SVG string:", e), I;
+  }
+}, _t = (t) => {
+  try {
+    const e = atob(t);
+    return q(e);
+  } catch (e) {
+    return console.error("Error decoding base64 SVG string:", e), I;
+  }
+}, Kt = (t) => {
+  const e = (o) => {
+    const r = Array.from(o.children).map(e), a = Array.from(o.attributes).reduce((s, n) => (s[n.name] = n.value, s), {});
+    return xt(o.tagName, a, ...r);
+  };
+  return e(t);
+}, qt = (t, e) => {
+  const { attributes: o, theme: r } = t, { colors: a } = o || {}, {
+    strokeColor: s,
+    toggleStrokeColor: n,
+    hoverStrokeColor: c,
+    darkStrokeColor: i,
+    darkToggleStrokeColor: l,
+    darkHoverStrokeColor: d
+  } = a || {}, { hovered: u, toggled: b } = e;
+  return r === X.DARK1 ? u && d ? d : b && l ? l : i : u && c ? c : b && n ? n : s;
+}, Xt = (t, e) => {
+  const { attributes: o, theme: r } = t, { colors: a } = o || {}, {
+    fillColor: s,
+    toggleFillColor: n,
+    hoverFillColor: c,
+    darkFillColor: i,
+    darkToggleFillColor: l,
+    darkHoverFillColor: d
+  } = a || {}, { hovered: u, toggled: b } = e;
+  return r === X.DARK1 ? u && d ? d : b && l ? l : i : u && c ? c : b && n ? n : s;
+}, Jt = (t, e, o) => {
+  if (!(t instanceof SVGSVGElement))
+    return;
+  const { attributes: r, hoverShadow: a } = e, { strokeWidth: s, styles: n } = r || {}, c = ((r == null ? void 0 : r.classes) || "") + (a ? " hover-shadow p-1" : ""), i = Xt(e, o), l = qt(e, o), d = (r == null ? void 0 : r.height) || (typeof (n == null ? void 0 : n.height) == "number" ? typeof (n == null ? void 0 : n.height) + "px" : typeof (n == null ? void 0 : n.height)) || (r == null ? void 0 : r.size) || "1rem", u = (r == null ? void 0 : r.width) || (typeof (n == null ? void 0 : n.width) == "number" ? typeof (n == null ? void 0 : n.width) + "px" : typeof (n == null ? void 0 : n.width)) || (r == null ? void 0 : r.size) || "1rem";
+  i && t.setAttribute("fill", i), l && t.setAttribute("stroke", l), s && t.setAttribute("stroke-width", s), t.setAttribute("width", u), t.setAttribute("height", d), t.setAttribute("class", `ar-Icon${c ? " " + c : ""}`), n && Object.assign(t.style, n);
+};
+(function() {
+  try {
+    if (typeof document < "u") {
+      var t = document.createElement("style");
+      t.appendChild(document.createTextNode(".ar-Icon{transition:all .3s}.ar-Icon:hover.hover-shadow{box-shadow:0 4px 8px var(--ar-shadow)}")), document.head.appendChild(t);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const Zt = {
+  development: "http://localhost:5000/api",
+  production: "https://api.armco.tech"
+}, lt = {
+  development: "http://localhost:5001/api",
+  production: "https://static.armco.tech"
+};
+`${lt[process.env.NODE_ENV]}`;
+class dt {
+  constructor(e, o, r) {
+    this.message = e, this.status = o, this.extras = r;
+  }
+}
+const Yt = 10;
+async function Qt(t, e, o) {
+  const r = pt(t, e);
+  return o = {
+    method: "GET",
+    mode: "cors",
+    credentials: "include",
+    ...o
+  }, ht(r, o);
+}
+async function te(t, e, o) {
+  let r = pt(t, e);
+  const a = process.env.NODE_ENV || "development", s = r.startsWith("http") ? "" : lt[a];
+  return r = s ? s + r : r, o = {
+    method: "GET",
+    mode: "cors",
+    credentials: "include",
+    ...o
+  }, ht(r, o);
+}
+async function ht(t, e) {
+  const o = process.env.NODE_ENV || "development", r = t.startsWith("http") ? "" : Zt[o], a = e == null ? void 0 : e.extras;
+  t = r ? r + t : t, e.headers || (e.headers = {}), e.toggleLoader && e.toggleLoader({ [t]: !0 }), e.headers.Origin = window.location.protocol + "//" + window.location.host;
+  const s = await fetch(t, e), { ok: n, status: c, headers: i } = s;
+  if (n) {
+    if (i.get("content-type")) {
+      if (i.get("content-type").indexOf("application/json") !== -1) {
+        const u = await s.json();
+        return e.toggleLoader && e.toggleLoader({ [t]: !1 }), { status: c, body: u, headers: i };
+      } else if (i.get("content-type").indexOf("application/zip") !== -1 || i.get("content-type").indexOf("image/png") !== -1 || i.get("content-type").indexOf("application/pdf") !== -1 || i.get("content-type").indexOf("video/mp4") !== -1 || i.get("content-type").indexOf("image/gif") !== -1) {
+        const u = await s.blob();
+        return e.toggleLoader && e.toggleLoader({ [t]: !1 }), { status: c, body: u, headers: i };
+      }
+    }
+    const d = await s.text();
+    return e.toggleLoader && e.toggleLoader({ [t]: !1 }), { status: c, body: d, headers: i };
+  }
+  const l = await s.json();
+  throw e.toggleLoader && e.toggleLoader({ [t]: !1 }), console.log(l), new dt(l.error || l.message, c, a);
+}
+function pt(t, e) {
+  if (!e)
+    return t || "";
+  const o = Object.keys(e).length;
+  return t && o ? Object.keys(e).filter((r) => e[r] !== void 0).reduce(
+    (r, a, s) => r.concat(
+      `${encodeURIComponent(a)}=${encodeURIComponent(
+        e[a]
+      ).replace(/'/g, "%27")}` + (s < o - 1 ? "&" : "")
+    ),
+    t + "?"
+  ) : "";
+}
+async function ee(t, e = {}) {
+  let {
+    retryDescriptor: o = [1, 3, 5],
+    maxAttempts: r = 5,
+    onRetry: a,
+    onSuccess: s,
+    onFailure: n
+  } = e;
+  r = Math.min(r, Yt);
+  let c = 0;
+  const i = async () => {
+    try {
+      const l = await t();
+      return s && s(), l;
+    } catch (l) {
+      if (c < Math.min(o.length, r)) {
+        const d = o[c] * 1e3;
+        return c++, a && a(c, d), console.warn(`Retrying in ${d / 1e3} seconds...`), await new Promise((u) => setTimeout(u, d)), i();
+      } else {
+        const d = new dt(
+          "Max retries reached",
+          500,
+          l
+        );
+        throw n && n(d), d;
+      }
+    }
+  };
+  return i();
+}
+var ut = /* @__PURE__ */ ((t) => (t.LIGHT1 = "th-light-1", t.DARK1 = "th-dark-1", t))(ut || {});
+function oe() {
+  let t = !1;
+  return function(e) {
+    (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+      e
+    ) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
+      e.substr(0, 4)
+    )) && (t = !0);
+  }(
+    navigator.userAgent || navigator.vendor || "opera" in window && window.opera
+  ), t;
+}
+it({ slotted: [] });
+const re = it({
+  theme: ut.DARK1,
+  drawerState: { collapsed: oe() },
+  notify: () => {
+  },
+  setDrawerState: () => {
+  },
+  setLeftPanelContent: () => {
+  },
+  setLoggedIn: () => {
+  },
+  setModalState: () => {
+  },
+  setRightPanelContent: () => {
+  },
+  setTheme: () => {
+  },
+  setUser: () => {
+  }
+}), ne = () => {
+  const t = Lt(re);
+  if (!t)
+    throw new Error("useTheme must be used within an ArProvider");
+  return { theme: t.theme, setTheme: t.setTheme };
+}, ie = (t) => (e) => {
+  const { theme: o, setTheme: r } = ne();
+  return /* @__PURE__ */ y(t, { ...e, theme: o, setTheme: r });
+}, A = {};
+class se extends St {
+  constructor(e) {
+    super(e), this.parseIconDescriptor = (o) => {
+      var r, a, s;
+      const n = typeof o == "object" && "source" in o, c = n && !!p[o.type];
+      let i = n ? o.source : o;
+      const l = c ? o.type : Wt(i);
+      let d;
+      if (l === p.identifier || l === p.URL) {
+        i = i;
+        const u = l === p.URL ? i : i.replace(/./g, "/"), b = () => (l === p.URL ? Qt : te)(u);
+        if (A[i])
+          A[i].icon ? this.setState({
+            juice: A[i].icon ?? I,
+            type: l
+          }) : (r = A[i].promise) == null || r.then(
+            (w) => this.handleIconResponse(w, i, l)
+          );
+        else {
+          const w = ee(b).then((H) => (this.handleIconResponse(H, i, l), H));
+          A[i] = { promise: w };
+        }
+      } else {
+        switch (l) {
+          case p.b64:
+            d = _t(i);
+            break;
+          case p.raw:
+            d = /* @__PURE__ */ y(
+              "img",
+              {
+                src: i,
+                alt: "ar-icon",
+                className: `ar-Icon ${(a = this.props.attributes) == null ? void 0 : a.classes}${this.props.hoverShadow ? " hover-shadow p-1" : ""}`,
+                style: (s = this.props.attributes) == null ? void 0 : s.styles
+              }
+            );
+            break;
+          case p.svgString:
+            d = q(i);
+            break;
+          default:
+            console.error("Unsupported icon type."), d = I;
+        }
+        d && this.setState({ juice: d, type: l });
+      }
+    }, this.handleMouseEnter = () => {
+      var o, r;
+      this.setState({ hovered: !0 }), (r = (o = this.props.events) == null ? void 0 : o.onMouseEnter) == null || r.call(o);
+    }, this.handleMouseLeave = () => {
+      var o, r;
+      this.setState({ hovered: !1 }), (r = (o = this.props.events) == null ? void 0 : o.onMouseLeave) == null || r.call(o);
+    }, this.state = {
+      hovered: !1,
+      toggled: e.toggled || !1,
+      juice: I,
+      type: p.svgString
+    }, this.parseIconDescriptor = this.parseIconDescriptor.bind(this), this.handleIconResponse = this.handleIconResponse.bind(this);
+  }
+  componentDidMount() {
+    this.props.icon && this.parseIconDescriptor(this.props.icon);
+  }
+  componentDidUpdate(e) {
+    if (JSON.stringify(e.attributes) !== JSON.stringify(this.props.attributes)) {
+      const { juice: o } = this.state;
+      o && Jt(o, this.props, this.state);
+    }
+  }
+  handleIconResponse(e, o, r) {
+    var a, s;
+    const n = e.headers.get("content-type");
+    let c;
+    r === p.identifier || n != null && n.includes(G.SVG) ? c = q(e.body) : n && Object.values(G).findIndex(
+      (i) => n.includes(i)
+    ) > -1 ? c = /* @__PURE__ */ y(
+      "img",
+      {
+        src: o,
+        alt: "ar-icon",
+        className: `ar-Icon ${(a = this.props.attributes) == null ? void 0 : a.classes}${this.props.hoverShadow ? " hover-shadow p-1" : ""}`,
+        style: (s = this.props.attributes) == null ? void 0 : s.styles
+      }
+    ) : (console.error("Unsupported content type."), c = I), c && this.setState({ juice: c, type: r }), A[o].icon = c;
+  }
+  render() {
+    var e;
+    const { juice: o, type: r } = this.state;
+    return o ? r === p.raw ? o : It(
+      Kt(o),
+      {
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave,
+        onClick: (e = this.props.events) == null ? void 0 : e.onClick,
+        onClickCapture: () => this.setState({ toggled: !this.state.toggled })
+      }
+    ) : null;
+  }
+}
+const ae = ie(se), he = ({
+  icon: t,
+  handler: e,
+  tooltip: o
+}) => /* @__PURE__ */ nt(Ut, { children: [
+  /* @__PURE__ */ y("span", { className: "mx-3 p-1 cursor-pointer", slot: _.ANCHOR, children: /* @__PURE__ */ y(
+    ae,
+    {
+      icon: t,
+      attributes: {
+        colors: { fillColor: "#ffffff99" },
+        classes: "cursor-pointer",
+        size: "2rem"
+      },
+      events: { onClick: e }
+    }
+  ) }),
+  /* @__PURE__ */ y("span", { slot: _.POPOVER, children: o })
+] });
+export {
+  ae as B,
+  he as C,
+  _ as L,
+  Ut as v
+};

package/es/Control.js

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import { C as i } from "./Control-chunk.js";
+import "react";
+import "react-dom";
+export {
+  i as default
+};

package/es/ImageEditor.js

@@ -0,0 +1,370 @@
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode('.ar-Image{transition:all .3s}.ar-Image.fill{object-fit:cover}.ar-Image.fill.preserveAspectRatio{object-fit:contain}.ar-Slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.ar-Slider input[type=range]:hover+.ar-Slider__bubble{opacity:1}.ar-Slider input[type=range]:focus{outline:none}.ar-Slider input[type=range]::-webkit-slider-runnable-track{background-color:#053a5f;border-radius:.2rem;height:.2rem}.ar-Slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-6.5px;transition:outline .5s;background-color:var(--ar-bg-slider-track);height:1rem;width:1rem;border-radius:50%}.ar-Slider input[type=range]::-webkit-slider-thumb:hover{border:5px solid var(--ar-bg-slider-track)}.ar-Slider input[type=range]:focus::-webkit-slider-thumb{border:1px solid #053a5f}.ar-Slider input[type=range]::-moz-range-track{background-color:#053a5f;border-radius:.2rem;height:.2rem}.ar-Slider input[type=range]::-moz-range-thumb{border:none;border-radius:0;background-color:var(--ar-bg-slider-track);height:1rem;width:1rem}.ar-Slider input[type=range]:focus::-moz-range-thumb{border:1px solid #053a5f}.ar-Slider .ar-Slider__bubble{background:#454545;color:#fff;padding:4px 12px;border-radius:4px;left:50%;bottom:-1.5rem;transform:translate(-50%);opacity:0;transition:opacity .3s}.ar-Slider .ar-Slider__bubble:after{content:"";position:absolute;width:4px;height:4px;transform:rotate(45deg);background:#454545;top:-2px;left:50%}.ar-Slider .ar-Slider__manual-input{width:2rem}.ar-ImageEditor .ar-ImageEditor__image-container{max-width:60vw;max-height:75vh}.ar-ImageEditor .ar-ImageEditor__editor-controls{transition:background-color .5s,box-shadow .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);border-radius:2rem}.ar-ImageEditor .ar-ImageEditor__editor-controls:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button.is-dirty:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__controls{bottom:0}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container{transition:background-color .5s,box-shadow .5s,max-height .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);max-height:3.2rem;overflow:hidden}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container.expanded{max-height:20rem}.ar-Portal{z-index:2001;white-space:nowrap}.ar-Popover__anchor:focus-visible{outline:none}:root{--marker-transform: rotate(45deg);--marker-top: -.4rem;--marker-left: 10%;--marker-right: unset;--marker-bottom: unset}:root .ar-Popover__content{box-shadow:0 4px 8px -2px #091e4240,0 0 1px #091e424f;z-index:2002;background-color:var(--ar-bg);white-space:nowrap;position:relative;border:1px solid var(--ar-color-border)}:root .ar-Popover__content>*{position:relative}:root .ar-Popover__content.invert-bg{background-color:var(--ar-bg-invert-1)}:root .ar-Popover__content.wrap{white-space:wrap}:root .ar-Popover__content:not(.hide-marker):before{content:"";background-color:var(--ar-bg);position:absolute;height:.7rem;width:.7rem;border-width:1px;border-style:solid;border-color:var(--ar-color-border) transparent transparent var(--ar-color-border);transform:var(--marker-transform);top:var(--marker-top);left:var(--marker-left);right:var(--marker-right);bottom:var(--marker-bottom)}:root .ar-Popover__content.invert-bg:not(.hide-marker):before{background-color:var(--ar-bg-invert-1)}:root .ar-Popover__content.transition{transition:width .15s ease-in-out,height .15s ease-in-out,opacity .3s ease-in-out,transform .15s ease-in-out}:root .ar-Popover__content.transition.expand-shrink{transform:scale(.8)}:root .ar-Popover__content.transition.show{transform:scale(1)}@media (min-width: 576px){:root .ar-Popover__content{max-width:25vw}}:root .ar-List__item{line-height:1.5rem}:root .ar-List__item:hover{background-color:var(--ar-color-font);color:var(--ar-color-font-invert);cursor:pointer}')),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+import { jsx as a, jsxs as x } from "react/jsx-runtime";
+import { forwardRef as L, useRef as w, useState as R, useEffect as B } from "react";
+import { v as z, L as I, B as F, C as V } from "./Control-chunk.js";
+import { downloadEditedImage as Z } from "./helper.js";
+import "react-dom";
+const M = (o) => new URL(o).hostname, D = (o) => {
+  const d = M(o);
+  return d === "localhost" || d === "armco.tech" ? "use-credentials" : "anonymous";
+}, P = L(
+  (o, d) => {
+    const {
+      alt: u,
+      blur: c,
+      brightness: v,
+      classes: s,
+      contrast: m,
+      customBgZIndex: r,
+      demo: N,
+      fill: h,
+      flipHorizontal: b,
+      flipVertical: y,
+      grayscale: C,
+      image: i,
+      isBackground: p,
+      opacity: $,
+      preserveAspectRatio: _,
+      rotateBy: e,
+      saturate: l,
+      scale: n,
+      sepia: f,
+      style: g,
+      title: O
+    } = o, t = {};
+    n !== void 0 && (t.transform = `scale(${n})`), b && (t.transform = `scaleX(-${n !== void 0 ? n : 1})`), y && (t.transform = (t.transform ? t.transform + " " : "") + `scaleY(-${n !== void 0 ? n : 1})`), e && (t.transform = (t.transform ? t.transform + " " : "") + `rotate(${e}deg)`), $ && (t.opacity = $), v && (t.filter = `brightness(${v})`), m && (t.filter = (t.filter ? t.filter + " " : "") + `contrast(${m})`), l && (t.filter = (t.filter ? t.filter + " " : "") + `saturate(${l})`), c && (t.filter = (t.filter ? t.filter + " " : "") + `blur(${c}px)`), C && (t.filter = (t.filter ? t.filter + " " : "") + `grayscale(${C})`), f && (t.filter = (t.filter ? t.filter + " " : "") + `sepia(${f})`), p && r && (t.zIndex = `${r} !important`);
+    const S = N ? i || "https://picsum.photos/200/300" : i;
+    return /* @__PURE__ */ a(
+      "img",
+      {
+        ref: d,
+        className: `ar-Image
+          ${h && !p ? " fill w-100 h-100" : ""}
+          ${_ && !p ? " preserveAspectRatio" : ""}
+          ${p ? " position-absolute top-0 start-0 h-100 w-100" : ""}
+          ${s ? " " + s : ""}
+        `,
+        crossOrigin: D(S),
+        src: S,
+        alt: u || "ar-image-placeholder",
+        title: O,
+        style: { ...t, ...g || {} }
+      }
+    );
+  }
+);
+function k(o, d) {
+  const u = +o.value, c = +(o.min ? o.min : 0), v = +(o.max ? o.max : 100), s = Number((u - c) * 100 / (v - c));
+  d.innerHTML = "" + u;
+  const m = -(s / 100 * 16) + 8;
+  d.style.left = `calc(${s}% + ${m}px)`;
+}
+const T = (o) => {
+  const {
+    assistiveContent: d,
+    classes: u,
+    containerClasses: c,
+    focussed: v,
+    id: s,
+    label: m,
+    name: r,
+    size: N,
+    onBlur: h,
+    onChange: b,
+    onFocus: y,
+    precision: C,
+    type: i,
+    value: p,
+    withManual: $,
+    ..._
+  } = o, e = w(null), l = w(null), [n, f] = R();
+  return B(() => {
+    e.current && l.current && k(e.current, l.current), e.current && e.current.addEventListener("input", () => {
+      e.current && l.current && k(e.current, l.current);
+    });
+  }, []), B(() => {
+    p !== n && f(p);
+  }, [p]), /* @__PURE__ */ a(
+    "div",
+    {
+      className: `ar-Slider w-100${c ? " " + c : ""}`,
+      children: /* @__PURE__ */ x("div", { className: "ar-Slider__control flex-v-center position-relative justify-content-between", children: [
+        m && /* @__PURE__ */ a("label", { className: "me-3", htmlFor: s, children: /* @__PURE__ */ a("strong", { children: m }) }),
+        /* @__PURE__ */ x("div", { className: "ar-Slider__slider-bar flex-center", children: [
+          /* @__PURE__ */ a("div", { className: "d-inline-block me-2", children: _.min }),
+          /* @__PURE__ */ x("div", { className: "position-relative", children: [
+            /* @__PURE__ */ a(
+              "input",
+              {
+                ref: e,
+                id: s,
+                name: r || s,
+                type: "range",
+                className: `ar-TextInput__input h-100 py-2${u ? " " + u : ""}`,
+                onChange: (g) => {
+                  f(g.target.value), b && b(g);
+                },
+                onFocus: y,
+                onBlur: h,
+                value: n,
+                step: C,
+                ..._
+              }
+            ),
+            n && /* @__PURE__ */ a(
+              "output",
+              {
+                ref: l,
+                className: "ar-Slider__bubble position-absolute",
+                htmlFor: s
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a("div", { className: "d-inline-block ms-2", children: _.max }),
+          $ && /* @__PURE__ */ a(
+            "input",
+            {
+              className: "ar-Slider__manual-input",
+              type: "text",
+              value: n,
+              onChange: (g) => {
+                f(g.target.value), b && b(g);
+              },
+              title: "Maunal Value"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+let E = {
+  rotateBy: 0,
+  brightness: 1,
+  contrast: 1,
+  saturate: 1,
+  grayscale: 0,
+  blur: 0,
+  sepia: 0,
+  opacity: 1,
+  scale: 1
+};
+const A = (o) => (o % 360 + 360) % 360, H = 22.5, Y = (o) => {
+  const { image: d, imageState: u, onChange: c, onCommit: v, viewOnly: s } = o;
+  E = {
+    ...E,
+    ...u
+  };
+  const m = w(null), [r, N] = R({ ...E }), [h, b] = R(), [y, C] = R(), i = (e, l) => {
+    const n = { ...r, [e]: l }, { rotateBy: f, ...g } = n, { rotateBy: O, ...t } = E;
+    f !== void 0 && O !== void 0 && C(
+      JSON.stringify(g) !== JSON.stringify(t) || A(f) !== A(O)
+    ), N(n), c && c(n);
+  }, p = [
+    {
+      icon: "tb.TbFlipHorizontal",
+      handler: () => i("flipHorizontal", !r.flipHorizontal),
+      tooltip: "Flip Horizontal"
+    },
+    {
+      icon: "tb.TbFlipVertical",
+      handler: () => i("flipVertical", !r.flipVertical),
+      tooltip: "Flip Vertical"
+    },
+    {
+      icon: "ai.AiOutlineRotateLeft",
+      handler: () => i("rotateBy", r.rotateBy - H),
+      tooltip: "Rotate Left"
+    },
+    {
+      icon: "ai.AiOutlineRotateRight",
+      handler: () => i("rotateBy", r.rotateBy + H),
+      tooltip: "Rotate Right"
+    },
+    {
+      icon: "fi.FiZoomIn",
+      handler: () => i("scale", (r.scale + 1) % 10),
+      tooltip: "Zoom In"
+    },
+    {
+      icon: "fi.FiZoomOut",
+      handler: () => i(
+        "scale",
+        (r.scale - 1 < 0 ? 0 : r.scale - 1) % 10
+      ),
+      tooltip: "Zoom Out"
+    },
+    {
+      icon: h ? "md.MdOutlineExpandLess" : "md.MdOutlineExpandMore",
+      handler: () => b(!h),
+      tooltip: h ? "Hide Advanced Controls" : "Show Advanced Controls"
+    }
+  ], $ = [
+    {
+      icon: "fi.FiZoomIn",
+      handler: () => N({ ...r, scale: (r.scale + 1) % 10 }),
+      tooltip: "Zoom In"
+    },
+    {
+      icon: "fi.FiZoomOut",
+      handler: () => N({
+        ...r,
+        scale: (r.scale - 1 < 0 ? 0 : r.scale - 1) % 10
+      }),
+      tooltip: "Zoom Out"
+    }
+  ], _ = [
+    [
+      {
+        label: "Brightness",
+        min: 0,
+        max: 5,
+        precision: 0.1,
+        handler: (e) => i("brightness", +e.target.value)
+      },
+      {
+        label: "Contrast",
+        min: 0,
+        max: 5,
+        precision: 0.1,
+        handler: (e) => i("contrast", +e.target.value)
+      }
+    ],
+    [
+      {
+        label: "Saturation",
+        min: 0,
+        max: 10,
+        precision: 0.2,
+        handler: (e) => i("saturate", +e.target.value)
+      },
+      {
+        label: "Grayscale",
+        min: 0,
+        max: 1,
+        precision: 0.05,
+        handler: (e) => i("grayscale", +e.target.value)
+      }
+    ],
+    [
+      {
+        label: "Blur",
+        min: 0,
+        max: 20,
+        handler: (e) => i("blur", +e.target.value)
+      },
+      {
+        label: "Sepia",
+        min: 0,
+        max: 1,
+        precision: 0.05,
+        handler: (e) => i("sepia", +e.target.value)
+      }
+    ],
+    [
+      {
+        label: "Opacity",
+        min: 0,
+        max: 1,
+        precision: 0.05,
+        handler: (e) => i("opacity", +e.target.value)
+      },
+      {
+        label: "Scale",
+        min: 0,
+        max: 10,
+        precision: 0.2,
+        handler: (e) => i("scale", +e.target.value)
+      }
+    ]
+  ];
+  return /* @__PURE__ */ x("div", { className: "ar-ImageEditor d-flex flex-column h-100 overflow-auto flex-center position-relative", children: [
+    !s && /* @__PURE__ */ x("div", { className: "ar-ImageEditor__editor-controls position-absolute p-1 top-0 end-0 hover-shadow-dark", children: [
+      /* @__PURE__ */ x(z, { children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "ar-ImageEditor__download-button cursor-pointer border-radius-50 p-1 me-2",
+            slot: I.ANCHOR,
+            children: /* @__PURE__ */ a(
+              F,
+              {
+                icon: "md/MdDownload",
+                attributes: {
+                  colors: { fillColor: "#232323cc" },
+                  size: "1.5rem"
+                },
+                events: {
+                  onClick: () => Z(m.current)
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ a("span", { slot: I.POPOVER, children: "Download" })
+      ] }),
+      /* @__PURE__ */ x(z, { children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: `ar-ImageEditor__commit-button border-radius-50 p-1${y ? " cursor-pointer is-dirty" : ""}`,
+            slot: I.ANCHOR,
+            children: /* @__PURE__ */ a(
+              F,
+              {
+                icon: "io5.IoCheckmarkCircleSharp",
+                slot: I.ANCHOR,
+                attributes: {
+                  colors: { fillColor: y ? "#008000" : "#00800077" },
+                  size: "1.5rem"
+                },
+                events: {
+                  onClick: () => y && v && v(r)
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ a("span", { slot: I.POPOVER, children: y ? "Save" : "Edit image to save" })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "ar-ImageEditor__image-container mb-4", children: /* @__PURE__ */ a(
+      P,
+      {
+        ref: m,
+        image: d,
+        fill: !0,
+        preserveAspectRatio: !0,
+        ...r
+      }
+    ) }),
+    /* @__PURE__ */ a("div", { className: "ar-ImageEditor__controls py-3 flex-center z-1 position-absolute", children: /* @__PURE__ */ x(
+      "div",
+      {
+        className: `ar-ImageEditor__controls-container border-radius prominent hover-shadow-dark${h ? " expanded" : ""}`,
+        children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: `ar-ImageEditor__basic-controls px-3 py-2 ${h ? "border-bottom" : ""}`,
+              children: (s ? $ : p).map((e) => /* @__PURE__ */ a(V, { ...e }))
+            }
+          ),
+          !s && /* @__PURE__ */ a("div", { className: "ar-ImageEditor__advanced-controls mt-2 px-3", children: _.map((e) => /* @__PURE__ */ a("div", { className: "row pb-3 border-bottom", children: e.map((l) => /* @__PURE__ */ a("div", { className: "col-6", children: /* @__PURE__ */ a(
+            T,
+            {
+              label: l.label,
+              min: l.min,
+              max: l.max,
+              onChange: l.handler,
+              precision: l.precision
+            }
+          ) })) })) })
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  Y as default
+};

package/es/helper.js

@@ -0,0 +1,40 @@
+import "react";
+import "react/jsx-runtime";
+const d = window.getComputedStyle(document.documentElement);
+parseFloat(d.fontSize);
+function r(t, a) {
+  const e = document.createElement("a");
+  e.href = typeof t == "string" ? t : window.URL.createObjectURL(t), e.download = a || "edited-image.png", document.body.appendChild(e), e.click(), document.body.removeChild(e);
+}
+const f = (t) => {
+  if (t) {
+    const a = document.createElement("canvas");
+    a.width = t.naturalWidth, a.height = t.naturalHeight;
+    const e = a.getContext("2d");
+    if (!e)
+      return;
+    const s = t.style.filter, o = t.style.opacity, n = t.style.transform;
+    e.filter = s !== "" ? s : "", e.globalAlpha = o !== "" ? parseFloat(o) : 1, n && n !== "none" && i(e, n, a), e.drawImage(t, 0, 0), r(a.toDataURL());
+  }
+}, i = (t, a, e) => {
+  const s = a.match(/rotate\((\d+(?:\.\d+)?)deg\)/);
+  if (s) {
+    const c = parseFloat(s[1]) * (Math.PI / 180);
+    t.translate(e.width / 2, e.height / 2), t.rotate(c), t.translate(-e.width / 2, -e.height / 2);
+  }
+  const o = a.match(
+    /scale\((\d+(?:\.\d+)?)(?:,\s*(\d+(?:\.\d+)?))?\)/
+  );
+  if (o) {
+    const l = parseFloat(o[1]), c = o[2] ? parseFloat(o[2]) : l;
+    t.scale(l, c);
+  }
+  const n = a.match(/translate\((\d+px)(?:,\s*(\d+px))?\)/);
+  if (n) {
+    const l = parseFloat(n[1]), c = n[2] ? parseFloat(n[2]) : 0;
+    t.translate(l, c);
+  }
+};
+export {
+  f as downloadEditedImage
+};

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@armco/imageeditor",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "cjs/ImageEditor.js",
+  "module": "es/ImageEditor.js",
+  "types": "types/ImageEditor.d.ts",
+  "scripts": {
+    "*": "rm -rf build && tsc && vite build",
+    "test": "vitest",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "publish:sh": "./publish.sh",
+    "publish:local": "./publish-local.sh"
+  },
+  "dependencies": {
+    "@armco/icon": "^0.0.3",
+    "@armco/shared-components": "^0.0.50",
+    "@armco/utils": "^0.0.16",
+    "@types/node": "^22.5.5",
+    "react": ">16.8.0",
+    "react-dom": ">16.8.0",
+    "vite-plugin-dts": "^4.2.1"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.2.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.0.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jsdom": "^21.1.0",
+    "prettier": "^2.7.1",
+    "prettier-config-nick": "^1.0.2",
+    "sass": "^1.63.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vitest": "^0.30.1"
+  },
+  "peerDependencies": {
+    "react": ">16.8.0",
+    "react-dom": ">16.8.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "plugins": [
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": "error",
+      "react/jsx-no-target-blank": "off"
+    }
+  },
+  "prettier": "prettier-config-nick",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ReStruct-Corporate-Advantage/imageeditor.git"
+  },
+  "keywords": [
+    "components",
+    "atomic",
+    "building-blocks",
+    "foundation"
+  ],
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ReStruct-Corporate-Advantage/imageeditor/issues"
+  },
+  "homepage": "https://github.com/ReStruct-Corporate-Advantage/imageeditor#readme"
+}

package/types/Control.d.ts

@@ -0,0 +1,7 @@
+import { FunctionType } from '@armco/types';
+declare const Control: ({ icon, handler, tooltip, }: {
+    icon: string;
+    handler: FunctionType;
+    tooltip: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Control;

package/types/ImageEditor.d.ts

@@ -0,0 +1,3 @@
+import { ImageEditorProps } from '@armco/types';
+declare const ImageEditor: (props: ImageEditorProps) => JSX.Element;
+export default ImageEditor;

package/types/helper.d.ts

@@ -0,0 +1 @@
+export declare const downloadEditedImage: (image: HTMLImageElement | null) => void;