@kbgarcia8/react-dynamic-form 2.0.2 → 2.0.3

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 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";
+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`
+}, se = (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}`);
+  return e;
+}, R = Object.keys(o.breakpoints).reduce(
+  (e, n) => {
+    const l = n;
+    return e[l] = (...r) => g`
+    @media (min-width: ${o.breakpoints[l]}) {
+        ${g(...r)}
+        }
+    `, 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`
+        ${R.mobile`
+            font-size: ${o.fontSize.xxsmall};
+            font-weight: ${o.fontWeight.regular};
+        `}
+    `,
+  smaller: g`
+        ${R.mobile`
+            font-size: ${o.fontSize.xsmall};
+            font-weight: ${o.fontWeight.regular};
+        `}
+    `,
+  small: g`
+        ${R.mobile`
+            font-size: ${o.fontSize.small};
+            font-weight: ${o.fontWeight.medium};
+        `}
+    `,
+  medium: g`
+        ${R.mobile`
+            font-size: ${o.fontSize.medium};
+            font-weight: ${o.fontWeight.bold};
+        `}
+    `,
+  large: g`
+        ${R.mobile`
+            font-size: ${o.fontSize.large};
+            font-weight: ${o.fontWeight.bolder};
+        `}
+    `,
+  larger: g`
+        ${R.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};`
+}, Z = h.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;
+    }
+`, G = h.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;
+                }
+            `}
+`, I = h.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,
-  endIcon: d,
-  alt: m = "alt-button-icon",
-  text: c = "",
+    max-width: 80%;
+`, T = ({
+  onClick: e,
+  id: n,
+  buttonType: l = "button",
+  startIcon: r,
+  endIcon: 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: u = {},
+  color: x,
+  radius: f,
+  size: p
+}) => l === "submit" ? /* @__PURE__ */ t(
+  Z,
+  {
+    id: n,
+    type: "submit",
+    className: b,
+    ...u,
+    $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 || ""
+    ] })
+  }
+) : /* @__PURE__ */ t(
+  Z,
+  {
+    onClick: e,
+    id: n,
+    type: l,
+    className: b,
+    ...u,
+    $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 || ""
+    ] })
+  }
+), be = h.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${e.spacing.small};
-`, ne = r.div`
+    margin-bottom: ${o.spacing.small};
+`, he = h.div`
     display: flex;
-    gap: ${e.spacing.xsmall};
+    gap: ${o.spacing.xsmall};
     width: auto;
     height: auto;
-`, oe = r.label`
+`, ue = h.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,521 @@ const M = r.span`
         height: auto;
         object-fit: contain;
     }
-`, ie = r.div`
+`, $e = h.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 = h.span`
+    font-weight: ${o.fontWeight.bolder};
+`, J = h.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,
-  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 })
+`, xe = h.span`
+    font-weight: ${o.fontWeight.light};
+`, K = ({
+  htmlFor: e,
+  textLabel: n,
+  additionalInfo: l,
+  $labelFlexDirection: r,
+  startIcon: c,
+  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 }),
+  /* @__PURE__ */ $($e, { className: "label-text-container", children: [
+    /* @__PURE__ */ t(ge, { className: "main-label", children: n }),
+    l && /* @__PURE__ */ t(xe, { className: "additional-info", children: l })
   ] }),
