@scrippsproduct/networks-ui-library 1.0.17 → 1.0.18-dev.1

package/dist/Carousel.module-DOrBKQEQ.mjs

@@ -0,0 +1,14 @@
+import './assets/Carousel.css';const _ = "_carousel_60lzn_1", l = "_carousel__scroller_60lzn_11", o = {
+  carousel: _,
+  carousel__scroller: l,
+  "carousel-controls": "_carousel-controls_60lzn_38",
+  "carousel-controls__btn": "_carousel-controls__btn_60lzn_42",
+  "carousel-controls__previous": "_carousel-controls__previous_60lzn_67",
+  "carousel-controls__next": "_carousel-controls__next_60lzn_74",
+  "carousel-nav": "_carousel-nav_60lzn_86",
+  "carousel-nav__list": "_carousel-nav__list_60lzn_90",
+  "carousel-nav__item": "_carousel-nav__item_60lzn_99"
+};
+export {
+  o as c
+};

package/dist/assets/Carousel.css

@@ -1 +1 @@
-._carousel_idy2d_1{--_carousel-scrollbar-gutter: 1.75rem;--_carousel-pagination-size: 1rem;--_slide-gap: 1.5rem;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:[carousel-scroller] 1fr [carousel-pagination]}._carousel__scroller_idy2d_11{display:flex;box-sizing:border-box;overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-snap-align:center;scroll-padding-inline:var(--_carousel-gutters);padding-inline:var(--_carousel-gutters);scrollbar-width:none;list-style:none;margin:0}._carousel__scroller_idy2d_11[data-scrollbar=true]{scrollbar-width:auto;overflow-x:scroll}._carousel__scroller_idy2d_11:not([data-scrollbar=true])::-webkit-scrollbar{display:none}._carousel__scroller_idy2d_11::-webkit-scrollbar{display:auto}._carousel-controls_idy2d_39{display:contents}._carousel-controls__btn_idy2d_43{position:absolute;top:50%;transform:translateY(var(--_controls-transform));border-radius:50%;background-color:#fff6;color:#000;aspect-ratio:1;border:1px solid transparent;padding:0;overflow:hidden;z-index:1;cursor:pointer;transition:opacity .325s ease-out}._carousel-controls__btn_idy2d_43>i>svg{display:block;block-size:auto;max-inline-size:100%;stroke:currentColor}._carousel-controls__btn_idy2d_43[disabled]{opacity:0}._carousel-controls__previous_idy2d_68{inset-inline-start:var(--_control-btns-offset-x)}._carousel-controls__previous_idy2d_68 svg{transform:translate(-2px)}._carousel-controls__next_idy2d_75{inset-inline-end:var(--_control-btns-offset-x)}._carousel-controls__next_idy2d_75 svg{transform:translate(2px)}._carousel-controls__btn_idy2d_43[disabled]{cursor:not-allowed;transition-delay:0s}._carousel-nav_idy2d_87{margin-top:0}._carousel-nav__list_idy2d_91{display:flex;gap:1rem;justify-content:center;align-items:flex-start;list-style:none;padding:0}._carousel-nav__item_idy2d_100{flex-basis:1rem;min-width:1rem;max-width:1rem;height:1rem;background-color:transparent;border-radius:50%;border:1px solid rgba(65,65,65,.1)}._carousel-nav__item_idy2d_100[data-current=true]{background-color:#8080801a}
+._carousel_60lzn_1{--_carousel-scrollbar-gutter: 1.75rem;--_carousel-pagination-size: 1rem;--_slide-gap: 1.5rem;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:[carousel-scroller] 1fr [carousel-pagination]}._carousel__scroller_60lzn_11{display:flex;box-sizing:border-box;overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--_carousel-gutters);padding-inline:var(--_carousel-gutters);scrollbar-width:none;list-style:none;margin:0}._carousel__scroller_60lzn_11[data-scrollbar=true]{scrollbar-width:auto;overflow-x:scroll}._carousel__scroller_60lzn_11:not([data-scrollbar=true])::-webkit-scrollbar{display:none}._carousel__scroller_60lzn_11::-webkit-scrollbar{display:auto}._carousel-controls_60lzn_38{display:contents}._carousel-controls__btn_60lzn_42{position:absolute;top:50%;transform:translateY(var(--_controls-transform));border-radius:50%;background-color:#fff6;color:#000;aspect-ratio:1;border:1px solid transparent;padding:0;overflow:hidden;z-index:1;cursor:pointer;transition:opacity .325s ease-out}._carousel-controls__btn_60lzn_42>i>svg{display:block;block-size:auto;max-inline-size:100%;stroke:currentColor}._carousel-controls__btn_60lzn_42[disabled]{opacity:0}._carousel-controls__previous_60lzn_67{inset-inline-start:var(--_control-btns-offset-x)}._carousel-controls__previous_60lzn_67 svg{transform:translate(-2px)}._carousel-controls__next_60lzn_74{inset-inline-end:var(--_control-btns-offset-x)}._carousel-controls__next_60lzn_74 svg{transform:translate(2px)}._carousel-controls__btn_60lzn_42[disabled]{cursor:not-allowed;transition-delay:0s}._carousel-nav_60lzn_86{margin-top:0}._carousel-nav__list_60lzn_90{display:flex;gap:1rem;justify-content:center;align-items:flex-start;list-style:none;padding:0}._carousel-nav__item_60lzn_99{flex-basis:1rem;min-width:1rem;max-width:1rem;height:1rem;background-color:transparent;border-radius:50%;border:1px solid rgba(65,65,65,.1)}._carousel-nav__item_60lzn_99[data-current=true]{background-color:#8080801a}

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

@@ -19,7 +19,6 @@ export function Carousel({ id, slides, options }: {
         cellsPerSlide: number;
         cellAspectRatio: string;
         cellsPosition: string;
-        groupSlides: boolean;
         wrapAround: boolean;
     } | undefined;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Carousel/Carousel.js

@@ -1,16 +1,16 @@
-import { jsx as o, Fragment as W, jsxs as O } from "react/jsx-runtime";
-import { useRef as c, useState as A, useEffect as V, useCallback as u } from "react";
-import q from "./CarouselUtils.class.js";
-import { CarouselSlide as J } from "../CarouselSlide/CarouselSlide.js";
-import { chunkArray as Q, classes as z } from "../../utils/helpers.js";
-import { c as a } from "../../Carousel.module-CzL9vVtu.mjs";
-import { C as X } from "../../chevron-left-DmvQntvu.mjs";
-import { C as Y } from "../../chevron-right-CaAz6ISN.mjs";
-const Z = window.matchMedia("(max-width: 600px)"), ee = window.matchMedia("(max-width: 800px"), re = window.matchMedia("(max-width: 1024px"), te = window.matchMedia("(max-width: 1280px");
+import { jsx as o, Fragment as X, jsxs as K } from "react/jsx-runtime";
+import { useRef as s, useState as P, useEffect as B, useCallback as d } from "react";
+import Y from "./CarouselUtils.class.js";
+import { CarouselSlide as Z } from "../CarouselSlide/CarouselSlide.js";
+import { chunkArray as ee, classes as _ } from "../../utils/helpers.js";
+import { c as a } from "../../Carousel.module-DOrBKQEQ.mjs";
+import { C as re } from "../../chevron-left-DmvQntvu.mjs";
+import { C as te } from "../../chevron-right-CaAz6ISN.mjs";
+const b = window.matchMedia("(width <= 600px)"), z = window.matchMedia("(width <= 800px"), E = window.matchMedia("(width <= 1024px"), L = window.matchMedia("(width <= 1280px");
 function de({
-  id: _,
-  slides: b,
-  options: x = {
+  id: g,
+  slides: x,
+  options: I = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 48,
@@ -28,171 +28,153 @@ function de({
     cellsPerSlide: 1,
     cellAspectRatio: "4/2",
     cellsPosition: "center",
-    groupSlides: !0,
     wrapAround: !0
   }
 }) {
-  const m = c(`carousel-${_}`), R = c(null), i = c(null), I = c(null), w = c(b), E = c(null), g = c(null), t = c(null), e = c(x), $ = c(x.showPagination), T = c("-50%"), [N, j] = A([]), [r, d] = A(null), [k, B] = A([]);
-  V(() => {
-    (() => {
-      Z.matches ? (d({
-        ...e.current,
+  console.log(`Carousel component with id: ${g} initialized`);
+  const p = s(`carousel-${g}`), R = s(null), i = s(null), $ = s(null), m = s(x), T = s(null), S = s(null), r = s(null), e = s(I), l = s(I), N = s("-50%"), [M, G] = P([]), [k, H] = P([]), [D, U] = P(0);
+  B(() => {
+    const t = () => {
+      b.matches ? e.current = {
+        ...l.current,
         showControls: !1,
         showPagination: !1,
         cellsPerSlide: 1,
-        cellsPosition: e.current.wrapAround ? "center" : "flex-start",
+        cellsPosition: l.current.wrapAround ? "center" : "flex-start",
         gutterSize: 10
-      }), e.current = {
-        ...e.current,
-        showControls: !1,
-        showPagination: !1,
-        cellsPerSlide: 1,
-        cellsPosition: e.current.wrapAround ? "center" : "flex-start",
-        gutterSize: 10
-      }, $.current = !1) : ee.matches ? e.current.cellsPerSlide > 2 ? (d({
-        ...e.current,
+      } : z.matches ? l.current.cellsPerSlide !== 1 ? e.current = {
+        ...l.current,
         cellsPerSlide: 2,
         showControls: !1,
         gutterSize: 10
-      }), e.current = {
-        ...e.current,
-        cellsPerSlide: 2,
-        showControls: !1,
-        gutterSize: 10
-      }) : (d({
-        ...e.current,
-        showControls: !1,
-        gutterSize: 10
-      }), e.current = {
-        ...e.current,
+      } : e.current = {
+        ...l.current,
         showControls: !1,
         gutterSize: 10
-      }) : re.matches ? e.current.cellsPerSlide > 3 ? (d({
-        ...e.current,
+      } : E.matches ? l.current.cellsPerSlide !== 1 && l.current.cellsPerSlide !== 2 ? e.current = {
+        ...l.current,
         cellsPerSlide: 3,
         showControls: !1,
         gutterSize: 10
-      }), e.current = {
-        ...e.current,
-        cellsPerSlide: 3,
-        showControls: !1,
-        gutterSize: 10
-      }) : (d({
-        ...e.current,
-        showControls: !1,
-        gutterSize: 10
-      }), e.current = {
-        ...e.current,
+      } : e.current = {
+        ...l.current,
         showControls: !1,
         gutterSize: 10
-      }) : te.matches && e.current.showPagination ? (d({
-        ...e.current,
+      } : L.matches ? l.current.showPagination ? e.current = {
+        ...l.current,
         showControls: !1
-      }), e.current = {
-        ...e.current,
-        showControls: !1
-      }) : d({
-        ...e.current
-      });
-    })();
+      } : e.current = {
+        ...l.current
+      } : e.current = {
+        ...l.current
+      };
+    };
+    t();
+    const n = () => {
+      U((u) => u + 1), t();
+    };
+    return b.addEventListener("change", n), z.addEventListener("change", n), E.addEventListener("change", n), L.addEventListener("change", n), () => {
+      b.removeEventListener("change", n), z.removeEventListener("change", n), E.removeEventListener("change", n), L.removeEventListener("change", n);
+    };
   }, []);
-  const L = u((l, n) => {
-    const p = Q(n, l);
-    B([...p]);
-    let f = [];
-    for (let s = 0; s <= p.length - 1; s++) {
-      f[s] = {}, f[s].ariaLabel = `${s + 1} of ${p.length}`, f[s].layout = p[s][0].layout, f[s].cells = [];
-      for (let S = 0; S <= p[s].length - 1; S++)
-        f[s].cells[S] = {
-          props: p[s][S].props
+  const O = d((t, n) => {
+    const u = ee(n, t);
+    H([...u]);
+    let h = [];
+    for (let c = 0; c <= u.length - 1; c++) {
+      h[c] = {}, h[c].ariaLabel = `${c + 1} of ${u.length}`, h[c].layout = u[c][0].layout, h[c].cells = [];
+      for (let w = 0; w <= u[c].length - 1; w++)
+        h[c].cells[w] = {
+          props: u[c][w].props
         };
     }
-    const P = [...f], y = [...f], K = P.slice(-1), F = P.slice(0);
-    return y.push(F[0]), y.unshift(K[0]), e.current.wrapAround && l.length > n ? y : P;
-  }, []), h = u(() => {
-    e.current.autoplay && t.current.clearTimer();
-  }, []), G = u((l) => {
-    h();
-    const n = l.key;
-    n === "ArrowLeft" ? (l.preventDefault(), t.current.determineScrollAction(-1)) : n === "ArrowRight" && (l.preventDefault(), t.current.determineScrollAction(1));
-  }, [h]), H = u(() => {
-    h(), i.current.addEventListener("scrollend", () => {
-      t.current.handleScrollEnd();
+    const C = [...h], A = [...h], J = C.slice(-1), Q = C.slice(0);
+    return A.push(Q[0]), A.unshift(J[0]), e.current.wrapAround && t.length > n ? A : C;
+  }, []), f = d(() => {
+    e.current.autoplay && r.current.clearTimer();
+  }, []), F = d((t) => {
+    f();
+    const n = t.key;
+    n === "ArrowLeft" ? (t.preventDefault(), r.current.determineScrollAction(-1)) : n === "ArrowRight" && (t.preventDefault(), r.current.determineScrollAction(1));
+  }, [f]), W = d(() => {
+    f(), i.current.addEventListener("scrollend", () => {
+      r.current.handleScrollEnd();
     }, { once: !0 });
-  }, [h]), v = u(() => {
-    h(), i.current.addEventListener("scrollend", () => {
-      t.current.handleScrollEnd(), i.current.addEventListener("scroll", v, { once: !0 });
+  }, [f]), v = d(() => {
+    f(), i.current.addEventListener("scrollend", () => {
+      r.current.handleScrollEnd(), i.current.addEventListener("scroll", v, { once: !0 });
     }, { once: !0 });
-  }, [h]), U = () => {
-    t.current && e.current.autoplay && t.current.clearTimer();
-  }, C = u(() => {
+  }, [f]), q = () => {
+    r.current && e.current.autoplay && r.current.clearTimer();
+  }, y = d(() => {
     //! make sure class is only instantiated once because of reacts
     //! "strict" mode double do hocus pocus
-    t.current === null && (t.current = new q({
+    var t, n;
+    r.current !== null && D > 0 && ((n = (t = r.current).clearTimer) == null || n.call(t), r.current = null), r.current = new Y({
       carouselEl: R.current,
       scrollerEl: i.current,
-      paginationEl: I.current,
-      slides: w.current,
+      paginationEl: $.current,
+      slides: m.current,
       navBtnEls: {
-        next: E.current,
-        previous: g.current
+        next: T.current,
+        previous: S.current
       },
-      id: m.current,
+      id: p.current,
       options: {
         autoplay: e.current.autoplay,
-        wrapAround: e.current.wrapAround && w.current.length > e.current.cellsPerSlide,
+        wrapAround: e.current.wrapAround && m.current.length > e.current.cellsPerSlide,
         showPagination: e.current.showPagination,
         delay: e.current.autoplayDelay,
         slideGutterSize: e.current.gutterSize,
         slideAspectRatio: e.current.slideAspectRatio,
-        showControls: e.current.showControls && w.current.length > e.current.cellsPerSlide,
+        showControls: e.current.showControls && m.current.length > e.current.cellsPerSlide,
         cellsPerSlide: e.current.cellsPerSlide
       }
-    }));
-  }, []), M = u(() => {
+    });
+  }, [D]), V = d(() => {
     i.current.addEventListener("scroll", v, { once: !0 });
-  }, [v]), D = u(() => {
-    if (j(L(w.current, e.current.cellsPerSlide)), w.current.length > e.current.cellsPerSlide) {
-      let l = setInterval(() => {
-        i.current !== null && (g.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(l), M(), C());
+  }, [v]), j = d(() => {
+    if (G(O(m.current, e.current.cellsPerSlide)), m.current.length > e.current.cellsPerSlide) {
+      let t = setInterval(() => {
+        i.current !== null && (S.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(t), V(), y());
       }, 100);
     } else {
-      let l = setInterval(() => {
-        i.current !== null && (clearInterval(l), C());
+      let t = setInterval(() => {
+        i.current !== null && (clearInterval(t), y());
       }, 100);
     }
-  }, [L, M, C]);
-  return V(() => {
-    if (r !== null) {
-      if (r.showControls) {
-        let l = 0;
-        r.showPagination && (l = l + 25), r.showScrollbar && (l = l + 6), T.current = `calc(-50% - ${l}px)`;
+  }, [O, V, y]);
+  return B(() => {
+    if (e.current !== null) {
+      if (e.current.showControls) {
+        let t = 0;
+        e.current.showPagination && (t = t + 25), e.current.showScrollbar && (t = t + 6), N.current = `calc(-50% - ${t}px)`;
       }
-      D();
+      j();
     }
     return () => {
-      U();
+      q();
     };
-  }, [D, r]), /* @__PURE__ */ o(W, { children: r !== null && /* @__PURE__ */ O(
+  }, [j, e]), /* @__PURE__ */ o(X, { children: e.current !== null && /* @__PURE__ */ K(
     "div",
     {
       className: a.carousel,
-      id: m.current,
+      id: p.current,
       ref: R,
       tabIndex: -1,
       role: "region",
       "aria-roledescription": "carousel",
-      "aria-label": r.title,
-      onKeyDown: G,
+      "aria-label": e.current.title,
+      onKeyDown: F,
       style: {
-        "--_carousel-gutters": r.wrapAround ? `${r.gutterSize <= 25 ? r.gutterSize : 25}%` : `0 ${r.gutterSize <= 25 ? r.gutterSize : 25}%`,
-        "--_slide-aspect-ratio": r.slideAspectRatio,
-        "--_cell-aspect-ratio": r.cellAspectRatio,
-        "--_slide-cell-size": `${100 / r.cellsPerSlide}%`,
-        "--_cells-position": r.cellsPosition,
-        "--_control-btns-offset-x": `${r.controlButtonsOffset}rem`,
-        "--_slide-gap": `${r.slideGap}rem`,
-        "--_controls-transform": T.current
+        "--_carousel-gutters": e.current.wrapAround ? `${e.current.gutterSize <= 25 ? e.current.gutterSize : 25}%` : `0 ${e.current.gutterSize <= 25 ? e.current.gutterSize : 25}%`,
+        "--_slide-aspect-ratio": e.current.slideAspectRatio,
+        "--_cell-aspect-ratio": e.current.cellAspectRatio,
+        "--_slide-cell-size": `${100 / e.current.cellsPerSlide}%`,
+        "--_cells-position": e.current.cellsPosition,
+        "--_control-btns-offset-x": `${e.current.controlButtonsOffset}rem`,
+        "--_slide-gap": `${e.current.slideGap}rem`,
+        "--_controls-transform": N.current
       },
       children: [
         /* @__PURE__ */ o(
@@ -205,84 +187,80 @@ function de({
             "aria-live": "Polite",
             tabIndex: 0,
             onMouseEnter: () => {
-              e.current.autoplay && t.current !== null && t.current.clearTimer();
+              e.current.autoplay && r.current !== null && r.current.clearTimer();
             },
             onMouseLeave: () => {
-              e.current.autoplay && t.current !== null && t.current.startTimer();
+              e.current.autoplay && r.current !== null && r.current.startTimer();
             },
-            onTouchStart: H,
-            "data-scrollbar": r.showScrollbar,
-            children: N.length > 0 && N.map((l, n) => /* @__PURE__ */ o(
-              J,
+            onTouchStart: W,
+            "data-scrollbar": e.current.showScrollbar,
+            children: M.length > 0 && M.map((t, n) => /* @__PURE__ */ o(
+              Z,
               {
-                slide: l,
+                slide: t,
                 index: n,
-                currentIndex: r.wrapAround ? 1 : 0,
-                variableHeight: r.variableHeight
+                currentIndex: e.current.wrapAround ? 1 : 0,
+                variableHeight: e.current.variableHeight
               },
-              `carousel${_}-slide${n}`
+              `carousel${g}-slide${n}`
             ))
           }
         ),
-        r.showControls && b.length > e.current.cellsPerSlide && /* @__PURE__ */ O("div", { className: a["carousel-controls"], children: [
+        e.current.showControls && x.length > e.current.cellsPerSlide && /* @__PURE__ */ K("div", { className: a["carousel-controls"], children: [
           /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              ref: g,
+              ref: S,
               title: "Previous Item",
-              className: z([
-                a["carousel-controls__btn"],
-                a["carousel-controls__previous"],
-                "carousel-controls__previous"
-              ]),
-              "aria-controls": m.current,
+              className: _([a["carousel-controls__btn"], a["carousel-controls__previous"], "carousel-controls__previous"]),
+              "aria-controls": p.current,
               "aria-label": "Previous Item",
               onClick: () => {
-                t.current.determineScrollAction(-1);
+                r.current.determineScrollAction(-1);
               },
               onMouseEnter: () => {
-                e.current.autoplay && t.current !== null && t.current.clearTimer();
+                e.current.autoplay && r.current !== null && r.current.clearTimer();
               },
               onMouseLeave: () => {
-                e.current.autoplay && t.current !== null && t.current.startTimer();
+                e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(X, { width: r.controlArrowSize, height: r.controlArrowSize }) })
+              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(re, { width: e.current.controlArrowSize, height: e.current.controlArrowSize }) })
             }
           ),
           /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              ref: E,
+              ref: T,
               title: "Next Item",
-              className: z([a["carousel-controls__btn"], a["carousel-controls__next"], "carousel-controls__next"]),
-              "aria-controls": m.current,
+              className: _([a["carousel-controls__btn"], a["carousel-controls__next"], "carousel-controls__next"]),
+              "aria-controls": p.current,
               "aria-label": "Next Item",
               onClick: () => {
-                t.current.determineScrollAction(1);
+                r.current.determineScrollAction(1);
               },
               onMouseEnter: () => {
-                e.current.autoplay && t.current !== null && t.current.clearTimer();
+                e.current.autoplay && r.current !== null && r.current.clearTimer();
               },
               onMouseLeave: () => {
-                e.current.autoplay && t.current !== null && t.current.startTimer();
+                e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(Y, { width: r.controlArrowSize, height: r.controlArrowSize }) })
+              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(te, { width: e.current.controlArrowSize, height: e.current.controlArrowSize }) })
             }
           )
         ] }),
-        $.current && k.length > 1 && /* @__PURE__ */ o("div", { className: [a["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ o("ol", { className: a["carousel-nav__list"], ref: I, children: k.map((l, n) => /* @__PURE__ */ o(
+        e.current.showPagination && k.length > 1 && /* @__PURE__ */ o("div", { className: [a["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ o("ol", { className: a["carousel-nav__list"], ref: $, children: k.map((t, n) => /* @__PURE__ */ o(
           "li",
           {
-            className: z([a["carousel-nav__item"], "carousel-nav__item"]),
+            className: _([a["carousel-nav__item"], "carousel-nav__item"]),
             "data-current": n === 0 ? "true" : "false",
             onClick: () => {
-              t.current.navigateToIndex(n);
+              r.current.navigateToIndex(n);
             },
             title: `Navigate to slide ${n + 1}`
           },
-          `carousel${m}-nav-${n}`
+          `carousel${p}-nav-${n}`
         )) }) })
       ]
     }

package/dist/components/Carousel/CarouselUtils.class.js

@@ -1,55 +1,54 @@
-var w = (o) => {
-  throw TypeError(o);
+var g = (r) => {
+  throw TypeError(r);
 };
-var G = (o, t, s) => t.has(o) || w("Cannot " + s);
-var y = (o, t, s) => t.has(o) ? w("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, s);
-var i = (o, t, s) => (G(o, t, "access private method"), s);
-var e, T, S, L, p, f, v, B, A, z;
-class N {
-  constructor({ carouselEl: t, scrollerEl: s, paginationEl: a, slides: O, navBtnEls: P = { next: {}, previous: {} }, options: n }) {
-    y(this, e);
-    if (!("onscrollend" in window)) {
-      let d = function(h, r, b) {
-        let c = h[r];
-        h[r] = function() {
-          let l = Array.prototype.slice.apply(arguments, [0]);
-          c.apply(this, l), l.unshift(c), b.apply(this, l);
-        };
-      }, I = function(h, r, b, c) {
-        if (r !== "scroll" && r !== "scrollend")
-          return;
-        let l = this, u = E.get(l);
-        if (u === void 0) {
-          let x = 0;
-          u = {
-            scrollListener: (W) => {
-              clearTimeout(x), x = setTimeout(() => {
-                m.size ? setTimeout(u.scrollListener, 100) : (l.dispatchEvent(C), x = 0);
-              }, 100);
-            },
-            listeners: 0
-            // Count of number of listeners.
-          }, h.apply(l, ["scroll", u.scrollListener]), E.set(l, u);
-        }
-        u.listeners++;
-      }, g = function(h, r, b) {
-        if (r !== "scroll" && r !== "scrollend")
-          return;
-        let c = this, l = E.get(c);
-        l !== void 0 && (l[r]--, !(--l.listeners > 0) && (h.apply(c, ["scroll", l.scrollListener]), E.delete(c)));
-      };
-      const C = new Event("scrollend"), m = /* @__PURE__ */ new Set();
-      document.addEventListener("touchstart", (h) => {
-        for (let r of h.changedTouches)
-          m.add(r.identifier);
-      }, { passive: !0 }), document.addEventListener("touchend", (h) => {
-        for (let r of h.changedTouches)
-          m.delete(r.identifier);
-      }, { passive: !0 });
-      let E = /* @__PURE__ */ new WeakMap();
-      d(Element.prototype, "addEventListener", I), d(window, "addEventListener", I), d(document, "addEventListener", I), d(Element.prototype, "removeEventListener", g), d(window, "removeEventListener", g), d(document, "removeEventListener", g);
-    }
-    this.carouselEl = t, this.scrollerEl = s, this.paginationEl = a, this.slides = O, this.currentIndex = 0, this.slideEls = [...s.children], this.navBtnEls = P, this.currentIntersecting = {}, this.options = n, n.autoplay && (this.timer = null, this.timerInterval = (n == null ? void 0 : n.delay) ?? 3500, this.startTimer()), this.slideGutterSize = (n == null ? void 0 : n.slideGutterSize) ?? 25, this.showPagination = n == null ? void 0 : n.showPagination, this.isInitialScroll = !0, this.totalSlideEls = this.slideEls.length, this.totalSlides = Math.ceil(this.slides.length / this.options.cellsPerSlide), i(this, e, T).call(this), i(this, e, L).call(this), i(this, e, S).call(this);
+var L = (r, t, e) => t.has(r) || g("Cannot " + e);
+var b = (r, t, e) => t.has(r) ? g("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e);
+var i = (r, t, e) => (L(r, t, "access private method"), e);
+let u = /* @__PURE__ */ new WeakMap();
+const B = new Event("scrollend"), p = /* @__PURE__ */ new Set();
+function o(r, t, e) {
+  let l = r[t];
+  r[t] = function() {
+    let a = Array.prototype.slice.apply(arguments, [0]);
+    l.apply(this, a), a.unshift(l), e.apply(this, a);
+  };
+}
+function E(r, t) {
+  if (t !== "scroll" && t !== "scrollend")
+    return;
+  let e = u.get(this);
+  if (e === void 0) {
+    let l = 0;
+    e = {
+      scrollListener: () => {
+        clearTimeout(l), l = setTimeout(() => {
+          p.size ? setTimeout(e.scrollListener, 100) : (this.dispatchEvent(B), l = 0);
+        }, 100);
+      },
+      listeners: 0
+      // Count of number of listeners.
+    }, r.apply(this, ["scroll", e.scrollListener]), u.set(this, e);
+  }
+  e.listeners++;
+}
+function m(r, t) {
+  if (t !== "scroll" && t !== "scrollend")
+    return;
+  let e = u.get(this);
+  e !== void 0 && (e[t]--, !(--e.listeners > 0) && (r.apply(this, ["scroll", e.scrollListener]), u.delete(this)));
+}
+const z = "onscrollend" in window;
+var s, x, A, w, d, h, c, y, I, T;
+class P {
+  constructor({ carouselEl: t, scrollerEl: e, paginationEl: l, slides: a, navBtnEls: S = { next: {}, previous: {} }, options: n }) {
+    b(this, s);
+    z || (document.addEventListener("touchstart", (f) => {
+      for (let v of f.changedTouches)
+        p.add(v.identifier);
+    }, { passive: !0 }), document.addEventListener("touchend", (f) => {
+      for (let v of f.changedTouches)
+        p.delete(v.identifier);
+    }, { passive: !0 }), o(Element.prototype, "addEventListener", E), o(window, "addEventListener", E), o(document, "addEventListener", E), o(Element.prototype, "removeEventListener", m), o(window, "removeEventListener", m), o(document, "removeEventListener", m)), this.carouselEl = t, this.scrollerEl = e, this.paginationEl = l, this.slides = a, this.currentIndex = 0, this.slideEls = [...e.children], this.navBtnEls = S, this.currentIntersecting = {}, this.options = n, n.autoplay && (this.timer = null, this.timerInterval = (n == null ? void 0 : n.delay) ?? 3500, this.startTimer()), this.slideGutterSize = (n == null ? void 0 : n.slideGutterSize) ?? 25, this.showPagination = n == null ? void 0 : n.showPagination, this.isInitialScroll = !0, this.totalSlideEls = this.slideEls.length, this.totalSlides = Math.ceil(this.slides.length / this.options.cellsPerSlide), i(this, s, x).call(this), i(this, s, w).call(this), i(this, s, A).call(this);
   }
   /**
    * starts the autoplay timer
@@ -73,7 +72,7 @@ class N {
    * @param {number} dir - a number representing the direction of scroll 1 for forward, -1 for backward
    */
   determineScrollAction(t) {
-    this.options.autoplay && this.timer !== null && this.clearTimer(), t === 1 ? this.currentIndex === this.totalSlides - 1 ? this.options.wrapAround && (this.scrollerEl.style.scrollBehavior = "auto", this.scrollerEl.scrollTo(0, 0), i(this, e, f).call(this, t), this.currentIndex = 0) : (i(this, e, f).call(this, t), this.currentIndex += 1) : t === -1 && (this.currentIndex === 0 ? this.options.wrapAround && (this.scrollerEl.style.scrollBehavior = "auto", this.scrollerEl.scrollTo(99999, 0), this.currentIndex = this.totalSlides - 1, i(this, e, f).call(this, t)) : (i(this, e, f).call(this, t), this.currentIndex -= 1)), this.options.autoplay && this.timer === null && this.startTimer();
+    this.options.autoplay && this.timer !== null && this.clearTimer(), t === 1 ? this.currentIndex === this.totalSlides - 1 ? this.options.wrapAround && (this.scrollerEl.style.scrollBehavior = "auto", this.scrollerEl.scrollTo(0, 0), i(this, s, h).call(this, t), this.currentIndex = 0) : (i(this, s, h).call(this, t), this.currentIndex += 1) : t === -1 && (this.currentIndex === 0 ? this.options.wrapAround && (this.scrollerEl.style.scrollBehavior = "auto", this.scrollerEl.scrollTo(99999, 0), this.currentIndex = this.totalSlides - 1, i(this, s, h).call(this, t)) : (i(this, s, h).call(this, t), this.currentIndex -= 1)), this.options.autoplay && this.timer === null && this.startTimer();
   }
   /**
    * Navigates the carousel to a specific index
@@ -84,8 +83,8 @@ class N {
   navigateToIndex(t) {
     if (t === this.currentIndex) return;
     this.options.autoplay && this.clearTimer();
-    let s = t > this.currentIndex ? t - this.currentIndex : this.currentIndex - t, a = t > this.currentIndex ? 1 : -1;
-    this.currentIndex = t, i(this, e, f).call(this, a, s), this.options.autoplay && this.startTimer(), i(this, e, v).call(this);
+    let e = t > this.currentIndex ? t - this.currentIndex : this.currentIndex - t, l = t > this.currentIndex ? 1 : -1;
+    this.currentIndex = t, i(this, s, h).call(this, l, e), this.options.autoplay && this.startTimer(), i(this, s, c).call(this);
   }
   /**
    * Returns the current index of the carousel
@@ -103,22 +102,22 @@ class N {
     if (this.timer === null && this.options.autoplay && this.startTimer(), this.currentIntersecting.target) {
       const t = Number.parseInt(this.currentIntersecting.target.getAttribute("data-index"), 10);
       if (!this.options.wrapAround) {
-        this.currentIndex = t, i(this, e, v).call(this);
+        this.currentIndex = t, i(this, s, c).call(this);
         return;
       }
-      t === 0 ? (this.currentIndex = this.slides.length - 1, i(this, e, p).call(this, { scrollport: this.scrollerEl, element: this.slideEls[this.totalSlides] })) : t === this.totalSlideEls - 1 ? (this.currentIndex = 0, i(this, e, p).call(this, { scrollport: this.scrollerEl, element: this.slideEls[1] })) : this.currentIndex = t - 1;
+      t === 0 ? (this.currentIndex = this.slides.length - 1, i(this, s, d).call(this, { scrollport: this.scrollerEl, element: this.slideEls[this.totalSlides] })) : t === this.totalSlideEls - 1 ? (this.currentIndex = 0, i(this, s, d).call(this, { scrollport: this.scrollerEl, element: this.slideEls[1] })) : this.currentIndex = t - 1;
     }
-    i(this, e, v).call(this);
+    i(this, s, c).call(this);
   }
 }
-e = new WeakSet(), /**
+s = new WeakSet(), /**
  * adds an observer to the scroller element that we can use to 
  * determine which slide is intersecting
  */
-T = function() {
+x = function() {
   this.carouselObserver = new IntersectionObserver((t) => {
-    for (let s of t)
-      s.isIntersecting && (this.currentIntersecting = s);
+    for (let e of t)
+      e.isIntersecting && (this.currentIntersecting = e);
   }, {
     root: this.scrollerEl,
     threshold: 0.8
@@ -126,30 +125,30 @@ T = function() {
 }, /**
  * sets listeners on the slide elements for the observer
  */
-S = function() {
+A = function() {
   for (let t of this.slideEls)
     this.carouselObserver.observe(t);
 }, /**
  * sets some intial settings for the carousel based on some of the options
  */
-L = function() {
-  this.options.wrapAround ? (this.scrollerEl.style.scrollBehavior = "auto", this.scrollerEl.scrollTo(-9999, 0), i(this, e, p).call(this, { scrollport: this.scrollerEl, element: this.scrollerEl.children[1] })) : this.options.showControls ? (this.navBtnEls.previous.setAttribute("disabled", !0), i(this, e, v).call(this)) : i(this, e, A).call(this), this.totalSlides === 1 && this.slideEls[0].removeAttribute("inert");
+w = function() {
+  this.options.wrapAround ? (this.scrollerEl.style.scrollBehavior = "auto", this.scrollerEl.scrollTo(-9999, 0), i(this, s, d).call(this, { scrollport: this.scrollerEl, element: this.scrollerEl.children[1] })) : this.options.showControls ? (this.navBtnEls.previous.setAttribute("disabled", !0), i(this, s, c).call(this)) : i(this, s, I).call(this), this.totalSlides === 1 && this.slideEls[0].removeAttribute("inert");
 }, /**
  * Scrolls the carousel to a specific child element
  * @param {*} param0 - an object containing the scrollport element and the child element to scroll to 
  */
-p = function({ scrollport: t, element: s }) {
-  const a = this.slideGutterSize * 2 / 100;
-  t.style.scrollBehavior = "auto", t.scrollTo(Math.abs(t.offsetLeft - s.offsetLeft + s.clientWidth * a), 0);
+d = function({ scrollport: t, element: e }) {
+  const l = this.slideGutterSize * 2 / 100;
+  t.style.scrollBehavior = "auto", t.scrollTo(Math.abs(t.offsetLeft - e.offsetLeft + e.clientWidth * l), 0);
 }, /**
  * Scrolls the carousel in a specified direction by a specified distance
  * 
  * @param {number} dir - a number representing the direction of scroll 1 for forward, -1 for backward 
  * @param {number} distance - a number representing the number of slides to scroll
  */
-f = function(t, s = 1) {
+h = function(t, e = 1) {
   this.scrollerEl.style.scrollBehavior = "smooth", this.scrollerEl.scrollBy({
-    left: this.scrollerEl.clientWidth * ((100 - this.slideGutterSize * 2) / 100) * s * t,
+    left: this.scrollerEl.clientWidth * ((100 - this.slideGutterSize * 2) / 100) * e * t,
     top: 0,
     behavior: "smooth"
   });
@@ -159,29 +158,29 @@ f = function(t, s = 1) {
  * add methods here to have them sync 
  * when scroller is scrolled
  */
-v = function() {
-  i(this, e, A).call(this), this.showPagination && i(this, e, z).call(this), this.options.wrapAround || i(this, e, B).call(this);
+c = function() {
+  i(this, s, I).call(this), this.showPagination && i(this, s, T).call(this), this.options.wrapAround || i(this, s, y).call(this);
 }, /**
  * Sets the control arrow buttons to disabled if the carousel is at the start or end
  */
-B = function() {
+y = function() {
   this.navBtnEls.previous && this.navBtnEls.next && (this.navBtnEls.previous.removeAttribute("disabled"), this.navBtnEls.next.removeAttribute("disabled"), this.currentIndex === 0 && this.navBtnEls.previous.toggleAttribute("disabled"), this.currentIndex === this.slideEls.length - 1 && this.navBtnEls.next.toggleAttribute("disabled"));
 }, /**
  * Sets the inert attribute on all slides that are not the current slide
  */
-A = function() {
+I = function() {
   const t = this.options.wrapAround ? this.currentIndex + 1 : this.currentIndex;
-  this.slideEls.length === 1 ? this.slideEls[0].removeAttribute("inert") : this.slideEls.forEach((s, a) => {
-    s.toggleAttribute("inert", a !== t);
+  this.slideEls.length === 1 ? this.slideEls[0].removeAttribute("inert") : this.slideEls.forEach((e, l) => {
+    e.toggleAttribute("inert", l !== t);
   });
 }, /**
  * Sets the pagination indicator to the current slide
  */
-z = function() {
-  [...this.paginationEl.children].forEach((t, s) => {
-    s === this.currentIndex ? t.setAttribute("data-current", "true") : t.setAttribute("data-current", "false");
+T = function() {
+  [...this.paginationEl.children].forEach((t, e) => {
+    e === this.currentIndex ? t.setAttribute("data-current", "true") : t.setAttribute("data-current", "false");
   });
 };
 export {
-  N as default
+  P as default
 };

package/dist/components/Carousel/navigations/Pagination.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import o from "react";
-import { c as r } from "../../../Carousel.module-CzL9vVtu.mjs";
+import { c as r } from "../../../Carousel.module-DOrBKQEQ.mjs";
 const n = o.forwardRef(({ slides: t, carouselId: l }, s) => /* @__PURE__ */ e("div", { className: `${r["carousel-nav"]} carousel-nav`, children: /* @__PURE__ */ e("ol", { className: r["carousel-nav__list"], ref: s, children: t.map((c, a) => /* @__PURE__ */ e(
   "li",
   {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.17",
+  "version": "1.0.18-dev.1",
   "name": "@scrippsproduct/networks-ui-library",
   "description": "React Component Library for use in Scripps Networks external applications",
   "author": {

package/dist/Carousel.module-CzL9vVtu.mjs

@@ -1,14 +0,0 @@
-import './assets/Carousel.css';const _ = "_carousel_idy2d_1", o = "_carousel__scroller_idy2d_11", s = {
-  carousel: _,
-  carousel__scroller: o,
-  "carousel-controls": "_carousel-controls_idy2d_39",
-  "carousel-controls__btn": "_carousel-controls__btn_idy2d_43",
-  "carousel-controls__previous": "_carousel-controls__previous_idy2d_68",
-  "carousel-controls__next": "_carousel-controls__next_idy2d_75",
-  "carousel-nav": "_carousel-nav_idy2d_87",
-  "carousel-nav__list": "_carousel-nav__list_idy2d_91",
-  "carousel-nav__item": "_carousel-nav__item_idy2d_100"
-};
-export {
-  s as c
-};