@inntechcorp/it-design 3.1.6 → 3.1.9

package/dist/cropper/index.d.ts

@@ -13,6 +13,10 @@ export interface ImageCropperProps {
     minWidth?: number;
     /** Minimum crop height in pixels */
     minHeight?: number;
+    /** Output width - cropped image will be resized to this width */
+    outputWidth?: number;
+    /** Output height - cropped image will be resized to this height */
+    outputHeight?: number;
     /** Output image quality (0-1) */
     quality?: number;
     /** Output image format */
@@ -23,6 +27,8 @@ export interface ImageCropperProps {
     width?: string | number;
     /** Container height */
     height?: string | number;
+    /** Show grid lines on crop area (default: true) */
+    showGrid?: boolean;
 }
 export interface ImageCropperRef {
     /** Get cropped image as Blob */

package/dist/index.cjs.js

@@ -2382,7 +2382,7 @@
   margin-top: 10px;
   gap: 5px;
 
-`;const Od=new RegExp(/^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/),Id=new RegExp(/^[a-zA-Z0-9_.-]+$/),Rd=new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+={};:<>|./?,"'\[\]\\`~\-])[a-zA-Z\d$begin:math:display$$end:math:display$\\`~!@#$%^&*()_+={};:<>|.\/?,"'-]{8,60}$/),Pd=new RegExp(/^[a-z0-9._-]+$/),Bd=new RegExp(/^[a-zA-Z0-9]+$/),Vd=new RegExp(/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/);const Hd=e=>Rd.test(e),Ud=e=>Od.test(e),Gd=e=>Id.test(e),Wd=(e,t)=>e.length>=t,Yd=(e,t)=>e.length<=t,qd=(e,t)=>e===t,Xd=(e,t)=>e!==t,Kd=(e,t)=>e.length===t,Jd=e=>Pd.test(e),Zd=e=>Bd.test(e),Qd=e=>Vd.test(e),ec=(e,t)=>{if(!Array.isArray(t)||0===t.length)return!0;const r=String(e).trim().toLowerCase();return!t.some(e=>r===String(e).trim().toLowerCase())},tc=e=>function(e){var t,r=0,n=0,o=0;if(11!=e.length)return!1;if(!/^-?\d+$/.test(e))return!1;if(0==Number(e[0]))return!1;if(r=parseInt(e[0])+parseInt(e[2])+parseInt(e[4])+parseInt(e[6])+parseInt(e[8]),t=parseInt(e[1])+parseInt(e[3])+parseInt(e[5])+parseInt(e[7]),r*=7,Math.abs(r-t)%10!=Number(e[9]))return!1;for(o=0;o<10;o++)n+=parseInt(e[o]);return n%10==Number(e[10])}(e),rc=e=>{if(Array.isArray(e)){if(0===e.length)return!1}else{if("object"==typeof e){let t=!0;return Object.keys(e).forEach(r=>{""===e[r]&&(t=!1)}),t}if("string"==typeof e){if(""===e)return!1}else if("boolean"==typeof e&&!1===e)return!1}return!0},nc=n.createContext({});nc.displayName="ITDFormContext";const oc=n.forwardRef(({name:e="",id:r="",label:o="",placeholder:i="",error:a="",rules:s=[],mask:l=null,locked:d=!1,dependency:c="",reset:u=[],query:p="",children:f=null},h)=>{const{t:g}=t.useTranslation("itd"),m=n.useRef(null),b=n.useRef(""),{register:v,unregister:y,hasField:w,updateField:A,setFieldError:k,getFieldValue:S,getFieldInstance:_,formId:E}=n.useContext(nc),[C,$]=n.useState(!1);n.useEffect(()=>(v({name:e,field:m,valid:F(m.current?.getValue(),!1),query:p,reset:u,error:a}),$(!0),b.current=JSON.stringify(s),()=>{$(!1),y(e)}),[]),n.useEffect(()=>{const t=JSON.stringify(s);if(C&&m.current&&b.current!==t){const r=()=>{const t=m.current.getValue(),r=s.find(e=>e.hasOwnProperty("required"));if(!r||r.required||""!==t&&null!=t){const r=F(t,!1);w(e)&&A(e,t,!1,r)}else k(e,"",!0),w(e)&&A(e,t,!1,!0)};"development"===process.env.NODE_ENV?requestAnimationFrame(r):r(),b.current=t}},[s,C]),n.useImperativeHandle(h,()=>m.current);const j=(t,r=!0,n=!0)=>{C&&w(e)&&(A(e,t,r,F(t,n)),z())},F=(t,r=!0)=>{const n=function(e,t,r,n){let o=[];return e.forEach(e=>{if(e.hasOwnProperty(x.REQUIRED)&&!rc(t)&&e.required&&o.push(e.message?e.message:n("errors.required")),e.hasOwnProperty(x.TYPE)&&(e.type===exports.FormValidationTypes.MIN_LENGTH&&(Wd(String(t),Number(e.value))||o.push(e.message?e.message:n("errors.minLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.MAX_LENGTH&&(Yd(String(t),Number(e.value))||o.push(e.message?e.message:n("errors.maxLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.EXACT_LENGTH&&(Kd(String(t),Number(e.value))||o.push(e.message?e.message:n("errors.exactLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.SAME&&(qd(String(t),String(r(String(e.field))))||o.push(e.message?e.message:n("errors.fieldMustBeTheSame",{fields:e.field}))),e.type===exports.FormValidationTypes.NOT_SAME&&(Xd(String(t),String(r(String(e.field))))||o.push(e.message?e.message:n("errors.fieldMustBeDifferent",{fields:e.field}))),e.type===exports.FormValidationTypes.TC_IDENTITY&&(tc(String(t))||o.push(e.message?e.message:n("errors.wrongTCIdentity"))),e.type===exports.FormValidationTypes.PASSWORD&&(Hd(String(t))||o.push(e.message?e.message:n("errors.passwordRule"))),e.type===exports.FormValidationTypes.EMAIL&&(Ud(String(t))||o.push(e.message?e.message:n("errors.invalidEmailAddress"))),e.type===exports.FormValidationTypes.USERNAME&&(Gd(String(t))||o.push(e.message?e.message:n("errors.usernameRule"))),e.type===exports.FormValidationTypes.SITE_USERNAME&&(Jd(String(t))||o.push(e.message?e.message:n("errors.siteUsernameRule"))),e.type===exports.FormValidationTypes.ADMIN_USERNAME&&(Zd(String(t))||o.push(e.message?e.message:n("errors.adminUsernameRule"))),e.type===exports.FormValidationTypes.URL&&(Qd(String(t))||o.push(e.message?e.message:n("errors.invalidURL"))),e.type===exports.FormValidationTypes.FORBIDDEN_WORDS)){const r=Array.isArray(e.value)?e.value:void 0!==e.value?[e.value]:[];ec(String(t),r)||o.push(e.message?e.message:n("errors.forbiddenWords"))}}),o}(s,t,S,g);return n.length>0?!!(r||""!==t&&null!=t)&&(r&&k(e,n[0],r),!1):(r&&k(e,""),!0)},z=()=>{if(""===c)return;if(""===S(c))return;const e=_(c);e&&e.forceUpdate&&e.forceUpdate()};return(()=>{if(!f)return null;let t=f.props;const a={id:t.id?t.id:r||E+"_"+e,label:o,placeholder:i,className:t.className?t.className+" itd-form-item":"itd-form-item",onUpdate:j,ref:m};return l&&(a.mask=l),d&&(a.locked=d),n.cloneElement(f,{...t,...a})})()}),ic=n.forwardRef(({name:e="",className:t="",initialValues:o={},useQueryString:i=!1,onUpdate:s,onFinish:l,onFinishFailed:d,onValidated:c,children:u},f)=>{const{updated:h,setInitialValues:g,isFormValid:m,getValues:b,getFields:x,setFieldValueByName:v,resetFields:y}=n.useContext(nc),w=V(),{search:A}=a.useLocation(),k=H(),[S,_]=n.useState([]),[E,C]=n.useState(!1),[$,j]=n.useState([]),[F,z]=n.useState(!1),[L,N]=n.useState(!1);n.useEffect(()=>{u&&B()},[u]),n.useEffect(()=>{M(),D()},[F]),n.useEffect(()=>{F||0!==Object.keys(x()).length&&0!==$.length&&Object.keys(x()).length===$.length&&z(!0)},[x(),$]),n.useEffect(()=>{D()},[o]),n.useEffect(()=>{M()},[A]),n.useEffect(()=>{L&&F&&i&&Object.keys(h).length>0&&I(h)},[h]),n.useEffect(()=>{c&&m()!==E&&c(m()),C(m())},[m()]);const M=()=>{F&&i&&(R(),L||O())},D=()=>{F&&(i||L||T())},T=()=>{const e=!Object.values(o).some(e=>null!==e&&""!==e);e&&!L&&N(!0),e||L||(g(o,!1),N(!0))},O=()=>{const e=x(),t=!Object.values(e).some(e=>""!==w.get(e.query,""));if(Object.values(e).some(e=>null===e.query||""===e.query)){let t=[];throw Object.keys(e).forEach(r=>{e[r].hasOwnProperty("query")&&null!==e[r].query&&""!==e[r].query||t.push(r)}),new Error(`ITD Form Initial Fields Error: "useQueryString" is activated but "query" value is not passed to whole form elements! Invalid fields are ${t.toString()}`)}if(t&&!L&&N(!0),!t&&!L){let t={};Object.keys(e).forEach(r=>{t[r]=w.get(e[r].query,"")}),g(t,!0,!0),N(!0)}},I=e=>{let t=[],r=[];const n=x();Object.keys(e).forEach(t=>{r.push(e[t])}),ui(r,S)||(Object.keys(n).forEach(r=>{t.push({type:n[r].query,value:e[r]})}),k.set(t))},R=()=>{let e=[],t=[];const r=x();if(Object.keys(r).forEach(t=>{let n=String(w.get(r[t].query,""));e.push(n)}),ui(e,S))return;_(e),Object.keys(r).forEach(e=>{t[e]=w.get(r[e].query,"")}),Object.keys(t).forEach(e=>{v(e,t[e],!1,!1)});let n={};Object.keys(t).forEach(e=>{n[e]=t[e]}),s&&s(n)},P=()=>{if(e)try{const t=new CustomEvent("itd-input-unlock",{detail:{formId:e}});document.dispatchEvent(t)}catch{}},B=()=>{let e=[];p.getChildrenDeep(u,t=>(t.hasOwnProperty("type")&&t.type===oc&&e.push({[t.props.name]:t}),!0)),j(e)};return n.useImperativeHandle(f,()=>({fieldUpdate(e){console.log("fieldUpdate"),console.log(e)}})),r.jsx("form",{id:e,onSubmit:e=>{e&&(e.preventDefault(),e.stopPropagation()),m()?l&&l(b()):d&&d(x())},onReset:e=>{e&&(e.preventDefault(),e.stopPropagation());let t=[];Object.keys(x()).map(e=>{t.push({type:e,value:""})}),k.set(t),y(!0,!1)},onPointerDown:P,onTouchStart:P,autoComplete:"off",className:t,noValidate:!0,children:u})});var ac=n.memo(ic);function sc({name:e="",useQueryString:t=!1,onUpdate:r,onReset:o,onFieldUpdate:i}){const[a,s]=n.useState({}),[l,d]=n.useState(e),[c,u]=n.useState(!1),[p,f]=n.useState({});function h(e){return a.hasOwnProperty(e)&&void 0!==a[e]}function g(e){return h(e)?a[e].field.current:null}function m(){let e={};return Object.keys(a).forEach(t=>{e[t]=v(t)}),e}function b(e,t,r=!0){if(h(e)&&a[e].field.current){if(a[e].valid=!1,a[e].error=t,!a[e].field.current?.hasOwnProperty("setError"))throw new Error(`ITD Reference Error: You must declare the 'setError' function on the field "${e}"`);a[e].field.current?.setError?.(r?t:"")}}function x(){let e=!0;return Object.keys(a).forEach(t=>{a[t].valid||(e=!1)}),u(e),e}function v(e){if(h(e)){if(a[e].field.current?.hasOwnProperty("getValue"))return a[e].field.current?.getValue();throw new Error(`ITD Reference Error: You must declare the 'getValue' function on the field "${e}"`)}console.error(`ITD Form Error [getFieldValueByName]: There is no field registered with this name: ${e}`)}function y(e,t,r,n){if(h(e)){if(!a[e].field.current?.hasOwnProperty("setValue"))throw new Error(`ITD Reference Error: You must declare the 'setValue' function on the field "${e}"`);{let o=v(e),i=!1;i=Array.isArray(o)&&Array.isArray(t)?ui(o,t):Array.isArray(o)||Array.isArray(t)?o.toString()===t.toString():o===t,i||a[e].field.current?.setValue(t,r,n)}}else console.error(`ITD Form Error [setFieldValueByName]: There is no field registered with this name: ${e}`)}return{register:function(e){a[e.name]={name:e.name,field:e.field,value:e.field.current?.getValue(),valid:e.valid,query:e.query,reset:e.reset,error:e.error}},unregister:function(e){h(e)?(delete a[e],x()):console.error(`ITD Form Error [unregister]: There is no field registered with this name: ${e}`)},scrollTo:function(e,t){const r=void 0!==t?t:{behavior:"smooth",block:"center",inline:"nearest"},n=e=>!(!e||"function"!=typeof e.scrollIntoView)&&(e.scrollIntoView(r),!0);if(h(e)){const t=g(e);if(t&&"function"==typeof t.scrollIntoView)return t.scrollIntoView(r),!0}if("undefined"!=typeof document){const t=document.getElementById(l);if(t){const r=e.startsWith(`${l}_`)?[`#${e}`]:[`#${e}`,`#${l}_${e}`];for(const e of r){if(n(t.querySelector(e)))return!0}}if(n(document.getElementById(e)))return!0}return console.error(`ITD Form Error [scrollTo]: Could not find element in form '${l}' by name/id '${e}'. ScrollIntoView not provided.`),!1},checkFormIsValid:x,hasField:h,getValues:m,getFieldValue:function(e){return h(e)?(t=a[e].value)instanceof Object?JSON.stringify(t):t:"";var t},getFieldValueByName:v,getFieldInstance:g,getFields:function(){let e={};return Object.keys(a).forEach(t=>{e[t]=a[t]}),e},getFieldsInstance:function(){let e={};return Object.keys(a).forEach(t=>{e[t]=a[t].field.current}),e},setName:function(e){d(e)},setInitialValues:function(e,n=!0,o=!1){Object.keys(e).forEach(t=>{y(t,e[t],n,o)});let i={};return Object.keys(e).forEach(t=>{i[t]=e[t]}),n&&(t&&f(i),r&&r(i)),x(),i},setInvalidField:function(e="",t=""){b(e,t),x()},setInvalidFields:function(e=[],t=""){e.forEach(e=>{b(e,t)}),x()},setFieldValue:function(e,t){h(e)?a[e].field.current?.setValue(t,!0,!0):console.error(`ITD Form Error [setFieldValue]: There is no field registered with this name: ${e}`)},setFieldValueByName:y,setFieldError:b,removeFieldError:function(e){if(h(e)){if(a[e].valid=!0,a[e].error="",!a[e].field.current?.hasOwnProperty("setError"))throw new Error(`ITD Reference Error: You must declare the 'setError' function on the field "${e}"`);a[e].field.current?.setError?.("")}else console.error(`ITD Form Error [removeFieldError]: There is no field registered with this name: ${e}`)},updateField:function(e,n,o,s){if(h(e)){if(a[e].value=n,a[e].valid=s,o){i&&i({name:e,value:n,valid:s}),a[e].reset.length>0&&a[e].reset.forEach(e=>{a[e].value="",a[e].valid=!1,a[e].field.current?.reset(!1)});let o={...m(),[e]:n};a[e].reset.length>0&&a[e].reset.forEach(e=>{o[e]=""}),t&&s&&f(o),r&&r(o)}x()}else console.error(`ITD Form Error [updateField]: There is no field registered with this name: ${e}`)},isFormValid:n.useCallback(()=>c,[c]),isFieldsValid:function(e){let t=!0;return e.forEach(e=>{a[e].valid||(t=!1)}),t},isFieldValid:function(e){return a[e].valid},resetFields:function(e=!1,t=!1){Object.keys(a).forEach(r=>{if(!a[r].field.current?.hasOwnProperty("reset"))throw new Error(`ITD Reference Error: You must declare the 'reset' function on the field "${r}"`);a[r].field.current?.reset(e,t)}),o&&o()},removeFields:function(){s({})},formId:l,updated:p}}const lc=n.forwardRef(({initialValues:e,children:t,onUpdate:o,onReset:i,onFinish:a,onFinishFailed:s,onFieldUpdate:l,onValidated:d,useQueryString:c,className:u,name:p},f)=>{const h=n.useRef(null);n.useEffect(()=>()=>{h.current=null},[]),h.current=sc({name:p,onUpdate:o,onReset:i,onFieldUpdate:l,useQueryString:c}),n.useImperativeHandle(f,()=>h.current);return r.jsx(nc.Provider,{value:h.current,children:r.jsx(ac,{initialValues:e,useQueryString:c,onUpdate:o,onFinish:a,onFinishFailed:s,onValidated:d,name:p,className:(()=>{let e="itd-form";return p&&(e+=" "+p),u&&(e+=" "+u),e})(),children:t})})});lc.Item=oc,lc.Group=function({gap:e=15,horizontal:t=!1,className:n,children:o}){const i=()=>{let e="itd-form-group";return n&&(e+=" "+n),e};return r.jsx(Dd,{className:i(),$gap:e,$horizontal:t,children:o})},lc.Control=function({position:e="end",className:t,children:n}){const o=()=>{let e="itd-form-control";return t&&(e+=" "+t),e};return r.jsx(Td,{className:o(),$position:e,children:n})},lc.useForm=()=>n.useContext(nc),lc.useFormAPI=()=>{const e=n.useContext(nc);if(!e)throw new Error("useFormAPI must be used within a FormContext.Provider");return e};const dc=l.div`
+`;const Od=new RegExp(/^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/),Id=new RegExp(/^[a-zA-Z0-9_.-]+$/),Rd=new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+={};:<>|./?,"'\[\]\\`~\-])[a-zA-Z\d$begin:math:display$$end:math:display$\\`~!@#$%^&*()_+={};:<>|.\/?,"'-]{8,60}$/),Pd=new RegExp(/^[a-z0-9._-]+$/),Bd=new RegExp(/^[a-zA-Z0-9]+$/),Vd=new RegExp(/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/);const Hd=e=>Rd.test(e),Ud=e=>Od.test(e),Gd=e=>Id.test(e),Wd=(e,t)=>e.length>=t,Yd=(e,t)=>e.length<=t,qd=(e,t)=>e===t,Xd=(e,t)=>e!==t,Kd=(e,t)=>e.length===t,Jd=e=>Pd.test(e),Zd=e=>Bd.test(e),Qd=e=>Vd.test(e),ec=(e,t)=>{if(!Array.isArray(t)||0===t.length)return!0;const r=String(e).trim().toLowerCase();return!t.some(e=>r===String(e).trim().toLowerCase())},tc=e=>function(e){var t,r=0,n=0,o=0;if(11!=e.length)return!1;if(!/^-?\d+$/.test(e))return!1;if(0==Number(e[0]))return!1;if(r=parseInt(e[0])+parseInt(e[2])+parseInt(e[4])+parseInt(e[6])+parseInt(e[8]),t=parseInt(e[1])+parseInt(e[3])+parseInt(e[5])+parseInt(e[7]),r*=7,Math.abs(r-t)%10!=Number(e[9]))return!1;for(o=0;o<10;o++)n+=parseInt(e[o]);return n%10==Number(e[10])}(e),rc=e=>{if(Array.isArray(e)){if(0===e.length)return!1}else{if("object"==typeof e){let t=!0;return Object.keys(e).forEach(r=>{""===e[r]&&(t=!1)}),t}if("string"==typeof e){if(""===e)return!1}else if("boolean"==typeof e&&!1===e)return!1}return!0},nc=n.createContext({});nc.displayName="ITDFormContext";const oc=n.forwardRef(({name:e="",id:r="",label:o="",placeholder:i="",error:a="",rules:s=[],mask:l=null,locked:d=!1,dependency:c="",reset:u=[],query:p="",children:f=null},h)=>{const{t:g}=t.useTranslation("itd"),m=n.useRef(null),b=n.useRef(""),{register:v,unregister:y,hasField:w,updateField:A,setFieldError:k,getFieldValue:S,getFieldInstance:_,formId:E}=n.useContext(nc),[C,$]=n.useState(!1);n.useEffect(()=>(v({name:e,field:m,valid:F(m.current?.getValue(),!1),query:p,reset:u,error:a}),$(!0),b.current=JSON.stringify(s),()=>{$(!1),y(e)}),[]),n.useEffect(()=>{const t=JSON.stringify(s);if(C&&m.current&&b.current!==t){const r=()=>{const t=m.current.getValue(),r=s.find(e=>e.hasOwnProperty("required"));if(!r||r.required||""!==t&&null!=t){const r=F(t,!1);w(e)&&A(e,t,!1,r)}else k(e,"",!0),w(e)&&A(e,t,!1,!0)};"development"===process.env.NODE_ENV?requestAnimationFrame(r):r(),b.current=t}},[s,C]),n.useImperativeHandle(h,()=>m.current);const j=(t,r=!0,n=!0)=>{C&&w(e)&&(A(e,t,r,F(t,n)),z())},F=(t,r=!0)=>{const n=function(e,t,r,n){let o=[];return e.forEach(e=>{if(e.hasOwnProperty(x.REQUIRED)&&!rc(t)&&e.required&&o.push(e.message?e.message:n("errors.required")),e.hasOwnProperty(x.TYPE)&&(e.type===exports.FormValidationTypes.MIN_LENGTH&&(Wd(String(t),Number(e.value))||o.push(e.message?e.message:n("errors.minLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.MAX_LENGTH&&(Yd(String(t),Number(e.value))||o.push(e.message?e.message:n("errors.maxLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.EXACT_LENGTH&&(Kd(String(t),Number(e.value))||o.push(e.message?e.message:n("errors.exactLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.SAME&&(qd(String(t),String(r(String(e.field))))||o.push(e.message?e.message:n("errors.fieldMustBeTheSame",{fields:e.field}))),e.type===exports.FormValidationTypes.NOT_SAME&&(Xd(String(t),String(r(String(e.field))))||o.push(e.message?e.message:n("errors.fieldMustBeDifferent",{fields:e.field}))),e.type===exports.FormValidationTypes.TC_IDENTITY&&(tc(String(t))||o.push(e.message?e.message:n("errors.wrongTCIdentity"))),e.type===exports.FormValidationTypes.PASSWORD&&(Hd(String(t))||o.push(e.message?e.message:n("errors.passwordRule"))),e.type===exports.FormValidationTypes.EMAIL&&(Ud(String(t))||o.push(e.message?e.message:n("errors.invalidEmailAddress"))),e.type===exports.FormValidationTypes.USERNAME&&(Gd(String(t))||o.push(e.message?e.message:n("errors.usernameRule"))),e.type===exports.FormValidationTypes.SITE_USERNAME&&(Jd(String(t))||o.push(e.message?e.message:n("errors.siteUsernameRule"))),e.type===exports.FormValidationTypes.ADMIN_USERNAME&&(Zd(String(t))||o.push(e.message?e.message:n("errors.adminUsernameRule"))),e.type===exports.FormValidationTypes.URL&&(Qd(String(t))||o.push(e.message?e.message:n("errors.invalidURL"))),e.type===exports.FormValidationTypes.FORBIDDEN_WORDS)){const r=Array.isArray(e.value)?e.value:void 0!==e.value?[e.value]:[];ec(String(t),r)||o.push(e.message?e.message:n("errors.forbiddenWords"))}}),o}(s,t,S,g);return n.length>0?!!(r||""!==t&&null!=t)&&(r&&k(e,n[0],r),!1):(r&&k(e,""),!0)},z=()=>{if(""===c)return;if(""===S(c))return;const e=_(c);e&&e.forceUpdate&&e.forceUpdate()};return(()=>{if(!f)return null;let t=f.props;const a={id:t.id?t.id:r||E+"_"+e,label:o,placeholder:i,className:t.className?t.className+" itd-form-item":"itd-form-item",onUpdate:j,ref:m};return l&&(a.mask=l),d&&(a.locked=d),n.cloneElement(f,{...t,...a})})()}),ic=n.forwardRef(({name:e="",className:t="",initialValues:o={},useQueryString:i=!1,onUpdate:s,onFinish:l,onFinishFailed:d,onValidated:c,children:u},f)=>{const{updated:h,setInitialValues:g,isFormValid:m,getValues:b,getFields:x,setFieldValueByName:v,resetFields:y}=n.useContext(nc),w=V(),{search:A}=a.useLocation(),k=H(),[S,_]=n.useState([]),[E,C]=n.useState(!1),[$,j]=n.useState([]),[F,z]=n.useState(!1),[L,N]=n.useState(!1);n.useEffect(()=>{u&&B()},[u]),n.useEffect(()=>{M(),D()},[F]),n.useEffect(()=>{F||0!==Object.keys(x()).length&&0!==$.length&&Object.keys(x()).length===$.length&&z(!0)},[x(),$]),n.useEffect(()=>{D()},[o]),n.useEffect(()=>{M()},[A]),n.useEffect(()=>{L&&F&&i&&Object.keys(h).length>0&&I(h)},[h]),n.useEffect(()=>{c&&m()!==E&&c(m()),C(m())},[m()]);const M=()=>{F&&i&&(R(),L||O())},D=()=>{F&&(i||L||T())},T=()=>{const e=!Object.values(o).some(e=>null!==e&&""!==e);e&&!L&&N(!0),e||L||(g(o,!1),N(!0))},O=()=>{const e=x(),t=!Object.values(e).some(e=>""!==w.get(e.query,""));if(Object.values(e).some(e=>null===e.query||""===e.query)){let t=[];throw Object.keys(e).forEach(r=>{e[r].hasOwnProperty("query")&&null!==e[r].query&&""!==e[r].query||t.push(r)}),new Error(`ITD Form Initial Fields Error: "useQueryString" is activated but "query" value is not passed to whole form elements! Invalid fields are ${t.toString()}`)}if(t&&!L&&N(!0),!t&&!L){let t={};Object.keys(e).forEach(r=>{t[r]=w.get(e[r].query,"")}),g(t,!0,!0),N(!0)}},I=e=>{let t=[],r=[];const n=x();Object.keys(e).forEach(t=>{r.push(e[t])}),ui(r,S)||(Object.keys(n).forEach(r=>{t.push({type:n[r].query,value:e[r]})}),k.set(t))},R=()=>{let e=[],t=[];const r=x();if(Object.keys(r).forEach(t=>{let n=String(w.get(r[t].query,""));e.push(n)}),ui(e,S))return;_(e),Object.keys(r).forEach(e=>{t[e]=w.get(r[e].query,"")}),Object.keys(t).forEach(e=>{v(e,t[e],!1,!1)});let n={};Object.keys(t).forEach(e=>{n[e]=t[e]}),s&&s(n)},P=()=>{if(e)try{const t=new CustomEvent("itd-input-unlock",{detail:{formId:e}});document.dispatchEvent(t)}catch{}},B=()=>{let e=[];p.getChildrenDeep(u,t=>(t.hasOwnProperty("type")&&t.type===oc&&e.push({[t.props.name]:t}),!0)),j(e)};return n.useImperativeHandle(f,()=>({fieldUpdate(e){console.log("fieldUpdate"),console.log(e)}})),r.jsx("form",{id:e,onSubmit:e=>{e&&(e.preventDefault(),e.stopPropagation()),m()?l&&l(b()):d&&d(x())},onReset:e=>{e&&(e.preventDefault(),e.stopPropagation());let t=[];Object.keys(x()).map(e=>{t.push({type:e,value:""})}),k.set(t),y(!0,!1)},onPointerDown:P,onTouchStart:P,autoComplete:"off",className:t,noValidate:!0,children:u})});var ac=n.memo(ic);function sc({name:e="",useQueryString:t=!1,onUpdate:r,onReset:o,onFieldUpdate:i}){const[a,s]=n.useState({}),[l,d]=n.useState(e),[c,u]=n.useState(!1),[p,f]=n.useState({});function h(e){return a.hasOwnProperty(e)&&void 0!==a[e]}function g(e){return h(e)?a[e].field.current:null}function m(){let e={};return Object.keys(a).forEach(t=>{e[t]=v(t)}),e}function b(e,t,r=!0){if(h(e)&&a[e].field.current){if(a[e].valid=!1,a[e].error=t,!a[e].field.current?.hasOwnProperty("setError"))throw new Error(`ITD Reference Error: You must declare the 'setError' function on the field "${e}"`);a[e].field.current?.setError?.(r?t:"")}}function x(){let e=!0;return Object.keys(a).forEach(t=>{a[t].valid||(e=!1)}),u(e),e}function v(e){if(h(e)){if(a[e].field.current?.hasOwnProperty("getValue"))return a[e].field.current?.getValue();throw new Error(`ITD Reference Error: You must declare the 'getValue' function on the field "${e}"`)}console.error(`ITD Form Error [getFieldValueByName]: There is no field registered with this name: ${e}`)}function y(e,t,r,n){if(h(e)){if(!a[e].field.current?.hasOwnProperty("setValue"))throw new Error(`ITD Reference Error: You must declare the 'setValue' function on the field "${e}"`);{let o=v(e),i=!1;i=Array.isArray(o)&&Array.isArray(t)?ui(o,t):Array.isArray(o)||Array.isArray(t)?o.toString()===t.toString():o===t,i||(a[e].value=t,a[e].field.current?.setValue(t,r,n))}}else console.error(`ITD Form Error [setFieldValueByName]: There is no field registered with this name: ${e}`)}return{register:function(e){a[e.name]={name:e.name,field:e.field,value:e.field.current?.getValue(),valid:e.valid,query:e.query,reset:e.reset,error:e.error}},unregister:function(e){h(e)?(delete a[e],x()):console.error(`ITD Form Error [unregister]: There is no field registered with this name: ${e}`)},scrollTo:function(e,t){const r=void 0!==t?t:{behavior:"smooth",block:"center",inline:"nearest"},n=e=>!(!e||"function"!=typeof e.scrollIntoView)&&(e.scrollIntoView(r),!0);if(h(e)){const t=g(e);if(t&&"function"==typeof t.scrollIntoView)return t.scrollIntoView(r),!0}if("undefined"!=typeof document){const t=document.getElementById(l);if(t){const r=e.startsWith(`${l}_`)?[`#${e}`]:[`#${e}`,`#${l}_${e}`];for(const e of r){if(n(t.querySelector(e)))return!0}}if(n(document.getElementById(e)))return!0}return console.error(`ITD Form Error [scrollTo]: Could not find element in form '${l}' by name/id '${e}'. ScrollIntoView not provided.`),!1},checkFormIsValid:x,hasField:h,getValues:m,getFieldValue:function(e){return h(e)?(t=a[e].value)instanceof Object?JSON.stringify(t):t:"";var t},getFieldValueByName:v,getFieldInstance:g,getFields:function(){let e={};return Object.keys(a).forEach(t=>{e[t]=a[t]}),e},getFieldsInstance:function(){let e={};return Object.keys(a).forEach(t=>{e[t]=a[t].field.current}),e},setName:function(e){d(e)},setInitialValues:function(e,n=!0,o=!1){Object.keys(e).forEach(t=>{y(t,e[t],n,o)});let i={};return Object.keys(e).forEach(t=>{i[t]=e[t]}),n&&(t&&f(i),r&&r(i)),x(),i},setInvalidField:function(e="",t=""){b(e,t),x()},setInvalidFields:function(e=[],t=""){e.forEach(e=>{b(e,t)}),x()},setFieldValue:function(e,t){h(e)?a[e].field.current?.setValue(t,!0,!0):console.error(`ITD Form Error [setFieldValue]: There is no field registered with this name: ${e}`)},setFieldValueByName:y,setFieldError:b,removeFieldError:function(e){if(h(e)){if(a[e].valid=!0,a[e].error="",!a[e].field.current?.hasOwnProperty("setError"))throw new Error(`ITD Reference Error: You must declare the 'setError' function on the field "${e}"`);a[e].field.current?.setError?.("")}else console.error(`ITD Form Error [removeFieldError]: There is no field registered with this name: ${e}`)},updateField:function(e,n,o,s){if(h(e)){if(a[e].value=n,a[e].valid=s,o){i&&i({name:e,value:n,valid:s}),a[e].reset.length>0&&a[e].reset.forEach(e=>{a[e].value="",a[e].valid=!1,a[e].field.current?.reset(!1)});let o={...m(),[e]:n};a[e].reset.length>0&&a[e].reset.forEach(e=>{o[e]=""}),t&&s&&f(o),r&&r(o)}x()}else console.error(`ITD Form Error [updateField]: There is no field registered with this name: ${e}`)},isFormValid:n.useCallback(()=>c,[c]),isFieldsValid:function(e){let t=!0;return e.forEach(e=>{a[e].valid||(t=!1)}),t},isFieldValid:function(e){return a[e].valid},resetFields:function(e=!1,t=!1){Object.keys(a).forEach(r=>{if(!a[r].field.current?.hasOwnProperty("reset"))throw new Error(`ITD Reference Error: You must declare the 'reset' function on the field "${r}"`);a[r].field.current?.reset(e,t)}),o&&o()},removeFields:function(){s({})},formId:l,updated:p}}const lc=n.forwardRef(({initialValues:e,children:t,onUpdate:o,onReset:i,onFinish:a,onFinishFailed:s,onFieldUpdate:l,onValidated:d,useQueryString:c,className:u,name:p},f)=>{const h=n.useRef(null);n.useEffect(()=>()=>{h.current=null},[]),h.current=sc({name:p,onUpdate:o,onReset:i,onFieldUpdate:l,useQueryString:c}),n.useImperativeHandle(f,()=>h.current);return r.jsx(nc.Provider,{value:h.current,children:r.jsx(ac,{initialValues:e,useQueryString:c,onUpdate:o,onFinish:a,onFinishFailed:s,onValidated:d,name:p,className:(()=>{let e="itd-form";return p&&(e+=" "+p),u&&(e+=" "+u),e})(),children:t})})});lc.Item=oc,lc.Group=function({gap:e=15,horizontal:t=!1,className:n,children:o}){const i=()=>{let e="itd-form-group";return n&&(e+=" "+n),e};return r.jsx(Dd,{className:i(),$gap:e,$horizontal:t,children:o})},lc.Control=function({position:e="end",className:t,children:n}){const o=()=>{let e="itd-form-control";return t&&(e+=" "+t),e};return r.jsx(Td,{className:o(),$position:e,children:n})},lc.useForm=()=>n.useContext(nc),lc.useFormAPI=()=>{const e=n.useContext(nc);if(!e)throw new Error("useFormAPI must be used within a FormContext.Provider");return e};const dc=l.div`
 
   &.itd-accordion-menu-sub-menu {
 
@@ -4136,7 +4136,7 @@
 
   }
 
-`,dp=n.forwardRef(({id:e="itd-upload-"+fe(),resultFileName:o=null,action:i="",filePath:a="",binaryName:s="file",showDeleteIcon:l=!1,showPreviewIcon:d=!1,buttonsPosition:c="default",padding:u=10,fluid:p=!0,fileWidth:h="100%",fileHeight:g="auto",maxFileWidth:m="none",maxFileHeight:b="none",containerWidth:x="100%",containerHeight:v="auto",previewFileWidth:y="100%",previewFileHeight:w="100%",previewFilePadding:A="0",requestMethod:k="put",maxFileSize:S=1024,disabled:_=!1,extraFormData:E={},extraQueryString:C={},extraHeader:$={},fileTypes:j=[exports.FileTypes.JPG,exports.FileTypes.PNG,exports.FileTypes.SVG,exports.FileTypes.PDF],removeAction:F="",removeExtraFormData:z={},removeExtraQueryString:L={},removeExtraHeader:N={},minImageWidth:M,minImageHeight:D,enableCrop:T=!1,cropAspectRatio:O,cropMinWidth:I=50,cropMinHeight:R=50,cropQuality:P=.9,cropModalTitle:B,onUpdate:V,onUploadSuccess:H,onUploadFailed:G,onRemoveFileSuccess:W,onRemoveFileFailed:Y},q)=>{const X=n.useRef(null),{showModal:K}=et.useModal(),{fetch:J,cancel:Z}=U(),{t:Q}=t.useTranslation("itd"),[ee,te]=n.useState(!1),[re,ne]=n.useState(!1),[oe,ie]=n.useState(".svg, .png, .jpg"),[ae,se]=n.useState(!1),[le,de]=n.useState(!1),[ce,ue]=n.useState(!1),[pe,he]=n.useState(null),[ge,me]=n.useState(null),[be,ve]=n.useState(""),[ye,we]=n.useState(!1),[Ae,ke]=n.useState(!1),[Se,_e]=n.useState(null),[Ee,Ce]=n.useState(!1),[$e,je]=n.useState(null),[Fe,ze]=n.useState(null);n.useEffect(()=>()=>{Z()},[]),n.useEffect(()=>{ne(_)},[_]),n.useEffect(()=>{me(a?a.split("?")[0]:"")},[a]),n.useEffect(()=>{null!==ge&&(void 0!==ge?Me():te(!1))},[ge]),n.useEffect(()=>{let e=[];j.map(t=>{e.push(Po(t))}),ie(e.join(", "))},[j]);const Le=(e,t)=>{f.toast.error(e,{description:t,duration:5e3})},Ne=(e,t=!0,r=!0)=>{V&&V(e,t,r)};n.useImperativeHandle(q,()=>({setFocus(){ue(!0)},reset(e=!1,t=!1){De(),me(null),ve(""),Ne("",e,t)},setValue(e,t=!0,r=!0){me(e),Ne(e,t,r)},getValue:()=>ge||"",setError(e){ve(e)},forceUpdate(){Ne(ge||"")},clear(){me("")}}));const Me=async()=>{let e=!1;ge&&(e=await Io(ge),he(e),e?Ne(ge):Ne("",!0,!0),ee||te(!0)),""!==ge||ee||te(!0),""===ge&&ee&&Ne("",!0,!0)},De=()=>{je(null),_e(null),Ce(!1),he(null)},Te=async()=>{ne(!0),K({content:r.jsx("div",{children:Q("uploader.areYouSureToDeleteThisFile")}),title:Q("uploader.removeFile"),okButtonText:Q("uploader.yes"),cancelButtonText:Q("uploader.no"),okButtonProps:{variant:"statable",state:"reject"},closeOnClickOutside:!1,showCloseButton:!1,onOk:()=>(F?J({action:F,params:z,queries:L,headers:N,onFetched:e=>{e.data.success?(De(),Ne("",!0,!0),W&&W(e.data.data)):Y&&Y()},onError:()=>{Y&&Y()}}):(De(),Ne("",!0,!0),W&&W()),ne(!1),!0),onCancel:()=>(ne(!1),!0)})},Oe=e=>{e.preventDefault(),Ae||de(!0)},Ie=e=>{e.preventDefault(),Ae||de(!1)},Re=e=>{e.preventDefault(),Ae||(de(!1),e.dataTransfer&&0!==e.dataTransfer.files.length?He(e.dataTransfer.files[0]):console.log(Q("uploader.browserDoesntSupportDND")))},Pe=e=>{de(!1);const t=e.target.files[0];He(t)},Be=async({path:e,errorMessage:t,errorCode:r})=>{await Bo(1e3),_e(null),ke(!1),await Bo(1500),Ce(!1),e?H&&H(e):t&&G&&G(t,r||0)},Ve=async e=>{if(!e)return;let t=new FormData;t.append(s,e),o&&t.append("name",o),Object.keys(E).forEach(e=>{t.append(e,E[e])}),J({action:i,requestMethod:k,params:t,queries:C,headers:$,onFetched:e=>{e.data.success?(je({message:Q("uploader.fileUploadSuccess"),status:"success"}),Ce(!0),me(e.data.data.url),Be({path:e.data.data.url})):(je({message:Q("uploader.fileUploadFailed"),status:"error"}),Ne("",!0,!0),Be({errorMessage:Q("uploader.fileUploadFailed")}))},onError:(e,t)=>{je({message:Q("uploader.fileUploadFailed"),status:"error"}),Ne("",!0,!0),Be({errorMessage:e,errorCode:t})},onProgress:e=>{_e({estimated:e.estimated?(Math.round(100*e.estimated)/100).toFixed(2):"0",progress:e.progress?Math.round(100*e.progress):0,bytes:e.bytes?Ro(e.bytes):"",total:e.total?Ro(e.total):""})}})},He=async e=>{if(!e)return;if(!(e=>!!j.includes(e.type)||(Le(Q("uploader.error"),Q("uploader.fileFormatError",{fileFormat:oe})),!1))(e))return;if(!(e=>!(e.size>1024*S&&(Le(Q("uploader.error"),Q("uploader.fileSizeError",{fileSize:Ro(1024*S)})),1)))(e))return;const t=await(e=>new Promise(t=>{if(!e.type.startsWith("image/")||e.type===exports.FileTypes.SVG)return void t(!0);if(!M&&!D)return void t(!0);const r=new window.Image,n=URL.createObjectURL(e);r.onload=()=>{URL.revokeObjectURL(n);const e=!M||r.naturalWidth>=M,o=!D||r.naturalHeight>=D;if(!e||!o){const e=M&&D?`${M}x${D}`:M?`${M}px ${Q("uploader.width")}`:`${D}px ${Q("uploader.height")}`,n=`${r.naturalWidth}x${r.naturalHeight}`;return Le(Q("uploader.imageTooSmall"),Q("uploader.imageTooSmallMessage",{required:e,actual:n})),X.current&&(X.current.value=""),void t(!1)}t(!0)},r.onerror=()=>{URL.revokeObjectURL(n),t(!0)},r.src=n}))(e);if(t){if(o){const t=Po(e.type);e=new File([e],o+t,{type:t,lastModified:e.lastModified})}if(T&&e.type.startsWith("image/")&&e.type!==exports.FileTypes.SVG){ze(e);const t=new FileReader;return t.onload=t=>{Ue(t.target?.result,e)},void t.readAsDataURL(e)}Ve(e),ke(!0)}},Ue=(e,t)=>{let n=null,i=null;const a=t.type===exports.FileTypes.PNG?"image/png":"image/webp"===t.type?"image/webp":"image/jpeg",s=async()=>{if(!n)return;const e=await n.getCroppedFile(o||Fe?.name.split(".")[0]||"cropped");e&&(ze(null),i?.(),Ve(e),ke(!0))},l=()=>{ze(null),X.current&&(X.current.value=""),i?.()};K({title:B||Q("uploader.cropImage"),content:r.jsx(({hideCurrentModal:t})=>(i=t||null,r.jsxs("div",{style:{width:"100%"},children:[r.jsx("div",{style:{minHeight:"400px",marginBottom:"20px"},children:r.jsx(mp,{ref:e=>{n=e},src:e,aspectRatio:O,minWidth:I,minHeight:R,quality:P,outputFormat:a,width:"100%",height:"400px"})}),r.jsxs(qf,{justify:"flex-end",gap:"small",children:[r.jsx(xe,{variant:"ghost",onClick:l,children:Q("uploader.cancel")}),r.jsx(xe,{variant:"solid",onClick:s,children:Q("uploader.crop")})]})]})),{}),showOkButton:!1,showCancelButton:!1,closeOnClickOutside:!1,showCloseButton:!0,width:"600px",onCancel:()=>(l(),!0)})},Ge=()=>{ne(!0),K({content:r.jsx(tp,{className:"itd-upload-preview-content",$width:y,$height:w,$padding:A,children:r.jsx(Mi,{src:ge||""})}),showOkButton:!1,showCancelButton:!1,contentPadding:"0px",width:"max-content",onCancel:()=>(ne(!1),!0)})},We=()=>{if(l&&ge&&!Ae&&pe)return r.jsx("span",{className:"delete-icon",children:r.jsx(xe,{variant:"solid",size:exports.ComponentSizes.SMALL,type:"button",circle:!0,onClick:Te,disabled:re,icon:r.jsx(ni,{width:16,height:16}),className:"itd-upload-delete-button"})})},Ye=()=>{if(d&&ge&&!Ae&&pe)return r.jsx("span",{className:"preview-icon",children:r.jsx(xe,{variant:"solid",size:exports.ComponentSizes.SMALL,type:"button",circle:!0,onClick:Ge,disabled:re,icon:r.jsx(oi,{width:16,height:16}),className:"itd-upload-preview-button"})})},qe=r.jsx("svg",{width:"20px",height:"20px",viewBox:"0 0 20 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("g",{id:"Error",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd",children:r.jsxs("g",{id:"ErrorGroup",fillRule:"nonzero",children:[r.jsx("circle",{id:"ErrorBackground",fill:"#F8285A",cx:"10",cy:"10",r:"10"}),r.jsx("path",{d:"M10.0355339,8.6213203 L12.863961,5.79289322 C13.2544853,5.40236893 13.8876503,5.40236893 14.2781746,5.79289322 C14.6686989,6.18341751 14.6686989,6.81658249 14.2781746,7.20710678 L11.4497475,10.0355339 \n            L14.2781746,12.863961 C14.6686989,13.2544853 14.6686989,13.8876503 14.2781746,14.2781746 C13.8876503,14.6686989 13.2544853,14.6686989 12.863961,14.2781746 L10.0355339,11.4497475 L7.20710678,14.2781746\n            C6.81658249,14.6686989 6.18341751,14.6686989 5.79289322,14.2781746 C5.40236893,13.8876503 5.40236893,13.2544853 5.79289322,12.863961 L8.6213203,10.0355339 L5.79289322,7.20710678 C5.40236893,6.81658249\n            5.40236893,6.18341751 5.79289322,5.79289322 C6.18341751,5.40236893 6.81658249,5.40236893 7.20710678,5.79289322 L10.0355339,8.6213203 Z",id:"ErrorIcon",fill:"#FFFFFF"})]})})}),Xe=()=>{if(""===be||Ae)return;let e={className:"itd-upload-failed itd-failed-status",onPointerOver:()=>we(!0),onPointerOut:()=>we(!1)};return r.jsxs(sp,{...e,children:[ye?r.jsx(lp,{className:"itd-upload-error-tooltip itd-error-tooltip",children:be}):null,qe]})},Ke=()=>{if(ee)return null===pe?r.jsx(Qo,{width:24,height:24}):!1===pe?r.jsx(ii,{width:40,height:40}):r.jsx(Mi,{src:ge||"",width:Uo(h),height:Uo(g)})},Je=()=>{let e=(ae||le)&&!Ae&&!re;return r.jsx(np,{$isHover:e,className:"itd-upload-overlay",children:r.jsxs(rp,{$isHover:e,className:"itd-upload-overlay-content",children:[r.jsx("span",{className:"itd-upload-header",children:Q("uploader.header")}),r.jsx("span",{className:"itd-upload-hint",children:Q("uploader.hint")})]})})};return r.jsxs(Ju,{className:"itd-upload",$fluid:p,children:[r.jsx("input",{type:"file",id:e,accept:oe,onChange:Pe,onFocus:e=>{e.target.matches(":focus-visible")&&ue(!0)},onBlur:()=>ue(!1),onPointerOver:()=>{!le&&se(!0)},onPointerOut:()=>{!le&&se(!1)},onDragOver:Oe,onDragLeave:Ie,onDrop:Re,disabled:Ae||re,ref:X}),r.jsx(Qu,{$showFocus:ce,className:"itd-upload-label",children:r.jsxs(Zu,{$showBorder:(le||ae)&&!Ae,$padding:u,$disabled:_,$hasError:""!==be&&!Ae,$fileWidth:h,$fileHeight:g,$maxFileWidth:m,$maxFileHeight:b,$containerWidth:x,$containerHeight:v,className:"itd-upload-content",children:[Ke(),r.jsxs(op,{className:"itd-upload-status",$isActive:Ae,$complete:"success"===$e?.status,$error:"error"===$e?.status,children:[r.jsx(ip,{className:"itd-upload-status-box",$progress:Se?Se.progress:0,$complete:"success"===$e?.status,$error:"error"===$e?.status}),r.jsx("span",{className:"itd-upload-status-message",children:Q(Ee||$e?String($e?.message):"uploader.fileUploading")}),Se?r.jsx("span",{className:"itd-upload-status-info",children:Q("uploader.info",{total:Se.total,estimated:Se.estimated})}):r.jsx("span",{className:"itd-upload-status-calculating",children:Q("uploader.calculating")})]}),Je(),r.jsxs(ep,{$position:""===be?c:"default",children:[r.jsxs(qf,{vertical:!0,gap:"small",className:"itd-upload-icons",children:[We(),Ye()]}),Xe()]})]})})]})}),cp=l.div`
+`,dp=n.forwardRef(({id:e="itd-upload-"+fe(),resultFileName:o=null,action:i="",filePath:a="",binaryName:s="file",showDeleteIcon:l=!1,showPreviewIcon:d=!1,buttonsPosition:c="default",padding:u=10,fluid:p=!0,fileWidth:h="100%",fileHeight:g="auto",maxFileWidth:m="none",maxFileHeight:b="none",containerWidth:x="100%",containerHeight:v="auto",previewFileWidth:y="100%",previewFileHeight:w="100%",previewFilePadding:A="0",requestMethod:k="put",maxFileSize:S=1024,disabled:_=!1,extraFormData:E={},extraQueryString:C={},extraHeader:$={},fileTypes:j=[exports.FileTypes.JPG,exports.FileTypes.PNG,exports.FileTypes.SVG,exports.FileTypes.PDF],removeAction:F="",removeExtraFormData:z={},removeExtraQueryString:L={},removeExtraHeader:N={},minImageWidth:M,minImageHeight:D,crop:T,onUpdate:O,onUploadSuccess:I,onUploadFailed:R,onRemoveFileSuccess:P,onRemoveFileFailed:B},V)=>{const H=n.useRef(null),{showModal:G}=et.useModal(),{fetch:W,cancel:Y}=U(),{t:q}=t.useTranslation("itd"),[X,K]=n.useState(!1),[J,Z]=n.useState(!1),[Q,ee]=n.useState(".svg, .png, .jpg"),[te,re]=n.useState(!1),[ne,oe]=n.useState(!1),[ie,ae]=n.useState(!1),[se,le]=n.useState(null),[de,ce]=n.useState(null),[ue,pe]=n.useState(""),[he,ge]=n.useState(!1),[me,be]=n.useState(!1),[ve,ye]=n.useState(null),[we,Ae]=n.useState(!1),[ke,Se]=n.useState(null),[_e,Ee]=n.useState(null);n.useEffect(()=>()=>{Y()},[]),n.useEffect(()=>{Z(_)},[_]),n.useEffect(()=>{ce(a?a.split("?")[0]:"")},[a]),n.useEffect(()=>{null!==de&&(void 0!==de?je():K(!1))},[de]),n.useEffect(()=>{let e=[];j.map(t=>{e.push(Po(t))}),ee(e.join(", "))},[j]);const Ce=(e,t)=>{f.toast.error(e,{description:t,duration:5e3})},$e=(e,t=!0,r=!0)=>{O&&O(e,t,r)};n.useImperativeHandle(V,()=>({setFocus(){ae(!0)},reset(e=!1,t=!1){Fe(),ce(null),pe(""),$e("",e,t)},setValue(e,t=!0,r=!0){ce(e),$e(e,t,r)},getValue:()=>de||"",setError(e){pe(e)},forceUpdate(){$e(de||"")},clear(){ce("")}}));const je=async()=>{let e=!1;de&&(e=await Io(de),le(e),e?$e(de):$e("",!0,!0),X||K(!0)),""!==de||X||K(!0),""===de&&X&&$e("",!0,!0)},Fe=()=>{Se(null),ye(null),Ae(!1),le(null)},ze=async()=>{Z(!0),G({content:r.jsx("div",{children:q("uploader.areYouSureToDeleteThisFile")}),title:q("uploader.removeFile"),okButtonText:q("uploader.yes"),cancelButtonText:q("uploader.no"),okButtonProps:{variant:"statable",state:"reject"},closeOnClickOutside:!1,showCloseButton:!1,onOk:()=>(F?W({action:F,params:z,queries:L,headers:N,onFetched:e=>{e.data.success?(Fe(),$e("",!0,!0),P&&P(e.data.data)):B&&B()},onError:()=>{B&&B()}}):(Fe(),$e("",!0,!0),P&&P()),Z(!1),!0),onCancel:()=>(Z(!1),!0)})},Le=e=>{e.preventDefault(),me||oe(!0)},Ne=e=>{e.preventDefault(),me||oe(!1)},Me=e=>{e.preventDefault(),me||(oe(!1),e.dataTransfer&&0!==e.dataTransfer.files.length?Ie(e.dataTransfer.files[0]):console.log(q("uploader.browserDoesntSupportDND")))},De=e=>{oe(!1);const t=e.target.files[0];Ie(t)},Te=async({path:e,errorMessage:t,errorCode:r})=>{await Bo(1e3),ye(null),be(!1),await Bo(1500),Ae(!1),e?I&&I(e):t&&R&&R(t,r||0)},Oe=async e=>{if(!e)return;let t=new FormData;t.append(s,e),o&&t.append("name",o),Object.keys(E).forEach(e=>{t.append(e,E[e])}),W({action:i,requestMethod:k,params:t,queries:C,headers:$,onFetched:e=>{e.data.success?(Se({message:q("uploader.fileUploadSuccess"),status:"success"}),Ae(!0),ce(e.data.data.url),Te({path:e.data.data.url})):(Se({message:q("uploader.fileUploadFailed"),status:"error"}),$e("",!0,!0),Te({errorMessage:q("uploader.fileUploadFailed")}))},onError:(e,t)=>{Se({message:q("uploader.fileUploadFailed"),status:"error"}),$e("",!0,!0),Te({errorMessage:e,errorCode:t})},onProgress:e=>{ye({estimated:e.estimated?(Math.round(100*e.estimated)/100).toFixed(2):"0",progress:e.progress?Math.round(100*e.progress):0,bytes:e.bytes?Ro(e.bytes):"",total:e.total?Ro(e.total):""})}})},Ie=async e=>{if(!e)return;if(!(e=>!!j.includes(e.type)||(Ce(q("uploader.error"),q("uploader.fileFormatError",{fileFormat:Q})),!1))(e))return;if(!(e=>!(e.size>1024*S&&(Ce(q("uploader.error"),q("uploader.fileSizeError",{fileSize:Ro(1024*S)})),1)))(e))return;const t=await(e=>new Promise(t=>{if(!e.type.startsWith("image/")||e.type===exports.FileTypes.SVG)return void t(!0);if(!M&&!D)return void t(!0);const r=new window.Image,n=URL.createObjectURL(e);r.onload=()=>{URL.revokeObjectURL(n);const e=!M||r.naturalWidth>=M,o=!D||r.naturalHeight>=D;if(!e||!o){const e=M&&D?`${M}x${D}`:M?`${M}px ${q("uploader.width")}`:`${D}px ${q("uploader.height")}`,n=`${r.naturalWidth}x${r.naturalHeight}`;return Ce(q("uploader.imageTooSmall"),q("uploader.imageTooSmallMessage",{required:e,actual:n})),H.current&&(H.current.value=""),void t(!1)}t(!0)},r.onerror=()=>{URL.revokeObjectURL(n),t(!0)},r.src=n}))(e);if(t){if(o){const t=Po(e.type);e=new File([e],o+t,{type:t,lastModified:e.lastModified})}if(T&&e.type.startsWith("image/")&&e.type!==exports.FileTypes.SVG){Ee(e);const t=new FileReader;return t.onload=t=>{Re(t.target?.result,e)},void t.readAsDataURL(e)}Oe(e),be(!0)}},Re=(e,t)=>{let n=null,i=null;const a=t.type===exports.FileTypes.PNG?"image/png":"image/webp"===t.type?"image/webp":"image/jpeg",s=async()=>{if(!n)return;const e=await n.getCroppedFile(o||_e?.name.split(".")[0]||"cropped");e&&(Ee(null),i?.(),Oe(e),be(!0))},l=()=>{Ee(null),H.current&&(H.current.value=""),i?.()};G({title:T?.modalTitle||q("uploader.cropImage"),content:r.jsx(({hideCurrentModal:t})=>(i=t||null,r.jsxs("div",{style:{width:"100%"},children:[r.jsx("div",{style:{minHeight:"400px",marginBottom:"20px"},children:r.jsx(mp,{ref:e=>{n=e},src:e,aspectRatio:T?.aspectRatio,minWidth:T?.minWidth,minHeight:T?.minHeight,outputWidth:T?.outputWidth,outputHeight:T?.outputHeight,quality:T?.quality||.9,outputFormat:a,showGrid:T?.showGrid??!0,width:"100%",height:"400px"})}),r.jsxs(qf,{justify:"flex-end",gap:"small",children:[r.jsx(xe,{variant:"ghost",onClick:l,children:q("uploader.cancel")}),r.jsx(xe,{variant:"solid",onClick:s,children:q("uploader.crop")})]})]})),{}),showOkButton:!1,showCancelButton:!1,closeOnClickOutside:!1,showCloseButton:!0,width:"600px",onCancel:()=>(l(),!0)})},Pe=()=>{Z(!0),G({content:r.jsx(tp,{className:"itd-upload-preview-content",$width:y,$height:w,$padding:A,children:r.jsx(Mi,{src:de||""})}),showOkButton:!1,showCancelButton:!1,contentPadding:"0px",width:"max-content",onCancel:()=>(Z(!1),!0)})},Be=()=>{if(l&&de&&!me&&se)return r.jsx("span",{className:"delete-icon",children:r.jsx(xe,{variant:"solid",size:exports.ComponentSizes.SMALL,type:"button",circle:!0,onClick:ze,disabled:J,icon:r.jsx(ni,{width:16,height:16}),className:"itd-upload-delete-button"})})},Ve=()=>{if(d&&de&&!me&&se)return r.jsx("span",{className:"preview-icon",children:r.jsx(xe,{variant:"solid",size:exports.ComponentSizes.SMALL,type:"button",circle:!0,onClick:Pe,disabled:J,icon:r.jsx(oi,{width:16,height:16}),className:"itd-upload-preview-button"})})},He=r.jsx("svg",{width:"20px",height:"20px",viewBox:"0 0 20 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("g",{id:"Error",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd",children:r.jsxs("g",{id:"ErrorGroup",fillRule:"nonzero",children:[r.jsx("circle",{id:"ErrorBackground",fill:"#F8285A",cx:"10",cy:"10",r:"10"}),r.jsx("path",{d:"M10.0355339,8.6213203 L12.863961,5.79289322 C13.2544853,5.40236893 13.8876503,5.40236893 14.2781746,5.79289322 C14.6686989,6.18341751 14.6686989,6.81658249 14.2781746,7.20710678 L11.4497475,10.0355339 \n            L14.2781746,12.863961 C14.6686989,13.2544853 14.6686989,13.8876503 14.2781746,14.2781746 C13.8876503,14.6686989 13.2544853,14.6686989 12.863961,14.2781746 L10.0355339,11.4497475 L7.20710678,14.2781746\n            C6.81658249,14.6686989 6.18341751,14.6686989 5.79289322,14.2781746 C5.40236893,13.8876503 5.40236893,13.2544853 5.79289322,12.863961 L8.6213203,10.0355339 L5.79289322,7.20710678 C5.40236893,6.81658249\n            5.40236893,6.18341751 5.79289322,5.79289322 C6.18341751,5.40236893 6.81658249,5.40236893 7.20710678,5.79289322 L10.0355339,8.6213203 Z",id:"ErrorIcon",fill:"#FFFFFF"})]})})}),Ue=()=>{if(""===ue||me)return;let e={className:"itd-upload-failed itd-failed-status",onPointerOver:()=>ge(!0),onPointerOut:()=>ge(!1)};return r.jsxs(sp,{...e,children:[he?r.jsx(lp,{className:"itd-upload-error-tooltip itd-error-tooltip",children:ue}):null,He]})},Ge=()=>{if(X)return null===se?r.jsx(Qo,{width:24,height:24}):!1===se?r.jsx(ii,{width:40,height:40}):r.jsx(Mi,{src:de||"",width:Uo(h),height:Uo(g)})},We=()=>{let e=(te||ne)&&!me&&!J;return r.jsx(np,{$isHover:e,className:"itd-upload-overlay",children:r.jsxs(rp,{$isHover:e,className:"itd-upload-overlay-content",children:[r.jsx("span",{className:"itd-upload-header",children:q("uploader.header")}),r.jsx("span",{className:"itd-upload-hint",children:q("uploader.hint")})]})})};return r.jsxs(Ju,{className:"itd-upload",$fluid:p,children:[r.jsx("input",{type:"file",id:e,accept:Q,onChange:De,onFocus:e=>{e.target.matches(":focus-visible")&&ae(!0)},onBlur:()=>ae(!1),onPointerOver:()=>{!ne&&re(!0)},onPointerOut:()=>{!ne&&re(!1)},onDragOver:Le,onDragLeave:Ne,onDrop:Me,disabled:me||J,ref:H}),r.jsx(Qu,{$showFocus:ie,className:"itd-upload-label",children:r.jsxs(Zu,{$showBorder:(ne||te)&&!me,$padding:u,$disabled:_,$hasError:""!==ue&&!me,$fileWidth:h,$fileHeight:g,$maxFileWidth:m,$maxFileHeight:b,$containerWidth:x,$containerHeight:v,className:"itd-upload-content",children:[Ge(),r.jsxs(op,{className:"itd-upload-status",$isActive:me,$complete:"success"===ke?.status,$error:"error"===ke?.status,children:[r.jsx(ip,{className:"itd-upload-status-box",$progress:ve?ve.progress:0,$complete:"success"===ke?.status,$error:"error"===ke?.status}),r.jsx("span",{className:"itd-upload-status-message",children:q(we||ke?String(ke?.message):"uploader.fileUploading")}),ve?r.jsx("span",{className:"itd-upload-status-info",children:q("uploader.info",{total:ve.total,estimated:ve.estimated})}):r.jsx("span",{className:"itd-upload-status-calculating",children:q("uploader.calculating")})]}),We(),r.jsxs(ep,{$position:""===ue?c:"default",children:[r.jsxs(qf,{vertical:!0,gap:"small",className:"itd-upload-icons",children:[Be(),Ve()]}),Ue()]})]})})]})}),cp=l.div`
   position: relative;
   width: ${({$width:e})=>"number"==typeof e?`${e}px`:e||"100%"};
   height: ${({$height:e})=>"number"==typeof e?`${e}px`:e||"400px"};
@@ -4173,7 +4173,7 @@
   /* Grid lines */
   &::before,
   &::after {
-    content: "";
+    content: ${({$showGrid:e})=>e?'""':"none"};
     position: absolute;
     background: rgba(255, 255, 255, 0.3);
   }
@@ -4215,7 +4215,7 @@
     background: #f0f0f0;
     transform: ${({$position:e})=>{switch(e){case"ne":return"translate(50%, -50%) scale(1.1)";case"sw":return"translate(-50%, 50%) scale(1.1)";case"se":return"translate(50%, 50%) scale(1.1)";default:return"translate(-50%, -50%) scale(1.1)"}}};
   }
