@phillips/seldon 1.161.0 → 1.163.0

package/dist/components/ComposedModal/ComposedModal.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { ModalProps } from '../Modal/Modal';
+export interface ModalButtonProps {
+    /**
+     * Callback click function for button
+     */
+    onClick?: () => void | unknown;
+    /**
+     * Button label text
+     */
+    buttonLabel?: string;
+}
+export interface ComposedModalProps extends Omit<ModalProps, 'onClose' | 'role' | 'style'> {
+    /**
+     * Title for Composed Modal
+     */
+    title: string;
+    /**
+     * The content of the modal.
+     */
+    children: React.ReactNode;
+    /**
+     * onClose handler for the modal
+     */
+    onClose?: () => void;
+    /**
+     * Maximum height value for the modal body
+     */
+    maxHeightValue?: string;
+    /**
+     * Left Button Props
+     */
+    secondaryButton?: ModalButtonProps;
+    /**
+     * Right Button Props
+     */
+    primaryButton?: ModalButtonProps;
+    /**
+     * Footer content for bottom of Viewings Details
+     */
+    footerContent?: ReactNode;
+}
+/**
+ * ## Overview
+ *
+ * A component for ComposedModal that extends the base Modal component.
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/Design-System--Responsive-Web?node-id=25578-15048&p=f&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-composedmodal--overview)
+ *
+ */
+declare const ComposedModal: import('react').ForwardRefExoticComponent<ComposedModalProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ComposedModal;

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

@@ -0,0 +1,38 @@
+import { ComposedModalProps } from './ComposedModal';
+declare const _default: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<ComposedModalProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Playground: {
+    (props: ComposedModalProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        title: string;
+        viewingDetailsProps: {
+            label: string;
+            sessionTimesLabel: string;
+            sessionTimes: {
+                sessionLabel: string;
+                sessionTime: string;
+            }[];
+            viewingTimes: string[];
+            location: string;
+            mapLink: string;
+        };
+    };
+};
+export declare const ComposedModalScroll: {
+    (props: ComposedModalProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        title: string;
+    };
+};
+export declare const ComposedModalSingleButton: {
+    (props: ComposedModalProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        title: string;
+    };
+};

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

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

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

@@ -0,0 +1 @@
+export { default as ComposedModal, type ComposedModalProps } from './ComposedModal';

package/dist/components/ExitGateCard/ExitGateCard.d.ts

@@ -0,0 +1,51 @@
+import { ComponentProps, ElementType, ReactNode } from 'react';
+import { ButtonVariants } from '../Button/types';
+export interface ExitGateCardProps extends ComponentProps<'div'> {
+    /**
+     * Image src to display at the right side of the article.
+     */
+    imageSrc?: string;
+    /**
+     * Top label for the article.
+     */
+    label?: ReactNode;
+    /**
+     * Header for the article.
+     */
+    header?: ReactNode;
+    /**
+     * Description for the article.
+     */
+    description?: ReactNode;
+    /**
+     * Custom link element to use for the link. Defaults to the `Link` component.
+     */
+    linkElement?: ElementType<ComponentProps<'a'>>;
+    /**
+     * Label for the link.
+     */
+    linkLabel?: ReactNode;
+    /**
+     * Href for the link.
+     */
+    linkHref?: string;
+    /**
+     * imageSrc alt text for accessibility.
+     */
+    altText?: string;
+    /**
+     * LinkVariants for the ExitGateCard.
+     */
+    variant?: ButtonVariants;
+}
+/**
+ * ## Overview
+ *
+ * Overview of this widget
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/Design-System--Foundations--RW-to-be-depreciated-?node-id=24825-524&p=f&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-ExitGateCard-overview)
+ */
+declare const ExitGateCard: import('react').ForwardRefExoticComponent<Omit<ExitGateCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ExitGateCard;

package/dist/components/ExitGateCard/ExitGateCard.js

