@helpdice/ui 2.5.8-beta.0 → 2.5.8

package/dist/carousal/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var require$$0 = require('react-is');
+var jsxRuntime = require('react/jsx-runtime');
 var theme = require('@helpdice/theme');
 var icons = require('@helpdice/icons');
 
@@ -92,15 +93,6 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
 function _getPrototypeOf(t) {
   return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
     return t.__proto__ || Object.getPrototypeOf(t);
@@ -1927,14 +1919,16 @@ var ReactSwipe = /*#__PURE__*/function (_Component) {
         _this$props.innerRef;
         _this$props.tolerance;
         var props = _objectWithoutProperties(_this$props, _excluded$4);
-      return /*#__PURE__*/React.createElement(this.props.tagName, _extends({
+      return /*#__PURE__*/jsxRuntime.jsx(this.props.tagName, _objectSpread2(_objectSpread2({
         ref: this._setSwiperRef,
         onMouseDown: this._onMouseDown,
         onTouchStart: this._handleSwipeStart,
         onTouchEnd: this._handleSwipeEnd,
         className: className,
         style: style
-      }, props), children);
+      }, props), {}, {
+        children: children
+      }));
     }
   }]);
 }(React.Component);
@@ -2302,11 +2296,13 @@ var withScale = function withScale(Render) {
       getScaleProps: generateGetScaleProps(props),
       getAllScaleProps: generateGetAllScaleProps(props)
     };
-    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
-      value: value
-    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
-      ref: ref
-    }), children));
+    return /*#__PURE__*/jsxRuntime.jsx(ScaleContext.Provider, {
+      value: value,
+      children: /*#__PURE__*/jsxRuntime.jsx(Render, _objectSpread2(_objectSpread2({}, props), {}, {
+        ref: ref,
+        children: children
+      }))
+    });
   });
   ScaleFC.displayName = "Scale".concat(Render.displayName || 'Wrapper');
   return ScaleFC;
@@ -2334,35 +2330,40 @@ var ButtonDrip = function ButtonDrip(_ref) {
       dripRef.current.removeEventListener('animationend', onCompleted);
     };
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: dripRef,
-    className: "jsx-3424889537" + " " + "drip"
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    style: {
-      top: top,
-      left: left
-    },
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("g", {
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd",
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: color,
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "100%",
-    height: "100%",
-    rx: "10",
-    className: "jsx-3424889537"
-  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3424889537"
-  }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
+    className: "jsx-3424889537" + " " + "drip",
+    children: [/*#__PURE__*/jsxRuntime.jsx("svg", {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      style: {
+        top: top,
+        left: left
+      },
+      className: "jsx-3424889537",
+      children: /*#__PURE__*/jsxRuntime.jsx("g", {
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd",
+        className: "jsx-3424889537",
+        children: /*#__PURE__*/jsxRuntime.jsx("g", {
+          fill: color,
+          className: "jsx-3424889537",
+          children: /*#__PURE__*/jsxRuntime.jsx("rect", {
+            width: "100%",
+            height: "100%",
+            rx: "10",
+            className: "jsx-3424889537"
+          })
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3424889537",
+      children: ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"
+    })]
+  });
 };
 ButtonDrip.displayName = 'ButtonDrip';
 
@@ -2394,35 +2395,41 @@ var LoadingComponent = function LoadingComponent(_ref) {
   var bgColor = React.useMemo(function () {
     return getIconBgColor(type, theme$1.palette, color);
   }, [type, theme$1.palette, color]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
-  }, children && /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-  }, children), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2201634259",
-    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]
-  }, ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme$1.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading",
+      children: [children && /*#__PURE__*/jsxRuntime.jsx("label", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]),
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2201634259",
+      dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio],
+      children: ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme$1.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")
+    })]
+  }));
 };
 LoadingComponent.displayName = 'Loading';
 var Loading = withScale(LoadingComponent);
 
 var ButtonLoading = function ButtonLoading(_ref) {
   var color = _ref.color;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-212623367" + " " + "btn-loading"
-  }, /*#__PURE__*/React.createElement(Loading, {
-    color: color
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "212623367"
-  }, ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "jsx-212623367" + " " + "btn-loading",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Loading, {
+      color: color
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "212623367",
+      children: ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"
+    })]
+  });
 };
 ButtonLoading.displayName = 'ButtonLoading';
 
