@kbgarcia8/react-dynamic-form 1.0.1 → 1.0.3

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

@@ -1,5 +1,5 @@
 import React from "react";
 import type { DynamicFormProps } from "../../../type/propTypes";
-declare const DynamicForm: ({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, handleEditableInputEntryChange, handleAddingInputEntry, hasSubmit, hasCancel, hasDelete, hasEdit, submitText, handleSubmitForm, handleSubmit, cancelText, handleCancel, deleteText, handleDelete, editText, handleEdit, className, children }: React.PropsWithChildren<DynamicFormProps>) => import("react/jsx-runtime").JSX.Element;
+declare const DynamicForm: <T extends null, K extends boolean = false, E extends boolean = false>({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, handleEditableInputEntryChange, handleAddingInputEntry, hasSubmit, hasCancel, hasDelete, hasEdit, submitText, handleSubmitForm, handleSubmit, cancelText, handleCancel, deleteText, handleDelete, editText, handleEdit, className, children }: React.PropsWithChildren<DynamicFormProps<T, K, E>>) => import("react/jsx-runtime").JSX.Element;
 export default DynamicForm;
 //# sourceMappingURL=DynamicForm.d.ts.map

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,EAAgD,MAAM,yBAAyB,CAAC;AAE5H,QAAA,MAAM,WAAW,GAAI,2VA0BnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CA6I1C,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,EAAgD,MAAM,yBAAyB,CAAC;AAE5H,QAAA,MAAM,WAAW,GAAI,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,OAAO,GAAG,KAAK,EAAE,CAAC,SAAS,OAAO,GAAG,KAAK,EAAE,2VA0BzF,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC,CAAC,4CAmJlD,CAAA;AAGD,eAAe,WAAW,CAAC"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("react"),c=require("styled-components"),t={fonts:{secondary:"Raleway",tertiary:"Lato",fallback:"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"},fontWeight:{light:300,medium:500,bold:700,bolder:900},fontSize:{xsmall:"0.75rem"},spacing:{xxxsmall:"0.25rem",xxsmall:"0.375rem",xsmall:"0.5rem",small:"0.75rem",medium:"1.25rem"},borderRadius:{xsmall:"0.125rem",small:"0.25rem",xlarge:"2rem"},borderThickness:{thin:"0.0625rem",light:"0.125rem"}},Q=c.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("react"),c=require("styled-components"),t={fonts:{secondary:"Raleway",tertiary:"Lato",fallback:"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"},fontWeight:{light:300,medium:500,bold:700,bolder:900},fontSize:{xsmall:"0.75rem"},spacing:{xxxsmall:"0.25rem",xxsmall:"0.375rem",xsmall:"0.5rem",small:"0.75rem",medium:"1.25rem"},borderRadius:{xsmall:"0.125rem",small:"0.25rem",xlarge:"2rem"},borderThickness:{thin:"0.0625rem",light:"0.125rem"}},V=c.button`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -24,28 +24,28 @@
     & .button-icon-text-space svg {
         max-width: 100%;
     }
-`,V=c.div`
+`,X=c.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-`,X=c.img`
+`,Y=c.img`
     maxwidth: 100%;
-`,Y=c.span`
+`,Z=c.span`
     font-size: ${t.fontSize.xsmall};
     font-weight: ${t.fontWeight.medium};
     font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
     display: flex;
     align-items: center;
     justify-content: center;
-`,f=({onClick:n,id:o,buttonType:l,source:s,svg:r,alt:h="alt-button-icon",text:d="",className:i="",dataAttributes:b={}})=>e.jsx(Q,{onClick:n,id:o,type:l,className:i,...b,children:e.jsxs(V,{className:"button-icon-text-space",children:[s?e.jsx(X,{src:s,alt:h}):r||"",d&&e.jsx(Y,{id:o,children:d})]})}),Z=c.div`
+`,g=({onClick:n,id:o,buttonType:i,source:s,svg:r,alt:d="alt-button-icon",text:m="",className:l="",dataAttributes:b={}})=>e.jsx(V,{onClick:n,id:o,type:i,className:l,...b,children:e.jsxs(X,{className:"button-icon-text-space",children:[s?e.jsx(Y,{src:s,alt:d}):r||"",m&&e.jsx(Z,{id:o,children:m})]})}),_=c.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
     margin-bottom: ${t.spacing.small};
-`,_=c.div`
+`,I=c.div`
     display: flex;
     gap: ${t.spacing.xsmall};
     width: auto;
@@ -75,7 +75,7 @@
     align-items: center;
 `,ae=c.span`
     font-weight: ${t.fontWeight.light};
-`,P=({htmlFor:n,textLabel:o,additionalInfo:l,$labelFlexDirection:s,source:r,svg:h,className:d,children:i})=>e.jsxs(ee,{htmlFor:n,className:d,$labelFlexDirection:s,children:[(r||h)&&e.jsx(ne,{className:"label-icon-container",children:r?e.jsx("img",{src:r,alt:`${n}-label-icon`}):h||""}),e.jsx(te,{className:"main-label",children:o}),l&&e.jsx(ae,{className:"additional-info",children:l}),i]}),W=c.input`
+`,P=({htmlFor:n,textLabel:o,additionalInfo:i,$labelFlexDirection:s,source:r,svg:d,className:m,children:l})=>e.jsxs(ee,{htmlFor:n,className:m,$labelFlexDirection:s,children:[(r||d)&&e.jsx(ne,{className:"label-icon-container",children:r?e.jsx("img",{src:r,alt:`${n}-label-icon`}):d||""}),e.jsx(te,{className:"main-label",children:o}),i&&e.jsx(ae,{className:"additional-info",children:i}),l]}),W=c.input`
     display: flex;
     place-content: center;
     font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
