@kbgarcia8/react-dynamic-form 2.0.2 → 2.0.4

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

@@ -1,65 +1,162 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("react"),r=require("styled-components"),t={fonts:{secondary:"Raleway",tertiary:"Lato",fallback:"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"},fontWeight:{light:300,medium:500,bold:700,bolder:900},fontSize:{xsmall:"0.75rem"},spacing:{xxxsmall:"0.25rem",xxsmall:"0.375rem",xsmall:"0.5rem",small:"0.75rem",medium:"1.25rem"},borderRadius:{xsmall:"0.125rem",small:"0.25rem",xlarge:"2rem"},borderThickness:{thin:"0.0625rem",light:"0.125rem"}},B=r.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),D=require("react"),s=require("styled-components"),o={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,regular:400,medium:500,bold:700,bolder:900},fontSize:{xxsmall:"0.55rem",xsmall:"0.75rem",small:"1rem",medium:"1.25rem",large:"1.5rem",xlarge:"1.75rem"},spacing:{xxxsmall:"0.25rem",xxsmall:"0.375rem",xsmall:"0.5rem",small:"0.75rem",medium:"1.25rem"},borderRadius:{xsmall:"0.125rem",small:"0.25rem",medium:"0.5rem",large:"1rem",xlarge:"2rem",circle:"50%"},borderThickness:{thin:"0.0625rem",light:"0.125rem"},breakpoints:{mobile:"320px",tablet:"768px",laptop:"1024px",desktop:"1440px",largeDesktop:"1920px"}},te=e=>{const l=/^#([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 l.test(e)||n.test(e)||CSS.supports("color",e)},b=e=>{if(!te(e))throw new Error(`Invalid color: ${e}`);return e},z=Object.keys(o.breakpoints).reduce((e,l)=>{const n=l;return e[n]=(...a)=>s.css`
+    @media (min-width: ${o.breakpoints[n]}) {
+        ${s.css(...a)}
+        }
+    `,e},{}),re={primary:s.css`
+        background-color: ${({theme:e})=>e.colors.backgroundColor1};
+        color: ${({theme:e})=>e.colors.textColor3};
+        border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor2};
+
+        &:hover {
+            background-color: ${({theme:e})=>e.colors.backgroundColor2};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.textColor3};
+        }
+        
+        &:disabled{
+            background-color: ${({theme:e})=>e.notificationPalette.infoText};
+            color: ${({theme:e})=>e.colors.shadow};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
+            cursor: not-allowed;
+        }
+    `,secondary:s.css`
+        background-color: ${({theme:e})=>e.colors.backgroundColor4};
+        color: ${({theme:e})=>e.colors.textColor1};
+        border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor1};
+
+        &:hover {
+            background-color: ${({theme:e})=>e.colors.backgroundColor4};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor2};
+        }
+
+        &:disabled{
+            background-color: ${({theme:e})=>e.notificationPalette.warningText};
+            color: ${({theme:e})=>e.colors.shadow};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
+        }
+    `,ghost:s.css`
+        background-color: transparent;
+        color: ${({theme:e})=>e.colors.textColor3};
+        border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.textColor3};
+
+        &:hover {
+            background-color: ${({theme:e})=>e.colors.textColor2};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.backgroundColor3};
+        }
+
+        &:disabled{
+            background-color: ${({theme:e})=>e.notificationPalette.shadow};
+            color: ${({theme:e})=>e.colors.shadow};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
+        }
+    `,bnw:s.css`
+        background-color: ${({theme:e})=>e.colors.borderColor1};
+        color: ${({theme:e})=>e.colors.borderColor2};
+        border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor2};
+
+        &:hover {
+            background-color: ${({theme:e})=>e.colors.textColor2};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.textColor1};
+        }
+
+        &:disabled{
+            background-color: ${({theme:e})=>e.notificationPalette.shadow};
+            color: ${({theme:e})=>e.colors.shadow};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
+        }
+    `},ae={smallest:s.css`
+        ${z.mobile`
+            font-size: ${o.fontSize.xxsmall};
+            font-weight: ${o.fontWeight.regular};
+        `}
+    `,smaller:s.css`
+        ${z.mobile`
+            font-size: ${o.fontSize.xsmall};
+            font-weight: ${o.fontWeight.regular};
+        `}
+    `,small:s.css`
+        ${z.mobile`
+            font-size: ${o.fontSize.small};
+            font-weight: ${o.fontWeight.medium};
+        `}
+    `,medium:s.css`
+        ${z.mobile`
+            font-size: ${o.fontSize.medium};
+            font-weight: ${o.fontWeight.bold};
+        `}
+    `,large:s.css`
+        ${z.mobile`
+            font-size: ${o.fontSize.large};
+            font-weight: ${o.fontWeight.bolder};
+        `}
+    `,larger:s.css`
+        ${z.mobile`
+            font-size: ${o.fontSize.xlarge};
+            font-weight: ${o.fontWeight.bolder};
+        `}
+    `},se={square:s.css`border-radius: ${o.borderRadius.xsmall};`,roundedsquare:s.css`border-radius: ${o.borderRadius.medium};`,squircle:s.css`border-radius: ${o.borderRadius.large};`,pill:s.css`border-radius: ${o.borderRadius.xlarge};`,circle:s.css`border-radius: ${o.borderRadius.circle};`},M=s.button`
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    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;
+    padding: ${o.spacing.xxxsmall} ${o.spacing.xxsmall};
+    flex: 1;
+    margin: 0;
     cursor: pointer;
     transition: background-color 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-        background-color: lightblue;