@@ -2439,11 +2446,13 @@ var ButtonIcon = function ButtonIcon(_ref) {
     right: isRight,
     single: isSingle
   }, className);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2467502931"
-  }, ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"));
+  return /*#__PURE__*/jsxRuntime.jsxs("span", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2467502931",
+      children: ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"
+    })]
+  }));
 };
 ButtonIcon.displayName = 'ButtonIcon';
 
@@ -2454,23 +2463,30 @@ var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, childre
   var isRight = Boolean(iconRight);
   var paddingForAutoMode = auto ? "calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding) * .5)" : 0;
   var classes = theme.useClasses('text', isRight ? 'right' : 'left');
-  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
-    className: "text"
-  }, children);
+  if (!hasIcon) return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "text",
+    children: children
+  });
   if (React.Children.count(children) === 0) {
-    return /*#__PURE__*/React.createElement(ButtonIcon, {
+    return /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
       isRight: isRight,
-      isSingle: true
-    }, hasIcon);
+      isSingle: true,
+      children: hasIcon
+    });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
-    isRight: isRight
-  }, hasIcon), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3568181479",
-    dynamic: [paddingForAutoMode, paddingForAutoMode]
-  }, ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}"))));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
+      isRight: isRight,
+      children: hasIcon
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || ""),
+      children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "3568181479",
+        dynamic: [paddingForAutoMode, paddingForAutoMode],
+        children: ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}")
+      })]
+    })]
+  });
 };
 var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
   if (!config.isButtonGroup) return props;
@@ -2874,87 +2890,61 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
 
   // If shadow provided is string then value other default
   var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
-  return /*#__PURE__*/React.createElement(React.Fragment, null, to ? /*#__PURE__*/React.createElement("a", _extends({
-    href: to
-  }, props, {
-    className: _JSXStyle.dynamic([["331518307", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', 'btn-link', className) || "")
-  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
-    color: color
-  }), childrenWithIcon) : /*#__PURE__*/React.createElement("button", _extends({
-    ref: buttonRef,
-    type: type,
-    disabled: disabled,
-    onClick: clickHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["331518307", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || "")
-  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
-    color: color
-  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
-    x: dripX,
-    y: dripY,
-    color: dripColor,
-    onCompleted: dripCompletedHandle
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "331518307",
-    dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']
-  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(shadow ? 'transparent' : border, ";cursor:").concat(cursor !== null && cursor !== void 0 ? cursor : 'pointer', ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(btnShadow, ";}.btn-link.__jsx-style-dynamic-selector{display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [to ? /*#__PURE__*/jsxRuntime.jsxs("a", _objectSpread2(_objectSpread2({
+      href: to
+    }, props), {}, {
+      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', 'btn-link', className) || ""),
+      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
+        color: color
+      }), childrenWithIcon]
+    })) : /*#__PURE__*/jsxRuntime.jsxs("button", _objectSpread2(_objectSpread2({
+      ref: buttonRef,
+      type: type,
+      disabled: disabled,
+      onClick: clickHandler
+    }, props), {}, {
+      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || ""),
+      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
+        color: color
+      }), childrenWithIcon, dripShow && /*#__PURE__*/jsxRuntime.jsx(ButtonDrip, {
+        x: dripX,
+        y: dripY,
+        color: dripColor,
+        onCompleted: dripCompletedHandle
+      })]
+    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "612376042",
+      dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px'],
+      children: ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(shadow ? 'transparent' : border, ";cursor:").concat(cursor !== null && cursor !== void 0 ? cursor : 'pointer', ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(btnShadow, ";}.btn-link.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")
+    })]
+  });
 });
 ButtonComponent.displayName = 'Button';
 var Button = withScale(ButtonComponent);
 