@@ -105,17 +105,17 @@
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`,z=v.forwardRef((n,o)=>{const{type:l,id:s,onChange:r,isRequired:h,dataAttributes:d,disabled:i,className:b}=n;if(l==="textarea"){const{rows:j=5,cols:w=30,value:T,...D}=n;return e.jsx(oe,{id:s,onChange:r,value:T,rows:j,cols:w,...d,className:b,ref:o,disabled:i,required:h})}if(l==="radio"||l==="checkbox"){const{checked:j,...w}=n;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:i,className:b,...d})}const g=n,{value:y,pattern:u,placeholderText:p,...C}=g;return e.jsx(W,{id:s,name:s,placeholder:p,onChange:r,value:y,type:l,required:h,...d,className:b,ref:o,disabled:i,pattern:u})}),E=n=>{const{className:o,type:l,id:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,labelClass:b,onChange:g,isRequired:y,dataAttributes:u,inputClass:p,ref:C,disabled:j,isEditable:w,editIcon:T,onClickEdit:D,deleteIcon:L,onClickDelete:B,idx:S,children:q}=n;return e.jsxs(Z,{className:`${o} ${s.replace("#","")}-label-input-container`,children:[l!=="radio"&&l!=="checkbox"&&e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,className:b}),l!=="radio"&&l!=="checkbox"&&l==="textarea"&&(()=>{const{rows:k=5,cols:F=30,value:A,...a}=n;return e.jsx(z,{id:s,name:s,type:"textarea",isRequired:y,onChange:g,value:A,rows:k,cols:F,...u,className:p,ref:C,disabled:j})})(),l!=="radio"&&l!=="checkbox"&&l!=="textarea"&&(()=>{const k=n,{value:F,pattern:A,placeholderText:a,...$}=k;return e.jsx(z,{id:s,name:s,placeholderText:a,onChange:g,value:F,type:l,isRequired:y,...u,className:p,ref:C,disabled:j,pattern:A})})(),(l==="radio"||l==="checkbox")&&(()=>{const{checked:k,...F}=n;return e.jsxs(e.Fragment,{children:[e.jsx(z,{ref:C,type:"checkbox",name:s,id:s,isRequired:y,checked:k,onChange:g,disabled:j,className:p,...u}),e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,className:b})]})})(),"// * Radio inputs usually have labels next to them",w&&e.jsxs(_,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${s}-edit-btn`,svg:T,buttonType:"button",onClick:D,className:`edit-radio-${S}`,dataAttributes:u}),e.jsx(f,{id:`editable-${s}-delete-btn`,svg:L,buttonType:"button",onClick:B,className:`delete-radio-${S}`,dataAttributes:u})]}),q]})},se=c.fieldset`
+`,z=v.forwardRef((n,o)=>{const{type:i,id:s,onChange:r,isRequired:d,dataAttributes:m,disabled:l,className:b}=n;if(i==="textarea"){const{rows:j=5,cols:N=30,value:T,...A}=n;return e.jsx(oe,{id:s,onChange:r,value:T,rows:j,cols:N,...m,className:b,ref:o,disabled:l,required:d})}if(i==="radio"||i==="checkbox"){const{checked:j,...N}=n;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:l,className:b,...m})}const u=n,{value:y,pattern:f,placeholderText:p,...C}=u;return e.jsx(W,{id:s,name:s,placeholder:p,onChange:r,value:y,type:i,required:d,...m,className:b,ref:o,disabled:l,pattern:f})}),E=n=>{const{className:o,type:i,id:s,textLabel:r,additionalInfo:d,$labelFlexDirection:m,svg:l,labelClass:b,onChange:u,isRequired:y,dataAttributes:f,inputClass:p,ref:C,disabled:j,isEditable:N,editIcon:T,onClickEdit:A,deleteIcon:R,onClickDelete:B,idx:S,children:q}=n;return e.jsxs(_,{className:`${o} ${s.replace("#","")}-label-input-container`,children:[i!=="radio"&&i!=="checkbox"&&e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:d,$labelFlexDirection:m,svg:l,className:b}),i!=="radio"&&i!=="checkbox"&&i==="textarea"&&(()=>{const{rows:k=5,cols:w=30,value:D,...a}=n;return e.jsx(z,{id:s,name:s,type:"textarea",isRequired:y,onChange:u,value:D,rows:k,cols:w,...f,className:p,ref:C,disabled:j})})(),i!=="radio"&&i!=="checkbox"&&i!=="textarea"&&(()=>{const k=n,{value:w,pattern:D,placeholderText:a,...$}=k;return e.jsx(z,{id:s,name:s,placeholderText:a,onChange:u,value:w,type:i,isRequired:y,...f,className:p,ref:C,disabled:j,pattern:D})})(),(i==="radio"||i==="checkbox")&&(()=>{const{checked:k,...w}=n;return e.jsxs(e.Fragment,{children:[e.jsx(z,{ref:C,type:"checkbox",name:s,id:s,isRequired:y,checked:k,onChange:u,disabled:j,className:p,...f}),e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:d,$labelFlexDirection:m,svg:l,className:b})]})})(),N&&e.jsxs(I,{className:"input-edit-buttons",children:[e.jsx(g,{id:`editable-${s}-edit-btn`,svg:T,buttonType:"button",onClick:A,className:`edit-radio-${S}`,dataAttributes:f}),e.jsx(g,{id:`editable-${s}-delete-btn`,svg:R,buttonType:"button",onClick:B,className:`delete-radio-${S}`,dataAttributes:f})]}),q]})},se=c.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,le=c.legend`
+`,ie=c.legend`
     font-size: ${t.spacing.medium};
     font-weight: 500;
     margin: 0 auto ${t.spacing.small} auto;
     text-align: center;
     font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`,ie=c.div`
+`,le=c.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -125,26 +125,26 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,I=({legend:n,idx:o,editableInformation:l,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:h,onClickDeleteEntry:d})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(le,{children:`${n} ${o+1}`}),l.map((i,b)=>e.jsx(ie,{className:"editable-selection-container",children:e.jsx(z,{id:`editable-selection-${b}`,name:`editable-selection-${b}`,placeholderText:i.name.charAt(0).toUpperCase()+i.name.slice(1),onChange:s,value:i.info,type:i.type,isRequired:!0,className:"editable-selection",dataAttributes:{"data-index":b,"data-key":i.info}})},`${i.name}-${b}`)),e.jsxs(ce,{className:"editable-selection-button-space",children:[e.jsx(f,{id:`editable-selection-${o}-submit`,buttonType:"submit",text:"Save",onClick:r,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(f,{id:`editable-selection-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:h,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(f,{id:`editable-selection-${o}-delete`,buttonType:"button",text:"Delete",onClick:d,className:"editable-selection-btn",dataAttributes:{"data-index":o}})]})]}),re=c.div`
+`,M=({legend:n,idx:o,editableInformation:i,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:m})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(ie,{children:`${n} ${o+1}`}),i.map((l,b)=>e.jsx(le,{className:"editable-selection-container",children:e.jsx(z,{id:`editable-selection-${b}`,name:`editable-selection-${b}`,placeholderText:l.name.charAt(0).toUpperCase()+l.name.slice(1),onChange:s,value:l.info,type:l.type,isRequired:!0,className:"editable-selection",dataAttributes:{"data-index":b,"data-key":l.info}})},`${l.name}-${b}`)),e.jsxs(ce,{className:"editable-selection-button-space",children:[e.jsx(g,{id:`editable-selection-${o}-submit`,buttonType:"submit",text:"Save",onClick:r,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(g,{id:`editable-selection-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(g,{id:`editable-selection-${o}-delete`,buttonType:"button",text:"Delete",onClick:m,className:"editable-selection-btn",dataAttributes:{"data-index":o}})]})]}),re=c.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`,de=({id:n,hasSubmit:o,submitText:l,handleSubmit:s,hasEdit:r,editText:h,handleEdit:d,hasCancel:i,cancelText:b,handleCancel:g,hasDelete:y,deleteText:u,handleDelete:p})=>e.jsxs(re,{className:"form-main-button-container",children:[o&&e.jsx(f,{id:`form-${n}-submit`,buttonType:"submit",text:l??"Submit",onClick:s,className:"submit-form-btn"}),r&&e.jsx(f,{id:`form-${n}-edit`,buttonType:"button",text:h??"Edit",onClick:d,className:"edit-form-btn"}),i&&e.jsx(f,{id:`form-${n}-cancel`,buttonType:"button",text:b??"Cancel",onClick:g,className:"cancel-form-btn"}),y&&e.jsx(f,{id:`form-${n}-delete`,buttonType:"button",text:u??"Delete",onClick:p,className:"delete-form-btn"})]}),M=c.legend`
+`,de=({id:n,hasSubmit:o,submitText:i,handleSubmit:s,hasEdit:r,editText:d,handleEdit:m,hasCancel:l,cancelText:b,handleCancel:u,hasDelete:y,deleteText:f,handleDelete:p})=>e.jsxs(re,{className:"form-main-button-container",children:[o&&e.jsx(g,{id:`form-${n}-submit`,buttonType:"submit",text:i??"Submit",onClick:s,className:"submit-form-btn"}),r&&e.jsx(g,{id:`form-${n}-edit`,buttonType:"button",text:d??"Edit",onClick:m,className:"edit-form-btn"}),l&&e.jsx(g,{id:`form-${n}-cancel`,buttonType:"button",text:b??"Cancel",onClick:u,className:"cancel-form-btn"}),y&&e.jsx(g,{id:`form-${n}-delete`,buttonType:"button",text:f??"Delete",onClick:p,className:"delete-form-btn"})]}),U=c.legend`
     font-size: ${t.spacing.medium};
     font-weight: 500;
     margin-bottom: ${t.spacing.small};
     width: auto;
     text-align: center;
     font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`,U=c.fieldset`
+`,H=c.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,H=c.div`
+`,G=c.div`
     padding: ${t.spacing.small};
     height: auto;
     width: 100%;
-`,G=c.div`
+`,J=c.div`
     display: flex;
     justify-content: center;
     align-items: center;
@@ -158,14 +158,14 @@
     flex-direction: column;
     align-items: center;
     width: 100%;
-`,J=c.div`
+`,K=c.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,be=c.div`
+`,xe=c.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,xe=({fieldsets:n=null,legendText:o,isExpandable:l=!1,id:s,formInputs:r,labelAndInputContainerClass:h,labelClass:d,inputClass:i,handleEditableInputEntryChange:b,handleAddingInputEntry:g,hasSubmit:y=!1,hasCancel:u=!1,hasDelete:p=!1,hasEdit:C=!1,submitText:j,handleSubmitForm:w,handleSubmit:T,cancelText:D,handleCancel:L,deleteText:B,handleDelete:S,editText:q,handleEdit:k,className:F,children:A})=>e.jsxs(me,{id:`${s}-form`,className:F,onSubmit:w,children:[n?n.map((a,$)=>e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset-${$}`,className:"form-fieldset",children:[a.legend&&e.jsx(M,{children:a.legend}),a.inputs.length!==0?a.inputs.map((x,N)=>e.jsxs(v.Fragment,{children:[x.type==="textarea"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),(x.type==="radio"||x.type==="checkbox")&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.type!=="textarea"&&x.type!=="radio"&&x.type!=="checkbox"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.editable&&x.editing&&e.jsx(I,{legend:`${a.legend} ${N+1}`,idx:N,editableInformation:x?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:x?.onClickSave,onClickCancelEdit:x?.onClickCancel,onClickDeleteEntry:x?.onClickDelete})]},`form-${s}-${N}`)):a.expandable?e.jsx(G,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.expandable&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]},`${a.legend}-${$}`)):e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset`,className:"form-fieldset",children:[o&&e.jsx(M,{children:o}),r.length!==0?r.map((a,$)=>e.jsxs(v.Fragment,{children:[a.type==="textarea"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.editable&&a.editing&&e.jsx(I,{legend:`${o} ${$+1}`,idx:$,editableInformation:a?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:a?.onClickSave,onClickCancelEdit:a?.onClickEdit,onClickDeleteEntry:a?.onClickDelete})]},`form-${s}-${$}`)):l?e.jsx(G,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),l&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]}),e.jsx(de,{id:s,hasSubmit:y,submitText:j,handleSubmit:T,hasEdit:C,editText:q,handleEdit:k,hasCancel:u,cancelText:D,handleCancel:L,hasDelete:p,deleteText:B,handleDelete:S}),e.jsx(be,{className:"children-container",children:A})]}),he=n=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,l=/^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(n)||l.test(n)||CSS.supports("color",n)},m=n=>{if(!he(n))throw new Error(`Invalid color: ${n}`);return n},ue={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},R={name:"light",colors:{text:m("#333446"),bg:m("#EEEEEE"),blue:m("#7F8CAA"),blue2:m("#80A6FF"),teal:m("#5b8280ff"),teal2:m("#AEEAE7"),gray:m("#AEAEAE"),information:m("#202234"),success:m("#123524"),warning:m("#F2C265"),error:m("#990000")}},K={name:"dark",colors:{bg:m("#333446"),text:m("#EEEEEE"),blue:m("#80A6FF"),blue2:m("#7F8CAA"),teal:m("#AEEAE7"),teal2:m("#5b8280ff"),gray:m("#D0D0DD"),information:m("#C9E6F0"),success:m("#9EDF9C"),warning:m("#FCFFC1"),error:m("#FAD4D4")}},O=v.createContext(void 0),fe=({children:n})=>{const[o,l]=v.useState(R),s=()=>{l(r=>r===R?K:R)};return e.jsx(O.Provider,{value:{currentTheme:o,toggleTheme:s},children:e.jsx(c.ThemeProvider,{theme:o,children:n})})},ge=()=>v.useContext(O);exports.DynamicForm=xe;exports.ThemeContext=O;exports.ThemeContextProvider=fe;exports.breakpoints=ue;exports.darkTheme=K;exports.lightTheme=R;exports.useTheme=ge;
+`,be=({fieldsets:n=null,legendText:o,isExpandable:i,id:s,formInputs:r,labelAndInputContainerClass:d,labelClass:m,inputClass:l,handleEditableInputEntryChange:b,handleAddingInputEntry:u,hasSubmit:y=!1,hasCancel:f=!1,hasDelete:p=!1,hasEdit:C=!1,submitText:j,handleSubmitForm:N,handleSubmit:T,cancelText:A,handleCancel:R,deleteText:B,handleDelete:S,editText:q,handleEdit:k,className:w,children:D})=>e.jsxs(me,{id:`${s}-form`,className:w,onSubmit:N,children:[n?n.map((a,$)=>e.jsxs(G,{children:[e.jsxs(H,{id:`${s}-form-fieldset-${$}`,className:"form-fieldset",children:[a.legend&&e.jsx(U,{children:a.legend}),a.inputs.length!==0?a.inputs.map((h,F)=>e.jsxs(v.Fragment,{children:[h.type==="textarea"&&e.jsx(E,{...h,id:h.id??`${a.legend}-input`,labelClass:m,inputClass:l,idx:F,className:d}),(h.type==="radio"||h.type==="checkbox")&&e.jsx(E,{...h,id:h.id??`${a.legend}-input`,labelClass:m,inputClass:l,idx:F,className:d}),h.type!=="textarea"&&h.type!=="radio"&&h.type!=="checkbox"&&e.jsx(E,{...h,id:h.id??`${a.legend}-input`,labelClass:m,inputClass:l,idx:F,className:d}),h.editable&&h.editing&&e.jsx(M,{legend:`${a.legend} ${F+1}`,idx:F,editableInformation:h?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:h?.onClickSave,onClickCancelEdit:h?.onClickCancel,onClickDeleteEntry:h?.onClickDelete})]},`form-${s}-${F}`)):a.expandable?e.jsx(J,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.expandable&&e.jsx(K,{className:"add-input-button-space",children:e.jsx(g,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]},`${a.legend}-${$}`)):e.jsxs(G,{children:[e.jsxs(H,{id:`${s}-form-fieldset`,className:"form-fieldset",children:[o&&e.jsx(U,{children:o}),r.length!==0?r.map((a,$)=>e.jsxs(v.Fragment,{children:[a.type==="textarea"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),a.editable&&a.editing&&e.jsx(M,{legend:`${o} ${$+1}`,idx:$,editableInformation:a?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:a?.onClickSave,onClickCancelEdit:a?.onClickEdit,onClickDeleteEntry:a?.onClickDelete})]},`form-${s}-${$}`)):i?e.jsx(J,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),i&&e.jsx(K,{className:"add-input-button-space",children:e.jsx(g,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]}),e.jsx(de,{id:s,hasSubmit:y,submitText:j,handleSubmit:T,hasEdit:C,editText:q,handleEdit:k,hasCancel:f,cancelText:A,handleCancel:R,hasDelete:p,deleteText:B,handleDelete:S}),e.jsx(xe,{className:"children-container",children:D})]}),he=n=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,i=/^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(n)||i.test(n)||CSS.supports("color",n)},x=n=>{if(!he(n))throw new Error(`Invalid color: ${n}`);return n},fe={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},L={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")}},Q={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")}},O=v.createContext(void 0),ge=({children:n})=>{const[o,i]=v.useState(L),s=()=>{i(r=>r===L?Q:L)};return e.jsx(O.Provider,{value:{currentTheme:o,toggleTheme:s},children:e.jsx(c.ThemeProvider,{theme:o,children:n})})},ue=()=>v.useContext(O);exports.DynamicForm=be;exports.ThemeContext=O;exports.ThemeContextProvider=ge;exports.breakpoints=fe;exports.darkTheme=Q;exports.lightTheme=L;exports.useTheme=ue;

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

@@ -1,6 +1,6 @@
-import { jsx as e, jsxs as u, Fragment as Q } from "react/jsx-runtime";
-import W, { forwardRef as V, createContext as X, useState as Y, useContext as Z } from "react";
-import c, { ThemeProvider as _ } from "styled-components";
+import { jsx as e, jsxs as g, Fragment as V } from "react/jsx-runtime";
+import W, { forwardRef as X, createContext as Y, useState as Z, useContext as _ } from "react";
+import s, { ThemeProvider as I } from "styled-components";
 const t = {
   fonts: {
     secondary: "Raleway",
@@ -32,7 +32,7 @@ const t = {
     thin: "0.0625rem",
     light: "0.125rem"
   }
-}, ee = c.button`
+}, ee = s.button`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -58,15 +58,15 @@ const t = {
     & .button-icon-text-space svg {
         max-width: 100%;
     }
-`, te = c.div`
+`, te = s.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-`, ne = c.img`
+`, ne = s.img`
     maxwidth: 100%;
-`, ae = c.span`
+`, ae = s.span`
     font-size: ${t.fontSize.xsmall};
     font-weight: ${t.fontWeight.medium};
     font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
@@ -76,38 +76,38 @@ const t = {
 `, x = ({
   onClick: n,
   id: o,
-  buttonType: i,
-  source: l,
+  buttonType: l,
+  source: i,
   svg: r,
-  alt: f = "alt-button-icon",
-  text: d = "",
-  className: s = "",
-  dataAttributes: b = {}
+  alt: d = "alt-button-icon",
+  text: m = "",
+  className: c = "",
+  dataAttributes: h = {}
 }) => /* @__PURE__ */ e(
   ee,
   {
     onClick: n,
     id: o,
-    type: i,
-    className: s,
-    ...b,
-    children: /* @__PURE__ */ u(te, { className: "button-icon-text-space", children: [
-      l ? /* @__PURE__ */ e(ne, { src: l, alt: f }) : r || "",
-      d && /* @__PURE__ */ e(ae, { id: o, children: d })
+    type: l,
+    className: c,
+    ...h,
+    children: /* @__PURE__ */ g(te, { className: "button-icon-text-space", children: [
+      i ? /* @__PURE__ */ e(ne, { src: i, alt: d }) : r || "",
+      m && /* @__PURE__ */ e(ae, { id: o, children: m })
     ] })
   }
-), oe = c.div`
+), oe = s.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
     margin-bottom: ${t.spacing.small};
-`, le = c.div`
+`, ie = s.div`
     display: flex;
     gap: ${t.spacing.xsmall};
     width: auto;
     height: auto;
-`, ie = c.label`
+`, le = s.label`
     display: flex;
     align-items: center;
     justify-content:center;
@@ -124,29 +124,29 @@ const t = {
         height: auto;
         object-fit: contain;
     }
-`, se = c.span`
+`, ce = s.span`
     font-weight: ${t.fontWeight.bolder};
-`, ce = c.div`
+`, se = s.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`, re = c.span`
+`, re = s.span`
     font-weight: ${t.fontWeight.light};
 `, P = ({
   htmlFor: n,
   textLabel: o,
-  additionalInfo: i,
-  $labelFlexDirection: l,
+  additionalInfo: l,
+  $labelFlexDirection: i,
   source: r,
-  svg: f,
-  className: d,
-  children: s
-}) => /* @__PURE__ */ u(ie, { htmlFor: n, className: d, $labelFlexDirection: l, children: [
-  (r || f) && /* @__PURE__ */ e(ce, { className: "label-icon-container", children: r ? /* @__PURE__ */ e("img", { src: r, alt: `${n}-label-icon` }) : f || "" }),
-  /* @__PURE__ */ e(se, { className: "main-label", children: o }),
-  i && /* @__PURE__ */ e(re, { className: "additional-info", children: i }),
-  s
-] }), q = c.input`
+  svg: d,
+  className: m,
+  children: c
+}) => /* @__PURE__ */ g(le, { htmlFor: n, className: m, $labelFlexDirection: i, children: [
+  (r || d) && /* @__PURE__ */ e(se, { className: "label-icon-container", children: r ? /* @__PURE__ */ e("img", { src: r, alt: `${n}-label-icon` }) : d || "" }),
+  /* @__PURE__ */ e(ce, { className: "main-label", children: o }),
+  l && /* @__PURE__ */ e(re, { className: "additional-info", children: l }),
+  c
+] }), q = s.input`
     display: flex;
     place-content: center;
     font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
@@ -163,7 +163,7 @@ const t = {
     &:focus{
         border: ${t.borderThickness.thin} solid ${({ theme: n }) => n.colors.teal};
     }
-`, de = c.textarea`
+`, de = s.textarea`
     display: flex;
     place-content: center;
     border: ${t.borderThickness.light} solid ${({ theme: n }) => n.colors.text};
@@ -176,246 +176,245 @@ const t = {
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`, j = V((n, o) => {
-  const { type: i, id: l, onChange: r, isRequired: f, dataAttributes: d, disabled: s, className: b } = n;
-  if (i === "textarea") {
-    const { rows: C = 5, cols: F = 30, value: T, ...S } = n;
+`, j = X((n, o) => {
+  const { type: l, id: i, onChange: r, isRequired: d, dataAttributes: m, disabled: c, className: h } = n;
+  if (l === "textarea") {
+    const { rows: N = 5, cols: F = 30, value: A, ...S } = n;
     return /* @__PURE__ */ e(
       de,
       {
-        id: l,
+        id: i,
         onChange: r,
-        value: T,
-        rows: C,
+        value: A,
+        rows: N,
         cols: F,
-        ...d,
-        className: b,
+        ...m,
+        className: h,
         ref: o,
-        disabled: s,
-        required: f
+        disabled: c,
+        required: d
       }
     );
   }
-  if (i === "radio" || i === "checkbox") {
-    const { checked: C, ...F } = n;
+  if (l === "radio" || l === "checkbox") {
+    const { checked: N, ...F } = n;
     return /* @__PURE__ */ e(
       q,
       {
         ref: o,
         type: "checkbox",
-        id: l,
-        checked: C,
+        id: i,
+        checked: N,
         onChange: r,
-        disabled: s,
-        className: b,
-        ...d
+        disabled: c,
+        className: h,
+        ...m
       }
     );
   }
-  const $ = n, { value: p, pattern: g, placeholderText: k, ...N } = $;
+  const $ = n, { value: p, pattern: u, placeholderText: k, ...C } = $;
   return /* @__PURE__ */ e(
     q,
     {
-      id: l,
-      name: l,
+      id: i,
+      name: i,
       placeholder: k,
       onChange: r,
       value: p,
-      type: i,
-      required: f,
-      ...d,
-      className: b,
+      type: l,
+      required: d,
+      ...m,
+      className: h,
       ref: o,
-      disabled: s,
-      pattern: g
+      disabled: c,
+      pattern: u
     }
   );
-}), A = (n) => {
+}), T = (n) => {
   const {
     className: o,
-    type: i,
-    id: l,
+    type: l,
+    id: i,
     textLabel: r,
-    additionalInfo: f,
-    $labelFlexDirection: d,
-    svg: s,
-    labelClass: b,
+    additionalInfo: d,
+    $labelFlexDirection: m,
+    svg: c,
+    labelClass: h,
     onChange: $,
     isRequired: p,
-    dataAttributes: g,
+    dataAttributes: u,
     inputClass: k,
-    ref: N,
-    disabled: C,
+    ref: C,
+    disabled: N,
     isEditable: F,
-    editIcon: T,
+    editIcon: A,
     onClickEdit: S,
     deleteIcon: L,
-    onClickDelete: R,
+    onClickDelete: B,
     idx: z,
-    children: B
+    children: R
   } = n;
-  return /* @__PURE__ */ u(oe, { className: `${o} ${l.replace("#", "")}-label-input-container`, children: [
-    i !== "radio" && i !== "checkbox" && /* @__PURE__ */ e(P, { htmlFor: l, textLabel: r, additionalInfo: f, $labelFlexDirection: d, svg: s, className: b }),
-    i !== "radio" && i !== "checkbox" && i === "textarea" && (() => {
+  return /* @__PURE__ */ g(oe, { className: `${o} ${i.replace("#", "")}-label-input-container`, children: [
+    l !== "radio" && l !== "checkbox" && /* @__PURE__ */ e(P, { htmlFor: i, textLabel: r, additionalInfo: d, $labelFlexDirection: m, svg: c, className: h }),
+    l !== "radio" && l !== "checkbox" && l === "textarea" && (() => {
       const { rows: w = 5, cols: E = 30, value: D, ...a } = n;
       return /* @__PURE__ */ e(
         j,
         {
-          id: l,
-          name: l,
+          id: i,
+          name: i,
           type: "textarea",
           isRequired: p,
           onChange: $,
           value: D,
           rows: w,
           cols: E,
-          ...g,
+          ...u,
           className: k,
-          ref: N,
-          disabled: C
+          ref: C,
+          disabled: N
         }
       );
     })(),
-    i !== "radio" && i !== "checkbox" && i !== "textarea" && (() => {
+    l !== "radio" && l !== "checkbox" && l !== "textarea" && (() => {
       const w = n, { value: E, pattern: D, placeholderText: a, ...y } = w;
       return /* @__PURE__ */ e(
         j,
         {
-          id: l,
-          name: l,
+          id: i,
+          name: i,
           placeholderText: a,
           onChange: $,
           value: E,
-          type: i,
+          type: l,
           isRequired: p,
-          ...g,
+          ...u,
           className: k,
-          ref: N,
-          disabled: C,
+          ref: C,
+          disabled: N,
           pattern: D
         }
       );
     })(),
-    (i === "radio" || i === "checkbox") && (() => {
+    (l === "radio" || l === "checkbox") && (() => {
       const { checked: w, ...E } = n;
-      return /* @__PURE__ */ u(Q, { children: [
+      return /* @__PURE__ */ g(V, { children: [
         /* @__PURE__ */ e(
           j,
           {
-            ref: N,
+            ref: C,
             type: "checkbox",
-            name: l,
-            id: l,
+            name: i,
+            id: i,
             isRequired: p,
             checked: w,
             onChange: $,
-            disabled: C,
+            disabled: N,
             className: k,
-            ...g
+            ...u
           }
         ),
-        /* @__PURE__ */ e(P, { htmlFor: l, textLabel: r, additionalInfo: f, $labelFlexDirection: d, svg: s, className: b })
+        /* @__PURE__ */ e(P, { htmlFor: i, textLabel: r, additionalInfo: d, $labelFlexDirection: m, svg: c, className: h })
       ] });
     })(),
-    "// * Radio inputs usually have labels next to them",
-    F && /* @__PURE__ */ u(le, { className: "input-edit-buttons", children: [
-      /* @__PURE__ */ e(x, { id: `editable-${l}-edit-btn`, svg: T, buttonType: "button", onClick: S, className: `edit-radio-${z}`, dataAttributes: g }),
-      /* @__PURE__ */ e(x, { id: `editable-${l}-delete-btn`, svg: L, buttonType: "button", onClick: R, className: `delete-radio-${z}`, dataAttributes: g })
+    F && /* @__PURE__ */ g(ie, { className: "input-edit-buttons", children: [
+      /* @__PURE__ */ e(x, { id: `editable-${i}-edit-btn`, svg: A, buttonType: "button", onClick: S, className: `edit-radio-${z}`, dataAttributes: u }),
+      /* @__PURE__ */ e(x, { id: `editable-${i}-delete-btn`, svg: L, buttonType: "button", onClick: B, className: `delete-radio-${z}`, dataAttributes: u })
     ] }),
-    B
+    R
   ] });
-}, me = c.fieldset`
+}, me = s.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, be = c.legend`
+`, be = s.legend`
     font-size: ${t.spacing.medium};
     font-weight: 500;
     margin: 0 auto ${t.spacing.small} auto;
     text-align: center;
     font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`, he = c.div`
+`, he = s.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
     margin-bottom: ${t.spacing.small};
-`, fe = c.div`
+`, fe = s.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, I = ({
+`, M = ({
   legend: n,
   idx: o,
-  editableInformation: i,
-  onChangeOfEditableOption: l,
+  editableInformation: l,
+  onChangeOfEditableOption: i,
   onClickSaveEdit: r,
-  onClickCancelEdit: f,
-  onClickDeleteEntry: d
-}) => /* @__PURE__ */ u(me, { className: "editable-selection-fieldset", children: [
+  onClickCancelEdit: d,
+  onClickDeleteEntry: m
+}) => /* @__PURE__ */ g(me, { className: "editable-selection-fieldset", children: [
   /* @__PURE__ */ e(be, { children: `${n} ${o + 1}` }),
-  i.map((s, b) => /* @__PURE__ */ e(he, { className: "editable-selection-container", children: /* @__PURE__ */ e(
+  l.map((c, h) => /* @__PURE__ */ e(he, { className: "editable-selection-container", children: /* @__PURE__ */ e(
     j,
     {
-      id: `editable-selection-${b}`,
-      name: `editable-selection-${b}`,
-      placeholderText: s.name.charAt(0).toUpperCase() + s.name.slice(1),
-      onChange: l,
-      value: s.info,
-      type: s.type,
+      id: `editable-selection-${h}`,
+      name: `editable-selection-${h}`,
+      placeholderText: c.name.charAt(0).toUpperCase() + c.name.slice(1),
+      onChange: i,
+      value: c.info,
+      type: c.type,
       isRequired: !0,
       className: "editable-selection",
       dataAttributes: {
-        "data-index": b,
+        "data-index": h,
         //* should be idx to correspond to radio button index and not with input increment
-        "data-key": s.info
+        "data-key": c.info
       }
     }
-  ) }, `${s.name}-${b}`)),
-  /* @__PURE__ */ u(fe, { className: "editable-selection-button-space", children: [
+  ) }, `${c.name}-${h}`)),
+  /* @__PURE__ */ g(fe, { className: "editable-selection-button-space", children: [
     /* @__PURE__ */ e(x, { id: `editable-selection-${o}-submit`, buttonType: "submit", text: "Save", onClick: r, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
-    /* @__PURE__ */ e(x, { id: `editable-selection-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: f, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
-    /* @__PURE__ */ e(x, { id: `editable-selection-${o}-delete`, buttonType: "button", text: "Delete", onClick: d, className: "editable-selection-btn", dataAttributes: { "data-index": o } })
+    /* @__PURE__ */ e(x, { id: `editable-selection-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
+    /* @__PURE__ */ e(x, { id: `editable-selection-${o}-delete`, buttonType: "button", text: "Delete", onClick: m, className: "editable-selection-btn", dataAttributes: { "data-index": o } })
   ] })
-] }), ue = c.div`
+] }), ge = s.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`, ge = ({
+`, ue = ({
   id: n,
   hasSubmit: o,
-  submitText: i,
-  handleSubmit: l,
+  submitText: l,
+  handleSubmit: i,
   hasEdit: r,
-  editText: f,
-  handleEdit: d,
-  hasCancel: s,
-  cancelText: b,
+  editText: d,
+  handleEdit: m,
+  hasCancel: c,
+  cancelText: h,
   handleCancel: $,
   hasDelete: p,
-  deleteText: g,
+  deleteText: u,
   handleDelete: k
-}) => /* @__PURE__ */ u(ue, { className: "form-main-button-container", children: [
-  o && /* @__PURE__ */ e(x, { id: `form-${n}-submit`, buttonType: "submit", text: i ?? "Submit", onClick: l, className: "submit-form-btn" }),
-  r && /* @__PURE__ */ e(x, { id: `form-${n}-edit`, buttonType: "button", text: f ?? "Edit", onClick: d, className: "edit-form-btn" }),
-  s && /* @__PURE__ */ e(x, { id: `form-${n}-cancel`, buttonType: "button", text: b ?? "Cancel", onClick: $, className: "cancel-form-btn" }),
-  p && /* @__PURE__ */ e(x, { id: `form-${n}-delete`, buttonType: "button", text: g ?? "Delete", onClick: k, className: "delete-form-btn" })
-] }), M = c.legend`
+}) => /* @__PURE__ */ g(ge, { className: "form-main-button-container", children: [
+  o && /* @__PURE__ */ e(x, { id: `form-${n}-submit`, buttonType: "submit", text: l ?? "Submit", onClick: i, className: "submit-form-btn" }),
+  r && /* @__PURE__ */ e(x, { id: `form-${n}-edit`, buttonType: "button", text: d ?? "Edit", onClick: m, className: "edit-form-btn" }),
+  c && /* @__PURE__ */ e(x, { id: `form-${n}-cancel`, buttonType: "button", text: h ?? "Cancel", onClick: $, className: "cancel-form-btn" }),
+  p && /* @__PURE__ */ e(x, { id: `form-${n}-delete`, buttonType: "button", text: u ?? "Delete", onClick: k, className: "delete-form-btn" })
+] }), U = s.legend`
     font-size: ${t.spacing.medium};
     font-weight: 500;
     margin-bottom: ${t.spacing.small};
     width: auto;
     text-align: center;
     font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`, U = c.fieldset`
+`, H = s.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, H = c.div`
+`, G = s.div`
     padding: ${t.spacing.small};
     height: auto;
     width: 100%;
-`, G = c.div`
+`, J = s.div`
     display: flex;
     justify-content: center;
     align-items: center;
@@ -424,176 +423,182 @@ const t = {
     font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
     font-size: ${t.fontSize.xsmall};
     font-weight: ${t.fontWeight.bold};
-`, xe = c.form`
+`, xe = s.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`, J = c.div`
+`, K = s.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, $e = c.div`
+`, $e = s.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`, Ne = ({
+`, Ce = ({
   fieldsets: n = null,
   //* if a form has differrent fieldsets
   legendText: o,
   //* if form has no fieldsets, depends if you have fieldset for solo form
-  isExpandable: i = !1,
+  isExpandable: l,
   //* if form has no fieldsets this is default to false - to add inputs
-  id: l,
+  id: i,
   formInputs: r,
   //* object that contains the input fields information to make it reusable
-  labelAndInputContainerClass: f,
-  labelClass: d,
-  inputClass: s,
-  handleEditableInputEntryChange: b,
+  labelAndInputContainerClass: d,
+  labelClass: m,
+  inputClass: c,
+  handleEditableInputEntryChange: h,
   //* handles change on editable inputs
   handleAddingInputEntry: $,
   hasSubmit: p = !1,
-  hasCancel: g = !1,
+  hasCancel: u = !1,
   hasDelete: k = !1,
-  hasEdit: N = !1,
-  submitText: C,
+  hasEdit: C = !1,
+  submitText: N,
   handleSubmitForm: F,
-  handleSubmit: T,
+  handleSubmit: A,
   cancelText: S,
   handleCancel: L,
-  deleteText: R,
+  deleteText: B,
   handleDelete: z,
-  editText: B,
+  editText: R,
   handleEdit: w,
   className: E,
   children: D
   //* if there are nodes to be inserted after submit/edit/cancel buttons usually in login or signup forms
-}) => /* @__PURE__ */ u(xe, { id: `${l}-form`, className: E, onSubmit: F, children: [
-  n ? n.map((a, y) => /* @__PURE__ */ u(H, { children: [
-    /* @__PURE__ */ u(U, { id: `${l}-form-fieldset-${y}`, className: "form-fieldset", children: [
-      a.legend && /* @__PURE__ */ e(M, { children: a.legend }),
-      a.inputs.length !== 0 ? a.inputs.map((h, v) => /* @__PURE__ */ u(W.Fragment, { children: [
-        h.type === "textarea" && /* @__PURE__ */ e(
-          A,
+}) => /* @__PURE__ */ g(xe, { id: `${i}-form`, className: E, onSubmit: F, children: [
+  n ? n.map((a, y) => /* @__PURE__ */ g(G, { children: [
+    /* @__PURE__ */ g(H, { id: `${i}-form-fieldset-${y}`, className: "form-fieldset", children: [
+      a.legend && /* @__PURE__ */ e(U, { children: a.legend }),
+      a.inputs.length !== 0 ? a.inputs.map((f, v) => /* @__PURE__ */ g(W.Fragment, { children: [
+        f.type === "textarea" && /* @__PURE__ */ e(
+          T,
           {
-            ...h,
-            id: h.id ?? `${a.legend}-input`,
-            labelClass: d,
-            inputClass: s,
-            idx: v
+            ...f,
+            id: f.id ?? `${a.legend}-input`,
+            labelClass: m,
+            inputClass: c,
+            idx: v,
+            className: d
           }
         ),
-        (h.type === "radio" || h.type === "checkbox") && /* @__PURE__ */ e(
-          A,
+        (f.type === "radio" || f.type === "checkbox") && /* @__PURE__ */ e(
+          T,
           {
-            ...h,
-            id: h.id ?? `${a.legend}-input`,
-            labelClass: d,
-            inputClass: s,
-            idx: v
+            ...f,
+            id: f.id ?? `${a.legend}-input`,
+            labelClass: m,
+            inputClass: c,
+            idx: v,
+            className: d
           }
         ),
-        h.type !== "textarea" && h.type !== "radio" && h.type !== "checkbox" && /* @__PURE__ */ e(
-          A,
+        f.type !== "textarea" && f.type !== "radio" && f.type !== "checkbox" && /* @__PURE__ */ e(
+          T,
           {
-            ...h,
-            id: h.id ?? `${a.legend}-input`,
-            labelClass: d,
-            inputClass: s,
-            idx: v
+            ...f,
+            id: f.id ?? `${a.legend}-input`,
+            labelClass: m,
+            inputClass: c,
+            idx: v,
+            className: d
           }
         ),
-        h.editable && h.editing && /* @__PURE__ */ e(
-          I,
+        f.editable && f.editing && /* @__PURE__ */ e(
+          M,
           {
             legend: `${a.legend} ${v + 1}`,
             idx: v,
-            editableInformation: h?.editableInformation,
-            onChangeOfEditableOption: b,
-            onClickSaveEdit: h?.onClickSave,
-            onClickCancelEdit: h?.onClickCancel,
-            onClickDeleteEntry: h?.onClickDelete
+            editableInformation: f?.editableInformation,
+            onChangeOfEditableOption: h,
+            onClickSaveEdit: f?.onClickSave,
+            onClickCancelEdit: f?.onClickCancel,
+            onClickDeleteEntry: f?.onClickDelete
           }
         )
-      ] }, `form-${l}-${v}`)) : a.expandable ? /* @__PURE__ */ e(G, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
+      ] }, `form-${i}-${v}`)) : a.expandable ? /* @__PURE__ */ e(J, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
     ] }),
-    a.expandable && /* @__PURE__ */ e(J, { className: "add-input-button-space", children: /* @__PURE__ */ e(x, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
-  ] }, `${a.legend}-${y}`)) : /* @__PURE__ */ u(H, { children: [
-    /* @__PURE__ */ u(U, { id: `${l}-form-fieldset`, className: "form-fieldset", children: [
-      o && /* @__PURE__ */ e(M, { children: o }),
-      r.length !== 0 ? r.map((a, y) => /* @__PURE__ */ u(W.Fragment, { children: [
+    a.expandable && /* @__PURE__ */ e(K, { className: "add-input-button-space", children: /* @__PURE__ */ e(x, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
+  ] }, `${a.legend}-${y}`)) : /* @__PURE__ */ g(G, { children: [
+    /* @__PURE__ */ g(H, { id: `${i}-form-fieldset`, className: "form-fieldset", children: [
+      o && /* @__PURE__ */ e(U, { children: o }),
+      r.length !== 0 ? r.map((a, y) => /* @__PURE__ */ g(W.Fragment, { children: [
         a.type === "textarea" && /* @__PURE__ */ e(
-          A,
+          T,
           {
             ...a,
             id: a.id ?? `${o}-input`,
-            labelClass: d,
-            inputClass: s,
-            idx: y
+            labelClass: m,
+            inputClass: c,
+            idx: y,
+            className: d
           }
         ),
         (a.type === "radio" || a.type === "checkbox") && /* @__PURE__ */ e(
-          A,
+          T,
           {
             ...a,
             id: a.id ?? `${o}-input`,
-            labelClass: d,
-            inputClass: s,
-            idx: y
+            labelClass: m,
+            inputClass: c,
+            idx: y,
+            className: d
           }
         ),
         a.type !== "textarea" && a.type !== "radio" && a.type !== "checkbox" && /* @__PURE__ */ e(
-          A,
+          T,
           {
             ...a,
             id: a.id ?? `${o}-input`,
-            labelClass: d,
-            inputClass: s,
-            idx: y
+            labelClass: m,
+            inputClass: c,
+            idx: y,
+            className: d
           }
         ),
         a.editable && a.editing && /* @__PURE__ */ e(
-          I,
+          M,
           {
             legend: `${o} ${y + 1}`,
             idx: y,
             editableInformation: a?.editableInformation,
-            onChangeOfEditableOption: b,
+            onChangeOfEditableOption: h,
             onClickSaveEdit: a?.onClickSave,
             onClickCancelEdit: a?.onClickEdit,
             onClickDeleteEntry: a?.onClickDelete
           }
         )
-      ] }, `form-${l}-${y}`)) : i ? /* @__PURE__ */ e(G, { children: `No entry yet on ${o}. Please click "+" button to add` }) : ""
+      ] }, `form-${i}-${y}`)) : l ? /* @__PURE__ */ e(J, { children: `No entry yet on ${o}. Please click "+" button to add` }) : ""
     ] }),
-    i && /* @__PURE__ */ e(J, { className: "add-input-button-space", children: /* @__PURE__ */ e(x, { id: `expand-${o}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
+    l && /* @__PURE__ */ e(K, { className: "add-input-button-space", children: /* @__PURE__ */ e(x, { id: `expand-${o}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
   ] }),
   /* @__PURE__ */ e(
-    ge,
+    ue,
     {
-      id: l,
+      id: i,
       hasSubmit: p,
-      submitText: C,
-      handleSubmit: T,
-      hasEdit: N,
-      editText: B,
+      submitText: N,
+      handleSubmit: A,
+      hasEdit: C,
+      editText: R,
       handleEdit: w,
-      hasCancel: g,
+      hasCancel: u,
       cancelText: S,
       handleCancel: L,
       hasDelete: k,
-      deleteText: R,
+      deleteText: B,
       handleDelete: z
     }
   ),
   /* @__PURE__ */ e($e, { className: "children-container", children: D })
 ] }), ye = (n) => {
-  const o = /^#([0-9A-Fa-f]{3}){1,2}$/, i = /^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(n) || i.test(n) || CSS.supports("color", n);
-}, m = (n) => {
+  const o = /^#([0-9A-Fa-f]{3}){1,2}$/, l = /^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(n) || l.test(n) || CSS.supports("color", n);
+}, b = (n) => {
   if (!ye(n)) throw new Error(`Invalid color: ${n}`);
   return n;
 }, Fe = {
@@ -608,42 +613,42 @@ const t = {
 }, O = {
   name: "light",
   colors: {
-    text: m("#333446"),
-    bg: m("#EEEEEE"),
-    blue: m("#7F8CAA"),
-    blue2: m("#80A6FF"),
-    teal: m("#5b8280ff"),
-    teal2: m("#AEEAE7"),
-    gray: m("#AEAEAE"),
-    information: m("#202234"),
-    success: m("#123524"),
-    warning: m("#F2C265"),
-    error: m("#990000")
+    text: b("#333446"),
+    bg: b("#EEEEEE"),
+    blue: b("#7F8CAA"),
+    blue2: b("#80A6FF"),
+    teal: b("#5b8280ff"),
+    teal2: b("#AEEAE7"),
+    gray: b("#AEAEAE"),
+    information: b("#202234"),
+    success: b("#123524"),
+    warning: b("#F2C265"),
+    error: b("#990000")
   }
 }, pe = {
   name: "dark",
   colors: {
-    bg: m("#333446"),
-    text: m("#EEEEEE"),
-    blue: m("#80A6FF"),
-    blue2: m("#7F8CAA"),
-    teal: m("#AEEAE7"),
-    teal2: m("#5b8280ff"),
-    gray: m("#D0D0DD"),
-    information: m("#C9E6F0"),
-    success: m("#9EDF9C"),
-    warning: m("#FCFFC1"),
-    error: m("#FAD4D4")
+    bg: b("#333446"),
+    text: b("#EEEEEE"),
+    blue: b("#80A6FF"),
+    blue2: b("#7F8CAA"),
+    teal: b("#AEEAE7"),
+    teal2: b("#5b8280ff"),
+    gray: b("#D0D0DD"),
+    information: b("#C9E6F0"),
+    success: b("#9EDF9C"),
+    warning: b("#FCFFC1"),
+    error: b("#FAD4D4")
   }
-}, K = X(void 0), Ee = ({ children: n }) => {
-  const [o, i] = Y(O), l = () => {
-    i((r) => r === O ? pe : O);
+}, Q = Y(void 0), Ee = ({ children: n }) => {
+  const [o, l] = Z(O), i = () => {
+    l((r) => r === O ? pe : O);
   };
-  return /* @__PURE__ */ e(K.Provider, { value: { currentTheme: o, toggleTheme: l }, children: /* @__PURE__ */ e(_, { theme: o, children: n }) });
-}, ve = () => Z(K);
+  return /* @__PURE__ */ e(Q.Provider, { value: { currentTheme: o, toggleTheme: i }, children: /* @__PURE__ */ e(I, { theme: o, children: n }) });
+}, ve = () => _(Q);
 export {
-  Ne as DynamicForm,
-  K as ThemeContext,
+  Ce as DynamicForm,
+  Q as ThemeContext,
   Ee as ThemeContextProvider,
   Fe as breakpoints,
   pe as darkTheme,

package/dist/type/propTypes.d.ts

@@ -11,7 +11,7 @@ type stringType = string | undefined;
 type dataAttributesType = Record<string, string | number | boolean> | undefined;
 type ButtonType = 'button' | 'submit';
 export interface ButtonProps {
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
     id: string;
     buttonType: ButtonType;
     source?: string;
@@ -25,7 +25,7 @@ export interface ButtonProps {
 declare const InputTypes: readonly ["text", "password", "email", "number", "tel", "url", "search", "date", "file", "hidden"];
 interface BaseInput {
     id: string;
-    onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     isRequired: boolean;
     dataAttributes?: dataAttributesType;
     disabled?: boolean | undefined;
@@ -98,7 +98,7 @@ export interface NestedEditableOptionProps {
     legend: string;
     idx: number;
     editableInformation: EditableInformation[];
-    onChangeOfEditableOption: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onChangeOfEditableOption: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     onClickSaveEdit: React.MouseEventHandler<HTMLButtonElement>;
     onClickCancelEdit: React.MouseEventHandler<HTMLButtonElement>;
     onClickDeleteEntry: React.MouseEventHandler<HTMLButtonElement>;
@@ -129,16 +129,27 @@ interface FieldsetShape {
     height: string;
     expandable: boolean;
 }
-export type DynamicFormProps = FormActionButtonsProps & LabeledInputProps & {
-    fieldsets: FieldsetShape[] | null;
+export type DynamicFormProps<T extends null, K extends boolean, E extends boolean> = FormActionButtonsProps & LabeledInputProps & {
+    fieldsets: FieldsetShape[] | null | T;
     id: string;
+    isExpandable: K;
+    handleSubmitForm: React.FormEventHandler<HTMLFormElement>;
+} & (T extends null ? {
     formInputs: inputEntryShape<boolean>[];
     legendText?: string;
-    isExpandable: boolean;
-    labelAndInputContainerClass: string;
-    handleSubmitForm: React.FormEventHandler<HTMLFormElement>;
+    labelAndInputContainerClass?: string;
+} : {
+    formInputs?: never;
+    legendText?: never;
+    labelAndInputContainerClass?: never;
+}) & (E extends true ? {
     handleEditableInputEntryChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+} : {
+    handleEditableInputEntryChange?: never;
+}) & (K extends true ? {
     handleAddingInputEntry: React.MouseEventHandler<HTMLButtonElement>;
-};
+} : {
+    handleAddingInputEntry?: never;
+});
 export {};
 //# sourceMappingURL=propTypes.d.ts.map

package/dist/type/propTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../src/type/propTypes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../src/type/propTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAErC,KAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAC,MAAM,GAAC,OAAO,CAAC,GAAG,SAAS,CAAA;AAE3E,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtC,MAAM,WAAW,WAAW;IACxB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtC,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACvC;AAED,QAAA,MAAM,UAAU,oGAAqG,CAAC;AAEtH,UAAU,SAAS;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAG,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,SAAS,CAAC;IACxF,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC5C,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC3C,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;CAC3B;AAED,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC3C,IAAI,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;IAG5E,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,CAAC;AAErE,MAAM,WAAW,UAAU;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;CAC1B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAC7B,CAAC,UAAU,GAAG,aAAa,GAAG,kBAAkB,CAAC,GAC/C,CAAC,UAAU,GAAG,YAAY,GAAG,kBAAkB,CAAC,GAChD,CAAC,UAAU,GAAG,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAEnD,MAAM,WAAW,sBAAsB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACzD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACzD,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAC5D;AAED,UAAU,mBAAmB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,yBAAyB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB,EAAE,mBAAmB,EAAE,CAAC;IAC3C,wBAAwB,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,SAAS,CAAC;IACvG,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC5D,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9D,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAClE;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,IAAI,iBAAiB,GAAG;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,CAAC;IACZ,mBAAmB,EAAE,mBAAmB,EAAE,CAAC;CAC9C,GAAG,CAAC,CAAC,SAAS,IAAI,GACb;IACE,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACxD,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAC7D,GAAG;IACA,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC;CACzB,CAAC,CAAA;AAEN,UAAU,aAAa;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,OAAO,EAAE,CAAC,SAAS,OAAO,IAAI,sBAAsB,GAAG,iBAAiB,GAAG;IAC9H,SAAS,EAAE,aAAa,EAAE,GAAG,IAAI,GAAG,CAAC,CAAC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,CAAC,CAAC;IAChB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;CAC7D,GAAG,CAAC,CAAC,SAAS,IAAI,GACb;IACE,UAAU,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACxC,GAAG;IACA,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,2BAA2B,CAAC,EAAE,KAAK,CAAC;CACvC,CACJ,GAAG,CAAC,CAAC,SAAS,IAAI,GACb;IACE,8BAA8B,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;CACpG,GAAG;IACA,8BAA8B,CAAC,EAAE,KAAK,CAAC;CAC1C,CACJ,GAAG,CAAC,CAAC,SAAS,IAAI,GACb;IACE,sBAAsB,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtE,GAAG;IACA,sBAAsB,CAAC,EAAE,KAAK,CAAC;CAClC,CACJ,CAAA"}

package/package.json

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