-        border: ${t.borderThickness.light} solid gray;
-    }
-
-    & .button-icon-text-space {
-        max-width: 100%;
-    }
+    ${({$color:e})=>re[e||"primary"]}
+    ${({$radius:e})=>se[e||"square"]}
     
     & .button-icon-text-space svg {
+        height: auto;
+        max-height: 100%;
         max-width: 100%;
     }
-`,P=r.div`
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+`,U=s.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
-`;r.img`
-    maxwidth: 100%;
-`;const W=r.span`
-    font-size: ${t.fontSize.xsmall};
-    font-weight: ${t.fontWeight.medium};
-    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
+    justify-content: space-around;
+
+    ${({$hasIcon:e,$hasText:l})=>e&&l?s.css``:s.css`
+                & > * {
+                    flex: 1;
+                }
+            `}
+`,H=s.span`
+    flex: 2;
+    ${({$size:e})=>ae[e||"small"]}
+    font-family: ${o.fonts.tertiary}, ${o.fonts.fallback};
     display: flex;
     align-items: center;
     justify-content: center;
-`,f=({onClick:a,id:i,buttonType:n,startIcon:o,endIcon:d,alt:m="alt-button-icon",text:c="",className:x="",dataAttributes:h={}})=>{if(n==="button")return e.jsx(B,{onClick:a,id:i,type:n,className:x,...h,children:e.jsxs(P,{className:"button-icon-text-space",children:[o||"",c&&e.jsx(W,{id:i,children:c}),d||""]})});if(n==="submit")return e.jsx(B,{id:i,type:n,className:x,...h,children:e.jsxs(P,{className:"button-icon-text-space",children:[o||"",c&&e.jsx(W,{id:i,children:c}),d||""]})})},Z=r.div`
+    max-width: 80%;
+`,w=({onClick:e,id:l,buttonType:n="button",startIcon:a,endIcon:m,text:d="",className:x="",dataAttributes:u={},color:h,radius:$,size:g})=>n==="submit"?t.jsx(M,{id:l,type:"submit",className:x,...u,$color:h||"primary",$radius:$||"squircle",children:t.jsxs(U,{className:"button-icon-text-space",$hasIcon:!!(a||m),$hasText:!!d,children:[a||"",d&&t.jsx(H,{$size:g||"small",id:l,children:d}),m||""]})}):t.jsx(M,{onClick:e,id:l,type:n,className:x,...u,$color:h||"primary",$radius:$||"squircle",children:t.jsxs(U,{className:"button-icon-text-space",$hasIcon:!!(a||m),$hasText:!!d,children:[a||"",d&&t.jsx(H,{$size:g||"small",id:l,children:d}),m||""]})}),ne=s.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${t.spacing.small};
-`,_=r.div`
+    margin-bottom: ${o.spacing.small};
+`,le=s.div`
     display: flex;
-    gap: ${t.spacing.xsmall};
+    gap: ${o.spacing.xsmall};
     width: auto;
     height: auto;
-`,I=r.label`
+`,ce=s.label`
     display: flex;
     align-items: center;
-    justify-content:center;
+    justify-content: center;
     height: auto;
-    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};
+    flex-direction:  ${e=>e.$labelFlexDirection||"column"};
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+    font-size: ${o.fontSize.xsmall};
+    font-weight: ${o.fontWeight.bold};
+    gap: ${o.spacing.xxsmall};
     
     & .label-icon-container img,
     & .label-icon-container svg {
@@ -67,111 +164,115 @@
         height: auto;
         object-fit: contain;
     }
