@semcore/carousel 3.50.0-prerelease.4 → 3.50.0-prerelease.5

package/lib/cjs/Carousel.js

@@ -1,7 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,49 +10,45 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _index2 = require("@semcore/utils/lib/core/index");
-var _core = _interopRequireWildcard(require("@semcore/core"));
-var _react = _interopRequireDefault(require("react"));
+var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _button = _interopRequireDefault(require("@semcore/button"));
+var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
+var _findComponent = require("@semcore/core/lib/utils/findComponent");
+var _logger = _interopRequireDefault(require("@semcore/core/lib/utils/logger"));
+var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
+var _l = _interopRequireDefault(require("@semcore/icon/ChevronLeft/l"));
+var _l2 = _interopRequireDefault(require("@semcore/icon/ChevronRight/l"));
 var _modal = _interopRequireDefault(require("@semcore/modal"));
-var _flexBox = require("@semcore/flex-box");
-var _l = _interopRequireDefault(require("@semcore/icon/ChevronRight/l"));
-var _l2 = _interopRequireDefault(require("@semcore/icon/ChevronLeft/l"));
-var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
-var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
+var _react = _interopRequireDefault(require("react"));
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
-var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
-var _findComponent = require("@semcore/utils/lib/findComponent");
-var _breakpoints = require("@semcore/breakpoints");
-var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
 /*!__reshadow-styles__:"./style/carousel.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index2.sstyled.insert( /*__inner_css_start__*/".___SCarousel_1a2c8_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_1a2c8_gg_{display:flex;transition:transform var(--duration_1a2c8) ease-in-out}.___SContentBox_1a2c8_gg_,.___SModalBox_1a2c8_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px))}.___SContentBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after,.___SModalBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px}@supports (color:color(display-p3 0 0 0)){.___SContentBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after,.___SModalBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SContentBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after,.___SModalBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SModalContainer_1a2c8_gg_{display:flex;transition:transform var(--duration_1a2c8) ease-in-out}.___SItem_1a2c8_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1a2c8);border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px));overflow:hidden;outline:0}.___SItem_1a2c8_gg_.__zoomIn_1a2c8_gg_{cursor:zoom-in}.___SItem_1a2c8_gg_.__zoomOut_1a2c8_gg_{cursor:zoom-out}.___SIndicators_1a2c8_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_1a2c8_gg_.__keyboardFocused_1a2c8_gg_:after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px);top:0;left:3px}@supports (color:color(display-p3 0 0 0)){.___SIndicators_1a2c8_gg_.__keyboardFocused_1a2c8_gg_:after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SIndicators_1a2c8_gg_.__keyboardFocused_1a2c8_gg_:after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SIndicator_1a2c8_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, 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_1a2c8_gg_{background-color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SIndicator_1a2c8_gg_{background-color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}@media (hover:hover){.___SIndicator_1a2c8_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.4))}}.___SIndicator_1a2c8_gg_.__active_1a2c8_gg_{opacity:1}.___SIndicator_1a2c8_gg_.__inverted_1a2c8_gg_{background-color:var(--intergalactic-icon-primary-invert, rgba(253, 255, 254, 0.808))}@supports (color:color(display-p3 0 0 0)){.___SIndicator_1a2c8_gg_.__inverted_1a2c8_gg_{background-color:var(--intergalactic-icon-primary-invert, rgba(253, 255, 254, 0.808))}@media (color-gamut:p3){.___SIndicator_1a2c8_gg_.__inverted_1a2c8_gg_{background-color:var(--intergalactic-icon-primary-invert, color(display-p3 0.99189 0.99995 0.99683 / 0.808))}}}.___SNext_1a2c8_gg_,.___SPrev_1a2c8_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_1a2c8_gg_ .___SNextButton_1a2c8_gg_ span:has(>svg:only-child),.___SNext_1a2c8_gg_ .___SPrevButton_1a2c8_gg_ span:has(>svg:only-child),.___SPrev_1a2c8_gg_ .___SNextButton_1a2c8_gg_ span:has(>svg:only-child),.___SPrev_1a2c8_gg_ .___SPrevButton_1a2c8_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_1a2c8_gg_:focus-visible,.___SPrevButton_1a2c8_gg_:focus-visible{box-shadow:none}.___SNextButton_1a2c8_gg_:focus-visible:after,.___SPrevButton_1a2c8_gg_:focus-visible:after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px;border-radius:var(--intergalactic-control-rounded, 6px)}@supports (color:color(display-p3 0 0 0)){.___SNextButton_1a2c8_gg_:focus-visible:after,.___SPrevButton_1a2c8_gg_:focus-visible:after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SNextButton_1a2c8_gg_:focus-visible:after,.___SPrevButton_1a2c8_gg_:focus-visible:after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SPrev_1a2c8_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_1a2c8_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_1a2c8_gg_.__disabled_1a2c8_gg_,.___SPrev_1a2c8_gg_.__disabled_1a2c8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1a2c8_gg_{transition:none}}", /*__inner_css_end__*/"1a2c8_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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, rgba(0, 32, 221, 0.469));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:color(display-p3 0 0 0%)){.___SContentBox_mxe6r_gg_:has(.___SItem_mxe6r_gg_:focus-visible)::after{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SContentBox_mxe6r_gg_:has(.___SItem_mxe6r_gg_:focus-visible)::after{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___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, rgba(0, 32, 221, 0.469));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:color(display-p3 0 0 0%)){.___SImageBoxContainer_mxe6r_gg_:has(.___SItem_mxe6r_gg_:focus-visible)::after{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SImageBoxContainer_mxe6r_gg_:has(.___SItem_mxe6r_gg_:focus-visible)::after{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}@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__*/"mxe6r_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SCarousel": "___SCarousel_1a2c8_gg_",
