@phillips/seldon 1.255.0 → 1.257.0

package/dist/components/Countdown/Countdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),f=require("react"),L=require("../../utils/index.cjs"),z=require("../../_virtual/index.cjs"),H=require("../../types/commonTypes.cjs"),i=require("./types.cjs"),m=require("./Duration.cjs"),x=require("../Text/types.cjs"),P=require("../Text/Text.cjs"),R=require("../../node_modules/date-fns/locale/zh-CN.cjs"),U=require("../../node_modules/date-fns/locale/en-US.cjs"),I=require("../../node_modules/date-fns/differenceInSeconds.cjs"),y=require("../../node_modules/date-fns/differenceInMinutes.cjs"),p=require("../../node_modules/date-fns/differenceInHours.cjs"),C=require("../../node_modules/date-fns/differenceInDays.cjs"),E=require("../../node_modules/date-fns/differenceInMilliseconds.cjs"),j=f.forwardRef(({endDateTime:e,formatDurationStr:a,label:h="Lots Close in",intervalDescription:g,className:M,locale:N="en",showBottomBorder:V=!0,variant:l=i.CountdownVariants.default,getCurrentDateTime:u=()=>new Date,...q},$)=>{const{className:r,...b}=L.getCommonProps(q,"Countdown"),[s,S]=f.useState(u()||new Date),d=N===H.SupportedLanguages.zh?R.zhCN:U.enUS,n={days:C.differenceInDays(e,s)>0?C.differenceInDays(e,s):0,hours:p.differenceInHours(e,s)>0?p.differenceInHours(e,s)%24:0,minutes:y.differenceInMinutes(e,s)>0?y.differenceInMinutes(e,s)%60:0,seconds:(I.differenceInSeconds(e,s)>0?I.differenceInSeconds(e,s)%60:0)%60};f.useEffect(()=>{const t=setInterval(()=>{S(u()||new Date)},1e3);return()=>clearInterval(t)},[e,u]);const _=f.useMemo(()=>{const t=u();return!!t&&new Date(e).getTime()>t.getTime()},[e,u]),v=E.differenceInMilliseconds(e,s)<=180*1e3,c=l===i.CountdownVariants.sm?x.TextVariants.labelSmall:x.TextVariants.labelMedium,w=[n.days>0?o.jsx(m.Duration,{duration:n,unit:"days",locale:d,formatDurationStr:a,textVariant:c},"days"):null,n.days>0||n.hours>0?o.jsx(m.Duration,{duration:n,unit:"hours",locale:d,formatDurationStr:a,textVariant:c},"hours"):null,n.days===0?o.jsx(m.Duration,{duration:n,unit:"minutes",locale:d,formatDurationStr:a,textVariant:c},"minutes"):null,n.days===0&&n.hours===0?o.jsx(m.Duration,{duration:n,unit:"seconds",locale:d,formatDurationStr:a,textVariant:c},"seconds"):null].filter(t=>t!=null);return _?o.jsxs("div",{"data-chromatic":"ignore",...b,className:z.default(r,M,{[`${r}--compact`]:l===i.CountdownVariants.compact,[`${r}--sm`]:l===i.CountdownVariants.sm,[`${r}--show-bottom-border`]:V,[`${r}--closing-lot`]:v}),...q,ref:$,children:[o.jsxs("div",{className:`${r}__countdown-container`,role:"timer","aria-label":h,children:[o.jsx(P.default,{variant:c,children:h}),w.length>0?o.jsx("div",{className:`${r}__duration-group`,children:w}):null]}),l===i.CountdownVariants.default?o.jsx("span",{children:g}):null]}):null});j.displayName="Countdown";exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),f=require("react"),z=require("../../utils/index.cjs"),H=require("../../_virtual/index.cjs"),P=require("../../types/commonTypes.cjs"),i=require("./types.cjs"),m=require("./Duration.cjs"),x=require("../Text/types.cjs"),R=require("../Text/Text.cjs"),U=require("../../node_modules/date-fns/locale/zh-CN.cjs"),E=require("../../node_modules/date-fns/locale/en-US.cjs"),I=require("../../node_modules/date-fns/differenceInSeconds.cjs"),y=require("../../node_modules/date-fns/differenceInMinutes.cjs"),p=require("../../node_modules/date-fns/differenceInHours.cjs"),C=require("../../node_modules/date-fns/differenceInDays.cjs"),F=require("../../node_modules/date-fns/differenceInMilliseconds.cjs"),j=f.forwardRef(({endDateTime:e,formatDurationStr:a,label:h="Lots Close in",intervalDescription:g,className:M,locale:$="en",showBottomBorder:N=!0,variant:l=i.CountdownVariants.default,getCurrentDateTime:c=()=>new Date,centerAlign:V=!1,...q},b)=>{const{className:r,...S}=z.getCommonProps(q,"Countdown"),[s,_]=f.useState(c()||new Date),d=$===P.SupportedLanguages.zh?U.zhCN:E.enUS,n={days:C.differenceInDays(e,s)>0?C.differenceInDays(e,s):0,hours:p.differenceInHours(e,s)>0?p.differenceInHours(e,s)%24:0,minutes:y.differenceInMinutes(e,s)>0?y.differenceInMinutes(e,s)%60:0,seconds:(I.differenceInSeconds(e,s)>0?I.differenceInSeconds(e,s)%60:0)%60};f.useEffect(()=>{const t=setInterval(()=>{_(c()||new Date)},1e3);return()=>clearInterval(t)},[e,c]);const v=f.useMemo(()=>{const t=c();return!!t&&new Date(e).getTime()>t.getTime()},[e,c]),L=F.differenceInMilliseconds(e,s)<=180*1e3,u=l===i.CountdownVariants.sm?x.TextVariants.labelSmall:x.TextVariants.labelMedium,w=[n.days>0?o.jsx(m.Duration,{duration:n,unit:"days",locale:d,formatDurationStr:a,textVariant:u},"days"):null,n.days>0||n.hours>0?o.jsx(m.Duration,{duration:n,unit:"hours",locale:d,formatDurationStr:a,textVariant:u},"hours"):null,n.days===0?o.jsx(m.Duration,{duration:n,unit:"minutes",locale:d,formatDurationStr:a,textVariant:u},"minutes"):null,n.days===0&&n.hours===0?o.jsx(m.Duration,{duration:n,unit:"seconds",locale:d,formatDurationStr:a,textVariant:u},"seconds"):null].filter(t=>t!=null);return v?o.jsxs("div",{"data-chromatic":"ignore",...S,className:H.default(r,M,{[`${r}--compact`]:l===i.CountdownVariants.compact,[`${r}--sm`]:l===i.CountdownVariants.sm,[`${r}--show-bottom-border`]:N,[`${r}--closing-lot`]:L,[`${r}--center-align`]:V}),...q,ref:b,children:[o.jsxs("div",{className:`${r}__countdown-container`,role:"timer","aria-label":h,children:[o.jsx(R.default,{variant:u,children:h}),w.length>0?o.jsx("div",{className:`${r}__duration-group`,children:w}):null]}),l===i.CountdownVariants.default?o.jsx("span",{children:g}):null]}):null});j.displayName="Countdown";exports.default=j;

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

