@dpocean/chatui 1.0.0

package/lib/components/Card/CardHeader.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardHeader = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Flex = require("../Flex");
+var _Image = require("../Image");
+var _excluded = ["className", "icon", "iconColor", "logo", "title", "desc", "hasBg", "badge", "children"];
+var CardHeader = exports.CardHeader = function CardHeader(props) {
+  var className = props.className,
+    icon = props.icon,
+    iconColor = props.iconColor,
+    logo = props.logo,
+    title = props.title,
+    desc = props.desc,
+    hasBg = props.hasBg,
+    badge = props.badge,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Flex.Flex, (0, _extends2.default)({
+    className: (0, _clsx.default)('CardHeader', className),
+    "data-has-bg": !!hasBg
+  }, other), icon && (icon.includes('//') ? /*#__PURE__*/_react.default.createElement(_Image.Image, {
+    className: "CardHeader-icon",
+    src: icon
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "CardHeader-icon",
+    style: {
+      color: iconColor
+    },
+    type: icon
+  })), /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, null, logo ? /*#__PURE__*/_react.default.createElement(_Image.Image, {
+    className: "CardHeader-logo",
+    src: logo
+  }) : /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    as: "h4",
+    className: "CardHeader-title",
+    truncate: 2
+  }, title), desc && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    as: "h5",
+    className: "CardHeader-desc",
+    truncate: true
+  }, desc)), badge ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "CardHeader-badge",
+    style: {
+      backgroundImage: "url(".concat(badge, ")")
+    }
+  }) : children && /*#__PURE__*/_react.default.createElement("div", {
+    className: "CardHeader-slot"
+  }, children));
+};

package/lib/components/Card/CardMedia.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CardMediaProps = {
+    className?: string;
+    aspectRatio?: 'square' | 'wide';
+    color?: string;
+    image?: string;
+    children?: React.ReactNode;
+};
+export declare const CardMedia: (props: CardMediaProps) => React.JSX.Element;

package/lib/components/Card/CardMedia.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardMedia = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Flex = require("../Flex");
+var _excluded = ["className", "aspectRatio", "color", "image", "children"];
+var CardMedia = exports.CardMedia = function CardMedia(props) {
+  var className = props.className,
+    _props$aspectRatio = props.aspectRatio,
+    aspectRatio = _props$aspectRatio === void 0 ? 'square' : _props$aspectRatio,
+    color = props.color,
+    image = props.image,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var bgStyle = {
+    backgroundColor: color || undefined,
+    backgroundImage: typeof image === 'string' ? "url('".concat(image, "')") : undefined
+  };
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('CardMedia', {
+      'CardMedia--wide': aspectRatio === 'wide',
+      'CardMedia--square': aspectRatio === 'square'
+    }, className),
+    style: bgStyle
+  }, other), children && /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: "CardMedia-content",
+    direction: "column",
+    center: true
+  }, children));
+};

package/lib/components/Card/CardText.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type CardTextProps = {
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare const CardText: (props: CardTextProps) => React.JSX.Element;

package/lib/components/Card/CardText.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardText = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _excluded = ["className", "children"];
+var CardText = exports.CardText = function CardText(props) {
+  var className = props.className,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('CardText', className)
+  }, other), typeof children === 'string' ? /*#__PURE__*/_react.default.createElement("p", null, children) : children);
+};

package/lib/components/Card/CardTitle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CardTitleProps = {
+    className?: string;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    center?: boolean;
+    children?: React.ReactNode;
+};
+export declare const CardTitle: (props: CardTitleProps) => React.JSX.Element;

package/lib/components/Card/CardTitle.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardTitle = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _excluded = ["className", "title", "subtitle", "center", "children"];
+var CardTitle = exports.CardTitle = function CardTitle(props) {
+  var className = props.className,
+    title = props.title,
+    subtitle = props.subtitle,
+    center = props.center,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('CardTitle', {
+      'CardTitle--center': center
+    }, className)
+  }, other), title && /*#__PURE__*/_react.default.createElement("h5", {
+    className: "CardTitle-title"
+  }, title), children && typeof children === 'string' && /*#__PURE__*/_react.default.createElement("h5", {
+    className: "CardTitle-title"
+  }, children), subtitle && /*#__PURE__*/_react.default.createElement("p", {
+    className: "CardTitle-subtitle"
+  }, subtitle), children && typeof children !== 'string' && children);
+};

