@semcore/carousel 3.49.2-prerelease.0 → 3.50.0-prerelease.0

package/lib/es6/translations/zh.json

@@ -2,5 +2,7 @@
   "next": "下一张幻灯片",
   "prev": "上一张幻灯片",
   "slides": "幻灯片",
-  "slide": "幻灯片 {slideNumber}"
+  "slide": "幻灯片 {slideNumber}",
+  "Carousel:aria-roledescription": "广告轮播",
+  "Carousel.Indicator:aria-roledescription": "幻灯片"
 }

package/lib/esm/Carousel.mjs

@@ -3,55 +3,51 @@ 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
-import React from "react";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { createBreakpoints, Box, Flex } from "@semcore/base-components";
 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 i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { findAllComponents } from "@semcore/core/lib/utils/findComponent";
+import logger from "@semcore/core/lib/utils/logger";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import ChevronLeft from "@semcore/icon/ChevronLeft/l";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
-import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+import ChevronRight from "@semcore/icon/ChevronRight/l";
+import Modal from "@semcore/modal";
+import React from "react";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
-import logger from "@semcore/utils/lib/logger";
-import { findAllComponents } from "@semcore/utils/lib/findComponent";
-import { createBreakpoints } from "@semcore/breakpoints";
-import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
 /*!__reshadow-styles__:"./style/carousel.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SCarousel_33mp3_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_33mp3_gg_{display:flex;transition:transform var(--duration_33mp3) ease-in-out}.___SContentBox_33mp3_gg_,.___SModalBox_33mp3_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_33mp3_gg_:has(.___SItem_33mp3_gg_.__keyboardFocused_33mp3_gg_):after,.___SModalBox_33mp3_gg_:has(.___SItem_33mp3_gg_.__keyboardFocused_33mp3_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_33mp3_gg_{display:flex;transition:transform var(--duration_33mp3) ease-in-out}.___SItem_33mp3_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_33mp3);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_33mp3_gg_.__zoomIn_33mp3_gg_{cursor:zoom-in}.___SItem_33mp3_gg_.__zoomOut_33mp3_gg_{cursor:zoom-out}.___SIndicators_33mp3_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_33mp3_gg_.__keyboardFocused_33mp3_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);top:0;left:3px}.___SIndicator_33mp3_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_33mp3_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_33mp3_gg_.__active_33mp3_gg_{opacity:1}.___SIndicator_33mp3_gg_.__inverted_33mp3_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_33mp3_gg_,.___SPrev_33mp3_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_33mp3_gg_ .___SNextButton_33mp3_gg_ span:has(>svg:only-child),.___SNext_33mp3_gg_ .___SPrevButton_33mp3_gg_ span:has(>svg:only-child),.___SPrev_33mp3_gg_ .___SNextButton_33mp3_gg_ span:has(>svg:only-child),.___SPrev_33mp3_gg_ .___SPrevButton_33mp3_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)}.___SNextButton_33mp3_gg_:focus-visible,.___SPrevButton_33mp3_gg_:focus-visible{box-shadow:none}.___SNextButton_33mp3_gg_:focus-visible:after,.___SPrevButton_33mp3_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;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPrev_33mp3_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_33mp3_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_33mp3_gg_.__disabled_33mp3_gg_,.___SPrev_33mp3_gg_.__disabled_33mp3_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_33mp3_gg_{transition:none}}',
+    '.___SCarousel_mxe6r_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_mxe6r_gg_{display:flex;transition:transform var(--duration_mxe6r) ease-in-out}.___SContentBox_mxe6r_gg_,.___SIndicator_mxe6r_gg_,.___SModalBox_mxe6r_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px))}.___SContentBox_mxe6r_gg_:has(.___SItem_mxe6r_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SImageBoxContainer_mxe6r_gg_{position:relative;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px))}.___SImageBoxContainer_mxe6r_gg_:has(.___SItem_mxe6r_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}@supports (color:oklab(0%0 0%)){.___SImageBoxContainer_mxe6r_gg_:has(.___SItem_mxe6r_gg_:focus-visible)::after{outline-color:var(--intergalactic-keyboard-focus-invert-outline, oklch(1 0 0 / 0.7))}}.___SImageBoxContainer_mxe6r_gg_ .___SItem_mxe6r_gg_:focus-visible{outline:0}.___SModalContainer_mxe6r_gg_{display:flex;transition:transform var(--duration_mxe6r) ease-in-out}.___SItem_mxe6r_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_mxe6r);border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px));overflow:hidden;outline:0}.___SItem_mxe6r_gg_>img{display:block}.___SItem_mxe6r_gg_.__zoomIn_mxe6r_gg_{cursor:zoom-in}.___SItem_mxe6r_gg_.__zoomOut_mxe6r_gg_{cursor:zoom-out}.___SIndicators_mxe6r_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;outline:0;position:relative}.___SIndicator_mxe6r_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;background-color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385));opacity:var(--intergalactic-disabled-opacity, 0.4);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@supports (color:color(display-p3 0 0 0%)){.___SIndicator_mxe6r_gg_{background-color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SIndicator_mxe6r_gg_{background-color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SIndicator_mxe6r_gg_[aria-roledescription=slide]{width:100px;height:100px}@media (hover:hover){.___SIndicator_mxe6r_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.4))}}.___SIndicator_mxe6r_gg_.__active_mxe6r_gg_{opacity:1}.___SIndicator_mxe6r_gg_.__inverted_mxe6r_gg_{background-color:var(--intergalactic-icon-primary-invert, rgba(253, 255, 254, 0.808))}@supports (color:color(display-p3 0 0 0%)){.___SIndicator_mxe6r_gg_.__inverted_mxe6r_gg_{background-color:var(--intergalactic-icon-primary-invert, rgba(253, 255, 254, 0.808))}@media (color-gamut:p3){.___SIndicator_mxe6r_gg_.__inverted_mxe6r_gg_{background-color:var(--intergalactic-icon-primary-invert, color(display-p3 0.99189 0.99995 0.99683 / 0.808))}}}.___SNext_mxe6r_gg_,.___SPrev_mxe6r_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, rgba(0, 4, 1, 0.526))}.___SNext_mxe6r_gg_ .___SNextButton_mxe6r_gg_ span:has(>svg:only-child),.___SNext_mxe6r_gg_ .___SPrevButton_mxe6r_gg_ span:has(>svg:only-child),.___SPrev_mxe6r_gg_ .___SNextButton_mxe6r_gg_ span:has(>svg:only-child),.___SPrev_mxe6r_gg_ .___SPrevButton_mxe6r_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_mxe6r_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_mxe6r_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_mxe6r_gg_.__disabled_mxe6r_gg_,.___SPrev_mxe6r_gg_.__disabled_mxe6r_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_mxe6r_gg_{transition:none}}',
     /*__inner_css_end__*/
