@caseparts-org/caseblocks 0.0.120 → 0.0.122

package/dist/atoms/Popover/Popover.d.ts

@@ -7,7 +7,7 @@ export type PopoverAPI = {
 type PositionKeyword = "top" | "right" | "bottom" | "left";
 type Position = "top left" | "top center" | "top right" | "right top" | "right center" | "right bottom" | "bottom left" | "bottom center" | "bottom right" | "left top" | "left center" | "left bottom" | PositionKeyword;
 export type PopoverProps = {
-    trigger: React.ReactElement;
+    trigger: React.ReactElement<any>;
     children: React.ReactNode | ((_api: PopoverAPI) => React.ReactNode);
     position?: Position;
     popoverClassName?: string;

package/dist/atoms/Popover/Popover.js

@@ -1,6 +1,6 @@
 import { jsxs as F, Fragment as H, jsx as k } from "react/jsx-runtime";
 import * as f from "react";
-import { r as N } from "../../index-B4KbmMH3.js";
+import { r as N } from "../../index-BkF-BQ3Q.js";
 import { c as z } from "../../clsx-OuTLNxxd.js";
 import '../../assets/Popover.css';const W = "_popover_vlr81_1", q = "_content_vlr81_7", P = {
   popover: W,

package/dist/atoms/Root/Root.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 export declare function Root({ children }: {
     children: ReactNode;
-}): JSX.Element;
+}): ReactElement;

package/dist/atoms/SlideInPanel/SlideInPanel.js

@@ -1,6 +1,6 @@
 import { jsxs as k, jsx as u } from "react/jsx-runtime";
 import * as r from "react";
-import { r as A } from "../../index-B4KbmMH3.js";
+import { r as A } from "../../index-BkF-BQ3Q.js";
 import { c } 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 = {

package/dist/atoms/Text/Text.d.ts

@@ -1,4 +1,5 @@
 import { HideAtProps } from '../HideAt';
+import { JSX } from 'react';
 type ElementType = keyof Pick<JSX.IntrinsicElements, "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div">;
 /** A text element. */
 export type TextProps<T extends ElementType = "span"> = HideAtProps & {

package/dist/atoms/Tooltip/Tooltip.d.ts

@@ -3,7 +3,7 @@ type PositionKeyword = "top" | "right" | "bottom" | "left";
 type Position = "top left" | "top center" | "top right" | "right top" | "right center" | "right bottom" | "bottom left" | "bottom center" | "bottom right" | "left top" | "left center" | "left bottom" | PositionKeyword;
 export type TooltipProps = {
     children: React.ReactNode;
-    trigger: React.ReactElement;
+    trigger: React.ReactElement<any>;
     tooltipClassName?: string;
     contentClassName?: string;
     position?: Position;

package/dist/atoms/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { jsxs as W, Fragment as X, jsx as O } from "react/jsx-runtime";
 import * as r from "react";
 import { c as S } from "../../clsx-OuTLNxxd.js";
-import { r as Y } from "../../index-B4KbmMH3.js";
+import { r as Y } from "../../index-BkF-BQ3Q.js";
 import '../../assets/Tooltip.css';const A = "_tooltip_17o7a_1", D = "_content_17o7a_11", j = {
   tooltip: A,
   content: D

package/dist/{index-B4KbmMH3.js → index-BkF-BQ3Q.js}

@@ -140,7 +140,7 @@ function R() {
     return y.H.useFormState(n, r, a);
   }, c.useFormStatus = function() {
     return y.H.useHostTransitionStatus();
-  }, c.version = "19.1.1", c;
+  }, c.version = "19.2.3", c;
 }
 var s = {};
 /**
@@ -362,7 +362,7 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
       return y().useFormState(t, e, i);
     }, s.useFormStatus = function() {
       return y().useHostTransitionStatus();
-    }, s.version = "19.1.1", typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+    }, s.version = "19.2.3", typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
   }()), s;
 }
 function E() {

package/dist/main-client.d.ts

@@ -36,3 +36,5 @@ export { Carousel } from './organisms/Carousel/Carousel';
 export type { CarouselProps } from './organisms/Carousel/Carousel';
 export { Footer } from './organisms/Footer/Footer';
 export type { FooterProps } from './organisms/Footer/Footer';
+export { SpinZoomViewer } from './organisms/SpinZoomViewer/SpinZoomViewer';
+export type { SpinZoomViewerProps } from './organisms/SpinZoomViewer/SpinZoomViewer';

package/dist/main-client.js

@@ -5,23 +5,23 @@ import { Head as n } from "./atoms/Root/Head.js";
 import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as d } 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 S } from "./atoms/Input/Input.js";
-import { Link as v } from "./atoms/Link/Link.js";
-import { linkClassName as L } from "./atoms/Link/linkClassName.js";
-import { configureLink as h, routerOverride as s } from "./atoms/Link/configureLink.js";
-import { LinkButton as F } from "./atoms/LinkButton/LinkButton.js";
-import { configureImage as N } from "./atoms/Image/configureImage.js";
-import { Logo as w } from "./molecules/Logo/Logo.js";
-import { SearchBox as H } from "./molecules/SearchBox/SearchBox.js";
+import { Text as S } from "./atoms/Text/Text.js";
+import { Input as I } from "./atoms/Input/Input.js";
+import { Link as s } from "./atoms/Link/Link.js";
+import { linkClassName as A } from "./atoms/Link/linkClassName.js";
+import { configureLink as P, routerOverride as h } from "./atoms/Link/configureLink.js";
+import { LinkButton as w } from "./atoms/LinkButton/LinkButton.js";
+import { configureImage as M } from "./atoms/Image/configureImage.js";
+import { Logo as V } from "./molecules/Logo/Logo.js";
+import { SearchBox as y } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as z } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as O } from "./molecules/Pricing/Pricing.js";
 import { Availability as R } from "./molecules/Availability/Availability.js";
-import { Avatar as q } from "./molecules/Avatar/Avatar.js";
-import { BannerCard as E } from "./molecules/BannerCard/BannerCard.js";
-import { CardLink as K } from "./molecules/CardLink/CardLink.js";
-import { Breadcrumbs as W } from "./molecules/Breadcrumbs/Breadcrumbs.js";
-import { NotFound as Y } from "./organisms/NotFound/NotFound.js";
+import { Avatar as j } from "./molecules/Avatar/Avatar.js";
+import { BannerCard as D } from "./molecules/BannerCard/BannerCard.js";
+import { CardLink as J } from "./molecules/CardLink/CardLink.js";
+import { Breadcrumbs as U } from "./molecules/Breadcrumbs/Breadcrumbs.js";
+import { NotFound as X } from "./organisms/NotFound/NotFound.js";
 import { HorizontalScroll as _ } from "./atoms/HorizontalScroll/HorizontalScroll.js";
 import { SlideInPanel as oo } from "./atoms/SlideInPanel/SlideInPanel.js";
 import { Tooltip as eo } from "./atoms/Tooltip/Tooltip.js";
@@ -31,58 +31,60 @@ import { Chip as ao } from "./molecules/Chip/Chip.js";
 import { ToggleView as io } from "./molecules/ToggleView/ToggleView.js";
 import { CartSlideInPanel as uo } from "./molecules/Cart/CartSlideInPanel.js";
 import { StatefulButton as Co } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as ko } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as So } from "./molecules/AddToCart/AddToCart.js";
-import { Modal as vo } from "./molecules/Modal/Modal.js";
-import { ImageViewer as Lo } from "./molecules/ImageViewer/ImageViewer.js";
-import { MainNav as ho } from "./organisms/MainNav/MainNav.js";
+import { AnimatedCheckMark as So } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as Io } from "./molecules/AddToCart/AddToCart.js";
+import { Modal as so } from "./molecules/Modal/Modal.js";
+import { ImageViewer as Ao } from "./molecules/ImageViewer/ImageViewer.js";
+import { MainNav as Po } from "./organisms/MainNav/MainNav.js";
 import { ChipSelector as To } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as Mo } from "./organisms/Product/Product.js";
-import { Carousel as bo } from "./organisms/Carousel/Carousel.js";
-import { Footer as yo } from "./organisms/Footer/Footer.js";
+import { Product as Fo } from "./organisms/Product/Product.js";
+import { Carousel as No } from "./organisms/Carousel/Carousel.js";
+import { Footer as bo } from "./organisms/Footer/Footer.js";
+import { default as Ho } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
 export {
   fo as Account,
-  So as AddToCart,
-  ko as AnimatedCheckMark,
+  Io as AddToCart,
+  So as AnimatedCheckMark,
   R as Availability,
-  q as Avatar,
-  E as BannerCard,
-  W as Breadcrumbs,
+  j as Avatar,
+  D as BannerCard,
+  U as Breadcrumbs,
   e as Button,
-  K as CardLink,
-  bo as Carousel,
+  J as CardLink,
+  No as Carousel,
   uo as CartSlideInPanel,
   ao as Chip,
   To as ChipSelector,
   f as Column,
   p as Flex,
-  yo as Footer,
+  bo as Footer,
   x as Grid,
   n as Head,
   _ as HorizontalScroll,
   l as Icon,
-  Lo as ImageViewer,
-  S as Input,
-  v as Link,
-  F as LinkButton,
-  w as Logo,
-  ho as MainNav,
-  vo as Modal,
-  Y as NotFound,
+  Ao as ImageViewer,
+  I as Input,
+  s as Link,
+  w as LinkButton,
+  V as Logo,
+  Po as MainNav,
+  so as Modal,
+  X as NotFound,
   po as Popover,
   O as Pricing,
-  Mo as Product,
+  Fo as Product,
   z as QuantityInput,
   d as Root,
-  H as SearchBox,
+  y as SearchBox,
   C as Separator,
   oo as SlideInPanel,
+  Ho as SpinZoomViewer,
   Co as StatefulButton,
-  k as Text,
+  S as Text,
   io as ToggleView,
   eo as Tooltip,
-  N as configureImage,
-  h as configureLink,
-  L as linkClassName,
-  s as routerOverride
+  M as configureImage,
+  P as configureLink,
+  A as linkClassName,
+  h as routerOverride
 };

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

@@ -59,6 +59,10 @@ declare const meta: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
@@ -268,6 +272,8 @@ declare const meta: {
         onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStart?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
@@ -276,8 +282,16 @@ declare const meta: {
         onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
     }>, context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         variant?: ("color" | "white") | undefined;
         defaultChecked?: boolean | undefined;
@@ -327,6 +341,10 @@ declare const meta: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
@@ -536,6 +554,8 @@ declare const meta: {
         onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStart?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
@@ -544,8 +564,16 @@ declare const meta: {
         onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/molecules/ToggleView/ToggleView.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { HideAtProps } from '../../atoms/HideAt';
-export interface ToggleViewProps extends React.HTMLAttributes<HTMLDivElement>, HideAtProps {
+export interface ToggleViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle">, HideAtProps {
     selectedId: string | number;
     onToggle: (id: string | number) => void;
     className?: string;

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

@@ -9,7 +9,7 @@ export interface ProductProps extends AvailabilityProps {
     partNumber: string;
     priceLabel: string;
     price: string;
-    imgSrc: string;
+    imgSrc?: string;
     attributes?: {
         label: string;
         value: string;
@@ -17,5 +17,6 @@ export interface ProductProps extends AvailabilityProps {
     className?: string;
     onAddToCart: (_itemKey: number, _quantity: number) => void;
     onClose?: (_itemKey: number) => void;
+    flat?: boolean;
 }
-export declare function Product({ productView, itemKey, partNumber, productDescription, availDescription, availId, contactHref, contactLinkBehavior, productHref, priceLabel, price, imgSrc, attributes, className, onAddToCart, onClose, ...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, ...otherProps }: ProductProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Product/Product.js

@@ -1,131 +1,134 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { Image as T } from "../../atoms/Image/Image.js";
-import { Link as g } from "../../atoms/Link/Link.js";
+import { Image as v } from "../../atoms/Image/Image.js";
+import { Link as I } from "../../atoms/Link/Link.js";
 import { Text as o } from "../../atoms/Text/Text.js";
-import { Availability as y } from "../../molecules/Availability/Availability.js";
-import { Pricing as w } from "../../molecules/Pricing/Pricing.js";
-import { AddToCart as v } from "../../molecules/AddToCart/AddToCart.js";
-import { Icon as B } from "../../atoms/Icon/Icon.js";
-import { c as x } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Product.css';const L = "_productCard_15dy7_1", P = "_productInformation_15dy7_22", R = "_purchaseInformation_15dy7_29", $ = "_addToCart_15dy7_37", A = "_addToCartButton_15dy7_40", D = "_partNumber_15dy7_48", j = "_partNumberLabel_15dy7_55", k = "_productTile_15dy7_59", q = "_topRow_15dy7_80", E = "_productData_15dy7_111", F = "_purchase_15dy7_29", G = "_attributeContainer_15dy7_148", r = {
-  productCard: L,
-  productInformation: P,
-  purchaseInformation: R,
-  addToCart: $,
-  addToCartButton: A,
-  partNumber: D,
-  partNumberLabel: j,
-  productTile: k,
-  topRow: q,
-  productData: E,
-  purchase: F,
-  attributeContainer: G
+import { Availability as w } from "../../molecules/Availability/Availability.js";
+import { Pricing as x } from "../../molecules/Pricing/Pricing.js";
+import { AddToCart as z } from "../../molecules/AddToCart/AddToCart.js";
+import { Icon as R } from "../../atoms/Icon/Icon.js";
+import { c as B } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Product.css';const $ = "_productCard_179ie_1", A = "_productInformation_179ie_20", D = "_purchaseInformation_179ie_27", P = "_addToCart_179ie_35", j = "_addToCartButton_179ie_38", k = "_partNumber_179ie_46", y = "_partNumberLabel_179ie_53", q = "_productTile_179ie_57", E = "_topRow_179ie_76", F = "_productData_179ie_107", G = "_purchase_179ie_27", J = "_attributeContainer_179ie_144", M = "_elevated_179ie_192", O = "_noImage_179ie_198", e = {
+  productCard: $,
+  productInformation: A,
+  purchaseInformation: D,
+  addToCart: P,
+  addToCartButton: j,
+  partNumber: k,
+  partNumberLabel: y,
+  productTile: q,
+  topRow: E,
+  productData: F,
+  purchase: G,
+  attributeContainer: J,
+  elevated: M,
+  noImage: O
 };
-function Z({
-  productView: I,
-  itemKey: s,
-  partNumber: d,
-  productDescription: l,
-  availDescription: m,
-  availId: e,
-  contactHref: u,
-  contactLinkBehavior: h,
-  productHref: p,
-  priceLabel: _,
-  price: i,
-  imgSrc: N,
-  attributes: c,
+function S({
+  productView: L,
+  itemKey: c,
+  partNumber: i,
+  productDescription: m,
+  availDescription: u,
+  availId: d,
+  contactHref: h,
+  contactLinkBehavior: p,
+  productHref: _,
+  priceLabel: N,
+  price: n,
+  imgSrc: r,
+  attributes: l,
   className: b,
   onAddToCart: f,
   onClose: C,
-  ...z
+  flat: T,
+  ...g
 }) {
-  return I === "Card" ? /* @__PURE__ */ a("div", { className: x(r.productCard, b), children: [
-    /* @__PURE__ */ t(
-      T,
+  return L === "Card" ? /* @__PURE__ */ a("div", { className: B(e.productCard, b, !T && e.elevated, !r && e.noImage), ...g, children: [
+    r && /* @__PURE__ */ t(
+      v,
       {
-        src: N,
-        alt: `${d} product image`,
+        src: r,
+        alt: `${i} product image`,
         height: 96,
         width: 96
       }
     ),
-    /* @__PURE__ */ a("div", { className: r.productInformation, children: [
-      /* @__PURE__ */ t(g, { href: p, children: l }),
-      /* @__PURE__ */ a("div", { className: r.partNumber, children: [
-        /* @__PURE__ */ t(o, { size: "sm", className: r.partNumberLabel, children: "Part #" }),
-        /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: d })
+    /* @__PURE__ */ a("div", { className: e.productInformation, children: [
+      /* @__PURE__ */ t(I, { href: _, children: m }),
+      /* @__PURE__ */ a("div", { className: e.partNumber, children: [
+        /* @__PURE__ */ t(o, { size: "sm", className: e.partNumberLabel, children: "Part #" }),
+        /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: i })
       ] })
     ] }),
-    /* @__PURE__ */ a("div", { className: r.purchaseInformation, children: [
-      e && /* @__PURE__ */ t(
-        y,
+    /* @__PURE__ */ a("div", { className: e.purchaseInformation, children: [
+      d && /* @__PURE__ */ t(
+        w,
         {
-          availId: e,
-          availDescription: m,
-          contactHref: u,
-          contactLinkBehavior: h
+          availId: d,
+          availDescription: u,
+          contactHref: h,
+          contactLinkBehavior: p
         }
       ),
-      i && /* @__PURE__ */ t(w, { pricingLabel: _, price: i })
+      n && /* @__PURE__ */ t(x, { pricingLabel: N, price: n })
     ] }),
     /* @__PURE__ */ t(
-      v,
+      z,
       {
-        itemKey: s,
+        itemKey: c,
         onAdd: f,
-        className: r.addToCart,
-        addButtonClassName: r.addToCartButton,
+        className: e.addToCart,
+        addButtonClassName: e.addToCartButton,
         size: "md",
         buttonDoneText: ""
       }
     )
-  ] }) : /* @__PURE__ */ a("div", { className: x(r.productTile, b), ...z, children: [
-    /* @__PURE__ */ t(
-      T,
+  ] }) : /* @__PURE__ */ a("div", { className: B(e.productTile, b, !T && e.elevated, !r && e.noImage), ...g, children: [
+    r && /* @__PURE__ */ t(
+      v,
       {
-        src: N,
-        alt: `${d} product image`,
+        src: r,
+        alt: `${i} product image`,
         height: 108,
         width: 108
       }
     ),
-    /* @__PURE__ */ a("div", { className: r.productData, children: [
-      /* @__PURE__ */ a("div", { className: r.topRow, children: [
-        /* @__PURE__ */ a("div", { className: r.productInformation, children: [
-          /* @__PURE__ */ t(g, { href: p, children: l }),
-          /* @__PURE__ */ a("div", { className: r.partNumber, children: [
-            /* @__PURE__ */ t(o, { size: "sm", className: r.partNumberLabel, children: "Part #" }),
-            /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: d })
+    /* @__PURE__ */ a("div", { className: e.productData, children: [
+      /* @__PURE__ */ a("div", { className: e.topRow, children: [
+        /* @__PURE__ */ a("div", { className: e.productInformation, children: [
+          /* @__PURE__ */ t(I, { href: _, children: m }),
+          /* @__PURE__ */ a("div", { className: e.partNumber, children: [
+            /* @__PURE__ */ t(o, { size: "sm", className: e.partNumberLabel, children: "Part #" }),
+            /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: i })
           ] })
         ] }),
-        C && /* @__PURE__ */ t("button", { onClick: () => C(s), children: /* @__PURE__ */ t(B, { size: "sm", iconKey: "fa-light fa-xmark" }) })
+        C && /* @__PURE__ */ t("button", { onClick: () => C(c), children: /* @__PURE__ */ t(R, { size: "sm", iconKey: "fa-light fa-xmark" }) })
       ] }),
-      /* @__PURE__ */ a("div", { className: r.purchase, children: [
-        /* @__PURE__ */ a("div", { className: r.purchaseInformation, children: [
-          e && /* @__PURE__ */ t(
-            y,
+      /* @__PURE__ */ a("div", { className: e.purchase, children: [
+        /* @__PURE__ */ a("div", { className: e.purchaseInformation, children: [
+          d && /* @__PURE__ */ t(
+            w,
             {
-              availId: e,
-              availDescription: m,
-              contactHref: u,
-              contactLinkBehavior: h
+              availId: d,
+              availDescription: u,
+              contactHref: h,
+              contactLinkBehavior: p
             }
           ),
-          i && /* @__PURE__ */ t(w, { pricingLabel: _, price: i })
+          n && /* @__PURE__ */ t(x, { pricingLabel: N, price: n })
         ] }),
-        /* @__PURE__ */ t(v, { itemKey: s, onAdd: f, className: r.addToCart, addButtonClassName: r.addToCartButton })
+        /* @__PURE__ */ t(z, { itemKey: c, onAdd: f, className: e.addToCart, addButtonClassName: e.addToCartButton })
       ] }),
-      c && c.length > 0 && /* @__PURE__ */ t("ul", { className: r.attributeContainer, children: c.map((n) => /* @__PURE__ */ a("li", { children: [
+      l && l.length > 0 && /* @__PURE__ */ t("ul", { className: e.attributeContainer, children: l.map((s) => /* @__PURE__ */ a("li", { children: [
         /* @__PURE__ */ a(o, { size: "xs", weight: "light", children: [
-          n.label,
+          s.label,
           ":"
         ] }),
-        /* @__PURE__ */ t(o, { size: "xs", weight: "semibold", children: n.value })
-      ] }, `${n.label}.${n.value}`)) })
+        /* @__PURE__ */ t(o, { size: "xs", weight: "semibold", children: s.value })
+      ] }, `${s.label}.${s.value}`)) })
     ] })
   ] });
 }
 export {
-  Z as Product
+  S as Product
 };

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

@@ -65,6 +65,10 @@ declare const meta: {
             action: string;
             description: string;
         };
+        flat: {
+            control: "boolean";
+            description: string;
+        };
     };
     args: ProductProps;
     tags: string[];
@@ -77,3 +81,6 @@ export declare const Unavailable: Story;
 export declare const ContactForAvailability: Story;
 export declare const TileView: Story;
 export declare const DifferentPriceLabel: Story;
+export declare const NoImageCard: Story;
+export declare const FlatTile: Story;
+export declare const NoImageFlatCard: Story;

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

@@ -46,7 +46,8 @@ const o = [
     price: { control: "text" },
     imgSrc: { control: "text" },
     itemKey: { control: "number" },
-    onAddToCart: { action: "addToCart", description: "(itemKey, quantity)" }
+    onAddToCart: { action: "addToCart", description: "(itemKey, quantity)" },
+    flat: { control: "boolean", description: "Removes border and shadow" }
   },
   args: {
     productView: "Card",
@@ -69,7 +70,8 @@ const o = [
     },
     onClose: (t) => {
       alert(`On close clicked ${t}`);
-    }
+    },
+    flat: !1
   },
   tags: ["autodocs"]
 }, l = {}, c = {
@@ -90,23 +92,42 @@ const o = [
     contactLinkBehavior: "new-tab",
     contactHref: "https://dev.caseparts.com/account/contactus"
   }
-}, p = {
+}, d = {
   args: {
     productView: "Tile",
     productDescription: "Tile View Product"
   }
-}, d = {
+}, p = {
   args: {
     priceLabel: "Member",
     price: "$118.49"
   }
+}, u = {
+  args: {
+    productView: "Card",
+    imgSrc: void 0
+  }
+}, v = {
+  args: {
+    productView: "Tile",
+    flat: !0
+  }
+}, b = {
+  args: {
+    productView: "Card",
+    imgSrc: void 0,
+    flat: !0
+  }
 };
 export {
   s as ContactForAvailability,
   l as Default,
-  d as DifferentPriceLabel,
+  p as DifferentPriceLabel,
+  v as FlatTile,
   c as LimitedStock,
-  p as TileView,
+  u as NoImageCard,
+  b as NoImageFlatCard,
+  d as TileView,
   n as Unavailable,
   r as default
 };