react-profile-crop/dist/index.js

A flexible, customizable React component for cropping profile pictures with real-time preview.

"use strict";var e=require("react"),t=function(){return t=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},t.apply(this,arguments)};function r(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{l(n.next(e))}catch(e){a(e)}}function c(e){try{l(n.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,c)}l((n=n.apply(e,t||[])).next())}))}function n(e,t){var r,n,o,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=c(0),i.throw=c(1),i.return=c(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(l){return function(c){if(r)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(a=0)),a;)try{if(r=1,n&&(o=2&c[0]?n.return:c[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,c[1])).done)return o;switch(n=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return a.label++,{value:c[1],done:!1};case 5:a.label++,n=c[1],c=[0];continue;case 7:c=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){a=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){a.label=c[1];break}if(6===c[0]&&a.label<o[1]){a.label=o[1],o=c;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(c);break}o[2]&&a.ops.pop(),a.trys.pop();continue}c=t.call(e,a)}catch(e){c=[6,e],n=0}finally{r=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,l])}}}"function"==typeof SuppressedError&&SuppressedError;var o,a={exports:{}},i={};var c,l={};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */"production"===process.env.NODE_ENV?a.exports=function(){if(o)return i;o=1;var t=e,r=Symbol.for("react.element"),n=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,c=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function s(e,t,n){var o,i={},s=null,u=null;for(o in void 0!==n&&(s=""+n),void 0!==t.key&&(s=""+t.key),void 0!==t.ref&&(u=t.ref),t)a.call(t,o)&&!l.hasOwnProperty(o)&&(i[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===i[o]&&(i[o]=t[o]);return{$$typeof:r,type:e,key:s,ref:u,props:i,_owner:c.current}}return i.Fragment=n,i.jsx=s,i.jsxs=s,i}():a.exports=(c||(c=1,"production"!==process.env.NODE_ENV&&function(){var t,r=e,n=Symbol.for("react.element"),o=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),c=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),u=Symbol.for("react.context"),p=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),d=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),v=Symbol.for("react.lazy"),h=Symbol.for("react.offscreen"),g=Symbol.iterator,m=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function b(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];!function(e,t,r){var n=m.ReactDebugCurrentFrame.getStackAddendum();""!==n&&(t+="%s",r=r.concat([n]));var o=r.map((function(e){return String(e)}));o.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,o)}("error",e,r)}function x(e){return e.displayName||"Context"}function w(e){if(null==e)return null;if("number"==typeof e.tag&&b("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case a:return"Fragment";case o:return"Portal";case c:return"Profiler";case i:return"StrictMode";case f:return"Suspense";case d:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case u:return x(e)+".Consumer";case s:return x(e._context)+".Provider";case p:return function(e,t,r){var n=e.displayName;if(n)return n;var o=t.displayName||t.name||"";return""!==o?r+"("+o+")":r}(e,e.render,"ForwardRef");case y:var t=e.displayName||null;return null!==t?t:w(e.type)||"Memo";case v:var r=e,n=r._payload,l=r._init;try{return w(l(n))}catch(e){return null}}return null}t=Symbol.for("react.module.reference");var k,S,C,j,_,R,O,E=Object.assign,P=0;function T(){}T.__reactDisabledLog=!0;var N,F=m.ReactCurrentDispatcher;function D(e,t,r){if(void 0===N)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);N=n&&n[1]||""}return"\n"+N+e}var $,I=!1,B="function"==typeof WeakMap?WeakMap:Map;function z(e,t){if(!e||I)return"";var r,n=$.get(e);if(void 0!==n)return n;I=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=F.current,F.current=null,function(){if(0===P){k=console.log,S=console.info,C=console.warn,j=console.error,_=console.group,R=console.groupCollapsed,O=console.groupEnd;var e={configurable:!0,enumerable:!0,value:T,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}P++}();try{if(t){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[])}catch(e){r=e}Reflect.construct(e,[],i)}else{try{i.call()}catch(e){r=e}e.call(i.prototype)}}else{try{throw Error()}catch(e){r=e}e()}}catch(t){if(t&&r&&"string"==typeof t.stack){for(var c=t.stack.split("\n"),l=r.stack.split("\n"),s=c.length-1,u=l.length-1;s>=1&&u>=0&&c[s]!==l[u];)u--;for(;s>=1&&u>=0;s--,u--)if(c[s]!==l[u]){if(1!==s||1!==u)do{if(s--,--u<0||c[s]!==l[u]){var p="\n"+c[s].replace(" at new "," at ");return e.displayName&&p.includes("<anonymous>")&&(p=p.replace("<anonymous>",e.displayName)),"function"==typeof e&&$.set(e,p),p}}while(s>=1&&u>=0);break}}}finally{I=!1,F.current=o,function(){if(0==--P){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:E({},e,{value:k}),info:E({},e,{value:S}),warn:E({},e,{value:C}),error:E({},e,{value:j}),group:E({},e,{value:_}),groupCollapsed:E({},e,{value:R}),groupEnd:E({},e,{value:O})})}P<0&&b("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=a}var f=e?e.displayName||e.name:"",d=f?D(f):"";return"function"==typeof e&&$.set(e,d),d}function M(e,t,r){if(null==e)return"";if("function"==typeof e)return z(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return D(e);switch(e){case f:return D("Suspense");case d:return D("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case p:return z(e.render,!1);case y:return M(e.type,t,r);case v:var o=e,a=o._payload,i=o._init;try{return M(i(a),t,r)}catch(e){}}return""}$=new B;var W=Object.prototype.hasOwnProperty,L={},U=m.ReactDebugCurrentFrame;function A(e){if(e){var t=e._owner,r=M(e.type,e._source,t?t.type:null);U.setExtraStackFrame(r)}else U.setExtraStackFrame(null)}var Y=Array.isArray;function X(e){return Y(e)}function Z(e){return""+e}function G(e){if(function(e){try{return Z(e),!1}catch(e){return!0}}(e))return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),Z(e)}var H,J,V=m.ReactCurrentOwner,q={key:!0,ref:!0,__self:!0,__source:!0};function K(e,t,r,o,a){var i,c={},l=null,s=null;for(i in void 0!==r&&(G(r),l=""+r),function(e){if(W.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(t)&&(G(t.key),l=""+t.key),function(e){if(W.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}(t)&&(s=t.ref,function(e){"string"==typeof e.ref&&V.current}(t)),t)W.call(t,i)&&!q.hasOwnProperty(i)&&(c[i]=t[i]);if(e&&e.defaultProps){var u=e.defaultProps;for(i in u)void 0===c[i]&&(c[i]=u[i])}if(l||s){var p="function"==typeof e?e.displayName||e.name||"Unknown":e;l&&function(e,t){var r=function(){H||(H=!0,b("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}(c,p),s&&function(e,t){var r=function(){J||(J=!0,b("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}(c,p)}return function(e,t,r,o,a,i,c){var l={$$typeof:n,type:e,key:t,ref:r,props:c,_owner:i,_store:{}};return Object.defineProperty(l._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(l,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(l,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(l.props),Object.freeze(l)),l}(e,l,s,a,o,V.current,c)}var Q,ee=m.ReactCurrentOwner,te=m.ReactDebugCurrentFrame;function re(e){if(e){var t=e._owner,r=M(e.type,e._source,t?t.type:null);te.setExtraStackFrame(r)}else te.setExtraStackFrame(null)}function ne(e){return"object"==typeof e&&null!==e&&e.$$typeof===n}function oe(){if(ee.current){var e=w(ee.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}Q=!1;var ae={};function ie(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=function(e){var t=oe();if(!t){var r="string"==typeof e?e:e.displayName||e.name;r&&(t="\n\nCheck the top-level render call using <"+r+">.")}return t}(t);if(!ae[r]){ae[r]=!0;var n="";e&&e._owner&&e._owner!==ee.current&&(n=" It was passed a child from "+w(e._owner.type)+"."),re(e),b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',r,n),re(null)}}}function ce(e,t){if("object"==typeof e)if(X(e))for(var r=0;r<e.length;r++){var n=e[r];ne(n)&&ie(n,t)}else if(ne(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var t=g&&e[g]||e["@@iterator"];return"function"==typeof t?t:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)ne(a.value)&&ie(a.value,t)}}function le(e){var t,r=e.type;if(null!=r&&"string"!=typeof r){if("function"==typeof r)t=r.propTypes;else{if("object"!=typeof r||r.$$typeof!==p&&r.$$typeof!==y)return;t=r.propTypes}if(t){var n=w(r);!function(e,t,r,n,o){var a=Function.call.bind(W);for(var i in e)if(a(e,i)){var c=void 0;try{if("function"!=typeof e[i]){var l=Error((n||"React class")+": "+r+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw l.name="Invariant Violation",l}c=e[i](t,i,n,r,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){c=e}!c||c instanceof Error||(A(o),b("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",r,i,typeof c),A(null)),c instanceof Error&&!(c.message in L)&&(L[c.message]=!0,A(o),b("Failed %s type: %s",r,c.message),A(null))}}(t,e.props,"prop",n,e)}else void 0===r.PropTypes||Q||(Q=!0,b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",w(r)||"Unknown"));"function"!=typeof r.getDefaultProps||r.getDefaultProps.isReactClassApproved||b("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}var se={};function ue(e,r,o,l,g,m){var x=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===c||e===i||e===f||e===d||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===v||e.$$typeof===y||e.$$typeof===s||e.$$typeof===u||e.$$typeof===p||e.$$typeof===t||void 0!==e.getModuleId)}(e);if(!x){var k,S="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(S+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),S+=oe(),null===e?k="null":X(e)?k="array":void 0!==e&&e.$$typeof===n?(k="<"+(w(e.type)||"Unknown")+" />",S=" Did you accidentally export a JSX literal instead of a component?"):k=typeof e,b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",k,S)}var C=K(e,r,o,g,m);if(null==C)return C;if(x){var j=r.children;if(void 0!==j)if(l)if(X(j)){for(var _=0;_<j.length;_++)ce(j[_],e);Object.freeze&&Object.freeze(j)}else b("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else ce(j,e)}if(W.call(r,"key")){var R=w(e),O=Object.keys(r).filter((function(e){return"key"!==e})),E=O.length>0?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}";se[R+E]||(b('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',E,R,O.length>0?"{"+O.join(": ..., ")+": ...}":"{}",R),se[R+E]=!0)}return e===a?function(e){for(var t=Object.keys(e.props),r=0;r<t.length;r++){var n=t[r];if("children"!==n&&"key"!==n){re(e),b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),re(null);break}}null!==e.ref&&(re(e),b("Invalid attribute `ref` supplied to `React.Fragment`."),re(null))}(C):le(C),C}var pe=function(e,t,r){return ue(e,t,r,!1)},fe=function(e,t,r){return ue(e,t,r,!0)};l.Fragment=a,l.jsx=pe,l.jsxs=fe}()),l);var s=a.exports;exports.ProfileCropper=function(o){var a=o.initialImage,i=o.onSave,c=o.onCancel,l=o.theme,u=o.cropShape,p=void 0===u?"circle":u,f=o.aspectRatio,d=o.outputFormat,y=void 0===d?"png":d,v=o.outputQuality,h=void 0===v?.9:v,g=o.headerText,m=void 0===g?"Profile Picture Cropper":g,b=o.previewText,x=void 0===b?"Preview":b,w=o.saveButtonText,k=void 0===w?"Save Profile Picture":w,S=o.cancelButtonText,C=void 0===S?"Cancel":S,j=o.loadingText,_=void 0===j?"Saving...":j,R=o.showPreview,O=void 0===R||R,E=o.previewSize,P=void 0===E?120:E,T=o.containerClassName,N=void 0===T?"":T,F=o.headerClassName,D=void 0===F?"":F,$=o.previewContainerClassName,I=void 0===$?"":$,B=o.buttonContainerClassName,z=void 0===B?"":B,M=o.saveButtonClassName,W=void 0===M?"":M,L=o.cancelButtonClassName,U=void 0===L?"":L,A=o.size,Y=void 0===A?250:A,X=o.className,Z=void 0===X?"":X,G=o.style,H=void 0===G?{}:G,J=o.containerHeight,V=void 0===J?350:J,q=o.maxZoom,K=void 0===q?4:q,Q=o.minZoom,ee=void 0===Q?0:Q,te=o.zoomStep,re=void 0===te?.1:te,ne=o.allowZoom,oe=void 0===ne||ne,ae=o.allowDrag,ie=void 0===ae||ae,ce=o.uploadText,le=void 0===ce?"Click to upload image":ce,se=o.uploadSubtext,ue=void 0===se?"JPG, PNG or GIF. Max 5MB.":se,pe=o.zoomLabel,fe=void 0===pe?"Zoom:":pe,de=o.changeButtonText,ye=void 0===de?"Change Image":de,ve=o.acceptedFileTypes,he=void 0===ve?"image/*":ve,ge=o.maxFileSizeMB,me=void 0===ge?5:ge,be=o.showZoomControls,xe=void 0===be||be,we=o.showChangeButton,ke=void 0===we||we,Se=o.onError,Ce=o.errorContainerClassname,je=void 0===Ce?"":Ce,_e=o.errorTextClassname,Re=void 0===_e?"":_e,Oe=t(t({},{backgroundColor:"#f3f2ef",overlayColor:"rgba(0, 0, 0, 0.6)",borderColor:"#e0e0e0",accentColor:"#0077B5",textColor:"#333333",buttonBackgroundColor:"#0077B5",buttonTextColor:"white"}),l),Ee=e.useRef(null),Pe=e.useRef(null),Te=e.useRef(null),Ne=e.useRef(null),Fe=e.useRef(null),De=e.useState(a||""),$e=De[0],Ie=De[1],Be=e.useState(!1),ze=Be[0],Me=Be[1],We=e.useState({x:0,y:0,width:Y,height:f?Y/f:Y}),Le=We[0],Ue=We[1],Ae=e.useState({x:0,y:0}),Ye=Ae[0],Xe=Ae[1],Ze=e.useState(null),Ge=Ze[0],He=Ze[1],Je=e.useState(!1),Ve=Je[0],qe=Je[1],Ke=e.useState(ee),Qe=Ke[0],et=Ke[1],tt=e.useState(!a),rt=tt[0],nt=tt[1],ot=e.useState(null),at=ot[0],it=ot[1],ct=e.useState(null);ct[0];var lt=ct[1],st=e.useState(a),ut=st[0],pt=st[1],ft=e.useState(!1),dt=ft[0],yt=ft[1],vt=e.useCallback((function(e,t,r,n){var o=r/e,a=n/t;return Math.min(o,a,1)}),[]),ht=e.useCallback((function(e,t){lt(e),t&&pt(t)}),[]);e.useEffect((function(){if(ze&&Pe.current&&Ee.current){var e=Pe.current,r=e.naturalWidth,n=e.naturalHeight,o=Ee.current.getBoundingClientRect(),a=vt(r,n,o.width,o.height);Fe.current=a;var i=0===Qe?a:Qe,c=r*i,l=n*i,s=(o.width-c)/2,u=(o.height-l)/2,p=(o.width-Le.width)/2,f=(o.height-Le.height)/2;Qe===ee&&et(0),Xe({x:s,y:u}),Ue(t(t({},Le),{x:p,y:f})),gt({x:s,y:u},i,t(t({},Le),{x:p,y:f}))}}),[ze,Y,Qe,ee,vt,Le.width,Le.height]);var gt=e.useCallback((function(e,t,r){var n=wt(e,t,r);ht(r,n)}),[ht]),mt=e.useCallback((function(e,t){ie&&Pe.current&&Ee.current&&(qe(!0),He({x:e,y:t}))}),[ie]),bt=e.useCallback((function(e,t){if(ie&&Ge&&Ve&&Pe.current&&Ee.current){var r=e-Ge.x,n=t-Ge.y;He({x:e,y:t});var o={x:Ye.x+r,y:Ye.y+n};Xe(o);var a=0===Qe&&Fe.current?Fe.current:Qe;gt(o,a,Le)}}),[ie,Ge,Ve,Le,gt,Ye,Qe]),xt=function(){Ve&&(qe(!1),He(null))},wt=function(e,t,r){if(!Pe.current||!Te.current)return"";var n=Te.current,o=n.getContext("2d");if(!o)return"";n.width=r.width,n.height=r.height,o.clearRect(0,0,n.width,n.height),o.beginPath(),"circle"===p?o.arc(r.width/2,r.height/2,Math.min(r.width,r.height)/2,0,2*Math.PI):o.rect(0,0,r.width,r.height),o.clip();var a=(r.x-e.x)/t,i=(r.y-e.y)/t,c=r.width/t,l=r.height/t;o.drawImage(Pe.current,a,i,c,l,0,0,r.width,r.height);return n.toDataURL({png:"image/png",jpeg:"image/jpeg",webp:"image/webp"}[y],h)},kt=function(){Ne.current&&Ne.current.click()},St=0===Qe&&Fe.current?Fe.current:Qe,Ct=t({position:"relative",overflow:"hidden",maxWidth:"100%",userSelect:"none",backgroundColor:Oe.backgroundColor,border:"1px solid ".concat(Oe.borderColor),borderRadius:"8px",height:"".concat(V,"px")},H),jt={position:"absolute",left:"".concat(Ye.x,"px"),top:"".concat(Ye.y,"px"),transform:"scale(".concat(St,")"),transformOrigin:"0 0",cursor:ie?Ve?"grabbing":"grab":"default",display:$e&&ze?"block":"none",maxWidth:"none"},_t={position:"absolute",left:"".concat(Le.x,"px"),top:"".concat(Le.y,"px"),width:"".concat(Le.width,"px"),height:"".concat(Le.height,"px"),borderRadius:"circle"===p?"50%":"0",boxShadow:"0 0 0 1000px ".concat(Oe.overlayColor),pointerEvents:"none",overflow:"hidden"},Rt={position:"absolute",left:"".concat(Le.x-7.5,"px"),top:"".concat(Le.y-7.5,"px"),width:"".concat(Le.width+10,"px"),height:"".concat(Le.height+10,"px"),border:"2px dashed rgba(255, 255, 255, 0.8)",borderRadius:"circle"===p?"50%":"0",pointerEvents:"none"};return s.jsxs("div",{className:"profile-cropper-container ".concat(N),style:{maxWidth:"600px",margin:"0 auto",padding:"20px",backgroundColor:"#ffffff",borderRadius:"8px",boxShadow:"0 0 10px rgba(0, 0, 0, 0.1)"},children:[m&&s.jsx("h1",{className:"profile-cropper-header ".concat(D),style:{fontSize:"24px",fontWeight:"bold",marginBottom:"16px",color:"#333333",textAlign:"center"},children:m}),s.jsx("canvas",{ref:Te,style:{display:"none"}}),s.jsx("input",{ref:Ne,type:"file",accept:he,onChange:function(e){var t=e.target.files;if(t&&0!==t.length){var r=t[0];if(!r.type.startsWith("image/"))return it(n="Please upload an image file"),void(Se&&Se(n));if(r.size>1024*me*1024){var n="Image must be less than ".concat(me,"MB");return it(n),void(Se&&Se(n))}it(null);var o=new FileReader;o.onload=function(e){var t,r=null===(t=e.target)||void 0===t?void 0:t.result;Ie(r),Me(!1),et(0)},o.readAsDataURL(r)}},style:{display:"none"}}),s.jsxs("div",{className:"upload-container ".concat(rt?"visible":"hidden"),onClick:kt,style:{display:rt?"flex":"none",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"300px",cursor:"pointer",backgroundColor:"#f7f7f7",border:"2px dashed ".concat(Oe.borderColor),borderRadius:"8px",padding:"20px"},children:[s.jsx("div",{className:"upload-icon",style:{fontSize:"40px",marginBottom:"10px",color:"#888"},children:"📷"}),s.jsx("div",{className:"upload-text",style:{fontSize:"16px",color:Oe.textColor,marginBottom:"5px"},children:le}),s.jsx("div",{className:"upload-subtext",style:{fontSize:"12px",color:"#888"},children:ue})]}),at&&s.jsx("div",{className:"error-container ".concat(je),style:{textAlign:"center",margin:"10px 0"},children:s.jsx("div",{className:"error-text ".concat(Re),style:{color:"red",fontSize:"14px"},children:at})}),$e&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{ref:Ee,className:Z,style:Ct,onMouseDown:function(e){e.preventDefault(),mt(e.clientX,e.clientY)},onMouseMove:function(e){bt(e.clientX,e.clientY)},onMouseUp:xt,onMouseLeave:xt,onTouchStart:function(e){var t=e.touches[0];mt(t.clientX,t.clientY),e.preventDefault()},onTouchMove:function(e){var t=e.touches[0];bt(t.clientX,t.clientY)},onTouchEnd:xt,children:[s.jsx("img",{ref:Pe,src:$e,alt:"Crop",onLoad:function(){Me(!0),nt(!1)},style:jt,draggable:!1}),ze&&s.jsxs(s.Fragment,{children:[s.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"}}),s.jsx("div",{style:_t}),s.jsx("div",{style:Rt})]})]}),ze&&s.jsxs(s.Fragment,{children:[xe&&s.jsxs("div",{className:"zoom-controls",style:{display:"flex",alignItems:"center",margin:"10px 0"},children:[s.jsx("span",{style:{marginRight:"10px",fontSize:"14px",color:Oe.textColor},children:fe}),s.jsx("input",{type:"range",min:ee,max:K,step:re,value:Qe,onChange:function(e){if(oe){var t=parseFloat(e.target.value);if(Pe.current&&Ee.current){var r=Pe.current,n=r.naturalWidth,o=r.naturalHeight,a=0===Qe&&Fe.current?Fe.current:Qe,i=0===t&&Fe.current?Fe.current:t,c=(Le.x+Le.width/2-Ye.x)/(n*a)*(n*i),l=(Le.y+Le.height/2-Ye.y)/(o*a)*(o*i),s=Le.x+Le.width/2-c,u=Le.y+Le.height/2-l;et(t),Xe({x:s,y:u}),gt({x:s,y:u},i,Le)}}},style:{accentColor:Oe.accentColor,width:"100%"},disabled:!oe})]}),ke&&s.jsx("button",{className:"change-button",onClick:kt,style:{padding:"8px 16px",backgroundColor:Oe.buttonBackgroundColor,color:Oe.buttonTextColor,border:"1px solid ".concat(Oe.borderColor),borderRadius:"4px",cursor:"pointer",fontSize:"14px",margin:"10px 0",display:"block"},children:ye})]})]}),O&&ut&&s.jsxs("div",{className:"preview-container ".concat(I),style:{display:"flex",flexDirection:"column",alignItems:"center",margin:"20px 0"},children:[s.jsx("img",{src:ut,alt:"Preview",style:{width:"".concat(P,"px"),height:"".concat(P,"px"),borderRadius:"circle"===p?"50%":"0",objectFit:"cover",border:"1px solid ".concat(Oe.borderColor),marginBottom:"10px",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)"}}),x&&s.jsx("span",{style:{fontSize:"14px",color:Oe.textColor},children:x})]}),s.jsxs("div",{className:"button-container ".concat(z),style:{display:"flex",justifyContent:"center",gap:"10px",marginTop:"16px"},children:[c&&s.jsx("button",{className:"cancel-button ".concat(U),onClick:c,disabled:dt,style:{padding:"10px 20px",backgroundColor:"#f0f0f0",color:"#333",border:"none",borderRadius:"4px",cursor:dt?"not-allowed":"pointer",fontWeight:"bold",opacity:dt?.5:1},children:C}),s.jsx("button",{className:"save-button ".concat(W),onClick:function(){return r(void 0,void 0,void 0,(function(){var e,t;return n(this,(function(r){switch(r.label){case 0:if(!ut)return[3,7];yt(!0),r.label=1;case 1:return r.trys.push([1,5,6,7]),i?[4,i(ut)]:[3,3];case 2:return r.sent(),[3,4];case 3:(e=document.createElement("a")).href=ut,e.download="profile-picture.".concat(y),e.click(),r.label=4;case 4:return[3,7];case 5:return t=r.sent(),console.error("Error saving image:",t),[3,7];case 6:return yt(!1),[7];case 7:return[2]}}))}))},disabled:!ut||dt,style:{padding:"10px 20px",backgroundColor:Oe.buttonBackgroundColor,color:Oe.buttonTextColor,border:"none",borderRadius:"4px",cursor:ut&&!dt?"pointer":"not-allowed",fontWeight:"bold",opacity:ut&&!dt?1:.5,transition:"all 0.2s ease"},children:dt?_:k})]})]})};
//# sourceMappingURL=index.js.map