@phillips/seldon 1.132.0 → 1.133.0

package/dist/assets/formatted/index.js

@@ -0,0 +1,72 @@
+import { default as r } from "./AccountCircle.js";
+import { default as a } from "./AppleAppStoreBadge.js";
+import { default as l } from "./ArrowPrev.js";
+import { default as s } from "./Calendar.js";
+import { default as d } from "./CalendarAlt.js";
+import { default as x } from "./CarouselArrowNext.js";
+import { default as c } from "./CarouselArrowPrev.js";
+import { default as C } from "./Checkmark.js";
+import { default as I } from "./ChevronDown.js";
+import { default as A } from "./ChevronNext.js";
+import { default as g } from "./ChevronRight.js";
+import { default as P } from "./Close.js";
+import { default as w } from "./Favorite.js";
+import { default as L } from "./FavoriteOutline.js";
+import { default as b } from "./IconFooterFacebook.js";
+import { default as W } from "./IconFooterInstagram.js";
+import { default as B } from "./IconFooterLinkedin.js";
+import { default as G } from "./IconFooterRed.js";
+import { default as Y } from "./IconFooterWechat.js";
+import { default as q } from "./IconGreenCircle.js";
+import { default as E } from "./IconRedCircle.js";
+import { default as J } from "./Instagram.js";
+import { default as Q } from "./Lock.js";
+import { default as U } from "./MagnificentSeven.js";
+import { default as X } from "./Menu.js";
+import { default as _ } from "./Minus.js";
+import { default as ee } from "./PhillipsAppIcon.js";
+import { default as re } from "./PhillipsLogo.js";
+import { default as ae } from "./Plus.js";
+import { default as le } from "./React.js";
+import { default as se } from "./Search.js";
+import { default as de } from "./Share.js";
+import { default as xe } from "./Spotify.js";
+import { default as ce } from "./Wechat.js";
+import { default as Ce } from "./Youtube.js";
+export {
+  r as AccountCircle,
+  a as AppleAppStoreBadge,
+  l as ArrowPrev,
+  s as Calendar,
+  d as CalendarAlt,
+  x as CarouselArrowNext,
+  c as CarouselArrowPrev,
+  C as Checkmark,
+  I as ChevronDown,
+  A as ChevronNext,
+  g as ChevronRight,
+  P as Close,
+  w as Favorite,
+  L as FavoriteOutline,
+  b as IconFooterFacebook,
+  W as IconFooterInstagram,
+  B as IconFooterLinkedin,
+  G as IconFooterRed,
+  Y as IconFooterWechat,
+  q as IconGreenCircle,
+  E as IconRedCircle,
+  J as Instagram,
+  Q as Lock,
+  U as MagnificentSeven,
+  X as Menu,
+  _ as Minus,
+  ee as PhillipsAppIcon,
+  re as PhillipsLogo,
+  ae as Plus,
+  le as React,
+  se as Search,
+  de as Share,
+  xe as Spotify,
+  ce as Wechat,
+  Ce as Youtube
+};

package/dist/components/Accordion/AccordionItem.js

@@ -1,134 +1,141 @@
-import { jsxs as _, jsx as o } from "react/jsx-runtime";
-import { Item as A, Trigger as k, Content as x } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
-import u from "../../node_modules/classnames/index.js";
+import { jsxs as A, jsx as o } from "react/jsx-runtime";
+import { Item as k, Trigger as x, Content as w } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
+import h from "../../node_modules/classnames/index.js";
 import { forwardRef as C, useRef as N, useCallback as R } from "react";
