@armco/imageeditor 0.0.1 → 0.0.3

package/cjs/Control-chunk.js

@@ -1,3 +1 @@
-"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;
+"use strict";const g=require("react/jsx-runtime"),s=require("react"),lt=require("react-dom"),ut=require("@armco/icon");var y=(t=>(t.POPOVER="popover",t.ANCHOR="anchor",t))(y||{}),F=(t=>(t.POPOVER="popover",t.ANCHOR="anchor",t))(F||{}),N=(t=>(t.FADEINOUT="fade",t.EXPANDSHRINK="expand-shrink",t))(N||{}),z=(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))(z||{}),w=(t=>(t.HOVER="hover",t.CLICK="click",t))(w||{}),d=(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))(d||{});const at=window.getComputedStyle(document.documentElement),C=parseFloat(at.fontSize),B=7;function ht(t){if(t){const e=document.querySelector(".ar-Editor__frame");if(e)return e.contentDocument}return document}function J(t){if(t){const e=document.querySelector(".ar-Editor__frame");if(e)return e.contentWindow}return window}function dt(t,e,o,c){const n=J(c)||window;if({bottom:e.top+e.height+o.height>n.innerHeight,right:e.left+e.width+o.width>n.innerWidth,left:e.left-o.width<0,top:e.top-o.height<0}[t])return!1;if(t==="left"||t==="right"){if(C>e.top||C>e.bottom)return!1}else if(C>e.left||C>e.right)return!1;return t}function ft(t,e,o,c,n){const l={[d.BOTTOM]:{top:e.top+e.height+(c?0:B)+(n||0),left:e.left+(e.width-o.width)/2},[d.RIGHT]:{top:e.top+(e.height-o.height)/2,left:e.left+e.width+(c?0:B)},[d.LEFT]:{top:e.top+(e.height-o.height)/2,left:e.left-o.width-(c?0:B)},[d.TOP]:{top:e.top-o.height-(c?0:B)-(n||0),left:e.left+(e.width-o.width)/2}};let{left:r,top:a}=l[t];return t===d.BOTTOM||t===d.TOP?(r<0&&(r=C),r+o.width>window.innerWidth&&(r=`calc(100% - ${o.width}px - ${C}px)`)):(a<0&&(a=C),a+o.height>window.innerHeight&&(a=`calc(100% - ${o.height}px - ${C}px)`)),{left:r,top:a}}function Tt(t,e,o,c){if(o&&o!==d.AUTO)return o;const n=[d.BOTTOM,d.RIGHT,d.LEFT,d.TOP];for(const l of n)if(dt(l,t,e,c))return l;return d.BOTTOM}function pt(t,e,o,c,n,l,r){const a=J(l)||window;t=n?{left:n[0],x:n[0],top:n[1],y:n[1],height:0,width:0,right:a.screen.width-n[0],bottom:a.screen.height-n[1],toJSON:()=>{}}:t;const h=Tt(t,e,o,l),{left:p,top:m}=ft(h,t,e,c,r);return{leftTop:{top:(""+m).startsWith("calc")?m:m+"px",left:(""+p).startsWith("calc")?p:p+"px"},position:h}}const Ot=t=>{const{children:e,classes:o,container:c,demo:n,styles:l}=t,[r,a]=s.useState();return s.useEffect(()=>(a(c||document.createElement("div")),()=>a(null)),[c]),s.useEffect(()=>{if(r){const h=ht(n);if(h){const p=h.getElementById("root");p&&p.appendChild(r)}return()=>{if(h){const p=h.getElementById("root");p&&p.removeChild(r)}}}},[r,n]),s.useEffect(()=>{r&&(o&&(r.className=o),r.classList.contains("ar-Portal")||r.classList.add("ar-Portal"),l&&Object.assign(r.style,l))},[o,l,r]),r?lt.createPortal(e,r):null};let mt=!1;const gt={left:"right",right:"left",top:"bottom",bottom:"top"},Et={left:"135",right:"-45",top:"-135",bottom:"45"},Rt=t=>{const{classes:e,children:o,closeOnSelfClick:c,contentClasses:n,contentMatchAnchorWidth:l,demo:r,disabled:a,hideMarker:h,invertBg:p,isOpen:m,isRaw:Q,onAnchorClick:G,onClose:P,popAtPointer:j,position:$=z.AUTO,preserveMarkerSpace:D,stretch:Z,topOffset:_,trigger:v=w.CLICK,animation:x,updateTriggers:tt,wrapText:et,...ot}=t,f=s.useMemo(()=>x&&!Array.isArray(x)?[x]:x,[x]),H=s.useRef(null),E=s.useRef(null),[R,I]=s.useState(),[rt,nt]=s.useState(),[L,it]=s.useState(),[K,V]=s.useState(),[M,S]=s.useState(),A=s.useRef(),q=s.useRef(0),W=s.useCallback(()=>{if(!H.current||!E.current)return;const i=H.current.getBoundingClientRect();l&&(E.current.style.width=i.width+"px");const u=E.current.getBoundingClientRect();f&&f.length>0&&f.indexOf(N.EXPANDSHRINK)>-1&&(u.width=Math.floor(u.width*1.25),u.height=Math.floor(u.height*1.25));const{leftTop:T,position:O}=pt(i,u,$,h&&!D,j&&v===w.CLICK?A.current:null,r,_);nt(T),it(O)},[l,r,h,j,$,D,_,v,f]);let k,U;return s.Children.forEach(o,i=>{var u,T;((u=i==null?void 0:i.props)==null?void 0:u.slot)===F.ANCHOR&&(U=i),((T=i==null?void 0:i.props)==null?void 0:T.slot)===F.POPOVER&&(k=i)}),s.useEffect(()=>{m!==void 0&&(I(m),m&&!M&&S(!0))},[m,M]),s.useEffect(()=>{var i;let u=T=>{H.current&&!H.current.contains(T.target)&&E.current&&!E.current.contains(T.target)&&(I(!1),P&&P())};if(v===w.CLICK&&R){document.addEventListener("mousedown",u);const T=document.querySelector("iframe");return T&&((i=T.contentWindow)==null||i.document.addEventListener("mousedown",u)),()=>{var O;document.removeEventListener("click",u);const b=document.querySelector("iframe");b&&((O=b.contentWindow)==null||O.document.removeEventListener("click",u))}}},[v,R,P]),s.useEffect(()=>{M&&R&&(W(),V(!0))},[R,M,W,...tt||[]]),s.useEffect(()=>{if(!h&&E.current&&K&&L){const i=E.current,u=H.current.getBoundingClientRect(),T=gt[L],O=i.getBoundingClientRect();f&&f.length>0&&f.indexOf(N.EXPANDSHRINK)>-1&&(O.width=Math.floor(O.width*1.25),O.height=Math.floor(O.height*1.25));const b=L==="top"||L==="bottom";let X=u[b?"width":"height"]/2-7;const st=u.left-O.left+X,ct=u.top-O.top+X;i.style.setProperty("--marker-transform",`rotate(${Et[L]}deg)`),i.style.setProperty(`--marker-${T}`,"-0.35rem"),i.style.setProperty(`--marker-${L}`,"initial"),i.style.setProperty(`--marker-${b?"left":"top"}`,(b?st:ct)+"px"),V(!1)}},[K,E,h,L,A,f]),g.jsxs(g.Fragment,{children:[g.jsx("span",{className:`ar-Popover__anchor${e?" "+e:""}${Z?" w-100":""}`,onMouseDown:i=>{A.current=[i.clientX,i.clientY],Date.now()-q.current<500||(q.current=Date.now(),v===w.CLICK&&!mt&&!a&&(!M&&S(!0),(m===void 0||m)&&setTimeout(()=>I(!R),0)),R&&P&&P(),G&&G(!R))},ref:H,onMouseEnter:()=>{v===w.HOVER&&!a&&(S(!0),setTimeout(()=>I(!0),0))},onMouseLeave:()=>{v===w.HOVER&&!a&&(setTimeout(()=>I(!1),0),P&&P())},...ot,children:U}),k&&M&&g.jsx(Ot,{classes:`position-fixed popover-container${R?" z-3000":" invisible"}`,demo:r,styles:rt||{},children:g.jsx("div",{className:`ar-Popover__content${p?" invert-bg":""}${et?" wrap":""}${$?" "+$:""} ${n}${f&&f.length>0?" transition "+(f==null?void 0:f.join(" ")):""} ${R?" show":""}${h?" hide-marker":""}${Q?"":" p-1 border-radius l2 f25"}`,onClick:()=>c&&I(!1),ref:E,children:k})})]})},Y=t=>{const{children:e,demo:o,...c}=t,[n,l]=s.useState();return g.jsx(Rt,{contentClasses:"overflow-auto",trigger:w.HOVER,onAnchorClick:()=>{l(!1),setTimeout(()=>l(void 0),10)},animation:[N.EXPANDSHRINK,N.FADEINOUT],demo:o,isOpen:n,hideMarker:!0,preserveMarkerSpace:!0,wrapText:!0,...c,children:e})},wt=({icon:t,handler:e,tooltip:o})=>g.jsxs(Y,{children:[g.jsx("span",{className:"mx-3 p-1 cursor-pointer",slot:y.ANCHOR,children:g.jsx(ut,{icon:t,attributes:{colors:{fillColor:"#ffffff99"},classes:"cursor-pointer",size:"2rem"},events:{onClick:e}})}),g.jsx("span",{slot:y.POPOVER,children:o})]});exports.Control=wt;exports.L=y;exports.v=Y;

