@caseparts-org/caseblocks 0.0.110 → 0.0.112

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_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/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

@@ -7,11 +7,14 @@ 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 */
     popoverContent?: React.ReactNode;
+    isAccountLoading?: boolean;
 }
 export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Account/Account.js

@@ -1,111 +1,120 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { getHideAtStyles as c } from "../../atoms/HideAt.js";
+import { getHideAtStyles as m } from "../../atoms/HideAt.js";
 import { Icon as f } from "../../atoms/Icon/Icon.js";
-import { Text as m } from "../../atoms/Text/Text.js";
-import { Avatar as h } from "../Avatar/Avatar.js";
-import { Flex as a } from "../../atoms/Flex/Flex.js";
-import { Button as u } from "../../atoms/Button/Button.js";
-import { Popover as p } from "../../atoms/Popover/Popover.js";
-import { c as d } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Account.css';const x = "_loggedIn_1aoh3_1", A = "_customer_1aoh3_12", o = {
+import { Text as c } from "../../atoms/Text/Text.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_1sipy_1", v = "_customer_1sipy_12", I = "_placeholder_1sipy_21", o = {
   loggedIn: x,
-  customer: A
+  customer: v,
+  placeholder: I
 };
-function I(i) {
+function y(i) {
   return i.account !== void 0;
 }
-function P(i) {
-  return I(i) ? /* @__PURE__ */ t(v, { ...i }) : /* @__PURE__ */ t(k, { ...i });
+function j(i) {
+  return i.isAccountLoading ? /* @__PURE__ */ t("div", { className: o.placeholder }) : y(i) ? /* @__PURE__ */ t(_, { ...i }) : /* @__PURE__ */ t(N, { ...i });
 }
-function v(i) {
+function _(i) {
   const {
     account: e,
     className: r,
     hideAt: s,
-    popoverContent: l,
-    ...g
+    popoverContent: a,
+    isAccountLoading: h,
+    ...l
   } = i;
-  return l ? /* @__PURE__ */ t(
-    p,
+  return a ? /* @__PURE__ */ t(
+    A,
     {
       position: "bottom right",
       trigger: /* @__PURE__ */ n(
         "div",
         {
-          className: d(o.loggedIn, c(s), r),
-          ...g,
+          className: g(o.loggedIn, m(s), r),
+          ...l,
           children: [
             /* @__PURE__ */ n(
-              a,
+              d,
               {
                 flexDirection: "column",
                 alignItems: "flex-end",
                 hideAt: ["sm", "md"],
                 className: o.customer,
                 children: [
-                  /* @__PURE__ */ n(m, { size: "xxs", children: [
+                  /* @__PURE__ */ n(c, { size: "xxs", children: [
                     "Acct: ",
                     e == null ? void 0 : e.number
                   ] }),
-                  /* @__PURE__ */ n(m, { size: "sm", variant: "display", colorToken: "links", children: [
+                  /* @__PURE__ */ n(c, { size: "sm", variant: "display", colorToken: "links", children: [
                     "Hello ",
                     e == null ? void 0 : e.name
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ t(h, { initials: e.initials })
+            e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
           ]
         }
       ),
-      children: l
+      children: a
     }
   ) : /* @__PURE__ */ n(
     "div",
     {
-      className: d(o.loggedIn, c(s), r),
-      ...g,
+      className: g(o.loggedIn, m(s), r),
+      ...l,
       children: [
         /* @__PURE__ */ n(
-          a,
+          d,
           {
             flexDirection: "column",
             alignItems: "flex-end",
             hideAt: ["sm", "md"],
             className: o.customer,
             children: [
-              /* @__PURE__ */ n(m, { size: "xxs", children: [
+              /* @__PURE__ */ n(c, { size: "xxs", children: [
                 "Acct: ",
                 e == null ? void 0 : e.number
               ] }),
-              /* @__PURE__ */ n(m, { size: "sm", variant: "display", colorToken: "links", children: [
+              /* @__PURE__ */ n(c, { size: "sm", variant: "display", colorToken: "links", children: [
                 "Hello ",
                 e == null ? void 0 : e.name
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ t(h, { initials: e.initials })
+        e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
       ]
     }
   );
 }
-function k(i) {
-  const { onLoginClick: e, className: r, hideAt: s, ...l } = i;
+function N(i) {
+  const {
+    onLoginClick: e,
+    className: r,
+    hideAt: s,
+    popoverContent: a,
+    isAccountLoading: h,
+    ...l
+  } = i;
   return /* @__PURE__ */ n(
-    a,
+    d,
     {
       flexDirection: "row",
       alignItems: "center",
       ...l,
-      className: d(
+      className: g(
         o.unauthenticated,
-        c(s),
+        m(s),
         r
       ),
       children: [
         /* @__PURE__ */ t(
-          u,
+          p,
           {
             onClick: e,
             size: "sm",
@@ -120,5 +129,5 @@ function k(i) {
   );
 }
 export {
-  P 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 { jsx as t } from "react/jsx-runtime";
+import { Account as a } from "./Account.js";
+const e = {
   title: "Case Parts/Molecules/Account",
-  component: t,
+  component: a,
   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 = {
+}, c = {
   args: {
     onLoginClick: () => {
     }
   }
-}, a = {
+}, s = {
   args: {
     account: {
       name: "Ringo",
@@ -23,9 +24,27 @@ const o = {
     onLoginClick: () => {
     }
   }
+}, i = {
+  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
+  s as Authenticated,
+  i as AuthenticatedWithCustomAvatar,
+  c as Unauthenticated,
+  e as default
 };

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

@@ -15,6 +15,8 @@ export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDi
     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,30 +1,30 @@
 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,
@@ -41,9 +41,11 @@ import '../../assets/MainNav.css';const G = "_main_19pdr_1", K = "_column_19pdr_
   onClickModelSerial: f,
   onCartClick: y,
   accountPopoverContent: b,
-  ...w
-}, j) {
-  return /* @__PURE__ */ e(z, { ...w, gridWrapperClassName: s(r.main, C), children: /* @__PURE__ */ o(I, { span: 12, className: r.column, children: [
+  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,
                     onLoginClick: k,
                     className: r.avatar,
-                    popoverContent: b
+                    popoverContent: b,
+                    isAccountLoading: w
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  F,
+                  B,
                   {
-                    ref: j,
+                    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,19 +1,19 @@
-import { jsxs as u, Fragment as h, jsx as i } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { MainNav as b } from "./MainNav.js";
-import { Text as d } from "../../atoms/Text/Text.js";
-import { Link as s } from "../../atoms/Link/Link.js";
-import { Button as v } from "../../atoms/Button/Button.js";
-import { CartSlideInPanel as g } from "../../molecules/Cart/CartSlideInPanel.js";
+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: b,
+  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"],
-}, r = [
+}, l = [
   {
     id: 0,
     label: "Shop by Brands",
@@ -106,7 +106,7 @@ const U = {
     route: "#",
     children: []
   }
-], a = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", n = {
+], a = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", r = {
   items: [
     { id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
     { id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
@@ -124,32 +124,32 @@ const U = {
 };
 function y(e) {
   return `$${e.items.reduce(
-    (t, l) => t + (parseFloat(l.price.replace(/[^0-9.]/g, "")) || 0) * l.quantity,
+    (i, o) => i + (parseFloat(o.price.replace(/[^0-9.]/g, "")) || 0) * o.quantity,
     0
   ).toFixed(2)}`;
 }
-const m = /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "column", gap: 8, minWidth: 220 }, children: [
-  /* @__PURE__ */ i(d, { size: "sm", weight: "semibold", children: "Account" }),
-  /* @__PURE__ */ i(d, { size: "xs", children: "Signed in as Ringo" }),
-  /* @__PURE__ */ i(s, { href: "/account", children: "View Account" }),
-  /* @__PURE__ */ i(s, { href: "/orders", children: "Order History" }),
-  /* @__PURE__ */ i(v, { size: "sm", variant: "secondary", onClick: () => alert("Sign out"), children: "Sign Out" })
-] }), c = (e) => {
-  const [o, t] = p(!1);
-  return /* @__PURE__ */ u(h, { children: [
-    /* @__PURE__ */ i(
-      b,
+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: o,
-        onCartClick: () => t((l) => !l)
+        open: c,
+        onCartClick: () => i((o) => !o)
       }
     ),
-    /* @__PURE__ */ i(
-      g,
+    /* @__PURE__ */ t(
+      v,
       {
-        open: o,
-        onClose: () => t(!1),
+        open: c,
+        onClose: () => i(!1),
         cart: e.cart,
         subtotal: y(e.cart),
         itemPriceLabel: "List Price",
@@ -161,10 +161,10 @@ const m = /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "c
       }
     )
   ] });
-}, D = {
+}, $ = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
-    cart: n,
+    cart: r,
     homeRoute: "/",
     customPartsRoute: "/custom",
     onClickModelSerial: () => {
@@ -182,14 +182,14 @@ const m = /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "c
     onCartClick: () => {
     },
     // placeholder required by component
-    categories: r,
-    accountPopoverContent: m
+    categories: l,
+    accountPopoverContent: d
   },
-  render: c
-}, $ = {
+  render: n
+}, D = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
-    cart: n,
+    cart: r,
     homeRoute: "/",
     customPartsRoute: "/custom",
     onClickModelSerial: () => {
@@ -206,13 +206,36 @@ const m = /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "c
     },
     onCartClick: () => {
     },
-    categories: r,
-    accountPopoverContent: m
+    categories: l,
+    accountPopoverContent: d
   },
-  render: c
+  render: n
 }, L = {
   args: {
-    cart: n,
+    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
+  },
+  render: n
+}, M = {
+  args: {
+    account: { name: "Ringo", initials: "RS", number: "123456789012" },
+    cart: r,
     homeRoute: "/",
     customPartsRoute: "/custom",
     onClickModelSerial: () => {
@@ -229,13 +252,17 @@ const m = /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "c
     },
     onCartClick: () => {
     },
-    categories: r
+    categories: l,
+    accountPopoverContent: d,
+    isAccountLoading: !0,
+    isCategoriesLoading: !0
   },
-  render: c
+  render: n
 };
 export {
-  D as Authenticated,
+  $ as Authenticated,
+  M as Loading,
   L as Unauthenticated,
-  $ as WithCartItems,
+  D as WithCartItems,
   U as default
 };

package/package.json

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