react-sync-board 0.5.6 → 0.6.2

package/dist/cjs/index.js

@@ -7,6 +7,27 @@ var recoil = require('recoil');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function ownKeys(object, enumerableOnly) {
@@ -468,26 +489,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 += '_';
@@ -779,7 +791,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
@@ -852,7 +864,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;
       }
@@ -870,6 +888,7 @@ var StyleSheet = /*#__PURE__*/function () {
     this.key = options.key;
     this.container = options.container;
     this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
     this.before = null;
   }
 
@@ -910,7 +929,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);
         }
       }
@@ -924,7 +943,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;
@@ -957,13 +976,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);
 }
 /**
@@ -995,7 +1020,7 @@ function replace(value, pattern, replacement) {
 }
 /**
  * @param {string} value
- * @param {string} value
+ * @param {string} search
  * @return {number}
  */
 
@@ -1064,11 +1089,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
  */
 
@@ -1087,13 +1112,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}
@@ -1252,7 +1279,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:
@@ -1336,11 +1364,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
@@ -1406,7 +1441,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);
             }
         }
 
@@ -1435,7 +1470,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;
           // -
 
@@ -1505,7 +1540,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;
@@ -1710,6 +1745,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(',');
   }
@@ -1752,13 +1790,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) {
@@ -1766,11 +1806,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 '';
@@ -1780,6 +1828,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) {
@@ -1799,7 +1870,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:
@@ -1833,8 +1904,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;
   }
 
@@ -2070,7 +2142,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,
@@ -2088,22 +2161,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;
 
@@ -2112,21 +2185,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;
@@ -2147,22 +2220,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;
@@ -2176,19 +2249,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) {
@@ -2204,7 +2277,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) {
@@ -2212,7 +2285,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;
@@ -2438,7 +2511,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
@@ -2453,6 +2526,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;
@@ -2610,7 +2688,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-/;
@@ -2877,7 +2955,7 @@ var serializeStyles$1 = function serializeStyles(args, registered, mergedProps)
   };
 };
 
-var hasOwnProperty = Object.prototype.hasOwnProperty;
+var hasOwnProperty = {}.hasOwnProperty;
 var EmotionCacheContext = /* #__PURE__ */React.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
@@ -2887,6 +2965,11 @@ var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing thi
 typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
   key: 'css'
 }) : null);
+
+if (process.env.NODE_ENV !== 'production') {
+  EmotionCacheContext.displayName = 'EmotionCacheContext';
+}
+
 EmotionCacheContext.Provider;
 
 var withEmotionCache = function withEmotionCache(func) {
@@ -2900,9 +2983,32 @@ var withEmotionCache = function withEmotionCache(func) {
 
 var ThemeContext = /* #__PURE__ */React.createContext({});
 
+if (process.env.NODE_ENV !== 'production') {
+  ThemeContext.displayName = 'EmotionThemeContext';
+}
+
+var useInsertionEffect$2 = React__namespace['useInsertion' + 'Effect'] ? React__namespace['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
@@ -2912,7 +3018,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 = '';
 
@@ -2922,7 +3028,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     className = props.className + " ";
   }
 
-  var serialized = serializeStyles$1(registeredStyles, undefined, typeof cssProp === 'function' || Array.isArray(cssProp) ? React.useContext(ThemeContext) : undefined);
+  var serialized = serializeStyles$1(registeredStyles, undefined, React.useContext(ThemeContext));
 
   if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
     var labelFromStack = props[labelPropName];
@@ -2932,7 +3038,6 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     }
   }
 
-  insertStyles$1(cache, serialized, typeof type === 'string');
   className += cache.key + "-" + serialized.name;
   var newProps = {};
 
@@ -2944,8 +3049,11 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
 
   newProps.ref = ref;
   newProps.className = className;
-  var ele = /*#__PURE__*/React.createElement(type, newProps);
-  return ele;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion$2, {
+    cache: cache,
+    serialized: serialized,
+    isStringTag: typeof WrappedComponent === 'string'
+  }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -2954,7 +3062,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: {
@@ -2962,19 +3070,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"
   },
@@ -2992,15 +3100,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: {
@@ -3008,11 +3117,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__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : React.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
@@ -3028,14 +3138,15 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   }
 
   var styles = props.styles;
