@geneui/components 3.0.0-next-f0c40b8-25112024 → 3.0.0-next-8abb102-14012025

package/Scrollbar.js

@@ -0,0 +1,3473 @@
+import * as React$1 from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import require$$1 from 'prop-types';
+import ReactDOM__default from 'react-dom';
+import { u as useDebouncedCallback } from './useDebounceCallback-999deae7.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+				var args = [null];
+				args.push.apply(args, arguments);
+				var Ctor = Function.bind.apply(f, args);
+				return new Ctor();
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+var isArray = Array.isArray;
+var toClassName = function (val) {
+    var str = '';
+    if (typeof val === 'string')
+        str += val;
+    else if (typeof val === 'object') {
+        var tmp = void 0;
+        if (isArray(val)) {
+            var i = 0;
+            var l = val.length;
+            while (i < l) {
+                tmp = toClassName(val[i++]);
+                if (tmp) {
+                    if (str) {
+                        str += ' ';
+                    }
+                    str += tmp;
+                }
+            }
+        }
+        else {
+            // eslint-disable-next-line guard-for-in
+            for (tmp in val) {
+                if (tmp && val[tmp]) {
+                    if (str) {
+                        str += ' ';
+                    }
+                    str += tmp;
+                }
+            }
+        }
+    }
+    return str;
+};
+function cnb() {
+    var l = arguments.length;
+    var i = 0;
+    var n;
+    var tmp;
+    var str = '';
+    while (i < l) {
+        n = arguments[i++];
+        if (n) {
+            tmp = toClassName(n);
+            if (tmp) {
+                if (str) {
+                    str += ' ';
+                }
+                str += tmp;
+            }
+        }
+    }
+    return str;
+}
+
+function e(e,i,t,o){for(;i>=t&&!e("(min-resolution: "+i/o+"dppx)").matches;)i--;return i}function i(i){if(void 0===i&&(i=window),!i)return 1;if(void 0!==i.devicePixelRatio)return i.devicePixelRatio;var t=i.document.frames;return void 0!==t?void 0!==t.devicePixelRatio?t.devicePixelRatio:t.screen.deviceXDPI/t.screen.systemXDPI:void 0!==i.matchMedia?function(i){for(var t=i.matchMedia,o=10,n=.1,r=1,a=o,c=0;c<4;c++)o=(a=10*e(t,o,n,r))+9,n=a,r*=10;return a/r}(i):1}
+
+var cjsExports = {};
+var cjs = {
+  get exports(){ return cjsExports; },
+  set exports(v){ cjsExports = v; },
+};
+
+var Draggable$1 = {};
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+var clsx_m = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	clsx: clsx,
+	default: clsx
+});
+
+var require$$3 = /*@__PURE__*/getAugmentedNamespace(clsx_m);
+
+var domFns = {};
+
+var shims = {};
+
+Object.defineProperty(shims, "__esModule", {
+  value: true
+});
+shims.dontSetMe = dontSetMe;
+shims.findInArray = findInArray;
+shims.int = int;
+shims.isFunction = isFunction;
+shims.isNum = isNum$1;
+// @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc
+function findInArray(array /*: Array<any> | TouchList*/, callback /*: Function*/) /*: any*/{
+  for (let i = 0, length = array.length; i < length; i++) {
+    if (callback.apply(callback, [array[i], i, array])) return array[i];
+  }
+}
+function isFunction(func /*: any*/) /*: boolean %checks*/{
+  // $FlowIgnore[method-unbinding]
+  return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';
+}
+function isNum$1(num /*: any*/) /*: boolean %checks*/{
+  return typeof num === 'number' && !isNaN(num);
+}
+function int(a /*: string*/) /*: number*/{
+  return parseInt(a, 10);
+}
+function dontSetMe(props /*: Object*/, propName /*: string*/, componentName /*: string*/) /*: ?Error*/{
+  if (props[propName]) {
+    return new Error("Invalid prop ".concat(propName, " passed to ").concat(componentName, " - do not set this, set it on the child."));
+  }
+}
+
+var getPrefix$1 = {};
+
+Object.defineProperty(getPrefix$1, "__esModule", {
+  value: true
+});
+getPrefix$1.browserPrefixToKey = browserPrefixToKey;
+getPrefix$1.browserPrefixToStyle = browserPrefixToStyle;
+getPrefix$1.default = void 0;
+getPrefix$1.getPrefix = getPrefix;
+const prefixes = ['Moz', 'Webkit', 'O', 'ms'];
+function getPrefix() /*: string*/{
+  var _window$document;
+  let prop /*: string*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transform';
+  // Ensure we're running in an environment where there is actually a global
+  // `window` obj
+  if (typeof window === 'undefined') return '';
+
+  // If we're in a pseudo-browser server-side environment, this access
+  // path may not exist, so bail out if it doesn't.
+  const style = (_window$document = window.document) === null || _window$document === void 0 || (_window$document = _window$document.documentElement) === null || _window$document === void 0 ? void 0 : _window$document.style;
+  if (!style) return '';
+  if (prop in style) return '';
+  for (let i = 0; i < prefixes.length; i++) {
+    if (browserPrefixToKey(prop, prefixes[i]) in style) return prefixes[i];
+  }
+  return '';
+}
+function browserPrefixToKey(prop /*: string*/, prefix /*: string*/) /*: string*/{
+  return prefix ? "".concat(prefix).concat(kebabToTitleCase(prop)) : prop;
+}
+function browserPrefixToStyle(prop /*: string*/, prefix /*: string*/) /*: string*/{
+  return prefix ? "-".concat(prefix.toLowerCase(), "-").concat(prop) : prop;
+}
+function kebabToTitleCase(str /*: string*/) /*: string*/{
+  let out = '';
+  let shouldCapitalize = true;
+  for (let i = 0; i < str.length; i++) {
+    if (shouldCapitalize) {
+      out += str[i].toUpperCase();
+      shouldCapitalize = false;
+    } else if (str[i] === '-') {
+      shouldCapitalize = true;
+    } else {
+      out += str[i];
+    }
+  }
+  return out;
+}
+
+// Default export is the prefix itself, like 'Moz', 'Webkit', etc
+// Note that you may have to re-test for certain things; for instance, Chrome 50
+// can handle unprefixed `transform`, but not unprefixed `user-select`
+getPrefix$1.default = (getPrefix() /*: string*/);
+
+Object.defineProperty(domFns, "__esModule", {
+  value: true
+});
+domFns.addClassName = addClassName;
+domFns.addEvent = addEvent;
+domFns.addUserSelectStyles = addUserSelectStyles;
+domFns.createCSSTransform = createCSSTransform;
+domFns.createSVGTransform = createSVGTransform;
+domFns.getTouch = getTouch;
+domFns.getTouchIdentifier = getTouchIdentifier;
+domFns.getTranslation = getTranslation;
+domFns.innerHeight = innerHeight;
+domFns.innerWidth = innerWidth;
+domFns.matchesSelector = matchesSelector;
+domFns.matchesSelectorAndParentsTo = matchesSelectorAndParentsTo;
+domFns.offsetXYFromParent = offsetXYFromParent;
+domFns.outerHeight = outerHeight;
+domFns.outerWidth = outerWidth;
+domFns.removeClassName = removeClassName;
+domFns.removeEvent = removeEvent;
+domFns.removeUserSelectStyles = removeUserSelectStyles;
+var _shims$2 = shims;
+var _getPrefix = _interopRequireWildcard$1(getPrefix$1);
+function _getRequireWildcardCache$1(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$1 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard$1(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$1(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/*:: import type {ControlPosition, PositionOffsetControlPosition, MouseTouchEvent} from './types';*/
+let matchesSelectorFunc = '';
+function matchesSelector(el /*: Node*/, selector /*: string*/) /*: boolean*/{
+  if (!matchesSelectorFunc) {
+    matchesSelectorFunc = (0, _shims$2.findInArray)(['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'], function (method) {
+      // $FlowIgnore: Doesn't think elements are indexable
+      return (0, _shims$2.isFunction)(el[method]);
+    });
+  }
+
+  // Might not be found entirely (not an Element?) - in that case, bail
+  // $FlowIgnore: Doesn't think elements are indexable
+  if (!(0, _shims$2.isFunction)(el[matchesSelectorFunc])) return false;
+
+  // $FlowIgnore: Doesn't think elements are indexable
+  return el[matchesSelectorFunc](selector);
+}
+
+// Works up the tree to the draggable itself attempting to match selector.
+function matchesSelectorAndParentsTo(el /*: Node*/, selector /*: string*/, baseNode /*: Node*/) /*: boolean*/{
+  let node = el;
+  do {
+    if (matchesSelector(node, selector)) return true;
+    if (node === baseNode) return false;
+    // $FlowIgnore[incompatible-type]
+    node = node.parentNode;
+  } while (node);
+  return false;
+}
+function addEvent(el /*: ?Node*/, event /*: string*/, handler /*: Function*/, inputOptions /*: Object*/) /*: void*/{
+  if (!el) return;
+  const options = {
+    capture: true,
+    ...inputOptions
+  };
+  // $FlowIgnore[method-unbinding]
+  if (el.addEventListener) {
+    el.addEventListener(event, handler, options);
+  } else if (el.attachEvent) {
+    el.attachEvent('on' + event, handler);
+  } else {
+    // $FlowIgnore: Doesn't think elements are indexable
+    el['on' + event] = handler;
+  }
+}
+function removeEvent(el /*: ?Node*/, event /*: string*/, handler /*: Function*/, inputOptions /*: Object*/) /*: void*/{
+  if (!el) return;
+  const options = {
+    capture: true,
+    ...inputOptions
+  };
+  // $FlowIgnore[method-unbinding]
+  if (el.removeEventListener) {
+    el.removeEventListener(event, handler, options);
+  } else if (el.detachEvent) {
+    el.detachEvent('on' + event, handler);
+  } else {
+    // $FlowIgnore: Doesn't think elements are indexable
+    el['on' + event] = null;
+  }
+}
+function outerHeight(node /*: HTMLElement*/) /*: number*/{
+  // This is deliberately excluding margin for our calculations, since we are using
+  // offsetTop which is including margin. See getBoundPosition
+  let height = node.clientHeight;
+  const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+  height += (0, _shims$2.int)(computedStyle.borderTopWidth);
+  height += (0, _shims$2.int)(computedStyle.borderBottomWidth);
+  return height;
+}
+function outerWidth(node /*: HTMLElement*/) /*: number*/{
+  // This is deliberately excluding margin for our calculations, since we are using
+  // offsetLeft which is including margin. See getBoundPosition
+  let width = node.clientWidth;
+  const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+  width += (0, _shims$2.int)(computedStyle.borderLeftWidth);
+  width += (0, _shims$2.int)(computedStyle.borderRightWidth);
+  return width;
+}
+function innerHeight(node /*: HTMLElement*/) /*: number*/{
+  let height = node.clientHeight;
+  const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+  height -= (0, _shims$2.int)(computedStyle.paddingTop);
+  height -= (0, _shims$2.int)(computedStyle.paddingBottom);
+  return height;
+}
+function innerWidth(node /*: HTMLElement*/) /*: number*/{
+  let width = node.clientWidth;
+  const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+  width -= (0, _shims$2.int)(computedStyle.paddingLeft);
+  width -= (0, _shims$2.int)(computedStyle.paddingRight);
+  return width;
+}
+/*:: interface EventWithOffset {
+  clientX: number, clientY: number
+}*/
+// Get from offsetParent
+function offsetXYFromParent(evt /*: EventWithOffset*/, offsetParent /*: HTMLElement*/, scale /*: number*/) /*: ControlPosition*/{
+  const isBody = offsetParent === offsetParent.ownerDocument.body;
+  const offsetParentRect = isBody ? {
+    left: 0,
+    top: 0
+  } : offsetParent.getBoundingClientRect();
+  const x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
+  const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
+  return {
+    x,
+    y
+  };
+}
+function createCSSTransform(controlPos /*: ControlPosition*/, positionOffset /*: PositionOffsetControlPosition*/) /*: Object*/{
+  const translation = getTranslation(controlPos, positionOffset, 'px');
+  return {
+    [(0, _getPrefix.browserPrefixToKey)('transform', _getPrefix.default)]: translation
+  };
+}
+function createSVGTransform(controlPos /*: ControlPosition*/, positionOffset /*: PositionOffsetControlPosition*/) /*: string*/{
+  const translation = getTranslation(controlPos, positionOffset, '');
+  return translation;
+}
+function getTranslation(_ref /*:: */, positionOffset /*: PositionOffsetControlPosition*/, unitSuffix /*: string*/) /*: string*/{
+  let {
+    x,
+    y
+  } /*: ControlPosition*/ = _ref /*: ControlPosition*/;
+  let translation = "translate(".concat(x).concat(unitSuffix, ",").concat(y).concat(unitSuffix, ")");
+  if (positionOffset) {
+    const defaultX = "".concat(typeof positionOffset.x === 'string' ? positionOffset.x : positionOffset.x + unitSuffix);
+    const defaultY = "".concat(typeof positionOffset.y === 'string' ? positionOffset.y : positionOffset.y + unitSuffix);
+    translation = "translate(".concat(defaultX, ", ").concat(defaultY, ")") + translation;
+  }
+  return translation;
+}
+function getTouch(e /*: MouseTouchEvent*/, identifier /*: number*/) /*: ?{clientX: number, clientY: number}*/{
+  return e.targetTouches && (0, _shims$2.findInArray)(e.targetTouches, t => identifier === t.identifier) || e.changedTouches && (0, _shims$2.findInArray)(e.changedTouches, t => identifier === t.identifier);
+}
+function getTouchIdentifier(e /*: MouseTouchEvent*/) /*: ?number*/{
+  if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
+  if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
+}
+
+// User-select Hacks:
+//
+// Useful for preventing blue highlights all over everything when dragging.
+
+// Note we're passing `document` b/c we could be iframed
+function addUserSelectStyles(doc /*: ?Document*/) {
+  if (!doc) return;
+  let styleEl = doc.getElementById('react-draggable-style-el');
+  if (!styleEl) {
+    styleEl = doc.createElement('style');
+    styleEl.type = 'text/css';
+    styleEl.id = 'react-draggable-style-el';
+    styleEl.innerHTML = '.react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n';
+    styleEl.innerHTML += '.react-draggable-transparent-selection *::selection {all: inherit;}\n';
+    doc.getElementsByTagName('head')[0].appendChild(styleEl);
+  }
+  if (doc.body) addClassName(doc.body, 'react-draggable-transparent-selection');
+}
+function removeUserSelectStyles(doc /*: ?Document*/) {
+  if (!doc) return;
+  try {
+    if (doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection');
+    // $FlowIgnore: IE
+    if (doc.selection) {
+      // $FlowIgnore: IE
+      doc.selection.empty();
+    } else {
+      // Remove selection caused by scroll, unless it's a focused input
+      // (we use doc.defaultView in case we're in an iframe)
+      const selection = (doc.defaultView || window).getSelection();
+      if (selection && selection.type !== 'Caret') {
+        selection.removeAllRanges();
+      }
+    }
+  } catch (e) {
+    // probably IE
+  }
+}
+function addClassName(el /*: HTMLElement*/, className /*: string*/) {
+  if (el.classList) {
+    el.classList.add(className);
+  } else {
+    if (!el.className.match(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)")))) {
+      el.className += " ".concat(className);
+    }
+  }
+}
+function removeClassName(el /*: HTMLElement*/, className /*: string*/) {
+  if (el.classList) {
+    el.classList.remove(className);
+  } else {
+    el.className = el.className.replace(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)"), 'g'), '');
+  }
+}
+
+var positionFns = {};
+
+Object.defineProperty(positionFns, "__esModule", {
+  value: true
+});
+positionFns.canDragX = canDragX;
+positionFns.canDragY = canDragY;
+positionFns.createCoreData = createCoreData;
+positionFns.createDraggableData = createDraggableData;
+positionFns.getBoundPosition = getBoundPosition;
+positionFns.getControlPosition = getControlPosition;
+positionFns.snapToGrid = snapToGrid;
+var _shims$1 = shims;
+var _domFns$1 = domFns;
+/*:: import type Draggable from '../Draggable';*/
+/*:: import type {Bounds, ControlPosition, DraggableData, MouseTouchEvent} from './types';*/
+/*:: import type DraggableCore from '../DraggableCore';*/
+function getBoundPosition(draggable /*: Draggable*/, x /*: number*/, y /*: number*/) /*: [number, number]*/{
+  // If no bounds, short-circuit and move on
+  if (!draggable.props.bounds) return [x, y];
+
+  // Clone new bounds
+  let {
+    bounds
+  } = draggable.props;
+  bounds = typeof bounds === 'string' ? bounds : cloneBounds(bounds);
+  const node = findDOMNode(draggable);
+  if (typeof bounds === 'string') {
+    const {
+      ownerDocument
+    } = node;
+    const ownerWindow = ownerDocument.defaultView;
+    let boundNode;
+    if (bounds === 'parent') {
+      boundNode = node.parentNode;
+    } else {
+      boundNode = ownerDocument.querySelector(bounds);
+    }
+    if (!(boundNode instanceof ownerWindow.HTMLElement)) {
+      throw new Error('Bounds selector "' + bounds + '" could not find an element.');
+    }
+    const boundNodeEl /*: HTMLElement*/ = boundNode; // for Flow, can't seem to refine correctly
+    const nodeStyle = ownerWindow.getComputedStyle(node);
+    const boundNodeStyle = ownerWindow.getComputedStyle(boundNodeEl);
+    // Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
+    bounds = {
+      left: -node.offsetLeft + (0, _shims$1.int)(boundNodeStyle.paddingLeft) + (0, _shims$1.int)(nodeStyle.marginLeft),
+      top: -node.offsetTop + (0, _shims$1.int)(boundNodeStyle.paddingTop) + (0, _shims$1.int)(nodeStyle.marginTop),
+      right: (0, _domFns$1.innerWidth)(boundNodeEl) - (0, _domFns$1.outerWidth)(node) - node.offsetLeft + (0, _shims$1.int)(boundNodeStyle.paddingRight) - (0, _shims$1.int)(nodeStyle.marginRight),
+      bottom: (0, _domFns$1.innerHeight)(boundNodeEl) - (0, _domFns$1.outerHeight)(node) - node.offsetTop + (0, _shims$1.int)(boundNodeStyle.paddingBottom) - (0, _shims$1.int)(nodeStyle.marginBottom)
+    };
+  }
+
+  // Keep x and y below right and bottom limits...
+  if ((0, _shims$1.isNum)(bounds.right)) x = Math.min(x, bounds.right);
+  if ((0, _shims$1.isNum)(bounds.bottom)) y = Math.min(y, bounds.bottom);
+
+  // But above left and top limits.
+  if ((0, _shims$1.isNum)(bounds.left)) x = Math.max(x, bounds.left);
+  if ((0, _shims$1.isNum)(bounds.top)) y = Math.max(y, bounds.top);
+  return [x, y];
+}
+function snapToGrid(grid /*: [number, number]*/, pendingX /*: number*/, pendingY /*: number*/) /*: [number, number]*/{
+  const x = Math.round(pendingX / grid[0]) * grid[0];
+  const y = Math.round(pendingY / grid[1]) * grid[1];
+  return [x, y];
+}
+function canDragX(draggable /*: Draggable*/) /*: boolean*/{
+  return draggable.props.axis === 'both' || draggable.props.axis === 'x';
+}
+function canDragY(draggable /*: Draggable*/) /*: boolean*/{
+  return draggable.props.axis === 'both' || draggable.props.axis === 'y';
+}
+
+// Get {x, y} positions from event.
+function getControlPosition(e /*: MouseTouchEvent*/, touchIdentifier /*: ?number*/, draggableCore /*: DraggableCore*/) /*: ?ControlPosition*/{
+  const touchObj = typeof touchIdentifier === 'number' ? (0, _domFns$1.getTouch)(e, touchIdentifier) : null;
+  if (typeof touchIdentifier === 'number' && !touchObj) return null; // not the right touch
+  const node = findDOMNode(draggableCore);
+  // User can provide an offsetParent if desired.
+  const offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body;
+  return (0, _domFns$1.offsetXYFromParent)(touchObj || e, offsetParent, draggableCore.props.scale);
+}
+
+// Create an data object exposed by <DraggableCore>'s events
+function createCoreData(draggable /*: DraggableCore*/, x /*: number*/, y /*: number*/) /*: DraggableData*/{
+  const isStart = !(0, _shims$1.isNum)(draggable.lastX);
+  const node = findDOMNode(draggable);
+  if (isStart) {
+    // If this is our first move, use the x and y as last coords.
+    return {
+      node,
+      deltaX: 0,
+      deltaY: 0,
+      lastX: x,
+      lastY: y,
+      x,
+      y
+    };
+  } else {
+    // Otherwise calculate proper values.
+    return {
+      node,
+      deltaX: x - draggable.lastX,
+      deltaY: y - draggable.lastY,
+      lastX: draggable.lastX,
+      lastY: draggable.lastY,
+      x,
+      y
+    };
+  }
+}
+
+// Create an data exposed by <Draggable>'s events
+function createDraggableData(draggable /*: Draggable*/, coreData /*: DraggableData*/) /*: DraggableData*/{
+  const scale = draggable.props.scale;
+  return {
+    node: coreData.node,
+    x: draggable.state.x + coreData.deltaX / scale,
+    y: draggable.state.y + coreData.deltaY / scale,
+    deltaX: coreData.deltaX / scale,
+    deltaY: coreData.deltaY / scale,
+    lastX: draggable.state.x,
+    lastY: draggable.state.y
+  };
+}
+
+// A lot faster than stringify/parse
+function cloneBounds(bounds /*: Bounds*/) /*: Bounds*/{
+  return {
+    left: bounds.left,
+    top: bounds.top,
+    right: bounds.right,
+    bottom: bounds.bottom
+  };
+}
+function findDOMNode(draggable /*: Draggable | DraggableCore*/) /*: HTMLElement*/{
+  const node = draggable.findDOMNode();
+  if (!node) {
+    throw new Error('<DraggableCore>: Unmounted during event!');
+  }
+  // $FlowIgnore we can't assert on HTMLElement due to tests... FIXME
+  return node;
+}
+
+var DraggableCore$2 = {};
+
+var log$1 = {};
+
+Object.defineProperty(log$1, "__esModule", {
+  value: true
+});
+log$1.default = log;
+/*eslint no-console:0*/
+function log() {
+}
+
+Object.defineProperty(DraggableCore$2, "__esModule", {
+  value: true
+});
+DraggableCore$2.default = void 0;
+var React = _interopRequireWildcard(React__default);
+var _propTypes = _interopRequireDefault(require$$1);
+var _reactDom = _interopRequireDefault(ReactDOM__default);
+var _domFns = domFns;
+var _positionFns = positionFns;
+var _shims = shims;
+var _log = _interopRequireDefault(log$1);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/*:: import type {EventHandler, MouseTouchEvent} from './utils/types';*/
+/*:: import type {Element as ReactElement} from 'react';*/
+// Simple abstraction for dragging events names.
+const eventsFor = {
+  touch: {
+    start: 'touchstart',
+    move: 'touchmove',
+    stop: 'touchend'
+  },
+  mouse: {
+    start: 'mousedown',
+    move: 'mousemove',
+    stop: 'mouseup'
+  }
+};
+
+// Default to mouse events.
+let dragEventFor = eventsFor.mouse;
+/*:: export type DraggableData = {
+  node: HTMLElement,
+  x: number, y: number,
+  deltaX: number, deltaY: number,
+  lastX: number, lastY: number,
+};*/
+/*:: export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void | false;*/
+/*:: export type ControlPosition = {x: number, y: number};*/
+/*:: export type PositionOffsetControlPosition = {x: number|string, y: number|string};*/
+/*:: export type DraggableCoreDefaultProps = {
+  allowAnyClick: boolean,
+  disabled: boolean,
+  enableUserSelectHack: boolean,
+  onStart: DraggableEventHandler,
+  onDrag: DraggableEventHandler,
+  onStop: DraggableEventHandler,
+  onMouseDown: (e: MouseEvent) => void,
+  scale: number,
+};*/
+/*:: export type DraggableCoreProps = {
+  ...DraggableCoreDefaultProps,
+  cancel: string,
+  children: ReactElement<any>,
+  offsetParent: HTMLElement,
+  grid: [number, number],
+  handle: string,
+  nodeRef?: ?React.ElementRef<any>,
+};*/
+//
+// Define <DraggableCore>.
+//
+// <DraggableCore> is for advanced usage of <Draggable>. It maintains minimal internal state so it can
+// work well with libraries that require more control over the element.
+//
+
+let DraggableCore$1 = class DraggableCore extends React.Component /*:: <DraggableCoreProps>*/{
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "dragging", false);
+    // Used while dragging to determine deltas.
+    _defineProperty(this, "lastX", NaN);
+    _defineProperty(this, "lastY", NaN);
+    _defineProperty(this, "touchIdentifier", null);
+    _defineProperty(this, "mounted", false);
+    _defineProperty(this, "handleDragStart", e => {
+      // Make it possible to attach event handlers on top of this one.
+      this.props.onMouseDown(e);
+
+      // Only accept left-clicks.
+      if (!this.props.allowAnyClick && typeof e.button === 'number' && e.button !== 0) return false;
+
+      // Get nodes. Be sure to grab relative document (could be iframed)
+      const thisNode = this.findDOMNode();
+      if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
+        throw new Error('<DraggableCore> not mounted on DragStart!');
+      }
+      const {
+        ownerDocument
+      } = thisNode;
+
+      // Short circuit if handle or cancel prop was provided and selector doesn't match.
+      if (this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || this.props.handle && !(0, _domFns.matchesSelectorAndParentsTo)(e.target, this.props.handle, thisNode) || this.props.cancel && (0, _domFns.matchesSelectorAndParentsTo)(e.target, this.props.cancel, thisNode)) {
+        return;
+      }
+
+      // Prevent scrolling on mobile devices, like ipad/iphone.
+      // Important that this is after handle/cancel.
+      if (e.type === 'touchstart') e.preventDefault();
+
+      // Set touch identifier in component state if this is a touch event. This allows us to
+      // distinguish between individual touches on multitouch screens by identifying which
+      // touchpoint was set to this element.
+      const touchIdentifier = (0, _domFns.getTouchIdentifier)(e);
+      this.touchIdentifier = touchIdentifier;
+
+      // Get the current drag point from the event. This is used as the offset.
+      const position = (0, _positionFns.getControlPosition)(e, touchIdentifier, this);
+      if (position == null) return; // not possible but satisfies flow
+      const {
+        x,
+        y
+      } = position;
+
+      // Create an event object with all the data parents need to make a decision here.
+      const coreEvent = (0, _positionFns.createCoreData)(this, x, y);
+      (0, _log.default)('DraggableCore: handleDragStart: %j', coreEvent);
+
+      // Call event handler. If it returns explicit false, cancel.
+      (0, _log.default)('calling', this.props.onStart);
+      const shouldUpdate = this.props.onStart(e, coreEvent);
+      if (shouldUpdate === false || this.mounted === false) return;
+
+      // Add a style to the body to disable user-select. This prevents text from
+      // being selected all over the page.
+      if (this.props.enableUserSelectHack) (0, _domFns.addUserSelectStyles)(ownerDocument);
+
+      // Initiate dragging. Set the current x and y as offsets
+      // so we know how much we've moved during the drag. This allows us
+      // to drag elements around even if they have been moved, without issue.
+      this.dragging = true;
+      this.lastX = x;
+      this.lastY = y;
+
+      // Add events to the document directly so we catch when the user's mouse/touch moves outside of
+      // this element. We use different events depending on whether or not we have detected that this
+      // is a touch-capable device.
+      (0, _domFns.addEvent)(ownerDocument, dragEventFor.move, this.handleDrag);
+      (0, _domFns.addEvent)(ownerDocument, dragEventFor.stop, this.handleDragStop);
+    });
+    _defineProperty(this, "handleDrag", e => {
+      // Get the current drag point from the event. This is used as the offset.
+      const position = (0, _positionFns.getControlPosition)(e, this.touchIdentifier, this);
+      if (position == null) return;
+      let {
+        x,
+        y
+      } = position;
+
+      // Snap to grid if prop has been provided
+      if (Array.isArray(this.props.grid)) {
+        let deltaX = x - this.lastX,
+          deltaY = y - this.lastY;
+        [deltaX, deltaY] = (0, _positionFns.snapToGrid)(this.props.grid, deltaX, deltaY);
+        if (!deltaX && !deltaY) return; // skip useless drag
+        x = this.lastX + deltaX, y = this.lastY + deltaY;
+      }
+      const coreEvent = (0, _positionFns.createCoreData)(this, x, y);
+      (0, _log.default)('DraggableCore: handleDrag: %j', coreEvent);
+
+      // Call event handler. If it returns explicit false, trigger end.
+      const shouldUpdate = this.props.onDrag(e, coreEvent);
+      if (shouldUpdate === false || this.mounted === false) {
+        try {
+          // $FlowIgnore
+          this.handleDragStop(new MouseEvent('mouseup'));
+        } catch (err) {
+          // Old browsers
+          const event = ((document.createEvent('MouseEvents') /*: any*/) /*: MouseTouchEvent*/);
+          // I see why this insanity was deprecated
+          // $FlowIgnore
+          event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+          this.handleDragStop(event);
+        }
+        return;
+      }
+      this.lastX = x;
+      this.lastY = y;
+    });
+    _defineProperty(this, "handleDragStop", e => {
+      if (!this.dragging) return;
+      const position = (0, _positionFns.getControlPosition)(e, this.touchIdentifier, this);
+      if (position == null) return;
+      let {
+        x,
+        y
+      } = position;
+
+      // Snap to grid if prop has been provided
+      if (Array.isArray(this.props.grid)) {
+        let deltaX = x - this.lastX || 0;
+        let deltaY = y - this.lastY || 0;
+        [deltaX, deltaY] = (0, _positionFns.snapToGrid)(this.props.grid, deltaX, deltaY);
+        x = this.lastX + deltaX, y = this.lastY + deltaY;
+      }
+      const coreEvent = (0, _positionFns.createCoreData)(this, x, y);
+
+      // Call event handler
+      const shouldContinue = this.props.onStop(e, coreEvent);
+      if (shouldContinue === false || this.mounted === false) return false;
+      const thisNode = this.findDOMNode();
+      if (thisNode) {
+        // Remove user-select hack
+        if (this.props.enableUserSelectHack) (0, _domFns.removeUserSelectStyles)(thisNode.ownerDocument);
+      }
+      (0, _log.default)('DraggableCore: handleDragStop: %j', coreEvent);
+
+      // Reset the el.
+      this.dragging = false;
+      this.lastX = NaN;
+      this.lastY = NaN;
+      if (thisNode) {
+        // Remove event handlers
+        (0, _log.default)('DraggableCore: Removing handlers');
+        (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.move, this.handleDrag);
+        (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.stop, this.handleDragStop);
+      }
+    });
+    _defineProperty(this, "onMouseDown", e => {
+      dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
+
+      return this.handleDragStart(e);
+    });
+    _defineProperty(this, "onMouseUp", e => {
+      dragEventFor = eventsFor.mouse;
+      return this.handleDragStop(e);
+    });
+    // Same as onMouseDown (start drag), but now consider this a touch device.
+    _defineProperty(this, "onTouchStart", e => {
+      // We're on a touch device now, so change the event handlers
+      dragEventFor = eventsFor.touch;
+      return this.handleDragStart(e);
+    });
+    _defineProperty(this, "onTouchEnd", e => {
+      // We're on a touch device now, so change the event handlers
+      dragEventFor = eventsFor.touch;
+      return this.handleDragStop(e);
+    });
+  }
+  componentDidMount() {
+    this.mounted = true;
+    // Touch handlers must be added with {passive: false} to be cancelable.
+    // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+    const thisNode = this.findDOMNode();
+    if (thisNode) {
+      (0, _domFns.addEvent)(thisNode, eventsFor.touch.start, this.onTouchStart, {
+        passive: false
+      });
+    }
+  }
+  componentWillUnmount() {
+    this.mounted = false;
+    // Remove any leftover event handlers. Remove both touch and mouse handlers in case
+    // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
+    const thisNode = this.findDOMNode();
+    if (thisNode) {
+      const {
+        ownerDocument
+      } = thisNode;
+      (0, _domFns.removeEvent)(ownerDocument, eventsFor.mouse.move, this.handleDrag);
+      (0, _domFns.removeEvent)(ownerDocument, eventsFor.touch.move, this.handleDrag);
+      (0, _domFns.removeEvent)(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
+      (0, _domFns.removeEvent)(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
+      (0, _domFns.removeEvent)(thisNode, eventsFor.touch.start, this.onTouchStart, {
+        passive: false
+      });
+      if (this.props.enableUserSelectHack) (0, _domFns.removeUserSelectStyles)(ownerDocument);
+    }
+  }
+
+  // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
+  // the underlying DOM node ourselves. See the README for more information.
+  findDOMNode() /*: ?HTMLElement*/{
+    var _this$props, _this$props2;
+    return (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.nodeRef ? (_this$props2 = this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.nodeRef) === null || _this$props2 === void 0 ? void 0 : _this$props2.current : _reactDom.default.findDOMNode(this);
+  }
+  render() /*: React.Element<any>*/{
+    // Reuse the child provided
+    // This makes it flexible to use whatever element is wanted (div, ul, etc)
+    return /*#__PURE__*/React.cloneElement(React.Children.only(this.props.children), {
+      // Note: mouseMove handler is attached to document so it will still function
+      // when the user drags quickly and leaves the bounds of the element.
+      onMouseDown: this.onMouseDown,
+      onMouseUp: this.onMouseUp,
+      // onTouchStart is added on `componentDidMount` so they can be added with
+      // {passive: false}, which allows it to cancel. See
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+      onTouchEnd: this.onTouchEnd
+    });
+  }
+};
+DraggableCore$2.default = DraggableCore$1;
+_defineProperty(DraggableCore$1, "displayName", 'DraggableCore');
+_defineProperty(DraggableCore$1, "propTypes", {
+  /**
+   * `allowAnyClick` allows dragging using any mouse button.
+   * By default, we only accept the left button.
+   *
+   * Defaults to `false`.
+   */
+  allowAnyClick: _propTypes.default.bool,
+  children: _propTypes.default.node.isRequired,
+  /**
+   * `disabled`, if true, stops the <Draggable> from dragging. All handlers,
+   * with the exception of `onMouseDown`, will not fire.
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * By default, we add 'user-select:none' attributes to the document body
+   * to prevent ugly text selection during drag. If this is causing problems
+   * for your app, set this to `false`.
+   */
+  enableUserSelectHack: _propTypes.default.bool,
+  /**
+   * `offsetParent`, if set, uses the passed DOM node to compute drag offsets
+   * instead of using the parent node.
+   */
+  offsetParent: function (props /*: DraggableCoreProps*/, propName /*: $Keys<DraggableCoreProps>*/) {
+    if (props[propName] && props[propName].nodeType !== 1) {
+      throw new Error('Draggable\'s offsetParent must be a DOM Node.');
+    }
+  },
+  /**
+   * `grid` specifies the x and y that dragging should snap to.
+   */
+  grid: _propTypes.default.arrayOf(_propTypes.default.number),
+  /**
+   * `handle` specifies a selector to be used as the handle that initiates drag.
+   *
+   * Example:
+   *
+   * ```jsx
+   *   let App = React.createClass({
+   *       render: function () {
+   *         return (
+   *            <Draggable handle=".handle">
+   *              <div>
+   *                  <div className="handle">Click me to drag</div>
+   *                  <div>This is some other content</div>
+   *              </div>
+   *           </Draggable>
+   *         );
+   *       }
+   *   });
+   * ```
+   */
+  handle: _propTypes.default.string,
+  /**
+   * `cancel` specifies a selector to be used to prevent drag initialization.
+   *
+   * Example:
+   *
+   * ```jsx
+   *   let App = React.createClass({
+   *       render: function () {
+   *           return(
+   *               <Draggable cancel=".cancel">
+   *                   <div>
+   *                     <div className="cancel">You can't drag from here</div>
+   *                     <div>Dragging here works fine</div>
+   *                   </div>
+   *               </Draggable>
+   *           );
+   *       }
+   *   });
+   * ```
+   */
+  cancel: _propTypes.default.string,
+  /* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
+   * Unfortunately, in order for <Draggable> to work properly, we need raw access
+   * to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
+   * as in this example:
+   *
+   * function MyComponent() {
+   *   const nodeRef = React.useRef(null);
+   *   return (
+   *     <Draggable nodeRef={nodeRef}>
+   *       <div ref={nodeRef}>Example Target</div>
+   *     </Draggable>
+   *   );
+   * }
+   *
+   * This can be used for arbitrarily nested components, so long as the ref ends up
+   * pointing to the actual child DOM node and not a custom component.
+   */
+  nodeRef: _propTypes.default.object,
+  /**
+   * Called when dragging starts.
+   * If this function returns the boolean false, dragging will be canceled.
+   */
+  onStart: _propTypes.default.func,
+  /**
+   * Called while dragging.
+   * If this function returns the boolean false, dragging will be canceled.
+   */
+  onDrag: _propTypes.default.func,
+  /**
+   * Called when dragging stops.
+   * If this function returns the boolean false, the drag will remain active.
+   */
+  onStop: _propTypes.default.func,
+  /**
+   * A workaround option which can be passed if onMouseDown needs to be accessed,
+   * since it'll always be blocked (as there is internal use of onMouseDown)
+   */
+  onMouseDown: _propTypes.default.func,
+  /**
+   * `scale`, if set, applies scaling while dragging an element
+   */
+  scale: _propTypes.default.number,
+  /**
+   * These properties should be defined on the child, not here.
+   */
+  className: _shims.dontSetMe,
+  style: _shims.dontSetMe,
+  transform: _shims.dontSetMe
+});
+_defineProperty(DraggableCore$1, "defaultProps", {
+  allowAnyClick: false,
+  // by default only accept left click
+  disabled: false,
+  enableUserSelectHack: true,
+  onStart: function () {},
+  onDrag: function () {},
+  onStop: function () {},
+  onMouseDown: function () {},
+  scale: 1
+});
+
+(function (exports) {
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	Object.defineProperty(exports, "DraggableCore", {
+	  enumerable: true,
+	  get: function () {
+	    return _DraggableCore.default;
+	  }
+	});
+	exports.default = void 0;
+	var React = _interopRequireWildcard(React__default);
+	var _propTypes = _interopRequireDefault(require$$1);
+	var _reactDom = _interopRequireDefault(ReactDOM__default);
+	var _clsx = _interopRequireDefault(require$$3);
+	var _domFns = domFns;
+	var _positionFns = positionFns;
+	var _shims = shims;
+	var _DraggableCore = _interopRequireDefault(DraggableCore$2);
+	var _log = _interopRequireDefault(log$1);
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+	function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+	function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+	function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+	function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+	function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+	function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*:: import type {ControlPosition, PositionOffsetControlPosition, DraggableCoreProps, DraggableCoreDefaultProps} from './DraggableCore';*/
+	/*:: import type {Bounds, DraggableEventHandler} from './utils/types';*/
+	/*:: import type {Element as ReactElement} from 'react';*/
+	/*:: type DraggableState = {
+	  dragging: boolean,
+	  dragged: boolean,
+	  x: number, y: number,
+	  slackX: number, slackY: number,
+	  isElementSVG: boolean,
+	  prevPropsPosition: ?ControlPosition,
+	};*/
+	/*:: export type DraggableDefaultProps = {
+	  ...DraggableCoreDefaultProps,
+	  axis: 'both' | 'x' | 'y' | 'none',
+	  bounds: Bounds | string | false,
+	  defaultClassName: string,
+	  defaultClassNameDragging: string,
+	  defaultClassNameDragged: string,
+	  defaultPosition: ControlPosition,
+	  scale: number,
+	};*/
+	/*:: export type DraggableProps = {
+	  ...DraggableCoreProps,
+	  ...DraggableDefaultProps,
+	  positionOffset: PositionOffsetControlPosition,
+	  position: ControlPosition,
+	};*/
+	//
+	// Define <Draggable>
+	//
+	class Draggable extends React.Component /*:: <DraggableProps, DraggableState>*/{
+	  // React 16.3+
+	  // Arity (props, state)
+	  static getDerivedStateFromProps(_ref /*:: */, _ref2 /*:: */) /*: ?Partial<DraggableState>*/{
+	    let {
+	      position
+	    } /*: DraggableProps*/ = _ref /*: DraggableProps*/;
+	    let {
+	      prevPropsPosition
+	    } /*: DraggableState*/ = _ref2 /*: DraggableState*/;
+	    // Set x/y if a new position is provided in props that is different than the previous.
+	    if (position && (!prevPropsPosition || position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y)) {
+	      (0, _log.default)('Draggable: getDerivedStateFromProps %j', {
+	        position,
+	        prevPropsPosition
+	      });
+	      return {
+	        x: position.x,
+	        y: position.y,
+	        prevPropsPosition: {
+	          ...position
+	        }
+	      };
+	    }
+	    return null;
+	  }
+	  constructor(props /*: DraggableProps*/) {
+	    super(props);
+	    _defineProperty(this, "onDragStart", (e, coreData) => {
+	      (0, _log.default)('Draggable: onDragStart: %j', coreData);
+
+	      // Short-circuit if user's callback killed it.
+	      const shouldStart = this.props.onStart(e, (0, _positionFns.createDraggableData)(this, coreData));
+	      // Kills start event on core as well, so move handlers are never bound.
+	      if (shouldStart === false) return false;
+	      this.setState({
+	        dragging: true,
+	        dragged: true
+	      });
+	    });
+	    _defineProperty(this, "onDrag", (e, coreData) => {
+	      if (!this.state.dragging) return false;
+	      (0, _log.default)('Draggable: onDrag: %j', coreData);
+	      const uiData = (0, _positionFns.createDraggableData)(this, coreData);
+	      const newState = {
+	        x: uiData.x,
+	        y: uiData.y,
+	        slackX: 0,
+	        slackY: 0
+	      };
+
+	      // Keep within bounds.
+	      if (this.props.bounds) {
+	        // Save original x and y.
+	        const {
+	          x,
+	          y
+	        } = newState;
+
+	        // Add slack to the values used to calculate bound position. This will ensure that if
+	        // we start removing slack, the element won't react to it right away until it's been
+	        // completely removed.
+	        newState.x += this.state.slackX;
+	        newState.y += this.state.slackY;
+
+	        // Get bound position. This will ceil/floor the x and y within the boundaries.
+	        const [newStateX, newStateY] = (0, _positionFns.getBoundPosition)(this, newState.x, newState.y);
+	        newState.x = newStateX;
+	        newState.y = newStateY;
+
+	        // Recalculate slack by noting how much was shaved by the boundPosition handler.
+	        newState.slackX = this.state.slackX + (x - newState.x);
+	        newState.slackY = this.state.slackY + (y - newState.y);
+
+	        // Update the event we fire to reflect what really happened after bounds took effect.
+	        uiData.x = newState.x;
+	        uiData.y = newState.y;
+	        uiData.deltaX = newState.x - this.state.x;
+	        uiData.deltaY = newState.y - this.state.y;
+	      }
+
+	      // Short-circuit if user's callback killed it.
+	      const shouldUpdate = this.props.onDrag(e, uiData);
+	      if (shouldUpdate === false) return false;
+	      this.setState(newState);
+	    });
+	    _defineProperty(this, "onDragStop", (e, coreData) => {
+	      if (!this.state.dragging) return false;
+
+	      // Short-circuit if user's callback killed it.
+	      const shouldContinue = this.props.onStop(e, (0, _positionFns.createDraggableData)(this, coreData));
+	      if (shouldContinue === false) return false;
+	      (0, _log.default)('Draggable: onDragStop: %j', coreData);
+	      const newState /*: Partial<DraggableState>*/ = {
+	        dragging: false,
+	        slackX: 0,
+	        slackY: 0
+	      };
+
+	      // If this is a controlled component, the result of this operation will be to
+	      // revert back to the old position. We expect a handler on `onDragStop`, at the least.
+	      const controlled = Boolean(this.props.position);
+	      if (controlled) {
+	        const {
+	          x,
+	          y
+	        } = this.props.position;
+	        newState.x = x;
+	        newState.y = y;
+	      }
+	      this.setState(newState);
+	    });
+	    this.state = {
+	      // Whether or not we are currently dragging.
+	      dragging: false,
+	      // Whether or not we have been dragged before.
+	      dragged: false,
+	      // Current transform x and y.
+	      x: props.position ? props.position.x : props.defaultPosition.x,
+	      y: props.position ? props.position.y : props.defaultPosition.y,
+	      prevPropsPosition: {
+	        ...props.position
+	      },
+	      // Used for compensating for out-of-bounds drags
+	      slackX: 0,
+	      slackY: 0,
+	      // Can only determine if SVG after mounting
+	      isElementSVG: false
+	    };
+	    if (props.position && !(props.onDrag || props.onStop)) {
+	      // eslint-disable-next-line no-console
+	      console.warn('A `position` was applied to this <Draggable>, without drag handlers. This will make this ' + 'component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the ' + '`position` of this element.');
+	    }
+	  }
+	  componentDidMount() {
+	    // Check to see if the element passed is an instanceof SVGElement
+	    if (typeof window.SVGElement !== 'undefined' && this.findDOMNode() instanceof window.SVGElement) {
+	      this.setState({
+	        isElementSVG: true
+	      });
+	    }
+	  }
+	  componentWillUnmount() {
+	    this.setState({
+	      dragging: false
+	    }); // prevents invariant if unmounted while dragging
+	  }
+
+	  // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
+	  // the underlying DOM node ourselves. See the README for more information.
+	  findDOMNode() /*: ?HTMLElement*/{
+	    var _this$props$nodeRef$c, _this$props;
+	    return (_this$props$nodeRef$c = (_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.nodeRef) === null || _this$props === void 0 ? void 0 : _this$props.current) !== null && _this$props$nodeRef$c !== void 0 ? _this$props$nodeRef$c : _reactDom.default.findDOMNode(this);
+	  }
+	  render() /*: ReactElement<any>*/{
+	    const {
+	      axis,
+	      bounds,
+	      children,
+	      defaultPosition,
+	      defaultClassName,
+	      defaultClassNameDragging,
+	      defaultClassNameDragged,
+	      position,
+	      positionOffset,
+	      scale,
+	      ...draggableCoreProps
+	    } = this.props;
+	    let style = {};
+	    let svgTransform = null;
+
+	    // If this is controlled, we don't want to move it - unless it's dragging.
+	    const controlled = Boolean(position);
+	    const draggable = !controlled || this.state.dragging;
+	    const validPosition = position || defaultPosition;
+	    const transformOpts = {
+	      // Set left if horizontal drag is enabled
+	      x: (0, _positionFns.canDragX)(this) && draggable ? this.state.x : validPosition.x,
+	      // Set top if vertical drag is enabled
+	      y: (0, _positionFns.canDragY)(this) && draggable ? this.state.y : validPosition.y
+	    };
+
+	    // If this element was SVG, we use the `transform` attribute.
+	    if (this.state.isElementSVG) {
+	      svgTransform = (0, _domFns.createSVGTransform)(transformOpts, positionOffset);
+	    } else {
+	      // Add a CSS transform to move the element around. This allows us to move the element around
+	      // without worrying about whether or not it is relatively or absolutely positioned.
+	      // If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>
+	      // has a clean slate.
+	      style = (0, _domFns.createCSSTransform)(transformOpts, positionOffset);
+	    }
+
+	    // Mark with class while dragging
+	    const className = (0, _clsx.default)(children.props.className || '', defaultClassName, {
+	      [defaultClassNameDragging]: this.state.dragging,
+	      [defaultClassNameDragged]: this.state.dragged
+	    });
+
+	    // Reuse the child provided
+	    // This makes it flexible to use whatever element is wanted (div, ul, etc)
+	    return /*#__PURE__*/React.createElement(_DraggableCore.default, _extends({}, draggableCoreProps, {
+	      onStart: this.onDragStart,
+	      onDrag: this.onDrag,
+	      onStop: this.onDragStop
+	    }), /*#__PURE__*/React.cloneElement(React.Children.only(children), {
+	      className: className,
+	      style: {
+	        ...children.props.style,
+	        ...style
+	      },
+	      transform: svgTransform
+	    }));
+	  }
+	}
+	exports.default = Draggable;
+	_defineProperty(Draggable, "displayName", 'Draggable');
+	_defineProperty(Draggable, "propTypes", {
+	  // Accepts all props <DraggableCore> accepts.
+	  ..._DraggableCore.default.propTypes,
+	  /**
+	   * `axis` determines which axis the draggable can move.
+	   *
+	   *  Note that all callbacks will still return data as normal. This only
+	   *  controls flushing to the DOM.
+	   *
+	   * 'both' allows movement horizontally and vertically.
+	   * 'x' limits movement to horizontal axis.
+	   * 'y' limits movement to vertical axis.
+	   * 'none' limits all movement.
+	   *
+	   * Defaults to 'both'.
+	   */
+	  axis: _propTypes.default.oneOf(['both', 'x', 'y', 'none']),
+	  /**
+	   * `bounds` determines the range of movement available to the element.
+	   * Available values are:
+	   *
+	   * 'parent' restricts movement within the Draggable's parent node.
+	   *
+	   * Alternatively, pass an object with the following properties, all of which are optional:
+	   *
+	   * {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
+	   *
+	   * All values are in px.
+	   *
+	   * Example:
+	   *
+	   * ```jsx
+	   *   let App = React.createClass({
+	   *       render: function () {
+	   *         return (
+	   *            <Draggable bounds={{right: 300, bottom: 300}}>
+	   *              <div>Content</div>
+	   *           </Draggable>
+	   *         );
+	   *       }
+	   *   });
+	   * ```
+	   */
+	  bounds: _propTypes.default.oneOfType([_propTypes.default.shape({
+	    left: _propTypes.default.number,
+	    right: _propTypes.default.number,
+	    top: _propTypes.default.number,
+	    bottom: _propTypes.default.number
+	  }), _propTypes.default.string, _propTypes.default.oneOf([false])]),
+	  defaultClassName: _propTypes.default.string,
+	  defaultClassNameDragging: _propTypes.default.string,
+	  defaultClassNameDragged: _propTypes.default.string,
+	  /**
+	   * `defaultPosition` specifies the x and y that the dragged item should start at
+	   *
+	   * Example:
+	   *
+	   * ```jsx
+	   *      let App = React.createClass({
+	   *          render: function () {
+	   *              return (
+	   *                  <Draggable defaultPosition={{x: 25, y: 25}}>
+	   *                      <div>I start with transformX: 25px and transformY: 25px;</div>
+	   *                  </Draggable>
+	   *              );
+	   *          }
+	   *      });
+	   * ```
+	   */
+	  defaultPosition: _propTypes.default.shape({
+	    x: _propTypes.default.number,
+	    y: _propTypes.default.number
+	  }),
+	  positionOffset: _propTypes.default.shape({
+	    x: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+	    y: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+	  }),
+	  /**
+	   * `position`, if present, defines the current position of the element.
+	   *
+	   *  This is similar to how form elements in React work - if no `position` is supplied, the component
+	   *  is uncontrolled.
+	   *
+	   * Example:
+	   *
+	   * ```jsx
+	   *      let App = React.createClass({
+	   *          render: function () {
+	   *              return (
+	   *                  <Draggable position={{x: 25, y: 25}}>
+	   *                      <div>I start with transformX: 25px and transformY: 25px;</div>
+	   *                  </Draggable>
+	   *              );
+	   *          }
+	   *      });
+	   * ```
+	   */
+	  position: _propTypes.default.shape({
+	    x: _propTypes.default.number,
+	    y: _propTypes.default.number
+	  }),
+	  /**
+	   * These properties should be defined on the child, not here.
+	   */
+	  className: _shims.dontSetMe,
+	  style: _shims.dontSetMe,
+	  transform: _shims.dontSetMe
+	});
+	_defineProperty(Draggable, "defaultProps", {
+	  ..._DraggableCore.default.defaultProps,
+	  axis: 'both',
+	  bounds: false,
+	  defaultClassName: 'react-draggable',
+	  defaultClassNameDragging: 'react-draggable-dragging',
+	  defaultClassNameDragged: 'react-draggable-dragged',
+	  defaultPosition: {
+	    x: 0,
+	    y: 0
+	  },
+	  scale: 1
+	});
+} (Draggable$1));
+
+const {
+  default: Draggable,
+  DraggableCore
+} = Draggable$1;
+
+// Previous versions of this lib exported <Draggable> as the root export. As to no-// them, or TypeScript, we export *both* as the root and as 'default'.
+// See https://github.com/mzabriskie/react-draggable/pull/254
+// and https://github.com/mzabriskie/react-draggable/issues/266
+cjs.exports = Draggable;
+cjsExports.default = Draggable;
+var DraggableCore_1 = cjsExports.DraggableCore = DraggableCore;
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+var doc = (typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object' ? document : null;
+var isBrowser = typeof window !== 'undefined' && typeof navigator !== 'undefined' && typeof document !== 'undefined';
+var isUndef = function isUndef(v) {
+  return typeof v === 'undefined';
+};
+var isFun = function isFun(v) {
+  return typeof v === 'function';
+};
+var isNum = function isNum(v) {
+  return typeof v === 'number';
+};
+/**
+ * @description Will return renderer result if presented, div element otherwise.
+ * If renderer is presented it'll receive `elementRef` function which should be used as HTMLElement's ref.
+ *
+ * @param props {ElementPropsWithElementRefAndRenderer}
+ * @param elementRef {ElementRef}
+ */
+
+var renderDivWithRenderer = function renderDivWithRenderer(props, elementRef) {
+  if (isFun(props.renderer)) {
+    props.elementRef = elementRef;
+    var renderer = props.renderer;
+    delete props.renderer;
+    return renderer(props);
+  }
+
+  delete props.elementRef;
+  return React$1.createElement("div", __assign({}, props, {
+    ref: elementRef
+  }));
+};
+
+var getInnerSize = function getInnerSize(el, dimension, padding1, padding2) {
+  var styles = getComputedStyle(el);
+
+  if (styles.boxSizing === 'border-box') {
+    return Math.max(0, (Number.parseFloat(styles[dimension]) || 0) - (Number.parseFloat(styles[padding1]) || 0) - (Number.parseFloat(styles[padding2]) || 0));
+  }
+
+  return Number.parseFloat(styles[dimension]) || 0;
+};
+/**
+ * @description Return element's height without padding
+ */
+
+
+var getInnerHeight = function getInnerHeight(el) {
+  return getInnerSize(el, 'height', 'paddingTop', 'paddingBottom');
+};
+/**
+ * @description Return element's width without padding
+ */
+
+var getInnerWidth = function getInnerWidth(el) {
+  return getInnerSize(el, 'width', 'paddingLeft', 'paddingRight');
+};
+/**
+ * @description Return unique UUID v4
+ */
+
+var uuid = function uuid() {
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  var uuid = '';
+
+  for (var i = 0; i < 32; i++) {
+    switch (i) {
+      case 8:
+      case 20:
+        {
+          uuid += "-".concat(Math.trunc(Math.random() * 16).toString(16));
+          break;
+        }
+
+      case 12:
+        {
+          uuid += '-4';
+          break;
+        }
+
+      case 16:
+        {
+          uuid += "-".concat((Math.random() * 16 | 0 & 3 | 8).toString(16));
+          break;
+        }
+
+      default:
+        {
+          uuid += Math.trunc(Math.random() * 16).toString(16);
+        }
+    }
+  }
+
+  return uuid;
+};
+/**
+ * @description Calculate thumb size for given viewport and track parameters
+ *
+ * @param {number} contentSize - Scrollable content size
+ * @param {number} viewportSize - Viewport size
+ * @param {number} trackSize - Track size thumb can move
+ * @param {number} minimalSize - Minimal thumb's size
+ * @param {number} maximalSize - Maximal thumb's size
+ */
+
+var calcThumbSize = function calcThumbSize(contentSize, viewportSize, trackSize, minimalSize, maximalSize) {
+  if (viewportSize >= contentSize) {
+    return 0;
+  }
+
+  var thumbSize = viewportSize / contentSize * trackSize;
+
+  if (isNum(maximalSize)) {
+    thumbSize = Math.min(maximalSize, thumbSize);
+  }
+
+  if (isNum(minimalSize)) {
+    thumbSize = Math.max(minimalSize, thumbSize);
+  }
+
+  return thumbSize;
+};
+/**
+ * @description Calculate thumb offset for given viewport, track and thumb parameters
+ *
+ * @param {number} contentSize - Scrollable content size
+ * @param {number} viewportSize - Viewport size
+ * @param {number} trackSize - Track size thumb can move
+ * @param {number} thumbSize - Thumb size
+ * @param {number} scroll - Scroll value to represent
+ */
+
+var calcThumbOffset = function calcThumbOffset(contentSize, viewportSize, trackSize, thumbSize, scroll) {
+  if (!scroll || !thumbSize || viewportSize >= contentSize) {
+    return 0;
+  }
+
+  return (trackSize - thumbSize) * scroll / (contentSize - viewportSize);
+};
+/**
+ * @description Calculate scroll for given viewport, track and thumb parameters
+ *
+ * @param {number} contentSize - Scrollable content size
+ * @param {number} viewportSize - Viewport size
+ * @param {number} trackSize - Track size thumb can move
+ * @param {number} thumbSize - Thumb size
+ * @param {number} thumbOffset - Thumb's offset representing the scroll
+ */
+
+var calcScrollForThumbOffset = function calcScrollForThumbOffset(contentSize, viewportSize, trackSize, thumbSize, thumbOffset) {
+  if (!thumbOffset || !thumbSize || viewportSize >= contentSize) {
+    return 0;
+  }
+
+  return thumbOffset * (contentSize - viewportSize) / (trackSize - thumbSize);
+};
+/**
+ * @description Returns scrollbar width specific for current environment. Can return undefined if DOM is not ready yet.
+ */
+
+var getScrollbarWidth = function getScrollbarWidth(force) {
+  if (force === void 0) {
+    force = false;
+  }
+
+  if (!doc) {
+    getScrollbarWidth._cache = 0;
+    return getScrollbarWidth._cache;
+  }
+
+  if (!force && !isUndef(getScrollbarWidth._cache)) {
+    return getScrollbarWidth._cache;
+  }
+
+  var el = doc.createElement('div');
+  el.setAttribute('style', 'position:absolute;width:100px;height:100px;top:-999px;left:-999px;overflow:scroll;');
+  doc.body.append(el);
+  /* istanbul ignore next */
+
+  if (el.clientWidth === 0) {
+    // Do not even cache this value because there is no calculations. Issue https://github.com/xobotyi/react-scrollbars-custom/issues/123
+    el.remove();
+    return;
+  }
+
+  getScrollbarWidth._cache = 100 - el.clientWidth;
+  el.remove();
+  return getScrollbarWidth._cache;
+};
+/**
+ * @description Detect need of horizontal scroll reverse while RTL.
+ */
+
+var shouldReverseRtlScroll = function shouldReverseRtlScroll(force) {
+  if (force === void 0) {
+    force = false;
+  }
+
+  if (!force && !isUndef(shouldReverseRtlScroll._cache)) {
+    return shouldReverseRtlScroll._cache;
+  }
+
+  if (!doc) {
+    shouldReverseRtlScroll._cache = false;
+    return shouldReverseRtlScroll._cache;
+  }
+
+  var el = doc.createElement('div');
+  var child = doc.createElement('div');
+  el.append(child);
+  el.setAttribute('style', 'position:absolute;width:100px;height:100px;top:-999px;left:-999px;overflow:scroll;direction:rtl');
+  child.setAttribute('style', 'width:1000px;height:1000px');
+  doc.body.append(el);
+  el.scrollLeft = -50;
+  shouldReverseRtlScroll._cache = el.scrollLeft === -50;
+  el.remove();
+  return shouldReverseRtlScroll._cache;
+};
+
+var Emittr =
+/** @class */
+function () {
+  function Emittr(maxHandlers) {
+    if (maxHandlers === void 0) {
+      maxHandlers = 10;
+    }
+
+    this.setMaxHandlers(maxHandlers);
+    this._handlers = Object.create(null);
+  }
+
+  Emittr._callEventHandlers = function (emitter, handlers, args) {
+    if (!handlers.length) {
+      return;
+    }
+
+    if (handlers.length === 1) {
+      Reflect.apply(handlers[0], emitter, args);
+      return;
+    }
+
+    handlers = __spreadArray([], handlers, true);
+    var idx;
+
+    for (idx = 0; idx < handlers.length; idx++) {
+      Reflect.apply(handlers[idx], emitter, args);
+    }
+  };
+
+  Emittr.prototype.setMaxHandlers = function (count) {
+    if (!isNum(count) || count <= 0) {
+      throw new TypeError("Expected maxHandlers to be a positive number, got '".concat(count, "' of type ").concat(_typeof(count)));
+    }
+
+    this._maxHandlers = count;
+    return this;
+  };
+
+  Emittr.prototype.getMaxHandlers = function () {
+    return this._maxHandlers;
+  };
+
+  Emittr.prototype.emit = function (name) {
+    var args = [];
+
+    for (var _i = 1; _i < arguments.length; _i++) {
+      args[_i - 1] = arguments[_i];
+    }
+
+    if (_typeof(this._handlers[name]) !== 'object' || !Array.isArray(this._handlers[name])) {
+      return false;
+    }
+
+    Emittr._callEventHandlers(this, this._handlers[name], args);
+
+    return true;
+  };
+
+  Emittr.prototype.on = function (name, handler) {
+    Emittr._addHandler(this, name, handler);
+
+    return this;
+  };
+
+  Emittr.prototype.prependOn = function (name, handler) {
+    Emittr._addHandler(this, name, handler, true);
+
+    return this;
+  };
+
+  Emittr.prototype.once = function (name, handler) {
+    if (!isFun(handler)) {
+      throw new TypeError("Expected event handler to be a function, got ".concat(_typeof(handler)));
+    }
+
+    Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler));
+
+    return this;
+  };
+
+  Emittr.prototype.prependOnce = function (name, handler) {
+    if (!isFun(handler)) {
+      throw new TypeError("Expected event handler to be a function, got ".concat(_typeof(handler)));
+    }
+
+    Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler), true);
+
+    return this;
+  };
+
+  Emittr.prototype.off = function (name, handler) {
+    Emittr._removeHandler(this, name, handler);
+
+    return this;
+  };
+
+  Emittr.prototype.removeAllHandlers = function () {
+    var handlers = this._handlers;
+    this._handlers = Object.create(null);
+    var removeHandlers = handlers.removeHandler;
+    delete handlers.removeHandler;
+    var idx;
+    var eventName; // eslint-disable-next-line guard-for-in,no-restricted-syntax
+
+    for (eventName in handlers) {
+      for (idx = handlers[eventName].length - 1; idx >= 0; idx--) {
+        Emittr._callEventHandlers(this, removeHandlers, [eventName, handlers[eventName][idx].handler || handlers[eventName][idx]]);
+      }
+    }
+
+    return this;
+  };
+
+  Emittr.prototype._wrapOnceHandler = function (name, handler) {
+    var onceState = {
+      fired: false,
+      handler: handler,
+      wrappedHandler: undefined,
+      emitter: this,
+      event: name
+    };
+
+    var wrappedHandler = Emittr._onceWrapper.bind(onceState);
+
+    onceState.wrappedHandler = wrappedHandler;
+    wrappedHandler.handler = handler;
+    wrappedHandler.event = name;
+    return wrappedHandler;
+  };
+
+  Emittr._addHandler = function (emitter, name, handler, prepend) {
+    if (prepend === void 0) {
+      prepend = false;
+    }
+
+    if (!isFun(handler)) {
+      throw new TypeError("Expected event handler to be a function, got ".concat(_typeof(handler)));
+    }
+
+    emitter._handlers[name] = emitter._handlers[name] || [];
+    emitter.emit('addHandler', name, handler);
+
+    if (prepend) {
+      emitter._handlers[name].unshift(handler);
+    } else {
+      emitter._handlers[name].push(handler);
+    }
+
+    return emitter;
+  };
+
+  Emittr._onceWrapper = function _onceWrapper() {
+    var args = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      args[_i] = arguments[_i];
+    }
+
+    if (!this.fired) {
+      this.fired = true;
+      this.emitter.off(this.event, this.wrappedHandler);
+      Reflect.apply(this.handler, this.emitter, args);
+    }
+  };
+
+  Emittr._removeHandler = function (emitter, name, handler) {
+    if (!isFun(handler)) {
+      throw new TypeError("Expected event handler to be a function, got ".concat(_typeof(handler)));
+    }
+
+    if (isUndef(emitter._handlers[name]) || !emitter._handlers[name].length) {
+      return emitter;
+    }
+
+    var idx = -1;
+
+    if (emitter._handlers[name].length === 1) {
+      if (emitter._handlers[name][0] === handler || emitter._handlers[name][0].handler === handler) {
+        idx = 0;
+        handler = emitter._handlers[name][0].handler || emitter._handlers[name][0];
+      }
+    } else {
+      for (idx = emitter._handlers[name].length - 1; idx >= 0; idx--) {
+        if (emitter._handlers[name][idx] === handler || emitter._handlers[name][idx].handler === handler) {
+          handler = emitter._handlers[name][idx].handler || emitter._handlers[name][idx];
+          break;
+        }
+      }
+    }
+
+    if (idx === -1) {
+      return emitter;
+    }
+
+    if (idx === 0) {
+      emitter._handlers[name].shift();
+    } else {
+      emitter._handlers[name].splice(idx, 1);
+    }
+
+    emitter.emit('removeHandler', name, handler);
+    return emitter;
+  };
+
+  return Emittr;
+}();
+
+var RAFLoop =
+/** @class */
+function () {
+  function RAFLoop() {
+    var _this = this;
+    /**
+     * @description List of targets to update
+     */
+
+
+    this.targets = [];
+    /**
+     * @description ID of requested animation frame. Valuable only if loop is active and has items to iterate.
+     */
+
+    this.animationFrameID = 0;
+    /**
+     * @description Loop's state.
+     */
+
+    this._isActive = false;
+    /**
+     * @description Start the loop if it wasn't yet.
+     */
+
+    this.start = function () {
+      if (!_this._isActive && _this.targets.length) {
+        _this._isActive = true;
+        if (_this.animationFrameID) cancelAnimationFrame(_this.animationFrameID);
+        _this.animationFrameID = requestAnimationFrame(_this.rafCallback);
+      }
+
+      return _this;
+    };
+    /**
+     * @description Stop the loop if is was active.
+     */
+
+
+    this.stop = function () {
+      if (_this._isActive) {
+        _this._isActive = false;
+        if (_this.animationFrameID) cancelAnimationFrame(_this.animationFrameID);
+        _this.animationFrameID = 0;
+      }
+
+      return _this;
+    };
+    /**
+     * @description Add target to the iteration list if it's not there.
+     */
+
+
+    this.addTarget = function (target, silent) {
+      if (silent === void 0) {
+        silent = false;
+      }
+
+      if (!_this.targets.includes(target)) {
+        _this.targets.push(target);
+
+        if (_this.targets.length === 1 && !silent) _this.start();
+      }
+
+      return _this;
+    };
+    /**
+     * @description Remove target from iteration list if it was there.
+     */
+
+
+    this.removeTarget = function (target) {
+      var idx = _this.targets.indexOf(target);
+
+      if (idx !== -1) {
+        _this.targets.splice(idx, 1);
+
+        if (_this.targets.length === 0) _this.stop();
+      }
+
+      return _this;
+    };
+    /**
+     * @description Callback that called each animation frame.
+     */
+
+
+    this.rafCallback = function () {
+      if (!_this._isActive) {
+        return 0;
+      }
+
+      for (var i = 0; i < _this.targets.length; i++) {
+        if (!_this.targets[i]._unmounted) _this.targets[i].update();
+      }
+
+      _this.animationFrameID = requestAnimationFrame(_this.rafCallback);
+      return _this.animationFrameID;
+    };
+  }
+
+  Object.defineProperty(RAFLoop.prototype, "isActive", {
+    /**
+     * @description Loop's state.
+     */
+    get: function get() {
+      return this._isActive;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  return RAFLoop;
+}();
+var Loop = new RAFLoop();
+
+var AXIS_DIRECTION;
+
+(function (AXIS_DIRECTION) {
+  AXIS_DIRECTION["X"] = "x";
+  AXIS_DIRECTION["Y"] = "y";
+})(AXIS_DIRECTION || (AXIS_DIRECTION = {}));
+
+var TRACK_CLICK_BEHAVIOR;
+
+(function (TRACK_CLICK_BEHAVIOR) {
+  TRACK_CLICK_BEHAVIOR["JUMP"] = "jump";
+  TRACK_CLICK_BEHAVIOR["STEP"] = "step";
+})(TRACK_CLICK_BEHAVIOR || (TRACK_CLICK_BEHAVIOR = {}));
+
+var ScrollbarThumb =
+/** @class */
+function (_super) {
+  __extends(ScrollbarThumb, _super);
+
+  function ScrollbarThumb() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.element = null;
+    _this.initialOffsetX = 0;
+    _this.initialOffsetY = 0;
+    _this.elementRefHack = React$1.createRef();
+    _this.lastDragData = {
+      x: 0,
+      y: 0,
+      deltaX: 0,
+      deltaY: 0,
+      lastX: 0,
+      lastY: 0
+    };
+
+    _this.handleOnDragStart = function (ev, data) {
+      if (!_this.element) {
+        _this.handleOnDragStop(ev, data);
+
+        return;
+      }
+
+      if (isBrowser) {
+        _this.prevUserSelect = document.body.style.userSelect;
+        document.body.style.userSelect = 'none';
+        _this.prevOnSelectStart = document.onselectstart;
+        document.addEventListener('selectstart', ScrollbarThumb.selectStartReplacer);
+      }
+
+      if (_this.props.onDragStart) {
+        _this.props.onDragStart(_this.lastDragData = {
+          x: data.x - _this.initialOffsetX,
+          y: data.y - _this.initialOffsetY,
+          lastX: data.lastX - _this.initialOffsetX,
+          lastY: data.lastY - _this.initialOffsetY,
+          deltaX: data.deltaX,
+          deltaY: data.deltaY
+        });
+      }
+
+      _this.element.classList.add('dragging');
+    };
+
+    _this.handleOnDrag = function (ev, data) {
+      if (!_this.element) {
+        _this.handleOnDragStop(ev, data);
+
+        return;
+      }
+
+      if (_this.props.onDrag) {
+        _this.props.onDrag(_this.lastDragData = {
+          x: data.x - _this.initialOffsetX,
+          y: data.y - _this.initialOffsetY,
+          lastX: data.lastX - _this.initialOffsetX,
+          lastY: data.lastY - _this.initialOffsetY,
+          deltaX: data.deltaX,
+          deltaY: data.deltaY
+        });
+      }
+    };
+
+    _this.handleOnDragStop = function (ev, data) {
+      var resultData = data ? {
+        x: data.x - _this.initialOffsetX,
+        y: data.y - _this.initialOffsetY,
+        lastX: data.lastX - _this.initialOffsetX,
+        lastY: data.lastY - _this.initialOffsetY,
+        deltaX: data.deltaX,
+        deltaY: data.deltaY
+      } : _this.lastDragData;
+      if (_this.props.onDragEnd) _this.props.onDragEnd(resultData);
+      if (_this.element) _this.element.classList.remove('dragging');
+
+      if (isBrowser) {
+        document.body.style.userSelect = _this.prevUserSelect;
+
+        if (_this.prevOnSelectStart) {
+          document.addEventListener('selectstart', _this.prevOnSelectStart);
+        }
+
+        _this.prevOnSelectStart = null;
+      }
+
+      _this.initialOffsetX = 0;
+      _this.initialOffsetY = 0;
+      _this.lastDragData = {
+        x: 0,
+        y: 0,
+        deltaX: 0,
+        deltaY: 0,
+        lastX: 0,
+        lastY: 0
+      };
+    };
+
+    _this.handleOnMouseDown = function (ev) {
+      if (!_this.element) {
+        return;
+      }
+
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      if (!isUndef(ev.offsetX)) {
+        /* istanbul ignore next */
+        _this.initialOffsetX = ev.offsetX;
+        /* istanbul ignore next */
+
+        _this.initialOffsetY = ev.offsetY;
+      } else {
+        var rect = _this.element.getBoundingClientRect();
+
+        _this.initialOffsetX = (ev.clientX || ev.touches[0].clientX) - rect.left;
+        _this.initialOffsetY = (ev.clientY || ev.touches[0].clientY) - rect.top;
+      }
+    };
+
+    _this.elementRef = function (ref) {
+      if (isFun(_this.props.elementRef)) _this.props.elementRef(ref);
+      _this.element = ref; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+
+      _this.elementRefHack.current = ref;
+    };
+
+    return _this;
+  }
+
+  ScrollbarThumb.prototype.componentDidMount = function () {
+    if (!this.element) {
+      this.setState(function () {
+        throw new Error("<ScrollbarThumb> Element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
+      });
+    }
+  };
+
+  ScrollbarThumb.prototype.componentWillUnmount = function () {
+    this.handleOnDragStop();
+    this.elementRef(null);
+  };
+
+  ScrollbarThumb.prototype.render = function () {
+    var _a = this.props;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.elementRef;
+        var axis = _a.axis;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.onDrag;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.onDragEnd;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.onDragStart;
+        var props = __rest(_a, ["elementRef", "axis", "onDrag", "onDragEnd", "onDragStart"]);
+
+    props.className = cnb('ScrollbarsCustom-Thumb', axis === AXIS_DIRECTION.X ? 'ScrollbarsCustom-ThumbX' : 'ScrollbarsCustom-ThumbY', props.className);
+
+    if (props.renderer) {
+      props.axis = axis;
+    }
+
+    return React$1.createElement(DraggableCore_1, {
+      allowAnyClick: false,
+      enableUserSelectHack: false,
+      onMouseDown: this.handleOnMouseDown,
+      onDrag: this.handleOnDrag,
+      onStart: this.handleOnDragStart,
+      onStop: this.handleOnDragStop,
+      nodeRef: this.elementRefHack
+    }, renderDivWithRenderer(props, this.elementRef));
+  };
+
+  ScrollbarThumb.selectStartReplacer = function () {
+    return false;
+  };
+
+  return ScrollbarThumb;
+}(React$1.Component);
+
+var ScrollbarTrack =
+/** @class */
+function (_super) {
+  __extends(ScrollbarTrack, _super);
+
+  function ScrollbarTrack() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.element = null;
+
+    _this.elementRef = function (ref) {
+      if (isFun(_this.props.elementRef)) _this.props.elementRef(ref);
+      _this.element = ref;
+    };
+
+    _this.handleClick = function (ev) {
+      if (!ev || !_this.element || ev.button !== 0) {
+        return;
+      }
+
+      if (isFun(_this.props.onClick) && ev.target === _this.element) {
+        if (!isUndef(ev.offsetX)) {
+          _this.props.onClick(ev, {
+            axis: _this.props.axis,
+            offset: _this.props.axis === AXIS_DIRECTION.X ? ev.offsetX : ev.offsetY
+          });
+        } else {
+          // support for old browsers
+
+          /* istanbul ignore next */
+          var rect = _this.element.getBoundingClientRect();
+          /* istanbul ignore next */
+
+
+          _this.props.onClick(ev, {
+            axis: _this.props.axis,
+            offset: _this.props.axis === AXIS_DIRECTION.X ? (ev.clientX || ev.touches[0].clientX) - rect.left : (ev.clientY || ev.touches[0].clientY) - rect.top
+          });
+        }
+      }
+
+      return true;
+    };
+
+    return _this;
+  }
+
+  ScrollbarTrack.prototype.componentDidMount = function () {
+    if (!this.element) {
+      this.setState(function () {
+        throw new Error("Element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
+      });
+      return;
+    }
+
+    this.element.addEventListener('click', this.handleClick);
+  };
+
+  ScrollbarTrack.prototype.componentWillUnmount = function () {
+    if (this.element) {
+      this.element.removeEventListener('click', this.handleClick);
+      this.element = null;
+      this.elementRef(null);
+    }
+  };
+
+  ScrollbarTrack.prototype.render = function () {
+    var _a = this.props;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.elementRef;
+        var axis = _a.axis;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.onClick;
+        var props = __rest(_a, ["elementRef", "axis", "onClick"]);
+
+    props.className = cnb('ScrollbarsCustom-Track', axis === AXIS_DIRECTION.X ? 'ScrollbarsCustom-TrackX' : 'ScrollbarsCustom-TrackY', props.className);
+
+    if (props.renderer) {
+      props.axis = axis;
+    }
+
+    return renderDivWithRenderer(props, this.elementRef);
+  };
+
+  return ScrollbarTrack;
+}(React$1.Component);
+
+var style = {
+  holder: {
+    position: 'relative',
+    width: '100%',
+    height: '100%'
+  },
+  wrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  },
+  content: {
+    boxSizing: 'border-box'
+  },
+  track: {
+    common: {
+      position: 'absolute',
+      overflow: 'hidden',
+      borderRadius: 4,
+      background: 'rgba(0,0,0,.1)',
+      userSelect: 'none'
+    },
+    x: {
+      height: 10,
+      width: 'calc(100% - 20px)',
+      bottom: 0,
+      left: 10
+    },
+    y: {
+      width: 10,
+      height: 'calc(100% - 20px)',
+      top: 10
+    }
+  },
+  thumb: {
+    common: {
+      cursor: 'pointer',
+      borderRadius: 4,
+      background: 'rgba(0,0,0,.4)'
+    },
+    x: {
+      height: '100%',
+      width: 0
+    },
+    y: {
+      width: '100%',
+      height: 0
+    }
+  }
+};
+
+var pageZoomLevel = isBrowser ? i() : 1;
+
+if (isBrowser) {
+  window.addEventListener('resize', function () {
+    pageZoomLevel = i();
+  }, {
+    passive: true
+  });
+}
+
+var ScrollbarContext = React$1.createContext({
+  parentScrollbar: null
+});
+
+var Scrollbar$1 =
+/** @class */
+function (_super) {
+  __extends(Scrollbar, _super);
+
+  function Scrollbar(props) {
+    var _this = _super.call(this, props) || this;
+    /**
+     * @description Get current scroll-related values.<br/>
+     * If <i>force</i> if truthy - will recalculate them instead of returning cached values.
+     *
+     * @return ScrollState
+     */
+
+
+    _this.getScrollState = function (force) {
+      if (force === void 0) {
+        force = false;
+      }
+
+      if (_this.scrollValues && !force) {
+        return __assign({}, _this.scrollValues);
+      }
+
+      var scrollState = {
+        clientHeight: 0,
+        clientWidth: 0,
+        contentScrollHeight: 0,
+        contentScrollWidth: 0,
+        scrollHeight: 0,
+        scrollWidth: 0,
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollYBlocked: false,
+        scrollXBlocked: false,
+        scrollYPossible: false,
+        scrollXPossible: false,
+        trackYVisible: false,
+        trackXVisible: false,
+        zoomLevel: pageZoomLevel * 1,
+        isRTL: undefined
+      };
+      var props = _this.props;
+      scrollState.isRTL = _this.state.isRTL;
+      scrollState.scrollYBlocked = props.noScroll || props.noScrollY;
+      scrollState.scrollXBlocked = props.noScroll || props.noScrollX;
+
+      if (_this.scrollerElement) {
+        scrollState.clientHeight = _this.scrollerElement.clientHeight;
+        scrollState.clientWidth = _this.scrollerElement.clientWidth;
+        scrollState.scrollHeight = _this.scrollerElement.scrollHeight;
+        scrollState.scrollWidth = _this.scrollerElement.scrollWidth;
+        scrollState.scrollTop = _this.scrollerElement.scrollTop;
+        scrollState.scrollLeft = _this.scrollerElement.scrollLeft;
+        scrollState.scrollYPossible = !scrollState.scrollYBlocked && scrollState.scrollHeight > scrollState.clientHeight;
+        scrollState.scrollXPossible = !scrollState.scrollXBlocked && scrollState.scrollWidth > scrollState.clientWidth;
+        scrollState.trackYVisible = scrollState.scrollYPossible || props.permanentTracks || props.permanentTrackY;
+        scrollState.trackXVisible = scrollState.scrollXPossible || props.permanentTracks || props.permanentTrackX;
+      }
+
+      if (_this.contentElement) {
+        scrollState.contentScrollHeight = _this.contentElement.scrollHeight;
+        scrollState.contentScrollWidth = _this.contentElement.scrollWidth;
+      }
+
+      return scrollState;
+    };
+    /**
+     * @description Scroll to top border
+     */
+
+
+    _this.scrollToTop = function () {
+      if (_this.scrollerElement) {
+        _this.scrollerElement.scrollTop = 0;
+      }
+
+      return _this;
+    };
+    /**
+     * @description Scroll to left border
+     */
+
+
+    _this.scrollToLeft = function () {
+      if (_this.scrollerElement) {
+        _this.scrollerElement.scrollLeft = 0;
+      }
+
+      return _this;
+    };
+    /**
+     * @description Scroll to bottom border
+     */
+
+
+    _this.scrollToBottom = function () {
+      if (_this.scrollerElement) {
+        _this.scrollerElement.scrollTop = _this.scrollerElement.scrollHeight - _this.scrollerElement.clientHeight;
+      }
+
+      return _this;
+    };
+    /**
+     * @description Scroll to right border
+     */
+
+
+    _this.scrollToRight = function () {
+      if (_this.scrollerElement) {
+        _this.scrollerElement.scrollLeft = _this.scrollerElement.scrollWidth - _this.scrollerElement.clientWidth;
+      }
+
+      return _this;
+    };
+    /**
+     * @description Set the scrolls at given coordinates.<br/>
+     * If coordinate is undefined - current scroll value will persist.
+     */
+
+
+    _this.scrollTo = function (x, y) {
+      if (_this.scrollerElement) {
+        if (isNum(x)) _this.scrollerElement.scrollLeft = x;
+        if (isNum(y)) _this.scrollerElement.scrollTop = y;
+      }
+
+      return _this;
+    };
+    /**
+     * @description Center the viewport at given coordinates.<br/>
+     * If coordinate is undefined - current scroll value will persist.
+     */
+
+
+    _this.centerAt = function (x, y) {
+      if (_this.scrollerElement) {
+        if (isNum(x)) _this.scrollerElement.scrollLeft = x - _this.scrollerElement.clientWidth / 2;
+        if (isNum(y)) _this.scrollerElement.scrollTop = y - _this.scrollerElement.clientHeight / 2;
+      }
+
+      return _this;
+    };
+
+    _this.update = function (force) {
+      if (force === void 0) {
+        force = false;
+      }
+
+      if (!_this.scrollerElement) {
+        return;
+      } // autodetect direction if not defined
+
+
+      if (isUndef(_this.state.isRTL)) {
+        _this.setState({
+          isRTL: getComputedStyle(_this.scrollerElement).direction === 'rtl'
+        });
+
+        return _this.getScrollState();
+      }
+
+      var scrollState = _this.getScrollState(true);
+
+      var prevScrollState = __assign({}, _this.scrollValues);
+
+      var props = _this.props;
+      var bitmask = 0;
+
+      if (!force) {
+        if (prevScrollState.clientHeight !== scrollState.clientHeight) bitmask |= Math.trunc(1);
+        if (prevScrollState.clientWidth !== scrollState.clientWidth) bitmask |= 1 << 1;
+        if (prevScrollState.scrollHeight !== scrollState.scrollHeight) bitmask |= 1 << 2;
+        if (prevScrollState.scrollWidth !== scrollState.scrollWidth) bitmask |= 1 << 3;
+        if (prevScrollState.scrollTop !== scrollState.scrollTop) bitmask |= 1 << 4;
+        if (prevScrollState.scrollLeft !== scrollState.scrollLeft) bitmask |= 1 << 5;
+        if (prevScrollState.scrollYBlocked !== scrollState.scrollYBlocked) bitmask |= 1 << 6;
+        if (prevScrollState.scrollXBlocked !== scrollState.scrollXBlocked) bitmask |= 1 << 7;
+        if (prevScrollState.scrollYPossible !== scrollState.scrollYPossible) bitmask |= 1 << 8;
+        if (prevScrollState.scrollXPossible !== scrollState.scrollXPossible) bitmask |= 1 << 9;
+        if (prevScrollState.trackYVisible !== scrollState.trackYVisible) bitmask |= 1 << 10;
+        if (prevScrollState.trackXVisible !== scrollState.trackXVisible) bitmask |= 1 << 11;
+        if (prevScrollState.isRTL !== scrollState.isRTL) bitmask |= 1 << 12;
+        if (prevScrollState.contentScrollHeight !== scrollState.contentScrollHeight) bitmask |= 1 << 13;
+        if (prevScrollState.contentScrollWidth !== scrollState.contentScrollWidth) bitmask |= 1 << 14;
+        if (prevScrollState.zoomLevel !== scrollState.zoomLevel) bitmask |= 1 << 15; // if not forced and nothing has changed - skip this update
+
+        if (bitmask === 0) {
+          return prevScrollState;
+        }
+      } else {
+        bitmask = 32767;
+      }
+
+      if (!props.native && _this.holderElement) {
+        if (bitmask & 1 << 13 && (props.translateContentSizesToHolder || props.translateContentSizeYToHolder)) {
+          _this.holderElement.style.height = "".concat(scrollState.contentScrollHeight, "px");
+        }
+
+        if (bitmask & 1 << 14 && (props.translateContentSizesToHolder || props.translateContentSizeXToHolder)) {
+          _this.holderElement.style.width = "".concat(scrollState.contentScrollWidth, "px");
+        }
+
+        if (props.translateContentSizesToHolder || props.translateContentSizeYToHolder || props.translateContentSizeXToHolder) {
+          if (!scrollState.clientHeight && scrollState.contentScrollHeight || !scrollState.clientWidth && scrollState.contentScrollWidth) {
+            return;
+          }
+        }
+      } // if scrollbars visibility has changed
+
+
+      if (bitmask & 1 << 10 || bitmask & 1 << 11) {
+        prevScrollState.scrollYBlocked = scrollState.scrollYBlocked;
+        prevScrollState.scrollXBlocked = scrollState.scrollXBlocked;
+        prevScrollState.scrollYPossible = scrollState.scrollYPossible;
+        prevScrollState.scrollXPossible = scrollState.scrollXPossible;
+
+        if (_this.trackYElement && bitmask & 1 << 10) {
+          _this.trackYElement.style.display = scrollState.trackYVisible ? '' : 'none';
+        }
+
+        if (_this.trackXElement && bitmask & 1 << 11) {
+          _this.trackXElement.style.display = scrollState.trackXVisible ? '' : 'none';
+        }
+
+        _this.scrollValues = prevScrollState;
+
+        _this.setState({
+          trackYVisible: _this.scrollValues.trackYVisible = scrollState.trackYVisible,
+          trackXVisible: _this.scrollValues.trackXVisible = scrollState.trackXVisible
+        });
+
+        return;
+      }
+
+      (props.native ? _this.updaterNative : _this.updaterCustom)(bitmask, scrollState);
+      _this.scrollValues = scrollState;
+
+      if (!props.native && bitmask & 1 << 15) {
+        getScrollbarWidth(true);
+
+        _this.forceUpdate();
+      }
+
+      _this.eventEmitter.emit('update', __assign({}, scrollState), prevScrollState);
+
+      if (bitmask & 1 << 4 || bitmask & 1 << 5) _this.eventEmitter.emit('scroll', __assign({}, scrollState), prevScrollState);
+      return _this.scrollValues;
+    }; // eslint-disable-next-line class-methods-use-this
+
+
+    _this.updaterNative = function () {
+      // just for future
+      return true;
+    };
+
+    _this.updaterCustom = function (bitmask, scrollValues) {
+      var props = _this.props;
+
+      if (_this.trackYElement) {
+        if (_this.thumbYElement && (bitmask & Math.trunc(1) || bitmask & 1 << 2 || bitmask & 1 << 4 || bitmask & 1 << 6 || bitmask & 1 << 8)) {
+          if (scrollValues.scrollYPossible) {
+            var trackInnerSize = getInnerHeight(_this.trackYElement);
+            var thumbSize = calcThumbSize(scrollValues.scrollHeight, scrollValues.clientHeight, trackInnerSize, props.minimalThumbYSize || props.minimalThumbSize, props.maximalThumbYSize || props.maximalThumbSize);
+            var thumbOffset = calcThumbOffset(scrollValues.scrollHeight, scrollValues.clientHeight, trackInnerSize, thumbSize, scrollValues.scrollTop);
+            _this.thumbYElement.style.transform = "translateY(".concat(thumbOffset, "px)");
+            _this.thumbYElement.style.height = "".concat(thumbSize, "px");
+            _this.thumbYElement.style.display = '';
+          } else {
+            _this.thumbYElement.style.transform = '';
+            _this.thumbYElement.style.height = '0px';
+            _this.thumbYElement.style.display = 'none';
+          }
+        }
+      }
+
+      if (_this.trackXElement) {
+        if (_this.thumbXElement && (bitmask & 1 << 1 || bitmask & 1 << 3 || bitmask & 1 << 5 || bitmask & 1 << 7 || bitmask & 1 << 9 || bitmask & 1 << 12)) {
+          if (scrollValues.scrollXPossible) {
+            var trackInnerSize = getInnerWidth(_this.trackXElement);
+            var thumbSize = calcThumbSize(scrollValues.scrollWidth, scrollValues.clientWidth, trackInnerSize, props.minimalThumbXSize || props.minimalThumbSize, props.maximalThumbXSize || props.maximalThumbSize);
+            var thumbOffset = calcThumbOffset(scrollValues.scrollWidth, scrollValues.clientWidth, trackInnerSize, thumbSize, scrollValues.scrollLeft);
+
+            if (_this.state.isRTL && shouldReverseRtlScroll()) {
+              thumbOffset += trackInnerSize - thumbSize;
+            }
+
+            _this.thumbXElement.style.transform = "translateX(".concat(thumbOffset, "px)");
+            _this.thumbXElement.style.width = "".concat(thumbSize, "px");
+            _this.thumbXElement.style.display = '';
+          } else {
+            _this.thumbXElement.style.transform = '';
+            _this.thumbXElement.style.width = '0px';
+            _this.thumbXElement.style.display = 'none';
+          }
+        }
+      }
+
+      return true;
+    };
+
+    _this.elementRefHolder = function (ref) {
+      _this.holderElement = ref;
+
+      if (isFun(_this.props.elementRef)) {
+        _this.props.elementRef(ref);
+      }
+    };
+
+    _this.elementRefWrapper = function (ref) {
+      _this.wrapperElement = ref;
+
+      if (isFun(_this.props.wrapperProps.elementRef)) {
+        _this.props.wrapperProps.elementRef(ref);
+      }
+    };
+
+    _this.elementRefScroller = function (ref) {
+      _this.scrollerElement = ref;
+
+      if (isFun(_this.props.scrollerProps.elementRef)) {
+        _this.props.scrollerProps.elementRef(ref);
+      }
+    };
+
+    _this.elementRefContent = function (ref) {
+      _this.contentElement = ref;
+
+      if (isFun(_this.props.contentProps.elementRef)) {
+        _this.props.contentProps.elementRef(ref);
+      }
+    };
+
+    _this.elementRefTrackX = function (ref) {
+      _this.trackXElement = ref;
+
+      if (isFun(_this.props.trackXProps.elementRef)) {
+        _this.props.trackXProps.elementRef(ref);
+      }
+    };
+
+    _this.elementRefTrackY = function (ref) {
+      _this.trackYElement = ref;
+
+      if (isFun(_this.props.trackYProps.elementRef)) {
+        _this.props.trackYProps.elementRef(ref);
+      }
+    };
+
+    _this.elementRefThumbX = function (ref) {
+      _this.thumbXElement = ref;
+
+      if (isFun(_this.props.thumbXProps.elementRef)) {
+        _this.props.thumbXProps.elementRef(ref);
+      }
+    };
+
+    _this.elementRefThumbY = function (ref) {
+      _this.thumbYElement = ref;
+
+      if (isFun(_this.props.thumbYProps.elementRef)) {
+        _this.props.thumbYProps.elementRef(ref);
+      }
+    };
+
+    _this.handleTrackXClick = function (ev, values) {
+      if (_this.props.trackXProps.onClick) {
+        _this.props.trackXProps.onClick(ev, values);
+      }
+
+      if (!_this.scrollerElement || !_this.trackXElement || !_this.thumbXElement || !_this.scrollValues || !_this.scrollValues.scrollXPossible) {
+        return;
+      }
+
+      _this._scrollDetection();
+
+      var thumbSize = _this.thumbXElement.clientWidth;
+      var trackInnerSize = getInnerWidth(_this.trackXElement);
+      var thumbOffset = (_this.scrollValues.isRTL && shouldReverseRtlScroll() ? values.offset + thumbSize / 2 - trackInnerSize : values.offset - thumbSize / 2) - (Number.parseFloat(getComputedStyle(_this.trackXElement).paddingLeft) || 0);
+      var target = calcScrollForThumbOffset(_this.scrollValues.scrollWidth, _this.scrollValues.clientWidth, trackInnerSize, thumbSize, thumbOffset);
+
+      if (_this.props.trackClickBehavior === TRACK_CLICK_BEHAVIOR.STEP) {
+        target = (_this.scrollValues.isRTL ? _this.scrollValues.scrollLeft > target : _this.scrollValues.scrollLeft < target) ? _this.scrollValues.scrollLeft + _this.scrollValues.clientWidth : _this.scrollValues.scrollLeft - _this.scrollValues.clientWidth;
+      }
+
+      _this.scrollerElement.scrollLeft = target;
+    };
+
+    _this.handleTrackYClick = function (ev, values) {
+      if (_this.props.trackYProps.onClick) _this.props.trackYProps.onClick(ev, values);
+
+      if (!_this.scrollerElement || !_this.trackYElement || !_this.thumbYElement || !_this.scrollValues || !_this.scrollValues.scrollYPossible) {
+        return;
+      }
+
+      _this._scrollDetection();
+
+      var thumbSize = _this.thumbYElement.clientHeight;
+      var target = calcScrollForThumbOffset(_this.scrollValues.scrollHeight, _this.scrollValues.clientHeight, getInnerHeight(_this.trackYElement), thumbSize, values.offset - thumbSize / 2) - (Number.parseFloat(getComputedStyle(_this.trackYElement).paddingTop) || 0);
+
+      if (_this.props.trackClickBehavior === TRACK_CLICK_BEHAVIOR.JUMP) {
+        _this.scrollerElement.scrollTop = target;
+      } else {
+        _this.scrollerElement.scrollTop = _this.scrollValues.scrollTop < target ? _this.scrollValues.scrollTop + _this.scrollValues.clientHeight : _this.scrollValues.scrollTop - _this.scrollValues.clientHeight;
+      }
+    };
+
+    _this.handleTrackYMouseWheel = function (ev) {
+      var props = _this.props;
+
+      if (props.trackYProps && props.trackYProps.onWheel) {
+        props.trackYProps.onWheel(ev);
+      }
+
+      if (props.disableTracksMousewheelScrolling || props.disableTrackYMousewheelScrolling) {
+        return;
+      }
+
+      _this._scrollDetection();
+
+      if (!_this.scrollerElement || _this.scrollValues.scrollYBlocked) {
+        return;
+      }
+
+      _this.scrollTop += ev.deltaY;
+    };
+
+    _this.handleTrackXMouseWheel = function (ev) {
+      var props = _this.props;
+
+      if (props.trackXProps && props.trackXProps.onWheel) {
+        props.trackXProps.onWheel(ev);
+      }
+
+      if (props.disableTracksMousewheelScrolling || props.disableTrackXMousewheelScrolling) {
+        return;
+      }
+
+      _this._scrollDetection();
+
+      if (!_this.scrollerElement || _this.scrollValues.scrollXBlocked) {
+        return;
+      }
+
+      _this.scrollLeft += ev.deltaX;
+    };
+
+    _this.handleThumbXDrag = function (data) {
+      var _a;
+
+      if (!_this.trackXElement || !_this.thumbXElement || !_this.scrollerElement || !_this.scrollValues || !_this.scrollValues.scrollXPossible) {
+        return;
+      }
+
+      _this._scrollDetection();
+
+      var trackRect = _this.trackXElement.getBoundingClientRect();
+
+      var styles = getComputedStyle(_this.trackXElement);
+      var paddingLeft = Number.parseFloat(styles.paddingLeft) || 0;
+      var paddingRight = Number.parseFloat(styles.paddingRight) || 0;
+      var trackInnerSize = trackRect.width - paddingLeft - paddingRight;
+      var thumbSize = _this.thumbXElement.clientWidth;
+      var offset = _this.scrollValues.isRTL && shouldReverseRtlScroll() ? data.x + thumbSize - trackInnerSize + paddingLeft : data.lastX - paddingLeft;
+      _this.scrollerElement.scrollLeft = calcScrollForThumbOffset(_this.scrollValues.scrollWidth, _this.scrollValues.clientWidth, trackInnerSize, thumbSize, offset);
+
+      if ((_a = _this.props.thumbXProps) === null || _a === void 0 ? void 0 : _a.onDrag) {
+        _this.props.thumbXProps.onDrag(data);
+      }
+    };
+
+    _this.handleThumbXDragEnd = function (data) {
+      var _a;
+
+      _this.handleThumbXDrag(data);
+
+      if ((_a = _this.props.thumbXProps) === null || _a === void 0 ? void 0 : _a.onDragEnd) {
+        _this.props.thumbXProps.onDragEnd(data);
+      }
+    };
+
+    _this.handleThumbYDrag = function (data) {
+      var _a;
+
+      if (!_this.scrollerElement || !_this.trackYElement || !_this.thumbYElement || !_this.scrollValues || !_this.scrollValues.scrollYPossible) {
+        return;
+      }
+
+      _this._scrollDetection();
+
+      var trackRect = _this.trackYElement.getBoundingClientRect();
+
+      var styles = getComputedStyle(_this.trackYElement);
+      var paddingTop = Number.parseFloat(styles.paddingTop) || 0;
+      var paddingBottom = Number.parseFloat(styles.paddingBottom) || 0;
+      var trackInnerSize = trackRect.height - paddingTop - paddingBottom;
+      var thumbSize = _this.thumbYElement.clientHeight;
+      var offset = data.y - paddingTop;
+      _this.scrollerElement.scrollTop = calcScrollForThumbOffset(_this.scrollValues.scrollHeight, _this.scrollValues.clientHeight, trackInnerSize, thumbSize, offset);
+
+      if ((_a = _this.props.thumbYProps) === null || _a === void 0 ? void 0 : _a.onDrag) {
+        _this.props.thumbYProps.onDrag(data);
+      }
+    };
+
+    _this.handleThumbYDragEnd = function (data) {
+      var _a;
+
+      _this.handleThumbYDrag(data);
+
+      if ((_a = _this.props.thumbYProps) === null || _a === void 0 ? void 0 : _a.onDragEnd) {
+        _this.props.thumbYProps.onDragEnd(data);
+      }
+    };
+
+    _this.handleScrollerScroll = function () {
+      _this._scrollDetection();
+    };
+
+    _this._scrollDetection = function () {
+      if (!_this._scrollDetectionTO) {
+        _this.eventEmitter.emit('scrollStart', _this.getScrollState());
+      } else if (isBrowser) {
+        window.clearTimeout(_this._scrollDetectionTO);
+      }
+
+      _this._scrollDetectionTO = isBrowser ? window.setTimeout(_this._scrollDetectionCallback, _this.props.scrollDetectionThreshold || 0) : null;
+    };
+
+    _this._scrollDetectionCallback = function () {
+      _this._scrollDetectionTO = null;
+
+      _this.eventEmitter.emit('scrollStop', _this.getScrollState());
+    };
+
+    _this.state = {
+      trackXVisible: false,
+      trackYVisible: false,
+      isRTL: props.rtl
+    };
+    _this.scrollValues = _this.getScrollState(true);
+    _this.eventEmitter = new Emittr(15);
+    if (props.onUpdate) _this.eventEmitter.on('update', props.onUpdate);
+    if (props.onScroll) _this.eventEmitter.on('scroll', props.onScroll);
+    if (props.onScrollStart) _this.eventEmitter.on('scrollStart', props.onScrollStart);
+    if (props.onScrollStop) _this.eventEmitter.on('scrollStop', props.onScrollStop);
+    _this.id = uuid();
+    return _this;
+  }
+
+  Object.defineProperty(Scrollbar.prototype, "scrollTop", {
+    // eslint-disable-next-line react/sort-comp
+    get: function get() {
+      if (this.scrollerElement) {
+        return this.scrollerElement.scrollTop;
+      }
+
+      return 0;
+    },
+    set: function set(top) {
+      if (this.scrollerElement) {
+        this.scrollerElement.scrollTop = top;
+        this.update();
+      }
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(Scrollbar.prototype, "scrollLeft", {
+    get: function get() {
+      if (this.scrollerElement) {
+        return this.scrollerElement.scrollLeft;
+      }
+
+      return 0;
+    },
+    set: function set(left) {
+      if (this.scrollerElement) {
+        this.scrollerElement.scrollLeft = left;
+      }
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(Scrollbar.prototype, "scrollHeight", {
+    get: function get() {
+      if (this.scrollerElement) {
+        return this.scrollerElement.scrollHeight;
+      }
+
+      return 0;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(Scrollbar.prototype, "scrollWidth", {
+    get: function get() {
+      if (this.scrollerElement) {
+        return this.scrollerElement.scrollWidth;
+      }
+
+      return 0;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(Scrollbar.prototype, "clientHeight", {
+    get: function get() {
+      if (this.scrollerElement) {
+        return this.scrollerElement.clientHeight;
+      }
+
+      return 0;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(Scrollbar.prototype, "clientWidth", {
+    get: function get() {
+      if (this.scrollerElement) {
+        return this.scrollerElement.clientWidth;
+      }
+
+      return 0;
+    },
+    enumerable: false,
+    configurable: true
+  }); // eslint-disable-next-line react/sort-comp
+
+  Scrollbar.calculateStyles = function (props, state, scrollValues, scrollbarWidth) {
+    var _a, _b, _c, _d;
+
+    var useDefaultStyles = !props.noDefaultStyles;
+    return {
+      holder: __assign(__assign(__assign({}, useDefaultStyles && style.holder), {
+        position: 'relative'
+      }), props.style),
+      wrapper: __assign(__assign(__assign({}, useDefaultStyles && __assign(__assign(__assign({}, style.wrapper), !props.disableTracksWidthCompensation && !props.disableTrackYWidthCompensation && (_a = {}, _a[state.isRTL ? 'left' : 'right'] = state.trackYVisible ? 10 : 0, _a)), !props.disableTracksWidthCompensation && !props.disableTrackXWidthCompensation && {
+        bottom: state.trackXVisible ? 10 : 0
+      })), props.wrapperProps.style), {
+        position: 'absolute',
+        overflow: 'hidden'
+      }),
+      content: __assign(__assign(__assign(__assign(__assign({}, useDefaultStyles && style.content), props.translateContentSizesToHolder || props.translateContentSizeYToHolder || props.translateContentSizeXToHolder ? {
+        display: 'table-cell'
+      } : {
+        padding: 0.05 // needed to disable margin collapsing without flexboxes, other possible solutions here: https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing
+
+      }), useDefaultStyles && !(props.translateContentSizesToHolder || props.translateContentSizeYToHolder) && {
+        minHeight: '100%'
+      }), useDefaultStyles && !(props.translateContentSizesToHolder || props.translateContentSizeXToHolder) && {
+        minWidth: '100%'
+      }), props.contentProps.style),
+      scroller: __assign(__assign(__assign(__assign((_b = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        paddingBottom: !scrollbarWidth && scrollValues.scrollXPossible ? props.fallbackScrollbarWidth : undefined
+      }, _b[state.isRTL ? 'paddingLeft' : 'paddingRight'] = !scrollbarWidth && scrollValues.scrollYPossible ? props.fallbackScrollbarWidth : undefined, _b), props.scrollerProps.style), !isUndef(props.rtl) && {
+        direction: props.rtl ? 'rtl' : 'ltr'
+      }), props.momentum && {
+        WebkitOverflowScrolling: 'touch'
+      }), (_c = {
+        overflowY: scrollValues.scrollYPossible ? 'scroll' : 'hidden',
+        overflowX: scrollValues.scrollXPossible ? 'scroll' : 'hidden',
+        marginBottom: scrollValues.scrollXPossible ? -(scrollbarWidth || props.fallbackScrollbarWidth) - Number(scrollValues.zoomLevel !== 1) : undefined
+      }, _c[state.isRTL ? 'marginLeft' : 'marginRight'] = scrollValues.scrollYPossible ? -(scrollbarWidth || props.fallbackScrollbarWidth) - Number(scrollValues.zoomLevel !== 1) : undefined, _c)),
+      trackX: __assign(__assign(__assign(__assign({}, useDefaultStyles && style.track.common), useDefaultStyles && style.track.x), props.trackXProps.style), !state.trackXVisible && {
+        display: 'none'
+      }),
+      trackY: __assign(__assign(__assign(__assign(__assign({}, useDefaultStyles && style.track.common), useDefaultStyles && style.track.y), useDefaultStyles && (_d = {}, _d[state.isRTL ? 'left' : 'right'] = 0, _d)), props.trackYProps.style), !state.trackYVisible && {
+        display: 'none'
+      }),
+      thumbX: __assign(__assign(__assign({}, useDefaultStyles && style.thumb.common), useDefaultStyles && style.thumb.x), props.thumbXProps.style),
+      thumbY: __assign(__assign(__assign({}, useDefaultStyles && style.thumb.common), useDefaultStyles && style.thumb.y), props.thumbYProps.style)
+    };
+  };
+
+  Scrollbar.prototype.componentDidMount = function () {
+    if (!this.scrollerElement) {
+      this.setState(function () {
+        throw new Error("scroller element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
+      });
+      return;
+    }
+
+    if (!this.contentElement) {
+      this.setState(function () {
+        throw new Error("content element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
+      });
+      return;
+    }
+
+    var props = this.props;
+
+    if (!props.native && !props.mobileNative) {
+      // ToDo: move native state to the state so it can be synchronized
+      if (!this.holderElement) {
+        this.setState(function () {
+          throw new Error("holder element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
+        });
+        return;
+      }
+
+      if (!this.wrapperElement) {
+        this.setState(function () {
+          throw new Error("wrapper element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
+        });
+        return;
+      }
+    }
+
+    Loop.addTarget(this);
+
+    if (!isUndef(props.scrollTop)) {
+      this.scrollerElement.scrollTop = props.scrollTop;
+    }
+
+    if (!isUndef(props.scrollLeft)) {
+      this.scrollerElement.scrollLeft = props.scrollLeft;
+    }
+
+    this.update(true);
+  };
+
+  Scrollbar.prototype.componentWillUnmount = function () {
+    Loop.removeTarget(this);
+  };
+
+  Scrollbar.prototype.componentDidUpdate = function (prevProps, prevState) {
+    if (!this.scrollerElement) {
+      return;
+    }
+
+    var props = this.props;
+
+    if (props.rtl !== prevProps.rtl && props.rtl !== this.state.isRTL) {
+      this.setState({
+        isRTL: props.rtl
+      });
+    }
+
+    if (this.state.isRTL !== prevState.isRTL) {
+      this.update();
+    }
+
+    if (!isUndef(props.scrollTop) && props.scrollTop !== this.scrollerElement.scrollTop) {
+      this.scrollerElement.scrollTop = props.scrollTop;
+    }
+
+    if (!isUndef(props.scrollLeft) && props.scrollLeft !== this.scrollerElement.scrollLeft) {
+      this.scrollerElement.scrollLeft = props.scrollLeft;
+    }
+
+    if (prevProps.onUpdate !== props.onUpdate) {
+      if (prevProps.onUpdate) this.eventEmitter.off('update', prevProps.onUpdate);
+      if (props.onUpdate) this.eventEmitter.on('update', props.onUpdate);
+    }
+
+    if (prevProps.onScroll !== props.onScroll) {
+      if (prevProps.onScroll) this.eventEmitter.off('scroll', prevProps.onScroll);
+      if (props.onScroll) this.eventEmitter.on('scroll', props.onScroll);
+    }
+
+    if (prevProps.onScrollStart !== props.onScrollStart) {
+      if (prevProps.onScrollStart) this.eventEmitter.off('scrollStart', prevProps.onScrollStart);
+      if (props.onScrollStart) this.eventEmitter.on('scrollStart', props.onScrollStart);
+    }
+
+    if (prevProps.onScrollStop !== props.onScrollStop) {
+      if (prevProps.onScrollStop) this.eventEmitter.off('scrollStop', prevProps.onScrollStop);
+      if (props.onScrollStop) this.eventEmitter.on('scrollStop', props.onScrollStop);
+    }
+  }; // eslint-disable-next-line react/sort-comp
+
+
+  Scrollbar.prototype.render = function () {
+    var _a = this.props,
+        createContext = _a.createContext,
+        rtl = _a.rtl,
+        native = _a.native,
+        mobileNative = _a.mobileNative,
+        momentum = _a.momentum;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.noDefaultStyles;
+        var disableTracksMousewheelScrolling = _a.disableTracksMousewheelScrolling,
+        disableTrackXMousewheelScrolling = _a.disableTrackXMousewheelScrolling,
+        disableTrackYMousewheelScrolling = _a.disableTrackYMousewheelScrolling;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.disableTracksWidthCompensation;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.disableTrackXWidthCompensation;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.disableTrackYWidthCompensation;
+        var noScrollX = _a.noScrollX,
+        noScrollY = _a.noScrollY,
+        noScroll = _a.noScroll,
+        permanentTrackX = _a.permanentTrackX,
+        permanentTrackY = _a.permanentTrackY,
+        permanentTracks = _a.permanentTracks,
+        removeTracksWhenNotUsed = _a.removeTracksWhenNotUsed,
+        removeTrackYWhenNotUsed = _a.removeTrackYWhenNotUsed,
+        removeTrackXWhenNotUsed = _a.removeTrackXWhenNotUsed;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.minimalThumbSize;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.maximalThumbSize;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.minimalThumbXSize;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.maximalThumbXSize;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.minimalThumbYSize;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.maximalThumbYSize;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.fallbackScrollbarWidth;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.scrollTop;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.scrollLeft;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.trackClickBehavior;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.scrollDetectionThreshold;
+        var propsWrapperProps = _a.wrapperProps,
+        propsScrollerProps = _a.scrollerProps,
+        propsContentProps = _a.contentProps,
+        propsTrackXProps = _a.trackXProps,
+        propsTrackYProps = _a.trackYProps,
+        propsThumbXProps = _a.thumbXProps,
+        propsThumbYProps = _a.thumbYProps,
+        propsScrollbarWidth = _a.scrollbarWidth;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.elementRef;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.onUpdate;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.onScroll;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.onScrollStart;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.onScrollStop;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.translateContentSizesToHolder;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.translateContentSizeYToHolder;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.translateContentSizeXToHolder;
+        var children = _a.children,
+        propsHolderProps = __rest(_a, ["createContext", "rtl", "native", "mobileNative", "momentum", "noDefaultStyles", "disableTracksMousewheelScrolling", "disableTrackXMousewheelScrolling", "disableTrackYMousewheelScrolling", "disableTracksWidthCompensation", "disableTrackXWidthCompensation", "disableTrackYWidthCompensation", "noScrollX", "noScrollY", "noScroll", "permanentTrackX", "permanentTrackY", "permanentTracks", "removeTracksWhenNotUsed", "removeTrackYWhenNotUsed", "removeTrackXWhenNotUsed", "minimalThumbSize", "maximalThumbSize", "minimalThumbXSize", "maximalThumbXSize", "minimalThumbYSize", "maximalThumbYSize", "fallbackScrollbarWidth", "scrollTop", "scrollLeft", "trackClickBehavior", "scrollDetectionThreshold", "wrapperProps", "scrollerProps", "contentProps", "trackXProps", "trackYProps", "thumbXProps", "thumbYProps", "scrollbarWidth", "elementRef", "onUpdate", "onScroll", "onScrollStart", "onScrollStop", "translateContentSizesToHolder", "translateContentSizeYToHolder", "translateContentSizeXToHolder", "children"]);
+
+    var scrollbarWidth = !isUndef(propsScrollbarWidth) ? propsScrollbarWidth : getScrollbarWidth() || 0;
+
+    if (native || !scrollbarWidth && mobileNative) {
+      this.elementRefHolder(null);
+      this.elementRefWrapper(null);
+      this.elementRefTrackX(null);
+      this.elementRefTrackY(null);
+      this.elementRefThumbX(null);
+      this.elementRefThumbY(null);
+
+      var contentProps_1 = __assign(__assign({}, propsContentProps), {
+        key: 'ScrollbarsCustom-Content',
+        className: cnb('ScrollbarsCustom-Content', propsContentProps.className),
+        children: children
+      });
+
+      var scrollerProps_1 = __assign(__assign({}, propsHolderProps), {
+        className: cnb('ScrollbarsCustom native', this.state.trackYVisible && 'trackYVisible', this.state.trackXVisible && 'trackXVisible', this.state.isRTL && 'rtl', propsHolderProps.className),
+        style: __assign(__assign(__assign(__assign({}, propsHolderProps.style), !isUndef(rtl) && {
+          direction: rtl ? 'rtl' : 'ltr'
+        }), momentum && {
+          WebkitOverflowScrolling: 'touch'
+        }), {
+          overflowX: noScroll || noScrollX ? 'hidden' : permanentTracks || permanentTrackX ? 'scroll' : 'auto',
+          overflowY: noScroll || noScrollY ? 'hidden' : permanentTracks || permanentTrackY ? 'scroll' : 'auto'
+        }),
+        onScroll: this.handleScrollerScroll,
+        children: renderDivWithRenderer(contentProps_1, this.elementRefContent),
+        renderer: propsScrollerProps.renderer,
+        elementRef: propsScrollerProps.elementRef
+      });
+
+      return renderDivWithRenderer(scrollerProps_1, this.elementRefScroller);
+    }
+
+    var styles = Scrollbar.calculateStyles(this.props, this.state, this.scrollValues, scrollbarWidth);
+    var holderChildren = [];
+
+    var contentProps = __assign(__assign({}, propsContentProps), {
+      key: 'ScrollbarsCustom-Content',
+      className: cnb('ScrollbarsCustom-Content', propsContentProps.className),
+      style: styles.content,
+      children: createContext ? // eslint-disable-next-line react/jsx-no-constructed-context-values
+      React$1.createElement(ScrollbarContext.Provider, {
+        value: {
+          parentScrollbar: this
+        }
+      }, children) : children
+    });
+
+    var scrollerProps = __assign(__assign({}, propsScrollerProps), {
+      key: 'ScrollbarsCustom-Scroller',
+      className: cnb('ScrollbarsCustom-Scroller', propsScrollerProps.className),
+      style: styles.scroller,
+      children: renderDivWithRenderer(contentProps, this.elementRefContent),
+      onScroll: this.handleScrollerScroll
+    });
+
+    var wrapperProps = __assign(__assign({}, propsWrapperProps), {
+      key: 'ScrollbarsCustom-Wrapper',
+      className: cnb('ScrollbarsCustom-Wrapper', propsWrapperProps.className),
+      style: styles.wrapper,
+      children: renderDivWithRenderer(scrollerProps, this.elementRefScroller)
+    });
+
+    holderChildren.push(renderDivWithRenderer(wrapperProps, this.elementRefWrapper));
+
+    if (this.state.trackYVisible || !removeTracksWhenNotUsed && !removeTrackYWhenNotUsed) {
+      var thumbYProps = __assign(__assign({}, propsThumbYProps), {
+        key: 'ScrollbarsCustom-ThumbY',
+        style: styles.thumbY,
+        elementRef: this.elementRefThumbY,
+        onDrag: this.handleThumbYDrag,
+        onDragEnd: this.handleThumbYDragEnd,
+        axis: AXIS_DIRECTION.Y
+      });
+
+      var trackYProps = __assign(__assign(__assign(__assign({}, propsTrackYProps), {
+        key: 'ScrollbarsCustom-TrackY',
+        style: styles.trackY,
+        elementRef: this.elementRefTrackY,
+        onClick: this.handleTrackYClick
+      }), (disableTracksMousewheelScrolling || disableTrackYMousewheelScrolling) && {
+        onWheel: this.handleTrackYMouseWheel
+      }), {
+        axis: AXIS_DIRECTION.Y
+      });
+
+      trackYProps.children = React$1.createElement(ScrollbarThumb, __assign({}, thumbYProps));
+      holderChildren.push(React$1.createElement(ScrollbarTrack, __assign({}, trackYProps)));
+    } else {
+      this.elementRefTrackY(null);
+      this.elementRefThumbY(null);
+    }
+
+    if (this.state.trackXVisible || !removeTracksWhenNotUsed && !removeTrackXWhenNotUsed) {
+      var thumbXProps = __assign(__assign({}, propsThumbXProps), {
+        key: 'ScrollbarsCustom-ThumbX',
+        style: styles.thumbX,
+        elementRef: this.elementRefThumbX,
+        onDrag: this.handleThumbXDrag,
+        onDragEnd: this.handleThumbXDragEnd,
+        axis: AXIS_DIRECTION.X
+      });
+
+      var trackXProps = __assign(__assign(__assign(__assign({}, propsTrackXProps), {
+        key: 'ScrollbarsCustom-TrackX',
+        style: styles.trackX,
+        elementRef: this.elementRefTrackX,
+        onClick: this.handleTrackXClick
+      }), (disableTracksMousewheelScrolling || disableTrackXMousewheelScrolling) && {
+        onWheel: this.handleTrackXMouseWheel
+      }), {
+        axis: AXIS_DIRECTION.X
+      });
+
+      trackXProps.children = React$1.createElement(ScrollbarThumb, __assign({}, thumbXProps));
+      holderChildren.push(React$1.createElement(ScrollbarTrack, __assign({}, trackXProps)));
+    } else {
+      this.elementRefTrackX(null);
+      this.elementRefThumbX(null);
+    }
+
+    var holderProps = __assign(__assign({}, propsHolderProps), {
+      className: cnb('ScrollbarsCustom', this.state.trackYVisible && 'trackYVisible', this.state.trackXVisible && 'trackXVisible', this.state.isRTL && 'rtl', propsHolderProps.className),
+      style: styles.holder,
+      children: holderChildren
+    });
+
+    return renderDivWithRenderer(holderProps, this.elementRefHolder);
+  }; // eslint-disable-next-line react/static-property-placement
+
+
+  Scrollbar.contextType = ScrollbarContext; // eslint-disable-next-line react/static-property-placement
+
+  Scrollbar.defaultProps = {
+    momentum: true,
+    minimalThumbSize: 30,
+    fallbackScrollbarWidth: 20,
+    trackClickBehavior: TRACK_CLICK_BEHAVIOR.JUMP,
+    scrollDetectionThreshold: 100,
+    wrapperProps: {},
+    scrollerProps: {},
+    contentProps: {},
+    trackXProps: {},
+    trackYProps: {},
+    thumbXProps: {},
+    thumbYProps: {}
+  };
+  return Scrollbar;
+}(React$1.Component);
+
+var css_248z = ".scrollbar{min-height:0;min-width:0}.scrollbar,.scrollbar__wrapper{height:100%;width:100%}.scrollbar__scroller::-webkit-scrollbar,.scrollbar__scroller::-webkit-scrollbar-thumb,.scrollbar__scroller::-webkit-scrollbar-track{height:0;width:0}.scrollbar__content:focus-visible{outline:none}.scrollbar__track{border-radius:var(--guit-ref-radius-3xsmall);inset-inline-end:0;overflow:hidden;position:absolute}.scrollbar__track_direction_y{height:100%;top:0;width:6px}.scrollbar__track_direction_x{bottom:0;height:6px;width:100%}.scrollbar__thumb{background:var(--guit-sem-color-background-transparent-2);border-radius:var(--guit-ref-radius-3xsmall);overflow:hidden;position:absolute}.scrollbar__thumb_direction_y{height:100%;inset-inline-end:0;top:0;width:6px}.scrollbar__thumb_direction_x{bottom:0;height:6px;inset-inline-start:0;width:100%}";
+styleInject(css_248z);
+
+/**
+ * Scrollbar is a UI element that allows users to navigate through content that extends beyond the visible area of a container or window. It typically appears along the right side or bottom of the viewport, providing a draggable handle and directional arrows for vertical or horizontal scrolling, enabling users to access all available content.
+ */
+const Scrollbar = ({ className, children, autoScrollTopTo, autoScrollLeftTo, onScroll, customHeight, customWidth }) => {
+    const [scrollDirection, setScrollDirection] = useState(null);
+    const previousScrollPosition = useRef({ scrollTop: 0, scrollLeft: 0 });
+    const scrollbarsRef = useRef(null);
+    const scrollStateResetHandler = () => {
+        setScrollDirection(null);
+    };
+    const { debouncedCallback, clearDebounce } = useDebouncedCallback(scrollStateResetHandler, 1000);
+    const scrollHandler = (e) => {
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
+        const target = e.target;
+        const { scrollTop, scrollLeft } = target;
+        const previous = previousScrollPosition.current;
+        const deltaY = scrollTop - previous.scrollTop;
+        const deltaX = scrollLeft - previous.scrollLeft;
+        if (Math.abs(deltaY) > Math.abs(deltaX)) {
+            setScrollDirection("y");
+        }
+        else if (Math.abs(deltaX) > Math.abs(deltaY)) {
+            setScrollDirection("x");
+        }
+        previousScrollPosition.current = { scrollTop, scrollLeft };
+        debouncedCallback();
+    };
+    const showScrollbarHandler = (direction) => {
+        if (scrollDirection === direction) {
+            setScrollDirection(direction);
+            clearDebounce();
+        }
+    };
+    const hideScrollbarHandler = () => {
+        debouncedCallback();
+    };
+    // autoScrollTo Top and Left
+    useEffect(() => {
+        var _a;
+        const hasAutoScrollTopTo = typeof autoScrollTopTo === "number";
+        const hasAutoScrollLeftTo = typeof autoScrollTopTo === "number";
+        const scrollRefCurrent = scrollbarsRef.current;
+        if ((scrollRefCurrent === null || scrollRefCurrent === void 0 ? void 0 : scrollRefCurrent.scrollerElement) && (hasAutoScrollTopTo || hasAutoScrollLeftTo)) {
+            (_a = scrollRefCurrent.scrollerElement) === null || _a === void 0 ? void 0 : _a.scrollTo(Object.assign(Object.assign(Object.assign({}, (hasAutoScrollTopTo ? { top: autoScrollTopTo } : {})), (hasAutoScrollLeftTo ? { left: autoScrollLeftTo } : {})), { behavior: "smooth" }));
+        }
+    }, [autoScrollTopTo, autoScrollLeftTo]);
+    const trackProps = (direction) => {
+        return {
+            onMouseEnter: () => showScrollbarHandler(direction),
+            onMouseLeave: () => hideScrollbarHandler(),
+            className: classNames("scrollbar__track", {
+                [`scrollbar__track_direction_${direction}`]: scrollDirection === direction
+            })
+        };
+    };
+    const thumbProps = (direction) => {
+        return {
+            onDragStart: () => showScrollbarHandler(direction),
+            onDragEnd: () => hideScrollbarHandler(),
+            className: classNames("scrollbar__thumb", {
+                [`scrollbar__thumb_direction_${direction}`]: scrollDirection === direction
+            })
+        };
+    };
+    return (React__default.createElement(Scrollbar$1, { className: classNames("scrollbar", className), noDefaultStyles: true, scrollerProps: {
+            className: "scrollbar__scroller"
+        }, role: "scrollbar", "aria-valuenow": 0, contentProps: {
+            tabIndex: 0,
+            className: "scrollbar__content"
+        }, style: { height: customHeight, width: customWidth }, minimalThumbSize: 30, ref: scrollbarsRef, wrapperProps: {
+            className: "scrollbar__wrapper",
+            onScroll: scrollHandler
+        }, trackYProps: trackProps("y"), trackXProps: trackProps("x"), thumbYProps: thumbProps("y"), thumbXProps: thumbProps("x") }, children));
+};
+
+export { Scrollbar as default };