@phillips/seldon 1.279.2 → 1.280.0

package/dist/components/Carousel/Carousel.js

@@ -1,67 +1,69 @@
-import { jsx as w } from "react/jsx-runtime";
-import { forwardRef as B, useState as x, useMemo as F, useEffect as f, useCallback as v, createContext as W } from "react";
-import { getCommonProps as q } from "../../utils/index.js";
-import z from "../../_virtual/index2.js";
-import G from "../../node_modules/embla-carousel-autoplay/esm/embla-carousel-autoplay.esm.js";
-import H from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
-import J from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
-import { WheelGesturesPlugin as Q } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
-import { useReducedMotion as T } from "../../utils/useReducedMotion.js";
-const U = W(null), X = B(
+import './_carousel.css';
+import { jsx as x } from "react/jsx-runtime";
+import { forwardRef as F, useState as N, useMemo as W, useEffect as f, useCallback as v, createContext as q } from "react";
+import { getCommonProps as z } from "../../utils/index.js";
+import G from "../../_virtual/index2.js";
+import H from "../../node_modules/embla-carousel-autoplay/esm/embla-carousel-autoplay.esm.js";
+import J from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
+import Q from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
+import { WheelGesturesPlugin as T } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
+
+import { useReducedMotion as U } from "../../utils/useReducedMotion.js";
+const V = q(null), X = F(
   ({
-    element: N,
+    element: w,
     loop: C = !1,
     startIndex: g = 0,
-    onSlideChange: l,
-    className: b,
-    children: h,
-    columnGap: k,
+    onSlideChange: n,
+    className: h,
+    children: k,
+    columnGap: P,
     useWheelGestures: u = !1,
     disableDrag: m = !1,
-    disableNavigationDrag: P = null,
-    inViewThreshold: I = 0.99,
-    autoAdvanceDelay: n,
+    disableNavigationDrag: S = null,
+    inViewThreshold: b = 0.99,
+    autoAdvanceDelay: a,
     duration: E,
-    ...d
-  }, S) => {
-    const a = N || "div", p = a === "ul" || a === "ol", { className: y, ...D } = q(d, "Carousel");
-    let t = {};
-    switch (P) {
+    ...p
+  }, y) => {
+    const c = w || "div", d = c === "ul" || c === "ol", { className: D, ...I } = z(p, "Carousel");
+    let r = {};
+    switch (S) {
       case "mobile":
-        t = { breakpoints: { "(max-width: 960px)": { watchDrag: !1 } } };
+        r = { breakpoints: { "(max-width: 960px)": { watchDrag: !1 } } };
         break;
       case "desktop":
-        t = { breakpoints: { "(min-width: 961px)": { watchDrag: !1 } } };
+        r = { breakpoints: { "(min-width: 961px)": { watchDrag: !1 } } };
         break;
       case "all":
-        t = { watchDrag: !1 };
+        r = { watchDrag: !1 };
         break;
       default:
-        t = {};
+        r = {};
     }
-    const [A, R] = x(!1), [M, V] = x(!1), O = T(), r = !!n && !O, K = F(
+    const [R, M] = N(!1), [O, A] = N(!1), K = U(), l = !!a && !K, L = W(
       () => [
-        ...r ? [
-          G({
-            delay: n,
+        ...l ? [
+          H({
+            delay: a,
             stopOnInteraction: !1,
             stopOnMouseEnter: !0,
             stopOnFocusIn: !0
           })
         ] : [],
-        ...u ? [Q({ forceWheelAxis: "x" })] : [],
-        H({ snapped: "carousel-item-in-view" })
+        ...u ? [T({ forceWheelAxis: "x" })] : [],
+        J({ snapped: "carousel-item-in-view" })
       ],
-      [r, n, u]
-    ), [L, e] = J(
+      [l, a, u]
+    ), [j, e] = Q(
       {
         loop: C,
         startIndex: g,
-        inViewThreshold: I,
+        inViewThreshold: b,
         duration: E,
-        ...t
+        ...r
       },
-      K
+      L
     );
     f(() => {
       m ? e?.reInit({
@@ -70,63 +72,60 @@ const U = W(null), X = B(
         watchDrag: () => !0
       });
     }, [m, e]);
-    const j = v(
+    const B = v(
       (o) => {
         if (o.key === "ArrowLeft") {
           o.preventDefault(), e?.scrollPrev();
-          const s = e?.slideNodes().filter((c) => c === document.activeElement)[0]?.previousElementSibling;
+          const s = e?.slideNodes().filter((i) => i === document.activeElement)[0]?.previousElementSibling;
           s && s?.focus();
         } else if (o.key === "ArrowRight") {
           o.preventDefault(), e?.scrollNext();
-          const s = e?.slideNodes().filter((c) => c === document.activeElement)[0]?.nextElementSibling;
+          const s = e?.slideNodes().filter((i) => i === document.activeElement)[0]?.nextElementSibling;
           s && s?.focus();
         }
       },
       [e]
-    ), i = v(
+    ), t = v(
       (o) => {
-        if (!o) return;
-        R(o?.canScrollPrev()), V(o?.canScrollNext());
-        const s = o.slidesInView()?.[0];
-        s !== void 0 && l?.(s);
+        o && (M(o.canScrollPrev()), A(o.canScrollNext()), n?.(o.selectedScrollSnap()));
       },
-      [l]
+      [n]
     );
     return f(() => {
       if (e)
-        return e.on("slidesInView", i), () => {
-          e.off("slidesInView", i);
+        return t(e), e.on("select", t), e.on("reInit", t), () => {
+          e.off("select", t), e.off("reInit", t);
         };
-    }, [e, i]), f(() => {
-      if (!e || !r) return;
+    }, [e, t]), f(() => {
+      if (!e || !l) return;
       const o = () => e.plugins().autoplay?.reset();
       return e.on("select", o), () => {
         e.off("select", o);
       };
-    }, [e, r]), /* @__PURE__ */ w(
-      U.Provider,
+    }, [e, l]), /* @__PURE__ */ x(
+      V.Provider,
       {
         value: {
-          carouselRef: L,
+          carouselRef: j,
           api: e,
           scrollPrev: () => e?.scrollPrev(),
           scrollNext: () => e?.scrollNext(),
-          canScrollPrev: A,
-          canScrollNext: M,
-          columnGap: k,
-          onSlideChange: l
+          canScrollPrev: R,
+          canScrollNext: O,
+          columnGap: P,
+          onSlideChange: n
         },
-        children: /* @__PURE__ */ w(
-          a,
+        children: /* @__PURE__ */ x(
+          c,
           {
-            ref: S,
-            onKeyDownCapture: j,
-            className: z(y, b),
-            role: p ? void 0 : "region",
-            "aria-roledescription": p ? void 0 : "carousel",
-            ...d,
-            ...D,
-            children: h
+            ref: y,
+            onKeyDownCapture: B,
+            className: G(D, h),
+            role: d ? void 0 : "region",
+            "aria-roledescription": d ? void 0 : "carousel",
+            ...p,
+            ...I,
+            children: k
           }
         )
       }
@@ -135,6 +134,6 @@ const U = W(null), X = B(
 );
 X.displayName = "Carousel";
 export {
-  U as CarouselContext,
+  V as CarouselContext,
   X as default
 };

package/dist/components/Carousel/CarouselDot.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("../../_virtual/index2.cjs"),m=require("../../node_modules/react-intersection-observer/dist/index.cjs"),$=require("../../utils/index.cjs"),x=({isSelected:n,onClick:r,scrollableContainerRef:u,onInViewChange:a,variant:o="md",...c})=>{const{className:e,...l}=$.getCommonProps(c,"CarouselDot"),{ref:i}=m.useInView({threshold:0,root:u.current,onChange(d){a(d)}});return s.jsx("button",{ref:i,type:"button",onClick:r,className:t.default(`${e}__container`),...l,children:s.jsx("span",{className:t.default(`${e}`,{[`${e}--selected`]:n,[`${e}--${o}`]:o})})})};exports.CarouselDot=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("../../_virtual/index2.cjs"),x=require("../../node_modules/react-intersection-observer/dist/index.cjs"),$=require("../../utils/index.cjs"),C=({isSelected:n,onClick:r,scrollableContainerRef:u,index:a,onInViewChange:c,variant:o="md",...l})=>{const{className:e,...i}=$.getCommonProps(l,"CarouselDot"),{ref:d}=x.useInView({threshold:0,root:u.current,onChange(m){c(a,m)}});return s.jsx("button",{ref:d,type:"button",onClick:r,className:t.default(`${e}__container`),...i,children:s.jsx("span",{className:t.default(`${e}`,{[`${e}--selected`]:n,[`${e}--${o}`]:o})})})};exports.CarouselDot=C;

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

@@ -6,9 +6,11 @@ export interface CarouselDotProps extends ComponentProps<'button'> {
     onClick: () => void;
     /** Reference to the scrollable container */
     scrollableContainerRef: React.RefObject<HTMLDivElement>;
+    /** Index of this dot among its siblings, forwarded to onInViewChange */
+    index: number;
     /** Callback function when the dot comes into view within the scrollable container */
-    onInViewChange: (inView: boolean) => void;
+    onInViewChange: (index: number, inView: boolean) => void;
     /** Variant of the dot */
     variant?: 'sm' | 'md';
 }
-export declare const CarouselDot: ({ isSelected, onClick, scrollableContainerRef, onInViewChange, variant, ...props }: CarouselDotProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CarouselDot: ({ isSelected, onClick, scrollableContainerRef, index, onInViewChange, variant, ...props }: CarouselDotProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Carousel/CarouselDot.js

@@ -1,30 +1,31 @@
 import { jsx as e } from "react/jsx-runtime";
 import r from "../../_virtual/index2.js";
-import { useInView as i } from "../../node_modules/react-intersection-observer/dist/index.js";
-import { getCommonProps as f } from "../../utils/index.js";
-const N = ({
+import { useInView as f } from "../../node_modules/react-intersection-observer/dist/index.js";
+import { getCommonProps as C } from "../../utils/index.js";
+const b = ({
   isSelected: t,
   onClick: m,
   scrollableContainerRef: n,
-  onInViewChange: a,
+  index: a,
+  onInViewChange: c,
   variant: s = "md",
-  ...c
+  ...l
 }) => {
-  const { className: o, ...l } = f(c, "CarouselDot"), { ref: p } = i({
+  const { className: o, ...p } = C(l, "CarouselDot"), { ref: u } = f({
     threshold: 0,
     root: n.current,
-    onChange(u) {
-      a(u);
+    onChange(i) {
+      c(a, i);
     }
   });
   return /* @__PURE__ */ e(
     "button",
     {
-      ref: p,
+      ref: u,
       type: "button",
       onClick: m,
       className: r(`${o}__container`),
-      ...l,
+      ...p,
       children: /* @__PURE__ */ e(
         "span",
         {
@@ -38,5 +39,5 @@ const N = ({
   );
 };
 export {
-  N as CarouselDot
+  b as CarouselDot
 };

package/dist/components/Carousel/CarouselDots.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),P=require("../../_virtual/index2.cjs"),s=require("react"),G=require("./utils.cjs"),W=require("../../utils/index.cjs"),B=require("./CarouselDot.cjs"),m=10,h=12,E=(m+h)/2,v=s.forwardRef(({className:w,maxDots:p=9,position:j="inline",numberOfSlides:q=0,id:g,...b},N)=>{const{className:c,...R}=W.getCommonProps({id:g,...b},"CarouselDots"),{api:o,onSlideChange:a}=G.useCarousel(),[V,y]=s.useState(0),[i,T]=s.useState(Array.from({length:q},(e,t)=>t)),r=s.useRef(null),[D,I]=s.useState([]),$=s.useCallback(e=>{r.current&&r.current.scrollTo?.({left:e*(m+h)-r.current.offsetWidth/2+E,behavior:"smooth"})},[]),_=s.useCallback(e=>{o&&(o.scrollTo(e),a?.(e))},[o,a]),u=s.useCallback(e=>{T(e.scrollSnapList())},[]),n=s.useCallback(e=>{y(e.selectedScrollSnap()),$(e.selectedScrollSnap())},[$]),f=s.useCallback(e=>{a?.(e.selectedScrollSnap())},[a]);s.useEffect(()=>{if(o)return u(o),n(o),o.on("reInit",u).on("reInit",n).on("select",n).on("settle",f),()=>{o.off("reInit",u).off("reInit",n).off("select",n).off("settle",f)}},[o,u,n,f]);const l=s.useMemo(()=>D.sort((e,t)=>e-t),[D]);return d.jsx("div",{ref:N,role:"group","aria-roledescription":"pagination","aria-label":"pagination",className:P.default(`${c}`,w,`${c}-${j}`),...b,...R,children:d.jsx("div",{className:`${c}-container`,children:d.jsx("div",{style:{"--max-width":`${p*m+(p-1)*h+2}px`},className:`${c}-container-inner`,ref:r,children:i.map((e,t)=>{const k=V===t,S=l.indexOf(t),x=S===-1||(S<=1||S>=l.length-2)&&!(t<=1&&l.includes(0)&&l.includes(1))&&!(t>=i.length-2&&l.includes(i.length-1)&&l.includes(i.length-2));return d.jsx(B.CarouselDot,{onClick:()=>_(t),isSelected:k,"aria-label":`Go to slide ${t+1}`,"aria-current":k?"true":void 0,scrollableContainerRef:r,onInViewChange:M=>{I(M?C=>[...C,t]:C=>C.filter(O=>O!==t))},variant:x?"sm":"md"},`${g}-dot-${t}`)})})})})});v.displayName="CarouselDots";exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("react/jsx-runtime"),P=require("../../_virtual/index2.cjs"),o=require("react"),v=require("./utils.cjs"),x=require("../../utils/index.cjs"),G=require("./CarouselDot.cjs"),m=10,g=12,W=(m+g)/2,p=o.forwardRef(({className:w,maxDots:b=9,position:j="inline",numberOfSlides:q=0,id:D,...I},N)=>{const{className:i,...y}=x.getCommonProps({id:D,...I},"CarouselDots"),{api:n,onSlideChange:u}=v.useCarousel(),[R,V]=o.useState(0),[d,T]=o.useState(Array.from({length:q},(e,t)=>t)),a=o.useRef(null),[$,_]=o.useState([]),k=o.useCallback(e=>{a.current&&a.current.scrollTo?.({left:e*(m+g)-a.current.offsetWidth/2+W,behavior:"smooth"})},[]),M=o.useCallback(e=>{n&&(n.scrollTo(e),u?.(e))},[n,u]),f=o.useCallback(e=>{T(t=>{const s=e.scrollSnapList();return t.length===s.length&&t.every((l,h)=>l===s[h])?t:s})},[]),r=o.useCallback(e=>{V(e.selectedScrollSnap()),k(e.selectedScrollSnap())},[k]),C=o.useCallback(e=>{u?.(e.selectedScrollSnap())},[u]),O=o.useCallback((e,t)=>{_(s=>t?s.includes(e)?s:[...s,e]:s.includes(e)?s.filter(l=>l!==e):s)},[]);o.useEffect(()=>{if(n)return f(n),r(n),n.on("reInit",f).on("reInit",r).on("select",r).on("settle",C),()=>{n.off("reInit",f).off("reInit",r).off("select",r).off("settle",C)}},[n,f,r,C]);const c=o.useMemo(()=>[...$].sort((e,t)=>e-t),[$]);return S.jsx("div",{ref:N,role:"group","aria-roledescription":"pagination","aria-label":"pagination",className:P.default(`${i}`,w,`${i}-${j}`),...I,...y,children:S.jsx("div",{className:`${i}-container`,children:S.jsx("div",{style:{"--max-width":`${b*m+(b-1)*g+2}px`},className:`${i}-container-inner`,ref:a,children:d.map((e,t)=>{const s=R===t,l=c.indexOf(t),h=l===-1||(l<=1||l>=c.length-2)&&!(t<=1&&c.includes(0)&&c.includes(1))&&!(t>=d.length-2&&c.includes(d.length-1)&&c.includes(d.length-2));return S.jsx(G.CarouselDot,{index:t,onClick:()=>M(t),isSelected:s,"aria-label":`Go to slide ${t+1}`,"aria-current":s?"true":void 0,scrollableContainerRef:a,onInViewChange:O,variant:h?"sm":"md"},`${D}-dot-${t}`)})})})})});p.displayName="CarouselDots";exports.default=p;

package/dist/components/Carousel/CarouselDots.js

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

package/dist/components/Carousel/_carousel.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.components{.seldon-carousel{position:relative}.seldon-carousel-arrows-prev-btn,.seldon-carousel-arrows-next-btn{background:transparent;border:none;cursor:pointer;display:flex;flex-flow:column wrap;height:100%;justify-content:center;opacity:0;position:absolute;top:0;width:33.3%}.seldon-carousel-arrows-prev-btn--always-visible,.seldon-carousel-arrows-next-btn--always-visible{height:unset;opacity:1;top:50%;transform:translateY(-50%);width:unset}.seldon-carousel-arrows-prev-btn--always-visible .seldon-carousel-arrows-next-btn__icon,.seldon-carousel-arrows-prev-btn--always-visible .seldon-carousel-arrows-prev-btn__icon,.seldon-carousel-arrows-next-btn--always-visible .seldon-carousel-arrows-next-btn__icon,.seldon-carousel-arrows-next-btn--always-visible .seldon-carousel-arrows-prev-btn__icon{box-shadow:0 0 1px #545454}.seldon-carousel-arrows-prev-btn--disabled,.seldon-carousel-arrows-next-btn--disabled{display:none}.seldon-carousel-arrows-prev-btn:hover,.seldon-carousel-arrows-prev-btn:focus-visible,.seldon-carousel-arrows-next-btn:hover,.seldon-carousel-arrows-next-btn:focus-visible{opacity:1}.seldon-carousel-arrows-prev-btn:focus-visible,.seldon-carousel-arrows-next-btn:focus-visible{outline:none}.seldon-carousel-arrows-prev-btn:focus-visible .seldon-carousel-arrows-next-btn__icon,.seldon-carousel-arrows-prev-btn:focus-visible .seldon-carousel-arrows-prev-btn__icon,.seldon-carousel-arrows-next-btn:focus-visible .seldon-carousel-arrows-next-btn__icon,.seldon-carousel-arrows-next-btn:focus-visible .seldon-carousel-arrows-prev-btn__icon{border-radius:40px;outline:2px solid #07c;outline-offset:4px}.seldon-carousel-arrows-prev-btn__icon,.seldon-carousel-arrows-next-btn__icon{background-color:#fff;border-radius:40px;display:flex;flex-wrap:wrap;height:3.25rem;place-content:center center;width:3.25rem}@media(max-width:961px){.seldon-carousel-arrows-prev-btn,.seldon-carousel-arrows-next-btn{display:none}}.seldon-carousel-dots+.seldon-carousel-arrows .seldon-carousel-arrows-prev-btn,.seldon-carousel-dots+.seldon-carousel-arrows .seldon-carousel-arrows-next-btn{height:calc(100% - 1.5rem)}.seldon-carousel-arrows-prev-btn{align-content:flex-start;flex-wrap:wrap;left:0;padding-left:var(--spacing-sm)}.seldon-carousel-arrows-next-btn{align-content:flex-end;flex-wrap:wrap;padding-right:var(--spacing-sm);right:0}.seldon-carousel-content{overflow:hidden}.seldon-carousel-content-inner{display:flex}.seldon-carousel-content-inner:hover .vjs-big-play-button{display:block}.seldon-carousel-content-inner--gap-micro{margin-left:calc(-1 * var(--spacing-micro))}.seldon-carousel-content-inner--gap-xsm{margin-left:calc(-1 * var(--spacing-xsm))}.seldon-carousel-content-inner--gap-sm{margin-left:calc(-1 * var(--spacing-sm))}.seldon-carousel-content-inner--gap-md{margin-left:calc(-1 * var(--spacing-md))}.seldon-carousel-content-inner--gap-lg{margin-left:calc(-1 * var(--spacing-lg))}.seldon-carousel-content-inner--gap-xl{margin-left:calc(-1 * var(--spacing-xl))}.seldon-carousel-content-inner--gap-xxl{margin-left:calc(-1 * var(--spacing-xxl))}.seldon-carousel-content-inner--gap-xxxl{margin-left:calc(-1 * var(--spacing-xxxl))}.seldon-carousel-item{flex:0 0 100%;min-width:0}.seldon-carousel-item--cursor-pointer{cursor:pointer}.seldon-carousel-item--gap-micro{padding-left:var(--spacing-micro)}.seldon-carousel-item--gap-xsm{padding-left:var(--spacing-xsm)}.seldon-carousel-item--gap-sm{padding-left:var(--spacing-sm)}.seldon-carousel-item--gap-md{padding-left:var(--spacing-md)}.seldon-carousel-item--gap-lg{padding-left:var(--spacing-lg)}.seldon-carousel-item--gap-xl{padding-left:var(--spacing-xl)}.seldon-carousel-item--gap-xxl{padding-left:var(--spacing-xxl)}.seldon-carousel-item--gap-xxxl{padding-left:var(--spacing-xxxl)}.seldon-carousel-dots{align-items:center;display:flex;justify-content:center;margin-top:1rem}.seldon-carousel-dots button{background:none;border:none;cursor:pointer}.seldon-carousel-dots-on-content{bottom:16px;left:50%;overflow:hidden;position:absolute;transform:translate(-50%)}.seldon-carousel-dots-container{display:flex;justify-content:center;width:100%}.seldon-carousel-dots-container-inner{align-items:center;display:flex;gap:12px;max-width:var(--max-width);overflow:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;padding:1px 2px;scroll-snap-type:x mandatory;scrollbar-width:none}.seldon-carousel-dots-container-inner::-webkit-scrollbar{display:none}.seldon-carousel-dot__container{align-items:center;display:flex;height:10px;justify-content:center;min-width:10px;padding:1px;scroll-snap-align:center;width:10px}.seldon-carousel-dot__container:focus-visible{border-radius:40px;outline:.5px solid #07c;outline-offset:0}.seldon-carousel-dot__container:focus-visible-dot:hover{background-color:transparent;outline:1px solid #000}.seldon-carousel-dot{background-color:#eae9e6;border-radius:40px;outline-color:#eae9e6}.seldon-carousel-dot--md{height:100%;width:100%}.seldon-carousel-dot--sm{height:50%;width:50%}.seldon-carousel-dot:hover{background-color:transparent;outline:1px solid #000}.seldon-carousel-dot--selected{background-color:#000;outline-color:#000}.seldon-carousel-dot--selected:hover{background-color:#000;outline:none}}

package/dist/components/ComboBox/ComboBox.cjs

@@ -1 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),q=require("../../node_modules/@radix-ui/react-popover/dist/index.cjs"),h=require("../../_virtual/index2.cjs"),w=require("../../node_modules/cmdk/dist/index.cjs"),l=require("react"),he=require("../../node_modules/usehooks-ts/dist/index.cjs"),K=require("../../utils/index.cjs"),U=require("../IconButton/IconButton.cjs"),W=require("../Button/types.cjs"),_e=require("../../utils/usePrevious.cjs"),be=require("../Text/Text.cjs"),ve=require("../Text/types.cjs"),xe=require("../../assets/formatted/CloseX.cjs"),$e=require("../../assets/formatted/ChevronDown.cjs"),X=l.forwardRef(function({options:c=[],className:H,id:o,labelText:S,placeholder:J,name:I,value:f,onChange:m,onBlur:Q,renderOption:F,ariaLabelDropdown:T,ariaLabelInput:Y,ariaLabelClear:Z,ariaLabelContent:ee,hideLabel:te=!1,popoverContainerRef:se,noOptionsMessage:ae="No Options.",invalid:j=!1,invalidText:le,countOfCharsBeforeDropdown:B=0,...ne},k){const{className:t,...re}=K.getCommonProps({id:o},"ComboBox"),oe=$e.default,ue=xe.default,E=K.useNormalizedInputProps({id:o,invalid:j,invalidText:le,type:"text"}),[p,A]=l.useState(!1),[ce,ie]=l.useState(""),z=_e.usePrevious(f),M=l.useCallback(e=>e.label||e.value,[]),[n,x]=l.useState(()=>{if(f!==void 0){const e=c.find(a=>a.value===f);return e?e.displayValue||M(e):""}return""}),$=l.useRef(null),y=l.useRef(null),C=l.useRef(!1),O=l.useRef(null),i=l.useCallback(e=>M(e),[M]),_=f!==void 0,V=_?f:ce,r=l.useMemo(()=>c.find(e=>e.value===V)||null,[c,V]),b=l.useMemo(()=>r?r.displayValue||i(r):"",[r,i]),d=l.useMemo(()=>{if(!n||r&&n===b)return c;const e=n.toLowerCase().trim();return c.filter(a=>{const g=i(a).toLowerCase().includes(e),D=a.value.toLowerCase().includes(e),P=a.displayValue?.toLowerCase().includes(e)||!1;let v=!1;return a.filterTerms&&a.filterTerms.length>0&&(v=a.filterTerms.some(pe=>pe.toLowerCase().includes(e))),g||D||P||v})},[n,b,r,i,c]),u=l.useCallback((e,a)=>{const g=(a?.length||n.length)>=B;(!e||e&&g)&&A(e),e&&r&&d.length>5&&requestAnimationFrame(()=>{O.current&&O.current.scrollIntoView({block:"nearest",behavior:"auto"})})},[B,n.length,r,d.length]),N=l.useCallback(e=>{_||ie(e.value);const a=e.displayValue||i(e);x(a),m&&m(e.value,e),u(!1),C.current=!0,requestAnimationFrame(()=>{C.current=!1})},[_,m,u,i]),de=e=>{u(!1),C.current=!0,e.preventDefault(),e.stopPropagation(),m&&_&&m("",null),x(""),y.current?.focus(),requestAnimationFrame(()=>{C.current=!1})},fe=()=>{A(!p),y.current?.focus()},me=e=>{x(e),e!==""&&d.length>0&&u(!0,e)},G=l.useMemo(()=>{if(_){if(f!==z)return r?b:n;if(r){const e=b;return e!==n?n:e}else return n}return n},[_,n,f,z,r,b]),L=e=>{if(r){const a=b;a!==G&&x(a)}else x("")},R=l.useCallback(()=>{const e=c.filter(a=>{const g=i(a).toLowerCase(),D=a.value.toLowerCase(),P=a.displayValue?.toLowerCase(),v=n.toLowerCase();return g===v||D===v||P===v});e.length===1&&N(e[0])},[n,c,N,i]);return he.useOnClickOutside($,e=>{e.target.closest(`.${t}__item`)||e.target.closest(`.${t}__content`)||$.current?.contains(e.target)||e.target===$.current||(R(),L(),u(!1))}),s.jsxs("div",{ref:k,className:h.default(t,H),id:o,...re,...ne,children:[I&&s.jsx("input",{type:"hidden",name:I,id:I,value:V||"",ref:e=>{typeof k=="function"&&e&&k(e)}}),s.jsxs("div",{ref:$,className:`${t}__wrapper`,children:[s.jsx(be.default,{element:"label",variant:ve.TextVariants.labelMedium,htmlFor:`${o}-input`,className:h.default(`${t}__label`,{[`${t}__label--hidden`]:te,[`${t}__label--invalid`]:j}),"data-testid":`${o}-label`,children:S}),s.jsx(w.Command,{loop:!0,onKeyDown:e=>{setTimeout(()=>{e.key==="Escape"&&u(!1)},0)},shouldFilter:!1,className:`${t}__command-wrapper`,children:s.jsxs(q.Root,{open:p,modal:!1,children:[s.jsx(q.Trigger,{asChild:!0,children:s.jsxs("div",{className:h.default(`${t}__input-wrapper`,{[`${t}__input-wrapper--invalid`]:j}),role:"combobox","aria-label":S,children:[s.jsx(w.CommandInput,{id:`${o}-input`,placeholder:J,value:G,onValueChange:me,tabIndex:0,onFocus:()=>{d.length>0&&!C.current&&!p&&u(!0)},onClick:e=>{u(!0),e.preventDefault(),e.currentTarget.focus()},onKeyDown:e=>{e.key==="Tab"?(u(!1),R(),L()):e.key==="Enter"&&!p?(m&&m(n,null),d.length===1&&N(d[0])):e.key==="Escape"?(u(!1),e.preventDefault(),R(),L()):(e.key==="ArrowDown"||e.key==="ArrowUp")&&!p&&d.length>0&&(u(!0),e.preventDefault())},onBlur:Q,className:h.default(`${t}__input`,{[`${t}__input--invalid`]:j}),"aria-label":Y,"aria-controls":`${o}-content`,"data-testid":`${o}-input`,ref:y}),n&&s.jsx(U.default,{className:`${t}__close-button`,"data-testid":`${o}-clear-button`,onClick:de,"aria-label":Z,tabIndex:-1,variant:W.ButtonVariants.tertiary,children:s.jsx(ue,{color:"currentColor",height:18,width:18,className:`${t}__icon-button`})}),s.jsx(U.default,{"aria-label":T,className:h.default(`${t}__dropdown-button`,{[`${t}__dropdown-button--open`]:p}),onClick:fe,"data-testid":`${o}-dropdown`,tabIndex:-1,variant:W.ButtonVariants.tertiary,children:s.jsx(oe,{color:"currentColor",height:18,width:18,className:`${t}__icon-button`,title:T||`${o}-dropdown`})})]})}),p&&s.jsx(q.Portal,{container:se?.current||document.body,children:s.jsx(q.Content,{id:`${o}-content`,className:`${t}__content`,"aria-label":ee,side:"bottom",sideOffset:-5,align:"start",alignOffset:0,onFocus:()=>{document.activeElement!==y.current&&y.current?.focus()},style:{width:$.current?.offsetWidth||"100%"},children:s.jsx(w.CommandList,{className:`${t}__list`,children:d.length>0?s.jsx(w.CommandGroup,{className:`${t}__group`,children:d.map(e=>s.jsx(w.CommandItem,{className:h.default(`${t}__item`,{[`${t}__item--selected`]:r?.value===e.value}),value:e.value,onSelect:()=>N(e),...r?.value===e.value?{ref:O}:{},children:F?F(e):i(e)},e.value))}):s.jsx("div",{className:`${t}__no-options`,children:ae})})})})]})}),E.validation?E.validation:s.jsx("p",{className:h.default(`${t}__empty-validation`),children:" "})]})]})});X.displayName="ComboBox";exports.default=X;
+require('../Input/_input.css');
+require('./_combobox.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),q=require("../../node_modules/@radix-ui/react-popover/dist/index.cjs"),h=require("../../_virtual/index2.cjs"),w=require("../../node_modules/cmdk/dist/index.cjs"),l=require("react"),he=require("../../node_modules/usehooks-ts/dist/index.cjs"),K=require("../../utils/index.cjs"),U=require("../IconButton/IconButton.cjs"),W=require("../Button/types.cjs"),_e=require("../../utils/usePrevious.cjs");;;const be=require("../Text/Text.cjs"),ve=require("../Text/types.cjs"),xe=require("../../assets/formatted/CloseX.cjs"),$e=require("../../assets/formatted/ChevronDown.cjs"),X=l.forwardRef(function({options:c=[],className:H,id:u,labelText:S,placeholder:J,name:I,value:f,onChange:m,onBlur:Q,renderOption:F,ariaLabelDropdown:T,ariaLabelInput:Y,ariaLabelClear:Z,ariaLabelContent:ee,hideLabel:te=!1,popoverContainerRef:se,noOptionsMessage:ae="No Options.",invalid:j=!1,invalidText:le,countOfCharsBeforeDropdown:B=0,...ne},k){const{className:t,...re}=K.getCommonProps({id:u},"ComboBox"),ue=$e.default,oe=xe.default,E=K.useNormalizedInputProps({id:u,invalid:j,invalidText:le,type:"text"}),[p,A]=l.useState(!1),[ce,ie]=l.useState(""),z=_e.usePrevious(f),M=l.useCallback(e=>e.label||e.value,[]),[n,x]=l.useState(()=>{if(f!==void 0){const e=c.find(a=>a.value===f);return e?e.displayValue||M(e):""}return""}),$=l.useRef(null),y=l.useRef(null),C=l.useRef(!1),O=l.useRef(null),i=l.useCallback(e=>M(e),[M]),_=f!==void 0,V=_?f:ce,r=l.useMemo(()=>c.find(e=>e.value===V)||null,[c,V]),b=l.useMemo(()=>r?r.displayValue||i(r):"",[r,i]),d=l.useMemo(()=>{if(!n||r&&n===b)return c;const e=n.toLowerCase().trim();return c.filter(a=>{const g=i(a).toLowerCase().includes(e),D=a.value.toLowerCase().includes(e),P=a.displayValue?.toLowerCase().includes(e)||!1;let v=!1;return a.filterTerms&&a.filterTerms.length>0&&(v=a.filterTerms.some(pe=>pe.toLowerCase().includes(e))),g||D||P||v})},[n,b,r,i,c]),o=l.useCallback((e,a)=>{const g=(a?.length||n.length)>=B;(!e||e&&g)&&A(e),e&&r&&d.length>5&&requestAnimationFrame(()=>{O.current&&O.current.scrollIntoView({block:"nearest",behavior:"auto"})})},[B,n.length,r,d.length]),N=l.useCallback(e=>{_||ie(e.value);const a=e.displayValue||i(e);x(a),m&&m(e.value,e),o(!1),C.current=!0,requestAnimationFrame(()=>{C.current=!1})},[_,m,o,i]),de=e=>{o(!1),C.current=!0,e.preventDefault(),e.stopPropagation(),m&&_&&m("",null),x(""),y.current?.focus(),requestAnimationFrame(()=>{C.current=!1})},fe=()=>{A(!p),y.current?.focus()},me=e=>{x(e),e!==""&&d.length>0&&o(!0,e)},G=l.useMemo(()=>{if(_){if(f!==z)return r?b:n;if(r){const e=b;return e!==n?n:e}else return n}return n},[_,n,f,z,r,b]),L=e=>{if(r){const a=b;a!==G&&x(a)}else x("")},R=l.useCallback(()=>{const e=c.filter(a=>{const g=i(a).toLowerCase(),D=a.value.toLowerCase(),P=a.displayValue?.toLowerCase(),v=n.toLowerCase();return g===v||D===v||P===v});e.length===1&&N(e[0])},[n,c,N,i]);return he.useOnClickOutside($,e=>{e.target.closest(`.${t}__item`)||e.target.closest(`.${t}__content`)||$.current?.contains(e.target)||e.target===$.current||(R(),L(),o(!1))}),s.jsxs("div",{ref:k,className:h.default(t,H),id:u,...re,...ne,children:[I&&s.jsx("input",{type:"hidden",name:I,id:I,value:V||"",ref:e=>{typeof k=="function"&&e&&k(e)}}),s.jsxs("div",{ref:$,className:`${t}__wrapper`,children:[s.jsx(be.default,{element:"label",variant:ve.TextVariants.labelMedium,htmlFor:`${u}-input`,className:h.default(`${t}__label`,{[`${t}__label--hidden`]:te,[`${t}__label--invalid`]:j}),"data-testid":`${u}-label`,children:S}),s.jsx(w.Command,{loop:!0,onKeyDown:e=>{setTimeout(()=>{e.key==="Escape"&&o(!1)},0)},shouldFilter:!1,className:`${t}__command-wrapper`,children:s.jsxs(q.Root,{open:p,modal:!1,children:[s.jsx(q.Trigger,{asChild:!0,children:s.jsxs("div",{className:h.default(`${t}__input-wrapper`,{[`${t}__input-wrapper--invalid`]:j}),role:"combobox","aria-label":S,children:[s.jsx(w.CommandInput,{id:`${u}-input`,placeholder:J,value:G,onValueChange:me,tabIndex:0,onFocus:()=>{d.length>0&&!C.current&&!p&&o(!0)},onClick:e=>{o(!0),e.preventDefault(),e.currentTarget.focus()},onKeyDown:e=>{e.key==="Tab"?(o(!1),R(),L()):e.key==="Enter"&&!p?(m&&m(n,null),d.length===1&&N(d[0])):e.key==="Escape"?(o(!1),e.preventDefault(),R(),L()):(e.key==="ArrowDown"||e.key==="ArrowUp")&&!p&&d.length>0&&(o(!0),e.preventDefault())},onBlur:Q,className:h.default(`${t}__input`,{[`${t}__input--invalid`]:j}),"aria-label":Y,"aria-controls":`${u}-content`,"data-testid":`${u}-input`,ref:y}),n&&s.jsx(U.default,{className:`${t}__close-button`,"data-testid":`${u}-clear-button`,onClick:de,"aria-label":Z,tabIndex:-1,variant:W.ButtonVariants.tertiary,children:s.jsx(oe,{color:"currentColor",height:18,width:18,className:`${t}__icon-button`})}),s.jsx(U.default,{"aria-label":T,className:h.default(`${t}__dropdown-button`,{[`${t}__dropdown-button--open`]:p}),onClick:fe,"data-testid":`${u}-dropdown`,tabIndex:-1,variant:W.ButtonVariants.tertiary,children:s.jsx(ue,{color:"currentColor",height:18,width:18,className:`${t}__icon-button`,title:T||`${u}-dropdown`})})]})}),p&&s.jsx(q.Portal,{container:se?.current||document.body,children:s.jsx(q.Content,{id:`${u}-content`,className:`${t}__content`,"aria-label":ee,side:"bottom",sideOffset:-5,align:"start",alignOffset:0,onFocus:()=>{document.activeElement!==y.current&&y.current?.focus()},style:{width:$.current?.offsetWidth||"100%"},children:s.jsx(w.CommandList,{className:`${t}__list`,children:d.length>0?s.jsx(w.CommandGroup,{className:`${t}__group`,children:d.map(e=>s.jsx(w.CommandItem,{className:h.default(`${t}__item`,{[`${t}__item--selected`]:r?.value===e.value}),value:e.value,onSelect:()=>N(e),...r?.value===e.value?{ref:O}:{},children:F?F(e):i(e)},e.value))}):s.jsx("div",{className:`${t}__no-options`,children:ae})})})})]})}),E.validation?E.validation:s.jsx("p",{className:h.default(`${t}__empty-validation`),children:" "})]})]})});X.displayName="ComboBox";exports.default=X;