@caseparts-org/caseblocks 0.0.98 → 0.0.100

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/atoms/HorizontalScroll/HorizontalScroll.d.ts

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

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