@kbgarcia8/react-dynamic-form 1.1.4 → 1.1.26

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"),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"),F=require("react"),r=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"}},J=r.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: ${n.borderThickness.light} solid ${({theme:t})=>t.colors.text||"black"};
-    border-radius: ${n.borderRadius.xlarge};
-    padding: ${n.spacing.xxxsmall} ${n.spacing.small};
+    background-color: ${({theme:n})=>n.colors.blue||"blue"};
+    color: ${({theme:n})=>n.colors.bg||"white"};
+    border: ${t.borderThickness.light} solid ${({theme:n})=>n.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: ${n.borderThickness.light} solid gray;
+        border: ${t.borderThickness.light} solid gray;
     }
 
     & .button-icon-text-space {
@@ -24,42 +24,42 @@
     & .button-icon-text-space svg {
         max-width: 100%;
     }
-`,X=c.div`
+`,K=r.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-`,Y=c.img`
+`,Q=r.img`
     maxwidth: 100%;
-`,Z=c.span`
-    font-size: ${n.fontSize.xsmall};
-    font-weight: ${n.fontWeight.medium};
-    font-family: ${n.fonts.tertiary}, ${n.fonts.fallback};
+`,V=r.span`
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.medium};
+    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
     display: flex;
     align-items: center;
     justify-content: center;
-`,g=({onClick:t,id:o,buttonType:i,source:a,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:[a?e.jsx(Y,{src:a,alt:d}):r||"",m&&e.jsx(Z,{id:o,children:m})]})}),_=c.div`
+`,f=({onClick:n,id:s,buttonType:l,source:o,svg:x,alt:d="alt-button-icon",text:m="",className:c="",dataAttributes:h={}})=>e.jsx(J,{onClick:n,id:s,type:l,className:c,...h,children:e.jsxs(K,{className:"button-icon-text-space",children:[o?e.jsx(Q,{src:o,alt:d}):x||"",m&&e.jsx(V,{id:s,children:m})]})}),X=r.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${n.spacing.small};
-`,I=c.div`
+    margin-bottom: ${t.spacing.small};
+`,Y=r.div`
     display: flex;
-    gap: ${n.spacing.xsmall};
+    gap: ${t.spacing.xsmall};
     width: auto;
     height: auto;
-`,ee=c.label`
+`,Z=r.label`
     display: flex;
     align-items: center;
     justify-content:center;
     height: auto;
