@caseparts-org/caseblocks 0.0.160 → 0.0.161

package/dist/Cart.module-B-yc1ax6.js

@@ -0,0 +1,21 @@
+import './assets/Cart.css';const t = "_cartIconButton_5jpfu_2", e = "_count_5jpfu_9", o = "_cartContainer_5jpfu_24", n = "_headerWrapper_5jpfu_35", _ = "_header_5jpfu_35", c = "_cartItems_5jpfu_53", a = "_cartItem_5jpfu_53", r = "_topRow_5jpfu_79", u = "_itemInfo_5jpfu_85", m = "_purchaseInformation_5jpfu_90", s = "_itemManagement_5jpfu_97", p = "_itemImage_5jpfu_110", I = "_removeItem_5jpfu_113", f = "_noItems_5jpfu_123", j = "_subtotal_5jpfu_130", i = "_checkoutButton_5jpfu_137", h = {
+  cartIconButton: t,
+  count: e,
+  cartContainer: o,
+  headerWrapper: n,
+  header: _,
+  cartItems: c,
+  cartItem: a,
+  topRow: r,
+  itemInfo: u,
+  purchaseInformation: m,
+  itemManagement: s,
+  itemImage: p,
+  removeItem: I,
+  noItems: f,
+  subtotal: j,
+  checkoutButton: i
+};
+export {
+  h as s
+};

package/dist/assets/Cart.css