-// import { useTheme } from '@helpdice/theme';
-
-var CompactButton = function CompactButton(_ref) {
-  _ref.color;
-    var children = _ref.children,
-    iconRight = _ref.iconRight,
-    icon = _ref.icon,
-    _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? 2 / 3 : _ref$scale,
-    type = _ref.type,
-    style = _ref.style,
-    onClick = _ref.onClick,
-    to = _ref.to;
+var CompactButton = function CompactButton(props) {
   // const theme = useTheme();
-  return /*#__PURE__*/React.createElement(Button, {
-    to: to,
-    icon: icon,
-    style: style,
-    type: type,
-    onClick: onClick,
-    auto: true,
-    scale: scale,
-    px: 0.6,
-    iconRight: iconRight
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
+    scale: 2 / 3,
+    px: 0.6
+  }, _objectSpread2({
+    auto: true
+  }, props)), {}, {
+    children: props.children
+  }));
 };
 var IconButton = /*#__PURE__*/React.memo(CompactButton);
 
-// import { useTheme } from '@helpdice/theme';
-
-var SmallButton = function SmallButton(_ref) {
-  _ref.color;
-    var children = _ref.children,
-    iconRight = _ref.iconRight,
-    icon = _ref.icon,
-    _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? 2 / 3 : _ref$scale,
-    type = _ref.type,
-    style = _ref.style,
-    onClick = _ref.onClick,
-    to = _ref.to;
+var SmallButton = function SmallButton(props) {
   // const theme = useTheme();
-  return /*#__PURE__*/React.createElement(Button, {
-    to: to,
-    icon: icon,
-    style: style,
-    type: type,
-    onClick: onClick,
+  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
     auto: true,
-    scale: scale,
-    px: 0.6,
-    iconRight: iconRight
-  }, children);
+    scale: 2 / 3,
+    px: 0.6
+  }, props), {}, {
+    children: props.children
+  }));
 };
 var SmallButton$1 = /*#__PURE__*/React.memo(SmallButton);
 
@@ -3158,13 +3148,15 @@ var Thumbs = /*#__PURE__*/function (_Component) {
             width: _this2.props.thumbWidth
           }
         };
