@phillips/seldon 1.210.1 → 1.211.0

package/dist/_virtual/index10.js

@@ -1,4 +1,4 @@
-var o = { exports: {} };
+var e = { exports: {} };
 export {
-  o as __module
+  e as __module
 };

package/dist/_virtual/index9.js

@@ -1,4 +1,4 @@
-var e = { exports: {} };
+var o = { exports: {} };
 export {
-  e as __module
+  o as __module
 };

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

@@ -39,7 +39,14 @@ export declare const Seconds: {
         };
     };
 };
-export declare const Compact: (props: CountdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Compact: {
+    (props: CountdownProps): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
 export declare const ClosingCountdown: {
     (props: CountdownProps): import("react/jsx-runtime").JSX.Element;
     argTypes: {
@@ -48,4 +55,9 @@ export declare const ClosingCountdown: {
             options: CountdownVariants[];
         };
     };
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
 };

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

@@ -32,6 +32,11 @@ export declare const TextWithSkeleton: {
         variant: TextVariants;
         isSkeletonLoading: boolean;
     };
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
     argTypes: {
         variant: {
             options: typeof TextVariants;

package/dist/node_modules/runes2/dist/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../../_virtual/index9.js";
+import { __module as e } from "../../../_virtual/index10.js";
 import { __require as r } from "./index.cjs.development.js";
 import { __require as o } from "./index.cjs.production.min.js";
 typeof process < "u" && process.env.NODE_ENV !== "production" ? e.exports = r() : e.exports = o();

package/dist/node_modules/toposort/index.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs as d } from "../../_virtual/_commonjsHelpers.js";
-import { __module as v } from "../../_virtual/index10.js";
+import { __module as v } from "../../_virtual/index9.js";
 v.exports = function(n) {
   return g(m(n), n);
 };

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

@@ -12,3 +12,7 @@ export declare const Playground: {
     };
 };
 export declare const CountryPhoneCodePicker: (props: CountryPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PreSelectedCountry: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

package/dist/patterns/CountryPicker/CountryPickerModal.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react';
+import { default as CountryPickerModal, CountryPickerModalProps } from './CountryPickerModal';
+import { ModalBaseProps } from './types';
+declare const meta: Meta<typeof CountryPickerModal>;
+export default meta;
+export declare const DefaultOpen: {
+    (props: ModalBaseProps & CountryPickerModalProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        modalTitle: string;
+        searchInputLabel: string;
+        searchInputPlaceholder: string;
+        selectButtonLabel: string;
+        baseClassName: string;
+        isOpen: boolean;
+    };
+};

package/dist/patterns/CountryPicker/CountryPickerOption.js

@@ -1,36 +1,36 @@
-import { jsxs as _, jsx as p } from "react/jsx-runtime";
+import { jsxs as _, jsx as r } from "react/jsx-runtime";
 import $ from "../../components/Text/Text.js";
-import { TextVariants as d } from "../../components/Text/types.js";
-import e from "../../node_modules/classnames/index.js";
-import { getSafeCountryCallingCode as g } from "./utils.js";
-const v = ({
+import { TextVariants as g } from "../../components/Text/types.js";
+import d from "../../node_modules/classnames/index.js";
+import { getSafeCountryCallingCode as h } from "./utils.js";
+const y = ({
   code: t,
   name: n,
-  isChecked: r,
-  inputName: f,
+  isChecked: p,
+  inputName: e,
   baseClassName: o,
-  variantConfig: h
+  variantConfig: f
 }) => {
-  const c = `${o}__radio-${t}`, { isPhone: i, onChange: l } = h;
+  const c = `${o}__radio-${t}`, { isPhone: i, onChange: l } = f;
   return /* @__PURE__ */ _(
     "label",
     {
       htmlFor: c,
-      className: e(`${o}__option`, {
-        [`${o}__option--selected`]: r,
+      className: d(`${o}__option`, {
+        [`${o}__option--selected`]: p,
         [`${o}__option--is-phone`]: i
       }),
-      "aria-label": i ? `${n} +${g(t)}` : n,
+      "aria-label": i ? `${n} +${h(t)}` : n,
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ r(
           "input",
           {
             type: "radio",
             id: c,
-            name: f,
-            checked: r,
-            className: e(`${o}__radio`, {
-              [`${o}__radio--selected`]: r,
+            name: e,
+            checked: p,
+            className: d(`${o}__radio`, {
+              [`${o}__radio--selected`]: p,
               [`${o}__radio--visually-hidden`]: i
             }),
             onChange: () => {
@@ -39,24 +39,25 @@ const v = ({
           }
         ),
         /* @__PURE__ */ _("span", { className: `${o}__option-content`, children: [
-          /* @__PURE__ */ p($, { variant: d.string2, className: `${o}__option-name`, children: n }),
-          i && /* @__PURE__ */ _($, { variant: d.string2, className: `${o}__option-code`, children: [
+          /* @__PURE__ */ r($, { variant: g.string2, className: `${o}__option-name`, children: n }),
+          i && /* @__PURE__ */ _($, { variant: g.string2, className: `${o}__option-code`, children: [
             "+",
-            g(t)
+            h(t)
           ] })
         ] }),
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ r("span", { className: `${o}__option-flag`, children: /* @__PURE__ */ r(
           "img",
           {
-            src: `https://flagcdn.com/24x18/${t.toLowerCase()}.png`,
+            src: `https://flagcdn.com/h20/${t.toLowerCase()}.png`,
+            srcSet: `https://flagcdn.com/h40/${t.toLowerCase()}.png 2x`,
             alt: `${n} flag`,
-            className: `${o}__option-flag`
+            className: `${o}__option-flag-img`
           }
-        )
+        ) })
       ]
     }
   );
 };
 export {
-  v as CountryPickerOption
+  y as CountryPickerOption
 };

package/dist/patterns/CountryPicker/CountryPickerTrigger.js

@@ -1,9 +1,9 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import y from "../../components/Icon/Icon.js";
 import { TextVariants as k } from "../../components/Text/types.js";
-import P from "../../components/Text/Text.js";
+import w from "../../components/Text/Text.js";
 import t from "../../node_modules/classnames/index.js";
-import { countries as w } from "./constants.js";
+import { countries as P } from "./constants.js";
 import { forwardRef as I } from "react";
 import { useNormalizedInputProps as T, px as b } from "../../utils/index.js";
 const j = I(
@@ -17,17 +17,17 @@ const j = I(
     id: e,
     className: f,
     baseClassName: r,
-    variantConfig: u
-  }, v) => {
-    const { isPhone: a, value: c } = u, n = T({
+    variantConfig: h
+  }, u) => {
+    const { isPhone: c, value: a } = h, n = T({
       id: "country-picker-trigger-input",
       invalid: o,
       invalidText: s,
       type: "text"
-    }), $ = n.invalidId, g = a ? c : w.filter((x) => x.name === c)?.[0]?.code, h = () => n.validation ? n.validation : /* @__PURE__ */ i("p", { className: `${b}-input__validation`, children: " " });
+    }), $ = n.invalidId, g = c ? a : P.filter((x) => x.name === a)?.[0]?.code, v = () => n.validation ? n.validation : /* @__PURE__ */ i("p", { className: `${b}-input__validation`, children: " " });
     return /* @__PURE__ */ d("div", { className: t(`${r}__trigger`, f), children: [
       /* @__PURE__ */ i(
-        P,
+        w,
         {
           variant: k.string2,
           className: t(`${r}__trigger-label`, {
@@ -40,33 +40,34 @@ const j = I(
       /* @__PURE__ */ d(
         "button",
         {
-          ref: v,
+          ref: u,
           type: "button",
           "aria-label": p,
           "aria-invalid": n.invalid,
           "aria-describedby": $,
           className: t(`${r}__trigger-btn`, {
             [`${r}__trigger-btn--error`]: o,
-            [`${r}__trigger-btn--is-phone`]: a
+            [`${r}__trigger-btn--is-phone`]: c
           }),
           onClick: _,
           "data-testid": "country-picker-trigger",
           id: e,
           children: [
-            g && /* @__PURE__ */ i(
+            g && /* @__PURE__ */ i("span", { className: `${r}__trigger-flag`, children: /* @__PURE__ */ i(
               "img",
               {
-                src: `https://flagcdn.com/24x18/${g.toLowerCase()}.png`,
-                alt: `${c} flag`,
-                className: `${r}__trigger-flag`
+                src: `https://flagcdn.com/h20/${g.toLowerCase()}.png`,
+                srcSet: `https://flagcdn.com/h40/${g.toLowerCase()}.png 2x`,
+                alt: `${a} flag`,
+                className: `${r}__trigger-flag-img`
               }
-            ),
+            ) }),
             /* @__PURE__ */ i("span", { className: t(`${r}__trigger-text`), children: m }),
             /* @__PURE__ */ i("span", { className: t(`${r}__trigger-icon`), children: /* @__PURE__ */ i(y, { icon: "ChevronDown", color: "black-100", width: 16, height: 16 }) })
           ]
         }
       ),
-      !a && h()
+      !c && v()
     ] });
   }
 );

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

@@ -1,9 +1,14 @@
 import { ComponentProps } from 'react';
 import { SaleCardActions } from './SaleCardActions';
-import { SaleCardVariants } from './types';
-/** * Props for the SaleCard component. */
+import { SaleCardVariants, SaleCardImageDisplay } from './types';
+/**
+ * Props for the SaleCard component.
+ */
 export interface SaleCardProps extends ComponentProps<'div'> {
-    /** * The source URL of the image to be displayed. */
+    /**
+     * The source URL of the image to be displayed.
+     * Leaving this prop undefined or falsy is the intended way to hide the image.
+     */
     imageSrc?: string;
     /** * The alt text for the image. Defaults to "Auction Image" if not provided. */
     imageAlt?: string;
@@ -28,6 +33,8 @@ export interface SaleCardProps extends ComponentProps<'div'> {
     variant?: SaleCardVariants;
     /** * The <SaleCardActions /> component used to render the SaleCard CTAs. */
     children?: React.ReactElement<typeof SaleCardActions>;
+    /** * The position of the image relative to the content. Can be 'left' or 'right'. Defaults to 'left'. */
+    imageDisplay?: SaleCardImageDisplay;
 }
 /**
  * ## Overview

package/dist/patterns/SaleCard/SaleCard.js

@@ -1,58 +1,60 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import E from "../../node_modules/classnames/index.js";
-import { forwardRef as b } from "react";
-import y from "../../components/Button/Button.js";
-import { ButtonVariants as A } from "../../components/Button/types.js";
-import L from "../../components/SeldonImage/SeldonImage.js";
+import L from "../../node_modules/classnames/index.js";
+import { forwardRef as T } from "react";
+import b from "../../components/Button/Button.js";
+import { ButtonVariants as y } from "../../components/Button/types.js";
+import A from "../../components/SeldonImage/SeldonImage.js";
 import { TextVariants as e } from "../../components/Text/types.js";
 import s from "../../components/Text/Text.js";
-import { SSRMediaQuery as T } from "../../providers/SeldonProvider/utils.js";
+import { SSRMediaQuery as I } from "../../providers/SeldonProvider/utils.js";
 import { getCommonProps as x } from "../../utils/index.js";
-import { SaleCardVariants as _ } from "./types.js";
-const I = b(
+import { SaleCardVariants as p, SaleCardImageDisplay as P } from "./types.js";
+const R = T(
   ({
-    className: p,
+    className: f,
     imageSrc: t,
-    imageAlt: f = "Auction Image",
-    auctionType: N,
+    imageAlt: N = "Auction Image",
+    auctionType: $,
     titleText: h,
-    date: $,
-    location: g,
+    date: g,
+    location: u,
     badgeText: o,
     modalButtonOnClick: l,
     modalButtonText: n,
-    variant: i = _.DEFAULT,
+    variant: i = p.DEFAULT,
     children: c,
-    ...d
-  }, u) => {
-    const { className: a, ...v } = x(d, "SaleCard"), S = E(a, p, {
-      [`${a}--${i}`]: i
-    }), C = { ...v, ...d };
-    return /* @__PURE__ */ m("article", { ...C, className: S, ref: u, children: [
-      t ? /* @__PURE__ */ r(L, { src: t, alt: f, className: `${a}__image` }) : null,
+    imageDisplay: d = P.LEFT,
+    ..._
+  }, v) => {
+    const { className: a, ...S } = x(_, "SaleCard"), C = L(a, f, {
+      [`${a}--${i}`]: i,
+      [`${a}--image-${d}`]: d
+    }), E = { ...S, ..._ };
+    return /* @__PURE__ */ m("article", { ...E, className: C, ref: v, children: [
+      t ? /* @__PURE__ */ r(A, { src: t, alt: N, className: `${a}__image` }) : null,
       /* @__PURE__ */ m("div", { className: `${a}__details`, children: [
-        /* @__PURE__ */ r(s, { variant: e.badge, className: `${a}__auction-type`, children: N }),
+        /* @__PURE__ */ r(s, { variant: e.badge, className: `${a}__auction-type`, children: $ }),
         /* @__PURE__ */ r(s, { variant: e.title3, children: h }),
         o && /* @__PURE__ */ r(s, { variant: e.badge, className: `${a}__badge`, children: o }),
         /* @__PURE__ */ m("div", { className: `${a}__info`, children: [
+          /* @__PURE__ */ r(s, { variant: e.string2, children: u }),
           /* @__PURE__ */ r(s, { variant: e.string2, children: g }),
-          /* @__PURE__ */ r(s, { variant: e.string2, children: $ }),
           n && l && /* @__PURE__ */ r("div", { className: `${a}__modal-link`, children: /* @__PURE__ */ r(
-            y,
+            b,
             {
               onClick: l,
-              variant: A.tertiary,
+              variant: y.tertiary,
               className: `${a}__modal-link-button`,
               children: n
             }
           ) })
         ] })
       ] }),
-      i !== _.RELATED_SALE_TILE && c && /* @__PURE__ */ r("div", { className: `${a}__ctas`, children: /* @__PURE__ */ r(T.Media, { greaterThanOrEqual: "md", children: c }) })
+      i !== p.RELATED_SALE_TILE && c && /* @__PURE__ */ r("div", { className: `${a}__ctas`, children: /* @__PURE__ */ r(I.Media, { greaterThanOrEqual: "md", children: c }) })
     ] });
   }
 );
-I.displayName = "SaleCard";
+R.displayName = "SaleCard";
 export {
-  I as default
+  R as default
 };

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

@@ -23,3 +23,4 @@ export declare const SaleCardWithDownloadLink: () => import("react/jsx-runtime")
 export declare const SaleCardNoCTA: () => import("react/jsx-runtime").JSX.Element;
 export declare const SaleCardWithLink: () => import("react/jsx-runtime").JSX.Element;
 export declare const SaleCardNoImage: () => import("react/jsx-runtime").JSX.Element;
+export declare const SaleCardImageRightVariants: () => import("react/jsx-runtime").JSX.Element;

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

@@ -2,3 +2,7 @@ export declare enum SaleCardVariants {
     DEFAULT = "default",
     RELATED_SALE_TILE = "relatedSaleTile"
 }
+export declare enum SaleCardImageDisplay {
+    LEFT = "left",
+    RIGHT = "right"
+}

package/dist/patterns/SaleCard/types.js

@@ -1,4 +1,5 @@
-var E = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.RELATED_SALE_TILE = "relatedSaleTile", e))(E || {});
+var r = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.RELATED_SALE_TILE = "relatedSaleTile", e))(r || {}), t = /* @__PURE__ */ ((e) => (e.LEFT = "left", e.RIGHT = "right", e))(t || {});
 export {
-  E as SaleCardVariants
+  t as SaleCardImageDisplay,
+  r as SaleCardVariants
 };

package/dist/scss/patterns/CountryPicker/_countryPickerOption.scss

@@ -39,9 +39,24 @@
     }
 
     &-flag {
+      align-items: center;
+      display: flex;
       height: 1rem;
+      justify-content: center;
       margin-right: $spacing-sm;
-      vertical-align: middle;
+      overflow: hidden;
+      width: 1.5rem;
+
+      @media (min-width: $breakpoint-md) {
+        height: 1.25rem;
+        width: 1.75rem;
+      }
+
+      &-img {
+        display: block;
+        height: 100%;
+        width: auto;
+      }
     }
   }
   .#{$px}-country-picker__radio {

package/dist/scss/patterns/CountryPicker/_countryPickerTrigger.scss

@@ -74,8 +74,24 @@
     }
 
     &-flag {
+      align-items: center;
+      display: flex;
       height: 1rem;
+      justify-content: center;
       margin-right: $spacing-sm;
+      overflow: hidden;
+      width: 1.5rem;
+
+      @media (min-width: $breakpoint-md) {
+        height: 1.25rem;
+        width: 1.75rem;
+      }
+
+      &-img {
+        display: block;
+        height: 100%;
+        width: auto;
+      }
     }
   }
 }

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

@@ -6,8 +6,16 @@
   flex-direction: column;
   gap: $spacing-md;
 
-  @include media($breakpoint-snw-mobile) {
-    flex-direction: row;
+  &--image-left {
+    @include media($breakpoint-snw-mobile) {
+      flex-direction: row;
+    }
+  }
+
+  &--image-right {
+    @include media($breakpoint-snw-mobile) {
+      flex-direction: row-reverse;
+    }
   }
 
   &__image {
@@ -118,7 +126,12 @@
     gap: $spacing-sm;
 
     @include media($size-snw-mobile, 'max') {
-      flex-direction: row;
+      &.#{$px}-sale-card--image-left {
+        flex-direction: row;
+      }
+      &.#{$px}-sale-card--image-right {
+        flex-direction: row-reverse;
+      }
     }
 
     .#{$px}-sale-card__image {

package/package.json

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