@@ -1 +1 @@
-._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%}
+._cartIconButton_5jpfu_2{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_5jpfu_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_5jpfu_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_5jpfu_35{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._headerWrapper_5jpfu_35>button{padding:0;margin:0;background-color:transparent;border:none}._header_5jpfu_35{display:flex;flex-direction:column;align-items:flex-start;width:100%}._cartItems_5jpfu_53{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_5jpfu_53 ul{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-spacing-1xs)}._cartItem_5jpfu_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_5jpfu_79{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}._itemInfo_5jpfu_85{display:flex;flex-direction:column;align-items:flex-start}._purchaseInformation_5jpfu_90{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._itemManagement_5jpfu_97{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-spacing-3xs)}._cartItem_5jpfu_53 p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._itemImage_5jpfu_110{object-fit:contain}._removeItem_5jpfu_113{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;width:min-content;height:min-content}._noItems_5jpfu_123{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_5jpfu_130{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}._checkoutButton_5jpfu_137{width:100%}

package/dist/main-client.d.ts

@@ -19,6 +19,8 @@ export type { ChipProps } from './molecules/Chip/Chip';
 export { ToggleView } from './molecules/ToggleView/ToggleView';
 export type { ToggleViewProps, ToggleOptionProps, ToggleOptionBaseProps, } from './molecules/ToggleView/ToggleView';
 export type { ShoppingCart, CartItem } from './molecules/Cart/Cart';
+export { CartPart } from './molecules/Cart/CartPart';
+export type { CartPartProps } from './molecules/Cart/CartPart';
 export { CartSlideInPanel } from './molecules/Cart/CartSlideInPanel';
 export type { CartSlideInPanelProps } from './molecules/Cart/CartSlideInPanel';
 export type { StatefulButtonProps } from './molecules/StatefulButton/StatefulButton';

package/dist/main-client.js

@@ -5,9 +5,9 @@ import { Head as n } from "./atoms/Root/Head.js";
 import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as u } from "./atoms/Root/Root.js";
 import { Separator as s } from "./atoms/Separator/Separator.js";
-import { Text as C } from "./atoms/Text/Text.js";
+import { Text as k } from "./atoms/Text/Text.js";
 import { Input as S } from "./atoms/Input/Input.js";
-import { Link as P } from "./atoms/Link/Link.js";
+import { Link as I } from "./atoms/Link/Link.js";
 import { linkClassName as A } from "./atoms/Link/linkClassName.js";
 import { configureLink as M, routerOverride as T } from "./atoms/Link/configureLink.js";
 import { LinkButton as L } from "./atoms/LinkButton/LinkButton.js";
@@ -23,80 +23,82 @@ import { BannerCard as J } from "./molecules/BannerCard/BannerCard.js";
 import { CardLink as U } from "./molecules/CardLink/CardLink.js";
 import { Breadcrumbs as X } from "./molecules/Breadcrumbs/Breadcrumbs.js";
 import { NotFound as _ } from "./organisms/NotFound/NotFound.js";
-import { HorizontalScroll as oo } from "./atoms/HorizontalScroll/HorizontalScroll.js";
-import { SlideInPanel as eo } from "./atoms/SlideInPanel/SlideInPanel.js";
-import { Markdown as po } from "./atoms/Markdown/Markdown.js";
-import { PreprocessedMarkdown as fo } from "./atoms/Markdown/PreprocessedMarkdown.js";
-import { usePreprocessedMarkdown as ao } from "./atoms/Markdown/usePreprocessedMarkdown.js";
-import { Tooltip as io } from "./atoms/Tooltip/Tooltip.js";
-import { Popover as uo } from "./atoms/Popover/Popover.js";
-import { Account as so } from "./molecules/Account/Account.js";
-import { Chip as Co } from "./molecules/Chip/Chip.js";
-import { ToggleView as So } from "./molecules/ToggleView/ToggleView.js";
-import { CartSlideInPanel as Po } from "./molecules/Cart/CartSlideInPanel.js";
-import { StatefulButton as Ao } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as Mo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as vo } from "./molecules/AddToCart/AddToCart.js";
-import { Modal as ho } from "./molecules/Modal/Modal.js";
-import { ImageViewer as yo } from "./molecules/ImageViewer/ImageViewer.js";
-import { T as Ho } from "./Table-BX4PtCNE.js";
-import { Error as Vo } from "./molecules/Error/Error.js";
-import { MainNav as Eo } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as Oo } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as Ro } from "./organisms/Product/Product.js";
-import { Carousel as jo } from "./organisms/Carousel/Carousel.js";
-import { Footer as Do } from "./organisms/Footer/Footer.js";
-import { default as Ko } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
+import { HorizontalScroll as rr } from "./atoms/HorizontalScroll/HorizontalScroll.js";
+import { SlideInPanel as er } from "./atoms/SlideInPanel/SlideInPanel.js";
+import { Markdown as pr } from "./atoms/Markdown/Markdown.js";
+import { PreprocessedMarkdown as fr } from "./atoms/Markdown/PreprocessedMarkdown.js";
+import { usePreprocessedMarkdown as ar } from "./atoms/Markdown/usePreprocessedMarkdown.js";
+import { Tooltip as ir } from "./atoms/Tooltip/Tooltip.js";
+import { Popover as dr } from "./atoms/Popover/Popover.js";
+import { Account as cr } from "./molecules/Account/Account.js";
+import { Chip as Cr } from "./molecules/Chip/Chip.js";
+import { ToggleView as gr } from "./molecules/ToggleView/ToggleView.js";
+import { CartPart as Pr } from "./molecules/Cart/CartPart.js";
+import { CartSlideInPanel as wr } from "./molecules/Cart/CartSlideInPanel.js";
+import { StatefulButton as Br } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as Tr } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as Lr } from "./molecules/AddToCart/AddToCart.js";
+import { Modal as br } from "./molecules/Modal/Modal.js";
+import { ImageViewer as Fr } from "./molecules/ImageViewer/ImageViewer.js";
+import { T as Nr } from "./Table-BX4PtCNE.js";
+import { Error as zr } from "./molecules/Error/Error.js";
+import { MainNav as Gr } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as Qr } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Zr } from "./organisms/Product/Product.js";
+import { Carousel as qr } from "./organisms/Carousel/Carousel.js";
+import { Footer as Jr } from "./organisms/Footer/Footer.js";
+import { default as Ur } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
 export {
-  so as Account,
-  vo as AddToCart,
-  Mo as AnimatedCheckMark,
+  cr as Account,
+  Lr as AddToCart,
+  Tr as AnimatedCheckMark,
   Z as Availability,
   q as Avatar,
   J as BannerCard,
   X as Breadcrumbs,
   e as Button,
   U as CardLink,
-  jo as Carousel,
-  Po as CartSlideInPanel,
-  Co as Chip,
-  Oo as ChipSelector,
+  qr as Carousel,
+  Pr as CartPart,
+  wr as CartSlideInPanel,
+  Cr as Chip,
+  Qr as ChipSelector,
   f as Column,
-  Vo as Error,
+  zr as Error,
   p as Flex,
-  Do as Footer,
+  Jr as Footer,
   x as Grid,
   n as Head,
-  oo as HorizontalScroll,
+  rr as HorizontalScroll,
   l as Icon,
-  yo as ImageViewer,
+  Fr as ImageViewer,
   S as Input,
-  P as Link,
+  I as Link,
   L as LinkButton,
   N as Logo,
-  Eo as MainNav,
-  po as Markdown,
-  ho as Modal,
+  Gr as MainNav,
+  pr as Markdown,
+  br as Modal,
   _ as NotFound,
-  uo as Popover,
-  fo as PreprocessedMarkdown,
+  dr as Popover,
+  fr as PreprocessedMarkdown,
   Q as Pricing,
-  Ro as Product,
+  Zr as Product,
   G as QuantityInput,
   u as Root,
   z as SearchBox,
   s as Separator,
-  eo as SlideInPanel,
-  Ko as SpinZoomViewer,
-  Ao as StatefulButton,
-  Ho as Table,
-  C as Text,
-  So as ToggleView,
-  io as Tooltip,
+  er as SlideInPanel,
+  Ur as SpinZoomViewer,
+  Br as StatefulButton,
+  Nr as Table,
+  k as Text,
+  gr as ToggleView,
+  ir as Tooltip,
   b as configureImage,
   M as configureLink,
   F as getHideAtStyles,
   A as linkClassName,
   T as routerOverride,
-  ao as usePreprocessedMarkdown
+  ar as usePreprocessedMarkdown
 };

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

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
+    imageUrl?: string;
+    imageAlt?: string;
+    title: React.ReactNode;
+    titleHref?: string;
+    subtitle?: React.ReactNode;
+    topAction?: React.ReactNode;
+    purchaseInfo?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+export declare function CartPart({ imageUrl, imageAlt, title, titleHref, subtitle, topAction, purchaseInfo, actions, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Cart/CartPart.js

@@ -0,0 +1,38 @@
+import { jsxs as e, jsx as m } from "react/jsx-runtime";
+import { Link as p } from "../../atoms/Link/Link.js";
+import { Text as o } from "../../atoms/Text/Text.js";
+import { s as i } from "../../Cart.module-B-yc1ax6.js";
+import { Image as g } from "../../atoms/Image/Image.js";
+import { c as N } from "../../clsx-OuTLNxxd.js";
+function z({
+  imageUrl: t,
+  imageAlt: d = "Product image",
+  title: r,
+  titleHref: s,
+  subtitle: a,
+  topAction: l,
+  purchaseInfo: c,
+  actions: n,
+  className: h,
+  ...f
+}) {
+  return /* @__PURE__ */ e("li", { className: N(i.cartItem, h), ...f, children: [
+    /* @__PURE__ */ m(g, { height: 50, width: 50, src: t || "", alt: d, className: i.itemImage }),
+    /* @__PURE__ */ e("div", { children: [
+      /* @__PURE__ */ e("div", { className: i.topRow, children: [
+        /* @__PURE__ */ e("div", { className: i.itemInfo, children: [
+          /* @__PURE__ */ m(o, { size: "sm", weight: "semibold", children: s ? /* @__PURE__ */ m(p, { href: s, children: r }) : r }),
+          a && /* @__PURE__ */ m(o, { size: "sm", children: a })
+        ] }),
+        l
+      ] }),
+      /* @__PURE__ */ e("div", { className: i.itemManagement, children: [
+        c && /* @__PURE__ */ m("div", { className: i.purchaseInformation, children: c }),
+        n
+      ] })
+    ] })
+  ] });
+}
+export {
+  z as CartPart
+};

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react-vite';
+import { CartPart } from './CartPart';
+declare const meta: {
+    title: string;
+    component: typeof CartPart;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        imageUrl: string;
+        imageAlt: string;
+        title: string;
+        titleHref: string;
+        subtitle: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const CustomSpecs: Story;

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

@@ -0,0 +1,80 @@
+import { jsxs as e, jsx as t, Fragment as a } from "react/jsx-runtime";
+import { Text as n } from "../../atoms/Text/Text.js";
+import { Icon as s } from "../../atoms/Icon/Icon.js";
+import { Button as l } from "../../atoms/Button/Button.js";
+import { Availability as o } from "../Availability/Availability.js";
+import { Pricing as c } from "../Pricing/Pricing.js";
+import { QuantityInput as d } from "../QuantityInput/QuantityInput.js";
+import { CartPart as r } from "./CartPart.js";
+const v = {
+  title: "Case Parts/Molecules/CartPart",
+  component: r,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  args: {
+    imageUrl: "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg",
+    imageAlt: "1094-01 product image",
+    title: "Kason Door Closer - Flush",
+    titleHref: "#",
+    subtitle: /* @__PURE__ */ e(a, { children: [
+      /* @__PURE__ */ t(n, { colorToken: "quaternary", size: "xs", children: "Part # " }),
+      "1094-01"
+    ] })
+  }
+}, I = {
+  args: {
+    purchaseInfo: /* @__PURE__ */ e(a, { children: [
+      /* @__PURE__ */ t(
+        o,
+        {
+          availId: "available",
+          availDescription: "In Stock",
+          contactHref: "#",
+          contactLinkBehavior: "new-tab"
+        }
+      ),
+      /* @__PURE__ */ t(c, { pricingLabel: "List Price", price: "$99.99" })
+    ] }),
+    actions: /* @__PURE__ */ t(
+      d,
+      {
+        quantity: 1,
+        onQuantityChange: () => {
+        },
+        size: "sm"
+      }
+    ),
+    topAction: /* @__PURE__ */ t("button", { type: "button", "aria-label": "Remove item", style: { border: "none", background: "transparent", padding: 0 }, children: /* @__PURE__ */ t(s, { iconKey: "fa-regular fa-trash", size: "sm" }) })
+  },
+  render: (i) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(r, { ...i }) }) })
+}, k = {
+  args: {
+    title: "Custom-Molded Snap-In Magnetic Gasket",
+    subtitle: /* @__PURE__ */ e(a, { children: [
+      /* @__PURE__ */ t(n, { colorToken: "quaternary", size: "xs", children: "Specs " }),
+      'MG064 36\\" x 79\\" 3-Sided Dart-to-Dart Gasket'
+    ] }),
+    purchaseInfo: /* @__PURE__ */ e(a, { children: [
+      /* @__PURE__ */ t(
+        o,
+        {
+          availId: "contact",
+          availDescription: "Contact us for availability",
+          contactHref: "#",
+          contactLinkBehavior: "new-tab"
+        }
+      ),
+      /* @__PURE__ */ t(c, { pricingLabel: "List Price", price: "$129.99" })
+    ] }),
+    actions: /* @__PURE__ */ t(l, { type: "button", variant: "secondary", size: "sm", children: "Remove" }),
+    topAction: null
+  },
+  render: (i) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(r, { ...i }) }) })
+};
+export {
+  I as Basic,
+  k as CustomSpecs,
+  v as default
+};