package/lib/components/Card/index.d.ts

@@ -0,0 +1,14 @@
+export { Card } from './Card';
+export type { CardProps, CardSize } from './Card';
+export { CardMedia } from './CardMedia';
+export type { CardMediaProps } from './CardMedia';
+export { CardContent } from './CardContent';
+export type { CardContentProps } from './CardContent';
+export { CardHeader } from './CardHeader';
+export type { CardHeaderProps } from './CardHeader';
+export { CardTitle } from './CardTitle';
+export type { CardTitleProps } from './CardTitle';
+export { CardText } from './CardText';
+export type { CardTextProps } from './CardText';
+export { CardActions } from './CardActions';
+export type { CardActionsProps } from './CardActions';

package/lib/components/Card/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function get() {
+    return _Card.Card;
+  }
+});
+Object.defineProperty(exports, "CardActions", {
+  enumerable: true,
+  get: function get() {
+    return _CardActions.CardActions;
+  }
+});
+Object.defineProperty(exports, "CardContent", {
+  enumerable: true,
+  get: function get() {
+    return _CardContent.CardContent;
+  }
+});
+Object.defineProperty(exports, "CardHeader", {
+  enumerable: true,
+  get: function get() {
+    return _CardHeader.CardHeader;
+  }
+});
+Object.defineProperty(exports, "CardMedia", {
+  enumerable: true,
+  get: function get() {
+    return _CardMedia.CardMedia;
+  }
+});
+Object.defineProperty(exports, "CardText", {
+  enumerable: true,
+  get: function get() {
+    return _CardText.CardText;
+  }
+});
+Object.defineProperty(exports, "CardTitle", {
+  enumerable: true,
+  get: function get() {
+    return _CardTitle.CardTitle;
+  }
+});
+var _Card = require("./Card");
+var _CardMedia = require("./CardMedia");
+var _CardContent = require("./CardContent");
+var _CardHeader = require("./CardHeader");
+var _CardTitle = require("./CardTitle");
+var _CardText = require("./CardText");
+var _CardActions = require("./CardActions");

package/lib/components/Carousel/Item.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface CarouselItemProps {
+    width: string;
+    children?: React.ReactNode;
+}
+export declare const CarouselItem: (props: CarouselItemProps) => React.JSX.Element;
+export {};

package/lib/components/Carousel/Item.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CarouselItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var CarouselItem = exports.CarouselItem = function CarouselItem(props) {
+  var width = props.width,
+    children = props.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "Carousel-item",
+    style: {
+      width: width
+    }
+  }, children);
+};

package/lib/components/Carousel/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface CarouselProps {
+    children: React.ReactNode;
+    className?: string;
+    startIndex?: number;
+    draggable?: boolean;
+    clickDragThreshold?: number;
+    duration?: number;
+    easing?: string;
+    threshold?: number;
+    loop?: boolean;
+    rtl?: boolean;
+    autoPlay?: boolean;
+    interval?: number;
+    dots?: boolean;
+    onChange?: (activeIndex?: number) => void;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    indicators?: boolean;
+}
+export interface CarouselHandle {
+    goTo: (n: number) => void;
+    prev: () => void;
+    next: () => void;
+}
+export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselHandle>>;

package/lib/components/Carousel/index.js

