jcicl 1.0.5 → 1.0.9

package/LabeledInput/LabeledInput.js

@@ -2,9 +2,9 @@ import { jsxs as r, jsx as s } from "react/jsx-runtime";
 import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as e } from "../.chunks/emotion-react.browser.esm.js";
 import { Input as d } from "../Input/Input.js";
-const c = ["noLabel"], u = l("div", {
-  shouldForwardProp: (t) => !c.includes(t)
-})(({ grid: t, displayMode: o }) => ({
+const c = ["noLabel", "displayMode", "grid"], u = l("div", {
+  shouldForwardProp: (o) => !c.includes(o)
+})(({ grid: o, displayMode: t }) => ({
   ...e`
     display: flex;
     flex-wrap: nowrap;
@@ -21,10 +21,10 @@ const c = ["noLabel"], u = l("div", {
     }
 
     .MuiInputBase-root {
-      width: ${t && "100%"};
+      width: ${o && "100%"};
     }
 
-    ${o && e`
+    ${t && e`
       .Mui-disabled {
         color: inherit !important;
         -webkit-text-fill-color: inherit !important;
@@ -35,18 +35,18 @@ const c = ["noLabel"], u = l("div", {
     `}
   `
 })), b = ({
-  label: t,
-  grid: o = !0,
+  label: o,
+  grid: t = !0,
   displayMode: a = !1,
-  noLabel: n = !1,
+  noLabel: i = !1,
   limit: p,
-  ...i
-}) => /* @__PURE__ */ r(u, { grid: o, displayMode: a, className: "jcLabeledInput", children: [
-  !n && /* @__PURE__ */ r("span", { children: [
-    t,
+  ...n
+}) => /* @__PURE__ */ r(u, { grid: t, displayMode: a, className: "jcLabeledInput", children: [
+  !i && /* @__PURE__ */ r("span", { children: [
+    o,
     ":"
   ] }),
-  /* @__PURE__ */ s(d, { ...i, slotProps: { htmlInput: { limit: p } } })
+  /* @__PURE__ */ s(d, { ...n, slotProps: { htmlInput: { limit: p } } })
 ] });
 export {
   b as LabeledInput,

package/LabeledTextArea/LabeledTextArea.js

@@ -1,10 +1,13 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as s } from "../.chunks/emotion-react.browser.esm.js";
-import o from "../theme.js";
-import { T as n } from "../.chunks/TextField.js";
-const d = a("div")(() => ({
-  ...s`
+import { c as n } from "../.chunks/emotion-react.browser.esm.js";
+import t from "../theme.js";
+import { useThemeColors as d } from "../ThemeContext.js";
+import { T as l } from "../.chunks/TextField.js";
+const m = a("div", { shouldForwardProp: (e) => !["customTheme"].includes(e) })(({ customTheme: e }) => {
+  var o;
+  return {
+    ...n`
     display: flex;
     flex-direction: column;
     font-family: 'Roboto', sans-serif;
@@ -20,11 +23,11 @@ const d = a("div")(() => ({
       textarea {
         &:hover,
         :focus {
-          box-shadow: ${o.boxShadows.green} inset;
+          box-shadow: ${(o = t.boxShadows.green) == null ? void 0 : o.split("#")[0]} ${e.themeColor} inset;
         }
         width: 100%;
         padding: 13px;
-        border: 1px solid ${o.colors.gray};
+        border: 1px solid ${t.colors.gray};
         border-radius: 9px;
         resize: vertical;
         min-height: 130px;
@@ -44,11 +47,15 @@ const d = a("div")(() => ({
       }
     }
   `
-})), c = ({ label: e, ...t }) => /* @__PURE__ */ i(d, { className: "jcLabeledTextArea", children: [
-  e && /* @__PURE__ */ r("span", { children: e }),
-  /* @__PURE__ */ r(n, { ...t, multiline: !0, fullWidth: !0, rows: 1 })
-] });
+  };
+}), b = ({ label: e, ...o }) => {
+  const s = d();
+  return /* @__PURE__ */ i(m, { className: "jcLabeledTextArea", customTheme: s, children: [
+    e && /* @__PURE__ */ r("span", { children: e }),
+    /* @__PURE__ */ r(l, { ...o, multiline: !0, fullWidth: !0, rows: 1 })
+  ] });
+};
 export {
-  c as LabeledTextArea,
-  c as default
+  b as LabeledTextArea,
+  b as default
 };

package/List/List.js

@@ -1,39 +1,40 @@
-import { jsx as n } from "react/jsx-runtime";
-import { n as m } from "../.chunks/emotion-styled.browser.esm.js";
-import i from "../theme.js";
-const d = m("div")(
-  ({ width: o, borderColor: t, bordered: s, backgroundColor: r }) => ({
+import { jsx as i } from "react/jsx-runtime";
+import { n } from "../.chunks/emotion-styled.browser.esm.js";
+import d from "../theme.js";
+import { useThemeColors as u } from "../ThemeContext.js";
+const x = n("div")(
+  ({ width: o, borderColor: t, bordered: r, backgroundColor: e }) => ({
     display: "flex",
     flexDirection: "column",
     fontFamily: "Roboto, sans-serif",
-    backgroundColor: r,
-    ...s && { border: `1px solid ${t}` },
+    backgroundColor: e,
+    ...r && { border: `1px solid ${t}` },
     borderRadius: "4px",
     ...o && {
       width: o
     }
   })
-), x = m("div")(
-  ({ padding: o, borderColor: t, bordered: s }) => ({
+), b = n("div")(
+  ({ padding: o, borderColor: t, bordered: r }) => ({
     padding: o,
-    ...s && {
+    ...r && {
       borderBottom: `1px solid ${t}`,
       "&:last-child": {
         borderBottom: "none"
       }
     }
   })
-), v = ({
+), k = ({
   bordered: o = !1,
   width: t,
-  padding: s = "0",
-  borderColor: r = i.colors.darkGreen,
-  backgroundColor: a = i.colors.white,
-  children: e
+  padding: r = "0",
+  borderColor: e,
+  backgroundColor: a = d.colors.white,
+  children: s
 }) => {
-  const l = { width: t, borderColor: r, bordered: o, backgroundColor: a }, p = { padding: s, borderColor: r, bordered: o };
-  return /* @__PURE__ */ n(d, { ...l, children: e == null ? void 0 : e.map((c, f) => /* @__PURE__ */ n(x, { ...p, children: c }, f)) });
+  const m = u(), l = { width: t, bordered: o, backgroundColor: a }, p = { padding: r, bordered: o };
+  return /* @__PURE__ */ i(x, { borderColor: e || m.themeDark, ...l, children: s == null ? void 0 : s.map((c, f) => /* @__PURE__ */ i(b, { borderColor: e || m.themeDark, ...p, children: c }, f)) });
 };
 export {
-  v as default
+  k as default
 };

package/ListButton/ListButton.d.ts

@@ -1,11 +1,9 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, PropsWithChildren } from 'react';
 import { ButtonBaseProps } from '@mui/material/ButtonBase/ButtonBase';
 export interface ListButtonProps extends ButtonBaseProps {
     padding?: string;
     active?: boolean;
     activeStyles?: CSSProperties;
 }
-declare const ListButton: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonBaseOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef"> & {
-    theme?: import('@emotion/react').Theme;
-} & ListButtonProps, {}, {}>;
+declare const ListButton: React.FC<ListButtonProps & PropsWithChildren>;
 export default ListButton;

package/ListButton/ListButton.js

@@ -1,24 +1,33 @@
-import { n as s, i } from "../.chunks/emotion-styled.browser.esm.js";
-import e from "../theme.js";
+import { jsx as r } from "react/jsx-runtime";
+import { n, i as x } from "../.chunks/emotion-styled.browser.esm.js";
 import { B as p } from "../.chunks/ButtonBase.js";
-const l = s(p, {
-  shouldForwardProp: (o) => i(o) && typeof o == "string"
-})(({ padding: o = "1rem", active: t, activeStyles: r }) => ({
+import { useThemeColors as a } from "../ThemeContext.js";
+const l = n(p, {
+  shouldForwardProp: (t) => x(t) && typeof t == "string" && !["customTheme"].includes(t)
+})(({ padding: t = "1rem", active: o, activeStyles: s, customTheme: e }) => ({
   display: "flex",
   width: "100%",
   height: "100%",
-  padding: o,
+  padding: t,
   fontSize: "inherit",
   justifyContent: "flex-start",
   transition: "201ms all ease-in-out",
-  ...t && {
-    boxShadow: `inset 0px -11px 6px -10px ${e.colors.darkGreen}, inset 0px 11px 6px -10px ${e.colors.darkGreen}`,
-    ...r
+  ...o && {
+    boxShadow: `inset 0px -11px 6px -10px ${e.themeDark}, inset 0px 11px 6px -10px ${e.themeDark}`,
+    ...s
   },
   "&:hover, :focus-visible": {
-    boxShadow: `inset 0px -11px 6px -10px ${e.colors.green}, inset 0px 11px 6px -10px ${e.colors.green}`
+    boxShadow: `inset 0px -11px 6px -10px ${e.themeColor}, inset 0px 11px 6px -10px ${e.themeColor}`
   }
-}));
+})), u = ({
+  padding: t,
+  active: o,
+  activeStyles: s,
+  children: e
+}) => {
+  const i = a();
+  return /* @__PURE__ */ r(l, { padding: t, active: o, activeStyles: s, customTheme: i, children: e });
+};
 export {
-  l as default
+  u as default
 };

package/Loading/Loading.js

@@ -1,14 +1,19 @@
-import { jsx as o } from "react/jsx-runtime";
-import { n as s } from "../.chunks/emotion-styled.browser.esm.js";
+import { jsx as s } from "react/jsx-runtime";
+import { n as e } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as t } from "../.chunks/emotion-react.browser.esm.js";
-import e from "../theme.js";
-import { C as m } from "../.chunks/CircularProgress.js";
-const i = s(m)(({ styles: r }) => ({
+import { useThemeColors as m } from "../ThemeContext.js";
+import { C as c } from "../.chunks/CircularProgress.js";
+const i = e(c, {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ styles: o, customTheme: r }) => ({
   ...t`
-    color: ${e.colors.green};
-    ${r};
+    color: ${r.themeColor};
+    ${o};
   `
-})), p = ({ ...r }) => /* @__PURE__ */ o(i, { size: 47, ...r });
+})), d = ({ ...o }) => {
+  const r = m();
+  return /* @__PURE__ */ s(i, { size: 47, customTheme: r, ...o });
+};
 export {
-  p as default
+  d as default
 };

package/Pill/Pill.d.ts

@@ -1,6 +1,7 @@
 export interface PillProps {
     backgroundColor?: string;
     textColor?: string;
+    type?: 'primary' | 'secondary';
 }
 export declare const Pill: React.FC<PillProps & {
     children: React.ReactNode;

package/Pill/Pill.js

@@ -1,24 +1,32 @@
 import { jsx as s } from "react/jsx-runtime";
-import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
-import { c } from "../.chunks/emotion-react.browser.esm.js";
-import o from "../theme.js";
-const i = l("span")(
-  ({ backgroundColor: r = o.colors.whiteGreen, textColor: t = o.colors.darkGreen }) => ({
-    ...c`
-      font-family: ${o.fonts.roboto};
+import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as i } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
+import { useThemeColors as p } from "../ThemeContext.js";
+const l = a("span")(
+  ({ backgroundColor: r = e.colors.whiteGreen, textColor: o = e.colors.white }) => ({
+    ...i`
+      font-family: ${e.fonts.roboto};
       font-size: 13px;
       font-weight: 500;
-      color: ${t};
+      color: ${o};
       background-color: ${r};
       padding: 3px 13px;
       border-radius: 21px;
     `
   })
-), m = (r) => {
-  const { backgroundColor: t = o.colors.green, textColor: e = o.colors.white, children: n } = r;
-  return /* @__PURE__ */ s(i, { backgroundColor: t, textColor: e, children: n });
+), x = (r) => {
+  const o = p(), { backgroundColor: t, textColor: n, type: m = "primary", children: c } = r;
+  return m == "secondary" ? /* @__PURE__ */ s(
+    l,
+    {
+      backgroundColor: t || o.themeIconBackgroundB,
+      textColor: n || o.themeIconColorB,
+      children: c
+    }
+  ) : /* @__PURE__ */ s(l, { backgroundColor: t || o.themeIconBackgroundA, textColor: n, children: c });
 };
 export {
-  m as Pill,
-  m as default
+  x as Pill,
+  x as default
 };