@kbgarcia8/react-dynamic-form 1.1.3 → 1.1.26

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

@@ -1,7 +1,7 @@
-import { jsx as t, jsxs as g, Fragment as V } from "react/jsx-runtime";
-import W, { forwardRef as X, createContext as Y, useState as Z, useContext as _ } from "react";
-import s, { ThemeProvider as I } from "styled-components";
-const n = {
+import { jsx as a, jsxs as g, Fragment as R } from "react/jsx-runtime";
+import q, { forwardRef as J, createContext as K, useState as Q, useContext as V } from "react";
+import r, { ThemeProvider as X } from "styled-components";
+const e = {
   fonts: {
     secondary: "Raleway",
     tertiary: "Lato",
@@ -32,15 +32,15 @@ const n = {
     thin: "0.0625rem",
     light: "0.125rem"
   }
-}, ee = s.button`
+}, Y = r.button`
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${({ theme: e }) => e.colors.blue || "blue"};
-    color: ${({ theme: e }) => e.colors.bg || "white"};
-    border: ${n.borderThickness.light} solid ${({ theme: e }) => e.colors.text || "black"};
-    border-radius: ${n.borderRadius.xlarge};
-    padding: ${n.spacing.xxxsmall} ${n.spacing.small};
+    background-color: ${({ theme: t }) => t.colors.blue || "blue"};
+    color: ${({ theme: t }) => t.colors.bg || "white"};
+    border: ${e.borderThickness.light} solid ${({ theme: t }) => t.colors.text || "black"};
+    border-radius: ${e.borderRadius.xlarge};
+    padding: ${e.spacing.xxxsmall} ${e.spacing.small};
     margin: 0.125rem;
     width: auto;
     cursor: pointer;
@@ -48,7 +48,7 @@ const n = {
 
     &:hover {
         background-color: lightblue;
-        border: ${n.borderThickness.light} solid gray;
+        border: ${e.borderThickness.light} solid gray;
     }
 
     & .button-icon-text-space {
@@ -58,65 +58,65 @@ const n = {
     & .button-icon-text-space svg {
         max-width: 100%;
     }
-`, te = s.div`
+`, Z = r.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-`, ne = s.img`
+`, _ = r.img`
     maxwidth: 100%;
-`, ae = s.span`
-    font-size: ${n.fontSize.xsmall};
-    font-weight: ${n.fontWeight.medium};
-    font-family: ${n.fonts.tertiary}, ${n.fonts.fallback};
+`, ee = r.span`
+    font-size: ${e.fontSize.xsmall};
+    font-weight: ${e.fontWeight.medium};
+    font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
     display: flex;
     align-items: center;
     justify-content: center;
 `, x = ({
-  onClick: e,
+  onClick: t,
   id: o,
-  buttonType: l,
-  source: i,
-  svg: r,
+  buttonType: i,
+  source: l,
+  svg: b,
   alt: d = "alt-button-icon",
   text: m = "",
   className: c = "",
-  dataAttributes: h = {}
-}) => /* @__PURE__ */ t(
-  ee,
+  dataAttributes: f = {}
+}) => /* @__PURE__ */ a(
+  Y,
   {
-    onClick: e,
+    onClick: t,
     id: o,
-    type: l,
+    type: i,
     className: c,
-    ...h,
-    children: /* @__PURE__ */ g(te, { className: "button-icon-text-space", children: [
-      i ? /* @__PURE__ */ t(ne, { src: i, alt: d }) : r || "",
-      m && /* @__PURE__ */ t(ae, { id: o, children: m })
+    ...f,
+    children: /* @__PURE__ */ g(Z, { className: "button-icon-text-space", children: [
+      l ? /* @__PURE__ */ a(_, { src: l, alt: d }) : b || "",
+      m && /* @__PURE__ */ a(ee, { id: o, children: m })
     ] })
   }
-), oe = s.div`
+), te = r.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${n.spacing.small};
-`, ie = s.div`
+    margin-bottom: ${e.spacing.small};
+`, ae = r.div`
     display: flex;
-    gap: ${n.spacing.xsmall};
+    gap: ${e.spacing.xsmall};
     width: auto;
     height: auto;
-`, le = s.label`
+`, ne = r.label`
     display: flex;
     align-items: center;
     justify-content:center;
     height: auto;
-    flex-direction:  ${(e) => e.$labelFlexDirection || "column"};
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
-    font-weight: ${n.fontWeight.bold};
-    gap: ${n.spacing.xxsmall};
+    flex-direction:  ${(t) => t.$labelFlexDirection || "column"};
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
+    font-weight: ${e.fontWeight.bold};
+    gap: ${e.spacing.xxsmall};
     
     & .label-icon-container img,
     & .label-icon-container svg {
@@ -124,484 +124,485 @@ const n = {
         height: auto;
         object-fit: contain;
     }
-`, ce = s.span`
-    font-weight: ${n.fontWeight.bolder};
-`, se = s.div`
+`, oe = r.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: ${e.spacing.xxxsmall};
+`, le = r.span`
+    font-weight: ${e.fontWeight.bolder};
+`, ie = r.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`, re = s.span`
-    font-weight: ${n.fontWeight.light};
-`, P = ({
-  htmlFor: e,
+`, se = r.span`
+    font-weight: ${e.fontWeight.light};
+`, B = ({
+  htmlFor: t,
   textLabel: o,
-  additionalInfo: l,
-  $labelFlexDirection: i,
-  source: r,
+  additionalInfo: i,
+  $labelFlexDirection: l,
+  source: b,
   svg: d,
   className: m,
   children: c
-}) => /* @__PURE__ */ g(le, { htmlFor: e, className: m, $labelFlexDirection: i, children: [
-  (r || d) && /* @__PURE__ */ t(se, { className: "label-icon-container", children: r ? /* @__PURE__ */ t("img", { src: r, alt: `${e}-label-icon` }) : d || "" }),
-  /* @__PURE__ */ t(ce, { className: "main-label", children: o }),
-  l && /* @__PURE__ */ t(re, { className: "additional-info", children: l }),
+}) => /* @__PURE__ */ g(ne, { htmlFor: t, className: m, $labelFlexDirection: l, children: [
+  (b || d) && /* @__PURE__ */ a(ie, { className: "label-icon-container", children: b ? /* @__PURE__ */ a("img", { src: b, alt: `${t}-label-icon` }) : d || "" }),
+  /* @__PURE__ */ g(oe, { className: "label-text-container", children: [
+    /* @__PURE__ */ a(le, { className: "main-label", children: o }),
+    i && /* @__PURE__ */ a(se, { className: "additional-info", children: i })
+  ] }),
   c
-] }), q = s.input`
+] }), W = r.input`
     display: flex;
     place-content: center;
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
     line-height: 1.75;
-    padding: ${n.spacing.xxxsmall} ${n.spacing.xsmall};
+    padding: ${e.spacing.xxxsmall} ${e.spacing.xsmall};
     max-width: 100%;
     height: auto;
     background-color: #FFFFFF;
     outline: none;
-    border: ${n.borderThickness.thin} solid #000000;
-    border-radius: ${n.borderRadius.xsmall};
+    border: ${e.borderThickness.thin} solid #000000;
+    border-radius: ${e.borderRadius.xsmall};
 
     &:focus{
-        border: ${n.borderThickness.thin} solid ${({ theme: e }) => e.colors.teal};
+        border: ${e.borderThickness.thin} solid ${({ theme: t }) => t.colors.teal};
     }
-`, de = s.textarea`
+`, ce = r.textarea`
     display: flex;
     place-content: center;
-    border: ${n.borderThickness.light} solid ${({ theme: e }) => e.colors.text};
-    border-radius: ${n.borderRadius.small};
+    border: ${e.borderThickness.light} solid ${({ theme: t }) => t.colors.text};
+    border-radius: ${e.borderRadius.small};
     outline: none;
-    line-height: ${n.spacing.small};
-    padding: ${n.spacing.xxxsmall};
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
+    line-height: ${e.spacing.small};
+    padding: ${e.spacing.xxxsmall};
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`, j = X((e, o) => {
-  const { type: l, id: i, onChange: r, isRequired: d, dataAttributes: m, disabled: c, className: h } = e;
-  if (l === "textarea") {
-    const { rows: N = 5, cols: E = 30, value: A, ...S } = e;
-    return /* @__PURE__ */ t(
-      de,
+`, D = J((t, o) => {
+  const { type: i, id: l, onChange: b, isRequired: d, dataAttributes: m, disabled: c, className: f } = t;
+  if (i === "textarea") {
+    const { rows: y = 5, cols: F = 30, value: v, ...A } = t;
+    return /* @__PURE__ */ a(
+      ce,
       {
-        id: i,
-        onChange: r,
-        value: A,
-        rows: N,
-        cols: E,
+        id: l,
+        onChange: b,
+        value: v,
+        rows: y,
+        cols: F,
         ...m,
-        className: h,
+        className: f,
         ref: o,
         disabled: c,
         required: d
       }
     );
   }
-  if (l === "radio" || l === "checkbox") {
-    const { checked: N, ...E } = e;
-    return /* @__PURE__ */ t(
-      q,
+  if (i === "radio" || i === "checkbox") {
+    const { checked: y, ...F } = t;
+    return /* @__PURE__ */ a(
+      W,
       {
         ref: o,
         type: "checkbox",
-        id: i,
-        checked: N,
-        onChange: r,
+        id: l,
+        checked: y,
+        onChange: b,
         disabled: c,
-        className: h,
+        className: f,
         ...m
       }
     );
   }
-  const $ = e, { value: p, pattern: u, placeholderText: k, ...C } = $;
-  return /* @__PURE__ */ t(
-    q,
+  const $ = t, { value: N, pattern: p, placeholderText: C, ...w } = $;
+  return /* @__PURE__ */ a(
+    W,
     {
-      id: i,
-      name: i,
-      placeholder: k,
-      onChange: r,
-      value: p,
-      type: l,
+      id: l,
+      name: l,
+      placeholder: C,
+      onChange: b,
+      value: N,
+      type: i,
       required: d,
       ...m,
-      className: h,
+      className: f,
       ref: o,
       disabled: c,
-      pattern: u
+      pattern: p
     }
   );
-}), T = (e) => {
+}), E = (t) => {
   const {
     className: o,
-    type: l,
-    id: i,
-    textLabel: r,
+    type: i,
+    id: l,
+    textLabel: b,
     additionalInfo: d,
     $labelFlexDirection: m,
     svg: c,
-    labelClass: h,
+    labelClass: f,
     onChange: $,
-    isRequired: p,
-    dataAttributes: u,
-    inputClass: k,
-    ref: C,
-    disabled: N,
-    isEditable: E,
-    editIcon: A,
-    onClickEdit: S,
-    deleteIcon: L,
-    onClickDelete: B,
-    idx: z,
-    children: R
-  } = e;
-  return /* @__PURE__ */ g(oe, { className: `${o} ${i.replace("#", "")}-label-input-container`, children: [
-    l !== "radio" && l !== "checkbox" && /* @__PURE__ */ t(P, { htmlFor: i, textLabel: r, additionalInfo: d, $labelFlexDirection: m, svg: c, className: h }),
-    l !== "radio" && l !== "checkbox" && l === "textarea" && (() => {
-      const { rows: w = 5, cols: F = 30, value: D, ...a } = e;
-      return /* @__PURE__ */ t(
-        j,
+    isRequired: N,
+    dataAttributes: p,
+    inputClass: C,
+    ref: w,
+    disabled: y,
+    isEditable: F,
+    editIcon: v,
+    onClickEdit: A,
+    deleteIcon: S,
+    onClickDelete: z,
+    idx: T,
+    children: j
+  } = t;
+  return /* @__PURE__ */ g(te, { className: `${o} ${l.replace("#", "")}-label-input-container`, children: [
+    i !== "radio" && i !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: l, textLabel: b, additionalInfo: d, $labelFlexDirection: m, svg: c, className: f }),
+    i !== "radio" && i !== "checkbox" && i === "textarea" && (() => {
+      const { rows: n = 5, cols: u = 30, value: s, ...k } = t;
+      return /* @__PURE__ */ a(
+        D,
         {
-          id: i,
-          name: i,
+          id: l,
+          name: l,
           type: "textarea",
-          isRequired: p,
+          isRequired: N,
           onChange: $,
-          value: D,
-          rows: w,
-          cols: F,
-          dataAttributes: u,
-          className: k,
-          ref: C,
-          disabled: N
+          value: s,
+          rows: n,
+          cols: u,
+          dataAttributes: p,
+          className: C,
+          ref: w,
+          disabled: y
         }
       );
     })(),
-    l !== "radio" && l !== "checkbox" && l !== "textarea" && (() => {
-      const w = e, { value: F, pattern: D, placeholderText: a, ...y } = w;
-      return /* @__PURE__ */ t(
-        j,
+    i !== "radio" && i !== "checkbox" && i !== "textarea" && (() => {
+      const n = t, { value: u, pattern: s, placeholderText: k, ...L } = n;
+      return /* @__PURE__ */ a(
+        D,
         {
-          id: i,
-          name: i,
-          placeholderText: a,
+          id: l,
+          name: l,
+          placeholderText: k,
           onChange: $,
-          value: F,
-          type: l,
-          isRequired: p,
-          dataAttributes: u,
-          className: k,
-          ref: C,
-          disabled: N,
-          pattern: D
+          value: u,
+          type: i,
+          isRequired: N,
+          dataAttributes: p,
+          className: C,
+          ref: w,
+          disabled: y,
+          pattern: s
         }
       );
     })(),
-    (l === "radio" || l === "checkbox") && (() => {
-      const { checked: w, ...F } = e;
-      return /* @__PURE__ */ g(V, { children: [
-        /* @__PURE__ */ t(
-          j,
+    (i === "radio" || i === "checkbox") && (() => {
+      const { checked: n, ...u } = t;
+      return /* @__PURE__ */ g(R, { children: [
+        /* @__PURE__ */ a(
+          D,
           {
-            ref: C,
+            ref: w,
             type: "checkbox",
-            name: i,
-            id: i,
-            isRequired: p,
-            checked: w,
+            name: l,
+            id: l,
+            isRequired: N,
+            checked: n,
             onChange: $,
-            disabled: N,
-            className: k,
-            dataAttributes: u
+            disabled: y,
+            className: C,
+            dataAttributes: p
           }
         ),
-        /* @__PURE__ */ t(P, { htmlFor: i, textLabel: r, additionalInfo: d, $labelFlexDirection: m, svg: c, className: h })
+        /* @__PURE__ */ a(B, { htmlFor: l, textLabel: b, additionalInfo: d, $labelFlexDirection: m, svg: c, className: f })
       ] });
     })(),
-    E && /* @__PURE__ */ g(ie, { className: "input-edit-buttons", children: [
-      /* @__PURE__ */ t(x, { id: `editable-${i}-edit-btn`, svg: A, buttonType: "button", onClick: S, className: `edit-radio-${z}`, dataAttributes: u }),
-      /* @__PURE__ */ t(x, { id: `editable-${i}-delete-btn`, svg: L, buttonType: "button", onClick: B, className: `delete-radio-${z}`, dataAttributes: u })
+    F && /* @__PURE__ */ g(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 })
     ] }),
-    R
+    j
   ] });
-}, me = s.fieldset`
+}, re = r.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, be = s.legend`
-    font-size: ${n.spacing.medium};
+`, de = r.legend`
+    font-size: ${e.spacing.medium};
     font-weight: 500;
-    margin: 0 auto ${n.spacing.small} auto;
+    margin: 0 auto ${e.spacing.small} auto;
     text-align: center;
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-`, he = s.div`
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+`, me = r.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
-    margin-bottom: ${n.spacing.small};
-`, fe = s.div`
+    margin-bottom: ${e.spacing.small};
+`, be = r.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, M = ({
-  legend: e,
+`, P = ({
+  legend: t,
   idx: o,
-  editableInformation: l,
-  onChangeOfEditableOption: i,
-  onClickSaveEdit: r,
+  editableInformation: i,
+  onChangeOfEditableOption: l,
+  onClickSaveEdit: b,
   onClickCancelEdit: d,
   onClickDeleteEntry: m
-}) => /* @__PURE__ */ g(me, { className: "editable-selection-fieldset", children: [
-  /* @__PURE__ */ t(be, { children: `${e} ${o + 1}` }),
-  l.map((c, h) => /* @__PURE__ */ t(he, { className: "editable-selection-container", children: /* @__PURE__ */ t(
-    j,
+}) => /* @__PURE__ */ g(re, { className: "editable-option-fieldset", children: [
+  /* @__PURE__ */ a(de, { children: `${t} ${o + 1}` }),
+  i?.map((c, f) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
+    D,
     {
-      id: `editable-selection-${h}`,
-      name: `editable-selection-${h}`,
+      id: `editable-option-${f}`,
+      name: `editable-option-${f}`,
       placeholderText: c.name.charAt(0).toUpperCase() + c.name.slice(1),
-      onChange: i,
+      onChange: l,
       value: c.info,
       type: c.type,
       isRequired: !0,
-      className: "editable-selection",
+      className: "editable-option",
       dataAttributes: {
-        "data-index": h,
-        //* should be idx to correspond to radio button index and not with input increment
+        "data-index": f,
         "data-key": c.info
       }
     }
-  ) }, `${c.name}-${h}`)),
-  /* @__PURE__ */ g(fe, { className: "editable-selection-button-space", children: [
-    /* @__PURE__ */ t(x, { id: `editable-selection-${o}-submit`, buttonType: "submit", text: "Save", onClick: r, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
-    /* @__PURE__ */ t(x, { id: `editable-selection-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
-    /* @__PURE__ */ t(x, { id: `editable-selection-${o}-delete`, buttonType: "button", text: "Delete", onClick: m, className: "editable-selection-btn", dataAttributes: { "data-index": o } })
+  ) }, `${c.name}-${f}`)),
+  /* @__PURE__ */ g(be, { className: "editable-option-button-space", children: [
+    /* @__PURE__ */ a(x, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: b, className: "editable-option-btn", dataAttributes: { "data-index": o } }),
+    /* @__PURE__ */ a(x, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o } }),
+    /* @__PURE__ */ a(x, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: m, className: "editable-option-btn", dataAttributes: { "data-index": o } })
   ] })
-] }), ge = s.div`
+] }), he = r.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`, ue = ({
-  id: e,
+`, fe = ({
+  id: t,
   hasSubmit: o,
-  submitText: l,
-  handleSubmit: i,
-  hasEdit: r,
-  editText: d,
-  handleEdit: m,
+  submitText: i,
+  handleSubmit: l,
+  hasReset: b,
+  resetText: d,
+  handleReset: m,
   hasCancel: c,
-  cancelText: h,
-  handleCancel: $,
-  hasDelete: p,
-  deleteText: u,
-  handleDelete: k
-}) => /* @__PURE__ */ g(ge, { className: "form-main-button-container", children: [
-  o && /* @__PURE__ */ t(x, { id: `form-${e}-submit`, buttonType: "submit", text: l ?? "Submit", onClick: i, className: "submit-form-btn" }),
-  r && /* @__PURE__ */ t(x, { id: `form-${e}-edit`, buttonType: "button", text: d ?? "Edit", onClick: m, className: "edit-form-btn" }),
-  c && /* @__PURE__ */ t(x, { id: `form-${e}-cancel`, buttonType: "button", text: h ?? "Cancel", onClick: $, className: "cancel-form-btn" }),
-  p && /* @__PURE__ */ t(x, { id: `form-${e}-delete`, buttonType: "button", text: u ?? "Delete", onClick: k, className: "delete-form-btn" })
-] }), U = s.legend`
-    font-size: ${n.spacing.medium};
+  cancelText: f,
+  handleCancel: $
+}) => /* @__PURE__ */ g(he, { className: "form-main-button-container", children: [
+  o && /* @__PURE__ */ a(x, { id: `form-${t}-submit`, buttonType: "submit", text: i ?? "Submit", onClick: l, className: "submit-form-btn" }),
+  b && /* @__PURE__ */ a(x, { id: `form-${t}-edit`, buttonType: "button", text: d ?? "Reset", onClick: m, className: "reset-form-btn" }),
+  c && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text: f ?? "Cancel", onClick: $, className: "cancel-form-btn" })
+] }), M = r.legend`
+    font-size: ${e.spacing.medium};
     font-weight: 500;
-    margin-bottom: ${n.spacing.small};
+    margin-bottom: ${e.spacing.small};
     width: auto;
     text-align: center;
-    font-family: ${n.fonts.secondary}, ${n.fonts.fallback};
-`, H = s.fieldset`
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+`, U = r.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, G = s.div`
-    padding: ${n.spacing.small};
+`, H = r.div`
+    padding: ${e.spacing.small};
     height: auto;
     width: 100%;
-`, J = s.div`
+`, I = r.div`
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: auto;
-    font-family: ${n.fonts.tertiary}, ${n.fonts.fallback};
-    font-size: ${n.fontSize.xsmall};
-    font-weight: ${n.fontWeight.bold};
-`, xe = s.form`
+    font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
+    font-weight: ${e.fontWeight.bold};
+`, ge = r.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`, K = s.div`
+`, O = r.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, $e = s.div`
+`, ue = r.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 `, Ce = ({
-  fieldsets: e = null,
-  //* if a form has differrent fieldsets
+  fieldsets: t = null,
   legendText: o,
-  //* if form has no fieldsets, depends if you have fieldset for solo form
-  isExpandable: l,
-  //* if form has no fieldsets this is default to false - to add inputs
-  id: i,
-  formInputs: r,
-  //* object that contains the input fields information to make it reusable
+  isExpandable: i,
+  id: l,
+  formInputs: b,
   labelAndInputContainerClass: d,
   labelClass: m,
   inputClass: c,
-  handleEditableInputEntryChange: h,
-  //* handles change on editable inputs
+  onChangeOfEditableOption: f,
   handleAddingInputEntry: $,
-  hasSubmit: p = !1,
-  hasCancel: u = !1,
-  hasDelete: k = !1,
-  hasEdit: C = !1,
-  submitText: N,
-  handleSubmitForm: E,
-  handleSubmit: A,
-  cancelText: S,
-  handleCancel: L,
-  deleteText: B,
-  handleDelete: z,
-  editText: R,
-  handleEdit: w,
-  className: F,
-  children: D
-  //* if there are nodes to be inserted after submit/edit/cancel buttons usually in login or signup forms
-}) => /* @__PURE__ */ g(xe, { id: `${i}-form`, className: F, onSubmit: E, children: [
-  e ? e.map((a, y) => /* @__PURE__ */ g(G, { children: [
-    /* @__PURE__ */ g(H, { id: `${i}-form-fieldset-${y}`, className: "form-fieldset", children: [
-      a.legend && /* @__PURE__ */ t(U, { children: a.legend }),
-      a.inputs.length !== 0 ? a.inputs.map((f, v) => /* @__PURE__ */ g(W.Fragment, { children: [
-        f.type === "textarea" && /* @__PURE__ */ t(
-          T,
+  hasSubmit: N = !1,
+  submitText: p,
+  handleSubmit: C,
+  hasReset: w = !1,
+  resetText: y,
+  handleReset: F,
+  hasCancel: v = !1,
+  cancelText: A,
+  handleCancel: S,
+  handleSubmitForm: z,
+  className: T,
+  children: j
+}) => /* @__PURE__ */ g(ge, { id: `${l}-form`, className: T, onSubmit: z, children: [
+  t ? t.map((n, u) => /* @__PURE__ */ g(H, { className: `${l}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ g(U, { id: `${l}-form-fieldset-${u}`, 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__ */ g(q.Fragment, { children: [
+        s.type === "textarea" && /* @__PURE__ */ a(
+          E,
           {
-            ...f,
-            id: f.id ?? `${a.legend}-input`,
+            ...s,
+            id: s.id ?? `${n.legend}-input`,
             labelClass: m,
             inputClass: c,
-            idx: v,
-            className: d
+            idx: k,
+            className: `${d} ${s?.uniqueClass}`
           }
         ),
-        (f.type === "radio" || f.type === "checkbox") && /* @__PURE__ */ t(
-          T,
+        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ a(
+          E,
           {
-            ...f,
-            id: f.id ?? `${a.legend}-input`,
+            ...s,
+            id: s.id ?? `${n.legend}-input`,
             labelClass: m,
             inputClass: c,
-            idx: v,
-            className: d
+            idx: k,
+            className: `${d} ${s?.uniqueClass}`
           }
         ),
-        f.type !== "textarea" && f.type !== "radio" && f.type !== "checkbox" && /* @__PURE__ */ t(
-          T,
-          {
-            ...f,
-            id: f.id ?? `${a.legend}-input`,
-            labelClass: m,
-            inputClass: c,
-            idx: v,
-            className: d
-          }
-        ),
-        f.isEditable && f.editing && /* @__PURE__ */ t(
-          M,
-          {
-            legend: `${a.legend} ${v + 1}`,
-            idx: v,
-            editableInformation: f?.editableInformation,
-            onChangeOfEditableOption: h,
-            onClickSaveEdit: f?.onClickSave,
-            onClickCancelEdit: f?.onClickCancel,
-            onClickDeleteEntry: f?.onClickDelete
-          }
-        )
-      ] }, `form-${i}-${v}`)) : a.isExpandable ? /* @__PURE__ */ t(J, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
+        (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ g(R, { children: [
+          /* @__PURE__ */ a(
+            E,
+            {
+              ...s,
+              id: s.id ?? `${n.legend}-input`,
+              labelClass: m,
+              inputClass: c,
+              idx: k,
+              className: `${d} ${s?.uniqueClass}`
+            }
+          ),
+          s.editing && s.isEditable && /* @__PURE__ */ a(
+            P,
+            {
+              legend: `${n.legend}`,
+              idx: k,
+              editableInformation: s?.editableInformation || [],
+              onChangeOfEditableOption: f,
+              onClickSaveEdit: s?.onClickSave || ((L) => {
+              }),
+              onClickCancelEdit: s?.onClickCancel || ((L) => {
+              }),
+              onClickDeleteEntry: s?.onClickDelete || ((L) => {
+              })
+            }
+          )
+        ] })
+      ] }, `form-${l}-${k}`)) : n.isExpandable ? /* @__PURE__ */ a(I, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
     ] }),
-    a.isExpandable && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(x, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
-  ] }, `${a.legend}-${y}`)) : /* @__PURE__ */ g(G, { children: [
-    /* @__PURE__ */ g(H, { id: `${i}-form-fieldset`, className: "form-fieldset", children: [
-      o && /* @__PURE__ */ t(U, { children: o }),
-      !e && r && r.length !== 0 ? r.map((a, y) => /* @__PURE__ */ g(W.Fragment, { children: [
-        a.type === "textarea" && /* @__PURE__ */ t(
-          T,
-          {
-            ...a,
-            id: a.id ?? `${o}-input`,
-            labelClass: m,
-            inputClass: c,
-            idx: y,
-            className: d
-          }
-        ),
-        (a.type === "radio" || a.type === "checkbox") && /* @__PURE__ */ t(
-          T,
+    n.isExpandable && /* @__PURE__ */ a(O, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${n.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
+  ] }, `${n.legend}-${u}`)) : /* @__PURE__ */ g(H, { className: `${l}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ g(U, { id: `${l}-form-fieldset`, className: `${o}-fieldset`, children: [
+      o && /* @__PURE__ */ a(M, { className: `${o}-legend`, children: o }),
+      !t && b && b.length !== 0 ? b.map((n, u) => /* @__PURE__ */ g(q.Fragment, { children: [
+        n.type === "textarea" && /* @__PURE__ */ a(
+          E,
           {
-            ...a,
-            id: a.id ?? `${o}-input`,
+            ...n,
+            id: n.id ?? `${o}-input`,
             labelClass: m,
             inputClass: c,
-            idx: y,
-            className: d
+            idx: u,
+            className: `${d} ${n?.uniqueClass}`
           }
         ),
-        a.type !== "textarea" && a.type !== "radio" && a.type !== "checkbox" && /* @__PURE__ */ t(
-          T,
+        n.type !== "textarea" && n.type !== "radio" && n.type !== "checkbox" && /* @__PURE__ */ a(
+          E,
           {
-            ...a,
-            id: a.id ?? `${o}-input`,
+            ...n,
+            id: n.id ?? `${o}-input`,
             labelClass: m,
             inputClass: c,
-            idx: y,
-            className: d
+            idx: u,
+            className: `${d} ${n?.uniqueClass}`
           }
         ),
-        a.isEditable && a.editing && /* @__PURE__ */ t(
-          M,
-          {
-            legend: `${o} ${y + 1}`,
-            idx: y,
-            editableInformation: a?.editableInformation,
-            onChangeOfEditableOption: h,
-            onClickSaveEdit: a?.onClickSave,
-            onClickCancelEdit: a?.onClickEdit,
-            onClickDeleteEntry: a?.onClickDelete
-          }
-        )
-      ] }, `form-${i}-${y}`)) : l ? /* @__PURE__ */ t(J, { children: `No entry yet on ${o}. Please click "+" button to add` }) : ""
+        (n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */ g(R, { children: [
+          /* @__PURE__ */ a(
+            E,
+            {
+              ...n,
+              id: n.id ?? `${o}-input`,
+              labelClass: m,
+              inputClass: c,
+              idx: u,
+              className: `${d} ${n?.uniqueClass}`
+            }
+          ),
+          n.editing && n.isEditable && /* @__PURE__ */ a(
+            P,
+            {
+              legend: `${o}`,
+              idx: u,
+              editableInformation: n?.editableInformation,
+              onChangeOfEditableOption: f,
+              onClickSaveEdit: n?.onClickSave || ((s) => {
+              }),
+              onClickCancelEdit: n?.onClickCancel || ((s) => {
+              }),
+              onClickDeleteEntry: n?.onClickDelete || ((s) => {
+              })
+            }
+          )
+        ] })
+      ] }, `form-${l}-${u}`)) : i ? /* @__PURE__ */ a(I, { children: `No entry yet on ${o}. Please click "+" button to add` }) : ""
     ] }),
-    l && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(x, { id: `expand-${o}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
+    i && /* @__PURE__ */ a(O, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${o}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
   ] }),
-  /* @__PURE__ */ t(
-    ue,
+  /* @__PURE__ */ a(
+    fe,
     {
-      id: i,
-      hasSubmit: p,
-      submitText: N,
-      handleSubmit: A,
-      hasEdit: C,
-      editText: R,
-      handleEdit: w,
-      hasCancel: u,
-      cancelText: S,
-      handleCancel: L,
-      hasDelete: k,
-      deleteText: B,
-      handleDelete: z
+      id: l,
+      hasSubmit: N,
+      submitText: p,
+      handleSubmit: C,
+      hasReset: w,
+      resetText: y,
+      handleReset: F,
+      hasCancel: v,
+      cancelText: A,
+      handleCancel: S
     }
   ),
-  /* @__PURE__ */ t($e, { className: "children-container", children: D })
-] }), ye = (e) => {
-  const o = /^#([0-9A-Fa-f]{3}){1,2}$/, l = /^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(e) || l.test(e) || CSS.supports("color", e);
-}, b = (e) => {
-  if (!ye(e)) throw new Error(`Invalid color: ${e}`);
-  return e;
-}, Ee = {
+  /* @__PURE__ */ a(ue, { className: "children-container", children: j })
+] }), $e = (t) => {
+  const o = /^#([0-9A-Fa-f]{3}){1,2}$/, i = /^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;
+  return o.test(t) || i.test(t) || CSS.supports("color", t);
+}, h = (t) => {
+  if (!$e(t)) throw new Error(`Invalid color: ${t}`);
+  return t;
+}, we = {
   mobile: "320px",
   //Small iPhone SE & Medium: iPhone 12-15
   tablet: "768px",
@@ -610,48 +611,52 @@ const n = {
   //Macbook 13" (1280x800)
   largeDesktop: "1200px",
   largerDesktop: "1400px"
-}, O = {
+}, xe = {
   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")
+    text: h("#333446"),
+    bg: h("#EEEEEE"),
+    blue: h("#7F8CAA"),
+    blue2: h("#80A6FF"),
+    teal: h("#5b8280ff"),
+    teal2: h("#AEEAE7"),
+    gray: h("#AEAEAE"),
+    information: h("#202234"),
+    success: h("#123524"),
+    warning: h("#F2C265"),
+    error: h("#990000")
   }
 }, pe = {
   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")
+    bg: h("#333446"),
+    text: h("#EEEEEE"),
+    blue: h("#80A6FF"),
+    blue2: h("#7F8CAA"),
+    teal: h("#AEEAE7"),
+    teal2: h("#5b8280ff"),
+    gray: h("#D0D0DD"),
+    information: h("#C9E6F0"),
+    success: h("#9EDF9C"),
+    warning: h("#FCFFC1"),
+    error: h("#FAD4D4")
   }
-}, Q = Y(void 0), Fe = ({ children: e }) => {
-  const [o, l] = Z(O), i = () => {
-    l((r) => r === O ? pe : O);
+}, G = K({}), Fe = ({
+  children: t,
+  initialTheme: o = xe,
+  secondTheme: i = pe
+}) => {
+  const [l, b] = Q(o), d = () => {
+    b((m) => m === o ? i : o);
   };
-  return /* @__PURE__ */ t(Q.Provider, { value: { currentTheme: o, toggleTheme: i }, children: /* @__PURE__ */ t(I, { theme: o, children: e }) });
-}, ve = () => _(Q);
+  return /* @__PURE__ */ a(G.Provider, { value: { currentTheme: l, toggleTheme: d }, children: /* @__PURE__ */ a(X, { theme: l, children: t }) });
+}, Ee = () => V(G);
 export {
   Ce as DynamicForm,
-  Q as ThemeContext,
+  G as ThemeContext,
   Fe as ThemeContextProvider,
-  Ee as breakpoints,
+  we as breakpoints,
   pe as darkTheme,
-  O as lightTheme,
-  ve as useTheme
+  xe as lightTheme,
+  Ee as useTheme
 };