@@ -0,0 +1,378 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Carousel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Item = require("./Item");
+var _style = require("../../utils/style");
+var _canUse = _interopRequireDefault(require("../../utils/canUse"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var formElements = ['TEXTAREA', 'OPTION', 'INPUT', 'SELECT'];
+var canTouch = (0, _canUse.default)('touch');
+var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$startIndex = props.startIndex,
+    startIndex = _props$startIndex === void 0 ? 0 : _props$startIndex,
+    _props$draggable = props.draggable,
+    draggable = _props$draggable === void 0 ? true : _props$draggable,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 300 : _props$duration,
+    _props$easing = props.easing,
+    easing = _props$easing === void 0 ? 'ease' : _props$easing,
+    _props$threshold = props.threshold,
+    threshold = _props$threshold === void 0 ? 20 : _props$threshold,
+    _props$clickDragThres = props.clickDragThreshold,
+    clickDragThreshold = _props$clickDragThres === void 0 ? 10 : _props$clickDragThres,
+    _props$loop = props.loop,
+    loop = _props$loop === void 0 ? true : _props$loop,
+    _props$rtl = props.rtl,
+    rtl = _props$rtl === void 0 ? false : _props$rtl,
+    _props$autoPlay = props.autoPlay,
+    autoPlay = _props$autoPlay === void 0 ? props.autoplay || false : _props$autoPlay,
+    _props$interval = props.interval,
+    interval = _props$interval === void 0 ? props.autoplaySpeed || 4000 : _props$interval,
+    _props$dots = props.dots,
+    dots = _props$dots === void 0 ? props.indicators || true : _props$dots,
+    onChange = props.onChange,
+    children = props.children;
+  var count = _react.default.Children.count(children);
+  var itemWith = "".concat(100 / count, "%");
+  var wrapperRef = (0, _react.useRef)(null);
+  var innerRef = (0, _react.useRef)(null);
+  var autoPlayTimerRef = (0, _react.useRef)(null);
+  var stateRef = (0, _react.useRef)({
+    first: true,
+    wrapWidth: 0,
+    hover: false,
+    startX: 0,
+    endX: 0,
+    startY: 0,
+    canMove: null,
+    pressDown: false
+  });
+  var getIndex = (0, _react.useCallback)(function (idx) {
+    return loop ? idx % count : Math.max(0, Math.min(idx, count - 1));
+  }, [count, loop]);
+  var _useState = (0, _react.useState)(getIndex(startIndex)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isDragging = _useState4[0],
+    setDragging = _useState4[1];
+  var enableTransition = (0, _react.useCallback)(function () {
+    (0, _style.setTransition)(innerRef.current, "transform ".concat(duration, "ms ").concat(easing));
+  }, [duration, easing]);
+  var disableTransition = function disableTransition() {
+    (0, _style.setTransition)(innerRef.current, 'transform 0s');
+  };
+  var moveX = function moveX(x) {
+    (0, _style.setTransform)(innerRef.current, "translate3d(".concat(x, "px, 0, 0)"));
+  };
+  var slideTo = (0, _react.useCallback)(function (idx, smooth) {
+    var nextIndex = loop ? idx + 1 : idx;
+    var offset = (rtl ? 1 : -1) * nextIndex * stateRef.current.wrapWidth;
+    if (smooth) {
+      requestAnimationFrame(function () {
+        requestAnimationFrame(function () {
+          enableTransition();
+          moveX(offset);
+        });
+      });
+    } else {
+      moveX(offset);
+    }
+  }, [enableTransition, loop, rtl]);
+  var goTo = (0, _react.useCallback)(function (idx) {
+    if (count <= 1) {
+      return;
+    }
+    var nextIndex = getIndex(idx);
+    if (nextIndex !== activeIndex) {
+      setActiveIndex(nextIndex);
+      // slideTo(nextIndex, loop);
+    }
+  }, [activeIndex, count, getIndex]);
+  var prev = (0, _react.useCallback)(function () {
+    if (count <= 1) {
+      return;
+    }
+    var nextIndex = activeIndex - 1;
+    if (loop) {
+      if (nextIndex < 0) {
+        var state = stateRef.current;
+        var moveTo = count + 1;
+        var offset = (rtl ? 1 : -1) * moveTo * state.wrapWidth;
+        var dragDist = draggable ? state.endX - state.startX : 0;
+        disableTransition();
+        moveX(offset + dragDist);
+        nextIndex = count - 1;
+      }
+    } else {
+      nextIndex = Math.max(nextIndex, 0);
+    }
+    if (nextIndex !== activeIndex) {
+      setActiveIndex(nextIndex);
+      // slideTo(nextIndex, loop);
+    }
+  }, [activeIndex, count, draggable, loop, rtl]);
+  var next = (0, _react.useCallback)(function () {
+    if (count <= 1) {
+      return;
+    }
+    var nextIndex = activeIndex + 1;
+    if (loop) {
+      var isClone = nextIndex > count - 1;
+      if (isClone) {
+        nextIndex = 0;
+        var state = stateRef.current;
+        var dragDist = draggable ? state.endX - state.startX : 0;
+        disableTransition();
+        moveX(dragDist);
+      }
+    } else {
+      nextIndex = Math.min(nextIndex, count - 1);
+    }
+    if (nextIndex !== activeIndex) {
+      setActiveIndex(nextIndex);
+      // slideTo(nextIndex, loop);
+    }
+  }, [activeIndex, count, draggable, loop]);
+  var doAutoPlay = (0, _react.useCallback)(function () {
+    if (!autoPlay || stateRef.current.hover) {
+      return;
+    }
+    autoPlayTimerRef.current = setTimeout(function () {
+      enableTransition();
+      next();
+    }, interval);
+  }, [autoPlay, interval, enableTransition, next]);
+  var clearAutoPlay = function clearAutoPlay() {
+    clearTimeout(autoPlayTimerRef.current);
+  };
+  var resetToCurrent = function resetToCurrent() {
+    slideTo(activeIndex, true);
+    doAutoPlay();
+  };
+  var updateAfterDrag = function updateAfterDrag() {
+    var state = stateRef.current;
+    var offset = (rtl ? -1 : 1) * (state.endX - state.startX);
+    var offsetDist = Math.abs(offset);
+    var isClone1 = offset > 0 && activeIndex - 1 < 0;
+    var isClone2 = offset < 0 && activeIndex + 1 > count - 1;
+    if (isClone1 || isClone2) {
+      if (loop) {
+        if (isClone1) {
+          prev();
+        } else {
+          next();
+        }
+      } else {
+        resetToCurrent();
+      }
+    } else if (offset > 0 && offsetDist > threshold && count > 1) {
+      prev();
+    } else if (offset < 0 && offsetDist > threshold && count > 1) {
+      next();
+    } else {
+      resetToCurrent();
+    }
+  };
+  var resetDrag = function resetDrag() {
+    var state = stateRef.current;
+    state.startX = 0;
+    state.endX = 0;
+    state.startY = 0;
+    state.canMove = null;
+    state.pressDown = false;
+  };
+  var dragStart = function dragStart(e) {
+    if (formElements.includes(e.target.nodeName)) {
+      return;
+    }
+
+    // e.preventDefault();
+    e.stopPropagation();
+    var ev = 'touches' in e ? e.touches[0] : e;
+    var state = stateRef.current;
+    state.pressDown = true;
+    state.startX = ev.pageX;
+    state.startY = ev.pageY;
+    clearAutoPlay();
+  };
+  var dragMove = function dragMove(e) {
+    e.stopPropagation();
+    var ev = 'touches' in e ? e.touches[0] : e;
+    var state = stateRef.current;
+    if (state.pressDown) {
+      if ('touches' in e) {
+        if (state.canMove === null) {
+          state.canMove = Math.abs(state.startY - ev.pageY) < Math.abs(state.startX - ev.pageX);
+        }
+        if (!state.canMove) {
+          return;
+        }
+      }
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      disableTransition();
+      state.endX = ev.pageX;
+      var nextIndex = loop ? activeIndex + 1 : activeIndex;
+      var nextOffset = nextIndex * state.wrapWidth;
+      var dragOffset = state.endX - state.startX;
+      if (!isDragging && Math.abs(dragOffset) > clickDragThreshold) {
+        setDragging(true);
+      }
+
+      // 阻尼
+      // if ((activeIndex === 0 && dragOffset > 0) || (activeIndex === count - 1 && dragOffset < 0)) {
+      //   dragOffset *= 0.35;
+      // }
+
+      var offset = rtl ? nextOffset + dragOffset : dragOffset - nextOffset;
+      moveX(offset);
+    }
+  };
+  var dragEnd = function dragEnd(e) {
+    e.stopPropagation();
+    var state = stateRef.current;
+    state.pressDown = false;
+    setDragging(false);
+    enableTransition();
+    if (state.endX) {
+      updateAfterDrag();
+    } else {
+      // when clicked
+      doAutoPlay();
+    }
+    resetDrag();
+  };
+  var onMouseEnter = function onMouseEnter() {
+    stateRef.current.hover = true;
+    clearAutoPlay();
+  };
+  var onMouseLeave = function onMouseLeave(e) {
+    var state = stateRef.current;
+    state.hover = false;
+    if (state.pressDown) {
+      state.pressDown = false;
+      state.endX = e.pageX;
+      enableTransition();
+      updateAfterDrag();
+      resetDrag();
+    }
+    doAutoPlay();
+  };
+  var handleClickDot = function handleClickDot(e) {
+    var i = e.currentTarget.dataset.slideTo;
+    if (i) {
+      var idx = parseInt(i, 10);
+      goTo(idx);
+    }
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      goTo: goTo,
+      prev: prev,
+      next: next
+    };
+  }, [goTo, prev, next]);
+  (0, _react.useEffect)(function () {
+    // should use ResizeObserver
+    function handleResize() {
+      stateRef.current.wrapWidth = wrapperRef.current.offsetWidth;
+      slideTo(activeIndex);
+    }
+    if (stateRef.current.first) {
+      handleResize();
+    }
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [activeIndex, slideTo]);
+  (0, _react.useEffect)(function () {
+    if (onChange && !stateRef.current.first) {
+      onChange(activeIndex);
+    }
+  }, [activeIndex, onChange]);
+  (0, _react.useEffect)(function () {
+    if (stateRef.current.first) {
+      slideTo(activeIndex);
+      stateRef.current.first = false;
+    } else {
+      slideTo(activeIndex, true);
+    }
+  }, [activeIndex, slideTo]);
+  (0, _react.useEffect)(function () {
+    doAutoPlay();
+    return function () {
+      clearAutoPlay();
+    };
+  }, [autoPlay, activeIndex, doAutoPlay]);
+  var events;
+  if (draggable && count > 1) {
+    events = canTouch ? {
+      onTouchStart: dragStart,
+      onTouchMove: dragMove,
+      onTouchEnd: dragEnd
+    } : {
+      onMouseDown: dragStart,
+      onMouseMove: dragMove,
+      onMouseUp: dragEnd,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    };
+  } else {
+    events = {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    };
+  }
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('Carousel', {
+      'Carousel--draggable': draggable,
+      'Carousel--rtl': rtl,
+      'Carousel--dragging': isDragging
+    }, className),
+    ref: wrapperRef
+  }, events), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Carousel-inner",
+    style: {
+      width: "".concat(loop ? count + 2 : count, "00%")
+    },
+    ref: innerRef
+  }, loop && /*#__PURE__*/_react.default.createElement(_Item.CarouselItem, {
+    width: itemWith
+  }, _react.default.Children.toArray(children)[count - 1]), _react.default.Children.map(children, function (item, i) {
+    return /*#__PURE__*/_react.default.createElement(_Item.CarouselItem, {
+      width: itemWith,
+      key: i
+    }, item);
+  }), loop && /*#__PURE__*/_react.default.createElement(_Item.CarouselItem, {
+    width: itemWith
+  }, _react.default.Children.toArray(children)[0])), dots && /*#__PURE__*/_react.default.createElement("ol", {
+    className: "Carousel-dots"
+  }, _react.default.Children.map(children, function (_, i) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: (0, _clsx.default)('Carousel-dot', {
+        active: activeIndex === i
+      }),
+      type: "button",
+      "aria-label": "Go to slide ".concat(i + 1),
+      "data-slide-to": i,
+      onClick: handleClickDot
+    }));
+  })));
+});