@@ -34,6 +34,10 @@ export interface CountdownProps extends ComponentProps<'div'> {
      * Function to get the current date time
      */
     getCurrentDateTime?: () => Date | null;
+    /**
+     * Centers label and durationwithin the countdown row
+     */
+    centerAlign?: boolean;
 }
 /**
  * ## Overview

package/dist/components/Countdown/Countdown.js

@@ -1,55 +1,56 @@
 import { jsx as t, jsxs as w } from "react/jsx-runtime";
-import { forwardRef as z, useState as P, useEffect as S, useMemo as E } from "react";
-import { getCommonProps as F } from "../../utils/index.js";
-import G from "../../_virtual/index.js";
-import { SupportedLanguages as H } from "../../types/commonTypes.js";
-import { CountdownVariants as i } from "./types.js";
+import { forwardRef as P, useState as S, useEffect as E, useMemo as F } from "react";
+import { getCommonProps as G } from "../../utils/index.js";
+import H from "../../_virtual/index.js";
+import { SupportedLanguages as R } from "../../types/commonTypes.js";
+import { CountdownVariants as a } from "./types.js";
 import { Duration as d } from "./Duration.js";
 import { TextVariants as y } from "../Text/types.js";
-import R from "../Text/Text.js";
-import { zhCN as U } from "../../node_modules/date-fns/locale/zh-CN.js";
-import { enUS as k } from "../../node_modules/date-fns/locale/en-US.js";
+import U from "../Text/Text.js";
+import { zhCN as k } from "../../node_modules/date-fns/locale/zh-CN.js";
+import { enUS as q } from "../../node_modules/date-fns/locale/en-US.js";
 import { differenceInSeconds as g } from "../../node_modules/date-fns/differenceInSeconds.js";
 import { differenceInMinutes as C } from "../../node_modules/date-fns/differenceInMinutes.js";
 import { differenceInHours as I } from "../../node_modules/date-fns/differenceInHours.js";
 import { differenceInDays as N } from "../../node_modules/date-fns/differenceInDays.js";
-import { differenceInMilliseconds as q } from "../../node_modules/date-fns/differenceInMilliseconds.js";
-const A = z(
+import { differenceInMilliseconds as A } from "../../node_modules/date-fns/differenceInMilliseconds.js";
+const B = P(
   ({
     endDateTime: o,
-    formatDurationStr: a,
+    formatDurationStr: i,
     label: f = "Lots Close in",
-    intervalDescription: x,
-    className: $,
+    intervalDescription: $,
+    className: x,
     locale: b = "en",
     showBottomBorder: L = !0,
-    variant: m = i.default,
+    variant: m = a.default,
     getCurrentDateTime: l = () => /* @__PURE__ */ new Date(),
