@kbgarcia8/react-dynamic-form 1.0.9 → 1.1.1

package/dist/components/atoms/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAA,MAAM,MAAM,GAAI,gFAUd,WAAW,4CAgBZ,CAAA;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAA,MAAM,MAAM,GAAI,gFAUd,WAAW,4CAoBZ,CAAA;AAED,eAAe,MAAM,CAAC"}

package/dist/components/atoms/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAExE,QAAA,MAAM,KAAK,2GAsDT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAExE,QAAA,MAAM,KAAK,2GA2DT,CAAC;AAEH,eAAe,KAAK,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"),n={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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),T=require("react"),c=require("styled-components"),n={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;
@@ -39,7 +39,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-`,g=({onClick:t,id:o,buttonType:i,source:s,svg:r,alt:d="alt-button-icon",text:m="",className:l="",dataAttributes:b={}})=>e.jsx(V,{onClick:t,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`
+`,$=({onClick:t,id:o,buttonType:i,source:s,svg:r,alt:d="alt-button-icon",text:b="",className:l="",dataAttributes:x={}})=>{const f=x?Object.fromEntries(Object.entries(x).map(([u,g])=>[`data-${u}`,g])):{};return e.jsx(V,{onClick:t,id:o,type:i,className:l,...f,children:e.jsxs(X,{className:"button-icon-text-space",children:[s?e.jsx(Y,{src:s,alt:d}):r||"",b&&e.jsx(Z,{id:o,children:b})]})})},_=c.div`
     display: flex;
     flex-direction: column;
     align-items: left;
@@ -75,7 +75,7 @@
     align-items: center;
 `,ae=c.span`
     font-weight: ${n.fontWeight.light};
