@inntechcorp/it-design 2.1.61 → 2.1.63

package/dist/form/group/Group.d.ts

@@ -11,7 +11,8 @@ import { ChildrenProps } from 'types/ChildrenProps';
 export type GroupProps = {
     className?: string;
     gap?: number;
+    columns?: number;
     horizontal?: boolean;
     children?: ChildrenProps;
 };
-export default function Group({ gap, horizontal, className, children }: GroupProps): import("react/jsx-runtime").JSX.Element;
+export default function Group({ gap, columns, horizontal, className, children }: GroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/form/group/styled.d.ts

@@ -1,5 +1,6 @@
 declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $gap: number;
+    $gap: number | string;
     $horizontal: boolean;
+    $columns: number;
 }>> & string;
 export { Wrapper };

package/dist/index.cjs.js

@@ -3310,18 +3310,19 @@ function ga(e,b){if(Da(e))for(let o=0;o<e.length&&!1!==b(e[o],o,e);o++);else e&&
 
 `,Al=M.forwardRef((({id:e="itd-select-"+Gt(),position:p="bottom",direction:z="right",size:t="default",variant:c="default",placeholder:n="Please Select",className:r="",multi:O=!1,disabled:i=!1,showSearch:a=!1,locked:s=!1,floating:A=!1,options:d=[],value:l,defaultValue:q,label:u,prefix:f,suffix:W,icon:h,image:R,style:m,onChange:g,onUpdate:L},v)=>{const{t:N}=b.useTranslation("itd"),y=M.useRef(null),[x,B]=M.useState(!1),[w,X]=M.useState(""),[S,k]=M.useState(void 0),[T,E]=M.useState("");M.useEffect((()=>{x||X("")}),[x]),M.useEffect((()=>{void 0!==q&&k(q)}),[q]),M.useEffect((()=>{void 0!==l&&k(l)}),[l]),wM(y,(()=>{x&&B(!1)})),XM((()=>{x&&B(!1)}));const _=(e,b=!0,o=!0)=>{L&&L(e,b,o)};M.useImperativeHandle(v,(()=>({reset(e=!0,b=!0){const o=q||(O?[]:void 0);k(o),E(""),_(o,e,b)},setValue(e,b=!0,o=!0){k(e),_(e,b,o)},getValue:()=>S||(O?[]:""),setError(e){E(e||"")},clear(){}})));const C=()=>"x-small"===t?"xs":"small"===t?"sm":"medium"===t?"md":"default"===t?"df":"large"===t?"lg":"x-large"===t?"xlg":"df";return o.jsxs(sl,{ref:y,className:(()=>{let e="itd-select";return e+=" itd-select-"+c,e+=" itd-select-"+(O?"multi":"single"),e+=" itd-select-"+z,e+=" itd-select-"+C(),x&&(e+=" itd-select-open"),T&&(e+=" itd-select-status-error"),i&&(e+=" itd-select-disabled"),a&&(e+=" itd-select-search"),h&&(e+=" itd-icon"),R&&(e+=" itd-image"),""!==r&&(e+=" "+r),e})(),...(()=>{let e={style:void 0,disabled:!1,$hasImage:null!=R,$hasIcon:null!=h,$size:C(),$filled:void 0!==S};return i&&(e.disabled=!0),m&&(e.style=m),e})(),children:[o.jsx(ma,{id:e,labelType:A?"floating":"single",value:S,placeholder:d.length>0?n:"",onChange:e=>{B(e)},onFocus:()=>{B(!0)},onBlur:()=>{B(!1)},onShow:e=>{B(e)},onFilter:e=>{x&&X(e)},errorMessage:T,size:t,icon:h,prefix:f,suffix:W,image:R,label:(()=>{if(u)return u;if(void 0===S)return;let e="";if(O){const b=d.filter((e=>e.value===S[0]))[0];Array.isArray(S)&&(1===S.length?b&&(e=b.label):S.length>1&&(e=N("placeholders.multipleSelection",{count:S.length})))}else{const b=d.filter((e=>e.value===S))[0];b&&(e=b.label)}return e})(),disabled:i,isOpen:x,multi:O,locked:s,showSearch:a}),o.jsx(cl,{onClose:()=>{B(!1)},onChange:e=>{E(""),_(e),k(e),O||B(!1),g&&g(e)},defaultValue:S,position:p,direction:z,isOpen:x,multi:O,children:(()=>{let e=[];return d.map((b=>{if(""!==w&&"string"==typeof b.value&&"string"==typeof b.label&&!b.value.includes(w.toLocaleLowerCase())&&!(e=>{if("string"==typeof e)return e.toLocaleLowerCase();let b="";return e.map((e=>{"string"==typeof e&&(b+=e.toLocaleLowerCase())})),b})(b.label).includes(w.toLocaleLowerCase()))return;let o={value:b.value,label:b.label};b.icon&&(o={...o,icon:b.icon}),b.image&&(o={...o,image:b.image}),b.key&&(o={...o,customKey:b.key}),O&&S&&Array.isArray(S)&&(o={...o,checked:S.includes(b.value.toString())}),e.push(M.createElement(ba,{...o,key:b.key?b.key:b.value.toString()}))})),0===e.length&&e.push(o.jsx("div",{className:"itd-select-not-found",style:{padding:"20px",textAlign:"center"},children:"Not Found"},"not-found")),e})()})]})}));Al.displayName="Select";const dl=mt.div`
   
-  display         : flex;
-  flex-direction  : ${e=>e.$horizontal?"row":"column"};
-  gap             : ${e=>e.$gap+"px"};
+  display               : grid;
+  flex-direction        : ${e=>e.$horizontal?"row":"column"};
+  gap                   : ${e=>"number"==typeof e.$gap?e.$gap+"px":e.$gap};
+  grid-template-columns : ${e=>e.$columns>1?`repeat(${e.$columns}, 1fr)`:"auto"};
 
-  `;const ll=mt.div`
+`;const ll=mt.div`
 
   display: flex;
   justify-content: ${e=>(e=>"start"===e?"flex-start":"end"===e?"flex-end":"center"===e?"center":"flex-end")(e.$position)};
   margin-top: 10px;
   gap: 5px;
 
-`;const ql=new RegExp(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+([.])[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/),ul=new RegExp(/^[a-zA-Z0-9_.-]{6,}$/),fl=new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+={};:<>|./?,"'\[\]\\`~\-])[a-zA-Z\d$begin:math:display$$end:math:display$\\`~!@#$%^&*()_+={};:<>|.\/?,"'-]{8,60}$/);const Wl=e=>fl.test(e),hl=e=>ql.test(e),Rl=e=>ul.test(e),ml=(e,b)=>e.length>=b,gl=(e,b)=>e.length<=b,Ll=(e,b)=>e===b,vl=(e,b)=>e.length===b,Nl=e=>function(e){var b,o=0,M=0,p=0;if(11!=e.length)return!1;if(!/^-?\d+$/.test(e))return!1;if(0==Number(e[0]))return!1;if(o=parseInt(e[0])+parseInt(e[2])+parseInt(e[4])+parseInt(e[6])+parseInt(e[8]),b=parseInt(e[1])+parseInt(e[3])+parseInt(e[5])+parseInt(e[7]),o*=7,Math.abs(o-b)%10!=Number(e[9]))return!1;for(p=0;p<10;p++)M+=parseInt(e[p]);return M%10==Number(e[10])}(e),yl=e=>{if(Array.isArray(e)){if(0===e.length)return!1}else{if("object"==typeof e){let b=!0;return Object.keys(e).forEach((o=>{""===e[o]&&(b=!1)})),b}if("string"==typeof e){if(""===e)return!1}else if("boolean"==typeof e&&!1===e)return!1}return!0},xl=M.createContext({});xl.displayName="ITDFormContext";const Bl=M.forwardRef((({name:e="",label:o="",placeholder:p="",error:z="",rules:t=[],mask:c=null,locked:n=!1,dependency:r="",reset:O=[],query:i="",children:a=null},s)=>{const{t:A}=b.useTranslation("itd"),d=M.useRef(null),{register:q,unregister:u,hasField:f,updateField:W,setFieldError:h,getFieldValue:R,getFieldInstance:m,formId:g}=M.useContext(xl),[L,v]=M.useState(!1);M.useEffect((()=>(q({name:e,field:d,valid:y(d.current?.getValue()),query:i,reset:O,error:z}),v(!0),()=>{v(!1),u(e)})),[]),M.useImperativeHandle(s,(()=>d.current));const N=(b,o=!0,M=!0)=>{L&&f(e)&&(W(e,b,o,y(b,M)),x())},y=(b,o=!0)=>{const M=function(e,b,o,M){let p=[];return e.forEach((e=>{e.hasOwnProperty(l.REQUIRED)&&!yl(b)&&e.required&&p.push(e.message?e.message:M("errors.required")),e.hasOwnProperty(l.TYPE)&&(e.type===exports.FormValidationTypes.MIN_LENGTH&&(ml(String(b),Number(e.value))||p.push(e.message?e.message:M("errors.minLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.MAX_LENGTH&&(gl(String(b),Number(e.value))||p.push(e.message?e.message:M("errors.maxLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.EXACT_LENGTH&&(vl(String(b),Number(e.value))||p.push(e.message?e.message:M("errors.exactLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.SAME&&(Ll(String(b),String(o(String(e.field))))||p.push(e.message?e.message:M("errors.fieldMustBeTheSame",{fields:e.field}))),e.type===exports.FormValidationTypes.TC_IDENTITY&&(Nl(String(b))||p.push(e.message?e.message:M("errors.wrongTCIdentity"))),e.type===exports.FormValidationTypes.PASSWORD&&(Wl(String(b))||p.push(e.message?e.message:M("errors.passwordRule"))),e.type===exports.FormValidationTypes.EMAIL&&(hl(String(b))||p.push(e.message?e.message:M("errors.invalidEmailAddress"))),e.type===exports.FormValidationTypes.USERNAME&&(Rl(String(b))||p.push(e.message?e.message:M("errors.usernameRule"))))})),p}(t,b,R,A);return M.length>0?(h(e,M[0],o),!1):(h(e,""),!0)},x=()=>{if(""===r)return;if(""===R(r))return;const e=m(r);e&&e.forceUpdate&&e.forceUpdate()};return(()=>{if(!a)return null;let b=a.props;const z={id:b.id?b.id:g+"_"+e,label:o,placeholder:p,className:b.className?b.className+" itd-form-item":"itd-form-item",onUpdate:N,ref:d};return c&&(z.mask=c),n&&(z.locked=n),M.cloneElement(a,{...b,...z})})()})),wl=M.forwardRef((({name:e="",className:b="",initialValues:p={},useQueryString:z=!1,onUpdate:t,onFinish:c,onFinishFailed:n,onValidated:O,children:a},s)=>{const{updated:A,setInitialValues:d,isFormValid:l,getValues:q,getFields:u,setFieldValueByName:f,resetFields:W}=M.useContext(xl),h=SM(),{search:R}=r.useLocation(),m=kM(),[g,L]=M.useState([]),[v,N]=M.useState(!1),[y,x]=M.useState([]),[B,w]=M.useState(!1),[X,S]=M.useState(!1);M.useEffect((()=>{a&&P()}),[a]),M.useEffect((()=>{k(),T()}),[B]),M.useEffect((()=>{B||0!==Object.keys(u()).length&&0!==y.length&&Object.keys(u()).length===y.length&&w(!0)}),[u(),y]),M.useEffect((()=>{T()}),[p]),M.useEffect((()=>{k()}),[R]),M.useEffect((()=>{X&&B&&z&&Object.keys(A).length>0&&C(A)}),[A]),M.useEffect((()=>{O&&l()!==v&&O(l()),N(l())}),[l()]);const k=()=>{B&&z&&(D(),X||_())},T=()=>{B&&(z||X||E())},E=()=>{const e=!Object.values(p).some((e=>null!==e&&""!==e));e&&!X&&S(!0),e||X||(d(p,!1),S(!0))},_=()=>{const e=u(),b=!Object.values(e).some((e=>""!==h.get(e.query,"")));if(Object.values(e).some((e=>null===e.query||""===e.query))){let b=[];throw Object.keys(e).forEach((o=>{e[o].hasOwnProperty("query")&&null!==e[o].query&&""!==e[o].query||b.push(o)})),new Error(`ITD Form Initial Fields Error: "useQueryString" is activated but "query" value is not passed to whole form elements! Invalid fields are ${b.toString()}`)}if(b&&!X&&S(!0),!b&&!X){let b={};Object.keys(e).forEach((o=>{b[o]=h.get(e[o].query,"")})),d(b,!0,!0),S(!0)}},C=e=>{let b=[],o=[];const M=u();Object.keys(e).forEach((b=>{o.push(e[b])})),Ii(o,g)||(Object.keys(M).forEach((o=>{b.push({type:M[o].query,value:e[o]})})),m.set(b))},D=()=>{let e=[],b=[];const o=u();if(Object.keys(o).forEach((b=>{let M=String(h.get(o[b].query,""));e.push(M)})),Ii(e,g))return;L(e),Object.keys(o).forEach((e=>{b[e]=h.get(o[e].query,"")})),Object.keys(b).forEach((e=>{f(e,b[e],!1,!1)}));let M={};Object.keys(b).forEach((e=>{M[e]=b[e]})),t&&t(M)},P=()=>{let e=[];i.getChildrenDeep(a,(b=>(b.hasOwnProperty("type")&&b.type===Bl&&e.push({[b.props.name]:b}),!0))),x(e)};return M.useImperativeHandle(s,(()=>({fieldUpdate(e){console.log("fieldUpdate"),console.log(e)}}))),o.jsx("form",{id:e,onSubmit:e=>{e&&(e.preventDefault(),e.stopPropagation()),l()?c&&c(q()):n&&n(u())},onReset:e=>{e&&(e.preventDefault(),e.stopPropagation());let b=[];Object.keys(u()).map((e=>{b.push({type:e,value:""})})),m.set(b),W(!0,!1)},autoComplete:"off",className:b,noValidate:!0,children:a})}));var Xl=M.memo(wl);function Sl({name:e="",useQueryString:b=!1,onUpdate:o,onReset:p,onFieldUpdate:z}){const[t,c]=M.useState({}),[n,r]=M.useState(e),[O,i]=M.useState(!1),[a,s]=M.useState({});function A(e){return t.hasOwnProperty(e)&&void 0!==t[e]}function d(){let e={};return Object.keys(t).forEach((b=>{e[b]=u(b)})),e}function l(e,b,o=!0){if(A(e)&&t[e].field.current){if(t[e].valid=!1,t[e].error=b,!t[e].field.current?.hasOwnProperty("setError"))throw new Error(`Reference Error: You must declare the 'setError' function on the field "${e}"`);t[e].field.current?.setError(o?b:"")}}function q(){let e=!0;return Object.keys(t).forEach((b=>{t[b].valid||(e=!1)})),i(e),e}function u(e){if(A(e)){if(t[e].field.current?.hasOwnProperty("getValue"))return t[e].field.current?.getValue();throw new Error(`Reference Error: You must declare the 'getValue' function on the field "${e}"`)}throw new Error(`Form Error: There is no field registered with this name: ${e}`)}function f(e,b,o,M){if(!A(e))throw new Error(`Form Error: There is no field registered with this name: ${e}`);if(!t[e].field.current?.hasOwnProperty("setValue"))throw new Error(`Reference Error: You must declare the 'setValue' function on the field "${e}"`);{let p=u(e),z=!1;z=Array.isArray(p)&&Array.isArray(b)?Ii(p,b):Array.isArray(p)||Array.isArray(b)?p.toString()===b.toString():p===b,z||t[e].field.current?.setValue(b,o,M)}}return{register:function(e){t[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){if(!A(e))throw new Error(`Form Unregister Error: There is no field registered with this name: ${e}`);delete t[e]},checkFormIsValid:q,hasField:A,getValues:d,getFieldValue:function(e){return A(e)?(b=t[e].value)instanceof Object?JSON.stringify(b):b:"";var b},getFieldValueByName:u,getFieldInstance:function(e){return A(e)?t[e].field.current:null},getFields:function(){let e={};return Object.keys(t).forEach((b=>{e[b]=t[b]})),e},getFieldsInstance:function(){let e={};return Object.keys(t).forEach((b=>{e[b]=t[b].field.current})),e},setName:function(e){r(e)},setInitialValues:function(e,M=!0,p=!1){Object.keys(e).forEach((b=>{f(b,e[b],M,p)}));let z={};return Object.keys(e).forEach((b=>{z[b]=e[b]})),M&&(b&&s(z),o&&o(z)),q(),z},setInvalidField:function(e="",b=""){l(e,b),q()},setInvalidFields:function(e=[],b=""){e.forEach((e=>{l(e,b)})),q()},setFieldValue:function(e,b){if(!A(e))throw new Error(`Form Error: There is no field registered with this name: ${e}`);t[e].valid=!1,t[e].field.current?.setValue(b)},setFieldValueByName:f,setFieldError:l,removeFieldError:function(e){if(!A(e))throw new Error(`Form Error: There is no field registered with this name: ${e}`);if(t[e].valid=!0,t[e].error="",!t[e].field.current?.hasOwnProperty("setError"))throw new Error(`Reference Error: You must declare the 'setError' function on the field "${e}"`);t[e].field.current?.setError("")},updateField:function(e,M,p,c){if(!A(e))throw new Error(`Form Update Error: There is no field registered with this name: ${e}`);if(t[e].value=M,t[e].valid=c,p){z&&z({name:e,value:M,valid:c}),t[e].reset.length>0&&t[e].reset.forEach((e=>{t[e].value="",t[e].valid=!1,t[e].field.current?.reset(!1)}));let p={...d(),[e]:M};t[e].reset.length>0&&t[e].reset.forEach((e=>{p[e]=""})),b&&c&&s(p),o&&o(p)}q()},isFormValid:M.useCallback((()=>O),[O]),isFieldsValid:function(e){let b=!0;return e.forEach((e=>{t[e].valid||(b=!1)})),b},isFieldValid:function(e){return t[e].valid},resetFields:function(e=!1,b=!1){Object.keys(t).forEach((o=>{if(!t[o].field.current?.hasOwnProperty("reset"))throw new Error(`Reference Error: You must declare the 'reset' function on the field "${o}"`);t[o].field.current?.reset(e,b)})),p&&p()},removeFields:function(){c({})},formId:n,updated:a}}const kl=M.forwardRef((({initialValues:e,children:b,onUpdate:p,onReset:z,onFinish:t,onFinishFailed:c,onFieldUpdate:n,onValidated:r,useQueryString:O,className:i,name:a},s)=>{const A=M.useRef(null);M.useEffect((()=>()=>{A.current=null}),[]),A.current=Sl({name:a,onUpdate:p,onReset:z,onFieldUpdate:n,useQueryString:O}),M.useImperativeHandle(s,(()=>A.current));return o.jsx(xl.Provider,{value:A.current,children:o.jsx(Xl,{initialValues:e,useQueryString:O,onUpdate:p,onFinish:t,onFinishFailed:c,onValidated:r,name:a,className:(()=>{let e="itd-form";return a&&(e+=" "+a),i&&(e+=" "+i),e})(),children:b})})}));kl.Item=Bl,kl.Group=function({gap:e=15,horizontal:b=!1,className:M,children:p}){const z=()=>{let e="itd-form-group";return M&&(e+=" "+M),e};return o.jsx(dl,{className:z(),$gap:e,$horizontal:b,children:p})},kl.Control=function({position:e="end",className:b,children:M}){const p=()=>{let e="itd-form-control";return b&&(e+=" "+b),e};return o.jsx(ll,{className:p(),$position:e,children:M})},kl.useForm=()=>M.useContext(xl),kl.useFormAPI=()=>{const e=M.useContext(xl);if(!e)throw new Error("useFormAPI must be used within a FormContext.Provider");return e};const Tl=mt.div`
+`;const ql=new RegExp(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+([.])[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/),ul=new RegExp(/^[a-zA-Z0-9_.-]{6,}$/),fl=new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+={};:<>|./?,"'\[\]\\`~\-])[a-zA-Z\d$begin:math:display$$end:math:display$\\`~!@#$%^&*()_+={};:<>|.\/?,"'-]{8,60}$/);const Wl=e=>fl.test(e),hl=e=>ql.test(e),Rl=e=>ul.test(e),ml=(e,b)=>e.length>=b,gl=(e,b)=>e.length<=b,Ll=(e,b)=>e===b,vl=(e,b)=>e.length===b,Nl=e=>function(e){var b,o=0,M=0,p=0;if(11!=e.length)return!1;if(!/^-?\d+$/.test(e))return!1;if(0==Number(e[0]))return!1;if(o=parseInt(e[0])+parseInt(e[2])+parseInt(e[4])+parseInt(e[6])+parseInt(e[8]),b=parseInt(e[1])+parseInt(e[3])+parseInt(e[5])+parseInt(e[7]),o*=7,Math.abs(o-b)%10!=Number(e[9]))return!1;for(p=0;p<10;p++)M+=parseInt(e[p]);return M%10==Number(e[10])}(e),yl=e=>{if(Array.isArray(e)){if(0===e.length)return!1}else{if("object"==typeof e){let b=!0;return Object.keys(e).forEach((o=>{""===e[o]&&(b=!1)})),b}if("string"==typeof e){if(""===e)return!1}else if("boolean"==typeof e&&!1===e)return!1}return!0},xl=M.createContext({});xl.displayName="ITDFormContext";const Bl=M.forwardRef((({name:e="",label:o="",placeholder:p="",error:z="",rules:t=[],mask:c=null,locked:n=!1,dependency:r="",reset:O=[],query:i="",children:a=null},s)=>{const{t:A}=b.useTranslation("itd"),d=M.useRef(null),{register:q,unregister:u,hasField:f,updateField:W,setFieldError:h,getFieldValue:R,getFieldInstance:m,formId:g}=M.useContext(xl),[L,v]=M.useState(!1);M.useEffect((()=>(q({name:e,field:d,valid:y(d.current?.getValue()),query:i,reset:O,error:z}),v(!0),()=>{v(!1),u(e)})),[]),M.useImperativeHandle(s,(()=>d.current));const N=(b,o=!0,M=!0)=>{L&&f(e)&&(W(e,b,o,y(b,M)),x())},y=(b,o=!0)=>{const M=function(e,b,o,M){let p=[];return e.forEach((e=>{e.hasOwnProperty(l.REQUIRED)&&!yl(b)&&e.required&&p.push(e.message?e.message:M("errors.required")),e.hasOwnProperty(l.TYPE)&&(e.type===exports.FormValidationTypes.MIN_LENGTH&&(ml(String(b),Number(e.value))||p.push(e.message?e.message:M("errors.minLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.MAX_LENGTH&&(gl(String(b),Number(e.value))||p.push(e.message?e.message:M("errors.maxLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.EXACT_LENGTH&&(vl(String(b),Number(e.value))||p.push(e.message?e.message:M("errors.exactLength",{length:Number(e.value)}))),e.type===exports.FormValidationTypes.SAME&&(Ll(String(b),String(o(String(e.field))))||p.push(e.message?e.message:M("errors.fieldMustBeTheSame",{fields:e.field}))),e.type===exports.FormValidationTypes.TC_IDENTITY&&(Nl(String(b))||p.push(e.message?e.message:M("errors.wrongTCIdentity"))),e.type===exports.FormValidationTypes.PASSWORD&&(Wl(String(b))||p.push(e.message?e.message:M("errors.passwordRule"))),e.type===exports.FormValidationTypes.EMAIL&&(hl(String(b))||p.push(e.message?e.message:M("errors.invalidEmailAddress"))),e.type===exports.FormValidationTypes.USERNAME&&(Rl(String(b))||p.push(e.message?e.message:M("errors.usernameRule"))))})),p}(t,b,R,A);return M.length>0?(h(e,M[0],o),!1):(h(e,""),!0)},x=()=>{if(""===r)return;if(""===R(r))return;const e=m(r);e&&e.forceUpdate&&e.forceUpdate()};return(()=>{if(!a)return null;let b=a.props;const z={id:b.id?b.id:g+"_"+e,label:o,placeholder:p,className:b.className?b.className+" itd-form-item":"itd-form-item",onUpdate:N,ref:d};return c&&(z.mask=c),n&&(z.locked=n),M.cloneElement(a,{...b,...z})})()})),wl=M.forwardRef((({name:e="",className:b="",initialValues:p={},useQueryString:z=!1,onUpdate:t,onFinish:c,onFinishFailed:n,onValidated:O,children:a},s)=>{const{updated:A,setInitialValues:d,isFormValid:l,getValues:q,getFields:u,setFieldValueByName:f,resetFields:W}=M.useContext(xl),h=SM(),{search:R}=r.useLocation(),m=kM(),[g,L]=M.useState([]),[v,N]=M.useState(!1),[y,x]=M.useState([]),[B,w]=M.useState(!1),[X,S]=M.useState(!1);M.useEffect((()=>{a&&P()}),[a]),M.useEffect((()=>{k(),T()}),[B]),M.useEffect((()=>{B||0!==Object.keys(u()).length&&0!==y.length&&Object.keys(u()).length===y.length&&w(!0)}),[u(),y]),M.useEffect((()=>{T()}),[p]),M.useEffect((()=>{k()}),[R]),M.useEffect((()=>{X&&B&&z&&Object.keys(A).length>0&&C(A)}),[A]),M.useEffect((()=>{O&&l()!==v&&O(l()),N(l())}),[l()]);const k=()=>{B&&z&&(D(),X||_())},T=()=>{B&&(z||X||E())},E=()=>{const e=!Object.values(p).some((e=>null!==e&&""!==e));e&&!X&&S(!0),e||X||(d(p,!1),S(!0))},_=()=>{const e=u(),b=!Object.values(e).some((e=>""!==h.get(e.query,"")));if(Object.values(e).some((e=>null===e.query||""===e.query))){let b=[];throw Object.keys(e).forEach((o=>{e[o].hasOwnProperty("query")&&null!==e[o].query&&""!==e[o].query||b.push(o)})),new Error(`ITD Form Initial Fields Error: "useQueryString" is activated but "query" value is not passed to whole form elements! Invalid fields are ${b.toString()}`)}if(b&&!X&&S(!0),!b&&!X){let b={};Object.keys(e).forEach((o=>{b[o]=h.get(e[o].query,"")})),d(b,!0,!0),S(!0)}},C=e=>{let b=[],o=[];const M=u();Object.keys(e).forEach((b=>{o.push(e[b])})),Ii(o,g)||(Object.keys(M).forEach((o=>{b.push({type:M[o].query,value:e[o]})})),m.set(b))},D=()=>{let e=[],b=[];const o=u();if(Object.keys(o).forEach((b=>{let M=String(h.get(o[b].query,""));e.push(M)})),Ii(e,g))return;L(e),Object.keys(o).forEach((e=>{b[e]=h.get(o[e].query,"")})),Object.keys(b).forEach((e=>{f(e,b[e],!1,!1)}));let M={};Object.keys(b).forEach((e=>{M[e]=b[e]})),t&&t(M)},P=()=>{let e=[];i.getChildrenDeep(a,(b=>(b.hasOwnProperty("type")&&b.type===Bl&&e.push({[b.props.name]:b}),!0))),x(e)};return M.useImperativeHandle(s,(()=>({fieldUpdate(e){console.log("fieldUpdate"),console.log(e)}}))),o.jsx("form",{id:e,onSubmit:e=>{e&&(e.preventDefault(),e.stopPropagation()),l()?c&&c(q()):n&&n(u())},onReset:e=>{e&&(e.preventDefault(),e.stopPropagation());let b=[];Object.keys(u()).map((e=>{b.push({type:e,value:""})})),m.set(b),W(!0,!1)},autoComplete:"off",className:b,noValidate:!0,children:a})}));var Xl=M.memo(wl);function Sl({name:e="",useQueryString:b=!1,onUpdate:o,onReset:p,onFieldUpdate:z}){const[t,c]=M.useState({}),[n,r]=M.useState(e),[O,i]=M.useState(!1),[a,s]=M.useState({});function A(e){return t.hasOwnProperty(e)&&void 0!==t[e]}function d(){let e={};return Object.keys(t).forEach((b=>{e[b]=u(b)})),e}function l(e,b,o=!0){if(A(e)&&t[e].field.current){if(t[e].valid=!1,t[e].error=b,!t[e].field.current?.hasOwnProperty("setError"))throw new Error(`Reference Error: You must declare the 'setError' function on the field "${e}"`);t[e].field.current?.setError(o?b:"")}}function q(){let e=!0;return Object.keys(t).forEach((b=>{t[b].valid||(e=!1)})),i(e),e}function u(e){if(A(e)){if(t[e].field.current?.hasOwnProperty("getValue"))return t[e].field.current?.getValue();throw new Error(`Reference Error: You must declare the 'getValue' function on the field "${e}"`)}throw new Error(`Form Error: There is no field registered with this name: ${e}`)}function f(e,b,o,M){if(!A(e))throw new Error(`Form Error: There is no field registered with this name: ${e}`);if(!t[e].field.current?.hasOwnProperty("setValue"))throw new Error(`Reference Error: You must declare the 'setValue' function on the field "${e}"`);{let p=u(e),z=!1;z=Array.isArray(p)&&Array.isArray(b)?Ii(p,b):Array.isArray(p)||Array.isArray(b)?p.toString()===b.toString():p===b,z||t[e].field.current?.setValue(b,o,M)}}return{register:function(e){t[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){if(!A(e))throw new Error(`Form Unregister Error: There is no field registered with this name: ${e}`);delete t[e]},checkFormIsValid:q,hasField:A,getValues:d,getFieldValue:function(e){return A(e)?(b=t[e].value)instanceof Object?JSON.stringify(b):b:"";var b},getFieldValueByName:u,getFieldInstance:function(e){return A(e)?t[e].field.current:null},getFields:function(){let e={};return Object.keys(t).forEach((b=>{e[b]=t[b]})),e},getFieldsInstance:function(){let e={};return Object.keys(t).forEach((b=>{e[b]=t[b].field.current})),e},setName:function(e){r(e)},setInitialValues:function(e,M=!0,p=!1){Object.keys(e).forEach((b=>{f(b,e[b],M,p)}));let z={};return Object.keys(e).forEach((b=>{z[b]=e[b]})),M&&(b&&s(z),o&&o(z)),q(),z},setInvalidField:function(e="",b=""){l(e,b),q()},setInvalidFields:function(e=[],b=""){e.forEach((e=>{l(e,b)})),q()},setFieldValue:function(e,b){if(!A(e))throw new Error(`Form Error: There is no field registered with this name: ${e}`);t[e].valid=!1,t[e].field.current?.setValue(b)},setFieldValueByName:f,setFieldError:l,removeFieldError:function(e){if(!A(e))throw new Error(`Form Error: There is no field registered with this name: ${e}`);if(t[e].valid=!0,t[e].error="",!t[e].field.current?.hasOwnProperty("setError"))throw new Error(`Reference Error: You must declare the 'setError' function on the field "${e}"`);t[e].field.current?.setError("")},updateField:function(e,M,p,c){if(!A(e))throw new Error(`Form Update Error: There is no field registered with this name: ${e}`);if(t[e].value=M,t[e].valid=c,p){z&&z({name:e,value:M,valid:c}),t[e].reset.length>0&&t[e].reset.forEach((e=>{t[e].value="",t[e].valid=!1,t[e].field.current?.reset(!1)}));let p={...d(),[e]:M};t[e].reset.length>0&&t[e].reset.forEach((e=>{p[e]=""})),b&&c&&s(p),o&&o(p)}q()},isFormValid:M.useCallback((()=>O),[O]),isFieldsValid:function(e){let b=!0;return e.forEach((e=>{t[e].valid||(b=!1)})),b},isFieldValid:function(e){return t[e].valid},resetFields:function(e=!1,b=!1){Object.keys(t).forEach((o=>{if(!t[o].field.current?.hasOwnProperty("reset"))throw new Error(`Reference Error: You must declare the 'reset' function on the field "${o}"`);t[o].field.current?.reset(e,b)})),p&&p()},removeFields:function(){c({})},formId:n,updated:a}}const kl=M.forwardRef((({initialValues:e,children:b,onUpdate:p,onReset:z,onFinish:t,onFinishFailed:c,onFieldUpdate:n,onValidated:r,useQueryString:O,className:i,name:a},s)=>{const A=M.useRef(null);M.useEffect((()=>()=>{A.current=null}),[]),A.current=Sl({name:a,onUpdate:p,onReset:z,onFieldUpdate:n,useQueryString:O}),M.useImperativeHandle(s,(()=>A.current));return o.jsx(xl.Provider,{value:A.current,children:o.jsx(Xl,{initialValues:e,useQueryString:O,onUpdate:p,onFinish:t,onFinishFailed:c,onValidated:r,name:a,className:(()=>{let e="itd-form";return a&&(e+=" "+a),i&&(e+=" "+i),e})(),children:b})})}));kl.Item=Bl,kl.Group=function({gap:e=15,columns:b=1,horizontal:M=!1,className:p,children:z}){const t=()=>{let e="itd-form-group";return p&&(e+=" "+p),e};return o.jsx(dl,{className:t(),$gap:e,$horizontal:M,$columns:b,children:z})},kl.Control=function({position:e="end",className:b,children:M}){const p=()=>{let e="itd-form-control";return b&&(e+=" "+b),e};return o.jsx(ll,{className:p(),$position:e,children:M})},kl.useForm=()=>M.useContext(xl),kl.useFormAPI=()=>{const e=M.useContext(xl);if(!e)throw new Error("useFormAPI must be used within a FormContext.Provider");return e};const Tl=mt.div`
 
   &.itd-accordion-menu-sub-menu {
 
@@ -5364,24 +5365,17 @@ function ga(e,b){if(Da(e))for(let o=0;o<e.length&&!1!==b(e[o],o,e);o++);else e&&
 
   width: 100%;
   min-height: 0;
-  margin-bottom: 34px;
+  margin-bottom: 1rem;
 
-  &::before {
-    background-color: #04112780;
-    border-radius: 100px;
-    width: 84px;
-    height: 84px;
-    display: inline;
-    content: "";
-    position: absolute;
-    z-index: 0;
-    top: -20px;
-  }
+  background-color: #04112780;
+  border-radius: 100px;
+  width: 84px;
+  height: 84px;
   
   img {
     z-index: 0;
     width: 44px;
-    height: 44px;
+    height: auto;
   }
   
 `,_f=mt.div`

package/dist/index.d.ts

@@ -438,10 +438,11 @@ declare const Select: SelectComponentProps;
 type GroupProps = {
     className?: string;
     gap?: number;
+    columns?: number;
     horizontal?: boolean;
     children?: ChildrenProps$1;
 };
-declare function Group({ gap, horizontal, className, children }: GroupProps): react_jsx_runtime.JSX.Element;
+declare function Group({ gap, columns, horizontal, className, children }: GroupProps): react_jsx_runtime.JSX.Element;
 
 type ControlProps = {
     className?: string;