@phillips/seldon 1.250.0 → 1.251.0

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,41 @@
+import { ComponentProps, ElementType } from 'react';
+import { Link } from '../Link';
+import { SeldonImage } from '../SeldonImage';
+import { Video } from '../Video';
+import { Text } from '../Text';
+import { CardVariants } from './types';
+export interface CardRootProps extends ComponentProps<'div'> {
+    /**
+     * Root element for the card shell. Defaults to `div`.
+     */
+    element?: ElementType;
+    /**
+     * Layout variant for the card.
+     */
+    variant?: CardVariants;
+}
+export type CardProps = CardRootProps;
+export type CardImageProps = Omit<ComponentProps<typeof SeldonImage>, 'className'>;
+export type CardVideoProps = ComponentProps<typeof Video>;
+export type CardContentProps = ComponentProps<'div'>;
+export type CardEyebrowProps = Omit<ComponentProps<typeof Text>, 'variant'>;
+export type CardTitleProps = Omit<ComponentProps<typeof Text>, 'variant'>;
+export type CardDescriptionProps = Omit<ComponentProps<typeof Text>, 'variant'>;
+export type CardBadgeProps = Omit<ComponentProps<typeof Text>, 'variant'>;
+export type CardMetaProps = ComponentProps<'div'>;
+export type CardMetaItemProps = Omit<ComponentProps<typeof Text>, 'variant'>;
+export type CardCtaProps = ComponentProps<typeof Link>;
+declare const Card: import('react').ForwardRefExoticComponent<Omit<CardRootProps, "ref"> & import('react').RefAttributes<HTMLElement>> & {
+    Root: import('react').ForwardRefExoticComponent<Omit<CardRootProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Image: import('react').ForwardRefExoticComponent<Omit<CardImageProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Video: import('react').ForwardRefExoticComponent<Omit<Omit<import('../Video').VideoProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Eyebrow: import('react').ForwardRefExoticComponent<Omit<CardEyebrowProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Title: import('react').ForwardRefExoticComponent<Omit<CardTitleProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Description: import('react').ForwardRefExoticComponent<Omit<CardDescriptionProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Badge: import('react').ForwardRefExoticComponent<Omit<CardBadgeProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Meta: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    MetaItem: import('react').ForwardRefExoticComponent<Omit<CardMetaItemProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Cta: import('react').ForwardRefExoticComponent<Omit<Omit<import('../Link').LinkProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
+};
+export default Card;

package/dist/components/Card/Card.js

@@ -0,0 +1,80 @@
+import { jsx as t } from "react/jsx-runtime";
+import m from "../../_virtual/index.js";
+import { forwardRef as s } from "react";
+import { getCommonProps as w, px as o } from "../../utils/index.js";
+import { LinkVariants as x } from "../Link/types.js";
+import T from "../Link/Link.js";
+import R from "../SeldonImage/SeldonImage.js";
+import k from "../Video/Video.js";
+import { TextVariants as i } from "../Text/types.js";
+import l from "../Text/Text.js";
+import { CardVariants as u } from "./types.js";
+const c = s(
+  ({ element: e = "div", className: r, id: a, variant: d = u.default, ...n }, S) => {
+    const { className: C, ...V } = w({ id: a, ...n }, "Card"), M = m(C, r, {
+      [`${C}--${d}`]: d
+    });
+    return /* @__PURE__ */ t(e, { className: M, id: a, ref: S, ...V, ...n });
+  }
+), p = s(({ aspectRatio: e = "16/9", ...r }, a) => /* @__PURE__ */ t(R, { ...r, aspectRatio: e, className: `${o}-card__image`, ref: a })), N = s(({ aspectRatio: e = 16 / 9, className: r, ...a }, d) => /* @__PURE__ */ t(k, { ...a, ref: d, aspectRatio: e, className: m(`${o}-card__video`, r) })), _ = s(({ className: e, ...r }, a) => /* @__PURE__ */ t("div", { ...r, className: m(`${o}-card__details`, e), ref: a })), y = s(({ className: e, ...r }, a) => /* @__PURE__ */ t(
+  l,
+  {
+    ...r,
+    className: m(`${o}-card__eyebrow`, e),
+    ref: a,
+    variant: i.labelSmall
+  }
+)), f = s(({ className: e, ...r }, a) => /* @__PURE__ */ t(
+  l,
+  {
+    ...r,
+    className: m(`${o}-card__title`, e),
+    ref: a,
+    variant: i.headingSmall
+  }
+)), g = s(({ className: e, ...r }, a) => /* @__PURE__ */ t(
+  l,
+  {
+    ...r,
+    className: m(`${o}-card__description`, e),
+    ref: a,
+    variant: i.bodySmall
+  }
+)), $ = s(({ className: e, ...r }, a) => /* @__PURE__ */ t(l, { ...r, className: m(`${o}-card__badge`, e), ref: a, variant: i.badgeSmall })), b = s(({ className: e, ...r }, a) => /* @__PURE__ */ t("div", { ...r, className: m(`${o}-card__meta`, e), ref: a })), v = s(({ className: e, ...r }, a) => /* @__PURE__ */ t(
+  l,
+  {
+    ...r,
+    className: m(`${o}-card__meta-item`, e),
+    ref: a,
+    variant: i.labelSmall
+  }
+)), I = s(
+  ({ className: e, variant: r = x.linkSmall, ...a }, d) => /* @__PURE__ */ t(T, { ...a, ref: d, className: m(`${o}-card__cta`, e), variant: r })
+);
+c.displayName = "Card.Root";
+p.displayName = "Card.Image";
+N.displayName = "Card.Video";
+_.displayName = "Card.Content";
+y.displayName = "Card.Eyebrow";
+f.displayName = "Card.Title";
+g.displayName = "Card.Description";
+$.displayName = "Card.Badge";
+b.displayName = "Card.Meta";
+v.displayName = "Card.MetaItem";
+I.displayName = "Card.Cta";
+const F = Object.assign(c, {
+  Root: c,
+  Image: p,
+  Video: N,
+  Content: _,
+  Eyebrow: y,
+  Title: f,
+  Description: g,
+  Badge: $,
+  Meta: b,
+  MetaItem: v,
+  Cta: I
+});
+export {
+  F as default
+};

