@kbgarcia8/react-dynamic-form 1.1.40 → 2.0.1

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

@@ -1,7 +1,7 @@
-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 = {
+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 = {
   fonts: {
     secondary: "Raleway",
     tertiary: "Lato",
@@ -32,15 +32,15 @@ const e = {
     thin: "0.0625rem",
     light: "0.125rem"
   }
-}, Z = r.button`
+}, R = m.button`
     display: flex;
     align-items: center;
     justify-content: center;
-    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};
+    background-color: ${({ theme: a }) => a.colors.blue || "blue"};
+    color: ${({ theme: a }) => a.colors.bg || "white"};
+    border: ${t.borderThickness.light} solid ${({ theme: a }) => a.colors.text || "black"};
+    border-radius: ${t.borderRadius.xlarge};
+    padding: ${t.spacing.xxxsmall} ${t.spacing.small};
     margin: 0.125rem;
     width: auto;
     cursor: pointer;
@@ -48,7 +48,7 @@ const e = {
 
     &:hover {
         background-color: lightblue;
-        border: ${e.borderThickness.light} solid gray;
+        border: ${t.borderThickness.light} solid gray;
     }
 
     & .button-icon-text-space {
@@ -58,65 +58,77 @@ const e = {
     & .button-icon-text-space svg {
         max-width: 100%;
     }
-`, _ = r.div`
+`, B = m.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-`, I = r.img`
+`, W = m.img`
     maxwidth: 100%;
-`, ee = r.span`
-    font-size: ${e.fontSize.xsmall};
-    font-weight: ${e.fontWeight.medium};
-    font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
+`, P = m.span`
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.medium};
+    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
     display: flex;
     align-items: center;
     justify-content: center;
-`, x = ({
-  onClick: t,
+`, p = ({
+  onClick: a,
   id: l,
-  buttonType: o,
+  buttonType: n,
   source: i,
-  svg: m,
+  svg: d,
   alt: c = "alt-button-icon",
-  text: d = "",
-  className: h = "",
-  dataAttributes: u = {}
-}) => /* @__PURE__ */ a(
-  Z,
+  text: r = "",
+  className: b = "",
+  dataAttributes: f = {}
+}) => n === "submit" ? /* @__PURE__ */ e(
+  R,
   {
-    onClick: t,
     id: l,
-    type: o,
-    className: h,
-    ...u,
-    children: /* @__PURE__ */ f(_, { className: "button-icon-text-space", children: [
-      i ? /* @__PURE__ */ a(I, { src: i, alt: c }) : m || "",
-      d && /* @__PURE__ */ a(ee, { id: l, children: d })
+    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 })
     ] })
   }
-), te = r.div`
+) : /* @__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`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${e.spacing.small};
-`, ae = r.div`
+    margin-bottom: ${t.spacing.small};
+`, te = m.div`
     display: flex;
-    gap: ${e.spacing.xsmall};
+    gap: ${t.spacing.xsmall};
     width: auto;
     height: auto;
-`, ne = r.label`
+`, ae = m.label`
     display: flex;
     align-items: center;
     justify-content:center;
     height: auto;
-    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};
+    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};
     
     & .label-icon-container img,
     & .label-icon-container svg {
@@ -124,490 +136,484 @@ const e = {
         height: auto;
         object-fit: contain;
     }
-`, oe = r.div`
+`, ne = m.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: ${e.spacing.xxxsmall};
-`, ie = r.span`
-    font-weight: ${e.fontWeight.bolder};
-`, le = r.div`
+    gap: ${t.spacing.xxxsmall};
+`, oe = m.span`
+    font-weight: ${t.fontWeight.bolder};
+`, ie = m.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`, se = r.span`
-    font-weight: ${e.fontWeight.light};
-`, B = ({
-  htmlFor: t,
+`, le = m.span`
+    font-weight: ${t.fontWeight.light};
+`, M = ({
+  htmlFor: a,
   textLabel: l,
-  additionalInfo: o,
+  additionalInfo: n,
   $labelFlexDirection: i,
-  source: m,
+  source: d,
   svg: c,
-  className: d,
-  children: h
-}) => /* @__PURE__ */ f(ne, { htmlFor: t, className: d, $labelFlexDirection: i, 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: l }),
-    o && /* @__PURE__ */ a(se, { className: "additional-info", children: o })
+  className: r,
+  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 })
   ] }),
