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

package/dist/Carousel.module-CzL9vVtu.mjs

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

package/dist/assets/Carousel.css

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

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

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

package/dist/components/Carousel/Carousel.js

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

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

@@ -1,18 +1,15 @@
 import { jsx as e } from "react/jsx-runtime";
-import t from "react";
-import '../../../assets/Pagination.css';const l = {
-  "carousel-nav": "_carousel-nav_1booq_86",
-  "carousel-nav__list": "_carousel-nav__list_1booq_90",
-  "carousel-nav__item": "_carousel-nav__item_1booq_99"
-}, v = t.forwardRef(({ slides: o, carouselId: r, CarouselUtil: _, scrollerRef: c }, s) => /* @__PURE__ */ e("div", { className: `${l["carousel-nav"]} carousel-nav`, children: /* @__PURE__ */ e("ol", { className: l["carousel-nav__list"], ref: s, children: o.map((u, a) => /* @__PURE__ */ e(
+import o from "react";
+import { c as r } from "../../../Carousel.module-CzL9vVtu.mjs";
+const n = o.forwardRef(({ slides: t, carouselId: l }, s) => /* @__PURE__ */ e("div", { className: `${r["carousel-nav"]} carousel-nav`, children: /* @__PURE__ */ e("ol", { className: r["carousel-nav__list"], ref: s, children: t.map((c, a) => /* @__PURE__ */ e(
   "li",
   {
-    className: `${l["carousel-nav__item"]} carousel-nav__item`,
+    className: `${r["carousel-nav__item"]} carousel-nav__item`,
     "data-current": a === 0 ? "true" : "false",
     title: `Navigate to slide ${a + 1}`
   },
-  `carousel${r}-nav-${a}`
+  `carousel${l}-nav-${a}`
 )) }) }));
 export {
-  v as default
+  n as default
 };

package/dist/components/Carousel/types.d.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.16",
+  "version": "1.0.17-dev.1",
   "name": "@scrippsproduct/networks-ui-library",
   "description": "React Component Library for use in Scripps Networks external applications",
   "author": {
@@ -23,7 +23,7 @@
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=f011f556f41a",
-    "create-component": "node componentFolderBuilder.js"
+    "create-component": "node scripts/componentFolderBuilder.js"
   },
   "dependencies": {
     "date-fns": "^3.6.0",

package/dist/assets/Pagination.css

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