@kbgarcia8/react-dynamic-form 1.1.36 → 1.1.38

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

@@ -1,4 +1,4 @@
 import type { ButtonProps } from "../../../type/propTypes";
-declare const Button: ({ onClick, id, buttonType, source, svg, alt, text, className, dataAttributes, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ onClick, id, buttonType, source, svg, alt, text, className, dataAttributes }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

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,yFAWb,WAAW,4CAgBb,CAAC;AAGF,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,4CAgBZ,CAAA;AAED,eAAe,MAAM,CAAC"}

package/dist/components/molecules/NestedEditableOption/NestedEditableOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NestedEditableOption.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NestedEditableOption/NestedEditableOption.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,QAAA,MAAM,oBAAoB,GAAI,uIAS5B,yBAAyB,4CA+B1B,CAAA;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"NestedEditableOption.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NestedEditableOption/NestedEditableOption.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,QAAA,MAAM,oBAAoB,GAAI,uIAS5B,yBAAyB,4CA8B1B,CAAA;AAED,eAAe,oBAAoB,CAAC"}

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

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

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

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=require("react"),c=require("styled-components"),a={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"}},K=c.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=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"}},K=c.button`
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${({theme:t})=>t.colors.blue||"blue"};
-    color: ${({theme:t})=>t.colors.bg||"white"};
-    border: ${a.borderThickness.light} solid ${({theme:t})=>t.colors.text||"black"};
-    border-radius: ${a.borderRadius.xlarge};
-    padding: ${a.spacing.xxxsmall} ${a.spacing.small};
+    background-color: ${({theme:a})=>a.colors.blue||"blue"};
+    color: ${({theme:a})=>a.colors.bg||"white"};
+    border: ${t.borderThickness.light} solid ${({theme:a})=>a.colors.text||"black"};
+    border-radius: ${t.borderRadius.xlarge};
+    padding: ${t.spacing.xxxsmall} ${t.spacing.small};
     margin: 0.125rem;
     width: auto;
     cursor: pointer;
@@ -14,7 +14,7 @@
 
     &:hover {
         background-color: lightblue;
-        border: ${a.borderThickness.light} solid gray;
+        border: ${t.borderThickness.light} solid gray;
     }
 
     & .button-icon-text-space {
@@ -33,21 +33,21 @@
 `,V=c.img`
     maxwidth: 100%;
 `,X=c.span`
-    font-size: ${a.fontSize.xsmall};
-    font-weight: ${a.fontWeight.medium};
-    font-family: ${a.fonts.tertiary}, ${a.fonts.fallback};
+    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:t,id:s,buttonType:o,source:i,svg:m,alt:r="alt-button-icon",text:d="",className:b="",dataAttributes:h={},...g})=>e.jsx(K,{id:s,type:o,onClick:t,className:b,...g,...h,children:e.jsxs(Q,{className:"button-icon-text-space",children:[i?e.jsx(V,{src:i,alt:r}):m||"",d&&e.jsx(X,{id:s,children:d})]})}),Y=c.div`
+`,f=({onClick:a,id:o,buttonType:s,source:i,svg:m,alt:r="alt-button-icon",text:d="",className:b="",dataAttributes:h={}})=>e.jsx(K,{onClick:a,id:o,type:s,className:b,...h,children:e.jsxs(Q,{className:"button-icon-text-space",children:[i?e.jsx(V,{src:i,alt:r}):m||"",d&&e.jsx(X,{id:o,children:d})]})}),Y=c.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${a.spacing.small};
+    margin-bottom: ${t.spacing.small};
 `,Z=c.div`
     display: flex;
-    gap: ${a.spacing.xsmall};
+    gap: ${t.spacing.xsmall};
     width: auto;
     height: auto;
 `,_=c.label`
@@ -55,11 +55,11 @@
     align-items: center;
     justify-content:center;
     height: auto;
-    flex-direction:  ${t=>t.$labelFlexDirection||"column"};
-    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
-    font-size: ${a.fontSize.xsmall};
-    font-weight: ${a.fontWeight.bold};
-    gap: ${a.spacing.xxsmall};
+    flex-direction:  ${a=>a.$labelFlexDirection||"column"};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.bold};
+    gap: ${t.spacing.xxsmall};
     
     & .label-icon-container img,
     & .label-icon-container svg {
@@ -72,82 +72,82 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: ${a.spacing.xxxsmall};
+    gap: ${t.spacing.xxxsmall};
 `,ee=c.span`
-    font-weight: ${a.fontWeight.bolder};
+    font-weight: ${t.fontWeight.bolder};
 `,te=c.div`
     max-width: 100%;
     display: flex;
     align-items: center;
 `,ae=c.span`
-    font-weight: ${a.fontWeight.light};
-`,L=({htmlFor:t,textLabel:s,additionalInfo:o,$labelFlexDirection:i,source:m,svg:r,className:d,children:b})=>e.jsxs(_,{htmlFor:t,className:d,$labelFlexDirection:i,children:[(m||r)&&e.jsx(te,{className:"label-icon-container",children:m?e.jsx("img",{src:m,alt:`${t}-label-icon`}):r||""}),e.jsxs(I,{className:"label-text-container",children:[e.jsx(ee,{className:"main-label",children:s}),o&&e.jsx(ae,{className:"additional-info",children:o})]}),b]}),B=c.input`
+    font-weight: ${t.fontWeight.light};
+`,R=({htmlFor:a,textLabel:o,additionalInfo:s,$labelFlexDirection:i,source:m,svg:r,className:d,children:b})=>e.jsxs(_,{htmlFor:a,className:d,$labelFlexDirection:i,children:[(m||r)&&e.jsx(te,{className:"label-icon-container",children:m?e.jsx("img",{src:m,alt:`${a}-label-icon`}):r||""}),e.jsxs(I,{className:"label-text-container",children:[e.jsx(ee,{className:"main-label",children:o}),s&&e.jsx(ae,{className:"additional-info",children:s})]}),b]}),B=c.input`
     display: flex;
     place-content: center;
-    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
-    font-size: ${a.fontSize.xsmall};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
     line-height: 1.75;
-    padding: ${a.spacing.xxxsmall} ${a.spacing.xsmall};
+    padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
     max-width: 100%;
     height: auto;
     background-color: #FFFFFF;
     outline: none;
-    border: ${a.borderThickness.thin} solid #000000;
-    border-radius: ${a.borderRadius.xsmall};
+    border: ${t.borderThickness.thin} solid #000000;
+    border-radius: ${t.borderRadius.xsmall};
 
     &:focus{
-        border: ${a.borderThickness.thin} solid ${({theme:t})=>t.colors.teal};
+        border: ${t.borderThickness.thin} solid ${({theme:a})=>a.colors.teal};
     }
 `,ne=c.textarea`
     display: flex;
     place-content: center;
-    border: ${a.borderThickness.light} solid ${({theme:t})=>t.colors.text};
-    border-radius: ${a.borderRadius.small};
+    border: ${t.borderThickness.light} solid ${({theme:a})=>a.colors.text};
+    border-radius: ${t.borderRadius.small};
     outline: none;
-    line-height: ${a.spacing.small};
-    padding: ${a.spacing.xxxsmall};
-    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
-    font-size: ${a.fontSize.xsmall};
+    line-height: ${t.spacing.small};
+    padding: ${t.spacing.xxxsmall};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`,A=F.forwardRef((t,s)=>{const{type:o,id:i,onChange:m,isRequired:r,dataAttributes:d={},disabled:b,className:h}=t;if(o==="textarea"){const{rows:p=5,cols:N=30,value:E,...v}=t;return e.jsx(ne,{onChange:m,value:E,rows:p,cols:N,className:h,ref:s,disabled:b,required:r,...v,...d})}if(o==="radio"||o==="checkbox"){const{checked:p,...N}=t;return e.jsx(B,{ref:s,checked:p,onChange:m,disabled:b,className:h,...N,...d})}const g=t,{value:j,pattern:y,placeholderText:k,...C}=g;return e.jsx(B,{placeholder:k,onChange:m,value:j,required:r,className:h,ref:s,disabled:b,pattern:y,...C,...d})}),w=t=>{const{className:s,type:o,id:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,labelClass:h,onChange:g,isRequired:j,dataAttributes:y,inputClass:k,ref:C,disabled:p,isEditable:N,editIcon:E,onClickEdit:v,deleteIcon:D,onClickDelete:S,idx:T,children:q}=t;return e.jsxs(Y,{className:`${s} ${i.replace("#","")}-label-input-container`,children:[o!=="radio"&&o!=="checkbox"&&e.jsx(L,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h}),o!=="radio"&&o!=="checkbox"&&o==="textarea"&&(()=>{const{rows:n=5,cols:u=30,value:l,...$}=t;return e.jsx(A,{id:i,name:i,type:"textarea",isRequired:j,onChange:g,value:l,rows:n,cols:u,dataAttributes:y,className:k,ref:C,disabled:p})})(),o!=="radio"&&o!=="checkbox"&&o!=="textarea"&&(()=>{const n=t,{value:u,pattern:l,placeholderText:$,...z}=n;return e.jsx(A,{id:i,name:i,placeholderText:$,onChange:g,value:u,type:o,isRequired:j,dataAttributes:y,className:k,ref:C,disabled:p,pattern:l})})(),(o==="radio"||o==="checkbox")&&(()=>{const{checked:n,...u}=t;return e.jsxs(e.Fragment,{children:[e.jsx(A,{ref:C,type:o,name:i,id:i,isRequired:j,checked:n,onChange:g,disabled:p,className:k,dataAttributes:y}),e.jsx(L,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h})]})})(),N&&e.jsxs(Z,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${i}-edit-btn`,svg:E,buttonType:"button",onClick:v,className:`edit-radio-${T}`,dataAttributes:y}),e.jsx(f,{id:`editable-${i}-delete-btn`,svg:D,buttonType:"button",onClick:S,className:`delete-radio-${T}`,dataAttributes:y})]}),q]})},oe=c.fieldset`
+`,A=F.forwardRef((a,o)=>{const{type:s,id:i,onChange:m,isRequired:r,dataAttributes:d={},disabled:b,className:h}=a;if(s==="textarea"){const{rows:y=5,cols:N=30,value:E,...v}=a;return e.jsx(ne,{onChange:m,value:E,rows:y,cols:N,className:h,ref:o,disabled:b,required:r,...v,...d})}if(s==="radio"||s==="checkbox"){const{checked:y,...N}=a;return e.jsx(B,{ref:o,checked:y,onChange:m,disabled:b,className:h,...N,...d})}const u=a,{value:j,pattern:$,placeholderText:k,...C}=u;return e.jsx(B,{placeholder:k,onChange:m,value:j,required:r,className:h,ref:o,disabled:b,pattern:$,...C,...d})}),w=a=>{const{className:o,type:s,id:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,labelClass:h,onChange:u,isRequired:j,dataAttributes:$,inputClass:k,ref:C,disabled:y,isEditable:N,editIcon:E,onClickEdit:v,deleteIcon:D,onClickDelete:S,idx:T,children:q}=a;return e.jsxs(Y,{className:`${o} ${i.replace("#","")}-label-input-container`,children:[s!=="radio"&&s!=="checkbox"&&e.jsx(R,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h}),s!=="radio"&&s!=="checkbox"&&s==="textarea"&&(()=>{const{rows:n=5,cols:g=30,value:l,...p}=a;return e.jsx(A,{id:i,name:i,type:"textarea",isRequired:j,onChange:u,value:l,rows:n,cols:g,dataAttributes:$,className:k,ref:C,disabled:y})})(),s!=="radio"&&s!=="checkbox"&&s!=="textarea"&&(()=>{const n=a,{value:g,pattern:l,placeholderText:p,...z}=n;return e.jsx(A,{id:i,name:i,placeholderText:p,onChange:u,value:g,type:s,isRequired:j,dataAttributes:$,className:k,ref:C,disabled:y,pattern:l})})(),(s==="radio"||s==="checkbox")&&(()=>{const{checked:n,...g}=a;return e.jsxs(e.Fragment,{children:[e.jsx(A,{ref:C,type:s,name:i,id:i,isRequired:j,checked:n,onChange:u,disabled:y,className:k,dataAttributes:$}),e.jsx(R,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h})]})})(),N&&e.jsxs(Z,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${i}-edit-btn`,svg:E,buttonType:"button",onClick:v,className:`edit-radio-${T}`,dataAttributes:$}),e.jsx(f,{id:`editable-${i}-delete-btn`,svg:D,buttonType:"button",onClick:S,className:`delete-radio-${T}`,dataAttributes:$})]}),q]})},se=c.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,se=c.legend`
-    font-size: ${a.spacing.medium};
+`,oe=c.legend`
+    font-size: ${t.spacing.medium};
     font-weight: 500;
-    margin: 0 auto ${a.spacing.small} auto;
+    margin: 0 auto ${t.spacing.small} auto;
     text-align: center;
-    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
 `,ie=c.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