package/dist/molecules/Cart/CartSlideInPanel.js

@@ -1,31 +1,31 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { SlideInPanel as y } from "../../atoms/SlideInPanel/SlideInPanel.js";
+import { jsx as e, jsxs as a, Fragment as s } from "react/jsx-runtime";
+import { SlideInPanel as b } from "../../atoms/SlideInPanel/SlideInPanel.js";
 import { Text as n } from "../../atoms/Text/Text.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 { Button as I } from "../../atoms/Button/Button.js";
+import { Pricing as z } from "../Pricing/Pricing.js";
+import { QuantityInput as k } from "../QuantityInput/QuantityInput.js";
+import { Availability as C } 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: o,
+import { CartPart as N } from "./CartPart.js";
+import { s as r } from "../../Cart.module-B-yc1ax6.js";
+function j({
+  open: d,
   onClose: l,
   cart: t,
   subtotal: m,
-  itemPriceLabel: d,
-  contactHref: h,
-  contactLinkBehavior: p,
-  onItemQtyChange: u,
-  onItemDelete: f,
-  onCheckout: v
+  itemPriceLabel: h,
+  contactHref: p,
+  contactLinkBehavior: u,
+  onItemQtyChange: f,
+  onItemDelete: g,
+  onCheckout: y
 }) {
-  var s;
+  var o;
   return t = t || { items: [] }, /* @__PURE__ */ e(
-    y,
+    b,
     {
       side: "right",
-      open: o,
+      open: d,
       onClose: l,
       ariaLabel: "Shopping Cart",
       children: /* @__PURE__ */ a("div", { id: "cart-panel", className: r.cartContainer, children: [
@@ -33,58 +33,56 @@ function H({
           /* @__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,
+              (o = t == null ? void 0 : t.items) == null ? void 0 : o.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: 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__ */ 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: () => f(i), className: r.removeItem, "aria-label": "Remove item", children: /* @__PURE__ */ e(c, { iconKey: "fa-regular fa-trash", size: "sm" }) })
+        /* @__PURE__ */ e("div", { className: r.cartItems, children: t.items.length > 0 ? /* @__PURE__ */ e("ul", { children: t.items.map((i) => /* @__PURE__ */ e(
+          N,
+          {
+            imageUrl: i.imageUrl,
+            imageAlt: `${i.itemId} product image`,
+            title: i.description,
+            titleHref: i.itemHref || `/part/${i.itemId}`,
+            subtitle: /* @__PURE__ */ a(s, { children: [
+              /* @__PURE__ */ e(n, { colorToken: "quaternary", size: "xs", children: i.custom ? "Specs " : "Part # " }),
+              i.itemId
             ] }),
-            /* @__PURE__ */ a("div", { className: r.itemManagement, children: [
-              /* @__PURE__ */ a("div", { className: r.purchaseInformation, children: [
-                /* @__PURE__ */ e(
-                  k,
-                  {
-                    availId: i.availabilityId || "",
-                    availDescription: i.availability || "",
-                    contactHref: h || "",
-                    contactLinkBehavior: p || "new-tab"
-                  }
-                ),
-                /* @__PURE__ */ e(N, { pricingLabel: d || "List Price", price: i.price })
-              ] }),
+            topAction: /* @__PURE__ */ e("button", { onClick: () => g(i), className: r.removeItem, "aria-label": "Remove item", children: /* @__PURE__ */ e(c, { iconKey: "fa-regular fa-trash", size: "sm" }) }),
+            purchaseInfo: /* @__PURE__ */ a(s, { children: [
               /* @__PURE__ */ e(
-                z,
+                C,
                 {
-                  quantity: i.quantity,
-                  onQuantityChange: (g) => u(i, g),
-                  size: "sm"
+                  availId: i.availabilityId || "",
+                  availDescription: i.availability || "",
+                  contactHref: p || "",
+                  contactLinkBehavior: u || "new-tab"
                 }
-              )
-            ] })
-          ] })
-        ] }, i.id)) }) : /* @__PURE__ */ e("div", { className: r.noItems, children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
+              ),
+              /* @__PURE__ */ e(z, { pricingLabel: h || "List Price", price: i.price })
+            ] }),
+            actions: /* @__PURE__ */ e(
+              k,
+              {
+                quantity: i.quantity,
+                onQuantityChange: (v) => f(i, v),
+                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" }) }) }),
         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: m })
         ] }),
         /* @__PURE__ */ e(
-          b,
+          I,
           {
             disabled: t.items.length === 0,
-            onClick: v,
+            onClick: y,
             variant: "cta-primary",
             size: "md",
             className: r.checkoutButton,
@@ -96,5 +94,5 @@ function H({
   );
 }
 export {
-  H as CartSlideInPanel
+  j as CartSlideInPanel
 };

package/package.json

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

package/dist/Cart.module-gkb4IOVS.js

@@ -1,19 +0,0 @@
-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
-};