@scrippsproduct/networks-ui-library 1.0.23 → 1.1.0-alpha.1

package/dist/components/ActionButton/ActionButton.js

@@ -1,22 +1,22 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as C, useEffect as H } from "react";
-import { subscribe as w, unsubscribe as y, publish as x } from "../../utils/events.js";
-import { classes as N } from "../../utils/helpers.js";
-import '../../assets/ActionButton.css';const S = "_scale_9huvk_1", n = {
-  "action-btn": "_action-btn_9huvk_1",
-  "action-btn--small": "_action-btn--small_9huvk_31",
-  "action-btn--large": "_action-btn--large_9huvk_38",
-  "action-btn--primary": "_action-btn--primary_9huvk_45",
-  "action-btn--action": "_action-btn--action_9huvk_54",
-  "action-btn--info": "_action-btn--info_9huvk_63",
-  "action-btn--danger": "_action-btn--danger_9huvk_72",
-  "dots-pulse": "_dots-pulse_9huvk_97",
-  scale: S
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { useState as z, useEffect as H } from "react";
+import { subscribe as w, unsubscribe as y, publish as k } from "../../utils/events.js";
+import { classes as x } from "../../utils/helpers.js";
+import '../../assets/ActionButton.css';const N = "_scale_zgv2f_1", n = {
+  "action-btn": "_action-btn_zgv2f_1",
+  "action-btn--small": "_action-btn--small_zgv2f_31",
+  "action-btn--large": "_action-btn--large_zgv2f_38",
+  "action-btn--primary": "_action-btn--primary_zgv2f_45",
+  "action-btn--action": "_action-btn--action_zgv2f_54",
+  "action-btn--info": "_action-btn--info_zgv2f_63",
+  "action-btn--danger": "_action-btn--danger_zgv2f_72",
+  "dots-pulse": "_dots-pulse_zgv2f_97",
+  scale: N
 };
-function A({
+function $({
   label: l,
   type: c = "button",
-  onClick: s = () => {
+  onClick: d = () => {
   },
   varient: r = "",
   size: e = "",
@@ -28,42 +28,42 @@ function A({
     borderColor: "",
     borderHoverColor: ""
   },
-  disabled: d,
+  disabled: s,
   classname: _ = "",
-  ...p
+  ...g
 }) {
-  const [a, b] = C("idle"), v = r === "" ? "" : `action-btn--${r}`, h = e === "" ? "" : `action-btn--${e}`, g = o.bgColor !== "" ? {
+  const [a, i] = z("idle"), p = r === "" ? "" : `action-btn--${r}`, v = e === "" ? "" : `action-btn--${e}`, f = o.bgColor !== "" ? {
     "--button-bg-color": o.bgColor,
     "--button-hover-bg-color": o.bgHoverColor === "" ? o.bgColor : o.bgHoverColor,
     "--button-color": o.color,
     "--button-hover-color": o.hoverColor === "" ? o.color : o.hoverColor,
     "--button-border-color": o.borderColor === "" ? o.bgColor : o.borderColor,
     "--button-hover-border-color": o.borderHoverColor === "" && o.borderColor === "" ? o.bgColor : o.borderHoverColor
-  } : null, u = () => {
-    b("idle");
-  }, k = (f) => {
-    s(f), b("waiting"), x("scripps:actionbtn:clicked");
+  } : null, h = () => {
+    i("idle");
+  }, u = (C) => {
+    d(C), i("waiting"), k("scripps:actionbtn:clicked");
   };
-  return H(() => (w("scripps:action:completed", u), () => {
+  return H(() => (w("scripps:action:completed", h), () => {
     y("scripps:action:completed");
-  }), []), /* @__PURE__ */ i(
+  }), []), /* @__PURE__ */ b(
     "button",
     {
-      type: c,
-      className: N([
+      className: x([
         n["action-btn"],
         "action-btn",
         _,
-        r === "" ? "" : n[v],
-        e === "" ? "" : n[h]
+        r === "" ? "" : n[p],
+        e === "" ? "" : n[v]
       ]),
-      onClick: k,
-      disabled: a === "waiting" || d,
-      style: g,
-      ...p,
+      disabled: a === "waiting" || s,
+      style: f || void 0,
+      type: c,
+      onClick: u,
+      ...g,
       children: [
         a !== "waiting" && /* @__PURE__ */ t("span", { className: n["action-btn__label"], children: l }),
-        a === "waiting" && /* @__PURE__ */ i("div", { className: n["dots-pulse"], children: [
+        a === "waiting" && /* @__PURE__ */ b("div", { className: n["dots-pulse"], children: [
           /* @__PURE__ */ t("span", {}),
           /* @__PURE__ */ t("span", {}),
           /* @__PURE__ */ t("span", {})
@@ -73,6 +73,6 @@ function A({
   );
 }
 export {
-  A as ActionButton,
-  A as default
+  $ as ActionButton,
+  $ as default
 };

package/dist/components/ActionButton/index.d.ts

@@ -1 +1,2 @@
-export { ActionButton, ActionButton as default } from './ActionButton';
+export { ActionButton } from './ActionButton';
+export { ActionButton as default } from './ActionButton';

package/dist/components/AirDateFormatter/AirDateFormatter.js

@@ -1,9 +1,9 @@
 import { jsx as a, jsxs as t } from "react/jsx-runtime";
 import "react";
 import { classes as i } from "../../utils/helpers.js";
-import { s as $ } from "../../sub-CkNH5u-l.mjs";
-import { f as m } from "../../format-plq8pBNY.mjs";
-import { a as u } from "../../add-FrnMPwwO.mjs";
+import { s as $ } from "../../sub-CoUmnfhv.mjs";
+import { f as m } from "../../format-YhWt2D8M.mjs";
+import { a as u } from "../../add-UWUc_nrO.mjs";
 import '../../assets/AirDateFormatter.css';const d = {
   "airdate-formatter__pipe": "_airdate-formatter__pipe_1ox2d_1",
   "airdate-formatter__date": "_airdate-formatter__date_1ox2d_8",

package/dist/components/BasicGridModule/BasicGridModule.js

@@ -1,9 +1,9 @@
-import { jsxs as g, Fragment as P, jsx as u } from "react/jsx-runtime";
-import { useState as a, useRef as p, useCallback as S, useEffect as y, createElement as j } from "react";
-import { EqualSizeGrid as F } from "../EqualSizeGrid/EqualSizeGrid.js";
-import { InfoPanel as G } from "../InfoPanel/InfoPanel.js";
-import { classes as _ } from "../../utils/helpers.js";
-import { blockLayoutsMap as q } from "../../settings.js";
+import { jsxs as g, Fragment as j, jsx as u } from "react/jsx-runtime";
+import { useState as r, useRef as p, useCallback as F, useEffect as y, createElement as G } from "react";
+import { classes as O } from "../../utils/helpers.js";
+import { blockLayoutsMap as P } from "../../settings.js";
+import { EqualSizeGrid as _ } from "../EqualSizeGrid/EqualSizeGrid.js";
+import { InfoPanel as q } from "../InfoPanel/InfoPanel.js";
 import '../../assets/BasicGridModule.css';function T({
   children: z,
   gap: b = "1.5rem",
@@ -11,7 +11,7 @@ import '../../assets/BasicGridModule.css';function T({
   classname: L = "",
   title: d = "",
   infoPanel: A,
-  itemComponent: o = {
+  itemComponent: s = {
     layout: "ImageCard",
     props: {
       fullCardClickable: !1
@@ -27,35 +27,35 @@ import '../../assets/BasicGridModule.css';function T({
   customClicksHandler: I = null,
   noAnimation: x = !1
 }) {
-  const [r, f] = a(!1), [C, R] = a({}), [m, B] = a(null), [v, c] = a("entering"), [M, N] = a(x ? null : !0), l = p("entering"), e = p(null), i = S(() => {
+  const [a, f] = r(!1), [C, B] = r({}), [m, R] = r(null), [v, c] = r("entering"), [M, N] = r(x ? null : !0), o = p("entering"), e = p(null), l = F(() => {
     e.current.children[0].addEventListener("animationstart", () => {
-      console.log("animation started"), e.current.children[0].addEventListener("animationend", i, { once: !0 });
-    }), console.log("stateRef.current", l.current), console.log("infoPanelOpen", r), l.current === "exiting" ? (c("entering"), l.current = "entering", f(!0)) : c("idle");
-  }, []), O = (t) => {
-    t.type === "info-panel" && (R(n.resourceList.find((s) => Number.parseInt(s.id, 10) === Number.parseInt(t.resourceId, 10))), N(!1), l.current = "exiting", c("exiting"));
+      console.log("animation started"), e.current.children[0].addEventListener("animationend", l, { once: !0 });
+    }), o.current === "exiting" ? (c("entering"), o.current = "entering", f(!0)) : c("idle");
+  }, []), S = (t) => {
+    t.type === "info-panel" && (B(n.resourceList.find((i) => Number.parseInt(i.id, 10) === Number.parseInt(t.resourceId, 10))), N(!1), o.current = "exiting", c("exiting"));
   };
   return y(() => {
-    B(q.get(o.layout));
-  }, [o.layout]), y(() => {
-    var t, s, h;
-    !r && e.current !== null && ((t = e.current) != null && t.children, e.current.children.length && ((s = e.current.children[0]) == null || s.removeEventListener("animationend", i, { once: !0 }), (h = e.current.children[0]) == null || h.addEventListener("animationend", i, { once: !0 })));
-  }, [r, i]), /* @__PURE__ */ g(P, { children: [
-    !r && /* @__PURE__ */ g("basic-grid-module", { "data-state": v, "first-entry": M, ref: e, children: [
-      d !== "" && /* @__PURE__ */ u("h2", { className: _(["basic-grid-module__header", "h4"]), children: d }),
+    R(P.get(s.layout));
+  }, [s.layout]), y(() => {
+    var t, i, h;
+    !a && e.current !== null && ((t = e.current) != null && t.children, e.current.children.length && ((i = e.current.children[0]) == null || i.removeEventListener("animationend", l, { once: !0 }), (h = e.current.children[0]) == null || h.addEventListener("animationend", l, { once: !0 })));
+  }, [a, l]), /* @__PURE__ */ g(j, { children: [
+    !a && /* @__PURE__ */ g("basic-grid-module", { "data-state": v, "first-entry": M, ref: e, children: [
+      d !== "" && /* @__PURE__ */ u("h2", { className: O(["basic-grid-module__header", "h4"]), children: d }),
       m !== null && /* @__PURE__ */ u(
-        F,
+        _,
         {
           gap: b,
           itemsPerRow: k,
           classname: L,
           children: E.map(
-            (t) => /* @__PURE__ */ j(
+            (t) => /* @__PURE__ */ G(
               m,
               {
                 ...t,
-                ...o.props,
+                ...s.props,
                 relatedResourceId: t.id,
-                handleClicks: I ?? O,
+                handleClicks: I ?? S,
                 key: `grid-item-${Math.round(Math.random() * 1e7)}`
               }
             )
@@ -63,8 +63,8 @@ import '../../assets/BasicGridModule.css';function T({
         }
       )
     ] }),
-    r && n.layout && /* @__PURE__ */ u(
-      G,
+    a && n.layout && /* @__PURE__ */ u(
+      q,
       {
         className: "grid-info-panel",
         onBackClicked: () => {

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

@@ -1,25 +1,8 @@
-export function Carousel({ id, slides, options }: {
-    id: any;
-    slides: any;
-    options?: {
-        paginationType: string;
-        showControls: boolean;
-        controlArrowSize: number;
-        controlButtonsOffset: number;
-        showScrollbar: boolean;
-        startIndex: number;
-        variableHeight: boolean;
-        title: string;
-        autoplay: boolean;
-        autoplayDelay: number;
-        showPagination: boolean;
-        gutterSize: number;
-        slideAspectRatio: string;
-        slideGap: number;
-        cellsPerSlide: number;
-        cellAspectRatio: string;
-        cellsPosition: string;
-        wrapAround: boolean;
-    } | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import { CarouselCell, CarouselOptions } from '../../types';
+type CarouselProps = {
+    id: string | number;
+    cells: CarouselCell[];
+    options?: CarouselOptions;
+};
+export declare function Carousel({ id, cells, options, }: CarouselProps): JSX.Element;
 export default Carousel;

package/dist/components/Carousel/Carousel.js

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