package/dist/components/Card/Card.stories.d.ts

@@ -0,0 +1,63 @@
+import { CardRootProps } from './Card';
+import { CardVariants } from './types';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<CardRootProps, "ref"> & import('react').RefAttributes<HTMLElement>> & {
+        Root: import('react').ForwardRefExoticComponent<Omit<CardRootProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+        Image: import('react').ForwardRefExoticComponent<Omit<import('./Card').CardImageProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+        Video: import('react').ForwardRefExoticComponent<Omit<Omit<import('../Video').VideoProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+        Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+        Eyebrow: import('react').ForwardRefExoticComponent<Omit<import('./Card').CardEyebrowProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+        Title: import('react').ForwardRefExoticComponent<Omit<import('./Card').CardTitleProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+        Description: import('react').ForwardRefExoticComponent<Omit<import('./Card').CardDescriptionProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+        Badge: import('react').ForwardRefExoticComponent<Omit<import('./Card').CardBadgeProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+        Meta: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+        MetaItem: import('react').ForwardRefExoticComponent<Omit<import('./Card').CardMetaItemProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+        Cta: import('react').ForwardRefExoticComponent<Omit<Omit<import('../Link').LinkProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
+    };
+};
+export default meta;
+export declare const Playground: {
+    (props: CardRootProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+    };
+    argTypes: {
+        element: {
+            control: boolean;
+        };
+        variant: {
+            options: CardVariants[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export declare const ArticleCard: {
+    (props: CardRootProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+    };
+};
+export declare const ArticleCardWithCta: {
+    (props: CardRootProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        id: string;
+    };
+};
+export declare const MediaCard: {
+    (props: CardRootProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        variant: CardVariants;
+    };
+};
+export declare const CardWithImagePlaceholder: {
+    (props: CardRootProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        id: string;
+    };
+};

package/dist/components/Card/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Card, type CardBadgeProps, type CardContentProps, type CardCtaProps, type CardDescriptionProps, type CardEyebrowProps, type CardImageProps, type CardMetaItemProps, type CardMetaProps, type CardProps, type CardRootProps, type CardTitleProps, type CardVideoProps, } from './Card';
+export { CardVariants } from './types';

package/dist/components/Card/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum CardVariants {
+    default = "default",
+    stacked = "stacked"
+}

package/dist/components/Card/types.js

@@ -0,0 +1,4 @@
+var t = /* @__PURE__ */ ((e) => (e.default = "default", e.stacked = "stacked", e))(t || {});
+export {
+  t as CardVariants
+};

package/dist/components/Input/utils.js

@@ -3,6 +3,7 @@ import "react/jsx-runtime";
 import "../../providers/SeldonProvider/utils.js";
 import "react";
 import "../Button/Button.js";
+import "../Card/Card.js";
 import "../IconButton/IconButton.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/AccordionItem.js";
@@ -94,7 +95,7 @@ import "../../patterns/CountryPicker/CountryPicker.js";
 import "../../patterns/ProgressWizard/ProgressWizard.js";
 import "../../patterns/ProgressWizard/types.js";
 import "../../patterns/PhoneNumberInput/PhoneNumberInput.js";
-const Op = () => ({
+const Pp = () => ({
   adornment: `${p}-input__wrapper__adornment`,
   emptyValidation: `${p}-input__empty-validation`,
   input: `${p}-input__input`,
@@ -106,5 +107,5 @@ const Op = () => ({
   wrapperInput: `${p}-input__wrapper__input`
 });
 export {
-  Op as getInputClassNames
+  Pp as getInputClassNames
 };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './utils/hooks';
 export * from './types/commonTypes';
 export { default as Button, type ButtonProps } from './components/Button/Button';
 export { ButtonVariants, ButtonSizes } from './components/Button/types';
+export * from './components/Card';
 export { default as IconButton } from './components/IconButton/IconButton';
 export * from './components/Accordion';
 export { Breadcrumb, type BreadcrumbProps } from './components/Breadcrumb';

package/dist/index.js

@@ -1,251 +1,255 @@
-import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as i, getCommonProps as n, noOp as x, px as g, useNormalizedInputProps as c } from "./utils/index.js";
+import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as i, getCommonProps as x, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
 import { SSRMediaQuery as T, ssrMediaQueryStyle as P } from "./providers/SeldonProvider/utils.js";
 import { usePendingState as I } from "./utils/hooks.js";
-import { AuctionStatus as A, LotStatus as V, SupportedLanguages as y } from "./types/commonTypes.js";
+import { AuctionStatus as V, LotStatus as A, SupportedLanguages as y } from "./types/commonTypes.js";
 import { default as v } from "./components/Button/Button.js";
 import { ButtonSizes as h, ButtonVariants as k } from "./components/Button/types.js";
-import { default as N } from "./components/IconButton/IconButton.js";
-import { default as M } from "./components/Accordion/Accordion.js";
-import { default as G } from "./components/Accordion/AccordionItem.js";
-import { AccordionVariants as z } from "./components/Accordion/types.js";
-import { default as W } from "./components/Breadcrumb/Breadcrumb.js";
+import { default as N } from "./components/Card/Card.js";
+import { CardVariants as M } from "./components/Card/types.js";
+import { default as G } from "./components/IconButton/IconButton.js";
+import { default as z } from "./components/Accordion/Accordion.js";
+import { default as W } from "./components/Accordion/AccordionItem.js";
+import { AccordionVariants as Q } from "./components/Accordion/types.js";
+import { default as Y } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./_virtual/index.js";
-import { default as Q } from "./components/Icon/Icon.js";
-import { default as Y } from "./components/Carousel/Carousel.js";
-import { default as q } from "./components/Carousel/CarouselArrows.js";
-import { default as K } from "./components/Carousel/CarouselContent.js";
-import { default as _ } from "./components/Carousel/CarouselItem.js";
-import { default as ee } from "./components/Carousel/CarouselDots.js";
-import { default as oe } from "./components/Collapsible/Collapsible.js";
-import { default as ae } from "./components/Collapsible/CollapsibleContent.js";
-import { default as se } from "./components/Collapsible/CollapsibleTrigger.js";
-import { default as de } from "./components/ContentPeek/ContentPeek.js";
-import { HeightUnits as pe } from "./components/ContentPeek/utils.js";
-import { default as ie } from "./components/Detail/Detail.js";
-import { DetailVariants as xe } from "./components/Detail/types.js";
-import { default as ce } from "./components/Drawer/Drawer.js";
-import { default as Ce } from "./components/Dropdown/Dropdown.js";
-import { default as Te } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as be } from "./components/Grid/Grid.js";
-import { default as Le } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as Ve } from "./components/GridItem/types.js";
-import { default as De } from "./components/Input/Input.js";
-import { default as Fe } from "./components/Link/Link.js";
-import { LinkVariants as ke } from "./components/Link/types.js";
-import { default as Ne } from "./components/LinkBlock/LinkBlock.js";
-import { default as Me } from "./components/LinkList/LinkList.js";
-import { default as Ge } from "./components/Modal/Modal.js";
-import { default as ze } from "./components/Navigation/Navigation.js";
-import { default as We } from "./components/Navigation/NavigationItem/NavigationItem.js";
-import { default as Qe } from "./components/Navigation/NavigationItemWithSubmenu/NavigationItemWithSubmenu.js";
-import { default as Ye } from "./components/Navigation/NavigationItemWithSubmenu/NavigationDesktopSubmenu.js";
-import { default as qe } from "./components/Navigation/NavigationList/NavigationList.js";
-import { default as Ke } from "./components/Navigation/NavigationSubmenu/NavigationSubmenu.js";
-import { default as _e } from "./components/Pagination/Pagination.js";
-import { default as et } from "./components/PinchZoom/PinchZoom.js";
-import { default as ot } from "./components/Row/Row.js";
-import { default as at } from "./components/Search/Search.js";
-import { default as st } from "./components/SeldonImage/SeldonImage.js";
-import { default as dt } from "./components/Select/Select.js";
-import { SelectVariants as pt } from "./components/Select/types.js";
-import { default as it } from "./components/SplitPanel/SplitPanel.js";
-import { default as xt } from "./components/Tabs/TabsContainer.js";
-import { default as ct } from "./components/Tabs/TabsContent.js";
-import { Tag as Ct, default as Bt } from "./components/Tags/Tags.js";
-import { TextAlignments as Pt, TextVariants as bt } from "./components/Text/types.js";
-import { default as Lt } from "./components/Text/Text.js";
-import { TextSymbolVariants as Vt } from "./components/TextSymbol/types.js";
-import { default as Dt } from "./components/TextSymbol/TextSymbol.js";
-import { default as Ft } from "./components/Video/Video.js";
-import { default as kt } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
-import { default as Nt } from "./patterns/HeroBanner/HeroBanner.js";
-import { default as Mt } from "./patterns/TextBanner/TextBanner.js";
-import { default as Gt } from "./patterns/LanguageSelector/LanguageSelector.js";
-import { default as zt } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
-import { default as Wt } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
-import { default as Qt } from "./patterns/Social/Social.js";
-import { default as Yt } from "./patterns/Subscribe/Subscribe.js";
-import { SubscriptionState as qt } from "./patterns/Subscribe/types.js";
-import { AuthState as Kt } from "./patterns/UserManagement/types.js";
-import { default as _t } from "./patterns/UserManagement/UserManagement.js";
-import { default as eo } from "./patterns/ViewingsList/StatefulViewingsList.js";
-import { default as oo } from "./patterns/ViewingsList/ViewingsList.js";
-import { SeldonProvider as ao } from "./providers/SeldonProvider/SeldonProvider.js";
-import { default as so } from "./components/ComboBox/ComboBox.js";
-import { default as mo } from "./components/ComposedModal/ComposedModal.js";
-import { default as uo } from "./components/DetailList/DetailList.js";
-import { DetailListAlignment as no } from "./components/DetailList/types.js";
-import { default as go } from "./components/ExitGateCard/ExitGateCard.js";
-import { default as So } from "./components/Loader/Loader.js";
-import { default as Bo } from "./components/PageContentWrapper/PageContentWrapper.js";
-import { FilterButton as Po } from "./patterns/FiltersInline/FilterButton.js";
-import { default as Io } from "./patterns/FiltersInline/FiltersInline.js";
-import { FilterButtonIconType as Ao, FilterButtonType as Vo } from "./patterns/FiltersInline/types.js";
-import { default as Do } from "./patterns/SaleCard/SaleCard.js";
-import { SaleCardActions as Fo } from "./patterns/SaleCard/SaleCardActions.js";
-import { SaleCardImageDisplay as ko, SaleCardVariants as wo } from "./patterns/SaleCard/types.js";
-import { default as Ho } from "./patterns/ViewingDetails/ViewingDetails.js";
-import { default as Eo } from "./components/ProgressIndicator/ProgressIndicator.js";
-import { default as Ro } from "./site-furniture/Footer/Footer.js";
-import { default as Uo } from "./site-furniture/Header/Header.js";
-import { default as Oo } from "./components/AddToCalendar/AddToCalendar.js";
-import { default as jo } from "./components/Article/Article.js";
-import { default as Zo } from "./components/Countdown/Countdown.js";
-import { CountdownVariants as Jo } from "./components/Countdown/types.js";
-import { default as Xo } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
-import { default as $o } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
-import { default as tr } from "./components/Divider/Divider.js";
-import { default as rr } from "./components/FavoritingTileButton/FavoritingTileButton.js";
-import { default as fr } from "./components/Filter/Filter.js";
-import { default as lr } from "./components/Filter/FilterInput.js";
-import { default as mr } from "./components/Filter/FilterHeader.js";
-import { default as ur } from "./components/NotificationBanner/NotificationBanner.js";
-import { default as nr } from "./components/Pictogram/Pictogram.js";
-import { default as gr } from "./components/TextArea/TextArea.js";
-import { default as Sr } from "./components/Toast/Toast.js";
-import { ToastProvider as Br } from "./components/Toast/ToastContextProvider.js";
-import { useToast as Pr } from "./components/Toast/useToast.js";
-import { default as Ir } from "./patterns/AccountPageHeader/AccountPageHeader.js";
-import { default as Ar } from "./patterns/BidSnapshot/BidSnapshot.js";
-import { default as yr } from "./patterns/BidSnapshot/BidMessage.js";
-import { BidMessageVariants as vr, BidStatusEnum as Fr } from "./patterns/BidSnapshot/types.js";
-import { default as kr } from "./patterns/FilterMenu/FilterMenu.js";
-import { default as Nr } from "./patterns/ObjectTile/ObjectTile.js";
-import { default as Mr } from "./patterns/CountryPicker/CountryPicker.js";
-import { default as Gr } from "./patterns/ProgressWizard/ProgressWizard.js";
-import { ProgressWizardFooter as zr } from "./patterns/ProgressWizard/components/ProgressWizardFooter.js";
-import { useHistoryManagement as Wr } from "./patterns/ProgressWizard/hooks/useHistoryManagement.js";
-import { DefaultButtonLabels as Qr, LoadingState as jr } from "./patterns/ProgressWizard/types.js";
-import { default as Zr } from "./patterns/PhoneNumberInput/PhoneNumberInput.js";
+import { default as q } from "./components/Icon/Icon.js";
+import { default as K } from "./components/Carousel/Carousel.js";
+import { default as _ } from "./components/Carousel/CarouselArrows.js";
+import { default as ee } from "./components/Carousel/CarouselContent.js";
+import { default as oe } from "./components/Carousel/CarouselItem.js";
+import { default as ae } from "./components/Carousel/CarouselDots.js";
+import { default as se } from "./components/Collapsible/Collapsible.js";
+import { default as de } from "./components/Collapsible/CollapsibleContent.js";
+import { default as pe } from "./components/Collapsible/CollapsibleTrigger.js";
+import { default as ie } from "./components/ContentPeek/ContentPeek.js";
+import { HeightUnits as ne } from "./components/ContentPeek/utils.js";
+import { default as ce } from "./components/Detail/Detail.js";
+import { DetailVariants as Ce } from "./components/Detail/types.js";
+import { default as Te } from "./components/Drawer/Drawer.js";
+import { default as be } from "./components/Dropdown/Dropdown.js";
+import { default as Le } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as Ae } from "./components/Grid/Grid.js";
+import { default as De } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as Fe } from "./components/GridItem/types.js";
+import { default as ke } from "./components/Input/Input.js";
+import { default as Ne } from "./components/Link/Link.js";
+import { LinkVariants as Me } from "./components/Link/types.js";
+import { default as Ge } from "./components/LinkBlock/LinkBlock.js";
+import { default as ze } from "./components/LinkList/LinkList.js";
+import { default as We } from "./components/Modal/Modal.js";
+import { default as Qe } from "./components/Navigation/Navigation.js";
+import { default as Ye } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as qe } from "./components/Navigation/NavigationItemWithSubmenu/NavigationItemWithSubmenu.js";
+import { default as Ke } from "./components/Navigation/NavigationItemWithSubmenu/NavigationDesktopSubmenu.js";
+import { default as _e } from "./components/Navigation/NavigationList/NavigationList.js";
+import { default as et } from "./components/Navigation/NavigationSubmenu/NavigationSubmenu.js";
+import { default as ot } from "./components/Pagination/Pagination.js";
+import { default as at } from "./components/PinchZoom/PinchZoom.js";
+import { default as st } from "./components/Row/Row.js";
+import { default as dt } from "./components/Search/Search.js";
+import { default as pt } from "./components/SeldonImage/SeldonImage.js";
+import { default as it } from "./components/Select/Select.js";
+import { SelectVariants as nt } from "./components/Select/types.js";
+import { default as ct } from "./components/SplitPanel/SplitPanel.js";
+import { default as Ct } from "./components/Tabs/TabsContainer.js";
+import { default as Tt } from "./components/Tabs/TabsContent.js";
+import { Tag as bt, default as It } from "./components/Tags/Tags.js";
+import { TextAlignments as Vt, TextVariants as At } from "./components/Text/types.js";
+import { default as Dt } from "./components/Text/Text.js";
+import { TextSymbolVariants as Ft } from "./components/TextSymbol/types.js";
+import { default as kt } from "./components/TextSymbol/TextSymbol.js";
+import { default as Nt } from "./components/Video/Video.js";
+import { default as Mt } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
+import { default as Gt } from "./patterns/HeroBanner/HeroBanner.js";
+import { default as zt } from "./patterns/TextBanner/TextBanner.js";
+import { default as Wt } from "./patterns/LanguageSelector/LanguageSelector.js";
+import { default as Qt } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
+import { default as Yt } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
+import { default as qt } from "./patterns/Social/Social.js";
+import { default as Kt } from "./patterns/Subscribe/Subscribe.js";
+import { SubscriptionState as _t } from "./patterns/Subscribe/types.js";
+import { AuthState as eo } from "./patterns/UserManagement/types.js";
+import { default as oo } from "./patterns/UserManagement/UserManagement.js";
+import { default as ao } from "./patterns/ViewingsList/StatefulViewingsList.js";
+import { default as so } from "./patterns/ViewingsList/ViewingsList.js";
+import { SeldonProvider as mo } from "./providers/SeldonProvider/SeldonProvider.js";
+import { default as uo } from "./components/ComboBox/ComboBox.js";
+import { default as xo } from "./components/ComposedModal/ComposedModal.js";
+import { default as go } from "./components/DetailList/DetailList.js";
+import { DetailListAlignment as So } from "./components/DetailList/types.js";
+import { default as Bo } from "./components/ExitGateCard/ExitGateCard.js";
+import { default as Po } from "./components/Loader/Loader.js";
+import { default as Io } from "./components/PageContentWrapper/PageContentWrapper.js";
+import { FilterButton as Vo } from "./patterns/FiltersInline/FilterButton.js";
+import { default as yo } from "./patterns/FiltersInline/FiltersInline.js";
+import { FilterButtonIconType as vo, FilterButtonType as Fo } from "./patterns/FiltersInline/types.js";
+import { default as ko } from "./patterns/SaleCard/SaleCard.js";
+import { SaleCardActions as No } from "./patterns/SaleCard/SaleCardActions.js";
+import { SaleCardImageDisplay as Mo, SaleCardVariants as Eo } from "./patterns/SaleCard/types.js";
+import { default as Ro } from "./patterns/ViewingDetails/ViewingDetails.js";
+import { default as Uo } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { default as Oo } from "./site-furniture/Footer/Footer.js";
+import { default as jo } from "./site-furniture/Header/Header.js";
+import { default as Zo } from "./components/AddToCalendar/AddToCalendar.js";
+import { default as Jo } from "./components/Article/Article.js";
+import { default as Xo } from "./components/Countdown/Countdown.js";
+import { CountdownVariants as $o } from "./components/Countdown/types.js";
+import { default as tr } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
+import { default as rr } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
+import { default as fr } from "./components/Divider/Divider.js";
+import { default as lr } from "./components/FavoritingTileButton/FavoritingTileButton.js";
+import { default as mr } from "./components/Filter/Filter.js";
+import { default as ur } from "./components/Filter/FilterInput.js";
+import { default as xr } from "./components/Filter/FilterHeader.js";
+import { default as gr } from "./components/NotificationBanner/NotificationBanner.js";
+import { default as Sr } from "./components/Pictogram/Pictogram.js";
+import { default as Br } from "./components/TextArea/TextArea.js";
+import { default as Pr } from "./components/Toast/Toast.js";
+import { ToastProvider as Ir } from "./components/Toast/ToastContextProvider.js";
+import { useToast as Vr } from "./components/Toast/useToast.js";
+import { default as yr } from "./patterns/AccountPageHeader/AccountPageHeader.js";
+import { default as vr } from "./patterns/BidSnapshot/BidSnapshot.js";
+import { default as hr } from "./patterns/BidSnapshot/BidMessage.js";
+import { BidMessageVariants as wr, BidStatusEnum as Nr } from "./patterns/BidSnapshot/types.js";
+import { default as Mr } from "./patterns/FilterMenu/FilterMenu.js";
+import { default as Gr } from "./patterns/ObjectTile/ObjectTile.js";
+import { default as zr } from "./patterns/CountryPicker/CountryPicker.js";
+import { default as Wr } from "./patterns/ProgressWizard/ProgressWizard.js";
+import { ProgressWizardFooter as Qr } from "./patterns/ProgressWizard/components/ProgressWizardFooter.js";
+import { useHistoryManagement as Yr } from "./patterns/ProgressWizard/hooks/useHistoryManagement.js";
+import { DefaultButtonLabels as qr, LoadingState as Jr } from "./patterns/ProgressWizard/types.js";
+import { default as Xr } from "./patterns/PhoneNumberInput/PhoneNumberInput.js";
 export {
-  M as Accordion,
-  G as AccordionItem,
-  z as AccordionVariants,
-  Ir as AccountPageHeader,
-  Oo as AddToCalendar,
-  jo as Article,
-  A as AuctionStatus,
-  Kt as AuthState,
-  yr as BidMessage,
-  vr as BidMessageVariants,
-  Ar as BidSnapshot,
-  Fr as BidStatusEnum,
-  W as Breadcrumb,
+  z as Accordion,
+  W as AccordionItem,
+  Q as AccordionVariants,
+  yr as AccountPageHeader,
+  Zo as AddToCalendar,
+  Jo as Article,
+  V as AuctionStatus,
+  eo as AuthState,
+  hr as BidMessage,
+  wr as BidMessageVariants,
+  vr as BidSnapshot,
+  Nr as BidStatusEnum,
+  Y as Breadcrumb,
   v as Button,
   h as ButtonSizes,
   k as ButtonVariants,
-  Y as Carousel,
-  q as CarouselArrows,
-  K as CarouselContent,
-  ee as CarouselDots,
-  _ as CarouselItem,
-  oe as Collapsible,
-  ae as CollapsibleContent,
-  se as CollapsibleTrigger,
-  so as ComboBox,
-  mo as ComposedModal,
-  de as ContentPeek,
-  pe as ContentPeekHeightUnits,
-  Zo as Countdown,
-  Jo as CountdownVariants,
-  Mr as CountryPicker,
-  Qr as DefaultButtonLabels,
-  Xo as DescriptiveRadioButton,
-  $o as DescriptiveRadioButtonGroup,
-  ie as Detail,
-  uo as DetailList,
-  no as DetailListAlignment,
-  xe as DetailVariants,
-  tr as Divider,
-  ce as Drawer,
-  Ce as Dropdown,
-  Te as ErrorBoundary,
-  go as ExitGateCard,
-  kt as FavoritesCollectionTile,
-  rr as FavoritingTileButton,
-  fr as Filter,
-  Po as FilterButton,
-  Ao as FilterButtonIconType,
-  Vo as FilterButtonType,
-  mr as FilterHeader,
-  lr as FilterInput,
-  kr as FilterMenu,
-  Io as FiltersInline,
-  Ro as Footer,
-  be as Grid,
-  Le as GridItem,
-  Ve as GridItemAlign,
-  Uo as Header,
-  Nt as HeroBanner,
-  Q as Icon,
-  N as IconButton,
-  De as Input,
-  Gt as LanguageSelector,
-  Fe as Link,
-  Ne as LinkBlock,
-  Me as LinkList,
-  ke as LinkVariants,
-  So as Loader,
-  jr as LoadingState,
-  V as LotStatus,
-  Ge as Modal,
-  ze as Navigation,
-  Ye as NavigationDesktopSubmenu,
-  We as NavigationItem,
-  Qe as NavigationItemWithSubmenu,
-  qe as NavigationList,
-  Ke as NavigationSubmenu,
-  ur as NotificationBanner,
-  Nr as ObjectTile,
+  N as Card,
+  M as CardVariants,
+  K as Carousel,
+  _ as CarouselArrows,
+  ee as CarouselContent,
+  ae as CarouselDots,
+  oe as CarouselItem,
+  se as Collapsible,
+  de as CollapsibleContent,
+  pe as CollapsibleTrigger,
+  uo as ComboBox,
+  xo as ComposedModal,
+  ie as ContentPeek,
+  ne as ContentPeekHeightUnits,
+  Xo as Countdown,
+  $o as CountdownVariants,
+  zr as CountryPicker,
+  qr as DefaultButtonLabels,
+  tr as DescriptiveRadioButton,
+  rr as DescriptiveRadioButtonGroup,
+  ce as Detail,
+  go as DetailList,
+  So as DetailListAlignment,
+  Ce as DetailVariants,
+  fr as Divider,
+  Te as Drawer,
+  be as Dropdown,
+  Le as ErrorBoundary,
+  Bo as ExitGateCard,
+  Mt as FavoritesCollectionTile,
+  lr as FavoritingTileButton,
+  mr as Filter,
+  Vo as FilterButton,
+  vo as FilterButtonIconType,
+  Fo as FilterButtonType,
+  xr as FilterHeader,
+  ur as FilterInput,
+  Mr as FilterMenu,
+  yo as FiltersInline,
+  Oo as Footer,
+  Ae as Grid,
+  De as GridItem,
+  Fe as GridItemAlign,
+  jo as Header,
+  Gt as HeroBanner,
+  q as Icon,
+  G as IconButton,
+  ke as Input,
+  Wt as LanguageSelector,
+  Ne as Link,
+  Ge as LinkBlock,
+  ze as LinkList,
+  Me as LinkVariants,
+  Po as Loader,
+  Jr as LoadingState,
+  A as LotStatus,
+  We as Modal,
+  Qe as Navigation,
+  Ke as NavigationDesktopSubmenu,
+  Ye as NavigationItem,
+  qe as NavigationItemWithSubmenu,
+  _e as NavigationList,
+  et as NavigationSubmenu,
+  gr as NotificationBanner,
+  Gr as ObjectTile,
   a as PaddingTokens,
   C as Page,
-  Bo as PageContentWrapper,
-  _e as Pagination,
-  Zr as PhoneNumberInput,
-  nr as Pictogram,
-  et as PinchZoom,
-  Eo as ProgressIndicator,
-  Gr as ProgressWizard,
-  zr as ProgressWizardFooter,
-  ot as Row,
+  Io as PageContentWrapper,
+  ot as Pagination,
+  Xr as PhoneNumberInput,
+  Sr as Pictogram,
+  at as PinchZoom,
+  Uo as ProgressIndicator,
+  Wr as ProgressWizard,
+  Qr as ProgressWizardFooter,
+  st as Row,
   T as SSRMediaQuery,
-  Do as SaleCard,
-  Fo as SaleCardActions,
-  ko as SaleCardImageDisplay,
-  wo as SaleCardVariants,
-  zt as SaleHeaderBanner,
-  Wt as SaleHeaderBrowseAuctions,
-  at as Search,
-  st as SeldonImage,
-  ao as SeldonProvider,
-  dt as Select,
-  pt as SelectVariants,
-  Qt as Social,
+  ko as SaleCard,
+  No as SaleCardActions,
+  Mo as SaleCardImageDisplay,
+  Eo as SaleCardVariants,
+  Qt as SaleHeaderBanner,
+  Yt as SaleHeaderBrowseAuctions,
+  dt as Search,
+  pt as SeldonImage,
+  mo as SeldonProvider,
+  it as Select,
+  nt as SelectVariants,
+  qt as Social,
   f as SpacingTokens,
-  it as SplitPanel,
-  eo as StatefulViewingsList,
-  Yt as Subscribe,
-  qt as SubscriptionState,
+  ct as SplitPanel,
+  ao as StatefulViewingsList,
+  Kt as Subscribe,
+  _t as SubscriptionState,
   y as SupportedLanguages,
-  xt as TabsContainer,
-  ct as TabsContent,
-  Ct as Tag,
-  Bt as TagsList,
-  Lt as Text,
-  Pt as TextAlignments,
-  gr as TextArea,
-  Mt as TextBanner,
-  Vt as TextSymbolVariants,
-  Dt as TextSymbols,
-  bt as TextVariants,
-  Sr as Toast,
-  Br as ToastProvider,
-  _t as UserManagement,
-  Ft as Video,
-  Ho as ViewingDetails,
-  oo as ViewingsList,
+  Ct as TabsContainer,
+  Tt as TabsContent,
+  bt as Tag,
+  It as TagsList,
+  Dt as Text,
+  Vt as TextAlignments,
+  Br as TextArea,
+  zt as TextBanner,
+  Ft as TextSymbolVariants,
+  kt as TextSymbols,
+  At as TextVariants,
+  Pr as Toast,
+  Ir as ToastProvider,
+  oo as UserManagement,
+  Nt as Video,
+  Ro as ViewingDetails,
+  so as ViewingsList,
   s as defaultYear,
   l as emailValidation,
   d as encodeURLSearchParams,
@@ -253,12 +257,12 @@ export {
   p as findChildrenOfType,
   u as focusElementById,
   i as generatePaddingClassName,
-  n as getCommonProps,
-  x as noOp,
+  x as getCommonProps,
+  n as noOp,
   g as px,
   P as ssrMediaQueryStyle,
-  Wr as useHistoryManagement,
+  Yr as useHistoryManagement,
   c as useNormalizedInputProps,
   I as usePendingState,
-  Pr as useToast
+  Vr as useToast
 };

package/dist/patterns/SaleCard/SaleCard.d.ts

@@ -1,10 +1,10 @@
 import { ComponentProps } from 'react';
 import { SaleCardActions } from './SaleCardActions';
-import { SaleCardVariants, SaleCardImageDisplay } from './types';
+import { SaleCardImageDisplay, SaleCardVariants } from './types';
 /**
  * Props for the SaleCard component.
  */
-export interface SaleCardProps extends ComponentProps<'div'> {
+export interface SaleCardProps extends ComponentProps<'article'> {
     /**
      * The source URL of the image to be displayed.
      * Leaving this prop undefined or falsy is the intended way to hide the image.
@@ -45,5 +45,5 @@ export interface SaleCardProps extends ComponentProps<'div'> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/patterns-salecard--overview)
  */
-declare const SaleCard: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const SaleCard: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
 export default SaleCard;

package/dist/patterns/SaleCard/SaleCard.js

@@ -1,52 +1,51 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import u from "../../_virtual/index.js";
-import { forwardRef as L } from "react";
-import T from "../../components/Button/Button.js";
-import { ButtonVariants as A } from "../../components/Button/types.js";
-import I from "../../components/SeldonImage/SeldonImage.js";
-import { TextVariants as r } from "../../components/Text/types.js";
-import e from "../../components/Text/Text.js";
-import { SSRMediaQuery as k } from "../../providers/SeldonProvider/utils.js";
-import { getCommonProps as x } from "../../utils/index.js";
-import { SaleCardImageDisplay as P, SaleCardVariants as f } from "./types.js";
-const R = L(
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import L from "../../_virtual/index.js";
+import { forwardRef as M } from "react";
+import g from "../../components/Button/Button.js";
+import a from "../../components/Card/Card.js";
+import { CardVariants as A } from "../../components/Card/types.js";
+import { ButtonVariants as R } from "../../components/Button/types.js";
+import { SSRMediaQuery as T } from "../../providers/SeldonProvider/utils.js";
+import { getCommonProps as k } from "../../utils/index.js";
+import { SaleCardImageDisplay as w, SaleCardVariants as f } from "./types.js";
+const y = M(
   ({
     className: p,
-    imageSrc: s,
-    imageAlt: S = "Auction Image",
-    auctionType: h,
-    titleText: N,
-    date: $,
-    location: v,
-    badgeText: o,
-    modalButtonOnClick: n,
+    imageSrc: l,
+    imageAlt: h = "Auction Image",
+    auctionType: C,
+    titleText: u,
+    date: E,
+    location: S,
+    badgeText: s,
+    modalButtonOnClick: i,
     modalButtonText: t,
-    variant: m = f.DEFAULT,
-    children: c,
-    imageDisplay: d = P.LEFT,
-    ..._
-  }, g) => {
-    const { className: a, ...C } = x(_, "SaleCard"), E = u(a, p, {
-      [`${a}--${m}`]: m,
-      [`${a}--image-${d}`]: d
-    }), b = { ...C, ..._ };
-    return /* @__PURE__ */ i("article", { ...b, className: E, ref: g, children: [
-      s ? /* @__PURE__ */ l(I, { src: s, alt: S, className: `${a}__image` }) : null,
-      /* @__PURE__ */ i("div", { className: `${a}__details`, children: [
-        /* @__PURE__ */ l(e, { variant: r.labelSmall, children: h }),
-        /* @__PURE__ */ l(e, { variant: r.headingSmall, className: `${a}__title`, children: N }),
-        o && /* @__PURE__ */ l(e, { variant: r.badgeSmall, className: `${a}__badge`, children: o }),
-        /* @__PURE__ */ i("div", { className: `${a}__info`, children: [
-          /* @__PURE__ */ l(e, { variant: r.labelSmall, children: v }),
-          /* @__PURE__ */ l(e, { variant: r.labelSmall, children: $ }),
-          t && n && /* @__PURE__ */ l("div", { className: `${a}__modal-link`, children: /* @__PURE__ */ l(T, { onClick: n, variant: A.link, linkSize: "sm", children: t }) })
+    variant: o = f.DEFAULT,
+    children: n,
+    imageDisplay: c = w.LEFT,
+    ...d
+  }, _) => {
+    const { className: e, ...N } = k(d, "SaleCard"), $ = L(e, p, {
+      [`${e}--${o}`]: o,
+      [`${e}--image-${c}`]: c
+    }), I = { ...N, ...d };
+    return /* @__PURE__ */ m(a.Root, { ref: _, element: "article", variant: A.default, className: $, ...I, children: [
+      l ? /* @__PURE__ */ r(a.Image, { alt: h, src: l }) : null,
+      /* @__PURE__ */ m(a.Content, { children: [
+        /* @__PURE__ */ r(a.Eyebrow, { children: C }),
+        /* @__PURE__ */ r(a.Title, { children: u }),
+        s ? /* @__PURE__ */ r(a.Badge, { children: s }) : null,
+        /* @__PURE__ */ m(a.Meta, { className: `${e}__info`, children: [
+          /* @__PURE__ */ r(a.MetaItem, { children: S }),
+          /* @__PURE__ */ r(a.MetaItem, { children: E }),
+          t && i && /* @__PURE__ */ r("div", { className: `${e}__modal-link`, children: /* @__PURE__ */ r(g, { onClick: i, variant: R.link, linkSize: "sm", children: t }) })
         ] })
       ] }),
-      m !== f.RELATED_SALE_TILE && c && /* @__PURE__ */ l("div", { className: `${a}__ctas`, children: /* @__PURE__ */ l(k.Media, { greaterThanOrEqual: "snw-mobile", children: c }) })
+      o !== f.RELATED_SALE_TILE && n && /* @__PURE__ */ r("div", { className: `${e}__ctas`, children: /* @__PURE__ */ r(T.Media, { greaterThanOrEqual: "snw-mobile", children: n }) })
     ] });
   }
 );
-R.displayName = "SaleCard";
+y.displayName = "SaleCard";
 export {
-  R as default
+  y as default
 };

package/dist/patterns/SaleCard/SaleCard.stories.d.ts

@@ -1,7 +1,7 @@
 import { SaleCardProps } from './SaleCard';
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    component: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
 };
 export default meta;
 export declare const SaleCardPlayground: {

package/dist/scss/componentStyles.scss

@@ -8,6 +8,7 @@
 
 // ⚛️ Components
 @use 'components/Button/button';
+@use 'components/Card/card';
 @use 'components/IconButton/iconButton';
 @use 'components/Icon/icon';
 @use 'components/Grid/grid';

package/dist/scss/components/Card/_card.scss

@@ -0,0 +1,113 @@
+@use '../../allPartials' as *;
+
+.#{$px}-card {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+
+  @include media($breakpoint-snw-mobile) {
+    flex-direction: row;
+  }
+
+  &--stacked {
+    align-items: flex-start;
+    flex-direction: column;
+
+    .#{$px}-card__image,
+    .#{$px}-card__video {
+      min-width: 100%;
+    }
+
+    .#{$px}-card__details {
+      align-self: stretch;
+    }
+  }
+
+  &__image,
+  &__video {
+    align-items: center;
+    border-radius: $radius-xs;
+    display: flex;
+    flex: none;
+    justify-content: center;
+    min-width: 0;
+    width: 100%;
+
+    @include media($breakpoint-snw-mobile) {
+      flex: 0 0 30%;
+      min-width: auto;
+      width: auto;
+    }
+  }
+
+  &__image {
+    img {
+      height: auto;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  &__video {
+    width: 100%;
+  }
+
+  &__details {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: $spacing-micro;
+
+    @include media($size-snw-mobile, 'max') {
+      align-self: stretch;
+    }
+  }
+
+  &__title {
+    &.#{$px}-text {
+      text-transform: uppercase;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        color: inherit;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__cta {
+    align-self: flex-start;
+  }
+
+  &__description {
+    &.#{$px}-text {
+      color: $text-default;
+    }
+  }
+
+  &__badge {
+    border: 1px solid $badge-blue;
+    color: $badge-blue;
+    padding: $spacing-micro 8px;
+    text-transform: unset;
+  }
+
+  &__meta {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-micro;
+  }
+
+  &__meta-item {
+    &.#{$px}-text {
+      color: $text-supporting;
+    }
+  }
+}

package/dist/scss/components/SeldonImage/_seldonImage.scss

@@ -4,12 +4,24 @@
   overflow: hidden;
   position: relative;
 
-  &--aspect-ratio-16-9 img {
-    aspect-ratio: 16 / 9;
+  &--aspect-ratio-16-9 {
+    img {
+      aspect-ratio: 16 / 9;
+    }
+
+    &.#{$px}-seldon-image--error-image {
+      aspect-ratio: 16 / 9;
+    }
   }
 
-  &--aspect-ratio-1-1 img {
-    aspect-ratio: 1 / 1;
+  &--aspect-ratio-1-1 {
+    img {
+      aspect-ratio: 1 / 1;
+    }
+
+    &.#{$px}-seldon-image--error-image {
+      aspect-ratio: 1 / 1;
+    }
   }
 
   &--error {

package/dist/scss/patterns/SaleCard/_saleCard.scss

@@ -30,82 +30,18 @@ a:has(> .#{$px}-sale-card) {
     }
   }
 
-  &__title {
-    &.#{$px}-text {
-      text-transform: uppercase;
-    }
-  }
-
-  &__image {
-    align-items: center;
-    aspect-ratio: 91/51;
-    border-radius: $radius-xs;
-    display: flex;
-    flex: 0 0 30%;
-    justify-content: center;
-    min-width: 100%;
-
-    @include media($breakpoint-snw-mobile) {
-      min-width: auto;
-    }
-
-    img {
-      height: auto;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-
-  &__details {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: $spacing-micro;
-
-    @include media($size-snw-mobile, 'max') {
-      align-self: flex-start;
-    }
-  }
-
   &__ctas {
     flex: 0 0 0%;
 
-    @media (min-width: $breakpoint-snw-mobile) {
+    @include media($breakpoint-snw-mobile) {
       flex-basis: 250px;
     }
   }
 
-  &__date_info {
-    display: flex;
-    flex-direction: row;
-  }
-
-  &__separator {
-    margin: 0 8px;
-  }
-
-  &__info {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-micro;
-
-    .#{$px}-text {
-      color: $text-supporting;
-    }
-  }
-
   &__modal-link .#{$px}-button {
     @include text($linkSmall);
   }
 
-  &__badge {
-    border: 1px solid $badge-blue;
-    color: $badge-blue;
-    padding: $spacing-micro 8px;
-    text-transform: unset;
-  }
-
   &__cta-button {
     padding: $spacing-sm $spacing-lg;
     white-space: nowrap;
@@ -132,12 +68,13 @@ a:has(> .#{$px}-sale-card) {
       &.#{$px}-sale-card--image-left {
         flex-direction: row;
       }
+
       &.#{$px}-sale-card--image-right {
         flex-direction: row-reverse;
       }
     }
 
-    .#{$px}-sale-card__image {
+    > .#{$px}-card__image {
       max-width: $spacing-xxxl;
       min-width: 94px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.250.0",
+  "version": "1.251.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"