@caseparts-org/caseblocks 0.0.19 → 0.0.21

package/dist/assets/Cart.css

@@ -1 +1 @@
-._cart_jjkwa_1{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_jjkwa_8{position:absolute;top:4px;left:17px;border-radius:50%;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:var(--color-brand-primary-primary-tangerine);color:var(--color-neutrals-neutral-1);font-weight:var(--font-weight-semibold)}
+._cart_15bzn_1{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_15bzn_8{position:absolute;top:4px;left:17px;border-radius:50%;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:var(--color-brand-primary-primary-tangerine);color:var(--color-neutrals-neutral-1);font-weight:var(--font-weight-semibold)}._cartContainer_15bzn_23{height:calc(100vh - 120px);width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;gap:var(--spacing-1)}._cartItems_15bzn_32{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_15bzn_32 ul{margin:0;padding:0}._cartItems_15bzn_32 li{list-style:none;margin:0;padding:var(--spacing-0-25);width:100%;display:flex;flex-direction:row;align-items:center}._cartItems_15bzn_32 li p{margin:0;padding:0}._cartItems_15bzn_32 img{height:40px;width:40px}._noItems_15bzn_58{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}

package/dist/assets/SearchBox.css

@@ -1 +1 @@
-._button_8serw_1{box-sizing:border-box;cursor:pointer;width:var(--spacing-2-5);height:var(--spacing-2-5);padding:var(--spacing-0-5);border-width:0;border-radius:0px var(--spacing-0-125) var(--spacing-0-125) 0px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:inherit;color:var(--icons-icon-search)}._text_8serw_16{flex:1;position:relative;border:none;border-radius:40px;outline:none;font-family:var(--font-family-body);font-weight:var(--font-weight-light);font-size:var(--font-size-sm);line-height:var(--line-height-sm);background:var(--surface-surface-searchBar, #f6f6f6);color:var(--text-text-search-bar)}._text_8serw_16::placeholder{font-style:italic}._input_8serw_32{flex:1;padding:0px 0px 0px var(--spacing-0-25)}._inputSearch_8serw_36{flex:1;border-radius:var(--spacing-0-125)}._searchfield_8serw_40{flex:1;height:var(--spacing-2-5);border-radius:var(--spacing-2-5);overflow:hidden;background-color:var(--surface-surface-search-bar)}._searchBox_8serw_47{flex:1;width:100%;min-width:250px;height:var(--spacing-2-5);position:relative;border-radius:var(--spacing-2-5);overflow:hidden;text-align:left;background-color:var(--surface-surface-search-bar)}
+._button_1izj4_1{box-sizing:border-box;cursor:pointer;width:var(--spacing-2-5);height:var(--spacing-2-5);padding:var(--spacing-0-5);border-width:0;border-radius:0px var(--spacing-0-125) var(--spacing-0-125) 0px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:inherit;color:var(--icons-icon-search)}._text_1izj4_16{flex:1;position:relative;border:none;border-radius:40px;outline:none;font-family:var(--font-family-body);font-size:var(--font-size-sm);line-height:var(--line-height-sm);background:var(--surface-surface-searchBar, #f6f6f6)}._text_1izj4_16::placeholder{font-style:italic;font-weight:var(--font-weight-light);color:var(--text-text-search-bar)}._input_1izj4_32{flex:1;padding:0px var(--spacing-0-5) 0px var(--spacing-0-5);box-sizing:border-box}._inputSearch_1izj4_37{flex:1;border-radius:var(--spacing-0-125)}._searchfield_1izj4_41{flex:1;height:var(--spacing-2-5);border-radius:var(--spacing-2-5);overflow:hidden;background-color:var(--surface-surface-search-bar)}._searchBox_1izj4_48{flex:1;width:100%;min-width:250px;height:var(--spacing-2-5);position:relative;border-radius:var(--spacing-2-5);overflow:hidden;text-align:left;background-color:var(--surface-surface-search-bar)}

package/dist/assets/Tooltip.css

@@ -1 +1 @@
-._tooltip_mtsuw_1{box-shadow:8px 8px 12px #00000026;background-color:var(--color-neutrals-neutral-1)}._content_mtsuw_5{padding:var(--spacing-1)}.popup-content{margin:auto;background:#fff;width:50%;padding:5px;border:1px solid #d7d7d7}[role=tooltip].popup-content{width:200px;box-shadow:0 0 3px #00000029;border-radius:5px}.popup-overlay{background:#00000080}[data-popup=tooltip].popup-overlay{background:transparent}.popup-arrow{-webkit-filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16));filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16));color:#fff;stroke-width:2px;stroke:#d7d7d7;stroke-dasharray:30px;stroke-dashoffset:-54px;left:0;right:0;top:0;bottom:0}
+._content_lgc5i_1{box-shadow:8px 8px 12px #00000026;background-color:#fff;padding:var(--spacing-1);box-sizing:border-box;width:max-content;border:1px solid var(--color-neutrals-neutral-1);border-radius:4px;z-index:9999}

package/dist/main.d.ts

@@ -27,5 +27,6 @@ export type { SearchBoxProps } from './molecules/SearchBox/SearchBox';
 export { ToggleView } from './molecules/ToggleView/ToggleView';
 export type { ToggleViewProps, ToggleOptionProps, ToggleOptionBaseProps, } from './molecules/ToggleView/ToggleView';
 export { MainNav } from './organisms/MainNav/MainNav';
+export type { MainCategory, Category } from './organisms/MainNav/MainNav';
 export { ChipSelector } from './organisms/ChipSelector/ChipSelector';
 export type { ChipSelectorProps } from './organisms/ChipSelector/ChipSelector';

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

@@ -1,7 +1,24 @@
 import { default as React } from 'react';
-interface cartProps extends React.HtmlHTMLAttributes<HTMLButtonElement> {
-    onClick: () => void;
-    cartItemCount: number;
+export interface CartItem {
+    id: string | number;
+    itemId: string | undefined;
+    description: string | undefined;
+    price: number;
+    quantity: number;
+    availability: string;
+    imageUrl: string | undefined;
 }
-export declare function Cart({ onClick, cartItemCount, ...otherProps }: cartProps): import("react/jsx-runtime").JSX.Element;
+export interface ShoppingCart {
+    items: CartItem[];
+}
+export interface CartPropsBase {
+    onItemQtyChange: (_item: CartItem, _newQuantity: number) => void;
+    onItemDelete: (_item: CartItem) => void;
+    onItemEdit: (_item: CartItem) => void;
+    onCheckout: () => void;
+    cart: ShoppingCart;
+}
+interface CartProps extends CartPropsBase, React.HtmlHTMLAttributes<HTMLButtonElement> {
+}
+export declare function ShoppingCart({ cart, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, ...otherProps }: CartProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/molecules/Cart/Cart.js

@@ -1,23 +1,59 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { Icon as i } from "../../atoms/Icon/Icon.js";
-import { Text as a } from "../../atoms/Text/Text.js";
-import '../../assets/Cart.css';const e = "_cart_jjkwa_1", p = "_count_jjkwa_8", o = {
-  cart: e,
-  count: p
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { Icon as m } from "../../atoms/Icon/Icon.js";
+import { Text as n } from "../../atoms/Text/Text.js";
+import { Button as a } from "../../atoms/Button/Button.js";
+import { Tooltip as l } from "../Tooltip/Tooltip.js";
+import '../../assets/Cart.css';const d = "_cart_15bzn_1", h = "_count_15bzn_8", p = "_cartContainer_15bzn_23", g = "_cartItems_15bzn_32", _ = "_noItems_15bzn_58", s = {
+  cart: d,
+  count: h,
+  cartContainer: p,
+  cartItems: g,
+  noItems: _
 };
-function j({ onClick: r, cartItemCount: c, ...n }) {
-  return /* @__PURE__ */ s("button", { onClick: r, className: o.cart, ...n, children: [
-    /* @__PURE__ */ t(
-      i,
-      {
-        iconKey: "fa-kit fa-shoppingcart-empty",
-        title: "Shopping Cart",
-        size: "lg"
-      }
-    ),
-    c > 0 && /* @__PURE__ */ t("div", { className: o.count, children: /* @__PURE__ */ t(a, { size: "xxs", children: c }) })
-  ] });
+function v({
+  cart: e,
+  onItemQtyChange: I,
+  onItemDelete: u,
+  onItemEdit: z,
+  onCheckout: o,
+  ...c
+}) {
+  return e = e || { items: [] }, /* @__PURE__ */ t(
+    l,
+    {
+      trigger: /* @__PURE__ */ i("button", { className: s.cart, ...c, children: [
+        /* @__PURE__ */ t(
+          m,
+          {
+            iconKey: "fa-kit fa-shoppingcart-empty",
+            title: "Shopping Cart",
+            size: "lg"
+          }
+        ),
+        e.items.length > 0 && /* @__PURE__ */ t("div", { className: s.count, children: /* @__PURE__ */ t(n, { size: "xxs", children: e.items.length }) })
+      ] }),
+      arrow: !1,
+      position: "bottom right",
+      on: "click",
+      children: /* @__PURE__ */ i("div", { className: s.cartContainer, children: [
+        /* @__PURE__ */ t(n, { as: "h1", size: "2xl", children: "Cart" }),
+        /* @__PURE__ */ t("div", { className: s.cartItems, children: e.items.length > 0 ? /* @__PURE__ */ t("ul", { children: e.items.map(
+          (r) => /* @__PURE__ */ i("li", { children: [
+            /* @__PURE__ */ t("img", { src: r.imageUrl, alt: `${r.itemId} product image` }),
+            /* @__PURE__ */ i("div", { children: [
+              /* @__PURE__ */ t(n, { as: "p", size: "sm", children: r.description }),
+              /* @__PURE__ */ i(n, { as: "p", size: "sm", children: [
+                "Part # ",
+                r.itemId
+              ] })
+            ] })
+          ] })
+        ) }) : /* @__PURE__ */ t("div", { className: s.noItems, children: /* @__PURE__ */ t(n, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
+        /* @__PURE__ */ t(a, { disabled: e.items.length === 0, onClick: o, variant: "cta-primary", size: "md", children: "Checkout" })
+      ] })
+    }
+  );
 }
 export {
-  j as Cart
+  v as ShoppingCart
 };

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

@@ -1,8 +1,8 @@
 import { StoryObj } from '@storybook/react-vite';
-import { Cart } from './Cart';
+import { ShoppingCart } from './Cart';
 declare const meta: {
     title: string;
-    component: typeof Cart;
+    component: typeof ShoppingCart;
     parameters: {
         layout: string;
     };

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

@@ -1,24 +1,61 @@
-import { Cart as t } from "./Cart.js";
-const e = {
+import { ShoppingCart as e } from "./Cart.js";
+const r = {
   title: "Case Parts/Molecules/Cart",
-  component: t,
+  component: e,
   parameters: {
     layout: "centered"
   },
   tags: ["autodocs"]
-}, r = {
+}, t = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", i = {
+  items: [
+    { id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: 99.99, quantity: 1, imageUrl: t, availability: "In Stock" },
+    { id: 2, itemId: "810810", description: "True Door Gasket", price: 9.99, quantity: 1, imageUrl: t, availability: "In Stock" },
+    { id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: 9.99, quantity: 1, imageUrl: t, availability: "" },
+    { id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: 9.99, quantity: 1, imageUrl: t, availability: "" },
+    { id: 5, itemId: "Warmer Wire", description: '228" 7.0 ohms 115V', price: 9.99, quantity: 1, imageUrl: t, availability: "" },
+    { id: 6, itemId: "810803", description: "True Door Gasket", price: 9.99, quantity: 1, imageUrl: t, availability: "In Stock" },
+    { id: 7, itemId: "ABG-12114-PF", description: "Adhesive Sponge Gasket 1/4", price: 9.99, quantity: 10, imageUrl: t, availability: "In Stock" },
+    { id: 8, itemId: "ABG-12138-PF", description: "Adhesive Sponge Gasket 3/8", price: 9.99, quantity: 10, imageUrl: t, availability: "In Stock" },
+    { id: 9, itemId: "1094-C1", description: "Kason Door Closer - Flush", price: 20.99, quantity: 1, imageUrl: t, availability: "In Stock" },
+    { id: 10, itemId: "1094-02", description: "Kason Door Closer - Offset", price: 30.05, quantity: 1, imageUrl: t, availability: "In Stock" },
+    { id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price: 40.1, quantity: 1, imageUrl: t, availability: "In Stock" },
+    { id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: 50.15, quantity: 1, imageUrl: t, availability: "In Stock" }
+  ]
+}, o = {
   args: {
-    cartItemCount: 0,
-    onClick: () => alert("Cart clicked")
+    cart: { items: [] },
+    onCheckout: () => {
+      alert("Checkout");
+    },
+    onItemDelete: () => {
+      alert("Delete");
+    },
+    onItemEdit: () => {
+      alert("Delete");
+    },
+    onItemQtyChange: () => {
+      alert("Delete");
+    }
   }
-}, o = {
+}, l = {
   args: {
-    cartItemCount: 15,
-    onClick: () => alert("Cart clicked")
+    cart: i,
+    onCheckout: () => {
+      alert("Checkout");
+    },
+    onItemDelete: () => {
+      alert("Delete");
+    },
+    onItemEdit: () => {
+      alert("Delete");
+    },
+    onItemQtyChange: () => {
+      alert("Delete");
+    }
   }
 };
 export {
-  o as CartWithItems,
-  r as EmptyCart,
-  e as default
+  l as CartWithItems,
+  o as EmptyCart,
+  r as default
 };

package/dist/molecules/CategoryNav/CategoryNav.js

@@ -1,22 +1,23 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { c } from "../../clsx-OuTLNxxd.js";
+import { c as a } from "../../clsx-OuTLNxxd.js";
 import { Text as n } 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 h } from "../Tooltip/Tooltip.js";
-import { getHideAtStyles as a } from "../../atoms/HideAt.js";
 import '../../assets/CategoryNav.css';const d = "_categories_1m4w9_1", u = "_category_1m4w9_16", p = "_submenuTooltip_1m4w9_42", o = {
   categories: d,
   category: u,
   submenuTooltip: p
 };
 function z({
-  categories: l
+  categories: r
 }) {
-  return !l || l.length === 0 ? null : /* @__PURE__ */ e("ul", { className: c(o.categories, a(["sm"])), children: l.map(
+  return !r || r.length === 0 ? null : /* @__PURE__ */ e("ul", { className: a(o.categories, c(["sm"])), children: r.map(
     (i) => i.children.length > 0 ? /* @__PURE__ */ e(
       h,
       {
+        arrow: !1,
         trigger: /* @__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(
@@ -30,7 +31,7 @@ function z({
         ] }) }),
         on: "hover",
         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: o.submenuTooltip, children: i.children.map((l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(s, { href: l.route, children: /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: l.label }) }) }, l.id)) })
       },
       i.id
     ) : /* @__PURE__ */ e("li", { className: o.category, children: /* @__PURE__ */ t(s, { href: i.route, children: [

package/dist/molecules/SearchBox/SearchBox.d.ts

@@ -1,6 +1,7 @@
 import { HideAtProps } from '../../atoms/HideAt';
 /** A search box. */
 export interface SearchBoxProps extends React.HTMLAttributes<HTMLDivElement>, HideAtProps {
-    action: string;
+    onSearch: (_input: string) => void;
+    inputName?: string;
 }
-export declare function SearchBox({ action, hideAt, className, ...otherProps }: SearchBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchBox({ onSearch, inputName, hideAt, className, ...otherProps }: SearchBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/SearchBox/SearchBox.js

@@ -1,50 +1,55 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { c as a } from "../../clsx-OuTLNxxd.js";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { c as h } from "../../clsx-OuTLNxxd.js";
 import { Flex as r } from "../../atoms/Flex/Flex.js";
-import { getHideAtStyles as l } from "../../atoms/HideAt.js";
-import { Icon as m } from "../../atoms/Icon/Icon.js";
-import '../../assets/SearchBox.css';const h = "_button_8serw_1", u = "_text_8serw_16", p = "_input_8serw_32", x = "_inputSearch_8serw_36", _ = "_searchfield_8serw_40", f = "_searchBox_8serw_47", t = {
-  button: h,
-  text: u,
-  input: p,
-  inputSearch: x,
-  searchfield: _,
-  searchBox: f
+import { getHideAtStyles as u } from "../../atoms/HideAt.js";
+import { Icon as f } from "../../atoms/Icon/Icon.js";
+import '../../assets/SearchBox.css';const p = "_button_1izj4_1", x = "_text_1izj4_16", _ = "_input_1izj4_32", d = "_inputSearch_1izj4_37", g = "_searchfield_1izj4_41", b = "_searchBox_1izj4_48", t = {
+  button: p,
+  text: x,
+  input: _,
+  inputSearch: d,
+  searchfield: g,
+  searchBox: b
 };
-function S({
-  action: s,
-  hideAt: c,
-  className: n,
-  ...o
+function D({
+  onSearch: i,
+  inputName: c,
+  hideAt: s,
+  className: o,
+  ...a
 }) {
   return /* @__PURE__ */ e(
     r,
     {
       flexDirection: "row",
       alignItems: "center",
-      className: a(t.searchBox, l(c), n),
-      ...o,
+      className: h(t.searchBox, u(s), o),
+      ...a,
       children: /* @__PURE__ */ e(
         r,
         {
           flexDirection: "row",
           alignItems: "center",
           className: t.searchfield,
-          children: /* @__PURE__ */ e("div", { className: t.inputSearch, children: /* @__PURE__ */ e("form", { action: s, method: "get", children: /* @__PURE__ */ i(
+          children: /* @__PURE__ */ e("div", { className: t.inputSearch, children: /* @__PURE__ */ e("form", { onSubmit: (n) => {
+            n.preventDefault();
+            const l = (new FormData(n.currentTarget).get(c ?? "search") || "").trim();
+            i(l);
+          }, children: /* @__PURE__ */ m(
             r,
             {
               className: t.input,
               flexDirection: "row",
               alignItems: "center",
               children: [
-                /* @__PURE__ */ e("button", { className: t.button, type: "submit", children: /* @__PURE__ */ e(m, { iconKey: "fa-regular fa-magnifying-glass", size: "sm" }) }),
+                /* @__PURE__ */ e("button", { className: t.button, type: "submit", children: /* @__PURE__ */ e(f, { iconKey: "fa-regular fa-magnifying-glass", size: "sm" }) }),
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "text",
                     className: t.text,
                     placeholder: "Search by keyword(s) or Part #....",
-                    name: "query"
+                    name: c ?? "search"
                   }
                 )
               ]
@@ -56,5 +61,5 @@ function S({
   );
 }
 export {
-  S as SearchBox
+  D as SearchBox
 };

package/dist/molecules/SearchBox/SearchBox.stories.js

@@ -1,15 +1,15 @@
-import { SearchBox as e } from "./SearchBox.js";
-const a = {
+import { SearchBox as a } from "./SearchBox.js";
+const r = {
   title: "Case Parts/Molecules/SearchBox",
-  component: e,
+  component: a,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered"
   }
 }, o = {
-  args: { action: "/search" }
+  args: { onSearch: (e) => alert(`Search ${e}`) }
 };
 export {
   o as Default,
-  a as default
+  r as default
 };

package/dist/molecules/Tooltip/Tooltip.js

@@ -14,10 +14,10 @@ var K = { exports: {} }, O = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var _e;
+var Ee;
 function Ke() {
-  if (_e) return O;
-  _e = 1;
+  if (Ee) return O;
+  Ee = 1;
   var s = T;
   function i(n) {
     var t = "https://react.dev/errors/" + n;
@@ -147,7 +147,7 @@ function Ke() {
     return p.H.useHostTransitionStatus();
   }, O.version = "19.1.1", O;
 }
-var _ = {};
+var E = {};
 /**
  * @license React
  * react-dom.development.js
@@ -157,9 +157,9 @@ var _ = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Ee;
+var _e;
 function We() {
-  return Ee || (Ee = 1, process.env.NODE_ENV !== "production" && function() {
+  return _e || (_e = 1, process.env.NODE_ENV !== "production" && function() {
     function s() {
     }
     function i(r) {
@@ -169,11 +169,11 @@ function We() {
       var y = 3 < arguments.length && arguments[3] !== void 0 ? arguments[3] : null;
       try {
         i(y);
-        var v = !1;
+        var g = !1;
       } catch {
-        v = !0;
+        g = !0;
       }
-      return v && (console.error(
+      return g && (console.error(
         "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
         typeof Symbol == "function" && Symbol.toStringTag && y[Symbol.toStringTag] || y.constructor.name || "Object"
       ), i(y)), {
@@ -227,12 +227,12 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
     }, t = Symbol.for("react.portal"), l = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
     typeof Map == "function" && Map.prototype != null && typeof Map.prototype.forEach == "function" && typeof Set == "function" && Set.prototype != null && typeof Set.prototype.clear == "function" && typeof Set.prototype.forEach == "function" || console.error(
       "React depends on Map and Set built-in types. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"
-    ), _.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = n, _.createPortal = function(r, e) {
+    ), E.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = n, E.createPortal = function(r, e) {
       var o = 2 < arguments.length && arguments[2] !== void 0 ? arguments[2] : null;
       if (!e || e.nodeType !== 1 && e.nodeType !== 9 && e.nodeType !== 11)
         throw Error("Target container is not a DOM element.");
       return c(r, e, null, o);
-    }, _.flushSync = function(r) {
+    }, E.flushSync = function(r) {
       var e = l.T, o = n.p;
       try {
         if (l.T = null, n.p = 2, r)
@@ -242,7 +242,7 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
           "flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task."
         );
       }
-    }, _.preconnect = function(r, e) {
+    }, E.preconnect = function(r, e) {
       typeof r == "string" && r ? e != null && typeof e != "object" ? console.error(
         "ReactDOM.preconnect(): Expected the `options` argument (second) to be an object but encountered %s instead. The only supported option at this time is `crossOrigin` which accepts a string.",
         d(e)
@@ -253,7 +253,7 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
         "ReactDOM.preconnect(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
         f(r)
       ), typeof r == "string" && (e ? (e = e.crossOrigin, e = typeof e == "string" ? e === "use-credentials" ? e : "" : void 0) : e = null, n.d.C(r, e));
-    }, _.prefetchDNS = function(r) {
+    }, E.prefetchDNS = function(r) {
       if (typeof r != "string" || !r)
         console.error(
           "ReactDOM.prefetchDNS(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
@@ -270,7 +270,7 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
         );
       }
       typeof r == "string" && n.d.D(r);
-    }, _.preinit = function(r, e) {
+    }, E.preinit = function(r, e) {
       if (typeof r == "string" && r ? e == null || typeof e != "object" ? console.error(
         "ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered %s instead.",
         d(e)
@@ -281,23 +281,23 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
         "ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
         f(r)
       ), typeof r == "string" && e && typeof e.as == "string") {
-        var o = e.as, y = a(o, e.crossOrigin), v = typeof e.integrity == "string" ? e.integrity : void 0, w = typeof e.fetchPriority == "string" ? e.fetchPriority : void 0;
+        var o = e.as, y = a(o, e.crossOrigin), g = typeof e.integrity == "string" ? e.integrity : void 0, w = typeof e.fetchPriority == "string" ? e.fetchPriority : void 0;
         o === "style" ? n.d.S(
           r,
           typeof e.precedence == "string" ? e.precedence : void 0,
           {
             crossOrigin: y,
-            integrity: v,
+            integrity: g,
             fetchPriority: w
           }
         ) : o === "script" && n.d.X(r, {
           crossOrigin: y,
-          integrity: v,
+          integrity: g,
           fetchPriority: w,
           nonce: typeof e.nonce == "string" ? e.nonce : void 0
         });
       }
-    }, _.preinitModule = function(r, e) {
+    }, E.preinitModule = function(r, e) {
       var o = "";
       if (typeof r == "string" && r || (o += " The `href` argument encountered was " + f(r) + "."), e !== void 0 && typeof e != "object" ? o += " The `options` argument encountered was " + f(e) + "." : e && "as" in e && e.as !== "script" && (o += " The `as` option encountered was " + d(e.as) + "."), o)
         console.error(
@@ -323,7 +323,7 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
         integrity: typeof e.integrity == "string" ? e.integrity : void 0,
         nonce: typeof e.nonce == "string" ? e.nonce : void 0
       })) : e == null && n.d.M(r));
-    }, _.preload = function(r, e) {
+    }, E.preload = function(r, e) {
       var o = "";
       if (typeof r == "string" && r || (o += " The `href` argument encountered was " + f(r) + "."), e == null || typeof e != "object" ? o += " The `options` argument encountered was " + f(e) + "." : typeof e.as == "string" && e.as || (o += " The `as` option encountered was " + f(e.as) + "."), o && console.error(
         'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag.%s',
@@ -346,7 +346,7 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
           media: typeof e.media == "string" ? e.media : void 0
         });
       }
-    }, _.preloadModule = function(r, e) {
+    }, E.preloadModule = function(r, e) {
       var o = "";
       typeof r == "string" && r || (o += " The `href` argument encountered was " + f(r) + "."), e !== void 0 && typeof e != "object" ? o += " The `options` argument encountered was " + f(e) + "." : e && "as" in e && typeof e.as != "string" && (o += " The `as` option encountered was " + f(e.as) + "."), o && console.error(
         'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag.%s',
@@ -359,16 +359,16 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
         crossOrigin: o,
         integrity: typeof e.integrity == "string" ? e.integrity : void 0
       })) : n.d.m(r));
-    }, _.requestFormReset = function(r) {
+    }, E.requestFormReset = function(r) {
       n.d.r(r);
-    }, _.unstable_batchedUpdates = function(r, e) {
+    }, E.unstable_batchedUpdates = function(r, e) {
       return r(e);
-    }, _.useFormState = function(r, e, o) {
+    }, E.useFormState = function(r, e, o) {
       return p().useFormState(r, e, o);
-    }, _.useFormStatus = function() {
+    }, E.useFormStatus = function() {
       return p().useHostTransitionStatus();
-    }, _.version = "19.1.1", typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  }()), _;
+    }, E.version = "19.1.1", typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }()), E;
 }
 function Se() {
   if (!(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ > "u" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE != "function")) {
@@ -491,7 +491,7 @@ var Ze = function(i, c) {
     }
   }
 }, nt = ["top left", "top center", "top right", "right top", "right center", "right bottom", "bottom left", "bottom center", "bottom right", "left top", "left center", "left bottom"], ot = function(i, c, a, f, d) {
-  var p = d.offsetX, m = d.offsetY, n = f ? 8 : 0, t = a.split(" "), l = i.top + i.height / 2, r = i.left + i.width / 2, e = c.height, o = c.width, y = l - e / 2, v = r - o / 2, w = "", R = "0%", k = "0%";
+  var p = d.offsetX, m = d.offsetY, n = f ? 8 : 0, t = a.split(" "), l = i.top + i.height / 2, r = i.left + i.width / 2, e = c.height, o = c.width, y = l - e / 2, g = r - o / 2, w = "", R = "0%", k = "0%";
   switch (t[0]) {
     case "top":
       y -= e / 2 + i.height / 2 + n, w = "rotate(180deg)  translateX(50%)", R = "100%", k = "50%";
@@ -500,10 +500,10 @@ var Ze = function(i, c) {
       y += e / 2 + i.height / 2 + n, w = "rotate(0deg) translateY(-100%) translateX(-50%)", k = "50%";
       break;
     case "left":
-      v -= o / 2 + i.width / 2 + n, w = " rotate(90deg)  translateY(50%) translateX(-25%)", k = "100%", R = "50%";
+      g -= o / 2 + i.width / 2 + n, w = " rotate(90deg)  translateY(50%) translateX(-25%)", k = "100%", R = "50%";
       break;
     case "right":
-      v += o / 2 + i.width / 2 + n, w = "rotate(-90deg)  translateY(-150%) translateX(25%)", R = "50%";
+      g += o / 2 + i.width / 2 + n, w = "rotate(-90deg)  translateY(-150%) translateX(25%)", R = "50%";
       break;
   }
   switch (t[1]) {
@@ -514,15 +514,15 @@ var Ze = function(i, c) {
       y = i.top - e + i.height, R = e - i.height / 2 + "px";
       break;
     case "left":
-      v = i.left, k = i.width / 2 + "px";
+      g = i.left, k = i.width / 2 + "px";
       break;
     case "right":
-      v = i.left - o + i.width, k = o - i.width / 2 + "px";
+      g = i.left - o + i.width, k = o - i.width / 2 + "px";
       break;
   }
-  return y = t[0] === "top" ? y - m : y + m, v = t[0] === "left" ? v - p : v + p, {
+  return y = t[0] === "top" ? y - m : y + m, g = t[0] === "left" ? g - p : g + p, {
     top: y,
-    left: v,
+    left: g,
     transform: w,
     arrowLeft: k,
     arrowTop: R
@@ -574,9 +574,9 @@ var Ze = function(i, c) {
 }, lt = /* @__PURE__ */ Xe(function(s, i) {
   var c = s.trigger, a = c === void 0 ? null : c, f = s.onOpen, d = f === void 0 ? function() {
   } : f, p = s.onClose, m = p === void 0 ? function() {
-  } : p, n = s.defaultOpen, t = n === void 0 ? !1 : n, l = s.open, r = l === void 0 ? void 0 : l, e = s.disabled, o = e === void 0 ? !1 : e, y = s.nested, v = y === void 0 ? !1 : y, w = s.closeOnDocumentClick, R = w === void 0 ? !0 : w, k = s.repositionOnResize, we = k === void 0 ? !0 : k, W = s.closeOnEscape, Te = W === void 0 ? !0 : W, J = s.on, I = J === void 0 ? ["click"] : J, Q = s.contentStyle, Re = Q === void 0 ? {} : Q, Z = s.arrowStyle, X = Z === void 0 ? {} : Z, B = s.overlayStyle, De = B === void 0 ? {} : B, ee = s.className, A = ee === void 0 ? "" : ee, te = s.position, ke = te === void 0 ? "bottom center" : te, re = s.modal, ne = re === void 0 ? !1 : re, oe = s.lockScroll, ie = oe === void 0 ? !1 : oe, ae = s.arrow, F = ae === void 0 ? !0 : ae, se = s.offsetX, Ce = se === void 0 ? 0 : se, ce = s.offsetY, Le = ce === void 0 ? 0 : ce, le = s.mouseEnterDelay, Pe = le === void 0 ? 100 : le, ue = s.mouseLeaveDelay, Me = ue === void 0 ? 100 : ue, fe = s.keepTooltipInside, Ae = fe === void 0 ? !1 : fe, z = s.children, de = Fe(r || t), D = de[0], pe = de[1], C = N(null), b = N(null), P = N(null), ye = N(null), ve = N("popup-" + ++st), S = ne ? !0 : !a, j = N(0);
+  } : p, n = s.defaultOpen, t = n === void 0 ? !1 : n, l = s.open, r = l === void 0 ? void 0 : l, e = s.disabled, o = e === void 0 ? !1 : e, y = s.nested, g = y === void 0 ? !1 : y, w = s.closeOnDocumentClick, R = w === void 0 ? !0 : w, k = s.repositionOnResize, we = k === void 0 ? !0 : k, W = s.closeOnEscape, Te = W === void 0 ? !0 : W, J = s.on, I = J === void 0 ? ["click"] : J, Q = s.contentStyle, Re = Q === void 0 ? {} : Q, Z = s.arrowStyle, X = Z === void 0 ? {} : Z, B = s.overlayStyle, De = B === void 0 ? {} : B, ee = s.className, A = ee === void 0 ? "" : ee, te = s.position, ke = te === void 0 ? "bottom center" : te, re = s.modal, ne = re === void 0 ? !1 : re, oe = s.lockScroll, ie = oe === void 0 ? !1 : oe, ae = s.arrow, F = ae === void 0 ? !0 : ae, se = s.offsetX, Ce = se === void 0 ? 0 : se, ce = s.offsetY, Le = ce === void 0 ? 0 : ce, le = s.mouseEnterDelay, Pe = le === void 0 ? 100 : le, ue = s.mouseLeaveDelay, Me = ue === void 0 ? 100 : ue, fe = s.keepTooltipInside, Ae = fe === void 0 ? !1 : fe, z = s.children, de = Fe(r || t), D = de[0], pe = de[1], C = N(null), b = N(null), P = N(null), ye = N(null), ge = N("popup-" + ++st), S = ne ? !0 : !a, j = N(0);
   rt(function() {
-    return D ? (ye.current = document.activeElement, ge(), je(), xe()) : Ie(), function() {
+    return D ? (ye.current = document.activeElement, ve(), je(), xe()) : Ie(), function() {
       clearTimeout(j.current);
     };
   }, [D]), x(function() {
@@ -587,8 +587,8 @@ var Ze = function(i, c) {
       return d(u);
     }, 0));
   }, L = function(u) {
-    var E;
-    !D || o || (pe(!1), S && ((E = ye.current) === null || E === void 0 || E.focus()), setTimeout(function() {
+    var _;
+    !D || o || (pe(!1), S && ((_ = ye.current) === null || _ === void 0 || _.focus()), setTimeout(function() {
       return m(u);
     }, 0));
   }, V = function(u) {
@@ -608,8 +608,8 @@ var Ze = function(i, c) {
   }, Ie = function() {
     S && ie && (document.getElementsByTagName("body")[0].style.overflow = "auto");
   }, je = function() {
-    var u, E = b == null || (u = b.current) === null || u === void 0 ? void 0 : u.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'), g = Array.prototype.slice.call(E)[0];
-    g == null || g.focus();
+    var u, _ = b == null || (u = b.current) === null || u === void 0 ? void 0 : u.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'), v = Array.prototype.slice.call(_)[0];
+    v == null || v.focus();
   };
   Ge(i, function() {
     return {
@@ -624,26 +624,26 @@ var Ze = function(i, c) {
       }
     };
   });
-  var ge = function() {
+  var ve = function() {
     if (!(S || !D) && !(!(C != null && C.current) || !(C != null && C.current) || !(b != null && b.current))) {
-      var u = C.current.getBoundingClientRect(), E = b.current.getBoundingClientRect(), g = at(u, E, ke, F, {
+      var u = C.current.getBoundingClientRect(), _ = b.current.getBoundingClientRect(), v = at(u, _, ke, F, {
         offsetX: Ce,
         offsetY: Le
       }, Ae);
-      if (b.current.style.top = g.top + window.scrollY + "px", b.current.style.left = g.left + window.scrollX + "px", F && P.current) {
+      if (b.current.style.top = v.top + window.scrollY + "px", b.current.style.left = v.left + window.scrollX + "px", F && P.current) {
         var M, $;
-        P.current.style.transform = g.transform, P.current.style.setProperty("-ms-transform", g.transform), P.current.style.setProperty("-webkit-transform", g.transform), P.current.style.top = ((M = X.top) === null || M === void 0 ? void 0 : M.toString()) || g.arrowTop, P.current.style.left = (($ = X.left) === null || $ === void 0 ? void 0 : $.toString()) || g.arrowLeft;
+        P.current.style.transform = v.transform, P.current.style.setProperty("-ms-transform", v.transform), P.current.style.setProperty("-webkit-transform", v.transform), P.current.style.top = ((M = X.top) === null || M === void 0 ? void 0 : M.toString()) || v.arrowTop, P.current.style.left = (($ = X.left) === null || $ === void 0 ? void 0 : $.toString()) || v.arrowLeft;
       }
     }
   };
-  Ze(L, Te), tt(b, D && S), Be(ge, we), et(a ? [b, C] : [b], L, R && !v);
+  Ze(L, Te), tt(b, D && S), Be(ve, we), et(a ? [b, C] : [b], L, R && !g);
   var $e = function() {
     for (var u = {
       key: "T",
       ref: C,
-      "aria-describedby": ve.current
-    }, E = Array.isArray(I) ? I : [I], g = 0, M = E.length; g < M; g++)
-      switch (E[g]) {
+      "aria-describedby": ge.current
+    }, _ = Array.isArray(I) ? I : [I], v = 0, M = _.length; v < M; v++)
+      switch (_[v]) {
         case "click":
           u.onClick = V;
           break;
@@ -663,9 +663,9 @@ var Ze = function(i, c) {
     }
     return !!a && T.cloneElement(a, u);
   }, He = function() {
-    var u = S ? H.popupContent.modal : H.popupContent.tooltip, E = {
-      className: "popup-content " + (A !== "" ? A.split(" ").map(function(g) {
-        return g + "-content";
+    var u = S ? H.popupContent.modal : H.popupContent.tooltip, _ = {
+      className: "popup-content " + (A !== "" ? A.split(" ").map(function(v) {
+        return v + "-content";
       }).join(" ") : ""),
       style: Y({}, u, Re, {
         pointerEvents: "auto"
@@ -675,12 +675,12 @@ var Ze = function(i, c) {
         M.stopPropagation();
       }
     };
-    return !ne && I.indexOf("hover") >= 0 && (E.onMouseEnter = G, E.onMouseLeave = q), E;
+    return !ne && I.indexOf("hover") >= 0 && (_.onMouseEnter = G, _.onMouseLeave = q), _;
   }, me = function() {
     return T.createElement("div", Object.assign({}, He(), {
       key: "C",
       role: S ? "dialog" : "tooltip",
-      id: ve.current
+      id: ge.current
     }), F && !S && T.createElement("div", {
       ref: P,
       style: H.popupArrow
@@ -705,17 +705,16 @@ var Ze = function(i, c) {
       return h + "-overlay";
     }).join(" ") : ""),
     style: Y({}, ze, De, {
-      pointerEvents: R && v || S ? "auto" : "none"
+      pointerEvents: R && g || S ? "auto" : "none"
     }),
-    onClick: R && v ? L : void 0,
+    onClick: R && g ? L : void 0,
     tabIndex: -1
   }, S && me()), !S && me()];
   return T.createElement(T.Fragment, null, $e(), D && Qe.createPortal(Ue, ct()));
 });
-const ut = "_tooltip_mtsuw_1", ft = "_content_mtsuw_5", be = {
-  tooltip: ut,
-  content: ft
-}, vt = ({
+const ut = "_content_lgc5i_1", be = {
+  content: ut
+}, yt = ({
   tooltipClassName: s,
   contentClassName: i,
   children: c,
@@ -730,5 +729,5 @@ const ut = "_tooltip_mtsuw_1", ft = "_content_mtsuw_5", be = {
   }
 );
 export {
-  vt as Tooltip
+  yt as Tooltip
 };

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

@@ -1,14 +1,15 @@
+import { CartPropsBase, ShoppingCart } from '../../molecules/Cart/Cart';
 import { AccountProps } from '../../molecules/Account/Account';
-export interface MainNavProps extends React.HTMLAttributes<HTMLDivElement>, Pick<AccountProps, "account"> {
+export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDivElement>, Pick<AccountProps, "account"> {
     categories?: MainCategory[];
     faqRoute: string;
     customPartsRoute: string;
     aboutUsRoute: string;
     accountRoute: string;
     contactRoute: string;
-    cartItemCount: number;
+    cart: ShoppingCart;
     onLoginClick: () => void;
-    onCartClick: () => void;
+    onSearch: (_input: string) => void;
 }
 export interface Category {
     id: string | number;
@@ -19,4 +20,4 @@ export interface MainCategory extends Category {
     children: Category[];
     showChevron?: boolean;
 }
-export declare function MainNav({ account, categories, faqRoute, customPartsRoute, aboutUsRoute, accountRoute, contactRoute, cartItemCount, onLoginClick, onCartClick, }: MainNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function MainNav({ account, categories, faqRoute, customPartsRoute, aboutUsRoute, accountRoute, contactRoute, cart, onLoginClick, onSearch, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, ...otherProps }: MainNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/MainNav/MainNav.js

@@ -1,78 +1,91 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Text as d } from "../../atoms/Text/Text.js";
-import { Link as f } from "../../atoms/Link/Link.js";
-import { Icon as v } from "../../atoms/Icon/Icon.js";
-import { Flex as c } from "../../atoms/Flex/Flex.js";
-import { Grid as w, Column as g } from "../../atoms/Grid/Grid.js";
-import { Logo as x } from "../../molecules/Logo/Logo.js";
-import { SearchBox as m } from "../../molecules/SearchBox/SearchBox.js";
-import { HamburgerMenu as L } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
-import { Cart as C } from "../../molecules/Cart/Cart.js";
-import { Account as y } from "../../molecules/Account/Account.js";
-import { CategoryNav as k } from "../../molecules/CategoryNav/CategoryNav.js";
-import '../../assets/MainNav.css';const b = "_topNav_1uhwf_1", j = "_operations_1uhwf_9", D = "_search_1uhwf_16", z = "_siteLink_1uhwf_19", F = "_accountArea_1uhwf_23", I = "_category_1uhwf_35", U = "_menuList_1uhwf_57", r = {
-  topNav: b,
-  operations: j,
-  search: D,
-  siteLink: z,
-  accountArea: F,
-  category: I,
-  menuList: U
+import { Text as f } from "../../atoms/Text/Text.js";
+import { Link as p } from "../../atoms/Link/Link.js";
+import { Icon as C } from "../../atoms/Icon/Icon.js";
+import { Flex as o } from "../../atoms/Flex/Flex.js";
+import { Grid as y, Column as k } from "../../atoms/Grid/Grid.js";
+import { Logo as b } from "../../molecules/Logo/Logo.js";
+import { SearchBox as d } from "../../molecules/SearchBox/SearchBox.js";
+import { HamburgerMenu as j } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
+import { ShoppingCart as D } from "../../molecules/Cart/Cart.js";
+import { Account as z } from "../../molecules/Account/Account.js";
+import { CategoryNav as F } from "../../molecules/CategoryNav/CategoryNav.js";
+import '../../assets/MainNav.css';const I = "_topNav_1uhwf_1", U = "_operations_1uhwf_9", M = "_search_1uhwf_16", Q = "_siteLink_1uhwf_19", B = "_accountArea_1uhwf_23", G = "_category_1uhwf_35", H = "_menuList_1uhwf_57", i = {
+  topNav: I,
+  operations: U,
+  search: M,
+  siteLink: Q,
+  accountArea: B,
+  category: G,
+  menuList: H
 };
-function V({
+function $({
   account: s,
   categories: n,
-  faqRoute: o,
+  faqRoute: c,
   customPartsRoute: l,
   aboutUsRoute: u,
-  accountRoute: p,
-  contactRoute: h,
-  cartItemCount: _ = 0,
-  onLoginClick: N,
-  onCartClick: A
-  // chat,
+  accountRoute: _,
+  contactRoute: m,
+  cart: N,
+  onLoginClick: A,
+  onSearch: h,
+  onItemQtyChange: v,
+  onItemDelete: w,
+  onItemEdit: g,
+  onCheckout: x,
+  ...L
 }) {
-  return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ t(g, { span: 12, children: [
+  return /* @__PURE__ */ e(y, { ...L, children: /* @__PURE__ */ t(k, { span: 12, children: [
     /* @__PURE__ */ t(
-      c,
+      o,
       {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
-        className: r.topNav,
+        className: i.topNav,
         children: [
-          /* @__PURE__ */ e("div", { className: r.logo, children: /* @__PURE__ */ e(x, {}) }),
+          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(b, {}) }),
           /* @__PURE__ */ t(
-            c,
+            o,
             {
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "flex-end",
-              className: r.operations,
+              className: i.operations,
               children: [
-                /* @__PURE__ */ e(c, { flexDirection: "row", hideAt: ["sm"], className: r.search, children: /* @__PURE__ */ e(m, { action: "/search" }) }),
-                /* @__PURE__ */ e(i, { href: l, hideAt: ["sm", "md"], children: "Custom Parts" }),
-                /* @__PURE__ */ e(i, { href: o, hideAt: ["sm", "md"], children: "FAQ" }),
-                /* @__PURE__ */ e(i, { href: h, hideAt: ["sm", "md"], children: "Contact Us" }),
-                /* @__PURE__ */ e("div", { className: r.accountArea, children: /* @__PURE__ */ e(
-                  y,
+                /* @__PURE__ */ e(o, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search" }) }),
+                /* @__PURE__ */ e(r, { href: l, hideAt: ["sm", "md"], children: "Custom Parts" }),
+                /* @__PURE__ */ e(r, { href: c, hideAt: ["sm", "md"], children: "FAQ" }),
+                /* @__PURE__ */ e(r, { href: m, hideAt: ["sm", "md"], children: "Contact Us" }),
+                /* @__PURE__ */ e("div", { className: i.accountArea, children: /* @__PURE__ */ e(
+                  z,
                   {
                     account: s,
-                    accountRoute: p,
-                    onLoginClick: N,
-                    className: r.avatar
+                    accountRoute: _,
+                    onLoginClick: A,
+                    className: i.avatar
                   }
                 ) }),
-                /* @__PURE__ */ e(C, { onClick: A, cartItemCount: _ }),
-                /* @__PURE__ */ e(L, { hideAt: ["lg"], children: /* @__PURE__ */ t("ul", { className: r.menuList, children: [
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: l, children: "Custom Parts" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: o, children: "FAQ" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: h, children: "Contact Us" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: u, children: "About Us" }) }),
-                  n && n.map((a) => /* @__PURE__ */ e("li", { className: r.category, children: /* @__PURE__ */ t(f, { href: a.route, children: [
-                    /* @__PURE__ */ e(d, { size: "sm", weight: "semibold", children: a.label }),
+                /* @__PURE__ */ e(
+                  D,
+                  {
+                    cart: N,
+                    onItemDelete: w,
+                    onItemEdit: g,
+                    onItemQtyChange: v,
+                    onCheckout: x
+                  }
+                ),
+                /* @__PURE__ */ e(j, { hideAt: ["lg"], children: /* @__PURE__ */ t("ul", { className: i.menuList, children: [
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: l, children: "Custom Parts" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: c, children: "FAQ" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: m, children: "Contact Us" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: u, children: "About Us" }) }),
+                  n && n.map((a) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ t(p, { href: a.route, children: [
+                    /* @__PURE__ */ e(f, { size: "sm", weight: "semibold", children: a.label }),
                     /* @__PURE__ */ e(
-                      v,
+                      C,
                       {
                         iconKey: "fa-solid fa-chevron-right",
                         title: "Navigate",
@@ -87,17 +100,17 @@ function V({
         ]
       }
     ),
-    /* @__PURE__ */ e(c, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(m, { action: "/search", className: r.search }) }),
-    /* @__PURE__ */ e(k, { categories: n })
+    /* @__PURE__ */ e(o, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search", className: i.search }) }),
+    /* @__PURE__ */ e(F, { categories: n })
   ] }) });
 }
-function i({
+function r({
   href: s,
   children: n,
-  ...o
+  ...c
 }) {
-  return /* @__PURE__ */ e(f, { href: s, className: r.siteLink, ...o, children: /* @__PURE__ */ e(d, { size: "md", variant: "display", children: n }) });
+  return /* @__PURE__ */ e(p, { href: s, className: i.siteLink, ...c, children: /* @__PURE__ */ e(f, { size: "md", variant: "display", children: n }) });
 }
 export {
-  V as MainNav
+  $ as MainNav
 };

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

@@ -1,13 +1,13 @@
-import { MainNav as e } from "./MainNav.js";
-const o = {
+import { MainNav as o } from "./MainNav.js";
+const l = {
   title: "Case Parts/Organisms/MainNav",
-  component: e,
+  component: o,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "fullscreen"
   }
   // tags: ["autodocs"],
-}, t = [
+}, a = [
   {
     id: 0,
     label: "Shop by Brands",
@@ -80,14 +80,29 @@ const o = {
     route: "#",
     children: []
   }
-], n = {
+], e = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", i = {
+  items: [
+    { id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: 99.99, quantity: 1, imageUrl: e, availability: "In Stock" },
+    { id: 2, itemId: "810810", description: "True Door Gasket", price: 9.99, quantity: 1, imageUrl: e, availability: "In Stock" },
+    { id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: 9.99, quantity: 1, imageUrl: e, availability: "" },
+    { id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: 9.99, quantity: 1, imageUrl: e, availability: "" },
+    { id: 5, itemId: "Warmer Wire", description: '228" 7.0 ohms 115V', price: 9.99, quantity: 1, imageUrl: e, availability: "" },
+    { id: 6, itemId: "810803", description: "True Door Gasket", price: 9.99, quantity: 1, imageUrl: e, availability: "In Stock" },
+    { id: 7, itemId: "ABG-12114-PF", description: "Adhesive Sponge Gasket 1/4", price: 9.99, quantity: 10, imageUrl: e, availability: "In Stock" },
+    { id: 8, itemId: "ABG-12138-PF", description: "Adhesive Sponge Gasket 3/8", price: 9.99, quantity: 10, imageUrl: e, availability: "In Stock" },
+    { id: 9, itemId: "1094-C1", description: "Kason Door Closer - Flush", price: 20.99, quantity: 1, imageUrl: e, availability: "In Stock" },
+    { id: 10, itemId: "1094-02", description: "Kason Door Closer - Offset", price: 30.05, quantity: 1, imageUrl: e, availability: "In Stock" },
+    { id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price: 40.1, quantity: 1, imageUrl: e, availability: "In Stock" },
+    { id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: 50.15, quantity: 1, imageUrl: e, availability: "In Stock" }
+  ]
+}, n = {
   args: {
     account: {
       name: "Ringo",
       initials: "RS",
       number: "123456789012"
     },
-    cartItemCount: 0,
+    cart: i,
     customPartsRoute: "/custom",
     accountRoute: "/account",
     faqRoute: "/faq",
@@ -96,19 +111,31 @@ const o = {
     onLoginClick: () => {
       alert("Login ");
     },
-    onCartClick: () => {
-      alert("Cart");
+    onCheckout: () => {
+      alert("Checkout");
     },
-    categories: t
+    onItemDelete: () => {
+      alert("Delete");
+    },
+    onItemEdit: () => {
+      alert("Delete");
+    },
+    onItemQtyChange: () => {
+      alert("Delete");
+    },
+    onSearch: (t) => {
+      alert(`Search ${t}`);
+    },
+    categories: a
   }
-}, r = {
+}, c = {
   args: {
     account: {
       name: "Ringo",
       initials: "RS",
       number: "123456789012"
     },
-    cartItemCount: 10,
+    cart: i,
     customPartsRoute: "/custom",
     accountRoute: "/account",
     faqRoute: "/faq",
@@ -117,14 +144,26 @@ const o = {
     onLoginClick: () => {
       alert("Login ");
     },
-    onCartClick: () => {
-      alert("Cart");
+    onCheckout: () => {
+      alert("Checkout");
+    },
+    onItemDelete: () => {
+      alert("Delete");
+    },
+    onItemEdit: () => {
+      alert("Delete");
     },
-    categories: t
+    onItemQtyChange: () => {
+      alert("Delete");
+    },
+    onSearch: (t) => {
+      alert(`Search ${t}`);
+    },
+    categories: a
   }
-}, l = {
+}, s = {
   args: {
-    cartItemCount: 0,
+    cart: i,
     customPartsRoute: "/custom",
     accountRoute: "/account",
     faqRoute: "/faq",
@@ -133,15 +172,27 @@ const o = {
     onLoginClick: () => {
       alert("Login ");
     },
-    onCartClick: () => {
-      alert("Cart");
+    onCheckout: () => {
+      alert("Checkout");
+    },
+    onItemDelete: () => {
+      alert("Delete");
+    },
+    onItemEdit: () => {
+      alert("Delete");
+    },
+    onItemQtyChange: () => {
+      alert("Delete");
+    },
+    onSearch: (t) => {
+      alert(`Search ${t}`);
     },
-    categories: t
+    categories: a
   }
 };
 export {
   n as Authenticated,
-  l as Unauthenticated,
-  r as WithCartItems,
-  o as default
+  s as Unauthenticated,
+  c as WithCartItems,
+  l as default
 };

package/package.json

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