@caseparts-org/caseblocks 0.0.187 → 0.0.189

package/dist/Cart.module-Jz43jenN.js

@@ -0,0 +1,25 @@
+import './assets/Cart.css';const t = "_cartIconButton_pzhyb_2", o = "_count_pzhyb_9", e = "_cartContainer_pzhyb_24", n = "_headerWrapper_pzhyb_35", _ = "_header_pzhyb_35", a = "_cartItems_pzhyb_53", c = "_cartItem_pzhyb_53", r = "_topRow_pzhyb_79", s = "_itemInfo_pzhyb_85", i = "_editUnit_pzhyb_90", p = "_purchaseInformation_pzhyb_106", m = "_availabilitySlot_pzhyb_112", h = "_priceSlot_pzhyb_115", y = "_itemManagement_pzhyb_118", b = "_quantitySlot_pzhyb_124", I = "_itemImage_pzhyb_134", u = "_removeItem_pzhyb_137", z = "_noItems_pzhyb_147", l = "_subtotal_pzhyb_154", d = "_checkoutButton_pzhyb_161", S = {
+  cartIconButton: t,
+  count: o,
+  cartContainer: e,
+  headerWrapper: n,
+  header: _,
+  cartItems: a,
+  cartItem: c,
+  topRow: r,
+  itemInfo: s,
+  editUnit: i,
+  purchaseInformation: p,
+  availabilitySlot: m,
+  priceSlot: h,
+  itemManagement: y,
+  quantitySlot: b,
+  itemImage: I,
+  removeItem: u,
+  noItems: z,
+  subtotal: l,
+  checkoutButton: d
+};
+export {
+  S as s
+};

package/dist/assets/Cart.css

