react-sync-board 0.5.6 → 0.6.0

package/dist/esm/index.js

@@ -1,4 +1,5 @@
-import React, { forwardRef, useContext, createContext, createElement, useRef, useLayoutEffect, useEffect, useMemo, memo } from 'react';
+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) {
@@ -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,
@@ -4405,15 +4540,15 @@ var Gesture = function Gesture(_ref6) {
       _ref6$onDoubleTap = _ref6.onDoubleTap,
       onDoubleTap = _ref6$onDoubleTap === void 0 ? empty : _ref6$onDoubleTap,
       onZoom = _ref6.onZoom;
-  var wrapperRef = React.useRef(null);
-  var stateRef = React.useRef({
+  var wrapperRef = React__default.useRef(null);
+  var stateRef = React__default.useRef({
     moving: false,
     pointers: {},
     mainPointer: undefined
   });
-  var queueRef = React.useRef([]); // Queue event to avoid async mess
+  var queueRef = React__default.useRef([]); // Queue event to avoid async mess
 
-  var queue = React.useCallback(function (callback, args) {
+  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) {
@@ -4445,7 +4580,7 @@ var Gesture = function Gesture(_ref6) {
       protect(queueRef.current[0])();
     }
   }, []);
-  var onWheel = React.useCallback(function (e) {
+  var onWheel = React__default.useCallback(function (e) {
     var deltaX = e.deltaX,
         deltaY = e.deltaY,
         clientX = e.clientX,
@@ -4504,7 +4639,7 @@ var Gesture = function Gesture(_ref6) {
       });
     }
   }, [onPan, onZoom, queue]);
-  var onPointerDown = React.useCallback(function (_ref8) {
+  var onPointerDown = React__default.useCallback(function (_ref8) {
     var target = _ref8.target,
         button = _ref8.button,
         clientX = _ref8.clientX,
@@ -4604,7 +4739,7 @@ var Gesture = function Gesture(_ref6) {
       console.log("Fail to capture pointer", e);
     }
   }, [onLongTap, queue]);
-  var onPointerMove = React.useCallback(function (e) {
+  var onPointerMove = React__default.useCallback(function (e) {
     if (stateRef.current.pressed) {
       var pointerId = e.pointerId,
           eventClientX = e.clientX,
@@ -4745,7 +4880,7 @@ var Gesture = function Gesture(_ref6) {
       stateRef.current.prevY = clientY;
     }
   }, [onDrag, onDragStart, onPan, onZoom, queue]);
-  var onPointerUp = React.useCallback(function (e) {
+  var onPointerUp = React__default.useCallback(function (e) {
     var clientX = e.clientX,
         clientY = e.clientY,
         altKey = e.altKey,
@@ -4814,21 +4949,21 @@ var Gesture = function Gesture(_ref6) {
         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
-          });
-        }
+        queue(onTap, {
+          clientX: clientX,
+          clientY: clientY,
+          altKey: altKey,
+          ctrlKey: ctrlKey,
+          metaKey: metaKey,
+          target: target
+        });
+      }
     }
   }, [onDragEnd, onTap, queue]);
-  var onDoubleTapHandler = React.useCallback(function (event) {
+  var onDoubleTapHandler = React__default.useCallback(function (event) {
     queue(onDoubleTap, event);
   }, [onDoubleTap, queue]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     onWheel: onWheel,
     onPointerDown: onPointerDown,
     onPointerMove: onPointerMove,
@@ -4886,9 +5021,9 @@ var ResizeHandler = function ResizeHandler(_ref) {
       };
     }();
   }, [onResize]);
-  return /*#__PURE__*/React.createElement(Gesture, {
+  return /*#__PURE__*/React__default.createElement(Gesture, {
     onDrag: onDrag
-  }, /*#__PURE__*/React.createElement("div", rest));
+  }, /*#__PURE__*/React__default.createElement("div", rest));
 };
 
 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";
@@ -4909,7 +5044,7 @@ var identity = function identity(x) {
 
 var DefaultErrorComponent = function DefaultErrorComponent(_ref2) {
   var onReload = _ref2.onReload;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: "100px",
       display: "flex",
@@ -4919,7 +5054,7 @@ var DefaultErrorComponent = function DefaultErrorComponent(_ref2) {
       color: "red"
     },
     className: "syncboard-error-item"
-  }, "Sorry, this item seems broken.", /*#__PURE__*/React.createElement("button", {
+  }, "Sorry, this item seems broken.", /*#__PURE__*/React__default.createElement("button", {
     onClick: onReload
   }, "Reload it"));
 };
@@ -4964,7 +5099,7 @@ var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
       var ErrorComponent = this.props.ErrorComponent;
 
       if (this.state.hasError) {
-        return /*#__PURE__*/React.createElement(ErrorComponent, {
+        return /*#__PURE__*/React__default.createElement(ErrorComponent, {
           onReload: this.onReload
         });
       }
@@ -4981,7 +5116,7 @@ var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return ItemErrorBoundary;
-}(React.Component);
+}(React__default.Component);
 
 var removeClass = function removeClass(e) {
   e.target.className = "";
@@ -5050,7 +5185,7 @@ var Item = function Item(_ref5) {
       _ref5$showResizeHandl = _ref5.showResizeHandle,
       showResizeHandle = _ref5$showResizeHandl === void 0 ? false : _ref5$showResizeHandl;
 
-  var itemWrapperRef = React.useRef(null);
+  var itemWrapperRef = React__default.useRef(null);
   var _itemMap$type = itemMap[type],
       _itemMap$type$compone = _itemMap$type.component,
       Component = _itemMap$type$compone === void 0 ? function () {
@@ -5060,11 +5195,11 @@ var Item = function Item(_ref5) {
       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.useCallback(function (callbackOrItem) {
+  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.useEffect(function () {
+  React__default.useEffect(function () {
     itemWrapperRef.current.className = animate;
   }, [animate]);
   var className = "item ".concat(id);
@@ -5077,7 +5212,7 @@ var Item = function Item(_ref5) {
     className += " selected";
   }
 
-  var onResize = React.useCallback(function (_ref6) {
+  var onResize = React__default.useCallback(function (_ref6) {
     var _ref6$width = _ref6.width,
         width = _ref6$width === void 0 ? 0 : _ref6$width,
         _ref6$height = _ref6.height,
@@ -5097,19 +5232,19 @@ var Item = function Item(_ref5) {
       });
     });
   }, [resize, updateState]);
-  var onResizeWidth = React.useCallback(function (_ref7) {
+  var onResizeWidth = React__default.useCallback(function (_ref7) {
     var width = _ref7.width;
     onResize({
       width: width
     });
   }, [onResize]);
-  var onResizeHeight = React.useCallback(function (_ref8) {
+  var onResizeHeight = React__default.useCallback(function (_ref8) {
     var height = _ref8.height;
     onResize({
       height: height
     });
   }, [onResize]);
-  var onResizeRatio = React.useCallback(function (_ref9) {
+  var onResizeRatio = React__default.useCallback(function (_ref9) {
     var width = _ref9.width;
     onResize({
       height: width,
@@ -5117,14 +5252,14 @@ var Item = function Item(_ref5) {
       keepRatio: true
     });
   }, [onResize]);
-  return /*#__PURE__*/React.createElement(ItemWrapper, {
+  return /*#__PURE__*/React__default.createElement(ItemWrapper, {
     rotation: rotation,
     locked: locked,
     selected: isSelected,
     layer: layer,
     "data-id": id,
     className: className
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: "flex"
     },
@@ -5136,29 +5271,29 @@ var Item = function Item(_ref5) {
     onKeyUp: function onKeyUp(e) {
       return e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement(ItemErrorBoundary, {
+  }, /*#__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.createElement(Component, _extends$1({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(Component, _extends$1({}, rest, {
     id: id,
     setState: updateState
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React__default.createElement("div", {
     className: "corner top-left"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "corner top-right"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "corner bottom-left"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "corner bottom-right"
-  }), isSelected && showResizeHandle && /*#__PURE__*/React.createElement(React.Fragment, null, resizeDirections.b && /*#__PURE__*/React.createElement(ResizeHandler, {
+  }), /*#__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.createElement(ResizeHandler, {
+  }), resizeDirections.h && /*#__PURE__*/React__default.createElement(ResizeHandler, {
     className: "resize resize-height",
     onResize: onResizeHeight
-  }), resizeDirections.w && /*#__PURE__*/React.createElement(ResizeHandler, {
+  }), resizeDirections.w && /*#__PURE__*/React__default.createElement(ResizeHandler, {
     className: "resize resize-width",
     onResize: onResizeWidth
   }))));
@@ -5204,7 +5339,7 @@ var PositionedItem = function PositionedItem(_ref12) {
       moving = _stateHook.moving,
       stateRest = _objectWithoutProperties(_stateHook, _excluded3);
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: "absolute",
       top: "".concat(boardSize / 2, "px"),
@@ -5214,7 +5349,7 @@ var PositionedItem = function PositionedItem(_ref12) {
       zIndex: (layer + 4) * 10 + 100 + (moving ? 5 : 0) // Items z-index between 100 and 200
 
     }
-  }, /*#__PURE__*/React.createElement(MemoizedItem, _extends$1({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(MemoizedItem, _extends$1({}, rest, {
     // Helps to prevent render
     showResizeHandle: rest.isSelected && rest.showResizeHandle,
     state: stateRest
@@ -5288,7 +5423,7 @@ var useUsers = function useUsers() {
 
   var users = useRecoilValue(usersAtom);
   var localUsers = useRecoilValue(localUsersAtom);
-  var setCurrentUser = React.useCallback(function (callbackOrUser) {
+  var setCurrentUser = React__default.useCallback(function (callbackOrUser) {
     var callback = callbackOrUser;
 
     if (_typeof(callbackOrUser) === "object") {
@@ -5316,7 +5451,7 @@ var useUsers = function useUsers() {
 };
 
 var SubscribeUserEvents = function SubscribeUserEvents() {
-  var usersRef = React.useRef([]);
+  var usersRef = React__default.useRef([]);
   var setUsers = useSetRecoilState(usersAtom);
 
   var _useRecoilState = useRecoilState(userAtom),
@@ -5329,7 +5464,7 @@ var SubscribeUserEvents = function SubscribeUserEvents() {
       isMaster = _useWire.isMaster,
       roomSpace = _useWire.room;
 
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     setCurrentUserState(function (prevUser) {
       return _objectSpread2(_objectSpread2({}, prevUser), {}, {
         id: wire.userId,
@@ -5345,7 +5480,7 @@ var SubscribeUserEvents = function SubscribeUserEvents() {
       });
     };
   }, [wire.userId, roomSpace, setCurrentUserState]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     if (!isMaster) {
       var onGetUserList = function onGetUserList(userList) {
         usersRef.current = userList;
@@ -5367,12 +5502,12 @@ var SubscribeUserEvents = function SubscribeUserEvents() {
   var debouncedEmitUpdateUser = useDebouncedCallback(function (newUser) {
     wire.publish("userUpdate", newUser, true);
   }, [wire], 500);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     if (currentUser && currentUser.id) {
       debouncedEmitUpdateUser(currentUser);
     }
   }, [currentUser, debouncedEmitUpdateUser]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var unsub = [];
 
     if (isMaster) {
@@ -5441,7 +5576,7 @@ var ItemList = function ItemList() {
       currentUser = _useUsers.currentUser;
 
   return itemList.map(function (itemId) {
-    return /*#__PURE__*/React.createElement(MemoizedPositionedItem, {
+    return /*#__PURE__*/React__default.createElement(MemoizedPositionedItem, {
       key: itemId,
       state: itemMap[itemId],
       setState: updateItem,
@@ -5466,18 +5601,18 @@ var SubcribeItemEvents = function SubcribeItemEvents() {
       removeItems = _useItemActions.removeItems,
       pushItem = _useItemActions.pushItem;
 
-  var batchUpdate = React.useCallback(function (updatedItems) {
+  var batchUpdate = React__default.useCallback(function (updatedItems) {
     setItemMap(function (prevItemMap) {
       return _objectSpread2(_objectSpread2({}, prevItemMap), updatedItems);
     });
   }, [setItemMap]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var unsub = wire.subscribe("batchItemsUpdate", function (updatedItems) {
       batchUpdate(updatedItems);
     });
     return unsub;
   }, [wire, batchUpdate]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var unsub = wire.subscribe("selectedItemsMove", function (_ref) {
       var itemIds = _ref.itemIds,
           posDelta = _ref.posDelta;
@@ -5485,19 +5620,19 @@ var SubcribeItemEvents = function SubcribeItemEvents() {
     });
     return unsub;
   }, [wire, moveItems]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var unsub = wire.subscribe("updateItemListOrder", function (itemIds) {
       updateItemOrder(itemIds, false);
     });
     return unsub;
   }, [wire, updateItemOrder]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var unsub = wire.subscribe("pushItem", function (newItem) {
       pushItem(newItem, null, false);
     });
     return unsub;
   }, [wire, pushItem]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var unsub = wire.subscribe("insertItemBefore", function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
           newItem = _ref3[0],
@@ -5507,7 +5642,7 @@ var SubcribeItemEvents = function SubcribeItemEvents() {
     });
     return unsub;
   }, [wire, pushItem]);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     var unsub = wire.subscribe("removeItems", function (itemIds) {
       removeItems(itemIds, false);
     });
@@ -5656,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 : [];
     });
@@ -5837,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");
 
@@ -5912,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"),
@@ -5940,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) {
@@ -6198,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
+
+  var prefix = '';
 
-  function n(t) {
-    var n = t / 255;
-    return n <= .03928 ? n / 12.92 : Math.pow((n + .055) / 1.055, 2.4);
+  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"];
@@ -6379,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,
@@ -6420,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) {
@@ -6429,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];
@@ -6451,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]) {
@@ -6462,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,
@@ -6493,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,
@@ -6517,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
@@ -6575,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) {
@@ -6617,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;
@@ -6628,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];
@@ -6688,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);
@@ -6703,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(),
@@ -6713,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
 
@@ -6766,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;
@@ -6796,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) {
@@ -6837,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");
 
@@ -6953,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
 
@@ -6961,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 () {
@@ -6969,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",
@@ -7073,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"),
@@ -7096,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) {
@@ -7115,7 +7319,7 @@ var Board = function Board(_ref) {
   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"),
@@ -7123,7 +7327,7 @@ 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,
@@ -7132,21 +7336,21 @@ var Board = function Board(_ref) {
       });
     });
   }, [itemTemplates, setConfiguration, boardSize, showResizeHandle]);
-  React.useEffect(function () {
+  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, null), children))))), /*#__PURE__*/React.createElement(Selection, null));
+  }, /*#__PURE__*/React__default.createElement(ItemList, null), children))))), /*#__PURE__*/React__default.createElement(Selection, null));
 };
 
 var TOLERANCE = 100;
@@ -7178,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;
@@ -7490,7 +7694,7 @@ var useDim = function useDim() {
     }));
   }, []);
   var debouncedUpdateItemExtent = useDebouncedCallback(updateItemExtent, [], 300);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     if (itemExtentGlobal.left) {
       updateScaleBoundaries();
     }
@@ -7506,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));
@@ -7641,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;
@@ -7657,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);
@@ -7691,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) {
@@ -7855,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;
@@ -7889,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);
 
@@ -7897,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) {
@@ -8011,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;
@@ -8087,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) {
@@ -8459,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 () {
@@ -8512,7 +8716,7 @@ var useAvailableActions = function useAvailableActions() {
       };
     }();
   }, []);
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     // Mounted guard
     isMountedRef.current = true;
     return function () {
@@ -8524,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) {
@@ -8576,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 {
@@ -8600,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;
 
@@ -8697,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();
@@ -8800,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:
@@ -8919,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(),
@@ -8952,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);
 
@@ -9037,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)]);
@@ -9062,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) {
@@ -9075,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
@@ -9097,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"),
@@ -9108,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.
@@ -9125,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
@@ -9139,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), {}, {
@@ -9148,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
@@ -9162,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",
@@ -9176,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];
 
@@ -9188,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) {
@@ -9211,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 };