-        return /*#__PURE__*/React.createElement("li", _extends({}, thumbProps, {
+        return /*#__PURE__*/jsxRuntime.jsxs("li", _objectSpread2(_objectSpread2({}, thumbProps), {}, {
           role: "button",
           tabIndex: 0,
-          className: "jsx-2625056898" + " " + (thumbProps && thumbProps.className != null && thumbProps.className || "")
-        }), img, /*#__PURE__*/React.createElement(_JSXStyle, {
-          id: "2625056898"
-        }, ".thumb.jsx-2625056898{-webkit-transition:border 0.15s ease-in;transition:border 0.15s ease-in;display:inline-block;margin-right:6px;margin-bottom:0 !important;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px;}.thumb.jsx-2625056898:focus{border:3px solid #ccc;outline:none;}.thumb.selected.jsx-2625056898,.thumb.jsx-2625056898:hover{border:3px solid #0099ff;}.thumb.jsx-2625056898 img.jsx-2625056898{vertical-align:top;}"));
+          className: "jsx-2625056898" + " " + (thumbProps && thumbProps.className != null && thumbProps.className || ""),
+          children: [img, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+            id: "2625056898",
+            children: ".thumb.jsx-2625056898{-webkit-transition:border 0.15s ease-in;transition:border 0.15s ease-in;display:inline-block;margin-right:6px;margin-bottom:0 !important;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px;}.thumb.jsx-2625056898:focus{border:3px solid #ccc;outline:none;}.thumb.selected.jsx-2625056898,.thumb.jsx-2625056898:hover{border:3px solid #0099ff;}.thumb.jsx-2625056898 img.jsx-2625056898{vertical-align:top;}"
+          })]
+        }));
       });
     }
   }, {
@@ -3199,66 +3191,71 @@ var Thumbs = /*#__PURE__*/function (_Component) {
         transitionDuration: transitionTime,
         msTransitionDuration: transitionTime
       };
-      return /*#__PURE__*/React.createElement("div", {
-        className: "jsx-3452014152" + " " + (klass.CAROUSEL(false) || "")
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: this.setItemsWrapperRef,
-        className: "jsx-3452014152" + " " + (klass.WRAPPER(false) || "")
-      }, /*#__PURE__*/React.createElement(Button, {
-        scale: 2 / 3,
-        auto: true,
-        px: 0.6,
-        type: "button",
-        style: {
-          position: 'absolute',
-          zIndex: '2',
-          left: 0
-        },
-        iconRight: /*#__PURE__*/React.createElement(icons.ChevronLeft, null),
-        className: klass.ARROW_PREV(!hasPrev),
-        onClick: function onClick() {
-          return _this3.slideRight();
-        },
-        "aria-label": this.props.labels.leftArrow
-      }), isSwipeable ? /*#__PURE__*/React.createElement(ReactSwipe, {
-        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: _objectSpread2({
-          display: 'flex',
-          margin: '20px 45px'
-        }, itemListStyles),
-        innerRef: this.setItemsListRef,
-        allowMouseEvents: this.props.emulateTouch
-      }, this.renderItems()) : /*#__PURE__*/React.createElement("ul", {
-        ref: function ref(node) {
-          return _this3.setItemsListRef(node);
-        },
-        style: itemListStyles,
-        className: "jsx-3452014152" + " " + (klass.SLIDER(false, this.state.swiping) || "")
-      }, this.renderItems()), /*#__PURE__*/React.createElement(Button, {
-        type: "button",
-        scale: 2 / 3,
-        auto: true,
-        px: 0.6,
-        style: {
-          position: 'absolute',
-          zIndex: '2',
-          right: 0
-        },
-        iconRight: /*#__PURE__*/React.createElement(icons.ChevronRight, null),
-        className: klass.ARROW_NEXT(!hasNext),
-        onClick: function onClick() {
-          return _this3.slideLeft();
-        },
-        "aria-label": this.props.labels.rightArrow
-      })), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "3452014152"
-      }, ".thumbs-wrapper.jsx-3452014152{margin:0;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.thumbs.jsx-3452014152{-webkit-transition:all 0.15s ease-in;transition:all 0.15s ease-in;position:relative;list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;white-space:nowrap;margin:0 !important;}.control-arrow.control-prev.jsx-3452014152{left:0;}.control-arrow.control-prev.jsx-3452014152:before{border-right:8px solid #fff;}.control-arrow.control-next.jsx-3452014152{right:0;}.control-arrow.control-next.jsx-3452014152:before{border-left:8px solid #fff;}"));
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "jsx-3452014152" + " " + (klass.CAROUSEL(false) || ""),
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          ref: this.setItemsWrapperRef,
+          className: "jsx-3452014152" + " " + (klass.WRAPPER(false) || ""),
+          children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+            scale: 2 / 3,
+            auto: true,
+            px: 0.6,
+            type: "button",
+            style: {
+              position: 'absolute',
+              zIndex: '2',
+              left: 0
+            },
+            iconRight: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {}),
+            className: klass.ARROW_PREV(!hasPrev),
+            onClick: function onClick() {
+              return _this3.slideRight();
+            },
+            "aria-label": this.props.labels.leftArrow
+          }), isSwipeable ? /*#__PURE__*/jsxRuntime.jsx(ReactSwipe, {
+            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: _objectSpread2({
+              display: 'flex',
+              margin: '20px 45px'
+            }, itemListStyles),
+            innerRef: this.setItemsListRef,
+            allowMouseEvents: this.props.emulateTouch,
+            children: this.renderItems()
+          }) : /*#__PURE__*/jsxRuntime.jsx("ul", {
+            ref: function ref(node) {
+              return _this3.setItemsListRef(node);
+            },
+            style: itemListStyles,
+            className: "jsx-3452014152" + " " + (klass.SLIDER(false, this.state.swiping) || ""),
+            children: this.renderItems()
+          }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+            type: "button",
+            scale: 2 / 3,
+            auto: true,
+            px: 0.6,
+            style: {
+              position: 'absolute',
+              zIndex: '2',
+              right: 0
+            },
+            iconRight: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {}),
+            className: klass.ARROW_NEXT(!hasNext),
+            onClick: function onClick() {
+              return _this3.slideLeft();
+            },
+            "aria-label": this.props.labels.rightArrow
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+          id: "3452014152",
+          children: ".thumbs-wrapper.jsx-3452014152{margin:0;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.thumbs.jsx-3452014152{-webkit-transition:all 0.15s ease-in;transition:all 0.15s ease-in;position:relative;list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;white-space:nowrap;margin:0 !important;}.control-arrow.control-prev.jsx-3452014152{left:0;}.control-arrow.control-prev.jsx-3452014152:before{border-right:8px solid #fff;}.control-arrow.control-next.jsx-3452014152{right:0;}.control-arrow.control-next.jsx-3452014152:before{border-left:8px solid #fff;}"
+        })]
+      });
     }
   }]);
 }(React.Component);
