@kbgarcia8/react-dynamic-form 1.1.39 → 2.0.0

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,82 @@ 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,
-  id: i,
-  buttonType: o,
-  source: l,
-  svg: m,
+`, p = ({
+  onClick: a,
+  id: l,
+  buttonType: n,
+  source: i,
+  svg: d,
   alt: c = "alt-button-icon",
-  text: d = "",
-  className: h = "",
-  dataAttributes: u = {}
-}) => /* @__PURE__ */ a(
-  Z,
-  {
-    onClick: t,
-    id: i,
-    type: o,
-    className: h,
-    ...u,
-    children: /* @__PURE__ */ f(_, { className: "button-icon-text-space", children: [
-      l ? /* @__PURE__ */ a(I, { src: l, alt: c }) : m || "",
-      d && /* @__PURE__ */ a(ee, { id: i, children: d })
-    ] })
-  }
-), te = r.div`
+  text: r = "",
+  className: b = "",
+  dataAttributes: f = {}
+}) => {
+  if (n === "button")
+    return /* @__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 })
+        ] })
+      }
+    );
+  if (n === "submit")
+    return /* @__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 })
+        ] })
+      }
+    );
+}, 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,485 +141,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,
-  textLabel: i,
-  additionalInfo: o,
-  $labelFlexDirection: l,
-  source: m,
+`, le = m.span`
+    font-weight: ${t.fontWeight.light};
+`, M = ({
+  htmlFor: a,
+  textLabel: l,
+  additionalInfo: n,
+  $labelFlexDirection: i,
+  source: d,
   svg: c,
-  className: d,
-  children: h
-}) => /* @__PURE__ */ f(ne, { htmlFor: t, className: d, $labelFlexDirection: l, children: [
-  (m || c) && /* @__PURE__ */ a(le, { className: "label-icon-container", children: m ? /* @__PURE__ */ a("img", { src: m, alt: `${t}-label-icon` }) : c || "" }),
-  /* @__PURE__ */ f(oe, { className: "label-text-container", children: [
-    /* @__PURE__ */ a(ie, { className: "main-label", children: i }),
-    o && /* @__PURE__ */ a(se, { className: "additional-info", children: o })
+  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;
-`, D = K((t, i) => {
-  const { type: o, id: l, onChange: m, isRequired: c, dataAttributes: d = {}, disabled: h, className: u } = t;
-  if (o === "textarea") {
-    const { rows: y = 5, cols: F = 30, value: v, ...A } = t;
-    return /* @__PURE__ */ a(
-      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,
       {
-        onChange: m,
-        value: v,
-        rows: y,
-        cols: F,
-        className: u,
-        ref: i,
-        disabled: h,
+        ref: l,
+        value: D,
+        rows: w,
+        cols: E,
+        id: i,
+        onChange: d,
         required: c,
-        ...A,
-        ...d
+        disabled: b,
+        ...r,
+        className: f,
+        name: $
       }
     );
   }
-  if (o === "radio" || o === "checkbox") {
-    const { checked: y, ...F } = t;
-    return /* @__PURE__ */ a(
-      W,
+  if (n === "radio" || n === "checkbox") {
+    const { checked: w, ...E } = a;
+    return /* @__PURE__ */ e(
+      U,
       {
-        ref: i,
-        checked: y,
-        onChange: m,
-        disabled: h,
-        className: u,
+        ref: l,
+        type: n,
+        checked: w,
+        id: i,
+        onChange: d,
         required: c,
-        ...F,
-        ...d
+        ...r,
+        disabled: b,
+        className: f,
+        name: $
       }
     );
   }
-  const g = t, { value: N, pattern: p, placeholderText: C, ...w } = g;
-  return /* @__PURE__ */ a(
-    W,
+  const k = a, { value: y, pattern: N, placeholderText: C, ...F } = k;
+  return /* @__PURE__ */ e(
+    U,
     {
+      ref: l,
+      type: n,
+      value: y,
+      pattern: N,
       placeholder: C,
-      onChange: m,
-      value: N,
+      id: i,
+      onChange: d,
       required: c,
-      className: u,
-      ref: i,
-      disabled: h,
-      pattern: p,
-      ...w,
-      ...d
+      ...r,
+      disabled: b,
+      className: f,
+      name: $
     }
   );
-}), E = (t) => {
+}), A = (a) => {
   const {
-    className: i,
-    type: o,
-    id: l,
-    textLabel: m,
+    className: l,
+    type: n,
+    id: i,
+    textLabel: d,
     additionalInfo: c,
-    $labelFlexDirection: d,
-    svg: h,
-    labelClass: u,
-    onChange: g,
-    isRequired: N,
-    dataAttributes: p,
-    inputClass: C,
-    ref: w,
-    disabled: y,
-    isEditable: F,
-    editIcon: v,
-    onClickEdit: A,
+    $labelFlexDirection: r,
+    svg: b,
+    labelClass: f,
+    onChange: $,
+    isRequired: k,
+    dataAttributes: y,
+    inputClass: N,
+    ref: C,
+    disabled: F,
+    isEditable: w,
+    editIcon: E,
+    onClickEdit: D,
     deleteIcon: S,
     onClickDelete: z,
-    idx: T,
-    children: j
-  } = t;
-  return /* @__PURE__ */ f(te, { className: `${i} ${l.replace("#", "")}-label-input-container`, children: [
-    o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: c, $labelFlexDirection: d, svg: h, className: u }),
-    o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
-      const { rows: n = 5, cols: $ = 30, value: s, ...k } = t;
-      return /* @__PURE__ */ a(
-        D,
+    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: l,
-          name: l,
+          id: i,
+          name: i,
           type: "textarea",
-          isRequired: N,
-          onChange: g,
-          value: s,
-          rows: n,
-          cols: $,
-          dataAttributes: p,
-          className: C,
-          ref: w,
-          disabled: y
+          isRequired: k,
+          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: k, ...L } = n;
-      return /* @__PURE__ */ a(
-        D,
+    n !== "radio" && n !== "checkbox" && n !== "textarea" && (() => {
+      const s = a, { value: x, pattern: v, placeholderText: L, ...pe } = s;
+      return /* @__PURE__ */ e(
+        T,
         {
-          id: l,
-          name: l,
-          placeholderText: k,
-          onChange: g,
-          value: $,
-          type: o,
-          isRequired: N,
-          dataAttributes: p,
-          className: C,
-          ref: w,
-          disabled: y,
-          pattern: s
+          id: i,
+          name: i,
+          placeholderText: L,
+          onChange: $,
+          value: x,
+          type: n,
+          isRequired: k,
+          dataAttributes: y,
+          className: N,
+          ref: C,
+          disabled: F,
+          pattern: v
         }
       );
     })(),
-    (o === "radio" || o === "checkbox") && (() => {
-      const { checked: n, ...$ } = t;
-      return /* @__PURE__ */ f(q, { children: [
-        /* @__PURE__ */ a(
-          D,
+    (n === "radio" || n === "checkbox") && (() => {
+      const { checked: s, ...x } = a;
+      return /* @__PURE__ */ u(j, { children: [
+        /* @__PURE__ */ e(
+          T,
           {
-            ref: w,
-            type: o,
-            name: l,
-            id: l,
-            isRequired: N,
-            checked: n,
-            onChange: g,
-            disabled: y,
-            className: C,
-            dataAttributes: p
+            ref: C,
+            type: n,
+            name: i,
+            id: i,
+            isRequired: k,
+            checked: s,
+            onChange: $,
+            disabled: F,
+            className: N,
+            dataAttributes: y
           }
         ),
-        /* @__PURE__ */ a(B, { htmlFor: l, 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 })
       ] });
     })(),
-    F && /* @__PURE__ */ f(ae, { className: "input-edit-buttons", children: [
-      /* @__PURE__ */ a(x, { id: `editable-${l}-edit-btn`, svg: v, buttonType: "button", onClick: A, className: `edit-radio-${T}`, dataAttributes: p }),
-      /* @__PURE__ */ a(x, { id: `editable-${l}-delete-btn`, svg: S, buttonType: "button", onClick: z, className: `delete-radio-${T}`, dataAttributes: p })
+    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,
-  fieldsetIndex: i,
-  idx: o,
-  editableInformation: l,
-  onChangeOfEditableOption: m,
+`, H = ({
+  legend: a,
+  fieldsetIndex: l,
+  idx: n,
+  editableInformation: i,
+  onChangeOfEditableOption: d,
   onClickSaveEdit: c,
-  onClickCancelEdit: d,
-  onClickDeleteEntry: h
-}) => /* @__PURE__ */ f(re, { className: "editable-option-fieldset", children: [
-  /* @__PURE__ */ a(de, { children: `${t} ${o + 1}` }),
-  l?.map((u, g) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
-    D,
+  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-fieldsetindex": i,
-        "data-key": u.info
+        "data-index": $,
+        "data-fieldsetindex": l,
+        "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": i } }),
-    /* @__PURE__ */ a(x, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": i } }),
-    /* @__PURE__ */ a(x, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: h, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": i } })
+  ) }, `${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: i,
-  submitText: o,
-  handleSubmit: l,
-  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: [
-  i && /* @__PURE__ */ a(x, { id: `form-${t}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: l, className: "submit-form-btn" }),
-  m && /* @__PURE__ */ a(x, { id: `form-${t}-edit`, buttonType: "button", text: 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,
-  legendText: i,
-  isExpandable: o,
-  id: l,
-  formInputs: m,
+  fieldsets: a = null,
+  legendText: l,
+  isExpandable: n,
+  id: i,
+  formInputs: d,
   labelAndInputContainerClass: c,
-  labelClass: d,
-  inputClass: h,
-  onChangeOfEditableOption: u,
-  handleAddingInputEntry: g,
-  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__ */ f(fe, { id: `${l}-form`, className: T, onSubmit: z, children: [
-  t ? t.map((n, $) => /* @__PURE__ */ f(H, { className: `${l}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ f(U, { id: `${l}-form-fieldset-${$}`, className: `${n.legend}-fieldset`, children: [
-      n.legend && /* @__PURE__ */ a(M, { className: `${n.legend}-legend`, children: n.legend }),
-      n.inputs.length !== 0 ? n.inputs.map((s, k) => /* @__PURE__ */ f(R.Fragment, { children: [
-        s.type === "textarea" && /* @__PURE__ */ a(
-          E,
+  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: k,
+            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(
-          E,
+        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ e(
+          A,
           {
             ...s,
-            id: s.id ?? `${n.legend}-input`,
-            labelClass: d,
-            inputClass: h,
-            idx: k,
+            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(
-            E,
+        (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: k,
+              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: k,
+              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-${l}-${k}`)) : 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: `${l}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ f(U, { id: `${l}-form-fieldset`, className: `${i}-fieldset`, children: [
-      i && /* @__PURE__ */ a(M, { className: `${i}-legend`, children: i }),
-      !t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */ f(R.Fragment, { children: [
-        n.type === "textarea" && /* @__PURE__ */ a(
-          E,
+    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 ?? `${i}-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(
-          E,
+        o.type !== "textarea" && o.type !== "radio" && o.type !== "checkbox" && /* @__PURE__ */ e(
+          A,
           {
-            ...n,
-            id: n.id ?? `${i}-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(
-            E,
+        (o.type === "radio" || o.type === "checkbox") && /* @__PURE__ */ u(j, { children: [
+          /* @__PURE__ */ e(
+            A,
             {
-              ...n,
-              id: n.id ?? `${i}-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: `${i}`,
-              idx: $,
-              editableInformation: n?.editableInformation,
-              onChangeOfEditableOption: u,
-              onClickSaveEdit: n?.onClickSave || ((s) => {
+              legend: `${l}`,
+              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-${l}-${$}`)) : o ? /* @__PURE__ */ a(O, { children: `No entry yet on ${i}. 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-${i}-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: l,
-      hasSubmit: N,
-      submitText: p,
-      handleSubmit: C,
-      hasReset: w,
-      resetText: y,
-      handleReset: F,
-      hasCancel: v,
-      cancelText: A,
-      handleCancel: S
+      id: i,
+      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 i = /^#([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 i.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
@@ -612,52 +628,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: i = xe,
-  secondTheme: o = pe
+}, V = Y({}), Fe = ({
+  children: a,
+  initialTheme: l = ge,
+  secondTheme: n = xe
 }) => {
-  const [l, m] = V(i), c = () => {
-    m((d) => d === i ? o : i);
+  const [i, d] = Z(l), c = () => {
+    d((r) => r === l ? n : l);
   };
-  return /* @__PURE__ */ a(J.Provider, { value: { currentTheme: l, toggleTheme: c }, children: /* @__PURE__ */ a(Y, { theme: l, 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
 };