jcicl 1.0.5 → 1.0.9

package/FormComponents/FormComponents.js

@@ -1,33 +1,38 @@
-import { n as o } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as t } from "../.chunks/emotion-react.browser.esm.js";
-import i from "../theme.js";
-const x = o("div")(
-  ({ boxShadow: e = i.boxShadows.darkGreen }) => ({
-    ...t`
-      background-color: ${i.colors.white};
-      border-radius: 8px;
-      box-shadow: ${e};
-      padding: 0px 36px 19px 36px;
-      display: flex;
-      flex-direction: column;
-      gap: 21px;
-      max-width: 1300px;
-      width: 100%;
-      box-sizing: border-box;
-    `
-  })
-), m = o("div")(({ columns: e = 3, columnsOverride: n, gap: r = 21, customStyles: a }) => ({
-  ...t`
+import { jsx as a } from "react/jsx-runtime";
+import { n as e } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as o } from "../.chunks/emotion-react.browser.esm.js";
+import r from "../theme.js";
+import { useThemeColors as m } from "../ThemeContext.js";
+const f = ({ children: t, ...i }) => {
+  const n = m();
+  return /* @__PURE__ */ a(d, { customTheme: n, ...i, children: t });
+}, d = e("div", {
+  shouldForwardProp: (t) => !["customTheme"].includes(t)
+})(({ customTheme: t }) => ({
+  ...o`
+    background-color: ${r.colors.white};
+    border-radius: 8px;
+    box-shadow: ${t.themeShadowB};
+    padding: 0px 36px 19px 36px;
+    display: flex;
+    flex-direction: column;
+    gap: 21px;
+    max-width: 1300px;
+    width: 100%;
+    box-sizing: border-box;
+  `
+})), h = e("div")(({ columns: t = 3, columnsOverride: i, gap: n = 21, customStyles: l }) => ({
+  ...o`
     display: grid;
-    grid-template-columns: repeat(${e}, 1fr);
-    ${n && t`
-      grid-template-columns: ${n};
+    grid-template-columns: repeat(${t}, 1fr);
+    ${i && o`
+      grid-template-columns: ${i};
     `};
-    gap: ${r}px;
-    ${a};
+    gap: ${n}px;
+    ${l};
   `
-})), s = o("div")(() => ({
-  ...t`
+})), w = e("div")(() => ({
+  ...o`
     width: 100%;
     display: flex;
     align-items: flex-end;
@@ -44,59 +49,60 @@ const x = o("div")(
       align-items: flex-end;
     }
   `
-})), g = o("h2")(() => ({
-  ...t`
+})), b = e("h2")(() => ({
+  ...o`
     font-size: 27px;
     font-weight: 600;
     text-align: left;
     margin-top: 9px;
     margin-bottom: -15px;
   `
-})), f = o("h3")(({ underlined: e = !1 }) => ({
-  ...t`
+})), u = e("h3")(({ underlined: t = !1 }) => ({
+  ...o`
     font-size: 19px;
     font-weight: 600;
     text-align: left;
     margin: 0;
     margin-bottom: -15px;
     width: 100%;
-    ${e && t`
+    ${t && o`
       text-decoration: underline;
     `};
   `
-})), c = o("p")(({ underlined: e = !1 }) => ({
-  ...t`
+})), F = e("p")(({ underlined: t = !1 }) => ({
+  ...o`
     text-align: left;
     font-size: inherit;
     font-weight: bold;
     margin: 0;
     margin-bottom: -19px;
     width: 100%;
-    ${e && t`
+    ${t && o`
       text-decoration: underline;
     `};
   `
-})), h = o("h3")(({ underlined: e = !1 }) => ({
-  ...t`
+})), $ = e("h3")(({ underlined: t = !1 }) => ({
+  ...o`
     font-size: 19px;
     font-weight: 600;
     text-align: left;
     margin: 0;
     margin-top: 9px;
     margin-bottom: -6px;
-    border-bottom: 1px solid ${i.colors.gray};
+    border-bottom: 1px solid ${r.colors.gray};
     width: 100%;
-    ${e && t`
+    ${t && o`
       text-decoration: underline;
     `};
   `
 }));
 export {
-  s as FormFieldCheckboxContainer,
-  m as FormFieldGrid,
-  x as FormSection,
-  g as FormSectionTitle,
-  h as FormSubsectionTitle,
-  f as FormSubtitle,
-  c as FormTextLine
+  w as FormFieldCheckboxContainer,
+  h as FormFieldGrid,
+  f as FormSection,
+  d as FormSectionStyles,
+  b as FormSectionTitle,
+  $ as FormSubsectionTitle,
+  u as FormSubtitle,
+  F as FormTextLine
 };

package/Icon/Icon.js

@@ -1,29 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { B as p } from "../.chunks/ButtonBase.js";
-import i from "../theme.js";
-import { n as l, i as m } from "../.chunks/emotion-styled.browser.esm.js";
-const a = l("div", {
-  shouldForwardProp: (r) => m(r)
+import { jsx as s } from "react/jsx-runtime";
+import { B as h } from "../.chunks/ButtonBase.js";
+import c from "../theme.js";
+import { n as m, i as p } from "../.chunks/emotion-styled.browser.esm.js";
+import { useThemeColors as u } from "../ThemeContext.js";
+const l = m("div", {
+  shouldForwardProp: (e) => p(e) && !["customTheme"].includes(e)
 })(
-  ({ iconColor: r = i.colors.darkGreen, backgroundColor: n = i.colors.mint, size: o = 40, padding: s = 8 }) => ({
+  ({ iconColor: e, backgroundColor: n, size: o = 40, padding: t = 8, customTheme: r }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: "50%",
-    boxShadow: `0 0 2px ${i.colors.midnight}`,
+    boxShadow: `0 0 2px ${c.colors.midnight}`,
     svg: {
       boxSizing: "border-box",
-      border: `1px solid ${r}`,
-      backgroundColor: n,
+      border: `1px solid ${e || r.themeDark}`,
+      backgroundColor: n || r.themeMediumA,
       borderRadius: "50%",
-      padding: `${s}px`,
-      fill: r,
+      padding: `${t}px`,
+      fill: e || r.themeDark,
       width: `${o}px`,
       height: `${o}px`,
       pointerEvents: "none"
     }
   })
-), h = l(p)({
+), f = m(h)({
   backgroundColor: "transparent",
   borderRadius: "50%",
   span: {
@@ -31,20 +32,20 @@ const a = l("div", {
   },
   "&:hover, :focus-visible": {
     span: {
-      backgroundColor: i.colors.grayO44
+      backgroundColor: c.colors.grayO44
     }
   }
-}), b = ({
-  icon: r,
+}), v = ({
+  icon: e,
   iconColor: n,
   backgroundColor: o,
-  size: s,
-  padding: c,
-  ...e
+  size: t,
+  padding: r,
+  ...i
 }) => {
-  const d = { iconColor: n, backgroundColor: o, size: s, padding: c };
-  return e != null && e.onClick ? /* @__PURE__ */ t(h, { ...e, children: /* @__PURE__ */ t(a, { ...d, children: r }) }) : /* @__PURE__ */ t(a, { ...d, children: r });
+  const d = { iconColor: n, backgroundColor: o, size: t, padding: r }, a = u();
+  return i != null && i.onClick ? /* @__PURE__ */ s(f, { ...i, children: /* @__PURE__ */ s(l, { ...d, customTheme: a, children: e }) }) : /* @__PURE__ */ s(l, { ...d, customTheme: a, children: e });
 };
 export {
-  b as default
+  v as default
 };

package/InfoCard/InfoCard.js

@@ -1,50 +1,54 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { n as d } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as i } from "../.chunks/emotion-react.browser.esm.js";
-import l from "../theme.js";
-import { LabeledValue as h } from "../LabeledValue/LabeledValue.js";
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { n as i } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as m } from "../.chunks/emotion-react.browser.esm.js";
+import h from "../theme.js";
+import { LabeledValue as u } from "../LabeledValue/LabeledValue.js";
 import { Flex as g } from "../Flex/Flex.js";
-const x = d("div")(({ padding: r, shadow: o, styles: e }) => ({
-  ...i`
+import { useThemeColors as x } from "../ThemeContext.js";
+const w = i("div", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(({ padding: o, shadow: r, styles: e, customTheme: t }) => ({
+  ...m`
     h3 {
       margin: 0;
       width: 100%;
       font-size: 28px;
     }
     font-family: 'Roboto', sans-serif;
-    padding: ${r};
+    padding: ${o};
     display: flex;
     flex-direction: column;
-    box-shadow: ${o};
+    box-shadow: ${r || t.themeShadowB};
     border-radius: 5px;
-    background-color: ${l.colors.white};
+    background-color: ${h.colors.white};
     ${e};
   `
-})), u = d("div")(({ spacing: r, columns: o }) => ({
-  ...i`
-    margin-top: calc(${r} * 0.75);
-    grid-row-gap: ${r};
-    grid-column-gap: calc(${r} * 1.5);
+})), $ = i("div")(({ spacing: o, columns: r }) => ({
+  ...m`
+    margin-top: calc(${o} * 0.75);
+    grid-row-gap: ${o};
+    grid-column-gap: calc(${o} * 1.5);
     display: grid;
-    grid-template-columns: repeat(${o}, 1fr);
+    grid-template-columns: repeat(${r}, 1fr);
   `
-})), j = ({
-  decorativeElement: r,
-  title: o,
+})), k = ({
+  decorativeElement: o,
+  title: r,
   items: e,
-  padding: m = "1rem 2rem",
-  shadow: s = l.boxShadows.darkGreen,
-  spacing: c = "2rem",
-  columns: p = 3,
-  styles: f
-}) => /* @__PURE__ */ t(x, { ...{ padding: m, shadow: s, styles: f }, children: [
-  /* @__PURE__ */ t(g, { width: "100%", gap: "1rem", alignItems: "center", children: [
-    r && r,
-    /* @__PURE__ */ a("h3", { children: o })
-  ] }),
-  /* @__PURE__ */ a(u, { ...{ spacing: c, columns: p }, children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ a(h, { ...n }, n.label)) })
-] });
+  padding: t = "1rem 2rem",
+  shadow: l,
+  spacing: s = "2rem",
+  columns: c = 3,
+  styles: p
+}) => {
+  const f = x();
+  return /* @__PURE__ */ d(w, { ...{ padding: t, shadow: l, styles: p }, customTheme: f, children: [
+    /* @__PURE__ */ d(g, { width: "100%", gap: "1rem", alignItems: "center", children: [
+      o && o,
+      /* @__PURE__ */ n("h3", { children: r })
+    ] }),
+    /* @__PURE__ */ n($, { ...{ spacing: s, columns: c }, children: e == null ? void 0 : e.map((a) => /* @__PURE__ */ n(u, { ...a }, a.label)) })
+  ] });
+};
 export {
-  j as InfoCard,
-  j as default
+  k as InfoCard,
+  k as default
 };

package/Input/Input.js

@@ -1,13 +1,14 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import { n } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as i } from "../.chunks/emotion-react.browser.esm.js";
-import t from "../theme.js";
-import { T as p } from "../.chunks/TextField.js";
-const a = n(p, {
+import { c as t } from "../.chunks/emotion-react.browser.esm.js";
+import i from "../theme.js";
+import { useThemeColors as d } from "../ThemeContext.js";
+import { T as a } from "../.chunks/TextField.js";
+const x = n(a, {
   shouldForwardProp: (o) => o != "borderFocusColor"
 })(({ borderFocusColor: o, type: e, disabled: r }) => ({
-  ...i`
-    background-color: ${t.colors.white};
+  ...t`
+    background-color: ${i.colors.white};
     border-radius: 0;
     height: 18px;
 
@@ -16,11 +17,11 @@ const a = n(p, {
       height: 15px;
       padding: 2px 0;
       border-radius: 0;
-      border-bottom: 1px solid ${t.colors.gray};
+      border-bottom: 1px solid ${i.colors.gray};
       width: 100%;
 
       &:focus-visible {
-        ${e !== "date" && !r && i`
+        ${e !== "date" && !r && t`
           box-shadow: 0 -5px 4px -4px ${o} inset;
         `}
       }
@@ -42,7 +43,7 @@ const a = n(p, {
     &:hover,
     :focus-visible {
       input {
-        ${e !== "date" && !r && i`
+        ${e !== "date" && !r && t`
           box-shadow: 0 -5px 4px -4px ${o} inset;
         `}
       }
@@ -59,13 +60,16 @@ const a = n(p, {
       }
     }
   `
-})), c = ({
-  borderFocusColor: o = t.colors.green,
+})), f = ({
+  borderFocusColor: o,
   // border primary
   type: e,
   ...r
-}) => /* @__PURE__ */ s(a, { borderFocusColor: o, type: e, ...r });
+}) => {
+  const s = d();
+  return /* @__PURE__ */ p(x, { borderFocusColor: o || s.themeColor, type: e, ...r });
+};
 export {
-  c as Input,
-  c as default
+  f as Input,
+  f as default
 };

package/LabeledCheckbox/LabeledCheckbox.js

@@ -1,7 +1,7 @@
-import { jsxs as z, jsx as c } from "react/jsx-runtime";
+import { jsxs as z, jsx as i } from "react/jsx-runtime";
 import { n as te } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as T } from "../.chunks/emotion-react.browser.esm.js";
-import ae from "../theme.js";
+import { c as M } from "../.chunks/emotion-react.browser.esm.js";
+import { useThemeColors as ae } from "../ThemeContext.js";
 import * as v from "react";
 import { g as q, a as V, s as O, r as U, b as H, P as e, c as b, d as D, e as L, u as ne } from "../.chunks/DefaultPropsProvider.js";
 import { u as se } from "../.chunks/useFormControl.js";
@@ -21,11 +21,11 @@ const de = (o) => {
     checked: a,
     disabled: s,
     edge: n
-  } = o, l = {
+  } = o, r = {
     root: ["root", a && "checked", s && "disabled", n && `edge${b(n)}`],
     input: ["input"]
   };
-  return D(l, le, t);
+  return D(r, le, t);
 }, pe = O(re)({
   padding: 9,
   borderRadius: "50%",
@@ -75,11 +75,11 @@ const de = (o) => {
   margin: 0,
   padding: 0,
   zIndex: 1
-}), W = /* @__PURE__ */ v.forwardRef(function(t, a) {
+}), A = /* @__PURE__ */ v.forwardRef(function(t, a) {
   const {
     autoFocus: s,
     checked: n,
-    checkedIcon: l,
+    checkedIcon: r,
     className: p,
     defaultChecked: d,
     disabled: k,
@@ -88,8 +88,8 @@ const de = (o) => {
     icon: w,
     id: B,
     inputProps: I,
-    inputRef: y,
-    name: C,
+    inputRef: C,
+    name: y,
     onBlur: f,
     onChange: h,
     onFocus: F,
@@ -104,18 +104,18 @@ const de = (o) => {
     default: !!d,
     name: "SwitchBase",
     state: "checked"
-  }), i = se(), Y = (r) => {
-    F && F(r), i && i.onFocus && i.onFocus(r);
-  }, Z = (r) => {
-    f && f(r), i && i.onBlur && i.onBlur(r);
-  }, ee = (r) => {
-    if (r.nativeEvent.defaultPrevented)
+  }), l = se(), Y = (c) => {
+    F && F(c), l && l.onFocus && l.onFocus(c);
+  }, Z = (c) => {
+    f && f(c), l && l.onBlur && l.onBlur(c);
+  }, ee = (c) => {
+    if (c.nativeEvent.defaultPrevented)
       return;
-    const M = r.target.checked;
-    X(M), h && h(r, M);
+    const T = c.target.checked;
+    X(T), h && h(c, T);
   };
   let m = k;
-  i && typeof m > "u" && (m = i.disabled);
+  l && typeof m > "u" && (m = l.disabled);
   const oe = x === "checkbox" || x === "radio", R = {
     ...t,
     checked: j,
@@ -136,17 +136,17 @@ const de = (o) => {
     ownerState: R,
     ref: a,
     ...Q,
-    children: [/* @__PURE__ */ c(ue, {
+    children: [/* @__PURE__ */ i(ue, {
       autoFocus: s,
       checked: n,
       defaultChecked: d,
       className: N.input,
       disabled: m,
       id: oe ? B : void 0,
-      name: C,
+      name: y,
       onChange: ee,
       readOnly: G,
-      ref: y,
+      ref: C,
       required: J,
       ownerState: R,
       tabIndex: K,
@@ -155,10 +155,10 @@ const de = (o) => {
         value: $
       },
       ...I
-    }), j ? l : w]
+    }), j ? r : w]
   });
 });
-process.env.NODE_ENV !== "production" && (W.propTypes = {
+process.env.NODE_ENV !== "production" && (A.propTypes = {
   /**
    * If `true`, the `input` element is focused during the first mount.
    */
@@ -261,11 +261,11 @@ process.env.NODE_ENV !== "production" && (W.propTypes = {
    */
   value: e.any
 });
-const fe = P(/* @__PURE__ */ c("path", {
+const fe = P(/* @__PURE__ */ i("path", {
   d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-}), "CheckBoxOutlineBlank"), he = P(/* @__PURE__ */ c("path", {
+}), "CheckBoxOutlineBlank"), he = P(/* @__PURE__ */ i("path", {
   d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-}), "CheckBox"), me = P(/* @__PURE__ */ c("path", {
+}), "CheckBox"), me = P(/* @__PURE__ */ i("path", {
   d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
 }), "IndeterminateCheckBox");
 function be(o) {
@@ -277,15 +277,15 @@ const S = V("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     indeterminate: a,
     color: s,
     size: n
-  } = o, l = {
+  } = o, r = {
     root: ["root", a && "indeterminate", `color${b(s)}`, `size${b(n)}`]
-  }, p = D(l, be, t);
+  }, p = D(r, be, t);
   return {
     ...t,
     // forward the disabled and checked classes to the SwitchBase
     ...p
   };
-}, ge = O(W, {
+}, ge = O(A, {
   shouldForwardProp: (o) => U(o) || o === "classes",
   name: "MuiCheckbox",
   slot: "Root",
@@ -345,14 +345,14 @@ const S = V("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
       }
     }
   }]
-}))), ye = /* @__PURE__ */ c(he, {}), Ce = /* @__PURE__ */ c(fe, {}), xe = /* @__PURE__ */ c(me, {}), A = /* @__PURE__ */ v.forwardRef(function(t, a) {
+}))), Ce = /* @__PURE__ */ i(he, {}), ye = /* @__PURE__ */ i(fe, {}), xe = /* @__PURE__ */ i(me, {}), W = /* @__PURE__ */ v.forwardRef(function(t, a) {
   const s = ne({
     props: t,
     name: "MuiCheckbox"
   }), {
-    checkedIcon: n = ye,
-    color: l = "primary",
-    icon: p = Ce,
+    checkedIcon: n = Ce,
+    color: r = "primary",
+    icon: p = ye,
     indeterminate: d = !1,
     indeterminateIcon: k = xe,
     inputProps: g,
@@ -360,25 +360,25 @@ const S = V("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     disableRipple: w = !1,
     className: B,
     ...I
-  } = s, y = d ? k : p, C = d ? k : n, f = {
+  } = s, C = d ? k : p, y = d ? k : n, f = {
     ...s,
     disableRipple: w,
-    color: l,
+    color: r,
     indeterminate: d,
     size: u
   }, h = ke(f);
-  return /* @__PURE__ */ c(ge, {
+  return /* @__PURE__ */ i(ge, {
     type: "checkbox",
     inputProps: {
       "data-indeterminate": d,
       ...g
     },
-    icon: /* @__PURE__ */ v.cloneElement(y, {
-      fontSize: y.props.fontSize ?? u
-    }),
-    checkedIcon: /* @__PURE__ */ v.cloneElement(C, {
+    icon: /* @__PURE__ */ v.cloneElement(C, {
       fontSize: C.props.fontSize ?? u
     }),
+    checkedIcon: /* @__PURE__ */ v.cloneElement(y, {
+      fontSize: y.props.fontSize ?? u
+    }),
     ownerState: f,
     ref: a,
     className: H(h.root, B),
@@ -386,7 +386,7 @@ const S = V("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     classes: h
   });
 });
-process.env.NODE_ENV !== "production" && (A.propTypes = {
+process.env.NODE_ENV !== "production" && (W.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -487,8 +487,8 @@ process.env.NODE_ENV !== "production" && (A.propTypes = {
    */
   value: e.any
 });
-const ve = te("div")(({ displayMode: o }) => ({
-  ...T`
+const ve = te("div", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(({ displayMode: o, customTheme: t }) => ({
+  ...M`
     display: flex;
     flex-wrap: nowrap;
     align-items: flex-end;
@@ -508,10 +508,10 @@ const ve = te("div")(({ displayMode: o }) => ({
     }
 
     .Mui-checked {
-      color: ${ae.colors.green} !important;
+      color: ${t.themeIconBackgroundA} !important;
     }
 
-    ${o && T`
+    ${o && M`
       .Mui-disabled {
         color: inherit !important;
         -webkit-text-fill-color: inherit !important;
@@ -521,20 +521,23 @@ const ve = te("div")(({ displayMode: o }) => ({
       }
     `}
   `
-})), Me = ({
+})), Te = ({
   label: o,
   colon: t = !0,
   displayMode: a = !1,
   noLabel: s = !1,
   ...n
-}) => /* @__PURE__ */ z(ve, { displayMode: a, className: "jcLabeledCheckbox", children: [
-  !s && /* @__PURE__ */ z("span", { className: "jcCheckboxLabel", children: [
-    o,
-    t && ":"
-  ] }),
-  /* @__PURE__ */ c(A, { ...n })
-] });
+}) => {
+  const r = ae();
+  return /* @__PURE__ */ z(ve, { displayMode: a, className: "jcLabeledCheckbox", customTheme: r, children: [
+    !s && /* @__PURE__ */ z("span", { className: "jcCheckboxLabel", children: [
+      o,
+      t && ":"
+    ] }),
+    /* @__PURE__ */ i(W, { ...n })
+  ] });
+};
 export {
-  Me as LabeledCheckbox,
-  Me as default
+  Te as LabeledCheckbox,
+  Te as default
 };