@phillips/seldon 1.92.0 → 1.93.0

package/dist/assets/PhillipsLogo.svg.js

@@ -1,5 +1,5 @@
 import * as e from "react";
-const l = (t) => /* @__PURE__ */ e.createElement("svg", { "data-testid": "header-logo-svg", viewBox: "0 0 131 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Logo/ HP Button", clipPath: "url(#clip0_3288_4057)" }, /* @__PURE__ */ e.createElement("path", { id: "Phillips Logo", d: "M54.8166 0.274027H52.6224V13.726H63.7504V11.6083H54.8166V0.274027ZM41.3171 13.7273H43.5119V0.274027H41.3171V13.7273ZM21.276 0.274027H19.1214V13.726H21.2566V8.86215H30.0526V13.726H32.2079V0.274027H30.0526V6.80339H21.2566L21.276 0.274027ZM87.8477 13.7273H90.0425V0.274027H87.8477V13.7273ZM118.23 10.402L117.489 12.3843C119.214 13.3651 122.153 14 124.23 14C128.07 14 130.48 12.4912 130.48 9.84295C130.48 6.72565 127.521 6.17565 124.309 5.86211C122.252 5.66647 120.096 5.50969 120.096 4.01971C120.096 2.86206 121.135 2.11772 123.898 2.11772C125.543 2.11772 127.444 2.49021 129.031 3.15747L129.716 1.157C127.953 0.39193 125.817 0 123.936 0C120.058 0 117.863 1.52885 117.863 4.01971C117.863 7.1571 120.861 7.7058 124.034 7.99991C126.091 8.1962 128.227 8.37305 128.227 9.8436C128.227 11.0401 127.15 11.8829 124.25 11.8829C122.467 11.8823 120.004 11.3485 118.23 10.402ZM72.4298 0.274027H70.2357V13.726H81.3637V11.6083H72.4298V0.274027ZM106.676 0.274027H99.1724V13.726H101.367V9.27417H106.676C109.811 9.27417 111.614 7.39161 111.614 4.76406C111.614 2.15659 109.85 0.274027 106.676 0.274027ZM106.421 7.1571H101.367V2.39174H106.421C108.321 2.39174 109.379 3.27407 109.379 4.7647C109.38 6.25533 108.361 7.1571 106.421 7.1571ZM7.50343 0.274027H0V13.726H2.19414V9.27417H7.50343C10.638 9.27417 12.4399 7.39161 12.4399 4.76406C12.4406 2.15659 10.6775 0.274027 7.50343 0.274027ZM7.24907 7.1571H2.19414V2.39174H7.24907C9.14936 2.39174 10.2069 3.27407 10.2069 4.7647C10.2063 6.25533 9.18819 7.1571 7.24907 7.1571Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_3288_4057" }, /* @__PURE__ */ e.createElement("rect", { width: 130.667, height: 14, fill: "white" }))));
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { "data-testid": "header-logo-svg", viewBox: "0 0 131 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("g", { id: "Logo/ HP Button", clipPath: "url(#clip0_3288_4057)" }, /* @__PURE__ */ e.createElement("path", { className: "phillips-logo", id: "Phillips Logo", d: "M54.8166 0.274027H52.6224V13.726H63.7504V11.6083H54.8166V0.274027ZM41.3171 13.7273H43.5119V0.274027H41.3171V13.7273ZM21.276 0.274027H19.1214V13.726H21.2566V8.86215H30.0526V13.726H32.2079V0.274027H30.0526V6.80339H21.2566L21.276 0.274027ZM87.8477 13.7273H90.0425V0.274027H87.8477V13.7273ZM118.23 10.402L117.489 12.3843C119.214 13.3651 122.153 14 124.23 14C128.07 14 130.48 12.4912 130.48 9.84295C130.48 6.72565 127.521 6.17565 124.309 5.86211C122.252 5.66647 120.096 5.50969 120.096 4.01971C120.096 2.86206 121.135 2.11772 123.898 2.11772C125.543 2.11772 127.444 2.49021 129.031 3.15747L129.716 1.157C127.953 0.39193 125.817 0 123.936 0C120.058 0 117.863 1.52885 117.863 4.01971C117.863 7.1571 120.861 7.7058 124.034 7.99991C126.091 8.1962 128.227 8.37305 128.227 9.8436C128.227 11.0401 127.15 11.8829 124.25 11.8829C122.467 11.8823 120.004 11.3485 118.23 10.402ZM72.4298 0.274027H70.2357V13.726H81.3637V11.6083H72.4298V0.274027ZM106.676 0.274027H99.1724V13.726H101.367V9.27417H106.676C109.811 9.27417 111.614 7.39161 111.614 4.76406C111.614 2.15659 109.85 0.274027 106.676 0.274027ZM106.421 7.1571H101.367V2.39174H106.421C108.321 2.39174 109.379 3.27407 109.379 4.7647C109.38 6.25533 108.361 7.1571 106.421 7.1571ZM7.50343 0.274027H0V13.726H2.19414V9.27417H7.50343C10.638 9.27417 12.4399 7.39161 12.4399 4.76406C12.4406 2.15659 10.6775 0.274027 7.50343 0.274027ZM7.24907 7.1571H2.19414V2.39174H7.24907C9.14936 2.39174 10.2069 3.27407 10.2069 4.7647C10.2063 6.25533 9.18819 7.1571 7.24907 7.1571Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_3288_4057" }, /* @__PURE__ */ e.createElement("rect", { width: 130.667, height: 14, fill: "white" }))));
 export {
-  l as default
+  t as default
 };

package/dist/assets/favorite.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { fill: "#323232", stroke: "#323232", strokeWidth: 2, d: "m16.76 6.45.006-.007.037-.04a9.895 9.895 0 0 1 .784-.753c.548-.472 1.316-1.033 2.22-1.436.901-.401 1.903-.63 2.95-.49 1.032.138 2.2.647 3.429 1.876 2.459 2.46 2.55 4.748 2.116 6.41a7.466 7.466 0 0 1-1.481 2.848l-.003.003v.001h-.001L16 26.53 5.183 14.863v-.001h-.001l-.003-.004a2.984 2.984 0 0 1-.143-.173 7.466 7.466 0 0 1-1.338-2.676c-.434-1.66-.343-3.95 2.116-6.41 1.23-1.228 2.397-1.737 3.43-1.875 1.046-.14 2.048.089 2.949.49.904.403 1.672.964 2.22 1.436a9.867 9.867 0 0 1 .784.753l.037.04.006.008h.001l.759.89.759-.89Z" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "a" }, /* @__PURE__ */ e.createElement("path", { fill: "#fff", d: "M0 0h32v32H0z" }))));
+export {
+  l as default
+};

