@kbgarcia8/react-dynamic-form 2.0.1 → 2.0.2

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

@@ -1,7 +1,7 @@
-import { jsx as e, jsxs as u, Fragment as j } from "react/jsx-runtime";
-import q, { forwardRef as X, createContext as Y, useState as Z, useContext as _ } from "react";
-import m, { ThemeProvider as I } from "styled-components";
-const t = {
+import { jsx as t, jsxs as f, Fragment as R } from "react/jsx-runtime";
+import B, { forwardRef as Z, createContext as _, useState as I, useContext as ee } from "react";
+import r, { ThemeProvider as te } from "styled-components";
+const e = {
   fonts: {
     secondary: "Raleway",
     tertiary: "Lato",
@@ -32,15 +32,15 @@ const t = {
     thin: "0.0625rem",
     light: "0.125rem"
   }
-}, R = m.button`
+}, W = r.button`
     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};
+    border: ${e.borderThickness.light} solid ${({ theme: a }) => a.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 t = {
 
     &:hover {
         background-color: lightblue;
-        border: ${t.borderThickness.light} solid gray;
+        border: ${e.borderThickness.light} solid gray;
     }
 
     & .button-icon-text-space {
@@ -58,77 +58,86 @@ const t = {
     & .button-icon-text-space svg {
         max-width: 100%;
     }
-`, B = m.div`
+`, P = r.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-`, W = m.img`
+`;
+r.img`
     maxwidth: 100%;
-`, P = m.span`
-    font-size: ${t.fontSize.xsmall};
-    font-weight: ${t.fontWeight.medium};
-    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
+`;
+const M = 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;
-`, p = ({
+`, x = ({
   onClick: a,
   id: l,
   buttonType: n,
-  source: i,
-  svg: d,
-  alt: c = "alt-button-icon",
-  text: r = "",
+  startIcon: i,
+  endIcon: d,
+  alt: m = "alt-button-icon",
+  text: c = "",
   className: b = "",
-  dataAttributes: f = {}
-}) => n === "submit" ? /* @__PURE__ */ e(
-  R,
-  {
-    id: l,
-    type: n,
-    className: b,
-    ...f,
-    children: /* @__PURE__ */ u(B, { className: "button-icon-text-space", children: [
-      i ? /* @__PURE__ */ e(W, { src: i, alt: c }) : d || "",
-      r && /* @__PURE__ */ e(P, { id: l, children: r })
-    ] })
-  }
-) : /* @__PURE__ */ e(
-  R,
-  {
-    onClick: a,
-    id: l,
-    type: n,
-    className: b,
-    ...f,
-    children: /* @__PURE__ */ u(B, { className: "button-icon-text-space", children: [
-      i ? /* @__PURE__ */ e(W, { src: i, alt: c }) : d || "",
-      r && /* @__PURE__ */ e(P, { id: l, children: r })
-    ] })
-  }
-), ee = m.div`
+  dataAttributes: u = {}
+}) => {
+  if (n === "button")
+    return /* @__PURE__ */ t(
+      W,
+      {
+        onClick: a,
+        id: l,
+        type: n,
+        className: b,
+        ...u,
+        children: /* @__PURE__ */ f(P, { className: "button-icon-text-space", children: [
+          i || "",
+          c && /* @__PURE__ */ t(M, { id: l, children: c }),
+          d || ""
+        ] })
+      }
+    );
+  if (n === "submit")
+    return /* @__PURE__ */ t(
+      W,
+      {
+        id: l,
+        type: n,
+        className: b,
+        ...u,
+        children: /* @__PURE__ */ f(P, { className: "button-icon-text-space", children: [
+          i || "",
+          c && /* @__PURE__ */ t(M, { id: l, children: c }),
+          d || ""
+        ] })
+      }
+    );
+}, ae = r.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${t.spacing.small};
-`, te = m.div`
+    margin-bottom: ${e.spacing.small};
+`, ne = r.div`
     display: flex;
-    gap: ${t.spacing.xsmall};
+    gap: ${e.spacing.xsmall};
     width: auto;
     height: auto;
-`, ae = m.label`
+`, oe = r.label`
     display: flex;
     align-items: 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};
+    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 {
@@ -136,321 +145,326 @@ const t = {
         height: auto;
         object-fit: contain;
     }
-`, ne = m.div`
+`, ie = r.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: ${t.spacing.xxxsmall};
-`, oe = m.span`
-    font-weight: ${t.fontWeight.bolder};
-`, ie = m.div`
+    gap: ${e.spacing.xxxsmall};
+`, le = r.span`
+    font-weight: ${e.fontWeight.bolder};
+`, U = r.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`, le = m.span`
-    font-weight: ${t.fontWeight.light};
-`, M = ({
+`, se = r.span`
+    font-weight: ${e.fontWeight.light};
+`, H = ({
   htmlFor: a,
   textLabel: l,
   additionalInfo: n,
   $labelFlexDirection: i,
-  source: d,
-  svg: c,
-  className: r,
+  startIcon: d,
+  endIcon: m,
+  className: c,
   children: b
-}) => /* @__PURE__ */ u(ae, { htmlFor: a, className: r, $labelFlexDirection: i, children: [
-  (d || c) && /* @__PURE__ */ e(ie, { className: "label-icon-container", children: d ? /* @__PURE__ */ e("img", { src: d, alt: `${a}-label-icon` }) : c || "" }),
-  /* @__PURE__ */ u(ne, { className: "label-text-container", children: [
-    /* @__PURE__ */ e(oe, { className: "main-label", children: l }),
-    n && /* @__PURE__ */ e(le, { className: "additional-info", children: n })
+}) => /* @__PURE__ */ f(oe, { htmlFor: a, className: c, $labelFlexDirection: i, children: [
+  d && /* @__PURE__ */ t(U, { className: "label-icon-container", children: d }),
+  /* @__PURE__ */ f(ie, { className: "label-text-container", children: [
+    /* @__PURE__ */ t(le, { className: "main-label", children: l }),
+    n && /* @__PURE__ */ t(se, { className: "additional-info", children: n })
   ] }),
+  m && /* @__PURE__ */ t(U, { className: "label-icon-container", children: m }),
   b
-] }), U = m.input`
+] }), O = r.input`
     display: flex;
     place-content: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
     line-height: 1.75;
-    padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
+    padding: ${e.spacing.xxxsmall} ${e.spacing.xsmall};
     max-width: 100%;
     height: auto;
     background-color: #FFFFFF;
     outline: none;
-    border: ${t.borderThickness.thin} solid #000000;
-    border-radius: ${t.borderRadius.xsmall};
+    border: ${e.borderThickness.thin} solid #000000;
+    border-radius: ${e.borderRadius.xsmall};
 
     &:focus{
-        border: ${t.borderThickness.thin} solid ${({ theme: a }) => a.colors.teal};
+        border: ${e.borderThickness.thin} solid ${({ theme: a }) => a.colors.teal};
     }
-`, se = m.textarea`
+`, ce = r.textarea`
     display: flex;
     place-content: center;
-    border: ${t.borderThickness.light} solid ${({ theme: a }) => a.colors.text};
-    border-radius: ${t.borderRadius.small};
+    border: ${e.borderThickness.light} solid ${({ theme: a }) => a.colors.text};
+    border-radius: ${e.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: ${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;
-`, T = X((a, l) => {
-  const { type: n, id: i, onChange: d, isRequired: c, dataAttributes: r = {}, disabled: b, className: f, name: $ } = a;
+`, T = Z((a, l) => {
+  const { type: n, id: i, onChange: d, isRequired: m, dataAttributes: c = {}, disabled: b, className: u, name: g } = a;
   if (n === "textarea") {
-    const { rows: w = 5, cols: E = 30, value: D, ...S } = a;
-    return /* @__PURE__ */ e(
-      se,
+    const { rows: k = 5, cols: E = 30, value: A, ...D } = a;
+    return /* @__PURE__ */ t(
+      ce,
       {
         ref: l,
-        value: D,
-        rows: w,
+        value: A,
+        rows: k,
         cols: E,
         id: i,
         onChange: d,
-        required: c,
+        required: m,
         disabled: b,
-        ...r,
-        className: f,
-        name: $
+        ...c,
+        className: u,
+        name: g
       }
     );
   }
   if (n === "radio" || n === "checkbox") {
-    const { checked: w, ...E } = a;
-    return /* @__PURE__ */ e(
-      U,
+    const { checked: k, ...E } = a;
+    return /* @__PURE__ */ t(
+      O,
       {
         ref: l,
         type: n,
-        checked: w,
+        checked: k,
         id: i,
         onChange: d,
-        required: c,
-        ...r,
+        required: m,
+        ...c,
         disabled: b,
-        className: f,
-        name: $
+        className: u,
+        name: g
       }
     );
   }
-  const k = a, { value: y, pattern: N, placeholderText: C, ...F } = k;
-  return /* @__PURE__ */ e(
-    U,
+  const p = a, { value: C, pattern: y, placeholderText: w, ...F } = p;
+  return /* @__PURE__ */ t(
+    O,
     {
       ref: l,
       type: n,
-      value: y,
-      pattern: N,
-      placeholder: C,
+      value: C,
+      pattern: y,
+      placeholder: w,
       id: i,
       onChange: d,
-      required: c,
-      ...r,
+      required: m,
+      ...c,
       disabled: b,
-      className: f,
-      name: $
+      className: u,
+      name: g
     }
   );
-}), A = (a) => {
+}), v = (a) => {
   const {
     className: l,
     type: n,
     id: i,
     textLabel: d,
-    additionalInfo: c,
-    $labelFlexDirection: r,
-    svg: b,
-    labelClass: f,
-    onChange: $,
-    isRequired: k,
+    additionalInfo: m,
+    $labelFlexDirection: c,
+    startIcon: b,
+    endIcon: u,
+    labelClass: g,
+    onChange: p,
+    isRequired: C,
     dataAttributes: y,
-    inputClass: N,
-    ref: C,
-    disabled: F,
-    isEditable: w,
-    editIcon: E,
+    inputClass: w,
+    ref: F,
+    disabled: k,
+    isEditable: E,
+    editIcon: A,
     onClickEdit: D,
-    deleteIcon: S,
-    onClickDelete: z,
-    idx: o,
-    children: g
+    deleteIcon: z,
+    onClickDelete: j,
+    idx: S,
+    children: L
   } = a;
-  return /* @__PURE__ */ u(ee, { className: `${l} ${i.replace("#", "")}-label-input-container`, children: [
-    n !== "radio" && n !== "checkbox" && /* @__PURE__ */ e(M, { htmlFor: i, textLabel: d, additionalInfo: c, $labelFlexDirection: r, svg: b, className: f }),
+  return /* @__PURE__ */ f(ae, { className: `${l} ${i.replace("#", "")}-label-input-container`, children: [
+    n !== "radio" && n !== "checkbox" && /* @__PURE__ */ t(H, { startIcon: b, endIcon: u, htmlFor: i, textLabel: d, additionalInfo: m, $labelFlexDirection: c, className: g }),
     n !== "radio" && n !== "checkbox" && n === "textarea" && (() => {
-      const { rows: s = 5, cols: x = 30, value: v, ...L } = a;
-      return /* @__PURE__ */ e(
+      const { rows: o = 5, cols: $ = 30, value: s, ...N } = a;
+      return /* @__PURE__ */ t(
         T,
         {
           id: i,
           name: i,
           type: "textarea",
-          isRequired: k,
-          onChange: $,
-          value: v,
-          rows: s,
-          cols: x,
+          isRequired: C,
+          onChange: p,
+          value: s,
+          rows: o,
+          cols: $,
           dataAttributes: y,
-          className: N,
-          ref: C,
-          disabled: F
+          className: w,
+          ref: F,
+          disabled: k
         }
       );
     })(),
     n !== "radio" && n !== "checkbox" && n !== "textarea" && (() => {
-      const s = a, { value: x, pattern: v, placeholderText: L, ...pe } = s;
-      return /* @__PURE__ */ e(
+      const o = a, { value: $, pattern: s, placeholderText: N, ...q } = o;
+      return /* @__PURE__ */ t(
         T,
         {
           id: i,
           name: i,
-          placeholderText: L,
-          onChange: $,
-          value: x,
+          placeholderText: N,
+          onChange: p,
+          value: $,
           type: n,
-          isRequired: k,
+          isRequired: C,
           dataAttributes: y,
-          className: N,
-          ref: C,
-          disabled: F,
-          pattern: v
+          className: w,
+          ref: F,
+          disabled: k,
+          pattern: s
         }
       );
     })(),
     (n === "radio" || n === "checkbox") && (() => {
-      const { checked: s, ...x } = a;
-      return /* @__PURE__ */ u(j, { children: [
-        /* @__PURE__ */ e(
+      const { checked: o, ...$ } = a;
+      return /* @__PURE__ */ f(R, { children: [
+        /* @__PURE__ */ t(
           T,
           {
-            ref: C,
+            ref: F,
             type: n,
             name: i,
             id: i,
-            isRequired: k,
-            checked: s,
-            onChange: $,
-            disabled: F,
-            className: N,
+            isRequired: C,
+            checked: o,
+            onChange: p,
+            disabled: k,
+            className: w,
             dataAttributes: y
           }
         ),
-        /* @__PURE__ */ e(M, { htmlFor: i, textLabel: d, additionalInfo: c, $labelFlexDirection: r, svg: b, className: f })
+        /* @__PURE__ */ t(H, { startIcon: b, endIcon: u, htmlFor: i, textLabel: d, additionalInfo: m, $labelFlexDirection: c, className: g })
       ] });
     })(),
-    w && /* @__PURE__ */ u(te, { className: "input-edit-buttons", children: [
-      /* @__PURE__ */ e(p, { id: `editable-${i}-edit-btn`, svg: E, buttonType: "button", onClick: D, className: `edit-radio-${o}`, dataAttributes: y }),
-      /* @__PURE__ */ e(p, { id: `editable-${i}-delete-btn`, svg: S, buttonType: "button", onClick: z, className: `delete-radio-${o}`, dataAttributes: y })
+    E && /* @__PURE__ */ f(ne, { className: "input-edit-buttons", children: [
+      /* @__PURE__ */ t(x, { id: `editable-${i}-edit-btn`, startIcon: A, buttonType: "button", onClick: D, className: `edit-radio-${S}`, dataAttributes: y }),
+      /* @__PURE__ */ t(x, { id: `editable-${i}-delete-btn`, startIcon: z, buttonType: "button", onClick: j, className: `delete-radio-${S}`, dataAttributes: y })
     ] }),
-    g
+    L
   ] });
-}, ce = m.fieldset`
+}, re = r.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, re = m.legend`
-    font-size: ${t.spacing.medium};
+`, de = r.legend`
+    font-size: ${e.spacing.medium};
     font-weight: 500;
-    margin: 0 auto ${t.spacing.small} auto;
+    margin: 0 auto ${e.spacing.small} auto;
     text-align: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`, de = m.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: ${t.spacing.small};
-`, me = m.div`
+    margin-bottom: ${e.spacing.small};
+`, be = r.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, H = ({
+`, G = ({
   legend: a,
   fieldsetIndex: l,
   idx: n,
   editableInformation: i,
   onChangeOfEditableOption: d,
-  onClickSaveEdit: c,
-  onClickCancelEdit: r,
+  onClickSaveEdit: m,
+  onClickCancelEdit: c,
   onClickDeleteEntry: b
-}) => /* @__PURE__ */ u(ce, { className: "editable-option-fieldset", children: [
-  /* @__PURE__ */ e(re, { children: `${a} ${n + 1}` }),
-  i?.map((f, $) => /* @__PURE__ */ e(de, { className: "editable-option-container", children: /* @__PURE__ */ e(
+}) => /* @__PURE__ */ f(re, { className: "editable-option-fieldset", children: [
+  /* @__PURE__ */ t(de, { children: `${a} ${n + 1}` }),
+  i?.map((u, g) => /* @__PURE__ */ t(me, { className: "editable-option-container", children: /* @__PURE__ */ t(
     T,
     {
-      id: `editable-option-${$}`,
-      name: `editable-option-${$}`,
-      placeholderText: f.name.charAt(0).toUpperCase() + f.name.slice(1),
+      id: `editable-option-${g}`,
+      name: `editable-option-${g}`,
+      placeholderText: u.name.charAt(0).toUpperCase() + u.name.slice(1),
       onChange: d,
-      value: f.info,
-      type: f.type,
+      value: u.info,
+      type: u.type,
       isRequired: !0,
       className: "editable-option",
       dataAttributes: {
-        "data-index": $,
+        "data-index": g,
         "data-fieldsetindex": l,
-        "data-key": f.info
+        "data-key": u.info
       }
     }
-  ) }, `${f.name}-${$}`)),
-  /* @__PURE__ */ u(me, { className: "editable-option-button-space", children: [
-    /* @__PURE__ */ e(p, { id: `editable-option-${n}-submit`, buttonType: "button", text: "Save", onClick: c, className: "editable-option-btn", dataAttributes: { "data-index": n, "data-fieldsetindex": l } }),
-    /* @__PURE__ */ e(p, { id: `editable-option-${n}-cancel`, buttonType: "button", text: "Cancel", onClick: r, className: "editable-option-btn", dataAttributes: { "data-index": n, "data-fieldsetindex": l } }),
-    /* @__PURE__ */ e(p, { id: `editable-option-${n}-delete`, buttonType: "button", text: "Delete", onClick: b, className: "editable-option-btn", dataAttributes: { "data-index": n, "data-fieldsetindex": l } })
+  ) }, `${u.name}-${g}`)),
+  /* @__PURE__ */ f(be, { className: "editable-option-button-space", children: [
+    /* @__PURE__ */ t(x, { id: `editable-option-${n}-submit`, buttonType: "button", text: "Save", onClick: m, className: "editable-option-btn", dataAttributes: { "data-index": n, "data-fieldsetindex": l } }),
+    /* @__PURE__ */ t(x, { id: `editable-option-${n}-cancel`, buttonType: "button", text: "Cancel", onClick: c, className: "editable-option-btn", dataAttributes: { "data-index": n, "data-fieldsetindex": l } }),
+    /* @__PURE__ */ t(x, { id: `editable-option-${n}-delete`, buttonType: "button", text: "Delete", onClick: b, className: "editable-option-btn", dataAttributes: { "data-index": n, "data-fieldsetindex": l } })
   ] })
-] }), be = m.div`
+] }), he = r.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`, he = ({
+`, ue = ({
   id: a,
   submitText: l,
-  hasReset: n,
-  resetText: i,
-  handleReset: d,
-  hasCancel: c,
-  cancelText: r,
-  handleCancel: b
-}) => /* @__PURE__ */ u(be, { className: "form-main-button-container", children: [
-  /* @__PURE__ */ e(p, { id: `form-${a}-submit`, buttonType: "submit", text: l ?? "Submit", className: "submit-form-btn" }),
-  n && /* @__PURE__ */ e(p, { id: `form-${a}-edit`, buttonType: "button", text: i ?? "Reset", onClick: d, className: "reset-form-btn" }),
-  c && /* @__PURE__ */ e(p, { id: `form-${a}-cancel`, buttonType: "button", text: r ?? "Cancel", onClick: b, className: "cancel-form-btn" })
-] }), O = m.legend`
-    font-size: ${t.spacing.medium};
+  submitIcon: n,
+  hasReset: i,
+  resetText: d,
+  resetIcon: m,
+  handleReset: c,
+  hasCancel: b,
+  cancelText: u,
+  cancelIcon: g,
+  handleCancel: p
+}) => /* @__PURE__ */ f(he, { className: "form-main-button-container", children: [
+  /* @__PURE__ */ t(x, { id: `form-${a}-submit`, startIcon: n, buttonType: "submit", text: l ?? "Submit", className: "submit-form-btn" }),
+  i && /* @__PURE__ */ t(x, { id: `form-${a}-edit`, startIcon: m, buttonType: "button", text: d ?? "Reset", onClick: c, className: "reset-form-btn" }),
+  b && /* @__PURE__ */ t(x, { id: `form-${a}-cancel`, startIcon: g, buttonType: "button", text: u ?? "Cancel", onClick: p, className: "cancel-form-btn" })
+] }), J = r.legend`
+    font-size: ${e.spacing.medium};
     font-weight: 500;
-    margin-bottom: ${t.spacing.small};
+    margin-bottom: ${e.spacing.small};
     width: auto;
     text-align: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`, G = m.fieldset`
+    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
+`, K = r.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, J = m.div`
-    padding: ${t.spacing.small};
+`, Q = r.div`
+    padding: ${e.spacing.small};
     height: auto;
     width: 100%;
-`, K = m.div`
+`, V = r.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};
-`, fe = m.form`
+    font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
+    font-size: ${e.fontSize.xsmall};
+    font-weight: ${e.fontWeight.bold};
+`, fe = r.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`, Q = m.div`
+`, X = r.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, ue = m.div`
+`, ge = r.div`
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -462,125 +476,128 @@ const t = {
   isExpandable: n,
   id: i,
   formInputs: d,
-  labelAndInputContainerClass: c,
-  labelClass: r,
+  labelAndInputContainerClass: m,
+  labelClass: c,
   inputClass: b,
-  onChangeOfEditableOption: f,
-  handleAddingInputEntry: $,
-  submitText: k,
+  onChangeOfEditableOption: u,
+  handleAddingInputEntry: g,
+  submitText: p,
+  submitIcon: C,
   hasReset: y = !1,
-  resetText: N,
-  handleReset: C,
-  hasCancel: F = !1,
-  cancelText: w,
-  handleCancel: E,
-  handleSubmitForm: D,
+  resetText: w,
+  resetIcon: F,
+  handleReset: k,
+  hasCancel: E = !1,
+  cancelText: A,
+  cancelIcon: D,
+  handleCancel: z,
+  handleSubmitForm: j,
   className: S,
-  children: z
-}) => /* @__PURE__ */ u(fe, { id: `${i}-form`, className: S, onSubmit: D, children: [
-  a ? a.map((o, g) => /* @__PURE__ */ u(J, { className: `${i}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ u(G, { id: `${i}-form-fieldset-${g}`, className: `${o.legend}-fieldset`, children: [
-      o.legend && /* @__PURE__ */ e(O, { className: `${o.legend}-legend`, children: o.legend }),
-      o.inputs.length !== 0 ? o.inputs.map((s, x) => /* @__PURE__ */ u(q.Fragment, { children: [
-        s.type === "textarea" && /* @__PURE__ */ e(
-          A,
+  children: L
+}) => /* @__PURE__ */ f(fe, { id: `${i}-form`, className: S, onSubmit: j, children: [
+  a ? a.map((o, $) => /* @__PURE__ */ f(Q, { className: `${i}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ f(K, { id: `${i}-form-fieldset-${$}`, className: `${o.legend}-fieldset`, children: [
+      o.legend && /* @__PURE__ */ t(J, { className: `${o.legend}-legend`, children: o.legend }),
+      o.inputs.length !== 0 ? o.inputs.map((s, N) => /* @__PURE__ */ f(B.Fragment, { children: [
+        s.type === "textarea" && /* @__PURE__ */ t(
+          v,
           {
             ...s,
             id: s.id ?? `${o.legend}-input`,
-            labelClass: r,
+            labelClass: c,
             inputClass: b,
-            idx: x,
-            className: `${c} ${s?.uniqueClass}`
+            idx: N,
+            className: `${m} ${s?.uniqueClass}`
           }
         ),
-        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ e(
-          A,
+        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ t(
+          v,
           {
             ...s,
             id: s.id ?? `${o.legend}-input`,
-            labelClass: r,
+            labelClass: c,
             inputClass: b,
-            idx: x,
-            className: `${c} ${s?.uniqueClass}`
+            idx: N,
+            className: `${m} ${s?.uniqueClass}`
           }
         ),
-        (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ u(j, { children: [
-          /* @__PURE__ */ e(
-            A,
+        (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ f(R, { children: [
+          /* @__PURE__ */ t(
+            v,
             {
               ...s,
               id: s.id ?? `${o.legend}-input`,
-              labelClass: r,
+              labelClass: c,
               inputClass: b,
-              idx: x,
-              className: `${c} ${s?.uniqueClass}`
+              idx: N,
+              className: `${m} ${s?.uniqueClass}`
             }
           ),
-          s.editing && s.isEditable && /* @__PURE__ */ e(
-            H,
+          s.editing && s.isEditable && /* @__PURE__ */ t(
+            G,
             {
               legend: `${o.legend}`,
-              fieldsetIndex: g,
-              idx: x,
+              fieldsetIndex: $,
+              idx: N,
               editableInformation: s?.editableInformation || [],
-              onChangeOfEditableOption: f,
-              onClickSaveEdit: s?.onClickSave || ((v) => {
+              onChangeOfEditableOption: u,
+              onClickSaveEdit: s?.onClickSave || ((q) => {
               }),
-              onClickCancelEdit: s?.onClickCancel || ((v) => {
+              onClickCancelEdit: s?.onClickCancel || ((q) => {
               }),
-              onClickDeleteEntry: s?.onClickDelete || ((v) => {
+              onClickDeleteEntry: s?.onClickDelete || ((q) => {
               })
             }
           )
         ] })
-      ] }, `form-${i}-${x}`)) : o.isExpandable ? /* @__PURE__ */ e(K, { children: `No entry yet on ${o.legend}. Click "+" button to add entry.` }) : ""
+      ] }, `form-${i}-${N}`)) : o.isExpandable ? /* @__PURE__ */ t(V, { children: `No entry yet on ${o.legend}. Click "+" button to add entry.` }) : ""
     ] }),
-    o.isExpandable && /* @__PURE__ */ e(Q, { className: "add-input-button-space", children: /* @__PURE__ */ e(p, { id: `expand-${o.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": g } }) })
-  ] }, `${o.legend}-${g}`)) : /* @__PURE__ */ u(J, { className: `${i}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ u(G, { id: `${i}-form-fieldset`, className: `${l}-fieldset`, children: [
-      l && /* @__PURE__ */ e(O, { className: `${l}-legend`, children: l }),
-      !a && d && d.length !== 0 ? d.map((o, g) => /* @__PURE__ */ u(q.Fragment, { children: [
-        o.type === "textarea" && /* @__PURE__ */ e(
-          A,
+    o.isExpandable && /* @__PURE__ */ t(X, { className: "add-input-button-space", children: /* @__PURE__ */ t(x, { id: `expand-${o.legend}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": $ } }) })
+  ] }, `${o.legend}-${$}`)) : /* @__PURE__ */ f(Q, { className: `${i}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ f(K, { id: `${i}-form-fieldset`, className: `${l}-fieldset`, children: [
+      l && /* @__PURE__ */ t(J, { className: `${l}-legend`, children: l }),
+      !a && d && d.length !== 0 ? d.map((o, $) => /* @__PURE__ */ f(B.Fragment, { children: [
+        o.type === "textarea" && /* @__PURE__ */ t(
+          v,
           {
             ...o,
             id: o.id ?? `${l}-input`,
-            labelClass: r,
+            labelClass: c,
             inputClass: b,
-            idx: g,
-            className: `${c} ${o?.uniqueClass}`
+            idx: $,
+            className: `${m} ${o?.uniqueClass}`
           }
         ),
-        o.type !== "textarea" && o.type !== "radio" && o.type !== "checkbox" && /* @__PURE__ */ e(
-          A,
+        o.type !== "textarea" && o.type !== "radio" && o.type !== "checkbox" && /* @__PURE__ */ t(
+          v,
           {
             ...o,
             id: o.id ?? `${l}-input`,
-            labelClass: r,
+            labelClass: c,
             inputClass: b,
-            idx: g,
-            className: `${c} ${o?.uniqueClass}`
+            idx: $,
+            className: `${m} ${o?.uniqueClass}`
           }
         ),
-        (o.type === "radio" || o.type === "checkbox") && /* @__PURE__ */ u(j, { children: [
-          /* @__PURE__ */ e(
-            A,
+        (o.type === "radio" || o.type === "checkbox") && /* @__PURE__ */ f(R, { children: [
+          /* @__PURE__ */ t(
+            v,
             {
               ...o,
               id: o.id ?? `${l}-input`,
-              labelClass: r,
+              labelClass: c,
               inputClass: b,
-              idx: g,
-              className: `${c} ${o?.uniqueClass}`
+              idx: $,
+              className: `${m} ${o?.uniqueClass}`
             }
           ),
-          o.editing && o.isEditable && /* @__PURE__ */ e(
-            H,
+          o.editing && o.isEditable && /* @__PURE__ */ t(
+            G,
             {
               legend: `${l}`,
-              idx: g,
+              idx: $,
               editableInformation: o?.editableInformation,
-              onChangeOfEditableOption: f,
+              onChangeOfEditableOption: u,
               onClickSaveEdit: o?.onClickSave || ((s) => {
               }),
               onClickCancelEdit: o?.onClickCancel || ((s) => {
@@ -590,24 +607,27 @@ const t = {
             }
           )
         ] })
-      ] }, `form-${i}-${g}`)) : n ? /* @__PURE__ */ e(K, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
+      ] }, `form-${i}-${$}`)) : n ? /* @__PURE__ */ t(V, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
     ] }),
-    n && /* @__PURE__ */ e(Q, { className: "add-input-button-space", children: /* @__PURE__ */ e(p, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
+    n && /* @__PURE__ */ t(X, { className: "add-input-button-space", children: /* @__PURE__ */ t(x, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry" }) })
   ] }),
-  /* @__PURE__ */ e(
-    he,
+  /* @__PURE__ */ t(
+    ue,
     {
       id: i,
-      submitText: k,
+      submitText: p,
+      submitIcon: C,
       hasReset: y,
-      resetText: N,
-      handleReset: C,
-      hasCancel: F,
-      cancelText: w,
-      handleCancel: E
+      resetText: w,
+      resetIcon: F,
+      handleReset: k,
+      hasCancel: E,
+      cancelText: A,
+      cancelIcon: D,
+      handleCancel: z
     }
   ),
-  /* @__PURE__ */ e(ue, { className: "children-container", children: z })
+  /* @__PURE__ */ t(ge, { className: "children-container", children: L })
 ] }), $e = (a) => {
   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(a) || n.test(a) || CSS.supports("color", a);
@@ -623,7 +643,7 @@ const t = {
   //Macbook 13" (1280x800)
   largeDesktop: "1200px",
   largerDesktop: "1400px"
-}, ge = {
+}, xe = {
   name: "light",
   colors: {
     text: h("#333446"),
@@ -638,7 +658,7 @@ const t = {
     warning: h("#F2C265"),
     error: h("#990000")
   }
-}, xe = {
+}, pe = {
   name: "dark",
   colors: {
     bg: h("#333446"),
@@ -653,22 +673,22 @@ const t = {
     warning: h("#FCFFC1"),
     error: h("#FAD4D4")
   }
-}, V = Y({}), Fe = ({
+}, Y = _({}), Fe = ({
   children: a,
-  initialTheme: l = ge,
-  secondTheme: n = xe
+  initialTheme: l = xe,
+  secondTheme: n = pe
 }) => {
-  const [i, d] = Z(l), c = () => {
-    d((r) => r === l ? n : l);
+  const [i, d] = I(l), m = () => {
+    d((c) => c === l ? n : l);
   };
-  return /* @__PURE__ */ e(V.Provider, { value: { currentTheme: i, toggleTheme: c }, children: /* @__PURE__ */ e(I, { theme: i, children: a }) });
-}, Ee = () => _(V);
+  return /* @__PURE__ */ t(Y.Provider, { value: { currentTheme: i, toggleTheme: m }, children: /* @__PURE__ */ t(te, { theme: i, children: a }) });
+}, Ee = () => ee(Y);
 export {
   Ce as DynamicForm,
-  V as ThemeContext,
+  Y as ThemeContext,
   Fe as ThemeContextProvider,
   we as breakpoints,
-  xe as darkTheme,
-  ge as lightTheme,
+  pe as darkTheme,
+  xe as lightTheme,
   Ee as useTheme
 };