-`,ee=r.div`
+`,ie=s.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: ${t.spacing.xxxsmall};
-`,te=r.span`
-    font-weight: ${t.fontWeight.bolder};
-`,M=r.div`
+    gap: ${o.spacing.xxxsmall};
+`,de=s.span`
+    font-weight: ${o.fontWeight.bolder};
+`,Z=s.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`,ae=r.span`
-    font-weight: ${t.fontWeight.light};
-`,U=({htmlFor:a,textLabel:i,additionalInfo:n,$labelFlexDirection:o,startIcon:d,endIcon:m,className:c,children:x})=>e.jsxs(I,{htmlFor:a,className:c,$labelFlexDirection:o,children:[d&&e.jsx(M,{className:"label-icon-container",children:d}),e.jsxs(ee,{className:"label-text-container",children:[e.jsx(te,{className:"main-label",children:i}),n&&e.jsx(ae,{className:"additional-info",children:n})]}),m&&e.jsx(M,{className:"label-icon-container",children:m}),x]}),O=r.input`
+`,me=s.span`
+    font-weight: ${o.fontWeight.light};
+`,G=({htmlFor:e,textLabel:l,additionalInfo:n,$labelFlexDirection:a,startIcon:m,endIcon:d,className:x,children:u})=>t.jsxs(ce,{htmlFor:e,className:x,$labelFlexDirection:a,children:[m&&t.jsx(Z,{className:"label-icon-container",children:m}),t.jsxs(ie,{className:"label-text-container",children:[t.jsx(de,{className:"main-label",children:l}),n&&t.jsx(me,{className:"additional-info",children:n})]}),d&&t.jsx(Z,{className:"label-icon-container",children:d}),u]}),J=s.input`
     display: flex;
     place-content: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+    font-size: ${o.fontSize.xsmall};
     line-height: 1.75;
-    padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
+    padding: ${o.spacing.xxxsmall} ${o.spacing.xsmall};
     max-width: 100%;
     height: auto;
     background-color: #FFFFFF;
     outline: none;
-    border: ${t.borderThickness.thin} solid #000000;
-    border-radius: ${t.borderRadius.xsmall};
+    border: ${o.borderThickness.thin} solid #000000;
+    border-radius: ${o.borderRadius.xsmall};
 
     &:focus{
-        border: ${t.borderThickness.thin} solid ${({theme:a})=>a.colors.teal};
+        border: ${o.borderThickness.thin} solid ${({theme:e})=>e.colors.teal};
     }
-`,ne=r.textarea`
+`,be=s.textarea`
     display: flex;
     place-content: center;
-    border: ${t.borderThickness.light} solid ${({theme:a})=>a.colors.text};
-    border-radius: ${t.borderRadius.small};
+    border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.text};
+    border-radius: ${o.borderRadius.small};
     outline: none;
