intergalactic 15.122.0 → 15.123.0

package/carousel/lib/es6/Carousel.mjs

@@ -0,0 +1,760 @@
+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 as _sstyled } from 'intergalactic/utils/lib/core/index';
+import { assignProps as _assignProps10 } from 'intergalactic/core';
+import { assignProps as _assignProps9 } from 'intergalactic/core';
+import { assignProps as _assignProps8 } from 'intergalactic/core';
+import { assignProps as _assignProps7 } from 'intergalactic/core';
+import { assignProps as _assignProps6 } from 'intergalactic/core';
+import { assignProps as _assignProps5 } from 'intergalactic/core';
+import { assignProps as _assignProps4 } from 'intergalactic/core';
+import { assignProps as _assignProps3 } from 'intergalactic/core';
+import { assignProps as _assignProps2 } from 'intergalactic/core';
+import { assignProps as _assignProps } from 'intergalactic/core';
+import React from 'react';
+import createComponent, { Component, sstyled, Root } from 'intergalactic/core';
+import Button from 'intergalactic/button';
+import Modal from 'intergalactic/modal';
+import { Box, Flex } from 'intergalactic/flex-box';
+import ChevronRight from 'intergalactic/icon/ChevronRight/l';
+import ChevronLeft from 'intergalactic/icon/ChevronLeft/l';
+import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
+import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
+import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
+import logger from 'intergalactic/utils/lib/logger';
+/*__reshadow-styles__:"./style/carousel.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SCarousel_uvdau_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_uvdau_gg_{display:flex;transition:transform var(--duration_uvdau) ease-in-out}.___SContentBox_uvdau_gg_,.___SModalBox_uvdau_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_uvdau_gg_:has(.___SItem_uvdau_gg_.__keyboardFocused_uvdau_gg_):after,.___SModalBox_uvdau_gg_:has(.___SItem_uvdau_gg_.__keyboardFocused_uvdau_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_uvdau_gg_{display:flex;transition:transform var(--duration_uvdau) ease-in-out}.___SItem_uvdau_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_uvdau);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_uvdau_gg_.__zoomIn_uvdau_gg_{cursor:zoom-in}.___SItem_uvdau_gg_.__zoomOut_uvdau_gg_{cursor:zoom-out}.___SIndicators_uvdau_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_uvdau_gg_.__keyboardFocused_uvdau_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_uvdau_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_uvdau_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_uvdau_gg_.__active_uvdau_gg_{opacity:1}.___SIndicator_uvdau_gg_.__inverted_uvdau_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_uvdau_gg_,.___SPrev_uvdau_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_uvdau_gg_ .___SNextButton_uvdau_gg_ span:has(>svg:only-child),.___SNext_uvdau_gg_ .___SPrevButton_uvdau_gg_ span:has(>svg:only-child),.___SPrev_uvdau_gg_ .___SNextButton_uvdau_gg_ span:has(>svg:only-child),.___SPrev_uvdau_gg_ .___SPrevButton_uvdau_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_uvdau_gg_:focus-visible,.___SPrevButton_uvdau_gg_:focus-visible{box-shadow:none}.___SNextButton_uvdau_gg_:focus-visible:after,.___SPrevButton_uvdau_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_uvdau_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_uvdau_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_uvdau_gg_.__disabled_uvdau_gg_,.___SPrev_uvdau_gg_.__disabled_uvdau_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_uvdau_gg_{transition:none}}" /*__inner_css_end__*/, "uvdau_gg_") /*__reshadow_css_end__*/, {
+  "__SCarousel": "___SCarousel_uvdau_gg_",
+  "__SContainer": "___SContainer_uvdau_gg_",
+  "--duration": "--duration_uvdau",
+  "__SModalContainer": "___SModalContainer_uvdau_gg_",
+  "__SItem": "___SItem_uvdau_gg_",
+  "--transform": "--transform_uvdau",
+  "_zoomIn": "__zoomIn_uvdau_gg_",
+  "_zoomOut": "__zoomOut_uvdau_gg_",
+  "__SIndicators": "___SIndicators_uvdau_gg_",
+  "_keyboardFocused": "__keyboardFocused_uvdau_gg_",
+  "__SIndicator": "___SIndicator_uvdau_gg_",
+  "_active": "__active_uvdau_gg_",
+  "_inverted": "__inverted_uvdau_gg_",
+  "__SPrev": "___SPrev_uvdau_gg_",
+  "__SNext": "___SNext_uvdau_gg_",
+  "_disabled": "__disabled_uvdau_gg_",
+  "__SContentBox": "___SContentBox_uvdau_gg_",
+  "__SModalBox": "___SModalBox_uvdau_gg_",
+  "__SPrevButton": "___SPrevButton_uvdau_gg_",
+  "__SNextButton": "___SNextButton_uvdau_gg_"
+});
+import { findAllComponents } from 'intergalactic/utils/lib/findComponent';
+import { createBreakpoints } from 'intergalactic/breakpoints';
+import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
+var MAP_TRANSFORM = {
+  ArrowLeft: 'left',
+  ArrowRight: 'right'
+};
+var enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)];
+var media = ['(min-width: 481px)', '(max-width: 480px)'];
+var BreakPoints = createBreakpoints(media);
+var isSmallScreen = function isSmallScreen(index) {
+  return index === 1;
+};
+var CarouselRoot = /*#__PURE__*/function (_Component) {
+  _inherits(CarouselRoot, _Component);
+  var _super = _createSuper(CarouselRoot);
+  function CarouselRoot(props) {
+    var _ref20, _props$index;
+    var _this;
+    _classCallCheck(this, CarouselRoot);
+    _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':
+          {
+            e.preventDefault();
+            _this.transformItem(MAP_TRANSFORM[e.key]);
+            break;
+          }
+        case 'Home':
+          {
+            e.preventDefault();
+            _this.slideToValue(firstSlide);
+            break;
+          }
+        case 'End':
+          {
+            e.preventDefault();
+            _this.slideToValue(lastSlide);
+            break;
+          }
+      }
+      if (e.metaKey) {
+        // like home or end
+        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] !== undefined ? 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: newItems
+        };
+      });
+      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 (_this.isControlled) {
+          _this.handlers.index(selectedIndex === maxIndexIndicator ? 0 : selectedIndex + 1);
+          return;
+        }
+        _this.setState(function (prevState) {
+          return {
+            selectedIndex: prevState.selectedIndex + 1
+          };
+        }, function () {
+          _this.transformContainer();
+          _this.handlers.index(_this.getIndex());
+        });
+        return;
+      }
+      if (direction === 'left') {
+        if (bounded && selectedIndex === 0) {
+          _this.handlers.index(0);
+          return;
+        }
+        if (_this.isControlled) {
+          _this.handlers.index(selectedIndex === 0 ? maxIndexIndicator : selectedIndex - 1);
+          return;
+        }
+        _this.setState(function (prevState) {
+          return {
+            selectedIndex: prevState.selectedIndex - 1
+          };
+        }, function () {
+          _this.transformContainer();
+          _this.handlers.index(_this.getIndex());
+        });
+        return;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function (direction) {
+      return function () {
+        _this.transformItem(direction);
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerClickIndicator", function (value) {
+      return function () {
+        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);
+        }
+        _this.handlers.index(value);
+      };
+    });
+    _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: !prevState.isOpenZoom
+        };
+      }, function () {
+        _this.state.isOpenZoom && _this.transformContainer();
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerKeydownControl", function (direction) {
+      return function (e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          _this.bindHandlerClick(direction)();
+        }
+      };
+    });
+    _this.isControlled = props.index !== undefined;
+    _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
+    };
+    return _this;
+  }
+  _createClass(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();
+          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 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.", CarouselRoot.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.', CarouselRoot.displayName);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+      var index = this.asProps.index;
+      if (prevProps.index !== index && this.isControlled && index !== undefined) {
+        this.setState({
+          selectedIndex: index
+        }, function () {
+          return _this3.transformContainer();
+        });
+      }
+    }
+  }, {
+    key: "getContainerProps",
+    value: function getContainerProps() {
+      var duration = this.asProps.duration;
+      return {
+        ref: this.refContainer,
+        duration: duration
+      };
+    }
+  }, {
+    key: "getItemProps",
+    value: function getItemProps(props, index) {
+      var zoom = this.asProps.zoom;
+      var isCurrent = this.isSelected(index);
+      return {
+        toggleItem: this.toggleItem,
+        uid: this.asProps.uid,
+        index: index,
+        current: isCurrent,
+        zoomIn: zoom,
+        onToggleZoomModal: this.handleToggleZoomModal,
+        transform: isCurrent ? this.getTransform() : undefined,
+        isOpenZoom: this.state.isOpenZoom
+      };
+    }
+  }, {
+    key: "getPrevProps",
+    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: disabled,
+        label: getI18nText('prev'),
+        'aria-controls': "igc-".concat(uid, "-carousel")
+      };
+    }
+  }, {
+    key: "getNextProps",
+    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: disabled,
+        label: getI18nText('next'),
+        'aria-controls': "igc-".concat(uid, "-carousel")
+      };
+    }
+  }, {
+    key: "getIndicatorsProps",
+    value: function getIndicatorsProps() {
+      var _this4 = this;
+      var items = this.state.items;
+      var getI18nText = this.asProps.getI18nText;
+      return {
+        items: items.map(function (item, key) {
+          return {
+            active: _this4.isSelected(key),
+            onClick: _this4.bindHandlerClickIndicator(key),
+            key: key
+          };
+        }),
+        role: 'tablist',
+        'aria-label': getI18nText('slides')
+      };
+    }
+  }, {
+    key: "getIndicatorProps",
+    value: function getIndicatorProps(_, index) {
+      var isCurrent = this.isSelected(index);
+      var getI18nText = this.asProps.getI18nText;
+      return {
+        role: 'tab',
+        '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 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 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 isSelected(index) {
+      var items = this.state.items;
+      if (items.length === 0) {
+        return true;
+      }
+      return index === this.getIndex();
+    }
+  }, {
+    key: "renderModal",
+    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(duration, "ms"),
+        "ref": this.refModalContainer,
+        "use:w": undefined,
+        "wMax": zoomWidth
+      }, _ref))), ComponentItems.map(function (item, i) {
+        return /*#__PURE__*/React.createElement(Carousel.Item, _extends({}, item.props, {
+          key: item.key,
+          uid: uid,
+          index: i,
+          current: _this5.isSelected(i),
+          toggleItem: undefined,
+          zoom: true,
+          zoomOut: true,
+          transform: _this5.isSelected(i) ? _this5.getTransform() : undefined
+        }));
+      }))), 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 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({}, _assignProps2({
+        "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: _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) {
+        return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
+      })));
+    }
+  }]);
+  return CarouselRoot;
+}(Component);
+_defineProperty(CarouselRoot, "displayName", 'Carousel');
+_defineProperty(CarouselRoot, "defaultProps", {
+  defaultIndex: 0,
+  duration: 350,
+  step: 100,
+  bounded: false,
+  i18n: localizedMessages,
+  locale: 'en',
+  indicators: 'default'
+});
+_defineProperty(CarouselRoot, "style", style);
+_defineProperty(CarouselRoot, "enhance", enhance);
+var Container = function Container(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({}, _assignProps3({
+    "use:duration": "".concat(duration, "ms"),
+    "aria-live": 'polite'
+  }, _ref3))));
+};
+var ContentBox = function ContentBox(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({}, _assignProps4({}, _ref4))));
+};
+var Item = /*#__PURE__*/function (_Component2) {
+  _inherits(Item, _Component2);
+  var _super2 = _createSuper(Item);
+  function Item() {
+    var _this7;
+    _classCallCheck(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));
+    _defineProperty(_assertThisInitialized(_this7), "refItem", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this7), "keepFocusTimeout", void 0);
+    return _this7;
+  }
+  _createClass(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 (transform && refItem) {
+        refItem.style.transform = "translateX(".concat(transform, "%)");
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var toggleItem = this.props.toggleItem;
+      var refItem = this.refItem.current;
+      toggleItem && refItem && toggleItem({
+        node: refItem
+      }, true);
+      clearTimeout(this.keepFocusTimeout);
+    }
+  }, {
+    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 _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({}, _assignProps5({
+        "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 : undefined,
+        "zoomIn": zoomIn
+      }, _ref5))));
+    }
+  }]);
+  return Item;
+}(Component);
+_defineProperty(Item, "enhance", [keyboardFocusEnhance(false)]);
+var Prev = function Prev(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({}, _assignProps6({
+    "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'
+  })));
+};
+var Next = function Next(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({}, _assignProps7({
+    "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'
+  })));
+};
+var Indicators = function Indicators(_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({}, _assignProps8({}, _ref8))), /*#__PURE__*/React.createElement(Children, _ref17.cn("Children", {})));
+  }
+  return _ref18 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref18.cn("SIndicators", _objectSpread({}, _assignProps9({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Carousel.Indicator, _extends({
+      key: index
+    }, item, {
+      inverted: inverted
+    }));
+  }));
+};
+Indicators.enhance = [keyboardFocusEnhance()];
+var Indicator = function Indicator(_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({}, _assignProps10({}, _ref9))), /*#__PURE__*/React.createElement(Children, _ref19.cn("Children", {})));
+};
+var Carousel = createComponent(CarouselRoot, {
+  Container: Container,
+  ContentBox: ContentBox,
+  Indicators: Indicators,
+  Indicator: Indicator,
+  Item: Item,
+  Prev: Prev,
+  Next: Next
+});
+export default Carousel;
+//# sourceMappingURL=Carousel.mjs.map