-`,P=({htmlFor:t,textLabel:o,additionalInfo:i,$labelFlexDirection:s,source:r,svg:d,className:m,children:l})=>e.jsxs(ee,{htmlFor:t,className:m,$labelFlexDirection:s,children:[(r||d)&&e.jsx(ne,{className:"label-icon-container",children:r?e.jsx("img",{src:r,alt:`${t}-label-icon`}):d||""}),e.jsx(te,{className:"main-label",children:o}),i&&e.jsx(ae,{className:"additional-info",children:i}),l]}),W=c.input`
+`,P=({htmlFor:t,textLabel:o,additionalInfo:i,$labelFlexDirection:s,source:r,svg:d,className:b,children:l})=>e.jsxs(ee,{htmlFor:t,className:b,$labelFlexDirection:s,children:[(r||d)&&e.jsx(ne,{className:"label-icon-container",children:r?e.jsx("img",{src:r,alt:`${t}-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: ${n.fonts.secondary}, ${n.fonts.fallback};
@@ -105,7 +105,7 @@
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`,z=v.forwardRef((t,o)=>{const{type:i,id:s,onChange:r,isRequired:d,dataAttributes:m,disabled:l,className:b}=t;if(i==="textarea"){const{rows:j=5,cols:N=30,value:T,...A}=t;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}=t;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:l,className:b,...m})}const u=t,{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})}),F=t=>{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}=t;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}=t;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=t,{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}=t;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`
+`,L=T.forwardRef((t,o)=>{const{type:i,id:s,onChange:r,isRequired:d,dataAttributes:b,disabled:l,className:x}=t,f=b?Object.fromEntries(Object.entries(b).map(([j,k])=>[`data-${j}`,k])):{};if(i==="textarea"){const{rows:j=5,cols:k=30,value:D,...S}=t;return e.jsx(oe,{id:s,onChange:r,value:D,rows:j,cols:k,...f,className:x,ref:o,disabled:l,required:d})}if(i==="radio"||i==="checkbox"){const{checked:j,...k}=t;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:l,className:x,...f})}const u=t,{value:g,pattern:p,placeholderText:C,...w}=u;return e.jsx(W,{id:s,name:s,placeholder:C,onChange:r,value:g,type:i,required:d,...f,className:x,ref:o,disabled:l,pattern:p})}),v=t=>{const{className:o,type:i,id:s,textLabel:r,additionalInfo:d,$labelFlexDirection:b,svg:l,labelClass:x,onChange:f,isRequired:u,dataAttributes:g,inputClass:p,ref:C,disabled:w,isEditable:j,editIcon:k,onClickEdit:D,deleteIcon:S,onClickDelete:R,idx:z,children:B}=t;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:b,svg:l,className:x}),i!=="radio"&&i!=="checkbox"&&i==="textarea"&&(()=>{const{rows:N=5,cols:E=30,value:A,...a}=t;return e.jsx(L,{id:s,name:s,type:"textarea",isRequired:u,onChange:f,value:A,rows:N,cols:E,dataAttributes:g,className:p,ref:C,disabled:w})})(),i!=="radio"&&i!=="checkbox"&&i!=="textarea"&&(()=>{const N=t,{value:E,pattern:A,placeholderText:a,...y}=N;return e.jsx(L,{id:s,name:s,placeholderText:a,onChange:f,value:E,type:i,isRequired:u,dataAttributes:g,className:p,ref:C,disabled:w,pattern:A})})(),(i==="radio"||i==="checkbox")&&(()=>{const{checked:N,...E}=t;return e.jsxs(e.Fragment,{children:[e.jsx(L,{ref:C,type:"checkbox",name:s,id:s,isRequired:u,checked:N,onChange:f,disabled:w,className:p,dataAttributes:g}),e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:d,$labelFlexDirection:b,svg:l,className:x})]})})(),j&&e.jsxs(I,{className:"input-edit-buttons",children:[e.jsx($,{id:`editable-${s}-edit-btn`,svg:k,buttonType:"button",onClick:D,className:`edit-radio-${z}`,dataAttributes:g}),e.jsx($,{id:`editable-${s}-delete-btn`,svg:S,buttonType:"button",onClick:R,className:`delete-radio-${z}`,dataAttributes:g})]}),B]})},se=c.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
@@ -125,11 +125,11 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,M=({legend:t,idx:o,editableInformation:i,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:m})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(ie,{children:`${t} ${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`
+`,M=({legend:t,idx:o,editableInformation:i,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(ie,{children:`${t} ${o+1}`}),i.map((l,x)=>e.jsx(le,{className:"editable-selection-container",children:e.jsx(L,{id:`editable-selection-${x}`,name:`editable-selection-${x}`,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":x,"data-key":l.info}})},`${l.name}-${x}`)),e.jsxs(ce,{className:"editable-selection-button-space",children:[e.jsx($,{id:`editable-selection-${o}-submit`,buttonType:"submit",text:"Save",onClick:r,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx($,{id:`editable-selection-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx($,{id:`editable-selection-${o}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-selection-btn",dataAttributes:{"data-index":o}})]})]}),re=c.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`,de=({id:t,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-${t}-submit`,buttonType:"submit",text:i??"Submit",onClick:s,className:"submit-form-btn"}),r&&e.jsx(g,{id:`form-${t}-edit`,buttonType:"button",text:d??"Edit",onClick:m,className:"edit-form-btn"}),l&&e.jsx(g,{id:`form-${t}-cancel`,buttonType:"button",text:b??"Cancel",onClick:u,className:"cancel-form-btn"}),y&&e.jsx(g,{id:`form-${t}-delete`,buttonType:"button",text:f??"Delete",onClick:p,className:"delete-form-btn"})]}),U=c.legend`
+`,de=({id:t,hasSubmit:o,submitText:i,handleSubmit:s,hasEdit:r,editText:d,handleEdit:b,hasCancel:l,cancelText:x,handleCancel:f,hasDelete:u,deleteText:g,handleDelete:p})=>e.jsxs(re,{className:"form-main-button-container",children:[o&&e.jsx($,{id:`form-${t}-submit`,buttonType:"submit",text:i??"Submit",onClick:s,className:"submit-form-btn"}),r&&e.jsx($,{id:`form-${t}-edit`,buttonType:"button",text:d??"Edit",onClick:b,className:"edit-form-btn"}),l&&e.jsx($,{id:`form-${t}-cancel`,buttonType:"button",text:x??"Cancel",onClick:f,className:"cancel-form-btn"}),u&&e.jsx($,{id:`form-${t}-delete`,buttonType:"button",text:g??"Delete",onClick:p,className:"delete-form-btn"})]}),U=c.legend`
     font-size: ${n.spacing.medium};
     font-weight: 500;
     margin-bottom: ${n.spacing.small};
@@ -162,10 +162,10 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,xe=c.div`
+`,be=c.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,be=({fieldsets:t=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:[t?t.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,E)=>e.jsxs(v.Fragment,{children:[h.type==="textarea"&&e.jsx(F,{...h,id:h.id??`${a.legend}-input`,labelClass:m,inputClass:l,idx:E,className:d}),(h.type==="radio"||h.type==="checkbox")&&e.jsx(F,{...h,id:h.id??`${a.legend}-input`,labelClass:m,inputClass:l,idx:E,className:d}),h.type!=="textarea"&&h.type!=="radio"&&h.type!=="checkbox"&&e.jsx(F,{...h,id:h.id??`${a.legend}-input`,labelClass:m,inputClass:l,idx:E,className:d}),h.isEditable&&h.editing&&e.jsx(M,{legend:`${a.legend} ${E+1}`,idx:E,editableInformation:h?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:h?.onClickSave,onClickCancelEdit:h?.onClickCancel,onClickDeleteEntry:h?.onClickDelete})]},`form-${s}-${E}`)):a.isExpandable?e.jsx(J,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.isExpandable&&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}),!t&&r&&r.length!==0?r.map((a,$)=>e.jsxs(v.Fragment,{children:[a.type==="textarea"&&e.jsx(F,{...a,id:a.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(F,{...a,id:a.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(F,{...a,id:a.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),a.isEditable&&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=t=>{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(t)||i.test(t)||CSS.supports("color",t)},x=t=>{if(!he(t))throw new Error(`Invalid color: ${t}`);return t},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:t})=>{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:t})})},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;
+`,xe=({fieldsets:t=null,legendText:o,isExpandable:i,id:s,formInputs:r,labelAndInputContainerClass:d,labelClass:b,inputClass:l,handleEditableInputEntryChange:x,handleAddingInputEntry:f,hasSubmit:u=!1,hasCancel:g=!1,hasDelete:p=!1,hasEdit:C=!1,submitText:w,handleSubmitForm:j,handleSubmit:k,cancelText:D,handleCancel:S,deleteText:R,handleDelete:z,editText:B,handleEdit:N,className:E,children:A})=>e.jsxs(me,{id:`${s}-form`,className:E,onSubmit:j,children:[t?t.map((a,y)=>e.jsxs(G,{children:[e.jsxs(H,{id:`${s}-form-fieldset-${y}`,className:"form-fieldset",children:[a.legend&&e.jsx(U,{children:a.legend}),a.inputs.length!==0?a.inputs.map((h,F)=>e.jsxs(T.Fragment,{children:[h.type==="textarea"&&e.jsx(v,{...h,id:h.id??`${a.legend}-input`,labelClass:b,inputClass:l,idx:F,className:d}),(h.type==="radio"||h.type==="checkbox")&&e.jsx(v,{...h,id:h.id??`${a.legend}-input`,labelClass:b,inputClass:l,idx:F,className:d}),h.type!=="textarea"&&h.type!=="radio"&&h.type!=="checkbox"&&e.jsx(v,{...h,id:h.id??`${a.legend}-input`,labelClass:b,inputClass:l,idx:F,className:d}),h.isEditable&&h.editing&&e.jsx(M,{legend:`${a.legend} ${F+1}`,idx:F,editableInformation:h?.editableInformation,onChangeOfEditableOption:x,onClickSaveEdit:h?.onClickSave,onClickCancelEdit:h?.onClickCancel,onClickDeleteEntry:h?.onClickDelete})]},`form-${s}-${F}`)):a.isExpandable?e.jsx(J,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.isExpandable&&e.jsx(K,{className:"add-input-button-space",children:e.jsx($,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:f,className:"add-input-entry"})})]},`${a.legend}-${y}`)):e.jsxs(G,{children:[e.jsxs(H,{id:`${s}-form-fieldset`,className:"form-fieldset",children:[o&&e.jsx(U,{children:o}),!t&&r&&r.length!==0?r.map((a,y)=>e.jsxs(T.Fragment,{children:[a.type==="textarea"&&e.jsx(v,{...a,id:a.id??`${o}-input`,labelClass:b,inputClass:l,idx:y,className:d}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(v,{...a,id:a.id??`${o}-input`,labelClass:b,inputClass:l,idx:y,className:d}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(v,{...a,id:a.id??`${o}-input`,labelClass:b,inputClass:l,idx:y,className:d}),a.isEditable&&a.editing&&e.jsx(M,{legend:`${o} ${y+1}`,idx:y,editableInformation:a?.editableInformation,onChangeOfEditableOption:x,onClickSaveEdit:a?.onClickSave,onClickCancelEdit:a?.onClickEdit,onClickDeleteEntry:a?.onClickDelete})]},`form-${s}-${y}`)):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($,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:f,className:"add-input-entry"})})]}),e.jsx(de,{id:s,hasSubmit:u,submitText:w,handleSubmit:k,hasEdit:C,editText:B,handleEdit:N,hasCancel:g,cancelText:D,handleCancel:S,hasDelete:p,deleteText:R,handleDelete:z}),e.jsx(be,{className:"children-container",children:A})]}),he=t=>{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(t)||i.test(t)||CSS.supports("color",t)},m=t=>{if(!he(t))throw new Error(`Invalid color: ${t}`);return t},fe={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},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")}},Q={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")}},q=T.createContext(void 0),ge=({children:t})=>{const[o,i]=T.useState(O),s=()=>{i(r=>r===O?Q:O)};return e.jsx(q.Provider,{value:{currentTheme:o,toggleTheme:s},children:e.jsx(c.ThemeProvider,{theme:o,children:t})})},ue=()=>T.useContext(q);exports.DynamicForm=xe;exports.ThemeContext=q;exports.ThemeContextProvider=ge;exports.breakpoints=fe;exports.darkTheme=Q;exports.lightTheme=O;exports.useTheme=ue;

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

@@ -1,7 +1,7 @@
 import { jsx as t, 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 n = {
+const a = {
   fonts: {
     secondary: "Raleway",
     tertiary: "Lato",
@@ -38,9 +38,9 @@ const n = {
     justify-content: center;
     background-color: ${({ theme: e }) => e.colors.blue || "blue"};
     color: ${({ theme: e }) => e.colors.bg || "white"};
-    border: ${n.borderThickness.light} solid ${({ theme: e }) => e.colors.text || "black"};
-    border-radius: ${n.borderRadius.xlarge};
-    padding: ${n.spacing.xxxsmall} ${n.spacing.small};
+    border: ${a.borderThickness.light} solid ${({ theme: e }) => e.colors.text || "black"};
+    border-radius: ${a.borderRadius.xlarge};
+    padding: ${a.spacing.xxxsmall} ${a.spacing.small};
     margin: 0.125rem;
     width: auto;
     cursor: pointer;
@@ -48,7 +48,7 @@ const n = {
 
     &:hover {
         background-color: lightblue;
-        border: ${n.borderThickness.light} solid gray;
+        border: ${a.borderThickness.light} solid gray;
     }
 
     & .button-icon-text-space {
@@ -64,47 +64,52 @@ const n = {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-`, ne = s.img`
+`, ae = s.img`
     maxwidth: 100%;
-`, ae = s.span`
-    font-size: ${n.fontSize.xsmall};
-    font-weight: ${n.fontWeight.medium};
-    font-family: ${n.fonts.tertiary}, ${n.fonts.fallback};
+`, ne = s.span`
+    font-size: ${a.fontSize.xsmall};
+    font-weight: ${a.fontWeight.medium};
+    font-family: ${a.fonts.tertiary}, ${a.fonts.fallback};
     display: flex;
     align-items: center;
     justify-content: center;
-`, x = ({
+`, y = ({
   onClick: e,
   id: o,
   buttonType: l,
   source: i,
   svg: r,
   alt: d = "alt-button-icon",
-  text: m = "",
+  text: b = "",
   className: c = "",
   dataAttributes: h = {}
-}) => /* @__PURE__ */ t(
-  ee,
-  {
-    onClick: e,
-    id: o,
-    type: l,
-    className: c,
-    ...h,
-    children: /* @__PURE__ */ g(te, { className: "button-icon-text-space", children: [
-      i ? /* @__PURE__ */ t(ne, { src: i, alt: d }) : r || "",
-      m && /* @__PURE__ */ t(ae, { id: o, children: m })
-    ] })
-  }
-), oe = s.div`
+}) => {
+  const u = h ? Object.fromEntries(
+    Object.entries(h).map(([$, x]) => [`data-${$}`, x])
+  ) : {};
+  return /* @__PURE__ */ t(
+    ee,
+    {
+      onClick: e,
+      id: o,
+      type: l,
+      className: c,
+      ...u,
+      children: /* @__PURE__ */ g(te, { className: "button-icon-text-space", children: [
+        i ? /* @__PURE__ */ t(ae, { src: i, alt: d }) : r || "",
+        b && /* @__PURE__ */ t(ne, { id: o, children: b })
+      ] })
+    }
+  );
+}, oe = s.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${n.spacing.small};
+    margin-bottom: ${a.spacing.small};
 `, ie = s.div`
     display: flex;
-    gap: ${n.spacing.xsmall};
+    gap: ${a.spacing.xsmall};
     width: auto;
     height: auto;
 `, le = s.label`
@@ -113,10 +118,10 @@ const n = {
     justify-content:center;
     height: auto;
     flex-direction:  ${(e) => e.$labelFlexDirection || "column"};
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
-    font-weight: ${n.fontWeight.bold};
-    gap: ${n.spacing.xxsmall};
+    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
+    font-size: ${a.fontSize.xsmall};
+    font-weight: ${a.fontWeight.bold};
+    gap: ${a.spacing.xxsmall};
     
     & .label-icon-container img,
     & .label-icon-container svg {
@@ -125,13 +130,13 @@ const n = {
         object-fit: contain;
     }
 `, ce = s.span`
-    font-weight: ${n.fontWeight.bolder};
+    font-weight: ${a.fontWeight.bolder};
 `, se = s.div`
     max-width: 100%;
     display: flex;
     align-items: center;
 `, re = s.span`
-    font-weight: ${n.fontWeight.light};
+    font-weight: ${a.fontWeight.light};
 `, P = ({
   htmlFor: e,
   textLabel: o,
@@ -139,9 +144,9 @@ const n = {
   $labelFlexDirection: i,
   source: r,
   svg: d,
-  className: m,
+  className: b,
   children: c
-}) => /* @__PURE__ */ g(le, { htmlFor: e, className: m, $labelFlexDirection: i, children: [
+}) => /* @__PURE__ */ g(le, { htmlFor: e, className: b, $labelFlexDirection: i, children: [
   (r || d) && /* @__PURE__ */ t(se, { className: "label-icon-container", children: r ? /* @__PURE__ */ t("img", { src: r, alt: `${e}-label-icon` }) : d || "" }),
   /* @__PURE__ */ t(ce, { className: "main-label", children: o }),
   l && /* @__PURE__ */ t(re, { className: "additional-info", children: l }),
@@ -149,37 +154,39 @@ const n = {
 ] }), q = s.input`
     display: flex;
     place-content: center;
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
+    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
+    font-size: ${a.fontSize.xsmall};
     line-height: 1.75;
-    padding: ${n.spacing.xxxsmall} ${n.spacing.xsmall};
+    padding: ${a.spacing.xxxsmall} ${a.spacing.xsmall};
     max-width: 100%;
     height: auto;
     background-color: #FFFFFF;
     outline: none;
-    border: ${n.borderThickness.thin} solid #000000;
-    border-radius: ${n.borderRadius.xsmall};
+    border: ${a.borderThickness.thin} solid #000000;
+    border-radius: ${a.borderRadius.xsmall};
 
     &:focus{
-        border: ${n.borderThickness.thin} solid ${({ theme: e }) => e.colors.teal};
+        border: ${a.borderThickness.thin} solid ${({ theme: e }) => e.colors.teal};
     }
 `, de = s.textarea`
     display: flex;
     place-content: center;
-    border: ${n.borderThickness.light} solid ${({ theme: e }) => e.colors.text};
-    border-radius: ${n.borderRadius.small};
+    border: ${a.borderThickness.light} solid ${({ theme: e }) => e.colors.text};
+    border-radius: ${a.borderRadius.small};
     outline: none;
-    line-height: ${n.spacing.small};
-    padding: ${n.spacing.xxxsmall};
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
+    line-height: ${a.spacing.small};
+    padding: ${a.spacing.xxxsmall};
+    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
+    font-size: ${a.fontSize.xsmall};
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`, j = X((e, o) => {
-  const { type: l, id: i, onChange: r, isRequired: d, dataAttributes: m, disabled: c, className: h } = e;
+`, L = X((e, o) => {
+  const { type: l, id: i, onChange: r, isRequired: d, dataAttributes: b, disabled: c, className: h } = e, u = b ? Object.fromEntries(
+    Object.entries(b).map(([N, w]) => [`data-${N}`, w])
+  ) : {};
   if (l === "textarea") {
-    const { rows: N = 5, cols: E = 30, value: A, ...S } = e;
+    const { rows: N = 5, cols: w = 30, value: A, ...j } = e;
     return /* @__PURE__ */ t(
       de,
       {
@@ -187,8 +194,8 @@ const n = {
         onChange: r,
         value: A,
         rows: N,
-        cols: E,
-        ...m,
+        cols: w,
+        ...u,
         className: h,
         ref: o,
         disabled: c,
@@ -197,7 +204,7 @@ const n = {
     );
   }
   if (l === "radio" || l === "checkbox") {
-    const { checked: N, ...E } = e;
+    const { checked: N, ...w } = e;
     return /* @__PURE__ */ t(
       q,
       {
@@ -208,137 +215,137 @@ const n = {
         onChange: r,
         disabled: c,
         className: h,
-        ...m
+        ...u
       }
     );
   }
-  const $ = e, { value: p, pattern: u, placeholderText: k, ...C } = $;
+  const $ = e, { value: x, pattern: k, placeholderText: C, ...F } = $;
   return /* @__PURE__ */ t(
     q,
     {
       id: i,
       name: i,
-      placeholder: k,
+      placeholder: C,
       onChange: r,
-      value: p,
+      value: x,
       type: l,
       required: d,
-      ...m,
+      ...u,
       className: h,
       ref: o,
       disabled: c,
-      pattern: u
+      pattern: k
     }
   );
-}), T = (e) => {
+}), D = (e) => {
   const {
     className: o,
     type: l,
     id: i,
     textLabel: r,
     additionalInfo: d,
-    $labelFlexDirection: m,
+    $labelFlexDirection: b,
     svg: c,
     labelClass: h,
-    onChange: $,
-    isRequired: p,
-    dataAttributes: u,
+    onChange: u,
+    isRequired: $,
+    dataAttributes: x,
     inputClass: k,
     ref: C,
-    disabled: N,
-    isEditable: E,
-    editIcon: A,
-    onClickEdit: S,
-    deleteIcon: L,
+    disabled: F,
+    isEditable: N,
+    editIcon: w,
+    onClickEdit: A,
+    deleteIcon: j,
     onClickDelete: B,
     idx: z,
-    children: R
+    children: O
   } = e;
   return /* @__PURE__ */ g(oe, { className: `${o} ${i.replace("#", "")}-label-input-container`, children: [
-    l !== "radio" && l !== "checkbox" && /* @__PURE__ */ t(P, { htmlFor: i, textLabel: r, additionalInfo: d, $labelFlexDirection: m, svg: c, className: h }),
+    l !== "radio" && l !== "checkbox" && /* @__PURE__ */ t(P, { htmlFor: i, textLabel: r, additionalInfo: d, $labelFlexDirection: b, svg: c, className: h }),
     l !== "radio" && l !== "checkbox" && l === "textarea" && (() => {
-      const { rows: w = 5, cols: F = 30, value: D, ...a } = e;
+      const { rows: E = 5, cols: v = 30, value: S, ...n } = e;
       return /* @__PURE__ */ t(
-        j,
+        L,
         {
           id: i,
           name: i,
           type: "textarea",
-          isRequired: p,
-          onChange: $,
-          value: D,
-          rows: w,
-          cols: F,
-          ...u,
+          isRequired: $,
+          onChange: u,
+          value: S,
+          rows: E,
+          cols: v,
+          dataAttributes: x,
           className: k,
           ref: C,
-          disabled: N
+          disabled: F
         }
       );
     })(),
     l !== "radio" && l !== "checkbox" && l !== "textarea" && (() => {
-      const w = e, { value: F, pattern: D, placeholderText: a, ...y } = w;
+      const E = e, { value: v, pattern: S, placeholderText: n, ...p } = E;
       return /* @__PURE__ */ t(
-        j,
+        L,
         {
           id: i,
           name: i,
-          placeholderText: a,
-          onChange: $,
-          value: F,
+          placeholderText: n,
+          onChange: u,
+          value: v,
           type: l,
-          isRequired: p,
-          ...u,
+          isRequired: $,
+          dataAttributes: x,
           className: k,
           ref: C,
-          disabled: N,
-          pattern: D
+          disabled: F,
+          pattern: S
         }
       );
     })(),
     (l === "radio" || l === "checkbox") && (() => {
-      const { checked: w, ...F } = e;
+      const { checked: E, ...v } = e;
       return /* @__PURE__ */ g(V, { children: [
         /* @__PURE__ */ t(
-          j,
+          L,
           {
             ref: C,
             type: "checkbox",
             name: i,
             id: i,
-            isRequired: p,
-            checked: w,
-            onChange: $,
-            disabled: N,
+            isRequired: $,
+            checked: E,
+            onChange: u,
+            disabled: F,
             className: k,
-            ...u
+            dataAttributes: x
           }
         ),
-        /* @__PURE__ */ t(P, { htmlFor: i, textLabel: r, additionalInfo: d, $labelFlexDirection: m, svg: c, className: h })
+        /* @__PURE__ */ t(P, { htmlFor: i, textLabel: r, additionalInfo: d, $labelFlexDirection: b, svg: c, className: h })
       ] });
     })(),
-    E && /* @__PURE__ */ g(ie, { className: "input-edit-buttons", children: [
-      /* @__PURE__ */ t(x, { id: `editable-${i}-edit-btn`, svg: A, buttonType: "button", onClick: S, className: `edit-radio-${z}`, dataAttributes: u }),
-      /* @__PURE__ */ t(x, { id: `editable-${i}-delete-btn`, svg: L, buttonType: "button", onClick: B, className: `delete-radio-${z}`, dataAttributes: u })
+    N && /* @__PURE__ */ g(ie, { className: "input-edit-buttons", children: [
+      /* @__PURE__ */ t(y, { id: `editable-${i}-edit-btn`, svg: w, buttonType: "button", onClick: A, className: `edit-radio-${z}`, dataAttributes: x }),
+      /* @__PURE__ */ t(y, { id: `editable-${i}-delete-btn`, svg: j, buttonType: "button", onClick: B, className: `delete-radio-${z}`, dataAttributes: x })
     ] }),
-    R
+    O
   ] });
 }, me = s.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
 `, be = s.legend`
-    font-size: ${n.spacing.medium};
+    font-size: ${a.spacing.medium};
     font-weight: 500;
-    margin: 0 auto ${n.spacing.small} auto;
+    margin: 0 auto ${a.spacing.small} auto;
     text-align: center;
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
+    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
 `, he = s.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
-    margin-bottom: ${n.spacing.small};
+    margin-bottom: ${a.spacing.small};
 `, fe = s.div`
     display: flex;
     justify-content: space-between;
@@ -350,11 +357,11 @@ const n = {
   onChangeOfEditableOption: i,
   onClickSaveEdit: r,
   onClickCancelEdit: d,
-  onClickDeleteEntry: m
+  onClickDeleteEntry: b
 }) => /* @__PURE__ */ g(me, { className: "editable-selection-fieldset", children: [
   /* @__PURE__ */ t(be, { children: `${e} ${o + 1}` }),
   l.map((c, h) => /* @__PURE__ */ t(he, { className: "editable-selection-container", children: /* @__PURE__ */ t(
-    j,
+    L,
     {
       id: `editable-selection-${h}`,
       name: `editable-selection-${h}`,
@@ -372,9 +379,9 @@ const n = {
     }
   ) }, `${c.name}-${h}`)),
   /* @__PURE__ */ g(fe, { className: "editable-selection-button-space", children: [
-    /* @__PURE__ */ t(x, { id: `editable-selection-${o}-submit`, buttonType: "submit", text: "Save", onClick: r, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
-    /* @__PURE__ */ t(x, { id: `editable-selection-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
-    /* @__PURE__ */ t(x, { id: `editable-selection-${o}-delete`, buttonType: "button", text: "Delete", onClick: m, className: "editable-selection-btn", dataAttributes: { "data-index": o } })
+    /* @__PURE__ */ t(y, { id: `editable-selection-${o}-submit`, buttonType: "submit", text: "Save", onClick: r, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
+    /* @__PURE__ */ t(y, { id: `editable-selection-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
+    /* @__PURE__ */ t(y, { id: `editable-selection-${o}-delete`, buttonType: "button", text: "Delete", onClick: b, className: "editable-selection-btn", dataAttributes: { "data-index": o } })
   ] })
 ] }), ge = s.div`
     display: flex;
@@ -387,31 +394,31 @@ const n = {
   handleSubmit: i,
   hasEdit: r,
   editText: d,
-  handleEdit: m,
+  handleEdit: b,
   hasCancel: c,
   cancelText: h,
-  handleCancel: $,
-  hasDelete: p,
-  deleteText: u,
+  handleCancel: u,
+  hasDelete: $,
+  deleteText: x,
   handleDelete: k
 }) => /* @__PURE__ */ g(ge, { className: "form-main-button-container", children: [
-  o && /* @__PURE__ */ t(x, { id: `form-${e}-submit`, buttonType: "submit", text: l ?? "Submit", onClick: i, className: "submit-form-btn" }),
-  r && /* @__PURE__ */ t(x, { id: `form-${e}-edit`, buttonType: "button", text: d ?? "Edit", onClick: m, className: "edit-form-btn" }),
-  c && /* @__PURE__ */ t(x, { id: `form-${e}-cancel`, buttonType: "button", text: h ?? "Cancel", onClick: $, className: "cancel-form-btn" }),
-  p && /* @__PURE__ */ t(x, { id: `form-${e}-delete`, buttonType: "button", text: u ?? "Delete", onClick: k, className: "delete-form-btn" })
+  o && /* @__PURE__ */ t(y, { id: `form-${e}-submit`, buttonType: "submit", text: l ?? "Submit", onClick: i, className: "submit-form-btn" }),
+  r && /* @__PURE__ */ t(y, { id: `form-${e}-edit`, buttonType: "button", text: d ?? "Edit", onClick: b, className: "edit-form-btn" }),
+  c && /* @__PURE__ */ t(y, { id: `form-${e}-cancel`, buttonType: "button", text: h ?? "Cancel", onClick: u, className: "cancel-form-btn" }),
+  $ && /* @__PURE__ */ t(y, { id: `form-${e}-delete`, buttonType: "button", text: x ?? "Delete", onClick: k, className: "delete-form-btn" })
 ] }), U = s.legend`
-    font-size: ${n.spacing.medium};
+    font-size: ${a.spacing.medium};
     font-weight: 500;
-    margin-bottom: ${n.spacing.small};
+    margin-bottom: ${a.spacing.small};
     width: auto;
     text-align: center;
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
+    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
 `, H = s.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
 `, G = s.div`
-    padding: ${n.spacing.small};
+    padding: ${a.spacing.small};
     height: auto;
     width: 100%;
 `, J = s.div`
@@ -420,9 +427,9 @@ const n = {
     align-items: center;
     width: 100%;
     height: auto;
-    font-family: ${n.fonts.tertiary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
-    font-weight: ${n.fontWeight.bold};
+    font-family: ${a.fonts.tertiary}, ${a.fonts.fallback};
+    font-size: ${a.fontSize.xsmall};
+    font-weight: ${a.fontWeight.bold};
 `, xe = s.form`
     display: flex;
     flex-direction: column;
@@ -449,70 +456,70 @@ const n = {
   formInputs: r,
   //* object that contains the input fields information to make it reusable
   labelAndInputContainerClass: d,
-  labelClass: m,
+  labelClass: b,
   inputClass: c,
   handleEditableInputEntryChange: h,
   //* handles change on editable inputs
-  handleAddingInputEntry: $,
-  hasSubmit: p = !1,
-  hasCancel: u = !1,
+  handleAddingInputEntry: u,
+  hasSubmit: $ = !1,
+  hasCancel: x = !1,
   hasDelete: k = !1,
   hasEdit: C = !1,
-  submitText: N,
-  handleSubmitForm: E,
-  handleSubmit: A,
-  cancelText: S,
-  handleCancel: L,
+  submitText: F,
+  handleSubmitForm: N,
+  handleSubmit: w,
+  cancelText: A,
+  handleCancel: j,
   deleteText: B,
   handleDelete: z,
-  editText: R,
-  handleEdit: w,
-  className: F,
-  children: D
+  editText: O,
+  handleEdit: E,
+  className: v,
+  children: S
   //* if there are nodes to be inserted after submit/edit/cancel buttons usually in login or signup forms
-}) => /* @__PURE__ */ g(xe, { id: `${i}-form`, className: F, onSubmit: E, children: [
-  e ? e.map((a, y) => /* @__PURE__ */ g(G, { children: [
-    /* @__PURE__ */ g(H, { id: `${i}-form-fieldset-${y}`, className: "form-fieldset", children: [
-      a.legend && /* @__PURE__ */ t(U, { children: a.legend }),
-      a.inputs.length !== 0 ? a.inputs.map((f, v) => /* @__PURE__ */ g(W.Fragment, { children: [
+}) => /* @__PURE__ */ g(xe, { id: `${i}-form`, className: v, onSubmit: N, children: [
+  e ? e.map((n, p) => /* @__PURE__ */ g(G, { children: [
+    /* @__PURE__ */ g(H, { id: `${i}-form-fieldset-${p}`, className: "form-fieldset", children: [
+      n.legend && /* @__PURE__ */ t(U, { children: n.legend }),
+      n.inputs.length !== 0 ? n.inputs.map((f, T) => /* @__PURE__ */ g(W.Fragment, { children: [
         f.type === "textarea" && /* @__PURE__ */ t(
-          T,
+          D,
           {
             ...f,
-            id: f.id ?? `${a.legend}-input`,
-            labelClass: m,
+            id: f.id ?? `${n.legend}-input`,
+            labelClass: b,
             inputClass: c,
-            idx: v,
+            idx: T,
             className: d
           }
         ),
         (f.type === "radio" || f.type === "checkbox") && /* @__PURE__ */ t(
-          T,
+          D,
           {
             ...f,
-            id: f.id ?? `${a.legend}-input`,
-            labelClass: m,
+            id: f.id ?? `${n.legend}-input`,
+            labelClass: b,
             inputClass: c,
-            idx: v,
+            idx: T,
             className: d
           }
         ),
         f.type !== "textarea" && f.type !== "radio" && f.type !== "checkbox" && /* @__PURE__ */ t(
-          T,
+          D,
           {
             ...f,
-            id: f.id ?? `${a.legend}-input`,
-            labelClass: m,
+            id: f.id ?? `${n.legend}-input`,
+            labelClass: b,
             inputClass: c,
-            idx: v,
+            idx: T,
             className: d
           }
         ),
         f.isEditable && f.editing && /* @__PURE__ */ t(
           M,
           {
-            legend: `${a.legend} ${v + 1}`,
-            idx: v,
+            legend: `${n.legend} ${T + 1}`,
+            idx: T,
             editableInformation: f?.editableInformation,
             onChangeOfEditableOption: h,
             onClickSaveEdit: f?.onClickSave,
@@ -520,85 +527,85 @@ const n = {
             onClickDeleteEntry: f?.onClickDelete
           }
         )
-      ] }, `form-${i}-${v}`)) : a.isExpandable ? /* @__PURE__ */ t(J, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
+      ] }, `form-${i}-${T}`)) : n.isExpandable ? /* @__PURE__ */ t(J, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
     ] }),
-    a.isExpandable && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(x, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
-  ] }, `${a.legend}-${y}`)) : /* @__PURE__ */ g(G, { children: [
+    n.isExpandable && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(y, { id: `expand-${n.legend}-inputs`, buttonType: "button", text: "+", onClick: u, className: "add-input-entry" }) })
+  ] }, `${n.legend}-${p}`)) : /* @__PURE__ */ g(G, { children: [
     /* @__PURE__ */ g(H, { id: `${i}-form-fieldset`, className: "form-fieldset", children: [
       o && /* @__PURE__ */ t(U, { children: o }),
-      !e && r && r.length !== 0 ? r.map((a, y) => /* @__PURE__ */ g(W.Fragment, { children: [
-        a.type === "textarea" && /* @__PURE__ */ t(
-          T,
+      !e && r && r.length !== 0 ? r.map((n, p) => /* @__PURE__ */ g(W.Fragment, { children: [
+        n.type === "textarea" && /* @__PURE__ */ t(
+          D,
           {
-            ...a,
-            id: a.id ?? `${o}-input`,
-            labelClass: m,
+            ...n,
+            id: n.id ?? `${o}-input`,
+            labelClass: b,
             inputClass: c,
-            idx: y,
+            idx: p,
             className: d
           }
         ),
-        (a.type === "radio" || a.type === "checkbox") && /* @__PURE__ */ t(
-          T,
+        (n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */ t(
+          D,
           {
-            ...a,
-            id: a.id ?? `${o}-input`,
-            labelClass: m,
+            ...n,
+            id: n.id ?? `${o}-input`,
+            labelClass: b,
             inputClass: c,
-            idx: y,
+            idx: p,
             className: d
           }
         ),
-        a.type !== "textarea" && a.type !== "radio" && a.type !== "checkbox" && /* @__PURE__ */ t(
-          T,
+        n.type !== "textarea" && n.type !== "radio" && n.type !== "checkbox" && /* @__PURE__ */ t(
+          D,
           {
-            ...a,
-            id: a.id ?? `${o}-input`,
-            labelClass: m,
+            ...n,
+            id: n.id ?? `${o}-input`,
+            labelClass: b,
             inputClass: c,
-            idx: y,
+            idx: p,
             className: d
           }
         ),
-        a.isEditable && a.editing && /* @__PURE__ */ t(
+        n.isEditable && n.editing && /* @__PURE__ */ t(
           M,
           {
-            legend: `${o} ${y + 1}`,
-            idx: y,
-            editableInformation: a?.editableInformation,
+            legend: `${o} ${p + 1}`,
+            idx: p,
+            editableInformation: n?.editableInformation,
             onChangeOfEditableOption: h,
-            onClickSaveEdit: a?.onClickSave,
-            onClickCancelEdit: a?.onClickEdit,
-            onClickDeleteEntry: a?.onClickDelete
+            onClickSaveEdit: n?.onClickSave,
+            onClickCancelEdit: n?.onClickEdit,
+            onClickDeleteEntry: n?.onClickDelete
           }
         )
-      ] }, `form-${i}-${y}`)) : l ? /* @__PURE__ */ t(J, { children: `No entry yet on ${o}. Please click "+" button to add` }) : ""
+      ] }, `form-${i}-${p}`)) : l ? /* @__PURE__ */ t(J, { children: `No entry yet on ${o}. Please click "+" button to add` }) : ""
     ] }),
-    l && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(x, { id: `expand-${o}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
+    l && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(y, { id: `expand-${o}-inputs`, buttonType: "button", text: "+", onClick: u, className: "add-input-entry" }) })
   ] }),
   /* @__PURE__ */ t(
     ue,
     {
       id: i,
-      hasSubmit: p,
-      submitText: N,
-      handleSubmit: A,
+      hasSubmit: $,
+      submitText: F,
+      handleSubmit: w,
       hasEdit: C,
-      editText: R,
-      handleEdit: w,
-      hasCancel: u,
-      cancelText: S,
-      handleCancel: L,
+      editText: O,
+      handleEdit: E,
+      hasCancel: x,
+      cancelText: A,
+      handleCancel: j,
       hasDelete: k,
       deleteText: B,
       handleDelete: z
     }
   ),
-  /* @__PURE__ */ t($e, { className: "children-container", children: D })
+  /* @__PURE__ */ t($e, { className: "children-container", children: S })
 ] }), ye = (e) => {
   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(e) || l.test(e) || CSS.supports("color", e);
-}, b = (e) => {
+}, m = (e) => {
   if (!ye(e)) throw new Error(`Invalid color: ${e}`);
   return e;
 }, Ee = {
@@ -610,39 +617,39 @@ const n = {
   //Macbook 13" (1280x800)
   largeDesktop: "1200px",
   largerDesktop: "1400px"
-}, O = {
+}, R = {
   name: "light",
   colors: {
-    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")
+    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")
   }
 }, pe = {
   name: "dark",
   colors: {
-    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")
+    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")
   }
 }, Q = Y(void 0), Fe = ({ children: e }) => {
-  const [o, l] = Z(O), i = () => {
-    l((r) => r === O ? pe : O);
+  const [o, l] = Z(R), i = () => {
+    l((r) => r === R ? pe : R);
   };
   return /* @__PURE__ */ t(Q.Provider, { value: { currentTheme: o, toggleTheme: i }, children: /* @__PURE__ */ t(I, { theme: o, children: e }) });
 }, ve = () => _(Q);
@@ -652,6 +659,6 @@ export {
   Fe as ThemeContextProvider,
   Ee as breakpoints,
   pe as darkTheme,
-  O as lightTheme,
+  R as lightTheme,
   ve as useTheme
 };

package/package.json

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