+    centerAlign: M = !1,
     ...p
-  }, M) => {
-    const { className: r, ..._ } = F(p, "Countdown"), [n, v] = P(l() || /* @__PURE__ */ new Date()), u = b === H.zh ? U : k, s = {
+  }, _) => {
+    const { className: r, ...v } = G(p, "Countdown"), [n, V] = S(l() || /* @__PURE__ */ new Date()), u = b === R.zh ? k : q, s = {
       days: N(o, n) > 0 ? N(o, n) : 0,
       hours: I(o, n) > 0 ? I(o, n) % 24 : 0,
       minutes: C(o, n) > 0 ? C(o, n) % 60 : 0,
       seconds: (g(o, n) > 0 ? g(o, n) % 60 : 0) % 60
     };
-    S(() => {
+    E(() => {
       const e = setInterval(() => {
-        v(l() || /* @__PURE__ */ new Date());
+        V(l() || /* @__PURE__ */ new Date());
       }, 1e3);
       return () => clearInterval(e);
     }, [o, l]);
-    const V = E(() => {
+    const j = F(() => {
       const e = l();
       return !!e && new Date(o).getTime() > e.getTime();
-    }, [o, l]), j = q(o, n) <= 180 * 1e3, c = m === i.sm ? y.labelSmall : y.labelMedium, h = [
+    }, [o, l]), z = A(o, n) <= 180 * 1e3, c = m === a.sm ? y.labelSmall : y.labelMedium, h = [
       s.days > 0 ? /* @__PURE__ */ t(
         d,
         {
           duration: s,
           unit: "days",
           locale: u,
-          formatDurationStr: a,
+          formatDurationStr: i,
           textVariant: c
         },
         "days"
@@ -60,7 +61,7 @@ const A = z(
           duration: s,
           unit: "hours",
           locale: u,
-          formatDurationStr: a,
+          formatDurationStr: i,
           textVariant: c
         },
         "hours"
@@ -71,7 +72,7 @@ const A = z(
           duration: s,
           unit: "minutes",
           locale: u,
-          formatDurationStr: a,
+          formatDurationStr: i,
           textVariant: c
         },
         "minutes"
@@ -82,37 +83,38 @@ const A = z(
           duration: s,
           unit: "seconds",
           locale: u,
-          formatDurationStr: a,
+          formatDurationStr: i,
           textVariant: c
         },
         "seconds"
       ) : null
     ].filter((e) => e != null);
-    return V ? /* @__PURE__ */ w(
+    return j ? /* @__PURE__ */ w(
       "div",
       {
         "data-chromatic": "ignore",
-        ..._,
-        className: G(r, $, {
-          [`${r}--compact`]: m === i.compact,
-          [`${r}--sm`]: m === i.sm,
+        ...v,
+        className: H(r, x, {
+          [`${r}--compact`]: m === a.compact,
+          [`${r}--sm`]: m === a.sm,
           [`${r}--show-bottom-border`]: L,
-          [`${r}--closing-lot`]: j
+          [`${r}--closing-lot`]: z,
+          [`${r}--center-align`]: M
         }),
         ...p,
-        ref: M,
+        ref: _,
         children: [
           /* @__PURE__ */ w("div", { className: `${r}__countdown-container`, role: "timer", "aria-label": f, children: [
-            /* @__PURE__ */ t(R, { variant: c, children: f }),
+            /* @__PURE__ */ t(U, { variant: c, children: f }),
             h.length > 0 ? /* @__PURE__ */ t("div", { className: `${r}__duration-group`, children: h }) : null
           ] }),
-          m === i.default ? /* @__PURE__ */ t("span", { children: x }) : null
+          m === a.default ? /* @__PURE__ */ t("span", { children: $ }) : null
         ]
       }
     ) : null;
   }
 );
-A.displayName = "Countdown";
+B.displayName = "Countdown";
 export {
-  A as default
+  B as default
 };

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

@@ -19,6 +19,9 @@ export declare const Playground: {
         endDateTime: {
             control: string;
         };
+        centerAlign: {
+            control: string;
+        };
     };
 };
 export declare const Days: (props: CountdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),V=require("react"),k=require("../../utils/index.cjs"),C=require("../../_virtual/index.cjs"),x=require("../../components/Countdown/Countdown.cjs"),H=require("../../components/SeldonImage/SeldonImage.cjs"),O=require("../../types/commonTypes.cjs"),s=require("../../components/Text/types.cjs"),r=require("../../components/Text/Text.cjs"),D=require("../../components/PageContentWrapper/PageContentWrapper.cjs"),j=require("../../providers/SeldonProvider/utils.cjs"),h=V.forwardRef(({auctionEndTime:t,auctionTitle:l,badgeText:i,imageSrcUrl:f,imageSrcSet:v,imageSizes:N,imageLoading:S,imageFetchPriority:g,location:$,countdownTimerLabel:q,countdownFormatDuration:b,auctionState:p,occurrenceInformation:M,onClick:F,children:y,className:T,footerElement:w,headerLabel:B,showTimer:c,getCurrentDateTime:P,...n},d)=>{const{className:a,...o}=k.getCommonProps(n,"SaleHeaderBanner"),u=p===O.AuctionStatus.live,m={endDateTime:t,label:q,formatDurationStr:b,getCurrentDateTime:P};return e.jsxs("div",{...o,className:C.default(a,T),...n,ref:d,children:[u&&t&&c?e.jsx(j.SSRMediaQuery.Media,{lessThan:"md",children:e.jsx("div",{className:`${a}__stack__countdown`,children:e.jsx(x.default,{...m,showBottomBorder:!1})})}):null,e.jsx(H.default,{aspectRatio:"16/9",src:f,alt:String(l),objectFit:"cover",className:`${a}__image`,srcSet:v,sizes:N,loading:S,fetchPriority:g}),e.jsx(D.default,{className:`${a}__stack-wrapper`,...o,...n,ref:d,children:e.jsxs("div",{className:`${a}__stack`,children:[u&&t&&c?e.jsx(j.SSRMediaQuery.Media,{greaterThanOrEqual:"md",children:e.jsx("div",{className:`${a}__stack__countdown`,children:e.jsx(x.default,{...m})})}):null,e.jsx(r.default,{variant:s.TextVariants.labelMedium,className:`${a}__header-label`,children:B}),e.jsx(r.default,{className:`${a}__title`,variant:s.TextVariants.headingLarge,children:l}),i&&e.jsx(r.default,{variant:s.TextVariants.badge,className:`${a}__badge`,children:i}),e.jsx(r.default,{variant:s.TextVariants.labelMedium,className:`${a}__location`,children:$}),e.jsxs("div",{className:`${a}__occurrence-details`,children:[M.map(({date:_,occurrenceLabel:R})=>e.jsxs("div",{className:`${a}__occurrence-details-text`,children:[e.jsx(r.default,{variant:s.TextVariants.labelMedium,children:R}),e.jsx(r.default,{variant:s.TextVariants.labelMedium,className:`${a}__date`,children:_})]},String(_))),y]}),w]})})]})});h.displayName="SaleHeaderBanner";exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),V=require("react"),k=require("../../utils/index.cjs"),C=require("../../_virtual/index.cjs"),x=require("../../components/Countdown/Countdown.cjs"),H=require("../../components/SeldonImage/SeldonImage.cjs"),O=require("../../types/commonTypes.cjs"),s=require("../../components/Text/types.cjs"),r=require("../../components/Text/Text.cjs"),A=require("../../components/PageContentWrapper/PageContentWrapper.cjs"),j=require("../../providers/SeldonProvider/utils.cjs"),h=V.forwardRef(({auctionEndTime:t,auctionTitle:l,badgeText:i,imageSrcUrl:f,imageSrcSet:v,imageSizes:N,imageLoading:g,imageFetchPriority:S,location:$,countdownTimerLabel:q,countdownFormatDuration:b,auctionState:p,occurrenceInformation:M,onClick:D,children:y,className:T,footerElement:w,headerLabel:B,showTimer:c,getCurrentDateTime:P,...n},d)=>{const{className:a,...o}=k.getCommonProps(n,"SaleHeaderBanner"),u=p===O.AuctionStatus.live,m={endDateTime:t,label:q,formatDurationStr:b,getCurrentDateTime:P};return e.jsxs("div",{...o,className:C.default(a,T),...n,ref:d,children:[u&&t&&c?e.jsx(j.SSRMediaQuery.Media,{lessThan:"md",children:e.jsx("div",{className:`${a}__stack__countdown`,children:e.jsx(x.default,{...m,showBottomBorder:!1,centerAlign:!0})})}):null,e.jsx(H.default,{aspectRatio:"16/9",src:f,alt:String(l),objectFit:"cover",className:`${a}__image`,srcSet:v,sizes:N,loading:g,fetchPriority:S}),e.jsx(A.default,{className:`${a}__stack-wrapper`,...o,...n,ref:d,children:e.jsxs("div",{className:`${a}__stack`,children:[u&&t&&c?e.jsx(j.SSRMediaQuery.Media,{greaterThanOrEqual:"md",children:e.jsx("div",{className:`${a}__stack__countdown`,children:e.jsx(x.default,{...m})})}):null,e.jsx(r.default,{variant:s.TextVariants.labelMedium,className:`${a}__header-label`,children:B}),e.jsx(r.default,{className:`${a}__title`,variant:s.TextVariants.headingLarge,children:l}),i&&e.jsx(r.default,{variant:s.TextVariants.badge,className:`${a}__badge`,children:i}),e.jsx(r.default,{variant:s.TextVariants.labelMedium,className:`${a}__location`,children:$}),e.jsxs("div",{className:`${a}__occurrence-details`,children:[M.map(({date:_,occurrenceLabel:R})=>e.jsxs("div",{className:`${a}__occurrence-details-text`,children:[e.jsx(r.default,{variant:s.TextVariants.labelMedium,children:R}),e.jsx(r.default,{variant:s.TextVariants.labelMedium,className:`${a}__date`,children:_})]},String(_))),y]}),w]})})]})});h.displayName="SaleHeaderBanner";exports.default=h;

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -1,18 +1,18 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { forwardRef as R } from "react";
-import { getCommonProps as D } from "../../utils/index.js";
-import F from "../../_virtual/index.js";
-import f from "../../components/Countdown/Countdown.js";
-import O from "../../components/SeldonImage/SeldonImage.js";
-import { AuctionStatus as q } from "../../types/commonTypes.js";
+import { getCommonProps as A } from "../../utils/index.js";
+import D from "../../_virtual/index.js";
+import u from "../../components/Countdown/Countdown.js";
+import F from "../../components/SeldonImage/SeldonImage.js";
+import { AuctionStatus as O } from "../../types/commonTypes.js";
 import { TextVariants as r } from "../../components/Text/types.js";
 import l from "../../components/Text/Text.js";
-import z from "../../components/PageContentWrapper/PageContentWrapper.js";
-import { SSRMediaQuery as u } from "../../providers/SeldonProvider/utils.js";
-const A = R(
+import q from "../../components/PageContentWrapper/PageContentWrapper.js";
+import { SSRMediaQuery as f } from "../../providers/SeldonProvider/utils.js";
+const z = R(
   ({
-    auctionEndTime: s,
-    auctionTitle: n,
+    auctionEndTime: t,
+    auctionTitle: s,
     badgeText: o,
     imageSrcUrl: N,
     imageSrcSet: v,
@@ -31,40 +31,40 @@ const A = R(
     headerLabel: j,
     showTimer: c,
     getCurrentDateTime: y,
-    ...t
+    ...n
   }, m) => {
-    const { className: e, ...d } = D(t, "SaleHeaderBanner"), _ = B === q.live, h = {
-      endDateTime: s,
+    const { className: a, ...d } = A(n, "SaleHeaderBanner"), _ = B === O.live, h = {
+      endDateTime: t,
       label: M,
       formatDurationStr: w,
       getCurrentDateTime: y
     };
-    return /* @__PURE__ */ i("div", { ...d, className: F(e, C), ...t, ref: m, children: [
-      _ && s && c ? /* @__PURE__ */ a(u.Media, { lessThan: "md", children: /* @__PURE__ */ a("div", { className: `${e}__stack__countdown`, children: /* @__PURE__ */ a(f, { ...h, showBottomBorder: !1 }) }) }) : null,
-      /* @__PURE__ */ a(
-        O,
+    return /* @__PURE__ */ i("div", { ...d, className: D(a, C), ...n, ref: m, children: [
+      _ && t && c ? /* @__PURE__ */ e(f.Media, { lessThan: "md", children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ...h, showBottomBorder: !1, centerAlign: !0 }) }) }) : null,
+      /* @__PURE__ */ e(
+        F,
         {
           aspectRatio: "16/9",
           src: N,
-          alt: String(n),
+          alt: String(s),
           objectFit: "cover",
-          className: `${e}__image`,
+          className: `${a}__image`,
           srcSet: v,
           sizes: g,
           loading: $,
           fetchPriority: S
         }
       ),
-      /* @__PURE__ */ a(z, { className: `${e}__stack-wrapper`, ...d, ...t, ref: m, children: /* @__PURE__ */ i("div", { className: `${e}__stack`, children: [
-        _ && s && c ? /* @__PURE__ */ a(u.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ a("div", { className: `${e}__stack__countdown`, children: /* @__PURE__ */ a(f, { ...h }) }) }) : null,
-        /* @__PURE__ */ a(l, { variant: r.labelMedium, className: `${e}__header-label`, children: j }),
-        /* @__PURE__ */ a(l, { className: `${e}__title`, variant: r.headingLarge, children: n }),
-        o && /* @__PURE__ */ a(l, { variant: r.badge, className: `${e}__badge`, children: o }),
-        /* @__PURE__ */ a(l, { variant: r.labelMedium, className: `${e}__location`, children: b }),
-        /* @__PURE__ */ i("div", { className: `${e}__occurrence-details`, children: [
-          k.map(({ date: p, occurrenceLabel: H }) => /* @__PURE__ */ i("div", { className: `${e}__occurrence-details-text`, children: [
-            /* @__PURE__ */ a(l, { variant: r.labelMedium, children: H }),
-            /* @__PURE__ */ a(l, { variant: r.labelMedium, className: `${e}__date`, children: p })
+      /* @__PURE__ */ e(q, { className: `${a}__stack-wrapper`, ...d, ...n, ref: m, children: /* @__PURE__ */ i("div", { className: `${a}__stack`, children: [
+        _ && t && c ? /* @__PURE__ */ e(f.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ...h }) }) }) : null,
+        /* @__PURE__ */ e(l, { variant: r.labelMedium, className: `${a}__header-label`, children: j }),
+        /* @__PURE__ */ e(l, { className: `${a}__title`, variant: r.headingLarge, children: s }),
+        o && /* @__PURE__ */ e(l, { variant: r.badge, className: `${a}__badge`, children: o }),
+        /* @__PURE__ */ e(l, { variant: r.labelMedium, className: `${a}__location`, children: b }),
+        /* @__PURE__ */ i("div", { className: `${a}__occurrence-details`, children: [
+          k.map(({ date: p, occurrenceLabel: H }) => /* @__PURE__ */ i("div", { className: `${a}__occurrence-details-text`, children: [
+            /* @__PURE__ */ e(l, { variant: r.labelMedium, children: H }),
+            /* @__PURE__ */ e(l, { variant: r.labelMedium, className: `${a}__date`, children: p })
           ] }, String(p))),
           x
         ] }),
@@ -73,7 +73,7 @@ const A = R(
     ] });
   }
 );
-A.displayName = "SaleHeaderBanner";
+z.displayName = "SaleHeaderBanner";
 export {
-  A as default
+  z as default
 };

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

@@ -25,28 +25,41 @@
 
   &__countdown-container {
     align-items: flex-start;
-    column-gap: $spacing-sm;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
+    gap: $spacing-micro $spacing-sm;
     justify-content: flex-start;
-    row-gap: $spacing-micro;
     text-transform: inherit;
     width: 100%;
 
     > .#{$px}-text {
       flex-shrink: 0;
+      font-variation-settings: 'wght' 600;
+    }
+  }
+
+  &--center-align {
+    .#{$px}-countdown__countdown-container {
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    }
+
+    .#{$px}-countdown__duration-group {
+      justify-content: center;
     }
   }
 
   &__duration-group {
     align-items: center;
-    column-gap: $spacing-sm;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
+    gap: 0 $spacing-sm;
     justify-content: flex-start;
-    row-gap: 0;
+
+    .#{$px}-duration .#{$px}-text {
+      font-variation-settings: 'wght' 600;
+    }
   }
 
   &--compact {

package/package.json

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