@kbgarcia8/react-dynamic-form 1.1.38 → 1.1.39

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAExE,QAAA,MAAM,KAAK,2GAmDT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAExE,QAAA,MAAM,KAAK,2GAoDT,CAAC;AAEH,eAAe,KAAK,CAAC"}

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

@@ -111,7 +111,7 @@
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`,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`
+`,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,required:r,...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`
     padding: 0;
     height: auto;
     width: 100%;

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

@@ -1,6 +1,6 @@
-import { jsx as a, jsxs as u, Fragment as R } from "react/jsx-runtime";
-import q, { forwardRef as K, createContext as Q, useState as V, useContext as X } from "react";
-import c, { ThemeProvider as Y } from "styled-components";
+import { jsx as a, jsxs as f, Fragment as q } from "react/jsx-runtime";
+import R, { forwardRef as K, createContext as Q, useState as V, useContext as X } from "react";
+import r, { ThemeProvider as Y } from "styled-components";
 const e = {
   fonts: {
     secondary: "Raleway",
@@ -32,7 +32,7 @@ const e = {
     thin: "0.0625rem",
     light: "0.125rem"
   }
-}, Z = c.button`
+}, Z = r.button`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -58,15 +58,15 @@ const e = {
     & .button-icon-text-space svg {
         max-width: 100%;
     }
-`, _ = c.div`
+`, _ = r.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-`, I = c.img`
+`, I = r.img`
     maxwidth: 100%;
-`, ee = c.span`
+`, ee = r.span`
     font-size: ${e.fontSize.xsmall};
     font-weight: ${e.fontWeight.medium};
     font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
@@ -79,10 +79,10 @@ const e = {
   buttonType: o,
   source: l,
   svg: m,
-  alt: r = "alt-button-icon",
+  alt: c = "alt-button-icon",
   text: d = "",
   className: h = "",
-  dataAttributes: f = {}
+  dataAttributes: u = {}
 }) => /* @__PURE__ */ a(
   Z,
   {
@@ -90,24 +90,24 @@ const e = {
     id: i,
     type: o,
     className: h,
-    ...f,
-    children: /* @__PURE__ */ u(_, { className: "button-icon-text-space", children: [
-      l ? /* @__PURE__ */ a(I, { src: l, alt: r }) : m || "",
+    ...u,
+    children: /* @__PURE__ */ f(_, { className: "button-icon-text-space", children: [
+      l ? /* @__PURE__ */ a(I, { src: l, alt: c }) : m || "",
       d && /* @__PURE__ */ a(ee, { id: i, children: d })
     ] })
   }
-), te = c.div`
+), te = r.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
     margin-bottom: ${e.spacing.small};
-`, ae = c.div`
+`, ae = r.div`
     display: flex;
     gap: ${e.spacing.xsmall};
     width: auto;
     height: auto;
-`, ne = c.label`
+`, ne = r.label`
     display: flex;
     align-items: center;
     justify-content:center;
@@ -124,19 +124,19 @@ const e = {
         height: auto;
         object-fit: contain;
     }
-`, oe = c.div`
+`, oe = r.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: ${e.spacing.xxxsmall};
-`, ie = c.span`
+`, ie = r.span`
     font-weight: ${e.fontWeight.bolder};
-`, le = c.div`
+`, le = r.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`, se = c.span`
+`, se = r.span`
     font-weight: ${e.fontWeight.light};
 `, B = ({
   htmlFor: t,
@@ -144,17 +144,17 @@ const e = {
   additionalInfo: o,
   $labelFlexDirection: l,
   source: m,
-  svg: r,
+  svg: c,
   className: d,
   children: h
-}) => /* @__PURE__ */ u(ne, { htmlFor: t, className: d, $labelFlexDirection: l, children: [
-  (m || r) && /* @__PURE__ */ a(le, { className: "label-icon-container", children: m ? /* @__PURE__ */ a("img", { src: m, alt: `${t}-label-icon` }) : r || "" }),
-  /* @__PURE__ */ u(oe, { className: "label-text-container", children: [
+}) => /* @__PURE__ */ f(ne, { htmlFor: t, className: d, $labelFlexDirection: l, children: [
+  (m || c) && /* @__PURE__ */ a(le, { className: "label-icon-container", children: m ? /* @__PURE__ */ a("img", { src: m, alt: `${t}-label-icon` }) : c || "" }),
+  /* @__PURE__ */ f(oe, { className: "label-text-container", children: [
     /* @__PURE__ */ a(ie, { className: "main-label", children: i }),
     o && /* @__PURE__ */ a(se, { className: "additional-info", children: o })
   ] }),
   h
-] }), W = c.input`
+] }), W = r.input`
     display: flex;
     place-content: center;
     font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
@@ -171,7 +171,7 @@ const e = {
     &:focus{
         border: ${e.borderThickness.thin} solid ${({ theme: t }) => t.colors.teal};
     }
-`, ce = c.textarea`
+`, ce = r.textarea`
     display: flex;
     place-content: center;
     border: ${e.borderThickness.light} solid ${({ theme: t }) => t.colors.text};
@@ -185,7 +185,7 @@ const e = {
     resize: none;
     overflow-y: auto;
 `, D = K((t, i) => {
-  const { type: o, id: l, onChange: m, isRequired: r, dataAttributes: d = {}, disabled: h, className: f } = t;
+  const { type: o, id: l, onChange: m, isRequired: c, dataAttributes: d = {}, disabled: h, className: u } = t;
   if (o === "textarea") {
     const { rows: y = 5, cols: F = 30, value: v, ...A } = t;
     return /* @__PURE__ */ a(
@@ -195,10 +195,10 @@ const e = {
         value: v,
         rows: y,
         cols: F,
-        className: f,
+        className: u,
         ref: i,
         disabled: h,
-        required: r,
+        required: c,
         ...A,
         ...d
       }
@@ -213,7 +213,8 @@ const e = {
         checked: y,
         onChange: m,
         disabled: h,
-        className: f,
+        className: u,
+        required: c,
         ...F,
         ...d
       }
@@ -226,8 +227,8 @@ const e = {
       placeholder: C,
       onChange: m,
       value: N,
-      required: r,
-      className: f,
+      required: c,
+      className: u,
       ref: i,
       disabled: h,
       pattern: p,
@@ -241,10 +242,10 @@ const e = {
     type: o,
     id: l,
     textLabel: m,
-    additionalInfo: r,
+    additionalInfo: c,
     $labelFlexDirection: d,
     svg: h,
-    labelClass: f,
+    labelClass: u,
     onChange: g,
     isRequired: N,
     dataAttributes: p,
@@ -259,8 +260,8 @@ const e = {
     idx: T,
     children: j
   } = t;
-  return /* @__PURE__ */ u(te, { className: `${i} ${l.replace("#", "")}-label-input-container`, children: [
-    o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: f }),
+  return /* @__PURE__ */ f(te, { className: `${i} ${l.replace("#", "")}-label-input-container`, children: [
+    o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: c, $labelFlexDirection: d, svg: h, className: u }),
     o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
       const { rows: n = 5, cols: $ = 30, value: s, ...k } = t;
       return /* @__PURE__ */ a(
@@ -303,7 +304,7 @@ const e = {
     })(),
     (o === "radio" || o === "checkbox") && (() => {
       const { checked: n, ...$ } = t;
-      return /* @__PURE__ */ u(R, { children: [
+      return /* @__PURE__ */ f(q, { children: [
         /* @__PURE__ */ a(
           D,
           {
@@ -319,32 +320,32 @@ const e = {
             dataAttributes: p
           }
         ),
-        /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: f })
+        /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: c, $labelFlexDirection: d, svg: h, className: u })
       ] });
     })(),
-    F && /* @__PURE__ */ u(ae, { className: "input-edit-buttons", children: [
+    F && /* @__PURE__ */ f(ae, { className: "input-edit-buttons", children: [
       /* @__PURE__ */ a(x, { id: `editable-${l}-edit-btn`, svg: v, buttonType: "button", onClick: A, className: `edit-radio-${T}`, dataAttributes: p }),
       /* @__PURE__ */ a(x, { id: `editable-${l}-delete-btn`, svg: S, buttonType: "button", onClick: z, className: `delete-radio-${T}`, dataAttributes: p })
     ] }),
     j
   ] });
-}, re = c.fieldset`
+}, re = r.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, de = c.legend`
+`, de = r.legend`
     font-size: ${e.spacing.medium};
     font-weight: 500;
     margin: 0 auto ${e.spacing.small} auto;
     text-align: center;
     font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
-`, me = c.div`
+`, me = r.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
     margin-bottom: ${e.spacing.small};
-`, be = c.div`
+`, be = r.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
@@ -354,69 +355,69 @@ const e = {
   idx: o,
   editableInformation: l,
   onChangeOfEditableOption: m,
-  onClickSaveEdit: r,
+  onClickSaveEdit: c,
   onClickCancelEdit: d,
   onClickDeleteEntry: h
-}) => /* @__PURE__ */ u(re, { className: "editable-option-fieldset", children: [
+}) => /* @__PURE__ */ f(re, { className: "editable-option-fieldset", children: [
   /* @__PURE__ */ a(de, { children: `${t} ${o + 1}` }),
-  l?.map((f, g) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
+  l?.map((u, g) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
     D,
     {
       id: `editable-option-${g}`,
       name: `editable-option-${g}`,
-      placeholderText: f.name.charAt(0).toUpperCase() + f.name.slice(1),
+      placeholderText: u.name.charAt(0).toUpperCase() + u.name.slice(1),
       onChange: m,
-      value: f.info,
-      type: f.type,
+      value: u.info,
+      type: u.type,
       isRequired: !0,
       className: "editable-option",
       dataAttributes: {
         "data-index": g,
         "data-fieldsetindex": i,
-        "data-key": f.info
+        "data-key": u.info
       }
     }
-  ) }, `${f.name}-${g}`)),
-  /* @__PURE__ */ u(be, { className: "editable-option-button-space", children: [
-    /* @__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 } }),
+  ) }, `${u.name}-${g}`)),
+  /* @__PURE__ */ f(be, { className: "editable-option-button-space", children: [
+    /* @__PURE__ */ a(x, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: c, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": i } }),
     /* @__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 } }),
     /* @__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 } })
   ] })
-] }), he = c.div`
+] }), he = r.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`, fe = ({
+`, ue = ({
   id: t,
   hasSubmit: i,
   submitText: o,
   handleSubmit: l,
   hasReset: m,
-  resetText: r,
+  resetText: c,
   handleReset: d,
   hasCancel: h,
-  cancelText: f,
+  cancelText: u,
   handleCancel: g
-}) => /* @__PURE__ */ u(he, { className: "form-main-button-container", children: [
+}) => /* @__PURE__ */ f(he, { className: "form-main-button-container", children: [
   i && /* @__PURE__ */ a(x, { id: `form-${t}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: l, className: "submit-form-btn" }),
-  m && /* @__PURE__ */ a(x, { id: `form-${t}-edit`, buttonType: "button", text: r ?? "Reset", onClick: d, className: "reset-form-btn" }),
-  h && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text: f ?? "Cancel", onClick: g, className: "cancel-form-btn" })
-] }), M = c.legend`
+  m && /* @__PURE__ */ a(x, { id: `form-${t}-edit`, buttonType: "button", text: c ?? "Reset", onClick: d, className: "reset-form-btn" }),
+  h && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text: u ?? "Cancel", onClick: g, className: "cancel-form-btn" })
+] }), M = r.legend`
     font-size: ${e.spacing.medium};
     font-weight: 500;
     margin-bottom: ${e.spacing.small};
     width: auto;
     text-align: center;
     font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
-`, U = c.fieldset`
+`, U = r.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, H = c.div`
+`, H = r.div`
     padding: ${e.spacing.small};
     height: auto;
     width: 100%;
-`, O = c.div`
+`, O = r.div`
     display: flex;
     justify-content: center;
     align-items: center;
@@ -425,16 +426,16 @@ const e = {
     font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
     font-size: ${e.fontSize.xsmall};
     font-weight: ${e.fontWeight.bold};
-`, ue = c.form`
+`, fe = r.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`, G = c.div`
+`, G = r.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, ge = c.div`
+`, ge = r.div`
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -446,10 +447,10 @@ const e = {
   isExpandable: o,
   id: l,
   formInputs: m,
-  labelAndInputContainerClass: r,
+  labelAndInputContainerClass: c,
   labelClass: d,
   inputClass: h,
-  onChangeOfEditableOption: f,
+  onChangeOfEditableOption: u,
   handleAddingInputEntry: g,
   hasSubmit: N = !1,
   submitText: p,
@@ -463,11 +464,11 @@ const e = {
   handleSubmitForm: z,
   className: T,
   children: j
-}) => /* @__PURE__ */ u(ue, { id: `${l}-form`, className: T, onSubmit: z, children: [
-  t ? t.map((n, $) => /* @__PURE__ */ u(H, { className: `${l}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ u(U, { id: `${l}-form-fieldset-${$}`, className: `${n.legend}-fieldset`, children: [
+}) => /* @__PURE__ */ f(fe, { id: `${l}-form`, className: T, onSubmit: z, children: [
+  t ? t.map((n, $) => /* @__PURE__ */ f(H, { className: `${l}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ f(U, { id: `${l}-form-fieldset-${$}`, className: `${n.legend}-fieldset`, children: [
       n.legend && /* @__PURE__ */ a(M, { className: `${n.legend}-legend`, children: n.legend }),
-      n.inputs.length !== 0 ? n.inputs.map((s, k) => /* @__PURE__ */ u(q.Fragment, { children: [
+      n.inputs.length !== 0 ? n.inputs.map((s, k) => /* @__PURE__ */ f(R.Fragment, { children: [
         s.type === "textarea" && /* @__PURE__ */ a(
           E,
           {
@@ -476,7 +477,7 @@ const e = {
             labelClass: d,
             inputClass: h,
             idx: k,
-            className: `${r} ${s?.uniqueClass}`
+            className: `${c} ${s?.uniqueClass}`
           }
         ),
         s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ a(
@@ -487,10 +488,10 @@ const e = {
             labelClass: d,
             inputClass: h,
             idx: k,
-            className: `${r} ${s?.uniqueClass}`
+            className: `${c} ${s?.uniqueClass}`
           }
         ),
-        (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
+        (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ f(q, { children: [
           /* @__PURE__ */ a(
             E,
             {
@@ -499,7 +500,7 @@ const e = {
               labelClass: d,
               inputClass: h,
               idx: k,
-              className: `${r} ${s?.uniqueClass}`
+              className: `${c} ${s?.uniqueClass}`
             }
           ),
           s.editing && s.isEditable && /* @__PURE__ */ a(
@@ -509,7 +510,7 @@ const e = {
               fieldsetIndex: $,
               idx: k,
               editableInformation: s?.editableInformation || [],
-              onChangeOfEditableOption: f,
+              onChangeOfEditableOption: u,
               onClickSaveEdit: s?.onClickSave || ((L) => {
               }),
               onClickCancelEdit: s?.onClickCancel || ((L) => {
@@ -522,10 +523,10 @@ const e = {
       ] }, `form-${l}-${k}`)) : n.isExpandable ? /* @__PURE__ */ a(O, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
     ] }),
     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": $ } }) })
-  ] }, `${n.legend}-${$}`)) : /* @__PURE__ */ u(H, { className: `${l}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ u(U, { id: `${l}-form-fieldset`, className: `${i}-fieldset`, children: [
+  ] }, `${n.legend}-${$}`)) : /* @__PURE__ */ f(H, { className: `${l}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ f(U, { id: `${l}-form-fieldset`, className: `${i}-fieldset`, children: [
       i && /* @__PURE__ */ a(M, { className: `${i}-legend`, children: i }),
-      !t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */ u(q.Fragment, { children: [
+      !t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */ f(R.Fragment, { children: [
         n.type === "textarea" && /* @__PURE__ */ a(
           E,
           {
@@ -534,7 +535,7 @@ const e = {
             labelClass: d,
             inputClass: h,
             idx: $,
-            className: `${r} ${n?.uniqueClass}`
+            className: `${c} ${n?.uniqueClass}`
           }
         ),
         n.type !== "textarea" && n.type !== "radio" && n.type !== "checkbox" && /* @__PURE__ */ a(
@@ -545,10 +546,10 @@ const e = {
             labelClass: d,
             inputClass: h,
             idx: $,
-            className: `${r} ${n?.uniqueClass}`
+            className: `${c} ${n?.uniqueClass}`
           }
         ),
-        (n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
+        (n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */ f(q, { children: [
           /* @__PURE__ */ a(
             E,
             {
@@ -557,7 +558,7 @@ const e = {
               labelClass: d,
               inputClass: h,
               idx: $,
-              className: `${r} ${n?.uniqueClass}`
+              className: `${c} ${n?.uniqueClass}`
             }
           ),
           n.editing && n.isEditable && /* @__PURE__ */ a(
@@ -566,7 +567,7 @@ const e = {
               legend: `${i}`,
               idx: $,
               editableInformation: n?.editableInformation,
-              onChangeOfEditableOption: f,
+              onChangeOfEditableOption: u,
               onClickSaveEdit: n?.onClickSave || ((s) => {
               }),
               onClickCancelEdit: n?.onClickCancel || ((s) => {
@@ -581,7 +582,7 @@ const e = {
     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" }) })
   ] }),
   /* @__PURE__ */ a(
-    fe,
+    ue,
     {
       id: l,
       hasSubmit: N,
@@ -646,10 +647,10 @@ const e = {
   initialTheme: i = xe,
   secondTheme: o = pe
 }) => {
-  const [l, m] = V(i), r = () => {
+  const [l, m] = V(i), c = () => {
     m((d) => d === i ? o : i);
   };
-  return /* @__PURE__ */ a(J.Provider, { value: { currentTheme: l, toggleTheme: r }, children: /* @__PURE__ */ a(Y, { theme: l, children: t }) });
+  return /* @__PURE__ */ a(J.Provider, { value: { currentTheme: l, toggleTheme: c }, children: /* @__PURE__ */ a(Y, { theme: l, children: t }) });
 }, Ee = () => X(J);
 export {
   Ce as DynamicForm,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbgarcia8/react-dynamic-form",
-  "version": "1.1.38",
+  "version": "1.1.39",
   "description": "A form that can be nested with editable, expandable and flexible input-forms",
   "keywords": [
     "form",