@phillips/seldon 1.132.1 → 1.133.0

package/dist/components/SeldonImage/SeldonImage.js

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

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

@@ -0,0 +1,6 @@
+export declare function isImageValid({ img, src, srcSet, sizes, }: {
+    img: HTMLImageElement | null;
+    src: string;
+    srcSet?: string;
+    sizes?: string;
+}): Promise<unknown>;

package/dist/components/SeldonImage/utils.js

@@ -0,0 +1,14 @@
+function c({
+  img: m,
+  src: n,
+  srcSet: t,
+  sizes: r
+}) {
+  return new Promise((i) => {
+    let e = m;
+    e || (e = document.createElement("img")), e.onerror = () => i(!1), e.onload = () => i(!0), t && (e.srcset = t), r && (e.sizes = r), e.src = n, e.complete && i(!0);
+  });
+}
+export {
+  c as isImageValid
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/components/Select/Select.js

@@ -1,10 +1,10 @@
 import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import * as k from "react";
-import n from "../../node_modules/classnames/index.js";
-import { px as e, useNormalizedInputProps as z } from "../../utils/index.js";
+import * as z from "react";
+import a from "../../node_modules/classnames/index.js";
+import { px as e, useNormalizedInputProps as D } from "../../utils/index.js";
 import { SelectVariants as c } from "./types.js";
-import D from "../../assets/chevronDown.svg.js";
-const F = k.forwardRef(
+import F from "../Icon/Icon.js";
+const I = z.forwardRef(
   ({
     children: d,
     className: i,
@@ -16,8 +16,8 @@ const F = k.forwardRef(
     variant: _ = c.default,
     inline: f,
     invalid: b,
-    invalidText: v,
-    labelText: h,
+    invalidText: h,
+    labelText: v,
     onChange: w,
     onClick: V,
     readOnly: r,
@@ -27,25 +27,25 @@ const F = k.forwardRef(
     warnText: N,
     ...S
   }, j) => {
-    const o = "select", a = z({
+    const o = "select", n = D({
       disabled: u,
       id: t,
       invalid: b,
-      invalidText: v,
+      invalidText: h,
       readOnly: r,
       type: o,
       warn: y,
       warnText: N
-    }), P = n(`${e}-${o}-input`, `${e}-input`, `${e}-input--${C}`, {
+    }), P = a(`${e}-${o}-input`, `${e}-input`, `${e}-input--${C}`, {
       [`${e}-input--inline`]: f,
       [`${e}-input--readonly`]: r,
-      [`${e}-input--disabled`]: a.disabled,
-      [`${e}-input--invalid`]: a.invalid,
-      [`${e}-input--warn`]: a.warn,
+      [`${e}-input--disabled`]: n.disabled,
+      [`${e}-input--invalid`]: n.invalid,
+      [`${e}-input--warn`]: n.warn,
       [`${i}__wrapper`]: i
-    }), R = n(i, `${e}-input__input`, {
+    }), R = a(i, `${e}-input__input`, {
       [`${e}-input__select--tertiary`]: _ === c.tertiary
-    }), g = n(`${e}-select-container`, {
+    }), k = a(`${e}-select-container`, {
       [`${e}-select-container--show__icon`]: l
     });
     return /* @__PURE__ */ p("div", { className: P, children: [
@@ -54,18 +54,18 @@ const F = k.forwardRef(
         {
           "data-testid": `${t}-label`,
           htmlFor: t,
-          className: n(`${e}-input__label`, { [`${e}-input__label--hidden`]: $ }),
-          children: h
+          className: a(`${e}-input__label`, { [`${e}-input__label--hidden`]: $ }),
+          children: v
         }
       ),
-      /* @__PURE__ */ p("div", { className: g, children: [
+      /* @__PURE__ */ p("div", { className: k, children: [
         /* @__PURE__ */ s(
           "select",
           {
             className: R,
             "data-testid": t,
             defaultValue: m,
-            disabled: a.disabled,
+            disabled: n.disabled,
             id: t,
             onChange: w,
             ref: j,
@@ -74,13 +74,13 @@ const F = k.forwardRef(
             children: d
           }
         ),
-        l ? /* @__PURE__ */ s(D, {}) : null
+        l ? /* @__PURE__ */ s(F, { icon: "ChevronDown" }) : null
       ] }),
-      a.validation
+      n.validation
     ] });
   }
 );
-F.displayName = "Select";
+I.displayName = "Select";
 export {
-  F as default
+  I as default
 };

package/dist/components/Tags/Tags.js

@@ -1,48 +1,47 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import v, { forwardRef as N } from "react";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import N, { forwardRef as y } from "react";
 import d from "../../node_modules/classnames/index.js";
-import { getCommonProps as y, px as r } from "../../utils/index.js";
+import { getCommonProps as b, px as r } from "../../utils/index.js";
 import $ from "../Button/Button.js";
-import { ButtonVariants as p } from "../Button/types.js";
-import b from "../../assets/close.svg.js";
-import C from "../../assets/arrowPrev.svg.js";
-const w = ({ id: i, className: a, onRemove: o, label: s, removeText: e = "Remove" }) => /* @__PURE__ */ l(
+import { ButtonVariants as g } from "../Button/types.js";
+import p from "../Icon/Icon.js";
+const R = ({ id: o, className: a, onRemove: i, label: s, removeText: e = "Remove" }) => /* @__PURE__ */ m(
   $,
   {
     className: d(`${r}-tag`, `${r}-button`, a),
     "aria-label": `${e} ${s}`,
-    onClick: () => o(s),
-    variant: p.tertiary,
+    onClick: () => i(s),
+    variant: g.tertiary,
     children: [
       /* @__PURE__ */ t("div", { className: `${r}-tag__label`, children: s }),
-      /* @__PURE__ */ t("div", { className: `${r}-tag__button`, "data-testid": `${i}-item-close-button`, children: /* @__PURE__ */ t(b, {}) })
+      /* @__PURE__ */ t("div", { className: `${r}-tag__button`, "data-testid": `${o}-item-close-button`, children: /* @__PURE__ */ t(p, { icon: "Close", height: 24, width: 24 }) })
     ]
   }
-), _ = N(
-  ({ className: i, children: a, clearAllLabel: o = "Clear All", onClear: s, ...e }, f) => {
-    const m = "tags-list", { className: g, ...u } = y(e, "TagsList"), { id: n } = e;
-    return /* @__PURE__ */ l(
+), v = y(
+  ({ className: o, children: a, clearAllLabel: i = "Clear All", onClear: s, ...e }, f) => {
+    const l = "tags-list", { className: h, ...u } = b(e, "TagsList"), { id: n } = e;
+    return /* @__PURE__ */ m(
       "ul",
       {
-        className: d(`${r}-${m}`, g, i),
+        className: d(`${r}-${l}`, h, o),
         ...u,
         ...e,
         tabIndex: 0,
-        "data-testid": `${m}-${n}`,
+        "data-testid": `${l}-${n}`,
         ref: f,
         children: [
-          Array.isArray(a) ? v.Children.map(a, (c) => /* @__PURE__ */ t("li", { children: c }, c.props.id)) : a,
-          Array.isArray(a) && a.length > 0 && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ l(
+          Array.isArray(a) ? N.Children.map(a, (c) => /* @__PURE__ */ t("li", { children: c }, c.props.id)) : a,
+          Array.isArray(a) && a.length > 0 && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ m(
             $,
             {
               onClick: s,
               "data-testid": `${n}-clear-all-button`,
-              className: `${r}-${m}--clear`,
-              "aria-label": o,
-              variant: p.tertiary,
+              className: `${r}-${l}--clear`,
+              "aria-label": i,
+              variant: g.tertiary,
               children: [
-                /* @__PURE__ */ t(C, {}),
-                /* @__PURE__ */ t("div", { className: `${r}-label`, children: o })
+                /* @__PURE__ */ t(p, { icon: "ArrowPrev", height: 24, width: 24 }),
+                /* @__PURE__ */ t("div", { className: `${r}-label`, children: i })
               ]
             }
           ) })
@@ -51,8 +50,8 @@ const w = ({ id: i, className: a, onRemove: o, label: s, removeText: e = "Remove
     );
   }
 );
-_.displayName = "Tags";
+v.displayName = "Tags";
 export {
-  w as Tag,
-  _ as default
+  R as Tag,
+  v as default
 };

package/dist/components/TextArea/TextArea.js

@@ -2,9 +2,9 @@ import { jsxs as f, jsx as t } from "react/jsx-runtime";
 import { forwardRef as $, useId as u } from "react";
 import l from "../../node_modules/classnames/index.js";
 import { px as r } from "../../utils/index.js";
-import N from "../../assets/menu.svg.js";
+import N from "../Icon/Icon.js";
 const _ = $(
-  ({ className: o, id: e, isSkeletonLoading: m, labelText: i, maxLength: n = 3e3, name: c, rows: d = 2, ...p }, x) => {
+  ({ className: m, id: e, isSkeletonLoading: o, labelText: n, maxLength: c = 3e3, name: i, rows: d = 2, ...p }, x) => {
     const s = `${r}-text-area`, a = u();
     return /* @__PURE__ */ f("div", { className: l(`${s}__wrapper`), children: [
       /* @__PURE__ */ t(
@@ -13,27 +13,27 @@ const _ = $(
           "data-testid": `text-area-${e ?? a}-label`,
           htmlFor: e ?? a,
           className: l(`${r}-input__label`, {
-            [`${r}-skeleton`]: m
+            [`${r}-skeleton`]: o
           }),
-          children: i
+          children: n
         }
       ),
       /* @__PURE__ */ t(
         "textarea",
         {
           ...p,
-          className: l(s, o, {
-            [`${r}-skeleton`]: m
+          className: l(s, m, {
+            [`${r}-skeleton`]: o
           }),
           id: e ?? a,
           rows: d,
-          maxLength: n,
-          name: c,
+          maxLength: c,
+          name: i,
           ref: x,
           "data-testid": `text-area-${e ?? a}-input`
         }
       ),
-      /* @__PURE__ */ t("div", { className: `${s}-resizer__icon`, children: /* @__PURE__ */ t(N, {}) })
+      /* @__PURE__ */ t("div", { className: `${s}-resizer__icon`, children: /* @__PURE__ */ t(N, { icon: "Menu" }) })
     ] });
   }
 );

package/dist/design/icons/IconGrid.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from '../../components/Icon';
+export declare const IconGrid: (props: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * from './utils';
-export * from './assets/icons';
 export { default as Page } from './pages/Page';
 export * from './utils/hooks';
 export * from './providers/SeldonProvider/utils';
@@ -66,4 +65,5 @@ export * from './components/Countdown/types';
 export * from './patterns/ObjectTile';
 export * from './patterns/BidSnapshot';
 export * from './components/Article';
+export * from './components/Icon';
 export * from './components/TextArea';