package/dist/assets/icons.d.ts

@@ -5,6 +5,7 @@ export { default as ChevronDown } from './chevronDown.svg?react';
 export { default as ChevronNext } from './chevronNext.svg?react';
 export { default as ChevronRight } from './chevronRight.svg?react';
 export { default as Close } from './close.svg?react';
+export { default as Favorite } from './favorite.svg?react';
 export { default as FavoriteOutline } from './favoriteOutline.svg?react';
 export { default as Facebook } from './icon-footer-facebook.svg?react';
 export { default as FooterInstagram } from './icon-footer-instagram.svg?react';

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

@@ -6,6 +6,10 @@ export interface CountdownProps extends ComponentProps<'div'> {
      * The date the countdown should end
      */
     endDateTime: Date;
+    /**
+     * Function to modify strings coming from date-fns (Minutes -> Mins etc)
+     */
+    formatDurationStr?: (duration: string) => string;
     /**
      * Any descriptor to appear below the coundown
      */

package/dist/components/Countdown/Countdown.js

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

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

@@ -3,5 +3,6 @@ export interface DurationProps {
     duration: DurationValue;
     unit: DurationUnit;
     locale: Locale;
+    formatDurationStr?: (duration: string) => string;
 }
-export declare const Duration: ({ duration, unit, locale }: DurationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Duration: ({ duration, unit, locale, formatDurationStr }: DurationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Countdown/Duration.js

@@ -1,12 +1,11 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { px as m } from "../../utils/index.js";
-import n from "../../node_modules/classnames/index.js";
-import { formatDuration as c } from "../../node_modules/date-fns/formatDuration.js";
-const u = ({ duration: t, unit: r, locale: e }) => {
-  const s = `${m}-duration`, a = c(t, { format: [r], zero: !0, locale: e }).split(" ");
-  return /* @__PURE__ */ i("div", { className: s, children: [
-    /* @__PURE__ */ o("span", { className: n(r === "seconds" && `${s}--fixed-width`), children: a[0].padStart(2, "0") }),
-    /* @__PURE__ */ o("span", { children: a[1] })
+import { formatDuration as p } from "../../node_modules/date-fns/formatDuration.js";
+const u = ({ duration: a, unit: s, locale: n, formatDurationStr: i = (r) => r }) => {
+  const r = `${m}-duration`, t = p(a, { format: [s], zero: !0, locale: n }).split(" ");
+  return /* @__PURE__ */ e("div", { className: r, children: [
+    /* @__PURE__ */ o("span", { children: t[0].padStart(2, "0") }),
+    /* @__PURE__ */ o("span", { children: i(t[1]) })
   ] });
 };
 export {

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

@@ -1,6 +1,8 @@
 import { default as React, ComponentProps } from 'react';
 export interface DetailProps extends ComponentProps<'div'> {
+    hasWrap?: boolean;
     label: React.ReactNode;
+    subLabel?: React.ReactNode;
     value: React.ReactNode;
 }
 /**

package/dist/components/Detail/Detail.js

@@ -1,15 +1,21 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { getCommonProps as d } from "../../utils/index.js";
-import n from "../../node_modules/classnames/index.js";
-const f = c(({ className: m = "", label: l, value: o, ...s }, r) => {
-  const { className: a, ...t } = d(s, "Detail");
-  return /* @__PURE__ */ i("div", { ...t, className: n(a, m), ...s, ref: r, children: [
-    /* @__PURE__ */ e("dt", { className: `${a}__label`, children: l }),
-    /* @__PURE__ */ e("dd", { className: `${a}__value`, children: o })
-  ] });
-});
-f.displayName = "Detail";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { getCommonProps as f } from "../../utils/index.js";
+import m from "../../node_modules/classnames/index.js";
+const N = p(
+  ({ className: o = "", hasWrap: t = !0, label: i, subLabel: e, value: n, ...s }, c) => {
+    const { className: a, ...d } = f(s, "Detail");
+    return /* @__PURE__ */ l("div", { ...d, className: m(a, o), ...s, ref: c, children: [
+      /* @__PURE__ */ l("dt", { className: m(`${a}__label`, { [`${a}__label--no-wrap`]: !t }), children: [
+        i,
+        " ",
+        e ? /* @__PURE__ */ r("span", { children: e }) : null
+      ] }),
+      /* @__PURE__ */ r("dd", { className: `${a}__value`, children: n })
+    ] });
+  }
+);
+N.displayName = "Detail";
 export {
-  f as default
+  N as default
 };

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

@@ -8,6 +8,7 @@ export declare const Playground: {
     (props: DetailProps): import("react/jsx-runtime").JSX.Element;
     args: {
         label: string;
+        subLabel: string;
         value: import("react/jsx-runtime").JSX.Element;
     };
     argTypes: {};

package/dist/components/SeldonImage/SeldonImage.js

@@ -1,17 +1,18 @@
-import { jsxs as S, jsx as l } from "react/jsx-runtime";
-import { forwardRef as h, useRef as y, useState as E, useCallback as v, useEffect as w } from "react";
-import { getCommonProps as x } from "../../utils/index.js";
-import m from "../../node_modules/classnames/index.js";
-function C(i) {
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import { forwardRef as I, useRef as v, useState as y, useCallback as E, useEffect as P } from "react";
+import d from "../../node_modules/classnames/index.js";
+import { getCommonProps as w } from "../../utils/index.js";
+import x from "../../assets/PhillipsLogo.svg.js";
+function C(s) {
   return new Promise((a) => {
     const r = document.createElement("img");
-    r.onerror = () => a(!1), r.onload = () => a(!0), r.src = i;
+    r.onerror = () => a(!1), r.onload = () => a(!0), r.src = s;
   });
 }
-const P = h(
+const L = I(
   ({
-    className: i,
-    aspectRatio: d = "none",
+    className: s,
+    aspectRatio: m = "none",
     objectFit: a = "none",
     hasBlurBackground: r = !1,
     imageClassName: u,
@@ -20,20 +21,20 @@ const P = h(
     alt: t,
     errorText: p = "Error loading image",
     ...g
-  }, N) => {
-    const { className: e, ...c } = x(g, "SeldonImage"), b = y(null), [o, s] = E("loading"), f = v(async () => {
-      const I = await C(n);
-      s(I ? "loaded" : "error");
+  }, b) => {
+    const { className: e, ...c } = w(g, "SeldonImage"), N = v(null), [o, i] = y("loading"), f = E(async () => {
+      const S = await C(n);
+      i(S ? "loaded" : "error");
     }, [n]);
-    return w(() => {
+    return P(() => {
       f();
-    }, [f]), /* @__PURE__ */ S(
+    }, [f]), /* @__PURE__ */ h(
       "div",
       {
-        ref: N,
-        className: m(e, i, {
+        ref: b,
+        className: d(e, s, {
           [`${e}--hidden`]: o === "loading" || o === "error",
-          [`${e}--aspect-ratio-${d.replace("/", "-")}`]: d !== "none"
+          [`${e}--aspect-ratio-${m.replace("/", "-")}`]: m !== "none"
         }),
         role: "img",
         "aria-label": t,
@@ -43,17 +44,17 @@ const P = h(
           r && /* @__PURE__ */ l(
             "div",
             {
-              className: m(`${e}-blur`, {
+              className: d(`${e}-blur`, {
                 [`${e}-blur--hidden`]: o === "loading" || o === "error"
               }),
               style: { backgroundImage: `url(${n})` }
             }
           ),
-          o === "error" && /* @__PURE__ */ l("div", { className: `${e}--error`, children: `${p}` }),
+          o === "error" ? /* @__PURE__ */ l("div", { className: `${e}--error`, children: /* @__PURE__ */ l(x, { "aria-label": p }) }) : null,
           /* @__PURE__ */ l(
             "img",
             {
-              className: m(`${e}-img`, u, {
+              className: d(`${e}-img`, u, {
                 [`${e}-img--hidden`]: o !== "loaded",
                 [`${e}-img--object-fit-${a}`]: a !== "none"
               }),
@@ -61,12 +62,12 @@ const P = h(
               src: n,
               alt: t,
               "data-testid": `${c["data-testid"]}-img`,
-              ref: b,
+              ref: N,
               onLoad: () => {
-                s("loaded");
+                i("loaded");
               },
               onError: () => {
-                s("error");
+                i("error");
               }
             }
           )
@@ -75,7 +76,7 @@ const P = h(
     );
   }
 );
-P.displayName = "SeldonImage";
+L.displayName = "SeldonImage";
 export {
-  P as default
+  L as default
 };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './assets/icons';
 export { default as Page } from './pages/Page';
 export * from './utils/hooks';
 export * from './providers/SeldonProvider/utils';
+export * from './types/commonTypes';
 export { default as Button, type ButtonProps } from './components/Button/Button';
 export { ButtonVariants } from './components/Button/types';
 export { default as IconButton } from './components/IconButton/IconButton';
@@ -58,3 +59,5 @@ export * from './components/SeldonImage';
 export * from './patterns/SaleHeaderBanner';
 export * from './components/Countdown';
 export * from './components/Countdown/types';
+export * from './patterns/ObjectTile';
+export * from './patterns/BidSnapshot';