package/cjs/Control.js

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

package/cjs/ImageEditor.js

@@ -1,7 +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":""}
+"use strict";const t=require("react/jsx-runtime"),p=require("react"),j=require("./Control-chunk.js"),O=require("@armco/icon"),z=require("./helper.js");require("react-dom");const F=s=>new URL(s).hostname,L=s=>{const d=F(s);return d==="localhost"||d==="armco.tech"?"use-credentials":"anonymous"},k=p.forwardRef((s,d)=>{const{alt:h,blur:c,brightness:g,classes:n,contrast:m,customBgZIndex:r,demo:N,fill:f,flipHorizontal:b,flipVertical:y,grayscale:C,image:i,isBackground:u,opacity:I,preserveAspectRatio:_,rotateBy:e,saturate:o,scale:l,sepia:x,style:v,title:R}=s,a={};l!==void 0&&(a.transform=`scale(${l})`),b&&(a.transform=`scaleX(-${l!==void 0?l:1})`),y&&(a.transform=(a.transform?a.transform+" ":"")+`scaleY(-${l!==void 0?l:1})`),e&&(a.transform=(a.transform?a.transform+" ":"")+`rotate(${e}deg)`),I&&(a.opacity=I),g&&(a.filter=`brightness(${g})`),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})`),x&&(a.filter=(a.filter?a.filter+" ":"")+`sepia(${x})`),u&&r&&(a.zIndex=`${r} !important`);const E=N?i||"https://picsum.photos/200/300":i;return t.jsx("img",{ref:d,className:`ar-Image
+          ${f&&!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;
+        `,crossOrigin:L(E),src:E,alt:h||"ar-image-placeholder",title:R,style:{...a,...v||{}}})});function S(s,d){const h=+s.value,c=+(s.min?s.min:0),g=+(s.max?s.max:100),n=Number((h-c)*100/(g-c));d.innerHTML=""+h;const m=-(n/100*16)+8;d.style.left=`calc(${n}% + ${m}px)`}const A=s=>{const{assistiveContent:d,classes:h,containerClasses:c,focussed:g,id:n,label:m,name:r,size:N,onBlur:f,onChange:b,onFocus:y,precision:C,type:i,value:u,withManual:I,..._}=s,e=p.useRef(null),o=p.useRef(null),[l,x]=p.useState();return p.useEffect(()=>{e.current&&o.current&&S(e.current,o.current),e.current&&e.current.addEventListener("input",()=>{e.current&&o.current&&S(e.current,o.current)})},[]),p.useEffect(()=>{u!==l&&x(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${h?" "+h:""}`,onChange:v=>{x(v.target.value),b&&b(v)},onFocus:y,onBlur:f,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}),I&&t.jsx("input",{className:"ar-Slider__manual-input",type:"text",value:l,onChange:v=>{x(v.target.value),b&&b(v)},title:"Maunal Value"})]})]})})};let $={rotateBy:0,brightness:1,contrast:1,saturate:1,grayscale:0,blur:0,sepia:0,opacity:1,scale:1};const w=s=>(s%360+360)%360,B=22.5,H=s=>{const{image:d,imageState:h,onChange:c,onCommit:g,viewOnly:n}=s;$={...$,...h};const m=p.useRef(null),[r,N]=p.useState({...$}),[f,b]=p.useState(),[y,C]=p.useState(),i=(e,o)=>{const l={...r,[e]:o},{rotateBy:x,...v}=l,{rotateBy:R,...a}=$;x!==void 0&&R!==void 0&&C(JSON.stringify(v)!==JSON.stringify(a)||w(x)!==w(R)),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-B),tooltip:"Rotate Left"},{icon:"ai.AiOutlineRotateRight",handler:()=>i("rotateBy",r.rotateBy+B),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:f?"md.MdOutlineExpandLess":"md.MdOutlineExpandMore",handler:()=>b(!f),tooltip:f?"Hide Advanced Controls":"Show Advanced Controls"}],I=[{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(j.v,{children:[t.jsx("span",{className:"ar-ImageEditor__download-button cursor-pointer border-radius-50 p-1 me-2",slot:j.L.ANCHOR,children:t.jsx(O,{icon:"md/MdDownload",attributes:{colors:{fillColor:"#232323cc"},size:"1.5rem"},events:{onClick:()=>z.downloadEditedImage(m.current)}})}),t.jsx("span",{slot:j.L.POPOVER,children:"Download"})]}),t.jsxs(j.v,{children:[t.jsx("span",{className:`ar-ImageEditor__commit-button border-radius-50 p-1${y?" cursor-pointer is-dirty":""}`,slot:j.L.ANCHOR,children:t.jsx(O,{icon:"io5.IoCheckmarkCircleSharp",slot:j.L.ANCHOR,attributes:{colors:{fillColor:y?"#008000":"#00800077"},size:"1.5rem"},events:{onClick:()=>y&&g&&g(r)}})}),t.jsx("span",{slot:j.L.POPOVER,children:y?"Save":"Edit image to save"})]})]}),t.jsx("div",{className:"ar-ImageEditor__image-container mb-4",children:t.jsx(k,{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${f?" expanded":""}`,children:[t.jsx("div",{className:`ar-ImageEditor__basic-controls px-3 py-2 ${f?"border-bottom":""}`,children:(n?I:u).map(e=>t.jsx(j.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(A,{label:o.label,min:o.min,max:o.max,onChange:o.handler,precision:o.precision})}))}))})]})})]})};module.exports=H;

package/es/Control-chunk.js

@@ -1,9 +1,10 @@
-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) {
+import { jsxs as Y, Fragment as at, jsx as H } from "react/jsx-runtime";
+import { useState as v, useEffect as L, useMemo as dt, useRef as x, useCallback as ut, Children as Tt } from "react";
+import ft from "react-dom";
+import pt from "@armco/icon";
+var G = /* @__PURE__ */ ((t) => (t.POPOVER = "popover", t.ANCHOR = "anchor", t))(G || {}), D = /* @__PURE__ */ ((t) => (t.POPOVER = "popover", t.ANCHOR = "anchor", t))(D || {}), B = /* @__PURE__ */ ((t) => (t.FADEINOUT = "fade", t.EXPANDSHRINK = "expand-shrink", t))(B || {}), Q = /* @__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))(Q || {}), E = /* @__PURE__ */ ((t) => (t.HOVER = "hover", t.CLICK = "click", t))(E || {}), d = /* @__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))(d || {});
+const mt = window.getComputedStyle(document.documentElement), w = parseFloat(mt.fontSize), A = 7;
+function Ot(t) {
   if (t) {
     const e = document.querySelector(".ar-Editor__frame");
     if (e)
@@ -11,7 +12,7 @@ function Mt(t) {
   }
   return document;
 }
-function at(t) {
+function Z(t) {
   if (t) {
     const e = document.querySelector(".ar-Editor__frame");
     if (e)
@@ -19,600 +20,303 @@ function at(t) {
   }
   return window;
 }
-function Nt(t, e, o, r) {
-  const a = at(r) || window;
+function gt(t, e, o, l) {
+  const n = Z(l) || window;
   if ({
-    bottom: e.top + e.height + o.height > a.innerHeight,
-    right: e.left + e.width + o.width > a.innerWidth,
+    bottom: e.top + e.height + o.height > n.innerHeight,
+    right: e.left + e.width + o.width > n.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)
+    if (w > e.top || w > e.bottom)
       return !1;
-  } else if (E > e.left || E > e.right)
+  } else if (w > e.left || w > 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),
+function Et(t, e, o, l, n) {
+  const c = {
+    [d.BOTTOM]: {
+      top: e.top + e.height + (l ? 0 : A) + (n || 0),
       left: e.left + (e.width - o.width) / 2
     },
-    [m.RIGHT]: {
+    [d.RIGHT]: {
       top: e.top + (e.height - o.height) / 2,
-      left: e.left + e.width + (r ? 0 : V)
+      left: e.left + e.width + (l ? 0 : A)
     },
-    [m.LEFT]: {
+    [d.LEFT]: {
       top: e.top + (e.height - o.height) / 2,
-      left: e.left - o.width - (r ? 0 : V)
+      left: e.left - o.width - (l ? 0 : A)
     },
-    [m.TOP]: {
-      top: e.top - o.height - (r ? 0 : V) - (a || 0),
+    [d.TOP]: {
+      top: e.top - o.height - (l ? 0 : A) - (n || 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 };
+  let { left: r, top: h } = c[t];
+  return t === d.BOTTOM || t === d.TOP ? (r < 0 && (r = w), r + o.width > window.innerWidth && (r = `calc(100% - ${o.width}px - ${w}px)`)) : (h < 0 && (h = w), h + o.height > window.innerHeight && (h = `calc(100% - ${o.height}px - ${w}px)`)), { left: r, top: h };
 }
-function Ht(t, e, o, r) {
-  if (o && o !== m.AUTO)
+function wt(t, e, o, l) {
+  if (o && o !== d.AUTO)
     return o;
-  const a = [
-    m.BOTTOM,
-    m.RIGHT,
-    m.LEFT,
-    m.TOP
+  const n = [
+    d.BOTTOM,
+    d.RIGHT,
+    d.LEFT,
+    d.TOP
   ];
-  for (const s of a)
-    if (Nt(s, t, e, r))
-      return s;
-  return m.BOTTOM;
+  for (const c of n)
+    if (gt(c, t, e, l))
+      return c;
+  return d.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],
+function Rt(t, e, o, l, n, c, r) {
+  const h = Z(c) || window;
+  t = n ? {
+    left: n[0],
+    x: n[0],
+    top: n[1],
+    y: n[1],
     height: 0,
     width: 0,
-    right: c.screen.width - a[0],
-    bottom: c.screen.height - a[1],
+    right: h.screen.width - n[0],
+    bottom: h.screen.height - n[1],
     toJSON: () => {
     }
   } : t;
-  const i = Ht(
+  const a = wt(
     t,
     e,
     o,
-    s
-  ), { left: l, top: d } = At(
-    i,
+    c
+  ), { left: f, top: m } = Et(
+    a,
     t,
     e,
-    r,
-    n
+    l,
+    r
   );
   return {
     leftTop: {
-      top: ("" + d).startsWith("calc") ? d : d + "px",
-      left: ("" + l).startsWith("calc") ? l : l + "px"
+      top: ("" + m).startsWith("calc") ? m : m + "px",
+      left: ("" + f).startsWith("calc") ? f : f + "px"
     },
-    position: i
+    position: a
   };
 }
-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);
+const Ct = (t) => {
+  const { children: e, classes: o, container: l, demo: n, styles: c } = t, [r, h] = v();
+  return L(() => (h(l || document.createElement("div")), () => h(null)), [l]), L(() => {
+    if (r) {
+      const a = Ot(n);
+      if (a) {
+        const f = a.getElementById("root");
+        f && f.appendChild(r);
       }
       return () => {
-        if (i) {
-          const l = i.getElementById("root");
-          l && l.removeChild(n);
+        if (a) {
+          const f = a.getElementById("root");
+          f && f.removeChild(r);
         }
       };
     }
-  }, [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;
+  }, [r, n]), L(() => {
+    r && (o && (r.className = o), r.classList.contains("ar-Portal") || r.classList.add("ar-Portal"), c && Object.assign(r.style, c));
+  }, [o, c, r]), r ? ft.createPortal(e, r) : null;
 };
-let Bt = !1;
-const jt = {
+let Pt = !1;
+const vt = {
   left: "right",
   right: "left",
   top: "bottom",
   bottom: "top"
-}, Dt = {
+}, Lt = {
   left: "135",
   right: "-45",
   top: "-135",
   bottom: "45"
-}, Vt = (t) => {
+}, Ht = (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)
+    closeOnSelfClick: l,
+    contentClasses: n,
+    contentMatchAnchorWidth: c,
+    demo: r,
+    disabled: h,
+    hideMarker: a,
+    invertBg: f,
+    isOpen: m,
+    isRaw: tt,
+    onAnchorClick: _,
+    onClose: R,
+    popAtPointer: K,
+    position: y = Q.AUTO,
+    preserveMarkerSpace: V,
+    stretch: et,
+    topOffset: W,
+    trigger: C = E.CLICK,
+    animation: $,
+    updateTriggers: ot,
+    wrapText: rt,
+    ...nt
+  } = t, u = dt(
+    () => $ && !Array.isArray($) ? [$] : $,
+    [$]
+  ), I = x(null), O = x(null), [g, M] = v(), [it, lt] = v(), [P, ct] = v(), [U, X] = v(), [b, k] = v(), F = x(), q = x(0), j = ut(() => {
+    if (!I.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
+    const i = I.current.getBoundingClientRect();
+    c && (O.current.style.width = i.width + "px");
+    const s = O.current.getBoundingClientRect();
+    u && u.length > 0 && u.indexOf(B.EXPANDSHRINK) > -1 && (s.width = Math.floor(s.width * 1.25), s.height = Math.floor(s.height * 1.25));
+    const { leftTop: T, position: p } = Rt(
+      i,
+      s,
+      y,
+      a && !V,
+      K && C === E.CLICK ? F.current : null,
+      r,
+      W
     );
-    Tt(v), bt(T);
+    lt(T), ct(p);
   }, [
-    s,
-    n,
-    i,
-    H,
-    j,
-    J,
-    Z,
-    R,
-    f
+    c,
+    r,
+    a,
+    K,
+    y,
+    V,
+    W,
+    C,
+    u
   ]);
-  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());
+  let S, z;
+  return Tt.forEach(o, (i) => {
+    var s, T;
+    ((s = i == null ? void 0 : i.props) == null ? void 0 : s.slot) === D.ANCHOR && (z = i), ((T = i == null ? void 0 : i.props) == null ? void 0 : T.slot) === D.POPOVER && (S = i);
+  }), L(() => {
+    m !== void 0 && (M(m), m && !b && k(!0));
+  }, [m, b]), L(() => {
+    var i;
+    let s = (T) => {
+      I.current && !I.current.contains(T.target) && O.current && !O.current.contains(T.target) && (M(!1), R && R());
     };
-    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);
+    if (C === E.CLICK && g) {
+      document.addEventListener("mousedown", s);
+      const T = document.querySelector("iframe");
+      return T && ((i = T.contentWindow) == null || i.document.addEventListener("mousedown", s)), () => {
+        var p;
+        document.removeEventListener("click", s);
         const N = document.querySelector("iframe");
-        N && ((T = N.contentWindow) == null || T.document.removeEventListener("click", g));
+        N && ((p = N.contentWindow) == null || p.document.removeEventListener("click", s));
       };
     }
-  }, [R, k, w]), S(() => {
-    M && k && (et(), Q(!0));
+  }, [C, g, R]), L(() => {
+    b && g && (j(), X(!0));
   }, [
-    k,
-    M,
-    et,
+    g,
+    b,
+    j,
     // 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(
+    ...ot || []
+  ]), L(() => {
+    if (!a && O.current && U && P) {
+      const i = O.current, s = I.current.getBoundingClientRect(), T = vt[P], p = i.getBoundingClientRect();
+      u && u.length > 0 && u.indexOf(B.EXPANDSHRINK) > -1 && (p.width = Math.floor(p.width * 1.25), p.height = Math.floor(p.height * 1.25));
+      const N = P === "top" || P === "bottom";
+      let J = s[N ? "width" : "height"] / 2 - 7;
+      const st = s.left - p.left + J, ht = s.top - p.top + J;
+      i.style.setProperty(
         "--marker-transform",
-        `rotate(${Dt[x]}deg)`
-      ), h.style.setProperty(
-        `--marker-${v}`,
+        `rotate(${Lt[P]}deg)`
+      ), i.style.setProperty(
+        `--marker-${T}`,
         "-0.35rem"
-      ), h.style.setProperty(
-        `--marker-${x}`,
+      ), i.style.setProperty(
+        `--marker-${P}`,
         "initial"
-      ), h.style.setProperty(
+      ), i.style.setProperty(
         `--marker-${N ? "left" : "top"}`,
-        (N ? yt : Ot) + "px"
-      ), Q(!1);
+        (N ? st : ht) + "px"
+      ), X(!1);
     }
   }, [
-    Y,
+    U,
     O,
-    i,
-    x,
-    z,
-    f
-  ]), /* @__PURE__ */ nt(kt, { children: [
-    /* @__PURE__ */ y(
+    a,
+    P,
+    F,
+    u
+  ]), /* @__PURE__ */ Y(at, { children: [
+    /* @__PURE__ */ H(
       "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));
+        className: `ar-Popover__anchor${e ? " " + e : ""}${et ? " w-100" : ""}`,
+        onMouseDown: (i) => {
+          F.current = [i.clientX, i.clientY], Date.now() - q.current < 500 || (q.current = Date.now(), C === E.CLICK && !Pt && !h && (!b && k(!0), (m === void 0 || m) && setTimeout(() => M(!g), 0)), g && R && R(), _ && _(!g));
         },
-        ref: P,
+        ref: I,
         onMouseEnter: () => {
-          R === C.HOVER && !c && (U(!0), setTimeout(() => $(!0), 0));
+          C === E.HOVER && !h && (k(!0), setTimeout(() => M(!0), 0));
         },
         onMouseLeave: () => {
-          R === C.HOVER && !c && (setTimeout(() => $(!1), 0), w && w());
+          C === E.HOVER && !h && (setTimeout(() => M(!1), 0), R && R());
         },
-        ...vt,
-        children: ot
+        ...nt,
+        children: z
       }
     ),
-    W && M && /* @__PURE__ */ y(
-      Gt,
+    S && b && /* @__PURE__ */ H(
+      Ct,
       {
-        classes: `position-fixed popover-container${k ? " z-3000" : " invisible"}`,
-        demo: n,
-        styles: wt || {},
-        children: /* @__PURE__ */ y(
+        classes: `position-fixed popover-container${g ? " z-3000" : " invisible"}`,
+        demo: r,
+        styles: it || {},
+        children: /* @__PURE__ */ H(
           "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),
+            className: `ar-Popover__content${f ? " invert-bg" : ""}${rt ? " wrap" : ""}${y ? " " + y : ""} ${n}${u && u.length > 0 ? " transition " + (u == null ? void 0 : u.join(" ")) : ""} ${g ? " show" : ""}${a ? " hide-marker" : ""}${tt ? "" : " p-1 border-radius l2 f25"}`,
+            onClick: () => l && M(!1),
             ref: O,
-            children: W
+            children: S
           }
         )
       }
     )
   ] });
-}, Ut = (t) => {
-  const { children: e, demo: o, ...r } = t, [a, s] = L();
-  return /* @__PURE__ */ y(
-    Vt,
+}, It = (t) => {
+  const { children: e, demo: o, ...l } = t, [n, c] = v();
+  return /* @__PURE__ */ H(
+    Ht,
     {
       contentClasses: "overflow-auto",
-      trigger: C.HOVER,
+      trigger: E.HOVER,
       onAnchorClick: () => {
-        s(!1), setTimeout(() => s(void 0), 10);
+        c(!1), setTimeout(() => c(void 0), 10);
       },
       animation: [
         B.EXPANDSHRINK,
         B.FADEINOUT
       ],
       demo: o,
-      isOpen: a,
+      isOpen: n,
       hideMarker: !0,
       preserveMarkerSpace: !0,
       wrapText: !0,
-      ...r,
+      ...l,
       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 = ({
+}, Bt = ({
   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,
+}) => /* @__PURE__ */ Y(It, { children: [
+  /* @__PURE__ */ H("span", { className: "mx-3 p-1 cursor-pointer", slot: G.ANCHOR, children: /* @__PURE__ */ H(
+    pt,
     {
       icon: t,
       attributes: {
@@ -623,11 +327,10 @@ const ae = ie(se), he = ({
       events: { onClick: e }
     }
   ) }),
-  /* @__PURE__ */ y("span", { slot: _.POPOVER, children: o })
+  /* @__PURE__ */ H("span", { slot: G.POPOVER, children: o })
 ] });
 export {
-  ae as B,
-  he as C,
-  _ as L,
-  Ut as v
+  Bt as C,
+  G as L,
+  It as v
 };

package/es/Control.js

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

package/es/ImageEditor.js

@@ -1,14 +1,15 @@
 (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 { v as z, L as I, C as V } from "./Control-chunk.js";
+import F from "@armco/icon";
 import { downloadEditedImage as Z } from "./helper.js";
 import "react-dom";
-const M = (o) => new URL(o).hostname, D = (o) => {
-  const d = M(o);
+const M = (i) => new URL(i).hostname, D = (i) => {
+  const d = M(i);
   return d === "localhost" || d === "armco.tech" ? "use-credentials" : "anonymous";
 }, P = L(
-  (o, d) => {
+  (i, d) => {
     const {
       alt: u,
       blur: c,
@@ -21,7 +22,7 @@ const M = (o) => new URL(o).hostname, D = (o) => {
       flipHorizontal: b,
       flipVertical: y,
       grayscale: C,
-      image: i,
+      image: o,
       isBackground: p,
       opacity: $,
       preserveAspectRatio: _,
@@ -31,9 +32,9 @@ const M = (o) => new URL(o).hostname, D = (o) => {
       sepia: f,
       style: g,
       title: O
-    } = o, t = {};
+    } = i, 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;
+    const S = N ? o || "https://picsum.photos/200/300" : o;
     return /* @__PURE__ */ a(
       "img",
       {
@@ -53,13 +54,13 @@ const M = (o) => new URL(o).hostname, D = (o) => {
     );
   }
 );
-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));
+function k(i, d) {
+  const u = +i.value, c = +(i.min ? i.min : 0), v = +(i.max ? i.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 T = (i) => {
   const {
     assistiveContent: d,
     classes: u,
@@ -73,11 +74,11 @@ const T = (o) => {
     onChange: b,
     onFocus: y,
     precision: C,
-    type: i,
+    type: o,
     value: p,
     withManual: $,
     ..._
-  } = o, e = w(null), l = w(null), [n, f] = R();
+  } = i, 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);
@@ -149,13 +150,13 @@ let E = {
   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;
+const A = (i) => (i % 360 + 360) % 360, H = 22.5, q = (i) => {
+  const { image: d, imageState: u, onChange: c, onCommit: v, viewOnly: s } = i;
   E = {
     ...E,
     ...u
   };
-  const m = w(null), [r, N] = R({ ...E }), [h, b] = R(), [y, C] = R(), i = (e, l) => {
+  const m = w(null), [r, N] = R({ ...E }), [h, b] = R(), [y, C] = R(), o = (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)
@@ -163,32 +164,32 @@ const A = (o) => (o % 360 + 360) % 360, H = 22.5, Y = (o) => {
   }, p = [
     {
       icon: "tb.TbFlipHorizontal",
-      handler: () => i("flipHorizontal", !r.flipHorizontal),
+      handler: () => o("flipHorizontal", !r.flipHorizontal),
       tooltip: "Flip Horizontal"
     },
     {
       icon: "tb.TbFlipVertical",
-      handler: () => i("flipVertical", !r.flipVertical),
+      handler: () => o("flipVertical", !r.flipVertical),
       tooltip: "Flip Vertical"
     },
     {
       icon: "ai.AiOutlineRotateLeft",
-      handler: () => i("rotateBy", r.rotateBy - H),
+      handler: () => o("rotateBy", r.rotateBy - H),
       tooltip: "Rotate Left"
     },
     {
       icon: "ai.AiOutlineRotateRight",
-      handler: () => i("rotateBy", r.rotateBy + H),
+      handler: () => o("rotateBy", r.rotateBy + H),
       tooltip: "Rotate Right"
     },
     {
       icon: "fi.FiZoomIn",
-      handler: () => i("scale", (r.scale + 1) % 10),
+      handler: () => o("scale", (r.scale + 1) % 10),
       tooltip: "Zoom In"
     },
     {
       icon: "fi.FiZoomOut",
-      handler: () => i(
+      handler: () => o(
         "scale",
         (r.scale - 1 < 0 ? 0 : r.scale - 1) % 10
       ),
@@ -220,14 +221,14 @@ const A = (o) => (o % 360 + 360) % 360, H = 22.5, Y = (o) => {
         min: 0,
         max: 5,
         precision: 0.1,
-        handler: (e) => i("brightness", +e.target.value)
+        handler: (e) => o("brightness", +e.target.value)
       },
       {
         label: "Contrast",
         min: 0,
         max: 5,
         precision: 0.1,
-        handler: (e) => i("contrast", +e.target.value)
+        handler: (e) => o("contrast", +e.target.value)
       }
     ],
     [
@@ -236,14 +237,14 @@ const A = (o) => (o % 360 + 360) % 360, H = 22.5, Y = (o) => {
         min: 0,
         max: 10,
         precision: 0.2,
-        handler: (e) => i("saturate", +e.target.value)
+        handler: (e) => o("saturate", +e.target.value)
       },
       {
         label: "Grayscale",
         min: 0,
         max: 1,
         precision: 0.05,
-        handler: (e) => i("grayscale", +e.target.value)
+        handler: (e) => o("grayscale", +e.target.value)
       }
     ],
     [
@@ -251,14 +252,14 @@ const A = (o) => (o % 360 + 360) % 360, H = 22.5, Y = (o) => {
         label: "Blur",
         min: 0,
         max: 20,
-        handler: (e) => i("blur", +e.target.value)
+        handler: (e) => o("blur", +e.target.value)
       },
       {
         label: "Sepia",
         min: 0,
         max: 1,
         precision: 0.05,
-        handler: (e) => i("sepia", +e.target.value)
+        handler: (e) => o("sepia", +e.target.value)
       }
     ],
     [
@@ -267,14 +268,14 @@ const A = (o) => (o % 360 + 360) % 360, H = 22.5, Y = (o) => {
         min: 0,
         max: 1,
         precision: 0.05,
-        handler: (e) => i("opacity", +e.target.value)
+        handler: (e) => o("opacity", +e.target.value)
       },
       {
         label: "Scale",
         min: 0,
         max: 10,
         precision: 0.2,
-        handler: (e) => i("scale", +e.target.value)
+        handler: (e) => o("scale", +e.target.value)
       }
     ]
   ];
@@ -366,5 +367,5 @@ const A = (o) => (o % 360 + 360) % 360, H = 22.5, Y = (o) => {
   ] });
 };
 export {
-  Y as default
+  q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@armco/imageeditor",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "cjs/ImageEditor.js",
   "module": "es/ImageEditor.js",