-import S from "../../assets/lock.svg.js";
-import T from "../../assets/minus.svg.js";
-import j from "../../assets/plus.svg.js";
-import { getCommonProps as w } from "../../utils/index.js";
-import { AccordionItemVariant as I } from "./types.js";
-import { getIconClasses as v } from "./utils.js";
-const y = ({
+import I from "../Icon/Icon.js";
+import { getCommonProps as T } from "../../utils/index.js";
+import { AccordionItemVariant as v } from "./types.js";
+import { getIconClasses as _ } from "./utils.js";
+const j = ({
   children: n,
   className: c,
   baseClassName: t,
-  disable: i,
+  disable: r,
   isLargeVariation: e,
-  id: r,
+  id: i,
   onOpen: d,
   onClose: l
 }) => {
-  const m = N(null), s = i, p = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    S,
+  const a = N(null), s = r, u = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    I,
     {
-      className: v(t, e, "lock"),
-      "data-testid": `${r}-lockedIcon`,
+      icon: "Lock",
+      height: 24,
+      width: 24,
+      className: _(t, e, "lock"),
+      "data-testid": `${i}-lockedIcon`,
       "aria-hidden": !0
     }
-  ) }), f = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    j,
+  ) }), p = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    I,
     {
-      className: v(t, e, "plus"),
-      "data-testid": `${r}-plusIcon`,
+      icon: "Plus",
+      height: 24,
+      width: 24,
+      className: _(t, e, "plus"),
+      "data-testid": `${i}-plusIcon`,
       "aria-hidden": !0
     }
-  ) }), g = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    T,
+  ) }), f = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    I,
     {
-      className: v(t, e, "minus"),
-      "data-testid": `${r}-minusIcon`,
+      icon: "Minus",
+      height: 24,
+      width: 24,
+      className: _(t, e, "minus"),
+      "data-testid": `${i}-minusIcon`,
       "aria-hidden": !0
     }
