@caseparts-org/caseblocks 0.0.175 → 0.0.177

package/dist/main-browser.d.ts

@@ -0,0 +1,6 @@
+export { Markdown } from './atoms/Markdown/Markdown';
+export type { MarkdownProps } from './atoms/Markdown/Markdown';
+export { PreprocessedMarkdown } from './atoms/Markdown/PreprocessedMarkdown';
+export type { PreprocessedMarkdownProps } from './atoms/Markdown/PreprocessedMarkdown';
+export { usePreprocessedMarkdown } from './atoms/Markdown/usePreprocessedMarkdown';
+export type { LinkTarget, ValidateToken } from './atoms/Markdown/usePreprocessedMarkdown';

package/dist/main-browser.js

@@ -0,0 +1,8 @@
+import { Markdown as e } from "./atoms/Markdown/Markdown.js";
+import { PreprocessedMarkdown as p } from "./atoms/Markdown/PreprocessedMarkdown.js";
+import { usePreprocessedMarkdown as a } from "./atoms/Markdown/usePreprocessedMarkdown.js";
+export {
+  e as Markdown,
+  p as PreprocessedMarkdown,
+  a as usePreprocessedMarkdown
+};

package/dist/main-client.d.ts

@@ -3,12 +3,6 @@ export { HorizontalScroll } from './atoms/HorizontalScroll/HorizontalScroll';
 export type { HorizontalScrollProps } from './atoms/HorizontalScroll/HorizontalScroll';
 export { SlideInPanel } from './atoms/SlideInPanel/SlideInPanel';
 export type { SlideInPanelProps } from './atoms/SlideInPanel/SlideInPanel';
-export { Markdown } from './atoms/Markdown/Markdown';
-export type { MarkdownProps } from './atoms/Markdown/Markdown';
-export { PreprocessedMarkdown } from './atoms/Markdown/PreprocessedMarkdown';
-export type { PreprocessedMarkdownProps } from './atoms/Markdown/PreprocessedMarkdown';
-export { usePreprocessedMarkdown } from './atoms/Markdown/usePreprocessedMarkdown';
-export type { LinkTarget, ValidateToken } from './atoms/Markdown/usePreprocessedMarkdown';
 export { Tooltip } from './atoms/Tooltip/Tooltip';
 export { Popover } from './atoms/Popover/Popover';
 export type { PopoverProps } from './atoms/Popover/Popover';

package/dist/main-client.js

@@ -1,18 +1,18 @@
 import { Button as e } from "./atoms/Button/Button.js";
-import { Flex as p } from "./atoms/Flex/Flex.js";
+import { Flex as m } from "./atoms/Flex/Flex.js";
 import { Column as f, Grid as x } from "./atoms/Grid/Grid.js";
 import { Head as i } from "./atoms/Root/Head.js";
 import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as u } from "./atoms/Root/Root.js";
-import { Separator as s } from "./atoms/Separator/Separator.js";
-import { Text as g } from "./atoms/Text/Text.js";
-import { Input as S } from "./atoms/Input/Input.js";
-import { ToggleSwitch as T } from "./atoms/ToggleSwitch/ToggleSwitch.js";
-import { Link as A } from "./atoms/Link/Link.js";
-import { linkClassName as B } from "./atoms/Link/linkClassName.js";
-import { configureLink as h, routerOverride as v } from "./atoms/Link/configureLink.js";
-import { LinkButton as b } from "./atoms/LinkButton/LinkButton.js";
-import { configureImage as F } from "./atoms/Image/configureImage.js";
+import { Separator as C } from "./atoms/Separator/Separator.js";
+import { Text as S } from "./atoms/Text/Text.js";
+import { Input as T } from "./atoms/Input/Input.js";
+import { ToggleSwitch as A } from "./atoms/ToggleSwitch/ToggleSwitch.js";
+import { Link as P } from "./atoms/Link/Link.js";
+import { linkClassName as h } from "./atoms/Link/linkClassName.js";
+import { configureLink as L, routerOverride as w } from "./atoms/Link/configureLink.js";
+import { LinkButton as y } from "./atoms/LinkButton/LinkButton.js";
+import { configureImage as H } from "./atoms/Image/configureImage.js";
 import { getHideAtStyles as N } from "./atoms/HideAt.js";
 import { Logo as z } from "./molecules/Logo/Logo.js";
 import { SearchBox as E } from "./molecules/SearchBox/SearchBox.js";
