@caseparts-org/caseblocks 0.0.89 → 0.0.91

package/dist/main-client.js

@@ -1,18 +1,18 @@
 import { Button as t } from "./atoms/Button/Button.js";
 import { Flex as p } from "./atoms/Flex/Flex.js";
 import { Column as f, Grid as x } from "./atoms/Grid/Grid.js";
-import { Head as n } from "./atoms/Root/Head.js";
-import { Icon as u } from "./atoms/Icon/Icon.js";
+import { Head as a } from "./atoms/Root/Head.js";
+import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as c } from "./atoms/Root/Root.js";
 import { Separator as C } from "./atoms/Separator/Separator.js";
 import { Text as k } from "./atoms/Text/Text.js";
-import { Input as B } from "./atoms/Input/Input.js";
-import { Link as S } from "./atoms/Link/Link.js";
-import { linkClassName as v } from "./atoms/Link/linkClassName.js";
+import { Input as A } from "./atoms/Input/Input.js";
+import { Link as I } from "./atoms/Link/Link.js";
+import { linkClassName as h } from "./atoms/Link/linkClassName.js";
 import { configureLink as T, routerOverride as s } from "./atoms/Link/configureLink.js";
 import { LinkButton as N } from "./atoms/LinkButton/LinkButton.js";
-import { configureImage as H } from "./atoms/Image/configureImage.js";
-import { Logo as P } from "./molecules/Logo/Logo.js";
+import { configureImage as y } from "./atoms/Image/configureImage.js";
+import { Logo as M } from "./molecules/Logo/Logo.js";
 import { SearchBox as w } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as G } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as Q } from "./molecules/Pricing/Pricing.js";
@@ -22,55 +22,57 @@ import { BannerCard as E } from "./molecules/BannerCard/BannerCard.js";
 import { CardLink as K } from "./molecules/CardLink/CardLink.js";
 import { NotFound as W } from "./organisms/NotFound/NotFound.js";
 import { HorizontalScroll as Y } from "./atoms/HorizontalScroll/HorizontalScroll.js";
-import { Tooltip as _ } from "./molecules/Tooltip/Tooltip.js";
-import { Account as oo } from "./molecules/Account/Account.js";
-import { Chip as to } from "./molecules/Chip/Chip.js";
-import { ToggleView as po } from "./molecules/ToggleView/ToggleView.js";
-import { StatefulButton as fo } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as ao } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as io } from "./molecules/AddToCart/AddToCart.js";
-import { MainNav as lo } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as Co } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as ko } from "./organisms/Product/Product.js";
-import { Carousel as Bo } from "./organisms/Carousel/Carousel.js";
-import { Footer as So } from "./organisms/Footer/Footer.js";
+import { SlideInPanel as _ } from "./atoms/SlideInPanel/SlideInPanel.js";
+import { Tooltip as oo } from "./atoms/Tooltip/Tooltip.js";
+import { Account as to } from "./molecules/Account/Account.js";
+import { Chip as po } from "./molecules/Chip/Chip.js";
+import { ToggleView as fo } from "./molecules/ToggleView/ToggleView.js";
+import { StatefulButton as no } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as io } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as uo } from "./molecules/AddToCart/AddToCart.js";
+import { MainNav as Co } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as ko } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Ao } from "./organisms/Product/Product.js";
+import { Carousel as Io } from "./organisms/Carousel/Carousel.js";
+import { Footer as ho } from "./organisms/Footer/Footer.js";
 export {
-  oo as Account,
-  io as AddToCart,
-  ao as AnimatedCheckMark,
+  to as Account,
+  uo as AddToCart,
+  io as AnimatedCheckMark,
   V as Availability,
   q as Avatar,
   E as BannerCard,
   t as Button,
   K as CardLink,
-  Bo as Carousel,
-  to as Chip,
-  Co as ChipSelector,
+  Io as Carousel,
+  po as Chip,
+  ko as ChipSelector,
   f as Column,
   p as Flex,
-  So as Footer,
+  ho as Footer,
   x as Grid,
-  n as Head,
+  a as Head,
   Y as HorizontalScroll,
-  u as Icon,
-  B as Input,
-  S as Link,
+  l as Icon,
+  A as Input,
+  I as Link,
   N as LinkButton,
-  P as Logo,
-  lo as MainNav,
+  M as Logo,
+  Co as MainNav,
   W as NotFound,
   Q as Pricing,
-  ko as Product,
+  Ao as Product,
   G as QuantityInput,
   c as Root,
   w as SearchBox,
   C as Separator,
-  fo as StatefulButton,
+  _ as SlideInPanel,
+  no as StatefulButton,
   k as Text,
-  po as ToggleView,
-  _ as Tooltip,
-  H as configureImage,
+  fo as ToggleView,
+  oo as Tooltip,
+  y as configureImage,
   T as configureLink,
-  v as linkClassName,
+  h as linkClassName,
   s as routerOverride
 };