-    flex-direction:  ${t=>t.$labelFlexDirection||"column"};
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
-    font-weight: ${n.fontWeight.bold};
-    gap: ${n.spacing.xxsmall};
+    flex-direction:  ${n=>n.$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 {
@@ -67,105 +67,111 @@
         height: auto;
         object-fit: contain;
     }
-`,te=c.span`
-    font-weight: ${n.fontWeight.bolder};
-`,ne=c.div`
+`,_=r.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: ${t.spacing.xxxsmall};
+`,ee=r.span`
+    font-weight: ${t.fontWeight.bolder};
+`,te=r.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`,ae=c.span`
-    font-weight: ${n.fontWeight.light};
-`,P=({htmlFor:t,textLabel:o,additionalInfo:i,$labelFlexDirection:a,source:r,svg:d,className:m,children:l})=>e.jsxs(ee,{htmlFor:t,className:m,$labelFlexDirection:a,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`
+`,ne=r.span`
+    font-weight: ${t.fontWeight.light};
+`,R=({htmlFor:n,textLabel:s,additionalInfo:l,$labelFlexDirection:o,source:x,svg:d,className:m,children:c})=>e.jsxs(Z,{htmlFor:n,className:m,$labelFlexDirection:o,children:[(x||d)&&e.jsx(te,{className:"label-icon-container",children:x?e.jsx("img",{src:x,alt:`${n}-label-icon`}):d||""}),e.jsxs(_,{className:"label-text-container",children:[e.jsx(ee,{className:"main-label",children:s}),l&&e.jsx(ne,{className:"additional-info",children:l})]}),c]}),B=r.input`
     display: flex;
     place-content: center;
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
     line-height: 1.75;
-    padding: ${n.spacing.xxxsmall} ${n.spacing.xsmall};
+    padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
     max-width: 100%;
     height: auto;
     background-color: #FFFFFF;
     outline: none;
-    border: ${n.borderThickness.thin} solid #000000;
-    border-radius: ${n.borderRadius.xsmall};
+    border: ${t.borderThickness.thin} solid #000000;
+    border-radius: ${t.borderRadius.xsmall};
 
     &:focus{
-        border: ${n.borderThickness.thin} solid ${({theme:t})=>t.colors.teal};
+        border: ${t.borderThickness.thin} solid ${({theme:n})=>n.colors.teal};
     }
-`,se=c.textarea`
+`,ae=r.textarea`
     display: flex;
     place-content: center;
-    border: ${n.borderThickness.light} solid ${({theme:t})=>t.colors.text};
-    border-radius: ${n.borderRadius.small};
+    border: ${t.borderThickness.light} solid ${({theme:n})=>n.colors.text};
+    border-radius: ${t.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: ${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;
-`,z=v.forwardRef((t,o)=>{const{type:i,id:a,onChange:r,isRequired:d,dataAttributes:m,disabled:l,className:b}=t;if(i==="textarea"){const{rows:j=5,cols:w=30,value:T,...A}=t;return e.jsx(se,{id:a,onChange:r,value:T,rows:j,cols:w,...m,className:b,ref:o,disabled:l,required:d})}if(i==="radio"||i==="checkbox"){const{checked:j,...w}=t;return e.jsx(W,{ref:o,type:"checkbox",id:a,checked:j,onChange:r,disabled:l,className:b,...m})}const u=t,{value:y,pattern:f,placeholderText:p,...N}=u;return e.jsx(W,{id:a,name:a,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:a,textLabel:r,additionalInfo:d,$labelFlexDirection:m,svg:l,labelClass:b,onChange:u,isRequired:y,dataAttributes:f,inputClass:p,ref:N,disabled:j,isEditable:w,editIcon:T,onClickEdit:A,deleteIcon:R,onClickDelete:B,idx:S,children:q}=t;return e.jsxs(_,{className:`${o} ${a.replace("#","")}-label-input-container`,children:[i!=="radio"&&i!=="checkbox"&&e.jsx(P,{htmlFor:a,textLabel:r,additionalInfo:d,$labelFlexDirection:m,svg:l,className:b}),i!=="radio"&&i!=="checkbox"&&i==="textarea"&&(()=>{const{rows:k=5,cols:C=30,value:D,...s}=t;return e.jsx(z,{id:a,name:a,type:"textarea",isRequired:y,onChange:u,value:D,rows:k,cols:C,dataAttributes:f,className:p,ref:N,disabled:j})})(),i!=="radio"&&i!=="checkbox"&&i!=="textarea"&&(()=>{const k=t,{value:C,pattern:D,placeholderText:s,...$}=k;return e.jsx(z,{id:a,name:a,placeholderText:s,onChange:u,value:C,type:i,isRequired:y,dataAttributes:f,className:p,ref:N,disabled:j,pattern:D})})(),(i==="radio"||i==="checkbox")&&(()=>{const{checked:k,...C}=t;return e.jsxs(e.Fragment,{children:[e.jsx(z,{ref:N,type:"checkbox",name:a,id:a,isRequired:y,checked:k,onChange:u,disabled:j,className:p,dataAttributes:f}),e.jsx(P,{htmlFor:a,textLabel:r,additionalInfo:d,$labelFlexDirection:m,svg:l,className:b})]})})(),w&&e.jsxs(I,{className:"input-edit-buttons",children:[e.jsx(g,{id:`editable-${a}-edit-btn`,svg:T,buttonType:"button",onClick:A,className:`edit-radio-${S}`,dataAttributes:f}),e.jsx(g,{id:`editable-${a}-delete-btn`,svg:R,buttonType:"button",onClick:B,className:`delete-radio-${S}`,dataAttributes:f})]}),q]})},oe=c.fieldset`
+`,A=F.forwardRef((n,s)=>{const{type:l,id:o,onChange:x,isRequired:d,dataAttributes:m,disabled:c,className:h}=n;if(l==="textarea"){const{rows:y=5,cols:N=30,value:E,...v}=n;return e.jsx(ae,{id:o,onChange:x,value:E,rows:y,cols:N,...m,className:h,ref:s,disabled:c,required:d})}if(l==="radio"||l==="checkbox"){const{checked:y,...N}=n;return e.jsx(B,{ref:s,type:"checkbox",id:o,checked:y,onChange:x,disabled:c,className:h,...m})}const g=n,{value:j,pattern:$,placeholderText:k,...C}=g;return e.jsx(B,{id:o,name:o,placeholder:k,onChange:x,value:j,type:l,required:d,...m,className:h,ref:s,disabled:c,pattern:$})}),w=n=>{const{className:s,type:l,id:o,textLabel:x,additionalInfo:d,$labelFlexDirection:m,svg:c,labelClass:h,onChange:g,isRequired:j,dataAttributes:$,inputClass:k,ref:C,disabled:y,isEditable:N,editIcon:E,onClickEdit:v,deleteIcon:D,onClickDelete:S,idx:T,children:q}=n;return e.jsxs(X,{className:`${s} ${o.replace("#","")}-label-input-container`,children:[l!=="radio"&&l!=="checkbox"&&e.jsx(R,{htmlFor:o,textLabel:x,additionalInfo:d,$labelFlexDirection:m,svg:c,className:h}),l!=="radio"&&l!=="checkbox"&&l==="textarea"&&(()=>{const{rows:a=5,cols:u=30,value:i,...p}=n;return e.jsx(A,{id:o,name:o,type:"textarea",isRequired:j,onChange:g,value:i,rows:a,cols:u,dataAttributes:$,className:k,ref:C,disabled:y})})(),l!=="radio"&&l!=="checkbox"&&l!=="textarea"&&(()=>{const a=n,{value:u,pattern:i,placeholderText:p,...z}=a;return e.jsx(A,{id:o,name:o,placeholderText:p,onChange:g,value:u,type:l,isRequired:j,dataAttributes:$,className:k,ref:C,disabled:y,pattern:i})})(),(l==="radio"||l==="checkbox")&&(()=>{const{checked:a,...u}=n;return e.jsxs(e.Fragment,{children:[e.jsx(A,{ref:C,type:"checkbox",name:o,id:o,isRequired:j,checked:a,onChange:g,disabled:y,className:k,dataAttributes:$}),e.jsx(R,{htmlFor:o,textLabel:x,additionalInfo:d,$labelFlexDirection:m,svg:c,className:h})]})})(),N&&e.jsxs(Y,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${o}-edit-btn`,svg:E,buttonType:"button",onClick:v,className:`edit-radio-${T}`,dataAttributes:$}),e.jsx(f,{id:`editable-${o}-delete-btn`,svg:D,buttonType:"button",onClick:S,className:`delete-radio-${T}`,dataAttributes:$})]}),q]})},se=r.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,ie=c.legend`
-    font-size: ${n.spacing.medium};
+`,oe=r.legend`
+    font-size: ${t.spacing.medium};
     font-weight: 500;
-    margin: 0 auto ${n.spacing.small} auto;
+    margin: 0 auto ${t.spacing.small} auto;
     text-align: center;
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-`,le=c.div`
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+`,le=r.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
-    margin-bottom: ${n.spacing.small};
-`,ce=c.div`
+    margin-bottom: ${t.spacing.small};
+`,ie=r.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,M=({legend:t,idx:o,editableInformation:i,onChangeOfEditableOption:a,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:m})=>e.jsxs(oe,{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:a,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`
+`,P=({legend:n,idx:s,editableInformation:l,onChangeOfEditableOption:o,onClickSaveEdit:x,onClickCancelEdit:d,onClickDeleteEntry:m})=>e.jsxs(se,{className:"editable-option-fieldset",children:[e.jsx(oe,{children:`${n} ${s+1}`}),l?.map((c,h)=>e.jsx(le,{className:"editable-option-container",children:e.jsx(A,{id:`editable-option-${h}`,name:`editable-option-${h}`,placeholderText:c.name.charAt(0).toUpperCase()+c.name.slice(1),onChange:o,value:c.info,type:c.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":h,"data-key":c.info}})},`${c.name}-${h}`)),e.jsxs(ie,{className:"editable-option-button-space",children:[e.jsx(f,{id:`editable-option-${s}-submit`,buttonType:"button",text:"Save",onClick:x,className:"editable-option-btn",dataAttributes:{"data-index":s}}),e.jsx(f,{id:`editable-option-${s}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":s}}),e.jsx(f,{id:`editable-option-${s}-delete`,buttonType:"button",text:"Delete",onClick:m,className:"editable-option-btn",dataAttributes:{"data-index":s}})]})]}),ce=r.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`,de=({id:t,hasSubmit:o,submitText:i,handleSubmit:a,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:a,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`
-    font-size: ${n.spacing.medium};
+`,re=({id:n,hasSubmit:s,submitText:l,handleSubmit:o,hasReset:x,resetText:d,handleReset:m,hasCancel:c,cancelText:h,handleCancel:g})=>e.jsxs(ce,{className:"form-main-button-container",children:[s&&e.jsx(f,{id:`form-${n}-submit`,buttonType:"submit",text:l??"Submit",onClick:o,className:"submit-form-btn"}),x&&e.jsx(f,{id:`form-${n}-edit`,buttonType:"button",text:d??"Reset",onClick:m,className:"reset-form-btn"}),c&&e.jsx(f,{id:`form-${n}-cancel`,buttonType:"button",text:h??"Cancel",onClick:g,className:"cancel-form-btn"})]}),W=r.legend`
+    font-size: ${t.spacing.medium};
     font-weight: 500;