-    margin-bottom: ${a.spacing.small};
+    margin-bottom: ${t.spacing.small};
 `,le=c.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,P=({legend:t,fieldsetIndex:s,idx:o,editableInformation:i,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>(console.log(s),e.jsxs(oe,{className:"editable-option-fieldset",children:[e.jsx(se,{children:`${t} ${o+1}`}),i?.map((h,g)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(A,{id:`editable-option-${g}`,name:`editable-option-${g}`,placeholderText:h.name.charAt(0).toUpperCase()+h.name.slice(1),onChange:m,value:h.info,type:h.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":g,"data-fieldsetindex":s,"data-key":h.info}})},`${h.name}-${g}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx(f,{id:`editable-option-${o}-submit`,buttonType:"button",text:"Save",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}}),e.jsx(f,{id:`editable-option-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}}),e.jsx(f,{id:`editable-option-${o}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}})]})]})),ce=c.div`
+`,P=({legend:a,fieldsetIndex:o,idx:s,editableInformation:i,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>e.jsxs(se,{className:"editable-option-fieldset",children:[e.jsx(oe,{children:`${a} ${s+1}`}),i?.map((h,u)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(A,{id:`editable-option-${u}`,name:`editable-option-${u}`,placeholderText:h.name.charAt(0).toUpperCase()+h.name.slice(1),onChange:m,value:h.info,type:h.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":u,"data-fieldsetindex":o,"data-key":h.info}})},`${h.name}-${u}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx(f,{id:`editable-option-${s}-submit`,buttonType:"button",text:"Save",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":o}}),e.jsx(f,{id:`editable-option-${s}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":o}}),e.jsx(f,{id:`editable-option-${s}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":o}})]})]}),ce=c.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`,re=({id:t,hasSubmit:s,submitText:o,handleSubmit:i,hasReset:m,resetText:r,handleReset:d,hasCancel:b,cancelText:h,handleCancel:g})=>e.jsxs(ce,{className:"form-main-button-container",children:[s&&e.jsx(f,{id:`form-${t}-submit`,buttonType:"submit",text:o??"Submit",onClick:i,className:"submit-form-btn"}),m&&e.jsx(f,{id:`form-${t}-edit`,buttonType:"button",text:r??"Reset",onClick:d,className:"reset-form-btn"}),b&&e.jsx(f,{id:`form-${t}-cancel`,buttonType:"button",text:h??"Cancel",onClick:g,className:"cancel-form-btn"})]}),W=c.legend`
-    font-size: ${a.spacing.medium};
+`,re=({id:a,hasSubmit:o,submitText:s,handleSubmit:i,hasReset:m,resetText:r,handleReset:d,hasCancel:b,cancelText:h,handleCancel:u})=>e.jsxs(ce,{className:"form-main-button-container",children:[o&&e.jsx(f,{id:`form-${a}-submit`,buttonType:"submit",text:s??"Submit",onClick:i,className:"submit-form-btn"}),m&&e.jsx(f,{id:`form-${a}-edit`,buttonType:"button",text:r??"Reset",onClick:d,className:"reset-form-btn"}),b&&e.jsx(f,{id:`form-${a}-cancel`,buttonType:"button",text:h??"Cancel",onClick:u,className:"cancel-form-btn"})]}),W=c.legend`
+    font-size: ${t.spacing.medium};
     font-weight: 500;
-    margin-bottom: ${a.spacing.small};
+    margin-bottom: ${t.spacing.small};
     width: auto;
     text-align: center;
-    font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
 `,M=c.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
 `,U=c.div`
-    padding: ${a.spacing.small};
+    padding: ${t.spacing.small};
     height: auto;
     width: 100%;
 `,O=c.div`
@@ -156,9 +156,9 @@
     align-items: center;
     width: 100%;
     height: auto;
-    font-family: ${a.fonts.tertiary}, ${a.fonts.fallback};
-    font-size: ${a.fontSize.xsmall};
-    font-weight: ${a.fontWeight.bold};
+    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.bold};
 `,de=c.form`
     display: flex;
     flex-direction: column;
@@ -174,4 +174,4 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,xe=({fieldsets:t=null,legendText:s,isExpandable:o,id:i,formInputs:m,labelAndInputContainerClass:r,labelClass:d,inputClass:b,onChangeOfEditableOption:h,handleAddingInputEntry:g,hasSubmit:j=!1,submitText:y,handleSubmit:k,hasReset:C=!1,resetText:p,handleReset:N,hasCancel:E=!1,cancelText:v,handleCancel:D,handleSubmitForm:S,className:T,children:q})=>(console.log("Rendering DynamicForm",t),t?.forEach((n,u)=>{console.log("Fieldset index",u,"legend:",n.legend),n.inputs.forEach((l,$)=>{console.log("Input",$,"type:",l.type,"editing:",l.editing)})}),e.jsxs(de,{id:`${i}-form`,className:T,onSubmit:S,children:[t?t.map((n,u)=>e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset-${u}`,className:`${n.legend}-fieldset`,children:[n.legend&&e.jsx(W,{className:`${n.legend}-legend`,children:n.legend}),n.inputs.length!==0?n.inputs.map((l,$)=>e.jsxs(F.Fragment,{children:[l.type==="textarea"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:$,className:`${r} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:$,className:`${r} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:$,className:`${r} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:u,idx:$,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(z=>{}),onClickCancelEdit:l?.onClickCancel||(z=>{}),onClickDeleteEntry:l?.onClickDelete||(z=>{})})]})]},`form-${i}-${$}`)):n.isExpandable?e.jsx(O,{children:`No entry yet on ${n.legend}. Click "+" button to add entry.`}):""]}),n.isExpandable&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${n.legend}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":u}})})]},`${n.legend}-${u}`)):e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset`,className:`${s}-fieldset`,children:[s&&e.jsx(W,{className:`${s}-legend`,children:s}),!t&&m&&m.length!==0?m.map((n,u)=>e.jsxs(F.Fragment,{children:[n.type==="textarea"&&e.jsx(w,{...n,id:n.id??`${s}-input`,labelClass:d,inputClass:b,idx:u,className:`${r} ${n?.uniqueClass}`}),n.type!=="textarea"&&n.type!=="radio"&&n.type!=="checkbox"&&e.jsx(w,{...n,id:n.id??`${s}-input`,labelClass:d,inputClass:b,idx:u,className:`${r} ${n?.uniqueClass}`}),(n.type==="radio"||n.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...n,id:n.id??`${s}-input`,labelClass:d,inputClass:b,idx:u,className:`${r} ${n?.uniqueClass}`}),n.editing&&n.isEditable&&e.jsx(P,{legend:`${s}`,idx:u,editableInformation:n?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:n?.onClickSave||(l=>{}),onClickCancelEdit:n?.onClickCancel||(l=>{}),onClickDeleteEntry:n?.onClickDelete||(l=>{})})]})]},`form-${i}-${u}`)):o?e.jsx(O,{children:`No entry yet on ${s}. Please click "+" button to add`}):""]}),o&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${s}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]}),e.jsx(re,{id:i,hasSubmit:j,submitText:y,handleSubmit:k,hasReset:C,resetText:p,handleReset:N,hasCancel:E,cancelText:v,handleCancel:D}),e.jsx(me,{className:"children-container",children:q})]})),be=t=>{const s=/^#([0-9A-Fa-f]{3}){1,2}$/,o=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return s.test(t)||o.test(t)||CSS.supports("color",t)},x=t=>{if(!be(t))throw new Error(`Invalid color: ${t}`);return t},he={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},G={name:"light",colors:{text:x("#333446"),bg:x("#EEEEEE"),blue:x("#7F8CAA"),blue2:x("#80A6FF"),teal:x("#5b8280ff"),teal2:x("#AEEAE7"),gray:x("#AEAEAE"),information:x("#202234"),success:x("#123524"),warning:x("#F2C265"),error:x("#990000")}},J={name:"dark",colors:{bg:x("#333446"),text:x("#EEEEEE"),blue:x("#80A6FF"),blue2:x("#7F8CAA"),teal:x("#AEEAE7"),teal2:x("#5b8280ff"),gray:x("#D0D0DD"),information:x("#C9E6F0"),success:x("#9EDF9C"),warning:x("#FCFFC1"),error:x("#FAD4D4")}},R=F.createContext({}),ge=({children:t,initialTheme:s=G,secondTheme:o=J})=>{const[i,m]=F.useState(s),r=()=>{m(d=>d===s?o:s)};return e.jsx(R.Provider,{value:{currentTheme:i,toggleTheme:r},children:e.jsx(c.ThemeProvider,{theme:i,children:t})})},ue=()=>F.useContext(R);exports.DynamicForm=xe;exports.ThemeContext=R;exports.ThemeContextProvider=ge;exports.breakpoints=he;exports.darkTheme=J;exports.lightTheme=G;exports.useTheme=ue;
+`,xe=({fieldsets:a=null,legendText:o,isExpandable:s,id:i,formInputs:m,labelAndInputContainerClass:r,labelClass:d,inputClass:b,onChangeOfEditableOption:h,handleAddingInputEntry:u,hasSubmit:j=!1,submitText:$,handleSubmit:k,hasReset:C=!1,resetText:y,handleReset:N,hasCancel:E=!1,cancelText:v,handleCancel:D,handleSubmitForm:S,className:T,children:q})=>e.jsxs(de,{id:`${i}-form`,className:T,onSubmit:S,children:[a?a.map((n,g)=>e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset-${g}`,className:`${n.legend}-fieldset`,children:[n.legend&&e.jsx(W,{className:`${n.legend}-legend`,children:n.legend}),n.inputs.length!==0?n.inputs.map((l,p)=>e.jsxs(F.Fragment,{children:[l.type==="textarea"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:g,idx:p,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(z=>{}),onClickCancelEdit:l?.onClickCancel||(z=>{}),onClickDeleteEntry:l?.onClickDelete||(z=>{})})]})]},`form-${i}-${p}`)):n.isExpandable?e.jsx(O,{children:`No entry yet on ${n.legend}. Click "+" button to add entry.`}):""]}),n.isExpandable&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${n.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":g}})})]},`${n.legend}-${g}`)):e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset`,className:`${o}-fieldset`,children:[o&&e.jsx(W,{className:`${o}-legend`,children:o}),!a&&m&&m.length!==0?m.map((n,g)=>e.jsxs(F.Fragment,{children:[n.type==="textarea"&&e.jsx(w,{...n,id:n.id??`${o}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),n.type!=="textarea"&&n.type!=="radio"&&n.type!=="checkbox"&&e.jsx(w,{...n,id:n.id??`${o}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),(n.type==="radio"||n.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...n,id:n.id??`${o}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),n.editing&&n.isEditable&&e.jsx(P,{legend:`${o}`,idx:g,editableInformation:n?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:n?.onClickSave||(l=>{}),onClickCancelEdit:n?.onClickCancel||(l=>{}),onClickDeleteEntry:n?.onClickDelete||(l=>{})})]})]},`form-${i}-${g}`)):s?e.jsx(O,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),s&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]}),e.jsx(re,{id:i,hasSubmit:j,submitText:$,handleSubmit:k,hasReset:C,resetText:y,handleReset:N,hasCancel:E,cancelText:v,handleCancel:D}),e.jsx(me,{className:"children-container",children:q})]}),be=a=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,s=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return o.test(a)||s.test(a)||CSS.supports("color",a)},x=a=>{if(!be(a))throw new Error(`Invalid color: ${a}`);return a},he={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},G={name:"light",colors:{text:x("#333446"),bg:x("#EEEEEE"),blue:x("#7F8CAA"),blue2:x("#80A6FF"),teal:x("#5b8280ff"),teal2:x("#AEEAE7"),gray:x("#AEAEAE"),information:x("#202234"),success:x("#123524"),warning:x("#F2C265"),error:x("#990000")}},J={name:"dark",colors:{bg:x("#333446"),text:x("#EEEEEE"),blue:x("#80A6FF"),blue2:x("#7F8CAA"),teal:x("#AEEAE7"),teal2:x("#5b8280ff"),gray:x("#D0D0DD"),information:x("#C9E6F0"),success:x("#9EDF9C"),warning:x("#FCFFC1"),error:x("#FAD4D4")}},L=F.createContext({}),ue=({children:a,initialTheme:o=G,secondTheme:s=J})=>{const[i,m]=F.useState(o),r=()=>{m(d=>d===o?s:o)};return e.jsx(L.Provider,{value:{currentTheme:i,toggleTheme:r},children:e.jsx(c.ThemeProvider,{theme:i,children:a})})},ge=()=>F.useContext(L);exports.DynamicForm=xe;exports.ThemeContext=L;exports.ThemeContextProvider=ue;exports.breakpoints=he;exports.darkTheme=J;exports.lightTheme=G;exports.useTheme=ge;

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

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as u, Fragment as R } from "react/jsx-runtime";
+import { jsx as a, jsxs as u, Fragment as R } from "react/jsx-runtime";
 import q, { forwardRef as K, createContext as Q, useState as V, useContext as X } from "react";
 import c, { ThemeProvider as Y } from "styled-components";