@@ -0,0 +1,50 @@
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import h from "../../node_modules/classnames/index.js";
+import { forwardRef as $ } from "react";
+import { getCommonProps as v } from "../../utils/index.js";
+import C from "../Button/Button.js";
+import { ButtonVariants as E } from "../Button/types.js";
+import "../Link/types.js";
+import g from "../Link/Link.js";
+import y from "../SeldonImage/SeldonImage.js";
+import { TextVariants as e } from "../Text/types.js";
+import r from "../Text/Text.js";
+const G = $(
+  ({
+    className: f,
+    imageSrc: n,
+    label: o,
+    header: m,
+    description: s,
+    linkLabel: l,
+    linkHref: i,
+    linkElement: c = g,
+    variant: _ = E.secondary,
+    altText: N = "Exit Gate Card Image",
+    ...d
+  }, u) => {
+    const { className: t, ...x } = v(d, "ExitGateCard");
+    return /* @__PURE__ */ p("article", { ...x, className: h(t, f), ...d, ref: u, children: [
+      n ? /* @__PURE__ */ a(
+        y,
+        {
+          objectFit: "cover",
+          aspectRatio: "16/9",
+          src: n,
+          alt: N,
+          className: `${t}__desktop_image`
+        }
+      ) : null,
+      /* @__PURE__ */ p("div", { className: `${t}__content`, children: [
+        o ? /* @__PURE__ */ a(r, { variant: e.body2, element: "span", className: `${t}__content-label`, children: o }) : null,
+        m ? /* @__PURE__ */ a(r, { variant: e.heading1, element: "span", className: `${t}__content-title`, children: m }) : null,
+        s ? /* @__PURE__ */ a(r, { variant: e.body2, element: "span", className: `${t}__content-description`, children: s }) : null,
+        (l || c) && i ? /* @__PURE__ */ a(c, { href: i, children: /* @__PURE__ */ a(C, { variant: _, className: `${t}__content-link`, children: l }) }) : null
+      ] })
+    ] });
+  }
+);
+G.displayName = "ExitGateCard";
+export {
+  G as default
+};

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

@@ -0,0 +1,18 @@
+import { ExitGateCardProps } from './ExitGateCard';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<ExitGateCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: ExitGateCardProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        imageSrc: string;
+        label: string;
+        header: string;
+        description: string;
+        linkLabel: string;
+        linkHref: string;
+        variant: string;
+    };
+};

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

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

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

@@ -0,0 +1 @@
+export { default as ExitGateCard, type ExitGateCardProps } from './ExitGateCard';

package/dist/components/SaleCard/SaleCard.js

@@ -1,48 +1,48 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import { forwardRef as R } from "react";
 import { getCommonProps as V } from "../../utils/index.js";
 import $ from "../../node_modules/classnames/index.js";
 import { TextVariants as i } from "../Text/types.js";
 import e from "../Text/Text.js";
 import j from "../SeldonImage/SeldonImage.js";
