@semcore/carousel 16.0.0-prerelease.2 → 16.0.0-prerelease.21

package/lib/esm/Carousel.mjs

@@ -1,517 +1,673 @@
-import w from "@babel/runtime/helpers/esm/extends";
-import C from "@babel/runtime/helpers/esm/objectSpread2";
-import N from "@babel/runtime/helpers/esm/toConsumableArray";
-import $ from "@babel/runtime/helpers/esm/classCallCheck";
-import O from "@babel/runtime/helpers/esm/createClass";
-import m from "@babel/runtime/helpers/esm/assertThisInitialized";
-import Z from "@babel/runtime/helpers/esm/inherits";
-import F from "@babel/runtime/helpers/esm/createSuper";
-import h from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as g, createComponent as L, assignProps as S, Component as A } from "@semcore/core";
-import i from "react";
-import R from "@semcore/button";
-import j from "@semcore/modal";
-import { Flex as T, Box as I } from "@semcore/flex-box";
-import U from "@semcore/icon/ChevronRight/l";
-import V from "@semcore/icon/ChevronLeft/l";
-import X from "@semcore/core/lib/utils/uniqueID";
-import W from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { localizedMessages as H } from "./translations/__intergalactic-dynamic-locales.mjs";
-import z from "@semcore/core/lib/utils/logger";
-import { findAllComponents as M } from "@semcore/core/lib/utils/findComponent";
-import { createBreakpoints as q } from "@semcore/breakpoints";
-import Y from "@semcore/core/lib/utils/enhances/keyboardFocusEnhance";
-var G = (
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import Button from "@semcore/button";
+import Modal from "@semcore/modal";
+import { Flex, Box } from "@semcore/flex-box";
+import ChevronRight from "@semcore/icon/ChevronRight/l";
+import ChevronLeft from "@semcore/icon/ChevronLeft/l";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import logger from "@semcore/core/lib/utils/logger";
+import { findAllComponents } from "@semcore/core/lib/utils/findComponent";
+import { createBreakpoints } from "@semcore/breakpoints";
+/*!__reshadow-styles__:"./style/carousel.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (g.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SCarousel_vh2eh_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_vh2eh_gg_{display:flex;transition:transform var(--duration_vh2eh) ease-in-out}.___SContentBox_vh2eh_gg_,.___SModalBox_vh2eh_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_vh2eh_gg_:has(.___SItem_vh2eh_gg_.__keyboardFocused_vh2eh_gg_):after,.___SModalBox_vh2eh_gg_:has(.___SItem_vh2eh_gg_.__keyboardFocused_vh2eh_gg_):after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px}.___SModalContainer_vh2eh_gg_{display:flex;transition:transform var(--duration_vh2eh) ease-in-out}.___SItem_vh2eh_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_vh2eh);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_vh2eh_gg_.__zoomIn_vh2eh_gg_{cursor:zoom-in}.___SItem_vh2eh_gg_.__zoomOut_vh2eh_gg_{cursor:zoom-out}.___SIndicators_vh2eh_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;outline:0;position:relative}.___SIndicator_vh2eh_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-control-rounded, 6px);background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@media (hover:hover){.___SIndicator_vh2eh_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_vh2eh_gg_.__active_vh2eh_gg_{opacity:1}.___SIndicator_vh2eh_gg_.__inverted_vh2eh_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_vh2eh_gg_,.___SPrev_vh2eh_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_vh2eh_gg_ .___SNextButton_vh2eh_gg_ span:has(>svg:only-child),.___SNext_vh2eh_gg_ .___SPrevButton_vh2eh_gg_ span:has(>svg:only-child),.___SPrev_vh2eh_gg_ .___SNextButton_vh2eh_gg_ span:has(>svg:only-child),.___SPrev_vh2eh_gg_ .___SPrevButton_vh2eh_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SPrev_vh2eh_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_vh2eh_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_vh2eh_gg_.__disabled_vh2eh_gg_,.___SPrev_vh2eh_gg_.__disabled_vh2eh_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_vh2eh_gg_{transition:none}}',
-    "vh2eh_gg_"
-  ), {
-    __SCarousel: "___SCarousel_vh2eh_gg_",
-    __SContainer: "___SContainer_vh2eh_gg_",
-    "--duration": "--duration_vh2eh",
-    __SModalContainer: "___SModalContainer_vh2eh_gg_",
-    __SItem: "___SItem_vh2eh_gg_",
-    "--transform": "--transform_vh2eh",
-    _zoomIn: "__zoomIn_vh2eh_gg_",
-    _zoomOut: "__zoomOut_vh2eh_gg_",
-    __SIndicators: "___SIndicators_vh2eh_gg_",
-    __SIndicator: "___SIndicator_vh2eh_gg_",
-    _active: "__active_vh2eh_gg_",
-    _inverted: "__inverted_vh2eh_gg_",
-    __SPrev: "___SPrev_vh2eh_gg_",
-    __SNext: "___SNext_vh2eh_gg_",
-    _disabled: "__disabled_vh2eh_gg_",
-    __SContentBox: "___SContentBox_vh2eh_gg_",
-    __SModalBox: "___SModalBox_vh2eh_gg_",
-    _keyboardFocused: "__keyboardFocused_vh2eh_gg_",
-    __SPrevButton: "___SPrevButton_vh2eh_gg_",
-    __SNextButton: "___SNextButton_vh2eh_gg_"
+    '.___SCarousel_onno2_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_onno2_gg_{display:flex;transition:transform var(--duration_onno2) ease-in-out}.___SContentBox_onno2_gg_,.___SModalBox_onno2_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_onno2_gg_:has(.___SItem_onno2_gg_:focus-visible):after,.___SModalBox_onno2_gg_:has(.___SItem_onno2_gg_:focus-visible):after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px}.___SModalContainer_onno2_gg_{display:flex;transition:transform var(--duration_onno2) ease-in-out}.___SItem_onno2_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_onno2);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_onno2_gg_.__zoomIn_onno2_gg_{cursor:zoom-in}.___SItem_onno2_gg_.__zoomOut_onno2_gg_{cursor:zoom-out}.___SIndicators_onno2_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;outline:0;position:relative}.___SIndicator_onno2_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-control-rounded, 6px);background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@media (hover:hover){.___SIndicator_onno2_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_onno2_gg_.__active_onno2_gg_{opacity:1}.___SIndicator_onno2_gg_.__inverted_onno2_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_onno2_gg_,.___SPrev_onno2_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_onno2_gg_ .___SNextButton_onno2_gg_ span:has(>svg:only-child),.___SNext_onno2_gg_ .___SPrevButton_onno2_gg_ span:has(>svg:only-child),.___SPrev_onno2_gg_ .___SNextButton_onno2_gg_ span:has(>svg:only-child),.___SPrev_onno2_gg_ .___SPrevButton_onno2_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SPrev_onno2_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_onno2_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_onno2_gg_.__disabled_onno2_gg_,.___SPrev_onno2_gg_.__disabled_onno2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_onno2_gg_{transition:none}}',
+    /*__inner_css_end__*/
+    "onno2_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SCarousel": "___SCarousel_onno2_gg_",
+    "__SContainer": "___SContainer_onno2_gg_",
+    "--duration": "--duration_onno2",
+    "__SModalContainer": "___SModalContainer_onno2_gg_",
+    "__SItem": "___SItem_onno2_gg_",
+    "--transform": "--transform_onno2",
+    "_zoomIn": "__zoomIn_onno2_gg_",
+    "_zoomOut": "__zoomOut_onno2_gg_",
+    "__SIndicators": "___SIndicators_onno2_gg_",
+    "__SIndicator": "___SIndicator_onno2_gg_",
+    "_active": "__active_onno2_gg_",
+    "_inverted": "__inverted_onno2_gg_",
+    "__SPrev": "___SPrev_onno2_gg_",
+    "__SNext": "___SNext_onno2_gg_",
+    "_disabled": "__disabled_onno2_gg_",
+    "__SContentBox": "___SContentBox_onno2_gg_",
+    "__SModalBox": "___SModalBox_onno2_gg_",
+    "__SPrevButton": "___SPrevButton_onno2_gg_",
+    "__SNextButton": "___SNextButton_onno2_gg_"
   })
