@phillips/seldon 1.104.1 → 1.105.0

package/dist/components/Carousel/Carousel.js

@@ -1,65 +1,69 @@
-import { jsx as a } from "react/jsx-runtime";
-import { createContext as h, forwardRef as k, useEffect as m, useCallback as i } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as h, forwardRef as k, useEffect as u, useCallback as i } from "react";
 import { getCommonProps as A } from "../../utils/index.js";
 import R from "../../node_modules/classnames/index.js";
-import b from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
-import { WheelGesturesPlugin as E } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
-const K = h(null), W = k(
+import b from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
+import E from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
+import { WheelGesturesPlugin as K } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
+const W = h(null), j = k(
   ({
     loop: w = !1,
     startIndex: x = 0,
     onSlideChange: s,
     className: d,
     children: N,
-    columnGap: P,
-    useWheelGestures: v = !1,
-    disableDrag: o = !1,
+    columnGap: v,
+    useWheelGestures: P = !1,
+    disableDrag: l = !1,
     ...t
   }, I) => {
     var c, f;
-    const { className: y, ...C } = A(t, "Carousel"), [D, e] = b(
+    const { className: C, ...y } = A(t, "Carousel"), [D, e] = E(
       {
         loop: w,
         startIndex: x,
         inViewThreshold: 0.99
       },
       [
-        ...v ? [
-          E({
+        ...P ? [
+          K({
             forceWheelAxis: "x"
           })
-        ] : []
+        ] : [],
+        b({
+          snapped: "carousel-item-in-view"
+        })
       ]
     );
-    m(() => {
-      o ? e == null || e.reInit({
+    u(() => {
+      l ? e == null || e.reInit({
         watchDrag: () => !1
       }) : e == null || e.reInit({
         watchDrag: () => !0
       });
-    }, [o, e]);
+    }, [l, e]);
     const V = i(
       (r) => {
         r.key === "ArrowLeft" ? (r.preventDefault(), e == null || e.scrollPrev()) : r.key === "ArrowRight" && (r.preventDefault(), e == null || e.scrollNext());
       },
       [e]
-    ), l = i(
+    ), o = i(
       (r) => {
-        var u;
+        var a;
         if (!r)
           return;
-        const n = (u = r.slidesInView()) == null ? void 0 : u[0];
+        const n = (a = r.slidesInView()) == null ? void 0 : a[0];
         n !== void 0 && (s == null || s(n));
       },
       [s]
     );
-    return m(() => {
+    return u(() => {
       if (e)
-        return e.on("slidesInView", l), () => {
-          e.off("slidesInView", l);
+        return e.on("slidesInView", o), () => {
+          e.off("slidesInView", o);
         };
-    }, [e, l]), /* @__PURE__ */ a(
-      K.Provider,
+    }, [e, o]), /* @__PURE__ */ m(
+      W.Provider,
       {
         value: {
           carouselRef: D,
@@ -68,19 +72,19 @@ const K = h(null), W = k(
           scrollNext: () => e == null ? void 0 : e.scrollNext(),
           canScrollPrev: (c = e == null ? void 0 : e.canScrollPrev()) != null ? c : !1,
           canScrollNext: (f = e == null ? void 0 : e.canScrollNext()) != null ? f : !1,
-          columnGap: P,
+          columnGap: v,
           onSlideChange: s
         },
-        children: /* @__PURE__ */ a(
+        children: /* @__PURE__ */ m(
           "div",
           {
             ref: I,
             onKeyDownCapture: V,
-            className: R(y, d),
+            className: R(C, d),
             role: "region",
             "aria-roledescription": "carousel",
             ...t,
-            ...C,
+            ...y,
             children: N
           }
         )
@@ -88,8 +92,8 @@ const K = h(null), W = k(
     );
   }
 );
-W.displayName = "Carousel";
+j.displayName = "Carousel";
 export {
-  K as CarouselContext,
-  W as default
+  W as CarouselContext,
+  j as default
 };

package/dist/components/Carousel/CarouselContent.js

@@ -4,27 +4,19 @@ import a from "../../node_modules/classnames/index.js";
 import { useCarousel as p } from "./utils.js";
 import { getCommonProps as u } from "../../utils/index.js";
 const C = f(
-  ({ className: n, containerClassName: t, containerStyles: m, ...e }, l) => {
-    const { className: o, ...c } = u(e, "Carousel"), { carouselRef: i, columnGap: s } = p();
-    return /* @__PURE__ */ r(
+  ({ className: m, containerClassName: n, containerStyles: t, ...e }, l) => {
+    const { className: o, ...c } = u(e, "CarouselContent"), { carouselRef: i, columnGap: s } = p();
+    return /* @__PURE__ */ r("div", { ref: i, className: a(`${o}`, n), style: t, children: /* @__PURE__ */ r(
       "div",
       {
-        ref: i,
-        className: a(`${o}-content`, t),
-        style: m,
-        children: /* @__PURE__ */ r(
-          "div",
-          {
-            ref: l,
-            className: a(`${o}-content-inner`, n, {
-              [`${o}-content-inner--gap-${s}`]: !!s
-            }),
-            ...e,
-            ...c
-          }
-        )
+        ref: l,
+        className: a(`${o}-inner`, m, {
+          [`${o}-inner--gap-${s}`]: !!s
+        }),
+        ...e,
+        ...c
       }
-    );
+    ) });
   }
 );
 C.displayName = "CarouselContent";

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

@@ -1,10 +1,9 @@
-interface Props {
+import { ComponentProps } from 'react';
+interface Props extends ComponentProps<'button'> {
     /** Whether the dot is selected */
     isSelected: boolean;
     /** Callback function when the dot is clicked */
     onClick: () => void;
-    /** Base class name for styling */
-    baseClassName: string;
     /** Reference to the scrollable container */
     scrollableContainerRef: React.RefObject<HTMLDivElement>;
     /** Callback function when the dot comes into view within the scrollable container */
@@ -12,5 +11,5 @@ interface Props {
     /** Variant of the dot */
     variant?: 'sm' | 'md';
 }
-export declare const CarouselDot: ({ isSelected, onClick, baseClassName, scrollableContainerRef, onInViewChange, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CarouselDot: ({ isSelected, onClick, scrollableContainerRef, onInViewChange, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Carousel/CarouselDot.js

@@ -1,34 +1,36 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import r from "../../node_modules/classnames/index.js";
-import { useInView as m } from "../../node_modules/react-intersection-observer/dist/index.js";
-const l = ({
-  isSelected: i,
-  onClick: e,
-  baseClassName: o,
-  scrollableContainerRef: c,
-  onInViewChange: p,
-  variant: t = "md"
+import { useInView as i } from "../../node_modules/react-intersection-observer/dist/index.js";
+import { getCommonProps as f } from "../../utils/index.js";
+const N = ({
+  isSelected: t,
+  onClick: m,
+  scrollableContainerRef: n,
+  onInViewChange: a,
+  variant: s = "md",
+  ...c
 }) => {
-  const { ref: d } = m({
+  const { className: o, ...l } = f(c, "CarouselDot"), { ref: p } = i({
     threshold: 0,
-    root: c.current,
-    onChange(a) {
-      p(a);
+    root: n.current,
+    onChange(u) {
+      a(u);
     }
   });
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ e(
     "button",
     {
-      ref: d,
+      ref: p,
       role: "button",
-      onClick: e,
-      className: r(`${o}-pagination-dot__container`),
-      children: /* @__PURE__ */ n(
+      onClick: m,
+      className: r(`${o}__container`),
+      ...l,
+      children: /* @__PURE__ */ e(
         "span",
         {
-          className: r(`${o}-pagination-dot`, {
-            [`${o}-pagination-dot--selected`]: i,
-            [`${o}-pagination-dot--${t}`]: t
+          className: r(`${o}`, {
+            [`${o}--selected`]: t,
+            [`${o}--${s}`]: s
           })
         }
       )
@@ -36,5 +38,5 @@ const l = ({
   );
 };
 export {
-  l as CarouselDot
+  N as CarouselDot
 };

package/dist/components/Carousel/CarouselDots.js

@@ -1,46 +1,46 @@
 import { jsx as u } from "react/jsx-runtime";
 import B from "../../node_modules/classnames/index.js";
-import { forwardRef as E, useId as L, useState as S, useRef as M, useCallback as a, useEffect as W, useMemo as q } from "react";
+import { forwardRef as E, useId as L, useState as S, useRef as M, useCallback as c, useEffect as W, 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 G = E(
-  ({ className: w, maxDots: g = 9, position: N = "inline", numberOfSlides: v = 0, ...h }, V) => {
-    const { className: l, ...b } = A(h, "Carousel"), k = L(), { api: o, onSlideChange: n } = z(), [y, R] = S(0), [i, T] = S(
+  ({ className: w, maxDots: h = 9, position: N = "inline", numberOfSlides: v = 0, ...C }, V) => {
+    const { className: a, ...b } = A(C, "CarouselDots"), k = L(), { api: o, onSlideChange: s } = z(), [y, R] = S(0), [i, T] = S(
       Array.from({ length: v }, (e, t) => t)
-    ), c = M(null), [C, D] = S([]), $ = a((e) => {
+    ), l = M(null), [D, $] = S([]), g = c((e) => {
       var t, m;
-      c.current && ((m = (t = c.current).scrollTo) == null || m.call(t, {
+      l.current && ((m = (t = l.current).scrollTo) == null || m.call(t, {
         // 8px width + 12px gap
-        left: e * 20 - c.current.offsetWidth / 2 + 10,
+        left: e * 20 - l.current.offsetWidth / 2 + 10,
         // Center dot in container
         behavior: "smooth"
       }));
-    }, []), O = a(
+    }, []), O = c(
       (e) => {
-        o && (o.scrollTo(e, !0), n == null || n(e));
+        o && (o.scrollTo(e, !0), s == null || s(e));
       },
-      [o, n]
-    ), f = a((e) => {
+      [o, s]
+    ), f = c((e) => {
       T(e.scrollSnapList());
-    }, []), s = a(
+    }, []), n = c(
       (e) => {
-        R(e.selectedScrollSnap()), $(e.selectedScrollSnap());
+        R(e.selectedScrollSnap()), g(e.selectedScrollSnap());
       },
-      [$]
-    ), p = a(
+      [g]
+    ), d = c(
       (e) => {
-        n == null || n(e.selectedScrollSnap());
+        s == null || s(e.selectedScrollSnap());
       },
-      [n]
+      [s]
     );
     W(() => {
       if (o)
-        return f(o), s(o), o.on("reInit", f).on("reInit", s).on("select", s).on("settle", p), () => {
-          o.off("reInit", f).off("reInit", s).off("select", s).off("settle", p);
+        return f(o), n(o), o.on("reInit", f).on("reInit", n).on("select", n).on("settle", d), () => {
+          o.off("reInit", f).off("reInit", n).off("select", n).off("settle", d);
         };
-    }, [o, f, s, p]);
-    const r = q(() => C.sort((e, t) => e - t), [C]);
+    }, [o, f, n, d]);
+    const r = q(() => D.sort((e, t) => e - t), [D]);
     return /* @__PURE__ */ u(
       "div",
       {
@@ -48,20 +48,20 @@ const G = E(
         role: "group",
         "aria-roledescription": "pagination",
         "aria-label": "pagination",
-        className: B(`${l}-pagination`, w, `${l}-pagination-${N}`),
-        ...h,
+        className: B(`${a}`, w, `${a}-${N}`),
+        ...C,
         ...b,
-        children: /* @__PURE__ */ u("div", { className: `${l}-pagination-container`, children: /* @__PURE__ */ u(
+        children: /* @__PURE__ */ u("div", { className: `${a}-container`, children: /* @__PURE__ */ u(
           "div",
           {
-            style: { "--max-width": `${g * 8 + (g - 1) * 12}px` },
-            className: `${l}-pagination-container-inner`,
-            ref: c,
+            style: { "--max-width": `${h * 8 + (h - 1) * 12}px` },
+            className: `${a}-container-inner`,
+            ref: l,
             children: i.map((e, t) => {
-              const m = y === t, d = r.indexOf(t), P = (
+              const m = y === t, p = r.indexOf(t), P = (
                 // The dot is out of view
-                d === -1 || // The dot must be either among the first two or last two visible dots
-                (d <= 1 || d >= r.length - 2) && // Don't shrink if we're showing the first two dots (index 0,1) and both are visible
+                p === -1 || // The dot must be either among the first two or last two visible dots
+                (p <= 1 || p >= r.length - 2) && // Don't shrink if we're showing the first two dots (index 0,1) and both are visible
                 !(t <= 1 && r.includes(0) && r.includes(1)) && // Don't shrink if we're showing the last two dots and both are visible
                 !(t >= i.length - 2 && r.includes(i.length - 1) && r.includes(i.length - 2))
               );
@@ -70,10 +70,9 @@ const G = E(
                 {
                   onClick: () => O(t),
                   isSelected: m,
-                  baseClassName: l,
-                  scrollableContainerRef: c,
+                  scrollableContainerRef: l,
                   onInViewChange: (_) => {
-                    D(_ ? (I) => [...I, t] : (I) => I.filter((j) => j !== t));
+                    $(_ ? (I) => [...I, t] : (I) => I.filter((j) => j !== t));
                   },
                   variant: P ? "sm" : "md"
                 },

package/dist/components/Carousel/CarouselItem.js

@@ -1,19 +1,19 @@
 import { jsx as t } from "react/jsx-runtime";
-import i from "../../node_modules/classnames/index.js";
-import { forwardRef as l } from "react";
+import l from "../../node_modules/classnames/index.js";
+import { forwardRef as i } from "react";
 import { getCommonProps as n } from "../../utils/index.js";
 import { useCarousel as c } from "./utils.js";
-const u = l(({ className: m, ...o }, s) => {
-  const { className: e, ...a } = n(o, "Carousel"), { columnGap: r } = c();
+const u = i(({ className: m, ...o }, s) => {
+  const { className: r, ...a } = n(o, "CarouselItem"), { columnGap: e } = c();
   return /* @__PURE__ */ t(
     "div",
     {
       ref: s,
       role: o.onClick ? "button" : "group",
       "aria-roledescription": "slide",
-      className: i(`${e}-item`, m, {
-        [`${e}-item--gap-${r}`]: !!r,
-        [`${e}-item--cursor-pointer`]: !!o.onClick
+      className: l(`${r}`, m, {
+        [`${r}--gap-${e}`]: !!e,
+        [`${r}--cursor-pointer`]: !!o.onClick
       }),
       ...o,
       ...a