@helpdice/ui 1.7.5 → 1.7.8

package/esm/button/button.js

@@ -7,13 +7,12 @@ import _JSXStyle from "../styled-jsx.es.js";
 
 import React, { useRef, useState, useMemo, useImperativeHandle } from 'react';
 import useScale, { withScale } from '../use-scale';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import ButtonDrip from './button.drip';
 import ButtonLoading from './button-loading';
 import { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils';
 import { useButtonGroupContext } from '../button-group/button-group-context';
 import { getButtonColors, getButtonCursor, getButtonDripColor, getButtonHoverColors } from './styles';
-import useClasses from '../use-classes';
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme = useTheme();
   var _useScale = useScale(),

package/esm/button/utils.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import ButtonIcon from './button-icon';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 export var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, children, icons) {
   var icon = icons.icon,
     iconRight = icons.iconRight;

package/esm/button-dropdown/button-dropdown-item.js

@@ -5,7 +5,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import { getColor } from './styles';
 import { useButtonDropdown } from './button-dropdown-context';
 import Loading from '../loading';

package/esm/button-dropdown/button-dropdown.js

@@ -6,7 +6,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useClickAway from '../utils/use-click-away';
 import { getColor } from './styles';
 import ButtonDropdownIcon from './icon';
@@ -14,7 +14,6 @@ import ButtonDropdownItem from './button-dropdown-item';
 import { ButtonDropdownContext } from './button-dropdown-context';
 import { pickChild, pickChildByProps } from '../utils/collections';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var stopPropagation = function stopPropagation(event) {
   event.stopPropagation();
   event.nativeEvent.stopImmediatePropagation();

package/esm/button-group/button-group.js

@@ -3,10 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["disabled", "type", "ghost", "vertical", "children", "className"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import { ButtonGroupContext } from './button-group-context';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var getGroupBorderColors = function getGroupBorderColors(palette, props) {
   var _props$ghost = props.ghost,
     ghost = _props$ghost === void 0 ? false : _props$ghost,

package/esm/capacity/capacity.js

@@ -3,10 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["value", "limit", "color", "className"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import { useProportions } from '../utils/calculations';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var getColor = function getColor(val, palette) {
   if (val < 33) return palette.cyan;
   if (val < 66) return palette.warning;

package/esm/card/card-content.js

@@ -4,7 +4,7 @@ var _excluded = ["className", "children"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var CardContentComponent = function CardContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/card/card-footer.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "className", "disableAutoMargin"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var CardFooterComponent = function CardFooterComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,

package/esm/card/card.js

@@ -4,14 +4,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "hoverable", "className", "shadow", "type"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import { getStyles } from './styles';
 import CardFooter from './card-footer';
 import CardContent from './card-content';
 import Image from '../image';
 import { hasChild, pickChild } from '../utils/collections';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var CardComponent = function CardComponent(_ref) {
   var children = _ref.children,
     _ref$hoverable = _ref.hoverable,

package/esm/carousal/Arrow.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import klass from '../../cssClasses'; // Assuming cssClasses.ts is in src/
+
+var Arrow = function Arrow(_ref) {
+  var direction = _ref.direction,
+    onClickHandler = _ref.onClickHandler,
+    enabled = _ref.enabled,
+    label = _ref.label;
+  var isPrev = direction === 'prev';
+  var arrowClassName = isPrev ? klass.ARROW_PREV(!enabled) : klass.ARROW_NEXT(!enabled);
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": label,
+    className: arrowClassName,
+    onClick: onClickHandler
+  });
+};
+export default Arrow;

package/esm/carousal/Indicator.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import klass from '../../cssClasses'; // Assuming cssClasses.ts is in src/
+
+var Indicator = function Indicator(_ref) {
+  var onClickHandler = _ref.onClickHandler,
+    isSelected = _ref.isSelected,
+    index = _ref.index,
+    label = _ref.label;
+  return /*#__PURE__*/React.createElement("li", {
+    className: klass.DOT(isSelected),
+    onClick: onClickHandler,
+    onKeyDown: onClickHandler,
+    value: index,
+    key: index,
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "".concat(label, " ").concat(index + 1)
+  });
+};
+export default Indicator;

package/esm/carousal/Thumbs.js

@@ -0,0 +1,302 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React, { Component, Children } from 'react';
+import klass from '../cssClasses';
+import { outerWidth } from '../dimensions';
+import CSSTranslate from '../CSSTranslate';
+// @ts-ignore
+import Swipe from 'react-easy-swipe';
+import getWindow from '../shims/window';
+var isKeyboardEvent = function isKeyboardEvent(e) {
+  return e.hasOwnProperty('key');
+};
+var Thumbs = /*#__PURE__*/function (_Component) {
+  function Thumbs(_props) {
+    var _this;
+    _classCallCheck(this, Thumbs);
+    _this = _callSuper(this, Thumbs, [_props]);
+    _defineProperty(_this, "setItemsWrapperRef", function (node) {
+      _this.itemsWrapperRef = node;
+    });
+    _defineProperty(_this, "setItemsListRef", function (node) {
+      _this.itemsListRef = node;
+    });
+    _defineProperty(_this, "setThumbsRef", function (node, index) {
+      if (!_this.thumbsRef) {
+        _this.thumbsRef = [];
+      }
+      _this.thumbsRef[index] = node;
+    });
+    _defineProperty(_this, "updateSizes", function () {
+      if (!_this.props.children || !_this.itemsWrapperRef || !_this.thumbsRef) {
+        return;
+      }
+      var total = Children.count(_this.props.children);
+      var wrapperSize = _this.itemsWrapperRef.clientWidth;
+      var itemSize = _this.props.thumbWidth ? _this.props.thumbWidth : outerWidth(_this.thumbsRef[0]);
+      var visibleItems = Math.floor(wrapperSize / itemSize);
+      var showArrows = visibleItems < total;
+      var lastPosition = showArrows ? total - visibleItems : 0;
+      _this.setState(function (_state, props) {
+        return {
+          itemSize: itemSize,
+          visibleItems: visibleItems,
+          firstItem: showArrows ? _this.getFirstItem(props.selectedItem) : 0,
+          lastPosition: lastPosition,
+          showArrows: showArrows
+        };
+      });
+    });
+    _defineProperty(_this, "handleClickItem", function (index, item, e) {
+      if (!isKeyboardEvent(e) || e.key === 'Enter') {
+        var handler = _this.props.onSelectItem;
+        if (typeof handler === 'function') {
+          handler(index, item);
+        }
+      }
+    });
+    _defineProperty(_this, "onSwipeStart", function () {
+      _this.setState({
+        swiping: true
+      });
+    });
+    _defineProperty(_this, "onSwipeEnd", function () {
+      _this.setState({
+        swiping: false
+      });
+    });
+    _defineProperty(_this, "onSwipeMove", function (delta) {
+      var deltaX = delta.x;
+      if (!_this.state.itemSize || !_this.itemsWrapperRef || !_this.state.visibleItems) {
+        return false;
+      }
+      var leftBoundary = 0;
+      var childrenLength = Children.count(_this.props.children);
+      var currentPosition = -(_this.state.firstItem * 100) / _this.state.visibleItems;
+      var lastLeftItem = Math.max(childrenLength - _this.state.visibleItems, 0);
+      var lastLeftBoundary = -lastLeftItem * 100 / _this.state.visibleItems;
+
+      // prevent user from swiping left out of boundaries
+      if (currentPosition === leftBoundary && deltaX > 0) {
+        deltaX = 0;
+      }
+
+      // prevent user from swiping right out of boundaries
+      if (currentPosition === lastLeftBoundary && deltaX < 0) {
+        deltaX = 0;
+      }
+      var wrapperSize = _this.itemsWrapperRef.clientWidth;
+      var position = currentPosition + 100 / (wrapperSize / deltaX);
+      // if 3d isn't available we will use left to move
+      if (_this.itemsListRef) {
+        ['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
+          _this.itemsListRef.style[prop] = CSSTranslate(position, '%', _this.props.axis);
+        });
+      }
+      return true;
+    });
+    _defineProperty(_this, "slideRight", function (positions) {
+      _this.moveTo(_this.state.firstItem - (typeof positions === 'number' ? positions : 1));
+    });
+    _defineProperty(_this, "slideLeft", function (positions) {
+      _this.moveTo(_this.state.firstItem + (typeof positions === 'number' ? positions : 1));
+    });
+    _defineProperty(_this, "moveTo", function (position) {
+      // position can't be lower than 0
+      position = position < 0 ? 0 : position;
+      // position can't be higher than last postion
+      position = position >= _this.state.lastPosition ? _this.state.lastPosition : position;
+      _this.setState({
+        firstItem: position
+      });
+    });
+    _this.state = {
+      selectedItem: _props.selectedItem,
+      swiping: false,
+      showArrows: false,
+      firstItem: 0,
+      visibleItems: 0,
+      lastPosition: 0
+    };
+    return _this;
+  }
+  _inherits(Thumbs, _Component);
+  return _createClass(Thumbs, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setupThumbs();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.selectedItem !== this.state.selectedItem) {
+        this.setState({
+          selectedItem: this.props.selectedItem,
+          firstItem: this.getFirstItem(this.props.selectedItem)
+        });
+      }
+      if (this.props.children === prevProps.children) {
+        return;
+      }
+
+      // This will capture any size changes for arrow adjustments etc.
+      // usually in the same render cycle so we don't see any flickers
+      this.updateSizes();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.destroyThumbs();
+    }
+  }, {
+    key: "setupThumbs",
+    value: function setupThumbs() {
+      // as the widths are calculated, we need to resize
+      // the carousel when the window is resized
+      getWindow().addEventListener('resize', this.updateSizes);
+      // issue #2 - image loading smaller
+      getWindow().addEventListener('DOMContentLoaded', this.updateSizes);
+
+      // when the component is rendered we need to calculate
+      // the container size to adjust the responsive behaviour
+      this.updateSizes();
+    }
+  }, {
+    key: "destroyThumbs",
+    value: function destroyThumbs() {
+      // removing listeners
+      getWindow().removeEventListener('resize', this.updateSizes);
+      getWindow().removeEventListener('DOMContentLoaded', this.updateSizes);
+    }
+  }, {
+    key: "getFirstItem",
+    value: function getFirstItem(selectedItem) {
+      var firstItem = selectedItem;
+      if (selectedItem >= this.state.lastPosition) {
+        firstItem = this.state.lastPosition;
+      }
+      if (selectedItem < this.state.firstItem + this.state.visibleItems) {
+        firstItem = this.state.firstItem;
+      }
+      if (selectedItem < this.state.firstItem) {
+        firstItem = selectedItem;
+      }
+      return firstItem;
+    }
+  }, {
+    key: "renderItems",
+    value: function renderItems() {
+      var _this2 = this;
+      return this.props.children.map(function (img, index) {
+        var itemClass = klass.ITEM(false, index === _this2.state.selectedItem);
+        var thumbProps = {
+          key: index,
+          ref: function ref(e) {
+            return _this2.setThumbsRef(e, index);
+          },
+          className: itemClass,
+          onClick: _this2.handleClickItem.bind(_this2, index, _this2.props.children[index]),
+          onKeyDown: _this2.handleClickItem.bind(_this2, index, _this2.props.children[index]),
+          'aria-label': "".concat(_this2.props.labels.item, " ").concat(index + 1),
+          style: {
+            width: _this2.props.thumbWidth
+          }
+        };
+        return /*#__PURE__*/React.createElement("li", _extends({}, thumbProps, {
+          role: "button",
+          tabIndex: 0
+        }), img);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      if (!this.props.children) {
+        return null;
+      }
+      var isSwipeable = Children.count(this.props.children) > 1;
+
+      // show left arrow?
+      var hasPrev = this.state.showArrows && this.state.firstItem > 0;
+      // show right arrow
+      var hasNext = this.state.showArrows && this.state.firstItem < this.state.lastPosition;
+      // obj to hold the transformations and styles
+      var itemListStyles = {};
+      var currentPosition = -this.state.firstItem * (this.state.itemSize || 0);
+      var transformProp = CSSTranslate(currentPosition, 'px', this.props.axis);
+      var transitionTime = this.props.transitionTime + 'ms';
+      itemListStyles = {
+        WebkitTransform: transformProp,
+        MozTransform: transformProp,
+        MsTransform: transformProp,
+        OTransform: transformProp,
+        transform: transformProp,
+        msTransform: transformProp,
+        WebkitTransitionDuration: transitionTime,
+        MozTransitionDuration: transitionTime,
+        MsTransitionDuration: transitionTime,
+        OTransitionDuration: transitionTime,
+        transitionDuration: transitionTime,
+        msTransitionDuration: transitionTime
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: klass.CAROUSEL(false)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: klass.WRAPPER(false),
+        ref: this.setItemsWrapperRef
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: klass.ARROW_PREV(!hasPrev),
+        onClick: function onClick() {
+          return _this3.slideRight();
+        },
+        "aria-label": this.props.labels.leftArrow
+      }), isSwipeable ? /*#__PURE__*/React.createElement(Swipe, {
+        tagName: "ul",
+        className: klass.SLIDER(false, this.state.swiping),
+        onSwipeLeft: this.slideLeft,
+        onSwipeRight: this.slideRight,
+        onSwipeMove: this.onSwipeMove,
+        onSwipeStart: this.onSwipeStart,
+        onSwipeEnd: this.onSwipeEnd,
+        style: itemListStyles,
+        innerRef: this.setItemsListRef,
+        allowMouseEvents: this.props.emulateTouch
+      }, this.renderItems()) : /*#__PURE__*/React.createElement("ul", {
+        className: klass.SLIDER(false, this.state.swiping),
+        ref: function ref(node) {
+          return _this3.setItemsListRef(node);
+        },
+        style: itemListStyles
+      }, this.renderItems()), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: klass.ARROW_NEXT(!hasNext),
+        onClick: function onClick() {
+          return _this3.slideLeft();
+        },
+        "aria-label": this.props.labels.rightArrow
+      })));
+    }
+  }]);
+}(Component);
+_defineProperty(Thumbs, "displayName", 'Thumbs');
+_defineProperty(Thumbs, "defaultProps", {
+  axis: 'horizontal',
+  labels: {
+    leftArrow: 'previous slide / item',
+    rightArrow: 'next slide / item',
+    item: 'slide item'
+  },
+  selectedItem: 0,
+  thumbWidth: 80,
+  transitionTime: 350
+});
+export { Thumbs as default };