-  m && /* @__PURE__ */ t(U, { className: "label-icon-container", children: m }),
-  b
-] }), O = r.input`
+  i && /* @__PURE__ */ t(J, { className: "label-icon-container", children: i }),
+  u
+] }), Q = h.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 = h.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;
+`, A = re((e, n) => {
+  const { type: l, id: r, onChange: c, isRequired: i, dataAttributes: b = {}, disabled: u, className: x, name: f } = e;
+  if (l === "textarea") {
+    const { rows: w = 5, cols: S = 30, value: B, ...D } = e;
     return /* @__PURE__ */ t(
-      ce,
+      fe,
       {
-        ref: l,
-        value: A,
-        rows: k,
-        cols: E,
-        id: i,
-        onChange: d,
-        required: m,
-        disabled: b,
-        ...c,
-        className: u,
-        name: g
+        ref: n,
+        value: B,
+        rows: w,
+        cols: S,
+        id: r,
+        onChange: c,
+        required: i,
+        disabled: u,
+        ...b,
+        className: x,
+        name: f
       }
     );
   }
-  if (n === "radio" || n === "checkbox") {
-    const { checked: k, ...E } = a;
+  if (l === "radio" || l === "checkbox") {
+    const { checked: w, ...S } = e;
     return /* @__PURE__ */ t(
-      O,
+      Q,
       {
-        ref: l,
-        type: n,
-        checked: k,
-        id: i,
-        onChange: d,
-        required: m,
-        ...c,
-        disabled: b,
-        className: u,
-        name: g
+        ref: n,
+        type: l,
+        checked: w,
+        id: r,
+        onChange: c,
+        required: i,
+        ...b,
+        disabled: u,
+        className: x,
+        name: f
       }
     );
   }
-  const p = a, { value: C, pattern: y, placeholderText: w, ...F } = p;
+  const p = e, { value: k, pattern: y, placeholderText: C, ...z } = p;
   return /* @__PURE__ */ t(
-    O,
+    Q,
     {
-      ref: l,
-      type: n,
-      value: C,
+      ref: n,
+      type: l,
+      value: k,
       pattern: y,
-      placeholder: w,
-      id: i,
-      onChange: d,
-      required: m,
-      ...c,
-      disabled: b,
-      className: u,
-      name: g
+      placeholder: C,
+      id: r,
+      onChange: c,
+      required: i,
+      ...b,
+      disabled: u,
+      className: x,
+      name: f
     }
   );
-}), v = (a) => {
+}), L = (e) => {
   const {
-    className: l,
-    type: n,
-    id: i,
-    textLabel: d,
-    additionalInfo: m,
-    $labelFlexDirection: c,
-    startIcon: b,
-    endIcon: u,
-    labelClass: g,
+    className: n,
+    type: l,
+    id: r,
+    textLabel: c,
+    additionalInfo: i,
+    $labelFlexDirection: b,
+    startIcon: u,
+    endIcon: x,
+    labelClass: f = "",
     onChange: p,
-    isRequired: C,
+    isRequired: k,
     dataAttributes: y,
-    inputClass: w,
-    ref: F,
-    disabled: k,
-    isEditable: E,
-    editIcon: A,
+    inputClass: C = "",
+    ref: z,
+    disabled: w,
+    isEditable: S,
+    editIcon: B,
     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;
+    deleteIcon: j,
+    onClickDelete: N,
+    idx: v,
+    children: O
+  } = 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 }),
+    l !== "radio" && l !== "checkbox" && l === "textarea" && (() => {
+      const { rows: q = 5, cols: E = 30, value: P, ...a } = e;
       return /* @__PURE__ */ t(
-        T,
+        A,
         {
-          id: i,
-          name: i,
+          id: r,
+          name: r,
           type: "textarea",
-          isRequired: C,
+          isRequired: k,
           onChange: p,
-          value: s,
-          rows: o,
-          cols: $,
+          value: P,
+          rows: q,
+          cols: E,
           dataAttributes: y,
-          className: w,
-          ref: F,
-          disabled: k
+          className: C,
+          ref: z,
+          disabled: w
         }
       );
     })(),
