jcicl 0.0.114 → 0.0.118

package/AppHeader/AppHeader.d.ts

@@ -7,6 +7,7 @@ export interface AppHeaderProps {
     loggedIn?: boolean;
     hamburgerMenu?: boolean;
     onLogin?: () => void;
+    onLogout?: () => void;
     onUserMenuClick?: () => void;
     onHamburgerMenuClick?: () => void;
     logoProps: CustomLogoProps;

package/AppHeader/AppHeader.js

@@ -1,76 +1,76 @@
-import { jsx as u, jsxs as g } from "react/jsx-runtime";
+import { jsx as u, jsxs as b } from "react/jsx-runtime";
 import * as w from "react";
-import I, { useState as m, useLayoutEffect as S } from "react";
+import E, { useState as v, useLayoutEffect as M } from "react";
 import { n as f } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as p } from "../.chunks/emotion-react.browser.esm.js";
-import { I as E } from "../.chunks/Input.js";
+import { c as m } from "../.chunks/emotion-react.browser.esm.js";
+import { I as y } from "../.chunks/Input.js";
 import { Button as C } from "../Button/Button.js";
-import M from "../Avatar/Avatar.js";
-import y from "../WithLabel/WithLabel.js";
+import O from "../Avatar/Avatar.js";
+import I from "../WithLabel/WithLabel.js";
 import { c as L } from "../.chunks/createSvgIcon.js";
-const O = I[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], R = (e) => {
-  const s = w.useRef(e);
+const R = E[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], _ = (e) => {
+  const c = w.useRef(e);
   return w.useEffect(() => {
-    s.current = e;
-  }), s;
+    c.current = e;
+  }), c;
 };
