@caseparts-org/caseblocks 0.0.91 → 0.0.92

package/dist/atoms/Tooltip/Tooltip.js

@@ -1,120 +1,131 @@
-import { jsxs as H, Fragment as N, jsx as F } from "react/jsx-runtime";
-import * as r from "react";
-import { c as M } from "../../clsx-OuTLNxxd.js";
-import { r as O } from "../../index-B4KbmMH3.js";
-import '../../assets/Tooltip.css';const W = "_tooltip_17o7a_1", A = "_content_17o7a_11", S = {
-  tooltip: W,
-  content: A
+import { jsxs as N, Fragment as O, jsx as M } from "react/jsx-runtime";
+import * as i from "react";
+import { c as S } from "../../clsx-OuTLNxxd.js";
+import { r as W } from "../../index-B4KbmMH3.js";
+import '../../assets/Tooltip.css';const A = "_tooltip_17o7a_1", D = "_content_17o7a_11", j = {
+  tooltip: A,
+  content: D
 };
-function D(l) {
+function I(l) {
   return l ? l.includes(" ") ? l : `${l} center` : "top center";
 }
-function I(l) {
-  const m = D(l).toLowerCase(), [i, t] = m.split(" ");
-  return { side: ["top", "right", "bottom", "left"].includes(i) ? i : "top", align: t === "left" || t === "top" ? "start" : t === "right" || t === "bottom" ? "end" : "center" };
+function $(l) {
+  const v = I(l).toLowerCase(), [s, t] = v.split(" ");
+  return { side: ["top", "right", "bottom", "left"].includes(s) ? s : "top", align: t === "left" || t === "top" ? "start" : t === "right" || t === "bottom" ? "end" : "center" };
 }
-function $(l, m, i, t, a = 8) {
-  const e = l.getBoundingClientRect(), u = m.getBoundingClientRect();
-  let f = 0, s = 0;
-  i === "top" ? f = e.top - u.height - a : i === "bottom" ? f = e.bottom + a : i === "left" ? s = e.left - u.width - a : i === "right" && (s = e.right + a), i === "top" || i === "bottom" ? t === "start" ? s = e.left : t === "end" ? s = e.right - u.width : s = e.left + e.width / 2 - u.width / 2 : t === "start" ? f = e.top : t === "end" ? f = e.bottom - u.height : f = e.top + e.height / 2 - u.height / 2;
-  const h = window.innerWidth, w = window.innerHeight;
-  return f = Math.max(4, Math.min(w - u.height - 4, f)), s = Math.max(4, Math.min(h - u.width - 4, s)), { top: f, left: s };
+function q(l, v, s, t, d = 8) {
+  const n = l.getBoundingClientRect(), u = v.getBoundingClientRect();
+  let f = 0, c = 0;
+  s === "top" ? f = n.top - u.height - d : s === "bottom" ? f = n.bottom + d : s === "left" ? c = n.left - u.width - d : s === "right" && (c = n.right + d), s === "top" || s === "bottom" ? t === "start" ? c = n.left : t === "end" ? c = n.right - u.width : c = n.left + n.width / 2 - u.width / 2 : t === "start" ? f = n.top : t === "end" ? f = n.bottom - u.height : f = n.top + n.height / 2 - u.height / 2;
+  const E = window.innerWidth, R = window.innerHeight;
+  return f = Math.max(4, Math.min(R - u.height - 4, f)), c = Math.max(4, Math.min(E - u.width - 4, c)), { top: f, left: c };
 }
-const K = ({
+const Q = ({
   tooltipClassName: l,
-  contentClassName: m,
-  children: i,
+  contentClassName: v,
+  children: s,
   trigger: t,
-  position: a,
-  disabled: e,
+  position: d,
+  disabled: n,
   openDelay: u = 150,
   closeDelay: f = 100,
-  leaveGraceMs: s = 0
+  leaveGraceMs: c = 0
 }) => {
-  const { side: h, align: w } = I(a), [c, E] = r.useState(!1), [d, g] = r.useState(null), _ = r.useRef(null), z = r.useRef(null), T = r.useRef(null), R = r.useRef(null), y = r.useRef(null), L = r.useRef(!1), p = (n) => {
-    n.current && (window.clearTimeout(n.current), n.current = null);
-  }, C = () => {
-    p(T), p(R), p(y);
+  const { side: E, align: R } = $(d), [o, y] = i.useState(!1), [m, C] = i.useState(null), T = i.useRef(null), g = i.useRef(null), x = i.useRef(null), L = i.useRef(null), P = i.useRef(null), w = i.useRef(!1), a = (e) => {
+    e.current && (window.clearTimeout(e.current), e.current = null);
+  }, B = () => {
+    a(x), a(L), a(P);
   };
-  r.useEffect(() => () => C(), []);
-  const B = () => {
-    e || c || (p(T), T.current = window.setTimeout(() => E(!0), u));
-  }, x = () => {
-    c && (p(R), R.current = window.setTimeout(() => {
-      L.current || E(!1);
+  i.useEffect(() => () => B(), []);
+  const k = () => {
+    n || o || (a(x), x.current = window.setTimeout(() => y(!0), u));
+  }, _ = () => {
+    o && (a(L), L.current = window.setTimeout(() => {
+      w.current || y(!1);
     }, f));
-  }, k = () => {
-    if (c) {
-      if (p(y), s <= 0) {
-        x();
+  }, z = () => {
+    if (o) {
+      if (a(P), c <= 0) {
+        _();
         return;
       }
-      y.current = window.setTimeout(() => {
-        L.current || x();
-      }, s);
+      P.current = window.setTimeout(() => {
+        w.current || _();
+      }, c);
     }
-  }, P = (n, o) => (b) => {
-    n == null || n(b), o == null || o(b);
-  }, j = r.cloneElement(t, {
-    ref: (n) => {
-      const { ref: o } = t;
-      typeof o == "function" ? o(n) : o && (o.current = n), _.current = n;
+  }, b = (e, r) => (h) => {
+    e == null || e(h), r == null || r(h);
+  }, H = i.cloneElement(t, {
+    ref: (e) => {
+      const { ref: r } = t;
+      typeof r == "function" ? r(e) : r && (r.current = e), T.current = e;
     },
-    onPointerEnter: P(t.props.onPointerEnter, B),
-    onPointerLeave: P(t.props.onPointerLeave, k),
-    onFocus: P(t.props.onFocus, B),
-    onBlur: P(t.props.onBlur, x),
-    "aria-describedby": c ? "tooltip-popup" : void 0,
+    onPointerEnter: b(t.props.onPointerEnter, k),
+    onPointerLeave: b(t.props.onPointerLeave, z),
+    onFocus: b(t.props.onFocus, k),
+    onBlur: b(t.props.onBlur, _),
+    "aria-describedby": o ? "tooltip-popup" : void 0,
     style: { ...t.props.style || {}, outline: "none" }
   });
-  return r.useEffect(() => {
-    e && c && (C(), E(!1));
-  }, [e]), r.useEffect(() => {
-    if (!c) return;
-    const n = (o) => {
-      o.key === "Escape" && E(!1);
+  return i.useEffect(() => {
+    n && o && (B(), y(!1));
+  }, [n]), i.useEffect(() => {
+    if (!o) return;
+    const e = (r) => {
+      r.key === "Escape" && y(!1);
     };
-    return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
-  }, [c]), r.useLayoutEffect(() => {
-    if (!c) {
-      g(null);
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [o]), i.useLayoutEffect(() => {
+    if (!o) {
+      C(null);
       return;
     }
-    const n = _.current, o = z.current;
-    if (!n || !o) return;
-    const b = 8, v = () => {
-      g($(n, o, h, w, b));
+    const e = T.current, r = g.current;
+    if (!e || !r) return;
+    const h = 8, p = () => {
+      C(q(e, r, E, R, h));
+    };
+    return p(), window.addEventListener("resize", p), window.addEventListener("scroll", p, !0), () => {
+      window.removeEventListener("resize", p), window.removeEventListener("scroll", p, !0);
     };
-    return v(), window.addEventListener("resize", v), window.addEventListener("scroll", v, !0), () => {
-      window.removeEventListener("resize", v), window.removeEventListener("scroll", v, !0);
+  }, [o, E, R, s]), i.useEffect(() => {
+    if (!o) return;
+    const e = (r) => {
+      const h = T.current, p = g.current;
+      if (!h || !p) return;
+      const F = r.target;
+      !h.contains(F) && !p.contains(F) && (w.current = !1, z());
     };
-  }, [c, h, w, i]), /* @__PURE__ */ H(N, { children: [
-    j,
-    c && typeof document < "u" && O.createPortal(
-      /* @__PURE__ */ F(
+    return document.addEventListener("pointermove", e), () => document.removeEventListener("pointermove", e);
+  }, [o]), i.useEffect(() => {
+    o || (w.current = !1);
+  }, [o]), /* @__PURE__ */ N(O, { children: [
+    H,
+    o && typeof document < "u" && W.createPortal(
+      /* @__PURE__ */ M(
         "div",
         {
           id: "tooltip-popup",
-          ref: z,
+          ref: g,
           role: "tooltip",
-          "aria-hidden": !c,
-          "data-side": h,
-          "data-align": w,
-          className: M(S.tooltip, l),
+          "aria-hidden": !o,
+          "data-side": E,
+          "data-align": R,
+          className: S(j.tooltip, l),
           style: {
             position: "absolute",
-            top: (d == null ? void 0 : d.top) ?? 0,
-            left: (d == null ? void 0 : d.left) ?? 0,
-            visibility: d ? "visible" : "hidden",
+            top: (m == null ? void 0 : m.top) ?? 0,
+            left: (m == null ? void 0 : m.left) ?? 0,
+            visibility: m ? "visible" : "hidden",
             zIndex: 10
           },
           onPointerEnter: () => {
-            L.current = !0, p(R), p(y);
+            w.current = !0, a(L), a(P);
           },
           onPointerLeave: () => {
-            L.current = !1, k();
+            w.current = !1, z();
           },
-          children: /* @__PURE__ */ F("div", { className: M(S.content, m), children: i })
+          children: /* @__PURE__ */ M("div", { className: S(j.content, v), children: s })
         }
       ),
       document.body
@@ -122,5 +133,5 @@ const K = ({
   ] });
 };
 export {
-  K as Tooltip
+  Q as Tooltip
 };

package/dist/main-client.d.ts

@@ -11,6 +11,8 @@ export type { ChipProps } from './molecules/Chip/Chip';
 export { ToggleView } from './molecules/ToggleView/ToggleView';
 export type { ToggleViewProps, ToggleOptionProps, ToggleOptionBaseProps, } from './molecules/ToggleView/ToggleView';
 export type { ShoppingCart, CartItem } from './molecules/Cart/Cart';
+export { CartSlideInPanel } from './molecules/Cart/CartSlideInPanel';
+export type { CartSlideInPanelProps } from './molecules/Cart/CartSlideInPanel';
 export type { StatefulButtonProps } from './molecules/StatefulButton/StatefulButton';
 export { StatefulButton } from './molecules/StatefulButton/StatefulButton';
 export type { AnimatedCheckMarkProps } from './molecules/StatefulButton/AnimatedCheckmark';

package/dist/main-client.js

@@ -3,14 +3,14 @@ import { Flex as p } from "./atoms/Flex/Flex.js";
 import { Column as f, Grid as x } from "./atoms/Grid/Grid.js";
 import { Head as a } from "./atoms/Root/Head.js";
 import { Icon as l } from "./atoms/Icon/Icon.js";
-import { Root as c } from "./atoms/Root/Root.js";
+import { Root as d } from "./atoms/Root/Root.js";
 import { Separator as C } from "./atoms/Separator/Separator.js";
 import { Text as k } from "./atoms/Text/Text.js";
-import { Input as A } from "./atoms/Input/Input.js";
-import { Link as I } from "./atoms/Link/Link.js";
+import { Input as I } from "./atoms/Input/Input.js";
+import { Link as B } from "./atoms/Link/Link.js";
 import { linkClassName as h } from "./atoms/Link/linkClassName.js";
-import { configureLink as T, routerOverride as s } from "./atoms/Link/configureLink.js";
-import { LinkButton as N } from "./atoms/LinkButton/LinkButton.js";
+import { configureLink as P, routerOverride as T } from "./atoms/Link/configureLink.js";
+import { LinkButton as F } from "./atoms/LinkButton/LinkButton.js";
 import { configureImage as y } from "./atoms/Image/configureImage.js";
 import { Logo as M } from "./molecules/Logo/Logo.js";
 import { SearchBox as w } from "./molecules/SearchBox/SearchBox.js";
@@ -27,52 +27,54 @@ import { Tooltip as oo } from "./atoms/Tooltip/Tooltip.js";
 import { Account as to } from "./molecules/Account/Account.js";
 import { Chip as po } from "./molecules/Chip/Chip.js";
 import { ToggleView as fo } from "./molecules/ToggleView/ToggleView.js";
-import { StatefulButton as no } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as io } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as uo } from "./molecules/AddToCart/AddToCart.js";
-import { MainNav as Co } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as ko } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as Ao } from "./organisms/Product/Product.js";
-import { Carousel as Io } from "./organisms/Carousel/Carousel.js";
-import { Footer as ho } from "./organisms/Footer/Footer.js";
+import { CartSlideInPanel as no } from "./molecules/Cart/CartSlideInPanel.js";
+import { StatefulButton as io } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as uo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as Co } from "./molecules/AddToCart/AddToCart.js";
+import { MainNav as ko } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as Io } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Bo } from "./organisms/Product/Product.js";
+import { Carousel as ho } from "./organisms/Carousel/Carousel.js";
+import { Footer as Po } from "./organisms/Footer/Footer.js";
 export {
   to as Account,
-  uo as AddToCart,
-  io as AnimatedCheckMark,
+  Co as AddToCart,
+  uo as AnimatedCheckMark,
   V as Availability,
   q as Avatar,
   E as BannerCard,
   t as Button,
   K as CardLink,
-  Io as Carousel,
+  ho as Carousel,
+  no as CartSlideInPanel,
   po as Chip,
-  ko as ChipSelector,
+  Io as ChipSelector,
   f as Column,
   p as Flex,
-  ho as Footer,
+  Po as Footer,
   x as Grid,
   a as Head,
   Y as HorizontalScroll,
   l as Icon,
-  A as Input,
-  I as Link,
-  N as LinkButton,
+  I as Input,
+  B as Link,
+  F as LinkButton,
   M as Logo,
-  Co as MainNav,
+  ko as MainNav,
   W as NotFound,
   Q as Pricing,
-  Ao as Product,
+  Bo as Product,
   G as QuantityInput,
-  c as Root,
+  d as Root,
   w as SearchBox,
   C as Separator,
   _ as SlideInPanel,
-  no as StatefulButton,
+  io as StatefulButton,
   k as Text,
   fo as ToggleView,
   oo as Tooltip,
   y as configureImage,
-  T as configureLink,
+  P as configureLink,
   h as linkClassName,
-  s as routerOverride
+  T as routerOverride
 };

package/dist/molecules/Cart/Cart.d.ts

@@ -14,15 +14,10 @@ export interface ShoppingCart {
     items: CartItem[];
 }
 export interface CartPropsBase {
-    onItemQtyChange: (_item: CartItem, _newQuantity: number) => void;
-    onItemDelete: (_item: CartItem) => void;
-    onCheckout: () => void;
     cart: ShoppingCart;
-    subtotal?: string;
-    itemPriceLabel?: string;
-    contactHref?: string;
     open?: boolean;
     onCartClick: () => void;
+    onCheckout: () => void;
 }
 export interface ShoppingCartHandle {
     open: () => void;

package/dist/molecules/Cart/Cart.stories.js

@@ -1,15 +1,15 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { useState as d } from "react";
-import { ShoppingCart as r } from "./Cart.js";
-import { CartSlideInPanel as s } from "./CartSlideInPanel.js";
-const u = {
+import { jsxs as c, Fragment as d, jsx as o } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { ShoppingCart as n } from "./Cart.js";
+import { CartSlideInPanel as m } from "./CartSlideInPanel.js";
+const C = {
   title: "Case Parts/Molecules/Cart",
-  component: r,
+  component: n,
   parameters: {
     layout: "centered"
   },
   tags: ["autodocs"]
-}, a = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", m = {
+}, a = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", p = {
   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" },
@@ -31,90 +31,75 @@ const u = {
     { id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
     { id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" }
   ]
-}, t = (i) => {
-  const [e, l] = d(!1);
-  return /* @__PURE__ */ c("div", { style: { width: "100%", display: "flex", justifyContent: "center" }, children: [
+};
+function b(i) {
+  return `$${i.items.reduce(
+    (t, e) => t + (parseFloat(e.price.replace(/[^0-9.]/g, "")) || 0) * e.quantity,
+    0
+  ).toFixed(2)}`;
+}
+const r = (i) => {
+  const [l, t] = s(!1);
+  return /* @__PURE__ */ c(d, { children: [
     /* @__PURE__ */ o(
-      r,
+      n,
       {
         ...i,
-        open: e,
-        onCartClick: () => l((n) => !n)
+        open: l,
+        onCartClick: () => t((e) => !e)
       }
     ),
     /* @__PURE__ */ o(
-      s,
+      m,
       {
-        open: e,
-        onClose: () => l(!1),
+        open: l,
+        onClose: () => t(!1),
         cart: i.cart,
-        subtotal: i.subtotal,
-        itemPriceLabel: i.itemPriceLabel,
-        contactHref: i.contactHref,
-        onItemQtyChange: i.onItemQtyChange,
-        onItemDelete: i.onItemDelete,
-        onCheckout: i.onCheckout,
-        contactLinkBehavior: "new-tab"
+        subtotal: b(i.cart),
+        itemPriceLabel: "List Price",
+        contactHref: "#",
+        contactLinkBehavior: "new-tab",
+        onItemDelete: () => alert("Delete"),
+        onItemQtyChange: () => alert("Qty Change"),
+        onCheckout: i.onCheckout
       }
     )
   ] });
-}, C = {
+}, g = {
   args: {
     cart: { items: [] },
     onCheckout: () => {
       alert("Checkout");
     },
-    onItemDelete: () => {
-      alert("Delete");
-    },
-    onItemQtyChange: () => {
-      alert("Qty Change");
-    },
     onCartClick: () => {
     }
-    // required placeholder (overridden in render)
+    // placeholder
   },
-  render: t
-}, k = {
+  render: r
+}, S = {
   args: {
-    cart: m,
+    cart: p,
     onCheckout: () => {
       alert("Checkout");
     },
-    onItemDelete: () => {
-      alert("Delete");
-    },
-    onItemQtyChange: () => {
-      alert("Qty Change");
-    },
-    subtotal: "$748.98",
     onCartClick: () => {
     }
-    // required
   },
-  render: t
-}, g = {
+  render: r
+}, h = {
   args: {
     cart: y,
     onCheckout: () => {
       alert("Checkout");
     },
-    onItemDelete: () => {
-      alert("Delete");
-    },
-    onItemQtyChange: () => {
-      alert("Qty Change");
-    },
-    subtotal: "$748.98",
     onCartClick: () => {
     }
-    // required
   },
-  render: t
+  render: r
 };
 export {
-  C as EmptyCart,
-  k as LargeCart,
-  g as SmallCart,
-  u as default
+  g as EmptyCart,
+  S as LargeCart,
+  h as SmallCart,
+  C as default
 };

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

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { CartPropsBase, ShoppingCart, ShoppingCartHandle } from '../../molecules/Cart/Cart';
 import { AccountProps } from '../../molecules/Account/Account';
-import { ContactUsLinkBehavior } from 'lib/main-client';
 export interface Category {
     id: string | number;
     label: string;
@@ -21,9 +20,6 @@ export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDi
     accountRoute: string;
     contactRoute: string;
     cart: ShoppingCart;
-    cartSubtotal?: string;
-    cartItemPriceLabel?: string;
-    cartContactLinkBehavior?: ContactUsLinkBehavior;
     onLoginClick: () => void;
     onSearch: (_input: string) => void;
 }

package/dist/organisms/MainNav/MainNav.js

@@ -1,55 +1,50 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import I from "react";
+import j from "react";
 import { Text as _ } from "../../atoms/Text/Text.js";
-import { Link as s } from "../../atoms/Link/Link.js";
-import { Icon as U } from "../../atoms/Icon/Icon.js";
+import { Link as l } from "../../atoms/Link/Link.js";
+import { Icon as D } from "../../atoms/Icon/Icon.js";
 import { Flex as t } from "../../atoms/Flex/Flex.js";
-import { Grid as B, Column as F } from "../../atoms/Grid/Grid.js";
-import { Logo as H } from "../../molecules/Logo/Logo.js";
+import { Grid as M, Column as z } from "../../atoms/Grid/Grid.js";
+import { Logo as I } from "../../molecules/Logo/Logo.js";
 import { SearchBox as p } from "../../molecules/SearchBox/SearchBox.js";
-import { HamburgerMenu as P } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
-import { ShoppingCart as S } 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 Q } from "../../clsx-OuTLNxxd.js";
-import '../../assets/MainNav.css';const T = "_main_1l043_1", W = "_column_1l043_8", q = "_topNav_1l043_13", E = "_logo_1l043_21", J = "_operations_1l043_24", O = "_search_1l043_31", V = "_siteLink_1l043_34", X = "_accountArea_1l043_38", Y = "_category_1l043_50", Z = "_menuList_1l043_72", r = {
-  main: T,
-  column: W,
-  topNav: q,
-  logo: E,
-  operations: J,
-  search: O,
-  siteLink: V,
-  accountArea: X,
-  category: Y,
-  menuList: Z
-}, fe = I.forwardRef(function({
+import { HamburgerMenu as U } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
+import { ShoppingCart as F } from "../../molecules/Cart/Cart.js";
+import { Account as S } from "../../molecules/Account/Account.js";
+import { CategoryNav as B } from "../../molecules/CategoryNav/CategoryNav.js";
+import { c as G } from "../../clsx-OuTLNxxd.js";
+import '../../assets/MainNav.css';const H = "_main_1l043_1", K = "_column_1l043_8", P = "_topNav_1l043_13", Q = "_logo_1l043_21", T = "_operations_1l043_24", W = "_search_1l043_31", q = "_siteLink_1l043_34", E = "_accountArea_1l043_38", J = "_category_1l043_50", O = "_menuList_1l043_72", r = {
+  main: H,
+  column: K,
+  topNav: P,
+  logo: Q,
+  operations: T,
+  search: W,
+  siteLink: q,
+  accountArea: E,
+  category: J,
+  menuList: O
+}, le = j.forwardRef(function({
   account: c,
   categories: n,
-  byModelSerialRoute: h,
+  byModelSerialRoute: m,
   homeRoute: u,
   faqRoute: N,
-  customPartsRoute: d,
+  customPartsRoute: h,
   aboutUsRoute: g,
   accountRoute: v,
-  contactRoute: a,
+  contactRoute: d,
   cart: A,
-  cartSubtotal: L,
-  cartItemPriceLabel: x,
-  cartContactLinkBehavior: $,
-  onLoginClick: C,
+  onLoginClick: x,
   onSearch: f,
-  onItemQtyChange: k,
-  onItemDelete: w,
-  onCheckout: y,
-  open: b,
+  onCheckout: L,
+  open: C,
   // NEW: consume external panel control props from CartPropsBase
-  onCartClick: j,
+  onCartClick: k,
   // NEW: callback from consumer
-  className: D,
-  ...M
-}, z) {
-  return /* @__PURE__ */ e(B, { ...M, gridWrapperClassName: Q(r.main, D), children: /* @__PURE__ */ o(F, { span: 12, className: r.column, children: [
+  className: w,
+  ...y
+}, b) {
+  return /* @__PURE__ */ e(M, { ...y, gridWrapperClassName: G(r.main, w), children: /* @__PURE__ */ o(z, { span: 12, className: r.column, children: [
     /* @__PURE__ */ o(
       t,
       {
@@ -58,7 +53,7 @@ import '../../assets/MainNav.css';const T = "_main_1l043_1", W = "_column_1l043_
         justifyContent: "space-between",
         className: r.topNav,
         children: [
-          /* @__PURE__ */ e("div", { className: r.logo, children: /* @__PURE__ */ e(s, { href: u, children: /* @__PURE__ */ e(H, {}) }) }),
+          /* @__PURE__ */ e("div", { className: r.logo, children: /* @__PURE__ */ e(l, { href: u, children: /* @__PURE__ */ e(I, {}) }) }),
           /* @__PURE__ */ o(
             t,
             {
@@ -68,50 +63,45 @@ import '../../assets/MainNav.css';const T = "_main_1l043_1", W = "_column_1l043_
               className: r.operations,
               children: [
                 /* @__PURE__ */ e(t, { flexDirection: "row", hideAt: ["sm"], className: r.search, children: /* @__PURE__ */ e(p, { onSearch: f, inputName: "cpc-search" }) }),
-                /* @__PURE__ */ e(i, { href: h, hideAt: ["sm", "md"], children: "Model/Serial" }),
-                /* @__PURE__ */ e(i, { href: d, hideAt: ["sm", "md"], children: "Custom Parts" }),
-                /* @__PURE__ */ e(i, { href: a, hideAt: ["sm", "md"], children: "Contact Us" }),
+                /* @__PURE__ */ e(i, { href: m, hideAt: ["sm", "md"], children: "Model/Serial" }),
+                /* @__PURE__ */ e(i, { href: h, hideAt: ["sm", "md"], children: "Custom Parts" }),
+                /* @__PURE__ */ e(i, { href: d, hideAt: ["sm", "md"], children: "Contact Us" }),
                 /* @__PURE__ */ e("div", { className: r.accountArea, children: /* @__PURE__ */ e(
-                  G,
+                  S,
                   {
                     account: c,
                     accountRoute: v,
-                    onLoginClick: C,
+                    onLoginClick: x,
                     className: r.avatar
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  S,
+                  F,
                   {
-                    ref: z,
+                    ref: b,
                     cart: A,
-                    open: b,
-                    onCartClick: j,
-                    onItemDelete: w,
-                    onItemQtyChange: k,
-                    onCheckout: y,
-                    subtotal: L,
-                    contactHref: a,
-                    itemPriceLabel: x
+                    open: C,
+                    onCartClick: k,
+                    onCheckout: L
                   }
                 ),
-                /* @__PURE__ */ e(P, { hideAt: ["lg"], children: /* @__PURE__ */ o("ul", { className: r.menuList, children: [
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: h, children: "Make/Serial" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: d, children: "Custom Parts" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: a, children: "Contact Us" }) }),
+                /* @__PURE__ */ e(U, { hideAt: ["lg"], children: /* @__PURE__ */ o("ul", { className: r.menuList, children: [
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: m, children: "Make/Serial" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: h, children: "Custom Parts" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: d, children: "Contact Us" }) }),
                   /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: N, children: "FAQ" }) }),
                   /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: g, children: "About Us" }) }),
-                  n && n.map((l) => /* @__PURE__ */ e("li", { className: r.category, children: /* @__PURE__ */ o(s, { href: l.route, children: [
-                    /* @__PURE__ */ e(_, { size: "sm", weight: "semibold", children: l.label }),
+                  n && n.map((a) => /* @__PURE__ */ e("li", { className: r.category, children: /* @__PURE__ */ o(l, { href: a.route, children: [
+                    /* @__PURE__ */ e(_, { size: "sm", weight: "semibold", children: a.label }),
                     /* @__PURE__ */ e(
-                      U,
+                      D,
                       {
                         iconKey: "fa-solid fa-chevron-right",
                         title: "Navigate",
                         size: "sm"
                       }
                     )
-                  ] }) }, l.id))
+                  ] }) }, a.id))
                 ] }) })
               ]
             }
@@ -120,16 +110,16 @@ import '../../assets/MainNav.css';const T = "_main_1l043_1", W = "_column_1l043_
       }
     ),
     /* @__PURE__ */ e(t, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(p, { onSearch: f, inputName: "cpc-search", className: r.search }) }),
-    /* @__PURE__ */ e(K, { categories: n })
+    /* @__PURE__ */ e(B, { categories: n })
   ] }) });
 });
 function i({
-  href: m,
+  href: s,
   children: c,
   ...n
 }) {
-  return /* @__PURE__ */ e(s, { href: m, className: r.siteLink, ...n, children: /* @__PURE__ */ e(_, { size: "md", variant: "display", children: c }) });
+  return /* @__PURE__ */ e(l, { href: s, className: r.siteLink, ...n, children: /* @__PURE__ */ e(_, { size: "md", variant: "display", children: c }) });
 }
 export {
-  fe as MainNav
+  le as MainNav
 };

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

@@ -1,16 +1,16 @@
-import { jsxs as u, Fragment as s, jsx as r } from "react/jsx-runtime";
-import { useState as m } from "react";
-import { MainNav as c } from "./MainNav.js";
-import { CartSlideInPanel as b } from "../../molecules/Cart/CartSlideInPanel.js";
-const C = {
+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 g = {
   title: "Case Parts/Organisms/MainNav",
-  component: c,
+  component: d,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "fullscreen"
   }
   // tags: ["autodocs"],
-}, a = [
+}, l = [
   {
     id: 0,
     label: "Shop by Brands",
@@ -27,7 +27,12 @@ const C = {
     id: 1,
     label: "Gaskets",
     route: "#",
-    children: []
+    children: [
+      { id: 25, label: "Sponge", route: "/anthony" },
+      { id: 26, label: "Magnetic", route: "/beverage" },
+      { id: 27, label: "Compression", route: "/continental" },
+      { id: 28, label: "Door Sweep", route: "/delfield" }
+    ]
   },
   {
     id: 2,
@@ -83,7 +88,7 @@ const C = {
     route: "#",
     children: []
   }
-], t = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", i = {
+], t = "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: t, availability: "In Stock", availabilityId: "available" },
     { id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: t, availability: "In Stock", availabilityId: "available" },
@@ -98,37 +103,44 @@ const C = {
     { id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: t, availability: "In Stock", availabilityId: "available" },
     { id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: t, availability: "In Stock", availabilityId: "available" }
   ]
-}, o = (e) => {
-  const [l, n] = m(!1);
+};
+function h(e) {
+  return `$${e.items.reduce(
+    (a, i) => a + (parseFloat(i.price.replace(/[^0-9.]/g, "")) || 0) * i.quantity,
+    0
+  ).toFixed(2)}`;
+}
+const n = (e) => {
+  const [o, a] = b(!1);
   return /* @__PURE__ */ u(s, { children: [
-    /* @__PURE__ */ r(
-      c,
+    /* @__PURE__ */ c(
+      d,
       {
         ...e,
-        open: l,
-        onCartClick: () => n((d) => !d)
+        open: o,
+        onCartClick: () => a((i) => !i)
       }
     ),
-    /* @__PURE__ */ r(
-      b,
+    /* @__PURE__ */ c(
+      m,
       {
-        open: l,
-        onClose: () => n(!1),
+        open: o,
+        onClose: () => a(!1),
         cart: e.cart,
-        subtotal: e.cartSubtotal,
-        itemPriceLabel: e.cartItemPriceLabel,
+        subtotal: h(e.cart),
+        itemPriceLabel: "List Price",
         contactHref: e.contactRoute,
-        contactLinkBehavior: e.cartContactLinkBehavior,
-        onItemQtyChange: e.onItemQtyChange,
-        onItemDelete: e.onItemDelete,
+        contactLinkBehavior: "new-tab",
+        onItemQtyChange: () => alert("Qty Change"),
+        onItemDelete: () => alert("Delete"),
         onCheckout: e.onCheckout
       }
     )
   ] });
-}, p = {
+}, C = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
-    cart: i,
+    cart: r,
     homeRoute: "/",
     customPartsRoute: "/custom",
     accountRoute: "/account",
@@ -136,32 +148,25 @@ const C = {
     faqRoute: "/faq",
     aboutUsRoute: "/about",
     contactRoute: "/contact",
-    cartSubtotal: "$1200.34",
     onLoginClick: () => {
-      alert("Login ");
+      alert("Login");
     },
     onCheckout: () => {
       alert("Checkout");
     },
-    onItemDelete: () => {
-      alert("Delete");
-    },
-    onItemQtyChange: () => {
-      alert("Qty Change");
-    },
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
     onCartClick: () => {
     },
-    // required prop placeholder (overridden in render)
-    categories: a
+    // placeholder required by component
+    categories: l
   },
-  render: o
+  render: n
 }, k = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
-    cart: i,
+    cart: r,
     homeRoute: "/",
     customPartsRoute: "/custom",
     accountRoute: "/account",
@@ -169,31 +174,23 @@ const C = {
     faqRoute: "/faq",
     aboutUsRoute: "/about",
     contactRoute: "/contact",
-    cartSubtotal: "$1200.34",
     onLoginClick: () => {
-      alert("Login ");
+      alert("Login");
     },
     onCheckout: () => {
       alert("Checkout");
     },
-    onItemDelete: () => {
-      alert("Delete");
-    },
-    onItemQtyChange: () => {
-      alert("Qty Change");
-    },
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
     onCartClick: () => {
     },
-    // required
-    categories: a
+    categories: l
   },
-  render: o
-}, g = {
+  render: n
+}, S = {
   args: {
-    cart: i,
+    cart: r,
     homeRoute: "/",
     customPartsRoute: "/custom",
     accountRoute: "/account",
@@ -202,30 +199,23 @@ const C = {
     aboutUsRoute: "/about",
     contactRoute: "/contact",
     onLoginClick: () => {
-      alert("Login ");
+      alert("Login");
     },
     onCheckout: () => {
       alert("Checkout");
     },
-    onItemDelete: () => {
-      alert("Delete");
-    },
-    onItemQtyChange: () => {
-      alert("Qty Change");
-    },
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
     onCartClick: () => {
     },
-    // required
-    categories: a
+    categories: l
   },
-  render: o
+  render: n
 };
 export {
-  p as Authenticated,
-  g as Unauthenticated,
+  C as Authenticated,
+  S as Unauthenticated,
   k as WithCartItems,
-  C as default
+  g as default
 };

package/package.json

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