-  var serialized = serializeStyles$1([styles], undefined, typeof styles === 'function' || Array.isArray(styles) ? React.useContext(ThemeContext) : undefined); // but it is based on a constant that will never change at runtime
+  var serialized = serializeStyles$1([styles], undefined, React.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 = React.useRef();
-  React.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,
@@ -3061,7 +3172,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
       sheet.flush();
     };
   }, [cache]);
-  React.useLayoutEffect(function () {
+  useInsertionEffect$1(function () {
     var sheetRefCurrent = sheetRef.current;
     var sheet = sheetRefCurrent[0],
         rehydrating = sheetRefCurrent[1];
@@ -3176,8 +3287,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') {
@@ -3189,9 +3312,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;
   };
 
@@ -3214,7 +3337,10 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   };
   var ele = props.children(content);
   hasRendered = true;
-  return ele;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion$1, {
+    cache: cache,
+    serializedArr: serializedArr
+  }), ele);
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -3227,7 +3353,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]) {
@@ -3252,7 +3381,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
@@ -3267,6 +3396,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;
@@ -3618,8 +3752,27 @@ var composeShouldForwardProps = function composeShouldForwardProps(tag, options,
   return shouldForwardProp;
 };
 
+var useInsertionEffect = React__namespace['useInsertion' + 'Effect'] ? React__namespace['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) {
@@ -3670,7 +3823,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;
@@ -3692,14 +3845,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) {
@@ -3713,8 +3865,11 @@ var createStyled = function createStyled(tag, options) {
 
       newProps.className = className;
       newProps.ref = ref;
-      var ele = /*#__PURE__*/React.createElement(finalTag, newProps);
-      return ele;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {
+        cache: cache,
+        serialized: serialized,
+        isStringTag: typeof FinalTag === 'string'
+      }), /*#__PURE__*/React.createElement(FinalTag, newProps));
     });
     Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     Styled.defaultProps = tag.defaultProps;
@@ -3983,10 +4138,6 @@ var useItemList = function useItemList() {
   return items;
 };
 
-var useSelectedItems = function useSelectedItems() {
-  return recoil.useRecoilValue(SelectedItemsAtom);
-};
-
 /**
  * Run effect only when component is unmounted.
  *
@@ -4174,6 +4325,28 @@ function useThrottledCallback(callback, deps, delay, noTrailing) {
   }, __spreadArray([delay, noTrailing], deps, true));
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Like `useEffect`, but passed function is debounced.
+ *
+ * @param callback Callback like for `useEffect`, but without ability to return
+ * a cleanup function.
+ * @param deps Dependencies list that will be passed to underlying `useEffect`
+ * and `useDebouncedCallback`.
+ * @param delay Debounce delay.
+ * @param maxWait Maximum amount of milliseconds that function can be delayed
+ * before it's force execution. 0 means no max wait.
+ */
+
+function useDebouncedEffect(callback, deps, delay, maxWait) {
+  if (maxWait === void 0) {
+    maxWait = 0;
+  } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  React.useEffect(useDebouncedCallback(callback, deps, delay, maxWait), deps);
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Like `useEffect`, but passed function is throttled.
@@ -4318,6 +4491,45 @@ function useResizeObserver(target, callback, enabled) {
   }, [target, ro]);
 }
 