-    n !== "radio" && n !== "checkbox" && n !== "textarea" && (() => {
-      const o = a, { value: $, pattern: s, placeholderText: N, ...q } = o;
+    l !== "radio" && l !== "checkbox" && l !== "textarea" && (() => {
+      const q = e, { value: E, pattern: P, placeholderText: a, ...F } = q;
       return /* @__PURE__ */ t(
-        T,
+        A,
         {
-          id: i,
-          name: i,
-          placeholderText: N,
+          id: r,
+          name: r,
+          placeholderText: a,
           onChange: p,
-          value: $,
-          type: n,
-          isRequired: C,
+          value: E,
+          type: l,
+          isRequired: k,
           dataAttributes: y,
-          className: w,
-          ref: F,
-          disabled: k,
-          pattern: s
+          className: C,
+          ref: z,
+          disabled: w,
+          pattern: P
         }
       );
     })(),
-    (n === "radio" || n === "checkbox") && (() => {
-      const { checked: o, ...$ } = a;
-      return /* @__PURE__ */ f(R, { children: [
+    (l === "radio" || l === "checkbox") && (() => {
+      const { checked: q, ...E } = e;
+      return /* @__PURE__ */ $(U, { children: [
         /* @__PURE__ */ t(
-          T,
+          A,
           {
-            ref: F,
-            type: n,
-            name: i,
-            id: i,
-            isRequired: C,
-            checked: o,
+            ref: z,
+            type: l,
+            name: r,
+            id: r,
+            isRequired: k,
+            checked: q,
             onChange: p,
-            disabled: k,
-            className: w,
+            disabled: w,
+            className: C,
             dataAttributes: y
           }
         ),
-        /* @__PURE__ */ t(H, { startIcon: b, endIcon: u, htmlFor: i, textLabel: d, additionalInfo: m, $labelFlexDirection: c, className: g })
+        /* @__PURE__ */ t(K, { startIcon: u, endIcon: x, htmlFor: r, textLabel: c, 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__ */ $(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 })
     ] }),
-    L
+    O
   ] });
-}, re = r.fieldset`
+}, pe = h.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, de = r.legend`
-    font-size: ${e.spacing.medium};
+`, ye = h.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};
+`, ke = h.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 = h.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, G = ({
-  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,
+`, V = ({
+  editableButtonSize: e,
+  editableButtonColor: n,
+  editableButtonRadius: l,
+  legend: r,
+  fieldsetIndex: c,
+  idx: i,
+  editableInformation: b,
+  saveText: u,
+  saveButtonStartIcon: x,
+  saveButtonEndIcon: f,
+  cancelText: p,
+  cancelButtonStartIcon: k,
+  cancelButtonEndIcon: y,
+  deleteText: C,
+  deleteButtonStartIcon: z,
+  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,
     {
-      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-${v}`,
+      name: `editable-option-${v}`,
+      placeholderText: N.name.charAt(0).toUpperCase() + N.name.slice(1),
+      onChange: S,
+      value: N.info,
+      type: N.type,
       isRequired: !0,
       className: "editable-option",
       dataAttributes: {
-        "data-index": g,
-        "data-fieldsetindex": l,
-        "data-key": u.info
+        "data-index": v,
+        "data-fieldsetindex": c,
+        "data-key": N.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 } })
+  ) }, `${N.name}-${v}`)),
+  /* @__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 } })
   ] })
-] }), he = r.div`
+] }), we = h.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;
+    }
+`, Fe = ({
+  id: e,
+  formActionButtonSize: n,
+  formActionButtonColor: l,
+  formActionButtonRadius: r,
+  submitText: c,
+  submitIcon: i,
+  hasReset: b,
+  resetText: u,
+  resetIcon: x,
+  handleReset: f,
+  hasCancel: p,
+  cancelText: k,
+  cancelIcon: y,
+  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`
+    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 = h.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`, Q = r.div`
-    padding: ${e.spacing.small};
+`, _ = h.div`
+    padding: ${o.spacing.small};
     height: auto;
     width: 100%;
-`, V = r.div`
+`, ee = h.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};
+`, Ne = h.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`, X = r.div`
+`, oe = h.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, ge = r.div`
+`, Te = h.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`, Ce = ({
-  fieldsets: a = null,
-  legendText: l,
-  isExpandable: n,
-  id: i,
-  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,
+`, De = ({
+  fieldsets: e = null,
+  legendText: n,
+  isExpandable: l,
+  id: r,
+  formInputs: c,
+  labelAndInputContainerClass: i,
+  labelClass: b,
+  inputClass: u,
+  onChangeOfEditableOption: x,
+  handleAddingInputEntry: f,
+  formActionButtonSize: p,
+  formActionButtonColor: k,
+  formActionButtonRadius: y,
+  submitText: C,
+  submitIcon: z,
+  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,
           {
-            ...s,
-            id: s.id ?? `${o.legend}-input`,
-            labelClass: c,
-            inputClass: b,
-            idx: N,
-            className: `${m} ${s?.uniqueClass}`
+            ...m,
+            id: m.id ?? `${a.legend}-input`,
+            labelClass: b,
+            inputClass: u,
+            idx: W,
+            className: `${i} ${m?.uniqueClass}`
           }
         ),
-        s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ t(
-          v,
+        m.type !== "textarea" && m.type !== "radio" && m.type !== "checkbox" && /* @__PURE__ */ t(
+          L,
           {
-            ...s,
-            id: s.id ?? `${o.legend}-input`,
-            labelClass: c,
-            inputClass: b,
-            idx: N,
-            className: `${m} ${s?.uniqueClass}`
+            ...m,
+            id: m.id ?? `${a.legend}-input`,
+            labelClass: b,
+            inputClass: u,
+            idx: W,
+            className: `${i} ${m?.uniqueClass}`
           }
         ),
-        (s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ f(R, { children: [
+        (m.type === "radio" || m.type === "checkbox") && /* @__PURE__ */ $(U, { children: [
           /* @__PURE__ */ t(
-            v,
+            L,
             {
-              ...s,
-              id: s.id ?? `${o.legend}-input`,
-              labelClass: c,
-              inputClass: b,
-              idx: N,
-              className: `${m} ${s?.uniqueClass}`
+              ...m,
+              id: m.id ?? `${a.legend}-input`,
+              labelClass: b,
+              inputClass: u,
+              idx: W,
+              className: `${i} ${m?.uniqueClass}`
             }
           ),
-          s.editing && s.isEditable && /* @__PURE__ */ t(
-            G,
+          m.editing && m.isEditable && /* @__PURE__ */ t(
+            V,
             {
-              legend: `${o.legend}`,
-              fieldsetIndex: $,
-              idx: N,
-              editableInformation: s?.editableInformation || [],
-              onChangeOfEditableOption: u,
-              onClickSaveEdit: s?.onClickSave || ((q) => {
+              editableButtonSize: m.editableButtonSize,
+              editableButtonColor: m.editableButtonColor,
+              editableButtonRadius: m.editableButtonRadius,
+              legend: `${a.legend}`,
+              fieldsetIndex: F,
+              idx: W,
+              editableInformation: m?.editableInformation || [],
+              onChangeOfEditableOption: x,
+              onClickSaveEdit: m?.onClickSave || ((M) => {
               }),
-              onClickCancelEdit: s?.onClickCancel || ((q) => {
+              onClickCancelEdit: m?.onClickCancel || ((M) => {
               }),
-              onClickDeleteEntry: s?.onClickDelete || ((q) => {
+              onClickDeleteEntry: m?.onClickDelete || ((M) => {
               })
             }
           )
         ] })
-      ] }, `form-${i}-${N}`)) : o.isExpandable ? /* @__PURE__ */ t(V, { children: `No entry yet on ${o.legend}. Click "+" button to add entry.` }) : ""
+      ] }, `form-${r}-${W}`)) : a.isExpandable ? /* @__PURE__ */ t(ee, { children: `No entry yet on ${a.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,
+    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,
           {
-            ...o,
-            id: o.id ?? `${l}-input`,
-            labelClass: c,
-            inputClass: b,
-            idx: $,
-            className: `${m} ${o?.uniqueClass}`
+            ...a,
+            id: a.id ?? `${n}-input`,
+            labelClass: b,
+            inputClass: u,
+            idx: F,
+            className: `${i} ${a?.uniqueClass}`
           }
         ),
-        o.type !== "textarea" && o.type !== "radio" && o.type !== "checkbox" && /* @__PURE__ */ t(
-          v,
+        a.type !== "textarea" && a.type !== "radio" && a.type !== "checkbox" && /* @__PURE__ */ t(
+          L,
           {
-            ...o,
-            id: o.id ?? `${l}-input`,
-            labelClass: c,
-            inputClass: b,
-            idx: $,
-            className: `${m} ${o?.uniqueClass}`
+            ...a,
+            id: a.id ?? `${n}-input`,
+            labelClass: b,
+            inputClass: u,
+            idx: F,
+            className: `${i} ${a?.uniqueClass}`
           }
         ),
-        (o.type === "radio" || o.type === "checkbox") && /* @__PURE__ */ f(R, { children: [
+        (a.type === "radio" || a.type === "checkbox") && /* @__PURE__ */ $(U, { children: [
           /* @__PURE__ */ t(
-            v,
+            L,
             {
-              ...o,
-              id: o.id ?? `${l}-input`,
-              labelClass: c,
-              inputClass: b,
-              idx: $,
-              className: `${m} ${o?.uniqueClass}`
+              ...a,
+              id: a.id ?? `${n}-input`,
+              labelClass: b,
+              inputClass: u,
+              idx: F,
+              className: `${i} ${a?.uniqueClass}`
             }
           ),
-          o.editing && o.isEditable && /* @__PURE__ */ t(
-            G,
+          a.editing && a.isEditable && /* @__PURE__ */ t(
+            V,
             {
-              legend: `${l}`,
-              idx: $,
-              editableInformation: o?.editableInformation,
-              onChangeOfEditableOption: u,
-              onClickSaveEdit: o?.onClickSave || ((s) => {
+              editableButtonSize: a.editableButtonSize,
+              editableButtonColor: a.editableButtonColor,
+              editableButtonRadius: a.editableButtonRadius,
+              legend: `${n}`,
+              idx: F,
+              editableInformation: a?.editableInformation,
+              onChangeOfEditableOption: x,
+              onClickSaveEdit: a?.onClickSave || ((m) => {
               }),
-              onClickCancelEdit: o?.onClickCancel || ((s) => {
+              onClickCancelEdit: a?.onClickCancel || ((m) => {
               }),
-              onClickDeleteEntry: o?.onClickDelete || ((s) => {
+              onClickDeleteEntry: a?.onClickDelete || ((m) => {
               })
             }
           )
         ] })
-      ] }, `form-${i}-${$}`)) : n ? /* @__PURE__ */ t(V, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
+      ] }, `form-${r}-${F}`)) : l ? /* @__PURE__ */ t(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__ */ t(oe, { className: "add-input-button-space", children: /* @__PURE__ */ t(T, { id: `expand-${n}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry" }) })
   ] }),
   /* @__PURE__ */ t(
-    ue,
+    Fe,
     {
-      id: i,
-      submitText: p,
-      submitIcon: C,
-      hasReset: y,
-      resetText: w,
-      resetIcon: F,
-      handleReset: k,
-      hasCancel: E,
-      cancelText: A,
-      cancelIcon: D,
-      handleCancel: z
+      id: r,
+      formActionButtonSize: p,
+      formActionButtonColor: k,
+      formActionButtonRadius: y,
+      submitText: C,
+      submitIcon: z,
+      hasReset: w,
+      resetText: S,
+      resetIcon: B,
+      handleReset: D,
+      hasCancel: j,
+      cancelText: N,
+      cancelIcon: v,
+      handleCancel: O
     }
   ),
-  /* @__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__ */ t(Te, { className: "children-container", children: P })
+] }), Ee = {
   mobile: "320px",
   //Small iPhone SE & Medium: iPhone 12-15
   tablet: "768px",
@@ -643,52 +813,108 @@ const M = r.span`
   //Macbook 13" (1280x800)
   largeDesktop: "1200px",
   largerDesktop: "1400px"
-}, xe = {
+}, 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 = {
   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: 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
+  },
+  anchorTheme: {
+    visited: s.neutral5,
+    hover: s.primary2,
+    active: s.secondary2
+  },
+  footerTheme: {
+    backgroundColor: s.neutral5,
+    textColor: s.secondary1,
+    shadowColor: s.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")
   }
-}, pe = {
+}, ze = {
   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: 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
+  },
+  anchorTheme: {
+    link: s.neutral1,
+    visited: s.neutral1,
+    hover: s.primary3,
+    active: s.secondary1
+  },
+  footerTheme: {
+    backgroundColor: s.accent,
+    textColor: s.primary1,
+    shadowColor: s.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")
   }
-}, Y = _({}), Fe = ({
-  children: a,
-  initialTheme: l = xe,
-  secondTheme: n = pe
+}, te = ae({}), Re = ({
+  children: e,
+  initialTheme: n = ve,
+  secondTheme: l = ze
 }) => {
-  const [i, d] = I(l), m = () => {
-    d((c) => c === l ? n : l);
+  const [r, c] = le(n), i = () => {
+    c((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__ */ t(te.Provider, { value: { currentTheme: r, toggleTheme: i }, children: /* @__PURE__ */ t(ie, { theme: r, children: e }) });
+}, Le = () => ne(te);
 export {
-  Ce as DynamicForm,
-  Y as ThemeContext,
-  Fe as ThemeContextProvider,
-  we as breakpoints,
-  pe as darkTheme,
-  xe as lightTheme,
-  Ee as useTheme
+  De as DynamicForm,
+  te as ThemeContext,
+  Re as ThemeContextProvider,
+  Ee as breakpoints,
+  ze as darkTheme,
+  ve as lightTheme,
+  s as palette,
+  Le as useTheme
 };