react-sync-board 0.5.4 → 0.6.0

package/dist/esm/index.js

@@ -1,5 +1,6 @@
-import React, { forwardRef, useContext, createContext, createElement, useRef, useLayoutEffect, useEffect, useMemo, memo } from 'react';
-import { atom, selector, useRecoilValue, useRecoilState, useSetRecoilState, useRecoilCallback, RecoilRoot } from 'recoil';
+import * as React from 'react';
+import React__default, { forwardRef, useContext, createContext, createElement, Fragment, useRef, useLayoutEffect, useEffect, useMemo, memo } from 'react';
+import { atom, selector, useRecoilValue, useRecoilCallback, useRecoilState, useSetRecoilState, RecoilRoot } from 'recoil';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -460,26 +461,17 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
-// This file replaces `index.js` in bundlers like webpack or Rollup,
-
 var nanoid = function nanoid() {
   var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 21;
   var id = '';
-  var bytes = crypto.getRandomValues(new Uint8Array(size)); // A compact alternative for `for (var i = 0; i < step; i++)`.
+  var bytes = crypto.getRandomValues(new Uint8Array(size));
 
   while (size--) {
-    // It is incorrect to use bytes exceeding the alphabet size.
-    // The following mask reduces the random byte in the 0-255 value
-    // range to the 0-63 value range. Therefore, adding hacks, such
-    // as empty string fallback or magic numbers, is unneccessary because
-    // the bitmask trims bytes down to the alphabet size.
     var _byte = bytes[size] & 63;
 
     if (_byte < 36) {
-      // `0-9a-z`
       id += _byte.toString(36);
     } else if (_byte < 62) {
-      // `A-Z`
       id += (_byte - 26).toString(36).toUpperCase();
     } else if (_byte < 63) {
       id += '_';
@@ -771,7 +763,7 @@ function memoize(fn) {
   };
 }
 
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
 var isPropValid = /* #__PURE__ */memoize(function (prop) {
   return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -844,7 +836,13 @@ var StyleSheet = /*#__PURE__*/function () {
       var before;
 
       if (_this.tags.length === 0) {
-        before = _this.prepend ? _this.container.firstChild : _this.before;
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
       } else {
         before = _this.tags[_this.tags.length - 1].nextSibling;
       }
@@ -862,6 +860,7 @@ var StyleSheet = /*#__PURE__*/function () {
     this.key = options.key;
     this.container = options.container;
     this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
     this.before = null;
   }
 
@@ -902,7 +901,7 @@ var StyleSheet = /*#__PURE__*/function () {
         // the big drawback is that the css won't be editable in devtools
         sheet.insertRule(rule, sheet.cssRules.length);
       } catch (e) {
-        if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-ms-input-placeholder|-moz-read-write|-moz-read-only){/.test(rule)) {
+        if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(rule)) {
           console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
         }
       }
@@ -916,7 +915,7 @@ var StyleSheet = /*#__PURE__*/function () {
   _proto.flush = function flush() {
     // $FlowFixMe
     this.tags.forEach(function (tag) {
-      return tag.parentNode.removeChild(tag);
+      return tag.parentNode && tag.parentNode.removeChild(tag);
     });
     this.tags = [];
     this.ctr = 0;
@@ -949,13 +948,19 @@ var abs = Math.abs;
  */
 
 var from = String.fromCharCode;
+/**
+ * @param {object}
+ * @return {object}
+ */
+
+var assign = Object.assign;
 /**
  * @param {string} value
  * @param {number} length
  * @return {number}
  */
 
-function hash(value, length) {
+function hash$1(value, length) {
   return (((length << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3);
 }
 /**
@@ -987,7 +992,7 @@ function replace(value, pattern, replacement) {
 }
 /**
  * @param {string} value
- * @param {string} value
+ * @param {string} search
  * @return {number}
  */
 
@@ -1056,11 +1061,11 @@ var character = 0;
 var characters = '';
 /**
  * @param {string} value
- * @param {object} root
- * @param {object?} parent
+ * @param {object | null} root
+ * @param {object | null} parent
  * @param {string} type
- * @param {string[]} props
- * @param {object[]} children
+ * @param {string[] | string} props
+ * @param {object[] | string} children
  * @param {number} length
  */
 
@@ -1079,13 +1084,15 @@ function node(value, root, parent, type, props, children, length) {
   };
 }
 /**
- * @param {string} value
  * @param {object} root
- * @param {string} type
+ * @param {object} props
+ * @return {object}
  */
 
-function copy(value, root, type) {
-  return node(value, root.root, root.parent, type, root.props, root.children, 0);
+function copy(root, props) {
+  return assign(node('', null, null, '', null, null, 0), root, {
+    length: -root.length
+  }, props);
 }
 /**
  * @return {number}
@@ -1244,7 +1251,8 @@ function delimiter(type) {
 
       case 34:
       case 39:
-        return delimiter(type === 34 || type === 39 ? type : character);
+        if (type !== 34 && type !== 39) delimiter(character);
+        break;
       // (
 
       case 40:
@@ -1328,11 +1336,18 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
 
   while (scanning) {
     switch (previous = character, character = next()) {
-      // " ' [ (
+      // (
+      case 40:
+        if (previous != 108 && characters.charCodeAt(length - 1) == 58) {
+          if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f') != -1) ampersand = -1;
+          break;
+        }
+
+      // " ' [
+
       case 34:
       case 39:
       case 91:
-      case 40:
         characters += delimit(character);
         break;
       // \t \n \r \s
@@ -1398,7 +1413,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
                 break;
 
               default:
-                parse(characters, reference, reference, reference, [''], children, length, points, children);
+                parse(characters, reference, reference, reference, [''], children, 0, points, children);
             }
         }
 
@@ -1427,7 +1442,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
           case 64:
             // -
             if (peek() === 45) characters += delimit(next());
-            atrule = peek(), offset = strlen(type = characters += identifier(caret())), character++;
+            atrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++;
             break;
           // -
 
@@ -1497,7 +1512,7 @@ function declaration(value, root, parent, length) {
  */
 
 function prefix(value, length) {
-  switch (hash(value, length)) {
+  switch (hash$1(value, length)) {
     // color-adjust
     case 5103:
       return WEBKIT + 'print-' + value + value;
@@ -1702,6 +1717,9 @@ function stringify(element, index, children, callback) {
     case COMMENT:
       return '';
 
+    case KEYFRAMES:
+      return element["return"] = element.value + '{' + serialize(element.children, callback) + '}';
+
     case RULESET:
       element.value = element.props.join(',');
   }
@@ -1744,13 +1762,15 @@ function rulesheet(callback) {
  */
 
 function prefixer(element, index, children, callback) {
-  if (!element["return"]) switch (element.type) {
+  if (element.length > -1) if (!element["return"]) switch (element.type) {
     case DECLARATION:
       element["return"] = prefix(element.value, element.length);
       break;
 
     case KEYFRAMES:
-      return serialize([copy(replace(element.value, '@', '@' + WEBKIT), element, '')], callback);
+      return serialize([copy(element, {
+        value: replace(element.value, '@', '@' + WEBKIT)
+      })], callback);
 
     case RULESET:
       if (element.length) return combine(element.props, function (value) {
@@ -1758,11 +1778,19 @@ function prefixer(element, index, children, callback) {
           // :read-(only|write)
           case ':read-only':
           case ':read-write':
-            return serialize([copy(replace(value, /:(read-\w+)/, ':' + MOZ + '$1'), element, '')], callback);
+            return serialize([copy(element, {
+              props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
+            })], callback);
           // :placeholder
 
           case '::placeholder':
-            return serialize([copy(replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1'), element, ''), copy(replace(value, /:(plac\w+)/, ':' + MOZ + '$1'), element, ''), copy(replace(value, /:(plac\w+)/, MS + 'input-$1'), element, '')], callback);
+            return serialize([copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
+            })], callback);
         }
 
         return '';
@@ -1772,6 +1800,29 @@ function prefixer(element, index, children, callback) {
 
 var last = function last(arr) {
   return arr.length ? arr[arr.length - 1] : null;
+}; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
+
+
+var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
+  var previous = 0;
+  var character = 0;
+
+  while (true) {
+    previous = character;
+    character = peek(); // &\f
+
+    if (previous === 38 && character === 12) {
+      points[index] = 1;
+    }
+
+    if (token(character)) {
+      break;
+    }
+
+    next();
+  }
+
+  return slice(begin, position);
 };
 
 var toRules = function toRules(parsed, points) {
@@ -1791,7 +1842,7 @@ var toRules = function toRules(parsed, points) {
           points[index] = 1;
         }
 
-        parsed[index] += identifier(position - 1);
+        parsed[index] += identifierWithPointTracking(position - 1, points, index);
         break;
 
       case 2:
@@ -1825,8 +1876,9 @@ var getRules = function getRules(value, points) {
 var fixedElements = /* #__PURE__ */new WeakMap();
 
 var compat = function compat(element) {
-  if (element.type !== 'rule' || !element.parent || // .length indicates if this rule contains pseudo or not
-  !element.length) {
+  if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
+  // negative .length indicates that this rule has been already prefixed
+  element.length < 1) {
     return;
   }
 
@@ -2062,7 +2114,8 @@ var createCache = function createCache(options) {
       container: container,
       nonce: options.nonce,
       speedy: options.speedy,
-      prepend: options.prepend
+      prepend: options.prepend,
+      insertionPoint: options.insertionPoint
     }),
     nonce: options.nonce,
     inserted: inserted,
@@ -2080,22 +2133,22 @@ var reactIs$1 = {exports: {}};
 var reactIs_production_min = {};
 
 var b = "function" === typeof Symbol && Symbol["for"],
-    c$1 = b ? Symbol["for"]("react.element") : 60103,
+    c = b ? Symbol["for"]("react.element") : 60103,
     d = b ? Symbol["for"]("react.portal") : 60106,
-    e$1 = b ? Symbol["for"]("react.fragment") : 60107,
-    f$1 = b ? Symbol["for"]("react.strict_mode") : 60108,
+    e = b ? Symbol["for"]("react.fragment") : 60107,
+    f = b ? Symbol["for"]("react.strict_mode") : 60108,
     g = b ? Symbol["for"]("react.profiler") : 60114,
     h = b ? Symbol["for"]("react.provider") : 60109,
     k = b ? Symbol["for"]("react.context") : 60110,
-    l$1 = b ? Symbol["for"]("react.async_mode") : 60111,
+    l = b ? Symbol["for"]("react.async_mode") : 60111,
     m = b ? Symbol["for"]("react.concurrent_mode") : 60111,
-    n$1 = b ? Symbol["for"]("react.forward_ref") : 60112,
+    n = b ? Symbol["for"]("react.forward_ref") : 60112,
     p = b ? Symbol["for"]("react.suspense") : 60113,
     q = b ? Symbol["for"]("react.suspense_list") : 60120,
     r$1 = b ? Symbol["for"]("react.memo") : 60115,
-    t$1 = b ? Symbol["for"]("react.lazy") : 60116,
+    t = b ? Symbol["for"]("react.lazy") : 60116,
     v = b ? Symbol["for"]("react.block") : 60121,
-    w$1 = b ? Symbol["for"]("react.fundamental") : 60117,
+    w = b ? Symbol["for"]("react.fundamental") : 60117,
     x = b ? Symbol["for"]("react.responder") : 60118,
     y = b ? Symbol["for"]("react.scope") : 60119;
 
@@ -2104,21 +2157,21 @@ function z(a) {
     var u = a.$$typeof;
 
     switch (u) {
-      case c$1:
+      case c:
         switch (a = a.type, a) {
-          case l$1:
+          case l:
           case m:
-          case e$1:
+          case e:
           case g:
-          case f$1:
+          case f:
           case p:
             return a;
 
           default:
             switch (a = a && a.$$typeof, a) {
               case k:
-              case n$1:
-              case t$1:
+              case n:
+              case t:
               case r$1:
               case h:
                 return a;
@@ -2139,22 +2192,22 @@ function A(a) {
   return z(a) === m;
 }
 
-reactIs_production_min.AsyncMode = l$1;
+reactIs_production_min.AsyncMode = l;
 reactIs_production_min.ConcurrentMode = m;
 reactIs_production_min.ContextConsumer = k;
 reactIs_production_min.ContextProvider = h;
-reactIs_production_min.Element = c$1;
-reactIs_production_min.ForwardRef = n$1;
-reactIs_production_min.Fragment = e$1;
-reactIs_production_min.Lazy = t$1;
+reactIs_production_min.Element = c;
+reactIs_production_min.ForwardRef = n;
+reactIs_production_min.Fragment = e;
+reactIs_production_min.Lazy = t;
 reactIs_production_min.Memo = r$1;
 reactIs_production_min.Portal = d;
 reactIs_production_min.Profiler = g;
-reactIs_production_min.StrictMode = f$1;
+reactIs_production_min.StrictMode = f;
 reactIs_production_min.Suspense = p;
 
 reactIs_production_min.isAsyncMode = function (a) {
-  return A(a) || z(a) === l$1;
+  return A(a) || z(a) === l;
 };
 
 reactIs_production_min.isConcurrentMode = A;
@@ -2168,19 +2221,19 @@ reactIs_production_min.isContextProvider = function (a) {
 };
 
 reactIs_production_min.isElement = function (a) {
-  return "object" === _typeof(a) && null !== a && a.$$typeof === c$1;
+  return "object" === _typeof(a) && null !== a && a.$$typeof === c;
 };
 
 reactIs_production_min.isForwardRef = function (a) {
-  return z(a) === n$1;
+  return z(a) === n;
 };
 
 reactIs_production_min.isFragment = function (a) {
-  return z(a) === e$1;
+  return z(a) === e;
 };
 
 reactIs_production_min.isLazy = function (a) {
-  return z(a) === t$1;
+  return z(a) === t;
 };
 
 reactIs_production_min.isMemo = function (a) {
@@ -2196,7 +2249,7 @@ reactIs_production_min.isProfiler = function (a) {
 };
 
 reactIs_production_min.isStrictMode = function (a) {
-  return z(a) === f$1;
+  return z(a) === f;
 };
 
 reactIs_production_min.isSuspense = function (a) {
@@ -2204,7 +2257,7 @@ reactIs_production_min.isSuspense = function (a) {
 };
 
 reactIs_production_min.isValidElementType = function (a) {
-  return "string" === typeof a || "function" === typeof a || a === e$1 || a === m || a === g || a === f$1 || a === p || a === q || "object" === _typeof(a) && null !== a && (a.$$typeof === t$1 || a.$$typeof === r$1 || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n$1 || a.$$typeof === w$1 || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
+  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === _typeof(a) && null !== a && (a.$$typeof === t || a.$$typeof === r$1 || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
 };
 
 reactIs_production_min.typeOf = z;
@@ -2430,7 +2483,7 @@ function getRegisteredStyles$1(registered, registeredStyles, classNames) {
   return rawClassName;
 }
 
-var insertStyles$1 = function insertStyles(cache, serialized, isStringTag) {
+var registerStyles$1 = function registerStyles(cache, serialized, isStringTag) {
   var className = cache.key + "-" + serialized.name;
 
   if ( // we only need to add the styles to the registered cache if the
@@ -2445,6 +2498,11 @@ var insertStyles$1 = function insertStyles(cache, serialized, isStringTag) {
   isBrowser$3 === false) && cache.registered[className] === undefined) {
     cache.registered[className] = serialized.styles;
   }
+};
+
+var insertStyles$1 = function insertStyles(cache, serialized, isStringTag) {
+  registerStyles$1(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
 
   if (cache.inserted[serialized.name] === undefined) {
     var current = serialized;
@@ -2602,7 +2660,7 @@ var processStyleValue$1 = function processStyleValue(key, value) {
 };
 
 if (process.env.NODE_ENV !== 'production') {
-  var contentValuePattern$1 = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+  var contentValuePattern$1 = /(var|attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
   var contentValues$1 = ['normal', 'none', 'initial', 'inherit', 'unset'];
   var oldProcessStyleValue$1 = processStyleValue$1;
   var msPattern$1 = /^-ms-/;
@@ -2869,7 +2927,7 @@ var serializeStyles$1 = function serializeStyles(args, registered, mergedProps)
   };
 };
 
-var hasOwnProperty = Object.prototype.hasOwnProperty;
+var hasOwnProperty = {}.hasOwnProperty;
 var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
@@ -2879,6 +2937,11 @@ var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to a
 typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
   key: 'css'
 }) : null);
+
+if (process.env.NODE_ENV !== 'production') {
+  EmotionCacheContext.displayName = 'EmotionCacheContext';
+}
+
 EmotionCacheContext.Provider;
 
 var withEmotionCache = function withEmotionCache(func) {
@@ -2892,9 +2955,32 @@ var withEmotionCache = function withEmotionCache(func) {
 
 var ThemeContext = /* #__PURE__ */createContext({});
 
+if (process.env.NODE_ENV !== 'production') {
+  ThemeContext.displayName = 'EmotionThemeContext';
+}
+
+var useInsertionEffect$2 = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
+  create();
+};
+
+function useInsertionEffectMaybe$1(create) {
+  useInsertionEffect$2(create);
+}
+
 var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
 var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
 
+var Insertion$2 = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serialized = _ref.serialized,
+      isStringTag = _ref.isStringTag;
+  registerStyles$1(cache, serialized, isStringTag);
+  useInsertionEffectMaybe$1(function () {
+    return insertStyles$1(cache, serialized, isStringTag);
+  });
+  return null;
+};
+
 var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
   var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
   // not passing the registered cache to serializeStyles because it would
@@ -2904,7 +2990,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     cssProp = cache.registered[cssProp];
   }
 
-  var type = props[typePropName];
+  var WrappedComponent = props[typePropName];
   var registeredStyles = [cssProp];
   var className = '';
 
@@ -2914,7 +3000,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     className = props.className + " ";
   }
 
-  var serialized = serializeStyles$1(registeredStyles, undefined, typeof cssProp === 'function' || Array.isArray(cssProp) ? useContext(ThemeContext) : undefined);
+  var serialized = serializeStyles$1(registeredStyles, undefined, useContext(ThemeContext));
 
   if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
     var labelFromStack = props[labelPropName];
@@ -2924,7 +3010,6 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     }
   }
 
-  insertStyles$1(cache, serialized, typeof type === 'string');
   className += cache.key + "-" + serialized.name;
   var newProps = {};
 
@@ -2936,8 +3021,11 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
 
   newProps.ref = ref;
   newProps.className = className;
-  var ele = /*#__PURE__*/createElement(type, newProps);
-  return ele;
+  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion$2, {
+    cache: cache,
+    serialized: serialized,
+    isStringTag: typeof WrappedComponent === 'string'
+  }), /*#__PURE__*/createElement(WrappedComponent, newProps));
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -2946,7 +3034,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 var pkg = {
   name: "@emotion/react",
-  version: "11.4.0",
+  version: "11.9.0",
   main: "dist/emotion-react.cjs.js",
   module: "dist/emotion-react.esm.js",
   browser: {
@@ -2954,19 +3042,19 @@ var pkg = {
     "./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
   },
   types: "types/index.d.ts",
-  files: ["src", "dist", "jsx-runtime", "jsx-dev-runtime", "isolated-hoist-non-react-statics-do-not-use-this-in-your-code", "types/*.d.ts", "macro.js", "macro.d.ts", "macro.js.flow"],
+  files: ["src", "dist", "jsx-runtime", "jsx-dev-runtime", "_isolated-hnrs", "types/*.d.ts", "macro.js", "macro.d.ts", "macro.js.flow"],
   sideEffects: false,
-  author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
+  author: "Emotion Contributors",
   license: "MIT",
   scripts: {
     "test:typescript": "dtslint types"
   },
   dependencies: {
     "@babel/runtime": "^7.13.10",
-    "@emotion/cache": "^11.4.0",
-    "@emotion/serialize": "^1.0.2",
-    "@emotion/sheet": "^1.0.1",
-    "@emotion/utils": "^1.0.0",
+    "@emotion/babel-plugin": "^11.7.1",
+    "@emotion/cache": "^11.7.1",
+    "@emotion/serialize": "^1.0.3",
+    "@emotion/utils": "^1.1.0",
     "@emotion/weak-memoize": "^0.2.5",
     "hoist-non-react-statics": "^3.3.1"
   },
@@ -2984,15 +3072,16 @@ var pkg = {
   },
   devDependencies: {
     "@babel/core": "^7.13.10",
-    "@emotion/css": "11.1.3",
-    "@emotion/css-prettifier": "1.0.0",
+    "@emotion/css": "11.9.0",
+    "@emotion/css-prettifier": "1.0.1",
     "@emotion/server": "11.4.0",
-    "@emotion/styled": "11.3.0",
+    "@emotion/styled": "11.8.1",
     "@types/react": "^16.9.11",
-    dtslint: "^0.3.0",
+    dtslint: "^4.2.1",
     "html-tag-names": "^1.1.2",
     react: "16.14.0",
-    "svg-tag-names": "^1.1.1"
+    "svg-tag-names": "^1.1.1",
+    typescript: "^4.5.5"
   },
   repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
   publishConfig: {
@@ -3000,11 +3089,12 @@ var pkg = {
   },
   "umd:main": "dist/emotion-react.umd.min.js",
   preconstruct: {
-    entrypoints: ["./index.js", "./jsx-runtime.js", "./jsx-dev-runtime.js", "./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js"],
+    entrypoints: ["./index.js", "./jsx-runtime.js", "./jsx-dev-runtime.js", "./_isolated-hnrs.js"],
     umdName: "emotionReact"
   }
 };
 
+var useInsertionEffect$1 = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useLayoutEffect;
 var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
 // initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
 // initial client-side render from SSR, use place of hydrating tag
@@ -3020,14 +3110,15 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   }
 
   var styles = props.styles;
-  var serialized = serializeStyles$1([styles], undefined, typeof styles === 'function' || Array.isArray(styles) ? useContext(ThemeContext) : undefined); // but it is based on a constant that will never change at runtime
+  var serialized = serializeStyles$1([styles], undefined, useContext(ThemeContext)); // but it is based on a constant that will never change at runtime
   // it's effectively like having two implementations and switching them out
   // so it's not actually breaking anything
 
   var sheetRef = useRef();
-  useLayoutEffect(function () {
-    var key = cache.key + "-global";
-    var sheet = new StyleSheet({
+  useInsertionEffect$1(function () {
+    var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
+
+    var sheet = new cache.sheet.constructor({
       key: key,
       nonce: cache.sheet.nonce,
       container: cache.sheet.container,
@@ -3053,7 +3144,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
       sheet.flush();
     };
   }, [cache]);
-  useLayoutEffect(function () {
+  useInsertionEffect$1(function () {
     var sheetRefCurrent = sheetRef.current;
     var sheet = sheetRefCurrent[0],
         rehydrating = sheetRefCurrent[1];
@@ -3168,8 +3259,20 @@ function merge(registered, css, className) {
   return rawClassName + css(registeredStyles);
 }
 
+var Insertion$1 = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serializedArr = _ref.serializedArr;
+  useInsertionEffectMaybe$1(function () {
+    for (var i = 0; i < serializedArr.length; i++) {
+      insertStyles$1(cache, serializedArr[i], false);
+    }
+  });
+  return null;
+};
+
 var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   var hasRendered = false;
+  var serializedArr = [];
 
   var css = function css() {
     if (hasRendered && process.env.NODE_ENV !== 'production') {
@@ -3181,9 +3284,9 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
     }
 
     var serialized = serializeStyles$1(args, cache.registered);
-    {
-      insertStyles$1(cache, serialized, false);
-    }
+    serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`
+
+    registerStyles$1(cache, serialized, false);
     return cache.key + "-" + serialized.name;
   };
 
@@ -3206,7 +3309,10 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   };
   var ele = props.children(content);
   hasRendered = true;
-  return ele;
+  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion$1, {
+    cache: cache,
+    serializedArr: serializedArr
+  }), ele);
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -3219,7 +3325,10 @@ if (process.env.NODE_ENV !== 'production') {
   var isJest = typeof jest !== 'undefined';
 
   if (isBrowser$2 && !isJest) {
-    var globalContext = isBrowser$2 ? window : global;
+    // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later
+    var globalContext = // $FlowIgnore
+    typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef
+    : isBrowser$2 ? window : global;
     var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
 
     if (globalContext[globalKey]) {
@@ -3244,7 +3353,7 @@ function getRegisteredStyles(registered, registeredStyles, classNames) {
   return rawClassName;
 }
 
-var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+var registerStyles = function registerStyles(cache, serialized, isStringTag) {
   var className = cache.key + "-" + serialized.name;
 
   if ( // we only need to add the styles to the registered cache if the
@@ -3259,6 +3368,11 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
   isBrowser$1 === false) && cache.registered[className] === undefined) {
     cache.registered[className] = serialized.styles;
   }
+};
+
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  registerStyles(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
 
   if (cache.inserted[serialized.name] === undefined) {
     var current = serialized;
@@ -3610,8 +3724,27 @@ var composeShouldForwardProps = function composeShouldForwardProps(tag, options,
   return shouldForwardProp;
 };
 
+var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
+  create();
+};
+
+function useInsertionEffectMaybe(create) {
+  useInsertionEffect(create);
+}
+
 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
 
+var Insertion = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serialized = _ref.serialized,
+      isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  useInsertionEffectMaybe(function () {
+    return insertStyles(cache, serialized, isStringTag);
+  });
+  return null;
+};
+
 var createStyled = function createStyled(tag, options) {
   if (process.env.NODE_ENV !== 'production') {
     if (tag === undefined) {
@@ -3662,7 +3795,7 @@ var createStyled = function createStyled(tag, options) {
 
 
     var Styled = withEmotionCache(function (props, cache, ref) {
-      var finalTag = shouldUseAs && props.as || baseTag;
+      var FinalTag = shouldUseAs && props.as || baseTag;
       var className = '';
       var classInterpolations = [];
       var mergedProps = props;
@@ -3684,14 +3817,13 @@ var createStyled = function createStyled(tag, options) {
       }
 
       var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
-      insertStyles(cache, serialized, typeof finalTag === 'string');
       className += cache.key + "-" + serialized.name;
 
       if (targetClassName !== undefined) {
         className += " " + targetClassName;
       }
 
-      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
+      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
       var newProps = {};
 
       for (var _key in props) {
@@ -3705,8 +3837,11 @@ var createStyled = function createStyled(tag, options) {
 
       newProps.className = className;
       newProps.ref = ref;
-      var ele = /*#__PURE__*/createElement(finalTag, newProps);
-      return ele;
+      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {
+        cache: cache,
+        serialized: serialized,
+        isStringTag: typeof FinalTag === 'string'
+      }), /*#__PURE__*/createElement(FinalTag, newProps));
     });
     Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     Styled.defaultProps = tag.defaultProps;
@@ -3783,12 +3918,12 @@ var StyledSpinner = newStyled.div(_templateObject2$1 || (_templateObject2$1 = _t
 var Spinner = function Spinner(_ref12) {
   var _ref12$size = _ref12.size,
       size = _ref12$size === void 0 ? 100 : _ref12$size;
-  return /*#__PURE__*/React.createElement(StyledSpinner, {
+  return /*#__PURE__*/React__default.createElement(StyledSpinner, {
     size: size
   });
 };
 
-var Context = /*#__PURE__*/React.createContext();
+var Context = /*#__PURE__*/React__default.createContext();
 var WireProvider = function WireProvider(_ref) {
   var socket = _ref.socket,
       room = _ref.room,
@@ -3796,31 +3931,31 @@ var WireProvider = function WireProvider(_ref) {
       channel = _ref$channel === void 0 ? "default" : _ref$channel,
       children = _ref.children;
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       joined = _React$useState2[0],
       setJoined = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
+  var _React$useState3 = React__default.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       isMaster = _React$useState4[0],
       setIsMaster = _React$useState4[1];
 
-  var _React$useState5 = React.useState(null),
+  var _React$useState5 = React__default.useState(null),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       wire = _React$useState6[0],
       setWire = _React$useState6[1];
 
-  var roomRef = React.useRef(null);
-  var mountedRef = React.useRef(false);
+  var roomRef = React__default.useRef(null);
+  var mountedRef = React__default.useRef(false);
   var existingC2C = useContext(Context);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     mountedRef.current = true;
     return function () {
       mountedRef.current = false;
     };
   }, []);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     if (!socket) {
       return null;
     }
@@ -3837,7 +3972,7 @@ var WireProvider = function WireProvider(_ref) {
       socket.off("disconnect", disconnect);
     };
   }, [channel, socket]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     // Connect
     if (!socket) {
       return null;
@@ -3872,7 +4007,7 @@ var WireProvider = function WireProvider(_ref) {
   }, [channel, room, socket]);
 
   if (!joined || !wire) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       style: {
         position: "absolute",
         top: "0",
@@ -3882,10 +4017,10 @@ var WireProvider = function WireProvider(_ref) {
         justifyContent: "center",
         alignItems: "center"
       }
-    }, /*#__PURE__*/React.createElement(Spinner, null));
+    }, /*#__PURE__*/React__default.createElement(Spinner, null));
   }
 
-  return /*#__PURE__*/React.createElement(Context.Provider, {
+  return /*#__PURE__*/React__default.createElement(Context.Provider, {
     value: _objectSpread2(_objectSpread2({}, existingC2C), {}, _defineProperty({}, channel, {
       wire: wire,
       joined: joined,
@@ -4310,1196 +4445,1312 @@ function useResizeObserver(target, callback, enabled) {
   }, [target, ro]);
 }
 
-var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' x='0px' y='0px' viewBox='0 0 75.601318 94.9' xml:space='preserve' id='svg26' sodipodi:docname='lock.svg' width='75.601318' height='94.900002' inkscape:version='0.92.5 (2060ec1f9f%2c 2020-04-08)'%3e%3cmetadata id='metadata32'%3e%3crdf:RDF%3e%3ccc:Work rdf:about=''%3e%3cdc:format%3eimage/svg%2bxml%3c/dc:format%3e%3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3e%3cdc:title%3e%3c/dc:title%3e%3c/cc:Work%3e%3c/rdf:RDF%3e%3c/metadata%3e%3cdefs id='defs30' /%3e%3csodipodi:namedview pagecolor='black' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='1848' inkscape:window-height='1016' id='namedview28' showgrid='false' fit-margin-top='0' fit-margin-left='0' fit-margin-right='0' fit-margin-bottom='0' inkscape:zoom='5.3400704' inkscape:cx='3.2640013' inkscape:cy='45.072152' inkscape:window-x='1512' inkscape:window-y='27' inkscape:window-maximized='1' inkscape:current-layer='g16' /%3e%3cg id='g16' transform='translate(-12.2%2c-2.5)'%3e%3cpath d='M 75.4%2c36.8 H 34.1 V 24.6 c 0%2c-8.8 7.1%2c-15.9 15.9%2c-15.9 8.8%2c0 15.9%2c7.1 15.9%2c15.9 0%2c1.7 1.4%2c3.1 3.1%2c3.1 1.7%2c0 3.1%2c-1.4 3.1%2c-3.1 C 72.1%2c12.4 62.2%2c2.5 50%2c2.5 37.8%2c2.5 27.9%2c12.4 27.9%2c24.6 v 12.2 h -3.3 c -6.9%2c0 -12.4%2c5.6 -12.4%2c12.4 V 85 c 0%2c6.9 5.6%2c12.4 12.4%2c12.4 h 50.8 c 6.9%2c0 12.4%2c-5.6 12.4%2c-12.4 V 49.2 C 87.9%2c42.3 82.3%2c36.8 75.4%2c36.8 Z m 6.2%2c48.3 c 0%2c3.4 -2.8%2c6.2 -6.2%2c6.2 H 24.6 c -3.4%2c0 -6.2%2c-2.8 -6.2%2c-6.2 V 49.2 c 0%2c-3.4 2.8%2c-6.2 6.2%2c-6.2 h 50.8 c 3.4%2c0 6.2%2c2.8 6.2%2c6.2 z' id='path12' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3cpath d='m 59.8%2c57.6 -12.5%2c12.5 -7%2c-7 c -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 -1.2%2c1.2 -1.2%2c3.2 0%2c4.4 l 9.2%2c9.2 c 0.6%2c0.6 1.4%2c0.9 2.2%2c0.9 0.8%2c0 1.6%2c-0.3 2.2%2c-0.9 L 64.2%2c62 c 1.2%2c-1.2 1.2%2c-3.2 0%2c-4.4 -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 z' id='path14' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3c/g%3e%3c/svg%3e";
-
-var _excluded$2 = ["type", "rotation", "id", "locked", "layer"],
-    _excluded2 = ["state", "boardSize", "currentUser"],
-    _excluded3 = ["x", "y", "layer", "moving"];
+var isMacOS = function isMacOS() {
+  var userAgent = navigator.userAgent.toLowerCase();
+  return /mac os ?x 10/.test(userAgent);
+}; // From https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line
 
-var _templateObject$2;
-var ItemWrapper = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  transition: transform 150ms;\n  user-select: none;\n  padding: 4px;\n  transform: rotate(", "deg);\n\n  & .corner {\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n\n  & .top-left {\n    top: 0;\n    left: 0;\n  }\n  & .top-right {\n    top: 0;\n    right: 0;\n  }\n  & .bottom-left {\n    bottom: 0;\n    left: 0;\n  }\n  & .bottom-right {\n    bottom: 0;\n    right: 0;\n  }\n\n  &.selected {\n    border: 2px dashed #db5034;\n    padding: 2px;\n    cursor: pointer;\n  }\n\n  &.locked::after {\n    content: \"\";\n    position: absolute;\n    width: 24px;\n    height: 30px;\n    top: 4px;\n    right: 4px;\n    opacity: 0.1;\n    background-image: url(\"", "\");\n    background-size: cover;\n    user-select: none;\n  }\n\n  &.locked:hover::after {\n    opacity: 0.3;\n  }\n"])), function (_ref) {
-  var rotation = _ref.rotation;
-  return rotation;
-}, img);
+var getScrollLineHeight = function getScrollLineHeight() {
+  var iframe = document.createElement("iframe");
+  iframe.src = "#";
+  document.body.appendChild(iframe); // Write content in Iframe
 
-var DefaultErrorComponent = function DefaultErrorComponent(_ref2) {
-  var onReload = _ref2.onReload;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100px",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      textAlign: "center",
-      color: "red"
-    },
-    className: "syncboard-error-item"
-  }, "Sorry, this item seems broken.", /*#__PURE__*/React.createElement("button", {
-    onClick: onReload
-  }, "Reload it"));
+  var idoc = iframe.contentWindow.document;
+  idoc.open();
+  idoc.write("<!DOCTYPE html><html><head></head><body><span>a</span></body></html>");
+  idoc.close();
+  var scrollLineHeight = idoc.body.firstElementChild.offsetHeight;
+  document.body.removeChild(iframe);
+  return scrollLineHeight;
 };
-/* Error boundary for broken item */
 
+var LINE_HEIGHT = getScrollLineHeight(); // Reasonable default from https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
 
-var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  _inherits(ItemErrorBoundary, _React$Component);
+var PAGE_HEIGHT = 800;
 
-  var _super = _createSuper(ItemErrorBoundary);
+var otherPointer = function otherPointer(pointers, currentPointer) {
+  var p2 = Object.keys(pointers).map(function (p) {
+    return Number(p);
+  }).find(function (pointer) {
+    return pointer !== currentPointer;
+  });
+  return pointers[p2];
+};
 
-  function ItemErrorBoundary(props) {
-    var _this;
+var computeDistance = function computeDistance(_ref, _ref2) {
+  var _ref3 = _slicedToArray(_ref, 2),
+      x1 = _ref3[0],
+      y1 = _ref3[1];
 
-    _classCallCheck(this, ItemErrorBoundary);
+  var _ref4 = _slicedToArray(_ref2, 2),
+      x2 = _ref4[0],
+      y2 = _ref4[1];
 
-    _this = _super.call(this, props);
-    _this.state = {
-      hasError: false,
-      itemId: props.itemId
-    };
-    _this.onReload = _this.onReload.bind(_assertThisInitialized(_this));
-    return _this;
-  }
+  var distanceX = Math.abs(x1 - x2);
+  var distanceY = Math.abs(y1 - y2);
+  return Math.hypot(distanceX, distanceY);
+};
 
-  _createClass(ItemErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error) {
-      // eslint-disable-next-line no-console
-      console.error("Error for item ".concat(this.state.itemId), error, this.props.state);
-    }
-  }, {
-    key: "onReload",
-    value: function onReload() {
-      this.setState({
-        hasError: false
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var ErrorComponent = this.props.ErrorComponent;
+var empty = function empty() {};
 
-      if (this.state.hasError) {
-        return /*#__PURE__*/React.createElement(ErrorComponent, {
-          onReload: this.onReload
-        });
-      }
+var protect = function protect(fn) {
+  return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _args = arguments;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return fn.apply(void 0, _args);
 
-      return this.props.children;
-    }
-  }], [{
-    key: "getDerivedStateFromError",
-    value: function getDerivedStateFromError() {
-      return {
-        hasError: true
-      };
-    }
-  }]);
+          case 3:
+            _context.next = 8;
+            break;
 
-  return ItemErrorBoundary;
-}(React.Component);
+          case 5:
+            _context.prev = 5;
+            _context.t0 = _context["catch"](0);
+            // eslint-disable-next-line no-console
+            console.error(_context.t0);
 
-var removeClass = function removeClass(e) {
-  e.target.className = "";
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 5]]);
+  }));
 };
 
-var Item = function Item(_ref3) {
-  var _itemMap$error;
-
-  var setState = _ref3.setState,
-      _ref3$state = _ref3.state;
-  _ref3$state = _ref3$state === void 0 ? {} : _ref3$state;
-
-  var type = _ref3$state.type,
-      _ref3$state$rotation = _ref3$state.rotation,
-      rotation = _ref3$state$rotation === void 0 ? 0 : _ref3$state$rotation,
-      id = _ref3$state.id,
-      locked = _ref3$state.locked,
-      layer = _ref3$state.layer,
-      rest = _objectWithoutProperties(_ref3$state, _excluded$2),
-      _ref3$animate = _ref3.animate,
-      animate = _ref3$animate === void 0 ? "hvr-pop" : _ref3$animate,
-      isSelected = _ref3.isSelected,
-      itemMap = _ref3.itemMap,
-      unlocked = _ref3.unlocked;
-
-  var animateRef = React.useRef(null);
-
-  var Component = itemMap[type].component || function () {
-    return null;
-  };
+var Gesture = function Gesture(_ref6) {
+  var children = _ref6.children,
+      _ref6$onDrag = _ref6.onDrag,
+      onDrag = _ref6$onDrag === void 0 ? empty : _ref6$onDrag,
+      _ref6$onDragStart = _ref6.onDragStart,
+      onDragStart = _ref6$onDragStart === void 0 ? empty : _ref6$onDragStart,
+      _ref6$onDragEnd = _ref6.onDragEnd,
+      onDragEnd = _ref6$onDragEnd === void 0 ? empty : _ref6$onDragEnd,
+      _ref6$onPan = _ref6.onPan,
+      onPan = _ref6$onPan === void 0 ? empty : _ref6$onPan,
+      _ref6$onTap = _ref6.onTap,
+      onTap = _ref6$onTap === void 0 ? empty : _ref6$onTap,
+      _ref6$onLongTap = _ref6.onLongTap,
+      onLongTap = _ref6$onLongTap === void 0 ? empty : _ref6$onLongTap,
+      _ref6$onDoubleTap = _ref6.onDoubleTap,
+      onDoubleTap = _ref6$onDoubleTap === void 0 ? empty : _ref6$onDoubleTap,
+      onZoom = _ref6.onZoom;
+  var wrapperRef = React__default.useRef(null);
+  var stateRef = React__default.useRef({
+    moving: false,
+    pointers: {},
+    mainPointer: undefined
+  });
+  var queueRef = React__default.useRef([]); // Queue event to avoid async mess
 
-  var updateState = React.useCallback(function (callbackOrItem) {
-    var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return setState(id, callbackOrItem, sync);
-  }, [setState, id]);
-  React.useEffect(function () {
-    animateRef.current.className = animate;
-  }, [animate]);
-  var className = "item ".concat(id);
+  var queue = React__default.useCallback(function (callback, args) {
+    queueRef.current.push( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return protect(callback)(args);
 
-  if (locked) {
-    className += " locked";
-  }
+            case 2:
+              queueRef.current.shift();
 
-  if (isSelected) {
-    className += " selected";
-  }
-
-  return /*#__PURE__*/React.createElement(ItemWrapper, {
-    rotation: rotation,
-    locked: locked && !unlocked,
-    selected: isSelected,
-    layer: layer,
-    "data-id": id,
-    className: className
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex"
-    },
-    ref: animateRef,
-    onAnimationEnd: removeClass,
-    onKeyDown: function onKeyDown(e) {
-      return e.stopPropagation();
-    },
-    onKeyUp: function onKeyUp(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement(ItemErrorBoundary, {
-    itemId: id,
-    state: rest,
-    setState: updateState,
-    ErrorComponent: (itemMap === null || itemMap === void 0 ? void 0 : (_itemMap$error = itemMap.error) === null || _itemMap$error === void 0 ? void 0 : _itemMap$error.component) || DefaultErrorComponent
-  }, /*#__PURE__*/React.createElement(Component, _extends$1({}, rest, {
-    id: id,
-    setState: updateState
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "corner top-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "corner top-right"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "corner bottom-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "corner bottom-right"
-  })));
-};
+              if (!(queueRef.current.length !== 0)) {
+                _context2.next = 6;
+                break;
+              }
 
-var MemoizedItem = /*#__PURE__*/memo(Item, function (_ref4, _ref5) {
-  var prevState = _ref4.state,
-      prevSetState = _ref4.setState,
-      prevIsSelected = _ref4.isSelected,
-      prevUnlocked = _ref4.unlocked;
-  var nextState = _ref5.state,
-      nextSetState = _ref5.setState,
-      nextIsSelected = _ref5.isSelected,
-      nextUnlocked = _ref5.unlocked;
-  return prevIsSelected === nextIsSelected && prevUnlocked === nextUnlocked && prevSetState === nextSetState && JSON.stringify(prevState) === JSON.stringify(nextState);
-}); // Exclude positioning from memoization
+              _context2.next = 6;
+              return protect(queueRef.current[0])();
 
-var PositionedItem = function PositionedItem(_ref6) {
-  var _rest$itemMap$state$t;
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
 
-  var _ref6$state = _ref6.state,
-      state = _ref6$state === void 0 ? {} : _ref6$state,
-      boardSize = _ref6.boardSize,
-      currentUser = _ref6.currentUser,
-      rest = _objectWithoutProperties(_ref6, _excluded2);
+    if (queueRef.current.length === 1) {
+      protect(queueRef.current[0])();
+    }
+  }, []);
+  var onWheel = React__default.useCallback(function (e) {
+    var deltaX = e.deltaX,
+        deltaY = e.deltaY,
+        clientX = e.clientX,
+        clientY = e.clientY,
+        deltaMode = e.deltaMode,
+        ctrlKey = e.ctrlKey,
+        altKey = e.altKey,
+        metaKey = e.metaKey,
+        target = e.target; // On a MacOs trackpad, the pinch gesture sets the ctrlKey to true.
+    // In that situation, we want to use the custom scaling, not the browser default zoom.
+    // Hence in this situation we avoid to return immediately.
 
-  var stateTrans = ((_rest$itemMap$state$t = rest.itemMap[state.type]) === null || _rest$itemMap$state$t === void 0 ? void 0 : _rest$itemMap$state$t.stateHook) || function (st) {
-    return st;
-  };
+    if (altKey || ctrlKey && !isMacOS()) {
+      return;
+    } // On a trackpad, the pinch and pan events are differentiated by the crtlKey value.
+    // On a pinch gesture, the ctrlKey is set to true, so we want to have a scaling effect.
+    // If we are only moving the fingers in the same direction, a pan is needed.
+    // Ref: https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e
 
-  var _stateTrans = stateTrans(state, {
-    currentUser: currentUser
-  }),
-      _stateTrans$x = _stateTrans.x,
-      x = _stateTrans$x === void 0 ? 0 : _stateTrans$x,
-      _stateTrans$y = _stateTrans.y,
-      y = _stateTrans$y === void 0 ? 0 : _stateTrans$y,
-      _stateTrans$layer = _stateTrans.layer,
-      layer = _stateTrans$layer === void 0 ? 0 : _stateTrans$layer,
-      moving = _stateTrans.moving,
-      stateRest = _objectWithoutProperties(_stateTrans, _excluded3);
-
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      top: "".concat(boardSize / 2, "px"),
-      left: "".concat(boardSize / 2, "px"),
-      display: "inline-block",
-      transform: "translate(".concat(x, "px, ").concat(y, "px)"),
-      zIndex: (layer + 4) * 10 + 100 + (moving ? 5 : 0) // Items z-index between 100 and 200
 
-    }
-  }, /*#__PURE__*/React.createElement(MemoizedItem, _extends$1({}, rest, {
-    state: stateRest
-  })));
-};
+    if (isMacOS() && !ctrlKey) {
+      queue(onPan, {
+        deltaX: -2 * deltaX,
+        deltaY: -2 * deltaY,
+        button: 1,
+        ctrlKey: ctrlKey,
+        metaKey: metaKey,
+        target: target,
+        event: e
+      });
+    } else {
+      // Quit if onZoom is not set
+      if (onZoom === undefined || !deltaY) return;
+      var scale = deltaY;
 
-var MemoizedPositionedItem = /*#__PURE__*/memo(PositionedItem);
+      switch (deltaMode) {
+        case 1:
+          // Pixel
+          scale *= LINE_HEIGHT;
+          break;
 
-var persistUser = function persistUser(user) {
-  localStorage.setItem("user", JSON.stringify(user));
-};
-var colors = ["#037758", "#99092a", "#067070", "#c6650f", "#008726", "#3d7004", "#348402", "#057f58", "#b58612", "#c44c01", "#0a7704", "#0e910e", "#027377", "#c99e02", "#054160", "#157a01", "#b10de2", "#0d6289", "#bc5d03", "#ba0cd1", "#d39f10", "#0c4c7a", "#460782", "#a51f10", "#cecb10", "#9b0943", "#607f0c", "#007a4b", "#bf0daa", "#af0ad8"];
+        case 2:
+          scale *= PAGE_HEIGHT;
+          break;
+      }
 
-var getRandomColor = function getRandomColor() {
-  return colors[Math.floor(Math.random() * colors.length)];
-}; // TODO remove user persistence
+      if (isMacOS()) {
+        scale *= 2;
+      }
 
+      queue(onZoom, {
+        scale: scale,
+        clientX: clientX,
+        clientY: clientY,
+        event: e
+      });
+    }
+  }, [onPan, onZoom, queue]);
+  var onPointerDown = React__default.useCallback(function (_ref8) {
+    var target = _ref8.target,
+        button = _ref8.button,
+        clientX = _ref8.clientX,
+        clientY = _ref8.clientY,
+        pointerId = _ref8.pointerId,
+        altKey = _ref8.altKey,
+        ctrlKey = _ref8.ctrlKey,
+        metaKey = _ref8.metaKey,
+        isPrimary = _ref8.isPrimary;
+    // Add pointer to map
+    stateRef.current.pointers[pointerId] = {
+      clientX: clientX,
+      clientY: clientY
+    };
 
-var getUser = function getUser() {
-  if (localStorage.user) {
-    // Add some mandatory info if missing
-    var localUser = _objectSpread2({
-      name: "Player",
-      color: getRandomColor(),
-      uid: nanoid()
-    }, JSON.parse(localStorage.user)); // Id is given by server
-    // delete localUser.id;
+    if (isPrimary) {
+      // Clean mainPoint on primary pointer
+      stateRef.current.mainPointer = undefined;
+    }
 
+    if (stateRef.current.mainPointer !== undefined) {
+      if (stateRef.current.mainPointer !== pointerId) {
+        // This is not the main pointer
+        try {
+          var _otherPointer = otherPointer(stateRef.current.pointers, pointerId),
+              clientX2 = _otherPointer.clientX,
+              clientY2 = _otherPointer.clientY;
 
-    persistUser(localUser);
-    return localUser;
-  }
+          var newClientX = (clientX2 + clientX) / 2;
+          var newClientY = (clientY2 + clientY) / 2;
+          var distance = computeDistance([clientX2, clientY2], [clientX, clientY]); // We update previous position as the new position is the center beetween both finger
 
-  var newUser = {
-    name: "Player",
-    color: getRandomColor(),
-    uid: nanoid()
-  };
-  persistUser(newUser);
-  return newUser;
-};
-var userAtom = atom({
-  key: "user",
-  "default": getUser()
-});
-var usersAtom = atom({
-  key: "users",
-  "default": []
-});
-var localUsersAtom = selector({
-  key: "localUsersAtom",
-  get: function get(_ref) {
-    var _get = _ref.get;
+          Object.assign(stateRef.current, {
+            pressed: true,
+            moving: false,
+            gestureStart: false,
+            startX: clientX,
+            startY: clientY,
+            prevX: newClientX,
+            prevY: newClientY,
+            startDistance: distance,
+            prevDistance: distance
+          });
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.log("Error while getting other pointer. Ignoring", e); // eslint-disable-next-line no-unused-expressions
 
-    var currentUser = _get(userAtom);
+          stateRef.current.mainPointer === undefined;
+        }
+      }
 
-    var users = _get(usersAtom);
+      return;
+    } // We set the mainpointer
 
-    return users.filter(function (_ref2) {
-      var space = _ref2.space;
-      return space === currentUser.space;
-    });
-  }
-});
 
-var useUsers = function useUsers() {
-  var _useRecoilState = useRecoilState(userAtom),
-      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-      currentUser = _useRecoilState2[0],
-      setCurrentUserState = _useRecoilState2[1];
+    stateRef.current.mainPointer = pointerId; // And prepare move
 
-  var users = useRecoilValue(usersAtom);
-  var localUsers = useRecoilValue(localUsersAtom);
-  var setCurrentUser = React.useCallback(function (callbackOrUser) {
-    var callback = callbackOrUser;
+    Object.assign(stateRef.current, {
+      pressed: true,
+      moving: false,
+      gestureStart: false,
+      startX: clientX,
+      startY: clientY,
+      prevX: clientX,
+      prevY: clientY,
+      currentButton: button,
+      target: target,
+      timeStart: Date.now(),
+      longTapTimeout: setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                stateRef.current.noTap = true;
+                queue(onLongTap, {
+                  clientX: clientX,
+                  clientY: clientY,
+                  altKey: altKey,
+                  ctrlKey: ctrlKey,
+                  metaKey: metaKey,
+                  target: target
+                });
 
-    if (_typeof(callbackOrUser) === "object") {
-      callback = function callback() {
-        return callbackOrUser;
-      };
-    }
+              case 2:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      })), 750)
+    });
 
-    setCurrentUserState(function (prevUser) {
-      var newUser = _objectSpread2(_objectSpread2({}, callback(prevUser)), {}, {
-        id: prevUser.id,
-        uid: prevUser.uid
-      });
-
-      persistUser(newUser);
-      return newUser;
-    });
-  }, [setCurrentUserState]);
-  React.useEffect(function () {
-    // eslint-disable-next-line no-console
-    console.debug("Curent user is in space ".concat(currentUser.space));
-  }, [currentUser.space]);
-  return {
-    currentUser: currentUser,
-    setCurrentUser: setCurrentUser,
-    users: users,
-    localUsers: localUsers
-  };
-};
+    try {
+      target.setPointerCapture(pointerId);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log("Fail to capture pointer", e);
+    }
+  }, [onLongTap, queue]);
+  var onPointerMove = React__default.useCallback(function (e) {
+    if (stateRef.current.pressed) {
+      var pointerId = e.pointerId,
+          eventClientX = e.clientX,
+          eventClientY = e.clientY,
+          altKey = e.altKey,
+          ctrlKey = e.ctrlKey,
+          metaKey = e.metaKey,
+          pointerType = e.pointerType;
 
-var SubscribeUserEvents = function SubscribeUserEvents() {
-  var usersRef = React.useRef([]);
-  var setUsers = useSetRecoilState(usersAtom);
+      if (stateRef.current.mainPointer !== pointerId) {
+        // Event from other pointer
+        stateRef.current.pointers[pointerId] = {
+          clientX: eventClientX,
+          clientY: eventClientY
+        };
+        return;
+      }
 
-  var _useRecoilState = useRecoilState(userAtom),
-      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-      currentUser = _useRecoilState2[0],
-      setCurrentUserState = _useRecoilState2[1];
+      stateRef.current.moving = true; // Do we have two fingers ?
 
-  var _useWire = useWire("room"),
-      wire = _useWire.wire,
-      isMaster = _useWire.isMaster,
-      roomSpace = _useWire.room;
+      var twoFingers = Object.keys(stateRef.current.pointers).length === 2;
+      var clientX;
+      var clientY;
+      var distance;
 
-  React.useEffect(function () {
-    setCurrentUserState(function (prevUser) {
-      return _objectSpread2(_objectSpread2({}, prevUser), {}, {
-        id: wire.userId,
-        space: roomSpace
-      });
-    });
-    return function () {
-      setCurrentUserState(function (prevUser) {
-        return _objectSpread2(_objectSpread2({}, prevUser), {}, {
-          id: wire.userId,
-          space: null
-        });
-      });
-    };
-  }, [wire.userId, roomSpace, setCurrentUserState]);
-  React.useEffect(function () {
-    if (!isMaster) {
-      var onGetUserList = function onGetUserList(userList) {
-        usersRef.current = userList;
-        setUsers(userList);
-      };
+      if (twoFingers) {
+        // Find other pointerId
+        var _otherPointer2 = otherPointer(stateRef.current.pointers, pointerId),
+            clientX2 = _otherPointer2.clientX,
+            clientY2 = _otherPointer2.clientY; // Update client X with the center of each touch
 
-      wire.call("getUserList").then(onGetUserList, function () {
-        // retry later
-        setTimeout(function () {
-          wire.call("getUserList") // eslint-disable-next-line no-console
-          .then(onGetUserList, function (error) {
-            return console.log(error);
-          });
-        }, 1000);
-      });
-    }
-  }, [wire, isMaster, setUsers]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  var debouncedEmitUpdateUser = useDebouncedCallback(function (newUser) {
-    wire.publish("userUpdate", newUser, true);
-  }, [wire], 500);
-  React.useEffect(function () {
-    if (currentUser && currentUser.id) {
-      debouncedEmitUpdateUser(currentUser);
-    }
-  }, [currentUser, debouncedEmitUpdateUser]);
-  React.useEffect(function () {
-    var unsub = [];
+        clientX = (clientX2 + eventClientX) / 2;
+        clientY = (clientY2 + eventClientY) / 2;
+        distance = computeDistance([clientX2, clientY2], [eventClientX, eventClientY]);
+      } else {
+        clientX = eventClientX;
+        clientY = eventClientY;
+      } // We drag if
+      // On non touch device
+      //   - Button is 0
+      //   - Alt key is no pressed
+      // or on touch devices
+      //   - We use only one finger
 
-    if (isMaster) {
-      wire.register("getUserList", function () {
-        return usersRef.current;
-      }).then(function (unregister) {
-        unsub.push(unregister);
-      });
-      unsub.push(wire.subscribe("userUpdate", function (user) {
-        if (usersRef.current.find(function (u) {
-          return u.id === user.id;
-        })) {
-          var newUsers = usersRef.current.map(function (u) {
-            return u.id === user.id ? user : u;
-          });
-          usersRef.current = newUsers;
-        } else {
-          var _newUsers = [].concat(_toConsumableArray(usersRef.current), [user]);
 
-          usersRef.current = _newUsers;
-        }
+      var shouldDrag = pointerType !== "touch" ? stateRef.current.currentButton === 0 && !altKey : !twoFingers;
 
-        setUsers(usersRef.current);
-        wire.publish("updateUserList", usersRef.current);
-      }));
-    }
+      if (shouldDrag) {
+        // Send drag start on first move
+        if (!stateRef.current.gestureStart) {
+          wrapperRef.current.style.cursor = "move";
+          stateRef.current.gestureStart = true; // Clear tap timeout
 
-    unsub.push(wire.subscribe("userLeave", function (userId) {
-      usersRef.current = usersRef.current.filter(function (_ref) {
-        var id = _ref.id;
-        return id !== userId;
-      });
-      setUsers(usersRef.current);
+          clearTimeout(stateRef.current.longTapTimeout);
+          queue(onDragStart, {
+            deltaX: 0,
+            deltaY: 0,
+            startX: stateRef.current.startX,
+            startY: stateRef.current.startY,
+            clientX: stateRef.current.startX,
+            clientY: stateRef.current.startY,
+            distanceX: 0,
+            distanceY: 0,
+            button: stateRef.current.currentButton,
+            altKey: altKey,
+            ctrlKey: ctrlKey,
+            metaKey: metaKey,
+            target: stateRef.current.target,
+            event: e
+          });
+        } // Create closure
 
-      if (isMaster) {
-        wire.publish("updateUserList", usersRef.current);
-      }
-    }));
-    unsub.push(wire.subscribe("updateUserList", function (newList) {
-      usersRef.current = newList;
-      setUsers(usersRef.current);
-    }));
-    return function () {
-      unsub.forEach(function (u) {
-        return u();
-      });
-    };
-  }, [wire, isMaster, setUsers]);
-  return null;
-};
 
-/** Allow to operate on locked items while u or l key is pressed  */
+        var deltaX = clientX - stateRef.current.prevX;
+        var deltaY = clientY - stateRef.current.prevY;
+        var distanceX = clientX - stateRef.current.startX;
+        var distanceY = clientY - stateRef.current.startY; // Drag event
 
-var useUnlock = function useUnlock() {
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      unlock = _React$useState2[0],
-      setUnlock = _React$useState2[1];
+        queue(onDrag, {
+          deltaX: deltaX,
+          deltaY: deltaY,
+          startX: stateRef.current.startX,
+          startY: stateRef.current.startY,
+          clientX: clientX,
+          clientY: clientY,
+          distanceX: distanceX,
+          distanceY: distanceY,
+          button: stateRef.current.currentButton,
+          altKey: altKey,
+          ctrlKey: ctrlKey,
+          metaKey: metaKey,
+          target: stateRef.current.target,
+          event: e
+        });
+      } else {
+        if (!stateRef.current.gestureStart) {
+          wrapperRef.current.style.cursor = "move";
+          stateRef.current.gestureStart = true; // Clear tap timeout on first move
 
-  React.useEffect(function () {
-    var onKeyDown = function onKeyDown(e) {
-      if (e.key === "u" || e.key === "l") {
-        setUnlock(true);
-      }
-    };
+          clearTimeout(stateRef.current.longTapTimeout);
+        } // Create closure
 
-    var onKeyUp = function onKeyUp(e) {
-      if (e.key === "u" || e.key === "l") {
-        setUnlock(false);
-      }
-    };
 
-    document.addEventListener("keydown", onKeyDown);
-    document.addEventListener("keyup", onKeyUp);
-    return function () {
-      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("keyup", onKeyUp);
-    };
-  }, []);
-  return unlock;
-};
+        var _deltaX = clientX - stateRef.current.prevX;
 
-var ItemList = function ItemList(_ref) {
-  var itemTemplates = _ref.itemTemplates;
+        var _deltaY = clientY - stateRef.current.prevY;
 
-  var _useItemActions = useItemActions(),
-      updateItem = _useItemActions.updateItem;
+        var target = stateRef.current.target; // Pan event
 
-  var itemList = useRecoilValue(ItemListAtom);
-  var itemMap = useRecoilValue(ItemMapAtom);
-  var selectedItems = useRecoilValue(SelectedItemsAtom);
+        queue(onPan, {
+          deltaX: _deltaX,
+          deltaY: _deltaY,
+          button: stateRef.current.currentButton,
+          altKey: altKey,
+          ctrlKey: ctrlKey,
+          metaKey: metaKey,
+          target: target,
+          event: e
+        });
 
-  var _useRecoilValue = useRecoilValue(ConfigurationAtom),
-      boardSize = _useRecoilValue.boardSize;
+        if (twoFingers && distance !== stateRef.current.prevDistance && onZoom) {
+          var scale = stateRef.current.prevDistance - distance;
 
-  var _useUsers = useUsers(),
-      currentUser = _useUsers.currentUser;
+          if (Math.abs(scale) > 0) {
+            queue(onZoom, {
+              scale: scale,
+              clientX: clientX,
+              clientY: clientY,
+              event: e
+            });
+            stateRef.current.prevDistance = distance;
+          }
+        }
+      }
 
-  var unlocked = useUnlock();
-  return itemList.map(function (itemId) {
-    return /*#__PURE__*/React.createElement(MemoizedPositionedItem, {
-      key: itemId,
-      state: itemMap[itemId],
-      setState: updateItem,
-      isSelected: selectedItems.includes(itemId),
-      unlocked: unlocked,
-      itemMap: itemTemplates,
-      boardSize: boardSize,
-      currentUser: currentUser
-    });
-  });
-};
-
-var SubcribeItemEvents = function SubcribeItemEvents() {
-  var _useWire = useWire("board"),
-      wire = _useWire.wire;
+      stateRef.current.prevX = clientX;
+      stateRef.current.prevY = clientY;
+    }
+  }, [onDrag, onDragStart, onPan, onZoom, queue]);
+  var onPointerUp = React__default.useCallback(function (e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        altKey = e.altKey,
+        ctrlKey = e.ctrlKey,
+        metaKey = e.metaKey,
+        target = e.target,
+        pointerId = e.pointerId;
 
-  var setItemMap = useSetRecoilState(ItemMapAtom);
+    if (!stateRef.current.pointers[pointerId]) {
+      // Pointer already gone previously with another event
+      // ignoring it
+      return;
+    } // Remove pointer from map
 
-  var _useItemActions = useItemActions(),
-      updateItemOrder = _useItemActions.updateItemOrder,
-      moveItems = _useItemActions.moveItems,
-      removeItems = _useItemActions.removeItems,
-      pushItem = _useItemActions.pushItem;
 
-  var batchUpdate = React.useCallback(function (updatedItems) {
-    setItemMap(function (prevItemMap) {
-      return _objectSpread2(_objectSpread2({}, prevItemMap), updatedItems);
-    });
-  }, [setItemMap]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("batchItemsUpdate", function (updatedItems) {
-      batchUpdate(updatedItems);
-    });
-    return unsub;
-  }, [wire, batchUpdate]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("selectedItemsMove", function (_ref) {
-      var itemIds = _ref.itemIds,
-          posDelta = _ref.posDelta;
-      moveItems(itemIds, posDelta, false);
-    });
-    return unsub;
-  }, [wire, moveItems]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("updateItemListOrder", function (itemIds) {
-      updateItemOrder(itemIds, false);
-    });
-    return unsub;
-  }, [wire, updateItemOrder]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("pushItem", function (newItem) {
-      pushItem(newItem, null, false);
-    });
-    return unsub;
-  }, [wire, pushItem]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("insertItemBefore", function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-          newItem = _ref3[0],
-          beforeId = _ref3[1];
+    delete stateRef.current.pointers[pointerId];
 
-      pushItem(newItem, beforeId, false);
-    });
-    return unsub;
-  }, [wire, pushItem]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("removeItems", function (itemIds) {
-      removeItems(itemIds, false);
-    });
-    return unsub;
-  }, [wire, removeItems]);
-  return null;
-};
+    if (stateRef.current.mainPointer !== pointerId) {
+      // If this is not the main pointer we quit here
+      return;
+    }
 
-/**
- * Check if element or parent has className.
- * @param {DOMElement} element
- * @param {string} className
- */
-var hasClass = function hasClass(element, className) {
-  return element.classList && element.classList.contains(className);
-};
-var insideClass = function insideClass(element, className) {
-  if (hasClass(element, className)) {
-    return element;
-  }
+    while (Object.keys(stateRef.current.pointers).length > 0) {
+      // If was main pointer but we have another one, this one become main
+      stateRef.current.mainPointer = Number(Object.keys(stateRef.current.pointers)[0]);
 
-  if (!element.parentNode) {
-    return false;
-  }
+      try {
+        stateRef.current.target.setPointerCapture(stateRef.current.mainPointer);
+        return;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log("Fails to set pointer capture", error);
+        stateRef.current.mainPointer = undefined;
+        delete stateRef.current.pointers[Object.keys(stateRef.current.pointers)[0]];
+      }
+    }
 
-  return insideClass(element.parentNode, className);
-};
-var isPointInsideRect = function isPointInsideRect(point, rect) {
-  return point.x > rect.left && point.x < rect.left + rect.width && point.y > rect.top && point.y < rect.top + rect.height;
-};
-var isItemInsideElement = function isItemInsideElement(itemElement, otherElem) {
-  var rect = otherElem.getBoundingClientRect();
-  var fourElem = Array.from(itemElement.querySelectorAll(".corner"));
-  return fourElem.every(function (corner) {
-    var _corner$getBoundingCl = corner.getBoundingClientRect(),
-        y = _corner$getBoundingCl.top,
-        x = _corner$getBoundingCl.left;
+    stateRef.current.mainPointer = undefined;
+    stateRef.current.pressed = false; // Clear longTap
 
-    return isPointInsideRect({
-      x: x,
-      y: y
-    }, rect);
-  });
-};
-var getItemElem = function getItemElem(wrapper, itemId) {
-  var elems = wrapper.getElementsByClassName("item ".concat(itemId));
-  var elem = elems[0];
+    clearTimeout(stateRef.current.longTapTimeout);
 
-  if (!elem) {
-    // eslint-disable-next-line no-console
-    console.error("Missing item ".concat(itemId));
-  }
+    if (stateRef.current.moving) {
+      // If we were moving, send drag end event
+      stateRef.current.moving = false;
+      queue(onDragEnd, {
+        deltaX: clientX - stateRef.current.prevX,
+        deltaY: clientY - stateRef.current.prevY,
+        startX: stateRef.current.startX,
+        startY: stateRef.current.startY,
+        clientX: clientX,
+        clientY: clientY,
+        distanceX: clientX - stateRef.current.startX,
+        distanceY: clientY - stateRef.current.startY,
+        button: stateRef.current.currentButton,
+        altKey: altKey,
+        ctrlKey: ctrlKey,
+        metaKey: metaKey,
+        event: e
+      });
+      wrapperRef.current.style.cursor = "auto";
+    } else {
+      var now = Date.now();
 
-  return elem;
+      if (stateRef.current.noTap) {
+        stateRef.current.noTap = false;
+      } // Send tap event only if time less than 300ms
+      else if (stateRef.current.timeStart - now < 300) {
+        queue(onTap, {
+          clientX: clientX,
+          clientY: clientY,
+          altKey: altKey,
+          ctrlKey: ctrlKey,
+          metaKey: metaKey,
+          target: target
+        });
+      }
+    }
+  }, [onDragEnd, onTap, queue]);
+  var onDoubleTapHandler = React__default.useCallback(function (event) {
+    queue(onDoubleTap, event);
+  }, [onDoubleTap, queue]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    onWheel: onWheel,
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: onPointerUp,
+    onPointerOut: onPointerUp,
+    onPointerLeave: onPointerUp,
+    onPointerCancel: onPointerUp,
+    onDoubleClick: onDoubleTapHandler,
+    style: {
+      touchAction: "none"
+    },
+    ref: wrapperRef
+  }, children);
 };
-var getIdFromElem = function getIdFromElem(elem) {
-  var _elem$dataset;
 
-  var value = elem === null || elem === void 0 ? void 0 : (_elem$dataset = elem.dataset) === null || _elem$dataset === void 0 ? void 0 : _elem$dataset.id;
+var _excluded$3 = ["onResize"];
 
-  if (!value) {
-    var _elem$dataset2;
+var ResizeHandler = function ResizeHandler(_ref) {
+  var onResize = _ref.onResize,
+      rest = _objectWithoutProperties(_ref, _excluded$3);
 
-    // eslint-disable-next-line no-console
-    console.error("getIdFromElem call fails", elem, JSON.stringify(elem === null || elem === void 0 ? void 0 : elem.dataset), elem === null || elem === void 0 ? void 0 : (_elem$dataset2 = elem.dataset) === null || _elem$dataset2 === void 0 ? void 0 : _elem$dataset2.id);
-  }
+  var onDrag = useRecoilCallback(function (_ref2) {
+    var snapshot = _ref2.snapshot;
+    return /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref3) {
+        var deltaX, deltaY, event, _yield$snapshot$getPr, scale;
 
-  return value;
-};
-var getItemBoundingBox = function getItemBoundingBox(items) {
-  var wrapper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
-  var result = items.reduce(function (prev, itemId) {
-    var elem = getItemElem(wrapper, itemId);
-    if (!elem) return null;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                deltaX = _ref3.deltaX, deltaY = _ref3.deltaY, event = _ref3.event;
+                event.stopPropagation();
+                _context.next = 4;
+                return snapshot.getPromise(BoardTransformAtom);
 
-    var _elem$getBoundingClie = elem.getBoundingClientRect(),
-        left = _elem$getBoundingClie.left,
-        right = _elem$getBoundingClie.right,
-        top = _elem$getBoundingClie.top,
-        bottom = _elem$getBoundingClie.bottom;
+              case 4:
+                _yield$snapshot$getPr = _context.sent;
+                scale = _yield$snapshot$getPr.scale;
+                onResize({
+                  width: deltaX / scale,
+                  height: deltaY / scale
+                });
 
-    var boundingBox;
+              case 7:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
 
-    if (!prev) {
-      boundingBox = {
-        left: left,
-        top: top,
-        right: right,
-        bottom: bottom
+      return function (_x) {
+        return _ref4.apply(this, arguments);
       };
-    } else {
-      boundingBox = prev;
-    }
+    }();
+  }, [onResize]);
+  return /*#__PURE__*/React__default.createElement(Gesture, {
+    onDrag: onDrag
+  }, /*#__PURE__*/React__default.createElement("div", rest));
+};
 
-    boundingBox.left = Math.min(left, boundingBox.left);
-    boundingBox.top = Math.min(top, boundingBox.top);
-    boundingBox.right = Math.max(right, boundingBox.right);
-    boundingBox.bottom = Math.max(bottom, boundingBox.bottom);
-    return boundingBox;
-  }, null);
+var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' x='0px' y='0px' viewBox='0 0 75.601318 94.9' xml:space='preserve' id='svg26' sodipodi:docname='lock.svg' width='75.601318' height='94.900002' inkscape:version='0.92.5 (2060ec1f9f%2c 2020-04-08)'%3e%3cmetadata id='metadata32'%3e%3crdf:RDF%3e%3ccc:Work rdf:about=''%3e%3cdc:format%3eimage/svg%2bxml%3c/dc:format%3e%3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3e%3cdc:title%3e%3c/dc:title%3e%3c/cc:Work%3e%3c/rdf:RDF%3e%3c/metadata%3e%3cdefs id='defs30' /%3e%3csodipodi:namedview pagecolor='black' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='1848' inkscape:window-height='1016' id='namedview28' showgrid='false' fit-margin-top='0' fit-margin-left='0' fit-margin-right='0' fit-margin-bottom='0' inkscape:zoom='5.3400704' inkscape:cx='3.2640013' inkscape:cy='45.072152' inkscape:window-x='1512' inkscape:window-y='27' inkscape:window-maximized='1' inkscape:current-layer='g16' /%3e%3cg id='g16' transform='translate(-12.2%2c-2.5)'%3e%3cpath d='M 75.4%2c36.8 H 34.1 V 24.6 c 0%2c-8.8 7.1%2c-15.9 15.9%2c-15.9 8.8%2c0 15.9%2c7.1 15.9%2c15.9 0%2c1.7 1.4%2c3.1 3.1%2c3.1 1.7%2c0 3.1%2c-1.4 3.1%2c-3.1 C 72.1%2c12.4 62.2%2c2.5 50%2c2.5 37.8%2c2.5 27.9%2c12.4 27.9%2c24.6 v 12.2 h -3.3 c -6.9%2c0 -12.4%2c5.6 -12.4%2c12.4 V 85 c 0%2c6.9 5.6%2c12.4 12.4%2c12.4 h 50.8 c 6.9%2c0 12.4%2c-5.6 12.4%2c-12.4 V 49.2 C 87.9%2c42.3 82.3%2c36.8 75.4%2c36.8 Z m 6.2%2c48.3 c 0%2c3.4 -2.8%2c6.2 -6.2%2c6.2 H 24.6 c -3.4%2c0 -6.2%2c-2.8 -6.2%2c-6.2 V 49.2 c 0%2c-3.4 2.8%2c-6.2 6.2%2c-6.2 h 50.8 c 3.4%2c0 6.2%2c2.8 6.2%2c6.2 z' id='path12' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3cpath d='m 59.8%2c57.6 -12.5%2c12.5 -7%2c-7 c -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 -1.2%2c1.2 -1.2%2c3.2 0%2c4.4 l 9.2%2c9.2 c 0.6%2c0.6 1.4%2c0.9 2.2%2c0.9 0.8%2c0 1.6%2c-0.3 2.2%2c-0.9 L 64.2%2c62 c 1.2%2c-1.2 1.2%2c-3.2 0%2c-4.4 -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 z' id='path14' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3c/g%3e%3c/svg%3e";
 
-  if (!result) {
-    return result;
-  }
+var _excluded$2 = ["type", "rotation", "id", "locked", "layer"],
+    _excluded2 = ["state", "boardSize", "currentUser"],
+    _excluded3 = ["x", "y", "layer", "moving"];
 
-  result.width = result.right - result.left;
-  result.height = result.bottom - result.top;
-  return result;
-};
-
-var isMacOS = function isMacOS() {
-  var userAgent = navigator.userAgent.toLowerCase();
-  return /mac os ?x 10/.test(userAgent);
-}; // From https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line
-
-var getScrollLineHeight = function getScrollLineHeight() {
-  var iframe = document.createElement("iframe");
-  iframe.src = "#";
-  document.body.appendChild(iframe); // Write content in Iframe
+var _templateObject$2;
+var ItemWrapper = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  transition: transform 150ms;\n  user-select: none;\n  padding: 2px;\n  box-sizing: border-box;\n  transform: rotate(", "deg);\n\n  & .corner {\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n\n  & .top-left {\n    top: 0;\n    left: 0;\n  }\n  & .top-right {\n    top: 0;\n    right: 0;\n  }\n  & .bottom-left {\n    bottom: 0;\n    left: 0;\n  }\n  & .bottom-right {\n    bottom: 0;\n    right: 0;\n  }\n\n  &.selected {\n    border: 2px dashed #db5034;\n    padding: 0px;\n    cursor: pointer;\n  }\n\n  &.locked::after {\n    content: \"\";\n    position: absolute;\n    width: 24px;\n    height: 30px;\n    top: 4px;\n    right: 4px;\n    opacity: 0.1;\n    background-image: url(\"", "\");\n    background-size: cover;\n    user-select: none;\n  }\n\n  &.locked:hover::after {\n    opacity: 0.3;\n  }\n\n  & .resize {\n    position: absolute;\n\n    width: 10px;\n    height: 10px;\n    border: 2px solid #db5034;\n    background-color: #db5034;\n    cursor: move;\n\n    &.resize-width {\n      cursor: ew-resize;\n      right: -6px;\n      top: calc(50% - 5px);\n    }\n    &.resize-height {\n      cursor: ns-resize;\n      bottom: -6px;\n      left: calc(50% - 5px);\n    }\n    &.resize-ratio {\n      cursor: nwse-resize;\n      bottom: -6px;\n      right: -6px;\n    }\n  }\n"])), function (_ref) {
+  var rotation = _ref.rotation;
+  return rotation;
+}, img);
 
-  var idoc = iframe.contentWindow.document;
-  idoc.open();
-  idoc.write("<!DOCTYPE html><html><head></head><body><span>a</span></body></html>");
-  idoc.close();
-  var scrollLineHeight = idoc.body.firstElementChild.offsetHeight;
-  document.body.removeChild(iframe);
-  return scrollLineHeight;
+var identity = function identity(x) {
+  return x;
 };
 
-var LINE_HEIGHT = getScrollLineHeight(); // Reasonable default from https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
-
-var PAGE_HEIGHT = 800;
-
-var otherPointer = function otherPointer(pointers, currentPointer) {
-  var p2 = Object.keys(pointers).map(function (p) {
-    return Number(p);
-  }).find(function (pointer) {
-    return pointer !== currentPointer;
-  });
-  return pointers[p2];
+var DefaultErrorComponent = function DefaultErrorComponent(_ref2) {
+  var onReload = _ref2.onReload;
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: "100px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      textAlign: "center",
+      color: "red"
+    },
+    className: "syncboard-error-item"
+  }, "Sorry, this item seems broken.", /*#__PURE__*/React__default.createElement("button", {
+    onClick: onReload
+  }, "Reload it"));
 };
+/* Error boundary for broken item */
 
-var computeDistance = function computeDistance(_ref, _ref2) {
-  var _ref3 = _slicedToArray(_ref, 2),
-      x1 = _ref3[0],
-      y1 = _ref3[1];
 
-  var _ref4 = _slicedToArray(_ref2, 2),
-      x2 = _ref4[0],
-      y2 = _ref4[1];
+var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ItemErrorBoundary, _React$Component);
 
-  var distanceX = Math.abs(x1 - x2);
-  var distanceY = Math.abs(y1 - y2);
-  return Math.hypot(distanceX, distanceY);
-};
+  var _super = _createSuper(ItemErrorBoundary);
 
-var empty = function empty() {};
+  function ItemErrorBoundary(props) {
+    var _this;
 
-var protect = function protect(fn) {
-  return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var _args = arguments;
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return fn.apply(void 0, _args);
+    _classCallCheck(this, ItemErrorBoundary);
 
-          case 3:
-            _context.next = 8;
-            break;
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false,
+      itemId: props.itemId
+    };
+    _this.onReload = _this.onReload.bind(_assertThisInitialized(_this));
+    return _this;
+  }
 
-          case 5:
-            _context.prev = 5;
-            _context.t0 = _context["catch"](0);
-            // eslint-disable-next-line no-console
-            console.error(_context.t0);
+  _createClass(ItemErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      // eslint-disable-next-line no-console
+      console.error("Error for item ".concat(this.state.itemId), error, this.props.state);
+    }
+  }, {
+    key: "onReload",
+    value: function onReload() {
+      this.setState({
+        hasError: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var ErrorComponent = this.props.ErrorComponent;
 
-          case 8:
-          case "end":
-            return _context.stop();
-        }
+      if (this.state.hasError) {
+        return /*#__PURE__*/React__default.createElement(ErrorComponent, {
+          onReload: this.onReload
+        });
       }
-    }, _callee, null, [[0, 5]]);
-  }));
-};
-
-var Gesture = function Gesture(_ref6) {
-  var children = _ref6.children,
-      _ref6$onDrag = _ref6.onDrag,
-      onDrag = _ref6$onDrag === void 0 ? empty : _ref6$onDrag,
-      _ref6$onDragStart = _ref6.onDragStart,
-      onDragStart = _ref6$onDragStart === void 0 ? empty : _ref6$onDragStart,
-      _ref6$onDragEnd = _ref6.onDragEnd,
-      onDragEnd = _ref6$onDragEnd === void 0 ? empty : _ref6$onDragEnd,
-      _ref6$onPan = _ref6.onPan,
-      onPan = _ref6$onPan === void 0 ? empty : _ref6$onPan,
-      _ref6$onTap = _ref6.onTap,
-      onTap = _ref6$onTap === void 0 ? empty : _ref6$onTap,
-      _ref6$onLongTap = _ref6.onLongTap,
-      onLongTap = _ref6$onLongTap === void 0 ? empty : _ref6$onLongTap,
-      _ref6$onDoubleTap = _ref6.onDoubleTap,
-      onDoubleTap = _ref6$onDoubleTap === void 0 ? empty : _ref6$onDoubleTap,
-      onZoom = _ref6.onZoom;
-  var wrapperRef = React.useRef(null);
-  var stateRef = React.useRef({
-    moving: false,
-    pointers: {},
-    mainPointer: undefined
-  });
-  var queueRef = React.useRef([]); // Queue event to avoid async mess
 
-  var queue = React.useCallback(function (callback, args) {
-    queueRef.current.push( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return protect(callback)(args);
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
+    }
+  }]);
 
-            case 2:
-              queueRef.current.shift();
+  return ItemErrorBoundary;
+}(React__default.Component);
 
-              if (!(queueRef.current.length !== 0)) {
-                _context2.next = 6;
-                break;
-              }
+var removeClass = function removeClass(e) {
+  e.target.className = "";
+};
 
-              _context2.next = 6;
-              return protect(queueRef.current[0])();
+var defaultResize = function defaultResize(_ref3) {
+  var width = _ref3.width,
+      height = _ref3.height,
+      actualWidth = _ref3.actualWidth,
+      actualHeight = _ref3.actualHeight,
+      prevState = _ref3.prevState,
+      keepRatio = _ref3.keepRatio;
+  var currentWidth = prevState.width,
+      currentHeight = prevState.height; // Parse text values if any
+
+  var _ref4 = [parseFloat(currentWidth), parseFloat(currentHeight)];
+  currentWidth = _ref4[0];
+  currentHeight = _ref4[1];
+
+  if (!currentWidth || Number.isNaN(Number(currentWidth))) {
+    currentWidth = actualWidth;
+  }
 
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    })));
+  if (!currentHeight || Number.isNaN(Number(currentHeight))) {
+    currentHeight = actualHeight;
+  }
 
-    if (queueRef.current.length === 1) {
-      protect(queueRef.current[0])();
-    }
-  }, []);
-  var onWheel = React.useCallback(function (e) {
-    var deltaX = e.deltaX,
-        deltaY = e.deltaY,
-        clientX = e.clientX,
-        clientY = e.clientY,
-        deltaMode = e.deltaMode,
-        ctrlKey = e.ctrlKey,
-        altKey = e.altKey,
-        metaKey = e.metaKey,
-        target = e.target; // On a MacOs trackpad, the pinch gesture sets the ctrlKey to true.
-    // In that situation, we want to use the custom scaling, not the browser default zoom.
-    // Hence in this situation we avoid to return immediately.
+  if (keepRatio) {
+    var ratio = currentWidth / currentHeight;
+    return _objectSpread2(_objectSpread2({}, prevState), {}, {
+      width: (currentWidth + width).toFixed(1),
+      height: (currentHeight + height / ratio).toFixed(1)
+    });
+  }
 
-    if (altKey || ctrlKey && !isMacOS()) {
-      return;
-    } // On a trackpad, the pinch and pan events are differentiated by the crtlKey value.
-    // On a pinch gesture, the ctrlKey is set to true, so we want to have a scaling effect.
-    // If we are only moving the fingers in the same direction, a pan is needed.
-    // Ref: https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e
+  return _objectSpread2(_objectSpread2({}, prevState), {}, {
+    width: (currentWidth + width).toFixed(1),
+    height: (currentHeight + height).toFixed(1)
+  });
+};
 
+var defaultResizeDirection = {
+  w: true,
+  h: true,
+  b: true
+};
 
-    if (isMacOS() && !ctrlKey) {
-      queue(onPan, {
-        deltaX: -2 * deltaX,
-        deltaY: -2 * deltaY,
-        button: 1,
-        ctrlKey: ctrlKey,
-        metaKey: metaKey,
-        target: target,
-        event: e
-      });
-    } else {
-      // Quit if onZoom is not set
-      if (onZoom === undefined || !deltaY) return;
-      var scale = deltaY;
+var Item = function Item(_ref5) {
+  var _itemMap$error;
 
-      switch (deltaMode) {
-        case 1:
-          // Pixel
-          scale *= LINE_HEIGHT;
-          break;
+  var setState = _ref5.setState,
+      _ref5$state = _ref5.state;
+  _ref5$state = _ref5$state === void 0 ? {} : _ref5$state;
+
+  var type = _ref5$state.type,
+      _ref5$state$rotation = _ref5$state.rotation,
+      rotation = _ref5$state$rotation === void 0 ? 0 : _ref5$state$rotation,
+      id = _ref5$state.id,
+      locked = _ref5$state.locked,
+      layer = _ref5$state.layer,
+      rest = _objectWithoutProperties(_ref5$state, _excluded$2),
+      _ref5$animate = _ref5.animate,
+      animate = _ref5$animate === void 0 ? "hvr-pop" : _ref5$animate,
+      isSelected = _ref5.isSelected,
+      itemMap = _ref5.itemMap,
+      _ref5$showResizeHandl = _ref5.showResizeHandle,
+      showResizeHandle = _ref5$showResizeHandl === void 0 ? false : _ref5$showResizeHandl;
+
+  var itemWrapperRef = React__default.useRef(null);
+  var _itemMap$type = itemMap[type],
+      _itemMap$type$compone = _itemMap$type.component,
+      Component = _itemMap$type$compone === void 0 ? function () {
+    return null;
+  } : _itemMap$type$compone,
+      _itemMap$type$resizeD = _itemMap$type.resizeDirections,
+      resizeDirections = _itemMap$type$resizeD === void 0 ? defaultResizeDirection : _itemMap$type$resizeD,
+      _itemMap$type$resize = _itemMap$type.resize,
+      resize = _itemMap$type$resize === void 0 ? defaultResize : _itemMap$type$resize;
+  var updateState = React__default.useCallback(function (callbackOrItem) {
+    var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    return setState(id, callbackOrItem, sync);
+  }, [setState, id]);
+  React__default.useEffect(function () {
+    itemWrapperRef.current.className = animate;
+  }, [animate]);
+  var className = "item ".concat(id);
 
-        case 2:
-          scale *= PAGE_HEIGHT;
-          break;
-      }
+  if (locked) {
+    className += " locked";
+  }
 
-      if (isMacOS()) {
-        scale *= 2;
-      }
+  if (isSelected) {
+    className += " selected";
+  }
 
-      queue(onZoom, {
-        scale: scale,
-        clientX: clientX,
-        clientY: clientY,
-        event: e
+  var onResize = React__default.useCallback(function (_ref6) {
+    var _ref6$width = _ref6.width,
+        width = _ref6$width === void 0 ? 0 : _ref6$width,
+        _ref6$height = _ref6.height,
+        height = _ref6$height === void 0 ? 0 : _ref6$height,
+        keepRatio = _ref6.keepRatio;
+    updateState(function (prev) {
+      var _itemWrapperRef$curre = itemWrapperRef.current,
+          offsetWidth = _itemWrapperRef$curre.offsetWidth,
+          offsetHeight = _itemWrapperRef$curre.offsetHeight;
+      return resize({
+        prevState: prev,
+        width: width,
+        height: height,
+        actualHeight: offsetHeight,
+        actualWidth: offsetWidth,
+        keepRatio: keepRatio
       });
-    }
-  }, [onPan, onZoom, queue]);
-  var onPointerDown = React.useCallback(function (_ref8) {
-    var target = _ref8.target,
-        button = _ref8.button,
-        clientX = _ref8.clientX,
-        clientY = _ref8.clientY,
-        pointerId = _ref8.pointerId,
-        altKey = _ref8.altKey,
-        ctrlKey = _ref8.ctrlKey,
-        metaKey = _ref8.metaKey,
-        isPrimary = _ref8.isPrimary;
-    // Add pointer to map
-    stateRef.current.pointers[pointerId] = {
-      clientX: clientX,
-      clientY: clientY
-    };
+    });
+  }, [resize, updateState]);
+  var onResizeWidth = React__default.useCallback(function (_ref7) {
+    var width = _ref7.width;
+    onResize({
+      width: width
+    });
+  }, [onResize]);
+  var onResizeHeight = React__default.useCallback(function (_ref8) {
+    var height = _ref8.height;
+    onResize({
+      height: height
+    });
+  }, [onResize]);
+  var onResizeRatio = React__default.useCallback(function (_ref9) {
+    var width = _ref9.width;
+    onResize({
+      height: width,
+      width: width,
+      keepRatio: true
+    });
+  }, [onResize]);
+  return /*#__PURE__*/React__default.createElement(ItemWrapper, {
+    rotation: rotation,
+    locked: locked,
+    selected: isSelected,
+    layer: layer,
+    "data-id": id,
+    className: className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: "flex"
+    },
+    ref: itemWrapperRef,
+    onAnimationEnd: removeClass,
+    onKeyDown: function onKeyDown(e) {
+      return e.stopPropagation();
+    },
+    onKeyUp: function onKeyUp(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement(ItemErrorBoundary, {
+    itemId: id,
+    state: rest,
+    setState: updateState,
+    ErrorComponent: (itemMap === null || itemMap === void 0 ? void 0 : (_itemMap$error = itemMap.error) === null || _itemMap$error === void 0 ? void 0 : _itemMap$error.component) || DefaultErrorComponent
+  }, /*#__PURE__*/React__default.createElement(Component, _extends$1({}, rest, {
+    id: id,
+    setState: updateState
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "corner top-left"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "corner top-right"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "corner bottom-right"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "corner bottom-left"
+  }), isSelected && showResizeHandle && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, resizeDirections.b && /*#__PURE__*/React__default.createElement(ResizeHandler, {
+    className: "resize resize-ratio",
+    onResize: onResizeRatio
+  }), resizeDirections.h && /*#__PURE__*/React__default.createElement(ResizeHandler, {
+    className: "resize resize-height",
+    onResize: onResizeHeight
+  }), resizeDirections.w && /*#__PURE__*/React__default.createElement(ResizeHandler, {
+    className: "resize resize-width",
+    onResize: onResizeWidth
+  }))));
+};
+
+var MemoizedItem = /*#__PURE__*/memo(Item, function (_ref10, _ref11) {
+  var prevState = _ref10.state,
+      prevSetState = _ref10.setState,
+      prevIsSelected = _ref10.isSelected,
+      prevShowResizeHandle = _ref10.showResizeHandle;
+  var nextState = _ref11.state,
+      nextSetState = _ref11.setState,
+      nextIsSelected = _ref11.isSelected,
+      nextShowResizeHandle = _ref11.showResizeHandle;
+  return prevIsSelected === nextIsSelected && prevShowResizeHandle === nextShowResizeHandle && prevSetState === nextSetState && JSON.stringify(prevState) === JSON.stringify(nextState);
+}); // Exclude positioning from memoization
+
+var PositionedItem = function PositionedItem(_ref12) {
+  var _ref12$state = _ref12.state,
+      state = _ref12$state === void 0 ? {} : _ref12$state,
+      boardSize = _ref12.boardSize,
+      currentUser = _ref12.currentUser,
+      rest = _objectWithoutProperties(_ref12, _excluded2);
+
+  if (!rest.itemMap[state.type]) {
+    // eslint-disable-next-line no-console
+    console.warn("Item type ".concat(state.type, " not recognized!"));
+    return null;
+  }
+
+  var _rest$itemMap$state$t = rest.itemMap[state.type].stateHook,
+      stateHook = _rest$itemMap$state$t === void 0 ? identity : _rest$itemMap$state$t;
+
+  var _stateHook = stateHook(state, {
+    currentUser: currentUser
+  }),
+      _stateHook$x = _stateHook.x,
+      x = _stateHook$x === void 0 ? 0 : _stateHook$x,
+      _stateHook$y = _stateHook.y,
+      y = _stateHook$y === void 0 ? 0 : _stateHook$y,
+      _stateHook$layer = _stateHook.layer,
+      layer = _stateHook$layer === void 0 ? 0 : _stateHook$layer,
+      moving = _stateHook.moving,
+      stateRest = _objectWithoutProperties(_stateHook, _excluded3);
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: "absolute",
+      top: "".concat(boardSize / 2, "px"),
+      left: "".concat(boardSize / 2, "px"),
+      display: "inline-block",
+      transform: "translate(".concat(x, "px, ").concat(y, "px)"),
+      zIndex: (layer + 4) * 10 + 100 + (moving ? 5 : 0) // Items z-index between 100 and 200
 
-    if (isPrimary) {
-      // Clean mainPoint on primary pointer
-      stateRef.current.mainPointer = undefined;
     }
+  }, /*#__PURE__*/React__default.createElement(MemoizedItem, _extends$1({}, rest, {
+    // Helps to prevent render
+    showResizeHandle: rest.isSelected && rest.showResizeHandle,
+    state: stateRest
+  })));
+};
 
-    if (stateRef.current.mainPointer !== undefined) {
-      if (stateRef.current.mainPointer !== pointerId) {
-        // This is not the main pointer
-        try {
-          var _otherPointer = otherPointer(stateRef.current.pointers, pointerId),
-              clientX2 = _otherPointer.clientX,
-              clientY2 = _otherPointer.clientY;
+var MemoizedPositionedItem = /*#__PURE__*/memo(PositionedItem);
 
-          var newClientX = (clientX2 + clientX) / 2;
-          var newClientY = (clientY2 + clientY) / 2;
-          var distance = computeDistance([clientX2, clientY2], [clientX, clientY]); // We update previous position as the new position is the center beetween both finger
+var persistUser = function persistUser(user) {
+  localStorage.setItem("user", JSON.stringify(user));
+};
+var colors = ["#037758", "#99092a", "#067070", "#c6650f", "#008726", "#3d7004", "#348402", "#057f58", "#b58612", "#c44c01", "#0a7704", "#0e910e", "#027377", "#c99e02", "#054160", "#157a01", "#b10de2", "#0d6289", "#bc5d03", "#ba0cd1", "#d39f10", "#0c4c7a", "#460782", "#a51f10", "#cecb10", "#9b0943", "#607f0c", "#007a4b", "#bf0daa", "#af0ad8"];
 
-          Object.assign(stateRef.current, {
-            pressed: true,
-            moving: false,
-            gestureStart: false,
-            startX: clientX,
-            startY: clientY,
-            prevX: newClientX,
-            prevY: newClientY,
-            startDistance: distance,
-            prevDistance: distance
-          });
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.log("Error while getting other pointer. Ignoring", e); // eslint-disable-next-line no-unused-expressions
+var getRandomColor = function getRandomColor() {
+  return colors[Math.floor(Math.random() * colors.length)];
+}; // TODO remove user persistence
 
-          stateRef.current.mainPointer === undefined;
-        }
-      }
 
-      return;
-    } // We set the mainpointer
+var getUser = function getUser() {
+  if (localStorage.user) {
+    // Add some mandatory info if missing
+    var localUser = _objectSpread2({
+      name: "Player",
+      color: getRandomColor(),
+      uid: nanoid()
+    }, JSON.parse(localStorage.user)); // Id is given by server
+    // delete localUser.id;
 
 
-    stateRef.current.mainPointer = pointerId; // And prepare move
+    persistUser(localUser);
+    return localUser;
+  }
 
-    Object.assign(stateRef.current, {
-      pressed: true,
-      moving: false,
-      gestureStart: false,
-      startX: clientX,
-      startY: clientY,
-      prevX: clientX,
-      prevY: clientY,
-      currentButton: button,
-      target: target,
-      timeStart: Date.now(),
-      longTapTimeout: setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-        return regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                stateRef.current.noTap = true;
-                queue(onLongTap, {
-                  clientX: clientX,
-                  clientY: clientY,
-                  altKey: altKey,
-                  ctrlKey: ctrlKey,
-                  metaKey: metaKey,
-                  target: target
-                });
+  var newUser = {
+    name: "Player",
+    color: getRandomColor(),
+    uid: nanoid()
+  };
+  persistUser(newUser);
+  return newUser;
+};
+var userAtom = atom({
+  key: "user",
+  "default": getUser()
+});
+var usersAtom = atom({
+  key: "users",
+  "default": []
+});
+var localUsersAtom = selector({
+  key: "localUsersAtom",
+  get: function get(_ref) {
+    var _get = _ref.get;
 
-              case 2:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee3);
-      })), 750)
+    var currentUser = _get(userAtom);
+
+    var users = _get(usersAtom);
+
+    return users.filter(function (_ref2) {
+      var space = _ref2.space;
+      return space === currentUser.space;
     });
+  }
+});
 
-    try {
-      target.setPointerCapture(pointerId);
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.log("Fail to capture pointer", e);
-    }
-  }, [onLongTap, queue]);
-  var onPointerMove = React.useCallback(function (e) {
-    if (stateRef.current.pressed) {
-      var pointerId = e.pointerId,
-          eventClientX = e.clientX,
-          eventClientY = e.clientY,
-          altKey = e.altKey,
-          ctrlKey = e.ctrlKey,
-          metaKey = e.metaKey,
-          pointerType = e.pointerType;
+var useUsers = function useUsers() {
+  var _useRecoilState = useRecoilState(userAtom),
+      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
+      currentUser = _useRecoilState2[0],
+      setCurrentUserState = _useRecoilState2[1];
 
-      if (stateRef.current.mainPointer !== pointerId) {
-        // Event from other pointer
-        stateRef.current.pointers[pointerId] = {
-          clientX: eventClientX,
-          clientY: eventClientY
-        };
-        return;
-      }
+  var users = useRecoilValue(usersAtom);
+  var localUsers = useRecoilValue(localUsersAtom);
+  var setCurrentUser = React__default.useCallback(function (callbackOrUser) {
+    var callback = callbackOrUser;
 
-      stateRef.current.moving = true; // Do we have two fingers ?
+    if (_typeof(callbackOrUser) === "object") {
+      callback = function callback() {
+        return callbackOrUser;
+      };
+    }
 
-      var twoFingers = Object.keys(stateRef.current.pointers).length === 2;
-      var clientX;
-      var clientY;
-      var distance;
+    setCurrentUserState(function (prevUser) {
+      var newUser = _objectSpread2(_objectSpread2({}, callback(prevUser)), {}, {
+        id: prevUser.id,
+        uid: prevUser.uid
+      });
 
-      if (twoFingers) {
-        // Find other pointerId
-        var _otherPointer2 = otherPointer(stateRef.current.pointers, pointerId),
-            clientX2 = _otherPointer2.clientX,
-            clientY2 = _otherPointer2.clientY; // Update client X with the center of each touch
+      persistUser(newUser);
+      return newUser;
+    });
+  }, [setCurrentUserState]);
+  return {
+    currentUser: currentUser,
+    setCurrentUser: setCurrentUser,
+    users: users,
+    localUsers: localUsers
+  };
+};
 
+var SubscribeUserEvents = function SubscribeUserEvents() {
+  var usersRef = React__default.useRef([]);
+  var setUsers = useSetRecoilState(usersAtom);
 
-        clientX = (clientX2 + eventClientX) / 2;
-        clientY = (clientY2 + eventClientY) / 2;
-        distance = computeDistance([clientX2, clientY2], [eventClientX, eventClientY]);
-      } else {
-        clientX = eventClientX;
-        clientY = eventClientY;
-      } // We drag if
-      // On non touch device
-      //   - Button is 0
-      //   - Alt key is no pressed
-      // or on touch devices
-      //   - We use only one finger
+  var _useRecoilState = useRecoilState(userAtom),
+      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
+      currentUser = _useRecoilState2[0],
+      setCurrentUserState = _useRecoilState2[1];
 
+  var _useWire = useWire("room"),
+      wire = _useWire.wire,
+      isMaster = _useWire.isMaster,
+      roomSpace = _useWire.room;
 
-      var shouldDrag = pointerType !== "touch" ? stateRef.current.currentButton === 0 && !altKey : !twoFingers;
+  React__default.useEffect(function () {
+    setCurrentUserState(function (prevUser) {
+      return _objectSpread2(_objectSpread2({}, prevUser), {}, {
+        id: wire.userId,
+        space: roomSpace
+      });
+    });
+    return function () {
+      setCurrentUserState(function (prevUser) {
+        return _objectSpread2(_objectSpread2({}, prevUser), {}, {
+          id: wire.userId,
+          space: null
+        });
+      });
+    };
+  }, [wire.userId, roomSpace, setCurrentUserState]);
+  React__default.useEffect(function () {
+    if (!isMaster) {
+      var onGetUserList = function onGetUserList(userList) {
+        usersRef.current = userList;
+        setUsers(userList);
+      };
 
-      if (shouldDrag) {
-        // Send drag start on first move
-        if (!stateRef.current.gestureStart) {
-          wrapperRef.current.style.cursor = "move";
-          stateRef.current.gestureStart = true; // Clear tap timeout
+      wire.call("getUserList").then(onGetUserList, function () {
+        // retry later
+        setTimeout(function () {
+          wire.call("getUserList") // eslint-disable-next-line no-console
+          .then(onGetUserList, function (error) {
+            return console.log(error);
+          });
+        }, 1000);
+      });
+    }
+  }, [wire, isMaster, setUsers]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-          clearTimeout(stateRef.current.longTapTimeout);
-          queue(onDragStart, {
-            deltaX: 0,
-            deltaY: 0,
-            startX: stateRef.current.startX,
-            startY: stateRef.current.startY,
-            clientX: stateRef.current.startX,
-            clientY: stateRef.current.startY,
-            distanceX: 0,
-            distanceY: 0,
-            button: stateRef.current.currentButton,
-            altKey: altKey,
-            ctrlKey: ctrlKey,
-            metaKey: metaKey,
-            target: stateRef.current.target,
-            event: e
+  var debouncedEmitUpdateUser = useDebouncedCallback(function (newUser) {
+    wire.publish("userUpdate", newUser, true);
+  }, [wire], 500);
+  React__default.useEffect(function () {
+    if (currentUser && currentUser.id) {
+      debouncedEmitUpdateUser(currentUser);
+    }
+  }, [currentUser, debouncedEmitUpdateUser]);
+  React__default.useEffect(function () {
+    var unsub = [];
+
+    if (isMaster) {
+      wire.register("getUserList", function () {
+        return usersRef.current;
+      }).then(function (unregister) {
+        unsub.push(unregister);
+      });
+      unsub.push(wire.subscribe("userUpdate", function (user) {
+        if (usersRef.current.find(function (u) {
+          return u.id === user.id;
+        })) {
+          var newUsers = usersRef.current.map(function (u) {
+            return u.id === user.id ? user : u;
           });
-        } // Create closure
+          usersRef.current = newUsers;
+        } else {
+          var _newUsers = [].concat(_toConsumableArray(usersRef.current), [user]);
 
+          usersRef.current = _newUsers;
+        }
 
-        var deltaX = clientX - stateRef.current.prevX;
-        var deltaY = clientY - stateRef.current.prevY;
-        var distanceX = clientX - stateRef.current.startX;
-        var distanceY = clientY - stateRef.current.startY; // Drag event
+        setUsers(usersRef.current);
+        wire.publish("updateUserList", usersRef.current);
+      }));
+    }
 
-        queue(onDrag, {
-          deltaX: deltaX,
-          deltaY: deltaY,
-          startX: stateRef.current.startX,
-          startY: stateRef.current.startY,
-          clientX: clientX,
-          clientY: clientY,
-          distanceX: distanceX,
-          distanceY: distanceY,
-          button: stateRef.current.currentButton,
-          altKey: altKey,
-          ctrlKey: ctrlKey,
-          metaKey: metaKey,
-          target: stateRef.current.target,
-          event: e
-        });
-      } else {
-        if (!stateRef.current.gestureStart) {
-          wrapperRef.current.style.cursor = "move";
-          stateRef.current.gestureStart = true; // Clear tap timeout on first move
+    unsub.push(wire.subscribe("userLeave", function (userId) {
+      usersRef.current = usersRef.current.filter(function (_ref) {
+        var id = _ref.id;
+        return id !== userId;
+      });
+      setUsers(usersRef.current);
 
-          clearTimeout(stateRef.current.longTapTimeout);
-        } // Create closure
+      if (isMaster) {
+        wire.publish("updateUserList", usersRef.current);
+      }
+    }));
+    unsub.push(wire.subscribe("updateUserList", function (newList) {
+      usersRef.current = newList;
+      setUsers(usersRef.current);
+    }));
+    return function () {
+      unsub.forEach(function (u) {
+        return u();
+      });
+    };
+  }, [wire, isMaster, setUsers]);
+  return null;
+};
+
+var ItemList = function ItemList() {
+  var _useItemActions = useItemActions(),
+      updateItem = _useItemActions.updateItem;
+
+  var itemList = useRecoilValue(ItemListAtom);
+  var itemMap = useRecoilValue(ItemMapAtom);
+  var selectedItems = useRecoilValue(SelectedItemsAtom);
+
+  var _useRecoilValue = useRecoilValue(ConfigurationAtom),
+      boardSize = _useRecoilValue.boardSize,
+      showResizeHandle = _useRecoilValue.showResizeHandle,
+      itemTemplates = _useRecoilValue.itemTemplates;
+
+  var _useUsers = useUsers(),
+      currentUser = _useUsers.currentUser;
+
+  return itemList.map(function (itemId) {
+    return /*#__PURE__*/React__default.createElement(MemoizedPositionedItem, {
+      key: itemId,
+      state: itemMap[itemId],
+      setState: updateItem,
+      isSelected: selectedItems.includes(itemId),
+      itemMap: itemTemplates,
+      boardSize: boardSize,
+      currentUser: currentUser,
+      showResizeHandle: showResizeHandle
+    });
+  });
+};
+
+var SubcribeItemEvents = function SubcribeItemEvents() {
+  var _useWire = useWire("board"),
+      wire = _useWire.wire;
+
+  var setItemMap = useSetRecoilState(ItemMapAtom);
+
+  var _useItemActions = useItemActions(),
+      updateItemOrder = _useItemActions.updateItemOrder,
+      moveItems = _useItemActions.moveItems,
+      removeItems = _useItemActions.removeItems,
+      pushItem = _useItemActions.pushItem;
+
+  var batchUpdate = React__default.useCallback(function (updatedItems) {
+    setItemMap(function (prevItemMap) {
+      return _objectSpread2(_objectSpread2({}, prevItemMap), updatedItems);
+    });
+  }, [setItemMap]);
+  React__default.useEffect(function () {
+    var unsub = wire.subscribe("batchItemsUpdate", function (updatedItems) {
+      batchUpdate(updatedItems);
+    });
+    return unsub;
+  }, [wire, batchUpdate]);
+  React__default.useEffect(function () {
+    var unsub = wire.subscribe("selectedItemsMove", function (_ref) {
+      var itemIds = _ref.itemIds,
+          posDelta = _ref.posDelta;
+      moveItems(itemIds, posDelta, false);
+    });
+    return unsub;
+  }, [wire, moveItems]);
+  React__default.useEffect(function () {
+    var unsub = wire.subscribe("updateItemListOrder", function (itemIds) {
+      updateItemOrder(itemIds, false);
+    });
+    return unsub;
+  }, [wire, updateItemOrder]);
+  React__default.useEffect(function () {
+    var unsub = wire.subscribe("pushItem", function (newItem) {
+      pushItem(newItem, null, false);
+    });
+    return unsub;
+  }, [wire, pushItem]);
+  React__default.useEffect(function () {
+    var unsub = wire.subscribe("insertItemBefore", function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          newItem = _ref3[0],
+          beforeId = _ref3[1];
 
+      pushItem(newItem, beforeId, false);
+    });
+    return unsub;
+  }, [wire, pushItem]);
+  React__default.useEffect(function () {
+    var unsub = wire.subscribe("removeItems", function (itemIds) {
+      removeItems(itemIds, false);
+    });
+    return unsub;
+  }, [wire, removeItems]);
+  return null;
+};
 
-        var _deltaX = clientX - stateRef.current.prevX;
+/**
+ * Check if element or parent has className.
+ * @param {DOMElement} element
+ * @param {string} className
+ */
+var hasClass = function hasClass(element, className) {
+  return element.classList && element.classList.contains(className);
+};
+var insideClass = function insideClass(element, className) {
+  if (hasClass(element, className)) {
+    return element;
+  }
 
-        var _deltaY = clientY - stateRef.current.prevY;
+  if (!element.parentNode) {
+    return false;
+  }
 
-        var target = stateRef.current.target; // Pan event
+  return insideClass(element.parentNode, className);
+};
+var isPointInsideRect = function isPointInsideRect(point, rect) {
+  return point.x > rect.left && point.x < rect.left + rect.width && point.y > rect.top && point.y < rect.top + rect.height;
+};
+var isItemInsideElement = function isItemInsideElement(itemElement, otherElem) {
+  var rect = otherElem.getBoundingClientRect();
+  var fourElem = Array.from(itemElement.querySelectorAll(".corner"));
+  return fourElem.every(function (corner) {
+    var _corner$getBoundingCl = corner.getBoundingClientRect(),
+        y = _corner$getBoundingCl.top,
+        x = _corner$getBoundingCl.left;
 
-        queue(onPan, {
-          deltaX: _deltaX,
-          deltaY: _deltaY,
-          button: stateRef.current.currentButton,
-          altKey: altKey,
-          ctrlKey: ctrlKey,
-          metaKey: metaKey,
-          target: target,
-          event: e
-        });
+    return isPointInsideRect({
+      x: x,
+      y: y
+    }, rect);
+  });
+};
+var getItemElem = function getItemElem(wrapper, itemId) {
+  var elems = wrapper.getElementsByClassName("item ".concat(itemId));
+  var elem = elems[0];
 
-        if (twoFingers && distance !== stateRef.current.prevDistance && onZoom) {
-          var scale = stateRef.current.prevDistance - distance;
+  if (!elem) {
+    // eslint-disable-next-line no-console
+    console.error("Missing item ".concat(itemId));
+  }
 
-          if (Math.abs(scale) > 0) {
-            queue(onZoom, {
-              scale: scale,
-              clientX: clientX,
-              clientY: clientY,
-              event: e
-            });
-            stateRef.current.prevDistance = distance;
-          }
-        }
-      }
+  return elem;
+};
+var getIdFromElem = function getIdFromElem(elem) {
+  var _elem$dataset;
 
-      stateRef.current.prevX = clientX;
-      stateRef.current.prevY = clientY;
-    }
-  }, [onDrag, onDragStart, onPan, onZoom, queue]);
-  var onPointerUp = React.useCallback(function (e) {
-    var clientX = e.clientX,
-        clientY = e.clientY,
-        altKey = e.altKey,
-        ctrlKey = e.ctrlKey,
-        metaKey = e.metaKey,
-        target = e.target,
-        pointerId = e.pointerId;
+  var value = elem === null || elem === void 0 ? void 0 : (_elem$dataset = elem.dataset) === null || _elem$dataset === void 0 ? void 0 : _elem$dataset.id;
 
-    if (!stateRef.current.pointers[pointerId]) {
-      // Pointer already gone previously with another event
-      // ignoring it
-      return;
-    } // Remove pointer from map
+  if (!value) {
+    var _elem$dataset2;
 
+    // eslint-disable-next-line no-console
+    console.error("getIdFromElem call fails", elem, JSON.stringify(elem === null || elem === void 0 ? void 0 : elem.dataset), elem === null || elem === void 0 ? void 0 : (_elem$dataset2 = elem.dataset) === null || _elem$dataset2 === void 0 ? void 0 : _elem$dataset2.id);
+  }
 
-    delete stateRef.current.pointers[pointerId];
+  return value;
+};
+var getItemBoundingBox = function getItemBoundingBox(items) {
+  var wrapper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+  var result = items.reduce(function (prev, itemId) {
+    var elem = getItemElem(wrapper, itemId);
+    if (!elem) return null;
 
-    if (stateRef.current.mainPointer !== pointerId) {
-      // If this is not the main pointer we quit here
-      return;
-    }
+    var _elem$getBoundingClie = elem.getBoundingClientRect(),
+        left = _elem$getBoundingClie.left,
+        right = _elem$getBoundingClie.right,
+        top = _elem$getBoundingClie.top,
+        bottom = _elem$getBoundingClie.bottom;
 
-    while (Object.keys(stateRef.current.pointers).length > 0) {
-      // If was main pointer but we have another one, this one become main
-      stateRef.current.mainPointer = Number(Object.keys(stateRef.current.pointers)[0]);
+    var boundingBox;
 
-      try {
-        stateRef.current.target.setPointerCapture(stateRef.current.mainPointer);
-        return;
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log("Fails to set pointer capture", error);
-        stateRef.current.mainPointer = undefined;
-        delete stateRef.current.pointers[Object.keys(stateRef.current.pointers)[0]];
-      }
+    if (!prev) {
+      boundingBox = {
+        left: left,
+        top: top,
+        right: right,
+        bottom: bottom
+      };
+    } else {
+      boundingBox = prev;
     }
 
-    stateRef.current.mainPointer = undefined;
-    stateRef.current.pressed = false; // Clear longTap
-
-    clearTimeout(stateRef.current.longTapTimeout);
+    boundingBox.left = Math.min(left, boundingBox.left);
+    boundingBox.top = Math.min(top, boundingBox.top);
+    boundingBox.right = Math.max(right, boundingBox.right);
+    boundingBox.bottom = Math.max(bottom, boundingBox.bottom);
+    return boundingBox;
+  }, null);
 
-    if (stateRef.current.moving) {
-      // If we were moving, send drag end event
-      stateRef.current.moving = false;
-      queue(onDragEnd, {
-        deltaX: clientX - stateRef.current.prevX,
-        deltaY: clientY - stateRef.current.prevY,
-        startX: stateRef.current.startX,
-        startY: stateRef.current.startY,
-        clientX: clientX,
-        clientY: clientY,
-        distanceX: clientX - stateRef.current.startX,
-        distanceY: clientY - stateRef.current.startY,
-        button: stateRef.current.currentButton,
-        altKey: altKey,
-        ctrlKey: ctrlKey,
-        metaKey: metaKey,
-        event: e
-      });
-      wrapperRef.current.style.cursor = "auto";
-    } else {
-      var now = Date.now();
+  if (!result) {
+    return result;
+  }
 
-      if (stateRef.current.noTap) {
-        stateRef.current.noTap = false;
-      } // Send tap event only if time less than 300ms
-      else if (stateRef.current.timeStart - now < 300) {
-          queue(onTap, {
-            clientX: clientX,
-            clientY: clientY,
-            altKey: altKey,
-            ctrlKey: ctrlKey,
-            metaKey: metaKey,
-            target: target
-          });
-        }
-    }
-  }, [onDragEnd, onTap, queue]);
-  var onDoubleTapHandler = React.useCallback(function (event) {
-    queue(onDoubleTap, event);
-  }, [onDoubleTap, queue]);
-  return /*#__PURE__*/React.createElement("div", {
-    onWheel: onWheel,
-    onPointerDown: onPointerDown,
-    onPointerMove: onPointerMove,
-    onPointerUp: onPointerUp,
-    onPointerOut: onPointerUp,
-    onPointerLeave: onPointerUp,
-    onPointerCancel: onPointerUp,
-    onDoubleClick: onDoubleTapHandler,
-    style: {
-      touchAction: "none"
-    },
-    ref: wrapperRef
-  }, children);
+  result.width = result.right - result.left;
+  result.height = result.bottom - result.top;
+  return result;
 };
 
 var defaultSelectorStyle = {
@@ -5540,17 +5791,17 @@ var Selector = function Selector(_ref) {
   var _useItemActions = useItemActions(),
       findElementUnderPointer = _useItemActions.findElementUnderPointer;
 
-  var _React$useState = React.useState({}),
+  var _React$useState = React__default.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       selector = _React$useState2[0],
       setSelector = _React$useState2[1];
 
-  var wrapperRef = React.useRef(null);
-  var stateRef = React.useRef({
+  var wrapperRef = React__default.useRef(null);
+  var stateRef = React__default.useRef({
     moving: false
   }); // Reset selection on board loading
 
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     setSelected(function (prev) {
       return prev.length === 0 ? prev : [];
     });
@@ -5721,7 +5972,7 @@ var Selector = function Selector(_ref) {
     }
   };
 
-  var onLongTap = React.useCallback(function (_ref8) {
+  var onLongTap = React__default.useCallback(function (_ref8) {
     var target = _ref8.target;
     var foundElement = insideClass(target, "item");
 
@@ -5796,15 +6047,15 @@ var Selector = function Selector(_ref) {
       };
     }();
   }, [findElementUnderPointer, setSelected]);
-  return /*#__PURE__*/React.createElement(Gesture, {
+  return /*#__PURE__*/React__default.createElement(Gesture, {
     onDragStart: onDragStart,
     onDrag: onDrag,
     onDragEnd: onDragEnd,
     onTap: onTap,
     onLongTap: onLongTap
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     ref: wrapperRef
-  }, selector.moving && /*#__PURE__*/React.createElement("div", {
+  }, selector.moving && /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2({}, defaultSelectorStyle), {}, {
       transform: "translate(".concat(selector.left, "px, ").concat(selector.top, "px)"),
       height: "".concat(selector.height, "px"),
@@ -5824,9 +6075,9 @@ var ActionPane = function ActionPane(_ref) {
 
   var setSelectedItems = useSetRecoilState(SelectedItemsAtom);
   var setBoardState = useSetRecoilState(BoardStateAtom);
-  var actionRef = React.useRef({}); // Use ref because pointer events are faster than react state management
+  var actionRef = React__default.useRef({}); // Use ref because pointer events are faster than react state management
 
-  var selectedItemRef = React.useRef({
+  var selectedItemRef = React__default.useRef({
     items: []
   });
   var onDragStart = useRecoilCallback(function (_ref2) {
@@ -6082,167 +6333,236 @@ var ActionPane = function ActionPane(_ref) {
       };
     }();
   }, [moveItems, placeItems]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     document.addEventListener("keydown", onKeyDown);
     return function () {
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [onKeyDown]);
-  return /*#__PURE__*/React.createElement(Gesture, {
+  return /*#__PURE__*/React__default.createElement(Gesture, {
     onDragStart: onDragStart,
     onDrag: onDrag,
     onDragEnd: onDragEnd
   }, children);
 };
 
-function t(t, n, r) {
-  return Math.min(Math.max(t, r), n);
+/**
+ * A simple guard function:
+ *
+ * ```js
+ * Math.min(Math.max(low, value), high)
+ * ```
+ */
+function guard(low, high, value) {
+  return Math.min(Math.max(low, value), high);
 }
 
-var n = /*#__PURE__*/function (_Error) {
-  _inherits(n, _Error);
+var ColorError = /*#__PURE__*/function (_Error) {
+  _inherits(ColorError, _Error);
 
-  var _super = _createSuper(n);
+  var _super = _createSuper(ColorError);
 
-  function n(t) {
-    _classCallCheck(this, n);
+  function ColorError(color) {
+    _classCallCheck(this, ColorError);
 
-    return _super.call(this, "Failed to parse color: \"".concat(t, "\""));
+    return _super.call(this, "Failed to parse color: \"".concat(color, "\""));
   }
 
-  return n;
+  return ColorError;
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
-function r(r) {
-  if ("string" != typeof r) throw new n(r);
-  if ("transparent" === r.trim().toLowerCase()) return [0, 0, 0, 0];
-  var e = r.trim();
-  e = u.test(r) ? function (t) {
-    var r = t.toLowerCase().trim(),
-        e = o[function (t) {
-      var n = 5381,
-          r = t.length;
-
-      for (; r;) {
-        n = 33 * n ^ t.charCodeAt(--r);
-      }
-
-      return (n >>> 0) % 2341;
-    }(r)];
-
-    if (!e) throw new n(t);
-    return "#".concat(e);
-  }(r) : r;
-  var f = s.exec(e);
-
-  if (f) {
-    var _t = Array.from(f).slice(1);
+var ColorError$1 = ColorError;
+/**
+ * Parses a color into red, gree, blue, alpha parts
+ *
+ * @param color the input color. Can be a RGB, RBGA, HSL, HSLA, or named color
+ */
 
-    return [].concat(_toConsumableArray(_t.slice(0, 3).map(function (t) {
-      return parseInt(_(t, 2), 16);
-    })), [parseInt(_(_t[3] || "f", 2), 16) / 255]);
+function parseToRgba(color) {
+  if (typeof color !== 'string') throw new ColorError$1(color);
+  if (color.trim().toLowerCase() === 'transparent') return [0, 0, 0, 0];
+  var normalizedColor = color.trim();
+  normalizedColor = namedColorRegex.test(color) ? nameToHex(color) : color;
+  var reducedHexMatch = reducedHexRegex.exec(normalizedColor);
+
+  if (reducedHexMatch) {
+    var arr = Array.from(reducedHexMatch).slice(1);
+    return [].concat(_toConsumableArray(arr.slice(0, 3).map(function (x) {
+      return parseInt(r(x, 2), 16);
+    })), [parseInt(r(arr[3] || 'f', 2), 16) / 255]);
   }
 
-  var p = i.exec(e);
+  var hexMatch = hexRegex.exec(normalizedColor);
 
-  if (p) {
-    var _t2 = Array.from(p).slice(1);
+  if (hexMatch) {
+    var _arr = Array.from(hexMatch).slice(1);
 
-    return [].concat(_toConsumableArray(_t2.slice(0, 3).map(function (t) {
-      return parseInt(t, 16);
-    })), [parseInt(_t2[3] || "ff", 16) / 255]);
+    return [].concat(_toConsumableArray(_arr.slice(0, 3).map(function (x) {
+      return parseInt(x, 16);
+    })), [parseInt(_arr[3] || 'ff', 16) / 255]);
   }
 
-  var z = a.exec(e);
+  var rgbaMatch = rgbaRegex.exec(normalizedColor);
 
-  if (z) {
-    var _t3 = Array.from(z).slice(1);
+  if (rgbaMatch) {
+    var _arr2 = Array.from(rgbaMatch).slice(1);
 
-    return [].concat(_toConsumableArray(_t3.slice(0, 3).map(function (t) {
-      return parseInt(t, 10);
-    })), [parseFloat(_t3[3] || "1")]);
+    return [].concat(_toConsumableArray(_arr2.slice(0, 3).map(function (x) {
+      return parseInt(x, 10);
+    })), [parseFloat(_arr2[3] || '1')]);
   }
 
-  var h = c.exec(e);
+  var hslaMatch = hslaRegex.exec(normalizedColor);
 
-  if (h) {
-    var _Array$from$slice$map = Array.from(h).slice(1).map(parseFloat),
+  if (hslaMatch) {
+    var _Array$from$slice$map = Array.from(hslaMatch).slice(1).map(parseFloat),
         _Array$from$slice$map2 = _slicedToArray(_Array$from$slice$map, 4),
-        _e = _Array$from$slice$map2[0],
-        _o = _Array$from$slice$map2[1],
-        _2 = _Array$from$slice$map2[2],
-        _s = _Array$from$slice$map2[3];
-
-    if (t(0, 100, _o) !== _o) throw new n(r);
-    if (t(0, 100, _2) !== _2) throw new n(r);
-    return [].concat(_toConsumableArray(l(_e, _o, _2)), [_s || 1]);
+        h = _Array$from$slice$map2[0],
+        s = _Array$from$slice$map2[1],
+        l = _Array$from$slice$map2[2],
+        a = _Array$from$slice$map2[3];
+
+    if (guard(0, 100, s) !== s) throw new ColorError$1(color);
+    if (guard(0, 100, l) !== l) throw new ColorError$1(color);
+    return [].concat(_toConsumableArray(hslToRgb(h, s, l)), [a || 1]);
   }
 
-  throw new n(r);
+  throw new ColorError$1(color);
 }
 
-var e = function e(t) {
-  return parseInt(t.replace(/_/g, ""), 36);
-},
-    o = "1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce(function (t, n) {
-  var r = e(n.substring(0, 3)),
-      o = e(n.substring(3)).toString(16);
-  var _ = "";
+function hash(str) {
+  var hash = 5381;
+  var i = str.length;
 
-  for (var _t4 = 0; _t4 < 6 - o.length; _t4++) {
-    _ += "0";
+  while (i) {
+    hash = hash * 33 ^ str.charCodeAt(--i);
   }
+  /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
+   * integers. Since we want the results to be always positive, convert the
+   * signed int to an unsigned by doing an unsigned bitshift. */
+
 
-  return t[r] = "".concat(_).concat(o), t;
-}, {}),
-    _ = function _(t, n) {
-  return Array.from(Array(n)).map(function () {
-    return t;
-  }).join("");
-},
-    s = new RegExp("^#".concat(_("([a-f0-9])", 3), "([a-f0-9])?$"), "i"),
-    i = new RegExp("^#".concat(_("([a-f0-9]{2})", 3), "([a-f0-9]{2})?$"), "i"),
-    a = new RegExp("^rgba?\\(\\s*(\\d+)\\s*".concat(_(",\\s*(\\d+)\\s*", 2), "(?:,\\s*([\\d.]+))?\\s*\\)$"), "i"),
-    c = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,
-    u = /^[a-z]+$/i,
-    f = function f(t) {
-  return Math.round(255 * t);
-},
-    l = function l(t, n, r) {
-  var e = r / 100;
-  if (0 === n) return [e, e, e].map(f);
-
-  var o = (t % 360 + 360) % 360 / 60,
-      _ = (1 - Math.abs(2 * e - 1)) * (n / 100),
-      s = _ * (1 - Math.abs(o % 2 - 1));
-
-  var i = 0,
-      a = 0,
-      c = 0;
-  o >= 0 && o < 1 ? (i = _, a = s) : o >= 1 && o < 2 ? (i = s, a = _) : o >= 2 && o < 3 ? (a = _, c = s) : o >= 3 && o < 4 ? (a = s, c = _) : o >= 4 && o < 5 ? (i = s, c = _) : o >= 5 && o < 6 && (i = _, c = s);
-  var u = e - _ / 2;
-  return [i + u, a + u, c + u].map(f);
+  return (hash >>> 0) % 2341;
+}
+
+var colorToInt = function colorToInt(x) {
+  return parseInt(x.replace(/_/g, ''), 36);
 };
 
-function w(t) {
-  if ("transparent" === t) return 0;
+var compressedColorMap = '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'.split(' ').reduce(function (acc, next) {
+  var key = colorToInt(next.substring(0, 3));
+  var hex = colorToInt(next.substring(3)).toString(16); // NOTE: padStart could be used here but it breaks Node 6 compat
+  // https://github.com/ricokahler/color2k/issues/351
 
-  function n(t) {
-    var n = t / 255;
-    return n <= .03928 ? n / 12.92 : Math.pow((n + .055) / 1.055, 2.4);
+  var prefix = '';
+
+  for (var i = 0; i < 6 - hex.length; i++) {
+    prefix += '0';
   }
 
-  var _r = r(t),
-      _r2 = _slicedToArray(_r, 3),
-      e = _r2[0],
-      o = _r2[1],
-      _ = _r2[2];
+  acc[key] = "".concat(prefix).concat(hex);
+  return acc;
+}, {});
+/**
+ * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
+ */
 
-  return .2126 * n(e) + .7152 * n(o) + .0722 * n(_);
+function nameToHex(color) {
+  var normalizedColorName = color.toLowerCase().trim();
+  var result = compressedColorMap[hash(normalizedColorName)];
+  if (!result) throw new ColorError$1(color);
+  return "#".concat(result);
 }
 
-function F(t) {
-  return w(t) > .179;
+var r = function r(str, amount) {
+  return Array.from(Array(amount)).map(function () {
+    return str;
+  }).join('');
+};
+
+var reducedHexRegex = new RegExp("^#".concat(r('([a-f0-9])', 3), "([a-f0-9])?$"), 'i');
+var hexRegex = new RegExp("^#".concat(r('([a-f0-9]{2})', 3), "([a-f0-9]{2})?$"), 'i');
+var rgbaRegex = new RegExp("^rgba?\\(\\s*(\\d+)\\s*".concat(r(',\\s*(\\d+)\\s*', 2), "(?:,\\s*([\\d.]+))?\\s*\\)$"), 'i');
+var hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
+var namedColorRegex = /^[a-z]+$/i;
+
+var roundColor = function roundColor(color) {
+  return Math.round(color * 255);
+};
+
+var hslToRgb = function hslToRgb(hue, saturation, lightness) {
+  var l = lightness / 100;
+
+  if (saturation === 0) {
+    // achromatic
+    return [l, l, l].map(roundColor);
+  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
+
+
+  var huePrime = (hue % 360 + 360) % 360 / 60;
+  var chroma = (1 - Math.abs(2 * l - 1)) * (saturation / 100);
+  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+  var red = 0;
+  var green = 0;
+  var blue = 0;
+
+  if (huePrime >= 0 && huePrime < 1) {
+    red = chroma;
+    green = secondComponent;
+  } else if (huePrime >= 1 && huePrime < 2) {
+    red = secondComponent;
+    green = chroma;
+  } else if (huePrime >= 2 && huePrime < 3) {
+    green = chroma;
+    blue = secondComponent;
+  } else if (huePrime >= 3 && huePrime < 4) {
+    green = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 4 && huePrime < 5) {
+    red = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 5 && huePrime < 6) {
+    red = chroma;
+    blue = secondComponent;
+  }
+
+  var lightnessModification = l - chroma / 2;
+  var finalRed = red + lightnessModification;
+  var finalGreen = green + lightnessModification;
+  var finalBlue = blue + lightnessModification;
+  return [finalRed, finalGreen, finalBlue].map(roundColor);
+}; // taken from:
+
+/**
+ * Returns a number (float) representing the luminance of a color.
+ */
+
+
+function getLuminance(color) {
+  if (color === 'transparent') return 0;
+
+  function f(x) {
+    var channel = x / 255;
+    return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+  }
+
+  var _parseToRgba = parseToRgba(color),
+      _parseToRgba2 = _slicedToArray(_parseToRgba, 3),
+      r = _parseToRgba2[0],
+      g = _parseToRgba2[1],
+      b = _parseToRgba2[2];
+
+  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+} // taken from:
+/**
+ * An alternative function to `readableColor`. Returns whether or not the 
+ * readable color (i.e. the color to be place on top the input color) should be
+ * black.
+ */
+
+
+function readableColorIsBlack(color) {
+  return getLuminance(color) > 0.179;
 }
 
 var _excluded$1 = ["pos"];
@@ -6263,39 +6583,39 @@ var Cursor = function Cursor(_ref3) {
       _ref3$size = _ref3.size,
       size = _ref3$size === void 0 ? 40 : _ref3$size,
       text = _ref3.text;
-  var textColor = F(color) ? "#222" : "#EEE";
-  return /*#__PURE__*/React.createElement(StyledCursor, null, /*#__PURE__*/React.createElement("svg", {
+  var textColor = readableColorIsBlack(color) ? "#222" : "#EEE";
+  return /*#__PURE__*/React__default.createElement(StyledCursor, null, /*#__PURE__*/React__default.createElement("svg", {
     version: "1.1",
     id: "Layer_1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "1064.7701 445.5539 419.8101 717.0565",
     width: size,
     height: size
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__default.createElement("path", {
     d: "m 1197.1015,869.718 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",
     style: {
       fill: textColor
     }
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__default.createElement("path", {
     d: "m 1193.0939,861.12419 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",
     style: {
       fill: "white",
       stroke: "#111",
       strokeWidth: 20
     }
-  })), /*#__PURE__*/React.createElement(CursorName, {
+  })), /*#__PURE__*/React__default.createElement(CursorName, {
     color: color,
     textColor: textColor
   }, text));
 };
 
-var MemoizedCursor = /*#__PURE__*/React.memo(Cursor);
+var MemoizedCursor = /*#__PURE__*/React__default.memo(Cursor);
 
 var PositionnedCursor = function PositionnedCursor(_ref4) {
   var pos = _ref4.pos,
       rest = _objectWithoutProperties(_ref4, _excluded$1);
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: {
       transform: "translate(".concat(pos.x - 5, "px, ").concat(pos.y - 3, "px)"),
       top: 0,
@@ -6304,7 +6624,7 @@ var PositionnedCursor = function PositionnedCursor(_ref4) {
       position: "fixed",
       pointerEvents: "none"
     }
-  }, /*#__PURE__*/React.createElement(MemoizedCursor, rest));
+  }, /*#__PURE__*/React__default.createElement(MemoizedCursor, rest));
 };
 
 var Cursors = function Cursors(_ref) {
@@ -6313,20 +6633,20 @@ var Cursors = function Cursors(_ref) {
   var _useWire = useWire("board"),
       wire = _useWire.wire;
 
-  var _React$useState = React.useState({}),
+  var _React$useState = React__default.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       cursors = _React$useState2[0],
       setCursors = _React$useState2[1];
 
-  var preventRef = React.useRef(false);
-  var usersById = React.useMemo(function () {
+  var preventRef = React__default.useRef(false);
+  var usersById = React__default.useMemo(function () {
     return users.reduce(function (acc, user) {
       acc[user.id] = user;
       return acc;
     }, {});
   }, [users]); // Prevent race condition when removing user
 
-  var currentCursor = React.useMemo(function () {
+  var currentCursor = React__default.useMemo(function () {
     return users.reduce(function (acc, user) {
       if (cursors[user.id]) {
         acc[user.id] = cursors[user.id];
@@ -6335,7 +6655,7 @@ var Cursors = function Cursors(_ref) {
       return acc;
     }, {});
   }, [users, cursors]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     setCursors(function (prevCursors) {
       return users.reduce(function (acc, user) {
         if (prevCursors[user.id]) {
@@ -6346,7 +6666,7 @@ var Cursors = function Cursors(_ref) {
       }, {});
     });
   }, [users]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var unsub = [];
     unsub.push(wire.subscribe("cursorMove", function (_ref2) {
       var userId = _ref2.userId,
@@ -6377,12 +6697,12 @@ var Cursors = function Cursors(_ref) {
       });
     };
   }, [wire]);
-  return /*#__PURE__*/React.createElement("div", null, Object.entries(currentCursor).map(function (_ref4) {
+  return /*#__PURE__*/React__default.createElement("div", null, Object.entries(currentCursor).map(function (_ref4) {
     var _ref5 = _slicedToArray(_ref4, 2),
         userId = _ref5[0],
         pos = _ref5[1];
 
-    return /*#__PURE__*/React.createElement(PositionnedCursor, {
+    return /*#__PURE__*/React__default.createElement(PositionnedCursor, {
       key: userId,
       pos: pos,
       text: usersById[userId].name,
@@ -6401,7 +6721,7 @@ var CursorPane = function CursorPane(_ref) {
       user = _useUsers.currentUser,
       users = _useUsers.users;
 
-  var publish = React.useCallback(function (newPos) {
+  var publish = React__default.useCallback(function (newPos) {
     wire.publish("cursorMove", {
       userId: user.id,
       pos: newPos
@@ -6459,33 +6779,33 @@ var CursorPane = function CursorPane(_ref) {
     });
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     onPointerMove: onMouseMove,
     onPointerLeave: onLeave
-  }, children, /*#__PURE__*/React.createElement(Cursors, {
+  }, children, /*#__PURE__*/React__default.createElement(Cursors, {
     users: users
   }));
 };
 
 var useMousePosition = function useMousePosition(ref) {
-  var mouseRef = React.useRef({
+  var mouseRef = React__default.useRef({
     hover: false,
     x: 0,
     y: 0
   });
-  var onMouseMove = React.useCallback(function (e) {
+  var onMouseMove = React__default.useCallback(function (e) {
     var clientX = e.clientX,
         clientY = e.clientY;
     mouseRef.current.x = clientX;
     mouseRef.current.y = clientY;
   }, []);
-  var onMouseEnter = React.useCallback(function () {
+  var onMouseEnter = React__default.useCallback(function () {
     mouseRef.current.hover = true;
   }, []);
-  var onMouseLeave = React.useCallback(function () {
+  var onMouseLeave = React__default.useCallback(function () {
     mouseRef.current.hover = false;
   }, []);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var current = ref.current;
 
     if (current) {
@@ -6501,7 +6821,7 @@ var useMousePosition = function useMousePosition(ref) {
 
     return null; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ref, ref.current, onMouseMove, onMouseEnter, onMouseLeave]);
-  var getMouseInfo = React.useCallback(function () {
+  var getMouseInfo = React__default.useCallback(function () {
     return mouseRef.current;
   }, []);
   return getMouseInfo;
@@ -6512,7 +6832,7 @@ var digitCodes = _toConsumableArray(Array(5).keys()).map(function (id) {
 });
 
 var usePositionNavigator = function usePositionNavigator() {
-  var _React$useState = React.useState({}),
+  var _React$useState = React__default.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       positions = _React$useState2[0],
       setPositions = _React$useState2[1];
@@ -6572,7 +6892,7 @@ var usePositionNavigator = function usePositionNavigator() {
       };
     }();
   }, [positions]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     document.addEventListener("keydown", onKeyDown);
     return function () {
       document.removeEventListener("keydown", onKeyDown);
@@ -6587,7 +6907,7 @@ var PanZoom = function PanZoom(_ref) {
   var children = _ref.children,
       _ref$moveFirst = _ref.moveFirst,
       moveFirst = _ref$moveFirst === void 0 ? false : _ref$moveFirst;
-  var wrappedRef = React.useRef(null);
+  var wrappedRef = React__default.useRef(null);
   var dim = useRecoilValue(BoardTransformAtom);
 
   var _useDim = useDim(),
@@ -6597,13 +6917,13 @@ var PanZoom = function PanZoom(_ref) {
   var _useRecoilValue = useRecoilValue(ConfigurationAtom),
       itemExtentGlobal = _useRecoilValue.itemExtent;
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       centered = _React$useState2[0],
       setCentered = _React$useState2[1];
 
   var setBoardState = useSetRecoilState(BoardStateAtom);
-  var timeoutRef = React.useRef({}); // Get mouse position and hover status
+  var timeoutRef = React__default.useRef({}); // Get mouse position and hover status
 
   var getMouseInfo = useMousePosition(wrappedRef); // Hooks to save/restore position
 
@@ -6650,14 +6970,14 @@ var PanZoom = function PanZoom(_ref) {
       }, _callee);
     }));
   }, [setDim]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     if (!centered && itemExtentGlobal.left) {
       // Center board on first valid extent
       centerBoard();
       setCentered(true);
     }
   }, [centerBoard, centered, itemExtentGlobal]);
-  var onZoom = React.useCallback(function (_ref4) {
+  var onZoom = React__default.useCallback(function (_ref4) {
     var clientX = _ref4.clientX,
         clientY = _ref4.clientY,
         scale = _ref4.scale;
@@ -6680,7 +7000,7 @@ var PanZoom = function PanZoom(_ref) {
       }) : prev;
     });
   }, [setBoardState, zoomTo]);
-  var onPan = React.useCallback( /*#__PURE__*/function () {
+  var onPan = React__default.useCallback( /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref5) {
       var deltaX, deltaY;
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -6721,7 +7041,7 @@ var PanZoom = function PanZoom(_ref) {
       return _ref6.apply(this, arguments);
     };
   }(), [setBoardState, setDim]);
-  var onDrag = React.useCallback(function (state) {
+  var onDrag = React__default.useCallback(function (state) {
     var target = state.target;
     var outsideItem = !insideClass(target, "item") || insideClass(target, "locked");
 
@@ -6837,7 +7157,7 @@ var PanZoom = function PanZoom(_ref) {
       };
     }();
   }, [setDim, zoomTo, getMouseInfo]);
-  var onKeyUp = React.useCallback(function (e) {
+  var onKeyUp = React__default.useCallback(function (e) {
     // Ignore text in Input or Textarea
     if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return; // Zoom out on release
 
@@ -6845,7 +7165,7 @@ var PanZoom = function PanZoom(_ref) {
       zoomTo(1 / 3, getMouseInfo());
     }
   }, [getMouseInfo, zoomTo]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("keyup", onKeyUp);
     return function () {
@@ -6853,11 +7173,11 @@ var PanZoom = function PanZoom(_ref) {
       document.removeEventListener("keyup", onKeyUp);
     };
   }, [onKeyDown, onKeyUp]);
-  return /*#__PURE__*/React.createElement(Gesture, {
+  return /*#__PURE__*/React__default.createElement(Gesture, {
     onPan: onPan,
     onZoom: onZoom,
     onDrag: onDrag
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: "inline-block",
       transformOrigin: "top left",
@@ -6957,13 +7277,13 @@ var BoundingBox = function BoundingBox() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var updateBoxDelay = useDebouncedCallback(updateBox, [updateBox], 300);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     // Update selected elements bounding box
     updateBox();
     updateBoxDelay(); // Delay to update after board item animation like tap/untap.
   }, [selectedItems, itemMap, boardTransform, updateBox, updateBoxDelay]);
   if (!boundingBoxLast || selectedItems.length < 2) return null;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2({}, defaultZoneStyle), {}, {
       transform: "translate(".concat(boundingBoxLast.left, "px, ").concat(boundingBoxLast.top, "px)"),
       height: "".concat(boundingBoxLast.height, "px"),
@@ -6980,7 +7300,7 @@ var Selection = function Selection() {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(BoundingBox, null);
+  return /*#__PURE__*/React__default.createElement(BoundingBox, null);
 };
 
 var Board = function Board(_ref) {
@@ -6991,13 +7311,15 @@ var Board = function Board(_ref) {
       itemTemplates = _ref$itemTemplates === void 0 ? {} : _ref$itemTemplates,
       _ref$boardSize = _ref.boardSize,
       boardSize = _ref$boardSize === void 0 ? DEFAULT_BOARD_MAX_SIZE : _ref$boardSize,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$showResizeHandle = _ref.showResizeHandle,
+      showResizeHandle = _ref$showResizeHandle === void 0 ? false : _ref$showResizeHandle;
   var setConfiguration = useSetRecoilState(ConfigurationAtom);
 
   var _useDim = useDim(),
       updateItemExtent = _useDim.updateItemExtent;
 
-  var boardStyle = React.useMemo(function () {
+  var boardStyle = React__default.useMemo(function () {
     return _objectSpread2({
       userSelect: "none",
       width: "".concat(boardSize, "px"),
@@ -7005,31 +7327,30 @@ var Board = function Board(_ref) {
       backgroundColor: "#333"
     }, style);
   }, [boardSize, style]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     setConfiguration(function (prev) {
       return _objectSpread2(_objectSpread2({}, prev), {}, {
         itemTemplates: itemTemplates,
-        boardSize: boardSize
+        boardSize: boardSize,
+        showResizeHandle: showResizeHandle
       });
     });
-  }, [itemTemplates, setConfiguration, boardSize]);
-  React.useEffect(function () {
+  }, [itemTemplates, setConfiguration, boardSize, showResizeHandle]);
+  React__default.useEffect(function () {
     updateItemExtent();
     setTimeout(updateItemExtent, 2000);
   }, [updateItemExtent]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubcribeItemEvents, null), /*#__PURE__*/React.createElement(PanZoom, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SubcribeItemEvents, null), /*#__PURE__*/React__default.createElement(PanZoom, {
     moveFirst: moveFirst
-  }, /*#__PURE__*/React.createElement(Selector, {
+  }, /*#__PURE__*/React__default.createElement(Selector, {
     moveFirst: moveFirst
-  }, /*#__PURE__*/React.createElement(ActionPane, null, /*#__PURE__*/React.createElement(CursorPane, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ActionPane, null, /*#__PURE__*/React__default.createElement(CursorPane, null, /*#__PURE__*/React__default.createElement("div", {
     onContextMenu: function onContextMenu(e) {
       e.preventDefault();
     },
     style: boardStyle,
     className: "board"
-  }, /*#__PURE__*/React.createElement(ItemList, {
-    itemTemplates: itemTemplates
-  }), children))))), /*#__PURE__*/React.createElement(Selection, null));
+  }, /*#__PURE__*/React__default.createElement(ItemList, null), children))))), /*#__PURE__*/React__default.createElement(Selection, null));
 };
 
 var TOLERANCE = 100;
@@ -7061,7 +7382,7 @@ var translateBoundaries = function translateBoundaries(_ref) {
 
 var useDim = function useDim() {
   var setDim = useSetRecoilState(BoardTransformAtom);
-  var scaleBoundariesRef = React.useRef([0.1, 8]);
+  var scaleBoundariesRef = React__default.useRef([0.1, 8]);
 
   var _useRecoilValue = useRecoilValue(ConfigurationAtom),
       itemExtentGlobal = _useRecoilValue.itemExtent;
@@ -7373,7 +7694,7 @@ var useDim = function useDim() {
     }));
   }, []);
   var debouncedUpdateItemExtent = useDebouncedCallback(updateItemExtent, [], 300);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     if (itemExtentGlobal.left) {
       updateScaleBoundaries();
     }
@@ -7389,7 +7710,7 @@ var useDim = function useDim() {
 
 var useItemInteraction = function useItemInteraction(interaction) {
   var setInteractions = useSetRecoilState(ItemInteractionsAtom);
-  var register = React.useCallback(function (callback) {
+  var register = React__default.useCallback(function (callback) {
     setInteractions(function (prev) {
       var newInter = Array.isArray(prev[interaction]) ? [].concat(_toConsumableArray(prev[interaction]), [callback]) : [callback];
       return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, interaction, newInter));
@@ -7524,7 +7845,7 @@ var useItemActions = function useItemActions() {
       };
     }();
   }, [setItemMap, updateItemExtent, wire]);
-  var setItemListFull = React.useCallback(function (items) {
+  var setItemListFull = React__default.useCallback(function (items) {
     setItemMap(items.reduce(function (acc, item) {
       if (item && item.id) {
         acc[item.id] = item;
@@ -7540,11 +7861,11 @@ var useItemActions = function useItemActions() {
     setSelectItems([]);
     updateItemExtent();
   }, [setItemList, setItemMap, setSelectItems, updateItemExtent]);
-  var updateItem = React.useCallback(function (id, callbackOrItem) {
+  var updateItem = React__default.useCallback(function (id, callbackOrItem) {
     var sync = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     batchUpdateItems([id], callbackOrItem, sync);
   }, [batchUpdateItems]);
-  var moveItems = React.useCallback(function (itemIds, posDelta) {
+  var moveItems = React__default.useCallback(function (itemIds, posDelta) {
     var sync = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     setItemMap(function (prevItemMap) {
       var result = _objectSpread2({}, prevItemMap);
@@ -7574,7 +7895,7 @@ var useItemActions = function useItemActions() {
 
     updateItemExtent();
   }, [setItemMap, updateItemExtent, wire]);
-  var putItemsOnTop = React.useCallback(function (itemIdsToMove) {
+  var putItemsOnTop = React__default.useCallback(function (itemIdsToMove) {
     var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     setItemList(function (prevItemList) {
       var filtered = prevItemList.filter(function (id) {
@@ -7647,8 +7968,8 @@ var useItemActions = function useItemActions() {
                       size = itemSize || 1;
                     }
 
-                    var centerX = item.x + elem.clientWidth / 2,
-                        centerY = item.y + elem.clientHeight / 2;
+                    var centerX = item.x + elem.clientWidth / 2 - offsetX,
+                        centerY = item.y + elem.clientHeight / 2 - offsetY;
                     var newX;
                     var newY;
                     var sizeX;
@@ -7738,7 +8059,7 @@ var useItemActions = function useItemActions() {
       };
     }();
   }, [wire, setItemMap]);
-  var placeItems = React.useCallback( /*#__PURE__*/function () {
+  var placeItems = React__default.useCallback( /*#__PURE__*/function () {
     var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(itemIds, gridConfig) {
       var sync,
           _args3 = arguments;
@@ -7772,7 +8093,7 @@ var useItemActions = function useItemActions() {
       return _ref8.apply(this, arguments);
     };
   }(), [batchUpdateItems, callPlaceInteractions, putItemsOnTop, stickOnGrid, updateItemExtent]);
-  var updateItemOrder = React.useCallback(function (newOrder) {
+  var updateItemOrder = React__default.useCallback(function (newOrder) {
     var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     setItemList(newOrder);
 
@@ -7780,7 +8101,7 @@ var useItemActions = function useItemActions() {
       wire.publish("updateItemListOrder", newOrder);
     }
   }, [wire, setItemList]);
-  var reverseItemsOrder = React.useCallback(function (itemIdsToReverse) {
+  var reverseItemsOrder = React__default.useCallback(function (itemIdsToReverse) {
     var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     setItemList(function (prevItemList) {
       var toBeReversed = prevItemList.filter(function (id) {
@@ -7894,7 +8215,7 @@ var useItemActions = function useItemActions() {
       };
     }();
   }, [wire, setItemList, setItemMap]);
-  var pushItems = React.useCallback( /*#__PURE__*/function () {
+  var pushItems = React__default.useCallback( /*#__PURE__*/function () {
     var _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(itemsToInsert, beforeId) {
       var sync,
           _args6 = arguments;
@@ -7970,11 +8291,11 @@ var useItemActions = function useItemActions() {
       return _ref11.apply(this, arguments);
     };
   }(), [updateItemExtent, getCenter, setItemMap, setItemList, wire]);
-  var pushItem = React.useCallback(function (itemToInsert, beforeId) {
+  var pushItem = React__default.useCallback(function (itemToInsert, beforeId) {
     var sync = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     pushItems([itemToInsert], beforeId, sync);
   }, [pushItems]);
-  var removeItems = React.useCallback(function (itemsIdToRemove) {
+  var removeItems = React__default.useCallback(function (itemsIdToRemove) {
     var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     // Remove from selected items first
     setSelectItems(function (prevList) {
@@ -8342,12 +8663,12 @@ var useAvailableActions = function useAvailableActions() {
 
   var selected = useRecoilValue(SelectedItemsAtom);
 
-  var _React$useState = React.useState([]),
+  var _React$useState = React__default.useState([]),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       availableActions = _React$useState2[0],
       setAvailableActions = _React$useState2[1];
 
-  var isMountedRef = React.useRef(false);
+  var isMountedRef = React__default.useRef(false);
   var getItemListOrSelected = useRecoilCallback(function (_ref) {
     var snapshot = _ref.snapshot;
     return /*#__PURE__*/function () {
@@ -8395,7 +8716,7 @@ var useAvailableActions = function useAvailableActions() {
       };
     }();
   }, []);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     // Mounted guard
     isMountedRef.current = true;
     return function () {
@@ -8407,7 +8728,7 @@ var useAvailableActions = function useAvailableActions() {
    * items have this exact same action with same parameters.
    */
 
-  var updateAvailableActions = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  var updateAvailableActions = React__default.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
     var _yield$getItemListOrS, _yield$getItemListOrS2, selectedItemIds, selectedItemList, allActions;
 
     return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -8459,7 +8780,7 @@ var useAvailableActions = function useAvailableActions() {
     }, _callee2);
   })), [getItemListOrSelected, itemMap]); // Update available actions when selection change
 
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     updateAvailableActions();
   }, [updateAvailableActions, selected]);
   return {
@@ -8483,7 +8804,7 @@ var useBoardConfig = function useBoardConfig() {
   var debouncedPublishUpdate = useDebouncedCallback(function (newConfig) {
     wire.publish("updateBoardConfig", newConfig);
   }, [wire], 1000);
-  var setSyncBoardConfig = React.useCallback(function (callbackOrConfig) {
+  var setSyncBoardConfig = React__default.useCallback(function (callbackOrConfig) {
     var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var callback = callbackOrConfig;
 
@@ -8580,22 +8901,29 @@ var dayjs_min = {exports: {}};
         return void 0 === t;
       }
     },
-        D = "en",
-        v = {};
+        v = "en",
+        D = {};
 
-    v[D] = M;
+    D[v] = M;
 
     var p = function p(t) {
       return t instanceof _;
     },
-        S = function S(t, e, n) {
-      var r;
-      if (!t) return D;
-      if ("string" == typeof t) v[t] && (r = t), e && (v[t] = e, r = t);else {
-        var i = t.name;
-        v[i] = t, r = i;
+        S = function t(e, n, r) {
+      var i;
+      if (!e) return v;
+
+      if ("string" == typeof e) {
+        var s = e.toLowerCase();
+        D[s] && (i = s), n && (D[s] = n, i = s);
+        var u = e.split("-");
+        if (!i && u.length > 1) return t(u[0]);
+      } else {
+        var a = e.name;
+        D[a] = e, i = a;
       }
-      return !n && r && (D = r), r || !n && D;
+
+      return !r && i && (v = i), i || !r && v;
     },
         w = function w(t, e) {
       if (p(t)) return t.clone();
@@ -8683,9 +9011,9 @@ var dayjs_min = {exports: {}};
             return r ? $(1, M) : $(0, M + 1);
 
           case o:
-            var D = this.$locale().weekStart || 0,
-                v = (y < D ? y + 7 : y) - D;
-            return $(r ? m - v : m + (6 - v), M);
+            var v = this.$locale().weekStart || 0,
+                D = (y < v ? y + 7 : y) - v;
+            return $(r ? m - D : m + (6 - D), M);
 
           case a:
           case d:
@@ -8802,12 +9130,12 @@ var dayjs_min = {exports: {}};
             M = w(r),
             m = (M.utcOffset() - this.utcOffset()) * e,
             g = this - M,
-            D = O.m(this, M);
-        return D = (l = {}, l[c] = D / 12, l[f] = D, l[h] = D / 3, l[o] = (g - m) / 6048e5, l[a] = (g - m) / 864e5, l[u] = g / n, l[s] = g / e, l[i] = g / t, l)[y] || g, $ ? D : O.a(D);
+            v = O.m(this, M);
+        return v = (l = {}, l[c] = v / 12, l[f] = v, l[h] = v / 3, l[o] = (g - m) / 6048e5, l[a] = (g - m) / 864e5, l[u] = g / n, l[s] = g / e, l[i] = g / t, l)[y] || g, $ ? v : O.a(v);
       }, m.daysInMonth = function () {
         return this.endOf(f).$D;
       }, m.$locale = function () {
-        return v[this.$L];
+        return D[this.$L];
       }, m.locale = function (t, e) {
         if (!t) return this.$L;
         var n = this.clone(),
@@ -8835,7 +9163,7 @@ var dayjs_min = {exports: {}};
       return t.$i || (t(e, _, w), t.$i = !0), w;
     }, w.locale = S, w.isDayjs = p, w.unix = function (t) {
       return w(1e3 * t);
-    }, w.en = v[D], w.Ls = v, w.p = {}, w;
+    }, w.en = D[v], w.Ls = D, w.p = {}, w;
   });
 })(dayjs_min);
 
@@ -8920,12 +9248,12 @@ var useMessage = function useMessage() {
       }, _callee);
     }));
   }, []);
-  var setMessages = React.useCallback(function (newMessages) {
+  var setMessages = React__default.useCallback(function (newMessages) {
     setMessagesState(newMessages.map(function (m) {
       return parseMessage(m);
     }));
   }, [setMessagesState]);
-  var initEvents = React.useCallback(function (unsub) {
+  var initEvents = React__default.useCallback(function (unsub) {
     unsub.push(wire.subscribe("newMessage", function (newMessage) {
       setMessagesState(function (prevMessages) {
         return [].concat(_toConsumableArray(prevMessages), [parseMessage(newMessage)]);
@@ -8945,7 +9273,7 @@ var useMessage = function useMessage() {
 
     return unsub;
   }, [wire, getMessage, isMaster, onMessage, setMessages, setMessagesState]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var unsub = [];
 
     if (subscribeEvents) {
@@ -8958,7 +9286,7 @@ var useMessage = function useMessage() {
       });
     };
   }, [initEvents, subscribeEvents]);
-  var sendMessage = React.useCallback(function (messageContent) {
+  var sendMessage = React__default.useCallback(function (messageContent) {
     var newMessage = generateMsg({
       user: currentUser,
       content: messageContent
@@ -8980,7 +9308,7 @@ var StyledBoardView = newStyled.div(_templateObject || (_templateObject = _tagge
 var SyncBoard = function SyncBoard(_ref) {
   var children = _ref.children,
       style = _ref.style;
-  var boardWrapperRef = React.useRef(null);
+  var boardWrapperRef = React__default.useRef(null);
   var setCurrentUserState = useSetRecoilState(userAtom);
 
   var _useWire = useWire("board"),
@@ -8991,7 +9319,7 @@ var SyncBoard = function SyncBoard(_ref) {
       uid = _useRecoilState2[0].uid,
       setConfiguration = _useRecoilState2[1];
 
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     // Chrome-related issue.
     // Making the wheel event non-passive, which allows to use preventDefault() to prevent
     // the browser original zoom  and therefore allowing our custom one.
@@ -9008,7 +9336,7 @@ var SyncBoard = function SyncBoard(_ref) {
     };
   }, []); // Set user space
 
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     setCurrentUserState(function (prevUser) {
       return _objectSpread2(_objectSpread2({}, prevUser), {}, {
         space: session
@@ -9022,7 +9350,7 @@ var SyncBoard = function SyncBoard(_ref) {
       });
     };
   }, [session, setCurrentUserState]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     if (!uid) {
       setConfiguration(function (prev) {
         return _objectSpread2(_objectSpread2({}, prev), {}, {
@@ -9031,7 +9359,7 @@ var SyncBoard = function SyncBoard(_ref) {
       });
     }
   }, [setConfiguration, uid]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     setConfiguration(function (prev) {
       return _objectSpread2(_objectSpread2({}, prev), {}, {
         boardWrapper: boardWrapperRef.current
@@ -9045,7 +9373,7 @@ var SyncBoard = function SyncBoard(_ref) {
       });
     });
   });
-  return /*#__PURE__*/React.createElement(StyledBoardView, {
+  return /*#__PURE__*/React__default.createElement(StyledBoardView, {
     ref: boardWrapperRef,
     id: uid,
     className: "sync-board",
@@ -9059,11 +9387,11 @@ var ConnectedSyncBoard = function ConnectedSyncBoard(_ref2) {
       session = _ref2.session,
       props = _objectWithoutProperties(_ref2, _excluded);
 
-  var _React$useState = React.useState(room || nanoid()),
+  var _React$useState = React__default.useState(room || nanoid()),
       _React$useState2 = _slicedToArray(_React$useState, 1),
       stableRoom = _React$useState2[0];
 
-  var _React$useState3 = React.useState(session || nanoid()),
+  var _React$useState3 = React__default.useState(session || nanoid()),
       _React$useState4 = _slicedToArray(_React$useState3, 1),
       stableSession = _React$useState4[0];
 
@@ -9071,22 +9399,22 @@ var ConnectedSyncBoard = function ConnectedSyncBoard(_ref2) {
 
   if (!roomChannel) {
     // No room declared so we create one
-    return /*#__PURE__*/React.createElement(RecoilRoot, null, /*#__PURE__*/React.createElement(WireProvider, {
+    return /*#__PURE__*/React__default.createElement(RecoilRoot, null, /*#__PURE__*/React__default.createElement(WireProvider, {
       room: stableRoom,
       channel: "room",
       socket: socket
-    }, /*#__PURE__*/React.createElement(SubscribeUserEvents, null), /*#__PURE__*/React.createElement(WireProvider, {
+    }, /*#__PURE__*/React__default.createElement(SubscribeUserEvents, null), /*#__PURE__*/React__default.createElement(WireProvider, {
       room: stableSession,
       channel: "board",
       socket: socket
-    }, /*#__PURE__*/React.createElement(SyncBoard, props))));
+    }, /*#__PURE__*/React__default.createElement(SyncBoard, props))));
   }
 
-  return /*#__PURE__*/React.createElement(WireProvider, {
+  return /*#__PURE__*/React__default.createElement(WireProvider, {
     room: stableSession,
     channel: "board",
     socket: socket
-  }, /*#__PURE__*/React.createElement(SyncBoard, props));
+  }, /*#__PURE__*/React__default.createElement(SyncBoard, props));
 };
 
 var ConnectedSyncRoom = function ConnectedSyncRoom(_ref) {
@@ -9094,17 +9422,17 @@ var ConnectedSyncRoom = function ConnectedSyncRoom(_ref) {
       givenRoom = _ref.room,
       children = _ref.children;
 
-  var _React$useState = React.useState(function () {
+  var _React$useState = React__default.useState(function () {
     return givenRoom || nanoid();
   }),
       _React$useState2 = _slicedToArray(_React$useState, 1),
       room = _React$useState2[0];
 
-  return /*#__PURE__*/React.createElement(RecoilRoot, null, /*#__PURE__*/React.createElement(WireProvider, {
+  return /*#__PURE__*/React__default.createElement(RecoilRoot, null, /*#__PURE__*/React__default.createElement(WireProvider, {
     room: room,
     channel: "room",
     socket: socket
-  }, /*#__PURE__*/React.createElement(SubscribeUserEvents, null), children));
+  }, /*#__PURE__*/React__default.createElement(SubscribeUserEvents, null), children));
 };
 
 export { Board, ConnectedSyncBoard as BoardWrapper, ConnectedSyncRoom as RoomWrapper, useAvailableActions, useBoardConfig, useDim as useBoardPosition, useBoardState, useItemActions, useItemInteraction, useItemList as useItems, useMessage, useSelectedItems, useSelectionBox, useUsers, useWire };