@phillips/seldon 1.226.0 → 1.227.0

package/dist/assets/formatted/ImageUnavailable.d.ts

@@ -0,0 +1,9 @@
+interface ImageUnavailableProps extends React.HTMLAttributes<SVGSVGElement> {
+    color?: string;
+    height?: number | string;
+    width?: number | string;
+    title?: string;
+    titleId?: string;
+}
+declare const ImageUnavailable: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<ImageUnavailableProps & import('react').RefAttributes<SVGSVGElement>>>;
+export default ImageUnavailable;

package/dist/assets/formatted/ImageUnavailable.js

@@ -0,0 +1,129 @@
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import { memo as L, forwardRef as d } from "react";
+import { kebabCase as e } from "../../node_modules/change-case/dist/index.js";
+const Z = L(
+  d((a, t) => {
+    const { height: f, width: V, title: i, titleId: c } = a, H = c || e(i || "");
+    return /* @__PURE__ */ p(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        "data-testid": "image-unavailable-logo-svg",
+        viewBox: "0 0 152 39",
+        height: f,
+        width: V,
+        role: "img",
+        ref: t,
+        "aria-labelledby": H,
+        ...a,
+        children: [
+          i ? /* @__PURE__ */ l("title", { id: H, children: i }) : null,
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M140.525 38.3158V24.4905H151.901V26.6631H142.796V30.2182H151.605V32.3907H142.796V36.1433H152V38.3158H140.525Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l("path", { d: "M126.673 38.3158V24.4905H128.944V36.1433H138.148V38.3158H126.673Z", fill: "black", fillOpacity: "0.25" }),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M111.504 38.3158V24.4905H119.483C122.268 24.4905 123.858 26.0113 123.858 28.332C123.858 29.7046 123.167 30.7218 121.903 31.2551C123.423 31.7587 124.253 32.8647 124.253 34.3855C124.253 36.7654 122.624 38.3158 119.76 38.3158H111.504ZM119.582 36.1433C121.083 36.1433 121.922 35.4422 121.922 34.267C121.922 33.0919 121.083 32.3907 119.582 32.3907H113.775V36.1433H119.582ZM119.325 30.2182C120.737 30.2182 121.527 29.5565 121.527 28.4505C121.527 27.3346 120.737 26.673 119.325 26.673H113.775V30.2182H119.325Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M96.2529 38.3257H93.8137L100.608 24.4905H102.928L109.733 38.3257H107.175L105.832 35.5607H97.5959L96.2529 38.3257ZM98.6624 33.3881H104.765L101.714 27.1173L98.6624 33.3881Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l("path", { d: "M80.9439 38.3158V24.4905H83.2152V36.1433H92.4189V38.3158H80.9439Z", fill: "black", fillOpacity: "0.25" }),
+          /* @__PURE__ */ l("path", { d: "M75.7189 38.3158V24.4905H77.9902V38.3158H75.7189Z", fill: "black", fillOpacity: "0.25" }),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M60.4677 38.3257H58.0286L64.8227 24.4905H67.1434L73.9474 38.3257H71.3897L70.0467 35.5607H61.8108L60.4677 38.3257ZM62.8773 33.3881H68.9802L65.9287 27.1173L62.8773 33.3881Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M51.5878 38.3158L44.7838 24.4905H47.3415L52.8025 35.7088L58.2635 24.4905H60.7027L53.9085 38.3158H51.5878Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M33.9782 38.3257H31.5391L38.3332 24.4905H40.6539L47.4579 38.3257H44.9002L43.5572 35.5607H35.3213L33.9782 38.3257ZM36.3878 33.3881H42.4907L39.4392 27.1173L36.3878 33.3881Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M15.9352 38.3158V24.4905H18.8978L27.5386 35.6693V24.4905H29.7606V38.3158H26.798L18.1572 27.3247V38.3158H15.9352Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M6.54727 38.6121C2.52806 38.6121 0 36.1927 0 31.9364V24.4905H2.2713V31.9364C2.2713 34.8299 3.84146 36.4395 6.58677 36.4395C9.32221 36.4395 10.8726 34.8299 10.8726 31.9364V24.4905H13.0945V31.9364C13.0945 36.1927 10.5764 38.6121 6.54727 38.6121Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M96.5378 14.1216V0.29625H107.914V2.4688H98.8092V6.02388H107.618V8.19643H98.8092V11.949H108.013V14.1216H96.5378Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M86.9994 14.4178C82.4074 14.4178 79.198 11.3269 79.198 7.20891C79.198 3.09094 82.4272 0 86.9994 0C89.3892 0 91.1964 0.720891 93.1517 2.18242L91.8086 4.00934C90.1496 2.66631 88.8856 2.17255 86.9994 2.17255C83.8196 2.17255 81.5285 4.33522 81.5285 7.20891C81.5285 10.0826 83.8196 12.2453 86.9994 12.2453C89.6559 12.2453 91.4531 11.0109 91.7099 8.78894H86.1699V6.6164H94.0701V7.97918C94.0701 11.7021 91.542 14.4178 86.9994 14.4178Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M65.1662 14.1314H62.727L69.5211 0.29625H71.8418L78.6459 14.1314H76.0882L74.7451 11.3664H66.5092L65.1662 14.1314ZM67.5757 9.19382H73.6786L70.6272 2.92306L67.5757 9.19382Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "path",
+            {
+              d: "M44.5917 0.29625H48.1369L52.7783 11.4849L57.4295 0.29625H60.9549V14.1216H58.6836V2.92306L54.0225 14.1216H51.4056L46.7642 2.93293V14.1216H44.5917V0.29625Z",
+              fill: "black",
+              fillOpacity: "0.25"
+            }
+          ),
+          /* @__PURE__ */ l("path", { d: "M39.3667 14.1216V0.29625H41.638V14.1216H39.3667Z", fill: "black", fillOpacity: "0.25" })
+        ]
+      }
+    );
+  })
+);
+export {
+  Z as default
+};

