@phillips/seldon 1.98.1 → 1.100.0

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

@@ -19,4 +19,11 @@ export declare const CarouselWithDots: {
     };
     argTypes: {};
 };
+export declare const CarouselWithDotsOverflow: {
+    (props: CarouselProps & CarouselDotsProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        maxDots: number;
+    };
+    argTypes: {};
+};
 export declare const ControlledCarousel: (props: CarouselProps & CarouselDotsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Carousel/CarouselDot.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    /** Whether the dot is selected */
+    isSelected: boolean;
+    /** Callback function when the dot is clicked */
+    onClick: () => void;
+    /** Base class name for styling */
+    baseClassName: string;
+    /** Reference to the scrollable container */
+    scrollableContainerRef: React.RefObject<HTMLDivElement>;
+    /** Callback function when the dot comes into view within the scrollable container */
+    onInViewChange: (inView: boolean) => void;
+    /** Variant of the dot */
+    variant?: 'sm' | 'md';
+}
+export declare const CarouselDot: ({ isSelected, onClick, baseClassName, scrollableContainerRef, onInViewChange, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Carousel/CarouselDot.js

@@ -0,0 +1,40 @@
+import { jsx as n } from "react/jsx-runtime";
+import r from "../../node_modules/classnames/index.js";
+import { useInView as m } from "../../node_modules/react-intersection-observer/dist/index.js";
+const l = ({
+  isSelected: i,
+  onClick: e,
+  baseClassName: o,
+  scrollableContainerRef: c,
+  onInViewChange: p,
+  variant: t = "md"
+}) => {
+  const { ref: d } = m({
+    threshold: 0,
+    root: c.current,
+    onChange(a) {
+      p(a);
+    }
+  });
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      ref: d,
+      role: "button",
+      onClick: e,
+      className: r(`${o}-pagination-dot__container`),
+      children: /* @__PURE__ */ n(
+        "span",
+        {
+          className: r(`${o}-pagination-dot`, {
+            [`${o}-pagination-dot--selected`]: i,
+            [`${o}-pagination-dot--${t}`]: t
+          })
+        }
+      )
+    }
+  );
+};
+export {
+  l as CarouselDot
+};

package/dist/components/Carousel/CarouselDots.js