-    line-height: ${t.spacing.small};
-    padding: ${t.spacing.xxxsmall};
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
+    line-height: ${o.spacing.small};
+    padding: ${o.spacing.xxxsmall};
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+    font-size: ${o.fontSize.xsmall};
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`,D=E.forwardRef((a,i)=>{const{type:n,id:o,onChange:d,isRequired:m,dataAttributes:c={},disabled:x,className:h,name:u}=a;if(n==="textarea"){const{rows:p=5,cols:w=30,value:v,...T}=a;return e.jsx(ne,{ref:i,value:v,rows:p,cols:w,id:o,onChange:d,required:m,disabled:x,...c,className:h,name:u})}if(n==="radio"||n==="checkbox"){const{checked:p,...w}=a;return e.jsx(O,{ref:i,type:n,checked:p,id:o,onChange:d,required:m,...c,disabled:x,className:h,name:u})}const $=a,{value:k,pattern:y,placeholderText:N,...C}=$;return e.jsx(O,{ref:i,type:n,value:k,pattern:y,placeholder:N,id:o,onChange:d,required:m,...c,disabled:x,className:h,name:u})}),F=a=>{const{className:i,type:n,id:o,textLabel:d,additionalInfo:m,$labelFlexDirection:c,startIcon:x,endIcon:h,labelClass:u,onChange:$,isRequired:k,dataAttributes:y,inputClass:N,ref:C,disabled:p,isEditable:w,editIcon:v,onClickEdit:T,deleteIcon:S,onClickDelete:q,idx:A,children:z}=a;return e.jsxs(Z,{className:`${i} ${o.replace("#","")}-label-input-container`,children:[n!=="radio"&&n!=="checkbox"&&e.jsx(U,{startIcon:x,endIcon:h,htmlFor:o,textLabel:d,additionalInfo:m,$labelFlexDirection:c,className:u}),n!=="radio"&&n!=="checkbox"&&n==="textarea"&&(()=>{const{rows:s=5,cols:g=30,value:l,...j}=a;return e.jsx(D,{id:o,name:o,type:"textarea",isRequired:k,onChange:$,value:l,rows:s,cols:g,dataAttributes:y,className:N,ref:C,disabled:p})})(),n!=="radio"&&n!=="checkbox"&&n!=="textarea"&&(()=>{const s=a,{value:g,pattern:l,placeholderText:j,...L}=s;return e.jsx(D,{id:o,name:o,placeholderText:j,onChange:$,value:g,type:n,isRequired:k,dataAttributes:y,className:N,ref:C,disabled:p,pattern:l})})(),(n==="radio"||n==="checkbox")&&(()=>{const{checked:s,...g}=a;return e.jsxs(e.Fragment,{children:[e.jsx(D,{ref:C,type:n,name:o,id:o,isRequired:k,checked:s,onChange:$,disabled:p,className:N,dataAttributes:y}),e.jsx(U,{startIcon:x,endIcon:h,htmlFor:o,textLabel:d,additionalInfo:m,$labelFlexDirection:c,className:u})]})})(),w&&e.jsxs(_,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${o}-edit-btn`,startIcon:v,buttonType:"button",onClick:T,className:`edit-radio-${A}`,dataAttributes:y}),e.jsx(f,{id:`editable-${o}-delete-btn`,startIcon:S,buttonType:"button",onClick:q,className:`delete-radio-${A}`,dataAttributes:y})]}),z]})},se=r.fieldset`
+`,P=D.forwardRef((e,l)=>{const{type:n,id:a,onChange:m,isRequired:d,dataAttributes:x={},disabled:u,className:h,name:$}=e;if(n==="textarea"){const{rows:p=5,cols:F=30,value:B,...S}=e;return t.jsx(be,{ref:l,value:B,rows:p,cols:F,id:a,onChange:m,required:d,disabled:u,...x,className:h,name:$})}if(n==="radio"||n==="checkbox"){const{checked:p,...F}=e;return t.jsx(J,{ref:l,type:n,checked:p,id:a,onChange:m,required:d,...x,disabled:u,className:h,name:$})}const g=e,{value:y,pattern:f,placeholderText:k,...T}=g;return t.jsx(J,{ref:l,type:n,value:y,pattern:f,placeholder:k,id:a,onChange:m,required:d,...x,disabled:u,className:h,name:$})}),q=e=>{const{className:l,type:n,id:a,textLabel:m,additionalInfo:d,$labelFlexDirection:x,startIcon:u,endIcon:h,labelClass:$="",onChange:g,isRequired:y,dataAttributes:f,inputClass:k="",ref:T,disabled:p,isEditable:F,editIcon:B,onClickEdit:S,deleteIcon:I,onClickDelete:j,idx:v,children:W}=e;return t.jsxs(ne,{className:`${l} ${a.replace("#","")}-label-input-container`,children:[n!=="radio"&&n!=="checkbox"&&t.jsx(G,{startIcon:u,endIcon:h,htmlFor:a,textLabel:m,additionalInfo:d,$labelFlexDirection:x,className:$}),n!=="radio"&&n!=="checkbox"&&n==="textarea"&&(()=>{const{rows:N=5,cols:E=30,value:R,...r}=e;return t.jsx(P,{id:a,name:a,type:"textarea",isRequired:y,onChange:g,value:R,rows:N,cols:E,dataAttributes:f,className:k,ref:T,disabled:p})})(),n!=="radio"&&n!=="checkbox"&&n!=="textarea"&&(()=>{const N=e,{value:E,pattern:R,placeholderText:r,...C}=N;return t.jsx(P,{id:a,name:a,placeholderText:r,onChange:g,value:E,type:n,isRequired:y,dataAttributes:f,className:k,ref:T,disabled:p,pattern:R})})(),(n==="radio"||n==="checkbox")&&(()=>{const{checked:N,...E}=e;return t.jsxs(t.Fragment,{children:[t.jsx(P,{ref:T,type:n,name:a,id:a,isRequired:y,checked:N,onChange:g,disabled:p,className:k,dataAttributes:f}),t.jsx(G,{startIcon:u,endIcon:h,htmlFor:a,textLabel:m,additionalInfo:d,$labelFlexDirection:x,className:$})]})})(),F&&t.jsxs(le,{className:"input-edit-buttons",children:[t.jsx(w,{id:`editable-${a}-edit-btn`,startIcon:B,buttonType:"button",onClick:S,className:`edit-radio-${v}`,dataAttributes:f}),t.jsx(w,{id:`editable-${a}-delete-btn`,startIcon:I,buttonType:"button",onClick:j,className:`delete-radio-${v}`,dataAttributes:f})]}),W]})},xe=s.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,oe=r.legend`
-    font-size: ${t.spacing.medium};
+`,ue=s.legend`
+    font-size: ${o.spacing.medium};
     font-weight: 500;
-    margin: 0 auto ${t.spacing.small} auto;
+    margin: 0 auto ${o.spacing.small} auto;
     text-align: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`,ie=r.div`
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+`,he=s.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
-    margin-bottom: ${t.spacing.small};
-`,le=r.div`
+    margin-bottom: ${o.spacing.small};
+`,$e=s.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,H=({legend:a,fieldsetIndex:i,idx:n,editableInformation:o,onChangeOfEditableOption:d,onClickSaveEdit:m,onClickCancelEdit:c,onClickDeleteEntry:x})=>e.jsxs(se,{className:"editable-option-fieldset",children:[e.jsx(oe,{children:`${a} ${n+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:d,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-${n}-submit`,buttonType:"button",text:"Save",onClick:m,className:"editable-option-btn",dataAttributes:{"data-index":n,"data-fieldsetindex":i}}),e.jsx(f,{id:`editable-option-${n}-cancel`,buttonType:"button",text:"Cancel",onClick:c,className:"editable-option-btn",dataAttributes:{"data-index":n,"data-fieldsetindex":i}}),e.jsx(f,{id:`editable-option-${n}-delete`,buttonType:"button",text:"Delete",onClick:x,className:"editable-option-btn",dataAttributes:{"data-index":n,"data-fieldsetindex":i}})]})]}),ce=r.div`
+`,K=({editableButtonSize:e,editableButtonColor:l,editableButtonRadius:n,legend:a,fieldsetIndex:m,idx:d,editableInformation:x,saveText:u,saveButtonStartIcon:h,saveButtonEndIcon:$,cancelText:g,cancelButtonStartIcon:y,cancelButtonEndIcon:f,deleteText:k,deleteButtonStartIcon:T,deleteButtonEndIcon:p,onChangeOfEditableOption:F,onClickSaveEdit:B,onClickCancelEdit:S,onClickDeleteEntry:I})=>t.jsxs(xe,{className:"editable-option-fieldset",children:[t.jsx(ue,{children:`${a} ${d+1}`}),x?.map((j,v)=>t.jsx(he,{className:"editable-option-container",children:t.jsx(P,{id:`editable-option-${v}`,name:`editable-option-${v}`,placeholderText:j.name.charAt(0).toUpperCase()+j.name.slice(1),onChange:F,value:j.info,type:j.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":v,"data-fieldsetindex":m,"data-key":j.info}})},`${j.name}-${v}`)),t.jsxs($e,{className:"editable-option-button-space",children:[t.jsx(w,{startIcon:h,endIcon:$,size:e||"small",color:l||"primary",radius:n||"squircle",id:`editable-option-${d}-submit`,buttonType:"button",text:u||"Save",onClick:B,className:"editable-option-btn",dataAttributes:{"data-index":d,"data-fieldsetindex":m}}),t.jsx(w,{startIcon:y,endIcon:f,size:e||"small",color:l||"primary",radius:n||"squircle",id:`editable-option-${d}-cancel`,buttonType:"button",text:g||"Cancel",onClick:S,className:"editable-option-btn",dataAttributes:{"data-index":d,"data-fieldsetindex":m}}),t.jsx(w,{startIcon:T,endIcon:p,size:e||"small",color:l||"primary",radius:n||"squircle",id:`editable-option-${d}-delete`,buttonType:"button",text:k||"Delete",onClick:I,className:"editable-option-btn",dataAttributes:{"data-index":d,"data-fieldsetindex":m}})]})]}),ge=s.div`
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
+    align-content: center;
     max-width: 100%;
-`,re=({id:a,submitText:i,submitIcon:n,hasReset:o,resetText:d,resetIcon:m,handleReset:c,hasCancel:x,cancelText:h,cancelIcon:u,handleCancel:$})=>e.jsxs(ce,{className:"form-main-button-container",children:[e.jsx(f,{id:`form-${a}-submit`,startIcon:n,buttonType:"submit",text:i??"Submit",className:"submit-form-btn"}),o&&e.jsx(f,{id:`form-${a}-edit`,startIcon:m,buttonType:"button",text:d??"Reset",onClick:c,className:"reset-form-btn"}),x&&e.jsx(f,{id:`form-${a}-cancel`,startIcon:u,buttonType:"button",text:h??"Cancel",onClick:$,className:"cancel-form-btn"})]}),G=r.legend`
-    font-size: ${t.spacing.medium};
+    & button {
+        margin-inline: 0.25rem;
+    }
+`,fe=({id:e,formActionButtonSize:l,formActionButtonColor:n,formActionButtonRadius:a,submitText:m,submitIcon:d,hasReset:x,resetText:u,resetIcon:h,handleReset:$,hasCancel:g,cancelText:y,cancelIcon:f,handleCancel:k})=>t.jsxs(ge,{className:"form-main-button-container",children:[t.jsx(w,{id:`form-${e}-submit`,size:l||"small",color:n||"primary",radius:a||"squircle",startIcon:d,buttonType:"submit",text:m??"Submit",className:"submit-form-btn"}),x&&t.jsx(w,{id:`form-${e}-edit`,size:l||"small",color:n||"primary",radius:a||"squircle",startIcon:h,buttonType:"button",text:u??"Reset",onClick:$,className:"reset-form-btn"}),g&&t.jsx(w,{id:`form-${e}-cancel`,size:l||"small",color:n||"primary",radius:a||"squircle",startIcon:f,buttonType:"button",text:y??"Cancel",onClick:k,className:"cancel-form-btn"})]}),Q=s.legend`
+    font-size: ${o.spacing.medium};
     font-weight: 500;
-    margin-bottom: ${t.spacing.small};
+    margin-bottom: ${o.spacing.small};
     width: auto;
     text-align: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`,J=r.fieldset`
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+`,V=s.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,K=r.div`
-    padding: ${t.spacing.small};
+`,X=s.div`
+    padding: ${o.spacing.small};
     height: auto;
     width: 100%;
-`,Q=r.div`
+`,Y=s.div`
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: auto;
-    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
-    font-weight: ${t.fontWeight.bold};
-`,de=r.form`
+    font-family: ${o.fonts.tertiary}, ${o.fonts.fallback};
+    font-size: ${o.fontSize.xsmall};
+    font-weight: ${o.fontWeight.bold};
+`,ye=s.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`,V=r.div`
+`,_=s.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,me=r.div`
+`,ke=s.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,xe=({fieldsets:a=null,legendText:i,isExpandable:n,id:o,formInputs:d,labelAndInputContainerClass:m,labelClass:c,inputClass:x,onChangeOfEditableOption:h,handleAddingInputEntry:u,submitText:$,submitIcon:k,hasReset:y=!1,resetText:N,resetIcon:C,handleReset:p,hasCancel:w=!1,cancelText:v,cancelIcon:T,handleCancel:S,handleSubmitForm:q,className:A,children:z})=>e.jsxs(de,{id:`${o}-form`,className:A,onSubmit:q,children:[a?a.map((s,g)=>e.jsxs(K,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(J,{id:`${o}-form-fieldset-${g}`,className:`${s.legend}-fieldset`,children:[s.legend&&e.jsx(G,{className:`${s.legend}-legend`,children:s.legend}),s.inputs.length!==0?s.inputs.map((l,j)=>e.jsxs(E.Fragment,{children:[l.type==="textarea"&&e.jsx(F,{...l,id:l.id??`${s.legend}-input`,labelClass:c,inputClass:x,idx:j,className:`${m} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(F,{...l,id:l.id??`${s.legend}-input`,labelClass:c,inputClass:x,idx:j,className:`${m} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(F,{...l,id:l.id??`${s.legend}-input`,labelClass:c,inputClass:x,idx:j,className:`${m} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(H,{legend:`${s.legend}`,fieldsetIndex:g,idx:j,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(L=>{}),onClickCancelEdit:l?.onClickCancel||(L=>{}),onClickDeleteEntry:l?.onClickDelete||(L=>{})})]})]},`form-${o}-${j}`)):s.isExpandable?e.jsx(Q,{children:`No entry yet on ${s.legend}. Click "+" button to add entry.`}):""]}),s.isExpandable&&e.jsx(V,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${s.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":g}})})]},`${s.legend}-${g}`)):e.jsxs(K,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(J,{id:`${o}-form-fieldset`,className:`${i}-fieldset`,children:[i&&e.jsx(G,{className:`${i}-legend`,children:i}),!a&&d&&d.length!==0?d.map((s,g)=>e.jsxs(E.Fragment,{children:[s.type==="textarea"&&e.jsx(F,{...s,id:s.id??`${i}-input`,labelClass:c,inputClass:x,idx:g,className:`${m} ${s?.uniqueClass}`}),s.type!=="textarea"&&s.type!=="radio"&&s.type!=="checkbox"&&e.jsx(F,{...s,id:s.id??`${i}-input`,labelClass:c,inputClass:x,idx:g,className:`${m} ${s?.uniqueClass}`}),(s.type==="radio"||s.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(F,{...s,id:s.id??`${i}-input`,labelClass:c,inputClass:x,idx:g,className:`${m} ${s?.uniqueClass}`}),s.editing&&s.isEditable&&e.jsx(H,{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(Q,{children:`No entry yet on ${i}. Please click "+" button to add`}):""]}),n&&e.jsx(V,{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,submitText:$,submitIcon:k,hasReset:y,resetText:N,resetIcon:C,handleReset:p,hasCancel:w,cancelText:v,cancelIcon:T,handleCancel:S}),e.jsx(me,{className:"children-container",children:z})]}),be=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(!be(a))throw new Error(`Invalid color: ${a}`);return a},he={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},X={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")}},Y={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")}},R=E.createContext({}),ue=({children:a,initialTheme:i=X,secondTheme:n=Y})=>{const[o,d]=E.useState(i),m=()=>{d(c=>c===i?n:i)};return e.jsx(R.Provider,{value:{currentTheme:o,toggleTheme:m},children:e.jsx(r.ThemeProvider,{theme:o,children:a})})},ge=()=>E.useContext(R);exports.DynamicForm=xe;exports.ThemeContext=R;exports.ThemeContextProvider=ue;exports.breakpoints=he;exports.darkTheme=Y;exports.lightTheme=X;exports.useTheme=ge;
+`,pe=({fieldsets:e=null,legendText:l,isExpandable:n,id:a,formInputs:m,labelAndInputContainerClass:d,labelClass:x,inputClass:u,onChangeOfEditableOption:h,handleAddingInputEntry:$,formActionButtonSize:g,formActionButtonColor:y,formActionButtonRadius:f,submitText:k,submitIcon:T,hasReset:p=!1,resetText:F,resetIcon:B,handleReset:S,hasCancel:I=!1,cancelText:j,cancelIcon:v,handleCancel:W,handleSubmitForm:N,className:E,children:R})=>t.jsxs(ye,{id:`${a}-form`,className:E,onSubmit:N,children:[e?e.map((r,C)=>t.jsxs(X,{className:`${a}-fieldset-wrapper`,children:[t.jsxs(V,{id:`${a}-form-fieldset-${C}`,className:`${r.legend}-fieldset`,children:[r.legend&&t.jsx(Q,{className:`${r.legend}-legend`,children:r.legend}),r.inputs.length!==0?r.inputs.map((c,L)=>t.jsxs(D.Fragment,{children:[c.type==="textarea"&&t.jsx(q,{...c,id:c.id??`${r.legend}-input`,labelClass:x,inputClass:u,idx:L,className:`${d} ${c?.uniqueClass}`}),c.type!=="textarea"&&c.type!=="radio"&&c.type!=="checkbox"&&t.jsx(q,{...c,id:c.id??`${r.legend}-input`,labelClass:x,inputClass:u,idx:L,className:`${d} ${c?.uniqueClass}`}),(c.type==="radio"||c.type==="checkbox")&&t.jsxs(t.Fragment,{children:[t.jsx(q,{...c,id:c.id??`${r.legend}-input`,labelClass:x,inputClass:u,idx:L,className:`${d} ${c?.uniqueClass}`}),c.editing&&c.isEditable&&t.jsx(K,{editableButtonSize:c.editableButtonSize,editableButtonColor:c.editableButtonColor,editableButtonRadius:c.editableButtonRadius,legend:`${r.legend}`,fieldsetIndex:C,idx:L,saveText:c.saveText??void 0,saveButtonStartIcon:c.saveButtonStartIcon??void 0,saveButtonEndIcon:c.saveButtonEndIcon??void 0,cancelText:c.cancelText??void 0,cancelButtonStartIcon:c.cancelButtonStartIcon??void 0,cancelButtonEndIcon:c.cancelButtonEndIcon??void 0,deleteText:c.deleteText??void 0,deleteButtonStartIcon:c.deleteButtonStartIcon??void 0,deleteButtonEndIcon:c.deleteButtonEndIcon??void 0,editableInformation:c?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:c?.onClickSave||(O=>{}),onClickCancelEdit:c?.onClickCancel||(O=>{}),onClickDeleteEntry:c?.onClickDelete||(O=>{})})]})]},`form-${a}-${L}`)):r.isExpandable?t.jsx(Y,{children:`No entry yet on ${r.legend}. Click "+" button to add entry.`}):""]}),r.isExpandable&&t.jsx(_,{className:"add-input-button-space",children:t.jsx(w,{id:`expand-${r.legend}-inputs`,buttonType:"button",text:"+",onClick:$,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":C}})})]},`${r.legend}-${C}`)):t.jsxs(X,{className:`${a}-fieldset-wrapper`,children:[t.jsxs(V,{id:`${a}-form-fieldset`,className:`${l}-fieldset`,children:[l&&t.jsx(Q,{className:`${l}-legend`,children:l}),!e&&m&&m.length!==0?m.map((r,C)=>t.jsxs(D.Fragment,{children:[r.type==="textarea"&&t.jsx(q,{...r,id:r.id??`${l}-input`,labelClass:x,inputClass:u,idx:C,className:`${d} ${r?.uniqueClass}`}),r.type!=="textarea"&&r.type!=="radio"&&r.type!=="checkbox"&&t.jsx(q,{...r,id:r.id??`${l}-input`,labelClass:x,inputClass:u,idx:C,className:`${d} ${r?.uniqueClass}`}),(r.type==="radio"||r.type==="checkbox")&&t.jsxs(t.Fragment,{children:[t.jsx(q,{...r,id:r.id??`${l}-input`,labelClass:x,inputClass:u,idx:C,className:`${d} ${r?.uniqueClass}`}),r.editing&&r.isEditable&&t.jsx(K,{editableButtonSize:r.editableButtonSize,editableButtonColor:r.editableButtonColor,editableButtonRadius:r.editableButtonRadius,legend:`${l}`,idx:C,saveText:r.saveText??void 0,saveButtonStartIcon:r.saveButtonStartIcon??void 0,saveButtonEndIcon:r.saveButtonEndIcon??void 0,cancelText:r.cancelText??void 0,cancelButtonStartIcon:r.cancelButtonStartIcon??void 0,cancelButtonEndIcon:r.cancelButtonEndIcon??void 0,deleteText:r.deleteText??void 0,deleteButtonStartIcon:r.deleteButtonStartIcon??void 0,deleteButtonEndIcon:r.deleteButtonEndIcon??void 0,editableInformation:r?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:r?.onClickSave||(c=>{}),onClickCancelEdit:r?.onClickCancel||(c=>{}),onClickDeleteEntry:r?.onClickDelete||(c=>{})})]})]},`form-${a}-${C}`)):n?t.jsx(Y,{children:`No entry yet on ${l}. Please click "+" button to add`}):""]}),n&&t.jsx(_,{className:"add-input-button-space",children:t.jsx(w,{id:`expand-${l}-inputs`,buttonType:"button",text:"+",onClick:$,className:"add-input-entry"})})]}),t.jsx(fe,{id:a,formActionButtonSize:g,formActionButtonColor:y,formActionButtonRadius:f,submitText:k,submitIcon:T,hasReset:p,resetText:F,resetIcon:B,handleReset:S,hasCancel:I,cancelText:j,cancelIcon:v,handleCancel:W}),t.jsx(ke,{className:"children-container",children:R})]}),Ce={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},i={primary1:b("#202234"),primary2:b("#3C5E83"),primary3:b("#0F60B6"),secondary1:b("#C67E10"),secondary2:b("#F6C46D"),neutral1:b("#FFFFFF"),neutral2:b("#F2F2F2"),neutral3:b("#ABABAB"),neutral4:b("#373A40"),neutral5:b("#000000"),accent:b("#E1D3B7"),shadow1:b("rgb(88, 88, 88)"),shadow2:b("rgba(255, 255, 255, 0.50)")},ee={name:"light",colors:{screenColor:i.neutral2,backgroundColor1:i.primary1,backgroundColor2:i.primary2,backgroundColor3:i.secondary2,backgroundColor4:i.secondary1,borderColor1:i.neutral5,borderColor2:i.neutral3,textColor1:i.neutral5,textColor2:i.neutral4,textColor3:i.accent,shadow:i.shadow1},anchorTheme:{visited:i.neutral5,hover:i.primary2,active:i.secondary2},footerTheme:{backgroundColor:i.neutral5,textColor:i.secondary1,shadowColor:i.shadow1},notificationPalette:{infoText:b("#C9E6F0"),infoBackground:b("#202234"),warningText:b("#FCFFC1"),warningBackground:b("#F2C265"),successText:b("#9EDF9C"),successBackground:b("#123524"),errorText:b("#FAD4D4"),errorBackground:b("#990000")}},oe={name:"dark",colors:{screenColor:i.neutral5,backgroundColor1:i.primary2,backgroundColor2:i.primary3,backgroundColor3:i.secondary1,backgroundColor4:i.secondary2,borderColor1:i.neutral2,borderColor2:i.neutral3,textColor1:i.neutral1,textColor2:i.accent,textColor3:i.neutral2,shadow:i.shadow2},anchorTheme:{link:i.neutral1,visited:i.neutral1,hover:i.primary3,active:i.secondary1},footerTheme:{backgroundColor:i.accent,textColor:i.primary1,shadowColor:i.shadow2},notificationPalette:{infoText:b("#202234"),infoBackground:b("#C9E6F0"),warningText:b("#F2C265"),warningBackground:b("#FCFFC1"),successText:b("#123524"),successBackground:b("#9EDF9C"),errorBackground:b("#FAD4D4"),errorText:b("#990000")}},A=D.createContext({}),je=({children:e,initialTheme:l=ee,secondTheme:n=oe})=>{const[a,m]=D.useState(l),d=()=>{m(x=>x===l?n:l)};return t.jsx(A.Provider,{value:{currentTheme:a,toggleTheme:d},children:t.jsx(s.ThemeProvider,{theme:a,children:e})})},we=()=>D.useContext(A);exports.DynamicForm=pe;exports.ThemeContext=A;exports.ThemeContextProvider=je;exports.breakpoints=Ce;exports.darkTheme=oe;exports.lightTheme=ee;exports.palette=i;exports.useTheme=we;