-  h
-] }), W = r.input`
+  b
+] }), U = m.input`
     display: flex;
     place-content: center;
-    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
-    font-size: ${e.fontSize.xsmall};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
     line-height: 1.75;
-    padding: ${e.spacing.xxxsmall} ${e.spacing.xsmall};
+    padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
     max-width: 100%;
     height: auto;
     background-color: #FFFFFF;
     outline: none;
-    border: ${e.borderThickness.thin} solid #000000;
-    border-radius: ${e.borderRadius.xsmall};
+    border: ${t.borderThickness.thin} solid #000000;
+    border-radius: ${t.borderRadius.xsmall};
 
     &:focus{
-        border: ${e.borderThickness.thin} solid ${({ theme: t }) => t.colors.teal};
+        border: ${t.borderThickness.thin} solid ${({ theme: a }) => a.colors.teal};
     }
-`, ce = r.textarea`
+`, se = m.textarea`
     display: flex;
     place-content: center;
-    border: ${e.borderThickness.light} solid ${({ theme: t }) => t.colors.text};
-    border-radius: ${e.borderRadius.small};
+    border: ${t.borderThickness.light} solid ${({ theme: a }) => a.colors.text};
+    border-radius: ${t.borderRadius.small};
     outline: none;
-    line-height: ${e.spacing.small};
-    padding: ${e.spacing.xxxsmall};
-    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
-    font-size: ${e.fontSize.xsmall};
+    line-height: ${t.spacing.small};
+    padding: ${t.spacing.xxxsmall};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`, S = K((t, l) => {
-  const { type: o, id: i, onChange: m, isRequired: c, dataAttributes: d = {}, disabled: h, className: u, name: g } = t;
-  if (o === "textarea") {
-    const { rows: w = 5, cols: E = 30, value: A, ...T } = t;
-    return /* @__PURE__ */ a(
-      ce,
+`, T = X((a, l) => {
+  const { type: n, id: i, onChange: d, isRequired: c, dataAttributes: r = {}, disabled: b, className: f, name: $ } = a;
+  if (n === "textarea") {
+    const { rows: w = 5, cols: E = 30, value: D, ...S } = a;
+    return /* @__PURE__ */ e(
+      se,
       {
         ref: l,
-        value: A,
+        value: D,
         rows: w,
         cols: E,
         id: i,
-        onChange: m,
+        onChange: d,
         required: c,
-        disabled: h,
-        ...d,
-        className: u,
-        name: g
+        disabled: b,
+        ...r,
+        className: f,
+        name: $
       }
     );
   }
-  if (o === "radio" || o === "checkbox") {
-    const { checked: w, ...E } = t;
-    return /* @__PURE__ */ a(
-      W,
+  if (n === "radio" || n === "checkbox") {
+    const { checked: w, ...E } = a;
+    return /* @__PURE__ */ e(
+      U,
       {
         ref: l,
-        type: o,
+        type: n,
         checked: w,
         id: i,
-        onChange: m,
+        onChange: d,
         required: c,
-        ...d,
-        disabled: h,
-        className: u,
-        name: g
+        ...r,
+        disabled: b,
+        className: f,
+        name: $
       }
     );
   }
-  const k = t, { value: p, pattern: N, placeholderText: C, ...F } = k;
-  return /* @__PURE__ */ a(
-    W,
+  const k = a, { value: y, pattern: N, placeholderText: C, ...F } = k;
+  return /* @__PURE__ */ e(
+    U,
     {
       ref: l,
-      type: o,
-      value: p,
+      type: n,
+      value: y,
       pattern: N,
       placeholder: C,
       id: i,
-      onChange: m,
+      onChange: d,
       required: c,
-      ...d,
-      disabled: h,
-      className: u,
-      name: g
+      ...r,
+      disabled: b,
+      className: f,
+      name: $
     }
   );
-}), v = (t) => {
+}), A = (a) => {
   const {
     className: l,
-    type: o,
+    type: n,
     id: i,
-    textLabel: m,
+    textLabel: d,
     additionalInfo: c,
-    $labelFlexDirection: d,
-    svg: h,
-    labelClass: u,
-    onChange: g,
+    $labelFlexDirection: r,
+    svg: b,
+    labelClass: f,
+    onChange: $,
     isRequired: k,
-    dataAttributes: p,
+    dataAttributes: y,
     inputClass: N,
     ref: C,
     disabled: F,
     isEditable: w,
     editIcon: E,
-    onClickEdit: A,
-    deleteIcon: T,
+    onClickEdit: D,
+    deleteIcon: S,
     onClickDelete: z,
-    idx: D,
-    children: j
-  } = t;
-  return /* @__PURE__ */ f(te, { className: `${l} ${i.replace("#", "")}-label-input-container`, children: [
-    o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: i, textLabel: m, additionalInfo: c, $labelFlexDirection: d, svg: h, className: u }),
-    o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
-      const { rows: n = 5, cols: $ = 30, value: s, ...y } = t;
-      return /* @__PURE__ */ a(
-        S,
+    idx: o,
+    children: g
+  } = 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 }),
+    n !== "radio" && n !== "checkbox" && n === "textarea" && (() => {
+      const { rows: s = 5, cols: x = 30, value: v, ...L } = a;
+      return /* @__PURE__ */ e(
+        T,
         {
           id: i,
           name: i,
           type: "textarea",
           isRequired: k,
-          onChange: g,
-          value: s,
-          rows: n,
-          cols: $,
-          dataAttributes: p,
+          onChange: $,
+          value: v,
+          rows: s,
+          cols: x,
+          dataAttributes: y,
           className: N,
           ref: C,
           disabled: F
         }
       );
     })(),
-    o !== "radio" && o !== "checkbox" && o !== "textarea" && (() => {
-      const n = t, { value: $, pattern: s, placeholderText: y, ...L } = n;
-      return /* @__PURE__ */ a(
-        S,
+    n !== "radio" && n !== "checkbox" && n !== "textarea" && (() => {
+      const s = a, { value: x, pattern: v, placeholderText: L, ...pe } = s;
+      return /* @__PURE__ */ e(
+        T,
         {
           id: i,
           name: i,
-          placeholderText: y,
-          onChange: g,
-          value: $,
-          type: o,
+          placeholderText: L,
+          onChange: $,
+          value: x,
+          type: n,
           isRequired: k,
-          dataAttributes: p,
+          dataAttributes: y,
           className: N,
           ref: C,
           disabled: F,
-          pattern: s
+          pattern: v
         }
       );
     })(),
-    (o === "radio" || o === "checkbox") && (() => {
-      const { checked: n, ...$ } = t;
-      return /* @__PURE__ */ f(q, { children: [
-        /* @__PURE__ */ a(
-          S,
+    (n === "radio" || n === "checkbox") && (() => {
+      const { checked: s, ...x } = a;
+      return /* @__PURE__ */ u(j, { children: [
+        /* @__PURE__ */ e(
+          T,
           {
             ref: C,
-            type: o,
+            type: n,
             name: i,
             id: i,
             isRequired: k,
-            checked: n,
-            onChange: g,
+            checked: s,
+            onChange: $,
             disabled: F,
             className: N,
-            dataAttributes: p
+            dataAttributes: y
           }
         ),
-        /* @__PURE__ */ a(B, { htmlFor: i, textLabel: m, additionalInfo: c, $labelFlexDirection: d, svg: h, className: u })
+        /* @__PURE__ */ e(M, { htmlFor: i, textLabel: d, additionalInfo: c, $labelFlexDirection: r, svg: b, className: f })
       ] });
     })(),
-    w && /* @__PURE__ */ f(ae, { className: "input-edit-buttons", children: [
-      /* @__PURE__ */ a(x, { id: `editable-${i}-edit-btn`, svg: E, buttonType: "button", onClick: A, className: `edit-radio-${D}`, dataAttributes: p }),
-      /* @__PURE__ */ a(x, { id: `editable-${i}-delete-btn`, svg: T, buttonType: "button", onClick: z, className: `delete-radio-${D}`, dataAttributes: p })
+    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 })
     ] }),
-    j
+    g
   ] });
-}, re = r.fieldset`
+}, ce = m.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, de = r.legend`
-    font-size: ${e.spacing.medium};
+`, re = m.legend`
+    font-size: ${t.spacing.medium};
     font-weight: 500;
-    margin: 0 auto ${e.spacing.small} auto;
+    margin: 0 auto ${t.spacing.small} auto;
     text-align: center;
-    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
-`, me = r.div`
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+`, de = m.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
-    margin-bottom: ${e.spacing.small};
-`, be = r.div`
+    margin-bottom: ${t.spacing.small};
+`, me = m.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, P = ({
-  legend: t,
+`, H = ({
+  legend: a,
   fieldsetIndex: l,
-  idx: o,
+  idx: n,
   editableInformation: i,
-  onChangeOfEditableOption: m,
+  onChangeOfEditableOption: d,
   onClickSaveEdit: c,
-  onClickCancelEdit: d,
-  onClickDeleteEntry: h
-}) => /* @__PURE__ */ f(re, { className: "editable-option-fieldset", children: [
-  /* @__PURE__ */ a(de, { children: `${t} ${o + 1}` }),
-  i?.map((u, g) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
-    S,
+  onClickCancelEdit: r,
+  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(
+    T,
     {
-      id: `editable-option-${g}`,
-      name: `editable-option-${g}`,
-      placeholderText: u.name.charAt(0).toUpperCase() + u.name.slice(1),
-      onChange: m,
-      value: u.info,
-      type: u.type,
+      id: `editable-option-${$}`,
+      name: `editable-option-${$}`,
+      placeholderText: f.name.charAt(0).toUpperCase() + f.name.slice(1),
+      onChange: d,
+      value: f.info,
+      type: f.type,
       isRequired: !0,
       className: "editable-option",
       dataAttributes: {
-        "data-index": g,
+        "data-index": $,
         "data-fieldsetindex": l,
-        "data-key": u.info
+        "data-key": f.info
       }
     }
-  ) }, `${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": l } }),
-    /* @__PURE__ */ a(x, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
-    /* @__PURE__ */ a(x, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: h, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } })
+  ) }, `${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 } })
   ] })
-] }), he = r.div`
+] }), be = m.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;
-`, ue = ({
-  id: t,
-  hasSubmit: l,
-  submitText: o,
-  handleSubmit: i,
-  hasReset: m,
-  resetText: c,
+`, he = ({
+  id: a,
+  submitText: l,
+  hasReset: n,
+  resetText: i,
   handleReset: d,
-  hasCancel: h,
-  cancelText: u,
-  handleCancel: g
-}) => /* @__PURE__ */ f(he, { className: "form-main-button-container", children: [
-  l && /* @__PURE__ */ a(x, { id: `form-${t}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: i, className: "submit-form-btn" }),
-  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};
+  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};
     font-weight: 500;
-    margin-bottom: ${e.spacing.small};
+    margin-bottom: ${t.spacing.small};
     width: auto;
     text-align: center;
-    font-family: ${e.fonts.secondary}, ${e.fonts.fallback};
-`, U = r.fieldset`
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+`, G = m.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, H = r.div`
-    padding: ${e.spacing.small};
+`, J = m.div`
+    padding: ${t.spacing.small};
     height: auto;
     width: 100%;
-`, O = r.div`
+`, K = m.div`
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: auto;
-    font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
-    font-size: ${e.fontSize.xsmall};
-    font-weight: ${e.fontWeight.bold};
-`, fe = r.form`
+    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.bold};
+`, fe = m.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`, G = r.div`
+`, Q = m.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, ge = r.div`
+`, ue = m.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 `, Ce = ({
-  fieldsets: t = null,
+  fieldsets: a = null,
   legendText: l,
-  isExpandable: o,
+  isExpandable: n,
   id: i,
-  formInputs: m,
+  formInputs: d,
   labelAndInputContainerClass: c,
-  labelClass: d,
-  inputClass: h,
-  onChangeOfEditableOption: u,
-  handleAddingInputEntry: g,
-  hasSubmit: k = !1,
-  submitText: p,
-  handleSubmit: N,
-  hasReset: C = !1,
-  resetText: F,
-  handleReset: w,
-  hasCancel: E = !1,
-  cancelText: A,
-  handleCancel: T,
-  handleSubmitForm: z,
-  className: D,
-  children: j
-}) => /* @__PURE__ */ f(fe, { id: `${i}-form`, className: D, onSubmit: z, children: [
-  t ? t.map((n, $) => /* @__PURE__ */ f(H, { className: `${i}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ f(U, { id: `${i}-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, y) => /* @__PURE__ */ f(R.Fragment, { children: [
-        s.type === "textarea" && /* @__PURE__ */ a(
-          v,
+  labelClass: r,
+  inputClass: b,
+  onChangeOfEditableOption: f,
+  handleAddingInputEntry: $,
+  submitText: k,
+  hasReset: y = !1,
+  resetText: N,
+  handleReset: C,
+  hasCancel: F = !1,
+  cancelText: w,
+  handleCancel: E,
+  handleSubmitForm: D,
+  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,
           {
             ...s,
-            id: s.id ?? `${n.legend}-input`,
-            labelClass: d,
-            inputClass: h,
-            idx: y,
+            id: s.id ?? `${o.legend}-input`,
+            labelClass: r,
+            inputClass: b,
+            idx: x,
             className: `${c} ${s?.uniqueClass}`
           }
         ),
-        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ a(
-          v,
+        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ e(
+          A,
           {
             ...s,
-            id: s.id ?? `${n.legend}-input`,
-            labelClass: d,
-            inputClass: h,
-            idx: y,
+            id: s.id ?? `${o.legend}-input`,
+            labelClass: r,
+            inputClass: b,
+            idx: x,
             className: `${c} ${s?.uniqueClass}`
           }
         ),
-        (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ f(q, { children: [
-          /* @__PURE__ */ a(
-            v,
+        (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ u(j, { children: [
+          /* @__PURE__ */ e(
+            A,
             {
               ...s,
-              id: s.id ?? `${n.legend}-input`,
-              labelClass: d,
-              inputClass: h,
-              idx: y,
+              id: s.id ?? `${o.legend}-input`,
+              labelClass: r,
+              inputClass: b,
+              idx: x,
               className: `${c} ${s?.uniqueClass}`
             }
           ),
-          s.editing && s.isEditable && /* @__PURE__ */ a(
-            P,
+          s.editing && s.isEditable && /* @__PURE__ */ e(
+            H,
             {
-              legend: `${n.legend}`,
-              fieldsetIndex: $,
-              idx: y,
+              legend: `${o.legend}`,
+              fieldsetIndex: g,
+              idx: x,
               editableInformation: s?.editableInformation || [],
-              onChangeOfEditableOption: u,
-              onClickSaveEdit: s?.onClickSave || ((L) => {
+              onChangeOfEditableOption: f,
+              onClickSaveEdit: s?.onClickSave || ((v) => {
               }),
-              onClickCancelEdit: s?.onClickCancel || ((L) => {
+              onClickCancelEdit: s?.onClickCancel || ((v) => {
               }),
-              onClickDeleteEntry: s?.onClickDelete || ((L) => {
+              onClickDeleteEntry: s?.onClickDelete || ((v) => {
               })
             }
           )
         ] })
-      ] }, `form-${i}-${y}`)) : n.isExpandable ? /* @__PURE__ */ a(O, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
+      ] }, `form-${i}-${x}`)) : o.isExpandable ? /* @__PURE__ */ e(K, { children: `No entry yet on ${o.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__ */ f(H, { className: `${i}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ f(U, { id: `${i}-form-fieldset`, className: `${l}-fieldset`, children: [
-      l && /* @__PURE__ */ a(M, { className: `${l}-legend`, children: l }),
-      !t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */ f(R.Fragment, { children: [
-        n.type === "textarea" && /* @__PURE__ */ a(
-          v,
+    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,
           {
-            ...n,
-            id: n.id ?? `${l}-input`,
-            labelClass: d,
-            inputClass: h,
-            idx: $,
-            className: `${c} ${n?.uniqueClass}`
+            ...o,
+            id: o.id ?? `${l}-input`,
+            labelClass: r,
+            inputClass: b,
+            idx: g,
+            className: `${c} ${o?.uniqueClass}`
           }
         ),
-        n.type !== "textarea" && n.type !== "radio" && n.type !== "checkbox" && /* @__PURE__ */ a(
-          v,
+        o.type !== "textarea" && o.type !== "radio" && o.type !== "checkbox" && /* @__PURE__ */ e(
+          A,
           {
-            ...n,
-            id: n.id ?? `${l}-input`,
-            labelClass: d,
-            inputClass: h,
-            idx: $,
-            className: `${c} ${n?.uniqueClass}`
+            ...o,
+            id: o.id ?? `${l}-input`,
+            labelClass: r,
+            inputClass: b,
+            idx: g,
+            className: `${c} ${o?.uniqueClass}`
           }
         ),
-        (n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */ f(q, { children: [
-          /* @__PURE__ */ a(
-            v,
+        (o.type === "radio" || o.type === "checkbox") && /* @__PURE__ */ u(j, { children: [
+          /* @__PURE__ */ e(
+            A,
             {
-              ...n,
-              id: n.id ?? `${l}-input`,
-              labelClass: d,
-              inputClass: h,
-              idx: $,
-              className: `${c} ${n?.uniqueClass}`
+              ...o,
+              id: o.id ?? `${l}-input`,
+              labelClass: r,
+              inputClass: b,
+              idx: g,
+              className: `${c} ${o?.uniqueClass}`
             }
           ),
-          n.editing && n.isEditable && /* @__PURE__ */ a(
-            P,
+          o.editing && o.isEditable && /* @__PURE__ */ e(
+            H,
             {
               legend: `${l}`,
-              idx: $,
-              editableInformation: n?.editableInformation,
-              onChangeOfEditableOption: u,
-              onClickSaveEdit: n?.onClickSave || ((s) => {
+              idx: g,
+              editableInformation: o?.editableInformation,
+              onChangeOfEditableOption: f,
+              onClickSaveEdit: o?.onClickSave || ((s) => {
               }),
-              onClickCancelEdit: n?.onClickCancel || ((s) => {
+              onClickCancelEdit: o?.onClickCancel || ((s) => {
               }),
-              onClickDeleteEntry: n?.onClickDelete || ((s) => {
+              onClickDeleteEntry: o?.onClickDelete || ((s) => {
               })
             }
           )
         ] })
-      ] }, `form-${i}-${$}`)) : o ? /* @__PURE__ */ a(O, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
+      ] }, `form-${i}-${g}`)) : n ? /* @__PURE__ */ e(K, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
     ] }),
-    o && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry" }) })
+    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" }) })
   ] }),
-  /* @__PURE__ */ a(
-    ue,
+  /* @__PURE__ */ e(
+    he,
     {
       id: i,
-      hasSubmit: k,
-      submitText: p,
-      handleSubmit: N,
-      hasReset: C,
-      resetText: F,
-      handleReset: w,
-      hasCancel: E,
-      cancelText: A,
-      handleCancel: T
+      submitText: k,
+      hasReset: y,
+      resetText: N,
+      handleReset: C,
+      hasCancel: F,
+      cancelText: w,
+      handleCancel: E
     }
   ),
-  /* @__PURE__ */ a(ge, { className: "children-container", children: j })
-] }), $e = (t) => {
-  const l = /^#([0-9A-Fa-f]{3}){1,2}$/, o = /^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(t) || o.test(t) || CSS.supports("color", t);
-}, b = (t) => {
-  if (!$e(t)) throw new Error(`Invalid color: ${t}`);
-  return t;
+  /* @__PURE__ */ e(ue, { className: "children-container", children: z })
+] }), $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);
+}, h = (a) => {
+  if (!$e(a)) throw new Error(`Invalid color: ${a}`);
+  return a;
 }, we = {
   mobile: "320px",
   //Small iPhone SE & Medium: iPhone 12-15
@@ -617,52 +623,52 @@ const e = {
   //Macbook 13" (1280x800)
   largeDesktop: "1200px",
   largerDesktop: "1400px"
-}, xe = {
+}, ge = {
   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 = {
+}, xe = {
   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")
   }
-}, J = Q({}), Fe = ({
-  children: t,
-  initialTheme: l = xe,
-  secondTheme: o = pe
+}, V = Y({}), Fe = ({
+  children: a,
+  initialTheme: l = ge,
+  secondTheme: n = xe
 }) => {
-  const [i, m] = V(l), c = () => {
-    m((d) => d === l ? o : l);
+  const [i, d] = Z(l), c = () => {
+    d((r) => r === l ? n : l);
   };
-  return /* @__PURE__ */ a(J.Provider, { value: { currentTheme: i, toggleTheme: c }, children: /* @__PURE__ */ a(Y, { theme: i, children: t }) });
-}, Ee = () => X(J);
+  return /* @__PURE__ */ e(V.Provider, { value: { currentTheme: i, toggleTheme: c }, children: /* @__PURE__ */ e(I, { theme: i, children: a }) });
+}, Ee = () => _(V);
 export {
   Ce as DynamicForm,
-  J as ThemeContext,
+  V as ThemeContext,
   Fe as ThemeContextProvider,
   we as breakpoints,
-  pe as darkTheme,
-  xe as lightTheme,
+  xe as darkTheme,
+  ge as lightTheme,
   Ee as useTheme
 };