-    "33mp3_gg_"
+    "mxe6r_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SCarousel": "___SCarousel_33mp3_gg_",
-    "__SContainer": "___SContainer_33mp3_gg_",
-    "--duration": "--duration_33mp3",
-    "__SModalContainer": "___SModalContainer_33mp3_gg_",
-    "__SItem": "___SItem_33mp3_gg_",
-    "--transform": "--transform_33mp3",
-    "_zoomIn": "__zoomIn_33mp3_gg_",
-    "_zoomOut": "__zoomOut_33mp3_gg_",
-    "__SIndicators": "___SIndicators_33mp3_gg_",
-    "_keyboardFocused": "__keyboardFocused_33mp3_gg_",
-    "__SIndicator": "___SIndicator_33mp3_gg_",
-    "_active": "__active_33mp3_gg_",
-    "_inverted": "__inverted_33mp3_gg_",
-    "__SPrev": "___SPrev_33mp3_gg_",
-    "__SNext": "___SNext_33mp3_gg_",
-    "_disabled": "__disabled_33mp3_gg_",
-    "__SContentBox": "___SContentBox_33mp3_gg_",
-    "__SModalBox": "___SModalBox_33mp3_gg_",
-    "__SPrevButton": "___SPrevButton_33mp3_gg_",
-    "__SNextButton": "___SNextButton_33mp3_gg_"
+    "__SCarousel": "___SCarousel_mxe6r_gg_",
+    "__SContainer": "___SContainer_mxe6r_gg_",
+    "--duration": "--duration_mxe6r",
+    "__SContentBox": "___SContentBox_mxe6r_gg_",
+    "__SModalBox": "___SModalBox_mxe6r_gg_",
+    "__SIndicator": "___SIndicator_mxe6r_gg_",
+    "__SItem": "___SItem_mxe6r_gg_",
+    "__SModalContainer": "___SModalContainer_mxe6r_gg_",
+    "_zoomIn": "__zoomIn_mxe6r_gg_",
+    "_zoomOut": "__zoomOut_mxe6r_gg_",
+    "__SIndicators": "___SIndicators_mxe6r_gg_",
+    "_active": "__active_mxe6r_gg_",
+    "_inverted": "__inverted_mxe6r_gg_",
+    "__SPrev": "___SPrev_mxe6r_gg_",
+    "__SNext": "___SNext_mxe6r_gg_",
+    "_disabled": "__disabled_mxe6r_gg_",
+    "__SImageBoxContainer": "___SImageBoxContainer_mxe6r_gg_",
+    "--transform": "--transform_mxe6r",
+    "__SPrevButton": "___SPrevButton_mxe6r_gg_",
+    "__SNextButton": "___SNextButton_mxe6r_gg_"
   })
 );
 var MAP_TRANSFORM = {
@@ -64,20 +60,18 @@ var BreakPoints = createBreakpoints(media);
 var isSmallScreen = function isSmallScreen2(index) {
   return index === 1;
 };
-var CarouselRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(CarouselRoot2, _Component);
-  var _super = _createSuper(CarouselRoot2);
+var CarouselRoot = /* @__PURE__ */ (function(_Component) {
   function CarouselRoot2(props) {
-    var _ref20, _props$index;
+    var _ref18, _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) {
+    _this = _callSuper(this, CarouselRoot2, [props]);
+    _defineProperty(_this, "defaultItemsCount", 0);
+    _defineProperty(_this, "refCarousel", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "refContainer", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "refModalContainer", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "_touchStartCoord", -1);
+    _defineProperty(_this, "handlerKeyDown", function(e) {
       var firstSlide = 1;
       var lastSlide = _this.state.items.length + 1;
       switch (e.key) {
@@ -111,7 +105,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
         _this.handleToggleZoomModal();
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "toggleItem", function(item) {
+    _defineProperty(_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) {
@@ -125,7 +119,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
         _this.defaultItemsCount++;
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "transformContainer", function() {
+    _defineProperty(_this, "transformContainer", function() {
       var transform = _this.state.selectedIndex * -1 * 100;
       if (_this.refContainer.current) {
         _this.refContainer.current.style.transform = "translateX(".concat(transform, "%)");
@@ -134,7 +128,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
         _this.refModalContainer.current.style.transform = "translateX(".concat(transform, "%)");
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "getDirection", function(currentIndex, nextIndex) {
+    _defineProperty(_this, "getDirection", function(currentIndex, nextIndex) {
       var bounded = _this.asProps.bounded;
       if (bounded) {
         return currentIndex < nextIndex ? "right" : "left";
@@ -161,7 +155,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
       var left = tmpArr.indexOf(nextIndex);
       return left - tmpCurrentIndex < 0 ? "left" : "right";
     });
-    _defineProperty(_assertThisInitialized(_this), "slideToValue", function(nextIndex) {
+    _defineProperty(_this, "slideToValue", function(nextIndex) {
       var selectedIndex = _this.state.selectedIndex;
       var direction = selectedIndex < nextIndex ? "right" : "left";
       var diff = Math.abs(selectedIndex - nextIndex);
@@ -170,7 +164,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
         diff--;
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "transformItem", function(direction) {
+    _defineProperty(_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;
@@ -213,12 +207,12 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
         return;
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(direction) {
+    _defineProperty(_this, "bindHandlerClick", function(direction) {
       return function() {
         _this.transformItem(direction);
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerClickIndicator", function(value) {
+    _defineProperty(_this, "bindHandlerClickIndicator", function(value) {
       return function() {
         var _this$state2 = _this.state, selectedIndex = _this$state2.selectedIndex, items = _this$state2.items;
         if (!_this.isControlled && value !== selectedIndex) {
@@ -228,10 +222,10 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
         _this.handlers.index(value);
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "handlerTouchStart", function(e) {
+    _defineProperty(_this, "handlerTouchStart", function(e) {
       _this._touchStartCoord = e.changedTouches[0].clientX;
     });
-    _defineProperty(_assertThisInitialized(_this), "handlerTouchEnd", function(e) {
+    _defineProperty(_this, "handlerTouchEnd", function(e) {
       var touchEndCoord = e.changedTouches[0].clientX;
       var delta = touchEndCoord - _this._touchStartCoord;
       if (delta > 50) {
@@ -240,16 +234,18 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
         _this.transformItem("right");
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleToggleZoomModal", function() {
+    _defineProperty(_this, "handleToggleZoomModal", function() {
       _this.setState(function(prevState) {
         return {
           isOpenZoom: !prevState.isOpenZoom
         };
       }, function() {
-        _this.state.isOpenZoom && _this.transformContainer();
+        if (_this.state.isOpenZoom) {
+          _this.transformContainer();
+        }
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerKeydownControl", function(direction) {
+    _defineProperty(_this, "bindHandlerKeydownControl", function(direction) {
       return function(e) {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
@@ -261,21 +257,22 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
     _this.state = {
       items: [],
       isOpenZoom: false,
-      selectedIndex: (_ref20 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref20 !== void 0 ? _ref20 : 0
+      selectedIndex: (_ref18 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref18 !== void 0 ? _ref18 : 0
     };
     return _this;
   }
-  _createClass(CarouselRoot2, [{
+  _inherits(CarouselRoot2, _Component);
+  return _createClass(CarouselRoot2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       var _this2 = this;
       return {
         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();
+          (_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === 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();
+            (_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0 || _this2$refCarousel$cu2.focus();
           }, 0);
         }]
       };
@@ -321,7 +318,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
     }
   }, {
     key: "getItemProps",
-    value: function getItemProps(props, index) {
+    value: function getItemProps(_props, index) {
       var zoom = this.asProps.zoom;
       var isCurrent = this.isSelected(index);
       return {
@@ -345,10 +342,10 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
         disabled = selectedIndex === 0;
       }
       return {
-        onClick: this.bindHandlerClick("left"),
-        onKeyDown: this.bindHandlerKeydownControl("left"),
+        "onClick": this.bindHandlerClick("left"),
+        "onKeyDown": this.bindHandlerKeydownControl("left"),
         disabled,
-        label: getI18nText("prev"),
+        "label": getI18nText("prev"),
         "aria-controls": "igc-".concat(uid, "-carousel")
       };
     }
@@ -362,10 +359,10 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
         disabled = selectedIndex === items.length - 1;
       }
       return {
-        onClick: this.bindHandlerClick("right"),
-        onKeyDown: this.bindHandlerKeydownControl("right"),
+        "onClick": this.bindHandlerClick("right"),
+        "onKeyDown": this.bindHandlerKeydownControl("right"),
         disabled,
-        label: getI18nText("next"),
+        "label": getI18nText("next"),
         "aria-controls": "igc-".concat(uid, "-carousel")
       };
     }
@@ -376,14 +373,15 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
       var items = this.state.items;
       var getI18nText = this.asProps.getI18nText;
       return {
-        items: items.map(function(item, key) {
+        "items": items.map(function(_item, key) {
           return {
             active: _this4.isSelected(key),
             onClick: _this4.bindHandlerClickIndicator(key),
             key
           };
         }),
-        role: "tablist",
+        "role": "tablist",
+        "tabIndex": 0,
         "aria-label": getI18nText("slides")
       };
     }
@@ -393,7 +391,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
       var isCurrent = this.isSelected(index);
       var getI18nText = this.asProps.getI18nText;
       return {
-        role: "tab",
+        "role": "tab",
         "aria-selected": isCurrent,
         "aria-controls": "igc-".concat(this.asProps.uid, "-carousel-item-").concat(index),
         "aria-label": getI18nText("slide", {
@@ -434,21 +432,22 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "renderModal",
     value: function renderModal(isSmall, ComponentItems) {
-      var _ref = this.asProps, _ref10, _this5 = this;
+      var _ref = this.asProps, _ref0, _this5 = this;
       var SModalContainer = Box;
       var SModalBox = Box;
+      var SImageBoxContainer = 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$1(styles), /* @__PURE__ */ React.createElement(Modal, _ref10.cn("Modal", {
+      return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(Modal, _ref0.cn("Modal", {
         "visible": isOpenZoom,
         "onClose": this.handleToggleZoomModal,
         "ghost": true,
         "closable": !isSmall
-      }), /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
+      }), /* @__PURE__ */ React.createElement(Flex, _ref0.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({
+      }), /* @__PURE__ */ React.createElement(SImageBoxContainer, _ref0.cn("SImageBoxContainer", {}), /* @__PURE__ */ React.createElement(SModalBox, _ref0.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref0.cn("SModalContainer", _objectSpread({}, assignProps({
         "aria-live": "polite",
         "use:duration": "".concat(duration, "ms"),
         "ref": this.refModalContainer,
@@ -465,7 +464,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
           zoomOut: true,
           transform: _this5.isSelected(i) ? _this5.getTransform() : void 0
         }));
-      }))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
+      })))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref0.cn("Flex", {
         "justifyContent": "center",
         "mt": 2
       }), /* @__PURE__ */ React.createElement(Carousel.Prev, {
@@ -481,40 +480,37 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref2 = this.asProps, _ref11, _this6 = this;
+      var _ref2 = this.asProps, _ref1, _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 _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"], indicators = _this$asProps4.indicators, getI18nText = _this$asProps4.getI18nText;
       var ComponentItems = findAllComponents(Children, ["Carousel.Item"]);
       var Controls = findAllComponents(Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
-      return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref11.cn("SCarousel", _objectSpread({}, assignProps({
+      return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref1.cn("SCarousel", _objectSpread({}, assignProps({
         "role": "region",
-        "roledescription": "carousel",
+        "aria-roledescription": getI18nText("Carousel:aria-roledescription"),
         "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, {
+        "id": "igc-".concat(uid, "-carousel")
+      }, _ref2))), Controls.length === 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, _ref1.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() {
+      }, /* @__PURE__ */ React.createElement(Children, _ref1.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",
+            w: void 0,
+            "aria-roledescription": getI18nText("Carousel.Indicator:aria-roledescription"),
             active: _this6.isSelected(index),
             onClick: _this6.bindHandlerClickIndicator(index)
           }));
         });
-      })) : /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})), hasZoom && /* @__PURE__ */ React.createElement(BreakPoints, _ref11.cn("BreakPoints", {}), /* @__PURE__ */ React.createElement(BreakPoints.Context.Consumer, null, function(mediaIndex) {
+      })) : /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {})), hasZoom && /* @__PURE__ */ React.createElement(BreakPoints, _ref1.cn("BreakPoints", {}), /* @__PURE__ */ React.createElement(BreakPoints.Context.Consumer, null, function(mediaIndex) {
         return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
       })));
     }
   }]);
-  return CarouselRoot2;
-}(Component);
+})(Component);
 _defineProperty(CarouselRoot, "displayName", "Carousel");
 _defineProperty(CarouselRoot, "defaultProps", {
   defaultIndex: 0,
@@ -527,43 +523,43 @@ _defineProperty(CarouselRoot, "defaultProps", {
 });
 _defineProperty(CarouselRoot, "style", style);
 _defineProperty(CarouselRoot, "enhance", enhance);
-var Container = function Container2(props) {
-  var _ref3 = arguments[0], _ref12;
+function Container(props) {
+  var _ref3 = arguments[0], _ref10;
   var SContainer = Box;
   var styles = props.styles, duration = props.duration;
-  return _ref12 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainer, _ref12.cn("SContainer", _objectSpread({}, assignProps({
+  return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref10.cn("SContainer", _objectSpread({}, assignProps({
     "use:duration": "".concat(duration, "ms"),
     "aria-live": "polite"
   }, _ref3))));
-};
-var ContentBox = function ContentBox2(props) {
-  var _ref4 = arguments[0], _ref13;
+}
+function ContentBox(props) {
+  var _ref4 = arguments[0], _ref11;
   var SContentBox = Box;
   var styles = props.styles;
-  return _ref13 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref13.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
-};
-var Item = /* @__PURE__ */ function(_Component2) {
-  _inherits(Item2, _Component2);
-  var _super2 = _createSuper(Item2);
+  return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref11.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
+}
+var Item = /* @__PURE__ */ (function(_Component2) {
   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());
-    _defineProperty(_assertThisInitialized(_this7), "keepFocusTimeout", void 0);
+    _this7 = _callSuper(this, Item2, [].concat(args));
+    _defineProperty(_this7, "refItem", /* @__PURE__ */ React.createRef());
     return _this7;
   }
-  _createClass(Item2, [{
+  _inherits(Item2, _Component2);
+  return _createClass(Item2, [{
     key: "componentDidMount",
     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 (toggleItem && refItem) {
+        toggleItem({
+          node: refItem
+        });
+      }
       if (transform && refItem) {
         refItem.style.transform = "translateX(".concat(transform, "%)");
       }
@@ -573,43 +569,28 @@ var Item = /* @__PURE__ */ function(_Component2) {
     value: function componentWillUnmount() {
       var toggleItem = this.props.toggleItem;
       var refItem = this.refItem.current;
-      toggleItem && refItem && toggleItem({
-        node: refItem
-      }, true);
-      clearTimeout(this.keepFocusTimeout);
+      if (toggleItem && refItem) {
+        toggleItem({
+          node: refItem
+        }, true);
+      }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this8 = this;
-      clearTimeout(this.keepFocusTimeout);
       var transform = this.props.transform;
       var refItem = this.refItem.current;
       if (prevProps.transform !== transform && refItem) {
         refItem.style.transform = "translateX(".concat(transform, "%)");
       }
-      if (this.props.current) {
-        this.keepFocusTimeout = setTimeout(function() {
-          var _document$activeEleme;
-          if (document.activeElement !== refItem && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.dataset.carousel) === (refItem === null || refItem === void 0 ? void 0 : refItem.dataset.carousel)) {
-            refItem === null || refItem === void 0 ? void 0 : refItem.focus();
-          }
-        }, 100);
-      }
-      if (prevProps.isOpenZoom === true && this.props.isOpenZoom === false && this.props.current && !this.props.zoomOut) {
-        this.keepFocusTimeout = setTimeout(function() {
-          var _this8$refItem$curren;
-          (_this8$refItem$curren = _this8.refItem.current) === null || _this8$refItem$curren === void 0 ? void 0 : _this8$refItem$curren.focus();
-        }, 200);
-      }
     }
   }, {
     key: "render",
     value: function render() {
-      var _ref5 = this.asProps, _ref14;
+      var _ref5 = this.asProps, _ref12;
       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$1(styles), /* @__PURE__ */ React.createElement(SItem, _ref14.cn("SItem", _objectSpread({}, assignProps({
+      return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref12.cn("SItem", _objectSpread({}, assignProps({
         "ref": this.refItem,
         "role": "tabpanel",
         "data-carousel": "igc-".concat(uid, "-carousel"),
@@ -621,62 +602,69 @@ var Item = /* @__PURE__ */ function(_Component2) {
       }, _ref5))));
     }
   }]);
-  return Item2;
-}(Component);
-_defineProperty(Item, "enhance", [keyboardFocusEnhance(false)]);
-var Prev = function Prev2(props) {
-  var _ref6 = arguments[0], _ref15;
+})(Component);
+function Prev(props) {
+  var _ref6 = arguments[0], _ref13;
   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$1(styles), /* @__PURE__ */ React.createElement(SPrev, _ref15.cn("SPrev", _objectSpread({}, assignProps({
+  return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SPrev, _ref13.cn("SPrev", _objectSpread({}, assignProps({
     "top": top
-  }, _ref6))), children ? /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref15.cn("SPrevButton", {
+  }, _ref6))), children ? /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref13.cn("SPrevButton", {
     "addonLeft": ChevronLeft,
     "aria-label": label,
     "theme": inverted ? "invert" : "muted",
     "use": "tertiary",
-    "size": "l"
+    "size": "l",
+    "innerOutline": true
   })));
-};
-var Next = function Next2(props) {
-  var _ref7 = arguments[0], _ref16;
+}
+;
+function Next(props) {
+  var _ref7 = arguments[0], _ref14;
   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$1(styles), /* @__PURE__ */ React.createElement(SNext, _ref16.cn("SNext", _objectSpread({}, assignProps({
+  return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SNext, _ref14.cn("SNext", _objectSpread({}, assignProps({
     "top": top
-  }, _ref7))), children ? /* @__PURE__ */ React.createElement(Children, _ref16.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref16.cn("SNextButton", {
+  }, _ref7))), children ? /* @__PURE__ */ React.createElement(Children, _ref14.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref14.cn("SNextButton", {
     "addonLeft": ChevronRight,
     "aria-label": label,
     "theme": inverted ? "invert" : "muted",
     "use": "tertiary",
-    "size": "l"
+    "size": "l",
+    "innerOutline": true
   })));
-};
-var Indicators = function Indicators2(_ref21) {
-  var _ref8 = arguments[0], _ref18;
-  var items = _ref21.items, styles = _ref21.styles, Children = _ref21.Children, inverted = _ref21.inverted;
+}
+;
+function Indicators(_ref19) {
+  var _ref8 = arguments[0], _ref16;
+  var items = _ref19.items, styles = _ref19.styles, Children = _ref19.Children, inverted = _ref19.inverted;
   var SIndicators = Box;
   if (Children.origin) {
-    var _ref17;
-    return _ref17 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref17.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
+    var _ref15;
+    return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref15.cn("SIndicators", _objectSpread({}, assignProps({
+      "innerOffset": true
+    }, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})));
   }
-  return _ref18 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref18.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
+  return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref16.cn("SIndicators", _objectSpread({}, assignProps({
+    "invertOutline": inverted
+  }, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
     return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({
       key: index
     }, item, {
       inverted
     }));
   }));
-};
-Indicators.enhance = [keyboardFocusEnhance()];
-var Indicator = function Indicator2(_ref22) {
-  var _ref9 = arguments[0], _ref19;
-  var styles = _ref22.styles, Children = _ref22.Children;
+}
+;
+function Indicator(_ref20) {
+  var _ref9 = arguments[0], _ref17;
+  var styles = _ref20.styles, Children = _ref20.Children, inverted = _ref20.inverted;
   var SIndicator = Box;
-  return _ref19 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref19.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref19.cn("Children", {})));
-};
+  return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref17.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
+}
+;
 var Carousel = createComponent(CarouselRoot, {
   Container,
   ContentBox,

package/lib/esm/Carousel.types.mjs

@@ -0,0 +1 @@
+