-`,mp=n.forwardRef(({src:e,aspectRatio:t,minWidth:o=50,minHeight:i=50,quality:a=.9,outputFormat:s="image/jpeg",onCropChange:l,width:d,height:c},u)=>{const p=n.useRef(null),f=n.useRef(null),[h,g]=n.useState(!1),[m,b]=n.useState({x:0,y:0,width:100,height:100}),[x,v]=n.useState(!1),[y,w]=n.useState(null),[A,k]=n.useState({x:0,y:0}),[S,_]=n.useState({x:0,y:0,width:0,height:0}),E=n.useCallback(()=>{if(!f.current||!p.current)return;const e=f.current.getBoundingClientRect(),r=p.current.getBoundingClientRect(),n={x:e.left-r.left,y:e.top-r.top,width:e.width,height:e.height},a=e.width/f.current.naturalWidth,s=e.height/f.current.naturalHeight,d=o*a,c=i*s;let u=Math.max(.8*n.width,d),h=Math.max(.8*n.height,c);if(u=Math.min(u,n.width),h=Math.min(h,n.height),t){if(u/h>t){const e=h*t;e>=d?u=e:(u=d,h=u/t)}else{const e=u/t;e>=c?h=e:(h=c,u=h*t)}u>n.width&&(u=n.width,h=u/t),h>n.height&&(h=n.height,u=h*t)}const g={x:n.x+(n.width-u)/2,y:n.y+(n.height-h)/2,width:u,height:h};b(g),l?.(g)},[t,o,i,l]);n.useEffect(()=>{h&&E()},[h,E]),n.useEffect(()=>{const e=()=>{h&&E()};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[h,E]);const C=n.useCallback(e=>{if(!f.current||!p.current)return e;const t=f.current.getBoundingClientRect(),r=p.current.getBoundingClientRect(),n={left:t.left-r.left,top:t.top-r.top,right:t.right-r.left,bottom:t.bottom-r.top};let{x:o,y:i,width:a,height:s}=e;return o=Math.max(n.left,Math.min(o,n.right-a)),i=Math.max(n.top,Math.min(i,n.bottom-s)),a=Math.min(a,n.right-o),s=Math.min(s,n.bottom-i),{x:o,y:i,width:a,height:s}},[]),$=e=>{e.preventDefault();const t="touches"in e?e.touches[0].clientX:e.clientX,r="touches"in e?e.touches[0].clientY:e.clientY;v(!0),k({x:t,y:r}),_({...m})},j=e=>t=>{t.preventDefault(),t.stopPropagation();const r="touches"in t?t.touches[0].clientX:t.clientX,n="touches"in t?t.touches[0].clientY:t.clientY;w(e),k({x:r,y:n}),_({...m})};n.useEffect(()=>{const e=e=>{if(!x&&!y)return;if(!f.current||!p.current)return;const r="touches"in e?e.touches[0].clientX:e.clientX,n="touches"in e?e.touches[0].clientY:e.clientY,a=r-A.x,s=n-A.y,d=f.current.getBoundingClientRect(),c=p.current.getBoundingClientRect(),u=d.width/f.current.naturalWidth,h=d.height/f.current.naturalHeight,g=o*u,m=i*h,v=d.left-c.left,w=d.top-c.top,k=d.right-c.left,_=d.bottom-c.top;let E;if(x)E=C({...S,x:S.x+a,y:S.y+s});else{if(!y)return;{let e=S.width,r=S.height,n=S.x,o=S.y;const i=S.x+S.width,l=S.y+S.height;switch(y){case"se":{e=Math.max(g,S.width+a);const n=k-S.x;if(e=Math.min(e,n),t){r=e/t;const n=_-S.y;r>n&&(r=n,e=r*t)}else r=Math.max(m,S.height+s),r=Math.min(r,_-S.y);break}case"sw":{e=Math.max(g,S.width-a);const o=i-v;if(e=Math.min(e,o),t){r=e/t;const n=_-S.y;r>n&&(r=n,e=r*t)}else r=Math.max(m,S.height+s),r=Math.min(r,_-S.y);n=i-e;break}case"ne":{e=Math.max(g,S.width+a);const n=k-S.x;if(e=Math.min(e,n),t){r=e/t;const n=l-w;r>n&&(r=n,e=r*t)}else r=Math.max(m,S.height-s),r=Math.min(r,l-w);o=l-r;break}case"nw":{e=Math.max(g,S.width-a);const d=i-v;if(e=Math.min(e,d),t){r=e/t;const n=l-w;r>n&&(r=n,e=r*t)}else r=Math.max(m,S.height-s),r=Math.min(r,l-w);n=i-e,o=l-r;break}}E={x:n,y:o,width:e,height:r}}}b(E),l?.(E)},r=()=>{v(!1),w(null)};return(x||y)&&(document.addEventListener("mousemove",e),document.addEventListener("mouseup",r),document.addEventListener("touchmove",e),document.addEventListener("touchend",r)),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",r),document.removeEventListener("touchmove",e),document.removeEventListener("touchend",r)}},[x,y,A,S,C,t,o,i,l]);const F=n.useCallback(async()=>{if(!f.current||!p.current)return null;const e=f.current,t=e.getBoundingClientRect(),r=p.current.getBoundingClientRect(),n=e.naturalWidth/t.width,o=e.naturalHeight/t.height,i=t.left-r.left,l=t.top-r.top,d=(m.x-i)*n,c=(m.y-l)*o,u=m.width*n,h=m.height*o,g=document.createElement("canvas");g.width=u,g.height=h;const b=g.getContext("2d");return b?(b.drawImage(e,d,c,u,h,0,0,u,h),new Promise(e=>{g.toBlob(t=>e(t),s,a)})):null},[m,s,a]),z=n.useCallback(async(e="cropped-image")=>{const t=await F();if(!t)return null;const r=s.split("/")[1];return new File([t],`${e}.${r}`,{type:s})},[F,s]);return n.useImperativeHandle(u,()=>({getCroppedImage:F,getCroppedFile:z,getCropArea:()=>m,reset:E})),r.jsxs(cp,{ref:p,$width:d,$height:c,children:[r.jsx(up,{children:r.jsx(pp,{ref:f,src:e,onLoad:()=>g(!0),alt:"Crop preview",draggable:!1})}),h&&r.jsx(fp,{children:r.jsxs(hp,{$cropArea:m,onMouseDown:$,onTouchStart:$,children:[r.jsx(gp,{$position:"nw",onMouseDown:j("nw"),onTouchStart:j("nw")}),r.jsx(gp,{$position:"ne",onMouseDown:j("ne"),onTouchStart:j("ne")}),r.jsx(gp,{$position:"sw",onMouseDown:j("sw"),onTouchStart:j("sw")}),r.jsx(gp,{$position:"se",onMouseDown:j("se"),onTouchStart:j("se")})]})})]})});mp.displayName="ImageCropper";const bp=l(a.NavLink)`
+`,mp=n.forwardRef(({src:e,aspectRatio:t,minWidth:o,minHeight:i,outputWidth:a,outputHeight:s,quality:l=.9,outputFormat:d="image/jpeg",onCropChange:c,width:u,height:p,showGrid:f=!0},h)=>{const g=n.useRef(null),m=n.useRef(null),[b,x]=n.useState(!1),v=o??(a?Math.round(a/4):200),y=i??(s?Math.round(s/4):200),[w,A]=n.useState({x:0,y:0,width:100,height:100}),[k,S]=n.useState(!1),[_,E]=n.useState(null),[C,$]=n.useState({x:0,y:0}),[j,F]=n.useState({x:0,y:0,width:0,height:0}),z=n.useCallback(()=>{if(!m.current||!g.current)return;const e=m.current.getBoundingClientRect(),r=g.current.getBoundingClientRect(),n={x:e.left-r.left,y:e.top-r.top,width:e.width,height:e.height},o=e.width/m.current.naturalWidth,i=e.height/m.current.naturalHeight,a=v*o,s=y*i;let l=Math.max(.8*n.width,a),d=Math.max(.8*n.height,s);if(l=Math.min(l,n.width),d=Math.min(d,n.height),t){if(l/d>t){const e=d*t;e>=a?l=e:(l=a,d=l/t)}else{const e=l/t;e>=s?d=e:(d=s,l=d*t)}l>n.width&&(l=n.width,d=l/t),d>n.height&&(d=n.height,l=d*t)}const u={x:n.x+(n.width-l)/2,y:n.y+(n.height-d)/2,width:l,height:d};A(u),c?.(u)},[t,v,y,c]);n.useEffect(()=>{b&&z()},[b,z]),n.useEffect(()=>{const e=()=>{b&&z()};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[b,z]);const L=n.useCallback(e=>{if(!m.current||!g.current)return e;const t=m.current.getBoundingClientRect(),r=g.current.getBoundingClientRect(),n={left:t.left-r.left,top:t.top-r.top,right:t.right-r.left,bottom:t.bottom-r.top};let{x:o,y:i,width:a,height:s}=e;return o=Math.max(n.left,Math.min(o,n.right-a)),i=Math.max(n.top,Math.min(i,n.bottom-s)),a=Math.min(a,n.right-o),s=Math.min(s,n.bottom-i),{x:o,y:i,width:a,height:s}},[]),N=e=>{e.preventDefault();const t="touches"in e?e.touches[0].clientX:e.clientX,r="touches"in e?e.touches[0].clientY:e.clientY;S(!0),$({x:t,y:r}),F({...w})},M=e=>t=>{t.preventDefault(),t.stopPropagation();const r="touches"in t?t.touches[0].clientX:t.clientX,n="touches"in t?t.touches[0].clientY:t.clientY;E(e),$({x:r,y:n}),F({...w})};n.useEffect(()=>{const e=e=>{if(!k&&!_)return;if(!m.current||!g.current)return;const r="touches"in e?e.touches[0].clientX:e.clientX,n="touches"in e?e.touches[0].clientY:e.clientY,o=r-C.x,i=n-C.y,a=m.current.getBoundingClientRect(),s=g.current.getBoundingClientRect(),l=a.width/m.current.naturalWidth,d=a.height/m.current.naturalHeight,u=v*l,p=y*d,f=a.left-s.left,h=a.top-s.top,b=a.right-s.left,x=a.bottom-s.top;let w;if(k)w=L({...j,x:j.x+o,y:j.y+i});else{if(!_)return;{let e=j.width,r=j.height,n=j.x,a=j.y;const s=j.x+j.width,l=j.y+j.height;switch(_){case"se":{e=Math.max(u,j.width+o);const n=b-j.x;if(e=Math.min(e,n),t){r=e/t;const n=x-j.y;r>n&&(r=n,e=r*t)}else r=Math.max(p,j.height+i),r=Math.min(r,x-j.y);break}case"sw":{e=Math.max(u,j.width-o);const a=s-f;if(e=Math.min(e,a),t){r=e/t;const n=x-j.y;r>n&&(r=n,e=r*t)}else r=Math.max(p,j.height+i),r=Math.min(r,x-j.y);n=s-e;break}case"ne":{e=Math.max(u,j.width+o);const n=b-j.x;if(e=Math.min(e,n),t){r=e/t;const n=l-h;r>n&&(r=n,e=r*t)}else r=Math.max(p,j.height-i),r=Math.min(r,l-h);a=l-r;break}case"nw":{e=Math.max(u,j.width-o);const d=s-f;if(e=Math.min(e,d),t){r=e/t;const n=l-h;r>n&&(r=n,e=r*t)}else r=Math.max(p,j.height-i),r=Math.min(r,l-h);n=s-e,a=l-r;break}}switch(e<u&&(e=u,t&&(r=e/t)),r<p&&(r=p,t&&(e=r*t)),_){case"se":n=j.x,a=j.y;break;case"sw":n=s-e,a=j.y;break;case"ne":n=j.x,a=l-r;break;case"nw":n=s-e,a=l-r}w={x:n,y:a,width:e,height:r}}}A(w),c?.(w)},r=()=>{S(!1),E(null)};return(k||_)&&(document.addEventListener("mousemove",e),document.addEventListener("mouseup",r),document.addEventListener("touchmove",e),document.addEventListener("touchend",r)),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",r),document.removeEventListener("touchmove",e),document.removeEventListener("touchend",r)}},[k,_,C,j,L,t,v,y,c]);const D=n.useCallback(async()=>{if(!m.current||!g.current)return null;const e=m.current,t=e.getBoundingClientRect(),r=g.current.getBoundingClientRect(),n=e.naturalWidth/t.width,o=e.naturalHeight/t.height,i=t.left-r.left,c=t.top-r.top,u=(w.x-i)*n,p=(w.y-c)*o,f=w.width*n,h=w.height*o,b=document.createElement("canvas"),x=a||f,v=s||h;b.width=x,b.height=v;const y=b.getContext("2d");return y?(y.imageSmoothingEnabled=!0,y.imageSmoothingQuality="high",y.drawImage(e,u,p,f,h,0,0,x,v),new Promise(e=>{b.toBlob(t=>e(t),d,l)})):null},[w,d,l,a,s]),T=n.useCallback(async(e="cropped-image")=>{const t=await D();if(!t)return null;const r=d.split("/")[1];return new File([t],`${e}.${r}`,{type:d})},[D,d]);return n.useImperativeHandle(h,()=>({getCroppedImage:D,getCroppedFile:T,getCropArea:()=>w,reset:z})),r.jsxs(cp,{ref:g,$width:u,$height:p,children:[r.jsx(up,{children:r.jsx(pp,{ref:m,src:e,onLoad:()=>x(!0),alt:"Crop preview",draggable:!1})}),b&&r.jsx(fp,{children:r.jsxs(hp,{$cropArea:w,$showGrid:f,onMouseDown:N,onTouchStart:N,children:[r.jsx(gp,{$position:"nw",onMouseDown:M("nw"),onTouchStart:M("nw")}),r.jsx(gp,{$position:"ne",onMouseDown:M("ne"),onTouchStart:M("ne")}),r.jsx(gp,{$position:"sw",onMouseDown:M("sw"),onTouchStart:M("sw")}),r.jsx(gp,{$position:"se",onMouseDown:M("se"),onTouchStart:M("se")})]})})]})});mp.displayName="ImageCropper";const bp=l(a.NavLink)`
 
   text-decoration: none;
   