+var useDebouncedItems = function useDebouncedItems() {
+  var items = recoil.useRecoilValue(AllItemsSelector);
+
+  var _React$useState = React__default['default'].useState(items),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      debouncedItems = _React$useState2[0],
+      setDebouncedItems = _React$useState2[1];
+
+  var updateDebouncedItems = recoil.useRecoilCallback(function (_ref) {
+    var snapshot = _ref.snapshot;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var currentItemMap;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return snapshot.getPromise(AllItemsSelector);
+
+            case 2:
+              currentItemMap = _context.sent;
+              setDebouncedItems(currentItemMap);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, []);
+  useDebouncedEffect(updateDebouncedItems, [items], 300);
+  return debouncedItems;
+};
+
+var useSelectedItems = function useSelectedItems() {
+  return recoil.useRecoilValue(SelectedItemsAtom);
+};
+
 var isMacOS = function isMacOS() {
   var userAgent = navigator.userAgent.toLowerCase();
   return /mac os ?x 10/.test(userAgent);
@@ -4822,15 +5034,15 @@ 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__default['default'].useCallback(function (event) {
@@ -4906,7 +5118,7 @@ var _excluded$2 = ["type", "rotation", "id", "locked", "layer"],
     _excluded3 = ["x", "y", "layer", "moving"];
 
 var _templateObject$2;
-var ItemWrapper = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  transition: transform 150ms;\n  user-select: none;\n  padding: 2px;\n  box-sizing: border-box;\n  transform: rotate(", "deg);\n\n  & .corner {\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n\n  & .top-left {\n    top: 0;\n    left: 0;\n  }\n  & .top-right {\n    top: 0;\n    right: 0;\n  }\n  & .bottom-left {\n    bottom: 0;\n    left: 0;\n  }\n  & .bottom-right {\n    bottom: 0;\n    right: 0;\n  }\n\n  &.selected {\n    border: 2px dashed #db5034;\n    padding: 0px;\n    cursor: pointer;\n  }\n\n  &.locked::after {\n    content: \"\";\n    position: absolute;\n    width: 24px;\n    height: 30px;\n    top: 4px;\n    right: 4px;\n    opacity: 0.1;\n    background-image: url(\"", "\");\n    background-size: cover;\n    user-select: none;\n  }\n\n  &.locked:hover::after {\n    opacity: 0.3;\n  }\n\n  & .resize {\n    position: absolute;\n\n    width: 10px;\n    height: 10px;\n    border: 2px solid #db5034;\n    background-color: #db5034;\n    cursor: move;\n\n    &.resize-width {\n      cursor: ew-resize;\n      right: -6px;\n      top: calc(50% - 5px);\n    }\n    &.resize-height {\n      cursor: ns-resize;\n      bottom: -6px;\n      left: calc(50% - 5px);\n    }\n    &.resize-ratio {\n      cursor: nwse-resize;\n      bottom: -6px;\n      right: -6px;\n    }\n  }\n"])), function (_ref) {
+var ItemWrapper = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  transition: transform 150ms;\n  user-select: none;\n  padding: 2px;\n  box-sizing: border-box;\n  transform: rotate(", "deg);\n\n  & .corner {\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n\n  & .top-left {\n    top: 0;\n    left: 0;\n  }\n  & .top-right {\n    top: 0;\n    right: 0;\n  }\n  & .bottom-left {\n    bottom: 0;\n    left: 0;\n  }\n  & .bottom-right {\n    bottom: 0;\n    right: 0;\n  }\n\n  & .center {\n    position: absolute;\n    width: 0px;\n    height: 0px;\n    top: 50%;\n    left: 50%;\n  }\n\n  &.selected {\n    border: 2px dashed #db5034;\n    padding: 0px;\n    cursor: pointer;\n  }\n\n  &.locked::after {\n    content: \"\";\n    position: absolute;\n    width: 24px;\n    height: 30px;\n    top: 4px;\n    right: 4px;\n    opacity: 0.1;\n    background-image: url(\"", "\");\n    background-size: cover;\n    user-select: none;\n  }\n\n  &.locked:hover::after {\n    opacity: 0.3;\n  }\n\n  & .resize {\n    position: absolute;\n\n    width: 10px;\n    height: 10px;\n    border: 2px solid #db5034;\n    background-color: #db5034;\n    cursor: move;\n\n    &.resize-width {\n      cursor: ew-resize;\n      right: -6px;\n      top: calc(50% - 5px);\n    }\n    &.resize-height {\n      cursor: ns-resize;\n      bottom: -6px;\n      left: calc(50% - 5px);\n    }\n    &.resize-ratio {\n      cursor: nwse-resize;\n      bottom: -6px;\n      right: -6px;\n    }\n  }\n"])), function (_ref) {
   var rotation = _ref.rotation;
   return rotation;
 }, img);
@@ -5156,10 +5368,12 @@ var Item = function Item(_ref5) {
     className: "corner top-left"
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "corner top-right"
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "corner bottom-right"
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "corner bottom-left"
   }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "corner bottom-right"
+    className: "center"
   }), isSelected && showResizeHandle && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, resizeDirections.b && /*#__PURE__*/React__default['default'].createElement(ResizeHandler, {
     className: "resize resize-ratio",
     onResize: onResizeRatio
@@ -5192,8 +5406,6 @@ var PositionedItem = function PositionedItem(_ref12) {
       rest = _objectWithoutProperties(_ref12, _excluded2);
 
   if (!rest.itemMap[state.type]) {
-    // eslint-disable-next-line no-console
-    console.warn("Item type ".concat(state.type, " not recognized!"));
     return null;
   }
 
@@ -6219,154 +6431,223 @@ var ActionPane = function ActionPane(_ref) {
   }, 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"];
@@ -6387,7 +6668,7 @@ 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";
+  var textColor = readableColorIsBlack(color) ? "#222" : "#EEE";
   return /*#__PURE__*/React__default['default'].createElement(StyledCursor, null, /*#__PURE__*/React__default['default'].createElement("svg", {
     version: "1.1",
     id: "Layer_1",
@@ -8462,8 +8743,10 @@ var getActionsFromItem = function getActionsFromItem(item, itemMap) {
 };
 
 var useAvailableActions = function useAvailableActions() {
+  var itemMap = recoil.useRecoilValue(ItemMapAtom);
+
   var _useRecoilValue = recoil.useRecoilValue(ConfigurationAtom),
-      itemMap = _useRecoilValue.itemTemplates;
+      itemTemplates = _useRecoilValue.itemTemplates;
 
   var selected = recoil.useRecoilValue(SelectedItemsAtom);
 
@@ -8473,6 +8756,13 @@ var useAvailableActions = function useAvailableActions() {
       setAvailableActions = _React$useState2[1];
 
   var isMountedRef = React__default['default'].useRef(false);
+  React__default['default'].useEffect(function () {
+    // Mounted guard
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+    };
+  }, []);
   var getItemListOrSelected = recoil.useRecoilCallback(function (_ref) {
     var snapshot = _ref.snapshot;
     return /*#__PURE__*/function () {
@@ -8520,19 +8810,12 @@ var useAvailableActions = function useAvailableActions() {
       };
     }();
   }, []);
-  React__default['default'].useEffect(function () {
-    // Mounted guard
-    isMountedRef.current = true;
-    return function () {
-      isMountedRef.current = false;
-    };
-  }, []);
   /**
    * Returns available actions for selected items. An action is kept only if all
    * items have this exact same action with same parameters.
    */
 
-  var updateAvailableActions = React__default['default'].useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  var updateAvailableActions = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
     var _yield$getItemListOrS, _yield$getItemListOrS2, selectedItemIds, selectedItemList, allActions;
 
     return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -8562,13 +8845,13 @@ var useAvailableActions = function useAvailableActions() {
 
           case 9:
             allActions = selectedItemList.reduce(function (acc, item) {
-              var itemActions = getActionsFromItem(item, itemMap);
+              var itemActions = getActionsFromItem(item, itemTemplates);
               return acc.filter(function (value) {
                 return itemActions.some(function (itemAction) {
                   return es6(value, itemAction);
                 });
               });
-            }, getActionsFromItem(selectedItemList[0], itemMap));
+            }, getActionsFromItem(selectedItemList[0], itemTemplates));
             setAvailableActions(allActions);
             _context2.next = 14;
             break;
@@ -8582,11 +8865,11 @@ var useAvailableActions = function useAvailableActions() {
         }
       }
     }, _callee2);
-  })), [getItemListOrSelected, itemMap]); // Update available actions when selection change
+  })), [getItemListOrSelected, itemTemplates]); // Update available actions when selection change
 