@@ -23,88 +23,82 @@ import { Avatar as J } from "./molecules/Avatar/Avatar.js";
 import { BannerCard as U } from "./molecules/BannerCard/BannerCard.js";
 import { CardLink as X } from "./molecules/CardLink/CardLink.js";
 import { Breadcrumbs as _ } from "./molecules/Breadcrumbs/Breadcrumbs.js";
-import { Disclaimer as rr } from "./molecules/Disclaimer/Disclaimer.js";
-import { NotFound as er } from "./organisms/NotFound/NotFound.js";
-import { HorizontalScroll as pr } from "./atoms/HorizontalScroll/HorizontalScroll.js";
-import { SlideInPanel as fr } from "./atoms/SlideInPanel/SlideInPanel.js";
-import { Markdown as ar } from "./atoms/Markdown/Markdown.js";
-import { PreprocessedMarkdown as nr } from "./atoms/Markdown/PreprocessedMarkdown.js";
-import { usePreprocessedMarkdown as dr } from "./atoms/Markdown/usePreprocessedMarkdown.js";
-import { Tooltip as cr } from "./atoms/Tooltip/Tooltip.js";
-import { Popover as Cr } from "./atoms/Popover/Popover.js";
-import { Account as kr } from "./molecules/Account/Account.js";
-import { Chip as Pr } from "./molecules/Chip/Chip.js";
-import { ToggleView as wr } from "./molecules/ToggleView/ToggleView.js";
-import { CartPart as Ir } from "./molecules/Cart/CartPart.js";
-import { AddToCartPart as Mr } from "./molecules/AddToCartPart/AddToCartPart.js";
-import { CartSlideInPanel as vr } from "./molecules/Cart/CartSlideInPanel.js";
-import { StatefulButton as br } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as Fr } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as Nr } from "./molecules/AddToCart/AddToCart.js";
-import { Modal as zr } from "./molecules/Modal/Modal.js";
-import { ImageViewer as Er } from "./molecules/ImageViewer/ImageViewer.js";
-import { T as Or } from "./Table-BX4PtCNE.js";
-import { Error as Rr } from "./molecules/Error/Error.js";
-import { MainNav as jr } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as Jr } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as Ur } from "./organisms/Product/Product.js";
-import { Carousel as Xr } from "./organisms/Carousel/Carousel.js";
-import { Footer as _r } from "./organisms/Footer/Footer.js";
-import { default as ro } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
+import { Disclaimer as oo } from "./molecules/Disclaimer/Disclaimer.js";
+import { NotFound as eo } from "./organisms/NotFound/NotFound.js";
+import { HorizontalScroll as mo } from "./atoms/HorizontalScroll/HorizontalScroll.js";
+import { SlideInPanel as fo } from "./atoms/SlideInPanel/SlideInPanel.js";
+import { Tooltip as ao } from "./atoms/Tooltip/Tooltip.js";
+import { Popover as no } from "./atoms/Popover/Popover.js";
+import { Account as uo } from "./molecules/Account/Account.js";
+import { Chip as Co } from "./molecules/Chip/Chip.js";
+import { ToggleView as So } from "./molecules/ToggleView/ToggleView.js";
+import { CartPart as To } from "./molecules/Cart/CartPart.js";
+import { AddToCartPart as Ao } from "./molecules/AddToCartPart/AddToCartPart.js";
+import { CartSlideInPanel as Po } from "./molecules/Cart/CartSlideInPanel.js";
+import { StatefulButton as ho } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as Lo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as bo } from "./molecules/AddToCart/AddToCart.js";
+import { Modal as Fo } from "./molecules/Modal/Modal.js";
+import { ImageViewer as Mo } from "./molecules/ImageViewer/ImageViewer.js";
+import { T as Vo } from "./Table-BX4PtCNE.js";
+import { Error as Do } from "./molecules/Error/Error.js";
+import { MainNav as Go } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as Qo } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Zo } from "./organisms/Product/Product.js";
+import { Carousel as qo } from "./organisms/Carousel/Carousel.js";
+import { Footer as Ko } from "./organisms/Footer/Footer.js";
+import { default as Wo } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
 export {
-  kr as Account,
-  Nr as AddToCart,
-  Mr as AddToCartPart,
-  Fr as AnimatedCheckMark,
+  uo as Account,
+  bo as AddToCart,
+  Ao as AddToCartPart,
+  Lo as AnimatedCheckMark,
   j as Availability,
   J as Avatar,
   U as BannerCard,
   _ as Breadcrumbs,
   e as Button,
   X as CardLink,
-  Xr as Carousel,
-  Ir as CartPart,
-  vr as CartSlideInPanel,
-  Pr as Chip,
-  Jr as ChipSelector,
+  qo as Carousel,
+  To as CartPart,
+  Po as CartSlideInPanel,
+  Co as Chip,
+  Qo as ChipSelector,
   f as Column,
-  rr as Disclaimer,
-  Rr as Error,
-  p as Flex,
-  _r as Footer,
+  oo as Disclaimer,
+  Do as Error,
+  m as Flex,
+  Ko as Footer,
   x as Grid,
   i as Head,
-  pr as HorizontalScroll,
+  mo as HorizontalScroll,
   l as Icon,
-  Er as ImageViewer,
-  S as Input,
-  A as Link,
-  b as LinkButton,
+  Mo as ImageViewer,
+  T as Input,
+  P as Link,
+  y as LinkButton,
   z as Logo,
-  jr as MainNav,
-  ar as Markdown,
-  zr as Modal,
-  er as NotFound,
-  Cr as Popover,
-  nr as PreprocessedMarkdown,
+  Go as MainNav,
+  Fo as Modal,
+  eo as NotFound,
+  no as Popover,
   R as Pricing,
-  Ur as Product,
+  Zo as Product,
   O as QuantityInput,
   u as Root,
   E as SearchBox,
-  s as Separator,
-  fr as SlideInPanel,
-  ro as SpinZoomViewer,
-  br as StatefulButton,
-  Or as Table,
-  g as Text,
-  T as ToggleSwitch,
-  wr as ToggleView,
-  cr as Tooltip,
-  F as configureImage,
-  h as configureLink,
+  C as Separator,
+  fo as SlideInPanel,
+  Wo as SpinZoomViewer,
+  ho as StatefulButton,
+  Vo as Table,
+  S as Text,
+  A as ToggleSwitch,
+  So as ToggleView,
+  ao as Tooltip,
+  H as configureImage,
+  L as configureLink,
   N as getHideAtStyles,
-  B as linkClassName,
-  v as routerOverride,
-  dr as usePreprocessedMarkdown
+  h as linkClassName,
+  w as routerOverride
 };

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

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

