@kbgarcia8/react-dynamic-form 1.1.37 → 1.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/atoms/Button/Button.d.ts +1 -1
  2. package/dist/components/atoms/Button/Button.d.ts.map +1 -1
  3. package/dist/components/molecules/NestedEditableOption/NestedEditableOption.d.ts.map +1 -1
  4. package/dist/components/organisms/DynamicForm/DynamicForm.d.ts.map +1 -1
  5. package/dist/react-dynamic-form.cjs.js +50 -50
  6. package/dist/react-dynamic-form.es.js +230 -239
  7. package/package.json +1 -1
package/dist/components/atoms/Button/Button.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import type { ButtonProps } from "../../../type/propTypes";
2
- declare const Button: ({ onClick, id, buttonType, source, svg, alt, text, className, dataAttributes, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const Button: ({ onClick, id, buttonType, source, svg, alt, text, className, dataAttributes }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default Button;
4
4
  //# sourceMappingURL=Button.d.ts.map
package/dist/components/atoms/Button/Button.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAA,MAAM,MAAM,GAAI,gFAUd,WAAW,4CAgBZ,CAAA;AAED,eAAe,MAAM,CAAC"}
package/dist/components/molecules/NestedEditableOption/NestedEditableOption.d.ts.map CHANGED
@@ -1 +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"}
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,4CA8B1B,CAAA;AAED,eAAe,oBAAoB,CAAC"}
package/dist/components/organisms/DynamicForm/DynamicForm.d.ts.map CHANGED
@@ -1 +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"}
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,4CAmJ1C,CAAA;AAGD,eAAe,WAAW,CAAC"}
package/dist/react-dynamic-form.cjs.js CHANGED
@@ -1,12 +1,12 @@
1
- "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`
1
+ "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`
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: center;
5
- background-color: ${({theme:t})=>t.colors.blue||"blue"};
6
- color: ${({theme:t})=>t.colors.bg||"white"};
7
- border: ${a.borderThickness.light} solid ${({theme:t})=>t.colors.text||"black"};
8
- border-radius: ${a.borderRadius.xlarge};
9
- padding: ${a.spacing.xxxsmall} ${a.spacing.small};
5
+ background-color: ${({theme:a})=>a.colors.blue||"blue"};
6
+ color: ${({theme:a})=>a.colors.bg||"white"};
7
+ border: ${t.borderThickness.light} solid ${({theme:a})=>a.colors.text||"black"};
8
+ border-radius: ${t.borderRadius.xlarge};
9
+ padding: ${t.spacing.xxxsmall} ${t.spacing.small};
10
10
  margin: 0.125rem;
11
11
  width: auto;
12
12
  cursor: pointer;
@@ -14,7 +14,7 @@
14
14
 
15
15
  &:hover {
16
16
  background-color: lightblue;
17
- border: ${a.borderThickness.light} solid gray;
17
+ border: ${t.borderThickness.light} solid gray;
18
18
  }
19
19
 
20
20
  & .button-icon-text-space {
@@ -33,21 +33,21 @@
33
33
  `,V=c.img`
34
34
  maxwidth: 100%;
35
35
  `,X=c.span`
36
- font-size: ${a.fontSize.xsmall};
37
- font-weight: ${a.fontWeight.medium};
38
- font-family: ${a.fonts.tertiary}, ${a.fonts.fallback};
36
+ font-size: ${t.fontSize.xsmall};
37
+ font-weight: ${t.fontWeight.medium};
38
+ font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
39
39
  display: flex;
40
40
  align-items: center;
41
41
  justify-content: center;
42
- `,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`
42
+ `,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`
43
43
  display: flex;
44
44
  flex-direction: column;
45
45
  align-items: left;
46
46
  width: 100%;
47
- margin-bottom: ${a.spacing.small};
47
+ margin-bottom: ${t.spacing.small};
48
48
  `,Z=c.div`
49
49
  display: flex;
50
- gap: ${a.spacing.xsmall};
50
+ gap: ${t.spacing.xsmall};
51
51
  width: auto;
52
52
  height: auto;
53
53
  `,_=c.label`
@@ -55,11 +55,11 @@
55
55
  align-items: center;
56
56
  justify-content:center;
57
57
  height: auto;
58
- flex-direction: ${t=>t.$labelFlexDirection||"column"};
59
- font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
60
- font-size: ${a.fontSize.xsmall};
61
- font-weight: ${a.fontWeight.bold};
62
- gap: ${a.spacing.xxsmall};
58
+ flex-direction: ${a=>a.$labelFlexDirection||"column"};
59
+ font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
60
+ font-size: ${t.fontSize.xsmall};
61
+ font-weight: ${t.fontWeight.bold};
62
+ gap: ${t.spacing.xxsmall};
63
63
 
64
64
  & .label-icon-container img,
65
65
  & .label-icon-container svg {
@@ -72,82 +72,82 @@
72
72
  flex-direction: column;
73
73
  align-items: center;
74
74
  justify-content: center;
75
- gap: ${a.spacing.xxxsmall};
75
+ gap: ${t.spacing.xxxsmall};
76
76
  `,ee=c.span`
77
- font-weight: ${a.fontWeight.bolder};
77
+ font-weight: ${t.fontWeight.bolder};
78
78
  `,te=c.div`
79
79
  max-width: 100%;
80
80
  display: flex;
81
81
  align-items: center;
82
82
  `,ae=c.span`
83
- font-weight: ${a.fontWeight.light};
84
- `,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`
83
+ font-weight: ${t.fontWeight.light};
84
+ `,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`
85
85
  display: flex;
86
86
  place-content: center;
87
- font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
88
- font-size: ${a.fontSize.xsmall};
87
+ font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
88
+ font-size: ${t.fontSize.xsmall};
89
89
  line-height: 1.75;
90
- padding: ${a.spacing.xxxsmall} ${a.spacing.xsmall};
90
+ padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
91
91
  max-width: 100%;
92
92
  height: auto;
93
93
  background-color: #FFFFFF;
94
94
  outline: none;
95
- border: ${a.borderThickness.thin} solid #000000;
96
- border-radius: ${a.borderRadius.xsmall};
95
+ border: ${t.borderThickness.thin} solid #000000;
96
+ border-radius: ${t.borderRadius.xsmall};
97
97
 
98
98
  &:focus{
99
- border: ${a.borderThickness.thin} solid ${({theme:t})=>t.colors.teal};
99
+ border: ${t.borderThickness.thin} solid ${({theme:a})=>a.colors.teal};
100
100
  }
101
101
  `,ne=c.textarea`
102
102
  display: flex;
103
103
  place-content: center;
104
- border: ${a.borderThickness.light} solid ${({theme:t})=>t.colors.text};
105
- border-radius: ${a.borderRadius.small};
104
+ border: ${t.borderThickness.light} solid ${({theme:a})=>a.colors.text};
105
+ border-radius: ${t.borderRadius.small};
106
106
  outline: none;
107
- line-height: ${a.spacing.small};
108
- padding: ${a.spacing.xxxsmall};
109
- font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
110
- font-size: ${a.fontSize.xsmall};
107
+ line-height: ${t.spacing.small};
108
+ padding: ${t.spacing.xxxsmall};
109
+ font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
110
+ font-size: ${t.fontSize.xsmall};
111
111
  max-width: 100%;
112
112
  resize: none;
113
113
  overflow-y: auto;
114
- `,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`
114
+ `,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`
115
115
  padding: 0;
116
116
  height: auto;
117
117
  width: 100%;
118
- `,se=c.legend`
119
- font-size: ${a.spacing.medium};
118
+ `,oe=c.legend`
119
+ font-size: ${t.spacing.medium};
120
120
  font-weight: 500;
121
- margin: 0 auto ${a.spacing.small} auto;
121
+ margin: 0 auto ${t.spacing.small} auto;
122
122
  text-align: center;
123
- font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
123
+ font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
124
124
  `,ie=c.div`
125
125
  display: flex;
126
126
  flex-direction: column;
127
127
  align-items: flex-start;
128
128
  width: 100%;
129
- margin-bottom: ${a.spacing.small};
129
+ margin-bottom: ${t.spacing.small};
130
130
  `,le=c.div`
131
131
  display: flex;
132
132
  justify-content: space-between;
133
133
  width: 100%;
134
- `,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.jsxs(se,{children:[`${t} ${o+1}`,`fieldsetIndex: ${s}`]}),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`
134
+ `,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`
135
135
  display: flex;
136
136
  justify-content: space-between;
137
137
  max-width: 100%;
138
- `,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`
139
- font-size: ${a.spacing.medium};
138
+ `,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`
139
+ font-size: ${t.spacing.medium};
140
140
  font-weight: 500;
141
- margin-bottom: ${a.spacing.small};
141
+ margin-bottom: ${t.spacing.small};
142
142
  width: auto;
143
143
  text-align: center;
144
- font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
144
+ font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
145
145
  `,M=c.fieldset`
146
146
  padding: 0;
147
147
  height: auto;
148
148
  width: 100%;
149
149
  `,U=c.div`
150
- padding: ${a.spacing.small};
150
+ padding: ${t.spacing.small};
151
151
  height: auto;
152
152
  width: 100%;
153
153
  `,O=c.div`
@@ -156,9 +156,9 @@
156
156
  align-items: center;
157
157
  width: 100%;
158
158
  height: auto;
159
- font-family: ${a.fonts.tertiary}, ${a.fonts.fallback};
160
- font-size: ${a.fontSize.xsmall};
161
- font-weight: ${a.fontWeight.bold};
159
+ font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
160
+ font-size: ${t.fontSize.xsmall};
161
+ font-weight: ${t.fontWeight.bold};
162
162
  `,de=c.form`
163
163
  display: flex;
164
164
  flex-direction: column;
@@ -174,4 +174,4 @@
174
174
  flex-direction: column;
175
175
  align-items: center;
176
176
  justify-content: center;
177
- `,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;
177
+ `,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 CHANGED
@@ -1,7 +1,7 @@
1
- import { jsx as n, jsxs as u, Fragment as R } from "react/jsx-runtime";
1
+ import { jsx as a, jsxs as u, Fragment as R } from "react/jsx-runtime";
2
2
  import q, { forwardRef as K, createContext as Q, useState as V, useContext as X } from "react";
3
3
  import c, { ThemeProvider as Y } from "styled-components";
4
- const t = {
4
+ const e = {
5
5
  fonts: {
6
6
  secondary: "Raleway",
7
7
  tertiary: "Lato",
@@ -36,11 +36,11 @@ const t = {
36
36
  display: flex;
37
37
  align-items: center;
38
38
  justify-content: center;
39
- background-color: ${({ theme: e }) => e.colors.blue || "blue"};
40
- color: ${({ theme: e }) => e.colors.bg || "white"};
41
- border: ${t.borderThickness.light} solid ${({ theme: e }) => e.colors.text || "black"};
42
- border-radius: ${t.borderRadius.xlarge};
43
- padding: ${t.spacing.xxxsmall} ${t.spacing.small};
39
+ background-color: ${({ theme: t }) => t.colors.blue || "blue"};
40
+ color: ${({ theme: t }) => t.colors.bg || "white"};
41
+ border: ${e.borderThickness.light} solid ${({ theme: t }) => t.colors.text || "black"};
42
+ border-radius: ${e.borderRadius.xlarge};
43
+ padding: ${e.spacing.xxxsmall} ${e.spacing.small};
44
44
  margin: 0.125rem;
45
45
  width: auto;
46
46
  cursor: pointer;
@@ -48,7 +48,7 @@ const t = {
48
48
 
49
49
  &:hover {
50
50
  background-color: lightblue;
51
- border: ${t.borderThickness.light} solid gray;
51
+ border: ${e.borderThickness.light} solid gray;
52
52
  }
53
53
 
54
54
  & .button-icon-text-space {
@@ -67,35 +67,33 @@ const t = {
67
67
  `, I = c.img`
68
68
  maxwidth: 100%;
69
69
  `, ee = c.span`
70
- font-size: ${t.fontSize.xsmall};
71
- font-weight: ${t.fontWeight.medium};
72
- font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
70
+ font-size: ${e.fontSize.xsmall};
71
+ font-weight: ${e.fontWeight.medium};
72
+ font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
73
73
  display: flex;
74
74
  align-items: center;
75
75
  justify-content: center;
76
- `, p = ({
77
- onClick: e,
78
- id: l,
76
+ `, x = ({
77
+ onClick: t,
78
+ id: i,
79
79
  buttonType: o,
80
- source: i,
80
+ source: l,
81
81
  svg: m,
82
82
  alt: r = "alt-button-icon",
83
83
  text: d = "",
84
84
  className: h = "",
85
- dataAttributes: g = {},
86
- ...$
87
- }) => /* @__PURE__ */ n(
85
+ dataAttributes: f = {}
86
+ }) => /* @__PURE__ */ a(
88
87
  Z,
89
88
  {
90
- id: l,
89
+ onClick: t,
90
+ id: i,
91
91
  type: o,
92
- onClick: e,
93
92
  className: h,
94
- ...$,
95
- ...g,
93
+ ...f,
96
94
  children: /* @__PURE__ */ u(_, { className: "button-icon-text-space", children: [
97
- i ? /* @__PURE__ */ n(I, { src: i, alt: r }) : m || "",
98
- d && /* @__PURE__ */ n(ee, { id: l, children: d })
95
+ l ? /* @__PURE__ */ a(I, { src: l, alt: r }) : m || "",
96
+ d && /* @__PURE__ */ a(ee, { id: i, children: d })
99
97
  ] })
100
98
  }
101
99
  ), te = c.div`
@@ -103,10 +101,10 @@ const t = {
103
101
  flex-direction: column;
104
102
  align-items: left;
105
103
  width: 100%;
106
- margin-bottom: ${t.spacing.small};
104
+ margin-bottom: ${e.spacing.small};
107
105
  `, ae = c.div`
108
106
  display: flex;
109
- gap: ${t.spacing.xsmall};
107
+ gap: ${e.spacing.xsmall};
110
108
  width: auto;
111
109
  height: auto;
112
110
  `, ne = c.label`
@@ -114,11 +112,11 @@ const t = {
114
112
  align-items: center;
115
113
  justify-content:center;
116
114
  height: auto;
117
- flex-direction: ${(e) => e.$labelFlexDirection || "column"};
118
- font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
119
- font-size: ${t.fontSize.xsmall};
120
- font-weight: ${t.fontWeight.bold};
121
- gap: ${t.spacing.xxsmall};
115
+ flex-direction: ${(t) => t.$labelFlexDirection || "column"};
116
+ font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
117
+ font-size: ${e.fontSize.xsmall};
118
+ font-weight: ${e.fontWeight.bold};
119
+ gap: ${e.spacing.xxsmall};
122
120
 
123
121
  & .label-icon-container img,
124
122
  & .label-icon-container svg {
@@ -131,74 +129,74 @@ const t = {
131
129
  flex-direction: column;
132
130
  align-items: center;
133
131
  justify-content: center;
134
- gap: ${t.spacing.xxxsmall};
135
- `, le = c.span`
136
- font-weight: ${t.fontWeight.bolder};
137
- `, ie = c.div`
132
+ gap: ${e.spacing.xxxsmall};
133
+ `, ie = c.span`
134
+ font-weight: ${e.fontWeight.bolder};
135
+ `, le = c.div`
138
136
  max-width: 100%;
139
137
  display: flex;
140
138
  align-items: center;
141
139
  `, se = c.span`
142
- font-weight: ${t.fontWeight.light};
140
+ font-weight: ${e.fontWeight.light};
143
141
  `, B = ({
144
- htmlFor: e,
145
- textLabel: l,
142
+ htmlFor: t,
143
+ textLabel: i,
146
144
  additionalInfo: o,
147
- $labelFlexDirection: i,
145
+ $labelFlexDirection: l,
148
146
  source: m,
149
147
  svg: r,
150
148
  className: d,
151
149
  children: h
152
- }) => /* @__PURE__ */ u(ne, { htmlFor: e, className: d, $labelFlexDirection: i, children: [
153
- (m || r) && /* @__PURE__ */ n(ie, { className: "label-icon-container", children: m ? /* @__PURE__ */ n("img", { src: m, alt: `${e}-label-icon` }) : r || "" }),
150
+ }) => /* @__PURE__ */ u(ne, { htmlFor: t, className: d, $labelFlexDirection: l, children: [
151
+ (m || r) && /* @__PURE__ */ a(le, { className: "label-icon-container", children: m ? /* @__PURE__ */ a("img", { src: m, alt: `${t}-label-icon` }) : r || "" }),
154
152
  /* @__PURE__ */ u(oe, { className: "label-text-container", children: [
155
- /* @__PURE__ */ n(le, { className: "main-label", children: l }),
156
- o && /* @__PURE__ */ n(se, { className: "additional-info", children: o })
153
+ /* @__PURE__ */ a(ie, { className: "main-label", children: i }),
154
+ o && /* @__PURE__ */ a(se, { className: "additional-info", children: o })
157
155
  ] }),
158
156
  h
159
157
  ] }), W = c.input`
160
158
  display: flex;
161
159
  place-content: center;
162
- font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
163
- font-size: ${t.fontSize.xsmall};
160
+ font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
161
+ font-size: ${e.fontSize.xsmall};
164
162
  line-height: 1.75;
165
- padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
163
+ padding: ${e.spacing.xxxsmall} ${e.spacing.xsmall};
166
164
  max-width: 100%;
167
165
  height: auto;
168
166
  background-color: #FFFFFF;
169
167
  outline: none;
170
- border: ${t.borderThickness.thin} solid #000000;
171
- border-radius: ${t.borderRadius.xsmall};
168
+ border: ${e.borderThickness.thin} solid #000000;
169
+ border-radius: ${e.borderRadius.xsmall};
172
170
 
173
171
  &:focus{
174
- border: ${t.borderThickness.thin} solid ${({ theme: e }) => e.colors.teal};
172
+ border: ${e.borderThickness.thin} solid ${({ theme: t }) => t.colors.teal};
175
173
  }
176
174
  `, ce = c.textarea`
177
175
  display: flex;
178
176
  place-content: center;
179
- border: ${t.borderThickness.light} solid ${({ theme: e }) => e.colors.text};
180
- border-radius: ${t.borderRadius.small};
177
+ border: ${e.borderThickness.light} solid ${({ theme: t }) => t.colors.text};
178
+ border-radius: ${e.borderRadius.small};
181
179
  outline: none;
182
- line-height: ${t.spacing.small};
183
- padding: ${t.spacing.xxxsmall};
184
- font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
185
- font-size: ${t.fontSize.xsmall};
180
+ line-height: ${e.spacing.small};
181
+ padding: ${e.spacing.xxxsmall};
182
+ font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
183
+ font-size: ${e.fontSize.xsmall};
186
184
  max-width: 100%;
187
185
  resize: none;
188
186
  overflow-y: auto;
189
- `, T = K((e, l) => {
190
- const { type: o, id: i, onChange: m, isRequired: r, dataAttributes: d = {}, disabled: h, className: g } = e;
187
+ `, D = K((t, i) => {
188
+ const { type: o, id: l, onChange: m, isRequired: r, dataAttributes: d = {}, disabled: h, className: f } = t;
191
189
  if (o === "textarea") {
192
- const { rows: k = 5, cols: F = 30, value: v, ...A } = e;
193
- return /* @__PURE__ */ n(
190
+ const { rows: y = 5, cols: F = 30, value: v, ...A } = t;
191
+ return /* @__PURE__ */ a(
194
192
  ce,
195
193
  {
196
194
  onChange: m,
197
195
  value: v,
198
- rows: k,
196
+ rows: y,
199
197
  cols: F,
200
- className: g,
201
- ref: l,
198
+ className: f,
199
+ ref: i,
202
200
  disabled: h,
203
201
  required: r,
204
202
  ...A,
@@ -207,126 +205,126 @@ const t = {
207
205
  );
208
206
  }
209
207
  if (o === "radio" || o === "checkbox") {
210
- const { checked: k, ...F } = e;
211
- return /* @__PURE__ */ n(
208
+ const { checked: y, ...F } = t;
209
+ return /* @__PURE__ */ a(
212
210
  W,
213
211
  {
214
- ref: l,
215
- checked: k,
212
+ ref: i,
213
+ checked: y,
216
214
  onChange: m,
217
215
  disabled: h,
218
- className: g,
216
+ className: f,
219
217
  ...F,
220
218
  ...d
221
219
  }
222
220
  );
223
221
  }
224
- const $ = e, { value: N, pattern: y, placeholderText: C, ...w } = $;
225
- return /* @__PURE__ */ n(
222
+ const g = t, { value: N, pattern: p, placeholderText: C, ...w } = g;
223
+ return /* @__PURE__ */ a(
226
224
  W,
227
225
  {
228
226
  placeholder: C,
229
227
  onChange: m,
230
228
  value: N,
231
229
  required: r,
232
- className: g,
233
- ref: l,
230
+ className: f,
231
+ ref: i,
234
232
  disabled: h,
235
- pattern: y,
233
+ pattern: p,
236
234
  ...w,
237
235
  ...d
238
236
  }
239
237
  );
240
- }), E = (e) => {
238
+ }), E = (t) => {
241
239
  const {
242
- className: l,
240
+ className: i,
243
241
  type: o,
244
- id: i,
242
+ id: l,
245
243
  textLabel: m,
246
244
  additionalInfo: r,
247
245
  $labelFlexDirection: d,
248
246
  svg: h,
249
- labelClass: g,
250
- onChange: $,
247
+ labelClass: f,
248
+ onChange: g,
251
249
  isRequired: N,
252
- dataAttributes: y,
250
+ dataAttributes: p,
253
251
  inputClass: C,
254
252
  ref: w,
255
- disabled: k,
253
+ disabled: y,
256
254
  isEditable: F,
257
255
  editIcon: v,
258
256
  onClickEdit: A,
259
257
  deleteIcon: S,
260
258
  onClickDelete: z,
261
- idx: D,
259
+ idx: T,
262
260
  children: j
263
- } = e;
264
- return /* @__PURE__ */ u(te, { className: `${l} ${i.replace("#", "")}-label-input-container`, children: [
265
- o !== "radio" && o !== "checkbox" && /* @__PURE__ */ n(B, { htmlFor: i, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: g }),
261
+ } = t;
262
+ return /* @__PURE__ */ u(te, { className: `${i} ${l.replace("#", "")}-label-input-container`, children: [
263
+ o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: f }),
266
264
  o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
267
- const { rows: a = 5, cols: f = 30, value: s, ...x } = e;
268
- return /* @__PURE__ */ n(
269
- T,
265
+ const { rows: n = 5, cols: $ = 30, value: s, ...k } = t;
266
+ return /* @__PURE__ */ a(
267
+ D,
270
268
  {
271
- id: i,
272
- name: i,
269
+ id: l,
270
+ name: l,
273
271
  type: "textarea",
274
272
  isRequired: N,
275
- onChange: $,
273
+ onChange: g,
276
274
  value: s,
277
- rows: a,
278
- cols: f,
279
- dataAttributes: y,
275
+ rows: n,
276
+ cols: $,
277
+ dataAttributes: p,
280
278
  className: C,
281
279
  ref: w,
282
- disabled: k
280
+ disabled: y
283
281
  }
284
282
  );
285
283
  })(),
286
284
  o !== "radio" && o !== "checkbox" && o !== "textarea" && (() => {
287
- const a = e, { value: f, pattern: s, placeholderText: x, ...L } = a;
288
- return /* @__PURE__ */ n(
289
- T,
285
+ const n = t, { value: $, pattern: s, placeholderText: k, ...L } = n;
286
+ return /* @__PURE__ */ a(
287
+ D,
290
288
  {
291
- id: i,
292
- name: i,
293
- placeholderText: x,
294
- onChange: $,
295
- value: f,
289
+ id: l,
290
+ name: l,
291
+ placeholderText: k,
292
+ onChange: g,
293
+ value: $,
296
294
  type: o,
297
295
  isRequired: N,
298
- dataAttributes: y,
296
+ dataAttributes: p,
299
297
  className: C,
300
298
  ref: w,
301
- disabled: k,
299
+ disabled: y,
302
300
  pattern: s
303
301
  }
304
302
  );
305
303
  })(),
306
304
  (o === "radio" || o === "checkbox") && (() => {
307
- const { checked: a, ...f } = e;
305
+ const { checked: n, ...$ } = t;
308
306
  return /* @__PURE__ */ u(R, { children: [
309
- /* @__PURE__ */ n(
310
- T,
307
+ /* @__PURE__ */ a(
308
+ D,
311
309
  {
312
310
  ref: w,
313
311
  type: o,
314
- name: i,
315
- id: i,
312
+ name: l,
313
+ id: l,
316
314
  isRequired: N,
317
- checked: a,
318
- onChange: $,
319
- disabled: k,
315
+ checked: n,
316
+ onChange: g,
317
+ disabled: y,
320
318
  className: C,
321
- dataAttributes: y
319
+ dataAttributes: p
322
320
  }
323
321
  ),
324
- /* @__PURE__ */ n(B, { htmlFor: i, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: g })
322
+ /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: f })
325
323
  ] });
326
324
  })(),
327
325
  F && /* @__PURE__ */ u(ae, { className: "input-edit-buttons", children: [
328
- /* @__PURE__ */ n(p, { id: `editable-${i}-edit-btn`, svg: v, buttonType: "button", onClick: A, className: `edit-radio-${D}`, dataAttributes: y }),
329
- /* @__PURE__ */ n(p, { id: `editable-${i}-delete-btn`, svg: S, buttonType: "button", onClick: z, className: `delete-radio-${D}`, dataAttributes: y })
326
+ /* @__PURE__ */ a(x, { id: `editable-${l}-edit-btn`, svg: v, buttonType: "button", onClick: A, className: `edit-radio-${T}`, dataAttributes: p }),
327
+ /* @__PURE__ */ a(x, { id: `editable-${l}-delete-btn`, svg: S, buttonType: "button", onClick: z, className: `delete-radio-${T}`, dataAttributes: p })
330
328
  ] }),
331
329
  j
332
330
  ] });
@@ -335,90 +333,87 @@ const t = {
335
333
  height: auto;
336
334
  width: 100%;
337
335
  `, de = c.legend`
338
- font-size: ${t.spacing.medium};
336
+ font-size: ${e.spacing.medium};
339
337
  font-weight: 500;
340
- margin: 0 auto ${t.spacing.small} auto;
338
+ margin: 0 auto ${e.spacing.small} auto;
341
339
  text-align: center;
342
- font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
340
+ font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
343
341
  `, me = c.div`
344
342
  display: flex;
345
343
  flex-direction: column;
346
344
  align-items: flex-start;
347
345
  width: 100%;
348
- margin-bottom: ${t.spacing.small};
346
+ margin-bottom: ${e.spacing.small};
349
347
  `, be = c.div`
350
348
  display: flex;
351
349
  justify-content: space-between;
352
350
  width: 100%;
353
351
  `, P = ({
354
- legend: e,
355
- fieldsetIndex: l,
352
+ legend: t,
353
+ fieldsetIndex: i,
356
354
  idx: o,
357
- editableInformation: i,
355
+ editableInformation: l,
358
356
  onChangeOfEditableOption: m,
359
357
  onClickSaveEdit: r,
360
358
  onClickCancelEdit: d,
361
359
  onClickDeleteEntry: h
362
- }) => (console.log(l), /* @__PURE__ */ u(re, { className: "editable-option-fieldset", children: [
363
- /* @__PURE__ */ u(de, { children: [
364
- `${e} ${o + 1}`,
365
- `fieldsetIndex: ${l}`
366
- ] }),
367
- i?.map((g, $) => /* @__PURE__ */ n(me, { className: "editable-option-container", children: /* @__PURE__ */ n(
368
- T,
360
+ }) => /* @__PURE__ */ u(re, { className: "editable-option-fieldset", children: [
361
+ /* @__PURE__ */ a(de, { children: `${t} ${o + 1}` }),
362
+ l?.map((f, g) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
363
+ D,
369
364
  {
370
- id: `editable-option-${$}`,
371
- name: `editable-option-${$}`,
372
- placeholderText: g.name.charAt(0).toUpperCase() + g.name.slice(1),
365
+ id: `editable-option-${g}`,
366
+ name: `editable-option-${g}`,
367
+ placeholderText: f.name.charAt(0).toUpperCase() + f.name.slice(1),
373
368
  onChange: m,
374
- value: g.info,
375
- type: g.type,
369
+ value: f.info,
370
+ type: f.type,
376
371
  isRequired: !0,
377
372
  className: "editable-option",
378
373
  dataAttributes: {
379
- "data-index": $,
380
- "data-fieldsetindex": l,
381
- "data-key": g.info
374
+ "data-index": g,
375
+ "data-fieldsetindex": i,
376
+ "data-key": f.info
382
377
  }
383
378
  }
384
- ) }, `${g.name}-${$}`)),
379
+ ) }, `${f.name}-${g}`)),
385
380
  /* @__PURE__ */ u(be, { className: "editable-option-button-space", children: [
386
- /* @__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 } }),
387
- /* @__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 } }),
388
- /* @__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 } })
381
+ /* @__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 } }),
382
+ /* @__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 } }),
383
+ /* @__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 } })
389
384
  ] })
390
- ] })), he = c.div`
385
+ ] }), he = c.div`
391
386
  display: flex;
392
387
  justify-content: space-between;
393
388
  max-width: 100%;
394
- `, ge = ({
395
- id: e,
396
- hasSubmit: l,
389
+ `, fe = ({
390
+ id: t,
391
+ hasSubmit: i,
397
392
  submitText: o,
398
- handleSubmit: i,
393
+ handleSubmit: l,
399
394
  hasReset: m,
400
395
  resetText: r,
401
396
  handleReset: d,
402
397
  hasCancel: h,
403
- cancelText: g,
404
- handleCancel: $
398
+ cancelText: f,
399
+ handleCancel: g
405
400
  }) => /* @__PURE__ */ u(he, { className: "form-main-button-container", children: [
406
- l && /* @__PURE__ */ n(p, { id: `form-${e}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: i, className: "submit-form-btn" }),
407
- m && /* @__PURE__ */ n(p, { id: `form-${e}-edit`, buttonType: "button", text: r ?? "Reset", onClick: d, className: "reset-form-btn" }),
408
- h && /* @__PURE__ */ n(p, { id: `form-${e}-cancel`, buttonType: "button", text: g ?? "Cancel", onClick: $, className: "cancel-form-btn" })
401
+ i && /* @__PURE__ */ a(x, { id: `form-${t}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: l, className: "submit-form-btn" }),
402
+ m && /* @__PURE__ */ a(x, { id: `form-${t}-edit`, buttonType: "button", text: r ?? "Reset", onClick: d, className: "reset-form-btn" }),
403
+ h && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text: f ?? "Cancel", onClick: g, className: "cancel-form-btn" })
409
404
  ] }), M = c.legend`
410
- font-size: ${t.spacing.medium};
405
+ font-size: ${e.spacing.medium};
411
406
  font-weight: 500;
412
- margin-bottom: ${t.spacing.small};
407
+ margin-bottom: ${e.spacing.small};
413
408
  width: auto;
414
409
  text-align: center;
415
- font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
410
+ font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
416
411
  `, U = c.fieldset`
417
412
  padding: 0;
418
413
  height: auto;
419
414
  width: 100%;
420
415
  `, H = c.div`
421
- padding: ${t.spacing.small};
416
+ padding: ${e.spacing.small};
422
417
  height: auto;
423
418
  width: 100%;
424
419
  `, O = c.div`
@@ -427,9 +422,9 @@ const t = {
427
422
  align-items: center;
428
423
  width: 100%;
429
424
  height: auto;
430
- font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
431
- font-size: ${t.fontSize.xsmall};
432
- font-weight: ${t.fontWeight.bold};
425
+ font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
426
+ font-size: ${e.fontSize.xsmall};
427
+ font-weight: ${e.fontWeight.bold};
433
428
  `, ue = c.form`
434
429
  display: flex;
435
430
  flex-direction: column;
@@ -439,86 +434,82 @@ const t = {
439
434
  display: flex;
440
435
  justify-content: space-between;
441
436
  width: 100%;
442
- `, $e = c.div`
437
+ `, ge = c.div`
443
438
  width: 100%;
444
439
  display: flex;
445
440
  flex-direction: column;
446
441
  align-items: center;
447
442
  justify-content: center;
448
443
  `, Ce = ({
449
- fieldsets: e = null,
450
- legendText: l,
444
+ fieldsets: t = null,
445
+ legendText: i,
451
446
  isExpandable: o,
452
- id: i,
447
+ id: l,
453
448
  formInputs: m,
454
449
  labelAndInputContainerClass: r,
455
450
  labelClass: d,
456
451
  inputClass: h,
457
- onChangeOfEditableOption: g,
458
- handleAddingInputEntry: $,
452
+ onChangeOfEditableOption: f,
453
+ handleAddingInputEntry: g,
459
454
  hasSubmit: N = !1,
460
- submitText: y,
455
+ submitText: p,
461
456
  handleSubmit: C,
462
457
  hasReset: w = !1,
463
- resetText: k,
458
+ resetText: y,
464
459
  handleReset: F,
465
460
  hasCancel: v = !1,
466
461
  cancelText: A,
467
462
  handleCancel: S,
468
463
  handleSubmitForm: z,
469
- className: D,
464
+ className: T,
470
465
  children: j
471
- }) => (console.log("Rendering DynamicForm", e), e?.forEach((a, f) => {
472
- console.log("Fieldset index", f, "legend:", a.legend), a.inputs.forEach((s, x) => {
473
- console.log("Input", x, "type:", s.type, "editing:", s.editing);
474
- });
475
- }), /* @__PURE__ */ u(ue, { id: `${i}-form`, className: D, onSubmit: z, children: [
476
- e ? e.map((a, f) => /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
477
- /* @__PURE__ */ u(U, { id: `${i}-form-fieldset-${f}`, className: `${a.legend}-fieldset`, children: [
478
- a.legend && /* @__PURE__ */ n(M, { className: `${a.legend}-legend`, children: a.legend }),
479
- a.inputs.length !== 0 ? a.inputs.map((s, x) => /* @__PURE__ */ u(q.Fragment, { children: [
480
- s.type === "textarea" && /* @__PURE__ */ n(
466
+ }) => /* @__PURE__ */ u(ue, { id: `${l}-form`, className: T, onSubmit: z, children: [
467
+ t ? t.map((n, $) => /* @__PURE__ */ u(H, { className: `${l}-fieldset-wrapper`, children: [
468
+ /* @__PURE__ */ u(U, { id: `${l}-form-fieldset-${$}`, className: `${n.legend}-fieldset`, children: [
469
+ n.legend && /* @__PURE__ */ a(M, { className: `${n.legend}-legend`, children: n.legend }),
470
+ n.inputs.length !== 0 ? n.inputs.map((s, k) => /* @__PURE__ */ u(q.Fragment, { children: [
471
+ s.type === "textarea" && /* @__PURE__ */ a(
481
472
  E,
482
473
  {
483
474
  ...s,
484
- id: s.id ?? `${a.legend}-input`,
475
+ id: s.id ?? `${n.legend}-input`,
485
476
  labelClass: d,
486
477
  inputClass: h,
487
- idx: x,
478
+ idx: k,
488
479
  className: `${r} ${s?.uniqueClass}`
489
480
  }
490
481
  ),
491
- s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ n(
482
+ s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ a(
492
483
  E,
493
484
  {
494
485
  ...s,
495
- id: s.id ?? `${a.legend}-input`,
486
+ id: s.id ?? `${n.legend}-input`,
496
487
  labelClass: d,
497
488
  inputClass: h,
498
- idx: x,
489
+ idx: k,
499
490
  className: `${r} ${s?.uniqueClass}`
500
491
  }
501
492
  ),
502
493
  (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
503
- /* @__PURE__ */ n(
494
+ /* @__PURE__ */ a(
504
495
  E,
505
496
  {
506
497
  ...s,
507
- id: s.id ?? `${a.legend}-input`,
498
+ id: s.id ?? `${n.legend}-input`,
508
499
  labelClass: d,
509
500
  inputClass: h,
510
- idx: x,
501
+ idx: k,
511
502
  className: `${r} ${s?.uniqueClass}`
512
503
  }
513
504
  ),
514
- s.editing && s.isEditable && /* @__PURE__ */ n(
505
+ s.editing && s.isEditable && /* @__PURE__ */ a(
515
506
  P,
516
507
  {
517
- legend: `${a.legend}`,
518
- fieldsetIndex: f,
519
- idx: x,
508
+ legend: `${n.legend}`,
509
+ fieldsetIndex: $,
510
+ idx: k,
520
511
  editableInformation: s?.editableInformation || [],
521
- onChangeOfEditableOption: g,
512
+ onChangeOfEditableOption: f,
522
513
  onClickSaveEdit: s?.onClickSave || ((L) => {
523
514
  }),
524
515
  onClickCancelEdit: s?.onClickCancel || ((L) => {
@@ -528,89 +519,89 @@ const t = {
528
519
  }
529
520
  )
530
521
  ] })
531
- ] }, `form-${i}-${x}`)) : a.isExpandable ? /* @__PURE__ */ n(O, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
522
+ ] }, `form-${l}-${k}`)) : n.isExpandable ? /* @__PURE__ */ a(O, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
532
523
  ] }),
533
- a.isExpandable && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": f } }) })
534
- ] }, `${a.legend}-${f}`)) : /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
535
- /* @__PURE__ */ u(U, { id: `${i}-form-fieldset`, className: `${l}-fieldset`, children: [
536
- l && /* @__PURE__ */ n(M, { className: `${l}-legend`, children: l }),
537
- !e && m && m.length !== 0 ? m.map((a, f) => /* @__PURE__ */ u(q.Fragment, { children: [
538
- a.type === "textarea" && /* @__PURE__ */ n(
524
+ 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": $ } }) })
525
+ ] }, `${n.legend}-${$}`)) : /* @__PURE__ */ u(H, { className: `${l}-fieldset-wrapper`, children: [
526
+ /* @__PURE__ */ u(U, { id: `${l}-form-fieldset`, className: `${i}-fieldset`, children: [
527
+ i && /* @__PURE__ */ a(M, { className: `${i}-legend`, children: i }),
528
+ !t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */ u(q.Fragment, { children: [
529
+ n.type === "textarea" && /* @__PURE__ */ a(
539
530
  E,
540
531
  {
541
- ...a,
542
- id: a.id ?? `${l}-input`,
532
+ ...n,
533
+ id: n.id ?? `${i}-input`,
543
534
  labelClass: d,
544
535
  inputClass: h,
545
- idx: f,
546
- className: `${r} ${a?.uniqueClass}`
536
+ idx: $,
537
+ className: `${r} ${n?.uniqueClass}`
547
538
  }
548
539
  ),
549
- a.type !== "textarea" && a.type !== "radio" && a.type !== "checkbox" && /* @__PURE__ */ n(
540
+ n.type !== "textarea" && n.type !== "radio" && n.type !== "checkbox" && /* @__PURE__ */ a(
550
541
  E,
551
542
  {
552
- ...a,
553
- id: a.id ?? `${l}-input`,
543
+ ...n,
544
+ id: n.id ?? `${i}-input`,
554
545
  labelClass: d,
555
546
  inputClass: h,
556
- idx: f,
557
- className: `${r} ${a?.uniqueClass}`
547
+ idx: $,
548
+ className: `${r} ${n?.uniqueClass}`
558
549
  }
559
550
  ),
560
- (a.type === "radio" || a.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
561
- /* @__PURE__ */ n(
551
+ (n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
552
+ /* @__PURE__ */ a(
562
553
  E,
563
554
  {
564
- ...a,
565
- id: a.id ?? `${l}-input`,
555
+ ...n,
556
+ id: n.id ?? `${i}-input`,
566
557
  labelClass: d,
567
558
  inputClass: h,
568
- idx: f,
569
- className: `${r} ${a?.uniqueClass}`
559
+ idx: $,
560
+ className: `${r} ${n?.uniqueClass}`
570
561
  }
571
562
  ),
572
- a.editing && a.isEditable && /* @__PURE__ */ n(
563
+ n.editing && n.isEditable && /* @__PURE__ */ a(
573
564
  P,
574
565
  {
575
- legend: `${l}`,
576
- idx: f,
577
- editableInformation: a?.editableInformation,
578
- onChangeOfEditableOption: g,
579
- onClickSaveEdit: a?.onClickSave || ((s) => {
566
+ legend: `${i}`,
567
+ idx: $,
568
+ editableInformation: n?.editableInformation,
569
+ onChangeOfEditableOption: f,
570
+ onClickSaveEdit: n?.onClickSave || ((s) => {
580
571
  }),
581
- onClickCancelEdit: a?.onClickCancel || ((s) => {
572
+ onClickCancelEdit: n?.onClickCancel || ((s) => {
582
573
  }),
583
- onClickDeleteEntry: a?.onClickDelete || ((s) => {
574
+ onClickDeleteEntry: n?.onClickDelete || ((s) => {
584
575
  })
585
576
  }
586
577
  )
587
578
  ] })
588
- ] }, `form-${i}-${f}`)) : o ? /* @__PURE__ */ n(O, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
579
+ ] }, `form-${l}-${$}`)) : o ? /* @__PURE__ */ a(O, { children: `No entry yet on ${i}. Please click "+" button to add` }) : ""
589
580
  ] }),
590
- o && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
581
+ 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" }) })
591
582
  ] }),
592
- /* @__PURE__ */ n(
593
- ge,
583
+ /* @__PURE__ */ a(
584
+ fe,
594
585
  {
595
- id: i,
586
+ id: l,
596
587
  hasSubmit: N,
597
- submitText: y,
588
+ submitText: p,
598
589
  handleSubmit: C,
599
590
  hasReset: w,
600
- resetText: k,
591
+ resetText: y,
601
592
  handleReset: F,
602
593
  hasCancel: v,
603
594
  cancelText: A,
604
595
  handleCancel: S
605
596
  }
606
597
  ),
607
- /* @__PURE__ */ n($e, { className: "children-container", children: j })
608
- ] })), fe = (e) => {
609
- 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*\)$/;
610
- return l.test(e) || o.test(e) || CSS.supports("color", e);
611
- }, b = (e) => {
612
- if (!fe(e)) throw new Error(`Invalid color: ${e}`);
613
- return e;
598
+ /* @__PURE__ */ a(ge, { className: "children-container", children: j })
599
+ ] }), $e = (t) => {
600
+ 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*\)$/;
601
+ return i.test(t) || o.test(t) || CSS.supports("color", t);
602
+ }, b = (t) => {
603
+ if (!$e(t)) throw new Error(`Invalid color: ${t}`);
604
+ return t;
614
605
  }, we = {
615
606
  mobile: "320px",
616
607
  //Small iPhone SE & Medium: iPhone 12-15
@@ -651,14 +642,14 @@ const t = {
651
642
  error: b("#FAD4D4")
652
643
  }
653
644
  }, J = Q({}), Fe = ({
654
- children: e,
655
- initialTheme: l = xe,
645
+ children: t,
646
+ initialTheme: i = xe,
656
647
  secondTheme: o = pe
657
648
  }) => {
658
- const [i, m] = V(l), r = () => {
659
- m((d) => d === l ? o : l);
649
+ const [l, m] = V(i), r = () => {
650
+ m((d) => d === i ? o : i);
660
651
  };
661
- return /* @__PURE__ */ n(J.Provider, { value: { currentTheme: i, toggleTheme: r }, children: /* @__PURE__ */ n(Y, { theme: i, children: e }) });
652
+ return /* @__PURE__ */ a(J.Provider, { value: { currentTheme: l, toggleTheme: r }, children: /* @__PURE__ */ a(Y, { theme: l, children: t }) });
662
653
  }, Ee = () => X(J);
663
654
  export {
664
655
  Ce as DynamicForm,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kbgarcia8/react-dynamic-form",
3
- "version": "1.1.37",
3
+ "version": "1.1.38",
4
4
  "description": "A form that can be nested with editable, expandable and flexible input-forms",
5
5
  "keywords": [
6
6
  "form",