@kbgarcia8/react-dynamic-form 2.0.2 → 2.0.4

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

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