package/esm/carousal/animations.js

@@ -0,0 +1,162 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { Children } from 'react';
+import CSSTranslate from '../../CSSTranslate';
+import { getPosition, setPosition } from './utils';
+/**
+ * Main animation handler for the default 'sliding' style animation
+ * @param props
+ * @param state
+ */
+export var slideAnimationHandler = function slideAnimationHandler(props, state) {
+  var returnStyles = {};
+  var selectedItem = state.selectedItem;
+  var previousItem = selectedItem;
+  var lastPosition = Children.count(props.children) - 1;
+  var needClonedSlide = props.infiniteLoop && (selectedItem < 0 || selectedItem > lastPosition);
+
+  // Handle list position if it needs a clone
+  if (needClonedSlide) {
+    if (previousItem < 0) {
+      if (props.centerMode && props.centerSlidePercentage && props.axis === 'horizontal') {
+        returnStyles.itemListStyle = setPosition(-(lastPosition + 2) * props.centerSlidePercentage - (100 - props.centerSlidePercentage) / 2, props.axis);
+      } else {
+        returnStyles.itemListStyle = setPosition(-(lastPosition + 2) * 100, props.axis);
+      }
+    } else if (previousItem > lastPosition) {
+      returnStyles.itemListStyle = setPosition(0, props.axis);
+    }
+    return returnStyles;
+  }
+  var currentPosition = getPosition(selectedItem, props);
+
+  // if 3d is available, let's take advantage of the performance of transform
+  var transformProp = CSSTranslate(currentPosition, '%', props.axis);
+  var transitionTime = props.transitionTime + 'ms';
+  returnStyles.itemListStyle = {
+    WebkitTransform: transformProp,
+    msTransform: transformProp,
+    OTransform: transformProp,
+    transform: transformProp
+  };
+  if (!state.swiping) {
+    returnStyles.itemListStyle = _extends({}, returnStyles.itemListStyle, {
+      WebkitTransitionDuration: transitionTime,
+      MozTransitionDuration: transitionTime,
+      OTransitionDuration: transitionTime,
+      transitionDuration: transitionTime,
+      msTransitionDuration: transitionTime
+    });
+  }
+  return returnStyles;
+};
+
+/**
+ * Swiping animation handler for the default 'sliding' style animation
+ * @param delta
+ * @param props
+ * @param state
+ * @param setState
+ */
+export var slideSwipeAnimationHandler = function slideSwipeAnimationHandler(delta, props, state, setState) {
+  var returnStyles = {};
+  var isHorizontal = props.axis === 'horizontal';
+  var childrenLength = Children.count(props.children);
+  var initialBoundry = 0;
+  var currentPosition = getPosition(state.selectedItem, props);
+  var finalBoundry = props.infiniteLoop ? getPosition(childrenLength - 1, props) - 100 : getPosition(childrenLength - 1, props);
+  var axisDelta = isHorizontal ? delta.x : delta.y;
+  var handledDelta = axisDelta;
+
+  // prevent user from swiping left out of boundaries
+  if (currentPosition === initialBoundry && axisDelta > 0) {
+    handledDelta = 0;
+  }
+
+  // prevent user from swiping right out of boundaries
+  if (currentPosition === finalBoundry && axisDelta < 0) {
+    handledDelta = 0;
+  }
+  var position = currentPosition + 100 / (state.itemSize / handledDelta);
+  var hasMoved = Math.abs(axisDelta) > props.swipeScrollTolerance;
+  if (props.infiniteLoop && hasMoved) {
+    // When allowing infinite loop, if we slide left from position 0 we reveal the cloned last slide that appears before it
+    // if we slide even further we need to jump to other side so it can continue - and vice versa for the last slide
+    if (state.selectedItem === 0 && position > -100) {
+      position -= childrenLength * 100;
+    } else if (state.selectedItem === childrenLength - 1 && position < -childrenLength * 100) {
+      position += childrenLength * 100;
+    }
+  }
+  if (!props.preventMovementUntilSwipeScrollTolerance || hasMoved || state.swipeMovementStarted) {
+    if (!state.swipeMovementStarted) {
+      setState({
+        swipeMovementStarted: true
+      });
+    }
+    returnStyles.itemListStyle = setPosition(position, props.axis);
+  }
+
+  //allows scroll if the swipe was within the tolerance
+  if (hasMoved && !state.cancelClick) {
+    setState({
+      cancelClick: true
+    });
+  }
+  return returnStyles;
+};
+
+/**
+ * Default 'sliding' style animination handler for when a swipe action stops.
+ * @param props
+ * @param state
+ */
+export var slideStopSwipingHandler = function slideStopSwipingHandler(props, state) {
+  var currentPosition = getPosition(state.selectedItem, props);
+  var itemListStyle = setPosition(currentPosition, props.axis);
+  return {
+    itemListStyle: itemListStyle
+  };
+};
+
+/**
+ * Main animation handler for the default 'fade' style animation
+ * @param props
+ * @param state
+ */
+export var fadeAnimationHandler = function fadeAnimationHandler(props, state) {
+  var transitionTime = props.transitionTime + 'ms';
+  var transitionTimingFunction = 'ease-in-out';
+  var slideStyle = {
+    position: 'absolute',
+    display: 'block',
+    zIndex: -2,
+    minHeight: '100%',
+    opacity: 0,
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    transitionTimingFunction: transitionTimingFunction,
+    msTransitionTimingFunction: transitionTimingFunction,
+    MozTransitionTimingFunction: transitionTimingFunction,
+    WebkitTransitionTimingFunction: transitionTimingFunction,
+    OTransitionTimingFunction: transitionTimingFunction
+  };
+  if (!state.swiping) {
+    slideStyle = _extends({}, slideStyle, {
+      WebkitTransitionDuration: transitionTime,
+      MozTransitionDuration: transitionTime,
+      OTransitionDuration: transitionTime,
+      transitionDuration: transitionTime,
+      msTransitionDuration: transitionTime
+    });
+  }
+  return {
+    slideStyle: slideStyle,
+    selectedStyle: _extends({}, slideStyle, {
+      opacity: 1,
+      position: 'relative'
+    }),
+    prevStyle: _extends({}, slideStyle)
+  };
+};