@caseparts-org/caseblocks 0.0.97 → 0.0.99

package/dist/assets/Breadcrumbs.css

@@ -0,0 +1 @@
+._nav_5oobe_1{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}._crumb_5oobe_8{color:var(--color-brand-primary-primary-teal-blue);font-size:var(--font-size-xs)}._final_5oobe_13{pointer-events:none;color:#333}._nav_5oobe_1>span{padding:0 4px;font-size:var(--font-size-xs)}

package/dist/assets/HorizontalScroll.css

@@ -1 +1 @@
-._container_aum2v_1{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;touch-action:pan-x}._dragging_aum2v_14{cursor:grabbing}._scrollVisibility--false_aum2v_19{scrollbar-width:none;-ms-overflow-style:none}._scrollVisibility--false_aum2v_19::-webkit-scrollbar{display:none}
+._root_1bnow_1{width:100%}._header_1bnow_5{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-spacing-2xs);margin-bottom:var(--spacing-spacing-2xs)}._controls_1bnow_13{display:flex;align-items:center;gap:var(--spacing-spacing-2xs)}._controlBtn_1bnow_18{cursor:pointer;padding:var(--spacing-spacing-3xs);border:none;background-color:transparent;line-height:1;display:flex;align-items:center;justify-content:center}._controlBtn_1bnow_18:hover{color:var(--color-brand-primary-primary-teal-blue)}._controlBtn_1bnow_18:disabled:hover{cursor:default;color:var(--color-neutrals-neutral-3)}._container_1bnow_37{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;touch-action:pan-x}._dragging_1bnow_50{cursor:grabbing}._noOverflow_1bnow_53{cursor:default}._scrollVisibility--false_1bnow_58{scrollbar-width:none;-ms-overflow-style:none}._scrollVisibility--false_1bnow_58::-webkit-scrollbar{display:none}._viewport_1bnow_66{position:relative}._indicator_1bnow_69{position:absolute;top:0;bottom:0;width:48px;pointer-events:none;opacity:1;transition:opacity .25s;z-index:1}._left_1bnow_79{left:0;background:linear-gradient(to right,var(--horizontal-scroll-indicator-color, rgba(0,0,0,.15)) 0%,rgba(0,0,0,0) 100%)}._right_1bnow_85{right:0;background:linear-gradient(to left,var(--horizontal-scroll-indicator-color, rgba(0,0,0,.15)) 0%,rgba(0,0,0,0) 100%)}._hidden_1bnow_91{opacity:0}

package/dist/assets/Product.css

