@helpdice/ui 1.7.8 → 1.7.9

package/esm/carousal/main.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import(/* webpackChunkName: "carousel-component" */'./component').then(function (_ref) {
+  var Carousel = _ref["default"];
+  var DemoCarousel = function DemoCarousel() {
+    return /*#__PURE__*/React.createElement(Carousel, {
+      showArrows: true,
+      infiniteLoop: true,
+      autoPlay: true,
+      emulateTouch: true,
+      onClickItem: function onClickItem() {
+        var _console;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return (_console = console).log.apply(_console, ['onClickItem'].concat(args));
+      },
+      onChange: function onChange() {
+        var _console2;
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        return (_console2 = console).log.apply(_console2, ['onChange'].concat(args));
+      },
+      onClickThumb: function onClickThumb() {
+        var _console3;
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+        return (_console3 = console).log.apply(_console3, ['onClickThumb'].concat(args));
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+      src: "assets/1.jpeg"
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "legend"
+    }, "Legend 1")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+      src: "assets/2.jpeg"
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "legend"
+    }, "Legend 2")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+      src: "assets/3.jpeg"
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "legend"
+    }, "Legend 3")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+      src: "assets/4.jpeg"
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "legend"
+    }, "Legend 4")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+      src: "assets/5.jpeg"
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "legend"
+    }, "Legend 5")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+      src: "assets/6.jpeg"
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "legend"
+    }, "Legend 6")));
+  };
+  ReactDOM.render(/*#__PURE__*/React.createElement(DemoCarousel, null), document.querySelector('.demo-carousel'));
+});

package/esm/carousal/shims/document.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Document;
+export default _default;

package/esm/carousal/shims/document.js

@@ -0,0 +1,3 @@
+export default (function () {
+  return document;
+});

package/esm/carousal/shims/window.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Window & typeof globalThis;
+export default _default;

package/esm/carousal/shims/window.js

@@ -0,0 +1,3 @@
+export default (function () {
+  return window;
+});

package/esm/index.d.ts

@@ -120,3 +120,7 @@ export type { ReactiveDomReact } from './utils/layouts';
 export { default as CodeBlock } from './code-block';
 export { default as Skeleton } from './skeleton';
 export * from './login-with';
+export { default as Swipe } from './swipe';
+export type { SwipeProps } from './swipe';
+export { Carousel } from './carousal';
+export type { CarouselProps } from './carousal';

package/esm/index.js

@@ -78,4 +78,9 @@ export { default as CodeBlock } from './code-block';
 export { default as Skeleton } from './skeleton';
 
 // Social Logins
-export * from './login-with';
+export * from './login-with';
+
+// Swipe
+export { default as Swipe } from './swipe';
+// Carousel
+export { Carousel } from './carousal';

package/esm/link/link.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 export interface Props {
     href?: string;
     showColor?: boolean;
-    icon?: boolean;
+    arrow?: boolean;
+    icon?: React.ReactNode;
     underline?: boolean;
     block?: boolean;
     className?: string;

package/esm/link/link.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["href", "showColor", "underline", "children", "className", "block", "icon"];
+var _excluded = ["href", "showColor", "underline", "children", "className", "block", "arrow", "icon"];
 import _JSXStyle from "../styled-jsx.es.js";
 // "use client"
 
@@ -21,8 +21,9 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$block = _ref.block,
     block = _ref$block === void 0 ? false : _ref$block,
-    _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? false : _ref$icon,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
+    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var _useScale = useScale(),
@@ -37,11 +38,13 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     href: href
   }, props, {
     ref: ref,
-    className: _JSXStyle.dynamic([["442871747", [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), children, icon && /*#__PURE__*/React.createElement(LinkIcon, null), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "442871747",
+    className: _JSXStyle.dynamic([["1742013413", [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), icon && icon, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["1742013413", [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]]])
+  }, children, arrow && /*#__PURE__*/React.createElement(LinkIcon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1742013413",
     dynamic: [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]
-  }, ".link.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;line-height:inherit;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.125), " ").concat(SCALES.pr(0.25), " ").concat(SCALES.pb(0.125), " ").concat(SCALES.pl(0.25), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")));
+  }, ".link.__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;line-height:inherit;gap:5px;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.125), " ").concat(SCALES.pr(0.25), " ").concat(SCALES.pb(0.125), " ").concat(SCALES.pl(0.25), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")));
 });
 LinkComponent.displayName = 'Link';
 var Link = withScale(LinkComponent);