-  ) }), $ = R(() => {
-    m.current?.getAttribute("data-state") === "closed" ? d?.() : l?.();
+  ) }), g = R(() => {
+    a.current?.getAttribute("data-state") === "closed" ? d?.() : l?.();
   }, [d, l]);
   return /* @__PURE__ */ o(
-    k,
+    x,
     {
-      "data-disabled": i,
+      "data-disabled": r,
       asChild: !0,
-      className: u(
+      className: h(
         t,
         { [`${t}--large`]: e },
-        { [`${t}--hoverable`]: !i },
+        { [`${t}--hoverable`]: !r },
         c
       ),
-      ref: m,
-      onClick: $,
-      children: /* @__PURE__ */ _("div", { "data-testid": `${r}-trigger`, children: [
-        /* @__PURE__ */ o("div", { className: u(`${t}__text`, { [`${t}__text--lg`]: e }), children: n }),
-        s && p,
-        !s && f,
-        !s && g
+      ref: a,
+      onClick: g,
+      children: /* @__PURE__ */ A("div", { "data-testid": `${i}-trigger`, children: [
+        /* @__PURE__ */ o("div", { className: h(`${t}__text`, { [`${t}__text--lg`]: e }), children: n }),
+        s && u,
+        !s && p,
+        !s && f
       ] })
     }
   );
-}, O = ({
+}, y = ({
   children: n,
   baseClassName: c,
   disable: t,
-  hasTransition: i,
+  hasTransition: r,
   isLargeVariation: e,
-  className: r
+  className: i
 }) => t && n ? /* @__PURE__ */ o("div", { className: `${c}__content--locked`, children: n }) : /* @__PURE__ */ o(
-  x,
+  w,
   {
     asChild: !0,
-    className: u(
+    className: h(
       `${c}__content`,
       { [`${c}__content--lg`]: e },
-      { [`${c}--transition`]: i },
-      r
+      { [`${c}--transition`]: r },
+      i
     ),
     children: n
   }
-), P = C(
+), O = C(
   ({
     isLocked: n = !1,
-    variant: c = I.sm,
+    variant: c = v.sm,
     id: t,
-    label: i,
+    label: r,
     isLastItem: e,
-    hasTransition: r = !1,
+    hasTransition: i = !1,
     children: d,
     className: l,
-    transitionTimeInMs: m = 250,
+    transitionTimeInMs: a = 250,
     onOpen: s,
-    onClose: p,
-    ...f
-  }, g) => {
-    const { className: $ } = w({ id: t }, "Accordion"), h = c === I.lg, a = `${$}-item`;
-    return /* @__PURE__ */ _(
-      A,
+    onClose: u,
+    ...p
+  }, f) => {
+    const { className: g } = T({ id: t }, "Accordion"), $ = c === v.lg, m = `${g}-item`;
+    return /* @__PURE__ */ A(
+      k,
       {
         disabled: n,
         value: t,
-        style: { "--seldon-accordion-transition-time": `${m}ms` },
-        className: u(a, l, {
-          [`${a}__border-bottom`]: !e
+        style: { "--seldon-accordion-transition-time": `${a}ms` },
+        className: h(m, l, {
+          [`${m}__border-bottom`]: !e
         }),
-        ref: g,
-        ...f,
+        ref: f,
+        ...p,
         children: [
           /* @__PURE__ */ o(
-            y,
+            j,
             {
               disable: n,
-              isLargeVariation: h,
+              isLargeVariation: $,
               id: t,
-              baseClassName: `${a}-label`,
+              baseClassName: `${m}-label`,
               onOpen: s,
-              onClose: p,
-              children: i
+              onClose: u,
+              children: r
             }
           ),
           /* @__PURE__ */ o(
-            O,
+            y,
             {
               disable: n,
-              hasTransition: r,
-              isLargeVariation: h,
-              baseClassName: a,
+              hasTransition: i,
+              isLargeVariation: $,
+              baseClassName: m,
               children: /* @__PURE__ */ o("div", { className: "radix-accordion-content", children: d })
             }
           )
@@ -137,7 +144,7 @@ const y = ({
     );
   }
 );
-P.displayName = "AccordionItem";
+O.displayName = "AccordionItem";
 export {
-  P as default
+  O as default
 };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -3,38 +3,38 @@ import { getCommonProps as u, px as t } from "../../utils/index.js";
 import f from "../../node_modules/classnames/index.js";
 import p from "./BreadcrumbItem.js";
 import { SSRMediaQuery as c } from "../../providers/SeldonProvider/utils.js";
-import g from "../../assets/arrowPrev.svg.js";
-const v = ({
+import x from "../Icon/Icon.js";
+const M = ({
   className: s,
   items: a = [],
-  truncateIndex: d,
-  linkElement: l = "a",
+  truncateIndex: i,
+  linkElement: n = "a",
   ...e
 }) => {
-  const { className: m, ...i } = u(e, "Breadcrumb"), { id: b } = e;
-  return /* @__PURE__ */ h("nav", { "aria-label": "Breadcrumb", className: f(m, s), ...i, ...e, children: [
+  const { className: l, ...d } = u(e, "Breadcrumb"), { id: b } = e;
+  return /* @__PURE__ */ h("nav", { "aria-label": "Breadcrumb", className: f(l, s), ...d, ...e, children: [
     /* @__PURE__ */ r(c.Media, { lessThan: "md", children: /* @__PURE__ */ r(
-      l,
+      n,
       {
         href: a[1].href ? a[1].href : "/",
-        className: `${t}-icon-button ${t}-icon-button--primary ${m}__back-button`,
+        className: `${t}-icon-button ${t}-icon-button--primary ${l}__back-button`,
         "data-testid": `${b}-back-button`,
-        children: /* @__PURE__ */ r(g, {})
+        children: /* @__PURE__ */ r(x, { icon: "ArrowPrev" })
       }
     ) }),
-    /* @__PURE__ */ r(c.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ r("ol", { children: a.map((o, n) => /* @__PURE__ */ r(
+    /* @__PURE__ */ r(c.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ r("ol", { children: a.map((o, m) => /* @__PURE__ */ r(
       p,
       {
         href: o.href,
         label: o.label,
-        element: l,
-        isCurrent: a.length - 1 === n,
-        isTruncateText: d === n
+        element: n,
+        isCurrent: a.length - 1 === m,
+        isTruncateText: i === m
       },
       o.label
     )) }) })
   ] });
 };
 export {
-  v as default
+  M as default
 };

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -1,28 +1,28 @@
-import { jsxs as d, jsx as m } from "react/jsx-runtime";
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
 import { getCommonProps as h } from "../../utils/index.js";
-import s from "../../node_modules/classnames/index.js";
-import u from "../../assets/chevronNext.svg.js";
-const g = ({
-  className: c,
-  href: o,
+import m from "../../node_modules/classnames/index.js";
+import u from "../Icon/Icon.js";
+const b = ({
+  className: o,
+  href: s,
   label: r,
   isCurrent: a = !1,
-  isTruncateText: t = !1,
-  element: n = "a",
+  isTruncateText: n = !1,
+  element: t = "a",
   ...l
 }) => {
-  const { className: e, ...f } = h(l, "Breadcrumb"), p = a ? "page" : !1, i = a ? "" : o;
+  const { className: e, ...f } = h(l, "Breadcrumb"), p = a ? "page" : !1, i = a ? "" : s;
   return /* @__PURE__ */ d(
     "li",
     {
       "aria-label": r,
-      className: s(`${e}__item`, { [`${e}--truncate`]: t }),
+      className: m(`${e}__item`, { [`${e}--truncate`]: n }),
       children: [
-        a ? /* @__PURE__ */ m("span", { className: s(e, c, { [`${e}--current`]: a }), children: r }) : /* @__PURE__ */ m(
-          n,
+        a ? /* @__PURE__ */ c("span", { className: m(e, o, { [`${e}--current`]: a }), children: r }) : /* @__PURE__ */ c(
+          t,
           {
             "aria-current": p,
-            className: s(e, c, {
+            className: m(e, o, {
               [`${e}--current`]: a
             }),
             href: i,
@@ -30,11 +30,11 @@ const g = ({
             children: r
           }
         ),
-        a ? null : /* @__PURE__ */ m(u, { className: `${e}__chevron` })
+        a ? null : /* @__PURE__ */ c(u, { icon: "ChevronNext", className: `${e}__chevron` })
       ]
     }
   );
 };
 export {
-  g as default
+  b as default
 };

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

@@ -21,7 +21,9 @@ export declare const CarouselWithDots: {
     (props: CarouselProps & CarouselDotsProps): import("react/jsx-runtime").JSX.Element;
     args: {
         maxDots: number;
+        id: string;
     } | {
+        id: string;
         maxDots?: undefined;
     };
     argTypes: {};
@@ -30,6 +32,7 @@ export declare const CarouselWithDotsAndArrows: {
     (props: CarouselProps & CarouselDotsProps): import("react/jsx-runtime").JSX.Element;
     args: {
         maxDots: number;
+        id: string;
     };
     argTypes: {};
 };
@@ -37,6 +40,7 @@ export declare const CarouselWithDotsOverflow: {
     (props: CarouselProps & CarouselDotsProps): import("react/jsx-runtime").JSX.Element;
     args: {
         maxDots: number;
+        id: string;
     };
     argTypes: {};
 };

package/dist/components/Carousel/CarouselArrows.d.ts

@@ -3,7 +3,7 @@ export type CarouselArrowsProps = ComponentProps<'div'>;
 /**
  * ## Overview
  *
- * Arrow naivigation for the carousel.
+ * Arrow navigation for the carousel.
  *
  */
 declare const CarouselArrows: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Carousel/CarouselArrows.js

@@ -1,32 +1,31 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import u from "../../node_modules/classnames/index.js";
-import { forwardRef as d, useCallback as a } from "react";
-import { getCommonProps as p } from "../../utils/index.js";
+import { forwardRef as p, useCallback as t } from "react";
+import { getCommonProps as w } from "../../utils/index.js";
 import { useCarousel as C } from "./utils.js";
-import f from "../../assets/CarouselArrowNext.svg.js";
-import v from "../../assets/CarouselArrowPrev.svg.js";
-const w = d(({ className: t, ...s }, n) => {
-  const { className: e, ...l } = p(s, "CarouselArrows"), { api: r } = C(), i = a(() => {
+import a from "../Icon/Icon.js";
+const f = p(({ className: i, ...s }, n) => {
+  const { className: e, ...l } = w(s, "CarouselArrows"), { api: r } = C(), c = t(() => {
     r && r.scrollPrev(!0);
-  }, [r]), c = a(() => {
+  }, [r]), m = t(() => {
     r && r.scrollNext(!0);
   }, [r]);
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ d(
     "div",
     {
       ref: n,
       "aria-roledescription": "carousel-arrow-navigation",
-      className: u(`${e}`, t),
+      className: u(`${e}`, i),
       ...s,
       ...l,
       children: [
-        /* @__PURE__ */ o("button", { "data-testid": "prev-arrow", className: `${e}-prev-btn`, onClick: () => i(), children: /* @__PURE__ */ o("div", { className: `${e}-prev-btn__icon`, children: /* @__PURE__ */ o(v, {}) }) }),
-        /* @__PURE__ */ o("button", { "data-testid": "next-arrow", className: `${e}-next-btn`, onClick: () => c(), children: /* @__PURE__ */ o("div", { className: `${e}-next-btn__icon`, children: /* @__PURE__ */ o(f, {}) }) })
+        /* @__PURE__ */ o("button", { "data-testid": "prev-arrow", className: `${e}-prev-btn`, onClick: () => c(), children: /* @__PURE__ */ o("div", { className: `${e}-prev-btn__icon`, children: /* @__PURE__ */ o(a, { icon: "CarouselArrowPrev", height: 32, width: 16 }) }) }),
+        /* @__PURE__ */ o("button", { "data-testid": "next-arrow", className: `${e}-next-btn`, onClick: () => m(), children: /* @__PURE__ */ o("div", { className: `${e}-next-btn__icon`, children: /* @__PURE__ */ o(a, { icon: "CarouselArrowNext", height: 32, width: 16 }) }) })
       ]
     }
   );
 });
-w.displayName = "CarouselArrows";
+f.displayName = "CarouselArrows";
 export {
-  w as default
+  f as default
 };

package/dist/components/Carousel/CarouselDots.d.ts

@@ -1,5 +1,9 @@
 import { ComponentProps } from 'react';
 export interface CarouselDotsProps extends ComponentProps<'div'> {
+    /**
+     * A unique `id` for the `<CarouselDots>`
+     */
+    id: string;
     /**
      * The maximum number of dots to display.
      */

package/dist/components/Carousel/CarouselDots.js

@@ -1,16 +1,16 @@
 import { jsx as m } from "react/jsx-runtime";
 import E from "../../node_modules/classnames/index.js";
-import { forwardRef as G, useId as L, useState as S, useRef as M, useCallback as l, useEffect as q, useMemo as z } from "react";
-import { useCarousel as A } from "./utils.js";
-import { getCommonProps as F } from "../../utils/index.js";
-import { CarouselDot as H } from "./CarouselDot.js";
-const h = 10, C = 12, J = (h + C) / 2, K = G(
-  ({ className: N, maxDots: I = 9, position: v = "inline", numberOfSlides: V = 0, ...g }, b) => {
-    const { className: c, ...k } = F(g, "CarouselDots"), y = L(), { api: t, onSlideChange: a } = A(), [R, T] = S(0), [i, O] = S(
-      Array.from({ length: V }, (e, o) => o)
-    ), r = M(null), [D, $] = S([]), w = l((e) => {
+import { forwardRef as G, useState as S, useRef as L, useCallback as l, useEffect as M, useMemo as q } from "react";
+import { useCarousel as z } from "./utils.js";
+import { getCommonProps as A } from "../../utils/index.js";
+import { CarouselDot as F } from "./CarouselDot.js";
+const h = 10, C = 12, H = (h + C) / 2, J = G(
+  ({ className: v, maxDots: g = 9, position: V = "inline", numberOfSlides: b = 0, id: I, ...D }, k) => {
+    const { className: c, ...y } = A({ id: I, ...D }, "CarouselDots"), { api: t, onSlideChange: a } = z(), [R, T] = S(0), [i, O] = S(
+      Array.from({ length: b }, (e, o) => o)
+    ), r = L(null), [$, w] = S([]), N = l((e) => {
       r.current && r.current.scrollTo?.({
-        left: e * (h + C) - r.current.offsetWidth / 2 + J,
+        left: e * (h + C) - r.current.offsetWidth / 2 + H,
         // Center dot in container
         behavior: "smooth"
       });
@@ -23,36 +23,36 @@ const h = 10, C = 12, J = (h + C) / 2, K = G(
       O(e.scrollSnapList());
     }, []), n = l(
       (e) => {
-        T(e.selectedScrollSnap()), w(e.selectedScrollSnap());
+        T(e.selectedScrollSnap()), N(e.selectedScrollSnap());
       },
-      [w]
+      [N]
     ), u = l(
       (e) => {
         a?.(e.selectedScrollSnap());
       },
       [a]
     );
-    q(() => {
+    M(() => {
       if (t)
         return f(t), n(t), t.on("reInit", f).on("reInit", n).on("select", n).on("settle", u), () => {
           t.off("reInit", f).off("reInit", n).off("select", n).off("settle", u);
         };
     }, [t, f, n, u]);
-    const s = z(() => D.sort((e, o) => e - o), [D]);
+    const s = q(() => $.sort((e, o) => e - o), [$]);
     return /* @__PURE__ */ m(
       "div",
       {
-        ref: b,
+        ref: k,
         role: "group",
         "aria-roledescription": "pagination",
         "aria-label": "pagination",
-        className: E(`${c}`, N, `${c}-${v}`),
-        ...g,
-        ...k,
+        className: E(`${c}`, v, `${c}-${V}`),
+        ...D,
+        ...y,
         children: /* @__PURE__ */ m("div", { className: `${c}-container`, children: /* @__PURE__ */ m(
           "div",
           {
-            style: { "--max-width": `${I * h + (I - 1) * C + 2}px` },
+            style: { "--max-width": `${g * h + (g - 1) * C + 2}px` },
             className: `${c}-container-inner`,
             ref: r,
             children: i.map((e, o) => {
@@ -64,17 +64,17 @@ const h = 10, C = 12, J = (h + C) / 2, K = G(
                 !(o >= i.length - 2 && s.includes(i.length - 1) && s.includes(i.length - 2))
               );
               return /* @__PURE__ */ m(
-                H,
+                F,
                 {
                   onClick: () => P(o),
                   isSelected: W,
                   scrollableContainerRef: r,
                   onInViewChange: (j) => {
-                    $(j ? (p) => [...p, o] : (p) => p.filter((B) => B !== o));
+                    w(j ? (p) => [...p, o] : (p) => p.filter((B) => B !== o));
                   },
                   variant: _ ? "sm" : "md"
                 },
-                `${y}-dot-${o}`
+                `${I}-dot-${o}`
               );
             })
           }
@@ -83,7 +83,7 @@ const h = 10, C = 12, J = (h + C) / 2, K = G(
     );
   }
 );
-K.displayName = "CarouselDots";
+J.displayName = "CarouselDots";
 export {
-  K as default
+  J as default
 };