jcicl 0.0.109 → 0.0.112

package/EditableInfoCard/EditableInfoCard.js

@@ -1,22 +1,21 @@
-import { jsx as o, jsxs as n, Fragment as M } from "react/jsx-runtime";
-import { useState as B, useEffect as O } from "react";
+import { jsx as o, jsxs as n, Fragment as k } from "react/jsx-runtime";
+import { useState as B, useEffect as N } from "react";
 import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as m } from "../.chunks/emotion-react.browser.esm.js";
-import { c as C } from "../.chunks/createSvgIcon.js";
+import { c as j } from "../.chunks/createSvgIcon.js";
+import { X as O } from "../.chunks/Close.js";
 import d from "../theme.js";
 import { LabeledValue as Q } from "../LabeledValue/LabeledValue.js";
-import { LabeledInput as X } from "../LabeledInput/LabeledInput.js";
+import { LabeledInput as Z } from "../LabeledInput/LabeledInput.js";
 import L from "../Loading/Loading.js";
-import P from "../WithLoading/WithLoading.js";
+import M from "../WithLoading/WithLoading.js";
 import { Flex as f } from "../Flex/Flex.js";
 import { Tooltip as x } from "../Tooltip/Tooltip.js";
-import { T as Z } from "../.chunks/Input.js";
-import { B as _ } from "../.chunks/ButtonBase.js";
-const oo = C(/* @__PURE__ */ o("path", {
+import { T as _ } from "../.chunks/Input.js";
+import { B as oo } from "../.chunks/ButtonBase.js";
+const eo = j(/* @__PURE__ */ o("path", {
   d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
-}), "Edit"), eo = C(/* @__PURE__ */ o("path", {
-  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), "Close"), to = C(/* @__PURE__ */ o("path", {
+}), "Edit"), to = j(/* @__PURE__ */ o("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
 }), "Check"), T = l("div")(
   ({ width: t, padding: a, shadow: r, styles: u, isEditing: c }) => ({
@@ -44,7 +43,7 @@ const oo = C(/* @__PURE__ */ o("path", {
       opacity: ${c ? "0" : "1"};
     `
   })
-), ro = l(Z)({
+), ro = l(_)({
   backgroundColor: d.colors.white,
   borderRadius: "0",
   input: {
@@ -54,11 +53,11 @@ const oo = C(/* @__PURE__ */ o("path", {
     padding: "0",
     borderRadius: "0",
     borderBottom: `1px solid ${d.colors.gray}`,
-    "&:focus, :focus-visible": {
+    "&:focus-visible": {
       boxShadow: `0 3px 2px -2px ${d.colors.darkGreen}`
     }
   },
-  "&:hover, :focus, :focus-visible": {
+  "&:hover, :focus-visible": {
     input: {
       boxShadow: `0 3px 2px -2px ${d.colors.darkGreen}`
     }
@@ -81,7 +80,7 @@ const oo = C(/* @__PURE__ */ o("path", {
     opacity: ${t ? "1" : "0"};
     transition: 920ms all ease-in-out;
   `
-})), R = l("div")(
+})), P = l("div")(
   ({ spacing: t, columns: a, numRows: r }) => ({
     ...m`
       margin-top: calc(${t} * 0.75);
@@ -92,7 +91,7 @@ const oo = C(/* @__PURE__ */ o("path", {
       grid-template-rows: repeat(${r}, 1fr);
     `
   })
-), $ = l(_)(() => ({
+), $ = l(oo)(() => ({
   ...m`
     width: 40px;
     height: 40px;
@@ -101,9 +100,9 @@ const oo = C(/* @__PURE__ */ o("path", {
 })), ao = l("div")`
   position: relative;
   width: 100%;
-`, j = l("div")`
+`, R = l("div")`
   height: 19px;
-`, wo = ({
+`, vo = ({
   decorativeElement: t,
   title: a,
   items: r = [],
@@ -111,12 +110,12 @@ const oo = C(/* @__PURE__ */ o("path", {
   shadow: c = d.boxShadow.darkGreen,
   spacing: V = "2rem",
   titleSpacing: w = "1rem",
-  canEditTitle: v = !0,
-  columns: z = 3,
+  canEditTitle: C = !0,
+  columns: v = 3,
   styles: Y,
   width: E = "100%",
   loading: I = !1,
-  titleLoading: y = !1,
+  titleLoading: z = !1,
   onSave: F = () => {
   },
   onCancel: G = () => {
@@ -124,27 +123,27 @@ const oo = C(/* @__PURE__ */ o("path", {
   onEdit: W = () => {
   }
 }) => {
-  const b = r.reduce((e, i) => ({ ...e, [i.label]: i.value }), { titleValue: a }), [U, g] = B(!1), [p, h] = B(b);
-  O(() => {
+  const b = r.reduce((e, i) => ({ ...e, [i.label]: i.value }), { titleValue: a }), [X, g] = B(!1), [p, h] = B(b);
+  N(() => {
     h(b);
   }, [r]);
-  const q = () => {
+  const U = () => {
     W(), g(!0);
-  }, A = () => {
+  }, q = () => {
     F(p), g(!1);
-  }, D = () => {
+  }, A = () => {
     G(), h(b), g(!1);
-  }, H = (e, i) => {
-    h((N) => ({ ...N, [e]: i }));
-  }, J = (e) => {
+  }, D = (e, i) => {
+    h((K) => ({ ...K, [e]: i }));
+  }, H = (e) => {
     h((i) => ({ ...i, titleValue: e }));
-  }, K = Math.ceil(r.length / z), s = 50, S = { width: E, padding: u, shadow: c, styles: Y, isEditing: U }, k = { spacing: V, columns: z, numRows: K };
+  }, J = Math.ceil(r.length / v), s = 50, y = { width: E, padding: u, shadow: c, styles: Y, isEditing: X }, S = { spacing: V, columns: v, numRows: J };
   return /* @__PURE__ */ n(ao, { children: [
-    /* @__PURE__ */ n(T, { ...S, children: [
+    /* @__PURE__ */ n(T, { ...y, children: [
       /* @__PURE__ */ n(f, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
         /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
           t && t,
-          /* @__PURE__ */ o(P, { size: 36, loading: v && y, children: /* @__PURE__ */ o("h3", { children: a }) })
+          /* @__PURE__ */ o(M, { size: 36, loading: C && z, children: /* @__PURE__ */ o("h3", { children: a }) })
         ] }),
         /* @__PURE__ */ o(
           x,
@@ -163,12 +162,12 @@ const oo = C(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: q, children: /* @__PURE__ */ o(oo, {}) })
+            children: /* @__PURE__ */ o($, { onClick: U, children: /* @__PURE__ */ o(eo, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(R, { ...k, children: I ? /* @__PURE__ */ n(M, { children: [
-        /* @__PURE__ */ o(j, {}),
+      /* @__PURE__ */ o(P, { ...S, children: I ? /* @__PURE__ */ n(k, { children: [
+        /* @__PURE__ */ o(R, {}),
         /* @__PURE__ */ o(
           L,
           {
@@ -182,14 +181,14 @@ const oo = C(/* @__PURE__ */ o("path", {
         )
       ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(Q, { ...e }, e.label)) })
     ] }),
-    /* @__PURE__ */ n(no, { ...S, children: [
+    /* @__PURE__ */ n(no, { ...y, children: [
       /* @__PURE__ */ n(f, { width: "100%", justifyContent: "space-between", children: [
         /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
           t && t,
-          v ? /* @__PURE__ */ o(P, { size: 36, loading: y, children: /* @__PURE__ */ o(
+          C ? /* @__PURE__ */ o(M, { size: 36, loading: z, children: /* @__PURE__ */ o(
             ro,
             {
-              onChange: (e) => J(e.target.value),
+              onChange: (e) => H(e.target.value),
               value: (p == null ? void 0 : p.titleValue) ?? a
             }
           ) }) : /* @__PURE__ */ o("h3", { children: a })
@@ -211,7 +210,7 @@ const oo = C(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: D, children: /* @__PURE__ */ o(eo, {}) })
+            children: /* @__PURE__ */ o($, { onClick: A, children: /* @__PURE__ */ o(O, {}) })
           }
         ),
         /* @__PURE__ */ o(
@@ -231,12 +230,12 @@ const oo = C(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: A, children: /* @__PURE__ */ o(to, {}) })
+            children: /* @__PURE__ */ o($, { onClick: q, children: /* @__PURE__ */ o(to, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(R, { ...k, children: I ? /* @__PURE__ */ n(M, { children: [
-        /* @__PURE__ */ o(j, {}),
+      /* @__PURE__ */ o(P, { ...S, children: I ? /* @__PURE__ */ n(k, { children: [
+        /* @__PURE__ */ o(R, {}),
         /* @__PURE__ */ o(
           L,
           {
@@ -249,11 +248,11 @@ const oo = C(/* @__PURE__ */ o("path", {
           }
         )
       ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
-        X,
+        Z,
         {
           label: e.label,
           value: p[e.label],
-          onChange: (i) => H(e.label, i.target.value)
+          onChange: (i) => D(e.label, i.target.value)
         },
         e.label
       )) })
@@ -261,6 +260,6 @@ const oo = C(/* @__PURE__ */ o("path", {
   ] });
 };
 export {
-  wo as EditableInfoCard,
-  wo as default
+  vo as EditableInfoCard,
+  vo as default
 };

package/ErrorBoundary/ErrorBoundary.d.ts

@@ -16,6 +16,6 @@ declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBou
         error: any;
     };
     componentDidCatch(error: any, errorInfo: any): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export default ErrorBoundary;

package/Icon/Icon.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
 import { B as c } from "../.chunks/ButtonBase.js";
 import t from "../theme.js";
-import { n as d, i as p } from "../.chunks/emotion-styled.browser.esm.js";
-const a = d("div", {
+import { n as l, i as p } from "../.chunks/emotion-styled.browser.esm.js";
+const a = l("div", {
   shouldForwardProp: (r) => p(r)
 })(
   ({ iconColor: r = t.colors.darkGreen, backgroundColor: n = t.colors.mint, size: e = 40 }) => ({
@@ -20,13 +20,13 @@ const a = d("div", {
       pointerEvents: "none"
     }
   })
-), m = d(c)({
+), m = l(c)({
   backgroundColor: "transparent",
   borderRadius: "50%",
   span: {
     transition: "313ms all ease-in-out"
   },
-  "&:hover, :focus": {
+  "&:hover, :focus-visible": {
     span: {
       backgroundColor: t.colors.grayO44
     }
@@ -35,10 +35,10 @@ const a = d("div", {
   icon: r,
   iconColor: n,
   backgroundColor: e,
-  size: l,
+  size: d,
   ...o
 }) => {
-  const s = { iconColor: n, backgroundColor: e, size: l };
+  const s = { iconColor: n, backgroundColor: e, size: d };
   return o != null && o.onClick ? /* @__PURE__ */ i(m, { ...o, children: /* @__PURE__ */ i(a, { ...s, children: r }) }) : /* @__PURE__ */ i(a, { ...s, children: r });
 };
 export {

package/ListButton/ListButton.d.ts

@@ -5,9 +5,7 @@ export interface ListButtonProps extends ButtonBaseProps {
     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<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
+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" | "children" | "sx" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
     theme?: import('@emotion/react').Theme;
 } & ListButtonProps, {}, {}>;
 export default ListButton;

package/ListButton/ListButton.js

@@ -1,9 +1,9 @@
 import { n as s, i } from "../.chunks/emotion-styled.browser.esm.js";
-import t from "../theme.js";
+import e from "../theme.js";
 import { B as p } from "../.chunks/ButtonBase.js";
 const l = s(p, {
   shouldForwardProp: (o) => i(o) && typeof o == "string"
-})(({ padding: o = "1rem", active: e, activeStyles: r }) => ({
+})(({ padding: o = "1rem", active: t, activeStyles: r }) => ({
   display: "flex",
   width: "100%",
   height: "100%",
@@ -11,12 +11,12 @@ const l = s(p, {
   fontSize: "inherit",
   justifyContent: "flex-start",
   transition: "201ms all ease-in-out",
-  ...e && {
-    boxShadow: `inset 0px -11px 6px -10px ${t.colors.darkGreen}, inset 0px 11px 6px -10px ${t.colors.darkGreen}`,
+  ...t && {
+    boxShadow: `inset 0px -11px 6px -10px ${e.colors.darkGreen}, inset 0px 11px 6px -10px ${e.colors.darkGreen}`,
     ...r
   },
-  "&:hover, :focus": {
-    boxShadow: `inset 0px -11px 6px -10px ${t.colors.green}, inset 0px 11px 6px -10px ${t.colors.green}`
+  "&:hover, :focus-visible": {
+    boxShadow: `inset 0px -11px 6px -10px ${e.colors.green}, inset 0px 11px 6px -10px ${e.colors.green}`
   }
 }));
 export {

package/Nav/Nav.d.ts

@@ -1,14 +1,15 @@
 export interface NavItemProps {
     label?: string;
-    icon?: JSX.Element;
+    icon?: React.ReactNode;
     onClick?: () => void;
     active?: boolean;
-    actionsPanelContent?: JSX.Element;
+    actionsPanelContent?: React.ReactNode;
 }
 export interface NavProps {
     navItems: NavItemProps[];
     activeRoute?: string;
     navWidth?: string;
+    isTablet?: boolean;
 }
 export declare const Nav: React.FC<NavProps>;
 export default Nav;

package/Nav/Nav.js

@@ -1,30 +1,39 @@
-import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { jsx as s, jsxs as x } from "react/jsx-runtime";
 import { useState as u } from "react";
-import { n as a, i as x } from "../.chunks/emotion-styled.browser.esm.js";
-import o from "../theme.js";
+import { n as c, i as h } from "../.chunks/emotion-styled.browser.esm.js";
+import r from "../theme.js";
 import g from "../ScrollContainer/ScrollContainer.js";
-import { B as v } from "../.chunks/ButtonBase.js";
-const C = a(v, {
-  shouldForwardProp: (t) => x(t)
-})(({ active: t }) => ({
+import { B as k } from "../.chunks/ButtonBase.js";
+const C = c(k, {
+  shouldForwardProp: (n) => h(n)
+})(({ active: n, isTablet: o }) => ({
   display: "flex",
-  flexDirection: "column",
+  flexDirection: o ? "row" : "column",
   alignItems: "center",
-  justifyContent: "center",
+  justifyContent: o ? "flex-start" : "center",
   width: "100%",
-  padding: "0 8px 8px 8px",
+  padding: o ? "16px" : "0 8px 8px 8px",
   transition: "313ms all ease-in-out",
-  backgroundColor: t ? o.colors.sunlight : "transparent",
-  boxShadow: t ? o.boxShadow.darkGreen : "none",
+  backgroundColor: n ? r.colors.sunlight : "transparent",
+  boxShadow: n ? r.boxShadow.darkGreen : "none",
+  ...o && {
+    gap: "0.5rem"
+  },
   "&:hover, :focus-visible": {
     svg: {
-      backgroundColor: o.colors.sunlight
+      ...!o && {
+        backgroundColor: r.colors.sunlight
+      }
+    },
+    ...o && {
+      boxShadow: r.boxShadow.darkGreen,
+      backgroundColor: `${r.colors.dandelion}99`
     }
   },
   svg: {
     fontSize: "2.1rem",
-    fill: o.colors.darkGreen,
-    backgroundColor: t ? o.colors.sunlight : "transparent",
+    fill: r.colors.darkGreen,
+    backgroundColor: "transparent",
     borderRadius: "50%",
     padding: "8px",
     display: "flex",
@@ -36,10 +45,14 @@ const C = a(v, {
     fontFamily: "Roboto, sans-serif",
     fontSize: "12px",
     fontWeight: "bold",
-    color: o.colors.darkGreen,
-    textAlign: "center"
+    color: r.colors.darkGreen,
+    textAlign: "center",
+    ...o && {
+      fontSize: "1.5rem",
+      fontWeight: "500"
+    }
   }
-})), k = a("div")(({ navWidth: t }) => ({
+})), v = c("div")(({ navWidth: n, isTablet: o }) => ({
   display: "flex",
   flexDirection: "column",
   backgroundColor: "transparent",
@@ -47,32 +60,34 @@ const C = a(v, {
   justifyContent: "flex-start",
   maxHeight: "100%",
   flexShrink: 0,
-  gap: "1rem",
-  width: t
-})), D = ({
-  navItems: t,
-  activeRoute: s,
-  navWidth: e = `${o.constants.navDefaultWidth}px`
+  gap: o ? 0 : "1rem",
+  width: n
+})), z = ({
+  navItems: n,
+  activeRoute: o,
+  navWidth: e = `${r.constants.navDefaultWidth}px`,
+  isTablet: a
 }) => {
-  const [l, c] = u(""), d = (r, n) => {
-    c(r), n();
-  }, p = { navWidth: e };
-  return /* @__PURE__ */ i(
-    g,
+  const [d, l] = u(""), p = (i, t) => {
+    l(i), t();
+  };
+  return /* @__PURE__ */ s(g, { direction: "vertical", width: e, styles: { minWidth: e }, children: /* @__PURE__ */ s(v, { ...{ navWidth: e, isTablet: a }, children: n.map(({ icon: i, label: t = "", onClick: f = () => {
+  }, ...m }) => /* @__PURE__ */ x(
+    C,
     {
-      direction: "vertical",
-      height: `calc(100vh - ${o.constants.appHeaderHeight}px - 8px)`,
-      width: e,
-      styles: { minWidth: e },
-      children: /* @__PURE__ */ i(k, { ...p, children: t.map(({ icon: r, label: n = "", onClick: m = () => {
-      }, ...f }) => /* @__PURE__ */ h(C, { ...f, active: s ? s === n : l === n, onClick: () => d(n, m), children: [
-        r,
-        /* @__PURE__ */ i("span", { children: n })
-      ] }, n)) })
-    }
-  );
+      ...m,
+      active: o ? o === t : d === t,
+      onClick: () => p(t, f),
+      isTablet: a,
+      children: [
+        i,
+        /* @__PURE__ */ s("span", { children: t })
+      ]
+    },
+    t
+  )) }) });
 };
 export {
-  D as Nav,
-  D as default
+  z as Nav,
+  z as default
 };