-function _() {
+function A() {
 }
-function A(e, s, l = {}) {
-  const r = j(l.polyfill), a = R(s);
-  return O(() => {
-    let n = !1;
-    const o = e && "current" in e ? e.current : e;
-    if (!o) return _;
-    function i(t, c) {
-      n || a.current(t, c);
+function H(e, c, s = {}) {
+  const r = U(s.polyfill), a = _(c);
+  return R(() => {
+    let o = !1;
+    const l = e && "current" in e ? e.current : e;
+    if (!l) return A;
+    function n(i, t) {
+      o || a.current(i, t);
     }
-    return r.subscribe(o, i), () => {
-      n = !0, r.unsubscribe(o, i);
+    return r.subscribe(l, n), () => {
+      o = !0, r.unsubscribe(l, n);
     };
   }, [e, r, a]), r.observer;
 }
-function H(e) {
-  let s = !1, l = [];
-  const r = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((n, o) => {
-    l = l.concat(n);
-    function i() {
-      const t = /* @__PURE__ */ new Set();
-      for (let c = 0; c < l.length; c++) {
-        if (t.has(l[c].target)) continue;
-        t.add(l[c].target);
-        const d = r.get(l[c].target);
-        d == null || d.forEach((b) => b(l[c], o));
+function j(e) {
+  let c = !1, s = [];
+  const r = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((o, l) => {
+    s = s.concat(o);
+    function n() {
+      const i = /* @__PURE__ */ new Set();
+      for (let t = 0; t < s.length; t++) {
+        if (i.has(s[t].target)) continue;
+        i.add(s[t].target);
+        const h = r.get(s[t].target);
+        h == null || h.forEach((d) => d(s[t], l));
       }
-      l = [], s = !1;
+      s = [], c = !1;
     }
-    s || window.requestAnimationFrame(i), s = !0;
+    c || window.requestAnimationFrame(n), c = !0;
   });
   return {
     observer: a,
-    subscribe(n, o) {
-      var i;
-      a.observe(n);
-      const t = (i = r.get(n)) !== null && i !== void 0 ? i : [];
-      t.push(o), r.set(n, t);
+    subscribe(o, l) {
+      var n;
+      a.observe(o);
+      const i = (n = r.get(o)) !== null && n !== void 0 ? n : [];
+      i.push(l), r.set(o, i);
     },
-    unsubscribe(n, o) {
-      var i;
-      const t = (i = r.get(n)) !== null && i !== void 0 ? i : [];
-      if (t.length === 1) {
-        a.unobserve(n), r.delete(n);
+    unsubscribe(o, l) {
+      var n;
+      const i = (n = r.get(o)) !== null && n !== void 0 ? n : [];
+      if (i.length === 1) {
+        a.unobserve(o), r.delete(o);
         return;
       }
-      const c = t.indexOf(o);
-      c !== -1 && t.splice(c, 1), r.set(n, t);
+      const t = i.indexOf(l);
+      t !== -1 && i.splice(t, 1), r.set(o, i);
     }
   };
 }
-let v;
-const j = (e) => v || (v = H(e)), U = L(/* @__PURE__ */ u("path", {
+let g;
+const U = (e) => g || (g = j(e)), V = L(/* @__PURE__ */ u("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), "Menu"), V = f("div")(() => ({
-  ...p`
+}), "Menu"), B = f("div")(() => ({
+  ...m`
     display: flex;
     flex-direction: row;
     padding: 4px 16px;
@@ -79,35 +79,35 @@ const j = (e) => v || (v = H(e)), U = L(/* @__PURE__ */ u("path", {
     justify-content: space-between;
     gap: 1.5rem;
   `
-})), B = f("img")(({ width: e }) => ({
+})), F = f("img")(({ width: e }) => ({
   width: `${e}px`
-})), F = f("div")(({ height: e }) => ({
-  ...p`
+})), q = f("div")(({ height: e }) => ({
+  ...m`
     display: flex;
     gap: 1rem;
     height: ${e}px;
   `
-})), q = f("div")(({ width: e, loggedIn: s }) => ({
-  ...p`
+})), P = f("div")(({ width: e, loggedIn: c }) => ({
+  ...m`
     width: ${e}px;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    flex-direction: ${s ? "column" : "column-reverse"};
+    flex-direction: ${c ? "column" : "column-reverse"};
     flex-shrink: 0;
     * {
       white-space: nowrap;
     }
   `
 })), W = f("div")(({ visible: e }) => ({
-  ...p`
+  ...m`
     z-index: ${e ? 1 : 0};
     opacity: ${e ? 1 : 0};
     pointer-events: ${e ? "auto" : "none"};
     position: ${e ? "relative" : "absolute"};
   `
-})), P = f("div")(() => ({
-  ...p`
+})), D = f("div")(() => ({
+  ...m`
     display: flex;
     width: 1360px;
     max-width: 100%;
@@ -115,33 +115,41 @@ const j = (e) => v || (v = H(e)), U = L(/* @__PURE__ */ u("path", {
       width: 100%;
     }
   `
-})), Z = ({ logoProps: e, iconColor: s, hamburgerMenu: l, onHamburgerMenuClick: r }) => {
-  const [a, n] = m(!1), [o, i] = m(0), [t, c] = m(null), [d, b] = m(null), { logoSrc: z, logoWidth: $, logoHeight: x } = e;
-  S(() => {
-    t && t.clientWidth > o && i(t.clientWidth), d && d.clientWidth > o && i(d.clientWidth);
+})), ee = ({
+  loggedIn: e,
+  logoProps: c,
+  iconColor: s,
+  hamburgerMenu: r,
+  onHamburgerMenuClick: a,
+  onUserMenuClick: o,
+  onLogin: l
+}) => {
+  const [n, i] = v(0), [t, h] = v(null), [d, z] = v(null), { logoSrc: $, logoWidth: k, logoHeight: x } = c;
+  M(() => {
+    t && t.clientWidth > n && i(t.clientWidth), d && d.clientWidth > n && i(d.clientWidth);
   }, [t, d]);
-  const k = (h) => {
-    h != null && h.clientWidth && h.clientWidth > o && i(h.clientWidth);
+  const S = (p) => {
+    p != null && p.clientWidth && p.clientWidth > n && i(p.clientWidth);
   };
-  return A(t, () => k(t)), /* @__PURE__ */ g(V, { children: [
-    /* @__PURE__ */ g(F, { height: x, children: [
-      /* @__PURE__ */ u(B, { src: z, height: `${x}px`, width: $ }),
-      l && /* @__PURE__ */ u(C, { variant: "icon", onClick: r, color: s, children: /* @__PURE__ */ u(U, {}) })
+  return H(t, () => S(t)), /* @__PURE__ */ b(B, { children: [
+    /* @__PURE__ */ b(q, { height: x, children: [
+      /* @__PURE__ */ u(F, { src: $, height: `${x}px`, width: k }),
+      r && /* @__PURE__ */ u(C, { variant: "icon", onClick: a, color: s, children: /* @__PURE__ */ u(V, {}) })
     ] }),
-    /* @__PURE__ */ u(P, { children: /* @__PURE__ */ u(E, { placeholder: "Search..." }) }),
-    /* @__PURE__ */ g(q, { width: o, loggedIn: a, children: [
-      /* @__PURE__ */ u(W, { visible: a, ref: c, children: /* @__PURE__ */ u(
-        y,
+    /* @__PURE__ */ u(D, { children: /* @__PURE__ */ u(y, { placeholder: "Search..." }) }),
+    /* @__PURE__ */ b(P, { width: n, loggedIn: !!e, children: [
+      /* @__PURE__ */ u(W, { visible: !!e, ref: h, children: /* @__PURE__ */ u(
+        I,
         {
           id: "accountMenuContainer",
-          component: /* @__PURE__ */ u(M, { onClick: () => n(!1) }),
+          component: /* @__PURE__ */ u(O, { onClick: o }),
           label: "Welcome, User"
         }
       ) }),
-      /* @__PURE__ */ u(W, { visible: !a, ref: b, children: /* @__PURE__ */ u(C, { id: "loginButtonContainer", onClick: () => n(!0), children: "Log In" }) })
+      /* @__PURE__ */ u(W, { visible: !e, ref: z, children: /* @__PURE__ */ u(C, { id: "loginButtonContainer", onClick: l, children: "Log In" }) })
     ] })
   ] });
 };
 export {
-  Z as default
+  ee as default
 };

package/AppHeader/index.d.ts

@@ -1 +1 @@
-export { default, type AppHeaderProps } from './AppHeader';
+export { default, type AppHeaderProps, type CustomLogoProps } from './AppHeader';

package/Button/Button.d.ts

@@ -3,6 +3,7 @@ export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size' | '
     variant?: 1 | 2 | 'unstyled' | 'icon';
     size?: number;
     color?: string;
+    highlightColor?: string;
 }
 export declare const Button: React.FC<ButtonProps & {
     children: React.ReactNode;

package/Button/Button.js

@@ -1,34 +1,34 @@
-import { jsxs as F, jsx as l } from "react/jsx-runtime";
-import * as g from "react";
-import { g as U, a as _, s as d, r as H, c as s, f as A, u as q, b as h, P as t, d as J, e as b } from "../.chunks/DefaultPropsProvider.js";
+import { jsxs as F, jsx as d } from "react/jsx-runtime";
+import * as x from "react";
+import { g as U, a as _, s as c, r as H, c as i, f as A, u as q, b as I, P as t, d as J, e as b } from "../.chunks/DefaultPropsProvider.js";
 import { m as K } from "../.chunks/memoTheme.js";
 import { c as Q } from "../.chunks/createSimplePaletteValueFilter.js";
 import { B as S } from "../.chunks/ButtonBase.js";
 import { c as X } from "../.chunks/emotion-react.browser.esm.js";
-import e from "../theme.js";
+import s from "../theme.js";
 function Y(o) {
   return U("MuiButton", o);
 }
-const p = _("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), I = /* @__PURE__ */ g.createContext({});
-process.env.NODE_ENV !== "production" && (I.displayName = "ButtonGroupContext");
-const O = /* @__PURE__ */ g.createContext(void 0);
+const u = _("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), h = /* @__PURE__ */ x.createContext({});
+process.env.NODE_ENV !== "production" && (h.displayName = "ButtonGroupContext");
+const O = /* @__PURE__ */ x.createContext(void 0);
 process.env.NODE_ENV !== "production" && (O.displayName = "ButtonGroupButtonContext");
 const Z = (o) => {
   const {
-    color: a,
-    disableElevation: r,
-    fullWidth: n,
-    size: i,
-    variant: c,
-    classes: u
+    color: n,
+    disableElevation: a,
+    fullWidth: r,
+    size: e,
+    variant: l,
+    classes: p
   } = o, f = {
-    root: ["root", c, `${c}${s(a)}`, `size${s(i)}`, `${c}Size${s(i)}`, `color${s(a)}`, r && "disableElevation", n && "fullWidth"],
+    root: ["root", l, `${l}${i(n)}`, `size${i(e)}`, `${l}Size${i(e)}`, `color${i(n)}`, a && "disableElevation", r && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${s(i)}`],
-    endIcon: ["icon", "endIcon", `iconSize${s(i)}`]
-  }, y = J(f, Y, u);
+    startIcon: ["icon", "startIcon", `iconSize${i(e)}`],
+    endIcon: ["icon", "endIcon", `iconSize${i(e)}`]
+  }, y = J(f, Y, p);
   return {
-    ...u,
+    ...p,
     // forward the focused, disabled, etc. classes to the ButtonBase
     ...y
   };
@@ -59,20 +59,20 @@ const Z = (o) => {
       fontSize: 22
     }
   }
-}], oo = d(S, {
+}], oo = c(S, {
   shouldForwardProp: (o) => H(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [a.root, a[r.variant], a[`${r.variant}${s(r.color)}`], a[`size${s(r.size)}`], a[`${r.variant}Size${s(r.size)}`], r.color === "inherit" && a.colorInherit, r.disableElevation && a.disableElevation, r.fullWidth && a.fullWidth];
+    return [n.root, n[a.variant], n[`${a.variant}${i(a.color)}`], n[`size${i(a.size)}`], n[`${a.variant}Size${i(a.size)}`], a.color === "inherit" && n.colorInherit, a.disableElevation && n.disableElevation, a.fullWidth && n.fullWidth];
   }
 })(K(({
   theme: o
 }) => {
-  const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], r = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  const n = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], a = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -85,7 +85,7 @@ const Z = (o) => {
     "&:hover": {
       textDecoration: "none"
     },
-    [`&.${p.disabled}`]: {
+    [`&.${u.disabled}`]: {
       color: (o.vars || o).palette.action.disabled
     },
     variants: [{
@@ -106,10 +106,10 @@ const Z = (o) => {
         "&:active": {
           boxShadow: (o.vars || o).shadows[8]
         },
-        [`&.${p.focusVisible}`]: {
+        [`&.${u.focusVisible}`]: {
           boxShadow: (o.vars || o).shadows[6]
         },
-        [`&.${p.disabled}`]: {
+        [`&.${u.disabled}`]: {
           color: (o.vars || o).palette.action.disabled,
           boxShadow: (o.vars || o).shadows[0],
           backgroundColor: (o.vars || o).palette.action.disabledBackground
@@ -125,7 +125,7 @@ const Z = (o) => {
         borderColor: "var(--variant-outlinedBorder, currentColor)",
         backgroundColor: "var(--variant-outlinedBg)",
         color: "var(--variant-outlinedColor)",
-        [`&.${p.disabled}`]: {
+        [`&.${u.disabled}`]: {
           border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
         }
       }
@@ -138,22 +138,22 @@ const Z = (o) => {
         color: "var(--variant-textColor)",
         backgroundColor: "var(--variant-textBg)"
       }
-    }, ...Object.entries(o.palette).filter(Q()).map(([n]) => ({
+    }, ...Object.entries(o.palette).filter(Q()).map(([r]) => ({
       props: {
-        color: n
+        color: r
       },
       style: {
-        "--variant-textColor": (o.vars || o).palette[n].main,
-        "--variant-outlinedColor": (o.vars || o).palette[n].main,
-        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / 0.5)` : b(o.palette[n].main, 0.5),
-        "--variant-containedColor": (o.vars || o).palette[n].contrastText,
-        "--variant-containedBg": (o.vars || o).palette[n].main,
+        "--variant-textColor": (o.vars || o).palette[r].main,
+        "--variant-outlinedColor": (o.vars || o).palette[r].main,
+        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / 0.5)` : b(o.palette[r].main, 0.5),
+        "--variant-containedColor": (o.vars || o).palette[r].contrastText,
+        "--variant-containedBg": (o.vars || o).palette[r].main,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": (o.vars || o).palette[n].dark,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[n].main, o.palette.action.hoverOpacity),
-            "--variant-outlinedBorder": (o.vars || o).palette[n].main,
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[n].main, o.palette.action.hoverOpacity)
+            "--variant-containedBg": (o.vars || o).palette[r].dark,
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[r].main, o.palette.action.hoverOpacity),
+            "--variant-outlinedBorder": (o.vars || o).palette[r].main,
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[r].main, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -164,10 +164,10 @@ const Z = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : n,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : r,
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
             "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity),
             "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity)
           }
@@ -236,13 +236,13 @@ const Z = (o) => {
         "&:hover": {
           boxShadow: "none"
         },
-        [`&.${p.focusVisible}`]: {
+        [`&.${u.focusVisible}`]: {
           boxShadow: "none"
         },
         "&:active": {
           boxShadow: "none"
         },
-        [`&.${p.disabled}`]: {
+        [`&.${u.disabled}`]: {
           boxShadow: "none"
         }
       }
@@ -255,14 +255,14 @@ const Z = (o) => {
       }
     }]
   };
-})), to = d("span", {
+})), to = c("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [a.startIcon, a[`iconSize${s(r.size)}`]];
+    return [n.startIcon, n[`iconSize${i(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -276,14 +276,14 @@ const Z = (o) => {
       marginLeft: -2
     }
   }, ...R]
-}), ao = d("span", {
+}), ao = c("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [a.endIcon, a[`iconSize${s(r.size)}`]];
+    return [n.endIcon, n[`iconSize${i(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -297,9 +297,9 @@ const Z = (o) => {
       marginRight: -2
     }
   }, ...R]
-}), k = /* @__PURE__ */ g.forwardRef(function(a, r) {
-  const n = g.useContext(I), i = g.useContext(O), c = A(n, a), u = q({
-    props: c,
+}), k = /* @__PURE__ */ x.forwardRef(function(n, a) {
+  const r = x.useContext(h), e = x.useContext(O), l = A(r, n), p = q({
+    props: l,
     name: "MuiButton"
   }), {
     children: f,
@@ -316,9 +316,9 @@ const Z = (o) => {
     startIcon: m,
     type: w,
     variant: V = "text",
-    ...G
-  } = u, x = {
-    ...u,
+    ...j
+  } = p, g = {
+    ...p,
     color: y,
     component: B,
     disabled: z,
@@ -328,27 +328,27 @@ const Z = (o) => {
     size: M,
     type: w,
     variant: V
-  }, v = Z(x), j = m && /* @__PURE__ */ l(to, {
+  }, v = Z(g), G = m && /* @__PURE__ */ d(to, {
     className: v.startIcon,
-    ownerState: x,
+    ownerState: g,
     children: m
-  }), L = C && /* @__PURE__ */ l(ao, {
+  }), L = C && /* @__PURE__ */ d(ao, {
     className: v.endIcon,
-    ownerState: x,
+    ownerState: g,
     children: C
-  }), D = i || "";
+  }), D = e || "";
   return /* @__PURE__ */ F(oo, {
-    ownerState: x,
-    className: h(n.className, v.root, N, D),
+    ownerState: g,
+    className: I(r.className, v.root, N, D),
     component: B,
     disabled: z,
     focusRipple: !$,
-    focusVisibleClassName: h(v.focusVisible, P),
-    ref: r,
+    focusVisibleClassName: I(v.focusVisible, P),
+    ref: a,
     type: w,
-    ...G,
+    ...j,
     classes: v,
-    children: [j, f, L]
+    children: [G, f, L]
   });
 });
 process.env.NODE_ENV !== "production" && (k.propTypes = {
@@ -445,43 +445,43 @@ process.env.NODE_ENV !== "production" && (k.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const E = d(k)`
+const E = c(k)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
-    color: ${e.colors.black};
+    color: ${s.colors.black};
     display: flex;
     justify-content: center;
     align-items: center;
   }
-`, no = d(E)`
-  background-color: ${e.colors.green};
+`, no = c(E)`
+  background-color: ${s.colors.green};
   border-radius: 0;
   height: 2.5rem;
   border: 2px solid transparent;
-  color: ${e.colors.white};
+  color: ${s.colors.white};
   transition: 313ms all ease-in;
   border-radius: 32px;
   font-weight: 400;
   padding: 0.75rem 2rem;
   font-size: 1rem;
-  box-shadow: ${e.boxShadow.gray63};
+  box-shadow: ${s.boxShadows.gray63};
   &:hover,
   :focus-visible {
-    background-color: ${e.colors.darkGreen};
-    box-shadow: ${e.boxShadow.black63};
+    background-color: ${s.colors.darkGreen};
+    box-shadow: ${s.boxShadows.black63};
   }
   &:disabled {
-    background-color: ${e.colors.darkGreen};
+    background-color: ${s.colors.darkGreen};
   }
-`, ro = d(E)`
-  color: ${e.colors.black};
-  border: 3px solid ${e.colors.blue};
+`, ro = c(E)`
+  color: ${s.colors.black};
+  border: 3px solid ${s.colors.blue};
   padding: 0.5rem 2rem;
-`, eo = d(S)`
+`, eo = c(S)`
   border-radius: 8px;
-`, io = d(S)(
-  ({ size: o, color: a = e.colors.darkGreen }) => ({
+`, io = c(S)(
+  ({ size: o, color: n, highlightColor: a }) => ({
     ...X`
       display: flex;
       align-items: center;
@@ -492,27 +492,28 @@ const E = d(k)`
       &:hover,
       :focus-visible {
         svg {
-          filter: drop-shadow(0 0 6px ${e.colors.dandelion}) drop-shadow(0 0 6px ${e.colors.dandelion})
-            drop-shadow(0 0 6px ${e.colors.dandelion}) drop-shadow(0 0 6px ${e.colors.dandelion});
+          filter: drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a})
+            drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a});
         }
       }
 
       svg {
         transition: 313ms all ease-in-out;
-        fill: ${a};
+        fill: ${n};
         width: ${o}px;
         height: ${o}px;
       }
     `
   })
-), go = ({
+), xo = ({
   variant: o = 1,
-  size: a = 50,
-  color: r = e.colors.darkGreen,
-  children: n,
-  ...i
-}) => o === "unstyled" ? /* @__PURE__ */ l(eo, { ...i, children: n }) : o === 2 ? /* @__PURE__ */ l(ro, { ...i, children: /* @__PURE__ */ l("span", { children: n }) }) : o === "icon" ? /* @__PURE__ */ l(io, { ...{ size: a, color: r }, ...i, children: n }) : /* @__PURE__ */ l(no, { ...i, children: /* @__PURE__ */ l("span", { children: n }) });
+  size: n = 50,
+  color: a = s.colors.darkGreen,
+  highlightColor: r = s.colors.dandelion,
+  children: e,
+  ...l
+}) => o === "unstyled" ? /* @__PURE__ */ d(eo, { ...l, children: e }) : o === 2 ? /* @__PURE__ */ d(ro, { ...l, children: /* @__PURE__ */ d("span", { children: e }) }) : o === "icon" ? /* @__PURE__ */ d(io, { ...{ size: n, color: a, highlightColor: r }, ...l, children: e }) : /* @__PURE__ */ d(no, { ...l, children: /* @__PURE__ */ d("span", { children: e }) });
 export {
-  go as Button,
-  go as default
+  xo as Button,
+  xo as default
 };

package/EditableInfoCard/EditableInfoCard.js

@@ -107,7 +107,7 @@ const eo = j(/* @__PURE__ */ o("path", {
   title: a,
   items: r = [],
   padding: u = "1rem 2rem",
-  shadow: c = d.boxShadow.darkGreen,
+  shadow: c = d.boxShadows.darkGreen,
   spacing: V = "2rem",
   titleSpacing: w = "1rem",
   canEditTitle: C = !0,

package/ImageWIthDetails/ImageWithDetails.d.ts

@@ -0,0 +1,13 @@
+export interface ImageWithDetailsProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    imageUrl: string;
+    imageAlt: string;
+    /** The total size of the component */
+    containerHeight?: string;
+    /** The size of the title header and details section */
+    detailsBarSize?: string;
+    detailsBarPadding?: string;
+}
+declare const ImageWithDetails: React.FC<ImageWithDetailsProps>;
+export default ImageWithDetails;