jcicl 0.0.45 → 0.0.49

package/.chunks/ButtonBase.js

@@ -3,7 +3,7 @@ var ke = (n, t, o) => t in n ? Le(n, t, { enumerable: !0, configurable: !0, writ
 var ue = (n, t, o) => ke(n, typeof t != "symbol" ? t + "" : t, o);
 import * as d from "react";
 import W, { Children as Oe, isValidElement as G, cloneElement as J } from "react";
-import { P as e, c as E, g as fe, s as te, u as de, a as je, b as Fe } from "./DefaultPropsProvider.js";
+import { P as e, b as E, a as fe, s as te, u as de, g as je, d as Fe } from "./DefaultPropsProvider.js";
 import { jsx as U, jsxs as Ie } from "react/jsx-runtime";
 import { k as ne } from "./emotion-react.browser.esm.js";
 import { u as Ue, _ as $e, a as ze, T as le, b as _e, c as ce, d as H, r as Ae, e as Xe } from "./TransitionGroupContext.js";

package/.chunks/DefaultPropsProvider.js

@@ -3260,13 +3260,13 @@ function Fo(e) {
 export {
   me as P,
   Po as T,
-  Zr as a,
-  No as b,
-  jo as c,
-  Fn as d,
-  mr as e,
+  Do as a,
+  jo as b,
+  mr as c,
+  No as d,
+  Fn as e,
   lr as f,
-  Do as g,
+  Zr as g,
   nt as h,
   _o as i,
   ye as j,

package/.chunks/TransitionGroupContext.js

@@ -2,59 +2,55 @@ var y = Object.defineProperty;
 var m = (e, t, n) => t in e ? y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var u = (e, t, n) => m(e, typeof t != "symbol" ? t + "" : t, n);
 import { P as c } from "./DefaultPropsProvider.js";
+import { c as h } from "./chainPropTypes.js";
 import * as o from "react";
-import h from "react";
-function E(e, t) {
-  return process.env.NODE_ENV === "production" ? () => null : function(...r) {
-    return e(...r) || t(...r);
-  };
-}
-function T(e) {
+import T from "react";
+function E(e) {
   const {
     prototype: t = {}
   } = e;
   return !!t.isReactComponent;
 }
-function I(e, t, n, r, p) {
-  const i = e[t], d = p || t;
-  if (i == null || // When server-side rendering React doesn't warn either.
+function I(e, t, n, r, l) {
+  const s = e[t], d = l || t;
+  if (s == null || // When server-side rendering React doesn't warn either.
   // This is not an accurate check for SSR.
   // This is only in place for emotion compat.
   // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
   typeof window > "u")
     return null;
-  let s;
-  return typeof i == "function" && !T(i) && (s = "Did you accidentally provide a plain function component instead?"), s !== void 0 ? new Error(`Invalid ${r} \`${d}\` supplied to \`${n}\`. Expected an element type that can hold a ref. ${s} For more information see https://mui.com/r/caveat-with-refs-guide`) : null;
+  let i;
+  return typeof s == "function" && !E(s) && (i = "Did you accidentally provide a plain function component instead?"), i !== void 0 ? new Error(`Invalid ${r} \`${d}\` supplied to \`${n}\`. Expected an element type that can hold a ref. ${i} For more information see https://mui.com/r/caveat-with-refs-guide`) : null;
 }
-const j = E(c.elementType, I), L = c.oneOfType([c.func, c.object]);
+const L = h(c.elementType, I), $ = c.oneOfType([c.func, c.object]);
 function R(e, t) {
   typeof e == "function" ? e(t) : e && (e.current = t);
 }
-const O = typeof window < "u" ? o.useLayoutEffect : o.useEffect;
-function $(e) {
+const P = typeof window < "u" ? o.useLayoutEffect : o.useEffect;
+function g(e) {
   const t = o.useRef(e);
-  return O(() => {
+  return P(() => {
     t.current = e;
   }), o.useRef((...n) => (
     // @ts-expect-error hide `this`
     (0, t.current)(...n)
   )).current;
 }
-function g(...e) {
+function x(...e) {
   return o.useMemo(() => e.every((t) => t == null) ? null : (t) => {
     e.forEach((n) => {
       R(n, t);
     });
   }, e);
 }
-const l = {};
-function P(e, t) {
-  const n = o.useRef(l);
-  return n.current === l && (n.current = e(t)), n;
+const p = {};
+function w(e, t) {
+  const n = o.useRef(p);
+  return n.current === p && (n.current = e(t)), n;
 }
-const _ = [];
-function w(e) {
-  o.useEffect(e, _);
+const O = [];
+function _(e) {
+  o.useEffect(e, O);
 }
 class a {
   constructor() {
@@ -76,11 +72,11 @@ class a {
     }, t);
   }
 }
-function x() {
-  const e = P(a.create).current;
-  return w(e.disposeEffect), e;
+function A() {
+  const e = w(a.create).current;
+  return _(e.disposeEffect), e;
 }
-function N(e, t) {
+function M(e, t) {
   if (e == null) return {};
   var n = {};
   for (var r in e) if ({}.hasOwnProperty.call(e, r)) {
@@ -94,21 +90,20 @@ function f(e, t) {
     return n.__proto__ = r, n;
   }, f(e, t);
 }
-function A(e, t) {
+function k(e, t) {
   e.prototype = Object.create(t.prototype), e.prototype.constructor = e, f(e, t);
 }
-const D = h.createContext(null);
+const D = T.createContext(null);
 export {
   D as T,
-  A as _,
-  N as a,
-  x as b,
-  g as c,
-  $ as d,
-  j as e,
-  E as f,
-  O as g,
-  L as r,
+  k as _,
+  M as a,
+  A as b,
+  x as c,
+  g as d,
+  L as e,
+  P as f,
+  $ as r,
   R as s,
-  P as u
+  w as u
 };

package/.chunks/chainPropTypes.js

@@ -0,0 +1,8 @@
+function o(r, e) {
+  return process.env.NODE_ENV === "production" ? () => null : function(...n) {
+    return r(...n) || e(...n);
+  };
+}
+export {
+  o as c
+};

package/.chunks/createSvgIcon.js

@@ -1,6 +1,6 @@
 import * as z from "react";
 import { jsxs as I, jsx as b } from "react/jsx-runtime";
-import { a as w, g as C, s as T, e as x, u as N, c as O, P as e, b as R } from "./DefaultPropsProvider.js";
+import { g as w, a as C, s as T, c as x, u as N, b as O, P as e, d as R } from "./DefaultPropsProvider.js";
 import { m as j } from "./memoTheme.js";
 function E(o) {
   return w("MuiSvgIcon", o);

package/base/Button/Button.js

@@ -1,6 +1,6 @@
 import { jsxs as D, jsx as d } from "react/jsx-runtime";
 import * as g from "react";
-import { a as F, g as U, s as c, r as _, e, f as H, u as A, c as w, P as t, b as q, d as b } from "../../.chunks/DefaultPropsProvider.js";
+import { g as F, a as U, s as c, r as _, c as e, f as H, u as A, b as w, P as t, d as q, e as b } from "../../.chunks/DefaultPropsProvider.js";
 import { m as J } from "../../.chunks/memoTheme.js";
 import { c as K } from "../../.chunks/createSimplePaletteValueFilter.js";
 import { B as Q } from "../../.chunks/ButtonBase.js";

package/base/Divider/Divider.js

@@ -1,7 +1,7 @@
 import { jsx as g } from "react/jsx-runtime";
 import { n as C, i as D } from "../../.chunks/emotion-styled.browser.esm.js";
 import * as A from "react";
-import { g as R, a as S, s as u, u as T, c as L, P as r, b as W, d as $ } from "../../.chunks/DefaultPropsProvider.js";
+import { a as R, g as S, s as u, u as T, b as L, P as r, d as W, e as $ } from "../../.chunks/DefaultPropsProvider.js";
 import { m as b } from "../../.chunks/memoTheme.js";
 function I(t) {
   return S("MuiDivider", t);

package/base/Flex/Flex.d.ts

@@ -5,14 +5,13 @@ export type FlexProps = {
     children: React.ReactNode;
     alignItems?: AlignItems;
     justifyContent?: JustifyContent;
-    center?: boolean;
+    placeContent?: string;
     column?: boolean;
-    full?: boolean;
     width?: string;
     height?: string;
     wrap?: boolean;
-    padding?: number;
-    gap?: number;
+    padding?: string;
+    gap?: string;
     styles?: CSSProperties;
 };
 declare const Flex: React.FC<FlexProps>;

package/base/Flex/Flex.js

@@ -1,22 +1,23 @@
 import { jsx as d } from "react/jsx-runtime";
-import { n as x, i as p } from "../../.chunks/emotion-styled.browser.esm.js";
-const w = x("div", {
-  shouldForwardProp: (t) => p(t) && typeof t == "string" && t !== "wrap"
+import { n as p, i as m } from "../../.chunks/emotion-styled.browser.esm.js";
+const w = p("div", {
+  shouldForwardProp: (o) => m(o) && typeof o == "string" && o !== "wrap"
 })(
-  ({ column: t, alignItems: r, justifyContent: n, center: e, wrap: s, full: o, width: l, height: f, styles: m, padding: a, gap: i }) => ({
+  ({ column: o, alignItems: r, justifyContent: a, wrap: t, width: e, height: i, styles: n, padding: s, gap: l, placeContent: f }) => ({
     display: "flex",
-    flexDirection: t ? "column" : "row",
-    flexWrap: s ? "wrap" : "nowrap",
-    alignItems: r ?? (e ? "center" : "flex-start"),
-    justifyContent: n ?? (e ? "center" : "flex-start"),
-    width: l ?? (o ? "100%" : "auto"),
-    height: f ?? (o ? "100%" : "auto"),
-    gap: i ? `${i}rem` : 0,
-    padding: a ? `${a}rem` : 0,
+    flexDirection: o ? "column" : "row",
+    flexWrap: t ? "wrap" : "nowrap",
+    alignItems: r,
+    justifyContent: a,
+    placeContent: f,
+    width: e,
+    height: i,
+    gap: l,
+    padding: s,
     fontFamily: "Roboto, sans-serif",
-    ...m
+    ...n
   })
-), y = ({ children: t, ...r }) => /* @__PURE__ */ d(w, { ...r, children: t });
+), u = ({ children: o, ...r }) => /* @__PURE__ */ d(w, { ...r, children: o });
 export {
-  y as default
+  u as default
 };

package/base/Grid/Grid.d.ts

@@ -5,9 +5,9 @@ export type GridProps = {
     autoColumns?: string;
     rows?: string;
     autoRows?: string;
-    gap?: number;
-    columnGap?: number;
-    rowGap?: number;
+    gap?: string;
+    columnGap?: string;
+    rowGap?: string;
     styles?: CSSProperties;
 };
 export declare const Grid: React.FC<GridProps>;

package/base/Grid/Grid.js

@@ -1,18 +1,18 @@
-import { jsx as n } from "react/jsx-runtime";
-import { n as s } from "../../.chunks/emotion-styled.browser.esm.js";
-const p = s("div")(
-  ({ columns: r, autoColumns: o, rows: e, autoRows: t, gap: m, columnGap: i, rowGap: a, styles: d }) => ({
-    gridTemplateColumns: r,
-    gridAutoColumns: o,
-    gridTemplateRows: e,
-    gridAutoRows: t,
-    gap: `${m}rem`,
-    columnGap: `${i}rem`,
-    rowGap: `${a}rem`,
+import { jsx as m } from "react/jsx-runtime";
+import { n as a } from "../../.chunks/emotion-styled.browser.esm.js";
+const l = a("div")(
+  ({ columns: o, autoColumns: r, rows: t, autoRows: i, gap: d, columnGap: e, rowGap: s, styles: n }) => ({
+    gridTemplateColumns: o,
+    gridAutoColumns: r,
+    gridTemplateRows: t,
+    gridAutoRows: i,
+    gap: d,
+    columnGap: e,
+    rowGap: s,
     display: "grid",
-    ...d
+    ...n
   })
-), g = ({ children: r, ...o }) => /* @__PURE__ */ n(p, { ...o, children: r });
+), g = ({ children: o, ...r }) => /* @__PURE__ */ m(l, { ...r, children: o });
 export {
   g as Grid,
   g as default

package/base/Icon/Icon.d.ts

@@ -0,0 +1,9 @@
+import { ButtonBaseProps } from '@mui/material/ButtonBase/ButtonBase';
+export interface IconProps {
+    icon: React.ReactNode;
+    iconColor?: string;
+    backgroundColor?: string;
+    size?: number;
+}
+declare const Icon: React.FC<IconProps & ButtonBaseProps>;
+export default Icon;

package/base/Icon/Icon.js

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

package/base/Icon/index.d.ts

@@ -0,0 +1 @@
+export { default, type IconProps } from './Icon';

package/base/Icon/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Icon.js";
+export {
+  o as default
+};

package/base/Input/Input.js

@@ -3,10 +3,11 @@ import { T as ro, n as so } from "../../.chunks/emotion-styled.browser.esm.js";
 import Me from "../../theme.js";
 import * as c from "react";
 import lt from "react";
-import { P as e, c as J, h as io, f as ao, i as Dt, T as $t, g as oe, a as re, e as pe, s as L, u as le, b as se, j as gn, r as Ce, k as Lt, l as jt, d as qt, m as Ht, n as lo } from "../../.chunks/DefaultPropsProvider.js";
-import { f as yt, c as fe, _ as co, a as uo, T as yn, g as We, e as vn, r as Pe, b as po, s as Kt, d as Gt } from "../../.chunks/TransitionGroupContext.js";
+import { P as e, b as J, h as io, f as ao, i as Dt, T as $t, a as oe, g as re, c as pe, s as L, u as le, d as se, j as gn, r as Ce, k as Lt, l as jt, e as qt, m as Ht, n as lo } from "../../.chunks/DefaultPropsProvider.js";
+import { c as fe, _ as co, a as uo, T as yn, f as We, e as vn, r as Pe, b as po, s as Kt, d as Gt } from "../../.chunks/TransitionGroupContext.js";
 import { m as ce } from "../../.chunks/memoTheme.js";
-import { c as vt } from "../../.chunks/createSimplePaletteValueFilter.js";
+import { c as yt } from "../../.chunks/createSimplePaletteValueFilter.js";
+import { c as vt } from "../../.chunks/chainPropTypes.js";
 import * as fo from "react-dom";
 import ct from "react-dom";
 import { c as mo } from "../../.chunks/createSvgIcon.js";
@@ -29,8 +30,8 @@ function En(t, n, o, r, s) {
   const u = i.type;
   return typeof u == "function" && !ho(u) && (l = "Did you accidentally use a plain function component for an element instead?"), l !== void 0 ? new Error(`Invalid ${r} \`${a}\` supplied to \`${o}\`. Expected an element that can hold a ref. ${l} For more information see https://mui.com/r/caveat-with-refs-guide`) : null;
 }
-const it = yt(e.element, En);
-it.isRequired = yt(e.element.isRequired, En);
+const it = vt(e.element, En);
+it.isRequired = vt(e.element.isRequired, En);
 const go = "exact-prop: ​";
 function Tn(t) {
   return process.env.NODE_ENV === "production" ? t : {
@@ -1595,7 +1596,7 @@ const Ye = {
           borderBottomStyle: "dotted"
         }
       }
-    }, ...Object.entries(t.palette).filter(vt()).map(([r]) => ({
+    }, ...Object.entries(t.palette).filter(yt()).map(([r]) => ({
       props: {
         color: r,
         disableUnderline: !1
@@ -1943,7 +1944,7 @@ const Fe = {
           borderBottomStyle: "dotted"
         }
       }
-    }, ...Object.entries(t.palette).filter(vt()).map(([a]) => {
+    }, ...Object.entries(t.palette).filter(yt()).map(([a]) => {
       var l;
       return {
         props: {
@@ -2509,7 +2510,7 @@ const Oe = {
     [`&.${Oe.focused} .${Oe.notchedOutline}`]: {
       borderWidth: 2
     },
-    variants: [...Object.entries(t.palette).filter(vt()).map(([o]) => ({
+    variants: [...Object.entries(t.palette).filter(yt()).map(([o]) => ({
       props: {
         color: o
       },
@@ -2886,7 +2887,7 @@ const et = oe("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled",
   lineHeight: "1.4375em",
   padding: 0,
   position: "relative",
-  variants: [...Object.entries(t.palette).filter(vt()).map(([n]) => ({
+  variants: [...Object.entries(t.palette).filter(yt()).map(([n]) => ({
     props: {
       color: n
     },
@@ -5436,7 +5437,7 @@ process.env.NODE_ENV !== "production" && (Xn.propTypes = {
    * It accepts values between 0 and 24 inclusive.
    * @default 1
    */
-  elevation: yt(wn, (t) => {
+  elevation: vt(wn, (t) => {
     const {
       elevation: n,
       variant: o
@@ -5708,7 +5709,7 @@ process.env.NODE_ENV !== "production" && (Zn.propTypes = {
    * or a function that returns either.
    * It's used to set the position of the popover.
    */
-  anchorEl: yt(e.oneOfType([nt, e.func]), (t) => {
+  anchorEl: vt(e.oneOfType([nt, e.func]), (t) => {
     if (t.open && (!t.anchorReference || t.anchorReference === "anchorEl")) {
       const n = pt(t.anchorEl);
       if (n && n.nodeType === 1) {
@@ -7480,8 +7481,8 @@ const vs = so(oo)({
       border: "none"
     }
   }
-}), ks = ({ ...t }) => /* @__PURE__ */ C(vs, { ...t });
+}), Ms = ({ ...t }) => /* @__PURE__ */ C(vs, { ...t });
 export {
-  ks as Input,
-  ks as default
+  Ms as Input,
+  Ms as default
 };

package/base/LabeledValue/LabeledValue.d.ts

@@ -0,0 +1,6 @@
+export interface LabeledValueProps {
+    label: string;
+    value: string;
+}
+export declare const LabeledValue: React.FC<LabeledValueProps>;
+export default LabeledValue;

package/base/LabeledValue/LabeledValue.js

@@ -0,0 +1,22 @@
+import { jsxs as e } from "react/jsx-runtime";
+import { n as a } from "../../.chunks/emotion-styled.browser.esm.js";
+import { c as n } from "../../.chunks/emotion-react.browser.esm.js";
+const r = a("span")({
+  ...n`
+    font-family: 'Roboto', sans-serif;
+    span {
+      font-weight: bold;
+    }
+  `
+}), f = ({ label: o, value: s }) => /* @__PURE__ */ e(r, { children: [
+  /* @__PURE__ */ e("span", { children: [
+    o,
+    ":"
+  ] }),
+  " ",
+  s
+] });
+export {
+  f as LabeledValue,
+  f as default
+};

package/base/LabeledValue/index.d.ts

@@ -0,0 +1 @@
+export { default, type LabeledValueProps } from './LabeledValue';

package/base/LabeledValue/index.js

@@ -0,0 +1,4 @@
+import { LabeledValue as l } from "./LabeledValue.js";
+export {
+  l as default
+};

package/base/ScrollContainer/ScrollContainer.d.ts

@@ -1,6 +1,7 @@
 export interface ScrollContainerProps {
     width?: string;
     height?: string;
+    /** Defines which direction scrolling is enabled for */
     direction?: 'vertical' | 'horizontal' | 'all';
     styles?: React.CSSProperties;
 }

package/base/index.d.ts

@@ -4,5 +4,8 @@ export { default as Button } from './Button';
 export { default as Divider } from './Divider';
 export { default as Flex } from './Flex';
 export { default as Grid } from './Grid';
+export { default as Icon } from './Icon';
 export { default as Input } from './Input';
+export { default as LabeledValue } from './LabeledValue';
 export { default as ListButton } from './ListButton';
+export { default as ScrollContainer } from './ScrollContainer';

package/base/index.js

@@ -1,18 +1,24 @@
-import { default as o } from "./Avatar/Avatar.js";
+import { default as t } from "./Avatar/Avatar.js";
 import { AvatarWithImage as a } from "./AvatarWithImage/AvatarWithImage.js";
 import { Button as m } from "./Button/Button.js";
 import { Divider as x } from "./Divider/Divider.js";
-import { default as d } from "./Flex/Flex.js";
-import { Grid as l } from "./Grid/Grid.js";
-import { Input as n } from "./Input/Input.js";
-import { default as A } from "./ListButton/ListButton.js";
+import { default as u } from "./Flex/Flex.js";
+import { Grid as i } from "./Grid/Grid.js";
+import { default as s } from "./Icon/Icon.js";
+import { Input as I } from "./Input/Input.js";
+import { LabeledValue as A } from "./LabeledValue/LabeledValue.js";
+import { default as L } from "./ListButton/ListButton.js";
+import { default as g } from "./ScrollContainer/ScrollContainer.js";
 export {
-  o as Avatar,
+  t as Avatar,
   a as AvatarWithImage,
   m as Button,
   x as Divider,
-  d as Flex,
-  l as Grid,
-  n as Input,
-  A as ListButton
+  u as Flex,
+  i as Grid,
+  s as Icon,
+  I as Input,
+  A as LabeledValue,
+  L as ListButton,
+  g as ScrollContainer
 };

package/composite/InfoCard/InfoCard.d.ts

@@ -0,0 +1,19 @@
+import { LabeledValueProps } from '../../../../../../../../../src/components/base/LabeledValue';
+interface InfoCardStyleProps {
+    /** The element placed before the header text. This can be any valid React Node */
+    decorativeElement?: React.ReactNode;
+    /** Padding for the card */
+    padding?: string;
+    /** Box shadow around the card */
+    shadow?: string;
+    /** Spacing between the items */
+    spacing?: string;
+    columns?: number;
+}
+export interface InfoCardProps extends InfoCardStyleProps {
+    title?: string;
+    /** An array of information to display in the card. Format: `{ label, value }`. Built on top of the Labeled Value component. */
+    items?: LabeledValueProps[];
+}
+export declare const InfoCard: React.FC<InfoCardProps>;
+export default InfoCard;

package/composite/InfoCard/InfoCard.js

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

package/composite/InfoCard/index.d.ts

@@ -0,0 +1 @@
+export { default, type InfoCardProps } from './InfoCard';

package/composite/InfoCard/index.js

@@ -0,0 +1,4 @@
+import { InfoCard as o } from "./InfoCard.js";
+export {
+  o as default
+};

package/composite/List/List.js

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

package/composite/LogoLoop/LogoLoop.js

@@ -1,16 +1,18 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { n as t } from "../../.chunks/emotion-styled.browser.esm.js";
-import { c as a } from "../../.chunks/emotion-react.browser.esm.js";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { n as a } from "../../.chunks/emotion-styled.browser.esm.js";
+import { c as r } from "../../.chunks/emotion-react.browser.esm.js";
 import e from "../../theme.js";
-import { l as r } from "../../.chunks/jocologo.js";
-import s from "../../animation/ZoomEntrance/ZoomEntrance.js";
-const i = t("img")({
-  ...a`
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-    position: relative;
+import { l as t } from "../../.chunks/jocologo.js";
+import i from "../../animation/ZoomEntrance/ZoomEntrance.js";
+const n = r`
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+  position: relative;
+`, l = a("img")({
+  ...r`
+    ${n}
     filter: drop-shadow(0 0 2em ${e.colors.gold}aa);
 
     :hover {
@@ -44,13 +46,9 @@ const i = t("img")({
       animation: logo-left infinite 9s cubic-bezier(0.3, 0.4, 0.7, 0.6);
     }
   `
-}), l = t("img")({
-  ...a`
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-    position: relative;
+}), m = a("img")({
+  ...r`
+    ${n}
     filter: drop-shadow(0 0 2em ${e.colors.green}aa);
 
     :hover {
@@ -84,10 +82,10 @@ const i = t("img")({
       animation: logo-right infinite 9s cubic-bezier(0.3, 0.4, 0.7, 0.6);
     }
   `
-}), p = () => /* @__PURE__ */ n(s, { children: [
-  /* @__PURE__ */ o("a", { href: "https://int.johnsoncountyiowa.gov/home", target: "_blank", children: /* @__PURE__ */ o(i, { src: r, className: "logo logo-left", alt: "Johnson County, Iowa logo" }) }),
-  /* @__PURE__ */ o("a", { href: "https://int.johnsoncountyiowa.gov/home", target: "_blank", children: /* @__PURE__ */ o(l, { src: r, className: "logo logo-right", alt: "Johnson County, Iowa logo" }) })
+}), x = () => /* @__PURE__ */ s(i, { children: [
+  /* @__PURE__ */ o("a", { href: "https://int.johnsoncountyiowa.gov/home", target: "_blank", children: /* @__PURE__ */ o(l, { src: t, className: "logo logo-left", alt: "Johnson County, Iowa logo" }) }),
+  /* @__PURE__ */ o("a", { href: "https://int.johnsoncountyiowa.gov/home", target: "_blank", children: /* @__PURE__ */ o(m, { src: t, className: "logo logo-right", alt: "Johnson County, Iowa logo" }) })
 ] });
 export {
-  p as default
+  x as default
 };

package/composite/WithLabel/WithLabel.js

@@ -1,15 +1,15 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import o from "../../base/Flex/Flex.js";
-const m = ({
+import m from "../../base/Flex/Flex.js";
+const h = ({
   label: r,
   component: t,
   fontSize: i = "inherit",
   styles: n,
   ...s
-}) => /* @__PURE__ */ l(o, { gap: 0.5, alignItems: "center", styles: { ...n, fontSize: i }, ...s, children: [
+}) => /* @__PURE__ */ l(m, { gap: "0.5rem", alignItems: "center", styles: { ...n, fontSize: i }, ...s, children: [
   /* @__PURE__ */ e("div", { id: r, children: t }),
   /* @__PURE__ */ e("label", { htmlFor: r, children: r })
 ] });
 export {
-  m as default
+  h as default
 };

package/composite/WithLoading/WithLoading.d.ts

@@ -0,0 +1,8 @@
+import { CircularProgressProps } from '@mui/material/CircularProgress';
+export interface WithLoadingProps extends CircularProgressProps {
+    loading: boolean;
+}
+declare const WithLoading: React.FC<WithLoadingProps & {
+    children: React.ReactNode;
+}>;
+export default WithLoading;

package/composite/WithLoading/WithLoading.js

@@ -0,0 +1,261 @@
+import { jsx as o, Fragment as T } from "react/jsx-runtime";
+import { n as R } from "../../.chunks/emotion-styled.browser.esm.js";
+import { k as x, c as v } from "../../.chunks/emotion-react.browser.esm.js";
+import N from "../../theme.js";
+import * as j from "react";
+import { g as U, a as z, s as k, c as l, u as E, b as F, P as t, d as I } from "../../.chunks/DefaultPropsProvider.js";
+import { m as w } from "../../.chunks/memoTheme.js";
+import { c as V } from "../../.chunks/createSimplePaletteValueFilter.js";
+import { c as W } from "../../.chunks/chainPropTypes.js";
+function A(r) {
+  return U("MuiCircularProgress", r);
+}
+z("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
+const a = 44, y = x`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`, g = x`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+`, K = typeof y != "string" ? v`
+        animation: ${y} 1.4s linear infinite;
+      ` : null, B = typeof g != "string" ? v`
+        animation: ${g} 1.4s ease-in-out infinite;
+      ` : null, G = (r) => {
+  const {
+    classes: e,
+    variant: s,
+    color: i,
+    disableShrink: m
+  } = r, p = {
+    root: ["root", s, `color${l(i)}`],
+    svg: ["svg"],
+    circle: ["circle", `circle${l(s)}`, m && "circleDisableShrink"]
+  };
+  return I(p, A, e);
+}, L = k("span", {
+  name: "MuiCircularProgress",
+  slot: "Root",
+  overridesResolver: (r, e) => {
+    const {
+      ownerState: s
+    } = r;
+    return [e.root, e[s.variant], e[`color${l(s.color)}`]];
+  }
+})(w(({
+  theme: r
+}) => ({
+  display: "inline-block",
+  variants: [{
+    props: {
+      variant: "determinate"
+    },
+    style: {
+      transition: r.transitions.create("transform")
+    }
+  }, {
+    props: {
+      variant: "indeterminate"
+    },
+    style: K || {
+      animation: `${y} 1.4s linear infinite`
+    }
+  }, ...Object.entries(r.palette).filter(V()).map(([e]) => ({
+    props: {
+      color: e
+    },
+    style: {
+      color: (r.vars || r).palette[e].main
+    }
+  }))]
+}))), Y = k("svg", {
+  name: "MuiCircularProgress",
+  slot: "Svg",
+  overridesResolver: (r, e) => e.svg
+})({
+  display: "block"
+  // Keeps the progress centered
+}), Z = k("circle", {
+  name: "MuiCircularProgress",
+  slot: "Circle",
+  overridesResolver: (r, e) => {
+    const {
+      ownerState: s
+    } = r;
+    return [e.circle, e[`circle${l(s.variant)}`], s.disableShrink && e.circleDisableShrink];
+  }
+})(w(({
+  theme: r
+}) => ({
+  stroke: "currentColor",
+  variants: [{
+    props: {
+      variant: "determinate"
+    },
+    style: {
+      transition: r.transitions.create("stroke-dashoffset")
+    }
+  }, {
+    props: {
+      variant: "indeterminate"
+    },
+    style: {
+      // Some default value that looks fine waiting for the animation to kicks in.
+      strokeDasharray: "80px, 200px",
+      strokeDashoffset: 0
+      // Add the unit to fix a Edge 16 and below bug.
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => e.variant === "indeterminate" && !e.disableShrink,
+    style: B || {
+      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      animation: `${g} 1.4s ease-in-out infinite`
+    }
+  }]
+}))), $ = /* @__PURE__ */ j.forwardRef(function(e, s) {
+  const i = E({
+    props: e,
+    name: "MuiCircularProgress"
+  }), {
+    className: m,
+    color: p = "primary",
+    disableShrink: D = !1,
+    size: f = 40,
+    style: M,
+    thickness: n = 3.6,
+    value: d = 0,
+    variant: b = "indeterminate",
+    ...O
+  } = i, c = {
+    ...i,
+    color: p,
+    disableShrink: D,
+    size: f,
+    thickness: n,
+    value: d,
+    variant: b
+  }, u = G(c), h = {}, S = {}, C = {};
+  if (b === "determinate") {
+    const P = 2 * Math.PI * ((a - n) / 2);
+    h.strokeDasharray = P.toFixed(3), C["aria-valuenow"] = Math.round(d), h.strokeDashoffset = `${((100 - d) / 100 * P).toFixed(3)}px`, S.transform = "rotate(-90deg)";
+  }
+  return /* @__PURE__ */ o(L, {
+    className: F(u.root, m),
+    style: {
+      width: f,
+      height: f,
+      ...S,
+      ...M
+    },
+    ownerState: c,
+    ref: s,
+    role: "progressbar",
+    ...C,
+    ...O,
+    children: /* @__PURE__ */ o(Y, {
+      className: u.svg,
+      ownerState: c,
+      viewBox: `${a / 2} ${a / 2} ${a} ${a}`,
+      children: /* @__PURE__ */ o(Z, {
+        className: u.circle,
+        style: h,
+        ownerState: c,
+        cx: a,
+        cy: a,
+        r: (a - n) / 2,
+        fill: "none",
+        strokeWidth: n
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && ($.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: t.oneOfType([t.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), t.string]),
+  /**
+   * If `true`, the shrink animation is disabled.
+   * This only works if variant is `indeterminate`.
+   * @default false
+   */
+  disableShrink: W(t.bool, (r) => r.disableShrink && r.variant && r.variant !== "indeterminate" ? new Error("MUI: You have provided the `disableShrink` prop with a variant other than `indeterminate`. This will have no effect.") : null),
+  /**
+   * The size of the component.
+   * If using a number, the pixel unit is assumed.
+   * If using a string, you need to provide the CSS unit, for example '3rem'.
+   * @default 40
+   */
+  size: t.oneOfType([t.number, t.string]),
+  /**
+   * @ignore
+   */
+  style: t.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  /**
+   * The thickness of the circle.
+   * @default 3.6
+   */
+  thickness: t.number,
+  /**
+   * The value of the progress indicator for the determinate variant.
+   * Value between 0 and 100.
+   * @default 0
+   */
+  value: t.number,
+  /**
+   * The variant to use.
+   * Use indeterminate when there is no progress value.
+   * @default 'indeterminate'
+   */
+  variant: t.oneOf(["determinate", "indeterminate"])
+});
+const _ = R($)({
+  ...v`
+    color: ${N.colors.green};
+  `
+}), sr = ({
+  loading: r,
+  children: e,
+  ...s
+}) => r ? /* @__PURE__ */ o(_, { size: 47, ...s }) : /* @__PURE__ */ o(T, { children: e });
+export {
+  sr as default
+};

package/composite/WithLoading/index.d.ts

@@ -0,0 +1 @@
+export { default, type WithLoadingProps } from './WithLoading';

package/composite/WithLoading/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./WithLoading.js";
+export {
+  o as default
+};

package/composite/index.d.ts

@@ -1,3 +1,5 @@
+export { default as InfoCard } from './InfoCard';
 export { default as List } from './List';
 export { default as LogoLoop } from './LogoLoop';
 export { default as WithLabel } from './WithLabel';
+export { default as WithLoading } from './WithLoading';

package/composite/index.js

@@ -1,8 +1,12 @@
-import { default as a } from "./List/List.js";
-import { default as f } from "./LogoLoop/LogoLoop.js";
+import { InfoCard as a } from "./InfoCard/InfoCard.js";
+import { default as e } from "./List/List.js";
+import { default as d } from "./LogoLoop/LogoLoop.js";
 import { default as l } from "./WithLabel/WithLabel.js";
+import { default as s } from "./WithLoading/WithLoading.js";
 export {
-  a as List,
-  f as LogoLoop,
-  l as WithLabel
+  a as InfoCard,
+  e as List,
+  d as LogoLoop,
+  l as WithLabel,
+  s as WithLoading
 };

package/index.d.ts

@@ -1,5 +1,5 @@
 export { ZoomEntrance } from './animation';
-export { Avatar, AvatarWithImage, Button, Divider, Flex, Grid, ListButton } from './base';
-export { List, LogoLoop, WithLabel } from './composite';
+export { Avatar, AvatarWithImage, Button, Divider, Flex, Grid, Icon, Input, LabeledValue, ListButton, ScrollContainer, } from './base';
+export { InfoCard, List, LogoLoop, WithLabel, WithLoading } from './composite';
 export { AppHeader, Nav } from './supercomposite';
 export { AppContainer } from './templates';

package/index.js

@@ -1,31 +1,42 @@
-import { default as e } from "./animation/ZoomEntrance/ZoomEntrance.js";
-import { default as f } from "./base/Avatar/Avatar.js";
-import { AvatarWithImage as m } from "./base/AvatarWithImage/AvatarWithImage.js";
-import { Button as d } from "./base/Button/Button.js";
-import { Divider as s } from "./base/Divider/Divider.js";
-import { default as i } from "./base/Flex/Flex.js";
-import { Grid as L } from "./base/Grid/Grid.js";
-import "./base/Input/Input.js";
-import { default as A } from "./base/ListButton/ListButton.js";
-import { default as h } from "./composite/List/List.js";
-import { default as W } from "./composite/LogoLoop/LogoLoop.js";
-import { default as c } from "./composite/WithLabel/WithLabel.js";
-import { default as D } from "./supercomposite/AppHeader/AppHeader.js";
-import { Nav as F } from "./supercomposite/Nav/Nav.js";
-import { default as H } from "./templates/AppContainer/AppContainer.js";
+import { default as t } from "./animation/ZoomEntrance/ZoomEntrance.js";
+import { default as a } from "./base/Avatar/Avatar.js";
+import { AvatarWithImage as p } from "./base/AvatarWithImage/AvatarWithImage.js";
+import { Button as x } from "./base/Button/Button.js";
+import { Divider as l } from "./base/Divider/Divider.js";
+import { default as s } from "./base/Flex/Flex.js";
+import { Grid as i } from "./base/Grid/Grid.js";
+import { default as v } from "./base/Icon/Icon.js";
+import { Input as I } from "./base/Input/Input.js";
+import { LabeledValue as g } from "./base/LabeledValue/LabeledValue.js";
+import { default as C } from "./base/ListButton/ListButton.js";
+import { default as b } from "./base/ScrollContainer/ScrollContainer.js";
+import { InfoCard as D } from "./composite/InfoCard/InfoCard.js";
+import { default as F } from "./composite/List/List.js";
+import { default as H } from "./composite/LogoLoop/LogoLoop.js";
+import { default as S } from "./composite/WithLabel/WithLabel.js";
+import { default as Z } from "./composite/WithLoading/WithLoading.js";
+import { default as k } from "./supercomposite/AppHeader/AppHeader.js";
+import { Nav as w } from "./supercomposite/Nav/Nav.js";
+import { default as z } from "./templates/AppContainer/AppContainer.js";
 export {
-  H as AppContainer,
-  D as AppHeader,
-  f as Avatar,
-  m as AvatarWithImage,
-  d as Button,
-  s as Divider,
-  i as Flex,
-  L as Grid,
-  h as List,
-  A as ListButton,
-  W as LogoLoop,
-  F as Nav,
-  c as WithLabel,
-  e as ZoomEntrance
+  z as AppContainer,
+  k as AppHeader,
+  a as Avatar,
+  p as AvatarWithImage,
+  x as Button,
+  l as Divider,
+  s as Flex,
+  i as Grid,
+  v as Icon,
+  D as InfoCard,
+  I as Input,
+  g as LabeledValue,
+  F as List,
+  C as ListButton,
+  H as LogoLoop,
+  w as Nav,
+  b as ScrollContainer,
+  S as WithLabel,
+  Z as WithLoading,
+  t as ZoomEntrance
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.45",
+  "version": "0.0.49",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/theme.d.ts

@@ -14,12 +14,16 @@ export interface ThemeColors {
     grayO44: string;
     green: string;
     indigo: string;
+    lighterRed: string;
+    lightRed: string;
+    maroon: string;
     midnight: string;
     mint: string;
-    sunlight: string;
     purple: string;
+    sunlight: string;
     veryLightGray: string;
     veryLightGrayO33: string;
+    violet: string;
     white: string;
     whiteGreen: string;
     whiteGreenA: string;

package/theme.js

@@ -16,12 +16,16 @@ const e = {
     grayO44: "#72727244",
     green: "#009200",
     indigo: "#4105c1",
+    lighterRed: "#ffcccc",
+    lightRed: "#eda4a4",
+    maroon: "#5c0000",
     midnight: "#131313",
     mint: "#a4edb4",
     purple: "#920092",
     sunlight: "#faf9e8",
     veryLightGray: "#fafafa",
     veryLightGrayO33: "#fafafa33",
+    violet: "#c1a7e2",
     white: "white",
     whiteGreen: "#f2fcf5",
     whiteGreenA: "#dae8de"