@ledgerhq/react-ui 0.45.0 → 0.46.0-nightly.20260217030329

package/lib/cjs/components/layout/Carousel/index.js

@@ -1,50 +1,423 @@
+(() => {
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+var __webpack_modules__ = ({
+8459(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  ChevronArrow: () => (ChevronArrow)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _assets__rspack_import_2 = __webpack_require__(7304);
+/* import */ var _assets__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(_assets__rspack_import_2);
+
+
+
+function ChevronArrow(props) {
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(ChevronArrowContainer, props, /*#__PURE__*/ react__rspack_import_0_default().createElement(_assets__rspack_import_2.ChevronLeft, null));
+}
+const ChevronArrowContainer = (styled_components__rspack_import_1_default().button)`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+
+  position: absolute;
+  top: 50%;
+  left: ${({ direction })=>direction === "left" ? "0" : "auto"};
+  right: ${({ direction })=>direction === "left" ? "auto" : "0"};
+  z-index: 1;
+
+  --dir: ${({ direction })=>direction === "left" ? "1" : "-1"};
+  scale: var(--dir) 1;
+  translate: calc(-50% * var(--dir)) -50%;
+
+  background-color: ${({ theme })=>theme.colors.background.default}; // Fake the transparent clip
+  border-radius: 100%;
+  border: none;
+  outline: none;
+
+  ::before {
+    content: "";
+    display: block;
+    position: absolute;
+    z-index: -1;
+    inset: 3px;
+    background-color: ${({ theme })=>theme.colors.opacityDefault.c05};
+    border-color: ${({ theme })=>theme.colors.opacityDefault.c05};
+    border-radius: 100%;
+    border-style: solid;
+    border-width: 1px;
+  }
+  svg {
+    color: ${({ theme })=>theme.colors.primary.c100};
+  }
+  ::before,
+  svg {
+    cursor: pointer;
   }
-  return to;
+
+  transition: opacity 0.2s ease-in-out;
+  opacity: var(--hover-transition);
+  ::before,
+  svg {
+    transition: translate 0.2s ease-in-out;
+    translate: calc(-50% + 50% * var(--hover-transition)) 0;
+  }
+`;
+
+
+},
+3831(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ bullets)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: external "react-spring"
+const external_react_spring_namespaceObject = require("react-spring");
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(2770);
+// EXTERNAL MODULE: ./src/components/layout/Carousel/Footer/Pagination/types.ts
+var types = __webpack_require__(6287);
+;// CONCATENATED MODULE: ./src/components/layout/Carousel/Footer/Pagination/bullets.tsx
+
+
+
+
+const defaultBulletStyle = {
+    height: "6px",
+    borderRadius: "1000px",
+    marginRight: "4px",
+    opacity: 1
+};
+const useBulletStyles = ()=>{
+    const { colors } = (0,external_styled_components_.useTheme)();
+    const BulletStyle = {
+        [types.ItemStatus.active]: {
+            ...defaultBulletStyle,
+            width: "16px",
+            backgroundColor: colors.opacityDefault.c80
+        },
+        [types.ItemStatus.nearby]: {
+            ...defaultBulletStyle,
+            width: "8px",
+            backgroundColor: colors.opacityDefault.c30
+        },
+        [types.ItemStatus.far]: {
+            ...defaultBulletStyle,
+            width: "4px",
+            backgroundColor: colors.opacityDefault.c10
+        },
+        [types.ItemStatus.none]: {
+            ...defaultBulletStyle,
+            width: "0px",
+            opacity: 0,
+            backgroundColor: colors.opacityDefault.c10,
+            marginRight: "0px"
+        }
+    };
+    return BulletStyle;
+};
+const Bullet = ({ type })=>{
+    return /*#__PURE__*/ external_react_default().createElement(external_react_spring_namespaceObject.animated.div, {
+        style: (0,external_react_spring_namespaceObject.useSpring)(useBulletStyles()[type])
+    });
+};
+/* export default */ const bullets = (Bullet);
+
+
+},
+2378(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _bullets__rspack_import_2 = __webpack_require__(3831);
+/* import */ var _utils__rspack_import_3 = __webpack_require__(8139);
+
+
+
+
+const FooterCarouselBullets = (styled_components__rspack_import_1_default().div)`
+  display: flex;
+  align-items: center;
+`;
+const Pagination = ({ children, currentIndex })=>{
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(FooterCarouselBullets, null, children.map((child, index)=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_bullets__rspack_import_2["default"], {
+            key: child.key,
+            type: (0,_utils__rspack_import_3.getItemStatus)(index, currentIndex, children.length)
+        })));
+};
+/* export default */ const __rspack_default_export = (Pagination);
+
+
+},
+6287(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  ItemStatus: () => (ItemStatus)
+});
+var ItemStatus = /*#__PURE__*/ function(ItemStatus) {
+    ItemStatus[ItemStatus["active"] = 0] = "active";
+    ItemStatus[ItemStatus["nearby"] = 1] = "nearby";
+    ItemStatus[ItemStatus["far"] = 2] = "far";
+    ItemStatus[ItemStatus["none"] = 3] = "none";
+    return ItemStatus;
+}({});
+
+
+},
+8139(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  getItemStatus: () => (getItemStatus)
+});
+/* import */ var _types__rspack_import_0 = __webpack_require__(6287);
+
+/**
+ * Returns the status of an indexed item from the carousel index.
+ */ const getItemStatus = (itemIndex, activeIndex, itemCount)=>{
+    const isActive = itemIndex === activeIndex;
+    if (isActive) {
+        return _types__rspack_import_0.ItemStatus.active;
+    }
+    const isAdjacent = Math.abs(itemIndex - activeIndex) === 1;
+    if (isAdjacent) {
+        return _types__rspack_import_0.ItemStatus.nearby;
+    }
+    const isEdge = itemIndex === 0 || itemIndex === itemCount - 1;
+    return isEdge ? _types__rspack_import_0.ItemStatus.far : _types__rspack_import_0.ItemStatus.nearby;
+};
+
+
+},
+8371(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var _variantContentCard__rspack_import_1 = __webpack_require__(4123);
+/* import */ var _variantDefault__rspack_import_2 = __webpack_require__(373);
+
+
+
+const Footers = {
+    "content-card": _variantContentCard__rspack_import_1["default"],
+    default: _variantDefault__rspack_import_2["default"]
+};
+const Footer = (props)=>{
+    if (props.children.length === 1) return null;
+    const Component = Footers[props.variant];
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Component, props);
+};
+/* export default */ const __rspack_default_export = (Footer);
+
+
+},
+4123(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _ledgerhq_icons_ui_react__rspack_import_0 = __webpack_require__(7304);
+/* import */ var _ledgerhq_icons_ui_react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_icons_ui_react__rspack_import_0);
+/* import */ var react__rspack_import_1 = __webpack_require__(2015);
+/* import */ var react__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_1);
+/* import */ var styled_components__rspack_import_2 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_2);
+/* import */ var _Pagination__rspack_import_3 = __webpack_require__(2378);
+
+
+
+
+const FooterContainer = (styled_components__rspack_import_2_default().div)`
+  height: 32px;
+  border-top: 1px solid ${(p)=>p.theme.colors.opacityDefault.c10};
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 16px 6px 16px;
+`;
+const FooterArrowsContainer = (styled_components__rspack_import_2_default().div)`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+const FooterArrowContainer = (styled_components__rspack_import_2_default().div)`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+const FooterContentCard = ({ children, emblaApi, currentIndex, variant })=>{
+    return /*#__PURE__*/ react__rspack_import_1_default().createElement(FooterContainer, null, /*#__PURE__*/ react__rspack_import_1_default().createElement(_Pagination__rspack_import_3["default"], {
+        variant: variant,
+        children: children,
+        emblaApi: emblaApi,
+        currentIndex: currentIndex
+    }), /*#__PURE__*/ react__rspack_import_1_default().createElement(FooterArrowsContainer, null, /*#__PURE__*/ react__rspack_import_1_default().createElement(FooterArrowContainer, {
+        onClick: ()=>emblaApi?.scrollPrev()
+    }, /*#__PURE__*/ react__rspack_import_1_default().createElement(_ledgerhq_icons_ui_react__rspack_import_0.ArrowLeft, {
+        size: "S"
+    })), /*#__PURE__*/ react__rspack_import_1_default().createElement(FooterArrowContainer, {
+        onClick: ()=>emblaApi?.scrollNext()
+    }, /*#__PURE__*/ react__rspack_import_1_default().createElement(_ledgerhq_icons_ui_react__rspack_import_0.ArrowRight, {
+        size: "S"
+    }))));
+};
+/* export default */ const __rspack_default_export = (FooterContentCard);
+
+
+},
+373(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _Pagination__rspack_import_2 = __webpack_require__(2378);
+
+
+
+const FooterContainer = (styled_components__rspack_import_1_default().div)`
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const FooterDefault = (props)=>{
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(FooterContainer, null, /*#__PURE__*/ react__rspack_import_0_default().createElement(_Pagination__rspack_import_2["default"], props));
+};
+/* export default */ const __rspack_default_export = (FooterDefault);
+
+
+},
+7304(module) {
+module.exports = require("@ledgerhq/icons-ui/react");
+
+},
+2015(module) {
+module.exports = require("react");
+
+},
+2770(module) {
+module.exports = require("styled-components");
+
+},
+
+});
+// The module cache
+var __webpack_module_cache__ = {};
+
+// The require function
+function __webpack_require__(moduleId) {
+
+// Check if module is in cache
+var cachedModule = __webpack_module_cache__[moduleId];
+if (cachedModule !== undefined) {
+return cachedModule.exports;
+}
+// Create a new module (and put it into the cache)
+var module = (__webpack_module_cache__[moduleId] = {
+exports: {}
+});
+// Execute the module function
+__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+
+// Return the exports of the module
+return module.exports;
+
+}
+
+// webpack/runtime/compat_get_default_export
+(() => {
+// getDefaultExport function for compatibility with non-ESM modules
+__webpack_require__.n = (module) => {
+	var getter = module && module.__esModule ?
+		() => (module['default']) :
+		() => (module);
+	__webpack_require__.d(getter, { a: getter });
+	return getter;
+};
+
+})();
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = (exports, definition) => {
+	for(var key in definition) {
+        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+        }
+    }
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Carousel_exports = {};
-__export(Carousel_exports, {
-  default: () => Carousel_default
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+})();
+// webpack/runtime/make_namespace_object
+(() => {
+// define __esModule on exports
+__webpack_require__.r = (exports) => {
+	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+	}
+	Object.defineProperty(exports, '__esModule', { value: true });
+};
+})();
+var __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ layout_Carousel)
 });
-module.exports = __toCommonJS(Carousel_exports);
-var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"));
-var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
-var import_debounce = __toESM(require("lodash/debounce"));
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_Footer = __toESM(require("./Footer"));
-var import_ChevronArrow = require("./ChevronArrow");
-const Embla = import_styled_components.default.div`
+
+;// CONCATENATED MODULE: external "embla-carousel-autoplay"
+const external_embla_carousel_autoplay_namespaceObject = require("embla-carousel-autoplay");
+var external_embla_carousel_autoplay_default = /*#__PURE__*/__webpack_require__.n(external_embla_carousel_autoplay_namespaceObject);
+;// CONCATENATED MODULE: external "embla-carousel-react"
+const external_embla_carousel_react_namespaceObject = require("embla-carousel-react");
+var external_embla_carousel_react_default = /*#__PURE__*/__webpack_require__.n(external_embla_carousel_react_namespaceObject);
+;// CONCATENATED MODULE: external "lodash/debounce"
+const debounce_namespaceObject = require("lodash/debounce");
+var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_namespaceObject);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(2770);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+// EXTERNAL MODULE: ./src/components/layout/Carousel/Footer/index.tsx
+var Footer = __webpack_require__(8371);
+// EXTERNAL MODULE: ./src/components/layout/Carousel/ChevronArrow.tsx
+var ChevronArrow = __webpack_require__(8459);
+;// CONCATENATED MODULE: ./src/components/layout/Carousel/index.tsx
+
+
+
+
+
+
+
+const Embla = (external_styled_components_default()).div`
   overflow: hidden;
 `;
