@caseparts-org/caseblocks 0.0.109 → 0.0.111

package/dist/assets/Account.css

@@ -1 +1 @@
-._loggedIn_1aoh3_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_1aoh3_12>a,._customer_1aoh3_12>a:hover{text-decoration:none}._loggedIn_1aoh3_1:hover{background-color:#f3f3f3;border-radius:var(--border-radius-md)}
+._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}}

package/dist/assets/CategoryNav.css

@@ -1 +1 @@
-._categories_1of98_1{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0;margin:0 90px 0 47px}@media (max-width: 1281px){._categories_1of98_1{display:none}}._category_1of98_17{list-style:none}._category_1of98_17 a{color:var(--text-text-primary);font-weight:var(--font-weight-semibold);text-decoration:none;display:flex;flex-direction:row;align-items:center}@media (max-width: 1281px){._category_1of98_17 a{justify-content:space-between;width:100%}}._category_1of98_17 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_1of98_17 a path{fill:var(--color-brand-primary-primary-teal-blue)}._submenuTooltip_1of98_43{list-style:none;padding:0;margin:0;height:min-content;display:flex;flex-direction:column;gap:var(--spacing-spacing-3xs);flex-wrap:wrap;max-height:400px}
+._categories_19tew_1{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0;margin:0 90px 0 47px}@media (max-width: 1281px){._categories_19tew_1{display:none}}._placeholder_19tew_17{height:24px;width:100%}@media (max-width:1280px){._placeholder_19tew_17{display:none}}._category_19tew_25{list-style:none}._category_19tew_25 a{color:var(--text-text-primary);font-weight:var(--font-weight-semibold);text-decoration:none;display:flex;flex-direction:row;align-items:center}@media (max-width: 1281px){._category_19tew_25 a{justify-content:space-between;width:100%}}._category_19tew_25 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_19tew_25 a path{fill:var(--color-brand-primary-primary-teal-blue)}._submenuTooltip_19tew_51{list-style:none;padding:0;margin:0;height:min-content;display:flex;flex-direction:column;gap:var(--spacing-spacing-3xs);flex-wrap:wrap;max-height:400px}

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

@@ -10,7 +10,9 @@ export interface AccountProps extends React.HTMLAttributes<HTMLDivElement>, Hide
         /** The account user's initials. */
         initials: string;
     };
-    accountRoute: string;
     onLoginClick: () => void;
+    /** Optional content to show when clicking the authenticated container */
+    popoverContent?: React.ReactNode;
+    isAccountLoading?: boolean;
 }
 export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Account/Account.js

@@ -1,36 +1,72 @@
-import { jsx as i, jsxs as n } from "react/jsx-runtime";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
 import { getHideAtStyles as a } from "../../atoms/HideAt.js";
 import { Icon as f } from "../../atoms/Icon/Icon.js";
-import { Text as l } from "../../atoms/Text/Text.js";
+import { Text as c } from "../../atoms/Text/Text.js";
 import { Avatar as h } from "../Avatar/Avatar.js";
 import { Flex as d } from "../../atoms/Flex/Flex.js";