package/dist/molecules/CategoryNav/CategoryNav.js

@@ -1,31 +1,32 @@
-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 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: b
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { c as p } from "../../clsx-OuTLNxxd.js";
+import { Text as m } from "../../atoms/Text/Text.js";
+import { Link as t } from "../../atoms/Link/Link.js";
+import { Icon as d } from "../../atoms/Icon/Icon.js";
+import { getHideAtStyles as u } from "../../atoms/HideAt.js";
+import { Tooltip as f } from "../../atoms/Tooltip/Tooltip.js";
+import '../../assets/CategoryNav.css';const c = "_categories_19tew_1", a = "_placeholder_19tew_17", b = "_category_19tew_25", _ = "_submenuTooltip_19tew_51", i = {
+  categories: c,
+  placeholder: a,
+  category: b,
+  submenuTooltip: _
 };
-function v({
-  categories: o,
-  isCategoriesLoading: a
+function D({
+  categories: n,
+  isCategoriesLoading: h,
+  onCategoryClick: s
 }) {
-  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(
+  return h ? /* @__PURE__ */ e("div", { className: i.placeholder }) : !n || n.length === 0 ? null : /* @__PURE__ */ e("ul", { className: p(i.categories, u(["sm"])), children: n.map(
     (l) => l.children.length > 0 ? /* @__PURE__ */ e(
-      h,
+      f,
       {
         openDelay: 180,
         closeDelay: 0,
         tooltipOffset: 0,
-        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 }),
+        trigger: /* @__PURE__ */ e("li", { className: i.category, tabIndex: 0, children: /* @__PURE__ */ o(t, { href: l.route, onClick: () => s == null ? void 0 : s(l), children: [
+          /* @__PURE__ */ e(m, { size: "sm", weight: "semibold", children: l.label }),
           l.showChevron && /* @__PURE__ */ e(
-            m,
+            d,
             {
               iconKey: "fa-regular fa-angle-down",
               title: "Expand",
@@ -34,13 +35,13 @@ function v({
           )
         ] }) }),
         position: "bottom center",
-        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)) })
+        children: /* @__PURE__ */ e("ul", { className: i.submenuTooltip, children: l.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(t, { href: r.route, onClick: () => s == null ? void 0 : s(r), children: /* @__PURE__ */ e(m, { size: "sm", weight: "semibold", children: r.label }) }) }, r.id)) })
       },
       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 }),