@@ -1 +1 @@
-._cartIconButton_a7g4s_2{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_a7g4s_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_a7g4s_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_a7g4s_35{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._headerWrapper_a7g4s_35>button{padding:0;margin:0;background-color:transparent;border:none}._header_a7g4s_35{display:flex;flex-direction:column;align-items:flex-start;width:100%}._cartItems_a7g4s_53{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_a7g4s_53 ul{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-spacing-1xs)}._cartItem_a7g4s_53{display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-0-5);align-items:start;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border:1px solid var(--color-neutrals-neutral-2);border-radius:var(--border-radius-md)}._topRow_a7g4s_79{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}._itemInfo_a7g4s_85{display:flex;flex-direction:column;align-items:flex-start}._editUnit_a7g4s_90{display:flex;align-items:center;text-align:start;gap:var(--spacing-spacing-3xs);border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;color:var(--text-text-links);word-break:break-all;word-wrap:break-word}._purchaseInformation_a7g4s_104{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:flex-start;width:100%}._availabilitySlot_a7g4s_110{min-width:0}._priceSlot_a7g4s_113{justify-self:end}._itemManagement_a7g4s_116{display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-spacing-3xs)}._quantitySlot_a7g4s_122{align-self:flex-end}._cartItem_a7g4s_53 p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._itemImage_a7g4s_132{object-fit:contain}._removeItem_a7g4s_135{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;width:min-content;height:min-content}._noItems_a7g4s_145{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_a7g4s_152{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}._checkoutButton_a7g4s_159{width:100%}
+._cartIconButton_pzhyb_2{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_pzhyb_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_pzhyb_24{height:100vh;width:100%;min-width:320px;max-width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:var(--spacing-1);padding:var(--spacing-1)}._headerWrapper_pzhyb_35{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._headerWrapper_pzhyb_35>button{padding:0;margin:0;background-color:transparent;border:none}._header_pzhyb_35{display:flex;flex-direction:column;align-items:flex-start;width:100%}._cartItems_pzhyb_53{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_pzhyb_53 ul{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-spacing-1xs)}._cartItem_pzhyb_53{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--spacing-0-5);align-items:start;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border:1px solid var(--color-neutrals-neutral-2);border-radius:var(--border-radius-md)}._topRow_pzhyb_79{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}._itemInfo_pzhyb_85{display:flex;flex-direction:column;align-items:flex-start}._editUnit_pzhyb_90{display:flex;align-items:center;text-align:start;gap:var(--spacing-spacing-3xs);border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;color:var(--text-text-links);word-wrap:break-word;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}._purchaseInformation_pzhyb_106{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:flex-start;width:100%}._availabilitySlot_pzhyb_112{min-width:0}._priceSlot_pzhyb_115{justify-self:end}._itemManagement_pzhyb_118{display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-spacing-3xs)}._quantitySlot_pzhyb_124{align-self:flex-end}._cartItem_pzhyb_53 p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._itemImage_pzhyb_134{object-fit:contain}._removeItem_pzhyb_137{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;width:min-content;height:min-content}._noItems_pzhyb_147{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_pzhyb_154{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}._checkoutButton_pzhyb_161{width:100%;height:fit-content}

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

@@ -6,6 +6,7 @@ export interface CartItem {
     description: string | undefined;
     price: string;
     quantity: number;
+    maxQuantity?: number;
     imageUrl: string | undefined;
     unit?: string;
     make?: string;

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-B0W9CeI5.js";
+import { s as m } from "../../Cart.module-Jz43jenN.js";
 const S = l.forwardRef(function({
   cart: i,
   open: t = !1,

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

@@ -19,9 +19,10 @@ export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement
     priceLabel?: string;
     price?: string;
     quantity?: number;
+    maxQuantity?: number;
     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, requiresUnitDetails, 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, maxQuantity, onQuantityChange, onRemove, onUnitEditClick, requiresUnitDetails, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Cart/CartPart.js

@@ -1,67 +1,68 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Link as q } from "../../atoms/Link/Link.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 X({
-  imageUrl: b,
-  imageAlt: g = "Product image",
-  title: c,
-  titleHref: n,
+import { Link as R } from "../../atoms/Link/Link.js";
+import { Text as o } from "../../atoms/Text/Text.js";
+import { Image as T } 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 c } from "../../atoms/Icon/Icon.js";
+import { Tooltip as F } from "../../atoms/Tooltip/Tooltip.js";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import { s as i } from "../../Cart.module-Jz43jenN.js";
+function $({
+  imageUrl: g,
+  imageAlt: I = "Product image",
+  title: n,
+  titleHref: d,
   onTitleNavigate: t,
-  partNumber: d,
-  unit: I,
-  make: k,
-  model: z,
+  partNumber: f,
+  unit: k,
+  make: z,
+  model: N,
   serial: K,
-  custom: N,
-  availabilityId: x,
-  availability: f,
-  contactHref: P,
-  contactLinkBehavior: S = "new-tab",
-  priceLabel: w = "List Price",
-  price: h,
-  quantity: u,
-  onQuantityChange: p,
+  custom: x,
+  availabilityId: P,
+  availability: h,
+  contactHref: S,
+  contactLinkBehavior: w = "new-tab",
+  priceLabel: M = "List Price",
+  price: u,
+  quantity: p,
+  maxQuantity: l,
+  onQuantityChange: b,
   onRemove: y,
-  onUnitEditClick: l,
+  onUnitEditClick: s,
   requiresUnitDetails: j = !1,
   className: C,
   ...L
 }) {
-  function M(r) {
+  function q(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 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 }),
+  const m = k || [z, N, K].filter(Boolean).join(" / "), v = typeof l == "number" && Number.isFinite(l) ? l : void 0;
+  return /* @__PURE__ */ a("li", { className: _(i.cartItem, C), ...L, children: [
+    /* @__PURE__ */ e(T, { height: 50, width: 50, src: g || "", alt: I, className: i.itemImage }),
     /* @__PURE__ */ a("div", { children: [
       /* @__PURE__ */ a("div", { className: i.topRow, children: [
         /* @__PURE__ */ a("div", { className: i.itemInfo, children: [
-          /* @__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
+          /* @__PURE__ */ e(o, { size: "sm", weight: "semibold", children: d ? /* @__PURE__ */ e(R, { href: d, onClick: q, children: n }) : n }),
+          f != null && /* @__PURE__ */ a(o, { size: "sm", children: [
+            /* @__PURE__ */ e(o, { colorToken: "quaternary", size: "xs", children: x ? "Specs " : "Part # " }),
+            f
           ] }),
-          s && l && (j ? /* @__PURE__ */ e(
-            B,
+          m && s && (j ? /* @__PURE__ */ e(
+            F,
             {
               trigger: /* @__PURE__ */ a(
                 "button",
                 {
-                  onClick: l,
+                  onClick: s,
                   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
+                    /* @__PURE__ */ e(c, { iconKey: "fa-light fa-file-pen", size: "sm" }),
+                    m
                   ]
                 }
               ),
@@ -70,37 +71,38 @@ function X({
           ) : /* @__PURE__ */ a(
             "button",
             {
-              onClick: l,
+              onClick: s,
               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
+                /* @__PURE__ */ e(c, { iconKey: "fa-light fa-file-pen", size: "sm" }),
+                m
               ]
             }
           ))
         ] }),
-        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" }) })
+        y && /* @__PURE__ */ e("button", { onClick: y, className: i.removeItem, "aria-label": "Remove item", type: "button", children: /* @__PURE__ */ e(c, { iconKey: "fa-regular fa-trash", size: "sm" }) })
       ] }),
       /* @__PURE__ */ a("div", { className: i.itemManagement, children: [
         /* @__PURE__ */ a("div", { className: i.purchaseInformation, children: [
-          /* @__PURE__ */ e("div", { className: i.availabilitySlot, children: f && /* @__PURE__ */ e(
-            T,
+          /* @__PURE__ */ e("div", { className: i.availabilitySlot, children: h && /* @__PURE__ */ e(
+            A,
             {
-              availId: x || "",
-              availDescription: f,
-              contactHref: P || "",
-              contactLinkBehavior: S
+              availId: P || "",
+              availDescription: h,
+              contactHref: S || "",
+              contactLinkBehavior: w
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: i.priceSlot, children: h && /* @__PURE__ */ e(v, { pricingLabel: w, price: h }) })
+          /* @__PURE__ */ e("div", { className: i.priceSlot, children: u && /* @__PURE__ */ e(B, { pricingLabel: M, price: u }) })
         ] }),
-        typeof u == "number" && p && /* @__PURE__ */ e("div", { className: i.quantitySlot, children: /* @__PURE__ */ e(
-          A,
+        typeof p == "number" && b && /* @__PURE__ */ e("div", { className: i.quantitySlot, children: /* @__PURE__ */ e(
+          D,
           {
-            quantity: u,
-            onQuantityChange: p,
+            quantity: p,
+            onQuantityChange: b,
+            max: v,
             size: "sm"
           }
         ) })
@@ -109,5 +111,5 @@ function X({
   ] });
 }
 export {
-  X as CartPart
+  $ as CartPart
 };

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

@@ -25,6 +25,7 @@ declare const meta: {
         priceLabel: string;
         price: string;
         quantity: number;
+        maxQuantity: undefined;
         requiresUnitDetails: false;
         onQuantityChange: () => void;
         onRemove: () => void;
@@ -36,3 +37,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
 export declare const CustomSpecs: Story;
 export declare const WithoutAvailability: Story;
+export declare const MaxQuantityCapped: Story;

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

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
-import { CartPart as i } from "./CartPart.js";
-const l = {
+import { CartPart as a } from "./CartPart.js";
+const r = {
   title: "Case Parts/Molecules/CartPart",
-  component: i,
+  component: a,
   parameters: {
     layout: "centered"
   },
@@ -25,6 +25,7 @@ const l = {
     priceLabel: "List Price",
     price: "$99.99",
     quantity: 1,
+    maxQuantity: void 0,
     requiresUnitDetails: !1,
     onQuantityChange: () => {
     },
@@ -35,8 +36,8 @@ const l = {
     }
   }
 }, n = {
-  render: (a) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(i, { ...a }) }) })
-}, o = {
+  render: (i) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(a, { ...i }) }) })
+}, d = {
   args: {
     title: "Custom-Molded Snap-In Magnetic Gasket",
     partNumber: 'MG064 36" x 79" 3-Sided Dart-to-Dart Gasket',
@@ -45,18 +46,27 @@ const l = {
     availability: "Contact us for availability",
     price: "$129.99"
   },
-  render: (a) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(i, { ...a }) }) })
+  render: (i) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(a, { ...i }) }) })
 }, s = {
   args: {
     availabilityId: void 0,
     availability: void 0,
     price: "$99.99"
   },
-  render: (a) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(i, { ...a }) }) })
+  render: (i) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(a, { ...i }) }) })
+}, o = {
+  args: {
+    availabilityId: "limited",
+    availability: "Discontinued - limited stock",
+    quantity: 2,
+    maxQuantity: 2
+  },
+  render: (i) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(a, { ...i }) }) })
 };
 export {
   n as Basic,
-  o as CustomSpecs,
+  d as CustomSpecs,
+  o as MaxQuantityCapped,
   s as WithoutAvailability,
-  l as default
+  r as default
 };