@@ -3334,14 +3331,17 @@ var Arrow = function Arrow(_ref) {
     label = _ref.label;
   var isPrev = direction === 'prev';
   var arrowClassName = isPrev ? klass.ARROW_PREV(!enabled) : klass.ARROW_NEXT(!enabled);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-label": label,
-    onClick: onClickHandler,
-    className: "jsx-4058608807" + " " + (arrowClassName || "")
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4058608807"
-  }, ".control-arrow.jsx-4058608807{position:absolute;z-index:2;top:0;bottom:0;background:none;border:0;font-size:26px;cursor:pointer;opacity:0.4;-webkit-transition:all 0.25s ease-in;transition:all 0.25s ease-in;margin-top:-13px;padding:5px;color:#fff;}.control-arrow.jsx-4058608807:hover{background:rgba(0,0,0,0.2);opacity:1;}.control-arrow.jsx-4058608807:hover,.control-arrow.jsx-4058608807:focus{opacity:1;}.control-arrow.control-arrow.jsx-4058608807:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:'';}.control-arrow.control-disabled.jsx-4058608807{opacity:0;cursor:inherit;display:none;}.control-arrow.control-prev.jsx-4058608807{left:0;}.control-arrow.control-prev.jsx-4058608807:before{border-right:8px solid #fff;}.control-arrow.control-next.jsx-4058608807{right:0;}.control-arrow.control-next.jsx-4058608807:before{border-left:8px solid #fff;}"));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+      type: "button",
+      "aria-label": label,
+      onClick: onClickHandler,
+      className: "jsx-4058608807" + " " + (arrowClassName || "")
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "4058608807",
+      children: ".control-arrow.jsx-4058608807{position:absolute;z-index:2;top:0;bottom:0;background:none;border:0;font-size:26px;cursor:pointer;opacity:0.4;-webkit-transition:all 0.25s ease-in;transition:all 0.25s ease-in;margin-top:-13px;padding:5px;color:#fff;}.control-arrow.jsx-4058608807:hover{background:rgba(0,0,0,0.2);opacity:1;}.control-arrow.jsx-4058608807:hover,.control-arrow.jsx-4058608807:focus{opacity:1;}.control-arrow.control-arrow.jsx-4058608807:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:'';}.control-arrow.control-disabled.jsx-4058608807{opacity:0;cursor:inherit;display:none;}.control-arrow.control-prev.jsx-4058608807{left:0;}.control-arrow.control-prev.jsx-4058608807:before{border-right:8px solid #fff;}.control-arrow.control-next.jsx-4058608807{right:0;}.control-arrow.control-next.jsx-4058608807:before{border-left:8px solid #fff;}"
+    })]
+  });
 };
 
 var Indicator = function Indicator(_ref) {
@@ -3352,57 +3352,65 @@ var Indicator = function Indicator(_ref) {
     type = _ref.type;
   switch (type) {
     case 'line':
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
-        onClick: onClickHandler,
-        onKeyDown: onClickHandler,
-        value: index,
-        key: index,
-        role: "button",
-        tabIndex: 0,
-        "aria-label": "".concat(label, " ").concat(index + 1),
-        className: "jsx-110677664" + " " + (klass.DOT(isSelected) || "")
-      }), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "110677664"
-      }, ".dot.jsx-110677664{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;width:14px;height:2px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-110677664,.dot.jsx-110677664:hover{opacity:1;}"));
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("li", {
+          onClick: onClickHandler,
+          onKeyDown: onClickHandler,
+          value: index,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "".concat(label, " ").concat(index + 1),
+          className: "jsx-110677664" + " " + (klass.DOT(isSelected) || "")
+        }, index), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+          id: "110677664",
+          children: ".dot.jsx-110677664{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;width:14px;height:2px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-110677664,.dot.jsx-110677664:hover{opacity:1;}"
+        })]
+      });
     case 'square':
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
-        onClick: onClickHandler,
-        onKeyDown: onClickHandler,
-        value: index,
-        key: index,
-        role: "button",
-        tabIndex: 0,
-        "aria-label": "".concat(label, " ").concat(index + 1),
-        className: "jsx-157344968" + " " + (klass.DOT(isSelected) || "")
-      }), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "157344968"
-      }, ".dot.jsx-157344968{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-157344968,.dot.jsx-157344968:hover{opacity:1;}"));
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("li", {
+          onClick: onClickHandler,
+          onKeyDown: onClickHandler,
+          value: index,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "".concat(label, " ").concat(index + 1),
+          className: "jsx-157344968" + " " + (klass.DOT(isSelected) || "")
+        }, index), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+          id: "157344968",
+          children: ".dot.jsx-157344968{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-157344968,.dot.jsx-157344968:hover{opacity:1;}"
+        })]
+      });
     case 'pill':
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
-        onClick: onClickHandler,
-        onKeyDown: onClickHandler,
-        value: index,
-        key: index,
-        role: "button",
-        tabIndex: 0,
-        "aria-label": "".concat(label, " ").concat(index + 1),
-        className: "jsx-2836895747" + " " + (klass.DOT(isSelected) || "")
-      }), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "2836895747"
-      }, ".dot.jsx-2836895747{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:25px;width:20px;height:5px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-2836895747,.dot.jsx-2836895747:hover{opacity:1;}"));
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("li", {
+          onClick: onClickHandler,
+          onKeyDown: onClickHandler,
+          value: index,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "".concat(label, " ").concat(index + 1),
+          className: "jsx-2836895747" + " " + (klass.DOT(isSelected) || "")
+        }, index), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+          id: "2836895747",
+          children: ".dot.jsx-2836895747{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:25px;width:20px;height:5px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-2836895747,.dot.jsx-2836895747:hover{opacity:1;}"
+        })]
+      });
     default:
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
-        onClick: onClickHandler,
-        onKeyDown: onClickHandler,
-        value: index,
-        key: index,
-        role: "button",
-        tabIndex: 0,
-        "aria-label": "".concat(label, " ").concat(index + 1),
-        className: "jsx-3056554148" + " " + (klass.DOT(isSelected) || "")
-      }), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "3056554148"
-      }, ".dot.jsx-3056554148{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-3056554148,.dot.jsx-3056554148:hover{opacity:1;}"));
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("li", {
+          onClick: onClickHandler,
+          onKeyDown: onClickHandler,
+          value: index,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "".concat(label, " ").concat(index + 1),
+          className: "jsx-3056554148" + " " + (klass.DOT(isSelected) || "")
+        }, index), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+          id: "3056554148",
+          children: ".dot.jsx-3056554148{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-3056554148,.dot.jsx-3056554148:hover{opacity:1;}"
+        })]
+      });
   }
 };
 