-  "__SContainer": "___SContainer_1a2c8_gg_",
-  "--duration": "--duration_1a2c8",
-  "__SModalContainer": "___SModalContainer_1a2c8_gg_",
-  "__SItem": "___SItem_1a2c8_gg_",
-  "--transform": "--transform_1a2c8",
-  "_zoomIn": "__zoomIn_1a2c8_gg_",
-  "_zoomOut": "__zoomOut_1a2c8_gg_",
-  "__SIndicators": "___SIndicators_1a2c8_gg_",
-  "_keyboardFocused": "__keyboardFocused_1a2c8_gg_",
-  "__SIndicator": "___SIndicator_1a2c8_gg_",
-  "_active": "__active_1a2c8_gg_",
-  "_inverted": "__inverted_1a2c8_gg_",
-  "__SPrev": "___SPrev_1a2c8_gg_",
-  "__SNext": "___SNext_1a2c8_gg_",
-  "_disabled": "__disabled_1a2c8_gg_",
-  "__SContentBox": "___SContentBox_1a2c8_gg_",
-  "__SModalBox": "___SModalBox_1a2c8_gg_",
-  "__SPrevButton": "___SPrevButton_1a2c8_gg_",
-  "__SNextButton": "___SNextButton_1a2c8_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 = {
   ArrowLeft: 'left',
@@ -61,24 +56,22 @@ var MAP_TRANSFORM = {
 };
 var enhance = [(0, _uniqueID["default"])(), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)];
 var media = ['(min-width: 481px)', '(max-width: 480px)'];
-var BreakPoints = (0, _breakpoints.createBreakpoints)(media);
+var BreakPoints = (0, _baseComponents.createBreakpoints)(media);
 var isSmallScreen = function isSmallScreen(index) {
   return index === 1;
 };
 var CarouselRoot = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(CarouselRoot, _Component);
