@kbgarcia8/react-dynamic-form 2.0.3 → 2.0.4

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

@@ -1,6 +1,6 @@
-import { jsx as t, jsxs as $, Fragment as U } from "react/jsx-runtime";
-import H, { forwardRef as re, createContext as ae, useState as le, useContext as ne } from "react";
-import h, { css as g, ThemeProvider as ie } from "styled-components";
+import { jsx as r, jsxs as $, Fragment as O } from "react/jsx-runtime";
+import M, { forwardRef as re, createContext as ae, useState as le, useContext as ne } from "react";
+import u, { css as g, ThemeProvider as se } from "styled-components";
 const o = {
   fonts: {
     secondary: "Raleway",
@@ -51,18 +51,18 @@ const o = {
     desktop: "1440px",
     largeDesktop: "1920px"
   }
-}, se = (e) => {
+}, ie = (e) => {
   const n = /^#([0-9A-Fa-f]{3}){1,2}$/, l = /^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;
   return n.test(e) || l.test(e) || CSS.supports("color", e);
-}, d = (e) => {
-  if (!se(e)) throw new Error(`Invalid color: ${e}`);
+}, m = (e) => {
+  if (!ie(e)) throw new Error(`Invalid color: ${e}`);
   return e;
-}, R = Object.keys(o.breakpoints).reduce(
+}, I = Object.keys(o.breakpoints).reduce(
   (e, n) => {
     const l = n;
-    return e[l] = (...r) => g`
+    return e[l] = (...a) => g`
     @media (min-width: ${o.breakpoints[l]}) {
-        ${g(...r)}
+        ${g(...a)}
         }
     `, e;
   },
@@ -135,37 +135,37 @@ const o = {
     `
 }, de = {
   smallest: g`
-        ${R.mobile`
+        ${I.mobile`
             font-size: ${o.fontSize.xxsmall};
             font-weight: ${o.fontWeight.regular};
         `}
     `,
   smaller: g`
-        ${R.mobile`
+        ${I.mobile`
             font-size: ${o.fontSize.xsmall};
             font-weight: ${o.fontWeight.regular};
         `}
     `,
   small: g`
-        ${R.mobile`
+        ${I.mobile`
             font-size: ${o.fontSize.small};
             font-weight: ${o.fontWeight.medium};
         `}
     `,
   medium: g`
-        ${R.mobile`
+        ${I.mobile`
             font-size: ${o.fontSize.medium};
             font-weight: ${o.fontWeight.bold};
         `}
     `,
   large: g`
-        ${R.mobile`
+        ${I.mobile`
             font-size: ${o.fontSize.large};
             font-weight: ${o.fontWeight.bolder};
         `}
     `,
   larger: g`
-        ${R.mobile`
+        ${I.mobile`
             font-size: ${o.fontSize.xlarge};
             font-weight: ${o.fontWeight.bolder};
         `}
@@ -176,7 +176,7 @@ const o = {
   squircle: g`border-radius: ${o.borderRadius.large};`,
   pill: g`border-radius: ${o.borderRadius.xlarge};`,
   circle: g`border-radius: ${o.borderRadius.circle};`
-}, Z = h.button`
+}, H = u.button`
     width: 100%;
     display: flex;
     align-items: center;
@@ -199,7 +199,7 @@ const o = {
         cursor: not-allowed;
         opacity: 0.6;
     }
-`, G = h.div`
+`, Z = u.div`
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -211,7 +211,7 @@ const o = {
                     flex: 1;
                 }
             `}
-`, I = h.span`
+`, G = u.span`
     flex: 2;
     ${({ $size: e }) => de[e || "small"]}
     font-family: ${o.fonts.tertiary}, ${o.fonts.fallback};
@@ -219,61 +219,61 @@ const o = {
     align-items: center;
     justify-content: center;
     max-width: 80%;
-`, T = ({
+`, B = ({
   onClick: e,
   id: n,
   buttonType: l = "button",
-  startIcon: r,
-  endIcon: c,
+  startIcon: a,
+  endIcon: d,
   text: i = "",
   className: b = "",
-  dataAttributes: u = {},
+  dataAttributes: h = {},
   color: x,
   radius: f,
-  size: p
-}) => l === "submit" ? /* @__PURE__ */ t(
-  Z,
+  size: y
+}) => l === "submit" ? /* @__PURE__ */ r(
+  H,
   {
     id: n,
     type: "submit",
     className: b,
-    ...u,
+    ...h,
     $color: x || "primary",
     $radius: f || "squircle",
-    children: /* @__PURE__ */ $(G, { className: "button-icon-text-space", $hasIcon: !!(r || c), $hasText: !!i, children: [
-      r || "",
-      i && /* @__PURE__ */ t(I, { $size: p || "small", id: n, children: i }),
-      c || ""
+    children: /* @__PURE__ */ $(Z, { className: "button-icon-text-space", $hasIcon: !!(a || d), $hasText: !!i, children: [
+      a || "",
+      i && /* @__PURE__ */ r(G, { $size: y || "small", id: n, children: i }),
+      d || ""
     ] })
   }
-) : /* @__PURE__ */ t(
-  Z,
+) : /* @__PURE__ */ r(
+  H,
   {
     onClick: e,
     id: n,
     type: l,
     className: b,
-    ...u,
+    ...h,
     $color: x || "primary",
     $radius: f || "squircle",
-    children: /* @__PURE__ */ $(G, { className: "button-icon-text-space", $hasIcon: !!(r || c), $hasText: !!i, children: [
-      r || "",
-      i && /* @__PURE__ */ t(I, { $size: p || "small", id: n, children: i }),
-      c || ""
+    children: /* @__PURE__ */ $(Z, { className: "button-icon-text-space", $hasIcon: !!(a || d), $hasText: !!i, children: [
+      a || "",
+      i && /* @__PURE__ */ r(G, { $size: y || "small", id: n, children: i }),
+      d || ""
     ] })
   }
-), be = h.div`
+), be = u.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
     margin-bottom: ${o.spacing.small};
-`, he = h.div`
+`, ue = u.div`
     display: flex;
     gap: ${o.spacing.xsmall};
     width: auto;
     height: auto;
-`, ue = h.label`
+`, he = u.label`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -290,38 +290,38 @@ const o = {
         height: auto;
         object-fit: contain;
     }
-`, $e = h.div`
+`, $e = u.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: ${o.spacing.xxxsmall};
-`, ge = h.span`
+`, ge = u.span`
     font-weight: ${o.fontWeight.bolder};
-`, J = h.div`
+`, J = u.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`, xe = h.span`
+`, xe = u.span`
     font-weight: ${o.fontWeight.light};
 `, K = ({
   htmlFor: e,
   textLabel: n,
   additionalInfo: l,
-  $labelFlexDirection: r,
-  startIcon: c,
+  $labelFlexDirection: a,
+  startIcon: d,
   endIcon: i,
   className: b,
-  children: u
-}) => /* @__PURE__ */ $(ue, { htmlFor: e, className: b, $labelFlexDirection: r, children: [
-  c && /* @__PURE__ */ t(J, { className: "label-icon-container", children: c }),
+  children: h
+}) => /* @__PURE__ */ $(he, { htmlFor: e, className: b, $labelFlexDirection: a, children: [
+  d && /* @__PURE__ */ r(J, { className: "label-icon-container", children: d }),
   /* @__PURE__ */ $($e, { className: "label-text-container", children: [
-    /* @__PURE__ */ t(ge, { className: "main-label", children: n }),
-    l && /* @__PURE__ */ t(xe, { className: "additional-info", children: l })
+    /* @__PURE__ */ r(ge, { className: "main-label", children: n }),
+    l && /* @__PURE__ */ r(xe, { className: "additional-info", children: l })
   ] }),
-  i && /* @__PURE__ */ t(J, { className: "label-icon-container", children: i }),
-  u
-] }), Q = h.input`
+  i && /* @__PURE__ */ r(J, { className: "label-icon-container", children: i }),
+  h
+] }), Q = u.input`
     display: flex;
     place-content: center;
     font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
@@ -338,7 +338,7 @@ const o = {
     &:focus{
         border: ${o.borderThickness.thin} solid ${({ theme: e }) => e.colors.teal};
     }
-`, fe = h.textarea`
+`, fe = u.textarea`
     display: flex;
     place-content: center;
     border: ${o.borderThickness.light} solid ${({ theme: e }) => e.colors.text};
@@ -351,21 +351,21 @@ const o = {
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`, A = re((e, n) => {
-  const { type: l, id: r, onChange: c, isRequired: i, dataAttributes: b = {}, disabled: u, className: x, name: f } = e;
+`, W = re((e, n) => {
+  const { type: l, id: a, onChange: d, isRequired: i, dataAttributes: b = {}, disabled: h, className: x, name: f } = e;
   if (l === "textarea") {
-    const { rows: w = 5, cols: S = 30, value: B, ...D } = e;
-    return /* @__PURE__ */ t(
+    const { rows: w = 5, cols: S = 30, value: E, ...q } = e;
+    return /* @__PURE__ */ r(
       fe,
       {
         ref: n,
-        value: B,
+        value: E,
         rows: w,
         cols: S,
-        id: r,
-        onChange: c,
+        id: a,
+        onChange: d,
         required: i,
-        disabled: u,
+        disabled: h,
         ...b,
         className: x,
         name: f
@@ -374,151 +374,151 @@ const o = {
   }
   if (l === "radio" || l === "checkbox") {
     const { checked: w, ...S } = e;
-    return /* @__PURE__ */ t(
+    return /* @__PURE__ */ r(
       Q,
       {
         ref: n,
         type: l,
         checked: w,
-        id: r,
-        onChange: c,
+        id: a,
+        onChange: d,
         required: i,
         ...b,
-        disabled: u,
+        disabled: h,
         className: x,
         name: f
       }
     );
   }
-  const p = e, { value: k, pattern: y, placeholderText: C, ...z } = p;
-  return /* @__PURE__ */ t(
+  const y = e, { value: p, pattern: k, placeholderText: C, ...N } = y;
+  return /* @__PURE__ */ r(
     Q,
     {
       ref: n,
       type: l,
-      value: k,
-      pattern: y,
+      value: p,
+      pattern: k,
       placeholder: C,
-      id: r,
-      onChange: c,
+      id: a,
+      onChange: d,
       required: i,
       ...b,
-      disabled: u,
+      disabled: h,
       className: x,
       name: f
     }
   );
-}), L = (e) => {
+}), R = (e) => {
   const {
     className: n,
     type: l,
-    id: r,
-    textLabel: c,
+    id: a,
+    textLabel: d,
     additionalInfo: i,
     $labelFlexDirection: b,
-    startIcon: u,
+    startIcon: h,
     endIcon: x,
     labelClass: f = "",
-    onChange: p,
-    isRequired: k,
-    dataAttributes: y,
+    onChange: y,
+    isRequired: p,
+    dataAttributes: k,
     inputClass: C = "",
-    ref: z,
+    ref: N,
     disabled: w,
     isEditable: S,
-    editIcon: B,
-    onClickEdit: D,
-    deleteIcon: j,
-    onClickDelete: N,
-    idx: v,
-    children: O
+    editIcon: E,
+    onClickEdit: q,
+    deleteIcon: L,
+    onClickDelete: T,
+    idx: F,
+    children: A
   } = e;
-  return /* @__PURE__ */ $(be, { className: `${n} ${r.replace("#", "")}-label-input-container`, children: [
-    l !== "radio" && l !== "checkbox" && /* @__PURE__ */ t(K, { startIcon: u, endIcon: x, htmlFor: r, textLabel: c, additionalInfo: i, $labelFlexDirection: b, className: f }),
+  return /* @__PURE__ */ $(be, { className: `${n} ${a.replace("#", "")}-label-input-container`, children: [
+    l !== "radio" && l !== "checkbox" && /* @__PURE__ */ r(K, { startIcon: h, endIcon: x, htmlFor: a, textLabel: d, additionalInfo: i, $labelFlexDirection: b, className: f }),
     l !== "radio" && l !== "checkbox" && l === "textarea" && (() => {
-      const { rows: q = 5, cols: E = 30, value: P, ...a } = e;
-      return /* @__PURE__ */ t(
-        A,
+      const { rows: z = 5, cols: D = 30, value: j, ...t } = e;
+      return /* @__PURE__ */ r(
+        W,
         {
-          id: r,
-          name: r,
+          id: a,
+          name: a,
           type: "textarea",
-          isRequired: k,
-          onChange: p,
-          value: P,
-          rows: q,
-          cols: E,
-          dataAttributes: y,
+          isRequired: p,
+          onChange: y,
+          value: j,
+          rows: z,
+          cols: D,
+          dataAttributes: k,
           className: C,
-          ref: z,
+          ref: N,
           disabled: w
         }
       );
     })(),
     l !== "radio" && l !== "checkbox" && l !== "textarea" && (() => {
-      const q = e, { value: E, pattern: P, placeholderText: a, ...F } = q;
-      return /* @__PURE__ */ t(
-        A,
+      const z = e, { value: D, pattern: j, placeholderText: t, ...v } = z;
+      return /* @__PURE__ */ r(
+        W,
         {
-          id: r,
-          name: r,
-          placeholderText: a,
-          onChange: p,
-          value: E,
+          id: a,
+          name: a,
+          placeholderText: t,
+          onChange: y,
+          value: D,
           type: l,
-          isRequired: k,
-          dataAttributes: y,
+          isRequired: p,
+          dataAttributes: k,
           className: C,
-          ref: z,
+          ref: N,
           disabled: w,
-          pattern: P
+          pattern: j
         }
       );
     })(),
     (l === "radio" || l === "checkbox") && (() => {
-      const { checked: q, ...E } = e;
-      return /* @__PURE__ */ $(U, { children: [
-        /* @__PURE__ */ t(
-          A,
+      const { checked: z, ...D } = e;
+      return /* @__PURE__ */ $(O, { children: [
+        /* @__PURE__ */ r(
+          W,
           {
-            ref: z,
+            ref: N,
             type: l,
-            name: r,
-            id: r,
-            isRequired: k,
-            checked: q,
-            onChange: p,
+            name: a,
+            id: a,
+            isRequired: p,
+            checked: z,
+            onChange: y,
             disabled: w,
             className: C,
-            dataAttributes: y
+            dataAttributes: k
           }
         ),
-        /* @__PURE__ */ t(K, { startIcon: u, endIcon: x, htmlFor: r, textLabel: c, additionalInfo: i, $labelFlexDirection: b, className: f })
+        /* @__PURE__ */ r(K, { startIcon: h, endIcon: x, htmlFor: a, textLabel: d, additionalInfo: i, $labelFlexDirection: b, className: f })
       ] });
     })(),
-    S && /* @__PURE__ */ $(he, { className: "input-edit-buttons", children: [
-      /* @__PURE__ */ t(T, { id: `editable-${r}-edit-btn`, startIcon: B, buttonType: "button", onClick: D, className: `edit-radio-${v}`, dataAttributes: y }),
-      /* @__PURE__ */ t(T, { id: `editable-${r}-delete-btn`, startIcon: j, buttonType: "button", onClick: N, className: `delete-radio-${v}`, dataAttributes: y })
+    S && /* @__PURE__ */ $(ue, { className: "input-edit-buttons", children: [
+      /* @__PURE__ */ r(B, { id: `editable-${a}-edit-btn`, startIcon: E, buttonType: "button", onClick: q, className: `edit-radio-${F}`, dataAttributes: k }),
+      /* @__PURE__ */ r(B, { id: `editable-${a}-delete-btn`, startIcon: L, buttonType: "button", onClick: T, className: `delete-radio-${F}`, dataAttributes: k })
     ] }),
-    O
+    A
   ] });
-}, pe = h.fieldset`
+}, ye = u.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, ye = h.legend`
+`, ke = u.legend`
     font-size: ${o.spacing.medium};
     font-weight: 500;
     margin: 0 auto ${o.spacing.small} auto;
     text-align: center;
     font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
-`, ke = h.div`
+`, pe = u.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
     margin-bottom: ${o.spacing.small};
-`, Ce = h.div`
+`, Ce = u.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
@@ -526,49 +526,49 @@ const o = {
   editableButtonSize: e,
   editableButtonColor: n,
   editableButtonRadius: l,
-  legend: r,
-  fieldsetIndex: c,
+  legend: a,
+  fieldsetIndex: d,
   idx: i,
   editableInformation: b,
-  saveText: u,
+  saveText: h,
   saveButtonStartIcon: x,
   saveButtonEndIcon: f,
-  cancelText: p,
-  cancelButtonStartIcon: k,
-  cancelButtonEndIcon: y,
+  cancelText: y,
+  cancelButtonStartIcon: p,
+  cancelButtonEndIcon: k,
   deleteText: C,
-  deleteButtonStartIcon: z,
+  deleteButtonStartIcon: N,
   deleteButtonEndIcon: w,
   onChangeOfEditableOption: S,
-  onClickSaveEdit: B,
-  onClickCancelEdit: D,
-  onClickDeleteEntry: j
-}) => /* @__PURE__ */ $(pe, { className: "editable-option-fieldset", children: [
-  /* @__PURE__ */ t(ye, { children: `${r} ${i + 1}` }),
-  b?.map((N, v) => /* @__PURE__ */ t(ke, { className: "editable-option-container", children: /* @__PURE__ */ t(
-    A,
+  onClickSaveEdit: E,
+  onClickCancelEdit: q,
+  onClickDeleteEntry: L
+}) => /* @__PURE__ */ $(ye, { className: "editable-option-fieldset", children: [
+  /* @__PURE__ */ r(ke, { children: `${a} ${i + 1}` }),
+  b?.map((T, F) => /* @__PURE__ */ r(pe, { className: "editable-option-container", children: /* @__PURE__ */ r(
+    W,
     {
-      id: `editable-option-${v}`,
-      name: `editable-option-${v}`,
-      placeholderText: N.name.charAt(0).toUpperCase() + N.name.slice(1),
+      id: `editable-option-${F}`,
+      name: `editable-option-${F}`,
+      placeholderText: T.name.charAt(0).toUpperCase() + T.name.slice(1),
       onChange: S,
-      value: N.info,
-      type: N.type,
+      value: T.info,
+      type: T.type,
       isRequired: !0,
       className: "editable-option",
       dataAttributes: {
-        "data-index": v,
-        "data-fieldsetindex": c,
-        "data-key": N.info
+        "data-index": F,
+        "data-fieldsetindex": d,
+        "data-key": T.info
       }
     }
-  ) }, `${N.name}-${v}`)),
+  ) }, `${T.name}-${F}`)),
   /* @__PURE__ */ $(Ce, { className: "editable-option-button-space", children: [
-    /* @__PURE__ */ t(T, { startIcon: x, endIcon: f, size: e || "small", color: n || "primary", radius: l || "squircle", id: `editable-option-${i}-submit`, buttonType: "button", text: u || "Save", onClick: B, className: "editable-option-btn", dataAttributes: { "data-index": i, "data-fieldsetindex": c } }),
-    /* @__PURE__ */ t(T, { startIcon: k, endIcon: y, size: e || "small", color: n || "primary", radius: l || "squircle", id: `editable-option-${i}-cancel`, buttonType: "button", text: p || "Cancel", onClick: D, className: "editable-option-btn", dataAttributes: { "data-index": i, "data-fieldsetindex": c } }),
-    /* @__PURE__ */ t(T, { startIcon: z, endIcon: w, size: e || "small", color: n || "primary", radius: l || "squircle", id: `editable-option-${i}-delete`, buttonType: "button", text: C || "Delete", onClick: j, className: "editable-option-btn", dataAttributes: { "data-index": i, "data-fieldsetindex": c } })
+    /* @__PURE__ */ r(B, { startIcon: x, endIcon: f, size: e || "small", color: n || "primary", radius: l || "squircle", id: `editable-option-${i}-submit`, buttonType: "button", text: h || "Save", onClick: E, className: "editable-option-btn", dataAttributes: { "data-index": i, "data-fieldsetindex": d } }),
+    /* @__PURE__ */ r(B, { startIcon: p, endIcon: k, size: e || "small", color: n || "primary", radius: l || "squircle", id: `editable-option-${i}-cancel`, buttonType: "button", text: y || "Cancel", onClick: q, className: "editable-option-btn", dataAttributes: { "data-index": i, "data-fieldsetindex": d } }),
+    /* @__PURE__ */ r(B, { startIcon: N, endIcon: w, size: e || "small", color: n || "primary", radius: l || "squircle", id: `editable-option-${i}-delete`, buttonType: "button", text: C || "Delete", onClick: L, className: "editable-option-btn", dataAttributes: { "data-index": i, "data-fieldsetindex": d } })
   ] })
-] }), we = h.div`
+] }), we = u.div`
     display: flex;
     justify-content: space-around;
     align-content: center;
@@ -576,41 +576,41 @@ const o = {
     & button {
         margin-inline: 0.25rem;
     }
-`, Fe = ({
+`, ve = ({
   id: e,
   formActionButtonSize: n,
   formActionButtonColor: l,
-  formActionButtonRadius: r,
-  submitText: c,
+  formActionButtonRadius: a,
+  submitText: d,
   submitIcon: i,
   hasReset: b,
-  resetText: u,
+  resetText: h,
   resetIcon: x,
   handleReset: f,
-  hasCancel: p,
-  cancelText: k,
-  cancelIcon: y,
+  hasCancel: y,
+  cancelText: p,
+  cancelIcon: k,
   handleCancel: C
 }) => /* @__PURE__ */ $(we, { className: "form-main-button-container", children: [
-  /* @__PURE__ */ t(T, { id: `form-${e}-submit`, size: n || "small", color: l || "primary", radius: r || "squircle", startIcon: i, buttonType: "submit", text: c ?? "Submit", className: "submit-form-btn" }),
-  b && /* @__PURE__ */ t(T, { id: `form-${e}-edit`, size: n || "small", color: l || "primary", radius: r || "squircle", startIcon: x, buttonType: "button", text: u ?? "Reset", onClick: f, className: "reset-form-btn" }),
-  p && /* @__PURE__ */ t(T, { id: `form-${e}-cancel`, size: n || "small", color: l || "primary", radius: r || "squircle", startIcon: y, buttonType: "button", text: k ?? "Cancel", onClick: C, className: "cancel-form-btn" })
-] }), X = h.legend`
+  /* @__PURE__ */ r(B, { id: `form-${e}-submit`, size: n || "small", color: l || "primary", radius: a || "squircle", startIcon: i, buttonType: "submit", text: d ?? "Submit", className: "submit-form-btn" }),
+  b && /* @__PURE__ */ r(B, { id: `form-${e}-edit`, size: n || "small", color: l || "primary", radius: a || "squircle", startIcon: x, buttonType: "button", text: h ?? "Reset", onClick: f, className: "reset-form-btn" }),
+  y && /* @__PURE__ */ r(B, { id: `form-${e}-cancel`, size: n || "small", color: l || "primary", radius: a || "squircle", startIcon: k, buttonType: "button", text: p ?? "Cancel", onClick: C, className: "cancel-form-btn" })
+] }), X = u.legend`
     font-size: ${o.spacing.medium};
     font-weight: 500;
     margin-bottom: ${o.spacing.small};
     width: auto;
     text-align: center;
     font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
-`, Y = h.fieldset`
+`, Y = u.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, _ = h.div`
+`, _ = u.div`
     padding: ${o.spacing.small};
     height: auto;
     width: 100%;
-`, ee = h.div`
+`, ee = u.div`
     display: flex;
     justify-content: center;
     align-items: center;
@@ -619,192 +619,210 @@ const o = {
     font-family: ${o.fonts.tertiary}, ${o.fonts.fallback};
     font-size: ${o.fontSize.xsmall};
     font-weight: ${o.fontWeight.bold};
-`, Ne = h.form`
+`, Te = u.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`, oe = h.div`
+`, oe = u.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, Te = h.div`
+`, Be = u.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`, De = ({
+`, qe = ({
   fieldsets: e = null,
   legendText: n,
   isExpandable: l,
-  id: r,
-  formInputs: c,
+  id: a,
+  formInputs: d,
   labelAndInputContainerClass: i,
   labelClass: b,
-  inputClass: u,
+  inputClass: h,
   onChangeOfEditableOption: x,
   handleAddingInputEntry: f,
-  formActionButtonSize: p,
-  formActionButtonColor: k,
-  formActionButtonRadius: y,
+  formActionButtonSize: y,
+  formActionButtonColor: p,
+  formActionButtonRadius: k,
   submitText: C,
-  submitIcon: z,
+  submitIcon: N,
   hasReset: w = !1,
   resetText: S,
-  resetIcon: B,
-  handleReset: D,
-  hasCancel: j = !1,
-  cancelText: N,
-  cancelIcon: v,
-  handleCancel: O,
-  handleSubmitForm: q,
-  className: E,
-  children: P
-}) => /* @__PURE__ */ $(Ne, { id: `${r}-form`, className: E, onSubmit: q, children: [
-  e ? e.map((a, F) => /* @__PURE__ */ $(_, { className: `${r}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ $(Y, { id: `${r}-form-fieldset-${F}`, className: `${a.legend}-fieldset`, children: [
-      a.legend && /* @__PURE__ */ t(X, { className: `${a.legend}-legend`, children: a.legend }),
-      a.inputs.length !== 0 ? a.inputs.map((m, W) => /* @__PURE__ */ $(H.Fragment, { children: [
-        m.type === "textarea" && /* @__PURE__ */ t(
-          L,
+  resetIcon: E,
+  handleReset: q,
+  hasCancel: L = !1,
+  cancelText: T,
+  cancelIcon: F,
+  handleCancel: A,
+  handleSubmitForm: z,
+  className: D,
+  children: j
+}) => /* @__PURE__ */ $(Te, { id: `${a}-form`, className: D, onSubmit: z, children: [
+  e ? e.map((t, v) => /* @__PURE__ */ $(_, { className: `${a}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ $(Y, { id: `${a}-form-fieldset-${v}`, className: `${t.legend}-fieldset`, children: [
+      t.legend && /* @__PURE__ */ r(X, { className: `${t.legend}-legend`, children: t.legend }),
+      t.inputs.length !== 0 ? t.inputs.map((s, P) => /* @__PURE__ */ $(M.Fragment, { children: [
+        s.type === "textarea" && /* @__PURE__ */ r(
+          R,
           {
-            ...m,
-            id: m.id ?? `${a.legend}-input`,
+            ...s,
+            id: s.id ?? `${t.legend}-input`,
             labelClass: b,
-            inputClass: u,
-            idx: W,
-            className: `${i} ${m?.uniqueClass}`
+            inputClass: h,
+            idx: P,
+            className: `${i} ${s?.uniqueClass}`
           }
         ),
-        m.type !== "textarea" && m.type !== "radio" && m.type !== "checkbox" && /* @__PURE__ */ t(
-          L,
+        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ r(
+          R,
           {
-            ...m,
-            id: m.id ?? `${a.legend}-input`,
+            ...s,
+            id: s.id ?? `${t.legend}-input`,
             labelClass: b,
-            inputClass: u,
-            idx: W,
-            className: `${i} ${m?.uniqueClass}`
+            inputClass: h,
+            idx: P,
+            className: `${i} ${s?.uniqueClass}`
           }
         ),
-        (m.type === "radio" || m.type === "checkbox") && /* @__PURE__ */ $(U, { children: [
-          /* @__PURE__ */ t(
-            L,
+        (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ $(O, { children: [
+          /* @__PURE__ */ r(
+            R,
             {
-              ...m,
-              id: m.id ?? `${a.legend}-input`,
+              ...s,
+              id: s.id ?? `${t.legend}-input`,
               labelClass: b,
-              inputClass: u,
-              idx: W,
-              className: `${i} ${m?.uniqueClass}`
+              inputClass: h,
+              idx: P,
+              className: `${i} ${s?.uniqueClass}`
             }
           ),
-          m.editing && m.isEditable && /* @__PURE__ */ t(
+          s.editing && s.isEditable && /* @__PURE__ */ r(
             V,
             {
-              editableButtonSize: m.editableButtonSize,
-              editableButtonColor: m.editableButtonColor,
-              editableButtonRadius: m.editableButtonRadius,
-              legend: `${a.legend}`,
-              fieldsetIndex: F,
-              idx: W,
-              editableInformation: m?.editableInformation || [],
+              editableButtonSize: s.editableButtonSize,
+              editableButtonColor: s.editableButtonColor,
+              editableButtonRadius: s.editableButtonRadius,
+              legend: `${t.legend}`,
+              fieldsetIndex: v,
+              idx: P,
+              saveText: s.saveText ?? void 0,
+              saveButtonStartIcon: s.saveButtonStartIcon ?? void 0,
+              saveButtonEndIcon: s.saveButtonEndIcon ?? void 0,
+              cancelText: s.cancelText ?? void 0,
+              cancelButtonStartIcon: s.cancelButtonStartIcon ?? void 0,
+              cancelButtonEndIcon: s.cancelButtonEndIcon ?? void 0,
+              deleteText: s.deleteText ?? void 0,
+              deleteButtonStartIcon: s.deleteButtonStartIcon ?? void 0,
+              deleteButtonEndIcon: s.deleteButtonEndIcon ?? void 0,
+              editableInformation: s?.editableInformation || [],
               onChangeOfEditableOption: x,
-              onClickSaveEdit: m?.onClickSave || ((M) => {
+              onClickSaveEdit: s?.onClickSave || ((U) => {
               }),
-              onClickCancelEdit: m?.onClickCancel || ((M) => {
+              onClickCancelEdit: s?.onClickCancel || ((U) => {
               }),
-              onClickDeleteEntry: m?.onClickDelete || ((M) => {
+              onClickDeleteEntry: s?.onClickDelete || ((U) => {
               })
             }
           )
         ] })
-      ] }, `form-${r}-${W}`)) : a.isExpandable ? /* @__PURE__ */ t(ee, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
+      ] }, `form-${a}-${P}`)) : t.isExpandable ? /* @__PURE__ */ r(ee, { children: `No entry yet on ${t.legend}. Click "+" button to add entry.` }) : ""
     ] }),
-    a.isExpandable && /* @__PURE__ */ t(oe, { className: "add-input-button-space", children: /* @__PURE__ */ t(T, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": F } }) })
-  ] }, `${a.legend}-${F}`)) : /* @__PURE__ */ $(_, { className: `${r}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ $(Y, { id: `${r}-form-fieldset`, className: `${n}-fieldset`, children: [
-      n && /* @__PURE__ */ t(X, { className: `${n}-legend`, children: n }),
-      !e && c && c.length !== 0 ? c.map((a, F) => /* @__PURE__ */ $(H.Fragment, { children: [
-        a.type === "textarea" && /* @__PURE__ */ t(
-          L,
+    t.isExpandable && /* @__PURE__ */ r(oe, { className: "add-input-button-space", children: /* @__PURE__ */ r(B, { id: `expand-${t.legend}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": v } }) })
+  ] }, `${t.legend}-${v}`)) : /* @__PURE__ */ $(_, { className: `${a}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ $(Y, { id: `${a}-form-fieldset`, className: `${n}-fieldset`, children: [
+      n && /* @__PURE__ */ r(X, { className: `${n}-legend`, children: n }),
+      !e && d && d.length !== 0 ? d.map((t, v) => /* @__PURE__ */ $(M.Fragment, { children: [
+        t.type === "textarea" && /* @__PURE__ */ r(
+          R,
           {
-            ...a,
-            id: a.id ?? `${n}-input`,
+            ...t,
+            id: t.id ?? `${n}-input`,
             labelClass: b,
-            inputClass: u,
-            idx: F,
-            className: `${i} ${a?.uniqueClass}`
+            inputClass: h,
+            idx: v,
+            className: `${i} ${t?.uniqueClass}`
           }
         ),
-        a.type !== "textarea" && a.type !== "radio" && a.type !== "checkbox" && /* @__PURE__ */ t(
-          L,
+        t.type !== "textarea" && t.type !== "radio" && t.type !== "checkbox" && /* @__PURE__ */ r(
+          R,
           {
-            ...a,
-            id: a.id ?? `${n}-input`,
+            ...t,
+            id: t.id ?? `${n}-input`,
             labelClass: b,
-            inputClass: u,
-            idx: F,
-            className: `${i} ${a?.uniqueClass}`
+            inputClass: h,
+            idx: v,
+            className: `${i} ${t?.uniqueClass}`
           }
         ),
-        (a.type === "radio" || a.type === "checkbox") && /* @__PURE__ */ $(U, { children: [
-          /* @__PURE__ */ t(
-            L,
+        (t.type === "radio" || t.type === "checkbox") && /* @__PURE__ */ $(O, { children: [
+          /* @__PURE__ */ r(
+            R,
             {
-              ...a,
-              id: a.id ?? `${n}-input`,
+              ...t,
+              id: t.id ?? `${n}-input`,
               labelClass: b,
-              inputClass: u,
-              idx: F,
-              className: `${i} ${a?.uniqueClass}`
+              inputClass: h,
+              idx: v,
+              className: `${i} ${t?.uniqueClass}`
             }
           ),
-          a.editing && a.isEditable && /* @__PURE__ */ t(
+          t.editing && t.isEditable && /* @__PURE__ */ r(
             V,
             {
-              editableButtonSize: a.editableButtonSize,
-              editableButtonColor: a.editableButtonColor,
-              editableButtonRadius: a.editableButtonRadius,
+              editableButtonSize: t.editableButtonSize,
+              editableButtonColor: t.editableButtonColor,
+              editableButtonRadius: t.editableButtonRadius,
               legend: `${n}`,
-              idx: F,
-              editableInformation: a?.editableInformation,
+              idx: v,
+              saveText: t.saveText ?? void 0,
+              saveButtonStartIcon: t.saveButtonStartIcon ?? void 0,
+              saveButtonEndIcon: t.saveButtonEndIcon ?? void 0,
+              cancelText: t.cancelText ?? void 0,
+              cancelButtonStartIcon: t.cancelButtonStartIcon ?? void 0,
+              cancelButtonEndIcon: t.cancelButtonEndIcon ?? void 0,
+              deleteText: t.deleteText ?? void 0,
+              deleteButtonStartIcon: t.deleteButtonStartIcon ?? void 0,
+              deleteButtonEndIcon: t.deleteButtonEndIcon ?? void 0,
+              editableInformation: t?.editableInformation,
               onChangeOfEditableOption: x,
-              onClickSaveEdit: a?.onClickSave || ((m) => {
+              onClickSaveEdit: t?.onClickSave || ((s) => {
               }),
-              onClickCancelEdit: a?.onClickCancel || ((m) => {
+              onClickCancelEdit: t?.onClickCancel || ((s) => {
               }),
-              onClickDeleteEntry: a?.onClickDelete || ((m) => {
+              onClickDeleteEntry: t?.onClickDelete || ((s) => {
               })
             }
           )
         ] })
-      ] }, `form-${r}-${F}`)) : l ? /* @__PURE__ */ t(ee, { children: `No entry yet on ${n}. Please click "+" button to add` }) : ""
+      ] }, `form-${a}-${v}`)) : l ? /* @__PURE__ */ r(ee, { children: `No entry yet on ${n}. Please click "+" button to add` }) : ""
     ] }),
-    l && /* @__PURE__ */ t(oe, { className: "add-input-button-space", children: /* @__PURE__ */ t(T, { id: `expand-${n}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry" }) })
+    l && /* @__PURE__ */ r(oe, { className: "add-input-button-space", children: /* @__PURE__ */ r(B, { id: `expand-${n}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry" }) })
   ] }),
-  /* @__PURE__ */ t(
-    Fe,
+  /* @__PURE__ */ r(
+    ve,
     {
-      id: r,
-      formActionButtonSize: p,
-      formActionButtonColor: k,
-      formActionButtonRadius: y,
+      id: a,
+      formActionButtonSize: y,
+      formActionButtonColor: p,
+      formActionButtonRadius: k,
       submitText: C,
-      submitIcon: z,
+      submitIcon: N,
       hasReset: w,
       resetText: S,
-      resetIcon: B,
-      handleReset: D,
-      hasCancel: j,
-      cancelText: N,
-      cancelIcon: v,
-      handleCancel: O
+      resetIcon: E,
+      handleReset: q,
+      hasCancel: L,
+      cancelText: T,
+      cancelIcon: F,
+      handleCancel: A
     }
   ),
-  /* @__PURE__ */ t(Te, { className: "children-container", children: P })
-] }), Ee = {
+  /* @__PURE__ */ r(Be, { className: "children-container", children: j })
+] }), De = {
   mobile: "320px",
   //Small iPhone SE & Medium: iPhone 12-15
   tablet: "768px",
@@ -813,108 +831,108 @@ const o = {
   //Macbook 13" (1280x800)
   largeDesktop: "1200px",
   largerDesktop: "1400px"
-}, s = {
-  primary1: d("#202234"),
-  primary2: d("#3C5E83"),
-  primary3: d("#0F60B6"),
-  secondary1: d("#C67E10"),
-  secondary2: d("#F6C46D"),
-  neutral1: d("#FFFFFF"),
-  neutral2: d("#F2F2F2"),
-  neutral3: d("#ABABAB"),
-  neutral4: d("#373A40"),
-  neutral5: d("#000000"),
-  accent: d("#E1D3B7"),
-  shadow1: d("rgb(88, 88, 88)"),
-  shadow2: d("rgba(255, 255, 255, 0.50)")
-}, ve = {
+}, c = {
+  primary1: m("#202234"),
+  primary2: m("#3C5E83"),
+  primary3: m("#0F60B6"),
+  secondary1: m("#C67E10"),
+  secondary2: m("#F6C46D"),
+  neutral1: m("#FFFFFF"),
+  neutral2: m("#F2F2F2"),
+  neutral3: m("#ABABAB"),
+  neutral4: m("#373A40"),
+  neutral5: m("#000000"),
+  accent: m("#E1D3B7"),
+  shadow1: m("rgb(88, 88, 88)"),
+  shadow2: m("rgba(255, 255, 255, 0.50)")
+}, Fe = {
   name: "light",
   colors: {
-    screenColor: s.neutral2,
-    backgroundColor1: s.primary1,
-    backgroundColor2: s.primary2,
-    backgroundColor3: s.secondary2,
-    backgroundColor4: s.secondary1,
-    borderColor1: s.neutral5,
-    borderColor2: s.neutral3,
-    textColor1: s.neutral5,
-    textColor2: s.neutral4,
-    textColor3: s.accent,
-    shadow: s.shadow1
+    screenColor: c.neutral2,
+    backgroundColor1: c.primary1,
+    backgroundColor2: c.primary2,
+    backgroundColor3: c.secondary2,
+    backgroundColor4: c.secondary1,
+    borderColor1: c.neutral5,
+    borderColor2: c.neutral3,
+    textColor1: c.neutral5,
+    textColor2: c.neutral4,
+    textColor3: c.accent,
+    shadow: c.shadow1
   },
   anchorTheme: {
-    visited: s.neutral5,
-    hover: s.primary2,
-    active: s.secondary2
+    visited: c.neutral5,
+    hover: c.primary2,
+    active: c.secondary2
   },
   footerTheme: {
-    backgroundColor: s.neutral5,
-    textColor: s.secondary1,
-    shadowColor: s.shadow1
+    backgroundColor: c.neutral5,
+    textColor: c.secondary1,
+    shadowColor: c.shadow1
   },
   notificationPalette: {
-    infoText: d("#C9E6F0"),
-    infoBackground: d("#202234"),
-    warningText: d("#FCFFC1"),
-    warningBackground: d("#F2C265"),
-    successText: d("#9EDF9C"),
-    successBackground: d("#123524"),
-    errorText: d("#FAD4D4"),
-    errorBackground: d("#990000")
+    infoText: m("#C9E6F0"),
+    infoBackground: m("#202234"),
+    warningText: m("#FCFFC1"),
+    warningBackground: m("#F2C265"),
+    successText: m("#9EDF9C"),
+    successBackground: m("#123524"),
+    errorText: m("#FAD4D4"),
+    errorBackground: m("#990000")
   }
-}, ze = {
+}, Ne = {
   name: "dark",
   colors: {
-    screenColor: s.neutral5,
-    backgroundColor1: s.primary2,
-    backgroundColor2: s.primary3,
-    backgroundColor3: s.secondary1,
-    backgroundColor4: s.secondary2,
-    borderColor1: s.neutral2,
-    borderColor2: s.neutral3,
-    textColor1: s.neutral1,
-    textColor2: s.accent,
-    textColor3: s.neutral2,
-    shadow: s.shadow2
+    screenColor: c.neutral5,
+    backgroundColor1: c.primary2,
+    backgroundColor2: c.primary3,
+    backgroundColor3: c.secondary1,
+    backgroundColor4: c.secondary2,
+    borderColor1: c.neutral2,
+    borderColor2: c.neutral3,
+    textColor1: c.neutral1,
+    textColor2: c.accent,
+    textColor3: c.neutral2,
+    shadow: c.shadow2
   },
   anchorTheme: {
-    link: s.neutral1,
-    visited: s.neutral1,
-    hover: s.primary3,
-    active: s.secondary1
+    link: c.neutral1,
+    visited: c.neutral1,
+    hover: c.primary3,
+    active: c.secondary1
   },
   footerTheme: {
-    backgroundColor: s.accent,
-    textColor: s.primary1,
-    shadowColor: s.shadow2
+    backgroundColor: c.accent,
+    textColor: c.primary1,
+    shadowColor: c.shadow2
   },
   notificationPalette: {
-    infoText: d("#202234"),
-    infoBackground: d("#C9E6F0"),
-    warningText: d("#F2C265"),
-    warningBackground: d("#FCFFC1"),
-    successText: d("#123524"),
-    successBackground: d("#9EDF9C"),
-    errorBackground: d("#FAD4D4"),
-    errorText: d("#990000")
+    infoText: m("#202234"),
+    infoBackground: m("#C9E6F0"),
+    warningText: m("#F2C265"),
+    warningBackground: m("#FCFFC1"),
+    successText: m("#123524"),
+    successBackground: m("#9EDF9C"),
+    errorBackground: m("#FAD4D4"),
+    errorText: m("#990000")
   }
-}, te = ae({}), Re = ({
+}, te = ae({}), Ie = ({
   children: e,
-  initialTheme: n = ve,
-  secondTheme: l = ze
+  initialTheme: n = Fe,
+  secondTheme: l = Ne
 }) => {
-  const [r, c] = le(n), i = () => {
-    c((b) => b === n ? l : n);
+  const [a, d] = le(n), i = () => {
+    d((b) => b === n ? l : n);
   };
-  return /* @__PURE__ */ t(te.Provider, { value: { currentTheme: r, toggleTheme: i }, children: /* @__PURE__ */ t(ie, { theme: r, children: e }) });
-}, Le = () => ne(te);
+  return /* @__PURE__ */ r(te.Provider, { value: { currentTheme: a, toggleTheme: i }, children: /* @__PURE__ */ r(se, { theme: a, children: e }) });
+}, Re = () => ne(te);
 export {
-  De as DynamicForm,
+  qe as DynamicForm,
   te as ThemeContext,
-  Re as ThemeContextProvider,
-  Ee as breakpoints,
-  ze as darkTheme,
-  ve as lightTheme,
-  s as palette,
-  Le as useTheme
+  Ie as ThemeContextProvider,
+  De as breakpoints,
+  Ne as darkTheme,
+  Fe as lightTheme,
+  c as palette,
+  Re as useTheme
 };