@@ -1 +1 @@
-._productCard_10edn_1{box-sizing:border-box;border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;display:flex;width:232px;height:296px;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._productCard_10edn_1>img{width:116px;height:116px;object-fit:contain;flex-shrink:0;margin:0 auto}._productCard_10edn_1 ._productInformation_10edn_22{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:auto}._productCard_10edn_1 ._purchaseInformation_10edn_29{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._productCard_10edn_1 ._addToCart_10edn_37,._productCard_10edn_1 ._addToCartButton_10edn_40{width:100%}._productInformation_10edn_22>a{font-weight:var(--font-weight-semibold)}._partNumber_10edn_48{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._partNumberLabel_10edn_55{color:var(--text-text-quaternary)}._productTile_10edn_59{box-sizing:border-box;width:100%;max-width:1072px;display:flex;flex-direction:row;align-items:flex-start;border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);gap:var(--spacing-spacing-1xs)}._productTile_10edn_59>img{width:108px;height:108px;object-fit:contain}._productTile_10edn_59 ._topRow_10edn_80{display:grid;grid-template-columns:1fr auto;width:100%}._productTile_10edn_59 ._topRow_10edn_80 button{background-color:transparent;padding:0;margin:0;outline:none;border:none;height:min-content;width:min-content}._productTile_10edn_59 ._topRow_10edn_80 path{fill:var(--icons-icon-search)}._productTile_10edn_59 ._topRow_10edn_80 svg{padding:0}._productTile_10edn_59 ._productInformation_10edn_22{display:flex;flex-direction:column;align-items:flex-start;gap:2px}._productTile_10edn_59 ._productData_10edn_111{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:var(--spacing-spacing-2xs)}._productTile_10edn_59 ._purchase_10edn_29{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%}@media (max-width: 480px){._productTile_10edn_59 ._purchase_10edn_29{flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-3xs)}}._productTile_10edn_59 ._purchaseInformation_10edn_29{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}@media (max-width: 480px){._productTile_10edn_59 ._purchaseInformation_10edn_29{flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%;gap:0px}}._productTile_10edn_59 ._attributeContainer_10edn_148{margin:0;padding:0;padding-top:var(--spacing-spacing-1xs);border-top:1px solid var(--border-border-primary);width:100%;list-style:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;column-gap:var(--spacing-spacing-lg);row-gap:var(--spacing-spacing-3xs)}@media (max-width: 640px){._productTile_10edn_59 ._attributeContainer_10edn_148{display:none}}._productTile_10edn_59 ._attributeContainer_10edn_148 li{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._productTile_10edn_59 ._addToCart_10edn_37{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-md)}@media (max-width: 480px){._productTile_10edn_59 ._addToCart_10edn_37{gap:var(--spacing-spacing-2xs);width:100%}}._productTile_10edn_59 ._addToCartButton_10edn_40{width:96px;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}@media (max-width: 640px){._productTile_10edn_59 ._addToCartButton_10edn_40{width:100%}}
+._productCard_15dy7_1{box-sizing:border-box;border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;display:flex;width:232px;height:296px;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._productCard_15dy7_1>img{width:96px;height:96px;object-fit:contain;flex-shrink:0;margin:0 auto}._productCard_15dy7_1 ._productInformation_15dy7_22{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:auto}._productCard_15dy7_1 ._purchaseInformation_15dy7_29{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._productCard_15dy7_1 ._addToCart_15dy7_37,._productCard_15dy7_1 ._addToCartButton_15dy7_40{width:100%}._productInformation_15dy7_22>a{font-weight:var(--font-weight-semibold)}._partNumber_15dy7_48{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._partNumberLabel_15dy7_55{color:var(--text-text-quaternary)}._productTile_15dy7_59{box-sizing:border-box;width:100%;max-width:1072px;display:flex;flex-direction:row;align-items:flex-start;border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);gap:var(--spacing-spacing-1xs)}._productTile_15dy7_59>img{width:108px;height:108px;object-fit:contain}._productTile_15dy7_59 ._topRow_15dy7_80{display:grid;grid-template-columns:1fr auto;width:100%}._productTile_15dy7_59 ._topRow_15dy7_80 button{background-color:transparent;padding:0;margin:0;outline:none;border:none;height:min-content;width:min-content}._productTile_15dy7_59 ._topRow_15dy7_80 path{fill:var(--icons-icon-search)}._productTile_15dy7_59 ._topRow_15dy7_80 svg{padding:0}._productTile_15dy7_59 ._productInformation_15dy7_22{display:flex;flex-direction:column;align-items:flex-start;gap:2px}._productTile_15dy7_59 ._productData_15dy7_111{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:var(--spacing-spacing-2xs)}._productTile_15dy7_59 ._purchase_15dy7_29{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%}@media (max-width: 480px){._productTile_15dy7_59 ._purchase_15dy7_29{flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-3xs)}}._productTile_15dy7_59 ._purchaseInformation_15dy7_29{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}@media (max-width: 480px){._productTile_15dy7_59 ._purchaseInformation_15dy7_29{flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%;gap:0px}}._productTile_15dy7_59 ._attributeContainer_15dy7_148{margin:0;padding:0;padding-top:var(--spacing-spacing-1xs);border-top:1px solid var(--border-border-primary);width:100%;list-style:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;column-gap:var(--spacing-spacing-lg);row-gap:var(--spacing-spacing-3xs)}@media (max-width: 640px){._productTile_15dy7_59 ._attributeContainer_15dy7_148{display:none}}._productTile_15dy7_59 ._attributeContainer_15dy7_148 li{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._productTile_15dy7_59 ._addToCart_15dy7_37{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-md)}@media (max-width: 480px){._productTile_15dy7_59 ._addToCart_15dy7_37{gap:var(--spacing-spacing-2xs);width:100%}}._productTile_15dy7_59 ._addToCartButton_15dy7_40{width:96px;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}@media (max-width: 640px){._productTile_15dy7_59 ._addToCartButton_15dy7_40{width:100%}}

package/dist/atoms/HorizontalScroll/HorizontalScroll.d.ts

@@ -1,6 +1,13 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 export interface HorizontalScrollProps extends PropsWithChildren {
     className?: string;
     showScrollbar?: boolean;
+    caption?: ReactNode;
+    scrollStep?: number;
+    leftButtonContent?: ReactNode;
+    rightButtonContent?: ReactNode;
+    headerClassName?: string;
+    showIndicators?: boolean;
+    hideHeader?: boolean;
 }
-export declare function HorizontalScroll({ className, showScrollbar, children }: HorizontalScrollProps): import("react/jsx-runtime").JSX.Element;
+export declare function HorizontalScroll({ className, showScrollbar, children, caption, scrollStep, leftButtonContent, rightButtonContent, headerClassName, showIndicators, hideHeader, }: HorizontalScrollProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/HorizontalScroll/HorizontalScroll.js

@@ -1,55 +1,151 @@
-import { jsx as x } from "react/jsx-runtime";
-import { useRef as c, useState as D, useEffect as L } from "react";
-import { c as b } from "../../clsx-OuTLNxxd.js";
-import '../../assets/HorizontalScroll.css';const P = "_container_aum2v_1", S = "_dragging_aum2v_14", s = {
-  container: P,
-  dragging: S,
-  "scrollVisibility--false": "_scrollVisibility--false_aum2v_19"
+import { jsxs as i, jsx as l, Fragment as V } from "react/jsx-runtime";
+import { useRef as b, useState as h, useEffect as m } from "react";
+import { Icon as N } from "../Icon/Icon.js";
+import { Text as Y } from "../Text/Text.js";
+import { c as a } from "../../clsx-OuTLNxxd.js";
+import '../../assets/HorizontalScroll.css';const j = "_root_1bnow_1", F = "_header_1bnow_5", K = "_controls_1bnow_13", q = "_controlBtn_1bnow_18", G = "_container_1bnow_37", I = "_dragging_1bnow_50", U = "_noOverflow_1bnow_53", $ = "_viewport_1bnow_66", J = "_indicator_1bnow_69", Q = "_left_1bnow_79", Z = "_right_1bnow_85", tt = "_hidden_1bnow_91", e = {
+  root: j,
+  header: F,
+  controls: K,
+  controlBtn: q,
+  container: G,
+  dragging: I,
+  noOverflow: U,
+  "scrollVisibility--false": "_scrollVisibility--false_1bnow_58",
+  viewport: $,
+  indicator: J,
+  left: Q,
+  right: Z,
+  hidden: tt
 };
-function M({
-  className: d,
-  showScrollbar: g = !1,
-  children: p
+function st({
+  className: S,
+  showScrollbar: E = !1,
+  children: C,
+  caption: d,
+  scrollStep: g = 160,
+  leftButtonContent: D,
+  rightButtonContent: W,
+  headerClassName: z,
+  showIndicators: O = !0,
+  hideHeader: B = !1
+  // new default
 }) {
-  const r = c(null), [a, i] = D(!1), n = c({ x: 0, scroll: 0 }), l = c(!1), v = 5, m = (t) => {
-    r.current && (i(!0), n.current.x = t.clientX, n.current.scroll = r.current.scrollLeft, l.current = !1);
-  }, h = (t) => {
-    if (!a || !r.current) return;
-    const o = t.clientX - n.current.x;
-    r.current.scrollLeft = n.current.scroll - o, Math.abs(t.clientX - n.current.x) > v && (l.current = !0);
-  }, u = () => {
-    r.current && i(!1);
-  }, _ = (t) => {
-    l.current && (t.preventDefault(), t.stopPropagation(), l.current = !1);
+  const n = b(null), [w, p] = h(!1), c = b({ x: 0, scroll: 0 }), f = b(!1), M = 5, [_, P] = h(!0), [v, R] = h(!1), [u, X] = h(!1), s = () => {
+    const t = n.current;
+    if (!t) return;
+    const r = t.scrollWidth - t.clientWidth;
+    X(t.scrollWidth > t.clientWidth + 1), P(t.scrollLeft <= 0), R(t.scrollLeft >= r - 1);
+  }, k = (t) => {
+    !n.current || !u || (p(!0), c.current.x = t.clientX, c.current.scroll = n.current.scrollLeft, f.current = !1);
+  }, A = (t) => {
+    if (!w || !n.current) return;
+    const r = t.clientX - c.current.x;
+    n.current.scrollLeft = c.current.scroll - r, Math.abs(t.clientX - c.current.x) > M && (f.current = !0);
+  }, x = () => {
+    n.current && p(!1);
+  }, H = (t) => {
+    f.current && (t.preventDefault(), t.stopPropagation(), f.current = !1);
+  }, y = (t) => {
+    const r = n.current;
+    if (!r) return;
+    const o = Math.max(0, Math.min(r.scrollLeft + t, r.scrollWidth - r.clientWidth));
+    r.scrollTo({ left: o, behavior: "smooth" }), requestAnimationFrame(s);
   };
-  return L(() => {
-    const t = r.current;
+  m(() => {
+    const t = n.current;
     if (!t) return;
-    const o = (e) => {
+    const r = (o) => {
       if (!(t.scrollWidth > t.clientWidth)) return;
-      const f = Math.abs(e.deltaY) >= Math.abs(e.deltaX) && e.deltaY !== 0 ? e.deltaY : e.deltaX;
-      f !== 0 ? (e.preventDefault(), t.scrollLeft += f) : e.preventDefault();
+      const L = Math.abs(o.deltaY) >= Math.abs(o.deltaX) && o.deltaY !== 0 ? o.deltaY : o.deltaX;
+      L !== 0 ? (o.preventDefault(), t.scrollLeft += L) : o.preventDefault();
     };
-    return t.addEventListener("wheel", o, { passive: !1 }), () => t.removeEventListener("wheel", o);
-  }, []), /* @__PURE__ */ x(
-    "div",
-    {
-      ref: r,
-      className: b(
-        d,
-        s.container,
-        s[`scrollVisibility--${g}`],
-        a ? s.dragging : ""
+    return t.addEventListener("wheel", r, { passive: !1 }), () => t.removeEventListener("wheel", r);
+  }, []), m(() => {
+    const t = n.current;
+    if (t)
+      return s(), t.addEventListener("scroll", s), () => t.removeEventListener("scroll", s);
+  }, []), m(() => {
+    const t = n.current;
+    if (!t || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(() => s());
+    return r.observe(t), () => r.disconnect();
+  }, []);
+  const T = () => d == null ? null : typeof d == "string" ? /* @__PURE__ */ l(Y, { variant: "display", size: "2xl", className: e.caption, children: d }) : d;
+  return /* @__PURE__ */ i("div", { className: a(e.root, S), children: [
+    !B && /* @__PURE__ */ i("div", { className: a(e.header, z), children: [
+      T(),
+      /* @__PURE__ */ i("div", { className: e.controls, children: [
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            className: e.controlBtn,
+            onClick: () => y(-g),
+            "aria-label": "Scroll left",
+            disabled: _,
+            "aria-disabled": _,
+            children: D ?? /* @__PURE__ */ l(N, { iconKey: "fa-regular fa-chevron-left", size: "sm" })
+          }
+        ),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            className: e.controlBtn,
+            onClick: () => y(g),
+            "aria-label": "Scroll right",
+            disabled: v,
+            "aria-disabled": v,
+            children: W ?? /* @__PURE__ */ l(N, { iconKey: "fa-regular fa-chevron-right", size: "sm" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { className: e.viewport, children: [
+      /* @__PURE__ */ l(
+        "div",
+        {
+          ref: n,
+          className: a(
+            e.container,
+            e[`scrollVisibility--${E}`],
+            w ? e.dragging : "",
+            !u && e.noOverflow
+          ),
+          onPointerDown: k,
+          onPointerMove: A,
+          onPointerLeave: x,
+          onPointerUp: x,
+          onClickCapture: H,
+          children: C
+        }
       ),
-      onPointerDown: m,
-      onPointerMove: h,
-      onPointerLeave: u,
-      onPointerUp: u,
-      onClickCapture: _,
-      children: p
-    }
-  );
+      O && /* @__PURE__ */ i(V, { children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: a(
+              e.indicator,
+              e.left,
+              (_ || !u) && e.hidden
+            )
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: a(
+              e.indicator,
+              e.right,
+              (v || !u) && e.hidden
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
 }
 export {
-  M as HorizontalScroll
+  st as HorizontalScroll
 };

package/dist/atoms/HorizontalScroll/HorizontalScroll.stories.d.ts

@@ -7,6 +7,8 @@ interface DemoArgs {
     gap: number;
     rounded: boolean;
     gradient: boolean;
+    showIndicators: boolean;
+    hideHeader: boolean;
 }
 type StoryArgs = DemoArgs;
 declare const meta: Meta<StoryArgs>;
@@ -16,3 +18,5 @@ export declare const Playground: Story;
 export declare const WithScrollbar: Story;
 export declare const DenseSmallItems: Story;
 export declare const LargeCards: Story;
+export declare const WithoutIndicators: Story;
+export declare const HeaderHidden: Story;

package/dist/atoms/HorizontalScroll/HorizontalScroll.stories.js

@@ -1,6 +1,6 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { HorizontalScroll as r } from "./HorizontalScroll.js";
-const S = {
+const b = {
   title: "Case Parts/Atoms/HorizontalScroll",
   component: r,
   tags: ["autodocs"],
@@ -49,6 +49,14 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     gradient: {
       control: { type: "boolean" },
       description: "Use gradient background instead of solid."
+    },
+    showIndicators: {
+      control: { type: "boolean" },
+      description: "Show gradient edge scroll affordances."
+    },
+    hideHeader: {
+      control: { type: "boolean" },
+      description: "Hide the caption row and arrow controls."
     }
   },
   args: {
@@ -58,9 +66,13 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     itemHeight: 80,
     gap: 12,
     rounded: !0,
-    gradient: !0
+    gradient: !0,
+    showIndicators: !0,
+    // new default
+    hideHeader: !1
+    // new default
   }
-}, l = /* @__PURE__ */ o("style", { children: `
+}, i = /* @__PURE__ */ o("style", { children: `
       .horizontalDemoScroll {
         touch-action: none; /* ensure pointer events for horizontal drag */
       }
@@ -68,9 +80,9 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         -webkit-user-drag: none; /* Safari/Chrome: prevent ghost dragging of link */
       }
     ` }), n = (e) => {
-  const { itemCount: s, itemWidth: c, itemHeight: i, gap: d, rounded: h, gradient: m } = e;
-  return Array.from({ length: s }, (p, g) => {
-    const a = g + 1;
+  const { itemCount: d, itemWidth: s, itemHeight: a, gap: c, rounded: h, gradient: m } = e;
+  return Array.from({ length: d }, (g, p) => {
+    const l = p + 1;
     return /* @__PURE__ */ o(
       "a",
       {
@@ -78,41 +90,61 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         draggable: !1,
         style: {
           flex: "0 0 auto",
-          width: c,
-          height: i,
-          marginRight: d,
+          width: s,
+          height: a,
+          marginRight: c,
           borderRadius: h ? 8 : 0,
           background: m ? "linear-gradient(135deg,#4F46E5,#6366F1)" : "#4F46E5",
           color: "#fff",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: Math.max(12, Math.min(24, i / 3)),
+          fontSize: Math.max(12, Math.min(24, a / 3)),
           fontWeight: 600,
           userSelect: "none",
           boxShadow: "0 2px 6px rgba(0,0,0,0.25)"
         },
-        children: a
+        children: l
       },
-      a
+      l
     );
   });
-}, y = {
+}, S = {
   name: "Playground",
   render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    l,
+    i,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "HorizontalScroll Playground" }),
     /* @__PURE__ */ o("p", { style: { margin: "0 0 16px", fontSize: 14, color: "#555" }, children: "Drag horizontally or use the mouse wheel. Tweak values in Controls." }),
-    /* @__PURE__ */ o(r, { className: "horizontalDemoScroll", showScrollbar: e.showScrollbar, children: n(e) })
+    /* @__PURE__ */ o(
+      r,
+      {
+        className: "horizontalDemoScroll",
+        showScrollbar: e.showScrollbar,
+        showIndicators: e.showIndicators,
+        hideHeader: e.hideHeader,
+        caption: `Playground (${e.itemCount} items)`,
+        children: n(e)
+      }
+    )
   ] })
-}, f = {
+}, y = {
   args: { showScrollbar: !0 },
   render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    l,
+    i,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Scrollbar Visible" }),
-    /* @__PURE__ */ o(r, { className: "horizontalDemoScroll", showScrollbar: !0, children: n(e) })
+    /* @__PURE__ */ o(
+      r,
+      {
+        className: "horizontalDemoScroll",
+        showScrollbar: !0,
+        showIndicators: e.showIndicators,
+        hideHeader: e.hideHeader,
+        caption: "Scrollbar Visible",
+        children: n(e)
+      }
+    )
   ] })
-}, w = {
+}, f = {
   args: {
     itemCount: 40,
     itemWidth: 90,
@@ -121,11 +153,21 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     showScrollbar: !1
   },
   render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    l,
+    i,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Dense Small Items" }),
-    /* @__PURE__ */ o(r, { className: "horizontalDemoScroll", showScrollbar: e.showScrollbar, children: n(e) })
+    /* @__PURE__ */ o(
+      r,
+      {
+        className: "horizontalDemoScroll",
+        showScrollbar: e.showScrollbar,
+        showIndicators: e.showIndicators,
+        hideHeader: e.hideHeader,
+        caption: `Dense (${e.itemCount} items)`,
+        children: n(e)
+      }
+    )
   ] })
-}, x = {
+}, H = {
   args: {
     itemCount: 12,
     itemWidth: 260,
@@ -134,15 +176,76 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     gradient: !1
   },
   render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    l,
+    i,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Large Cards" }),
-    /* @__PURE__ */ o(r, { className: "horizontalDemoScroll", showScrollbar: e.showScrollbar, children: n(e) })
+    /* @__PURE__ */ o(
+      r,
+      {
+        className: "horizontalDemoScroll",
+        showScrollbar: e.showScrollbar,
+        showIndicators: e.showIndicators,
+        hideHeader: e.hideHeader,
+        caption: "Large Cards",
+        children: n(e)
+      }
+    )
+  ] })
+}, x = {
+  name: "Without Indicators",
+  args: {
+    showIndicators: !1,
+    itemCount: 16,
+    itemWidth: 140,
+    itemHeight: 72,
+    gap: 12
+  },
+  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
+    i,
+    /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Indicators Disabled" }),
+    /* @__PURE__ */ o(
+      r,
+      {
+        className: "horizontalDemoScroll",
+        showScrollbar: e.showScrollbar,
+        showIndicators: !1,
+        hideHeader: e.hideHeader,
+        caption: "No Edge Indicators",
+        children: n(e)
+      }
+    )
+  ] })
+}, I = {
+  name: "Header Hidden",
+  args: {
+    hideHeader: !0,
+    itemCount: 14,
+    itemWidth: 130,
+    itemHeight: 70,
+    gap: 10,
+    showIndicators: !0
+  },
+  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
+    i,
+    /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Header Hidden" }),
+    /* @__PURE__ */ o(
+      r,
+      {
+        className: "horizontalDemoScroll",
+        showScrollbar: e.showScrollbar,
+        showIndicators: e.showIndicators,
+        hideHeader: !0,
+        caption: "(Will not render since header hidden)",
+        children: n(e)
+      }
+    )
   ] })
 };
 export {
-  w as DenseSmallItems,
-  x as LargeCards,
-  y as Playground,
-  f as WithScrollbar,
-  S as default
+  f as DenseSmallItems,
+  I as HeaderHidden,
+  H as LargeCards,
+  S as Playground,
+  y as WithScrollbar,
+  x as WithoutIndicators,
+  b as default
 };

package/dist/main-client.d.ts

@@ -19,8 +19,9 @@ export type { AnimatedCheckMarkProps } from './molecules/StatefulButton/Animated
 export { AnimatedCheckMark } from './molecules/StatefulButton/AnimatedCheckmark';
 export type { AddToCartProps } from './molecules/AddToCart/AddToCart';
 export { AddToCart } from './molecules/AddToCart/AddToCart';
+export type { CategoryWithChildren as MainCategory, Category } from './molecules/CategoryNav/CategoryNav';
 export { MainNav } from './organisms/MainNav/MainNav';
-export type { MainCategory, MainNavProps, Category } from './organisms/MainNav/MainNav';
+export type { MainNavProps } from './organisms/MainNav/MainNav';
 export { ChipSelector } from './organisms/ChipSelector/ChipSelector';
 export type { ChipSelectorProps } from './organisms/ChipSelector/ChipSelector';
 export { Product } from './organisms/Product/Product';

package/dist/main-client.js

@@ -1,18 +1,18 @@
 import { Button as t } from "./atoms/Button/Button.js";
 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 { Head as n } from "./atoms/Root/Head.js";
 import { Icon as l } from "./atoms/Icon/Icon.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 I } from "./atoms/Input/Input.js";
-import { Link as B } from "./atoms/Link/Link.js";
+import { Input as B } from "./atoms/Input/Input.js";
+import { Link as A } from "./atoms/Link/Link.js";
 import { linkClassName as h } from "./atoms/Link/linkClassName.js";
-import { configureLink as P, routerOverride as T } from "./atoms/Link/configureLink.js";
+import { configureLink as v, routerOverride as P } 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 { configureImage as b } from "./atoms/Image/configureImage.js";
+import { Logo as H } from "./molecules/Logo/Logo.js";
 import { SearchBox as w } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as G } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as Q } from "./molecules/Pricing/Pricing.js";
@@ -20,61 +20,63 @@ import { Availability as V } from "./molecules/Availability/Availability.js";
 import { Avatar as q } from "./molecules/Avatar/Avatar.js";
 import { BannerCard as E } from "./molecules/BannerCard/BannerCard.js";
 import { CardLink as K } from "./molecules/CardLink/CardLink.js";
-import { NotFound as W } from "./organisms/NotFound/NotFound.js";
-import { HorizontalScroll as Y } from "./atoms/HorizontalScroll/HorizontalScroll.js";
-import { SlideInPanel as _ } from "./atoms/SlideInPanel/SlideInPanel.js";
-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 { 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";
+import { Breadcrumbs as W } from "./molecules/Breadcrumbs/Breadcrumbs.js";
+import { NotFound as Y } from "./organisms/NotFound/NotFound.js";
+import { HorizontalScroll as _ } from "./atoms/HorizontalScroll/HorizontalScroll.js";
+import { SlideInPanel as oo } from "./atoms/SlideInPanel/SlideInPanel.js";
+import { Tooltip as to } from "./atoms/Tooltip/Tooltip.js";
+import { Account as po } from "./molecules/Account/Account.js";
+import { Chip as fo } from "./molecules/Chip/Chip.js";
+import { ToggleView as ao } from "./molecules/ToggleView/ToggleView.js";
+import { CartSlideInPanel as io } from "./molecules/Cart/CartSlideInPanel.js";
+import { StatefulButton as uo } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as Co } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as ko } from "./molecules/AddToCart/AddToCart.js";
+import { MainNav as Bo } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as Ao } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as ho } from "./organisms/Product/Product.js";
+import { Carousel as vo } from "./organisms/Carousel/Carousel.js";
+import { Footer as To } from "./organisms/Footer/Footer.js";
 export {
-  to as Account,
-  Co as AddToCart,
-  uo as AnimatedCheckMark,
+  po as Account,
+  ko as AddToCart,
+  Co as AnimatedCheckMark,
   V as Availability,
   q as Avatar,
   E as BannerCard,
+  W as Breadcrumbs,
   t as Button,
   K as CardLink,
-  ho as Carousel,
-  no as CartSlideInPanel,
-  po as Chip,
-  Io as ChipSelector,
+  vo as Carousel,
+  io as CartSlideInPanel,
+  fo as Chip,
+  Ao as ChipSelector,
   f as Column,
   p as Flex,
-  Po as Footer,
+  To as Footer,
   x as Grid,
-  a as Head,
-  Y as HorizontalScroll,
+  n as Head,
+  _ as HorizontalScroll,
   l as Icon,
-  I as Input,
-  B as Link,
+  B as Input,
+  A as Link,
   F as LinkButton,
-  M as Logo,
-  ko as MainNav,
-  W as NotFound,
+  H as Logo,
+  Bo as MainNav,
+  Y as NotFound,
   Q as Pricing,
-  Bo as Product,
+  ho as Product,
   G as QuantityInput,
   d as Root,
   w as SearchBox,
   C as Separator,
-  _ as SlideInPanel,
-  io as StatefulButton,
+  oo as SlideInPanel,
+  uo as StatefulButton,
   k as Text,
-  fo as ToggleView,
-  oo as Tooltip,
-  y as configureImage,
-  P as configureLink,
+  ao as ToggleView,
+  to as Tooltip,
+  b as configureImage,
+  v as configureLink,
   h as linkClassName,
-  T as routerOverride
+  P as routerOverride
 };

package/dist/main-server.d.ts

@@ -37,5 +37,7 @@ export { BannerCard } from './molecules/BannerCard/BannerCard';
 export type { BannerCardProps } from './molecules/BannerCard/BannerCard';
 export { CardLink } from './molecules/CardLink/CardLink';
 export type { CardLinkProps } from './molecules/CardLink/CardLink';
+export { Breadcrumbs } from './molecules/Breadcrumbs/Breadcrumbs';
+export type { BreadcrumbProps, Breadcrumb } from './molecules/Breadcrumbs/Breadcrumbs';
 export { NotFound } from './organisms/NotFound/NotFound';
 export type { NotFoundProps } from './organisms/NotFound/NotFound';

package/dist/main-server.js

@@ -3,14 +3,14 @@ import { Flex as m } from "./atoms/Flex/Flex.js";
 import { Column as x, Grid as f } from "./atoms/Grid/Grid.js";
 import { Head as a } from "./atoms/Root/Head.js";
 import { Icon as u } from "./atoms/Icon/Icon.js";
-import { Root as l } from "./atoms/Root/Root.js";
+import { Root as c } from "./atoms/Root/Root.js";
 import { Separator as g } from "./atoms/Separator/Separator.js";
-import { Text as L } from "./atoms/Text/Text.js";
+import { Text as B } from "./atoms/Text/Text.js";
 import { Input as C } from "./atoms/Input/Input.js";
-import { Link as v } from "./atoms/Link/Link.js";
-import { linkClassName as y } from "./atoms/Link/linkClassName.js";
-import { configureLink as F, routerOverride as N } from "./atoms/Link/configureLink.js";
-import { LinkButton as b } from "./atoms/LinkButton/LinkButton.js";
+import { Link as s } from "./atoms/Link/Link.js";
+import { linkClassName as b } from "./atoms/Link/linkClassName.js";
+import { configureLink as A, routerOverride as F } from "./atoms/Link/configureLink.js";
+import { LinkButton as S } from "./atoms/LinkButton/LinkButton.js";
 import { configureImage as G } from "./atoms/Image/configureImage.js";
 import { Logo as O } from "./molecules/Logo/Logo.js";
 import { SearchBox as Q } from "./molecules/SearchBox/SearchBox.js";
@@ -20,11 +20,13 @@ import { Availability as z } from "./molecules/Availability/Availability.js";
 import { Avatar as E } from "./molecules/Avatar/Avatar.js";
 import { BannerCard as K } from "./molecules/BannerCard/BannerCard.js";
 import { CardLink as U } from "./molecules/CardLink/CardLink.js";
-import { NotFound as W } from "./organisms/NotFound/NotFound.js";
+import { Breadcrumbs as W } from "./molecules/Breadcrumbs/Breadcrumbs.js";
+import { NotFound as Y } from "./organisms/NotFound/NotFound.js";
 export {
   z as Availability,
   E as Avatar,
   K as BannerCard,
+  W as Breadcrumbs,
   t as Button,
   U as CardLink,
   x as Column,
@@ -33,18 +35,18 @@ export {
   a as Head,
   u as Icon,
   C as Input,
-  v as Link,
-  b as LinkButton,
+  s as Link,
+  S as LinkButton,
   O as Logo,
-  W as NotFound,
+  Y as NotFound,
   q as Pricing,
   T as QuantityInput,
-  l as Root,
+  c as Root,
   Q as SearchBox,
   g as Separator,
-  L as Text,
+  B as Text,
   G as configureImage,
-  F as configureLink,
-  y as linkClassName,
-  N as routerOverride
+  A as configureLink,
+  b as linkClassName,
+  F as routerOverride
 };

package/dist/main.d.ts

@@ -25,6 +25,5 @@ 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/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface Breadcrumb {
+    href: string;
+    label: string | React.ReactElement;
+}
+export interface BreadcrumbProps {
+    breadcrumbs: Breadcrumb[];
+}
+export declare function Breadcrumbs({ breadcrumbs }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/molecules/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,29 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import s from "react";
+import { Link as c } from "../../atoms/Link/Link.js";
+import '../../assets/Breadcrumbs.css';const r = "_nav_5oobe_1", _ = "_crumb_5oobe_8", h = "_final_5oobe_13", l = {
+  nav: r,
+  crumb: _,
+  final: h
+};
+function g({
+  breadcrumbs: n
+}) {
+  return !n || (n == null ? void 0 : n.length) === 0 ? null : /* @__PURE__ */ t("nav", { className: l.nav, children: n.map((o, e) => {
+    const a = e === n.length - 1, i = a && n.length > 1;
+    return /* @__PURE__ */ f(s.Fragment, { children: [
+      /* @__PURE__ */ t(
+        c,
+        {
+          href: o.href,
+          className: `${l.crumb} ${i ? l.final : ""}`,
+          children: o.label
+        }
+      ),
+      !a && /* @__PURE__ */ t("span", { children: "/" })
+    ] }, `breadcrumb.${e}`);
+  }) });
+}
+export {
+  g as Breadcrumbs
+};

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

@@ -0,0 +1,32 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Breadcrumbs } from './Breadcrumbs';
+declare const meta: {
+    title: string;
+    component: typeof Breadcrumbs;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        breadcrumbs: {
+            control: {
+                type: "object";
+            };
+            description: string;
+        };
+    };
+    args: {
+        breadcrumbs: {
+            href: string;
+            label: string;
+        }[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleCrumb: Story;
+export declare const Empty: Story;
+export declare const WithElementLabel: Story;
+export declare const ManyCrumbs: Story;
+export declare const Playground: Story;

package/dist/molecules/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,69 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Breadcrumbs as a } from "./Breadcrumbs.js";
+const l = {
+  title: "Case Parts/Molecules/Breadcrumbs",
+  component: a,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    breadcrumbs: {
+      control: { type: "object" },
+      description: "Array of breadcrumb items: { href, label }"
+    }
+  },
+  args: {
+    breadcrumbs: [
+      { href: "/", label: "Home" },
+      { href: "/products", label: "Products" },
+      { href: "/products/widgets", label: "Widgets" }
+    ]
+  }
+}, o = {
+  render: (r) => /* @__PURE__ */ e(a, { ...r })
+}, b = {
+  args: {
+    breadcrumbs: [{ href: "/", label: "Home" }]
+  }
+}, c = {
+  args: {
+    breadcrumbs: []
+  },
+  name: "Empty"
+}, n = {
+  args: {
+    breadcrumbs: [
+      { href: "/", label: /* @__PURE__ */ e("span", { style: { fontWeight: 600 }, children: "Home" }) },
+      { href: "/team", label: /* @__PURE__ */ e("em", { children: "Team" }) },
+      { href: "/team/engineering", label: /* @__PURE__ */ e("strong", { children: "Engineering" }) }
+    ]
+  }
+}, m = {
+  args: {
+    breadcrumbs: [
+      { href: "/", label: "Home" },
+      { href: "/section", label: "Section" },
+      { href: "/section/sub", label: "Sub" },
+      { href: "/section/sub/topic", label: "Topic" },
+      { href: "/section/sub/topic/deep", label: "Deep" },
+      { href: "/section/sub/topic/deep/final", label: "Final" }
+    ]
+  }
+}, d = {
+  render: (r) => /* @__PURE__ */ e(a, { ...r }),
+  args: {
+    breadcrumbs: [
+      { href: "/", label: "Home" },
+      { href: "/products", label: "Products" },
+      { href: "/products/widgets", label: "Widgets" }
+    ]
+  }
+};
+export {
+  o as Default,
+  c as Empty,
+  m as ManyCrumbs,
+  d as Playground,
+  b as SingleCrumb,
+  n as WithElementLabel,
+  l as default
+};

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

@@ -1,12 +1,12 @@
 export interface Category {
     id: string | number;
-    label: string;
+    label: string | React.ReactElement;
     route: string;
 }
-export interface MainCategory extends Category {
+export interface CategoryWithChildren extends Category {
     children: Category[];
     showChevron?: boolean;
 }
 export declare function CategoryNav({ categories, }: {
-    categories?: MainCategory[];
+    categories?: CategoryWithChildren[];
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/molecules/CategoryNav/CategoryNav.js

@@ -5,10 +5,10 @@ import { Link as s } from "../../atoms/Link/Link.js";
 import { Icon as m } from "../../atoms/Icon/Icon.js";
 import { getHideAtStyles as c } from "../../atoms/HideAt.js";
 import { Tooltip as d } from "../../atoms/Tooltip/Tooltip.js";
-import '../../assets/CategoryNav.css';const h = "_categories_1of98_1", f = "_category_1of98_17", u = "_submenuTooltip_1of98_43", o = {
+import '../../assets/CategoryNav.css';const h = "_categories_1of98_1", f = "_category_1of98_17", p = "_submenuTooltip_1of98_43", o = {
   categories: h,
   category: f,
-  submenuTooltip: u
+  submenuTooltip: p
 };
 function z({
   categories: l
@@ -17,6 +17,8 @@ function z({
     (i) => i.children.length > 0 ? /* @__PURE__ */ e(
       d,
       {
+        openDelay: 180,
+        closeDelay: 0,
         trigger: /* @__PURE__ */ e("li", { className: o.category, tabIndex: 0, children: /* @__PURE__ */ t(s, { href: i.route, children: [
           /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: i.label }),
           i.showChevron && /* @__PURE__ */ e(

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

@@ -1,17 +1,9 @@
 import { default as React } from 'react';
 import { CartPropsBase, ShoppingCart, ShoppingCartHandle } from '../../molecules/Cart/Cart';
 import { AccountProps } from '../../molecules/Account/Account';
-export interface Category {
-    id: string | number;
-    label: string;
-    route: string;
-}
-export interface MainCategory extends Category {
-    children: Category[];
-    showChevron?: boolean;
-}
+import { CategoryWithChildren } from '../../molecules/CategoryNav/CategoryNav';
 export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDivElement>, Pick<AccountProps, "account"> {
-    categories?: MainCategory[];
+    categories?: CategoryWithChildren[];
     homeRoute: string;
     faqRoute: string;
     byModelSerialRoute: string;

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

@@ -1,8 +1,8 @@
-import { jsxs as s, Fragment as u, jsx as c } from "react/jsx-runtime";
+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 = {
+const I = {
   title: "Case Parts/Organisms/MainNav",
   component: d,
   parameters: {
@@ -10,7 +10,7 @@ const g = {
     layout: "fullscreen"
   }
   // tags: ["autodocs"],
-}, l = [
+}, o = [
   {
     id: 0,
     label: "Shop by Brands",
@@ -38,19 +38,34 @@ const g = {
     id: 2,
     label: "Hardware",
     route: "#",
-    children: []
+    children: [
+      { id: 29, label: "Hardware1", route: "/anthony" },
+      { id: 30, label: "Hardware2", route: "/beverage" },
+      { id: 31, label: "Hardwaren3", route: "/continental" },
+      { id: 32, label: "Hardware4", route: "/delfield" }
+    ]
   },
   {
     id: 3,
     label: "Refrigeration",
     route: "#",
-    children: []
+    children: [
+      { id: 33, label: "Refrigeration1", route: "/anthony" },
+      { id: 34, label: "Refrigeration2", route: "/beverage" },
+      { id: 34, label: "Refrigeration3", route: "/continental" },
+      { id: 35, label: "Refrigeration4", route: "/delfield" }
+    ]
   },
   {
     id: 4,
     label: "Controls",
     route: "#",
-    children: []
+    children: [
+      { id: 36, label: "Controls1", route: "/anthony" },
+      { id: 37, label: "Controls2", route: "/beverage" },
+      { id: 38, label: "Controls3", route: "/continental" },
+      { id: 39, label: "Controls4", route: "/delfield" }
+    ]
   },
   {
     id: 5,
@@ -111,20 +126,20 @@ function y(e) {
   ).toFixed(2)}`;
 }
 const n = (e) => {
-  const [o, t] = b(!1);
-  return /* @__PURE__ */ s(u, { children: [
+  const [l, t] = b(!1);
+  return /* @__PURE__ */ u(s, { children: [
     /* @__PURE__ */ c(
       d,
       {
         ...e,
-        open: o,
+        open: l,
         onCartClick: () => t((i) => !i)
       }
     ),
     /* @__PURE__ */ c(
       m,
       {
-        open: o,
+        open: l,
         onClose: () => t(!1),
         cart: e.cart,
         subtotal: y(e.cart),
@@ -157,10 +172,10 @@ const n = (e) => {
     onCartClick: () => {
     },
     // placeholder required by component
-    categories: l
+    categories: o
   },
   render: n
-}, k = {
+}, C = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
     cart: r,
@@ -179,10 +194,10 @@ const n = (e) => {
     },
     onCartClick: () => {
     },
-    categories: l
+    categories: o
   },
   render: n
-}, C = {
+}, f = {
   args: {
     cart: r,
     homeRoute: "/",
@@ -200,13 +215,13 @@ const n = (e) => {
     },
     onCartClick: () => {
     },
-    categories: l
+    categories: o
   },
   render: n
 };
 export {
   S as Authenticated,
-  C as Unauthenticated,
-  k as WithCartItems,
-  g as default
+  f as Unauthenticated,
+  C as WithCartItems,
+  I as default
 };

package/dist/organisms/Product/Product.js

@@ -1,76 +1,76 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { Image as T } from "../../atoms/Image/Image.js";
 import { Link as g } from "../../atoms/Link/Link.js";
-import { Text as e } from "../../atoms/Text/Text.js";
-import { Availability as w } from "../../molecules/Availability/Availability.js";
-import { Pricing as v } from "../../molecules/Pricing/Pricing.js";
-import { AddToCart as x } from "../../molecules/AddToCart/AddToCart.js";
-import { Icon as L } from "../../atoms/Icon/Icon.js";
-import { c as I } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Product.css';const P = "_productCard_10edn_1", R = "_productInformation_10edn_22", $ = "_purchaseInformation_10edn_29", A = "_addToCart_10edn_37", D = "_addToCartButton_10edn_40", j = "_partNumber_10edn_48", k = "_partNumberLabel_10edn_55", y = "_productTile_10edn_59", q = "_topRow_10edn_80", E = "_productData_10edn_111", F = "_purchase_10edn_29", G = "_attributeContainer_10edn_148", r = {
-  productCard: P,
-  productInformation: R,
-  purchaseInformation: $,
-  addToCart: A,
-  addToCartButton: D,
-  partNumber: j,
-  partNumberLabel: k,
-  productTile: y,
+import { Text as o } from "../../atoms/Text/Text.js";
+import { Availability as y } from "../../molecules/Availability/Availability.js";
+import { Pricing as w } from "../../molecules/Pricing/Pricing.js";
+import { AddToCart as v } from "../../molecules/AddToCart/AddToCart.js";
+import { Icon as B } from "../../atoms/Icon/Icon.js";
+import { c as x } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Product.css';const L = "_productCard_15dy7_1", P = "_productInformation_15dy7_22", R = "_purchaseInformation_15dy7_29", $ = "_addToCart_15dy7_37", A = "_addToCartButton_15dy7_40", D = "_partNumber_15dy7_48", j = "_partNumberLabel_15dy7_55", k = "_productTile_15dy7_59", q = "_topRow_15dy7_80", E = "_productData_15dy7_111", F = "_purchase_15dy7_29", G = "_attributeContainer_15dy7_148", r = {
+  productCard: L,
+  productInformation: P,
+  purchaseInformation: R,
+  addToCart: $,
+  addToCartButton: A,
+  partNumber: D,
+  partNumberLabel: j,
+  productTile: k,
   topRow: q,
   productData: E,
   purchase: F,
   attributeContainer: G
 };
 function Z({
-  productView: z,
+  productView: I,
   itemKey: s,
-  partNumber: o,
+  partNumber: d,
   productDescription: l,
   availDescription: m,
-  availId: d,
+  availId: e,
   contactHref: u,
   contactLinkBehavior: h,
   productHref: p,
   priceLabel: _,
-  price: n,
+  price: i,
   imgSrc: N,
   attributes: c,
   className: b,
   onAddToCart: f,
   onClose: C,
-  ...B
+  ...z
 }) {
-  return z === "Card" ? /* @__PURE__ */ a("div", { className: I(r.productCard, b), children: [
+  return I === "Card" ? /* @__PURE__ */ a("div", { className: x(r.productCard, b), children: [
     /* @__PURE__ */ t(
       T,
       {
         src: N,
-        alt: `${o} product image`,
-        height: 116,
-        width: 116
+        alt: `${d} product image`,
+        height: 96,
+        width: 96
       }
     ),
     /* @__PURE__ */ a("div", { className: r.productInformation, children: [
       /* @__PURE__ */ t(g, { href: p, children: l }),
       /* @__PURE__ */ a("div", { className: r.partNumber, children: [
-        /* @__PURE__ */ t(e, { size: "sm", className: r.partNumberLabel, children: "Part #" }),
-        /* @__PURE__ */ t(e, { size: "sm", weight: "semibold", children: o })
+        /* @__PURE__ */ t(o, { size: "sm", className: r.partNumberLabel, children: "Part #" }),
+        /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: d })
       ] })
     ] }),
     /* @__PURE__ */ a("div", { className: r.purchaseInformation, children: [
-      d && /* @__PURE__ */ t(
-        w,
+      e && /* @__PURE__ */ t(
+        y,
         {
-          availId: d,
+          availId: e,
           availDescription: m,
           contactHref: u,
           contactLinkBehavior: h
         }
       ),
-      n && /* @__PURE__ */ t(v, { pricingLabel: _, price: n })
+      i && /* @__PURE__ */ t(w, { pricingLabel: _, price: i })
     ] }),
     /* @__PURE__ */ t(
-      x,
+      v,
       {
         itemKey: s,
         onAdd: f,
@@ -80,12 +80,12 @@ function Z({
         buttonDoneText: ""
       }
     )
-  ] }) : /* @__PURE__ */ a("div", { className: I(r.productTile, b), ...B, children: [
+  ] }) : /* @__PURE__ */ a("div", { className: x(r.productTile, b), ...z, children: [
     /* @__PURE__ */ t(
       T,
       {
         src: N,
-        alt: `${o} product image`,
+        alt: `${d} product image`,
         height: 108,
         width: 108
       }
@@ -95,34 +95,34 @@ function Z({
         /* @__PURE__ */ a("div", { className: r.productInformation, children: [
           /* @__PURE__ */ t(g, { href: p, children: l }),
           /* @__PURE__ */ a("div", { className: r.partNumber, children: [
-            /* @__PURE__ */ t(e, { size: "sm", className: r.partNumberLabel, children: "Part #" }),
-            /* @__PURE__ */ t(e, { size: "sm", weight: "semibold", children: o })
+            /* @__PURE__ */ t(o, { size: "sm", className: r.partNumberLabel, children: "Part #" }),
+            /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: d })
           ] })
         ] }),
-        C && /* @__PURE__ */ t("button", { onClick: () => C(s), children: /* @__PURE__ */ t(L, { size: "sm", iconKey: "fa-light fa-xmark" }) })
+        C && /* @__PURE__ */ t("button", { onClick: () => C(s), children: /* @__PURE__ */ t(B, { size: "sm", iconKey: "fa-light fa-xmark" }) })
       ] }),
       /* @__PURE__ */ a("div", { className: r.purchase, children: [
         /* @__PURE__ */ a("div", { className: r.purchaseInformation, children: [
-          d && /* @__PURE__ */ t(
-            w,
+          e && /* @__PURE__ */ t(
+            y,
             {
-              availId: d,
+              availId: e,
               availDescription: m,
               contactHref: u,
               contactLinkBehavior: h
             }
           ),
-          n && /* @__PURE__ */ t(v, { pricingLabel: _, price: n })
+          i && /* @__PURE__ */ t(w, { pricingLabel: _, price: i })
         ] }),
-        /* @__PURE__ */ t(x, { itemKey: s, onAdd: f, className: r.addToCart, addButtonClassName: r.addToCartButton })
+        /* @__PURE__ */ t(v, { itemKey: s, onAdd: f, className: r.addToCart, addButtonClassName: r.addToCartButton })
       ] }),
-      c && c.length > 0 && /* @__PURE__ */ t("ul", { className: r.attributeContainer, children: c.map((i) => /* @__PURE__ */ a("li", { children: [
-        /* @__PURE__ */ a(e, { size: "xs", weight: "light", children: [
-          i.label,
+      c && c.length > 0 && /* @__PURE__ */ t("ul", { className: r.attributeContainer, children: c.map((n) => /* @__PURE__ */ a("li", { children: [
+        /* @__PURE__ */ a(o, { size: "xs", weight: "light", children: [
+          n.label,
           ":"
         ] }),
-        /* @__PURE__ */ t(e, { size: "xs", weight: "semibold", children: i.value })
-      ] }, `${i.label}.${i.value}`)) })
+        /* @__PURE__ */ t(o, { size: "xs", weight: "semibold", children: n.value })
+      ] }, `${n.label}.${n.value}`)) })
     ] })
   ] });
 }

package/package.json

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