-import { Button as A } from "../../atoms/Button/Button.js";
-import { c as u } from "../../clsx-OuTLNxxd.js";
-import { Link as x } from "../../atoms/Link/Link.js";
-import '../../assets/Account.css';const p = "_loggedIn_1aoh3_1", I = "_customer_1aoh3_12", s = {
-  loggedIn: p,
-  customer: I
+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 = {
+  loggedIn: x,
+  customer: v,
+  placeholder: I
 };
-function _(e) {
-  return e.account !== void 0;
+function z(i) {
+  return i.account !== void 0;
 }
-function P(e) {
-  return _(e) ? /* @__PURE__ */ i(k, { ...e }) : /* @__PURE__ */ i(v, { ...e });
+function T(i) {
+  return i.isAccountLoading ? /* @__PURE__ */ o("div", { className: t.placeholder }) : z(i) ? /* @__PURE__ */ o(_, { ...i }) : /* @__PURE__ */ o(N, { ...i });
 }
-function k(e) {
+function _(i) {
   const {
-    account: t,
-    accountRoute: o,
-    onLoginClick: m,
+    account: e,
     className: r,
-    hideAt: c,
-    ...g
-  } = e;
-  return /* @__PURE__ */ n(
+    hideAt: s,
+    popoverContent: m,
+    isAccountLoading: u,
+    ...l
+  } = i;
+  return m ? /* @__PURE__ */ o(
+    A,
+    {
+      position: "bottom right",
+      trigger: /* @__PURE__ */ n(
+        "div",
+        {
+          className: g(t.loggedIn, a(s), r),
+          ...l,
+          children: [
+            /* @__PURE__ */ n(
+              d,
+              {
+                flexDirection: "column",
+                alignItems: "flex-end",
+                hideAt: ["sm", "md"],
+                className: t.customer,
+                children: [
+                  /* @__PURE__ */ n(c, { size: "xxs", children: [
+                    "Acct: ",
+                    e == null ? void 0 : e.number
+                  ] }),
+                  /* @__PURE__ */ n(c, { size: "sm", variant: "display", colorToken: "links", children: [
+                    "Hello ",
+                    e == null ? void 0 : e.name
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ o(h, { initials: e.initials })
+          ]
+        }
+      ),
+      children: m
+    }
+  ) : /* @__PURE__ */ n(
     "div",
     {
-      className: u(s.loggedIn, a(c), r),
-      ...g,
+      className: g(t.loggedIn, a(s), r),
+      ...l,
       children: [
         /* @__PURE__ */ n(
           d,
@@ -38,53 +74,60 @@ function k(e) {
             flexDirection: "column",
             alignItems: "flex-end",
             hideAt: ["sm", "md"],
-            className: s.customer,
+            className: t.customer,
             children: [
-              /* @__PURE__ */ n(l, { size: "xxs", children: [
+              /* @__PURE__ */ n(c, { size: "xxs", children: [
                 "Acct: ",
-                t == null ? void 0 : t.number
+                e == null ? void 0 : e.number
               ] }),
-              /* @__PURE__ */ i(x, { href: o, children: /* @__PURE__ */ n(l, { size: "sm", variant: "display", children: [
+              /* @__PURE__ */ n(c, { size: "sm", variant: "display", colorToken: "links", children: [
                 "Hello ",
-                t == null ? void 0 : t.name
-              ] }) })
+                e == null ? void 0 : e.name
+              ] })
             ]
           }
         ),
-        /* @__PURE__ */ i(h, { initials: t.initials, accountRoute: o })
+        /* @__PURE__ */ o(h, { initials: e.initials })
       ]
     }
   );
 }
-function v(e) {
-  const { accountRoute: t, onLoginClick: o, className: m, hideAt: r, ...c } = e;
+function N(i) {
+  const {
+    onLoginClick: e,
+    className: r,
+    hideAt: s,
+    popoverContent: m,
+    isAccountLoading: u,
+    ...l
+  } = i;
   return /* @__PURE__ */ n(
     d,
     {
       flexDirection: "row",
       alignItems: "center",
-      ...c,
-      className: u(
-        s.unauthenticated,
-        a(r),
-        m
+      ...l,
+      className: g(
+        t.unauthenticated,
+        a(s),
+        r
       ),
       children: [
-        /* @__PURE__ */ i(
-          A,
+        /* @__PURE__ */ o(
+          p,
           {
-            onClick: o,
+            onClick: e,
             size: "sm",
             variant: "primary",
             hideAt: ["sm", "md"],
             children: "Sign In / Register"
           }
         ),
-        /* @__PURE__ */ i(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
+        /* @__PURE__ */ o(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
       ]
     }
   );
 }
 export {
-  P as Account
+  T as Account
 };

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

@@ -1,5 +1,5 @@
 import { Account as t } from "./Account.js";
-const c = {
+const o = {
   title: "Case Parts/Molecules/Account",
   component: t,
   parameters: {
@@ -8,9 +8,8 @@ const c = {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, n = {
+}, e = {
   args: {
-    accountRoute: "/account",
     onLoginClick: () => {
     }
   }
@@ -21,13 +20,12 @@ const c = {
       initials: "RS",
       number: "123456789012"
     },
-    accountRoute: "/account",
     onLoginClick: () => {
     }
   }
 };
 export {
   a as Authenticated,
-  n as Unauthenticated,
-  c as default
+  e as Unauthenticated,
+  o as default
 };

package/dist/molecules/Avatar/Avatar.d.ts

@@ -2,6 +2,5 @@ import { HideAtProps } from '../../atoms/HideAt';
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, HideAtProps {
     /** The user's initials (2 characters) */
     initials: string;
-    accountRoute: string;
 }
 export declare function Avatar(props: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Avatar/Avatar.js

@@ -1,32 +1,31 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Flex as m } from "../../atoms/Flex/Flex.js";
-import { Link as c } from "../../atoms/Link/Link.js";
-import { getHideAtStyles as l } from "../../atoms/HideAt.js";
-import { c as f } from "../../clsx-OuTLNxxd.js";
-import { t as r } from "../../Text.module-Dzhzk2fH.js";
-import '../../assets/Avatar.css';const p = "_avatar_nvnsd_1", x = {
-  avatar: p
+import { jsx as o } from "react/jsx-runtime";
+import { Flex as n } from "../../atoms/Flex/Flex.js";
+import { getHideAtStyles as m } from "../../atoms/HideAt.js";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { t } from "../../Text.module-Dzhzk2fH.js";
+import '../../assets/Avatar.css';const l = "_avatar_nvnsd_1", f = {
+  avatar: l
 };
-function A(e) {
-  const { accountRoute: a, initials: s, className: o, hideAt: i, ...n } = e;
-  return /* @__PURE__ */ t(c, { href: a, children: /* @__PURE__ */ t(
-    m,
+function u(r) {
+  const { initials: e, className: a, hideAt: s, ...i } = r;
+  return /* @__PURE__ */ o(
+    n,
     {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      className: f(
-        x.avatar,
-        r["text-display"],
-        r["text-md"],
-        l(i),
-        o
+      className: c(
+        f.avatar,
+        t["text-display"],
+        t["text-md"],
+        m(s),
+        a
       ),
-      ...n,
-      children: s.substring(0, 2)
+      ...i,
+      children: e.substring(0, 2)
     }
-  ) });
+  );
 }
 export {
-  A as Avatar
+  u as Avatar
 };

package/dist/molecules/Avatar/Avatar.stories.js

@@ -10,8 +10,7 @@ const e = {
   tags: ["autodocs"]
 }, o = {
   args: {
-    initials: "RS",
-    accountRoute: "/account"
+    initials: "RS"
   }
 };
 export {

package/dist/molecules/CategoryNav/CategoryNav.d.ts

@@ -7,6 +7,7 @@ export interface CategoryWithChildren extends Category {
     children: Category[];
     showChevron?: boolean;
 }
-export declare function CategoryNav({ categories, }: {
+export declare function CategoryNav({ categories, isCategoriesLoading, }: {
     categories?: CategoryWithChildren[];
+    isCategoriesLoading?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/molecules/CategoryNav/CategoryNav.js

@@ -1,28 +1,30 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { c as a } from "../../clsx-OuTLNxxd.js";
-import { Text as n } from "../../atoms/Text/Text.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { Text as t } from "../../atoms/Text/Text.js";
 import { Link as s } from "../../atoms/Link/Link.js";
 import { Icon as m } from "../../atoms/Icon/Icon.js";
-import { getHideAtStyles as c } from "../../atoms/HideAt.js";
-import { Tooltip as d } from "../../atoms/Tooltip/Tooltip.js";
-import '../../assets/CategoryNav.css';const h = "_categories_1of98_1", f = "_category_1of98_17", p = "_submenuTooltip_1of98_43", o = {
-  categories: h,
+import { getHideAtStyles as d } from "../../atoms/HideAt.js";
+import { Tooltip as h } from "../../atoms/Tooltip/Tooltip.js";
+import '../../assets/CategoryNav.css';const p = "_categories_19tew_1", u = "_placeholder_19tew_17", f = "_category_19tew_25", b = "_submenuTooltip_19tew_51", i = {
+  categories: p,
+  placeholder: u,
   category: f,
-  submenuTooltip: p
+  submenuTooltip: b
 };
-function z({
-  categories: l
+function v({
+  categories: o,
+  isCategoriesLoading: a
 }) {
-  return !l || l.length === 0 ? null : /* @__PURE__ */ e("ul", { className: a(o.categories, c(["sm"])), children: l.map(
-    (i) => i.children.length > 0 ? /* @__PURE__ */ e(
-      d,
+  return a ? /* @__PURE__ */ e("div", { className: i.placeholder }) : !o || o.length === 0 ? null : /* @__PURE__ */ e("ul", { className: c(i.categories, d(["sm"])), children: o.map(
+    (l) => l.children.length > 0 ? /* @__PURE__ */ e(
+      h,
       {
         openDelay: 180,
         closeDelay: 0,
         tooltipOffset: 0,
-        trigger: /* @__PURE__ */ e("li", { className: o.category, tabIndex: 0, children: /* @__PURE__ */ t(s, { href: i.route, children: [
-          /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: i.label }),
-          i.showChevron && /* @__PURE__ */ e(
+        trigger: /* @__PURE__ */ e("li", { className: i.category, tabIndex: 0, children: /* @__PURE__ */ n(s, { href: l.route, children: [
+          /* @__PURE__ */ e(t, { size: "sm", weight: "semibold", children: l.label }),
+          l.showChevron && /* @__PURE__ */ e(
             m,
             {
               iconKey: "fa-regular fa-angle-down",
@@ -32,12 +34,12 @@ function z({
           )
         ] }) }),
         position: "bottom center",
-        children: /* @__PURE__ */ e("ul", { className: o.submenuTooltip, children: i.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(s, { href: r.route, children: /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: r.label }) }) }, r.id)) })
+        children: /* @__PURE__ */ e("ul", { className: i.submenuTooltip, children: l.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(s, { href: r.route, children: /* @__PURE__ */ e(t, { size: "sm", weight: "semibold", children: r.label }) }) }, r.id)) })
       },
-      i.id
-    ) : /* @__PURE__ */ e("li", { className: o.category, children: /* @__PURE__ */ t(s, { href: i.route, children: [
-      /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: i.label }),
-      i.showChevron && /* @__PURE__ */ e(
+      l.id
+    ) : /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ n(s, { href: l.route, children: [
+      /* @__PURE__ */ e(t, { size: "sm", weight: "semibold", children: l.label }),
+      l.showChevron && /* @__PURE__ */ e(
         m,
         {
           iconKey: "fa-regular fa-angle-down",
@@ -45,9 +47,9 @@ function z({
           size: "sm"
         }
       )
-    ] }) }, i.id)
+    ] }) }, l.id)
   ) });
 }
 export {
-  z as CategoryNav
+  v as CategoryNav
 };

package/dist/organisms/MainNav/MainNav.d.ts

@@ -8,12 +8,15 @@ export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDi
     faqRoute: string;
     customPartsRoute: string;
     aboutUsRoute: string;
-    accountRoute: string;
     contactRoute: string;
     cart: ShoppingCart;
     onLoginClick: () => void;
     onSearch: (_input: string) => void;
     onClickModelSerial: () => void;
+    /** Content shown in the account popover when authenticated */
+    accountPopoverContent?: React.ReactNode;
+    isAccountLoading?: boolean;
+    isCategoriesLoading?: boolean;
 }
 export type MainNavHandle = ShoppingCartHandle;
 export declare const MainNav: React.ForwardRefExoticComponent<MainNavProps & React.RefAttributes<ShoppingCartHandle>>;

package/dist/organisms/MainNav/MainNav.js

@@ -1,49 +1,51 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import D from "react";
+import z from "react";
 import { Text as N } from "../../atoms/Text/Text.js";
 import { Link as l } from "../../atoms/Link/Link.js";
-import { Icon as M } from "../../atoms/Icon/Icon.js";
+import { Icon as I } from "../../atoms/Icon/Icon.js";
 import { Flex as t } from "../../atoms/Flex/Flex.js";
-import { Grid as z, Column as I } from "../../atoms/Grid/Grid.js";
-import { Logo as S } from "../../molecules/Logo/Logo.js";
+import { Grid as S, Column as U } from "../../atoms/Grid/Grid.js";
+import { Logo as F } from "../../molecules/Logo/Logo.js";
 import { SearchBox as _ } from "../../molecules/SearchBox/SearchBox.js";
-import { HamburgerMenu as U } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
-import { ShoppingCart as F } from "../../molecules/Cart/Cart.js";
-import { Account as H } from "../../molecules/Account/Account.js";
-import { CategoryNav as B } from "../../molecules/CategoryNav/CategoryNav.js";
+import { HamburgerMenu as H } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
+import { ShoppingCart as B } from "../../molecules/Cart/Cart.js";
+import { Account as G } from "../../molecules/Account/Account.js";
+import { CategoryNav as K } from "../../molecules/CategoryNav/CategoryNav.js";
 import { c as s } from "../../clsx-OuTLNxxd.js";
 import { getHideAtStyles as u } from "../../atoms/HideAt.js";
-import '../../assets/MainNav.css';const G = "_main_19pdr_1", K = "_column_19pdr_8", P = "_topNav_19pdr_13", Q = "_logo_19pdr_21", T = "_operations_19pdr_24", W = "_search_19pdr_31", q = "_siteLink_19pdr_34", E = "_accountArea_19pdr_48", J = "_category_19pdr_60", O = "_menuList_19pdr_82", r = {
-  main: G,
-  column: K,
-  topNav: P,
-  logo: Q,
-  operations: T,
-  search: W,
-  siteLink: q,
-  accountArea: E,
-  category: J,
-  menuList: O
-}, le = D.forwardRef(function({
+import '../../assets/MainNav.css';const P = "_main_19pdr_1", Q = "_column_19pdr_8", T = "_topNav_19pdr_13", W = "_logo_19pdr_21", q = "_operations_19pdr_24", E = "_search_19pdr_31", J = "_siteLink_19pdr_34", O = "_accountArea_19pdr_48", R = "_category_19pdr_60", V = "_menuList_19pdr_82", r = {
+  main: P,
+  column: Q,
+  topNav: T,
+  logo: W,
+  operations: q,
+  search: E,
+  siteLink: J,
+  accountArea: O,
+  category: R,
+  menuList: V
+}, de = z.forwardRef(function({
   account: c,
   categories: n,
   homeRoute: g,
   faqRoute: v,
   customPartsRoute: d,
   aboutUsRoute: A,
-  accountRoute: L,
   contactRoute: h,
-  cart: x,
-  open: C,
+  cart: L,
+  open: x,
   // consume external panel control props from CartPropsBase
-  className: k,
-  onLoginClick: y,
+  className: C,
+  onLoginClick: k,
   onSearch: p,
   onClickModelSerial: f,
-  onCartClick: b,
-  ...w
-}, j) {
-  return /* @__PURE__ */ e(z, { ...w, gridWrapperClassName: s(r.main, k), children: /* @__PURE__ */ o(I, { span: 12, className: r.column, children: [
+  onCartClick: y,
+  accountPopoverContent: b,
+  isAccountLoading: w,
+  isCategoriesLoading: j,
+  ...D
+}, M) {
+  return /* @__PURE__ */ e(S, { ...D, gridWrapperClassName: s(r.main, C), children: /* @__PURE__ */ o(U, { span: 12, className: r.column, children: [
     /* @__PURE__ */ o(
       t,
       {
@@ -52,7 +54,7 @@ import '../../assets/MainNav.css';const G = "_main_19pdr_1", K = "_column_19pdr_
         justifyContent: "space-between",
         className: r.topNav,
         children: [
-          /* @__PURE__ */ e("div", { className: r.logo, children: /* @__PURE__ */ e(l, { href: g, children: /* @__PURE__ */ e(S, {}) }) }),
+          /* @__PURE__ */ e("div", { className: r.logo, children: /* @__PURE__ */ e(l, { href: g, children: /* @__PURE__ */ e(F, {}) }) }),
           /* @__PURE__ */ o(
             t,
             {
@@ -66,24 +68,25 @@ import '../../assets/MainNav.css';const G = "_main_19pdr_1", K = "_column_19pdr_
                 /* @__PURE__ */ e(i, { href: d, hideAt: ["sm", "md"], children: "Custom Parts" }),
                 /* @__PURE__ */ e(i, { href: h, hideAt: ["sm", "md"], children: "Contact Us" }),
                 /* @__PURE__ */ e("div", { className: r.accountArea, children: /* @__PURE__ */ e(
-                  H,
+                  G,
                   {
                     account: c,
-                    accountRoute: L,
-                    onLoginClick: y,
-                    className: r.avatar
+                    onLoginClick: k,
+                    className: r.avatar,
+                    popoverContent: b,
+                    isAccountLoading: w
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  F,
+                  B,
                   {
-                    ref: j,
-                    cart: x,
-                    open: C,
-                    onCartClick: b
+                    ref: M,
+                    cart: L,
+                    open: x,
+                    onCartClick: y
                   }
                 ),
-                /* @__PURE__ */ e(U, { hideAt: ["lg"], children: /* @__PURE__ */ o("ul", { className: r.menuList, children: [
+                /* @__PURE__ */ e(H, { hideAt: ["lg"], children: /* @__PURE__ */ o("ul", { className: r.menuList, children: [
                   /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("button", { onClick: f, className: s(r.siteLink, u(["lg"])), children: "Model/Serial" }) }),
                   /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: d, children: "Custom Parts" }) }),
                   /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: h, children: "Contact Us" }) }),
@@ -92,7 +95,7 @@ import '../../assets/MainNav.css';const G = "_main_19pdr_1", K = "_column_19pdr_
                   n && n.map((a) => /* @__PURE__ */ e("li", { className: r.category, children: /* @__PURE__ */ o(l, { href: a.route, children: [
                     /* @__PURE__ */ e(N, { size: "sm", weight: "semibold", children: a.label }),
                     /* @__PURE__ */ e(
-                      M,
+                      I,
                       {
                         iconKey: "fa-solid fa-chevron-right",
                         title: "Navigate",
@@ -108,7 +111,7 @@ import '../../assets/MainNav.css';const G = "_main_19pdr_1", K = "_column_19pdr_
       }
     ),
     /* @__PURE__ */ e(t, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(_, { onSearch: p, inputName: "cpc-search", className: r.search }) }),
-    /* @__PURE__ */ e(B, { categories: n })
+    /* @__PURE__ */ e(K, { categories: n, isCategoriesLoading: j })
   ] }) });
 });
 function i({
@@ -119,5 +122,5 @@ function i({
   return /* @__PURE__ */ e(l, { href: m, className: r.siteLink, ...n, children: /* @__PURE__ */ e(N, { size: "md", variant: "display", children: c }) });
 }
 export {
-  le as MainNav
+  de as MainNav
 };

package/dist/organisms/MainNav/MainNav.stories.d.ts

@@ -11,3 +11,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Authenticated: Story;
 export declare const WithCartItems: Story;
 export declare const Unauthenticated: Story;
+export declare const Loading: Story;

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

@@ -1,16 +1,19 @@
-import { jsxs as u, Fragment as s, jsx as c } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { MainNav as d } from "./MainNav.js";
-import { CartSlideInPanel as m } from "../../molecules/Cart/CartSlideInPanel.js";
-const I = {
+import { jsxs as b, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { MainNav as m } from "./MainNav.js";
+import { Text as s } from "../../atoms/Text/Text.js";
+import { Link as u } from "../../atoms/Link/Link.js";
+import { Button as p } from "../../atoms/Button/Button.js";
+import { CartSlideInPanel as v } from "../../molecules/Cart/CartSlideInPanel.js";
+const U = {
   title: "Case Parts/Organisms/MainNav",
-  component: d,
+  component: m,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "fullscreen"
   }
   // tags: ["autodocs"],
-}, o = [
+}, l = [
   {
     id: 0,
     label: "Shop by Brands",
@@ -119,30 +122,36 @@ const I = {
     { id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" }
   ]
 };
-function v(e) {
+function y(e) {
   return `$${e.items.reduce(
-    (t, i) => t + (parseFloat(i.price.replace(/[^0-9.]/g, "")) || 0) * i.quantity,
+    (i, o) => i + (parseFloat(o.price.replace(/[^0-9.]/g, "")) || 0) * o.quantity,
     0
   ).toFixed(2)}`;
 }
-const n = (e) => {
-  const [l, t] = b(!1);
-  return /* @__PURE__ */ u(s, { children: [
-    /* @__PURE__ */ c(
-      d,
+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" })
+] }), n = (e) => {
+  const [c, i] = h(!1);
+  return /* @__PURE__ */ b(g, { children: [
+    /* @__PURE__ */ t(
+      m,
       {
         ...e,
-        open: l,
-        onCartClick: () => t((i) => !i)
+        open: c,
+        onCartClick: () => i((o) => !o)
       }
     ),
-    /* @__PURE__ */ c(
-      m,
+    /* @__PURE__ */ t(
+      v,
       {
-        open: l,
-        onClose: () => t(!1),
+        open: c,
+        onClose: () => i(!1),
         cart: e.cart,
-        subtotal: v(e.cart),
+        subtotal: y(e.cart),
         itemPriceLabel: "List Price",
         contactHref: e.contactRoute,
         contactLinkBehavior: "new-tab",
@@ -152,13 +161,12 @@ const n = (e) => {
       }
     )
   ] });
-}, S = {
+}, $ = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
     cart: r,
     homeRoute: "/",
     customPartsRoute: "/custom",
-    accountRoute: "/account",
     onClickModelSerial: () => {
       alert("Model/Serial");
     },
@@ -174,16 +182,16 @@ const n = (e) => {
     onCartClick: () => {
     },
     // placeholder required by component
-    categories: o
+    categories: l,
+    accountPopoverContent: d
   },
   render: n
-}, C = {
+}, D = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
     cart: r,
     homeRoute: "/",
     customPartsRoute: "/custom",
-    accountRoute: "/account",
     onClickModelSerial: () => {
       alert("Model/Serial");
     },
@@ -198,15 +206,15 @@ const n = (e) => {
     },
     onCartClick: () => {
     },
-    categories: o
+    categories: l,
+    accountPopoverContent: d
   },
   render: n
-}, k = {
+}, L = {
   args: {
     cart: r,
     homeRoute: "/",
     customPartsRoute: "/custom",
-    accountRoute: "/account",
     onClickModelSerial: () => {
       alert("Model/Serial");
     },
@@ -221,13 +229,40 @@ const n = (e) => {
     },
     onCartClick: () => {
     },
-    categories: o
+    categories: l
+  },
+  render: n
+}, M = {
+  args: {
+    account: { name: "Ringo", initials: "RS", number: "123456789012" },
+    cart: r,
+    homeRoute: "/",
+    customPartsRoute: "/custom",
+    onClickModelSerial: () => {
+      alert("Model/Serial");
+    },
+    faqRoute: "/faq",
+    aboutUsRoute: "/about",
+    contactRoute: "/contact",
+    onLoginClick: () => {
+      alert("Login");
+    },
+    onSearch: (e) => {
+      alert(`Search ${e}`);
+    },
+    onCartClick: () => {
+    },
+    categories: l,
+    accountPopoverContent: d,
+    isAccountLoading: !0,
+    isCategoriesLoading: !0
   },
   render: n
 };
 export {
-  S as Authenticated,
-  k as Unauthenticated,
-  C as WithCartItems,
-  I as default
+  $ as Authenticated,
+  M as Loading,
+  L as Unauthenticated,
+  D as WithCartItems,
+  U as default
 };

package/package.json

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