@scrippsproduct/networks-ui-library 2.0.2 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,14 @@
1
+ import './assets/Carousel.css';const _ = "_carousel_2eeiv_2", e = "_carousel__scroller_2eeiv_12", o = {
2
+ carousel: _,
3
+ carousel__scroller: e,
4
+ "carousel-controls": "_carousel-controls_2eeiv_39",
5
+ "carousel-controls__previous": "_carousel-controls__previous_2eeiv_43",
6
+ "carousel-controls__next": "_carousel-controls__next_2eeiv_50",
7
+ "carousel-controls__btn": "_carousel-controls__btn_2eeiv_57",
8
+ "carousel-nav": "_carousel-nav_2eeiv_84",
9
+ "carousel-nav__list": "_carousel-nav__list_2eeiv_88",
10
+ "carousel-nav__item": "_carousel-nav__item_2eeiv_97"
11
+ };
12
+ export {
13
+ o as c
14
+ };
@@ -1 +1 @@
1
- ._carousel_1um4i_2{--_carousel-scrollbar-gutter: 1.75rem;--_carousel-pagination-size: 1rem;--_slide-gap: 1.5rem;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:[carousel-scroller] 1fr [carousel-pagination]}._carousel__scroller_1um4i_12{scroll-behavior:smooth;scrollbar-width:none;scroll-padding-inline:var(--_carousel-gutters);scroll-snap-type:x mandatory;overflow-x:auto;overscroll-behavior-x:contain;display:flex;box-sizing:border-box;margin:0;padding-inline:var(--_carousel-gutters);list-style:none}._carousel__scroller_1um4i_12::-webkit-scrollbar{display:auto}._carousel__scroller_1um4i_12[data-scrollbar=true]{scrollbar-width:auto;overflow-x:scroll}._carousel__scroller_1um4i_12:not([data-scrollbar=true])::-webkit-scrollbar{display:none}._carousel-controls_1um4i_38{display:contents}._carousel-controls__previous_1um4i_42{inset-inline-start:var(--_control-btns-offset-x)}._carousel-controls__previous_1um4i_42 svg{transform:translate(-2px)}._carousel-controls__next_1um4i_49{inset-inline-end:var(--_control-btns-offset-x)}._carousel-controls__next_1um4i_49 svg{transform:translate(2px)}._carousel-controls__btn_1um4i_56{cursor:pointer;position:absolute;z-index:1;top:50%;transform:translateY(var(--_controls-transform));overflow:hidden;aspect-ratio:1;padding:0;border:1px solid transparent;border-radius:50%;color:#000;background-color:#fff6;transition:opacity .325s ease-out}._carousel-controls__btn_1um4i_56>i>svg{display:block;max-inline-size:100%;block-size:auto;stroke:currentcolor}._carousel-controls__btn_1um4i_56[disabled]{cursor:not-allowed;opacity:0;transition-delay:0s}._carousel-nav_1um4i_83{margin-top:0}._carousel-nav__list_1um4i_87{display:flex;gap:1rem;align-items:flex-start;justify-content:center;padding:0;list-style:none}._carousel-nav__item_1um4i_96{flex-basis:1rem;min-width:1rem;max-width:1rem;height:1rem;border:1px solid rgba(65,65,65,.1);border-radius:50%;background-color:transparent}._carousel-nav__item_1um4i_96[data-current=true]{background-color:#8080801a}
1
+ ._carousel_2eeiv_2{--_carousel-scrollbar-gutter: 1.75rem;--_carousel-pagination-size: 1rem;--_slide-gap: 1.5rem;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:[carousel-scroller] 1fr [carousel-pagination]}._carousel__scroller_2eeiv_12{scroll-behavior:smooth;scrollbar-width:none;scroll-padding-inline:var(--_carousel-gutters);scroll-snap-type:x mandatory;overflow-x:auto;overscroll-behavior-x:contain;display:flex;box-sizing:border-box;margin:0;padding-inline:var(--_carousel-gutters);list-style:none;transition:opacity .3s ease}._carousel__scroller_2eeiv_12::-webkit-scrollbar{display:auto}._carousel__scroller_2eeiv_12[data-scrollbar=true]{scrollbar-width:auto;overflow-x:scroll}._carousel__scroller_2eeiv_12:not([data-scrollbar=true])::-webkit-scrollbar{display:none}._carousel-controls_2eeiv_39{display:contents}._carousel-controls__previous_2eeiv_43{inset-inline-start:var(--_control-btns-offset-x)}._carousel-controls__previous_2eeiv_43 svg{transform:translate(-2px)}._carousel-controls__next_2eeiv_50{inset-inline-end:var(--_control-btns-offset-x)}._carousel-controls__next_2eeiv_50 svg{transform:translate(2px)}._carousel-controls__btn_2eeiv_57{cursor:pointer;position:absolute;z-index:1;top:50%;transform:translateY(var(--_controls-transform));overflow:hidden;aspect-ratio:1;padding:0;border:1px solid transparent;border-radius:50%;color:#000;background-color:#fff6;transition:opacity .325s ease-out}._carousel-controls__btn_2eeiv_57>i>svg{display:block;max-inline-size:100%;block-size:auto;stroke:currentcolor}._carousel-controls__btn_2eeiv_57[disabled]{cursor:not-allowed;opacity:0;transition-delay:0s}._carousel-nav_2eeiv_84{margin-top:0}._carousel-nav__list_2eeiv_88{display:flex;gap:1rem;align-items:flex-start;justify-content:center;padding:0;list-style:none}._carousel-nav__item_2eeiv_97{flex-basis:1rem;min-width:1rem;max-width:1rem;height:1rem;border:1px solid rgba(65,65,65,.1);border-radius:50%;background-color:transparent}._carousel-nav__item_2eeiv_97[data-current=true]{background-color:#8080801a}
@@ -1,16 +1,17 @@
1
- import { jsx as o, Fragment as Q, jsxs as K } from "react/jsx-runtime";
2
- import { useRef as s, useState as C, useEffect as j, useCallback as i } from "react";
3
- import { chunkArray as X, classes as A } from "../../utils/helpers.js";
4
- import Y from "./CarouselUtils.class.js";
5
- import { CarouselSlide as Z } from "../CarouselSlide/CarouselSlide.js";
6
- import { c as a } from "../../Carousel.module-CNJzZW2-.mjs";
7
- import { C as ee } from "../../chevron-left-D0UjbrKw.mjs";
8
- import { C as re } from "../../chevron-right-0ZF3LruR.mjs";
1
+ import { jsx as l, Fragment as Y, jsxs as j } from "react/jsx-runtime";
2
+ import { useRef as i, useState as m, useEffect as B, useCallback as u, Suspense as Z } from "react";
3
+ import { chunkArray as ee, classes as A } from "../../utils/helpers.js";
4
+ import re from "./CarouselUtils.class.js";
5
+ import { CarouselSlide as te } from "../CarouselSlide/CarouselSlide.js";
6
+ import { Loading as ne } from "../Loading/Loading.js";
7
+ import { c as a } from "../../Carousel.module-BsPaZX5L.mjs";
8
+ import { C as le } from "../../chevron-left-D0UjbrKw.mjs";
9
+ import { C as ce } from "../../chevron-right-0ZF3LruR.mjs";
9
10
  const _ = window.matchMedia("(width <= 600px)"), P = window.matchMedia("(width <= 800px"), b = window.matchMedia("(width <= 1024px"), z = window.matchMedia("(width <= 1280px");
10
- function ue({
11
+ function me({
11
12
  id: E,
12
13
  cells: L,
13
- options: x = {
14
+ options: I = {
14
15
  paginationType: "dots",
15
16
  showControls: !0,
16
17
  controlArrowSize: 48,
@@ -31,95 +32,95 @@ function ue({
31
32
  wrapAround: !0
32
33
  }
33
34
  }) {
34
- 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);
35
- j(() => {
36
- const t = () => {
35
+ const f = i(`carousel-${E}`), x = i(null), c = i(null), R = i(null), p = i([...L]), T = i(null), g = i(null), r = i(null), e = i(I), o = i(I), $ = i("-50%"), [N, G] = m([]), [M, H] = m([]), [k, U] = m(0), [F, D] = m(!1);
36
+ B(() => {
37
+ const n = () => {
37
38
  _.matches ? e.current = {
38
- ...l.current,
39
+ ...o.current,
39
40
  showControls: !1,
40
41
  showPagination: !1,
41
42
  cellsPerSlide: 1,
42
- cellsPosition: l.current.wrapAround ? "center" : "flex-start",
43
+ cellsPosition: o.current.wrapAround ? "center" : "flex-start",
43
44
  gutterSize: 10
44
- } : P.matches ? l.current.cellsPerSlide !== 1 ? e.current = {
45
- ...l.current,
45
+ } : P.matches ? o.current.cellsPerSlide !== 1 ? e.current = {
46
+ ...o.current,
46
47
  cellsPerSlide: 2,
47
48
  showControls: !1,
48
49
  gutterSize: 10
49
50
  } : e.current = {
50
- ...l.current,
51
+ ...o.current,
51
52
  showControls: !1,
52
53
  gutterSize: 10
53
- } : b.matches ? l.current.cellsPerSlide !== 1 && l.current.cellsPerSlide !== 2 ? e.current = {
54
- ...l.current,
54
+ } : b.matches ? o.current.cellsPerSlide !== 1 && o.current.cellsPerSlide !== 2 ? e.current = {
55
+ ...o.current,
55
56
  cellsPerSlide: 3,
56
57
  showControls: !1,
57
58
  gutterSize: 10
58
59
  } : e.current = {
59
- ...l.current,
60
+ ...o.current,
60
61
  showControls: !1,
61
62
  gutterSize: 10
62
- } : z.matches ? l.current.showPagination ? e.current = {
63
- ...l.current,
63
+ } : z.matches ? o.current.showPagination ? e.current = {
64
+ ...o.current,
64
65
  showControls: !1
65
66
  } : e.current = {
66
- ...l.current
67
+ ...o.current
67
68
  } : e.current = {
68
- ...l.current
69
+ ...o.current
69
70
  };
70
71
  };
71
- t();
72
- const n = () => {
73
- H((u) => u + 1), t();
72
+ n();
73
+ const t = () => {
74
+ U((s) => s + 1), n();
74
75
  };
75
- return _.addEventListener("change", n), P.addEventListener("change", n), b.addEventListener("change", n), z.addEventListener("change", n), () => {
76
- _.removeEventListener("change", n), P.removeEventListener("change", n), b.removeEventListener("change", n), z.removeEventListener("change", n);
76
+ return _.addEventListener("change", t), P.addEventListener("change", t), b.addEventListener("change", t), z.addEventListener("change", t), () => {
77
+ _.removeEventListener("change", t), P.removeEventListener("change", t), b.removeEventListener("change", t), z.removeEventListener("change", t);
77
78
  };
78
79
  }, []);
79
- const D = i((t, n) => {
80
- const u = X(n, t);
81
- G([...u]);
82
- let S = [];
83
- for (let f = 0; f <= u.length - 1; f++)
84
- S[f] = {
85
- ariaLabel: `${f + 1} of ${u.length}`,
86
- layout: u[f][0].layout || "",
80
+ const O = u((n, t) => {
81
+ const s = ee(t, n);
82
+ H([...s]);
83
+ let v = [];
84
+ for (let h = 0; h <= s.length - 1; h++)
85
+ v[h] = {
86
+ ariaLabel: `${h + 1} of ${s.length}`,
87
+ layout: s[h][0].layout || "",
87
88
  cells: [
88
- ...u[f]
89
+ ...s[h]
89
90
  ]
90
91
  };
91
- const v = [...S], y = [...S], q = v.slice(-1), J = v.slice(0);
92
- return y.push(J[0]), y.unshift(q[0]), e.current.wrapAround && t.length > n ? y : v;
93
- }, []), d = i(() => {
92
+ const y = [...v], C = [...v], Q = y.slice(-1), X = y.slice(0);
93
+ return C.push(X[0]), C.unshift(Q[0]), e.current.wrapAround && n.length > t ? C : y;
94
+ }, []), d = u(() => {
94
95
  e.current.autoplay && r.current && r.current.clearTimer();
95
- }, []), U = i((t) => {
96
+ }, []), W = u((n) => {
96
97
  d();
97
- const n = t.key;
98
- n === "ArrowLeft" ? (t.preventDefault(), r.current && r.current.determineScrollAction(-1)) : n === "ArrowRight" && (t.preventDefault(), r.current && r.current.determineScrollAction(1));
99
- }, [d]), F = i(() => {
98
+ const t = n.key;
99
+ t === "ArrowLeft" ? (n.preventDefault(), r.current && r.current.determineScrollAction(-1)) : t === "ArrowRight" && (n.preventDefault(), r.current && r.current.determineScrollAction(1));
100
+ }, [d]), q = u(() => {
100
101
  d(), c.current !== null && c.current.addEventListener("scrollend", () => {
101
102
  r.current && r.current.handleScrollEnd();
102
103
  }, { once: !0 });
103
- }, [d]), w = i(() => {
104
+ }, [d]), w = u(() => {
104
105
  d(), c.current !== null && c.current.addEventListener("scrollend", () => {
105
106
  r.current && r.current.handleScrollEnd(), c.current && c.current.addEventListener("scroll", w, { once: !0 });
106
107
  }, { once: !0 });
107
- }, [d]), W = () => {
108
+ }, [d]), J = () => {
108
109
  r.current && e.current.autoplay && r.current.clearTimer();
109
- }, g = i(() => {
110
+ }, S = u(() => {
110
111
  //! make sure class is only instantiated once because of reacts
111
112
  //! "strict" mode double do hocus pocus
112
- var t, n;
113
- r.current !== null && k > 0 && ((n = (t = r.current).clearTimer) == null || n.call(t), r.current = null), r.current = new Y({
114
- carouselEl: I.current,
113
+ var n, t;
114
+ r.current !== null && k > 0 && ((t = (n = r.current).clearTimer) == null || t.call(n), r.current = null), D(!1), r.current = new re({
115
+ carouselEl: x.current,
115
116
  scrollerEl: c.current,
116
117
  paginationEl: R.current,
117
118
  cells: p.current,
118
119
  navBtnEls: {
119
120
  next: T.current,
120
- previous: m.current
121
+ previous: g.current
121
122
  },
122
- id: h.current,
123
+ id: f.current,
123
124
  options: {
124
125
  autoplay: e.current.autoplay,
125
126
  wrapAround: e.current.wrapAround && p.current.length > (e.current.cellsPerSlide || 1),
@@ -130,39 +131,42 @@ function ue({
130
131
  showControls: e.current.showControls && p.current.length > (e.current.cellsPerSlide || 1),
131
132
  cellsPerSlide: e.current.cellsPerSlide
132
133
  }
133
- });
134
- }, [k]), O = i(() => {
134
+ }), D(!0);
135
+ }, [k]), V = u(() => {
135
136
  c.current && c.current.addEventListener("scroll", w, { once: !0 });
136
- }, [w]), V = i(() => {
137
- if (B(D(p.current, e.current.cellsPerSlide ?? 1)), p.current.length > (e.current.cellsPerSlide ?? 1)) {
138
- let t = setInterval(() => {
139
- c.current !== null && (m.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(t), O(), g());
137
+ }, [w]), K = u(() => {
138
+ const n = O(p.current, e.current.cellsPerSlide ?? 1);
139
+ G(n);
140
+ const t = n.length;
141
+ if (p.current.length > (e.current.cellsPerSlide ?? 1)) {
142
+ let s = setInterval(() => {
143
+ c.current !== null && c.current.children.length >= t && (g.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(s), V(), S());
140
144
  }, 100);
141
145
  } else {
142
- let t = setInterval(() => {
143
- c.current !== null && (clearInterval(t), g());
146
+ let s = setInterval(() => {
147
+ c.current !== null && c.current.children.length >= t && (clearInterval(s), S());
144
148
  }, 100);
145
149
  }
146
- }, [D, O, g]);
147
- return j(() => {
150
+ }, [O, V, S]);
151
+ return B(() => {
148
152
  if (e.current !== null) {
149
153
  if (e.current.showControls) {
150
- let t = 0;
151
- e.current.showPagination && (t = t + 25), e.current.showScrollbar && (t = t + 6), $.current = `calc(-50% - ${t}px)`;
154
+ let n = 0;
155
+ e.current.showPagination && (n = n + 25), e.current.showScrollbar && (n = n + 6), $.current = `calc(-50% - ${n}px)`;
152
156
  }
153
- V();
157
+ K();
154
158
  }
155
159
  return () => {
156
- W();
160
+ J();
157
161
  };
158
- }, [V, e]), /* @__PURE__ */ o(Q, { children: e.current !== null && /* @__PURE__ */ K(
162
+ }, [K, e]), /* @__PURE__ */ l(Y, { children: e.current !== null && /* @__PURE__ */ j(
159
163
  "div",
160
164
  {
161
165
  "aria-label": e.current.title,
162
166
  "aria-roledescription": "carousel",
163
167
  className: a.carousel,
164
- id: h.current,
165
- ref: I,
168
+ id: f.current,
169
+ ref: x,
166
170
  role: "region",
167
171
  style: {
168
172
  "--_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}%`,
@@ -175,9 +179,9 @@ function ue({
175
179
  "--_controls-transform": $.current
176
180
  },
177
181
  tabIndex: -1,
178
- onKeyDown: U,
182
+ onKeyDown: W,
179
183
  children: [
180
- /* @__PURE__ */ o(
184
+ /* @__PURE__ */ l(
181
185
  "ol",
182
186
  {
183
187
  "aria-label": "Items Scroller",
@@ -186,6 +190,7 @@ function ue({
186
190
  "data-scrollbar": e.current.showScrollbar,
187
191
  ref: c,
188
192
  role: "group",
193
+ style: { opacity: F ? 1 : 0 },
189
194
  tabIndex: 0,
190
195
  onMouseEnter: () => {
191
196
  e.current.autoplay && r.current !== null && r.current.clearTimer();
@@ -193,27 +198,44 @@ function ue({
193
198
  onMouseLeave: () => {
194
199
  e.current.autoplay && r.current !== null && r.current.startTimer();
195
200
  },
196
- onTouchStart: F,
197
- children: N.length > 0 && N.map((t, n) => /* @__PURE__ */ o(
201
+ onTouchStart: q,
202
+ children: /* @__PURE__ */ l(
198
203
  Z,
199
204
  {
200
- currentIndex: e.current.wrapAround ? 1 : 0,
201
- index: n,
202
- slide: { ...t, ariaLabel: t.ariaLabel || "" },
203
- variableHeight: e.current.variableHeight
204
- },
205
- `carousel${E}-slide${n}`
206
- ))
205
+ fallback: /* @__PURE__ */ l(
206
+ "li",
207
+ {
208
+ role: "presentation",
209
+ style: { aspectRatio: e.current.slideAspectRatio, width: "100%" },
210
+ children: /* @__PURE__ */ l(ne, {})
211
+ }
212
+ ),
213
+ children: N.length > 0 && N.map((n, t) => /* @__PURE__ */ l(
214
+ te,
215
+ {
216
+ currentIndex: e.current.wrapAround ? 1 : 0,
217
+ index: t,
218
+ slide: { ...n, ariaLabel: n.ariaLabel || "" },
219
+ variableHeight: e.current.variableHeight
220
+ },
221
+ `carousel${E}-slide${t}`
222
+ ))
223
+ }
224
+ )
207
225
  }
208
226
  ),
209
- e.current.showControls && L.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ K("div", { className: a["carousel-controls"], children: [
210
- /* @__PURE__ */ o(
227
+ e.current.showControls && L.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ j("div", { className: a["carousel-controls"], children: [
228
+ /* @__PURE__ */ l(
211
229
  "button",
212
230
  {
213
- "aria-controls": h.current,
231
+ "aria-controls": f.current,
214
232
  "aria-label": "Previous Item",
215
- className: A([a["carousel-controls__btn"], a["carousel-controls__previous"], "carousel-controls__previous"]),
216
- ref: m,
233
+ className: A([
234
+ a["carousel-controls__btn"],
235
+ a["carousel-controls__previous"],
236
+ "carousel-controls__previous"
237
+ ]),
238
+ ref: g,
217
239
  title: "Previous Item",
218
240
  type: "button",
219
241
  onClick: () => {
@@ -225,13 +247,13 @@ function ue({
225
247
  onMouseLeave: () => {
226
248
  e.current.autoplay && r.current !== null && r.current.startTimer();
227
249
  },
228
- children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(ee, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
250
+ children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(le, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
229
251
  }
230
252
  ),
231
- /* @__PURE__ */ o(
253
+ /* @__PURE__ */ l(
232
254
  "button",
233
255
  {
234
- "aria-controls": h.current,
256
+ "aria-controls": f.current,
235
257
  "aria-label": "Next Item",
236
258
  className: A([a["carousel-controls__btn"], a["carousel-controls__next"], "carousel-controls__next"]),
237
259
  ref: T,
@@ -246,27 +268,27 @@ function ue({
246
268
  onMouseLeave: () => {
247
269
  e.current.autoplay && r.current !== null && r.current.startTimer();
248
270
  },
249
- children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(re, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
271
+ children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(ce, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
250
272
  }
251
273
  )
252
274
  ] }),
253
- 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(
275
+ 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((n, t) => /* @__PURE__ */ l(
254
276
  "li",
255
277
  {
256
278
  className: A([a["carousel-nav__item"], "carousel-nav__item"]),
257
- "data-current": n === 0 ? "true" : "false",
258
- title: `Navigate to slide ${n + 1}`,
279
+ "data-current": t === 0 ? "true" : "false",
280
+ title: `Navigate to slide ${t + 1}`,
259
281
  onClick: () => {
260
- r.current && r.current.navigateToIndex(n);
282
+ r.current && r.current.navigateToIndex(t);
261
283
  }
262
284
  },
263
- `carousel${h}-nav-${n}`
285
+ `carousel${f}-nav-${t}`
264
286
  )) }) })
265
287
  ]
266
288
  }
267
289
  ) });
268
290
  }
269
291
  export {
270
- ue as Carousel,
271
- ue as default
292
+ me as Carousel,
293
+ me as default
272
294
  };
@@ -1,5 +1,5 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
- import { c as r } from "../../../Carousel.module-CNJzZW2-.mjs";
2
+ import { c as r } from "../../../Carousel.module-BsPaZX5L.mjs";
3
3
  function n({ slides: l, carouselId: s, ref: t }) {
4
4
  return /* @__PURE__ */ e("div", { className: `${r["carousel-nav"]} carousel-nav`, children: /* @__PURE__ */ e("ol", { className: r["carousel-nav__list"], ref: t, children: l.map((o, a) => /* @__PURE__ */ e(
5
5
  "li",
@@ -1,37 +1,38 @@
1
- import { jsx as t, Fragment as n } from "react/jsx-runtime";
2
- import { useState as d, useEffect as m, createElement as h } from "react";
3
- import { classes as p } from "../../utils/helpers.js";
4
- import { slideLayoutsMap as f } from "../../settings.js";
5
- import '../../assets/CarouselSlide.css';const y = "_slide_1echy_2", r = {
6
- slide: y,
1
+ import { jsx as r, Fragment as m } from "react/jsx-runtime";
2
+ import { useMemo as n, createElement as u } from "react";
3
+ import { classes as d } from "../../utils/helpers.js";
4
+ import { slideLayoutsMap as h } from "../../settings.js";
5
+ import '../../assets/CarouselSlide.css';const p = "_slide_1echy_2", i = {
6
+ slide: p,
7
7
  "slide--variable-height": "_slide--variable-height_1echy_18"
8
8
  };
9
- function v({
9
+ function g({
10
10
  slide: e,
11
11
  index: l,
12
- currentIndex: i,
12
+ currentIndex: t,
13
13
  variableHeight: s = !1
14
14
  }) {
15
- const [a, o] = d(null);
16
- return m(() => {
17
- o(f.get(e.layout) || null);
18
- }, [e]), /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
15
+ const a = n(
16
+ () => h.get(e.layout) ?? null,
17
+ [e.layout]
18
+ );
19
+ return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
19
20
  "li",
20
21
  {
21
22
  "aria-label": e.ariaLabel,
22
23
  "aria-roledescription": "carousel-item",
23
- className: p([
24
- r.slide,
24
+ className: d([
25
+ i.slide,
25
26
  "slide",
26
- s ? r["slide--variable-height"] : ""
27
+ s ? i["slide--variable-height"] : ""
27
28
  ]),
28
29
  "data-index": l,
29
- ...i !== l ? { inert: !0 } : {},
30
- children: a !== null && e.cells.map((c, u) => /* @__PURE__ */ h(a, { ...c.props, key: `slide${l}-cell${u}` }))
30
+ ...t !== l ? { inert: !0 } : {},
31
+ children: a !== null && e.cells.map((o, c) => /* @__PURE__ */ u(a, { ...o.props, key: `slide${l}-cell${c}` }))
31
32
  }
32
33
  ) });
33
34
  }
34
35
  export {
35
- v as CarouselSlide,
36
- v as default
36
+ g as CarouselSlide,
37
+ g as default
37
38
  };
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.0.2",
2
+ "version": "2.0.3",
3
3
  "name": "@scrippsproduct/networks-ui-library",
4
4
  "description": "React Component Library for use in Scripps Networks external applications",
5
5
  "author": {
@@ -1,14 +0,0 @@
1
- import './assets/Carousel.css';const _ = "_carousel_1um4i_2", o = "_carousel__scroller_1um4i_12", s = {
2
- carousel: _,
3
- carousel__scroller: o,
4
- "carousel-controls": "_carousel-controls_1um4i_38",
5
- "carousel-controls__previous": "_carousel-controls__previous_1um4i_42",
6
- "carousel-controls__next": "_carousel-controls__next_1um4i_49",
7
- "carousel-controls__btn": "_carousel-controls__btn_1um4i_56",
8
- "carousel-nav": "_carousel-nav_1um4i_83",
9
- "carousel-nav__list": "_carousel-nav__list_1um4i_87",
10
- "carousel-nav__item": "_carousel-nav__item_1um4i_96"
11
- };
12
- export {
13
- s as c
14
- };