@kbgarcia8/react-dynamic-form 1.1.4 → 1.1.27

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"),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"}},J=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: ${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: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: ${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=c.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-`,Y=c.img`
+`,Q=c.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=c.span`
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.medium};
+    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
     display: flex;
     align-items: center;
     justify-content: center;
-`,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:a,id:l,buttonType:s,source:o,svg:m,alt:r="alt-button-icon",text:d="",className:b="",dataAttributes:h={}})=>e.jsx(J,{onClick:a,id:l,type:s,className:b,...h,children:e.jsxs(K,{className:"button-icon-text-space",children:[o?e.jsx(Q,{src:o,alt:r}):m||"",d&&e.jsx(V,{id:l,children:d})]})}),X=c.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=c.div`
     display: flex;
-    gap: ${n.spacing.xsmall};
+    gap: ${t.spacing.xsmall};
     width: auto;
     height: auto;
-`,ee=c.label`
+`,Z=c.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:  ${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 {
@@ -67,105 +67,111 @@
         height: auto;
         object-fit: contain;
     }
-`,te=c.span`
-    font-weight: ${n.fontWeight.bolder};
-`,ne=c.div`
+`,_=c.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: ${t.spacing.xxxsmall};
+`,ee=c.span`
+    font-weight: ${t.fontWeight.bolder};
+`,te=c.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`
+    font-weight: ${t.fontWeight.light};
+`,R=({htmlFor:a,textLabel:l,additionalInfo:s,$labelFlexDirection:o,source:m,svg:r,className:d,children:b})=>e.jsxs(Z,{htmlFor:a,className:d,$labelFlexDirection:o,children:[(m||r)&&e.jsx(te,{className:"label-icon-container",children:m?e.jsx("img",{src:m,alt:`${a}-label-icon`}):r||""}),e.jsxs(_,{className:"label-text-container",children:[e.jsx(ee,{className:"main-label",children:l}),s&&e.jsx(ae,{className:"additional-info",children:s})]}),b]}),B=c.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:a})=>a.colors.teal};
     }
-`,se=c.textarea`
+`,ne=c.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:a})=>a.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((a,l)=>{const{type:s,id:o,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,{id:o,onChange:m,value:E,rows:y,cols:N,...d,className:h,ref:l,disabled:b,required:r})}if(s==="radio"||s==="checkbox"){const{checked:y,...N}=a;return e.jsx(B,{ref:l,type:"checkbox",id:o,checked:y,onChange:m,disabled:b,className:h,...d})}const u=a,{value:j,pattern:$,placeholderText:k,...C}=u;return e.jsx(B,{id:o,name:o,placeholder:k,onChange:m,value:j,type:s,required:r,...d,className:h,ref:l,disabled:b,pattern:$})}),w=a=>{const{className:l,type:s,id:o,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(X,{className:`${l} ${o.replace("#","")}-label-input-container`,children:[s!=="radio"&&s!=="checkbox"&&e.jsx(R,{htmlFor:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h}),s!=="radio"&&s!=="checkbox"&&s==="textarea"&&(()=>{const{rows:n=5,cols:g=30,value:i,...p}=a;return e.jsx(A,{id:o,name:o,type:"textarea",isRequired:j,onChange:u,value:i,rows:n,cols:g,dataAttributes:$,className:k,ref:C,disabled:y})})(),s!=="radio"&&s!=="checkbox"&&s!=="textarea"&&(()=>{const n=a,{value:g,pattern:i,placeholderText:p,...z}=n;return e.jsx(A,{id:o,name:o,placeholderText:p,onChange:u,value:g,type:s,isRequired:j,dataAttributes:$,className:k,ref:C,disabled:y,pattern:i})})(),(s==="radio"||s==="checkbox")&&(()=>{const{checked:n,...g}=a;return e.jsxs(e.Fragment,{children:[e.jsx(A,{ref:C,type:"checkbox",name:o,id:o,isRequired:j,checked:n,onChange:u,disabled:y,className:k,dataAttributes:$}),e.jsx(R,{htmlFor:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,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=c.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,ie=c.legend`
-    font-size: ${n.spacing.medium};
+`,oe=c.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};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
 `,le=c.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=c.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:a,fieldsetIndex:l=null,idx:s,editableInformation:o,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>e.jsxs(se,{className:"editable-option-fieldset",children:[e.jsx(oe,{children:`${a} ${s+1}`}),o?.map((h,u)=>e.jsx(le,{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-key":h.info}})},`${h.name}-${u}`)),e.jsxs(ie,{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":l}}),e.jsx(f,{id:`editable-option-${s}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetIndex":l}}),e.jsx(f,{id:`editable-option-${s}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetIndex":l}})]})]}),ce=c.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:a,hasSubmit:l,submitText:s,handleSubmit:o,hasReset:m,resetText:r,handleReset:d,hasCancel:b,cancelText:h,handleCancel:u})=>e.jsxs(ce,{className:"form-main-button-container",children:[l&&e.jsx(f,{id:`form-${a}-submit`,buttonType:"submit",text:s??"Submit",onClick:o,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: ${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=c.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,G=c.div`
-    padding: ${n.spacing.small};
+`,U=c.div`
+    padding: ${t.spacing.small};
     height: auto;
     width: 100%;
-`,J=c.div`
+`,O=c.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=c.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`,K=c.div`
+`,H=c.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,xe=c.div`
+`,me=c.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:a=null,legendText:l,isExpandable:s,id:o,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:`${o}-form`,className:T,onSubmit:S,children:[a?a.map((n,g)=>e.jsxs(U,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${o}-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((i,p)=>e.jsxs(F.Fragment,{children:[i.type==="textarea"&&e.jsx(w,{...i,id:i.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${i?.uniqueClass}`}),i.type!=="textarea"&&i.type!=="radio"&&i.type!=="checkbox"&&e.jsx(w,{...i,id:i.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${i?.uniqueClass}`}),(i.type==="radio"||i.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...i,id:i.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${i?.uniqueClass}`}),i.editing&&i.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:g,idx:p,editableInformation:i?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:i?.onClickSave||(z=>{}),onClickCancelEdit:i?.onClickCancel||(z=>{}),onClickDeleteEntry:i?.onClickDelete||(z=>{})})]})]},`form-${o}-${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-fieldsetidx":g}})})]},`${n.legend}-${g}`)):e.jsxs(U,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${o}-form-fieldset`,className:`${l}-fieldset`,children:[l&&e.jsx(W,{className:`${l}-legend`,children:l}),!a&&m&&m.length!==0?m.map((n,g)=>e.jsxs(F.Fragment,{children:[n.type==="textarea"&&e.jsx(w,{...n,id:n.id??`${l}-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??`${l}-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??`${l}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),n.editing&&n.isEditable&&e.jsx(P,{legend:`${l}`,idx:g,editableInformation:n?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:n?.onClickSave||(i=>{}),onClickCancelEdit:n?.onClickCancel||(i=>{}),onClickDeleteEntry:n?.onClickDelete||(i=>{})})]})]},`form-${o}-${g}`)):s?e.jsx(O,{children:`No entry yet on ${l}. Please click "+" button to add`}):""]}),s&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${l}-inputs`,buttonType:"button",text:"+",onClick:u,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=a=>{const l=/^#([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 l.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"},I={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")}},G={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:l=I,secondTheme:s=G})=>{const[o,m]=F.useState(l),r=()=>{m(d=>d===l?s:l)};return e.jsx(L.Provider,{value:{currentTheme:o,toggleTheme:r},children:e.jsx(c.ThemeProvider,{theme:o,children:a})})},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;