@caseparts-org/caseblocks 0.0.185 → 0.0.187

package/dist/assets/AddToCart.css

@@ -1 +1 @@
-._container_1xk40_1{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--spacing-0-5)}
+._container_12mfp_1{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--spacing-0-5)}._tooltipContent_12mfp_9{display:inline-flex;align-items:center;gap:var(--spacing-spacing-3xs)}

package/dist/assets/SlideInPanel.css

@@ -1 +1 @@
-._root_12lt6_1{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none}._overlay_12lt6_8{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:auto}._panel_12lt6_16{position:absolute;background:#fff;box-shadow:0 4px 18px #00000040;display:flex;flex-direction:column;overflow:auto;pointer-events:auto;transition:transform .28s cubic-bezier(.28,.8,.32,1),opacity .28s;will-change:transform}._panel-left_12lt6_29{top:0;left:0;height:100%;max-width:100%;transform:translate(-100%)}._panel-right_12lt6_36{top:0;right:0;height:100%;max-width:100%;transform:translate(100%)}._panel-bottom_12lt6_43{left:0;bottom:0;width:100%;max-height:100%;transform:translateY(100%)}._active_12lt6_52._from-left_12lt6_52 ._panel-left_12lt6_29,._active_12lt6_52._from-right_12lt6_53 ._panel-right_12lt6_36{transform:translate(0)}._active_12lt6_52._from-bottom_12lt6_54 ._panel-bottom_12lt6_43{transform:translateY(0)}
+._root_ncbhm_1{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none}._overlay_ncbhm_8{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:auto}._panel_ncbhm_16{position:absolute;background:#fff;box-shadow:0 4px 18px #00000040;display:flex;flex-direction:column;overflow:auto;pointer-events:auto;transition:transform .28s cubic-bezier(.28,.8,.32,1),opacity .28s;will-change:transform}._panel-left_ncbhm_29{top:0;left:0;height:100dvh;max-width:100%;transform:translate(-100%)}._panel-right_ncbhm_36{top:0;right:0;height:100dvh;max-width:100%;transform:translate(100%)}._panel-bottom_ncbhm_43{left:0;bottom:0;width:100%;max-height:100%;transform:translateY(100%)}._active_ncbhm_52._from-left_ncbhm_52 ._panel-left_ncbhm_29,._active_ncbhm_52._from-right_ncbhm_53 ._panel-right_ncbhm_36{transform:translate(0)}._active_ncbhm_52._from-bottom_ncbhm_54 ._panel-bottom_ncbhm_43{transform:translateY(0)}

package/dist/atoms/SlideInPanel/SlideInPanel.js

@@ -1,89 +1,89 @@
 import { jsxs as k, jsx as u } from "react/jsx-runtime";
 import * as r from "react";
 import { r as A } from "../../index-BkF-BQ3Q.js";
-import { c } from "../../clsx-OuTLNxxd.js";
+import { c as m } from "../../clsx-OuTLNxxd.js";
 import { getHideAtStyles as N } from "../HideAt.js";
-import '../../assets/SlideInPanel.css';const q = "_root_12lt6_1", P = "_overlay_12lt6_8", R = "_panel_12lt6_16", j = "_active_12lt6_52", o = {
+import '../../assets/SlideInPanel.css';const q = "_root_ncbhm_1", P = "_overlay_ncbhm_8", R = "_panel_ncbhm_16", j = "_active_ncbhm_52", o = {
   root: q,
   overlay: P,
   panel: R,
-  "panel-left": "_panel-left_12lt6_29",
-  "panel-right": "_panel-right_12lt6_36",
-  "panel-bottom": "_panel-bottom_12lt6_43",
+  "panel-left": "_panel-left_ncbhm_29",
+  "panel-right": "_panel-right_ncbhm_36",
+  "panel-bottom": "_panel-bottom_ncbhm_43",
   active: j,
-  "from-left": "_from-left_12lt6_52",
-  "from-right": "_from-right_12lt6_53",
-  "from-bottom": "_from-bottom_12lt6_54"
+  "from-left": "_from-left_ncbhm_52",
+  "from-right": "_from-right_ncbhm_53",
+  "from-bottom": "_from-bottom_ncbhm_54"
 }, D = ({
-  side: a,
-  open: t,
-  onClose: l,
+  side: n,
+  open: e,
+  onClose: a,
   children: d,
-  width: v = 375,
-  height: p = "50%",
-  className: y,
-  overlayClassName: b,
-  panelClassName: h,
+  width: b = 375,
+  height: h = "50%",
+  className: v,
+  overlayClassName: p,
+  panelClassName: y,
   closeOnOverlayClick: x = !0,
-  disableEsc: m = !1,
+  disableEsc: f = !1,
   hideAt: E,
   ariaLabel: g = "Panel"
 }) => {
-  const [n, _] = r.useState(t), [s, i] = r.useState(!1);
+  const [c, _] = r.useState(e), [l, s] = r.useState(!1);
   r.useEffect(() => {
-    t ? (n || _(!0), i(!1), requestAnimationFrame(() => {
-      requestAnimationFrame(() => i(!0));
-    })) : i(!1);
-  }, [t, n]), r.useEffect(() => {
-    if (!t || m) return;
-    const e = (S) => {
-      S.key === "Escape" && l();
+    e ? (c || _(!0), s(!1), requestAnimationFrame(() => {
+      requestAnimationFrame(() => s(!0));
+    })) : s(!1);
+  }, [e, c]), r.useEffect(() => {
+    if (!e || f) return;
+    const t = (S) => {
+      S.key === "Escape" && a();
     };
-    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [t, m, l]);
-  const f = r.useRef(null);
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+  }, [e, f, a]);
+  const i = r.useRef(null);
   if (r.useEffect(() => {
-    if (t && s && f.current) {
-      const e = f.current.querySelector(
+    if (e && l && i.current) {
+      const t = i.current.querySelector(
         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
       );
-      e == null || e.focus();
+      t == null || t.focus();
     }
-  }, [t, s]), !n || typeof document > "u") return null;
-  const w = a === "bottom" ? { height: p } : { width: v };
+  }, [e, l]), !c || typeof document > "u") return null;
+  const w = n === "bottom" ? { height: h } : { width: b };
   return A.createPortal(
     /* @__PURE__ */ k(
       "div",
       {
-        className: c(
+        className: m(
           o.root,
-          o[`from-${a}`],
-          s && o.active,
+          o[`from-${n}`],
+          l && o.active,
           N(E),
-          y
+          v
         ),
-        "aria-hidden": !t,
+        "aria-hidden": !e,
         children: [
           /* @__PURE__ */ u(
             "div",
             {
-              className: c(o.overlay, b),
+              className: m(o.overlay, p),
               onClick: () => {
-                t && x && l();
+                e && x && a();
               }
             }
           ),
           /* @__PURE__ */ u(
             "div",
             {
-              ref: f,
+              ref: i,
               role: "dialog",
               "aria-modal": "true",
               "aria-label": g,
-              className: c(o.panel, o[`panel-${a}`], h),
+              className: m(o.panel, o[`panel-${n}`], y),
               style: w,
-              onTransitionEnd: (e) => {
-                e.propertyName === "transform" && !t && _(!1);
+              onTransitionEnd: (t) => {
+                t.propertyName === "transform" && !e && _(!1);
               },
               children: d
             }

package/dist/molecules/AddToCart/AddToCart.d.ts

@@ -16,5 +16,6 @@ export interface AddToCartProps {
     buttonText?: string;
     buttonDoneText?: string;
     size?: "sm" | "md";
+    requiresUnitDetails?: boolean;
 }
-export declare function AddToCart({ itemKey, disableButton, initialQuantity, min, max, onQuantityChange, onAdd, autoHideDelayMs, showQuantity, className, addButtonClassName, addButtonVariant, buttonText, buttonDoneText, size }: AddToCartProps): React.ReactElement | null;
+export declare function AddToCart({ itemKey, disableButton, initialQuantity, min, max, onQuantityChange, onAdd, autoHideDelayMs, showQuantity, className, addButtonClassName, addButtonVariant, buttonText, buttonDoneText, size, requiresUnitDetails }: AddToCartProps): React.ReactElement | null;

package/dist/molecules/AddToCart/AddToCart.js

@@ -1,66 +1,74 @@
-import { jsxs as v, jsx as d } from "react/jsx-runtime";
-import r from "react";
-import { c as q } from "../../clsx-OuTLNxxd.js";
-import { StatefulButton as w } from "../StatefulButton/StatefulButton.js";
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import o from "react";
+import { c as j } from "../../clsx-OuTLNxxd.js";
+import { StatefulButton as q } from "../StatefulButton/StatefulButton.js";
 import { QuantityInput as y } from "../QuantityInput/QuantityInput.js";
-import '../../assets/AddToCart.css';const z = "_container_1xk40_1", B = {
-  container: z
+import { Tooltip as B } from "../../atoms/Tooltip/Tooltip.js";
+import { Text as I } from "../../atoms/Text/Text.js";
+import { Icon as M } from "../../atoms/Icon/Icon.js";
+import '../../assets/AddToCart.css';const w = "_container_12mfp_1", E = "_tooltipContent_12mfp_9", m = {
+  container: w,
+  tooltipContent: E
 };
-function H({
-  itemKey: s,
-  disableButton: i,
-  initialQuantity: l = 1,
-  min: o = 1,
-  max: m,
-  onQuantityChange: c,
-  onAdd: f,
-  autoHideDelayMs: p = 3e3,
-  showQuantity: x = !0,
-  className: T,
-  addButtonClassName: _,
-  addButtonVariant: b,
-  buttonText: k,
-  buttonDoneText: A,
-  size: a
+function V({
+  itemKey: c,
+  disableButton: f,
+  initialQuantity: p = 1,
+  min: s = 1,
+  max: _,
+  onQuantityChange: n,
+  onAdd: x,
+  autoHideDelayMs: T = 3e3,
+  showQuantity: b = !0,
+  className: A,
+  addButtonClassName: N,
+  addButtonVariant: R,
+  buttonText: S,
+  buttonDoneText: k,
+  size: a,
+  requiresUnitDetails: v = !1
 }) {
-  const [u, N] = r.useState(() => {
-    const e = Number(l) || 1;
-    return e < o ? o : e;
-  }), [R, n] = r.useState(!1), t = r.useRef(null);
-  r.useEffect(() => () => {
+  const [i, z] = o.useState(() => {
+    const e = Number(p) || 1;
+    return e < s ? s : e;
+  }), [C, d] = o.useState(!1), t = o.useRef(null);
+  o.useEffect(() => () => {
     t.current && clearTimeout(t.current);
   }, []);
-  const S = r.useCallback((e) => {
-    N(e), c == null || c(e);
-  }, [c]), j = async () => {
-    s && (await f(s, u), n(!0), t.current && clearTimeout(t.current), t.current = setTimeout(() => n(!1), p));
-  };
-  return /* @__PURE__ */ v("div", { className: q(B.container, T), children: [
-    x && /* @__PURE__ */ d(
+  const h = o.useCallback((e) => {
+    z(e), n == null || n(e);
+  }, [n]), l = /* @__PURE__ */ r(
+    q,
+    {
+      size: a || "md",
+      variant: R || "cta-primary",
+      completed: C,
+      onClick: async () => {
+        c && (await x(c, i), d(!0), t.current && clearTimeout(t.current), t.current = setTimeout(() => d(!1), T));
+      },
+      text: S,
+      completedText: k,
+      disabled: !c || f,
+      className: N
+    }
+  );
+  return /* @__PURE__ */ u("div", { className: j(m.container, A), children: [
+    b && /* @__PURE__ */ r(
       y,
       {
-        quantity: u,
-        onQuantityChange: S,
-        min: o,
-        max: m,
+        quantity: i,
+        onQuantityChange: h,
+        min: s,
+        max: _,
         size: a || "md"
       }
     ),
-    /* @__PURE__ */ d(
-      w,
-      {
-        size: a || "md",
-        variant: b || "cta-primary",
-        completed: R,
-        onClick: j,
-        text: k,
-        completedText: A,
-        disabled: !s || i,
-        className: _
-      }
-    )
+    v ? /* @__PURE__ */ r(B, { trigger: l, children: /* @__PURE__ */ u("div", { className: m.tooltipContent, children: [
+      /* @__PURE__ */ r(M, { iconKey: "fa-regular fa-barcode-read", size: "sm" }),
+      /* @__PURE__ */ r(I, { size: "sm", children: "Requires Make, Model, and Serial" })
+    ] }) }) : l
   ] });
 }
 export {
-  H as AddToCart
+  V as AddToCart
 };

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

@@ -54,6 +54,10 @@ declare const meta: {
             control: "text";
             description: string;
         };
+        requiresUnitDetails: {
+            control: "boolean";
+            description: string;
+        };
         className: {
             control: "text";
         };

package/dist/molecules/AddToCart/AddToCart.stories.js

@@ -1,7 +1,7 @@
-import { AddToCart as o } from "./AddToCart.js";
-const i = {
+import { AddToCart as n } from "./AddToCart.js";
+const a = {
   title: "Case Parts/Molecules/AddToCart",
-  component: o,
+  component: n,
   parameters: { layout: "centered" },
   argTypes: {
     itemKey: {
@@ -43,6 +43,10 @@ const i = {
       control: "text",
       description: "Label after add completes"
     },
+    requiresUnitDetails: {
+      control: "boolean",
+      description: "Shows a tooltip on the add button when unit details are required"
+    },
     className: { control: "text" },
     addButtonClassName: { control: "text" }
   },
@@ -53,10 +57,11 @@ const i = {
     max: void 0,
     autoHideDelayMs: 2500,
     showQuantity: !0,
+    requiresUnitDetails: !1,
     buttonText: "Add",
     buttonDoneText: "Added!",
     onAdd: async (t, e) => {
-      await new Promise((n) => setTimeout(n, 600)), alert(`Added (story default):${JSON.stringify({ itemKey: t, quantity: e })}`);
+      await new Promise((o) => setTimeout(o, 600)), alert(`Added (story default):${JSON.stringify({ itemKey: t, quantity: e })}`);
     }
   },
   tags: ["autodocs"]
@@ -76,11 +81,11 @@ const i = {
     buttonText: "Add to Cart",
     buttonDoneText: "In Cart"
   }
-}, c = {
+}, l = {
   name: "Async (Simulated Slow)",
   args: {
     onAdd: async (t, e) => {
-      await new Promise((n) => setTimeout(n, 1800)), console.log("Slow add complete:", { itemKey: t, quantity: e });
+      await new Promise((o) => setTimeout(o, 1800)), console.log("Slow add complete:", { itemKey: t, quantity: e });
     }
   },
   parameters: {
@@ -90,17 +95,17 @@ const i = {
       }
     }
   }
-}, l = {
+}, c = {
   args: {
     autoHideDelayMs: 5e3
   }
 };
 export {
-  c as AsyncSlowAdd,
-  l as CustomAutoHideDelay,
+  l as AsyncSlowAdd,
+  c as CustomAutoHideDelay,
   u as CustomTexts,
   s as Default,
   d as HiddenQuantity,
   r as WithMaxConstraint,
-  i as default
+  a as default
 };

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

@@ -22,5 +22,6 @@ export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement
     onQuantityChange?: (_quantity: number) => void;
     onRemove?: () => void;
     onUnitEditClick?: () => void;
+    requiresUnitDetails?: boolean;
 }
-export declare function CartPart({ imageUrl, imageAlt, title, titleHref, onTitleNavigate, partNumber, unit, make, model, serial, custom, availabilityId, availability, contactHref, contactLinkBehavior, priceLabel, price, quantity, onQuantityChange, onRemove, onUnitEditClick, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartPart({ imageUrl, imageAlt, title, titleHref, onTitleNavigate, partNumber, unit, make, model, serial, custom, availabilityId, availability, contactHref, contactLinkBehavior, priceLabel, price, quantity, onQuantityChange, onRemove, onUnitEditClick, requiresUnitDetails, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Cart/CartPart.js

@@ -1,86 +1,106 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Link as q } from "../../atoms/Link/Link.js";
-import { Text as l } from "../../atoms/Text/Text.js";
-import { Image as v } from "../../atoms/Image/Image.js";
-import { Availability as A } from "../Availability/Availability.js";
-import { Pricing as B } from "../Pricing/Pricing.js";
-import { QuantityInput as D } from "../QuantityInput/QuantityInput.js";
-import { Icon as y } from "../../atoms/Icon/Icon.js";
-import { c as M } from "../../clsx-OuTLNxxd.js";
+import { Text as m } from "../../atoms/Text/Text.js";
+import { Image as R } from "../../atoms/Image/Image.js";
+import { Availability as T } from "../Availability/Availability.js";
+import { Pricing as v } from "../Pricing/Pricing.js";
+import { QuantityInput as A } from "../QuantityInput/QuantityInput.js";
+import { Icon as o } from "../../atoms/Icon/Icon.js";
+import { Tooltip as B } from "../../atoms/Tooltip/Tooltip.js";
+import { c as D } from "../../clsx-OuTLNxxd.js";
 import { s as i } from "../../Cart.module-B0W9CeI5.js";
-function U({
+function X({
   imageUrl: b,
   imageAlt: g = "Product image",
-  title: m,
-  titleHref: s,
+  title: c,
+  titleHref: n,
   onTitleNavigate: t,
-  partNumber: c,
+  partNumber: d,
   unit: I,
   make: k,
-  model: x,
-  serial: z,
-  custom: K,
-  availabilityId: N,
-  availability: o,
+  model: z,
+  serial: K,
+  custom: N,
+  availabilityId: x,
+  availability: f,
   contactHref: P,
   contactLinkBehavior: S = "new-tab",
   priceLabel: w = "List Price",
-  price: n,
-  quantity: d,
-  onQuantityChange: f,
-  onRemove: h,
-  onUnitEditClick: u,
-  className: j,
-  ...C
+  price: h,
+  quantity: u,
+  onQuantityChange: p,
+  onRemove: y,
+  onUnitEditClick: l,
+  requiresUnitDetails: j = !1,
+  className: C,
+  ...L
 }) {
-  function L(e) {
-    e.defaultPrevented || e.button === 0 && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey || e.currentTarget.target && e.currentTarget.target !== "_self" || t == null || t(e));
+  function M(r) {
+    r.defaultPrevented || r.button === 0 && (r.metaKey || r.altKey || r.ctrlKey || r.shiftKey || r.currentTarget.target && r.currentTarget.target !== "_self" || t == null || t(r));
   }
-  const p = I || [k, x, z].filter(Boolean).join(" / ");
-  return /* @__PURE__ */ a("li", { className: M(i.cartItem, j), ...C, children: [
-    /* @__PURE__ */ r(v, { height: 50, width: 50, src: b || "", alt: g, className: i.itemImage }),
+  const s = I || [k, z, K].filter(Boolean).join(" / ");
+  return /* @__PURE__ */ a("li", { className: D(i.cartItem, C), ...L, children: [
+    /* @__PURE__ */ e(R, { height: 50, width: 50, src: b || "", alt: g, className: i.itemImage }),
     /* @__PURE__ */ a("div", { children: [
       /* @__PURE__ */ a("div", { className: i.topRow, children: [
         /* @__PURE__ */ a("div", { className: i.itemInfo, children: [
-          /* @__PURE__ */ r(l, { size: "sm", weight: "semibold", children: s ? /* @__PURE__ */ r(q, { href: s, onClick: L, children: m }) : m }),
-          c != null && /* @__PURE__ */ a(l, { size: "sm", children: [
-            /* @__PURE__ */ r(l, { colorToken: "quaternary", size: "xs", children: K ? "Specs " : "Part # " }),
-            c
+          /* @__PURE__ */ e(m, { size: "sm", weight: "semibold", children: n ? /* @__PURE__ */ e(q, { href: n, onClick: M, children: c }) : c }),
+          d != null && /* @__PURE__ */ a(m, { size: "sm", children: [
+            /* @__PURE__ */ e(m, { colorToken: "quaternary", size: "xs", children: N ? "Specs " : "Part # " }),
+            d
           ] }),
-          p && u && /* @__PURE__ */ a(
+          s && l && (j ? /* @__PURE__ */ e(
+            B,
+            {
+              trigger: /* @__PURE__ */ a(
+                "button",
+                {
+                  onClick: l,
+                  className: i.editUnit,
+                  "aria-label": "Edit make, model, and serial",
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ e(o, { iconKey: "fa-light fa-file-pen", size: "sm" }),
+                    s
+                  ]
+                }
+              ),
+              children: "Requires Make, Model, and Serial"
+            }
+          ) : /* @__PURE__ */ a(
             "button",
             {
-              onClick: u,
+              onClick: l,
               className: i.editUnit,
               "aria-label": "Edit make, model, and serial",
               type: "button",
               children: [
-                /* @__PURE__ */ r(y, { iconKey: "fa-light fa-file-pen", size: "sm" }),
-                p
+                /* @__PURE__ */ e(o, { iconKey: "fa-light fa-file-pen", size: "sm" }),
+                s
               ]
             }
-          )
+          ))
         ] }),
-        h && /* @__PURE__ */ r("button", { onClick: h, className: i.removeItem, "aria-label": "Remove item", type: "button", children: /* @__PURE__ */ r(y, { iconKey: "fa-regular fa-trash", size: "sm" }) })
+        y && /* @__PURE__ */ e("button", { onClick: y, className: i.removeItem, "aria-label": "Remove item", type: "button", children: /* @__PURE__ */ e(o, { iconKey: "fa-regular fa-trash", size: "sm" }) })
       ] }),
       /* @__PURE__ */ a("div", { className: i.itemManagement, children: [
         /* @__PURE__ */ a("div", { className: i.purchaseInformation, children: [
-          /* @__PURE__ */ r("div", { className: i.availabilitySlot, children: o && /* @__PURE__ */ r(
-            A,
+          /* @__PURE__ */ e("div", { className: i.availabilitySlot, children: f && /* @__PURE__ */ e(
+            T,
             {
-              availId: N || "",
-              availDescription: o,
+              availId: x || "",
+              availDescription: f,
               contactHref: P || "",
               contactLinkBehavior: S
             }
           ) }),
-          /* @__PURE__ */ r("div", { className: i.priceSlot, children: n && /* @__PURE__ */ r(B, { pricingLabel: w, price: n }) })
+          /* @__PURE__ */ e("div", { className: i.priceSlot, children: h && /* @__PURE__ */ e(v, { pricingLabel: w, price: h }) })
         ] }),
-        typeof d == "number" && f && /* @__PURE__ */ r("div", { className: i.quantitySlot, children: /* @__PURE__ */ r(
-          D,
+        typeof u == "number" && p && /* @__PURE__ */ e("div", { className: i.quantitySlot, children: /* @__PURE__ */ e(
+          A,
           {
-            quantity: d,
-            onQuantityChange: f,
+            quantity: u,
+            onQuantityChange: p,
             size: "sm"
           }
         ) })
@@ -89,5 +109,5 @@ function U({
   ] });
 }
 export {
-  U as CartPart
+  X as CartPart
 };

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

@@ -25,6 +25,7 @@ declare const meta: {
         priceLabel: string;
         price: string;
         quantity: number;
+        requiresUnitDetails: false;
         onQuantityChange: () => void;
         onRemove: () => void;
         onUnitEditClick: () => void;

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

@@ -25,6 +25,7 @@ const l = {
     priceLabel: "List Price",
     price: "$99.99",
     quantity: 1,
+    requiresUnitDetails: !1,
     onQuantityChange: () => {
     },
     onRemove: () => {

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

@@ -12,6 +12,7 @@ export interface CartSlideInPanelProps {
     onItemDelete: (_item: CartItem) => void;
     onUnitEditClick?: (_item: CartItem) => void;
     onItemNavigate?: (_item: CartItem) => void;
+    requiresUnitDetails?: boolean;
     onCheckout: () => void;
 }
-export declare function CartSlideInPanel({ open, onClose, cart, subtotal, itemPriceLabel, contactHref, contactLinkBehavior, onItemQtyChange, onItemDelete, onUnitEditClick, onItemNavigate, onCheckout }: CartSlideInPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartSlideInPanel({ open, onClose, cart, subtotal, itemPriceLabel, contactHref, contactLinkBehavior, onItemQtyChange, onItemDelete, onUnitEditClick, onItemNavigate, requiresUnitDetails, onCheckout }: CartSlideInPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Cart/CartSlideInPanel.js

@@ -1,44 +1,56 @@
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { SlideInPanel as v } from "../../atoms/SlideInPanel/SlideInPanel.js";
-import { Text as l } from "../../atoms/Text/Text.js";
-import { Button as k } from "../../atoms/Button/Button.js";
-import { Icon as C } from "../../atoms/Icon/Icon.js";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { SlideInPanel as C } from "../../atoms/SlideInPanel/SlideInPanel.js";
+import { Text as r } from "../../atoms/Text/Text.js";
+import { Button as h } from "../../atoms/Button/Button.js";
+import { Icon as z } from "../../atoms/Icon/Icon.js";
 import { CartPart as x } from "./CartPart.js";
 import { s as t } from "../../Cart.module-B0W9CeI5.js";
 function L({
-  open: c,
+  open: u,
   onClose: s,
-  cart: r,
+  cart: a,
   subtotal: n,
-  itemPriceLabel: h,
-  contactHref: p,
-  contactLinkBehavior: u,
-  onItemQtyChange: y,
-  onItemDelete: b,
+  itemPriceLabel: p,
+  contactHref: y,
+  contactLinkBehavior: b,
+  onItemQtyChange: f,
+  onItemDelete: g,
   onUnitEditClick: d,
   onItemNavigate: m,
-  onCheckout: f
+  requiresUnitDetails: k = !1,
+  onCheckout: o
 }) {
-  var o;
-  return r = r || { items: [] }, /* @__PURE__ */ i(
-    v,
+  var c;
+  return a = a || { items: [] }, /* @__PURE__ */ i(
+    C,
     {
       side: "right",
-      open: c,
+      open: u,
       onClose: s,
       ariaLabel: "Shopping Cart",
-      children: /* @__PURE__ */ a("div", { id: "cart-panel", className: t.cartContainer, children: [
-        /* @__PURE__ */ a("div", { className: t.headerWrapper, children: [
-          /* @__PURE__ */ a("div", { className: t.header, children: [
-            /* @__PURE__ */ i(l, { size: "2xl", children: "Cart" }),
-            /* @__PURE__ */ a(l, { size: "xs", colorToken: "quaternary", children: [
-              (o = r == null ? void 0 : r.items) == null ? void 0 : o.length,
+      children: /* @__PURE__ */ l("div", { id: "cart-panel", className: t.cartContainer, children: [
+        /* @__PURE__ */ l("div", { className: t.headerWrapper, children: [
+          /* @__PURE__ */ l("div", { className: t.header, children: [
+            /* @__PURE__ */ i(r, { size: "2xl", children: "Cart" }),
+            /* @__PURE__ */ l(r, { size: "xs", colorToken: "quaternary", children: [
+              (c = a == null ? void 0 : a.items) == null ? void 0 : c.length,
               " items in your cart"
             ] })
           ] }),
-          /* @__PURE__ */ i("button", { onClick: s, children: /* @__PURE__ */ i(C, { iconKey: "fa-regular fa-xmark", size: "md" }) })
+          /* @__PURE__ */ i("button", { onClick: s, children: /* @__PURE__ */ i(z, { iconKey: "fa-regular fa-xmark", size: "md" }) })
         ] }),
-        /* @__PURE__ */ i("div", { className: t.cartItems, children: r.items.length > 0 ? /* @__PURE__ */ i("ul", { children: r.items.map((e) => /* @__PURE__ */ i(
+        /* @__PURE__ */ i(
+          h,
+          {
+            disabled: a.items.length === 0,
+            onClick: o,
+            variant: "secondary",
+            size: "md",
+            className: t.checkoutButton,
+            children: "Checkout"
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: t.cartItems, children: a.items.length > 0 ? /* @__PURE__ */ i("ul", { children: a.items.map((e) => /* @__PURE__ */ i(
           x,
           {
             imageUrl: e.imageUrl,
@@ -54,26 +66,27 @@ function L({
             custom: !!e.custom,
             availabilityId: e.availabilityId,
             availability: e.availability,
-            contactHref: p,
-            contactLinkBehavior: u,
+            contactHref: y,
+            contactLinkBehavior: b,
             price: e.price,
-            priceLabel: h || "List Price",
+            priceLabel: p || "List Price",
             quantity: e.quantity,
-            onQuantityChange: (g) => y(e, g),
-            onRemove: () => b(e),
-            onUnitEditClick: d ? () => d(e) : void 0
+            onQuantityChange: (v) => f(e, v),
+            onRemove: () => g(e),
+            onUnitEditClick: d ? () => d(e) : void 0,
+            requiresUnitDetails: k
           },
-          e.id
-        )) }) : /* @__PURE__ */ i("div", { className: t.noItems, children: /* @__PURE__ */ i(l, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
-        n && /* @__PURE__ */ a("div", { className: t.subtotal, children: [
-          /* @__PURE__ */ i(l, { size: "md", weight: "semibold", children: "Subtotal" }),
-          /* @__PURE__ */ i(l, { size: "md", weight: "semibold", children: n })
+          `${e.id}-${e.make ?? ""}-${e.model ?? ""}-${e.serial ?? ""}`
+        )) }) : /* @__PURE__ */ i("div", { className: t.noItems, children: /* @__PURE__ */ i(r, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
+        n && /* @__PURE__ */ l("div", { className: t.subtotal, children: [
+          /* @__PURE__ */ i(r, { size: "md", weight: "semibold", children: "Subtotal" }),
+          /* @__PURE__ */ i(r, { size: "md", weight: "semibold", children: n })
         ] }),
         /* @__PURE__ */ i(
-          k,
+          h,
           {
-            disabled: r.items.length === 0,
-            onClick: f,
+            disabled: a.items.length === 0,
+            onClick: o,
             variant: "cta-primary",
             size: "md",
             className: t.checkoutButton,

package/dist/organisms/Product/Product.d.ts

@@ -22,5 +22,6 @@ export interface ProductProps extends AvailabilityProps {
     size?: Size;
     showQuantity?: boolean;
     onLinkClicked?: (_itemKey: number) => void;
+    requiresUnitDetails?: boolean;
 }
-export declare function Product({ productView, itemKey, partNumber, productDescription, availDescription, availId, contactHref, contactLinkBehavior, productHref, priceLabel, price, imgSrc, attributes, className, onAddToCart, onClose, flat, size, showQuantity, onLinkClicked, ...otherProps }: ProductProps): import("react/jsx-runtime").JSX.Element;
+export declare function Product({ productView, itemKey, partNumber, productDescription, availDescription, availId, contactHref, contactLinkBehavior, productHref, priceLabel, price, imgSrc, attributes, className, onAddToCart, onClose, flat, size, showQuantity, onLinkClicked, requiresUnitDetails, ...otherProps }: ProductProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Product/Product.js

@@ -1,33 +1,33 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Image as B } from "../../atoms/Image/Image.js";
-import { Link as A } from "../../atoms/Link/Link.js";
+import { Image as A } from "../../atoms/Image/Image.js";
+import { Link as R } from "../../atoms/Link/Link.js";
 import { Text as n } from "../../atoms/Text/Text.js";
-import { Availability as R } from "../../molecules/Availability/Availability.js";
-import { Pricing as $ } from "../../molecules/Pricing/Pricing.js";
-import { AddToCart as D } from "../../molecules/AddToCart/AddToCart.js";
-import { Icon as V } from "../../atoms/Icon/Icon.js";
-import { c as P } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Product.css';const q = "_productCard_nx8r7_3", E = "_sm_nx8r7_15", F = "_productInformation_nx8r7_25", G = "_purchaseInformation_nx8r7_32", J = "_addToCart_nx8r7_40", M = "_addToCartButton_nx8r7_43", O = "_partNumber_nx8r7_53", U = "_partNumberLabel_nx8r7_60", W = "_productTile_nx8r7_64", X = "_topRow_nx8r7_83", Y = "_productData_nx8r7_114", Z = "_purchase_nx8r7_32", y = "_attributeContainer_nx8r7_151", H = "_elevated_nx8r7_199", Q = "_noImage_nx8r7_205", r = {
-  productCard: q,
-  sm: E,
-  productInformation: F,
-  purchaseInformation: G,
-  addToCart: J,
-  addToCartButton: M,
-  partNumber: O,
-  partNumberLabel: U,
-  productTile: W,
-  topRow: X,
-  productData: Y,
-  purchase: Z,
-  attributeContainer: y,
-  elevated: H,
-  noImage: Q
+import { Availability as $ } from "../../molecules/Availability/Availability.js";
+import { Pricing as P } from "../../molecules/Pricing/Pricing.js";
+import { AddToCart as j } from "../../molecules/AddToCart/AddToCart.js";
+import { Icon as E } from "../../atoms/Icon/Icon.js";
+import { c as D } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Product.css';const F = "_productCard_nx8r7_3", G = "_sm_nx8r7_15", J = "_productInformation_nx8r7_25", M = "_purchaseInformation_nx8r7_32", O = "_addToCart_nx8r7_40", W = "_addToCartButton_nx8r7_43", X = "_partNumber_nx8r7_53", Y = "_partNumberLabel_nx8r7_60", Z = "_productTile_nx8r7_64", q = "_topRow_nx8r7_83", y = "_productData_nx8r7_114", U = "_purchase_nx8r7_32", H = "_attributeContainer_nx8r7_151", Q = "_elevated_nx8r7_199", K = "_noImage_nx8r7_205", r = {
+  productCard: F,
+  sm: G,
+  productInformation: J,
+  purchaseInformation: M,
+  addToCart: O,
+  addToCartButton: W,
+  partNumber: X,
+  partNumberLabel: Y,
+  productTile: Z,
+  topRow: q,
+  productData: y,
+  purchase: U,
+  attributeContainer: H,
+  elevated: Q,
+  noImage: K
 };
 function er({
-  productView: j,
-  itemKey: s,
-  partNumber: c,
+  productView: V,
+  itemKey: c,
+  partNumber: s,
   productDescription: h,
   availDescription: x,
   availId: m,
@@ -36,7 +36,7 @@ function er({
   productHref: f,
   priceLabel: T,
   price: l,
-  imgSrc: e,
+  imgSrc: d,
   attributes: p,
   className: g,
   onAddToCart: C,
@@ -44,41 +44,42 @@ function er({
   flat: I,
   size: a = "md",
   showQuantity: _ = !0,
-  onLinkClicked: d,
-  ...w
+  onLinkClicked: e,
+  requiresUnitDetails: w = !1,
+  ...B
 }) {
   const u = a === "sm" ? "xs" : "sm";
-  return j === "Card" ? /* @__PURE__ */ o(
+  return V === "Card" ? /* @__PURE__ */ o(
     "div",
     {
-      className: P(
+      className: D(
         r.productCard,
         a && r[a],
         g,
         !I && r.elevated,
-        !e && r.noImage
+        !d && r.noImage
       ),
-      ...w,
+      ...B,
       children: [
-        e && /* @__PURE__ */ t(
-          B,
+        d && /* @__PURE__ */ t(
+          A,
           {
-            src: e,
-            alt: `${c} product image`,
+            src: d,
+            alt: `${s} product image`,
             height: a === "sm" ? 78 : 96,
             width: a === "sm" ? 78 : 96
           }
         ),
         /* @__PURE__ */ o("div", { className: r.productInformation, children: [
-          /* @__PURE__ */ t(A, { onClick: () => d == null ? void 0 : d(s), size: a, href: f || "#", children: h }),
+          /* @__PURE__ */ t(R, { onClick: () => e == null ? void 0 : e(c), size: a, href: f || "#", children: h }),
           /* @__PURE__ */ o("div", { className: r.partNumber, children: [
             /* @__PURE__ */ t(n, { size: u, className: r.partNumberLabel, children: "Part #" }),
-            /* @__PURE__ */ t(n, { size: u, weight: "semibold", children: c })
+            /* @__PURE__ */ t(n, { size: u, weight: "semibold", children: s })
           ] })
         ] }),
         /* @__PURE__ */ o("div", { className: r.purchaseInformation, children: [
           m && /* @__PURE__ */ t(
-            R,
+            $,
             {
               availId: m,
               availDescription: x,
@@ -86,12 +87,12 @@ function er({
               contactLinkBehavior: N
             }
           ),
-          l && /* @__PURE__ */ t($, { pricingLabel: T, price: l })
+          l && /* @__PURE__ */ t(P, { pricingLabel: T, price: l })
         ] }),
         /* @__PURE__ */ t(
-          D,
+          j,
           {
-            itemKey: s,
+            itemKey: c,
             onAdd: C,
             className: r.addToCart,
             addButtonClassName: r.addToCartButton,
@@ -99,23 +100,24 @@ function er({
             size: a,
             buttonDoneText: "",
             buttonText: _ ? "Add" : "Add to Cart",
-            showQuantity: _
+            showQuantity: _,
+            requiresUnitDetails: w
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ o("div", { className: P(
+  ) : /* @__PURE__ */ o("div", { className: D(
     r.productTile,
     g,
     a && r[a],
     !I && r.elevated,
-    !e && r.noImage
-  ), ...w, children: [
-    e && /* @__PURE__ */ t(
-      B,
+    !d && r.noImage
+  ), ...B, children: [
+    d && /* @__PURE__ */ t(
+      A,
       {
-        src: e,
-        alt: `${c} product image`,
+        src: d,
+        alt: `${s} product image`,
         height: a === "sm" ? 86 : 108,
         width: a === "sm" ? 86 : 108
       }
@@ -123,18 +125,18 @@ function er({
     /* @__PURE__ */ o("div", { className: r.productData, children: [
       /* @__PURE__ */ o("div", { className: r.topRow, children: [
         /* @__PURE__ */ o("div", { className: r.productInformation, children: [
-          /* @__PURE__ */ t(A, { onClick: () => d == null ? void 0 : d(s), size: a, href: f || "#", children: h }),
+          /* @__PURE__ */ t(R, { onClick: () => e == null ? void 0 : e(c), size: a, href: f || "#", children: h }),
           /* @__PURE__ */ o("div", { className: r.partNumber, children: [
             /* @__PURE__ */ t(n, { size: u, className: r.partNumberLabel, children: "Part #" }),
-            /* @__PURE__ */ t(n, { size: u, weight: "semibold", children: c })
+            /* @__PURE__ */ t(n, { size: u, weight: "semibold", children: s })
           ] })
         ] }),
-        v && /* @__PURE__ */ t("button", { onClick: () => v(s), children: /* @__PURE__ */ t(V, { size: "sm", iconKey: "fa-light fa-xmark" }) })
+        v && /* @__PURE__ */ t("button", { onClick: () => v(c), children: /* @__PURE__ */ t(E, { size: "sm", iconKey: "fa-light fa-xmark" }) })
       ] }),
       /* @__PURE__ */ o("div", { className: r.purchase, children: [
         /* @__PURE__ */ o("div", { className: r.purchaseInformation, children: [
           m && /* @__PURE__ */ t(
-            R,
+            $,
             {
               availId: m,
               availDescription: x,
@@ -142,9 +144,9 @@ function er({
               contactLinkBehavior: N
             }
           ),
-          l && /* @__PURE__ */ t($, { pricingLabel: T, price: l })
+          l && /* @__PURE__ */ t(P, { pricingLabel: T, price: l })
         ] }),
-        /* @__PURE__ */ t(D, { size: a, itemKey: s, onAdd: C, className: r.addToCart, addButtonClassName: r.addToCartButton })
+        /* @__PURE__ */ t(j, { size: a, itemKey: c, onAdd: C, className: r.addToCart, addButtonClassName: r.addToCartButton, requiresUnitDetails: w })
       ] }),
       p && p.length > 0 && /* @__PURE__ */ t("ul", { className: r.attributeContainer, children: p.map((i) => /* @__PURE__ */ o("li", { children: [
         /* @__PURE__ */ o(n, { size: "xs", weight: "light", children: [

package/dist/organisms/Product/Product.stories.d.ts

@@ -79,6 +79,10 @@ declare const meta: {
             control: "boolean";
             description: string;
         };
+        requiresUnitDetails: {
+            control: "boolean";
+            description: string;
+        };
     };
     args: ProductProps;
     tags: string[];

package/dist/organisms/Product/Product.stories.js

@@ -1,4 +1,4 @@
-import { Product as e } from "./Product.js";
+import { Product as a } from "./Product.js";
 const o = [
   { label: "Color", value: "Gray" },
   { label: "Brand", value: "Kason" },
@@ -13,7 +13,7 @@ const o = [
   { label: "Attribute", value: "Placeholder" }
 ], r = {
   title: "Case Parts/Organisms/Product",
-  component: e,
+  component: a,
   parameters: { layout: "centered" },
   argTypes: {
     productView: {
@@ -52,7 +52,8 @@ const o = [
       control: { type: "select" },
       options: ["md", "sm"]
     },
-    showQuantity: { control: "boolean", description: "Shows/Hides add to cart quantity" }
+    showQuantity: { control: "boolean", description: "Shows/Hides add to cart quantity" },
+    requiresUnitDetails: { control: "boolean", description: "Shows unit details tooltip on add button" }
   },
   args: {
     productView: "Card",
@@ -70,15 +71,16 @@ const o = [
     imgSrc: "https://dev.caseparts.com/graphics/photos/R-23_IMG_2009.png",
     // imgSrc: 'https://www.caseparts.com/Ortery/360/Optimized/1092-01_/1092-01_04.webp',
     attributes: o,
-    onAddToCart: (t, a) => {
-      alert(`Add to cart (story) ${JSON.stringify({ itemKey: t, quantity: a })}`);
+    onAddToCart: (t, e) => {
+      alert(`Add to cart (story) ${JSON.stringify({ itemKey: t, quantity: e })}`);
     },
     onClose: (t) => {
       alert(`On close clicked ${t}`);
     },
     flat: !1,
     size: "md",
-    showQuantity: !0
+    showQuantity: !0,
+    requiresUnitDetails: !1
   },
   tags: ["autodocs"]
 }, l = {}, c = {
@@ -114,12 +116,12 @@ const o = [
     productView: "Card",
     imgSrc: void 0
   }
-}, v = {
+}, b = {
   args: {
     productView: "Tile",
     flat: !0
   }
-}, b = {
+}, v = {
   args: {
     productView: "Card",
     imgSrc: void 0,
@@ -130,10 +132,10 @@ export {
   s as ContactForAvailability,
   l as Default,
   p as DifferentPriceLabel,
-  v as FlatTile,
+  b as FlatTile,
   c as LimitedStock,
   u as NoImageCard,
-  b as NoImageFlatCard,
+  v as NoImageFlatCard,
   d as TileView,
   n as Unavailable,
   r as default

package/package.json

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