-  var _super = (0, _createSuper2["default"])(CarouselRoot);
   function CarouselRoot(props) {
-    var _ref20, _props$index;
+    var _ref18, _props$index;
     var _this;
     (0, _classCallCheck2["default"])(this, CarouselRoot);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "defaultItemsCount", 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refCarousel", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refContainer", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refModalContainer", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_touchStartCoord", -1);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerKeyDown", function (e) {
+    _this = (0, _callSuper2["default"])(this, CarouselRoot, [props]);
+    (0, _defineProperty2["default"])(_this, "defaultItemsCount", 0);
+    (0, _defineProperty2["default"])(_this, "refCarousel", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "refContainer", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "refModalContainer", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "_touchStartCoord", -1);
+    (0, _defineProperty2["default"])(_this, "handlerKeyDown", function (e) {
       var firstSlide = 1;
       var lastSlide = _this.state.items.length + 1;
       switch (e.key) {
@@ -116,7 +109,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         _this.handleToggleZoomModal();
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleItem", function (item) {
+    (0, _defineProperty2["default"])(_this, "toggleItem", function (item) {
       var removeItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       _this.setState(function (prevState) {
         var newItems = removeItem ? prevState.items.filter(function (element) {
@@ -130,7 +123,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         _this.defaultItemsCount++;
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "transformContainer", function () {
+    (0, _defineProperty2["default"])(_this, "transformContainer", function () {
       var transform = _this.state.selectedIndex * -1 * 100;
       if (_this.refContainer.current) {
         _this.refContainer.current.style.transform = "translateX(".concat(transform, "%)");
@@ -139,7 +132,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         _this.refModalContainer.current.style.transform = "translateX(".concat(transform, "%)");
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getDirection", function (currentIndex, nextIndex) {
+    (0, _defineProperty2["default"])(_this, "getDirection", function (currentIndex, nextIndex) {
       var bounded = _this.asProps.bounded;
       if (bounded) {
         return currentIndex < nextIndex ? 'right' : 'left';
@@ -166,7 +159,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
       var left = tmpArr.indexOf(nextIndex);
       return left - tmpCurrentIndex < 0 ? 'left' : 'right';
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "slideToValue", function (nextIndex) {
+    (0, _defineProperty2["default"])(_this, "slideToValue", function (nextIndex) {
       var selectedIndex = _this.state.selectedIndex;
       var direction = selectedIndex < nextIndex ? 'right' : 'left';
       var diff = Math.abs(selectedIndex - nextIndex);
@@ -175,7 +168,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         diff--;
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "transformItem", function (direction) {
+    (0, _defineProperty2["default"])(_this, "transformItem", function (direction) {
       var bounded = _this.asProps.bounded;
       var _this$state = _this.state,
         items = _this$state.items,
@@ -220,12 +213,12 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         return;
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerClick", function (direction) {
+    (0, _defineProperty2["default"])(_this, "bindHandlerClick", function (direction) {
       return function () {
         _this.transformItem(direction);
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerClickIndicator", function (value) {
+    (0, _defineProperty2["default"])(_this, "bindHandlerClickIndicator", function (value) {
       return function () {
         var _this$state2 = _this.state,
           selectedIndex = _this$state2.selectedIndex,
@@ -237,10 +230,10 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         _this.handlers.index(value);
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerTouchStart", function (e) {
+    (0, _defineProperty2["default"])(_this, "handlerTouchStart", function (e) {
       _this._touchStartCoord = e.changedTouches[0].clientX;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerTouchEnd", function (e) {
+    (0, _defineProperty2["default"])(_this, "handlerTouchEnd", function (e) {
       var touchEndCoord = e.changedTouches[0].clientX;
       var delta = touchEndCoord - _this._touchStartCoord;
       if (delta > 50) {
@@ -249,16 +242,18 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         _this.transformItem('right');
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleToggleZoomModal", function () {
+    (0, _defineProperty2["default"])(_this, "handleToggleZoomModal", function () {
       _this.setState(function (prevState) {
         return {
           isOpenZoom: !prevState.isOpenZoom
         };
       }, function () {
-        _this.state.isOpenZoom && _this.transformContainer();
+        if (_this.state.isOpenZoom) {
+          _this.transformContainer();
+        }
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerKeydownControl", function (direction) {
+    (0, _defineProperty2["default"])(_this, "bindHandlerKeydownControl", function (direction) {
       return function (e) {
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();
@@ -270,21 +265,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;
   }
-  (0, _createClass2["default"])(CarouselRoot, [{
+  (0, _inherits2["default"])(CarouselRoot, _Component);
+  return (0, _createClass2["default"])(CarouselRoot, [{
     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);
         }]
       };
@@ -330,7 +326,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 {
@@ -359,10 +355,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: disabled,
-        label: getI18nText('prev'),
+        'label': getI18nText('prev'),
         'aria-controls': "igc-".concat(uid, "-carousel")
       };
     }
@@ -381,10 +377,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: disabled,
-        label: getI18nText('next'),
+        'label': getI18nText('next'),
         'aria-controls': "igc-".concat(uid, "-carousel")
       };
     }
@@ -395,14 +391,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: key
           };
         }),
-        role: 'tablist',
+        'role': 'tablist',
+        'tabIndex': 0,
         'aria-label': getI18nText('slides')
       };
     }
@@ -412,7 +409,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', {
@@ -458,26 +455,27 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
     key: "renderModal",
     value: function renderModal(isSmall, ComponentItems) {
       var _ref = this.asProps,
-        _ref10,
+        _ref0,
         _this5 = this;
-      var SModalContainer = _flexBox.Box;
-      var SModalBox = _flexBox.Box;
+      var SModalContainer = _baseComponents.Box;
+      var SModalBox = _baseComponents.Box;
+      var SImageBoxContainer = _baseComponents.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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_modal["default"], _ref10.cn("Modal", {
+      return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_modal["default"], _ref0.cn("Modal", {
         "visible": isOpenZoom,
         "onClose": this.handleToggleZoomModal,
         "ghost": true,
         "closable": !isSmall
-      }), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref10.cn("Flex", {
+      }), /*#__PURE__*/_react["default"].createElement(_baseComponents.Flex, _ref0.cn("Flex", {
         "direction": isSmall ? 'column' : 'row'
       }), !isSmall && /*#__PURE__*/_react["default"].createElement(Carousel.Prev, {
         inverted: true
-      }), /*#__PURE__*/_react["default"].createElement(SModalBox, _ref10.cn("SModalBox", {}), /*#__PURE__*/_react["default"].createElement(SModalContainer, _ref10.cn("SModalContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+      }), /*#__PURE__*/_react["default"].createElement(SImageBoxContainer, _ref0.cn("SImageBoxContainer", {}), /*#__PURE__*/_react["default"].createElement(SModalBox, _ref0.cn("SModalBox", {}), /*#__PURE__*/_react["default"].createElement(SModalContainer, _ref0.cn("SModalContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
         "aria-live": 'polite',
         "use:duration": "".concat(duration, "ms"),
         "ref": this.refModalContainer,
@@ -494,7 +492,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
           zoomOut: true,
           transform: _this5.isSelected(i) ? _this5.getTransform() : undefined
         }));
-      }))), isSmall ? /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref10.cn("Flex", {
+      })))), isSmall ? /*#__PURE__*/_react["default"].createElement(_baseComponents.Flex, _ref0.cn("Flex", {
         "justifyContent": 'center',
         "mt": 2
       }), /*#__PURE__*/_react["default"].createElement(Carousel.Prev, {
@@ -511,47 +509,44 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref2 = this.asProps,
-        _ref11,
+        _ref1,
         _this6 = this;
-      var SCarousel = _flexBox.Box;
+      var SCarousel = _baseComponents.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;
+        indicators = _this$asProps4.indicators,
+        getI18nText = _this$asProps4.getI18nText;
       var ComponentItems = (0, _findComponent.findAllComponents)(Children, ['Carousel.Item']);
       var Controls = (0, _findComponent.findAllComponents)(Children, ['Carousel.Prev', 'Carousel.Next', 'Carousel.Indicators']);
-      return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCarousel, _ref11.cn("SCarousel", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+      return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCarousel, _ref1.cn("SCarousel", (0, _objectSpread2["default"])({}, (0, _core.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref11.cn("Flex", {}), /*#__PURE__*/_react["default"].createElement(Carousel.Prev, null), /*#__PURE__*/_react["default"].createElement(Carousel.ContentBox, null, /*#__PURE__*/_react["default"].createElement(Carousel.Container, {
+        "id": "igc-".concat(uid, "-carousel")
+      }, _ref2))), Controls.length === 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_baseComponents.Flex, _ref1.cn("Flex", {}), /*#__PURE__*/_react["default"].createElement(Carousel.Prev, null), /*#__PURE__*/_react["default"].createElement(Carousel.ContentBox, null, /*#__PURE__*/_react["default"].createElement(Carousel.Container, {
         "aria-label": ariaLabel
-      }, /*#__PURE__*/_react["default"].createElement(Children, _ref11.cn("Children", {})))), /*#__PURE__*/_react["default"].createElement(Carousel.Next, null)), indicators === 'default' && /*#__PURE__*/_react["default"].createElement(Carousel.Indicators, null), indicators === 'preview' && /*#__PURE__*/_react["default"].createElement(Carousel.Indicators, null, function () {
+      }, /*#__PURE__*/_react["default"].createElement(Children, _ref1.cn("Children", {})))), /*#__PURE__*/_react["default"].createElement(Carousel.Next, null)), indicators === 'default' && /*#__PURE__*/_react["default"].createElement(Carousel.Indicators, null), indicators === 'preview' && /*#__PURE__*/_react["default"].createElement(Carousel.Indicators, null, function () {
         return ComponentItems.map(function (item, index) {
           return /*#__PURE__*/_react["default"].createElement(Carousel.Indicator, (0, _extends2["default"])({}, item.props, {
             key: item.key,
-            w: 100,
-            h: 100,
-            "aria-roledescription": "slide",
+            w: undefined,
+            "aria-roledescription": getI18nText('Carousel.Indicator:aria-roledescription'),
             active: _this6.isSelected(index),
             onClick: _this6.bindHandlerClickIndicator(index)
           }));
         });
-      })) : /*#__PURE__*/_react["default"].createElement(Children, _ref11.cn("Children", {})), hasZoom && /*#__PURE__*/_react["default"].createElement(BreakPoints, _ref11.cn("BreakPoints", {}), /*#__PURE__*/_react["default"].createElement(BreakPoints.Context.Consumer, null, function (mediaIndex) {
+      })) : /*#__PURE__*/_react["default"].createElement(Children, _ref1.cn("Children", {})), hasZoom && /*#__PURE__*/_react["default"].createElement(BreakPoints, _ref1.cn("BreakPoints", {}), /*#__PURE__*/_react["default"].createElement(BreakPoints.Context.Consumer, null, function (mediaIndex) {
         return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
       })));
     }
   }]);
-  return CarouselRoot;
 }(_core.Component);
 (0, _defineProperty2["default"])(CarouselRoot, "displayName", 'Carousel');
 (0, _defineProperty2["default"])(CarouselRoot, "defaultProps", {
@@ -565,48 +560,48 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
 });
 (0, _defineProperty2["default"])(CarouselRoot, "style", style);
 (0, _defineProperty2["default"])(CarouselRoot, "enhance", enhance);
-var Container = function Container(props) {
+function Container(props) {
   var _ref3 = arguments[0],
-    _ref12;
-  var SContainer = _flexBox.Box;
+    _ref10;
+  var SContainer = _baseComponents.Box;
   var styles = props.styles,
     duration = props.duration;
-  return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref12.cn("SContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref10.cn("SContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "use:duration": "".concat(duration, "ms"),
     "aria-live": 'polite'
   }, _ref3))));
-};
-var ContentBox = function ContentBox(props) {
+}
+function ContentBox(props) {
   var _ref4 = arguments[0],
-    _ref13;
-  var SContentBox = _flexBox.Box;
+    _ref11;
+  var SContentBox = _baseComponents.Box;
   var styles = props.styles;
-  return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContentBox, _ref13.cn("SContentBox", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref4))));
-};
+  return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContentBox, _ref11.cn("SContentBox", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref4))));
+}
 var Item = /*#__PURE__*/function (_Component2) {
-  (0, _inherits2["default"])(Item, _Component2);
-  var _super2 = (0, _createSuper2["default"])(Item);
   function Item() {
     var _this7;
     (0, _classCallCheck2["default"])(this, Item);
     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));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this7), "refItem", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this7), "keepFocusTimeout", void 0);
+    _this7 = (0, _callSuper2["default"])(this, Item, [].concat(args));
+    (0, _defineProperty2["default"])(_this7, "refItem", /*#__PURE__*/_react["default"].createRef());
     return _this7;
   }
-  (0, _createClass2["default"])(Item, [{
+  (0, _inherits2["default"])(Item, _Component2);
+  return (0, _createClass2["default"])(Item, [{
     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, "%)");
       }
@@ -616,41 +611,26 @@ 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;
+        _ref12;
       var _this$props2 = this.props,
         styles = _this$props2.styles,
         index = _this$props2.index,
@@ -658,8 +638,8 @@ var Item = /*#__PURE__*/function (_Component2) {
         current = _this$props2.current,
         zoomIn = _this$props2.zoomIn,
         onToggleZoomModal = _this$props2.onToggleZoomModal;
-      var SItem = _flexBox.Box;
-      return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItem, _ref14.cn("SItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+      var SItem = _baseComponents.Box;
+      return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItem, _ref12.cn("SItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
         "ref": this.refItem,
         "role": 'tabpanel',
         "data-carousel": "igc-".concat(uid, "-carousel"),
@@ -671,12 +651,10 @@ var Item = /*#__PURE__*/function (_Component2) {
       }, _ref5))));
     }
   }]);
-  return Item;
 }(_core.Component);
-(0, _defineProperty2["default"])(Item, "enhance", [(0, _keyboardFocusEnhance["default"])(false)]);
-var Prev = function Prev(props) {
+function Prev(props) {
   var _ref6 = arguments[0],
-    _ref15;
+    _ref13;
   var styles = props.styles,
     children = props.children,
     Children = props.Children,
@@ -684,21 +662,23 @@ var Prev = function Prev(props) {
     _props$top = props.top,
     top = _props$top === void 0 ? 0 : _props$top,
     inverted = props.inverted;
-  var SPrev = _flexBox.Box;
+  var SPrev = _baseComponents.Box;
   var SPrevButton = _button["default"];
-  return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPrev, _ref15.cn("SPrev", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPrev, _ref13.cn("SPrev", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "top": top
-  }, _ref6))), children ? /*#__PURE__*/_react["default"].createElement(Children, _ref15.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SPrevButton, _ref15.cn("SPrevButton", {
-    "addonLeft": _l2["default"],
+  }, _ref6))), children ? /*#__PURE__*/_react["default"].createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SPrevButton, _ref13.cn("SPrevButton", {
+    "addonLeft": _l["default"],
     "aria-label": label,
     "theme": inverted ? 'invert' : 'muted',
     "use": 'tertiary',
-    "size": 'l'
+    "size": 'l',
+    "innerOutline": true
   })));
-};
-var Next = function Next(props) {
+}
+;
+function Next(props) {
   var _ref7 = arguments[0],
-    _ref16;
+    _ref14;
   var styles = props.styles,
     children = props.children,
     Children = props.Children,
@@ -706,48 +686,56 @@ var Next = function Next(props) {
     _props$top2 = props.top,
     top = _props$top2 === void 0 ? 0 : _props$top2,
     inverted = props.inverted;
-  var SNext = _flexBox.Box;
+  var SNext = _baseComponents.Box;
   var SNextButton = _button["default"];
-  return _ref16 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SNext, _ref16.cn("SNext", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SNext, _ref14.cn("SNext", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "top": top
-  }, _ref7))), children ? /*#__PURE__*/_react["default"].createElement(Children, _ref16.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SNextButton, _ref16.cn("SNextButton", {
-    "addonLeft": _l["default"],
+  }, _ref7))), children ? /*#__PURE__*/_react["default"].createElement(Children, _ref14.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SNextButton, _ref14.cn("SNextButton", {
+    "addonLeft": _l2["default"],
     "aria-label": label,
     "theme": inverted ? 'invert' : 'muted',
     "use": 'tertiary',
-    "size": 'l'
+    "size": 'l',
+    "innerOutline": true
   })));
-};
-var Indicators = function Indicators(_ref21) {
+}
+;
+function Indicators(_ref19) {
   var _ref8 = arguments[0],
-    _ref18;
-  var items = _ref21.items,
-    styles = _ref21.styles,
-    Children = _ref21.Children,
-    inverted = _ref21.inverted;
-  var SIndicators = _flexBox.Box;
+    _ref16;
+  var items = _ref19.items,
+    styles = _ref19.styles,
+    Children = _ref19.Children,
+    inverted = _ref19.inverted;
+  var SIndicators = _baseComponents.Box;
   if (Children.origin) {
-    var _ref17;
-    return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref17.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref8))), /*#__PURE__*/_react["default"].createElement(Children, _ref17.cn("Children", {})));
+    var _ref15;
+    return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref15.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+      "innerOffset": true
+    }, _ref8))), /*#__PURE__*/_react["default"].createElement(Children, _ref15.cn("Children", {})));
   }
