@kbgarcia8/react-dynamic-form 1.1.40 → 2.0.1

package/README.md

@@ -36,6 +36,7 @@ Reusable React dynamic form showcasing editable, expandable and flexible inputs
    * [Styling components via styled-components](#styling-components-via-styled-components)
       + [Available Default Class Names](#available-default-class-names)
 - [Local Development](#local-development)
+- [Demo](#demo)
    * [License](#license)
 
 <!-- TOC end -->
@@ -221,7 +222,7 @@ function App() {
 | `fieldsets` | `FieldsetShape[]`     | `null`   | Used in multi-section form containing inputs divided into information groups<br><br>If used, legendText and formInputs is no longer needed  |
 | `legendText`   | `string`     | — |  |
 | `formInputs` | `inputEntryShape[]` | —  |  If no fieldsets is provided, this is an object containing information for label and inputs of a single-section form              |
-| `isExpandable`   | `boolean`     | `false` | If inputs are used as options commonly in type: checkbox/radio, this is to enabale a button for entry adding. If fieldset is null this is default to false  |
+| `isExpandable`   | `boolean`     | `false` | If inputs are used as options commonly in type: checkbox/radio, this is to enabale a button for entry adding. Can also be used to add input type for details (e.g. text, email, etc.) If fieldset is null this is default to false  |
 | `id`   | `string`     | — | Form tag id  |
 | `labelAndInputContainerClass`   | `string`     | — | className for `<LabeledInput/>` component inside `<DynamicForm/>` |
 | `labelClass`   | `string`     | — | className for `<Label/>` component inside `<LabeledInput/>` component inside `<DynamicForm/>` |
@@ -248,7 +249,7 @@ function App() {
 | Prop      | Type         | Default  | Description                     |
 | --------- | ------------ | -------- | ------------------------------- |
 | `uniqueClass`   | `string`     | — | className to uniquely select/distinguish a LabeledInput container |
-| `isEditable`   | `boolean`     | — | To determine if an input is editable or not<br>If false, all props below are automatically not needed |
+| `isEditable`   | `boolean`     | — | To determine if an input is editable or not. This is only applicable for radio or checkbox input to mimick an editable option/selection<br>If false, all props below are automatically not needed |
 | `editing`   | `boolean`     | — | To identify if an editable input is being modified<br>Can be used in open/close dialogs |
 | `onClickEdit`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle edit logic of editable input |
 | `editIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as an icon for edit button of editable input |
@@ -417,6 +418,20 @@ cd react-dynamic-form
 npm install
 npm run dev
 ```
+
+<!-- TOC --><a name="demo"></a>
+## Demo
+```bash
+git clone https://github.com/kbgarcia8/test-react-form
+cd test-react-form
+npm install
+npm run dev
+```
+For the code of the demo where DynamicForm is used, please see:
+src/App.tsx
+
+<b>NOTE:</b> This demo uses styled-components for styling. When using CSS you can provide class to components to style them accordingly
+
 <!-- TOC --><a name="license"></a>
 ### License
 [![license](https://img.shields.io/github/license/kbgarcia8/react-dynamic-form

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

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

package/dist/components/molecules/FormActionButtons/FormActionButtons.d.ts

@@ -1,4 +1,4 @@
 import type { FormActionButtonsProps } from "../../../type/propTypes";
-declare const FormActionButtons: ({ id, hasSubmit, submitText, handleSubmit, hasReset, resetText, handleReset, hasCancel, cancelText, handleCancel, }: FormActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormActionButtons: ({ id, submitText, hasReset, resetText, handleReset, hasCancel, cancelText, handleCancel, }: FormActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export default FormActionButtons;
 //# sourceMappingURL=FormActionButtons.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,QAAA,MAAM,iBAAiB,GAAI,qHAWzB,sBAAsB,4CAQvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"FormActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,QAAA,MAAM,iBAAiB,GAAI,4FASzB,sBAAsB,4CAQvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,5 +1,5 @@
 import React from "react";
 import type { DynamicFormProps } from "../../../type/propTypes";
-declare const DynamicForm: ({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, onChangeOfEditableOption, handleAddingInputEntry, hasSubmit, submitText, handleSubmit, hasReset, resetText, handleReset, hasCancel, cancelText, handleCancel, handleSubmitForm, className, children }: React.PropsWithChildren<DynamicFormProps>) => import("react/jsx-runtime").JSX.Element;
+declare const DynamicForm: ({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, onChangeOfEditableOption, handleAddingInputEntry, submitText, hasReset, resetText, handleReset, hasCancel, cancelText, handleCancel, handleSubmitForm, className, children }: React.PropsWithChildren<DynamicFormProps>) => import("react/jsx-runtime").JSX.Element;
 export default DynamicForm;
 //# sourceMappingURL=DynamicForm.d.ts.map

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

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

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

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