jcicl 0.0.130 → 0.0.132

package/AppHeader/AppHeader.d.ts

@@ -1,4 +1,4 @@
-import { AvatarProps } from '../../../../../../../../../src/components/base/Avatar';
+import { IconProps } from '../../../../../../../../../src/components/base/Icon';
 import { TemplateThemeProps } from '../../../../../../../../../src/components/theme';
 export interface CustomLogoProps {
     logoSrc: string;
@@ -12,11 +12,14 @@ export interface AppHeaderProps {
     onLogout?: () => void;
     onUserMenuClick?: () => void;
     onHamburgerMenuClick?: () => void;
+    onSearch?: () => void;
     logoProps: CustomLogoProps;
     iconColor: string;
     isMobile?: boolean;
     themeProps: Pick<TemplateThemeProps, 'shadowSecondary' | 'iconPrimary' | 'borderPrimary' | 'shadowTertiary'>;
-    avatarColors?: AvatarProps;
+    iconColors?: IconProps;
+    userName?: string;
+    userSettingsEnabled?: boolean;
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

package/AppHeader/AppHeader.js

@@ -1,56 +1,56 @@
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import * as S from "react";
-import V, { useState as w, useLayoutEffect as B } from "react";
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import * as k from "react";
+import G, { useState as $, useLayoutEffect as J } from "react";
 import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as b } from "../.chunks/emotion-react.browser.esm.js";
-import { I as W } from "../.chunks/Input.js";
-import { Button as k } from "../Button/Button.js";
-import E from "../Avatar/Avatar.js";
-import q from "../WithLabel/WithLabel.js";
-import { c as T } from "../.chunks/createSvgIcon.js";
-const D = V[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], G = (e) => {
-  const t = S.useRef(e);
-  return S.useEffect(() => {
-    t.current = e;
-  }), t;
+import { c as m } from "../.chunks/emotion-react.browser.esm.js";
+import { Search as M } from "../Search/Search.js";
+import { Button as E } from "../Button/Button.js";
+import H from "../Icon/Icon.js";
+import K from "../WithLabel/WithLabel.js";
+import { c as j } from "../.chunks/createSvgIcon.js";
+const N = G[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], Q = (e) => {
+  const n = k.useRef(e);
+  return k.useEffect(() => {
+    n.current = e;
+  }), n;
 };
-function J() {
+function X() {
 }
-function K(e, t, l = {}) {
-  const c = Q(l.polyfill), a = G(t);
-  return D(() => {
+function Y(e, n, l = {}) {
+  const c = ee(l.polyfill), u = Q(n);
+  return N(() => {
     let i = !1;
     const d = e && "current" in e ? e.current : e;
-    if (!d) return J;
+    if (!d) return X;
     function r(o, s) {
-      i || a.current(o, s);
+      i || u.current(o, s);
     }
     return c.subscribe(d, r), () => {
       i = !0, c.unsubscribe(d, r);
     };
-  }, [e, c, a]), c.observer;
+  }, [e, c, u]), c.observer;
 }
-function N(e) {
-  let t = !1, l = [];
-  const c = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((i, d) => {
+function Z(e) {
+  let n = !1, l = [];
+  const c = /* @__PURE__ */ new Map(), u = new (e || window.ResizeObserver)((i, d) => {
     l = l.concat(i);
     function r() {
       const o = /* @__PURE__ */ new Set();
       for (let s = 0; s < l.length; s++) {
         if (o.has(l[s].target)) continue;
         o.add(l[s].target);
-        const u = c.get(l[s].target);
-        u == null || u.forEach((p) => p(l[s], d));
+        const a = c.get(l[s].target);
+        a == null || a.forEach((w) => w(l[s], d));
       }
-      l = [], t = !1;
+      l = [], n = !1;
     }
-    t || window.requestAnimationFrame(r), t = !0;
+    n || window.requestAnimationFrame(r), n = !0;
   });
   return {
-    observer: a,
+    observer: u,
     subscribe(i, d) {
       var r;
-      a.observe(i);
+      u.observe(i);
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
       o.push(d), c.set(i, o);
     },
@@ -58,7 +58,7 @@ function N(e) {
       var r;
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
       if (o.length === 1) {
-        a.unobserve(i), c.delete(i);
+        u.unobserve(i), c.delete(i);
         return;
       }
       const s = o.indexOf(d);
@@ -66,12 +66,14 @@ function N(e) {
     }
   };
 }
-let C;
-const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
+let y;
+const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), "Menu"), M = h("div")(
-  ({ mobile: e, shadowSecondary: t }) => ({
-    ...b`
+}), "Menu"), I = j(/* @__PURE__ */ t("path", {
+  d: "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4"
+}), "PersonOutlineOutlined"), L = h("div")(
+  ({ mobile: e, shadowSecondary: n }) => ({
+    ...m`
       z-index: 1313;
       display: flex;
       flex-direction: row;
@@ -80,38 +82,38 @@ const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
       align-items: center;
       justify-content: space-between;
       gap: ${e ? "8px" : "1.5rem"};
-      box-shadow: ${e && t};
+      box-shadow: ${e && n};
     `
   })
-), O = h("img")(({ width: e }) => ({
+), R = h("img")(({ width: e }) => ({
   width: `${e}px`
-})), I = h("div")(({ height: e }) => ({
-  ...b`
+})), _ = h("div")(({ height: e }) => ({
+  ...m`
     display: flex;
     gap: 1rem;
     height: ${e}px;
   `
-})), Y = h("div")(({ width: e, loggedIn: t }) => ({
-  ...b`
+})), ne = h("div")(({ width: e, loggedIn: n }) => ({
+  ...m`
     width: ${e}px;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    flex-direction: ${t ? "column" : "column-reverse"};
+    flex-direction: ${n ? "column" : "column-reverse"};
     flex-shrink: 0;
     * {
       white-space: nowrap;
     }
   `
-})), L = h("div")(({ visible: e }) => ({
-  ...b`
+})), P = h("div")(({ visible: e }) => ({
+  ...m`
     z-index: ${e ? 1 : 0};
     opacity: ${e ? 1 : 0};
     pointer-events: ${e ? "auto" : "none"};
     position: ${e ? "relative" : "absolute"};
   `
-})), R = h("div")(() => ({
-  ...b`
+})), A = h("div")(() => ({
+  ...m`
     display: flex;
     width: 1360px;
     max-width: 100%;
@@ -119,48 +121,66 @@ const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
       width: 100%;
     }
   `
-})), le = ({
+})), fe = ({
   isMobile: e,
-  loggedIn: t,
+  loggedIn: n,
   logoProps: l,
   iconColor: c,
-  themeProps: a,
+  themeProps: u,
   hamburgerMenu: i,
-  avatarColors: d,
-  onHamburgerMenuClick: r,
-  onUserMenuClick: o,
-  onLogin: s
+  iconColors: d,
+  userName: r = "User",
+  userSettingsEnabled: o,
+  onHamburgerMenuClick: s,
+  onUserMenuClick: a,
+  onLogin: w,
+  onSearch: z = () => {
+  }
 }) => {
-  const [u, p] = w(0), [f, _] = w(null), [v, A] = w(null), { logoSrc: $, logoWidth: y, logoHeight: g } = l, { shadowSecondary: H, shadowTertiary: j, iconPrimary: P, borderPrimary: F } = a, z = { shadowTertiary: j, borderColor: F, borderFocusColor: P };
-  B(() => {
-    f && f.clientWidth > u && p(f.clientWidth), v && v.clientWidth > u && p(v.clientWidth);
+  const [b, C] = $(0), [f, V] = $(null), [v, F] = $(null), { logoSrc: O, logoWidth: S, logoHeight: g } = l, { shadowSecondary: U, shadowTertiary: B, iconPrimary: q, borderPrimary: T } = u, W = { shadowTertiary: B, borderColor: T, borderFocusColor: q };
+  J(() => {
+    f && f.clientWidth > b && C(f.clientWidth), v && v.clientWidth > b && C(v.clientWidth);
   }, [f, v]);
-  const U = (m) => {
-    m != null && m.clientWidth && m.clientWidth > u && p(m.clientWidth);
+  const D = (p) => {
+    p != null && p.clientWidth && p.clientWidth > b && C(p.clientWidth);
   };
-  return K(f, () => U(f)), e ? /* @__PURE__ */ x(M, { mobile: !0, shadowSecondary: H, children: [
-    /* @__PURE__ */ n(I, { height: g, children: /* @__PURE__ */ n(O, { src: $, height: `${g}px`, width: y }) }),
-    /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
-    /* @__PURE__ */ n(E, { ...d, onClick: o })
-  ] }) : /* @__PURE__ */ x(M, { children: [
-    /* @__PURE__ */ x(I, { height: g, children: [
-      /* @__PURE__ */ n(O, { src: $, height: `${g}px`, width: y }),
-      i && /* @__PURE__ */ n(k, { variant: "icon", onClick: r, color: c, children: /* @__PURE__ */ n(X, {}) })
+  return Y(f, () => D(f)), e ? /* @__PURE__ */ x(L, { mobile: !0, shadowSecondary: U, children: [
+    /* @__PURE__ */ t(_, { height: g, children: /* @__PURE__ */ t(R, { src: O, height: `${g}px`, width: S }) }),
+    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(M, { onSearch: z, ...W, placeholder: "Search..." }) }),
+    /* @__PURE__ */ t(
+      H,
+      {
+        icon: /* @__PURE__ */ t(I, {}),
+        ...d,
+        onClick: o ? a : void 0
+      }
+    )
+  ] }) : /* @__PURE__ */ x(L, { children: [
+    /* @__PURE__ */ x(_, { height: g, children: [
+      /* @__PURE__ */ t(R, { src: O, height: `${g}px`, width: S }),
+      i && /* @__PURE__ */ t(E, { variant: "icon", onClick: s, color: c, children: /* @__PURE__ */ t(te, {}) })
     ] }),
-    /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
-    /* @__PURE__ */ x(Y, { width: u, loggedIn: !!t, children: [
-      /* @__PURE__ */ n(L, { visible: !!t, ref: _, children: /* @__PURE__ */ n(
-        q,
+    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(M, { onSearch: z, ...W, placeholder: "Search..." }) }),
+    /* @__PURE__ */ x(ne, { width: b, loggedIn: !!n, children: [
+      /* @__PURE__ */ t(P, { visible: !!n, ref: V, children: /* @__PURE__ */ t(
+        K,
         {
           id: "accountMenuContainer",
-          component: /* @__PURE__ */ n(E, { ...d, onClick: o }),
-          label: "Welcome, User"
+          component: /* @__PURE__ */ t(
+            H,
+            {
+              icon: /* @__PURE__ */ t(I, {}),
+              ...d,
+              onClick: o ? a : void 0
+            }
+          ),
+          label: `Hi, ${r}!`
         }
       ) }),
-      /* @__PURE__ */ n(L, { visible: !t, ref: A, children: /* @__PURE__ */ n(k, { id: "loginButtonContainer", onClick: s, children: "Log In" }) })
+      /* @__PURE__ */ t(P, { visible: !n, ref: F, children: /* @__PURE__ */ t(E, { id: "loginButtonContainer", onClick: w, children: "Log In" }) })
     ] })
   ] });
 };
 export {
-  le as default
+  fe as default
 };

package/Button/Button.js

@@ -1,6 +1,6 @@
 import { jsxs as H, jsx as l } from "react/jsx-runtime";
 import * as g from "react";
-import { g as _, a as A, s as c, r as q, c as d, f as J, u as K, b as O, P as t, d as Q, e as v } from "../.chunks/DefaultPropsProvider.js";
+import { g as _, a as A, s as d, r as q, c, f as J, u as K, b as O, P as t, d as Q, e as v } from "../.chunks/DefaultPropsProvider.js";
 import { m as X } from "../.chunks/memoTheme.js";
 import { c as Y } from "../.chunks/createSimplePaletteValueFilter.js";
 import { B as S } from "../.chunks/ButtonBase.js";
@@ -23,10 +23,10 @@ const to = (o) => {
     variant: s,
     classes: p
   } = o, y = {
-    root: ["root", s, `${s}${d(a)}`, `size${d(i)}`, `${s}Size${d(i)}`, `color${d(a)}`, r && "disableElevation", e && "fullWidth"],
+    root: ["root", s, `${s}${c(a)}`, `size${c(i)}`, `${s}Size${c(i)}`, `color${c(a)}`, r && "disableElevation", e && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${d(i)}`],
-    endIcon: ["icon", "endIcon", `iconSize${d(i)}`]
+    startIcon: ["icon", "startIcon", `iconSize${c(i)}`],
+    endIcon: ["icon", "endIcon", `iconSize${c(i)}`]
   }, B = Q(y, oo, p);
   return {
     ...p,
@@ -60,7 +60,7 @@ const to = (o) => {
       fontSize: 22
     }
   }
-}], ro = c(S, {
+}], ro = d(S, {
   shouldForwardProp: (o) => q(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
@@ -68,7 +68,7 @@ const to = (o) => {
     const {
       ownerState: r
     } = o;
-    return [a.root, a[r.variant], a[`${r.variant}${d(r.color)}`], a[`size${d(r.size)}`], a[`${r.variant}Size${d(r.size)}`], r.color === "inherit" && a.colorInherit, r.disableElevation && a.disableElevation, r.fullWidth && a.fullWidth];
+    return [a.root, a[r.variant], a[`${r.variant}${c(r.color)}`], a[`size${c(r.size)}`], a[`${r.variant}Size${c(r.size)}`], r.color === "inherit" && a.colorInherit, r.disableElevation && a.disableElevation, r.fullWidth && a.fullWidth];
   }
 })(X(({
   theme: o
@@ -256,14 +256,14 @@ const to = (o) => {
       }
     }]
   };
-})), ao = c("span", {
+})), ao = d("span", {
   name: "MuiButton",
   slot: "StartIcon",
   overridesResolver: (o, a) => {
     const {
       ownerState: r
     } = o;
-    return [a.startIcon, a[`iconSize${d(r.size)}`]];
+    return [a.startIcon, a[`iconSize${c(r.size)}`]];
   }
 })({
   display: "inherit",
@@ -277,14 +277,14 @@ const to = (o) => {
       marginLeft: -2
     }
   }, ...N]
-}), no = c("span", {
+}), no = d("span", {
   name: "MuiButton",
   slot: "EndIcon",
   overridesResolver: (o, a) => {
     const {
       ownerState: r
     } = o;
-    return [a.endIcon, a[`iconSize${d(r.size)}`]];
+    return [a.endIcon, a[`iconSize${c(r.size)}`]];
   }
 })({
   display: "inherit",
@@ -307,9 +307,9 @@ const to = (o) => {
     color: B = "primary",
     component: w = "button",
     className: P,
-    disabled: C = !1,
+    disabled: m = !1,
     disableElevation: W = !1,
-    disableFocusRipple: m = !1,
+    disableFocusRipple: C = !1,
     endIcon: h,
     focusVisibleClassName: V,
     fullWidth: M = !1,
@@ -322,9 +322,9 @@ const to = (o) => {
     ...p,
     color: B,
     component: w,
-    disabled: C,
+    disabled: m,
     disableElevation: W,
-    disableFocusRipple: m,
+    disableFocusRipple: C,
     fullWidth: M,
     size: j,
     type: k,
@@ -342,8 +342,8 @@ const to = (o) => {
     ownerState: x,
     className: O(e.className, b.root, P, U),
     component: w,
-    disabled: C,
-    focusRipple: !m,
+    disabled: m,
+    focusRipple: !C,
     focusVisibleClassName: O(b.focusVisible, V),
     ref: r,
     type: k,
@@ -446,7 +446,7 @@ process.env.NODE_ENV !== "production" && (T.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const $ = c(T)`
+const $ = d(T)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
@@ -455,7 +455,7 @@ const $ = c(T)`
     justify-content: center;
     align-items: center;
   }
-`, eo = c($)`
+`, eo = d($)`
   background-color: ${n.colors.green};
   border-radius: 0;
   height: 2.5rem;
@@ -475,11 +475,11 @@ const $ = c(T)`
   &:disabled {
     background-color: ${n.colors.darkGreen};
   }
-`, io = c($)`
+`, io = d($)`
   color: ${n.colors.black};
   border: 3px solid ${n.colors.blue};
   padding: 0.5rem 2rem;
-`, z = c($)(({ width: o = "114px" }) => ({
+`, z = d($)(({ width: o = "114px" }) => ({
   ...f`
     box-sizing: border-box;
     background-color: ${n.colors.bibiBlue};
@@ -497,7 +497,7 @@ const $ = c(T)`
       background-color: ${n.colors.bibiBlueHover};
     }
   `
-})), so = c(z)(({ active: o }) => ({
+})), so = d(z)(({ active: o }) => ({
   ...f`
     background-color: ${o && n.colors.white};
     color: ${o && n.colors.bibiBlue};
@@ -507,7 +507,7 @@ const $ = c(T)`
       color: ${n.colors.bibiBlue};
     }
   `
-})), lo = c(z)(() => ({
+})), lo = d(z)(() => ({
   ...f`
     background-color: ${n.colors.white};
     color: ${n.colors.bibiBlue};
@@ -518,9 +518,9 @@ const $ = c(T)`
       color: ${n.colors.white};
     }
   `
-})), co = c(S)`
+})), co = d(S)`
   border-radius: 8px;
-`, po = c(S, {
+`, po = d(S, {
   shouldForwardProp: (o) => typeof o == "string" && Z(o)
 })(({ size: o, color: a, highlightColor: r }) => ({
   ...f`
@@ -552,7 +552,7 @@ const $ = c(T)`
   highlightColor: e = n.colors.dandelion,
   children: i,
   ...s
-}) => o === "bibi" ? /* @__PURE__ */ l(z, { ...s, children: i }) : o === "bibiOutlined" ? /* @__PURE__ */ l(so, { ...s, children: i }) : o === "bibiInverse" ? /* @__PURE__ */ l(lo, { ...s, children: i }) : o === "unstyled" ? /* @__PURE__ */ l(co, { ...s, children: i }) : o === 2 ? /* @__PURE__ */ l(io, { ...s, children: /* @__PURE__ */ l("span", { children: i }) }) : o === "icon" ? /* @__PURE__ */ l(po, { ...{ size: a, color: r, highlightColor: e }, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
+}) => o === "bibi" ? /* @__PURE__ */ l(z, { ...s, children: i }) : o === "bibiOutlined" ? /* @__PURE__ */ l(so, { ...s, children: i }) : o === "bibiInverse" ? /* @__PURE__ */ l(lo, { ...s, children: i }) : o === "unstyled" ? /* @__PURE__ */ l(co, { ...s, children: i }) : o === 2 ? /* @__PURE__ */ l(io, { ...s, children: /* @__PURE__ */ l("span", { children: i }) }) : o === "icon" ? /* @__PURE__ */ l(po, { className: "jcButton", ...{ size: a, color: r, highlightColor: e }, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
 export {
   So as Button,
   So as default

package/EditableInfoCard/EditableInfoCard.js

@@ -11,7 +11,7 @@ import L from "../Loading/Loading.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 _ } from "../.chunks/Input.js";
+import { T as _ } from "../.chunks/TextField.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"

package/Icon/Icon.d.ts

@@ -4,6 +4,7 @@ export interface IconProps {
     iconColor?: string;
     backgroundColor?: string;
     size?: number;
+    padding?: number;
 }
 declare const Icon: React.FC<IconProps & ButtonBaseProps>;
 export default Icon;

package/Icon/Icon.js

@@ -1,26 +1,29 @@
-import { jsx as i } from "react/jsx-runtime";
-import { B as c } from "../.chunks/ButtonBase.js";
-import t from "../theme.js";
-import { n as l, i as p } from "../.chunks/emotion-styled.browser.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+import { B as p } from "../.chunks/ButtonBase.js";
+import i from "../theme.js";
+import { n as l, i as m } from "../.chunks/emotion-styled.browser.esm.js";
 const a = l("div", {
-  shouldForwardProp: (r) => p(r)
+  shouldForwardProp: (r) => m(r)
 })(
-  ({ iconColor: r = t.colors.darkGreen, backgroundColor: n = t.colors.mint, size: e = 40 }) => ({
+  ({ iconColor: r = i.colors.darkGreen, backgroundColor: n = i.colors.mint, size: o = 40, padding: s = 8 }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    borderRadius: "50%",
+    boxShadow: `0 0 2px ${i.colors.midnight}`,
     svg: {
+      boxSizing: "border-box",
       border: `1px solid ${r}`,
       backgroundColor: n,
       borderRadius: "50%",
-      padding: "8px",
+      padding: `${s}px`,
       fill: r,
-      width: `${e - 18}px`,
-      height: `${e - 18}px`,
+      width: `${o}px`,
+      height: `${o}px`,
       pointerEvents: "none"
     }
   })
-), m = l(c)({
+), h = l(p)({
   backgroundColor: "transparent",
   borderRadius: "50%",
   span: {
@@ -28,19 +31,20 @@ const a = l("div", {
   },
   "&:hover, :focus-visible": {
     span: {
-      backgroundColor: t.colors.grayO44
+      backgroundColor: i.colors.grayO44
     }
   }
-}), x = ({
+}), b = ({
   icon: r,
   iconColor: n,
-  backgroundColor: e,
-  size: d,
-  ...o
+  backgroundColor: o,
+  size: s,
+  padding: c,
+  ...e
 }) => {
-  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 });
+  const d = { iconColor: n, backgroundColor: o, size: s, padding: c };
+  return e != null && e.onClick ? /* @__PURE__ */ t(h, { ...e, children: /* @__PURE__ */ t(a, { ...d, children: r }) }) : /* @__PURE__ */ t(a, { ...d, children: r });
 };
 export {
-  x as default
+  b as default
 };

package/Input/Input.d.ts

@@ -1,8 +1,5 @@
 import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
 export type InputProps = Omit<MuiTextFieldProps, 'variant'> & {
-    variant?: 'outlined' | 'simple';
-    shadowTertiary?: string;
-    borderColor?: string;
     borderFocusColor?: string;
 };
 export declare const Input: React.FC<InputProps>;

package/Input/Input.js

@@ -1,8 +1,43 @@
-import "react/jsx-runtime";
-import "../.chunks/emotion-styled.browser.esm.js";
-import "../theme.js";
-import { I as a, I as i } from "../.chunks/Input.js";
+import { jsx as i } from "react/jsx-runtime";
+import { n as t } from "../.chunks/emotion-styled.browser.esm.js";
+import r from "../theme.js";
+import { T as d } from "../.chunks/TextField.js";
+const s = t(d, {
+  shouldForwardProp: (o) => o != "borderFocusColor"
+})(({ borderFocusColor: o }) => ({
+  backgroundColor: r.colors.white,
+  borderRadius: "0",
+  height: "18px",
+  input: {
+    transition: "313ms all ease-out",
+    height: "15px",
+    padding: "2px 0",
+    borderRadius: "0",
+    borderBottom: `1px solid ${r.colors.gray}`,
+    "&:focus-visible": {
+      boxShadow: `0 3px 2px -2px ${o}`
+    }
+  },
+  "&:hover, :focus-visible": {
+    input: {
+      boxShadow: `0 3px 2px -2px ${o}`
+    }
+  },
+  fieldset: {
+    borderRadius: "0",
+    border: "none"
+  },
+  "&.Mui-focused": {
+    fieldset: {
+      border: "none"
+    }
+  }
+})), x = ({
+  borderFocusColor: o = r.colors.darkGreen,
+  // icon primary
+  ...e
+}) => /* @__PURE__ */ i(s, { borderFocusColor: o, ...e });
 export {
-  a as Input,
-  i as default
+  x as Input,
+  x as default
 };

package/Input/index.js

@@ -1,4 +1,4 @@
-import { I as f } from "../.chunks/Input.js";
+import { Input as e } from "./Input.js";
 export {
-  f as default
+  e as default
 };

package/LabeledInput/LabeledInput.js

@@ -1,7 +1,7 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
 import { n as p } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as s } from "../.chunks/emotion-react.browser.esm.js";
-import { I as i } from "../.chunks/Input.js";
+import { Input as i } from "../Input/Input.js";
 const n = p("div")(({ grid: t }) => ({
   ...s`
     display: flex;
@@ -23,12 +23,12 @@ const n = p("div")(({ grid: t }) => ({
       width: ${t && "calc(100% + 4px)"};
     }
   `
-})), c = ({ label: t, grid: a = !0, ...o }) => /* @__PURE__ */ e(n, { grid: a, children: [
+})), c = ({ label: t, grid: o = !0, ...r }) => /* @__PURE__ */ e(n, { grid: o, children: [
   /* @__PURE__ */ e("span", { children: [
     t,
     ":"
   ] }),
-  /* @__PURE__ */ r(i, { variant: "simple", ...o })
+  /* @__PURE__ */ a(i, { ...r })
 ] });
 export {
   c as LabeledInput,

package/ListButton/ListButton.d.ts

@@ -5,7 +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<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"> & {
+declare const ListButton: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonBaseOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef"> & {
     theme?: import('@emotion/react').Theme;
 } & ListButtonProps, {}, {}>;
 export default ListButton;