@@ -1,75 +1,92 @@
-import { jsx as c } from "react/jsx-runtime";
-import d from "../../node_modules/classnames/index.js";
-import { forwardRef as D, useId as P, useState as S, useCallback as f, useEffect as V } from "react";
-import { useCarousel as _ } from "./utils.js";
-import { getCommonProps as j } from "../../utils/index.js";
-const w = D(
-  ({ className: $, maxDots: l = 7, position: h = "inline", numberOfSlides: b = 0, ...u }, N) => {
-    const { className: s, ...C } = j(u, "Carousel"), M = P(), { api: e, onSlideChange: o } = _(), [g, v] = S(0), [i, k] = S(
-      Array.from({ length: b }, (t, n) => n)
-    ), x = f(
-      (t) => {
-        e && (e.scrollTo(t, !0), o == null || o(t));
+import { jsx as u } from "react/jsx-runtime";
+import B from "../../node_modules/classnames/index.js";
+import { forwardRef as E, useId as L, useState as S, useRef as M, useCallback as a, useEffect as W, useMemo as q } from "react";
+import { useCarousel as z } from "./utils.js";
+import { getCommonProps as A } from "../../utils/index.js";
+import { CarouselDot as F } from "./CarouselDot.js";
+const G = E(
+  ({ className: w, maxDots: g = 9, position: N = "inline", numberOfSlides: v = 0, ...h }, V) => {
+    const { className: l, ...b } = A(h, "Carousel"), k = L(), { api: o, onSlideChange: n } = z(), [y, R] = S(0), [i, T] = S(
+      Array.from({ length: v }, (e, t) => t)
+    ), c = M(null), [C, D] = S([]), $ = a((e) => {
+      var t, m;
+      c.current && ((m = (t = c.current).scrollTo) == null || m.call(t, {
+        // 8px width + 12px gap
+        left: e * 20 - c.current.offsetWidth / 2 + 10,
+        // Center dot in container
+        behavior: "smooth"
+      }));
+    }, []), O = a(
+      (e) => {
+        o && (o.scrollTo(e, !0), n == null || n(e));
       },
-      [e, o]
-    ), p = f((t) => {
-      k(t.scrollSnapList());
-    }, []), a = f((t) => {
-      v(t.selectedScrollSnap());
-    }, []), m = f(
-      (t) => {
-        o == null || o(t.selectedScrollSnap());
+      [o, n]
+    ), f = a((e) => {
+      T(e.scrollSnapList());
+    }, []), s = a(
+      (e) => {
+        R(e.selectedScrollSnap()), $(e.selectedScrollSnap());
       },
-      [o]
+      [$]
+    ), p = a(
+      (e) => {
+        n == null || n(e.selectedScrollSnap());
+      },
+      [n]
     );
-    V(() => {
-      if (e)
-        return p(e), a(e), e.on("reInit", p).on("reInit", a).on("select", a).on("settle", m), () => {
-          e.off("reInit", p).off("reInit", a).off("select", a).off("settle", m);
+    W(() => {
+      if (o)
+        return f(o), s(o), o.on("reInit", f).on("reInit", s).on("select", s).on("settle", p), () => {
+          o.off("reInit", f).off("reInit", s).off("select", s).off("settle", p);
         };
-    }, [e, p, a, m]);
-    const I = (() => {
-      if (i.length <= l) return i;
-      const t = Math.floor(l / 2);
-      let n = Math.max(0, g - t);
-      const r = Math.min(i.length, n + l);
-      return r - n < l && (n = Math.max(0, r - l)), i.slice(n, r);
-    })();
-    return /* @__PURE__ */ c(
+    }, [o, f, s, p]);
+    const r = q(() => C.sort((e, t) => e - t), [C]);
+    return /* @__PURE__ */ u(
       "div",
       {
-        ref: N,
+        ref: V,
         role: "group",
         "aria-roledescription": "pagination",
         "aria-label": "pagination",
-        className: d(`${s}-pagination`, $, `${s}-pagination-${h}`),
-        ...u,
-        ...C,
-        children: /* @__PURE__ */ c("div", { className: `${s}-pagination-container`, children: /* @__PURE__ */ c("div", { className: `${s}-pagination-container-inner`, children: I.map((t, n) => {
-          const r = i.indexOf(I[n]), y = g === r;
-          return /* @__PURE__ */ c(
-            "button",
-            {
-              role: "button",
-              onClick: () => x(r),
-              className: d(`${s}-pagination-dot-container`),
-              children: /* @__PURE__ */ c(
-                "span",
+        className: B(`${l}-pagination`, w, `${l}-pagination-${N}`),
+        ...h,
+        ...b,
+        children: /* @__PURE__ */ u("div", { className: `${l}-pagination-container`, children: /* @__PURE__ */ u(
+          "div",
+          {
+            style: { "--max-width": `${g * 8 + (g - 1) * 12}px` },
+            className: `${l}-pagination-container-inner`,
+            ref: c,
+            children: i.map((e, t) => {
+              const m = y === t, d = r.indexOf(t), P = (
+                // The dot is out of view
+                d === -1 || // The dot must be either among the first two or last two visible dots
+                (d <= 1 || d >= r.length - 2) && // Don't shrink if we're showing the first two dots (index 0,1) and both are visible
+                !(t <= 1 && r.includes(0) && r.includes(1)) && // Don't shrink if we're showing the last two dots and both are visible
+                !(t >= i.length - 2 && r.includes(i.length - 1) && r.includes(i.length - 2))
+              );
+              return /* @__PURE__ */ u(
+                F,
                 {
-                  className: d(`${s}-pagination-dot`, {
-                    [`${s}-pagination-dot-selected`]: y
-                  })
-                }
-              )
-            },
-            `${M}-dot-${n}`
-          );
-        }) }) })
+                  onClick: () => O(t),
+                  isSelected: m,
+                  baseClassName: l,
+                  scrollableContainerRef: c,
+                  onInViewChange: (_) => {
+                    D(_ ? (I) => [...I, t] : (I) => I.filter((j) => j !== t));
+                  },
+                  variant: P ? "sm" : "md"
+                },
+                `${k}-dot-${t}`
+              );
+            })
+          }
+        ) })
       }
     );
   }
 );
-w.displayName = "CarouselDots";
+G.displayName = "CarouselDots";
 export {
-  w as default
+  G as default
 };

package/dist/components/Countdown/Countdown.d.ts

@@ -22,6 +22,10 @@ export interface CountdownProps extends ComponentProps<'div'> {
      * Locale to use to format date strings
      */
     locale?: SupportedLanguages;
+    /**
+     * Displays a border below the Countdown if true
+     */
+    showBottomBorder?: boolean;
     /**
      * Variant of the countdown
      */

package/dist/components/Countdown/Countdown.js

@@ -1,62 +1,64 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { forwardRef as N, useState as L, useEffect as g } from "react";
+import { forwardRef as L, useState as b, useEffect as g } from "react";
 import { getCommonProps as v } from "../../utils/index.js";
 import x from "../../node_modules/classnames/index.js";
-import { SupportedLanguages as j } from "../../types/commonTypes.js";
+import { SupportedLanguages as $ } from "../../types/commonTypes.js";
 import { CountdownVariants as i } from "./types.js";
-import { Duration as s } from "./Duration.js";
-import { zhCN as z } from "../../node_modules/date-fns/locale/zh-CN.js";
-import { enUS as P } from "../../node_modules/date-fns/locale/en-US.js";
-import { differenceInDays as S } from "../../node_modules/date-fns/differenceInDays.js";
-import { differenceInHours as _ } from "../../node_modules/date-fns/differenceInHours.js";
-import { differenceInMinutes as $ } from "../../node_modules/date-fns/differenceInMinutes.js";
-import { differenceInSeconds as b } from "../../node_modules/date-fns/differenceInSeconds.js";
-const E = N(
+import { Duration as a } from "./Duration.js";
+import { zhCN as j } from "../../node_modules/date-fns/locale/zh-CN.js";
+import { enUS as z } from "../../node_modules/date-fns/locale/en-US.js";
+import { differenceInDays as P } from "../../node_modules/date-fns/differenceInDays.js";
+import { differenceInHours as S } from "../../node_modules/date-fns/differenceInHours.js";
+import { differenceInMinutes as _ } from "../../node_modules/date-fns/differenceInMinutes.js";
+import { differenceInSeconds as E } from "../../node_modules/date-fns/differenceInSeconds.js";
+const F = L(
   ({
     endDateTime: n,
-    formatDurationStr: a,
+    formatDurationStr: m,
     label: l = "Lots Close in",
     intervalDescription: f,
     className: p,
     locale: h = "en",
-    variant: c = i.default,
-    ...u
+    showBottomBorder: w = !0,
+    variant: u = i.default,
+    ...c
   }, C) => {
-    const { className: m, ...w } = v(u, "Countdown"), [r, y] = L(/* @__PURE__ */ new Date()), t = h === j.zh ? z : P, o = {
-      days: S(n, r),
-      hours: _(n, r) % 24,
-      minutes: $(n, r) % 60,
-      seconds: b(n, r) % 60 % 60
+    const { className: r, ...y } = v(c, "Countdown"), [t, I] = b(/* @__PURE__ */ new Date()), s = h === $.zh ? j : z, o = {
+      days: P(n, t),
+      hours: S(n, t) % 24,
+      minutes: _(n, t) % 60,
+      seconds: E(n, t) % 60 % 60
     };
     return g(() => {
-      const I = setInterval(() => {
-        y(/* @__PURE__ */ new Date());
+      const N = setInterval(() => {
+        I(/* @__PURE__ */ new Date());
       }, 1e3);
-      return () => clearInterval(I);
+      return () => clearInterval(N);
     }, [n]), /* @__PURE__ */ d(
       "div",
       {
-        ...w,
-        className: x(m, p, {
-          [`${m}--compact`]: c === i.compact
+        ...y,
+        className: x(r, p, {
+          [`${r}--compact`]: u === i.compact,
+          [`${r}--show-bottom-border`]: w
         }),
-        ...u,
+        ...c,
         ref: C,
         children: [
-          /* @__PURE__ */ d("div", { className: `${m}__countdown-container`, role: "timer", "aria-label": l, children: [
+          /* @__PURE__ */ d("div", { className: `${r}__countdown-container`, role: "timer", "aria-label": l, children: [
             /* @__PURE__ */ e("span", { children: l }),
-            o.days > 0 ? /* @__PURE__ */ e(s, { duration: o, unit: "days", locale: t, formatDurationStr: a }) : null,
-            o.days > 0 || o.hours > 0 ? /* @__PURE__ */ e(s, { duration: o, unit: "hours", locale: t }) : null,
-            o.days === 0 ? /* @__PURE__ */ e(s, { duration: o, unit: "minutes", locale: t, formatDurationStr: a }) : null,
-            o.days === 0 && o.hours === 0 ? /* @__PURE__ */ e(s, { duration: o, unit: "seconds", locale: t, formatDurationStr: a }) : null
+            o.days > 0 ? /* @__PURE__ */ e(a, { duration: o, unit: "days", locale: s, formatDurationStr: m }) : null,
+            o.days > 0 || o.hours > 0 ? /* @__PURE__ */ e(a, { duration: o, unit: "hours", locale: s }) : null,
+            o.days === 0 ? /* @__PURE__ */ e(a, { duration: o, unit: "minutes", locale: s, formatDurationStr: m }) : null,
+            o.days === 0 && o.hours === 0 ? /* @__PURE__ */ e(a, { duration: o, unit: "seconds", locale: s, formatDurationStr: m }) : null
           ] }),
-          c === i.default ? /* @__PURE__ */ e("span", { children: f }) : null
+          u === i.default ? /* @__PURE__ */ e("span", { children: f }) : null
         ]
       }
     );
   }
 );
-E.displayName = "Countdown";
+F.displayName = "Countdown";
 export {
-  E as default
+  F as default
 };

package/dist/components/PinchZoom/PinchZoom.d.ts

@@ -4,6 +4,14 @@ export interface PinchZoomProps extends React.HTMLAttributes<HTMLDivElement> {
      * Function to call when the zoom changes.
      */
     onZoomChange?: (isZoomed: boolean) => void;
+    /**
+     * Function to call when the user is at the left edge.
+     */
+    onAtLeftEdge?: (isAtLeftEdge: boolean) => void;
+    /**
+     * Function to call when the user is at the right edge.
+     */
+    onAtRightEdge?: (isAtRightEdge: boolean) => void;
     /**
      * Children to render.
      */
@@ -12,6 +20,10 @@ export interface PinchZoomProps extends React.HTMLAttributes<HTMLDivElement> {
      * max zoom level
      */
     maxZoom?: number;
+    /**
+     * Force reset the zoom state.
+     */
+    isZoomReset?: boolean;
 }
 /**
  * ## Overview

package/dist/components/PinchZoom/PinchZoom.js

@@ -1,48 +1,66 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useState as b, useCallback as n, isValidElement as N, cloneElement as S } from "react";
-import { getCommonProps as w } from "../../utils/index.js";
-import { TransformWrapper as x, TransformComponent as T } from "../../node_modules/react-zoom-pan-pinch/dist/index.esm.js";
-import c from "../../node_modules/classnames/index.js";
-const $ = ({ onZoomChange: s, children: e, maxZoom: i = 10, className: f, ...r }) => {
-  var l;
-  const { className: t, ...d } = w(r, "PinchZoom"), [a, m] = b(!1), u = n(
-    (P) => {
-      const { state: o } = P;
-      o.scale > 0.99 && o.scale < 1.01 ? (m(!1), s == null || s(!1)) : (m(!0), s == null || s(!0));
+import { jsx as S } from "react/jsx-runtime";
+import { useState as j, useRef as y, useEffect as I, useCallback as V, isValidElement as W, cloneElement as q } from "react";
+import { getCommonProps as v } from "../../utils/index.js";
+import { TransformWrapper as B, TransformComponent as D } from "../../node_modules/react-zoom-pan-pinch/dist/index.esm.js";
+import T from "../../node_modules/classnames/index.js";
+const F = ({
+  onZoomChange: s,
+  onAtLeftEdge: r,
+  onAtRightEdge: e,
+  children: a,
+  maxZoom: X = 10,
+  className: w,
+  isZoomReset: p = !1,
+  ...f
+}) => {
+  var b;
+  const { className: l, ...$ } = v(f, "PinchZoom"), [i, m] = j(!1), u = y(null);
+  I(() => {
+    var t;
+    p && ((t = u.current) == null || t.resetTransform(), m(!1), s == null || s(!1));
+  }, [p, s]);
+  const k = V(
+    (t) => {
+      var o, N, d, x;
+      const { state: c, instance: P } = t;
+      c.scale > 0.99 && c.scale < 1.01 ? (m(!1), s == null || s(!1)) : (m(!0), s == null || s(!0));
+      const z = Math.abs(c.positionX - ((N = (o = P.bounds) == null ? void 0 : o.maxPositionX) != null ? N : 0)) < 0.01, M = Math.abs(c.positionX - ((x = (d = P.bounds) == null ? void 0 : d.minPositionX) != null ? x : 0)) < 0.01;
+      r == null || r(z), e == null || e(M);
     },
-    [s]
+    [s, r, e]
   );
-  return /* @__PURE__ */ p(
-    x,
+  return /* @__PURE__ */ S(
+    B,
     {
-      maxScale: i,
-      onTransformed: u,
+      maxScale: X,
+      onTransformed: k,
       minScale: 1,
       disablePadding: !0,
       doubleClick: {
-        mode: a ? "reset" : "toggle"
+        mode: i ? "reset" : "toggle"
       },
       wheel: {
         smoothStep: 0.01
       },
       panning: {
-        disabled: !a
+        disabled: !i
       },
-      children: /* @__PURE__ */ p(
-        T,
+      ref: u,
+      children: /* @__PURE__ */ S(
+        D,
         {
-          wrapperProps: { ...d, ...r },
-          wrapperClass: c(t, f, {
-            [`${t}-zoomed`]: a
+          wrapperProps: { ...$, ...f },
+          wrapperClass: T(l, w, {
+            [`${l}-zoomed`]: i
           }),
-          contentClass: `${t}-content`,
-          children: N(e) ? S(e, { className: c(`${t}-child`, (l = e == null ? void 0 : e.props) == null ? void 0 : l.className) }) : e
+          contentClass: `${l}-content`,
+          children: W(a) ? q(a, { className: T(`${l}-child`, (b = a == null ? void 0 : a.props) == null ? void 0 : b.className) }) : a
         }
       )
     }
   );
 };
-$.displayName = "PinchZoom";
+F.displayName = "PinchZoom";
 export {
-  $ as default
+  F as default
 };

package/dist/node_modules/react-intersection-observer/dist/index.js

@@ -0,0 +1,122 @@
+import * as v from "react";
+var S = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new WeakMap(), E = 0, M = void 0;
+function O(e) {
+  return e ? (h.has(e) || (E += 1, h.set(e, E.toString())), h.get(e)) : "0";
+}
+function T(e) {
+  return Object.keys(e).sort().filter(
+    (t) => e[t] !== void 0
+  ).map((t) => `${t}_${t === "root" ? O(e.root) : e[t]}`).toString();
+}
+function _(e) {
+  const t = T(e);
+  let n = S.get(t);
+  if (!n) {
+    const u = /* @__PURE__ */ new Map();
+    let c;
+    const i = new IntersectionObserver((s) => {
+      s.forEach((r) => {
+        var o;
+        const g = r.isIntersecting && c.some((d) => r.intersectionRatio >= d);
+        e.trackVisibility && typeof r.isVisible == "undefined" && (r.isVisible = g), (o = u.get(r.target)) == null || o.forEach((d) => {
+          d(g, r);
+        });
+      });
+    }, e);
+    c = i.thresholds || (Array.isArray(e.threshold) ? e.threshold : [e.threshold || 0]), n = {
+      id: t,
+      observer: i,
+      elements: u
+    }, S.set(t, n);
+  }
+  return n;
+}
+function x(e, t, n = {}, u = M) {
+  if (typeof window.IntersectionObserver == "undefined" && u !== void 0) {
+    const o = e.getBoundingClientRect();
+    return t(u, {
+      isIntersecting: u,
+      target: e,
+      intersectionRatio: typeof n.threshold == "number" ? n.threshold : 0,
+      time: 0,
+      boundingClientRect: o,
+      intersectionRect: o,
+      rootBounds: o
+    }), () => {
+    };
+  }
+  const { id: c, observer: i, elements: s } = _(n), r = s.get(e) || [];
+  return s.has(e) || s.set(e, r), r.push(t), i.observe(e), function() {
+    r.splice(r.indexOf(t), 1), r.length === 0 && (s.delete(e), i.unobserve(e)), s.size === 0 && (i.disconnect(), S.delete(c));
+  };
+}
+function B({
+  threshold: e,
+  delay: t,
+  trackVisibility: n,
+  rootMargin: u,
+  root: c,
+  triggerOnce: i,
+  skip: s,
+  initialInView: r,
+  fallbackInView: o,
+  onChange: g
+} = {}) {
+  var d;
+  const [b, V] = v.useState(null), l = v.useRef(), [R, y] = v.useState({
+    inView: !!r,
+    entry: void 0
+  });
+  l.current = g, v.useEffect(
+    () => {
+      if (s || !b) return;
+      let a;
+      return a = x(
+        b,
+        (A, I) => {
+          y({
+            inView: A,
+            entry: I
+          }), l.current && l.current(A, I), I.isIntersecting && i && a && (a(), a = void 0);
+        },
+        {
+          root: c,
+          rootMargin: u,
+          threshold: e,
+          // @ts-ignore
+          trackVisibility: n,
+          // @ts-ignore
+          delay: t
+        },
+        o
+      ), () => {
+        a && a();
+      };
+    },
+    // We break the rule here, because we aren't including the actual `threshold` variable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // If the threshold is an array, convert it to a string, so it won't change between renders.
+      Array.isArray(e) ? e.toString() : e,
+      b,
+      c,
+      u,
+      i,
+      s,
+      n,
+      o,
+      t
+    ]
+  );
+  const w = (d = R.entry) == null ? void 0 : d.target, p = v.useRef();
+  !b && w && !i && !s && p.current !== w && (p.current = w, y({
+    inView: !!r,
+    entry: void 0
+  }));
+  const f = [V, R.inView, R.entry];
+  return f.ref = f[0], f.inView = f[1], f.entry = f[2], f;
+}
+export {
+  x as observe,
+  B as useInView
+};

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.d.ts

@@ -1,6 +1,10 @@
 import { ComponentProps } from 'react';
 import { AuctionStatus } from '../../types/commonTypes';
 export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
+    /**
+     * The time that lots start to close (for live auctions)
+     */
+    auctionEndTime?: Date;
     /**
      * What is the title of the auction?
      */

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -1,55 +1,58 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import { forwardRef as S } from "react";
-import { getCommonProps as u } from "../../utils/index.js";
+import { getCommonProps as k } from "../../utils/index.js";
 import C from "../../node_modules/classnames/index.js";
-import j from "../../components/SeldonImage/SeldonImage.js";
-import { AuctionStatus as _ } from "../../types/commonTypes.js";
-import { TextVariants as s } from "../../components/Text/types.js";
-import t from "../../components/Text/Text.js";
-import H from "../../components/PageContentWrapper/PageContentWrapper.js";
-import P from "../../components/Button/Button.js";
-const R = S(
+import f from "../../components/Countdown/Countdown.js";
+import b from "../../components/SeldonImage/SeldonImage.js";
+import { AuctionStatus as N } from "../../types/commonTypes.js";
+import { TextVariants as t } from "../../components/Text/types.js";
+import o from "../../components/Text/Text.js";
+import j from "../../components/PageContentWrapper/PageContentWrapper.js";
+import H from "../../components/Button/Button.js";
+const P = S(
   ({
-    auctionTitle: o,
-    imageSrcUrl: f,
-    location: N,
-    auctionState: n,
+    auctionEndTime: r,
+    auctionTitle: i,
+    imageSrcUrl: h,
+    location: v,
+    auctionState: l,
     occurrenceInformation: g,
-    ctaLabel: v = "Register to Bid",
-    onClick: h,
-    children: m,
-    className: $,
-    ...i
-  }, c) => {
-    const { className: a, ...l } = u(i, "SaleHeaderBanner"), x = n === _.live, d = n === _.past;
-    return /* @__PURE__ */ r("div", { ...l, className: C(a, $), ...i, ref: c, children: [
-      /* @__PURE__ */ e(
-        j,
+    ctaLabel: $ = "Register to Bid",
+    onClick: u,
+    children: B,
+    className: w,
+    ...n
+  }, m) => {
+    const { className: e, ...c } = k(n, "SaleHeaderBanner"), d = l === N.live, _ = l === N.past;
+    return /* @__PURE__ */ s("div", { ...c, className: C(e, w), ...n, ref: m, children: [
+      d && r ? /* @__PURE__ */ a("div", { className: `${e}__stack__mobile-countdown`, children: /* @__PURE__ */ a(f, { endDateTime: r, showBottomBorder: !1 }) }) : null,
+      /* @__PURE__ */ a(
+        b,
         {
           aspectRatio: "16/9",
-          src: f,
-          alt: String(o),
+          src: h,
+          alt: String(i),
           objectFit: "cover",
-          className: `${a}__image`
+          className: `${e}__image`
         }
       ),
-      /* @__PURE__ */ e(H, { className: `${a}__stack-wrapper`, ...l, ...i, ref: c, children: /* @__PURE__ */ r("div", { className: `${a}__stack`, children: [
-        x && m,
-        /* @__PURE__ */ e(t, { variant: s.title1, children: o }),
-        /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__location`, children: N }),
-        /* @__PURE__ */ r("div", { className: `${a}__occurrence-details`, children: [
-          g.map(({ date: p, occurrenceLabel: B }) => /* @__PURE__ */ r("div", { className: `${a}__occurrence-details-text`, children: [
-            /* @__PURE__ */ e(t, { variant: s.string2, children: B }),
-            /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__date`, children: p })
+      /* @__PURE__ */ a(j, { className: `${e}__stack-wrapper`, ...c, ...n, ref: m, children: /* @__PURE__ */ s("div", { className: `${e}__stack`, children: [
+        d && r ? /* @__PURE__ */ a("div", { className: `${e}__stack__desktop-countdown`, children: /* @__PURE__ */ a(f, { endDateTime: r }) }) : null,
+        /* @__PURE__ */ a(o, { variant: t.title1, children: i }),
+        /* @__PURE__ */ a(o, { variant: t.string2, className: `${e}__location`, children: v }),
+        /* @__PURE__ */ s("div", { className: `${e}__occurrence-details`, children: [
+          g.map(({ date: p, occurrenceLabel: x }) => /* @__PURE__ */ s("div", { className: `${e}__occurrence-details-text`, children: [
+            /* @__PURE__ */ a(o, { variant: t.string2, children: x }),
+            /* @__PURE__ */ a(o, { variant: t.string2, className: `${e}__date`, children: p })
           ] }, String(p))),
-          d && m
+          _ ? B : null
         ] }),
-        !d && /* @__PURE__ */ e(P, { className: `${a}__cta`, onClick: h, children: v })
+        _ ? null : /* @__PURE__ */ a(H, { className: `${e}__cta`, onClick: u, children: $ })
       ] }) })
     ] });
   }
 );
-R.displayName = "SaleHeaderBanner";
+P.displayName = "SaleHeaderBanner";
 export {
-  R as default
+  P as default
 };

package/dist/scss/components/Carousel/_carousel.scss

@@ -60,26 +60,47 @@
     }
 
     &-container-inner {
+      align-items: center;
       display: flex;
       gap: 12px;
+      max-width: var(--max-width);
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: none; /* Internet Explorer 10+ */
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none; /* Firefox */
+
+      &::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
+      }
     }
 
-    &-dot-container {
+    &-dot__container {
       align-items: center;
       display: flex;
       height: 8px;
       justify-content: center;
+      min-width: 8px;
       padding: 1px;
+      scroll-snap-align: center;
       width: 8px;
     }
 
     &-dot {
       border-radius: 50%;
-      height: 100%;
       outline: 1px solid #adadad;
-      width: 100%;
 
-      &-selected {
+      &--md {
+        height: 100%;
+        width: 100%;
+      }
+
+      &--sm {
+        height: 50%;
+        width: 50%;
+      }
+
+      &--selected {
         background-color: #525050;
         outline-color: #525050;
       }

package/dist/scss/components/Countdown/_countdown.scss

@@ -4,15 +4,20 @@
   @include text($body2);
 
   align-items: center;
-  border-bottom: 1px solid $light-gray;
+  border-bottom: none;
   display: flex;
   flex-direction: column;
   gap: $spacing-micro;
   justify-content: center;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0;
   padding: 0 $spacing-sm $spacing-sm;
   width: 100%;
 
+  &--show-bottom-border {
+    border-bottom: 1px solid $light-gray;
+    margin-bottom: 1.5rem;
+  }
+
   &__countdown-container {
     @include text($heading5);
 

package/dist/scss/patterns/SaleHeaderBanner/_saleHeaderBanner.scss

@@ -21,6 +21,22 @@
     height: 100%;
     justify-content: center;
     padding: $spacing-md 0;
+
+    &__mobile-countdown {
+      display: block;
+
+      @include media($size-md, $type: 'min') {
+        display: none;
+      }
+    }
+
+    &__desktop-countdown {
+      display: none;
+
+      @include media($size-md, $type: 'min') {
+        display: block;
+      }
+    }
   }
 
   &__location {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.98.1",
+  "version": "1.100.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -55,6 +55,7 @@
     "embla-carousel-wheel-gestures": "^8.0.1",
     "flatpickr": "^4.6.13",
     "html-react-parser": "^5.1.12",
+    "react-intersection-observer": "^9.13.1",
     "react-modal": "^3.16.1",
     "react-transition-group": "^4.4.5",
     "react-zoom-pan-pinch": "^3.6.1",