@helpdice/ui 1.7.4 → 1.7.7

package/esm/button/button.compact.js

@@ -1,7 +1,14 @@
 import React, { memo } from 'react';
 import Button from './button';
+// import { useTheme } from '@helpdice/theme';
+// import { getButtonColors } from './styles';
+
+// import useScale from 'components/use-scale';
+
 var CompactButton = function CompactButton(_ref) {
-  var _ref$to = _ref.to,
+  var _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$to = _ref.to,
     to = _ref$to === void 0 ? '/' : _ref$to,
     children = _ref.children,
     iconRight = _ref.iconRight,
@@ -13,57 +20,94 @@ var CompactButton = function CompactButton(_ref) {
     a = _ref.a,
     target = _ref.target,
     onClick = _ref.onClick;
+  // const theme = useTheme();
+  // const { SCALES } = useScale();
+  // const [paddingLeft, paddingRight] = [
+  //   auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
+  //   auto ? SCALES.pr(1.15) : SCALES.pr(1.375),
+  // ]
+  // const { bg, border, color } = useMemo(
+  //       () => getButtonColors(theme.palette, {
+  //         color: _color
+  //       }),
+  //       [theme.palette],
+  //     )
   if (a) {
-    return /*#__PURE__*/React.createElement("a", {
-      style: {
-        all: 'unset',
-        boxSizing: 'border-box',
-        display: 'inline-block',
-        lineHeight: 'calc(2.5* 16px)',
-        fontWeight: '400',
-        fontSize: 'calc(0.875* 16px)',
-        textAlign: 'center',
-        whiteSpace: 'nowrap',
-        position: 'relative',
-        overflow: 'hidden',
-        color: '#666',
-        backgroundColor: '#fff',
-        cursor: 'pointer',
-        minWidth: 'min-content',
-        width: 'auto',
-        height: 'calc(2.5* 16px)',
-        padding: '0 calc(0.69* 16px) 0 calc(0.69* 16px)',
-        margin: 0,
-        '--helpdice-ui-button-height': 'calc(2.5* 16px)',
-        '--helpdice-ui-button-icon-padding': 'calc(0.4362* 16px)'
+    return /*#__PURE__*/React.createElement(Button, {
+      icon: icon,
+      style: style,
+      type: type,
+      onClick: function onClick() {
+        return window.open(to, target);
       },
-      href: to,
-      target: target
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        position: 'absolute',
-        right: 'auto',
-        left: 'var(--helpdice-ui-button-icon-padding)',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        color: 'var(--helpdice-ui-button-color)',
-        zIndex: 1
-      }
-    }, icon), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'inline-flex',
-        position: 'relative',
-        zIndex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        textAlign: 'center',
-        lineHeight: 'inherit',
-        paddingLeft: icon ? 'calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding)* .5)' : 0
-      }
-    }, children));
+      auto: true,
+      scale: scale,
+      px: 0.6,
+      iconRight: iconRight
+    }, children)
+    // <a
+    //     style={
+    //         {
+    //             all: 'unset',
+    //             boxSizing: 'border-box',
+    //             display: 'inline-block',
+    //             lineHeight: 'calc(2.5* 16px)',
+    //             fontWeight: '400',
+    //             fontSize: 'calc(0.875* 16px)',
+    //             textAlign: 'center',
+    //             whiteSpace: 'nowrap',
+    //             position: 'relative',
+    //             overflow: 'hidden',
+    //             color: color,
+    //             backgroundColor: bg,
+    //             border: `1px solid ${border}`,
+    //             cursor: 'pointer',
+    //             '--helpdice-ui-button-icon-padding': `${SCALES.pl(0.727)}`,
+    // '--helpdice-ui-button-height': `${SCALES.height(2.5)}`,
+    // '--helpdice-ui-button-color':`${color}`,
+    // '--helpdice-ui-button-bg': `${bg}`,
+    // minWidth: `${auto ? 'min-content' : SCALES.width(10.5)}`,
+    // width: `${auto ? 'auto' : 'initial'}`,
+    // height: `${SCALES.height(2.5)}`,
+    // padding:` ${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft}`,
+    // margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
+    //         } as React.CSSProperties
+    //     }
+    //     href={to}
+    //     target={target}
+    // >
+    //     <span
+    //         style={{
+    //             position: 'absolute',
+    //             right: 'auto',
+    //             left: 'var(--helpdice-ui-button-icon-padding)',
+    //             top: '50%',
+    //             transform: 'translateY(-50%)',
+    //             display: 'flex',
+    //             justifyContent: 'center',
+    //             alignItems: 'center',
+    //             color: 'var(--helpdice-ui-button-color)',
+    //             zIndex: 1
+    //         }}
+    //     >
+    //         {icon}
+    //     </span>
+    //     <div
+    //         style={{
+    //             display: 'inline-flex',
+    //             position: 'relative',
+    //             zIndex: 1,
+    //             justifyContent: 'center',
+    //             alignItems: 'center',
+    //             textAlign: 'center',
+    //             lineHeight: 'inherit',
+    //             paddingLeft: icon ? 'calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding)* .5)' : 0
+    //         }}
+    //     >
+    //         {children}
+    //     </div>
+    // </a>
+    ;
   }
   return /*#__PURE__*/React.createElement(Button, {
     icon: icon,

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 };