@scrippsproduct/networks-ui-library 2.0.11-alpha.0 → 2.0.11-alpha.1

package/dist/assets/ImageCard.css

@@ -1 +1 @@
-image-card{--overlay-content-text-color: #fff;--align-overlay-content: flex-end;--justify-overlay-content: flex-start;display:flex;flex-direction:column;justify-content:stretch;box-sizing:border-box;height:100%;margin:0;padding:0 0 1rem}._image-card--clickable_1tnka_14{cursor:pointer}._image-card__img-wrapper_1tnka_18{display:grid;grid-template-areas:"img"}._image-card__img-wrapper_1tnka_18>*{grid-area:img;place-self:var(--align-overlay-content) var(--justify-overlay-content)}._image-card__img-wrapper_1tnka_18>*>*{padding:0 1.5rem;color:var(--overlay-content-text-color);text-shadow:1px 1px 2px rgba(0,0,0,.4)}._image-card__img-wrapper_1tnka_18>*>source{display:contents}._image-card--inline_1tnka_35 ._image-card__img-wrapper_1tnka_18{flex:0 1 min(50%,750px)}._image-card__image_1tnka_39{width:100%;padding:0!important}._image-card__image_1tnka_39>img,._image-card__mobile-image_1tnka_45{aspect-ratio:var(--image-aspect-ratio);width:100%;padding:0;object-fit:cover;object-position:var(--background-image-position);background-color:#efefef}._image-card__mobile-image_1tnka_45{display:none;aspect-ratio:var(--mobile-image-aspect-ratio);object-position:var(--mobile-background-image-position)}@media screen and (max-width:700px){._image-card__mobile-image_1tnka_45{display:block}._image-card__image_1tnka_39{object-position:var(--mobile-background-image-position)}._image-card__mobile-image_1tnka_45~._image-card__image_1tnka_39{display:none}}._image-card--inline_1tnka_35{flex-direction:row;gap:2.5rem;padding:0}._image-card__play-icon_1tnka_77{cursor:pointer;position:relative;overflow:hidden;display:grid;place-self:center center;padding:1.5rem;border:1px rgba(0,0,0,.4) dotted;border-radius:50%;background-color:#ffffff80;transition:scale .225s ease-in-out}._image-card__play-icon_1tnka_77>._play-icon__triangle_1tnka_89{position:absolute;top:32%;left:35%;display:block;width:0;height:0;border-top:.6rem solid transparent;border-right:none;border-bottom:.6rem solid transparent;border-left:1.2rem solid rgba(0,0,0,.5);background-color:transparent;transition:scale .225s ease-in-out,left .225s ease-in-out}._image-card__play-icon_1tnka_77:hover{scale:1.1}._image-card__play-icon_1tnka_77:hover>._play-icon__triangle_1tnka_89{left:42%;scale:1.1}._image-card__content_1tnka_111{padding:1.5rem 0 .5rem;text-align:left}._image-card__content_1tnka_111>div{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--content-line-clamp);line-clamp:var(--content-line-clamp);margin:1.5em 0}._image-card__content_1tnka_111 h2{margin-top:0}._image-card--inline_1tnka_35 ._image-card__content_1tnka_111{align-self:center;padding:0}._image-card__cta-wrapper_1tnka_132{justify-self:flex-end;margin-top:auto}._image-card__cta_1tnka_132{color:var(--base-anchor-color);text-align:left}._image-card__overlay-content_1tnka_142{padding-bottom:1.5rem}image-card.sports-leauge-card{padding-block-end:1.5rem;border-radius:20px;color:#fff;background-color:#671982}image-card.sports-leauge-card .leauge-card__content,image-card.sports-leauge-card .h4,image-card.sports-leauge-card .image-card__cta-wrapper{padding-inline:1.5rem}image-card.sports-leauge-card .image-card__content>div{margin-block:1rem}image-card.sports-leauge-card .image-card__img-wrapper img{border-radius:20px 20px 0 0}image-card.sports-leauge-card .h4{margin-block-end:0}image-card.sports-leauge-card .image-card__cta{display:block;padding-block:1rem;border-radius:20px;font-weight:500;color:#fff;text-align:center;text-decoration:none;background-color:#a026a0;transition:transform .3s ease}image-card.sports-leauge-card .image-card__cta:hover{transform:scale3d(1.05,1.05,1.05)}image-card.sports-leauge-card .league-card__date{margin-block-end:.5rem;font-size:.875rem}image-card.sports-leauge-card .league-card__teams{font-size:1.2rem;font-weight:500}
+image-card{--overlay-content-text-color: #fff;--align-overlay-content: flex-end;--justify-overlay-content: flex-start;display:flex;flex-direction:column;justify-content:stretch;box-sizing:border-box;height:100%;margin:0;padding:0 0 1rem}._image-card--clickable_1tnka_14{cursor:pointer}._image-card__img-wrapper_1tnka_18{display:grid;grid-template-areas:"img"}._image-card__img-wrapper_1tnka_18>*{grid-area:img;place-self:var(--align-overlay-content) var(--justify-overlay-content)}._image-card__img-wrapper_1tnka_18>*>*{padding:0 1.5rem;color:var(--overlay-content-text-color);text-shadow:1px 1px 2px rgba(0,0,0,.4)}._image-card__img-wrapper_1tnka_18>*>source{display:contents}._image-card--inline_1tnka_35 ._image-card__img-wrapper_1tnka_18{flex:0 1 min(50%,750px)}._image-card__image_1tnka_39{width:100%;padding:0!important}._image-card__image_1tnka_39>img,._image-card__mobile-image_1tnka_45{aspect-ratio:var(--image-aspect-ratio);width:100%;padding:0;object-fit:cover;object-position:var(--background-image-position);background-color:#efefef}._image-card__mobile-image_1tnka_45{display:none;aspect-ratio:var(--mobile-image-aspect-ratio);object-position:var(--mobile-background-image-position)}@media screen and (max-width:700px){._image-card__mobile-image_1tnka_45{display:block}._image-card__image_1tnka_39{object-position:var(--mobile-background-image-position)}._image-card__mobile-image_1tnka_45~._image-card__image_1tnka_39{display:none}}._image-card--inline_1tnka_35{flex-direction:row;gap:2.5rem;padding:0}._image-card__play-icon_1tnka_77{cursor:pointer;position:relative;overflow:hidden;display:grid;place-self:center center;padding:1.5rem;border:1px rgba(0,0,0,.4) dotted;border-radius:50%;background-color:#ffffff80;transition:scale .225s ease-in-out}._image-card__play-icon_1tnka_77>._play-icon__triangle_1tnka_89{position:absolute;top:32%;left:35%;display:block;width:0;height:0;border-top:.6rem solid transparent;border-right:none;border-bottom:.6rem solid transparent;border-left:1.2rem solid rgba(0,0,0,.5);background-color:transparent;transition:scale .225s ease-in-out,left .225s ease-in-out}._image-card__play-icon_1tnka_77:hover{scale:1.1}._image-card__play-icon_1tnka_77:hover>._play-icon__triangle_1tnka_89{left:42%;scale:1.1}._image-card__content_1tnka_111{padding:1.5rem 0 .5rem;text-align:left}._image-card__content_1tnka_111>div{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--content-line-clamp);line-clamp:var(--content-line-clamp);margin:1.5em 0}._image-card__content_1tnka_111 h2{margin-top:0}._image-card--inline_1tnka_35 ._image-card__content_1tnka_111{align-self:center;padding:0}._image-card__cta-wrapper_1tnka_132{justify-self:flex-end;margin-top:auto}._image-card__cta_1tnka_132{color:var(--base-anchor-color);text-align:left}._image-card__overlay-content_1tnka_142{padding-bottom:1.5rem}image-card.sports-leauge-card{padding-block-end:1.5rem;border-radius:20px;color:#fff;background-color:#671982}image-card.sports-leauge-card .leauge-card__content,image-card.sports-leauge-card .h4,image-card.sports-leauge-card .image-card__cta-wrapper{padding-inline:1.5rem}image-card.sports-leauge-card .image-card__content>div{margin-block:1rem}image-card.sports-leauge-card .image-card__img-wrapper img{border-radius:20px 20px 0 0}image-card.sports-leauge-card .h4{margin-block-end:0}image-card.sports-leauge-card .image-card__cta{display:block;padding:1rem;border-radius:20px;font-weight:500;color:#fff;text-align:center;text-decoration:none;background-color:#a026a0;transition:transform .3s ease}image-card.sports-leauge-card .image-card__cta:hover{transform:scale3d(1.05,1.05,1.05)}image-card.sports-leauge-card .league-card__date{margin-block-end:.5rem;font-size:.875rem}image-card.sports-leauge-card .league-card__teams{font-size:1.2rem;font-weight:500}

package/dist/components/Carousel/Carousel.js

@@ -1,17 +1,74 @@
-import { jsx as l, Fragment as ee, jsxs as j } from "react/jsx-runtime";
-import { useRef as i, useState as m, useEffect as B, useCallback as u, Suspense as re } from "react";
-import { chunkArray as te, classes as g } from "../../utils/helpers.js";
-import ne from "./CarouselUtils.class.js";
-import { CarouselSlide as le } from "../CarouselSlide/CarouselSlide.js";
-import { Loading as ce } from "../Loading/Loading.js";
-import { c as a } from "../../Carousel.module-Nwf_zL9b.mjs";
+import { jsx as s, Fragment as Y, jsxs as K } from "react/jsx-runtime";
+import { useRef as d, useState as v, useEffect as U, useCallback as S, Suspense as ee } from "react";
+import { chunkArray as re, classes as _ } from "../../utils/helpers.js";
+import te from "./CarouselUtils.class.js";
+import { CarouselSlide as ne } from "../CarouselSlide/CarouselSlide.js";
+import { Loading as le } from "../Loading/Loading.js";
+import { c as f } from "../../Carousel.module-Nwf_zL9b.mjs";
 import { C as oe } from "../../chevron-left-D0UjbrKw.mjs";
-import { C as se } from "../../chevron-right-0ZF3LruR.mjs";
-const P = window.matchMedia("(width <= 600px)"), b = window.matchMedia("(width <= 800px"), z = window.matchMedia("(width <= 1024px"), E = window.matchMedia("(width <= 1280px");
-function we({
-  id: L,
-  cells: w,
-  options: x = {
+import { C as ce } from "../../chevron-right-0ZF3LruR.mjs";
+const R = 10, G = {
+  one: 1,
+  two: 2,
+  three: 3,
+  four: 4,
+  five: 5,
+  six: 6,
+  seven: 7,
+  eight: 8,
+  nine: 9,
+  ten: 10
+}, se = {
+  one: 600,
+  two: 800,
+  three: 1024,
+  four: 1750
+}, ie = {
+  one: ({ wrapAround: o }, c) => ({
+    showControls: !1,
+    showPagination: !1,
+    cellsPerSlide: c,
+    cellsPosition: o ? "center" : "flex-start",
+    gutterSize: R
+  }),
+  two: ({ cellsPerSlide: o }, c) => ({
+    showControls: !1,
+    gutterSize: R,
+    cellsPerSlide: y(o, c)
+  }),
+  three: ({ cellsPerSlide: o }, c) => ({
+    showControls: !1,
+    gutterSize: R,
+    cellsPerSlide: y(o, c)
+  }),
+  four: ({ cellsPerSlide: o, showPagination: c }, l) => ({
+    showControls: !c,
+    cellsPerSlide: y(o, l)
+  })
+};
+function y(o, c) {
+  return Math.min(o || c, c);
+}
+function ae(o = {}) {
+  return Object.keys(G).map((l) => {
+    const { width: i = se[l], cellsPerSlide: p = G[l] } = o[l] ?? {};
+    return { name: l, width: i, cellsPerSlide: p };
+  }).filter((l) => l.width !== void 0).sort((l, i) => l.width - i.width).map(({ name: l, width: i, cellsPerSlide: p }) => ({
+    name: l,
+    cellsPerSlide: p,
+    mediaQuery: window.matchMedia(`(width <= ${i}px)`)
+  }));
+}
+function ue(o, c) {
+  const l = c.find(({ mediaQuery: p }) => p.matches);
+  if (!l) return {};
+  const i = ie[l.name];
+  return i ? i(o, l.cellsPerSlide) : { cellsPerSlide: y(o.cellsPerSlide, l.cellsPerSlide) };
+}
+function _e({
+  id: o,
+  cells: c,
+  options: l = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 48,
@@ -27,176 +84,153 @@ function we({
     slideAspectRatio: "4/2",
     slideGap: 1.5,
     cellsPerSlide: 1,
+    breakpoints: {
+      one: { width: 600, cellsPerSlide: 1 },
+      two: { width: 800, cellsPerSlide: 2 },
+      three: { width: 1024, cellsPerSlide: 3 },
+      four: { width: 1750, cellsPerSlide: 4 }
+    },
     cellAspectRatio: "4/2",
     cellsPosition: "center",
     wrapAround: !0
   }
 }) {
-  const h = i(`carousel-${L}`), I = i(null), c = i(null), R = i(null), p = i([...w]), $ = i(null), S = i(null), r = i(null), e = i(x), o = i(x), N = i("-50%"), [T, H] = m([]), [M, U] = m([]), [k, q] = m(0), [F, D] = m(!1);
-  B(() => {
-    const t = () => {
-      P.matches ? e.current = {
-        ...o.current,
-        showControls: !1,
-        showPagination: !1,
-        cellsPerSlide: 1,
-        cellsPosition: o.current.wrapAround ? "center" : "flex-start",
-        gutterSize: 10
-      } : b.matches ? o.current.cellsPerSlide !== 1 ? e.current = {
-        ...o.current,
-        cellsPerSlide: 2,
-        showControls: !1,
-        gutterSize: 10
-      } : e.current = {
-        ...o.current,
-        showControls: !1,
-        gutterSize: 10
-      } : z.matches ? o.current.cellsPerSlide !== 1 && o.current.cellsPerSlide !== 2 ? e.current = {
-        ...o.current,
-        cellsPerSlide: 3,
-        showControls: !1,
-        gutterSize: 10
-      } : e.current = {
-        ...o.current,
-        showControls: !1,
-        gutterSize: 10
-      } : E.matches ? o.current.showPagination ? e.current = {
-        ...o.current,
-        showControls: !1
-      } : e.current = {
-        ...o.current
-      } : e.current = {
-        ...o.current
+  const i = d(`carousel-${o}`), p = d(null), a = d(null), z = d(null), g = d([...c]), L = d(null), P = d(null), r = d(null), e = d(l), A = d(l), T = d("-50%"), [x, j] = v([]), [N, H] = v([]), [k, F] = v(0), [V, $] = v(!1);
+  U(() => {
+    const t = ae(A.current.breakpoints), n = () => {
+      e.current = {
+        ...A.current,
+        ...ue(A.current, t)
       };
     };
-    t();
-    const n = () => {
-      q((s) => s + 1), t();
+    n();
+    const u = () => {
+      F((h) => h + 1), n();
     };
-    return P.addEventListener("change", n), b.addEventListener("change", n), z.addEventListener("change", n), E.addEventListener("change", n), () => {
-      P.removeEventListener("change", n), b.removeEventListener("change", n), z.removeEventListener("change", n), E.removeEventListener("change", n);
+    return t.forEach(({ mediaQuery: h }) => h.addEventListener("change", u)), () => {
+      t.forEach(({ mediaQuery: h }) => h.removeEventListener("change", u));
     };
   }, []);
-  const O = u((t, n) => {
-    const s = te(n, t);
-    U([...s]);
-    let _ = [];
-    for (let f = 0; f <= s.length - 1; f++)
-      _[f] = {
-        ariaLabel: `${f + 1} of ${s.length}`,
-        layout: s[f][0].layout || "",
+  const O = S((t, n) => {
+    const u = re(n, t);
+    H([...u]);
+    let h = [];
+    for (let w = 0; w <= u.length - 1; w++)
+      h[w] = {
+        ariaLabel: `${w + 1} of ${u.length}`,
+        layout: u[w][0].layout || "",
         cells: [
-          ...s[f]
+          ...u[w]
         ]
       };
-    const C = [..._], A = [..._], Y = C.slice(-1), Z = C.slice(0);
-    return A.push(Z[0]), A.unshift(Y[0]), e.current.wrapAround && t.length > n ? A : C;
-  }, []), d = u(() => {
+    const E = [...h], I = [...h], J = E.slice(-1), X = E.slice(0);
+    return I.push(X[0]), I.unshift(J[0]), e.current.wrapAround && t.length > n ? I : E;
+  }, []), m = S(() => {
     e.current.autoplay && r.current && r.current.clearTimer();
-  }, []), W = u((t) => {
-    d();
+  }, []), W = S((t) => {
+    m();
     const n = t.key;
     n === "ArrowLeft" ? (t.preventDefault(), r.current && r.current.determineScrollAction(-1)) : n === "ArrowRight" && (t.preventDefault(), r.current && r.current.determineScrollAction(1));
-  }, [d]), J = u(() => {
-    d(), c.current !== null && c.current.addEventListener("scrollend", () => {
+  }, [m]), q = S(() => {
+    m(), a.current !== null && a.current.addEventListener("scrollend", () => {
       r.current && r.current.handleScrollEnd();
     }, { once: !0 });
-  }, [d]), v = u(() => {
-    d(), c.current !== null && c.current.addEventListener("scrollend", () => {
-      r.current && r.current.handleScrollEnd(), c.current && c.current.addEventListener("scroll", v, { once: !0 });
+  }, [m]), C = S(() => {
+    m(), a.current !== null && a.current.addEventListener("scrollend", () => {
+      r.current && r.current.handleScrollEnd(), a.current && a.current.addEventListener("scroll", C, { once: !0 });
     }, { once: !0 });
-  }, [d]), Q = () => {
+  }, [m]), Q = () => {
     var t;
     (t = r.current) == null || t.destroy();
-  }, y = u(() => {
+  }, b = S(() => {
     //! make sure class is only instantiated once because of reacts
     //! "strict" mode double do hocus pocus
     var t, n;
-    r.current !== null && k > 0 && ((n = (t = r.current).destroy) == null || n.call(t), r.current = null), D(!1), r.current = new ne({
-      carouselEl: I.current,
-      scrollerEl: c.current,
-      paginationEl: R.current,
-      cells: p.current,
+    r.current !== null && k > 0 && ((n = (t = r.current).destroy) == null || n.call(t), r.current = null), $(!1), r.current = new te({
+      carouselEl: p.current,
+      scrollerEl: a.current,
+      paginationEl: z.current,
+      cells: g.current,
       navBtnEls: {
-        next: $.current,
-        previous: S.current
+        next: L.current,
+        previous: P.current
       },
-      id: h.current,
+      id: i.current,
       options: {
         autoplay: e.current.autoplay,
-        wrapAround: e.current.wrapAround && p.current.length > (e.current.cellsPerSlide || 1),
+        wrapAround: e.current.wrapAround && g.current.length > (e.current.cellsPerSlide || 1),
         showPagination: e.current.showPagination,
         delay: e.current.autoplayDelay,
         slideGutterSize: e.current.gutterSize,
         slideAspectRatio: e.current.slideAspectRatio,
-        showControls: e.current.showControls && p.current.length > (e.current.cellsPerSlide || 1),
+        showControls: e.current.showControls && g.current.length > (e.current.cellsPerSlide || 1),
         cellsPerSlide: e.current.cellsPerSlide
       }
-    }), D(!0);
-  }, [k]), V = u(() => {
-    c.current && c.current.addEventListener("scroll", v, { once: !0 });
-  }, [v]), G = () => {
+    }), $(!0);
+  }, [k]), M = S(() => {
+    a.current && a.current.addEventListener("scroll", C, { once: !0 });
+  }, [C]), D = () => {
     var t;
-    return ((t = c.current) == null ? void 0 : t.querySelectorAll("[data-index]").length) ?? 0;
-  }, K = u(() => {
-    const t = O(p.current, e.current.cellsPerSlide ?? 1);
-    H(t);
+    return ((t = a.current) == null ? void 0 : t.querySelectorAll("[data-index]").length) ?? 0;
+  }, B = S(() => {
+    const t = O(g.current, e.current.cellsPerSlide ?? 1);
+    j(t);
     const n = t.length;
-    if (p.current.length > (e.current.cellsPerSlide ?? 1)) {
-      let s = setInterval(() => {
-        c.current !== null && G() >= n && (S.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(s), V(), y());
+    if (g.current.length > (e.current.cellsPerSlide ?? 1)) {
+      let u = setInterval(() => {
+        a.current !== null && D() >= n && (P.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(u), M(), b());
       }, 100);
     } else {
-      let s = setInterval(() => {
-        c.current !== null && G() >= n && (clearInterval(s), y());
+      let u = setInterval(() => {
+        a.current !== null && D() >= n && (clearInterval(u), b());
       }, 100);
     }
-  }, [O, V, y]);
-  B(() => {
+  }, [O, M, b]);
+  U(() => {
     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)`;
+        e.current.showPagination && (t = t + 25), e.current.showScrollbar && (t = t + 6), T.current = `calc(-50% - ${t}px)`;
       }
-      K();
+      B();
     }
     return () => {
       Q();
     };
-  }, [K, e]);
-  const X = () => w.length <= (e.current.cellsPerSlide ?? 1) ? "0" : e.current.wrapAround ? `${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%` : `0 ${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%`;
-  return /* @__PURE__ */ l(ee, { children: e.current !== null && /* @__PURE__ */ j(
+  }, [B, e]);
+  const Z = () => c.length <= (e.current.cellsPerSlide ?? 1) ? "0" : e.current.wrapAround ? `${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%` : `0 ${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%`;
+  return /* @__PURE__ */ s(Y, { children: e.current !== null && /* @__PURE__ */ K(
     "div",
     {
       "aria-label": e.current.title,
       "aria-roledescription": "carousel",
-      className: a.carousel,
-      id: h.current,
-      ref: I,
+      className: f.carousel,
+      id: i.current,
+      ref: p,
       role: "region",
       style: {
-        "--_carousel-gutters": X(),
+        "--_carousel-gutters": Z(),
         "--_slide-aspect-ratio": e.current.slideAspectRatio,
         "--_cell-aspect-ratio": e.current.cellAspectRatio,
         "--_slide-cell-size": `${100 / (e.current.cellsPerSlide ?? 1)}%`,
         "--_cells-position": e.current.cellsPosition,
         "--_control-btns-offset-x": `${e.current.controlButtonsOffset ?? 0}rem`,
         "--_slide-gap": `${e.current.slideGap ?? 0}rem`,
-        "--_controls-transform": N.current
+        "--_controls-transform": T.current
       },
       tabIndex: -1,
       onKeyDown: W,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ s(
           "ol",
           {
             "aria-label": "Items Scroller",
             "aria-live": "polite",
-            className: a.carousel__scroller,
+            className: f.carousel__scroller,
             "data-scrollbar": e.current.showScrollbar,
-            ref: c,
+            ref: a,
             role: "group",
-            style: { opacity: F ? 1 : 0 },
+            style: { opacity: V ? 1 : 0 },
             tabIndex: 0,
             onMouseEnter: () => {
               e.current.autoplay && r.current !== null && r.current.clearTimer();
@@ -204,45 +238,45 @@ function we({
             onMouseLeave: () => {
               e.current.autoplay && r.current !== null && r.current.startTimer();
             },
-            onTouchStart: J,
-            children: /* @__PURE__ */ l(
-              re,
+            onTouchStart: q,
+            children: /* @__PURE__ */ s(
+              ee,
               {
-                fallback: /* @__PURE__ */ l(
+                fallback: /* @__PURE__ */ s(
                   "li",
                   {
-                    className: g([a["carousel__loading-slide"], "carousel__loading-slide"]),
+                    className: _([f["carousel__loading-slide"], "carousel__loading-slide"]),
                     role: "presentation",
                     style: { aspectRatio: "var(--_slide-aspect-ratio)", width: "100%" },
-                    children: /* @__PURE__ */ l(ce, {})
+                    children: /* @__PURE__ */ s(le, {})
                   }
                 ),
-                children: T.length > 0 && T.map((t, n) => /* @__PURE__ */ l(
-                  le,
+                children: x.length > 0 && x.map((t, n) => /* @__PURE__ */ s(
+                  ne,
                   {
                     currentIndex: e.current.wrapAround ? 1 : 0,
                     index: n,
                     slide: { ...t, ariaLabel: t.ariaLabel || "" },
                     variableHeight: e.current.variableHeight
                   },
-                  `carousel${L}-slide${n}`
+                  `carousel${o}-slide${n}`
                 ))
               }
             )
           }
         ),
-        e.current.showControls && w.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ j("div", { className: a["carousel-controls"], children: [
-          /* @__PURE__ */ l(
+        e.current.showControls && c.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ K("div", { className: f["carousel-controls"], children: [
+          /* @__PURE__ */ s(
             "button",
             {
-              "aria-controls": h.current,
+              "aria-controls": i.current,
               "aria-label": "Previous Item",
-              className: g([
-                a["carousel-controls__btn"],
-                a["carousel-controls__previous"],
+              className: _([
+                f["carousel-controls__btn"],
+                f["carousel-controls__previous"],
                 "carousel-controls__previous"
               ]),
-              ref: S,
+              ref: P,
               title: "Previous Item",
               type: "button",
               onClick: () => {
@@ -254,16 +288,16 @@ function we({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(oe, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
+              children: /* @__PURE__ */ s("i", { "aria-hidden": "true", children: /* @__PURE__ */ s(oe, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
             }
           ),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ s(
             "button",
             {
-              "aria-controls": h.current,
+              "aria-controls": i.current,
               "aria-label": "Next Item",
-              className: g([a["carousel-controls__btn"], a["carousel-controls__next"], "carousel-controls__next"]),
-              ref: $,
+              className: _([f["carousel-controls__btn"], f["carousel-controls__next"], "carousel-controls__next"]),
+              ref: L,
               title: "Next Item",
               type: "button",
               onClick: () => {
@@ -275,27 +309,27 @@ function we({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(se, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
+              children: /* @__PURE__ */ s("i", { "aria-hidden": "true", children: /* @__PURE__ */ s(ce, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
             }
           )
         ] }),
-        e.current.showPagination && M.length > 1 && /* @__PURE__ */ l("div", { className: [a["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ l("ol", { className: a["carousel-nav__list"], ref: R, children: M.map((t, n) => /* @__PURE__ */ l(
+        e.current.showPagination && N.length > 1 && /* @__PURE__ */ s("div", { className: [f["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ s("ol", { className: f["carousel-nav__list"], ref: z, children: N.map((t, n) => /* @__PURE__ */ s(
           "li",
           {
-            className: g([a["carousel-nav__item"], "carousel-nav__item"]),
+            className: _([f["carousel-nav__item"], "carousel-nav__item"]),
             "data-current": n === 0 ? "" : void 0,
             title: `Navigate to slide ${n + 1}`,
             onClick: () => {
               r.current && r.current.navigateToIndex(n);
             }
           },
-          `carousel${h}-nav-${n}`
+          `carousel${i}-nav-${n}`
         )) }) })
       ]
     }
   ) });
 }
 export {
-  we as Carousel,
-  we as default
+  _e as Carousel,
+  _e as default
 };

package/dist/src/utils/getCarouselOptions.d.ts

@@ -1,3 +1,4 @@
+import { CarouselBreakpoints } from '../types';
 export declare const getCarouselOptions: (type: "BANNER" | "FEATURED" | "TWO_COLUMN", title: string, env?: string) => {
     paginationType: string;
     showControls: boolean;
@@ -17,4 +18,5 @@ export declare const getCarouselOptions: (type: "BANNER" | "FEATURED" | "TWO_COL
     cellAspectRatio: number | string;
     cellsPosition: string;
     wrapAround: boolean;
+    breakpoints: CarouselBreakpoints;
 } | {};

package/dist/utils/getCarouselOptions.js

@@ -1,6 +1,11 @@
-const a = (t, o, l = "local") => {
+const o = {
+  one: { width: 600, cellsPerSlide: 1 },
+  two: { width: 800, cellsPerSlide: 2 },
+  three: { width: 1024, cellsPerSlide: 3 },
+  four: { width: 1750, cellsPerSlide: 4 }
+}, a = (l, t, s = "local") => {
   let e = {};
-  return t === "BANNER" ? e = {
+  return l === "BANNER" ? e = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 72,
@@ -8,18 +13,19 @@ const a = (t, o, l = "local") => {
     showScrollbar: !1,
     startIndex: 0,
     variableHeight: !1,
-    title: o,
-    autoplay: l !== "local",
+    title: t,
+    autoplay: s !== "local",
     autoplayDelay: 6e3,
     showPagination: !0,
     gutterSize: 0,
-    slideAspectRatio: 2.011764705882353,
+    slideAspectRatio: 1710 / 850,
     slideGap: 1.5,
     cellsPerSlide: 1,
-    cellAspectRatio: 2.011764705882353,
+    cellAspectRatio: 1710 / 850,
     cellsPosition: "center",
-    wrapAround: !0
-  } : t === "FEATURED" ? e = {
+    wrapAround: !0,
+    breakpoints: { ...o }
+  } : l === "FEATURED" ? e = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 64,
@@ -27,7 +33,7 @@ const a = (t, o, l = "local") => {
     showScrollbar: !1,
     startIndex: 0,
     variableHeight: !1,
-    title: o,
+    title: t,
     autoplay: !1,
     autoplayDelay: 6e3,
     showPagination: !1,
@@ -35,10 +41,11 @@ const a = (t, o, l = "local") => {
     slideAspectRatio: "",
     slideGap: 2.5,
     cellsPerSlide: 4,
-    cellAspectRatio: 0.6561461794019934,
+    cellAspectRatio: 395 / 602,
     cellsPosition: "flex-start",
-    wrapAround: !1
-  } : t === "TWO_COLUMN" && (e = {
+    wrapAround: !1,
+    breakpoints: { ...o }
+  } : l === "TWO_COLUMN" && (e = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 64,
@@ -46,17 +53,18 @@ const a = (t, o, l = "local") => {
     showScrollbar: !1,
     startIndex: 0,
     variableHeight: !1,
-    title: o,
+    title: t,
     autoplay: !1,
     autoplayDelay: 6e3,
     showPagination: !0,
     gutterSize: 0,
-    slideAspectRatio: 2.6666666666666665,
+    slideAspectRatio: 4 / 1.5,
     slideGap: 1.5,
     cellsPerSlide: 1,
-    cellAspectRatio: 2.6666666666666665,
+    cellAspectRatio: 4 / 1.5,
     cellsPosition: "center",
-    wrapAround: !1
+    wrapAround: !1,
+    breakpoints: { ...o }
   }), e;
 };
 export {

package/package.json

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