@@ -4020,14 +4028,16 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
           onClick: _this3.handleClickItem.bind(_this3, index, item),
           style: style
         };
-        return /*#__PURE__*/React.createElement("li", _extends({}, slideProps, {
-          className: "jsx-4120978495" + " " + (slideProps && slideProps.className != null && slideProps.className || "")
-        }), _this3.props.renderItem(item, {
-          isSelected: index === _this3.state.selectedItem,
-          isPrevious: index === _this3.state.previousItem
-        }), /*#__PURE__*/React.createElement(_JSXStyle, {
-          id: "4120978495"
-        }, ".slide.jsx-4120978495{min-width:100%;margin:0;position:relative;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}img.jsx-4120978495{width:100%;vertical-align:top;border:0;}iframe.jsx-4120978495{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0;}.legend.jsx-4120978495{-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;}.slide.jsx-4120978495 .legend.jsx-4120978495{opacity:1;}"));
+        return /*#__PURE__*/jsxRuntime.jsxs("li", _objectSpread2(_objectSpread2({}, slideProps), {}, {
+          className: "jsx-4120978495" + " " + (slideProps && slideProps.className != null && slideProps.className || ""),
+          children: [_this3.props.renderItem(item, {
+            isSelected: index === _this3.state.selectedItem,
+            isPrevious: index === _this3.state.previousItem
+          }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+            id: "4120978495",
+            children: ".slide.jsx-4120978495{min-width:100%;margin:0;position:relative;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}img.jsx-4120978495{width:100%;vertical-align:top;border:0;}iframe.jsx-4120978495{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0;}.legend.jsx-4120978495{-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;}.slide.jsx-4120978495 .legend.jsx-4120978495{opacity:1;}"
+          })]
+        }));
       });
     }
   }, {
@@ -4043,13 +4053,15 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
       if (!showIndicators) {
         return null;
       }
-      return /*#__PURE__*/React.createElement("ul", {
-        className: "jsx-4140983776" + " " + "control-dots"
-      }, React.Children.map(children, function (_, index) {
-        return renderIndicator && renderIndicator(_this4.changeItem(index), index === _this4.state.selectedItem, index, labels.item, indicator);
-      }), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "4140983776"
-      }, ".control-dots.jsx-4140983776{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1;}"));
+      return /*#__PURE__*/jsxRuntime.jsxs("ul", {
+        className: "jsx-4140983776" + " " + "control-dots",
+        children: [React.Children.map(children, function (_, index) {
+          return renderIndicator && renderIndicator(_this4.changeItem(index), index === _this4.state.selectedItem, index, labels.item, indicator);
+        }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+          id: "4140983776",
+          children: ".control-dots.jsx-4140983776{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1;}"
+        })]
+      });
     }
   }, {
     key: "renderStatus",
@@ -4057,11 +4069,13 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
       if (!this.props.showStatus) {
         return null;
       }
-      return /*#__PURE__*/React.createElement("p", {
-        className: "jsx-2959489890" + " " + "carousel-status"
-      }, this.props.statusFormatter(this.state.selectedItem + 1, React.Children.count(this.props.children)), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "2959489890"
-      }, ".carousel-status.jsx-2959489890{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff;}"));
+      return /*#__PURE__*/jsxRuntime.jsxs("p", {
+        className: "jsx-2959489890" + " " + "carousel-status",
+        children: [this.props.statusFormatter(this.state.selectedItem + 1, React.Children.count(this.props.children)), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+          id: "2959489890",
+          children: ".carousel-status.jsx-2959489890{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff;}"
+        })]
+      });
     }
   }, {
     key: "renderThumbs",
@@ -4069,15 +4083,16 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
       if (!this.props.showThumbs || !this.props.children || React.Children.count(this.props.children) === 0) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(Thumbs, {
+      return /*#__PURE__*/jsxRuntime.jsx(Thumbs, {
         ref: this.setThumbsRef,
         onSelectItem: this.handleClickThumb,
         selectedItem: this.state.selectedItem,
         transitionTime: this.props.transitionTime,
         thumbWidth: this.props.thumbWidth,
         labels: this.props.labels,
-        emulateTouch: this.props.emulateTouch
-      }, this.props.renderThumbs(this.props.children));
+        emulateTouch: this.props.emulateTouch,
+        children: this.props.renderThumbs(this.props.children)
+      });
     }
   }, {
     key: "render",
@@ -4127,33 +4142,39 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
         });
         containerStyles.height = this.state.itemSize;
       }
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
         "aria-label": this.props.ariaLabel,
         ref: this.setCarouselWrapperRef,
         tabIndex: this.props.useKeyboardArrows ? 0 : undefined,
