@armco/imageeditor 0.0.3 → 0.0.5

package/cjs/Control-chunk.js

@@ -1 +1 @@
-"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;
+"use strict";const s=require("react/jsx-runtime"),t=require("@armco/shared-components/Tooltip"),c=require("@armco/icon");var o=(r=>(r.POPOVER="popover",r.ANCHOR="anchor",r))(o||{});const i=({icon:r,handler:e,tooltip:n})=>s.jsxs(t,{children:[s.jsx("span",{className:"mx-3 p-1 cursor-pointer",slot:o.ANCHOR,children:s.jsx(c,{icon:r,attributes:{colors:{fillColor:"#ffffff99"},classes:"cursor-pointer",size:"2rem"},events:{onClick:e}})}),s.jsx("span",{slot:o.POPOVER,children:n})]});exports.Control=i;exports.L=o;

package/cjs/Control.js

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

package/cjs/ImageEditor.js

@@ -1,7 +1,2 @@
-(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"),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: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;
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".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}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+"use strict";const t=require("react/jsx-runtime"),s=require("react"),r=require("./Control-chunk.js"),f=require("@armco/icon"),q=require("@armco/shared-components/Image"),y=require("@armco/shared-components/Tooltip"),z=require("@armco/shared-components/Slider"),A=require("./helper.js");require("@armco/utils/domHelper");let c={rotateBy:0,brightness:1,contrast:1,saturate:1,grayscale:0,blur:0,sepia:0,opacity:1,scale:1};const C=d=>(d%360+360)%360,j=22.5,F=d=>{const{image:O,imageState:E,onChange:h,onCommit:x,viewOnly:m}=d;c={...c,...E};const g=s.useRef(null),[o,p]=s.useState({...c}),[n,I]=s.useState(),[l,R]=s.useState(),a=(e,i)=>{const u={...o,[e]:i},{rotateBy:b,...w}=u,{rotateBy:v,...B}=c;b!==void 0&&v!==void 0&&R(JSON.stringify(w)!==JSON.stringify(B)||C(b)!==C(v)),p(u),h&&h(u)},_=[{icon:"tb.TbFlipHorizontal",handler:()=>a("flipHorizontal",!o.flipHorizontal),tooltip:"Flip Horizontal"},{icon:"tb.TbFlipVertical",handler:()=>a("flipVertical",!o.flipVertical),tooltip:"Flip Vertical"},{icon:"ai.AiOutlineRotateLeft",handler:()=>a("rotateBy",o.rotateBy-j),tooltip:"Rotate Left"},{icon:"ai.AiOutlineRotateRight",handler:()=>a("rotateBy",o.rotateBy+j),tooltip:"Rotate Right"},{icon:"fi.FiZoomIn",handler:()=>a("scale",(o.scale+1)%10),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>a("scale",(o.scale-1<0?0:o.scale-1)%10),tooltip:"Zoom Out"},{icon:n?"md.MdOutlineExpandLess":"md.MdOutlineExpandMore",handler:()=>I(!n),tooltip:n?"Hide Advanced Controls":"Show Advanced Controls"}],N=[{icon:"fi.FiZoomIn",handler:()=>p({...o,scale:(o.scale+1)%10}),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>p({...o,scale:(o.scale-1<0?0:o.scale-1)%10}),tooltip:"Zoom Out"}],S=[[{label:"Brightness",min:0,max:5,precision:.1,handler:e=>a("brightness",+e.target.value)},{label:"Contrast",min:0,max:5,precision:.1,handler:e=>a("contrast",+e.target.value)}],[{label:"Saturation",min:0,max:10,precision:.2,handler:e=>a("saturate",+e.target.value)},{label:"Grayscale",min:0,max:1,precision:.05,handler:e=>a("grayscale",+e.target.value)}],[{label:"Blur",min:0,max:20,handler:e=>a("blur",+e.target.value)},{label:"Sepia",min:0,max:1,precision:.05,handler:e=>a("sepia",+e.target.value)}],[{label:"Opacity",min:0,max:1,precision:.05,handler:e=>a("opacity",+e.target.value)},{label:"Scale",min:0,max:10,precision:.2,handler:e=>a("scale",+e.target.value)}]];return t.jsxs("div",{className:"ar-ImageEditor d-flex flex-column h-100 overflow-auto flex-center position-relative",children:[!m&&t.jsxs("div",{className:"ar-ImageEditor__editor-controls position-absolute p-1 top-0 end-0 hover-shadow-dark",children:[t.jsxs(y,{children:[t.jsx("span",{className:"ar-ImageEditor__download-button cursor-pointer border-radius-50 p-1 me-2",slot:r.L.ANCHOR,children:t.jsx(f,{icon:"md/MdDownload",attributes:{colors:{fillColor:"#232323cc"},size:"1.5rem"},events:{onClick:()=>A.downloadEditedImage(g.current)}})}),t.jsx("span",{slot:r.L.POPOVER,children:"Download"})]}),t.jsxs(y,{children:[t.jsx("span",{className:`ar-ImageEditor__commit-button border-radius-50 p-1${l?" cursor-pointer is-dirty":""}`,slot:r.L.ANCHOR,children:t.jsx(f,{icon:"io5.IoCheckmarkCircleSharp",slot:r.L.ANCHOR,attributes:{colors:{fillColor:l?"#008000":"#00800077"},size:"1.5rem"},events:{onClick:()=>l&&x&&x(o)}})}),t.jsx("span",{slot:r.L.POPOVER,children:l?"Save":"Edit image to save"})]})]}),t.jsx("div",{className:"ar-ImageEditor__image-container mb-4",children:t.jsx(q,{ref:g,image:O,fill:!0,preserveAspectRatio:!0,...o})}),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${n?" expanded":""}`,children:[t.jsx("div",{className:`ar-ImageEditor__basic-controls px-3 py-2 ${n?"border-bottom":""}`,children:(m?N:_).map(e=>t.jsx(r.Control,{...e}))}),!m&&t.jsx("div",{className:"ar-ImageEditor__advanced-controls mt-2 px-3",children:S.map(e=>t.jsx("div",{className:"row pb-3 border-bottom",children:e.map(i=>t.jsx("div",{className:"col-6",children:t.jsx(z,{label:i.label,min:i.min,max:i.max,onChange:i.handler,precision:i.precision})}))}))})]})})]})};module.exports=F;

package/cjs/helper.js

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@armco/utils/domHelper"),d=t=>{if(t){const e=document.createElement("canvas");e.width=t.naturalWidth,e.height=t.naturalHeight;const a=e.getContext("2d");if(!a)return;const n=t.style.filter,s=t.style.opacity,o=t.style.transform;a.filter=n!==""?n:"",a.globalAlpha=s!==""?parseFloat(s):1,o&&o!=="none"&&i(a,o,e),a.drawImage(t,0,0),c.download(e.toDataURL())}},i=(t,e,a)=>{const n=e.match(/rotate\((\d+(?:\.\d+)?)deg\)/);if(n){const r=parseFloat(n[1])*(Math.PI/180);t.translate(a.width/2,a.height/2),t.rotate(r),t.translate(-a.width/2,-a.height/2)}const s=e.match(/scale\((\d+(?:\.\d+)?)(?:,\s*(\d+(?:\.\d+)?))?\)/);if(s){const l=parseFloat(s[1]),r=s[2]?parseFloat(s[2]):l;t.scale(l,r)}const o=e.match(/translate\((\d+px)(?:,\s*(\d+px))?\)/);if(o){const l=parseFloat(o[1]),r=o[2]?parseFloat(o[2]):0;t.translate(l,r)}};exports.downloadEditedImage=d;

package/es/Control-chunk.js

@@ -1,336 +1,27 @@
-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)
-      return e.contentDocument;
-  }
-  return document;
-}
-function Z(t) {
-  if (t) {
-    const e = document.querySelector(".ar-Editor__frame");
-    if (e)
-      return e.contentWindow;
-  }
-  return window;
-}
-function gt(t, e, o, l) {
-  const n = Z(l) || 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 (w > e.top || w > e.bottom)
-      return !1;
-  } else if (w > e.left || w > e.right)
-    return !1;
-  return t;
-}
-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
-    },
-    [d.RIGHT]: {
-      top: e.top + (e.height - o.height) / 2,
-      left: e.left + e.width + (l ? 0 : A)
-    },
-    [d.LEFT]: {
-      top: e.top + (e.height - o.height) / 2,
-      left: e.left - o.width - (l ? 0 : A)
-    },
-    [d.TOP]: {
-      top: e.top - o.height - (l ? 0 : A) - (n || 0),
-      left: e.left + (e.width - o.width) / 2
-    }
-  };
-  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 wt(t, e, o, l) {
-  if (o && o !== d.AUTO)
-    return o;
-  const n = [
-    d.BOTTOM,
-    d.RIGHT,
-    d.LEFT,
-    d.TOP
-  ];
-  for (const c of n)
-    if (gt(c, t, e, l))
-      return c;
-  return d.BOTTOM;
-}
-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: h.screen.width - n[0],
-    bottom: h.screen.height - n[1],
-    toJSON: () => {
-    }
-  } : t;
-  const a = wt(
-    t,
-    e,
-    o,
-    c
-  ), { left: f, top: m } = Et(
-    a,
-    t,
-    e,
-    l,
-    r
-  );
-  return {
-    leftTop: {
-      top: ("" + m).startsWith("calc") ? m : m + "px",
-      left: ("" + f).startsWith("calc") ? f : f + "px"
-    },
-    position: a
-  };
-}
-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 (a) {
-          const f = a.getElementById("root");
-          f && f.removeChild(r);
-        }
-      };
-    }
-  }, [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 Pt = !1;
-const vt = {
-  left: "right",
-  right: "left",
-  top: "bottom",
-  bottom: "top"
-}, Lt = {
-  left: "135",
-  right: "-45",
-  top: "-135",
-  bottom: "45"
-}, Ht = (t) => {
-  const {
-    classes: e,
-    children: o,
-    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 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
-    );
-    lt(T), ct(p);
-  }, [
-    c,
-    r,
-    a,
-    K,
-    y,
-    V,
-    W,
-    C,
-    u
-  ]);
-  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 (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 && ((p = N.contentWindow) == null || p.document.removeEventListener("click", s));
-      };
-    }
-  }, [C, g, R]), L(() => {
-    b && g && (j(), X(!0));
-  }, [
-    g,
-    b,
-    j,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ...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(${Lt[P]}deg)`
-      ), i.style.setProperty(
-        `--marker-${T}`,
-        "-0.35rem"
-      ), i.style.setProperty(
-        `--marker-${P}`,
-        "initial"
-      ), i.style.setProperty(
-        `--marker-${N ? "left" : "top"}`,
-        (N ? st : ht) + "px"
-      ), X(!1);
-    }
-  }, [
-    U,
-    O,
-    a,
-    P,
-    F,
-    u
-  ]), /* @__PURE__ */ Y(at, { children: [
-    /* @__PURE__ */ H(
-      "span",
-      {
-        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: I,
-        onMouseEnter: () => {
-          C === E.HOVER && !h && (k(!0), setTimeout(() => M(!0), 0));
-        },
-        onMouseLeave: () => {
-          C === E.HOVER && !h && (setTimeout(() => M(!1), 0), R && R());
-        },
-        ...nt,
-        children: z
-      }
-    ),
-    S && b && /* @__PURE__ */ H(
-      Ct,
-      {
-        classes: `position-fixed popover-container${g ? " z-3000" : " invisible"}`,
-        demo: r,
-        styles: it || {},
-        children: /* @__PURE__ */ H(
-          "div",
-          {
-            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: S
-          }
-        )
-      }
-    )
-  ] });
-}, It = (t) => {
-  const { children: e, demo: o, ...l } = t, [n, c] = v();
-  return /* @__PURE__ */ H(
-    Ht,
-    {
-      contentClasses: "overflow-auto",
-      trigger: E.HOVER,
-      onAnchorClick: () => {
-        c(!1), setTimeout(() => c(void 0), 10);
-      },
-      animation: [
-        B.EXPANDSHRINK,
-        B.FADEINOUT
-      ],
-      demo: o,
-      isOpen: n,
-      hideMarker: !0,
-      preserveMarkerSpace: !0,
-      wrapText: !0,
-      ...l,
-      children: e
-    }
-  );
-}, Bt = ({
-  icon: t,
-  handler: e,
-  tooltip: o
-}) => /* @__PURE__ */ Y(It, { children: [
-  /* @__PURE__ */ H("span", { className: "mx-3 p-1 cursor-pointer", slot: G.ANCHOR, children: /* @__PURE__ */ H(
-    pt,
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import n from "@armco/shared-components/Tooltip";
+import i from "@armco/icon";
+var s = /* @__PURE__ */ ((o) => (o.POPOVER = "popover", o.ANCHOR = "anchor", o))(s || {});
+const a = ({
+  icon: o,
+  handler: t,
+  tooltip: e
+}) => /* @__PURE__ */ l(n, { children: [
+  /* @__PURE__ */ r("span", { className: "mx-3 p-1 cursor-pointer", slot: s.ANCHOR, children: /* @__PURE__ */ r(
+    i,
     {
-      icon: t,
+      icon: o,
       attributes: {
         colors: { fillColor: "#ffffff99" },
         classes: "cursor-pointer",
         size: "2rem"
       },
-      events: { onClick: e }
+      events: { onClick: t }
     }
   ) }),
-  /* @__PURE__ */ H("span", { slot: G.POPOVER, children: o })
+  /* @__PURE__ */ r("span", { slot: s.POPOVER, children: e })
 ] });
 export {
-  Bt as C,
-  G as L,
-  It as v
+  a as C,
+  s as L
 };

package/es/Control.js

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

package/es/ImageEditor.js

@@ -1,145 +1,14 @@
-(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, C as V } from "./Control-chunk.js";
-import F from "@armco/icon";
-import { downloadEditedImage as Z } from "./helper.js";
-import "react-dom";
-const M = (i) => new URL(i).hostname, D = (i) => {
-  const d = M(i);
-  return d === "localhost" || d === "armco.tech" ? "use-credentials" : "anonymous";
-}, P = L(
-  (i, 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: o,
-      isBackground: p,
-      opacity: $,
-      preserveAspectRatio: _,
-      rotateBy: e,
-      saturate: l,
-      scale: n,
-      sepia: f,
-      style: g,
-      title: O
-    } = 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 ? o || "https://picsum.photos/200/300" : o;
-    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(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 = (i) => {
-  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: o,
-    value: p,
-    withManual: $,
-    ..._
-  } = 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);
-    });
-  }, []), 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 = {
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".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}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useRef as F, useState as u } from "react";
+import { L as n, C as H } from "./Control-chunk.js";
+import y from "@armco/icon";
+import Z from "@armco/shared-components/Image";
+import C from "@armco/shared-components/Tooltip";
+import k from "@armco/shared-components/Slider";
+import { downloadEditedImage as V } from "./helper.js";
+import "@armco/utils/domHelper";
+let c = {
   rotateBy: 0,
   brightness: 1,
   contrast: 1,
@@ -150,85 +19,85 @@ let E = {
   opacity: 1,
   scale: 1
 };
-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 O = (d) => (d % 360 + 360) % 360, E = 22.5, q = (d) => {
+  const { image: I, imageState: R, onChange: g, onCommit: b, viewOnly: m } = d;
+  c = {
+    ...c,
+    ...R
   };
-  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)
-    ), N(n), c && c(n);
-  }, p = [
+  const v = F(null), [o, p] = u({ ...c }), [r, _] = u(), [s, N] = u(), a = (e, i) => {
+    const h = { ...o, [e]: i }, { rotateBy: f, ...z } = h, { rotateBy: x, ...A } = c;
+    f !== void 0 && x !== void 0 && N(
+      JSON.stringify(z) !== JSON.stringify(A) || O(f) !== O(x)
+    ), p(h), g && g(h);
+  }, S = [
     {
       icon: "tb.TbFlipHorizontal",
-      handler: () => o("flipHorizontal", !r.flipHorizontal),
+      handler: () => a("flipHorizontal", !o.flipHorizontal),
       tooltip: "Flip Horizontal"
     },
     {
       icon: "tb.TbFlipVertical",
-      handler: () => o("flipVertical", !r.flipVertical),
+      handler: () => a("flipVertical", !o.flipVertical),
       tooltip: "Flip Vertical"
     },
     {
       icon: "ai.AiOutlineRotateLeft",
-      handler: () => o("rotateBy", r.rotateBy - H),
+      handler: () => a("rotateBy", o.rotateBy - E),
       tooltip: "Rotate Left"
     },
     {
       icon: "ai.AiOutlineRotateRight",
-      handler: () => o("rotateBy", r.rotateBy + H),
+      handler: () => a("rotateBy", o.rotateBy + E),
       tooltip: "Rotate Right"
     },
     {
       icon: "fi.FiZoomIn",
-      handler: () => o("scale", (r.scale + 1) % 10),
+      handler: () => a("scale", (o.scale + 1) % 10),
       tooltip: "Zoom In"
     },
     {
       icon: "fi.FiZoomOut",
-      handler: () => o(
+      handler: () => a(
         "scale",
-        (r.scale - 1 < 0 ? 0 : r.scale - 1) % 10
+        (o.scale - 1 < 0 ? 0 : o.scale - 1) % 10
       ),
       tooltip: "Zoom Out"
     },
     {
-      icon: h ? "md.MdOutlineExpandLess" : "md.MdOutlineExpandMore",
-      handler: () => b(!h),
-      tooltip: h ? "Hide Advanced Controls" : "Show Advanced Controls"
+      icon: r ? "md.MdOutlineExpandLess" : "md.MdOutlineExpandMore",
+      handler: () => _(!r),
+      tooltip: r ? "Hide Advanced Controls" : "Show Advanced Controls"
     }
-  ], $ = [
+  ], w = [
     {
       icon: "fi.FiZoomIn",
-      handler: () => N({ ...r, scale: (r.scale + 1) % 10 }),
+      handler: () => p({ ...o, scale: (o.scale + 1) % 10 }),
       tooltip: "Zoom In"
     },
     {
       icon: "fi.FiZoomOut",
-      handler: () => N({
-        ...r,
-        scale: (r.scale - 1 < 0 ? 0 : r.scale - 1) % 10
+      handler: () => p({
+        ...o,
+        scale: (o.scale - 1 < 0 ? 0 : o.scale - 1) % 10
       }),
       tooltip: "Zoom Out"
     }
-  ], _ = [
+  ], B = [
     [
       {
         label: "Brightness",
         min: 0,
         max: 5,
         precision: 0.1,
-        handler: (e) => o("brightness", +e.target.value)
+        handler: (e) => a("brightness", +e.target.value)
       },
       {
         label: "Contrast",
         min: 0,
         max: 5,
         precision: 0.1,
-        handler: (e) => o("contrast", +e.target.value)
+        handler: (e) => a("contrast", +e.target.value)
       }
     ],
     [
@@ -237,14 +106,14 @@ const A = (i) => (i % 360 + 360) % 360, H = 22.5, q = (i) => {
         min: 0,
         max: 10,
         precision: 0.2,
-        handler: (e) => o("saturate", +e.target.value)
+        handler: (e) => a("saturate", +e.target.value)
       },
       {
         label: "Grayscale",
         min: 0,
         max: 1,
         precision: 0.05,
-        handler: (e) => o("grayscale", +e.target.value)
+        handler: (e) => a("grayscale", +e.target.value)
       }
     ],
     [
@@ -252,14 +121,14 @@ const A = (i) => (i % 360 + 360) % 360, H = 22.5, q = (i) => {
         label: "Blur",
         min: 0,
         max: 20,
-        handler: (e) => o("blur", +e.target.value)
+        handler: (e) => a("blur", +e.target.value)
       },
       {
         label: "Sepia",
         min: 0,
         max: 1,
         precision: 0.05,
-        handler: (e) => o("sepia", +e.target.value)
+        handler: (e) => a("sepia", +e.target.value)
       }
     ],
     [
@@ -268,27 +137,27 @@ const A = (i) => (i % 360 + 360) % 360, H = 22.5, q = (i) => {
         min: 0,
         max: 1,
         precision: 0.05,
-        handler: (e) => o("opacity", +e.target.value)
+        handler: (e) => a("opacity", +e.target.value)
       },
       {
         label: "Scale",
         min: 0,
         max: 10,
         precision: 0.2,
-        handler: (e) => o("scale", +e.target.value)
+        handler: (e) => a("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(
+  return /* @__PURE__ */ l("div", { className: "ar-ImageEditor d-flex flex-column h-100 overflow-auto flex-center position-relative", children: [
+    !m && /* @__PURE__ */ l("div", { className: "ar-ImageEditor__editor-controls position-absolute p-1 top-0 end-0 hover-shadow-dark", children: [
+      /* @__PURE__ */ l(C, { children: [
+        /* @__PURE__ */ t(
           "span",
           {
             className: "ar-ImageEditor__download-button cursor-pointer border-radius-50 p-1 me-2",
-            slot: I.ANCHOR,
-            children: /* @__PURE__ */ a(
-              F,
+            slot: n.ANCHOR,
+            children: /* @__PURE__ */ t(
+              y,
               {
                 icon: "md/MdDownload",
                 attributes: {
@@ -296,69 +165,69 @@ const A = (i) => (i % 360 + 360) % 360, H = 22.5, q = (i) => {
                   size: "1.5rem"
                 },
                 events: {
-                  onClick: () => Z(m.current)
+                  onClick: () => V(v.current)
                 }
               }
             )
           }
         ),
-        /* @__PURE__ */ a("span", { slot: I.POPOVER, children: "Download" })
+        /* @__PURE__ */ t("span", { slot: n.POPOVER, children: "Download" })
       ] }),
-      /* @__PURE__ */ x(z, { children: [
-        /* @__PURE__ */ a(
+      /* @__PURE__ */ l(C, { children: [
+        /* @__PURE__ */ t(
           "span",
           {
-            className: `ar-ImageEditor__commit-button border-radius-50 p-1${y ? " cursor-pointer is-dirty" : ""}`,
-            slot: I.ANCHOR,
-            children: /* @__PURE__ */ a(
-              F,
+            className: `ar-ImageEditor__commit-button border-radius-50 p-1${s ? " cursor-pointer is-dirty" : ""}`,
+            slot: n.ANCHOR,
+            children: /* @__PURE__ */ t(
+              y,
               {
                 icon: "io5.IoCheckmarkCircleSharp",
-                slot: I.ANCHOR,
+                slot: n.ANCHOR,
                 attributes: {
-                  colors: { fillColor: y ? "#008000" : "#00800077" },
+                  colors: { fillColor: s ? "#008000" : "#00800077" },
                   size: "1.5rem"
                 },
                 events: {
-                  onClick: () => y && v && v(r)
+                  onClick: () => s && b && b(o)
                 }
               }
             )
           }
         ),
-        /* @__PURE__ */ a("span", { slot: I.POPOVER, children: y ? "Save" : "Edit image to save" })
+        /* @__PURE__ */ t("span", { slot: n.POPOVER, children: s ? "Save" : "Edit image to save" })
       ] })
     ] }),
-    /* @__PURE__ */ a("div", { className: "ar-ImageEditor__image-container mb-4", children: /* @__PURE__ */ a(
-      P,
+    /* @__PURE__ */ t("div", { className: "ar-ImageEditor__image-container mb-4", children: /* @__PURE__ */ t(
+      Z,
       {
-        ref: m,
-        image: d,
+        ref: v,
+        image: I,
         fill: !0,
         preserveAspectRatio: !0,
-        ...r
+        ...o
       }
     ) }),
-    /* @__PURE__ */ a("div", { className: "ar-ImageEditor__controls py-3 flex-center z-1 position-absolute", children: /* @__PURE__ */ x(
+    /* @__PURE__ */ t("div", { className: "ar-ImageEditor__controls py-3 flex-center z-1 position-absolute", children: /* @__PURE__ */ l(
       "div",
       {
-        className: `ar-ImageEditor__controls-container border-radius prominent hover-shadow-dark${h ? " expanded" : ""}`,
+        className: `ar-ImageEditor__controls-container border-radius prominent hover-shadow-dark${r ? " expanded" : ""}`,
         children: [
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             "div",
             {
-              className: `ar-ImageEditor__basic-controls px-3 py-2 ${h ? "border-bottom" : ""}`,
-              children: (s ? $ : p).map((e) => /* @__PURE__ */ a(V, { ...e }))
+              className: `ar-ImageEditor__basic-controls px-3 py-2 ${r ? "border-bottom" : ""}`,
+              children: (m ? w : S).map((e) => /* @__PURE__ */ t(H, { ...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,
+          !m && /* @__PURE__ */ t("div", { className: "ar-ImageEditor__advanced-controls mt-2 px-3", children: B.map((e) => /* @__PURE__ */ t("div", { className: "row pb-3 border-bottom", children: e.map((i) => /* @__PURE__ */ t("div", { className: "col-6", children: /* @__PURE__ */ t(
+            k,
             {
-              label: l.label,
-              min: l.min,
-              max: l.max,
-              onChange: l.handler,
-              precision: l.precision
+              label: i.label,
+              min: i.min,
+              max: i.max,
+              onChange: i.handler,
+              precision: i.precision
             }
           ) })) })) })
         ]

package/es/helper.js

@@ -1,40 +1,33 @@
-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) => {
+import { download as c } from "@armco/utils/domHelper";
+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)
+    const e = document.createElement("canvas");
+    e.width = t.naturalWidth, e.height = t.naturalHeight;
+    const a = e.getContext("2d");
+    if (!a)
       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());
+    const o = t.style.filter, n = t.style.opacity, s = t.style.transform;
+    a.filter = o !== "" ? o : "", a.globalAlpha = n !== "" ? parseFloat(n) : 1, s && s !== "none" && d(a, s, e), a.drawImage(t, 0, 0), c(e.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);
+}, d = (t, e, a) => {
+  const o = e.match(/rotate\((\d+(?:\.\d+)?)deg\)/);
+  if (o) {
+    const r = parseFloat(o[1]) * (Math.PI / 180);
+    t.translate(a.width / 2, a.height / 2), t.rotate(r), t.translate(-a.width / 2, -a.height / 2);
   }
-  const o = a.match(
+  const n = e.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);
+    const l = parseFloat(n[1]), r = n[2] ? parseFloat(n[2]) : l;
+    t.scale(l, r);
+  }
+  const s = e.match(/translate\((\d+px)(?:,\s*(\d+px))?\)/);
+  if (s) {
+    const l = parseFloat(s[1]), r = s[2] ? parseFloat(s[2]) : 0;
+    t.translate(l, r);
   }
 };
 export {
-  f as downloadEditedImage
+  i as downloadEditedImage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@armco/imageeditor",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "main": "cjs/ImageEditor.js",
   "module": "es/ImageEditor.js",
@@ -14,13 +14,12 @@
     "publish:local": "./publish-local.sh"
   },
   "dependencies": {
-    "@armco/icon": "^0.0.3",
-    "@armco/shared-components": "^0.0.50",
-    "@armco/utils": "^0.0.16",
+    "@armco/icon": "^0.0.5",
+    "@armco/shared-components": "^0.0.52",
+    "@armco/utils": "^0.0.17",
     "@types/node": "^22.5.5",
     "react": ">16.8.0",
-    "react-dom": ">16.8.0",
-    "vite-plugin-dts": "^4.2.1"
+    "react-dom": ">16.8.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.2.0",
@@ -41,6 +40,8 @@
     "typescript": "^5.0.2",
     "vite": "^4.0.0",
     "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^4.2.2",
+    "vite-plugin-externalize-deps": "^0.8.0",
     "vitest": "^0.30.1"
   },
   "peerDependencies": {