package/dist/assets/formatted/PhillipsLogo.js

@@ -1,38 +1,38 @@
-import { jsxs as d, jsx as h } from "react/jsx-runtime";
-import { memo as a, forwardRef as c } from "react";
-import { kebabCase as v } from "../../node_modules/change-case/dist/index.js";
-const f = a(
-  c((i, e) => {
-    const { height: o, width: s, title: l, titleId: r } = i, t = r || v(l || "");
-    return /* @__PURE__ */ d(
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import { memo as p, forwardRef as v } from "react";
+import { kebabCase as g } from "../../node_modules/change-case/dist/index.js";
+const V = p(
+  v((o, t) => {
+    const { height: e, width: s, title: h, titleId: r, color: d, ...a } = o, i = r || g(h || "");
+    return /* @__PURE__ */ c(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         fill: "none",
         "data-testid": "header-logo-svg",
         viewBox: "0 0 131 18",
-        height: o,
+        height: e,
         width: s,
         role: "img",
-        ref: e,
-        "aria-labelledby": t,
-        ...i,
+        ref: t,
+        "aria-labelledby": i,
+        ...a,
         children: [
-          l ? /* @__PURE__ */ h("title", { id: t, children: l }) : null,
-          /* @__PURE__ */ h("g", { clipPath: "url(#PhillipsLogo_svg__a)", children: /* @__PURE__ */ h(
+          h ? /* @__PURE__ */ l("title", { id: i, children: h }) : null,
+          /* @__PURE__ */ l("g", { clipPath: "url(#PhillipsLogo_svg__a)", children: /* @__PURE__ */ l(
             "path",
             {
-              fill: "#000",
+              fill: d ?? "#000",
               d: "M54.817.274h-2.195v13.452H63.75v-2.118h-8.933zm-13.5 13.453h2.195V.274h-2.195zM21.276.274h-2.155v13.452h2.136V8.862h8.796v4.864h2.155V.274h-2.155v6.53h-8.796zm66.572 13.453h2.195V.274h-2.195zm30.382-3.325-.741 1.982c1.725.981 4.664 1.616 6.741 1.616 3.84 0 6.25-1.509 6.25-4.157 0-3.117-2.959-3.667-6.171-3.98-2.057-.197-4.213-.353-4.213-1.843 0-1.158 1.039-1.902 3.802-1.902 1.645 0 3.546.372 5.133 1.04l.685-2.001C127.953.392 125.817 0 123.936 0c-3.878 0-6.073 1.529-6.073 4.02 0 3.137 2.998 3.686 6.171 3.98 2.057.196 4.193.373 4.193 1.844 0 1.196-1.077 2.039-3.977 2.039-1.783 0-4.246-.534-6.02-1.481M72.43.274h-2.194v13.452h11.128v-2.118H72.43zm34.246 0h-7.504v13.452h2.195V9.274h5.309c3.135 0 4.938-1.882 4.938-4.51 0-2.607-1.764-4.49-4.938-4.49m-.255 6.883h-5.054V2.392h5.054c1.9 0 2.958.882 2.958 2.373.001 1.49-1.018 2.392-2.958 2.392M7.503.274H0v13.452h2.194V9.274h5.31c3.134 0 4.936-1.882 4.936-4.51 0-2.607-1.762-4.49-4.937-4.49M7.25 7.157H2.194V2.392H7.25c1.9 0 2.958.882 2.958 2.373 0 1.49-1.019 2.392-2.958 2.392",
               className: "PhillipsLogo_svg__phillips-logo"
             }
           ) }),
-          /* @__PURE__ */ h("defs", { children: /* @__PURE__ */ h("clipPath", { id: "PhillipsLogo_svg__a", children: /* @__PURE__ */ h("path", { fill: "#fff", d: "M0 0h130.667v14H0z" }) }) })
+          /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ l("clipPath", { id: "PhillipsLogo_svg__a", children: /* @__PURE__ */ l("path", { fill: "#fff", d: "M0 0h130.667v14H0z" }) }) })
         ]
       }
     );
   })
 );
 export {
-  f as default
+  V as default
 };

package/dist/assets/formatted/index.d.ts

@@ -51,6 +51,7 @@ export { default as IconGreenCircle } from './IconGreenCircle';
 export { default as IconBlueCircle } from './IconBlueCircle';
 export { default as IconRedCircle } from './IconRedCircle';
 export { default as Icon } from './Icon';
+export { default as ImageUnavailable } from './ImageUnavailable';
 export { default as Instagram } from './Instagram';
 export { default as LinkedIn } from './LinkedIn';
 export { default as List } from './List';

package/dist/assets/formatted/index.js

@@ -8,15 +8,15 @@ import { default as n } from "./AdminTelephone.js";
 import { default as A } from "./AdminPlay.js";
 import { default as h } from "./AdminFullscreen.js";
 import { default as w } from "./AdminFullscreenExit.js";
-import { default as S } from "./AdminCheck.js";
+import { default as g } from "./AdminCheck.js";
 import { default as F } from "./AdminChevronLeft.js";
 import { default as P } from "./AdminChevronRight.js";
 import { default as k } from "./AdminChevronUp.js";
 import { default as M } from "./AdminClose.js";
-import { default as D } from "./AdminHome.js";
-import { default as U } from "./AdminPencil.js";
-import { default as B } from "./AdminSearch.js";
-import { default as b } from "./AppleAppStoreBadge.js";
+import { default as U } from "./AdminHome.js";
+import { default as H } from "./AdminPencil.js";
+import { default as b } from "./AdminSearch.js";
+import { default as T } from "./AppleAppStoreBadge.js";
 import { default as X } from "./ArrowDown.js";
 import { default as O } from "./ArrowLeft.js";
 import { default as j } from "./ArrowRight.js";
@@ -35,15 +35,15 @@ import { default as ne } from "./Edit.js";
 import { default as Ae } from "./Email.js";
 import { default as he } from "./Error.js";
 import { default as we } from "./ExternalLink.js";
-import { default as Se } from "./Facebook.js";
+import { default as ge } from "./Facebook.js";
 import { default as Fe } from "./FavoriteActive.js";
 import { default as Pe } from "./Favorite.js";
 import { default as ke } from "./Filters.js";
 import { default as Me } from "./Fullscreen.js";
-import { default as De } from "./FullscreenExit.js";
-import { default as Ue } from "./GavelActive.js";
-import { default as Be } from "./Gavel.js";
-import { default as be } from "./Grid.js";
+import { default as Ue } from "./FullscreenExit.js";
+import { default as He } from "./GavelActive.js";
+import { default as be } from "./Gavel.js";
+import { default as Te } from "./Grid.js";
 import { default as Xe } from "./Hide.js";
 import { default as Oe } from "./HomeActive.js";
 import { default as je } from "./Home.js";
@@ -51,40 +51,41 @@ import { default as ze } from "./IconGreenCircle.js";
 import { default as Ke } from "./IconBlueCircle.js";
 import { default as Ye } from "./IconRedCircle.js";
 import { default as _e } from "./Icon.js";
-import { default as eo } from "./Instagram.js";
-import { default as ro } from "./LinkedIn.js";
-import { default as ao } from "./List.js";
-import { default as lo } from "./Lock.js";
-import { default as uo } from "./MagnificentSeven.js";
-import { default as po } from "./Menu.js";
-import { default as io } from "./Mute.js";
-import { default as co } from "./Pause.js";
-import { default as vo } from "./PhillipsAppIcon.js";
-import { default as Co } from "./PhillipsLogo.js";
-import { default as Lo } from "./Play.js";
-import { default as go } from "./Red.js";
-import { default as Io } from "./Refresh.js";
-import { default as Ro } from "./Search.js";
-import { default as Eo } from "./SellActive.js";
-import { default as Go } from "./Sell.js";
-import { default as Ho } from "./Share.js";
-import { default as Vo } from "./Subtract.js";
-import { default as To } from "./Success.js";
-import { default as yo } from "./Tooltip.js";
-import { default as No } from "./TwitterX.js";
-import { default as Wo } from "./Upload.js";
-import { default as qo } from "./View.js";
-import { default as Jo } from "./VolumeMaximum.js";
-import { default as Qo } from "./VolumeMid.js";
-import { default as Zo } from "./VolumeMinimum.js";
-import { default as $o } from "./WeChat.js";
-import { default as or } from "./Clock.js";
-import { default as tr } from "./LiveNow.js";
+import { default as eo } from "./ImageUnavailable.js";
+import { default as ro } from "./Instagram.js";
+import { default as ao } from "./LinkedIn.js";
+import { default as lo } from "./List.js";
+import { default as uo } from "./Lock.js";
+import { default as po } from "./MagnificentSeven.js";
+import { default as io } from "./Menu.js";
+import { default as co } from "./Mute.js";
+import { default as vo } from "./Pause.js";
+import { default as Co } from "./PhillipsAppIcon.js";
+import { default as Lo } from "./PhillipsLogo.js";
+import { default as So } from "./Play.js";
+import { default as Io } from "./Red.js";
+import { default as Ro } from "./Refresh.js";
+import { default as Eo } from "./Search.js";
+import { default as Go } from "./SellActive.js";
+import { default as Do } from "./Sell.js";
+import { default as Vo } from "./Share.js";
+import { default as Bo } from "./Subtract.js";
+import { default as yo } from "./Success.js";
+import { default as No } from "./Tooltip.js";
+import { default as Wo } from "./TwitterX.js";
+import { default as qo } from "./Upload.js";
+import { default as Jo } from "./View.js";
+import { default as Qo } from "./VolumeMaximum.js";
+import { default as Zo } from "./VolumeMid.js";
+import { default as $o } from "./VolumeMinimum.js";
+import { default as or } from "./WeChat.js";
+import { default as tr } from "./Clock.js";
+import { default as fr } from "./LiveNow.js";
 export {
   a as Account,
   r as AccountActive,
   l as Add,
-  S as AdminCheck,
+  g as AdminCheck,
   F as AdminChevronLeft,
   P as AdminChevronRight,
   k as AdminChevronUp,
@@ -92,14 +93,14 @@ export {
   h as AdminFullscreen,
   w as AdminFullscreenExit,
   m as AdminGavel,
-  D as AdminHome,
+  U as AdminHome,
   s as AdminLiveOnline,
-  U as AdminPencil,
+  H as AdminPencil,
   x as AdminPerson,
   A as AdminPlay,
-  B as AdminSearch,
+  b as AdminSearch,
   n as AdminTelephone,
-  b as AppleAppStoreBadge,
+  T as AppleAppStoreBadge,
   X as ArrowDown,
   O as ArrowLeft,
   j as ArrowRight,
@@ -110,7 +111,7 @@ export {
   ee as ChevronLeft,
   re as ChevronRight,
   ae as ChevronUp,
-  or as Clock,
+  tr as Clock,
   le as CloseX,
   me as ConditionReport,
   se as Delete,
@@ -119,15 +120,15 @@ export {
   Ae as Email,
   he as Error,
   we as ExternalLink,
-  Se as Facebook,
+  ge as Facebook,
   Pe as Favorite,
   Fe as FavoriteActive,
   ke as Filters,
   Me as Fullscreen,
-  De as FullscreenExit,
-  Be as Gavel,
-  Ue as GavelActive,
-  be as Grid,
+  Ue as FullscreenExit,
+  be as Gavel,
+  He as GavelActive,
+  Te as Grid,
   Xe as Hide,
   je as Home,
   Oe as HomeActive,
@@ -135,32 +136,33 @@ export {
   Ke as IconBlueCircle,
   ze as IconGreenCircle,
   Ye as IconRedCircle,
-  eo as Instagram,
-  ro as LinkedIn,
-  ao as List,
-  tr as LiveNow,
-  lo as Lock,
-  uo as MagnificentSeven,
-  po as Menu,
-  io as Mute,
-  co as Pause,
-  vo as PhillipsAppIcon,
-  Co as PhillipsLogo,
-  Lo as Play,
-  go as Red,
-  Io as Refresh,
-  Ro as Search,
-  Go as Sell,
-  Eo as SellActive,
-  Ho as Share,
-  Vo as Subtract,
-  To as Success,
-  yo as Tooltip,
-  No as TwitterX,
-  Wo as Upload,
-  qo as View,
-  Jo as VolumeMaximum,
-  Qo as VolumeMid,
-  Zo as VolumeMinimum,
-  $o as WeChat
+  eo as ImageUnavailable,
+  ro as Instagram,
+  ao as LinkedIn,
+  lo as List,
+  fr as LiveNow,
+  uo as Lock,
+  po as MagnificentSeven,
+  io as Menu,
+  co as Mute,
+  vo as Pause,
+  Co as PhillipsAppIcon,
+  Lo as PhillipsLogo,
+  So as Play,
+  Io as Red,
+  Ro as Refresh,
+  Eo as Search,
+  Do as Sell,
+  Go as SellActive,
+  Vo as Share,
+  Bo as Subtract,
+  yo as Success,
+  No as Tooltip,
+  Wo as TwitterX,
+  qo as Upload,
+  Jo as View,
+  Qo as VolumeMaximum,
+  Zo as VolumeMid,
+  $o as VolumeMinimum,
+  or as WeChat
 };

package/dist/components/ComboBox/ComboBox.js

@@ -57,6 +57,7 @@ import "../../assets/formatted/IconGreenCircle.js";
 import "../../assets/formatted/IconBlueCircle.js";
 import "../../assets/formatted/IconRedCircle.js";
 import "../../assets/formatted/Icon.js";
+import "../../assets/formatted/ImageUnavailable.js";
 import "../../assets/formatted/Instagram.js";
 import "../../assets/formatted/LinkedIn.js";
 import "../../assets/formatted/List.js";

package/dist/components/SeldonImage/SeldonImage.d.ts

@@ -49,6 +49,10 @@ export interface SeldonImageProps extends ComponentProps<'div'> {
      * The text to display when the image fails to load.
      */
     errorText?: string;
+    /**
+     * Whether the image is blocked and should display ImageUnavailable instead of PhillipsLogo.
+     */
+    imageBlocked?: boolean;
 }
 /**
  * ## Overview

package/dist/components/SeldonImage/SeldonImage.js

@@ -1,92 +1,92 @@
-import { jsxs as w, jsx as l } from "react/jsx-runtime";
-import { memo as L, forwardRef as C, useRef as S, useState as T, useCallback as V, useEffect as j } from "react";
-import d from "../../node_modules/classnames/index.js";
-import { getCommonProps as k } from "../../utils/index.js";
-import { TextVariants as M } from "../Text/types.js";
-import P from "../Text/Text.js";
-import { isImageValid as R } from "./utils.js";
-const B = typeof window > "u", H = L(
-  C(
+import { jsxs as C, jsx as l } from "react/jsx-runtime";
+import { memo as P, forwardRef as S, useRef as j, useState as R, useCallback as U, useEffect as V } from "react";
+import s from "../../node_modules/classnames/index.js";
+import { getCommonProps as H } from "../../utils/index.js";
+import I from "../Icon/Icon.js";
+import { isImageValid as M } from "./utils.js";
+const T = typeof window > "u", q = P(
+  S(
     ({
-      className: I,
-      aspectRatio: s = "none",
-      objectFit: g = "none",
-      hasBlurBackground: y = !1,
-      imageClassName: N,
-      imageStyle: b,
+      className: h,
+      aspectRatio: g = "none",
+      objectFit: f = "none",
+      hasBlurBackground: v = !1,
+      imageClassName: y,
+      imageStyle: N,
       src: a,
-      alt: f,
+      alt: c,
       srcSet: o,
       sizes: r,
-      loading: h,
-      fetchPriority: v,
-      errorText: x = "Image Unavailable",
-      ...c
-    }, E) => {
-      const { className: e, ...u } = k(c, "SeldonImage"), p = S(null), [n, i] = T(() => {
-        if (B)
+      loading: E,
+      fetchPriority: L,
+      errorText: w = "Error loading image",
+      imageBlocked: n = !1,
+      ...u
+    }, x) => {
+      const { className: e, ...$ } = H(u, "SeldonImage"), p = j(null), [i, m] = R(() => {
+        if (T)
           return "loading";
         const t = document.getElementById(a);
         if (t instanceof HTMLImageElement && !t.classList.contains(`${e}-img--hidden`))
           return "loaded";
-        const m = document.createElement("img");
-        return o && (m.srcset = o), r && (m.sizes = r), m.src = a, m.complete ? "loaded" : "loading";
-      }), $ = V(async () => {
-        const t = await R({
+        const d = document.createElement("img");
+        return o && (d.srcset = o), r && (d.sizes = r), d.src = a, d.complete ? "loaded" : "loading";
+      }), b = U(async () => {
+        const t = await M({
           img: p.current,
           src: a,
           srcSet: o,
           sizes: r
         });
-        i(t ? "loaded" : "error");
+        m(t ? "loaded" : "error");
       }, [a, o, r]);
-      return j(() => {
-        $();
-      }, [$]), /* @__PURE__ */ w(
+      return V(() => {
+        b();
+      }, [b]), /* @__PURE__ */ C(
         "div",
         {
-          ref: E,
-          className: d(e, I, {
-            [`${e}--aspect-ratio-${s.replace("/", "-")}`]: s !== "none",
-            [`${e}--error-image`]: n === "error"
+          ref: x,
+          className: s(e, h, {
+            [`${e}--aspect-ratio-${g.replace("/", "-")}`]: g !== "none",
+            [`${e}--error-image`]: i === "error" || n
           }),
           role: "img",
-          "aria-label": f,
-          ...c,
+          "aria-label": c,
           ...u,
+          ...$,
           children: [
-            y && /* @__PURE__ */ l(
+            v && /* @__PURE__ */ l(
               "div",
               {
-                className: d(`${e}-blur`, {
-                  [`${e}-blur--hidden`]: n === "loading" || n === "error"
+                className: s(`${e}-blur`, {
+                  [`${e}-blur--hidden`]: i === "loading" || i === "error" || n
                 }),
                 style: { backgroundImage: `url(${a})` }
               }
             ),
-            n === "error" ? /* @__PURE__ */ l("div", { className: `${e}--error`, children: /* @__PURE__ */ l(P, { variant: M.displayMedium, className: `${e}--error-text`, children: x }) }) : null,
+            i === "error" || n ? /* @__PURE__ */ l("div", { className: `${e}--error`, children: n ? /* @__PURE__ */ l(I, { icon: "ImageUnavailable", "aria-label": "Image Unavailable", role: "img" }) : /* @__PURE__ */ l(I, { icon: "PhillipsLogo", "aria-label": w, role: "img", color: "$black-25" }) }) : null,
             /* @__PURE__ */ l(
               "img",
               {
-                className: d(`${e}-img`, N, {
-                  [`${e}-img--hidden`]: n === "error",
-                  [`${e}-img--object-fit-${g}`]: g !== "none"
+                className: s(`${e}-img`, y, {
+                  [`${e}-img--hidden`]: i === "error" || n,
+                  [`${e}-img--object-fit-${f}`]: f !== "none"
                 }),
                 id: a,
-                style: b,
+                style: N,
                 src: a,
                 srcSet: o,
                 sizes: r,
-                alt: f,
-                "data-testid": `${u["data-testid"]}-img`,
+                alt: c,
+                "data-testid": `${$["data-testid"]}-img`,
                 ref: p,
-                loading: h,
-                fetchpriority: v,
+                loading: E,
+                fetchpriority: L,
                 onLoad: () => {
-                  i("loaded");
+                  m("loaded");
                 },
                 onError: () => {
-                  i("error");
+                  m("error");
                 }
               }
             )
@@ -96,7 +96,7 @@ const B = typeof window > "u", H = L(
     }
   )
 );
-H.displayName = "SeldonImage";
+q.displayName = "SeldonImage";
 export {
-  H as default
+  q as default
 };

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

@@ -43,3 +43,13 @@ export declare const BrokenImage: {
     };
     argTypes: {};
 };
+export declare const ImageBlocked: {
+    (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
+    args: {
+        src: string;
+        aspectRatio: string;
+        objectFit: string;
+        imageBlocked: boolean;
+    };
+    argTypes: {};
+};

package/dist/patterns/ObjectTile/ObjectTile.d.ts

@@ -49,9 +49,13 @@ export interface ObjectTileProps extends ComponentProps<'a'> {
      */
     imageLoading?: ComponentProps<'img'>['loading'];
     /**
-     * Image fetch priority. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-fetchpriority]
+     * Image fetch priority. [https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority]
      */
     imageFetchPriority?: ComponentProps<'img'>['fetchPriority'];
+    /**
+     * Whether the image is blocked and should display ImageUnavailable instead of PhillipsLogo.
+     */
+    imageBlocked?: boolean;
     /**
      * Object Lot number.
      */

package/dist/patterns/ObjectTile/ObjectTile.js

@@ -1,15 +1,15 @@
-import { jsxs as m, jsx as e, Fragment as V } from "react/jsx-runtime";
-import { memo as k, forwardRef as z } from "react";
-import F from "../../node_modules/classnames/index.js";
-import { getCommonProps as I } from "../../utils/index.js";
+import { jsxs as m, jsx as e, Fragment as k } from "react/jsx-runtime";
+import { memo as z, forwardRef as F } from "react";
+import I from "../../node_modules/classnames/index.js";
+import { getCommonProps as L } from "../../utils/index.js";
 import { TextVariants as l } from "../../components/Text/types.js";
 import s from "../../components/Text/Text.js";
-import L from "../DetailList/DetailList.js";
-import R from "../../components/Detail/Detail.js";
-import { DetailVariants as W } from "../../components/Detail/types.js";
-import w from "../../components/SeldonImage/SeldonImage.js";
-const A = k(
-  z(
+import R from "../DetailList/DetailList.js";
+import W from "../../components/Detail/Detail.js";
+import { DetailVariants as w } from "../../components/Detail/types.js";
+import A from "../../components/SeldonImage/SeldonImage.js";
+const B = z(
+  F(
     ({
       badgeText: N,
       className: f,
@@ -26,18 +26,19 @@ const A = k(
       imageSizes: j,
       imageLoading: E,
       imageFetchPriority: y,
-      lotNumber: P,
+      imageBlocked: P,
+      lotNumber: C,
       makerText: c,
       modelText: _,
       referenceNumber: d,
       titleText: h,
       withdrawnText: i,
       ...p
-    }, C) => {
-      const { className: a, ...D } = I(p, "ObjectTile"), x = b ?? "a", O = n || t;
-      return /* @__PURE__ */ m(x, { ...D, className: F(a, f), ...p, ref: C, children: [
+    }, D) => {
+      const { className: a, ...x } = L(p, "ObjectTile"), O = b ?? "a", V = n || t;
+      return /* @__PURE__ */ m(O, { ...x, className: I(a, f), ...p, ref: D, children: [
         /* @__PURE__ */ e(
-          w,
+          A,
           {
             alt: u,
             aspectRatio: "1/1",
@@ -47,16 +48,17 @@ const A = k(
             srcSet: S,
             sizes: j,
             loading: E,
-            fetchPriority: y
+            fetchPriority: y,
+            imageBlocked: P
           }
         ),
         i ? null : /* @__PURE__ */ e(s, { element: "span", className: `${a}__badge`, variant: l.labelSmall, children: N }),
         /* @__PURE__ */ m("div", { className: `${a}__lot-number-like`, children: [
-          /* @__PURE__ */ e(s, { element: "span", className: `${a}__lot-number`, variant: l.headingSmall, children: P }),
+          /* @__PURE__ */ e(s, { element: "span", className: `${a}__lot-number`, variant: l.headingSmall, children: C }),
           r && /* @__PURE__ */ e("div", { className: `${a}__lot-badge`, children: /* @__PURE__ */ e(r, {}) }),
           o && /* @__PURE__ */ e(o, {})
         ] }),
-        i ? /* @__PURE__ */ e(s, { element: "span", className: `${a}__withdrawn`, variant: l.headingSmall, children: i }) : /* @__PURE__ */ m(V, { children: [
+        i ? /* @__PURE__ */ e(s, { element: "span", className: `${a}__withdrawn`, variant: l.headingSmall, children: i }) : /* @__PURE__ */ m(k, { children: [
           /* @__PURE__ */ m("div", { className: `${a}__meta`, children: [
             c ? /* @__PURE__ */ e(s, { element: "span", className: `${a}__maker`, variant: l.headingSmall, children: c }) : null,
             h ? /* @__PURE__ */ e(s, { element: "cite", className: `${a}__title`, variant: l.headingExtraSmall, children: h }) : null,
@@ -71,14 +73,14 @@ const A = k(
             ) : null,
             _ ? /* @__PURE__ */ e(s, { className: `${a}__model`, variant: l.headingExtraSmall, element: "span", children: _ }) : null
           ] }),
-          O ? /* @__PURE__ */ e(
-            L,
+          V ? /* @__PURE__ */ e(
+            R,
             {
               hasSeparators: !0,
               className: `${a}__estimate ${a}__section`,
-              variant: W.sm,
+              variant: w.sm,
               children: /* @__PURE__ */ e(
-                R,
+                W,
                 {
                   className: `${a}__estimate__label`,
                   label: g,
@@ -94,7 +96,7 @@ const A = k(
     }
   )
 );
-A.displayName = "ObjectTile";
+B.displayName = "ObjectTile";
 export {
-  A as default
+  B as default
 };

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

@@ -78,3 +78,22 @@ export declare const SoldState: {
         modelText: string;
     };
 };
+export declare const ImageBlocked: {
+    (props: ComponentProps<typeof ObjectTile>): import("react/jsx-runtime").JSX.Element;
+    args: {
+        imageBlocked: boolean;
+        badgeText: string;
+        badgeElement: () => import("react/jsx-runtime").JSX.Element;
+        favoriteElement: () => import("react/jsx-runtime").JSX.Element;
+        estimate: string;
+        element: string;
+        children: import("react/jsx-runtime").JSX.Element;
+        href: string;
+        imageUrl: string;
+        lotNumber: string;
+        makerText: string;
+        titleText: string;
+        referenceNumber: string;
+        modelText: string;
+    };
+};

package/dist/scss/components/SeldonImage/_seldonImage.scss

@@ -19,12 +19,15 @@
       background-color: $bg-soft;
     }
 
-    &-text {
-      color: $black-50;
+    .phillips-logo {
+      fill: $medium-gray;
+    }
+
+    svg {
+      fill: $medium-gray;
       left: 50%;
+      max-width: 50%;
       position: absolute;
-      text-align: center;
-      text-transform: uppercase;
       top: 50%;
       transform: translate(-50%, -50%);
     }

package/package.json

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