package/dist/molecules/AddToCart/AddToCart.js

@@ -1,4 +1,4 @@
-import { jsxs as _, jsx as i } from "react/jsx-runtime";
+import { jsxs as S, jsx as d } from "react/jsx-runtime";
 import r from "react";
 import { c as j } from "../../clsx-OuTLNxxd.js";
 import { StatefulButton as v } from "../StatefulButton/StatefulButton.js";
@@ -8,7 +8,7 @@ import '../../assets/AddToCart.css';const w = "_container_1xk40_1", y = {
 };
 function F({
   itemKey: s,
-  initialQuantity: d = 1,
+  initialQuantity: i = 1,
   min: o = 1,
   max: l,
   onQuantityChange: c,
@@ -17,42 +17,42 @@ function F({
   showQuantity: p = !0,
   className: x,
   addButtonClassName: T,
-  buttonText: b,
-  buttonDoneText: k,
+  buttonText: _,
+  buttonDoneText: b,
   size: a
 }) {
-  const [u, A] = r.useState(() => {
-    const e = Number(d) || 1;
+  const [u, k] = r.useState(() => {
+    const e = Number(i) || 1;
     return e < o ? o : e;
-  }), [N, n] = r.useState(!1), t = r.useRef(null);
+  }), [A, n] = r.useState(!1), t = r.useRef(null);
   r.useEffect(() => () => {
     t.current && clearTimeout(t.current);
   }, []);
-  const R = r.useCallback((e) => {
-    A(e), c == null || c(e);
-  }, [c]), S = async () => {
+  const N = r.useCallback((e) => {
+    k(e), c == null || c(e);
+  }, [c]), R = async () => {
     s && (await m(s, u), n(!0), t.current && clearTimeout(t.current), t.current = setTimeout(() => n(!1), f));
   };
-  return /* @__PURE__ */ _("div", { className: j(y.container, x), children: [
-    p && /* @__PURE__ */ i(
+  return /* @__PURE__ */ S("div", { className: j(y.container, x), children: [
+    p && /* @__PURE__ */ d(
       q,
       {
         quantity: u,
-        onQuantityChange: R,
+        onQuantityChange: N,
         min: o,
         max: l,
         size: a || "md"
       }
     ),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ d(
       v,
       {
         size: a || "md",
         variant: "cta-primary",
-        completed: N,
-        onClick: S,
-        text: b,
-        completedText: k,
+        completed: A,
+        onClick: R,
+        text: _,
+        completedText: b,
         disabled: !s,
         className: T
       }

package/dist/molecules/CardLink/CardLink.js

@@ -2,19 +2,19 @@ import { jsx as a, jsxs as e } from "react/jsx-runtime";
 import { Text as r } from "../../atoms/Text/Text.js";
 import { Link as n } from "../../atoms/Link/Link.js";
 import { Image as m } from "../../atoms/Image/Image.js";
-import '../../assets/CardLink.css';const _ = "_card_1yols_1", u = "_cardLink_1yols_24", y = "_callout_1yols_29", T = "_calloutText_1yols_51", g = "_cardImage_1yols_57", p = "_cardBody_1yols_66", h = "_cardTitle_1yols_75", x = "_cardDescription_1yols_83", c = {
+import '../../assets/CardLink.css';const _ = "_card_1yols_1", u = "_cardLink_1yols_24", y = "_callout_1yols_29", h = "_calloutText_1yols_51", g = "_cardImage_1yols_57", T = "_cardBody_1yols_66", p = "_cardTitle_1yols_75", x = "_cardDescription_1yols_83", c = {
   card: _,
   cardLink: u,
   callout: y,
-  calloutText: T,
+  calloutText: h,
   cardImage: g,
-  cardBody: p,
-  cardTitle: h,
+  cardBody: T,
+  cardTitle: p,
   cardDescription: x
 };
 function z({ href: l = "#", src: o, alt: s = "", callout: t = "Customize", title: i = "Title", description: d = "Customizable part description." }) {
   return /* @__PURE__ */ a(n, { href: l, unstyled: !0, className: c.cardLink, children: /* @__PURE__ */ e("div", { className: c.card, children: [
-    /* @__PURE__ */ a(m, { src: o, alt: s, className: c.cardImage }),
+    /* @__PURE__ */ a(m, { src: o, alt: s, width: 208, height: 104, className: c.cardImage }),
     /* @__PURE__ */ a("div", { className: c.callout, children: /* @__PURE__ */ a(r, { size: "xs", weight: "regular", colorToken: "default-inverted", className: c.calloutText, children: t }) }),
     /* @__PURE__ */ e("div", { className: c.cardBody, children: [
       /* @__PURE__ */ a(r, { size: "sm", weight: "regular", colorToken: "secondary", className: c.cardTitle, children: i }),

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { ContactUsLinkBehavior } from '../Availability/Availability';
 export interface CartItem {
     id: string | number;
     itemId: string | undefined;
@@ -17,15 +16,20 @@ export interface ShoppingCart {
 export interface CartPropsBase {
     onItemQtyChange: (_item: CartItem, _newQuantity: number) => void;
     onItemDelete: (_item: CartItem) => void;
-    onItemEdit: (_item: CartItem) => void;
     onCheckout: () => void;
+    cart: ShoppingCart;
     subtotal?: string;
     itemPriceLabel?: string;
-    cart: ShoppingCart;
     contactHref?: string;
-    contactLinkBehavior?: ContactUsLinkBehavior;
+    open?: boolean;
+    onCartClick: () => void;
+}
+export interface ShoppingCartHandle {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
 }
-interface CartProps extends CartPropsBase, React.HtmlHTMLAttributes<HTMLButtonElement> {
+interface CartProps extends CartPropsBase, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
-export declare function ShoppingCart({ cart, onItemQtyChange, onItemDelete, onCheckout, subtotal, contactHref, contactLinkBehavior, itemPriceLabel, ...otherProps }: CartProps): import("react/jsx-runtime").JSX.Element;
+export declare const ShoppingCart: React.ForwardRefExoticComponent<CartProps & React.RefAttributes<ShoppingCartHandle>>;
 export {};

package/dist/molecules/Cart/Cart.js

@@ -1,97 +1,46 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Icon as m } from "../../atoms/Icon/Icon.js";
-import { Text as a } from "../../atoms/Text/Text.js";
-import { Link as u } from "../../atoms/Link/Link.js";
-import { Button as f } from "../../atoms/Button/Button.js";
-import { Tooltip as g } from "../Tooltip/Tooltip.js";
-import { Pricing as v } from "../Pricing/Pricing.js";
-import { QuantityInput as w } from "../QuantityInput/QuantityInput.js";
-import { Availability as x } from "../Availability/Availability.js";
-import '../../assets/Cart.css';const b = "_cart_11wxn_2", y = "_count_11wxn_9", N = "_cartTooltip_11wxn_24", C = "_cartContainer_11wxn_27", z = "_cartItems_11wxn_35", k = "_topRow_11wxn_57", T = "_itemInfo_11wxn_63", L = "_purchaseInformation_11wxn_68", M = "_itemManagement_11wxn_75", R = "_removeItem_11wxn_93", P = "_noItems_11wxn_101", S = "_subtotal_11wxn_108", i = {
-  cart: b,
-  count: y,
-  cartTooltip: N,
-  cartContainer: C,
-  cartItems: z,
-  topRow: k,
-  itemInfo: T,
-  purchaseInformation: L,
-  itemManagement: M,
-  removeItem: R,
-  noItems: P,
-  subtotal: S
-};
-function U({
-  cart: o,
-  onItemQtyChange: s,
-  onItemDelete: c,
-  onCheckout: l,
-  subtotal: r,
-  contactHref: d,
-  contactLinkBehavior: h,
-  itemPriceLabel: p,
-  ..._
-}) {
-  return o = o || { items: [] }, /* @__PURE__ */ t(
-    g,
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import l from "react";
+import { Icon as g } from "../../atoms/Icon/Icon.js";
+import { Text as p } from "../../atoms/Text/Text.js";
+import { s as m } from "../../Cart.module-9txlotpz.js";
+const S = l.forwardRef(function({
+  cart: i,
+  open: t = !1,
+  onCartClick: e,
+  className: c,
+  ...n
+}, o) {
+  i = i || { items: [] }, l.useImperativeHandle(o, () => ({
+    open: () => {
+      t || e();
+    },
+    close: () => {
+      t && e();
+    },
+    toggle: () => {
+      e();
+    }
+  }), [t, e]);
+  const f = (r) => {
+    var s;
+    (s = n.onClick) == null || s.call(n, r), e();
+  };
+  return /* @__PURE__ */ a("div", { className: c, children: /* @__PURE__ */ d(
+    "button",
     {
-      tooltipClassName: i.cartTooltip,
-      trigger: /* @__PURE__ */ n("button", { className: i.cart, tabIndex: 0, ..._, children: [
-        /* @__PURE__ */ t(
-          m,
-          {
-            iconKey: "fa-kit fa-shoppingcart-empty",
-            title: "Shopping Cart",
-            size: "lg"
-          }
-        ),
-        o.items.length > 0 && /* @__PURE__ */ t("div", { className: i.count, children: /* @__PURE__ */ t(a, { size: "xxs", children: o.items.length }) })
-      ] }),
-      placement: "bottom",
-      on: "click",
-      children: /* @__PURE__ */ n("div", { className: i.cartContainer, children: [
-        /* @__PURE__ */ t(a, { size: "2xl", children: "Cart" }),
-        /* @__PURE__ */ t("div", { className: i.cartItems, children: o.items.length > 0 ? /* @__PURE__ */ t("ul", { children: o.items.map(
-          (e) => /* @__PURE__ */ n("li", { className: i.cartItem, children: [
-            /* @__PURE__ */ t("img", { src: e.imageUrl, alt: `${e.itemId} product image` }),
-            /* @__PURE__ */ n("div", { children: [
-              /* @__PURE__ */ n("div", { className: i.topRow, children: [
-                /* @__PURE__ */ n("div", { className: i.itemInfo, children: [
-                  /* @__PURE__ */ t(a, { size: "sm", weight: "semibold", children: /* @__PURE__ */ t(u, { href: e.itemHref || `/part/${e.itemId}`, children: e.description }) }),
-                  /* @__PURE__ */ n(a, { size: "sm", children: [
-                    "Part # ",
-                    e.itemId
-                  ] })
-                ] }),
-                /* @__PURE__ */ t("button", { onClick: () => c(e), className: i.removeItem, children: /* @__PURE__ */ t(m, { iconKey: "fa-regular fa-trash", size: "sm" }) })
-              ] }),
-              /* @__PURE__ */ n("div", { className: i.itemManagement, children: [
-                /* @__PURE__ */ n("div", { className: i.purchaseInformation, children: [
-                  /* @__PURE__ */ t(
-                    x,
-                    {
-                      availId: e.availabilityId || "",
-                      availDescription: e.availability || "",
-                      contactHref: d || "",
-                      contactLinkBehavior: h || "new-tab"
-                    }
-                  ),
-                  /* @__PURE__ */ t(v, { pricingLabel: p || "List Price", price: e.price })
-                ] }),
-                /* @__PURE__ */ t(w, { quantity: e.quantity, onQuantityChange: (I) => s(e, I), size: "sm" })
-              ] })
-            ] })
-          ] }, e.id)
-        ) }) : /* @__PURE__ */ t("div", { className: i.noItems, children: /* @__PURE__ */ t(a, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
-        r && /* @__PURE__ */ n("div", { className: i.subtotal, children: [
-          /* @__PURE__ */ t(a, { size: "md", weight: "semibold", children: "Subtotal" }),
-          /* @__PURE__ */ t(a, { size: "md", weight: "semibold", children: r })
-        ] }),
-        /* @__PURE__ */ t(f, { disabled: o.items.length === 0, onClick: l, variant: "cta-primary", size: "md", children: "Checkout" })
-      ] })
+      className: m.cartIconButton,
+      tabIndex: 0,
+      "aria-expanded": t,
+      "aria-controls": "cart-panel",
+      onClick: f,
+      ...n,
+      children: [
+        /* @__PURE__ */ a(g, { iconKey: "fa-kit fa-shoppingcart-empty", title: "Shopping Cart", size: "lg" }),
+        i.items.length > 0 && /* @__PURE__ */ a("div", { className: m.count, children: /* @__PURE__ */ a(p, { size: "xxs", children: i.items.length }) })
+      ]
     }
-  );
-}
+  ) });
+});
 export {
-  U as ShoppingCart
+  S as ShoppingCart
 };

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

@@ -1,12 +1,15 @@
-import { ShoppingCart as i } from "./Cart.js";
-const r = {
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { ShoppingCart as r } from "./Cart.js";
+import { CartSlideInPanel as s } from "./CartSlideInPanel.js";
+const u = {
   title: "Case Parts/Molecules/Cart",
-  component: i,
+  component: r,
   parameters: {
     layout: "centered"
   },
   tags: ["autodocs"]
-}, a = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", t = {
+}, a = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", m = {
   items: [
     { id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
     { id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
@@ -21,14 +24,41 @@ const r = {
     { id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
     { id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" }
   ]
-}, e = {
+}, y = {
   items: [
     { id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
     { id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
     { id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
     { id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" }
   ]
-}, o = {
+}, t = (i) => {
+  const [e, l] = d(!1);
+  return /* @__PURE__ */ c("div", { style: { width: "100%", display: "flex", justifyContent: "center" }, children: [
+    /* @__PURE__ */ o(
+      r,
+      {
+        ...i,
+        open: e,
+        onCartClick: () => l((n) => !n)
+      }
+    ),
+    /* @__PURE__ */ o(
+      s,
+      {
+        open: e,
+        onClose: () => l(!1),
+        cart: i.cart,
+        subtotal: i.subtotal,
+        itemPriceLabel: i.itemPriceLabel,
+        contactHref: i.contactHref,
+        onItemQtyChange: i.onItemQtyChange,
+        onItemDelete: i.onItemDelete,
+        onCheckout: i.onCheckout,
+        contactLinkBehavior: "new-tab"
+      }
+    )
+  ] });
+}, C = {
   args: {
     cart: { items: [] },
     onCheckout: () => {
@@ -37,51 +67,54 @@ const r = {
     onItemDelete: () => {
       alert("Delete");
     },
-    onItemEdit: () => {
-      alert("Edit");
-    },
     onItemQtyChange: () => {
       alert("Qty Change");
+    },
+    onCartClick: () => {
     }
-  }
-}, n = {
+    // required placeholder (overridden in render)
+  },
+  render: t
+}, k = {
   args: {
-    cart: t,
+    cart: m,
     onCheckout: () => {
       alert("Checkout");
     },
     onItemDelete: () => {
       alert("Delete");
     },
-    onItemEdit: () => {
-      alert("Edit");
-    },
     onItemQtyChange: () => {
       alert("Qty Change");
     },
-    subtotal: "$748.98"
-  }
-}, d = {
+    subtotal: "$748.98",
+    onCartClick: () => {
+    }
+    // required
+  },
+  render: t
+}, g = {
   args: {
-    cart: e,
+    cart: y,
     onCheckout: () => {
       alert("Checkout");
     },
     onItemDelete: () => {
       alert("Delete");
     },
-    onItemEdit: () => {
-      alert("Edit");
-    },
     onItemQtyChange: () => {
       alert("Qty Change");
     },
-    subtotal: "$748.98"
-  }
+    subtotal: "$748.98",
+    onCartClick: () => {
+    }
+    // required
+  },
+  render: t
 };
 export {
-  o as EmptyCart,
-  n as LargeCart,
-  d as SmallCart,
-  r as default
+  C as EmptyCart,
+  k as LargeCart,
+  g as SmallCart,
+  u as default
 };

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

@@ -0,0 +1,15 @@
+import { ContactUsLinkBehavior } from '../Availability/Availability';
+import { CartItem, ShoppingCart } from './Cart';
+export interface CartSlideInPanelProps {
+    open: boolean;
+    onClose: () => void;
+    cart: ShoppingCart;
+    subtotal?: string;
+    itemPriceLabel?: string;
+    contactHref?: string;
+    contactLinkBehavior?: ContactUsLinkBehavior;
+    onItemQtyChange: (_item: CartItem, _newQty: number) => void;
+    onItemDelete: (_item: CartItem) => void;
+    onCheckout: () => void;
+}
+export declare function CartSlideInPanel({ open, onClose, cart, subtotal, itemPriceLabel, contactHref, contactLinkBehavior, onItemQtyChange, onItemDelete, onCheckout }: CartSlideInPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Cart/CartSlideInPanel.js

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