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

package/dist/assets/ActionButton.css

@@ -1 +1 @@
-._action-btn_9huvk_1{--button-bg-color: #1e5799;--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: #1e5799;--button-hover-border-color: #1e5799;display:inline-block;background-color:var(--button-bg-color);color:var(--button-color);border:1px solid var(--button-border-color);text-transform:uppercase;font-weight:600;padding:.75em 1.5em;box-sizing:border-box;transform:scale(1);box-shadow:none;transition:scale .325s ease-out,border-radius .225s ease-in-out,box-shadow .225s ease-out,background-color .225s ease-in-out,border-color .225s ease-in-out,color .225s ease-in-out;cursor:pointer}._action-btn_9huvk_1:hover,._action-btn_9huvk_1:focus{background-color:var(--button-hover-bg-color);color:var(--button-hover-color);border-color:var(--button-hover-border-color);scale:1.02;box-shadow:1px 1px 4px #0003;border-radius:4px;transition:all .25s ease-in-out}._action-btn--small_9huvk_31{font-size:.8rem}._action-btn--small_9huvk_31>i{margin-right:.25rem}._action-btn--large_9huvk_38{font-size:1.25rem}._action-btn--large_9huvk_38>i{margin-right:.75rem}._action-btn--primary_9huvk_45{--button-bg-color: #1e5799;--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: #1e5799;--button-hover-border-color: #1e5799}._action-btn--action_9huvk_54{--button-bg-color: hsl(150, 55%, 38%);--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: hsl(150, 55%, 38%);--button-hover-border-color: hsl(150, 55%, 38%)}._action-btn--info_9huvk_63{--button-bg-color: hsl(30, 80%, 51%);--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: hsl(30, 80%, 51%);--button-hover-border-color: hsl(30, 80%, 51%)}._action-btn--danger_9huvk_72{--button-bg-color: hsl(0, 51%, 50%);--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: hsl(0, 51%, 50%);--button-hover-border-color: hsl(0, 51%, 50%)}._action-btn_9huvk_1[disabled]{--button-bg-color: #c5c5c5;--button-hover-bg-color: #c5c5c5;--button-color: #fff;--button-hover-color: #fff;--button-border-color: #c5c5c5;--button-hover-border-color: #c5c5c5;cursor:default}._action-btn_9huvk_1[disabled]:hover,._action-btn_9huvk_1[disabled]:focus{background-position:bottom left;scale:1;border-radius:0;box-shadow:none}._dots-pulse_9huvk_97{display:flex;padding:.3em .35em}._dots-pulse_9huvk_97>span{background-color:var(--button-color);width:8px;height:8px;border-radius:100%;margin:2px;animation-fill-mode:both;display:inline-block}._dots-pulse_9huvk_97>span:nth-child(1){animation:_scale_9huvk_1 1.5s -.12s infinite cubic-bezier(.2,.68,.18,1.08)}._dots-pulse_9huvk_97>span:nth-child(2){animation:_scale_9huvk_1 1.5s -.06s infinite cubic-bezier(.2,.68,.18,1.08)}._dots-pulse_9huvk_97>span:nth-child(3){animation:_scale_9huvk_1 1.5s 0s infinite cubic-bezier(.2,.68,.18,1.08)}@keyframes _scale_9huvk_1{0%{transform:scale(.1);opacity:.7}25%{transform:scale(1);opacity:1}50%{transform:scale(.1);opacity:.7}75%{transform:scale(1);opacity:1}to{transform:scale(.1);opacity:.7}}
+._action-btn_zgv2f_1{--button-bg-color: #1e5799;--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: #1e5799;--button-hover-border-color: #1e5799;cursor:pointer;transform:scale(1);display:inline-block;box-sizing:border-box;padding:.75em 1.5em;border:1px solid var(--button-border-color);font-weight:600;color:var(--button-color);text-transform:uppercase;background-color:var(--button-bg-color);box-shadow:none;transition:scale .325s ease-out,border-radius .225s ease-in-out,box-shadow .225s ease-out,background-color .225s ease-in-out,border-color .225s ease-in-out,color .225s ease-in-out}._action-btn_zgv2f_1:hover,._action-btn_zgv2f_1:focus{scale:1.02;border-color:var(--button-hover-border-color);border-radius:4px;color:var(--button-hover-color);background-color:var(--button-hover-bg-color);box-shadow:1px 1px 4px #0003;transition:all .25s ease-in-out}._action-btn--small_zgv2f_31{font-size:.8rem}._action-btn--small_zgv2f_31>i{margin-right:.25rem}._action-btn--large_zgv2f_38{font-size:1.25rem}._action-btn--large_zgv2f_38>i{margin-right:.75rem}._action-btn--primary_zgv2f_45{--button-bg-color: #1e5799;--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: #1e5799;--button-hover-border-color: #1e5799}._action-btn--action_zgv2f_54{--button-bg-color: hsl(150deg 55% 38%);--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: hsl(150deg 55% 38%);--button-hover-border-color: hsl(150deg 55% 38%)}._action-btn--info_zgv2f_63{--button-bg-color: hsl(30deg 80% 51%);--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: hsl(30deg 80% 51%);--button-hover-border-color: hsl(30deg 80% 51%)}._action-btn--danger_zgv2f_72{--button-bg-color: hsl(0deg 51% 50%);--button-hover-bg-color: #444;--button-color: #fff;--button-hover-color: #fff;--button-border-color: hsl(0deg 51% 50%);--button-hover-border-color: hsl(0deg 51% 50%)}._action-btn_zgv2f_1[disabled]{--button-bg-color: #c5c5c5;--button-hover-bg-color: #c5c5c5;--button-color: #fff;--button-hover-color: #fff;--button-border-color: #c5c5c5;--button-hover-border-color: #c5c5c5;cursor:default}._action-btn_zgv2f_1[disabled]:hover,._action-btn_zgv2f_1[disabled]:focus{scale:1;border-radius:0;background-position:bottom left;box-shadow:none}._dots-pulse_zgv2f_97{display:flex;padding:.3em .35em}._dots-pulse_zgv2f_97>span{display:inline-block;width:8px;height:8px;margin:2px;border-radius:100%;background-color:var(--button-color);animation-fill-mode:both}._dots-pulse_zgv2f_97>span:nth-child(1){animation:_scale_zgv2f_1 1.5s -.12s infinite cubic-bezier(.2,.68,.18,1.08)}._dots-pulse_zgv2f_97>span:nth-child(2){animation:_scale_zgv2f_1 1.5s -.06s infinite cubic-bezier(.2,.68,.18,1.08)}._dots-pulse_zgv2f_97>span:nth-child(3){animation:_scale_zgv2f_1 1.5s 0s infinite cubic-bezier(.2,.68,.18,1.08)}@keyframes _scale_zgv2f_1{0%{transform:scale(.1);opacity:.7}25%{transform:scale(1);opacity:1}50%{transform:scale(.1);opacity:.7}75%{transform:scale(1);opacity:1}to{transform:scale(.1);opacity:.7}}

package/dist/assets/CarouselSlide.css

@@ -1 +1 @@
-._slide_gx8qn_1{scroll-snap-align:center;box-sizing:border-box;flex:0 0 100%;display:flex;justify-content:var(--_cells-position);align-items:center;column-gap:var(--_slide-gap);padding-inline-end:0;aspect-ratio:var(--_slide-aspect-ratio);overflow:hidden}._slide_gx8qn_1[inert]{opacity:.5}._slide--variable-height_gx8qn_17{aspect-ratio:unset}._slide_gx8qn_1>*{flex:0 1 calc(var(--_slide-cell-size) - var(--_slide-gap));display:grid;gap:var(--_slide-gap);place-items:center;aspect-ratio:var(--_cell-aspect-ratio)}._slide_gx8qn_1>image-card{gap:0;place-items:flex-start;display:flex}
+._slide_1echy_2{scroll-snap-align:center;overflow:hidden;display:flex;flex:0 0 100%;column-gap:var(--_slide-gap);align-items:center;justify-content:var(--_cells-position);box-sizing:border-box;aspect-ratio:var(--_slide-aspect-ratio);padding-inline-end:0}._slide_1echy_2[inert]{opacity:.5}._slide--variable-height_1echy_18{aspect-ratio:unset}._slide_1echy_2>*{display:grid;flex:0 1 calc(var(--_slide-cell-size) - var(--_slide-gap));gap:var(--_slide-gap);place-items:center;aspect-ratio:var(--_cell-aspect-ratio)}._slide_1echy_2>image-card{display:flex;gap:0;place-items:flex-start}

package/dist/assets/Figure.css

@@ -1 +1 @@
-._figure-slide_6uaj0_1{display:flex;justify-content:flex-start;gap:var(--_slide-gap);width:100%;aspect-ratio:var(--_cell-aspect-ratio);overflow-y:hidden}._figure-slide_6uaj0_1 ._figure-slide__figure_6uaj0_9{flex-basis:100%}._figure-slide__figure_6uaj0_9{display:grid;grid:[stack] 100%/[stack] 100%;align-items:end;aspect-ratio:var(--_cell-aspect-ratio);width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center;border-radius:0;overflow:hidden;max-inline-size:-webkit-max-content;max-inline-size:-moz-max-content;max-inline-size:max-content;margin-inline:auto;margin-block:0}._figure-slide__figure_6uaj0_9>img{object-fit:cover}._figure-slide--captioned-image_6uaj0_36>*{grid-area:stack}._figure-slide--captioned-image_6uaj0_36>figcaption{color:#fff;max-inline-size:100%;background:linear-gradient(to top,#000e,75%,#0000);justify-self:stretch;text-align:center;padding-block:4rem 1rem;padding-inline:1rem}._figure-slide--captioned-image_6uaj0_36>figcaption>a{color:#fff}
+._figure-slide__figure_1140y_2{overflow:hidden;display:grid;grid:[stack] 100%/[stack] 100%;align-items:end;aspect-ratio:var(--_cell-aspect-ratio);width:100%;-webkit-max-inline-size:max-content;max-inline-size:max-content;height:100%;margin-block:0;margin-inline:auto;border-radius:0;background-repeat:no-repeat;background-position:center;background-size:cover}._figure-slide_1140y_2{overflow-y:hidden;display:flex;gap:var(--_slide-gap);justify-content:flex-start;aspect-ratio:var(--_cell-aspect-ratio);width:100%}._figure-slide_1140y_2 ._figure-slide__figure_1140y_2{flex-basis:100%}._figure-slide__figure_1140y_2>img{object-fit:cover}._figure-slide--captioned-image_1140y_36>*{grid-area:stack}._figure-slide--captioned-image_1140y_36>figcaption{justify-self:stretch;-webkit-max-inline-size:100%;max-inline-size:100%;padding-block:4rem 1rem;padding-inline:1rem;color:#fff;text-align:center;background:linear-gradient(to top,#000e,75%,#0000)}._figure-slide--captioned-image_1140y_36>figcaption>a{color:#fff}

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

@@ -1,3 +1,22 @@
+import { default as React } from 'react';
+type ActionButtonProps = {
+    label: string;
+    type?: 'button' | 'submit' | 'reset';
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    varient?: string;
+    size?: string;
+    customColors?: {
+        bgColor: string;
+        bgHoverColor: string;
+        color: string;
+        hoverColor: string;
+        borderColor: string;
+        borderHoverColor: string;
+    };
+    disabled?: boolean;
+    classname?: string;
+    [key: string]: unknown;
+};
 /**
  * ActionButton component for rendering a button that will display a loading state.
  * @param {*} param0 - Component props.
@@ -18,5 +37,5 @@
  * @param {object} param0.attributes - Additional attributes to be applied to the button.
  * @returns {JSX.Element} The rendered action button.
  */
-export function ActionButton({ label, type, onClick, varient, size, customColors, disabled, classname, ...attributes }: any): JSX.Element;
+export declare function ActionButton({ label, type, onClick, varient, size, customColors, disabled, classname, ...attributes }: ActionButtonProps): JSX.Element;
 export default ActionButton;

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/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 { chunkArray as Y, classes as _ } from "../../utils/helpers.js";
-import Z from "./CarouselUtils.class.js";
-import { CarouselSlide as ee } from "../CarouselSlide/CarouselSlide.js";
+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 { c as a } from "../../Carousel.module-DOrBKQEQ.mjs";
-import { C as re } from "../../chevron-left-DRvpaLmK.mjs";
-import { C as te } from "../../chevron-right-C8yCnmfx.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 = Y(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 Z({
-      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(
-              ee,
+            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
 };

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

@@ -1,34 +1,24 @@
+import { CarouselCell, CarouselOptions, CarouselNavBtnEls, CarouselUtilsConstructorParams } from '../../types';
 export default class CarouselUtils {
-    constructor({ carouselEl, scrollerEl, paginationEl, slides, navBtnEls, options }: {
-        carouselEl: any;
-        scrollerEl: any;
-        paginationEl: any;
-        slides: any;
-        navBtnEls?: {
-            next: {};
-            previous: {};
-        } | undefined;
-        options: any;
-    });
-    carouselEl: any;
-    scrollerEl: any;
-    paginationEl: any;
-    slides: any;
+    #private;
+    carouselEl: HTMLElement;
+    scrollerEl: HTMLElement;
+    paginationEl: HTMLElement;
+    cells: CarouselCell[];
     currentIndex: number;
-    slideEls: any[];
-    navBtnEls: {
-        next: {};
-        previous: {};
-    };
-    currentIntersecting: {};
-    options: any;
-    timer: NodeJS.Timeout | null;
-    timerInterval: any;
-    slideGutterSize: any;
-    showPagination: any;
+    slideEls: HTMLElement[];
+    navBtnEls: CarouselNavBtnEls;
+    currentIntersecting: IntersectionObserverEntry | Record<string, never>;
+    options: CarouselOptions;
+    timer: NodeJS.Timeout | null | undefined;
+    timerInterval: number | undefined;
+    slideGutterSize: number;
+    showPagination: boolean | undefined;
     isInitialScroll: boolean;
     totalSlideEls: number;
     totalSlides: number;
+    carouselObserver: IntersectionObserver | undefined;
+    constructor({ carouselEl, scrollerEl, paginationEl, cells, navBtnEls, options, }: CarouselUtilsConstructorParams);
     /**
      * starts the autoplay timer
      */
@@ -63,6 +53,4 @@ export default class CarouselUtils {
      * @returns void
      */
     handleScrollEnd(): void;
-    carouselObserver: IntersectionObserver | undefined;
-    #private;
 }