-import t from "../Button/Button.js";
+import n from "../Button/Button.js";
 import { ButtonVariants as m } from "../Button/types.js";
 import { SSRMediaQuery as D } from "../../providers/SeldonProvider/utils.js";
 import { SaleCardVariants as v } from "./types.js";
 const M = R(
   ({
     className: g,
-    imageSrc: o,
+    imageSrc: c,
     imageAlt: b = "Auction Image",
     auctionType: C,
     titleText: S,
     date: E,
     location: k,
-    primaryButtonText: c,
+    primaryButtonText: o,
     primaryButtonOnClick: d,
     secondaryButtonText: _,
-    secondaryButtonHref: s,
+    secondaryButtonHref: l,
     secondaryButtonOnClick: u,
     badgeText: h,
     modalButtonOnClick: p,
     modalButtonText: f,
-    variant: n = v.DEFAULT,
+    variant: t = v.DEFAULT,
     ...N
   }, A) => {
     const { className: a, ...L } = V(N, "SaleCard"), I = $(a, g, {
-      [`${a}--${n}`]: n
+      [`${a}--${t}`]: t
     }), P = { ...L, ...N };
-    return /* @__PURE__ */ l("div", { ...P, className: I, ref: A, children: [
-      o ? /* @__PURE__ */ r(j, { src: o, alt: b, className: `${a}__image` }) : null,
-      /* @__PURE__ */ l("div", { className: `${a}__details`, children: [
+    return /* @__PURE__ */ s("article", { ...P, className: I, ref: A, children: [
+      c ? /* @__PURE__ */ r(j, { src: c, alt: b, className: `${a}__image` }) : null,
+      /* @__PURE__ */ s("div", { className: `${a}__details`, children: [
         /* @__PURE__ */ r(e, { variant: i.badge, className: `${a}__auction-type`, children: C }),
         /* @__PURE__ */ r(e, { variant: i.title3, children: S }),
         h && /* @__PURE__ */ r(e, { variant: i.badge, className: `${a}__badge`, children: h }),
-        /* @__PURE__ */ l("div", { className: `${a}__info`, children: [
+        /* @__PURE__ */ s("div", { className: `${a}__info`, children: [
           /* @__PURE__ */ r(e, { variant: i.string2, children: k }),
           /* @__PURE__ */ r(e, { variant: i.string2, children: E }),
           f && p && /* @__PURE__ */ r("div", { className: `${a}__modal-link`, children: /* @__PURE__ */ r(
-            t,
+            n,
             {
               onClick: p,
               variant: m.tertiary,
@@ -52,25 +52,25 @@ const M = R(
           ) })
         ] })
       ] }),
-      n !== v.RELATED_SALE_TILE && /* @__PURE__ */ r(D.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ l("div", { className: `${a}__cta`, children: [
-        c && d && /* @__PURE__ */ r(
-          t,
+      t !== v.RELATED_SALE_TILE && /* @__PURE__ */ r(D.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ s("div", { className: `${a}__cta`, children: [
+        o && d && /* @__PURE__ */ r(
+          n,
           {
             variant: m.primary,
             onClick: d,
             className: `${a}__cta-button`,
-            children: c
+            children: o
           }
         ),
         _ && /* @__PURE__ */ r(
-          t,
+          n,
           {
-            variant: s ? m.tertiary : m.secondary,
-            href: s,
-            target: s ? "_blank" : void 0,
+            variant: l ? m.tertiary : m.secondary,
+            href: l,
+            target: l ? "_blank" : void 0,
             onClick: u,
             className: $(`${a}__cta-button`, {
-              [`${a}__pdf-link`]: s
+              [`${a}__pdf-link`]: l
             }),
             children: _
           }

package/dist/index.d.ts

@@ -58,6 +58,7 @@ export * from './components/Carousel';
 export * from './components/ComboBox';
 export * from './components/PhoneNumberPicker';
 export * from './components/Detail';
+export * from './components/ExitGateCard';
 export * from './components/Loader';
 export { default as PageContentWrapper } from './components/PageContentWrapper/PageContentWrapper';
 export * from './components/PinchZoom';

package/dist/index.js

@@ -8,7 +8,7 @@ import { ButtonVariants as y } from "./components/Button/types.js";
 import { default as D } from "./components/IconButton/IconButton.js";
 import { default as M } from "./components/Accordion/Accordion.js";
 import { default as E } from "./components/Accordion/AccordionItem.js";
-import { AccordionItemVariant as G, AccordionVariants as O } from "./components/Accordion/types.js";
+import { AccordionItemVariant as U, AccordionVariants as O } from "./components/Accordion/types.js";
 import { default as Q } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
@@ -36,7 +36,7 @@ import { LinkVariants as we } from "./components/Link/types.js";
 import { default as He } from "./components/LinkBlock/LinkBlock.js";
 import { default as Fe } from "./components/LinkList/LinkList.js";
 import { default as Ne } from "./components/Modal/Modal.js";
-import { default as Ue } from "./components/Navigation/Navigation.js";
+import { default as Ge } from "./components/Navigation/Navigation.js";
 import { default as Oe } from "./components/Navigation/NavigationItem/NavigationItem.js";
 import { default as Qe } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
 import { default as ze } from "./components/Navigation/NavigationList/NavigationList.js";
@@ -62,7 +62,7 @@ import { default as wt } from "./patterns/FavoritesCollectionTile/FavoritesColle
 import { default as Ht } from "./patterns/HeroBanner/HeroBanner.js";
 import { default as Ft } from "./patterns/LanguageSelector/LanguageSelector.js";
 import { default as Nt } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
-import { default as Ut } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
+import { default as Gt } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
 import { default as Ot } from "./patterns/Social/Social.js";
 import { default as Qt } from "./patterns/Subscribe/Subscribe.js";
 import { SubscriptionState as zt } from "./patterns/Subscribe/types.js";
@@ -73,46 +73,47 @@ import { default as _t } from "./patterns/ViewingsList/ViewingsList.js";
 import { SeldonProvider as eo } from "./providers/SeldonProvider/SeldonProvider.js";
 import { default as oo } from "./components/ComboBox/ComboBox.js";
 import { default as ao } from "./components/PhoneNumberPicker/PhoneNumberPicker.js";
-import { default as so } from "./components/Loader/Loader.js";
-import { default as mo } from "./components/PageContentWrapper/PageContentWrapper.js";
-import { default as uo } from "./site-furniture/Footer/Footer.js";
-import { default as io } from "./site-furniture/Header/Header.js";
-import { default as go } from "./components/AddToCalendar/AddToCalendar.js";
-import { default as So } from "./components/Article/Article.js";
-import { default as To } from "./components/SaleCard/SaleCard.js";
-import { SaleCardVariants as Bo } from "./components/SaleCard/types.js";
-import { default as Ao } from "./components/Countdown/Countdown.js";
-import { CountdownVariants as Io } from "./components/Countdown/types.js";
-import { default as ho } from "./components/Divider/Divider.js";
-import { default as vo } from "./components/FavoritingTileButton/FavoritingTileButton.js";
-import { default as yo } from "./components/Filter/Filter.js";
-import { default as Do } from "./components/Filter/FilterInput.js";
-import { default as Mo } from "./components/Filter/FilterHeader.js";
-import { default as Eo } from "./components/Pictogram/Pictogram.js";
-import { default as Go } from "./components/TextArea/TextArea.js";
-import { default as Ro } from "./components/Toast/Toast.js";
-import { ToastProvider as jo } from "./components/Toast/ToastContextProvider.js";
-import { useToast as Wo } from "./components/Toast/useToast.js";
-import { default as Zo } from "./patterns/AccountPageHeader/AccountPageHeader.js";
-import { default as Jo } from "./patterns/BidSnapshot/BidSnapshot.js";
-import { default as Xo } from "./patterns/BidSnapshot/BidMessage.js";
-import { BidMessageVariants as $o, BidStatusEnum as er } from "./patterns/BidSnapshot/types.js";
-import { default as or } from "./patterns/FilterMenu/FilterMenu.js";
-import { default as ar } from "./patterns/ObjectTile/ObjectTile.js";
+import { default as so } from "./components/ExitGateCard/ExitGateCard.js";
+import { default as mo } from "./components/Loader/Loader.js";
+import { default as uo } from "./components/PageContentWrapper/PageContentWrapper.js";
+import { default as io } from "./site-furniture/Footer/Footer.js";
+import { default as go } from "./site-furniture/Header/Header.js";
+import { default as So } from "./components/AddToCalendar/AddToCalendar.js";
+import { default as To } from "./components/Article/Article.js";
+import { default as Bo } from "./components/SaleCard/SaleCard.js";
+import { SaleCardVariants as Ao } from "./components/SaleCard/types.js";
+import { default as Io } from "./components/Countdown/Countdown.js";
+import { CountdownVariants as ho } from "./components/Countdown/types.js";
+import { default as vo } from "./components/Divider/Divider.js";
+import { default as yo } from "./components/FavoritingTileButton/FavoritingTileButton.js";
+import { default as Do } from "./components/Filter/Filter.js";
+import { default as Mo } from "./components/Filter/FilterInput.js";
+import { default as Eo } from "./components/Filter/FilterHeader.js";
+import { default as Uo } from "./components/Pictogram/Pictogram.js";
+import { default as Ro } from "./components/TextArea/TextArea.js";
+import { default as jo } from "./components/Toast/Toast.js";
+import { ToastProvider as Wo } from "./components/Toast/ToastContextProvider.js";
+import { useToast as Zo } from "./components/Toast/useToast.js";
+import { default as Jo } from "./patterns/AccountPageHeader/AccountPageHeader.js";
+import { default as Xo } from "./patterns/BidSnapshot/BidSnapshot.js";
+import { default as $o } from "./patterns/BidSnapshot/BidMessage.js";
+import { BidMessageVariants as tr, BidStatusEnum as or } from "./patterns/BidSnapshot/types.js";
+import { default as ar } from "./patterns/FilterMenu/FilterMenu.js";
+import { default as sr } from "./patterns/ObjectTile/ObjectTile.js";
 export {
   M as Accordion,
   E as AccordionItem,
-  G as AccordionItemVariant,
+  U as AccordionItemVariant,
   O as AccordionVariants,
-  Zo as AccountPageHeader,
-  go as AddToCalendar,
-  So as Article,
+  Jo as AccountPageHeader,
+  So as AddToCalendar,
+  To as Article,
   I as AuctionStatus,
   Yt as AuthState,
-  Xo as BidMessage,
-  $o as BidMessageVariants,
-  Jo as BidSnapshot,
-  er as BidStatusEnum,
+  $o as BidMessage,
+  tr as BidMessageVariants,
+  Xo as BidSnapshot,
+  or as BidStatusEnum,
   Q as Breadcrumb,
   v as Button,
   y as ButtonVariants,
@@ -127,26 +128,27 @@ export {
   oo as ComboBox,
   de as ContentPeek,
   pe as ContentPeekHeightUnits,
-  Ao as Countdown,
-  Io as CountdownVariants,
+  Io as Countdown,
+  ho as CountdownVariants,
   xe as Detail,
   Vt as DetailList,
   kt as DetailListAlignment,
-  ho as Divider,
+  vo as Divider,
   ne as Drawer,
   ce as Dropdown,
   Ce as ErrorBoundary,
+  so as ExitGateCard,
   wt as FavoritesCollectionTile,
-  vo as FavoritingTileButton,
-  yo as Filter,
-  Mo as FilterHeader,
-  Do as FilterInput,
-  or as FilterMenu,
-  uo as Footer,
+  yo as FavoritingTileButton,
+  Do as Filter,
+  Eo as FilterHeader,
+  Mo as FilterInput,
+  ar as FilterMenu,
+  io as Footer,
   Pe as Grid,
   Le as GridItem,
   be as GridItemAlign,
-  io as Header,
+  go as Header,
   Ht as HeroBanner,
   z as Icon,
   D as IconButton,
@@ -156,27 +158,27 @@ export {
   He as LinkBlock,
   Fe as LinkList,
   we as LinkVariants,
-  so as Loader,
+  mo as Loader,
   V as LotStatus,
   Ne as Modal,
-  Ue as Navigation,
+  Ge as Navigation,
   Oe as NavigationItem,
   Qe as NavigationItemTrigger,
   ze as NavigationList,
-  ar as ObjectTile,
+  sr as ObjectTile,
   a as PaddingTokens,
   C as Page,
-  mo as PageContentWrapper,
+  uo as PageContentWrapper,
   Ye as Pagination,
   ao as PhoneNumberPicker,
-  Eo as Pictogram,
+  Uo as Pictogram,
   qe as PinchZoom,
   Ke as Row,
   P as SSRMediaQuery,
-  To as SaleCard,
-  Bo as SaleCardVariants,
+  Bo as SaleCard,
+  Ao as SaleCardVariants,
   Nt as SaleHeaderBanner,
-  Ut as SaleHeaderBrowseAuctions,
+  Gt as SaleHeaderBrowseAuctions,
   _e as Search,
   et as SeldonImage,
   eo as SeldonProvider,
@@ -195,12 +197,12 @@ export {
   it as TagsList,
   Ct as Text,
   gt as TextAlignments,
-  Go as TextArea,
+  Ro as TextArea,
   Pt as TextSymbolVariants,
   Lt as TextSymbols,
   ct as TextVariants,
-  Ro as Toast,
-  jo as ToastProvider,
+  jo as Toast,
+  Wo as ToastProvider,
   qt as UserManagement,
   bt as Video,
   _t as ViewingsList,
@@ -217,5 +219,5 @@ export {
   B as ssrMediaQueryStyle,
   c as useNormalizedInputProps,
   A as usePendingState,
-  Wo as useToast
+  Zo as useToast
 };

package/dist/patterns/ViewingDetails/ViewingDetails.d.ts

@@ -0,0 +1,62 @@
+import { ComponentProps, ElementType } from 'react';
+import { LinkProps } from '../../components/Link';
+export interface ViewingSessionProps {
+    /**
+     * Session label for viewing session text
+     */
+    sessionLabel?: string;
+    /**
+     * Session time for viewing session text
+     */
+    sessionTime?: string;
+}
+export interface ViewingDetailsProps extends ComponentProps<'div'> {
+    /**
+     * Unique id for component
+     */
+    id?: string;
+    /**
+     * Label for Viewings Details
+     */
+    label?: string;
+    /**
+     * Session Times label text for Viewings Details
+     */
+    sessionTimesLabel?: string;
+    /**
+     * Session Times data array
+     */
+    sessionTimes?: ViewingSessionProps[];
+    /**
+     * Viewing Times string array
+     */
+    viewingTimes?: string[];
+    /**
+     * Location of Viewings Details
+     */
+    location?: string;
+    /**
+     * Custom link element to use for the link. Defaults to the `Link` component.
+     */
+    linkElement?: ElementType<LinkProps>;
+    /**
+     * Google maps link for Viewings Details
+     */
+    mapLink?: string;
+    /**
+     * Callback for onClose function
+     */
+    onClose?: () => void | unknown;
+}
+/**
+ * ## Overview
+ *
+ * A simple component for displaying viewing details such as session times, viewing times, location, and a map link.
+ *
+ * [Figma Link](https://www.figma.com/design/H1kCh6MXU8jasYbQuCbyBt/Calendar?node-id=6-17&p=f&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-viewingdetails--overview)
+ *
+ */
+declare const ViewingDetails: import('react').ForwardRefExoticComponent<Omit<ViewingDetailsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ViewingDetails;

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

@@ -0,0 +1,40 @@
+import { ViewingDetailsProps } from './ViewingDetails';
+declare const _default: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<ViewingDetailsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Playground: {
+    (props: ViewingDetailsProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        label: string;
+        sessionTimesLabel: string;
+        sessionTimes: {
+            sessionLabel: string;
+            sessionTime: string;
+        }[];
+        viewingTimes: string[];
+        location: string;
+        mapLink: string;
+    };
+};
+export declare const CenterAlignText: {
+    (props: ViewingDetailsProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        title: string;
+        label: string;
+        sessionTimesLabel: string;
+        children: import('react').ReactElement<{
+            src: string;
+            alt: string;
+        }, string | import('react').JSXElementConstructor<any>>;
+        sessionTimes: {
+            sessionLabel: string;
+            sessionTime: string;
+        }[];
+        viewingTimes: string[];
+        location: string;
+        mapLink: string;
+    };
+};

package/dist/patterns/ViewingDetails/ViewingDetails.test.d.ts

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

package/dist/patterns/ViewingDetails/ViewingDetailsMock.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export declare const viewingDetailsProps: {
+    label: string;
+    sessionTimesLabel: string;
+    sessionTimes: {
+        sessionLabel: string;
+        sessionTime: string;
+    }[];
+    viewingTimes: string[];
+    location: string;
+    mapLink: string;
+};
+export declare const viewingDetailsWithChildrenProps: {
+    id: string;
+    title: string;
+    label: string;
+    sessionTimesLabel: string;
+    children: React.ReactElement<{
+        src: string;
+        alt: string;
+    }, string | React.JSXElementConstructor<any>>;
+    sessionTimes: {
+        sessionLabel: string;
+        sessionTime: string;
+    }[];
+    viewingTimes: string[];
+    location: string;
+    mapLink: string;
+};

package/dist/patterns/ViewingDetails/index.d.ts

@@ -0,0 +1 @@
+export { default as ViewingDetails, type ViewingDetailsProps } from './ViewingDetails';

package/dist/scss/componentStyles.scss

@@ -50,12 +50,15 @@
 @use 'components/Filter/filter';
 @use 'components/FavoritingTileButton/favoritingTileButton';
 @use 'components/Toast/toast';
+@use 'components/ExitGateCard/exitGateCard';
+@use 'components/ComposedModal/composedModal';
 
 // Patterns
 @use 'patterns/HeroBanner/heroBanner';
 @use 'patterns/LanguageSelector/languageSelector';
 @use 'patterns/UserManagement/userManagement';
 @use 'patterns/ViewingsList/viewingsList';
+@use 'patterns/ViewingDetails/viewingDetails';
 @use 'patterns/Subscribe/subscribe';
 @use 'patterns/Social/social';
 @use 'patterns/SaleHeaderBanner/saleHeaderBanner';

package/dist/scss/components/ComposedModal/_composedModal.scss

@@ -0,0 +1,53 @@
+@use '../../allPartials' as *;
+
+.#{$px}-composed-modal {
+  border-radius: 1rem;
+  max-width: 95vw;
+  min-width: 0;
+  padding: $spacing-sm 0;
+  width: 95vw;
+
+  &__title {
+    margin-top: $spacing-md;
+    padding: 0 $spacing-md;
+  }
+
+  &__body {
+    max-height: var('--max-modal-body-height');
+    overflow-y: auto;
+  }
+
+  &__divider {
+    margin: 0;
+  }
+
+  &__btns-group {
+    display: flex;
+    gap: $spacing-sm;
+    justify-content: center;
+    padding: $spacing-sm $spacing-md;
+  }
+
+  &__btns-group > * {
+    flex: 1 1 50%;
+    max-width: 50%;
+  }
+
+  &__btns {
+    padding: 0 $spacing-md $spacing-sm;
+  }
+
+  &__disclaimer {
+    margin-top: $spacing-sm;
+    padding: 0 $spacing-md;
+  }
+
+  @media (min-width: $breakpoint-md) {
+    width: auto;
+  }
+}
+
+.#{$px}-composed-modal__body {
+  max-height: var(--max-modal-body-height);
+  overflow-y: auto;
+}

package/dist/scss/components/ExitGateCard/_exitGateCard.scss

@@ -0,0 +1,79 @@
+@use '../../allPartials' as *;
+
+.#{$px}-exit-gate-card {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  padding-left: $spacing-md;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+
+    &__desktop_image {
+      max-width: unset;
+      overflow: visible;
+    }
+  }
+
+  @media (min-width: $breakpoint-md) {
+    flex-direction: row;
+    padding-left: $spacing-lg;
+
+    &__desktop_image {
+      max-width: 405px;
+    }
+  }
+
+  &__content {
+    align-items: flex-start;
+    color: $pure-black;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+    margin: auto 0;
+
+    &-label {
+      @media (max-width: $breakpoint-md) {
+        font-variation-settings: 'wght' 500;
+      }
+    }
+
+    &-title {
+      margin: 0;
+    }
+
+    &-description {
+      @media (max-width: $breakpoint-md) {
+        font-size: $body-size1;
+        text-align: center;
+      }
+    }
+
+    &-link {
+      font-size: $body-size3;
+      padding: $padding-xsm $padding-xxl;
+
+      @media (max-width: $breakpoint-md) {
+        font-size: $body-size2;
+      }
+    }
+  }
+}
+
+.#{$px}-exit-gate-card {
+  display: flex;
+  flex-direction: row-reverse;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  &__content {
+    @media (max-width: $breakpoint-md) {
+      align-items: center;
+      margin-top: $spacing-md;
+      padding: 0 $spacing-md;
+    }
+  }
+}

package/dist/scss/components/IconButton/_iconButton.scss

@@ -98,6 +98,7 @@
       background-color: $button-hover;
 
       & svg {
+        color: $pure-white;
         fill: $pure-white;
         margin-inline-end: unset;
 

package/dist/scss/components/SaleCard/_saleCard.scss

@@ -4,11 +4,10 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: $spacing-md;
 
   @include media($breakpoint-md) {
     flex-direction: row;
-    gap: $spacing-md;
   }
 
   &__image {
@@ -122,5 +121,8 @@
         max-width: calc($spacing-xxxl * 1.25);
       }
     }
+    .#{$px}-sale-card__auction-type {
+      font-size: 0.5rem;
+    }
   }
 }

package/dist/scss/patterns/ViewingDetails/_viewingDetails.scss

@@ -0,0 +1,51 @@
+@use '../../allPartials' as *;
+
+.#{$px}-viewing-details {
+  &__content {
+    padding: 0 $spacing-md;
+    position: relative;
+  }
+
+  &__children {
+    margin-bottom: $spacing-md;
+  }
+
+  &__center-align {
+    text-align: center;
+  }
+
+  &__label {
+    margin-bottom: 0;
+  }
+
+  &__close-icon {
+    cursor: pointer;
+    position: absolute;
+    right: $spacing-sm;
+    top: $spacing-sm;
+  }
+
+  &__text {
+    margin-bottom: $spacing-sm;
+  }
+
+  &__location {
+    margin-bottom: $spacing-xsm;
+    margin-top: $spacing-md;
+  }
+
+  &__map-link {
+    margin-bottom: $spacing-md;
+  }
+}
+
+.#{$px}-viewing-details__content .#{$px}-viewing-details__label {
+  margin-bottom: 0;
+}
+.#{$px}-viewing-details__content .#{$px}-viewing-details__text {
+  margin-bottom: $spacing-sm;
+}
+.#{$px}-viewing-details__content .#{$px}-viewing-details__location {
+  margin-bottom: $spacing-xsm;
+  margin-top: $spacing-md;
+}

package/dist/scss/patterns/ViewingDetails/_viewingDetails.stories.scss

@@ -0,0 +1,5 @@
+@import '../../allPartials';
+
+.story-center-align {
+  text-align: center;
+}

package/package.json

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