-  React__default['default'].useEffect(function () {
-    updateAvailableActions();
-  }, [updateAvailableActions, selected]);
+  React__default['default'].useEffect(updateAvailableActions, [updateAvailableActions, selected]); // Debounced update available actions when items change
+
+  useDebouncedEffect(updateAvailableActions, [itemMap, updateAvailableActions], 300);
   return {
     availableActions: availableActions
   };
@@ -8705,22 +8988,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();
@@ -8808,9 +9098,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:
@@ -8927,12 +9217,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(),
@@ -8960,7 +9250,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);
 
@@ -9164,7 +9454,11 @@ var SyncBoard = function SyncBoard(_ref) {
     });
   }, [setConfiguration, uid]);
   useResizeObserver(boardWrapperRef, function () {
-    return setConfiguration(function (prev) {
+    if (!boardWrapperRef.current) {
+      return;
+    }
+
+    setConfiguration(function (prev) {
       return _objectSpread2(_objectSpread2({}, prev), {}, {
         boardWrapperRect: boardWrapperRef.current.getBoundingClientRect()
       });
@@ -9239,6 +9533,7 @@ exports.useAvailableActions = useAvailableActions;
 exports.useBoardConfig = useBoardConfig;
 exports.useBoardPosition = useDim;
 exports.useBoardState = useBoardState;
+exports.useDebouncedItems = useDebouncedItems;
 exports.useItemActions = useItemActions;
 exports.useItemInteraction = useItemInteraction;
 exports.useItems = useItemList;