+    ) : /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ o(t, { href: l.route, onClick: () => s == null ? void 0 : s(l), children: [
+      /* @__PURE__ */ e(m, { size: "sm", weight: "semibold", children: l.label }),
       l.showChevron && /* @__PURE__ */ e(
-        m,
+        d,
         {
           iconKey: "fa-regular fa-angle-down",
           title: "Expand",
@@ -51,5 +52,5 @@ function v({
   ) });
 }
 export {
-  v as CategoryNav
+  D as CategoryNav
 };

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

@@ -12,6 +12,7 @@ export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDi
     cart: ShoppingCart;
     onLoginClick: () => void;
     onSearch: (_input: string) => void;
+    onCategoryClick?: (_category: CategoryWithChildren | CategoryWithChildren["children"][number]) => void;
     onClickModelSerial: () => void;
     /** Content shown in the account popover when authenticated */
     accountPopoverContent?: React.ReactNode;

package/dist/organisms/MainNav/MainNav.js

@@ -1,123 +1,124 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import D from "react";
+import S from "react";
 import { Text as l } from "../../atoms/Text/Text.js";
-import { Link as h } from "../../atoms/Link/Link.js";
-import { Icon as n } from "../../atoms/Icon/Icon.js";
-import { Flex as s } from "../../atoms/Flex/Flex.js";
-import { Grid as M, Column as S } from "../../atoms/Grid/Grid.js";
-import { Logo as U } from "../../molecules/Logo/Logo.js";
-import { SearchBox as N } from "../../molecules/SearchBox/SearchBox.js";
-import { HamburgerMenu as F } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
-import { ShoppingCart as H } from "../../molecules/Cart/Cart.js";
-import { Account as q } from "../../molecules/Account/Account.js";
-import { CategoryNav as B } from "../../molecules/CategoryNav/CategoryNav.js";
+import { Link as d } from "../../atoms/Link/Link.js";
+import { Icon as s } from "../../atoms/Icon/Icon.js";
+import { Flex as a } from "../../atoms/Flex/Flex.js";
+import { Grid as U, Column as C } from "../../atoms/Grid/Grid.js";
+import { Logo as F } from "../../molecules/Logo/Logo.js";
+import { SearchBox as b } from "../../molecules/SearchBox/SearchBox.js";
+import { HamburgerMenu as H } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
+import { ShoppingCart as q } from "../../molecules/Cart/Cart.js";
+import { Account as B } from "../../molecules/Account/Account.js";
+import { CategoryNav as G } from "../../molecules/CategoryNav/CategoryNav.js";
 import { getHideAtStyles as g } from "../../atoms/HideAt.js";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import '../../assets/MainNav.css';const G = "_main_t25b8_1", P = "_column_t25b8_8", Q = "_topNav_t25b8_13", T = "_logo_t25b8_21", W = "_operations_t25b8_24", E = "_search_t25b8_31", J = "_siteLink_t25b8_34", O = "_accountArea_t25b8_54", R = "_category_t25b8_66", V = "_menuList_t25b8_91", i = {
-  main: G,
-  column: P,
-  topNav: Q,
-  logo: T,
-  operations: W,
-  search: E,
-  siteLink: J,
-  accountArea: O,
-  category: R,
-  menuList: V
-}, he = D.forwardRef(function({
-  account: a,
-  categories: o,
-  homeRoute: b,
-  faqRoute: v,
-  customPartsRoute: f,
-  aboutUsRoute: y,
-  contactRoute: u,
-  cart: L,
-  open: A,
+import { c as h } from "../../clsx-OuTLNxxd.js";
+import '../../assets/MainNav.css';const P = "_main_t25b8_1", Q = "_column_t25b8_8", T = "_topNav_t25b8_13", W = "_logo_t25b8_21", E = "_operations_t25b8_24", J = "_search_t25b8_31", O = "_siteLink_t25b8_34", R = "_accountArea_t25b8_54", V = "_category_t25b8_66", X = "_menuList_t25b8_91", i = {
+  main: P,
+  column: Q,
+  topNav: T,
+  logo: W,
+  operations: E,
+  search: J,
+  siteLink: O,
+  accountArea: R,
+  category: V,
+  menuList: X
+}, de = S.forwardRef(function({
+  account: m,
+  categories: t,
+  homeRoute: v,
+  faqRoute: L,
+  customPartsRoute: u,
+  aboutUsRoute: A,
+  contactRoute: p,
+  cart: x,
+  open: w,
   // consume external panel control props from CartPropsBase
-  className: x,
-  onLoginClick: C,
-  onSearch: p,
-  onClickModelSerial: _,
-  onCartClick: k,
-  accountPopoverContent: w,
-  isAccountLoading: z,
-  isCategoriesLoading: I,
-  ...K
-}, j) {
-  return /* @__PURE__ */ e(M, { ...K, gridWrapperClassName: m(i.main, x), children: /* @__PURE__ */ r(S, { span: 12, className: i.column, children: [
+  className: y,
+  onLoginClick: z,
+  onSearch: _,
+  onCategoryClick: o,
+  onClickModelSerial: N,
+  onCartClick: I,
+  accountPopoverContent: k,
+  isAccountLoading: K,
+  isCategoriesLoading: j,
+  ...D
+}, M) {
+  return /* @__PURE__ */ e(U, { ...D, gridWrapperClassName: h(i.main, y), children: /* @__PURE__ */ r(C, { span: 12, className: i.column, children: [
     /* @__PURE__ */ r(
-      s,
+      a,
       {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
         className: i.topNav,
         children: [
-          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(h, { href: b, children: /* @__PURE__ */ e(U, {}) }) }),
+          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(d, { href: v, children: /* @__PURE__ */ e(F, {}) }) }),
           /* @__PURE__ */ r(
-            s,
+            a,
             {
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "flex-end",
               className: i.operations,
               children: [
-                /* @__PURE__ */ e(s, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(N, { onSearch: p, inputName: "cpc-search" }) }),
-                /* @__PURE__ */ e("button", { onClick: _, className: m(i.siteLink, g(["sm", "md"])), children: "Model/Serial" }),
-                /* @__PURE__ */ e(t, { href: f, hideAt: ["sm", "md"], children: "Custom Parts" }),
-                /* @__PURE__ */ e(t, { href: u, hideAt: ["sm", "md"], children: "Contact Us" }),
+                /* @__PURE__ */ e(a, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(b, { onSearch: _, inputName: "cpc-search" }) }),
+                /* @__PURE__ */ e("button", { onClick: N, className: h(i.siteLink, g(["sm", "md"])), children: "Model/Serial" }),
+                /* @__PURE__ */ e(n, { href: u, hideAt: ["sm", "md"], children: "Custom Parts" }),
+                /* @__PURE__ */ e(n, { href: p, hideAt: ["sm", "md"], children: "Contact Us" }),
                 /* @__PURE__ */ e("div", { className: i.accountArea, children: /* @__PURE__ */ e(
-                  q,
+                  B,
                   {
-                    account: a,
-                    onLoginClick: C,
+                    account: m,
+                    onLoginClick: z,
                     className: i.avatar,
-                    popoverContent: w,
-                    isAccountLoading: z
+                    popoverContent: k,
+                    isAccountLoading: K
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  H,
+                  q,
                   {
-                    ref: j,
-                    cart: L,
-                    open: A,
-                    onCartClick: k
+                    ref: M,
+                    cart: x,
+                    open: w,
+                    onCartClick: I
                   }
                 ),
-                /* @__PURE__ */ r(F, { hideAt: ["lg"], children: [
+                /* @__PURE__ */ r(H, { hideAt: ["lg"], children: [
                   /* @__PURE__ */ r("section", { children: [
                     /* @__PURE__ */ e(l, { size: "md", weight: "semibold", children: "Useful shortcuts" }),
                     /* @__PURE__ */ r("ul", { className: i.menuList, children: [
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-regular fa-book", size: "sm" }),
-                        /* @__PURE__ */ e("button", { onClick: _, className: m(i.siteLink, g(["lg"])), children: "Model/Serial" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-regular fa-book", size: "sm" }),
+                        /* @__PURE__ */ e("button", { onClick: N, className: h(i.siteLink, g(["lg"])), children: "Model/Serial" })
                       ] }),
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-regular fa-screwdriver-wrench", size: "sm" }),
-                        /* @__PURE__ */ e(t, { href: f, children: "Custom Parts" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-regular fa-screwdriver-wrench", size: "sm" }),
+                        /* @__PURE__ */ e(n, { href: u, children: "Custom Parts" })
                       ] }),
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-regular fa-envelope", size: "sm" }),
-                        /* @__PURE__ */ e(t, { href: u, children: "Contact Us" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-regular fa-envelope", size: "sm" }),
+                        /* @__PURE__ */ e(n, { href: p, children: "Contact Us" })
                       ] }),
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-solid fa-question", size: "sm" }),
-                        /* @__PURE__ */ e(t, { href: v, children: "FAQ" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-solid fa-question", size: "sm" }),
+                        /* @__PURE__ */ e(n, { href: L, children: "FAQ" })
                       ] }),
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-regular fa-people-group", size: "sm" }),
-                        /* @__PURE__ */ e(t, { href: y, children: "About Us" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-regular fa-people-group", size: "sm" }),
+                        /* @__PURE__ */ e(n, { href: A, children: "About Us" })
                       ] })
                     ] })
                   ] }),
                   /* @__PURE__ */ r("section", { children: [
                     /* @__PURE__ */ e(l, { size: "md", weight: "semibold", children: "Shop by category" }),
-                    /* @__PURE__ */ e("ul", { className: i.menuList, children: o && o.map((c) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ r(h, { href: c.route, children: [
+                    /* @__PURE__ */ e("ul", { className: i.menuList, children: t && t.map((c) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ r(d, { href: c.route, onClick: () => o == null ? void 0 : o(c), children: [
                       /* @__PURE__ */ e(l, { size: "sm", children: c.label }),
                       /* @__PURE__ */ e(
-                        n,
+                        s,
                         {
                           iconKey: "fa-solid fa-chevron-right",
                           title: "Navigate",
@@ -133,17 +134,24 @@ import '../../assets/MainNav.css';const G = "_main_t25b8_1", P = "_column_t25b8_
         ]
       }
     ),
-    /* @__PURE__ */ e(s, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(N, { onSearch: p, inputName: "cpc-search", className: i.search }) }),
-    /* @__PURE__ */ e(B, { categories: o, isCategoriesLoading: I })
+    /* @__PURE__ */ e(a, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(b, { onSearch: _, inputName: "cpc-search", className: i.search }) }),
+    /* @__PURE__ */ e(
+      G,
+      {
+        categories: t,
+        isCategoriesLoading: j,
+        onCategoryClick: o
+      }
+    )
   ] }) });
 });
-function t({
-  href: d,
-  children: a,
-  ...o
+function n({
+  href: f,
+  children: m,
+  ...t
 }) {
-  return /* @__PURE__ */ e(h, { href: d, className: i.siteLink, ...o, children: a });
+  return /* @__PURE__ */ e(d, { href: f, className: i.siteLink, ...t, children: m });
 }
 export {
-  he as MainNav
+  de as MainNav
 };

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

@@ -1,11 +1,11 @@
 import { jsxs as b, Fragment as g, jsx as t } from "react/jsx-runtime";
-import { useState as h } from "react";
+import { useState as y } 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 = {
+import { Button as h } from "../../atoms/Button/Button.js";
+import { CartSlideInPanel as p } from "../../molecules/Cart/CartSlideInPanel.js";
+const q = {
   title: "Case Parts/Organisms/MainNav",
   component: m,
   parameters: {
@@ -122,7 +122,7 @@ const U = {
     { id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" }
   ]
 };
-function y(e) {
+function v(e) {
   return `$${e.items.reduce(
     (i, o) => i + (parseFloat(o.price.replace(/[^0-9.]/g, "")) || 0) * o.quantity,
     0
@@ -133,9 +133,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
   /* @__PURE__ */ t(s, { size: "xs", children: "Signed in as Ringo" }),
   /* @__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" })
+  /* @__PURE__ */ t(h, { size: "sm", variant: "secondary", "data-popover-close": "true", onClick: () => alert("Sign out"), children: "Sign Out" })
 ] }), n = (e) => {
-  const [c, i] = h(!1);
+  const [c, i] = y(!1);
   return /* @__PURE__ */ b(g, { children: [
     /* @__PURE__ */ t(
       m,
@@ -146,12 +146,12 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
       }
     ),
     /* @__PURE__ */ t(
-      v,
+      p,
       {
         open: c,
         onClose: () => i(!1),
         cart: e.cart,
-        subtotal: y(e.cart),
+        subtotal: v(e.cart),
         itemPriceLabel: "List Price",
         contactHref: e.contactRoute,
         contactLinkBehavior: "new-tab",
@@ -161,7 +161,7 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
       }
     )
   ] });
-}, $ = {
+}, U = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
     cart: r,
@@ -179,6 +179,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
+    onCategoryClick: (e) => {
+      alert(`Category ${e.label}`);
+    },
     onCartClick: () => {
     },
     // placeholder required by component
@@ -204,6 +207,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
+    onCategoryClick: (e) => {
+      alert(`Category ${e.label}`);
+    },
     onCartClick: () => {
     },
     categories: l,
@@ -227,6 +233,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
+    onCategoryClick: (e) => {
+      alert(`Category ${e.label}`);
+    },
     onCartClick: () => {
     },
     categories: l
@@ -250,6 +259,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
+    onCategoryClick: (e) => {
+      alert(`Category ${e.label}`);
+    },
     onCartClick: () => {
     },
     categories: l,
@@ -260,9 +272,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
   render: n
 };
 export {
-  $ as Authenticated,
+  U as Authenticated,
   M as Loading,
   L as Unauthenticated,
   D as WithCartItems,
-  U as default
+  q as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.175",
+  "version": "0.0.177",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -17,6 +17,10 @@
       "import": "./dist/main-client.js",
       "types": "./dist/main-client.d.ts"
     },
+    "./browser": {
+      "import": "./dist/main-browser.js",
+      "types": "./dist/main-browser.d.ts"
+    },
     "./styles/*": {
       "default": "./dist/styles/*"
     }