-const t = {
+const e = {
   fonts: {
     secondary: "Raleway",
     tertiary: "Lato",
@@ -36,11 +36,11 @@ const t = {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${({ theme: e }) => e.colors.blue || "blue"};
-    color: ${({ theme: e }) => e.colors.bg || "white"};
-    border: ${t.borderThickness.light} solid ${({ theme: e }) => e.colors.text || "black"};
-    border-radius: ${t.borderRadius.xlarge};
-    padding: ${t.spacing.xxxsmall} ${t.spacing.small};
+    background-color: ${({ theme: t }) => t.colors.blue || "blue"};
+    color: ${({ theme: t }) => t.colors.bg || "white"};
+    border: ${e.borderThickness.light} solid ${({ theme: t }) => t.colors.text || "black"};
+    border-radius: ${e.borderRadius.xlarge};
+    padding: ${e.spacing.xxxsmall} ${e.spacing.small};
     margin: 0.125rem;
     width: auto;
     cursor: pointer;
@@ -48,7 +48,7 @@ const t = {
 
     &:hover {
         background-color: lightblue;
-        border: ${t.borderThickness.light} solid gray;
+        border: ${e.borderThickness.light} solid gray;
     }
 
     & .button-icon-text-space {
@@ -67,35 +67,33 @@ const t = {
 `, I = c.img`
     maxwidth: 100%;
 `, ee = c.span`
-    font-size: ${t.fontSize.xsmall};
-    font-weight: ${t.fontWeight.medium};
-    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
+    font-weight: ${e.fontWeight.medium};
+    font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
     display: flex;
     align-items: center;
     justify-content: center;
-`, p = ({
-  onClick: e,
-  id: l,
+`, x = ({
+  onClick: t,
+  id: i,
   buttonType: o,
-  source: i,
+  source: l,
   svg: m,
   alt: r = "alt-button-icon",
   text: d = "",
   className: h = "",
-  dataAttributes: g = {},
-  ...f
-}) => /* @__PURE__ */ n(
+  dataAttributes: f = {}
+}) => /* @__PURE__ */ a(
   Z,
   {
-    id: l,
+    onClick: t,
+    id: i,
     type: o,
-    onClick: e,
     className: h,
     ...f,
-    ...g,
     children: /* @__PURE__ */ u(_, { className: "button-icon-text-space", children: [
-      i ? /* @__PURE__ */ n(I, { src: i, alt: r }) : m || "",
-      d && /* @__PURE__ */ n(ee, { id: l, children: d })
+      l ? /* @__PURE__ */ a(I, { src: l, alt: r }) : m || "",
+      d && /* @__PURE__ */ a(ee, { id: i, children: d })
     ] })
   }
 ), te = c.div`
@@ -103,10 +101,10 @@ const t = {
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${t.spacing.small};
+    margin-bottom: ${e.spacing.small};
 `, ae = c.div`
     display: flex;
-    gap: ${t.spacing.xsmall};
+    gap: ${e.spacing.xsmall};
     width: auto;
     height: auto;
 `, ne = c.label`
@@ -114,11 +112,11 @@ const t = {
     align-items: center;
     justify-content:center;
     height: auto;
-    flex-direction:  ${(e) => e.$labelFlexDirection || "column"};
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
-    font-weight: ${t.fontWeight.bold};
-    gap: ${t.spacing.xxsmall};
+    flex-direction:  ${(t) => t.$labelFlexDirection || "column"};
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
+    font-weight: ${e.fontWeight.bold};
+    gap: ${e.spacing.xxsmall};
     
     & .label-icon-container img,
     & .label-icon-container svg {
@@ -131,74 +129,74 @@ const t = {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: ${t.spacing.xxxsmall};
-`, le = c.span`
-    font-weight: ${t.fontWeight.bolder};
-`, ie = c.div`
+    gap: ${e.spacing.xxxsmall};
+`, ie = c.span`
+    font-weight: ${e.fontWeight.bolder};
+`, le = c.div`
     max-width: 100%;
     display: flex;
     align-items: center;
 `, se = c.span`
-    font-weight: ${t.fontWeight.light};
+    font-weight: ${e.fontWeight.light};
 `, B = ({
-  htmlFor: e,
-  textLabel: l,
+  htmlFor: t,
+  textLabel: i,
   additionalInfo: o,
-  $labelFlexDirection: i,
+  $labelFlexDirection: l,
   source: m,
   svg: r,
   className: d,
   children: h
-}) => /* @__PURE__ */ u(ne, { htmlFor: e, className: d, $labelFlexDirection: i, children: [
-  (m || r) && /* @__PURE__ */ n(ie, { className: "label-icon-container", children: m ? /* @__PURE__ */ n("img", { src: m, alt: `${e}-label-icon` }) : r || "" }),
+}) => /* @__PURE__ */ u(ne, { htmlFor: t, className: d, $labelFlexDirection: l, children: [
+  (m || r) && /* @__PURE__ */ a(le, { className: "label-icon-container", children: m ? /* @__PURE__ */ a("img", { src: m, alt: `${t}-label-icon` }) : r || "" }),
   /* @__PURE__ */ u(oe, { className: "label-text-container", children: [
-    /* @__PURE__ */ n(le, { className: "main-label", children: l }),
-    o && /* @__PURE__ */ n(se, { className: "additional-info", children: o })
+    /* @__PURE__ */ a(ie, { className: "main-label", children: i }),
+    o && /* @__PURE__ */ a(se, { className: "additional-info", children: o })
   ] }),
   h
 ] }), W = c.input`
     display: flex;
     place-content: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
     line-height: 1.75;
-    padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
+    padding: ${e.spacing.xxxsmall} ${e.spacing.xsmall};
     max-width: 100%;
     height: auto;
     background-color: #FFFFFF;
     outline: none;
-    border: ${t.borderThickness.thin} solid #000000;
-    border-radius: ${t.borderRadius.xsmall};
+    border: ${e.borderThickness.thin} solid #000000;
+    border-radius: ${e.borderRadius.xsmall};
 
     &:focus{
-        border: ${t.borderThickness.thin} solid ${({ theme: e }) => e.colors.teal};
+        border: ${e.borderThickness.thin} solid ${({ theme: t }) => t.colors.teal};
     }
 `, ce = c.textarea`
     display: flex;
     place-content: center;
-    border: ${t.borderThickness.light} solid ${({ theme: e }) => e.colors.text};
-    border-radius: ${t.borderRadius.small};
+    border: ${e.borderThickness.light} solid ${({ theme: t }) => t.colors.text};
+    border-radius: ${e.borderRadius.small};
     outline: none;
-    line-height: ${t.spacing.small};
-    padding: ${t.spacing.xxxsmall};
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
+    line-height: ${e.spacing.small};
+    padding: ${e.spacing.xxxsmall};
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`, T = K((e, l) => {
-  const { type: o, id: i, onChange: m, isRequired: r, dataAttributes: d = {}, disabled: h, className: g } = e;
+`, D = K((t, i) => {
+  const { type: o, id: l, onChange: m, isRequired: r, dataAttributes: d = {}, disabled: h, className: f } = t;
   if (o === "textarea") {
-    const { rows: k = 5, cols: F = 30, value: v, ...A } = e;
-    return /* @__PURE__ */ n(
+    const { rows: y = 5, cols: F = 30, value: v, ...A } = t;
+    return /* @__PURE__ */ a(
       ce,
       {
         onChange: m,
         value: v,
-        rows: k,
+        rows: y,
         cols: F,
-        className: g,
-        ref: l,
+        className: f,
+        ref: i,
         disabled: h,
         required: r,
         ...A,
@@ -207,126 +205,126 @@ const t = {
     );
   }
   if (o === "radio" || o === "checkbox") {
-    const { checked: k, ...F } = e;
-    return /* @__PURE__ */ n(
+    const { checked: y, ...F } = t;
+    return /* @__PURE__ */ a(
       W,
       {
-        ref: l,
-        checked: k,
+        ref: i,
+        checked: y,
         onChange: m,
         disabled: h,
-        className: g,
+        className: f,
         ...F,
         ...d
       }
     );
   }
-  const f = e, { value: N, pattern: y, placeholderText: C, ...w } = f;
-  return /* @__PURE__ */ n(
+  const g = t, { value: N, pattern: p, placeholderText: C, ...w } = g;
+  return /* @__PURE__ */ a(
     W,
     {
       placeholder: C,
       onChange: m,
       value: N,
       required: r,
-      className: g,
-      ref: l,
+      className: f,
+      ref: i,
       disabled: h,
-      pattern: y,
+      pattern: p,
       ...w,
       ...d
     }
   );
-}), E = (e) => {
+}), E = (t) => {
   const {
-    className: l,
+    className: i,
     type: o,
-    id: i,
+    id: l,
     textLabel: m,
     additionalInfo: r,
     $labelFlexDirection: d,
     svg: h,
-    labelClass: g,
-    onChange: f,
+    labelClass: f,
+    onChange: g,
     isRequired: N,
-    dataAttributes: y,
+    dataAttributes: p,
     inputClass: C,
     ref: w,
-    disabled: k,
+    disabled: y,
     isEditable: F,
     editIcon: v,
     onClickEdit: A,
     deleteIcon: S,
     onClickDelete: z,
-    idx: D,
+    idx: T,
     children: j
-  } = e;
-  return /* @__PURE__ */ u(te, { className: `${l} ${i.replace("#", "")}-label-input-container`, children: [
-    o !== "radio" && o !== "checkbox" && /* @__PURE__ */ n(B, { htmlFor: i, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: g }),
+  } = t;
+  return /* @__PURE__ */ u(te, { className: `${i} ${l.replace("#", "")}-label-input-container`, children: [
+    o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: f }),
     o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
-      const { rows: a = 5, cols: $ = 30, value: s, ...x } = e;
-      return /* @__PURE__ */ n(
-        T,
+      const { rows: n = 5, cols: $ = 30, value: s, ...k } = t;
+      return /* @__PURE__ */ a(
+        D,
         {
-          id: i,
-          name: i,
+          id: l,
+          name: l,
           type: "textarea",
           isRequired: N,
-          onChange: f,
+          onChange: g,
           value: s,
-          rows: a,
+          rows: n,
           cols: $,
-          dataAttributes: y,
+          dataAttributes: p,
           className: C,
           ref: w,
-          disabled: k
+          disabled: y
         }
       );
     })(),
     o !== "radio" && o !== "checkbox" && o !== "textarea" && (() => {
-      const a = e, { value: $, pattern: s, placeholderText: x, ...L } = a;
-      return /* @__PURE__ */ n(
-        T,
+      const n = t, { value: $, pattern: s, placeholderText: k, ...L } = n;
+      return /* @__PURE__ */ a(
+        D,
         {
-          id: i,
-          name: i,
-          placeholderText: x,
-          onChange: f,
+          id: l,
+          name: l,
+          placeholderText: k,
+          onChange: g,
           value: $,
           type: o,
           isRequired: N,
-          dataAttributes: y,
+          dataAttributes: p,
           className: C,
           ref: w,
-          disabled: k,
+          disabled: y,
           pattern: s
         }
       );
     })(),
     (o === "radio" || o === "checkbox") && (() => {
-      const { checked: a, ...$ } = e;
+      const { checked: n, ...$ } = t;
       return /* @__PURE__ */ u(R, { children: [
-        /* @__PURE__ */ n(
-          T,
+        /* @__PURE__ */ a(
+          D,
           {
             ref: w,
             type: o,
-            name: i,
-            id: i,
+            name: l,
+            id: l,
             isRequired: N,
-            checked: a,
-            onChange: f,
-            disabled: k,
+            checked: n,
+            onChange: g,
+            disabled: y,
             className: C,
-            dataAttributes: y
+            dataAttributes: p
           }
         ),
-        /* @__PURE__ */ n(B, { htmlFor: i, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: g })
+        /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: f })
       ] });
     })(),
     F && /* @__PURE__ */ u(ae, { className: "input-edit-buttons", children: [
-      /* @__PURE__ */ n(p, { id: `editable-${i}-edit-btn`, svg: v, buttonType: "button", onClick: A, className: `edit-radio-${D}`, dataAttributes: y }),
-      /* @__PURE__ */ n(p, { id: `editable-${i}-delete-btn`, svg: S, buttonType: "button", onClick: z, className: `delete-radio-${D}`, dataAttributes: y })
+      /* @__PURE__ */ a(x, { id: `editable-${l}-edit-btn`, svg: v, buttonType: "button", onClick: A, className: `edit-radio-${T}`, dataAttributes: p }),
+      /* @__PURE__ */ a(x, { id: `editable-${l}-delete-btn`, svg: S, buttonType: "button", onClick: z, className: `delete-radio-${T}`, dataAttributes: p })
     ] }),
     j
   ] });
@@ -335,87 +333,87 @@ const t = {
     height: auto;
     width: 100%;
 `, de = c.legend`
-    font-size: ${t.spacing.medium};
+    font-size: ${e.spacing.medium};
     font-weight: 500;
-    margin: 0 auto ${t.spacing.small} auto;
+    margin: 0 auto ${e.spacing.small} auto;
     text-align: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
 `, me = c.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
-    margin-bottom: ${t.spacing.small};
+    margin-bottom: ${e.spacing.small};
 `, be = c.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
 `, P = ({
-  legend: e,
-  fieldsetIndex: l,
+  legend: t,
+  fieldsetIndex: i,
   idx: o,
-  editableInformation: i,
+  editableInformation: l,
   onChangeOfEditableOption: m,
   onClickSaveEdit: r,
   onClickCancelEdit: d,
   onClickDeleteEntry: h
-}) => (console.log(l), /* @__PURE__ */ u(re, { className: "editable-option-fieldset", children: [
-  /* @__PURE__ */ n(de, { children: `${e} ${o + 1}` }),
-  i?.map((g, f) => /* @__PURE__ */ n(me, { className: "editable-option-container", children: /* @__PURE__ */ n(
-    T,
+}) => /* @__PURE__ */ u(re, { className: "editable-option-fieldset", children: [
+  /* @__PURE__ */ a(de, { children: `${t} ${o + 1}` }),
+  l?.map((f, g) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
+    D,
     {
-      id: `editable-option-${f}`,
-      name: `editable-option-${f}`,
-      placeholderText: g.name.charAt(0).toUpperCase() + g.name.slice(1),
+      id: `editable-option-${g}`,
+      name: `editable-option-${g}`,
+      placeholderText: f.name.charAt(0).toUpperCase() + f.name.slice(1),
       onChange: m,
-      value: g.info,
-      type: g.type,
+      value: f.info,
+      type: f.type,
       isRequired: !0,
       className: "editable-option",
       dataAttributes: {
-        "data-index": f,
-        "data-fieldsetindex": l,
-        "data-key": g.info
+        "data-index": g,
+        "data-fieldsetindex": i,
+        "data-key": f.info
       }
     }
-  ) }, `${g.name}-${f}`)),
+  ) }, `${f.name}-${g}`)),
   /* @__PURE__ */ u(be, { className: "editable-option-button-space", children: [
-    /* @__PURE__ */ n(p, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: r, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
-    /* @__PURE__ */ n(p, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
-    /* @__PURE__ */ n(p, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: h, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } })
+    /* @__PURE__ */ a(x, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: r, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": i } }),
+    /* @__PURE__ */ a(x, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": i } }),
+    /* @__PURE__ */ a(x, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: h, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": i } })
   ] })
-] })), he = c.div`
+] }), he = c.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`, ge = ({
-  id: e,
-  hasSubmit: l,
+`, fe = ({
+  id: t,
+  hasSubmit: i,
   submitText: o,
-  handleSubmit: i,
+  handleSubmit: l,
   hasReset: m,
   resetText: r,
   handleReset: d,
   hasCancel: h,
-  cancelText: g,
-  handleCancel: f
+  cancelText: f,
+  handleCancel: g
 }) => /* @__PURE__ */ u(he, { className: "form-main-button-container", children: [
-  l && /* @__PURE__ */ n(p, { id: `form-${e}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: i, className: "submit-form-btn" }),
-  m && /* @__PURE__ */ n(p, { id: `form-${e}-edit`, buttonType: "button", text: r ?? "Reset", onClick: d, className: "reset-form-btn" }),
-  h && /* @__PURE__ */ n(p, { id: `form-${e}-cancel`, buttonType: "button", text: g ?? "Cancel", onClick: f, className: "cancel-form-btn" })
+  i && /* @__PURE__ */ a(x, { id: `form-${t}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: l, className: "submit-form-btn" }),
+  m && /* @__PURE__ */ a(x, { id: `form-${t}-edit`, buttonType: "button", text: r ?? "Reset", onClick: d, className: "reset-form-btn" }),
+  h && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text: f ?? "Cancel", onClick: g, className: "cancel-form-btn" })
 ] }), M = c.legend`
-    font-size: ${t.spacing.medium};
+    font-size: ${e.spacing.medium};
     font-weight: 500;
-    margin-bottom: ${t.spacing.small};
+    margin-bottom: ${e.spacing.small};
     width: auto;
     text-align: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
 `, U = c.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
 `, H = c.div`
-    padding: ${t.spacing.small};
+    padding: ${e.spacing.small};
     height: auto;
     width: 100%;
 `, O = c.div`
@@ -424,9 +422,9 @@ const t = {
     align-items: center;
     width: 100%;
     height: auto;
-    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
-    font-weight: ${t.fontWeight.bold};
+    font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
+    font-weight: ${e.fontWeight.bold};
 `, ue = c.form`
     display: flex;
     flex-direction: column;
@@ -436,86 +434,82 @@ const t = {
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, fe = c.div`
+`, ge = c.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 `, Ce = ({
-  fieldsets: e = null,
-  legendText: l,
+  fieldsets: t = null,
+  legendText: i,
   isExpandable: o,
-  id: i,
+  id: l,
   formInputs: m,
   labelAndInputContainerClass: r,
   labelClass: d,
   inputClass: h,
-  onChangeOfEditableOption: g,
-  handleAddingInputEntry: f,
+  onChangeOfEditableOption: f,
+  handleAddingInputEntry: g,
   hasSubmit: N = !1,
-  submitText: y,
+  submitText: p,
   handleSubmit: C,
   hasReset: w = !1,
-  resetText: k,
+  resetText: y,
   handleReset: F,
   hasCancel: v = !1,
   cancelText: A,
   handleCancel: S,
   handleSubmitForm: z,
-  className: D,
+  className: T,
   children: j
-}) => (console.log("Rendering DynamicForm", e), e?.forEach((a, $) => {
-  console.log("Fieldset index", $, "legend:", a.legend), a.inputs.forEach((s, x) => {
-    console.log("Input", x, "type:", s.type, "editing:", s.editing);
-  });
-}), /* @__PURE__ */ u(ue, { id: `${i}-form`, className: D, onSubmit: z, children: [
-  e ? e.map((a, $) => /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ u(U, { id: `${i}-form-fieldset-${$}`, className: `${a.legend}-fieldset`, children: [
-      a.legend && /* @__PURE__ */ n(M, { className: `${a.legend}-legend`, children: a.legend }),
-      a.inputs.length !== 0 ? a.inputs.map((s, x) => /* @__PURE__ */ u(q.Fragment, { children: [
-        s.type === "textarea" && /* @__PURE__ */ n(
+}) => /* @__PURE__ */ u(ue, { id: `${l}-form`, className: T, onSubmit: z, children: [
+  t ? t.map((n, $) => /* @__PURE__ */ u(H, { className: `${l}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ u(U, { id: `${l}-form-fieldset-${$}`, className: `${n.legend}-fieldset`, children: [
+      n.legend && /* @__PURE__ */ a(M, { className: `${n.legend}-legend`, children: n.legend }),
+      n.inputs.length !== 0 ? n.inputs.map((s, k) => /* @__PURE__ */ u(q.Fragment, { children: [
+        s.type === "textarea" && /* @__PURE__ */ a(
           E,
           {
             ...s,
-            id: s.id ?? `${a.legend}-input`,
+            id: s.id ?? `${n.legend}-input`,
             labelClass: d,
             inputClass: h,
-            idx: x,
+            idx: k,
             className: `${r} ${s?.uniqueClass}`
           }
         ),
-        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ n(
+        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ a(
           E,
           {
             ...s,
-            id: s.id ?? `${a.legend}-input`,
+            id: s.id ?? `${n.legend}-input`,
             labelClass: d,
             inputClass: h,
-            idx: x,
+            idx: k,
             className: `${r} ${s?.uniqueClass}`
           }
         ),
         (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ a(
             E,
             {
               ...s,
-              id: s.id ?? `${a.legend}-input`,
+              id: s.id ?? `${n.legend}-input`,
               labelClass: d,
               inputClass: h,
-              idx: x,
+              idx: k,
               className: `${r} ${s?.uniqueClass}`
             }
           ),
-          s.editing && s.isEditable && /* @__PURE__ */ n(
+          s.editing && s.isEditable && /* @__PURE__ */ a(
             P,
             {
-              legend: `${a.legend}`,
+              legend: `${n.legend}`,
               fieldsetIndex: $,
-              idx: x,
+              idx: k,
               editableInformation: s?.editableInformation || [],
-              onChangeOfEditableOption: g,
+              onChangeOfEditableOption: f,
               onClickSaveEdit: s?.onClickSave || ((L) => {
               }),
               onClickCancelEdit: s?.onClickCancel || ((L) => {
@@ -525,89 +519,89 @@ const t = {
             }
           )
         ] })
-      ] }, `form-${i}-${x}`)) : a.isExpandable ? /* @__PURE__ */ n(O, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
+      ] }, `form-${l}-${k}`)) : n.isExpandable ? /* @__PURE__ */ a(O, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
     ] }),
-    a.isExpandable && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": $ } }) })
-  ] }, `${a.legend}-${$}`)) : /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ u(U, { id: `${i}-form-fieldset`, className: `${l}-fieldset`, children: [
-      l && /* @__PURE__ */ n(M, { className: `${l}-legend`, children: l }),
-      !e && m && m.length !== 0 ? m.map((a, $) => /* @__PURE__ */ u(q.Fragment, { children: [
-        a.type === "textarea" && /* @__PURE__ */ n(
+    n.isExpandable && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${n.legend}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": $ } }) })
+  ] }, `${n.legend}-${$}`)) : /* @__PURE__ */ u(H, { className: `${l}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ u(U, { id: `${l}-form-fieldset`, className: `${i}-fieldset`, children: [
+      i && /* @__PURE__ */ a(M, { className: `${i}-legend`, children: i }),
+      !t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */ u(q.Fragment, { children: [
+        n.type === "textarea" && /* @__PURE__ */ a(
           E,
           {
-            ...a,
-            id: a.id ?? `${l}-input`,
+            ...n,
+            id: n.id ?? `${i}-input`,
             labelClass: d,
             inputClass: h,
             idx: $,
-            className: `${r} ${a?.uniqueClass}`
+            className: `${r} ${n?.uniqueClass}`
           }
         ),
-        a.type !== "textarea" && a.type !== "radio" && a.type !== "checkbox" && /* @__PURE__ */ n(
+        n.type !== "textarea" && n.type !== "radio" && n.type !== "checkbox" && /* @__PURE__ */ a(
           E,
           {
-            ...a,
-            id: a.id ?? `${l}-input`,
+            ...n,
+            id: n.id ?? `${i}-input`,
             labelClass: d,
             inputClass: h,
             idx: $,
-            className: `${r} ${a?.uniqueClass}`
+            className: `${r} ${n?.uniqueClass}`
           }
         ),
-        (a.type === "radio" || a.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
-          /* @__PURE__ */ n(
+        (n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
+          /* @__PURE__ */ a(
             E,
             {
-              ...a,
-              id: a.id ?? `${l}-input`,
+              ...n,
+              id: n.id ?? `${i}-input`,
               labelClass: d,
               inputClass: h,
               idx: $,
-              className: `${r} ${a?.uniqueClass}`
+              className: `${r} ${n?.uniqueClass}`
             }
           ),
-          a.editing && a.isEditable && /* @__PURE__ */ n(
+          n.editing && n.isEditable && /* @__PURE__ */ a(
             P,
             {
-              legend: `${l}`,
+              legend: `${i}`,
               idx: $,
-              editableInformation: a?.editableInformation,
-              onChangeOfEditableOption: g,
-              onClickSaveEdit: a?.onClickSave || ((s) => {
+              editableInformation: n?.editableInformation,
+              onChangeOfEditableOption: f,
+              onClickSaveEdit: n?.onClickSave || ((s) => {
               }),
-              onClickCancelEdit: a?.onClickCancel || ((s) => {
+              onClickCancelEdit: n?.onClickCancel || ((s) => {
               }),
-              onClickDeleteEntry: a?.onClickDelete || ((s) => {
+              onClickDeleteEntry: n?.onClickDelete || ((s) => {
               })
             }
           )
         ] })
-      ] }, `form-${i}-${$}`)) : o ? /* @__PURE__ */ n(O, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
+      ] }, `form-${l}-${$}`)) : o ? /* @__PURE__ */ a(O, { children: `No entry yet on ${i}. Please click "+" button to add` }) : ""
     ] }),
-    o && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry" }) })
+    o && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${i}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry" }) })
   ] }),
-  /* @__PURE__ */ n(
-    ge,
+  /* @__PURE__ */ a(
+    fe,
     {
-      id: i,
+      id: l,
       hasSubmit: N,
-      submitText: y,
+      submitText: p,
       handleSubmit: C,
       hasReset: w,
-      resetText: k,
+      resetText: y,
       handleReset: F,
       hasCancel: v,
       cancelText: A,
       handleCancel: S
     }
   ),
-  /* @__PURE__ */ n(fe, { className: "children-container", children: j })
-] })), $e = (e) => {
-  const l = /^#([0-9A-Fa-f]{3}){1,2}$/, o = /^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;
-  return l.test(e) || o.test(e) || CSS.supports("color", e);
-}, b = (e) => {
-  if (!$e(e)) throw new Error(`Invalid color: ${e}`);
-  return e;
+  /* @__PURE__ */ a(ge, { className: "children-container", children: j })
+] }), $e = (t) => {
+  const i = /^#([0-9A-Fa-f]{3}){1,2}$/, o = /^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;
+  return i.test(t) || o.test(t) || CSS.supports("color", t);
+}, b = (t) => {
+  if (!$e(t)) throw new Error(`Invalid color: ${t}`);
+  return t;
 }, we = {
   mobile: "320px",
   //Small iPhone SE & Medium: iPhone 12-15
@@ -648,14 +642,14 @@ const t = {
     error: b("#FAD4D4")
   }
 }, J = Q({}), Fe = ({
-  children: e,
-  initialTheme: l = xe,
+  children: t,
+  initialTheme: i = xe,
   secondTheme: o = pe
 }) => {
-  const [i, m] = V(l), r = () => {
-    m((d) => d === l ? o : l);
+  const [l, m] = V(i), r = () => {
+    m((d) => d === i ? o : i);
   };
-  return /* @__PURE__ */ n(J.Provider, { value: { currentTheme: i, toggleTheme: r }, children: /* @__PURE__ */ n(Y, { theme: i, children: e }) });
+  return /* @__PURE__ */ a(J.Provider, { value: { currentTheme: l, toggleTheme: r }, children: /* @__PURE__ */ a(Y, { theme: l, children: t }) });
 }, Ee = () => X(J);
 export {
   Ce as DynamicForm,

package/package.json

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