package/esm/login-with/index.js

@@ -1,5 +1,3 @@
-"use client";
-
 // export { default as LoginWithAmazon } from './LoginSocialAmazon';
 export { default as LoginWithFacebook } from './LoginSocialFacebook';
 export { default as LoginWithGoogle } from './LoginSocialGoogle';

package/esm/swipe/demo.js

@@ -0,0 +1,57 @@
+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";
+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 } from 'react';
+import ReactDOM from 'react-dom';
+import Swipe from './react-swipe';
+
+/* eslint no-console: 0*/
+var MyComponent = /*#__PURE__*/function (_Component) {
+  function MyComponent() {
+    _classCallCheck(this, MyComponent);
+    return _callSuper(this, MyComponent, arguments);
+  }
+  _inherits(MyComponent, _Component);
+  return _createClass(MyComponent, [{
+    key: "onSwipeStart",
+    value: function onSwipeStart(event) {
+      console.log('Start swiping...', event);
+    }
+  }, {
+    key: "onSwipeMove",
+    value: function onSwipeMove(position, event) {
+      console.log("Moved ".concat(position.x, " pixels horizontally"), event);
+      console.log("Moved ".concat(position.y, " pixels vertically"), event);
+    }
+  }, {
+    key: "onSwipeEnd",
+    value: function onSwipeEnd(event) {
+      console.log('End swiping...', event);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var boxStyle = {
+        width: '100%',
+        margin: '20px auto',
+        height: '300px',
+        border: '1px solid black',
+        background: '#ccc',
+        padding: '20px',
+        fontSize: '3em'
+      };
+      return /*#__PURE__*/React.createElement(Swipe, {
+        onSwipeStart: this.onSwipeStart,
+        onSwipeMove: this.onSwipeMove,
+        onSwipeEnd: this.onSwipeEnd
+      }, /*#__PURE__*/React.createElement("div", {
+        style: boxStyle
+      }, "Open the console and swipe me"));
+    }
+  }]);
+}(Component);
+ReactDOM.render(/*#__PURE__*/React.createElement(MyComponent, null), document.getElementById('root'));

package/esm/swipe/index.d.ts

@@ -0,0 +1,4 @@
+import Swipe from './react-swipe';
+import { SwipeProps } from './types';
+export default Swipe;
+export type { SwipeProps };

package/esm/swipe/index.js

@@ -0,0 +1,2 @@
+import Swipe from './react-swipe';
+export default Swipe;

package/esm/swipe/react-swipe.d.ts