package/dist/index.d.mts

@@ -76,6 +76,10 @@ export declare const resources: {
                 cropImage: string;
                 crop: string;
                 cancel: string;
+                width: string;
+                height: string;
+                imageTooSmall: string;
+                imageTooSmallMessage: string;
             };
             results: {
                 authentication: {
@@ -378,6 +382,10 @@ export declare const resources: {
                 cropImage: string;
                 crop: string;
                 cancel: string;
+                width: string;
+                height: string;
+                imageTooSmall: string;
+                imageTooSmallMessage: string;
             };
             results: {
                 authentication: {
@@ -695,7 +703,7 @@ export type { NotificationsProps } from './types/NotificationsProps';
 export type { AlertProps, AlertType, AlertSize } from './types/AlertProps';
 export type { SwitchProps } from './types/SwitchProps';
 export type { ModalProps, ModalContentProps, ModalRefProps } from './types/ModalProps';
-export type { UploadProps, UploadProgressProps, UploadResultMessageProps } from './types/UploadProps';
+export type { UploadProps, UploadProgressProps, UploadResultMessageProps, CropSettings } from './types/UploadProps';
 export type { ResultProps } from './types/ResultProps';
 export type { TabsItemProps, TabsProps } from './types/TabsProps';
 export type { TableColumnType, TableProps, TableTRProps, TableRow, TableRefProps } from './types/TableProps';

package/dist/index.d.ts

@@ -589,6 +589,10 @@ interface ImageCropperProps {
     minWidth?: number;
     /** Minimum crop height in pixels */
     minHeight?: number;
+    /** Output width - cropped image will be resized to this width */
+    outputWidth?: number;
+    /** Output height - cropped image will be resized to this height */
+    outputHeight?: number;
     /** Output image quality (0-1) */
     quality?: number;
     /** Output image format */
@@ -599,6 +603,8 @@ interface ImageCropperProps {
     width?: string | number;
     /** Container height */
     height?: string | number;
+    /** Show grid lines on crop area (default: true) */
+    showGrid?: boolean;
 }
 interface ImageCropperRef {
     /** Get cropped image as Blob */
@@ -1424,6 +1430,27 @@ type ModalRefProps = {
     onClickCancel?: () => void;
 };
 
+/**
+ * Crop settings for the Upload component
+ */
+type CropSettings = {
+    /** Aspect ratio (e.g., 1 for square, 16/9 for widescreen). */
+    aspectRatio?: number;
+    /** Minimum crop area width in pixels. User cannot select smaller than this. */
+    minWidth?: number;
+    /** Minimum crop area height in pixels. User cannot select smaller than this. */
+    minHeight?: number;
+    /** Output width in pixels. Cropped image will be resized to this width. */
+    outputWidth?: number;
+    /** Output height in pixels. Cropped image will be resized to this height. */
+    outputHeight?: number;
+    /** Output image quality (0-1), default 0.9 */
+    quality?: number;
+    /** Crop modal title */
+    modalTitle?: string;
+    /** Show grid lines on crop area (default: true) */
+    showGrid?: boolean;
+};
 type UploadProps = {
     id?: string;
     action?: string;
@@ -1455,22 +1482,24 @@ type UploadProps = {
     extraQueryString?: {};
     extraHeader?: {};
     disabled?: boolean;
-    /** Minimum image width required for upload (in pixels). Smaller images will be rejected. */
+    /** Minimum image width required for upload (in pixels). Smaller images will be rejected. Works with or without crop. */
     minImageWidth?: number;
-    /** Minimum image height required for upload (in pixels). Smaller images will be rejected. */
+    /** Minimum image height required for upload (in pixels). Smaller images will be rejected. Works with or without crop. */
     minImageHeight?: number;
-    /** Enable image cropping before upload */
-    enableCrop?: boolean;
-    /** Aspect ratio for crop (e.g., 1 for square, 16/9 for widescreen). Undefined = free crop */
-    cropAspectRatio?: number;
-    /** Minimum crop width in pixels */
-    cropMinWidth?: number;
-    /** Minimum crop height in pixels */
-    cropMinHeight?: number;
-    /** Output image quality (0-1), default 0.9 */
-    cropQuality?: number;
-    /** Crop modal title */
-    cropModalTitle?: string;
+    /**
+     * Crop settings. If provided, cropping is enabled.
+     * @example
+     * crop={{
+     *   aspectRatio: 16/9,
+     *   minWidth: 960,       // Minimum crop area size
+     *   minHeight: 540,
+     *   outputWidth: 1920,   // Final output size
+     *   outputHeight: 1080,
+     *   quality: 0.9,
+     *   modalTitle: "Crop Image"
+     * }}
+     */
+    crop?: CropSettings;
     onChange?: ((value: any) => void) | null;
     onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;
     onUploadSuccess?: (path: string) => void;
@@ -2294,4 +2323,4 @@ declare const resources: {
 };
 
 export { _default as ALink, Accordion, AddDefaultThemeStyle, AddDefaultUnit, AddZero, Alert, Arrow as ArrowIcon, BackToTop, BackTop, Base64Decode, Base64Encode, Button, Calendar, Card, CheckFileURL, Checkbox, Checkmark, ChunkArray, Collapse, ComponentPositions, ComponentSizes, ComponentSizesSlug, ConnectionStatus, ConsoleLog, ConvertCurrency, DatePicker, DetermineNewHeight, DetermineNewWidth, FileChecker, FileExtensions, FileTypes, FindSelector, Flex, Form, FormValidationTypes, FormatBytes, FormatDate, FormatDateTime, FormatSimpleDate, FormatSimpleDateTime, FormatTime, GetByCurrency, GetCountryCodeByCurrencyCode, GetCountryCodeByLanguage, GetCurrencyFormat, GetCurrencySymbol, GetDecimalByCurrency, GetTypeByFileType, H1, H2, H3, H4, ITDContext, ITDProvider, _default$1 as Image, ImageCropper, _default$5 as InlineSVGCached, InlineSelect, InlineSelectArrow, Input, IsValidJSON, Lock as LockIcon, ModalManager, ModalState, NoData, Notification, Picture, Progress, Radio, RemoveUnits, Result, SVGLoader, Select, Spin, Status, Switch, Table, Tabs, TextArea, TinyScrollbar, Trash, UniUpperCase, UpdateThemeStyle, Upload, Upload$1 as UploadIcon, Wait, ZoomIn, ZoomOut, resources, toKebabCase, useAddExternalCSS, useAvoidCollision, useComponentSize, useConnectionStatus, useConstructor, useContextBridge, useCoreFetch, useKeyboardShortcut, useMultiQuery, useOnClickOutside, useOnESCKeyDown, useOnResize, useOrientation, useReCaptcha, useSingleQuery };
-export type { AccordionItemProps, AccordionProps, AccordionSubMenuProps, AlertProps, AlertSize, AlertType, ButtonProps, ButtonState, ButtonType, ButtonVariant, CalendarDayProps, CalendarProps, CalendarValueProps, CardProps, CheckboxEvent, CheckboxGroupProps, CheckboxProps, CropArea, DatePickerProps, Direction, FieldUpdateProps, FlexAlignProps, FlexGapProps, FlexJustifyProps, FlexProps, FormContextType, FormItemProps, FormProps, FormRuleProps, FormSubComponentProps, FormValueProps, GroupCheckboxOptionType, ITDContextType, ITDImperativeFuncProps, ITDProviderProps, ITDSize, ITDSizeSlug, ImageCropperProps, ImageCropperRef, InputProps, InputVariant, ModalContentProps, ModalProps, ModalRefProps, NotificationContextType, NotificationsProps, ProgressProps, ProgressStatus, QueryValueProps, RadioButtonProps, RadioGroupProps, RadioType, ResultProps, SelectDirection, SelectOptionProps, SelectPosition, SelectProps, SelectToggleProps, SelectValue, SelectVariant, SingleQueryProps, StatusProps, StatusVariant, SwitchProps, TableColumnType, TableProps, TableRefProps, TableRow, TableTRProps, TabsItemProps, TabsProps, TextAreaEvent, TextAreaProps, TextAreaVariant, UploadProgressProps, UploadProps, UploadResultMessageProps };
+export type { AccordionItemProps, AccordionProps, AccordionSubMenuProps, AlertProps, AlertSize, AlertType, ButtonProps, ButtonState, ButtonType, ButtonVariant, CalendarDayProps, CalendarProps, CalendarValueProps, CardProps, CheckboxEvent, CheckboxGroupProps, CheckboxProps, CropArea, CropSettings, DatePickerProps, Direction, FieldUpdateProps, FlexAlignProps, FlexGapProps, FlexJustifyProps, FlexProps, FormContextType, FormItemProps, FormProps, FormRuleProps, FormSubComponentProps, FormValueProps, GroupCheckboxOptionType, ITDContextType, ITDImperativeFuncProps, ITDProviderProps, ITDSize, ITDSizeSlug, ImageCropperProps, ImageCropperRef, InputProps, InputVariant, ModalContentProps, ModalProps, ModalRefProps, NotificationContextType, NotificationsProps, ProgressProps, ProgressStatus, QueryValueProps, RadioButtonProps, RadioGroupProps, RadioType, ResultProps, SelectDirection, SelectOptionProps, SelectPosition, SelectProps, SelectToggleProps, SelectValue, SelectVariant, SingleQueryProps, StatusProps, StatusVariant, SwitchProps, TableColumnType, TableProps, TableRefProps, TableRow, TableTRProps, TabsItemProps, TabsProps, TextAreaEvent, TextAreaProps, TextAreaVariant, UploadProgressProps, UploadProps, UploadResultMessageProps };