@phillips/seldon 1.214.0-beta.2 → 1.214.0-beta.4

package/dist/components/Detail/Detail.js

@@ -1,28 +1,28 @@
-import { jsxs as n, jsx as l } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { getCommonProps as u } from "../../utils/index.js";
-import m from "../../node_modules/classnames/index.js";
-import { TextVariants as r } from "../Text/types.js";
-import t from "../Text/Text.js";
-const x = h(
-  ({ className: c = "", hasWrap: d = !0, label: _, subLabel: e, value: b, variant: o = "md", ...i }, f) => {
-    const { className: a, ...p } = u(i, "Detail"), s = o === "sm" ? r.labelSmall : r.labelMedium, N = o === "sm" ? r.bodySmall : s;
-    return /* @__PURE__ */ n("div", { ...p, className: m(a, c), ...i, ref: f, children: [
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { getCommonProps as h } from "../../utils/index.js";
+import r from "../../node_modules/classnames/index.js";
+import { TextVariants as a } from "../Text/types.js";
+import o from "../Text/Text.js";
+const x = N(
+  ({ className: c = "", hasWrap: d = !0, label: b, subLabel: m, value: _, variant: e = "md", ...t }, f) => {
+    const { className: l, ...p } = h(t, "Detail"), i = e === "sm" ? a.labelSmall : e === "lg" ? a.labelLarge : a.labelMedium, u = e === "sm" ? a.bodySmall : e === "lg" ? a.bodyLarge : a.labelMedium;
+    return /* @__PURE__ */ n("div", { ...p, className: r(l, c), ...t, ref: f, children: [
       /* @__PURE__ */ n(
         "dt",
         {
-          className: m(`${a}__label-section`, {
-            [`${a}__label--no-wrap`]: !d,
-            [`${a}__label-section--has-sub-label`]: e
+          className: r(`${l}__label-section`, {
+            [`${l}__label--no-wrap`]: !d,
+            [`${l}__label-section--has-sub-label`]: m
           }),
           children: [
-            /* @__PURE__ */ l(t, { variant: s, className: m(`${a}__label-section--label`), children: _ }),
+            /* @__PURE__ */ s(o, { variant: i, className: r(`${l}__label-section--label`), children: b }),
             " ",
-            e ? /* @__PURE__ */ l(t, { className: `${a}__sub-label`, variant: s, children: e }) : null
+            m ? /* @__PURE__ */ s(o, { className: `${l}__sub-label`, variant: i, children: m }) : null
           ]
         }
       ),
-      /* @__PURE__ */ l("dd", { className: `${a}__value`, children: /* @__PURE__ */ l(t, { variant: N, children: b }) })
+      /* @__PURE__ */ s("dd", { className: `${l}__value`, children: /* @__PURE__ */ s(o, { variant: u, children: _ }) })
     ] });
   }
 );

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

@@ -21,6 +21,23 @@ export declare const Small: {
         value: string;
     };
 };
+export declare const Medium: {
+    (props: DetailProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: DetailVariants;
+        label: string;
+        value: string;
+    };
+};
+export declare const Large: {
+    (props: DetailProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: DetailVariants;
+        label: string;
+        value: string;
+    };
+};
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithSubLabel: {
     (props: DetailProps): import("react/jsx-runtime").JSX.Element;
     args: {

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

@@ -1,2 +1,2 @@
 export { default as Detail, type DetailProps, type DetailComponent } from './Detail';
-export { DetailVariants as DetailVariant } from './types';
+export { DetailVariants } from './types';

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

@@ -1,4 +1,5 @@
 export declare enum DetailVariants {
+    lg = "lg",
     md = "md",
     sm = "sm"
 }

package/dist/components/Detail/types.js

@@ -1,4 +1,4 @@
-var r = /* @__PURE__ */ ((m) => (m.md = "md", m.sm = "sm", m))(r || {});
+var d = /* @__PURE__ */ ((m) => (m.lg = "lg", m.md = "md", m.sm = "sm", m))(d || {});
 export {
-  r as DetailVariants
+  d as DetailVariants
 };

package/dist/index.js

@@ -2,7 +2,7 @@ import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidati
 import { default as C } from "./pages/Page.js";
 import { SSRMediaQuery as P, ssrMediaQueryStyle as B } from "./providers/SeldonProvider/utils.js";
 import { usePendingState as L } from "./utils/hooks.js";
-import { AuctionStatus as b, LotStatus as A, SupportedLanguages as y } from "./types/commonTypes.js";
+import { AuctionStatus as A, LotStatus as V, SupportedLanguages as y } from "./types/commonTypes.js";
 import { default as h } from "./components/Button/Button.js";
 import { ButtonVariants as v } from "./components/Button/types.js";
 import { default as w } from "./components/IconButton/IconButton.js";
@@ -29,8 +29,8 @@ import { default as ce } from "./components/Drawer/Drawer.js";
 import { default as Ce } from "./components/Dropdown/Dropdown.js";
 import { default as Pe } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { default as Ie } from "./components/Grid/Grid.js";
-import { default as Ve } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as Ae } from "./components/GridItem/types.js";
+import { default as be } 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 ke } from "./components/Link/Link.js";
 import { LinkVariants as Fe } from "./components/Link/types.js";
@@ -55,8 +55,8 @@ import { Tag as nt, default as gt } from "./components/Tags/Tags.js";
 import { TextAlignments as St, TextVariants as Ct } from "./components/Text/types.js";
 import { default as Pt } from "./components/Text/Text.js";
 import { TextSymbolVariants as It } from "./components/TextSymbol/types.js";
-import { default as Vt } from "./components/TextSymbol/TextSymbol.js";
-import { default as At } from "./components/Video/Video.js";
+import { default as bt } from "./components/TextSymbol/TextSymbol.js";
+import { default as Vt } from "./components/Video/Video.js";
 import { default as Dt } from "./patterns/DetailList/DetailList.js";
 import { DetailListAlignment as kt } from "./patterns/DetailList/types.js";
 import { default as Ft } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
@@ -81,8 +81,8 @@ import { default as go } from "./components/PageContentWrapper/PageContentWrappe
 import { default as So } from "./components/PhoneNumberPicker/PhoneNumberPicker.js";
 import { default as To } from "./patterns/FiltersInline/FiltersInline.js";
 import { FilterButtonIconType as Bo, FilterButtonType as Io } from "./patterns/FiltersInline/types.js";
-import { default as Vo } from "./patterns/SaleCard/SaleCard.js";
-import { SaleCardActions as Ao } from "./patterns/SaleCard/SaleCardActions.js";
+import { default as bo } from "./patterns/SaleCard/SaleCard.js";
+import { SaleCardActions as Vo } from "./patterns/SaleCard/SaleCardActions.js";
 import { SaleCardImageDisplay as Do, SaleCardVariants as ho } from "./patterns/SaleCard/types.js";
 import { default as vo } from "./patterns/ViewingDetails/ViewingDetails.js";
 import { default as wo } from "./components/ProgressIndicator/ProgressIndicator.js";
@@ -108,7 +108,7 @@ import { useToast as Sr } from "./components/Toast/useToast.js";
 import { default as Tr } from "./patterns/AccountPageHeader/AccountPageHeader.js";
 import { default as Br } from "./patterns/BidSnapshot/BidSnapshot.js";
 import { default as Lr } from "./patterns/BidSnapshot/BidMessage.js";
-import { BidMessageVariants as br, BidStatusEnum as Ar } from "./patterns/BidSnapshot/types.js";
+import { BidMessageVariants as Ar, BidStatusEnum as Vr } from "./patterns/BidSnapshot/types.js";
 import { default as Dr } from "./patterns/FilterMenu/FilterMenu.js";
 import { default as kr } from "./patterns/ObjectTile/ObjectTile.js";
 import { default as Fr } from "./patterns/CountryPicker/CountryPicker.js";
@@ -125,12 +125,12 @@ export {
   Tr as AccountPageHeader,
   Ro as AddToCalendar,
   zo as Article,
-  b as AuctionStatus,
+  A as AuctionStatus,
   Kt as AuthState,
   Lr as BidMessage,
-  br as BidMessageVariants,
+  Ar as BidMessageVariants,
   Br as BidSnapshot,
-  Ar as BidStatusEnum,
+  Vr as BidStatusEnum,
   O as Breadcrumb,
   h as Button,
   v as ButtonVariants,
@@ -155,7 +155,7 @@ export {
   ie as Detail,
   Dt as DetailList,
   kt as DetailListAlignment,
-  ne as DetailVariant,
+  ne as DetailVariants,
   Xo as Divider,
   ce as Drawer,
   Ce as Dropdown,
@@ -172,8 +172,8 @@ export {
   To as FiltersInline,
   Mo as Footer,
   Ie as Grid,
-  Ve as GridItem,
-  Ae as GridItemAlign,
+  be as GridItem,
+  Ve as GridItemAlign,
   Eo as Header,
   Ht as HeroBanner,
   Q as Icon,
@@ -186,7 +186,7 @@ export {
   Fe as LinkVariants,
   xo as Loader,
   zr as LoadingState,
-  A as LotStatus,
+  V as LotStatus,
   Ge as Modal,
   Ue as Navigation,
   Oe as NavigationItem,
@@ -207,8 +207,8 @@ export {
   Nr as ProgressWizardFooter,
   _e as Row,
   P as SSRMediaQuery,
-  Vo as SaleCard,
-  Ao as SaleCardActions,
+  bo as SaleCard,
+  Vo as SaleCardActions,
   Do as SaleCardImageDisplay,
   ho as SaleCardVariants,
   Ut as SaleHeaderBanner,
@@ -234,12 +234,12 @@ export {
   ur as TextArea,
   Nt as TextBanner,
   It as TextSymbolVariants,
-  Vt as TextSymbols,
+  bt as TextSymbols,
   Ct as TextVariants,
   xr as Toast,
   gr as ToastProvider,
   _t as UserManagement,
-  At as Video,
+  Vt as Video,
   vo as ViewingDetails,
   oo as ViewingsList,
   s as defaultYear,

package/dist/patterns/BidSnapshot/BidSnapshot.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { DetailListProps } from '../DetailList/index';
-import { DetailVariant } from '../../components/Detail/index';
+import { DetailVariants } from '../../components/Detail/index';
 import { LotStatus, SupportedLanguages } from '../../types/commonTypes';
 import { BidStatusEnum } from './types';
 export interface BidSnapshotProps extends ComponentProps<'div'>, Pick<DetailListProps, 'hasSeparators'> {
@@ -15,7 +15,7 @@ export interface BidSnapshotProps extends ComponentProps<'div'>, Pick<DetailList
     /**
      * Variant of the bid snapshot - 'sm' uses labelSmall for text
      */
-    variant?: DetailVariant;
+    variant?: DetailVariants;
     /**
      * Bids label text, a fucntion for label of bids amoutn (2 bids, 3 bids, etc) where the number is the length of the bids array.
      */

package/dist/patterns/BidSnapshot/BidSnapshot.js

@@ -1,85 +1,87 @@
-import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { jsxs as M, jsx as n } from "react/jsx-runtime";
 import { forwardRef as Q, isValidElement as U, cloneElement as X } from "react";
 import Y from "../../node_modules/classnames/index.js";
 import { getCommonProps as Z, findChildrenOfType as O, findChildrenExcludingTypes as oo } from "../../utils/index.js";
-import so from "../DetailList/DetailList.js";
-import c from "../../components/Detail/Detail.js";
-import { DetailVariants as ao } from "../../components/Detail/types.js";
-import { LotStatus as n, SupportedLanguages as eo } from "../../types/commonTypes.js";
-import no from "../../components/Countdown/Countdown.js";
-import { CountdownVariants as C } from "../../components/Countdown/types.js";
-import { BidStatusEnum as to } from "./types.js";
-import V from "./BidMessage.js";
-import { TextVariants as _ } from "../../components/Text/types.js";
+import ao from "../DetailList/DetailList.js";
+import f from "../../components/Detail/Detail.js";
+import { DetailVariants as eo } from "../../components/Detail/types.js";
+import { LotStatus as l, SupportedLanguages as so } from "../../types/commonTypes.js";
+import to from "../../components/Countdown/Countdown.js";
+import { CountdownVariants as _ } from "../../components/Countdown/types.js";
+import { BidStatusEnum as no } from "./types.js";
+import v from "./BidMessage.js";
+import { TextVariants as e } from "../../components/Text/types.js";
 import "../../components/Text/Text.js";
-import { isAfter as M } from "../../node_modules/date-fns/isAfter.js";
-import { differenceInMinutes as io } from "../../node_modules/date-fns/differenceInMinutes.js";
-const ro = (s) => s === 1 ? `${s} bid` : `${s} bids`, lo = Q(
+import { isAfter as T } from "../../node_modules/date-fns/isAfter.js";
+import { differenceInMinutes as lo } from "../../node_modules/date-fns/differenceInMinutes.js";
+const ro = (a) => a === 1 ? `${a} bid` : `${a} bids`, io = Q(
   ({
-    lotStatus: s = n.ready,
-    bidStatus: f,
-    bidsLabelText: T = ro,
-    children: u,
-    className: W,
-    closingText: y = "Closes in",
-    currency: t = "$",
+    lotStatus: a = l.ready,
+    bidStatus: u,
+    bidsLabelText: W = ro,
+    children: b,
+    className: y,
+    closingText: E = "Closes in",
+    currency: r = "$",
     currentBid: $,
-    currentBidText: E = "Current bid",
-    formatDurationStr: B = (o) => o.replace(/seconds?/, "sec").replace(/minutes?/, "min"),
-    lang: j = "en",
+    currentBidText: B = "Current bid",
+    formatDurationStr: j = (o) => o.replace(/seconds?/, "sec").replace(/minutes?/, "min"),
+    lang: P = "en",
     saleCloseDate: i,
-    lotCloseDate: r,
-    numberOfBids: b = 0,
-    startingBid: h,
-    startingBidText: P = "Starting bid",
-    soldPrice: g,
-    showSoldLabel: R = !0,
-    soldForText: A = "Sold for",
-    wonForText: D = "Won for",
+    lotCloseDate: m,
+    numberOfBids: h = 0,
+    startingBid: g,
+    startingBidText: R = "Starting bid",
+    soldPrice: L,
+    showSoldLabel: A = !0,
+    soldForText: D = "Sold for",
+    wonForText: I = "Won for",
     getCurrentDateTime: w = () => /* @__PURE__ */ new Date(),
-    hasSeparators: I = !0,
-    variant: l = ao.md,
+    hasSeparators: k = !0,
+    variant: s = eo.md,
     ...S
-  }, k) => {
-    const { className: o, ...q } = Z(S, "BidSnapshot"), z = l === "sm" ? _.labelSmall : _.labelMedium, F = l === "sm" ? C.sm : C.compact, m = $ !== null && b > 0, L = s === n.ready, a = s === n.live, x = s === n.past, d = w() || /* @__PURE__ */ new Date(), G = a && r && M(r, d) && i && (io(i, d) < 60 || M(d, i)), N = O(u, V), H = oo(u, [V]), J = N ? N.map(
-      (p) => U(p) ? X(p, { textVariant: z }) : p
-    ) : null, K = Y(o, W, {
-      [`${o}--live`]: a,
-      [`${o}--has-bids`]: m || x
+  }, q) => {
+    const { className: o, ...z } = Z(S, "BidSnapshot"), x = s === "sm" ? e.labelSmall : s === "lg" ? e.labelLarge : e.labelMedium, F = s === "sm" ? _.sm : _.compact, d = $ !== null && h > 0, N = a === l.ready, t = a === l.live, V = a === l.past, p = w() || /* @__PURE__ */ new Date(), G = t && m && T(m, p) && i && (lo(i, p) < 60 || T(p, i)), C = O(b, v), H = oo(b, [v]), J = C ? C.map(
+      (c) => U(c) ? X(c, {
+        textVariant: x === e.labelLarge ? e.labelMedium : x
+      }) : c
+    ) : null, K = Y(o, y, {
+      [`${o}--live`]: t,
+      [`${o}--has-bids`]: d || V
     });
-    return /* @__PURE__ */ v("div", { ...q, ...S, ref: k, className: K, children: [
-      /* @__PURE__ */ v(so, { hasSeparators: I, variant: l, className: `${o}__text`, children: [
-        R && x ? /* @__PURE__ */ e(
-          c,
+    return /* @__PURE__ */ M("div", { ...z, ...S, ref: q, className: K, children: [
+      /* @__PURE__ */ M(ao, { hasSeparators: k, variant: s, className: `${o}__text`, children: [
+        A && V ? /* @__PURE__ */ n(
+          f,
           {
-            label: f === to.Won ? D : A,
-            value: g ? `${t}${g?.toLocaleString()}` : "",
+            label: u === no.Won ? I : D,
+            value: L ? `${r}${L?.toLocaleString()}` : "",
             hasWrap: !1,
             className: `${o}__sold`
           }
         ) : null,
-        a && m ? /* @__PURE__ */ e(
-          c,
+        t && d ? /* @__PURE__ */ n(
+          f,
           {
-            label: E,
-            subLabel: `(${T(b)})`,
-            value: `${t}${$?.toLocaleString()}`,
+            label: B,
+            subLabel: `(${W(h)})`,
+            value: `${r}${$?.toLocaleString()}`,
             hasWrap: !1,
             className: `${o}__current-bid`
           }
         ) : null,
-        h && (L || a && !m) ? /* @__PURE__ */ e(c, { label: P, value: `${t}${h?.toLocaleString()}`, hasWrap: !1 }) : null
+        g && (N || t && !d) ? /* @__PURE__ */ n(f, { label: R, value: `${r}${g?.toLocaleString()}`, hasWrap: !1 }) : null
       ] }),
-      f && !L ? J : null,
+      u && !N ? J : null,
       H,
-      G ? /* @__PURE__ */ e(
-        no,
+      G ? /* @__PURE__ */ n(
+        to,
         {
-          endDateTime: r,
-          label: y,
+          endDateTime: m,
+          label: E,
           variant: F,
-          locale: eo[j],
-          formatDurationStr: B,
+          locale: so[P],
+          formatDurationStr: j,
           showBottomBorder: !1,
           getCurrentDateTime: w
         }
@@ -87,7 +89,7 @@ const ro = (s) => s === 1 ? `${s} bid` : `${s} bids`, lo = Q(
     ] });
   }
 );
-lo.displayName = "BidSnapshot";
+io.displayName = "BidSnapshot";
 export {
-  lo as default
+  io as default
 };

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

@@ -177,3 +177,30 @@ export declare const SmallVariantWithBidMessage: {
         bidStatus: BidStatusEnum;
     };
 };
+export declare const LargeVariant: {
+    (props: BidSnapshotProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        currency: string;
+        numberOfBids: number;
+        lotStatus: LotStatus;
+        currentBid: number;
+        lotCloseDate: Date;
+        saleCloseDate: Date;
+        lang: import('date-fns').Locale;
+        startingBid: number;
+    };
+};
+export declare const LargeVariantWithBidMessage: {
+    (props: BidSnapshotProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        currency: string;
+        numberOfBids: number;
+        lotStatus: LotStatus;
+        currentBid: number;
+        lotCloseDate: Date;
+        saleCloseDate: Date;
+        lang: import('date-fns').Locale;
+        startingBid: number;
+        bidStatus: BidStatusEnum;
+    };
+};

package/dist/scss/componentStyles.scss

@@ -214,6 +214,10 @@
   @media (min-width: $breakpoint-lg) {
     --snw-flyout-link-size: 0.875rem;
     --snw-flyout-link-line-height: 1.75rem;
+    --header-height: 124px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+
+    // FONT SIZES
+    @include font-size-vars--lg;
   }
 
   @media (min-width: $breakpoint-xl) {
@@ -263,10 +267,7 @@
     --spacing-xl: 4.25rem;
     --spacing-xxl: 5.25rem;
     --spacing-xxxl: 6.25rem;
-    --header-height: 132px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
     --search-size: 2.875rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
-
-    // FONT SIZES
-    @include font-size-vars--lg;
+    --header-height: 132px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
   }
 }

package/dist/scss/components/Accordion/_accordion.scss

@@ -19,10 +19,11 @@
   &[data-state='open'] {
     display: block;
     height: auto;
+    padding-bottom: $spacing-sm;
   }
 
   &__content {
-    padding-bottom: $spacing-sm;
+    margin-bottom: $spacing-sm;
 
     &--locked {
       padding-bottom: $spacing-sm;

package/dist/scss/components/Search/_search.scss

@@ -33,8 +33,12 @@
     top: 2px;
   }
 
+  @include media($breakpoint-lg) {
+    top: 4px;
+  }
+
   @include media($breakpoint-xl) {
-    top: -5px;
+    top: -4px;
   }
 
   &--active {

package/dist/scss/components/TextSymbol/_textSymbol.scss

@@ -2,6 +2,7 @@
 
 .#{$px}-text-symbol {
   display: inline-flex;
+  font-variation-settings: 'wght' 600;
   gap: $spacing-micro;
 
   &--estimation {

package/dist/scss/patterns/BidSnapshot/_bidSnapshot.scss

@@ -8,20 +8,17 @@
     gap: 0 $spacing-sm;
   }
 
-  &__current-bid {
-    .#{$px}-detail__value .#{$px}-text {
+  &__current-bid,
+  &__sold {
+    .#{$px}-detail__value .#{$px}-text.#{$px}-text {
       font-variation-settings: 'wght' 600;
     }
   }
 
-  &:has(.#{$px}-bid-message) &__text .#{$px}-has-separators .#{$px}-detail {
+  &:has(.#{$px}-bid-message) &__text .#{$px}-detail {
     padding-bottom: 0;
   }
 
-  &__sold .#{$px}-detail__value .#{$px}-text {
-    font-variation-settings: 'wght' 600;
-  }
-
   .#{$px}-countdown {
     align-items: flex-start;
     padding: 0;

package/dist/scss/patterns/DetailList/_detailList.scss

@@ -38,10 +38,10 @@
 
   .#{$px}-has-separators {
     border-top: 1px solid $light-gray;
+  }
 
-    .#{$px}-detail {
-      padding: $spacing-sm 0;
-    }
+  .#{$px}-detail {
+    padding: $spacing-sm 0;
   }
 
   &--sm {

package/dist/scss/site-furniture/Header/_header.scss

@@ -172,9 +172,13 @@
       height: 100vh;
       left: 0;
       position: absolute;
-      top: calc($header-height - 3px);
+      top: calc($header-height - 10px);
       width: 100%;
 
+      @media (min-width: $breakpoint-xl) {
+        top: calc($header-height - 3px);
+      }
+
       @include isHeaderMobile {
         display: none;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.214.0-beta.2",
+  "version": "1.214.0-beta.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"