jcicl 0.0.345 → 1.0.1

package/DefaultTemplate/DefaultTemplate.js

@@ -1,37 +1,40 @@
-import { jsx as e, jsxs as m, Fragment as f } from "react/jsx-runtime";
-import { useState as C } from "react";
-import { n as u } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as b } from "../.chunks/emotion-react.browser.esm.js";
-import o from "../theme.js";
-import w from "../AppContainer/AppContainer.js";
-import T from "../WithLoading/WithLoading.js";
-import { TopFade as S, BottomFade as P } from "../Overlays/Overlays.js";
-import { u as h } from "../.chunks/useMediaQuery.js";
-const $ = ["loading", "hasPagination", "loadingColor"], R = u("div", { shouldForwardProp: (r) => !$.includes(r) })(({ loading: r, hasPagination: l, hasFade: s, loadingColor: t = o.colors.green, isTablet: a }) => ({
-  ...b`
-    color: ${o.colors.midnight};
-    height: ${r ? "100%" : "auto"};
+import { jsx as r, jsxs as f, Fragment as F } from "react/jsx-runtime";
+import { useState as b, useMemo as $ } from "react";
+import { n as y } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as T } from "../.chunks/emotion-react.browser.esm.js";
+import t, { defaultTheme as C } from "../theme.js";
+import { getHueFromHex as g, updateTheme as u } from "../themeUtils.js";
+import { ThemeContext as z } from "../ThemeContext.js";
+import O from "../AppContainer/AppContainer.js";
+import A from "../WithLoading/WithLoading.js";
+import { TopFade as L, BottomFade as j } from "../Overlays/Overlays.js";
+import { P as D } from "../.chunks/AppHeader.js";
+import { u as S } from "../.chunks/useMediaQuery.js";
+const W = ["loading", "hasPagination", "loadingColor", "hasFade", "isTablet"], B = y("div", { shouldForwardProp: (o) => !W.includes(o) })(({ loading: o, hasPagination: i, hasFade: m, loadingColor: l = t.colors.green, isTablet: s }) => ({
+  ...T`
+    color: ${t.colors.midnight};
+    height: ${o ? "100%" : "auto"};
     padding: 19px;
     padding-top: 36px;
     display: flex;
     flex-direction: column;
-    justify-content: ${r ? "center" : "start"};
+    justify-content: ${o ? "center" : "start"};
     align-items: center;
     width: 100%;
     min-height: 100%;
-    height: ${a ? "100%" : "auto"};
+    height: ${s ? "100%" : "auto"};
     box-sizing: border-box;
-    padding-bottom: ${s ? l ? "114px" : "72px" : "19px"};
+    padding-bottom: ${m ? i ? "114px" : "72px" : "19px"};
     > * div {
       box-sizing: border-box;
     }
 
     .MuiCircularProgress-svg {
-      color: ${t};
+      color: ${l};
     }
   `
-})), M = u("div")(() => ({
-  ...b`
+})), H = y("div")(() => ({
+  ...T`
     border-radius: 8px;
     padding: 0;
     display: flex;
@@ -43,98 +46,90 @@ const $ = ["loading", "hasPagination", "loadingColor"], R = u("div", { shouldFor
     min-height: 100%;
     box-sizing: border-box;
   `
-})), v = {
-  green: o.colors.green,
-  blue: o.colors.darkBlue,
-  red: o.colors.darkRed
-}, g = {
-  green: o.colors.whiteGreen,
-  blue: o.colors.sky,
-  red: o.colors.lighterRed
-}, z = {
-  backgroundPrimary: o.colors.sky,
-  backgroundSecondary: o.colors.lovemist,
-  backgroundTertiary: o.colors.cornflower,
-  backgroundQuaternary: o.colors.sky,
-  borderPrimary: o.colors.darkBlue,
-  shadowPrimary: o.colors.indigo,
-  shadowSecondary: o.boxShadows.cobalt,
-  shadowTertiary: o.boxShadows.indigoThick,
-  iconPrimary: o.colors.cobalt,
-  scrollColor: `${o.colors.cobalt}99`,
-  iconColors: {
-    iconColor: o.colors.cobalt,
-    backgroundColor: o.colors.sky
-  }
-}, I = {
-  backgroundPrimary: o.colors.lighterRed,
-  backgroundSecondary: o.colors.lightRed,
-  backgroundTertiary: o.colors.cherryBlossom,
-  backgroundQuaternary: o.colors.lighterRed,
-  borderPrimary: o.colors.darkRed,
-  shadowPrimary: o.colors.maroon,
-  shadowSecondary: o.boxShadows.burgundy,
-  shadowTertiary: o.boxShadows.maroonThick,
-  iconPrimary: o.colors.maroon,
-  scrollColor: `${o.colors.maroon}99`,
-  iconColors: {
-    iconColor: o.colors.maroon,
-    backgroundColor: o.colors.lighterRed
-  }
-}, B = {
-  blue: z,
-  red: I,
-  green: void 0
-}, O = ({
-  children: r,
-  loading: l = !1,
-  hasPagination: s = !1,
-  fade: t = !0,
-  userProfileMenuItems: a,
-  ...c
+}));
+function G(o, i) {
+  return o == "green" ? C : u(i);
+}
+const _ = ({
+  children: o,
+  loading: i = !1,
+  hasPagination: m = !1,
+  fade: l = !0,
+  userProfileMenuItems: s,
+  ...n
 }) => {
-  const x = localStorage.getItem("theme") || "green", [i, n] = C(x), d = h(`(max-width: ${o.screenSizes.mobile})`), y = h(`(max-width: ${o.screenSizes.tablet})`), k = B[i], p = [
+  const w = localStorage.getItem("theme") || "green", p = localStorage.getItem("hue") || g(t.themeOptions.green).toString(), x = S(`(max-width: ${t.screenSizes.mobile})`), I = S(`(max-width: ${t.screenSizes.tablet})`), [e, d] = b(
+    () => G(w, parseFloat(p))
+  ), [M, c] = b({ h: Math.max(parseFloat(p), 0) * 360, s: 0, v: 68, a: 1 }), P = [
     {
-      label: "Green Theme",
+      label: "Default Theme",
       onClick: () => {
-        localStorage.setItem("theme", "green"), n("green");
+        localStorage.setItem("theme", "green"), localStorage.setItem("hue", g(t.themeOptions.green).toString()), c((h) => ({ ...h, h: g(t.themeOptions.green) * 360 })), d(C);
       }
     },
     {
-      label: "Blue Theme",
+      label: "Grayscale",
       onClick: () => {
-        localStorage.setItem("theme", "blue"), n("blue");
+        localStorage.setItem("theme", "grayscale"), localStorage.setItem("hue", "-1"), c((h) => ({ ...h, h: 0 }));
+        const a = u(-1);
+        d(a);
       }
     },
     {
-      label: "Red Theme",
-      onClick: () => {
-        localStorage.setItem("theme", "red"), n("red");
+      label: "Hue",
+      hue: M.h,
+      onChange: (a) => {
+        localStorage.setItem("theme", "custom"), localStorage.setItem("hue", (a.h / 360).toString()), c((v) => ({ ...v, h: a.h }));
+        const h = u(a.h / 360);
+        d(h);
       }
     },
-    ...a || []
-  ];
-  return /* @__PURE__ */ e(
-    w,
+    ...s || []
+  ], k = $(
+    () => ({
+      backgroundPrimary: e.themeLight,
+      backgroundSecondary: e.themeLightA,
+      backgroundTertiary: e.themeMediumC,
+      backgroundQuaternary: e.themeMediumB,
+      borderPrimary: e.themeColor,
+      shadowPrimary: e.themeShadowA,
+      shadowSecondary: e.themeShadowB,
+      shadowTertiary: e.themeShadowC,
+      iconPrimary: e.themeDark,
+      scrollColor: e.themeShadowA,
+      loadingColor: e.themeColor,
+      iconColors: {
+        icon: /* @__PURE__ */ r(D, {}),
+        iconColor: e.themeDark ?? t.colors.darkGreen,
+        backgroundColor: e.themeMediumA ?? t.colors.mint
+      },
+      highlightPrimary: e.highlightPrimary,
+      highlightSecondary: e.highlightSecondary,
+      highlightTertiary: e.highlightTertiary
+    }),
+    [e]
+  );
+  return /* @__PURE__ */ r(
+    O,
     {
-      ...c,
-      userProfileMenuItems: p,
-      themeColors: k ?? (c == null ? void 0 : c.themeColors),
-      children: /* @__PURE__ */ e(
-        R,
+      ...n,
+      userProfileMenuItems: P,
+      themeColors: k ?? (n == null ? void 0 : n.themeColors),
+      children: /* @__PURE__ */ r(
+        B,
         {
           className: "jcPageWrapper",
-          loading: l,
-          loadingColor: v[i],
-          hasPagination: s,
-          hasFade: t,
-          isTablet: y,
-          children: /* @__PURE__ */ m(T, { loading: l, size: d ? 114 : 201, children: [
-            t && /* @__PURE__ */ m(f, { children: [
-              /* @__PURE__ */ e(S, { color: g[i] }),
-              /* @__PURE__ */ e(P, { hasPagination: s, isMobile: d, color: g[i] })
+          loading: i,
+          loadingColor: e.themeColor,
+          hasPagination: m,
+          hasFade: l,
+          isTablet: I,
+          children: /* @__PURE__ */ f(A, { loading: i, size: x ? 114 : 201, children: [
+            l && /* @__PURE__ */ f(F, { children: [
+              /* @__PURE__ */ r(L, { color: e.themeLight }),
+              /* @__PURE__ */ r(j, { hasPagination: m, isMobile: x, color: e.themeLight })
             ] }),
-            /* @__PURE__ */ e(M, { children: r })
+            /* @__PURE__ */ r(z.Provider, { value: e, children: /* @__PURE__ */ r(H, { children: o }) })
           ] })
         }
       )
@@ -142,7 +137,7 @@ const $ = ["loading", "hasPagination", "loadingColor"], R = u("div", { shouldFor
   );
 };
 export {
-  M as MainContentContainer,
-  R as PageWrapper,
-  O as default
+  H as MainContentContainer,
+  B as PageWrapper,
+  _ as default
 };