-        className: "jsx-535322850" + " " + (klass.ROOT(this.props.className) || "")
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: this.props.width
-        },
-        className: "jsx-535322850" + " " + (klass.CAROUSEL(true) || "")
-      }, this.renderControls(), this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow), /*#__PURE__*/React.createElement("div", {
-        style: containerStyles,
-        className: "jsx-535322850" + " " + (klass.WRAPPER(true, this.props.axis) || "")
-      }, isSwipeable ? /*#__PURE__*/React.createElement(ReactSwipe, _extends({
-        tagName: "ul",
-        innerRef: this.setListRef
-      }, swiperProps, {
-        allowMouseEvents: this.props.emulateTouch
-      }), this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone) : /*#__PURE__*/React.createElement("ul", {
-        ref: function ref(node) {
-          return _this5.setListRef(node);
-        },
-        style: this.state.itemListStyle || {},
-        className: "jsx-535322850" + " " + (klass.SLIDER(true, this.state.swiping) || "")
-      }, this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone)), this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow), this.renderStatus()), this.renderThumbs(), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "535322850"
-      }, ".carousel-root.jsx-535322850{outline:none;}.slider.jsx-535322850{margin:0 !important;padding:0;position:relative;list-style:none;width:100%;}.slider.jsx-535322850 .animated.jsx-535322850{-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}.carousel.jsx-535322850{position:relative;width:100%;}.carousel.jsx-535322850 img.jsx-535322850{width:100%;display:inline-block;pointer-events:none;}.carousel.jsx-535322850 .carousel.jsx-535322850{position:relative;}.carousel-slider.jsx-535322850{position:relative;margin:0;overflow:hidden;}.slider-wrapper.jsx-535322850{overflow:hidden;margin:auto;width:100%;-webkit-transition:height 0.15s ease-in;transition:height 0.15s ease-in;}"));
+        className: "jsx-535322850" + " " + (klass.ROOT(this.props.className) || ""),
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          style: {
+            width: this.props.width
+          },
+          className: "jsx-535322850" + " " + (klass.CAROUSEL(true) || ""),
+          children: [this.renderControls(), this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow), /*#__PURE__*/jsxRuntime.jsx("div", {
+            style: containerStyles,
+            className: "jsx-535322850" + " " + (klass.WRAPPER(true, this.props.axis) || ""),
+            children: isSwipeable ? /*#__PURE__*/jsxRuntime.jsxs(ReactSwipe, _objectSpread2(_objectSpread2({
+              tagName: "ul",
+              innerRef: this.setListRef
+            }, swiperProps), {}, {
+              allowMouseEvents: this.props.emulateTouch,
+              children: [this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone]
+            })) : /*#__PURE__*/jsxRuntime.jsxs("ul", {
+              ref: function ref(node) {
+                return _this5.setListRef(node);
+              },
+              style: this.state.itemListStyle || {},
+              className: "jsx-535322850" + " " + (klass.SLIDER(true, this.state.swiping) || ""),
+              children: [this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone]
+            })
+          }), this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow), this.renderStatus()]
+        }), this.renderThumbs(), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+          id: "535322850",
+          children: ".carousel-root.jsx-535322850{outline:none;}.slider.jsx-535322850{margin:0 !important;padding:0;position:relative;list-style:none;width:100%;}.slider.jsx-535322850 .animated.jsx-535322850{-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}.carousel.jsx-535322850{position:relative;width:100%;}.carousel.jsx-535322850 img.jsx-535322850{width:100%;display:inline-block;pointer-events:none;}.carousel.jsx-535322850 .carousel.jsx-535322850{position:relative;}.carousel-slider.jsx-535322850{position:relative;margin:0;overflow:hidden;}.slider-wrapper.jsx-535322850{overflow:hidden;margin:auto;width:100%;-webkit-transition:height 0.15s ease-in;transition:height 0.15s ease-in;}"
+        })]
+      });
     }
   }]);
 }(React.Component);