package/dist/molecules/Cart/CartSlideInPanel.js

@@ -1,45 +1,45 @@
-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 { jsx as i, jsxs as r } from "react/jsx-runtime";
+import { SlideInPanel as z } from "../../atoms/SlideInPanel/SlideInPanel.js";
+import { Text as l } 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: u,
+import { Icon as u } from "../../atoms/Icon/Icon.js";
+import { CartPart as C } from "./CartPart.js";
+import { s as t } from "../../Cart.module-Jz43jenN.js";
+function w({
+  open: p,
   onClose: s,
   cart: a,
   subtotal: n,
-  itemPriceLabel: p,
-  contactHref: y,
-  contactLinkBehavior: b,
-  onItemQtyChange: f,
-  onItemDelete: g,
+  itemPriceLabel: y,
+  contactHref: f,
+  contactLinkBehavior: g,
+  onItemQtyChange: b,
+  onItemDelete: k,
   onUnitEditClick: d,
   onItemNavigate: m,
-  requiresUnitDetails: k = !1,
+  requiresUnitDetails: v = !1,
   onCheckout: o
 }) {
   var c;
   return a = a || { items: [] }, /* @__PURE__ */ i(
-    C,
+    z,
     {
       side: "right",
-      open: u,
+      open: p,
       onClose: s,
       ariaLabel: "Shopping Cart",
-      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: [
+      children: /* @__PURE__ */ r("div", { id: "cart-panel", className: t.cartContainer, children: [
+        /* @__PURE__ */ r("div", { className: t.headerWrapper, children: [
+          /* @__PURE__ */ r("div", { className: t.header, children: [
+            /* @__PURE__ */ i(l, { size: "2xl", children: "Cart" }),
+            /* @__PURE__ */ r(l, { 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(z, { iconKey: "fa-regular fa-xmark", size: "md" }) })
+          /* @__PURE__ */ i("button", { onClick: s, children: /* @__PURE__ */ i(u, { iconKey: "fa-regular fa-xmark", size: "md" }) })
         ] }),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ r(
           h,
           {
             disabled: a.items.length === 0,
@@ -47,11 +47,14 @@ function L({
             variant: "secondary",
             size: "md",
             className: t.checkoutButton,
-            children: "Checkout"
+            children: [
+              "Proceed to Checkout",
+              /* @__PURE__ */ i(u, { iconKey: "fa-regular fa-arrow-right-long", size: "sm" })
+            ]
           }
         ),
         /* @__PURE__ */ i("div", { className: t.cartItems, children: a.items.length > 0 ? /* @__PURE__ */ i("ul", { children: a.items.map((e) => /* @__PURE__ */ i(
-          x,
+          C,
           {
             imageUrl: e.imageUrl,
             imageAlt: `${e.itemId} product image`,
@@ -66,21 +69,22 @@ function L({
             custom: !!e.custom,
             availabilityId: e.availabilityId,
             availability: e.availability,
-            contactHref: y,
-            contactLinkBehavior: b,
+            contactHref: f,
+            contactLinkBehavior: g,
             price: e.price,
-            priceLabel: p || "List Price",
+            priceLabel: y || "List Price",
             quantity: e.quantity,
-            onQuantityChange: (v) => f(e, v),
-            onRemove: () => g(e),
+            maxQuantity: e.maxQuantity,
+            onQuantityChange: (x) => b(e, x),
+            onRemove: () => k(e),
             onUnitEditClick: d ? () => d(e) : void 0,
-            requiresUnitDetails: k
+            requiresUnitDetails: v
           },
           `${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("div", { className: t.noItems, children: /* @__PURE__ */ i(l, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
+        n && /* @__PURE__ */ r("div", { className: t.subtotal, children: [
+          /* @__PURE__ */ i(l, { size: "md", weight: "semibold", children: "Subtotal" }),
+          /* @__PURE__ */ i(l, { size: "md", weight: "semibold", children: n })
         ] }),
         /* @__PURE__ */ i(
           h,
@@ -98,5 +102,5 @@ function L({
   );
 }
 export {
-  L as CartSlideInPanel
+  w as CartSlideInPanel
 };

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

@@ -23,5 +23,6 @@ export interface ProductProps extends AvailabilityProps {
     showQuantity?: boolean;
     onLinkClicked?: (_itemKey: number) => void;
     requiresUnitDetails?: boolean;
+    maxQuantity?: number;
 }
-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;
+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, maxQuantity, ...otherProps }: ProductProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Product/Product.js

@@ -1,31 +1,31 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Image as A } from "../../atoms/Image/Image.js";
-import { Link as R } from "../../atoms/Link/Link.js";
+import { Image as R } from "../../atoms/Image/Image.js";
+import { Link as $ } from "../../atoms/Link/Link.js";
 import { Text as n } from "../../atoms/Text/Text.js";
-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,
+import { Availability as P } from "../../molecules/Availability/Availability.js";
+import { Pricing as j } from "../../molecules/Pricing/Pricing.js";
+import { AddToCart as D } from "../../molecules/AddToCart/AddToCart.js";
+import { Icon as F } from "../../atoms/Icon/Icon.js";
+import { c as V } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Product.css';const G = "_productCard_nx8r7_3", J = "_sm_nx8r7_15", M = "_productInformation_nx8r7_25", O = "_purchaseInformation_nx8r7_32", W = "_addToCart_nx8r7_40", X = "_addToCartButton_nx8r7_43", Y = "_partNumber_nx8r7_53", Z = "_partNumberLabel_nx8r7_60", q = "_productTile_nx8r7_64", U = "_topRow_nx8r7_83", y = "_productData_nx8r7_114", H = "_purchase_nx8r7_32", K = "_attributeContainer_nx8r7_151", L = "_elevated_nx8r7_199", Q = "_noImage_nx8r7_205", r = {
+  productCard: G,
+  sm: J,
+  productInformation: M,
+  purchaseInformation: O,
+  addToCart: W,
+  addToCartButton: X,
+  partNumber: Y,
+  partNumberLabel: Z,
+  productTile: q,
+  topRow: U,
   productData: y,
-  purchase: U,
-  attributeContainer: H,
-  elevated: Q,
-  noImage: K
+  purchase: H,
+  attributeContainer: K,
+  elevated: L,
+  noImage: Q
 };
-function er({
-  productView: V,
+function nr({
+  productView: E,
   itemKey: c,
   partNumber: s,
   productDescription: h,
@@ -46,23 +46,24 @@ function er({
   showQuantity: _ = !0,
   onLinkClicked: e,
   requiresUnitDetails: w = !1,
-  ...B
+  maxQuantity: B,
+  ...A
 }) {
   const u = a === "sm" ? "xs" : "sm";
-  return V === "Card" ? /* @__PURE__ */ o(
+  return E === "Card" ? /* @__PURE__ */ o(
     "div",
     {
-      className: D(
+      className: V(
         r.productCard,
         a && r[a],
         g,
         !I && r.elevated,
         !d && r.noImage
       ),
-      ...B,
+      ...A,
       children: [
         d && /* @__PURE__ */ t(
-          A,
+          R,
           {
             src: d,
             alt: `${s} product image`,
@@ -71,7 +72,7 @@ function er({
           }
         ),
         /* @__PURE__ */ o("div", { className: r.productInformation, children: [
-          /* @__PURE__ */ t(R, { onClick: () => e == null ? void 0 : e(c), size: a, href: f || "#", children: h }),
+          /* @__PURE__ */ t($, { 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: s })
@@ -79,7 +80,7 @@ function er({
         ] }),
         /* @__PURE__ */ o("div", { className: r.purchaseInformation, children: [
           m && /* @__PURE__ */ t(
-            $,
+            P,
             {
               availId: m,
               availDescription: x,
@@ -87,13 +88,14 @@ function er({
               contactLinkBehavior: N
             }
           ),
-          l && /* @__PURE__ */ t(P, { pricingLabel: T, price: l })
+          l && /* @__PURE__ */ t(j, { pricingLabel: T, price: l })
         ] }),
         /* @__PURE__ */ t(
-          j,
+          D,
           {
             itemKey: c,
             onAdd: C,
+            max: B,
             className: r.addToCart,
             addButtonClassName: r.addToCartButton,
             addButtonVariant: _ ? "cta-primary" : "secondary",
@@ -106,15 +108,15 @@ function er({
         )
       ]
     }
-  ) : /* @__PURE__ */ o("div", { className: D(
+  ) : /* @__PURE__ */ o("div", { className: V(
     r.productTile,
     g,
     a && r[a],
     !I && r.elevated,
     !d && r.noImage
-  ), ...B, children: [
+  ), ...A, children: [
     d && /* @__PURE__ */ t(
-      A,
+      R,
       {
         src: d,
         alt: `${s} product image`,
@@ -125,18 +127,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(R, { onClick: () => e == null ? void 0 : e(c), size: a, href: f || "#", children: h }),
+          /* @__PURE__ */ t($, { 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: s })
           ] })
         ] }),
-        v && /* @__PURE__ */ t("button", { onClick: () => v(c), children: /* @__PURE__ */ t(E, { size: "sm", iconKey: "fa-light fa-xmark" }) })
+        v && /* @__PURE__ */ t("button", { onClick: () => v(c), children: /* @__PURE__ */ t(F, { size: "sm", iconKey: "fa-light fa-xmark" }) })
       ] }),
       /* @__PURE__ */ o("div", { className: r.purchase, children: [
         /* @__PURE__ */ o("div", { className: r.purchaseInformation, children: [
           m && /* @__PURE__ */ t(
-            $,
+            P,
             {
               availId: m,
               availDescription: x,
@@ -144,9 +146,9 @@ function er({
               contactLinkBehavior: N
             }
           ),
-          l && /* @__PURE__ */ t(P, { pricingLabel: T, price: l })
+          l && /* @__PURE__ */ t(j, { pricingLabel: T, price: l })
         ] }),
-        /* @__PURE__ */ t(j, { size: a, itemKey: c, onAdd: C, className: r.addToCart, addButtonClassName: r.addToCartButton, requiresUnitDetails: w })
+        /* @__PURE__ */ t(D, { size: a, itemKey: c, onAdd: C, max: B, 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: [
@@ -159,5 +161,5 @@ function er({
   ] });
 }
 export {
-  er as Product
+  nr as Product
 };

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

@@ -83,6 +83,10 @@ declare const meta: {
             control: "boolean";
             description: string;
         };
+        maxQuantity: {
+            control: "number";
+            description: string;
+        };
     };
     args: ProductProps;
     tags: string[];
@@ -98,3 +102,5 @@ export declare const DifferentPriceLabel: Story;
 export declare const NoImageCard: Story;
 export declare const FlatTile: Story;
 export declare const NoImageFlatCard: Story;
+export declare const MaxQuantityCard: Story;
+export declare const MaxQuantityTile: Story;

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

@@ -1,5 +1,5 @@
-import { Product as a } from "./Product.js";
-const o = [
+import { Product as e } from "./Product.js";
+const i = [
   { label: "Color", value: "Gray" },
   { label: "Brand", value: "Kason" },
   { label: "Finish", value: "Chrome" },
@@ -13,7 +13,7 @@ const o = [
   { label: "Attribute", value: "Placeholder" }
 ], r = {
   title: "Case Parts/Organisms/Product",
-  component: a,
+  component: e,
   parameters: { layout: "centered" },
   argTypes: {
     productView: {
@@ -53,7 +53,8 @@ const o = [
       options: ["md", "sm"]
     },
     showQuantity: { control: "boolean", description: "Shows/Hides add to cart quantity" },
-    requiresUnitDetails: { control: "boolean", description: "Shows unit details tooltip on add button" }
+    requiresUnitDetails: { control: "boolean", description: "Shows unit details tooltip on add button" },
+    maxQuantity: { control: "number", description: "Maximum quantity allowed in AddToCart" }
   },
   args: {
     productView: "Card",
@@ -70,9 +71,9 @@ const o = [
     price: "$129.99",
     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, e) => {
-      alert(`Add to cart (story) ${JSON.stringify({ itemKey: t, quantity: e })}`);
+    attributes: i,
+    onAddToCart: (t, a) => {
+      alert(`Add to cart (story) ${JSON.stringify({ itemKey: t, quantity: a })}`);
     },
     onClose: (t) => {
       alert(`On close clicked ${t}`);
@@ -80,15 +81,16 @@ const o = [
     flat: !1,
     size: "md",
     showQuantity: !0,
-    requiresUnitDetails: !1
+    requiresUnitDetails: !1,
+    maxQuantity: void 0
   },
   tags: ["autodocs"]
-}, l = {}, c = {
+}, l = {}, n = {
   args: {
     availId: "limited",
     availDescription: "Limited stock"
   }
-}, n = {
+}, c = {
   args: {
     availId: "unavailable",
     availDescription: "Out of stock",
@@ -116,27 +118,43 @@ const o = [
     productView: "Card",
     imgSrc: void 0
   }
-}, b = {
+}, v = {
   args: {
     productView: "Tile",
     flat: !0
   }
-}, v = {
+}, m = {
   args: {
     productView: "Card",
     imgSrc: void 0,
     flat: !0
   }
+}, b = {
+  args: {
+    productView: "Card",
+    availId: "limited",
+    availDescription: "This part is discontinued and stock is limited",
+    maxQuantity: 2
+  }
+}, y = {
+  args: {
+    productView: "Tile",
+    availId: "limited",
+    availDescription: "This part is discontinued and stock is limited",
+    maxQuantity: 3
+  }
 };
 export {
   s as ContactForAvailability,
   l as Default,
   p as DifferentPriceLabel,
-  b as FlatTile,
-  c as LimitedStock,
+  v as FlatTile,
+  n as LimitedStock,
+  b as MaxQuantityCard,
+  y as MaxQuantityTile,
   u as NoImageCard,
-  v as NoImageFlatCard,
+  m as NoImageFlatCard,
   d as TileView,
-  n as Unavailable,
+  c as Unavailable,
   r as default
 };

package/package.json

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

package/dist/Cart.module-B0W9CeI5.js

@@ -1,25 +0,0 @@
-import './assets/Cart.css';const t = "_cartIconButton_a7g4s_2", a = "_count_a7g4s_9", o = "_cartContainer_a7g4s_24", e = "_headerWrapper_a7g4s_35", n = "_header_a7g4s_35", _ = "_cartItems_a7g4s_53", s = "_cartItem_a7g4s_53", c = "_topRow_a7g4s_79", r = "_itemInfo_a7g4s_85", i = "_editUnit_a7g4s_90", m = "_purchaseInformation_a7g4s_104", g = "_availabilitySlot_a7g4s_110", I = "_priceSlot_a7g4s_113", u = "_itemManagement_a7g4s_116", l = "_quantitySlot_a7g4s_122", p = "_itemImage_a7g4s_132", h = "_removeItem_a7g4s_135", d = "_noItems_a7g4s_145", S = "_subtotal_a7g4s_152", y = "_checkoutButton_a7g4s_159", b = {
-  cartIconButton: t,
-  count: a,
-  cartContainer: o,
-  headerWrapper: e,
-  header: n,
-  cartItems: _,
-  cartItem: s,
-  topRow: c,
-  itemInfo: r,
-  editUnit: i,
-  purchaseInformation: m,
-  availabilitySlot: g,
-  priceSlot: I,
-  itemManagement: u,
-  quantitySlot: l,
-  itemImage: p,
-  removeItem: h,
-  noItems: d,
-  subtotal: S,
-  checkoutButton: y
-};
-export {
-  b as s
-};