@kbgarcia8/react-dynamic-form 1.1.32 → 1.1.33

package/dist/components/organisms/DynamicForm/DynamicForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,mTAuBnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CAmJ1C,CAAA;AAGD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,mTAuBnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CAoJ1C,CAAA;AAGD,eAAe,WAAW,CAAC"}

package/dist/react-dynamic-form.cjs.js

@@ -111,7 +111,7 @@
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`,A=F.forwardRef((a,o)=>{const{type:s,id:i,onChange:m,isRequired:r,dataAttributes:d,disabled:b,className:h}=a;if(s==="textarea"){const{rows:y=5,cols:N=30,value:E,...v}=a;return e.jsx(ne,{onChange:m,value:E,rows:y,cols:N,className:h,ref:o,disabled:b,required:r,...v,...d})}if(s==="radio"||s==="checkbox"){const{checked:y,...N}=a;return e.jsx(B,{ref:o,checked:y,onChange:m,disabled:b,className:h,...N,...d})}const u=a,{value:j,pattern:f,placeholderText:k,...C}=u;return e.jsx(B,{placeholder:k,onChange:m,value:j,required:r,className:h,ref:o,disabled:b,pattern:f,...C,...d})}),w=a=>{const{className:o,type:s,id:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,labelClass:h,onChange:u,isRequired:j,dataAttributes:f,inputClass:k,ref:C,disabled:y,isEditable:N,editIcon:E,onClickEdit:v,deleteIcon:D,onClickDelete:S,idx:T,children:q}=a;return e.jsxs(Y,{className:`${o} ${i.replace("#","")}-label-input-container`,children:[s!=="radio"&&s!=="checkbox"&&e.jsx(R,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h}),s!=="radio"&&s!=="checkbox"&&s==="textarea"&&(()=>{const{rows:n=5,cols:g=30,value:l,...p}=a;return e.jsx(A,{id:i,name:i,type:"textarea",isRequired:j,onChange:u,value:l,rows:n,cols:g,dataAttributes:f,className:k,ref:C,disabled:y})})(),s!=="radio"&&s!=="checkbox"&&s!=="textarea"&&(()=>{const n=a,{value:g,pattern:l,placeholderText:p,...z}=n;return e.jsx(A,{id:i,name:i,placeholderText:p,onChange:u,value:g,type:s,isRequired:j,dataAttributes:f,className:k,ref:C,disabled:y,pattern:l})})(),(s==="radio"||s==="checkbox")&&(()=>{const{checked:n,...g}=a;return e.jsxs(e.Fragment,{children:[e.jsx(A,{ref:C,type:"checkbox",name:i,id:i,isRequired:j,checked:n,onChange:u,disabled:y,className:k,dataAttributes:f}),e.jsx(R,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h})]})})(),N&&e.jsxs(Z,{className:"input-edit-buttons",children:[e.jsx($,{id:`editable-${i}-edit-btn`,svg:E,buttonType:"button",onClick:v,className:`edit-radio-${T}`,dataAttributes:f}),e.jsx($,{id:`editable-${i}-delete-btn`,svg:D,buttonType:"button",onClick:S,className:`delete-radio-${T}`,dataAttributes:f})]}),q]})},se=c.fieldset`
+`,A=F.forwardRef((a,o)=>{const{type:s,id:i,onChange:m,isRequired:r,dataAttributes:d,disabled:b,className:h}=a;if(s==="textarea"){const{rows:y=5,cols:N=30,value:E,...v}=a;return e.jsx(ne,{onChange:m,value:E,rows:y,cols:N,className:h,ref:o,disabled:b,required:r,...v,...d})}if(s==="radio"||s==="checkbox"){const{checked:y,...N}=a;return e.jsx(B,{ref:o,checked:y,onChange:m,disabled:b,className:h,...N,...d})}const g=a,{value:j,pattern:f,placeholderText:k,...C}=g;return e.jsx(B,{placeholder:k,onChange:m,value:j,required:r,className:h,ref:o,disabled:b,pattern:f,...C,...d})}),w=a=>{const{className:o,type:s,id:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,labelClass:h,onChange:g,isRequired:j,dataAttributes:f,inputClass:k,ref:C,disabled:y,isEditable:N,editIcon:E,onClickEdit:v,deleteIcon:D,onClickDelete:S,idx:T,children:q}=a;return e.jsxs(Y,{className:`${o} ${i.replace("#","")}-label-input-container`,children:[s!=="radio"&&s!=="checkbox"&&e.jsx(R,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h}),s!=="radio"&&s!=="checkbox"&&s==="textarea"&&(()=>{const{rows:n=5,cols:u=30,value:l,...p}=a;return e.jsx(A,{id:i,name:i,type:"textarea",isRequired:j,onChange:g,value:l,rows:n,cols:u,dataAttributes:f,className:k,ref:C,disabled:y})})(),s!=="radio"&&s!=="checkbox"&&s!=="textarea"&&(()=>{const n=a,{value:u,pattern:l,placeholderText:p,...z}=n;return e.jsx(A,{id:i,name:i,placeholderText:p,onChange:g,value:u,type:s,isRequired:j,dataAttributes:f,className:k,ref:C,disabled:y,pattern:l})})(),(s==="radio"||s==="checkbox")&&(()=>{const{checked:n,...u}=a;return e.jsxs(e.Fragment,{children:[e.jsx(A,{ref:C,type:"checkbox",name:i,id:i,isRequired:j,checked:n,onChange:g,disabled:y,className:k,dataAttributes:f}),e.jsx(R,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h})]})})(),N&&e.jsxs(Z,{className:"input-edit-buttons",children:[e.jsx($,{id:`editable-${i}-edit-btn`,svg:E,buttonType:"button",onClick:v,className:`edit-radio-${T}`,dataAttributes:f}),e.jsx($,{id:`editable-${i}-delete-btn`,svg:D,buttonType:"button",onClick:S,className:`delete-radio-${T}`,dataAttributes:f})]}),q]})},se=c.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
@@ -131,11 +131,11 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,P=({legend:a,fieldsetIndex:o,idx:s,editableInformation:i,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>(console.log(o),e.jsxs(se,{className:"editable-option-fieldset",children:[e.jsx(oe,{children:`${a} ${s+1}`}),i?.map((h,u)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(A,{id:`editable-option-${u}`,name:`editable-option-${u}`,placeholderText:h.name.charAt(0).toUpperCase()+h.name.slice(1),onChange:m,value:h.info,type:h.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":u,"data-fieldsetindex":o,"data-key":h.info}})},`${h.name}-${u}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx($,{id:`editable-option-${s}-submit`,buttonType:"button",text:"Save",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":o}}),e.jsx($,{id:`editable-option-${s}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":o}}),e.jsx($,{id:`editable-option-${s}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":o}})]})]})),ce=c.div`
+`,P=({legend:a,fieldsetIndex:o,idx:s,editableInformation:i,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>(console.log(o),e.jsxs(se,{className:"editable-option-fieldset",children:[e.jsx(oe,{children:`${a} ${s+1}`}),i?.map((h,g)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(A,{id:`editable-option-${g}`,name:`editable-option-${g}`,placeholderText:h.name.charAt(0).toUpperCase()+h.name.slice(1),onChange:m,value:h.info,type:h.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":g,"data-fieldsetindex":o,"data-key":h.info}})},`${h.name}-${g}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx($,{id:`editable-option-${s}-submit`,buttonType:"button",text:"Save",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":o}}),e.jsx($,{id:`editable-option-${s}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":o}}),e.jsx($,{id:`editable-option-${s}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":o}})]})]})),ce=c.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`,re=({id:a,hasSubmit:o,submitText:s,handleSubmit:i,hasReset:m,resetText:r,handleReset:d,hasCancel:b,cancelText:h,handleCancel:u})=>e.jsxs(ce,{className:"form-main-button-container",children:[o&&e.jsx($,{id:`form-${a}-submit`,buttonType:"submit",text:s??"Submit",onClick:i,className:"submit-form-btn"}),m&&e.jsx($,{id:`form-${a}-edit`,buttonType:"button",text:r??"Reset",onClick:d,className:"reset-form-btn"}),b&&e.jsx($,{id:`form-${a}-cancel`,buttonType:"button",text:h??"Cancel",onClick:u,className:"cancel-form-btn"})]}),W=c.legend`
+`,re=({id:a,hasSubmit:o,submitText:s,handleSubmit:i,hasReset:m,resetText:r,handleReset:d,hasCancel:b,cancelText:h,handleCancel:g})=>e.jsxs(ce,{className:"form-main-button-container",children:[o&&e.jsx($,{id:`form-${a}-submit`,buttonType:"submit",text:s??"Submit",onClick:i,className:"submit-form-btn"}),m&&e.jsx($,{id:`form-${a}-edit`,buttonType:"button",text:r??"Reset",onClick:d,className:"reset-form-btn"}),b&&e.jsx($,{id:`form-${a}-cancel`,buttonType:"button",text:h??"Cancel",onClick:g,className:"cancel-form-btn"})]}),W=c.legend`
     font-size: ${t.spacing.medium};
     font-weight: 500;
     margin-bottom: ${t.spacing.small};
@@ -174,4 +174,4 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,xe=({fieldsets:a=null,legendText:o,isExpandable:s,id:i,formInputs:m,labelAndInputContainerClass:r,labelClass:d,inputClass:b,onChangeOfEditableOption:h,handleAddingInputEntry:u,hasSubmit:j=!1,submitText:f,handleSubmit:k,hasReset:C=!1,resetText:y,handleReset:N,hasCancel:E=!1,cancelText:v,handleCancel:D,handleSubmitForm:S,className:T,children:q})=>e.jsxs(de,{id:`${i}-form`,className:T,onSubmit:S,children:[a?a.map((n,g)=>e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset-${g}`,className:`${n.legend}-fieldset`,children:[n.legend&&e.jsx(W,{className:`${n.legend}-legend`,children:n.legend}),n.inputs.length!==0?n.inputs.map((l,p)=>e.jsxs(F.Fragment,{children:[l.type==="textarea"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:g,idx:p,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(z=>{}),onClickCancelEdit:l?.onClickCancel||(z=>{}),onClickDeleteEntry:l?.onClickDelete||(z=>{})})]})]},`form-${i}-${p}`)):n.isExpandable?e.jsx(O,{children:`No entry yet on ${n.legend}. Click "+" button to add entry.`}):""]}),n.isExpandable&&e.jsx(H,{className:"add-input-button-space",children:e.jsx($,{id:`expand-${n.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":g}})})]},`${n.legend}-${g}`)):e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset`,className:`${o}-fieldset`,children:[o&&e.jsx(W,{className:`${o}-legend`,children:o}),!a&&m&&m.length!==0?m.map((n,g)=>e.jsxs(F.Fragment,{children:[n.type==="textarea"&&e.jsx(w,{...n,id:n.id??`${o}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),n.type!=="textarea"&&n.type!=="radio"&&n.type!=="checkbox"&&e.jsx(w,{...n,id:n.id??`${o}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),(n.type==="radio"||n.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...n,id:n.id??`${o}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),n.editing&&n.isEditable&&e.jsx(P,{legend:`${o}`,idx:g,editableInformation:n?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:n?.onClickSave||(l=>{}),onClickCancelEdit:n?.onClickCancel||(l=>{}),onClickDeleteEntry:n?.onClickDelete||(l=>{})})]})]},`form-${i}-${g}`)):s?e.jsx(O,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),s&&e.jsx(H,{className:"add-input-button-space",children:e.jsx($,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]}),e.jsx(re,{id:i,hasSubmit:j,submitText:f,handleSubmit:k,hasReset:C,resetText:y,handleReset:N,hasCancel:E,cancelText:v,handleCancel:D}),e.jsx(me,{className:"children-container",children:q})]}),be=a=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,s=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return o.test(a)||s.test(a)||CSS.supports("color",a)},x=a=>{if(!be(a))throw new Error(`Invalid color: ${a}`);return a},he={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},G={name:"light",colors:{text:x("#333446"),bg:x("#EEEEEE"),blue:x("#7F8CAA"),blue2:x("#80A6FF"),teal:x("#5b8280ff"),teal2:x("#AEEAE7"),gray:x("#AEAEAE"),information:x("#202234"),success:x("#123524"),warning:x("#F2C265"),error:x("#990000")}},J={name:"dark",colors:{bg:x("#333446"),text:x("#EEEEEE"),blue:x("#80A6FF"),blue2:x("#7F8CAA"),teal:x("#AEEAE7"),teal2:x("#5b8280ff"),gray:x("#D0D0DD"),information:x("#C9E6F0"),success:x("#9EDF9C"),warning:x("#FCFFC1"),error:x("#FAD4D4")}},L=F.createContext({}),ue=({children:a,initialTheme:o=G,secondTheme:s=J})=>{const[i,m]=F.useState(o),r=()=>{m(d=>d===o?s:o)};return e.jsx(L.Provider,{value:{currentTheme:i,toggleTheme:r},children:e.jsx(c.ThemeProvider,{theme:i,children:a})})},ge=()=>F.useContext(L);exports.DynamicForm=xe;exports.ThemeContext=L;exports.ThemeContextProvider=ue;exports.breakpoints=he;exports.darkTheme=J;exports.lightTheme=G;exports.useTheme=ge;
+`,xe=({fieldsets:a=null,legendText:o,isExpandable:s,id:i,formInputs:m,labelAndInputContainerClass:r,labelClass:d,inputClass:b,onChangeOfEditableOption:h,handleAddingInputEntry:g,hasSubmit:j=!1,submitText:f,handleSubmit:k,hasReset:C=!1,resetText:y,handleReset:N,hasCancel:E=!1,cancelText:v,handleCancel:D,handleSubmitForm:S,className:T,children:q})=>e.jsxs(de,{id:`${i}-form`,className:T,onSubmit:S,children:[a?a.map((n,u)=>(console.log(u),e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset-${u}`,className:`${n.legend}-fieldset`,children:[n.legend&&e.jsx(W,{className:`${n.legend}-legend`,children:n.legend}),n.inputs.length!==0?n.inputs.map((l,p)=>e.jsxs(F.Fragment,{children:[l.type==="textarea"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:u,idx:p,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(z=>{}),onClickCancelEdit:l?.onClickCancel||(z=>{}),onClickDeleteEntry:l?.onClickDelete||(z=>{})})]})]},`form-${i}-${p}`)):n.isExpandable?e.jsx(O,{children:`No entry yet on ${n.legend}. Click "+" button to add entry.`}):""]}),n.isExpandable&&e.jsx(H,{className:"add-input-button-space",children:e.jsx($,{id:`expand-${n.legend}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":u}})})]},`${n.legend}-${u}`))):e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset`,className:`${o}-fieldset`,children:[o&&e.jsx(W,{className:`${o}-legend`,children:o}),!a&&m&&m.length!==0?m.map((n,u)=>e.jsxs(F.Fragment,{children:[n.type==="textarea"&&e.jsx(w,{...n,id:n.id??`${o}-input`,labelClass:d,inputClass:b,idx:u,className:`${r} ${n?.uniqueClass}`}),n.type!=="textarea"&&n.type!=="radio"&&n.type!=="checkbox"&&e.jsx(w,{...n,id:n.id??`${o}-input`,labelClass:d,inputClass:b,idx:u,className:`${r} ${n?.uniqueClass}`}),(n.type==="radio"||n.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...n,id:n.id??`${o}-input`,labelClass:d,inputClass:b,idx:u,className:`${r} ${n?.uniqueClass}`}),n.editing&&n.isEditable&&e.jsx(P,{legend:`${o}`,idx:u,editableInformation:n?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:n?.onClickSave||(l=>{}),onClickCancelEdit:n?.onClickCancel||(l=>{}),onClickDeleteEntry:n?.onClickDelete||(l=>{})})]})]},`form-${i}-${u}`)):s?e.jsx(O,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),s&&e.jsx(H,{className:"add-input-button-space",children:e.jsx($,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]}),e.jsx(re,{id:i,hasSubmit:j,submitText:f,handleSubmit:k,hasReset:C,resetText:y,handleReset:N,hasCancel:E,cancelText:v,handleCancel:D}),e.jsx(me,{className:"children-container",children:q})]}),be=a=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,s=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return o.test(a)||s.test(a)||CSS.supports("color",a)},x=a=>{if(!be(a))throw new Error(`Invalid color: ${a}`);return a},he={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},G={name:"light",colors:{text:x("#333446"),bg:x("#EEEEEE"),blue:x("#7F8CAA"),blue2:x("#80A6FF"),teal:x("#5b8280ff"),teal2:x("#AEEAE7"),gray:x("#AEAEAE"),information:x("#202234"),success:x("#123524"),warning:x("#F2C265"),error:x("#990000")}},J={name:"dark",colors:{bg:x("#333446"),text:x("#EEEEEE"),blue:x("#80A6FF"),blue2:x("#7F8CAA"),teal:x("#AEEAE7"),teal2:x("#5b8280ff"),gray:x("#D0D0DD"),information:x("#C9E6F0"),success:x("#9EDF9C"),warning:x("#FCFFC1"),error:x("#FAD4D4")}},L=F.createContext({}),ue=({children:a,initialTheme:o=G,secondTheme:s=J})=>{const[i,m]=F.useState(o),r=()=>{m(d=>d===o?s:o)};return e.jsx(L.Provider,{value:{currentTheme:i,toggleTheme:r},children:e.jsx(c.ThemeProvider,{theme:i,children:a})})},ge=()=>F.useContext(L);exports.DynamicForm=xe;exports.ThemeContext=L;exports.ThemeContextProvider=ue;exports.breakpoints=he;exports.darkTheme=J;exports.lightTheme=G;exports.useTheme=ge;

package/dist/react-dynamic-form.es.js

@@ -219,7 +219,7 @@ const e = {
       }
     );
   }
-  const f = t, { value: N, pattern: p, placeholderText: C, ...w } = f;
+  const $ = t, { value: N, pattern: p, placeholderText: C, ...w } = $;
   return /* @__PURE__ */ a(
     W,
     {
@@ -245,7 +245,7 @@ const e = {
     $labelFlexDirection: d,
     svg: h,
     labelClass: g,
-    onChange: f,
+    onChange: $,
     isRequired: N,
     dataAttributes: p,
     inputClass: C,
@@ -262,7 +262,7 @@ const e = {
   return /* @__PURE__ */ u(te, { className: `${l} ${i.replace("#", "")}-label-input-container`, children: [
     o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: i, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: g }),
     o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
-      const { rows: n = 5, cols: $ = 30, value: s, ...k } = t;
+      const { rows: n = 5, cols: f = 30, value: s, ...k } = t;
       return /* @__PURE__ */ a(
         D,
         {
@@ -270,10 +270,10 @@ const e = {
           name: i,
           type: "textarea",
           isRequired: N,
-          onChange: f,
+          onChange: $,
           value: s,
           rows: n,
-          cols: $,
+          cols: f,
           dataAttributes: p,
           className: C,
           ref: w,
@@ -282,15 +282,15 @@ const e = {
       );
     })(),
     o !== "radio" && o !== "checkbox" && o !== "textarea" && (() => {
-      const n = t, { value: $, pattern: s, placeholderText: k, ...L } = n;
+      const n = t, { value: f, pattern: s, placeholderText: k, ...L } = n;
       return /* @__PURE__ */ a(
         D,
         {
           id: i,
           name: i,
           placeholderText: k,
-          onChange: f,
-          value: $,
+          onChange: $,
+          value: f,
           type: o,
           isRequired: N,
           dataAttributes: p,
@@ -302,7 +302,7 @@ const e = {
       );
     })(),
     (o === "radio" || o === "checkbox") && (() => {
-      const { checked: n, ...$ } = t;
+      const { checked: n, ...f } = t;
       return /* @__PURE__ */ u(R, { children: [
         /* @__PURE__ */ a(
           D,
@@ -313,7 +313,7 @@ const e = {
             id: i,
             isRequired: N,
             checked: n,
-            onChange: f,
+            onChange: $,
             disabled: y,
             className: C,
             dataAttributes: p
@@ -359,11 +359,11 @@ const e = {
   onClickDeleteEntry: h
 }) => (console.log(l), /* @__PURE__ */ u(re, { className: "editable-option-fieldset", children: [
   /* @__PURE__ */ a(de, { children: `${t} ${o + 1}` }),
-  i?.map((g, f) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
+  i?.map((g, $) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
     D,
     {
-      id: `editable-option-${f}`,
-      name: `editable-option-${f}`,
+      id: `editable-option-${$}`,
+      name: `editable-option-${$}`,
       placeholderText: g.name.charAt(0).toUpperCase() + g.name.slice(1),
       onChange: m,
       value: g.info,
@@ -371,12 +371,12 @@ const e = {
       isRequired: !0,
       className: "editable-option",
       dataAttributes: {
-        "data-index": f,
+        "data-index": $,
         "data-fieldsetindex": l,
         "data-key": g.info
       }
     }
-  ) }, `${g.name}-${f}`)),
+  ) }, `${g.name}-${$}`)),
   /* @__PURE__ */ u(be, { className: "editable-option-button-space", children: [
     /* @__PURE__ */ a(x, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: r, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
     /* @__PURE__ */ a(x, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
@@ -396,11 +396,11 @@ const e = {
   handleReset: d,
   hasCancel: h,
   cancelText: g,
-  handleCancel: f
+  handleCancel: $
 }) => /* @__PURE__ */ u(he, { className: "form-main-button-container", children: [
   l && /* @__PURE__ */ a(x, { id: `form-${t}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: i, className: "submit-form-btn" }),
   m && /* @__PURE__ */ a(x, { id: `form-${t}-edit`, buttonType: "button", text: r ?? "Reset", onClick: d, className: "reset-form-btn" }),
-  h && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text: g ?? "Cancel", onClick: f, className: "cancel-form-btn" })
+  h && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text: g ?? "Cancel", onClick: $, className: "cancel-form-btn" })
 ] }), M = c.legend`
     font-size: ${e.spacing.medium};
     font-weight: 500;
@@ -450,7 +450,7 @@ const e = {
   labelClass: d,
   inputClass: h,
   onChangeOfEditableOption: g,
-  handleAddingInputEntry: f,
+  handleAddingInputEntry: $,
   hasSubmit: N = !1,
   submitText: p,
   handleSubmit: C,
@@ -464,8 +464,8 @@ const e = {
   className: T,
   children: j
 }) => /* @__PURE__ */ u(ue, { id: `${i}-form`, className: T, onSubmit: z, children: [
-  t ? t.map((n, $) => /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ u(U, { id: `${i}-form-fieldset-${$}`, className: `${n.legend}-fieldset`, children: [
+  t ? t.map((n, f) => (console.log(f), /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ u(U, { id: `${i}-form-fieldset-${f}`, className: `${n.legend}-fieldset`, children: [
       n.legend && /* @__PURE__ */ a(M, { className: `${n.legend}-legend`, children: n.legend }),
       n.inputs.length !== 0 ? n.inputs.map((s, k) => /* @__PURE__ */ u(q.Fragment, { children: [
         s.type === "textarea" && /* @__PURE__ */ a(
@@ -506,7 +506,7 @@ const e = {
             P,
             {
               legend: `${n.legend}`,
-              fieldsetIndex: $,
+              fieldsetIndex: f,
               idx: k,
               editableInformation: s?.editableInformation || [],
               onChangeOfEditableOption: g,
@@ -521,11 +521,11 @@ const e = {
         ] })
       ] }, `form-${i}-${k}`)) : n.isExpandable ? /* @__PURE__ */ a(O, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
     ] }),
-    n.isExpandable && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${n.legend}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": $ } }) })
-  ] }, `${n.legend}-${$}`)) : /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
+    n.isExpandable && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${n.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": f } }) })
+  ] }, `${n.legend}-${f}`))) : /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
     /* @__PURE__ */ u(U, { id: `${i}-form-fieldset`, className: `${l}-fieldset`, children: [
       l && /* @__PURE__ */ a(M, { className: `${l}-legend`, children: l }),
-      !t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */ u(q.Fragment, { children: [
+      !t && m && m.length !== 0 ? m.map((n, f) => /* @__PURE__ */ u(q.Fragment, { children: [
         n.type === "textarea" && /* @__PURE__ */ a(
           E,
           {
@@ -533,7 +533,7 @@ const e = {
             id: n.id ?? `${l}-input`,
             labelClass: d,
             inputClass: h,
-            idx: $,
+            idx: f,
             className: `${r} ${n?.uniqueClass}`
           }
         ),
@@ -544,7 +544,7 @@ const e = {
             id: n.id ?? `${l}-input`,
             labelClass: d,
             inputClass: h,
-            idx: $,
+            idx: f,
             className: `${r} ${n?.uniqueClass}`
           }
         ),
@@ -556,7 +556,7 @@ const e = {
               id: n.id ?? `${l}-input`,
               labelClass: d,
               inputClass: h,
-              idx: $,
+              idx: f,
               className: `${r} ${n?.uniqueClass}`
             }
           ),
@@ -564,7 +564,7 @@ const e = {
             P,
             {
               legend: `${l}`,
-              idx: $,
+              idx: f,
               editableInformation: n?.editableInformation,
               onChangeOfEditableOption: g,
               onClickSaveEdit: n?.onClickSave || ((s) => {
@@ -576,9 +576,9 @@ const e = {
             }
           )
         ] })
-      ] }, `form-${i}-${$}`)) : o ? /* @__PURE__ */ a(O, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
+      ] }, `form-${i}-${f}`)) : o ? /* @__PURE__ */ a(O, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
     ] }),
-    o && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry" }) })
+    o && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
   ] }),
   /* @__PURE__ */ a(
     ge,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbgarcia8/react-dynamic-form",
-  "version": "1.1.32",
+  "version": "1.1.33",
   "description": "A form that can be nested with editable, expandable and flexible input-forms",
   "keywords": [
     "form",