-  return _ref18 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref18.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+  return _ref16 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref16.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "invertOutline": inverted
+  }, _ref8))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement(Carousel.Indicator, (0, _extends2["default"])({
       key: index
     }, item, {
       inverted: inverted
     }));
   }));
-};
-Indicators.enhance = [(0, _keyboardFocusEnhance["default"])()];
-var Indicator = function Indicator(_ref22) {
+}
+;
+function Indicator(_ref20) {
   var _ref9 = arguments[0],
-    _ref19;
-  var styles = _ref22.styles,
-    Children = _ref22.Children;
-  var SIndicator = _flexBox.Box;
-  return _ref19 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicator, _ref19.cn("SIndicator", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref9))), /*#__PURE__*/_react["default"].createElement(Children, _ref19.cn("Children", {})));
-};
-var Carousel = (0, _core["default"])(CarouselRoot, {
+    _ref17;
+  var styles = _ref20.styles,
+    Children = _ref20.Children,
+    inverted = _ref20.inverted;
+  var SIndicator = _baseComponents.Box;
+  return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicator, _ref17.cn("SIndicator", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref9))), /*#__PURE__*/_react["default"].createElement(Children, _ref17.cn("Children", {})));
+}
+;
+var Carousel = (0, _core.createComponent)(CarouselRoot, {
   Container: Container,
   ContentBox: ContentBox,
   Indicators: Indicators,
@@ -756,6 +744,5 @@ var Carousel = (0, _core["default"])(CarouselRoot, {
   Prev: Prev,
   Next: Next
 });
-var _default = Carousel;
-exports["default"] = _default;
+var _default = exports["default"] = Carousel;
 //# sourceMappingURL=Carousel.js.map