@caseparts-org/caseblocks 0.0.121 → 0.0.123

package/dist/atoms/Markdown/Markdown.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Markdown } from './Markdown';
+declare const meta: {
+    title: string;
+    component: typeof Markdown;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;

package/dist/atoms/Markdown/Markdown.stories.js

@@ -0,0 +1,48 @@
+import { Markdown as e } from "./Markdown.js";
+const o = {
+  title: "Case Parts/Atoms/Markdown",
+  component: e,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"]
+}, a = {
+  args: {
+    children: `# Heading 1
+
+Paragraph with a [link](https://example.com).
+
+## Heading 2
+
+- Item 1
+- Item 2
+
+> Blockquote example
+
+---
+
+Inline code: \`const x = 1;\`
+
+
+
+
+
+
+Code block:
+
+\`\`\`ts
+function greet(name: string) {
+  console.log('Hello', name);
+}
+
+export default greet;
+
+\`\`\`
+
+| Col A | Col B |
+|------:|:------|
+|  123  | text  |`
+  }
+};
+export {
+  a as Basic,
+  o as default
+};

package/dist/main-client.js

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

package/dist/main-server.d.ts

@@ -21,6 +21,8 @@ export { LinkButton } from './atoms/LinkButton/LinkButton';
 export type { LinkButtonProps } from './atoms/LinkButton/LinkButton';
 export { configureImage } from './atoms/Image/configureImage';
 export type { ImageProps, ImageImplementation } from './atoms/Image/Image';
+export { Markdown } from './atoms/Markdown/Markdown';
+export type { MarkdownProps } from './atoms/Markdown/Markdown';
 export { Logo } from './molecules/Logo/Logo';
 export type { LogoProps } from './molecules/Logo/Logo';
 export { SearchBox } from './molecules/SearchBox/SearchBox';

package/dist/main-server.js

@@ -4,31 +4,32 @@ import { Column as x, Grid as f } from "./atoms/Grid/Grid.js";
 import { Head as a } from "./atoms/Root/Head.js";
 import { Icon as u } from "./atoms/Icon/Icon.js";
 import { Root as c } from "./atoms/Root/Root.js";
-import { Separator as g } from "./atoms/Separator/Separator.js";
+import { Separator as l } from "./atoms/Separator/Separator.js";
 import { Text as B } from "./atoms/Text/Text.js";
 import { Input as C } from "./atoms/Input/Input.js";
 import { Link as s } from "./atoms/Link/Link.js";
 import { linkClassName as b } from "./atoms/Link/linkClassName.js";
 import { configureLink as A, routerOverride as F } from "./atoms/Link/configureLink.js";
 import { LinkButton as S } from "./atoms/LinkButton/LinkButton.js";
-import { configureImage as G } from "./atoms/Image/configureImage.js";
+import { configureImage as w } from "./atoms/Image/configureImage.js";
+import { Markdown as H } from "./atoms/Markdown/Markdown.js";
 import { Logo as O } from "./molecules/Logo/Logo.js";
 import { SearchBox as Q } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as T } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as q } from "./molecules/Pricing/Pricing.js";
-import { Availability as z } from "./molecules/Availability/Availability.js";
-import { Avatar as E } from "./molecules/Avatar/Avatar.js";
-import { BannerCard as K } from "./molecules/BannerCard/BannerCard.js";
-import { CardLink as U } from "./molecules/CardLink/CardLink.js";
-import { Breadcrumbs as W } from "./molecules/Breadcrumbs/Breadcrumbs.js";
-import { NotFound as Y } from "./organisms/NotFound/NotFound.js";
+import { Availability as D } from "./molecules/Availability/Availability.js";
+import { Avatar as J } from "./molecules/Avatar/Avatar.js";
+import { BannerCard as U } from "./molecules/BannerCard/BannerCard.js";
+import { CardLink as W } from "./molecules/CardLink/CardLink.js";
+import { Breadcrumbs as Y } from "./molecules/Breadcrumbs/Breadcrumbs.js";
+import { NotFound as _ } from "./organisms/NotFound/NotFound.js";
 export {
-  z as Availability,
-  E as Avatar,
-  K as BannerCard,
-  W as Breadcrumbs,
+  D as Availability,
+  J as Avatar,
+  U as BannerCard,
+  Y as Breadcrumbs,
   t as Button,
-  U as CardLink,
+  W as CardLink,
   x as Column,
   m as Flex,
   f as Grid,
@@ -38,14 +39,15 @@ export {
   s as Link,
   S as LinkButton,
   O as Logo,
-  Y as NotFound,
+  H as Markdown,
+  _ as NotFound,
   q as Pricing,
   T as QuantityInput,
   c as Root,
   Q as SearchBox,
-  g as Separator,
+  l as Separator,
   B as Text,
-  G as configureImage,
+  w as configureImage,
   A as configureLink,
   b as linkClassName,
   F as routerOverride

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
 };