@@ -4179,7 +4200,7 @@ _defineProperty(Carousel, "defaultProps", {
   },
   preventMovementUntilSwipeScrollTolerance: false,
   renderArrowPrev: function renderArrowPrev(onClickHandler, hasPrev, label) {
-    return /*#__PURE__*/React.createElement(Arrow, {
+    return /*#__PURE__*/jsxRuntime.jsx(Arrow, {
       direction: "prev",
       onClickHandler: onClickHandler,
       enabled: hasPrev,
@@ -4187,7 +4208,7 @@ _defineProperty(Carousel, "defaultProps", {
     });
   },
   renderArrowNext: function renderArrowNext(onClickHandler, hasNext, label) {
-    return /*#__PURE__*/React.createElement(Arrow, {
+    return /*#__PURE__*/jsxRuntime.jsx(Arrow, {
       direction: "next",
       onClickHandler: onClickHandler,
       enabled: hasNext,
@@ -4195,7 +4216,7 @@ _defineProperty(Carousel, "defaultProps", {
     });
   },
   renderIndicator: function renderIndicator(onClickHandler, isSelected, index, label, type) {
-    return /*#__PURE__*/React.createElement(Indicator, {
+    return /*#__PURE__*/jsxRuntime.jsx(Indicator, {
       type: type,
       onClickHandler: onClickHandler,
       isSelected: isSelected,