@caseparts-org/caseblocks 0.0.154 → 0.0.156

package/dist/Cart.module-gkb4IOVS.js

@@ -0,0 +1,19 @@
+import './assets/Cart.css';const t = "_cartIconButton_1dh0n_2", n = "_count_1dh0n_9", o = "_cartContainer_1dh0n_24", e = "_headerWrapper_1dh0n_35", _ = "_header_1dh0n_35", c = "_cartItems_1dh0n_53", a = "_topRow_1dh0n_78", r = "_itemInfo_1dh0n_84", s = "_purchaseInformation_1dh0n_89", h = "_itemManagement_1dh0n_96", m = "_removeItem_1dh0n_114", d = "_noItems_1dh0n_124", u = "_subtotal_1dh0n_131", I = "_checkoutButton_1dh0n_138", p = {
+  cartIconButton: t,
+  count: n,
+  cartContainer: o,
+  headerWrapper: e,
+  header: _,
+  cartItems: c,
+  topRow: a,
+  itemInfo: r,
+  purchaseInformation: s,
+  itemManagement: h,
+  removeItem: m,
+  noItems: d,
+  subtotal: u,
+  checkoutButton: I
+};
+export {
+  p as s
+};

package/dist/assets/Cart.css

@@ -1 +1 @@
-._cartIconButton_pkqoj_2{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_pkqoj_9{position:absolute;top:0;left:14px;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_pkqoj_24{height:100vh;width:100%;min-width:320px;max-width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto auto;gap:var(--spacing-1);padding:var(--spacing-1)}._header_pkqoj_35{display:flex;flex-direction:column;align-items:flex-start}._cartItems_pkqoj_40{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_pkqoj_40 ul{margin:0;padding:0}._cartItems_pkqoj_40 li{display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-0-5);align-items:center;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border-bottom:1px solid var(--color-neutrals-neutral-2)}._cartItems_pkqoj_40 li:first-of-type{border-top:1px solid var(--color-neutrals-neutral-2)}._topRow_pkqoj_65{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}._itemInfo_pkqoj_71{display:flex;flex-direction:column;align-items:flex-start}._purchaseInformation_pkqoj_76{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._itemManagement_pkqoj_83{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-spacing-3xs)}._cartItems_pkqoj_40 li p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._cartItems_pkqoj_40 img{height:40px;width:40px;object-fit:contain}._removeItem_pkqoj_101{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;width:min-content;height:min-content}._noItems_pkqoj_111{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_pkqoj_118{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}._checkoutButton_pkqoj_125{width:100%}
+._cartIconButton_1dh0n_2{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_1dh0n_9{position:absolute;top:0;left:14px;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_1dh0n_24{height:100vh;width:100%;min-width:320px;max-width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto auto;gap:var(--spacing-1);padding:var(--spacing-1)}._headerWrapper_1dh0n_35{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._headerWrapper_1dh0n_35>button{padding:0;margin:0;background-color:transparent;border:none}._header_1dh0n_35{display:flex;flex-direction:column;align-items:flex-start;width:100%}._cartItems_1dh0n_53{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_1dh0n_53 ul{margin:0;padding:0}._cartItems_1dh0n_53 li{display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-0-5);align-items:center;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border-bottom:1px solid var(--color-neutrals-neutral-2)}._cartItems_1dh0n_53 li:first-of-type{border-top:1px solid var(--color-neutrals-neutral-2)}._topRow_1dh0n_78{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}._itemInfo_1dh0n_84{display:flex;flex-direction:column;align-items:flex-start}._purchaseInformation_1dh0n_89{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._itemManagement_1dh0n_96{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-spacing-3xs)}._cartItems_1dh0n_53 li p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._cartItems_1dh0n_53 img{height:40px;width:40px;object-fit:contain}._removeItem_1dh0n_114{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;width:min-content;height:min-content}._noItems_1dh0n_124{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_1dh0n_131{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}._checkoutButton_1dh0n_138{width:100%}

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

@@ -13,6 +13,7 @@ export interface HorizontalScrollProps extends PropsWithChildren, HideAtProps {
     headerClassName?: string;
     showIndicators?: boolean;
     hideHeader?: boolean;
+    wheelActivationDelay?: number;
 }
 export declare function HorizontalScroll({ className, childrenContainerClassName, childrenSpacing, showScrollbar, children, caption, scrollStep, leftButtonContent, rightButtonContent, headerContainerClassName, headerClassName, showIndicators, hideHeader, // new default
-hideAt }: HorizontalScrollProps): import("react/jsx-runtime").JSX.Element;
+wheelActivationDelay, hideAt }: HorizontalScrollProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/HorizontalScroll/HorizontalScroll.js

@@ -1,152 +1,160 @@
-import { jsxs as d, jsx as l, Fragment as K } from "react/jsx-runtime";
-import { useRef as g, useState as h, useEffect as m } from "react";
-import { Icon as S } from "../Icon/Icon.js";
-import { Text as q } from "../Text/Text.js";
-import { c as i } from "../../clsx-OuTLNxxd.js";
-import { getHideAtStyles as G } from "../HideAt.js";
-import '../../assets/HorizontalScroll.css';const I = "_root_1565i_1", U = "_header_1565i_5", $ = "_caption_1565i_13", J = "_controls_1565i_21", Q = "_controlBtn_1565i_26", Z = "_container_1565i_45", tt = "_dragging_1565i_58", et = "_noOverflow_1565i_61", rt = "_viewport_1565i_74", nt = "_indicator_1565i_77", ot = "_left_1565i_87", lt = "_right_1565i_93", it = "_hidden_1565i_99", e = {
-  root: I,
-  header: U,
-  caption: $,
-  controls: J,
-  controlBtn: Q,
-  container: Z,
-  dragging: tt,
-  noOverflow: et,
+import { jsxs as d, jsx as o, Fragment as U } from "react/jsx-runtime";
+import { useRef as _, useState as m, useEffect as b } from "react";
+import { Icon as W } from "../Icon/Icon.js";
+import { Text as $ } from "../Text/Text.js";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as J } from "../HideAt.js";
+import '../../assets/HorizontalScroll.css';const Q = "_root_1565i_1", Z = "_header_1565i_5", ee = "_caption_1565i_13", te = "_controls_1565i_21", re = "_controlBtn_1565i_26", ne = "_container_1565i_45", oe = "_dragging_1565i_58", ie = "_noOverflow_1565i_61", le = "_viewport_1565i_74", ce = "_indicator_1565i_77", se = "_left_1565i_87", ae = "_right_1565i_93", de = "_hidden_1565i_99", t = {
+  root: Q,
+  header: Z,
+  caption: ee,
+  controls: te,
+  controlBtn: re,
+  container: ne,
+  dragging: oe,
+  noOverflow: ie,
   "scrollVisibility--false": "_scrollVisibility--false_1565i_66",
-  viewport: rt,
-  indicator: nt,
-  left: ot,
-  right: lt,
-  hidden: it
+  viewport: le,
+  indicator: ce,
+  left: se,
+  right: ae,
+  hidden: de
 };
-function _t({
-  className: N,
-  childrenContainerClassName: E,
-  childrenSpacing: C,
-  showScrollbar: D = !1,
-  children: W,
-  caption: f,
-  scrollStep: p = 160,
-  leftButtonContent: z,
-  rightButtonContent: O,
-  headerContainerClassName: B,
-  headerClassName: M,
-  showIndicators: A = !0,
-  hideHeader: P = !1,
+function be({
+  className: z,
+  childrenContainerClassName: A,
+  childrenSpacing: D,
+  showScrollbar: O = !1,
+  children: P,
+  caption: u,
+  scrollStep: L = 160,
+  leftButtonContent: B,
+  rightButtonContent: M,
+  headerContainerClassName: R,
+  headerClassName: X,
+  showIndicators: k = !0,
+  hideHeader: H = !1,
   // new default
-  hideAt: R
+  wheelActivationDelay: x = 250,
+  hideAt: T
 }) {
-  const n = g(null), [b, x] = h(!1), c = g({ x: 0, scroll: 0 }), u = g(!1), X = 5, [_, k] = h(!0), [v, H] = h(!1), [s, T] = h(!1), a = () => {
-    const t = n.current;
-    if (!t) return;
-    const r = t.scrollWidth - t.clientWidth;
-    T(t.scrollWidth > t.clientWidth + 1), k(t.scrollLeft <= 0), H(t.scrollLeft >= r - 1);
-  }, V = (t) => {
-    !n.current || !s || (x(!0), c.current.x = t.clientX, c.current.scroll = n.current.scrollLeft, u.current = !1);
-  }, Y = (t) => {
-    if (!b || !n.current) return;
-    const r = t.clientX - c.current.x;
-    n.current.scrollLeft = c.current.scroll - r, Math.abs(t.clientX - c.current.x) > X && (u.current = !0);
+  const n = _(null), [E, w] = m(!1), c = _({ x: 0, scroll: 0 }), f = _(!1), h = _(null), V = 5, [g, Y] = m(!0), [p, j] = m(!1), [s, F] = m(!1), a = () => {
+    const e = n.current;
+    if (!e) return;
+    const r = e.scrollWidth - e.clientWidth;
+    F(e.scrollWidth > e.clientWidth + 1), Y(e.scrollLeft <= 0), j(e.scrollLeft >= r - 1);
+  }, K = (e) => {
+    !n.current || !s || (w(!0), c.current.x = e.clientX, c.current.scroll = n.current.scrollLeft, f.current = !1);
+  }, q = (e) => {
+    if (!E || !n.current) return;
+    const r = e.clientX - c.current.x;
+    n.current.scrollLeft = c.current.scroll - r, Math.abs(e.clientX - c.current.x) > V && (f.current = !0);
   }, y = () => {
-    n.current && x(!1);
-  }, j = (t) => {
-    u.current && (t.preventDefault(), t.stopPropagation(), u.current = !1);
-  }, w = (t) => {
+    n.current && w(!1);
+  }, G = (e) => {
+    f.current && (e.preventDefault(), e.stopPropagation(), f.current = !1);
+  }, S = (e) => {
     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(a);
+    const v = Math.max(0, Math.min(r.scrollLeft + e, r.scrollWidth - r.clientWidth));
+    r.scrollTo({ left: v, behavior: "smooth" }), requestAnimationFrame(a);
   };
-  m(() => {
-    const t = n.current;
-    if (!t) return;
-    const r = (o) => {
-      if (!(t.scrollWidth > t.clientWidth)) return;
-      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();
+  b(() => {
+    const e = n.current;
+    if (!e) return;
+    const r = () => {
+      h.current = performance.now();
+    }, v = () => {
+      h.current = null;
+    }, N = (i) => {
+      if (!(e.scrollWidth > e.clientWidth) || (h.current == null ? 0 : performance.now() - h.current) < x)
+        return;
+      const C = Math.abs(i.deltaY) >= Math.abs(i.deltaX) && i.deltaY !== 0 ? i.deltaY : i.deltaX;
+      C !== 0 ? (i.preventDefault(), e.scrollLeft += C) : i.preventDefault();
     };
-    return t.addEventListener("wheel", r, { passive: !1 }), () => t.removeEventListener("wheel", r);
-  }, []), m(() => {
-    const t = n.current;
-    if (t)
-      return a(), t.addEventListener("scroll", a), () => t.removeEventListener("scroll", a);
-  }, []), m(() => {
-    const t = n.current;
-    if (!t || typeof ResizeObserver > "u") return;
+    return e.addEventListener("pointerenter", r), e.addEventListener("pointerleave", v), e.addEventListener("wheel", N, { passive: !1 }), () => {
+      e.removeEventListener("pointerenter", r), e.removeEventListener("pointerleave", v), e.removeEventListener("wheel", N);
+    };
+  }, [x]), b(() => {
+    const e = n.current;
+    if (e)
+      return a(), e.addEventListener("scroll", a), () => e.removeEventListener("scroll", a);
+  }, []), b(() => {
+    const e = n.current;
+    if (!e || typeof ResizeObserver > "u") return;
     const r = new ResizeObserver(() => a());
-    return r.observe(t), () => r.disconnect();
+    return r.observe(e), () => r.disconnect();
   }, []);
-  const F = () => f == null ? null : typeof f == "string" ? /* @__PURE__ */ l(q, { variant: "display", size: "2xl", className: i(M, e.caption), children: f }) : f;
-  return /* @__PURE__ */ d("div", { className: i(e.root, N, G(R)), children: [
-    !P && /* @__PURE__ */ d("div", { className: i(B, e.header), children: [
-      F(),
-      s && /* @__PURE__ */ d("div", { className: e.controls, children: [
-        /* @__PURE__ */ l(
+  const I = () => u == null ? null : typeof u == "string" ? /* @__PURE__ */ o($, { variant: "display", size: "2xl", className: l(X, t.caption), children: u }) : u;
+  return /* @__PURE__ */ d("div", { className: l(t.root, z, J(T)), children: [
+    !H && /* @__PURE__ */ d("div", { className: l(R, t.header), children: [
+      I(),
+      s && /* @__PURE__ */ d("div", { className: t.controls, children: [
+        /* @__PURE__ */ o(
           "button",
           {
             type: "button",
-            className: e.controlBtn,
-            onClick: () => w(-p),
+            className: t.controlBtn,
+            onClick: () => S(-L),
             "aria-label": "Scroll left",
-            disabled: _,
-            "aria-disabled": _,
-            children: z ?? /* @__PURE__ */ l(S, { iconKey: "fa-regular fa-chevron-left", size: "sm" })
+            disabled: g,
+            "aria-disabled": g,
+            children: B ?? /* @__PURE__ */ o(W, { iconKey: "fa-regular fa-chevron-left", size: "sm" })
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ o(
           "button",
           {
             type: "button",
-            className: e.controlBtn,
-            onClick: () => w(p),
+            className: t.controlBtn,
+            onClick: () => S(L),
             "aria-label": "Scroll right",
-            disabled: v,
-            "aria-disabled": v,
-            children: O ?? /* @__PURE__ */ l(S, { iconKey: "fa-regular fa-chevron-right", size: "sm" })
+            disabled: p,
+            "aria-disabled": p,
+            children: M ?? /* @__PURE__ */ o(W, { iconKey: "fa-regular fa-chevron-right", size: "sm" })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ d("div", { className: e.viewport, children: [
-      /* @__PURE__ */ l(
+    /* @__PURE__ */ d("div", { className: t.viewport, children: [
+      /* @__PURE__ */ o(
         "div",
         {
           ref: n,
-          style: { gap: C ?? "var(--spacing-spacing-3xs)" },
-          className: i(
-            e.container,
-            e[`scrollVisibility--${D}`],
-            b ? e.dragging : "",
-            !s && e.noOverflow,
-            E
+          style: { gap: D ?? "var(--spacing-spacing-3xs)" },
+          className: l(
+            t.container,
+            t[`scrollVisibility--${O}`],
+            E ? t.dragging : "",
+            !s && t.noOverflow,
+            A
           ),
-          onPointerDown: V,
-          onPointerMove: Y,
+          onPointerDown: K,
+          onPointerMove: q,
           onPointerLeave: y,
           onPointerUp: y,
-          onClickCapture: j,
-          children: W
+          onClickCapture: G,
+          children: P
         }
       ),
-      A && /* @__PURE__ */ d(K, { children: [
-        /* @__PURE__ */ l(
+      k && /* @__PURE__ */ d(U, { children: [
+        /* @__PURE__ */ o(
           "div",
           {
-            className: i(
-              e.indicator,
-              e.left,
-              (_ || !s) && e.hidden
+            className: l(
+              t.indicator,
+              t.left,
+              (g || !s) && t.hidden
             )
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: i(
-              e.indicator,
-              e.right,
-              (v || !s) && e.hidden
+            className: l(
+              t.indicator,
+              t.right,
+              (p || !s) && t.hidden
             )
           }
         )
@@ -155,5 +163,5 @@ function _t({
   ] });
 }
 export {
-  _t as HorizontalScroll
+  be as HorizontalScroll
 };

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

@@ -9,6 +9,7 @@ interface DemoArgs {
     showIndicators: boolean;
     hideHeader: boolean;
     childrenSpacing: number;
+    wheelActivationDelay: number;
 }
 type StoryArgs = DemoArgs;
 declare const meta: Meta<StoryArgs>;

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

@@ -1,8 +1,8 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { HorizontalScroll as r } from "./HorizontalScroll.js";
-const u = {
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { HorizontalScroll as i } from "./HorizontalScroll.js";
+const g = {
   title: "Case Parts/Atoms/HorizontalScroll",
-  component: r,
+  component: i,
   tags: ["autodocs"],
   parameters: {
     layout: "fullscreen",
@@ -14,6 +14,7 @@ A drag + wheel enabled horizontal scrolling container.
 Features:
 - Pointer drag (mouse / touch) horizontal scrolling.
 - Converts vertical mouse wheel motion to horizontal scrolling.
+- Small hover delay before wheel is captured for horizontal scrolling.
 - Optional native scrollbar visibility via showScrollbar.
 
 Use for carousels, chip lists, card rails, horizontally overflowing panels.
@@ -57,6 +58,10 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     childrenSpacing: {
       control: { type: "number", min: 0, max: 64, step: 2 },
       description: "Gap between direct children (flex gap)."
+    },
+    wheelActivationDelay: {
+      control: { type: "number", min: 0, max: 1e3, step: 25 },
+      description: "Delay (ms) before mouse wheel is captured for horizontal scroll after hover."
     }
   },
   args: {
@@ -70,19 +75,20 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     // new default
     hideHeader: !1,
     // new default
-    childrenSpacing: 12
+    childrenSpacing: 12,
     // new default
+    wheelActivationDelay: 250
   }
-}, n = /* @__PURE__ */ o("style", { children: `
+}, t = /* @__PURE__ */ o("style", { children: `
       .horizontalDemoScroll {
         touch-action: none; /* ensure pointer events for horizontal drag */
       }
       .horizontalDemoScroll a {
         -webkit-user-drag: none; /* Safari/Chrome: prevent ghost dragging of link */
       }
-    ` }), t = (e) => {
-  const { itemCount: d, itemWidth: c, itemHeight: l, rounded: s, gradient: h } = e;
-  return Array.from({ length: d }, (p, m) => {
+    ` }), n = (e) => {
+  const { itemCount: c, itemWidth: d, itemHeight: l, rounded: h, gradient: s } = e;
+  return Array.from({ length: c }, (p, m) => {
     const a = m + 1;
     return /* @__PURE__ */ o(
       "a",
@@ -91,10 +97,10 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         draggable: !1,
         style: {
           flex: "0 0 auto",
-          width: c,
+          width: d,
           height: l,
-          borderRadius: s ? 8 : 0,
-          background: h ? "linear-gradient(135deg,#4F46E5,#6366F1)" : "#4F46E5",
+          borderRadius: h ? 8 : 0,
+          background: s ? "linear-gradient(135deg,#4F46E5,#6366F1)" : "#4F46E5",
           color: "#fff",
           display: "flex",
           alignItems: "center",
@@ -109,63 +115,66 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
       a
     );
   });
-}, w = {
+}, S = {
   name: "Playground",
-  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
-    n,
+  render: (e) => /* @__PURE__ */ r("div", { style: { padding: 24 }, children: [
+    t,
     /* @__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,
+      i,
       {
         className: "horizontalDemoScroll",
         showScrollbar: e.showScrollbar,
         showIndicators: e.showIndicators,
         hideHeader: e.hideHeader,
         childrenSpacing: e.childrenSpacing,
+        wheelActivationDelay: e.wheelActivationDelay,
         caption: `Playground (${e.itemCount} items)`,
-        children: t(e)
+        children: n(e)
       }
     )
   ] })
-}, b = {
+}, y = {
   args: { showScrollbar: !0 },
-  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
-    n,
+  render: (e) => /* @__PURE__ */ r("div", { style: { padding: 24 }, children: [
+    t,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Scrollbar Visible" }),
     /* @__PURE__ */ o(
-      r,
+      i,
       {
         className: "horizontalDemoScroll",
         showScrollbar: !0,
         showIndicators: e.showIndicators,
         hideHeader: e.hideHeader,
         childrenSpacing: e.childrenSpacing,
+        wheelActivationDelay: e.wheelActivationDelay,
         caption: "Scrollbar Visible",
-        children: t(e)
+        children: n(e)
       }
     )
   ] })
-}, y = {
+}, b = {
   args: {
     itemCount: 40,
     itemWidth: 90,
     itemHeight: 60,
     showScrollbar: !1
   },
-  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
-    n,
+  render: (e) => /* @__PURE__ */ r("div", { style: { padding: 24 }, children: [
+    t,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Dense Small Items" }),
     /* @__PURE__ */ o(
-      r,
+      i,
       {
         className: "horizontalDemoScroll",
         showScrollbar: e.showScrollbar,
         showIndicators: e.showIndicators,
         hideHeader: e.hideHeader,
         childrenSpacing: e.childrenSpacing,
+        wheelActivationDelay: e.wheelActivationDelay,
         caption: `Dense (${e.itemCount} items)`,
-        children: t(e)
+        children: n(e)
       }
     )
   ] })
@@ -176,23 +185,24 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     itemHeight: 160,
     gradient: !1
   },
-  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
-    n,
+  render: (e) => /* @__PURE__ */ r("div", { style: { padding: 24 }, children: [
+    t,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Large Cards" }),
     /* @__PURE__ */ o(
-      r,
+      i,
       {
         className: "horizontalDemoScroll",
         showScrollbar: e.showScrollbar,
         showIndicators: e.showIndicators,
         hideHeader: e.hideHeader,
         childrenSpacing: e.childrenSpacing,
+        wheelActivationDelay: e.wheelActivationDelay,
         caption: "Large Cards",
-        children: t(e)
+        children: n(e)
       }
     )
   ] })
-}, H = {
+}, v = {
   name: "Without Indicators",
   args: {
     showIndicators: !1,
@@ -201,23 +211,24 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     itemHeight: 72,
     childrenSpacing: 12
   },
-  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
-    n,
+  render: (e) => /* @__PURE__ */ r("div", { style: { padding: 24 }, children: [
+    t,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Indicators Disabled" }),
     /* @__PURE__ */ o(
-      r,
+      i,
       {
         className: "horizontalDemoScroll",
         showScrollbar: e.showScrollbar,
         showIndicators: !1,
         hideHeader: e.hideHeader,
         childrenSpacing: e.childrenSpacing,
+        wheelActivationDelay: e.wheelActivationDelay,
         caption: "No Edge Indicators",
-        children: t(e)
+        children: n(e)
       }
     )
   ] })
-}, x = {
+}, H = {
   name: "Header Hidden",
   args: {
     hideHeader: !0,
@@ -226,29 +237,30 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     itemHeight: 70,
     showIndicators: !0
   },
-  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
-    n,
+  render: (e) => /* @__PURE__ */ r("div", { style: { padding: 24 }, children: [
+    t,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Header Hidden" }),
     /* @__PURE__ */ o(
-      r,
+      i,
       {
         className: "horizontalDemoScroll",
         showScrollbar: e.showScrollbar,
         showIndicators: e.showIndicators,
         hideHeader: !0,
         childrenSpacing: e.childrenSpacing,
+        wheelActivationDelay: e.wheelActivationDelay,
         caption: "(Will not render since header hidden)",
-        children: t(e)
+        children: n(e)
       }
     )
   ] })
 };
 export {
-  y as DenseSmallItems,
-  x as HeaderHidden,
+  b as DenseSmallItems,
+  H as HeaderHidden,
   f as LargeCards,
-  w as Playground,
-  b as WithScrollbar,
-  H as WithoutIndicators,
-  u as default
+  S as Playground,
+  y as WithScrollbar,
+  v as WithoutIndicators,
+  g as default
 };

package/dist/molecules/Cart/Cart.js

@@ -2,7 +2,7 @@ import { jsx as a, jsxs as d } from "react/jsx-runtime";
 import l from "react";
 import { Icon as g } from "../../atoms/Icon/Icon.js";
 import { Text as p } from "../../atoms/Text/Text.js";
-import { s as m } from "../../Cart.module-9txlotpz.js";
+import { s as m } from "../../Cart.module-gkb4IOVS.js";
 const S = l.forwardRef(function({
   cart: i,
   open: t = !1,

package/dist/molecules/Cart/CartSlideInPanel.js

@@ -1,86 +1,89 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { SlideInPanel as g } from "../../atoms/SlideInPanel/SlideInPanel.js";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { SlideInPanel as y } from "../../atoms/SlideInPanel/SlideInPanel.js";
 import { Text as n } from "../../atoms/Text/Text.js";
-import { Link as y } from "../../atoms/Link/Link.js";
-import { Button as I } from "../../atoms/Button/Button.js";
-import { Pricing as b } from "../Pricing/Pricing.js";
-import { QuantityInput as N } from "../QuantityInput/QuantityInput.js";
-import { Availability as z } from "../Availability/Availability.js";
-import { Icon as k } from "../../atoms/Icon/Icon.js";
-import { s as r } from "../../Cart.module-9txlotpz.js";
+import { Link as I } from "../../atoms/Link/Link.js";
+import { Button as b } from "../../atoms/Button/Button.js";
+import { Pricing as N } from "../Pricing/Pricing.js";
+import { QuantityInput as z } from "../QuantityInput/QuantityInput.js";
+import { Availability as k } from "../Availability/Availability.js";
+import { Icon as c } from "../../atoms/Icon/Icon.js";
+import { s as r } from "../../Cart.module-gkb4IOVS.js";
 function H({
-  open: m,
-  onClose: o,
-  cart: a,
-  subtotal: l,
-  itemPriceLabel: c,
-  contactHref: d,
-  contactLinkBehavior: h,
-  onItemQtyChange: p,
-  onItemDelete: u,
+  open: o,
+  onClose: l,
+  cart: t,
+  subtotal: m,
+  itemPriceLabel: d,
+  contactHref: h,
+  contactLinkBehavior: p,
+  onItemQtyChange: u,
+  onItemDelete: f,
   onCheckout: v
 }) {
   var s;
-  return a = a || { items: [] }, /* @__PURE__ */ e(
-    g,
+  return t = t || { items: [] }, /* @__PURE__ */ e(
+    y,
     {
       side: "right",
-      open: m,
-      onClose: o,
+      open: o,
+      onClose: l,
       ariaLabel: "Shopping Cart",
-      children: /* @__PURE__ */ t("div", { id: "cart-panel", className: r.cartContainer, children: [
-        /* @__PURE__ */ t("div", { className: r.header, children: [
-          /* @__PURE__ */ e(n, { size: "2xl", children: "Cart" }),
-          /* @__PURE__ */ t(n, { size: "xs", colorToken: "quaternary", children: [
-            (s = a == null ? void 0 : a.items) == null ? void 0 : s.length,
-            " items in your cart"
-          ] })
+      children: /* @__PURE__ */ a("div", { id: "cart-panel", className: r.cartContainer, children: [
+        /* @__PURE__ */ a("div", { className: r.headerWrapper, children: [
+          /* @__PURE__ */ a("div", { className: r.header, children: [
+            /* @__PURE__ */ e(n, { size: "2xl", children: "Cart" }),
+            /* @__PURE__ */ a(n, { size: "xs", colorToken: "quaternary", children: [
+              (s = t == null ? void 0 : t.items) == null ? void 0 : s.length,
+              " items in your cart"
+            ] })
+          ] }),
+          /* @__PURE__ */ e("button", { onClick: l, children: /* @__PURE__ */ e(c, { iconKey: "fa-regular fa-xmark", size: "md" }) })
         ] }),
-        /* @__PURE__ */ e("div", { className: r.cartItems, children: a.items.length > 0 ? /* @__PURE__ */ e("ul", { children: a.items.map((i) => /* @__PURE__ */ t("li", { className: r.cartItem, children: [
+        /* @__PURE__ */ e("div", { className: r.cartItems, children: t.items.length > 0 ? /* @__PURE__ */ e("ul", { children: t.items.map((i) => /* @__PURE__ */ a("li", { className: r.cartItem, children: [
           /* @__PURE__ */ e("img", { src: i.imageUrl, alt: `${i.itemId} product image` }),
-          /* @__PURE__ */ t("div", { children: [
-            /* @__PURE__ */ t("div", { className: r.topRow, children: [
-              /* @__PURE__ */ t("div", { className: r.itemInfo, children: [
-                /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: /* @__PURE__ */ e(y, { href: i.itemHref || `/part/${i.itemId}`, children: i.description }) }),
-                /* @__PURE__ */ t(n, { size: "sm", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ a("div", { className: r.topRow, children: [
+              /* @__PURE__ */ a("div", { className: r.itemInfo, children: [
+                /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: /* @__PURE__ */ e(I, { href: i.itemHref || `/part/${i.itemId}`, children: i.description }) }),
+                /* @__PURE__ */ a(n, { size: "sm", children: [
                   /* @__PURE__ */ e(n, { colorToken: "quaternary", size: "xs", children: i.custom ? "Specs " : "Part # " }),
                   i.itemId
                 ] })
               ] }),
-              /* @__PURE__ */ e("button", { onClick: () => u(i), className: r.removeItem, "aria-label": "Remove item", children: /* @__PURE__ */ e(k, { iconKey: "fa-regular fa-trash", size: "sm" }) })
+              /* @__PURE__ */ e("button", { onClick: () => f(i), className: r.removeItem, "aria-label": "Remove item", children: /* @__PURE__ */ e(c, { iconKey: "fa-regular fa-trash", size: "sm" }) })
             ] }),
-            /* @__PURE__ */ t("div", { className: r.itemManagement, children: [
-              /* @__PURE__ */ t("div", { className: r.purchaseInformation, children: [
+            /* @__PURE__ */ a("div", { className: r.itemManagement, children: [
+              /* @__PURE__ */ a("div", { className: r.purchaseInformation, children: [
                 /* @__PURE__ */ e(
-                  z,
+                  k,
                   {
                     availId: i.availabilityId || "",
                     availDescription: i.availability || "",
-                    contactHref: d || "",
-                    contactLinkBehavior: h || "new-tab"
+                    contactHref: h || "",
+                    contactLinkBehavior: p || "new-tab"
                   }
                 ),
-                /* @__PURE__ */ e(b, { pricingLabel: c || "List Price", price: i.price })
+                /* @__PURE__ */ e(N, { pricingLabel: d || "List Price", price: i.price })
               ] }),
               /* @__PURE__ */ e(
-                N,
+                z,
                 {
                   quantity: i.quantity,
-                  onQuantityChange: (f) => p(i, f),
+                  onQuantityChange: (g) => u(i, g),
                   size: "sm"
                 }
               )
             ] })
           ] })
         ] }, i.id)) }) : /* @__PURE__ */ e("div", { className: r.noItems, children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
-        l && /* @__PURE__ */ t("div", { className: r.subtotal, children: [
+        m && /* @__PURE__ */ a("div", { className: r.subtotal, children: [
           /* @__PURE__ */ e(n, { size: "md", weight: "semibold", children: "Subtotal" }),
-          /* @__PURE__ */ e(n, { size: "md", weight: "semibold", children: l })
+          /* @__PURE__ */ e(n, { size: "md", weight: "semibold", children: m })
         ] }),
         /* @__PURE__ */ e(
-          I,
+          b,
           {
-            disabled: a.items.length === 0,
+            disabled: t.items.length === 0,
             onClick: v,
             variant: "cta-primary",
             size: "md",

package/package.json

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

package/dist/Cart.module-9txlotpz.js

@@ -1,18 +0,0 @@
-import './assets/Cart.css';const t = "_cartIconButton_pkqoj_2", o = "_count_pkqoj_9", n = "_cartContainer_pkqoj_24", e = "_header_pkqoj_35", _ = "_cartItems_pkqoj_40", c = "_topRow_pkqoj_65", a = "_itemInfo_pkqoj_71", s = "_purchaseInformation_pkqoj_76", r = "_itemManagement_pkqoj_83", m = "_removeItem_pkqoj_101", p = "_noItems_pkqoj_111", u = "_subtotal_pkqoj_118", I = "_checkoutButton_pkqoj_125", k = {
-  cartIconButton: t,
-  count: o,
-  cartContainer: n,
-  header: e,
-  cartItems: _,
-  topRow: c,
-  itemInfo: a,
-  purchaseInformation: s,
-  itemManagement: r,
-  removeItem: m,
-  noItems: p,
-  subtotal: u,
-  checkoutButton: I
-};
-export {
-  k as s
-};