@pie-element/matrix 2.0.1-next.0 → 2.0.2-esm.0

package/esm/configure.js

@@ -0,0 +1,2178 @@
+import * as React from 'react';
+import React__default, { useRef, useDebugValue, useContext, createElement, useState } from 'react';
+import ReactDOM from 'react-dom';
+import debug from 'debug';
+import { ModelUpdatedEvent, InsertSoundEvent, DeleteSoundEvent } from '@pie-framework/pie-configure-events';
+import PropTypes from 'prop-types';
+import EditableHtml from '@pie-lib/editable-html';
+import { layout, InputContainer, settings } from '@pie-lib/config-ui';
+import { withStyles } from '@material-ui/core/styles';
+import AddIcon from '@material-ui/icons/Add';
+import RemoveIcon from '@material-ui/icons/Remove';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { color } from '@pie-lib/render-ui';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import { TextField } from '@material-ui/core';
+import defaults from 'lodash/defaults';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var reactIs$1 = {exports: {}};
+
+var reactIs_production_min = {};
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var b$1="function"===typeof Symbol&&Symbol.for,c=b$1?Symbol.for("react.element"):60103,d=b$1?Symbol.for("react.portal"):60106,e=b$1?Symbol.for("react.fragment"):60107,f=b$1?Symbol.for("react.strict_mode"):60108,g$1=b$1?Symbol.for("react.profiler"):60114,h=b$1?Symbol.for("react.provider"):60109,k$1=b$1?Symbol.for("react.context"):60110,l=b$1?Symbol.for("react.async_mode"):60111,m=b$1?Symbol.for("react.concurrent_mode"):60111,n=b$1?Symbol.for("react.forward_ref"):60112,p=b$1?Symbol.for("react.suspense"):60113,q$1=b$1?
+Symbol.for("react.suspense_list"):60120,r=b$1?Symbol.for("react.memo"):60115,t=b$1?Symbol.for("react.lazy"):60116,v$1=b$1?Symbol.for("react.block"):60121,w$1=b$1?Symbol.for("react.fundamental"):60117,x$1=b$1?Symbol.for("react.responder"):60118,y=b$1?Symbol.for("react.scope"):60119;
+function z$1(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g$1:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k$1:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A$1(a){return z$1(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k$1;reactIs_production_min.ContextProvider=h;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;reactIs_production_min.Portal=d;
+reactIs_production_min.Profiler=g$1;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A$1(a)||z$1(a)===l};reactIs_production_min.isConcurrentMode=A$1;reactIs_production_min.isContextConsumer=function(a){return z$1(a)===k$1};reactIs_production_min.isContextProvider=function(a){return z$1(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z$1(a)===n};reactIs_production_min.isFragment=function(a){return z$1(a)===e};reactIs_production_min.isLazy=function(a){return z$1(a)===t};
+reactIs_production_min.isMemo=function(a){return z$1(a)===r};reactIs_production_min.isPortal=function(a){return z$1(a)===d};reactIs_production_min.isProfiler=function(a){return z$1(a)===g$1};reactIs_production_min.isStrictMode=function(a){return z$1(a)===f};reactIs_production_min.isSuspense=function(a){return z$1(a)===p};
+reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g$1||a===f||a===p||a===q$1||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k$1||a.$$typeof===n||a.$$typeof===w$1||a.$$typeof===x$1||a.$$typeof===y||a.$$typeof===v$1)};reactIs_production_min.typeOf=z$1;
+
+var reactIs_development = {};
+
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+function isValidElementType(type) {
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+}
+
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    var $$typeof = object.$$typeof;
+
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        var type = object.type;
+
+        switch (type) {
+          case REACT_ASYNC_MODE_TYPE:
+          case REACT_CONCURRENT_MODE_TYPE:
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+            return type;
+
+          default:
+            var $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
+              case REACT_PROVIDER_TYPE:
+                return $$typeofType;
+
+              default:
+                return $$typeof;
+            }
+
+        }
+
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+} // AsyncMode is deprecated along with isAsyncMode
+
+var AsyncMode = REACT_ASYNC_MODE_TYPE;
+var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+var ContextConsumer = REACT_CONTEXT_TYPE;
+var ContextProvider = REACT_PROVIDER_TYPE;
+var Element = REACT_ELEMENT_TYPE;
+var ForwardRef = REACT_FORWARD_REF_TYPE;
+var Fragment = REACT_FRAGMENT_TYPE;
+var Lazy = REACT_LAZY_TYPE;
+var Memo = REACT_MEMO_TYPE;
+var Portal = REACT_PORTAL_TYPE;
+var Profiler = REACT_PROFILER_TYPE;
+var StrictMode = REACT_STRICT_MODE_TYPE;
+var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+function isAsyncMode(object) {
+  {
+    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+    }
+  }
+
+  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+}
+function isConcurrentMode(object) {
+  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+}
+function isContextConsumer(object) {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+function isContextProvider(object) {
+  return typeOf(object) === REACT_PROVIDER_TYPE;
+}
+function isElement(object) {
+  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isForwardRef(object) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+function isFragment(object) {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+function isLazy(object) {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+function isMemo(object) {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+function isPortal(object) {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+function isProfiler(object) {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+function isStrictMode(object) {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+function isSuspense(object) {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+
+reactIs_development.AsyncMode = AsyncMode;
+reactIs_development.ConcurrentMode = ConcurrentMode;
+reactIs_development.ContextConsumer = ContextConsumer;
+reactIs_development.ContextProvider = ContextProvider;
+reactIs_development.Element = Element;
+reactIs_development.ForwardRef = ForwardRef;
+reactIs_development.Fragment = Fragment;
+reactIs_development.Lazy = Lazy;
+reactIs_development.Memo = Memo;
+reactIs_development.Portal = Portal;
+reactIs_development.Profiler = Profiler;
+reactIs_development.StrictMode = StrictMode;
+reactIs_development.Suspense = Suspense;
+reactIs_development.isAsyncMode = isAsyncMode;
+reactIs_development.isConcurrentMode = isConcurrentMode;
+reactIs_development.isContextConsumer = isContextConsumer;
+reactIs_development.isContextProvider = isContextProvider;
+reactIs_development.isElement = isElement;
+reactIs_development.isForwardRef = isForwardRef;
+reactIs_development.isFragment = isFragment;
+reactIs_development.isLazy = isLazy;
+reactIs_development.isMemo = isMemo;
+reactIs_development.isPortal = isPortal;
+reactIs_development.isProfiler = isProfiler;
+reactIs_development.isStrictMode = isStrictMode;
+reactIs_development.isSuspense = isSuspense;
+reactIs_development.isValidElementType = isValidElementType;
+reactIs_development.typeOf = typeOf;
+  })();
+}
+
+if (process.env.NODE_ENV === 'production') {
+  reactIs$1.exports = reactIs_production_min;
+} else {
+  reactIs$1.exports = reactIs_development;
+}
+
+function stylis_min (W) {
+  function M(d, c, e, h, a) {
+    for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
+      g = e.charCodeAt(l);
+      l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);
+
+      if (0 === b + n + v + m) {
+        if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
+          switch (g) {
+            case 32:
+            case 9:
+            case 59:
+            case 13:
+            case 10:
+              break;
+
+            default:
+              f += e.charAt(l);
+          }
+
+          g = 59;
+        }
+
+        switch (g) {
+          case 123:
+            f = f.trim();
+            q = f.charCodeAt(0);
+            k = 1;
+
+            for (t = ++l; l < B;) {
+              switch (g = e.charCodeAt(l)) {
+                case 123:
+                  k++;
+                  break;
+
+                case 125:
+                  k--;
+                  break;
+
+                case 47:
+                  switch (g = e.charCodeAt(l + 1)) {
+                    case 42:
+                    case 47:
+                      a: {
+                        for (u = l + 1; u < J; ++u) {
+                          switch (e.charCodeAt(u)) {
+                            case 47:
+                              if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {
+                                l = u + 1;
+                                break a;
+                              }
+
+                              break;
+
+                            case 10:
+                              if (47 === g) {
+                                l = u + 1;
+                                break a;
+                              }
+
+                          }
+                        }
+
+                        l = u;
+                      }
+
+                  }
+
+                  break;
+
+                case 91:
+                  g++;
+
+                case 40:
+                  g++;
+
+                case 34:
+                case 39:
+                  for (; l++ < J && e.charCodeAt(l) !== g;) {
+                  }
+
+              }
+
+              if (0 === k) break;
+              l++;
+            }
+
+            k = e.substring(t, l);
+            0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));
+
+            switch (q) {
+              case 64:
+                0 < r && (f = f.replace(N, ''));
+                g = f.charCodeAt(1);
+
+                switch (g) {
+                  case 100:
+                  case 109:
+                  case 115:
+                  case 45:
+                    r = c;
+                    break;
+
+                  default:
+                    r = O;
+                }
+
+                k = M(c, r, k, g, a + 1);
+                t = k.length;
+                0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));
+                if (0 < t) switch (g) {
+                  case 115:
+                    f = f.replace(da, ea);
+
+                  case 100:
+                  case 109:
+                  case 45:
+                    k = f + '{' + k + '}';
+                    break;
+
+                  case 107:
+                    f = f.replace(fa, '$1 $2');
+                    k = f + '{' + k + '}';
+                    k = 1 === w || 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;
+                    break;
+
+                  default:
+                    k = f + k, 112 === h && (k = (p += k, ''));
+                } else k = '';
+                break;
+
+              default:
+                k = M(c, X(c, f, I), k, h, a + 1);
+            }
+
+            F += k;
+            k = I = r = u = q = 0;
+            f = '';
+            g = e.charCodeAt(++l);
+            break;
+
+          case 125:
+          case 59:
+            f = (0 < r ? f.replace(N, '') : f).trim();
+            if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q || 96 < q && 123 > q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\x00\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {
+              case 0:
+                break;
+
+              case 64:
+                if (105 === g || 99 === g) {
+                  G += f + e.charAt(l);
+                  break;
+                }
+
+              default:
+                58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));
+            }
+            I = r = u = q = 0;
+            f = '';
+            g = e.charCodeAt(++l);
+        }
+      }
+
+      switch (g) {
+        case 13:
+        case 10:
+          47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00');
+          0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);
+          z = 1;
+          D++;
+          break;
+
+        case 59:
+        case 125:
+          if (0 === b + n + v + m) {
+            z++;
+            break;
+          }
+
+        default:
+          z++;
+          y = e.charAt(l);
+
+          switch (g) {
+            case 9:
+            case 32:
+              if (0 === n + m + b) switch (x) {
+                case 44:
+                case 58:
+                case 9:
+                case 32:
+                  y = '';
+                  break;
+
+                default:
+                  32 !== g && (y = ' ');
+              }
+              break;
+
+            case 0:
+              y = '\\0';
+              break;
+
+            case 12:
+              y = '\\f';
+              break;
+
+            case 11:
+              y = '\\v';
+              break;
+
+            case 38:
+              0 === n + b + m && (r = I = 1, y = '\f' + y);
+              break;
+
+            case 108:
+              if (0 === n + b + m + E && 0 < u) switch (l - u) {
+                case 2:
+                  112 === x && 58 === e.charCodeAt(l - 3) && (E = x);
+
+                case 8:
+                  111 === K && (E = K);
+              }
+              break;
+
+            case 58:
+              0 === n + b + m && (u = l);
+              break;
+
+            case 44:
+              0 === b + v + n + m && (r = 1, y += '\r');
+              break;
+
+            case 34:
+            case 39:
+              0 === b && (n = n === g ? 0 : 0 === n ? g : n);
+              break;
+
+            case 91:
+              0 === n + b + v && m++;
+              break;
+
+            case 93:
+              0 === n + b + v && m--;
+              break;
+
+            case 41:
+              0 === n + b + m && v--;
+              break;
+
+            case 40:
+              if (0 === n + b + m) {
+                if (0 === q) switch (2 * x + 3 * K) {
+                  case 533:
+                    break;
+
+                  default:
+                    q = 1;
+                }
+                v++;
+              }
+
+              break;
+
+            case 64:
+              0 === b + v + n + m + u + k && (k = 1);
+              break;
+
+            case 42:
+            case 47:
+              if (!(0 < n + m + v)) switch (b) {
+                case 0:
+                  switch (2 * g + 3 * e.charCodeAt(l + 1)) {
+                    case 235:
+                      b = 47;
+                      break;
+
+                    case 220:
+                      t = l, b = 42;
+                  }
+
+                  break;
+
+                case 42:
+                  47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);
+              }
+          }
+
+          0 === b && (f += y);
+      }
+
+      K = x;
+      x = g;
+      l++;
+    }
+
+    t = p.length;
+
+    if (0 < t) {
+      r = c;
+      if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;
+      p = r.join(',') + '{' + p + '}';
+
+      if (0 !== w * E) {
+        2 !== w || L(p, 2) || (E = 0);
+
+        switch (E) {
+          case 111:
+            p = p.replace(ha, ':-moz-$1') + p;
+            break;
+
+          case 112:
+            p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;
+        }
+
+        E = 0;
+      }
+    }
+
+    return G + p + F;
+  }
+
+  function X(d, c, e) {
+    var h = c.trim().split(ia);
+    c = h;
+    var a = h.length,
+        m = d.length;
+
+    switch (m) {
+      case 0:
+      case 1:
+        var b = 0;
+
+        for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
+          c[b] = Z(d, c[b], e).trim();
+        }
+
+        break;
+
+      default:
+        var v = b = 0;
+
+        for (c = []; b < a; ++b) {
+          for (var n = 0; n < m; ++n) {
+            c[v++] = Z(d[n] + ' ', h[b], e).trim();
+          }
+        }
+
+    }
+
+    return c;
+  }
+
+  function Z(d, c, e) {
+    var h = c.charCodeAt(0);
+    33 > h && (h = (c = c.trim()).charCodeAt(0));
+
+    switch (h) {
+      case 38:
+        return c.replace(F, '$1' + d.trim());
+
+      case 58:
+        return d.trim() + c.replace(F, '$1' + d.trim());
+
+      default:
+        if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());
+    }
+
+    return d + c;
+  }
+
+  function P(d, c, e, h) {
+    var a = d + ';',
+        m = 2 * c + 3 * e + 4 * h;
+
+    if (944 === m) {
+      d = a.indexOf(':', 9) + 1;
+      var b = a.substring(d, a.length - 1).trim();
+      b = a.substring(0, d).trim() + b + ';';
+      return 1 === w || 2 === w && L(b, 1) ? '-webkit-' + b + b : b;
+    }
+
+    if (0 === w || 2 === w && !L(a, 1)) return a;
+
+    switch (m) {
+      case 1015:
+        return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;
+
+      case 951:
+        return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;
+
+      case 963:
+        return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;
+
+      case 1009:
+        if (100 !== a.charCodeAt(4)) break;
+
+      case 969:
+      case 942:
+        return '-webkit-' + a + a;
+
+      case 978:
+        return '-webkit-' + a + '-moz-' + a + a;
+
+      case 1019:
+      case 983:
+        return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;
+
+      case 883:
+        if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;
+        if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;
+        break;
+
+      case 932:
+        if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {
+          case 103:
+            return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;
+
+          case 115:
+            return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;
+
+          case 98:
+            return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;
+        }
+        return '-webkit-' + a + '-ms-' + a + a;
+
+      case 964:
+        return '-webkit-' + a + '-ms-flex-' + a + a;
+
+      case 1023:
+        if (99 !== a.charCodeAt(8)) break;
+        b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');
+        return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;
+
+      case 1005:
+        return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;
+
+      case 1e3:
+        b = a.substring(13).trim();
+        c = b.indexOf('-') + 1;
+
+        switch (b.charCodeAt(0) + b.charCodeAt(c)) {
+          case 226:
+            b = a.replace(G, 'tb');
+            break;
+
+          case 232:
+            b = a.replace(G, 'tb-rl');
+            break;
+
+          case 220:
+            b = a.replace(G, 'lr');
+            break;
+
+          default:
+            return a;
+        }
+
+        return '-webkit-' + a + '-ms-' + b + a;
+
+      case 1017:
+        if (-1 === a.indexOf('sticky', 9)) break;
+
+      case 975:
+        c = (a = d).length - 10;
+        b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();
+
+        switch (m = b.charCodeAt(0) + (b.charCodeAt(7) | 0)) {
+          case 203:
+            if (111 > b.charCodeAt(8)) break;
+
+          case 115:
+            a = a.replace(b, '-webkit-' + b) + ';' + a;
+            break;
+
+          case 207:
+          case 102:
+            a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;
+        }
+
+        return a + ';';
+
+      case 938:
+        if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {
+          case 105:
+            return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;
+
+          case 115:
+            return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;
+
+          default:
+            return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;
+        }
+        break;
+
+      case 973:
+      case 989:
+        if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break;
+
+      case 931:
+      case 953:
+        if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;
+        break;
+
+      case 962:
+        if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;
+    }
+
+    return a;
+  }
+
+  function L(d, c) {
+    var e = d.indexOf(1 === c ? ':' : '{'),
+        h = d.substring(0, 3 !== c ? e : 10);
+    e = d.substring(e + 1, d.length - 1);
+    return R(2 !== c ? h : h.replace(na, '$1'), e, c);
+  }
+
+  function ea(d, c) {
+    var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));
+    return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';
+  }
+
+  function H(d, c, e, h, a, m, b, v, n, q) {
+    for (var g = 0, x = c, w; g < A; ++g) {
+      switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {
+        case void 0:
+        case !1:
+        case !0:
+        case null:
+          break;
+
+        default:
+          x = w;
+      }
+    }
+
+    if (x !== c) return x;
+  }
+
+  function T(d) {
+    switch (d) {
+      case void 0:
+      case null:
+        A = S.length = 0;
+        break;
+
+      default:
+        if ('function' === typeof d) S[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) {
+          T(d[c]);
+        } else Y = !!d | 0;
+    }
+
+    return T;
+  }
+
+  function U(d) {
+    d = d.prefix;
+    void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);
+    return U;
+  }
+
+  function B(d, c) {
+    var e = d;
+    33 > e.charCodeAt(0) && (e = e.trim());
+    V = e;
+    e = [V];
+
+    if (0 < A) {
+      var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);
+      void 0 !== h && 'string' === typeof h && (c = h);
+    }
+
+    var a = M(O, e, c, 0, 0);
+    0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));
+    V = '';
+    E = 0;
+    z = D = 1;
+    return a;
+  }
+
+  var ca = /^\0+/g,
+      N = /[\0\r\f]/g,
+      aa = /: */g,
+      ka = /zoo|gra/,
+      ma = /([,: ])(transform)/g,
+      ia = /,\r+?/g,
+      F = /([\t\r\n ])*\f?&/g,
+      fa = /@(k\w+)\s*(\S*)\s*/,
+      Q = /::(place)/g,
+      ha = /:(read-only)/g,
+      G = /[svh]\w+-[tblr]{2}/,
+      da = /\(\s*(.*)\s*\)/g,
+      oa = /([\s\S]*?);/g,
+      ba = /-self|flex-/g,
+      na = /[^]*?(:[rp][el]a[\w-]+)[^]*/,
+      la = /stretch|:\s*\w+\-(?:conte|avail)/,
+      ja = /([^-])(image-set\()/,
+      z = 1,
+      D = 1,
+      E = 0,
+      w = 1,
+      O = [],
+      S = [],
+      A = 0,
+      R = null,
+      Y = 0,
+      V = '';
+  B.use = T;
+  B.set = U;
+  void 0 !== W && U(W);
+  return B;
+}
+
+var unitlessKeys = {
+  animationIterationCount: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+function memoize(fn) {
+  var cache = {};
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+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|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|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 index = memoize(function (prop) {
+  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
+  /* o */
+  && prop.charCodeAt(1) === 110
+  /* n */
+  && prop.charCodeAt(2) < 91;
+}
+/* Z+1 */
+);
+
+var reactIs = reactIs$1.exports;
+
+/**
+ * Copyright 2015, Yahoo! Inc.
+ * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
+ */
+var REACT_STATICS = {
+  childContextTypes: true,
+  contextType: true,
+  contextTypes: true,
+  defaultProps: true,
+  displayName: true,
+  getDefaultProps: true,
+  getDerivedStateFromError: true,
+  getDerivedStateFromProps: true,
+  mixins: true,
+  propTypes: true,
+  type: true
+};
+var KNOWN_STATICS = {
+  name: true,
+  length: true,
+  prototype: true,
+  caller: true,
+  callee: true,
+  arguments: true,
+  arity: true
+};
+var FORWARD_REF_STATICS = {
+  '$$typeof': true,
+  render: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true
+};
+var MEMO_STATICS = {
+  '$$typeof': true,
+  compare: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true,
+  type: true
+};
+var TYPE_STATICS = {};
+TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
+
+function getStatics(component) {
+  // React v16.11 and below
+  if (reactIs.isMemo(component)) {
+    return MEMO_STATICS;
+  } // React v16.12 and above
+
+
+  return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
+}
+
+var defineProperty = Object.defineProperty;
+var getOwnPropertyNames = Object.getOwnPropertyNames;
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+var getPrototypeOf = Object.getPrototypeOf;
+var objectPrototype = Object.prototype;
+function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
+  if (typeof sourceComponent !== 'string') {
+    // don't hoist over string (html) components
+    if (objectPrototype) {
+      var inheritedComponent = getPrototypeOf(sourceComponent);
+
+      if (inheritedComponent && inheritedComponent !== objectPrototype) {
+        hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
+      }
+    }
+
+    var keys = getOwnPropertyNames(sourceComponent);
+
+    if (getOwnPropertySymbols) {
+      keys = keys.concat(getOwnPropertySymbols(sourceComponent));
+    }
+
+    var targetStatics = getStatics(targetComponent);
+    var sourceStatics = getStatics(sourceComponent);
+
+    for (var i = 0; i < keys.length; ++i) {
+      var key = keys[i];
+
+      if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
+        var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+
+        try {
+          // Avoid failures from read-only properties
+          defineProperty(targetComponent, key, descriptor);
+        } catch (e) {}
+      }
+    }
+  }
+
+  return targetComponent;
+}
+
+var hoistNonReactStatics_cjs = hoistNonReactStatics;
+
+function v(){return (v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);}return e}).apply(this,arguments)}var g=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n},S=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!reactIs$1.exports.typeOf(t)},w=Object.freeze([]),E=Object.freeze({});function b(e){return "function"==typeof e}function _$5(e){return "production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function N(e){return e&&"string"==typeof e.styledComponentId}var A="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",I="undefined"!=typeof window&&"HTMLElement"in window,P=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),R="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function D(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n<r;n+=1)t.push(n<0||arguments.length<=n?void 0:arguments[n]);return t.forEach((function(t){e=e.replace(/%[a-z]/,t);})),e}function j(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];throw "production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):"")):new Error(D.apply(void 0,[R[e]].concat(n)).trim())}var T=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&j(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=0,c=t.length;a<c;a++)this.tag.insertRule(i,t[a])&&(this.groupSizes[e]++,i++);},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n);}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+=this.tag.getRule(s)+"/*!sc*/\n";return t},e}(),x=new Map,k=new Map,V=1,B=function(e){if(x.has(e))return x.get(e);for(;k.has(V);)V++;var t=V++;return "production"!==process.env.NODE_ENV&&((0|t)<0||t>1<<30)&&j(16,""+t),x.set(e,t),k.set(t,e),t},z=function(e){return k.get(e)},M=function(e,t){t>=V&&(V=t+1),x.set(e,t),k.set(t,e);},G="style["+A+'][data-styled-version="5.3.3"]',L=new RegExp("^"+A+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),F=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r);},Y=function(e,t){for(var n=(t.textContent||"").split("/*!sc*/\n"),r=[],o=0,s=n.length;o<s;o++){var i=n[o].trim();if(i){var a=i.match(L);if(a){var c=0|parseInt(a[1],10),u=a[2];0!==c&&(M(u,c),F(e,u,a[3]),e.getTag().insertRules(c,r)),r.length=0;}else r.push(i);}}},q=function(){return "undefined"!=typeof window&&void 0!==window.__webpack_nonce__?window.__webpack_nonce__:null},H=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(A))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(A,"active"),r.setAttribute("data-styled-version","5.3.3");var i=q();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},$=function(){function e(e){var t=this.element=H(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}j(17);}(t),this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return !1}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),W=function(){function e(e){var t=this.element=H(e);this.nodes=t.childNodes,this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return !1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},t.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),U=function(){function e(e){this.rules=[],this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},t.deleteRule=function(e){this.rules.splice(e,1),this.length--;},t.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),J=I,X={isServer:!I,useCSSOMInjection:!P},Z=function(){function e(e,t,n){void 0===e&&(e=E),void 0===t&&(t={}),this.options=v({},X,{},e),this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&I&&J&&(J=!1,function(e){for(var t=document.querySelectorAll(G),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(A)&&(Y(e,o),o.parentNode&&o.parentNode.removeChild(o));}}(this));}e.registerId=function(e){return B(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(v({},this.options,{},t),this.gs,n&&this.names||void 0)},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.getTag=function(){return this.tag||(this.tag=(n=(t=this.options).isServer,r=t.useCSSOMInjection,o=t.target,e=n?new U(o):r?new $(o):new W(o),new T(e)));var e,t,n,r,o;},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.registerName=function(e,t){if(B(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},t.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(B(e),n);},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},t.clearRules=function(e){this.getTag().clearGroup(B(e)),this.clearNames(e);},t.clearTag=function(){this.tag=void 0;},t.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=0;o<n;o++){var s=z(o);if(void 0!==s){var i=e.names.get(s),a=t.getGroup(o);if(i&&a&&i.size){var c=A+".g"+o+'[id="'+s+'"]',u="";void 0!==i&&i.forEach((function(e){e.length>0&&(u+=e+",");})),r+=""+a+c+'{content:"'+u+'"}/*!sc*/\n';}}}return r}(this)},e}(),K=/(a)(d)/gi,Q=function(e){return String.fromCharCode(e+(e>25?39:97))};function ee(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=Q(t%52)+n;return (Q(t%52)+n).replace(K,"$1-$2")}var te=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},ne=function(e){return te(5381,e)};function re(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(b(n)&&!N(n))return !1}return !0}var oe=ne("5.3.3"),se=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&re(e),this.componentId=t,this.baseHash=te(oe,t),this.baseStyle=n,Z.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))o.push(this.staticRulesId);else {var s=Ne(this.rules,e,t,n).join(""),i=ee(te(this.baseHash,s)>>>0);if(!t.hasNameForId(r,i)){var a=n(s,"."+i,void 0,r);t.insertRules(r,i,a);}o.push(i),this.staticRulesId=i;}else {for(var c=this.rules.length,u=te(this.baseHash,n.hash),l="",d=0;d<c;d++){var h=this.rules[d];if("string"==typeof h)l+=h,"production"!==process.env.NODE_ENV&&(u=te(u,h+d));else if(h){var p=Ne(h,e,t,n),f=Array.isArray(p)?p.join(""):p;u=te(u,f+d),l+=f;}}if(l){var m=ee(u>>>0);if(!t.hasNameForId(r,m)){var y=n(l,"."+m,void 0,r);t.insertRules(r,m,y);}o.push(m);}}return o.join(" ")},e}(),ie=/^\s*\/\/.*$/gm,ae=[":","[",".","#"];function ce(e){var t,n,r,o,s=void 0===e?E:e,i=s.options,a=void 0===i?E:i,c=s.plugins,u=void 0===c?w:c,l=new stylis_min(a),d=[],h=function(e){function t(t){if(t)try{e(t+"}");}catch(e){}}return function(n,r,o,s,i,a,c,u,l,d){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===u)return r+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),"";default:return r+(0===d?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t);}}}((function(e){d.push(e);})),f=function(e,r,s){return 0===r&&-1!==ae.indexOf(s[n.length])||s.match(o)?e:"."+t};function m(e,s,i,a){void 0===a&&(a="&");var c=e.replace(ie,""),u=s&&i?i+" "+s+" { "+c+" }":c;return t=a,n=s,r=new RegExp("\\"+n+"\\b","g"),o=new RegExp("(\\"+n+"\\b){2,}"),l(i||!s?"":s,u)}return l.use([].concat(u,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,f));},h,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||j(15),te(e,t.name)}),5381).toString():"",m}var ue=React__default.createContext();ue.Consumer;var de=React__default.createContext(),he=(de.Consumer,new Z),pe=ce();function fe(){return useContext(ue)||he}function me(){return useContext(de)||pe}var ve=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=pe);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"));},this.toString=function(){return j(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t;}return e.prototype.getName=function(e){return void 0===e&&(e=pe),this.name+e.hash},e}(),ge=/([A-Z])/,Se=/([A-Z])/g,we=/^ms-/,Ee=function(e){return "-"+e.toLowerCase()};function be(e){return ge.test(e)?e.replace(Se,Ee).replace(we,"-ms-"):e}var _e=function(e){return null==e||!1===e||""===e};function Ne(e,n,r,o){if(Array.isArray(e)){for(var s,i=[],a=0,c=e.length;a<c;a+=1)""!==(s=Ne(e[a],n,r,o))&&(Array.isArray(s)?i.push.apply(i,s):i.push(s));return i}if(_e(e))return "";if(N(e))return "."+e.styledComponentId;if(b(e)){if("function"!=typeof(l=e)||l.prototype&&l.prototype.isReactComponent||!n)return e;var u=e(n);return "production"!==process.env.NODE_ENV&&reactIs$1.exports.isElement(u)&&console.warn(_$5(e)+" is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."),Ne(u,n,r,o)}var l;return e instanceof ve?r?(e.inject(r,o),e.getName(o)):e:S(e)?function e(t,n){var r,o,s=[];for(var i in t)t.hasOwnProperty(i)&&!_e(t[i])&&(Array.isArray(t[i])&&t[i].isCss||b(t[i])?s.push(be(i)+":",t[i],";"):S(t[i])?s.push.apply(s,e(t[i],i)):s.push(be(i)+": "+(r=i,null==(o=t[i])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||r in unitlessKeys?String(o).trim():o+"px")+";"));return n?[n+" {"].concat(s,["}"]):s}(e):e.toString()}var Ae=function(e){return Array.isArray(e)&&(e.isCss=!0),e};function Ce(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return b(e)||S(e)?Ae(Ne(g(w,[e].concat(n)))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:Ae(Ne(g(e,n)))}var Ie=/invalid hook call/i,Pe=new Set,Oe=function(e,t){if("production"!==process.env.NODE_ENV){var n="The component "+e+(t?' with the id of "'+t+'"':"")+" has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",r=console.error;try{var o=!0;console.error=function(e){if(Ie.test(e))o=!1,Pe.delete(n);else {for(var t=arguments.length,s=new Array(t>1?t-1:0),i=1;i<t;i++)s[i-1]=arguments[i];r.apply(void 0,[e].concat(s));}},useRef(),o&&!Pe.has(n)&&(console.warn(n),Pe.add(n));}catch(e){Ie.test(e.message)&&Pe.delete(n);}finally{console.error=r;}}},Re=function(e,t,n){return void 0===n&&(n=E),e.theme!==n.theme&&e.theme||t||n.theme},De=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,je=/(^-|-$)/g;function Te(e){return e.replace(De,"-").replace(je,"")}var xe=function(e){return ee(ne(e)>>>0)};function ke(e){return "string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var Ve=function(e){return "function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},Be=function(e){return "__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function ze(e,t,n){var r=e[n];Ve(t)&&Ve(r)?Me(r,t):e[n]=t;}function Me(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];for(var o=0,s=n;o<s.length;o++){var i=s[o];if(Ve(i))for(var a in i)Be(a)&&ze(e,i[a],a);}return e}var Ge=React__default.createContext();Ge.Consumer;var Ye={};function qe(e,t,n){var o=N(e),i=!ke(e),a=t.attrs,c=void 0===a?w:a,d=t.componentId,h=void 0===d?function(e,t){var n="string"!=typeof e?"sc":Te(e);Ye[n]=(Ye[n]||0)+1;var r=n+"-"+xe("5.3.3"+n+Ye[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):d,p=t.displayName,f=void 0===p?function(e){return ke(e)?"styled."+e:"Styled("+_$5(e)+")"}(e):p,g=t.displayName&&t.componentId?Te(t.displayName)+"-"+t.componentId:t.componentId||h,S=o&&e.attrs?Array.prototype.concat(e.attrs,c).filter(Boolean):c,A=t.shouldForwardProp;o&&e.shouldForwardProp&&(A=t.shouldForwardProp?function(n,r,o){return e.shouldForwardProp(n,r,o)&&t.shouldForwardProp(n,r,o)}:e.shouldForwardProp);var C,I=new se(n,g,o?e.componentStyle:void 0),P=I.isStatic&&0===c.length,O=function(e,t){return function(e,t,n,r){var o=e.attrs,i=e.componentStyle,a=e.defaultProps,c=e.foldedComponentIds,d=e.shouldForwardProp,h=e.styledComponentId,p=e.target;"production"!==process.env.NODE_ENV&&useDebugValue(h);var f=function(e,t,n){void 0===e&&(e=E);var r=v({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,s,i=e;for(t in b(i)&&(i=i(r)),i)r[t]=o[t]="className"===t?(n=o[t],s=i[t],n&&s?n+" "+s:n||s):i[t];})),[r,o]}(Re(t,useContext(Ge),a)||E,t,o),y=f[0],g=f[1],S=function(e,t,n,r){var o=fe(),s=me(),i=t?e.generateAndInjectStyles(E,o,s):e.generateAndInjectStyles(n,o,s);return "production"!==process.env.NODE_ENV&&useDebugValue(i),"production"!==process.env.NODE_ENV&&!t&&r&&r(i),i}(i,r,y,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),w=n,_=g.$as||t.$as||g.as||t.as||p,N=ke(_),A=g!==t?v({},t,{},g):t,C={};for(var I in A)"$"!==I[0]&&"as"!==I&&("forwardedAs"===I?C.as=A[I]:(d?d(I,index,_):!N||index(I))&&(C[I]=A[I]));return t.style&&g.style!==t.style&&(C.style=v({},t.style,{},g.style)),C.className=Array.prototype.concat(c,h,S!==h?S:null,t.className,g.className).filter(Boolean).join(" "),C.ref=w,createElement(_,C)}(C,e,t,P)};return O.displayName=f,(C=React__default.forwardRef(O)).attrs=S,C.componentStyle=I,C.displayName=f,C.shouldForwardProp=A,C.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):w,C.styledComponentId=g,C.target=o?e.target:e,C.withComponent=function(e){var r=t.componentId,o=function(e,t){if(null==e)return {};var n,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(t,["componentId"]),s=r&&r+"-"+(ke(e)?e:Te(_$5(e)));return qe(e,v({},o,{attrs:S,componentId:s}),n)},Object.defineProperty(C,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?Me({},e.defaultProps,t):t;}}),"production"!==process.env.NODE_ENV&&(Oe(f,g),C.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'+t+'"':"";console.warn("Over 200 classes were generated for component "+e+s+".\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={};}}}(f,g)),C.toString=function(){return "."+C.styledComponentId},i&&hoistNonReactStatics_cjs(C,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),C}var He=function(e){return function e(t,r,o){if(void 0===o&&(o=E),!reactIs$1.exports.isValidElementType(r))return j(1,String(r));var s=function(){return t(r,o,Ce.apply(void 0,arguments))};return s.withConfig=function(n){return e(t,r,v({},o,{},n))},s.attrs=function(n){return e(t,r,v({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},s}(qe,e)};["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","textPath","tspan"].forEach((function(e){He[e]=He(e);}));"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native"),"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window["__styled-components-init__"]=window["__styled-components-init__"]||0,1===window["__styled-components-init__"]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window["__styled-components-init__"]+=1);var styled = He;
+
+let _$4 = t => t,
+    _t$4,
+    _t2$2,
+    _t3$2,
+    _t4$2;
+const ColumnsWrapper = styled.div(_t$4 || (_t$4 = _$4`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`));
+const ColumnsHeader = styled.p(_t2$2 || (_t2$2 = _$4`
+  margin: 10px 0;
+  color: #c3c3c3;
+  font-size: 12px;
+`));
+const NumberInputFormGroupWrapper = styled.div(_t3$2 || (_t3$2 = _$4`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 110px;
+`));
+const IconWrapper$1 = styled.div(_t4$2 || (_t4$2 = _$4`
+  cursor: pointer;
+`));
+
+const MATRIX_LABEL_TYPE = {
+  agreement: 'agreement',
+  frequency: 'frequency',
+  yesNo: 'yesNo',
+  importance: 'importance',
+  likelihood: 'likelihood',
+  like: 'like',
+  custom: 'custom'
+};
+
+const MatrixColumnsSizeHeaderInput = ({
+  model,
+  onChangeModel
+}) => {
+  const onIncrementColumnsSize = () => {
+    onChangeModel(_extends({}, model, {
+      columnLabels: [...model.columnLabels, `COLUMN ${model.columnLabels.length + 1}`],
+      labelType: MATRIX_LABEL_TYPE.custom
+    }));
+  };
+
+  const onDecrementColumnsSize = () => {
+    const columnLabelsLength = model.columnLabels.length;
+
+    if (columnLabelsLength <= 1) {
+      return;
+    }
+
+    const columnLabelsNext = [...model.columnLabels];
+    columnLabelsNext.pop();
+
+    const matrixValuesClone = _extends({}, model.matrixValues);
+
+    model.rowLabels.forEach((rowLabel, rowIndex) => {
+      delete matrixValuesClone[`${rowIndex}-${columnLabelsLength - 1}`];
+    });
+    onChangeModel(_extends({}, model, {
+      columnLabels: columnLabelsNext,
+      matrixValues: matrixValuesClone,
+      labelType: MATRIX_LABEL_TYPE.custom
+    }));
+  };
+
+  return /*#__PURE__*/React__default.createElement(ColumnsWrapper, null, /*#__PURE__*/React__default.createElement(ColumnsHeader, null, "Matrix Columns"), /*#__PURE__*/React__default.createElement(NumberInputFormGroupWrapper, null, /*#__PURE__*/React__default.createElement(IconWrapper$1, null, /*#__PURE__*/React__default.createElement(RemoveIcon, {
+    onClick: onDecrementColumnsSize
+  })), /*#__PURE__*/React__default.createElement("p", null, model.columnLabels.length), /*#__PURE__*/React__default.createElement(IconWrapper$1, null, /*#__PURE__*/React__default.createElement(AddIcon, {
+    onClick: onIncrementColumnsSize
+  }))));
+};
+
+MatrixColumnsSizeHeaderInput.propTypes = {
+  model: PropTypes.object.isRequired,
+  onChangeModel: PropTypes.func.isRequired
+};
+
+const MatrixColumnsRowInput = ({
+  model,
+  onChangeModel
+}) => {
+  const onIncrementSize = () => {
+    onChangeModel(_extends({}, model, {
+      rowLabels: [...model.rowLabels, `STATEMENT ${model.rowLabels.length + 1}`],
+      labelType: MATRIX_LABEL_TYPE.custom
+    }));
+  };
+
+  const onDecrementSize = () => {
+    const rowLabelsLength = model.rowLabels.length;
+
+    if (rowLabelsLength <= 1) {
+      return;
+    }
+
+    const rowLabelsNext = [...model.rowLabels];
+    rowLabelsNext.pop();
+
+    const matrixValuesClone = _extends({}, model.matrixValues);
+
+    model.columnLabels.forEach((columnLabel, columnIndex) => {
+      delete matrixValuesClone[`${rowLabelsLength - 1}-${columnIndex}`];
+    });
+    onChangeModel(_extends({}, model, {
+      rowLabels: rowLabelsNext,
+      matrixValues: matrixValuesClone,
+      labelType: MATRIX_LABEL_TYPE.custom
+    }));
+  };
+
+  return /*#__PURE__*/React__default.createElement(ColumnsWrapper, null, /*#__PURE__*/React__default.createElement(ColumnsHeader, null, "Matrix Rows"), /*#__PURE__*/React__default.createElement(NumberInputFormGroupWrapper, null, /*#__PURE__*/React__default.createElement(IconWrapper$1, null, /*#__PURE__*/React__default.createElement(RemoveIcon, {
+    onClick: onDecrementSize
+  })), /*#__PURE__*/React__default.createElement("p", null, model.rowLabels.length), /*#__PURE__*/React__default.createElement(IconWrapper$1, null, /*#__PURE__*/React__default.createElement(AddIcon, {
+    onClick: onIncrementSize
+  }))));
+};
+
+MatrixColumnsRowInput.propTypes = {
+  model: PropTypes.object.isRequired,
+  onChangeModel: PropTypes.func.isRequired
+};
+
+const AGREEMENT_3 = ['Disagree', 'Unsure', 'Agree'];
+const AGREEMENT_5 = ['Strongly Disagree', ...AGREEMENT_3, 'Strongly Agree'];
+const AGREEMENT_7 = ['Extremely Disagree', ...AGREEMENT_5, 'Extremely Agree'];
+const FREQUENCY_3 = ['Infrequently', 'Unsure', 'Frequently'];
+const FREQUENCY_5 = ['Very Infrequently', ...FREQUENCY_3, 'Very Frequently'];
+const FREQUENCY_7 = ['Never', ...FREQUENCY_5, 'Always'];
+const YES_NO_3 = ['No', 'Unsure', 'Yes'];
+const YES_NO_5 = ['No', 'Not really', 'Unsure', 'Sometimes', 'Yes'];
+const YES_NO_7 = ['No', 'Rarely', 'Not really', 'Unsure', 'Sometimes', 'Very Often', 'Always'];
+const LIKELIHOOD_3 = ['Not Likely', 'Unsure', 'Likely'];
+const LIKELIHOOD_5 = ['Very Unlikely', ...LIKELIHOOD_3, 'Very Likely'];
+const LIKELIHOOD_7 = ['Extremely Unlikely', ...LIKELIHOOD_5, 'Extremely Likely'];
+const IMPORTANCE_3 = ['Not Important', 'Unsure', 'Important'];
+const IMPORTANCE_5 = ['Very Not Important', ...IMPORTANCE_3, 'Very Important'];
+const IMPORTANCE_7 = ['Extremely Not Important', ...IMPORTANCE_5, 'Extremely Important'];
+const LIKE_3 = ['Dislike', 'Unsure', 'Like'];
+const LIKE_5 = ['Really Dislike', ...LIKE_3, 'Really Like'];
+const LIKE_7 = ['Extremely Dislike', ...LIKE_5, 'Extremely Like'];
+const config = {
+  agreement_3: AGREEMENT_3,
+  agreement_5: AGREEMENT_5,
+  agreement_7: AGREEMENT_7,
+  frequency_3: FREQUENCY_3,
+  frequency_5: FREQUENCY_5,
+  frequency_7: FREQUENCY_7,
+  yesNo_3: YES_NO_3,
+  yesNo_5: YES_NO_5,
+  yesNo_7: YES_NO_7,
+  likelihood_3: LIKELIHOOD_3,
+  likelihood_5: LIKELIHOOD_5,
+  likelihood_7: LIKELIHOOD_7,
+  importance_3: IMPORTANCE_3,
+  importance_5: IMPORTANCE_5,
+  importance_7: IMPORTANCE_7,
+  like_3: LIKE_3,
+  like_5: LIKE_5,
+  like_7: LIKE_7
+};
+
+const generateColumnLabels = (labelType, size) => {
+  return config[`${labelType}_${size}`];
+};
+
+let _$3 = t => t,
+    _t$3;
+const Flex = styled.div(_t$3 || (_t$3 = _$3`
+  display: flex;
+`));
+
+const styles$2 = theme => ({
+  customColor: {
+    color: `${color.tertiary()} !important`
+  }
+});
+
+const MatrixLabelTypeHeaderInput = ({
+  model,
+  onChangeModel,
+  classes
+}) => {
+  const onChangeLabelType = e => {
+    const labelType = e.target.value;
+
+    const modelNew = _extends({}, model, {
+      labelType
+    });
+
+    if (labelType !== MATRIX_LABEL_TYPE.custom) {
+      modelNew.columnLabels = generateColumnLabels(labelType, model.columnLabels.length);
+    }
+
+    onChangeModel(modelNew);
+  };
+
+  const isMatrixTypeSelectionEnabled = [3, 5, 7].includes(model.columnLabels.length);
+  return /*#__PURE__*/React__default.createElement(ColumnsWrapper, null, /*#__PURE__*/React__default.createElement(ColumnsHeader, null, "Matrix Type"), /*#__PURE__*/React__default.createElement(Flex, null, /*#__PURE__*/React__default.createElement(RadioGroup, {
+    "aria-label": "matrixLabelType",
+    name: "matrixLabelType",
+    value: model.labelType,
+    onChange: onChangeLabelType
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    disabled: !isMatrixTypeSelectionEnabled,
+    value: MATRIX_LABEL_TYPE.agreement,
+    control: /*#__PURE__*/React__default.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Agreement"
+  }), /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    disabled: !isMatrixTypeSelectionEnabled,
+    value: MATRIX_LABEL_TYPE.frequency,
+    control: /*#__PURE__*/React__default.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Frequency"
+  }), /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    disabled: !isMatrixTypeSelectionEnabled,
+    value: MATRIX_LABEL_TYPE.yesNo,
+    control: /*#__PURE__*/React__default.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Yes/No"
+  })), /*#__PURE__*/React__default.createElement(RadioGroup, {
+    "aria-label": "matrixLabelType",
+    name: "matrixLabelType",
+    value: model.labelType,
+    onChange: onChangeLabelType
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    disabled: !isMatrixTypeSelectionEnabled,
+    value: MATRIX_LABEL_TYPE.importance,
+    control: /*#__PURE__*/React__default.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Importance"
+  }), /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    disabled: !isMatrixTypeSelectionEnabled,
+    value: MATRIX_LABEL_TYPE.likelihood,
+    control: /*#__PURE__*/React__default.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Likelihood"
+  }), /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    disabled: !isMatrixTypeSelectionEnabled,
+    value: MATRIX_LABEL_TYPE.like,
+    control: /*#__PURE__*/React__default.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Like"
+  })), /*#__PURE__*/React__default.createElement(RadioGroup, {
+    "aria-label": "matrixLabelType",
+    name: "matrixLabelType",
+    value: model.labelType,
+    onChange: onChangeLabelType
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    value: MATRIX_LABEL_TYPE.custom,
+    control: /*#__PURE__*/React__default.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Custom"
+  }))));
+};
+
+MatrixLabelTypeHeaderInput.propTypes = {
+  model: PropTypes.object.isRequired,
+  onChangeModel: PropTypes.func.isRequired
+};
+var MatrixLabelTypeHeaderInput$1 = withStyles(styles$2)(MatrixLabelTypeHeaderInput);
+
+let _$2 = t => t,
+    _t$2;
+const InputWrapper$1 = styled.div(_t$2 || (_t$2 = _$2`
+  width: 100%;
+  height: 100%;
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+`));
+const styles$1 = {
+  InputPropsClass: {
+    fontSize: '16px',
+    textAlign: 'center!important',
+    padding: '0!important',
+    margin: '5px 0',
+    '&$cssFocused $notchedOutline': {
+      borderColor: 'green !important',
+      borderWidth: '1px !important'
+    },
+    '&:hover $notchedOutline': {
+      borderColor: 'gray !important'
+    }
+  },
+  inputPropsClass: {
+    fontSize: '16px',
+    textAlign: 'center',
+    padding: '0',
+    margin: '5px 0'
+  },
+  cssFocused: {},
+  notchedOutline: {
+    borderWidth: '1px !important',
+    borderColor: '#d6d6d6 !important'
+  }
+};
+const NumericInput = withStyles(styles$1)(props => {
+  const {
+    classes,
+    onFieldUpdate,
+    name,
+    placeholder,
+    fieldValue
+  } = props;
+
+  const onFieldUpdateWrapper = e => {
+    onFieldUpdate(e.target.value);
+  };
+
+  return /*#__PURE__*/React.createElement(InputWrapper$1, null, /*#__PURE__*/React.createElement(TextField, {
+    name: name,
+    value: fieldValue.value,
+    inputProps: {
+      className: classes.inputPropsClass
+    },
+    InputProps: {
+      classes: {
+        root: classes.InputPropsClass,
+        focused: classes.cssFocused,
+        notchedOutline: classes.notchedOutline
+      }
+    },
+    inputRef: fieldValue.ref,
+    type: "number",
+    placeholder: placeholder,
+    onChange: onFieldUpdateWrapper,
+    variant: "outlined"
+  }));
+});
+NumericInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  fieldValue: PropTypes.object.isRequired,
+  classes: PropTypes.object,
+  onFieldUpdate: PropTypes.func.isRequired
+};
+
+var isNumeric = (value => {
+  return /^-?\d+$/.test(value);
+});
+
+let _$1 = t => t,
+    _t$1,
+    _t2$1,
+    _t3$1,
+    _t4$1,
+    _t5$1,
+    _t6$1,
+    _t7$1,
+    _t8$1;
+const MatrixEditableButtonWrapper = styled.div(_t$1 || (_t$1 = _$1`
+  width: 100%;
+  height: 50px;
+  margin: 1px;
+  background: #04b26e;
+  border-radius: 5px;
+  color: white;
+  font-size: 14px;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`));
+const MatrixEditableButtonContent = styled.div(_t2$1 || (_t2$1 = _$1`
+  padding: 0 5px 0 12px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+`));
+const MatrixEditableButtonText = styled.p(_t3$1 || (_t3$1 = _$1`
+  margin: 0;
+  padding: 3px 0 3px 4px;
+  cursor: pointer;
+  width: 100%;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  :hover {
+    background: #00985d;
+  }
+
+  transition: all 0.1s ease-in-out;
+`));
+const MatrixEditableButtonActions = styled.div(_t4$1 || (_t4$1 = _$1`
+  padding: 0 3px;
+  height: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border-left: 3px solid #00985d;
+  :hover {
+    background: #00985d;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  transition: all 0.1s ease-in-out;
+`));
+const IconWrapper = styled.div(_t5$1 || (_t5$1 = _$1`
+  font-size: 18px;
+`));
+const InputWrapper = styled.input(_t6$1 || (_t6$1 = _$1`
+  margin: 0;
+  padding: 0 0 0 4px;
+  font-size: 14px;
+  border: none;
+  outline: none;
+  color: white;
+  width: 50px;
+  width: 100%;
+  background: #00985d;
+  height: 22px;
+  display: flex;
+  align-items: center;
+`));
+const SetScoresToWrapper = styled.div(_t7$1 || (_t7$1 = _$1`
+  display: flex;
+  align-items: center;
+`));
+const SetScoresToInputWrapper = styled.div(_t8$1 || (_t8$1 = _$1`
+  width: 50px;
+  margin-left: 10px;
+`));
+const ACTION_TYPE = {
+  clear: 'clear',
+  sortAscending: 'sortAscending',
+  sortDescending: 'sortDescending',
+  set: 'set'
+};
+
+const MatrixLabelEditableButton = props => {
+  const {
+    onLabelUpdate,
+    value,
+    resourceIndex,
+    onAction,
+    spellCheck
+  } = props;
+  const [labelValue, setLabelValue] = useState(null);
+  const [scoreValue, setScoreValue] = useState('');
+  const [showInput, setShowInput] = useState(false);
+  const [anchorEl, setAnchorEl] = React__default.useState(null);
+  const [scoresToRef] = React__default.useState( /*#__PURE__*/React__default.createRef());
+  const open = Boolean(anchorEl);
+
+  const onActionClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = e => {
+    e.stopPropagation();
+    setAnchorEl(null);
+    setScoreValue('');
+  };
+
+  const onClearScores = e => {
+    handleClose(e);
+    onAction({
+      resourceIndex,
+      actionType: ACTION_TYPE.clear
+    });
+  };
+
+  const onSetScoresAscending = e => {
+    handleClose(e);
+    onAction({
+      resourceIndex,
+      actionType: ACTION_TYPE.sortAscending
+    });
+  };
+
+  const onSetScoresDescending = e => {
+    handleClose(e);
+    onAction({
+      resourceIndex,
+      actionType: ACTION_TYPE.sortDescending
+    });
+  };
+
+  const onSetScores = value => {
+    if (!isNumeric(value)) {
+      setScoreValue('');
+      return;
+    }
+
+    const scoreValueNew = parseInt(value, 10);
+    setScoreValue(scoreValueNew);
+    onAction({
+      resourceIndex,
+      actionType: ACTION_TYPE.set,
+      setValue: scoreValueNew
+    });
+  };
+
+  const onBlur = () => {
+    const labeValueTrimmed = labelValue.trim();
+
+    if (labeValueTrimmed) {
+      onLabelUpdate(labeValueTrimmed);
+    }
+
+    setLabelValue(null);
+    setShowInput(false);
+  };
+
+  const onShowInput = () => {
+    setShowInput(true);
+    setLabelValue(value);
+  };
+
+  const onSetScoreToFocus = () => {
+    scoresToRef.current.focus();
+  };
+
+  return /*#__PURE__*/React__default.createElement(MatrixEditableButtonWrapper, null, /*#__PURE__*/React__default.createElement(MatrixEditableButtonContent, null, showInput ? /*#__PURE__*/React__default.createElement(InputWrapper, {
+    autoFocus: true,
+    value: labelValue,
+    onChange: e => setLabelValue(e.target.value),
+    onBlur: onBlur,
+    spellCheck: spellCheck
+  }) : /*#__PURE__*/React__default.createElement(MatrixEditableButtonText, {
+    onClick: onShowInput
+  }, value)), /*#__PURE__*/React__default.createElement(MatrixEditableButtonActions, {
+    onClick: onActionClick
+  }, /*#__PURE__*/React__default.createElement(IconWrapper, null, /*#__PURE__*/React__default.createElement(KeyboardArrowDownIcon, {
+    fontSize: "inherit"
+  })), /*#__PURE__*/React__default.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: open,
+    onClose: handleClose
+  }, /*#__PURE__*/React__default.createElement(MenuItem, {
+    key: "item1",
+    selected: false,
+    onClick: onClearScores
+  }, "Clear Scores"), /*#__PURE__*/React__default.createElement(MenuItem, {
+    key: "item2",
+    selected: false,
+    onClick: onSetScoresAscending
+  }, "Set Scores Ascending"), /*#__PURE__*/React__default.createElement(MenuItem, {
+    key: "item3",
+    selected: false,
+    onClick: onSetScoresDescending
+  }, "Set Scores Descending"), /*#__PURE__*/React__default.createElement(MenuItem, {
+    key: "item4",
+    selected: false
+  }, /*#__PURE__*/React__default.createElement(SetScoresToWrapper, null, /*#__PURE__*/React__default.createElement("p", {
+    onClick: onSetScoreToFocus
+  }, "Set Scores To"), /*#__PURE__*/React__default.createElement(SetScoresToInputWrapper, null, /*#__PURE__*/React__default.createElement(NumericInput, {
+    onFieldUpdate: onSetScores,
+    name: 'setScoreTo',
+    placeholder: "#",
+    fieldValue: {
+      value: scoreValue,
+      ref: scoresToRef
+    }
+  })))))));
+};
+
+MatrixLabelEditableButton.propTypes = {
+  value: PropTypes.string.isRequired,
+  resourceIndex: PropTypes.number.isRequired,
+  onLabelUpdate: PropTypes.func.isRequired,
+  onAction: PropTypes.func.isRequired,
+  spellCheck: PropTypes.bool
+};
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3,
+    _t4,
+    _t5,
+    _t6,
+    _t7,
+    _t8,
+    _t9,
+    _t10,
+    _t11;
+const columnWidth = '120px';
+const ScoringContainer = styled.div(_t || (_t = _`
+  display: grid;
+  grid-template-columns: min-content min-content auto;
+`));
+const MatrixColumns = styled.div(_t2 || (_t2 = _`
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+`));
+const ColumnLabelWrapper = styled.div(_t3 || (_t3 = _`
+  width: ${0};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`), columnWidth);
+const RowLabelWrapper = styled.div(_t4 || (_t4 = _`
+  width: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`));
+const ValueRowWrapper = styled.div(_t5 || (_t5 = _`
+  display: flex;
+  justify-content: space-between;
+`));
+const ValueItemWrapper = styled.div(_t6 || (_t6 = _`
+  width: ${0};
+  height: 50px;
+  margin: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`), columnWidth);
+const ScoringRows = styled.div(_t7 || (_t7 = _`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 5px;
+`));
+const ScoringNumberInputWrapper = styled.div(_t8 || (_t8 = _`
+  width: 60px;
+  justify-self: center;
+  align-self: center;
+`));
+const GridSeparatorHorizontal = styled.div(_t9 || (_t9 = _`
+  background: gray;
+  width: 100%;
+  height: 1px;
+`));
+const GridSeparatorVertical = styled.div(_t10 || (_t10 = _`
+  background: gray;
+  width: 1px;
+  height: 100%;
+`));
+const Content = styled.div(_t11 || (_t11 = _`
+  padding: 5px;
+`));
+
+const MatrixValues = props => {
+  const {
+    model,
+    onChangeModel
+  } = props;
+  const {
+    rowLabels,
+    columnLabels,
+    matrixValues,
+    spellCheckEnabled
+  } = model;
+
+  const onSetMatrixValue = (matrixValueIndex, value) => {
+    const matrixValuesClone = _extends({}, matrixValues);
+
+    if (isNumeric(value)) {
+      matrixValuesClone[matrixValueIndex] = parseInt(value, 10);
+    } else {
+      delete matrixValuesClone[matrixValueIndex];
+    }
+
+    onChangeModel(_extends({}, model, {
+      matrixValues: matrixValuesClone
+    }));
+  };
+
+  const onSetColumnLabel = (index, labelValue) => {
+    const columnLabelsClone = [...columnLabels];
+    columnLabelsClone[index] = labelValue;
+    onChangeModel(_extends({}, model, {
+      columnLabels: columnLabelsClone
+    }));
+  };
+
+  const onSetRowLabel = (index, labelValue) => {
+    const rowLabelsClone = [...rowLabels];
+    rowLabelsClone[index] = labelValue;
+    onChangeModel(_extends({}, model, {
+      rowLabels: rowLabelsClone
+    }));
+  };
+
+  const onActionByColumn = ({
+    resourceIndex,
+    actionType,
+    setValue
+  }) => {
+    const columnLabelIndex = resourceIndex;
+
+    const matrixValuesClone = _extends({}, matrixValues);
+
+    rowLabels.forEach((rowLabel, rowLabelIndex) => {
+      switch (actionType) {
+        case ACTION_TYPE.clear:
+          delete matrixValuesClone[`${rowLabelIndex}-${columnLabelIndex}`];
+          break;
+
+        case ACTION_TYPE.sortAscending:
+          matrixValuesClone[`${rowLabelIndex}-${columnLabelIndex}`] = rowLabelIndex + 1;
+          break;
+
+        case ACTION_TYPE.sortDescending:
+          matrixValuesClone[`${rowLabelIndex}-${columnLabelIndex}`] = rowLabels.length - rowLabelIndex;
+          break;
+
+        case ACTION_TYPE.set:
+          matrixValuesClone[`${rowLabelIndex}-${columnLabelIndex}`] = setValue;
+          break;
+
+        default:
+          throw 'Incorrect actionType';
+      }
+    });
+    onChangeModel(_extends({}, model, {
+      matrixValues: matrixValuesClone
+    }));
+  };
+
+  const onActionByRow = ({
+    resourceIndex,
+    actionType,
+    setValue
+  }) => {
+    const rowLabelIndex = resourceIndex;
+
+    const matrixValuesClone = _extends({}, matrixValues);
+
+    columnLabels.forEach((columnLabel, columnLabelIndex) => {
+      switch (actionType) {
+        case ACTION_TYPE.clear:
+          delete matrixValuesClone[`${rowLabelIndex}-${columnLabelIndex}`];
+          break;
+
+        case ACTION_TYPE.sortAscending:
+          matrixValuesClone[`${rowLabelIndex}-${columnLabelIndex}`] = rowLabelIndex + 1;
+          break;
+
+        case ACTION_TYPE.sortDescending:
+          matrixValuesClone[`${rowLabelIndex}-${columnLabelIndex}`] = rowLabels.length - rowLabelIndex;
+          break;
+
+        case ACTION_TYPE.set:
+          matrixValuesClone[`${rowLabelIndex}-${columnLabelIndex}`] = setValue;
+          break;
+
+        default:
+          throw 'Incorrect actionType';
+      }
+    });
+    onChangeModel(_extends({}, model, {
+      matrixValues: matrixValuesClone
+    }));
+  };
+
+  return /*#__PURE__*/React__default.createElement(ScoringContainer, null, /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(GridSeparatorVertical, null), /*#__PURE__*/React__default.createElement(MatrixColumns, null, columnLabels.map((value, columnLabelIndex) => /*#__PURE__*/React__default.createElement(ColumnLabelWrapper, {
+    key: columnLabelIndex
+  }, /*#__PURE__*/React__default.createElement(MatrixLabelEditableButton, {
+    resourceIndex: columnLabelIndex,
+    onAction: onActionByColumn,
+    value: value,
+    onLabelUpdate: labelValue => onSetColumnLabel(columnLabelIndex, labelValue),
+    spellCheck: spellCheckEnabled
+  })))), /*#__PURE__*/React__default.createElement(GridSeparatorHorizontal, null), /*#__PURE__*/React__default.createElement(GridSeparatorVertical, null), /*#__PURE__*/React__default.createElement(GridSeparatorHorizontal, null), /*#__PURE__*/React__default.createElement(ScoringRows, null, rowLabels.map((value, rowLabelIndex) => /*#__PURE__*/React__default.createElement(RowLabelWrapper, {
+    key: rowLabelIndex
+  }, /*#__PURE__*/React__default.createElement(MatrixLabelEditableButton, {
+    resourceIndex: rowLabelIndex,
+    onAction: onActionByRow,
+    value: value,
+    onLabelUpdate: labelValue => onSetRowLabel(rowLabelIndex, labelValue),
+    spellCheck: spellCheckEnabled
+  })))), /*#__PURE__*/React__default.createElement(GridSeparatorVertical, null), /*#__PURE__*/React__default.createElement(Content, null, rowLabels.map((row, rowIndex) => {
+    return /*#__PURE__*/React__default.createElement(ValueRowWrapper, {
+      key: rowIndex
+    }, columnLabels.map((column, entryIndex) => {
+      const matrixValueIndex = `${rowIndex}-${entryIndex}`;
+      return /*#__PURE__*/React__default.createElement(ValueItemWrapper, {
+        key: entryIndex
+      }, /*#__PURE__*/React__default.createElement(ScoringNumberInputWrapper, null, /*#__PURE__*/React__default.createElement(NumericInput, {
+        onFieldUpdate: e => onSetMatrixValue(matrixValueIndex, e),
+        name: matrixValueIndex,
+        placeholder: "#",
+        fieldValue: {
+          value: isNumeric(matrixValues[matrixValueIndex]) ? matrixValues[matrixValueIndex] : ''
+        }
+      })));
+    }));
+  })));
+};
+
+MatrixValues.propTypes = {
+  model: PropTypes.object.isRequired,
+  onChangeModel: PropTypes.func.isRequired
+};
+
+const {
+  Panel,
+  toggle,
+  radio
+} = settings;
+
+const styles = theme => ({
+  promptHolder: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  matrixHeaderOptionsHolder: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '100%',
+    paddingBottom: theme.spacing.unit * 2.5,
+    justifyContent: 'space-around'
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit
+  }
+});
+
+const Design = withStyles(styles)(props => {
+  const {
+    classes,
+    model,
+    configuration,
+    onPromptChanged,
+    imageSupport,
+    uploadSoundSupport,
+    onChangeModel,
+    onConfigurationChanged,
+    onTeacherInstructionsChanged
+  } = props;
+  const {
+    baseInputConfiguration = {},
+    contentDimensions = {},
+    prompt = {},
+    scoringType = {},
+    settingsPanelDisabled,
+    spellCheck = {},
+    teacherInstructions = {}
+  } = configuration || {};
+  const {
+    errors = {},
+    extraCSSRules,
+    teacherInstructionsEnabled,
+    spellCheckEnabled
+  } = model || {};
+  const {
+    prompt: promptError,
+    teacherInstructions: teacherInstructionsError
+  } = errors;
+  const panelProperties = {
+    teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+    spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+    scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric'])
+  };
+
+  const getPluginProps = (props = {}) => _extends({}, baseInputConfiguration, props);
+
+  return /*#__PURE__*/React__default.createElement(layout.ConfigLayout, {
+    extraCSSRules: extraCSSRules,
+    dimensions: contentDimensions,
+    hideSettings: settingsPanelDisabled,
+    settings: /*#__PURE__*/React__default.createElement(Panel, {
+      model: model,
+      onChangeModel: onChangeModel,
+      configuration: configuration,
+      onChangeConfiguration: onConfigurationChanged,
+      groups: {
+        Properties: panelProperties
+      }
+    })
+  }, teacherInstructionsEnabled && /*#__PURE__*/React__default.createElement(InputContainer, {
+    label: teacherInstructions.label,
+    className: classes.promptHolder
+  }, /*#__PURE__*/React__default.createElement(EditableHtml, {
+    className: classes.prompt,
+    markup: model.teacherInstructions || '',
+    onChange: onTeacherInstructionsChanged,
+    imageSupport: imageSupport,
+    error: teacherInstructionsError,
+    pluginProps: getPluginProps(teacherInstructions == null ? void 0 : teacherInstructions.inputConfiguration),
+    nonEmpty: false,
+    spellCheck: spellCheckEnabled,
+    uploadSoundSupport: uploadSoundSupport
+  }), teacherInstructionsError && /*#__PURE__*/React__default.createElement("div", {
+    className: classes.errorText
+  }, teacherInstructionsError)), /*#__PURE__*/React__default.createElement(InputContainer, {
+    label: prompt.label,
+    className: classes.promptHolder
+  }, /*#__PURE__*/React__default.createElement(EditableHtml, {
+    className: classes.prompt,
+    markup: model.prompt,
+    onChange: onPromptChanged,
+    imageSupport: imageSupport,
+    error: promptError,
+    pluginProps: getPluginProps(prompt == null ? void 0 : prompt.inputConfiguration),
+    nonEmpty: !prompt.settings,
+    spellCheck: spellCheckEnabled,
+    uploadSoundSupport: uploadSoundSupport,
+    disableUnderline: true
+  }), promptError && /*#__PURE__*/React__default.createElement("div", {
+    className: classes.errorText
+  }, promptError)), /*#__PURE__*/React__default.createElement("div", {
+    className: classes.matrixHeaderOptionsHolder
+  }, /*#__PURE__*/React__default.createElement(MatrixColumnsRowInput, {
+    model: model,
+    onChangeModel: onChangeModel
+  }), /*#__PURE__*/React__default.createElement(MatrixColumnsSizeHeaderInput, {
+    model: model,
+    onChangeModel: onChangeModel
+  }), /*#__PURE__*/React__default.createElement(MatrixLabelTypeHeaderInput$1, {
+    model: model,
+    onChangeModel: onChangeModel
+  })), /*#__PURE__*/React__default.createElement(MatrixValues, {
+    model: model,
+    onChangeModel: onChangeModel
+  }));
+});
+class Main extends React__default.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.onPromptChanged = prompt => {
+      this.props.onModelChanged(_extends({}, this.props.model, {
+        prompt
+      }));
+    };
+
+    this.onChangeModel = data => {
+      this.props.onModelChanged(_extends({}, this.props.model, data));
+    };
+
+    this.onTeacherInstructionsChanged = teacherInstructions => {
+      this.props.onModelChanged(_extends({}, this.props.model, {
+        teacherInstructions
+      }));
+    };
+  }
+
+  render() {
+    return /*#__PURE__*/React__default.createElement(Design, _extends({}, this.props, {
+      onChangeModel: this.props.onModelChanged,
+      onPromptChanged: this.onPromptChanged,
+      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged
+    }));
+  }
+
+}
+Main.propTypes = {
+  model: PropTypes.object.isRequired,
+  disableSidePanel: PropTypes.bool,
+  onModelChanged: PropTypes.func.isRequired,
+  onConfigurationChanged: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  })
+};
+const Styled = withStyles(styles)(Main);
+
+/** NOTE: teacherInstructions, studentInstructions, rationale & scoringType
+ * functionalities are not defined yet - the value for those can belong to
+ * model or to configure
+ */
+var sensibleDefaults = {
+  model: {
+    columnLabels: ['COLUMN 1', 'COLUMN 2', 'COLUMN 3'],
+    labelType: 'agreement',
+    matrixValues: {},
+    prompt: '',
+    promptEnabled: true,
+    rowLabels: ['STATEMENT 1', 'STATEMENT 2'],
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true
+  },
+  configuration: {
+    baseInputConfiguration: {
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    }
+  }
+};
+
+const log = debug('matrix:configure');
+
+const prepareCustomizationObject = (config, model) => {
+  const configuration = defaults(config, sensibleDefaults.configuration);
+  return {
+    configuration,
+    model
+  };
+};
+
+class Matrix extends HTMLElement {
+  constructor() {
+    super();
+    this._model = Matrix.createDefaultModel();
+    this._configuration = sensibleDefaults.configuration;
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+
+  set model(s) {
+    this._model = Matrix.createDefaultModel(s);
+
+    this._render();
+  }
+
+  set configuration(c) {
+    const info = prepareCustomizationObject(c, this._model);
+    this.onModelChanged(info.model);
+    this._configuration = info.configuration;
+
+    this._render();
+  }
+
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+
+    this._render();
+  }
+
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
+  }
+
+  onModelChanged(m, reset) {
+    this._model = m;
+
+    this._render();
+
+    this.dispatchModelUpdated(reset);
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = prepareCustomizationObject(c, this._model).configuration;
+
+    if (this._model) {
+      this.onModelChanged(this._model);
+    }
+
+    this._render();
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  _render() {
+    log('_render');
+    let element = /*#__PURE__*/React__default.createElement(Styled, {
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged,
+      onConfigurationChanged: this.onConfigurationChanged,
+      disableSidePanel: this._disableSidePanel,
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this)
+      }
+    });
+    ReactDOM.render(element, this);
+  }
+
+}
+
+Matrix.createDefaultModel = (model = {}) => _extends({}, sensibleDefaults.model, model);
+
+export { Matrix as default };
+//# sourceMappingURL=configure.js.map