-    margin-bottom: ${n.spacing.small};
+    margin-bottom: ${t.spacing.small};
     width: auto;
     text-align: center;
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-`,H=c.fieldset`
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+`,M=r.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,G=c.div`
-    padding: ${n.spacing.small};
+`,U=r.div`
+    padding: ${t.spacing.small};
     height: auto;
     width: 100%;
-`,J=c.div`
+`,O=r.div`
     display: flex;
     justify-content: center;
     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};
-`,me=c.form`
+    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.bold};
+`,de=r.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`,K=c.div`
+`,H=r.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,xe=c.div`
+`,me=r.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,be=({fieldsets:t=null,legendText:o,isExpandable:i,id:a,formInputs:r,labelAndInputContainerClass:d,labelClass:m,inputClass:l,handleEditableInputEntryChange:b,handleAddingInputEntry:u,hasSubmit:y=!1,hasCancel:f=!1,hasDelete:p=!1,hasEdit:N=!1,submitText:j,handleSubmitForm:w,handleSubmit:T,cancelText:A,handleCancel:R,deleteText:B,handleDelete:S,editText:q,handleEdit:k,className:C,children:D})=>e.jsxs(me,{id:`${a}-form`,className:C,onSubmit:w,children:[t?t.map((s,$)=>e.jsxs(G,{className:`${a}-fieldset-wrapper`,children:[e.jsxs(H,{id:`${a}-form-fieldset-${$}`,className:`${s.legend}-fieldset`,children:[s.legend&&e.jsx(U,{children:s.legend}),s.inputs.length!==0?s.inputs.map((h,E)=>e.jsxs(v.Fragment,{children:[h.type==="textarea"&&e.jsx(F,{...h,id:h.id??`${s.legend}-input`,labelClass:m,inputClass:l,idx:E,className:d}),(h.type==="radio"||h.type==="checkbox")&&e.jsx(F,{...h,id:h.id??`${s.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??`${s.legend}-input`,labelClass:m,inputClass:l,idx:E,className:d}),h.isEditable&&h.editing&&e.jsx(M,{legend:`${s.legend} ${E+1}`,idx:E,editableInformation:h?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:h?.onClickSave,onClickCancelEdit:h?.onClickCancel,onClickDeleteEntry:h?.onClickDelete})]},`form-${a}-${E}`)):s.isExpandable?e.jsx(J,{children:`No entry yet on ${s.legend}. Click "+" button to add entry.`}):""]}),s.isExpandable&&e.jsx(K,{className:"add-input-button-space",children:e.jsx(g,{id:`expand-${s.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]},`${s.legend}-${$}`)):e.jsxs(G,{className:`${a}-fieldset-wrapper`,children:[e.jsxs(H,{id:`${a}-form-fieldset`,className:`${o}-fieldset`,children:[o&&e.jsx(U,{children:o}),!t&&r&&r.length!==0?r.map((s,$)=>e.jsxs(v.Fragment,{children:[s.type==="textarea"&&e.jsx(F,{...s,id:s.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),(s.type==="radio"||s.type==="checkbox")&&e.jsx(F,{...s,id:s.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),s.type!=="textarea"&&s.type!=="radio"&&s.type!=="checkbox"&&e.jsx(F,{...s,id:s.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),s.isEditable&&s.editing&&e.jsx(M,{legend:`${o} ${$+1}`,idx:$,editableInformation:s?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:s?.onClickSave,onClickCancelEdit:s?.onClickEdit,onClickDeleteEntry:s?.onClickDelete})]},`form-${a}-${$}`)):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:a,hasSubmit:y,submitText:j,handleSubmit:T,hasEdit:N,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),a=()=>{i(r=>r===L?Q:L)};return e.jsx(O.Provider,{value:{currentTheme:o,toggleTheme:a},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:n=null,legendText:s,isExpandable:l,id:o,formInputs:x,labelAndInputContainerClass:d,labelClass:m,inputClass:c,onChangeOfEditableOption:h,handleAddingInputEntry:g,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:`${o}-form`,className:T,onSubmit:S,children:[n?n.map((a,u)=>e.jsxs(U,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${o}-form-fieldset-${u}`,className:`${a.legend}-fieldset`,children:[a.legend&&e.jsx(W,{className:`${a.legend}-legend`,children:a.legend}),a.inputs.length!==0?a.inputs.map((i,p)=>e.jsxs(F.Fragment,{children:[i.type==="textarea"&&e.jsx(w,{...i,id:i.id??`${a.legend}-input`,labelClass:m,inputClass:c,idx:p,className:`${d} ${i?.uniqueClass}`}),i.type!=="textarea"&&i.type!=="radio"&&i.type!=="checkbox"&&e.jsx(w,{...i,id:i.id??`${a.legend}-input`,labelClass:m,inputClass:c,idx:p,className:`${d} ${i?.uniqueClass}`}),(i.type==="radio"||i.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...i,id:i.id??`${a.legend}-input`,labelClass:m,inputClass:c,idx:p,className:`${d} ${i?.uniqueClass}`}),i.editing&&i.isEditable&&e.jsx(P,{legend:`${a.legend}`,idx:p,editableInformation:i?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:i?.onClickSave||(z=>{}),onClickCancelEdit:i?.onClickCancel||(z=>{}),onClickDeleteEntry:i?.onClickDelete||(z=>{})})]})]},`form-${o}-${p}`)):a.isExpandable?e.jsx(O,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.isExpandable&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]},`${a.legend}-${u}`)):e.jsxs(U,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${o}-form-fieldset`,className:`${s}-fieldset`,children:[s&&e.jsx(W,{className:`${s}-legend`,children:s}),!n&&x&&x.length!==0?x.map((a,u)=>e.jsxs(F.Fragment,{children:[a.type==="textarea"&&e.jsx(w,{...a,id:a.id??`${s}-input`,labelClass:m,inputClass:c,idx:u,className:`${d} ${a?.uniqueClass}`}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(w,{...a,id:a.id??`${s}-input`,labelClass:m,inputClass:c,idx:u,className:`${d} ${a?.uniqueClass}`}),(a.type==="radio"||a.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...a,id:a.id??`${s}-input`,labelClass:m,inputClass:c,idx:u,className:`${d} ${a?.uniqueClass}`}),a.editing&&a.isEditable&&e.jsx(P,{legend:`${s}`,idx:u,editableInformation:a?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:a?.onClickSave||(i=>{}),onClickCancelEdit:a?.onClickCancel||(i=>{}),onClickDeleteEntry:a?.onClickDelete||(i=>{})})]})]},`form-${o}-${u}`)):l?e.jsx(O,{children:`No entry yet on ${s}. Please click "+" button to add`}):""]}),l&&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:o,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=n=>{const s=/^#([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 s.test(n)||l.test(n)||CSS.supports("color",n)},b=n=>{if(!be(n))throw new Error(`Invalid color: ${n}`);return n},he={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},I={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")}},G={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")}},L=F.createContext({}),ue=({children:n,initialTheme:s=I,secondTheme:l=G})=>{const[o,x]=F.useState(s),d=()=>{x(m=>m===s?l:s)};return e.jsx(L.Provider,{value:{currentTheme:o,toggleTheme:d},children:e.jsx(r.ThemeProvider,{theme:o,children:n})})},ge=()=>F.useContext(L);exports.DynamicForm=xe;exports.ThemeContext=L;exports.ThemeContextProvider=ue;exports.breakpoints=he;exports.darkTheme=G;exports.lightTheme=I;exports.useTheme=ge;