@caseparts-org/caseblocks 0.0.111 → 0.0.113

package/dist/assets/Account.css

@@ -1 +1 @@
-._loggedIn_w7zna_1{flex-shrink:0;gap:var(--spacing-spacing-2xs);cursor:pointer;transition:all .3s linear;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--spacing-spacing-3xs)}._customer_w7zna_12>a,._customer_w7zna_12>a:hover{text-decoration:none}._loggedIn_w7zna_1:hover{background-color:#f3f3f3;border-radius:var(--border-radius-md)}._placeholder_w7zna_21{height:30px;width:120px}@media (max-width:1280px){._placeholder_w7zna_21{width:30px;height:30px}}
+._loggedIn_1sipy_1{flex-shrink:0;gap:var(--spacing-spacing-2xs);cursor:pointer;transition:all .3s linear;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--spacing-spacing-3xs)}._customer_1sipy_12>a,._customer_1sipy_12>a:hover{text-decoration:none}._loggedIn_1sipy_1:hover{background-color:#f3f3f3;border-radius:var(--border-radius-md)}._placeholder_1sipy_21{width:32px;width:120px}@media (max-width:1280px){._placeholder_1sipy_21{width:32px;height:32px;background-color:#f3f3f3;border-radius:100%}}

package/dist/assets/Modal.css

@@ -0,0 +1 @@
+._overlay_vmpn5_1{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}._container_vmpn5_11{background-color:var(--surface-surface-primary);color:var(--text-text-primary);border-radius:var(--border-radius-sm);box-shadow:0 4px 6px #0000001a;width:min(800px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}@media (max-width:767px){._container_vmpn5_11{border-radius:0;width:100%;box-shadow:none;height:100dvh;max-height:100dvh}}._header_vmpn5_30{position:sticky;top:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--surface-surface-secondary);border-bottom:1px solid var(--border-border-secondary-btn);padding:var(--spacing-spacing-2xs);z-index:1}._closeButton_vmpn5_53{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:var(--spacing-spacing-4xs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit;padding:0}._content_vmpn5_69{overflow:auto;padding:var(--spacing-spacing-default)}@media (max-width:767px){._content_vmpn5_69{padding:var(--spacing-spacing-2xs)}}._headerPlain_vmpn5_77{background-color:transparent;border-bottom:none}

package/dist/atoms/Popover/Popover.d.ts

@@ -1,14 +1,47 @@
 import * as React from "react";
 type PositionKeyword = "top" | "right" | "bottom" | "left";
 type Position = "top left" | "top center" | "top right" | "right top" | "right center" | "right bottom" | "bottom left" | "bottom center" | "bottom right" | "left top" | "left center" | "left bottom" | PositionKeyword;
+type PopoverAPI = {
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+};
+export declare function usePopover(): PopoverAPI;
 export type PopoverProps = {
     trigger: React.ReactElement;
-    children: React.ReactNode;
+    children: React.ReactNode | ((api: PopoverAPI) => React.ReactNode);
     position?: Position;
     popoverClassName?: string;
     contentClassName?: string;
     disabled?: boolean;
     closeOnOutsideClick?: boolean;
+    /** If true, clicking any element with `data-popover-close` inside content will close */
+    closeOnInsideClickAttr?: boolean;
+    /** Controlled open state; when provided, component becomes controlled */
+    open?: boolean;
+    /** Controlled state change callback */
+    onOpenChange?: (_open: boolean) => void;
 };
+/**
+ * Popover close control options:
+ * 1) Attribute-based (simple): Add `data-popover-close="true"` to any element
+ *    inside the popover content. Clicking it will auto-close the popover.
+ *    Ideal for links or straightforward buttons (e.g., Sign out, navigate).
+ *
+ * 2) Controlled via app context (global): Provide `open` and `onOpenChange` props
+ *    from your app state (e.g., InterfaceProvider). This allows opening/closing
+ *    the popover from anywhere in the application and keeps UI state consistent.
+ *    Example: `<Popover open={accountMenuOpen} onOpenChange={setAccountMenuOpen} ... />`
+ *
+ * 3) Local control via Popover context: Use `usePopover()` inside the popover content
+ *    to access `{ close, open, toggle }`. Call `close()` after actions (async or conditional)
+ *    to programmatically close only the current popover instance. Alternatively, pass
+ *    a render-prop as children and receive the same API: `{({ close }) => ... }`.
+ *
+ * Notes:
+ * - Each Popover instance provides its own context, so `usePopover()` affects only that instance.
+ * - When `open` is provided, the component becomes controlled and calls `onOpenChange`.
+ * - Outside-click and Escape key will still close the popover unless disabled via props.
+ */
 export declare const Popover: React.FC<PopoverProps>;
 export {};

package/dist/atoms/Popover/Popover.js

@@ -1,104 +1,126 @@
-import { jsxs as z, Fragment as P, jsx as b } from "react/jsx-runtime";
-import * as u from "react";
-import { r as k } from "../../index-B4KbmMH3.js";
-import { c as x } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Popover.css';const C = "_popover_vlr81_1", M = "_content_vlr81_7", L = {
-  popover: C,
-  content: M
-};
-function S(o) {
+import { jsxs as H, jsx as k } from "react/jsx-runtime";
+import * as s from "react";
+import { r as N } from "../../index-B4KbmMH3.js";
+import { c as z } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Popover.css';const W = "_popover_vlr81_1", q = "_content_vlr81_7", M = {
+  popover: W,
+  content: q
+}, S = s.createContext(null);
+function K() {
+  const o = s.useContext(S);
+  if (!o)
+    throw new Error("usePopover must be used within a Popover");
+  return o;
+}
+function D(o) {
   return o ? o.includes(" ") ? o : `${o} center` : "top center";
 }
-function j(o) {
-  const m = S(o).toLowerCase(), [c, l] = m.split(" ");
+function F(o) {
+  const p = D(o).toLowerCase(), [c, l] = p.split(" ");
   return { side: ["top", "right", "bottom", "left"].includes(c) ? c : "top", align: l === "left" || l === "top" ? "start" : l === "right" || l === "bottom" ? "end" : "center" };
 }
-function B(o, m, c, l, p = 8) {
-  const e = o.getBoundingClientRect(), a = m.getBoundingClientRect();
-  let i = 0, s = 0;
-  c === "top" ? i = e.top - a.height - p : c === "bottom" ? i = e.bottom + p : c === "left" ? s = e.left - a.width - p : c === "right" && (s = e.right + p), c === "top" || c === "bottom" ? l === "start" ? s = e.left : l === "end" ? s = e.right - a.width : s = e.left + e.width / 2 - a.width / 2 : l === "start" ? i = e.top : l === "end" ? i = e.bottom - a.height : i = e.top + e.height / 2 - a.height / 2;
-  const r = window.innerWidth, w = window.innerHeight;
-  return i = Math.max(4, Math.min(w - a.height - 4, i)), s = Math.max(4, Math.min(r - a.width - 4, s)), { top: i, left: s };
+function U(o, p, c, l, d = 8) {
+  const n = o.getBoundingClientRect(), u = p.getBoundingClientRect();
+  let a = 0, f = 0;
+  c === "top" ? a = n.top - u.height - d : c === "bottom" ? a = n.bottom + d : c === "left" ? f = n.left - u.width - d : c === "right" && (f = n.right + d), c === "top" || c === "bottom" ? l === "start" ? f = n.left : l === "end" ? f = n.right - u.width : f = n.left + n.width / 2 - u.width / 2 : l === "start" ? a = n.top : l === "end" ? a = n.bottom - u.height : a = n.top + n.height / 2 - u.height / 2;
+  const w = window.innerWidth, h = window.innerHeight;
+  return a = Math.max(4, Math.min(h - u.height - 4, a)), f = Math.max(4, Math.min(w - u.width - 4, f)), { top: a, left: f };
 }
-const q = ({
+const Q = ({
   trigger: o,
-  children: m,
+  children: p,
   position: c,
   popoverClassName: l,
-  contentClassName: p,
-  disabled: e,
-  closeOnOutsideClick: a = !0
+  contentClassName: d,
+  disabled: n,
+  closeOnOutsideClick: u = !0,
+  closeOnInsideClickAttr: a = !0,
+  open: f,
+  onOpenChange: w
 }) => {
-  const { side: i, align: s } = j(c), [r, w] = u.useState(!1), [f, g] = u.useState(null), v = u.useRef(null), h = u.useRef(null), R = () => {
-    e || w((t) => !t);
-  }, E = () => w(!1), _ = u.cloneElement(o, {
+  const { side: h, align: y } = F(c), [C, j] = s.useState(!1), P = typeof f == "boolean", r = P ? f : C, [v, R] = s.useState(null), b = s.useRef(null), m = s.useRef(null), x = (t) => {
+    const e = typeof t == "function" ? t(r) : t;
+    P ? w == null || w(e) : j(e);
+  }, L = () => {
+    n || x((t) => !t);
+  }, E = () => x(!1), _ = () => x(!0), B = s.cloneElement(o, {
     ref: (t) => {
-      const { ref: n } = o;
-      typeof n == "function" ? n(t) : n && (n.current = t), v.current = t;
+      const { ref: e } = o;
+      typeof e == "function" ? e(t) : e && (e.current = t), b.current = t;
     },
     onClick: (t) => {
-      var n, d;
-      (d = (n = o.props).onClick) == null || d.call(n, t), R();
+      var e, i;
+      (i = (e = o.props).onClick) == null || i.call(e, t), L();
     },
     "aria-haspopup": "dialog",
     "aria-expanded": r || void 0,
     "aria-controls": r ? "popover-panel" : void 0,
     style: { ...o.props.style || {}, outline: "none" }
   });
-  return u.useLayoutEffect(() => {
+  return s.useLayoutEffect(() => {
     if (!r) {
-      g(null);
+      R(null);
       return;
     }
-    const t = v.current, n = h.current;
-    if (!t || !n) return;
-    const d = () => {
-      g(B(t, n, i, s, 8));
+    const t = b.current, e = m.current;
+    if (!t || !e) return;
+    const i = () => {
+      R(U(t, e, h, y, 8));
     };
-    return d(), window.addEventListener("resize", d), window.addEventListener("scroll", d, !0), () => {
-      window.removeEventListener("resize", d), window.removeEventListener("scroll", d, !0);
+    return i(), window.addEventListener("resize", i), window.addEventListener("scroll", i, !0), () => {
+      window.removeEventListener("resize", i), window.removeEventListener("scroll", i, !0);
     };
-  }, [r, i, s, m]), u.useEffect(() => {
-    if (!r || !a) return;
-    const t = (n) => {
-      const d = h.current, y = v.current;
-      !d || !y || d.contains(n.target) || y.contains(n.target) || E();
+  }, [r, h, y, p]), s.useEffect(() => {
+    if (!r || !u) return;
+    const t = (e) => {
+      const i = m.current, g = b.current;
+      !i || !g || i.contains(e.target) || g.contains(e.target) || E();
     };
     return window.addEventListener("mousedown", t), () => window.removeEventListener("mousedown", t);
-  }, [r, a]), u.useEffect(() => {
+  }, [r, u]), s.useEffect(() => {
+    if (!r || !a) return;
+    const t = m.current;
+    if (!t) return;
+    const e = (i) => {
+      const g = i.target;
+      if (!g) return;
+      g.closest('[data-popover-close="true"]') && E();
+    };
+    return t.addEventListener("click", e), () => t.removeEventListener("click", e);
+  }, [r, a]), s.useEffect(() => {
     if (!r) return;
-    const t = (n) => {
-      n.key === "Escape" && E();
+    const t = (e) => {
+      e.key === "Escape" && E();
     };
     return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-  }, [r]), u.useEffect(() => {
-    if (r && h.current) {
-      const t = h.current.querySelector(
+  }, [r]), s.useEffect(() => {
+    if (r && m.current) {
+      const t = m.current.querySelector(
         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
       );
       t == null || t.focus();
     }
-  }, [r]), /* @__PURE__ */ z(P, { children: [
-    _,
-    r && typeof document < "u" && k.createPortal(
-      /* @__PURE__ */ b(
+  }, [r]), /* @__PURE__ */ H(S.Provider, { value: { close: E, open: _, toggle: L }, children: [
+    B,
+    r && typeof document < "u" && N.createPortal(
+      /* @__PURE__ */ k(
         "div",
         {
           id: "popover-panel",
-          ref: h,
+          ref: m,
           role: "dialog",
           "aria-modal": "false",
-          className: x(L.popover, l),
-          "data-side": i,
-          "data-align": s,
+          className: z(M.popover, l),
+          "data-side": h,
+          "data-align": y,
           style: {
             position: "absolute",
-            top: (f == null ? void 0 : f.top) ?? 0,
-            left: (f == null ? void 0 : f.left) ?? 0,
-            visibility: f ? "visible" : "hidden",
+            top: (v == null ? void 0 : v.top) ?? 0,
+            left: (v == null ? void 0 : v.left) ?? 0,
+            visibility: v ? "visible" : "hidden",
             zIndex: 20
           },
-          children: /* @__PURE__ */ b("div", { className: x(L.content, p), children: m })
+          children: /* @__PURE__ */ k("div", { className: z(M.content, d), children: typeof p == "function" ? p({ close: E, open: _, toggle: L }) : p })
         }
       ),
       document.body
@@ -106,5 +128,6 @@ const q = ({
   ] });
 };
 export {
-  q as Popover
+  Q as Popover,
+  K as usePopover
 };

package/dist/atoms/Popover/Popover.stories.d.ts

@@ -64,3 +64,5 @@ export declare const PositionRight: Story;
 export declare const PositionLeft: Story;
 export declare const InteractiveContent: Story;
 export declare const OutsideClickDisabled: Story;
+export declare const AttributeClose: Story;
+export declare const RenderPropClose: Story;

package/dist/atoms/Popover/Popover.stories.js

@@ -57,21 +57,21 @@ const k = {
     children: { description: "Popover content (interactive)." }
   }
 }, r = () => /* @__PURE__ */ e("style", { children: ".storyRoboto{font-family:'Roboto',sans-serif;}" }), R = {
-  render: (c) => /* @__PURE__ */ t(n, { children: [
+  render: (l) => /* @__PURE__ */ t(n, { children: [
     /* @__PURE__ */ e(r, {}),
     /* @__PURE__ */ e(
       i,
       {
-        ...c,
+        ...l,
         contentClassName: "storyRoboto",
         trigger: /* @__PURE__ */ e(o, { size: "md", variant: "primary", children: "Open form" }),
         children: /* @__PURE__ */ e(() => {
-          const [s, m] = a.useState(""), [p, h] = a.useState(""), [g, u] = a.useState(!1);
+          const [c, m] = a.useState(""), [p, h] = a.useState(""), [g, u] = a.useState(!1);
           return /* @__PURE__ */ t(
             "form",
             {
-              onSubmit: (l) => {
-                l.preventDefault(), u(!0);
+              onSubmit: (s) => {
+                s.preventDefault(), u(!0);
               },
               style: { display: "flex", flexDirection: "column", gap: 8, minWidth: 220 },
               children: [
@@ -80,8 +80,8 @@ const k = {
                   /* @__PURE__ */ e(
                     "input",
                     {
-                      value: s,
-                      onChange: (l) => m(l.target.value),
+                      value: c,
+                      onChange: (s) => m(s.target.value),
                       placeholder: "Jane Doe",
                       style: { padding: 4 }
                     }
@@ -94,7 +94,7 @@ const k = {
                     {
                       type: "email",
                       value: p,
-                      onChange: (l) => h(l.target.value),
+                      onChange: (s) => h(s.target.value),
                       placeholder: "jane@example.com",
                       style: { padding: 4 }
                     }
@@ -103,7 +103,7 @@ const k = {
                 /* @__PURE__ */ e("button", { type: "submit", style: { padding: "4px 8px" }, children: "Submit" }),
                 g && /* @__PURE__ */ t("div", { style: { fontSize: 12, color: "var(--color-neutrals-neutral-6)" }, children: [
                   "Submitted: ",
-                  s || "(no name)",
+                  c || "(no name)",
                   ", ",
                   p || "(no email)"
                 ] })
@@ -127,7 +127,7 @@ const k = {
       }
     )
   ] })
-}, S = {
+}, z = {
   render: () => /* @__PURE__ */ t(n, { children: [
     /* @__PURE__ */ e(r, {}),
     /* @__PURE__ */ e(
@@ -140,7 +140,7 @@ const k = {
       }
     )
   ] })
-}, P = {
+}, S = {
   render: () => /* @__PURE__ */ t(n, { children: [
     /* @__PURE__ */ e(r, {}),
     /* @__PURE__ */ e(
@@ -153,10 +153,10 @@ const k = {
       }
     )
   ] })
-}, O = {
+}, P = {
   render: () => /* @__PURE__ */ e(y, {})
 }, y = () => {
-  const [c, d] = a.useState(0);
+  const [l, d] = a.useState(0);
   return /* @__PURE__ */ t(n, { children: [
     /* @__PURE__ */ e(r, {}),
     /* @__PURE__ */ e(
@@ -168,8 +168,8 @@ const k = {
         children: /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 10, minWidth: 240 }, children: [
           /* @__PURE__ */ e("div", { style: { fontWeight: 500 }, children: "Counter demo" }),
           /* @__PURE__ */ t("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-            /* @__PURE__ */ e(o, { size: "sm", variant: "secondary", onClick: () => d((s) => s + 1), children: "Increment" }),
-            /* @__PURE__ */ e("span", { style: { minWidth: 32, textAlign: "center" }, children: c }),
+            /* @__PURE__ */ e(o, { size: "sm", variant: "secondary", onClick: () => d((c) => c + 1), children: "Increment" }),
+            /* @__PURE__ */ e("span", { style: { minWidth: 32, textAlign: "center" }, children: l }),
             /* @__PURE__ */ e(o, { size: "sm", variant: "tertiary", onClick: () => d(0), children: "Reset" })
           ] }),
           /* @__PURE__ */ e("hr", { style: { border: 0, height: 1, background: "#ddd" } }),
@@ -181,7 +181,7 @@ const k = {
       }
     )
   ] });
-}, z = {
+}, D = {
   render: () => /* @__PURE__ */ t(n, { children: [
     /* @__PURE__ */ e(r, {}),
     /* @__PURE__ */ e(
@@ -195,13 +195,49 @@ const k = {
       }
     )
   ] })
+}, O = {
+  render: () => /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(r, {}),
+    /* @__PURE__ */ e(
+      i,
+      {
+        position: "bottom center",
+        contentClassName: "storyRoboto",
+        trigger: /* @__PURE__ */ e(o, { size: "md", variant: "secondary", children: "Attribute close" }),
+        children: /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8, minWidth: 220 }, children: [
+          /* @__PURE__ */ e("a", { href: "#", "data-popover-close": "true", children: "Simple link (auto-close)" }),
+          /* @__PURE__ */ e("button", { "data-popover-close": "true", style: { padding: "4px 8px" }, children: "Button (auto-close)" })
+        ] })
+      }
+    )
+  ] })
+}, W = {
+  render: () => /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(r, {}),
+    /* @__PURE__ */ e(
+      i,
+      {
+        position: "bottom center",
+        contentClassName: "storyRoboto",
+        trigger: /* @__PURE__ */ e(o, { size: "md", variant: "primary", children: "Render-prop close" }),
+        children: (l) => /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8, minWidth: 220 }, children: [
+          /* @__PURE__ */ e(o, { size: "sm", variant: "secondary", onClick: () => l.close(), children: "Close programmatically" }),
+          /* @__PURE__ */ e(o, { size: "sm", variant: "tertiary", onClick: () => {
+            setTimeout(() => l.close(), 300);
+          }, children: "Async close (300ms)" })
+        ] })
+      }
+    )
+  ] })
 };
 export {
+  O as AttributeClose,
   R as BasicClick,
   N as BottomClick,
-  O as InteractiveContent,
-  z as OutsideClickDisabled,
-  P as PositionLeft,
-  S as PositionRight,
+  P as InteractiveContent,
+  D as OutsideClickDisabled,
+  S as PositionLeft,
+  z as PositionRight,
+  W as RenderPropClose,
   k as default
 };

package/dist/molecules/Account/Account.d.ts

@@ -7,8 +7,10 @@ export interface AccountProps extends React.HTMLAttributes<HTMLDivElement>, Hide
         number: string;
         /** The account user's name. */
         name: string;
-        /** The account user's initials. */
-        initials: string;
+        /** The account user's initials. Used when no custom avatar JSX is provided. */
+        initials?: string;
+        /** Optional custom avatar content. If provided, it will be rendered instead of the default Avatar. */
+        avatar?: React.ReactNode;
     };
     onLoginClick: () => void;
     /** Optional content to show when clicking the authenticated container */

package/dist/molecules/Account/Account.js

@@ -1,40 +1,40 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { getHideAtStyles as a } from "../../atoms/HideAt.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { getHideAtStyles as m } from "../../atoms/HideAt.js";
 import { Icon as f } from "../../atoms/Icon/Icon.js";
 import { Text as c } from "../../atoms/Text/Text.js";
-import { Avatar as h } from "../Avatar/Avatar.js";
+import { Avatar as u } from "../Avatar/Avatar.js";
 import { Flex as d } from "../../atoms/Flex/Flex.js";
 import { Button as p } from "../../atoms/Button/Button.js";
 import { Popover as A } from "../../atoms/Popover/Popover.js";
 import { c as g } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Account.css';const x = "_loggedIn_w7zna_1", v = "_customer_w7zna_12", I = "_placeholder_w7zna_21", t = {
+import '../../assets/Account.css';const x = "_loggedIn_1sipy_1", v = "_customer_1sipy_12", I = "_placeholder_1sipy_21", o = {
   loggedIn: x,
   customer: v,
   placeholder: I
 };
-function z(i) {
+function y(i) {
   return i.account !== void 0;
 }
-function T(i) {
-  return i.isAccountLoading ? /* @__PURE__ */ o("div", { className: t.placeholder }) : z(i) ? /* @__PURE__ */ o(_, { ...i }) : /* @__PURE__ */ o(N, { ...i });
+function j(i) {
+  return i.isAccountLoading ? /* @__PURE__ */ t("div", { className: o.placeholder }) : y(i) ? /* @__PURE__ */ t(_, { ...i }) : /* @__PURE__ */ t(N, { ...i });
 }
 function _(i) {
   const {
     account: e,
     className: r,
     hideAt: s,
-    popoverContent: m,
-    isAccountLoading: u,
+    popoverContent: a,
+    isAccountLoading: h,
     ...l
   } = i;
-  return m ? /* @__PURE__ */ o(
+  return a ? /* @__PURE__ */ t(
     A,
     {
       position: "bottom right",
       trigger: /* @__PURE__ */ n(
         "div",
         {
-          className: g(t.loggedIn, a(s), r),
+          className: g(o.loggedIn, m(s), r),
           ...l,
           children: [
             /* @__PURE__ */ n(
@@ -43,7 +43,7 @@ function _(i) {
                 flexDirection: "column",
                 alignItems: "flex-end",
                 hideAt: ["sm", "md"],
-                className: t.customer,
+                className: o.customer,
                 children: [
                   /* @__PURE__ */ n(c, { size: "xxs", children: [
                     "Acct: ",
@@ -56,16 +56,16 @@ function _(i) {
                 ]
               }
             ),
-            /* @__PURE__ */ o(h, { initials: e.initials })
+            e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
           ]
         }
       ),
-      children: m
+      children: a
     }
   ) : /* @__PURE__ */ n(
     "div",
     {
-      className: g(t.loggedIn, a(s), r),
+      className: g(o.loggedIn, m(s), r),
       ...l,
       children: [
         /* @__PURE__ */ n(
@@ -74,7 +74,7 @@ function _(i) {
             flexDirection: "column",
             alignItems: "flex-end",
             hideAt: ["sm", "md"],
-            className: t.customer,
+            className: o.customer,
             children: [
               /* @__PURE__ */ n(c, { size: "xxs", children: [
                 "Acct: ",
@@ -87,7 +87,7 @@ function _(i) {
             ]
           }
         ),
-        /* @__PURE__ */ o(h, { initials: e.initials })
+        e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
       ]
     }
   );
@@ -97,8 +97,8 @@ function N(i) {
     onLoginClick: e,
     className: r,
     hideAt: s,
-    popoverContent: m,
-    isAccountLoading: u,
+    popoverContent: a,
+    isAccountLoading: h,
     ...l
   } = i;
   return /* @__PURE__ */ n(
@@ -108,12 +108,12 @@ function N(i) {
       alignItems: "center",
       ...l,
       className: g(
-        t.unauthenticated,
-        a(s),
+        o.unauthenticated,
+        m(s),
         r
       ),
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           p,
           {
             onClick: e,
@@ -123,11 +123,11 @@ function N(i) {
             children: "Sign In / Register"
           }
         ),
-        /* @__PURE__ */ o(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
+        /* @__PURE__ */ t(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
       ]
     }
   );
 }
 export {
-  T as Account
+  j as Account
 };

package/dist/molecules/Account/Account.stories.d.ts

@@ -12,3 +12,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Unauthenticated: Story;
 export declare const Authenticated: Story;
+export declare const AuthenticatedWithCustomAvatar: Story;

package/dist/molecules/Account/Account.stories.js

@@ -1,19 +1,20 @@
-import { Account as t } from "./Account.js";
-const o = {
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { Account as o } from "./Account.js";
+const r = {
   title: "Case Parts/Molecules/Account",
-  component: t,
+  component: o,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered"
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, e = {
+}, i = {
   args: {
     onLoginClick: () => {
     }
   }
-}, a = {
+}, c = {
   args: {
     account: {
       name: "Ringo",
@@ -21,11 +22,34 @@ const o = {
       number: "123456789012"
     },
     onLoginClick: () => {
+    },
+    popoverContent: /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 8, minWidth: 220 }, children: [
+      /* @__PURE__ */ t("a", { href: "#", "data-popover-close": "true", children: "Profile" }),
+      /* @__PURE__ */ t("a", { href: "#", "data-popover-close": "true", children: "Orders" }),
+      /* @__PURE__ */ t("button", { "data-popover-close": "true", children: "Sign out" })
+    ] })
+  }
+}, s = {
+  args: {
+    account: {
+      name: "Ringo",
+      number: "123456789012",
+      avatar: /* @__PURE__ */ t(
+        "img",
+        {
+          src: "https://avatars.githubusercontent.com/u/9919?s=80&v=4",
+          alt: "Custom Avatar",
+          style: { width: 32, height: 32, borderRadius: 9999 }
+        }
+      )
+    },
+    onLoginClick: () => {
     }
   }
 };
 export {
-  a as Authenticated,
-  e as Unauthenticated,
-  o as default
+  c as Authenticated,
+  s as AuthenticatedWithCustomAvatar,
+  i as Unauthenticated,
+  r as default
 };

package/dist/molecules/Modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export type ModalHeaderSize = "sm" | "md" | "lg";
+export type ModalHeaderVariant = "default" | "plain";
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+    isOpen: boolean;
+    caption?: string;
+    onClose: () => void;
+    closeOnOverlayClick?: boolean;
+    headerSize?: ModalHeaderSize;
+    headerVariant?: ModalHeaderVariant;
+}
+export declare function Modal({ isOpen, caption, onClose, closeOnOverlayClick, headerSize, headerVariant, className, children, ...otherProps }: ModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/molecules/Modal/Modal.js

@@ -0,0 +1,75 @@
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { c as t } from "../../clsx-OuTLNxxd.js";
+import { Text as h } from "../../atoms/Text/Text.js";
+import { Icon as f } from "../../atoms/Icon/Icon.js";
+import '../../assets/Modal.css';const y = "_overlay_vmpn5_1", g = "_container_vmpn5_11", x = "_header_vmpn5_30", N = "_closeButton_vmpn5_53", S = "_captionSpacer_vmpn5_66", T = "_content_vmpn5_69", k = "_headerPlain_vmpn5_77", e = {
+  overlay: y,
+  container: g,
+  header: x,
+  closeButton: N,
+  captionSpacer: S,
+  content: T,
+  headerPlain: k
+}, z = {
+  sm: "sm",
+  md: "md",
+  lg: "lg"
+}, B = {
+  sm: "sm",
+  md: "md",
+  lg: "md"
+};
+function I({
+  isOpen: i,
+  caption: o,
+  onClose: c,
+  closeOnOverlayClick: m = !0,
+  headerSize: a = "md",
+  headerVariant: r = "default",
+  className: d,
+  children: p,
+  ..._
+}) {
+  if (!i) return null;
+  const v = (l) => {
+    m && l.target === l.currentTarget && c();
+  }, u = r === "default" && !!o;
+  return /* @__PURE__ */ n("div", { className: t(e.overlay), onClick: v, children: /* @__PURE__ */ s("div", { className: t(e.container, d), role: "dialog", "aria-modal": "true", ..._, children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: t(
+          e.header,
+          e[`header-${a}`],
+          r === "plain" && e.headerPlain
+        ),
+        children: [
+          u ? /* @__PURE__ */ n(
+            h,
+            {
+              as: "div",
+              size: z[a],
+              variant: "display",
+              className: e.caption,
+              children: o
+            }
+          ) : /* @__PURE__ */ n("div", { className: e.captionSpacer }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: e.closeButton,
+              "aria-label": "Close",
+              onClick: c,
+              children: /* @__PURE__ */ n(f, { iconKey: "fa-regular fa-xmark", size: B[a] })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: e.content, children: p })
+  ] }) });
+}
+export {
+  I as Modal
+};

package/dist/molecules/Modal/Modal.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Modal } from './Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Basic: Story;
+export declare const Sizes: Story;

package/dist/molecules/Modal/Modal.stories.js

@@ -0,0 +1,110 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { Modal as a } from "./Modal.js";
+import { Text as n } from "../../atoms/Text/Text.js";
+import { Button as t } from "../../atoms/Button/Button.js";
+const S = {
+  title: "Case Parts/Molecules/Modal",
+  component: a,
+  argTypes: {
+    isOpen: {
+      control: { type: "boolean" },
+      description: "Controls visibility of the modal"
+    },
+    caption: {
+      control: { type: "text" },
+      description: "Caption text displayed in the header"
+    },
+    closeOnOverlayClick: {
+      control: { type: "boolean" },
+      description: "Close when clicking on overlay"
+    },
+    headerSize: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+      description: "Header size controlling caption and X icon"
+    },
+    headerVariant: {
+      control: { type: "radio" },
+      options: ["default", "plain"],
+      description: "Header variant: styled (default) or plain"
+    }
+  },
+  args: {
+    isOpen: !0,
+    caption: "Sample Modal",
+    closeOnOverlayClick: !0,
+    headerSize: "md",
+    headerVariant: "default"
+  }
+};
+function m(i) {
+  const [o, r] = l(!!i.isOpen);
+  return /* @__PURE__ */ d("div", { style: { padding: 24 }, children: [
+    /* @__PURE__ */ e(t, { variant: "primary", size: "md", onClick: () => r(!0), children: "Open Modal" }),
+    /* @__PURE__ */ d(
+      a,
+      {
+        isOpen: o,
+        caption: i.caption ?? "Sample Modal",
+        onClose: () => r(!1),
+        closeOnOverlayClick: i.closeOnOverlayClick ?? !0,
+        headerSize: i.headerSize ?? "md",
+        headerVariant: i.headerVariant ?? "default",
+        children: [
+          /* @__PURE__ */ e(n, { as: "p", size: "md", children: "This is a reusable modal with a non-scrollable header. Click the overlay or the X to close." }),
+          /* @__PURE__ */ e("div", { style: { height: 600 }, children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "Scrollable content spacer..." }) })
+        ]
+      }
+    )
+  ] });
+}
+const C = {
+  render: (i) => /* @__PURE__ */ e(m, { ...i })
+};
+function h() {
+  const [i, o] = l(!1), [r, s] = l(!1), [p, c] = l(!1);
+  return /* @__PURE__ */ d("div", { style: { display: "grid", gap: 12 }, children: [
+    /* @__PURE__ */ e(t, { variant: "secondary", size: "sm", onClick: () => o(!0), children: "Small Header" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        isOpen: i,
+        caption: "Small Header",
+        onClose: () => o(!1),
+        headerSize: "sm",
+        children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "Small header modal content." })
+      }
+    ),
+    /* @__PURE__ */ e(t, { variant: "primary", size: "md", onClick: () => s(!0), children: "Medium Header" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        isOpen: r,
+        caption: "Medium Header",
+        onClose: () => s(!1),
+        headerSize: "md",
+        children: /* @__PURE__ */ e(n, { as: "p", size: "md", children: "Medium header modal content." })
+      }
+    ),
+    /* @__PURE__ */ e(t, { variant: "cta-primary", size: "lg", onClick: () => c(!0), children: "Large Header" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        isOpen: p,
+        caption: "Large Header",
+        onClose: () => c(!1),
+        headerSize: "lg",
+        children: /* @__PURE__ */ e(n, { as: "p", size: "lg", children: "Large header modal content." })
+      }
+    )
+  ] });
+}
+const v = {
+  render: () => /* @__PURE__ */ e(h, {})
+};
+export {
+  C as Basic,
+  v as Sizes,
+  S as default
+};

package/dist/organisms/MainNav/MainNav.stories.js

@@ -131,9 +131,9 @@ function y(e) {
 const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "column", gap: 8, minWidth: 220 }, children: [
   /* @__PURE__ */ t(s, { size: "sm", weight: "semibold", children: "Account" }),
   /* @__PURE__ */ t(s, { size: "xs", children: "Signed in as Ringo" }),
-  /* @__PURE__ */ t(u, { href: "/account", children: "View Account" }),
-  /* @__PURE__ */ t(u, { href: "/orders", children: "Order History" }),
-  /* @__PURE__ */ t(p, { size: "sm", variant: "secondary", onClick: () => alert("Sign out"), children: "Sign Out" })
+  /* @__PURE__ */ t(u, { href: "/account", "data-popover-close": "true", children: "View Account" }),
+  /* @__PURE__ */ t(u, { href: "/orders", "data-popover-close": "true", children: "Order History" }),
+  /* @__PURE__ */ t(p, { size: "sm", variant: "secondary", "data-popover-close": "true", onClick: () => alert("Sign out"), children: "Sign Out" })
 ] }), n = (e) => {
   const [c, i] = h(!1);
   return /* @__PURE__ */ b(g, { children: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.111",
+  "version": "0.0.113",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",