-const EmblaContainer = import_styled_components.default.div`
+const EmblaContainer = (external_styled_components_default()).div`
   display: flex;
 `;
-const EmblaSlide = import_styled_components.default.div`
+const EmblaSlide = (external_styled_components_default()).div`
   display: flex;
   flex: 0 0 100%;
   min-width: 0;
@@ -52,7 +425,7 @@ const EmblaSlide = import_styled_components.default.div`
     flex-basis: 100%;
   }
 `;
-const CarouselContainer = import_styled_components.default.div`
+const CarouselContainer = (external_styled_components_default()).div`
   position: relative;
 
   --hover-transition: 0;
@@ -60,137 +433,147 @@ const CarouselContainer = import_styled_components.default.div`
     --hover-transition: 1;
   }
 `;
-const Carousel = ({
-  children,
-  variant = "default",
-  initialDelay = 0,
-  autoPlay = 0,
-  onNext,
-  onPrev
-}) => {
-  const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
-  const [autoplayEnabled, setAutoplayEnabled] = (0, import_react.useState)(false);
-  const plugins = (0, import_react.useMemo)(
-    () => autoplayEnabled && autoPlay ? [(0, import_embla_carousel_autoplay.default)({ delay: autoPlay, ...AutoplayFlags })] : [],
-    [autoplayEnabled, autoPlay]
-  );
-  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({ loop: true }, plugins);
-  (0, import_react.useEffect)(() => {
-    if (autoPlay) {
-      const timer = setTimeout(() => setAutoplayEnabled(true), initialDelay);
-      return () => clearTimeout(timer);
-    }
-  }, [autoPlay]);
-  const updateIndex = (0, import_react.useCallback)(() => {
-    if (!emblaApi)
-      return;
-    const newIndex = emblaApi.selectedScrollSnap();
-    setCurrentIndex(newIndex);
-    emblaApi.scrollTo(newIndex);
-  }, [emblaApi]);
-  (0, import_react.useEffect)(() => {
-    if (!emblaApi)
-      return;
-    updateIndex();
-    const dragX = watchDragX(emblaApi);
-    const handleAnySelect = (0, import_debounce.default)((mightBeASwipe) => {
-      updateIndex();
-      if (!mightBeASwipe || variant !== "default")
-        return;
-      if (dragX.value > 0)
-        return onPrev == null ? void 0 : onPrev();
-      if (dragX.value < 0)
-        return onNext == null ? void 0 : onNext();
-    }, 0);
-    emblaApi.on("select", handleSelect);
-    emblaApi.on("autoplay:select", handleAutoPlaySelect);
-    emblaApi.on("button:prev", handlePrevButton);
-    emblaApi.on("button:next", handleNextButton);
-    emblaApi.on("reInit", updateIndex);
-    return () => {
-      dragX.clean();
-      emblaApi.off("select", handleSelect);
-      emblaApi.off("autoplay:select", handleAutoPlaySelect);
-      emblaApi.off("button:prev", handlePrevButton);
-      emblaApi.off("button:next", handleNextButton);
-      emblaApi.off("reInit", updateIndex);
-    };
-    function handleSelect() {
-      handleAnySelect(true);
-    }
-    function handleAutoPlaySelect() {
-      handleAnySelect(false);
-    }
-    function handlePrevButton() {
-      emblaApi == null ? void 0 : emblaApi.scrollPrev();
-      onPrev == null ? void 0 : onPrev();
-      handleAnySelect(false);
-    }
-    function handleNextButton() {
-      emblaApi == null ? void 0 : emblaApi.scrollNext();
-      onNext == null ? void 0 : onNext();
-      handleAnySelect(false);
-    }
-  }, [emblaApi, updateIndex, variant]);
-  if (!children.length)
-    return null;
-  const handleGotoPrevSlide = () => emblaApi == null ? void 0 : emblaApi.emit("button:prev");
-  const handleGotoNextSlide = () => emblaApi == null ? void 0 : emblaApi.emit("button:next");
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(CarouselContainer, { variant }, variant === "default" && children.length > 1 && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    import_ChevronArrow.ChevronArrow,
-    {
-      "data-testid": "carousel-arrow-prev",
-      direction: "left",
-      onClick: handleGotoPrevSlide
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_ChevronArrow.ChevronArrow,
-    {
-      "data-testid": "carousel-arrow-next",
-      direction: "right",
-      onClick: handleGotoNextSlide
-    }
-  )), /* @__PURE__ */ import_react.default.createElement(Embla, { ref: emblaRef }, /* @__PURE__ */ import_react.default.createElement(EmblaContainer, null, children.map((child) => /* @__PURE__ */ import_react.default.createElement(EmblaSlide, { key: child.key }, child))))), /* @__PURE__ */ import_react.default.createElement(
-    import_Footer.default,
-    {
-      children,
-      variant,
-      emblaApi,
-      currentIndex
-    }
-  ));
+/**
+ * This component uses the https://github.com/davidjerleke/embla-carousel library.
+ */ const Carousel = ({ children, variant = "default", initialDelay = 0, autoPlay = 0, onNext, onPrev })=>{
+    const [currentIndex, setCurrentIndex] = (0,external_react_.useState)(0);
+    const [autoplayEnabled, setAutoplayEnabled] = (0,external_react_.useState)(false);
+    const plugins = (0,external_react_.useMemo)(()=>autoplayEnabled && autoPlay ? [
+            external_embla_carousel_autoplay_default()({
+                delay: autoPlay,
+                ...AutoplayFlags
+            })
+        ] : [], [
+        autoplayEnabled,
+        autoPlay
+    ]);
+    const [emblaRef, emblaApi] = external_embla_carousel_react_default()({
+        loop: true
+    }, plugins);
+    (0,external_react_.useEffect)(()=>{
+        if (autoPlay) {
+            const timer = setTimeout(()=>setAutoplayEnabled(true), initialDelay);
+            return ()=>clearTimeout(timer);
+        }
+    }, [
+        autoPlay
+    ]);
+    const updateIndex = (0,external_react_.useCallback)(()=>{
+        if (!emblaApi) return;
+        const newIndex = emblaApi.selectedScrollSnap();
+        setCurrentIndex(newIndex);
+        emblaApi.scrollTo(newIndex);
+    }, [
+        emblaApi
+    ]);
+    (0,external_react_.useEffect)(()=>{
+        if (!emblaApi) return;
+        // Initial call to update carousel index
+        updateIndex();
+        const dragX = watchDragX(emblaApi);
+        // When the selected scroll snap changes
+        const handleAnySelect = debounce_default()((mightBeASwipe)=>{
+            updateIndex();
+            if (!mightBeASwipe || variant !== "default") return; // onNext/onPrev events are not supported for content-card variant ATM
+            if (dragX.value > 0) return onPrev?.();
+            if (dragX.value < 0) return onNext?.();
+        }, 0); // all events are fired on the same tick so no need to wait past the next tick
+        emblaApi.on("select", handleSelect);
+        emblaApi.on("autoplay:select", handleAutoPlaySelect);
+        emblaApi.on("button:prev", handlePrevButton);
+        emblaApi.on("button:next", handleNextButton);
+        // When `reInit` is called or when window is resized
+        emblaApi.on("reInit", updateIndex);
+        return ()=>{
+            dragX.clean();
+            emblaApi.off("select", handleSelect);
+            emblaApi.off("autoplay:select", handleAutoPlaySelect);
+            emblaApi.off("button:prev", handlePrevButton);
+            emblaApi.off("button:next", handleNextButton);
+            emblaApi.off("reInit", updateIndex);
+        };
+        function handleSelect() {
+            handleAnySelect(true); // This could be a swipe action. As this runs first the debounce will override the value otherwise
+        }
+        function handleAutoPlaySelect() {
+            handleAnySelect(false);
+        }
+        function handlePrevButton() {
+            emblaApi?.scrollPrev();
+            onPrev?.();
+            handleAnySelect(false);
+        }
+        function handleNextButton() {
+            emblaApi?.scrollNext();
+            onNext?.();
+            handleAnySelect(false);
+        }
+    }, [
+        emblaApi,
+        updateIndex,
+        variant
+    ]);
+    if (!children.length) return null;
+    const handleGotoPrevSlide = ()=>emblaApi?.emit("button:prev");
+    const handleGotoNextSlide = ()=>emblaApi?.emit("button:next");
+    return /*#__PURE__*/ external_react_default().createElement("div", null, /*#__PURE__*/ external_react_default().createElement(CarouselContainer, {
+        variant: variant
+    }, variant === "default" && children.length > 1 && /*#__PURE__*/ external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/ external_react_default().createElement(ChevronArrow.ChevronArrow, {
+        "data-testid": "carousel-arrow-prev",
+        direction: "left",
+        onClick: handleGotoPrevSlide
+    }), /*#__PURE__*/ external_react_default().createElement(ChevronArrow.ChevronArrow, {
+        "data-testid": "carousel-arrow-next",
+        direction: "right",
+        onClick: handleGotoNextSlide
+    })), /*#__PURE__*/ external_react_default().createElement(Embla, {
+        ref: emblaRef
+    }, /*#__PURE__*/ external_react_default().createElement(EmblaContainer, null, children.map((child)=>/*#__PURE__*/ external_react_default().createElement(EmblaSlide, {
+            key: child.key
+        }, child))))), /*#__PURE__*/ external_react_default().createElement(Footer["default"], {
+        children: children,
+        variant: variant,
+        emblaApi: emblaApi,
+        currentIndex: currentIndex
+    }));
 };
-var Carousel_default = Carousel;
+/* export default */ const layout_Carousel = (Carousel);
 const AutoplayFlags = {
-  play: true,
-  stopOnMouseEnter: true,
-  stopOnInteraction: false
+    play: true,
+    stopOnMouseEnter: true,
+    stopOnInteraction: false
 };
 function watchDragX(emblaApi) {
-  emblaApi.on("pointerDown", watchMouse);
-  let start;
-  let end;
-  return {
-    get value() {
-      return typeof start === "undefined" || typeof end === "undefined" ? 0 : end - start;
-    },
-    clean: () => {
-      emblaApi.off("pointerDown", watchMouse);
-      document.removeEventListener("mouseup", handleMouseUp);
+    emblaApi.on("pointerDown", watchMouse);
+    let start;
+    let end;
+    return {
+        get value () {
+            return typeof start === "undefined" || typeof end === "undefined" ? 0 : end - start;
+        },
+        clean: ()=>{
+            emblaApi.off("pointerDown", watchMouse);
+            document.removeEventListener("mouseup", handleMouseUp);
+        }
+    };
+    function watchMouse() {
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    }
+    function handleMouseMove(event) {
+        document.removeEventListener("mousemove", handleMouseMove);
+        start = event.clientX;
+        end = undefined;
+    }
+    function handleMouseUp(event) {
+        document.removeEventListener("mouseup", handleMouseUp);
+        end = event.clientX;
     }
-  };
-  function watchMouse() {
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }
-  function handleMouseMove(event) {
-    document.removeEventListener("mousemove", handleMouseMove);
-    start = event.clientX;
-    end = void 0;
-  }
-  function handleMouseUp(event) {
-    document.removeEventListener("mouseup", handleMouseUp);
-    end = event.clientX;
-  }
 }
-//# sourceMappingURL=index.js.map
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=index.js.map