@@ -0,0 +1,58 @@
+export function setHasSupportToCaptureOption(hasSupport: any): void;
+export default ReactSwipe;
+declare class ReactSwipe extends React.Component<any, any, any> {
+    static displayName: string;
+    static propTypes: {
+        tagName: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        allowMouseEvents: PropTypes.Requireable<boolean>;
+        onSwipeUp: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeDown: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeLeft: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeRight: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeMove: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        innerRef: PropTypes.Requireable<(...args: any[]) => any>;
+        tolerance: PropTypes.Validator<number>;
+    };
+    static defaultProps: {
+        tagName: string;
+        allowMouseEvents: boolean;
+        onSwipeUp(): void;
+        onSwipeDown(): void;
+        onSwipeLeft(): void;
+        onSwipeRight(): void;
+        onSwipeStart(): void;
+        onSwipeMove(): void;
+        onSwipeEnd(): void;
+        innerRef(): void;
+        tolerance: number;
+    };
+    constructor(...args: any[]);
+    _handleSwipeStart(event: any): void;
+    _handleSwipeMove(event: any): void;
+    _handleSwipeEnd(event: any): void;
+    _onMouseDown(event: any): void;
+    _onMouseMove(event: any): void;
+    _onMouseUp(event: any): void;
+    _setSwiperRef(node: any): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    mouseDown: boolean | undefined;
+    moveStart: {
+        x: any;
+        y: any;
+    } | null | undefined;
+    moving: boolean | undefined;
+    movePosition: {
+        deltaX: number;
+        deltaY: number;
+    } | null | undefined;
+    swiper: any;
+    render(): React.JSX.Element;
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/esm/swipe/react-swipe.js

@@ -0,0 +1,246 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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";
+var _excluded = ["tagName", "className", "style", "children", "allowMouseEvents", "onSwipeUp", "onSwipeDown", "onSwipeLeft", "onSwipeRight", "onSwipeStart", "onSwipeMove", "onSwipeEnd", "innerRef", "tolerance"];
+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 } from 'react';
+import PropTypes from 'prop-types';
+var supportsCaptureOption = false;
+export function setHasSupportToCaptureOption(hasSupport) {
+  supportsCaptureOption = hasSupport;
+}
+try {
+  addEventListener('test', null, Object.defineProperty({}, 'capture', {
+    get: function get() {
+      setHasSupportToCaptureOption(true);
+    }
+  }));
+} catch (e) {} // eslint-disable-line no-empty
+
+function getSafeEventHandlerOpts() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    capture: true
+  };
+  return supportsCaptureOption ? options : false;
+}
+
+/**
+ * [getPosition returns a position element that works for mouse or touch events]
+ * @param  {[Event]} event [the received event]
+ * @return {[Object]}      [x and y coords]
+ */
+function getPosition(event) {
+  if ('touches' in event) {
+    var _event$touches$ = event.touches[0],
+      pageX = _event$touches$.pageX,
+      pageY = _event$touches$.pageY;
+    return {
+      x: pageX,
+      y: pageY
+    };
+  }
+  var screenX = event.screenX,
+    screenY = event.screenY;
+  return {
+    x: screenX,
+    y: screenY
+  };
+}
+var ReactSwipe = /*#__PURE__*/function (_Component) {
+  function ReactSwipe() {
+    var _this;
+    _classCallCheck(this, ReactSwipe);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ReactSwipe, [].concat(args));
+    _this._handleSwipeStart = _this._handleSwipeStart.bind(_this);
+    _this._handleSwipeMove = _this._handleSwipeMove.bind(_this);
+    _this._handleSwipeEnd = _this._handleSwipeEnd.bind(_this);
+    _this._onMouseDown = _this._onMouseDown.bind(_this);
+    _this._onMouseMove = _this._onMouseMove.bind(_this);
+    _this._onMouseUp = _this._onMouseUp.bind(_this);
+    _this._setSwiperRef = _this._setSwiperRef.bind(_this);
+    return _this;
+  }
+  _inherits(ReactSwipe, _Component);
+  return _createClass(ReactSwipe, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.swiper) {
+        this.swiper.addEventListener('touchmove', this._handleSwipeMove, getSafeEventHandlerOpts({
+          capture: true,
+          passive: false
+        }));
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.swiper) {
+        this.swiper.removeEventListener('touchmove', this._handleSwipeMove, getSafeEventHandlerOpts({
+          capture: true,
+          passive: false
+        }));
+      }
+    }
+  }, {
+    key: "_onMouseDown",
+    value: function _onMouseDown(event) {
+      if (!this.props.allowMouseEvents) {
+        return;
+      }
+      this.mouseDown = true;
+      document.addEventListener('mouseup', this._onMouseUp);
+      document.addEventListener('mousemove', this._onMouseMove);
+      this._handleSwipeStart(event);
+    }
+  }, {
+    key: "_onMouseMove",
+    value: function _onMouseMove(event) {
+      if (!this.mouseDown) {
+        return;
+      }
+      this._handleSwipeMove(event);
+    }
+  }, {
+    key: "_onMouseUp",
+    value: function _onMouseUp(event) {
+      this.mouseDown = false;
+      document.removeEventListener('mouseup', this._onMouseUp);
+      document.removeEventListener('mousemove', this._onMouseMove);
+      this._handleSwipeEnd(event);
+    }
+  }, {
+    key: "_handleSwipeStart",
+    value: function _handleSwipeStart(event) {
+      var _getPosition = getPosition(event),
+        x = _getPosition.x,
+        y = _getPosition.y;
+      this.moveStart = {
+        x: x,
+        y: y
+      };
+      this.props.onSwipeStart(event);
+    }
+  }, {
+    key: "_handleSwipeMove",
+    value: function _handleSwipeMove(event) {
+      if (!this.moveStart) {
+        return;
+      }
+      var _getPosition2 = getPosition(event),
+        x = _getPosition2.x,
+        y = _getPosition2.y;
+      var deltaX = x - this.moveStart.x;
+      var deltaY = y - this.moveStart.y;
+      this.moving = true;
+
+      // handling the responsability of cancelling the scroll to
+      // the component handling the event
+      var shouldPreventDefault = this.props.onSwipeMove({
+        x: deltaX,
+        y: deltaY
+      }, event);
+      if (shouldPreventDefault && event.cancelable) {
+        event.preventDefault();
+      }
+      this.movePosition = {
+        deltaX: deltaX,
+        deltaY: deltaY
+      };
+    }
+  }, {
+    key: "_handleSwipeEnd",
+    value: function _handleSwipeEnd(event) {
+      this.props.onSwipeEnd(event);
+      var tolerance = this.props.tolerance;
+      if (this.moving && this.movePosition) {
+        if (this.movePosition.deltaX < -tolerance) {
+          this.props.onSwipeLeft(1, event);
+        } else if (this.movePosition.deltaX > tolerance) {
+          this.props.onSwipeRight(1, event);
+        }
+        if (this.movePosition.deltaY < -tolerance) {
+          this.props.onSwipeUp(1, event);
+        } else if (this.movePosition.deltaY > tolerance) {
+          this.props.onSwipeDown(1, event);
+        }
+      }
+      this.moveStart = null;
+      this.moving = false;
+      this.movePosition = null;
+    }
+  }, {
+    key: "_setSwiperRef",
+    value: function _setSwiperRef(node) {
+      this.swiper = node;
+      this.props.innerRef(node);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        tagName = _this$props.tagName,
+        className = _this$props.className,
+        style = _this$props.style,
+        children = _this$props.children,
+        allowMouseEvents = _this$props.allowMouseEvents,
+        onSwipeUp = _this$props.onSwipeUp,
+        onSwipeDown = _this$props.onSwipeDown,
+        onSwipeLeft = _this$props.onSwipeLeft,
+        onSwipeRight = _this$props.onSwipeRight,
+        onSwipeStart = _this$props.onSwipeStart,
+        onSwipeMove = _this$props.onSwipeMove,
+        onSwipeEnd = _this$props.onSwipeEnd,
+        innerRef = _this$props.innerRef,
+        tolerance = _this$props.tolerance,
+        props = _objectWithoutProperties(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement(this.props.tagName, _extends({
+        ref: this._setSwiperRef,
+        onMouseDown: this._onMouseDown,
+        onTouchStart: this._handleSwipeStart,
+        onTouchEnd: this._handleSwipeEnd,
+        className: className,
+        style: style
+      }, props), children);
+    }
+  }]);
+}(Component);
+_defineProperty(ReactSwipe, "displayName", 'ReactSwipe');
+_defineProperty(ReactSwipe, "propTypes", {
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node,
+  allowMouseEvents: PropTypes.bool,
+  onSwipeUp: PropTypes.func,
+  onSwipeDown: PropTypes.func,
+  onSwipeLeft: PropTypes.func,
+  onSwipeRight: PropTypes.func,
+  onSwipeStart: PropTypes.func,
+  onSwipeMove: PropTypes.func,
+  onSwipeEnd: PropTypes.func,
+  innerRef: PropTypes.func,
+  tolerance: PropTypes.number.isRequired
+});
+_defineProperty(ReactSwipe, "defaultProps", {
+  tagName: 'div',
+  allowMouseEvents: false,
+  onSwipeUp: function onSwipeUp() {},
+  onSwipeDown: function onSwipeDown() {},
+  onSwipeLeft: function onSwipeLeft() {},
+  onSwipeRight: function onSwipeRight() {},
+  onSwipeStart: function onSwipeStart() {},
+  onSwipeMove: function onSwipeMove() {},
+  onSwipeEnd: function onSwipeEnd() {},
+  innerRef: function innerRef() {},
+  tolerance: 0
+});
+export default ReactSwipe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -52,13 +52,13 @@
   "sideEffects": false,
   "devDependencies": {
     "@babel/core": "7.27.4",
-    "@helpdice/pro": "^1.1.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
     "@helpdice/icons": "^1.1.2",
+    "@helpdice/pro": "^1.1.6",
     "@helpdice/theme": "^1.0.3",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/loader": "^3.1.0",
@@ -95,6 +95,7 @@
     "react-color": "^2.19.3",
     "react-dom": "^18.3.1",
     "react-live": "^4.1.8",
+    "remark-gfm": "^4.0.1",
     "rollup": "^4.32.1",
     "styled-jsx": "^5.1.6",
     "typescript": "^5.7.3",
@@ -133,7 +134,7 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "@helpdice/theme": "^1.0.0",
+    "@helpdice/theme": "^1.0.3",
     "react": "^18.3.1 || ^19.1.0",
     "react-dom": "^18.3.1 || ^19.1.0"
   },

package/esm/carousal/Arrow.js

@@ -1,18 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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;