-), J = {
+);
+var MAP_TRANSFORM = {
   ArrowLeft: "left",
   ArrowRight: "right"
-}, Q = [X(), W(H)], ee = ["(min-width: 481px)", "(max-width: 480px)"], D = q(ee), te = function(c) {
-  return c === 1;
-}, E = /* @__PURE__ */ function(p) {
-  Z(_, p);
-  var c = F(_);
-  function _(a) {
-    var r, n, e;
-    return $(this, _), e = c.call(this, a), h(m(e), "defaultItemsCount", 0), h(m(e), "refCarousel", /* @__PURE__ */ i.createRef()), h(m(e), "refContainer", /* @__PURE__ */ i.createRef()), h(m(e), "refModalContainer", /* @__PURE__ */ i.createRef()), h(m(e), "_touchStartCoord", -1), h(m(e), "handlerKeyDown", function(t) {
-      var o = 1, s = e.state.items.length + 1;
-      switch (t.key) {
+};
+var enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)];
+var media = ["(min-width: 481px)", "(max-width: 480px)"];
+var BreakPoints = createBreakpoints(media);
+var isSmallScreen = function isSmallScreen2(index) {
+  return index === 1;
+};
+var CarouselRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(CarouselRoot2, _Component);
+  var _super = _createSuper(CarouselRoot2);
+  function CarouselRoot2(props) {
+    var _ref20, _props$index;
+    var _this;
+    _classCallCheck(this, CarouselRoot2);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "defaultItemsCount", 0);
+    _defineProperty(_assertThisInitialized(_this), "refCarousel", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "refContainer", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "refModalContainer", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "_touchStartCoord", -1);
+    _defineProperty(_assertThisInitialized(_this), "handlerKeyDown", function(e) {
+      var firstSlide = 1;
+      var lastSlide = _this.state.items.length + 1;
+      switch (e.key) {
         case "ArrowLeft":
         case "ArrowRight": {
-          t.preventDefault(), e.transformItem(J[t.key]);
+          e.preventDefault();
+          _this.transformItem(MAP_TRANSFORM[e.key]);
           break;
         }
         case "Home": {
-          t.preventDefault(), e.slideToValue(o);
+          e.preventDefault();
+          _this.slideToValue(firstSlide);
           break;
         }
         case "End": {
-          t.preventDefault(), e.slideToValue(s);
+          e.preventDefault();
+          _this.slideToValue(lastSlide);
           break;
         }
       }
-      t.metaKey && (t.key === "ArrowLeft" ? (t.preventDefault(), e.slideToValue(o)) : t.key === "ArrowRight" && (t.preventDefault(), e.slideToValue(s))), (t.key === "Enter" || t.key === " ") && t.target instanceof HTMLDivElement && t.target.role === "tabpanel" && e.handleToggleZoomModal();
-    }), h(m(e), "toggleItem", function(t) {
-      var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
-      e.setState(function(s) {
-        var d = o ? s.items.filter(function(l) {
-          return l.node !== t.node;
-        }) : [].concat(N(s.items), [t]);
+      if (e.metaKey) {
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          _this.slideToValue(firstSlide);
+        } else if (e.key === "ArrowRight") {
+          e.preventDefault();
+          _this.slideToValue(lastSlide);
+        }
+      }
+      if ((e.key === "Enter" || e.key === " ") && e.target instanceof HTMLDivElement && e.target.role === "tabpanel") {
+        _this.handleToggleZoomModal();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "toggleItem", function(item) {
+      var removeItem = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+      _this.setState(function(prevState) {
+        var newItems = removeItem ? prevState.items.filter(function(element) {
+          return element.node !== item.node;
+        }) : [].concat(_toConsumableArray(prevState.items), [item]);
         return {
-          items: d
+          items: newItems
         };
-      }), o || e.defaultItemsCount++;
-    }), h(m(e), "transformContainer", function() {
-      var t = e.state.selectedIndex * -1 * 100;
-      e.refContainer.current && (e.refContainer.current.style.transform = "translateX(".concat(t, "%)")), e.refModalContainer.current && (e.refModalContainer.current.style.transform = "translateX(".concat(t, "%)"));
-    }), h(m(e), "getDirection", function(t, o) {
-      var s = e.asProps.bounded;
-      if (s)
-        return t < o ? "right" : "left";
-      var d = e.state.items, l = d.map(function(k, x) {
-        return x;
-      }), u = N(l), f = u[0], y = u[u.length - 1];
-      if (u.length === 2)
-        return t < o ? "right" : "left";
-      t === f && (u.unshift(y), u.pop()), t === y && (u.shift(), u.push(f));
-      var b = u.indexOf(t), P = u.indexOf(o);
-      return P - b < 0 ? "left" : "right";
-    }), h(m(e), "slideToValue", function(t) {
-      for (var o = e.state.selectedIndex, s = o < t ? "right" : "left", d = Math.abs(o - t); d > 0; )
-        e.transformItem(s), d--;
-    }), h(m(e), "transformItem", function(t) {
-      var o = e.asProps.bounded, s = e.state, d = s.items, l = s.selectedIndex, u = d.length - 1;
-      if (t === "right") {
-        if (o && l === u) {
-          e.handlers.index(u);
+      });
+      if (!removeItem) {
+        _this.defaultItemsCount++;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "transformContainer", function() {
+      var transform = _this.state.selectedIndex * -1 * 100;
+      if (_this.refContainer.current) {
+        _this.refContainer.current.style.transform = "translateX(".concat(transform, "%)");
+      }
+      if (_this.refModalContainer.current) {
+        _this.refModalContainer.current.style.transform = "translateX(".concat(transform, "%)");
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "getDirection", function(currentIndex, nextIndex) {
+      var bounded = _this.asProps.bounded;
+      if (bounded) {
+        return currentIndex < nextIndex ? "right" : "left";
+      }
+      var items = _this.state.items;
+      var listIndex = items.map(function(_, ind) {
+        return ind;
+      });
+      var tmpArr = _toConsumableArray(listIndex);
+      var minTmpArr = tmpArr[0];
+      var maxTmpArr = tmpArr[tmpArr.length - 1];
+      if (tmpArr.length === 2) {
+        return currentIndex < nextIndex ? "right" : "left";
+      }
+      if (currentIndex === minTmpArr) {
+        tmpArr.unshift(maxTmpArr);
+        tmpArr.pop();
+      }
+      if (currentIndex === maxTmpArr) {
+        tmpArr.shift();
+        tmpArr.push(minTmpArr);
+      }
+      var tmpCurrentIndex = tmpArr.indexOf(currentIndex);
+      var left = tmpArr.indexOf(nextIndex);
+      return left - tmpCurrentIndex < 0 ? "left" : "right";
+    });
+    _defineProperty(_assertThisInitialized(_this), "slideToValue", function(nextIndex) {
+      var selectedIndex = _this.state.selectedIndex;
+      var direction = selectedIndex < nextIndex ? "right" : "left";
+      var diff = Math.abs(selectedIndex - nextIndex);
+      while (diff > 0) {
+        _this.transformItem(direction);
+        diff--;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "transformItem", function(direction) {
+      var bounded = _this.asProps.bounded;
+      var _this$state = _this.state, items = _this$state.items, selectedIndex = _this$state.selectedIndex;
+      var maxIndexIndicator = items.length - 1;
+      if (direction === "right") {
+        if (bounded && selectedIndex === maxIndexIndicator) {
+          _this.handlers.index(maxIndexIndicator);
           return;
         }
-        if (e.isControlled) {
-          e.handlers.index(l === u ? 0 : l + 1);
+        if (_this.isControlled) {
+          _this.handlers.index(selectedIndex === maxIndexIndicator ? 0 : selectedIndex + 1);
           return;
         }
-        e.setState(function(f) {
+        _this.setState(function(prevState) {
           return {
-            selectedIndex: f.selectedIndex + 1
+            selectedIndex: prevState.selectedIndex + 1
           };
         }, function() {
-          e.transformContainer(), e.handlers.index(e.getIndex());
+          _this.transformContainer();
+          _this.handlers.index(_this.getIndex());
         });
         return;
       }
-      if (t === "left") {
-        if (o && l === 0) {
-          e.handlers.index(0);
+      if (direction === "left") {
+        if (bounded && selectedIndex === 0) {
+          _this.handlers.index(0);
           return;
         }
-        if (e.isControlled) {
-          e.handlers.index(l === 0 ? u : l - 1);
+        if (_this.isControlled) {
+          _this.handlers.index(selectedIndex === 0 ? maxIndexIndicator : selectedIndex - 1);
           return;
         }
-        e.setState(function(f) {
+        _this.setState(function(prevState) {
           return {
-            selectedIndex: f.selectedIndex - 1
+            selectedIndex: prevState.selectedIndex - 1
           };
         }, function() {
-          e.transformContainer(), e.handlers.index(e.getIndex());
+          _this.transformContainer();
+          _this.handlers.index(_this.getIndex());
         });
         return;
       }
-    }), h(m(e), "bindHandlerClick", function(t) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(direction) {
       return function() {
-        e.transformItem(t);
+        _this.transformItem(direction);
       };
-    }), h(m(e), "bindHandlerClickIndicator", function(t) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerClickIndicator", function(value) {
       return function() {
-        var o = e.state, s = o.selectedIndex, d = o.items;
-        if (!e.isControlled && t !== s) {
-          var l = Math.floor(s / d.length) * d.length + t;
-          e.slideToValue(l);
+        var _this$state2 = _this.state, selectedIndex = _this$state2.selectedIndex, items = _this$state2.items;
+        if (!_this.isControlled && value !== selectedIndex) {
+          var newValueIndex = Math.floor(selectedIndex / items.length) * items.length + value;
+          _this.slideToValue(newValueIndex);
         }
-        e.handlers.index(t);
+        _this.handlers.index(value);
       };
-    }), h(m(e), "handlerTouchStart", function(t) {
-      e._touchStartCoord = t.changedTouches[0].clientX;
-    }), h(m(e), "handlerTouchEnd", function(t) {
-      var o = t.changedTouches[0].clientX, s = o - e._touchStartCoord;
-      s > 50 ? e.transformItem("left") : s < -50 && e.transformItem("right");
-    }), h(m(e), "handleToggleZoomModal", function() {
-      e.setState(function(t) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "handlerTouchStart", function(e) {
+      _this._touchStartCoord = e.changedTouches[0].clientX;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handlerTouchEnd", function(e) {
+      var touchEndCoord = e.changedTouches[0].clientX;
+      var delta = touchEndCoord - _this._touchStartCoord;
+      if (delta > 50) {
+        _this.transformItem("left");
+      } else if (delta < -50) {
+        _this.transformItem("right");
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleToggleZoomModal", function() {
+      _this.setState(function(prevState) {
         return {
-          isOpenZoom: !t.isOpenZoom
+          isOpenZoom: !prevState.isOpenZoom
         };
       }, function() {
-        e.state.isOpenZoom && e.transformContainer();
+        if (_this.state.isOpenZoom) {
+          _this.transformContainer();
+        }
       });
-    }), h(m(e), "bindHandlerKeydownControl", function(t) {
-      return function(o) {
-        (o.key === "Enter" || o.key === " ") && (o.preventDefault(), e.bindHandlerClick(t)());
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerKeydownControl", function(direction) {
+      return function(e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          _this.bindHandlerClick(direction)();
+        }
       };
-    }), e.isControlled = a.index !== void 0, e.state = {
+    });
+    _this.isControlled = props.index !== void 0;
+    _this.state = {
       items: [],
-      isOpenZoom: !1,
-      selectedIndex: (r = (n = a.index) !== null && n !== void 0 ? n : a.defaultIndex) !== null && r !== void 0 ? r : 0
-    }, e;
+      isOpenZoom: false,
+      selectedIndex: (_ref20 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref20 !== void 0 ? _ref20 : 0
+    };
+    return _this;
   }
-  return O(_, [{
+  _createClass(CarouselRoot2, [{
     key: "uncontrolledProps",
-    value: function() {
-      var r = this;
+    value: function uncontrolledProps() {
+      var _this2 = this;
       return {
-        index: [null, function(n) {
-          var e;
-          (e = r.refCarousel.current) === null || e === void 0 || e.blur(), setTimeout(function() {
-            var t;
-            (t = r.refCarousel.current) === null || t === void 0 || t.focus();
+        index: [null, function(_index) {
+          var _this2$refCarousel$cu;
+          (_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0 ? void 0 : _this2$refCarousel$cu.blur();
+          setTimeout(function() {
+            var _this2$refCarousel$cu2;
+            (_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0 ? void 0 : _this2$refCarousel$cu2.focus();
           }, 0);
         }]
       };
     }
   }, {
     key: "componentDidMount",
-    value: function() {
-      var r = this.state.selectedIndex;
-      r !== 0 && (r < 0 || r >= this.defaultItemsCount ? (z.warn(!0, "You couldn't use value for the `index` or `defaultIndex` not from `Item's` length range.", _.displayName), this.setState({
-        selectedIndex: 0
-      })) : this.transformContainer());
-      var n = M(this.asProps.Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
-      z.warn(n.length > 0, "Please, try to remove `Prev`, `Next`, `Indicators` and other children components from your Carousel, except only `Item` elements.", _.displayName);
+    value: function componentDidMount() {
+      var selectedIndex = this.state.selectedIndex;
+      if (selectedIndex !== 0) {
+        if (selectedIndex < 0 || selectedIndex >= this.defaultItemsCount) {
+          logger.warn(true, "You couldn't use value for the `index` or `defaultIndex` not from `Item's` length range.", CarouselRoot2.displayName);
+          this.setState({
+            selectedIndex: 0
+          });
+        } else {
+          this.transformContainer();
+        }
+      }
+      var deprecatedComponents = findAllComponents(this.asProps.Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
+      logger.warn(deprecatedComponents.length > 0, "Please, try to remove `Prev`, `Next`, `Indicators` and other children components from your Carousel, except only `Item` elements.", CarouselRoot2.displayName);
     }
   }, {
     key: "componentDidUpdate",
-    value: function(r) {
-      var n = this, e = this.asProps.index;
-      r.index !== e && this.isControlled && e !== void 0 && this.setState({
-        selectedIndex: e
-      }, function() {
-        return n.transformContainer();
-      });
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+      var index = this.asProps.index;
+      if (prevProps.index !== index && this.isControlled && index !== void 0) {
+        this.setState({
+          selectedIndex: index
+        }, function() {
+          return _this3.transformContainer();
+        });
+      }
     }
   }, {
     key: "getContainerProps",
-    value: function() {
-      var r = this.asProps.duration;
+    value: function getContainerProps() {
+      var duration = this.asProps.duration;
       return {
         ref: this.refContainer,
-        duration: r
+        duration
       };
     }
   }, {
     key: "getItemProps",
-    value: function(r, n) {
-      var e = this.asProps.zoom, t = this.isSelected(n);
+    value: function getItemProps(props, index) {
+      var zoom = this.asProps.zoom;
+      var isCurrent = this.isSelected(index);
       return {
         toggleItem: this.toggleItem,
         uid: this.asProps.uid,
-        index: n,
-        current: t,
-        zoomIn: e,
+        index,
+        current: isCurrent,
+        zoomIn: zoom,
         onToggleZoomModal: this.handleToggleZoomModal,
-        transform: t ? this.getTransform() : void 0,
+        transform: isCurrent ? this.getTransform() : void 0,
         isOpenZoom: this.state.isOpenZoom
       };
     }
   }, {
     key: "getPrevProps",
-    value: function() {
-      var r = this.asProps, n = r.bounded, e = r.getI18nText, t = r.uid, o = this.state, s = o.items, d = o.selectedIndex, l = !1;
-      return s.length && n && (l = d === 0), {
+    value: function getPrevProps() {
+      var _this$asProps = this.asProps, bounded = _this$asProps.bounded, getI18nText = _this$asProps.getI18nText, uid = _this$asProps.uid;
+      var _this$state3 = this.state, items = _this$state3.items, selectedIndex = _this$state3.selectedIndex;
+      var disabled = false;
+      if (items.length && bounded) {
+        disabled = selectedIndex === 0;
+      }
+      return {
         onClick: this.bindHandlerClick("left"),
         onKeyDown: this.bindHandlerKeydownControl("left"),
-        disabled: l,
-        label: e("prev"),
-        "aria-controls": "igc-".concat(t, "-carousel")
+        disabled,
+        label: getI18nText("prev"),
+        "aria-controls": "igc-".concat(uid, "-carousel")
       };
     }
   }, {
     key: "getNextProps",
-    value: function() {
-      var r = this.asProps, n = r.bounded, e = r.getI18nText, t = r.uid, o = this.state, s = o.items, d = o.selectedIndex, l = !1;
-      return s.length && n && (l = d === s.length - 1), {
+    value: function getNextProps() {
+      var _this$asProps2 = this.asProps, bounded = _this$asProps2.bounded, getI18nText = _this$asProps2.getI18nText, uid = _this$asProps2.uid;
+      var _this$state4 = this.state, items = _this$state4.items, selectedIndex = _this$state4.selectedIndex;
+      var disabled = false;
+      if (items.length && bounded) {
+        disabled = selectedIndex === items.length - 1;
+      }
+      return {
         onClick: this.bindHandlerClick("right"),
         onKeyDown: this.bindHandlerKeydownControl("right"),
-        disabled: l,
-        label: e("next"),
-        "aria-controls": "igc-".concat(t, "-carousel")
+        disabled,
+        label: getI18nText("next"),
+        "aria-controls": "igc-".concat(uid, "-carousel")
       };
     }
   }, {
     key: "getIndicatorsProps",
-    value: function() {
-      var r = this, n = this.state.items, e = this.asProps.getI18nText;
+    value: function getIndicatorsProps() {
+      var _this4 = this;
+      var items = this.state.items;
+      var getI18nText = this.asProps.getI18nText;
       return {
-        items: n.map(function(t, o) {
+        items: items.map(function(item, key) {
           return {
-            active: r.isSelected(o),
-            onClick: r.bindHandlerClickIndicator(o),
-            key: o
+            active: _this4.isSelected(key),
+            onClick: _this4.bindHandlerClickIndicator(key),
+            key
           };
         }),
         role: "tablist",
         tabIndex: 0,
-        "aria-label": e("slides")
+        "aria-label": getI18nText("slides")
       };
     }
   }, {
     key: "getIndicatorProps",
-    value: function(r, n) {
-      var e = this.isSelected(n), t = this.asProps.getI18nText;
+    value: function getIndicatorProps(_, index) {
+      var isCurrent = this.isSelected(index);
+      var getI18nText = this.asProps.getI18nText;
       return {
         role: "tab",
-        "aria-selected": e,
-        "aria-controls": "igc-".concat(this.asProps.uid, "-carousel-item-").concat(n),
-        "aria-label": t("slide", {
-          slideNumber: n + 1
+        "aria-selected": isCurrent,
+        "aria-controls": "igc-".concat(this.asProps.uid, "-carousel-item-").concat(index),
+        "aria-label": getI18nText("slide", {
+          slideNumber: index + 1
         })
       };
     }
   }, {
     key: "getTransform",
-    value: function() {
-      var r = this.state, n = r.items, e = r.selectedIndex, t = e > 0 ? 1 : -1, o = n.length === 0 ? 0 : Math.floor(e / n.length) * t, s = e > 0 && e < n.length ? 0 : 100 * t * o * n.length;
-      return s;
+    value: function getTransform() {
+      var _this$state5 = this.state, items = _this$state5.items, selectedIndex = _this$state5.selectedIndex;
+      var direction = selectedIndex > 0 ? 1 : -1;
+      var count = items.length === 0 ? 0 : Math.floor(selectedIndex / items.length) * direction;
+      var transform = selectedIndex > 0 && selectedIndex < items.length ? 0 : 100 * direction * count * items.length;
+      return transform;
     }
   }, {
     key: "getIndex",
-    value: function() {
-      var r = this.state, n = r.items, e = r.selectedIndex;
-      return n.length === 0 ? 0 : e >= 0 ? e % n.length : (n.length + e % n.length) % n.length;
+    value: function getIndex() {
+      var _this$state6 = this.state, items = _this$state6.items, selectedIndex = _this$state6.selectedIndex;
+      if (items.length === 0) {
+        return 0;
+      }
+      if (selectedIndex >= 0) {
+        return selectedIndex % items.length;
+      }
+      return (items.length + selectedIndex % items.length) % items.length;
     }
   }, {
     key: "isSelected",
-    value: function(r) {
-      var n = this.state.items;
-      return n.length === 0 ? !0 : r === this.getIndex();
+    value: function isSelected(index) {
+      var items = this.state.items;
+      if (items.length === 0) {
+        return true;
+      }
+      return index === this.getIndex();
     }
   }, {
     key: "renderModal",
-    value: function(r, n) {
-      var e = this.asProps, t, o = this, s = I, d = I, l = this.asProps, u = l.styles, f = l.uid, y = l.duration, b = l.zoomWidth, P = this.state.isOpenZoom;
-      return t = g(u), /* @__PURE__ */ i.createElement(j, t.cn("Modal", {
-        visible: P,
-        onClose: this.handleToggleZoomModal,
-        ghost: !0,
-        closable: !r
-      }), /* @__PURE__ */ i.createElement(T, t.cn("Flex", {
-        direction: r ? "column" : "row"
-      }), !r && /* @__PURE__ */ i.createElement(v.Prev, {
-        inverted: !0
-      }), /* @__PURE__ */ i.createElement(d, t.cn("SModalBox", {}), /* @__PURE__ */ i.createElement(s, t.cn("SModalContainer", C({}, S({
+    value: function renderModal(isSmall, ComponentItems) {
+      var _ref = this.asProps, _ref10, _this5 = this;
+      var SModalContainer = Box;
+      var SModalBox = Box;
+      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, uid = _this$asProps3.uid, duration = _this$asProps3.duration, zoomWidth = _this$asProps3.zoomWidth;
+      var isOpenZoom = this.state.isOpenZoom;
+      return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(Modal, _ref10.cn("Modal", {
+        "visible": isOpenZoom,
+        "onClose": this.handleToggleZoomModal,
+        "ghost": true,
+        "closable": !isSmall
+      }), /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
+        "direction": isSmall ? "column" : "row"
+      }), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Prev, {
+        inverted: true
+      }), /* @__PURE__ */ React.createElement(SModalBox, _ref10.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref10.cn("SModalContainer", _objectSpread({}, assignProps({
         "aria-live": "polite",
-        "use:duration": "".concat(y, "ms"),
-        ref: this.refModalContainer,
+        "use:duration": "".concat(duration, "ms"),
+        "ref": this.refModalContainer,
         "use:w": void 0,
-        wMax: b
-      }, e))), n.map(function(k, x) {
-        return /* @__PURE__ */ i.createElement(v.Item, w({}, k.props, {
-          key: k.key,
-          uid: f,
-          index: x,
-          current: o.isSelected(x),
+        "wMax": zoomWidth
+      }, _ref))), ComponentItems.map(function(item, i) {
+        return /* @__PURE__ */ React.createElement(Carousel.Item, _extends({}, item.props, {
+          key: item.key,
+          uid,
+          index: i,
+          current: _this5.isSelected(i),
           toggleItem: void 0,
-          zoom: !0,
-          zoomOut: !0,
-          transform: o.isSelected(x) ? o.getTransform() : void 0
+          zoom: true,
+          zoomOut: true,
+          transform: _this5.isSelected(i) ? _this5.getTransform() : void 0
         }));
-      }))), r ? /* @__PURE__ */ i.createElement(T, t.cn("Flex", {
-        justifyContent: "center",
-        mt: 2
-      }), /* @__PURE__ */ i.createElement(v.Prev, {
-        inverted: !0
-      }), /* @__PURE__ */ i.createElement(v.Next, {
-        inverted: !0
-      })) : /* @__PURE__ */ i.createElement(v.Next, {
-        inverted: !0
-      })), !r && /* @__PURE__ */ i.createElement(v.Indicators, {
-        inverted: !0
+      }))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
+        "justifyContent": "center",
+        "mt": 2
+      }), /* @__PURE__ */ React.createElement(Carousel.Prev, {
+        inverted: true
+      }), /* @__PURE__ */ React.createElement(Carousel.Next, {
+        inverted: true
+      })) : /* @__PURE__ */ React.createElement(Carousel.Next, {
+        inverted: true
+      })), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Indicators, {
+        inverted: true
       }));
     }
   }, {
     key: "render",
-    value: function() {
-      var r = this.asProps, n, e = this, t = I, o = this.asProps, s = o.styles, d = o.Children, l = o.uid, u = o.zoom, f = o["aria-label"], y = o["aria-roledescription"], b = o.indicators, P = M(d, ["Carousel.Item"]), k = M(d, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
-      return n = g(s), /* @__PURE__ */ i.createElement(t, n.cn("SCarousel", C({}, S({
-        role: "region",
-        roledescription: "carousel",
-        onKeyDown: this.handlerKeyDown,
-        onTouchStart: this.handlerTouchStart,
-        onTouchEnd: this.handlerTouchEnd,
-        ref: this.refCarousel,
-        id: "igc-".concat(l, "-carousel"),
-        "aria-roledescription": y
-      }, r))), k.length === 0 ? /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(T, n.cn("Flex", {}), /* @__PURE__ */ i.createElement(v.Prev, null), /* @__PURE__ */ i.createElement(v.ContentBox, null, /* @__PURE__ */ i.createElement(v.Container, {
-        "aria-label": f
-      }, /* @__PURE__ */ i.createElement(d, n.cn("Children", {})))), /* @__PURE__ */ i.createElement(v.Next, null)), b === "default" && /* @__PURE__ */ i.createElement(v.Indicators, null), b === "preview" && /* @__PURE__ */ i.createElement(v.Indicators, null, function() {
-        return P.map(function(x, B) {
-          return /* @__PURE__ */ i.createElement(v.Indicator, w({}, x.props, {
-            key: x.key,
+    value: function render() {
+      var _ref2 = this.asProps, _ref11, _this6 = this;
+      var SCarousel = Box;
+      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, uid = _this$asProps4.uid, hasZoom = _this$asProps4.zoom, ariaLabel = _this$asProps4["aria-label"], ariaRoledescription = _this$asProps4["aria-roledescription"], indicators = _this$asProps4.indicators;
+      var ComponentItems = findAllComponents(Children, ["Carousel.Item"]);
+      var Controls = findAllComponents(Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
+      return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref11.cn("SCarousel", _objectSpread({}, assignProps({
+        "role": "region",
+        "roledescription": "carousel",
+        "onKeyDown": this.handlerKeyDown,
+        "onTouchStart": this.handlerTouchStart,
+        "onTouchEnd": this.handlerTouchEnd,
+        "ref": this.refCarousel,
+        "id": "igc-".concat(uid, "-carousel"),
+        "aria-roledescription": ariaRoledescription
+      }, _ref2))), Controls.length === 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, _ref11.cn("Flex", {}), /* @__PURE__ */ React.createElement(Carousel.Prev, null), /* @__PURE__ */ React.createElement(Carousel.ContentBox, null, /* @__PURE__ */ React.createElement(Carousel.Container, {
+        "aria-label": ariaLabel
+      }, /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})))), /* @__PURE__ */ React.createElement(Carousel.Next, null)), indicators === "default" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null), indicators === "preview" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null, function() {
+        return ComponentItems.map(function(item, index) {
+          return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({}, item.props, {
+            key: item.key,
             w: 100,
             h: 100,
             "aria-roledescription": "slide",
-            active: e.isSelected(B),
-            onClick: e.bindHandlerClickIndicator(B)
+            active: _this6.isSelected(index),
+            onClick: _this6.bindHandlerClickIndicator(index)
           }));
         });
-      })) : /* @__PURE__ */ i.createElement(d, n.cn("Children", {})), u && /* @__PURE__ */ i.createElement(D, n.cn("BreakPoints", {}), /* @__PURE__ */ i.createElement(D.Context.Consumer, null, function(x) {
-        return e.renderModal(te(x), P);
+      })) : /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})), hasZoom && /* @__PURE__ */ React.createElement(BreakPoints, _ref11.cn("BreakPoints", {}), /* @__PURE__ */ React.createElement(BreakPoints.Context.Consumer, null, function(mediaIndex) {
+        return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
       })));
     }
-  }]), _;
-}(A);
-h(E, "displayName", "Carousel");
-h(E, "defaultProps", {
+  }]);
+  return CarouselRoot2;
+}(Component);
+_defineProperty(CarouselRoot, "displayName", "Carousel");
+_defineProperty(CarouselRoot, "defaultProps", {
   defaultIndex: 0,
   duration: 350,
   step: 100,
-  bounded: !1,
-  i18n: H,
+  bounded: false,
+  i18n: localizedMessages,
   locale: "en",
   indicators: "default"
 });
-h(E, "style", G);
-h(E, "enhance", Q);
-var re = function(c) {
-  var _ = arguments[0], a, r = I, n = c.styles, e = c.duration;
-  return a = g(n), /* @__PURE__ */ i.createElement(r, a.cn("SContainer", C({}, S({
-    "use:duration": "".concat(e, "ms"),
+_defineProperty(CarouselRoot, "style", style);
+_defineProperty(CarouselRoot, "enhance", enhance);
+var Container = function Container2(props) {
+  var _ref3 = arguments[0], _ref12;
+  var SContainer = Box;
+  var styles = props.styles, duration = props.duration;
+  return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref12.cn("SContainer", _objectSpread({}, assignProps({
+    "use:duration": "".concat(duration, "ms"),
     "aria-live": "polite"
-  }, _))));
-}, ne = function(c) {
-  var _ = arguments[0], a, r = I, n = c.styles;
-  return a = g(n), /* @__PURE__ */ i.createElement(r, a.cn("SContentBox", C({}, S({}, _))));
-}, K = /* @__PURE__ */ function(p) {
-  Z(_, p);
-  var c = F(_);
-  function _() {
-    var a;
-    $(this, _);
-    for (var r = arguments.length, n = new Array(r), e = 0; e < r; e++)
-      n[e] = arguments[e];
-    return a = c.call.apply(c, [this].concat(n)), h(m(a), "refItem", /* @__PURE__ */ i.createRef()), h(m(a), "keepFocusTimeout", void 0), a;
+  }, _ref3))));
+};
+var ContentBox = function ContentBox2(props) {
+  var _ref4 = arguments[0], _ref13;
+  var SContentBox = Box;
+  var styles = props.styles;
+  return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref13.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
+};
+var Item = /* @__PURE__ */ function(_Component2) {
+  _inherits(Item2, _Component2);
+  var _super2 = _createSuper(Item2);
+  function Item2() {
+    var _this7;
+    _classCallCheck(this, Item2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this7 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this7), "refItem", /* @__PURE__ */ React.createRef());
+    return _this7;
   }
-  return O(_, [{
+  _createClass(Item2, [{
     key: "componentDidMount",
-    value: function() {
-      var r = this.props, n = r.toggleItem, e = r.transform, t = this.refItem.current;
-      n && t && n({
-        node: t
-      }), e && t && (t.style.transform = "translateX(".concat(e, "%)"));
+    value: function componentDidMount() {
+      var _this$props = this.props, toggleItem = _this$props.toggleItem, transform = _this$props.transform;
+      var refItem = this.refItem.current;
+      toggleItem && refItem && toggleItem({
+        node: refItem
+      });
+      if (transform && refItem) {
+        refItem.style.transform = "translateX(".concat(transform, "%)");
+      }
     }
   }, {
     key: "componentWillUnmount",
-    value: function() {
-      var r = this.props.toggleItem, n = this.refItem.current;
-      r && n && r({
-        node: n
-      }, !0), clearTimeout(this.keepFocusTimeout);
+    value: function componentWillUnmount() {
+      var toggleItem = this.props.toggleItem;
+      var refItem = this.refItem.current;
+      toggleItem && refItem && toggleItem({
+        node: refItem
+      }, true);
     }
   }, {
     key: "componentDidUpdate",
-    value: function(r) {
-      var n = this;
-      clearTimeout(this.keepFocusTimeout);
-      var e = this.props.transform, t = this.refItem.current;
-      r.transform !== e && t && (t.style.transform = "translateX(".concat(e, "%)")), this.props.current && (this.keepFocusTimeout = setTimeout(function() {
-        var o;
-        document.activeElement !== t && ((o = document.activeElement) === null || o === void 0 ? void 0 : o.dataset.carousel) === (t == null ? void 0 : t.dataset.carousel) && (t == null || t.focus());
-      }, 100)), r.isOpenZoom === !0 && this.props.isOpenZoom === !1 && this.props.current && !this.props.zoomOut && (this.keepFocusTimeout = setTimeout(function() {
-        var o;
-        (o = n.refItem.current) === null || o === void 0 || o.focus();
-      }, 200));
+    value: function componentDidUpdate(prevProps) {
+      var transform = this.props.transform;
+      var refItem = this.refItem.current;
+      if (prevProps.transform !== transform && refItem) {
+        refItem.style.transform = "translateX(".concat(transform, "%)");
+      }
     }
   }, {
     key: "render",
-    value: function() {
-      var r = this.asProps, n, e = this.props, t = e.styles, o = e.index, s = e.uid, d = e.current, l = e.zoomIn, u = e.onToggleZoomModal, f = I;
-      return n = g(t), /* @__PURE__ */ i.createElement(f, n.cn("SItem", C({}, S({
-        ref: this.refItem,
-        role: "tabpanel",
-        "data-carousel": "igc-".concat(s, "-carousel"),
-        id: "igc-".concat(s, "-carousel-item-").concat(o),
-        "aria-current": d,
-        "use:tabIndex": d ? 0 : -1,
-        onClick: l ? u : void 0,
-        zoomIn: l
-      }, r))));
+    value: function render() {
+      var _ref5 = this.asProps, _ref14;
+      var _this$props2 = this.props, styles = _this$props2.styles, index = _this$props2.index, uid = _this$props2.uid, current = _this$props2.current, zoomIn = _this$props2.zoomIn, onToggleZoomModal = _this$props2.onToggleZoomModal;
+      var SItem = Box;
+      return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref14.cn("SItem", _objectSpread({}, assignProps({
+        "ref": this.refItem,
+        "role": "tabpanel",
+        "data-carousel": "igc-".concat(uid, "-carousel"),
+        "id": "igc-".concat(uid, "-carousel-item-").concat(index),
+        "aria-current": current,
+        "use:tabIndex": current ? 0 : -1,
+        "onClick": zoomIn ? onToggleZoomModal : void 0,
+        "zoomIn": zoomIn
+      }, _ref5))));
     }
-  }]), _;
-}(A);
-h(K, "enhance", [Y(!1)]);
-var oe = function(c) {
-  var _ = arguments[0], a, r = c.styles, n = c.children, e = c.Children, t = c.label, o = c.top, s = o === void 0 ? 0 : o, d = c.inverted, l = I, u = R;
-  return a = g(r), /* @__PURE__ */ i.createElement(l, a.cn("SPrev", C({}, S({
-    top: s
-  }, _))), n ? /* @__PURE__ */ i.createElement(e, a.cn("Children", {})) : /* @__PURE__ */ i.createElement(u, a.cn("SPrevButton", {
-    addonLeft: V,
-    "aria-label": t,
-    theme: d ? "invert" : "muted",
-    use: "tertiary",
-    size: "l",
-    innerOutline: !0
+  }]);
+  return Item2;
+}(Component);
+var Prev = function Prev2(props) {
+  var _ref6 = arguments[0], _ref15;
+  var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top = props.top, top = _props$top === void 0 ? 0 : _props$top, inverted = props.inverted;
+  var SPrev = Box;
+  var SPrevButton = Button;
+  return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SPrev, _ref15.cn("SPrev", _objectSpread({}, assignProps({
+    "top": top
+  }, _ref6))), children ? /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref15.cn("SPrevButton", {
+    "addonLeft": ChevronLeft,
+    "aria-label": label,
+    "theme": inverted ? "invert" : "muted",
+    "use": "tertiary",
+    "size": "l",
+    "innerOutline": true
   })));
-}, ae = function(c) {
-  var _ = arguments[0], a, r = c.styles, n = c.children, e = c.Children, t = c.label, o = c.top, s = o === void 0 ? 0 : o, d = c.inverted, l = I, u = R;
-  return a = g(r), /* @__PURE__ */ i.createElement(l, a.cn("SNext", C({}, S({
-    top: s
-  }, _))), n ? /* @__PURE__ */ i.createElement(e, a.cn("Children", {})) : /* @__PURE__ */ i.createElement(u, a.cn("SNextButton", {
-    addonLeft: U,
-    "aria-label": t,
-    theme: d ? "invert" : "muted",
-    use: "tertiary",
-    size: "l",
-    innerOutline: !0
+};
+var Next = function Next2(props) {
+  var _ref7 = arguments[0], _ref16;
+  var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top2 = props.top, top = _props$top2 === void 0 ? 0 : _props$top2, inverted = props.inverted;
+  var SNext = Box;
+  var SNextButton = Button;
+  return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SNext, _ref16.cn("SNext", _objectSpread({}, assignProps({
+    "top": top
+  }, _ref7))), children ? /* @__PURE__ */ React.createElement(Children, _ref16.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref16.cn("SNextButton", {
+    "addonLeft": ChevronRight,
+    "aria-label": label,
+    "theme": inverted ? "invert" : "muted",
+    "use": "tertiary",
+    "size": "l",
+    "innerOutline": true
   })));
-}, ie = function(c) {
-  var _ = arguments[0], a, r = c.items, n = c.styles, e = c.Children, t = c.inverted, o = I;
-  if (e.origin) {
-    var s;
-    return s = g(n), /* @__PURE__ */ i.createElement(o, s.cn("SIndicators", C({}, S({}, _))), /* @__PURE__ */ i.createElement(e, s.cn("Children", {})));
+};
+var Indicators = function Indicators2(_ref21) {
+  var _ref8 = arguments[0], _ref18;
+  var items = _ref21.items, styles = _ref21.styles, Children = _ref21.Children, inverted = _ref21.inverted;
+  var SIndicators = Box;
+  if (Children.origin) {
+    var _ref17;
+    return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref17.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
   }
-  return a = g(n), /* @__PURE__ */ i.createElement(o, a.cn("SIndicators", C({}, S({}, _))), r == null ? void 0 : r.map(function(d, l) {
-    return /* @__PURE__ */ i.createElement(v.Indicator, w({
-      key: l
-    }, d, {
-      inverted: t
+  return _ref18 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref18.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
+    return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({
+      key: index
+    }, item, {
+      inverted
     }));
   }));
-}, se = function(c) {
-  var _ = arguments[0], a, r = c.styles, n = c.Children, e = I;
-  return a = g(r), /* @__PURE__ */ i.createElement(e, a.cn("SIndicator", C({}, S({}, _))), /* @__PURE__ */ i.createElement(n, a.cn("Children", {})));
-}, v = L(E, {
-  Container: re,
-  ContentBox: ne,
-  Indicators: ie,
-  Indicator: se,
-  Item: K,
-  Prev: oe,
-  Next: ae
+};
+var Indicator = function Indicator2(_ref22) {
+  var _ref9 = arguments[0], _ref19;
+  var styles = _ref22.styles, Children = _ref22.Children;
+  var SIndicator = Box;
+  return _ref19 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref19.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref19.cn("Children", {})));
+};
+var Carousel = createComponent(CarouselRoot, {
+  Container,
+  ContentBox,
+  Indicators,
+  Indicator,
+  Item,
+  Prev,
+  Next
 });
 export {
-  v as default
+  Carousel as default
 };